/* ========================================================= Base (theme-agnostic) styles Themes override CSS custom properties + .theme-decor visuals ========================================================= */ :root { --bg: #faf7f2; --surface: #ffffff; --text: #1c1c1c; --muted: #6a6a6a; --accent: #d6336c; --accent-2: #ffb703; --border: rgba(0, 0, 0, 0.1); --radius: 14px; --shadow: 0 6px 24px rgba(0, 0, 0, 0.08); --font-display: 'Georgia', serif; --font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font-body); line-height: 1.5; min-height: 100%; } /* The themed backdrop lives on ; is always transparent so theme decorations (.theme-decor + html backgrounds) shine through. */ html { background: var(--bg); } body { background: transparent; } body { position: relative; overflow-x: hidden; padding: 2rem 1rem 6rem; max-width: 880px; margin: 0 auto; } a { color: var(--accent); } a:hover { opacity: 0.85; } h1, h2 { font-family: var(--font-display); letter-spacing: 0.01em; margin: 0 0 0.5rem; } .muted { color: var(--muted); } .small { font-size: 0.9rem; } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 3rem 1rem 2rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; } .title { font-size: clamp(2.5rem, 7vw, 4.5rem); margin: 0; color: var(--accent); line-height: 1.05; } .title .lastname { color: var(--text); } .subtitle { font-size: 1.2rem; margin: 1rem 0 0.5rem; } .subtitle .parent { font-weight: 600; } .subtitle .amp { color: var(--accent-2); margin: 0 0.25em; font-style: italic; } .due { font-family: var(--font-display); font-size: 1.1rem; margin: 0.25rem 0 1.5rem; } /* ---------- Countdown (single weeks cell) ---------- */ .countdown { display: flex; justify-content: center; margin-top: 1rem; } .cd-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 2.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; } .cd-num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; } .cd-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-top: 0.4rem; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.5rem; margin: 1.25rem 0; box-shadow: var(--shadow); } .card h2 { font-size: 1.6rem; color: var(--accent); margin-bottom: 1rem; } .details { display: grid; grid-template-columns: 90px 1fr; gap: 0.5rem 1rem; margin: 0; } .details dt { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.12em; padding-top: 0.25rem; } .details dd { margin: 0; } /* ---------- Registry ---------- */ .registry-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; } .btn { display: inline-block; padding: 0.6rem 1rem; background: var(--accent); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; border: 2px solid transparent; transition: transform 0.1s ease; } .btn:hover { transform: translateY(-1px); opacity: 1; } .embed-toggle { margin-top: 1rem; } .embed-toggle summary { cursor: pointer; padding: 0.5rem 0; font-weight: 600; color: var(--accent); } .embed-wrap { margin-top: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; } .embed-wrap iframe { width: 100%; height: 600px; border: 0; display: block; } /* ---------- Footer ---------- */ footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; text-align: center; padding: 0.65rem 1rem; background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--border); backdrop-filter: blur(6px); } footer p { margin: 0; color: var(--text); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.15rem 0.35rem; line-height: 1.35; } footer a { margin: 0; white-space: nowrap; } /* ---------- Decorative layer ---------- */ .theme-decor { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .decor { position: absolute; opacity: 0.85; } /* Chibi character art — hidden by default, individual themes opt in */ .chibi-naruto { display: none; } /* ========================================================= THEME 1 — Gohan (Dragon Ball) Orange/red, energy aura, 4-star ball motif ========================================================= */ html[data-theme="gohan"] { --bg: #fff4d6; --surface: #fffdf5; --text: #2a1a05; --muted: #8a5a1a; --accent: #e8541c; /* gi orange */ --accent-2: #d72631; /* logo red */ --border: rgba(232, 84, 28, 0.25); --shadow: 0 8px 28px rgba(232, 84, 28, 0.18); --font-display: 'Bangers', 'Impact', system-ui, sans-serif; --font-body: system-ui, sans-serif; background: radial-gradient(circle at 20% 10%, #ffd166 0, transparent 40%), radial-gradient(circle at 80% 90%, #ffba08 0, transparent 45%), var(--bg); } html[data-theme="gohan"] .title { text-shadow: 3px 3px 0 #d72631; letter-spacing: 0.04em; } /* 4-star dragon ball — shared by Gohan (decor-1) and Piccolo (decor-2) */ html[data-theme="gohan"] .decor-1, html[data-theme="piccolo"] .decor-2 { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff7c2 0, #ffba08 40%, #e8541c 100%); box-shadow: 0 0 60px rgba(232, 84, 28, 0.6), inset -10px -15px 30px rgba(120, 30, 0, 0.4); } html[data-theme="gohan"] .decor-1::before, html[data-theme="gohan"] .decor-1::after, html[data-theme="piccolo"] .decor-2::before, html[data-theme="piccolo"] .decor-2::after { content: '\2605'; position: absolute; color: #c0181e; font-size: 1.6rem; } html[data-theme="gohan"] .decor-1::before, html[data-theme="piccolo"] .decor-2::before { top: 30%; left: 30%; } html[data-theme="gohan"] .decor-1::after, html[data-theme="piccolo"] .decor-2::after { bottom: 30%; right: 30%; } html[data-theme="gohan"] .decor-1 { /* 4-star dragon ball */ top: 5%; right: 4%; width: 140px; height: 140px; } html[data-theme="gohan"] .decor-2 { bottom: -60px; left: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,186,8,0.5), transparent 70%); filter: blur(8px); } /* ========================================================= THEME 2 — Naruto (anime sleeping-night vibe) Dusk gradient sky, twinkling stars, warm crescent moon, chibi sleeping "Z"s, Hidden-Leaf swirl watermark. ========================================================= */ html[data-theme="naruto"] { --bg: #1a1640; --surface: #fff7e8; /* warm cream cards */ --text: #1a1640; --muted: #6a5a8a; --accent: #ff8a3d; /* jumpsuit orange, slightly softer */ --accent-2: #ffd166; /* moon-glow yellow */ --border: rgba(255, 138, 61, 0.35); --shadow: 0 10px 30px rgba(10, 5, 40, 0.45); --font-display: 'Bangers', 'Impact', system-ui, sans-serif; --font-body: 'Yusei Magic', 'Trebuchet MS', system-ui, sans-serif; /* Dusk sky: deep indigo at top → warm peach at horizon */ background: radial-gradient(ellipse at 50% 110%, #ffb27a 0%, transparent 55%), linear-gradient(180deg, #0d0a2e 0%, #1a1640 35%, #4a2a6a 70%, #ff7a4a 100%); background-attachment: fixed; min-height: 100vh; } html[data-theme="naruto"] body { color: #fff7e8; } html[data-theme="naruto"] .eyebrow { color: #ffe29a; text-shadow: 0 1px 8px rgba(0,0,0,0.45); } html[data-theme="naruto"] .due { color: #fff7e8; text-shadow: 0 1px 10px rgba(0,0,0,0.45); } html[data-theme="naruto"] .subtitle { color: #fff7e8; text-shadow: 0 1px 10px rgba(0,0,0,0.45); } html[data-theme="naruto"] a { color: var(--accent-2); } html[data-theme="naruto"] .btn { color: #1a1640; } /* Anime-style title: thick orange fill with navy stroke + warm glow */ html[data-theme="naruto"] .title { color: var(--accent); font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 0.06em; -webkit-text-stroke: 2px #1a1640; text-shadow: 0 3px 0 #1a1640, 0 0 24px rgba(255, 209, 102, 0.55), 0 0 60px rgba(255, 138, 61, 0.35); } html[data-theme="naruto"] .title .baby { color: var(--accent-2); } html[data-theme="naruto"] .title .lastname { color: #ffe7bd; } /* Cards: warm cream with a soft orange edge-glow so they feel like lit paper lanterns against the night sky */ html[data-theme="naruto"] .card { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(255, 247, 232, 0.06), 0 12px 40px rgba(255, 138, 61, 0.25), 0 4px 14px rgba(0, 0, 0, 0.45); border-radius: 18px; } html[data-theme="naruto"] .card h2 { color: var(--accent); } html[data-theme="naruto"] .card, html[data-theme="naruto"] .cd-cell { color: #1a1640; } /* Countdown cells like little lanterns */ html[data-theme="naruto"] .cd-cell { background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 0 18px rgba(255, 209, 102, 0.35); } html[data-theme="naruto"] .cd-num { color: var(--accent); font-family: 'Bangers', sans-serif; } /* ---------- Decorative night sky ---------- */ /* Star field via stacked box-shadows on a single 2x2 dot. Each "star" is one shadow; cheap, no extra DOM. */ html[data-theme="naruto"] .theme-decor::before { content: ''; position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; box-shadow: 40px 60px 0 0.5px #fff7e8, 140px 30px 0 0.5px #fff7e8, 220px 110px 0 0.5px #ffd166, 300px 50px 0 0.5px #fff7e8, 380px 140px 0 0.5px #fff7e8, 460px 80px 0 0.5px #ffd166, 540px 20px 0 0.5px #fff7e8, 620px 120px 0 0.5px #fff7e8, 700px 60px 0 0.5px #ffd166, 780px 160px 0 0.5px #fff7e8, 860px 40px 0 0.5px #fff7e8, 940px 100px 0 0.5px #fff7e8, 90px 200px 0 0.5px #fff7e8, 260px 240px 0 0.5px #ffd166, 430px 210px 0 0.5px #fff7e8, 610px 260px 0 0.5px #fff7e8, 810px 220px 0 0.5px #ffd166, 120px 320px 0 0.5px #fff7e8, 340px 360px 0 0.5px #fff7e8, 560px 330px 0 0.5px #ffd166, 760px 380px 0 0.5px #fff7e8, 900px 300px 0 0.5px #fff7e8, 50px 440px 0 0.5px #fff7e8, 220px 480px 0 0.5px #ffd166, 400px 460px 0 0.5px #fff7e8, 580px 510px 0 0.5px #fff7e8, 740px 470px 0 0.5px #ffd166, 880px 540px 0 0.5px #fff7e8, 160px 600px 0 0.5px #fff7e8, 330px 640px 0 0.5px #ffd166, 500px 610px 0 0.5px #fff7e8, 680px 660px 0 0.5px #fff7e8, 850px 620px 0 0.5px #fff7e8; animation: twinkle 3.5s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.35; } } /* Crescent moon top-right with soft warm halo */ html[data-theme="naruto"] .decor-1 { top: 6%; right: 6%; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff7e8 0%, #ffd166 60%, #ffb347 100%); box-shadow: 0 0 40px rgba(255, 209, 102, 0.55), 0 0 90px rgba(255, 138, 61, 0.35), inset -18px -10px 0 0 #1a1640; /* carves the crescent */ animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Sleepy "Z z z" drifting up & to the right of the chibi's head */ html[data-theme="naruto"] .decor-2 { top: 70px; left: 220px; font-family: 'Bangers', 'Impact', sans-serif; font-size: 2.6rem; line-height: 1; color: #fff7e8; text-shadow: 0 0 12px rgba(255, 209, 102, 0.6); letter-spacing: 0.18em; animation: drift 5s ease-in-out infinite; } html[data-theme="naruto"] .decor-2::after { content: 'Z z z'; } @keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(-4deg); opacity: 0.9; } 50% { transform: translate(8px,-12px) rotate(4deg); opacity: 0.55; } } /* Hidden-Leaf swirl watermark, slowly rotating, very low opacity */ html[data-theme="naruto"] .decor-3 { bottom: -80px; left: -60px; width: 320px; height: 320px; border-radius: 50%; background: conic-gradient(from 0deg, #ff8a3d 0%, #ff8a3d 22%, transparent 22% 50%, #ff8a3d 50% 72%, transparent 72% 100%); mask: radial-gradient(circle, transparent 16%, #000 17%, #000 72%, transparent 73%); -webkit-mask: radial-gradient(circle, transparent 16%, #000 17%, #000 72%, transparent 73%); opacity: 0.18; animation: spin 60s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* A few drifting clouds across the sky */ html[data-theme="naruto"] .decor-4 { top: 28%; left: -120px; width: 180px; height: 36px; background: rgba(255, 247, 232, 0.18); border-radius: 999px; box-shadow: 50px -14px 0 -6px rgba(255, 247, 232, 0.18), -40px -10px 0 -8px rgba(255, 247, 232, 0.18), 420px 180px 0 -4px rgba(255, 247, 232, 0.14), 470px 168px 0 -10px rgba(255, 247, 232, 0.14); filter: blur(0.5px); animation: cloud-drift 40s linear infinite; } @keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(120vw); } } /* Chibi sleeping Naruto, top-left of the viewport (mirrors the moon), gently breathing */ html[data-theme="naruto"] .chibi-naruto { display: block; position: absolute; top: 6%; left: 4%; width: 200px; height: 218px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 24px rgba(255, 209, 102, 0.35)); transform-origin: 50% 100%; animation: chibi-breathe 4s ease-in-out infinite; } html[data-theme="naruto"] .chibi-naruto svg { width: 100%; height: 100%; display: block; } @keyframes chibi-breathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-2px); } } /* On small screens shrink the chibi so it doesn't crowd the hero */ @media (max-width: 600px) { html[data-theme="naruto"] .chibi-naruto { width: 110px; height: 120px; left: 8px; top: 8px; } html[data-theme="naruto"] .decor-2 { top: 30px; left: 125px; font-size: 1.6rem; } } /* ========================================================= THEME 3 — Rigatoni (simple pasta restaurant) Cream backdrop, red-check accents, scattered pasta motifs. ========================================================= */ html[data-theme="rigatoni"] { --bg: #fffaf0; --surface: #fffdf5; --text: #2a1a0a; --muted: #6b5a3a; --accent: #a8201a; --accent-2: #3f6a1f; --border: rgba(168, 32, 26, 0.25); --shadow: 0 8px 24px rgba(168, 32, 26, 0.12); --font-display: 'Georgia', 'Playfair Display', serif; --font-body: 'Georgia', serif; } html[data-theme="rigatoni"] .card { border: 2px solid var(--accent-2); } html[data-theme="rigatoni"] .title { font-style: italic; } /* Checkered tablecloth bands */ html[data-theme="rigatoni"] .theme-decor::before, html[data-theme="rigatoni"] .theme-decor::after { content: ''; position: absolute; left: 0; right: 0; height: 28px; background: repeating-conic-gradient(#a8201a 0% 25%, #fffdf5 0% 50%) 0 0 / 28px 28px; opacity: 0.88; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); } html[data-theme="rigatoni"] .theme-decor::before { top: 0; } html[data-theme="rigatoni"] .theme-decor::after { bottom: 0; } html[data-theme="rigatoni"] body { padding-top: 3rem; padding-bottom: 5rem; } /* main pasta hero */ html[data-theme="rigatoni"] .decor-1 { top: 6%; right: 4%; width: 150px; height: 150px; background: url('rigatoni.png') center / contain no-repeat; } /* basil accent */ html[data-theme="rigatoni"] .decor-2 { bottom: 5%; left: 4%; font-size: 76px; line-height: 1; } html[data-theme="rigatoni"] .decor-2::after { content: '🌿'; } /* remove extra scattered motifs */ html[data-theme="rigatoni"] .decor-3, html[data-theme="rigatoni"] .decor-4 { display: none; } /* ========================================================= THEME 4 — Luigi (Mario & Luigi) Sky blue, red & green, blocky pixel feel, coins & bricks ========================================================= */ html[data-theme="luigi"] { --bg: #5c94fc; /* SMB sky */ --surface: #fffbe6; --text: #1a1a1a; --muted: #4a4a4a; --accent: #e52521; /* Mario red */ --accent-2: #43b047; /* Luigi green */ --border: rgba(0, 0, 0, 0.25); --shadow: 4px 4px 0 #000; --font-display: 'Courier New', monospace; --font-body: system-ui, sans-serif; background: linear-gradient(to bottom, #5c94fc 0%, #5c94fc 75%, #c84c0c 75%, #c84c0c 100%); background-attachment: fixed; } html[data-theme="luigi"] .card { border: 3px solid #000; box-shadow: 6px 6px 0 #000; border-radius: 6px; } html[data-theme="luigi"] .cd-cell { border: 3px solid #000; border-radius: 4px; box-shadow: 3px 3px 0 #000; background: #fbd000; /* ? block */ } html[data-theme="luigi"] .cd-num { color: #000; } html[data-theme="luigi"] .btn { border: 3px solid #000; border-radius: 6px; box-shadow: 3px 3px 0 #000; } html[data-theme="luigi"] .title { color: var(--accent); -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; letter-spacing: 0.02em; } html[data-theme="luigi"] .title .lastname { color: var(--accent-2); } html[data-theme="luigi"] .decor-1 { /* ? block top-right */ top: 3%; right: 4%; width: 80px; height: 80px; background: #fbd000; border: 4px solid #000; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Courier New', monospace; font-size: 3rem; font-weight: 900; color: #000; box-shadow: inset -8px -8px 0 rgba(0,0,0,0.25); } html[data-theme="luigi"] .decor-1::after { content: '?'; } html[data-theme="luigi"] .decor-2 { /* Pipe emerging above the ground line */ bottom: calc(25vh - 72px); left: 5%; width: 88px; height: 126px; background: linear-gradient(to right, #2aa636 0%, #43b047 30%, #b6e5b0 50%, #43b047 70%, #2aa636 100%); border: 4px solid #000; border-bottom: none; border-radius: 4px 4px 0 0; } html[data-theme="luigi"] .decor-2::before { content: ''; position: absolute; left: -22px; top: -26px; width: 124px; height: 26px; background: linear-gradient(to right, #2aa636 0%, #43b047 32%, #b6e5b0 50%, #43b047 68%, #2aa636 100%); border: 4px solid #000; border-radius: 6px; box-shadow: inset -8px -6px 0 rgba(0, 0, 0, 0.2); } html[data-theme="luigi"] .decor-3 { /* Cloud */ top: 18%; left: 4%; width: 90px; height: 36px; background: #fff; border-radius: 999px; box-shadow: 25px -10px 0 -4px #fff, -22px -8px 0 -6px #fff; } /* ========================================================= THEME 5 — Piccolo (Dragon Ball Z / Planet Namek) Rebuilt with namek.png + piccolo.png, no chibi character. ========================================================= */ html[data-theme="piccolo"] { --bg: #5da971; --surface: #f4efdb; --text: #122217; --muted: #3f5f49; --accent: #5d3b8e; --accent-2: #2d8c4e; --border: rgba(93, 59, 142, 0.28); --shadow: 0 14px 36px rgba(12, 42, 21, 0.45); --font-display: 'Bangers', 'Impact', system-ui, sans-serif; --font-body: system-ui, sans-serif; background: linear-gradient(180deg, rgba(14, 42, 24, 0.28) 0%, rgba(14, 42, 24, 0.46) 100%), radial-gradient(ellipse at 50% 100%, rgba(255, 226, 168, 0.28) 0%, transparent 52%), url('namek.png'); background-size: 100% 100%, 100% 100%, cover; background-position: center, center, center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } html[data-theme="piccolo"] body { color: #eef7ef; } html[data-theme="piccolo"] .eyebrow { color: #d8f6dc; text-shadow: 0 1px 8px rgba(0,0,0,0.45); } html[data-theme="piccolo"] .due, html[data-theme="piccolo"] .subtitle { color: #f2f8ef; text-shadow: 0 1px 10px rgba(0,0,0,0.45); } html[data-theme="piccolo"] a { color: #cdb9ff; } html[data-theme="piccolo"] .btn { color: #f4efdb; } html[data-theme="piccolo"] .title { color: var(--accent); font-family: 'Bangers', 'Impact', sans-serif; letter-spacing: 0.06em; -webkit-text-stroke: 2px #0e1b12; text-shadow: 0 3px 0 #0e1b12, 0 0 24px rgba(205, 185, 255, 0.42); } html[data-theme="piccolo"] .title .baby { color: var(--accent-2); } html[data-theme="piccolo"] .title .lastname { color: #d8c8ff; } html[data-theme="piccolo"] .card { background: linear-gradient(180deg, rgba(244, 239, 219, 0.96) 0%, rgba(234, 226, 201, 0.96) 100%); border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(244, 239, 219, 0.10), 0 12px 40px rgba(45, 140, 78, 0.34), 0 5px 16px rgba(8, 22, 12, 0.45); border-radius: 18px; } html[data-theme="piccolo"] .card h2 { color: var(--accent); } html[data-theme="piccolo"] .card, html[data-theme="piccolo"] .cd-cell { color: #122217; } html[data-theme="piccolo"] .cd-cell { background: rgba(244, 239, 219, 0.97); border: 2px solid var(--accent); box-shadow: 0 0 18px rgba(45, 140, 78, 0.45); } html[data-theme="piccolo"] .cd-num { color: var(--accent); font-family: 'Bangers', sans-serif; } /* subtle sky motes */ html[data-theme="piccolo"] .theme-decor::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 14% 22%, rgba(220, 255, 220, 0.35) 0 2px, transparent 3px), radial-gradient(circle at 32% 14%, rgba(205, 185, 255, 0.30) 0 2px, transparent 3px), radial-gradient(circle at 58% 28%, rgba(220, 255, 220, 0.28) 0 2px, transparent 3px), radial-gradient(circle at 76% 20%, rgba(205, 185, 255, 0.30) 0 2px, transparent 3px), radial-gradient(circle at 24% 64%, rgba(220, 255, 220, 0.25) 0 2px, transparent 3px), radial-gradient(circle at 66% 70%, rgba(220, 255, 220, 0.22) 0 2px, transparent 3px); } /* hero Piccolo art (replaces chibi) */ html[data-theme="piccolo"] .decor-1 { top: 5%; left: 3%; width: min(28vw, 280px); aspect-ratio: 1 / 1; background: url('piccolo.png') center / contain no-repeat; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45)); animation: float 6s ease-in-out infinite; } /* dragon ball accent aligned with gohan theme */ html[data-theme="piccolo"] .decor-2 { top: 5%; right: 4%; width: 140px; height: 140px; } html[data-theme="piccolo"] .decor-3 { bottom: -90px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(45,140,78,0.25) 0%, rgba(45,140,78,0.08) 55%, transparent 72%); filter: blur(1px); } html[data-theme="piccolo"] .decor-4 { display: none; } @media (max-width: 700px) { html[data-theme="piccolo"] .decor-1 { width: min(36vw, 180px); left: 8px; top: 8px; } } /* ========================================================= THEME 6 — Buko (coconut tile) Palette sampled from coconut_tiling.jpeg + tiled background image. ========================================================= */ html[data-theme="buko"] { --bg: #dbe6de; /* tile base mint */ --surface: #f8f6ef; /* coconut flesh */ --text: #2d382d; --muted: #617061; --accent: #4f9620; /* palm green */ --accent-2: #b7966f; /* coconut shell */ --border: rgba(79, 150, 32, 0.30); --shadow: 0 10px 28px rgba(58, 92, 34, 0.24); --font-display: 'Yusei Magic', 'Trebuchet MS', system-ui, sans-serif; --font-body: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: linear-gradient(rgba(219, 230, 222, 0.70), rgba(219, 230, 222, 0.70)), url('coconut_tiling.jpeg'); background-repeat: repeat; background-size: 340px auto; background-attachment: fixed; min-height: 100vh; } html[data-theme="buko"] .eyebrow { color: #4f9620; } html[data-theme="buko"] .subtitle, html[data-theme="buko"] .due { color: #2d382d; } html[data-theme="buko"] a { color: var(--accent); } html[data-theme="buko"] .btn { color: #fff; } html[data-theme="buko"] .title { color: var(--accent); letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(248, 246, 239, 0.95), 0 0 18px rgba(79, 150, 32, 0.28); } html[data-theme="buko"] .title .baby { color: var(--accent-2); } html[data-theme="buko"] .title .lastname { color: var(--accent); } html[data-theme="buko"] .card { border: 2px solid var(--border); box-shadow: 0 0 0 4px rgba(248, 246, 239, 0.45), var(--shadow); } html[data-theme="buko"] .card h2 { color: var(--accent); } html[data-theme="buko"] .cd-cell { background: var(--surface); border: 2px solid var(--border); box-shadow: 0 0 0 4px rgba(248, 246, 239, 0.45), var(--shadow); } html[data-theme="buko"] .cd-num { color: var(--accent); font-family: var(--font-display); } /* Replace old motif decorations with a subtle readability wash */ html[data-theme="buko"] .decor-1, html[data-theme="buko"] .decor-2, html[data-theme="buko"] .decor-3, html[data-theme="buko"] .decor-4 { display: none; } html[data-theme="buko"] .theme-decor::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(219, 230, 222, 0.22) 0%, rgba(219, 230, 222, 0.12) 40%, rgba(219, 230, 222, 0.22) 100% ); } /* ========================================================= THEME 7 — Takumi (Initial D / AE86) Rebuilt around ae86.jpg with manga-speed overlays, brake-light red + tungsten headlight highlights. ========================================================= */ html[data-theme="takumi"] { --bg: #090d12; --surface: #10161e; --text: #e9edf4; --muted: #8f9bb0; --accent: #e1061b; /* tail-light red */ --accent-2: #f4cf66; /* headlight gold */ --border: rgba(225, 6, 27, 0.30); --shadow: 0 16px 46px rgba(0, 0, 0, 0.66); --radius: 8px; --font-display: 'Bangers', 'Impact', system-ui, sans-serif; --font-body: system-ui, sans-serif; background: linear-gradient(180deg, rgba(5, 8, 12, 0.75) 0%, rgba(5, 8, 12, 0.6) 45%, rgba(5, 8, 12, 0.88) 100%), radial-gradient(ellipse at 82% 18%, rgba(244, 207, 102, 0.12) 0%, transparent 42%), url('ae86.jpg'); background-size: 100% 100%, 100% 100%, cover; background-position: center, center, center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } html[data-theme="takumi"] body { color: #e9edf4; } html[data-theme="takumi"] .eyebrow { color: var(--accent-2); letter-spacing: 0.26em; } html[data-theme="takumi"] .subtitle, html[data-theme="takumi"] .due { color: #ccd5e3; } html[data-theme="takumi"] a { color: var(--accent-2); } html[data-theme="takumi"] .btn { color: #fff; border: 1px solid rgba(0,0,0,0.35); } html[data-theme="takumi"] .title { color: var(--accent); font-family: 'Bangers', 'Impact', sans-serif; font-style: italic; letter-spacing: 0.1em; -webkit-text-stroke: 2px #05070a; text-shadow: 4px 4px 0 #05070a, 0 0 24px rgba(225, 6, 27, 0.65); } html[data-theme="takumi"] .title .baby { color: var(--accent-2); -webkit-text-stroke: 2px #05070a; } html[data-theme="takumi"] .title .lastname { color: var(--accent); } html[data-theme="takumi"] .card { background: linear-gradient(180deg, rgba(15, 21, 30, 0.95) 0%, rgba(10, 15, 23, 0.95) 100%); border: 1px solid var(--border); box-shadow: 0 0 0 1px rgba(225, 6, 27, 0.10), 0 20px 56px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.04); } html[data-theme="takumi"] .card h2 { color: var(--accent); font-style: italic; } html[data-theme="takumi"] .cd-cell { background: rgba(13, 19, 28, 0.96); border: 1px solid var(--border); box-shadow: 0 0 20px rgba(225, 6, 27, 0.24); } html[data-theme="takumi"] .cd-num { color: var(--accent-2); font-family: 'Bangers', sans-serif; font-style: italic; } /* manga speed lines */ html[data-theme="takumi"] .theme-decor::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-30deg, transparent 0px, transparent 52px, rgba(255,255,255,0.025) 52px, rgba(255,255,255,0.025) 53px), repeating-linear-gradient(-30deg, transparent 0px, transparent 96px, rgba(255,255,255,0.012) 96px, rgba(255,255,255,0.012) 97px); } /* twin headlights top-right */ html[data-theme="takumi"] .decor-1 { top: 8%; right: 6%; width: 10px; height: 10px; border-radius: 50%; background: #fff6c8; box-shadow: 0px 0px 10px 6px rgba(255, 246, 200, 0.95), 0px 0px 28px 16px rgba(244, 207, 102, 0.65), 72px 0px 10px 6px rgba(255, 246, 200, 0.95), 72px 0px 28px 16px rgba(244, 207, 102, 0.65); animation: takumi-headlights 4s ease-in-out infinite; } /* tire smoke curl */ html[data-theme="takumi"] .decor-2 { bottom: 10%; left: 8%; width: 140px; height: 90px; border-radius: 50%; background: radial-gradient(ellipse at 45% 50%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 45%, transparent 72%); filter: blur(2px); animation: takumi-smoke 7s ease-in-out infinite; } /* mountain silhouette strip */ html[data-theme="takumi"] .decor-3 { bottom: 0; left: 0; width: 100%; height: 150px; background: rgba(4, 8, 12, 0.75); clip-path: polygon(0 100%, 0 72%, 7% 58%, 14% 69%, 22% 50%, 30% 67%, 40% 48%, 49% 66%, 59% 52%, 68% 70%, 78% 54%, 88% 72%, 100% 60%, 100% 100%); } /* brake light smear */ html[data-theme="takumi"] .decor-4 { bottom: 54px; left: 27%; width: 46%; height: 56px; background: radial-gradient(ellipse at center, rgba(225, 6, 27, 0.60) 0%, rgba(225, 6, 27, 0.22) 42%, transparent 72%); filter: blur(8px); animation: takumi-brake-glow 3.4s ease-in-out infinite; } @keyframes takumi-headlights { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } } @keyframes takumi-smoke { 0%, 100% { transform: translateX(0) translateY(0); opacity: 0.45; } 50% { transform: translateX(10px) translateY(-8px); opacity: 0.72; } } @keyframes takumi-brake-glow { 0%, 100% { opacity: 0.60; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.16); } } /* ========================================================= THEME 8 — Samwise (Lord of the Rings) Middle-earth map slice backdrop, parchment cards, Shire-green + One-Ring gold accents. ========================================================= */ html[data-theme="samwise"] { --bg: #201a13; --surface: #f1e6cf; --text: #2d2419; --muted: #6f5b44; --accent: #375f34; /* Shire green */ --accent-2: #c69742; /* One Ring gold */ --border: rgba(55, 95, 52, 0.32); --shadow: 0 12px 30px rgba(0, 0, 0, 0.42); --font-display: 'Georgia', 'Times New Roman', serif; --font-body: 'Trebuchet MS', system-ui, sans-serif; /* Vertical center slice of the map image */ background: linear-gradient(90deg, rgba(20, 14, 9, 0.82) 0%, rgba(20, 14, 9, 0.50) 20%, rgba(20, 14, 9, 0.10) 50%, rgba(20, 14, 9, 0.50) 80%, rgba(20, 14, 9, 0.82) 100%), linear-gradient(180deg, rgba(16, 12, 8, 0.18) 0%, rgba(16, 12, 8, 0.48) 100%), url('middle_earth.jpg'); background-size: 100% 100%, 100% 100%, auto 130vh; background-position: center center, center center, center top; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } html[data-theme="samwise"] body { color: #f5ecd9; } html[data-theme="samwise"] .eyebrow { color: #e8c982; text-shadow: 0 1px 8px rgba(0,0,0,0.5); } html[data-theme="samwise"] .subtitle, html[data-theme="samwise"] .due { color: #f7efdc; text-shadow: 0 1px 10px rgba(0,0,0,0.52); } html[data-theme="samwise"] a { color: #d9b169; } html[data-theme="samwise"] .btn { color: #1e160f; background: #d9b169; } html[data-theme="samwise"] .title { color: #f2e8d5; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.65), 0 0 24px rgba(198, 151, 66, 0.35); } html[data-theme="samwise"] .title .baby { color: #d9b169; } html[data-theme="samwise"] .title .lastname { color: #f2e8d5; } html[data-theme="samwise"] .card { background: linear-gradient(180deg, #f5ecd9 0%, #eadcc1 100%); border: 2px solid rgba(55, 95, 52, 0.35); box-shadow: 0 0 0 3px rgba(198, 151, 66, 0.2), 0 14px 30px rgba(0, 0, 0, 0.35); } html[data-theme="samwise"] .card h2 { color: #375f34; } html[data-theme="samwise"] .card, html[data-theme="samwise"] .cd-cell { color: #2d2419; } html[data-theme="samwise"] .cd-cell { background: #f5ecd9; border: 2px solid rgba(55, 95, 52, 0.45); box-shadow: 0 0 0 3px rgba(198, 151, 66, 0.2), 0 10px 24px rgba(0, 0, 0, 0.35); } html[data-theme="samwise"] .cd-num { color: #375f34; font-family: var(--font-display); } /* subtle map grain + vignette */ html[data-theme="samwise"] .theme-decor::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 60%), repeating-linear-gradient( 0deg, rgba(34, 24, 16, 0.05) 0px, rgba(34, 24, 16, 0.05) 2px, transparent 2px, transparent 6px ); } /* One Ring top-right */ html[data-theme="samwise"] .decor-1 { top: 6%; right: 6%; width: 118px; height: 118px; border-radius: 50%; border: 14px solid #c69742; box-shadow: 0 0 0 2px rgba(113, 78, 26, 0.75), 0 0 26px rgba(214, 170, 74, 0.55), inset 0 0 10px rgba(255, 236, 170, 0.45); animation: lotr-ring-float 7s ease-in-out infinite; } /* pipe-smoke curl bottom-left */ html[data-theme="samwise"] .decor-2 { bottom: 7%; left: 6%; width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(233, 229, 219, 0.32); border-top-color: transparent; border-right-color: transparent; transform: rotate(-20deg); filter: blur(0.4px); animation: lotr-smoke 8s ease-in-out infinite; } /* Elvish-ish glyph stripe watermark */ html[data-theme="samwise"] .decor-3 { left: 50%; bottom: 24px; transform: translateX(-50%); font-family: Georgia, serif; font-size: 1rem; letter-spacing: 0.3em; color: rgba(218, 188, 129, 0.36); } html[data-theme="samwise"] .decor-3::after { content: '✶ · ✧ · ✶ · ✧ · ✶ · ✧'; } /* hearth glow behind content */ html[data-theme="samwise"] .decor-4 { top: 34%; left: 50%; transform: translateX(-50%); width: 62vw; height: 240px; background: radial-gradient(ellipse at center, rgba(214, 170, 74, 0.28) 0%, rgba(214, 170, 74, 0.10) 45%, transparent 72%); filter: blur(6px); } @keyframes lotr-ring-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes lotr-smoke { 0%, 100% { transform: rotate(-20deg) translateY(0); opacity: 0.35; } 50% { transform: rotate(-12deg) translateY(-10px); opacity: 0.62; } } @media (max-width: 600px) { html[data-theme="samwise"] .decor-1 { width: 84px; height: 84px; border-width: 10px; } html[data-theme="samwise"] .decor-2 { width: 88px; height: 88px; left: 4%; } html[data-theme="samwise"] .decor-4 { width: 88vw; height: 180px; top: 38%; } } /* ---------- Responsive ---------- */ @media (max-width: 480px) { .details { grid-template-columns: 1fr; gap: 0.25rem; } .details dt { padding-top: 0.75rem; } .cd-num { font-size: 2.8rem; } footer { padding: 0.5rem 0.75rem; } footer p { gap: 0.1rem 0.28rem; font-size: 0.78rem; line-height: 1.25; } footer .footer-intro { flex-basis: 100%; } }