/* ============================================================ SAMMAMOTH · Samantha Lackner — shared design system Loaded by both index.html and bio.html (and future pages). ============================================================ */ :root{ --pink-hot:#ff2e93; --pink-deep:#ff007a; --pink-blood:#c4005f; --pink-soft:#ffd6ec; --pink-mist:#fff0f8; --chrome-1:#f5f6f8; --chrome-2:#cfd3da; --chrome-3:#9aa1ab; --chrome-4:#525861; --chrome-5:#2a2d33; --ink:#0a0a0c; --ink-2:#141418; --ink-3:#1f1f25; --acid:#f9ff00; --acid-2:#d4d800; --paper:#fff0f8; --line:rgba(255,46,147,.22); --line-cold:rgba(207,211,218,.18); --display:"Big Shoulders Display",Impact,sans-serif; --body:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --barbie:"Bungee",sans-serif; --maxw:1440px; --gutter:clamp(20px,4vw,56px); --chrome-grad:linear-gradient(180deg,#f6f7f9 0%,#dfe2e7 18%,#a7adb6 44%,#7a8089 60%,#b9bec6 78%,#f0f2f5 100%); --pink-grad:linear-gradient(180deg,#ff8fcb 0%,#ff2e93 38%,#c4005f 78%,#7d0140 100%); --bevel:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.45); } *{margin:0;padding:0;box-sizing:border-box} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink); /* Anchor jumps (#shows, #book, etc.) need an offset equal to the sticky header height — otherwise the section heading lands hidden under it. Phone uses the 2-row header so the offset is bigger. */ scroll-padding-top:80px; /* Horizontal overflow control lives here, NOT on . Putting it on body breaks position:sticky for the header — overflow-x:hidden (or clip + visible y) turns body into a scroll container in some browsers (notably Chromium in English-mode test cases). html is already the document scroll container so adding overflow-x:hidden here doesn't change scrolling, just clips horizontal overflow as intended. */ overflow-x:hidden; /* Firefox + modern: tinted scrollbar (auto-follows mode via the html.english-mode override) */ scrollbar-width:thin; scrollbar-color:var(--pink-hot) var(--ink-2); } /* WebKit (Chrome/Safari/Edge): full custom treatment */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--ink-2)} ::-webkit-scrollbar-thumb{ background:var(--pink-hot); border:2px solid var(--ink); border-radius:0; box-shadow:inset 0 0 0 1px var(--pink-hot); } ::-webkit-scrollbar-thumb:hover{background:var(--pink-deep)} ::-webkit-scrollbar-corner{background:var(--ink)} body{ background:var(--ink); color:var(--chrome-1); font-family:var(--body); font-size:17px; line-height:1.55; /* No overflow on body — that's on . Body needs to stay overflow:visible so position:sticky on the header works in every browser/mode. */ position:relative; font-feature-settings:"ss01","ss02","cv11"; } ::selection{background:var(--pink-hot);color:var(--ink)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} svg{display:block} /* ─── global atmosphere: scanlines + grain + magenta glow ─── */ body::before{ content:"";position:fixed;inset:0;z-index:80;pointer-events:none; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 3px); mix-blend-mode:overlay;opacity:.7; } body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; background: radial-gradient(60% 50% at 18% 0%,rgba(255,46,147,.18),transparent 60%), radial-gradient(70% 50% at 100% 12%,rgba(249,255,0,.06),transparent 60%), radial-gradient(80% 60% at 50% 100%,rgba(255,0,122,.12),transparent 65%); } .grain{ position:fixed;inset:0;z-index:79;pointer-events:none;opacity:.35;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E"); } /* ─── HUD corner brackets (fixed, decorative) ─── */ .hud{position:fixed;inset:0;z-index:60;pointer-events:none} .hud__bracket{position:absolute;width:36px;height:36px;border:2px solid var(--pink-hot);opacity:.7} .hud__bracket--tl{top:12px;left:12px;border-right:none;border-bottom:none} .hud__bracket--tr{top:12px;right:12px;border-left:none;border-bottom:none} .hud__bracket--bl{bottom:12px;left:12px;border-right:none;border-top:none} .hud__bracket--br{bottom:12px;right:12px;border-left:none;border-top:none} .hud__readout{ position:absolute;bottom:18px;left:50%;transform:translateX(-50%); font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase; color:var(--pink-hot);background:rgba(10,10,12,.6);padding:4px 12px;border:1px solid var(--line); display:flex;align-items:center;gap:10px; } .hud__dot{width:6px;height:6px;border-radius:50%;background:var(--pink-hot);box-shadow:0 0 6px var(--pink-hot);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} @media (max-width:680px){.hud__readout{display:none}.hud__bracket{width:24px;height:24px}} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2} /* ─── skip link ─── */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--pink-hot);color:var(--ink);padding:10px 16px;font-family:var(--mono);font-size:12px;font-weight:700} .skip:focus{left:12px;top:12px} /* ============================================================ HEADER ============================================================ */ .head{position:sticky;top:0;z-index:50;background:rgba(10,10,12,.78);backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--line)} .head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gutter);max-width:var(--maxw);margin:0 auto} .brand{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:.01em;line-height:1;text-transform:uppercase;font-stretch:condensed} .brand__mark{ width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 50%,rgba(255,46,147,.35),transparent 70%); position:relative; filter:drop-shadow(0 0 10px rgba(255,46,147,.45)); } .brand__mark img{width:100%;height:100%;object-fit:contain;display:block} .brand__mark::before{ content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--pink-hot);opacity:.5; } .brand__mark::after{ content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--chrome-4);opacity:.45; animation:spin 22s linear infinite; } .brand__name{display:flex;flex-direction:column;gap:3px;min-width:0} .brand__name b{font-weight:900;font-size:24px;letter-spacing:.005em;line-height:.9;color:var(--chrome-1)} .brand__name b em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .brand__sub{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.2em;color:var(--pink-hot);text-transform:uppercase;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch} body.english-mode .brand__sub{letter-spacing:.16em} .brand__sub i{font-style:normal;color:var(--chrome-3)} @media (max-width:560px){.brand__sub{display:none}.brand__mark{width:40px;height:40px;flex-basis:40px}} .nav{display:flex;align-items:center;gap:6px} .nav a{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600; color:var(--chrome-2);padding:8px 12px;position:relative;border:1px solid transparent;transition:all .18s ease; white-space:nowrap; } .nav a:hover{color:var(--pink-hot);border-color:var(--line)} .nav a.active{color:var(--ink);background:var(--pink-hot);border-color:var(--pink-hot)} /* Mode-aware nav (desktop): Comedy default, English shown when body.english-mode */ @media (min-width:921px){ .nav--english{display:none} body.english-mode .nav--english{display:flex} body.english-mode .nav--comedy{display:none} } /* Tablet range: 5-item Comedy nav can crowd the header — tighten padding + letter-spacing */ @media (min-width:921px) and (max-width:1100px){ .nav{gap:2px} .nav a{padding:8px 8px;letter-spacing:.15em;font-size:10.5px} .head__in{gap:14px} } /* the famous toggle */ .mode-toggle{ display:flex;align-items:stretch;border:2px solid var(--chrome-3);background:var(--ink-2); font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700; position:relative;overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(255,46,147,.18); } .mode-toggle button,.mode-toggle a{padding:9px 14px;color:var(--chrome-2);position:relative;z-index:2;transition:color .25s ease;white-space:nowrap;display:inline-flex;align-items:center} .mode-toggle button.is-active,.mode-toggle a.is-active{color:var(--ink)} .mode-toggle__slider{ position:absolute;top:0;bottom:0;left:0;background:var(--pink-hot);z-index:1; transition:transform .35s cubic-bezier(.7,0,.2,1),width .35s cubic-bezier(.7,0,.2,1); box-shadow:0 0 18px rgba(255,46,147,.7),inset 0 1px 0 rgba(255,255,255,.4); } .nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--chrome-4);background:transparent;color:var(--chrome-1);align-items:center;justify-content:center} .nav-toggle span{display:block;width:18px;height:2px;background:currentColor;position:relative} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor} .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} @media (max-width:920px){ .head__in{gap:12px} .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;padding:14px var(--gutter);background:var(--ink);border-bottom:1px solid var(--line);gap:0} /* Only the correct-mode nav reveals when the hamburger is toggled open */ body:not(.english-mode) .nav--comedy.open{display:flex} body.english-mode .nav--english.open{display:flex} .nav a{padding:14px 8px;border-bottom:1px solid var(--line-cold)} .nav-toggle{display:flex} .mode-toggle{order:-1} .mode-toggle button,.mode-toggle a{padding:8px 10px;font-size:9px} } /* Phones — single-row header doesn't fit. Split into two rows: brand + hamburger on top, mode toggle full-width below. Sticky header grows ~30px on mobile but tap targets become reachable and readable. */ @media (max-width:560px){ /* Bigger scroll offset because the sticky header is two rows tall here. */ html{scroll-padding-top:115px} .head__in{ display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:10px 12px; padding:10px var(--gutter); } .brand{grid-column:1;grid-row:1;gap:10px;font-size:18px;min-width:0} .brand__name b{font-size:20px} .nav-toggle{grid-column:2;grid-row:1;justify-self:end;width:38px;height:38px} /* mode-toggle: full row 2, buttons split 50/50. JS reads offsetWidth/offsetLeft to position the pink slider, so equal-width flex buttons auto-adapt. */ .mode-toggle{grid-column:1 / -1;grid-row:2;order:0;width:100%} .mode-toggle button,.mode-toggle a{flex:1 1 0;justify-content:center;padding:10px 8px;font-size:10px;letter-spacing:.18em} } /* ============================================================ COMEDY MODE — HERO ============================================================ */ .hero{position:relative;padding:clamp(40px,7vw,90px) 0 clamp(60px,8vw,110px);overflow:hidden} .hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:end;position:relative} .hero__type{position:relative;z-index:3} .hero__eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-hot);margin-bottom:28px} .hero__eyebrow::before{content:"";width:54px;height:2px;background:var(--pink-hot);box-shadow:0 0 8px var(--pink-hot)} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}} .hero h1{ font-family:var(--display);font-weight:900;line-height:.82;letter-spacing:-.02em;text-transform:uppercase; font-size:clamp(64px,12vw,176px);font-stretch:condensed; } .hero h1 .l1{display:block;color:var(--chrome-1);text-shadow:0 4px 0 rgba(0,0,0,.4)} .hero h1 .l2{display:block;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,46,147,.45))} .hero h1 .l3{display:block;color:var(--chrome-1);position:relative} .hero h1 .l3::after{content:"™";font-size:.18em;vertical-align:top;color:var(--pink-hot);margin-left:.12em;font-family:var(--mono);font-weight:400;letter-spacing:0;font-stretch:normal} .hero__sub{margin-top:30px;max-width:540px;display:flex;flex-direction:column;gap:18px} .hero__line{font-family:var(--body);font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--chrome-2);max-width:480px} .hero__line b{color:var(--pink-hot);font-weight:700} .hud-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .hud-tag{ font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600; color:var(--chrome-2);padding:6px 10px;border:1px solid var(--chrome-4);background:rgba(20,20,24,.6); display:inline-flex;align-items:center;gap:6px; } .hud-tag b{color:var(--acid);font-weight:700} .hud-tag::before{content:"";width:4px;height:4px;background:var(--pink-hot);border-radius:50%;box-shadow:0 0 4px var(--pink-hot)} .hero__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .btn{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700; padding:14px 22px;border:2px solid var(--pink-hot);color:var(--ink);background:var(--pink-hot); display:inline-flex;align-items:center;gap:10px;position:relative;transition:transform .15s ease,box-shadow .15s ease; box-shadow:5px 5px 0 var(--ink),5px 5px 0 1px var(--pink-hot); } .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink),7px 7px 0 1px var(--pink-hot)} .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink),2px 2px 0 1px var(--pink-hot)} .btn--ghost{background:transparent;color:var(--chrome-1);border-color:var(--chrome-3);box-shadow:5px 5px 0 var(--ink),5px 5px 0 1px var(--chrome-4)} .btn--ghost:hover{color:var(--pink-hot);border-color:var(--pink-hot);box-shadow:7px 7px 0 var(--ink),7px 7px 0 1px var(--pink-hot)} .btn .arrow{transition:transform .2s ease} .btn:hover .arrow{transform:translateX(3px)} /* hero portrait — placeholder card with chrome frame + reticle */ .hero__portrait{position:relative;z-index:2;align-self:stretch} .portrait{ position:relative;aspect-ratio:1/1;width:100%;max-width:540px;margin-left:auto; background:var(--ink-2); border:2px solid var(--chrome-3); box-shadow:0 0 0 1px var(--ink),12px 12px 0 var(--pink-hot),12px 12px 0 1px var(--ink); } .portrait::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(135deg,rgba(255,46,147,.35),transparent 50%), linear-gradient(45deg,rgba(207,211,218,.18),transparent 60%), repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px); } .portrait.has-photo::before{ background: linear-gradient(180deg,transparent 70%,rgba(0,0,0,.55) 100%), repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.04) 3px,rgba(255,255,255,.04) 4px); } .portrait__img{ position:absolute;inset:0;background-size:cover;background-position:center 30%;background-color:#3a1027; background-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.4) 100%), radial-gradient(circle at 50% 45%,rgba(255,46,147,.55),transparent 60%), linear-gradient(135deg,#48142e 0%,#1c0712 100%); } .portrait__img.has-photo{background-image:url("hero.jpg");background-color:#a9c5d2;background-position:center 35%} .portrait__label{ position:absolute;bottom:14px;left:14px;right:14px;z-index:5; display:flex;justify-content:space-between;align-items:flex-end;gap:10px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-soft); } .portrait__label small{display:block;color:var(--chrome-2);font-size:9px;margin-bottom:3px} .portrait__label b{color:var(--acid);font-weight:700} .portrait__reticle{ position:absolute;width:90px;height:90px;border:1px solid var(--pink-hot);border-radius:50%; top:18%;left:50%;transform:translateX(-50%);opacity:.85; box-shadow:0 0 14px rgba(255,46,147,.6),inset 0 0 14px rgba(255,46,147,.18); z-index:4; } .portrait__reticle::before,.portrait__reticle::after{content:"";position:absolute;background:var(--pink-hot)} .portrait__reticle::before{top:50%;left:-10px;right:-10px;height:1px;transform:translateY(-50%);box-shadow:0 0 6px var(--pink-hot)} .portrait__reticle::after{left:50%;top:-10px;bottom:-10px;width:1px;transform:translateX(-50%);box-shadow:0 0 6px var(--pink-hot)} .portrait__corner{position:absolute;width:18px;height:18px;border:2px solid var(--pink-hot);z-index:5} .portrait__corner--tl{top:8px;left:8px;border-right:none;border-bottom:none} .portrait__corner--tr{top:8px;right:8px;border-left:none;border-bottom:none} .portrait__corner--bl{bottom:8px;left:8px;border-right:none;border-top:none} .portrait__corner--br{bottom:8px;right:8px;border-left:none;border-top:none} .portrait__strip{ position:absolute;top:14px;left:14px;z-index:5;display:flex;flex-direction:column;gap:4px; } .portrait__strip span{ font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700; background:var(--ink);color:var(--acid);padding:3px 7px;border:1px solid var(--acid); } /* spinning sticker */ .sticker{ position:absolute;width:140px;height:140px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase; color:var(--ink);background:var(--acid); box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--acid),0 10px 30px rgba(0,0,0,.4); animation:spin 16s linear infinite; z-index:6; } .sticker--hero{bottom:-44px;left:-44px;transform:rotate(-12deg)} .sticker svg{width:100%;height:100%} .sticker text{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;font-weight:700;fill:var(--ink)} .sticker__center{position:absolute;font-family:var(--display);font-size:30px;line-height:.9;font-weight:900;text-align:center;text-transform:uppercase;font-stretch:condensed} @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes spin-neg{from{transform:rotate(0)}to{transform:rotate(-360deg)}} @media (max-width:920px){ .hero__grid{grid-template-columns:1fr;gap:40px} .hero h1{font-size:clamp(64px,16vw,140px)} .hero__portrait{order:-1;max-width:420px;margin:0 auto} .sticker--hero{width:110px;height:110px;bottom:-30px;left:-20px} .sticker__center{font-size:24px} } /* Phone — eyebrow + title come BEFORE the portrait; portrait centered with a smaller spinning badge tucked into its bottom-left corner. */ @media (max-width:560px){ .hero__grid{gap:28px} .hero__portrait{order:0;max-width:300px} .hero__eyebrow{display:none} /* Hide the corner L-frame decorations on phone — both the viewport HUD brackets and the portrait's own frame brackets. They crowd the small screen without adding info. */ .hud__bracket,.portrait__corner{display:none} /* Status tag centered on its own row; Base + Origin share the row below. */ .hud-tags{justify-content:center} .hud-tag{justify-content:center} .hud-tag:first-child{flex-basis:100%} /* sticker: shrink and tuck inside the bottom-left corner of the portrait */ .sticker--hero{width:74px;height:74px;bottom:6px;left:6px;transform:rotate(-8deg)} .sticker__center{font-size:16px} .sticker text{font-size:9px} /* Reorder so the portrait sits between the title and the rest of the type content. display:contents on hero__type flattens its children into the hero__grid flex container so we can interleave hero__portrait via order. */ .hero__grid{display:flex;flex-direction:column;align-items:stretch;gap:24px} .hero__type{display:contents} .hero h1{order:1} .hero__portrait{order:2;align-self:center;width:100%;max-width:320px;margin:4px auto 8px} .hero__sub{order:3;margin-top:0} .hero__cta{order:4} .countdown{order:5} /* Strip the busy decorations that overlap the small portrait on phone — they're cool at desktop size, garbled at 300px. Keeps the actual photo uncluttered. The sticker (spinning COMEDY badge) stays. */ .portrait__strip,.portrait__label,.portrait__reticle{display:none} .portrait{margin-left:auto;margin-right:auto;box-shadow:0 0 0 1px var(--ink),6px 6px 0 var(--pink-hot),6px 6px 0 1px var(--ink)} } /* ============================================================ TICKER ============================================================ */ .ticker{ border-block:2px solid var(--pink-hot); background:var(--ink); overflow:hidden;position:relative; box-shadow:inset 0 0 30px rgba(255,46,147,.18); } .ticker__track{display:flex;gap:0;animation:tick 38s linear infinite;width:max-content} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__item{ display:inline-flex;align-items:center;gap:18px;padding:16px 26px; font-family:var(--display);font-size:clamp(22px,3vw,38px);font-weight:900;line-height:1; text-transform:uppercase;font-stretch:condensed;color:var(--chrome-1);white-space:nowrap; } .ticker__item b{color:var(--pink-hot);text-shadow:0 0 14px rgba(255,46,147,.6)} .ticker__sep{ font-family:var(--mono);font-size:14px;color:var(--acid);align-self:center;letter-spacing:.2em; text-shadow:0 0 8px var(--acid); } @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ SECTION SCAFFOLDING ============================================================ */ .sect{padding:clamp(70px,9vw,140px) 0;position:relative} .sect__head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap} .sect__title{ font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.85;letter-spacing:-.015em; font-size:clamp(54px,8vw,128px);font-stretch:condensed; display:flex;flex-direction:column; } .sect__title small{ display:flex;align-items:center;gap:14px; font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;font-stretch:normal; color:var(--pink-hot);margin-bottom:18px;line-height:1; } .sect__title small::before{content:"";width:36px;height:2px;background:var(--pink-hot);box-shadow:0 0 6px var(--pink-hot)} .sect__title b{color:var(--pink-hot)} .sect__title em{font-style:normal;background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .sect__meta{ font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-3); display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right; } .sect__meta b{color:var(--pink-hot);font-weight:700} /* ============================================================ COUNTDOWN STRIP (next show) ============================================================ */ .countdown{ margin-top:36px;background:var(--ink-2);border:2px solid var(--pink-hot); padding:22px 26px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center; box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--chrome-5),inset 0 0 26px rgba(255,46,147,.12); } .countdown__label{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink-hot);font-weight:700} .countdown__label b{display:block;font-family:var(--display);font-size:20px;font-weight:900;letter-spacing:.02em;color:var(--chrome-1);text-transform:uppercase;font-stretch:condensed;margin-top:4px;line-height:1} .countdown__clock{display:flex;gap:10px;justify-self:center} .countdown__unit{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:60px} .countdown__num{ font-family:var(--display);font-size:clamp(32px,5vw,54px);font-weight:900;line-height:1; color:var(--acid);text-shadow:0 0 14px rgba(249,255,0,.45);font-variant-numeric:tabular-nums;font-stretch:condensed; } .countdown__cap{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-3)} .countdown__cta{justify-self:end} @media (max-width:760px){ .countdown{grid-template-columns:1fr;gap:14px;text-align:center;padding:18px} .countdown__cta,.countdown__clock,.countdown__label{justify-self:center;align-items:center} .countdown__num{font-size:clamp(28px,7vw,54px)} .countdown__unit{min-width:48px} } /* ============================================================ ABOUT / BIO BLURB (homepage) ============================================================ */ .about{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,5vw,70px);align-items:start} .about__quote{ font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.015em;text-transform:uppercase; font-size:clamp(34px,5vw,68px);font-stretch:condensed;color:var(--chrome-1); } .about__quote em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .about__quote::before{content:"\201C";display:block;font-family:var(--barbie);font-size:1.4em;color:var(--pink-hot);line-height:.6;margin-bottom:-.2em;opacity:.7} .about__quote::after{content:"\201D";font-family:var(--barbie);color:var(--pink-hot);opacity:.7;margin-left:.1em} .about__side{display:flex;flex-direction:column;gap:22px;padding-top:30px} .about__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px dashed var(--chrome-4)} .about__row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-3);font-weight:600;flex:0 0 auto} .about__row dd{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:800;text-transform:uppercase;color:var(--chrome-1);text-align:right;font-stretch:condensed;line-height:1} .about__row dd b{color:var(--pink-hot)} @media (max-width:880px){.about{grid-template-columns:1fr}.about__side{padding-top:0}} /* ============================================================ REEL — featured row (heading + big clip side-by-side) + 4-up grid below ============================================================ */ .reel-feat{ display:grid; grid-template-columns:minmax(280px,.85fr) 1.4fr; gap:clamp(28px,4vw,60px); align-items:end; margin-bottom:clamp(14px,1.6vw,22px); } .reel-feat__head{display:flex;flex-direction:column;gap:18px} .reel-feat__head .sect__title{margin:0} .reel-feat__head .sect__meta{align-items:flex-start;text-align:left} .reel-feat .reel__card--feat{grid-column:auto;aspect-ratio:16/9} .reel{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)} .reel__card{ position:relative;background:var(--ink-2);border:1px solid var(--chrome-5); overflow:hidden;cursor:pointer;aspect-ratio:16/10;display:flex;align-items:flex-end; transition:transform .25s ease,border-color .25s ease; } .reel__card:hover{transform:translateY(-4px);border-color:var(--pink-hot)} .reel__card::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%),linear-gradient(135deg,rgba(255,46,147,.35),rgba(20,20,24,.6)); } .reel__thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#1f0d18} .reel__thumb--01{background-image:radial-gradient(circle at 30% 40%,rgba(255,46,147,.5),transparent 55%),linear-gradient(135deg,#2a0a18,#0a0a0c)} .reel__thumb--02{background-image:radial-gradient(circle at 70% 50%,rgba(249,255,0,.25),transparent 60%),linear-gradient(135deg,#1a0a12,#0a0a0c)} .reel__thumb--03{background-image:radial-gradient(circle at 50% 60%,rgba(255,0,122,.5),transparent 55%),linear-gradient(135deg,#1d0815,#0a0a0c)} .reel__thumb--04{background-image:radial-gradient(circle at 20% 70%,rgba(207,211,218,.18),transparent 60%),linear-gradient(135deg,#231220,#0a0a0c)} .reel__thumb--05{background-image:radial-gradient(circle at 80% 30%,rgba(255,46,147,.4),transparent 55%),linear-gradient(135deg,#22091a,#0a0a0c)} .reel__play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3; width:64px;height:64px;border:2px solid var(--pink-hot);border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(10,10,12,.6);transition:all .22s ease; } .reel__play::after{ content:"";display:block;width:0;height:0; border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:14px solid var(--pink-hot); margin-left:4px; } .reel__card:hover .reel__play{background:var(--pink-hot);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 26px rgba(255,46,147,.6)} .reel__card:hover .reel__play::after{border-left-color:var(--ink)} .reel__meta{ position:relative;z-index:2;padding:18px 20px;width:100%; } .reel__tag{ display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700; background:var(--pink-hot);color:var(--ink);padding:3px 8px;margin-bottom:10px; } .reel__title{ font-family:var(--display);font-weight:800;font-size:clamp(18px,2vw,26px);line-height:1;text-transform:uppercase; color:var(--chrome-1);font-stretch:condensed;letter-spacing:-.01em; } .reel__sub{font-family:var(--mono);font-size:10.5px;color:var(--chrome-3);margin-top:6px;letter-spacing:.14em;text-transform:uppercase} @media (max-width:880px){ .reel-feat{grid-template-columns:1fr;gap:32px;align-items:start} .reel{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .reel{grid-template-columns:1fr} } /* ============================================================ SHOWS — UPCOMING Parent owns the grid columns; rows use subgrid so date / city / venue / status / cta all line up vertically across every row. ============================================================ */ .shows-up{ display:grid; grid-template-columns:140px 1.4fr 1.2fr auto auto; column-gap:24px; row-gap:0; } .show{ display:grid; grid-template-columns:subgrid; grid-column:1 / -1; align-items:center; padding:24px 0; border-bottom:1px solid var(--chrome-5); border-left:3px solid transparent; padding-left:14px; margin-left:-17px; position:relative; transition:background .2s ease,border-color .2s ease; } .show:hover{background:linear-gradient(90deg,rgba(255,46,147,.06),transparent 60%);border-left-color:var(--pink-hot)} .show:first-child{border-top:1px solid var(--chrome-5)} .show__date{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.85;font-stretch:condensed;color:var(--chrome-1)} .show__date b{display:block;font-size:clamp(40px,4.5vw,62px);color:var(--pink-hot);text-shadow:0 0 12px rgba(255,46,147,.35)} .show__date span{font-size:13px;font-family:var(--mono);color:var(--chrome-3);letter-spacing:.18em;text-transform:uppercase;font-weight:600;display:block;margin-top:4px;font-stretch:normal} .show__city{font-family:var(--display);font-weight:900;font-size:clamp(24px,3vw,38px);line-height:1;text-transform:uppercase;font-stretch:condensed;color:var(--chrome-1)} .show__city small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--pink-hot);letter-spacing:.22em;font-weight:600;margin-top:6px;font-stretch:normal} .show__venue{font-family:var(--body);font-size:14px;color:var(--chrome-2);line-height:1.4} .show__venue b{color:var(--chrome-1);font-weight:700;display:block;font-size:15px;margin-bottom:3px} .show__venue span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-3);display:block;margin-top:6px} .show__status{ font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700; padding:6px 10px;border:1px solid currentColor;color:var(--acid); justify-self:center; } .show__status--few{color:var(--pink-hot)} .show__status--sold{color:var(--chrome-4);border-style:dashed} .show__cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--chrome-1);padding:12px 16px;border:2px solid var(--chrome-3);transition:all .15s ease} .show__cta:hover{background:var(--pink-hot);border-color:var(--pink-hot);color:var(--ink)} .show__cta:hover .arrow{transform:translateX(3px)} .show__cta .arrow{transition:transform .2s ease} @media (max-width:920px){ .shows-up{display:block} .show{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto; gap:6px 18px; padding:20px 0 20px 14px; margin-left:-17px; } .show__date{grid-row:1/3;grid-column:1} .show__city{grid-row:1;grid-column:2} .show__venue{grid-row:2;grid-column:2} .show__status{grid-row:3;grid-column:1;justify-self:start;margin-top:4px} .show__cta{grid-row:3;grid-column:2;justify-self:start;margin-top:4px} } /* ============================================================ PAST SHOWS / GIGOGRAPHY ============================================================ */ .past{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;border-top:1px solid var(--chrome-5)} .past__row{ padding:18px 20px;border-bottom:1px solid var(--chrome-5);border-right:1px solid var(--chrome-5); display:flex;flex-direction:column;gap:6px;position:relative;background:var(--ink-2); transition:background .2s ease,transform .2s ease; } .past__row:hover{background:var(--ink-3);transform:translateY(-2px);z-index:2;box-shadow:0 8px 20px rgba(0,0,0,.4)} .past__date{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-hot);font-weight:700} .past__city{font-family:var(--display);font-weight:900;font-size:24px;line-height:.95;text-transform:uppercase;color:var(--chrome-1);font-stretch:condensed} .past__venue{font-family:var(--body);font-size:13px;color:var(--chrome-2);line-height:1.35} .past__country{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-4);margin-top:auto;padding-top:8px;border-top:1px dashed var(--chrome-5)} .past__more{ display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;margin-top:30px; border:2px dashed var(--chrome-4);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--chrome-3); transition:all .2s ease;cursor:pointer; } .past__more:hover{border-color:var(--pink-hot);color:var(--pink-hot);background:rgba(255,46,147,.04)} /* ─── Past-events teaser card (homepage) ─── */ .past-teaser{ display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,40px); border:2px solid var(--chrome-3);background:var(--ink-2); padding:clamp(20px,2.4vw,32px); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; align-items:center; } .past-teaser:hover{ transform:translate(-3px,-3px); border-color:var(--pink-hot); box-shadow:9px 9px 0 var(--ink),9px 9px 0 1px var(--pink-hot); } .past-teaser__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)} .past-teaser__poster{ aspect-ratio:3/4;background-size:cover;background-position:center;background-color:#1a1a1a; border:1px solid var(--chrome-5);transition:transform .3s ease,border-color .3s ease; } .past-teaser:hover .past-teaser__poster{border-color:var(--chrome-3)} .past-teaser__cta{display:flex;flex-direction:column;gap:14px} .past-teaser__cta small{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--pink-hot)} .past-teaser__cta h3{ font-family:var(--display);font-size:clamp(38px,4.4vw,64px);font-weight:900; text-transform:uppercase;font-stretch:condensed;line-height:.9;color:var(--chrome-1);letter-spacing:-.015em; } .past-teaser__cta h3 em{font-style:normal;color:var(--pink-hot)} .past-teaser__cta p{font-size:14px;line-height:1.55;color:var(--chrome-3);max-width:42ch} .past-teaser__cta .arrow{ font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700; color:var(--pink-hot);display:inline-flex;align-items:center;gap:8px; padding-top:14px;margin-top:auto;border-top:1px solid var(--chrome-5); transition:color .15s ease,transform .15s ease; } .past-teaser:hover .past-teaser__cta .arrow{transform:translateX(4px)} @media (max-width:880px){ .past-teaser{grid-template-columns:1fr;gap:24px} .past-teaser__strip{grid-template-columns:repeat(4,1fr)} } @media (max-width:560px){ .past-teaser__strip{grid-template-columns:repeat(2,1fr)} } /* ============================================================ GALLERY (masonry-ish placeholder) ============================================================ */ .gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,14px);grid-auto-rows:140px;grid-auto-flow:dense} .gframe{ position:relative;overflow:hidden;border:1px solid var(--chrome-5);background:var(--ink-2); transition:transform .25s ease,border-color .25s ease,z-index .25s; } .gframe:hover{transform:scale(1.02);border-color:var(--pink-hot);z-index:3} .gframe::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.7) 100%),linear-gradient(135deg,rgba(255,46,147,.2),rgba(20,20,24,.3)); pointer-events:none; } .gframe__caption{ position:absolute;left:10px;bottom:10px;z-index:2; font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-soft);font-weight:600; opacity:0;transition:opacity .2s ease; } .gframe:hover .gframe__caption{opacity:1} .gframe__pic{position:absolute;inset:0;background-size:cover;background-position:center} .gframe--01{grid-column:span 4;grid-row:span 3;background:radial-gradient(circle at 30% 40%,rgba(255,46,147,.35),transparent 60%),linear-gradient(135deg,#280a18,#0a0a0c)} .gframe--02{grid-column:span 4;grid-row:span 2;background:radial-gradient(circle at 60% 50%,rgba(249,255,0,.18),transparent 60%),linear-gradient(135deg,#1a0712,#0a0a0c)} .gframe--03{grid-column:span 4;grid-row:span 2;background:radial-gradient(circle at 50% 30%,rgba(255,0,122,.35),transparent 60%),linear-gradient(135deg,#1e0815,#0a0a0c)} .gframe--04{grid-column:span 3;grid-row:span 2;background:radial-gradient(circle at 70% 60%,rgba(207,211,218,.18),transparent 60%),linear-gradient(135deg,#1a0a14,#0a0a0c)} .gframe--05{grid-column:span 5;grid-row:span 2;background:radial-gradient(circle at 30% 70%,rgba(255,46,147,.3),transparent 60%),linear-gradient(135deg,#240a18,#0a0a0c)} .gframe--06{grid-column:span 4;grid-row:span 2;background:radial-gradient(circle at 60% 40%,rgba(249,255,0,.15),transparent 60%),linear-gradient(135deg,#1d0814,#0a0a0c)} .gframe--07{grid-column:span 4;grid-row:span 3;background:radial-gradient(circle at 40% 50%,rgba(255,46,147,.4),transparent 60%),linear-gradient(135deg,#290a1c,#0a0a0c)} .gframe--08{grid-column:span 4;grid-row:span 2;background:radial-gradient(circle at 60% 60%,rgba(255,0,122,.3),transparent 60%),linear-gradient(135deg,#1a0712,#0a0a0c)} .gframe--09{grid-column:span 4;grid-row:span 2;background:radial-gradient(circle at 50% 40%,rgba(207,211,218,.18),transparent 60%),linear-gradient(135deg,#1e0814,#0a0a0c)} @media (max-width:880px){ .gallery{grid-auto-rows:110px} .gframe{grid-column:span 6!important} .gframe--01,.gframe--07{grid-column:span 12!important} } /* ============================================================ PRESS / QUOTES BAR ============================================================ */ .press{ border-block:1px solid var(--line-cold);padding:clamp(50px,7vw,90px) 0; background:linear-gradient(180deg,var(--ink),var(--ink-2),var(--ink)); } .press__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)} .press__card{position:relative;padding:30px 26px;background:var(--ink-2);border:1px solid var(--chrome-5)} .press__card::before{content:"\201C";position:absolute;top:-12px;left:18px;font-family:var(--barbie);font-size:80px;line-height:1;color:var(--pink-hot);background:var(--ink);padding:0 10px} .press__quote{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;color:var(--chrome-1);text-transform:uppercase;font-stretch:condensed;letter-spacing:-.005em;padding-top:14px} .press__src{margin-top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-hot);font-weight:700} .press__stars{margin-top:10px;color:var(--acid);font-family:var(--mono);font-size:14px;letter-spacing:.16em} @media (max-width:880px){.press__grid{grid-template-columns:1fr}} /* ============================================================ BOOKING CTA ============================================================ */ .book{ position:relative;padding:clamp(50px,7vw,90px);background:var(--pink-hot);color:var(--ink); border:2px solid var(--ink);overflow:hidden; box-shadow:0 0 0 2px var(--pink-hot),12px 12px 0 var(--ink),12px 12px 0 2px var(--pink-hot); } .book::before{ content:"";position:absolute;inset:0; background:repeating-linear-gradient(135deg,transparent 0,transparent 16px,rgba(10,10,12,.06) 16px,rgba(10,10,12,.06) 17px); pointer-events:none; } .book__grid{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center;z-index:2} .book__title{font-family:var(--display);font-weight:900;font-size:clamp(48px,7vw,110px);line-height:.85;text-transform:uppercase;font-stretch:condensed;letter-spacing:-.02em} .book__title small{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.3em;font-weight:700;text-transform:uppercase;margin-bottom:14px;font-stretch:normal} .book__details{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:13px;letter-spacing:.06em} .book__details a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:var(--ink);color:var(--pink-mist);border:2px solid var(--ink);transition:all .15s ease} .book__details a:hover{background:var(--pink-mist);color:var(--ink);border-color:var(--ink)} .book__details a small{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink-hot);font-weight:700} .book__details a:hover small{color:var(--pink-deep)} .book__details a b{font-family:var(--display);font-size:22px;font-weight:800;text-transform:uppercase;font-stretch:condensed;line-height:1} @media (max-width:880px){.book__grid{grid-template-columns:1fr;gap:24px}} /* ============================================================ ENGLISH MODE ============================================================ */ #mode-english{display:none} body.english-mode #mode-english{display:block} body.english-mode #mode-comedy{display:none} body.english-mode{background:#120a10} body.english-mode::after{ background: radial-gradient(60% 50% at 18% 0%,rgba(255,46,147,.1),transparent 60%), radial-gradient(80% 60% at 100% 0%,rgba(255,182,213,.05),transparent 65%); } .eng-hero{padding:clamp(40px,7vw,90px) 0 clamp(40px,5vw,80px);position:relative;overflow:hidden} .eng-hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,60px);align-items:start} .eng-hero__card{margin-top:clamp(40px,7vw,90px)} .eng-hero__type h1{ font-family:var(--display);font-weight:900;line-height:.85;text-transform:uppercase;letter-spacing:-.015em; font-size:clamp(54px,9.2vw,125px);font-stretch:condensed;color:var(--chrome-1); } .eng-hero__type h1 em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .eng-hero__lead{margin-top:30px;font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:var(--chrome-2);max-width:560px} .eng-hero__lead b{color:var(--pink-hot);font-weight:700} .eng-hero__cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .eng-hero__card{ position:relative;padding:36px 30px;background:var(--ink-2);border:2px solid var(--pink-hot); box-shadow:0 0 0 1px var(--ink),10px 10px 0 var(--pink-blood),10px 10px 0 1px var(--ink); } .eng-hero__card h3{font-family:var(--display);font-size:32px;font-weight:900;text-transform:uppercase;font-stretch:condensed;line-height:1;color:var(--chrome-1)} .eng-hero__card h3 b{color:var(--pink-hot)} .eng-hero__card ul{margin-top:20px;display:flex;flex-direction:column;gap:14px;list-style:none} .eng-hero__card li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.5;color:var(--chrome-2)} .eng-hero__card li::before{content:"";flex:0 0 auto;margin-top:6px;width:8px;height:8px;background:var(--pink-hot);transform:rotate(45deg)} .eng-hero__card li b{color:var(--chrome-1);font-weight:700;display:block;margin-bottom:2px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase} @media (max-width:880px){.eng-hero__grid{grid-template-columns:1fr;gap:36px}} .svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)} .svc__card{ position:relative;padding:30px 26px;background:var(--ink-2);border:1px solid var(--chrome-5); display:flex;flex-direction:column;gap:16px;min-height:340px; transition:transform .25s ease,border-color .25s ease; } .svc__card:hover{transform:translateY(-6px);border-color:var(--pink-hot)} .svc__num{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;color:var(--pink-hot);font-weight:700;text-transform:uppercase} .svc__title{font-family:var(--display);font-size:34px;font-weight:900;text-transform:uppercase;font-stretch:condensed;line-height:.95;color:var(--chrome-1)} .svc__body{font-size:14.5px;line-height:1.55;color:var(--chrome-2);flex:1} .svc__price{padding-top:18px;border-top:1px dashed var(--chrome-4);display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left} .svc__price b{font-family:var(--display);font-size:30px;font-weight:900;text-transform:uppercase;color:var(--pink-hot);font-stretch:condensed;line-height:1} .svc__price span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--chrome-3)} @media (max-width:880px){.svc{grid-template-columns:1fr}} .method{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);counter-reset:m} .method__step{ padding:26px 22px;background:linear-gradient(180deg,var(--ink-2),var(--ink-3));border:1px solid var(--chrome-5); position:relative;counter-increment:m; } .method__step::before{ content:"0" counter(m);position:absolute;top:14px;right:18px; font-family:var(--display);font-size:60px;font-weight:900;font-stretch:condensed;line-height:1; color:var(--pink-hot);opacity:.22; } .method__step h4{font-family:var(--display);font-size:22px;font-weight:800;text-transform:uppercase;font-stretch:condensed;line-height:1;color:var(--chrome-1);margin-bottom:10px} .method__step p{font-size:13.5px;line-height:1.55;color:var(--chrome-2)} @media (max-width:880px){.method{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.method{grid-template-columns:1fr}} .eng-quote{ margin-top:60px;padding:50px clamp(28px,5vw,60px);border:2px solid var(--pink-hot);background:var(--ink-2); display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center; box-shadow:8px 8px 0 var(--pink-blood),8px 8px 0 1px var(--ink); } .eng-quote__avatar{ width:80px;height:80px;border-radius:50%;background:var(--pink-grad); display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:30px;font-weight:900;color:var(--ink);font-stretch:condensed; box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--pink-hot); } .eng-quote__body p{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:800;text-transform:uppercase;font-stretch:condensed;line-height:1.05;color:var(--chrome-1);letter-spacing:-.005em} .eng-quote__body cite{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-hot);font-weight:700;font-style:normal;margin-top:14px;display:block} @media (max-width:680px){.eng-quote{grid-template-columns:1fr;text-align:center}.eng-quote__avatar{margin:0 auto}} .eng-contact{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px); padding:clamp(40px,5vw,70px) clamp(30px,4vw,60px); background:var(--ink-2);border:1px solid var(--chrome-5);position:relative; } .eng-contact h3{font-family:var(--display);font-size:clamp(40px,5vw,72px);font-weight:900;text-transform:uppercase;font-stretch:condensed;line-height:.9;color:var(--chrome-1)} .eng-contact h3 em{font-style:normal;color:var(--pink-hot)} .eng-contact__lead{margin-top:18px;font-size:15.5px;line-height:1.6;color:var(--chrome-2)} .eng-contact__details{margin-top:26px;display:flex;flex-direction:column;gap:14px} .eng-contact__detail{display:flex;gap:14px;align-items:flex-start;font-size:14px;color:var(--chrome-2);padding-bottom:14px;border-bottom:1px dashed var(--chrome-4)} .eng-contact__detail b{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-hot);font-weight:700;flex:0 0 80px;padding-top:2px} .eng-contact__form{display:flex;flex-direction:column;gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-3);font-weight:600} .field input,.field select,.field textarea{ background:var(--ink);color:var(--chrome-1);padding:13px 14px;border:1px solid var(--chrome-4); font-family:var(--body);font-size:14.5px;transition:border-color .2s ease,box-shadow .2s ease; font-feature-settings:"ss01"; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink-hot);box-shadow:0 0 0 1px var(--pink-hot),0 0 18px rgba(255,46,147,.18)} .field textarea{min-height:120px;resize:vertical;font-family:var(--body)} .field select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:40px;cursor:pointer; /* color-scheme tells the browser to draw the native option panel with dark chrome (no more white/blue OS default). Works on Chromium + Firefox. */ color-scheme:dark; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px; } .field select::-ms-expand{display:none} .field select option{background:var(--ink);color:var(--chrome-1)} /* English mode uses gold instead of pink — swap the chevron + selected option accent. Data-URL SVGs can't read CSS vars, so the gold color (#f5c518) is hard-coded. */ body.english-mode .field select{ background-image:url("data:image/svg+xml;utf8,"); accent-color:#f5c518; } body.english-mode .field select option:checked{color:#f5c518} .field--inline{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* min-width:0 on form controls in grids — Chromium otherwise honours the intrinsic min-content width of inputs/textareas and the field--inline pair overflows its 1fr 1fr container, which then horizontally overflows the page. */ .field input,.field select,.field textarea{min-width:0;max-width:100%} @media (max-width:880px){.eng-contact{grid-template-columns:1fr}} /* Phone — paired fields stack, the form's outer padding shrinks, and the contact-detail rows wrap their label/value vertically. Without this the contact form caused the whole page to scroll sideways. */ @media (max-width:560px){ .eng-contact{padding:24px 18px;gap:30px} .field--inline{grid-template-columns:1fr} .eng-contact__detail{flex-wrap:wrap;gap:4px} .eng-contact__detail b{flex:0 0 100%} } /* ============================================================ FOOTER ============================================================ */ .foot{padding:60px 0 30px;border-top:1px solid var(--line-cold);background:var(--ink);position:relative;margin-top:80px} .foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-bottom:50px;border-bottom:1px solid var(--line-cold)} .foot__brand{display:flex;flex-direction:column;gap:18px} .foot__brand .brand{font-size:32px} .foot__brand p{font-size:14px;color:var(--chrome-3);line-height:1.6;max-width:380px} .foot__col h5{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink-hot);font-weight:700;margin-bottom:18px} .foot__col ul{list-style:none;display:flex;flex-direction:column;gap:12px} .foot__col a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--chrome-2);transition:color .15s ease;display:inline-flex;align-items:center;gap:8px} .foot__col a:hover{color:var(--pink-hot)} .foot__col a::before{content:"\2192";color:var(--chrome-4);font-family:var(--mono)} .foot__col a:hover::before{color:var(--pink-hot)} .foot__news{display:flex;flex-direction:column;gap:12px;margin-top:6px} .foot__news label{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink-hot);font-weight:700} .foot__news__row{display:flex;border:1px solid var(--chrome-4);transition:border-color .2s ease} .foot__news__row:focus-within{border-color:var(--pink-hot)} .foot__news input{flex:1;background:var(--ink-2);color:var(--chrome-1);padding:13px 14px;border:none;font-family:var(--body);font-size:14px} .foot__news input:focus{outline:none} .foot__news button{background:var(--pink-hot);color:var(--ink);padding:0 18px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;transition:background .15s ease} .foot__news button:hover{background:var(--acid);color:var(--ink)} .foot__news small{font-family:var(--mono);font-size:10px;color:var(--chrome-4);letter-spacing:.08em} .foot__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-4)} .foot__bottom > span{white-space:nowrap} .foot__bottom b{color:var(--pink-hot)} .foot__bottom a{color:var(--chrome-3);transition:color .15s ease} .foot__bottom a:hover{color:var(--pink-hot)} @media (max-width:880px){.foot__top{grid-template-columns:1fr;gap:36px}} /* ============================================================ MODE-SWITCH SCANLINE EFFECT ============================================================ */ .scan{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent 0%,transparent 49%,rgba(255,46,147,.8) 50%,transparent 51%,transparent 100%);transition:opacity .12s ease} .scan.fire{animation:scan .55s cubic-bezier(.2,.7,.2,1) forwards} @keyframes scan{ 0%{opacity:0;background-position:0 -100vh} 10%{opacity:1} 100%{opacity:0;background-position:0 100vh} } /* ============================================================ GENERIC UTILS / ENTRANCE ANIMATIONS ============================================================ */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease} .reveal.in{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:0.001s!important;animation-iteration-count:1!important;transition-duration:0.001s!important} } /* ============================================================ ============================================================ BIO PAGE (bio.html) ============================================================ ============================================================ */ /* full-bleed hero with editorial portrait left, name+tagline right */ .bp-hero{position:relative;padding:clamp(60px,8vw,120px) 0 clamp(50px,7vw,90px);overflow:hidden} .bp-hero__grid{display:grid;grid-template-columns:.95fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:start} .bp-hero__portrait{ position:relative;aspect-ratio:9/14;width:100%;max-width:520px; background:var(--ink-2);border:2px solid var(--chrome-3); background-image:url("bio-hero.jpg");background-size:cover;background-position:center 20%;background-color:#1a1a1a; box-shadow:0 0 0 1px var(--ink),14px 14px 0 var(--pink-hot),14px 14px 0 1px var(--ink); filter:contrast(1.04); } .bp-hero__portrait::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,transparent 60%,rgba(0,0,0,.55) 100%), repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.04) 3px,rgba(255,255,255,.04) 4px); } .bp-hero__portrait::after{ content:"DOSSIER · #001";position:absolute;top:14px;left:14px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--pink-hot);background:var(--ink);padding:4px 8px;border:1px solid var(--pink-hot);font-weight:700; } .bp-hero__portrait .corner{position:absolute;width:18px;height:18px;border:2px solid var(--pink-hot);z-index:5} .bp-hero__portrait .corner.tl{top:8px;left:8px;border-right:none;border-bottom:none} .bp-hero__portrait .corner.tr{top:8px;right:8px;border-left:none;border-bottom:none} .bp-hero__portrait .corner.bl{bottom:8px;left:8px;border-right:none;border-top:none} .bp-hero__portrait .corner.br{bottom:8px;right:8px;border-left:none;border-top:none} .bp-hero__portrait .caption{ position:absolute;left:14px;right:14px;bottom:14px;z-index:5; display:flex;justify-content:space-between;gap:10px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-soft); } .bp-hero__portrait .caption small{display:block;color:var(--chrome-2);font-size:9px;margin-bottom:3px} .bp-hero__portrait .caption b{color:var(--pink-hot);font-weight:700} .bp-hero__type{position:relative;z-index:3} .bp-hero__eyebrow{ display:flex;align-items:center;gap:14px; font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-hot); margin-bottom:26px; } .bp-hero__eyebrow::before{content:"";width:54px;height:2px;background:var(--pink-hot);box-shadow:0 0 8px var(--pink-hot)} .bp-hero__type h1{ font-family:var(--display);font-weight:900;line-height:.84;letter-spacing:-.02em;text-transform:uppercase; font-size:clamp(64px,11vw,170px);font-stretch:condensed;color:var(--chrome-1); } .bp-hero__type h1 em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,46,147,.45))} .bp-hero__type h1 small{display:block;font-family:var(--mono);font-size:14px;letter-spacing:.28em;color:var(--chrome-3);text-transform:uppercase;margin-bottom:16px;font-stretch:normal;font-weight:600;line-height:1} .bp-hero__tag{ margin-top:30px;font-family:var(--display);font-weight:800;font-size:clamp(20px,2.4vw,30px); line-height:1.1;text-transform:uppercase;color:var(--chrome-2);font-stretch:condensed;max-width:560px; } .bp-hero__tag em{font-style:normal;color:var(--pink-hot)} .bp-hero__stats{ margin-top:36px;display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,3vw,40px);align-items:end; } .bp-stat{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--pink-hot);padding-left:14px} .bp-stat dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-3);font-weight:600} .bp-stat dd{font-family:var(--display);font-size:clamp(36px,4vw,54px);font-weight:900;color:var(--chrome-1);font-stretch:condensed;line-height:.9} .bp-stat dd em{font-style:normal;color:var(--pink-hot)} @media (max-width:920px){ .bp-hero__grid{grid-template-columns:1fr;gap:50px} .bp-hero__portrait{max-width:440px;margin:0 auto;order:-1} .bp-hero__stats{grid-template-columns:repeat(2,1fr);gap:20px} } /* chapter block: number + heading + body paragraphs, with optional side image */ .bp-chapter{ display:grid;grid-template-columns:140px 1fr;gap:clamp(20px,4vw,60px); padding:clamp(50px,6vw,90px) 0;border-top:1px solid var(--chrome-5); align-items:start; } .bp-chapter__num{ font-family:var(--display);font-weight:900;font-stretch:condensed; font-size:clamp(60px,8vw,120px);line-height:.85;color:var(--pink-hot); position:sticky;top:90px;align-self:start; text-shadow:0 0 18px rgba(255,46,147,.4); } .bp-chapter__num small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--chrome-3);text-transform:uppercase;font-weight:600;margin-bottom:10px;font-stretch:normal;line-height:1} .bp-chapter__body{display:flex;flex-direction:column;gap:22px;max-width:780px} .bp-chapter__heading{ font-family:var(--display);font-weight:900;text-transform:uppercase;font-stretch:condensed;line-height:.9;letter-spacing:-.015em; font-size:clamp(38px,5vw,70px);color:var(--chrome-1);margin-bottom:6px; } .bp-chapter__heading em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .bp-chapter__body p{font-size:17px;line-height:1.7;color:var(--chrome-2)} .bp-chapter__body p b{color:var(--chrome-1);font-weight:600} .bp-chapter__body p em{color:var(--pink-hot);font-style:normal;font-weight:600} .bp-chapter__pull{ margin:20px 0;padding:20px 24px;border-left:3px solid var(--acid);background:rgba(249,255,0,.04); font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,30px); line-height:1.15;text-transform:uppercase;font-stretch:condensed;color:var(--chrome-1); } .bp-chapter__pull em{font-style:normal;color:var(--acid)} .bp-chapter__image{ margin-top:12px;position:relative;overflow:hidden;border:1px solid var(--chrome-5); aspect-ratio:16/10;background-size:cover;background-position:center; box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--chrome-5); } .bp-chapter__image::after{ content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px); } .bp-chapter__image small{ position:absolute;left:10px;bottom:10px;z-index:2; font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-soft); background:rgba(10,10,12,.7);padding:4px 8px; } .bp-chapter__image--austria{background-image:url("bio-austria.jpg")} .bp-chapter__image--stage{background-image:url("bio-stage.jpg");background-position:center 30%} .bp-chapter__image--flag{background-image:url("bio-flag.jpg");background-position:center 12%} @media (max-width:880px){ .bp-chapter{grid-template-columns:1fr;gap:20px} .bp-chapter__num{position:static;font-size:60px} } /* Timeline section — 2-col layout with sticky heading on left + vertical timeline on right */ .bp-timeline-wrap{ display:grid; grid-template-columns:minmax(280px,.85fr) 1.4fr; gap:clamp(30px,5vw,72px); align-items:start; } .bp-timeline-head{ display:flex;flex-direction:column;gap:18px; position:sticky;top:90px; } .bp-timeline-head .sect__meta{align-items:flex-start;text-align:left} .bp-timeline-head .sect__title{margin:0} @media (max-width:880px){ .bp-timeline-wrap{grid-template-columns:1fr;gap:32px} .bp-timeline-head{position:static} } /* Vertical timeline — connecting rail down the left, dot nodes per milestone */ .bp-timeline{ list-style:none;padding:0;margin:0; position:relative;padding-left:38px; } .bp-timeline::before{ content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px; background:linear-gradient(180deg,var(--pink-hot) 0%,var(--pink-deep) 60%,var(--pink-blood) 100%); box-shadow:0 0 12px rgba(255,46,147,.45); } .bp-timeline__node{ padding:0 0 30px 0;position:relative;display:flex;flex-direction:column;gap:6px; border:none;background:transparent; } .bp-timeline__node:last-child{padding-bottom:0} .bp-timeline__node::before{ content:"";position:absolute;left:-38px;top:10px;width:14px;height:14px;border-radius:50%; background:var(--pink-hot);border:3px solid var(--ink); box-shadow:0 0 0 2px var(--pink-hot),0 0 14px rgba(255,46,147,.7); } .bp-timeline__node:hover::before{transform:scale(1.15);transition:transform .2s ease} .bp-timeline__year{ font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700; color:var(--pink-hot);line-height:1; } .bp-timeline__milestone{ font-family:var(--display);font-weight:900;text-transform:uppercase;font-stretch:condensed; font-size:clamp(26px,3vw,38px);line-height:.95;color:var(--chrome-1);letter-spacing:-.005em; } .bp-timeline__note{font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--chrome-3);letter-spacing:.04em;margin-top:2px} /* English-mode override: rail glow + node colors swap with the gold palette automatically via var(--pink-hot) */ body.english-mode .bp-timeline::before{box-shadow:0 0 12px rgba(245,197,24,.5)} body.english-mode .bp-timeline__node::before{box-shadow:0 0 0 2px var(--pink-hot),0 0 14px rgba(245,197,24,.75)} /* photo wall — full-bleed scattered grid of all 4 portraits */ .bp-wall{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,16px);grid-auto-rows:120px;grid-auto-flow:dense} .bp-tile{position:relative;overflow:hidden;border:1px solid var(--chrome-5);background:var(--ink-2);transition:transform .25s ease,border-color .25s ease,z-index .25s} .bp-tile:hover{transform:scale(1.015);border-color:var(--pink-hot);z-index:3} .bp-tile__pic{position:absolute;inset:0;background-size:cover;background-position:center} .bp-tile::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6) 100%)} .bp-tile__caption{ position:absolute;left:12px;bottom:12px;right:12px;z-index:2;display:flex;justify-content:space-between;gap:10px; font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-soft);font-weight:600; } .bp-tile__caption b{color:var(--acid);font-weight:700} .bp-tile--1{grid-column:span 5;grid-row:span 4;background-image:url("bio.jpg");background-size:cover;background-position:center 20%} .bp-tile--2{grid-column:span 4;grid-row:span 3;background-image:url("bio-stage.jpg");background-size:cover;background-position:center 30%} .bp-tile--3{grid-column:span 3;grid-row:span 3;background-image:url("bio-austria.jpg");background-size:cover;background-position:center} .bp-tile--4{grid-column:span 4;grid-row:span 3;background-image:url("bio-flag.jpg");background-size:cover;background-position:center 35%} .bp-tile--5{grid-column:span 3;grid-row:span 4;background-image:url("hero.jpg");background-size:cover;background-position:center 35%;background-color:#a9c5d2} .bp-tile--1 .bp-tile__pic,.bp-tile--2 .bp-tile__pic,.bp-tile--3 .bp-tile__pic,.bp-tile--4 .bp-tile__pic,.bp-tile--5 .bp-tile__pic{display:none} @media (max-width:880px){ .bp-wall{grid-auto-rows:110px} .bp-tile{grid-column:span 6!important} .bp-tile--1{grid-column:span 12!important;grid-row:span 3} } /* press strip on bio (reuses .press but tweaks) */ .bp-press{padding:clamp(50px,7vw,90px) 0;background:linear-gradient(180deg,var(--ink),var(--ink-2),var(--ink));border-block:1px solid var(--line-cold)} /* back-to-shows CTA — split between catch-her-live and EPK */ .bp-cta{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px); padding:clamp(40px,6vw,90px) 0; } .bp-cta__card{ position:relative;padding:clamp(36px,4vw,60px);border:2px solid currentColor; display:flex;flex-direction:column;gap:18px;justify-content:space-between;min-height:280px; transition:transform .2s ease,box-shadow .2s ease; } .bp-cta__card--pink{background:var(--pink-hot);color:var(--ink);box-shadow:8px 8px 0 var(--ink),8px 8px 0 2px var(--pink-hot)} .bp-cta__card--ghost{background:var(--ink-2);color:var(--chrome-1);box-shadow:8px 8px 0 var(--chrome-5)} .bp-cta__card:hover{transform:translate(-3px,-3px)} .bp-cta__card--pink:hover{box-shadow:11px 11px 0 var(--ink),11px 11px 0 2px var(--pink-hot)} .bp-cta__card--ghost:hover{box-shadow:11px 11px 0 var(--chrome-5);border-color:var(--pink-hot);color:var(--chrome-1)} .bp-cta__card small{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;opacity:.8} .bp-cta__card h3{font-family:var(--display);font-weight:900;text-transform:uppercase;font-stretch:condensed;line-height:.9;font-size:clamp(36px,5vw,72px);letter-spacing:-.015em} .bp-cta__card h3 em{font-style:normal;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px} .bp-cta__card .arrow{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.05em;display:inline-flex;align-items:center;gap:10px} @media (max-width:760px){.bp-cta{grid-template-columns:1fr}} /* ============================================================ ENGLISH MODE — FULL PALETTE SWAP (pink family → editorial gold) The pink/yellow accent roles invert: yellow is dominant, pink accents. ============================================================ */ /* Variables mirrored on AND so the scrollbar (which lives at the document root) and the page content both see the gold palette. */ html.english-mode, body.english-mode{ --pink-hot: #f5c518; --pink-deep: #c89d10; --pink-blood: #6b520a; --pink-soft: #fff1a0; --pink-mist: #fffae0; --pink-grad: linear-gradient(180deg,#fff1a0 0%,#f5c518 38%,#a07f0a 78%,#4a3704 100%); /* Role-reverse the accent: comedy uses acid-yellow as accent on pink; english uses hot-pink as accent on gold. */ --acid: #ff2e93; --acid-2: #c4005f; --line: rgba(245,197,24,.22); } body.english-mode{ /* Slightly warmer dark for editorial mood (instead of the pink-tinted dark) */ background:#100d05; } /* Ambient atmosphere — was magenta radial glow, now warm gold */ body.english-mode::after{ background: radial-gradient(60% 50% at 18% 0%,rgba(245,197,24,.16),transparent 60%), radial-gradient(70% 50% at 100% 12%,rgba(255,255,255,.04),transparent 60%), radial-gradient(80% 60% at 50% 100%,rgba(245,197,24,.10),transparent 65%); } /* Scan-line transition flash matches the destination palette */ body.english-mode .scan{ background:linear-gradient(180deg,transparent 0%,transparent 49%,rgba(245,197,24,.85) 50%,transparent 51%,transparent 100%); } /* Brand mark — gold halo + ring instead of pink */ body.english-mode .brand__mark{ background:radial-gradient(circle at 50% 50%,rgba(245,197,24,.4),transparent 70%); filter:drop-shadow(0 0 10px rgba(245,197,24,.55)); } /* Mode toggle — gold glow on the slider + the box */ body.english-mode .mode-toggle{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(245,197,24,.28); } body.english-mode .mode-toggle__slider{ box-shadow:0 0 18px rgba(245,197,24,.75),inset 0 1px 0 rgba(255,255,255,.4); } /* HUD readout text & dot pulse — the hardcoded pink box-shadow gets a gold version */ body.english-mode .hud__dot{box-shadow:0 0 6px rgba(245,197,24,.85)} /* Hero eyebrow underline glow (the ::before bar) */ body.english-mode .bp-hero__eyebrow::before{box-shadow:0 0 8px rgba(245,197,24,.55)} /* Section title underline glow */ body.english-mode .sect__title small::before{box-shadow:0 0 6px rgba(245,197,24,.55)} /* Hero h1 .l2 — uses pink-grad which now points to gold-grad; the drop-shadow needs gold too */ body.english-mode .hero h1 .l2{filter:drop-shadow(0 0 14px rgba(245,197,24,.45))} /* Ticker — pink text shadow becomes gold */ body.english-mode .ticker{box-shadow:inset 0 0 30px rgba(245,197,24,.18)} body.english-mode .ticker__item b{text-shadow:0 0 14px rgba(245,197,24,.6)} /* Show date glow */ body.english-mode .show__date b{text-shadow:0 0 12px rgba(245,197,24,.35)} /* Booking CTA — outer ring shadow */ body.english-mode .book{ box-shadow:0 0 0 2px var(--pink-hot),12px 12px 0 var(--ink),12px 12px 0 2px var(--pink-hot); } /* Buttons — pink shadow swap */ body.english-mode .btn{box-shadow:5px 5px 0 var(--ink),5px 5px 0 1px var(--pink-hot)} body.english-mode .btn:hover{box-shadow:7px 7px 0 var(--ink),7px 7px 0 1px var(--pink-hot)} /* Form focus glow */ body.english-mode .field input:focus, body.english-mode .field select:focus, body.english-mode .field textarea:focus{ box-shadow:0 0 0 1px var(--pink-hot),0 0 18px rgba(245,197,24,.18); } /* Countdown inner glow */ body.english-mode .countdown{box-shadow:0 0 0 1px var(--ink),8px 8px 0 var(--chrome-5),inset 0 0 26px rgba(245,197,24,.14)} /* Hero portrait inset gradient — uses hardcoded magenta tints, swap to gold */ body.english-mode .portrait::before{ background: linear-gradient(135deg,rgba(245,197,24,.32),transparent 50%), linear-gradient(45deg,rgba(207,211,218,.18),transparent 60%), repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px); } /* Reticle around the portrait — pink halo → gold halo */ body.english-mode .portrait__reticle{box-shadow:0 0 14px rgba(245,197,24,.65),inset 0 0 14px rgba(245,197,24,.18)} body.english-mode .portrait__reticle::before, body.english-mode .portrait__reticle::after{box-shadow:0 0 6px rgba(245,197,24,.7)} /* English-press testimonial pull-quote background tint */ body.english-mode .bp-chapter__pull{background:rgba(245,197,24,.05)} /* About hero quotation marks */ body.english-mode .about__quote::before, body.english-mode .about__quote::after{opacity:.75} /* Past show hover stripe */ body.english-mode .show:hover{background:linear-gradient(90deg,rgba(245,197,24,.06),transparent 60%)} /* ============================================================ BIO PAGE — ENGLISH MODE specific ============================================================ */ /* Hero portrait swaps to the warmer editorial photo */ body.english-mode .bp-hero__portrait{ background-image:url("bio.jpg"); background-position:center 18%; box-shadow:0 0 0 1px var(--ink),14px 14px 0 var(--pink-blood),14px 14px 0 1px var(--ink); } body.english-mode .bp-hero__portrait::after{content:"DOSSIER · #002 · TEACHER"} /* Chapter numbers glow gold + match palette */ body.english-mode .bp-chapter__num{ color:var(--pink-soft); text-shadow:0 0 22px rgba(255,241,160,.55); } /* Pull-quote in english bio uses the new gold ribbon (border via var, bg via override) */ body.english-mode .bp-chapter__pull{ border-left-color:var(--pink-hot); } body.english-mode .bp-chapter__pull em{color:var(--pink-hot)} /* Inline cross-link styling in chapter body text */ body.english-mode .bp-chapter__body p em a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} /* ============================================================ ============================================================ PAST EVENTS PAGE (past-events.html) ============================================================ ============================================================ */ .pe-hero{position:relative;padding:clamp(40px,7vw,90px) 0 clamp(30px,4vw,60px)} .pe-hero__crumb{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--chrome-3);margin-bottom:30px;font-weight:600} .pe-hero__crumb a{color:var(--pink-hot);transition:color .15s ease} .pe-hero__crumb a:hover{color:var(--chrome-1)} .pe-hero__crumb span{margin:0 8px;color:var(--chrome-4)} .pe-hero__title{ font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.85;letter-spacing:-.02em; font-size:clamp(76px,12vw,200px);font-stretch:condensed;color:var(--chrome-1); display:flex;flex-direction:column; } .pe-hero__title small{ display:flex;align-items:center;gap:14px; font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;font-stretch:normal; color:var(--pink-hot);margin-bottom:20px;line-height:1; } .pe-hero__title small::before{content:"";width:54px;height:2px;background:var(--pink-hot);box-shadow:0 0 8px var(--pink-hot)} .pe-hero__title em{font-style:normal;background:var(--pink-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(255,46,147,.45))} .pe-hero__lead{margin-top:28px;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--chrome-2);max-width:680px} .pe-hero__stats{margin-top:36px;display:grid;grid-template-columns:repeat(4,auto);gap:clamp(16px,3vw,40px);align-items:end;justify-content:start} @media (max-width:760px){.pe-hero__stats{grid-template-columns:repeat(2,1fr)}} /* ─── Sticky filter bar ─── */ .pe-filters{ position:sticky;top:69px;z-index:40; background:rgba(10,10,12,.88);backdrop-filter:blur(10px) saturate(1.3); border-block:1px solid var(--line); margin-top:20px; } body.english-mode .pe-filters{background:rgba(16,13,5,.88)} .pe-filters__in{display:flex;align-items:center;gap:8px;padding:14px var(--gutter);flex-wrap:wrap} .pe-filters__label{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--chrome-3);font-weight:700;margin-right:4px} .pe-filters__sep{width:1px;height:18px;background:var(--chrome-5);margin:0 6px} .pe-filters__break{display:none} @media (max-width:880px){.pe-filters{top:64px}.pe-filters__in{padding:10px var(--gutter);gap:6px}} /* Phone — three explicit rows: [All · Future] / [years] / [tours]. The two break spans become zero-height full-width flex items that force wrap. */ @media (max-width:560px){ /* Sticky offset matches the taller 2-row header on phone so the filter bar locks right below it (was inheriting top:64px from the 880px breakpoint, which is shorter than the phone header and leaves the filter floating). */ .pe-filters{top:100px} .pe-filters__in{justify-content:center;gap:6px 8px} .pe-filters__label{display:none} .pe-filters__break,.pe-filters__sep{flex-basis:100%;width:auto;height:0;background:none;margin:0;display:block} /* "Archive · Every poster, every venue" eyebrow above the page title — cut on phone, the page title alone is enough context. */ .pe-hero__title small{display:none} } .pe-chip{ font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700; padding:10px 14px;min-height:40px;border:1px solid var(--chrome-4);background:transparent;color:var(--chrome-2); transition:all .18s ease;cursor:pointer;display:inline-flex;align-items:center; } .pe-chip:focus-visible{outline:2px solid var(--pink-hot);outline-offset:2px} .pe-chip:hover{border-color:var(--pink-hot);color:var(--pink-hot)} .pe-chip.is-active{background:var(--pink-hot);color:var(--ink);border-color:var(--pink-hot);box-shadow:0 0 14px rgba(255,46,147,.35)} body.english-mode .pe-chip.is-active{box-shadow:0 0 14px rgba(245,197,24,.45)} .pe-chip--tour{border-style:dashed} .pe-chip--tour.is-active{border-style:solid} /* ─── Year separator ─── */ .pe-year{ grid-column:1 / -1; font-family:var(--display);font-weight:900;text-transform:uppercase;font-stretch:condensed; font-size:clamp(40px,6vw,84px);line-height:.9; color:var(--pink-hot);text-shadow:0 0 22px rgba(255,46,147,.4); padding:clamp(36px,5vw,72px) 0 clamp(18px,2vw,28px); border-bottom:1px solid var(--chrome-5); margin-bottom:8px; letter-spacing:-.01em; } .pe-year:first-child{padding-top:clamp(24px,3vw,40px)} body.english-mode .pe-year{text-shadow:0 0 22px rgba(245,197,24,.45)} /* ─── Poster wall ─── */ .pe-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(14px,1.8vw,24px); align-items:start; /* Reserve enough room that the sticky filter bar can always anchor at the top of the viewport — otherwise a filter with 1 result (e.g. Future) leaves the page too short to scroll up to. */ min-height:calc(100vh - 180px); } @media (max-width:560px){ .pe-grid{grid-template-columns:repeat(2,1fr);gap:10px} } .pe-poster{ position:relative;display:block;width:100%; aspect-ratio:3/4;background:var(--ink-2); border:1px solid var(--chrome-5);overflow:hidden;cursor:pointer;padding:0; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,z-index 0s .25s; } .pe-poster[hidden]{display:none} .pe-poster--wide{aspect-ratio:4/3;grid-column:span 2} @media (max-width:560px){.pe-poster--wide{grid-column:span 2}} .pe-poster:hover{ transform:translateY(-4px); border-color:var(--pink-hot); box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px var(--pink-hot); z-index:2;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,z-index 0s; } .pe-poster__img{ position:absolute;inset:0; background-size:cover;background-position:center;background-color:#1a1a1a; transition:transform .4s ease,filter .25s ease; filter:saturate(.95); } .pe-poster:hover .pe-poster__img{transform:scale(1.04);filter:saturate(1.05)} .pe-poster__overlay{ position:absolute;inset:auto 0 0 0;z-index:2; display:flex;flex-direction:column;gap:2px; padding:14px 14px 12px; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.85) 70%); transform:translateY(20%);opacity:0; transition:transform .25s ease,opacity .25s ease; color:var(--chrome-1);text-align:left; } .pe-poster:hover .pe-poster__overlay{transform:translateY(0);opacity:1} .pe-poster__date{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-hot);font-weight:700;line-height:1.3} .pe-poster__venue{font-family:var(--display);font-weight:800;font-size:18px;line-height:1;text-transform:uppercase;font-stretch:condensed;color:var(--chrome-1);margin-top:4px} .pe-poster__city{font-family:var(--mono);font-size:10.5px;color:var(--chrome-2);letter-spacing:.06em;margin-top:3px} .pe-poster__badge{ position:absolute;top:10px;left:10px;z-index:3; font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;font-weight:700; padding:4px 8px;background:var(--ink);color:var(--acid);border:1px solid var(--acid); } body.english-mode .pe-poster__badge{color:var(--pink-hot);border-color:var(--pink-hot)} .pe-poster__badge--thanksgiving{color:var(--pink-soft);border-color:var(--pink-soft)} .pe-poster__badge--illuminati{color:var(--pink-hot);border-color:var(--pink-hot)} .pe-empty{ text-align:center;padding:80px 20px; font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-3); } /* ─── Lightbox ─── */ .pe-lightbox{ position:fixed;inset:0;z-index:200; background:rgba(5,5,8,.94); display:flex;align-items:center;justify-content:center; padding:60px 80px; animation:lbFade .25s ease; } .pe-lightbox[hidden]{display:none} @keyframes lbFade{from{opacity:0}to{opacity:1}} .pe-lightbox__figure{ display:flex;flex-direction:column;align-items:center;gap:20px; max-width:100%;max-height:100%; } .pe-lightbox img{max-width:min(900px,90vw);max-height:78vh;width:auto;height:auto;display:block;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px var(--chrome-4)} .pe-lightbox__caption{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-2)} .pe-lightbox__date{color:var(--pink-hot);font-weight:700} .pe-lightbox__title{font-family:var(--display);font-size:24px;font-weight:900;font-stretch:condensed;color:var(--chrome-1);letter-spacing:.01em} .pe-lightbox__sub{color:var(--chrome-3)} .pe-lightbox__close,.pe-lightbox__nav{ position:absolute;background:transparent;border:1px solid var(--chrome-4);color:var(--chrome-2); width:48px;height:48px;display:flex;align-items:center;justify-content:center; font-size:24px;font-family:var(--mono);line-height:1;cursor:pointer; transition:all .15s ease; } .pe-lightbox__close:hover,.pe-lightbox__nav:hover{border-color:var(--pink-hot);color:var(--pink-hot)} .pe-lightbox__close{top:24px;right:24px;font-size:28px} .pe-lightbox__nav{top:50%;transform:translateY(-50%);font-size:32px} .pe-lightbox__nav--prev{left:24px} .pe-lightbox__nav--next{right:24px} @media (max-width:680px){ .pe-lightbox{padding:60px 8px} .pe-lightbox__nav,.pe-lightbox__close{width:48px;height:48px;font-size:26px} .pe-lightbox__nav--prev{left:8px} .pe-lightbox__nav--next{right:8px} .pe-lightbox__close{top:12px;right:12px} .pe-lightbox img{max-width:96vw;max-height:70vh} .pe-lightbox__title{font-size:18px} }