/* ============================================================ SIGNAL LAWYERS — FOUNDATION (v2.0) Merged from: signal-lawyers-design-system.css + colors_and_type.css Replaces both files. Pair with main.css for complete system. SECTIONS ───────────────────────────────────────────────────────────── 1. Font loading 2. Design tokens (:root) 2a. Color — brand, surfaces, text, borders 2b. Color — semantic aliases (--fg-*, --bg-*, --brand-*, --hairline-*) 2c. Color — status (risk badges, app use only) 2d. Typography — families, scale, weights, leading, tracking, line-length 2e. Spacing scale 2f. Radius 2g. Shadow 2h. Motion 2i. Layout — nav heights 2j. Button tokens 3. Element defaults ============================================================ */ /* ============================================================ 1. FONT LOADING ============================================================ */ /* Fraunces — local variable TTF Variable axes: weight 100–900, opsz (optical size), SOFT, WONK No italic used — Signal design rule: no italics anywhere. Emphasis is carried by coral colour on upright . */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('/assets/fonts/Geist-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/assets/fonts/GeistMono-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ 2. DESIGN TOKENS ============================================================ */ :root { /* ---------------------------------------------------------- 2a. COLOR — BRAND, SURFACES, TEXT, BORDERS Primary source of truth. main.css uses --color-* throughout. ---------------------------------------------------------- */ /* Brand — Signal Coral (CTAs, brand emphasis, CTA band) */ --color-primary: #D64933; /* Coral red — brand primary */ --color-primary-hover: #B73A28; /* Deeper coral — hover / active */ --color-primary-light: #FBE7E3; /* Soft coral tint — badge bg, button hover bg */ /* Brand — Signal Gold (eyebrows on dark, diff card checkmarks) */ --color-accent: #E2B148; /* Warm gold — eyebrows on dark only */ --color-accent-soft: rgba(226, 177, 72, 0.18); /* Diff check circle bg */ /* Surfaces */ --color-bg-white: #FFFFFF; --color-bg-surface: #F7F3EC; /* Warm cream — alternating sections */ --color-bg-dark: #1C2B36; /* Deep navy — hero, footer, nav */ --color-bg-dark-raised: #253744; /* Navy raised — diff card on dark */ --color-bg-cta-band: #D64933; /* Coral CTA band */ /* Text — light surfaces */ --color-text-dark: #1C2B36; /* Primary on light */ --color-text-secondary: #4A5A66; /* Secondary body on light */ --color-text-muted: #7A8893; /* Tertiary / meta on light */ /* Text — dark surfaces */ --color-text-light: #FFFFFF; /* Primary on dark */ --color-text-light-muted: rgba(255,255,255,0.68); /* Body on dark */ --color-text-light-dim: rgba(255,255,255,0.40); /* Muted on dark */ /* Text — brand shortcuts */ --color-text-primary-brand: var(--color-primary); --color-text-accent-brand: var(--color-accent); /* Borders */ --color-border-light: #E6E1D7; /* Warm hairline on cream/white */ --color-border-dark: rgba(255, 255, 255, 0.08); /* Separator on navy */ --color-border-input: #D4CEC2; /* Form input / secondary button */ /* ---------------------------------------------------------- 2b. COLOR — SEMANTIC ALIASES Shorthand names for use in element defaults below. All point to --color-* tokens — single value to change per colour. ---------------------------------------------------------- */ --fg-1: var(--color-text-dark); --fg-2: var(--color-text-secondary); --fg-3: var(--color-text-muted); --fg-inv-1: var(--color-text-light); --fg-inv-2: var(--color-text-light-muted); --fg-inv-3: var(--color-text-light-dim); --bg-canvas: var(--color-bg-white); --bg-warm: var(--color-bg-surface); --bg-dark: var(--color-bg-dark); --bg-raised: var(--color-bg-dark-raised); --brand-coral: var(--color-primary); --brand-coral-hover: var(--color-primary-hover); --brand-coral-tint: var(--color-primary-light); --brand-gold: var(--color-accent); --hairline: var(--color-border-light); --hairline-dark: var(--color-border-dark); /* ---------------------------------------------------------- 2c. COLOR — STATUS Risk badges in the AI Wizard / Risk Report modal. Sparingly used — app surface only, not marketing pages. ---------------------------------------------------------- */ --status-high-bg: #FBE7E3; --status-high-fg: #B73A28; --status-med-bg: #FDF3E0; --status-med-fg: #CC9D38; --status-low-bg: #F7F3EC; --status-low-fg: #7A8893; /* ---------------------------------------------------------- 2d. TYPOGRAPHY ---------------------------------------------------------- */ /* Families */ --font-display: 'Fraunces', 'Tiempos', Georgia, 'Times New Roman', serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace; /* Font usage guide: --font-display h1–h4, hero headline, proof quotes, footer tagline --font-body all body copy, buttons, nav, meta text --font-mono eyebrow labels, diagnostic tags, code/token references, divider text, in-app diff UI */ /* Type scale */ --text-hero: 72px; /* hero headline only — weight 900 */ --text-h1: 40px; /* page titles — weight 700 */ --text-h2: 32px; /* section headlines — weight 700 */ --text-h3: 24px; /* subsection heads — weight 700 */ --text-h4: 20px; /* card titles, modal titles — weight 700 */ --text-lead: 18px; /* hero promise, intro paragraphs */ --text-body: 16px; /* standard body copy */ --text-small: 14px; /* meta, attribution, footnotes */ --text-nav: 14px; /* nav links */ --text-eyebrow: 12px; /* eyebrow labels — mono, uppercase, tracked */ /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* hero headline only */ /* Line height */ --leading-tight: 1.1; /* headings */ --leading-snug: 1.3; /* h4, tight lists */ --leading-normal: 1.45; /* compact UI */ --leading-relaxed: 1.6; /* body copy */ /* Letter spacing */ --tracking-hero: -0.03em; /* 72px hero headline only */ --tracking-tight: -0.02em; /* h1 (52px) and h2 (40px) */ --tracking-normal: 0; --tracking-eyebrow: 0.12em; /* eyebrows — uppercase mono */ --tracking-button: 0.08em; /* buttons — uppercase */ /* Line-length caps — prevents headlines and body from reflow at 90ch */ --width-headline: 720px; --width-body: 640px; --width-cta: 580px; /* ---------------------------------------------------------- 2e. SPACING SCALE — 4px base --space-{n} where n is the multiplier step (not the px value). ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 56px; --space-16: 72px; --space-20: 96px; --section-padding-y: 96px; /* desktop section vertical padding */ --section-padding-y-sm: 56px; /* mobile section vertical padding */ /* ---------------------------------------------------------- 2f. RADIUS 8px buttons / 14px cards & modals / 20px large panels / 999px pills only. Rounded-full is reserved for status pills and numbered markers. ---------------------------------------------------------- */ --radius-sm: 4px; /* logo mark */ --radius-md: 8px; /* buttons, nav links, dropdown items */ --radius-lg: 14px; /* cards, modals, dropdown wrapper */ --radius-xl: 20px; /* wizard panel, modal shell, large panels */ --radius-full: 999px; /* pills — risk badges, step numbers */ /* ---------------------------------------------------------- 2g. SHADOW Reserved for lift on interaction, not decoration at rest. No inner shadows. No colored shadows. Always navy-tinted blacks. ---------------------------------------------------------- */ --shadow-card: 0 1px 2px rgba(28, 43, 54, 0.04); /* barely-there at rest */ --shadow-card-hover: 0 10px 32px rgba(28, 43, 54, 0.08); /* service card hover lift */ --shadow-modal: 0 32px 80px rgba(28, 43, 54, 0.30); /* risk report modal */ --shadow-dropdown: 0 16px 48px rgba(0, 0, 0, 0.32); /* nav mega-menu */ /* ---------------------------------------------------------- 2h. MOTION Three durations only. No bounces, no spring, no parallax. Scroll-triggered reveals are explicitly excluded — brand is calm. ---------------------------------------------------------- */ --transition-fast: 120ms ease; /* hovers: links, buttons, nav */ --transition-base: 200ms ease; /* card lift, focus states */ --transition-slow: 320ms ease; /* modals, larger state shifts */ /* ---------------------------------------------------------- 2i. LAYOUT — NAV HEIGHTS ---------------------------------------------------------- */ --nav-height: 68px; --nav-height-mobile: 60px; /* ---------------------------------------------------------- 2j. CONTAINER WIDTHS Single source of truth — change here, applies everywhere. ---------------------------------------------------------- */ --container-frame: 960px; /* DiffCard, wide full-bleed sections */ --container-content: 880px; /* Services, Proof, card grids */ --container-tool: 980px; /* Tool page split layout */ --container-chat: 500px; /* Chat widget max width */ --container-reading: 720px; /* Hero, Steps, Accordion, Problem */ --container-hero: 820px; /* Single-page hero inner width */ --container-cta: 640px; /* CTA band */ /* ---------------------------------------------------------- 2k. BUTTON TOKENS Buttons are UPPERCASE — the one element that shouts. Headlines stay sentence case. Eyebrows use separate eyebrow tracking. ---------------------------------------------------------- */ --btn-font-size: 13px; --btn-font-weight: var(--weight-semibold); --btn-letter-spacing: var(--tracking-button); --btn-text-transform: uppercase; --btn-padding-y: 14px; --btn-padding-x: 26px; --btn-radius: var(--radius-md); --btn-transition: var(--transition-fast); --btn-primary-bg: var(--color-primary); --btn-primary-bg-hover: var(--color-primary-hover); --btn-primary-text: #FFFFFF; } /* ============================================================ 3. ELEMENT DEFAULTS Base HTML element resets and defaults. All component-level styles live in main.css. ============================================================ */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-dark); background: var(--color-bg-white); line-height: var(--leading-relaxed); } /* Headings — Fraunces display, sentence case, no italic */ h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--color-text-dark); letter-spacing: var(--tracking-tight); /* -0.02em — overridden at hero by .sl-hero-headline */ line-height: var(--leading-tight); font-weight: var(--weight-bold); margin: 0; } h1 { font-size: var(--text-h1); } /* 52px / -0.02em — h1 element default */ h2 { font-size: var(--text-h2); } /* 40px / -0.02em */ h3 { font-size: var(--text-h3); } /* 30px / -0.02em */ h4 { font-size: var(--text-h4); line-height: var(--leading-snug); } /* 22px / 1.3 */ /* Hero headline (.sl-hero-headline in main.css) overrides h1 to: 72px / weight 900 / tracking -0.03em — applied via class, not element default. */ p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin: 0; } small, .meta { font-size: var(--text-small); color: var(--color-text-muted); font-weight: var(--weight-medium); } /* Eyebrows — JetBrains Mono, uppercase, tracked wide. Gold by default (on dark surfaces). Coral variant for light surfaces. Keep eyebrow text to 1–3 words max. */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-accent); /* gold — for dark backgrounds */ display: block; margin-bottom: var(--space-5); } .eyebrow--coral { color: var(--color-primary); } /* for light backgrounds */ /* Code and preformatted text — also JetBrains Mono */ code, pre { font-family: var(--font-mono); font-size: var(--text-small); } /* Links — coral, no underline, transitions on hover */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } /* Emphasis — UPRIGHT, coral colour. Signal uses zero italic anywhere. If you feel like reaching for italic, use weight or colour instead. */ em { font-style: normal; color: var(--color-primary); }