/* ═══════════════════════════════════════════════════════════════════════════ TitanCart Store Theme — theme.css Custom styles for the TitanCart storefront. Built on Bootstrap 5 + Inter font. Version 2.0 — full design-token system with dark/light support. Variables drive every color. Toggle via [data-theme="dark"] on . Brand indigo stays constant in both modes (it's the brand anchor). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hide WP admin bar on mobile ──────────────────────────────────────────── */ @media (max-width: 782px) { #wpadminbar { display: none !important; } html { margin-top: 0 !important; } body.admin-bar .sticky-top { top: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS — light mode (default) ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* Typography */ --tct-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Brand — indigo. Constant in both modes (anchor color). */ --tct-brand: #6366F1; --tct-brand-hover: #4F46E5; --tct-brand-soft: #EEF2FF; /* Surfaces */ --tct-bg: #ffffff; --tct-bg-secondary: #fafafa; --tct-bg-tertiary: #f5f5f7; --tct-bg-elevated: #ffffff; --tct-bg-inverse: #0A0A0F; --tct-bg-overlay: rgba(0, 0, 0, 0.55); /* Text */ --tct-text: #171717; --tct-text-secondary: #525252; --tct-text-tertiary: #a3a3a3; --tct-text-on-brand: #ffffff; --tct-text-on-inverse: #ffffff; /* Borders */ --tct-border: #e5e5e5; --tct-border-strong: #d4d4d4; --tct-border-subtle: #f0f0f0; /* Semantic */ --tct-success: #16a34a; --tct-success-bg: #dcfce7; --tct-success-text: #166534; --tct-warning: #d97706; --tct-warning-bg: #fef3c7; --tct-warning-text: #92400e; --tct-error: #dc2626; --tct-error-bg: #fef2f2; --tct-error-text: #991b1b; --tct-info: #2563eb; --tct-info-bg: #eff6ff; --tct-info-text: #1d4ed8; /* Effects */ --tct-shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02); --tct-shadow: 0 4px 16px rgba(0,0,0,0.08); --tct-shadow-lg: 0 20px 60px rgba(0,0,0,0.16); --tct-shadow-card-hover: 0 4px 20px rgba(0,0,0,0.08); /* Geometry */ --tct-radius-sm: 6px; --tct-radius: 8px; --tct-radius-lg: 12px; --tct-radius-xl: 16px; --tct-radius-pill: 50rem; /* Motion */ --tct-transition: 0.2s ease; --tct-transition-fast: 0.15s ease; /* ── Legacy aliases ─ keep older selectors and plugin CSS working ── */ --tct-dark: #0A0A0F; --tct-muted: #737373; --tct-light: #f5f5f7; --tct-accent: #6366F1; } /* ═══════════════════════════════════════════════════════════════════════════ DESIGN TOKENS — dark mode Same token names, different values. Brand stays. Surfaces, text, borders flip. ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Surfaces flip */ --tct-bg: #0A0A0F; --tct-bg-secondary: #14141C; --tct-bg-tertiary: #1C1C26; --tct-bg-elevated: #161620; --tct-bg-inverse: #ffffff; --tct-bg-overlay: rgba(0, 0, 0, 0.7); /* Text flips */ --tct-text: #FAFAFA; --tct-text-secondary: #A3A3A3; --tct-text-tertiary: #6B6B6B; --tct-text-on-brand: #ffffff; --tct-text-on-inverse: #0A0A0F; /* Borders flip */ --tct-border: #262626; --tct-border-strong: #404040; --tct-border-subtle: #1a1a1a; /* Brand-soft inverts to a tinted dark surface */ --tct-brand-soft: rgba(99, 102, 241, 0.12); /* Semantic backgrounds become tinted dark surfaces; text gets brighter */ --tct-success-bg: rgba(22, 163, 74, 0.12); --tct-success-text: #4ade80; --tct-warning-bg: rgba(217, 119, 6, 0.12); --tct-warning-text: #fbbf24; --tct-error-bg: rgba(220, 38, 38, 0.12); --tct-error-text: #f87171; --tct-info-bg: rgba(37, 99, 235, 0.12); --tct-info-text: #60a5fa; /* Shadows get heavier — dark surfaces eat shadows */ --tct-shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --tct-shadow: 0 4px 16px rgba(0,0,0,0.5); --tct-shadow-lg: 0 20px 60px rgba(0,0,0,0.6); --tct-shadow-card-hover: 0 4px 20px rgba(0,0,0,0.4); /* Legacy aliases adjusted for dark mode */ --tct-dark: #FAFAFA; --tct-muted: #A3A3A3; --tct-light: #1C1C26; --tct-accent: #6366F1; } /* ═══════════════════════════════════════════════════════════════════════════ THEME TRANSITION — only animate on toggle, not on initial paint The .tc-theme-transitioning class is added by JS on toggle click and removed after the transition completes (~400ms). ═══════════════════════════════════════════════════════════════════════════ */ html.tc-theme-transitioning, html.tc-theme-transitioning *, html.tc-theme-transitioning *::before, html.tc-theme-transitioning *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important; } /* ── Base ─────────────────────────────────────────────────────────────────── */ body { font-family: var(--tct-font); background-color: var(--tct-bg); color: var(--tct-text); -webkit-font-smoothing: antialiased; } /* Dark mode body: replace the flat #0A0A0F bg with a subtle blue-toned gradient (deep navy → slate) per Sean's modern-SaaS refactor spec. `background` shorthand needed because gradients can't ride on bg-color. `min-height: 100vh` keeps the gradient covering the viewport even on short pages (otherwise white below the body on tall viewports). */ [data-theme="dark"] body { background: linear-gradient(180deg, #0B0F1A 0%, #0F172A 100%); min-height: 100vh; } /* Header bg in dark mode: match the body gradient's starting color so the sticky nav reads as part of the same surface — no visible seam between header and hero. The actual header markup in the theme (header.php) is `