/* ========================================================================= QPN Catalyst — shared chrome (nav, terms notice banner, footer, ecosystem block). Loaded on every page BEFORE styles.css. Tokens (--qpn-*) are the canonical design system. styles.css aliases its legacy --color-*, --font-*, --space-* tokens to these. Fonts (Source Serif 4 / Inter / JetBrains Mono) are loaded in each page's via with preconnect hints — NOT via @import here (avoids serializing the font fetch behind this CSS file). Anchored to: docs/brief-website.md §3 (design system), §4 (shared chrome), §5.4 (ecosystem block). Palette/scale mirror WebShield Navy v1.3 with QPN's warm paper substituted as --qpn-page. ========================================================================= */ /* ── 1. Design tokens ──────────────────────────────────────────────────── */ :root { /* Palette */ --qpn-ink: #0B1F3A; --qpn-ink-deep: #0E2748; --qpn-ink-muted: #3B4A63; --qpn-ink-faint: #6B7585; --qpn-accent: #8A6B2E; --qpn-accent-hover:#A3823A; --qpn-accent-soft: rgba(138, 107, 46, 0.35); --qpn-page: #FFFBF5; /* QPN signature paper — NOT WebShield bone */ --qpn-surface: #FFFFFF; --qpn-surface-2: #FBF8F1; --qpn-rule: #D7CFBF; --qpn-rule-faint: #E8E2D4; --qpn-notice-bg: #FEF3C7; --qpn-notice-border: #D97706; --qpn-notice-text: #78350F; --qpn-link: #2563EB; --qpn-link-hover: #1D4ED8; /* Typography */ --qpn-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; --qpn-font-body: 'Inter', system-ui, -apple-system, sans-serif; --qpn-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Type scale (px — anchors the chrome; rem-based component styles in styles.css continue to scale off html { font-size: 17px }). */ --qpn-fs-display-lg: 40px; --qpn-fs-display: 26px; --qpn-fs-lede: 18px; --qpn-fs-body: 15px; --qpn-fs-body-sm: 13.5px; --qpn-fs-label: 11px; --qpn-fs-micro: 10.5px; --qpn-lh-tight: 1.15; --qpn-lh-lede: 1.45; --qpn-lh-body: 1.7; --qpn-tracking-label: 0.16em; --qpn-tracking-mono: 0.04em; /* Spacing */ --qpn-sp-1: 4px; --qpn-sp-2: 8px; --qpn-sp-3: 12px; --qpn-sp-4: 16px; --qpn-sp-5: 22px; --qpn-sp-6: 28px; --qpn-sp-7: 40px; --qpn-sp-8: 64px; /* Widths */ --qpn-w-chrome: 1200px; --qpn-w-marketing: 1080px; --qpn-w-doc: 760px; --qpn-w-doc-shell: 1100px; /* Rules */ --qpn-rule-hair: 1px; --qpn-rule-anchor: 2px; /* Universal card (Ledger Row) component tokens — mirrors --ws-uc-*. */ --qpn-uc-rail-width: 140px; --qpn-uc-col-gap: 32px; --qpn-uc-pad-y: 26px; --qpn-uc-pad-x: 32px; --qpn-uc-border: var(--qpn-rule-hair) solid var(--qpn-rule); } /* ── 2. Reset + base ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 17px; /* anchors rem-based component sizing in styles.css */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--qpn-font-body); color: var(--qpn-ink); background: var(--qpn-page); line-height: var(--qpn-lh-body); min-height: 100vh; display: flex; flex-direction: column; } /* Anchor links offset for sticky nav */ :target { scroll-margin-top: 80px; } /* ── 3. Skip link ──────────────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100%; left: var(--qpn-sp-4); background: var(--qpn-link); color: #fff; padding: var(--qpn-sp-2) var(--qpn-sp-4); border-radius: 0 0 4px 4px; font-size: var(--qpn-fs-body-sm); font-weight: 600; text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; color: #fff; } /* ── 4. Sticky navy nav ────────────────────────────────────────────────── */ .qpn-nav { position: sticky; top: 0; z-index: 40; background: linear-gradient(90deg, var(--qpn-ink) 0%, var(--qpn-ink-deep) 100%); color: var(--qpn-page); border-bottom: 1px solid var(--qpn-accent-soft); font-family: var(--qpn-font-body); } .qpn-nav__wrap { max-width: var(--qpn-w-chrome); margin: 0 auto; padding: var(--qpn-sp-4) var(--qpn-sp-7); display: flex; align-items: center; justify-content: space-between; } .qpn-nav__brand { color: var(--qpn-page); text-decoration: none; display: flex; align-items: baseline; gap: 10px; } .qpn-nav__brand-name { font-family: var(--qpn-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .qpn-nav__brand-domain { font-family: var(--qpn-font-mono); font-size: 10.5px; color: var(--qpn-accent); letter-spacing: var(--qpn-tracking-mono); } .qpn-nav__links { display: flex; gap: 28px; } .qpn-nav__links a { color: var(--qpn-page); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.88; padding-bottom: 2px; } .qpn-nav__links a:hover { opacity: 1; } .qpn-nav__links a[aria-current="page"] { opacity: 1; border-bottom: 1px solid var(--qpn-accent); } .qpn-nav__links a:focus-visible { outline: 2px solid var(--qpn-accent); outline-offset: 2px; border-radius: 2px; opacity: 1; } /* Hamburger — CSS-only checkbox pattern, restyled for navy chrome */ .qpn-nav__toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .qpn-nav__toggle:focus-visible + .qpn-nav__hamburger { outline: 2px solid var(--qpn-accent); outline-offset: 2px; } .qpn-nav__hamburger { display: none; /* shown via media query on narrow screens */ flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; cursor: pointer; padding: 4px; border-radius: 4px; order: 2; } .qpn-nav__hamburger-bar { display: block; width: 100%; height: 2px; background: var(--qpn-page); border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; } .qpn-nav__toggle:checked ~ .qpn-nav__hamburger .qpn-nav__hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .qpn-nav__toggle:checked ~ .qpn-nav__hamburger .qpn-nav__hamburger-bar:nth-child(2) { opacity: 0; } .qpn-nav__toggle:checked ~ .qpn-nav__hamburger .qpn-nav__hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── 5. Terms notice banner ───────────────────────────────────────────── */ /* Rule below the banner is 1px (not 2px) — the banner already carries visual weight from its amber fill; a hairline rule keeps clickwrap- conspicuousness without the "alert state" feel. Design review W5. */ .qpn-banner { background: var(--qpn-notice-bg); border-bottom: 1px solid var(--qpn-notice-border); padding: var(--qpn-sp-3) var(--qpn-sp-7); } .qpn-banner__wrap { max-width: var(--qpn-w-chrome); margin: 0 auto; font-size: var(--qpn-fs-body); font-weight: 500; color: var(--qpn-notice-text); line-height: 1.5; } .qpn-banner__wrap a { color: var(--qpn-notice-text); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 2px; } /* ── 6. Footer ─────────────────────────────────────────────────────────── */ .qpn-footer { background: var(--qpn-ink); color: var(--qpn-page); font-family: var(--qpn-font-body); border-top: 2px solid var(--qpn-accent); margin-top: auto; /* sticky footer */ } /* Row 1 — columns */ .qpn-footer__cols { max-width: var(--qpn-w-chrome); margin: 0 auto; padding: 56px var(--qpn-sp-7) 44px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; } .qpn-footer__brand-name { font-family: var(--qpn-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; } .qpn-footer__brand-domain { font-family: var(--qpn-font-mono); font-size: 11px; color: var(--qpn-accent); letter-spacing: var(--qpn-tracking-mono); margin-bottom: 16px; } .qpn-footer__brand-desc { font-size: 13px; line-height: 1.55; opacity: 0.78; max-width: 320px; } .qpn-footer__col-title { font-size: var(--qpn-fs-label); letter-spacing: var(--qpn-tracking-label); text-transform: uppercase; color: var(--qpn-accent); font-weight: 600; margin-bottom: 16px; } .qpn-footer__col a { color: var(--qpn-page); text-decoration: none; font-size: 13px; opacity: 0.88; display: block; margin-bottom: 8px; } .qpn-footer__col a:hover { opacity: 1; } .qpn-footer__col a:focus-visible { outline: 2px solid var(--qpn-accent); outline-offset: 2px; border-radius: 2px; opacity: 1; } /* Row 1 — ecosystem block (5-card grid, mirror of WebShield ws-eco). Sits at the top of the footer to act as a visual outro / network map. Columns and copy follow. */ .qpn-eco { background: var(--qpn-ink-deep); padding: 56px var(--qpn-sp-7); } .qpn-eco__wrap { max-width: var(--qpn-w-chrome); margin: 0 auto; } .qpn-eco__eyebrow { font-size: var(--qpn-fs-label); letter-spacing: var(--qpn-tracking-label); text-transform: uppercase; color: var(--qpn-accent); font-weight: 600; margin-bottom: 8px; } .qpn-eco__title { font-family: var(--qpn-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--qpn-sp-6); color: var(--qpn-page); } .qpn-eco__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--qpn-sp-4); } .qpn-eco__card { display: block; background: rgba(255, 251, 245, 0.04); border: 1px solid var(--qpn-accent-soft); border-radius: 6px; padding: var(--qpn-sp-5); text-decoration: none; color: var(--qpn-page); transition: background 0.15s ease, border-color 0.15s ease; min-height: 160px; } .qpn-eco__card[href]:hover { background: rgba(255, 251, 245, 0.08); border-color: var(--qpn-accent); } .qpn-eco__card[href]:focus-visible { outline: 2px solid var(--qpn-accent); outline-offset: 2px; background: rgba(255, 251, 245, 0.08); } .qpn-eco__card--here { border-color: var(--qpn-accent); background: rgba(138, 107, 46, 0.1); } .qpn-eco__card--disabled { opacity: 0.6; cursor: default; } .qpn-eco__card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--qpn-sp-3); } .qpn-eco__card-ord { font-family: var(--qpn-font-mono); font-size: var(--qpn-fs-micro); color: var(--qpn-accent); letter-spacing: var(--qpn-tracking-mono); } .qpn-eco__card-here-tag { font-family: var(--qpn-font-mono); font-size: 9.5px; color: var(--qpn-accent); text-transform: uppercase; letter-spacing: var(--qpn-tracking-mono); border: 1px solid var(--qpn-accent); border-radius: 3px; padding: 2px 6px; } .qpn-eco__card-name { font-family: var(--qpn-font-display); font-size: 15px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.005em; } .qpn-eco__card-domain { font-family: var(--qpn-font-mono); font-size: 10.5px; color: var(--qpn-accent); letter-spacing: var(--qpn-tracking-mono); margin-bottom: var(--qpn-sp-3); opacity: 0.85; } .qpn-eco__card-desc { font-size: 12.5px; line-height: 1.5; opacity: 0.85; } /* Row 3 — copy line */ .qpn-footer__copy { border-top: 1px solid rgba(246, 243, 236, 0.12); padding: 18px var(--qpn-sp-7); max-width: var(--qpn-w-chrome); margin: 0 auto; font-size: 12px; opacity: 0.6; font-family: var(--qpn-font-mono); letter-spacing: var(--qpn-tracking-mono); display: flex; justify-content: space-between; align-items: center; gap: var(--qpn-sp-4); flex-wrap: wrap; } .qpn-footer__version { opacity: 0.85; } /* ── 7. Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .qpn-eco__grid { grid-template-columns: repeat(3, 1fr); } .qpn-eco__card { min-height: 0; } } @media (max-width: 720px) { /* Nav — brand stays row 1, hamburger toggles links row 2 */ .qpn-nav__wrap { padding: var(--qpn-sp-3) var(--qpn-sp-4); flex-wrap: wrap; row-gap: 12px; } .qpn-nav__hamburger { display: flex; } .qpn-nav__links { display: none; width: 100%; order: 3; flex-direction: column; gap: 10px; padding-top: var(--qpn-sp-3); border-top: 1px solid var(--qpn-accent-soft); } .qpn-nav__links a { padding: 6px 0; font-size: 14px; } .qpn-nav__toggle:checked ~ .qpn-nav__links { display: flex; } /* Banner */ .qpn-banner { padding: var(--qpn-sp-3) var(--qpn-sp-4); } /* Footer */ .qpn-footer__cols { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--qpn-sp-4) 32px; } .qpn-eco { padding: var(--qpn-sp-6) var(--qpn-sp-4) 40px; } .qpn-eco__grid { grid-template-columns: repeat(2, 1fr); } .qpn-footer__copy { padding: 16px var(--qpn-sp-4); flex-direction: column; align-items: flex-start; text-align: left; } } @media (max-width: 480px) { .qpn-eco__grid { grid-template-columns: 1fr; } } /* ── 8. Print ──────────────────────────────────────────────────────────── */ @media print { .qpn-nav, .qpn-footer, .qpn-eco { display: none; } /* Banner kept on print — it's load-bearing for enforceability */ .qpn-banner { border-bottom: 2px solid #000; } }