/* ===============================
DJ ORANGES – CSS
Breakpoint: <= 900px = mobile
Theme: AUTO
=============================== */
/* ===============================
TABLE OF CONTENTS (visual grouping only — order preserved)
01. Design tokens / base
02. Typography / elements
03. Layout helpers
04. Header + navigation
05. Buttons + links
06. Chips / badges
07. Cards / grids
08. Sections: hero, series, stories, retailers, characters, merch
09. Modals / dialogs / overlays
10. Footer
11. Animations
12. Media queries
========================================================================== */
/* ===============================
THEME TOKENS
=============================== */
/* === 01. DESIGN TOKENS / BASE ======================================= */
:root{
/* Brand (DJ ORANGES) */
--primary-color:#2ED4C6; /* DJ Oranges Teal */
--accent-color:#FF4FA3; /* Electric Pink */
--brand-orange:#FF7A1A; /* Neon Orange (extra token) */
--brand-purple:#7A4CFF; /* Neon Purple (extra token) */
--brand-cyan:#5AF2FF; /* Cyan Glow (extra token) */
--brand-accent-rgb:255,79,163; /* pink */
--brand-primary-rgb:46,212,198; /* teal */
--brand-purple-rgb:122,76,255;
--brand-orange-rgb:255,122,26;
--brand-cyan-rgb:90,242,255;
/* Alias tokens (prevents blank gradients in older/newer blocks) */
--brand-primary: var(--primary-color);
--brand-accent: var(--accent-color);
/* Light (default) */
--light-bg:#F8FAFC;
--text-color:#111827;
--card-bg:rgba(255,255,255,0.92);
--border-color:rgba(17,24,39,0.12);
--section-even:rgba(var(--brand-primary-rgb),0.08); /* teal wash */
--section-odd: rgba(var(--brand-accent-rgb),0.08); /* pink wash */
--shadow-soft:0 10px 24px rgba(16,24,40,0.10);
--shadow-pop: 0 22px 60px rgba(16,24,40,0.18);
--header-h:110px;
--focus-ring:0 0 0 3px rgba(var(--brand-accent-rgb),0.20), 0 0 0 6px rgba(var(--brand-primary-rgb),0.18);
--focus-outline:2px solid rgba(var(--brand-accent-rgb),0.60);
--link-color:var(--brand-purple);
--font-display:"Exo 2", sans-serif;
--font-body:"Nunito", sans-serif;
--radius-sm:10px;
--radius-md:14px;
--radius-lg:18px;
--hairline:1px solid rgba(16,24,40,0.10);
--hairline-soft:1px solid rgba(16,24,40,0.08);
--container:1160px;
--gutter:clamp(16px, 3vw, 28px);
--ease:cubic-bezier(.2,.7,.2,1);
--bg-pink:rgba(var(--brand-accent-rgb),0.14);
--bg-purple:rgba(var(--brand-purple-rgb),0.14);
--bg-wash:rgba(var(--brand-primary-rgb),0.10);
--header-grad-a:rgba(46,212,198,0.78); /* teal */
--header-grad-b:rgba(var(--brand-purple-rgb),0.62); /* purple */
--header-border:rgba(255,255,255,0.22);
--nav-submenu-bg:rgba(var(--brand-purple-rgb),0.88); /* purple glow panel */
--nav-mobile-panel:rgba(27,30,38,0.90); /* dark stage grey panel */
/* Premium catalog tokens */
--surface: var(--card-bg);
--surface-2: rgba(255,255,255,0.70);
--surface-border: var(--border-color);
--text-strong: var(--text-color);
--text-muted: rgba(17,24,39,0.72);
--ring: 0 0 0 3px rgba(var(--brand-accent-rgb),0.18), 0 0 0 6px rgba(var(--brand-primary-rgb),0.14);
--card-pad: 1.25rem;
--card-gap: .75rem;
/* ✅ Background image subtle controls (NEW) */
--bg-image-opacity: 0.10; /* try 0.10–0.22 */
--bg-image-blur: 3px; /* 0–6px */
--bg-image-sat: 0.65; /* 0.6–0.95 */
}
/* AUTO DARK TOKENS */
/* === 12. MEDIA QUERIES ============================================== */
@media (prefers-color-scheme: dark){
:root{
/* Core dark surfaces */
--light-bg:#0B0F19;
--text-color:#E5E7EB;
--card-bg:rgba(17,24,39,0.72);
--border-color:rgba(255,255,255,0.14);
/* DJ ORANGES sections */
--section-even:rgba(46,212,198,0.12); /* teal */
--section-odd: rgba(255,79,163,0.12); /* pink */
/* Links */
--link-color:var(--brand-cyan);
/* Background glow wash (DJ ORANGES palette) */
--bg-pink:rgba(255,79,163,0.22); /* pink */
--bg-purple:rgba(122,76,255,0.22); /* purple */
--bg-wash:rgba(46,212,198,0.16); /* teal */
/* Header gradients (DJ ORANGES palette) */
--header-grad-a:rgba(46,212,198,0.36); /* teal */
--header-grad-b:rgba(122,76,255,0.34); /* purple */
--header-border:rgba(255,255,255,0.10);
/* Nav panels */
--nav-submenu-bg:rgba(17,24,39,0.92);
--nav-mobile-panel:rgba(17,24,39,0.90);
/* Card surfaces */
--surface: rgba(17,24,39,0.78);
--surface-2: rgba(17,24,39,0.55);
--surface-border: rgba(255,255,255,0.14);
--text-muted: rgba(229,231,235,0.78);
/* Shadows */
--shadow-soft:0 14px 32px rgba(0,0,0,0.35);
--shadow-pop: 0 28px 80px rgba(0,0,0,0.55);
/* Make image slightly stronger in dark */
--bg-image-opacity: 0.16;
--bg-image-sat: 0.86;
}
}
/* ===============================
RESET & BASE
=============================== */
*{ box-sizing:border-box; }
/* === 02. TYPOGRAPHY / ELEMENTS ====================================== */
html{
scroll-behavior:smooth;
scroll-padding-top:var(--header-h);
color-scheme: light dark;
background: var(--light-bg);
}
[id]{ scroll-margin-top:var(--header-h); }
body{
margin:0;
font-family:var(--font-body);
background-color:var(--light-bg);
color:var(--text-color);
line-height:1.6;
padding-top:var(--header-h);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* ===============================
DJ ORANGES – WORLD BACKGROUND
=============================== */
body::before{
content:"";
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
/* Light mode background */
background:
radial-gradient(900px 500px at 15% 10%, rgba(255,79,163,0.22), transparent 60%),
radial-gradient(900px 500px at 85% 15%, rgba(122,76,255,0.22), transparent 60%),
radial-gradient(1100px 600px at 50% 90%, rgba(46,212,198,0.22), transparent 65%),
linear-gradient(to bottom right, rgba(255,255,255,0.85), rgba(255,255,255,0.65));
filter: blur(8px) saturate(1.05);
}
/* ✅ DARK MODE: force a truly dark base */
@media (prefers-color-scheme: dark){
body::before{
background:
radial-gradient(900px 520px at 15% 12%, rgba(var(--brand-accent-rgb),0.22), transparent 62%),
radial-gradient(900px 520px at 85% 16%, rgba(var(--brand-purple-rgb),0.20), transparent 62%),
radial-gradient(1200px 700px at 50% 92%, rgba(var(--brand-primary-rgb),0.18), transparent 68%),
linear-gradient(to bottom right, rgba(7,10,16,0.98), rgba(10,14,24,0.95));
filter: blur(10px) saturate(1.15);
}
}
a{ color:var(--link-color); }
a:hover{ color:var(--accent-color); }
a:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:10px; }
/* ✅ ALSO support manual dark mode toggles (pick the selector that matches your JS) */
html[data-theme="dark"] body::before,
body.theme-dark::before,
body.dark::before{
background:
radial-gradient(900px 520px at 15% 12%, rgba(var(--brand-accent-rgb),0.22), transparent 62%),
radial-gradient(900px 520px at 85% 16%, rgba(var(--brand-purple-rgb),0.20), transparent 62%),
radial-gradient(1200px 700px at 50% 92%, rgba(var(--brand-primary-rgb),0.18), transparent 68%),
linear-gradient(to bottom right, rgba(7,10,16,0.98), rgba(10,14,24,0.95));
filter: blur(10px) saturate(1.15);
}
@font-face {
font-family: 'Exo 2';
font-display: swap;
}
/* ===============================
HEADER + NAV + DROPDOWNS
=============================== */
/* === 04. HEADER + NAVIGATION ======================================== */
header{
position:fixed;
inset:0 auto auto 0;
width:100%;
z-index:999;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:.6em 1em;
gap:.25em;
color:#fff;
text-align:center;
border-bottom:1px solid var(--header-border);
background:linear-gradient(to bottom, var(--header-grad-a), var(--header-grad-b));
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
box-shadow:0 14px 34px rgba(16,24,40,0.22);
transition:background-color .3s ease, backdrop-filter .3s ease;
}
.logo-container{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:1em;
}
.logo-link{ display:inline-block; }
.logo{
height:50px;
width:auto;
max-width:100%;
margin-top:.25em;
}
.site-title{
font-size:2em;
font-family:var(--font-display);
margin:0;
color:#fff;
flex:1;
text-align:center;
letter-spacing:0.4px;
text-shadow:0 2px 12px rgba(0,0,0,0.18);
}
/* MENU TOGGLE FOR MOBILE */
.menu-toggle{
display:none;
background:none;
border:none;
font-size:2em;
color:#fff;
cursor:pointer;
position:absolute;
top:1em;
right:1em;
z-index:1001;
transition:transform .18s var(--ease), opacity .18s var(--ease);
}
.menu-toggle:hover{ transform:translateY(-1px); }
.menu-toggle:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:12px; }
/* NAVIGATION */
nav{ margin-top:1em; }
nav ul{
list-style:none;
padding:0;
margin:0;
display:flex;
gap:1em;
justify-content:center;
flex-wrap:wrap;
}
nav a{
color:#fff;
text-decoration:none;
font-weight:700;
padding:0.5em 1em;
border-radius:10px;
font-family:var(--font-display);
transition:background-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
nav a:hover{
background-color:rgba(255,255,255,0.94);
color:var(--accent-color);
box-shadow:0 12px 28px rgba(16,24,40,0.18);
transform:translateY(-1px);
}
nav a:active{ transform:translateY(0); }
nav ul.nav-root{ position:relative; }
nav li.has-submenu{ position:relative; }
nav .parent-link{ padding-right:.4em; }
nav .submenu-toggle{
appearance:none;
border:0;
background:transparent;
color:#fff;
font:700 1.1rem var(--font-display);
line-height:1;
cursor:pointer;
padding:0 .25em;
transform-origin:50% 50%;
transition:transform .2s var(--ease), color .2s var(--ease);
}
nav li.has-submenu.open > .submenu-toggle,
nav .submenu-toggle[aria-expanded="true"]{
transform:rotate(180deg);
color:#fff;
}
nav .submenu{
position:absolute;
left:0;
top:calc(100% + .4rem);
min-width:220px;
display:none;
flex-direction:column;
gap:.25rem;
padding:.6rem;
background:var(--nav-submenu-bg);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
border-radius:12px;
box-shadow:0 22px 60px rgba(16,24,40,0.26);
border:1px solid rgba(255,255,255,0.14);
z-index:1000;
opacity:0;
visibility:hidden;
transform:translateY(6px);
transition:opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s;
}
nav .submenu a{
display:block;
text-align:center;
padding:.45rem .6rem;
border-radius:10px;
}
nav .submenu a:hover{
background:rgba(255,255,255,0.92);
color:var(--accent-color);
}
/* Ensure submenu caret is always visible */
.submenu-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: .35rem;
padding: .15rem .35rem;
background: transparent;
border: 0;
color: inherit;
font-size: 1rem;
line-height: 1;
cursor: pointer;
opacity: .95;
}
.submenu-toggle:focus{
outline: 2px solid rgba(232,62,140,.45);
outline-offset: 2px;
border-radius: 8px;
}
/* Desktop dropdown behavior */
@media (min-width:900px){
nav li.has-submenu:hover > .submenu,
nav li.has-submenu:focus-within > .submenu{
display:flex;
opacity:1;
visibility:visible;
transform:translateY(0);
transition-delay:0s;
}
nav li.has-submenu:hover > .submenu--wide,
nav li.has-submenu:focus-within > .submenu--wide{ display:grid; }
/* Desktop: if JS sets .open, keep submenu visible (sticky open) */
@media (min-width:900px){
nav li.has-submenu.open > .submenu{
display:flex;
opacity:1;
visibility:visible;
transform:translateY(0);
transition-delay:0s;
}
nav li.has-submenu.open > .submenu--wide{
display:grid;
}
/* Mega menu support if you're using .has-mega */
nav li.has-mega.open > .mega-menu{
display:grid;
opacity:1;
visibility:visible;
transform:translateY(0);
}
}
nav .submenu--wide{
grid-template-columns:repeat(2, minmax(180px, 1fr));
column-gap:1rem;
row-gap:.4rem;
min-width:420px;
}
nav .submenu--scrollable{
max-height:65vh;
overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:var(--accent-color) rgba(255,255,255,0.15);
}
nav .submenu--scrollable::-webkit-scrollbar{ width:10px; }
nav .submenu--scrollable::-webkit-scrollbar-track{
background:rgba(255,255,255,0.08);
border-radius:10px;
}
nav .submenu--scrollable::-webkit-scrollbar-thumb{
background-color:var(--accent-color);
border-radius:10px;
}
}
/* MOBILE: drawer + accordion (<= 899px) */
@media (max-width:899px){
body{ padding-top:var(--header-h); }
header{ padding:.25em 1em; gap:0; }
.logo{ height:40px; }
nav{ margin-top:.5em; }
.menu-toggle{
display:block;
font-size:1.5em;
top:.4em;
right:.5em;
}
nav.site-nav,
#site-nav.site-nav{
position:fixed;
top:var(--header-h);
left:0;
right:0;
z-index:1001;
transform:translateY(-8px);
opacity:0;
pointer-events:none;
transition:transform .2s var(--ease), opacity .2s var(--ease);
}
nav.site-nav.open,
#site-nav.site-nav.open{
transform:translateY(0);
opacity:1;
pointer-events:auto;
}
nav.site-nav .nav-links,
#site-nav.site-nav .nav-links{
display:none;
flex-direction:column;
gap:.4rem;
padding:.75rem 1rem 1rem;
background:var(--nav-mobile-panel);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
border-top:1px solid rgba(255,255,255,.10);
border-radius:12px;
box-shadow:0 18px 40px rgba(16,24,40,0.35);
align-items:stretch;
text-align:right;
max-height:calc(100dvh - var(--header-h) - 12px);
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
nav.site-nav.open .nav-links,
#site-nav.site-nav.open .nav-links{ display:flex !important; }
nav.site-nav a,
#site-nav.site-nav a{ padding:.45em .9em; }
nav.site-nav li.has-submenu,
#site-nav.site-nav li.has-submenu{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
width:100%;
gap:.35rem;
}
nav.site-nav li.has-submenu > .parent-link,
#site-nav.site-nav li.has-submenu > .parent-link{
grid-column:1;
justify-self:end;
padding:.55rem 0;
}
nav.site-nav li.has-submenu > .submenu-toggle,
#site-nav.site-nav li.has-submenu > .submenu-toggle{
grid-column:2;
justify-self:end;
font-size:1.25rem;
padding:.25rem .4rem;
line-height:1;
}
nav.site-nav .submenu,
#site-nav.site-nav .submenu{
position:static !important;
display:none;
margin:.25rem 0 .2rem;
padding:.5rem .55rem .55rem .7rem;
background:rgba(255,255,255,0.12);
border-radius:10px;
box-shadow:none;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
}
nav.site-nav li.has-submenu.open > .submenu,
#site-nav.site-nav li.has-submenu.open > .submenu{ display:block; }
nav.site-nav .submenu a,
#site-nav.site-nav .submenu a{
display:block;
padding:.35rem 0;
text-align:right;
}
nav li.has-submenu.open > .submenu.submenu--wide{
display:grid;
grid-template-columns:1fr;
row-gap:.15rem;
}
}
@media (max-width:899px) and (orientation:landscape){
nav.site-nav .nav-links{ padding:.75rem .85rem 1rem; }
nav.site-nav li.has-submenu.open > .submenu.submenu--wide{
display:grid !important;
grid-template-columns:repeat(2, minmax(140px, 1fr));
gap:.35rem 1rem;
}
nav.site-nav .submenu.submenu--scrollable{
max-height:55vh;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
}
@media (max-width:899px) and (max-height:500px){
header{ padding:.2em .75em; }
.logo{ height:34px; }
.site-title{ font-size:1.35em; }
nav.site-nav .nav-links,
#site-nav.site-nav .nav-links{
padding:.6rem .75rem .75rem;
gap:.25rem;
border-radius:10px;
max-height:calc(100dvh - var(--header-h) - 8px);
}
nav.site-nav a,
#site-nav.site-nav a{
padding:.33em .85em;
font-size:.98rem;
}
nav.site-nav .submenu,
#site-nav.site-nav .submenu{
margin:.2rem 0 .2rem;
padding:.42rem .5rem;
}
nav.site-nav li.has-submenu > .submenu-toggle,
#site-nav.site-nav li.has-submenu > .submenu-toggle{
font-size:1.1rem;
padding:.2em .35em;
}
}
header .logo-container{ justify-content:center !important; text-align:center; }
header .logo{ margin:0 auto; display:block; }
/* ===============================
MOBILE LANDSCAPE FIX: NAV DRAWER MUST SCROLL
=============================== */
@media (max-width:899px){
nav.site-nav{
position:fixed !important;
top:var(--header-h) !important;
left:0 !important;
right:0 !important;
height:calc(100svh - var(--header-h)) !important;
max-height:calc(100svh - var(--header-h)) !important;
overflow-y:auto !important;
overflow-x:hidden !important;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
transform:none !important;
}
nav.site-nav:not(.open){
height:0 !important;
max-height:0 !important;
overflow:hidden !important;
}
nav.site-nav .nav-links{
display:flex !important;
flex-direction:column !important;
width:100% !important;
max-height:none !important;
overflow:visible !important;
}
nav.site-nav .submenu{
position:static !important;
display:none;
width:100% !important;
max-height:none !important;
overflow:visible !important;
}
nav.site-nav li.has-submenu.open > .submenu{ display:block !important; }
nav.site-nav li.has-submenu > .submenu{ grid-column:1 / -1 !important; }
nav.site-nav.open{
opacity:1 !important;
pointer-events:auto !important;
}
}
@supports (height:100dvh){
@media (max-width:899px){
nav.site-nav{
height:calc(100dvh - var(--header-h)) !important;
max-height:calc(100dvh - var(--header-h)) !important;
}
}
}
/* ===============================
MAIN CONTENT
=============================== */
main{
max-width:var(--container);
margin:0 auto;
padding:1.25rem var(--gutter) 2.25rem;
}
section{
padding:2.25rem 1.5rem;
margin:1.25rem 0;
background:var(--card-bg);
border:var(--hairline-soft);
border-left:6px solid var(--section-odd);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft);
scroll-margin-top:calc(var(--header-h) + 16px);
}
section:nth-of-type(even){
border-left-color:var(--section-even);
}
/* === 08. PAGE SECTIONS ============================================== */
#series{
text-align:center;
padding:2.75rem 1.5rem 3rem;
background:
radial-gradient(900px 420px at 50% 0%, rgba(var(--brand-accent-rgb),0.16), transparent 65%),
radial-gradient(900px 420px at 50% 100%, rgba(var(--brand-primary-rgb),0.14), transparent 60%),
linear-gradient(to bottom right, rgba(255,255,255,0.78), rgba(255,255,255,0.62));
border-left-color:transparent;
border:1px solid rgba(255,255,255,0.45);
box-shadow:0 24px 70px rgba(16,24,40,0.14);
}
h1,h2,h3,h4{
font-family:var(--font-display);
line-height:1.22;
color:var(--text-color) !important;
text-shadow:0 1px 2px rgba(255,255,255,0.35);
margin:0 0 1rem;
letter-spacing:0.2px;
}
#series h2{
font-size:clamp(1.9rem, 2.6vw, 2.35rem);
letter-spacing:0.6px;
margin-bottom:.6rem;
}
p{ font-family:var(--font-body); }
p + p{ margin-top:.75rem; }
details{ margin-top:.85rem; }
/* ===============================
HERO / COVER AREA
=============================== */
.portfolio-grid{
display:flex;
justify-content:center;
margin-top:1.25rem;
}
/* NOTE: property-card used elsewhere stays styled.
We remove the “frame” ONLY for homepage cover slideshow card below. */
.property-card{
display:flex;
align-items:center;
justify-content:center;
padding:1rem;
border-radius:var(--radius-lg);
background:var(--card-bg);
border:var(--hairline-soft);
box-shadow:0 18px 44px rgba(16,24,40,0.14);
}
/* Remove the outer “card frame” around the homepage slideshow ONLY */
.portfolio-grid .property-card{
padding:0 !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* ===============================
PREMIUM CATALOG: CARDS (Books + Products + Characters)
=============================== */
/* Catalog grids align like a product page */
.book-grid,
.product-grid{
align-items:stretch;
}
/* Core premium card surface */
.book-card,
.product-card,
#characters .cast-card{
background:var(--surface);
border:1px solid var(--surface-border);
border-radius:18px;
box-shadow:var(--shadow-soft);
padding:var(--card-pad);
display:flex;
flex-direction:column;
gap:var(--card-gap);
position:relative;
overflow:hidden;
}
/* Subtle brand sheen at top edge */
.book-card::before,
.product-card::before,
#characters .cast-card::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:2px;
background:linear-gradient(90deg,
rgba(var(--brand-accent-rgb),0.0),
rgba(var(--brand-accent-rgb),0.65),
rgba(var(--brand-primary-rgb),0.55),
rgba(var(--brand-primary-rgb),0.0)
);
opacity:.75;
}
/* Premium hover + focus treatment */
.book-card:hover,
.product-card:hover,
#characters .cast-card:hover{
transform:translateY(-3px);
box-shadow:var(--shadow-pop);
border-color:rgba(var(--brand-accent-rgb),0.28);
}
.book-card:focus-within,
.product-card:focus-within,
#characters .cast-card:focus-within{
box-shadow:var(--shadow-pop), var(--ring);
}
/* Catalog hierarchy */
.book-card h3,
.product-card h3,
#characters .ref-caption h4{
margin:0;
font-family:var(--font-display);
font-size:1.2rem;
letter-spacing:.2px;
color:var(--text-strong) !important;
line-height:1.25;
}
/* Card copy */
.book-card p,
.product-card p,
#characters .ref-caption p{
margin:0;
color:var(--text-muted);
line-height:1.55;
font-size:1rem;
}
/* ===============================
BOOK GRID (3-up default + optional 2-up)
=============================== */
.book-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:2em;
margin-top:2em;
align-items:start;
}
@media (min-width:1000px){ .book-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1200px){ .book-grid{ grid-template-columns:repeat(3, 1fr); } }
/* TWO-UP sections (sessions/books) */
.book-grid--two-up{
grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
max-width:980px;
margin-left:auto;
margin-right:auto;
gap:2.25em;
}
@media (min-width:900px){
.book-grid--two-up{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
.book-grid--two-up .book-card{
padding:1.6rem 1.6rem; /* “hero” feel */
}
/* ===============================
BOOK COVERS
=============================== */
/* Base “product shot” look (shared with product images + cast images) */
.book-cover,
.product-card img,
#characters .cast-img{
border-radius:14px;
border:1px solid rgba(255,255,255,0.18);
background:var(--surface-2);
box-shadow:0 10px 22px rgba(16,24,40,0.14);
}
/* HARD LOCK: cover asset size */
.book-cover{
width:200px !important;
height:300px !important;
max-width:200px !important;
object-fit:cover !important;
display:block;
margin:0 auto 1em;
}
/* Professional catalog frame (covers only) */
.book-card .book-cover{
border-radius:12px;
background:transparent;
border:1px solid rgba(255,255,255,0.55);
outline:1px solid rgba(16,24,40,0.12);
outline-offset:-1px;
box-shadow:
0 18px 42px rgba(16,24,40,0.18),
0 0 0 1px rgba(255,255,255,0.22) inset;
}
.book-card:hover .book-cover{
transform:translateY(-1px);
box-shadow:
0 22px 60px rgba(16,24,40,0.22),
0 0 0 1px rgba(255,255,255,0.24) inset;
}
@media (prefers-color-scheme: dark){
.book-card .book-cover{
border:1px solid rgba(255,255,255,0.18);
outline:1px solid rgba(255,255,255,0.10);
box-shadow:
0 22px 60px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.10) inset;
}
}
/* TWO-UP must never upscale covers */
.book-grid--two-up .book-cover{
width:200px !important;
height:300px !important;
max-width:200px !important;
}
/* ===============================
BUY BUTTONS + RETAILER DROPDOWNS
=============================== */
.buy-links{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
gap:.75em;
margin-top:1em;
}
.buy-link{
display:inline-block;
text-align:center;
background-color:var(--accent-color);
color:#fff;
padding:.55em 1em;
text-decoration:none;
border-radius:14px;
font-weight:800;
letter-spacing:.2px;
font-family:var(--font-display);
transition:transform .15s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
box-shadow:0 12px 26px rgba(var(--brand-accent-rgb),0.18), 0 10px 18px rgba(16,24,40,0.10);
line-height:1.2;
}
.buy-link:hover{ background-color:var(--primary-color); transform:translateY(-1px); }
.buy-link:active{ transform:translateY(0); }
.buy-link:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.buy-link--outline{
background:var(--accent-color);
color:#fff;
border:2px solid var(--accent-color);
box-shadow:none;
}
.buy-link--outline:hover{ background:var(--primary-color); border-color:var(--primary-color); color:#fff; }
.buy-group{ margin-top:.75em; border:0; padding:0; }
.buy-group > summary{ list-style:none; cursor:pointer; }
.buy-group > summary::-webkit-details-marker{ display:none; }
.buy-group > summary{
padding:.55rem .75rem;
border-radius:12px;
background:rgba(16,24,40,0.04);
border:1px solid rgba(16,24,40,0.10);
font-family:var(--font-display);
font-weight:800;
}
/* Make buy-link--outline summaries use the pink filled style */
.buy-group > summary.buy-link--outline {
background: var(--accent-color);
color: #fff;
border: 2px solid var(--accent-color);
}
.buy-group > summary.buy-link--outline:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.buy-group > summary::after{
content:"▾";
margin-left:.5em;
font-size:.9em;
transition:transform .2s var(--ease);
}
.buy-group[open] > summary::after{ transform:rotate(180deg); }
@media (prefers-color-scheme: dark){
.buy-group > summary{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.14);
color:var(--text-strong);
}
.buy-group > summary.buy-link--outline {
background: var(--accent-color);
color: #fff;
border: 2px solid var(--accent-color);
}
}
.buy-links-sub{
margin-top:.75em;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
gap:.5em;
}
.buy-link-sub{
font-weight:700;
padding:.45em .9em;
background:rgba(16,24,40,0.04);
color:#111;
border:1px solid rgba(16,24,40,0.10);
border-radius:999px;
}
.buy-link-sub:hover{ background:rgba(16,24,40,0.08); color:#111; }
.buy-subgroup > summary{ cursor:pointer; list-style:none; }
.buy-subgroup > summary::-webkit-details-marker{ display:none; }
.buy-subgroup > summary::after{
content:"▾";
margin-left:.4em;
font-size:.8em;
transition:transform .2s var(--ease);
}
.buy-subgroup[open] > summary::after{ transform:rotate(180deg); }
.buy-subgroup .buy-link-sub{ font-size:.9em; padding:.4em .8em; }
/* Pin CTAs to the bottom for catalog feel */
.book-card .buy-links,
.product-card .buy-links{
margin-top:auto;
padding-top:.5rem;
}
/* ===============================
FORMAT CHIPS
=============================== */
.format-chips{
display:flex;
flex-wrap:wrap;
gap:.45rem;
margin:.55rem 0 .85rem;
}
/* === 06. CHIPS / BADGES ============================================= */
.chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.28rem .6rem;
border-radius:999px;
font:800 .82rem/1 var(--font-display);
letter-spacing:.2px;
color:var(--text-color);
background:rgba(var(--brand-primary-rgb),0.14);
border:1px solid rgba(var(--brand-primary-rgb),0.26);
box-shadow:0 10px 20px rgba(16,24,40,0.06);
}
@media (prefers-color-scheme: dark){
.chip{
background:rgba(var(--brand-accent-rgb),0.10);
border:1px solid rgba(255,255,255,0.14);
box-shadow:0 14px 26px rgba(0,0,0,0.28);
}
}
/* ===============================
COVER + PHOTO SLIDESHOWS (SIZING + FUNCTIONALITY)
=============================== */
/* ===============================
SLIDESHOW - Premium Crossfade
=============================== */
.cover-slideshow,
.photo-slideshow,
.slideshow,
[data-slideshow],
#cover-slideshow,
#photo-slideshow{
position:relative;
overflow:hidden;
border-radius:16px;
background:#000;
}
.cover-slideshow,
#cover-slideshow{
width:200px;
height:300px;
margin:0 auto 1em;
}
.photo-slideshow,
#photo-slideshow,
.slideshow,
[data-slideshow]{
width:100%;
aspect-ratio:16 / 9;
}
/* Slide base state - hidden */
.cover-slideshow .slide,
.cover-slideshow .cover-slide,
.cover-slideshow img,
.photo-slideshow .slide,
.photo-slideshow .photo-slide,
.photo-slideshow img,
.slideshow .slide,
.slideshow img,
[data-slideshow] .slide,
[data-slideshow] img,
#cover-slideshow .slide,
#cover-slideshow img,
#photo-slideshow .slide,
#photo-slideshow img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transform:scale(1.08);
transition:
opacity 1400ms cubic-bezier(.4, 0, .2, 1),
transform 2000ms cubic-bezier(.4, 0, .2, 1);
will-change:opacity, transform;
z-index:0;
}
/* Active slide - fully visible with Ken Burns zoom */
.cover-slideshow .active,
.cover-slideshow .is-active,
.photo-slideshow .active,
.photo-slideshow .is-active,
.slideshow .active,
.slideshow .is-active,
[data-slideshow] .active,
[data-slideshow] .is-active,
#cover-slideshow .active,
#cover-slideshow .is-active,
#photo-slideshow .active,
#photo-slideshow .is-active{
opacity:1;
transform:scale(1);
z-index:2;
}
/* CROSSFADE: Leaving slide stays VISIBLE at first, then fades out */
.cover-slideshow .is-leaving,
.photo-slideshow .is-leaving,
.slideshow .is-leaving,
[data-slideshow] .is-leaving,
#cover-slideshow .is-leaving,
#photo-slideshow .is-leaving{
opacity:1;
transform:scale(1);
z-index:1;
animation: slideFadeOut 1400ms cubic-bezier(.4, 0, .2, 1) forwards;
}
/* === 11. ANIMATIONS ================================================== */
@keyframes slideFadeOut {
0% {
opacity:1;
transform:scale(1);
}
100% {
opacity:0;
transform:scale(0.96);
}
}
/* Subtle vignette overlay for depth */
.cover-slideshow::after,
.photo-slideshow::after,
.slideshow::after,
[data-slideshow]::after,
#cover-slideshow::after,
#photo-slideshow::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.08) 100%),
linear-gradient(to top, rgba(0,0,0,0.25), transparent 40%);
z-index:3;
}
/* Slideshow Control Button */
.slideshow-control{
display:none;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.cover-slideshow .slide,
.cover-slideshow .cover-slide,
.cover-slideshow img,
.photo-slideshow .slide,
.photo-slideshow .photo-slide,
.photo-slideshow img,
.slideshow .slide,
.slideshow img,
[data-slideshow] .slide,
[data-slideshow] img,
#cover-slideshow .slide,
#cover-slideshow img,
#photo-slideshow .slide,
#photo-slideshow img{
transition:opacity 300ms linear;
transform:none !important;
}
.cover-slideshow .is-leaving,
.photo-slideshow .is-leaving,
.slideshow .is-leaving,
[data-slideshow] .is-leaving{
animation: none;
opacity:0;
}
@keyframes slideFadeOut {
0%, 100% { opacity:0; transform:none; }
}
}
/* REMOVE SLIDESHOW “FRAME” (border/shadow) from slideshow IMAGES ONLY */
.cover-slideshow img,
.photo-slideshow img,
.slideshow img,
[data-slideshow] img,
#cover-slideshow img,
#photo-slideshow img{
border:0 !important;
box-shadow:none !important;
border-radius:0 !important; /* container handles rounding */
}
/* ===============================
Shared media hover/focus effects
=============================== */
.media-link{
display:inline-block;
border-radius:12px;
outline:none;
}
.media-img,
.office-slideshow img{
border-radius:12px;
border:2px solid var(--border-color);
box-shadow:var(--shadow-soft);
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease), filter .35s var(--ease);
cursor:pointer;
}
.media-link:hover .media-img,
.media-link:focus-visible .media-img,
.media-link:hover .office-slideshow img.active,
.media-link:focus-visible .office-slideshow img.active{
transform:scale(1.04);
box-shadow:var(--shadow-pop);
border-color:var(--accent-color);
filter:saturate(1.05);
}
.media-link:focus-visible{
outline:2px solid var(--accent-color);
outline-offset:4px;
border-radius:14px;
}
/* ===============================
CHARACTERS
=============================== */
#characters .cast-card{
display:grid;
grid-template-columns:120px 1fr;
gap:1rem;
align-items:start;
margin-bottom:1.25em;
}
@media (max-width:640px){
#characters .cast-card{ grid-template-columns:1fr; }
}
#characters .cast-img{
width:120px;
height:120px;
object-fit:cover;
border-radius:10px;
border:2px solid var(--section-odd);
box-shadow:0 10px 22px rgba(16,24,40,0.14);
display:block;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
#characters .cast-img:hover{ transform:scale(1.05); box-shadow:0 18px 42px rgba(16,24,40,0.18); }
#characters .ref-caption h4{
font-family:var(--font-display);
margin:.15em 0 .25em;
color:var(--text-color);
}
#characters .ref-caption p{ margin:0 0 .8em; }
/* Inspiration toggle */
details.insp{ grid-column:1 / -1; }
details.insp > summary.insp-toggle{
display:inline-flex;
align-items:center;
gap:.5em;
padding:.35em .75em;
border-radius:999px;
background:rgba(16,24,40,.05);
border:1px solid rgba(16,24,40,.10);
cursor:pointer;
user-select:none;
font:700 0.9rem var(--font-display);
color:#111; /* fixed in dark mode override */
}
details.insp[open] > summary.insp-toggle{ background:rgba(16,24,40,.10); }
details.insp > summary.insp-toggle::after{ content:"▾"; transition:transform .2s var(--ease); }
details.insp[open] > summary.insp-toggle::after{ transform:rotate(180deg); }
details.insp .insp-panel{ margin-top:.75em; }
details.insp .insp-panel .insp-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:10px;
}
@media (max-width:360px){
details.insp .insp-panel .insp-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:899px){
details.insp .insp-panel .insp-grid{
grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
gap:14px;
}
}
#characters details.insp .insp-panel .insp-grid img{
width:100% !important;
height:auto !important;
aspect-ratio:1 / 1;
object-fit:cover;
border-radius:12px;
border:2px solid var(--section-odd);
background:#fff;
box-shadow:var(--shadow-soft);
display:block;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease);
}
#characters details.insp .insp-panel .insp-grid img:hover{
transform:scale(1.03);
box-shadow:var(--shadow-pop);
border-color:var(--accent-color);
}
/* ===============================
ACTIVITIES (premium module catalog)
=============================== */
#activities{ position:relative; }
.activity-block{
background:var(--card-bg);
border:1px solid rgba(var(--brand-accent-rgb),0.18);
border-radius:18px;
padding:1.25rem 1.25rem 1.15rem;
margin:1rem 0;
box-shadow:var(--shadow-soft);
transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.activity-block:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-pop);
border-color:rgba(var(--brand-accent-rgb),0.32);
}
.activity-block h4{
margin:0 0 .5rem;
font-family:var(--font-display);
font-size:1.15rem;
letter-spacing:.2px;
}
.activity-block p{ margin:.5rem 0 0; }
/* Optional grid wrapper */
#activities .activity-grid,
#activities .activities-grid{
display:grid;
gap:1rem;
margin-top:1rem;
grid-template-columns:repeat(12, 1fr);
}
#activities .activity-grid > .activity-block,
#activities .activities-grid > .activity-block{
grid-column:span 12;
}
@media (min-width:740px){
#activities .activity-grid > .activity-block,
#activities .activities-grid > .activity-block{ grid-column:span 6; }
}
@media (min-width:1100px){
#activities .activity-grid > .activity-block,
#activities .activities-grid > .activity-block{ grid-column:span 4; }
}
/* Optional “Try It” callout */
#activities .try-it{
margin-top:.85rem;
padding:.85rem .9rem;
border-radius:14px; background:rgba(var(--brand-primary-rgb),0.10);
border:1px solid rgba(var(--brand-primary-rgb),0.18);
}
@media (prefers-color-scheme: dark){
#activities .try-it{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
}
}
#activities .try-it ol,
#activities .try-it ul{ margin:.55rem 0 0 1.1rem; }
#activities .try-it li{ margin:.25rem 0; }
/* Coloring Page thumbnail */
#activities a.coloring-link{
display:block;
max-width:220px;
margin:.9rem auto 0;
border-radius:16px;
overflow:hidden;
border:1px solid rgba(var(--brand-accent-rgb),0.22);
background:rgba(255,255,255,0.35);
box-shadow:var(--shadow-soft);
transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
#activities a.coloring-link:hover{
box-shadow:var(--shadow-pop);
transform:translateY(-2px);
}
@media (prefers-color-scheme: dark){
#activities a.coloring-link{
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
}
}
#activities img.coloring-thumb{
width:clamp(110px, 28vw, 160px) !important;
aspect-ratio:1 / 1 !important;
object-fit:cover !important;
display:block !important;
margin:1em auto !important;
border-radius:10px !important;
border:2px solid var(--section-odd) !important;
background:#fff !important;
box-shadow:0 10px 22px rgba(16,24,40,0.12) !important;
transition:transform .2s var(--ease), box-shadow .2s var(--ease) !important;
}
#activities img.coloring-thumb:hover{
transform:scale(1.05);
box-shadow:0 18px 42px rgba(16,24,40,0.18);
}
/* ===============================
AUTHOR BLOCK (ABOUT)
=============================== */
.author-block{
display:flex;
align-items:center;
gap:1.5em;
flex-wrap:wrap;
background-color:var(--card-bg);
padding:2em;
border-radius:14px;
border:var(--hairline-soft);
box-shadow:var(--shadow-soft);
transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.author-block:hover{ box-shadow:var(--shadow-pop); transform:translateY(-2px); }
.author-img{
width:120px;
height:120px;
object-fit:cover;
border-radius:10px;
background:#fff;
transform:scale(1.05);
box-shadow:0 18px 44px rgba(16,24,40,0.20);
flex-shrink:0;
transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.author-img:hover{ transform:scale(1.05); box-shadow:0 22px 60px rgba(16,24,40,0.24); }
.author-text{ flex:1; min-width:240px; }
.product-card img{
width:100%;
border-radius:10px;
margin-bottom:.75em;
}
.product-card h3{ font-size:1.2em; margin-bottom:.5em; }
.product-card p{ font-size:1em; margin-bottom:1em; }
/* ===============================
PRODUCTS (3-UP GRID)
=============================== */
.product-grid{
display:grid;
gap:2em;
margin-top:2em;
justify-items:stretch;
align-items:stretch;
/* Mobile default */
grid-template-columns:1fr;
}
/* Tablet: 2 per row */
@media (min-width:740px){
.product-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
/* Desktop: ALWAYS 3 per row */
@media (min-width:1000px){
.product-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
}
.product-card{
width:auto; /* let grid control sizing */
text-align:center;
}
.product-card img{
width:100%;
height:auto;
}
/* ===============================
RETAILER DIVIDER
=============================== */
.retailers{
margin-top: 1rem;
padding-top: .9rem;
border-top: 1px solid transparent;
background-image: linear-gradient(
to right,
transparent,
rgba(var(--brand-accent-rgb),0.35),
rgba(var(--brand-primary-rgb),0.35),
transparent
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
}
/* Dark mode support */
@media (prefers-color-scheme: dark){
.retailers{
border-top: 1px solid transparent;
background-image: linear-gradient(
to right,
transparent,
rgba(var(--brand-accent-rgb),0.35),
rgba(var(--brand-primary-rgb),0.35),
transparent
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
}
}
/* ===============================
FOOTER
=============================== */
/* === 10. FOOTER ====================================================== */
footer{
background:linear-gradient(to top, var(--header-grad-a), var(--header-grad-b));
color:#f8f8f8;
text-align:center;
padding:2em 1em 2em;
font-size:.875em;
font-family:var(--font-body);
box-shadow:0 -10px 28px rgba(16,24,40,0.20);
border-top:1px solid rgba(255,255,255,0.16);
border-radius:0;
}
/* ===============================
BACK TO TOP
=============================== */
#back-to-top{
position:fixed;
right:16px;
bottom:16px;
z-index:9999;
padding:.6rem .8rem;
border-radius:999px;
border:2px solid var(--accent-color);
background:rgba(16,24,40,0.58);
color:#fff;
font-weight:800;
cursor:pointer;
box-shadow:0 18px 42px rgba(16,24,40,0.30);
transition:transform .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
}
#back-to-top:hover{ transform:translateY(-2px); background:rgba(16,24,40,0.78); }
#back-to-top[hidden]{ opacity:0; pointer-events:none; }
/* ===============================
DARK MODE FIXES
=============================== */
@media (prefers-color-scheme: dark){
/* Never let any panel go “white” */
section,
#about,
#about section,
.author-block,
.activity-block,
.product-card,
.book-card,
.property-card,
#characters .cast-card{
background:var(--card-bg) !important;
color:var(--text-color) !important;
}
/* Hero panel */
#series{
background:
radial-gradient(900px 500px at 15% 10%, rgba(255,79,163,0.28), transparent 60%),
radial-gradient(900px 500px at 85% 15%, rgba(122,76,255,0.28), transparent 60%),
radial-gradient(1100px 600px at 50% 90%, rgba(46,212,198,0.26), transparent 65%),
linear-gradient(
to bottom right,
rgba(11,15,25,0.85),
rgba(17,24,39,0.75)
);
}
}
/* See Inspiration toggle: NO border, NO background (must remain transparent) */
details.insp > summary.insp-toggle{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
color: var(--text-color) !important;
}
details.insp > summary.insp-toggle:active,
details.insp > summary.insp-toggle:focus,
details.insp > summary.insp-toggle:focus-visible{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
/* Headings shadow in dark mode */
h1,h2,h3,h4{ text-shadow:0 1px 2px rgba(0,0,0,0.35) !important; }
/* Retailer sub buttons */
.buy-link-sub{
background:rgba(255,255,255,0.06) !important;
color:var(--text-color) !important;
border:1px solid rgba(255,255,255,0.12) !important;
}
.buy-link-sub:hover{
background:rgba(255,255,255,0.10) !important;
color:var(--text-color) !important;
}
footer{
background:linear-gradient(to top, var(--header-grad-a), var(--header-grad-b)) !important;
border-top:1px solid rgba(255,255,255,0.10) !important;
}
}
.hero-actions{
margin: 1rem auto 0;
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
max-width: 720px;
}
.hero-caption{
margin: .85rem 0 0;
opacity: .85;
font-size: .98rem;
}
/* Center the chips inside the hero */
#series .format-chips{
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* =========================================
MOBILE BACKGROUND FIX
Prevent over-zoomed background on phones
========================================= */
@media (max-width: 900px){
body::before{
/* fixed + blur can feel “zoomed” on mobile */
filter: blur(7px) saturate(1.0);
}
}
/* ===============================
MEGA MENU (BOOKS)
=============================== */
.has-mega {
position: relative;
}
.mega-menu {
position: absolute;
left: 0;
top: 100%;
display: grid;
grid-template-columns: minmax(220px, 280px) minmax(220px, 280px);
align-content: start;
gap: 2em;
background: var(--nav-bg, #111);
padding: 1.5em 2em;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease;
z-index: 1000;
width: fit-content;
max-width: calc(100vw - 2rem);
max-height:min(70vh, 520px);
overflow:hidden;
}
/* Show on hover */
.has-mega:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Clickable mega headings */
.mega-heading{
display:block;
font-size:.80rem;
font-weight:900;
letter-spacing:.20em;
text-transform:uppercase;
text-decoration:none;
/* Always readable + branded */
color: var(--accent-color, #E83E8C);
padding: .15rem 0 .55rem;
margin: 0 0 .75rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
text-shadow: 0 2px 12px rgba(232,62,140,.25);
}
.mega-heading:hover{
filter: brightness(1.08);
}
.mega-column a {
display: block;
padding: .3em 0;
font-size: .95rem;
text-decoration: none;
color: inherit;
}
/* Force mega headings to stay brand-colored (overrides .mega-column a { color: inherit; }) */
.mega-column a.mega-heading{
color: var(--accent-color, #E83E8C) !important;
text-shadow: 0 2px 12px rgba(232,62,140,0.25);
}
.mega-column a:hover {
color: var(--accent-color);
}
@media (max-width: 900px) {
/* Mega menu behaves like an accordion panel on mobile */
nav li.has-mega > .mega-menu{
position: static;
transform: none;
opacity: 1;
visibility: visible;
display: none; /* CLOSED until li.open */
grid-template-columns: 1fr 1fr;/* BOOKS | SESSIONS */
grid-template-areas:
"books sessions"
"stories stories";
gap: .75rem 1rem;
padding: .75rem 0;
width: 100%;
max-width: 100%;
max-height: none;
overflow: visible;
}
nav li.has-mega.open > .mega-menu{
display: grid; /* OPEN state */
}
.mega-column--books{ grid-area: books; }
.mega-column--sessions{ grid-area: sessions; }
.mega-column--stories{ grid-area: stories; }
}
/* Force mega-menu to behave like a grid dropdown on desktop */
@media (min-width:900px){
nav li.has-mega:hover > .mega-menu,
nav li.has-mega:focus-within > .mega-menu{
display:grid; /* overrides the normal submenu flex */
opacity:1;
visibility:visible;
transform:translateY(0);
transition-delay:0s;
}
}
/* Desktop: put STORIES on its own row under BOOKS + SESSIONS */
@media (min-width: 900px){
.mega-menu{
gap: 1.5em 2em;
}
/* Make the stories section span full width */
.mega-column--stories{
grid-column: 1 / -1;
max-height: none; /* no forced height */
overflow: visible; /* we’ll handle overflow differently */
padding-right: 0;
}
/* Make stories less tall by splitting into 2 columns */
.mega-column--stories{
column-count: 2;
column-gap: 2em;
}
/* Prevent links from breaking weirdly across columns */
.mega-column--stories a{
break-inside: avoid;
-webkit-column-break-inside: avoid;
padding: .25em 0;
}
}
/* If the screen is narrow-ish, keep stories single column */
@media (min-width: 900px) and (max-width: 1099px){
.mega-column--stories{ column-count: 1; }
}
/* Mobile mega menu layout (BOOKS | SESSIONS) then STORIES below */
@media (max-width: 899px){
/* Only apply to the mega menu */
.has-mega > .mega-menu{
display: none; /* closed by default */
grid-template-columns: 1fr 1fr;
grid-template-areas:
"books sessions"
"stories stories";
gap: .75rem 1rem;
padding: .75rem 0;
}
.has-mega.open > .mega-menu{
display: grid; /* opened state */
}
/* Make links align normally (your mobile submenu styles likely right-align) */
.has-mega > .mega-menu a{
text-align: left;
}
.mega-column--books{ grid-area: books; }
.mega-column--sessions{ grid-area: sessions; }
.mega-column--stories{ grid-area: stories; }
/* Keep columns compact on mobile */
.mega-column{
padding: 0;
margin: 0;
}
}
/* Mobile mega menu layout: BOOKS | SESSIONS, then STORIES */
@media (max-width: 899px){
nav li.has-mega > .mega-menu{
display: none; /* closed */
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"books sessions"
"stories stories";
gap: .75rem 1rem;
padding: .75rem 0;
}
nav li.has-mega.open > .mega-menu{
display: grid;
}
.mega-column--books{ grid-area: books; }
.mega-column--sessions{ grid-area: sessions; }
.mega-column--stories{ grid-area: stories; }
}
@media (min-width: 900px){
.mega-column--stories{
border-top: 1px solid rgba(255,255,255,0.18);
padding-top: 1rem;
margin-top: .25rem;
}
}
@media (min-width: 900px){
.mega-menu{
width: fit-content;
max-width: calc(100vw - 2rem);
}
}
/* Nested submenus: keep them visually attached and easier to hit */
.site-nav .submenu li.has-submenu{
position: relative;
}
/* Desktop nested submenu opens to the right */
@media (min-width: 900px){
.site-nav .submenu li.has-submenu > .submenu{
top: 0;
left: calc(100% + .5rem);
border-radius: 12px;
}
/* Add a subtle connector + spacing so it feels integrated */
.site-nav .submenu li.has-submenu > a.parent-link{
padding-right: 2rem;
}
}
@media (max-width: 899px){
.site-nav .submenu .submenu{
position: static;
transform: none;
box-shadow: none;
margin-left: .75rem;
padding-left: .5rem;
border-left: 1px solid rgba(255,255,255,0.18);
}
}
/* Submenu rows: keep label + caret on the same line */
.site-nav .submenu > li.has-submenu{
display: flex;
align-items: center;
gap: .5rem;
}
/* Make the label take the row space */
.site-nav .submenu > li.has-submenu > a.parent-link{
flex: 1 1 auto;
display: inline-flex;
align-items: center;
}
/* Keep the caret button beside the label (not below) */
.site-nav .submenu > li.has-submenu > .submenu-toggle{
flex: 0 0 auto;
line-height: 1;
}
/* Ensure the nested submenu drops below as a full-width row */
.site-nav .submenu > li.has-submenu > ul.submenu{
flex-basis: 100%;
}
/* FIX: Mobile mega menu must stay 2 columns (BOOKS | SESSIONS) */
@media (max-width: 899px){
nav li.has-mega > .mega-menu{
grid-template-columns: 1fr 1fr !important;
}
}
/* FIX: On mobile, Merchandise submenu should be 2 columns (Youth | Adult) */
@media (max-width: 899px){
/* Target the top-level Merchandise nav item by its href */
nav.site-nav .nav-links > li.has-submenu > a[href="#store"]{
/* no visual change, just a stable hook */
}
/* When Merchandise is open, make its immediate submenu a 2-col grid */
nav.site-nav .nav-links > li.has-submenu.open > a[href="#store"] + .submenu-toggle + ul.submenu{
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: .5rem 1rem;
}
/* Each column item should behave like a block inside its grid cell */
nav.site-nav .nav-links > li.has-submenu.open > a[href="#store"] + .submenu-toggle + ul.submenu > li{
display: block;
}
/* Keep the nested lists (Hat/Shirt/Hoodie) inside each column */
nav.site-nav .nav-links > li.has-submenu.open > a[href="#store"] + .submenu-toggle + ul.submenu > li > ul.submenu{
margin-top: .35rem;
}
}
/* FIX: Desktop Merchandise nested submenus should expand downward (not fly out right) */
@media (min-width: 900px){
/* Target nested submenus only inside the Merchandise submenu */
nav.site-nav .nav-links > li.has-submenu > a[href="#store"] + .submenu-toggle + ul.submenu
> li.has-submenu > ul.submenu{
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
margin: .35rem 0 0 .75rem;
padding-left: .6rem;
border-left: 1px solid rgba(255,255,255,0.18);
box-shadow: none;
}
}
/* STORE only: make nested submenus expand downward on desktop (not fly-out) */
@media (min-width: 900px){
/* Target the nested submenus under the STORE/MERCH nav item */
nav.site-nav .nav-links > li.has-submenu > a[href="#store"]
+ .submenu-toggle + ul.submenu > li.has-submenu{
position: static; /* so children can flow downward */
}
nav.site-nav .nav-links > li.has-submenu > a[href="#store"]
+ .submenu-toggle + ul.submenu > li.has-submenu > ul.submenu{
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: none; /* closed by default */
margin: .35rem 0 0 .9rem; /* indent */
padding-left: .75rem;
border-left: 1px solid rgba(255,255,255,0.18);
box-shadow: none;
}
/* When the nested item is open, show it */
nav.site-nav .nav-links > li.has-submenu > a[href="#store"]
+ .submenu-toggle + ul.submenu > li.has-submenu.open > ul.submenu{
display: block;
}
}
/* Mobile: Merchandise submenu becomes 2 columns (Youth | Adult) */
@media (max-width: 900px){
/* Target the Merchandise by its parent-link href="#store" */
nav.site-nav .nav-links > li.has-submenu > a.parent-link[href="#store"]{
/* hook only */
}
/* When Merchandise is open, grid its FIRST submenu level */
nav.site-nav .nav-links > li.has-submenu.open
> a.parent-link[href="#store"] ~ ul.submenu{
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: .6rem 1rem;
}
/* Make each column item behave normally */
nav.site-nav .nav-links > li.has-submenu.open
> a.parent-link[href="#store"] ~ ul.submenu > li{
display: block;
}
/* Nested Hat/Shirt/Hoodie stays vertical within each column */
nav.site-nav .nav-links > li.has-submenu.open
> a.parent-link[href="#store"] ~ ul.submenu > li > ul.submenu{
margin-top: .35rem;
}
}
/* Desktop: Merchandise nested submenus open DOWN (not fly-out) */
@media (min-width: 900px){
/* ONLY inside the Merchandise dropdown (href="#store") */
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu > ul.submenu{
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: none; /* closed unless hovered/focused */
margin: .35rem 0 0 .85rem;
padding-left: .75rem;
border-left: 1px solid rgba(255,255,255,0.18);
box-shadow: none;
background: transparent;
}
/* Open downward on hover/focus like the rest of desktop nav */
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu:hover > ul.submenu,
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu:focus-within > ul.submenu{
display: block;
}
}
/* Desktop: Merchandise nested submenus open DOWN (not fly-out) */
@media (min-width: 900px) {
/* 1. Allow parent sizing items (Youth/Adult) to wrap so the menu drops down */
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu {
flex-wrap: wrap;
}
/* 2. Style the nested Hat/Shirt/Hoodie submenus to be part of the flow */
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu > ul.submenu {
position: static !important; /* Removes the side pop-out behavior */
left: auto !important;
top: auto !important;
transform: none !important;
width: 100%; /* Ensures it wraps to its own line */
display: none; /* Hidden by default */
margin: .35rem 0 0 .85rem;
padding-left: .75rem;
border-left: 1px solid rgba(255,255,255,0.2);
box-shadow: none;
background: transparent;
}
/* 3. Show the menu on hover or focus-within */
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu:hover > ul.submenu,
nav.site-nav .nav-links > li.has-submenu
> a.parent-link[href="#store"] ~ ul.submenu > li.has-submenu:focus-within > ul.submenu {
display: block !important;
}
}
/* =========================================================
FIX: Mobile BOOKS mega-menu must open as a 2-col grid
========================================================= */
@media (max-width: 899px){
nav.site-nav li.has-mega.open > .mega-menu{
display: grid !important; /* override display:block */
grid-template-columns: 1fr 1fr !important; /* BOOKS | SESSIONS */
grid-template-areas:
"books sessions"
"stories stories";
gap: .75rem 1rem;
width: 100%;
padding: .75rem 0;
}
nav.site-nav li.has-mega.open > .mega-menu .mega-column--books{ grid-area: books; }
nav.site-nav li.has-mega.open > .mega-menu .mega-column--sessions{ grid-area: sessions; }
nav.site-nav li.has-mega.open > .mega-menu .mega-column--stories{ grid-area: stories; }
}
/* =========================================================
FIX: Desktop sticky-open (when JS adds .open)
========================================================= */
@media (min-width: 900px){
nav li.has-submenu.open > .submenu{
display: flex;
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
nav li.has-mega.open > .mega-menu{
display: grid;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
/* ===============================
MERCH MEGA MENU (MERCHANDISE)
Two columns: Youth | Adult
Headings clickable + items always visible
=============================== */
.has-merch-mega { position: relative; }
/* OLD merch-mega styles - now using .mega-menu class instead */
/* Keep this section for backwards compatibility but it's overridden by new rules */
.has-merch-mega > .merch-mega:not(.mega-menu){
position: absolute;
left: 0;
top: calc(100% + .4rem);
display: none;
grid-template-columns: minmax(220px, 280px) minmax(220px, 280px);
gap: 1.25em 2em;
align-content: start;
padding: 1.25em 1.5em;
border-radius: 12px;
background: var(--nav-submenu-bg);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 22px 60px rgba(16,24,40,0.26);
width: fit-content;
max-width: calc(100vw - 2rem);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s;
}
/* Show on desktop hover/focus (and when JS sets .open) */
@media (min-width: 900px){
nav li.has-merch-mega:hover > .merch-mega,
nav li.has-merch-mega:focus-within > .merch-mega,
nav li.has-merch-mega.open > .merch-mega{
display: grid;
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
}
/* Column links */
.has-merch-mega .merch-mega a{
display: block;
padding: .28em 0;
text-decoration: none;
color: #fff;
}
/* Clickable headings — brand colored (NOT monochrome) */
.has-merch-mega .merch-heading{
display: block;
font-size: .80rem;
font-weight: 900;
letter-spacing: .20em;
text-transform: uppercase;
color: var(--accent-color);
padding: .15rem 0 .55rem;
margin: 0 0 .75rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
text-shadow: 0 2px 12px rgba(var(--brand-accent-rgb), .25);
}
.has-merch-mega .merch-mega a:hover{
color: var(--accent-color);
}
/* Optional subtle divider between Youth and Adult on desktop */
@media (min-width: 900px){
.has-merch-mega .merch-column--adult{
padding-left: 1.5rem;
border-left: 1px solid rgba(255,255,255,0.18);
}
}
/* MOBILE: show as 2-column grid when open (no nested expanding) */
@media (max-width: 899px){
nav.site-nav li.has-merch-mega > .merch-mega{
position: static !important;
display: none; /* closed until li.open */
grid-template-columns: 1fr 1fr;
gap: .75rem 1rem;
padding: .75rem 0;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: rgba(255,255,255,0.12);
border-radius: 10px;
box-shadow: none;
border: 0;
}
nav.site-nav li.has-merch-mega.open > .merch-mega{
display: grid !important;
}
/* Match your mobile nav behavior (avoid forced right-align) */
nav.site-nav li.has-merch-mega > .merch-mega a{
text-align: left;
padding: .35rem 0;
}
}
/* Keep Merchandise dropdown on-screen on smaller desktop widths */
@media (min-width: 900px) and (max-width: 1200px){
nav li.has-merch-mega > .merch-mega{
left: auto; /* stop anchoring to left edge */
right: 0; /* anchor to right edge of the Merchandise */
}
}
@media (min-width: 900px){
nav li.has-merch-mega > .merch-mega{
max-width: min(620px, calc(100vw - 2rem));
overflow-x: hidden;
overflow-y: auto;
}
}
/* =========================================================
NAV FINAL OVERRIDES: Merchandise mega menu (desktop)
Keeps the last-applied rules sane without touching other sections.
========================================================= */
@media (min-width: 900px){
/* Anchor inside viewport and give it a consistent, non-narrow width */
nav li.has-merch-mega > .merch-mega{
left: auto !important;
right: 0 !important;
/* Match the “3-column Stories” visual weight */
width: min(760px, calc(100vw - 2rem)) !important;
max-width: calc(100vw - 2rem) !important;
/* Ensure it behaves like a true 2-col mega */
display: none; /* opened by hover/focus/.open rules */
grid-template-columns: 1fr 1fr !important;
align-items: start;
align-content: start;
}
/* Force Youth left / Adult right (prevents accidental stacking) */
nav li.has-merch-mega > .merch-mega .merch-column--youth{ grid-column: 1; }
nav li.has-merch-mega > .merch-mega .merch-column--adult{ grid-column: 2; }
/* Full-width rows span both columns (APPAREL + ACCESSORIES headings) */
nav li.has-merch-mega > .merch-mega .merch-row--full{ grid-column: 1 / -1; }
}
/* =====================================================
NAV: MERCHANDISE (Store) mega-style submenu - OLD RULES
NOTE: These only apply to .merch-mega without .mega-menu class
The new merchandise mega menu uses .mega-menu.merch-mega
===================================================== */
nav li.has-merch-mega{ position: relative; }
/* Works with your existing dropdown behavior:
- desktop: hover/focus
- mobile: .open class from your JS */
nav li.has-merch-mega > .merch-mega:not(.mega-menu){
/* inherit base submenu look but keep sizing consistent */
display: none;
position: absolute;
top: calc(100% + .55rem);
right: 0;
left: auto;
z-index: 1000;
padding: 1rem 1.05rem;
border-radius: 14px;
background: var(--nav-submenu-bg);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: var(--shadow-pop);
width: max-content;
max-width: min(720px, calc(100vw - 2rem));
overflow: hidden;
/* Grid layout */
display: none;
grid-template-columns: minmax(240px, 320px) minmax(240px, 320px);
grid-template-areas:
"apparel apparel"
"youth adult"
"accessories accessories";
gap: 1rem 1.6rem;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
transition-delay: .05s;
}
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-row--apparel{ grid-area: apparel; }
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-column--youth{ grid-area: youth; }
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-column--adult{ grid-area: adult; }
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-row--accessories{ grid-area: accessories; }
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-row--full{
padding-bottom: .9rem;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-row--accessories{
border-bottom: 0;
padding-bottom: 0;
}
nav li.has-merch-mega > .merch-mega:not(.mega-menu) .merch-column{
display: block;
min-width: 0;
}
nav li.has-merch-mega > .merch-mega .merch-links{
margin-top: .45rem;
}
nav li.has-merch-mega > .merch-mega a.mega-heading,
nav li.has-merch-mega > .merch-mega a.merch-heading{
display: inline-block;
color: var(--accent-color) !important; /* pink headings */
font-family: var(--font-display);
font-size: .95rem;
font-weight: 900;
letter-spacing: .10em;
text-transform: uppercase;
text-decoration: none;
line-height: 1.15;
text-shadow: 0 2px 12px rgba(var(--brand-accent-rgb), .22);
}
nav li.has-merch-mega > .merch-mega a.mega-heading:hover,
nav li.has-merch-mega > .merch-mega a.merch-heading:hover{ filter: brightness(1.08); }
/* Links under headings behave like the rest of the submenu */
nav li.has-merch-mega > .merch-mega a{
color: #fff;
text-decoration: none;
}
nav li.has-merch-mega > .merch-mega .merch-links a{
display: block;
padding: .32rem 0;
font-size: .95rem;
}
nav li.has-merch-mega > .merch-mega .merch-links a:hover{
color: var(--accent-color);
}
/* Desktop: open on hover/focus (like other dropdowns) */
@media (min-width: 900px){
nav li.has-merch-mega:hover > .merch-mega:not(.mega-menu),
nav li.has-merch-mega:focus-within > .merch-mega:not(.mega-menu),
nav li.has-merch-mega.open > .merch-mega:not(.mega-menu){
display: grid;
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
}
/* Mobile: behave like the existing accordion panel */
@media (max-width: 899px){
nav.site-nav li.has-merch-mega > .merch-mega:not(.mega-menu){
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
width: 100%;
max-width: 100%;
overflow: visible;
display: none; /* closed until .open */
opacity: 1;
visibility: visible;
margin: .25rem 0 .2rem;
padding: .65rem .55rem .55rem .7rem;
background: rgba(255,255,255,0.12);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: none;
/* Force the exact order requested */
grid-template-columns: 1fr 1fr;
grid-template-areas:
"apparel apparel"
"youth adult"
"accessories accessories";
gap: .75rem 1rem;
}
nav.site-nav li.has-merch-mega.open > .merch-mega:not(.mega-menu){ display: grid; }
}
/* =====================================================
STORE SECTION: restore/standardize the small chips
===================================================== */
#store .store-title{ display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
#store .store-chip{
display: inline-flex;
align-items: center;
justify-content: center;
padding: .22rem .55rem;
border-radius: 999px;
font: 900 .72rem/1 var(--font-display);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-color);
border: 1px solid rgba(var(--brand-primary-rgb), 0.28);
background: rgba(var(--brand-primary-rgb), 0.14);
}
/* Apparel chip reads as “Youth + Adult” */
#store-apparel .store-chip{
border-color: rgba(var(--brand-accent-rgb), 0.26);
background: linear-gradient(90deg,
rgba(var(--brand-primary-rgb), 0.18),
rgba(var(--brand-accent-rgb), 0.18)
);
}
/* Accessories chip */
#store-accessories .store-chip{
border-color: rgba(var(--brand-purple-rgb), 0.26);
background: rgba(var(--brand-purple-rgb), 0.14);
}
@media (prefers-color-scheme: dark){
#store .store-chip{
color: var(--text-color);
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.08);
}
#store-apparel .store-chip{
background: linear-gradient(90deg,
rgba(var(--brand-primary-rgb), 0.16),
rgba(var(--brand-accent-rgb), 0.16)
);
}
#store-accessories .store-chip{
background: rgba(255,255,255,0.08);
}
}
/* ===========================
MERCH SUBMENU — FINAL POLISH
=========================== */
/* 1) Remove the “disconnecting” line under APPAREL only */
.site-nav .merch-mega > .merch-row--full:first-of-type{
border-top: 0;
padding-top: 0;
margin-top: 0;
}
.site-nav .merch-mega > .merch-row--full:first-of-type .merch-heading{
border-bottom: 0;
padding-bottom: 0;
margin-bottom: .5rem;
}
/* 2) Youth/Adult sizing headings as colored chips */
.site-nav .merch-mega .merch-column--youth > .merch-heading,
.site-nav .merch-mega .merch-column--adult > .merch-heading{
display: inline-flex;
align-items: center;
width: fit-content;
padding: .35rem .7rem;
border-radius: 999px;
border: 1px solid transparent;
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 800;
font-size: .78rem;
text-decoration: none;
text-shadow: none;
border-bottom: 0; /* kill the default underline divider */
}
/* Youth = teal */
.site-nav .merch-mega .merch-column--youth > .merch-heading{
color: #fff;
background: rgba(var(--brand-primary-rgb), 0.22);
border-color: rgba(var(--brand-primary-rgb), 0.55);
}
/* Adult = purple */
.site-nav .merch-mega .merch-column--adult > .merch-heading{
color: #fff;
background: rgba(var(--brand-purple-rgb), 0.22);
border-color: rgba(var(--brand-purple-rgb), 0.55);
}
/* Match the rest of the nav hover behavior (turn pink) */
.site-nav .merch-mega .merch-column--youth > .merch-heading:hover,
.site-nav .merch-mega .merch-column--adult > .merch-heading:hover{
color: var(--accent-color);
}
/* ===============================
MERCH PRODUCT SIZE CHIPS
=============================== */
/* Base chip style inside product cards only */
.product-card .size-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.25rem .65rem;
border-radius:999px;
font-family:var(--font-display);
font-weight:900;
font-size:.7rem;
letter-spacing:.15px;
text-transform:uppercase;
margin:.25rem .15rem 0;
line-height:1;
}
/* Youth = teal */
.product-card .size-chip.youth{
background:rgba(0, 190, 200, 0.18);
color:#7fe9ef;
border:1px solid rgba(0, 190, 200, 0.45);
}
/* Adult = purple */
.product-card .size-chip.adult{
background:rgba(166, 52, 209, 0.20);
color:#e1b7ff;
border:1px solid rgba(166, 52, 209, 0.50);
}
/* Hover polish */
.product-card .size-chip:hover{
filter:saturate(1.1);
}
/* ===============================
STORE: Product size chips (Youth teal / Adult purple)
Scoped so it can't affect nav submenus
=============================== */
#store .product-card .size-chip{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.26rem .7rem;
border-radius:999px;
font:900 .72rem/1 var(--font-display);
letter-spacing:.12px;
text-transform:uppercase;
/* make sure it never inherits weird link/text colors */
color:#fff;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.18);
/* spacing */
margin:.35rem auto .6rem;
}
/* Youth = teal */
#store .product-card .size-chip.youth{
background:rgba(var(--brand-primary-rgb),0.22);
border-color:rgba(var(--brand-primary-rgb),0.55);
color:#EFFFFF;
}
/* Adult = purple */
#store .product-card .size-chip.adult{
background:rgba(var(--brand-purple-rgb),0.22);
border-color:rgba(var(--brand-purple-rgb),0.55);
color:#F7EFFF;
}
/* Add to buttons/cards */
@media (hover: hover) {
.buy-link,
.book-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
img:not(.cover-slide):not(.photo-slide):not(.slide):not([class*="slideshow"] img) {
opacity: 0;
animation: fadeIn 0.4s ease-in forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
em {
font-style: normal;
color: var(--accent-color);
font-weight: 600;
}
section {
/* Replace flat border with gradient */
border-left: 6px solid transparent;
border-image: linear-gradient(
to bottom,
var(--section-odd),
transparent
) 1;
}
/* Add generous breathing room */
.book-card h3 {
margin-top: 1.25rem; /* push away from image */
}
.book-card p + p {
margin-top: 1rem; /* increase from .75 */
}
/* Make primary actions unmissable */
.buy-link:not(.buy-link--outline) {
position: relative;
overflow: hidden;
}
.buy-link:not(.buy-link--outline)::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
transform: translateX(-100%);
}
.buy-link:hover::before {
transform: translateX(100%);
transition: transform 0.6s;
}
h1, h2, h3, h4 {
text-wrap: balance; /* Prevents awkward single-word lines */
}
/* For body copy in cards */
.book-card p,
.product-card p {
text-wrap: pretty; /* Better paragraph breaks */
}
/* For ISBNs and prices */
.format-chips,
.buy-link {
font-variant-numeric: lining-nums tabular-nums;
}
/* Already have fadeIn - enhance it */
img:not(.cover-slide):not(.photo-slide):not(.slide) {
opacity: 0;
animation: fadeIn 0.4s ease-in forwards;
image-rendering: -webkit-optimize-contrast; /* Sharper on retina */
}
/* Add skeleton for book covers */
.book-cover {
background: linear-gradient(
90deg,
rgba(var(--brand-primary-rgb), 0.05) 25%,
rgba(var(--brand-accent-rgb), 0.05) 50%,
rgba(var(--brand-primary-rgb), 0.05) 75%
);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Remove shimmer once loaded */
.book-cover[src] {
animation: fadeIn 0.4s ease-in forwards;
}
/* Better visible focus for all interactive elements */
*:focus-visible {
outline: 3px solid var(--accent-color);
outline-offset: 3px;
border-radius: 8px;
}
/* Subtle pulse on focus for CTAs */
.buy-link:focus-visible {
animation: focusPulse 2s ease-in-out infinite;
}
@keyframes focusPulse {
0%, 100% { box-shadow: var(--focus-ring); }
50% { box-shadow: var(--focus-ring), 0 0 0 8px rgba(var(--brand-accent-rgb), 0.1); }
}
/* Subtle visual break between major sections */
section + section::before {
content: "";
display: block;
width: 60px;
height: 3px;
background: linear-gradient(
90deg,
var(--accent-color),
var(--primary-color)
);
margin: -1rem auto 2rem;
border-radius: 999px;
opacity: 0.4;
}
.trust-signals {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px dashed rgba(var(--brand-primary-rgb), 0.2);
}
.trust-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 600;
}
.trust-badge svg {
width: 16px;
height: 16px;
color: var(--primary-color);
}
/* Ensure all interactive elements meet 44×44px minimum */
@media (max-width: 899px) {
.buy-link,
.submenu-toggle,
nav a,
/* === 05. BUTTONS + LINKS ============================================ */
button {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Prevent flash of unstyled content */
body {
opacity: 0;
animation: pageLoad 0.5s ease-out 0.1s forwards;
}
@keyframes pageLoad {
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
body {
opacity: 1;
animation: none;
}
}
/* Show when images are loading */
.book-cover:not([complete]) {
position: relative;
}
.book-cover:not([complete])::after {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--brand-primary-rgb), 0.1);
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
@media print {
header, footer, #back-to-top, .buy-link { display: none; }
body { background: white; color: black; }
section { page-break-inside: avoid; }
.book-cover { max-width: 200px; }
}
/* Increase touch target size */
.menu-toggle {
min-width: 48px;
min-height: 48px;
padding: 12px;
}
/* Add active state indicators */
nav a[href="#about"]:target,
section:target + nav a[href*="#"] {
background: rgba(255,255,255,0.2);
border-left: 3px solid var(--accent-color);
}
/* Increase all tap targets */
@media (max-width: 899px) {
.buy-link,
nav a,
button,
summary {
min-height: 44px;
min-width: 44px;
padding: 12px 16px;
}
/* Add spacing between interactive elements */
.buy-links {
gap: 12px;
}
}
.sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 12px;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
backdrop-filter: blur(10px);
z-index: 998;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.sticky-cta.visible {
transform: translateY(0);
}
/* =========================================
FIX: "Included in" links styling
========================================= */
.related-links{
margin: .6rem 0 0;
color: var(--text-muted);
font-size: .95rem;
display: flex;
flex-wrap: wrap;
gap: .4rem .5rem;
align-items: center;
}
.related-links a{
display: inline-flex;
align-items: center;
padding: .25rem .6rem;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
background: rgba(var(--brand-primary-rgb), 0.10);
border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
color: var(--text-color);
transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.related-links a:hover,
.related-links a:focus-visible{
background: rgba(var(--brand-accent-rgb), 0.14);
border-color: rgba(var(--brand-accent-rgb), 0.35);
transform: translateY(-1px);
}
/* =========================================
FIX: "Meet the Characters" button visibility
Make it always readable with pink branding
========================================= */
.nav-next,
a.nav-next {
background: var(--accent-color) !important;
color: #fff !important;
border: 2px solid var(--accent-color) !important;
font-weight: 800;
text-shadow: none;
}
.nav-next:hover,
a.nav-next:hover {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
transform: translateY(-2px);
}
/* Dark mode: keep it vibrant */
@media (prefers-color-scheme: dark) {
.nav-next,
a.nav-next {
background: var(--accent-color) !important;
color: #fff !important;
border-color: var(--accent-color) !important;
}
.nav-next:hover,
a.nav-next:hover {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
}
}
/* =========================================
FIX: Merchandise size chips text contrast
Ensure readable text in both light and dark modes
========================================= */
.size-chip {
color: #111 !important; /* Dark text for light mode */
font-weight: 900;
text-shadow: none;
}
/* Youth chip - teal background */
.size-chip.youth {
background: rgba(var(--brand-primary-rgb), 0.22);
border: 1px solid rgba(var(--brand-primary-rgb), 0.45);
color: #003d40 !important; /* Darker teal text for contrast */
}
/* Adult chip - purple background */
.size-chip.adult {
background: rgba(var(--brand-purple-rgb), 0.22);
border: 1px solid rgba(var(--brand-purple-rgb), 0.45);
color: #2d0066 !important; /* Darker purple text for contrast */
}
/* Dark mode: use light text */
@media (prefers-color-scheme: dark) {
.size-chip {
color: #fff !important;
}
.size-chip.youth {
background: rgba(var(--brand-primary-rgb), 0.28);
border-color: rgba(var(--brand-primary-rgb), 0.55);
color: #B8FFFF !important; /* Light teal text */
}
.size-chip.adult {
background: rgba(var(--brand-purple-rgb), 0.28);
border-color: rgba(var(--brand-purple-rgb), 0.55);
color: #E5D4FF !important; /* Light purple text */
}
}
/* Ensure product card size chips also get these fixes */
.product-card .size-chip {
color: #111 !important;
}
.product-card .size-chip.youth {
color: #003d40 !important;
}
.product-card .size-chip.adult {
color: #2d0066 !important;
}
@media (prefers-color-scheme: dark) {
.product-card .size-chip {
color: #fff !important;
}
.product-card .size-chip.youth {
color: #B8FFFF !important;
}
.product-card .size-chip.adult {
color: #E5D4FF !important;
}
}
/* =========================================
Character "Appears In" Navigation
Stylized story links for each character
========================================= */
.character-stories {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid transparent;
background-image: linear-gradient(
to right,
transparent,
rgba(var(--brand-primary-rgb), 0.25),
rgba(var(--brand-accent-rgb), 0.25),
transparent
);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: top;
}
.character-stories h5 {
font-family: var(--font-display);
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent-color);
margin: 0 0 0.65rem;
text-shadow: 0 2px 8px rgba(var(--brand-accent-rgb), 0.2);
}
.story-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.story-links li {
margin: 0;
}
.story-links a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.75rem;
border-radius: 999px;
text-decoration: none;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.88rem;
line-height: 1.2;
background: linear-gradient(
135deg,
rgba(var(--brand-primary-rgb), 0.12),
rgba(var(--brand-accent-rgb), 0.12)
);
border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
color: var(--text-color);
transition: all 0.2s var(--ease);
box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}
.story-links a::before {
content: "→";
font-size: 0.9em;
opacity: 0.7;
transition: transform 0.2s var(--ease);
}
.story-links a:hover,
.story-links a:focus-visible {
background: linear-gradient(
135deg,
rgba(var(--brand-accent-rgb), 0.22),
rgba(var(--brand-primary-rgb), 0.18)
);
border-color: rgba(var(--brand-accent-rgb), 0.45);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(var(--brand-accent-rgb), 0.2);
}
.story-links a:hover::before {
transform: translateX(2px);
}
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
.character-stories {
background-image: linear-gradient(
to right,
transparent,
rgba(var(--brand-primary-rgb), 0.3),
rgba(var(--brand-accent-rgb), 0.3),
transparent
);
}
.story-links a {
background: linear-gradient(
135deg,
rgba(var(--brand-primary-rgb), 0.18),
rgba(var(--brand-accent-rgb), 0.18)
);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.story-links a:hover,
.story-links a:focus-visible {
background: linear-gradient(
135deg,
rgba(var(--brand-accent-rgb), 0.28),
rgba(var(--brand-primary-rgb), 0.24)
);
border-color: rgba(var(--brand-accent-rgb), 0.5);
box-shadow: 0 10px 28px rgba(var(--brand-accent-rgb), 0.25);
}
}
.character-actions{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap; /* allows stacking on small screens */
}
.character-stories{
flex: 1 1 320px; /* takes remaining space */
min-width: 260px;
}
.insp{
flex: 0 0 auto; /* keeps the button/summary sized naturally */
}
/* Optional: make the summary feel like a button */
.insp-toggle{
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
/* TURBO TEMPO — put Appears In + See inspiration on one row */
#characters .character-actions{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap; /* allows clean wrapping on smaller screens */
}
/* Let each block size naturally */
#characters .character-actions .character-stories{
flex:1 1 320px;
min-width:260px;
}
/* Keep the toggle snug on the right */
#characters .character-actions details.insp{
flex:0 0 auto;
grid-column:auto; /* override the grid rule that forces stacking */
margin-top:.1rem;
}
/* Optional: on small screens, stack naturally */
@media (max-width:640px){
#characters .character-actions{
flex-direction:column;
align-items:stretch;
}
#characters .character-actions details.insp{
width:fit-content;
}
}
/* =========================================
APPEARS IN — STORY LINK CHIPS
========================================= */
.character-stories h5{
margin: 0 0 .35rem;
font-size: .85rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
}
.story-links{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: .4rem .45rem;
}
.story-links li{
margin: 0;
padding: 0;
}
.story-links a{
display: inline-flex;
align-items: center;
padding: .28rem .65rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
line-height: 1.2;
background: rgba(var(--brand-primary-rgb), 0.10);
border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
color: var(--text-color);
transition:
background .15s ease,
border-color .15s ease,
transform .12s ease;
}
.story-links a:hover,
.story-links a:focus-visible{
background: rgba(var(--brand-accent-rgb), 0.16);
border-color: rgba(var(--brand-accent-rgb), 0.45);
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark){
.story-links a{
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.story-links a:hover,
.story-links a:focus-visible{
background: rgba(var(--brand-accent-rgb), 0.18);
border-color: rgba(var(--brand-accent-rgb), 0.55);
}
}
/* TURBO TEMPO — put Appears In + See inspiration on one row */
#characters .character-actions{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap; /* allows clean wrapping on smaller screens */
}
/* Let each block size naturally */
#characters .character-actions .character-stories{
flex:1 1 320px;
min-width:260px;
}
/* Keep the toggle snug on the right */
#characters .character-actions details.insp{
flex:0 0 auto;
grid-column:auto; /* override the grid rule that forces stacking */
margin-top:.1rem;
}
/* Optional: on small screens, stack naturally */
@media (max-width:640px){
#characters .character-actions{
flex-direction:column;
align-items:stretch;
}
#characters .character-actions details.insp{
width:fit-content;
}
}
/* =========================================
APPEARS IN — STORY LINK CHIPS
========================================= */
.character-stories h5{
margin: 0 0 .35rem;
font-size: .85rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
}
.story-links{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: .4rem .45rem;
}
.story-links li{
margin: 0;
padding: 0;
}
.story-links a{
display: inline-flex;
align-items: center;
padding: .28rem .65rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 800;
text-decoration: none;
line-height: 1.2;
background: rgba(var(--brand-primary-rgb), 0.10);
border: 1px solid rgba(var(--brand-primary-rgb), 0.22);
color: var(--text-color);
transition:
background .15s ease,
border-color .15s ease,
transform .12s ease;
}
.story-links a:hover,
.story-links a:focus-visible{
background: rgba(var(--brand-accent-rgb), 0.16);
border-color: rgba(var(--brand-accent-rgb), 0.45);
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark){
.story-links a{
background: rgba(255,255,255,0.07);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.story-links a:hover,
.story-links a:focus-visible{
background: rgba(var(--brand-accent-rgb), 0.18);
border-color: rgba(var(--brand-accent-rgb), 0.55);
}
}
/* --- Character card bottom row layout (Appears In + See inspiration) --- */
#characters .character-actions{
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
margin-top: .25rem;
}
/* Keep the button snug on the right */
#characters .character-actions details.insp{
margin-left: auto;
}
/* If you currently have this, REMOVE or override it:
details.insp{ grid-column:1 / -1; }
Because we only want it full-width when it drops on mobile.
*/
/* Mobile: allow stacking */
@media (max-width: 640px){
#characters .character-actions{
flex-wrap: wrap;
align-items: stretch;
}
#characters .character-actions details.insp{
width: 100%;
margin-left: 0;
}
}
/* --- Make inspiration panel content side-by-side (image left, text right) --- */
#characters details.insp .insp-panel .ref-caption{
display: grid;
grid-template-columns: 120px 1fr;
gap: 1rem;
align-items: center;
}
/* The image container should just be one column here (not a 3-up grid) */
#characters details.insp .insp-panel .insp-grid{
grid-template-columns: 1fr;
gap: 0;
}
/* Ensure the title + caption sit in the right column */
#characters details.insp .insp-panel .ref-caption h4,
#characters details.insp .insp-panel .ref-caption p{
grid-column: 2;
margin: 0;
}
#characters details.insp .insp-panel .ref-caption p{
margin-top: .25rem;
}
/* Bottom row aligns to the same two columns as the card (image | content) */
#characters .character-actions{
grid-column: 1 / -1;
display: grid;
grid-template-columns: var(--cast-img-col, 180px) 1fr; /* image column | content column */
gap: 1rem;
align-items: end;
margin-top: .35rem;
}
/* Left: the toggle under the character image */
#characters .character-actions details.insp{
grid-column: 1;
justify-self: start;
}
/* Right: appears-in list */
#characters .character-actions .character-stories{
grid-column: 2;
}
/* Make the opened inspiration image match the main character image size */
#characters .character-actions .insp-panel{
margin-top: .5rem;
}
#characters .character-actions .insp-grid{
display: block;
}
#characters .character-actions .insp-grid img.cast-img{
width: 100%;
height: auto;
max-width: 100%;
border-radius: 18px; /* match your card image rounding */
}
/* Mobile: stack cleanly */
@media (max-width: 640px){
#characters .character-actions{
grid-template-columns: 1fr;
}
#characters .character-actions details.insp,
#characters .character-actions .character-stories{
grid-column: 1;
}
}
/* Image + inspiration button stack (under the picture) */
.cast-media{
display:flex;
flex-direction:column;
gap:.45rem;
align-items:flex-start;
}
.insp-swap{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.35rem .7rem;
border-radius:999px;
font-weight:800;
font-size:.82rem;
cursor:pointer;
border:1px solid rgba(var(--brand-primary-rgb), .22);
background: rgba(var(--brand-primary-rgb), .10);
color: var(--text-color);
transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.insp-swap:hover,
.insp-swap:focus-visible{
background: rgba(var(--brand-accent-rgb), .16);
border-color: rgba(var(--brand-accent-rgb), .45);
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark){
.insp-swap{
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.18);
color:#fff;
}
}
.insp-caption{
margin: .25rem 0 0;
font-size: .9rem;
color: var(--text-muted);
line-height: 1.25
opacity: .85;
max-width: 220px; /* keeps it from stretching wide */
}
/* Cast card layout: 2 columns + bottom action row */
.cast-card{
display:grid;
grid-template-columns: 160px 1fr;
gap: 16px;
align-items:start;
}
.cast-media{ grid-column: 1; }
.ref-caption{ grid-column: 2; }
/* Bottom row: left (button under image) + right (Appears In) */
.character-actions{
grid-column: 1 / -1;
display:grid;
grid-template-columns: 160px 1fr;
gap: 16px;
align-items:end;
margin-top: 6px;
}
.insp-swap-wrap{
display:flex;
flex-direction:column;
gap: 8px;
}
.insp-swap{
width: 100%;
text-align:left;
}
/* small caption under the button */
.insp-note{
margin: 0;
font-size: 0.95em;
line-height: 1.25;
opacity: 0.85;
}
/* ---------- Inspiration modal (no layout expansion) ---------- */
.insp-modal[hidden]{ display:none; }
.insp-modal{
position:fixed;
inset:0;
z-index:9999;
}
.insp-modal__backdrop{
position:absolute;
inset:0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(2px);
}
.insp-modal__panel{
position:relative;
width:min(520px, calc(100vw - 2rem));
margin: 6vh auto 0;
padding: 1rem;
border-radius: 18px;
background: var(--card-bg, #fff);
border: 0;
box-shadow: none;}
.insp-modal__close{
position:absolute;
top:.65rem;
right:.65rem;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,.12);
background: rgba(0,0,0,.06);
cursor:pointer;
font-weight: 900;
}
.insp-modal__img{
width:100%;
height:auto;
border-radius: 14px;
display:block;
}
.insp-modal__title{
margin: .75rem 0 .25rem;
}
.insp-modal__caption{
margin: 0;
opacity: .9;
}
/* Make modal match dark theme nicely */
@media (prefers-color-scheme: dark){
.insp-modal__panel{
background: rgba(20,20,24,.92);
border: 0;
box-shadow: none;
}
.insp-modal__close{
border-color: rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
color:#fff;
}
}
/* Put the inspiration button in the left column of the bottom row */
#characters .character-actions .insp-open{
grid-column: 1;
justify-self: start;
width: 100%;
}
/* Character card bottom row: details on left, appears-in on right */
.cast-card .character-actions{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 16px;
}
/* Keep the details control compact and left-aligned */
.cast-card .character-actions .insp{
flex: 0 0 auto;
max-width: 240px;
}
/* Let Appears In take the rest of the row */
.cast-card .character-actions .character-stories{
flex: 1 1 auto;
min-width: 0;
}
/* When expanded, keep the inspiration panel from exploding the layout */
.cast-card .character-actions .insp-panel{
margin-top: .5rem;
}
/* Keep image + caption in the insp panel tidy */
.cast-card .character-actions .insp-grid{
display:flex;
gap: 10px;
align-items:flex-start;
}
.cast-card .character-actions .insp-grid .cast-img{
max-width: 140px;
height: auto;
}
/* DJ Oranges photo slideshow - match other inspiration images */
#characters details.insp .insp-panel .ref-caption > .photo-slideshow {
width: 120px !important;
height: 120px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 12px;
border: 2px solid var(--section-odd);
background: #fff;
box-shadow: var(--shadow-soft);
overflow: hidden;
}
#characters details.insp .insp-panel .ref-caption > .photo-slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 10px;
opacity: 0;
transition: opacity 0.5s ease;
}
#characters details.insp .insp-panel .ref-caption > .photo-slideshow img.active {
opacity: 1;
}
/* Fix buy-link--outline to be readable in light mode */
.buy-link--outline {
background: var(--accent-color) !important;
color: #fff !important;
border: 2px solid var(--accent-color) !important;
}
.buy-link--outline:hover {
background: var(--primary-color) !important;
border-color: var(--primary-color) !important;
color: #fff !important;
}
/* =====================================================
MERCHANDISE MEGA MENU - Matches BOOKS | SESSIONS | STORIES style
FINAL OVERRIDE - must come last to win specificity
Structure: APPAREL (header) -> YOUTH | ADULT -> ACCESSORIES
===================================================== */
/* Desktop: Base positioning and grid */
@media (min-width: 900px) {
nav li.has-merch-mega > .mega-menu.merch-mega {
position: absolute !important;
left: auto !important;
right: 0 !important;
top: calc(100% + 0.4rem) !important;
display: none;
grid-template-columns: minmax(200px, 260px) minmax(200px, 260px) !important;
grid-template-areas:
"apparel-header apparel-header"
"youth adult"
"accessories accessories" !important;
gap: 0.75em 2em !important;
align-content: start !important;
width: fit-content !important;
max-width: calc(100vw - 2rem) !important;
padding: 1.5em 2em !important;
background: var(--nav-submenu-bg) !important;
backdrop-filter: blur(10px) saturate(120%) !important;
-webkit-backdrop-filter: blur(10px) saturate(120%) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 12px !important;
box-shadow: 0 22px 60px rgba(16,24,40,0.26) !important;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease;
z-index: 1000 !important;
}
/* Show on hover/focus/open */
nav li.has-merch-mega:hover > .mega-menu.merch-mega,
nav li.has-merch-mega:focus-within > .mega-menu.merch-mega,
nav li.has-merch-mega.open > .mega-menu.merch-mega {
display: grid !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* Grid area assignments */
nav li.has-merch-mega .mega-column--apparel-header {
grid-area: apparel-header !important;
margin-bottom: 0.25rem;
}
nav li.has-merch-mega .mega-column--apparel-header .mega-heading {
margin-bottom: 0 !important;
border-bottom: none !important;
padding-bottom: 0.25rem !important;
}
nav li.has-merch-mega .mega-column--youth {
grid-area: youth !important;
}
nav li.has-merch-mega .mega-column--adult {
grid-area: adult !important;
padding-left: 1.5rem;
border-left: 1px solid rgba(255,255,255,0.18);
}
nav li.has-merch-mega .mega-column--accessories {
grid-area: accessories !important;
padding-top: 0.75rem;
margin-top: 0.5rem;
border-top: 1px solid rgba(255,255,255,0.12);
text-align: center;
}
/* Accessories: centered heading */
nav li.has-merch-mega .mega-column--accessories > .mega-heading {
display: block;
text-align: center;
margin-bottom: 0.4rem;
}
/* Accessories horizontal layout on desktop - centered */
nav li.has-merch-mega .mega-column--accessories .accessories-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5em 2em;
}
nav li.has-merch-mega .mega-column--accessories .accessories-links a {
display: inline-block;
}
}
/* Mobile: 2-column grid like Books with right-aligned text */
@media (max-width: 899px) {
nav.site-nav li.has-merch-mega > .mega-menu.merch-mega,
nav li.has-merch-mega > .mega-menu.merch-mega {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
display: none !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"apparel-header apparel-header"
"youth adult"
"accessories accessories" !important;
gap: 0.5rem 1rem !important;
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
overflow: visible !important;
margin: 0.25rem 0 0.2rem !important;
padding: 0.75rem 0.6rem !important;
background: rgba(255,255,255,0.12) !important;
border-radius: 10px !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
}
nav.site-nav li.has-merch-mega.open > .mega-menu.merch-mega,
nav li.has-merch-mega.open > .mega-menu.merch-mega {
display: grid !important;
}
/* Grid areas on mobile */
nav li.has-merch-mega .mega-column--apparel-header {
grid-area: apparel-header !important;
text-align: right;
}
nav li.has-merch-mega .mega-column--apparel-header .mega-heading {
margin-bottom: 0 !important;
border-bottom: none !important;
padding-bottom: 0.15rem !important;
}
nav li.has-merch-mega .mega-column--youth {
grid-area: youth !important;
text-align: right;
}
nav li.has-merch-mega .mega-column--adult {
grid-area: adult !important;
padding-left: 0 !important;
border-left: none !important;
text-align: right;
}
nav li.has-merch-mega .mega-column--accessories {
grid-area: accessories !important;
padding-top: 0.5rem;
margin-top: 0.25rem;
text-align: center;
}
/* Accessories: centered on mobile */
nav li.has-merch-mega .mega-column--accessories .accessories-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3em 1.5em;
}
/* Right-align all links on mobile */
nav li.has-merch-mega > .mega-menu.merch-mega .mega-column a {
text-align: right;
}
}
/* Merchandise mega menu links - same styling as Books mega menu */
nav li.has-merch-mega > .mega-menu.merch-mega .mega-column a {
display: block;
padding: 0.3em 0;
font-size: 0.95rem;
text-decoration: none;
color: #fff;
}
nav li.has-merch-mega > .mega-menu.merch-mega .mega-column a:hover {
color: var(--accent-color);
}
nav li.has-merch-mega > .mega-menu.merch-mega .mega-column a.mega-heading {
display: block;
font-size: 0.80rem;
font-weight: 900;
letter-spacing: 0.20em;
text-transform: uppercase;
text-decoration: none;
color: var(--accent-color) !important;
padding: 0.15rem 0 0.55rem;
margin: 0 0 0.75rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
text-shadow: 0 2px 12px rgba(232,62,140,0.25);
}
nav li.has-merch-mega > .mega-menu.merch-mega .mega-column a.mega-heading:hover {
filter: brightness(1.08);
}
/* ============================================================
CRITICAL MOBILE FIX: STORIES Section Visibility
============================================================ */
/* MOBILE: Burger menu on RIGHT, smaller header, KEEP HEADER VISIBLE */
@media (max-width: 899px) {
:root {
--header-h: 60px !important;
}
body {
padding-top: 60px !important;
}
/* KEEP HEADER VISIBLE - don't let it disappear on scroll */
header {
padding: 0.5rem 1rem !important;
min-height: 60px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 999 !important;
}
/* Move burger menu to RIGHT side (menu opens from right) */
.menu-toggle {
position: absolute !important;
right: 1rem !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 1.5rem !important;
padding: 0.5rem !important;
}
/* Logo centered */
.logo-container {
margin: 0 auto !important;
}
.logo {
height: 36px !important;
margin: 0 !important;
}
/* Adjust nav to account for new header height */
nav.site-nav,
#site-nav.site-nav {
top: 60px !important;
}
}
/* Ensure all main sections are properly visible on mobile */
@media (max-width: 900px) {
/* Fix z-index stacking context */
body.premium main {
position: relative;
z-index: 1;
}
/* Ensure STORIES section is not hidden or clipped */
body.premium #stories {
position: relative;
z-index: 2;
overflow: visible !important;
min-height: auto !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Fix any potential transform/positioning issues */
body.premium #stories .book-card {
position: relative;
z-index: 1;
overflow: visible;
}
/* Ensure retailer dropdowns don't overflow and hide content */
body.premium #stories .retailers {
overflow: visible;
position: relative;
z-index: 10;
}
body.premium #stories details.buy-group,
body.premium #stories details.buy-subgroup {
overflow: visible;
position: relative;
}
/* Fix scroll padding for mobile */
body.premium #stories {
scroll-margin-top: calc(60px + 20px);
padding-top: 20px;
}
}
/* Global stage haze */
body.premium{
background:
radial-gradient(1000px 600px at 15% 8%, rgba(var(--brand-accent-rgb),0.14), transparent 60%),
radial-gradient(1000px 600px at 85% 12%, rgba(var(--brand-purple-rgb),0.12), transparent 65%),
radial-gradient(1100px 700px at 50% 95%, rgba(var(--brand-primary-rgb),0.10), transparent 65%),
var(--light-bg);
}
/* Slightly smoother typography + rhythm */
body.premium{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Wider, calmer vertical rhythm */
body.premium main > section{
padding: clamp(42px, 7vw, 90px) var(--gutter);
position: relative;
}
/* Keep your alternating washes but refine */
body.premium main > section:nth-of-type(odd){
background: linear-gradient(180deg, transparent, rgba(var(--brand-primary-rgb),0.06) 35%, transparent);
}
body.premium main > section:nth-of-type(even){
background: linear-gradient(180deg, transparent, rgba(var(--brand-accent-rgb),0.06) 35%, transparent);
}
/* Constrain content without changing HTML */
body.premium main > section > :where(h2,h3,h4,p,div,article,nav,details,ul,ol,img){
max-width: var(--container);
margin-left: auto;
margin-right: auto;
}
/* Section headings: more "headliner" */
body.premium main > section > h2{
font-size: clamp(2.1rem, 4.8vw, 3.4rem);
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
body.premium main > section > h2::after{
content: '';
display: block;
width: min(260px, 60%);
height: 3px;
margin: 0.9rem auto 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(var(--brand-accent-rgb),0.9), rgba(var(--brand-purple-rgb),0.85), rgba(var(--brand-primary-rgb),0.9));
box-shadow: 0 10px 30px rgba(var(--brand-accent-rgb),0.20);
}
body.premium main > section > p{
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-muted);
}
/* HERO (#series): turn it into a premium split-layout without touching content */
body.premium #series{
max-width: none;
}
body.premium #series{
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(18px, 3vw, 34px);
align-items: center;
border-radius: var(--radius-lg);
}
/* Center the headings like a stage announcement */
body.premium #series > h2,
body.premium #series > h4,
body.premium #series .format-chips,
body.premium #series .hero-actions{
grid-column: 1;
text-align: left;
}
body.premium #series .portfolio-grid{
grid-column: 2;
margin: 0;
}
body.premium #series .property-card{
background: linear-gradient(135deg,
rgba(var(--brand-purple-rgb),0.14) 0%,
rgba(var(--brand-primary-rgb),0.12) 50%,
rgba(var(--brand-accent-rgb),0.14) 100%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 22px;
box-shadow: var(--shadow-pop);
padding: 18px;
}
body.premium #series .cover-slideshow{
border-radius: 18px;
overflow: hidden;
}
body.premium #series h2{
font-size: clamp(3rem, 6vw, 4.8rem);
margin-bottom: .35rem;
}
body.premium #series h4{
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
color: var(--text-muted);
margin-top: .25rem;
}
body.premium #series .format-chips{
justify-content: flex-start;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
body.premium #series .hero-actions{
justify-content: flex-start;
margin-top: 1.25rem;
}
@media (max-width: 900px){
body.premium #series{
grid-template-columns: 1fr;
}
body.premium #series .portfolio-grid{
grid-column: 1;
order: -1;
margin-bottom: 1rem;
}
body.premium #series > h2,
body.premium #series > h4,
body.premium #series .format-chips,
body.premium #series .hero-actions{
text-align: center;
}
body.premium #series .format-chips,
body.premium #series .hero-actions{
justify-content: center;
}
}
/* BOOKS: upgrade cards without changing markup */
body.premium .book-grid{
gap: clamp(14px, 2vw, 26px);
}
body.premium .book-card{
border-radius: 22px;
background: linear-gradient(180deg, var(--surface), var(--surface-2));
border: 1px solid rgba(255,255,255,0.16);
box-shadow: var(--shadow-soft);
overflow: hidden;
position: relative;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
body.premium .book-card::before{
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb),0.30),
rgba(var(--brand-purple-rgb),0.22),
rgba(var(--brand-primary-rgb),0.28));
opacity: 0.0;
transition: opacity .35s var(--ease);
pointer-events: none;
border-radius: inherit;
}
body.premium .book-card:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-pop);
}
body.premium .book-card:hover::before{
opacity: 0.18;
}
body.premium .book-card h3{
font-size: 1.45rem;
}
/* BOOK COVERS - FIXED FOR VISIBILITY */
body.premium .book-cover{
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0,0,0,0.18);
display: block !important;
width: 100%;
height: auto;
opacity: 1 !important; /* Override lazy load opacity */
/* NO position: relative - this was hiding images */
/* NO ::before overlay - this was hiding images */
}
/* Force book covers to be visible immediately (override lazy loading animation) */
body.premium img.book-cover {
opacity: 1 !important;
animation: none !important;
}
/* Retailer accordions: make summaries feel like premium pills */
body.premium details.buy-group > summary.buy-link--outline,
body.premium details.buy-subgroup > summary.buy-link-sub{
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.25s var(--ease);
}
body.premium details.buy-group[open] > summary.buy-link--outline,
body.premium details.buy-subgroup[open] > summary.buy-link-sub{
box-shadow: 0 10px 30px rgba(var(--brand-accent-rgb),0.14);
}
/* Characters row/cards: if your base CSS uses cards, this enhances them */
body.premium #characters .character-card,
body.premium .character-card{
border-radius: 22px;
background: linear-gradient(180deg, var(--surface), var(--surface-2));
border: 1px solid rgba(255,255,255,0.16);
}
/* Buttons/links: slightly more confident */
body.premium .buy-link{
transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
body.premium .buy-link:hover{
transform: translateY(-1px);
}
/* Reduce the "boxed" feel on images while keeping your rounding */
body.premium img{
image-rendering: auto;
}
/* Reveal animation DISABLED - causing visibility issues */
body.premium .reveal{
opacity: 1 !important;
transform: translateY(0) !important;
}
body.premium .reveal.is-in{
opacity: 1;
transform: translateY(0);
}
/* Footer polish (keeps your existing footer HTML) */
body.premium footer{
border-top: 1px solid rgba(255,255,255,0.12);
}
/* ============================================================
Characters: "See inspiration" dropdown (fix cramped/jumbled text)
- Summary stays under the image.
- Panel opens as an anchored popover (minimal layout shift).
- Panel is wide enough for the caption to wrap normally.
============================================================ */
/* Anchor the panel to the toggle and allow it to extend into the content column */
body.premium #characters .character-actions details.insp{
position: relative;
overflow: visible; /* allow popover to extend beyond the left column */
}
/* Popover panel styling */
body.premium #characters .character-actions details.insp .insp-panel{
/* override any base spacing that assumes it's inline */
margin-top: 0 !important;
position: absolute;
left: 0;
top: calc(100% + .55rem);
z-index: 50;
width: min(560px, calc(100vw - 2.5rem));
padding: .9rem 1rem;
border-radius: 16px;
background: rgba(16, 20, 32, 0.88);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 18px 50px rgba(0,0,0,0.30);
}
/* Keep the slideshow + text layout readable */
body.premium #characters details.insp .insp-panel .ref-caption{
grid-template-columns: 120px 1fr; /* match the slideshow size */
align-items: start;
}
/* Ensure long captions wrap cleanly */
body.premium #characters details.insp .insp-panel .ref-caption p{
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
/* On small screens, make it flow normally (no popover) */
@media (max-width: 720px){
body.premium #characters .character-actions details.insp .insp-panel{
position: static;
width: 100%;
margin-top: .6rem !important;
}
}
/* 1) Action row placement: left toggle, right appears-in */
body.premium #characters .character-actions{
display:flex !important;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap;
}
body.premium #characters .character-actions details.insp{
order:1;
flex:0 0 auto;
}
body.premium #characters .character-actions .character-stories{
order:2;
flex:1 1 340px;
min-width:260px;
text-align:left !important;
}
body.premium #characters .character-actions .character-stories h5,
body.premium #characters .character-actions .story-links{
text-align:left !important;
justify-content:flex-start;
}
/* 2) Make the opened panel clean + in-flow (no absolute / no caret)
+ NO visible borders, backgrounds, or shadows */
body.premium #characters details.insp > .insp-panel{
position:static !important;
inset:auto !important;
transform:none !important;
margin-top:.6rem !important;
padding:0 !important;
max-width:none !important;
width:100% !important;
border-radius:0 !important;
z-index:auto !important;
/* NO visible styling */
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--text-color) !important;
}
@media (prefers-color-scheme: dark){
body.premium #characters details.insp > .insp-panel{
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255,255,255,0.92) !important;
}
}
body.premium #characters details.insp[open] > .insp-panel::before{
display:none !important;
content:none !important;
}
/* 3) Inspiration media sizing – MUST match DJ ORANGES inspiration slideshow size */
:root{ --insp-media-w: 120px; }
/* Kill the multi-column grid behavior from base styles inside characters */
body.premium #characters details.insp .insp-panel .insp-grid{
display:block !important;
width:var(--insp-media-w) !important;
max-width:100% !important;
margin:0 !important;
}
/* Make inspiration images behave like the slideshow area */
body.premium #characters details.insp .insp-panel .insp-grid img,
body.premium #characters details.insp .insp-panel img.cast-img{
width:var(--insp-media-w) !important;
height:var(--insp-media-w) !important;
aspect-ratio:1 / 1 !important;
object-fit:cover !important;
border-radius:18px !important;
border:none !important;
box-shadow:var(--shadow-soft) !important;
background:#fff;
display:block !important;
}
/* Lock slideshow container width to the same footprint (without changing slideshow rules) */
body.premium #characters details.insp .insp-panel .photo-slideshow{
width:var(--insp-media-w) !important;
max-width:100% !important;
margin:0 !important;
}
/* 4) Panel layout: media left (fixed), caption right (single-line) */
body.premium #characters details.insp > .insp-panel{
display:flex !important;
gap:12px;
align-items:center;
}
body.premium #characters details.insp > .insp-panel .insp-grid,
body.premium #characters details.insp > .insp-panel .photo-slideshow{
flex:0 0 var(--insp-media-w);
}
body.premium #characters details.insp > .insp-panel .ref-caption{
flex:1 1 auto;
min-width:0;
display:flex !important;
flex-direction:column;
gap:.25rem;
}
body.premium #characters details.insp > .insp-panel .ref-caption h4{ margin:0 !important; }
body.premium #characters details.insp > .insp-panel .ref-caption p{
margin:0 !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
max-width:100% !important;
line-height:1.25;
color: inherit !important;
opacity: .88;
}
/* 5) Mobile: stack panel vertically (caption can wrap) */
@media (max-width: 640px){
body.premium #characters details.insp > .insp-panel{
flex-direction:column;
align-items:flex-start;
}
body.premium #characters details.insp > .insp-panel .insp-grid,
body.premium #characters details.insp > .insp-panel .photo-slideshow{
width:min(100%, var(--insp-media-w)) !important;
}
body.premium #characters details.insp > .insp-panel .ref-caption p{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
}
}
/* ============================================================
MOBILE CHARACTERS FIX - Complete layout restructure
============================================================ */
@media (max-width: 900px) {
/* Stack character cards vertically on mobile */
body.premium #characters .cast-card,
body.premium #characters .character-card {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
grid-template-columns: 1fr !important;
padding-bottom: 1rem !important; /* REDUCED - was 1.5rem */
}
/* Make character image 1:1 aspect ratio, centered, not too big */
body.premium #characters .cast-media {
width: 100% !important;
max-width: 200px !important;
margin: 0 auto !important;
}
body.premium #characters img.cast-img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
max-width: 200px !important;
margin: 0 auto !important;
display: block !important;
}
/* Content area takes full width */
body.premium #characters .ref-caption {
width: 100% !important;
text-align: center !important;
}
/* Stack action row vertically on mobile - REMOVE excessive spacing */
body.premium #characters .character-actions {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important; /* REDUCED - was 0.75rem */
width: 100% !important;
grid-template-columns: 1fr !important;
margin-top: 0.25rem !important; /* REDUCED - was 0.5rem */
margin-bottom: 0 !important; /* NEW - remove bottom margin */
}
/* Center "See inspiration" button */
body.premium #characters .character-actions details.insp {
width: 100% !important;
max-width: 280px !important;
margin: 0 auto !important;
}
/* Center "Appears in" section - REMOVE excessive bottom space */
body.premium #characters .character-actions .character-stories {
width: 100% !important;
text-align: center !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.premium #characters .character-actions .character-stories h5 {
text-align: center !important;
margin-bottom: 0.35rem !important; /* REDUCED - was 0.5rem */
margin-top: 0 !important; /* NEW */
}
body.premium #characters .character-actions .story-links {
justify-content: center !important;
flex-wrap: wrap !important;
margin-bottom: 0 !important;
margin-top: 0 !important; /* NEW */
padding-bottom: 0 !important; /* NEW */
}
/* Inspiration panel full width on mobile */
body.premium #characters details.insp > .insp-panel {
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
max-width: 100% !important;
}
/* Keep image at fixed size, text fills remaining space */
body.premium #characters details.insp > .insp-panel .insp-grid,
body.premium #characters details.insp > .insp-panel .photo-slideshow {
flex: 0 0 var(--insp-media-w) !important;
}
body.premium #characters details.insp > .insp-panel .ref-caption {
flex: 1 1 auto !important;
text-align: left !important;
}
body.premium #characters details.insp > .insp-panel .ref-caption h4,
body.premium #characters details.insp > .insp-panel .ref-caption p {
text-align: left !important;
}
}
/* === Meet the Characters button (light mode only) === */
#characters .btn,
#characters .button,
#characters .hero-actions .btn {
background: transparent !important;
color: var(--brand-accent) !important;
border: 2px solid var(--brand-accent) !important;
}
/* Hover state */
#characters .btn:hover,
#characters .button:hover {
background: rgba(var(--brand-accent-rgb), 0.08) !important;
}
/* =========================================
Meet-the-Characters (nav-next) – outline style in light mode
Keep View Retailers buttons unchanged
========================================= */
.nav-next,
a.nav-next{
background: transparent !important;
color: var(--accent-color) !important;
border: 2px solid var(--accent-color) !important;
font-weight: 800;
text-shadow: none;
transition: all 0.25s var(--ease);
}
.nav-next:hover,
a.nav-next:hover{
background: rgba(var(--brand-accent-rgb), 0.12) !important;
color: var(--accent-color) !important;
transform: translateY(-2px);
}
/* Dark mode: keep it vibrant and readable */
@media (prefers-color-scheme: dark){
.nav-next,
a.nav-next{
background: rgba(var(--brand-accent-rgb), 0.18) !important;
color: #fff !important;
border-color: rgba(var(--brand-accent-rgb), 0.55) !important;
}
.nav-next:hover,
a.nav-next:hover{
background: rgba(var(--brand-accent-rgb), 0.30) !important;
border-color: rgba(var(--brand-accent-rgb), 0.65) !important;
}
}
/* Smooth scrolling with better performance */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Enhanced focus states for accessibility */
body.premium *:focus-visible {
outline: 3px solid rgba(var(--brand-accent-rgb), 0.6);
outline-offset: 2px;
border-radius: 8px;
}
/* Premium loading state for images - DISABLED for book covers */
body.premium img:not(.book-cover) {
transition: opacity 0.3s var(--ease);
}
body.premium img[loading="lazy"]:not(.book-cover) {
opacity: 0;
animation: fadeIn 0.4s var(--ease) forwards;
}
/* Book covers should NEVER fade in - always visible */
body.premium img.book-cover,
body.premium .book-cover {
opacity: 1 !important;
animation: none !important;
}
}
/* Enhanced hover states for interactive elements */
body.premium a,
body.premium button,
body.premium summary {
transition: all 0.25s var(--ease);
}
/* Better text selection color */
body.premium ::selection {
background: rgba(var(--brand-accent-rgb), 0.3);
color: var(--text-color);
}
body.premium ::-moz-selection {
background: rgba(var(--brand-accent-rgb), 0.3);
color: var(--text-color);
}
/* Premium scrollbar styling (webkit browsers) */
body.premium ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
body.premium ::-webkit-scrollbar-track {
background: rgba(var(--brand-primary-rgb), 0.05);
border-radius: 10px;
}
body.premium ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg,
rgba(var(--brand-accent-rgb), 0.4),
rgba(var(--brand-purple-rgb), 0.4));
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
body.premium ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg,
rgba(var(--brand-accent-rgb), 0.6),
rgba(var(--brand-purple-rgb), 0.6));
background-clip: padding-box;
}
/* Enhanced mobile experience */
@media (max-width: 900px) {
/* Better touch targets */
body.premium a,
body.premium button,
body.premium summary {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Improved spacing on mobile */
body.premium main > section {
padding: clamp(32px, 6vw, 60px) var(--gutter);
}
/* Better readable line length on mobile */
body.premium p {
max-width: 65ch;
}
/* Ensure cards stack nicely */
body.premium .book-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Premium micro-interactions */
body.premium .book-card,
body.premium .character-card,
body.premium .property-card {
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
}
/* Enhanced dark mode support */
@media (prefers-color-scheme: dark) {
body.premium {
background:
radial-gradient(1000px 600px at 15% 8%, rgba(var(--brand-accent-rgb),0.18), transparent 60%),
radial-gradient(1000px 600px at 85% 12%, rgba(var(--brand-purple-rgb),0.16), transparent 65%),
radial-gradient(1100px 700px at 50% 95%, rgba(var(--brand-primary-rgb),0.14), transparent 65%),
var(--light-bg);
}
body.premium .book-card,
body.premium .character-card {
background: linear-gradient(180deg,
rgba(17,24,39,0.85),
rgba(17,24,39,0.65));
border-color: rgba(255,255,255,0.12);
}
}
/* Print styles for premium version */
@media print {
body.premium {
background: white !important;
}
body.premium main > section::after {
display: none !important;
}
body.premium .reveal {
opacity: 1 !important;
transform: none !important;
}
}
/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
body.premium *,
body.premium *::before,
body.premium *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
BILLION-DOLLAR BRAND POLISH
============================================================ */
/* Enhanced Mobile Navigation - Simplified to match existing style */
@media (max-width: 900px) {
/* Better spacing for mobile nav */
.site-nav {
padding: 1rem 0;
}
}
/* Professional Typography Refinements */
body.premium {
/* Better letter spacing for headings */
h1, h2, h3 {
letter-spacing: -0.02em;
}
/* Optimal line height for body text */
p {
line-height: 1.7;
}
}
/* ============================================================
MERCHANDISE - Product Images (Match Character Image Size)
============================================================ */
/* Product media container - square like character images */
body.premium .product-media {
width: 100%;
max-width: 200px;
margin: 0 auto 1rem;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 14px;
background: rgba(var(--brand-primary-rgb), 0.05);
}
body.premium .product-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s var(--ease);
}
body.premium .product-card:hover .product-media img {
transform: scale(1.05);
}
/* Ensure product cards are centered on mobile */
@media (max-width: 900px) {
body.premium .product-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
body.premium .product-media {
max-width: 200px;
}
}
/* Premium Section Headers with Subtle Animation */
body.premium main > section > h2 {
position: relative;
padding-bottom: 1rem;
}
/* Enhanced Format Chips (eBook, Kindle, etc.) */
body.premium .format-chips {
gap: 0.5rem;
}
body.premium .chip {
font-size: 0.85rem;
font-weight: 700;
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.15),
rgba(var(--brand-purple-rgb), 0.12));
border: 1px solid rgba(var(--brand-accent-rgb), 0.3);
color: var(--text-color);
transition: all 0.25s var(--ease);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body.premium .chip:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--brand-accent-rgb), 0.2);
border-color: rgba(var(--brand-accent-rgb), 0.5);
}
@media (prefers-color-scheme: dark) {
body.premium .chip {
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.2),
rgba(var(--brand-purple-rgb), 0.18));
border-color: rgba(var(--brand-accent-rgb), 0.4);
color: rgba(255,255,255,0.95);
}
}
/* Professional Book Card Enhancements */
body.premium .book-card {
position: relative;
overflow: hidden;
}
/* Subtle shine effect on hover */
body.premium .book-card::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255,255,255,0.1) 50%,
transparent 70%
);
transform: translateX(-100%);
transition: transform 0.6s ease;
pointer-events: none;
}
body.premium .book-card:hover::after {
transform: translateX(100%);
}
/* Enhanced Book Hook Text */
body.premium .book-hook {
font-style: italic;
font-size: 1.05rem;
color: rgba(var(--brand-purple-rgb), 1);
font-weight: 600;
margin: 0.75rem 0;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
body.premium .book-hook {
color: rgba(var(--brand-cyan-rgb), 1);
}
}
/* Professional Button Styling */
body.premium .buy-link,
body.premium button,
body.premium .btn {
font-weight: 700;
letter-spacing: 0.02em;
position: relative;
overflow: hidden;
}
/* Ripple effect for buttons */
body.premium .buy-link::before,
body.premium button::before,
body.premium .btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
body.premium .buy-link:active::before,
body.premium button:active::before,
body.premium .btn:active::before {
width: 300px;
height: 300px;
}
/* Enhanced Logo with Subtle Glow */
@media (min-width: 901px) {
body.premium header .logo {
filter: drop-shadow(0 0 8px rgba(var(--brand-primary-rgb), 0.3));
transition: filter 0.3s ease;
}
body.premium header .logo:hover {
filter: drop-shadow(0 0 16px rgba(var(--brand-primary-rgb), 0.5));
}
}
/* Professional Footer Enhancement */
body.premium footer {
padding: 3rem var(--gutter) 2rem;
background: linear-gradient(180deg,
transparent,
rgba(var(--brand-primary-rgb), 0.04) 50%);
margin-top: 4rem;
}
/* Enhanced Related Links Styling */
body.premium .related-links {
background: rgba(var(--brand-purple-rgb), 0.06);
padding: 1rem 1.25rem;
border-radius: 12px;
border-left: 3px solid rgba(var(--brand-purple-rgb), 0.5);
margin: 1rem 0;
}
body.premium .related-links h5 {
color: rgba(var(--brand-purple-rgb), 1);
font-weight: 800;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
body.premium .related-links ul {
margin: 0;
padding-left: 1.5rem;
}
body.premium .related-links li {
margin: 0.35rem 0;
}
@media (prefers-color-scheme: dark) {
body.premium .related-links {
background: rgba(var(--brand-purple-rgb), 0.12);
border-left-color: rgba(var(--brand-purple-rgb), 0.6);
}
body.premium .related-links h5 {
color: rgba(var(--brand-cyan-rgb), 1);
}
}
/* Professional Section Navigation */
body.premium .section-nav {
margin-top: 1.5rem;
}
/* Enhanced Story Links (Appears In) */
body.premium .story-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
body.premium .story-links a {
font-size: 0.9rem;
font-weight: 600;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: rgba(var(--brand-primary-rgb), 0.1);
border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
color: var(--text-color);
transition: all 0.25s var(--ease);
text-decoration: none;
}
body.premium .story-links a:hover {
background: rgba(var(--brand-primary-rgb), 0.2);
border-color: rgba(var(--brand-primary-rgb), 0.4);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.15);
}
@media (prefers-color-scheme: dark) {
body.premium .story-links a {
background: rgba(var(--brand-primary-rgb), 0.15);
border-color: rgba(var(--brand-primary-rgb), 0.35);
color: rgba(255,255,255,0.95);
}
body.premium .story-links a:hover {
background: rgba(var(--brand-primary-rgb), 0.25);
border-color: rgba(var(--brand-primary-rgb), 0.5);
}
}
/* Professional Loading States */
body.premium img[loading="lazy"] {
background: linear-gradient(90deg,
rgba(var(--brand-primary-rgb), 0.1) 0%,
rgba(var(--brand-accent-rgb), 0.1) 50%,
rgba(var(--brand-primary-rgb), 0.1) 100%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
/* Enhanced Focus States - WCAG AAA Compliant */
body.premium *:focus-visible {
outline: 3px solid rgba(var(--brand-accent-rgb), 0.8);
outline-offset: 3px;
border-radius: 6px;
}
/* Professional Retailer Accordion Styling */
body.premium details.buy-group > summary,
body.premium details.buy-subgroup > summary {
cursor: pointer;
user-select: none;
position: relative;
padding-right: 2.5rem;
}
/* Animated chevron for accordions */
body.premium details.buy-group > summary::after,
body.premium details.buy-subgroup > summary::after {
content: '›';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s var(--ease);
font-size: 1.5rem;
font-weight: 700;
}
body.premium details.buy-group[open] > summary::after,
body.premium details.buy-subgroup[open] > summary::after {
transform: translateY(-50%) rotate(270deg);
}
/* Smooth accordion content reveal */
body.premium details.buy-group,
body.premium details.buy-subgroup {
overflow: hidden;
}
body.premium details.buy-group > *:not(summary),
body.premium details.buy-subgroup > *:not(summary) {
animation: slideDown 0.3s var(--ease);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Professional Character Stories Section */
body.premium .character-stories h5 {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(var(--brand-purple-rgb), 0.9);
margin-bottom: 0.65rem;
}
@media (prefers-color-scheme: dark) {
body.premium .character-stories h5 {
color: rgba(var(--brand-cyan-rgb), 1);
}
}
/* Enhanced Mobile Touch Feedback */
@media (max-width: 900px) {
body.premium a:active,
body.premium button:active,
body.premium summary:active {
transform: scale(0.98);
opacity: 0.9;
}
}
/* Premium Skip Link Enhancement */
body.premium .visually-hidden.focusable:focus {
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 1),
rgba(var(--brand-purple-rgb), 1));
color: white;
font-weight: 700;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
border-radius: 8px;
z-index: 10000;
}
/* Professional Image Treatment - ONLY character images get border */
body.premium .cast-img {
position: relative;
}
/* Subtle image border enhancement - ONLY on character images */
body.premium .cast-img::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px solid rgba(255,255,255,0.2);
pointer-events: none;
z-index: 1;
}
/* Dark mode image border */
@media (prefers-color-scheme: dark) {
body.premium .cast-img::before {
border-color: rgba(255,255,255,0.1);
}
}
/* ============================================================
BACK TO TOP BUTTON - Premium Styling
============================================================ */
body.premium #back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.95),
rgba(var(--brand-purple-rgb), 0.9));
border: 2px solid rgba(255,255,255, 0.3);
box-shadow: 0 8px 24px rgba(var(--brand-accent-rgb), 0.4);
color: #fff;
font-size: 1.5rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s var(--ease);
display: flex;
align-items: center;
justify-content: center;
}
body.premium #back-to-top:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(var(--brand-accent-rgb), 0.5);
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 1),
rgba(var(--brand-purple-rgb), 0.95));
}
body.premium #back-to-top:active {
transform: translateY(-2px);
}
/* Mobile adjustments */
@media (max-width: 900px) {
body.premium #back-to-top {
bottom: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
font-size: 1.3rem;
}
}
/* ============================================================
PROFESSIONAL FOOTER - Billion Dollar Brand Style
============================================================ */
.site-footer {
background: linear-gradient(180deg,
rgba(var(--brand-primary-rgb), 0.04) 0%,
rgba(var(--brand-purple-rgb), 0.06) 50%,
rgba(var(--brand-accent-rgb), 0.04) 100%);
border-top: 1px solid var(--border-color);
margin-top: 3rem;
padding: 0;
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
rgba(var(--brand-primary-rgb), 0.8),
rgba(var(--brand-accent-rgb), 0.8),
rgba(var(--brand-purple-rgb), 0.8),
rgba(var(--brand-primary-rgb), 0.8));
background-size: 300% 100%;
animation: footerGradient 8s ease infinite;
}
@keyframes footerGradient {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.footer-container {
max-width: var(--container);
margin: 0 auto;
padding: 3.5rem var(--gutter) 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(2, 1fr) 1.4fr;
gap: 2.5rem;
margin-bottom: 3rem;
}
/* Footer Brand Column */
.footer-brand {
padding-right: 1rem;
}
.footer-logo-link {
display: inline-block;
transition: transform 0.3s var(--ease), filter 0.3s var(--ease);
}
.footer-logo-link:hover {
transform: translateY(-2px);
}
.footer-logo {
height: 45px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(var(--brand-primary-rgb), 0.2));
}
.footer-logo-link:hover .footer-logo {
filter: drop-shadow(0 4px 16px rgba(var(--brand-primary-rgb), 0.4));
}
.footer-tagline {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--text-color);
margin: 1rem 0 0.5rem;
letter-spacing: 0.02em;
}
.footer-description {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0 0 1.25rem;
}
/* Footer Social Links */
.footer-social {
display: flex;
gap: 0.75rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(var(--brand-primary-rgb), 0.1);
border: 1px solid rgba(var(--brand-primary-rgb), 0.2);
color: var(--text-color);
transition: all 0.3s var(--ease);
}
.social-link:hover {
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.9),
rgba(var(--brand-purple-rgb), 0.9));
border-color: transparent;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(var(--brand-accent-rgb), 0.35);
}
.social-link svg {
width: 18px;
height: 18px;
}
/* Footer Columns */
.footer-column {
min-width: 0;
}
.footer-heading {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-color);
margin: 0 0 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(var(--brand-accent-rgb), 0.3);
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin: 0 0 0.65rem;
}
.footer-links a {
font-size: 0.95rem;
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
display: inline-block;
}
.footer-links a:hover {
color: var(--accent-color);
padding-left: 4px;
}
/* Press Kit Link */
.press-kit-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.download-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(var(--brand-primary-rgb), 0.15);
font-size: 0.7rem;
transition: all 0.2s var(--ease);
}
.press-kit-link:hover .download-icon {
background: rgba(var(--brand-accent-rgb), 0.9);
color: #fff;
transform: translateY(2px);
}
/* Newsletter Section */
.footer-newsletter {
background: rgba(var(--brand-primary-rgb), 0.05);
border-radius: var(--radius-md);
padding: 1.5rem;
border: 1px solid rgba(var(--brand-primary-rgb), 0.1);
}
.newsletter-text {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0 0 1rem;
line-height: 1.5;
}
.newsletter-form {
margin: 0;
}
.newsletter-input-wrapper {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.newsletter-input {
flex: 1;
padding: 0.75rem 1rem;
font-size: 0.95rem;
font-family: var(--font-body);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--card-bg);
color: var(--text-color);
transition: all 0.2s var(--ease);
min-width: 0;
}
.newsletter-input::placeholder {
color: var(--text-muted);
opacity: 0.7;
}
.newsletter-input:focus {
outline: none;
border-color: rgba(var(--brand-accent-rgb), 0.6);
box-shadow: 0 0 0 3px rgba(var(--brand-accent-rgb), 0.15);
}
.newsletter-btn {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: none;
border-radius: var(--radius-sm);
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.95),
rgba(var(--brand-purple-rgb), 0.9));
color: #fff;
cursor: pointer;
transition: all 0.3s var(--ease);
flex-shrink: 0;
}
.newsletter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(var(--brand-accent-rgb), 0.4);
}
.newsletter-btn:active {
transform: translateY(0);
}
.newsletter-btn svg {
width: 18px;
height: 18px;
}
.newsletter-disclaimer {
font-size: 0.75rem;
color: var(--text-muted);
opacity: 0.8;
margin: 0;
transition: color 0.3s var(--ease), font-weight 0.3s var(--ease);
}
/* Newsletter Button States */
.newsletter-btn:disabled {
cursor: not-allowed;
opacity: 0.8;
}
.newsletter-btn:disabled:hover {
transform: none;
box-shadow: none;
}
.newsletter-btn .loading-icon {
animation: spin 1s linear infinite;
}
.newsletter-btn .success-icon {
color: #fff;
}
/* Success state - green background */
.newsletter-btn:has(.success-icon[style*="block"]) {
background: linear-gradient(135deg, #10b981, #059669);
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Newsletter success message styling */
.newsletter-disclaimer[style*="color"] {
opacity: 1;
}
/* Footer Bottom */
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid var(--border-color);
text-align: center;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 1.5rem;
margin-bottom: 0.75rem;
}
.footer-copyright {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
.footer-copyright a {
color: var(--text-color);
text-decoration: none;
font-weight: 600;
transition: color 0.2s var(--ease);
}
.footer-copyright a:hover {
color: var(--accent-color);
}
.footer-legal-links {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
}
.footer-legal-links a {
color: var(--text-muted);
text-decoration: none;
transition: color 0.2s var(--ease);
}
.footer-legal-links a:hover {
color: var(--accent-color);
}
.legal-separator {
color: var(--text-muted);
opacity: 0.5;
}
.footer-trademark {
font-size: 0.8rem;
color: var(--text-muted);
opacity: 0.7;
margin: 0;
}
/* Footer Responsive */
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-brand {
grid-column: 1 / -1;
text-align: center;
padding-right: 0;
}
.footer-social {
justify-content: center;
}
.footer-newsletter {
grid-column: 1 / -1;
}
.footer-legal {
flex-direction: column;
gap: 0.75rem;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.footer-column {
text-align: center;
}
.footer-heading {
display: inline-block;
}
.footer-links a:hover {
padding-left: 0;
}
}
/* Dark Mode Footer */
@media (prefers-color-scheme: dark) {
.site-footer {
background: linear-gradient(180deg,
rgba(var(--brand-primary-rgb), 0.06) 0%,
rgba(var(--brand-purple-rgb), 0.08) 50%,
rgba(var(--brand-accent-rgb), 0.05) 100%);
}
.footer-newsletter {
background: rgba(var(--brand-primary-rgb), 0.08);
border-color: rgba(var(--brand-primary-rgb), 0.15);
}
.social-link {
background: rgba(var(--brand-primary-rgb), 0.15);
border-color: rgba(var(--brand-primary-rgb), 0.25);
}
}
/* ============================================================
PAGE LOADING ANIMATION
============================================================ */
.page-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: var(--light-bg);
transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.page-loader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader-content {
text-align: center;
}
.loader-logo {
width: 140px;
max-width: 70vw;
height: auto;
margin-bottom: 1.5rem;
animation: loaderPulse 1.5s ease-in-out infinite;
}
@keyframes loaderPulse {
0%, 100% {
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(var(--brand-accent-rgb), 0));
}
50% {
transform: scale(1.05);
filter: drop-shadow(0 0 20px rgba(var(--brand-accent-rgb), 0.5));
}
}
.loader-bars {
display: flex;
justify-content: center;
gap: 6px;
height: 40px;
align-items: flex-end;
}
.loader-bar {
width: 6px;
background: linear-gradient(180deg,
rgba(var(--brand-accent-rgb), 0.9),
rgba(var(--brand-purple-rgb), 0.9));
border-radius: 3px;
animation: loaderBounce 1s ease-in-out infinite;
}
.loader-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
.loader-bar:nth-child(2) { height: 30px; animation-delay: 0.1s; }
.loader-bar:nth-child(3) { height: 25px; animation-delay: 0.2s; }
.loader-bar:nth-child(4) { height: 35px; animation-delay: 0.3s; }
.loader-bar:nth-child(5) { height: 20px; animation-delay: 0.4s; }
@keyframes loaderBounce {
0%, 100% {
transform: scaleY(0.5);
opacity: 0.5;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
.loader-text {
margin-top: 1rem;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-muted);
animation: loaderFade 1.5s ease-in-out infinite;
}
@keyframes loaderFade {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
.page-loader {
transition: none;
}
.loader-logo,
.loader-bar,
.loader-text {
animation: none;
}
.loader-bar {
transform: scaleY(1);
opacity: 1;
}
}
/* ============================================================
404 PAGE STYLES
============================================================ */
.error-page {
min-height: calc(100vh - var(--header-h));
display: flex;
align-items: center;
justify-content: center;
padding: 2rem var(--gutter);
text-align: center;
}
.error-content {
max-width: 600px;
}
.error-visual {
position: relative;
margin-bottom: 2rem;
}
.error-code {
font-family: var(--font-display);
font-size: clamp(6rem, 20vw, 12rem);
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.9),
rgba(var(--brand-purple-rgb), 0.9),
rgba(var(--brand-primary-rgb), 0.9));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
position: relative;
}
.error-code::after {
content: '404';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.15),
rgba(var(--brand-purple-rgb), 0.15));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: blur(30px);
z-index: -1;
}
.error-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
animation: errorBounce 2s ease-in-out infinite;
}
@keyframes errorBounce {
0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
50% { transform: translate(-50%, -55%) rotate(5deg); }
}
.error-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2rem);
margin: 0 0 1rem;
color: var(--text-color);
}
.error-message {
font-size: 1.1rem;
color: var(--text-muted);
margin: 0 0 2rem;
line-height: 1.6;
}
.error-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.error-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.75rem;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-md);
transition: all 0.3s var(--ease);
}
.error-btn--primary {
background: linear-gradient(135deg,
rgba(var(--brand-accent-rgb), 0.95),
rgba(var(--brand-purple-rgb), 0.9));
color: #fff;
border: none;
}
.error-btn--primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(var(--brand-accent-rgb), 0.4);
color: #fff;
}
.error-btn--secondary {
background: transparent;
color: var(--text-color);
border: 2px solid var(--border-color);
}
.error-btn--secondary:hover {
border-color: rgba(var(--brand-primary-rgb), 0.5);
background: rgba(var(--brand-primary-rgb), 0.08);
color: var(--text-color);
}
.error-suggestions {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.error-suggestions h3 {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin: 0 0 1rem;
}
.error-suggestions ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
.error-suggestions a {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 0.9rem;
color: var(--text-color);
background: rgba(var(--brand-primary-rgb), 0.08);
border-radius: 999px;
text-decoration: none;
transition: all 0.2s var(--ease);
}
.error-suggestions a:hover {
background: rgba(var(--brand-primary-rgb), 0.18);
transform: translateY(-2px);
}
/* ============================================================
PRESS KIT SECTION STYLES
============================================================ */
.press-kit-banner {
background: linear-gradient(135deg,
rgba(var(--brand-purple-rgb), 0.08),
rgba(var(--brand-primary-rgb), 0.08));
border: 1px solid rgba(var(--brand-purple-rgb), 0.15);
border-radius: var(--radius-lg);
padding: 2rem;
margin: 2rem 0;
text-align: center;
}
.press-kit-banner h3 {
font-family: var(--font-display);
font-size: 1.25rem;
margin: 0 0 0.75rem;
color: var(--text-color);
}
.press-kit-banner p {
color: var(--text-muted);
margin: 0 0 1.5rem;
font-size: 0.95rem;
}
.press-kit-contents {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.press-kit-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
font-size: 0.85rem;
background: rgba(var(--brand-primary-rgb), 0.1);
border-radius: 999px;
color: var(--text-muted);
}
.press-kit-item svg {
width: 14px;
height: 14px;
opacity: 0.7;
}
.press-kit-download {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.75rem;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-md);
background: linear-gradient(135deg,
rgba(var(--brand-purple-rgb), 0.95),
rgba(var(--brand-accent-rgb), 0.9));
color: #fff;
transition: all 0.3s var(--ease);
}
.press-kit-download:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(var(--brand-purple-rgb), 0.4);
color: #fff;
}
.press-kit-download svg {
width: 18px;
height: 18px;
}
@media (prefers-color-scheme: dark) {
.press-kit-banner {
background: linear-gradient(135deg,
rgba(var(--brand-purple-rgb), 0.12),
rgba(var(--brand-primary-rgb), 0.12));
border-color: rgba(var(--brand-purple-rgb), 0.2);
}
.press-kit-item {
background: rgba(var(--brand-primary-rgb), 0.15);
}
}
/* ============================================================
PROFESSIONAL POLISH - MICRO-INTERACTIONS & REFINEMENTS
============================================================ */
/* Smooth page entrance animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main > section {
animation: fadeInUp 0.6s var(--ease) both;
}
main > section:nth-child(2) { animation-delay: 0.1s; }
main > section:nth-child(3) { animation-delay: 0.15s; }
main > section:nth-child(4) { animation-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
main > section {
animation: none;
}
}
/* Enhanced card hover states */
.book-card,
.cast-card,
.merch-card {
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.book-card:hover,
.merch-card:hover {
transform: translateY(-4px);
}
/* Better button press feedback */
.buy-link:active,
.btn:active,
button:active {
transform: scale(0.97);
}
/* Smooth scroll anchor highlight */
:target {
animation: targetHighlight 2s ease-out;
}
@keyframes targetHighlight {
0% {
box-shadow: 0 0 0 4px rgba(var(--brand-accent-rgb), 0.4);
}
100% {
box-shadow: 0 0 0 4px transparent;
}
}
/* Image loading placeholder shimmer */
img[loading="lazy"] {
background: linear-gradient(
90deg,
rgba(var(--brand-primary-rgb), 0.08) 0%,
rgba(var(--brand-primary-rgb), 0.15) 50%,
rgba(var(--brand-primary-rgb), 0.08) 100%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
img[loading="lazy"][src] {
animation: none;
background: none;
}
/* Premium selection color */
::selection {
background: rgba(var(--brand-accent-rgb), 0.3);
color: inherit;
}
/* Improved focus ring for keyboard navigation */
:focus-visible {
outline: 2px solid rgba(var(--brand-accent-rgb), 0.8);
outline-offset: 3px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
outline-offset: 4px;
}
/* Smooth color transitions for theme changes */
body,
header,
/* === 07. CARDS / GRIDS ============================================== */
.card,
section {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Footer enhancement */
footer {
position: relative;
overflow: hidden;
}
footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(var(--brand-primary-rgb), 0.3),
rgba(var(--brand-accent-rgb), 0.3),
transparent
);
}
/* Retailer button group hover enhancement */
.buy-group .buy-link {
transition: all 0.25s var(--ease);
}
.buy-group:hover .buy-link:not(:hover) {
opacity: 0.7;
}
/* Character card image subtle 3D effect */
.cast-img {
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cast-card:hover .cast-img {
transform: scale(1.05) rotate(-1deg);
box-shadow:
0 20px 40px rgba(16,24,40,0.15),
0 10px 20px rgba(var(--brand-accent-rgb), 0.1);
}
/* Chip hover states */
.chip {
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.chip:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.15);
}
/* Premium scrollbar (webkit) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: rgba(var(--brand-primary-rgb), 0.05);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(
180deg,
rgba(var(--brand-primary-rgb), 0.3),
rgba(var(--brand-accent-rgb), 0.3)
);
border-radius: 5px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
180deg,
rgba(var(--brand-primary-rgb), 0.5),
rgba(var(--brand-accent-rgb), 0.5)
);
background-clip: padding-box;
}
/* Firefox scrollbar */
* {
scrollbar-width: thin;
scrollbar-color: rgba(var(--brand-primary-rgb), 0.3) rgba(var(--brand-primary-rgb), 0.05);
}
/* Link underline animation */
.legal-page a,
#about a,
#books a:not(.buy-link) {
text-decoration: none;
background-image: linear-gradient(
rgba(var(--brand-accent-rgb), 0.4),
rgba(var(--brand-accent-rgb), 0.4)
);
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 0.3s var(--ease);
}
.legal-page a:hover,
#about a:hover,
#books a:not(.buy-link):hover {
background-size: 100% 2px;
}
/* Print styles for professional output */
@media print {
header,
footer,
.slideshow-control,
.buy-group,
nav {
display: none !important;
}
body {
background: white !important;
color: black !important;
padding: 0 !important;
}
section {
break-inside: avoid;
page-break-inside: avoid;
}
a {
color: inherit !important;
text-decoration: underline !important;
}
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
color: #666;
}
}
/* Auto-open retailers when linked via anchor */
details.buy-group:target {
open: true;
}
details.buy-group {
scroll-margin-top: 120px;
}
/* Footer logo: force true transparency + remove any box styling */
.site-footer .footer-logo-link,
.site-footer .footer-logo {
background: transparent !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
.site-footer .footer-logo-link {
padding: 0 !important;
border-radius: 0 !important;
display: inline-flex;
}
/* Ensure footer legal links can wrap on mobile (fixes long links like Partnerships) */
.footer-legal-links {
flex-wrap: wrap;
justify-content: center;
}
.footer-legal-links a {
white-space: normal;
}
/* Optional: separators look weird when wrapping, so hide them on small screens */
@media (max-width: 600px) {
.legal-separator {
display: none;
}
}
/* ===============================
AUTHOR CTA + LINK POLISH
=============================== */
.author-media{
display:inline-flex;
border-radius:12px;
}
.author-media:focus-visible{
outline: 2px solid rgba(var(--brand-accent-rgb), 0.55);
outline-offset: 4px;
}
.author-name{
color: inherit;
text-decoration: none;
}
.author-name:hover{
text-decoration: underline;
}
.author-cta{
display:flex;
align-items:center;
gap: 1rem;
flex-wrap: wrap;
margin-top: .9rem;
}
.author-inline-link{
font-weight: 700;
border: none;
text-decoration: none;
color: rgba(var(--brand-accent-rgb), 0.95);
}
.author-inline-link:hover{
text-decoration: underline;
}
/* ======================================================================
LEGAL / LONGFORM PAGES (Privacy / Terms / Accessibility / E.S. Aesthetic)
This block replaces the former inline