/* ============================================================================ NULIGHT x HERMES - V3 "Best of Both Worlds" (the designer's pick) ---------------------------------------------------------------------------- Synthesis of two systems: - Nulight "Monochrome Signal": ink/paper restraint, DM Sans body, the dual-swap pill .btn (copied 1:1 from build/styles.css), radial-glow dark sections, case-card proof, 4-step process. - Hermes "Electric Engraving": giant UPPERCASE serif display, uppercase MONO eyebrows/labels, the 6-feature scroll narrative with parallax drift, a full-bleed electric-blue signal band, the fixed-viewport hw-frame, grain noise, and the animated hw-arc gradient-stroke border. TYPE SYSTEM (3 roles, one each, no exceptions): - DISPLAY = Newsreader (opsz), UPPERCASE, weight 400/500: H1 + H2 + the footer wordmark. Newsreader is a literary high-contrast serif (NOT one of the flagged AI-default display serifs) and traces to Hermes's Sigurd serif. - BODY/UI = DM Sans 400/500: every paragraph, lead, button label, nav link, card title, footer link, bio. - MONO = Space Mono 400: eyebrows, section labels, capability labels, stat labels, process kickers, footer meta. Never headlines, never body. ONE controlled chroma: Hermes electric blue #0000f2 on off-white #f5f5f5, used for the agent product identity (signal band, arc stroke, blue links). No em dashes anywhere in this file. ============================================================================ */ /* ---- Tokens -------------------------------------------------------------- */ :root { /* Font roles (also declared inline in so the type system is auditable in one place; both must stay in sync). */ --font-display: "Newsreader", "Libre Caslon Display", "Times New Roman", serif; --font-body: "DM Sans", Arial, system-ui, sans-serif; --font-mono: "Space Mono", "Courier New", monospace; /* Nulight ink/paper */ --ink: #000000; --white: #ffffff; --surface: #f7f7f8; --surface-raised: #f0f0f2; --ink-900: #111113; --ink-950: #0a0a0c; --depth-navy: #141420; --depth-indigo: #1a1a2e; --depth-blue: #10101a; --muted: rgba(0,0,0,.6); /* >=4.5:1 on paper for body text */ --faint: rgba(0,0,0,.55); /* labels/meta; >=4.5:1 on paper */ --on-dark: #f0f0f2; --on-dark-muted: rgba(255,255,255,.66); --on-dark-faint: rgba(255,255,255,.5); --card-dark: rgba(255,255,255,.06); /* Hermes electric blue (the single controlled chroma) */ --hermes-blue: #0000f2; --hermes-fg: #f5f5f5; --hermes-accent: #edff45; /* acid lime, homeopathic micro-accent only */ --on-blue-muted: rgba(245,245,245,.82); /* >=4.5:1 on #0000f2 for body */ --on-blue-faint: rgba(245,245,245,.7); --blue-card: rgba(245,245,245,.07); --blue-line: rgba(245,245,245,.16); /* Type scale (modular ~1.25, 16px floor). One set of steps, no ad-hoc sizes. */ --t-overline: .72rem; /* mono overline */ --t-small: .8rem; /* small meta */ --t-label: .95rem; /* labels */ --t-body: 1rem; /* body */ --t-lead: 1.1rem; /* lead */ --t-title: 1.25rem; /* card title */ --t-h3: 1.6rem; /* h3 */ --t-h2: clamp(2.1rem, 4.4vw, 3.5rem); /* display h2 */ --t-h1: clamp(2.5rem, 6.4vw, 5.6rem); /* display h1 */ --lh-display: 1.0; --lh-heading: 1.12; --lh-body: 1.55; /* Spacing scale (rem multiples of a 0.25rem base; no magic numbers). */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --r-sm: 1px; --r-md: 1rem; --r-lg: 2rem; --r-full: 9999px; --gutter: 5rem; --section: 6.5rem; --frame: 10px; /* fixed hw-frame thickness */ } /* ---- Reset --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } h1,h2,h3,h4,h5,h6,p { margin: 0; padding: 0; font-weight: inherit; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-weight: 400; line-height: var(--lh-body); font-size: clamp(16px, 1.18vw, 19px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Fixed viewport frame (Hermes hw-frame, recolored ink) -------------- */ .hw-frame { position: fixed; inset: 0; z-index: 100; pointer-events: none; border: var(--frame) solid var(--ink); } /* ---- Grain noise overlay (Hermes hw-noise) ------------------------------ */ .hw-noise { position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* On the blue band the grain reads as light, so it flips to screen */ .signal .hw-noise-local { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .08; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ---- Layout -------------------------------------------------------------- */ .wrap { width: 100%; max-width: 100%; padding: 0 var(--gutter); position: relative; z-index: 10; margin: 0 auto; } .wrap-narrow { max-width: 1320px; margin: 0 auto; } .section { padding: var(--section) 0; position: relative; } .section-tight { padding: var(--s-12) 0; } .centered { text-align: center; display: flex; flex-direction: column; align-items: center; } /* ---- Type ---------------------------------------------------------------- */ /* MONO eyebrow / overline (role: Space Mono only) */ .eyebrow { font-family: var(--font-mono); font-size: var(--t-overline); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .eyebrow-on-blue { color: var(--on-blue-muted); } .section-dark .eyebrow { color: var(--on-dark-faint); } /* BODY lead (role: DM Sans) */ .lead { font-size: var(--t-lead); line-height: var(--lh-body); color: var(--muted); } /* DISPLAY serif (role: Newsreader, UPPERCASE). Newsreader is a literary high-contrast text serif; at display sizes it wants weight 400 and slightly looser leading than a heavier display serif would. unslop-ignore: serif display is a grounded decision tracing to Hermes's Sigurd display serif (see extraction/HERMES-DESIGN.md); the chosen face is deliberately NOT one of the flagged AI-default display serifs. */ .display-serif { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-display); letter-spacing: .005em; font-variation-settings: "opsz" 72; } .display-xl { font-size: var(--t-h1); line-height: 1.0; } .display-lg { font-size: var(--t-h2); line-height: 1.04; } .display-md { font-size: var(--t-h3); } /* ---- Buttons (Nulight signature dual-swap, copied 1:1) ------------------ */ .btn { align-items: center; background: var(--ink); border: 0; border-radius: var(--r-lg); color: var(--white); cursor: pointer; display: inline-flex; font-family: var(--font-body); font-size: 1em; gap: 1em; padding: .2em .25em .2em 1em; transition: opacity .2s; } .btn:hover { opacity: .85; } .btn.btn-light { background: var(--white); color: var(--ink); } .btn.btn-blue { background: var(--hermes-blue); color: var(--hermes-fg); } .btn-text-wrap { align-items: center; display: flex; flex-flow: column; justify-content: center; overflow: hidden; position: relative; } .btn-text { transition: transform .3s ease; } .btn-text-hover { position: absolute; transform: translate3d(0,100%,0); transform-style: preserve-3d; transition: transform .3s ease; } .btn:hover .btn-text { transform: translate3d(0,-100%,0); } .btn:hover .btn-text-hover { transform: translateZ(0); } .btn-icon-box { align-items: center; background: var(--white); border-radius: var(--r-full); display: flex; height: 2.25em; width: 2.25em; justify-content: center; overflow: hidden; position: relative; color: var(--ink); flex: none; } .btn:not(.btn-light):not(.btn-blue) .btn-icon-box { background: var(--white); color: var(--ink); } .btn.btn-light .btn-icon-box { background: var(--ink); color: var(--white); } .btn.btn-blue .btn-icon-box { background: var(--hermes-fg); color: var(--hermes-blue); } .btn-icon { width: 1em; height: 1em; transition: transform .3s ease; } .btn-icon-hover { position: absolute; width: 1em; height: 1em; transform: translate(-200%); transition: transform .3s ease; } .btn:hover .btn-icon { transform: translate(200%); } .btn:hover .btn-icon-hover { transform: translate(0); } .btn.btn-lg { font-size: 1.1em; } /* Secondary text link with arrow (ghost) */ .btn-ghost { display: inline-flex; align-items: center; gap: .5em; font-size: .98em; color: var(--ink); border-bottom: 1px solid rgba(0,0,0,.25); padding-bottom: .15em; transition: gap .25s ease, border-color .2s; } .btn-ghost:hover { gap: .85em; border-color: var(--ink); } .btn-ghost svg { width: 1em; height: 1em; } .on-blue .btn-ghost { color: var(--hermes-fg); border-color: var(--on-blue-muted); } .on-blue .btn-ghost:hover { border-color: var(--hermes-fg); } /* visible focus everywhere */ a:focus-visible, .btn:focus-visible, .case-card:focus-visible, .svc-card:focus-visible { outline: 2.5px solid var(--hermes-blue); outline-offset: 3px; border-radius: 4px; } .on-blue a:focus-visible, .signal a:focus-visible, .section-dark a:focus-visible, .footer a:focus-visible { outline-color: var(--hermes-accent); } /* ---- The hw-arc animated gradient-stroke ring (Hermes) ------------------ */ /* A thin animated glowing border via gradient + mask-composite:exclude. */ .hw-arc { position: relative; } .hw-arc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient( from var(--arc-angle, 0deg), var(--hermes-fg) 0%, var(--hermes-accent) 18%, var(--hermes-blue) 42%, var(--hermes-fg) 70%, var(--hermes-accent) 88%, var(--hermes-fg) 100%); -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; animation: arc-spin 2.23s linear infinite; } /* dark-on-light arc variant (ink/blue) for the hero CTA on paper */ .hw-arc.arc-ink::after { background: conic-gradient( from var(--arc-angle, 0deg), var(--ink) 0%, var(--hermes-blue) 30%, rgba(0,0,0,.15) 55%, var(--hermes-blue) 78%, var(--ink) 100%); } @property --arc-angle { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes arc-spin { to { --arc-angle: 360deg; } } /* ---- Header / nav (Nulight floating pill) ------------------------------- */ .header { position: sticky; top: 0; z-index: 60; padding: 1.1em 0; } .nav { display: flex; align-items: center; gap: 1.5em; max-width: 1080px; margin: 0 auto; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); box-shadow: 0 2px 12px 8px rgba(0,0,0,.04); border-radius: var(--r-full); padding: .45em .45em .45em 1.4em; } .brand { display: inline-flex; align-items: center; gap: .55em; font-size: 1.05em; letter-spacing: -.01em; } .brand .mark { height: 1.5em; width: auto; display: block; } .brand b { font-weight: 500; } .brand span { font-weight: 400; } .nav-links { display: flex; gap: 2em; justify-content: center; margin: 0 auto; } .nav-links a { font-size: var(--t-label); color: var(--ink); opacity: .72; transition: opacity .2s ease; position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.35em; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-links a:hover { opacity: 1; } .nav-links a:hover::after { transform: scaleX(1); } .nav-right { display: flex; justify-content: flex-end; } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding-top: var(--s-12); padding-bottom: var(--section); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--s-16); align-items: center; } .hero-copy { max-width: 42rem; } .hero .display-xl { margin: var(--s-4) 0 var(--s-6); max-width: 13ch; } .hero .lead { max-width: 52ch; } .hero-cta-row { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-8); } /* radiating-burst hero visual (inline-SVG, halftone-treated, our own art) */ .hero-burst { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 460px; margin-left: auto; border-radius: var(--r-md); overflow: hidden; background: var(--ink-950); display: flex; align-items: center; justify-content: center; } .hero-burst .burst-svg { width: 100%; height: 100%; } .hero-burst .burst-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* duotone halftone treatment: grayscale + blue tint via blend */ filter: grayscale(1) contrast(1.15) brightness(.85); opacity: .42; mix-blend-mode: luminosity; } .hero-burst .burst-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(0,0,242,.35), rgba(10,10,12,.92) 72%); mix-blend-mode: normal; } /* halftone dither dot screen over the visual */ .hero-burst .burst-dither { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(245,245,245,.5) .9px, transparent 1.1px); background-size: 4px 4px; mix-blend-mode: overlay; } .hero-stats { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-top: var(--s-12); padding-top: var(--s-8); border-top: 1px solid rgba(0,0,0,.12); } .hero-stat { display: flex; flex-direction: column; gap: var(--s-2); } .hero-stat-num { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1; letter-spacing: .005em; color: var(--ink); } .hero-stat-label { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } /* ---- Service mini-cards (Nulight) --------------------------------------- */ .svc-row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-4); } .svc-card { display: flex; align-items: center; gap: var(--s-4); background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: var(--r-md); padding: var(--s-4) var(--s-6); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .svc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.07); border-color: rgba(0,0,0,.18); } .svc-card .ico { width: 3rem; height: 3rem; flex: none; border-radius: 12px; background: var(--ink-900); color: #f0f0f2; display: flex; align-items: center; justify-content: center; } .svc-card .ico svg { width: 1.4rem; height: 1.4rem; } .svc-card .t { font-size: var(--t-label); font-weight: 500; } .svc-card .s { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: var(--s-1); } /* ---- Marquee (Nulight, KEEP) -------------------------------------------- */ .marquee { background: var(--surface-raised); padding: 1.4em 0; overflow: hidden; } .marquee-row { display: flex; align-items: center; gap: 2em; } .marquee-label { flex: none; font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding-left: var(--gutter); } .marquee-track-wrap { 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-track { display: flex; gap: 3.5em; align-items: center; width: max-content; animation: marquee 32s linear infinite; } .marquee-item { font-size: 1.25em; font-weight: 500; color: rgba(0,0,0,.32); white-space: nowrap; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================================ SIGNAL BAND - full-bleed electric blue (the controlled chroma moment) Carries the 6-capability narrative with parallax drift. ============================================================================ */ .signal { position: relative; overflow: hidden; background: var(--hermes-blue); color: var(--hermes-fg); padding: var(--section) 0; } .signal .wrap { z-index: 2; } .signal .signal-head { max-width: 46rem; margin-bottom: var(--s-16); } .signal .signal-head .display-lg { color: var(--hermes-fg); margin-top: var(--s-3); } .signal .signal-head .lead { color: var(--on-blue-muted); margin-top: var(--s-4); max-width: 60ch; } /* capability rows: alternating sides + parallax drift */ .cap-list { display: flex; flex-direction: column; gap: var(--s-24); } .cap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; will-change: transform; } .cap:nth-child(even) .cap-art { order: -1; } .cap-body { max-width: 30rem; } .cap-label { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .14em; text-transform: uppercase; color: var(--hermes-accent); margin: 0 0 var(--s-3); display: block; } .cap-h { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--lh-heading); letter-spacing: .005em; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--hermes-fg); } .cap-text { color: var(--on-blue-muted); font-size: var(--t-label); line-height: var(--lh-body); margin-top: var(--s-4); max-width: 36ch; } /* capability art panel: halftone + radiating lines, inline SVG / CSS only. A radial spotlight + inner shading give the engraving treatment depth so the line-art reads as lit rather than floating on a flat field. */ .cap-art { position: relative; aspect-ratio: 5/4; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(120% 120% at 50% 38%, #1a1aff 0%, #0000cf 48%, #000086 100%); border: 1px solid var(--blue-line); display: flex; align-items: center; justify-content: center; } .cap-art svg { width: 72%; height: 72%; position: relative; z-index: 1; } /* duotone+halftone capability art fills the whole 5/4 panel; ::after vignette mats it. object-fit:cover center-crops the 4:3 art into the 5:4 panel without distortion; border-radius:inherit guarantees the image is clipped to the panel's rounded corners. */ .cap-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; z-index: 1; display: block; } .cap-art .dither { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(245,245,245,.55) .8px, transparent 1px); background-size: 5px 5px; mix-blend-mode: overlay; } /* matted edge so the panel feels framed, echoing the hw-frame device. A darkening radial vignette (not a glow) shades the corners toward the field color and a 1px inner hairline reads as the mat. */ .cap-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border: 1px solid rgba(245,245,245,.07); border-radius: inherit; background: radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,70,.55) 100%); } /* signal CTA strip inside band */ .signal-cta { margin-top: var(--s-24); display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; } /* ---- Split / feature row (Nulight) -------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: center; } .split .lead { margin-top: var(--s-4); max-width: 52ch; } .split-media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4/3; background: var(--surface-raised); } .split-media img { width: 100%; height: 100%; object-fit: cover; } .sec-head { margin-bottom: var(--s-12); } .sec-head .display-lg { margin-top: var(--s-2); } .sec-head .lead { margin-top: var(--s-3); max-width: 58ch; } .centered .lead { margin-left: auto; margin-right: auto; } /* ---- Case studies (Nulight proof, KEEP) --------------------------------- */ .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-8); } .case-card { color: var(--ink); cursor: pointer; display: flex; flex-flow: column; gap: var(--s-4); border-radius: var(--r-md); transition: transform .25s ease; } .case-card:hover { transform: translateY(-3px); } .case-thumb { aspect-ratio: 4/3; border-radius: var(--r-md); overflow: hidden; width: 100%; background: var(--surface-raised); border: 1px solid rgba(0,0,0,.06); } .case-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .case-card:hover .case-thumb img { transform: scale(1.03); } .case-info { display: flex; flex-direction: column; gap: var(--s-2); } .case-name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: var(--t-h3); line-height: var(--lh-heading); } .case-outcome { color: var(--muted); font-size: var(--t-small); line-height: var(--lh-body); max-width: 34ch; } /* ---- Team / founder (Nulight, KEEP) ------------------------------------- */ .team-card { display: flex; flex-direction: column; gap: var(--s-4); } .team-photo { aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; background: var(--surface-raised); max-width: 16rem; } .team-photo img { width: 100%; height: 100%; object-fit: cover; } .team-name { font-size: var(--t-title); font-weight: 500; } .team-role { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: var(--s-1); } .team-bio { font-size: var(--t-small); line-height: var(--lh-body); color: var(--muted); margin-top: var(--s-3); max-width: 52ch; } /* ---- Dark sections (Nulight signal, radial glow) ------------------------ */ .section-dark { background: var(--ink-900); color: var(--on-dark); position: relative; } .section-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 45%, var(--depth-indigo) 0%, var(--ink-900) 70%); } .section-dark > .wrap { position: relative; z-index: 1; } .section-dark .lead { color: var(--on-dark-muted); } .section-dark .display-lg { color: var(--on-dark); } .why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-4); margin-top: var(--s-12); } .why-card { background: var(--card-dark); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); padding: var(--s-6); } .why-card-title { color: var(--on-dark); font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: var(--t-title); line-height: var(--lh-heading); margin-bottom: var(--s-3); } .why-card-text { color: var(--on-dark-muted); font-size: var(--t-small); line-height: var(--lh-body); } /* ---- Process (Nulight, KEEP) -------------------------------------------- */ .process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-8); margin-top: var(--s-12); } .process-step-num { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--s-4); } .process-step-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: var(--t-h3); line-height: var(--lh-heading); margin-bottom: var(--s-3); } .process-step-text { font-size: var(--t-small); line-height: var(--lh-body); color: var(--muted); } /* ---- Final CTA (Nulight dark) ------------------------------------------- */ .cta { text-align: center; } .cta .display-lg { max-width: 18ch; margin: 0 auto var(--s-3); } .cta .lead { color: var(--on-dark-muted); max-width: 54ch; margin: 0 auto var(--s-8); } /* ---- Footer (Nulight base + Hermes giant knockout wordmark) ------------- */ .footer { background: var(--ink-950); color: var(--on-dark-muted); position: relative; padding: var(--section) 0 var(--s-8); overflow: hidden; } .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--depth-blue) 0%, var(--ink-950) 70%); } .footer > .wrap { position: relative; z-index: 1; } /* giant knockout uppercase serif wordmark (Hermes hw-wordmark, tonal) */ .footer-wordmark { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: .8; letter-spacing: .03em; font-size: clamp(3.5rem, 16vw, 14rem); color: #15151c; /* near-bg debossed tonal word */ margin: 0 0 .12em; user-select: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .08em; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); padding: var(--s-12) 0; border-bottom: 1px solid rgba(255,255,255,.08); } .footer .brand { color: var(--white); margin-bottom: var(--s-4); } .footer-blurb { font-size: var(--t-small); line-height: var(--lh-body); max-width: 32ch; } .footer-col h4 { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: var(--s-4); } .footer-link { display: block; color: var(--on-dark-muted); font-size: var(--t-label); padding: var(--s-2) 0; transition: color .2s; } .footer-link:hover { color: var(--white); } .footer-credit { font-size: var(--t-small); line-height: var(--lh-body); color: var(--on-dark-faint); max-width: 70ch; padding: var(--s-8) 0; border-bottom: 1px solid rgba(255,255,255,.08); } .footer-credit b { color: var(--on-dark-muted); font-weight: 500; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-8); font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: .04em; color: var(--on-dark-faint); gap: var(--s-4); flex-wrap: wrap; } .footer-bottom a { color: var(--on-dark-faint); } .footer-bottom a:hover { color: var(--white); } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 1000px) { :root { --gutter: 2rem; --section: 4.5rem; } .hero-grid { grid-template-columns: 1fr; gap: var(--s-12); } .hero-burst { max-width: 24rem; margin: 0 auto; } .cap { grid-template-columns: 1fr; gap: var(--s-8); } .cap:nth-child(even) .cap-art { order: 0; } .cap-body { max-width: 100%; } .cap-art { max-width: 28rem; } .cap-list { gap: var(--s-16); } .why-grid, .process-grid { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: 1fr 1fr; } .svc-row { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; gap: var(--s-8); } .footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { :root { --gutter: 1.25rem; --frame: 7px; --section: 4rem; } body { font-size: 16px; } .nav-links { display: none; } .nav { max-width: 100%; } .hero-stats { gap: var(--s-8); } .hero-cta-row { gap: var(--s-4); } .grid-3, .why-grid, .process-grid, .footer-top { grid-template-columns: 1fr; } .marquee-label { padding-left: var(--gutter); } .footer-bottom { flex-direction: column; align-items: flex-start; } .cap-list { gap: var(--s-12); } } /* ---- Reduced motion: pause arc, marquee, parallax ----------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hw-arc::after { animation: none; } .marquee-track { animation: none; } .cap { transform: none !important; } * { scroll-behavior: auto !important; } }