/* theme.css — Ormond Ballet design tokens + shared component classes. Spec: /home/ormond_ballet_server/design/DESIGN_SPEC.md (§2 tokens, §4 components) Loaded from base.html AFTER the Tailwind Play CDN script. (During the Phase 1–3 migration the _nav.html partials self-injected this stylesheet so not-yet-migrated pages still got the brand nav; that injection was removed in Phase 3 now that every page loads the theme via base.html or self-loads it.) Component classes are prefixed "ob-" to avoid colliding with utility-like words already present in template markup. Layout stays Tailwind; these classes carry the brand look (color, radius, type) only. */ /* ── Webfonts (self-hosted, /static/fonts) ──────────────────────────────── */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/nunito-sans-vf-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/nunito-sans-vf-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-baskerville-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/libre-baskerville-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Design tokens ──────────────────────────────────────────────────────── */ :root { /* Brand (ESPA guidelines 2021) */ --color-brand: #631F1F; /* Burgundy — primary actions, links, selection, focus */ --color-brand-strong: #4F1919; /* primary hover / active */ --color-brand-soft: #8A3434; /* gradients, serif accents */ --color-brand-tint: #F4ECEA; /* brand-tinted chips, selected-row wash */ --color-accent: #FF7550; /* Tangerine — marketing CTAs, dots, highlights ONLY (white-on-tangerine fails contrast for normal text) */ --color-accent-strong: #FF8A6A; /* accent hover */ --color-blush: #EDE1DD; /* Blush White — warm surfaces, heroes, email parity */ --color-blush-soft: #F7F1EF; /* warm page background (portal / public) */ /* Neutral spine (Tailwind grays, kept as-is — see spec §2.2) */ --color-page: #F9FAFB; /* gray-50, admin page background */ --color-surface: #FFFFFF; --color-line: #E5E7EB; /* gray-200 borders */ --color-line-strong: #D1D5DB; /* gray-300 input borders */ --color-ink: #1F2937; /* gray-800 headings */ --color-ink-body: #4B5563; /* gray-600 body */ --color-ink-muted: #9CA3AF; /* gray-400 meta */ /* Type */ --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Libre Baskerville", Baskerville, Georgia, "Times New Roman", serif; } /* Brand typography everywhere the sheet is loaded */ body { font-family: var(--font-sans); } /* ── Components (spec §4) ───────────────────────────────────────────────── */ /* Buttons */ .ob-btn-primary { background: var(--color-brand); color: #fff; font-size: 0.875rem; border: none; border-radius: 0.375rem; padding: 0.5rem 1rem; cursor: pointer; transition: background-color .15s; } .ob-btn-primary:hover { background: var(--color-brand-strong); } .ob-btn-primary:disabled { opacity: .4; cursor: default; } .ob-btn-secondary { background: transparent; color: var(--color-ink-body); font-size: 0.875rem; border: 1px solid var(--color-line-strong); border-radius: 0.375rem; padding: 0.5rem 1rem; cursor: pointer; transition: background-color .15s; } .ob-btn-secondary:hover { background: var(--color-page); } /* Marketing CTA — portal/public, large sizes only (contrast rule, spec §2.1) */ .ob-btn-cta { background: var(--color-accent); color: #fff; font-size: 0.9375rem; font-weight: 600; border: none; border-radius: 0.375rem; padding: 0.75rem 1.5rem; cursor: pointer; transition: background-color .15s; } .ob-btn-cta:hover { background: var(--color-accent-strong); } /* Focus ring for the button family */ .ob-btn-primary:focus-visible, .ob-btn-secondary:focus-visible, .ob-btn-cta:focus-visible { outline: 2px solid var(--color-brand-soft); outline-offset: 2px; } /* Form controls — single focus treatment (border, not ring) */ .ob-input { font-family: inherit; font-size: 0.875rem; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: 0.375rem; padding: 0.5rem 0.75rem; } .ob-input:focus { outline: none; border-color: var(--color-brand-soft); } .ob-input::placeholder { color: var(--color-ink-muted); } /* Selection / accent color for native controls */ .ob-accent-brand { accent-color: var(--color-brand); } /* Chat bubbles (nav task/AI modals, schedule edit agent) */ .ob-bubble-user { background: var(--color-brand); color: #fff; } .ob-bubble-assistant { background: #F3F4F6; /* gray-100 */ color: var(--color-ink); } /* Brand-tinted badge (e.g. "Trial") */ .ob-badge-brand { background: var(--color-brand-tint); color: var(--color-brand-soft); } /* Brand text / heading motif helpers */ .ob-text-brand { color: var(--color-brand); } .ob-serif-accent { font-family: var(--font-serif); font-style: italic; } /* Nav wordmark image sizing (SVG viewBox 1200×200) */ .ob-nav-wordmark { height: 1.125rem; /* 18px tall ≈ 108px wide */ width: auto; display: block; } @media (min-width: 640px) { .ob-nav-wordmark { height: 1.375rem; } }