/* ============================================================ skins.css — ART-STYLE SWITCHER (SHARED · every hub imports this) ------------------------------------------------------------ STANDARD COMPONENT. Every page in every member hub loads this. The switcher restyles the *art direction* of the ocean without touching page STRUCTURE — only the scene contract variables and a few component textures change. STATUS (2026-06-20): the BASE look Sami approved now lives in sami/theme.css :root (the default). The alternate skins below are intentionally PLACEHOLDERS — they currently inherit the base look so switching never breaks, and each will be refined later using reference images in references/themes//. The switcher MECHANISM (rotate every 2 days + manual override) stays fully live. How it works: • selects the active skin. • A skin overrides the SCENE CONTRACT variables theme.css reads (sky, water column, glow, particles, card outline, dock glow). • Empty skin block = inherits the base values from theme.css. Load order: tokens.css → components.css → skins.css → /theme.css ============================================================ */ /* Animate the crossfade when the active style changes. */ html[data-skin] body, html[data-skin] body::before, html[data-skin] .sky-scene * { transition: background var(--t-slow) ease, color var(--t-slow) ease, opacity var(--t-slow) ease, filter var(--t-slow) ease; } /* ════════════════════════════════════════════════════════════ SCENE CONTRACT — default values live in sami/theme.css :root. A skin overrides any of: --sky-top, --sky-bottom sky gradient (above water) --surface-glow sunlight bloom on the surface --w1 … --w7 water column stops (light→abyss) --particle-a, --particle-b drifting bioluminescence tint --scene-sun / --scene-cloud / --scene-haze above-water scene --dock-glow abyss critter glow color --card-outline / --card-outline-w card border treatment --zone-shallow/mid/deep-accent depth accents ════════════════════════════════════════════════════════════ */ /* ============================================================ 🌊 BASE / OCEAN — the approved default (lives in theme.css). Empty here on purpose: this slot shows the base look as-is. ============================================================ */ html[data-skin="default"] { /* inherits base from theme.css */ } /* ============================================================ 🏴‍☠ ONE PIECE — PLACEHOLDER for the FUTURE real One Piece skin. To be built from references/themes/one-piece/. Inherits base for now so the switcher slot is live but visually neutral. ============================================================ */ html[data-skin="one-piece"] { /* TODO: refine from one-piece refs */ } /* ============================================================ 🎬 CINEMATIC / MOODY — PLACEHOLDER. Refine from references/themes/cinematic/. Inherits base for now. ============================================================ */ html[data-skin="cinematic"] { /* TODO: refine from cinematic refs */ } /* ============================================================ 🍃 STUDIO GHIBLI — PLACEHOLDER. Refine from references/themes/ghibli/. Inherits base for now. ============================================================ */ html[data-skin="ghibli"] { /* TODO: refine from ghibli refs */ } /* ============================================================ SWITCHER CONTROL — the little corner widget (shared) ------------------------------------------------------------ PARKED 2026-06-29 (Sami): the art-style switcher is hidden for now across ALL pages. Art styles are an end-game feature — Sami will reintroduce them much later via dedicated MidJourney-made styles, after every member's page is dialed in. The rotation mechanism + no-flash data-skin script stay intact (default skin still applies); only the visible widget is suppressed. To bring it back: delete the `display:none` rule directly below. ============================================================ */ .skin-switcher { display: none !important; } .skin-switcher { position: fixed; top: var(--space-md); right: var(--space-md); z-index: var(--z-switcher, 9998); display: flex; align-items: center; gap: 6px; background: var(--bg-glass); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-pill, 999px); padding: 5px 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.45); } .skin-switcher .ss-label { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 0 4px 0 2px; } .skin-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; position: relative; transition: transform var(--t-fast) ease, border-color var(--t-fast) ease; } .skin-dot:hover { transform: scale(1.18); } .skin-dot.active { border-color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.6); } /* dot swatches (kept distinct so the slots read as different styles to come) */ .skin-dot[data-skin="default"] { background: linear-gradient(135deg,#2ba3bd,#052a4c); } .skin-dot[data-skin="one-piece"] { background: linear-gradient(135deg,#36c5e0,#ffe27a); } .skin-dot[data-skin="cinematic"] { background: linear-gradient(135deg,#7fb4d6,#03080d); } .skin-dot[data-skin="ghibli"] { background: linear-gradient(135deg,#bfe6e0,#fff3d0); } /* the Auto / rotation toggle */ .skin-auto { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--border-muted); border-radius: var(--radius-pill,999px); background: var(--bg-inset); color: var(--text-secondary); padding: 3px 9px; transition: all var(--t-fast) ease; } .skin-auto:hover { color: var(--accent); border-color: var(--accent-muted); } .skin-auto.on { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); } .skin-tip { font-size: 0.62rem; color: var(--text-muted); max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width var(--t-slow) ease, opacity var(--t-slow) ease; opacity: 0; } .skin-switcher:hover .skin-tip { max-width: 240px; opacity: 1; } @media (max-width: 720px) { .skin-switcher .ss-label, .skin-tip { display: none; } .skin-switcher { top: auto; bottom: 84px; padding: 4px 6px; } } @media (prefers-reduced-motion: reduce) { html[data-skin] body, html[data-skin] body::before, html[data-skin] .sky-scene * { transition: none !important; } }