/* * Mewse Background System — mewse-bg.css * ======================================== * Unified 60/30/10 color ratio backgrounds for all page types. * Source of truth: landing page (data-page="landing") * * Palette: * Base: #2feeea (cyan) * Highlight: #fa00fa (magenta) * Highlight2: #ffa3a3 (coral) * Text: #22262b (dark) * Organic: #ffebcc (cream) * * Usage: Add data-page="TYPE" to . * Types: landing | dashboard | blog | niche | hook | library | list | pattern * * Specificity note: body[data-page] .bg-glow::before = (0,2,1) * which beats inline .bg-glow::before = (0,1,1) regardless of order. */ /* ────────────────────────────────────────────── SHARED VARIABLES (fallback if page doesn't define them inline) ────────────────────────────────────────────── */ :root { --base: #2feeea; --highlight: #fa00fa; --highlight2: #ffa3a3; --text: #22262b; --organic: #ffebcc; --bg: #f2eeea; --card-bg: rgba(255, 255, 255, 0.75); --card-border: rgba(47, 238, 234, 0.18); } /* ────────────────────────────────────────────── STRUCTURAL RULES (shared, all pages) ────────────────────────────────────────────── */ body { background: var(--bg); } .bg-glow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bg-glow::before { content: ''; position: absolute; top: -60%; left: -60%; width: 220%; height: 220%; animation: mewse-drift 20s ease-in-out infinite; } .content { position: relative; z-index: 2; } /* Single authoritative keyframe — all page variants use this */ @keyframes mewse-drift { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); } 25% { transform: translate(3%, -4%) scale(1.04) rotate(1.2deg); } 50% { transform: translate(-2%, 3%) scale(0.97) rotate(-0.8deg); } 75% { transform: translate(4%, 2%) scale(1.06) rotate(0.6deg); } } /* ────────────────────────────────────────────── NAV BASELINE — blur + subtle cream tint Flows seamlessly into page background ────────────────────────────────────────────── */ nav { backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07); } /* ══════════════════════════════════════════════ PAGE TYPE VARIATIONS 60% dominant · 30% secondary · 10% accent ══════════════════════════════════════════════ */ /* ── LANDING (source of truth) ───────────────── 60% cream (#ffebcc) — warm, organic 30% soft grey (#f2eeea) — gentle contrast 6% peach — bridging warmth 3% magenta — brand pulse 1% cyan — energy edge ───────────────────────────────────────────── */ body[data-page="landing"] .bg-glow::before, body:not([data-page]) .bg-glow::before { background: /* 60% cream — dominant blob */ radial-gradient(ellipse at 35% 30%, rgba(255, 235, 204, 0.72) 0%, transparent 55%), /* 30% soft grey */ radial-gradient(ellipse at 65% 65%, rgba(242, 238, 234, 0.55) 0%, transparent 50%), /* 6% peach */ radial-gradient(ellipse at 20% 75%, rgba(255, 181, 142, 0.40) 0%, transparent 45%), /* 3% magenta */ radial-gradient(ellipse at 80% 20%, rgba(250, 0, 250, 0.22) 0%, transparent 40%), /* 1% cyan */ radial-gradient(ellipse at 50% 50%, rgba(0, 250, 250, 0.18) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 18s; } body[data-page="landing"] nav, body:not([data-page]) nav { background: rgba(255, 235, 204, 0.68); } /* ── DASHBOARD ────────────────────────────────── 60% cream — grounded warmth 30% soft grey — professional calm 10% cyan/magenta split — interface accents ───────────────────────────────────────────── */ body[data-page="dashboard"] .bg-glow::before { background: radial-gradient(ellipse at 40% 25%, rgba(255, 235, 204, 0.65) 0%, transparent 55%), radial-gradient(ellipse at 70% 70%, rgba(242, 238, 234, 0.48) 0%, transparent 50%), radial-gradient(ellipse at 18% 78%, rgba(255, 235, 204, 0.30) 0%, transparent 45%), radial-gradient(ellipse at 82% 18%, rgba(47, 238, 234, 0.07) 0%, transparent 40%), radial-gradient(ellipse at 55% 55%, rgba(250, 0, 250, 0.05) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 25s; } body[data-page="dashboard"] nav { background: rgba(255, 235, 204, 0.72); } /* ── BLOG ─────────────────────────────────────── 60% cream — editorial warmth 30% warm grey — article readability 10% coral — human, storytelling warmth ───────────────────────────────────────────── */ body[data-page="blog"] .bg-glow::before { background: radial-gradient(ellipse at 30% 22%, rgba(255, 235, 204, 0.68) 0%, transparent 55%), radial-gradient(ellipse at 68% 68%, rgba(242, 238, 234, 0.52) 0%, transparent 50%), radial-gradient(ellipse at 50% 85%, rgba(255, 163, 163, 0.22) 0%, transparent 45%), radial-gradient(ellipse at 85% 15%, rgba(250, 0, 250, 0.06) 0%, transparent 35%), radial-gradient(ellipse at 20% 40%, rgba(255, 181, 142, 0.10) 0%, transparent 40%); animation-name: mewse-drift; animation-duration: 22s; } body[data-page="blog"] nav { background: rgba(255, 235, 204, 0.72); } /* ── NICHE PAGES (/hooks/:platform/:niche/:tone) ─ 60% cream — familiar base 30% cyan-tinted — platform/digital energy 10% magenta — brand accent ───────────────────────────────────────────── */ body[data-page="niche"] .bg-glow::before { background: radial-gradient(ellipse at 35% 30%, rgba(255, 235, 204, 0.65) 0%, transparent 55%), radial-gradient(ellipse at 68% 65%, rgba(47, 238, 234, 0.10) 0%, transparent 50%), radial-gradient(ellipse at 18% 80%, rgba(255, 235, 204, 0.40) 0%, transparent 45%), radial-gradient(ellipse at 82% 18%, rgba(250, 0, 250, 0.10) 0%, transparent 40%), radial-gradient(ellipse at 52% 52%, rgba(47, 238, 234, 0.06) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 20s; } body[data-page="niche"] nav { background: rgba(255, 235, 204, 0.72); } /* ── HOOK DETAIL (/hook/:id) ──────────────────── 60% cream — content focus 30% cyan-tinged — creative, hook energy 10% magenta — bold individual hook identity ───────────────────────────────────────────── */ body[data-page="hook"] .bg-glow::before { background: radial-gradient(ellipse at 40% 35%, rgba(255, 235, 204, 0.62) 0%, transparent 55%), radial-gradient(ellipse at 70% 60%, rgba(47, 238, 234, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 25% 75%, rgba(255, 181, 142, 0.18) 0%, transparent 45%), radial-gradient(ellipse at 80% 15%, rgba(250, 0, 250, 0.14) 0%, transparent 40%), radial-gradient(ellipse at 55% 50%, rgba(47, 238, 234, 0.05) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 19s; } body[data-page="hook"] nav { background: rgba(255, 235, 204, 0.72); } /* ── HOOK LIBRARY (/hooks/browse) ─────────────── 60% cream — approachable, browsable 30% neutral grey — organised, catalogue feel 10% cyan — discovery, explore accents ───────────────────────────────────────────── */ body[data-page="library"] .bg-glow::before { background: radial-gradient(ellipse at 30% 25%, rgba(255, 235, 204, 0.68) 0%, transparent 55%), radial-gradient(ellipse at 72% 68%, rgba(242, 238, 234, 0.50) 0%, transparent 50%), radial-gradient(ellipse at 55% 82%, rgba(47, 238, 234, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 85% 20%, rgba(250, 0, 250, 0.07) 0%, transparent 35%), radial-gradient(ellipse at 20% 50%, rgba(255, 235, 204, 0.30) 0%, transparent 45%); animation-name: mewse-drift; animation-duration: 22s; } body[data-page="library"] nav { background: rgba(255, 235, 204, 0.82); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); } /* ── LIST ARTICLES (/list/:slug) ──────────────── 60% cream — editorial warmth 30% warm grey — document-like calm 10% peach — approachable, consumable ───────────────────────────────────────────── */ body[data-page="list"] .bg-glow::before { background: radial-gradient(ellipse at 30% 20%, rgba(255, 235, 204, 0.70) 0%, transparent 55%), radial-gradient(ellipse at 68% 68%, rgba(242, 238, 234, 0.52) 0%, transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255, 181, 142, 0.16) 0%, transparent 45%), radial-gradient(ellipse at 82% 15%, rgba(250, 0, 250, 0.05) 0%, transparent 35%), radial-gradient(ellipse at 52% 50%, rgba(47, 238, 234, 0.04) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 24s; } body[data-page="list"] nav { background: rgba(255, 235, 204, 0.72); } /* ── PATTERN PAGES (/patterns/:slug) ──────────── 60% cream — grounded identity 30% magenta-tinted — conceptual boldness 10% cyan — technique, method precision ───────────────────────────────────────────── */ body[data-page="pattern"] .bg-glow::before { background: radial-gradient(ellipse at 35% 30%, rgba(255, 235, 204, 0.62) 0%, transparent 55%), radial-gradient(ellipse at 65% 65%, rgba(250, 0, 250, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 20% 75%, rgba(255, 235, 204, 0.40) 0%, transparent 45%), radial-gradient(ellipse at 80% 20%, rgba(47, 238, 234, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(250, 0, 250, 0.06) 0%, transparent 35%); animation-name: mewse-drift; animation-duration: 21s; } body[data-page="pattern"] nav { background: rgba(255, 235, 204, 0.72); }