/* ========================================================================== Nexus — Shared site layer (chrome, layout, motion-base, theme bridge) Loads AFTER brand_assets/tokens.css. tokens.css owns the primitives; this file owns the reusable site: nav, drawer, cursor, reveals, footer, marquee, view-transitions, and the dark/light theme variable bridge. Brand rules: animate transform/opacity only, never transition-all, ease var(--ease-out). See brand_assets/DESIGN_SYSTEM.md. ========================================================================== */ /* -------------------------------------------------------------------------- 0. Box model — the layout system (width:100% + max-width + gutter padding on .nx-container etc.) assumes border-box. Without it every container is 100% + 48px of gutters wide, which overflows phones and makes iOS Safari zoom the layout viewport out (black side gutter). -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 1. Theme bridge — maps the runtime theme onto a single set of vars. data-theme is set pre-paint inline in each page's . -------------------------------------------------------------------------- */ :root { --fg-rgb: 255, 255, 255; /* drives every white-alpha border/text */ --page: #000000; --text: #ffffff; --surface: #0b0b0b; --surface-2: #111111; --surface-3: #0e0e0e; --nav-bg: rgba(0, 0, 0, 0.55); --nav-bg-solid: rgba(0, 0, 0, 0.92); --logo-filter: brightness(0) invert(1); /* client logos → white on dark */ --hairline: rgba(var(--fg-rgb), 0.10); color-scheme: dark; } :root[data-theme="light"] { --fg-rgb: 17, 18, 22; --page: #ffffff; --text: #111216; --surface: #f4f4f5; --surface-2: #ececee; --surface-3: #f7f7f8; --nav-bg: rgba(255, 255, 255, 0.65); --nav-bg-solid: rgba(255, 255, 255, 0.94); --logo-filter: none; color-scheme: light; } body { background: var(--page); color: var(--text); overflow-x: hidden; } /* -------------------------------------------------------------------------- 2. Layout primitives -------------------------------------------------------------------------- */ .nx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .nx-section { padding-block: clamp(var(--s-8), 12vh, var(--s-11)); position: relative; } .nx-section--tight { padding-block: var(--s-8); } .nx-eyebrow { color: var(--nx); display: inline-flex; align-items: center; gap: var(--s-2); } .nx-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--nx); display: inline-block; } /* Grain / texture overlay — subtle depth, fixed, non-interactive */ .nx-grain::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } /* -------------------------------------------------------------------------- 3. Header / nav -------------------------------------------------------------------------- */ .nx-header { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-4) var(--gutter); background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .nx-header[data-scrolled="true"] { background: var(--nav-bg-solid); border-bottom-color: var(--hairline); } .nx-header[data-hidden="true"] { transform: translateY(-100%); } .nx-header .nx-logo { font-size: 1.4rem; text-decoration: none; color: var(--text); } .nx-nav-links { display: none; gap: var(--s-6); align-items: center; } .nx-nav-links a { position: relative; color: var(--text); text-decoration: none; font-size: 0.95rem; letter-spacing: 0.02em; opacity: 0.82; transition: opacity var(--dur) var(--ease-out); } .nx-nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--nx); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .nx-nav-links a:hover, .nx-nav-links a:focus-visible, .nx-nav-links a[aria-current] { opacity: 1; } .nx-nav-links a:hover::after, .nx-nav-links a:focus-visible::after, .nx-nav-links a[aria-current]::after { transform: scaleX(1); } @media (min-width: 900px) { .nx-nav-links { display: flex; } } .nx-header-actions { display: flex; align-items: center; gap: var(--s-3); } /* Theme toggle + hamburger buttons */ .nx-iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; background: transparent; color: var(--text); border: 1px solid var(--hairline); border-radius: var(--r-pill); cursor: pointer; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .nx-iconbtn:hover { border-color: var(--nx); } .nx-iconbtn:focus-visible { outline: 2px solid var(--nx); outline-offset: 2px; } .nx-iconbtn:active { transform: scale(0.94); } .nx-hamburger { display: inline-grid; } @media (min-width: 900px) { .nx-hamburger { display: none; } } /* -------------------------------------------------------------------------- 4. Mobile drawer -------------------------------------------------------------------------- */ .nx-drawer { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; padding: var(--s-5) var(--gutter) var(--s-8); background: var(--page); transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out); visibility: hidden; } .nx-drawer[data-open="true"] { transform: translateY(0); visibility: visible; } .nx-drawer-links { display: flex; flex-direction: column; gap: var(--s-4); align-self: center; } .nx-drawer-links a { font-size: clamp(2rem, 9vw, 3.4rem); font-weight: var(--w-bold); letter-spacing: var(--track-tight); color: var(--text); text-decoration: none; transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .nx-drawer-links a:hover, .nx-drawer-links a:focus-visible { color: var(--nx); transform: translateX(8px); } .nx-drawer-top { display: flex; align-items: center; justify-content: space-between; } body[data-drawer-open="true"] { overflow: hidden; } /* -------------------------------------------------------------------------- 5. Scroll progress bar -------------------------------------------------------------------------- */ .nx-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 80; background: var(--nx); transform: scaleX(0); transform-origin: left; will-change: transform; } /* -------------------------------------------------------------------------- 6. Custom cursor (pointer devices only; never hides native focus rings) -------------------------------------------------------------------------- */ .nx-cursor, .nx-cursor-dot { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; border-radius: var(--r-pill); mix-blend-mode: difference; translate: -50% -50%; will-change: transform; } .nx-cursor { width: 38px; height: 38px; border: 1px solid #fff; transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .nx-cursor-dot { width: 5px; height: 5px; background: #fff; } .nx-cursor[data-hot="true"] { width: 64px; height: 64px; background: rgba(255,255,255,0.12); } @media (hover: none), (pointer: coarse) { .nx-cursor, .nx-cursor-dot { display: none; } } /* -------------------------------------------------------------------------- 7. Reveal system — base state for data-reveal elements. nexus-motion.js adds .is-in (or sets immediately if reduced-motion). -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; will-change: transform, opacity; } [data-reveal="up"] { transform: translateY(40px); } [data-reveal="down"] { transform: translateY(-40px); } [data-reveal="left"] { transform: translateX(40px); } [data-reveal="right"]{ transform: translateX(-40px); } /* Phones: side reveals become up-reveals. The pre-reveal translateX extends the scrollable overflow area past the viewport, which makes iOS Safari zoom the layout viewport out (shrunken page + black side gutter). */ @media (max-width: 760px) { [data-reveal="left"], [data-reveal="right"] { transform: translateY(40px); } } [data-reveal="fade"] { transform: none; } [data-reveal="zoom"] { transform: scale(0.94); } [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; } } /* -------------------------------------------------------------------------- 8. Marquee (pure CSS — used for trust band + client logos fallback) -------------------------------------------------------------------------- */ .nx-marquee { overflow: hidden; display: flex; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .nx-marquee__track { display: flex; flex-shrink: 0; gap: var(--s-7); align-items: center; padding-right: var(--s-7); animation: nx-scroll var(--marquee-dur, 32s) linear infinite; } .nx-marquee[data-reverse="true"] .nx-marquee__track { animation-direction: reverse; } .nx-marquee:hover .nx-marquee__track { animation-play-state: paused; } @keyframes nx-scroll { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .nx-marquee__track { animation: none; } } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ .nx-footer { background: var(--surface); border-top: 1px solid var(--hairline); padding-block: var(--s-8) var(--s-6); } .nx-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); } @media (min-width: 720px) { .nx-footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } } .nx-footer h4 { font-size: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mute); margin: 0 0 var(--s-4); } .nx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); } .nx-footer a { color: var(--text); text-decoration: none; opacity: 0.8; transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .nx-footer a:hover, .nx-footer a:focus-visible { opacity: 1; color: var(--nx); } .nx-footer-base { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--hairline); color: var(--mute); font-size: var(--type-small); } /* -------------------------------------------------------------------------- 10. Image treatment (brand §8.3 — overlay + red multiply tint) -------------------------------------------------------------------------- */ .nx-media { position: relative; overflow: hidden; } .nx-media img, .nx-media video { display: block; width: 100%; height: 100%; object-fit: cover; } .nx-media::after { content: ""; position: absolute; inset: 0; background: var(--grad-photo-dim); pointer-events: none; } .nx-media::before { content: ""; position: absolute; inset: 0; background: var(--nx); mix-blend-mode: multiply; opacity: 0.12; pointer-events: none; z-index: 1; } /* -------------------------------------------------------------------------- 11. Cross-page View Transitions (progressive enhancement) -------------------------------------------------------------------------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: nx-vt-out var(--dur) var(--ease-in) both; } ::view-transition-new(root) { animation: nx-vt-in var(--dur-slow) var(--ease-out) both; } @keyframes nx-vt-out { to { opacity: 0; } } @keyframes nx-vt-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* -------------------------------------------------------------------------- 12. Long-form legal document (privacy, terms) -------------------------------------------------------------------------- */ .nx-doc { max-width: 760px; margin: 0 auto; padding: clamp(var(--s-9), 16vh, var(--s-11)) var(--gutter) var(--s-10); } .nx-doc h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: var(--track-snug); line-height: 1.05; margin: 0 0 var(--s-4); } .nx-doc .nx-doc__meta { color: var(--mute); font-size: var(--type-small); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin-bottom: var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--hairline); } .nx-doc h2 { font-size: clamp(1.3rem, 2.5vw, 1.75rem); font-weight: var(--w-semi); margin: var(--s-7) 0 var(--s-3); } .nx-doc p, .nx-doc li { font-weight: var(--w-light); color: rgba(var(--fg-rgb), 0.9); } .nx-doc p { margin: 0 0 var(--s-4); } .nx-doc ul, .nx-doc ol { margin: var(--s-2) 0 var(--s-4) var(--s-5); display: grid; gap: 6px; } .nx-doc strong { color: var(--text); font-weight: var(--w-bold); } .nx-doc a { color: var(--nx); text-decoration: underline; text-underline-offset: 3px; } .nx-doc a:focus-visible { outline: 2px solid var(--nx); outline-offset: 3px; } /* -------------------------------------------------------------------------- 13. Lightbox (portfolio / production imagery) -------------------------------------------------------------------------- */ .nx-lb { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; padding: clamp(var(--s-4), 5vw, var(--s-8)); background: rgba(0,0,0,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .nx-lb[data-open="true"] { display: grid; opacity: 1; } .nx-lb__fig { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: grid; gap: var(--s-3); justify-items: center; } .nx-lb__img { max-width: 100%; max-height: 80vh; object-fit: contain; border: 1px solid var(--border-soft); transform: scale(0.98); transition: transform var(--dur) var(--ease-out); } .nx-lb[data-open="true"] .nx-lb__img { transform: scale(1); } .nx-lb__cap { color: rgba(255,255,255,0.82); font-size: var(--type-small); letter-spacing: var(--track-wide); text-align: center; } .nx-lb__btn { position: absolute; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; font-size: 22px; transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .nx-lb__btn:hover { background: var(--nx); border-color: var(--nx); } .nx-lb__btn:focus-visible { outline: 2px solid var(--nx); outline-offset: 3px; } .nx-lb__btn:active { transform: scale(0.92); } .nx-lb__close { top: var(--s-5); right: var(--s-5); } .nx-lb__prev { left: clamp(var(--s-3), 3vw, var(--s-6)); top: 50%; translate: 0 -50%; } .nx-lb__next { right: clamp(var(--s-3), 3vw, var(--s-6)); top: 50%; translate: 0 -50%; } .nx-lb__count { position: absolute; bottom: var(--s-5); left: 50%; translate: -50% 0; color: var(--mute); font-size: var(--type-small); letter-spacing: var(--track-eyebrow); } [data-lightbox] { cursor: zoom-in; } @media (max-width: 600px) { .nx-lb__prev, .nx-lb__next { top: auto; bottom: var(--s-5); translate: 0 0; } .nx-lb__prev { left: var(--s-4); } .nx-lb__next { right: var(--s-4); } .nx-lb__count { bottom: calc(var(--s-5) + 64px); } } @media (prefers-reduced-motion: reduce) { .nx-lb, .nx-lb__img { transition: none; } } /* -------------------------------------------------------------------------- 14. Floating theme toggle (FAB) — injected by nexus-core.js -------------------------------------------------------------------------- */ .nx-theme-fab { position: fixed; z-index: 55; bottom: clamp(16px, 4vw, 28px); right: clamp(16px, 4vw, 28px); width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; border-radius: var(--r-pill); border: 1px solid var(--border-soft); background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); } .nx-theme-fab:hover { border-color: var(--nx); transform: translateY(-2px); } .nx-theme-fab:focus-visible { outline: 2px solid var(--nx); outline-offset: 3px; } .nx-theme-fab:active { transform: scale(0.94); } .nx-theme-fab svg { width: 22px; height: 22px; } .nx-theme-fab .nx-fab-sun { display: none; } .nx-theme-fab .nx-fab-moon { display: block; } :root[data-theme="light"] .nx-theme-fab .nx-fab-sun { display: block; } :root[data-theme="light"] .nx-theme-fab .nx-fab-moon { display: none; } @media print { .nx-theme-fab { display: none; } } /* -------------------------------------------------------------------------- 15. Mobile refinements -------------------------------------------------------------------------- */ @media (max-width: 899px) { /* Declutter the mobile header — nav lives in the drawer */ .nx-header .btn { display: none; } .nx-header { padding-block: var(--s-3); } } @media (max-width: 720px) { .nx-section { padding-block: var(--s-8); } .nx-section--tight { padding-block: var(--s-7); } /* Keep the FAB clear of large bottom CTAs on tiny screens */ .nx-theme-fab { width: 46px; height: 46px; } } /* Skip link */ .nx-skip { position: fixed; top: -60px; left: var(--s-4); z-index: 100; background: var(--nx); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-soft); transition: top var(--dur) var(--ease-out); } .nx-skip:focus { top: var(--s-4); }