/* * ═══════════════════════════════════════════════════════════════════════════ * PSCA & CO. — DESIGN TOKEN SYSTEM v1.0 * (Formerly Parikh Shah Chotalia & Associates) * ─────────────────────────────────────────────────────────────────────────── * Three-layer architecture: * Primitive → raw values * Semantic → purpose aliases * Component → per-component overrides (in component stylesheets) * * Import this file as the FIRST stylesheet on every page. * Never use hardcoded values in component CSS — always reference var(--token). * ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── LAYER 1 — PRIMITIVE TOKENS Raw values. Do not use directly in components. ─────────────────────────────────────────────────────────────────────────── */ :root { /* — Navy Primitives — Warmer than cold steel navy. Slight indigo undertone gives depth. Think: a well-appointed partner's office, not a corporate boardroom. */ --primitive-navy-950: #0d1628; /* near-black, deepest shadow */ --primitive-navy-900: #152038; /* very deep, footer backgrounds */ --primitive-navy-800: #1c3058; /* BASE BRAND NAVY — primary colour */ --primitive-navy-700: #243a6b; /* mid-navy, hover on dark surfaces */ --primitive-navy-600: #2e4880; /* lighter navy, active states */ --primitive-navy-100: #dde4f0; /* very light navy tint */ --primitive-navy-50: #eef1f8; /* barely-there navy, section bg */ /* — Gold Primitives — 18-carat warmth. Rich and prestigious, not yellow, not garish. References: aged gold leaf on a heritage letterhead. */ --primitive-gold-900: #5c3d00; /* deepest gold, text on light bg */ --primitive-gold-700: #8a6200; /* deep accent gold */ --primitive-gold-500: #b8921e; /* BASE BRAND GOLD — primary accent */ --primitive-gold-400: #c9a832; /* hover gold */ --primitive-gold-100: #f0e4be; /* pale gold tint */ --primitive-gold-50: #faf4e4; /* barely-there gold wash */ /* — Neutral Primitives — Warm-toned throughout — no cool greys. Every neutral has a hint of cream. */ --primitive-white: #ffffff; --primitive-cream: #faf8f3; /* warm white, default page background */ --primitive-warm-50: #f5f1ea; /* warm light grey */ --primitive-warm-100: #ede8df; /* light warm grey, section dividers */ --primitive-warm-200: #d8d1c4; /* medium light grey, borders */ --primitive-warm-400: #a09890; /* medium grey, placeholder text */ --primitive-warm-600: #6b6460; /* muted text */ --primitive-warm-800: #38322e; /* secondary text */ --primitive-warm-950: #1a1814; /* primary text — warm near-black */ /* — State Primitives — */ --primitive-focus: #b8921e; /* gold — focus rings use brand accent */ --primitive-error: #c0392b; --primitive-success: #1e6b45; --primitive-warning: #b7750d; } /* ─────────────────────────────────────────────────────────────────────────── LAYER 2 — SEMANTIC TOKENS Purpose-driven aliases. Use these in all component CSS. ─────────────────────────────────────────────────────────────────────────── */ :root { /* ── Colour: Brand ── */ --color-navy: var(--primitive-navy-800); --color-navy-dark: var(--primitive-navy-900); --color-navy-deeper: var(--primitive-navy-950); --color-navy-mid: var(--primitive-navy-700); --color-navy-light: var(--primitive-navy-600); --color-navy-tint: var(--primitive-navy-50); --color-gold: var(--primitive-gold-500); --color-gold-deep: var(--primitive-gold-700); --color-gold-hover: var(--primitive-gold-400); --color-gold-pale: var(--primitive-gold-100); --color-gold-wash: var(--primitive-gold-50); /* ── Colour: Surface ── */ --color-surface-page: var(--primitive-cream); /* default page bg */ --color-surface-light: var(--primitive-white); /* card / modal bg */ --color-surface-warm: var(--primitive-warm-50); /* alternate section bg */ --color-surface-muted: var(--primitive-warm-100); /* subtle section bg */ --color-surface-dark: var(--primitive-navy-800); /* dark section bg */ --color-surface-darker: var(--primitive-navy-900); /* footer bg */ /* ── Colour: Text ── */ --color-text-primary: var(--primitive-warm-950); /* main body text */ --color-text-secondary: var(--primitive-warm-800); /* supporting text */ --color-text-muted: var(--primitive-warm-600); /* captions, metadata */ --color-text-disabled: var(--primitive-warm-400); --color-text-inverse: var(--primitive-white); /* text on dark bg */ --color-text-gold: var(--primitive-gold-700); /* gold text on light bg */ --color-text-navy: var(--primitive-navy-800); /* navy text on light bg */ /* ── Colour: Border ── */ --color-border-strong: var(--primitive-warm-800); --color-border-default: var(--primitive-warm-200); --color-border-subtle: var(--primitive-warm-100); --color-border-gold: var(--primitive-gold-500); --color-border-gold-subtle: var(--primitive-gold-100); /* ── Colour: Rule (decorative lines) ── */ --color-rule-gold: rgba(184, 146, 30, 0.3); /* gold hairline */ --color-rule-light: rgba(255, 255, 255, 0.15); /* on dark bg */ --color-rule-dark: rgba(26, 24, 20, 0.12); /* on light bg */ /* ── Colour: On-dark text opacity (contrast-verified against #152038) ── Ratio guide (background #152038 ≈ L 0.025): strong ~19:1 — inverse headings, important callouts body ~11:1 — readable body copy (WCAG AAA ✓) muted ~ 5:1 — metadata, labels (WCAG AA ✓) caption ~ 6:1 — captions, fine print(WCAG AA ✓) ghost ~ 3.9:1 — decorative only, do not use for readable text rule/floor — hairlines and barely-there separators (not text) */ --color-on-dark-strong: rgba(255, 255, 255, 0.92); --color-on-dark-body: rgba(255, 255, 255, 0.78); --color-on-dark-muted: rgba(255, 255, 255, 0.55); --color-on-dark-caption: rgba(255, 255, 255, 0.62); --color-on-dark-ghost: rgba(255, 255, 255, 0.45); --color-on-dark-rule: rgba(255, 255, 255, 0.10); --color-on-dark-floor: rgba(255, 255, 255, 0.07); /* ── Colour: Gold opacity scale (for rules, borders, tints) ── */ --color-gold-a45: rgba(184, 146, 30, 0.45); /* strong dividers, logo rules */ --color-gold-a25: rgba(184, 146, 30, 0.25); /* border highlights on hover */ --color-gold-a20: rgba(184, 146, 30, 0.20); /* section borders, dividers */ --color-gold-a15: rgba(184, 146, 30, 0.15); /* subtle borders (ticker) */ --color-gold-a12: rgba(184, 146, 30, 0.12); /* tag / chip backgrounds */ --color-gold-a02: rgba(184, 146, 30, 0.02); /* surface hover wash */ --color-gold-a40: rgba(184, 146, 30, 0.40); /* badge borders, focus-state borders */ --color-gold-a35: rgba(184, 146, 30, 0.35); /* card category & disclaimer borders */ --color-gold-a18: rgba(184, 146, 30, 0.18); /* decorative oversized numbers */ /* ── Colour: White alias (for pages using --color-white shorthand) ── */ --color-white: var(--primitive-white); /* ── Colour: State ── */ --color-focus: var(--primitive-focus); --color-error: var(--primitive-error); --color-success: var(--primitive-success); --color-warning: var(--primitive-warning); /* ── Typography: Families ── */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* ── Typography: Scale ── Rule: Serif (Cormorant) for display, H1, H2, H3 and all pull-quotes. Sans (DM Sans) for H4 downward, body, labels, captions, nav. ───────────────────────────────────────────────────────────────────── Token Size Weight Line-H Tracking Font ───────────────────────────────────────────────────────────────────── */ /* Display — hero headlines, large section openers */ --text-display-size: clamp(3rem, 6vw, 5rem); /* 48–80px fluid */ --text-display-weight: 300; --text-display-lh: 1.05; --text-display-ls: -0.025em; --text-display-font: var(--font-serif); /* H1 — page-level headings */ --text-h1-size: clamp(2.25rem, 4vw, 3.5rem); /* 36–56px fluid */ --text-h1-weight: 400; --text-h1-lh: 1.12; --text-h1-ls: -0.018em; --text-h1-font: var(--font-serif); /* H2 — section headings */ --text-h2-size: clamp(1.75rem, 3vw, 2.5rem); /* 28–40px fluid */ --text-h2-weight: 400; --text-h2-lh: 1.2; --text-h2-ls: -0.01em; --text-h2-font: var(--font-serif); /* H3 — sub-section headings */ --text-h3-size: clamp(1.375rem, 2vw, 1.875rem); /* 22–30px fluid */ --text-h3-weight: 600; --text-h3-lh: 1.25; --text-h3-ls: -0.005em; --text-h3-font: var(--font-serif); /* H4 — card titles, list headings */ --text-h4-size: 1.125rem; /* 18px */ --text-h4-weight: 500; --text-h4-lh: 1.35; --text-h4-ls: 0.005em; --text-h4-font: var(--font-sans); /* Body Large — introductory paragraphs, lead text */ --text-body-lg-size: 1.125rem; /* 18px */ --text-body-lg-weight: 400; --text-body-lg-lh: 1.75; --text-body-lg-ls: 0; --text-body-lg-font: var(--font-sans); /* Body — standard paragraph text */ --text-body-size: 1rem; /* 16px */ --text-body-weight: 400; --text-body-lh: 1.7; --text-body-ls: 0; --text-body-font: var(--font-sans); /* Body Small — secondary descriptions, footnotes */ --text-body-sm-size: 0.875rem; /* 14px */ --text-body-sm-weight: 400; --text-body-sm-lh: 1.6; --text-body-sm-ls: 0; --text-body-sm-font: var(--font-sans); /* Label — navigation, tags, badges, overlines (ALL CAPS) */ --text-label-size: 0.75rem; /* 12px */ --text-label-weight: 500; --text-label-lh: 1.4; --text-label-ls: 0.1em; --text-label-font: var(--font-sans); --text-label-transform: uppercase; /* Caption — timestamps, metadata, fine print */ --text-caption-size: 0.6875rem; /* 11px */ --text-caption-weight: 400; --text-caption-lh: 1.45; --text-caption-ls: 0.04em; --text-caption-font: var(--font-sans); /* ── Typography: backward-compat aliases ── Some pages reference --text-body / --text-body-sm / --text-caption without the -size suffix. These aliases make those references resolve correctly without requiring edits to every individual file. */ --text-caption: var(--text-caption-size); --text-body-sm: var(--text-body-sm-size); --text-body: var(--text-body-size); --text-body-lg: var(--text-body-lg-size); --text-h4: var(--text-h4-size); /* ── Spacing Scale (base unit: 4px) ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ /* Semantic spacing */ --space-section: var(--space-24); /* 96px — between major sections */ --space-section-sm: var(--space-16); /* 64px — compressed section gap */ --space-component: var(--space-12); /* 48px — between components */ --space-element: var(--space-6); /* 24px — between elements */ --space-item: var(--space-4); /* 16px — between tightly related items */ /* Layout */ --container-max: 1280px; --container-narrow: 800px; --container-wide: 1440px; --container-padding: var(--space-8); /* 32px side padding */ --container-padding-sm: var(--space-5); /* 20px on mobile */ /* ── Shadow & Elevation ── */ --shadow-sm: 0 1px 3px rgba(26, 24, 20, 0.08), 0 1px 2px rgba(26, 24, 20, 0.04); --shadow-md: 0 4px 8px rgba(26, 24, 20, 0.08), 0 2px 4px rgba(26, 24, 20, 0.05); --shadow-lg: 0 10px 20px rgba(26, 24, 20, 0.09), 0 4px 8px rgba(26, 24, 20, 0.05); --shadow-xl: 0 24px 40px rgba(26, 24, 20, 0.12), 0 8px 16px rgba(26, 24, 20, 0.06); /* Gold-tinted shadow — for highlighted cards, featured partner cards */ --shadow-gold: 0 4px 20px rgba(184, 146, 30, 0.18), 0 1px 4px rgba(184, 146, 30, 0.10); /* Navy-tinted shadow — for dark overlapping elements */ --shadow-navy: 0 8px 24px rgba(28, 48, 88, 0.22), 0 2px 8px rgba(28, 48, 88, 0.12); /* ── Border Radius ── */ --radius-none: 0; --radius-sm: 2px; /* subtle — for tags, badges */ --radius-md: 4px; /* standard — for cards, inputs */ --radius-lg: 8px; /* generous — for modals, panels */ --radius-xl: 16px; /* pronounced — for special elements */ --radius-full: 9999px; /* pill — for buttons, chips */ /* ── Transitions ── */ /* Strong ease-out: starts fast, gives instant feedback — correct for UI interactions */ --transition-fast: 150ms cubic-bezier(0.23, 1, 0.32, 1); --transition-base: 250ms cubic-bezier(0.23, 1, 0.32, 1); --transition-slow: 400ms cubic-bezier(0.23, 1, 0.32, 1); --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1); /* scroll reveals */ /* ── Z-Index Scale ── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ── Navigation (component-level) ── */ --nav-height: 68px; --nav-bg: rgba(28, 48, 88, 0.96); --nav-border: var(--color-rule-gold); --nav-text: rgba(255, 255, 255, 0.72); --nav-text-hover: var(--color-gold-hover); --nav-text-active: var(--color-gold); --nav-backdrop: blur(12px); /* ── Hero Carousel (component-level) ── */ --hero-min-height: calc(100vh - var(--nav-height) - var(--banner-height)); --hero-overlay: rgba(21, 32, 56, 0.55); /* navy overlay on photos */ --hero-text: var(--primitive-white); --hero-accent: var(--color-gold); /* ── Card (component-level) ── */ --card-bg: var(--color-surface-light); --card-border: var(--color-border-default); --card-radius: var(--radius-md); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); --card-padding: var(--space-8); /* ── Button (component-level) ── */ /* Primary button */ --btn-primary-bg: var(--color-gold); --btn-primary-bg-hover: var(--color-gold-hover); --btn-primary-text: var(--primitive-navy-900); --btn-primary-radius: var(--radius-sm); --btn-primary-padding: var(--space-3) var(--space-6); /* Secondary button (ghost on dark) */ --btn-ghost-border: rgba(255, 255, 255, 0.4); --btn-ghost-text: var(--primitive-white); --btn-ghost-border-hover: var(--color-gold); --btn-ghost-text-hover: var(--color-gold); /* Outline button (on light bg) */ --btn-outline-border: var(--color-navy); --btn-outline-text: var(--color-navy); --btn-outline-hover-bg: var(--color-navy); --btn-outline-hover-text: var(--primitive-white); /* ── Running Banner / Ticker (component-level) ── */ --banner-bg: var(--color-navy-dark); --banner-text: rgba(255, 255, 255, 0.85); --banner-separator: var(--color-gold); --banner-height: 44px; --banner-speed: 40s; /* scroll animation duration */ /* ── Section Overline (the small label above section headings) ── */ --overline-color: var(--color-gold); --overline-size: var(--text-label-size); --overline-weight: var(--text-label-weight); --overline-ls: var(--text-label-ls); --overline-transform: var(--text-label-transform); /* ── Gold Rule Divider ── */ --rule-gold-width: 48px; --rule-gold-height: 2px; --rule-gold-color: var(--color-gold); /* ── Form Inputs (component-level) ── */ --input-border: var(--color-border-default); --input-border-focus: var(--color-gold); --input-bg: var(--primitive-white); --input-text: var(--color-text-primary); --input-placeholder: var(--color-text-disabled); --input-radius: var(--radius-md); --input-padding: var(--space-3) var(--space-4); /* ── Disclaimer Popup (component-level) ── */ --popup-overlay: rgba(21, 32, 56, 0.82); --popup-bg: var(--primitive-white); --popup-border-top: 4px solid var(--color-gold); --popup-radius: var(--radius-lg); --popup-max-width: 540px; --popup-padding: var(--space-10); } /* ─────────────────────────────────────────────────────────────────────────── UTILITY HELPERS Reusable classes derived from tokens. Not a full utility framework — only the patterns that repeat across every page. ─────────────────────────────────────────────────────────────────────────── */ /* Container */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } @media (max-width: 768px) { .container { padding-inline: var(--container-padding-sm); } } /* Section spacing */ .section { padding-block: var(--space-section); } .section--sm { padding-block: var(--space-section-sm); } .section--dark { background: var(--color-surface-dark); color: var(--color-text-inverse); } .section--warm { background: var(--color-surface-warm); } .section--muted { background: var(--color-surface-muted); } /* Typography utilities */ .text-display { font-family: var(--text-display-font); font-size: var(--text-display-size); font-weight: var(--text-display-weight); line-height: var(--text-display-lh); letter-spacing: var(--text-display-ls); } .text-h1 { font-family: var(--text-h1-font); font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); line-height: var(--text-h1-lh); letter-spacing: var(--text-h1-ls); } .text-h2 { font-family: var(--text-h2-font); font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-lh); letter-spacing: var(--text-h2-ls); } .text-h3 { font-family: var(--text-h3-font); font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh); letter-spacing: var(--text-h3-ls); } .text-h4 { font-family: var(--text-h4-font); font-size: var(--text-h4-size); font-weight: var(--text-h4-weight); line-height: var(--text-h4-lh); letter-spacing: var(--text-h4-ls); } .text-body-lg { font-family: var(--text-body-lg-font); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-lh); } .text-body { font-family: var(--text-body-font); font-size: var(--text-body-size); line-height: var(--text-body-lh); } .text-label { font-family: var(--text-label-font); font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-ls); text-transform: var(--text-label-transform); } .text-caption { font-family: var(--text-caption-font); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); letter-spacing: var(--text-caption-ls); } /* Overline (small label above section heading) */ .overline { display: block; font-family: var(--text-label-font); font-size: var(--overline-size); font-weight: var(--overline-weight); letter-spacing: var(--overline-ls); text-transform: var(--overline-transform); color: var(--overline-color); margin-bottom: var(--space-3); } /* Gold rule — decorative horizontal line below headings */ .rule-gold { display: block; width: var(--rule-gold-width); height: var(--rule-gold-height); background: var(--rule-gold-color); margin-block: var(--space-4); } .rule-gold--center { margin-inline: auto; } /* Focus ring (accessibility) */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* Smooth scrolling */ html { scroll-behavior: smooth; } /* Base reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--color-surface-page); } ::-webkit-scrollbar-thumb { background: var(--color-gold); border-radius: var(--radius-full); }