/* ============================================================= Smoke Show Labs — Colors & Type ============================================================= */ /* ---------- Web fonts (Google substitutes — flagged to user) ---- */ @import url("https://fonts.googleapis.com/css2?family=Monument+Extended:wght@400;700;900&family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"); /* Monument Extended is paid; we substitute with `Anton` + ultra-tight tracking for hero display until the user provides a license / file. */ :root { /* ---------- PRIMARY (default — dark / neon) ---------- */ --color-fg: #e3f0f7; --color-bg: #000000; --color-bg-alt: #0f0f0f; --color-bg-elev: #1a1a1a; --color-button-fg: #2b2b2b; --color-button-bg: #78d6f1; /* electric cyan */ --color-button-bg-hover: #5cc6e6; --color-outlines: #e3f0f7; --color-borders: #ec8ebe; /* hot pink */ --color-overlay: #000000; --color-overlay-rgb: 0 0 0; --color-card-fg: #e3f0f7; --color-card-bg: #000000; --gradient-card-bg: radial-gradient(rgba(0,0,0,1), rgba(58,64,47,1) 100%); /* Neon accents (lifted from the wordmark) */ --color-cyan: #78d6f1; --color-cyan-glow: #b3eaf7; --color-pink: #ec8ebe; --color-pink-glow: #ffb8d9; --color-magenta: #ff2db4; /* deeper neon for big graphic moments */ /* ---------- SECONDARY ---------- */ --color-success: #31862d; --color-success-fg: #ffffff; --color-error: #dd4242; --color-error-fg: #ffffff; --color-cart-dot-fg: #ffffff; --color-cart-dot-bg: #c72d00; --color-soldout: #555555; --color-placeholder-bg: rgb(233,233,233); --color-review-stars: #ffcc00; /* ---------- TERTIARY (warm/amber alternate theme) ---------- */ --t-color-fg: #ffffff; --t-color-bg: #2b2b2b; --t-color-button-fg: #2b2b2b; --t-color-button-bg: #f7b829; --t-color-outlines: #f7b829; --t-color-borders: #555555; --t-color-card-bg: #343434; --t-color-bg-alt: #3a3a3a; --t-gradient-card-bg: radial-gradient(rgba(115,124,62,1), rgba(58,64,47,1) 100%); /* ---------- Type families ---------- */ --font-display: "Anton", "Monument Extended", "Impact", system-ui, sans-serif; --font-sans: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Menlo", monospace; /* ---------- Type scale (semantic) ---------- */ --text-hero: clamp(56px, 12vw, 168px); --text-h1: clamp(40px, 6vw, 88px); --text-h2: clamp(32px, 4vw, 56px); --text-h3: 28px; --text-h4: 22px; --text-body: 16px; --text-body-lg: 18px; --text-small: 13px; --text-eyebrow: 12px; --leading-tight: 0.92; --leading-snug: 1.15; --leading-body: 1.55; --tracking-tight: -0.03em; --tracking-flat: 0; --tracking-wide: 0.08em; --tracking-eyebrow: 0.22em; /* ---------- Spacing (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- Radii ---------- */ --r-none: 0; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px; /* ---------- Borders / outlines ---------- */ --border-thin: 1px solid var(--color-borders); --border-thick: 2px solid var(--color-fg); --border-neon: 2px solid var(--color-cyan); /* ---------- Shadows / glows ---------- */ --glow-cyan: 0 0 12px rgba(120, 214, 241, 0.55), 0 0 32px rgba(120, 214, 241, 0.25); --glow-pink: 0 0 12px rgba(236, 142, 190, 0.55), 0 0 32px rgba(236, 142, 190, 0.25); --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.55); --shadow-pop: 8px 8px 0 var(--color-cyan); --shadow-pop-pink: 8px 8px 0 var(--color-pink); /* ---------- Easing ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 0.68, 0); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================= SEMANTIC ELEMENT STYLES ============================================================= */ .ssl-hero { font-family: var(--font-display); font-size: var(--text-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-fg); } .ssl-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .ssl-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .ssl-h3 { font-family: var(--font-sans); font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-snug); } .ssl-h4 { font-family: var(--font-sans); font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-snug); } .ssl-eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-pink); } .ssl-body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-fg); } .ssl-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--leading-body); } .ssl-small { font-family: var(--font-sans); font-size: var(--text-small); line-height: var(--leading-body); color: rgba(227, 240, 247, 0.7); } .ssl-mono { font-family: var(--font-mono); font-size: var(--text-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* Neon glow text (sparingly) */ .ssl-neon-cyan { color: var(--color-cyan); text-shadow: 0 0 4px var(--color-cyan-glow), 0 0 14px rgba(120, 214, 241, 0.7), 0 0 28px rgba(120, 214, 241, 0.45); } .ssl-neon-pink { color: var(--color-pink); text-shadow: 0 0 4px var(--color-pink-glow), 0 0 14px rgba(236, 142, 190, 0.7), 0 0 28px rgba(236, 142, 190, 0.45); }