/* ================================================================= OLP Leadership Middleware — design tokens ----------------------------------------------------------------- Self-contained. Drop-in via . Used directly with Tailwind arbitrary values (e.g. text-[var(--olp-red)]). ================================================================= */ @font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Galano Grotesque'; src: url('fonts/GalanoGrotesque-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Galano Grotesque Alt'; src: url('fonts/GalanoGrotesqueAlt-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* Brand */ --olp-red: #E81E25; /* Cardinal — primary action */ --olp-red-hover: #C4191F; /* Cardinal darker for hover */ --olp-sumac: #641432; /* Secondary red */ --olp-maple: #6A0C0D; /* Deep oxblood — pressed states */ /* Brand accents — for charts & sim only, never UI chrome */ --olp-lupine: #A5A0E1; --olp-tobermory: #5FD7DC; --olp-berry: #FF87E1; --olp-fern: #CDE62D; /* Neutrals */ --olp-ink: #0E0E10; --olp-charcoal: #2A2A2D; --olp-slate: #5B5B60; --olp-mist: #B8B8BC; --olp-line: #DEDEE0; --olp-line-soft: #ECECEE; --olp-paper: #F7F7F5; --olp-steel: #EBEBEC; --olp-white: #FFFFFF; /* Semantic — light surfaces */ --bg-page: var(--olp-paper); --bg-surface: var(--olp-white); --bg-sunken: #F1F1EF; --fg-primary: var(--olp-ink); --fg-secondary: var(--olp-charcoal); --fg-tertiary: var(--olp-slate); --fg-muted: var(--olp-mist); --border: var(--olp-line); --border-soft: var(--olp-line-soft); --border-strong: var(--olp-ink); /* Traffic-light status — operational tone, never the brand accents */ --status-grey: #5B5B60; /* Registered / inactive */ --status-grey-bg: #ECECEE; --status-blue: #1F4E8C; /* Verified */ --status-blue-bg: #E5EEFA; --status-amber: #8A5A00; /* Credentialed / pending action */ --status-amber-bg:#FCEFD0; --status-green: #1F6B3A; /* Voted / approved */ --status-green-bg:#E1F2E6; --status-purple: #4B2E83; /* Published */ --status-purple-bg:#EDE6F7; --status-red: #B91C1C; /* Ineligible / locked / conflict */ --status-red-bg: #FDECEC; /* Type */ --font-display: 'Galano Grotesque Alt', 'Galano Grotesque', system-ui, sans-serif; --font-sans: 'Galano Grotesque', 'Helvetica Neue', system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Radii — OLP is sharp */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px; /* Shadow — quiet */ --shadow-1: 0 1px 0 rgba(14,14,16,0.04), 0 1px 2px rgba(14,14,16,0.05); --shadow-2: 0 4px 12px rgba(14,14,16,0.08); /* Motion */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; } /* Dark palette. Driven by the resolved theme on , which base.html sets before paint from the user's saved preference (localStorage 'dragonfly-theme'), falling back to the per-page default (the /cro/* "war-room" surface defaults to dark, everything else light). This is what lets a user pin dark or light across every page as they navigate, instead of the theme flipping per URL path. */ html[data-theme="dark"] { --bg-page: #0B0B0D; --bg-surface: #131317; --bg-sunken: #0B0B0D; --fg-primary: #F2F2F0; --fg-secondary: #C8C8C4; --fg-tertiary: #8A8A86; --fg-muted: #5B5B60; --border: #26262B; --border-soft: #1E1E22; --border-strong: #F2F2F0; --status-grey-bg: #1E1E22; --status-blue-bg: #0F1F33; --status-amber-bg:#33260F; --status-green-bg:#0F2A18; --status-purple-bg:#1F1430; --status-red-bg: #2E0F0F; --status-grey: #C8C8C4; --status-blue: #6FA8E8; --status-amber: #E8B95A; --status-green: #6BC487; --status-purple: #B89BE3; --status-red: #F26B6B; } /* Base */ html, body { font-family: var(--font-sans); background: var(--bg-page); color: var(--fg-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } /* Display headings — the all-caps treatment, used for section eyebrows + wordmark only */ .olp-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-tertiary); } .olp-headline { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; } .olp-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } /* Anchor reset — links inherit colour, no underline by default. Reintroduce underline only on hover or where explicitly opted-in via .olp-link */ a { color: inherit; text-decoration: none; border-bottom: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a.olp-link, .olp-link a { color: var(--olp-red); } /* Focus — always visible, 3px Cardinal */ *:focus-visible { outline: 3px solid var(--olp-red); outline-offset: 2px; border-radius: 1px; } /* Selection */ ::selection { background: var(--olp-red); color: #fff; } /* Hairline divider used as a visual rhythm device */ .olp-hairline { border-top: 1px solid var(--border); } .olp-rule-strong { border-top: 2px solid var(--border-strong); } /* Tabular number defaults for any data table */ table.olp-table { width: 100%; border-collapse: collapse; font-size: 13px; } table.olp-table th { text-align: left; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-tertiary); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--bg-sunken); } table.olp-table td { padding: 12px; border-bottom: 1px solid var(--border-soft); color: var(--fg-secondary); vertical-align: top; } table.olp-table tbody tr:hover td { background: var(--bg-sunken); } /* Status pill — traffic light only */ .olp-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--r-pill); white-space: nowrap; } .olp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .olp-pill.is-grey { color: var(--status-grey); background: var(--status-grey-bg); } .olp-pill.is-blue { color: var(--status-blue); background: var(--status-blue-bg); } .olp-pill.is-amber { color: var(--status-amber); background: var(--status-amber-bg); } .olp-pill.is-green { color: var(--status-green); background: var(--status-green-bg); } .olp-pill.is-purple { color: var(--status-purple); background: var(--status-purple-bg); } .olp-pill.is-red { color: var(--status-red); background: var(--status-red-bg); } /* Buttons */ .olp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; border-radius: var(--r-1); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .olp-btn:disabled { opacity: 0.4; pointer-events: none; } .olp-btn-primary { background: var(--olp-red); color: #fff; } .olp-btn-primary:hover { background: var(--olp-red-hover); } .olp-btn-primary:active { background: var(--olp-maple); } .olp-btn-secondary { background: var(--bg-surface); color: var(--fg-primary); border-color: var(--border); } .olp-btn-secondary:hover { border-color: var(--fg-primary); } .olp-btn-ghost { background: transparent; color: var(--fg-secondary); } .olp-btn-ghost:hover { background: var(--bg-sunken); color: var(--fg-primary); } .olp-btn-danger { background: var(--bg-surface); color: var(--status-red); border-color: var(--border); } .olp-btn-danger:hover { background: var(--status-red-bg); border-color: var(--status-red); } .olp-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; } /* Inputs */ .olp-input, .olp-select, .olp-textarea { font-family: var(--font-sans); font-size: 13px; color: var(--fg-primary); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-1); padding: 8px 10px; width: 100%; transition: border-color var(--dur-fast) var(--ease-out); } .olp-input:hover, .olp-select:hover, .olp-textarea:hover { border-color: var(--fg-tertiary); } .olp-input:focus, .olp-select:focus, .olp-textarea:focus { outline: none; border-color: var(--olp-red); box-shadow: 0 0 0 3px rgba(232,30,37,0.16); } .olp-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-tertiary); margin-bottom: 6px; } /* Card */ .olp-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-1); } /* Hero metric figure */ .olp-figure { font-family: var(--font-display); font-feature-settings: "tnum" 1; font-weight: 600; letter-spacing: -0.03em; line-height: 0.95; color: var(--fg-primary); }