/* ========================================================================== Beaufort Intelligence — Consultancy site shared stylesheet (FOUNDATION KIT) Ported from website/assets/site.css (canonical brand tokens). DO NOT edit site.css. Token gold values follow the BUILD-BRIEF override (#C4A265). Section agents: add your section styles in section-scoped files or below the marked SECTION HOOKS line. Do not redefine tokens or device-frame internals. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* Palette (BUILD-BRIEF authoritative) */ --bg: #08090C; /* cool near-black */ --bg-deep: #040509; --ice: #E9ECF2; --steel: #6E7684; --gold-bright: #C4A265; /* brief override of site.css #E9CE7A */ --gold-soft: #B49A6A; /* antique gold, for borders / dim accents */ --parchment: #F0E8DA; --parchment-dim:#C8C4BB; --cyan-glow: #A8C8E0; --green-live: #3BD07A; /* Surfaces derived from palette */ --surface: rgba(168,200,224,0.04); --surface-2: rgba(168,200,224,0.06); --hairline: rgba(168,200,224,0.12); --hairline-soft:rgba(168,200,224,0.08); /* Fonts */ --font-serif: 'Spectral', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; /* Type scale (fluid, 1.25 minor-third-ish, clamp-based) */ --fs-eyebrow: clamp(10px, 0.7vw + 7px, 12px); --fs-small: clamp(13px, 0.4vw + 12px, 15px); --fs-body: clamp(16px, 0.5vw + 14px, 19px); --fs-lead: clamp(19px, 0.9vw + 16px, 24px); --fs-h3: clamp(22px, 1.4vw + 16px, 30px); --fs-h2: clamp(30px, 3vw + 18px, 52px); --fs-h1: clamp(40px, 6vw + 16px, 88px); --fs-display: clamp(52px, 9vw + 12px, 132px); /* Spacing rhythm (8px base) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px; --section-pad-y: clamp(80px, 11vh, 160px); --gutter: clamp(20px, 5vw, 64px); --maxw: 1240px; --maxw-prose: 720px; /* Chrome / radii / motion */ --radius: 14px; --radius-sm: 8px; --header-h: 72px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.6, 0.1, 0.4, 0.9); --t-fast: .2s; --t-base: .4s; } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Lenis owns scroll */ } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } body { background: var(--bg); color: var(--ice); font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.6; overflow-x: hidden; position: relative; min-height: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Cool vignette (ported) — fixed, behind content, above starfield */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(168,200,224,0.05) 0%, transparent 65%), radial-gradient(ellipse 140% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } /* Visible, brand-consistent focus for keyboard users */ :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--bg-deep); color: var(--ice); padding: 12px 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border: 1px solid var(--hairline); } .skip-link:focus { left: 12px; top: 12px; } /* -------------------------------------------------------------------------- 3. STARFIELD — drifting, subtle parallax, NO constellations The canvas is fixed, full-viewport, behind everything (z-index 0). -------------------------------------------------------------------------- */ #starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* main.js drives a translateY via --star-parallax for scroll parallax */ transform: translate3d(0, var(--star-parallax, 0px), 0); } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY HELPERS -------------------------------------------------------------------------- */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--steel); } .eyebrow .accent { color: var(--gold-bright); } h1, .h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; } h2, .h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; } h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; } .display { font-size: var(--fs-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.02em; } .lead { font-size: var(--fs-lead); color: var(--parchment-dim); line-height: 1.5; } .mono { font-family: var(--font-mono); } .figure { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; } .muted { color: var(--steel); } .prose { max-width: var(--maxw-prose); } .prose p + p { margin-top: var(--sp-3); } /* Chrome-textured italic text (ported) — for hero wordmark accents */ .chrome-text { background: linear-gradient(110deg, #1F2227 0%, #3A3F48 8%, #6D7784 18%, #A8B2BE 28%, #E2E6EC 38%, #FFFFFF 44%, #F2F4F8 50%, #CDD3DB 58%, #8C96A3 68%, #565D69 80%, #2A2E34 92%, #15171B 100%); background-size: 300% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: chromeFlow 11s var(--ease-io) infinite; display: inline-block; font-style: italic; } @keyframes chromeFlow { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } /* -------------------------------------------------------------------------- 5. CHROME SERPENT LOGO (ported mask + chrome flow) Use .logo (hero size) or .logo.logo-sm (header size). The base64 alpha mask is the Beaufort snake glyph. -------------------------------------------------------------------------- */ .logo { width: 112px; height: 140px; position: relative; display: block; -webkit-mask-image: var(--logo-mask); mask-image: var(--logo-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: alpha; mask-mode: alpha; background: linear-gradient(110deg, #1F2227 0%, #3A3F48 8%, #6D7784 18%, #A8B2BE 28%, #E2E6EC 38%, #FFFFFF 44%, #F2F4F8 50%, #CDD3DB 58%, #8C96A3 68%, #565D69 80%, #2A2E34 92%, #15171B 100%); background-size: 300% 100%; background-position: 0% 50%; animation: chromeFlow 11s var(--ease-io) infinite; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 4px 18px rgba(168,200,224,0.18)); } .logo.logo-sm { width: 28px; height: 35px; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.45)); } /* -------------------------------------------------------------------------- 6. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } section[id] { position: relative; z-index: 2; /* above starfield + vignette */ padding-block: var(--section-pad-y); scroll-margin-top: var(--header-h); } section[id] > .wrap { position: relative; } /* -------------------------------------------------------------------------- 7. STICKY HEADER -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--header-h); display: flex; align-items: center; padding-inline: var(--gutter); background: rgba(8,9,12, calc(var(--header-progress, 0) * 0.72)); backdrop-filter: blur(calc(var(--header-progress, 0) * 14px)); -webkit-backdrop-filter: blur(calc(var(--header-progress, 0) * 14px)); border-bottom: 1px solid rgba(168,200,224, calc(var(--header-progress, 0) * 0.10)); transition: background var(--t-fast) linear, border-color var(--t-fast) linear; } .site-header__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; } /* R3: header is a centered logo only (no nav, no CTA) on every device */ .site-header--centered .site-header__inner { justify-content: center; } .site-header--centered .brand { margin-right: 0; } .brand__word { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--ice); white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: var(--sp-4); } .site-nav a { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--parchment-dim); transition: color var(--t-fast); } .site-nav a:hover { color: var(--gold-bright); } /* Gold CTA button (primary) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); white-space: nowrap; } .btn--gold { background: var(--gold-bright); color: var(--bg-deep); box-shadow: 0 2px 18px rgba(196,162,101,0.28); } .btn--gold:hover { transform: translateY(-1px); box-shadow: 0 4px 26px rgba(196,162,101,0.42); } .btn--ghost { background: transparent; color: var(--ice); border-color: var(--hairline); } .btn--ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); } .burger { display: none; width: 40px; height: 40px; background: transparent; border: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; } .burger span { display: block; width: 22px; height: 1.5px; background: var(--ice); transition: transform .3s, opacity .2s; } .burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); } /* Mobile drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 39; background: rgba(4,5,9,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; opacity: 0; pointer-events: none; transition: opacity .3s; } .mobile-drawer.open { opacity: 1; pointer-events: auto; } .mobile-drawer a { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--ice); } .mobile-drawer a:hover { color: var(--gold-bright); } /* -------------------------------------------------------------------------- 8. FIXED MOBILE BOTTOM CTA BAR -------------------------------------------------------------------------- */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 38; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg-deep) 60%, rgba(4,5,9,0)); /* fade-only top edge; the bar itself is solid enough for contrast */ } .mobile-cta .btn { width: 100%; padding-block: 14px; font-size: 12px; } /* -------------------------------------------------------------------------- 9. SCROLL-REVEAL UTILITY (driven by main.js) Elements with [data-reveal] start hidden; main.js adds .is-revealed. Falls back to visible if JS/ScrollTrigger is unavailable (see