/* assets/css/pages/home.css -- per-pagina laag (CLAUDE.md CSS-architectuur). In via mb_reve_pagina_css('home') in page-home.php. Tokens/componenten uit reve-base.css + reve-pages.css. */ .hero { padding: var(--sec) 0; } .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; } .hero .eyebrow { font: 500 12.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--c-label); margin: 0 0 16px; } .hero h1 { font-family: var(--f-display); font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1; font-weight: 400; max-width: 13ch; } .hero .sub { font: 400 17px/1.6 var(--f-body); max-width: 42ch; margin: 22px 0 32px; color: #3a3a3a; } .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; } .hero-media { aspect-ratio: 6/5; overflow: hidden; background: var(--c-grey-bg); } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 82%; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; } .hero-media { order: -1; aspect-ratio: 4/3; } } @media (max-width: 600px) { /* mobiel: de twee hero-knoppen onder elkaar over de volle breedte */ .hero .actions { flex-direction: column; align-items: stretch; gap: 12px; } } /* ---------- hero-drama: Ken Burns op het beeld + gestaged reveal on load ---------- */ .hero-media img { animation: reve-hero-kenburns 16s ease-out both; transform-origin: 55% 60%; will-change: transform, opacity; } .hero .eyebrow, .hero h1, .hero .sub, .hero .actions { opacity: 0; transform: translateY(22px); animation: reve-hero-in 1s cubic-bezier(.2,.7,.15,1) forwards; will-change: opacity, transform; } .hero .eyebrow { animation-delay: .2s; } .hero h1 { animation-delay: .5s; } .hero .sub { animation-delay: .95s; } .hero .actions { animation-delay: 1.3s; } @keyframes reve-hero-kenburns { 0% { opacity: 0; transform: scale(1.09); } 16% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } @keyframes reve-hero-in { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-media img, .hero .eyebrow, .hero h1, .hero .sub, .hero .actions { animation: none; opacity: 1; transform: none; } } /* ---------- reveal-on-scroll voor secties met data-reveal ---------- */ /* Element wacht op .revealed op de section; kick -> h2 -> 5 grid-items (0.4 s tussen) -> View all. */ [data-reveal] .kick, [data-reveal] .section-hd h2, [data-reveal] .section-hd .lnk { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } /* catgrid-items: foto blijft staan, mask-gradient veegt van links naar rechts binnen. */ [data-reveal] .catgrid > * { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 80%); mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 80%); -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position .9s cubic-bezier(.2,.7,.15,1), mask-position .9s cubic-bezier(.2,.7,.15,1); will-change: mask-position; } [data-reveal].revealed .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .section-hd h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .catgrid > *:nth-child(1) { -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: .55s; } [data-reveal].revealed .catgrid > *:nth-child(2) { -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: .95s; } [data-reveal].revealed .catgrid > *:nth-child(3) { -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: 1.35s; } [data-reveal].revealed .catgrid > *:nth-child(4) { -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: 1.75s; } [data-reveal].revealed .catgrid > *:nth-child(5) { -webkit-mask-position: 0 0; mask-position: 0 0; transition-delay: 2.15s; } [data-reveal].revealed .section-hd .lnk { opacity: 1; transform: none; transition-delay: 2.55s; } /* favourites-variant: intro (kick/h2/desc) -> slider-items 0.4 s tussen -> View all btn na de laatste. --reveal-items op de section (set door PHP) is het aantal slider-items, zodat de knop-delay zichzelf schaalt als er ooit minder of meer favourites zijn. */ [data-reveal] .favourites-intro .kick, [data-reveal] .favourites-intro h2, [data-reveal] .favourites-intro .desc, [data-reveal] .favourites-intro .btn, [data-reveal] .favourites-slider > * { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .favourites-intro .kick { opacity: 1; transform: none; transition-delay: 0s; } [data-reveal].revealed .favourites-intro h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .favourites-intro .desc { opacity: 1; transform: none; transition-delay: .45s; } [data-reveal].revealed .favourites-slider > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .75s; } [data-reveal].revealed .favourites-slider > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 1.15s; } [data-reveal].revealed .favourites-slider > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.55s; } [data-reveal].revealed .favourites-slider > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 1.95s; } [data-reveal].revealed .favourites-slider > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 2.35s; } [data-reveal].revealed .favourites-slider > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 2.75s; } [data-reveal].revealed .favourites-slider > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 3.15s; } [data-reveal].revealed .favourites-slider > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 3.55s; } [data-reveal].revealed .favourites-intro .btn { opacity: 1; transform: none; transition-delay: calc(.75s + var(--reveal-items, 8) * .4s); } /* story-shell: foto blijft staan (enkel opacity), rechts kick -> h2 -> lead -> 3 merken -> 5 usps. */ [data-reveal] .story-media img { opacity: 0; transition: opacity 1.1s cubic-bezier(.2,.7,.15,1); will-change: opacity; } [data-reveal].revealed .story-media img { opacity: 1; } [data-reveal] .story-panel .kick, [data-reveal] .story-panel h2, [data-reveal] .story-panel .lead, [data-reveal] .brandrow > *, [data-reveal] .usps-edit li { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .story-panel .kick { opacity: 1; transform: none; transition-delay: .3s; } [data-reveal].revealed .story-panel h2 { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .story-panel .lead { opacity: 1; transform: none; transition-delay: .9s; } [data-reveal].revealed .brandrow > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 1.25s; } [data-reveal].revealed .brandrow > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 1.45s; } [data-reveal].revealed .brandrow > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.65s; } [data-reveal].revealed .usps-edit li:nth-child(1) { opacity: 1; transform: none; transition-delay: 1.95s; } [data-reveal].revealed .usps-edit li:nth-child(2) { opacity: 1; transform: none; transition-delay: 2.35s; } [data-reveal].revealed .usps-edit li:nth-child(3) { opacity: 1; transform: none; transition-delay: 2.75s; } [data-reveal].revealed .usps-edit li:nth-child(4) { opacity: 1; transform: none; transition-delay: 3.15s; } [data-reveal].revealed .usps-edit li:nth-child(5) { opacity: 1; transform: none; transition-delay: 3.55s; } /* also-sectie: 2 brandcards (GR Collection + Geodesis) een voor een, na kick + h2. */ [data-reveal] .brandpair > * { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .brandpair > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .brandpair > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .95s; } /* pin-sectie (Pinterest-marquee): kick -> titel -> volledige fotoreeks in een keer -> CTA. */ [data-reveal] .pin h2, [data-reveal] .pinslider-wrap, [data-reveal] .pin-cta { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .pin h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .pinslider-wrap { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .pin-cta { opacity: 1; transform: none; transition-delay: 1.35s; } /* editorial-sectie (Herve Gregoir): foto fade, dan naam -> functie -> desc -> link. */ [data-reveal] .editorial-media img, [data-reveal] .editorial-media video { opacity: 0; transition: opacity 1.1s cubic-bezier(.2,.7,.15,1); will-change: opacity; } [data-reveal].revealed .editorial-media img, [data-reveal].revealed .editorial-media video { opacity: 1; } [data-reveal] .editorial-row h2, [data-reveal] .editorial-role, [data-reveal] .editorial-row .desc, [data-reveal] .editorial-row .go { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .editorial-row h2 { opacity: 1; transform: none; transition-delay: .3s; } [data-reveal].revealed .editorial-role { opacity: 1; transform: none; transition-delay: .55s; } [data-reveal].revealed .editorial-row .desc { opacity: 1; transform: none; transition-delay: .85s; } [data-reveal].revealed .editorial-row .go { opacity: 1; transform: none; transition-delay: 1.15s; } /* newsletter: kick -> titel -> tekst -> Gravity Form. */ [data-reveal] .news h2, [data-reveal] .news h2 + p, [data-reveal] .news form { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.15,1), transform .9s cubic-bezier(.2,.7,.15,1); will-change: opacity, transform; } [data-reveal].revealed .news h2 { opacity: 1; transform: none; transition-delay: .2s; } [data-reveal].revealed .news h2 + p { opacity: 1; transform: none; transition-delay: .45s; } [data-reveal].revealed .news form { opacity: 1; transform: none; transition-delay: .8s; } @media (prefers-reduced-motion: reduce) { [data-reveal] .kick, [data-reveal] .section-hd h2, [data-reveal] .catgrid > *, [data-reveal] .section-hd .lnk, [data-reveal] .favourites-intro .kick, [data-reveal] .favourites-intro h2, [data-reveal] .favourites-intro .desc, [data-reveal] .favourites-intro .btn, [data-reveal] .favourites-slider > *, [data-reveal] .story-media img, [data-reveal] .story-panel .kick, [data-reveal] .story-panel h2, [data-reveal] .story-panel .lead, [data-reveal] .brandrow > *, [data-reveal] .usps-edit li, [data-reveal] .brandpair > *, [data-reveal] .pin h2, [data-reveal] .pinslider-wrap, [data-reveal] .pin-cta, [data-reveal] .editorial-media img, [data-reveal] .editorial-media video, [data-reveal] .editorial-row h2, [data-reveal] .editorial-role, [data-reveal] .editorial-row .desc, [data-reveal] .editorial-row .go, [data-reveal] .news h2, [data-reveal] .news h2 + p, [data-reveal] .news form { opacity: 1; transform: none; transition: none; } }