@font-face{ font-family:'DM Serif Display'; src:url(../assets/fonts/dm-serif-display.woff2) format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Bricolage Grotesque'; src:url(../assets/fonts/bricolage-grotesque.woff2) format('woff2'); font-weight:200 800; font-style:normal; font-display:swap; } /* ========================================================================== Josh Nichols — joshnichols.me Two crafts, one instinct: a stage voice (Bodoni Moda, brass, velvet) and a system voice (Bricolage Grotesque, signal teal) on a shared night. Every page is themed by one class on : theme-hub | theme-stage | theme-system. No inline styles anywhere, so the CSP can forbid them. ========================================================================== */ :root{ --night:#101316; --surface:#171b1f; --surface-2:#1f252a; --paper:#f2ecdf; --paper-2:#cdc6b6; --muted:#8f979d; --brass:#e4b24c; --brass-2:#f6d78f; --velvet:#6f1a2a; --velvet-2:#a33448; --signal:#34d3be; --signal-2:#9af2e5; --line:rgba(242,236,223,.14); --line-2:rgba(242,236,223,.08); --line-strong:rgba(242,236,223,.46); --card:var(--brass); --bg:var(--night); --accent:var(--brass); --accent-2:var(--brass-2); --on-accent:#1a1308; --serif:'DM Serif Display',Georgia,'Times New Roman',serif; --sans:'Bricolage Grotesque',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:var(--serif); --wrap:1200px; --pad:clamp(1.25rem,4vw,3rem); --s-1:clamp(.84rem,.8rem + .15vw,.92rem); --s0:clamp(1rem,.96rem + .2vw,1.1rem); --s1:clamp(1.2rem,1.08rem + .5vw,1.5rem); --s2:clamp(1.6rem,1.35rem + 1.1vw,2.35rem); --s3:clamp(2.2rem,1.65rem + 2.3vw,3.7rem); --s4:clamp(2.8rem,1.8rem + 4.4vw,6.2rem); } .theme-stage{ --bg:#140f13; --surface:#1c1519; --surface-2:#251c21; } .theme-system{ --bg:#0b1517; --surface:#10201f; --surface-2:#16292b; --accent:var(--signal); --accent-2:var(--signal-2); --on-accent:#03201c; --display:var(--sans); } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--night); color-scheme:dark; -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--paper); font-family:var(--sans); font-size:var(--s0); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } [hidden]{ display:none !important; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family:var(--display); line-height:1.08; margin:0 0 .5em; font-weight:400; text-wrap:balance; color:var(--paper); } .theme-system h1,.theme-system h2,.theme-system h3{ font-weight:700; letter-spacing:-.03em; } p{ margin:0 0 1.1em; max-width:64ch; color:var(--paper-2); text-wrap:pretty; } a{ color:var(--accent-2); text-underline-offset:.2em; text-decoration-thickness:1px; } a:hover{ color:var(--paper); } strong{ color:var(--paper); font-weight:600; } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .narrow{ max-width:48rem; } .section{ padding-block:clamp(3.5rem,8vw,7rem); } .section-sm{ padding-block:clamp(2rem,5vw,3.5rem); } .lede{ font-size:var(--s1); color:var(--paper-2); max-width:46ch; line-height:1.5; } .muted{ color:var(--muted); } .small{ font-size:var(--s-1); } .fine{ font-size:.82rem; color:var(--muted); } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--on-accent); padding:.8rem 1.2rem; font-weight:700; text-decoration:none; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.2rem 2.5rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,4vw,3rem); } .section-head h2{ font-size:var(--s3); margin:0; max-width:18ch; } .section-head p{ margin:0; max-width:42ch; } /* two typographic voices, used wherever both crafts share a line */ .voice-stage{ font-family:var(--serif); font-style:normal; font-weight:400; color:var(--brass); letter-spacing:.005em; } .voice-system{ font-family:var(--sans); font-style:normal; font-weight:650; color:var(--signal); letter-spacing:-.025em; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font:600 .98rem/1 var(--sans); padding:.95rem 1.45rem; border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .btn:active{ transform:translateY(1px); } .btn svg{ width:1.05em; height:1.05em; flex:none; } .btn-primary{ background:var(--accent); color:var(--on-accent); } .btn-primary:hover{ background:var(--accent-2); color:var(--on-accent); } .btn-ghost{ border-color:var(--line-strong); color:var(--paper); background:transparent; } .btn-ghost:hover{ border-color:var(--paper-2); background:var(--surface-2); color:var(--paper); } .btn-block{ width:100%; } .btn-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; } /* ---------- header ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line-2); } .header-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px; } .brand{ display:inline-flex; align-items:center; gap:.65rem; color:var(--paper); text-decoration:none; font-weight:700; font-size:1.06rem; letter-spacing:-.015em; line-height:1.1; } .brand:hover{ color:var(--paper); } .brand svg{ width:28px; height:28px; flex:none; } .brand small{ display:block; font-weight:400; color:var(--muted); font-size:.74rem; letter-spacing:0; } .nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,1.9rem); } .nav a{ color:var(--paper-2); text-decoration:none; font-size:.96rem; position:relative; padding:.35rem 0; } .nav a:hover,.nav a.is-active{ color:var(--paper); } .nav a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px; background:var(--accent); } .nav .nav-icon{ display:inline-flex; align-items:center; justify-content:center; width:2.1rem; height:2.1rem; border:1px solid var(--line); border-radius:50%; padding:0; } .nav .nav-icon svg{ width:15px; height:15px; } .nav .nav-icon:hover{ border-color:var(--paper-2); } .nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:40px; color:var(--paper); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle svg{ width:20px; height:20px; } @media (max-width:860px){ .nav-toggle{ display:inline-flex; } .nav{ position:fixed; inset:66px 0 auto 0; flex-direction:column; align-items:flex-start; gap:1.2rem; background:var(--bg); border-bottom:1px solid var(--line); padding:1.6rem var(--pad) 2rem; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s, transform .2s, visibility .2s; } .nav a{ font-size:1.2rem; } body.nav-open .nav{ opacity:1; visibility:visible; transform:none; } } /* ---------- hub: intro + split stage ---------- */ .hub-intro{ padding:clamp(2.6rem,6vw,5rem) 0 clamp(1.8rem,4vw,3rem); } .hub-title{ margin:0; font-weight:400; } .hub-name{ display:block; font-family:var(--sans); font-weight:800; font-size:var(--s4); letter-spacing:-.05em; line-height:.92; color:var(--paper); } .hub-line{ display:block; font-size:var(--s2); line-height:1.2; margin-top:.9rem; color:var(--paper-2); } .split{ position:relative; display:flex; isolation:isolate; overflow:hidden; min-height:clamp(420px,60vh,640px); width:calc(100% - 2 * var(--pad)); max-width:calc(var(--wrap) + 10rem); margin-inline:auto; border-radius:18px; border:1px solid var(--line); } .portal{ position:relative; flex:1 1 0; min-width:0; display:flex; align-items:flex-end; padding:clamp(1.6rem,3.5vw,3.2rem); text-decoration:none; color:var(--paper); overflow:hidden; transition:flex-grow .75s cubic-bezier(.2,.8,.2,1); } .portal:hover{ color:var(--paper); } @media (hover:hover) and (min-width:861px){ .split:hover .portal,.split:focus-within .portal{ flex-grow:.72; } .split .portal:hover,.split .portal:focus-visible{ flex-grow:1.4; } } .portal-stage{ background:radial-gradient(120% 90% at 70% 0%,#3d1422 0%,#1d0d14 45%,#120a0f 100%); } .portal-stage::before{ /* velvet pleats fading in from the right-hand wing */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 10px,rgba(255,255,255,.035) 22px,rgba(0,0,0,.34) 38px); -webkit-mask-image:linear-gradient(270deg,#000 0%,transparent 34%); mask-image:linear-gradient(270deg,#000 0%,transparent 34%); } .portal-system{ background:radial-gradient(120% 90% at 20% 0%,#0f3337 0%,#0b1d20 50%,#081316 100%); } .portal + .portal{ border-left:1px solid var(--line); } .portal-inner{ position:relative; z-index:3; max-width:27rem; } .portal-kicker{ display:block; font-size:.9rem; color:var(--paper-2); margin-bottom:.7rem; } .portal-title{ display:block; font-size:clamp(2rem,1.3rem + 2.1vw,3.3rem); line-height:1.02; margin:0 0 .8rem; } .portal-stage .portal-title{ font-family:var(--serif); font-weight:400; letter-spacing:.005em; } .portal-system .portal-title{ font-family:var(--sans); font-weight:750; letter-spacing:-.04em; } .portal-desc{ display:block; color:var(--paper-2); margin:0 0 1.4rem; max-width:32ch; } .portal-cta{ display:inline-flex; align-items:center; gap:.5rem; font-weight:650; } .portal-stage .portal-cta{ color:var(--brass); } .portal-system .portal-cta{ color:var(--signal); } .portal-cta svg{ width:1.1em; height:1.1em; transition:transform .2s ease; } .portal:hover .portal-cta svg,.portal:focus-visible .portal-cta svg{ transform:translateX(5px); } /* the spotlight + the clue you only find by looking */ [data-spotlight]{ --x:64%; --y:34%; --mx:-999px; --my:-999px; } .spot{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle 280px at var(--x) var(--y),rgba(255,214,140,.22),rgba(255,214,140,.06) 45%,transparent 72%); } .clue{ position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; justify-content:flex-start; align-items:flex-start; padding:15% 0 0 12%; font-family:var(--serif); font-size:var(--s1); color:var(--brass-2); -webkit-mask-image:radial-gradient(circle 120px at var(--mx) var(--my),#000 30%,transparent 78%); mask-image:radial-gradient(circle 120px at var(--mx) var(--my),#000 30%,transparent 78%); } .circuit{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .portal-system .circuit{ -webkit-mask-image:radial-gradient(120% 100% at 30% 30%,#000 40%,transparent 95%); mask-image:radial-gradient(120% 100% at 30% 30%,#000 40%,transparent 95%); } /* curtains part once on load — the site's single orchestrated moment */ .split::before,.split::after{ content:""; position:absolute; top:0; bottom:0; width:51%; z-index:10; pointer-events:none; background:repeating-linear-gradient(90deg,#561322 0,#7e2134 24px,#46101d 48px,#6d1b2d 72px,#561322 96px); box-shadow:inset 0 -60px 80px rgba(0,0,0,.45); } .split::before{ display:none; } .split::after{ display:none; } @keyframes curtain-l{ to{ transform:translateX(-102%); } } @keyframes curtain-r{ to{ transform:translateX(102%); } } @media (max-width:860px){ .split{ flex-direction:column; min-height:0; border-radius:14px; } .portal{ min-height:360px; } .portal + .portal{ border-left:0; border-top:1px solid var(--line); } .clue{ padding:10% 0 0 9%; } } /* hero entrance (inner pages) */ .rise{ opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; } .rise.d1{ animation-delay:.08s; } .rise.d2{ animation-delay:.18s; } .rise.d3{ animation-delay:.3s; } @keyframes rise{ to{ opacity:1; transform:none; } } /* ---------- manifesto ---------- */ .manifesto blockquote{ margin:0; font-size:var(--s3); line-height:1.12; max-width:20ch; } .manifesto blockquote p{ margin:0; max-width:none; color:inherit; } .manifesto blockquote span{ display:block; } .manifesto p{ margin-top:1.8rem; } /* ---------- hub twin columns ---------- */ .twin{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4rem); } @media (max-width:860px){ .twin{ grid-template-columns:1fr; } } .twin-col{ border-top:2px solid var(--brass); padding-top:1.5rem; } .twin-col.is-system{ border-color:var(--signal); } .twin-col h2{ font-size:var(--s2); } .twin-col.is-stage h2{ font-family:var(--serif); font-weight:400; } .twin-col.is-system h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; } .twin-col .link-more{ font-weight:600; color:var(--brass); } .twin-col.is-system .link-more{ color:var(--signal); } .mini-list{ list-style:none; margin:0 0 1.5rem; padding:0; } .mini-list a{ display:grid; grid-template-columns:64px 1fr; gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line-2); text-decoration:none; color:var(--paper); } .mini-list a:hover .mini-title{ color:var(--brass-2); } .mini-thumb{ --card:var(--brass); position:relative; width:64px; height:64px; border-radius:10px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--card) 48%,transparent),#130d11 72%); } .mini-thumb img{ width:86%; height:86%; object-fit:contain; } .mini-thumb .art-fallback{ display:none; width:28px; height:28px; color:var(--card); } .mini-thumb.no-art img{ display:none; } .mini-thumb.no-art .art-fallback{ display:block; } .mini-title{ display:block; font-weight:600; line-height:1.25; transition:color .15s; } .mini-sub{ display:block; color:var(--muted); font-size:.87rem; line-height:1.4; } .svc-mini{ list-style:none; margin:0 0 1.5rem; padding:0; } .svc-mini li{ display:grid; grid-template-columns:44px 1fr; gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line-2); } .svc-mini .ic{ width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:rgba(52,211,190,.1); color:var(--signal); } .svc-mini .ic svg{ width:22px; height:22px; } .svc-mini b{ display:block; font-weight:600; line-height:1.25; } .svc-mini span{ display:block; color:var(--muted); font-size:.87rem; line-height:1.4; } /* hub about teaser */ .hello{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.8rem,5vw,4rem); align-items:center; } @media (max-width:860px){ .hello{ grid-template-columns:1fr; } } .hello h2{ font-size:var(--s3); } .facts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .facts-grid div{ background:var(--surface); padding:1.3rem 1.2rem; } .facts-grid dl,.facts-grid dd{ margin:0; } .facts-grid dd{ display:block; margin-top:.4rem; font-size:.86rem; color:var(--paper-2); line-height:1.35; } .facts-grid dt{ display:block; font-family:var(--sans); font-weight:800; font-size:var(--s2); letter-spacing:-.04em; line-height:1; color:var(--paper); } .facts-grid span{ display:block; margin-top:.4rem; font-size:.86rem; color:var(--muted); line-height:1.35; } /* ---------- bands ---------- */ .band{ display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:1.5rem 2.5rem; align-items:center; border-radius:20px; border:1px solid var(--line); padding:clamp(2rem,5vw,4rem); background:radial-gradient(80% 140% at 0% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--surface); } .band-dual{ background:radial-gradient(70% 140% at 0% 0%,rgba(228,178,76,.15),transparent 60%),radial-gradient(70% 140% at 100% 100%,rgba(52,211,190,.15),transparent 60%),var(--surface); } .band h2{ font-size:var(--s3); margin-bottom:.35em; } .band p{ margin:0; } .band .btn-row{ margin-top:0; } @media (max-width:760px){ .band{ grid-template-columns:1fr; } } /* ---------- inner page hero ---------- */ .page-hero{ position:relative; overflow:hidden; padding-block:clamp(3.5rem,8vw,7rem) clamp(3rem,6vw,5rem); border-bottom:1px solid var(--line-2); } .page-hero .wrap{ position:relative; z-index:3; } .page-hero h1{ font-size:var(--s4); max-width:14ch; } .system-hero h1{ max-width:17ch; } .facts-grid{ margin:0; } .page-hero .lede{ margin-top:1.3rem; } .hero-note{ color:var(--muted); font-size:.92rem; margin-top:1.5rem; } .stage-hero{ background:radial-gradient(80% 120% at 88% -10%,#3b1321,transparent 62%),radial-gradient(60% 90% at 0% 100%,#22101a,transparent 70%); } .stage-hero::before{ content:""; position:absolute; top:0; bottom:0; right:0; width:min(34%,420px); z-index:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 10px,rgba(255,255,255,.03) 22px,rgba(0,0,0,.35) 38px),linear-gradient(90deg,transparent,#4a1220); -webkit-mask-image:linear-gradient(270deg,#000,transparent); mask-image:linear-gradient(270deg,#000,transparent); opacity:.8; } .system-hero{ background:radial-gradient(80% 120% at 90% -10%,#0f3337,transparent 62%); } .system-hero .circuit{ -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 70%); mask-image:linear-gradient(90deg,transparent 15%,#000 70%); } .hub-hero{ background:radial-gradient(60% 120% at 0% 0%,rgba(228,178,76,.12),transparent 60%),radial-gradient(60% 120% at 100% 0%,rgba(52,211,190,.12),transparent 60%); } /* ---------- whodunit ---------- */ .case-file{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(1.8rem,5vw,4rem); align-items:start; } @media (max-width:900px){ .case-file{ grid-template-columns:1fr; } } .case-file h2{ font-size:var(--s3); } .evidence{ border-left:2px solid var(--brass); padding:.2rem 0 .2rem 1.1rem; margin:1.4rem 0 0; font-family:var(--serif); font-style:italic; font-size:var(--s1); line-height:1.4; color:var(--paper); } .suspects{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } @media (max-width:640px){ .suspects{ grid-template-columns:1fr; } } .suspect{ appearance:none; font:inherit; text-align:left; color:var(--paper); cursor:pointer; display:flex; flex-direction:column; gap:.55rem; padding:1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:transform .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease; } .suspect:hover{ transform:translateY(-3px); border-color:var(--brass); } .suspect svg{ width:2.1rem; height:2.1rem; color:var(--brass); } .suspect b{ font-family:var(--serif); font-size:1.2rem; font-weight:600; line-height:1.15; } .suspect span{ font-size:.9rem; color:var(--paper-2); line-height:1.45; } .suspect .accuse{ margin-top:auto; padding-top:.6rem; font-size:.84rem; font-weight:650; color:var(--brass); } .suspect.is-cleared{ opacity:.5; border-style:dashed; } .suspect.is-cleared:hover{ transform:none; } .suspect.is-guilty{ border-color:var(--brass); background:color-mix(in srgb,var(--brass) 13%,var(--surface)); } .verdict{ min-height:3.4em; margin:1.4rem 0 0; font-family:var(--serif); font-style:italic; font-size:var(--s1); color:var(--paper); line-height:1.4; max-width:44ch; } .case-closed{ margin-top:1.2rem; } /* ---------- reasons ---------- */ .reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,4vw,3rem); } @media (max-width:820px){ .reasons{ grid-template-columns:1fr; } } .reason svg{ width:2rem; height:2rem; color:var(--accent); margin-bottom:1rem; } .reason h3{ font-size:1.35rem; } .reason p{ font-size:.96rem; } /* ---------- catalog ---------- */ .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; } .chip{ font:600 .88rem/1 var(--sans); color:var(--paper-2); cursor:pointer; background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:.65rem 1.05rem; transition:background-color .15s, border-color .15s, color .15s; } .chip:hover{ border-color:var(--paper-2); color:var(--paper); } .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .case-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(262px,1fr)); gap:1.4rem; } .case-card{ --card:var(--brass); display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:var(--paper); background:var(--surface); border:1px solid var(--line); border-radius:14px; transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s, box-shadow .28s; } .case-card:hover{ transform:translateY(-6px); color:var(--paper); border-color:color-mix(in srgb,var(--card) 70%,transparent); box-shadow:0 26px 44px -26px color-mix(in srgb,var(--card) 75%,transparent); } .case-art{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; background:radial-gradient(70% 72% at 50% 22%,color-mix(in srgb,var(--card) 42%,transparent),transparent 72%),#110c10; } .case-art::after{ content:""; position:absolute; left:15%; right:15%; bottom:9%; height:14px; border-radius:50%; background:rgba(0,0,0,.55); filter:blur(8px); z-index:0; } .case-art img{ position:relative; z-index:1; width:80%; height:80%; object-fit:contain; transition:transform .55s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)); } .case-card:hover .case-art img{ transform:scale(1.06) translateY(-4px); } .art-fallback{ display:none; position:relative; z-index:1; width:3.4rem; height:3.4rem; color:var(--card); } .case-art.no-art img,.show-stage.no-art img{ display:none; } .case-art.no-art .art-fallback,.show-stage.no-art .art-fallback{ display:block; } .badge{ position:absolute; z-index:2; top:.9rem; left:.9rem; font-size:.76rem; font-weight:650; padding:.32rem .7rem; border-radius:999px; background:rgba(10,8,10,.62); border:1px solid var(--line); color:var(--paper); } .badge.is-soon{ color:var(--brass-2); border-color:color-mix(in srgb,var(--brass) 55%,transparent); } .case-body{ display:flex; flex-direction:column; gap:.45rem; flex:1; padding:1.2rem 1.35rem 1.45rem; } .case-body h3{ font-size:1.32rem; margin:0; } .case-body p{ margin:0; font-size:.94rem; } .case-meta{ margin-top:auto; padding-top:.8rem; font-size:.84rem; color:var(--muted); } .empty-note{ padding:3rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; } /* per-show accent (drives card glow, stage light, tagline) */ .acc-comic{ --card:#ec7a3c; } .acc-tv{ --card:#8fa89a; } .acc-retire{ --card:#d9b240; } .acc-bigtop{ --card:#e0554f; } .acc-bach{ --card:#b86ee0; } .acc-space{ --card:#7784ea; } .acc-seas{ --card:#43a56a; } .acc-ren{ --card:#5a70d6; } /* ---------- show page ---------- */ .crumbs{ padding-top:1.6rem; font-size:.9rem; color:var(--muted); } .crumbs a{ color:var(--muted); } .show-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; padding-block:clamp(1.4rem,4vw,2.6rem) clamp(3rem,6vw,5rem); } @media (max-width:900px){ .show-hero{ grid-template-columns:1fr; } } .show-stage{ position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line); background:radial-gradient(60% 62% at 50% 18%,color-mix(in srgb,var(--card) 44%,transparent),transparent 72%),radial-gradient(130% 80% at 50% 115%,#2b0f19,#0f0a0d 72%); } .show-stage::after{ content:""; position:absolute; left:18%; right:18%; bottom:10%; height:22px; border-radius:50%; background:rgba(0,0,0,.6); filter:blur(10px); } .show-stage img{ position:relative; z-index:2; width:76%; height:76%; max-width:360px; max-height:300px; object-fit:contain; filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)); } .show-stage .spot{ z-index:1; } .show-info .fine{ margin-top:.9rem; } .show-info h1{ font-size:var(--s3); margin-bottom:.3em; } .tagline{ font-family:var(--serif); font-size:var(--s1); color:var(--paper); line-height:1.35; margin:0 0 1.3rem; } .pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem; padding:0; list-style:none; } .pills li{ font-size:.86rem; padding:.4rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--paper-2); } details.advisory{ max-width:36rem; margin:0 0 1.2rem; border:1px solid color-mix(in srgb,var(--velvet-2) 75%,transparent); background:rgba(163,52,72,.11); border-radius:12px; padding:.85rem 1.05rem; } details.advisory summary{ list-style:none; cursor:pointer; display:flex; gap:.65rem; align-items:center; font-size:.93rem; color:var(--paper); } details.advisory summary::-webkit-details-marker{ display:none; } details.advisory summary svg{ width:1.15rem; height:1.15rem; flex:none; color:#ee97a5; } details.advisory summary .more{ margin-left:auto; color:var(--brass); font-size:.84rem; white-space:nowrap; } details.advisory[open] summary .more{ visibility:hidden; } details.advisory p{ margin:.75rem 0 0; font-size:.9rem; } .show-body{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; padding-bottom:clamp(3rem,6vw,5rem); } @media (max-width:900px){ .show-body{ grid-template-columns:1fr; } } .show-body h2{ font-size:var(--s2); margin-top:2.2rem; } .show-body h2:first-child{ margin-top:0; } .show-body .prose p{ font-size:1.07rem; } .spec{ width:100%; border-collapse:collapse; } .spec th,.spec td{ text-align:left; vertical-align:top; padding:.85rem 0; border-bottom:1px solid var(--line-2); font-size:.96rem; } .spec th{ width:34%; color:var(--muted); font-weight:500; padding-right:1rem; } .cast-list{ list-style:none; margin:0; padding:0; } .cast-list li{ padding:1rem 0; border-bottom:1px solid var(--line-2); } .cast-list b{ font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--paper); } .cast-list em{ font-style:normal; color:var(--paper-2); font-size:.86rem; margin-left:.4rem; } .cast-list span{ display:block; color:var(--paper-2); font-size:.95rem; } .aside-stack{ position:sticky; top:88px; display:grid; gap:1rem; } @media (max-width:900px){ .aside-stack{ position:static; } } .card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:clamp(1.35rem,3vw,1.9rem); } .card h3{ font-size:1.3rem; } .card p{ font-size:.95rem; } .show-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid var(--line-2); padding-block:2rem 1rem; } .show-nav a{ text-decoration:none; color:var(--paper); display:block; padding:1rem 0; } .show-nav a span{ display:block; color:var(--muted); font-size:.85rem; } .show-nav a b{ font-family:var(--serif); font-weight:400; font-size:1.2rem; } .show-nav a:hover b{ color:var(--brass-2); } .show-nav .next{ text-align:right; } /* ---------- forms ---------- */ .field{ margin-bottom:1rem; } .field label{ display:block; font-size:.9rem; color:var(--paper-2); margin-bottom:.4rem; } .field input,.field select,.field textarea{ width:100%; font:inherit; font-size:1rem; color:var(--paper); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:10px; padding:.78rem .95rem; } .field textarea{ resize:vertical; min-height:8rem; } .field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; } .hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; } .form-note{ font-size:.82rem; color:var(--muted); margin:.85rem 0 0; } /* sliders + checkbox */ input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; padding:0; border:0; } input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:4px; background:var(--line-strong); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--accent); cursor:pointer; } input[type=range]::-moz-range-track{ height:4px; border-radius:4px; background:var(--line-strong); } input[type=range]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid var(--bg); cursor:pointer; } .range-row{ margin-bottom:1.4rem; } .range-row label{ display:flex; justify-content:space-between; gap:1rem; font-size:.94rem; color:var(--paper-2); margin-bottom:.35rem; } .range-row output{ color:var(--paper); font-weight:650; font-variant-numeric:tabular-nums; } .check{ display:flex; gap:.7rem; align-items:center; font-size:.95rem; color:var(--paper-2); cursor:pointer; } .check input{ width:1.15rem; height:1.15rem; accent-color:var(--accent); margin:0; } /* ---------- licensing ---------- */ .pricing{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.8rem,5vw,4rem); align-items:start; } @media (max-width:900px){ .pricing{ grid-template-columns:1fr; } } .price-list{ list-style:none; margin:0; padding:0; } .price-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.05rem 0; border-bottom:1px dashed var(--line); } .price-list li span small{ display:block; color:var(--paper-2); font-size:.88rem; } .price-list .price{ font-family:var(--sans); font-weight:700; font-size:1.45rem; letter-spacing:-.02em; color:var(--brass-2); white-space:nowrap; font-variant-numeric:tabular-nums; } .est-price{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; font-size:var(--s4); line-height:1; color:var(--brass-2); margin:.8rem 0 .3rem; font-variant-numeric:tabular-nums; } .est-break{ color:var(--paper); margin:0 0 .3rem; } .est-note{ font-size:.9rem; margin:1rem 0 0; } .faq{ max-width:50rem; } .faq details{ border-bottom:1px solid var(--line-2); } .faq details:first-of-type{ border-top:1px solid var(--line-2); } .faq summary{ list-style:none; cursor:pointer; position:relative; padding:1.25rem 2.5rem 1.25rem 0; font-family:var(--display); font-size:1.18rem; color:var(--paper); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; position:absolute; right:.35rem; top:50%; width:12px; height:12px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:translateY(-70%) rotate(45deg); transition:transform .2s; } .faq details[open] summary::after{ transform:translateY(-30%) rotate(225deg); } .faq details p{ margin:0 0 1.3rem; } /* ---------- services ---------- */ .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; } @media (max-width:820px){ .svc-grid{ grid-template-columns:1fr; } } .svc{ position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(1.5rem,3.5vw,2.4rem); transition:border-color .25s; } .svc:hover{ border-color:color-mix(in srgb,var(--signal) 55%,transparent); } .svc::before{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(52,211,190,.14),transparent 70%); } .svc .ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:12px; background:rgba(52,211,190,.1); color:var(--signal); margin-bottom:1.3rem; } .svc .ic svg{ width:1.6rem; height:1.6rem; } .svc h3{ font-size:1.5rem; } .svc ul{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.5rem; } .svc li{ position:relative; padding-left:1.2rem; font-size:.95rem; color:var(--paper-2); } .svc li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--signal); } .calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:22px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(160deg,#10292d,#0c1719 70%); } @media (max-width:860px){ .calc{ grid-template-columns:1fr; } } .calc-in{ padding:clamp(1.6rem,4vw,3rem); } .calc-in h2{ font-size:var(--s2); } .calc-out{ padding:clamp(1.6rem,4vw,3rem); display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); background:radial-gradient(90% 90% at 80% 20%,rgba(52,211,190,.16),transparent 70%); } @media (max-width:860px){ .calc-out{ border-left:0; border-top:1px solid var(--line); } } .calc-hours{ font-weight:800; font-size:clamp(3.6rem,2rem + 6.5vw,7.5rem); letter-spacing:-.06em; line-height:.9; color:var(--signal-2); font-variant-numeric:tabular-nums; } .calc-unit{ font-size:var(--s1); color:var(--paper); margin:.5rem 0 .2rem; } .calc-weeks{ color:var(--paper-2); margin:0 0 1.6rem; } .calc-out .btn{ align-self:flex-start; } .steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; } @media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .steps{ grid-template-columns:1fr; } } .steps li{ border-top:2px solid var(--signal); padding-top:1.1rem; } .step-num{ display:block; font-weight:800; font-size:.95rem; color:var(--signal); margin-bottom:.5rem; font-variant-numeric:tabular-nums; } .steps h3{ font-size:1.2rem; } .steps p{ font-size:.94rem; margin:0; } .never{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(1.8rem,5vw,4rem); align-items:start; } @media (max-width:860px){ .never{ grid-template-columns:1fr; } } .never h2{ font-size:var(--s3); } .never-list{ list-style:none; margin:0; padding:0; } .never-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line-2); font-size:var(--s1); color:var(--paper); } .never-list li span{ font-size:.82rem; color:var(--signal); white-space:nowrap; } .creds{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; } @media (max-width:700px){ .creds{ grid-template-columns:1fr; } } .creds li{ background:var(--surface); padding:1.4rem 1.4rem; } .creds b{ display:block; color:var(--paper); font-weight:650; margin-bottom:.25rem; } .creds span{ display:block; color:var(--paper-2); font-size:.93rem; } /* ---------- about ---------- */ .bio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,5vw,4rem); } @media (max-width:860px){ .bio{ grid-template-columns:1fr; } } .bio h2{ font-size:var(--s2); } .bio-stage h2{ font-family:var(--serif); font-weight:400; color:var(--brass); } .bio-system h2{ font-family:var(--sans); font-weight:700; letter-spacing:-.03em; color:var(--signal); } .timeline{ list-style:none; margin:0; padding:0; position:relative; } .timeline::before{ content:""; position:absolute; left:calc(5rem + 1rem); top:.4rem; bottom:0; width:1px; background:var(--line); } .tl-item{ position:relative; display:grid; grid-template-columns:5rem 1fr; gap:0 2rem; padding-bottom:2.1rem; transition:opacity .3s ease; } .tl-item::before{ content:""; position:absolute; left:calc(5rem + 1rem - 6px); top:.42rem; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--muted); } .tl-item[data-track="creative"]::before{ border-color:var(--brass); } .tl-item[data-track="tech"]::before{ border-color:var(--signal); } .tl-item[data-track="creative tech"]::before{ border:0; background:linear-gradient(90deg,var(--brass) 50%,var(--signal) 50%); } .tl-item.is-dim{ opacity:.25; } .tl-year{ text-align:right; font-weight:700; color:var(--paper); font-variant-numeric:tabular-nums; } .tl-body h3{ font-family:var(--sans); font-size:1.12rem; font-weight:700; letter-spacing:-.01em; margin:0 0 .15rem; } .tl-org{ display:block; color:var(--muted); font-size:.88rem; margin-bottom:.4rem; } .tl-body p{ font-size:.95rem; margin:0; } .tl-now{ display:inline-block; margin-left:.5rem; font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:999px; background:var(--accent); color:var(--on-accent); vertical-align:middle; } @media (max-width:560px){ .timeline::before{ left:.35rem; } .tl-item{ grid-template-columns:1fr; padding-left:1.8rem; } .tl-item::before{ left:-.05rem; } .tl-year{ text-align:left; } } /* ---------- contact ---------- */ .contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } .creds + .fine{ margin-top:1rem; } .contact-grid h1{ font-size:var(--s3); max-width:14ch; } .direct{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.8rem; } .direct a{ display:flex; gap:.9rem; align-items:center; text-decoration:none; color:var(--paper); padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px; transition:border-color .15s, background-color .15s; } .direct a:hover{ border-color:var(--paper-2); background:var(--surface); } .direct svg{ width:1.3rem; height:1.3rem; color:var(--accent); flex:none; } .direct small{ display:block; color:var(--muted); font-size:.84rem; } /* ---------- centered pages (thanks, 404) ---------- */ .center{ text-align:center; max-width:40rem; margin-inline:auto; } .center p{ margin-inline:auto; } .center .btn-row{ justify-content:center; } .big-icon{ width:3.2rem; height:3.2rem; color:var(--accent); margin:0 auto 1.4rem; } /* ---------- footer ---------- */ .site-footer{ border-top:1px solid var(--line-2); margin-top:clamp(3rem,6vw,5rem); padding-block:3.2rem 2rem; } .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; } @media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .foot-grid{ grid-template-columns:1fr; } } .foot-grid p{ font-size:.92rem; max-width:34ch; margin-top:1rem; } .foot-grid .foot-h{ font:700 .95rem/1.3 var(--sans); letter-spacing:0; margin:0 0 .9rem; color:var(--paper); } .foot-base p{ margin:0; max-width:none; font-size:.82rem; color:var(--paper-2); } .foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; } .foot-grid a{ color:var(--paper-2); text-decoration:none; font-size:.94rem; } .foot-grid a:hover{ color:var(--paper); } .foot-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem 2rem; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--line-2); font-size:.8rem; color:var(--muted); } /* ---------- motion preferences ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .split::before,.split::after{ display:none; } .rise{ opacity:1; transform:none; animation:none; } } /* ========================================================================== v4 additions ========================================================================== */ /* stage motion: dust motes drifting through the spotlight */ .motes{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .stage-hero .motes{ -webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 75%); mask-image:linear-gradient(90deg,transparent 20%,#000 75%); } /* WCAG 2.2.2: every looping animation has a visible pause control */ .motion-row{ display:flex; justify-content:flex-end; margin-top:.7rem; } .motion-toggle{ display:inline-flex; align-items:center; gap:.45rem; font:600 .86rem/1 var(--sans); color:var(--paper-2); background:transparent; border:1px solid var(--line-strong); border-radius:999px; padding:.55rem .9rem; cursor:pointer; } .motion-toggle:hover{ color:var(--paper); border-color:var(--paper-2); } .motion-toggle svg{ width:.9rem; height:.9rem; } .motion-toggle .mt-play{ display:none; } .motion-toggle[aria-pressed="true"] .mt-pause{ display:none; } .motion-toggle[aria-pressed="true"] .mt-play{ display:inline; } .page-hero .motion-toggle{ margin-top:1.6rem; } @media (prefers-reduced-motion:reduce){ .motion-toggle,.motion-row{ display:none; } } /* content level meter: text label always accompanies the bars */ .meter{ display:inline-flex; align-items:center; gap:.55rem; font-size:.86rem; font-weight:600; color:var(--paper); } .meter .bars{ display:inline-flex; gap:3px; } .meter .bar{ width:9px; height:14px; border-radius:2px; border:1px solid var(--line-strong); } .meter .bar.on{ border-color:transparent; background:var(--brass); } .meter.lv3 .bar.on{ background:#f08a98; } .case-level{ display:block; margin-top:.5rem; } .advisory{ max-width:38rem; margin:0 0 1.3rem; border:1px solid color-mix(in srgb,var(--velvet-2) 80%,transparent); background:rgba(163,52,72,.12); border-radius:12px; padding:.95rem 1.1rem; } .advisory p{ margin:.55rem 0 0; font-size:.93rem; } .table-scroll{ overflow-x:auto; margin-top:1rem; border-radius:12px; } .guide{ width:100%; border-collapse:collapse; } .guide th,.guide td{ text-align:left; vertical-align:top; padding:.9rem .8rem .9rem 0; border-bottom:1px solid var(--line-2); font-size:.94rem; } .guide thead th{ color:var(--paper-2); font-weight:600; font-size:.84rem; border-bottom:1px solid var(--line-strong); } .guide tbody th{ color:var(--paper); font-weight:600; width:24%; } .guide td:nth-child(2){ width:20%; white-space:nowrap; } .pull{ margin:2.2rem 0; padding:1.4rem 0 1.4rem 1.4rem; border-left:3px solid var(--brass); } .pull blockquote{ margin:0; } .pull p{ font-family:var(--serif); font-size:var(--s2); line-height:1.2; color:var(--paper); margin:0; max-width:28ch; } .pull figcaption{ margin-top:.8rem; color:var(--paper-2); font-size:.92rem; } .notes-list{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.6rem; } .notes-list li{ position:relative; padding-left:1.6rem; color:var(--paper-2); } .notes-list li::before{ content:""; position:absolute; left:0; top:.45em; width:.8rem; height:.45rem; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); } .crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; } .crumbs li + li::before{ content:"/"; margin-right:.4rem; color:var(--muted); } .crumbs a{ color:var(--paper-2); } .card-h{ font-size:1.35rem; } .case-grid{ list-style:none; margin:0; padding:0; } .case-card{ height:100%; } .case-art{ display:grid; } .case-title{ font-family:var(--display); font-size:1.35rem; line-height:1.12; color:var(--paper); } .case-tag{ font-size:.94rem; color:var(--paper-2); } .case-meta{ color:var(--paper-2); } .mini-thumb{ flex:none; } .show-stage{ display:grid; } .reason h2{ font-size:1.35rem; } .req{ color:#f3a3ae; font-weight:700; } /* box office estimator (stage-themed calc) */ .stage-calc{ background:linear-gradient(160deg,#2a1219,#150e12 70%); } .stage-calc .calc-out{ background:radial-gradient(90% 90% at 80% 20%,rgba(228,178,76,.16),transparent 70%); } .calc-label{ margin:0 0 .3rem; color:var(--paper-2); font-size:.95rem; } .calc-big{ font-family:var(--sans); font-weight:800; font-size:clamp(3rem,1.8rem + 5.5vw,6.4rem); letter-spacing:-.055em; line-height:.95; margin:0 0 1rem; color:var(--accent-2); font-variant-numeric:tabular-nums; } .calc-list{ margin:0 0 1.2rem; display:grid; gap:.1rem; } .calc-list div{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line-2); } .calc-list dt{ color:var(--paper-2); } .calc-list dd{ margin:0; font-weight:700; color:var(--paper); font-variant-numeric:tabular-nums; } .calc-note{ font-size:.95rem; color:var(--paper); margin:0 0 1.4rem; } .calc-money{ font-size:var(--s1); font-weight:700; color:var(--paper); margin:0 0 .3rem; } .calc-out .btn{ align-self:flex-start; } .tools-band + .section .fine,.tools-band .fine{ margin-top:1rem; } /* cast finder */ .cast-finder{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(1.8rem,5vw,4rem); align-items:start; } @media (max-width:900px){ .cast-finder{ grid-template-columns:1fr; } } .cast-finder h2{ font-size:var(--s3); } .steppers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; margin-top:1.4rem; } @media (max-width:520px){ .steppers{ grid-template-columns:1fr; } } .stepper label{ display:block; font-size:.9rem; color:var(--paper-2); margin-bottom:.4rem; min-height:2.6em; } .stepper input{ width:100%; font:700 1.5rem/1 var(--sans); color:var(--paper); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:10px; padding:.7rem .8rem; font-variant-numeric:tabular-nums; } .stepper input:focus{ outline:2px solid var(--accent); outline-offset:1px; } .fit-summary{ font-family:var(--serif); font-size:var(--s1); color:var(--paper); margin:0 0 1rem; } .fit-list{ list-style:none; margin:0; padding:0; } .fit-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem 1rem; padding:.95rem 0; border-bottom:1px solid var(--line-2); } .fit-list a{ color:var(--paper); font-weight:600; text-decoration:none; } .fit-list a:hover{ text-decoration:underline; } .fit-need{ grid-column:1; font-size:.86rem; color:var(--paper-2); } .fit-status{ grid-column:2; grid-row:1 / span 2; align-self:center; font-size:.86rem; font-weight:700; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--line-strong); color:var(--paper-2); text-align:right; } .fit-list li.fits .fit-status{ background:var(--brass); border-color:var(--brass); color:#1a1308; } /* AI readiness check */ .readiness{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(1.8rem,5vw,4rem); align-items:start; } @media (max-width:900px){ .readiness{ grid-template-columns:1fr; } } .readiness h2{ font-size:var(--s3); } .q{ border:0; margin:0 0 1.4rem; padding:0; } .q legend{ font-weight:650; color:var(--paper); margin-bottom:.6rem; padding:0; } .q-num{ display:block; font-size:.8rem; font-weight:600; color:var(--signal-2); margin-bottom:.2rem; } .opt{ display:flex; gap:.65rem; align-items:center; padding:.6rem .8rem; margin-bottom:.4rem; border:1px solid var(--line-strong); border-radius:10px; cursor:pointer; color:var(--paper-2); } .opt:hover{ border-color:var(--paper-2); color:var(--paper); } .opt input{ accent-color:var(--signal); width:1.1rem; height:1.1rem; margin:0; flex:none; } .opt:has(input:checked){ border-color:var(--signal); color:var(--paper); background:rgba(52,211,190,.08); } .quiz-result:not(:empty){ margin-top:1.6rem; padding:1.4rem; border-radius:14px; border:1px solid var(--signal); background:rgba(52,211,190,.07); } .quiz-result h3{ font-size:1.4rem; } .quiz-result ul{ margin:.6rem 0 1.2rem; padding-left:1.2rem; color:var(--paper-2); } .quiz-result li{ margin-bottom:.35rem; } .svc-grid{ grid-template-columns:repeat(3,1fr); } @media (max-width:980px){ .svc-grid{ grid-template-columns:1fr; } } .also{ margin-top:1.6rem; max-width:none; color:var(--paper-2); font-size:.96rem; } /* speaking */ .speak-card{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(1.8rem,5vw,4rem); align-items:center; border-radius:20px; border:1px solid var(--line); padding:clamp(1.8rem,5vw,3.5rem); background:radial-gradient(60% 120% at 100% 0%,rgba(52,211,190,.12),transparent 60%),radial-gradient(60% 120% at 0% 100%,rgba(228,178,76,.12),transparent 60%),var(--surface); } @media (max-width:860px){ .speak-card{ grid-template-columns:1fr; } } .speak-card h2{ font-size:var(--s3); } .speak-ic{ display:inline-grid; place-items:center; width:3rem; height:3rem; border-radius:12px; background:rgba(228,178,76,.12); color:var(--brass); margin-bottom:1.1rem; } .speak-ic svg{ width:1.6rem; height:1.6rem; } .speak-formats{ list-style:none; margin:0; padding:0; } .speak-formats li{ padding:1rem 0; border-bottom:1px solid var(--line-2); } .speak-formats b{ display:block; color:var(--paper); } .speak-formats span{ display:block; color:var(--paper-2); font-size:.92rem; } .formats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; } @media (max-width:980px){ .formats{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .formats{ grid-template-columns:1fr; } } .fmt{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem; } .fmt .ic{ display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:12px; background:rgba(52,211,190,.1); color:var(--signal); margin-bottom:1rem; } .fmt .ic svg{ width:1.5rem; height:1.5rem; } .fmt h3{ font-size:1.25rem; } .fmt p{ font-size:.94rem; margin:0; } .topics{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(1.5rem,4vw,3rem); } @media (max-width:760px){ .topics{ grid-template-columns:1fr; } } .topics li{ padding:1.3rem 0; border-top:1px solid var(--line); } .topics h3{ font-size:1.35rem; margin-bottom:.35rem; } .topics p{ margin:0; font-size:.96rem; } .never-list.plain li{ font-size:1.1rem; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; } @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } } .big-h{ font-size:var(--s3); } .field input[type=date]{ color-scheme:dark; } /* timeline: track shown in text, not only color (WCAG 1.4.1) */ .tl-tag{ display:inline-block; margin-top:.5rem; font-size:.78rem; font-weight:600; color:var(--paper-2); border:1px solid var(--line-strong); border-radius:999px; padding:.15rem .55rem; } .tl-org{ color:var(--paper-2); } .prose-page h1{ font-size:var(--s3); } .prose-page h2{ font-size:var(--s2); margin-top:2rem; } .show-body > *{ min-width:0; } /* ========================================================================== v5 additions ========================================================================== */ :root{ --mic:#b7abff; --mic-2:#d9d2ff; } .voice-mic{ font-family:var(--sans); font-weight:500; color:var(--mic); } /* three portals: system | mic | stage */ .split.three .portal-title{ font-size:clamp(1.7rem,1.05rem + 1.6vw,2.7rem); } .split.three .portal-desc{ max-width:28ch; } .portal-mic{ background:radial-gradient(120% 90% at 50% 0%,#2b2352 0%,#17132b 52%,#0f0d1b 100%); } .portal-mic .portal-cta{ color:var(--mic); } .portal-mic .portal-title{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; } .waves{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; } .portal-stage .clue{ padding:12% 0 0 10%; } /* dropdown menus (disclosure pattern: hover for mouse, button for keyboard and touch) */ .menu{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.4rem); list-style:none; margin:0; padding:0; } .menu-li{ position:relative; display:flex; align-items:center; } .sub-toggle{ display:inline-grid; place-items:center; width:1.75rem; height:1.75rem; margin-left:.05rem; padding:0; background:none; border:0; border-radius:6px; color:var(--paper-2); cursor:pointer; } .sub-toggle:hover{ color:var(--paper); background:var(--surface-2); } .sub-toggle svg{ width:.85rem; height:.85rem; transition:transform .2s; } .sub-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); } .sub{ display:none; position:absolute; top:calc(100% + 10px); left:-.9rem; z-index:60; min-width:15.5rem; list-style:none; margin:0; padding:.45rem; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 20px 44px -14px rgba(0,0,0,.7); } .sub::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; } .nav .sub a{ display:block; padding:.62rem .8rem; border-radius:8px; font-size:.94rem; color:var(--paper-2); white-space:nowrap; } .nav .sub a:hover,.nav .sub a:focus-visible{ background:var(--surface-2); color:var(--paper); } @media (hover:hover) and (min-width:861px){ .has-sub:hover > .sub{ display:block; } } .sub-toggle[aria-expanded="true"] + .sub{ display:block; } .has-sub.suppress > .sub{ display:none !important; } @media (max-width:860px){ .nav{ max-height:calc(100vh - 66px); overflow-y:auto; } .menu{ flex-direction:column; align-items:stretch; gap:.4rem; width:100%; } .menu-li{ flex-wrap:wrap; } .sub-toggle{ display:none; } .sub{ display:block; position:static; width:100%; min-width:0; padding:.1rem 0 .6rem .9rem; background:none; border:0; box-shadow:none; } .sub::before{ display:none; } .nav .sub a{ font-size:1rem; padding:.45rem .2rem; white-space:normal; } } /* cast: bold total, icon row beneath */ .cast{ display:block; } .cast > b{ display:block; color:var(--paper); font-weight:700; } .cast-break{ display:flex; flex-wrap:wrap; gap:.25rem .9rem; margin-top:.3rem; font-size:.86rem; color:var(--paper-2); } .cg{ display:inline-flex; align-items:center; gap:.3rem; } .cg svg{ width:1rem; height:1rem; flex:none; color:var(--card,var(--accent)); } .hero-cast{ margin:0 0 1.2rem; } .hero-cast .cast > b{ font-size:1.1rem; } .hero-cast .cast-break{ font-size:.94rem; } .cast-extra{ display:block; margin-top:.5rem; } /* coming-soon card stands apart */ .case-item.is-coming .case-card{ background:linear-gradient(165deg,#1b2446,#121628 70%); border:2px solid var(--brass); } .case-item.is-coming .case-art{ background:radial-gradient(70% 72% at 50% 22%,rgba(90,112,214,.5),transparent 72%),#0f1328; } .ribbon{ position:absolute; z-index:3; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.65rem 1rem; background:var(--brass); color:#1a1308; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; } .ribbon small{ font-weight:700; font-size:.86rem; } .case-cta{ display:block; margin-top:.7rem; font-weight:700; color:var(--brass-2); } /* notes */ .adjust-note{ display:flex; gap:.85rem; align-items:flex-start; padding:.95rem 1.1rem; margin:0 0 1.8rem; border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); } .adjust-note svg{ width:1.3rem; height:1.3rem; flex:none; color:var(--accent); margin-top:.15rem; } .adjust-note p{ margin:0; font-size:.95rem; max-width:none; } .cast-finder .adjust-note{ margin-top:1.2rem; } .note-tag{ display:inline-block; font-size:.8rem; font-weight:700; padding:.2rem .6rem; border:1px solid var(--line-strong); border-radius:999px; color:var(--paper); } /* session builder */ .builder.card{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); padding:0; overflow:hidden; } @media (max-width:900px){ .builder.card{ grid-template-columns:1fr; } } .builder-in,.builder-out{ padding:clamp(1.5rem,4vw,2.8rem); } .builder-in h2{ font-size:var(--s2); } .builder-out{ border-left:1px solid var(--line); background:radial-gradient(90% 90% at 80% 10%,rgba(183,171,255,.14),transparent 70%); } @media (max-width:900px){ .builder-out{ border-left:0; border-top:1px solid var(--line); } } .builder .opt input{ accent-color:var(--mic); } .builder .opt:has(input:checked){ border-color:var(--mic); background:rgba(183,171,255,.08); } .builder .opt:has(input:disabled){ opacity:.6; cursor:not-allowed; } .agenda{ list-style:none; margin:0 0 1.2rem; padding:0; } .agenda li{ display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line-2); } .agenda .t{ font-weight:700; color:var(--mic-2); font-variant-numeric:tabular-nums; } .agenda b{ display:block; color:var(--paper); font-weight:650; } .agenda span.d{ display:block; color:var(--paper-2); font-size:.9rem; } /* content guide stacks on small screens instead of scrolling sideways */ .table-wrap{ margin-top:1rem; } @media (max-width:720px){ .guide thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .guide,.guide tbody,.guide tr,.guide th,.guide td{ display:block; width:auto !important; } .guide tr{ padding:.9rem 0; border-bottom:1px solid var(--line-2); } .guide th,.guide td{ border:0; padding:.15rem 0; } .guide td:nth-child(2){ white-space:normal; margin:.25rem 0 .35rem; } } /* v6 */ .custom-topic{ border-top-color:var(--mic) !important; } .custom-topic h3{ color:var(--mic-2); } .custom-topic .link-more{ display:inline-block; margin-top:.6rem; color:var(--mic); font-weight:600; } .bd-note{ margin:0 0 1.2rem; } /* show page hero: keep the cover box proportional to the art at mid and small widths */ @media (max-width:900px){ .show-hero{ grid-template-columns:minmax(200px,300px) minmax(0,1fr); gap:clamp(1.4rem,4vw,2.4rem); align-items:start; } .show-stage{ aspect-ratio:1/1; border-radius:16px; } .show-stage img{ width:86%; height:86%; } .show-info h1{ font-size:clamp(1.9rem,1.2rem + 2.6vw,2.8rem); } } @media (max-width:620px){ .show-hero{ grid-template-columns:1fr; } .show-stage{ aspect-ratio:auto; height:clamp(210px,60vw,280px); } .show-stage img{ width:auto; height:82%; max-width:90%; } .show-stage::after{ bottom:7%; } } @media (min-width:621px) and (max-width:900px){ .show-stage{ position:sticky; top:88px; } } /* show page: square "Click to read!" cover, linked to the Act I sample */ .show-cover{ display:block; position:relative; aspect-ratio:1/1; width:100%; max-width:520px; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -30px color-mix(in srgb,var(--card) 70%,transparent); transition:box-shadow .3s, transform .3s; } .show-cover img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .show-cover:hover{ transform:translateY(-4px); box-shadow:0 36px 70px -28px color-mix(in srgb,var(--card) 90%,transparent); } .show-cover:hover img{ transform:scale(1.03); } .show-cover:focus-visible{ outline:3px solid var(--brass); outline-offset:4px; } @media (min-width:621px) and (max-width:900px){ .show-cover{ position:sticky; top:88px; } } @media (max-width:620px){ .show-cover{ max-width:320px; } } @media (prefers-reduced-motion:reduce){ .show-cover:hover,.show-cover:hover img{ transform:none; } } /* three portals: equal widths (no reflow on hover), one type style, titles break at a fixed point */ .split.three:hover .portal,.split.three:focus-within .portal, .split.three .portal:hover,.split.three .portal:focus-visible{ flex-grow:1; } .split.three .portal-title,.split.three .portal-stage .portal-title{ font-family:var(--sans); font-weight:700; letter-spacing:-.035em; line-height:1.02; font-size:clamp(1.5rem,.85rem + 1.55vw,2.55rem); } .split.three .portal-title .tl{ display:block; white-space:nowrap; } .split.three .portal-inner{ transition:transform .35s cubic-bezier(.2,.8,.2,1); } .split.three .portal:hover .portal-inner,.split.three .portal:focus-visible .portal-inner{ transform:translateY(-6px); } .split.three .portal::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:rgba(255,255,255,0); transition:background-color .3s; } .split.three .portal:hover::after{ background:rgba(255,255,255,.035); } @media (min-width:861px){ .split.three .portal-desc{ min-height:calc(1.62em * 3); } } @media (min-width:861px) and (max-width:1199px){ .split.three .portal-desc{ min-height:calc(1.62em * 4); } } .hub-line{ font-family:var(--sans); font-weight:500; letter-spacing:-.02em; }