/* ============================================================ AVCM — Rethink. Redesign. Reimagine. Static site stylesheet (no build step, Hostinger-ready) ------------------------------------------------------------ 1. Tokens 2. Reset & base 3. Typography utilities 4. Cursor 5. Preloader 6. Page transition 7. Navigation 8. Buttons 9. Layout & sections 10. Hero 11. Marquee 12. Stats (slot machine) 13. Baubles (service constellation) 14. Transformation slider 15. Service cards 16. Approach list 17. Contact & forms 18. Footer 19. Reveal animations 20. Responsive 21. Reduced motion ============================================================ */ /* ---------- 1. Tokens ---------- */ /* The theme is written to by an inline script in each page's , so the correct palette is in place before first paint. Dark is the default and also the fallback if that script never runs. */ :root, :root[data-theme='dark'] { color-scheme: dark; --ink: #000000; --ink-2: #08090b; --ink-3: #101216; --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.07); --paper: #ffffff; --muted: rgba(255, 255, 255, 0.58); --muted-2: rgba(255, 255, 255, 0.38); /* Channels for veils (scrims over imagery) and tints (subtle surface lift) */ --veil-rgb: 0, 0, 0; --tint-rgb: 255, 255, 255; --art-opacity: 0.5; --bg-art-opacity: 0.88; --bg-veil-left: 0.82; --bg-veil-mid: 0.56; --bg-veil-right: 0.38; --glow-opacity: 0.2; --blue: #38a3dc; --blue-deep: #1c7fb5; --yellow: #eab925; --green: #3e8e41; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --pad: clamp(1.25rem, 4vw, 4.5rem); --maxw: 1320px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', 'Inter', 'Segoe UI', Arial, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; } :root[data-theme='light'] { color-scheme: light; --ink: #ffffff; --ink-2: #f4f5f7; --ink-3: #e9ecef; --line: rgba(0, 0, 0, 0.16); --line-soft: rgba(0, 0, 0, 0.08); --paper: #0a0b0d; --muted: rgba(0, 0, 0, 0.62); --muted-2: rgba(0, 0, 0, 0.44); --veil-rgb: 255, 255, 255; --tint-rgb: 0, 0, 0; /* The generated art is all dark-on-black, so it sits back further on white */ --art-opacity: 0.24; --bg-art-opacity: 0.42; --bg-veil-left: 0.86; --bg-veil-mid: 0.62; --bg-veil-right: 0.34; --glow-opacity: 0.16; } /* Brand hues stay bright as *fills* in both themes (buttons, hovered baubles, marquee dots). Used as small text or a hairline on white they fail contrast, so light mode deepens them. `--accent-ink` resolves per element, picking up whatever `--accent` that element was given inline. */ * { --accent-ink: var(--accent, var(--blue)); } :root[data-theme='light'] * { --accent-ink: color-mix(in srgb, var(--accent, var(--blue)) 62%, #000); } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Deliberately no overflow-x here: setting it stops 's overflow-x from propagating to the viewport, which makes its own scroll container and breaks smooth scrolling. The rule below on is the one that tames the off-canvas glow layers. */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; background: var(--ink); color: var(--paper); transition: background-color 0.45s var(--ease), color 0.45s var(--ease); font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); line-height: 1.65; font-weight: 400; letter-spacing: -0.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Locked while the preloader is on screen */ body.is-loading { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; font-family: var(--font-display); } p { margin: 0; } ::selection { background: var(--blue); color: #000; } :focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--pad); z-index: 999; background: var(--yellow); color: #000; padding: 0.75rem 1.25rem; font-weight: 600; border-radius: 4px; transition: top 0.25s var(--ease); } .skip-link:focus { top: 1rem; } /* ---------- 3. Typography utilities ---------- */ .display-1 { font-size: clamp(2.5rem, 1.15rem + 5.4vw, 6rem); } .display-2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem); } .display-3 { font-size: clamp(1.65rem, 1.15rem + 2vw, 2.75rem); } .eyebrow { font-family: var(--font-display); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 0.85rem; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent-ink); flex: none; } .lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); line-height: 1.55; color: var(--muted); letter-spacing: -0.015em; } .serif-em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .text-blue { --accent: var(--blue); color: var(--accent-ink); } .text-yellow { --accent: var(--yellow); color: var(--accent-ink); } .text-green { --accent: var(--green); color: var(--accent-ink); } .text-muted { color: var(--muted); } /* The yellow full stop from the logo, reusable as a typographic mark */ .dot { --accent: var(--yellow); color: var(--accent-ink); } /* ---------- 3b. Brand logo (theme-aware) ---------- */ /* Two files rather than one: the wordmark is multicoloured, so a CSS mask would throw away the blue V, yellow dot and green swoosh. */ .brand-logo { display: block; position: relative; line-height: 0; } .brand-logo img { width: 100%; } :root[data-theme='light'] .brand-logo__dark { display: none; } :root:not([data-theme='light']) .brand-logo__light { display: none; } /* ---------- 3c. Theme toggle ---------- */ .theme-toggle { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--paper); overflow: hidden; transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease); } .theme-toggle:hover { border-color: var(--paper); background: rgba(var(--tint-rgb), 0.07); } .theme-toggle svg { position: absolute; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform 0.5s var(--ease-out), opacity 0.35s var(--ease); } /* Sun shows in dark mode (click for light), moon shows in light mode */ .theme-toggle__sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle__moon { opacity: 0; transform: rotate(-70deg) scale(0.4); } :root[data-theme='light'] .theme-toggle__sun { opacity: 0; transform: rotate(70deg) scale(0.4); } :root[data-theme='light'] .theme-toggle__moon { opacity: 1; transform: rotate(0deg) scale(1); } /* ---------- 4. Cursor ---------- */ .cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000; border-radius: 50%; mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s var(--ease); } .cursor { width: 7px; height: 7px; background: #fff; margin: -3.5px 0 0 -3.5px; } .cursor-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(255, 255, 255, 0.65); transition: opacity 0.3s var(--ease), width 0.35s var(--ease-out), height 0.35s var(--ease-out), margin 0.35s var(--ease-out), background-color 0.35s var(--ease-out); } body.cursor-ready .cursor, body.cursor-ready .cursor-ring { opacity: 1; } body.cursor-hover .cursor-ring { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(255, 255, 255, 0.12); } body.cursor-hover .cursor { opacity: 0; } /* ---------- 5. Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 8000; background: var(--ink); display: grid; place-items: center; transition: opacity 0.6s var(--ease); } .preloader.is-done { pointer-events: none; } .preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; } .preloader__logo { width: clamp(150px, 24vw, 250px); /* Wipe the logo in from left to right */ -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); animation: logo-wipe 1.1s var(--ease-out) 0.15s forwards; } @keyframes logo-wipe { to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } } .preloader__bar { position: relative; width: clamp(150px, 24vw, 250px); height: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .preloader__bar span { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--green), var(--blue) 60%, var(--yellow)); transition: inset 0.25s linear; } .preloader__count { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.26em; color: var(--muted-2); font-variant-numeric: tabular-nums; } /* ---------- 6. Page transition ---------- */ .transition { position: fixed; inset: 0; z-index: 7500; display: flex; pointer-events: none; } .transition__panel { flex: 1; background: var(--ink-2); transform: translateY(100%); } .transition__panel:nth-child(1) { background: #0b0c0f; } .transition__panel:nth-child(2) { background: var(--green); } .transition__panel:nth-child(3) { background: var(--blue); } .transition__panel:nth-child(4) { background: var(--yellow); } .transition__panel:nth-child(5) { background: #0b0c0f; } /* Cover: panels sweep up (leaving the page) */ .transition.is-covering .transition__panel { animation: panel-in 0.62s var(--ease-in-out) forwards; } .transition.is-covering .transition__panel:nth-child(1) { animation-delay: 0s; } .transition.is-covering .transition__panel:nth-child(2) { animation-delay: 0.06s; } .transition.is-covering .transition__panel:nth-child(3) { animation-delay: 0.12s; } .transition.is-covering .transition__panel:nth-child(4) { animation-delay: 0.18s; } .transition.is-covering .transition__panel:nth-child(5) { animation-delay: 0.24s; } /* Reveal: panels continue up and off (entering the page) */ .transition.is-revealing .transition__panel { transform: translateY(0); animation: panel-out 0.62s var(--ease-in-out) forwards; } .transition.is-revealing .transition__panel:nth-child(1) { animation-delay: 0.24s; } .transition.is-revealing .transition__panel:nth-child(2) { animation-delay: 0.18s; } .transition.is-revealing .transition__panel:nth-child(3) { animation-delay: 0.12s; } .transition.is-revealing .transition__panel:nth-child(4) { animation-delay: 0.06s; } .transition.is-revealing .transition__panel:nth-child(5) { animation-delay: 0s; } @keyframes panel-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes panel-out { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* ---------- 7. Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 6000; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem var(--pad); transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.is-stuck { background: rgba(var(--veil-rgb), 0.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line-soft); padding-top: 0.95rem; padding-bottom: 0.95rem; } .nav.is-hidden { transform: translateY(-102%); } .nav__logo { display: block; flex: none; } .nav__logo .brand-logo { width: clamp(88px, 9vw, 118px); transition: transform 0.5s var(--ease-out); } .nav__logo:hover .brand-logo { transform: scale(1.05); } .nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.75rem); } .nav__link { position: relative; font-family: var(--font-display); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 0.35rem 0; transition: color 0.3s var(--ease); overflow: hidden; } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .nav__link:hover { color: var(--paper); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .nav__link.is-current { color: var(--paper); } .nav__link.is-current::after { transform: scaleX(1); background: var(--yellow); } .nav__actions { display: flex; align-items: center; gap: 0.7rem; flex: none; } .nav__cta { display: none; } @media (min-width: 900px) { .nav__cta { display: inline-flex; } } /* Mobile menu */ .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; position: relative; z-index: 6200; } .nav__toggle span { display: block; width: 24px; height: 1.5px; background: var(--paper); transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease); } .nav__toggle span + span { margin-top: 6px; } body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); } body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-3.75px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 6100; background: var(--ink-2); display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 6rem var(--pad) 3rem; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: clip-path 0.7s var(--ease-out), -webkit-clip-path 0.7s var(--ease-out); visibility: hidden; } body.menu-open .menu { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); visibility: visible; } .menu__link { font-family: var(--font-display); font-size: clamp(2.25rem, 11vw, 3.75rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; padding: 0.25rem 0; opacity: 0; transform: translateY(28px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out), color 0.3s var(--ease); } body.menu-open .menu__link { opacity: 1; transform: translateY(0); } body.menu-open .menu__link:nth-child(1) { transition-delay: 0.22s; } body.menu-open .menu__link:nth-child(2) { transition-delay: 0.29s; } body.menu-open .menu__link:nth-child(3) { transition-delay: 0.36s; } .menu__link:hover { color: var(--blue); } .menu__foot { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 0.9rem; opacity: 0; transition: opacity 0.5s var(--ease) 0.45s; } body.menu-open .menu__foot { opacity: 1; } @media (min-width: 900px) { .nav__toggle, .menu { display: none; } } @media (max-width: 899px) { .nav__links { display: none; } } /* ---------- 8. Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; padding: 1rem 1.9rem; border-radius: 100px; font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; overflow: hidden; isolation: isolate; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); transition: color 0.4s var(--ease), border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.35s var(--ease-out); will-change: transform; } /* Fill sweeps up from the bottom on hover */ .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: translateY(101%); transition: transform 0.5s var(--ease-out); } .btn:hover::before { transform: translateY(0); } .btn:hover { color: #fff; border-color: var(--blue); } .btn__arrow { display: inline-block; transition: transform 0.4s var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--ghost { background: transparent; color: var(--paper); border-color: var(--line); } .btn--ghost::before { background: var(--paper); } .btn--ghost:hover { color: var(--ink); border-color: var(--paper); } .btn--yellow { background: var(--yellow); border-color: var(--yellow); color: #0a0b0d; } .btn--yellow::before { background: #0a0b0d; } .btn--yellow:hover { color: var(--yellow); border-color: #0a0b0d; } .btn--lg { padding: 1.2rem 2.4rem; font-size: 0.86rem; } /* Text link with animated rule */ .link-line { position: relative; display: inline-block; padding-bottom: 3px; font-weight: 500; } .link-line::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .link-line:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- 9. Layout & sections ---------- */ .shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } /* `overflow: hidden` keeps the decorative .glow blobs — which are deliberately positioned past the section edges — from widening the document. Nothing inside a section is meant to escape it, so this is safe. */ .section { padding-block: clamp(4.5rem, 10vw, 9.5rem); position: relative; overflow: hidden; } /* Keep anchored sections clear of the fixed header */ section[id] { scroll-margin-top: 96px; } /* ---- Full-bleed image bands ---- The artwork sits behind the whole section at low opacity instead of being a side-by-side thumbnail, so the copy gets the full width to work with. */ .section--bg { /* Own stacking context so the -1 layer stays inside the section */ isolation: isolate; padding-block: clamp(6rem, 12vw, 11rem); } .section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .section__bg img { /* Oversized and offset rather than scaled — the parallax script writes to `transform`, so anything set there would be clobbered on first scroll. */ position: absolute; top: -7%; left: 0; width: 100%; height: 114%; object-fit: cover; opacity: var(--bg-art-opacity); transition: opacity 0.45s var(--ease); } /* Veil: heaviest on the left where the headline sits, opening right so most of the artwork stays visible. Tune `--bg-veil-*` to trade legibility for image. */ .section__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--veil-rgb), var(--bg-veil-left)) 0%, rgba(var(--veil-rgb), var(--bg-veil-mid)) 46%, rgba(var(--veil-rgb), var(--bg-veil-right)) 100%), linear-gradient(180deg, var(--ink) 0%, rgba(var(--veil-rgb), 0.08) 20%, rgba(var(--veil-rgb), 0.08) 80%, var(--ink) 100%); } /* The artwork now reads through, so the copy gets a soft halo in the veil colour to hold contrast over the brighter parts of the render. */ .section--bg .section__head { text-shadow: 0 1px 20px rgba(var(--veil-rgb), 0.72); } .section--bg .lead { color: color-mix(in srgb, var(--paper) 88%, transparent); } /* These headings now have the full column, so they carry more weight. The band's head gets a wider left column than the standard split so the headline lands on two full lines instead of fragmenting. */ @media (min-width: 900px) { .section--bg .section__head--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); /* The rest of the site bottom-aligns split heads, but these bands have columns of very different heights, which left the right-hand copy floating above the eyebrow. Start-align so both sides share a top edge. */ align-items: start; } } .section__title--bg { font-size: clamp(2.05rem, 1.1rem + 3.2vw, 3.5rem); text-wrap: balance; max-width: 22ch; } @media (max-width: 899px) { .section__title--bg { max-width: none; } } .section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); } .section--line { border-top: 1px solid var(--line-soft); } .section__head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } @media (min-width: 900px) { .section__head--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; } } .grid-2 { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); } @media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } } /* Ambient brand glow used behind key sections */ .glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: var(--glow-opacity); pointer-events: none; z-index: -1; } .glow--blue { background: var(--blue); } .glow--green { background: var(--green); } .glow--yellow { background: var(--yellow); } /* Thin brand rule echoing the logo swoosh */ .swoosh { width: 100%; height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--green) 18%, var(--blue) 55%, var(--yellow) 82%, transparent); opacity: 0.5; } /* ---------- 10. Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 8vh, 5rem); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: var(--art-opacity); transform: scale(1.08); will-change: transform; transition: opacity 0.45s var(--ease); } .hero__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(72% 58% at 22% 42%, rgba(var(--veil-rgb),0.86) 0%, rgba(var(--veil-rgb),0.42) 55%, rgba(var(--veil-rgb),0.18) 100%), linear-gradient(180deg, rgba(var(--veil-rgb),0.9) 0%, rgba(var(--veil-rgb),0.18) 32%, rgba(var(--veil-rgb),0.72) 82%, var(--ink) 100%); } .hero__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); width: 100%; } @media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); align-items: end; gap: clamp(2rem, 5vw, 4.5rem); } } .hero__title { margin-block: 1.5rem 0; text-wrap: balance; } .hero__sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 34ch; } .hero__actions { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 0.85rem; } .hero__aside { display: grid; gap: 1.5rem; padding-bottom: 0.5rem; } .hero__note { border-left: 1px solid var(--line); padding-left: 1.25rem; color: var(--muted); font-size: 0.95rem; max-width: 34ch; } .hero__scroll { position: absolute; left: var(--pad); bottom: 1.75rem; display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); } .hero__scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, var(--blue), transparent); animation: scroll-pulse 2.2s var(--ease-in-out) infinite; transform-origin: top; } @keyframes scroll-pulse { 0%, 100% { transform: scaleY(0.35); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } } @media (max-width: 999px) { .hero__scroll { display: none; } } /* Interactive hero: the wordmark rebuilt as a cursor-reactive particle field */ .hero--interactive { text-align: center; } .hero--interactive .hero__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .hero--interactive .eyebrow { justify-content: center; } .hero--interactive .hero__sub { margin-inline: auto; max-width: 40ch; } .hero--interactive .hero__actions { justify-content: center; } .hero__stage { position: relative; width: min(660px, 84vw); aspect-ratio: 350 / 180; /* matches avcm-logo-white.png exactly */ margin-block: clamp(0.5rem, 2vw, 1.5rem) clamp(0.25rem, 1.5vw, 1rem); } .hero__canvas { display: block; width: 100%; height: 100%; cursor: none; touch-action: none; } @media (hover: none) { .hero__canvas { cursor: default; } } /* Static wordmark shown when canvas/JS is unavailable or motion is reduced */ .hero__stage-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; } .hero__stage-fallback .brand-logo { width: 100%; } .hero--interactive.is-canvas-live .hero__stage-fallback { display: none; } .hero__hint { font-family: var(--font-display); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); margin-top: 0.35rem; } @media (hover: none) { .hero__hint { display: none; } } /* Split-text reveal: one line mask per line, chars rise inside */ .split-line { display: block; overflow: hidden; /* Padding lets descenders breathe; the negative margin keeps line spacing honest */ padding-bottom: 0.14em; margin-bottom: -0.14em; } .split-word { display: inline-block; white-space: nowrap; } .split-char { display: inline-block; transform: translateY(115%) rotate(4deg); opacity: 0; will-change: transform; } .is-revealed .split-char { animation: char-rise 0.95s var(--ease-out) forwards; } @keyframes char-rise { to { transform: translateY(0) rotate(0deg); opacity: 1; } } /* ---------- 11. Marquee ---------- */ .marquee { position: relative; display: flex; overflow: hidden; padding-block: clamp(1.1rem, 2.2vw, 1.6rem); border-block: 1px solid var(--line-soft); background: var(--ink-2); user-select: none; } .marquee__track { display: flex; flex: none; align-items: center; gap: 2.5rem; padding-right: 2.5rem; animation: marquee 34s linear infinite; will-change: transform; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-100%); } } .marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; font-family: var(--font-display); font-size: clamp(0.95rem, 0.85rem + 0.55vw, 1.5rem); font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; color: var(--muted); } .marquee__item b { color: var(--paper); font-weight: 500; } .marquee__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); flex: none; } /* ---- Partner / sponsor logo scroller ---- */ .partners { background: var(--ink-2); border-block: 1px solid var(--line-soft); padding-block: clamp(1.75rem, 3.4vw, 2.75rem); } .partners__label { text-align: center; margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); font-family: var(--font-display); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted-2); } /* The scroller itself sits inside .partners, so it drops its own chrome */ .marquee--logos { background: transparent; border: 0; padding-block: 0; } /* A track narrower than the viewport leaves a bare gap at the loop's wrap point. `min-width: 100%` guarantees one track always spans at least the full width, so the pair tiles seamlessly however few logos there are — no measuring, no cloning, no JavaScript. `space-around` then spreads them out rather than bunching them at the left. */ .marquee--logos .marquee__track { min-width: 100%; gap: clamp(3rem, 6vw, 6rem); } .marquee--logos .marquee__item { flex: 1 0 auto; justify-content: space-around; gap: clamp(3rem, 6vw, 6rem); } .partners { /* --logo-h caps wordmarks; --logo-row is the taller band that compact marks are allowed to fill, so nothing gets clipped by the marquee's overflow. */ --logo-h: clamp(32px, 3.2vw, 44px); --logo-row: clamp(44px, 4.4vw, 62px); } .partner-logo { flex: none; display: grid; place-items: center; min-width: clamp(90px, 9vw, 130px); height: var(--logo-row); } /* Names set as type — the default, and what ships until a brand grants permission to reproduce its actual mark. */ .partner-logo__name { font-family: var(--font-display); font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.3rem); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; color: var(--paper); opacity: 0.46; transition: opacity 0.4s var(--ease); } .marquee--logos:hover .partner-logo__name { opacity: 0.78; } .partner-logo:hover .partner-logo__name { opacity: 1; } .partner-logo img { /* Cap both axes: a wide wordmark and a near-square crest both have to sit on the same optical line without one dwarfing the other. A concrete value, not 100% — a percentage max-height against an auto grid row is treated as `none` by browsers, which lets tall marks blow out of the row. */ max-height: var(--logo-h); max-width: clamp(118px, 12vw, 175px); /* keeps the two caps from fighting on very wide wordmarks */ min-width: 0; width: auto; height: auto; object-fit: contain; opacity: 0.62; /* The source files are white-on-transparent, so this just re-colours them: white on the dark theme, black on the light one. Any full-colour file dropped in later gets flattened the same way. */ filter: brightness(0) invert(1); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); } :root[data-theme='light'] .partner-logo img { filter: brightness(0); } .marquee--logos:hover .partner-logo img { opacity: 0.9; } .partner-logo:hover img { opacity: 1; } /* Compact, near-square marks (the OTF trillium) read visually smaller than a wordmark at the same height, so they get the taller cap. */ .partner-logo--mark img { max-height: var(--logo-row); } /* Opt out per logo when a brand requires its real colours */ .partner-logo--full-colour img { filter: none; opacity: 0.85; } .partner-logo--full-colour:hover img { opacity: 1; } /* ---------- 12. Stats (slot machine) ---------- */ .stats { position: relative; background: var(--ink); } .stats__grid { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); } @media (min-width: 640px) { .stats__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } } .stat { position: relative; background: var(--ink); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); overflow: hidden; transition: background-color 0.45s var(--ease); } .stat::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); } .stat:hover { background: var(--ink-3); } .stat:hover::after { transform: scaleX(1); } .stat__num { display: flex; align-items: flex-end; font-family: var(--font-display); font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: var(--paper); font-variant-numeric: tabular-nums; } /* One digit column = a reel; the track slides to land on the target digit */ .reel { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: bottom; } .reel__track { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; } .reel__track span { display: block; height: 1em; line-height: 1; text-align: center; } .stat__suffix { color: var(--accent-ink); } .stat__label { margin-top: 0.85rem; font-size: 0.82rem; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-family: var(--font-display); font-weight: 500; max-width: 20ch; } /* ---------- 13. Baubles (service constellation) ---------- */ .baubles { position: relative; overflow: hidden; } .baubles__stage { position: relative; display: flex; min-height: 780px; margin-inline: auto; max-width: 1200px; } .baubles__holder { display: flex; flex-direction: column; row-gap: 1.25rem; align-items: center; flex-grow: 1; width: 100%; } .bauble { transition: all 0.3s var(--ease); } /* Hex arrangement, mirroring the reference layout */ @media (min-width: 900px) { .bauble { position: absolute; } .bauble--0 { top: 20%; left: calc(60% - 10vw); } .bauble--1 { top: 25%; left: calc(30% - 10vw); } .bauble--2 { top: 25%; left: calc(90% - 10vw); } .bauble--3 { top: 70%; left: calc(30% - 10vw); } .bauble--4 { top: 75%; left: calc(60% - 10vw); } .bauble--5 { top: 70%; left: calc(90% - 10vw); } } .bauble__body { width: 15vw; height: 15vw; min-width: 128px; min-height: 128px; max-width: 400px; max-height: 400px; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 9999px; border: 1px solid var(--line); background: transparent; color: var(--paper); transform: translate(-50%, -50%); transition: all 0.3s var(--ease); cursor: pointer; } .bauble__body::before { /* Soft brand halo that only shows on hover */ content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 50% 120%, var(--accent, var(--blue)) 0%, transparent 68%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; } .bauble__title { font-family: var(--font-display); font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.2rem); font-weight: 700; line-height: 1.16; letter-spacing: -0.025em; text-align: center; transition: all 0.3s var(--ease); } .bauble__index { display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; color: var(--muted-2); margin-bottom: 0.6rem; transition: color 0.3s var(--ease); } .bauble__content { text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; transition: all 0.3s var(--ease); } .bauble__inner { max-width: 80%; margin-inline: auto; transition: all 0.3s var(--ease); } .bauble__item { font-size: clamp(0.72rem, 0.66rem + 0.25vw, 0.9rem); line-height: 1.3; color: rgba(255, 255, 255, 0.92); } .bauble__sep { width: 50px; height: 1px; background: rgba(255, 255, 255, 0.55); margin: 10px auto; } /* Desktop: collapsed by default, blooms open on hover */ @media (min-width: 900px) { .bauble__inner { opacity: 0; overflow: hidden; max-height: 0; } .bauble__body:hover, .bauble__body:focus-visible { width: 25vw; height: 25vw; min-width: 128px; min-height: 128px; max-width: 550px; max-height: 550px; background: var(--accent, var(--blue)); border-color: var(--accent, var(--blue)); color: #fff; z-index: 5; } .bauble__body:hover::before, .bauble__body:focus-visible::before { opacity: 0.35; } .bauble__body:hover .bauble__inner, .bauble__body:focus-visible .bauble__inner { opacity: 1; max-height: 550px; } .bauble__body:hover .bauble__index, .bauble__body:focus-visible .bauble__index { color: rgba(255, 255, 255, 0.78); } .bauble__body:hover .bauble__title, .bauble__body:focus-visible .bauble__title { margin-bottom: 0.85rem; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.6rem); } /* Yellow bauble needs dark text for contrast */ .bauble--yellow .bauble__body:hover, .bauble--yellow .bauble__body:focus-visible { color: #000; } .bauble--yellow .bauble__body:hover .bauble__index { color: rgba(0, 0, 0, 0.62); } .bauble--yellow .bauble__body:hover .bauble__item { color: rgba(0, 0, 0, 0.88); } .bauble--yellow .bauble__body:hover .bauble__sep { background: rgba(0, 0, 0, 0.5); } /* Idle drift so the constellation feels alive */ .bauble { animation: bauble-float 9s var(--ease-in-out) infinite; } .bauble--0 { animation-duration: 8.5s; animation-delay: -0.4s; } .bauble--1 { animation-duration: 10.5s; animation-delay: -2.1s; } .bauble--2 { animation-duration: 9.4s; animation-delay: -3.6s; } .bauble--3 { animation-duration: 11.2s; animation-delay: -1.3s; } .bauble--4 { animation-duration: 9.9s; animation-delay: -4.4s; } .bauble--5 { animation-duration: 8.8s; animation-delay: -2.8s; } .bauble:has(.bauble__body:hover) { animation-play-state: paused; } } @keyframes bauble-float { 0%, 100% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(6px, -14px, 0); } 66% { transform: translate3d(-7px, 8px, 0); } } /* Mobile: plain stacked pills, no overlap tricks */ @media (max-width: 899px) { .baubles__stage { min-height: 0; } .bauble { width: 100%; max-width: 420px; } .bauble__body { width: 100%; height: auto; max-width: none; max-height: none; min-height: 0; border-radius: 26px; padding: 1.65rem 1.5rem; transform: none; background: var(--ink-3); border-color: var(--line-soft); align-items: flex-start; text-align: left; cursor: default; } .bauble__body::before { display: none; } .bauble__title { text-align: left; } .bauble__index { color: var(--accent-ink); } .bauble__content { align-items: flex-start; width: 100%; } .bauble__inner { max-width: 100%; margin-top: 0.9rem; } .bauble__item { text-align: left; color: var(--muted); } .bauble__sep { margin: 8px 0; width: 34px; background: var(--line); } } .baubles__hint { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); } @media (max-width: 899px) { .baubles__hint { display: none; } } /* ---------- 14. Transformation slider ---------- */ .compare { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); cursor: ew-resize; background: var(--ink-3); touch-action: none; user-select: none; } .compare__layer { position: absolute; inset: 0; } .compare__layer img { width: 100%; height: 100%; object-fit: cover; } /* Top layer is clipped to the handle position */ .compare__layer--after { -webkit-clip-path: inset(0 0 0 var(--pos, 50%)); clip-path: inset(0 0 0 var(--pos, 50%)); } .compare__tag { position: absolute; bottom: 1rem; padding: 0.45rem 0.95rem; border-radius: 100px; font-family: var(--font-display); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .compare__tag--before { left: 1rem; background: rgba(0,0,0,0.62); color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.16); } .compare__tag--after { right: 1rem; background: var(--blue); color: #0a0b0d; } .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; } .compare__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: #ffffff; color: #0a0b0d; display: grid; place-items: center; font-size: 0.85rem; letter-spacing: -0.1em; box-shadow: 0 8px 34px rgba(0, 0, 0, 0.55); } /* ---------- 15. Service cards ---------- */ .cards { display: grid; gap: 1.25rem; } @media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } } /* Feature treatment — the three services are the commercial heart of the page, so they get an accent edge, a ghosted numeral and a visible next step. */ .cards--feature { gap: 1.5rem; } .cards--feature .card { padding: clamp(2rem, 3.4vw, 3rem); border-radius: 24px; border-color: var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--blue)) 12%, transparent) 0%, rgba(var(--tint-rgb), 0.02) 46%, rgba(var(--tint-rgb), 0.01) 100%); } /* Accent bar across the top edge, drawn on from the left on hover */ .cards--feature .card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent, var(--blue)); transform: scaleX(0.16); transform-origin: left; transition: transform 0.6s var(--ease-out); } .cards--feature .card:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--accent, var(--blue)) 55%, transparent); box-shadow: 0 26px 70px -30px color-mix(in srgb, var(--accent, var(--blue)) 70%, transparent); } .cards--feature .card:hover::after { transform: scaleX(1); } /* Oversized ghosted number sitting behind the copy */ .card__figure { position: absolute; top: -0.24em; right: 0.06em; font-family: var(--font-display); font-size: clamp(6rem, 4rem + 7vw, 11rem); font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: var(--accent, var(--blue)); opacity: 0.14; pointer-events: none; z-index: -1; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); } .cards--feature .card:hover .card__figure { opacity: 0.24; transform: translateY(4px); } .cards--feature .card__num { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; } .cards--feature .card__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); letter-spacing: -0.04em; } .cards--feature .card__body { font-size: 1.02rem; } .card__cta { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.4rem; font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); transition: gap 0.4s var(--ease-out); } .card__cta:hover { gap: 0.95rem; } .card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--line-soft); border-radius: 20px; background: linear-gradient(180deg, rgba(var(--tint-rgb),0.035), rgba(var(--tint-rgb),0.008)); overflow: hidden; isolation: isolate; transition: transform 0.55s var(--ease-out), border-color 0.45s var(--ease); will-change: transform; } .card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tint-rgb),0.09), transparent 62%); opacity: 0; transition: opacity 0.45s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--line); } .card:hover::before { opacity: 1; } .card__num { font-family: var(--font-display); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; color: var(--accent-ink); } .card__title { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.85rem); } .card__body { color: var(--muted); font-size: 0.98rem; } .card__list { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); display: grid; gap: 0.5rem; font-size: 0.88rem; color: var(--muted); } .card__list li { display: flex; gap: 0.65rem; align-items: baseline; } .card__list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-ink); flex: none; transform: translateY(-2px); } /* ---------- 16. Approach list ---------- */ .steps { border-top: 1px solid var(--line-soft); } .step { display: grid; gap: 0.75rem 2rem; padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-bottom: 1px solid var(--line-soft); position: relative; transition: padding-left 0.5s var(--ease-out); } @media (min-width: 860px) { .step { grid-template-columns: 90px minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } .step:hover { padding-left: 1.25rem; } } .step::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--accent, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); } .step:hover::before { transform: scaleX(1); } .step__num { font-family: var(--font-display); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; color: var(--muted-2); padding-top: 0.45rem; } .step__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -0.04em; } .step__body { color: var(--muted); } /* ---------- 17. Contact & forms ---------- */ .contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); } @media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } } .form { display: grid; gap: 1.6rem; } .field { position: relative; } .field input, .field select, .field textarea { width: 100%; padding: 1.1rem 0 0.85rem; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--paper); font: inherit; border-radius: 0; transition: border-color 0.4s var(--ease); -webkit-appearance: none; appearance: none; } .field select { cursor: pointer; padding-right: 1.5rem; } .field select option { background: var(--ink-3); color: var(--paper); } .field textarea { resize: vertical; min-height: 92px; } .field label { position: absolute; top: 1.1rem; left: 0; font-size: 1rem; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform 0.35s var(--ease-out), color 0.35s var(--ease); } /* Float the label once the field has focus or content */ .field input:focus + label, .field textarea:focus + label, .field select:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label, .field select.has-value + label { transform: translateY(-1.15rem) scale(0.72); color: var(--blue); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); } /* Underline sweep on focus */ .field::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); } .field:focus-within::after { transform: scaleX(1); } .field.has-error input, .field.has-error select { border-bottom-color: #e2564a; } .field__error { display: block; margin-top: 0.45rem; font-size: 0.76rem; color: #e2564a; min-height: 1em; } .field__opt { font-size: 0.78em; letter-spacing: 0.04em; color: var(--muted-2); } .form__note { font-size: 0.82rem; color: var(--muted-2); } .form__status { padding: 1rem 1.15rem; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--ink-3); font-size: 0.9rem; color: var(--muted); display: none; } .form__status.is-visible { display: block; } .form__status.is-ok { border-color: var(--green); color: var(--paper); } .contact-aside { display: grid; gap: 1.25rem; padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid var(--line-soft); border-radius: 20px; background: linear-gradient(180deg, rgba(var(--tint-rgb),0.04), rgba(var(--tint-rgb),0.01)); } .contact-aside__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; } .contact-aside__row:last-of-type { border-bottom: 0; } .contact-aside__row span:first-child { color: var(--muted-2); font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; padding-top: 0.2rem; } /* ---------- 18. CTA band & footer ---------- */ .cta-band { position: relative; text-align: center; overflow: hidden; padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--line-soft); } .cta-band__title { font-size: clamp(2.25rem, 1.2rem + 4.8vw, 5.5rem); text-wrap: balance; } .footer { border-top: 1px solid var(--line-soft); background: var(--ink-2); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .footer__top { display: grid; gap: 2.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); } @media (min-width: 880px) { .footer__top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } } .footer__logo { width: 132px; margin-bottom: 1.25rem; } .footer__tag { color: var(--muted); max-width: 32ch; font-size: 0.95rem; } .footer__head { font-family: var(--font-display); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.1rem; } .footer__list { display: grid; gap: 0.65rem; font-size: 0.95rem; color: var(--muted); } .footer__list a { transition: color 0.3s var(--ease); } .footer__list a:hover { color: var(--paper); } .footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--muted-2); } /* ---------- 19. Reveal animations ---------- */ [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--delay, 0s); } [data-reveal].is-revealed { opacity: 1; transform: none; } [data-reveal='fade'] { transform: none; } [data-reveal='left'] { transform: translateX(-40px); } [data-reveal='right'] { transform: translateX(40px); } [data-reveal='scale'] { transform: scale(0.94); } /* Image reveal: a brand-coloured shade slides away */ .img-reveal { position: relative; overflow: hidden; border-radius: 18px; } .img-reveal::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(1); transform-origin: right; transition: transform 1s var(--ease-in-out); } .img-reveal.is-revealed::after { transform: scaleX(0); } .img-reveal img { transform: scale(1.14); transition: transform 1.4s var(--ease-out); } .img-reveal.is-revealed img { transform: scale(1); } /* Parallax layer driven from JS */ [data-parallax] { will-change: transform; } /* ---------- 20. Responsive odds & ends ---------- */ @media (max-width: 640px) { .btn { padding: 0.9rem 1.5rem; font-size: 0.76rem; } .hero { min-height: auto; padding-top: 8rem; } } /* Touch devices: no custom cursor, no hover-only reliance */ @media (hover: none) { .cursor, .cursor-ring { display: none; } } /* ---------- 21. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1 !important; transform: none !important; } .split-char { opacity: 1 !important; transform: none !important; } .img-reveal::after { transform: scaleX(0) !important; } .img-reveal img { transform: none !important; } .marquee__track { animation: none !important; } .bauble { animation: none !important; } .cursor, .cursor-ring { display: none !important; } }