/* ═══════════════════════════════════════════════════════════════════════ MattCreates — v9 "Working Studio" art direction A scroll-driven narrative for a $300/hr digital-infrastructure studio. Editorial, oversized, hand-set. Same brand: cyan + gold duality, the auto dusk/dawn theme engine, all the content. Nothing here is a template. Theme vars (--bg, --text, --cyan, --gold …) are written to every minute by js/main.js. This file READS them. js/art.js owns the motion. ═══════════════════════════════════════════════════════════════════════ */ /* ─── Theme tokens (night defaults; JS interpolates to day) ─────────────── */ :root { --bg: #07070b; --bg-2: #0e0e10; --bg-3: #14141a; --text: #f0f0f0; --text-2: #c4c4c8; --gray: #888a90; --gray-2: #4a4a52; --gold: #c5923a; --gold-2: #e8b75c; --cyan: #05d1e1; --cyan-2: #39ffcf; --rose: #f472b6; --violet: #a855f7; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.16); --glow-cursor: rgba(5,209,225,.10); --day-mix: 0; /* Section accent — cyan leads, gold warms. Overridden per [data-atmos]. */ --accent: var(--cyan); --accent-2: var(--cyan-2); --on-accent: #04141a; /* text on the bright cyan fill (night) */ --watermark: color-mix(in srgb, var(--text) 5%, transparent); /* Type */ --f-sans: "Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --f-mono: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace; /* Fluid type scale — architecture, not just readability */ --fs-micro: clamp(11px, .72vw, 13px); --fs-label: clamp(12px, .8vw, 14px); --fs-body: clamp(16px, 1.05vw, 18px); --fs-lead: clamp(19px, 1.7vw, 26px); --fs-h3: clamp(22px, 2.4vw, 34px); --fs-h2: clamp(34px, 5.2vw, 78px); --fs-h1: clamp(46px, 8.5vw, 130px); --fs-display: clamp(64px, 13vw, 200px); --fs-wm: clamp(90px, 17vw, 320px); /* Spacing / layout */ --gutter: clamp(1.25rem, 5vw, 3.5rem); --section-y: clamp(5rem, 13vh, 11rem); --w-wide: 1440px; --w-default: 1200px; --w-text: 760px; /* Radii + motion */ --r-sm: 10px; --r: 18px; --r-lg: 26px; --r-pill: 100px; --e: cubic-bezier(.22,1,.36,1); --e-mdx: cubic-bezier(.625,.05,0,1); --t-fast: .3s var(--e); --t-mid: .55s var(--e); } /* Smooth the per-minute theme variable steps into a continuous drift. */ html, body, .nav, .nav-mobile, .footer, main, section, .card, .btn, .eyebrow, .lead, h1, h2, h3, h4, p, a, .atmos-orb, .cursor-glow { transition: background-color 1.6s linear, color 1.6s linear, border-color 1.6s linear, box-shadow 1.6s linear, fill 1.6s linear, stroke 1.6s linear; } /* ─── Lenis ─────────────────────────────────────────────────────────────── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ─── Base ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Lenis sets auto; this is the no-JS path */ scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; background: var(--bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100svh; } 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; } ::selection { background: color-mix(in srgb, var(--cyan) 34%, transparent); color: var(--text); } a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 10001; background: var(--cyan); color: #04121a; padding: 10px 16px; border-radius: var(--r-sm); font: 600 14px/1 var(--f-sans); transform: translateY(-180%); transition: transform var(--t-fast); } .skip-link:focus { transform: translateY(0); } /* ─── Progressive enhancement gate ────────────────────────────────────── Content is fully visible by default. Only once JS confirms motion is on (html.js and NOT html.anim-off) do we hide reveal targets for GSAP. */ html.js:not(.anim-off) [data-reveal], html.js:not(.anim-off) [data-reveal-group] > * { will-change: transform, opacity; } html.loading { overflow: hidden; } html.loading body { overflow: hidden; } /* ─── Preloader (brand moment; never traps the page — art.js failsafe) ──── */ .preloader { display: none; } html.js .preloader { display: flex; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; background: var(--bg); } @media (prefers-reduced-motion: reduce) { html.js .preloader { display: none; } } .preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding: 2rem; } .preloader-mark img { height: 44px; width: auto; } .preloader-meta { display: flex; align-items: baseline; gap: .4rem; font-family: var(--f-mono); font-size: var(--fs-label); color: var(--gray); letter-spacing: .04em; } .preloader-pct { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .preloader-bar { width: min(240px, 60vw); height: 2px; background: var(--line-strong); overflow: hidden; border-radius: 2px; } .preloader-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold-2)); transform: scaleX(0); transform-origin: left; } /* ─── Background atmosphere (main.js drives orb color/opacity per section) ─ */ #three-bg { display: none; } /* v9 drops the WebGL layer — calmer, faster */ /* Dead-simple background video — fixed, behind content, plays natively. ZERO JavaScript touches this. The browser handles autoplay; if it fails on a device, the video just doesn't show (no crash, no flash, no display:none). Sections are transparent (see `section` below) so the video shows through the whole scroll, blended over the opaque body background. */ .bg-video { position: fixed; inset: 0; width: 100%; height: 100dvh; object-fit: cover; z-index: 1; pointer-events: none; opacity: .30; } /* One gentle dim in day mode so the dark footage doesn't read muddy on the lighter palette. The only conditional rule — no perf/suspend gating. */ html[data-theme="day"] .bg-video { opacity: .16; } .atmos { display: none; } .atmos-orb { position: fixed; z-index: 2; pointer-events: none; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; border-radius: 50%; filter: blur(90px); opacity: 0; transition: background 1.6s var(--e), opacity 1.6s var(--e); } .atmos-orb.a { top: -16vw; left: -14vw; background: radial-gradient(circle, rgba(5,209,225,.25), transparent 65%); } .atmos-orb.b { bottom: -20vw; right: -12vw; background: radial-gradient(circle, rgba(197,146,58,.18), transparent 65%); } .atmos-orb.c { top: 36vh; right: -22vw; background: radial-gradient(circle, rgba(168,85,247,.12), transparent 65%); } html[data-theme="day"] .atmos-orb { opacity: .65; mix-blend-mode: multiply; } .cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; z-index: 4; display: none; background: radial-gradient(circle, var(--glow-cursor), transparent 60%); } @media (hover: hover) and (pointer: fine) { .cursor-glow { display: block; } } @media (prefers-reduced-motion: reduce) { .cursor-glow { display: none !important; } } /* Faint grain/grid texture for depth (per checklist) */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 88px 88px; opacity: .35; mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 78%); } /* ─── Layout ────────────────────────────────────────────────────────────── */ main { position: relative; z-index: 3; display: block; } section { position: relative; padding: var(--section-y) 0; } .inner { width: 100%; max-width: var(--w-default); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 3; } .inner.wide { max-width: var(--w-wide); } .inner.text { max-width: var(--w-text); } .inner.narrow { max-width: var(--w-text); } .center { text-align: center; } .cap { max-width: 60ch; margin-left: auto; margin-right: auto; } .head-gap { margin-top: 1.2rem; } .mt-tight { margin-top: 1rem; } .mt-loose { margin-top: 2.8rem; } /* Section accent palette (orbs match via main.js) */ [data-atmos="dark"] { --accent: var(--cyan); --accent-2: var(--cyan-2); } [data-atmos="gold"] { --accent: var(--gold-2); --accent-2: var(--gold); } [data-atmos="cyan"] { --accent: var(--cyan); --accent-2: var(--cyan-2); } [data-atmos="violet"] { --accent: var(--violet); --accent-2: var(--cyan); } [data-atmos="rose"] { --accent: var(--rose); --accent-2: var(--gold); } [data-atmos="mint"] { --accent: var(--cyan-2); --accent-2: var(--cyan); } /* ─── Typography ────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--text); text-wrap: balance; } p { margin: 0 0 1.1rem; color: var(--text-2); } p:last-child { margin-bottom: 0; } /* Eyebrow / label */ .eyebrow { display: inline-flex; align-items: center; gap: .7em; font-family: var(--f-mono); font-size: var(--fs-micro); font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: .6; } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 2.2em; height: 1px; background: currentColor; opacity: .6; } .eyebrow.cyan { color: var(--cyan); } .eyebrow.violet { color: var(--violet); } .eyebrow.rose { color: var(--rose); } .eyebrow.mint { color: var(--cyan-2); } .hero-h { font-size: var(--fs-h1); line-height: .98; letter-spacing: -0.035em; margin-top: 1.4rem; } .section-h { font-size: var(--fs-h2); line-height: 1; margin-top: 1rem; } h3 { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); max-width: 40ch; margin: 1.5rem 0 0; } .lead.center { margin-left: auto; margin-right: auto; max-width: 54ch; } /* Word-mask spans created by art.js splitter */ .w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .w-in { display: inline-block; } /* Gradient accent words (cyan or gold) — also targets art.js .w-in children */ .accent, .accent .w-in { background: linear-gradient(100deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .accent-cyan, .accent-cyan .w-in { background: linear-gradient(100deg, var(--cyan-2), var(--cyan)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .link-accent { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 45%, transparent); } .link-accent:hover { color: var(--cyan-2); } code { font-family: var(--f-mono); font-size: .86em; background: color-mix(in srgb, var(--bg-3) 70%, transparent); border: 1px solid var(--line); padding: .1em .42em; border-radius: 6px; color: var(--text); } /* Watermark / oversized background type */ .wm { position: absolute; z-index: 0; pointer-events: none; user-select: none; font-family: var(--f-sans); font-weight: 700; font-size: var(--fs-wm); letter-spacing: -0.04em; line-height: .8; white-space: nowrap; color: var(--watermark); text-transform: uppercase; } .wm-stroke { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 8%, transparent); } /* Section head */ .section-head { max-width: 880px; margin: 0 auto 3.4rem; } .section-head:not(.left) { text-align: center; } .section-head.left { text-align: left; margin-left: 0; } .section-head .lead { margin-left: 0; } .section-head:not(.left) .lead { margin-left: auto; margin-right: auto; } /* Section index marker (e.g. 01 / Work) */ .chapter-index { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--gray); display: inline-flex; gap: .8em; align-items: center; } .chapter-index b { color: var(--accent); font-weight: 600; } /* ─── Buttons — pill with arrow-circle badge ────────────────────────────── */ .cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; } .cta-row.center { justify-content: center; } .btn { display: inline-flex; align-items: center; gap: .8em; font: 600 var(--fs-label)/1 var(--f-sans); letter-spacing: .04em; text-transform: uppercase; padding: .85em .9em .85em 1.5em; border-radius: var(--r-pill); border: 1px solid transparent; white-space: nowrap; transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); } .btn .btn-arrow { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; font-size: .92em; transition: transform var(--t-fast), background-color var(--t-fast); } .btn-primary { background: linear-gradient(120deg, var(--cyan), var(--cyan-2)); color: var(--on-accent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--cyan) 80%, transparent); } .btn-primary .btn-arrow { background: color-mix(in srgb, #04141a 16%, transparent); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--cyan) 90%, transparent); } .btn-primary:hover .btn-arrow { transform: translate(3px,-3px); } .btn-ghost { background: color-mix(in srgb, var(--bg-2) 55%, transparent); border-color: var(--line-strong); color: var(--text); } .btn-ghost .btn-arrow { background: color-mix(in srgb, var(--text) 10%, transparent); } .btn-ghost:hover { border-color: color-mix(in srgb, var(--cyan) 60%, transparent); transform: translateY(-3px); } .btn-ghost:hover .btn-arrow { transform: translate(3px,-3px); } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:hover .btn-arrow { transform: none; } } /* ─── Navigation ────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.2rem var(--gutter); transition: padding var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), transform .4s var(--e); border-bottom: 1px solid transparent; } .nav.shrunk { padding-top: .7rem; padding-bottom: .7rem; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: var(--line); } .nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; } .nav-logo img { height: 34px; width: auto; } .logo-day { display: none; } html[data-theme="day"] .logo-night { display: none; } html[data-theme="day"] .logo-day { display: block; } .nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); list-style: none; margin: 0; padding: 0; } .nav-links a { position: relative; font-size: var(--fs-label); font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; padding: .3em 0; transition: color var(--t-fast); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast); } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-controls { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; } .nav-phone { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); transition: color var(--t-fast); } .nav-phone:hover { color: var(--cyan); } /* Day / night manual toggle — overrides the auto dusk/dawn engine for the session */ .nav-theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--bg-2) 70%, transparent); color: var(--text-2); cursor: pointer; flex: 0 0 auto; transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), background var(--t-fast); } .nav-theme:hover { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, var(--line-strong)); transform: translateY(-1px); } .nav-theme svg { width: 18px; height: 18px; display: block; } .nav-theme .icon-sun { display: none; } .nav-theme .icon-moon { display: block; } html[data-theme="day"] .nav-theme .icon-sun { display: block; } html[data-theme="day"] .nav-theme .icon-moon { display: none; } .nav-cta { font: 600 var(--fs-label)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--on-accent); background: linear-gradient(120deg, var(--cyan), var(--cyan-2)); padding: .7em 1.25em; border-radius: var(--r-pill); box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--cyan) 75%, transparent); transition: transform var(--t-fast), box-shadow var(--t-fast); } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--cyan) 90%, transparent); } .nav-burger { display: none; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--t-fast), opacity var(--t-fast); } .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.open .nav-burger span:nth-child(2) { opacity: 0; } .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: 6rem var(--gutter) 3rem; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } .nav-mobile.open { opacity: 1; pointer-events: auto; } .nav-mobile a { font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 600; color: var(--text); letter-spacing: -0.02em; padding: .35rem 0; border-bottom: 1px solid var(--line); } .nav-mobile a:hover, .nav-mobile a.active { color: var(--cyan); } .nav-mobile-cta { margin-top: 1.6rem !important; color: var(--cyan) !important; border-bottom: 0 !important; } .nav-mobile-meta { margin-top: 1.8rem; font-family: var(--f-mono); font-size: var(--fs-label); color: var(--gray); display: flex; flex-direction: column; gap: .3rem; border-bottom: 0 !important; } .nav-mobile-meta a { font-size: 1.1rem; color: var(--cyan); padding: 0; border: 0; } /* ─── Hero ──────────────────────────────────────────────────────────────── */ .hero { min-height: 100svh; display: flex; align-items: center; padding-top: clamp(7rem,16vh,11rem); padding-bottom: var(--section-y); overflow: hidden; } .hero.centered { text-align: center; } .hero.centered .inner { display: flex; flex-direction: column; align-items: center; } .hero .lead { margin-top: 1.8rem; max-width: 46ch; } .hero.centered .lead { margin-left: auto; margin-right: auto; } .hero-meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 2.6rem; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .hero-meta.center { justify-content: center; } .hero-meta a { color: var(--cyan); } .hero-meta span { display: inline-flex; align-items: center; gap: .55em; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-2); box-shadow: 0 0 0 0 color-mix(in srgb,var(--cyan-2) 70%,transparent); animation: pulse 2.4s var(--e) infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan-2) 60%,transparent);} 70%{box-shadow:0 0 0 9px transparent;} 100%{box-shadow:0 0 0 0 transparent;} } @media (prefers-reduced-motion: reduce){ .pulse{animation:none;} } /* Custom scroll cue */ .scroll-cue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; z-index: 3; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--gray); } .scroll-cue .rail { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; } .scroll-cue .rail::after { content:""; position:absolute; top:0; left:0; width:100%; height:40%; background: var(--accent); animation: cue 2s var(--e) infinite; } @keyframes cue { 0%{transform:translateY(-100%);} 100%{transform:translateY(250%);} } @media (prefers-reduced-motion: reduce){ .scroll-cue .rail::after{ animation:none; } } /* ─── Marquee band ──────────────────────────────────────────────────────── */ .marquee { overflow: hidden; padding: clamp(2rem,4vw,3.4rem) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 3; } .marquee-track { display: inline-flex; gap: 2.4rem; white-space: nowrap; will-change: transform; } .marquee-track span { font-family: var(--f-sans); font-weight: 600; font-size: clamp(1.6rem,4.4vw,3.4rem); letter-spacing: -0.02em; color: var(--text); display: inline-flex; align-items: center; gap: 2.4rem; } .marquee-track span::after { content: "✦"; color: var(--accent); font-size: .6em; } .marquee.alt .marquee-track span { color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 32%, transparent); } /* ─── Editorial split (sticky label / content) ──────────────────────────── */ .editorial { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .editorial-aside { position: sticky; top: 110px; } .editorial-aside .lead { margin-top: 1.2rem; } /* ─── Numbered feature rows (principles / philosophy) ───────────────────── */ .feature-rows { border-top: 1px solid var(--line); margin-top: 1rem; } .feature-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 4vw, 4rem); align-items: baseline; padding: clamp(1.8rem, 3.4vw, 3rem) 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-fast); } .feature-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .feature-num { font-family: var(--f-mono); font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 600; color: var(--accent); line-height: 1; } .feature-body { max-width: 70ch; } .feature-name { font-size: var(--fs-h3); font-weight: 600; color: var(--text); letter-spacing: -0.02em; margin-bottom: .6rem; } .feature-desc { color: var(--text-2); margin: 0; } /* legacy philo-* map onto feature rows */ .philo-stack { border-top: 1px solid var(--line); margin-top: 1rem; } .philo-row { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num name" "num desc"; column-gap: clamp(1.4rem,4vw,4rem); row-gap: .6rem; padding: clamp(1.8rem,3.4vw,3rem) 0; border-bottom: 1px solid var(--line); transition: background-color var(--t-fast); } .philo-row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .philo-num { grid-area: num; font-family: var(--f-mono); font-size: clamp(1.4rem,3vw,2.4rem); font-weight: 600; color: var(--accent); line-height: 1; } .philo-name { grid-area: name; font-size: var(--fs-h3); font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .philo-desc { grid-area: desc; color: var(--text-2); margin: 0; max-width: 70ch; } /* ─── Showcase — alternating editorial work blocks ──────────────────────── */ .showcase-list { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 7rem); margin-top: 1rem; } .showcase-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; } .showcase-card:nth-child(even) { grid-template-columns: 1fr 1.15fr; } .showcase-card:nth-child(even) .showcase-thumb { order: 2; } .showcase-thumb { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 16/10; background: var(--bg-3); border: 1px solid var(--line); } .showcase-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--e); } .showcase-card:hover .showcase-thumb img { transform: scale(1.05); } .showcase-thumb-meta { position: absolute; left: 14px; bottom: 14px; z-index: 2; } .showcase-thumb-tag { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line-strong); color: var(--text); padding: .4em .8em; border-radius: var(--r-pill); } .showcase-body h3 { font-size: var(--fs-h3); margin-bottom: .8rem; } .showcase-body p { color: var(--text-2); max-width: 48ch; } .showcase-stack { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; } .showcase-stack span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .05em; color: var(--gray); border: 1px solid var(--line); border-radius: 6px; padding: .3em .6em; } /* real-number proof strip inside a showcase card (v8) */ .showcase-metric { display: flex; flex-wrap: wrap; gap: clamp(1.1rem,2.4vw,2.2rem); margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .showcase-metric > div { display: flex; flex-direction: column; gap: .25rem; } .showcase-metric b { font-family: var(--f-sans); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .showcase-metric span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .showcase-link { display: inline-flex; align-items: center; margin-top: 1.2rem; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .04em; color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb,var(--accent) 40%,transparent); padding-bottom: 2px; transition: color var(--t-fast), border-color var(--t-fast); } .showcase-link:hover { color: var(--accent-2); border-color: var(--accent-2); } .showcase-foot { margin-top: clamp(3rem,6vw,5rem); text-align: center; } /* grids that should stay grids (personal projects) */ .work-grid, .personal-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); margin-top: 1rem; } .work-grid .showcase-card, .personal-grid .showcase-card { display: flex; flex-direction: column; gap: 0; background: color-mix(in srgb,var(--bg-2) 80%,transparent); border:1px solid var(--line); border-radius: var(--r); overflow: hidden; } .work-grid .showcase-card:hover, .personal-grid .showcase-card:hover { border-color: color-mix(in srgb,var(--accent) 45%,var(--line-strong)); transform: translateY(-5px); transition: transform var(--t-mid), border-color var(--t-mid); } .work-grid .showcase-thumb, .personal-grid .showcase-thumb { border:0; border-radius:0; } .work-grid .showcase-body, .personal-grid .showcase-body { padding: 1.5rem; } .work-grid .showcase-stack, .personal-grid .showcase-stack { margin-top: 1rem; } /* ─── Homepage portfolio: horizontal snap carousel ──────────────────────── */ .showcase-scroll { display: flex; flex-direction: row; flex-wrap: nowrap; gap: clamp(1.2rem, 3vw, 2.2rem); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); padding: .5rem var(--gutter) 1.5rem; margin: 1rem calc(var(--gutter) * -1) 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .showcase-scroll::-webkit-scrollbar { height: 6px; } .showcase-scroll::-webkit-scrollbar-track { background: transparent; } .showcase-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; } .showcase-scroll .showcase-card { display: flex; flex-direction: column; gap: 0; flex: 0 0 clamp(280px, 80vw, 430px); width: clamp(280px, 80vw, 430px); scroll-snap-align: start; background: color-mix(in srgb, var(--bg-2) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; grid-template-columns: none; transition: transform var(--t-mid), border-color var(--t-mid); } .showcase-scroll .showcase-card:nth-child(even) { grid-template-columns: none; } .showcase-scroll .showcase-card:nth-child(even) .showcase-thumb { order: 0; } .showcase-scroll .showcase-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); transform: translateY(-5px); } .showcase-scroll .showcase-thumb { border: 0; border-radius: 0; } .showcase-scroll .showcase-body { padding: 1.5rem; } .showcase-scroll .showcase-stack { margin-top: 1rem; } .showcase-scroll-hint { margin: .9rem 0 0; text-align: center; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--gray); } .showcase-scroll-hint span { color: var(--cyan); } /* ─── Specialty bullets floating over portfolio graphics ────────────────── */ .spec-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .spec-bullet { position: absolute; display: inline-flex; align-items: center; gap: .5em; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .03em; font-weight: 500; color: var(--text); background: color-mix(in srgb, var(--bg) 60%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line-strong)); border-radius: var(--r-pill); padding: .45em .85em; white-space: nowrap; box-shadow: 0 8px 22px -12px rgba(0,0,0,.6); animation: spec-float 5.5s ease-in-out infinite; } .spec-bullet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); flex: 0 0 auto; } .spec-bullet.b1 { top: 12%; left: 7%; animation-delay: 0s; } .spec-bullet.b2 { bottom: 13%; right: 7%; animation-delay: -1.8s; } .spec-bullet.b3 { top: 50%; left: 34%; animation-delay: -3.4s; } @keyframes spec-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @media (prefers-reduced-motion: reduce) { .spec-bullet { animation: none; } } html.perf-min .spec-bullet { -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; background: var(--bg-2); } @media (max-width: 600px) { .spec-bullet.b3 { display: none; } .spec-bullet { font-size: 10px; padding: .35em .65em; } } /* ─── Operation page: hard-numbers spec strip ───────────────────────────── */ .op-spec { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin: 1.8rem auto 0; padding: 0; list-style: none; max-width: 820px; } .op-spec li { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .5em 1em; background: color-mix(in srgb, var(--bg-2) 55%, transparent); } .op-spec li b { color: var(--cyan); font-weight: 700; } /* ─── Stats row (counters via main.js [data-count]) ─────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: clamp(1.5rem,4vw,3rem); margin-top: 1rem; } .stat { text-align: center; } .stat-num { font-family: var(--f-mono); font-weight: 600; font-size: clamp(2.6rem,6vw,4.6rem); line-height: 1; color: var(--text); letter-spacing: -0.03em; } .stat-num .currency, .stat-num .suffix { color: var(--gold-2); } .stat-label { display: block; margin-top: .7rem; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); } /* ─── Pricing anchor ────────────────────────────────────────────────────── */ .anchor { text-align: center; position: relative; } .anchor-rate { font-family: var(--f-mono); font-weight: 600; font-size: var(--fs-display); line-height: .82; letter-spacing: -0.05em; margin-top: 1rem; background: linear-gradient(165deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .anchor-rate .currency { font-size: .42em; vertical-align: super; opacity: .85; } .anchor-unit { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: .28em; text-transform: uppercase; color: var(--gray); margin: 1rem 0 1.8rem; } .anchor h2 { max-width: 20ch; margin: 0 auto; } .anchor p { max-width: 54ch; margin: 1.3rem auto 0; } /* ─── The Math — $300/hr justification (v8) ─────────────────────────────── */ .value-math { position: relative; } .vm-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); margin-top: clamp(2.5rem,5vw,4rem); align-items: start; } .vm-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.6rem); background: color-mix(in srgb,var(--bg-2) 70%,transparent); backdrop-filter: blur(6px); } .vm-them { opacity: .85; } .vm-us { border-color: color-mix(in srgb,var(--accent) 45%,var(--line-strong)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent), 0 30px 60px -34px color-mix(in srgb,var(--accent) 45%,transparent); } .vm-tag { display: inline-block; font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: 1rem; } .vm-us .vm-tag { color: var(--accent); } .vm-price { font-family: var(--f-sans); font-weight: 700; font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .vm-price span { display: block; margin-top: .55rem; font-family: var(--f-mono); font-weight: 400; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--gray); } .vm-them .vm-price { color: var(--gray); } .vm-us .vm-price { color: var(--accent); } .vm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; } .vm-list li { position: relative; padding-left: 1.7rem; color: var(--text-2); font-size: var(--fs-body); line-height: 1.45; } .vm-them .vm-list li::before { content: "✕"; position: absolute; left: 0; top: .1em; color: var(--rose); font-size: .9em; } .vm-us .vm-list li::before { content: "✓"; position: absolute; left: 0; top: .02em; color: var(--accent-2); font-weight: 600; } .vm-saas { margin: clamp(2rem,4vw,3rem) auto 0; border-left: 3px solid var(--gold); padding: 1.1rem 0 1.1rem 1.6rem; max-width: 72ch; } .vm-saas-h { font-family: var(--f-sans); font-weight: 600; font-size: var(--fs-h3); color: var(--text); margin-bottom: .6rem; } .vm-saas-math { color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; } .vm-saas-math b { color: var(--gold-2); font-weight: 600; } @media (max-width: 720px) { .vm-compare { grid-template-columns: 1fr; } } /* ─── Final CTA ─────────────────────────────────────────────────────────── */ .final-cta { text-align: center; } .final-cta h2 { font-size: var(--fs-h2); margin-top: 1.1rem; } .final-cta .lead { margin: 1.5rem auto 0; } .final-cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 2.6rem; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .final-cta-meta a { color: var(--cyan); } /* ─── About: story + stack ──────────────────────────────────────────────── */ .story-block { margin-top: 1.4rem; } .story-p { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); margin-bottom: 1.5rem; } .story-p:first-child::first-letter { font-size: 3.4em; float: left; line-height: .78; padding: .04em .14em 0 0; font-weight: 600; color: var(--gold-2); } .stack-grid { display: grid; gap: 1.1rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); } .stack-card { background: color-mix(in srgb,var(--bg-2) 68%,transparent); border:1px solid var(--line); border-radius: var(--r); padding: 1.6rem; transition: border-color var(--t-fast), transform var(--t-fast); } .stack-card:hover { border-color: var(--line-strong); transform: translateY(-3px); } .stack-tool { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: .55rem; } .stack-why { font-size: var(--fs-body); color: var(--text-2); margin: 0; } .stack-why code { font-size: .82em; } /* ─── Operation: hierarchy / kit / training / decisions ─────────────────── */ .hierarchy { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.4rem; align-items: start; margin-top: 1rem; } .hierarchy-svg { width: 100%; height: auto; } .hier-line { stroke: var(--line-strong); stroke-width: 1.5; fill: none; } .hier-node { cursor: pointer; } .hier-box { fill: color-mix(in srgb,var(--bg-2) 85%,transparent); stroke: var(--line-strong); stroke-width: 1.5; transition: fill .25s var(--e), stroke .25s var(--e); } .hier-box.matt { fill: color-mix(in srgb,var(--gold) 22%,var(--bg-2)); stroke: var(--gold); } .hier-box.council { fill: color-mix(in srgb,var(--violet) 16%,var(--bg-2)); stroke: color-mix(in srgb,var(--violet) 60%,var(--line-strong)); } .hier-box.chief { fill: color-mix(in srgb,var(--cyan) 12%,var(--bg-2)); stroke: color-mix(in srgb,var(--cyan) 55%,var(--line-strong)); } .hier-box.manager { fill: color-mix(in srgb,var(--cyan-2) 10%,var(--bg-2)); stroke: color-mix(in srgb,var(--cyan-2) 45%,var(--line-strong)); } .hier-box.spec { fill: color-mix(in srgb,var(--bg-3) 90%,transparent); stroke: var(--line-strong); } .hier-node:hover .hier-box, .hier-node.is-active .hier-box { stroke-width: 2.2; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--cyan) 50%,transparent)); } .hier-label { fill: var(--text); font: 600 14px var(--f-sans); text-anchor: middle; } .hier-sub { fill: var(--gray); font: 500 10px var(--f-mono); letter-spacing: .08em; text-anchor: middle; } .hier-sub.small { font-size: 9px; fill: var(--gray-2); } .hier-detail { position: sticky; top: 110px; background: color-mix(in srgb,var(--bg-2) 78%,transparent); border:1px solid var(--line); border-radius: var(--r); padding: 1.8rem; } .hier-detail-role { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); } .hier-detail-title { font-size: var(--fs-h3); margin: .5rem 0 .9rem; } .hier-detail-q { color: var(--text); font-weight: 500; margin-bottom: .8rem; } .hier-detail-when { color: var(--text-2); font-size: var(--fs-body); margin: 0; } .kit-grid { display: grid; gap: 1.2rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); } .kit-card { background: color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--line); border-radius: var(--r); padding: 1.8rem; transition: border-color var(--t-fast), transform var(--t-fast); } .kit-card:hover { border-color: var(--line-strong); transform: translateY(-4px); } .kit-card-highlight { border-color: color-mix(in srgb,var(--gold) 45%,var(--line-strong)); background: color-mix(in srgb,var(--gold) 7%,var(--bg-2)); } .kit-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb,var(--bg-3) 60%,transparent); margin-bottom: 1.2rem; } .kit-card h3 { font-size: var(--fs-h3); margin-bottom: .6rem; } .kit-card p { font-size: var(--fs-body); color: var(--text-2); margin: 0; } .kit-cta-area { display: grid; gap: 1.4rem; margin-top: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); } .kit-cta-free, .kit-cta-paid { border:1px solid var(--line); border-radius: var(--r); padding: 2rem; } .kit-cta-free { background: color-mix(in srgb,var(--cyan) 9%,var(--bg-2)); border-color: color-mix(in srgb,var(--cyan) 40%,var(--line-strong)); } .kit-cta-paid { background: color-mix(in srgb,var(--bg-2) 70%,transparent); } .kit-cta-free h3, .kit-cta-paid h3 { font-size: var(--fs-h3); margin-bottom: .6rem; } .kit-cta-free p, .kit-cta-paid p { color: var(--text-2); } .kit-cta-free .btn, .kit-cta-paid .btn { margin-top: 1rem; } .kit-rate { font-family: var(--f-mono); font-size: var(--fs-label); color: var(--gold-2) !important; letter-spacing: .03em; } .training-cols { display: grid; gap: 1.4rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); } .training-col { background: color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: var(--r); padding: 1.8rem; } .training-col.violations { border-top-color: var(--rose); } .training-col.near { border-top-color: var(--gold); } .training-col.strengths { border-top-color: var(--cyan-2); } .training-col h3 { font-size: var(--fs-h3); margin-bottom: 1.1rem; } .training-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .training-col li { font-size: var(--fs-body); color: var(--text-2); line-height: 1.55; } .training-col li strong { color: var(--text); font-weight: 600; } .training-foot { margin-top: 1.8rem; text-align: center; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .decision-grid { display: grid; gap: 1.4rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); } .decision-card { background: color-mix(in srgb,var(--bg-2) 72%,transparent); border:1px solid var(--line); border-radius: var(--r); padding: 1.9rem; } .decision-card h3 { font-size: var(--fs-h3); } .decision-date { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-2); margin: .5rem 0 1.2rem; } .decision-step { font-size: var(--fs-body); color: var(--text-2); margin-bottom: 1rem; line-height: 1.55; } .decision-step strong { display: block; color: var(--cyan); font-weight: 600; font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; } /* ─── Shop: tiers / catalogue / faq ─────────────────────────────────────── */ .tier-grid { display: grid; gap: 1.4rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); } .tier-card { display: flex; flex-direction: column; position: relative; background: color-mix(in srgb,var(--bg-2) 78%,transparent); border:1px solid var(--line); border-radius: var(--r); padding: 2rem 1.8rem; cursor: pointer; overflow: hidden; transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid); } .tier-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--gold-2)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); } .tier-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb,var(--cyan) 48%,var(--line-strong)); box-shadow: 0 26px 50px -28px color-mix(in srgb,var(--cyan) 55%,#000); } .tier-card:hover::before { transform: scaleX(1); } .tier-name { font-size: 1.15rem; font-weight: 600; color: var(--text); } .tier-price { font-family: var(--f-mono); font-weight: 600; font-size: clamp(2.4rem,4.4vw,3.2rem); line-height: 1; color: var(--text); margin: .8rem 0 1.2rem; letter-spacing: -0.02em; } .tier-price .currency { font-size: .5em; vertical-align: super; color: var(--gold-2); } .tier-price-unit { font-size: .36em; color: var(--gray); letter-spacing: 0; } .tier-card p { font-size: var(--fs-body); color: var(--text-2); margin: 0 0 1.6rem; flex: 1; } .tier-cta { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--cyan); transition: gap var(--t-fast); } .tier-card:hover .tier-cta { gap: .85em; } .cat-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.4rem; } .cat-tab { display: inline-flex; align-items: center; gap: .55em; font: 600 var(--fs-label)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); background: color-mix(in srgb,var(--bg-2) 60%,transparent); border:1px solid var(--line); padding: .8em 1.3em; border-radius: var(--r-pill); transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); } .cat-tab small { font-family: var(--f-mono); font-size: .72em; color: var(--gray); background: color-mix(in srgb,var(--bg-3) 70%,transparent); padding: .15em .5em; border-radius: var(--r-pill); } .cat-tab:hover { color: var(--text); border-color: var(--line-strong); } .cat-tab.active { color: var(--on-accent); background: linear-gradient(120deg,var(--cyan),var(--cyan-2)); border-color: transparent; } .cat-tab.active small { color: var(--on-accent); background: color-mix(in srgb,#fff 35%,transparent); } .cat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); } .cat-item { background: color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--line); border-radius: var(--r-sm); padding: 1.4rem; transition: border-color var(--t-fast), transform var(--t-fast); } .cat-item:hover { border-color: var(--line-strong); transform: translateY(-2px); } .cat-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; } .cat-item-head h4 { font-size: 1.05rem; } .cat-item-price { font-family: var(--f-mono); font-weight: 600; color: var(--gold-2); white-space: nowrap; } .cat-item p { font-size: var(--fs-body); color: var(--text-2); margin: 0 0 1rem; } .cat-item-meta { display: flex; flex-wrap: wrap; gap: .4rem; } .cat-item-meta span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--gray); border:1px solid var(--line); border-radius: 6px; padding: .2em .5em; } .faq-list { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; } .faq-item { background: color-mix(in srgb,var(--bg-2) 68%,transparent); border:1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; } .faq-item[open] { border-color: var(--line-strong); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; cursor: pointer; padding: 1.3rem 1.5rem; font-weight: 600; font-size: var(--fs-lead); color: var(--text); } .faq-q::-webkit-details-marker { display: none; } .faq-q::after { content: "+"; font-family: var(--f-mono); font-size: 1.5rem; font-weight: 400; color: var(--cyan); transition: transform var(--t-fast); line-height: 1; } .faq-item[open] .faq-q::after { transform: rotate(45deg); } .faq-a { padding: 0 1.5rem 1.4rem; color: var(--text-2); font-size: var(--fs-body); line-height: 1.65; } /* ─── Shop: budget builder ──────────────────────────────────────────────── */ .shop-presets { margin: 1.5rem 0 0; } .shop-presets-lead { text-align: center; color: var(--text-2); font-size: var(--fs-body); margin: 0 0 1.4rem; } .shop-presets-inner { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); } .shop-preset { display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: 1.2rem 1.3rem; cursor: pointer; background: color-mix(in srgb,var(--bg-2) 74%,transparent); border:1px solid var(--line); border-radius: var(--r); transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); } .shop-preset:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--cyan) 50%,var(--line-strong)); box-shadow: 0 18px 38px -24px color-mix(in srgb,var(--cyan) 55%,#000); } .shop-preset.is-active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; } .shop-preset-name { font-weight: 600; font-size: 1.02rem; color: var(--text); } .shop-preset-price { font-family: var(--f-mono); font-weight: 600; color: var(--gold-2); font-size: 1.25rem; } .shop-preset-price small { font-size: .6em; color: var(--gray); } .shop-preset-blurb { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .03em; color: var(--gray); } .shop-preset-scratch { justify-content: center; text-align: center; border-style: dashed; } .shop-builder { margin-top: clamp(2.4rem,5vw,3.6rem); } .shop-cat-tabs { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2rem; } .shop-cat-tab { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem 1.2rem; cursor: pointer; background: color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); } .shop-cat-tab:hover { transform: translateY(-2px); border-color: var(--line-strong); } .shop-cat-tab b { font-size: 1rem; color: var(--text); } .shop-cat-tab span { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .shop-cat-tab small { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--cyan); } .shop-cat-tab.is-active { border-color: var(--cyan); background: color-mix(in srgb,var(--cyan) 12%,transparent); } .shop-cat-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); } .shop-svc { display: flex; flex-direction: column; background: color-mix(in srgb,var(--bg-2) 70%,transparent); border:1px solid var(--line); border-radius: var(--r-sm); padding: 1.3rem; transition: border-color var(--t-fast), transform var(--t-fast); } .shop-svc:hover { border-color: var(--line-strong); transform: translateY(-2px); } .shop-svc.is-selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; background: color-mix(in srgb,var(--cyan) 8%,var(--bg-2)); } .shop-svc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .4rem; } .shop-svc-head h4 { font-size: 1.02rem; } .shop-svc-price { font-family: var(--f-mono); font-weight: 600; color: var(--gold-2); white-space: nowrap; } .shop-svc-price small { font-size: .62em; color: var(--gray); } .shop-svc-desc { font-size: var(--fs-body); color: var(--text-2); margin: 0 0 .9rem; flex: 1; } .shop-svc-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .shop-svc-meta span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .04em; color: var(--gray); border:1px solid var(--line); border-radius: 6px; padding: .2em .5em; } .shop-svc-rec { color: var(--violet) !important; border-color: color-mix(in srgb,var(--violet) 40%,var(--line)) !important; } .shop-svc-actions { display: flex; align-items: center; gap: .8rem; margin-top: auto; } .shop-svc-actions.is-on { justify-content: space-between; } .shop-svc-add { width: 100%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .03em; color: var(--on-accent); background: linear-gradient(120deg,var(--cyan),var(--cyan-2)); padding: .7em 1em; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); } .shop-svc-add:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb,var(--cyan) 80%,transparent); } .shop-svc-remove { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--gray); cursor: pointer; border-bottom: 1px solid transparent; } .shop-svc-remove:hover { color: var(--rose); border-bottom-color: color-mix(in srgb,var(--rose) 50%,transparent); } .shop-step { display: inline-flex; align-items: center; gap: .2rem; border:1px solid var(--line-strong); border-radius: var(--r-pill); padding: .2rem; } .shop-step button { width: 30px; height: 30px; border-radius: 50%; font-size: 1.1rem; line-height: 1; color: var(--text); background: color-mix(in srgb,var(--bg-3) 80%,transparent); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .shop-step button:hover { background: var(--cyan); color: var(--on-accent); } .shop-step-h { min-width: 44px; text-align: center; font-family: var(--f-mono); font-weight: 600; color: var(--text); } .shop-step-fixed { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .shop-step-lg button { width: 38px; height: 38px; font-size: 1.3rem; } .shop-custom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding: 1.3rem 1.5rem; border:1px dashed var(--line-strong); border-radius: var(--r); background: color-mix(in srgb,var(--bg-2) 50%,transparent); } .shop-custom-text { color: var(--text-2); font-size: var(--fs-body); } .shop-custom-text b { color: var(--text); } /* Sticky budget bar */ .shop-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(.8rem,2vw,1.4rem); z-index: 1100; display: flex; align-items: center; gap: 1.4rem; width: min(680px, calc(100vw - 1.6rem)); padding: .8rem .8rem .8rem 1.5rem; background: color-mix(in srgb,var(--bg-2) 92%,transparent); border:1px solid var(--line-strong); border-radius: var(--r-pill); box-shadow: 0 20px 50px -20px rgba(0,0,0,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .shop-bar[hidden] { display: none; } .shop-bar-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .shop-bar-count { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .05em; text-transform: uppercase; color: var(--gray); } .shop-bar-total { font-family: var(--f-mono); font-weight: 700; font-size: 1.5rem; color: var(--text); line-height: 1.1; } .shop-bar-sub { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--text-2); } .shop-bar-cta { flex: 0 0 auto; font-weight: 600; font-size: var(--fs-label); letter-spacing: .03em; color: var(--on-accent); background: linear-gradient(120deg,var(--cyan),var(--cyan-2)); padding: .9em 1.4em; border-radius: var(--r-pill); cursor: pointer; transition: transform var(--t-fast); } .shop-bar-cta:hover { transform: translateY(-2px); } html.perf-min .shop-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg-2); } /* Checkout panel */ #shop-checkout { margin-top: clamp(2.6rem,5vw,4rem); } .shop-checkout-empty { text-align: center; border:1px dashed var(--line-strong); border-radius: var(--r); padding: 2.6rem 1.5rem; } .shop-checkout-empty h3 { font-size: var(--fs-h3); margin-bottom: .6rem; } .shop-checkout-empty p { color: var(--text-2); max-width: 48ch; margin: 0 auto; } .shop-checkout-card { background: color-mix(in srgb,var(--bg-2) 74%,transparent); border:1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.6rem); } .shop-checkout-grid { display: grid; gap: clamp(1.6rem,3vw,2.6rem); grid-template-columns: 1fr 1.1fr; align-items: start; } @media (max-width: 760px) { .shop-checkout-grid { grid-template-columns: 1fr; } } .shop-sum h3 { font-size: var(--fs-h3); margin-bottom: 1.2rem; } .shop-sum-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; } .shop-sum-list li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--line); } .shop-line-name { color: var(--text); } .shop-line-name em { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--violet); font-style: normal; } .shop-line-h { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .shop-line-p { font-family: var(--f-mono); font-weight: 600; color: var(--text-2); white-space: nowrap; } .shop-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .4rem; } .shop-sum-total span { font-family: var(--f-mono); font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .shop-sum-total b { font-family: var(--f-mono); font-weight: 700; font-size: clamp(2rem,4vw,2.8rem); color: var(--gold-2); } .shop-sum-meta { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); margin-top: .3rem; } .shop-sum-recur { margin-top: 1rem; padding: .8rem 1rem; border:1px solid color-mix(in srgb,var(--violet) 35%,var(--line)); border-radius: var(--r-sm); font-size: var(--fs-label); color: var(--text-2); } .shop-form { display: flex; flex-direction: column; gap: 1rem; } .shop-field { display: flex; flex-direction: column; gap: .45rem; } .shop-field label { font-size: var(--fs-label); font-weight: 500; color: var(--text-2); } .shop-field label span { color: var(--gray); font-weight: 400; } .shop-after { padding: 1rem 1.1rem; border-radius: var(--r-sm); background: color-mix(in srgb,var(--cyan) 9%,transparent); border:1px solid color-mix(in srgb,var(--cyan) 28%,var(--line)); font-size: var(--fs-body); color: var(--text-2); line-height: 1.55; } .shop-after b { color: var(--text); } .shop-pay { justify-content: center; margin-top: .3rem; } .shop-pay[disabled] { opacity: .65; pointer-events: none; } .shop-pay-note { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); text-align: center; margin: 0; } .shop-error { color: var(--rose); font-size: var(--fs-label); margin: 0; } .shop-error[hidden] { display: none; } /* ─── Contact: doorways / form / modal ──────────────────────────────────── */ .contact-doorways { display: grid; gap: 1.4rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); } .doorway { background: color-mix(in srgb,var(--bg-2) 72%,transparent); border:1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--r); padding: 1.9rem; display: flex; flex-direction: column; transition: transform var(--t-fast), border-color var(--t-fast); } .doorway:hover { transform: translateY(-4px); } .doorway.cyan { border-top-color: var(--cyan); } .doorway.violet { border-top-color: var(--violet); } .doorway h3 { font-size: var(--fs-h3); margin-bottom: .8rem; } .doorway p { font-size: var(--fs-body); color: var(--text-2); flex: 1; } .doorway-link { display: inline-block; margin-top: .8rem; font-weight: 600; color: var(--cyan); border-bottom: 1px solid color-mix(in srgb,var(--cyan) 40%,transparent); align-self: flex-start; } .doorway-link:hover { color: var(--cyan-2); } .doorway-link.stacked { margin-top: .5rem; } .contact-form { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.4rem; } .field { display: flex; flex-direction: column; gap: .55rem; } .field label { font-size: var(--fs-label); font-weight: 500; color: var(--text-2); } input, textarea, select { font: inherit; color: var(--text); background: color-mix(in srgb,var(--bg-2) 72%,transparent); border:1px solid var(--line-strong); padding: 15px 17px; border-radius: var(--r-sm); width: 100%; caret-color: var(--cyan); transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); } input::placeholder, textarea::placeholder { color: var(--gray); opacity: 1; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cyan); background: color-mix(in srgb,var(--bg-2) 92%,transparent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--cyan) 26%,transparent); } .budget-label-meta { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); } .budget-wrap { display: flex; flex-direction: column; gap: 1rem; } .budget-row { display: flex; align-items: center; gap: 1rem; } .budget-input { max-width: 190px; } .budget-hrs { font-family: var(--f-mono); font-size: var(--fs-body); color: var(--text-2); white-space: nowrap; } .budget-hrs-num { color: var(--gold-2); font-weight: 600; font-size: 1.1em; } .budget-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; padding: 0; background: var(--bg-3); border:1px solid var(--line); border-radius: var(--r-pill); } .budget-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(120deg,var(--cyan),var(--cyan-2)); border:2px solid var(--bg); cursor: pointer; box-shadow: 0 2px 12px -2px color-mix(in srgb,var(--cyan) 70%,transparent); } .budget-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--cyan); border:2px solid var(--bg); cursor: pointer; } .contact-promise { margin-top: clamp(2.4rem,5vw,3.6rem); padding-top: clamp(1.8rem,3vw,2.4rem); border-top: 1px solid var(--line); } .contact-promise-row { display: grid; gap: clamp(1.2rem,3vw,2.2rem); grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); } .contact-promise-row > div { display: flex; flex-direction: column; gap: .4rem; } .contact-promise-row b { font-family: var(--f-sans); font-weight: 600; font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1; color: var(--accent); letter-spacing: -0.02em; } .contact-promise-row span { font-size: var(--fs-body); color: var(--text-2); line-height: 1.5; } .modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--gutter); background: color-mix(in srgb,#000 64%,transparent); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { width: 100%; max-width: 460px; background: var(--bg-2); border:1px solid var(--line-strong); border-radius: var(--r); padding: 2.4rem; text-align: center; transform: translateY(14px) scale(.98); transition: transform var(--t-fast); } .modal-backdrop.open .modal { transform: none; } .modal h3 { font-size: var(--fs-h3); } .modal p { color: var(--text-2); margin: 1rem 0 1.7rem; } .modal-close { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--on-accent); background: linear-gradient(120deg,var(--cyan),var(--cyan-2)); padding: .8em 1.6em; border-radius: var(--r-pill); } /* ─── Privacy ───────────────────────────────────────────────────────────── */ .policy-top { padding-top: clamp(8rem,16vh,11rem); } .policy-h { font-size: var(--fs-h3); margin: 2.8rem 0 .8rem; } .policy-h.first { margin-top: 2rem; } .policy-top p { color: var(--text-2); } .policy-link { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb,var(--cyan) 40%,transparent); } .policy-link:hover { color: var(--cyan-2); } /* ─── Footer ────────────────────────────────────────────────────────────── */ .footer { position: relative; z-index: 3; border-top: 1px solid var(--line); background: color-mix(in srgb,var(--bg-2) 60%,transparent); padding: clamp(3rem,6vw,5rem) var(--gutter) 3rem; overflow: hidden; } .footer-wm { font-family: var(--f-sans); font-weight: 700; font-size: clamp(4rem,16vw,15rem); line-height: .8; letter-spacing: -0.04em; color: var(--watermark); text-align: center; margin-bottom: 2rem; user-select: none; } .footer-inner { max-width: var(--w-default); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.8rem; } .footer-brand img { height: 38px; width: auto; } .footer-mid { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--gray); text-align: center; line-height: 1.8; } .footer-mid em { color: var(--gold-2); font-style: normal; } .footer-right { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: flex-end; } .footer-right a { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); transition: color var(--t-fast); } .footer-right a:hover { color: var(--cyan); } /* ─── Reveal fallback when motion is off ────────────────────────────────── */ html.anim-off [data-reveal], html.anim-off [data-reveal-group] > *, html.anim-off [data-hero-step], html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; } /* ─── Performance tiers (main.js adds .perf-low/.perf-min to ) ─────── */ html.perf-low .atmos-orb { filter: blur(64px); } html.perf-min .atmos-orb, html.perf-min .cursor-glow, html.perf-min body::before { display: none !important; } html.perf-min .nav.shrunk, html.perf-min .nav-mobile { backdrop-filter: none; -webkit-backdrop-filter: none; } @media (prefers-contrast: more) { :root { --line: rgba(255,255,255,.2); --line-strong: rgba(255,255,255,.34); } } /* ─── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 1000px) { .editorial { grid-template-columns: 1fr; } .editorial-aside { position: static; } .hierarchy { grid-template-columns: 1fr; } .hier-detail { position: static; } .showcase-card, .showcase-card:nth-child(even) { grid-template-columns: 1fr; } .showcase-card:nth-child(even) .showcase-thumb { order: 0; } } @media (max-width: 880px) { .nav-links, .nav-phone, .nav-cta { display: none; } .nav-burger { display: flex; } } @media (max-width: 560px) { .hero { min-height: 88svh; } .cta-row { flex-direction: column; align-items: stretch; } .cta-row.center { align-items: center; } .btn { justify-content: center; } .footer-inner { flex-direction: column; text-align: center; } .footer-right { justify-content: center; } .budget-row { flex-direction: column; align-items: flex-start; gap: .7rem; } .budget-input { max-width: 100%; } .feature-row { grid-template-columns: 1fr; gap: .6rem; } .philo-row { grid-template-columns: 1fr; grid-template-areas: "num" "name" "desc"; row-gap: .4rem; } } /* ─── Print ─────────────────────────────────────────────────────────────── */ @media print { .preloader, #three-bg, .atmos-orb, .cursor-glow, .nav, .nav-mobile, .skip-link, .scroll-cue, .marquee, body::before { display: none !important; } body { color: #000; background: #fff; } main { z-index: auto; } .btn { border: 1px solid #000; color: #000 !important; background: none !important; } }