/* ================================================================ pipopstudio® — Theme System theme.css · v1.0 ---------------------------------------------------------------- DARK = default (existing :root tokens, no attribute needed) LIGHT = [data-theme="light"] on This file is purely additive — zero edits to style.css or project-page.css. Load it AFTER both. Architecture: 1. New semantic tokens (glass, overlays, cards) added to :root 2. [data-theme="light"] overrides all tokens 3. Component-level overrides for hardcoded rgba() values 4. Sticky bottom menu styles 5. Transition smoothing on theme switch ================================================================ */ /* ---------------------------------------------------------------- 0. NEW SEMANTIC TOKENS (dark defaults) ---------------------------------------------------------------- These cover hardcoded rgba() values across both CSS files. Added here so light mode can override them cleanly. ---------------------------------------------------------------- */ :root { /* Glass / frosted surfaces */ --glass-bg: rgba(14, 14, 14, 0.85); --glass-bg-heavy: rgba(14, 14, 14, 0.55); --glass-border: rgba(255, 255, 255, 0.1); /* Cards / subtle surfaces */ --card-bg: rgba(255, 255, 255, 0.025); --card-hover-bg: rgba(36, 73, 255, 0.05); /* Overlays */ --overlay-light: rgba(14, 14, 14, 0.55); --overlay-heavy: rgba(6, 6, 6, 0.97); /* Grain */ --grain-opacity: 0.028; /* Scroll line */ --scroll-line-bg: var(--fg-3); } /* ---------------------------------------------------------------- 1. LIGHT MODE — Token overrides ---------------------------------------------------------------- */ [data-theme="light"] { /* Core palette */ --bg: #f5f5f5; --bg-2: #ebebeb; --bg-3: #e0e0e0; --fg: #1a1a1a; --fg-2: #4a4a4a; --fg-3: #888; --accent: #2449ff; --accent-dim: rgba(36, 73, 255, 0.08); --accent-glow: rgba(36, 73, 255, 0.15); --green: #2db877; --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.16); /* Glass */ --glass-bg: rgba(245, 245, 245, 0.88); --glass-bg-heavy: rgba(245, 245, 245, 0.7); --glass-border: rgba(0, 0, 0, 0.08); /* Cards */ --card-bg: rgba(0, 0, 0, 0.025); --card-hover-bg: rgba(36, 73, 255, 0.04); /* Overlays */ --overlay-light: rgba(255, 255, 255, 0.6); --overlay-heavy: rgba(245, 245, 245, 0.97); /* Grain — less visible on light */ --grain-opacity: 0.015; /* Scroll line */ --scroll-line-bg: var(--fg-3); } /* ---------------------------------------------------------------- 2. COMPONENT OVERRIDES — Light mode ---------------------------------------------------------------- Target hardcoded rgba() values that don't use tokens. Scoped under [data-theme="light"] for zero dark-mode impact. ---------------------------------------------------------------- */ /* ── Grain ── */ [data-theme="light"] .grain { opacity: var(--grain-opacity); } /* ── Header ── */ [data-theme="light"] .site-header { background-color: var(--glass-bg); } /* ── Cursor ── */ @media (hover: hover) and (pointer: fine) { [data-theme="light"] .cursor-dot { background: var(--fg); } [data-theme="light"] .cursor-ring { border-color: rgba(26, 26, 26, 0.25); } [data-theme="light"] body.cursor-hover .cursor-dot { background: var(--accent); } [data-theme="light"] body.cursor-hover .cursor-ring { border-color: var(--accent); } } /* ── Hero ── */ [data-theme="light"] .hero::before { background: radial-gradient(circle, rgba(36, 73, 255, 0.04) 0%, transparent 70%); } [data-theme="light"] .hero-meta { border-color: rgba(36, 73, 255, 0.2); } [data-theme="light"] .hero-meta::before { background: linear-gradient(90deg, transparent 0%, rgba(36, 73, 255, 0.06) 50%, transparent 100%); } /* ── Cards (projects, testimonials, contact, wwd panels) ── */ [data-theme="light"] .project-card { background: var(--bg-2); } [data-theme="light"] .project-card:hover { border-color: rgba(36, 73, 255, 0.25); } [data-theme="light"] .project-card-overlay { background: rgba(255, 255, 255, 0.55); } [data-theme="light"] .project-card-cta { color: var(--fg); border-color: rgba(0, 0, 0, 0.3); } [data-theme="light"] .tm-card { background: var(--card-bg); } [data-theme="light"] .tm-card:hover { background: var(--card-hover-bg); } [data-theme="light"] .contact-link-card { background: var(--card-bg); } [data-theme="light"] .contact-link-card:hover { background: var(--card-hover-bg); } [data-theme="light"] .wwd-panel { background: var(--card-bg); } [data-theme="light"] .wwd-panel.is-active:hover { background: var(--card-hover-bg); } /* ── Featured project ── */ [data-theme="light"] .fp::before { background: radial-gradient(circle, rgba(36, 73, 255, 0.03) 0%, transparent 70%); } [data-theme="light"] .fp__viewer { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .fp__viewer:hover { border-color: rgba(36, 73, 255, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(36, 73, 255, 0.06); } [data-theme="light"] .fp__pill { background: rgba(255, 255, 255, 0.75); color: var(--fg-2); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .fp__viewer-nav { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); color: var(--fg); } [data-theme="light"] .fp__viewer-nav:hover { background: rgba(36, 73, 255, 0.15); border-color: rgba(36, 73, 255, 0.3); } [data-theme="light"] .fp__badge { border-color: rgba(36, 73, 255, 0.2); } [data-theme="light"] .fp__badge::before, [data-theme="light"] .exp-section-title span::before { background: linear-gradient(90deg, transparent 0%, rgba(36, 73, 255, 0.06) 50%, transparent 100%); } [data-theme="light"] .exp-section-title span { border-color: rgba(36, 73, 255, 0.2); } /* ── About ── */ [data-theme="light"] .about-image-wrapper { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); } /* ── Experience accordion ── */ [data-theme="light"] .exp-toggle { border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .exp-card.active .exp-toggle { border-color: var(--accent); } [data-theme="light"] .icon-bar { background: var(--fg-2); } /* ── Testimonials ── */ [data-theme="light"] .tm-social-link { background: rgba(36, 73, 255, 0.06); } [data-theme="light"] .tm-social-link:hover { background: rgba(36, 73, 255, 0.12); } /* ── Contact form ── */ [data-theme="light"] .contact-form input, [data-theme="light"] .contact-form textarea { background: var(--bg-2); } [data-theme="light"] .contact-form input:focus, [data-theme="light"] .contact-form textarea:focus { background: #fff; } /* ── Footer ── */ [data-theme="light"] footer, [data-theme="light"] .site-footer { background: var(--bg-2); } /* ── Marquee ── */ [data-theme="light"] .marquee-strip { background: var(--bg-2); } /* ── Background gradients ── */ [data-theme="light"] .section-projects { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } [data-theme="light"] .section-wwd { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); } [data-theme="light"] .section-wwd::before { background: radial-gradient(circle, rgba(36, 73, 255, 0.03) 0%, transparent 70%); } /* ── Carousel 3D ── */ [data-theme="light"] .carousel-card { background-color: var(--bg-2); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* ---------------------------------------------------------------- 3. PROJECT PAGE OVERRIDES (project-page.css) ---------------------------------------------------------------- Scoped to [data-theme="light"] — no impact when dark. ---------------------------------------------------------------- */ /* Caption bar */ [data-theme="light"] .pv2-caption { background: var(--glass-bg); } /* Chapter bg number — more visible in light */ [data-theme="light"] .pv2-chapter-bg-num { color: rgba(0, 0, 0, 0.03); } /* Hero gradient */ [data-theme="light"] .pv2-hero::after { background: linear-gradient(to bottom, transparent, var(--bg)); } /* Slider nav */ [data-theme="light"] .pv2-slider-nav { background: var(--glass-bg-heavy); border-color: var(--glass-border); } [data-theme="light"] .pv2-slider-nav:hover { background: rgba(36, 73, 255, 0.2); border-color: rgba(36, 73, 255, 0.3); } /* Slider expand button */ [data-theme="light"] .pv2-slider-expand { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); color: var(--fg); } [data-theme="light"] .pv2-slider-expand:hover { background: rgba(36, 73, 255, 0.2); } /* Lightbox */ [data-theme="light"] .pv2-lightbox { background: rgba(245, 245, 245, 0.96); } [data-theme="light"] .pv2-lb-bar { background: linear-gradient(to bottom, rgba(245, 245, 245, 0.6), transparent); } [data-theme="light"] .pv2-lb-counter { color: var(--fg-2); } [data-theme="light"] .pv2-lb-close { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); color: var(--fg); } [data-theme="light"] .pv2-lb-close:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.2); } [data-theme="light"] .pv2-lb-nav { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.1); color: var(--fg); } [data-theme="light"] .pv2-lb-nav:hover { background: rgba(36, 73, 255, 0.15); border-color: rgba(36, 73, 255, 0.25); } [data-theme="light"] .pv2-lb-caption { background: linear-gradient(to top, rgba(245, 245, 245, 0.5), transparent); } [data-theme="light"] .pv2-lb-caption-text { color: var(--fg-3); } /* Rail cards */ [data-theme="light"] .pv2-rail-card { background: var(--bg-2); } /* Video carousel play button */ [data-theme="light"] .pv2-vcaro-play { background: rgba(255, 255, 255, 0.65); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .pv2-vcaro-play-icon { color: var(--fg); } [data-theme="light"] .pv2-vcaro-play:hover { background: rgba(36, 73, 255, 0.3); border-color: rgba(36, 73, 255, 0.4); } [data-theme="light"] .pv2-vcaro-play:hover .pv2-vcaro-play-icon { color: #fff; } /* Testimonials (project page) */ [data-theme="light"] .pv2-testimonial { background: #fff; } /* ---------------------------------------------------------------- 4. STICKY BOTTOM MENU ---------------------------------------------------------------- Injected via header.html (fetched). Contains nav shortcuts + theme toggle. Hidden on desktop (header nav is sufficient). ---------------------------------------------------------------- */ .sticky-menu { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: none; /* shown on mobile via media query */ background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); } .sticky-menu-inner { display: flex; align-items: center; justify-content: space-around; max-width: 480px; margin: 0 auto; } /* ── Menu item ── */ .sticky-menu-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; background: none; border: none; cursor: pointer; text-decoration: none; color: var(--fg-3); border-radius: 10px; transition: color 0.2s ease, background 0.2s ease; -webkit-tap-highlight-color: transparent; } .sticky-menu-item:active { background: var(--accent-dim); color: var(--accent); } .sticky-menu-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sticky-menu-label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } /* ── Theme toggle button ── */ .theme-toggle { composes: sticky-menu-item; /* same base styles */ } /* Sun icon — visible in dark mode */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } /* Moon icon — visible in light mode */ [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ── Show on mobile ── */ @media (max-width: 900px) { .sticky-menu { display: block; } /* Add bottom padding to body so content isn't hidden behind menu */ body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } } /* ── Desktop: theme toggle in header instead ── */ .header-theme-toggle { display: none; /* hidden on mobile — sticky menu handles it */ background: none; border: 1px solid var(--border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: var(--fg-3); padding: 0; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .header-theme-toggle:hover { color: var(--fg); border-color: var(--border-hover); background: var(--accent-dim); } .header-theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .header-theme-toggle .icon-sun { display: block; } .header-theme-toggle .icon-moon { display: none; } [data-theme="light"] .header-theme-toggle .icon-sun { display: none; } [data-theme="light"] .header-theme-toggle .icon-moon { display: block; } @media (min-width: 901px) { .header-theme-toggle { display: flex; align-items: center; justify-content: center; } } /* ---------------------------------------------------------------- 5. SMOOTH THEME TRANSITION ---------------------------------------------------------------- Applied after first paint to avoid flash on load. JS adds .theme-ready to after initTheme(). ---------------------------------------------------------------- */ .theme-ready, .theme-ready *, .theme-ready *::before, .theme-ready *::after { transition-property: background-color, background, color, border-color, box-shadow, opacity; transition-duration: 0.3s; transition-timing-function: ease; } /* Preserve existing component transitions — don't override transform etc. */ .theme-ready .project-card, .theme-ready .tm-card, .theme-ready .contact-link-card, .theme-ready .wwd-panel, .theme-ready .fp__thumb, .theme-ready .fp__cta, .theme-ready .hero-cta, .theme-ready .cta, .theme-ready .carousel-card { transition: background-color 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--ease-out); } /* ---------------------------------------------------------------- 6. REDUCED MOTION ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .theme-ready, .theme-ready *, .theme-ready *::before, .theme-ready *::after { transition-duration: 0.01ms !important; } }