/* ================================================================== theme.css — CreatorWebServices.com (CWS) GOES IN: /Public/assets/css/theme.css ------------------------------------------------------------------ The SHARED design foundation. Loaded by BOTH the public site and the admin app. Defines: the TikTok-derived palette, semantic color tokens, type scale, spacing, radius, elevation, motion, and the light/dark theming switch. NO component styles live here — those go in public.css / admin.css, which consume these variables. THEMING MODEL :root -> dark theme (brand-true default, public site) [data-theme=light] -> light theme (better for long admin sessions) Put data-theme="light" on in the admin master to flip it. Every token name is identical across themes, so components never branch on theme — they just read var(--...). MOBILE-FIRST Base tokens are sized for phones. The one media query near the bottom scales spacing/type up for larger viewports. Build pages mobile-first and let them breathe upward. ================================================================== */ :root { /* ---- BRAND CORE (TikTok-derived, theme-independent) --------------- These three are the identity. They do NOT change between light and dark — the brand is the brand. Everything else is derived. */ --brand-blue: #019FED; /* logo azure (the arc) */ --brand-red: #EA1926; /* logo crimson (the accent swoosh) */ --brand-ink: #000000; /* true black canvas (logo ground) */ --brand-paper: #FFFFFF; /* Back-compat alias: some early tokens referenced --brand-cyan. */ --brand-cyan: var(--brand-blue); /* Tints/shades of the two accents, for hovers, borders, glows. Kept as their own ramp so components don't hand-mix opacity. */ --blue-100: #BEE6FB; --blue-300: #6FC4F4; --blue-500: #019FED; /* the logo blue, sampled */ --blue-700: #0A6FA8; --blue-900: #073F60; /* Back-compat aliases so existing --cyan-* refs keep resolving. */ --cyan-100: var(--blue-100); --cyan-300: var(--blue-300); --cyan-500: var(--blue-500); --cyan-700: var(--blue-700); --cyan-900: var(--blue-900); --red-100: #FAC6C9; --red-300: #F26B72; --red-500: #EA1926; /* the logo red, sampled */ --red-700: #B5101B80; /* with alpha for soft fills */ --red-700-solid: #B5101B; --red-900: #6E0A11; /* Neutral ramp — the workhorse grays. Tuned slightly cool to sit well against the azure blue. */ --n-0: #0A0A0B; --n-50: #121214; --n-100: #1B1B1F; --n-200: #26262C; --n-300: #34343B; --n-400: #4A4A53; --n-500: #6C6C77; --n-600: #8E8E99; --n-700: #B4B4BD; --n-800: #D8D8DE; --n-900: #F2F2F4; /* ---- SEMANTIC TOKENS (DARK = default) ----------------------------- Components ONLY use these, never the raw ramps above. This is the contract: change a value here, the whole site re-themes. */ /* Surfaces — layered from the page up */ --bg-canvas: var(--brand-ink); /* page background */ --bg-surface: var(--n-50); /* cards, panels */ --bg-surface-2: var(--n-100); /* nested / raised */ --bg-surface-3: var(--n-200); /* inputs, wells */ --bg-inverse: var(--brand-paper); /* rare: light chip on dark */ /* Text */ --text-primary: #F4F4F6; --text-secondary: var(--n-700); --text-tertiary: var(--n-500); --text-on-accent: var(--brand-ink); /* text sitting ON cyan/red fills */ --text-inverse: var(--brand-ink); /* Borders / dividers */ --border-subtle: #FFFFFF14; /* ~8% white hairline */ --border-default: #FFFFFF24; /* ~14% */ --border-strong: #FFFFFF3D; /* ~24% */ /* Accents — semantic roles mapped onto the brand pair. Cyan = primary/interactive. Red = energy/CTA/destructive-by-context. We deliberately use cyan as the everyday interactive color and reserve red for high-intent moments (primary CTA, alerts) so the red keeps its punch instead of being everywhere. */ --accent: var(--blue-500); --accent-hover: var(--blue-300); --accent-pressed: var(--blue-700); --accent-soft: #019FED1F; /* tinted bg behind accent text */ --cta: var(--red-500); --cta-hover: #F23A45; --cta-pressed: var(--red-700-solid); --cta-soft: #EA19261A; /* Focus ring — visible, keyboard-friendly, brand-tied */ --focus-ring: var(--blue-500); --focus-ring-offset: var(--bg-canvas); /* Status (kept distinct from brand red so "error" != "CTA") */ --ok: #2BD576; --ok-soft: #2BD5761A; --warn: #FFB020; --warn-soft: #FFB0201A; --danger: #FF4D4D; --danger-soft: #FF4D4D1A; --info: var(--blue-500); /* ---- TYPOGRAPHY --------------------------------------------------- Display: a tight, confident grotesk for headlines (the "we take this seriously" voice). Body: a highly legible UI sans. Mono: for data, doc numbers, code-ish bits. Swap the first family in each stack once you license/host a webfont; the fallbacks are real system faces so nothing looks broken pre-font-load. */ --font-display: "Clash Grotesk", "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; /* Type scale (mobile base). Fluid bumps applied in media query. */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.75rem; /* 28 */ --fs-3xl: 2.25rem; /* 36 */ --fs-4xl: 2.875rem; /* 46 */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-base: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-wide: 0.06em; /* for eyebrows / small caps labels */ /* ---- SPACING (4px base scale) ------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---- RADIUS ------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- ELEVATION ---------------------------------------------------- On a black canvas, shadows barely read — so "elevation" leans on subtle borders + a faint colored glow for interactive lift. */ --shadow-sm: 0 1px 2px #00000066; --shadow-md: 0 4px 16px #00000080; --shadow-lg: 0 12px 40px #0000009c; --glow-blue: 0 0 0 1px #019FED40, 0 0 24px #019FED26; --glow-cyan: var(--glow-blue); /* alias */ --glow-red: 0 0 0 1px #EA192640, 0 0 24px #EA192626; /* ---- LAYOUT ------------------------------------------------------- */ --container-max: 1200px; --container-pad: var(--space-4); --header-h: 72px; /* ---- MOTION ------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; /* zlayers */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; } /* ================================================================== LIGHT THEME — put data-theme="light" on (admin app) Same token names; only the values flip. Brand accents stay, but we darken them slightly where they'd glare on white. ================================================================== */ [data-theme="light"] { --bg-canvas: #FAFAFB; --bg-surface: #FFFFFF; --bg-surface-2: #F4F4F6; --bg-surface-3: #ECECEF; --bg-inverse: var(--brand-ink); --text-primary: #16161A; --text-secondary: #54545E; --text-tertiary: #8A8A95; --text-on-accent: #FFFFFF; /* white on the darkened accents below */ --text-inverse: #FFFFFF; --border-subtle: #16161A12; --border-default: #16161A24; --border-strong: #16161A40; /* Darken accents for AA contrast on light surfaces */ --accent: var(--blue-700); --accent-hover: #0A6FA8; --accent-pressed: var(--blue-900); --accent-soft: #0A6FA81F; --cta: var(--red-500); --cta-hover: var(--red-700-solid); --cta-pressed: var(--red-900); --cta-soft: #EA192614; --focus-ring: var(--blue-700); --focus-ring-offset: var(--bg-canvas); --shadow-sm: 0 1px 2px #16161a14; --shadow-md: 0 4px 16px #16161a1f; --shadow-lg: 0 12px 40px #16161a29; --glow-blue: 0 0 0 1px #0A6FA840, 0 0 20px #0A6FA81f; --glow-cyan: var(--glow-blue); --glow-red: 0 0 0 1px #EA192640, 0 0 20px #EA19261f; } /* ================================================================== GLOBAL RESET + BASE — minimal, framework-friendly. Bootstrap 5.3 sits on top; these just align the canvas, type, and focus behavior to our tokens. Keep this lean. ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); color: var(--text-primary); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--space-4); } a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } small, .text-muted { color: var(--text-secondary); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.9em; } /* Eyebrow / label utility — small wide-tracked caps used above headings */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } /* Brand gradient text — the cyan->red sweep, used SPARINGLY (hero word). */ .brand-gradient { background: linear-gradient(100deg, var(--brand-blue), var(--brand-red)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Keyboard focus — always visible, never removed. */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* Selection */ ::selection { background: var(--accent); color: var(--text-on-accent); } /* Container helper */ .cws-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* ================================================================== RESPONSIVE SCALE-UP — mobile-first: base is phone, bump upward. Only spacing/type/layout tokens change; colors are viewport-agnostic. ================================================================== */ @media (min-width: 768px) { :root { --fs-3xl: 2.75rem; /* 44 */ --fs-4xl: 3.75rem; /* 60 */ --container-pad: var(--space-6); --header-h: 84px; } } @media (min-width: 1200px) { :root { --fs-4xl: 4.5rem; /* 72 — big confident hero on desktop */ --container-pad: var(--space-6); } } /* ================================================================== ACCESSIBILITY — honor reduced-motion globally. ================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------------ NEXT: public.css (-> /Public/assets/css/public.css) builds the public components (header, hero, gallery cards, footer) on top of these tokens. Then Site.master wires it all together. ------------------------------------------------------------------ */