/* daughterer.com — multi-theme stylesheet * * Themes: arcade (default), unicorn, princess, space, forest * Theme is set on by theme.js * All theme-specific values live in CSS custom properties below. */ /* ============ RESET / BASE ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; padding: 1.5rem; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; } /* ============ THEME TOKENS ============ */ [data-theme="arcade"] { --bg: #0a0420; --surface: #1a0840; --text: #E0D8FF; --text-strong: #FFFFFF; --text-muted: #888888; --accent-1: #FF2BD8; --accent-2: #00F0FF; --accent-3: #FFEE00; --border: rgba(255, 43, 216, 0.35); --button-bg: #FF2BD8; --button-text: #FFFFFF; --button-border:#FFEE00; --badge-bg: #FF2BD8; --badge-text: #FFFFFF; --badge-border: #FFEE00; --font-body: 'Courier New', Courier, monospace; --font-display: Impact, 'Arial Black', sans-serif; --radius-card: 0; --radius-btn: 0; --letter-spacing: 1px; --enjoy-suffix: " ► PRESS START ◄"; --deco-char: "▪"; --deco-color: #FFEE00; --deco-size: 13px; } [data-theme="unicorn"] { --bg: #FFE9F3; --surface: #FFFFFF; --text: #4A2C7A; --text-strong: #4A2C7A; --text-muted: #9F7BC8; --accent-1: #FF6B9D; --accent-2: #C8A8E9; --accent-3: #FFD700; --border: #FF9EC7; --button-bg: #FF6B9D; --button-text: #FFFFFF; --button-border:#C8447A; --badge-bg: #FF9EC7; --badge-text: #FFFFFF; --badge-border: #C8A8E9; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: -apple-system, 'Segoe UI', sans-serif; --radius-card: 16px; --radius-btn: 12px; --letter-spacing: 0; --enjoy-suffix: " ✦ Let the magic begin ✦"; --deco-char: "✦"; --deco-color: #FFD700; --deco-size: 14px; } [data-theme="princess"] { --bg: #FFF5F0; --surface: #FFFFFF; --text: #5C2E91; --text-strong: #5C2E91; --text-muted: #B57FA0; --accent-1: #FFD700; --accent-2: #E91E63; --accent-3: #8B4789; --border: #FFD700; --button-bg: #FFD700; --button-text: #5C2E91; --button-border:#C9A800; --badge-bg: #FFD700; --badge-text: #5C2E91; --badge-border: #C9A800; --font-body: Georgia, 'Times New Roman', serif; --font-display: Georgia, serif; --radius-card: 8px; --radius-btn: 6px; --letter-spacing: 0; --enjoy-suffix: " ✦ Welcome to the kingdom ✦"; --deco-char: "✦"; --deco-color: #FFD700; --deco-size: 14px; } [data-theme="space"] { --bg: #0A0E2A; --surface: #131840; --text: #C5D4FF; --text-strong: #FFFFFF; --text-muted: #6B7BB8; --accent-1: #00D4FF; --accent-2: #8B5CF6; --accent-3: #FF6B9D; --border: rgba(0, 212, 255, 0.35); --button-bg: #00D4FF; --button-text: #0A0E2A; --button-border:#FF6B9D; --badge-bg: #00D4FF; --badge-text: #0A0E2A; --badge-border: #FF6B9D; --font-body: 'Courier New', Courier, monospace; --font-display: Impact, 'Arial Black', sans-serif; --radius-card: 0; --radius-btn: 0; --letter-spacing: 1px; --enjoy-suffix: " ▸ ENGAGE WARP DRIVE ◂"; --deco-char: "•"; --deco-color: #FFFFFF; --deco-size: 10px; } [data-theme="forest"] { --bg: #FAF3E0; --surface: #FFFFFF; --text: #2C5530; --text-strong: #1A3A1F; --text-muted: #6B4226; --accent-1: #4A7C2C; --accent-2: #D55A39; --accent-3: #D4A930; --border: #4A7C2C; --button-bg: #4A7C2C; --button-text: #FAF3E0; --button-border:#2C5530; --badge-bg: #4A7C2C; --badge-text: #FAF3E0; --badge-border: #2C5530; --font-body: Georgia, 'Palatino', serif; --font-display: Georgia, serif; --radius-card: 6px; --radius-btn: 4px; --letter-spacing: 0; --enjoy-suffix: " ~ Wander into the woods ~"; --deco-char: "❀"; --deco-color: #7A9D4A; --deco-size: 14px; } /* ============ LAYOUT ============ */ .page { max-width: 980px; margin: 0 auto; } /* ============ THEME PICKER ============ */ .theme-picker { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .picker-label { font-size: 11px; color: var(--text-muted); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; margin-right: 4px; font-family: 'Courier New', monospace; } .tdot { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.6); padding: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; touch-action: manipulation; } .tdot:hover { transform: scale(1.15); } .tdot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } .tdot-arcade { background: #1a0840; } .tdot-unicorn { background: #FF69B4; } .tdot-princess { background: #FFD700; } .tdot-space { background: #1B3A5C; } .tdot-forest { background: #4A7C2C; } [data-theme="arcade"] .tdot-arcade, [data-theme="unicorn"] .tdot-unicorn, [data-theme="princess"] .tdot-princess, [data-theme="space"] .tdot-space, [data-theme="forest"] .tdot-forest { box-shadow: 0 0 0 2px var(--accent-1); transform: scale(1.1); } /* ============ HERO ============ */ .hero { text-align: center; margin-bottom: 2.5rem; position: relative; padding: 1rem 0 0.5rem; } .deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .deco .d { position: absolute; font-size: var(--deco-size); color: var(--deco-color); line-height: 1; animation: deco-tw 3s ease-in-out infinite; user-select: none; } .deco .d::before { content: var(--deco-char); } .deco .d1 { top: 18px; left: 8%; animation-delay: 0s; } .deco .d2 { top: 50px; right: 12%; animation-delay: 0.6s; } .deco .d3 { top: 100px; left: 4%; animation-delay: 1.2s; } .deco .d4 { bottom: 30px; right: 6%; animation-delay: 1.8s; } .deco .d5 { bottom: 70px; left: 14%; animation-delay: 2.4s; } @keyframes deco-tw { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } /* ============ LOGOS ============ */ .logo-stack { position: relative; margin: 0 auto 1.5rem; max-width: 340px; height: 130px; } .logo { display: none; width: 100%; height: auto; max-width: 100%; } [data-theme="arcade"] .logo-arcade, [data-theme="unicorn"] .logo-unicorn, [data-theme="princess"] .logo-princess, [data-theme="space"] .logo-space, [data-theme="forest"] .logo-forest { display: block; } /* ============ WELCOME / ENJOY ============ */ .welcome { font-size: 16px; line-height: 1.7; max-width: 540px; margin: 0 auto 1rem; color: var(--text); } .welcome em { color: var(--text-muted); font-style: italic; } .badge { background: var(--badge-bg); color: var(--badge-text); border: 2px solid var(--badge-border); padding: 3px 12px; border-radius: var(--radius-btn); font-weight: 700; letter-spacing: var(--letter-spacing); display: inline-block; white-space: nowrap; font-family: var(--font-display); } [data-theme="arcade"] .badge, [data-theme="space"] .badge { text-transform: uppercase; } .enjoy { font-size: 16px; font-weight: 700; color: var(--accent-1); letter-spacing: var(--letter-spacing); margin: 0; } .enjoy::after { content: var(--enjoy-suffix); } [data-theme="arcade"] .enjoy, [data-theme="space"] .enjoy { text-transform: uppercase; color: var(--accent-3); } [data-theme="princess"] .enjoy, [data-theme="forest"] .enjoy { font-style: italic; color: var(--accent-2); } [data-theme="unicorn"] .enjoy { color: var(--accent-1); } /* ============ GAMES SECTION ============ */ .games-section { margin-bottom: 2.5rem; position: relative; } .games-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 12px; } .games-title { font-size: 22px; font-weight: 700; color: var(--text-strong); margin: 0; letter-spacing: var(--letter-spacing); font-family: var(--font-display); } [data-theme="arcade"] .games-title, [data-theme="space"] .games-title { text-transform: uppercase; color: var(--accent-2); font-size: 18px; } [data-theme="unicorn"] .games-title, [data-theme="princess"] .games-title, [data-theme="forest"] .games-title { color: var(--text-muted); } [data-theme="princess"] .games-title, [data-theme="forest"] .games-title { font-style: italic; } .games-count { background: var(--surface); color: var(--accent-3); font-size: 11px; padding: 4px 12px; border: 1.5px solid var(--accent-3); border-radius: var(--radius-btn); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-family: 'Courier New', monospace; white-space: nowrap; } [data-theme="unicorn"] .games-count { color: var(--accent-1); border-color: var(--accent-1); text-transform: none; font-family: var(--font-body); } [data-theme="princess"] .games-count { color: #8B6914; border-color: var(--accent-1); background: #FFFFFF; text-transform: none; font-family: 'Courier New', monospace; } [data-theme="forest"] .games-count { color: var(--text); border-color: var(--accent-1); background: var(--bg); } /* ============ GAME GRID ============ */ .games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .game-card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-card); padding: 12px; display: block; transition: transform 0.15s ease, border-color 0.15s ease; touch-action: manipulation; color: var(--text); } .game-card:hover { transform: translateY(-3px); } .game-card:active { transform: translateY(-1px) scale(0.98); } .game-card:nth-child(3n+1) { border-color: var(--accent-1); } .game-card:nth-child(3n+2) { border-color: var(--accent-2); } .game-card:nth-child(3n+3) { border-color: var(--accent-3); } .thumb { height: 140px; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: calc(var(--radius-card) - 4px); margin-bottom: 12px; } [data-theme="arcade"] .thumb, [data-theme="space"] .thumb { border-radius: 0; border: 1px solid var(--border); } .thumb.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; } [data-theme="unicorn"] .thumb.is-placeholder { background: #FFE9F3; } [data-theme="princess"] .thumb.is-placeholder { background: #FFF0F5; } [data-theme="forest"] .thumb.is-placeholder { background: #E8F0DA; } .placeholder-icon { width: 80px; height: 80px; } .placeholder-icon .ph-base { fill: var(--accent-1); } .placeholder-icon .ph-detail { fill: var(--surface); } .placeholder-icon .ph-accent-a{ fill: var(--accent-2); } .placeholder-icon .ph-accent-b{ fill: var(--accent-3); } .card-info { padding: 0 4px; } .game-title { font-size: 16px; font-weight: 700; color: var(--text-strong); margin: 0 0 12px; letter-spacing: var(--letter-spacing); } [data-theme="arcade"] .game-title, [data-theme="space"] .game-title { text-transform: uppercase; color: var(--accent-3); font-size: 14px; } [data-theme="princess"] .game-title, [data-theme="forest"] .game-title { color: var(--accent-3); } [data-theme="forest"] .game-title { color: var(--text-strong); } [data-theme="unicorn"] .game-title { color: var(--accent-1); } .play-btn { display: block; text-align: center; background: var(--button-bg); color: var(--button-text); border: 2px solid var(--button-border); border-radius: var(--radius-btn); padding: 10px 12px; font-weight: 700; font-size: 14px; letter-spacing: var(--letter-spacing); font-family: inherit; transition: filter 0.1s ease; } .game-card:hover .play-btn { filter: brightness(1.1); } [data-theme="arcade"] .play-btn, [data-theme="space"] .play-btn { text-transform: uppercase; font-size: 12px; } /* ============ EMPTY STATE ============ */ .empty { text-align: center; padding: 3rem 1rem; background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); } /* ============ FOOTER ============ */ footer { text-align: center; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-muted); letter-spacing: var(--letter-spacing); } [data-theme="arcade"] footer, [data-theme="space"] footer { text-transform: uppercase; } [data-theme="princess"] footer, [data-theme="forest"] footer { font-style: italic; } footer .heart { color: var(--accent-2); } [data-theme="arcade"] footer .heart, [data-theme="space"] footer .heart { color: var(--accent-1); } /* ============ RESPONSIVE ============ */ @media (max-width: 600px) { body { padding: 1rem 0.75rem; } .logo-stack { height: 110px; max-width: 300px; } .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .thumb { height: 110px; } .games-title { font-size: 18px; } .welcome { font-size: 14px; } .theme-picker { justify-content: center; flex-wrap: wrap; } .hero { padding: 0.5rem 0; } }