/* ===== index.html former inline styles #1 ===== */
body.page-home{
--bg:#040817;
--nav:#050816;
--panel:#0b1025;
--ink:#f7f0df;
--muted:#d8cfbd;
--gold:#e7b85d;
--gold2:#f6d58a;
--gold3:#b77a25;
--purple:#a66dff;
--line:rgba(231,184,93,.42);
--soft-line:rgba(255,255,255,.075);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page-home{
margin:0;
background:
radial-gradient(circle at 15% 3%,rgba(128,76,255,.16),transparent 25%),
linear-gradient(180deg,#02040c,#05091a 45%,#02040c);
color:var(--ink);
font-family:var(--serif);
}
body.page-home a{color:inherit}
body.page-home img{display:block;max-width:100%}
body.page-home .site{
width:min(1122px,100%);
margin:0 auto;
background:#040817;
box-shadow:0 0 80px rgba(0,0,0,.38);
overflow:hidden;
}
body.page-home .header{
min-height:84px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 38px 0 28px;
background:linear-gradient(180deg,#050817,#030613);
border-bottom:1px solid var(--line);
position:relative;
z-index:5;
}
body.page-home .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
body.page-home .brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(231,184,93,.35))}
body.page-home .brand span{font-size:28px;line-height:1;color:var(--gold2);letter-spacing:-.01em;white-space:nowrap}
body.page-home .nav{display:flex;align-items:center;gap:31px;margin-left:auto;font-size:15.5px;color:#efe7d5}
body.page-home .nav a{text-decoration:none}
body.page-home .nav a:hover{color:var(--gold2)}
body.page-home .top-cta{
margin-left:29px;min-height:38px;padding:0 22px;border:1px solid rgba(231,184,93,.7);border-radius:3px;
display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fbe3a6;background:rgba(231,184,93,.05);
box-shadow:inset 0 0 0 1px rgba(255,232,170,.08);font-size:16px;white-space:nowrap;
}
body.page-home .hero{
min-height:452px;
position:relative;
display:grid;
grid-template-columns:47% 53%;
align-items:center;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(3,7,22,.97) 0%,rgba(3,7,22,.86) 39%,rgba(3,7,22,.25) 68%,rgba(3,7,22,.42) 100%),
url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;
overflow:hidden;
}
body.page-home .hero-left{padding:40px 0 26px 52px;position:relative;z-index:2}
body.page-home .hero-mark{width:104px;margin:0 0 22px 138px;filter:drop-shadow(0 0 24px rgba(231,184,93,.35))}
body.page-home h1{margin:0 0 16px;color:var(--gold2);font-weight:400;line-height:1.12;font-size:38px;letter-spacing:-.032em;text-shadow:0 0 28px rgba(231,184,93,.18)}
body.page-home .hero-copy{margin:0 0 25px;width:430px;color:#efe9dc;font-size:16.7px;line-height:1.46}
body.page-home .hero-actions{display:flex;gap:24px;margin-bottom:23px}
body.page-home .btn{
min-height:40px;padding:0 26px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
border:1px solid rgba(231,184,93,.62);color:#f7f0df;background:rgba(14,16,35,.68);font-size:16px;cursor:pointer;font-family:var(--serif)
}
body.page-home .btn.primary{color:#1c1206;border-color:rgba(255,220,135,.85);background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);box-shadow:0 10px 22px rgba(0,0,0,.25)}
body.page-home .release{display:flex;gap:11px;align-items:center;color:#ded4c4;font-size:14px}
body.page-home .release strong{color:var(--gold2);font-style:italic;font-weight:600}
body.page-home .release span:not(:first-child)::before{content:"•";color:var(--gold);margin-right:10px}
body.page-home .hero-right{position:relative;height:100%;display:flex;align-items:center;justify-content:flex-start;padding:0 0 0 0;z-index:1}
body.page-home .products{width:660px;max-width:none;transform:translate(-10px,24px);filter:drop-shadow(0 30px 38px rgba(0,0,0,.48))}
body.page-home .story{
min-height:184px;display:grid;grid-template-columns:410px 1fr;border-bottom:1px solid var(--line);background:#040817
}
body.page-home .story-img{background:url('images/embedded-04-9b54766b62d3.jpg') 58% center/cover no-repeat}
body.page-home .story-img{position:relative}
body.page-home .story-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(4,8,23,0) 0%,rgba(4,8,23,.08) 58%,rgba(4,8,23,.34) 100%);
pointer-events:none;
}
body.page-home .story-text{padding:22px 56px 22px 20px}
body.page-home .story h2{margin:0 0 12px;color:var(--gold2);font-weight:400;font-size:30px;line-height:1.08;letter-spacing:-.025em}
body.page-home .story p{margin:0;color:#eee8db;font-size:16px;line-height:1.45}
body.page-home .seo-intro{
padding:24px 58px 26px;
background:linear-gradient(180deg,#05091a,#061026);
border-bottom:1px solid rgba(231,184,93,.26);
}
body.page-home .seo-intro-card{
border:1px solid rgba(231,184,93,.38);
border-radius:10px;
background:
radial-gradient(circle at 96% 8%,rgba(166,109,255,.12),transparent 28%),
linear-gradient(180deg,rgba(12,17,39,.9),rgba(5,9,22,.96));
padding:24px 28px;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:24px;
align-items:start;
box-shadow:0 16px 40px rgba(0,0,0,.20);
}
body.page-home .seo-intro h2{
margin:0 0 12px;
color:var(--gold2);
font-size:31px;
line-height:1.1;
font-weight:400;
}
body.page-home .seo-intro p{
margin:0 0 12px;
color:#efe8da;
font-size:16px;
line-height:1.58;
}
body.page-home .seo-list{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:10px;
}
body.page-home .seo-list li{
border:1px solid rgba(231,184,93,.2);
background:rgba(255,255,255,.035);
border-radius:8px;
padding:10px 12px;
color:#f7e5b0;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
line-height:1.35;
}
body.page-home .seo-list strong{color:#fff0bd}
@media(max-width:980px){
body.page-home .seo-intro{padding:24px}
body.page-home .seo-intro-card{grid-template-columns:1fr;padding:22px}
}
body.page-home .books{padding:15px 0 18px;border-bottom:1px solid rgba(231,184,93,.28);background:linear-gradient(180deg,#061026,#040817)}
body.page-home .section-title{margin:0 auto 13px;display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold2);font-weight:400;font-size:29px;line-height:1;letter-spacing:-.015em}
body.page-home .section-title:before,
body.page-home .section-title:after{content:"";display:block;width:96px;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
body.page-home .section-title:after{background:linear-gradient(90deg,var(--line),transparent)}
body.page-home .spark{font-size:14px;color:var(--gold)}
body.page-home .book-cards{display:grid;grid-template-columns:1fr 1fr 1.08fr;gap:24px;padding:0 68px}
body.page-home .door-card{
min-height:178px;border:1px solid rgba(231,184,93,.55);border-radius:7px;background:linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
display:grid;grid-template-columns:132px 1fr;gap:20px;padding:7px 22px 7px 18px;align-items:center
}
body.page-home .door-card.music{grid-template-columns:150px 1fr;padding-left:18px}
body.page-home .door-card img{height:162px;width:110px;object-fit:cover;object-position:center;filter:drop-shadow(0 12px 16px rgba(0,0,0,.38))}
body.page-home .door-card.music img{width:142px;height:142px;border:1px solid rgba(255,255,255,.13);border-radius:4px;object-fit:cover}
body.page-home .door-card h3{margin:0 0 16px;color:var(--gold2);font-size:24px;line-height:1.1;font-weight:400}
body.page-home .door-card p{margin:0 0 16px;color:#efe8da;font-size:14px;line-height:1.46}
body.page-home .small-btn{min-height:30px;min-width:106px;display:inline-flex;align-items:center;justify-content:center;color:#f8e6b4;text-decoration:none;border:1px solid rgba(231,184,93,.62);border-radius:3px;background:rgba(9,13,28,.7);font-size:15px}
body.page-home .home-school{
padding:26px 48px 34px;
background:
radial-gradient(circle at 12% 0%,rgba(101,217,128,.14),transparent 28%),
radial-gradient(circle at 88% 8%,rgba(241,154,69,.12),transparent 26%),
linear-gradient(180deg,#05091a,#040817);
border-bottom:1px solid rgba(231,184,93,.22);
}
body.page-home .home-school-card{
border:1px solid rgba(231,184,93,.42);
border-radius:12px;
background:
linear-gradient(180deg,rgba(16,18,45,.96),rgba(7,10,29,.98));
box-shadow:0 18px 50px rgba(0,0,0,.24);
display:grid;
grid-template-columns:1.05fr .95fr;
gap:28px;
align-items:center;
padding:30px;
overflow:hidden;
position:relative;
}
body.page-home .home-school-card:before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:6px;
background:linear-gradient(180deg,#65d980,#e7b85d,#a66dff);
}
body.page-home .home-school h2{
margin:6px 0 14px;
color:var(--gold2);
font-size:34px;
line-height:1.05;
font-weight:400;
}
body.page-home .home-school p{
margin:0 0 16px;
color:#efe8da;
font-size:16px;
line-height:1.6;
}
body.page-home .home-school-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:18px 0 20px;
}
body.page-home .home-school-pill{
border:1px solid rgba(231,184,93,.24);
border-radius:999px;
padding:9px 12px;
color:#f7e5b0;
background:rgba(255,255,255,.04);
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
font-weight:750;
letter-spacing:.02em;
}
body.page-home .home-school-preview{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
body.page-home .home-school-preview img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
border-radius:10px;
border:1px solid rgba(255,255,255,.16);
background:#fff;
box-shadow:0 14px 26px rgba(0,0,0,.25);
}
body.page-home .home-school-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
@media(max-width:980px){
body.page-home .home-school{padding:24px}
body.page-home .home-school-card{grid-template-columns:1fr;padding:24px}
body.page-home .home-school-preview{max-width:520px}
}
@media(max-width:560px){
body.page-home .home-school h2{font-size:28px}
body.page-home .home-school-list{grid-template-columns:1fr}
body.page-home .home-school-preview{grid-template-columns:1fr 1fr}
}
body.page-home .code{padding:12px 0 16px;background:linear-gradient(180deg,#040817,#05091a);border-bottom:1px solid rgba(231,184,93,.22)}
body.page-home .code .section-title{margin-bottom:15px;font-size:29px}
body.page-home .code-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 62px}
body.page-home .code-card{min-height:122px;border:1px solid rgba(231,184,93,.45);border-radius:6px;background:linear-gradient(180deg,rgba(18,21,39,.84),rgba(9,13,28,.94));display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:13px 8px 10px;text-align:center}
body.page-home .icon{height:40px;width:52px;margin-bottom:7px;color:var(--gold2)}
body.page-home .icon svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.page-home .code-card h3{margin:0 0 5px;color:var(--gold2);font-size:19px;font-weight:400;line-height:1}
body.page-home .code-card p{margin:0;color:#efe8da;font-size:13px;line-height:1.35}
body.page-home .signup-wrap{padding:15px 48px;background:#05091a}
body.page-home .signup{min-height:120px;border:1px solid rgba(155,86,210,.54);border-radius:9px;background:radial-gradient(circle at 6% 50%,rgba(231,184,93,.13),transparent 13%),linear-gradient(180deg,rgba(16,18,45,.96),rgba(7,10,29,.98));display:grid;grid-template-columns:105px 1fr 502px;align-items:center;gap:22px;padding:18px 31px 18px 24px}
body.page-home .mail{width:76px;height:76px;border:1px solid rgba(231,184,93,.44);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 34px rgba(231,184,93,.23), inset 0 0 24px rgba(231,184,93,.09)}
body.page-home .mail svg{width:45px;height:45px;stroke:var(--gold2);fill:none;stroke-width:1.7}
body.page-home .signup h2{margin:0 0 7px;color:var(--gold2);font-size:25px;font-weight:400;line-height:1.1}
body.page-home .signup p{margin:0;color:#efe8da;font-size:14.5px;line-height:1.45}
body.page-home .form{display:grid;grid-template-columns:1fr 1fr 164px;gap:8px;align-items:center}
body.page-home .form input{height:35px;border:1px solid rgba(231,184,93,.42);background:rgba(3,7,22,.78);color:var(--ink);border-radius:3px;padding:0 12px;font:14px var(--serif);outline:none}
body.page-home .form input::placeholder{color:#d9cfbd}
body.page-home .form button{height:35px;border:1px solid rgba(255,220,135,.85);border-radius:3px;color:#1c1206;background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);font:15px var(--serif);cursor:pointer}
body.page-home .form .note{grid-column:1/-1;margin:0;color:#c8bdad;font-size:12.5px;line-height:1}
body.page-home .bot-field{display:none}
body.page-home .footer{min-height:74px;display:flex;align-items:center;justify-content:space-between;padding:20px 64px 20px 60px;background:#030716;border-top:1px solid rgba(231,184,93,.22);color:#ded4c4;position:relative}
body.page-home .footer:before{content:"✦";position:absolute;top:-11px;left:50%;transform:translateX(-50%);color:var(--gold2);font-size:24px}
body.page-home .footer-brand{display:flex;align-items:center;gap:13px;color:var(--gold2);font-size:18px}
body.page-home .footer-brand img{width:40px;height:40px;object-fit:contain}
body.page-home .footer-text{font-size:15px;color:#ddd4c5}
@media(max-width:980px){
body.page-home .header{min-height:74px;padding:12px 20px;flex-wrap:wrap;gap:12px}
body.page-home .brand img{width:50px;height:50px}
body.page-home .brand span{font-size:23px}
body.page-home .nav{order:3;width:100%;justify-content:center;gap:22px;flex-wrap:wrap;font-size:15px}
body.page-home .top-cta{margin-left:0}
body.page-home .hero{grid-template-columns:1fr;min-height:auto}
body.page-home .hero-left{padding:34px 24px 10px}
body.page-home .hero-mark{margin-left:0;width:92px}
body.page-home h1{font-size:clamp(2.5rem,9vw,4rem)}
body.page-home .hero-copy{width:auto}
body.page-home .hero-right{padding:0 12px 0}
body.page-home .products{width:min(100%,680px);transform:none}
body.page-home .story{grid-template-columns:1fr}
body.page-home .story-img{height:220px}
body.page-home .story-img{position:relative}
body.page-home .story-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(4,8,23,0) 0%,rgba(4,8,23,.08) 58%,rgba(4,8,23,.34) 100%);
pointer-events:none;
}
body.page-home .story-text{padding:28px 24px}
body.page-home .book-cards{grid-template-columns:1fr;padding:0 24px}
body.page-home .door-card,
body.page-home .door-card.music{grid-template-columns:120px 1fr;min-height:178px}
body.page-home .code-grid{grid-template-columns:repeat(2,1fr);padding:0 24px;gap:12px}
body.page-home .signup-wrap{padding:24px}
body.page-home .signup{grid-template-columns:1fr;padding:24px;gap:15px}
body.page-home .form{grid-template-columns:1fr}
body.page-home .footer{padding:24px;flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:560px){
body.page-home .section-title{font-size:25px;gap:8px}
body.page-home .section-title:before,
body.page-home .section-title:after{width:36px}
body.page-home .door-card,
body.page-home .door-card.music{grid-template-columns:1fr;text-align:center;justify-items:center}
body.page-home .code-grid{grid-template-columns:1fr}
body.page-home .release{display:block;line-height:1.8}
body.page-home .release span:not(:first-child)::before{margin-left:8px}
body.page-home .hero-actions{gap:10px;flex-direction:column}
body.page-home .btn{width:100%}
}
body.page-home /* V15 mobile art pass: make the imagery visible and reviewable on phone. */
.mobile-art-label{display:none!important}
@media(max-width:980px){
body.page-home .hero{
background:
linear-gradient(180deg,rgba(3,7,22,.88) 0%,rgba(3,7,22,.74) 38%,rgba(3,7,22,.92) 100%),
url('images/embedded-03-7a25fdc40830.jpg') center top/cover no-repeat;
}
body.page-home .hero::before{
content:"";
display:block;
width:100%;
height:230px;
background:url('images/embedded-03-7a25fdc40830.jpg') center center/cover no-repeat;
border-bottom:1px solid rgba(231,184,93,.35);
box-shadow:inset 0 -55px 70px rgba(4,8,23,.80);
}
body.page-home .hero-left{
padding:24px 24px 12px !important;
}
body.page-home .hero-mark{
margin:0 auto 16px !important;
}
body.page-home .hero-right{
padding:10px 14px 22px !important;
background:linear-gradient(180deg,rgba(4,8,23,.25),rgba(4,8,23,.86));
}
body.page-home .products{
display:block !important;
width:100% !important;
max-width:680px !important;
margin:0 auto !important;
transform:none !important;
filter:drop-shadow(0 22px 28px rgba(0,0,0,.48)) !important;
}
body.page-home .story{
display:block !important;
}
body.page-home .story-img{
display:block !important;
min-height:260px !important;
background-position:center center !important;
border-bottom:1px solid rgba(231,184,93,.28);
}
body.page-home .story-text{
padding:24px !important;
}
body.page-home .book-cards{
gap:16px !important;
}
body.page-home .door-card,
body.page-home .door-card.music{
grid-template-columns:112px 1fr !important;
text-align:left !important;
justify-items:stretch !important;
padding:12px !important;
}
body.page-home .door-card img{
width:100px !important;
height:148px !important;
object-fit:cover !important;
}
body.page-home .door-card.music img{
width:108px !important;
height:108px !important;
object-fit:cover !important;
}
body.page-home .mobile-art-label{
display:block;
margin:0;
padding:8px 14px;
background:rgba(231,184,93,.10);
border-top:1px solid rgba(231,184,93,.22);
border-bottom:1px solid rgba(231,184,93,.22);
color:#f6d58a;
font:12px/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing:.08em;
text-transform:uppercase;
text-align:center;
}
}
@media(max-width:560px){
body.page-home .hero::before{height:245px}
body.page-home .hero-copy{font-size:16px !important}
body.page-home .release{font-size:13.5px !important}
body.page-home .story-img{min-height:300px !important}
body.page-home .door-card,
body.page-home .door-card.music{
grid-template-columns:96px 1fr !important;
gap:12px !important;
}
body.page-home .door-card img{
width:86px !important;
height:128px !important;
}
body.page-home .door-card.music img{
width:92px !important;
height:92px !important;
}
}
body.page-home .footer a{color:inherit}
body.page-home .footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:center;
margin-top:8px;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
letter-spacing:.02em;
}
body.page-home .footer-links a{
color:#f6d58a;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
padding-bottom:2px;
}
body.page-home .footer-links a:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-home .inline-link{
color:#f6d58a;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
}
body.page-home .inline-link:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-home .launch-social-note{
margin:12px 0 0;
color:#efe5d2;
font-size:15px;
line-height:1.55;
}
body.page-home .release-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:16px;
}
body.page-home .release-actions .small-btn,
body.page-home .release-actions .btn{
text-align:center;
}
/* ===== junior.html former inline styles #1 ===== */
body.page-junior{
--bg:#040817;
--ink:#f7f0df;
--muted:#d8cfbd;
--soft:#b9ae9c;
--gold:#e7b85d;
--gold2:#f6d58a;
--purple:#a66dff;
--green:#65d980;
--orange:#f19a45;
--red:#e2535d;
--blue:#7194ff;
--line:rgba(231,184,93,.42);
--panel:rgba(9,14,34,.92);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page-junior{
margin:0;
color:var(--ink);
font-family:var(--serif);
background:
radial-gradient(circle at 14% 5%,rgba(231,184,93,.12),transparent 28%),
radial-gradient(circle at 86% 10%,rgba(101,217,128,.10),transparent 22%),
linear-gradient(180deg,#02040c,#05091a 45%,#02040c);
}
body.page-junior a{color:inherit}
body.page-junior img{display:block;max-width:100%}
body.page-junior .site{
width:min(1122px,100%);
margin:0 auto;
background:#040817;
box-shadow:0 0 80px rgba(0,0,0,.38);
overflow:hidden;
}
body.page-junior .header{
min-height:84px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 38px 0 28px;
background:linear-gradient(180deg,#050817,#030613);
border-bottom:1px solid var(--line);
position:relative;
z-index:5;
}
body.page-junior .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
body.page-junior .brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(231,184,93,.35))}
body.page-junior .brand span{font-size:28px;line-height:1;color:var(--gold2);letter-spacing:-.01em;white-space:nowrap}
body.page-junior .nav{display:flex;align-items:center;gap:24px;margin-left:auto;font-size:15.5px;color:#efe7d5}
body.page-junior .nav a{text-decoration:none}
body.page-junior .nav a:hover{color:var(--gold2)}
body.page-junior .top-cta{
min-height:38px;
padding:0 22px;
border:1px solid rgba(231,184,93,.7);
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fbe3a6;
background:rgba(231,184,93,.05);
white-space:nowrap;
}
body.page-junior .hero{
position:relative;
min-height:520px;
display:grid;
grid-template-columns:54% 46%;
align-items:center;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(3,7,22,.96) 0%,rgba(3,7,22,.84) 43%,rgba(3,7,22,.34) 72%,rgba(3,7,22,.50) 100%),
url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;
overflow:hidden;
}
body.page-junior .hero::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:34%;
background:linear-gradient(180deg,transparent,rgba(4,8,23,.88));
pointer-events:none;
}
body.page-junior .hero-copy{
position:relative;
z-index:2;
padding:54px 0 46px 52px;
max-width:565px;
}
body.page-junior .kicker{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.14em;
margin:0 0 14px;
}
body.page-junior h1,
body.page-junior h2,
body.page-junior h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--gold2)}
body.page-junior h1{
font-size:clamp(3rem,5.55vw,5rem);
line-height:1.02;
letter-spacing:-.05em;
margin-bottom:18px;
text-shadow:0 0 30px rgba(231,184,93,.2);
}
body.page-junior .lede{
margin:0 0 24px;
color:#efe8da;
font-size:18px;
line-height:1.55;
}
body.page-junior .hero-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 26px;
color:#dfd4c1;
font-size:14px;
}
body.page-junior .pill{
border:1px solid rgba(231,184,93,.35);
border-radius:999px;
background:rgba(7,12,30,.54);
padding:7px 10px;
}
body.page-junior .btns{display:flex;gap:14px;flex-wrap:wrap}
body.page-junior .btn{
min-height:42px;
padding:0 20px;
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:1px solid rgba(231,184,93,.62);
color:#f7f0df;
background:rgba(14,16,35,.68);
font-size:16px;
cursor:pointer;
font-family:var(--serif);
}
body.page-junior .btn.primary{
color:#1c1206;
border-color:rgba(255,220,135,.85);
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
box-shadow:0 10px 22px rgba(0,0,0,.25);
}
body.page-junior .cover-wrap{
position:relative;
z-index:2;
align-self:center;
padding:24px 42px 24px 0;
display:flex;
justify-content:center;
}
body.page-junior .cover-frame{
width:min(305px,84%);
padding:16px;
border:1px solid rgba(231,184,93,.42);
border-radius:8px;
background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
box-shadow:0 32px 70px rgba(0,0,0,.55);
transform:none;
}
body.page-junior .cover-frame img{
display:block;
width:100%;
height:auto;
border-radius:4px;
box-shadow:0 18px 36px rgba(0,0,0,.45);
}
body.page-junior section{border-bottom:1px solid rgba(231,184,93,.20)}
body.page-junior .section{
padding:58px 52px;
background:linear-gradient(180deg,#05091a,#040817);
}
body.page-junior .section.alt{
background:
radial-gradient(circle at 84% 18%,rgba(101,217,128,.10),transparent 28%),
linear-gradient(180deg,#061026,#040817);
}
body.page-junior .section-title{
font-size:clamp(2rem,3.4vw,3.1rem);
line-height:1.08;
letter-spacing:-.035em;
margin:0 0 16px;
}
body.page-junior .copy{
color:#eee8db;
font-size:17px;
line-height:1.68;
margin:0;
max-width:860px;
}
body.page-junior .two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
align-items:start;
}
body.page-junior .panel{
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:24px;
box-shadow:0 18px 54px rgba(0,0,0,.28);
}
body.page-junior .panel h3{
font-size:25px;
margin:0 0 12px;
}
body.page-junior .panel p,
body.page-junior .panel li{
color:#e8decd;
font-size:16px;
line-height:1.62;
}
body.page-junior .panel ul{margin:0;padding-left:20px}
body.page-junior .quote{
margin-top:24px;
border-left:2px solid var(--gold);
padding:14px 0 14px 18px;
color:var(--gold2);
font-size:22px;
line-height:1.35;
background:linear-gradient(90deg,rgba(231,184,93,.08),transparent);
}
body.page-junior .path-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:26px;
}
body.page-junior .path-card{
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:
radial-gradient(circle at 16% 0%,var(--accent),transparent 34%),
linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:22px;
min-height:170px;
}
body.page-junior .path-card h3{
font-size:25px;
margin:0 0 10px;
}
body.page-junior .path-card p{
margin:0;
color:#eee8db;
font-size:15.5px;
line-height:1.58;
}
body.page-junior .junior-cast{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:28px;
}
body.page-junior .cast-card{
position:relative;
min-height:195px;
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:
radial-gradient(circle at 18% 0%,var(--accent),transparent 34%),
linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:20px;
overflow:hidden;
}
body.page-junior .cast-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
}
body.page-junior .role{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:9px;
}
body.page-junior .cast-card h3{
font-size:25px;
margin:0 0 10px;
}
body.page-junior .traits{
color:#dfd2be;
font-size:13px;
margin-bottom:12px;
font-family:var(--sans);
}
body.page-junior .cast-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.55;
}
body.page-junior .section-intro{
max-width:920px;
margin:0 0 22px;
color:#eee7d8;
font-size:18px;
line-height:1.7;
}
body.page-junior .junior-cast{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-top:28px;
}
body.page-junior .junior-card{
position:relative;
display:flex;
flex-direction:column;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
overflow:hidden;
min-height:100%;
box-shadow:0 12px 28px rgba(0,0,0,.22);
}
body.page-junior .junior-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-media{
position:relative;
aspect-ratio:4/5;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 18%,var(--accent),transparent 44%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-bottom:1px solid rgba(231,184,93,.18);
}
body.page-junior .junior-media::after{
content:"";
position:absolute;
inset:auto 16px 14px 16px;
height:28px;
border-radius:50%;
background:radial-gradient(circle at center,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
filter:blur(4px);
}
body.page-junior .junior-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
body.page-junior .junior-card h3,
body.page-junior .junior-story-card h3{
font-size:29px;
margin:0;
line-height:1.06;
}
body.page-junior .junior-card p,
body.page-junior .junior-story-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.6;
}
body.page-junior .junior-story-divider{
margin-top:28px;
padding-top:4px;
}
body.page-junior .junior-story-divider h3{
margin:6px 0 0;
font-size:28px;
line-height:1.15;
}
body.page-junior .junior-story{
display:grid;
grid-template-columns:1fr;
gap:20px;
margin-top:18px;
}
body.page-junior .junior-story-card{
position:relative;
display:grid;
grid-template-columns:minmax(190px,230px) 1fr;
gap:0;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
overflow:hidden;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
box-shadow:0 12px 28px rgba(0,0,0,.22);
min-height:330px;
}
body.page-junior .junior-story-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-story-media{
position:relative;
min-height:100%;
background:
radial-gradient(circle at 50% 20%,var(--accent),transparent 46%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-right:1px solid rgba(231,184,93,.18);
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
}
body.page-junior .junior-story-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-story-media img.vance-portrait{
object-position:center center;
width:94%;
height:94%;
padding:0;
transform:none;
}
body.page-junior .junior-story-body{
padding:22px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}
body.page-junior .theme-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin-top:26px;
}
body.page-junior .theme{
border:1px solid rgba(231,184,93,.32);
border-radius:6px;
background:rgba(7,12,30,.74);
padding:16px 10px;
text-align:center;
}
body.page-junior .theme strong{
display:block;
color:var(--gold2);
font-size:18px;
margin-bottom:6px;
font-weight:400;
}
body.page-junior .theme span{
display:block;
color:#e3d9c6;
font:13px/1.35 var(--sans);
}
body.page-junior .cta-band{
position:relative;
overflow:hidden;
padding:54px 52px;
background:
linear-gradient(90deg,rgba(4,8,23,.92),rgba(4,8,23,.80)),
url('images/embedded-04-9b54766b62d3.jpg') center/cover no-repeat;
}
body.page-junior .cta-box{
max-width:720px;
border:1px solid rgba(166,109,255,.42);
border-radius:10px;
background:rgba(5,9,26,.78);
padding:28px;
backdrop-filter:blur(8px);
}
body.page-junior form{
display:grid;
grid-template-columns:1fr 1fr auto;
gap:10px;
margin-top:20px;
align-items:end;
}
body.page-junior input{
height:42px;
border:1px solid rgba(231,184,93,.42);
background:rgba(3,7,22,.78);
color:var(--ink);
border-radius:3px;
padding:0 12px;
font:14px var(--serif);
outline:none;
}
body.page-junior form button{
height:42px;
border:1px solid rgba(255,220,135,.85);
border-radius:3px;
color:#1c1206;
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
font:15px var(--serif);
cursor:pointer;
padding:0 16px;
}
body.page-junior .note{grid-column:1/-1;margin:0;color:#d1c5b3;font:12.5px/1 var(--sans)}
body.page-junior .bot-field{display:none}
body.page-junior .footer{
min-height:74px;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 64px 20px 60px;
background:#030716;
border-top:1px solid rgba(231,184,93,.22);
color:#ded4c4;
}
body.page-junior .footer-brand{display:flex;align-items:center;gap:13px;color:var(--gold2);font-size:18px}
body.page-junior .footer-brand img{width:40px;height:40px;object-fit:contain}
body.page-junior .footer-text{font-size:15px;color:#ddd4c5}
@media(max-width:980px){
body.page-junior .header{min-height:74px;padding:12px 20px;flex-wrap:wrap;gap:12px}
body.page-junior .brand img{width:50px;height:50px}
body.page-junior .brand span{font-size:23px}
body.page-junior .nav{order:3;width:100%;justify-content:center;gap:22px;flex-wrap:wrap}
body.page-junior .top-cta{margin-left:0}
body.page-junior .hero{grid-template-columns:1fr;min-height:auto}
body.page-junior .hero::before{content:"";display:block;height:245px;background:url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;border-bottom:1px solid rgba(231,184,93,.35)}
body.page-junior .hero-copy{padding:28px 24px 14px}
body.page-junior .cover-wrap{padding:16px 24px 34px;align-self:center;justify-content:center}
body.page-junior .cover-frame{width:min(280px,82%);transform:none;margin:0 auto}
body.page-junior .two-col,
body.page-junior .path-grid,
body.page-junior .junior-cast{grid-template-columns:1fr}
body.page-junior .junior-story-card{grid-template-columns:1fr}
body.page-junior .junior-story-media{border-right:0;border-bottom:1px solid rgba(231,184,93,.18);min-height:300px}
body.page-junior .section{padding:42px 24px}
body.page-junior .section-intro{
max-width:920px;
margin:0 0 22px;
color:#eee7d8;
font-size:18px;
line-height:1.7;
}
body.page-junior .junior-cast{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-top:28px;
}
body.page-junior .junior-card{
position:relative;
display:flex;
flex-direction:column;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
overflow:hidden;
min-height:100%;
box-shadow:0 12px 28px rgba(0,0,0,.22);
}
body.page-junior .junior-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-media{
position:relative;
aspect-ratio:4/5;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 18%,var(--accent),transparent 44%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-bottom:1px solid rgba(231,184,93,.18);
}
body.page-junior .junior-media::after{
content:"";
position:absolute;
inset:auto 16px 14px 16px;
height:28px;
border-radius:50%;
background:radial-gradient(circle at center,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
filter:blur(4px);
}
body.page-junior .junior-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
body.page-junior .junior-card h3,
body.page-junior .junior-story-card h3{
font-size:29px;
margin:0;
line-height:1.06;
}
body.page-junior .junior-card p,
body.page-junior .junior-story-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.6;
}
body.page-junior .junior-story-divider{
margin-top:28px;
padding-top:4px;
}
body.page-junior .junior-story-divider h3{
margin:6px 0 0;
font-size:28px;
line-height:1.15;
}
body.page-junior .junior-story{
display:grid;
grid-template-columns:1fr;
gap:20px;
margin-top:18px;
}
body.page-junior .junior-story-card{
position:relative;
display:grid;
grid-template-columns:minmax(190px,230px) 1fr;
gap:0;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
overflow:hidden;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
box-shadow:0 12px 28px rgba(0,0,0,.22);
min-height:330px;
}
body.page-junior .junior-story-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-story-media{
position:relative;
min-height:100%;
background:
radial-gradient(circle at 50% 20%,var(--accent),transparent 46%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-right:1px solid rgba(231,184,93,.18);
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
}
body.page-junior .junior-story-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-story-media img.vance-portrait{
object-position:center center;
width:94%;
height:94%;
padding:0;
transform:none;
}
body.page-junior .junior-story-body{
padding:22px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}
body.page-junior .theme-grid{grid-template-columns:repeat(2,1fr)}
body.page-junior .cta-band{padding:42px 24px}
body.page-junior form{grid-template-columns:1fr}
body.page-junior .footer{padding:24px;flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:560px){
body.page-junior .btns{flex-direction:column}
body.page-junior .btn{width:100%}
body.page-junior h1{font-size:2.65rem}
body.page-junior .lede{font-size:16.5px}
body.page-junior .section-intro{
max-width:920px;
margin:0 0 22px;
color:#eee7d8;
font-size:18px;
line-height:1.7;
}
body.page-junior .junior-cast{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-top:28px;
}
body.page-junior .junior-card{
position:relative;
display:flex;
flex-direction:column;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
overflow:hidden;
min-height:100%;
box-shadow:0 12px 28px rgba(0,0,0,.22);
}
body.page-junior .junior-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-media{
position:relative;
aspect-ratio:4/5;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 18%,var(--accent),transparent 44%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-bottom:1px solid rgba(231,184,93,.18);
}
body.page-junior .junior-media::after{
content:"";
position:absolute;
inset:auto 16px 14px 16px;
height:28px;
border-radius:50%;
background:radial-gradient(circle at center,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
filter:blur(4px);
}
body.page-junior .junior-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
body.page-junior .junior-card h3,
body.page-junior .junior-story-card h3{
font-size:29px;
margin:0;
line-height:1.06;
}
body.page-junior .junior-card p,
body.page-junior .junior-story-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.6;
}
body.page-junior .junior-story-divider{
margin-top:28px;
padding-top:4px;
}
body.page-junior .junior-story-divider h3{
margin:6px 0 0;
font-size:28px;
line-height:1.15;
}
body.page-junior .junior-story{
display:grid;
grid-template-columns:1fr;
gap:20px;
margin-top:18px;
}
body.page-junior .junior-story-card{
position:relative;
display:grid;
grid-template-columns:minmax(190px,230px) 1fr;
gap:0;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
overflow:hidden;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
box-shadow:0 12px 28px rgba(0,0,0,.22);
min-height:330px;
}
body.page-junior .junior-story-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-junior .junior-story-media{
position:relative;
min-height:100%;
background:
radial-gradient(circle at 50% 20%,var(--accent),transparent 46%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-right:1px solid rgba(231,184,93,.18);
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
}
body.page-junior .junior-story-media img{
position:relative;
z-index:1;
width:92%;
height:92%;
object-fit:contain;
object-position:center center;
padding:0;
display:block;
border-radius:10px;
box-shadow:0 18px 34px rgba(0,0,0,.28);
background:#f3f0ea;
}
body.page-junior .junior-story-media img.vance-portrait{
object-position:center center;
width:94%;
height:94%;
padding:0;
transform:none;
}
body.page-junior .junior-story-body{
padding:22px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}
body.page-junior .theme-grid{grid-template-columns:1fr}
body.page-junior .panel{padding:20px}
}
body.page-junior /* V34 final Junior character-card polish */
#cast .junior-media{
aspect-ratio:3/4;
align-items:stretch;
background:linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
}
body.page-junior #cast .junior-media::after{
display:none;
}
body.page-junior #cast .junior-media img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
padding:0;
border-radius:0;
box-shadow:none;
background:transparent;
display:block;
}
body.page-junior #cast .junior-story-card{
grid-template-columns:minmax(250px,310px) 1fr;
min-height:390px;
}
body.page-junior #cast .junior-story-media{
align-items:stretch;
background:linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
}
body.page-junior #cast .junior-story-media img,
body.page-junior #cast .junior-story-media img.vance-portrait{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
padding:0;
border-radius:0;
box-shadow:none;
background:transparent;
transform:none;
display:block;
}
@media(max-width:980px){
body.page-junior #cast .junior-story-card{grid-template-columns:1fr}
body.page-junior #cast .junior-story-media{min-height:420px;border-right:0;border-bottom:1px solid rgba(231,184,93,.18)}
}
body.page-junior /* V41 mobile cast-card consistency fix:
The main Junior character cards were being forced into a tiny 3-column grid
by an older mobile rule. Keep every Junior cast card large and full-width
on tablet/mobile so the core crew matches the Vance card scale. */
@media(max-width:980px){
#cast .junior-cast{
grid-template-columns:1fr !important;
gap:20px !important;
}
#cast .junior-card{
display:grid !important;
grid-template-columns:1fr !important;
min-height:auto !important;
}
#cast .junior-media{
aspect-ratio:auto !important;
min-height:420px !important;
border-bottom:1px solid rgba(231,184,93,.18) !important;
}
#cast .junior-media img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center top !important;
padding:0 !important;
border-radius:0 !important;
box-shadow:none !important;
background:transparent !important;
}
#cast .junior-body{
padding:22px 24px 24px !important;
}
#cast .junior-story-card{
grid-template-columns:1fr !important;
}
#cast .junior-story-media{
min-height:420px !important;
}
}
@media(max-width:560px){
body.page-junior #cast .junior-media,
body.page-junior #cast .junior-story-media{
min-height:370px !important;
}
}
body.page-junior .download-group{
margin-top:34px;
}
body.page-junior .download-group:first-of-type{
margin-top:28px;
}
body.page-junior .download-group-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
padding-bottom:10px;
border-bottom:1px solid rgba(231,184,93,.22);
margin-bottom:18px;
}
body.page-junior .download-group-head h3{
margin:0;
font-size:27px;
line-height:1.12;
color:#fff0bd;
font-weight:400;
}
body.page-junior .download-group-head p{
margin:0;
color:#d8dce8;
font-size:15px;
line-height:1.45;
max-width:560px;
}
@media(max-width:720px){
body.page-junior .download-group-head{
display:block;
}
body.page-junior .download-group-head p{
margin-top:8px;
}
}
body.page-junior .hs-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
margin-top:26px;
}
body.page-junior .hs-card{
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
border:1px solid rgba(231,184,93,.14);
border-radius:24px;
overflow:hidden;
box-shadow:0 18px 45px rgba(4,8,24,.18);
display:flex;
flex-direction:column;
}
body.page-junior .hs-thumb{
aspect-ratio:4/5;
overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,243,236,.98));
display:flex;
align-items:center;
justify-content:center;
border-bottom:1px solid rgba(231,184,93,.14);
}
body.page-junior .hs-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
body.page-junior .hs-icon{
background:linear-gradient(135deg,rgba(103,62,204,.98),rgba(34,42,80,.98));
color:white;
flex-direction:column;
gap:10px;
text-align:center;
padding:18px;
}
body.page-junior .hs-icon span{
display:inline-flex;
align-items:center;
justify-content:center;
width:86px;
height:86px;
border-radius:22px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.2);
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:26px;
font-weight:900;
letter-spacing:.08em;
}
body.page-junior .hs-icon strong{
display:block;
font-size:20px;
line-height:1.2;
max-width:220px;
}
body.page-junior .hs-body{
padding:20px 20px 22px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
body.page-junior .hs-label{
display:inline-flex;
align-self:flex-start;
padding:6px 10px;
border-radius:999px;
background:rgba(231,184,93,.13);
border:1px solid rgba(231,184,93,.18);
color:#f6d58a;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
body.page-junior .hs-body h3{
margin:0;
font-size:22px;
line-height:1.2;
}
body.page-junior .hs-body p{
margin:0;
color:#d8dce8;
line-height:1.65;
}
body.page-junior .hs-actions{
margin-top:auto;
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
body.page-junior .hs-note{
margin-top:24px;
padding:16px 18px;
border-radius:18px;
background:rgba(255,255,255,.04);
border:1px solid rgba(231,184,93,.12);
color:#efe5d2;
line-height:1.65;
}
body.page-junior .hs-coming{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
margin-top:24px;
}
body.page-junior .hs-mini{
padding:18px 18px 20px;
border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
border:1px solid rgba(231,184,93,.12);
}
body.page-junior .hs-mini h3{
margin:10px 0 8px;
font-size:21px;
}
body.page-junior .hs-mini p{
margin:0;
color:#d8dce8;
line-height:1.62;
}
@media(max-width:980px){
body.page-junior .hs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
body.page-junior .hs-coming{grid-template-columns:1fr;}
}
@media(max-width:640px){
body.page-junior .hs-grid{grid-template-columns:1fr;}
body.page-junior .hs-body h3,
body.page-junior .hs-mini h3{font-size:20px;}
}
body.page-junior .footer a{color:inherit}
body.page-junior .footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:center;
margin-top:8px;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
letter-spacing:.02em;
}
body.page-junior .footer-links a{
color:#f6d58a;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
padding-bottom:2px;
}
body.page-junior .footer-links a:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-junior .inline-link{
color:#f6d58a;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
}
body.page-junior .inline-link:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-junior .launch-social-note{
margin:12px 0 0;
color:#efe5d2;
font-size:15px;
line-height:1.55;
}
body.page-junior .release-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:16px;
}
body.page-junior .release-actions .small-btn,
body.page-junior .release-actions .btn{
text-align:center;
}
/* ===== music.html former inline styles #1 ===== */
body.page-music{
--bg:#040817;
--ink:#f7f0df;
--muted:#d8cfbd;
--soft:#b9ae9c;
--gold:#e7b85d;
--gold2:#f6d58a;
--purple:#a66dff;
--green:#65d980;
--orange:#f19a45;
--red:#e2535d;
--line:rgba(231,184,93,.42);
--panel:rgba(9,14,34,.92);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page-music{
margin:0;
color:var(--ink);
font-family:var(--serif);
background:
radial-gradient(circle at 14% 5%,rgba(166,109,255,.18),transparent 26%),
linear-gradient(180deg,#02040c,#05091a 45%,#02040c);
}
body.page-music a{color:inherit}
body.page-music img{display:block;max-width:100%}
body.page-music .site{
width:min(1122px,100%);
margin:0 auto;
background:#040817;
box-shadow:0 0 80px rgba(0,0,0,.38);
overflow:hidden;
padding-bottom:22px;
}
body.page-music .header{
min-height:84px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 38px 0 28px;
background:linear-gradient(180deg,#050817,#030613);
border-bottom:1px solid var(--line);
position:relative;
z-index:5;
}
body.page-music .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
body.page-music .brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(231,184,93,.35))}
body.page-music .brand span{font-size:28px;line-height:1;color:var(--gold2);letter-spacing:-.01em;white-space:nowrap}
body.page-music .nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:15.5px;color:#efe7d5}
body.page-music .nav a{text-decoration:none}
body.page-music .nav a:hover{color:var(--gold2)}
body.page-music .top-cta{
min-height:38px;
padding:0 22px;
border:1px solid rgba(231,184,93,.7);
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fbe3a6;
background:rgba(231,184,93,.05);
white-space:nowrap;
}
body.page-music .hero{
position:relative;
min-height:640px;
display:grid;
grid-template-columns:54% 46%;
align-items:center;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(3,7,22,.97) 0%,rgba(3,7,22,.88) 42%,rgba(3,7,22,.36) 72%,rgba(3,7,22,.50) 100%),
url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;
overflow:hidden;
}
body.page-music .hero::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:34%;
background:linear-gradient(180deg,transparent,rgba(4,8,23,.88));
pointer-events:none;
}
body.page-music .hero-copy{
position:relative;
z-index:2;
padding:54px 0 46px 52px;
max-width:560px;
}
body.page-music .kicker{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.14em;
margin:0 0 14px;
}
body.page-music h1,
body.page-music h2,
body.page-music h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--gold2)}
body.page-music h1{
font-size:clamp(3rem,5.7vw,5.1rem);
line-height:1.02;
letter-spacing:-.05em;
margin-bottom:18px;
text-shadow:0 0 30px rgba(231,184,93,.2);
}
body.page-music .lede{
margin:0 0 24px;
color:#efe8da;
font-size:18px;
line-height:1.55;
}
body.page-music .hero-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 26px;
color:#dfd4c1;
font-size:14px;
}
body.page-music .pill{
border:1px solid rgba(231,184,93,.35);
border-radius:999px;
background:rgba(7,12,30,.54);
padding:7px 10px;
}
body.page-music .btns{display:flex;gap:14px;flex-wrap:wrap}
body.page-music .btn{
min-height:42px;
padding:0 20px;
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:1px solid rgba(231,184,93,.62);
color:#f7f0df;
background:rgba(14,16,35,.68);
font-size:16px;
cursor:pointer;
font-family:var(--serif);
}
body.page-music .btn.primary{
color:#1c1206;
border-color:rgba(255,220,135,.85);
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
box-shadow:0 10px 22px rgba(0,0,0,.25);
}
body.page-music .cover-wrap{
position:relative;
z-index:2;
align-self:center;
padding:0 42px 0 0;
display:flex;
justify-content:center;
align-items:center;
}
body.page-music .cover-frame{
width:min(330px,86%);
padding:16px;
border:1px solid rgba(231,184,93,.42);
border-radius:8px;
background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
box-shadow:0 32px 70px rgba(0,0,0,.55);
transform:none;
margin:0 auto;
}
body.page-music .cover-frame img{
border-radius:4px;
box-shadow:0 18px 36px rgba(0,0,0,.45);
}
body.page-music section{border-bottom:1px solid rgba(231,184,93,.20)}
body.page-music .section{
padding:58px 52px;
background:linear-gradient(180deg,#05091a,#040817);
}
body.page-music .section.alt{
background:
radial-gradient(circle at 84% 18%,rgba(166,109,255,.12),transparent 28%),
linear-gradient(180deg,#061026,#040817);
}
body.page-music .section-title{
font-size:clamp(2rem,3.4vw,3.1rem);
line-height:1.08;
letter-spacing:-.035em;
margin:0 0 16px;
}
body.page-music .copy{
color:#eee8db;
font-size:17px;
line-height:1.68;
margin:0;
max-width:860px;
}
body.page-music .two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
align-items:start;
}
body.page-music .panel{
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:24px;
box-shadow:0 18px 54px rgba(0,0,0,.28);
}
body.page-music .panel h3{
font-size:25px;
margin:0 0 12px;
}
body.page-music .panel p,
body.page-music .panel li{
color:#e8decd;
font-size:16px;
line-height:1.62;
}
body.page-music .panel ul{margin:0;padding-left:20px}
body.page-music .quote{
margin-top:24px;
border-left:2px solid var(--gold);
padding:14px 0 14px 18px;
color:var(--gold2);
font-size:22px;
line-height:1.35;
background:linear-gradient(90deg,rgba(231,184,93,.08),transparent);
}
body.page-music .cast-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:28px;
}
body.page-music .cast-card{
position:relative;
min-height:205px;
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:
radial-gradient(circle at 18% 0%,var(--accent),transparent 34%),
linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:20px;
overflow:hidden;
}
body.page-music .cast-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
}
body.page-music .role{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:9px;
}
body.page-music .cast-card h3{
font-size:25px;
margin:0 0 10px;
}
body.page-music .traits{
color:#dfd2be;
font-size:13px;
margin-bottom:12px;
font-family:var(--sans);
}
body.page-music .cast-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.55;
}
body.page-music .wide-story{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-top:18px;
}
body.page-music .theme-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin-top:26px;
}
body.page-music .theme{
border:1px solid rgba(231,184,93,.32);
border-radius:6px;
background:rgba(7,12,30,.74);
padding:16px 10px;
text-align:center;
}
body.page-music .theme strong{
display:block;
color:var(--gold2);
font-size:18px;
margin-bottom:6px;
font-weight:400;
}
body.page-music .theme span{
display:block;
color:#e3d9c6;
font:13px/1.35 var(--sans);
}
body.page-music .cta-band{
position:relative;
overflow:hidden;
padding:54px 52px;
background:
linear-gradient(90deg,rgba(4,8,23,.92),rgba(4,8,23,.80)),
url('images/embedded-04-9b54766b62d3.jpg') center/cover no-repeat;
}
body.page-music .cta-box{
max-width:720px;
border:1px solid rgba(166,109,255,.42);
border-radius:10px;
background:rgba(5,9,26,.78);
padding:28px;
backdrop-filter:blur(8px);
}
body.page-music form{
display:grid;
grid-template-columns:1fr 1fr auto;
gap:10px;
margin-top:20px;
align-items:end;
}
body.page-music input{
height:42px;
border:1px solid rgba(231,184,93,.42);
background:rgba(3,7,22,.78);
color:var(--ink);
border-radius:3px;
padding:0 12px;
font:14px var(--serif);
outline:none;
}
body.page-music form button{
height:42px;
border:1px solid rgba(255,220,135,.85);
border-radius:3px;
color:#1c1206;
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
font:15px var(--serif);
cursor:pointer;
padding:0 16px;
}
body.page-music .note{grid-column:1/-1;margin:0;color:#d1c5b3;font:12.5px/1 var(--sans)}
body.page-music .bot-field{display:none}
body.page-music .footer{
min-height:74px;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 64px 20px 60px;
background:#030716;
border-top:1px solid rgba(231,184,93,.22);
color:#ded4c4;
}
body.page-music .footer-brand{display:flex;align-items:center;gap:13px;color:var(--gold2);font-size:18px}
body.page-music .footer-brand img{width:40px;height:40px;object-fit:contain}
body.page-music .footer-text{font-size:15px;color:#ddd4c5}
@media(max-width:980px){
body.page-music .header{min-height:74px;padding:12px 20px;flex-wrap:wrap;gap:12px}
body.page-music .brand img{width:50px;height:50px}
body.page-music .brand span{font-size:23px}
body.page-music .nav{order:3;width:100%;justify-content:center;gap:22px;flex-wrap:wrap}
body.page-music .top-cta{margin-left:0}
body.page-music .hero{grid-template-columns:1fr;min-height:auto}
body.page-music .hero::before{content:"";display:block;height:245px;background:url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;border-bottom:1px solid rgba(231,184,93,.35)}
body.page-music .hero-copy{padding:28px 24px 14px}
body.page-music .album-wrap{padding:18px 24px 54px;align-self:center;justify-content:center}
body.page-music .album-frame{width:min(280px,84%);transform:none;margin:0 auto}
body.page-music .cover-wrap{padding:14px 24px 24px;align-self:center;justify-content:center}
body.page-music .cover-frame{width:min(272px,82%);transform:none;margin:0 auto}
body.page-music .two-col,
body.page-music .cast-grid,
body.page-music .wide-story{grid-template-columns:1fr}
body.page-music .section{padding:42px 24px}
body.page-music .theme-grid{grid-template-columns:repeat(2,1fr)}
body.page-music .cta-band{padding:42px 24px}
body.page-music form{grid-template-columns:1fr}
body.page-music .footer{padding:24px;flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:560px){
body.page-music .btns{flex-direction:column}
body.page-music .btn{width:100%}
body.page-music h1{font-size:2.65rem}
body.page-music .lede{font-size:16.5px}
body.page-music .theme-grid{grid-template-columns:1fr}
body.page-music .panel{padding:20px}
}
body.page-music .album-frame img{
width:100%;
height:auto;
border-radius:4px;
box-shadow:0 18px 36px rgba(0,0,0,.45);
}
body.page-music .song-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
body.page-music .chip{border:1px solid rgba(231,184,93,.32);border-radius:999px;background:rgba(7,12,30,.74);color:#e9decd;padding:9px 12px;font:14px/1 var(--sans)}
body.page-music .preview-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
margin-top:26px;
}
body.page-music .preview-card{
position:relative;
overflow:hidden;
border:1px solid rgba(231,184,93,.22);
border-radius:18px;
background:
radial-gradient(circle at top left,var(--accent),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
box-shadow:0 20px 48px rgba(0,0,0,.22);
padding:22px;
}
body.page-music .preview-card::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:4px;
background:linear-gradient(90deg,var(--accent-solid),rgba(231,184,93,.2));
opacity:.9;
}
body.page-music .preview-card .role{
margin-bottom:10px;
}
body.page-music .preview-card h3{
font-size:1.62rem;
margin-bottom:10px;
}
body.page-music .preview-card p{
margin:0 0 16px;
color:#dfd5c6;
line-height:1.55;
}
body.page-music .mood-row{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0 0 18px;
}
body.page-music .mood{
border:1px solid rgba(231,184,93,.22);
border-radius:999px;
padding:7px 10px;
color:#f2d68f;
font:700 11px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.08em;
background:rgba(6,10,26,.46);
}
body.page-music .audio-label{
color:#f6df9d;
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.1em;
margin:2px 0 10px;
}
body.page-music audio{
width:100%;
display:block;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
body.page-music .release-note{
margin:22px 0 0;
padding:16px 18px;
border:1px solid rgba(231,184,93,.18);
border-radius:16px;
color:#efe5d2;
background:rgba(6,10,26,.45);
}
@media(max-width:980px){
body.page-music .preview-grid{grid-template-columns:1fr}
}
body.page-music .footer a{color:inherit}
body.page-music .footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:center;
margin-top:8px;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
letter-spacing:.02em;
}
body.page-music .footer-links a{
color:#f6d58a;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
padding-bottom:2px;
}
body.page-music .footer-links a:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-music .inline-link{
color:#f6d58a;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
}
body.page-music .inline-link:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-music .launch-social-note{
margin:12px 0 0;
color:#efe5d2;
font-size:15px;
line-height:1.55;
}
body.page-music .release-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:16px;
}
body.page-music .release-actions .small-btn,
body.page-music .release-actions .btn{
text-align:center;
}
body.page-music .hyperfollow-band{
margin-top:24px;
padding:22px;
border:1px solid rgba(231,184,93,.25);
border-radius:18px;
background:
radial-gradient(circle at top right,rgba(166,109,255,.16),transparent 38%),
linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
box-shadow:0 18px 44px rgba(0,0,0,.22);
}
body.page-music .hyperfollow-band h3{
margin:0 0 8px;
font-size:1.45rem;
}
body.page-music .hyperfollow-band p{
margin:0 0 16px;
color:#e9decc;
line-height:1.6;
}
/* ===== thanks.html former inline styles #1 ===== */
body.page-thanks{margin:0;min-height:100vh;display:grid;place-items:center;background:#040817;color:#f7f0df;font-family:Georgia,"Times New Roman",serif;padding:24px}
body.page-thanks .card{max-width:680px;text-align:center;border:1px solid rgba(231,184,93,.45);border-radius:9px;padding:44px;background:linear-gradient(180deg,rgba(16,18,45,.96),rgba(7,10,29,.98));box-shadow:0 26px 80px rgba(0,0,0,.55)}
body.page-thanks img{width:96px;margin:0 auto 18px;filter:drop-shadow(0 0 24px rgba(231,184,93,.35))}
body.page-thanks h1{font-weight:400;color:#f6d58a;font-size:clamp(2.4rem,5vw,4rem);margin:0 0 14px}
body.page-thanks p{margin:0;color:#d9cfbd;line-height:1.7}
body.page-thanks a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;margin-top:22px;border-radius:3px;text-decoration:none;color:#1c1206;background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);font-family:Arial,sans-serif;font-weight:700}
body.page-thanks .footer a{color:inherit}
body.page-thanks .footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:center;
margin-top:8px;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
letter-spacing:.02em;
}
body.page-thanks .footer-links a{
color:#f6d58a;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
padding-bottom:2px;
}
body.page-thanks .footer-links a:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-thanks .inline-link{
color:#f6d58a;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
}
body.page-thanks .inline-link:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-thanks .launch-social-note{
margin:12px 0 0;
color:#efe5d2;
font-size:15px;
line-height:1.55;
}
body.page-thanks .release-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:16px;
}
body.page-thanks .release-actions .small-btn,
body.page-thanks .release-actions .btn{
text-align:center;
}
body.page-thanks .links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
body.page-thanks .links a{color:#f6d58a;text-decoration:none;border-bottom:1px solid rgba(246,213,138,.45);padding-bottom:2px}
/* ===== ya.html former inline styles #1 ===== */
body.page-book{
--bg:#040817;
--ink:#f7f0df;
--muted:#d8cfbd;
--soft:#b9ae9c;
--gold:#e7b85d;
--gold2:#f6d58a;
--purple:#a66dff;
--green:#65d980;
--orange:#f19a45;
--red:#e2535d;
--line:rgba(231,184,93,.42);
--panel:rgba(9,14,34,.92);
--serif: Georgia, "Times New Roman", serif;
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.page-book{
margin:0;
color:var(--ink);
font-family:var(--serif);
background:
radial-gradient(circle at 14% 5%,rgba(166,109,255,.18),transparent 26%),
linear-gradient(180deg,#02040c,#05091a 45%,#02040c);
}
body.page-book a{color:inherit}
body.page-book img{display:block;max-width:100%}
body.page-book .site{
width:min(1122px,100%);
margin:0 auto;
background:#040817;
box-shadow:0 0 80px rgba(0,0,0,.38);
overflow:hidden;
}
body.page-book .header{
min-height:84px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 38px 0 28px;
background:linear-gradient(180deg,#050817,#030613);
border-bottom:1px solid var(--line);
position:relative;
z-index:5;
}
body.page-book .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
body.page-book .brand img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(231,184,93,.35))}
body.page-book .brand span{font-size:28px;line-height:1;color:var(--gold2);letter-spacing:-.01em;white-space:nowrap}
body.page-book .nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:15.5px;color:#efe7d5}
body.page-book .nav a{text-decoration:none}
body.page-book .nav a:hover{color:var(--gold2)}
body.page-book .top-cta{
min-height:38px;
padding:0 22px;
border:1px solid rgba(231,184,93,.7);
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#fbe3a6;
background:rgba(231,184,93,.05);
white-space:nowrap;
}
body.page-book .hero{
position:relative;
min-height:530px;
display:grid;
grid-template-columns:54% 46%;
align-items:center;
border-bottom:1px solid var(--line);
background:
linear-gradient(90deg,rgba(3,7,22,.97) 0%,rgba(3,7,22,.88) 42%,rgba(3,7,22,.36) 72%,rgba(3,7,22,.50) 100%),
url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;
overflow:hidden;
}
body.page-book .hero::after{
content:"";
position:absolute;
inset:auto 0 0 0;
height:34%;
background:linear-gradient(180deg,transparent,rgba(4,8,23,.88));
pointer-events:none;
}
body.page-book .hero-copy{
position:relative;
z-index:2;
padding:54px 0 46px 52px;
max-width:560px;
}
body.page-book .kicker{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.14em;
margin:0 0 14px;
}
body.page-book h1,
body.page-book h2,
body.page-book h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--gold2)}
body.page-book h1{
font-size:clamp(3rem,5.7vw,5.1rem);
line-height:1.02;
letter-spacing:-.05em;
margin-bottom:18px;
text-shadow:0 0 30px rgba(231,184,93,.2);
}
body.page-book .lede{
margin:0 0 24px;
color:#efe8da;
font-size:18px;
line-height:1.55;
}
body.page-book .hero-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
margin:0 0 26px;
color:#dfd4c1;
font-size:14px;
}
body.page-book .pill{
border:1px solid rgba(231,184,93,.35);
border-radius:999px;
background:rgba(7,12,30,.54);
padding:7px 10px;
}
body.page-book .btns{display:flex;gap:14px;flex-wrap:wrap}
body.page-book .btn{
min-height:42px;
padding:0 20px;
border-radius:3px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
border:1px solid rgba(231,184,93,.62);
color:#f7f0df;
background:rgba(14,16,35,.68);
font-size:16px;
cursor:pointer;
font-family:var(--serif);
}
body.page-book .btn.primary{
color:#1c1206;
border-color:rgba(255,220,135,.85);
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
box-shadow:0 10px 22px rgba(0,0,0,.25);
}
body.page-book .cover-wrap{
position:relative;
z-index:2;
align-self:center;
padding:24px 42px 24px 0;
display:flex;
justify-content:center;
}
body.page-book .cover-frame{
width:min(310px,84%);
padding:16px;
border:1px solid rgba(231,184,93,.42);
border-radius:8px;
background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
box-shadow:0 32px 70px rgba(0,0,0,.55);
transform:none;
}
body.page-book .cover-frame img{
display:block;
width:100%;
height:auto;
border-radius:4px;
box-shadow:0 18px 36px rgba(0,0,0,.45);
}
body.page-book section{border-bottom:1px solid rgba(231,184,93,.20)}
body.page-book .section{
padding:58px 52px;
background:linear-gradient(180deg,#05091a,#040817);
}
body.page-book .section.alt{
background:
radial-gradient(circle at 84% 18%,rgba(166,109,255,.12),transparent 28%),
linear-gradient(180deg,#061026,#040817);
}
body.page-book .section-title{
font-size:clamp(2rem,3.4vw,3.1rem);
line-height:1.08;
letter-spacing:-.035em;
margin:0 0 16px;
}
body.page-book .copy{
color:#eee8db;
font-size:17px;
line-height:1.68;
margin:0;
max-width:860px;
}
body.page-book .two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:34px;
align-items:start;
}
body.page-book .panel{
border:1px solid rgba(231,184,93,.30);
border-radius:8px;
background:linear-gradient(180deg,rgba(12,17,39,.92),rgba(5,9,22,.96));
padding:24px;
box-shadow:0 18px 54px rgba(0,0,0,.28);
}
body.page-book .panel h3{
font-size:25px;
margin:0 0 12px;
}
body.page-book .panel p,
body.page-book .panel li{
color:#e8decd;
font-size:16px;
line-height:1.62;
}
body.page-book .panel ul{margin:0;padding-left:20px}
body.page-book .quote{
margin-top:24px;
border-left:2px solid var(--gold);
padding:14px 0 14px 18px;
color:var(--gold2);
font-size:22px;
line-height:1.35;
background:linear-gradient(90deg,rgba(231,184,93,.08),transparent);
}
body.page-book .section-intro{
max-width:920px;
margin:0 0 22px;
color:#eee7d8;
font-size:18px;
line-height:1.7;
}
body.page-book .cast-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-top:28px;
}
body.page-book .cast-card{
position:relative;
display:flex;
flex-direction:column;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
overflow:hidden;
min-height:100%;
box-shadow:0 12px 28px rgba(0,0,0,.22);
}
body.page-book .cast-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-book .cast-media{
position:relative;
aspect-ratio:3/4;
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at 50% 18%,var(--accent),transparent 44%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-bottom:1px solid rgba(231,184,93,.18);
}
body.page-book .cast-media::after{
content:"";
position:absolute;
inset:auto 16px 14px 16px;
height:28px;
border-radius:50%;
background:radial-gradient(circle at center,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
filter:blur(4px);
}
body.page-book .cast-media img{
position:relative;
z-index:1;
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
padding:0;
display:block;
}
body.page-book .cast-body{
padding:18px 20px 20px;
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
body.page-book .role{
color:var(--gold);
font:700 12px/1 var(--sans);
text-transform:uppercase;
letter-spacing:.12em;
margin:0;
}
body.page-book .cast-card h3,
body.page-book .story-card h3{
font-size:29px;
margin:0;
line-height:1.06;
}
body.page-book .traits{
color:#dfd2be;
font-size:13px;
font-family:var(--sans);
margin:0;
}
body.page-book .cast-card p,
body.page-book .story-card p{
margin:0;
color:#eee8db;
font-size:15px;
line-height:1.6;
}
body.page-book .story-divider{
margin-top:28px;
padding-top:4px;
}
body.page-book .story-divider h3{
margin:6px 0 0;
font-size:28px;
line-height:1.15;
}
body.page-book .wide-story{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:18px;
}
body.page-book .story-card{
position:relative;
display:grid;
grid-template-columns:minmax(230px,270px) 1fr;
gap:0;
border:1px solid rgba(231,184,93,.30);
border-radius:10px;
overflow:hidden;
background:linear-gradient(180deg,rgba(10,15,36,.96),rgba(5,9,22,.98));
box-shadow:0 12px 28px rgba(0,0,0,.22);
min-height:340px;
}
body.page-book .story-card::before{
content:"";
position:absolute;
top:0;left:0;right:0;height:4px;
background:var(--accent-solid);
z-index:2;
}
body.page-book .story-media{
position:relative;
min-height:100%;
background:
radial-gradient(circle at 50% 20%,var(--accent),transparent 46%),
linear-gradient(180deg,rgba(15,22,52,.94),rgba(6,9,24,.98));
border-right:1px solid rgba(231,184,93,.18);
display:flex;
align-items:flex-end;
justify-content:center;
overflow:hidden;
}
body.page-book .story-media::after{
content:"";
position:absolute;
inset:auto 18px 16px 18px;
height:30px;
border-radius:50%;
background:radial-gradient(circle at center,rgba(0,0,0,.42),rgba(0,0,0,0) 72%);
filter:blur(4px);
}
body.page-book .story-media img{
position:relative;
z-index:1;
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
padding:0;
display:block;
}
body.page-book .story-media img.jace-portrait{
object-position:center top;
}
body.page-book .story-media img.vance-portrait{
object-position:center top;
}
body.page-book .story-body{
padding:22px 22px 22px 22px;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
}
body.page-book .theme-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:10px;
margin-top:26px;
}
body.page-book .theme{
border:1px solid rgba(231,184,93,.32);
border-radius:6px;
background:rgba(7,12,30,.74);
padding:16px 10px;
text-align:center;
}
body.page-book .theme strong{
display:block;
color:var(--gold2);
font-size:18px;
margin-bottom:6px;
font-weight:400;
}
body.page-book .theme span{
display:block;
color:#e3d9c6;
font:13px/1.35 var(--sans);
}
body.page-book .cta-band{
position:relative;
overflow:hidden;
padding:54px 52px;
background:
linear-gradient(90deg,rgba(4,8,23,.92),rgba(4,8,23,.80)),
url('images/embedded-04-9b54766b62d3.jpg') center/cover no-repeat;
}
body.page-book .cta-box{
max-width:720px;
border:1px solid rgba(166,109,255,.42);
border-radius:10px;
background:rgba(5,9,26,.78);
padding:28px;
backdrop-filter:blur(8px);
}
body.page-book form{
display:grid;
grid-template-columns:1fr 1fr auto;
gap:10px;
margin-top:20px;
align-items:end;
}
body.page-book input{
height:42px;
border:1px solid rgba(231,184,93,.42);
background:rgba(3,7,22,.78);
color:var(--ink);
border-radius:3px;
padding:0 12px;
font:14px var(--serif);
outline:none;
}
body.page-book form button{
height:42px;
border:1px solid rgba(255,220,135,.85);
border-radius:3px;
color:#1c1206;
background:linear-gradient(180deg,#f7d474,#e6b34d 54%,#c4862b);
font:15px var(--serif);
cursor:pointer;
padding:0 16px;
}
body.page-book .note{grid-column:1/-1;margin:0;color:#d1c5b3;font:12.5px/1 var(--sans)}
body.page-book .bot-field{display:none}
body.page-book .footer{
min-height:74px;
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 64px 20px 60px;
background:#030716;
border-top:1px solid rgba(231,184,93,.22);
color:#ded4c4;
}
body.page-book .footer-brand{display:flex;align-items:center;gap:13px;color:var(--gold2);font-size:18px}
body.page-book .footer-brand img{width:40px;height:40px;object-fit:contain}
body.page-book .footer-text{font-size:15px;color:#ddd4c5}
@media(max-width:980px){
body.page-book .header{min-height:74px;padding:12px 20px;flex-wrap:wrap;gap:12px}
body.page-book .brand img{width:50px;height:50px}
body.page-book .brand span{font-size:23px}
body.page-book .nav{order:3;width:100%;justify-content:center;gap:22px;flex-wrap:wrap}
body.page-book .top-cta{margin-left:0}
body.page-book .hero{grid-template-columns:1fr;min-height:auto}
body.page-book .hero::before{content:"";display:block;height:245px;background:url('images/embedded-03-7a25fdc40830.jpg') center/cover no-repeat;border-bottom:1px solid rgba(231,184,93,.35)}
body.page-book .hero-copy{padding:28px 24px 14px}
body.page-book .cover-wrap{padding:16px 24px 34px;align-self:center;justify-content:center}
body.page-book .cover-frame{width:min(280px,82%);transform:none;margin:0 auto}
body.page-book .two-col,
body.page-book .cast-grid,
body.page-book .wide-story{grid-template-columns:1fr}
body.page-book .story-card{grid-template-columns:1fr}
body.page-book .story-media{border-right:0;border-bottom:1px solid rgba(231,184,93,.18);min-height:300px}
body.page-book .section{padding:42px 24px}
body.page-book .theme-grid{grid-template-columns:repeat(2,1fr)}
body.page-book .cta-band{padding:42px 24px}
body.page-book form{grid-template-columns:1fr}
body.page-book .footer{padding:24px;flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:560px){
body.page-book .btns{flex-direction:column}
body.page-book .btn{width:100%}
body.page-book h1{font-size:2.65rem}
body.page-book .lede{font-size:16.5px}
body.page-book .theme-grid{grid-template-columns:1fr}
body.page-book .panel{padding:20px}
}
body.page-book .footer a{color:inherit}
body.page-book .footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
justify-content:center;
margin-top:8px;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
font-size:13px;
letter-spacing:.02em;
}
body.page-book .footer-links a{
color:#f6d58a;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
padding-bottom:2px;
}
body.page-book .footer-links a:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-book .inline-link{
color:#f6d58a;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(246,213,138,.35);
}
body.page-book .inline-link:hover{color:#fff0bd;border-bottom-color:#fff0bd}
body.page-book .launch-social-note{
margin:12px 0 0;
color:#efe5d2;
font-size:15px;
line-height:1.55;
}
body.page-book .release-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
margin-top:16px;
}
body.page-book .release-actions .small-btn,
body.page-book .release-actions .btn{
text-align:center;
}
/* ===== Existing final global stylesheet ===== */
/* ==========================================================
Everlyn Project - Production CSS
Canonical final pass for Netlify deployment.
========================================================== */
:root {
--bg:#192238;
--nav:#141c2f;
--panel:#f4eadc;
--ink:#172033;
--muted:#334155;
--soft:#526174;
--gold:#c28b37;
--gold2:#6f4313;
--purple:#6f55b7;
--blue:#2f5b87;
--green:#3f7457;
}
html {
background:#192238;
scroll-behavior:smooth;
}
body {
background:
linear-gradient(180deg,#192238 0%,#202b44 22%,#d9c9b4 56%,#d4c1aa 100%) !important;
color:#172033 !important;
}
.site {
background:transparent !important;
}
main > section,
#books,
#updates,
#streaming-platforms {
scroll-margin-top:120px;
}
/* Header / navigation */
.header {
background:rgba(20,28,47,.96) !important;
border-bottom:1px solid rgba(238,205,140,.22) !important;
box-shadow:0 16px 40px rgba(0,0,0,.28) !important;
backdrop-filter:blur(14px) !important;
}
.brand span,
.nav a {
color:#fff4df !important;
}
.nav {
gap:clamp(14px,2vw,26px) !important;
}
.nav a {
white-space:nowrap;
}
.nav a:hover {
color:#f0c675 !important;
}
.top-cta {
color:#1f1408 !important;
background:linear-gradient(180deg,#f0ca76,#c28b37 58%,#986522) !important;
border:1px solid rgba(255,226,154,.46) !important;
box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
white-space:nowrap;
}
/* Hero */
.hero {
grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
background:
linear-gradient(90deg,rgba(13,19,34,.92) 0%,rgba(20,28,47,.82) 48%,rgba(20,28,47,.52) 100%),
url('images/everlynde-city-bg.webp') center/cover no-repeat !important;
border:1px solid rgba(240,198,117,.24) !important;
box-shadow:0 24px 74px rgba(0,0,0,.34) !important;
}
.hero::after {
background:linear-gradient(180deg,transparent,rgba(13,19,34,.54)) !important;
}
.hero-left,
.hero-copy {
padding-left:clamp(28px,5vw,64px) !important;
}
.hero h1,
.hero h2,
.hero h3,
.hero .section-title {
max-width:560px;
color:#f7d88a !important;
text-shadow:0 14px 34px rgba(0,0,0,.45) !important;
}
.hero p,
.hero .lede,
.hero .hero-copy,
.hero li,
.hero .release,
.hero .release strong,
.hero .release span {
color:#fff4e4 !important;
}
.hero .pill,
.hero .release {
background:rgba(8,14,28,.66) !important;
border-color:rgba(240,198,117,.32) !important;
}
.hero-right {
display:flex;
align-items:center;
justify-content:flex-end;
}
.products {
max-width:92% !important;
margin-left:auto;
}
/* Readable content cards */
.panel,
.card,
.junior-card,
.preview-card,
.download-card,
.cta-box,
.signup,
.music-card,
.hs-card,
.hs-mini,
.hyperfollow-band,
.wide-story article,
.purchase-card {
background:#f4eadc !important;
border:1px solid rgba(99,65,25,.22) !important;
box-shadow:0 18px 44px rgba(42,29,16,.14) !important;
color:#172033 !important;
}
h1,h2,h3,.section-title {
color:#6f4313 !important;
text-shadow:none !important;
}
.kicker,
.role,
.audio-label,
.hs-label {
color:#8a5519 !important;
}
p,
li,
.copy,
.lede,
.footer-text,
.note,
.launch-social-note,
.panel p,
.card p,
.junior-card p,
.preview-card p,
.download-card p,
.hs-body p,
.hs-mini p,
.purchase-card p {
color:#263449 !important;
}
.quote,
.pill,
.release-note,
.hs-note {
background:#fff7eb !important;
border-color:rgba(99,65,25,.22) !important;
color:#263449 !important;
}
/* Buttons */
.btn,
.service-btn {
min-height:44px !important;
padding:0 18px !important;
border-radius:999px !important;
background:#fff8ee !important;
border:1px solid rgba(99,65,25,.30) !important;
color:#172033 !important;
box-shadow:0 8px 18px rgba(42,29,16,.10) !important;
text-decoration:none !important;
white-space:normal !important;
font-weight:700 !important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,opacity .18s ease;
}
.btn.primary,
button[type="submit"] {
color:#1f1408 !important;
border-color:rgba(99,65,25,.42) !important;
background:linear-gradient(180deg,#f0ca76,#c28b37 58%,#986522) !important;
box-shadow:0 10px 24px rgba(96,59,18,.22) !important;
font-weight:800 !important;
}
.btn:hover,
.service-btn:hover,
.top-cta:hover,
button[type="submit"]:hover {
transform:translateY(-1px);
}
.btn:focus-visible,
.service-btn:focus-visible,
.top-cta:focus-visible,
button[type="submit"]:focus-visible,
input:focus-visible {
outline:3px solid rgba(240,198,117,.75);
outline-offset:3px;
}
input,
textarea {
background:#fffaf2 !important;
border-color:rgba(99,65,25,.28) !important;
color:#172033 !important;
}
input::placeholder,
textarea::placeholder {
color:#617086 !important;
}
/* Merged homepage story + purchase */
.story-buy-section .signup {
display:block !important;
max-width:1120px !important;
margin:0 auto !important;
padding:clamp(30px,4vw,54px) !important;
border-radius:26px !important;
}
.story-buy-section .signup > div {
width:100% !important;
}
.story-buy-section h2 {
max-width:880px;
font-size:clamp(2rem,3.3vw,3.05rem) !important;
line-height:1.07 !important;
margin-bottom:18px !important;
}
.story-buy-section p {
max-width:890px;
font-size:1.04rem;
line-height:1.68;
}
.section-subhead {
display:grid;
grid-template-columns:1fr auto 1fr;
gap:16px;
align-items:center;
margin:34px 0 4px;
color:#8a5519;
font:800 12px/1 var(--sans, Inter, system-ui, sans-serif);
letter-spacing:.14em;
text-transform:uppercase;
}
.section-subhead span {
height:1px;
background:rgba(99,65,25,.22);
}
.purchase-grid {
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:22px !important;
margin-top:32px !important;
width:100% !important;
}
.purchase-card {
min-width:0;
padding:27px !important;
border-radius:24px !important;
display:flex;
flex-direction:column;
}
.purchase-card h3 {
font-size:clamp(1.42rem,2vw,1.9rem) !important;
line-height:1.13 !important;
margin-bottom:10px !important;
}
.purchase-card p {
font-size:.98rem !important;
line-height:1.62 !important;
}
.clean-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:auto;
}
.clean-actions .btn {
flex:1 1 auto;
justify-content:center;
text-align:center;
}
/* Music service buttons */
.music-services {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:14px;
}
.music-services .service-btn {
min-height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:16px !important;
text-align:center;
font-family:var(--sans, Inter, ui-sans-serif, system-ui, sans-serif);
}
/* Secondary updates signup */
#updates.signup-wrap,
#updates.cta-band {
padding-top:clamp(30px,5vw,58px) !important;
}
#updates .signup,
#updates .cta-box {
max-width:980px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:72px minmax(0,1fr) minmax(280px,420px) !important;
gap:24px !important;
align-items:center !important;
padding:28px !important;
border-radius:22px !important;
}
#updates .signup h2,
#updates .cta-box h2 {
font-size:clamp(1.45rem,2.5vw,1.75rem) !important;
line-height:1.15 !important;
}
#updates .form {
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
#updates .form button,
#updates button[type="submit"] {
width:100%;
}
/* Character image framing */
.story-media img.vance-portrait,
.junior-story-media img.vance-portrait {
object-position:center top !important;
}
.junior-story-media img.vance-portrait {
width:90% !important;
height:94% !important;
object-fit:contain !important;
background:#f3f0ea !important;
}
/* Footer */
.footer {
padding:36px 28px !important;
background:#141c2f !important;
border-top:1px solid rgba(238,205,140,.20) !important;
color:#eadfcf !important;
}
.footer p,
.footer li,
.footer-text {
color:#eadfcf !important;
}
.footer-brand {
color:#f0c675 !important;
margin-bottom:12px !important;
}
.footer-text {
max-width:640px;
margin:0 auto 14px !important;
line-height:1.55 !important;
}
.footer-links {
gap:16px 22px !important;
}
.footer-links a,
.inline-link {
color:#e7bb69 !important;
text-decoration:none !important;
border-bottom:1px solid rgba(231,187,105,.38) !important;
}
/* Safety overrides for legacy inline muted colors */
[style*="color: var(--text-muted)"],
[style*="color:var(--text-muted)"] {
color:#334155 !important;
}
[style*="color:#d8"],
[style*="color: #d8"],
[style*="color:#efe"],
[style*="color: #efe"] {
color:#263449 !important;
}
.hero [style*="color:#d8"],
.hero [style*="color: #d8"],
.hero [style*="color:#efe"],
.hero [style*="color: #efe"] {
color:#fff4e4 !important;
}
/* Responsive polish */
@media (max-width:1040px) {
.hero {
grid-template-columns:1fr !important;
}
.hero-right {
justify-content:center;
}
.products {
max-width:min(680px,92%) !important;
margin:0 auto !important;
}
}
@media (max-width:920px) {
.purchase-grid {
grid-template-columns:1fr !important;
}
#updates .signup,
#updates .cta-box {
grid-template-columns:1fr !important;
}
#updates .mail {
display:none !important;
}
.music-services {
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width:700px) {
.header {
padding:14px 18px !important;
gap:12px !important;
}
.brand img {
width:42px !important;
height:42px !important;
}
.brand span {
font-size:1.05rem !important;
}
.nav {
width:100%;
justify-content:center;
gap:16px !important;
font-size:13px !important;
}
.mobile-optional {
display:none !important;
}
.top-cta {
margin-left:0 !important;
width:100%;
max-width:190px;
align-self:center;
justify-content:center;
}
.story-buy-section .signup {
padding:26px 20px !important;
border-radius:22px !important;
}
.music-services {
grid-template-columns:1fr;
}
.hero {
background:
linear-gradient(180deg,rgba(13,19,34,.94),rgba(20,28,47,.74)),
url('images/everlynde-city-bg.webp') center/cover no-repeat !important;
}
}
/* ==========================================================
Final deployment refinements
========================================================== */
.edition-line {
margin: -6px 0 20px;
color: #fff4e4 !important;
font-size: clamp(1rem, 1.5vw, 1.15rem);
line-height: 1.5;
max-width: 520px;
}
.page-music .hero .btns a[href="#updates"] {
display: none !important;
}
.footer-links a {
font-weight: 700;
}
/* Keep final form language polished and consistent */
#updates button[type="submit"] {
letter-spacing: .01em;
}
/* ===== Requested production-polishing fixes ===== */
/* Isolate the standalone thank-you page from global card/component rules. */
body.page-thanks {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #040817 !important;
color: #f7f0df !important;
padding: 24px;
font-family: Georgia, "Times New Roman", serif;
}
body.page-thanks .thanks-card {
max-width: 680px;
text-align: center;
border: 1px solid rgba(231,184,93,.45) !important;
border-radius: 16px !important;
padding: 44px !important;
background: linear-gradient(180deg,rgba(16,18,45,.96),rgba(7,10,29,.98)) !important;
box-shadow: 0 26px 80px rgba(0,0,0,.55) !important;
}
body.page-thanks .thanks-card img {
width: 96px;
margin: 0 auto 18px;
filter: drop-shadow(0 0 24px rgba(231,184,93,.35));
}
body.page-thanks .thanks-card h1 {
color: #f6d58a !important;
}
body.page-thanks .thanks-card p {
color: #d9cfbd !important;
}
body.page-thanks .links {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 18px;
}
body.page-thanks .links a {
color: #f6d58a !important;
text-decoration: none;
border-bottom: 1px solid rgba(246,213,138,.45);
padding-bottom: 2px;
}
/* Safe picture layout without display:contents. */
.brand picture,
.footer-brand picture {
display: inline-flex;
align-items: center;
line-height: 0;
}
.hero-right picture,
.cover-wrap picture,
.book-card picture,
.card picture,
.preview-card picture,
.download-card picture,
.junior-card picture,
.story-media picture,
.junior-story-media picture {
display: block;
line-height: 0;
}
/* Ensure interior header CTAs remain compact on mobile. */
body.page-book .top-cta,
body.page-junior .top-cta,
body.page-music .top-cta {
min-width: auto;
padding-inline: 18px !important;
}
/* Form UX/autofill polish. */
input[autocomplete="given-name"],
input[autocomplete="email"] {
scroll-margin-top: 120px;
}
/* ==========================================================
Landing Page Rescue Pass
Restores a premium desktop-first homepage and removes the
awkward picture-on-picture product collage.
========================================================== */
/* Real desktop canvas */
html,
body {
width: 100%;
min-width: 320px;
}
body {
overflow-x: hidden;
}
.site {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.header {
width: 100% !important;
}
.header-inner,
.nav-wrap,
.header > div {
max-width: 1380px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Premium homepage hero */
body.page-home .hero-home-premium {
position: relative;
width: 100% !important;
min-height: clamp(720px, 84vh, 920px) !important;
display: grid !important;
grid-template-columns: minmax(430px, 0.9fr) minmax(520px, 1.1fr) !important;
align-items: center !important;
gap: clamp(34px, 5vw, 78px) !important;
padding: clamp(54px, 7vw, 104px) clamp(34px, 6vw, 92px) !important;
isolation: isolate;
background:
radial-gradient(circle at 76% 36%, rgba(231,184,93,.18), transparent 24%),
radial-gradient(circle at 18% 24%, rgba(166,109,255,.18), transparent 30%),
linear-gradient(90deg, rgba(5,8,22,.94) 0%, rgba(8,12,30,.84) 48%, rgba(8,12,30,.62) 100%),
url("images/everlynde-city-bg.webp") center/cover no-repeat !important;
border-bottom: 1px solid rgba(231,184,93,.22);
overflow: hidden;
}
body.page-home .hero-home-premium::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(4,8,23,.10) 0%, rgba(4,8,23,.78) 100%),
radial-gradient(circle at 54% 102%, rgba(231,184,93,.13), transparent 42%);
}
body.page-home .hero-home-premium .hero-left,
body.page-home .hero-home-premium .hero-copy {
padding-left: 0 !important;
}
body.page-home .hero-home-premium .hero-left {
max-width: 690px !important;
}
body.page-home .hero-mark {
width: clamp(64px, 7vw, 92px) !important;
height: auto !important;
margin: 0 0 22px !important;
filter: drop-shadow(0 0 28px rgba(231,184,93,.42));
}
body.page-home .hero-eyebrow {
margin: 0 0 14px !important;
color: #e7b85d !important;
font: 800 12px/1.1 var(--sans, Inter, system-ui, sans-serif) !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
max-width: none !important;
}
body.page-home .hero-home-premium h1 {
max-width: 700px !important;
color: #f6d58a !important;
font-size: clamp(4.2rem, 8.2vw, 8rem) !important;
line-height: .86 !important;
letter-spacing: -.065em !important;
text-shadow: 0 22px 54px rgba(0,0,0,.48) !important;
margin-bottom: 22px !important;
}
body.page-home .hero-home-premium .hero-copy {
max-width: 590px !important;
color: #f4ead8 !important;
font-size: clamp(1.08rem, 1.45vw, 1.28rem) !important;
line-height: 1.72 !important;
margin-bottom: 0 !important;
}
body.page-home .hero-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
margin-top: 32px !important;
}
body.page-home .hero-actions .btn {
min-height: 52px !important;
padding: 0 24px !important;
font-size: 14px !important;
}
body.page-home .release {
margin-top: 22px !important;
max-width: 540px !important;
color: #fff4e4 !important;
background: rgba(4,8,23,.56) !important;
border: 1px solid rgba(231,184,93,.24) !important;
backdrop-filter: blur(12px);
}
/* Right side is now an intentional product panel, not a picture pasted on a picture */
body.page-home .hero-showcase {
width: min(720px, 100%) !important;
justify-self: end !important;
display: grid !important;
gap: 18px !important;
align-self: center !important;
}
body.page-home .showcase-feature,
body.page-home .showcase-mini {
position: relative;
overflow: hidden;
border: 1px solid rgba(231,184,93,.24);
background:
linear-gradient(180deg, rgba(14,18,42,.92), rgba(8,12,30,.92));
box-shadow: 0 28px 80px rgba(0,0,0,.36);
backdrop-filter: blur(16px);
}
body.page-home .showcase-feature {
min-height: 365px;
display: grid;
grid-template-columns: minmax(0, 1fr) 230px;
align-items: center;
gap: 26px;
padding: clamp(24px, 3vw, 36px);
border-radius: 28px;
}
body.page-home .showcase-feature::before,
body.page-home .showcase-mini::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 88% 18%, rgba(231,184,93,.16), transparent 35%),
radial-gradient(circle at 10% 96%, rgba(166,109,255,.12), transparent 40%);
}
body.page-home .showcase-copy {
position: relative;
z-index: 1;
}
body.page-home .showcase-copy h2 {
margin: 0 0 10px !important;
color: #f6d58a !important;
font-size: clamp(2rem, 3vw, 3.1rem) !important;
line-height: .98 !important;
letter-spacing: -.035em !important;
}
body.page-home .showcase-copy p {
max-width: 360px !important;
color: #eaddc6 !important;
line-height: 1.62 !important;
margin-bottom: 20px !important;
}
body.page-home .showcase-feature picture {
position: relative;
z-index: 1;
display: block;
}
body.page-home .showcase-feature img {
width: 100%;
max-height: 310px;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 24px 42px rgba(0,0,0,.38);
background: #120f19;
}
body.page-home .showcase-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
body.page-home .showcase-mini {
min-height: 180px;
border-radius: 22px;
display: grid;
grid-template-columns: 108px 1fr;
gap: 16px;
align-items: center;
padding: 18px;
}
body.page-home .showcase-mini picture {
position: relative;
z-index: 1;
display: block;
}
body.page-home .showcase-mini img {
width: 108px;
height: 138px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 16px 28px rgba(0,0,0,.34);
background: #120f19;
}
body.page-home .showcase-mini div {
position: relative;
z-index: 1;
}
body.page-home .showcase-mini h3 {
margin: 4px 0 10px !important;
color: #f8ecd5 !important;
font-size: clamp(1.12rem, 1.4vw, 1.35rem) !important;
line-height: 1.12 !important;
}
body.page-home .showcase-mini a {
color: #f6d58a !important;
font: 800 12px/1 var(--sans, Inter, system-ui, sans-serif);
text-transform: uppercase;
letter-spacing: .08em;
text-decoration: none;
border-bottom: 1px solid rgba(246,213,138,.45);
}
/* Richer homepage below the fold */
body.page-home .story-buy-section {
padding-top: clamp(64px, 7vw, 96px) !important;
padding-bottom: clamp(64px, 7vw, 96px) !important;
}
body.page-home .story-buy-section .signup {
max-width: 1180px !important;
padding: clamp(38px, 5vw, 68px) !important;
border-radius: 30px !important;
}
body.page-home .story-buy-section h2 {
font-size: clamp(2.2rem, 4.2vw, 4.35rem) !important;
line-height: .98 !important;
max-width: 920px !important;
}
body.page-home .story-buy-section p {
font-size: clamp(1rem, 1.25vw, 1.14rem) !important;
line-height: 1.75 !important;
}
/* Make all buttons large enough for their labels */
.btn,
.small-btn,
.service-btn,
.top-cta,
button[type="submit"] {
min-height: 46px !important;
padding: 0 22px !important;
line-height: 1.15 !important;
white-space: normal !important;
text-align: center !important;
}
.top-cta {
min-height: 42px !important;
padding: 0 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Junior page width/card fixes remain active */
body.page-junior .section,
body.page-junior .story,
body.page-junior .signup-wrap,
body.page-junior .cta-band {
padding-left: clamp(24px, 5vw, 72px) !important;
padding-right: clamp(24px, 5vw, 72px) !important;
}
body.page-junior .section > *,
body.page-junior .story > *,
body.page-junior .signup-wrap > *,
body.page-junior .cta-band > * {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
body.page-junior .junior-cast {
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
gap: 24px !important;
}
body.page-junior .junior-card {
min-width: 0 !important;
border-radius: 18px !important;
overflow: hidden !important;
}
body.page-junior .junior-media {
min-height: 350px !important;
background: #f4efe6 !important;
}
body.page-junior .junior-media img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
padding: 12px 10px 0 !important;
}
body.page-junior .junior-story {
max-width: 1180px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.page-junior .junior-story-card {
display: grid !important;
grid-template-columns: minmax(320px, 42%) 1fr !important;
gap: 0 !important;
align-items: stretch !important;
min-height: 440px !important;
border-radius: 20px !important;
overflow: hidden !important;
}
body.page-junior .junior-story-media {
min-height: 440px !important;
background:
radial-gradient(circle at 30% 12%, rgba(246,213,138,.28), transparent 34%),
linear-gradient(180deg, #f7f1e8, #e7dece) !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 0 !important;
}
body.page-junior .junior-story-media img.vance-portrait {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
padding: 18px 24px 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
background: transparent !important;
}
body.page-junior .junior-story-body {
padding: clamp(28px, 4vw, 54px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
body.page-junior .junior-story-body h3 {
font-size: clamp(2rem, 4vw, 3.5rem) !important;
line-height: 1 !important;
}
body.page-junior .junior-story-body p {
font-size: clamp(1rem, 1.3vw, 1.14rem) !important;
line-height: 1.7 !important;
color: #f0e6d4 !important;
}
@media (max-width: 1120px) {
body.page-home .hero-home-premium {
grid-template-columns: 1fr !important;
min-height: auto !important;
}
body.page-home .hero-showcase {
justify-self: start !important;
width: min(760px, 100%) !important;
}
}
@media (max-width: 1020px) {
body.page-junior .junior-cast {
grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
}
body.page-junior .junior-story-card {
grid-template-columns: 1fr !important;
}
body.page-junior .junior-story-media {
min-height: 520px !important;
}
}
@media (max-width: 720px) {
body.page-home .hero-home-premium {
padding: 38px 22px 46px !important;
}
body.page-home .hero-home-premium h1 {
font-size: clamp(3.6rem, 19vw, 5.35rem) !important;
}
body.page-home .showcase-feature {
grid-template-columns: 1fr !important;
}
body.page-home .showcase-grid {
grid-template-columns: 1fr !important;
}
body.page-junior .junior-cast {
grid-template-columns: 1fr !important;
}
body.page-junior .junior-story-media {
min-height: 430px !important;
}
body.page-junior .junior-story-body {
padding: 26px 22px !important;
}
.btn,
.small-btn,
.service-btn,
button[type="submit"] {
width: 100%;
min-height: 50px !important;
}
.top-cta {
width: auto !important;
max-width: none !important;
}
}
/* ==========================================================
Readability / Contrast Rescue Pass
Fixes dark text blending into dark panels and improves contrast
across dark fantasy sections while preserving warm cards.
========================================================== */
/* Dark page backgrounds need light default text. */
body,
body.page-home,
body.page-book,
body.page-junior,
body.page-music {
color: #f6efe2 !important;
}
/* Dark sections and panels: force readable type. */
.hero,
.hero-home-premium,
.section,
.story,
.cast,
.themes,
.downloads,
.wide-story,
.cta-band,
.signup-wrap,
.junior-story,
.junior-story-card,
.story-card,
.cast-card,
.hyperfollow-band,
.music-card,
.track-card,
.path-card,
.feature,
.release-note,
#story,
#cast,
#themes,
#downloads,
#tracks,
#streaming-platforms,
#updates {
color: #f6efe2 !important;
}
/* General dark-section body copy. */
.hero p,
.hero li,
.hero-copy,
.section p,
.section li,
.story p,
.story li,
.cast p,
.cast li,
.themes p,
.themes li,
.downloads p,
.downloads li,
.wide-story p,
.wide-story li,
.cta-band p,
.signup-wrap p,
.music-card p,
.track-card p,
.hyperfollow-band p,
.release-note p,
.path-card p,
.story-card p,
.cast-card p,
.junior-story-card p,
.junior-story-body p,
.junior-story-divider p,
.section-intro,
.copy,
.lede,
.traits {
color: #efe5d2 !important;
}
/* Headings on dark backgrounds should be warm/light, not brown-on-navy. */
.section-title,
.section h2,
.section h3,
.story h2,
.story h3,
.cast h2,
.cast h3,
.downloads h2,
.downloads h3,
.themes h2,
.themes h3,
.cta-band h2,
.signup-wrap h2,
.junior-story-body h3,
.junior-story-divider h3,
.music-card h3,
.track-card h3,
.path-card h3,
.story-card h3,
.cast-card h3 {
color: #f6d58a !important;
}
/* Labels / small metadata should pop but remain readable. */
.kicker,
.role,
.hs-label,
.audio-label,
.junior-story-divider .kicker,
.story-card .role,
.cast-card .role,
.junior-card .role,
.traits strong {
color: #e7b85d !important;
}
/* Warm/light cards should keep dark text for readability. */
.purchase-card,
.download-card,
.preview-card,
.hs-card,
.hs-mini,
.junior-card,
.card,
.panel,
.cta-box,
.signup {
color: #1c2535 !important;
}
.purchase-card p,
.download-card p,
.preview-card p,
.hs-card p,
.hs-mini p,
.junior-card p,
.card p,
.panel p,
.cta-box p,
.signup p {
color: #263449 !important;
}
.purchase-card h3,
.download-card h3,
.preview-card h3,
.hs-card h3,
.hs-mini h3,
.junior-card h3,
.card h3,
.panel h3,
.cta-box h2,
.signup h2 {
color: #6f4313 !important;
}
.purchase-card .kicker,
.download-card .kicker,
.preview-card .kicker,
.hs-card .hs-label,
.hs-mini .hs-label,
.junior-card .role,
.card .kicker,
.panel .kicker {
color: #8a5519 !important;
}
.purchase-card .traits,
.download-card .traits,
.preview-card .traits,
.hs-card .traits,
.junior-card .traits {
color: #526174 !important;
}
/* Junior Sterling Vance feature is a dark feature card: keep every text element readable. */
body.page-junior .junior-story-card,
body.page-junior .junior-story-body {
background: linear-gradient(180deg, rgba(9,14,34,.98), rgba(5,8,22,.98)) !important;
}
body.page-junior .junior-story-body,
body.page-junior .junior-story-body p,
body.page-junior .junior-story-body .traits {
color: #efe5d2 !important;
}
body.page-junior .junior-story-body h3 {
color: #f6d58a !important;
}
body.page-junior .junior-story-body .role {
color: #e7b85d !important;
}
/* Footer and thanks page stay high contrast. */
.footer,
.footer p,
.footer li,
.footer-text,
body.page-thanks,
body.page-thanks p {
color: #eadfcf !important;
}
.footer-brand,
body.page-thanks h1 {
color: #f6d58a !important;
}
/* Links on dark backgrounds. */
.section a:not(.btn):not(.small-btn):not(.service-btn),
.story a:not(.btn):not(.small-btn):not(.service-btn),
.footer a {
color: #f6d58a !important;
}
/* Improve disabled/low-contrast old muted text if any remains inline. */
[style*="color:#263449"],
[style*="color: #263449"],
[style*="color:#334155"],
[style*="color: #334155"],
[style*="color:#405066"],
[style*="color: #405066"] {
color: inherit !important;
}
/* But never turn text light inside light cards. */
.purchase-card [style*="color"],
.download-card [style*="color"],
.preview-card [style*="color"],
.hs-card [style*="color"],
.junior-card [style*="color"],
.card [style*="color"],
.panel [style*="color"] {
color: #263449 !important;
}
/* ==========================================================
Everlyn Asset Flywheel Homepage
High-converting layout while preserving existing assets/paths.
========================================================== */
body.page-home .asset-hero {
grid-template-columns: minmax(420px, .95fr) minmax(420px, .72fr) !important;
gap: clamp(30px, 5vw, 70px) !important;
}
body.page-home .asset-hero .hero-left {
max-width: 720px !important;
}
body.page-home .asset-hero h1 {
max-width: 720px !important;
}
.hero-optin-card {
position: relative;
z-index: 2;
width: min(500px, 100%);
justify-self: end;
align-self: center;
border: 1px solid rgba(231,184,93,.32);
border-radius: 28px;
padding: clamp(24px, 3vw, 36px);
background:
radial-gradient(circle at 95% 0%, rgba(231,184,93,.18), transparent 34%),
linear-gradient(180deg, rgba(12,16,38,.94), rgba(5,8,22,.96));
box-shadow: 0 34px 90px rgba(0,0,0,.42);
backdrop-filter: blur(18px);
color: #efe5d2;
}
.hero-optin-card h2 {
margin: 8px 0 12px;
color: #f6d58a !important;
font-size: clamp(1.75rem, 3vw, 2.7rem);
line-height: 1.02;
letter-spacing: -.03em;
}
.hero-optin-card p {
color: #efe5d2 !important;
line-height: 1.58;
}
.optin-art-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.optin-art-row img {
width: 100%;
height: clamp(112px, 13vw, 158px);
object-fit: cover;
object-position: center top;
border-radius: 14px;
border: 1px solid rgba(231,184,93,.22);
box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.flywheel-form {
display: grid;
grid-template-columns: 1fr;
gap: 11px;
margin-top: 18px;
}
.flywheel-form input {
min-height: 48px;
}
.flywheel-form button {
min-height: 50px;
}
.asset-flywheel-section .signup {
max-width: 1220px !important;
}
.flywheel-intro {
max-width: 930px;
}
.flywheel-intro h2 {
font-size: clamp(2.4rem, 5vw, 5rem) !important;
line-height: .95 !important;
}
.flywheel-loop {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
margin: 30px 0 10px;
}
.flywheel-loop div {
border: 1px solid rgba(231,184,93,.18);
border-radius: 18px;
padding: 18px;
background: rgba(255,250,242,.08);
}
.flywheel-loop strong {
display: block;
color: #f6d58a;
font-size: 1.05rem;
margin-bottom: 4px;
}
.flywheel-loop span {
display: block;
color: #efe5d2;
font-size: .92rem;
}
.dual-path-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 24px;
margin-top: 30px;
}
.path-product-card {
position: relative;
min-height: 465px;
display: grid;
grid-template-columns: minmax(0,1fr) 190px;
gap: 22px;
align-items: end;
overflow: hidden;
border-radius: 28px;
padding: clamp(24px, 3vw, 34px);
border: 1px solid rgba(231,184,93,.24);
background:
radial-gradient(circle at 80% 14%, rgba(231,184,93,.16), transparent 34%),
linear-gradient(180deg, rgba(10,14,34,.95), rgba(5,8,22,.98));
box-shadow: 0 24px 64px rgba(0,0,0,.24);
}
.path-product-card .audience-tag {
position: absolute;
top: 18px;
left: 18px;
z-index: 3;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(231,184,93,.26);
background: rgba(4,8,23,.62);
color: #f6d58a;
font: 800 11px/1 var(--sans, Inter, system-ui, sans-serif);
letter-spacing: .09em;
text-transform: uppercase;
}
.path-copy {
position: relative;
z-index: 2;
padding-top: 56px;
}
.path-copy h3 {
margin: 0 0 10px !important;
color: #f6d58a !important;
font-size: clamp(2rem, 3.8vw, 3.25rem) !important;
line-height: .98 !important;
}
.path-copy p {
color: #efe5d2 !important;
line-height: 1.65 !important;
}
.path-product-card picture {
position: relative;
z-index: 2;
align-self: center;
}
.path-product-card img {
width: 100%;
max-height: 320px;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 24px 44px rgba(0,0,0,.34);
background: #100d18;
}
.path-product-card .clean-actions {
margin-top: 22px;
}
.character-proof-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 14px;
margin-top: 30px;
}
.character-proof-strip img {
width: 100%;
height: clamp(190px, 20vw, 285px);
object-fit: cover;
object-position: center top;
border-radius: 20px;
border: 1px solid rgba(231,184,93,.20);
box-shadow: 0 20px 48px rgba(0,0,0,.22);
}
.music-flywheel-section {
padding: clamp(58px, 7vw, 96px) clamp(24px, 5vw, 72px) !important;
}
.music-flywheel-section > * {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.audio-preview-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 22px;
margin-top: 28px;
}
.audio-preview-card {
display: grid;
grid-template-columns: 104px 1fr;
gap: 16px;
align-items: center;
border: 1px solid rgba(231,184,93,.22);
border-radius: 22px;
padding: 18px;
background:
radial-gradient(circle at 100% 0%, rgba(166,109,255,.13), transparent 36%),
linear-gradient(180deg, rgba(10,14,34,.94), rgba(5,8,22,.98));
box-shadow: 0 20px 52px rgba(0,0,0,.20);
}
.audio-preview-card img {
width: 104px;
height: 104px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 14px 28px rgba(0,0,0,.28);
}
.audio-preview-card h3 {
margin: 4px 0 10px !important;
color: #f6d58a !important;
font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important;
line-height: 1.05 !important;
}
.audio-preview-card audio {
width: 100%;
min-width: 0;
}
.music-platform-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
@media (max-width: 1100px) {
body.page-home .asset-hero {
grid-template-columns: 1fr !important;
}
.hero-optin-card {
justify-self: start;
width: min(720px, 100%);
}
.dual-path-grid,
.audio-preview-grid {
grid-template-columns: 1fr;
}
.path-product-card {
grid-template-columns: minmax(0,1fr) 170px;
}
}
@media (max-width: 720px) {
.flywheel-loop {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.path-product-card {
grid-template-columns: 1fr;
}
.path-product-card picture {
max-width: 220px;
}
.character-proof-strip {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.audio-preview-card {
grid-template-columns: 82px 1fr;
}
.audio-preview-card img {
width: 82px;
height: 82px;
}
}
/* ==========================================================
World-Class QA Polish Pass
Fixes homepage character emphasis, contrast, and card/button fit
while preserving all existing artwork and asset paths.
========================================================== */
/* Main-four character emphasis on the homepage */
body.page-home .main-four-art {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 9px !important;
}
body.page-home .main-four-art img {
height: clamp(106px, 11vw, 148px) !important;
object-fit: cover !important;
object-position: center top !important;
background: #efe5d2 !important;
}
body.page-home .main-four-strip {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
}
body.page-home .main-four-strip img {
object-position: center top !important;
}
/* Establish safe contrast defaults for dark fantasy sections. */
body.page-home,
body.page-book,
body.page-junior,
body.page-music {
color: #f8efdf !important;
}
body.page-home .hero,
body.page-home .asset-hero,
body.page-home .hero-optin-card,
body.page-home .asset-flywheel-section,
body.page-home .music-flywheel-section,
body.page-home .story-buy-section,
body.page-home .signup-wrap,
body.page-home .section,
body.page-home .footer,
body.page-book .hero,
body.page-book .section,
body.page-junior .hero,
body.page-junior .section,
body.page-junior .junior-story-card,
body.page-music .hero,
body.page-music .section {
color: #f8efdf !important;
}
/* Text on dark panels must never fall into slate/brown low contrast. */
body.page-home .hero p,
body.page-home .hero li,
body.page-home .hero-copy,
body.page-home .release,
body.page-home .release span,
body.page-home .hero-optin-card p,
body.page-home .flywheel-intro p,
body.page-home .flywheel-loop span,
body.page-home .path-copy p,
body.page-home .audio-preview-card p,
body.page-home .section-intro,
body.page-home .music-flywheel-section p,
body.page-home .signup-wrap p,
body.page-home .footer p,
body.page-home .footer li,
body.page-book .section p,
body.page-book .section li,
body.page-junior .section p,
body.page-junior .section li,
body.page-junior .junior-story-body p,
body.page-music .section p,
body.page-music .section li {
color: #f2e7d6 !important;
}
/* Warm headings and labels for dark backgrounds. */
body.page-home .hero h1,
body.page-home .hero h2,
body.page-home .section-title,
body.page-home .asset-flywheel-section h2,
body.page-home .asset-flywheel-section h3,
body.page-home .music-flywheel-section h2,
body.page-home .music-flywheel-section h3,
body.page-home .hero-optin-card h2,
body.page-home .path-copy h3,
body.page-home .audio-preview-card h3,
body.page-home .footer-brand,
body.page-junior .junior-story-body h3 {
color: #f7d989 !important;
text-shadow: 0 16px 44px rgba(0,0,0,.30);
}
body.page-home .kicker,
body.page-home .hero-eyebrow,
body.page-home .audience-tag,
body.page-home .flywheel-loop strong,
body.page-junior .role,
body.page-junior .kicker {
color: #f3c768 !important;
}
/* Light/warm cards must use dark readable text, not inherited light text. */
body.page-home .purchase-card,
body.page-home .download-card,
body.page-home .preview-card,
body.page-home .card,
body.page-home .panel,
body.page-home .signup:not(.asset-flywheel-section .signup),
body.page-junior .junior-card,
body.page-junior .download-card,
body.page-junior .hs-card,
body.page-junior .hs-mini,
body.page-book .card,
body.page-music .card {
color: #182238 !important;
}
body.page-home .purchase-card p,
body.page-home .download-card p,
body.page-home .preview-card p,
body.page-home .card p,
body.page-home .panel p,
body.page-junior .junior-card p,
body.page-junior .download-card p,
body.page-junior .hs-card p,
body.page-junior .hs-mini p,
body.page-book .card p,
body.page-music .card p {
color: #263449 !important;
}
body.page-home .purchase-card h3,
body.page-home .download-card h3,
body.page-home .preview-card h3,
body.page-home .card h3,
body.page-home .panel h3,
body.page-junior .junior-card h3,
body.page-junior .download-card h3,
body.page-junior .hs-card h3,
body.page-junior .hs-mini h3,
body.page-book .card h3,
body.page-music .card h3 {
color: #6f4313 !important;
text-shadow: none !important;
}
/* Do not let buttons overflow card boundaries. */
body.page-home .clean-actions,
body.page-home .hero-actions,
body.page-home .music-platform-row,
body.page-junior .clean-actions,
body.page-junior .download-actions,
body.page-junior .card-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: stretch !important;
max-width: 100% !important;
}
body.page-home .path-product-card .clean-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
}
body.page-home .path-product-card .btn,
body.page-home .audio-preview-card .btn,
body.page-home .hero-optin-card button,
body.page-home .hero-actions .btn,
body.page-home .music-platform-row .btn,
body.page-junior .junior-card .btn,
body.page-junior .download-card .btn,
body.page-junior .small-btn,
body.page-junior .service-btn,
body.page-book .btn,
body.page-music .btn {
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 0 18px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
line-height: 1.15 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-home .path-product-card .btn {
width: 100% !important;
}
/* Keep cards elegant and roomy enough for their contents. */
body.page-home .path-product-card {
grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) !important;
align-items: center !important;
gap: 24px !important;
padding: clamp(26px, 3vw, 38px) !important;
}
body.page-home .path-copy {
min-width: 0 !important;
}
body.page-home .path-product-card picture {
min-width: 0 !important;
}
body.page-home .path-product-card img {
max-width: 100% !important;
}
/* Hero opt-in form polish: clean, readable, tappable. */
body.page-home .hero-optin-card {
border-color: rgba(247,217,137,.42) !important;
background:
radial-gradient(circle at 94% 0%, rgba(247,217,137,.20), transparent 34%),
radial-gradient(circle at 0% 100%, rgba(166,109,255,.14), transparent 38%),
linear-gradient(180deg, rgba(12,16,38,.97), rgba(5,8,22,.985)) !important;
}
body.page-home .hero-optin-card input {
width: 100% !important;
min-height: 50px !important;
border: 1px solid rgba(247,217,137,.28) !important;
background: rgba(255,255,255,.96) !important;
color: #172033 !important;
border-radius: 12px !important;
}
body.page-home .hero-optin-card input::placeholder {
color: #667085 !important;
}
body.page-home .hero-optin-card button {
width: 100% !important;
border-radius: 12px !important;
}
/* Improve audio preview contrast and containment. */
body.page-home .audio-preview-card {
min-width: 0 !important;
}
body.page-home .audio-preview-card audio {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
/* Footer readability */
.footer a,
body.page-home .footer a {
color: #f7d989 !important;
}
.footer p,
.footer-text {
color: #eadfcd !important;
}
/* Responsive refinements */
@media (max-width: 1180px) {
body.page-home .path-product-card {
grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) !important;
}
}
@media (max-width: 840px) {
body.page-home .main-four-art {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.page-home .path-product-card {
grid-template-columns: 1fr !important;
}
body.page-home .path-product-card picture {
max-width: 230px !important;
justify-self: start !important;
}
}
@media (max-width: 620px) {
body.page-home .main-four-art {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.page-home .main-four-art img {
height: 132px !important;
}
body.page-home .main-four-strip {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.page-home .hero-actions .btn,
body.page-home .music-platform-row .btn {
width: 100% !important;
}
}
/* ==========================================================
Final Mobile/Desktop Polish Pass
Fixes unreadable light-card text, low-contrast pills, mobile
spacing, button containment, and removes duplicate character strip.
========================================================== */
/* Warm/cream cards must use dark ink, even when nested inside dark sections. */
.signup,
.purchase-card,
.download-card,
.preview-card,
.hs-card,
.hs-mini,
.junior-card,
.card,
.panel,
.cta-box,
.asset-flywheel-section .signup,
body.page-home .asset-flywheel-section .signup,
body.page-home .story-buy-section .signup,
body.page-junior .info-card,
body.page-junior .audience-card,
body.page-junior .for-card,
body.page-junior .callout,
body.page-junior .cream-card {
color: #172033 !important;
}
.signup p,
.signup li,
.signup span,
.signup .section-intro,
.purchase-card p,
.download-card p,
.preview-card p,
.hs-card p,
.hs-mini p,
.junior-card p,
.card p,
.panel p,
.cta-box p,
.asset-flywheel-section .signup p,
.asset-flywheel-section .signup li,
.asset-flywheel-section .signup span,
body.page-home .asset-flywheel-section .signup p,
body.page-home .asset-flywheel-section .signup li,
body.page-home .asset-flywheel-section .signup span,
body.page-junior .info-card p,
body.page-junior .info-card li,
body.page-junior .audience-card p,
body.page-junior .audience-card li,
body.page-junior .for-card p,
body.page-junior .for-card li,
body.page-junior .callout p,
body.page-junior .callout li,
body.page-junior .cream-card p,
body.page-junior .cream-card li {
color: #273246 !important;
text-shadow: none !important;
}
.signup h1,
.signup h2,
.signup h3,
.purchase-card h3,
.download-card h3,
.preview-card h3,
.hs-card h3,
.hs-mini h3,
.junior-card h3,
.card h3,
.panel h3,
.cta-box h2,
.asset-flywheel-section .signup h2,
.asset-flywheel-section .signup h3,
body.page-home .asset-flywheel-section .signup h2,
body.page-home .asset-flywheel-section .signup h3,
body.page-junior .info-card h2,
body.page-junior .info-card h3,
body.page-junior .audience-card h2,
body.page-junior .audience-card h3,
body.page-junior .for-card h2,
body.page-junior .for-card h3,
body.page-junior .callout h2,
body.page-junior .callout h3,
body.page-junior .cream-card h2,
body.page-junior .cream-card h3 {
color: #7b4a17 !important;
text-shadow: none !important;
}
.signup .kicker,
.signup .role,
.signup .hs-label,
.signup .audio-label,
.asset-flywheel-section .signup .kicker,
.asset-flywheel-section .signup .role,
.asset-flywheel-section .signup .section-subhead strong,
body.page-junior .junior-card .role,
body.page-junior .download-card .role,
body.page-junior .hs-card .hs-label {
color: #8a5519 !important;
text-shadow: none !important;
}
.signup a:not(.btn):not(.small-btn):not(.service-btn),
.asset-flywheel-section .signup a:not(.btn):not(.small-btn):not(.service-btn),
.card a:not(.btn):not(.small-btn):not(.service-btn),
.panel a:not(.btn):not(.small-btn):not(.service-btn) {
color: #7b4a17 !important;
font-weight: 800 !important;
}
/* Dark-section readability */
body.page-home .music-flywheel-section,
body.page-home .music-flywheel-section p,
body.page-home .music-flywheel-section .section-intro,
body.page-home .music-flywheel-section .kicker {
color: #f7ecdc !important;
}
body.page-home .music-flywheel-section .section-title {
color: #f7d989 !important;
text-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
/* Hero pills/tags on dark backgrounds were too faint. */
body.page-junior .hero .tag,
body.page-junior .hero .pill,
body.page-junior .hero .meta,
body.page-junior .hero-tags span,
body.page-junior .hero-badges span,
body.page-junior .badge,
body.page-book .hero .tag,
body.page-book .hero .pill,
body.page-music .hero .tag,
body.page-music .hero .pill {
color: #f8e9c5 !important;
background: rgba(3,7,22,.72) !important;
border-color: rgba(247,217,137,.55) !important;
text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}
.hero [class*="tag"],
.hero [class*="pill"],
.hero [class*="badge"] {
color: #f8e9c5 !important;
background: rgba(3,7,22,.70) !important;
}
/* Asset flywheel section fixes */
body.page-home .asset-flywheel-section .signup {
background:
radial-gradient(circle at 8% 8%, rgba(247,217,137,.28), transparent 30%),
linear-gradient(180deg, #fff7ea, #f4ead8) !important;
border-color: rgba(123,74,23,.22) !important;
}
body.page-home .flywheel-intro h2 {
color: #7b4a17 !important;
text-shadow: none !important;
}
body.page-home .flywheel-intro p {
color: #273246 !important;
text-shadow: none !important;
}
body.page-home .flywheel-loop div {
background: rgba(255,255,255,.46) !important;
border-color: rgba(123,74,23,.18) !important;
}
body.page-home .flywheel-loop strong {
color: #8a5519 !important;
}
body.page-home .flywheel-loop span {
color: #344157 !important;
}
/* Book choice cards stay dark, with high-contrast text. */
body.page-home .path-product-card,
body.page-home .audio-preview-card {
color: #f7ecdc !important;
}
body.page-home .path-product-card p,
body.page-home .audio-preview-card p {
color: #f1e6d6 !important;
}
body.page-home .path-product-card h3,
body.page-home .audio-preview-card h3 {
color: #f7d989 !important;
}
/* Hide old duplicate character strip if any stale markup remains. */
body.page-home .character-proof-strip.main-four-strip,
body.page-home .character-proof-strip:empty {
display: none !important;
}
/* Buttons: fit inside cards everywhere */
.btn,
.small-btn,
.service-btn,
.top-cta,
button[type="submit"],
input[type="submit"] {
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 48px !important;
padding: 0 18px !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
line-height: 1.15 !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.clean-actions,
.card-actions,
.download-actions,
.hero-actions,
.music-platform-row {
max-width: 100% !important;
min-width: 0 !important;
}
.path-product-card .clean-actions,
.purchase-card .clean-actions,
.download-card .download-actions,
.card .card-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
}
.path-product-card .clean-actions .btn,
.purchase-card .clean-actions .btn,
.download-card .download-actions .btn,
.card .card-actions .btn {
width: 100% !important;
}
/* Mobile layout improvements */
@media (max-width: 720px) {
body.page-home .asset-hero,
body.page-junior .hero,
body.page-book .hero,
body.page-music .hero {
padding-left: 24px !important;
padding-right: 24px !important;
}
body.page-home .hero-optin-card,
body.page-home .asset-flywheel-section .signup,
body.page-home .audio-preview-card,
body.page-junior .junior-card,
body.page-junior .download-card,
body.page-junior .hs-card,
body.page-junior .hs-mini,
body.page-junior .signup {
border-radius: 24px !important;
}
body.page-home .asset-flywheel-section .signup {
padding: 30px 24px !important;
}
body.page-home .flywheel-intro h2 {
font-size: clamp(2.4rem, 13vw, 3.65rem) !important;
line-height: .96 !important;
}
body.page-home .flywheel-loop {
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
body.page-home .flywheel-loop div {
min-height: 104px !important;
padding: 16px !important;
}
body.page-home .path-product-card {
padding: 24px !important;
}
body.page-home .audio-preview-grid {
gap: 20px !important;
}
body.page-home .audio-preview-card {
grid-template-columns: 88px 1fr !important;
padding: 18px !important;
}
body.page-home .audio-preview-card img {
width: 88px !important;
height: 88px !important;
}
body.page-home .music-platform-row .btn,
body.page-home .hero-actions .btn,
body.page-junior .hero .btn,
body.page-book .hero .btn,
body.page-music .hero .btn {
width: 100% !important;
}
}
@media (max-width: 430px) {
body.page-home .asset-hero,
body.page-junior .hero,
body.page-book .hero,
body.page-music .hero {
padding-left: 20px !important;
padding-right: 20px !important;
}
body.page-home .audio-preview-card {
grid-template-columns: 76px 1fr !important;
gap: 14px !important;
}
body.page-home .audio-preview-card img {
width: 76px !important;
height: 76px !important;
}
body.page-home .audio-preview-card h3 {
font-size: 1.32rem !important;
}
}