/* ============================================================ Corral Communications — three navy-rooted directions Toggle via [data-theme] on : signal | heritage | blueprint Default tokens live on :root (= Signal) ============================================================ */ /* ---- font imports (curated set, swapped per theme) ---- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ===================================================== DIRECTION 1 — SIGNAL (modern, premium, dark) near-black navy + electric azure, grotesk display ===================================================== */ :root, [data-theme="signal"] { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --display-weight: 600; --display-spacing: -0.025em; --display-transform: none; --brand-transform: none; --quote-weight: 500; --quote-style: normal; --bg: #ffffff; --bg-2: #f4f6fb; --ink: #0c1426; --ink-2: #586079; --line: #e4e8f0; --line-strong: #cfd6e4; --brand: #0c1830; --accent: #1f5fff; --accent-strong: #1146d6; --accent-ink: #ffffff; --accent-ink-2: #cfdcff; --accent-tint: #e8efff; --accent-on-dark: #6f9bff; --dark-bg: #060b18; --dark-ink: #f3f6fd; --dark-ink-2: #9aa6c4; --dark-line: #1b2540; --foot-bg: #060b18; --foot-ink: #f3f6fd; --foot-ink-2: #8c98b8; --foot-line: #1b2540; --radius: 14px; --radius-btn: 9px; --shadow: 0 18px 50px -16px rgba(8,18,40,.30); --btn-shadow: 0 10px 28px -10px rgba(31,95,255,.55); --btn-shadow-hover: 0 14px 34px -8px rgba(31,95,255,.6); } /* ===================================================== DIRECTION 2 — HERITAGE (established, warm, editorial) warm paper, deep navy, refined serif + brass accent ===================================================== */ [data-theme="heritage"] { --font-display: "Spectral", Georgia, serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --display-weight: 600; --display-spacing: -0.005em; --display-transform: none; --brand-transform: none; --quote-weight: 500; --quote-style: italic; --bg: #f7f4ec; --bg-2: #efe9db; --ink: #1a2740; --ink-2: #5c6273; --line: #ded6c5; --line-strong: #cabfa8; --brand: #1a2740; --accent: #9a6f2e; --accent-strong: #855e22; --accent-ink: #fbf7ee; --accent-ink-2: #ead9bb; --accent-tint: #efe6d2; --accent-on-dark: #cda35f; --dark-bg: #15233f; --dark-ink: #f3eee2; --dark-ink-2: #a7b0c4; --dark-line: #2a3856; --foot-bg: #15233f; --foot-ink: #f3eee2; --foot-ink-2: #9aa3b8; --foot-line: #2a3856; --radius: 6px; --radius-btn: 4px; --shadow: 0 20px 50px -18px rgba(26,39,64,.28); --btn-shadow: none; --btn-shadow-hover: 0 10px 26px -10px rgba(26,39,64,.4); } [data-theme="heritage"] .brand__sub { letter-spacing: 0.22em; } [data-theme="heritage"] .hero__title { line-height: 1.0; } /* ===================================================== DIRECTION 3 — BLUEPRINT (precise, engineered, technical) cool navy + cyan, grotesque caps + mono data, faint grid ===================================================== */ [data-theme="blueprint"] { --font-display: "Archivo", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --display-weight: 700; --display-spacing: -0.02em; --display-transform: none; --brand-transform: uppercase; --quote-weight: 600; --quote-style: normal; --bg: #f1f4f8; --bg-2: #e6ebf2; --ink: #16263f; --ink-2: #54627b; --line: #d2dae6; --line-strong: #b7c2d4; --brand: #183060; --accent: #1f5ed1; --accent-strong: #1a4fb0; --accent-ink: #ffffff; --accent-ink-2: #d2e0ff; --accent-tint: #e5eefc; --accent-on-dark: #60d8f0; --dark-bg: #0b1f3d; --dark-ink: #eaf2fb; --dark-ink-2: #93a6c2; --dark-line: #1d3a5e; --foot-bg: #0b1f3d; --foot-ink: #eaf2fb; --foot-ink-2: #8aa0bd; --foot-line: #1d3a5e; --radius: 3px; --radius-btn: 2px; --shadow: 0 16px 44px -16px rgba(15,33,56,.32); --btn-shadow: none; --btn-shadow-hover: 0 10px 26px -10px rgba(14,111,196,.5); } /* blueprint grid motif on dark sections + hero */ [data-theme="blueprint"] .sec--dark { background-image: linear-gradient(color-mix(in oklab, var(--accent-on-dark) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--accent-on-dark) 12%, transparent) 1px, transparent 1px); background-size: 44px 44px; background-color: var(--dark-bg); } [data-theme="blueprint"] .hero { background-image: linear-gradient(color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--brand) 6%, transparent) 1px, transparent 1px); background-size: 44px 44px; } /* keep small technical labels uppercase; let headings read clean (sentence case) */ [data-theme="blueprint"] .eyebrow { letter-spacing: 0.16em; } [data-theme="blueprint"] .display, [data-theme="blueprint"] .h2 { letter-spacing: -0.025em; } [data-theme="blueprint"] .brand__mark i { border-radius: 0; } /* hero subtle texture for signal + heritage */ [data-theme="signal"] .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 78% 8%, rgba(31,95,255,.08), transparent 70%); } [data-theme="heritage"] .hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }