/* * PocketCrew — Light theme for a.gopocketcrew.com * Activated by the `light` class on (set in layout head script). * Inert on the main dark domain. */ html.light { /* ─── Background Colors (white + light grey) ─── */ --black-pure: #ffffff; --black-soft: #fafafa; --black-matte: #ffffff; --surface-1: #f6f6f6; --surface-2: #efefef; --surface-3: #e6e6e6; --surface-4: #dadada; --surface-5: #cfcfcf; /* ─── Border/Stroke Colors ─── */ --stroke-subtle: rgba(0,0,0,0.07); --stroke-soft: rgba(0,0,0,0.11); --stroke-medium: rgba(0,0,0,0.16); --stroke-strong: rgba(0,0,0,0.24); /* ─── Text Hierarchy ─── */ --text-primary: #0a0a0a; --text-secondary: rgba(0,0,0,0.85); --text-muted: rgba(0,0,0,0.62); --text-dim: rgba(0,0,0,0.42); --text-ghost: rgba(0,0,0,0.28); /* ─── Inset/Glow Effects ─── */ --inset-light: inset 0 1px 0 rgba(255,255,255,0.9); --inset-dark: inset 0 -1px 0 rgba(0,0,0,0.06); --glow-soft: 0 0 40px rgba(0,0,0,0.03); --glow-medium: 0 0 60px rgba(0,0,0,0.05); /* ─── Shadows ─── */ --shadow-sm: 0 4px 20px rgba(0,0,0,0.08); --shadow-md: 0 12px 40px rgba(0,0,0,0.10); --shadow-lg: 0 24px 60px rgba(0,0,0,0.12); --shadow-xl: 0 40px 100px rgba(0,0,0,0.16); /* ─── Focus Ring ─── */ --ring: rgba(0,0,0,0.4); } /* Patches for colors site.css hardcodes outside the token block */ html.light .btn-outline:hover { background: rgba(0,0,0,0.04); } html.light .site-nav[data-scrolled="true"] { background: rgba(255,255,255,0.88); } html.light .hero { background: radial-gradient(ellipse 120% 80% at 10% 20%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.015) 40%, transparent 70%), radial-gradient(ellipse 100% 70% at 90% 80%, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.008) 35%, transparent 65%), radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.006) 0%, transparent 60%), var(--black-pure); } html.light .ambient-glow-1 { background: radial-gradient(ellipse, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 40%, transparent 70%); } html.light .ambient-glow-2 { background: radial-gradient(ellipse, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.03) 40%, transparent 70%); } html.light .mockup-badge { background: rgba(0,0,0,0.07); } html.light .sticky-bar { background: rgba(255,255,255,0.94); } html.light .back-to-top { background: rgba(0,0,0,0.05); } html.light .back-to-top:hover { background: rgba(0,0,0,0.09); border-color: rgba(0,0,0,0.18); } /* Icons are fetched as white monochrome; particles are drawn white on canvas */ html.light img[src*="simpleicons.org"] { filter: invert(1); } html.light .hero-particles { filter: invert(1); }