===================================================== */ /* ---------- Global tokens ---------- */ :root { /* sizes */ --image-size-fixed-sm: 280px; /* palette (bootstrap-ish) */ --blue: #007bff; --indigo: #6610f2; --purple: #6f42c1; --pink: #e83e8c; --red: #dc3545; --orange: #fd7e14; --yellow: #ffc107; --green: #28a745; --teal: #20c997; --cyan: #17a2b8; --white: #fff; --gray: #6c757d; --gray-dark: #343a40; /* brand themes */ --theme-primary: #f8d210; --theme-work: #f8d210; /* bright yellow */ --theme-news: #ff5148; --theme-business: #59b3e4; /* vivid cyan-blue */ --theme-legal: #ceced0; --theme-girlandbear: #ff00d8; --theme-girlandbear-dark: #d900b8; /* greys & base */ --theme-grey-light: #d8d8d8; --theme-grey-mid: #999999; --theme-grey-dark: #5a5a5a; --theme-black-light:#222222; --theme-black: #000000; --theme-white: #ffffff; /* page-scoped theme defaults (overridden by .theme-* classes) */ --theme: var(--theme-primary); --theme-bg: var(--theme-primary); --theme-text: var(--theme-black-light); --theme-ink: var(--theme-black-light); --theme-border: color-mix(in oklab, var(--theme) 80%, black); /* button defaults (can be overridden by theme scopes) */ --btn-bg: #000; /* black base */ --btn-ink: #fff; --btn-hover-bg: #fed530; /* Jonny yellow on hover */ --btn-hover-ink: #111; } /* Map to Bootstrap variables so components pick up brand */ :root { --bs-primary: var(--theme-primary); --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* ---------- Page-scoped themes ---------- */ /* Apply these to for whole-page theming, or to any block/section to theme that block only. */ .theme-work { --theme: var(--theme-work); --theme-bg: var(--theme-work); --theme-text: var(--theme-work); --theme-ink: #111111; /* legible ink on yellow */ --theme-border: #f8d210; } .theme-business { --theme: var(--theme-business); --theme-bg: var(--theme-business); --theme-text: var(--theme-business); --theme-ink: #001018; /* legible ink on blue */ --theme-border: #3a9bd0; } /* When a theme class is on body (or any block), paint its surface */ body.theme-work, body.theme-business, .theme-work, .theme-business { background-color: var(--theme-bg); color: var(--theme-ink); } /* Keep default backgrounds unless you explicitly opt-in to transparency */ .section-transparent { background: transparent !important; } /* ---------- Common helpers ---------- */ .bg-theme { background-color: var(--theme-bg) !important; color: var(--theme-ink) !important; } .text-theme { color: var(--theme) !important; } .border-theme { border-color: var(--theme-border, var(--theme)) !important; } .fill-theme { fill: var(--theme) !important; } .stroke-theme { stroke: var(--theme) !important; } /* Soft and strong tints based on active theme */ .section-theme-soft { background: color-mix(in oklab, var(--theme) 8%, white); color: var(--theme-ink); } .section-theme-strong { background: color-mix(in oklab, var(--theme) 18%, white); color: var(--theme-ink); } /* Surfaces for cards/panels on colored backgrounds */ .surface { background: #fff; color: #111; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08); } /* Badges that adapt to theme */ .badge-theme { background-color: color-mix(in oklab, var(--theme) 15%, white) !important; color: var(--theme-ink) !important; border: 1px solid color-mix(in oklab, var(--theme) 45%, white); } /* Footer helper */ .bg-theme-grey-light { background-color: var(--theme-grey-light) !important; color: var(--theme-black-light) !important; } /* Brand utility backgrounds used in content */ .jb-soft-pink { background: #fcf3f8; } /* Optional gradient */ .jb-hero-gradient { background: radial-gradient(90% 106.38% at 122.89% 49.97%, #9b51e0 0%, #5a00ad 25%, #360067 56%, #220041 100%); } /* ---------- Links & buttons ---------- */ a.link-theme { color: var(--theme) !important; } a.link-theme:hover { color: color-mix(in oklab, var(--theme) 85%, black) !important; } /* Brand primary button – theme-aware via CSS variables above */ .btn-primary { background-color: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: var(--btn-ink) !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--btn-hover-bg) !important; border-color: var(--btn-hover-bg) !important; color: var(--btn-hover-ink) !important; } /* If you ever need an explicitly themed button (independent of --btn-*), use .btn-theme */ .btn-theme { --_bg: var(--theme); --_ink: var(--theme-ink); --_bd: var(--theme-border, var(--theme)); background-color: var(--_bg) !important; color: var(--_ink) !important; border-color: var(--_bd) !important; } .btn-theme:hover { filter: brightness(0.95); } /* Work theme: make primary button rollover GREY (not yellow) */ .theme-work { --btn-hover-bg: var(--theme-grey-dark); /* try #5a5a5a or #6c757d */ --btn-hover-ink: #fff; /* keep text readable on grey */ } /* Tooltips that respect the active theme */ .tooltip-theme { background: color-mix(in oklab, var(--theme) 15%, white); color: var(--theme-ink); border: 1px solid color-mix(in oklab, var(--theme) 50%, white); } /* ---------- Typographic defaults ---------- */ body { font-family: 'Archivo', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; min-height: 100%; color: var(--theme-ink); /* inherit ink from theme */ } /* Make big hero headings readable on colored backgrounds if needed */ .hero, #1 { color: color-mix(in oklab, var(--theme-ink) 90%, black); } /* ---------- Optional navbar fade-in helpers (if used) ---------- */ #navbar { transition: opacity .5s; }