/* ============================================================================= SoHo Pittsburgh — Design Tokens static/css/theme.css CSS CUSTOM PROPERTIES ONLY — no element selectors, no class definitions. Safe to load before Tailwind's output.css because: - :root {} custom properties are never touched by Tailwind Preflight - All element/class styling lives in input.css @layer base/components so Tailwind controls the cascade order Variable names here MUST match the keys returned by ThemeStyle.to_css_vars() in apps/core/models.py. The active theme injects its own :root{} block in base.html which overrides these defaults at runtime. ============================================================================= */ :root { /* --- Fonts --------------------------------------------------------------- */ /* Overridden by ThemeStyle.primary/secondary/accent_font via admin */ --font-primary: "Playfair Display", Georgia, serif; --font-secondary: "Lato", "Helvetica Neue", sans-serif; --font-accent: "Montserrat", Arial, sans-serif; /* --- Text Colors --------------------------------------------------------- */ /* Overridden by ThemeStyle.*_text_color */ --color-text-primary: #bdbdbd; /* silver — main body text */ --color-text-secondary: #8a8a8a; /* muted silver — supporting text */ --color-text-tertiary: #2c2c2c; /* dark charcoal — used on light bg sections */ --color-text-accent: #b8920f; /* gold — prices, highlights, links */ --color-text-heading: #ffffff; /* h1-h6 */ --color-text-nav: #eccb9c; /* always light regardless of page theme */ /* --- Background Colors --------------------------------------------------- */ /* Overridden by ThemeStyle.*_bg_color */ --color-bg-primary: #fafaf8; /* page background — almost white */ --color-bg-secondary: #faf6ef; /* cards, panels, surfaces — light cream */ --color-bg-tertiary: #f2ebe0; /* section backgrounds — light linen/beige */ --color-bg-accent: #c9972a; /* CTA buttons, badges */ --color-nav-bg: rgba(255, 255, 255, 0.80); /* sticky nav */ /* --- Surface Colors ------------------------------------------------------ */ /* Elevated surfaces (modals, drawers, popovers) that layer over bg-secondary */ /* Light enough that --color-text-* vars are readable without overrides. */ --color-bg-surface: #2a2a2a; /* dark modal / panel surface */ --color-bg-surface-raised: #333333; /* thumbnail strip, nested panels */ --color-bg-surface-light: #f5efe6; /* light modal / panel surface */ --color-bg-surface-light-raised: #ede4d8; /* nested elements on light surface */ /* --- Extended Gold (CSS-only, not overridable via admin) ----------------- */ --color-gold-bright: #e8b84b; /* hover states */ --color-gold-deep: #a07820; /* borders, subtle dividers */ --color-gold-light: #f4d98a; /* tints */ /* Base colors */ --color-white: #ffffff; /* --- Grays --------------------------------------------------------------- */ --color-dark-gray: #2c2c2c; /* borders */ --color-mid-gray: #555555; /* placeholder text */ /* --- Steelers ------------------------------------------------------------ */ --color-steeler-gold: #ffb612; --color-steeler-black: #101820; /* --- Pirates ------------------------------------------------------------- */ --color-pirate-gold: #fdb827; --color-priate-black: #27251f; /* --- Pitt ---------------------------------------------------------------- */ --color-pitt-gold: #ffb81c; --color-pitt-blue: #003594; /* --- Spacing Scale ------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* --- Layout -------------------------------------------------------------- */ --max-width: 1280px; --container-px: 1.5rem; /* --- Borders ------------------------------------------------------------- */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --gold-rule: 1px solid var(--color-gold-deep); --gold-rule-thick: 2px solid var(--color-bg-accent); /* --- Shadows ------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.6); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-gold: 0 0 20px rgba(201,151,42,0.25); /* --- Transitions --------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; } /* Responsive token overrides — still just tokens, no element styles */ @media (max-width: 768px) { :root { --container-px: 1rem; } }