:root{ /* ---- Brand tokens (Figma: SingTheatre / node 7-45) ---- */ --red:#EE303A; --red-dark:#D2222C; --red-tint:#FDECED; --ink:#272726; /* brand dark */ --ink-70:rgba(39,39,38,.72); --ink-50:rgba(39,39,38,.52); --ink-30:rgba(39,39,38,.32); --beige:#FAF9F6; --line:#E4E2DC; --line-strong:#CFCCC3; --white:#fff; --amber:#FFF4E2; --amber-ink:#8A5A12; --amber-line:#F0DBB4; --ok:#EDF7EE; --ok-ink:#1F6B33; --ok-line:#C3E3C9; --head:"sofia-pro-condensed-variable","Sofia Sans Condensed",Impact,sans-serif; --body:"sofia-pro-variable","Sofia Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} body{ font-family:var(--body); font-size:17px; line-height:1.45; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; } a{color:inherit;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} @media(max-width:640px){.wrap{padding:0 20px;}} /* ============ Site header (overlays the banner, per Figma) ============ */ .siteheader{position:absolute; inset:0 0 auto 0; z-index:5;} .siteheader .bar{ max-width:1400px; margin:0 auto; padding:26px 40px; display:flex; align-items:center; gap:34px; } @media(max-width:1120px){.siteheader .bar{padding:20px 24px; gap:20px;}} .logo{flex-shrink:0; display:block; line-height:0;} .logo img{width:250px; height:auto; display:block;} @media(max-width:1120px){.logo img{width:190px;}} .nav{margin-left:auto; display:flex; align-items:center; gap:28px;} @media(max-width:1000px){.nav .navlinks{display:none;}} .nav .navlinks{display:flex; align-items:center; gap:28px;} .nav a.navlink{ color:#fff; text-decoration:none; font-size:17px; font-weight:600; text-shadow:0 1px 10px rgba(39,39,38,.6); white-space:nowrap; border-bottom:2px solid transparent; padding-bottom:2px; } .nav a.navlink:hover{border-bottom-color:var(--red);} .support{ display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; text-decoration:none; font-size:16px; font-weight:700; border-radius:999px; padding:9px 20px; white-space:nowrap; } .support:hover{background:var(--red-dark);} .support svg{width:16px; height:16px; fill:currentColor;} /* cart — hidden until something is added */ .cartbtn{text-decoration:none; position:relative; display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); } body.has-cart .cartbtn{display:inline-flex;} .cartbtn:hover{background:rgba(255,255,255,.3);} .cartbtn svg{width:22px; height:22px; stroke:#fff; stroke-width:1.8; fill:none;} .cartbtn .count{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; background:var(--red); color:#fff; border-radius:999px; border:2px solid #fff; font-family:var(--body); font-size:12px; font-weight:700; line-height:16px; } /* toast confirming the add-to-cart */ .toast{ position:fixed; z-index:60; right:24px; bottom:24px; max-width:340px; background:var(--ink); color:#fff; padding:14px 18px; border-radius:8px; font-size:16px; box-shadow:0 8px 30px rgba(39,39,38,.28); opacity:0; transform:translateY(12px); pointer-events:none; transition:all .22s ease; } .toast.show{opacity:1; transform:translateY(0);} .toast b{font-weight:700;} /* ============ Breadcrumb ============ */ .crumb{padding:22px 0 18px; font-size:16px; color:var(--ink-30);} .crumb span{margin:0 8px;} .crumb a{text-decoration:none; color:var(--ink-30);} .crumb a:hover{color:var(--red);} /* ============ Hero band ============ */ .hero{ position:relative; overflow:hidden; text-align:center; color:#fff; min-height:clamp(340px,34vw,460px); display:block; padding:0; background:linear-gradient(140deg,#2E2E2C 0%,var(--ink) 46%,#6E1E22 100%); } /* light scrim at the top only — just enough for the nav to read */ .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(39,39,38,.52) 0%, rgba(39,39,38,.18) 22%, rgba(39,39,38,0) 45%); } /* ============ Page title (below the banner, per Figma) ============ */ .pagetitle{padding:4px 0 34px; max-width:900px;} .pagetitle .ph{ font-family:var(--head); font-weight:800; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:10px; } .pagetitle h1{ font-family:var(--head); font-weight:900; text-transform:uppercase; color:var(--ink); font-size:clamp(38px,5.4vw,58px); line-height:.98; letter-spacing:.005em; } .pagetitle .sub{font-size:22px; font-weight:600; color:var(--ink-70); margin-top:12px;} /* ============ Two-column body (wireframe layout) ============ */ .body{display:grid; grid-template-columns:1.6fr 1fr; align-items:start;} @media(max-width:900px){.body{grid-template-columns:1fr;} .right{border-left:0 !important;}} .left{padding:20px 56px 52px 0; border-right:1px solid var(--line);} @media(max-width:900px){.left{padding:36px 0 40px; border-right:0; border-bottom:1px solid var(--line);}} .lead{font-size:19px; line-height:1.5; color:var(--ink-70); margin-bottom:34px; max-width:62ch;} /* ---- Accordion sections (replaces the tabs) ---- */ .acc{border-top:1px solid var(--line);} .acc-item{border-bottom:1px solid var(--line);} .acc-q{ display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:19px 0; font-family:var(--body); font-size:19px; font-weight:700; color:var(--ink); } .acc-q:hover{color:var(--red) !important; background:transparent !important;} .acc-q:focus{ outline: 2px solid var(--red); outline-offset: 2px; background: none; color: var(--red); } .acc-q:focus:not(:focus-visible){ outline: none; } /* plus that becomes a minus — two bars, the upright one hides when open */ .acc-q .ind{position:relative; width:18px; height:18px; flex-shrink:0;} .acc-q .ind::before, .acc-q .ind::after{ content:""; position:absolute; background:var(--red); border-radius:1px; transition:opacity .16s ease; } .acc-q .ind::before{left:0; right:0; top:8px; height:2.5px;} /* horizontal */ .acc-q .ind::after{top:0; bottom:0; left:8px; width:2.5px;} /* upright */ .acc-item.open .acc-q .ind::after{opacity:0;} .acc-a{display:none; padding:0 0 24px 34px;} .acc-item.open .acc-a{display:block;} .acc-a p{font-size:18px; line-height:1.5; color:var(--ink-70); margin-bottom:14px; max-width:62ch;} .acc-a p:last-child{margin-bottom:0;} .acc-a p b{color:var(--ink); font-weight:700;} .acc-a h4{font-size:17px; font-weight:700; color:var(--ink); margin:20px 0 6px;} .acc-a ul.objectives{margin:6px 0 0; padding:0; list-style:none;} .acc-a ul.objectives li{ position:relative; font-size:18px; line-height:1.5; color:var(--ink-70); padding:0 0 8px 22px; max-width:62ch; } .acc-a ul.objectives li::before{ content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--red); } /* ---- Testimonial: pull quote ---- */ .quote{position:relative; margin-top:44px; padding:6px 0 0 62px;} .quote .mark{ position:absolute; left:0; top:-16px; font-family:var(--head); font-weight:900; font-size:88px; line-height:1; color:var(--red); } .quote .q{font-family:var(--head); font-weight:700; font-size:27px; line-height:1.2; color:var(--ink);} .quote .by{ font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--ink-30); margin-top:14px; } /* ============ Right rail ============ */ .right{padding:20px 0 52px 44px; position:sticky; top:24px;} @media(max-width:900px){.right{padding:36px 0 44px; position:static;}} .price{font-family:var(--head); font-weight:900; font-size:46px; line-height:1; color:var(--ink);} .price small{font-family:var(--body); font-size:17px; font-weight:400; color:var(--ink-50);} .feenote{ font-size:15px; color:var(--ink-50); background:var(--beige); border:1px solid var(--line); padding:10px 14px; margin:16px 0 20px; } /* ---- Registration status block (solid block) ---- */ .sblock{margin:24px 0 0; padding:16px 18px; color:#fff; background:var(--red); border-radius:6px; display:none;} .sblock.closed{background:var(--ink);} body[data-status="open"] .sblock.open{display:block;} body[data-status="restricted"] .sblock.restricted{display:block;} body[data-status="closed"] .sblock.closed{display:block;} .sblock .lbl{ font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:21px; line-height:1.05; margin-bottom:6px; } .sblock.note .txt{font-size:16px; color:#fff; display:flex; gap:9px; align-items:flex-start;} .sblock.note .i{font-size:17px; line-height:1.35; flex-shrink:0;} .sblock .txt{font-size:15.5px; line-height:1.4; color:rgba(255,255,255,.86);} .sblock .txt b{color:#fff; font-weight:700;} /* code box sits above the class list, on white */ .codewrap{display:none; margin:20px 0 4px; border:1px solid var(--line); border-radius:6px; padding:14px 16px 16px;} body[data-status="restricted"]:not(.unlocked) .codewrap{display:block;} .codewrap .codelead{font-size:15px; line-height:1.4; color:var(--ink-70);} .codewrap .codelead b{color:var(--ink); font-weight:700;} .codewrap .codebox .row{margin-top:10px;} .codewrap .codebox input{border:1px solid var(--line-strong); background:#fff;} .codewrap .codebox button{background:var(--ink); color:#fff;} .codewrap .codebox button:hover{background:var(--red);} .codewrap .codebox .ok{color:var(--ink);} .codebox .row{display:flex; gap:8px; margin-top:14px;} .codebox input{ flex:1; min-width:0; font-family:var(--body); font-size:16px; color:var(--ink); border:0; border-radius:6px; padding:12px 14px; background:#fff; } .codebox input:focus{outline:2px solid var(--ink); outline-offset:2px;} .codebox button{ font-family:var(--body); font-size:15px; font-weight:700; border:0; background:#fff; color:var(--ink); border-radius:999px; padding:12px 24px; cursor:pointer; } .codebox button:hover{background:var(--ink); color:#fff;} .codebox .ok{font-size:15px; font-weight:700; color:#fff; margin-top:10px; display:none;} .codebox .err{font-size:15px; font-weight:700; color:var(--red-dark); margin-top:10px; display:none;} .pick{ font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:15px; color:var(--ink); margin:26px 0 12px; } .slot{ border:1px solid var(--line-strong); background:#fff; padding:14px 16px; margin-bottom:10px; cursor:pointer; border-radius:6px; transition:border-color .15s ease, box-shadow .15s ease; } .slot:hover{border-color:var(--ink-30);} .slot.sel{border:2px solid var(--red); padding:13px 15px; box-shadow:0 0 0 3px var(--red-tint);} .slot .row{display:flex; justify-content:space-between; align-items:center; gap:10px;} .slot .name{font-size:18px; font-weight:700; color:var(--ink);} .slot .dot{width:18px; height:18px; border-radius:50%; border:2px solid var(--line-strong); flex-shrink:0;} .slot.sel .dot{border-color:var(--red); background:radial-gradient(circle,var(--red) 0 45%,#fff 46%);} .slot .cost{font-family:var(--head); font-weight:900; font-size:20px; color:var(--ink); white-space:nowrap;} .slot.full .cost{color:var(--ink-50);} .acc-a p.tight{font-size:16px; color:var(--ink-50); margin-top:14px;} .slot .when{font-size:16px; color:var(--ink-70); margin-top:5px;} .slot .cap{font-size:15px; color:var(--ink-50); margin-top:3px;} .pill{ font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:12px; padding:4px 10px; border-radius:999px; white-space:nowrap; } .pill-low{background:var(--amber); color:var(--amber-ink);} .pill-full{background:var(--red-tint); color:#8A1D25;} .slot.full{background:var(--beige);} .slot.full .name{color:var(--ink-50);} body[data-status="restricted"]:not(.unlocked) .slots{opacity:.45; pointer-events:none;} body[data-status="closed"] .slots{opacity:.5; pointer-events:none;} .ctas{margin-top:20px;} .st-audition-packet{margin-top:20px;} /* Explicit focus treatment for every button/link — without this, the browser's own default focus style can render as a jarring solid fill (seen on .acc-q, tied to this machine's accent colour) since the design otherwise only styles :hover, never :focus. */ button:focus, a:focus{ outline: 2px solid var(--red); outline-offset: 2px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline: none; } .btn{ display:block; width:100%; font-family:var(--body); font-size:19px; font-weight:700; border-radius:999px; padding:15px 20px; cursor:pointer; margin-bottom:10px; border:2px solid transparent; text-align:center; text-decoration:none; box-sizing:border-box; } .btn-primary{background:var(--red); color:#fff;} .btn-primary:hover{background:var(--red-dark);} .btn-ghost{background:#fff; color:var(--ink); border-color:var(--ink);} .btn-ghost:hover{background:var(--ink); color:#fff;} .btn[disabled]{opacity:.4; cursor:not-allowed;} .cta-enrol,.cta-trial,.cta-waitlist,.cta-notify{display:none;} /* open: you can book, so nothing else competes with Enrol */ body[data-status="open"] .cta-enrol, body[data-status="open"] .cta-trial{display:block;} body[data-status="restricted"] .cta-trial{display:block;} /* restricted: code-holders enrol, everyone else asks to be told */ body[data-status="restricted"].unlocked .cta-enrol{display:block;} body[data-status="restricted"] .cta-notify{ display:block; background:#fff; color:var(--ink); border-color:var(--ink); } body[data-status="restricted"] .cta-notify:hover{background:var(--ink); color:#fff;} /* closed: notifying is the only thing to do, so it IS the primary button */ body[data-status="closed"] .cta-notify{ display:block; background:var(--red); color:#fff; border-color:var(--red); } body[data-status="closed"] .cta-notify:hover{background:var(--red-dark); border-color:var(--red-dark);} body.waitlist .cta-enrol, body.waitlist .cta-trial{display:none;} body[data-status="open"].waitlist .cta-waitlist{display:block;} body[data-status="restricted"].waitlist.unlocked .cta-waitlist{display:block;} /* Higher specificity than "restricted + unlocked" alone (line above enrol reveal) — otherwise Enrol stays visible even when the selected slot is full, since that rule wins on specificity over the general ".waitlist hides enrol" rule. */ body[data-status="restricted"].unlocked.waitlist .cta-enrol{display:none !important;} .foot{font-size:15px; color:var(--ink-50); line-height:1.45; margin-top:40px; padding-top:22px; border-top:1px solid var(--line);} .foot a{color:var(--ink); font-weight:600;} .addr{font-size:15px; color:var(--ink-50); margin-top:14px; line-height:1.45;} /* ============ Gallery ============ */ .gallery{border-top:1px solid var(--line); padding:44px 0 64px;} .gallery h2{ font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.02em; font-size:32px; color:var(--ink); margin-bottom:20px; } .gallery .grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;} @media(max-width:780px){.gallery .grid{grid-template-columns:repeat(2,1fr);}} .gallery .grid div{ aspect-ratio:4/3; border-radius:4px; background:linear-gradient(135deg,#F2F0EA 0%,#E4E2DC 100%); } .gallery .grid div:nth-child(even){background:linear-gradient(135deg,var(--red-tint) 0%,#F6D7D9 100%);} /* ============ Red CTA band + footer (brand chrome) ============ */ .band{background:var(--red); color:#fff; text-align:center; padding:56px 24px;} .band h2{ font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:clamp(26px,4vw,38px); line-height:1.05; } .band p{font-size:18px; margin:14px auto 26px; max-width:56ch; opacity:.95;} .band a{ display:inline-block; text-decoration:none; background:#fff; color:var(--red); font-weight:700; font-size:17px; border-radius:999px; padding:13px 34px; } .band a:hover{background:var(--ink); color:#fff;} .sitefoot{background:var(--ink); color:rgba(255,255,255,.7); padding:48px 0 40px; font-size:16px; line-height:1.6;} .sitefoot .cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;} @media(max-width:780px){.sitefoot .cols{grid-template-columns:1fr;}} .sitefoot .footlogo{width:180px; height:auto; display:block; margin-bottom:22px;} .sitefoot h4{ font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:15px; color:#fff; margin-bottom:12px; } .sitefoot a{color:rgba(255,255,255,.7); text-decoration:none;} .sitefoot a:hover{color:#fff;} /* ========================================================= MOBILE (placed last so it wins the cascade) ========================================================= */ .burger{ display:none; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:999px; background:rgba(255,255,255,.16); cursor:pointer; } .burger svg{width:24px; height:24px; stroke:#fff; stroke-width:2; stroke-linecap:round;} .mobmenu{ position:fixed; inset:0; z-index:90; background:var(--ink); padding:20px 24px 40px; display:none; flex-direction:column; } body.menu-open .mobmenu{display:flex;} body.menu-open{overflow:hidden;} .mobmenu .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;} .mobmenu .top img{width:180px; height:auto; display:block;} .mobmenu .x{ width:44px; height:44px; border:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; } .mobmenu .x svg{width:26px; height:26px; stroke:#fff; stroke-width:2; stroke-linecap:round;} .mobmenu a.m{ font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:26px; color:#fff; text-decoration:none; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16); } .mobmenu .support{margin-top:28px; align-self:flex-start; font-size:18px; padding:12px 26px;} /* sticky booking bar — the rail is a long way down on a phone */ .mobbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none; align-items:center; gap:14px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 22px rgba(39,39,38,.12); } .mobbar .p{font-family:var(--head); font-weight:900; font-size:25px; line-height:1; white-space:nowrap;} .mobbar .p small{font-family:var(--body); font-size:13px; font-weight:400; color:var(--ink-50);} .mobbar .btn{flex:1; width:auto; margin:0; padding:13px 16px; font-size:17px;} .mobbar .lab{display:none;} body[data-status="open"] .mobbar .lab.open{display:inline;} body[data-status="restricted"]:not(.unlocked) .mobbar .lab.restricted{display:inline;} body[data-status="restricted"].unlocked .mobbar .lab.open{display:inline;} body[data-status="closed"] .mobbar .lab.closed{display:inline;} @media(max-width:1000px){ .nav .navlinks{display:none;} .nav .support{display:none;} .burger{display:inline-flex;} .nav{gap:12px;} } @media(max-width:900px){ .mobbar{display:flex;} body{padding-bottom:78px;} .toast{bottom:88px; left:16px; right:16px; max-width:none;} .hero{min-height:clamp(240px,52vw,340px);} .siteheader .bar{padding:16px 20px;} .logo img{width:150px;} .pagetitle{padding-bottom:24px;} .pagetitle h1{font-size:clamp(34px,9vw,44px);} .pagetitle .sub{font-size:19px;} .lead{font-size:18px; margin-bottom:28px;} .acc-q{font-size:18px;} .acc-a{padding-left:34px;} .acc-a p{font-size:17px;} .quote{padding-left:0; padding-top:44px;} .quote .mark{top:-6px; font-size:66px;} .quote .q{font-size:23px;} .right{margin-top:4px;} } @media(max-width:420px){ .mobbar .p{font-size:21px;} .mobbar .p small{display:none;} .mobbar .btn{font-size:16px; padding:13px 12px;} } /* quiet ask link in the booking rail, at the point of decision */ .asklink{ display:block; text-align:center; font-size:15px; color:var(--ink-50); margin-top:16px; text-decoration:none; } .asklink b{color:var(--ink); font-weight:700; border-bottom:1px solid var(--line-strong);} .asklink:hover b{color:var(--red); border-bottom-color:var(--red);} /* ---- Academy dropdown ---- */ .has-drop{position:relative;} .has-drop > .navlink{display:inline-flex; align-items:center; gap:6px;} .has-drop > .navlink svg{width:11px; height:11px; stroke:currentColor; stroke-width:2.4; fill:none; transition:transform .16s;} .has-drop:hover > .navlink svg, .has-drop:focus-within > .navlink svg{transform:rotate(180deg);} .drop{ position:absolute; top:100%; left:-18px; min-width:320px; padding:8px 0; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 14px 40px rgba(39,39,38,.16); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease, visibility .15s; } .has-drop:hover .drop, .has-drop:focus-within .drop{opacity:1; visibility:visible; transform:translateY(0);} .drop::before{content:""; position:absolute; top:-14px; left:0; right:0; height:14px;} .drop a{ display:block; padding:11px 20px; text-decoration:none; color:var(--ink); font-size:17px; font-weight:600; line-height:1.25; text-align:left; text-shadow:none; } .drop a span{display:block; font-size:14px; font-weight:400; color:var(--ink-50); margin-top:2px;} .drop a:hover{background:var(--beige); color:var(--red);} .drop a.on{color:var(--red);} .drop a.on span{color:var(--red); opacity:.7;} .drop .sep{height:1px; background:var(--line); margin:8px 0;} .drop a.all{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:14px;} /* mobile menu sub-list */ .mobmenu .sub{padding:6px 0 14px; border-bottom:1px solid rgba(255,255,255,.16);} .mobmenu .sub a{ display:block; padding:10px 0 10px 16px; color:rgba(255,255,255,.72); text-decoration:none; font-size:17px; border-left:2px solid rgba(255,255,255,.22); margin-left:2px; } .mobmenu .sub a.on{color:#fff; border-left-color:var(--red);} .mobmenu a.m.nb{border-bottom:0; padding-bottom:6px;} .drop a.all.backend{color:var(--ink-50); font-family:var(--body); font-weight:600; text-transform:none; letter-spacing:0; font-size:16px;} .drop a.all.backend span{font-family:var(--body); font-weight:400; text-transform:none; letter-spacing:0;} .drop a.all.backend:hover{color:var(--red);} .mobmenu .sub a.backend{color:rgba(255,255,255,.5);} /* ---- Concert page ---- */ .meta{margin:0 0 28px;} .meta .m{display:block; position:relative; padding-left:16px; font-size:17px; font-weight:600; color:var(--ink); line-height:1.4;} .meta .m::before{content:""; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:2px; background:var(--red);} .slot.full{cursor:not-allowed;} .qtyrow{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line-strong); border-radius:6px; padding:12px 14px; margin-top:18px;} .qtyrow .lab{font-size:16px; font-weight:700; color:var(--ink);} .stepper{display:flex; align-items:center; gap:2px;} .stepper button{width:38px; height:38px; border:1px solid var(--line-strong); background:#fff; font-family:var(--body); font-size:20px; font-weight:700; color:var(--ink); cursor:pointer;} .stepper button:first-child{border-radius:6px 0 0 6px;} .stepper button:last-child{border-radius:0 6px 6px 0;} .stepper button:hover{background:var(--ink); color:#fff; border-color:var(--ink);} .stepper button[disabled]{opacity:.35; cursor:not-allowed; background:#fff; color:var(--ink);} .stepper .n{width:52px; text-align:center; font-family:var(--head); font-weight:900; font-size:22px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); line-height:36px; font-variant-numeric:tabular-nums;} .totrow{display:flex; align-items:baseline; justify-content:space-between; margin:18px 0 2px; padding-top:16px; border-top:1px solid var(--line);} .totrow .lab{font-size:17px; font-weight:700;} .totrow .amt{font-family:var(--head); font-weight:900; font-size:34px; font-variant-numeric:tabular-nums;} .totrow .amt small{font-family:var(--body); font-size:15px; font-weight:400; color:var(--ink-50);} .lineup{margin:6px 0 0; padding:0; list-style:none;} .lineup li{position:relative; font-size:18px; line-height:1.5; color:var(--ink-70); padding:0 0 8px 22px;} .lineup li::before{content:""; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--red);} /* ===== Home & About ===== */ .hero .heroin{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:150px 32px 60px; text-align:left;} @media(max-width:900px){.hero .heroin{padding:110px 20px 44px;}} .hero h1{font-family:var(--head); font-weight:900; text-transform:uppercase; color:#fff; font-size:clamp(34px,5.4vw,62px); line-height:1.0; letter-spacing:.005em;} .hero h1 em{font-style:normal; color:var(--red);} .hero .sub{color:rgba(255,255,255,.82); font-size:clamp(17px,2vw,21px); margin-top:16px; max-width:52ch;} .hero .btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;} .hero .btns a{display:inline-block; text-decoration:none; font-size:16px; font-weight:700; border-radius:999px; padding:12px 24px; border:2px solid #fff; color:#fff;} .hero .btns a.solid{background:var(--red); border-color:var(--red);} .hero .btns a.solid:hover{background:var(--red-dark); border-color:var(--red-dark);} .hero .btns a:hover{background:#fff; color:var(--ink);} section.pad{padding:56px 0;} section.pad.tint{background:var(--beige); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} h2.big{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:clamp(26px,3.4vw,38px); line-height:1.02; color:var(--ink); margin-bottom:8px;} .kick{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:13px; color:var(--red); margin-bottom:10px;} .lede{font-size:19px; line-height:1.55; color:var(--ink-70); max-width:64ch;} .news{display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:start;} @media(max-width:860px){.news{grid-template-columns:1fr;}} .news .feat{display:block; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--paper);} .news .feat:hover{border-color:var(--red);} .news .feat .img{aspect-ratio:16/8; background:linear-gradient(135deg,var(--red-tint) 0%,#F6D7D9 100%);} .news .feat .txt{padding:18px 20px 20px;} .news .feat .when{font-size:13.5px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.08em;} .news .feat h3{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:26px; line-height:1.05; margin:7px 0 6px;} .news .feat p{font-size:16px; color:var(--ink-70); line-height:1.45;} .news ul{list-style:none; display:grid; gap:0; border-top:1px solid var(--line-strong);} .news ul li{border-bottom:1px solid var(--line);} .news ul a{display:block; text-decoration:none; color:inherit; padding:15px 0;} .news ul a:hover .t{color:var(--red);} .news ul .when{font-size:13px; color:var(--ink-50); text-transform:uppercase; letter-spacing:.08em; font-weight:700;} .news ul .t{font-size:18px; font-weight:700; margin-top:3px; line-height:1.3;} .three{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media(max-width:860px){.three{grid-template-columns:1fr;}} .col{display:flex; flex-direction:column;} .col .img{aspect-ratio:4/3; border-radius:8px; margin-bottom:16px; background:linear-gradient(135deg,#F2F0EA 0%,#E4E2DC 100%);} .col:nth-child(2) .img{background:linear-gradient(135deg,var(--red-tint) 0%,#F6D7D9 100%);} .col h3{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:25px; line-height:1.05; margin-bottom:8px;} .col p{font-size:17px; color:var(--ink-70); line-height:1.5; margin-bottom:12px;} .col .pp{font-size:15px; font-weight:700; color:var(--ink); border-left:3px solid var(--red); padding-left:10px; margin-bottom:14px;} .col a.more{margin-top:auto; align-self:flex-start; text-decoration:none; font-size:16px; font-weight:700; color:var(--ink); border-bottom:2px solid var(--red); padding-bottom:2px;} .col a.more:hover{color:var(--red);} .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;} @media(max-width:760px){.stats{grid-template-columns:1fr;}} .stat .n{font-family:var(--head); font-weight:900; font-size:clamp(40px,5vw,58px); line-height:1; color:var(--red); font-variant-numeric:tabular-nums;} .stat .l{font-size:17px; color:var(--ink-70); margin-top:8px; max-width:26ch;} .stmt{background:var(--ink); color:#fff; padding:60px 0;} .stmt h2{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:clamp(26px,3.6vw,40px); line-height:1.05; max-width:22ch; color:#fff;} .stmt p{color:rgba(255,255,255,.74); font-size:19px; line-height:1.55; margin-top:16px; max-width:62ch;} .people{display:grid; grid-template-columns:repeat(2,1fr); gap:36px;} @media(max-width:760px){.people{grid-template-columns:1fr;}} .plist h4{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--red); margin-bottom:10px;} .plist ul{list-style:none; display:grid; gap:7px;} .plist li{font-size:17px; color:var(--ink-70);} .plist li b{color:var(--ink); font-weight:700;} .plist + .plist{margin-top:28px;} .logos{display:flex; flex-wrap:wrap; gap:8px;} .logos span{font-size:15px; font-weight:600; color:var(--ink-70); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 15px;} .two{display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;} @media(max-width:860px){.two{grid-template-columns:1fr;}} .portrait{aspect-ratio:3/4; border-radius:8px; background:linear-gradient(135deg,#F2F0EA 0%,#E4E2DC 100%);} .prose p{font-size:17.5px; line-height:1.6; color:var(--ink-70); margin-bottom:12px; max-width:64ch;} .prose p b{color:var(--ink);} /* ============ Cart page ============ */ .cotitle{margin:6px 0 26px;} .cotitle .ph{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:14px; color:var(--red); margin-bottom:6px;} .cotitle h1{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:clamp(38px,5vw,58px); line-height:.95; color:var(--ink);} .cobody{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:start; padding-bottom:70px;} @media(max-width:860px){.cobody{grid-template-columns:1fr;}} /* checkout.js inserts validation error notices by prepending them directly inside
itself — as an unexpected third grid item, with no explicit placement, squeezing/shifting .coleft and .coright. Force it to always span full width and sit on its own row instead of participating in the 2-column layout. */ .cobody > .woocommerce-error, .cobody > .woocommerce-message, .cobody > .woocommerce-info, .cobody > .woocommerce-NoticeGroup{ grid-column:1 / -1; } .tag{display:inline-block; background:var(--red-tint); color:#8A1D25; border-radius:999px; font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:12px; padding:3px 10px; margin-left:6px; vertical-align:2px; white-space:nowrap;} .coright{position:sticky; top:24px;} @media(max-width:860px){.coright{position:static;}} .summary{border:1px solid var(--line); border-radius:8px; padding:24px 24px 26px; background:var(--beige);} .summary h2{font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.03em; font-size:21px; color:var(--ink); margin-bottom:16px;} .line{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:16px; color:var(--ink);} .line:first-of-type{border-top:0; padding-top:0;} .line .qty{color:var(--ink-50);} .line.sub{color:var(--ink-70);} .line.total{border-top:2px solid var(--ink); font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:24px; align-items:baseline;} .place{width:100%; margin-top:18px;} a.place{display:block; text-align:center; text-decoration:none;} .receipt{display:flex; gap:9px; align-items:flex-start; margin-top:16px; font-size:14px; line-height:1.5; color:var(--ink-70);} .receipt .i{color:var(--red); font-size:16px; line-height:1.3; flex-shrink:0;} .cart{border:1px solid var(--line); border-radius:8px; overflow:hidden;} .crow{display:grid; grid-template-columns:minmax(0,1fr) 90px 120px; gap:18px; padding:18px 22px; border-top:1px solid var(--line); align-items:start;} .crow:first-child{border-top:0;} .crow.head{background:var(--beige); padding:11px 22px; font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:.07em; font-size:12.5px; color:var(--ink-50);} .crow .c-qty, .crow .c-amt{text-align:right;} .c-name{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:19px; line-height:1.1; color:var(--ink);} .c-meta{font-size:14.5px; color:var(--ink-50); line-height:1.45; margin-top:4px;} .c-amt{font-size:18px; font-weight:700; color:var(--ink); white-space:nowrap;} .c-qty input{width:64px; text-align:center; font-family:var(--body); font-size:16px; border:1px solid var(--line-strong); border-radius:6px; padding:7px 6px; color:var(--ink); background:#fff;} .c-remove{background:none; border:0; padding:0; margin-top:10px; cursor:pointer; font-family:var(--body); font-size:14px; font-weight:700; color:var(--ink-50); text-decoration:underline; text-underline-offset:3px;} .c-remove:hover{color:var(--red);} .crow.sub{background:var(--beige);} .crow.sub .c-name{font-size:16px;} .crow.sub .c-amt{font-size:16px; font-weight:700;} .auto{font-family:var(--body); font-weight:700; text-transform:none; letter-spacing:0; font-size:12px; color:var(--ink-50); background:#fff; border:1px solid var(--line-strong); border-radius:999px; padding:2px 9px; margin-left:8px; vertical-align:2px;} .crow.empty{padding:34px 22px;} .crow.empty .c-meta a{color:var(--red); font-weight:700;} .addons{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; border:1px dashed var(--line-strong); border-radius:8px; padding:20px 22px; margin-top:20px; background:var(--beige);} .addons.soft{background:transparent; border-style:dashed;} .addons .ad-h{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:19px; color:var(--ink);} .addons p{font-size:15px; color:var(--ink-70); line-height:1.45; margin-top:5px; max-width:52ch;} .ad-btn{flex-shrink:0; white-space:nowrap; width:auto;} .keepon{display:block; text-align:center; margin-top:12px; font-size:15px; font-weight:700; color:var(--ink-50); text-decoration:underline; text-underline-offset:3px;} .keepon:hover{color:var(--red);} .friendbar{border:1px solid var(--red); background:var(--red-tint); border-radius:8px; padding:13px 16px; margin-bottom:14px;} .friendbar .pb-t{display:block; font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:13px; color:var(--red); margin-bottom:4px;} .friendbar .pb-b{display:block; font-size:14.5px; line-height:1.45; color:var(--ink-70);} /* ============ My Account ============ */ .acbody{display:grid; grid-template-columns:240px minmax(0,1fr); gap:48px; align-items:start; padding-bottom:70px;} @media(max-width:760px){.acbody{grid-template-columns:1fr; gap:26px;}} .acnav{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; overflow:hidden;} .acnav a{display:block; padding:13px 18px; text-decoration:none; font-family:var(--body) !important; font-size:16px !important; font-weight:600; color:var(--ink-70); border-bottom:1px solid var(--line);} .acnav a:last-child{border-bottom:0;} .acnav a:hover{background:var(--beige); color:var(--ink);} .acnav a.on{background:var(--red); color:#fff; font-weight:700;} .acnav a.out{color:var(--ink-50);} .acmain h2{font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.03em; font-size:27px; color:var(--ink); margin-bottom:12px;} .acmain h3.sub{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:19px; color:var(--ink); margin:28px 0 12px; padding-top:20px; border-top:1px solid var(--line);} .acmain .lead{font-size:16.5px !important; color:var(--ink-70); line-height:1.55; margin-bottom:22px; max-width:66ch;} .hello{font-family:var(--body) !important; font-size:18px !important; margin-bottom:6px;} .hello a{color:var(--red); font-weight:700;} /* order/receipt tables */ .tbl{border:1px solid var(--line); border-radius:8px; overflow:hidden;} .trow{display:grid; grid-template-columns:1fr 1.1fr 1.2fr .9fr .8fr; gap:14px; padding:14px 18px; border-top:1px solid var(--line); align-items:center; font-family:var(--body) !important; font-size:15.5px !important;} .trow:first-child{border-top:0;} .trow.head{background:var(--beige); padding:10px 18px; font-family:var(--head) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.07em; font-size:12.5px !important; color:var(--ink-50);} .trow .r{text-align:right;} .mono{font-variant-numeric:tabular-nums; font-weight:700;} .pill.ok{background:var(--ok); color:var(--ok-ink); border:1px solid var(--ok-line);} .pill.warn{background:var(--amber); color:var(--amber-ink); border:1px solid var(--amber-line);} .pill.wait{background:var(--amber); color:var(--amber-ink); border:1px solid var(--amber-line);} /* my-classes cards */ .ccard{border:1px solid var(--line); border-radius:8px; padding:20px 22px; margin-bottom:16px;} .cc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px;} .cc-name{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:22px; line-height:1.05; color:var(--ink);} .cc-meta{font-family:var(--body) !important; font-size:15px !important; color:var(--ink-50); margin-top:4px;} .cc-rows div{display:flex; gap:12px; font-family:var(--body) !important; font-size:15.5px !important; color:var(--ink); padding:6px 0; border-top:1px solid var(--line); line-height:1.45;} .cc-rows div span{flex:0 0 110px; color:var(--ink-50); font-weight:700; font-size:14px; padding-top:1px;} .cc-acts{display:flex; gap:18px; flex-wrap:wrap; margin-top:14px;} /* addresses */ .addr2{display:grid; grid-template-columns:1fr 1fr; gap:16px;} @media(max-width:600px){.addr2{grid-template-columns:1fr;}} .tierbox{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border:1px solid var(--red); border-radius:8px; padding:16px 18px; margin-top:18px;} .tierbox .tb-h{font-family:var(--head); font-weight:900; text-transform:uppercase; font-size:21px; color:var(--ink);} .tierbox .tb-s{font-family:var(--body) !important; font-size:14.5px !important; color:var(--ink-50); margin-top:3px;} .tierbox .tb-r{text-align:right;} .tierbox .tb-b{font-family:var(--body) !important; font-size:15.5px !important; font-weight:700; color:var(--red); margin-bottom:6px;} .note{font-family:var(--body) !important; font-size:15px !important; color:var(--ink-70); background:var(--beige); border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin-bottom:18px;} .note.ack{margin-top:18px; background:var(--beige); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font-family:var(--body) !important; font-size:15.5px !important; color:var(--ink-70);} .note.ack b{color:var(--ink);} .note.ack .mini{margin-left:8px;} .line.friend .l-name{color:var(--red); font-weight:700;} .line.friend .l-amt{color:var(--red); font-weight:700;} .line.friend .pd{display:block; font-size:13px; font-weight:400; color:var(--ink-50); margin-top:2px;} /* ============ Checkout page ============ */ .loginbar{border:1px solid var(--line); border-left:4px solid var(--red); border-radius:0 8px 8px 0; padding:14px 18px; margin-bottom:20px; font-size:16px !important; font-family:var(--body) !important; color:var(--ink-70);} .loginbar a{color:var(--red); text-decoration:none;} .loginbar a:hover{text-decoration:underline;} .loginbox{display:none; margin-top:14px;} .loginbox.open{display:block;} .loginacts{display:flex; align-items:center; gap:18px; margin-top:12px;} .btn.sm{padding:9px 22px; font-size:15px; width:auto;} .mini{font-family:var(--body) !important; font-size:14px !important; color:var(--ink-50); text-decoration:underline;} .mini:hover{color:var(--red);} .card{border:1px solid var(--line); border-radius:8px; padding:24px 26px 26px; margin-bottom:20px;} .card h2{font-family:var(--head); font-weight:900; text-transform:uppercase; letter-spacing:.03em; font-size:23px; color:var(--ink); margin-bottom:18px;} .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;} @media(max-width:600px){.grid2{grid-template-columns:1fr;}} .fld.wide{grid-column:1 / -1;} .fld{width:100% !important; float:none !important; margin:0 !important;} .fld label{display:block; font-family:var(--body) !important; font-size:14.5px !important; font-weight:700 !important; color:var(--ink) !important; margin-bottom:6px;} .fld label .required{color:var(--red) !important; font-style:normal;} .fld label .optional{color:var(--ink-50) !important; font-weight:400 !important; font-size:13.5px !important;} .fld input, .fld select, .fld textarea{width:100% !important; font-family:var(--body) !important; font-size:16px !important; color:var(--ink) !important; border:1px solid var(--line-strong) !important; border-radius:6px !important; padding:11px 13px !important; background:#fff !important; box-sizing:border-box !important; height:auto !important; margin:0 !important;} .fld input:focus, .fld select:focus, .fld textarea:focus{outline:2px solid var(--red) !important; outline-offset:1px; border-color:var(--red) !important; box-shadow:none !important;} .fld .hint{font-family:var(--body) !important; font-size:13.5px !important; color:var(--ink-50) !important; margin-top:6px; line-height:1.45;} /* The Country field gets replaced by a select2/selectWoo widget via WooCommerce's own JS — its generated markup bypasses ".fld select" entirely, so it needs its own matching overrides. */ .fld .select2-container{width:100% !important;} .fld .select2-container .select2-selection--single{ height:auto !important; border:1px solid var(--line-strong) !important; border-radius:6px !important; background:#fff !important; padding:11px 13px !important; box-sizing:border-box !important; } .fld .select2-container .select2-selection__rendered{ padding:0 !important; font-family:var(--body) !important; font-size:16px !important; color:var(--ink) !important; line-height:1.3 !important; } .fld .select2-container .select2-selection__arrow{height:100% !important; top:0 !important; right:10px !important;} .fld .select2-container--focus .select2-selection--single, .fld .select2-container--open .select2-selection--single{ outline:2px solid var(--red) !important; outline-offset:1px; border-color:var(--red) !important; } /* Validation states — WooCommerce adds these classes to the field wrapper on submit; unstyled by default. */ .fld.woocommerce-invalid input, .fld.woocommerce-invalid select{border-color:var(--red); background:var(--red-tint);} .fld.woocommerce-validated input, .fld.woocommerce-validated select{border-color:var(--ok-line);} /* The country/state fields get enhanced into a Select2 dropdown by WooCommerce's own JS — its internal markup doesn't match a plain