/* Theme Name: KidRaves Classic Theme URI: https://kidraves.com Author: Tyler Scott & ChatGPT Author URI: https://kidraves.com Description: A lively, kid-friendly WordPress theme for showcasing children's rave tracks. Includes custom post type, vibes, BPM/Key meta, YouTube embeds, custom logo, and playful animated UI. Version: 0.3.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: kidraves */ :root { --bg:#0b0b12; --bg-2:#0e0e19; --card:rgba(18,18,28,.8); --ink:#f7f7fd; --muted:#c9c9da; --accent:#7c5cff; --accent-2:#13d1ff; --accent-3:#ff6ad5; --ring:rgba(124,92,255,.55); --radius:18px; --shadow:0 10px 30px rgba(19,209,255,.18), 0 6px 20px rgba(124,92,255,.12); } body { margin:0; padding:0; background: radial-gradient(circle at 20% 10%, rgba(124,92,255,.12), transparent 35%), radial-gradient(circle at 90% 30%, rgba(19,209,255,.10), transparent 40%), radial-gradient(circle at 10% 80%, rgba(255,106,213,.10), transparent 35%), var(--bg); color: var(--ink); font:16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: min(1200px, 92vw); margin: 0 auto; padding: 24px; } .site-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; position: sticky; top:0; z-index:10; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(11,11,18,.82), rgba(11,11,18,.55)); border-bottom:1px solid rgba(255,255,255,.06); } .brand, .brand-fallback, .custom-logo-link { display:flex; align-items:center; gap:14px; font-weight:900; letter-spacing:.3px; } .brand-bubble { width:42px; height:42px; border-radius:14px; background: conic-gradient(from 180deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent)); box-shadow: var(--shadow); animation: spin 8s linear infinite; } .custom-logo { height:60px; width:auto; border-radius:12px; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .brand-bubble { animation: none; } } .nav a { margin: 0 10px; font-weight:700; color: var(--ink); opacity:.92; padding:8px 12px; border-radius:999px; } .nav a:hover { background: rgba(124,92,255,.16); opacity:1; text-decoration: none; } .hero { padding: 32px 0 14px; display:grid; gap:18px; } .hero h1 { font-size: clamp(30px, 4.5vw, 48px); margin:0; background: linear-gradient(135deg, var(--accent-2), var(--accent-3)); -webkit-background-clip: text; color: transparent; } .hero p { color: var(--muted); max-width: 70ch; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#0a0a0f; padding:12px 18px; border-radius: 999px; border: 0; font-weight: 900; box-shadow: var(--shadow); transform: translateY(0); transition: transform .15s ease, box-shadow .15s ease; } .btn:hover { transform: translateY(-2px) scale(1.02); text-decoration:none; box-shadow: 0 14px 40px rgba(19, 209, 255, 0.22); } .grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .card { background: var(--card); border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; min-height: 100%; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 20px 40px rgba(0,0,0,.25); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-3px); border-color: var(--ring); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, var(--shadow); } .card .media { aspect-ratio: 1/1; background:#1a1a25; display:grid; place-items:center; overflow:hidden; } .card .media img { width:100%; height:100%; object-fit:cover; display:block; } .media.ratio-16x9 { position: relative; width: 100%; padding-top: 56.25%; background:#0f0f17; } .media.ratio-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .card .body { padding:16px; display:grid; gap:10px; } .card .title { font-weight:900; font-size: 1.08rem; line-height:1.25; } .meta { color: var(--muted); font-size: .9rem; display:flex; flex-wrap:wrap; gap:8px; } .tag { padding:2px 8px; background: rgba(124,92,255,.18); border:1px solid rgba(124,92,255,.35); border-radius:999px; font-size:.78rem; } .badge { padding:2px 8px; background: rgba(19,209,255,.18); border:1px solid rgba(19,209,255,.35); border-radius:999px; font-size:.78rem; } .player { padding: 10px 16px 16px; } .footer { color: var(--muted); padding: 42px 0 80px; text-align:center; border-top:1px solid rgba(255,255,255,.06); margin-top: 36px; } .filter-bar { display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 18px; } .filter-bar input, .filter-bar select { background:#0f0f17; color:var(--ink); border:1px solid rgba(255,255,255,.1); padding:10px 12px; border-radius: 12px; outline: none; box-shadow: 0 0 0 0 var(--ring); } .filter-bar input:focus, .filter-bar select:focus { box-shadow: 0 0 0 3px var(--ring); } .filter-bar button { padding:10px 14px; border-radius:12px; border:0; background:#232338; color:var(--ink); font-weight:800; } .filter-bar button[type="submit"] { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#000; } .notice { background:#101016; border:1px dashed rgba(255,255,255,.25); padding:12px 14px; border-radius:12px; color:#var(--muted); } .wave-divider { height: 18px; background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3)); mask: url('data:image/svg+xml;utf8,') no-repeat 50% 50% / 100% 100%; } .play-thumb { position: relative; display:block; } .play-thumb::after { content: '▶'; position: absolute; inset: 0; display:grid; place-items:center; font-weight:900; font-size:48px; color:#0a0a0f; background: linear-gradient(135deg, rgba(124,92,255,.25), rgba(19,209,255,.25)); } @media (prefers-reduced-motion: reduce){ .btn, .card { transition: none; } }