/* === Pharos Privacy — shared tokens & primitives ======================== Light mode is default. Add `class="dark"` to for night mode. ========================================================================= */ :root { /* Surfaces */ --bg: #F6F2EA; /* main page background */ --bg-soft: #EDE6D6; /* card / section accent */ --bg-deep: #E4DDC9; /* deeper neutral */ --feature: #0E1F2C; /* hero / featured-dark sections */ --feature-deep: #081621; /* deepest layer (footer / ticker) */ --on-feature: #F6F2EA; --on-feature-soft: #C9C2B0; /* Foregrounds */ --fg: #0E1F2C; --fg-soft: #1A3043; --fg-mute: #6A7785; --fg-faint: #8B97A4; /* Accent — brass beam */ --accent: #C9A35B; --accent-soft: #D9B872; --accent-pale: #F2E4C4; --accent-deep: #A6843F; /* State */ --success: #2D7A4F; --warn: #C97A2A; --danger: #B43A3A; /* Lines */ --border: color-mix(in oklab, var(--fg) 10%, transparent); --border-strong: color-mix(in oklab, var(--fg) 20%, transparent); /* Type */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-text: 'IBM Plex Sans', system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; /* Layout */ --max-w: 1320px; --gutter: 64px; /* Legacy aliases so existing styles keep working */ --paper: var(--bg); --paper-warm: var(--bg-soft); --paper-darker: var(--bg-deep); --ink: var(--fg); --ink-soft: var(--fg-soft); --ink-deeper: var(--feature-deep); --beam: var(--accent); --beam-soft: var(--accent-soft); --beam-pale: var(--accent-pale); --mute: var(--fg-mute); --mute-soft: var(--fg-faint); --line: var(--fg-soft); } :root.dark { --bg: #0A1620; --bg-soft: #122530; --bg-deep: #0F2029; --feature: #050F17; --feature-deep: #020810; --on-feature: #ECE5D2; --on-feature-soft: #ACA593; --fg: #ECE5D2; --fg-soft: #C4BFB0; --fg-mute: #8B95A0; --fg-faint: #6A7785; --accent: #D9B872; --accent-soft: #E6CB94; --accent-pale: #F2E4C4; --accent-deep: #C9A35B; --border: color-mix(in oklab, var(--fg) 14%, transparent); --border-strong: color-mix(in oklab, var(--fg) 26%, transparent); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--f-text); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 0.25s ease, color 0.25s ease; } a { color: inherit; text-decoration: none; } img, svg { display: block; } /* Helpers ================================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); } .eyebrow.no-dash::before { display: none; } .on-dark .eyebrow { color: var(--accent-soft); } .on-dark .eyebrow::before { background: var(--accent-soft); } .display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.025em; line-height: 1.0; text-wrap: balance; } /* Buttons ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 11px 16px; border-radius: 2px; transition: all 0.18s; cursor: pointer; border: 1px solid transparent; background: transparent; color: inherit; } .btn .arrow { display: inline-block; transition: transform 0.18s; } .btn:hover .arrow { transform: translateX(2px); } .btn.primary { background: var(--feature); color: var(--on-feature); } .btn.primary:hover { background: var(--feature-deep); } .btn.ghost { border-color: var(--border-strong); color: var(--fg); } .btn.ghost:hover { border-color: var(--fg); } .btn.brass { background: var(--accent); color: var(--feature); } .btn.brass:hover { background: var(--accent-soft); } .btn.on-dark.ghost { border-color: color-mix(in oklab, var(--on-feature) 22%, transparent); color: var(--on-feature); } .btn.on-dark.ghost:hover { border-color: var(--on-feature); } /* Lockup ================================================================ */ .lockup { display: inline-flex; align-items: center; gap: 12px; } .lockup .wordmark { display: flex; flex-direction: column; } .lockup .name { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 0.95; letter-spacing: -0.025em; color: var(--fg); } .lockup .tagline { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } .lockup.on-dark .name { color: var(--on-feature); } .lockup.on-dark .tagline { color: var(--accent-pale); } /* ===== Site Nav (shared across pages) ================================== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; } .nav-links { display: flex; gap: 28px; font-size: 13.5px; color: var(--fg-soft); justify-self: center; } .nav-links a { transition: color 0.15s; position: relative; } .nav-links a:hover { color: var(--accent); } .nav-links a.is-active { color: var(--accent); } .nav-links a.is-active::after { content: ""; position: absolute; bottom: -6px; left: 0; right: 0; height: 1px; background: var(--accent); } .nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; } /* Lang switcher + dark toggle ============================================ */ .lang-switch { display: inline-flex; align-items: center; background: color-mix(in oklab, var(--fg) 6%, transparent); border: 1px solid var(--border); border-radius: 999px; padding: 3px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .lang-switch button { background: transparent; border: 0; color: var(--fg-mute); padding: 5px 10px; border-radius: 999px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: all 0.15s; } .lang-switch button:hover { color: var(--fg); } .lang-switch button.is-active { background: var(--feature); color: var(--on-feature); } .mode-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; transition: all 0.18s; } .mode-toggle:hover { border-color: var(--fg); } .mode-toggle .sun { display: block; } .mode-toggle .moon { display: none; } :root.dark .mode-toggle .sun { display: none; } :root.dark .mode-toggle .moon { display: block; } /* ===== Footer (shared) ================================================== */ .site-footer { background: var(--feature-deep); color: color-mix(in oklab, var(--on-feature) 70%, transparent); padding: 72px 0 32px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 64px; padding-bottom: 56px; border-bottom: 1px solid color-mix(in oklab, var(--on-feature) 12%, transparent); } .footer-grid .brand p { font-size: 14px; color: color-mix(in oklab, var(--on-feature) 65%, transparent); max-width: 36ch; margin: 20px 0 0; } .footer-grid h6 { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-pale); margin: 0 0 18px; font-weight: 500; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; } .footer-grid a { color: color-mix(in oklab, var(--on-feature) 78%, transparent); transition: color 0.15s; } .footer-grid a:hover { color: var(--on-feature); } .footer-grid .brand .lockup .name { color: var(--on-feature); } .footer-grid .brand .lockup .tagline { color: var(--accent-pale); } .footer-foot { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--on-feature) 50%, transparent); } /* ===== Section helpers ================================================== */ section.s { padding: 120px 0; border-top: 1px solid var(--border); } section.s:first-of-type { border-top: 0; } section.s.dark, section.s.feature { background: var(--feature); color: var(--on-feature); border-top-color: transparent; } section.s.dark .display, section.s.feature .display { color: var(--on-feature); } section.s.warm { background: var(--bg-soft); } .s-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 64px; align-items: end; } .s-head h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(36px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.025em; margin: 14px 0 0; text-wrap: balance; } .s-head h2 em { font-style: normal; color: var(--accent); } .s-head .copy { font-size: 17px; color: var(--fg-soft); line-height: 1.55; max-width: 50ch; } section.s.dark .s-head .copy, section.s.feature .s-head .copy { color: color-mix(in oklab, var(--on-feature) 78%, transparent); } /* ===== Mobile ============================================================ */ @media (max-width: 900px) { :root { --gutter: 28px; } .nav-links { display: none; } .nav-inner { grid-template-columns: 1fr auto; } .s-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; } section.s { padding: 80px 0; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }