/* ---------- 00 fonts ---------- Served from our own origin rather than fonts.googleapis.com: the privacy notice promises no third-party requests, and an embedded Google Fonts stylesheet sends every visitor IP to Google before anything renders. Geist is SIL OFL. Both families are variable, so one file per subset covers all the weights; the declarations mirror what Google served. */ @font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/geist-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:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-mono-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:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-mono-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:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geist-mono-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:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geist-mono-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} /* ============================================================================ 01 ยท TOKENS, THE WHITE-LABEL FILE ---------------------------------------------------------------------------- To rebrand this app for a new client, you only edit THIS file. Nothing else in assets/app/css/ contains a hard-coded colour, font or radius. Rebrand checklist: 1. --brand-* primary colour + the colour of text placed on it 2. --font-* two font families 3. --radius-* square (0-4px) vs soft (10-16px) changes the whole feel 4. --density-* row heights / paddings for compact vs comfortable UIs Everything below those four groups is derived and rarely needs touching. ========================================================================== */ :root { /* ---- 1. BRAND ------------------------------------------------------- */ --brand: #E8A33D; --brand-hover: #F5B85C; --brand-active: #D8912B; --brand-on: #0A0B0D; /* text/icons placed ON the brand colour */ --brand-soft: #3A2A12; /* brand-tinted surface (dark theme) */ --brand-ring: rgba(232, 163, 61, .38); /* ---- 2. TYPE -------------------------------------------------------- */ --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-2xs: .6875rem; --text-xs: .75rem; --text-sm: .8125rem; --text-md: .875rem; --text-lg: 1rem; --text-xl: 1.125rem; --text-2xl: 1.375rem; --text-3xl: 1.75rem; --text-4xl: 2.25rem; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --leading-tight: 1.2; --leading-normal: 1.5; /* ---- 3. SHAPE ------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; --border-width: 1px; /* ---- 4. DENSITY ----------------------------------------------------- */ --density-row: 44px; /* table row height */ --density-control: 38px; /* inputs and buttons */ --density-control-sm: 30px; --sidebar-w: 248px; --topbar-h: 60px; /* ---- SPACING (4pt scale) -------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- MOTION --------------------------------------------------------- */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; /* ---- ELEVATION ------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 6px 16px rgba(0,0,0,.34); --shadow-lg: 0 18px 40px rgba(0,0,0,.45); --z-sidebar: 40; --z-topbar: 30; --z-drawer: 60; --z-modal: 80; --z-toast: 90; } /* ============================================================================ THEMES The app defaults to dark. [data-theme="light"] on flips it. Semantic names only, never reference a raw hex outside this file. ========================================================================== */ :root, [data-theme="dark"] { color-scheme: dark; --bg-app: #0A0B0D; /* app background behind everything */ --bg-sidebar: #0F1113; --bg-surface: #14171A; /* cards, panels, topbar */ --bg-raised: #1A1E22; /* hover / nested surface */ --bg-sunken: #08090B; /* wells, code, table head */ --bg-overlay: rgba(0,0,0,.62); --border: #1E2226; --border-strong: #2C3237; --text: #F5F8F8; --text-muted: #C2CBCC; --text-subtle: #7F9195; --text-on-fill: #0A0B0D; --success: #35D28B; --success-bg: rgba(53,210,139,.12); --success-bd: rgba(53,210,139,.28); --warning: #E8B33D; --warning-bg: rgba(232,179,61,.12); --warning-bd: rgba(232,179,61,.28); --danger: #F2616B; --danger-bg: rgba(242,97,107,.12); --danger-bd: rgba(242,97,107,.28); --info: #5AA9F2; --info-bg: rgba(90,169,242,.12); --info-bd: rgba(90,169,242,.28); --neutral-bg: rgba(255,255,255,.06); --neutral-bd: rgba(255,255,255,.12); } [data-theme="light"] { color-scheme: light; --bg-app: #F4F6F7; --bg-sidebar: #FFFFFF; --bg-surface: #FFFFFF; --bg-raised: #F0F3F4; --bg-sunken: #F7F9F9; --bg-overlay: rgba(16,20,24,.44); --border: #E2E7E9; --border-strong: #CBD3D6; --text: #12161A; --text-muted: #4A555C; --text-subtle: #6E7C84; --text-on-fill: #0A0B0D; --brand-soft: #FDF3E2; --brand-active: #C9830F; --success: #12885A; --success-bg: #E6F6EF; --success-bd: #B7E4CF; --warning: #9A6B05; --warning-bg: #FCF3DF; --warning-bd: #EFD9A2; --danger: #C1323C; --danger-bg: #FCEBEC; --danger-bd: #F2C2C6; --info: #1B6FBE; --info-bg: #E8F2FC; --info-bd: #BCD9F5; --neutral-bg: rgba(16,22,26,.05); --neutral-bd: rgba(16,22,26,.12); --shadow-sm: 0 1px 2px rgba(16,24,32,.07); --shadow-md: 0 6px 16px rgba(16,24,32,.10); --shadow-lg: 0 18px 40px rgba(16,24,32,.14); } /* ============================================================================ PER-TEMPLATE BRANDS Each template sets to swap its accent. This is the white-label mechanism in miniature: one attribute, no other file touched. Add a client's palette here and their whole app re-skins. ========================================================================== */ [data-brand="success"] { --brand:#3FBF9F; --brand-hover:#5BD3B5; --brand-active:#2FA588; --brand-on:#04211B; --brand-soft:#0E2C26; --brand-ring:rgba(63,191,159,.38); } [data-brand="vendor"] { --brand:#5AA9F2; --brand-hover:#7CBEF7; --brand-active:#3B8FDC; --brand-on:#04182B; --brand-soft:#0E2233; --brand-ring:rgba(90,169,242,.38); } [data-brand="partner"] { --brand:#A78BFA; --brand-hover:#BEA6FF; --brand-active:#8B6BE8; --brand-on:#150A2E; --brand-soft:#1E1733; --brand-ring:rgba(167,139,250,.38); } [data-brand="community"] { --brand:#F2818A; --brand-hover:#F79AA2; --brand-active:#DB6670; --brand-on:#2B0A0E; --brand-soft:#301619; --brand-ring:rgba(242,129,138,.38); } [data-brand="care"] { --brand:#4FC3D9; --brand-hover:#71D4E7; --brand-active:#35A8BE; --brand-on:#04222A; --brand-soft:#0D2830; --brand-ring:rgba(79,195,217,.38); } [data-brand="fitness"] { --brand:#8BE04F; --brand-hover:#A3E974; --brand-active:#72C63A; --brand-on:#0D1F04; --brand-soft:#16240D; --brand-ring:rgba(139,224,79,.38); } [data-brand="site"] { --brand:#E0654F; --brand-hover:#EC8570; --brand-active:#C64F3B; --brand-on:#2B0B06; --brand-soft:#331612; --brand-ring:rgba(224,101,79,.38); } [data-brand="analytics"] { --brand:#E056A0; --brand-hover:#EC79B6; --brand-active:#C43F88; --brand-on:#2A0619; --brand-soft:#33101F; --brand-ring:rgba(224,86,160,.38); } [data-brand="event"] { --brand:#AECB3F; --brand-hover:#C2DB5E; --brand-active:#95B22C; --brand-on:#141A04; --brand-soft:#1E240C; --brand-ring:rgba(174,203,63,.38); } [data-brand="finance"] { --brand:#7A93E0; --brand-hover:#96AAE9; --brand-active:#5F79C8; --brand-on:#070C1C; --brand-soft:#141B2E; --brand-ring:rgba(122,147,224,.38); } /* Light theme needs softer tints and a darker accent for contrast on white. */ [data-theme="light"][data-brand="success"] { --brand-on:#FFFFFF; --brand:#0F7A61; --brand-soft:#E4F6F0; --brand-ring:rgba(18,136,108,.30); } [data-theme="light"][data-brand="vendor"] { --brand-on:#FFFFFF; --brand:#1B6FBE; --brand-soft:#E7F1FC; --brand-ring:rgba(27,111,190,.30); } [data-theme="light"][data-brand="partner"] { --brand-on:#FFFFFF; --brand:#6D4BD1; --brand-soft:#EFEAFC; --brand-ring:rgba(109,75,209,.30); } [data-theme="light"][data-brand="community"]{ --brand-on:#FFFFFF; --brand:#C33F4C; --brand-soft:#FCEAEC; --brand-ring:rgba(195,63,76,.30); } [data-theme="light"][data-brand="care"] { --brand-on:#FFFFFF; --brand:#12708A; --brand-soft:#E4F4F8; --brand-ring:rgba(18,112,138,.30); } [data-theme="light"][data-brand="fitness"] { --brand-on:#FFFFFF; --brand:#3F7A17; --brand-soft:#EEF8E4; --brand-ring:rgba(63,122,23,.30); } [data-theme="light"][data-brand="site"] { --brand-on:#FFFFFF; --brand:#B84A34; --brand-soft:#FCEBE7; --brand-ring:rgba(184,74,52,.30); } [data-theme="light"][data-brand="analytics"]{ --brand-on:#FFFFFF; --brand:#B32E77; --brand-soft:#FCE9F3; --brand-ring:rgba(179,46,119,.30); } [data-theme="light"][data-brand="event"] { --brand-on:#FFFFFF; --brand:#5F7714; --brand-soft:#F2F7DF; --brand-ring:rgba(95,119,20,.30); } [data-theme="light"][data-brand="finance"] { --brand-on:#FFFFFF; --brand:#3B57B8; --brand-soft:#EAEEFB; --brand-ring:rgba(59,87,184,.30); } /* Follow the operating system when the user has not chosen. Generated from the [data-theme="light"] rules above, change those, not these. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg-app: #F4F6F7; --bg-sidebar: #FFFFFF; --bg-surface: #FFFFFF; --bg-raised: #F0F3F4; --bg-sunken: #F7F9F9; --bg-overlay: rgba(16,20,24,.44); --border: #E2E7E9; --border-strong: #CBD3D6; --text: #12161A; --text-muted: #4A555C; --text-subtle: #6E7C84; --text-on-fill: #0A0B0D; --brand-soft: #FDF3E2; --brand-active: #C9830F; --success: #12885A; --success-bg: #E6F6EF; --success-bd: #B7E4CF; --warning: #9A6B05; --warning-bg: #FCF3DF; --warning-bd: #EFD9A2; --danger: #C1323C; --danger-bg: #FCEBEC; --danger-bd: #F2C2C6; --info: #1B6FBE; --info-bg: #E8F2FC; --info-bd: #BCD9F5; --neutral-bg: rgba(16,22,26,.05); --neutral-bd: rgba(16,22,26,.12); --shadow-sm: 0 1px 2px rgba(16,24,32,.07); --shadow-md: 0 6px 16px rgba(16,24,32,.10); --shadow-lg: 0 18px 40px rgba(16,24,32,.14); } :root:not([data-theme="dark"])[data-brand="success"] { --brand-on:#FFFFFF; --brand:#0F7A61; --brand-soft:#E4F6F0; --brand-ring:rgba(18,136,108,.30); } :root:not([data-theme="dark"])[data-brand="vendor"] { --brand-on:#FFFFFF; --brand:#1B6FBE; --brand-soft:#E7F1FC; --brand-ring:rgba(27,111,190,.30); } :root:not([data-theme="dark"])[data-brand="partner"] { --brand-on:#FFFFFF; --brand:#6D4BD1; --brand-soft:#EFEAFC; --brand-ring:rgba(109,75,209,.30); } :root:not([data-theme="dark"])[data-brand="community"] { --brand-on:#FFFFFF; --brand:#C33F4C; --brand-soft:#FCEAEC; --brand-ring:rgba(195,63,76,.30); } :root:not([data-theme="dark"])[data-brand="care"] { --brand-on:#FFFFFF; --brand:#12708A; --brand-soft:#E4F4F8; --brand-ring:rgba(18,112,138,.30); } :root:not([data-theme="dark"])[data-brand="fitness"] { --brand-on:#FFFFFF; --brand:#3F7A17; --brand-soft:#EEF8E4; --brand-ring:rgba(63,122,23,.30); } :root:not([data-theme="dark"])[data-brand="site"] { --brand-on:#FFFFFF; --brand:#B84A34; --brand-soft:#FCEBE7; --brand-ring:rgba(184,74,52,.30); } :root:not([data-theme="dark"])[data-brand="analytics"] { --brand-on:#FFFFFF; --brand:#B32E77; --brand-soft:#FCE9F3; --brand-ring:rgba(179,46,119,.30); } :root:not([data-theme="dark"])[data-brand="event"] { --brand-on:#FFFFFF; --brand:#5F7714; --brand-soft:#F2F7DF; --brand-ring:rgba(95,119,20,.30); } :root:not([data-theme="dark"])[data-brand="finance"] { --brand-on:#FFFFFF; --brand:#3B57B8; --brand-soft:#EAEEFB; --brand-ring:rgba(59,87,184,.30); } }