/* =========================================================
RYDIMAI — Brand Website Stylesheet
Rhythm. Imagination. AI.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
:root{
/* Brand palette */
--bg-black:#0a0c12;
--bg-panel:#10131b;
--bg-panel-2:#151925;
--bg-cream:#f6f1e7;
--bg-cream-2:#efe8d8;
--text-light:#f5f1e6;
--text-light-muted:#b7b3ac;
--text-dark:#191712;
--text-dark-muted:#5c584f;
--gold:#d4a857;
--gold-soft:#e8c98a;
--gold-deep:#a97f34;
--border-soft:rgba(245,241,230,0.12);
--border-soft-dark:rgba(25,23,18,0.12);
--radius-sm:6px;
--radius-md:14px;
--radius-lg:26px;
--shadow-soft:0 20px 60px rgba(0,0,0,0.35);
--shadow-gold:0 10px 30px rgba(212,168,87,0.25);
--container:1180px;
--font-display:'Playfair Display', Georgia, serif;
--font-nav:'Poppins', 'Segoe UI', sans-serif;
--font-body:'Inter', 'Segoe UI', sans-serif;
}
/* ---------- Light mode ----------
Toggled via [data-theme="light"] on (js/main.js), persisted
in localStorage. The hero/manifesto/footer keep their own dedicated
light-mode gradients below so cinematic sections stay on-brand in
both modes rather than just inverting. */
html[data-theme="light"]{
--bg-black:#f7f2e6;
--bg-panel:#ffffff;
--bg-panel-2:#f4efe2;
--text-light:#1b1811;
--text-light-muted:#655f53;
--border-soft:rgba(25,23,18,0.12);
}
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ transition:background-color .3s ease, color .3s ease; }
body{
background:var(--bg-black);
color:var(--text-light);
font-family:var(--font-body);
font-weight:400;
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea{ font-family:inherit; }
.container{
max-width:var(--container);
margin:0 auto;
padding:0 28px;
}
section{ position:relative; }
/* ---------- Utility: gradient "photo" placeholders ----------
These panels stand in for lifestyle / cinematic photography.
Swap any element with class="ph-media ph-XXXX" for a real
![]()
or tag when photography becomes available —
see the deployment guide for exact swap instructions. */
.ph-media{
position:relative;
overflow:hidden;
background:
radial-gradient(120% 140% at 15% 10%, rgba(212,168,87,0.22), transparent 55%),
radial-gradient(100% 120% at 90% 90%, rgba(90,70,140,0.28), transparent 60%),
linear-gradient(160deg,#171b26 0%, #0b0d13 55%, #05060a 100%);
isolation:isolate;
}
.ph-media::before{
content:"";
position:absolute; inset:0;
background-image:
repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px);
opacity:.5;
mix-blend-mode:overlay;
}
.ph-media::after{
content:"";
position:absolute; inset:0;
box-shadow: inset 0 0 120px rgba(0,0,0,0.55);
}
.ph-media .ph-tag{
position:absolute;
bottom:14px; right:16px;
font-family:var(--font-nav);
font-size:.66rem;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(245,241,230,0.35);
z-index:2;
pointer-events:none;
}
.ph-media-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0;
}
.ph-media-scrim{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:linear-gradient(180deg, rgba(5,6,10,0.15) 0%, rgba(5,6,10,0.6) 60%, rgba(5,6,10,0.88) 100%);
}
.ph-media-scrim--center{
background:
radial-gradient(70% 90% at 50% 50%, rgba(5,6,10,0.55) 0%, rgba(5,6,10,0.72) 100%);
}
.ph-media--warm{
background:
radial-gradient(130% 120% at 20% 20%, rgba(233,180,90,0.35), transparent 55%),
radial-gradient(110% 130% at 100% 100%, rgba(170,90,60,0.30), transparent 60%),
linear-gradient(150deg,#241a12 0%,#120d0a 60%,#070505 100%);
}
.ph-media--night{
background:
radial-gradient(120% 120% at 80% 0%, rgba(120,140,220,0.22), transparent 55%),
radial-gradient(110% 130% at 0% 100%, rgba(212,168,87,0.18), transparent 55%),
linear-gradient(170deg,#0c1018 0%,#080a10 60%,#040508 100%);
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5em;
font-family:var(--font-nav);
font-size:.82rem;
font-weight:600;
letter-spacing:.10em;
text-transform:uppercase;
padding:15px 30px;
border-radius:999px;
border:1px solid transparent;
transition:all .25s ease;
white-space:nowrap;
}
.btn-gold{
background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));
color:#1a1206;
box-shadow:var(--shadow-gold);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(212,168,87,0.35); }
.btn-outline{
border-color:rgba(245,241,230,0.4);
color:var(--text-light);
background:transparent;
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-soft); background:rgba(212,168,87,0.06); }
.btn-outline-dark{
border-color:rgba(25,23,18,0.35);
color:var(--text-dark);
background:transparent;
}
.btn-outline-dark:hover{ border-color:var(--gold-deep); color:var(--gold-deep); background:rgba(169,127,52,0.06); }
.btn-sm{ padding:11px 22px; font-size:.72rem; }
/* ---------- Header / Nav ---------- */
.site-header{
position:fixed;
top:0; left:0; right:0;
z-index:1000;
padding:20px 0;
transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
background:rgba(10,12,18,0.88);
backdrop-filter:blur(10px);
padding:12px 0;
box-shadow:0 8px 30px rgba(0,0,0,0.3);
border-bottom:1px solid var(--border-soft);
}
.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.brand{
display:flex;
align-items:center;
gap:12px;
}
.brand-logo{
height:32px;
width:auto;
display:block;
transition:opacity .2s ease, transform .2s ease;
}
.brand:hover .brand-logo{ opacity:.85; }
.footer-brand .brand-logo{ height:38px; margin-bottom:6px; }
.brand-mark{
width:38px; height:38px;
border-radius:50%;
display:grid;
place-items:center;
background:radial-gradient(circle at 30% 25%, var(--gold-soft), var(--gold-deep) 65%, #6b4d1c 100%);
color:#1a1206;
font-family:var(--font-display);
font-weight:700;
font-style:italic;
font-size:1.05rem;
box-shadow:0 6px 18px rgba(212,168,87,0.35);
}
.main-nav ul{
display:flex;
align-items:center;
gap:34px;
font-family:var(--font-nav);
font-size:.78rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
}
.main-nav a{
position:relative;
padding:6px 0;
color:var(--text-light-muted);
transition:color .2s ease;
}
.main-nav a::after{
content:"";
position:absolute; left:0; bottom:0;
width:0; height:1px;
background:var(--gold);
transition:width .25s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--text-light); }
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.header-social{
display:flex;
gap:12px;
}
.icon-btn{
width:36px; height:36px;
border-radius:50%;
display:grid;
place-items:center;
border:1px solid var(--border-soft);
color:var(--text-light);
transition:all .2s ease;
}
.icon-btn:hover{ background:var(--gold); border-color:var(--gold); color:#1a1206; }
.icon-btn svg{ width:16px; height:16px; }
.nav-toggle{
display:none;
flex-direction:column;
gap:5px;
width:32px;
background:none;
border:none;
z-index:1100;
}
.nav-toggle span{
height:2px; width:100%;
background:var(--text-light);
border-radius:2px;
transition:all .25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* ---------- Hero: photo band ---------- */
.hero-photo{
position:relative;
height:78vh;
min-height:460px;
max-height:820px;
overflow:hidden;
}
.hero-photo-img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
}
.hero-photo-scrim{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(5,6,10,0.05) 0%, rgba(5,6,10,0.12) 55%, rgba(5,6,10,0.55) 100%);
}
html[data-theme="light"] .hero-photo-scrim{
background:linear-gradient(180deg, rgba(5,6,10,0.02) 0%, rgba(5,6,10,0.05) 55%, rgba(5,6,10,0.28) 100%);
}
/* ---------- Hero: text band (sits below the photo, on the site's normal background) ---------- */
.hero-copy{
background:var(--bg-black);
padding:76px 0 88px;
text-align:center;
}
.hero-copy .container{ max-width:820px; }
.eyebrow{
font-family:var(--font-nav);
font-size:.76rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--gold);
margin-bottom:18px;
display:inline-block;
}
.hero-copy .eyebrow{ color:var(--gold-soft); }
.hero-copy h1{
font-family:var(--font-display);
font-size:clamp(2.2rem,5vw,3.6rem);
font-weight:600;
line-height:1.18;
color:var(--text-light);
margin-bottom:22px;
}
.hero-copy h1 em{
font-style:italic;
color:var(--gold-soft);
font-weight:500;
}
.hero-copy p.lead{
font-size:1.05rem;
color:var(--text-light-muted);
max-width:560px;
margin:0 auto 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
/* ---------- Page hero (inner pages) ---------- */
.page-hero{
min-height:52vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:160px 0 70px;
}
.page-hero .eyebrow{ color:var(--gold-soft); }
.page-hero h1{
font-family:var(--font-display);
font-size:clamp(2.1rem,4.6vw,3.2rem);
font-weight:600;
}
.page-hero h1 em{ font-style:italic; color:var(--gold-soft); font-weight:500; display:block; }
.page-hero p{ max-width:560px; margin:18px auto 0; color:var(--text-light-muted); }
/* ---------- Section helpers ---------- */
.section{ padding:110px 0; }
.section-dark{ background:var(--bg-black); }
.section-panel{ background:var(--bg-panel); }
.section-cream{ background:var(--bg-cream); color:var(--text-dark); }
.section-cream .text-muted{ color:var(--text-dark-muted); }
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head .eyebrow{ color:var(--gold-deep); }
.section-cream .section-head .eyebrow{ color:var(--gold-deep); }
.section-dark .section-head .eyebrow, .section-panel .section-head .eyebrow{ color:var(--gold-soft); }
.section-head h2{
font-family:var(--font-display);
font-size:clamp(1.8rem,3.6vw,2.6rem);
font-weight:600;
margin-top:10px;
}
.section-head p{ margin-top:16px; color:var(--text-light-muted); }
.section-cream .section-head p{ color:var(--text-dark-muted); }
.text-muted{ color:var(--text-light-muted); }
/* ---------- Two-column layout ---------- */
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}
.split.reverse .split-media{ order:2; }
.split-media{
aspect-ratio:4/3;
border-radius:var(--radius-lg);
}
.split-copy h3{
font-family:var(--font-display);
font-size:1.7rem;
font-weight:600;
margin-bottom:16px;
}
.section-cream .split-copy h3{ color:var(--text-dark); }
.split-copy p + p{ margin-top:14px; }
/* ---------- Story blocks (Our Story page) ---------- */
.story-block{
display:grid;
grid-template-columns:1fr 1fr;
gap:56px;
align-items:center;
padding:70px 0;
}
.story-block:not(:last-child){ border-bottom:1px solid var(--border-soft-dark); }
.story-block.reverse .story-media{ order:2; }
.story-media{ aspect-ratio:5/4; border-radius:var(--radius-lg); }
.story-copy .label{
font-family:var(--font-nav);
font-size:.72rem;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--gold-deep);
margin-bottom:12px;
display:block;
}
.story-copy h3{
font-family:var(--font-display);
font-size:1.9rem;
font-weight:600;
color:var(--text-dark);
margin-bottom:16px;
}
.story-copy p{ color:var(--text-dark-muted); }
.story-copy p + p{ margin-top:12px; }
/* ---------- Mission / Vision cards ---------- */
.mv-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin-top:10px;
}
.mv-card{
background:#fff;
border:1px solid var(--border-soft-dark);
border-radius:var(--radius-md);
padding:38px 34px;
}
.mv-card .mv-icon{
width:52px; height:52px;
border-radius:50%;
display:grid; place-items:center;
background:rgba(212,168,87,0.14);
color:var(--gold-deep);
margin-bottom:20px;
}
.mv-card h4{
font-family:var(--font-nav);
font-size:.82rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--text-dark);
margin-bottom:14px;
}
.mv-card p{ color:var(--text-dark-muted); font-size:.96rem; }
/* ---------- Values grid ---------- */
.values-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-top:20px;
}
.value-card{
background:#fff;
border:1px solid var(--border-soft-dark);
border-radius:var(--radius-md);
padding:30px 22px;
text-align:center;
transition:transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px rgba(25,23,18,0.08); }
.value-card .v-icon{ font-size:1.6rem; margin-bottom:14px; }
.value-card h5{
font-family:var(--font-nav);
font-size:.82rem;
letter-spacing:.08em;
color:var(--text-dark);
margin-bottom:6px;
}
.value-card p{ font-size:.82rem; color:var(--text-dark-muted); }
/* ---------- Manifesto ---------- */
.manifesto{
background:
radial-gradient(90% 140% at 50% 0%, rgba(212,168,87,0.10), transparent 60%),
linear-gradient(180deg,#05060a 0%, #0a0c12 100%);
padding:150px 0;
text-align:center;
position:relative;
overflow:hidden;
}
.manifesto::before{
content:"";
position:absolute; inset:0;
background-image:repeating-linear-gradient(120deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 5px);
pointer-events:none;
}
.manifesto .eyebrow{ color:var(--gold); }
.manifesto p{
font-family:var(--font-display);
font-style:italic;
font-size:clamp(1.2rem,2.6vw,1.7rem);
line-height:1.7;
color:var(--text-light-muted);
max-width:720px;
margin:8px auto;
}
.manifesto p.final{
color:var(--gold-soft);
font-weight:600;
font-size:clamp(1.5rem,3.4vw,2.1rem);
margin-top:40px;
}
.manifesto p.small-line{ font-style:normal; font-family:var(--font-body); font-size:1rem; color:var(--text-light-muted); opacity:.75; }
/* ---------- Tag / pill rows ---------- */
.tag-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:34px;
margin-top:8px;
}
.tag-item{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
font-family:var(--font-nav);
font-size:.72rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--text-light-muted);
}
.tag-item .tag-icon{
width:56px; height:56px;
border-radius:50%;
border:1px solid var(--border-soft);
display:grid; place-items:center;
color:var(--gold-soft);
font-size:1.3rem;
transition:all .2s ease;
}
.tag-item:hover .tag-icon{ border-color:var(--gold); background:rgba(212,168,87,0.08); }
/* ---------- Release / single card ---------- */
.release-card{
display:grid;
grid-template-columns:220px 1fr;
gap:34px;
align-items:center;
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-lg);
padding:30px;
}
.release-art{ aspect-ratio:1/1; border-radius:var(--radius-md); }
.release-eyebrow{ color:var(--gold); font-family:var(--font-nav); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; display:block;}
.release-card h3{ font-family:var(--font-display); font-size:1.8rem; margin-bottom:8px; }
.release-card .meta{ color:var(--text-light-muted); margin-bottom:20px; font-size:.92rem; }
/* ---------- Grids: singles / albums / videos / news ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.media-card{
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-md);
overflow:hidden;
transition:transform .25s ease, border-color .25s ease;
}
.media-card:hover{ transform:translateY(-5px); border-color:rgba(212,168,87,0.4); }
.media-card .thumb{ aspect-ratio:1/1; position:relative; }
.media-card .thumb.wide{ aspect-ratio:16/9; }
.media-card .thumb .play{
position:absolute; inset:0;
display:grid; place-items:center;
z-index:2;
}
.media-card .play span{
width:52px; height:52px;
border-radius:50%;
background:rgba(245,241,230,0.14);
backdrop-filter:blur(4px);
display:grid; place-items:center;
color:var(--text-light);
border:1px solid rgba(245,241,230,0.3);
}
.media-card .body{ padding:20px 22px 24px; }
.media-card .cat{
font-family:var(--font-nav);
font-size:.66rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--gold-soft);
margin-bottom:8px;
display:block;
}
.media-card h4{ font-family:var(--font-display); font-size:1.15rem; margin-bottom:6px; }
.media-card .date{ font-size:.8rem; color:var(--text-light-muted); }
.media-card p{ font-size:.9rem; color:var(--text-light-muted); margin-top:10px; }
/* ---------- Platform links (Music page) ---------- */
.platform-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
}
.platform-card{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
padding:26px 14px;
border:1px solid var(--border-soft);
border-radius:var(--radius-md);
background:var(--bg-panel);
font-family:var(--font-nav);
font-size:.78rem;
letter-spacing:.06em;
transition:all .2s ease;
}
.platform-card:hover{ border-color:var(--gold); background:rgba(212,168,87,0.06); transform:translateY(-3px); }
.platform-card svg{ width:26px; height:26px; color:var(--gold-soft); }
/* ---------- Lyrics / behind the song ---------- */
.lyric-block{
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-lg);
padding:50px;
}
.lyric-block h3{ font-family:var(--font-display); font-size:1.6rem; margin-bottom:20px; }
.lyric-block p{ color:var(--text-light-muted); white-space:pre-line; }
/* ---------- CTA band ---------- */
.cta-band{
text-align:center;
padding:100px 0;
}
.cta-band h2{
font-family:var(--font-display);
font-size:clamp(1.8rem,4vw,2.6rem);
margin-bottom:14px;
color:#f5f1e6;
}
.cta-band p{ color:rgba(245,241,230,0.8); margin-bottom:34px; }
.cta-band .socials{ display:flex; justify-content:center; gap:14px; margin-top:38px; }
.cta-band .icon-btn{ color:#f5f1e6; border-color:rgba(245,241,230,0.35); }
/* ---------- Contact ---------- */
.contact-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
}
.contact-info h3{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:18px; }
.contact-info .info-row{
display:flex; align-items:center; gap:14px;
padding:16px 0;
border-bottom:1px solid var(--border-soft);
}
.contact-info .info-row .icon-btn{ flex-shrink:0; }
.contact-info .info-row .label{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-light-muted); display:block; margin-bottom:3px;}
.contact-info .info-row .value{ font-size:.98rem; }
.contact-form{
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-lg);
padding:40px;
}
.form-row{ margin-bottom:20px; }
.form-row label{
display:block;
font-family:var(--font-nav);
font-size:.72rem;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--text-light-muted);
margin-bottom:8px;
}
.form-row input, .form-row textarea{
width:100%;
background:rgba(245,241,230,0.04);
border:1px solid var(--border-soft);
border-radius:var(--radius-sm);
padding:13px 16px;
color:var(--text-light);
font-size:.94rem;
transition:border-color .2s ease;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--gold); }
.form-row textarea{ min-height:130px; resize:vertical; }
.form-note{ font-size:.78rem; color:var(--text-light-muted); margin-top:14px; opacity:.8; }
.form-success{
display:none;
margin-top:16px;
padding:14px 18px;
border-radius:var(--radius-sm);
background:rgba(212,168,87,0.12);
border:1px solid rgba(212,168,87,0.35);
color:var(--gold-soft);
font-size:.88rem;
}
.form-success.is-visible{ display:block; }
/* ---------- Footer ---------- */
.site-footer{
background:#05060a;
border-top:1px solid var(--border-soft);
padding:80px 0 30px;
}
.footer-grid{
display:grid;
grid-template-columns:1.6fr 1fr 1fr 1fr;
gap:40px;
padding-bottom:50px;
}
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--text-light-muted); font-size:.9rem; max-width:280px; }
.footer-col h5{
font-family:var(--font-nav);
font-size:.74rem;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--gold-soft);
margin-bottom:20px;
}
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ color:var(--text-light-muted); font-size:.92rem; transition:color .2s ease; }
.footer-col a:hover{ color:var(--gold-soft); }
.footer-bottom{
border-top:1px solid var(--border-soft);
padding-top:26px;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:14px;
font-size:.8rem;
color:var(--text-light-muted);
}
.footer-bottom .legal-links{ display:flex; gap:20px; }
/* ---------- Responsive ---------- */
@media (max-width:1024px){
.footer-grid{ grid-template-columns:1fr 1fr; }
.values-grid{ grid-template-columns:repeat(2,1fr); }
.platform-grid{ grid-template-columns:repeat(3,1fr); }
.grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
.main-nav, .header-social{ display:none; }
.nav-toggle{ display:flex; }
.main-nav.is-open{
display:flex;
position:fixed;
inset:0;
background:rgba(8,9,13,0.98);
backdrop-filter:blur(6px);
flex-direction:column;
align-items:center;
justify-content:center;
z-index:1050;
}
.main-nav.is-open ul{ flex-direction:column; gap:28px; font-size:1rem; }
.split, .story-block, .story-block.reverse, .split.reverse{ grid-template-columns:1fr; }
.split-media, .story-media{ order:1 !important; aspect-ratio:16/10; }
.mv-grid{ grid-template-columns:1fr; }
.values-grid{ grid-template-columns:repeat(2,1fr); }
.release-card{ grid-template-columns:1fr; text-align:center; }
.release-art{ max-width:260px; margin:0 auto; }
.grid-3, .grid-2{ grid-template-columns:1fr; }
.platform-grid{ grid-template-columns:repeat(2,1fr); }
.contact-wrap{ grid-template-columns:1fr; }
.footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
.hero-photo{ height:56vh; min-height:340px; }
.hero-copy{ padding:56px 0 64px; }
.section{ padding:80px 0; }
.manifesto{ padding:100px 0; }
}
@media (max-width:520px){
.values-grid{ grid-template-columns:1fr 1fr; }
.footer-grid{ grid-template-columns:1fr; }
.footer-bottom{ flex-direction:column; text-align:center; }
}
/* =========================================================
Theme toggle button
========================================================= */
.theme-toggle .icon-sun{ display:none; }
.theme-toggle .icon-moon{ display:block; }
html[data-theme="light"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="light"] .theme-toggle .icon-moon{ display:none; }
.theme-toggle svg{ width:17px; height:17px; }
/* =========================================================
Light mode — dedicated overrides for sections that use
fixed gradients rather than the flipping root variables.
========================================================= */
html[data-theme="light"] .site-header.is-scrolled{
background:rgba(247,242,230,0.9);
box-shadow:0 8px 24px rgba(25,23,18,0.08);
}
html[data-theme="light"] .main-nav.is-open{ background:rgba(250,246,236,0.98); }
html[data-theme="light"] .btn-outline{ border-color:rgba(25,23,18,0.3); }
html[data-theme="light"] .ph-media{
background:
radial-gradient(120% 140% at 15% 10%, rgba(212,168,87,0.35), transparent 55%),
radial-gradient(100% 120% at 90% 90%, rgba(150,120,190,0.20), transparent 60%),
linear-gradient(160deg,#fdf9f0 0%, #f4ecdb 55%, #ece2cd 100%);
}
html[data-theme="light"] .ph-media::before{ opacity:.3; }
html[data-theme="light"] .ph-media::after{ box-shadow:inset 0 0 90px rgba(90,70,40,0.12); }
html[data-theme="light"] .ph-media .ph-tag{ color:rgba(25,23,18,0.4); }
html[data-theme="light"] .ph-media--warm{
background:
radial-gradient(130% 120% at 20% 20%, rgba(233,180,90,0.45), transparent 55%),
radial-gradient(110% 130% at 100% 100%, rgba(205,130,100,0.28), transparent 60%),
linear-gradient(150deg,#fdf3e6 0%,#f8e9d4 60%,#f0dcc0 100%);
}
html[data-theme="light"] .ph-media--night{
background:
radial-gradient(120% 120% at 80% 0%, rgba(120,140,220,0.18), transparent 55%),
radial-gradient(110% 130% at 0% 100%, rgba(212,168,87,0.22), transparent 55%),
linear-gradient(170deg,#f6f7fb 0%,#eceef5 60%,#e3e6ef 100%);
}
html[data-theme="light"] .manifesto{
background:
radial-gradient(90% 140% at 50% 0%, rgba(212,168,87,0.20), transparent 60%),
linear-gradient(180deg,#fdf9f0 0%, #f2ead8 100%);
}
html[data-theme="light"] .manifesto::before{
background-image:repeating-linear-gradient(120deg, rgba(25,23,18,0.03) 0 2px, transparent 2px 5px);
}
html[data-theme="light"] .site-footer{ background:#f2ead9; }
/* The logo artwork is white line-art on a transparent background,
designed for dark surfaces. Invert it in light mode so it stays
legible wherever the header/footer background goes light. */
html[data-theme="light"] .brand-logo{ filter:invert(1); }
html[data-theme="light"] .form-row input,
html[data-theme="light"] .form-row textarea{
background:rgba(25,23,18,0.04);
}
/* =========================================================
Favorite (save) button on media / release cards
========================================================= */
.thumb, .release-art{ position:relative; }
.fav-btn{
position:absolute;
top:12px; right:12px;
z-index:3;
width:36px; height:36px;
border-radius:50%;
background:rgba(10,12,18,0.55);
backdrop-filter:blur(4px);
border:1px solid rgba(245,241,230,0.3);
display:grid;
place-items:center;
color:#f5f1e6;
cursor:pointer;
transition:all .2s ease;
}
.fav-btn:hover{ border-color:var(--gold); }
.fav-btn svg{ width:17px; height:17px; }
.fav-btn.is-active{ background:var(--gold); border-color:var(--gold); color:#1a1206; }
/* =========================================================
Filter tabs (Videos page)
========================================================= */
.filter-tabs{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:44px;
}
.filter-tab{
font-family:var(--font-nav);
font-size:.74rem;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
padding:10px 20px;
border-radius:999px;
border:1px solid var(--border-soft);
color:var(--text-light-muted);
background:transparent;
cursor:pointer;
transition:all .2s ease;
}
.filter-tab:hover{ border-color:var(--gold); color:var(--text-light); }
.filter-tab.is-active{ background:var(--gold); border-color:var(--gold); color:#1a1206; }
/* =========================================================
Flash messages (login/register/contact/admin feedback)
========================================================= */
.flash-banner{
padding:16px 0;
text-align:center;
font-family:var(--font-nav);
font-size:.85rem;
letter-spacing:.02em;
}
.flash-success{ background:rgba(120,200,140,0.14); color:#8fd6a3; border-bottom:1px solid rgba(120,200,140,0.3); }
.flash-error{ background:rgba(220,100,100,0.14); color:#f0a3a3; border-bottom:1px solid rgba(220,100,100,0.3); }
/* =========================================================
Auth pages (login / register / account) & nav account link
========================================================= */
.nav-account{ padding-left:8px; border-left:1px solid var(--border-soft); }
.auth-wrap{
max-width:440px;
margin:0 auto;
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-lg);
padding:44px;
}
.auth-wrap h1{ font-family:var(--font-display); font-size:1.7rem; margin-bottom:8px; text-align:center; }
.auth-wrap .sub{ text-align:center; color:var(--text-light-muted); margin-bottom:30px; font-size:.92rem; }
.auth-links{ margin-top:22px; text-align:center; font-size:.85rem; color:var(--text-light-muted); }
.auth-links a{ color:var(--gold-soft); }
.field-error{ color:#f0a3a3; font-size:.78rem; margin-top:6px; display:block; }
.account-summary{
display:flex; align-items:center; gap:18px;
background:var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:var(--radius-lg);
padding:28px 32px;
margin-bottom:40px;
}
.account-summary .avatar{
width:56px; height:56px; border-radius:50%;
display:grid; place-items:center;
background:radial-gradient(circle at 30% 25%, var(--gold-soft), var(--gold-deep) 65%, #6b4d1c 100%);
color:#1a1206; font-family:var(--font-display); font-weight:700; font-size:1.3rem;
}
.account-summary h2{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:2px; }
.account-summary p{ color:var(--text-light-muted); font-size:.88rem; }
.empty-state{
text-align:center;
padding:60px 20px;
color:var(--text-light-muted);
border:1px dashed var(--border-soft);
border-radius:var(--radius-lg);
}
@media (max-width:860px){
.nav-account{ border-left:none; padding-left:0; }
}
@media (max-width:520px){
.auth-wrap{ padding:30px 24px; }
}
/* =========================================================
In-browser MP3 player (release cards, when an MP3 is set)
========================================================= */
.release-player{
display:block;
width:100%;
max-width:360px;
height:36px;
margin-top:12px;
border-radius:999px;
}
.media-card .release-player{ max-width:none; margin-bottom:10px; }