/* ------------------------------------------------------------------ * skins.css — swappable visual themes ("skins"). * Each skin overrides a set of design tokens consumed by base.css. * Switch by setting data-skin="..." on . * ------------------------------------------------------------------ */ :root { --maxw: 1240px; --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); --head-transform: none; /* skins may override to uppercase (Roman caps) */ } /* ---------- 1. ATELIER — clean white modern gallery (default) ---------- */ [data-skin="atelier"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f4f1; --text: #1a1a1a; --text-muted: #76726c; --border: #e7e4df; --accent: #1a1a1a; --accent-soft: #f0eee9; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 4px; --radius-lg: 6px; --frame-pad: 0px; --frame-bg: transparent; --frame-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); --head-tracking: -0.01em; --head-weight: 600; --hero-tracking: -0.03em; --nav-transform: none; --nav-tracking: 0.01em; --pill-radius: 999px; } /* ---------- 2. NOIR — dark dramatic museum, spotlit works ---------- */ [data-skin="noir"] { --bg: #0c0c0e; --surface: #161618; --surface-2: #1f1f23; --text: #f3f1ec; --text-muted: #9a978f; --border: #2a2a2f; --accent: #c8a04a; --accent-soft: #221d12; --on-accent: #0c0c0e; --shadow: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5); --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 2px; --radius-lg: 4px; --frame-pad: 14px; --frame-bg: #0a0a0b; --frame-shadow: 0 0 0 1px #2a2a2f, 0 30px 60px rgba(0, 0, 0, 0.8); --head-tracking: 0.04em; --head-weight: 500; --hero-tracking: 0.02em; --nav-transform: uppercase; --nav-tracking: 0.18em; --pill-radius: 2px; } /* ---------- 3. BAUHAUS — bold primaries, geometric, playful ---------- */ [data-skin="bauhaus"] { --bg: #f4f1ea; --surface: #ffffff; --surface-2: #ebe7dd; --text: #16161d; --text-muted: #5d5a52; --border: #16161d; --accent: #e63946; --accent-soft: #ffe8ea; --on-accent: #ffffff; --shadow: 6px 6px 0 #16161d; --shadow-sm: 3px 3px 0 #16161d; --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 0px; --radius-lg: 0px; --frame-pad: 0px; --frame-bg: transparent; --frame-shadow: 6px 6px 0 #16161d; --head-tracking: -0.02em; --head-weight: 800; --hero-tracking: -0.04em; --nav-transform: uppercase; --nav-tracking: 0.06em; --pill-radius: 0px; } /* ---------- 4. VELLUM — vintage classic, warm parchment, serif ---------- */ [data-skin="vellum"] { --bg: #efe7d6; --surface: #f8f2e4; --surface-2: #e7dcc4; --text: #3a2d1c; --text-muted: #8a7656; --border: #d8c8a8; --accent: #7d4a2b; --accent-soft: #ece0c8; --on-accent: #f8f2e4; --shadow: 0 2px 6px rgba(80, 56, 24, 0.12), 0 16px 36px rgba(80, 56, 24, 0.14); --shadow-sm: 0 2px 6px rgba(80, 56, 24, 0.14); --font-head: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; --radius: 3px; --radius-lg: 5px; --frame-pad: 18px; --frame-bg: linear-gradient(135deg, #b08542, #8a6630 40%, #c79a52 70%, #8a6630); --frame-shadow: 0 18px 40px rgba(80, 56, 24, 0.35); --head-tracking: 0.005em; --head-weight: 600; --hero-tracking: 0em; --nav-transform: none; --nav-tracking: 0.04em; --pill-radius: 999px; } /* ---------- 5. NEON — modern dark with vivid gradients ---------- */ [data-skin="neon"] { --bg: #0a0613; --surface: #140d24; --surface-2: #1d1336; --text: #f4ecff; --text-muted: #a99cc9; --border: #2c2050; --accent: #f72585; --accent-soft: #2a1030; --on-accent: #ffffff; --shadow: 0 0 0 1px rgba(247, 37, 133, 0.15), 0 24px 60px rgba(114, 9, 183, 0.35); --shadow-sm: 0 8px 24px rgba(114, 9, 183, 0.3); --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 14px; --radius-lg: 22px; --frame-pad: 0px; --frame-bg: transparent; --frame-shadow: 0 0 30px rgba(247, 37, 133, 0.35), 0 20px 50px rgba(76, 201, 240, 0.18); --head-tracking: -0.01em; --head-weight: 700; --hero-tracking: -0.03em; --nav-transform: uppercase; --nav-tracking: 0.12em; --pill-radius: 999px; --neon-grad: linear-gradient(90deg, #f72585, #7209b7, #4cc9f0); } /* ---------- 6. SWISS — International Typographic, museum signage ---------- */ [data-skin="swiss"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f2f2f0; --text: #0a0a0a; --text-muted: #6b6b6b; --border: #0a0a0a; --accent: #dc2626; --accent-soft: #fdeaea; --on-accent: #ffffff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 0px; --radius-lg: 0px; --frame-pad: 0px; --frame-bg: transparent; --frame-shadow: 0 0 0 1px #0a0a0a, 0 16px 36px rgba(0, 0, 0, 0.12); --head-tracking: -0.04em; --head-weight: 800; --hero-tracking: -0.05em; --nav-transform: uppercase; --nav-tracking: 0.2em; --pill-radius: 0px; --head-transform: none; } /* ---------- 7. NORDIC — Scandinavian hygge, dusty blue, soft rounding ---------- */ [data-skin="nordic"] { --bg: #eceae4; --surface: #ffffff; --surface-2: #f1efe9; --text: #2e2e2e; --text-muted: #8a857a; --border: #e0ddd5; --accent: #5b7a99; --accent-soft: #dde4ea; --on-accent: #ffffff; --shadow: 0 2px 8px rgba(60, 55, 45, 0.06), 0 18px 40px rgba(60, 55, 45, 0.09); --shadow-sm: 0 1px 4px rgba(60, 55, 45, 0.07); --font-head: "Helvetica Neue", Arial, sans-serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 12px; --radius-lg: 18px; --frame-pad: 0px; --frame-bg: transparent; --frame-shadow: 0 14px 32px rgba(60, 55, 45, 0.13); --head-tracking: -0.02em; --head-weight: 600; --hero-tracking: -0.02em; --nav-transform: none; --nav-tracking: 0.02em; --pill-radius: 12px; --head-transform: none; } /* ---------- 8. MARBLE — classical antiquity, terracotta on parchment ---------- */ [data-skin="marble"] { --bg: #e3dac4; --surface: #f4efe4; --surface-2: #ece4d0; --text: #3a352c; --text-muted: #7c7256; --border: #c9bb95; --accent: #b5532e; --accent-soft: #f0e2cf; --on-accent: #f4efe4; --shadow: 0 2px 8px rgba(120, 100, 60, 0.12), 0 18px 40px rgba(120, 100, 60, 0.16); --shadow-sm: 0 2px 8px rgba(120, 100, 60, 0.14); --font-head: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; --radius: 0px; --radius-lg: 2px; --frame-pad: 13px; --frame-bg: linear-gradient(135deg, #cabf9f, #a89a72 50%, #cabf9f); --frame-shadow: 0 0 0 2px #3a352c, 0 18px 42px rgba(120, 100, 60, 0.32); --head-tracking: 0.14em; --head-weight: 600; --hero-tracking: 0.05em; --nav-transform: uppercase; --nav-tracking: 0.22em; --pill-radius: 0px; --head-transform: uppercase; } /* ---------- 9. DECO — Art Deco glamour, gold on midnight navy ---------- */ [data-skin="deco"] { --bg: #0f1a2e; --surface: #0a1220; --surface-2: #13203a; --text: #e6d4a3; --text-muted: #b3a06e; --border: rgba(201, 169, 97, 0.45); --accent: #c9a961; --accent-soft: rgba(201, 169, 97, 0.12); --on-accent: #0f1a2e; --shadow: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.5); --font-head: Georgia, "Times New Roman", serif; --font-body: "Helvetica Neue", Arial, sans-serif; --radius: 0px; --radius-lg: 2px; --frame-pad: 11px; --frame-bg: linear-gradient(135deg, #d4b876, #a8893d 50%, #d4b876); --frame-shadow: 0 0 0 1px rgba(201, 169, 97, 0.55), 0 26px 54px rgba(0, 0, 0, 0.7); --head-tracking: 0.2em; --head-weight: 700; --hero-tracking: 0.12em; --nav-transform: uppercase; --nav-tracking: 0.25em; --pill-radius: 0px; --head-transform: uppercase; } [data-skin="deco"] h1, [data-skin="deco"] h2 { font-family: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.06em; } [data-skin="deco"] .hero h1, [data-skin="deco"] .artist-hero-text h1 { font-size: clamp(2rem, 4.4vw, 3.45rem); letter-spacing: 0.035em; line-height: 1.05; } [data-skin="deco"] .section-head h2 { font-size: clamp(1.35rem, 2.35vw, 1.85rem); } /* ---------- 10. ATHENAEUM — Dark Academia, candlelit, oxblood & aged gold ---------- */ [data-skin="athenaeum"] { --bg: #241c14; --surface: #2e2419; --surface-2: #251d14; --text: #cdb892; --text-muted: #9c7a3e; --border: #5a4a36; --accent: #9d3b4d; --accent-soft: rgba(107, 39, 55, 0.25); --on-accent: #e8dcc4; --shadow: 0 24px 52px rgba(0, 0, 0, 0.62); --shadow-sm: 0 2px 14px rgba(0, 0, 0, 0.5); --font-head: Georgia, "Times New Roman", serif; --font-body: Georgia, "Times New Roman", serif; --radius: 2px; --radius-lg: 3px; --frame-pad: 14px; --frame-bg: linear-gradient(135deg, #5a4636, #36291d 50%, #5a4636); --frame-shadow: 0 0 0 1px #5a4a36, 0 28px 56px rgba(0, 0, 0, 0.75); --head-tracking: 0.06em; --head-weight: 600; --hero-tracking: 0.02em; --nav-transform: uppercase; --nav-tracking: 0.2em; --pill-radius: 2px; --head-transform: uppercase; }