/** * SHAREBACK.FUN — Central Theme System * * To customize the theme: * 1. Edit the default variables in :root below, OR * 2. Set data-theme on or (e.g. data-theme="wallstreet"), OR * 3. Use the built-in interactive Theme Customizer widget in the browser! */ :root { /* ========================================================================== 1. COLOR PALETTE (Default: Sunset Terracotta) ========================================================================== */ --theme-bg: #FAF6F0; /* Warm Mediterranean Linen */ --theme-bg-2: #F2EBE1; /* Secondary background / sections */ --theme-paper: #FFFDF9; /* Receipt paper main background */ --theme-paper-2: #EFE7D8; /* Receipt paper shade / bottom tear */ --theme-ink: #2B2118; /* Warm espresso text & deep ink */ --theme-ink-soft: #766555; /* Subtitles, secondary text */ --theme-ink-faint: #B09F8E; /* Muted labels, timestamps, dividers */ --theme-hair: rgba(43, 33, 24, 0.09); /* Subtle borders */ --theme-hair-2: rgba(43, 33, 24, 0.18); /* Medium borders & outlines */ --theme-dash: #D8C8B5; /* Dashed receipt perforated lines */ --theme-stroke: rgba(43, 33, 24, 0.28); /* Highlights & Accents */ --theme-green: #D95338; /* Warm Terracotta / tickers / rewards */ --theme-green-2: #F38165; /* Accent tint */ --theme-green-3: #FCECE7; /* Badge background */ --theme-green-bg: #FCECE7; /* Badge background */ --theme-accent: #7B4397; /* Sunset Violet CTA / accent */ --theme-accent-glow: rgba(123, 67, 151, 0.35); /* Glow */ /* Status Colors */ --theme-red: #B3261E; /* Error / refusal red */ --theme-red-bg: #F7E6E4; /* Light red background */ --theme-amber: #9A6D00; /* Warning / review amber */ --theme-amber-bg: #F6EDD2; /* Light amber background */ /* Auxiliary Accent Colors */ --theme-violet: #7C5CFF; --theme-sky: #21B6F2; --theme-sun: #FFC531; --theme-pink: #FF5CA8; /* ========================================================================== 2. TYPOGRAPHY ========================================================================== */ --theme-font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; --theme-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; --theme-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; /* ========================================================================== 3. SHADOWS & GEOMETRY ========================================================================== */ --theme-shadow-lg: 0 40px 80px -30px rgba(14, 13, 12, 0.35), 0 12px 30px -12px rgba(14, 13, 12, 0.18), 0 0 0 1px rgba(14, 13, 12, 0.05); --theme-shadow-md: 0 24px 50px -24px rgba(14, 13, 12, 0.3), 0 4px 12px -4px rgba(14, 13, 12, 0.1), 0 0 0 1px rgba(14, 13, 12, 0.05); --theme-receipt-tear: polygon(0 0, 100% 0, 100% 100%, 96% 0, 92% 100%, 88% 0, 84% 100%, 80% 0, 76% 100%, 72% 0, 68% 100%, 64% 0, 60% 100%, 56% 0, 52% 100%, 48% 0, 44% 100%, 40% 0, 36% 100%, 32% 0, 28% 100%, 24% 0, 20% 100%, 16% 0, 12% 100%, 8% 0, 4% 100%, 0 0); /* ========================================================================== 4. LEGACY ALIASES (Preserves complete backwards-compatibility) ========================================================================== */ --bg: var(--theme-bg); --bg-2: var(--theme-bg-2); --bg2: var(--theme-bg-2); --paper: var(--theme-paper); --paper-2: var(--theme-paper-2); --ink: var(--theme-ink); --ink-soft: var(--theme-ink-soft); --soft: var(--theme-ink-soft); --ink-2: var(--theme-ink-soft); --ink-faint: var(--theme-ink-faint); --faint: var(--theme-ink-faint); --ink-3: var(--theme-ink-faint); --fg: var(--theme-ink); --fg-2: rgba(29, 29, 31, 0.62); --fg-3: rgba(29, 29, 31, 0.4); --hair: var(--theme-hair); --hair-2: var(--theme-hair-2); --hair2: var(--theme-hair-2); --dash: var(--theme-dash); --stroke: var(--theme-stroke); --accent: var(--theme-accent); --accent-glow: var(--theme-accent-glow); --green: var(--theme-green); --green-2: var(--theme-green-2); --green-3: var(--theme-green-3); --green-bg: var(--theme-green-bg); --red: var(--theme-red); --red-bg: var(--theme-red-bg); --amber: var(--theme-amber); --amber-bg: var(--theme-amber-bg); --violet: var(--theme-violet); --sky: var(--theme-sky); --sun: var(--theme-sun); --pink: var(--theme-pink); --display: var(--theme-font-display); --mono: var(--theme-font-mono); --serif: var(--theme-font-serif); } /* ========================================================================== THEME PRESET 1: NOIR / DARK OLED ========================================================================== */ [data-theme="noir"], [data-theme="dark"] { --theme-bg: #09090B; --theme-bg-2: #121215; --theme-paper: #18181B; --theme-paper-2: #202024; --theme-ink: #F4F4F5; --theme-ink-soft: #A1A1AA; --theme-ink-faint: #71717A; --theme-hair: rgba(255, 255, 255, 0.1); --theme-hair-2: rgba(255, 255, 255, 0.18); --theme-dash: #3F3F46; --theme-stroke: rgba(255, 255, 255, 0.28); --theme-green: #4ADE80; --theme-green-2: #86EFAC; --theme-green-3: #142B1A; --theme-green-bg: #142B1A; --theme-accent: #FF5252; --theme-accent-glow: rgba(255, 82, 82, 0.45); --fg-2: rgba(244, 244, 245, 0.65); --fg-3: rgba(244, 244, 245, 0.42); --theme-shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 70px -20px rgba(255, 255, 255, 0.12); --theme-shadow-md: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* ========================================================================== THEME PRESET 2: WALL STREET EMERALD (Financial Green & Warm Ivory) ========================================================================== */ [data-theme="wallstreet"] { --theme-bg: #F8F9FA; --theme-bg-2: #EFF2F5; --theme-paper: #FFFEFC; --theme-paper-2: #F3EFE6; --theme-ink: #0F172A; --theme-ink-soft: #475569; --theme-ink-faint: #94A3B8; --theme-hair: rgba(15, 23, 42, 0.08); --theme-hair-2: rgba(15, 23, 42, 0.16); --theme-dash: #CBD5E1; --theme-stroke: rgba(15, 23, 42, 0.25); --theme-green: #00875A; --theme-green-2: #36B37E; --theme-green-3: #E3FCEF; --theme-green-bg: #E3FCEF; --theme-accent: #FF5630; --theme-accent-glow: rgba(255, 86, 48, 0.35); --fg-2: rgba(15, 23, 42, 0.65); --fg-3: rgba(15, 23, 42, 0.42); } /* ========================================================================== THEME PRESET 3: CYBERPUNK / NEON TERMINAL ========================================================================== */ [data-theme="cyberpunk"] { --theme-bg: #05050A; --theme-bg-2: #0C0D14; --theme-paper: #11131F; --theme-paper-2: #17192A; --theme-ink: #F0F6FC; --theme-ink-soft: #8B949E; --theme-ink-faint: #484F58; --theme-hair: rgba(0, 240, 255, 0.18); --theme-hair-2: rgba(0, 240, 255, 0.32); --theme-dash: #21262D; --theme-stroke: rgba(0, 240, 255, 0.45); --theme-green: #00F0FF; /* Electric Cyan */ --theme-green-2: #39FF14; /* Radioactive Lime */ --theme-green-3: rgba(0, 240, 255, 0.12); --theme-green-bg: rgba(0, 240, 255, 0.12); --theme-accent: #FF0055; /* Neon Magenta */ --theme-accent-glow: rgba(255, 0, 85, 0.6); --fg-2: rgba(240, 246, 252, 0.7); --fg-3: rgba(240, 246, 252, 0.45); --theme-shadow-lg: 0 20px 60px -15px rgba(0, 240, 255, 0.25), 0 0 0 1px rgba(0, 240, 255, 0.2); } /* ========================================================================== THEME PRESET 4: SUNSET CORAL / TERRACOTTA ========================================================================== */ [data-theme="sunset"] { --theme-bg: #FAF6F0; --theme-bg-2: #F2EBE1; --theme-paper: #FFFDF9; --theme-paper-2: #EFE7D8; --theme-ink: #2B2118; --theme-ink-soft: #766555; --theme-ink-faint: #B09F8E; --theme-hair: rgba(43, 33, 24, 0.09); --theme-hair-2: rgba(43, 33, 24, 0.18); --theme-dash: #D8C8B5; --theme-stroke: rgba(43, 33, 24, 0.28); --theme-green: #D95338; /* Warm Terracotta */ --theme-green-2: #F38165; --theme-green-3: #FCECE7; --theme-green-bg: #FCECE7; --theme-accent: #7B4397; /* Sunset Violet */ --theme-accent-glow: rgba(123, 67, 151, 0.35); --fg-2: rgba(43, 33, 24, 0.66); --fg-3: rgba(43, 33, 24, 0.45); } /* ========================================================================== THEME PRESET 5: RETRO TERMINAL (1980s Amber Thermal Printer) ========================================================================== */ [data-theme="retro"] { --theme-bg: #12100E; --theme-bg-2: #1A1714; --theme-paper: #1E1B17; --theme-paper-2: #292520; --theme-ink: #FFB000; /* Phosphor Amber */ --theme-ink-soft: #D48F00; --theme-ink-faint: #8C5F00; --theme-hair: rgba(255, 176, 0, 0.15); --theme-hair-2: rgba(255, 176, 0, 0.28); --theme-dash: #593E00; --theme-stroke: rgba(255, 176, 0, 0.4); --theme-green: #FFB000; --theme-green-2: #FFC84A; --theme-green-3: rgba(255, 176, 0, 0.12); --theme-green-bg: rgba(255, 176, 0, 0.12); --theme-accent: #33FF33; /* Phosphor Green */ --theme-accent-glow: rgba(51, 255, 51, 0.5); --fg-2: rgba(255, 176, 0, 0.72); --fg-3: rgba(255, 176, 0, 0.45); } /* ========================================================================== THEME PRESET 6: NORDIC FROST (Arctic Slate & Glacier Blue) ========================================================================== */ [data-theme="nordic"] { --theme-bg: #F0F4F8; --theme-bg-2: #E2E8F0; --theme-paper: #FFFFFF; --theme-paper-2: #E5EDF5; --theme-ink: #1E293B; --theme-ink-soft: #475569; --theme-ink-faint: #94A3B8; --theme-hair: rgba(30, 41, 59, 0.08); --theme-hair-2: rgba(30, 41, 59, 0.16); --theme-dash: #CBD5E1; --theme-stroke: rgba(30, 41, 59, 0.26); --theme-green: #0284C7; /* Glacier Blue */ --theme-green-2: #38BDF8; --theme-green-3: #E0F2FE; --theme-green-bg: #E0F2FE; --theme-accent: #0EA5E9; --theme-accent-glow: rgba(14, 165, 233, 0.35); --fg-2: rgba(30, 41, 59, 0.65); --fg-3: rgba(30, 41, 59, 0.42); } /* General dynamic styling enhancements */ body { background-color: var(--theme-bg) !important; color: var(--theme-ink) !important; font-family: var(--theme-font-display); } /* Responsive receipt & sheet surfaces */ .sheet, .rcpt, .paper { background: var(--theme-paper); color: var(--theme-ink); transition: background-color 0.25s ease, color 0.25s ease; } .sheet::after, .rcpt::after { background: var(--theme-paper-2); } .btn { background: var(--theme-ink); color: var(--theme-paper); } .btn:hover { background: var(--theme-ink); } .btn-ghost { background: var(--theme-bg); color: var(--theme-ink); }