/* ============================================================ URBAN GRND — polish.css Verfijnings-laag bovenop het bestaande designsysteem. Alles is additief en fail-safe: zonder JS blijft alle content gewoon zichtbaar (reveal-states zijn gescoped op .js-reveal). ============================================================ */ /* ===== 1. SCROLL-REVEAL (alleen als JS + support aanwezig) ===== reveal.js zet .js-reveal op . Zonder dat blijft alles zichtbaar. */ .js-reveal .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .js-reveal .reveal.is-in{opacity:1;transform:none} /* lichte stagger voor kaart-grids */ .js-reveal .reveal.is-in .ug-card, .js-reveal .reveal.is-in .act-feature, .js-reveal .reveal.is-in .combi-card, .js-reveal .reveal.is-in .rcard{animation:ug-pop .5s cubic-bezier(.22,.61,.36,1) both} @keyframes ug-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .js-reveal .reveal{opacity:1!important;transform:none!important} } /* ===== 2. DIEPTE OP DONKERE VLAKKEN ===== subtiele amber-gloed rechtsboven + zachte vignet, geeft de vlakke violet-vlakken meer richness zonder de kleur te veranderen. */ .act-hero{position:relative} .act-hero::after{ content:"";position:absolute;top:-120px;right:-120px; width:520px;height:520px;border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(227,150,56,.22),transparent 62%); pointer-events:none;z-index:0; } .act-hero__inner{position:relative;z-index:1} .act-review{position:relative;overflow:hidden} .act-review::after{ content:"";position:absolute;left:-90px;bottom:-90px; width:320px;height:320px;border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(227,150,56,.20),transparent 60%); pointer-events:none; } .act-review>*{position:relative;z-index:1} /* ===== 3. FOTO-ZOOM OP KAARTEN (hover) ===== */ .ug-card__media,.rcard__media{overflow:hidden} .ug-card__media img,.rcard__media img{transition:transform .5s cubic-bezier(.22,.61,.36,1)} .ug-card--link:hover .ug-card__media img, .rcard:hover .rcard__media img{transform:scale(1.06)} /* hero-foto krijgt een heel subtiele inzoom bij pagina-load-hover */ .act-hero__visual img{transition:transform .6s cubic-bezier(.22,.61,.36,1)} .act-hero__visual:hover img{transform:scale(1.03)} /* ===== 4. KNOP-VERFIJNING: zachte glans-sweep op amber-knoppen ===== */ .ug-btn--amber{position:relative;overflow:hidden} .ug-btn--amber::after{ content:"";position:absolute;top:0;left:-40%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-18deg);transition:left .55s ease;pointer-events:none; } .ug-btn--amber:hover::after{left:130%} /* ===== 5. SECTIE-HEADS: fijn amber streepje onder de eyebrow-kop ===== */ .act-head h2{position:relative} .act-head .ug-eyebrow--dot{margin-bottom:2px} /* ===== 6. FAQ chevron-animatie soepeler ===== */ .act-faq summary{transition:color .15s ease,background .15s ease} .act-faq details[open] summary{background:rgba(227,150,56,.05)} /* ===== 7. Zachtere selectie-kleur ===== */ ::selection{background:var(--ug-amber-300);color:var(--ug-violet-900)} /* ===== 8. Afbeeldingen nooit uitgerekt / netjes ===== */ img{max-width:100%} /* Het hidden-attribuut moet altijd winnen. Zonder deze regel verliest de UA-stijl [hidden]{display:none} van elke eigen regel die display zet, en blijven verborgen elementen zichtbaar (zoals de vakantie-badge). */ [hidden]{display:none!important}