/* ============================================================= FQB Brand & Design System v1.0 ------------------------------------------------------------- THE single definition of the brand for every surface served from this origin — the React app AND the standalone static pages in public/ (privacy, delete-account, faq). Source of truth: "FQB Brand System.dc.html". Governance (BRAND_DECISIONS.md): where this file and the brand system disagree, the brand system wins and this file changes. Loaded by: - apps/web/src/index.css (@import, bundled) - public/privacy/index.html () - public/delete-account/index.html Do not hand-copy values out of this file into a page. Link it. ============================================================= */ /* ------------------------------------------------------------- Typefaces — self-hosted, no runtime fetch. The product is used in dead zones; fonts must be local. Archivo 700/800/900 · Plex Sans 400/500/600 · Plex Mono 500/600 ------------------------------------------------------------- */ @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap; src:url('/fonts/archivo-latin-700-normal.woff2') format('woff2');} @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap; src:url('/fonts/archivo-latin-800-normal.woff2') format('woff2');} @font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap; src:url('/fonts/archivo-latin-900-normal.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');} :root { /* ---------- Color: brand scales ---------- */ /* Navy — brand system §04 NAVY SCALE, verbatim. 400 and 600 are interpolated: the brand scale has no such step, but the app references --navy-600 in 31 places. */ --navy-50: #F0F3FA; --navy-100: #DDE3F0; --navy-200: #B9C4DB; --navy-300: #8698BE; --navy-400: #6076A7; /* interpolated — not a brand step */ --navy-500: #3A5490; --navy-600: #2E4680; /* interpolated — not a brand step */ --navy-700: #24396E; --navy-800: #1B2C57; /* FQB Navy · PMS 2767C */ --navy-900: #0E1A34; /* Ink Navy */ /* Red — brand system §04 RED SCALE. NOTE: 500 is the HOVER step and is BRIGHTER than the 600 base. */ --red-50: #FBEEEF; --red-100: #F1CBCD; --red-300: #D9565E; --red-500: #C8232C; /* hover */ --red-600: #A81C24; /* FQB Red · PMS 187C · base */ --red-700: #8F1620; /* interpolated — pressed */ --red-800: #7C1219; /* Neutral — brand system §04. 300/600/700/800 interpolated. */ --gray-0: #FFFFFF; /* Vinyl White */ --gray-50: #F6F7F9; /* canvas */ --gray-100: #EEF0F4; --gray-200: #DDE1E8; /* line */ --gray-300: #C5CBD6; --gray-400: #8B95A7; /* muted — DISABLED/EXPIRED ONLY */ --gray-500: #5C6880; /* body — lightest text allowed on white */ --gray-600: #47526A; --gray-700: #333B4B; --gray-800: #1F2634; --gray-900: #121722; /* ink */ /* Functional — brand system §04 */ --green-50: #E7F2EC; --green-500: #1E8659; --green-600: #17714C; /* Approved */ --green-700: #115B3D; --amber-50: #FBF3E3; --amber-500: #D08300; --amber-700: #B26A00; /* Attention */ /* Material palette — fixed per fence type across the whole product: line items, material lists, charts, filters, PDF legend. */ --material-wood: #A8672C; --material-vinyl: #EEF0F4; --material-aluminum: #8D9CB0; --material-chainlink: #6B7787; --material-iron: #2E3440; --material-composite: #6B7B5A; /* ---------- Color: semantic aliases (use these) ---------- */ --bg-app: var(--gray-50); --bg-subtle: var(--gray-100); --surface-1: var(--gray-0); --surface-2: var(--gray-50); --surface-inverse: var(--navy-900); --text-strong: var(--navy-900); --text-default: var(--gray-900); --text-muted: var(--gray-500); --text-subtle: var(--gray-500); /* sunlight rule: #8B95A7 is banned for anything a user must read */ --text-disabled: var(--gray-400); /* the only sanctioned use of muted */ --text-on-dark: var(--gray-0); --border-subtle: var(--gray-100); --border-default:var(--gray-200); --border-strong: var(--navy-200); --focus-ring: rgba(36, 57, 110, 0.28); --focus-ring-red:rgba(168, 28, 36, 0.24); --brand-primary: var(--navy-800); --brand-primary-hover:var(--navy-700); --brand-accent: var(--red-600); /* ONE per screen */ --brand-accent-hover: var(--red-500); --brand-accent-active:var(--red-700); --success: var(--green-600); --warning: var(--amber-700); --danger: var(--red-500); /* brighter than FQB Red so an error never reads as a button */ --info: var(--navy-700); /* ---------- Spacing — 4px base ---------- */ --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; /* ---------- Radius — brand system §06: 0 / 3 / 4 / full only ---------- "Nothing pill-shaped but avatars." The old 7-step scale collapses onto three values; names kept so components need no same-commit edit. */ --radius-flat: 0; /* tables, tags, status chips */ --radius-xs: 3px; /* controls */ --radius-sm: 3px; --radius-md: 4px; /* cards, panels, modals */ --radius-lg: 4px; --radius-xl: 4px; --radius-2xl: 4px; --radius-pill: 999px; /* AVATARS ONLY */ /* ---------- Elevation — navy-tinted, never neutral black ---------- */ --shadow-xs: 0 1px 2px rgba(14,26,52,.05); --shadow-sm: 0 1px 2px rgba(14,26,52,.05), 0 1px 3px rgba(14,26,52,.07); --shadow-md: 0 2px 4px rgba(14,26,52,.05), 0 4px 12px rgba(14,26,52,.10); --shadow-lg: 0 4px 8px rgba(14,26,52,.08), 0 12px 32px rgba(14,26,52,.14); --shadow-xl: 0 8px 16px rgba(14,26,52,.10), 0 24px 48px rgba(14,26,52,.18); --shadow-focus: 0 0 0 3px var(--focus-ring); --shadow-focus-red: 0 0 0 3px var(--focus-ring-red); /* ---------- Typography ---------- */ --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.65625rem; /* 10.5 — mono micro-label */ --text-sm: 0.75rem; /* 12 */ --text-base: 0.875rem; /* 14 — UI */ --text-md: 0.9375rem; /* 15 — data (mono) */ --text-lg: 1rem; /* 16 — body */ --text-xl: 1.0625rem; /* 17 — H3 */ --text-2xl: 1.25rem; /* 20 */ --text-3xl: 1.5rem; /* 24 — H2 */ --text-4xl: 2.375rem; /* 38 — H1 */ --text-5xl: 4.75rem; /* 76 — Display */ --leading-tight:1.1; --leading-snug:1.35; --leading-normal:1.4; --leading-relaxed:1.65; --leading-display:0.95; --tracking-display:-0.035em; --tracking-tight:-0.025em; --tracking-normal:-0.02em; --tracking-flat:0; --tracking-wide:0.14em; --tracking-strapline:0.3em; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800; --weight-black:900; /* ---------- Motion — money never animates ---------- */ --ease-out: cubic-bezier(0.16,1,0.3,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1); --duration-fast:120ms; --duration-medium:220ms; --duration-slow:320ms; /* ---------- Layout ---------- */ --content-max: 1400px; --header-height: 112px; --touch-min: 48px; --field-height-mobile: 52px; } /* ------------------------------------------------------------- Shared primitives — safe for both the app and static pages. ------------------------------------------------------------- */ /* Every number in the product is mono so columns align. */ .num-tabular, .money, .measurement { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* The tracked all-caps micro-label used throughout. */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } /* THE DIMENSION LINE — signature motif. A thin rule with end ticks that annotates a length, a price, a section. One weight, one color, never decorative. */ .dimension-line { position: relative; height: 1px; background: var(--border-default); } .dimension-line::before, .dimension-line::after { content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--border-default); } .dimension-line::before { left: 0; } .dimension-line::after { right: 0; }