Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129/* tilde.style — homepage shell. Owns ONLY what's unique to this page: the gallery, the switcher chrome, and panel show/hide. Each style's own palette + components live in its own styles/{name}/style.css, loaded alongside this one (see index.html's <link> tags) — the browser cascades all four files together, same as one file would; nothing here needs to be copied into a style file, or vice versa, to add a new style. */
:root { /* Generic layout primitives, not part of any style's palette/identity — shared because they're the toolkit's own baseline rhythm, not because they need central coordination. A style is free to ignore these and set its own if it ever needs to. */ --measure: 68ch; --gap: clamp(1.5rem, 4vw, 3rem);
/* This shell's own neutral chrome (gallery backdrop, switcher bar) — deliberately NOT a style's palette (site.css must stay style-agnostic, see the header comment), just named instead of raw hex per `wiggle detect`'s G-07 check. */ --shell-dark: #0d0d0d; --shell-light: #fff; --shell-ink: #141210;}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html { font-size: 100%; scroll-behavior: smooth; background: var(--shell-dark); }@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }body { min-height: 100vh; }
/* ════════════════════════════════════════════════════════════════════ GALLERY — three live previews shown at once, before any interaction. The pitch in one glance: real palettes, real vocabulary, genuinely different identities. Clicking a card is the switcher. ════════════════════════════════════════════════════════════════════ */
#gallery { padding: clamp(2rem, 5vw, 3.5rem) 1.5rem; background: var(--shell-dark); text-align: center;}#gallery .gallery-lede { color: rgba(255,255,255,0.55); font: 0.9375rem/1.5 -apple-system, system-ui, sans-serif; max-width: 52ch; margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);}#gallery .gallery-strip { display: grid; grid-template-columns: repeat(3, minmax(200px, 280px)); gap: 1rem; justify-content: center; max-width: 960px; margin: 0 auto;}@media (max-width: 720px) { #gallery .gallery-strip { grid-template-columns: 1fr; max-width: 340px; }}
.gallery-card { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; border-radius: 10px; padding: 1.4rem 1.4rem 1.2rem; text-align: left; border: 2px solid transparent; transition: transform 200ms ease, border-color 200ms ease;}.gallery-card:hover { transform: translateY(-3px); }.gallery-card:focus-visible { outline: 2px solid var(--shell-light); outline-offset: 3px; }.gallery-card.active { border-color: rgba(255,255,255,0.55); }@media (prefers-reduced-motion: reduce) { .gallery-card { transition: none; } .gallery-card:hover { transform: none; } }
.gallery-card .gc-name { font-size: 1.3rem; line-height: 1.15; }.gallery-card .gc-tagline { font-size: 0.8125rem; line-height: 1.4; opacity: 0.9; }.gallery-card .gc-chip { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 0.6875rem; padding: 0.25em 0.65em; border-radius: 999px; margin-top: 0.2rem;}
.gallery-card .gc-photos { display: flex; gap: 0.4rem; margin-top: 0.2rem;}.gallery-card .gc-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 5px; border: 1px solid rgba(255,255,255,0.18); filter: saturate(0.9);}
/* Per-style gallery-card colors live in each style's own style.css (.gallery-card[data-theme="…"] rules) — this shell only defines the shape every style's card rule fills in. */
/* ── Style switcher (below the gallery, controls the full page) ───────── */
#style-switcher { position: sticky; top: 0; z-index: 50; display: flex; justify-content: center; gap: 0.4rem; background: rgba(13,13,13,0.92); backdrop-filter: blur(6px); padding: 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.1);}#style-switcher button { font: 0.8125rem/1 system-ui, sans-serif; padding: 0.5em 1em; border: none; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.6); cursor: pointer; transition: background 200ms ease, color 200ms ease;}#style-switcher button:hover { color: var(--shell-light); }#style-switcher button.active { background: var(--shell-light); color: var(--shell-ink); font-weight: 600; }#style-switcher button:focus-visible { outline: 2px solid var(--shell-light); outline-offset: 2px; }
.theme-panel { display: none; }.theme-panel.active { display: block; }