/* ═══════════════════════════════════════════════════════ Flourished theme — palette carried over from the Strategence Capitals prototype, everything else rebuilt. ═══════════════════════════════════════════════════════ */ :root { /* ── the one org-settable colour ── An organization overrides --fl-primary (and its --fl-accent partner) inline on . Everything tinted below derives from those two with color-mix, so a single pair of values repaints surfaces, borders, focus rings and buttons across the whole app. */ --fl-primary: #20679a; --fl-accent: #8dd5f0; --fl-primary-hover: color-mix(in srgb, var(--fl-primary) 85%, #ffffff); /* Brand */ --fl-blue-deep: var(--fl-primary); --fl-blue-sky: var(--fl-accent); --fl-teal: #0ab387; /* Teal and gold as *text*. On the dark ground they are the brand colours as-is; on the light ground the same values land near 2.5:1, so the light block darkens these and leaves the fills alone. */ --fl-teal-text: var(--fl-teal); --fl-gold-text: var(--fl-gold); --fl-yellow: #efed86; --fl-gold: #c8a84b; --fl-gold-soft: color-mix(in srgb, var(--fl-gold) 12%, transparent); --fl-purple: #a898d8; --fl-purple-deep: #7b6fcc; --fl-gray-dark: #4d5053; /* Surfaces */ --fl-bg: #0e1e2b; --fl-bg-raised: #132738; --fl-surface: color-mix(in srgb, var(--fl-accent) 5.5%, transparent); --fl-surface-strong: color-mix(in srgb, var(--fl-accent) 10%, transparent); --fl-border: color-mix(in srgb, var(--fl-accent) 16%, transparent); --fl-border-strong: color-mix(in srgb, var(--fl-accent) 32%, transparent); --fl-nav-bg: color-mix(in srgb, var(--fl-bg) 90%, transparent); /* Recessed ground for inputs and wells — deeper than --fl-bg in dark, lighter in light. */ --fl-ink: #080e18; /* Text */ --fl-text: #e8f4fb; --fl-text-soft: #c5dced; --fl-text-muted: #9fbdd2; /* Maximum-contrast text: headings, values, chip labels. The single most theme-dependent token in the file — it is white on the dark ground and near-black on the light one. */ --fl-text-strong: #ffffff; /* Text on a saturated fill. Neither flips with the theme: the fill is the same colour in both, so the text on it has to be too. --fl-on-primary rides the brand colour (buttons), --fl-on-accent rides the bright teal and gold chips. */ --fl-on-primary: #ffffff; --fl-on-accent: #06121b; --fl-radius: 10px; --fl-radius-sm: 6px; --fl-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --fl-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.38); --fl-serif: 'Centuma', Georgia, 'Times New Roman', serif; --fl-sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; color-scheme: dark; /* Bootstrap overrides — admin tables/forms inherit the palette for free. */ --bs-body-bg: var(--fl-bg); --bs-body-color: var(--fl-text); --bs-body-font-family: var(--fl-sans); --bs-border-color: var(--fl-border); --bs-primary: var(--fl-primary); /* ponytail: Bootstrap wants channels, and CSS cannot decompose a var into r,g,b. A handful of Bootstrap utilities (.text-bg-primary and friends) therefore keep the default brand blue even for a rebranded org. Swap for relative colour syntax once Safari ships it broadly. */ --bs-primary-rgb: 32, 103, 154; --bs-secondary-color: var(--fl-text-muted); --bs-link-color: var(--fl-accent); --bs-link-hover-color: color-mix(in srgb, var(--fl-accent) 75%, #ffffff); --bs-emphasis-color: var(--fl-text-strong); --bs-border-radius: var(--fl-radius-sm); } /* ── light theme ── Tokens only. Every .fl-* class reads from the vars above, so nothing else changes. Set by App.razor from the organization's Theme column. */ :root[data-theme="light"] { --fl-accent: var(--fl-primary); --fl-primary-hover: color-mix(in srgb, var(--fl-primary) 85%, #000000); --fl-bg: #f7fafc; --fl-bg-raised: #ffffff; --fl-surface: color-mix(in srgb, var(--fl-primary) 4%, transparent); --fl-surface-strong: color-mix(in srgb, var(--fl-primary) 9%, transparent); --fl-border: color-mix(in srgb, var(--fl-primary) 18%, transparent); --fl-border-strong: color-mix(in srgb, var(--fl-primary) 38%, transparent); --fl-nav-bg: color-mix(in srgb, var(--fl-bg-raised) 92%, transparent); --fl-ink: #dfe8ef; --fl-text: #14232e; --fl-text-soft: #37505f; --fl-text-muted: #4f6a7b; --fl-text-strong: #071620; --fl-teal-text: color-mix(in srgb, var(--fl-teal) 58%, #000000); --fl-gold-text: color-mix(in srgb, var(--fl-gold) 55%, #000000); --fl-purple: #5f52a0; --fl-shadow: 0 10px 30px rgba(16, 38, 54, 0.12); --fl-shadow-sm: 0 4px 12px rgba(16, 38, 54, 0.10); color-scheme: light; --bs-link-hover-color: color-mix(in srgb, var(--fl-accent) 75%, #000000); } html { background: var(--fl-bg); } body { background: var(--fl-bg); color: var(--fl-text); font-family: var(--fl-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; } @font-face { font-family: 'Centuma'; src: local('Centuma'), local('Centuma-Regular'); font-display: swap; } .fl-heading, .fl-hero-title, .fl-question-text { font-family: var(--fl-serif); letter-spacing: 0.01em; } .fl-eyebrow { font-family: var(--fl-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fl-text-muted); margin: 0 0 0.5rem; } .fl-caption { font-size: 0.85rem; color: var(--fl-text-muted); } /* ── shell ─────────────────────────────────────────── */ .fl-shell { min-height: 100dvh; display: flex; flex-direction: column; } .fl-main { flex: 1; width: min(1080px, 100% - 2.5rem); margin: 0 auto; padding: 2.5rem 0 4rem; } .fl-footer { border-top: 1px solid var(--fl-border); padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--fl-text-muted); } /* ── nav ───────────────────────────────────────────── */ .fl-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem clamp(1rem, 4vw, 2rem); background: var(--fl-nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fl-border); } .fl-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--fl-text); font-family: var(--fl-serif); font-size: 1.15rem; } .fl-brand-mark { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--fl-radius-sm); background: linear-gradient(135deg, var(--fl-blue-deep), color-mix(in srgb, var(--fl-primary) 55%, transparent)); border: 1px solid var(--fl-border-strong); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fl-accent) 15%, transparent); color: var(--fl-blue-sky); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; } .fl-brand-mark svg { width: 68%; height: 68%; display: block; } .fl-nav-burger { display: none; } .fl-nav-links { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-wrap: wrap; } .fl-nav-links a, .fl-nav-signout { padding: 0.4rem 0.75rem; border-radius: var(--fl-radius-sm); color: var(--fl-text-soft); text-decoration: none; font-size: 0.92rem; background: none; border: none; cursor: pointer; } .fl-nav-links a:hover, .fl-nav-signout:hover { background: var(--fl-surface); color: var(--fl-text); } .fl-nav-links a.active { color: var(--fl-blue-sky); background: var(--fl-surface-strong); } .fl-nav-admin { border: 1px solid var(--fl-border-strong); } .fl-nav-account { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--fl-border); } .fl-nav-user { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 800px) { .fl-nav-burger { display: block; margin-left: auto; font-size: 1.4rem; cursor: pointer; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--fl-radius-sm); background: transparent; color: var(--fl-text); line-height: 1; } .fl-nav-burger:hover, .fl-nav-burger:focus-visible { border-color: var(--fl-border-strong); background: var(--fl-surface); } .fl-nav-links { display: none; width: 100%; margin-left: 0; flex-direction: column; align-items: stretch; } .fl-nav-links.open { display: flex; } .fl-nav-account { margin: 0.5rem 0 0; padding: 0.5rem 0 0; border-left: none; border-top: 1px solid var(--fl-border); justify-content: space-between; } .fl-nav { flex-wrap: wrap; } } /* ── generic blocks ────────────────────────────────── */ .fl-page-head { margin-bottom: 2rem; } .fl-page-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); } .fl-page-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .fl-loading, .fl-empty { padding: 3rem 1.5rem; text-align: center; color: var(--fl-text-muted); } /* Static SSR boot shell (App.razor #app-shell) while WASM downloads. Fixed overlay so Blazor can paint underneath; first interactive frame removes it — no blank gap between shell and app. */ #app-shell { position: fixed; inset: 0; z-index: 9999; background: var(--fl-bg); } .fl-boot { display: grid; place-items: center; gap: 1.25rem; min-height: 40vh; padding: 3rem 1.5rem; text-align: center; color: var(--fl-text-muted); } .fl-boot-label { margin: 0; font-size: 0.95rem; letter-spacing: 0.04em; } .fl-boot-spinner { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--fl-border); border-top-color: var(--fl-blue-sky); animation: fl-spin 0.8s linear infinite; } @keyframes fl-spin { to { transform: rotate(360deg); } } .fl-empty h1, .fl-empty h2 { font-family: var(--fl-serif); color: var(--fl-text); margin-bottom: 0.75rem; } .fl-empty p { margin-bottom: 1.5rem; } .fl-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem; margin-bottom: 2rem; border: 1px solid color-mix(in srgb, var(--fl-teal) 35%, transparent); border-radius: var(--fl-radius-sm); background: color-mix(in srgb, var(--fl-teal) 8%, transparent); } /* ── buttons ───────────────────────────────────────── */ .btn.fl-btn-primary { background: var(--fl-blue-deep); border: 1px solid var(--fl-border-strong); color: var(--fl-on-primary); border-radius: var(--fl-radius-sm); } .btn.fl-btn-primary:hover:not(:disabled) { background: var(--fl-primary-hover); color: var(--fl-on-primary); } .btn.fl-btn-ghost { background: transparent; border: 1px solid var(--fl-border); color: var(--fl-text-soft); border-radius: var(--fl-radius-sm); } .btn.fl-btn-ghost:hover:not(:disabled) { background: var(--fl-surface); color: var(--fl-text); border-color: var(--fl-border-strong); } .btn:disabled { opacity: 0.45; } /* Bootstrap's --bs-btn-focus-box-shadow resolves transparent against this palette, which left keyboard focus invisible. Same outline idiom the rating buttons already use. */ .btn:focus-visible, .fl-brand:focus-visible, .fl-nav-links a:focus-visible, .fl-nav-signout:focus-visible, .fl-linkish:focus-visible { outline: 2px solid var(--fl-blue-sky); outline-offset: 2px; box-shadow: none; } /* Every other clickable surface is a bare