/* ============================================ Tyler Shamy — Official Site Storm/emo/neon-tech: black, electric blue, forest + neon green, dark maroon ============================================ */ :root { /* Core palette — darker, moodier */ --bg: #010207; --bg-2: #03060c; --bg-elevated: #060a14; --bg-card: #080e1a; --border: #11192c; --border-2: #1a2540; /* Text — cool storm */ --text: #e6edf7; --text-muted: #7a8499; --text-dim: #404a62; /* Accents — black, royal/navy blue, forest green, deep purple, dark maroon */ --blue: #1a3f8c; /* royal navy */ --blue-glow: #3260c4; /* lifted royal */ --blue-deep: #0c1f4a; /* deep navy */ --cyan: #4a8ad6; /* muted steel-cyan */ --green: #0a2a18; /* deep forest */ --green-bright: #2a7e5a; /* dim forest mint (was neon green — pulled way back) */ --green-glow: #3e9a72; /* lit forest */ --green-neon: #2afa7f; /* full neon — used SPARINGLY */ --maroon: #3a0a18; /* dark maroon */ --maroon-bright: #6e1828; /* lit maroon */ --purple-deep: #1f0e3a; /* deep dark purple */ --purple-mid: #4a2580; /* mid purple */ --purple-light: #7a4ec4; /* lifted purple accent */ --storm: #0e1830; /* storm blue-gray */ /* Legacy variable names mapped to new palette so old rules keep working */ --purple: #4a2580; /* now: mid purple */ --purple-bright: #7a4ec4; /* now: lifted purple */ --magenta: #6e1828; /* now: lit maroon */ --teal: #3e9a72; /* now: lit forest */ --gradient-primary: linear-gradient(135deg, #0c1f4a 0%, #1a3f8c 50%, #3260c4 100%); --gradient-cool: linear-gradient(135deg, #4a8ad6 0%, #1a3f8c 100%); --gradient-text: linear-gradient(135deg, #4a8ad6 0%, #3260c4 55%, #5a4499 100%); --gradient-card: linear-gradient(135deg, rgba(26,63,140,0.10), rgba(50,96,196,0.06)); --gradient-storm: linear-gradient(180deg, rgba(14,24,48,0.7) 0%, rgba(1,2,7,0) 100%); --max-width: 1180px; --radius: 16px; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ THEME-MONO — pure royal blue + black + white alt Apply to for that page ============================================ */ body.theme-mono { --bg: #000000; --bg-2: #02040a; --bg-elevated: #04081a; --bg-card: #050b1f; --border: #102246; --border-2: #1c3066; --text: #ffffff; --text-muted: #b8c2dc; --text-dim: #5e6a8a; --blue: #1a3f8c; --blue-glow: #4a72c8; --blue-deep: #060f30; --cyan: #ffffff; --green: #1a3f8c; --green-bright: #3260c4; --green-glow: #4a72c8; --green-neon: #ffffff; --maroon: #060f30; --maroon-bright: #1a3f8c; --purple-deep: #060f30; --purple-mid: #1a3f8c; --purple-light: #4a72c8; --storm: #06122e; --purple: #1a3f8c; --purple-bright: #ffffff; --magenta: #1a3f8c; --teal: #ffffff; --gradient-primary: linear-gradient(135deg, #1a3f8c 0%, #4a72c8 100%); --gradient-cool: linear-gradient(135deg, #ffffff 0%, #4a72c8 100%); --gradient-text: linear-gradient(135deg, #ffffff 0%, #4a72c8 100%); --gradient-card: linear-gradient(135deg, rgba(26,63,140,0.10), rgba(74,114,200,0.04)); --gradient-storm: linear-gradient(180deg, rgba(6,18,46,0.8) 0%, rgba(0,0,0,0) 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; font-feature-settings: 'ss01', 'cv02'; } /* Layered glowing orbs — Euphoria neon-bath background */ body::before, body::after { content: ''; position: fixed; border-radius: 50%; filter: blur(140px); z-index: -2; pointer-events: none; } body::before { width: 700px; height: 700px; background: radial-gradient(circle, var(--purple) 0%, transparent 70%); opacity: 0.28; top: -250px; left: -200px; animation: drift 26s ease-in-out infinite; } body::after { width: 700px; height: 700px; background: radial-gradient(circle, var(--blue) 0%, transparent 70%); opacity: 0.32; bottom: -250px; right: -200px; animation: drift 32s ease-in-out infinite reverse; } .orb-green { position: fixed; width: 500px; height: 500px; background: radial-gradient(circle, var(--green-bright) 0%, transparent 70%); opacity: 0.18; filter: blur(140px); top: 40%; left: 50%; transform: translate(-50%, -50%); z-index: -2; animation: pulse 12s ease-in-out infinite; pointer-events: none; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, 80px) scale(1.1); } } @keyframes pulse { 0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.15); } } /* Beefier film grain overlay — adds analog texture */ body > .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.085; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; animation: grain-shift 0.4s steps(1) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 10% { transform: translate(-1%, -1%); } 20% { transform: translate(1%, 1%); } 30% { transform: translate(-2%, 1%); } 40% { transform: translate(2%, -1%); } 50% { transform: translate(-1%, 2%); } 60% { transform: translate(1%, -2%); } 70% { transform: translate(-2%, -1%); } 80% { transform: translate(2%, 2%); } 90% { transform: translate(-1%, -2%); } } /* ============ Navigation ============ */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); background: rgba(5, 6, 10, 0.6); border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.015em; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 0.6rem; } .nav-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--gradient-primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.85rem; box-shadow: 0 4px 20px rgba(26, 63, 140, 0.5); } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color var(--transition); position: relative; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 2px; background: var(--gradient-primary); border-radius: 2px; box-shadow: 0 0 12px var(--purple); } /* ============ Layout ============ */ main { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 5rem; } section { margin-bottom: 5rem; } /* ============ Typography ============ */ h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); } h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); margin-bottom: 1.25rem; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); margin-bottom: 1.5rem; } h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } p { color: var(--text-muted); margin-bottom: 1rem; font-size: 1rem; } p.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--text); max-width: 680px; line-height: 1.55; } a { color: var(--blue-glow); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--purple-bright); } .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.78rem; font-weight: 700; color: var(--purple-bright); margin-bottom: 1.25rem; } .tagline { font-style: italic; color: var(--text-muted); font-size: 1.05rem; margin-top: 0.5rem; } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.7rem; border-radius: 12px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all var(--transition); border: 1px solid transparent; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 28px rgba(26, 63, 140, 0.45); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(26, 63, 140, 0.65); color: #fff; } .btn-secondary { background: rgba(255, 255, 255, 0.04); color: var(--text); border-color: var(--border-2); backdrop-filter: blur(8px); } .btn-secondary:hover { background: rgba(43, 107, 255, 0.12); border-color: var(--blue); color: var(--text); } .hero-actions { display: flex; gap: 1rem; margin-top: 2.25rem; flex-wrap: wrap; } /* ============ Hero ============ */ .hero { padding: 4rem 0 2rem; min-height: 70vh; display: flex; flex-direction: column; justify-content: center; } /* ============ Cards ============ */ .grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.85rem; transition: all var(--transition); position: relative; overflow: hidden; background-image: var(--gradient-card); } .card::before { content: ''; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px; background: var(--gradient-primary); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--transition); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: transparent; } .card:hover::before { opacity: 1; } .card-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-bright); margin-bottom: 0.85rem; } .card h3 { color: var(--text); } .card p { font-size: 0.95rem; margin-bottom: 0; color: var(--text-muted); } .card-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 1rem; font-size: 0.9rem; font-weight: 600; color: var(--blue-glow); } /* ============ Embeds ============ */ .embed-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; overflow: hidden; } .embed-wrap iframe { display: block; width: 100%; border: 0; border-radius: 12px; } .video-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .video-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all var(--transition); } .video-card:hover { transform: translateY(-3px); border-color: var(--purple); box-shadow: 0 10px 40px rgba(26, 63, 140, 0.2); } .video-card .ratio { position: relative; width: 100%; padding-top: 56.25%; background: #000; } .video-card .ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-card .meta { padding: 1rem 1.25rem 1.25rem; } .video-card h3 { font-size: 1.05rem; margin-bottom: 0.25rem; } .video-card .meta p { font-size: 0.85rem; color: var(--text-dim); margin: 0; } /* ============ Bio columns ============ */ .bio-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; } .bio-art { position: relative; aspect-ratio: 4/5; border-radius: var(--radius); background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 50%, var(--magenta) 100%); overflow: hidden; box-shadow: 0 30px 80px rgba(26, 63, 140, 0.35); display: flex; align-items: flex-end; padding: 2rem; position: sticky; top: 100px; } .bio-art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(74, 138, 214, 0.5), transparent 50%), radial-gradient(circle at 80% 20%, rgba(62, 154, 114, 0.4), transparent 50%); } .bio-art-text { position: relative; z-index: 1; color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(0,0,0,0.5); } .bio-art-text small { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; margin-bottom: 0.5rem; } .bio-content p { font-size: 1rem; margin-bottom: 1.1rem; color: var(--text-muted); } .bio-content p:first-child { font-size: 1.1rem; color: var(--text); } @media (max-width: 800px) { .bio-grid { grid-template-columns: 1fr; } .bio-art { position: static; aspect-ratio: 3/2; } } /* ============ Credits ============ */ .credits-controls { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; } .chip { padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all var(--transition); font-family: inherit; } .chip:hover { color: var(--text); border-color: var(--border-2); } .chip.active { background: var(--gradient-primary); color: #fff; border-color: transparent; box-shadow: 0 4px 18px rgba(26, 63, 140, 0.45); } .credit-search { flex: 1; min-width: 200px; padding: 0.55rem 1rem; border-radius: 999px; background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); font-family: inherit; font-size: 0.9rem; outline: none; transition: border-color var(--transition); } .credit-search:focus { border-color: var(--blue); } .credit-search::placeholder { color: var(--text-dim); } .credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; } .credit-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--text); display: flex; flex-direction: column; gap: 0.15rem; transition: all 0.2s ease; } .credit-item:hover { border-color: var(--purple); transform: translateY(-1px); } .credit-item .meta { font-size: 0.75rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .credit-item.featured .meta { color: var(--purple-bright); } .credit-item .badge { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; padding: 0.15rem 0.5rem; border-radius: 4px; background: var(--green); color: var(--green-bright); margin-left: 0.4rem; } .section-heading { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; } .section-heading .count { color: var(--text-dim); font-size: 0.9rem; font-weight: 500; } /* ============ Stats ============ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 3rem 0; } .stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; text-align: center; } .stat-value { font-size: 2.25rem; font-weight: 800; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.03em; } .stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-top: 0.3rem; } /* ============ Contact ============ */ .contact-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; max-width: 640px; margin: 2rem auto; position: relative; overflow: hidden; } .contact-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, var(--purple), transparent 30%); opacity: 0.1; animation: rotate 20s linear infinite; } .contact-card > * { position: relative; z-index: 1; } @keyframes rotate { to { transform: rotate(360deg); } } .contact-email { display: inline-block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin: 1.5rem 0; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; } .socials { display: flex; justify-content: center; gap: 0.85rem; margin-top: 2rem; flex-wrap: wrap; } .social-link { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: all var(--transition); } .social-link:hover { border-color: var(--purple); color: var(--purple-bright); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26, 63, 140, 0.3); } .social-link.named { width: auto; padding: 0 1.1rem; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; } /* ============ Footer ============ */ footer { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem; text-align: center; color: var(--text-dim); font-size: 0.88rem; margin-top: 3rem; } footer a { color: var(--text-muted); } /* ============ Responsive ============ */ @media (max-width: 600px) { .nav-inner { padding: 1rem; } .nav-links { gap: 1.1rem; } .nav-links a { font-size: 0.88rem; } main { padding: 2rem 1rem 4rem; } .contact-card { padding: 2rem 1.5rem; } .bio-art { padding: 1.25rem; } .bio-art-text { font-size: 1.2rem; } } /* ============ Reveal animation ============ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============ Voiceover — Demo Reels ============ */ .vo-reels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .vo-reel-card { background: var(--gradient-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); position: relative; } .vo-reel-card:hover { border-color: var(--border-2); transform: translateY(-3px); box-shadow: 0 18px 45px rgba(43, 107, 255, 0.18), 0 0 0 1px rgba(26, 63, 140, 0.12); } .vo-reel-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .vo-reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Pending overlay — shown until iframe has a real src */ .vo-reel-pending { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; padding: 1.25rem; background: radial-gradient(circle at 30% 30%, rgba(26, 63, 140, 0.22), transparent 60%), radial-gradient(circle at 75% 70%, rgba(43, 107, 255, 0.22), transparent 60%), linear-gradient(135deg, #0c1320, #060912); pointer-events: none; } .vo-reel-frame iframe:not([src=""]) ~ .vo-reel-pending { display: none; } .vo-reel-pending-label { font-weight: 700; font-size: 1rem; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 0.01em; } .vo-reel-pending p { font-size: 0.82rem; color: var(--text-dim); margin: 0; } .vo-reel-meta { padding: 1rem 1.15rem 1.2rem; } .vo-reel-meta h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.2rem; } .vo-reel-meta p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; } /* ============ Voiceover — Featured Roles ============ */ .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .role-card { position: relative; padding: 1.4rem 1.25rem 1.25rem; background: var(--gradient-card); border: 1px solid var(--border); border-radius: 14px; transition: var(--transition); overflow: hidden; } .role-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-text); opacity: 0.6; } .role-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: 0 14px 35px rgba(26, 63, 140, 0.16); } .role-tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.6rem; } .role-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; line-height: 1.25; } .role-network { font-size: 0.85rem; color: var(--text-muted); } /* ============ Audio reel cards ============ */ .audio-card { display: flex; flex-direction: column; } .audio-art { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: radial-gradient(circle at 25% 30%, rgba(26, 63, 140, 0.32), transparent 60%), radial-gradient(circle at 80% 70%, rgba(43, 107, 255, 0.30), transparent 60%), radial-gradient(circle at 50% 110%, rgba(62, 154, 114, 0.24), transparent 60%), linear-gradient(135deg, #0c1320, #060912); border-bottom: 1px solid var(--border); } .audio-art-icon { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); box-shadow: 0 10px 30px rgba(26, 63, 140, 0.25); } .audio-art-label { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; } .audio-card audio { width: 100%; display: block; background: #0a0f1a; /* Native controls — try to color-correct in supporting browsers */ color-scheme: dark; } .audio-card audio::-webkit-media-controls-panel { background-color: #0a0f1a; } /* Native video element styling parity with iframe video cards */ .video-card video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; display: block; border: 0; } /* ============ Active nav link ============ */ .nav-links a.active { color: var(--text); position: relative; } .nav-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gradient-text); border-radius: 2px; } /* ============ Photos — Gallery ============ */ .photo-grid { column-count: 3; column-gap: 1rem; } @media (max-width: 900px) { .photo-grid { column-count: 2; } } @media (max-width: 560px) { .photo-grid { column-count: 1; } } .photo-cell { display: block; break-inside: avoid; margin-bottom: 1rem; border-radius: 14px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); cursor: zoom-in; transition: var(--transition); } .photo-cell.loading { display: none; /* hide until a photo lands */ } .photo-cell img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; } .photo-cell:hover { border-color: var(--purple-bright); box-shadow: 0 14px 35px rgba(26, 63, 140, 0.22); } .photo-cell:hover img { transform: scale(1.03); } .photo-empty { display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } .photo-empty-card { max-width: 520px; text-align: center; padding: 2.5rem 2rem; background: var(--gradient-card); border: 1px dashed var(--border-2); border-radius: var(--radius); } .photo-empty-label { font-weight: 700; font-size: 1.15rem; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.6rem; } .photo-empty p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; } .photo-empty code { font-family: 'SF Mono', 'Monaco', monospace; background: rgba(43, 107, 255, 0.12); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--blue-glow); font-size: 0.85em; } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: 2rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox img { max-width: 92vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 25px 80px rgba(26, 63, 140, 0.3); } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--text); width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: var(--transition); } .lightbox-close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); } /* ============================================ STORM ATMOSPHERE — rain, fog, scanlines, glitch, lightning ============================================ */ /* WEATHER CANVAS — JS-driven realistic rain (or snow when body has .weather-snow) */ body > .weather-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100vw; height: 100vh; } /* Per-theme weather color (tints rain/snow) */ :root { --weather-color: 175, 210, 250; } /* default cool blue */ body.theme-mono { --weather-color: 200, 230, 255; } /* near-white */ body.theme-blood { --weather-color: 255, 150, 165; } /* light red */ body.theme-acid { --weather-color: 150, 245, 195; } /* mint green */ body.theme-bee { --weather-color: 255, 230, 150; } /* light gold */ body.theme-violet { --weather-color: 220, 190, 255; } /* light lavender */ /* CRT STATIC — soft b&w noise behind content */ body > .static { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); background-size: 320px 320px; mix-blend-mode: overlay; animation: static-tick 0.09s steps(1) infinite; } /* FILM GRAIN — high-contrast salt-and-pepper noise ON TOP of content (CapCut-style) */ body > .filmgrain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 -2.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 280px 280px; mix-blend-mode: overlay; animation: filmgrain-shift 0.07s steps(1) infinite; } @keyframes filmgrain-shift { 0% { background-position: 0 0; } 10% { background-position: -77px 41px; } 20% { background-position: 113px -91px; } 30% { background-position: -147px 178px; } 40% { background-position: 89px 64px; } 50% { background-position: -53px -119px; } 60% { background-position: 173px -47px; } 70% { background-position: -128px 92px; } 80% { background-position: 67px 198px; } 90% { background-position: -91px -73px; } 100% { background-position: 211px 38px; } } @keyframes static-tick { 0% { background-position: 0 0; } 10% { background-position: -100px 50px; } 20% { background-position: 50px -150px; } 30% { background-position: -200px 200px; } 40% { background-position: 80px 80px; } 50% { background-position: -50px -90px; } 60% { background-position: 120px -200px; } 70% { background-position: -180px 30px; } 80% { background-position: 90px 170px; } 90% { background-position: -110px -60px; } 100% { background-position: 200px 100px; } } @keyframes rainfall { from { transform: translateY(0); } to { transform: translateY(50%); } } /* CIGARETTE SMOKE — flat translucent wisps, no glow */ body > .fog { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* NORMAL blend = translucent overlay (no spotlight glow) */ mix-blend-mode: normal; opacity: 0.7; } body > .fog.fog-wisps::before, body > .fog.fog-wisps::after { display: none; } .smoke-puff { position: absolute; bottom: -25%; border-radius: 40% 60% 55% 45% / 55% 45% 65% 35%; /* Flat uniform translucent fill — no bright center */ background: rgba(165, 175, 190, 0.045); pointer-events: none; --drift: 0px; --spin: 0deg; animation-name: smoke-wisp; animation-timing-function: cubic-bezier(0.4, 0.05, 0.6, 0.95); animation-iteration-count: infinite; will-change: transform, opacity; filter: url(#smoke-distort) blur(8px); } @supports not (filter: url(#smoke-distort)) { .smoke-puff { filter: blur(22px); } } @keyframes smoke-wisp { 0% { transform: translate(0, 0) scale(0.3, 0.5) rotate(0deg); opacity: 0; } 12% { opacity: 0.85; } 45% { opacity: 1; transform: translate(calc(var(--drift) * 0.45), -55vh) scale(1, 1.4) rotate(calc(var(--spin) * 0.5)); } 100% { transform: translate(var(--drift), -140vh) scale(1.7, 2.5) rotate(var(--spin)); opacity: 0; } } /* Per-theme tinted smoke — flat color, no gradient */ body.theme-blood .smoke-puff { background: rgba(180, 130, 145, 0.045); } body.theme-acid .smoke-puff { background: rgba(140, 195, 170, 0.045); } body.theme-bee .smoke-puff { background: rgba(195, 175, 115, 0.045); } body.theme-violet .smoke-puff { background: rgba(180, 155, 215, 0.050); } body.theme-mono .smoke-puff { background: rgba(180, 200, 230, 0.045); } /* CLOUDS — large slow drifting masses, lit from below by city/storm */ body > .clouds { position: fixed; inset: -5% -25% 30% -25%; z-index: -1; pointer-events: none; opacity: 1; } body > .clouds::before, body > .clouds::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 32% at 18% 18%, rgba(78, 120, 180, 0.32), transparent 60%), radial-gradient(ellipse 48% 28% at 62% 12%, rgba(60, 95, 155, 0.28), transparent 60%), radial-gradient(ellipse 65% 35% at 88% 28%, rgba(85, 130, 195, 0.30), transparent 60%); filter: blur(34px); animation: clouds-drift-a 80s linear infinite; will-change: transform; mix-blend-mode: screen; } body > .clouds::after { background: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(70, 110, 175, 0.28), transparent 60%), radial-gradient(ellipse 52% 30% at 78% 22%, rgba(95, 75, 175, 0.20), transparent 60%), radial-gradient(ellipse 45% 26% at 110% 6%, rgba(60, 100, 165, 0.25), transparent 60%); animation: clouds-drift-b 130s linear infinite; opacity: 0.9; mix-blend-mode: screen; } @keyframes clouds-drift-a { from { transform: translateX(-10%); } to { transform: translateX(10%); } } @keyframes clouds-drift-b { from { transform: translateX(12%); } to { transform: translateX(-12%); } } /* SCANLINES — subtle CRT overlay */ body > .scanlines { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: repeating-linear-gradient( 0deg, rgba(74, 138, 214, 0.04) 0, rgba(74, 138, 214, 0.04) 1px, transparent 1px, transparent 4px ); opacity: 0.4; mix-blend-mode: screen; } /* LIGHTNING — more frequent multi-position flashes */ body > .lightning { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, transparent, transparent 60%); animation: lightning-flash 9s ease-in-out infinite; } @keyframes lightning-flash { 0%, 24%, 27%, 29%, 55%, 78%, 81%, 100% { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(150, 215, 255, 0), transparent 60%); } 25% { background: radial-gradient(ellipse 80% 60% at 28% 0%, rgba(160, 220, 255, 0.65), transparent 60%); } 25.5% { background: radial-gradient(ellipse 80% 60% at 28% 0%, rgba(160, 220, 255, 0.10), transparent 60%); } 26% { background: radial-gradient(ellipse 80% 60% at 28% 0%, rgba(160, 220, 255, 0.40), transparent 60%); } 79% { background: radial-gradient(ellipse 80% 60% at 76% 0%, rgba(180, 230, 255, 0.55), transparent 60%); } 79.5% { background: radial-gradient(ellipse 80% 60% at 76% 0%, rgba(180, 230, 255, 0.08), transparent 60%); } 80% { background: radial-gradient(ellipse 80% 60% at 76% 0%, rgba(180, 230, 255, 0.35), transparent 60%); } } /* GLITCH headline effect — subtle chromatic aberration + jitter */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; font: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; background: none; -webkit-text-fill-color: currentColor; } .glitch::before { color: #ff3a8e; /* magenta-cyan chromatic split — intentional, this is the glitch effect */ opacity: 0.85; mix-blend-mode: screen; transform: translate(-2px, 0); animation: glitch-x 4s infinite; z-index: -1; } .glitch::after { color: #1ad6ff; /* cyan side of chromatic split */ opacity: 0.85; mix-blend-mode: screen; transform: translate(2px, 0); animation: glitch-y 4s infinite reverse; z-index: -2; } @keyframes glitch-x { 0%, 78%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); } 80% { transform: translate(-7px, 0); clip-path: inset(15% 0 60% 0); } 83% { transform: translate(-4px, 2px); clip-path: inset(50% 0 25% 0); } 86% { transform: translate(-9px, 0); clip-path: inset(75% 0 5% 0); } 89% { transform: translate(-3px, -1px); clip-path: inset(35% 0 40% 0); } 92% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); } } @keyframes glitch-y { 0%, 76%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); } 78% { transform: translate(7px, -2px); clip-path: inset(40% 0 20% 0); } 82% { transform: translate(3px, 1px); clip-path: inset(10% 0 70% 0); } 85% { transform: translate(9px, 0); clip-path: inset(60% 0 10% 0); } 88% { transform: translate(4px, 1px); clip-path: inset(20% 0 50% 0); } 91% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); } } /* Chromatic aberration on h2 — subtle, persistent (theme-tinted) */ h2 { position: relative; text-shadow: -1px 0 0 rgba(122, 78, 196, 0.40), 1px 0 0 rgba(74, 138, 214, 0.40); } body.theme-blood h2 { text-shadow: -1px 0 0 rgba(176, 24, 46, 0.45), 1px 0 0 rgba(255, 80, 96, 0.40); } body.theme-acid h2 { text-shadow: -1px 0 0 rgba(21, 160, 100, 0.45), 1px 0 0 rgba(42, 250, 127, 0.40); } body.theme-bee h2 { text-shadow: -1px 0 0 rgba(200, 148, 26, 0.45), 1px 0 0 rgba(255, 216, 74, 0.40); } body.theme-violet h2 { text-shadow: -1px 0 0 rgba(110, 62, 196, 0.50), 1px 0 0 rgba(200, 164, 255, 0.40); } body.theme-mono h2 { text-shadow: -1px 0 0 rgba(74, 114, 200, 0.45), 1px 0 0 rgba(255, 255, 255, 0.40); } /* ============ Atlas Talent rep card on Contact page ============ */ .rep-card { background: var(--gradient-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 2rem 1.5rem; position: relative; overflow: hidden; } .rep-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-text); opacity: 0.7; } .rep-header h2 { font-size: 1.6rem; margin: 0.3rem 0 0; } .rep-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .rep-list li { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; } .rep-cat { font-family: 'VT323', monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.4rem; line-height: 1.3; } .rep-name { font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--text); margin-bottom: 0.2rem; } .rep-email { font-size: 0.9rem; color: var(--blue-glow); text-decoration: none; word-break: break-all; } .rep-foot { margin-top: 1.4rem; font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.04em; } /* ============ Voiceover booking cards ============ */ .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 720px) { .booking-grid { grid-template-columns: 1fr; } } .booking-card { background: var(--gradient-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.5rem; position: relative; overflow: hidden; } .booking-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-text); opacity: 0.7; } .booking-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .booking-email { display: inline-block; font-family: 'Chakra Petch', monospace; font-size: 1.05rem; font-weight: 600; margin: 0.3rem 0 0.7rem; background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .booking-card p { font-size: 0.88rem; color: var(--text-muted); margin: 0.3rem 0; } .booking-socials { margin-top: 0.85rem; font-size: 0.85rem; color: var(--text-dim); display: flex; gap: 0.5rem; align-items: center; } .booking-socials a { color: var(--blue-glow); text-decoration: none; } .booking-contacts { list-style: none; margin: 0.7rem 0 0; padding: 0; } .booking-contacts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--border); font-size: 0.92rem; } .booking-contacts li:last-child { border-bottom: 0; } .booking-contacts li span { font-family: 'VT323', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-size: 0.85rem; } .booking-contacts li a { color: var(--blue-glow); text-decoration: none; font-weight: 500; } /* NEON HERO NAME — bright neon-sign glow on the home name */ .hero .neon-name { color: #f3f7ff; text-shadow: 0 0 4px rgba(255, 255, 255, 0.85), 0 0 12px rgba(74, 138, 214, 0.85), 0 0 28px rgba(50, 96, 196, 0.75), 0 0 60px rgba(50, 96, 196, 0.55); animation: neon-flicker 4.5s infinite; } @keyframes neon-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px rgba(255, 255, 255, 0.85), 0 0 12px rgba(74, 138, 214, 0.85), 0 0 28px rgba(50, 96, 196, 0.75), 0 0 60px rgba(50, 96, 196, 0.55); opacity: 1; } 20%, 24%, 55% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.4); opacity: 0.7; } } /* HEADLINES — Major Mono Display everywhere (one font, less busy) */ h1 { font-family: 'Major Mono Display', 'Chakra Petch', monospace; font-weight: 400; letter-spacing: -0.015em; text-transform: lowercase; text-shadow: 0 0 18px rgba(74, 138, 214, 0.30); } h2 { font-family: 'Chakra Petch', 'Inter', sans-serif; font-weight: 700; letter-spacing: -0.01em; text-transform: none; } h3 { font-family: 'Chakra Petch', 'Inter', sans-serif; font-weight: 600; letter-spacing: 0; } .nav-brand { font-family: 'Major Mono Display', 'Chakra Petch', monospace; font-weight: 400; letter-spacing: -0.02em; text-transform: lowercase; font-size: 1.05rem; } h1.glitch { position: relative; } /* EYEBROW — VT323 terminal pixel, blue-glow (purple just a touch) */ .eyebrow { font-family: 'VT323', 'JetBrains Mono', monospace; font-weight: 400; font-size: 1rem; letter-spacing: 0.18em; color: var(--blue-glow); text-shadow: 0 0 10px rgba(74, 138, 214, 0.5); } .section-heading h2::before { content: '// '; font-family: 'VT323', monospace; color: var(--blue-glow); opacity: 0.7; font-size: 0.85em; margin-right: 0.15em; letter-spacing: 0; } /* Active nav: blue underline w/ subtle purple shadow */ .nav-links a.active::after { background: linear-gradient(90deg, var(--blue-glow), var(--cyan)); box-shadow: 0 0 12px var(--blue-glow), 0 0 4px var(--cyan); } /* ============================================ PER-PAGE THEME OVERRIDES — apply via theme-mono = royal blue + black + white (defined above) theme-blood = punk dark red + black theme-acid = dark forest green + black theme-bee = dark mustard yellow + black ============================================ */ /* THEME-BLOOD — punk emo, dark red + black */ body.theme-blood { --bg: #08010a; --bg-2: #0d0408; --bg-elevated: #110612; --bg-card: #150810; --border: #2a0e1a; --border-2: #401522; --text: #f4eaeb; --text-muted: #b0888c; --text-dim: #6c4c52; --blue: #6a0a1e; --blue-glow: #b0182e; --blue-deep: #2a040d; --cyan: #ff5060; --green: #2a0610; --green-bright: #6a0a1e; --green-glow: #b0182e; --green-neon: #ff5060; --maroon: #3a0a18; --maroon-bright: #c92242; --purple-deep: #1a040a; --purple-mid: #6a0a1e; --purple-light: #ff5060; --storm: #1a0608; --purple: #6a0a1e; --purple-bright: #ff5060; --magenta: #c92242; --teal: #c92242; --gradient-primary: linear-gradient(135deg, #6a0a1e 0%, #b0182e 100%); --gradient-cool: linear-gradient(135deg, #ff5060 0%, #6a0a1e 100%); --gradient-text: linear-gradient(135deg, #ff5060 0%, #c92242 50%, #ffffff 100%); --gradient-card: linear-gradient(135deg, rgba(106,10,30,0.12), rgba(255,80,96,0.05)); --gradient-storm: linear-gradient(180deg, rgba(26,6,8,0.8) 0%, rgba(8,1,10,0) 100%); } body.theme-blood h1 { font-family: 'Major Mono Display', 'Chakra Petch', monospace; letter-spacing: -0.015em; text-transform: lowercase; } body.theme-blood .eyebrow { color: var(--blue-glow); text-shadow: 0 0 10px rgba(176, 24, 46, 0.6); } body.theme-blood .section-heading h2::before { color: var(--blue-glow); } /* Tint rain to match theme */ body.theme-blood > .rain::before { background-image: repeating-linear-gradient( 176deg, transparent 0, transparent 3px, rgba(255, 130, 140, 0.32) 3px, rgba(255, 130, 140, 0.32) 4px, transparent 4px, transparent 7px, rgba(200, 60, 80, 0.22) 7px, rgba(200, 60, 80, 0.22) 8px, transparent 8px, transparent 12px); } body.theme-blood > .rain::after { background-image: repeating-linear-gradient( 173deg, transparent 0, transparent 9px, rgba(160, 35, 60, 0.22) 9px, rgba(160, 35, 60, 0.22) 10px, transparent 10px, transparent 18px); } body.theme-blood > .clouds::before { background: radial-gradient(ellipse 55% 32% at 18% 18%, rgba(180, 50, 80, 0.30), transparent 60%), radial-gradient(ellipse 48% 28% at 62% 12%, rgba(155, 35, 65, 0.26), transparent 60%), radial-gradient(ellipse 65% 35% at 88% 28%, rgba(195, 70, 95, 0.28), transparent 60%); } body.theme-blood > .clouds::after { background: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(175, 50, 80, 0.26), transparent 60%), radial-gradient(ellipse 52% 30% at 78% 22%, rgba(140, 30, 50, 0.22), transparent 60%), radial-gradient(ellipse 45% 26% at 110% 6%, rgba(165, 40, 65, 0.24), transparent 60%); } /* THEME-ACID — dark forest green + black */ body.theme-acid { --bg: #02080a; --bg-2: #051010; --bg-elevated: #071416; --bg-card: #0a181c; --border: #14262a; --border-2: #1c3a40; --text: #e8f5ee; --text-muted: #8aa69b; --text-dim: #4d6862; --blue: #0a4830; --blue-glow: #15a064; --blue-deep: #021a10; --cyan: #2afa7f; --green: #0a3820; --green-bright: #15a064; --green-glow: #2afa7f; --green-neon: #2afa7f; --maroon: #052414; --maroon-bright: #15a064; --purple-deep: #052414; --purple-mid: #0a4830; --purple-light: #2afa7f; --storm: #061a14; --purple: #15a064; --purple-bright: #2afa7f; --magenta: #15a064; --teal: #2afa7f; --gradient-primary: linear-gradient(135deg, #0a4830 0%, #15a064 100%); --gradient-cool: linear-gradient(135deg, #2afa7f 0%, #0a4830 100%); --gradient-text: linear-gradient(135deg, #2afa7f 0%, #15a064 50%, #e8f5ee 100%); --gradient-card: linear-gradient(135deg, rgba(21,160,100,0.12), rgba(42,250,127,0.05)); --gradient-storm: linear-gradient(180deg, rgba(6,26,20,0.8) 0%, rgba(2,8,10,0) 100%); } body.theme-acid h1 { font-family: 'Major Mono Display', 'Chakra Petch', monospace; letter-spacing: -0.015em; text-transform: lowercase; } body.theme-acid .eyebrow { color: var(--green-glow); text-shadow: 0 0 10px rgba(42, 250, 127, 0.5); } body.theme-acid .section-heading h2::before { color: var(--green-glow); } body.theme-acid > .rain::before { background-image: repeating-linear-gradient( 176deg, transparent 0, transparent 3px, rgba(120, 230, 165, 0.32) 3px, rgba(120, 230, 165, 0.32) 4px, transparent 4px, transparent 7px, rgba(60, 180, 110, 0.22) 7px, rgba(60, 180, 110, 0.22) 8px, transparent 8px, transparent 12px); } body.theme-acid > .rain::after { background-image: repeating-linear-gradient( 173deg, transparent 0, transparent 9px, rgba(40, 150, 90, 0.22) 9px, rgba(40, 150, 90, 0.22) 10px, transparent 10px, transparent 18px); } body.theme-acid > .clouds::before { background: radial-gradient(ellipse 55% 32% at 18% 18%, rgba(50, 150, 95, 0.28), transparent 60%), radial-gradient(ellipse 48% 28% at 62% 12%, rgba(30, 130, 75, 0.24), transparent 60%), radial-gradient(ellipse 65% 35% at 88% 28%, rgba(60, 165, 110, 0.26), transparent 60%); } body.theme-acid > .clouds::after { background: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(40, 140, 85, 0.24), transparent 60%), radial-gradient(ellipse 52% 30% at 78% 22%, rgba(70, 175, 120, 0.20), transparent 60%), radial-gradient(ellipse 45% 26% at 110% 6%, rgba(50, 155, 100, 0.22), transparent 60%); } /* THEME-BEE — dark mustard + black */ body.theme-bee { --bg: #0a0805; --bg-2: #0e0c08; --bg-elevated: #14120a; --bg-card: #1a160c; --border: #2c2412; --border-2: #44381c; --text: #f7efd6; --text-muted: #b09c70; --text-dim: #6a5a3c; --blue: #6a4e0a; --blue-glow: #c8941a; --blue-deep: #2a1d04; --cyan: #ffd84a; --green: #1a1408; --green-bright: #c8941a; --green-glow: #ffd84a; --green-neon: #ffd84a; --maroon: #0a0805; --maroon-bright: #c8941a; --purple-deep: #0a0805; --purple-mid: #6a4e0a; --purple-light: #ffd84a; --storm: #1a1408; --purple: #c8941a; --purple-bright: #ffd84a; --magenta: #c8941a; --teal: #ffd84a; --gradient-primary: linear-gradient(135deg, #6a4e0a 0%, #c8941a 100%); --gradient-cool: linear-gradient(135deg, #ffd84a 0%, #6a4e0a 100%); --gradient-text: linear-gradient(135deg, #ffd84a 0%, #c8941a 50%, #f7efd6 100%); --gradient-card: linear-gradient(135deg, rgba(200,148,26,0.12), rgba(255,216,74,0.05)); --gradient-storm: linear-gradient(180deg, rgba(26,20,8,0.8) 0%, rgba(10,8,5,0) 100%); } body.theme-bee h1 { font-family: 'Major Mono Display', 'Chakra Petch', monospace; letter-spacing: -0.015em; text-transform: lowercase; } body.theme-bee .eyebrow { color: var(--green-glow); text-shadow: 0 0 10px rgba(255, 216, 74, 0.5); } body.theme-bee .section-heading h2::before { color: var(--green-glow); } body.theme-bee > .rain::before { background-image: repeating-linear-gradient( 176deg, transparent 0, transparent 3px, rgba(255, 230, 130, 0.30) 3px, rgba(255, 230, 130, 0.30) 4px, transparent 4px, transparent 7px, rgba(220, 180, 60, 0.22) 7px, rgba(220, 180, 60, 0.22) 8px, transparent 8px, transparent 12px); } body.theme-bee > .rain::after { background-image: repeating-linear-gradient( 173deg, transparent 0, transparent 9px, rgba(180, 140, 30, 0.22) 9px, rgba(180, 140, 30, 0.22) 10px, transparent 10px, transparent 18px); } body.theme-bee > .clouds::before { background: radial-gradient(ellipse 55% 32% at 18% 18%, rgba(195, 150, 55, 0.28), transparent 60%), radial-gradient(ellipse 48% 28% at 62% 12%, rgba(170, 125, 35, 0.24), transparent 60%), radial-gradient(ellipse 65% 35% at 88% 28%, rgba(210, 165, 70, 0.26), transparent 60%); } body.theme-bee > .clouds::after { background: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(180, 140, 50, 0.24), transparent 60%), radial-gradient(ellipse 52% 30% at 78% 22%, rgba(155, 110, 30, 0.20), transparent 60%), radial-gradient(ellipse 45% 26% at 110% 6%, rgba(195, 150, 55, 0.22), transparent 60%); } /* THEME-MONO eyebrow tweak */ body.theme-mono .eyebrow { color: var(--blue-glow); text-shadow: 0 0 10px rgba(74, 114, 200, 0.5); } body.theme-mono .section-heading h2::before { color: var(--blue-glow); } body.theme-mono h1 { font-family: 'Major Mono Display', 'Bebas Neue', monospace; letter-spacing: -0.02em; text-transform: lowercase; } /* THEME-VIOLET — deep dark purple + black (atmospheric, music vibe) */ body.theme-violet { --bg: #06030d; --bg-2: #0a0613; --bg-elevated: #110a1f; --bg-card: #160e2a; --border: #281a45; --border-2: #3a2666; --text: #ede6f7; --text-muted: #9a8cb8; --text-dim: #5a4d7a; --blue: #2e1a55; --blue-glow: #6e3ec4; --blue-deep: #1a0e3a; --cyan: #c8a4ff; --green: #1a0e3a; --green-bright: #6e3ec4; --green-glow: #a06ee8; --green-neon: #c8a4ff; --maroon: #1a0e3a; --maroon-bright: #6e3ec4; --purple-deep: #150728; --purple-mid: #4a2580; --purple-light: #a06ee8; --storm: #1a0e3a; --purple: #6e3ec4; --purple-bright: #c8a4ff; --magenta: #4a2580; --teal: #c8a4ff; --gradient-primary: linear-gradient(135deg, #2e1a55 0%, #6e3ec4 100%); --gradient-cool: linear-gradient(135deg, #c8a4ff 0%, #2e1a55 100%); --gradient-text: linear-gradient(135deg, #c8a4ff 0%, #a06ee8 50%, #6e3ec4 100%); --gradient-card: linear-gradient(135deg, rgba(110,62,196,0.12), rgba(200,164,255,0.05)); --gradient-storm: linear-gradient(180deg, rgba(26,14,58,0.8) 0%, rgba(6,3,13,0) 100%); } body.theme-violet h1 { font-family: 'Major Mono Display', 'Chakra Petch', monospace; letter-spacing: -0.015em; text-transform: lowercase; } body.theme-violet .eyebrow { color: var(--purple-light); text-shadow: 0 0 12px rgba(160, 110, 232, 0.6); } body.theme-violet .section-heading h2::before { color: var(--purple-light); } body.theme-violet > .rain::before { background-image: repeating-linear-gradient( 181deg, transparent 0, transparent 11px, rgba(220, 175, 255, 0.55) 11px, rgba(220, 175, 255, 0.55) 12px, transparent 12px, transparent 16px, rgba(220, 175, 255, 0) 16px, rgba(220, 175, 255, 0) 90px), repeating-linear-gradient( 179deg, transparent 0, transparent 5px, rgba(190, 140, 245, 0.32) 5px, rgba(190, 140, 245, 0.32) 6px, transparent 6px, transparent 9px, transparent 9px, transparent 67px); } body.theme-violet > .rain::after { background-image: repeating-linear-gradient( 178deg, transparent 0, transparent 7px, rgba(160, 110, 230, 0.30) 7px, rgba(160, 110, 230, 0.30) 8px, transparent 8px, transparent 12px, transparent 12px, transparent 53px), repeating-linear-gradient( 182deg, transparent 0, transparent 13px, rgba(135, 80, 215, 0.22) 13px, rgba(135, 80, 215, 0.22) 14px, transparent 14px, transparent 19px, transparent 19px, transparent 73px); } body.theme-violet > .rain > .rain-layer { background-image: repeating-linear-gradient( 180deg, transparent 0, transparent 17px, rgba(110, 62, 196, 0.20) 17px, rgba(110, 62, 196, 0.20) 18px, transparent 18px, transparent 23px, transparent 23px, transparent 89px), repeating-linear-gradient( 183deg, transparent 0, transparent 23px, rgba(85, 40, 160, 0.15) 23px, rgba(85, 40, 160, 0.15) 24px, transparent 24px, transparent 31px, transparent 31px, transparent 113px); } body.theme-violet > .clouds::before { background: radial-gradient(ellipse 55% 32% at 18% 18%, rgba(140, 95, 220, 0.30), transparent 60%), radial-gradient(ellipse 48% 28% at 62% 12%, rgba(115, 70, 195, 0.26), transparent 60%), radial-gradient(ellipse 65% 35% at 88% 28%, rgba(160, 115, 235, 0.28), transparent 60%); } body.theme-violet > .clouds::after { background: radial-gradient(ellipse 60% 34% at 30% 10%, rgba(135, 90, 215, 0.26), transparent 60%), radial-gradient(ellipse 52% 30% at 78% 22%, rgba(95, 50, 175, 0.22), transparent 60%), radial-gradient(ellipse 45% 26% at 110% 6%, rgba(125, 80, 205, 0.24), transparent 60%); } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { body > .rain::before, body > .rain::after, body > .fog, body > .lightning, body > .grain, .glitch::before, .glitch::after { animation: none !important; } }