/* ========================================================= HUDIO — portfolio site Theme is driven by [data-theme] on (see j.js) 1. Tokens & reset 8. Sections, cards & glow 2. Utilities 9. Service rows & detail cards 3. Header, nav & logo 10. Process, accordion, tables, chips 4. Buttons 11. Pricing 5. Custom cursor 12. About & contact 6. The live gradient 13. Footer, errors, responsive 7. Marquee ========================================================= */ /* --------------------------------------------------------- 1. TOKENS & RESET --------------------------------------------------------- */ :root { --font-display: 'Teachers', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --shell: min(1400px, 100% - 5rem); --radius: 10px; --radius-sm: 6px; --ease: cubic-bezier(0.22, 0.68, 0.16, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --accent-a: #c026a8; --accent-b: #2f6fe4; --accent-c: #e9b93b; --accent-g: #22a06b; --accent-v: #6c5ce7; } html[data-theme='dark'] { --bg: #000000; --bg-soft: #0c0c0e; --bg-lift: #121215; --fg: #ffffff; --fg-dim: rgba(255, 255, 255, 0.62); --fg-faint: rgba(255, 255, 255, 0.34); --line: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.07); --card: rgba(255, 255, 255, 0.035); --shadow: rgba(0, 0, 0, 0.6); --ok: #3ddc97; /* A premium, restrained red — reserved for highlights, never a fill. */ --accent-r: #e0223d; /* Gradient system. Saturated inks screen-blended over a dark base. */ --orb-1: #c026a8; --orb-2: #e0483c; --orb-3: #e9b93b; --orb-4: #2f6fe4; --orb-5: #22a06b; --orb-blend: screen; --orb-opacity: 0.92; --canvas-base: linear-gradient(135deg, #120a24 0%, #0a1526 48%, #1a0f14 100%); --grain-opacity: 0.12; /* Ink used on top of a gradient panel. */ --on-canvas: #ffffff; --on-canvas-invert: #000000; --on-canvas-dim: rgba(255, 255, 255, 0.88); --on-canvas-faint: rgba(255, 255, 255, 0.7); --canvas-shadow: 0 30px 90px -30px rgba(140, 90, 255, 0.5); /* Acrylic: a deep, slightly cold pane that sits over the black. */ --acrylic: linear-gradient(158deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 42%, rgba(0, 0, 0, 0.25)); --acrylic-edge: rgba(255, 255, 255, 0.16); --acrylic-glow: rgba(0, 0, 0, 0.55); --cursor-ink: 255, 255, 255; } html[data-theme='light'] { --bg: #ffffff; --bg-soft: #f6f6f4; --bg-lift: #ffffff; --fg: #0a0a0a; --fg-dim: rgba(10, 10, 10, 0.72); --fg-faint: rgba(10, 10, 10, 0.5); --line: rgba(10, 10, 10, 0.2); --line-soft: rgba(10, 10, 10, 0.09); --card: rgba(10, 10, 10, 0.045); --shadow: rgba(10, 10, 10, 0.18); --ok: #0f9d6a; --accent-r: #d81034; /* Light mode used to multiply pale pastels over a near-white base, which read as washed out. These are the same hues at real saturation — still lighter than the dark-mode inks, but with actual chroma — multiplied at near-full opacity so they hold their colour instead of fading to tint. */ --orb-1: #ef5da8; --orb-2: #ff7a63; --orb-3: #f4c94a; --orb-4: #4f8bff; --orb-5: #33c98a; --orb-blend: multiply; --orb-opacity: 0.95; --canvas-base: linear-gradient(135deg, #fbeeff 0%, #eaf1ff 48%, #fff0e8 100%); --grain-opacity: 0.05; /* The gradient is pale here, so its ink has to flip to dark or the hero headline disappears. */ --on-canvas: #14101c; --on-canvas-invert: #ffffff; --on-canvas-dim: rgba(20, 16, 28, 0.82); --on-canvas-faint: rgba(20, 16, 28, 0.64); --canvas-shadow: 0 30px 90px -34px rgba(120, 80, 200, 0.38); --acrylic: linear-gradient(158deg, rgba(255, 255, 255, 0.92), rgba(248, 248, 252, 0.65) 42%, rgba(10, 10, 20, 0.05)); --acrylic-edge: rgba(10, 10, 10, 0.14); --acrylic-glow: rgba(80, 70, 120, 0.2); --cursor-ink: 20, 16, 28; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 6rem; } /* --- custom scrollbar --- */ html { scrollbar-width: thin; scrollbar-color: var(--fg-faint) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--fg-faint); background-image: linear-gradient(var(--accent-a), var(--accent-b)); background-blend-mode: overlay; border-radius: 100px; border: 3px solid var(--bg); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background-color: var(--fg-dim); } ::-webkit-scrollbar-corner { background: transparent; } body { background: var(--bg); color: var(--fg); font-family: var(--font-display); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.45s var(--ease), color 0.45s var(--ease); } ::selection { background: var(--fg); color: var(--bg); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; } /* --------------------------------------------------------- 2. UTILITIES --------------------------------------------------------- */ .shell { width: var(--shell); margin-inline: auto; } .sr-only { 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: fixed; top: 0.75rem; left: 0.75rem; z-index: 200; padding: 0.6rem 1rem; background: var(--fg); color: var(--bg); border-radius: var(--radius-sm); font-weight: 600; transform: translateY(-160%); transition: transform 0.25s var(--ease); } .skip-link:focus { transform: none; } .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.9rem; } .linkish { background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; padding: 0; } /* --------------------------------------------------------- LIQUID THEME SWITCH The new theme is revealed through an expanding circle centred on the toggle button, driven by the View Transitions API in j.js. Browsers without it just get the ordinary colour transition. --------------------------------------------------------- */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 0; } ::view-transition-new(root) { z-index: 1; } html.theme-animating, html.theme-animating body { overflow-x: clip; } /* Shown only when the app is running with DEV_INSECURE=1. */ .devbadge { position: fixed; left: 0; bottom: 0; z-index: 300; padding: 0.4rem 0.8rem; background: #e0483c; color: #fff; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; border-top-right-radius: var(--radius-sm); pointer-events: none; } .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent-a), var(--accent-r), var(--accent-b), var(--accent-c)); } /* --- flash messages --- */ .flashes { position: fixed; top: 5.5rem; right: 1.5rem; z-index: 140; display: grid; gap: 0.6rem; width: min(24rem, calc(100% - 3rem)); } .flash { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-lift); box-shadow: 0 20px 50px -20px var(--shadow); font-size: 0.92rem; animation: flash-in 0.5s var(--ease) both; } .flash--success { border-left: 3px solid var(--ok); } .flash--error { border-left: 3px solid var(--accent-r); } .flash--info { border-left: 3px solid var(--accent-b); } .flash__close { margin-left: auto; background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--fg-faint); } .flash__close:hover { color: var(--fg); } @keyframes flash-in { from { opacity: 0; transform: translateX(1.5rem); } } /* --------------------------------------------------------- 3. HEADER, NAV & LOGO --------------------------------------------------------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color 0.4s var(--ease), transform 0.45s var(--ease); } .site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); } .site-header.is-hidden { transform: translateY(-105%); } .nav { width: 100%; display: flex; align-items: center; gap: 2rem; padding: 1.35rem clamp(1.5rem, 4vw, 3.5rem); } /* --- animated logo: a small orbit of glowing particles around the wordmark, idling slowly and speeding up on hover. Pure CSS: the speed change is driven by a transitionable custom property (@property below), so it needs no JS and never blocks on a busy main thread. --------- */ .nav__logo { position: relative; display: inline-flex; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.34em; padding-right: 0.34em; transform: scale(1); transition: transform 0.5s var(--ease-spring); } .nav__logo:hover, .nav__logo:focus-visible { transform: scale(1.14); } @property --orbit-speed { syntax: ''; inherits: false; initial-value: 1; } .nav__logo-orbit { --orbit-speed: 1; position: absolute; inset: -9px -0.34em -9px -6px; pointer-events: none; transition: --orbit-speed 0.7s var(--ease-out); } .nav__logo:hover .nav__logo-orbit, .nav__logo:focus-visible .nav__logo-orbit { --orbit-speed: 3.4; } .orbit__p { position: absolute; inset: 0; animation: orbit-spin var(--orbit-base, 10s) linear infinite; animation-duration: calc(var(--orbit-base, 10s) / var(--orbit-speed)); } .orbit__p i { position: absolute; top: 50%; left: 50%; width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 9px 2.5px currentColor, 0 0 16px 4px currentColor; opacity: 0.9; } .orbit__p--a { --orbit-base: 9s; } .orbit__p--a i { transform: translateX(15px); color: var(--accent-a); } .orbit__p--b { --orbit-base: 13s; animation-direction: reverse; } .orbit__p--b i { transform: translateX(20px) translateY(3px); color: var(--accent-r); opacity: 0.85; } .orbit__p--c { --orbit-base: 16s; } .orbit__p--c i { transform: translateX(11px) translateY(-4px); color: var(--accent-b); opacity: 0.8; } .orbit__p--d { --orbit-base: 11s; animation-direction: reverse; } .orbit__p--d i { transform: translateX(24px) translateY(-6px); color: var(--accent-g); opacity: 0.75; width: 2.5px; height: 2.5px; margin: -1.25px 0 0 -1.25px; } .orbit__p--e { --orbit-base: 19s; } .orbit__p--e i { transform: translateX(17px) translateY(7px); color: var(--accent-v); opacity: 0.7; width: 2.5px; height: 2.5px; margin: -1.25px 0 0 -1.25px; } @keyframes orbit-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .orbit__p { animation: none; } .orbit__p i { opacity: 0.4; } } .nav__links { list-style: none; display: flex; gap: 2.4rem; margin-inline: auto; font-weight: 600; font-size: 0.98rem; } .nav__links-cta { display: none; } .nav__links a { position: relative; padding-block: 0.25rem; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav__links a:hover::after, .nav__links a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; } .nav__links a[aria-current='page'] { color: var(--fg); } .nav__actions { display: flex; align-items: center; gap: 0.85rem; } .theme-toggle { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: border-color 0.3s var(--ease), transform 0.35s var(--ease-spring); } .theme-toggle:hover { border-color: currentColor; transform: rotate(18deg); } .theme-toggle__icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; grid-area: 1 / 1; transition: opacity 0.3s var(--ease), transform 0.4s var(--ease); } html[data-theme='dark'] .theme-toggle__icon--moon, html[data-theme='light'] .theme-toggle__icon--sun { opacity: 0; transform: scale(0.4) rotate(-45deg); } .nav__burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; padding: 11px 10px; } .nav__burger span { display: block; height: 1.5px; background: var(--fg); transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); } .nav__burger span + span { margin-top: 5px; } .nav__burger[aria-expanded='true'] span:first-child { transform: translateY(3.2px) rotate(45deg); } .nav__burger[aria-expanded='true'] span:last-child { transform: translateY(-3.2px) rotate(-45deg); } /* --------------------------------------------------------- 4. BUTTONS --------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: 100px; padding: 0.85rem 1.7rem; font-weight: 600; font-size: 0.98rem; cursor: pointer; background: transparent; overflow: hidden; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.35s var(--ease-spring), box-shadow 0.4s var(--ease); } /* A soft diagonal sheen that sweeps through the two primary buttons on hover — a lighting cue rather than a flat colour swap. */ .btn--solid::after, .btn--light::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); mix-blend-mode: overlay; transform: translateX(-130%); transition: transform 0.75s var(--ease-out); pointer-events: none; } .btn--solid:hover::after, .btn--light:hover::after { transform: translateX(130%); } .btn--solid { background: var(--fg); color: var(--bg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-r) 0%, transparent); } .btn--solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent-r) 45%, transparent); } .btn--ghost { border-color: var(--line); color: var(--fg); } .btn--ghost:hover { border-color: var(--fg); transform: translateY(-2px); } /* "light" here means "sits on the gradient canvas", not "light theme" — so both of these follow the canvas ink and stay legible in either theme. */ .btn--light { background: var(--on-canvas); color: var(--on-canvas-invert); } .btn--light:hover { transform: translateY(-2px); } .btn--outline-light { border-color: color-mix(in srgb, var(--on-canvas) 45%, transparent); color: var(--on-canvas); } .btn--outline-light:hover { border-color: var(--on-canvas); background: color-mix(in srgb, var(--on-canvas) 12%, transparent); transform: translateY(-2px); } .btn--block { display: flex; width: 100%; } .nav__cta { border: 1px solid var(--line); border-radius: 100px; padding: 0.58rem 1.35rem; font-weight: 600; font-size: 0.93rem; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .nav__cta:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .magnetic { will-change: transform; } .copy-email { font-family: var(--font-mono); font-size: 0.95rem; background: none; border: 1px solid var(--line); border-radius: 100px; padding: 0.85rem 1.7rem; cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .copy-email:hover { border-color: var(--fg); } .copy-email.is-copied { border-color: var(--ok); color: var(--ok); } .copy-email--block { display: block; width: 100%; text-align: center; } .to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(10px); cursor: pointer; opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.3s var(--ease); } .to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { border-color: var(--fg); } .to-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } /* --------------------------------------------------------- 5. CUSTOM CURSOR A minimal crosshair — ring, four short ticks, centre dot. Base colour is always white with mix-blend-mode: difference, which means it reads as white over dark content and black over light content automatically: one rule satisfies "white in dark mode, black in light mode" AND "always visible against the background", including over the hero's coloured gradient, with no theme-aware CSS at all. Only shown once j.js confirms a fine pointer and adds .custom-cursor-active — so a JS failure leaves the ordinary system cursor working, and touch devices never see it. --------------------------------------------------------- */ .cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 999; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s var(--ease); } html.custom-cursor-active .cursor { opacity: 1; } html.custom-cursor-active, html.custom-cursor-active a, html.custom-cursor-active button, html.custom-cursor-active [role='button'], html.custom-cursor-active label { cursor: none; } html.custom-cursor-active input, html.custom-cursor-active textarea, html.custom-cursor-active select, html.custom-cursor-active [contenteditable] { cursor: text; } .cursor__spin { position: absolute; inset: 0; animation: cursor-idle-spin 14s linear infinite; } .cursor__ring { position: absolute; top: 0; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1px solid #fff; border-radius: 50%; transition: width 0.4s var(--ease-spring), height 0.4s var(--ease-spring), margin 0.4s var(--ease-spring), opacity 0.3s var(--ease); } .cursor__dot { position: absolute; top: 0; left: 0; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: #fff; border-radius: 50%; transition: transform 0.3s var(--ease-spring), opacity 0.3s var(--ease); } .cursor__tick { position: absolute; top: 0; left: 0; width: 1px; height: 6px; margin: -19px 0 0 0; background: #fff; opacity: 0.75; transition: opacity 0.3s var(--ease), margin 0.4s var(--ease-spring); } .cursor__tick--n { transform: rotate(0deg); } .cursor__tick--e { transform: rotate(90deg); } .cursor__tick--s { transform: rotate(180deg); } .cursor__tick--w { transform: rotate(270deg); } @keyframes cursor-idle-spin { to { transform: rotate(360deg); } } .cursor.is-active .cursor__spin { animation-play-state: paused; } .cursor.is-active .cursor__ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-width: 1.25px; } .cursor.is-active .cursor__dot { transform: scale(0); opacity: 0; } .cursor.is-active .cursor__tick { opacity: 0.18; margin-top: -23px; } @media (prefers-reduced-motion: reduce) { .cursor__spin { animation: none; } } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* --------------------------------------------------------- 6. THE LIVE GRADIENT --------------------------------------------------------- */ .hero, [data-gradient] { /* Pointer state, written by j.js. --mx/--my are -1..1 from centre. */ --mx: 0; --my: 0; --sx: 50%; --sy: 50%; --hover: 0; } .hero { position: relative; width: calc(100% - 30px); margin: 7.5rem auto 0; min-height: min(86vh, 920px); display: grid; place-items: center; isolation: isolate; } .hero__canvas, .errpage__canvas { overflow: hidden; border-radius: var(--radius); background: var(--canvas-base); } .hero__canvas { /* Larger than the shared --radius: at near-full-bleed width this panel reads as a big standalone surface, and the tighter card radius looked mean against it. */ border-radius: 22px; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transform: scale(calc(1 + 0.014 * var(--hover))); filter: saturate(calc(1 + 0.4 * var(--hover))) contrast(calc(1 + 0.06 * var(--hover))); transition: transform 0.7s var(--ease), filter 0.7s var(--ease), box-shadow 0.7s var(--ease); } .hero:hover .hero__canvas { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), var(--canvas-shadow); } html[data-theme='light'] .hero__canvas { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.06); } html[data-theme='light'] .hero:hover .hero__canvas { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1), var(--canvas-shadow); } .errpage__canvas { position: relative; isolation: isolate; filter: saturate(calc(1 + 0.4 * var(--hover))); transition: filter 0.7s var(--ease); } .orb { position: absolute; width: 62%; height: 78%; will-change: transform; transform: translate3d( calc(var(--mx) * var(--depth) * -1px), calc(var(--my) * var(--depth) * -1px), 0 ); } .orb__i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--c) 0%, transparent 66%); filter: blur(var(--orb-blur, 46px)); mix-blend-mode: var(--orb-blend); opacity: var(--orb-opacity); } .orb--1 { top: -18%; left: -12%; --c: var(--orb-1); --depth: 46; } .orb--2 { top: 8%; left: 26%; --c: var(--orb-2); --depth: 30; } .orb--3 { top: -6%; right: -8%; --c: var(--orb-3); --depth: 62; } .orb--4 { bottom: -22%; left: 2%; --c: var(--orb-4); --depth: 22; } .orb--5 { bottom: -14%; right: 6%; --c: var(--orb-5); --depth: 78; } .orb--1 .orb__i { animation: drift-a 26s var(--ease) infinite; } .orb--2 .orb__i { animation: drift-b 31s var(--ease) infinite; } .orb--3 .orb__i { animation: drift-c 23s var(--ease) infinite; } .orb--4 .orb__i { animation: drift-b 35s var(--ease) infinite reverse; } .orb--5 .orb__i { animation: drift-a 29s var(--ease) infinite reverse; } @keyframes drift-a { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 33% { transform: translate3d(22%, 12%, 0) scale(1.22); } 66% { transform: translate3d(6%, 26%, 0) scale(0.9); } 100% { transform: translate3d(-6%, -4%, 0) scale(1); } } @keyframes drift-b { 0% { transform: translate3d(8%, 10%, 0) scale(1.1); } 40% { transform: translate3d(-18%, -8%, 0) scale(0.88); } 70% { transform: translate3d(-4%, 18%, 0) scale(1.18); } 100% { transform: translate3d(8%, 10%, 0) scale(1.1); } } @keyframes drift-c { 0% { transform: translate3d(0, 0, 0) scale(0.95); } 50% { transform: translate3d(-24%, 16%, 0) scale(1.28); } 100% { transform: translate3d(0, 0, 0) scale(0.95); } } .hero__spot { position: absolute; inset: -10%; background: radial-gradient( circle at var(--sx) var(--sy), rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 18%, transparent 42% ); mix-blend-mode: soft-light; opacity: var(--hover); transition: opacity 0.5s var(--ease); pointer-events: none; } .hero__grain { position: absolute; inset: 0; opacity: var(--grain-opacity); mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero__content { position: relative; text-align: center; padding: 5.5rem 1.5rem; max-width: 66rem; /* Reuses the pointer state already tracked for the gradient — a free, very subtle parallax tilt of the whole content block, layered under the per-line rise-in below. */ transform: translate3d(calc(var(--mx) * -7px), calc(var(--my) * -5px), 0); transition: transform 0.6s var(--ease); } .hero__badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 0.7rem; border: 1px solid color-mix(in srgb, var(--on-canvas) 24%, transparent); border-radius: 100px; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--on-canvas-dim); background: color-mix(in srgb, var(--on-canvas) 8%, transparent); margin-bottom: 2rem; opacity: 0; animation: rise 0.9s var(--ease) forwards; } .hero__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-g); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-g) 70%, transparent); animation: pulse 2.4s ease-out infinite; } .hero__eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-canvas-faint); margin-bottom: 1.6rem; opacity: 0; animation: rise 0.9s var(--ease) forwards; } .hero__title { font-size: clamp(2.9rem, 8.6vw, 7.4rem); font-weight: 800; line-height: 0.99; letter-spacing: -0.036em; color: var(--on-canvas); text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3); } html[data-theme='light'] .hero__title { text-shadow: 0 2px 30px rgba(255, 255, 255, 0.55); } .hero__title span { display: block; opacity: 0; transform: translateY(0.55em); animation: rise 0.95s var(--ease-out) forwards; } .hero__title span:nth-child(1) { animation-delay: 0.1s; } .hero__title span:nth-child(2) { animation-delay: 0.2s; } .hero__title span:nth-child(3) { animation-delay: 0.3s; } .hero__title span:nth-child(4) { animation-delay: 0.4s; } /* The final line of the title carries a slow-animating gradient fill — the one moment on the page the headline itself is in colour. */ .hero__title span:last-child { background: linear-gradient(90deg, var(--on-canvas), var(--accent-r) 35%, var(--accent-b) 65%, var(--on-canvas)); background-size: 300% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: rise 0.95s var(--ease-out) 0.4s forwards, title-shimmer 9s ease-in-out 1.5s infinite; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } @keyframes title-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero__lede { margin: 2.2rem auto 0; max-width: 42rem; font-family: var(--font-mono); font-size: clamp(0.87rem, 1.2vw, 1.02rem); line-height: 1.9; color: var(--on-canvas-dim); opacity: 0; animation: rise 0.9s var(--ease) 0.52s forwards; } .hero__lede strong { color: var(--on-canvas); font-weight: 500; } .hero__actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.8rem; opacity: 0; animation: rise 0.9s var(--ease) 0.64s forwards; } .hero__actions .btn--light { padding-inline: 2.1rem; font-size: 1.02rem; } .hero__scroll-cue { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--fg-faint); opacity: 0; animation: rise 0.9s var(--ease) 0.85s forwards; } .hero__scroll-cue span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; } .hero__scroll-cue svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; animation: cue-bob 2.2s ease-in-out infinite; } @keyframes cue-bob { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero__content { transform: none; } .hero__title span:last-child { animation: none; background-position: 0 0; } .hero__scroll-cue svg { animation: none; } } /* --------------------------------------------------------- 7. MARQUEE The track is duplicated by j.js until the combined content comfortably exceeds twice the container width — with only five logos that could otherwise be narrower than the viewport, which used to leave a bare gap on one side before the loop caught up. --marquee-distance is measured in JS and drives the keyframe directly, so the loop is exact regardless of content length or screen width, and speed is constant (px/second) across marquees rather than a fixed duration that speeds up or slows down with content length. --------------------------------------------------------- */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee--logos { margin: 4.5rem 0 1rem; } .marquee__track { display: flex; width: max-content; will-change: transform; animation: marquee-scroll var(--marquee-duration, 40s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee-scroll { to { transform: translate3d(calc(-1 * var(--marquee-distance, 50%)), 0, 0); } } .marquee__list { display: flex; gap: 4.5rem; padding-right: 4.5rem; list-style: none; font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.01em; color: var(--fg-faint); white-space: nowrap; } .marquee__list li { transition: color 0.3s var(--ease); } .marquee__list li:hover { color: var(--fg); } .marquee--logos .marquee__list { align-items: center; gap: 3.2rem; padding-right: 3.2rem; } .logo { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.7rem; position: relative; } .logo__tile { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: var(--acrylic); border: 1px solid var(--acrylic-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 0.45s var(--ease-spring), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); } /* Dark mode needs a genuinely pale plate or black-inked logos disappear. */ html[data-theme='dark'] .logo__tile { background: linear-gradient(158deg, rgba(255, 255, 255, 0.97), rgba(226, 228, 238, 0.86)); border-color: rgba(255, 255, 255, 0.22); } .logo__tile img { width: 56px; height: 56px; object-fit: contain; } .logo__name { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.02em; color: var(--fg-faint); white-space: nowrap; transition: color 0.35s var(--ease); } .logo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .logo:hover::after { transform: scaleX(1); } .logo:hover .logo__name { color: var(--fg); } .logo:hover .logo__tile { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 34px -18px color-mix(in srgb, var(--accent) 85%, transparent); } /* --------------------------------------------------------- 8. SECTIONS, CARDS & GLOW --------------------------------------------------------- */ .section { padding-block: 5.5rem; } .section--top { padding-top: 2rem; } .section-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.2rem; border-bottom: 1px solid var(--line); margin-bottom: 3.2rem; } /* Every section gets its own gradient signature on this underline, sized to the heading text itself (not a fixed bar) by living on .section-title — an inline-block, so the pseudo-elements' 100% width tracks the actual rendered text width. It drifts slowly at rest via hue-drift, and on hover a second, different gradient (::before) crossfades in over it — see the per-index rules below, keyed to position under
so no page-specific markup is needed. Durations/combinations all differ so no two sections ever look identical, at rest or on hover. */ .section-title { position: relative; display: inline-block; } .section-title::after, .section-title::before { content: ''; position: absolute; left: 0; bottom: -0.55rem; width: 100%; height: 2px; border-radius: 2px; background-size: 220% 100%; } .section-title::after { background-image: linear-gradient(90deg, var(--accent-a), var(--accent-b) 55%, var(--accent-c)); animation: hue-drift 12s ease-in-out infinite alternate; } .section-title::before { background-image: linear-gradient(90deg, var(--accent-c), var(--accent-r) 55%, var(--accent-v)); opacity: 0; transition: opacity 0.6s var(--ease); } .section-head:hover .section-title::before { opacity: 1; } @keyframes hue-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } main > section:nth-of-type(2) .section-title::after { background-image: linear-gradient(90deg, var(--accent-r), var(--accent-a) 55%, var(--accent-b)); animation-duration: 14s; } main > section:nth-of-type(2) .section-title::before { background-image: linear-gradient(90deg, var(--accent-v), var(--accent-g) 55%, var(--accent-c)); } main > section:nth-of-type(3) .section-title::after { background-image: linear-gradient(90deg, var(--accent-g), var(--accent-c) 55%, var(--accent-r)); animation-duration: 11s; } main > section:nth-of-type(3) .section-title::before { background-image: linear-gradient(90deg, var(--accent-b), var(--accent-v) 55%, var(--accent-a)); } main > section:nth-of-type(4) .section-title::after { background-image: linear-gradient(90deg, var(--accent-b), var(--accent-v) 55%, var(--accent-a)); animation-duration: 16s; } main > section:nth-of-type(4) .section-title::before { background-image: linear-gradient(90deg, var(--accent-r), var(--accent-c) 55%, var(--accent-g)); } main > section:nth-of-type(5) .section-title::after { background-image: linear-gradient(90deg, var(--accent-c), var(--accent-r) 55%, var(--accent-g)); animation-duration: 13s; } main > section:nth-of-type(5) .section-title::before { background-image: linear-gradient(90deg, var(--accent-a), var(--accent-b) 55%, var(--accent-v)); } main > section:nth-of-type(6) .section-title::after { background-image: linear-gradient(90deg, var(--accent-v), var(--accent-b) 55%, var(--accent-c)); animation-duration: 17s; } main > section:nth-of-type(6) .section-title::before { background-image: linear-gradient(90deg, var(--accent-g), var(--accent-r) 55%, var(--accent-a)); } main > section:nth-of-type(7) .section-title::after { background-image: linear-gradient(90deg, var(--accent-a), var(--accent-g) 55%, var(--accent-r)); animation-duration: 10s; } main > section:nth-of-type(7) .section-title::before { background-image: linear-gradient(90deg, var(--accent-c), var(--accent-v) 55%, var(--accent-b)); } main > section:nth-of-type(8) .section-title::after { background-image: linear-gradient(90deg, var(--accent-r), var(--accent-v) 55%, var(--accent-b)); animation-duration: 15s; } main > section:nth-of-type(8) .section-title::before { background-image: linear-gradient(90deg, var(--accent-g), var(--accent-a) 55%, var(--accent-c)); } @media (prefers-reduced-motion: reduce) { .section-title::before { transition-duration: 0.01ms; } } .section-title { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; } .section-note { font-family: var(--font-mono); font-size: 0.84rem; color: var(--fg-dim); max-width: 26rem; } .section-link { font-family: var(--font-mono); font-size: 0.86rem; color: var(--fg-dim); background: none; border: 0; border-bottom: 1px solid var(--line); padding-bottom: 3px; cursor: pointer; white-space: nowrap; transition: color 0.3s var(--ease), border-color 0.3s var(--ease); } .section-link:hover { color: var(--fg); border-color: currentColor; } /* --- page heads --- */ .pagehead { padding: 10.5rem 0 3.5rem; } .pagehead--tight { padding-bottom: 2rem; } .pagehead__title { font-size: clamp(2.4rem, 6.4vw, 5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.033em; } .pagehead__lede { margin-top: 1.8rem; max-width: 42rem; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--fg-dim); } /* --- value props --- */ .props { padding-block: 3rem 1rem; } .props__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } /* --------------------------------------------------------------------- ACRYLIC CARD SYSTEM Every card on the site — value props, service rows, service detail panels, pricing plans, beliefs, fit columns, contact panels — shares this: a deep translucent pane that fades in on hover, a coloured hairline across the top, and (where injected by j.js) a glow that originates at the pointer and traces the border, fading out on pointerleave. Built from gradients/shadows rather than backdrop-filter: these sit on a flat background, so there's nothing behind them worth blurring, and backdrop-filter would cost a full-size buffer per card. Each card type rotates through the same six-colour accent set via nth-child, so the red accent appears roughly once in six without ever dominating, and no two adjacent cards read identically. --------------------------------------------------------------------- */ .prop, .service, .plan, .belief, .fit__col, .contact__panel, .model-card { position: relative; isolation: isolate; overflow: hidden; } .prop::before, .service::before, .plan::before, .belief::before, .fit__col::before, .contact__panel::before, .model-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--acrylic); opacity: 0; transition: opacity 0.45s var(--ease); } .prop:hover::before, .service:hover::before, .plan:hover::before, .belief:hover::before, .fit__col:hover::before, .contact__panel:hover::before, .model-card:hover::before { opacity: 1; } .prop::after, .service::after, .plan::after, .belief::after, .fit__col::after, .model-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--edge, var(--accent-a)), var(--edge-2, var(--accent-b)), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } .prop:hover::after, .service:hover::after, .plan:hover::after, .belief:hover::after, .fit__col:hover::after, .model-card:hover::after { transform: scaleX(1); } /* Glow ring injected by initCardGlow() in j.js — see the comment there. Absent entirely if JS doesn't run, so there is no broken empty state. Sized with `farthest-corner` rather than a fixed pixel radius: a fixed radius (previously 220px) only reaches the border on small/square cards. On a wide card it lit the near top/bottom edges but never reached the left/right sides, which is what read as "only part of the border animates". farthest-corner scales the gradient's 100% stop to whichever corner is furthest from the pointer, so the ring always wraps the full perimeter — brighter where the pointer is, fading around the rest — regardless of the card's size or aspect ratio. */ .glow-ring { position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 50%), var(--edge, var(--accent-a)) 0%, color-mix(in srgb, var(--edge, var(--accent-a)) 55%, transparent) 30%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; } .prop:hover .glow-ring, .service:hover .glow-ring, .plan:hover .glow-ring, .belief:hover .glow-ring, .fit__col:hover .glow-ring, .contact__panel:hover .glow-ring { opacity: 1; } /* Six-colour rotation shared by every card family. */ .prop:nth-child(6n+1), .belief:nth-child(6n+1), .fit__col:nth-child(6n+1), .plan:nth-child(6n+1), .contact__panel:nth-child(6n+1) { --edge: var(--accent-a); --edge-2: var(--accent-r); } .prop:nth-child(6n+2), .belief:nth-child(6n+2), .fit__col:nth-child(6n+2), .plan:nth-child(6n+2), .contact__panel:nth-child(6n+2) { --edge: var(--accent-b); --edge-2: var(--accent-g); } .prop:nth-child(6n+3), .belief:nth-child(6n+3), .fit__col:nth-child(6n+3), .plan:nth-child(6n+3), .contact__panel:nth-child(6n+3) { --edge: var(--accent-c); --edge-2: var(--accent-r); } .prop:nth-child(6n+4), .belief:nth-child(6n+4), .fit__col:nth-child(6n+4), .plan:nth-child(6n+4), .contact__panel:nth-child(6n+4) { --edge: var(--accent-g); --edge-2: var(--accent-b); } .prop:nth-child(6n+5), .belief:nth-child(6n+5), .fit__col:nth-child(6n+5), .plan:nth-child(6n+5), .contact__panel:nth-child(6n+5) { --edge: var(--accent-v); --edge-2: var(--accent-c); } .prop:nth-child(6n+6), .belief:nth-child(6n+6), .fit__col:nth-child(6n+6), .plan:nth-child(6n+6), .contact__panel:nth-child(6n+6) { --edge: var(--accent-r); --edge-2: var(--accent-v); } /* Every "Start a project" panel (the contact page sidebar cards) always glows green, rather than taking its turn in the six-colour rotation above — :nth-child(n) matches unconditionally and, at equal specificity, wins by coming later in the source. */ .contact__panel:nth-child(n) { --edge: var(--accent-g); --edge-2: var(--accent-g); } .prop { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 2rem 1.8rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .prop:hover { border-color: var(--acrylic-edge); transform: translateY(-4px); box-shadow: 0 22px 48px -26px var(--acrylic-glow); } .prop__icon { color: var(--fg-faint); font-size: 0.7rem; } .prop h3 { margin: 0.9rem 0 0.6rem; font-size: 1.15rem; font-weight: 700; } .prop p { color: var(--fg-dim); font-size: 0.97rem; } /* --- service rows (home) --- */ .svc-list { list-style: none; border-top: 1px solid var(--line); } .svc { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding: 1.9rem 1rem 1.9rem 0; border-bottom: 1px solid var(--line); transition: background-color 0.4s var(--ease), padding-left 0.4s var(--ease); } .svc::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--edge), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); } .svc:nth-child(6n+1) { --edge: var(--accent-a); } .svc:nth-child(6n+2) { --edge: var(--accent-r); } .svc:nth-child(6n+3) { --edge: var(--accent-c); } .svc:nth-child(6n+4) { --edge: var(--accent-g); } .svc:nth-child(6n+5) { --edge: var(--accent-b); } .svc:nth-child(6n+6) { --edge: var(--accent-v); } .svc:hover::after { transform: scaleX(1); } .svc:hover { background: var(--card); padding-left: 1rem; } .svc__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); } .svc__title { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.015em; } .svc__summary { color: var(--fg-dim); font-size: 0.97rem; margin-top: 0.4rem; max-width: 52ch; } .svc__meta { display: flex; align-items: center; gap: 1.6rem; } .svc__price { font-family: var(--font-mono); font-size: 0.85rem; color: var(--fg-faint); white-space: nowrap; } .svc__link { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); } .svc:hover .svc__link { background: var(--fg); color: var(--bg); transform: translateX(4px); } /* Stretched-link: .svc__link has no `position` of its own, so this pseudo-element's containing block resolves up to .svc (position: relative) and fills the whole row — the entire card is clickable via the one real anchor, rather than only the small circular arrow. */ .svc__link::before { content: ''; position: absolute; inset: 0; } .svc-list__note { margin-top: 2.4rem; font-family: var(--font-mono); font-size: 0.92rem; } .linkish--accent { color: var(--accent-g); border-bottom: 1px solid color-mix(in srgb, var(--accent-g) 45%, transparent); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .linkish--accent:hover { border-color: var(--accent-g); } /* --- comparison table --- */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .vs { width: 100%; border-collapse: collapse; min-width: 46rem; } .vs th, .vs td { padding: 1.05rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: 0.94rem; } .vs thead th { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); border-bottom-color: var(--line); } .vs tbody th { font-weight: 600; color: var(--fg); } .vs td { color: var(--fg-dim); } .vs .vs__me { background: var(--card); color: var(--fg); font-weight: 600; } .vs thead .vs__me { color: var(--fg); } .vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; } .table-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--fg-faint); max-width: 60ch; } /* --- chips --- */ .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { border: 1px solid var(--line); border-radius: 100px; padding: 0.55rem 1.15rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--fg-dim); transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease-spring); } .chip:hover { border-color: var(--fg); color: var(--fg); transform: translateY(-3px); } /* --- tick / cross lists --- */ .ticks, .crosses { list-style: none; display: grid; gap: 0.65rem; } .ticks li, .crosses li { position: relative; padding-left: 1.75rem; font-size: 0.94rem; color: var(--fg-dim); } .ticks li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 10px; height: 6px; border-left: 1.8px solid var(--ok); border-bottom: 1.8px solid var(--ok); transform: rotate(-45deg); } /* Excluded features read as a warning, not a dim afterthought. */ .crosses li { color: var(--accent-r); } .crosses li::before { content: '\00d7'; position: absolute; left: 0.15rem; top: -0.05em; font-size: 1.1rem; color: var(--accent-r); } /* --------------------------------------------------------- 10. PROCESS, ACCORDION, TABLES --------------------------------------------------------- */ .process { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; counter-reset: step; } .step { position: relative; border-top: 2px solid var(--line); padding-top: 1.4rem; transition: border-color 0.4s var(--ease); } .step::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--edge), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .step:nth-child(1) { --edge: var(--accent-a); } .step:nth-child(2) { --edge: var(--accent-r); } .step:nth-child(3) { --edge: var(--accent-c); } .step:nth-child(4) { --edge: var(--accent-g); } .step:nth-child(5) { --edge: var(--accent-b); } .step:hover::before { transform: scaleX(1); } .step__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); } .step__title { margin-top: 0.7rem; font-size: 1.25rem; font-weight: 700; } .step__duration { display: inline-block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent-b); } .step__body { margin-top: 0.8rem; color: var(--fg-dim); font-size: 0.94rem; } .accordion { border-top: 1px solid var(--line); } .acc { position: relative; border-bottom: 1px solid var(--line); } .acc::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: linear-gradient(90deg, var(--accent-b), var(--accent-r) 60%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease); } .acc:hover::after, .acc:focus-within::after { transform: scaleX(1); } .acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; text-align: left; background: none; border: 0; padding: 1.5rem 0; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; cursor: pointer; transition: color 0.3s var(--ease); } .acc__q:hover { color: var(--fg-dim); } .acc__sign { position: relative; flex: none; width: 15px; height: 15px; } .acc__sign::before, .acc__sign::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1.5px; background: currentColor; transition: transform 0.4s var(--ease); } .acc__sign::after { transform: rotate(90deg); } .acc__q[aria-expanded='true'] .acc__sign::after { transform: rotate(0deg); } /* Smooth open/close. max-height is set inline by j.js to the panel's measured scrollHeight when opening (and back to 0 when closing) — more verbose than the CSS-only grid-template-rows 0fr/1fr trick, but that relies on `fr`-track resolution inside an auto-height container during a transition, which not every engine handles the same way. scrollHeight + max-height works identically everywhere. */ .acc__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.5s var(--ease), opacity 0.4s var(--ease); } .acc.is-open .acc__panel { opacity: 1; } .acc__panel p { padding-bottom: 1.6rem; max-width: 62ch; color: var(--fg-dim); } .accordion--tight .acc__q { font-size: 0.95rem; padding-block: 1rem; } .accordion--tight .acc__panel p { font-size: 0.9rem; } @media (prefers-reduced-motion: reduce) { .acc__panel { transition-duration: 0.01ms; } } /* --------------------------------------------------------- 11. PRICING & ESTIMATOR --------------------------------------------------------- */ .switcher { position: relative; display: inline-flex; gap: 0.25rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 100px; margin-bottom: 2.5rem; } .switcher__btn { position: relative; z-index: 1; border: 0; background: none; border-radius: 100px; padding: 0.6rem 1.5rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--fg-dim); transition: color 0.35s var(--ease); } .switcher__btn.is-active { color: var(--bg); } .switcher__pill { position: absolute; z-index: 0; top: 0.3rem; bottom: 0.3rem; left: 0.3rem; border-radius: 100px; background: var(--fg); transition: transform 0.45s var(--ease), width 0.45s var(--ease); } /* align-items: stretch (the grid default) so every card in a row matches the tallest one - with "start" each card kept its own intrinsic height and rows ended up with mismatched, uneven bottom edges card to card. */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; align-items: stretch; } /* .plans{display:grid} and the UA stylesheet's [hidden]{display:none} are equal specificity (0,1,0); author origin beats user-agent origin, so the class rule silently won and [hidden] never actually hid the other panel - both the "build" and "care" plan grids rendered at once. This attribute selector (0,2,0) is strictly more specific and puts [hidden] back in charge. */ .plans[hidden] { display: none; } .plan { min-height: 34rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 2.8rem 2.2rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .plan:hover { border-color: var(--fg-faint); transform: translateY(-4px); } .plan--featured { border-color: var(--fg); background: var(--bg-lift); box-shadow: 0 30px 70px -40px var(--shadow); } /* Sits fully inside the card rather than straddling the top edge — .plan has overflow:hidden (shared acrylic-card rule, needed to clip the glow ring/acrylic backdrop to the rounded corners), which was clipping a badge positioned half outside the box. */ .plan__flag { position: absolute; top: 1.15rem; right: 1.15rem; z-index: 2; background: var(--accent-r); color: #fff; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.32rem 0.75rem; border-radius: 100px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent-r) 60%, transparent); } .plan__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; } .plan__for { margin-top: 0.5rem; color: var(--fg-dim); font-size: 0.93rem; min-height: 3.2em; } .plan__price { margin-top: 1.4rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .plan__figure { font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; } .plan__unit { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); } .plan__unit--after { align-self: flex-end; } .plan__time { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); margin-top: 0.3rem; } .plan .btn { margin-block: 1.5rem; } .plan .crosses { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); } /* Care plans bill monthly on a rolling basis — call that out in the same accent used for informational/neutral highlights elsewhere on the site. */ [data-price-panel='care'] .plan__unit--after, [data-price-panel='care'] .plan__time { color: var(--accent-b); font-weight: 600; } .plans__note { margin-top: 1.8rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); max-width: 60ch; } /* --- always included --- */ .always { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .always li { background: var(--bg); padding: 1.6rem 1.4rem; display: grid; gap: 0.4rem; transition: background-color 0.35s var(--ease); } .always li:hover { background: var(--bg-soft); } .always strong { font-size: 1rem; } .always span { color: var(--fg-dim); font-size: 0.88rem; } /* --------------------------------------------------------- 12. ABOUT & CONTACT --------------------------------------------------------- */ .about-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; padding-block: 2rem 4rem; align-items: start; } /* --------------------------------------------------------------------- IDENTITY CARD (about page) Deliberately not a rehash of the hero's blurred-orb gradient canvas: a dark acrylic panel with a slow-rotating conic-gradient ring at its border, a huge translucent monogram watermark, and a row of real, derived stats (years active, stack size, belief count — nothing fabricated). Tilts gently toward the pointer via initTilt() in j.js, a different interaction than the hero's parallax-orb / spotlight pair. --------------------------------------------------------------------- */ .idcard { position: sticky; top: 6.5rem; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.8rem; background: var(--acrylic); border: 1px solid var(--acrylic-edge); box-shadow: 0 30px 80px -40px var(--acrylic-glow); transform-style: preserve-3d; transform: perspective(1400px) rotateX(0deg) rotateY(0deg); transition: box-shadow 0.5s var(--ease); } /* Soft, theme-adaptive colour wash - the same --orb-* tokens the hero canvas uses, at a fraction of the size and opacity, so the card feels like a small relative of the hero rather than a second unrelated gradient system. Pure CSS (no pointer tracking): two blurred blobs drifting slowly behind the ring and monogram. */ .idcard__glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .idcard__glow::before, .idcard__glow::after { content: ''; position: absolute; width: 65%; height: 65%; border-radius: 50%; filter: blur(38px); opacity: 0.4; mix-blend-mode: var(--orb-blend); } .idcard__glow::before { top: -18%; left: -12%; background: var(--orb-1); animation: idcard-glow-a 17s var(--ease) infinite; } .idcard__glow::after { bottom: -20%; right: -10%; background: var(--orb-4); animation: idcard-glow-b 21s var(--ease) infinite; } @keyframes idcard-glow-a { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8%, 10%, 0) scale(1.18); } } @keyframes idcard-glow-b { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-6%, -8%, 0) scale(1.15); } } html[data-theme='dark'] .idcard { background: linear-gradient(165deg, #14141a, #0a0a0d 60%, #120a14); } html[data-theme='light'] .idcard { background: linear-gradient(165deg, #fdf6ff, #eef2fb 55%, #fff4ec); } .idcard:hover { box-shadow: 0 34px 90px -36px var(--acrylic-glow); } .idcard__ring { position: absolute; inset: 0; z-index: 0; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--ring-angle, 0deg), var(--accent-a), var(--accent-r), var(--accent-b), var(--accent-g), var(--accent-v), var(--accent-a)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.55; animation: idcard-spin 16s linear infinite; } @property --ring-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes idcard-spin { to { --ring-angle: 360deg; } } .idcard__mark { position: absolute; top: -8%; right: -2%; z-index: 0; font-size: 7.5rem; font-weight: 800; line-height: 1; color: var(--fg); opacity: 0.06; user-select: none; } .idcard__stats { position: relative; z-index: 1; display: grid; gap: 0.8rem; transform: translateZ(40px); } .idcard__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .idcard__stat dt { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--fg-dim); } .idcard__stat dd { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; background: linear-gradient(90deg, var(--fg), var(--accent-a)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .idcard__stat:nth-child(2) dd { background-image: linear-gradient(90deg, var(--fg), var(--accent-b)); } .idcard__stat:nth-child(3) dd { background-image: linear-gradient(90deg, var(--fg), var(--accent-g)); } @media (prefers-reduced-motion: reduce) { .idcard { transform: none !important; } .idcard__ring { animation: none; } .idcard__glow::before, .idcard__glow::after { animation: none; } } .about-intro__big { font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 1.4rem; } .about-intro__big em { font-style: normal; background: linear-gradient(90deg, var(--accent-r), var(--accent-a) 50%, var(--accent-b)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .about-intro__text p { color: var(--fg-dim); margin-bottom: 1rem; max-width: 62ch; } .beliefs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .belief { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 2rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .belief:hover { border-color: var(--fg-faint); transform: translateY(-3px); } .belief__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); } .belief h3 { margin: 0.8rem 0 0.6rem; font-size: 1.25rem; font-weight: 700; } .belief p { color: var(--fg-dim); font-size: 0.96rem; } .fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } .fit__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; background: var(--card); transition: border-color 0.4s var(--ease); } /* Subtle only: the acrylic tint + top-edge line (shared card system above) plus this gentle border-colour shift. No perimeter glow ring here - see initCardGlow() in j.js - a full highlighted outline read as too strong a "selected" signal for a plain comparison list. */ .fit__col:hover { border-color: var(--fg-faint); } .fit__col--yes { border-left: 3px solid var(--ok); } .fit__col--no { border-left: 3px solid var(--fg-faint); } .fit__col h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.2rem; } /* --------------------------------------------------------------------- MODEL PICKER (models.html) Two clickable preview cards, each a small CSS "browser frame" mockup rather than a real screenshot - cheap, always in sync, and themeable. The whole card is clickable via the shared stretched-link pattern (.model-card is the positioned ancestor; .model-card__link::before fills it) - do not add position to .model-card__link itself, or the overlay shrinks to just the link's own text, same bug fixed earlier on .svc__link. --------------------------------------------------------------------- */ .model-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .model-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1.5rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); } .model-card:hover { border-color: var(--fg-faint); transform: translateY(-3px); } .model-card__frame { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line-soft); margin-bottom: 1.6rem; display: flex; flex-direction: column; } .model-card__dots { display: flex; gap: 0.4rem; padding: 0.7rem 0.85rem 0; } .model-card__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); display: block; } .model-card__bar { display: block; height: 1.3rem; margin: 0.65rem 0.85rem 0.75rem; border-radius: 4px; background: var(--line-soft); } .model-card__scene { flex: 1; position: relative; margin: 0 0.85rem 0.85rem; border-radius: 6px; overflow: hidden; } /* Model One echo: warm gradient blobs + rounded product chips */ .model-card__scene--one { background: linear-gradient(135deg, #fff1e0, #ffe0d2); } html[data-theme='dark'] .model-card__scene--one { background: linear-gradient(135deg, #2c1c12, #24120e); } .model-card__blob { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.85; } .model-card__blob--a { width: 46%; height: 70%; top: -12%; left: -8%; background: linear-gradient(150deg, #ff6f4a, #ffb338); } .model-card__blob--b { width: 30%; height: 46%; bottom: -10%; right: 6%; background: linear-gradient(150deg, #2fbf9f, #4ca8de); } .model-card__chip { position: absolute; bottom: 10%; width: 15%; height: 22%; border-radius: 6px; background: rgba(255, 255, 255, 0.75); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25); } .model-card__chip:nth-child(3) { left: 8%; } .model-card__chip:nth-child(4) { left: 27%; } .model-card__chip:nth-child(5) { left: 46%; } /* Model Two echo: a dark editorial panel + thin rules */ .model-card__scene--two { background: linear-gradient(135deg, #f3f0e8, #ece7dd); } html[data-theme='dark'] .model-card__scene--two { background: linear-gradient(135deg, #211f1a, #181712); } .model-card__panel { position: absolute; inset: 8% 38% 8% 8%; background: linear-gradient(150deg, #33302a, #55503f); border-radius: 2px; } .model-card__rule { position: absolute; right: 8%; height: 2px; background: var(--fg-faint); border-radius: 1px; } .model-card__rule:nth-child(2) { top: 24%; left: 46%; } .model-card__rule:nth-child(3) { top: 34%; } .model-card__rule--short { left: 60% !important; } .model-card__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; } .model-card__desc { color: var(--fg-dim); margin: 0.5rem 0 1.1rem; } .model-card__link { font-weight: 700; font-size: 0.94rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-a); } .model-card__link span { transition: transform 0.35s var(--ease); } .model-card:hover .model-card__link span { transform: translateX(4px); } /* Stretched-link overlay - see the block comment above for why position must live on .model-card, not here. */ .model-card__link::before { content: ''; position: absolute; inset: 0; } @media (max-width: 760px) { .model-picker { grid-template-columns: 1fr; } } /* --- contact --- */ .contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr); gap: 3.5rem; padding-block: 2rem 6rem; align-items: start; } .form { display: grid; gap: 1.6rem; } .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .field { display: grid; gap: 0.5rem; border: 0; } .field > label, .field > legend { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-faint); } .field .opt { text-transform: none; letter-spacing: 0; opacity: 0.7; } .field input[type='text'], .field input[type='email'], .field select, .field textarea { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 1rem; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .field textarea { resize: vertical; min-height: 9rem; font-family: inherit; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--fg); background: var(--bg-lift); } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--accent-r); } .err { color: var(--accent-r); font-size: 0.85rem; } .field__foot { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } .counter { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-faint); } .counter.is-near { color: var(--accent-r); } .checks, .radios { display: flex; flex-wrap: wrap; gap: 0.6rem; } .check { cursor: pointer; } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check span { display: inline-block; border: 1px solid var(--line); border-radius: 100px; padding: 0.5rem 1.1rem; font-size: 0.92rem; color: var(--fg-dim); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .check:hover span { border-color: var(--fg); } .check input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); } .check input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; } .form__submit { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 0.5rem; } .form__small { font-size: 0.84rem; color: var(--fg-faint); max-width: 32ch; } /* Context banner shown when a visitor arrives from a "Choose " button, so the form acknowledges which package they clicked. */ .form__plan { padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent-b); border-radius: var(--radius-sm); background: var(--card); font-size: 0.9rem; color: var(--fg-dim); } .form__plan strong { color: var(--fg); font-weight: 600; } /* Honeypot — off-screen but not display:none, so bots still see it. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact__aside { display: grid; gap: 1.2rem; position: sticky; top: 6.5rem; } .contact__panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1.6rem; } .contact__panel h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; } .contact__note { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); } .contact__panel .accordion { border-top: 0; } .contact__panel .acc:last-child { border-bottom: 0; } .next-steps { list-style: none; display: grid; gap: 1rem; counter-reset: ns; } .next-steps li { display: grid; gap: 0.15rem; padding-left: 1.6rem; position: relative; } .next-steps li::before { counter-increment: ns; content: counter(ns); position: absolute; left: 0; top: 0.1rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-faint); } .next-steps strong { font-size: 0.95rem; } .next-steps span { color: var(--fg-dim); font-size: 0.88rem; } /* --------------------------------------------------------- 13. END CTA, FOOTER, ERRORS, REVEAL, RESPONSIVE --------------------------------------------------------- */ .endcta { border-top: 1px solid var(--line); background: var(--bg-soft); transition: background-color 0.45s var(--ease); } .endcta__inner { width: var(--shell); margin-inline: auto; padding-block: 7rem; text-align: center; } .endcta__title { font-size: clamp(2rem, 5.4vw, 3.8rem); font-weight: 800; letter-spacing: -0.032em; line-height: 1.06; text-wrap: balance; } .endcta__body { margin: 1.4rem auto 0; max-width: 44rem; color: var(--fg-dim); } .endcta__actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.4rem; } .site-footer { border-top: 1px solid var(--line); } .site-footer__grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 2.5rem; padding-block: 4rem 3rem; } .site-footer__brand p { color: var(--fg-dim); margin-top: 1rem; max-width: 26ch; } .site-footer__loc { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint) !important; } .site-footer__col h3 { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 1.1rem; } .site-footer__col ul { list-style: none; display: grid; gap: 0.6rem; } .site-footer__col a { color: var(--fg-dim); font-size: 0.95rem; transition: color 0.3s var(--ease); } .site-footer__col a:hover { color: var(--fg); } .site-footer__bar { width: var(--shell); margin-inline: auto; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); } .site-footer__status { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-dim); } .site-footer__legal { border-bottom: 1px solid var(--line); color: var(--fg-dim); } .site-footer__legal:hover { color: var(--fg); border-bottom-color: currentColor; } /* --------------------------------------------------------- LEGAL PAGES Long-form prose, so it gets a reading measure rather than the full-width grid the marketing sections use. --------------------------------------------------------- */ .legal { max-width: 68ch; } .legal h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-top: 2.8rem; margin-bottom: 0.9rem; } .legal h2:first-child { margin-top: 0; } .legal p { color: var(--fg-dim); margin-bottom: 1rem; } .legal p:last-child { margin-bottom: 0; } .legal ul { margin-bottom: 1.4rem; } .legal li { color: var(--fg-dim); } .legal strong { color: var(--fg); font-weight: 600; } .legal code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.12em 0.4em; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--fg); overflow-wrap: anywhere; } .site-footer__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* --- error pages --- */ .errpage { padding: 9rem 0 6rem; text-align: center; } .errpage__canvas { aspect-ratio: 21 / 9; max-width: 46rem; margin: 0 auto 3rem; display: grid; place-items: center; } .errpage__code { position: relative; z-index: 2; font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; letter-spacing: -0.04em; color: #fff; mix-blend-mode: soft-light; } .errpage__title { font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; } .errpage__lede { margin: 1.2rem auto 0; max-width: 40rem; color: var(--fg-dim); } .errpage__actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.2rem; } /* --- scroll reveal --- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* --- responsive --- */ @media (max-width: 1100px) { .process { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } .always { grid-template-columns: repeat(2, 1fr); } .about-intro { grid-template-columns: 1fr; } .idcard { position: static; aspect-ratio: 16 / 9; transform: none !important; } .contact { grid-template-columns: 1fr; } .contact__aside { position: static; grid-template-columns: repeat(2, 1fr); } .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .plans { grid-template-columns: 1fr; } } @media (max-width: 900px) { :root { --shell: min(1400px, 100% - 2.5rem); } .nav__links { position: fixed; inset: 0 0 auto 0; flex-direction: column; gap: 0; padding: 6rem 1.5rem 2rem; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-102%); /* visibility, not just transform. Translating the panel off-screen hides it from the eye but leaves every link in the tab order and in the accessibility tree, so a keyboard or screen-reader user on a phone tabbed straight into four invisible links after the logo. visibility:hidden removes them from both; it is delayed by the transition duration so the slide-away animation still plays. */ visibility: hidden; transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; font-size: 1.55rem; z-index: -1; } .nav__links.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; } .nav__links li { padding-block: 0.55rem; border-bottom: 1px solid var(--line); } .nav__links-cta { display: block; } .nav__burger { display: block; } .nav__cta { display: none; } .nav__actions { margin-left: auto; } .hero { margin-top: 5.5rem; min-height: 72vh; } .hero__scroll-cue { display: none; } .pagehead { padding-top: 8rem; } .props__grid { grid-template-columns: 1fr; } .beliefs, .fit { grid-template-columns: 1fr; } .contact__aside { grid-template-columns: 1fr; } .svc { grid-template-columns: 2.5rem 1fr; gap: 1rem; } .svc__meta { grid-column: 2; justify-content: space-between; } .form__row { grid-template-columns: 1fr; } } @media (max-width: 560px) { .hero__content { padding: 3.5rem 1rem; } .always { grid-template-columns: 1fr; } .process { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: 1fr; } .flashes { top: auto; bottom: 1rem; right: 1rem; } .to-top { right: 1rem; bottom: 5rem; } } /* --------------------------------------------------------- LOW-POWER MODE Applied by j.js as .perf-lite when the device reports little memory, few cores, 2G, or Save-Data. Everything expensive to composite is cut; nothing about the layout or the palette changes. The custom cursor, card-glow pointer tracking and magnetic buttons are skipped entirely in j.js on this same flag — see the comments there. --------------------------------------------------------- */ .perf-lite { --orb-blur: 18px; } .perf-lite .orb--2, .perf-lite .orb--5 { display: none; } .perf-lite .hero__grain, .perf-lite .hero__spot { display: none; } .perf-lite .site-header.is-scrolled, .perf-lite .to-top { backdrop-filter: none; } .perf-lite .site-header.is-scrolled { background: var(--bg); } .perf-lite .prop:hover, .perf-lite .plan:hover, .perf-lite .logo:hover .logo__tile { box-shadow: none; } .perf-lite .orb__i { animation-duration: 60s; } /* animation:none here strips BOTH the shimmer and the shared rise entrance (they're one shorthand declaration on this selector) - without forcing the end state, the span is stuck at its pre-animation opacity:0, which is why "themselves." was invisible on perf-lite devices while the first two lines showed fine. */ .perf-lite .hero__title span:last-child { animation: none; opacity: 1; transform: none; } .perf-lite .section-title::after { animation: none; } .perf-lite .orbit__p { animation-duration: 20s; } .perf-lite .idcard__ring { animation: none; opacity: 0.35; } .perf-lite .idcard { transform: none !important; } .section, .marquee, .endcta, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 480px; } .hero, .pagehead { content-visibility: visible; } /* --- reduced motion --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .orb__i, .marquee__track { animation: none !important; } .hero__title span, .hero__lede, .hero__eyebrow, .hero__badge, .hero__actions { opacity: 1; transform: none; animation: none; } .section-title::after { animation: none; } .reveal { opacity: 1; transform: none; } .site-footer__status i, .hero__badge i { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } }