/* ========================================================================== MVE System — tokens ========================================================================== */ :root { --bg: #070707; --bg-2: #0d0d0d; --bg-3: #141414; --fg: #f4f1ea; --fg-muted: #9a958c; --fg-faint: #6b675f; --accent: #9ab8e4; --line: rgba(244, 241, 234, 0.10); --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 6rem; --space-8: 8rem; --container: 68rem; --gutter: 1rem; } @media (min-width: 768px) { :root { --gutter: 2rem; } } /* ========================================================================== Caratteri: Inter e Inter Tight, dal nostro server (assets/font/) e non da Google Fonts, così l'indirizzo IP dei visitatori non arriva a Google (privacy.html non elenca Google fra i destinatari). File "variabili": uno solo per tutti i pesi. "latin" copre l'italiano; "latin-ext" il browser lo scarica solo se in pagina c'è una lettera sua. I due "latin" sono precaricati nell' di ogni pagina. ========================================================================== */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/font/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/font/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../assets/font/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../assets/font/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.intro-active { overflow: hidden; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================== Wordmark ========================================================================== */ .wordmark { margin: 0; font-family: var(--font-display); font-size: clamp(2.6rem, 9vw, 5.5rem); line-height: 1; letter-spacing: -0.045em; display: inline-flex; align-items: baseline; gap: 0.18em; } .wordmark__mve { font-weight: 800; color: var(--fg); } .wordmark__sys { font-weight: 300; color: var(--fg-muted); letter-spacing: -0.02em; } .wordmark--small { font-size: 1.25rem; } .wordmark--hero { font-size: clamp(3rem, 11vw, 7.5rem); } /* ========================================================================== Barra di navigazione Fissa in alto, nascosta durante intro e storia: js/nav.js aggiunge .is-visible dal marchio in giù. Niente backdrop-filter: costa a ogni scroll. ========================================================================== */ :root { --nav-h: 64px; } html { scroll-padding-top: var(--nav-h); } /* i link e l'aggancio non finiscono sotto la barra */ /* ========================================================================== Scroll magnetico (nativo del browser) Ogni sezione ha un punto di aggancio: il suo contenuto centrato nello spazio sotto la barra. "mandatory": finito uno scroll, la pagina si ferma sempre su un punto; un colpo di rotella porta al successivo. Lo fa il browser, sullo stesso motore dello scroll normale: nessuna attesa, segue trackpad e dita. Le zone più alte dello schermo (la storia, una sezione lunga su telefono) si scorrono liberamente: il browser aggancia solo ai loro bordi. ========================================================================== */ html { scroll-snap-type: y mandatory; } /* Intro e fermate della storia sono a schermo pieno e senza barra: il margine negativo annulla lo spazio della barra, così si agganciano al bordo alto della finestra. "always": un colpo di rotella avanza di una fermata, non le salta. */ .intro, .story__slot { scroll-snap-align: start; scroll-margin-top: calc(var(--nav-h) * -1); } .story__slot { scroll-snap-stop: always; } .brand, .band, .section > .container { scroll-snap-align: center; } .footer { scroll-snap-align: end; } .nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); background: rgba(7, 7, 7, 0.9); border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform 420ms var(--ease-out), visibility 0s linear 420ms; } .nav.is-visible { transform: none; visibility: visible; transition: transform 420ms var(--ease-out), visibility 0s; } .nav__inner { height: 100%; display: flex; align-items: center; gap: var(--space-4); } .nav__brand { text-decoration: none; margin-right: auto; } .nav__menu { display: flex; align-items: center; gap: var(--space-3); } .nav__link { position: relative; padding: 0.4rem 0; font-size: 0.92rem; color: var(--fg-muted); text-decoration: none; transition: color 200ms var(--ease-out); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); } .nav__link:hover { color: var(--fg); } .nav__link.is-active { color: var(--fg); } .nav__link.is-active::after { transform: scaleX(1); } .nav__link--mobile { display: none; } /* Le sezioni ricevono il fuoco dai link della barra (per la tastiera): senza contorno. */ section[tabindex="-1"]:focus { outline: none; } .nav__cta { display: inline-flex; align-items: center; min-height: 38px; padding: 0 1.1rem; border-radius: 999px; background: var(--fg); color: #101010; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: opacity 200ms var(--ease-out); } .nav__cta:hover { opacity: 0.88; } /* Lingua (IT | EN), in fondo a destra nella barra. Sulla home la barra resta nascosta durante intro e storia, ma il selettore no: resta visibile al suo posto (lo spostamento in giù annulla quello in su della barra), con un fondo scuro suo per leggersi sul video. */ .nav__lang { display: inline-flex; align-items: center; flex: none; margin-left: calc(var(--space-2) * -1); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 7, 7, 0.6); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; transition: transform 420ms var(--ease-out); } .nav:not(.is-visible) .nav__lang { visibility: visible; transform: translateY(var(--nav-h)); } .nav__lang-opt { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 0.5rem; border-radius: 999px; color: var(--fg-muted); text-decoration: none; transition: color 200ms var(--ease-out), background-color 200ms var(--ease-out); } a.nav__lang-opt:hover { color: var(--fg); background: rgba(244, 241, 234, 0.06); } .nav__lang-opt.is-current { background: rgba(244, 241, 234, 0.12); color: var(--fg); } .nav__toggle { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--fg); cursor: pointer; } .nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 20px; height: 1.5px; margin: 0 auto; background: currentColor; transition: transform 250ms var(--ease-out), opacity 200ms; } .nav__bars { position: relative; } .nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; } .nav__bars::before { top: -6px; } .nav__bars::after { top: 6px; } .nav.is-open .nav__bars { background: transparent; } .nav.is-open .nav__bars::before { transform: translateY(6px) rotate(45deg); } .nav.is-open .nav__bars::after { transform: translateY(-6px) rotate(-45deg); } /* Telefono e tablet stretti: voci in un menu a tendina sotto la barra. */ @media (max-width: 859px) { .nav__inner { gap: var(--space-2); } .nav__lang { margin-left: 0; } .nav__cta { display: none; } .nav__toggle { display: block; } .nav__link--mobile { display: block; } .nav__menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-1) var(--gutter) var(--space-3); background: var(--bg); border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms; } .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; } .nav__link { padding: 0.85rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav__link:last-child { border-bottom: 0; } .nav__link::after { display: none; } } /* ========================================================================== Intro ========================================================================== */ .intro { position: relative; min-height: 100dvh; background: #000; overflow: hidden; display: grid; place-items: center; isolation: isolate; } .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms var(--ease-out); } .intro__video.is-playing { opacity: 1; } /* In verticale "cover" ingrandirebbe il video fino a tagliare l'orologio ai lati. Lo dimensiono invece sull'orologio: il corpo occupa ~46 % della larghezza del video, quindi a 205vw entra tutto nello schermo con un filo di margine, e il suo centro (al 59 % dell'altezza del video) finisce al centro della finestra. Il fondo e' gia' scuro nel video, quindi le bande sopra e sotto si confondono col nero. */ @media (orientation: portrait) { .intro__video { inset: auto; left: 50%; top: 50%; width: 205vw; height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -59%); /* sfuma i bordi sopra e sotto nel nero, niente stacco dove finisce il video */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 80%, transparent 100%); } } .intro__black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1000ms var(--ease-io); } .intro__black.is-on { opacity: 1; } /* --- Schermata finale: "10 secondi." + invito a scorrere --- */ .intro__final { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; text-align: center; padding-inline: var(--gutter); opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms; } .intro__final.is-visible { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } .intro__line { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-muted); opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } .intro__line--xl { font-weight: 600; font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; color: var(--fg); } .intro__line + .intro__line { margin-top: var(--space-3); } /* Le due righe entrano una dopo l'altra, poi l'invito a scorrere. */ .intro__final.is-visible .intro__line { opacity: 1; transform: none; } .intro__final.is-visible .intro__line:nth-child(1) { transition-delay: 300ms; } .intro__final.is-visible .intro__line:nth-child(2) { transition-delay: 1400ms; } .intro__scroll { position: absolute; left: 50%; bottom: max(var(--space-4), env(safe-area-inset-bottom)); transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: var(--space-1) var(--space-2); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); opacity: 0; transition: opacity 700ms var(--ease-out), color 200ms var(--ease-out); } .intro__final.is-visible .intro__scroll { opacity: 1; transition-delay: 2600ms, 0s; } .intro__scroll:hover { color: var(--fg); } /* Pulsa tre volte per attirare l'occhio, poi si ferma: niente animazioni infinite decorative. */ .intro__final.is-visible .intro__scroll svg { animation: nudge 1.6s var(--ease-io) 3.2s 3; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* --- Pillole: "Salta l'intro" (durante) e "Rivedi l'intro" (alla fine) --- */ .intro__skip, .intro__replay { position: absolute; z-index: 5; right: max(var(--space-2), env(safe-area-inset-right)); bottom: max(var(--space-2), env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 7, 7, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--fg-muted); font: inherit; font-size: 0.85rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out), color 200ms, border-color 200ms, visibility 0s linear 400ms; } .intro__skip.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .intro__skip:hover, .intro__replay:hover { color: var(--fg); border-color: rgba(244, 241, 234, 0.3); } .intro__skip[hidden] { display: none; } /* Rivedi vive dentro .intro__final: appare e scompare con lei, senza transizioni proprie. */ .intro__replay { opacity: 1; visibility: visible; transform: none; transition: color 200ms, border-color 200ms; } /* ========================================================================== Story: il video comandato dallo scroll .story è alta 100dvh + la "corsa" dello scroll (impostata da js/story.js); .story__stage è sticky e resta a schermo intero per tutta la corsa. Il video viene posizionato da JS (copre la finestra in orizzontale, bande nere in verticale, ingrandito quanto basta perché lo schermo del monitor sia leggibile). Ogni .screen è il testo di una fermata: JS lo mostra e lo posiziona sopra lo schermo del monitor, seguendolo mentre la camera si muove. ========================================================================== */ .story { position: relative; height: calc(100dvh * 5); /* una schermata per fermata */ background: #000; } /* I punti di aggancio: una schermata per fermata, sotto lo stage. */ .story__slots { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(5, 1fr); pointer-events: none; } .story__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; background: #000; isolation: isolate; } .story__video { position: absolute; left: var(--v-left, 0px); top: var(--v-top, 0px); width: var(--v-w, 100%); height: var(--v-h, 100%); max-width: none; object-fit: cover; background: #000; visibility: hidden; /* dei due video se ne vede uno: quello che sta andando nel verso giusto */ } .story__video.is-shown { visibility: visible; } /* Il testo vero, sopra lo schermo nero del monitor. Le unità cqw scalano con lo schermo. Per sembrare "acceso" e non incollato: fusione in modalità screen (aggiunge solo luce), tinta fredda da pannello LCD, alone attorno alle lettere e un lieve bagliore che illumina il centro dello schermo. */ .screen { position: absolute; left: 0; top: 0; width: 200px; height: 120px; display: grid; place-content: center; text-align: center; padding: 3% 5%; container-type: inline-size; opacity: 0; visibility: hidden; border-radius: 2px; overflow: hidden; will-change: opacity, transform; } /* La frase si accende all'arrivo sulla fermata e si spegne quando si riparte. */ .screen { transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease, visibility 0s linear 250ms; } .screen.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity 550ms var(--ease-out), transform 650ms var(--ease-out), visibility 0s; } @media (prefers-reduced-motion: reduce) { .screen, .screen.is-on { transform: none; transition-duration: 150ms; } } /* Il pannello acceso: copre lo schermo del video (che in alcune fermate ha un riflesso chiaro su metà schermo e sembrerebbe diviso) con un nero uniforme da LCD, poi la retroilluminazione, un po' più forte al centro. Entra in dissolvenza: sembra accendersi. */ .screen::before { content: ""; position: absolute; inset: 0 0 3.5%; /* in basso resta scoperta la cornice del monitor, compresa nella misura */ background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(140, 170, 215, 0.13), rgba(140, 170, 215, 0) 70%), linear-gradient(180deg, rgba(120, 150, 200, 0.05), rgba(120, 150, 200, 0.02)), #05070b; pointer-events: none; } .screen > * { position: relative; z-index: 1; } .screen__lead, .screen__num, .screen__text { margin: 0; font-family: var(--font-display); text-wrap: balance; } .screen__lead { font-weight: 400; font-size: max(0.9rem, 3.4cqw); line-height: 1.28; letter-spacing: -0.01em; color: #aebbd2; text-shadow: 0 0 0.5cqw rgba(170, 195, 235, 0.45); max-width: 30ch; margin: 0 auto 3cqw; } .screen__num { font-weight: 700; font-size: max(2.4rem, 14cqw); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: #eef3ff; text-shadow: 0 0 0.6cqw rgba(200, 220, 255, 0.55), 0 0 3cqw rgba(140, 175, 240, 0.28), 0 0 8cqw rgba(110, 150, 230, 0.16); } .screen__num--xxl { font-size: max(2.8rem, 17cqw); } .screen__text { font-weight: 600; font-size: max(1.8rem, 9cqw); line-height: 1.05; letter-spacing: -0.035em; color: #eef3ff; text-shadow: 0 0 0.6cqw rgba(200, 220, 255, 0.5), 0 0 3cqw rgba(140, 175, 240, 0.25), 0 0 8cqw rgba(110, 150, 230, 0.14); } .screen__text--body { font-weight: 400; font-size: max(1rem, 4.6cqw); line-height: 1.3; letter-spacing: -0.015em; max-width: 28ch; margin-inline: auto; } /* --- Indicatore: a che fotogramma sei, e l'invito iniziale a scorrere --- */ .story__dots { position: absolute; z-index: 10; left: 50%; bottom: max(var(--space-3), env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; } .story__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 241, 234, 0.25); transition: background 300ms var(--ease-out), transform 300ms var(--ease-out); } .story__dot.is-active { background: var(--fg); transform: scale(1.25); } .story__hint { position: absolute; z-index: 10; left: 50%; bottom: calc(max(var(--space-3), env(safe-area-inset-bottom)) + 22px); transform: translateX(-50%); margin: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; transition: opacity 400ms var(--ease-out); } /* ========================================================================== Brand ========================================================================== */ /* Il marchio: una schermata intera per lui. L'entrata e' in js/brand.js; --aura (0-1) la aggiorna lo scroll, piu' alta quando il marchio e' al centro. */ .brand { --aura: 0; position: relative; isolation: isolate; overflow: hidden; /* Alto quanto lo spazio sotto la barra: così è un solo punto di aggancio (più alto, il browser lo tratterebbe come zona da scorrere). */ min-height: calc(100dvh - var(--nav-h)); display: grid; place-content: center; justify-items: center; text-align: center; padding: var(--space-8) var(--gutter); } /* Alone: si accende all'entrata (esterno) e respira con lo scroll (interno). */ .brand__aura { position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1200px, 150vw); aspect-ratio: 2 / 1; transform: translate(-50%, -50%) scale(0.55); opacity: 0; pointer-events: none; transition: opacity 1600ms var(--ease-out), transform 2400ms var(--ease-out); } .brand:not(.is-armed) .brand__aura, .brand.is-shown .brand__aura { opacity: 1; transform: translate(-50%, -50%) scale(1); } .brand__aura-core { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 40% at 50% 50%, rgba(154, 184, 228, 0.3), transparent 70%), radial-gradient(ellipse 62% 58% at 50% 54%, rgba(110, 145, 210, 0.15), transparent 72%); filter: blur(34px); will-change: transform, opacity; /* la sfocatura si calcola una volta sola; lo scroll muove solo il livello */ opacity: calc(0.4 + 0.6 * var(--aura)); transform: scale(calc(0.9 + 0.2 * var(--aura))); transition: opacity 250ms linear, transform 250ms linear; } .brand__anim { display: inline-flex; align-items: baseline; gap: 0.18em; } .brand__anim .wordmark__mve { display: inline-flex; } /* Ogni lettera sale da sotto una linea invisibile: la maschera e' la lettera stessa, con un po' di margine perche' i bordi del glifo non vengano tagliati. */ .brand__l { display: inline-block; overflow: hidden; padding: 0.08em 0.06em 0.04em; margin: -0.08em -0.06em -0.04em; } .brand__l > span { display: inline-block; transition: text-shadow 1400ms var(--ease-out); } .brand.is-armed .brand__l > span { transform: translateY(115%); } .brand.is-armed.is-shown .brand__l > span { transform: none; transition: transform 1050ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 1400ms var(--ease-out); } .brand.is-shown .brand__l:nth-child(1) > span { transition-delay: 150ms, 0s; } .brand.is-shown .brand__l:nth-child(2) > span { transition-delay: 260ms, 0s; } .brand.is-shown .brand__l:nth-child(3) > span { transition-delay: 370ms, 0s; } /* "System" esce dalla sfocatura, scivolando appena in posizione. Niente animazione della spaziatura: sposterebbe tutto il marchio mentre si stringe. */ .brand__anim .wordmark__sys { display: inline-block; transition: text-shadow 1400ms var(--ease-out); } .brand.is-armed .brand__anim .wordmark__sys { opacity: 0; filter: blur(12px); transform: translateX(0.35em); } .brand.is-armed.is-shown .brand__anim .wordmark__sys { opacity: 1; filter: blur(0); transform: none; transition: opacity 1100ms var(--ease-out) 600ms, filter 1200ms var(--ease-out) 600ms, transform 1300ms cubic-bezier(0.16, 1, 0.3, 1) 600ms, text-shadow 1400ms var(--ease-out); } /* Il bagliore arriva a lettere ferme, quando la maschera non serve piu'. */ .brand.is-settled .brand__l { overflow: visible; } .brand.is-settled .brand__l > span { text-shadow: 0 0 26px rgba(154, 184, 228, 0.42), 0 0 90px rgba(154, 184, 228, 0.22); } .brand.is-settled .brand__anim .wordmark__sys { text-shadow: 0 0 40px rgba(154, 184, 228, 0.18); } /* La frase, riga per riga, dopo il marchio. */ /* Azzeramento fuori schermo (js/brand.js): torna alla partenza senza animare. */ .brand.is-resetting *, .brand.is-resetting *::before, .brand.is-resetting *::after { transition: none !important; } .brand__line { display: block; } .brand.is-armed .brand__line { opacity: 0; transform: translateY(12px); } .brand.is-armed.is-shown .brand__line { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); } .brand.is-shown .brand__line:nth-child(1) { transition-delay: 1150ms; } .brand.is-shown .brand__line:nth-child(2) { transition-delay: 1320ms; } .brand__tagline { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: -0.01em; color: var(--fg-muted); max-width: 34ch; text-wrap: balance; } /* Entrate in scena: js/reveal.js marca gli elementi e imposta --i (l'ordine), il CSS fa il resto. Movimento breve e sfasamento piccolo: si nota appena. E' un'animazione e non una transizione perche' card e progetti hanno gia' una loro transition per l'hover, che avrebbe avuto la meglio. A entrata finita js/reveal.js toglie la classe: l'elemento torna normale e l'hover funziona come sempre. */ .reveal { opacity: 0; } .is-revealed .reveal { animation: reveal-up 620ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } @keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ========================================================================== Sections ========================================================================== */ .section { padding-block: var(--space-7); border-top: 1px solid var(--line); background: var(--bg); } @media (min-width: 768px) { .section { padding-block: var(--space-8); } } .eyebrow { margin: 0 0 var(--space-2); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .section__title { margin: 0 0 var(--space-5); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; } /* Titolo che deve stare su una riga sola (su schermi abbastanza larghi) */ @media (min-width: 960px) { .section__title--oneline { max-width: none; white-space: nowrap; } } .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } @media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--bg-2); min-width: 0; } .stat__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat__label { font-size: 0.9rem; line-height: 1.45; color: var(--fg-muted); } .stat__src { margin-top: auto; padding-top: var(--space-1); font-size: 0.8rem; color: var(--fg-faint); text-decoration: underline; text-decoration-color: rgba(244, 241, 234, 0.25); text-underline-offset: 3px; transition: color 200ms; } .stat__src:hover { color: var(--fg); } .formula { margin-top: var(--space-5); border-top: 1px solid var(--line); } .formula__row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); } .formula__k { color: var(--fg-muted); font-size: 0.95rem; } .formula__v { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; text-align: right; color: var(--fg-muted); } .formula__v strong { color: var(--fg); font-weight: 600; } /* Su schermi larghi i quattro passaggi stanno su una riga: la sezione resta alta quanto lo schermo e lo scroll magnetico la può centrare. */ @media (min-width: 1000px) { .formula { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--space-3); background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .formula__row { grid-template-columns: 1fr; align-content: start; gap: 0.3rem; padding: var(--space-2) var(--space-3); border-bottom: 0; background: var(--bg); } .formula__v { text-align: left; } } .note { margin: var(--space-4) 0 0; max-width: 62ch; color: var(--fg-muted); font-size: 0.95rem; } .note a { color: var(--fg); text-decoration-color: rgba(244, 241, 234, 0.3); text-underline-offset: 3px; } .note a:hover { text-decoration-color: var(--accent); } /* ========================================================================== Sezioni di vendita: servizi, metodo, progetti, perche', contatti ========================================================================== */ .section--alt { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(154, 184, 228, 0.055), transparent 70%), var(--bg-2); } .section__intro { margin: calc(var(--space-4) * -1 + var(--space-1)) 0 var(--space-5); max-width: 58ch; color: var(--fg-muted); font-size: 1.05rem; } .section__title + .section__intro { margin-top: calc(var(--space-5) * -1 + var(--space-2)); } /* --- Griglie di card --- */ .cards { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --- Card servizio --- */ .card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out); } .card > :not(.card__media) { margin-inline: var(--space-4); } .card > :first-child:not(.card__media) { margin-top: var(--space-4); } .card > :last-child { margin-bottom: var(--space-4); } .card:hover { border-color: rgba(244, 241, 234, 0.22); transform: translateY(-2px); } /* Fascia fotografica in cima alla card. Se la foto manca resta il riquadro scuro. */ .card__media { margin: 0; aspect-ratio: 16 / 7; background: linear-gradient(140deg, #16202e, #0b0f16); overflow: hidden; } .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .card__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; } .card__body { margin: 0; color: var(--fg-muted); font-size: 0.98rem; } /* --- Metodo: 01 02 03 04 --- */ /* --- Metodo: un passo alla volta --------------------------------------- Senza JS: lista dei quattro passi (nav e comandi nascosti). Con JS (.is-enhanced): la linea in alto con i quattro nodi e' la navigazione, sotto si vede un passo alla volta. --progress (0-1) lo imposta js/stepper.js. */ .stepper { --progress: 0; } .stepper:not(.is-enhanced) .stepper__nav, .stepper:not(.is-enhanced) .stepper__hint { display: none; } .stepper:not(.is-enhanced) .stepper__panel + .stepper__panel { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); } /* Navigazione: quattro colonne, il nodo in alto a sinistra di ognuna. */ .stepper__nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--space-5); } /* La linea va dal primo all'ultimo nodo: 3 colonne su 4. */ .stepper__track { position: absolute; left: 5px; top: 4.5px; width: 75%; height: 2px; border-radius: 2px; background: rgba(244, 241, 234, 0.1); overflow: hidden; } .stepper__fill { display: block; width: calc(var(--progress) * 100%); height: 100%; background: linear-gradient(90deg, rgba(154, 184, 228, 0.5), var(--accent)); transition: width 450ms var(--ease-out); } .stepper__tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px; padding: 28px var(--space-2) var(--space-2) 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .stepper__dot { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 1.5px rgba(154, 184, 228, 0.45), 0 0 0 5px var(--bg-2); transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out); } .stepper__tab:hover .stepper__dot { transform: scale(1.15); } .stepper__tab.is-done .stepper__dot { background: var(--accent); box-shadow: 0 0 0 5px var(--bg-2); } .stepper__tab[aria-selected="true"] .stepper__dot { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 5px var(--bg-2), 0 0 18px rgba(154, 184, 228, 0.7); } .stepper__n { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; color: var(--fg-faint); transition: color 250ms var(--ease-out); } .stepper__label { font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg-muted); transition: color 250ms var(--ease-out); } .stepper__tab:hover .stepper__n, .stepper__tab:hover .stepper__label { color: var(--fg); } .stepper__tab[aria-selected="true"] .stepper__n { color: var(--accent); } .stepper__tab[aria-selected="true"] .stepper__label { color: var(--fg); font-weight: 600; } /* Su telefono i titoli non ci stanno: restano i numeri, il titolo e' nel pannello. */ @media (max-width: 719px) { .stepper__label { display: none; } } /* Pannelli: tutti nella stessa cella della griglia, cosi' l'altezza e' quella del piu' alto e la pagina non salta quando si cambia passo. */ .stepper__panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-5); align-items: start; } .stepper__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; } .stepper.is-enhanced .stepper__panels { display: grid; } .stepper.is-enhanced .stepper__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s linear 380ms; } .stepper.is-enhanced .stepper__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .stepper__big { grid-row: span 2; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.6rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: rgba(244, 241, 234, 0.2); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .stepper__big { background: linear-gradient(170deg, rgba(244, 241, 234, 0.4), rgba(154, 184, 228, 0.12)); -webkit-background-clip: text; background-clip: text; color: transparent; } } .stepper__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; } .stepper__body { margin: 0; max-width: 52ch; color: var(--fg-muted); font-size: 1.05rem; line-height: 1.6; } @media (max-width: 599px) { .stepper__panel { grid-template-columns: 1fr; } .stepper__big { grid-row: auto; margin-bottom: var(--space-1); } } /* Suggerimento: dice come si usa, poi sparisce alla prima interazione. Mouse o dito a seconda del dispositivo. */ .stepper__hint { margin: calc(var(--space-5) * -1 + var(--space-2)) 0 var(--space-4); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--fg-faint); transition: opacity 400ms var(--ease-out); } .stepper.has-interacted .stepper__hint { opacity: 0; } .stepper__hint-touch { display: none; } @media (hover: none), (pointer: coarse) { .stepper__hint-hover { display: none; } .stepper__hint-touch { display: inline; } } /* --- Progetti tipo: foto + risultato --- */ .work { display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 250ms var(--ease-out), transform 250ms var(--ease-out); } .work:hover { border-color: rgba(244, 241, 234, 0.22); transform: translateY(-2px); } .work__media { margin: 0; aspect-ratio: 3 / 2; background: linear-gradient(140deg, #16202e, #0b0f16); overflow: hidden; } .work__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Schermi larghi ma bassi (portatili): sezioni un po' più compatte, così stanno intere sotto la barra e lo scroll magnetico le centra. */ @media (min-width: 1000px) and (max-height: 880px) { .section__title { margin-bottom: var(--space-4); } .section__title + .section__intro { margin-top: calc(var(--space-4) * -1 + var(--space-2)); } .section__intro { margin-bottom: var(--space-4); } .work__media { aspect-ratio: 2.5 / 1; } .stat { padding: var(--space-2) var(--space-3); } .note { margin-top: var(--space-3); } } /* Se la foto non c'e' ancora, resta un riquadro scuro invece dell'icona rotta. */ .work__media.is-empty { background: linear-gradient(140deg, #16202e, #0b0f16); } .work__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); flex: 1; } .work__tag { margin: 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); } .work__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } .work__text { margin: 0; color: var(--fg-muted); font-size: 0.95rem; } .work__kpi { margin: auto 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--fg-muted); } .work__kpi-v { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--fg); } /* --- Pagina a sé (chi-siamo.html): la sezione riempie lo spazio sotto la barra, con il contenuto centrato in orizzontale e in verticale. --- */ .section--pagina { min-height: 100dvh; padding-top: calc(var(--nav-h) + var(--space-5)); padding-bottom: var(--space-5); border-top: 0; display: grid; align-content: center; text-align: center; } .section--pagina .section__title, .section--pagina .section__intro { margin-inline: auto; } .section--pagina .team { margin-inline: auto; max-width: 54rem; } /* --- Chi siamo: la squadra --- */ .team__label { margin-bottom: var(--space-3); } .team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .team__member { text-align: center; } .team__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); } .team__name { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.02em; } .team__role { margin: 0.3rem 0 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* --- Perche': testo + pannello chiaro --- */ .why { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .why { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-6); } } .checks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); } .check { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start; } .check__i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: rgba(154, 184, 228, 0.14); color: var(--accent); font-size: 0.8rem; } .check strong { display: block; font-weight: 600; font-size: 1rem; } .check span:not(.check__i) { display: block; color: var(--fg-muted); font-size: 0.95rem; } /* Pannello dell'offerta: scuro come il resto, si distingue con un bordo e un alone azzurro appena accennati. L'unica cosa chiara e' il pulsante, che e' l'azione. */ .panel { position: relative; padding: var(--space-4); border-radius: 16px; border: 1px solid rgba(154, 184, 228, 0.22); background: radial-gradient(ellipse 90% 70% at 0% 0%, rgba(154, 184, 228, 0.12), transparent 70%), var(--bg-3); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); } .panel__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--fg); } .panel__body { margin: 0 0 var(--space-4); color: var(--fg-muted); font-size: 0.98rem; } .panel__cta { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; background: var(--fg); color: #101010; font-weight: 600; font-size: 1rem; text-decoration: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .panel__cta svg { width: 17px; height: 17px; flex: none; transition: transform 200ms var(--ease-out); } .panel__cta:hover { opacity: 0.9; transform: translateY(-1px); } .panel__cta:hover svg { transform: translateX(3px); } .panel__note { margin: var(--space-2) 0 0; font-size: 0.85rem; color: var(--fg-faint); } /* --- Banda fotografica a tutta larghezza --- */ .band { position: relative; min-height: min(72vh, 560px); display: grid; place-items: center; padding: var(--space-7) var(--gutter); background: linear-gradient(140deg, #16202e, #0b0f16); overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Velo: leggero sull'intera foto, denso solo dietro la frase, cosi' la foto resta viva ai bordi e il testo ha comunque il contrasto che serve. */ .band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 60% at 50% 50%, rgba(7, 7, 7, 0.72), rgba(7, 7, 7, 0) 72%), linear-gradient(180deg, rgba(7, 7, 7, 0.22), rgba(7, 7, 7, 0.42)); } .band__quote { position: relative; z-index: 1; margin: 0; max-width: 20ch; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; color: var(--fg); } /* --- Contatti --- */ .contact { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; } @media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .info { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); } .info__row { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2); padding-block: var(--space-2); border-top: 1px solid var(--line); align-items: baseline; } .info__k { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); } .info__v { color: var(--fg); overflow-wrap: anywhere; } a.info__v { text-decoration: underline; text-decoration-color: rgba(244, 241, 234, 0.3); text-underline-offset: 3px; } a.info__v:hover { text-decoration-color: var(--accent); } /* Niente modulo: il pulsante apre la posta verso info@mvegroup.it (così il sito non raccoglie dati, come dice privacy.html). Il pannello è quello di "Perché noi". */ @media (min-width: 900px) { .contact__panel { align-self: center; } } .panel__note a { color: var(--fg-muted); text-decoration-color: rgba(244, 241, 234, 0.3); text-underline-offset: 3px; } .panel__note a:hover { color: var(--fg); text-decoration-color: var(--accent); } /* --- Pagine di testo (privacy.html) --- Un testo lungo da leggere: niente scroll magnetico (anche la rete di sicurezza in js/nav.js lo capisce da qui), colonna stretta allineata a sinistra. */ html.pagina-testo { scroll-snap-type: none; } .section--testo { padding-top: calc(var(--nav-h) + var(--space-6)); border-top: 0; } .legale { max-width: 46rem; } .legale .section__title { margin-bottom: var(--space-3); } .legale h2 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--fg); } .legale p, .legale li { color: var(--fg-muted); } .legale p { margin: 0 0 var(--space-2); } .legale ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; display: grid; gap: var(--space-1); } .legale strong { color: var(--fg); font-weight: 500; } .legale a { color: var(--fg); text-decoration-color: rgba(244, 241, 234, 0.3); text-underline-offset: 3px; overflow-wrap: anywhere; } .legale a:hover { text-decoration-color: var(--accent); } .legale .legale__data { margin-top: var(--space-5); font-size: 0.88rem; color: var(--fg-faint); } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--line); padding-block: var(--space-4); } .footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .footer__meta { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; } .footer__link { font-size: 0.85rem; color: var(--fg-muted); text-decoration: underline; text-decoration-color: rgba(244, 241, 234, 0.25); text-underline-offset: 3px; } .footer__link:hover { color: var(--fg); text-decoration-color: var(--accent); } .footer__copy { font-size: 0.85rem; color: var(--fg-faint); } /* ========================================================================== Portatili con schermo basso (per esempio Full HD con zoom al 150 %, 1366x768) Lo scroll magnetico centra ogni sezione nello spazio sotto la barra: per farlo la sezione deve starci intera. Qui tutto un po' più compatto, così ci stanno anche a 1280x620 con margine. (Misura: tools/perf/sezioni.mjs) ========================================================================== */ @media (min-width: 1000px) and (max-height: 760px) { .eyebrow { margin-bottom: 0.5rem; } .section__title { font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin-bottom: var(--space-3); } .section__title + .section__intro { margin-top: calc(var(--space-3) * -1 + 0.5rem); } .section__intro { margin-bottom: var(--space-3); font-size: 0.98rem; line-height: 1.55; } .cards { gap: var(--space-2); } .card { gap: 0.6rem; } .card__media { aspect-ratio: 16 / 5; } .card > :first-child:not(.card__media) { margin-top: var(--space-3); } .card > :last-child { margin-bottom: var(--space-3); } .card__title { font-size: 1.15rem; } .card__body { font-size: 0.92rem; line-height: 1.5; } .stepper__nav { margin-bottom: var(--space-4); } .work__media { aspect-ratio: 3.4 / 1; } .work__body { gap: 0.35rem; padding: var(--space-2) var(--space-3) var(--space-3); } .work__title { font-size: 1.05rem; } .work__text { font-size: 0.88rem; line-height: 1.5; } .work__kpi { padding-top: 0.6rem; font-size: 0.85rem; } .team { max-width: 40rem; gap: var(--space-2); } .team__label { margin-bottom: var(--space-2); } .team__name { margin-top: 0.6rem; font-size: 1rem; } .checks { gap: var(--space-2); } .check span:not(.check__i) { font-size: 0.9rem; line-height: 1.5; } .panel { padding: var(--space-3); } .panel__body { margin-bottom: var(--space-3); font-size: 0.92rem; } .stat { gap: 0.3rem; padding: 0.8rem var(--space-3); } .stat__num { font-size: 1.6rem; } .formula__row { padding: 0.7rem var(--space-3); } .note { margin-top: var(--space-2); font-size: 0.88rem; line-height: 1.55; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .intro__final, .intro__line, .intro__scroll, .intro__skip, .intro__video, .intro__black { transition-duration: 200ms; transition-delay: 0s; transform: none !important; } .reveal, .is-revealed .reveal { animation: none; opacity: 1; } .brand__aura, .brand__aura-core { transition: none; } .stepper__fill, .stepper__dot { transition: none; } .stepper.is-enhanced .stepper__panel { transition: none; transform: none; } .intro__final.is-visible .intro__scroll svg { animation: none; } }