/* ══════════════════════════════════════════════════════════════ THEME SYSTEM Applied via data-theme attribute on . Forest (default) = no attribute or data-theme="forest". To add a new theme: 1. Add a block below following the same pattern. 2. Add its entry to the THEMES array in js/theme-switcher.js. ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ THEME: Darkroom Deep red and amber — like a photography darkroom under safelight illumination. Warm, dim, tactile. ══════════════════════════════════════════════════════════════ */ html[data-theme="darkroom"] { --forest-deep: #0d0404; --forest-dark: #1c0808; --forest-mid: #7a1500; --forest-light: #aa2200; --moss: #cc5500; --sage: #e08a00; --cream: #ffe8cc; --parchment: #ffd4a0; --gold: #ff7700; --amber: #ffaa44; --bark: #3d0d00; --stone: #aa7755; --mist: rgba(220, 80, 0, 0.05); } html[data-theme="darkroom"] body { background-color: var(--forest-deep); } html[data-theme="darkroom"] #navbar.scrolled { box-shadow: 0 2px 30px rgba(180, 40, 0, 0.2); } html[data-theme="darkroom"] .about-img-bg { background: radial-gradient(ellipse at 30% 20%, rgba(120, 30, 0, 0.7) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(200, 100, 0, 0.2) 0%, transparent 50%), linear-gradient(160deg, #2a0a00 0%, #180500 60%, #200800 100%); } html[data-theme="darkroom"] .quote-section { background: linear-gradient(180deg, var(--forest-deep) 0%, #080101 50%, var(--forest-deep) 100%); } html[data-theme="darkroom"] .deco-leaf path { fill: rgba(160, 60, 0, 0.15) !important; } html[data-theme="darkroom"] .deco-leaf line { stroke: rgba(180, 80, 0, 0.22) !important; } html[data-theme="darkroom"] .quote-leaf path { fill: rgba(180, 70, 0, 0.12) !important; } html[data-theme="darkroom"] .quote-leaf line { stroke: rgba(200, 100, 0, 0.25) !important; } html[data-theme="darkroom"] .about-leaf-deco path { fill: rgba(150, 55, 0, 0.1) !important; } html[data-theme="darkroom"] .about-leaf-deco line { stroke: rgba(170, 75, 0, 0.18) !important; } html[data-theme="darkroom"] .footer-leaf path { fill: rgba(160, 50, 0, 0.06) !important; } html[data-theme="darkroom"] .section-divider svg path { fill: var(--forest-deep); } html[data-theme="darkroom"] #hero { background: radial-gradient(ellipse at 20% 50%, rgba(120, 30, 0, 0.35) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(160, 60, 0, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(200, 100, 0, 0.1) 0%, transparent 40%), linear-gradient(160deg, #0a0300 0%, #0d0404 40%, #120505 70%, #090302 100%); } html[data-theme="darkroom"] #about { background: linear-gradient(180deg, var(--forest-deep) 0%, #100303 100%); } /* ══════════════════════════════════════════════════════════════ THEME: Silver Cool monochrome blue-grey — editorial, minimal. The forest palette replaced with slate and steel. ══════════════════════════════════════════════════════════════ */ html[data-theme="silver"] { --forest-deep: #090c12; --forest-dark: #111825; --forest-mid: #394866; --forest-light: #526080; --moss: #7898bc; --sage: #9db8d8; --cream: #e8edf8; --parchment: #d0d8ec; --gold: #a8bcd6; --amber: #bdd0e8; --bark: #1d2840; --stone: #6070a0; --mist: rgba(130, 165, 220, 0.05); } html[data-theme="silver"] #navbar.scrolled { box-shadow: 0 2px 30px rgba(60, 100, 180, 0.15); } html[data-theme="silver"] .about-img-bg { background: radial-gradient(ellipse at 30% 20%, rgba(50, 80, 160, 0.6) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(90, 130, 200, 0.15) 0%, transparent 50%), linear-gradient(160deg, #182040 0%, #0d1528 60%, #172535 100%); } html[data-theme="silver"] .quote-section { background: linear-gradient(180deg, var(--forest-deep) 0%, #060a10 50%, var(--forest-deep) 100%); } html[data-theme="silver"] .deco-leaf path { fill: rgba(50, 90, 180, 0.12) !important; } html[data-theme="silver"] .deco-leaf line { stroke: rgba(70, 110, 200, 0.2) !important; } html[data-theme="silver"] .quote-leaf path { fill: rgba(60, 100, 180, 0.1) !important; } html[data-theme="silver"] .quote-leaf line { stroke: rgba(80, 120, 200, 0.22) !important; } html[data-theme="silver"] .about-leaf-deco path { fill: rgba(50, 85, 170, 0.1) !important; } html[data-theme="silver"] .about-leaf-deco line { stroke: rgba(70, 110, 190, 0.18) !important; } html[data-theme="silver"] .footer-leaf path { fill: rgba(60, 90, 160, 0.06) !important; } html[data-theme="silver"] .section-divider svg path { fill: var(--forest-deep); } html[data-theme="silver"] #hero { background: radial-gradient(ellipse at 20% 50%, rgba(40, 70, 150, 0.3) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(60, 100, 170, 0.18) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(100, 140, 200, 0.08) 0%, transparent 40%), linear-gradient(160deg, #050810 0%, #090c12 40%, #0d1018 70%, #07090f 100%); } html[data-theme="silver"] #about { background: linear-gradient(180deg, var(--forest-deep) 0%, #06080f 100%); } /* ══════════════════════════════════════════════════════════════ THEME: Neocities A love letter to the early web — circa 1998–2004. Comic Sans, neon glows, starfield background, bevel buttons. ══════════════════════════════════════════════════════════════ */ html[data-theme="neocities"] { --forest-deep: #000033; --forest-dark: #000055; --forest-mid: #0000cc; --forest-light: #0044ff; --moss: #00ccff; --sage: #88ddff; --cream: #ffffff; --parchment: #ffff88; --gold: #ff00ff; --amber: #ffff00; --bark: #000033; --stone: #00ffcc; --mist: rgba(0, 255, 255, 0.05); --font-sans: 'Comic Sans MS', 'Comic Sans', cursive; --font-serif: 'Comic Sans MS', 'Comic Sans', cursive; } /* Tiled starfield */ html[data-theme="neocities"] body { background-color: #000033; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.95) 0%, transparent 100%), radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.75) 0%, transparent 100%), radial-gradient(1px 1px at 55% 10%, rgba(255,255,200,0.90) 0%, transparent 100%), radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,0.80) 0%, transparent 100%), radial-gradient(1px 1px at 90% 35%, rgba(200,200,255,0.90) 0%, transparent 100%), radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.65) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 42% 42%, rgba(255,255,255,1.00) 0%, transparent 100%), radial-gradient(1px 1px at 62% 88%, rgba(255,255,200,0.70) 0%, transparent 100%), radial-gradient(1px 1px at 82% 15%, rgba(255,255,255,0.85) 0%, transparent 100%), radial-gradient(1px 1px at 23% 65%, rgba(200,200,255,0.80) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 75% 50%, rgba(255,200,255,0.90) 0%, transparent 100%), radial-gradient(1px 1px at 50% 30%, rgba(255,255,255,0.70) 0%, transparent 100%); background-size: 250px 200px; } /* CRT scanlines */ html[data-theme="neocities"]::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 30, 0.035) 2px, rgba(0, 0, 30, 0.035) 4px ); pointer-events: none; z-index: 9999; } /* Particles: screen blend so they become cyan tinted */ html[data-theme="neocities"] #particles { opacity: 0.4; mix-blend-mode: screen; } html[data-theme="neocities"] #heroLeaves { opacity: 0.7; mix-blend-mode: screen; } /* Custom scrollbar */ html[data-theme="neocities"]::-webkit-scrollbar { width: 14px; } html[data-theme="neocities"]::-webkit-scrollbar-track { background: #000033; border-left: 1px solid #0000ff; } html[data-theme="neocities"]::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00ffff 0%, #ff00ff 50%, #ffff00 100%); border: 1px solid #0000ff; } /* ── NAV ── */ html[data-theme="neocities"] #navbar { background: rgba(0, 0, 51, 0.97); border-bottom: 3px solid #ff00ff; box-shadow: 0 0 18px rgba(255, 0, 255, 0.35); } html[data-theme="neocities"] #navbar.scrolled { box-shadow: 0 0 25px rgba(255, 0, 255, 0.5); } html[data-theme="neocities"] .nav-logo { color: #ffff00; text-shadow: 0 0 8px #ffff00; } html[data-theme="neocities"] .nav-links a { color: #00ccff; text-decoration: underline; text-underline-offset: 3px; } html[data-theme="neocities"] .nav-links a:hover { color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.7); } html[data-theme="neocities"] .nav-links a::after { display: none; } /* ── HERO ── */ html[data-theme="neocities"] #hero { background: radial-gradient(ellipse at 20% 50%, rgba(0, 0, 200, 0.3) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(100, 0, 150, 0.2) 0%, transparent 50%), #000033; } html[data-theme="neocities"] .hero-overlay { background: linear-gradient( 135deg, rgba(0, 0, 80, 0.7) 0%, rgba(60, 0, 80, 0.55) 50%, rgba(0, 40, 90, 0.7) 100% ); } html[data-theme="neocities"] .hero-eyebrow { color: #00ffff; text-shadow: 0 0 10px #00ccff; border-color: rgba(0, 255, 255, 0.4); } html[data-theme="neocities"] .hero-title { animation: nc-rainbow 4s linear infinite; } html[data-theme="neocities"] .hero-title em { animation: nc-rainbow 4s linear infinite reverse; font-style: normal; } html[data-theme="neocities"] .hero-sub { color: #88ddff; text-shadow: 0 0 6px rgba(100, 200, 255, 0.4); } html[data-theme="neocities"] .hero-cta { background: #c0c0c0; color: #000000; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #808080; border-bottom: 3px solid #808080; border-radius: 0; letter-spacing: 0; text-transform: none; box-shadow: none; } html[data-theme="neocities"] .hero-cta:hover { background: #d8d8d8; color: #000; transform: none; box-shadow: none; } html[data-theme="neocities"] .hero-cta:active { border-top: 3px solid #808080; border-left: 3px solid #808080; border-right: 3px solid #ffffff; border-bottom: 3px solid #ffffff; background: #aaaaaa; } html[data-theme="neocities"] .hero-scroll-hint { color: #00ffff; } html[data-theme="neocities"] .scroll-line { background: linear-gradient(to bottom, #00ffff, transparent); } html[data-theme="neocities"] .deco-leaf path { fill: rgba(0, 150, 200, 0.14) !important; } html[data-theme="neocities"] .deco-leaf line { stroke: rgba(0, 200, 255, 0.22) !important; } /* ── SECTION DIVIDER ── */ html[data-theme="neocities"] .section-divider svg path { fill: #000033; } /* ── GALLERY ── */ html[data-theme="neocities"] #gallery { background: #000033; } html[data-theme="neocities"] .section-tag { color: #ffff00; border-color: rgba(255, 255, 0, 0.5); text-shadow: 0 0 6px rgba(255, 255, 0, 0.4); } html[data-theme="neocities"] .section-header h2 { color: #00ffff; text-shadow: 0 0 16px rgba(0, 200, 255, 0.5); } html[data-theme="neocities"] .section-header p { color: #88ddff; } html[data-theme="neocities"] .filter-btn { background: #000066; border: 2px solid #0000cc; color: #00ccff; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .filter-btn:hover { background: #000099; border-color: #00ffff; color: #ffffff; } html[data-theme="neocities"] .filter-btn.active { background: #0000cc; border-color: #00ffff; color: #ffffff; box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); } html[data-theme="neocities"] .gallery-item { border: 3px solid #ff00ff; border-radius: 0; box-shadow: 0 0 8px rgba(255, 0, 255, 0.3); } html[data-theme="neocities"] .gallery-item:nth-child(3n+1) { border-color: #ff00ff; box-shadow: 0 0 8px rgba(255,0,255,0.3); } html[data-theme="neocities"] .gallery-item:nth-child(3n+2) { border-color: #00ffff; box-shadow: 0 0 8px rgba(0,255,255,0.3); } html[data-theme="neocities"] .gallery-item:nth-child(3n) { border-color: #ffff00; box-shadow: 0 0 8px rgba(255,255,0,0.3); } html[data-theme="neocities"] .gallery-overlay { background: rgba(0, 0, 51, 0.9); } html[data-theme="neocities"] .gallery-overlay h3 { color: #ffff00; text-shadow: 0 0 8px rgba(255, 255, 0, 0.5); } html[data-theme="neocities"] .gallery-overlay p { color: #00ffff; } /* ── QUOTE ── */ html[data-theme="neocities"] .quote-section { background: #000044; border-top: 2px dashed rgba(255, 0, 255, 0.5); border-bottom: 2px dashed rgba(255, 0, 255, 0.5); } html[data-theme="neocities"] .quote-section blockquote { color: #ffff88; text-shadow: 0 0 8px rgba(255, 255, 100, 0.3); font-style: normal; } html[data-theme="neocities"] .quote-section cite { color: #ff00ff; text-shadow: 0 0 6px rgba(255, 0, 255, 0.4); } html[data-theme="neocities"] .quote-leaf { display: none; } /* ── ABOUT ── */ html[data-theme="neocities"] #about { background: #000044; border-top: 2px dashed rgba(0, 255, 255, 0.4); } html[data-theme="neocities"] .about-text h2 { color: #00ffff; text-shadow: 0 0 12px rgba(0, 200, 255, 0.4); } html[data-theme="neocities"] .about-text h2 em { color: #ffff00; text-shadow: 0 0 10px rgba(255, 255, 0, 0.4); } html[data-theme="neocities"] .about-text p { color: #88ddff; } html[data-theme="neocities"] .about-img-bg { background: radial-gradient(ellipse at 30% 20%, rgba(0, 0, 200, 0.65) 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(150, 0, 200, 0.2) 0%, transparent 50%), linear-gradient(160deg, #000066 0%, #000033 60%, #000055 100%); } html[data-theme="neocities"] .about-img-border { border-color: rgba(0, 255, 255, 0.35); } html[data-theme="neocities"] .stat strong { color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.4); } html[data-theme="neocities"] .stat span { color: #00ccff; } html[data-theme="neocities"] .about-stats { border-top-color: rgba(0, 255, 255, 0.25); } html[data-theme="neocities"] .about-leaf-deco { display: none; } /* ── CONTACT ── */ html[data-theme="neocities"] #contact { background: #000033; border-top: 2px dashed rgba(255, 255, 0, 0.4); } html[data-theme="neocities"] .contact-inner h2 { color: #ff00ff; text-shadow: 0 0 14px rgba(255, 0, 255, 0.45); } html[data-theme="neocities"] .contact-inner > p { color: #88ddff; } html[data-theme="neocities"] .form-group input, html[data-theme="neocities"] .form-group textarea { background: #000055; border: 2px solid #0000cc; color: #ffffff; border-radius: 0; } html[data-theme="neocities"] .form-group input:focus, html[data-theme="neocities"] .form-group textarea:focus { border-color: #00ffff; background: #000066; box-shadow: 0 0 10px rgba(0, 200, 255, 0.3); } html[data-theme="neocities"] .form-group label { color: #00ccff; } html[data-theme="neocities"] .form-group input:focus + label, html[data-theme="neocities"] .form-group input:not(:placeholder-shown) + label, html[data-theme="neocities"] .form-group textarea:focus + label, html[data-theme="neocities"] .form-group textarea:not(:placeholder-shown) + label { color: #ffff00; } html[data-theme="neocities"] .submit-btn { background: #c0c0c0; color: #000000; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #808080; border-bottom: 3px solid #808080; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .submit-btn:hover { background: #d8d8d8; transform: none; } /* ── FOOTER ── */ html[data-theme="neocities"] footer { background: #000022; border-top: 3px solid #ff00ff; box-shadow: 0 -4px 20px rgba(255, 0, 255, 0.2); } html[data-theme="neocities"] .footer-logo { color: #ffff00; text-shadow: 0 0 10px rgba(255, 255, 0, 0.5); } html[data-theme="neocities"] .footer-tagline { color: #00ffff; font-style: normal; } html[data-theme="neocities"] .footer-links a { color: #88ddff; text-decoration: underline; } html[data-theme="neocities"] .footer-links a:hover { color: #ff00ff; } html[data-theme="neocities"] .footer-copy { color: #555577; } html[data-theme="neocities"] .footer-leaf { display: none; } /* "Best viewed" badge */ html[data-theme="neocities"] .footer-inner::after { content: '⭐ BEST VIEWED IN 1024×768 ⭐'; display: block; margin-top: 1.8rem; font-size: 0.7rem; color: #ffff00; letter-spacing: 0.1em; text-shadow: 0 0 8px rgba(255, 255, 0, 0.5); animation: nc-blink 2.4s step-start infinite; } /* ── SHOP PAGE — neocities ── */ html[data-theme="neocities"] #shop-hero { background: radial-gradient(ellipse at 30% 60%, rgba(0, 0, 180, 0.35) 0%, transparent 60%), #000033; } html[data-theme="neocities"] .product-card { background: #000055; border: 3px solid #ff00ff; border-radius: 0; } html[data-theme="neocities"] .product-card:nth-child(3n+1) { border-color: #ff00ff; } html[data-theme="neocities"] .product-card:nth-child(3n+2) { border-color: #00ffff; } html[data-theme="neocities"] .product-card:nth-child(3n) { border-color: #ffff00; } html[data-theme="neocities"] .product-card:hover { transform: none; box-shadow: 0 0 20px rgba(255, 0, 255, 0.45); } html[data-theme="neocities"] .product-type-badge { background: rgba(0, 0, 80, 0.9); border: 1px solid #ff00ff; border-radius: 0; color: #00ffff; } html[data-theme="neocities"] .product-title { color: #ffff00; text-shadow: 0 0 5px rgba(255, 255, 0, 0.3); } html[data-theme="neocities"] .product-description { color: #88ddff; } html[data-theme="neocities"] .price-value { color: #ff00ff; text-shadow: 0 0 8px rgba(255, 0, 255, 0.4); } html[data-theme="neocities"] .price-from { color: #00ffff; } html[data-theme="neocities"] .btn-add-cart { background: #c0c0c0; color: #000000; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #808080; border-bottom: 3px solid #808080; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .btn-add-cart:hover { background: #d8d8d8; transform: none; } html[data-theme="neocities"] .variant-select { background: #000066; border: 2px solid #0000cc; color: #00ccff; border-radius: 0; } html[data-theme="neocities"] .product-sold-out-overlay { background: rgba(0, 0, 40, 0.8); } html[data-theme="neocities"] .sold-out-label { background: #c0c0c0; color: #000; border-radius: 0; border: 2px solid #808080; } /* Cart & modal — neocities */ html[data-theme="neocities"] #cart-toggle { background: #000066; border: 3px solid #ff00ff; border-radius: 0; box-shadow: 0 0 12px rgba(255, 0, 255, 0.4); color: #00ffff; } html[data-theme="neocities"] #cart-toggle:hover { background: #000099; border-color: #00ffff; } html[data-theme="neocities"] .cart-count { background: #ffff00; color: #000033; } html[data-theme="neocities"] #cart-drawer { background: #000033; border-left: 3px solid #ff00ff; } html[data-theme="neocities"] .cart-header { border-bottom: 2px dashed #ff00ff; } html[data-theme="neocities"] .cart-header h2 { color: #00ffff; text-shadow: 0 0 8px rgba(0, 200, 255, 0.4); } html[data-theme="neocities"] .cart-close { color: #ff00ff; } html[data-theme="neocities"] .cart-item { border-bottom: 1px dashed #0000cc; } html[data-theme="neocities"] .cart-item-title { color: #ffff00; } html[data-theme="neocities"] .cart-item-variant, html[data-theme="neocities"] .cart-item-price { color: #00ccff; } html[data-theme="neocities"] .qty-btn { background: #c0c0c0; color: #000; border: 2px solid #808080; border-radius: 0; } html[data-theme="neocities"] .cart-subtotal-label { color: #88ddff; } html[data-theme="neocities"] .cart-subtotal-amount { color: #ff00ff; text-shadow: 0 0 6px rgba(255,0,255,0.4); } html[data-theme="neocities"] .cart-note { color: #555577; } html[data-theme="neocities"] .btn-checkout { background: #c0c0c0; color: #000; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #808080; border-bottom: 3px solid #808080; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .btn-checkout:hover:not(:disabled) { background: #d8d8d8; } html[data-theme="neocities"] #product-modal .modal-content { background: #000033; border: 3px solid #ff00ff; border-radius: 0; box-shadow: 8px 8px 0 #ff00ff; } html[data-theme="neocities"] .modal-badge { background: #000066; border: 1px solid #00ffff; border-radius: 0; color: #00ffff; } html[data-theme="neocities"] .modal-title { color: #ffff00; text-shadow: 0 0 8px rgba(255,255,0,0.3); } html[data-theme="neocities"] .modal-price { color: #ff00ff; text-shadow: 0 0 8px rgba(255,0,255,0.4); } html[data-theme="neocities"] .modal-description { color: #88ddff; } html[data-theme="neocities"] .modal-add-btn { background: #c0c0c0; color: #000; border-top: 3px solid #ffffff; border-left: 3px solid #ffffff; border-right: 3px solid #808080; border-bottom: 3px solid #808080; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .modal-close { color: #ff00ff; } /* ── BLOG PAGE — neocities ── */ html[data-theme="neocities"] #blog-hero { background: radial-gradient(ellipse at 30% 60%, rgba(0, 0, 180, 0.3) 0%, transparent 60%), #000033; } html[data-theme="neocities"] .blog-hero-eyebrow { color: #00ccff; border-color: rgba(0, 200, 255, 0.4); } html[data-theme="neocities"] .blog-hero-title { animation: nc-rainbow 4s linear infinite; } html[data-theme="neocities"] .blog-hero-title em { animation: nc-rainbow 4s linear infinite reverse; font-style: normal; } html[data-theme="neocities"] .blog-hero-sub { color: #88ddff; } html[data-theme="neocities"] .tag-btn { background: #000066; border: 2px solid #0000cc; color: #00ccff; border-radius: 0; letter-spacing: 0; text-transform: none; } html[data-theme="neocities"] .tag-btn:hover { background: #000099; border-color: #00ffff; color: #fff; } html[data-theme="neocities"] .tag-btn.active { background: #0000cc; border-color: #00ffff; color: #fff; box-shadow: 0 0 10px rgba(0, 200, 255, 0.35); } html[data-theme="neocities"] .post-card { background: #000055; border: 3px solid #ff00ff; border-radius: 0; } html[data-theme="neocities"] .post-card:nth-child(3n+1) { border-color: #ff00ff; } html[data-theme="neocities"] .post-card:nth-child(3n+2) { border-color: #00ffff; } html[data-theme="neocities"] .post-card:nth-child(3n) { border-color: #ffff00; } html[data-theme="neocities"] .post-card:hover { transform: none; box-shadow: 0 0 18px rgba(255,0,255,0.4); } html[data-theme="neocities"] .post-tag { color: #ffff00; border-color: rgba(255, 255, 0, 0.4); } html[data-theme="neocities"] .post-card-title { color: #ffff00; text-shadow: 0 0 5px rgba(255,255,0,0.25); } html[data-theme="neocities"] .post-card-excerpt { color: #88ddff; } html[data-theme="neocities"] .post-card-meta time, html[data-theme="neocities"] .post-card-meta span { color: #555577; } html[data-theme="neocities"] .post-card-meta .read-time { color: #00ccff; } html[data-theme="neocities"] .post-card-link { color: #ff00ff; border-bottom-color: rgba(255, 0, 255, 0.35); } html[data-theme="neocities"] .post-card-link:hover { color: #ffffff; } /* ── POST PAGE — neocities ── */ html[data-theme="neocities"] #post-hero { background: #000033; } html[data-theme="neocities"] .post-hero-gradient { background: linear-gradient( to bottom, rgba(0, 0, 51, 0.5) 0%, rgba(0, 0, 51, 0.75) 60%, rgba(0, 0, 51, 0.97) 100% ); } html[data-theme="neocities"] .post-back-link { color: #00ccff; text-decoration: underline; } html[data-theme="neocities"] .post-back-link:hover { color: #ffffff; } html[data-theme="neocities"] .post-hero-title { animation: nc-rainbow 4s linear infinite; } html[data-theme="neocities"] .post-hero-title em { animation: nc-rainbow 4s linear infinite reverse; font-style: normal; } html[data-theme="neocities"] .post-hero-meta { color: #555577; } html[data-theme="neocities"] .post-hero-meta .read-time { color: #00ccff; } html[data-theme="neocities"] #post-body { background: #000033; } html[data-theme="neocities"] .post-content h2 { color: #00ffff; text-shadow: 0 0 12px rgba(0,200,255,0.4); } html[data-theme="neocities"] .post-content h3 { color: #ffff00; } html[data-theme="neocities"] .post-content p { color: #88ddff; } html[data-theme="neocities"] .post-content strong { color: #ffffff; } html[data-theme="neocities"] .post-content em { color: #ffff88; font-style: normal; } html[data-theme="neocities"] .post-content ul, html[data-theme="neocities"] .post-content ol { color: #88ddff; } html[data-theme="neocities"] .post-content blockquote { border-left-color: #ff00ff; color: #ffff88; font-style: normal; } html[data-theme="neocities"] .post-content blockquote cite { color: #ff00ff; } html[data-theme="neocities"] .post-callout { background: #000066; border-color: #0000cc; } html[data-theme="neocities"] .post-callout-label { color: #00ccff; } html[data-theme="neocities"] .post-author { border-top-color: rgba(0, 200, 255, 0.2); } html[data-theme="neocities"] .post-author-avatar { background: radial-gradient(ellipse at 35% 35%, rgba(0, 0, 200, 0.8) 0%, rgba(0, 0, 40, 0.9) 100%); border-color: rgba(0, 200, 255, 0.35); color: #00ffff; } html[data-theme="neocities"] .post-author-name { color: #ffff00; } html[data-theme="neocities"] .post-author-bio { color: #88ddff; } /* ── ANIMATIONS ── */ @keyframes nc-rainbow { 0% { color: #ff5555; } 16% { color: #ffaa00; } 33% { color: #ffff00; } 50% { color: #55ff55; } 66% { color: #55aaff; } 83% { color: #ff55ff; } 100% { color: #ff5555; } } @keyframes nc-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ══════════════════════════════════════════════════════════════ THEME SWITCHER UI Fixed floating button at bottom-right. Dots auto-adapt to the active theme's CSS custom properties. ══════════════════════════════════════════════════════════════ */ #theme-switcher { position: fixed; bottom: 2rem; right: 2rem; z-index: 500; } /* ── Toggle button ── */ #theme-toggle { display: flex; align-items: center; gap: 0.55rem; background: rgba(14, 26, 15, 0.88); border: 1px solid rgba(74, 103, 65, 0.4); border-radius: 30px; padding: 0.5rem 1rem 0.5rem 0.75rem; cursor: pointer; backdrop-filter: blur(10px); color: var(--cream); font-family: var(--font-sans); transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; white-space: nowrap; } #theme-toggle:hover { border-color: var(--moss); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); background: rgba(14, 26, 15, 0.96); } /* Three dots — pull from current theme's palette */ .theme-dots { display: flex; gap: 4px; align-items: center; flex-shrink: 0; } .theme-dots span { display: block; width: 8px; height: 8px; border-radius: 50%; transition: background 0.4s; } .theme-dots span:nth-child(1) { background: var(--amber); } .theme-dots span:nth-child(2) { background: var(--moss); } .theme-dots span:nth-child(3) { background: var(--forest-mid); } .theme-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); transition: color 0.25s; user-select: none; } #theme-toggle:hover .theme-label { color: var(--cream); } /* ── Dropdown menu ── */ #theme-menu { position: absolute; bottom: calc(100% + 0.65rem); right: 0; min-width: 170px; background: rgba(10, 18, 10, 0.97); border: 1px solid rgba(74, 103, 65, 0.35); border-radius: 4px; list-style: none; padding: 0.35rem 0; backdrop-filter: blur(14px); box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); } #theme-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; } #theme-menu li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); cursor: pointer; transition: background 0.15s, color 0.15s; } #theme-menu li:hover { background: rgba(74, 103, 65, 0.14); color: var(--cream); } #theme-menu li.theme-active { color: var(--amber); } #theme-menu li.theme-active::after { content: '✓'; margin-left: auto; font-size: 0.7rem; } /* Swatch dots inside menu items */ .theme-swatch { display: flex; gap: 3px; flex-shrink: 0; } .theme-swatch span { display: block; width: 7px; height: 7px; border-radius: 50%; } /* ── Per-theme switcher overrides ── */ html[data-theme="darkroom"] #theme-toggle { background: rgba(13, 4, 4, 0.92); border-color: rgba(150, 35, 0, 0.45); } html[data-theme="darkroom"] #theme-toggle:hover { border-color: var(--moss); box-shadow: 0 4px 24px rgba(180, 40, 0, 0.25); } html[data-theme="darkroom"] #theme-menu { background: rgba(10, 3, 3, 0.97); border-color: rgba(150, 35, 0, 0.4); } html[data-theme="darkroom"] #theme-menu li:hover { background: rgba(150, 35, 0, 0.14); } html[data-theme="silver"] #theme-toggle { background: rgba(9, 12, 18, 0.92); border-color: rgba(70, 100, 160, 0.45); } html[data-theme="silver"] #theme-toggle:hover { border-color: var(--moss); box-shadow: 0 4px 24px rgba(60, 100, 180, 0.2); } html[data-theme="silver"] #theme-menu { background: rgba(7, 9, 15, 0.97); border-color: rgba(70, 100, 160, 0.4); } html[data-theme="silver"] #theme-menu li:hover { background: rgba(70, 100, 160, 0.14); } html[data-theme="neocities"] #theme-switcher { font-family: 'Comic Sans MS', cursive; } html[data-theme="neocities"] #theme-toggle { background: #000066; border: 3px solid #ff00ff; border-radius: 0; box-shadow: 0 0 12px rgba(255, 0, 255, 0.4), inset 0 0 8px rgba(0, 0, 80, 0.5); color: #fff; } html[data-theme="neocities"] #theme-toggle:hover { background: #000099; border-color: #00ffff; box-shadow: 0 0 18px rgba(0, 255, 255, 0.45); } html[data-theme="neocities"] .theme-label { font-family: 'Comic Sans MS', cursive; color: #00ffff; text-transform: none; letter-spacing: 0; font-size: 0.85rem; } html[data-theme="neocities"] #theme-toggle:hover .theme-label { color: #ffffff; } html[data-theme="neocities"] #theme-menu { background: #000033; border: 3px solid #ff00ff; border-radius: 0; box-shadow: 5px 5px 0 #ff00ff; } html[data-theme="neocities"] #theme-menu li { font-family: 'Comic Sans MS', cursive; color: #00ccff; text-transform: none; letter-spacing: 0; font-size: 0.9rem; border-bottom: 1px dashed #0000aa; } html[data-theme="neocities"] #theme-menu li:last-child { border-bottom: none; } html[data-theme="neocities"] #theme-menu li:hover { background: #000066; color: #ffff00; } html[data-theme="neocities"] #theme-menu li.theme-active { color: #ffff00; text-shadow: 0 0 6px rgba(255, 255, 0, 0.4); }