/* ══════════════════════════════════════════════════════════════ HART JIU JITSU — shared stylesheet Every page loads this. Page-specific rules live in the page. No !important needed anywhere now that Elementor is gone. ══════════════════════════════════════════════════════════════ */ :root{ --red:#D90E16; --red-bright:#F01119; --red-soft:rgba(217,14,22,.08); --blue:#1A4FCC; --blue-bright:#2460E8; --blue-soft:rgba(26,79,204,.08); --bg:#FFFFFF; --bg-alt:#E8EAED; --border:rgba(0,0,0,.08); --border-med:rgba(0,0,0,.14); --text-dark:#0F0F14; --text-mid:#3A3A44; --text-light:#888896; --ink:#0F0F14; --ink-2:#1a1a24; --shadow-sm:0 2px 8px rgba(0,0,0,.07); --shadow-md:0 4px 20px rgba(0,0,0,.10); --shadow-lg:0 8px 40px rgba(0,0,0,.12); --nav-h:70px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Barlow',sans-serif;background:var(--bg);color:var(--text-dark); overflow-x:hidden;-webkit-font-smoothing:antialiased;padding-top:var(--nav-h)} img{max-width:100%;display:block} a{color:var(--blue)} :focus-visible{outline:2px solid var(--blue);outline-offset:3px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ── full-bleed sections ───────────────────────────────── */ .fw{width:100vw;margin-left:calc(-50vw + 50%);position:relative} /* ── type ──────────────────────────────────────────────── */ .cond{font-family:'Barlow Condensed',sans-serif} .section-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:10px; display:flex;align-items:center;gap:10px} .section-label::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .section-label.blue{color:var(--blue)} .section-label.blue::before{background:var(--blue)} .section-label.center{justify-content:center} .section-title{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,5vw,3.8rem);line-height:1;text-transform:uppercase; letter-spacing:.01em;color:var(--text-dark)} .section-title span{color:var(--red)} .section-title span.blue{color:var(--blue)} .divider{width:48px;height:3px;background:var(--red);margin:18px 0 30px;border-radius:2px} .divider.blue{background:var(--blue)} .divider.center{margin-left:auto;margin-right:auto} /* ── buttons ───────────────────────────────────────────── */ .btn-primary,.btn-secondary{display:inline-block;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:1rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;border-radius:3px;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s} .btn-primary{padding:16px 40px;color:#fff;background:var(--red);border:2px solid var(--red); box-shadow:0 4px 16px rgba(217,14,22,.35)} .btn-primary:hover{background:var(--red-bright);border-color:var(--red-bright); transform:translateY(-2px);box-shadow:0 6px 24px rgba(217,14,22,.45)} .btn-primary:link,.btn-primary:visited{color:#fff} .btn-secondary{padding:14px 38px;color:var(--blue);background:transparent;border:2px solid var(--blue); box-shadow:0 2px 10px rgba(26,79,204,.15)} .btn-secondary:hover{background:var(--blue);color:#fff;transform:translateY(-2px)} .btn-secondary:link,.btn-secondary:visited{color:var(--blue)} .btn-secondary:hover:link,.btn-secondary:hover:visited{color:#fff} /* ══ HEADER ════════════════════════════════════════════════ */ .hjj-nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center; justify-content:center;height:var(--nav-h);background:var(--ink); border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 20px rgba(0,0,0,.3)} .hjj-nav-inner{max-width:1320px;width:100%;padding:0 48px;display:flex;align-items:center; justify-content:space-between;gap:20px} .hjj-nav-logo{flex-shrink:0;position:relative;z-index:10} .hjj-nav-logo img{height:90px;width:auto;position:relative;top:18px; filter:drop-shadow(0 0 8px rgba(135,206,250,.6)) drop-shadow(0 0 20px rgba(100,200,255,.4))} .hjj-nav-links{display:flex;gap:22px;list-style:none;align-items:center} .hjj-nav-links a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.7); white-space:nowrap;transition:color .18s} .hjj-nav-links a:hover{color:#fff} .hjj-nav-links a.active{color:var(--red)} .hjj-nav-right{display:flex;align-items:center;gap:14px} .hjj-nav-social{display:flex;align-items:center;gap:10px; border-right:1px solid rgba(255,255,255,.15);padding-right:14px} .hjj-soc{display:flex;align-items:center;justify-content:center;width:28px;height:28px; opacity:.85;transition:transform .18s,opacity .18s;text-decoration:none} .hjj-soc:hover{transform:translateY(-2px);opacity:1} .hjj-soc svg{width:16px;height:16px} .hjj-soc-fb{color:#4599FF}.hjj-soc-ig{color:#E1306C}.hjj-soc-yt{color:#FF4444}.hjj-soc-tt{color:#fff} .hjj-nav-phone{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.85rem; color:rgba(255,255,255,.7);text-decoration:none;white-space:nowrap} .hjj-nav-phone:hover{color:#fff} .hjj-nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .hjj-cta{display:inline-flex;align-items:center;justify-content:center; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.86rem;letter-spacing:.1em; text-transform:uppercase;text-decoration:none;color:#fff;background:var(--red); border:2px solid var(--red);border-radius:3px;padding:10px 20px;white-space:nowrap; box-shadow:0 3px 14px rgba(217,14,22,.38);transition:background .2s,transform .2s} .hjj-cta:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-1px)} .hjj-cta:link,.hjj-cta:visited{color:#fff} .hjj-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px; width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:10px;flex-shrink:0} .hjj-hamburger span{display:block;width:24px;height:3px;background:#fff;border-radius:2px;transition:all .3s} .hjj-mobile-menu{display:none;position:fixed;inset:0;width:100vw;height:100vh;background:var(--ink); z-index:999999;flex-direction:column;align-items:center;justify-content:center;gap:24px; padding:40px 32px;overflow-y:auto} .hjj-mobile-menu.hjj-open{display:flex} .hjj-mobile-close{position:absolute;top:16px;right:20px;background:none;border:none; font-size:2.2rem;color:#fff;cursor:pointer;width:48px;height:48px;display:flex; align-items:center;justify-content:center} .hjj-mobile-cta{display:inline-flex;align-items:center;justify-content:center; font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem;letter-spacing:.12em; text-transform:uppercase;text-decoration:none;color:#fff;background:var(--red); border:2px solid var(--red);border-radius:4px;padding:15px 34px; box-shadow:0 4px 20px rgba(217,14,22,.4)} .hjj-mobile-cta:link,.hjj-mobile-cta:visited{color:#fff} .hjj-mobile-links{list-style:none;text-align:center;display:flex;flex-direction:column;gap:20px} .hjj-mobile-links a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.85rem; letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;display:block} .hjj-mobile-links a:hover{color:var(--red)} .hjj-mobile-phone{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.3rem; color:rgba(255,255,255,.8);text-decoration:none;margin-top:8px} .hjj-mobile-social{display:flex;gap:14px;margin-top:8px} .hjj-mobile-social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.25);border-radius:8px;color:rgba(255,255,255,.8)} .hjj-mobile-social a:hover{border-color:var(--red);color:var(--red)} .hjj-mobile-social a svg{width:20px;height:20px;fill:currentColor} /* ── page hero (interior pages) ────────────────────────── */ .page-hero{overflow:hidden;background:var(--ink);padding:70px 48px 50px;text-align:center} .page-hero-stripe{position:absolute;bottom:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--red),var(--blue)); box-shadow:0 0 12px rgba(217,14,22,.6),0 0 24px rgba(26,79,204,.4)} .page-hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:12px} .page-hero-title{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.8rem,6vw,5rem);line-height:.92;text-transform:uppercase;color:#fff;margin-bottom:16px} .page-hero-title .accent{color:var(--red)} .page-hero-title .accent.blue{color:var(--blue)} .page-hero-sub{font-size:1.05rem;line-height:1.65;color:rgba(255,255,255,.55);max-width:600px;margin:0 auto} .page-hero-accent{position:absolute;border-radius:50%;pointer-events:none} .page-hero-accent.c1{width:600px;height:600px;top:-150px;right:-100px; background:radial-gradient(circle,rgba(26,79,204,.15),transparent 70%)} .page-hero-accent.c2{width:400px;height:400px;bottom:-80px;left:-80px; background:radial-gradient(circle,rgba(217,14,22,.10),transparent 70%)} /* split hero (program pages) */ .page-hero.split{text-align:left;padding:70px 48px 60px} .page-hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr; gap:60px;align-items:center;position:relative;z-index:1} .page-hero.split .page-hero-eyebrow{display:flex;align-items:center;gap:12px} .page-hero.split .page-hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--red)} .page-hero.split .page-hero-title{font-size:clamp(3rem,6vw,5.5rem);margin-bottom:20px} .page-hero.split .page-hero-title .accent{display:block} .page-hero.split .page-hero-sub{color:rgba(255,255,255,.6);margin:0 0 32px;max-width:500px;font-size:1.08rem} .page-hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .hero-img-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)} .hero-img-wrap img{width:100%;aspect-ratio:4/3;object-fit:cover} .hero-img-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px; background:linear-gradient(90deg,var(--red),var(--blue))} /* ── shared cards / grids ──────────────────────────────── */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feature-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:32px 28px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s} .feature-card:nth-child(even){border-top-color:var(--blue)} .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .feature-icon{font-size:2rem;margin-bottom:16px} .feature-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px} .feature-desc{font-size:.95rem;line-height:1.65;color:var(--text-mid)} /* belt badges — generated from belt colour + degree */ .coach-rank-badge,.bb-belt-badge{position:absolute;z-index:2;display:flex;align-items:stretch; overflow:hidden;border-radius:2px;border:1px solid rgba(0,0,0,.45);box-shadow:0 3px 14px rgba(0,0,0,.6)} .coach-rank-badge{bottom:-10px;right:-10px;height:22px} .bb-belt-badge{top:14px;left:14px;height:16px} .crb-black{background:#1a1a1a;height:100%;width:90px; background-image:repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,.03) 3px,rgba(255,255,255,.03) 4px)} .crb-red{background:#C0080F;height:100%;width:40px;flex-shrink:0;display:flex;align-items:center; justify-content:center;gap:5px;padding:0 6px} .crb-stripe{width:3.5px;height:100%;background:#fff;opacity:.92;flex-shrink:0} .crb-brown{background:#5C3A1E;height:100%;width:90px} .crb-tail{background:#1a1a1a;height:100%;width:18px;flex-shrink:0} .crb-brown-tail{background:#5C3A1E;height:100%;width:18px;flex-shrink:0} .crb-black-bar{background:#1a1a1a;height:100%;width:40px;flex-shrink:0} .bb-belt-badge .crb-black{width:72px} .bb-belt-badge .crb-red{width:32px;padding:0 5px;gap:4px} .bb-belt-badge .crb-stripe{width:3px} .bb-belt-badge .crb-tail{width:14px} .bb-belt-badge .crb-brown{width:72px} .bb-belt-badge .crb-black-bar{width:32px} .bb-belt-badge .crb-brown-tail{width:14px} /* ── schedule (shared by homepage + /schedule/) ────────── */ .sched-wrap{background:#fff;border:1px solid var(--border-med);border-radius:8px; box-shadow:var(--shadow-lg);overflow:hidden} .sched-header{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;gap:16px; padding:20px 28px;background:#fff;border-bottom:1px solid rgba(0,0,0,.1)} .sched-logo--king{width:110px;height:110px;object-fit:contain;margin:-15px 0; filter:drop-shadow(0 2px 8px rgba(0,0,0,.15))} .sched-header-text{text-align:center} .sched-gym-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(18px,2.5vw,28px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .sched-gym-sub{font-size:.82rem;color:rgba(0,0,0,.45);margin-top:4px} .sched-gym-sub a{color:rgba(0,0,0,.55);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)} .sched-gym-sub a:hover{color:var(--red)} .sched-grid{display:grid;grid-template-columns:72px repeat(7,1fr)} .sched-time-col{background:#fff;border-right:1px solid rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.1)} .sched-day-header{background:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800; font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#3a3a44;text-align:center; padding:12px 6px;border-right:1px solid rgba(0,0,0,.08);border-bottom:2px solid rgba(0,0,0,.1)} .sched-day-header:last-child{border-right:none} .sched-day-header.weekend{color:var(--blue)} .sched-time-label{background:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800; font-size:.72rem;letter-spacing:.06em;color:var(--red);text-align:center;padding:10px 4px; border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.06); display:flex;align-items:center;justify-content:center;line-height:1.2} .sched-cell{border-right:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06); padding:8px;min-height:60px;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;transition:background .15s,opacity .3s} .sched-cell:nth-child(8n){border-right:none} .sched-cell.empty::after{content:'';display:block;width:20px;height:2px;background:rgba(0,0,0,.1);border-radius:2px} .sched-cell.filled:hover{background:#F0F0F3} .sched-cell.filtered-out{opacity:.12;pointer-events:none} .sched-cell.filtered-out::after{display:none} .sched-class-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem; line-height:1.25;color:var(--ink);letter-spacing:.02em;text-transform:uppercase} .sched-age{font-size:.7rem;color:var(--red);font-weight:600;margin-top:3px} .sched-cell.weekend .sched-class-name{color:var(--blue)} .sched-note{padding:14px 24px;text-align:center;font-size:.82rem;color:rgba(0,0,0,.4); background:#fff;border-top:1px solid rgba(0,0,0,.08)} .sched-note a{color:rgba(0,0,0,.55);text-decoration:none;border-bottom:1px dashed rgba(0,0,0,.2)} .sched-mobile{display:none;padding:16px} .sched-mobile-day{margin-bottom:16px;border:1px solid rgba(0,0,0,.1);border-radius:6px;overflow:hidden} .sched-mobile-day-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.9rem; letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;background:#fff; border-bottom:1px solid rgba(0,0,0,.08);color:#3a3a44} .sched-mobile-row{display:flex;gap:12px;align-items:center;padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.06);background:#fff;transition:opacity .3s} .sched-mobile-row:last-child{border-bottom:none} .sched-mobile-row.filtered-out{opacity:.12} .sched-mobile-time{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:.75rem; color:var(--red);min-width:58px} .sched-mobile-class{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;color:var(--ink)} .sched-mobile-age{font-size:.72rem;color:var(--text-light);margin-left:4px} .sched-actions{display:flex;justify-content:center;gap:12px;margin-top:20px} .btn-sched-action{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#fff; border:1.5px solid var(--border-med);border-radius:6px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid); cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm);line-height:1.2} .btn-sched-action:hover{border-color:var(--text-mid);color:var(--text-dark);transform:translateY(-1px)} .btn-sched-action--red{border-color:rgba(217,14,22,.4);color:var(--red)} .btn-sched-action--red:hover{background:var(--red);color:#fff;border-color:var(--red)} .sched-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;justify-content:center} .sched-filter-btn{padding:10px 22px;border:2px solid var(--border-med);border-radius:100px; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.08em; text-transform:uppercase;color:var(--text-mid);background:#fff;cursor:pointer;transition:all .2s;line-height:1.2} .sched-filter-btn:hover{border-color:var(--text-mid);color:var(--text-dark)} .sched-filter-btn.active{background:var(--red);color:#fff;border-color:var(--red); box-shadow:0 2px 12px rgba(217,14,22,.3)} /* ── FAQ accordion ─────────────────────────────────────── */ .faq-item{border-bottom:1px solid var(--border);overflow:hidden} .faq-q{width:100%;background:none;border:none;border-top:1px solid var(--border); color:var(--text-dark);text-align:left;padding:22px 0;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:1.1rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer; display:flex;justify-content:space-between;align-items:center;transition:color .18s;line-height:1.4} .faq-q:hover{color:var(--red)} .faq-icon{color:var(--red);font-size:1.3rem;font-family:'Barlow Condensed',sans-serif; font-weight:700;transition:transform .3s;flex-shrink:0;margin-left:12px} .faq-item.open .faq-icon{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease} .faq-item.open .faq-a{max-height:600px} .faq-a p{padding:0 0 22px;font-size:.98rem;line-height:1.78;color:var(--text-mid)} /* ── CTA band ──────────────────────────────────────────── */ .join-cta{padding:100px 48px;background:var(--bg-alt);text-align:center;overflow:hidden} .join-cta::after{content:attr(data-ghost);position:absolute;font-family:'Barlow Condensed',sans-serif; font-weight:900;font-size:22vw;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.03); top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;user-select:none} .join-inner{position:relative;z-index:1;max-width:700px;margin:0 auto} .join-inner .section-title{font-size:clamp(2.5rem,6vw,5rem)} .join-sub{font-size:1.05rem;line-height:1.7;color:var(--text-mid);margin:18px auto 36px;max-width:520px} .join-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ── sticky CTA ────────────────────────────────────────── */ .sticky-cta{position:fixed;bottom:28px;right:28px;z-index:900} .sticky-cta-btn{display:block;padding:14px 26px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none; color:#fff;background:var(--red);border-radius:3px;box-shadow:0 4px 20px rgba(217,14,22,.45); animation:btn-breathe 2.8s ease-in-out infinite} .sticky-cta-btn:link,.sticky-cta-btn:visited{color:#fff} @keyframes btn-breathe{0%,100%{box-shadow:0 4px 20px rgba(217,14,22,.4)} 50%{box-shadow:0 6px 28px rgba(217,14,22,.55)}} /* ── footer ────────────────────────────────────────────── */ .site-footer{background:var(--text-dark);padding:48px 48px 28px} .footer-inner{max-width:1200px;margin:0 auto} .footer-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px} .footer-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08); border-radius:8px;padding:24px;display:flex;flex-direction:column} .footer-box-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.68rem; letter-spacing:.25em;text-transform:uppercase;color:var(--red);margin-bottom:16px} .footer-box--logo{align-items:center;justify-content:center;background:rgba(255,255,255,.02)} .footer-king{width:100%;max-width:190px;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5))} .footer-map-img-wrap{display:block;position:relative;border-radius:6px;overflow:hidden; margin-bottom:10px;border:1px solid rgba(255,255,255,.08);text-decoration:none} .footer-map-img-wrap img{width:100%;height:180px;object-fit:cover} .map-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; gap:8px;background:rgba(0,0,0,.35);color:#fff;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .2s} .footer-map-img-wrap:hover .map-overlay{opacity:1} .footer-map-cta{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red); text-decoration:none;padding-top:4px} .footer-social-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1} .fsoc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:18px 8px;border-radius:6px;text-decoration:none;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase; transition:transform .18s;border:1px solid rgba(255,255,255,.08)} .fsoc-tile:hover{transform:translateY(-2px)} .fsoc-tile svg{width:26px;height:26px} .fsoc-fb{background:rgba(24,119,242,.15);color:#5b9ef5} .fsoc-ig{background:rgba(225,48,108,.15);color:#f06292} .fsoc-yt{background:rgba(255,0,0,.12);color:#ff5252} .fsoc-tt{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)} .footer-nap-items{display:flex;flex-direction:column;gap:12px} .nap-item{display:flex;align-items:flex-start;gap:10px} .nap-icon{font-size:.95rem;flex-shrink:0;margin-top:2px} .nap-item a{color:rgba(255,255,255,.5);text-decoration:none;font-size:.88rem;line-height:1.5;transition:color .18s} .nap-item a:hover{color:rgba(255,255,255,.9)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:.8rem; color:rgba(255,255,255,.2);padding-top:24px;border-top:1px solid rgba(255,255,255,.06); flex-wrap:wrap;gap:10px} .footer-bottom a{color:var(--red);text-decoration:none} /* ── reveal animation ──────────────────────────────────── */ .fade-up{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease} .js-ready .fade-up{opacity:0;transform:translateY(28px)} .js-ready .fade-up.visible{opacity:1;transform:translateY(0)} .delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s} .delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s} /* ══ RESPONSIVE ════════════════════════════════════════════ */ @media (max-width:1340px){.hjj-nav-links{gap:18px}} @media (max-width:1240px){ .hjj-hamburger{display:flex} .hjj-nav-links,.hjj-nav-right{display:none} .hjj-nav-inner{padding:0 24px} } @media (max-width:1024px){ .page-hero-inner{grid-template-columns:1fr;gap:40px;text-align:center} .page-hero.split .page-hero-eyebrow{justify-content:center} .page-hero.split .page-hero-sub{margin-left:auto;margin-right:auto} .page-hero-ctas{justify-content:center} .hero-img-wrap{max-width:550px;margin:0 auto} .features-grid{grid-template-columns:repeat(2,1fr)} .footer-boxes{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .sched-grid{grid-template-columns:58px repeat(7,1fr)} .sched-cell{min-height:48px;padding:5px 3px} .sched-class-name{font-size:.7rem} .sched-age{font-size:.62rem} .sched-time-label{font-size:.62rem;padding:6px 2px} } @media (max-width:768px){ :root{--nav-h:60px} .hjj-nav-inner{padding:0 14px} .hjj-nav-logo img{height:75px;top:14px} .hjj-cta{font-size:.76rem;padding:9px 14px;letter-spacing:.06em} .page-hero{padding:50px 20px 36px} .page-hero.split{padding:50px 20px 40px} .page-hero-title{font-size:2.2rem} .page-hero.split .page-hero-title{font-size:2.4rem} .features-grid{grid-template-columns:1fr} .sched-grid{display:none} .sched-mobile{display:block} .sched-filters{gap:6px} .sched-filter-btn{padding:8px 16px;font-size:.78rem} .sched-actions{flex-direction:column;align-items:center} .btn-sched-action{width:100%;max-width:300px;justify-content:center} .sched-header{grid-template-columns:60px 1fr 60px;padding:14px 16px;gap:10px} .sched-logo--king{width:70px;height:70px;margin:-8px 0} .sched-gym-name{font-size:16px} .join-cta{padding:60px 20px} .join-btns{flex-direction:column;align-items:center} .join-btns .btn-primary,.join-btns .btn-secondary{width:100%;max-width:340px;text-align:center} .section-title{font-size:clamp(1.8rem,7vw,2.5rem)} .site-footer{padding:40px 20px 24px} .footer-boxes{grid-template-columns:1fr} .footer-bottom{flex-direction:column;text-align:center} .sticky-cta{top:calc(var(--nav-h) + 8px);bottom:auto;left:50%;right:auto;transform:translateX(-50%);z-index:1001} .sticky-cta-btn{padding:10px 18px;font-size:.78rem;animation:none} .hjj-mobile-links a{font-size:1.7rem} } @media (min-width:769px){.sched-mobile{display:none}} @media (max-width:480px){ .page-hero{padding:44px 16px 32px} .hjj-cta{font-size:.7rem;padding:8px 11px} .hjj-nav-actions{gap:4px} } @media (max-height:700px){ .hjj-mobile-menu{justify-content:flex-start;padding-top:76px} .hjj-mobile-links{gap:14px} .hjj-mobile-links a{font-size:1.45rem} } /* ── print: schedule only ──────────────────────────────── */ @media print{ @page{size:letter landscape;margin:.4in} body *{visibility:hidden} .sched-wrap,.sched-wrap *{visibility:visible;-webkit-print-color-adjust:exact;print-color-adjust:exact} .sched-wrap{position:absolute;top:0;left:0;width:100%;box-shadow:none} .sched-grid{display:grid} .sched-mobile{display:none} .sched-cell.filtered-out,.sched-mobile-row.filtered-out{opacity:1} .sched-actions,.sched-filters,.hjj-nav,.site-footer,.sticky-cta,.page-hero,.join-cta{display:none} } /* ══ EVENT RIBBON ══════════════════════════════════════════ The one upcoming event, directly under the hero. */ #event-strip{background:var(--ink)} .event-strip-border-top,.event-strip-border-bottom{height:1px;background:linear-gradient(90deg,transparent,rgba(217,14,22,.5),rgba(26,79,204,.5),transparent)} .event-strip-inner{max-width:1200px;margin:0 auto;padding:16px 48px;display:flex;align-items:center; justify-content:center;gap:10px 22px;flex-wrap:wrap;text-align:center} .event-strip-type{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);flex-shrink:0} .event-strip-dot{width:7px;height:7px;border-radius:50%;background:var(--red); box-shadow:0 0 0 0 rgba(217,14,22,.7);animation:strip-pulse 2.2s ease-out infinite} @keyframes strip-pulse{70%{box-shadow:0 0 0 9px rgba(217,14,22,0)}100%{box-shadow:0 0 0 0 rgba(217,14,22,0)}} .event-strip-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.05rem; letter-spacing:.04em;text-transform:uppercase;color:#fff;min-width:0} .event-strip-date{font-size:.88rem;color:rgba(255,255,255,.5);min-width:0} .event-strip-cta{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.78rem; letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none; border:1px solid rgba(255,255,255,.25);border-radius:100px;padding:7px 18px; white-space:nowrap;transition:background .2s,border-color .2s;flex-shrink:0} .event-strip-cta:link,.event-strip-cta:visited{color:#fff} .event-strip-cta:hover{background:var(--red);border-color:var(--red)} @media(max-width:768px){ .event-strip-inner{padding:14px 18px;gap:8px 14px;flex-direction:column} .event-strip-title{font-size:.95rem} .event-strip-date{font-size:.82rem} } /* ══════════════════════════════════════════════════════════ COMPONENTS ══════════════════════════════════════════════════════════ */ /* ── homepage black-belt cards ──────────────────────────── */ .bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .bb-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden; text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .bb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .bb-img-wrap{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .bb-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:top center;transition:transform .4s} .bb-card:hover .bb-img-wrap img{transform:scale(1.04)} .bb-info{padding:18px 20px 22px} .bb-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:5px} .bb-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em;text-transform:uppercase;line-height:1.45} /* ── coach rows (/coaches/ and bio pages) ───────────────── */ .coach-row{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center; padding:64px 0;border-bottom:1px solid var(--border)} .coach-row:first-of-type{padding-top:0} .coach-row:last-of-type{border-bottom:none} .coach-row.single{padding-top:0;border-bottom:none} .coach-row.reverse .coach-img-col{order:2} .coach-row.reverse .coach-content{order:1} .coach-img-wrap{position:relative} .coach-img-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center; border-radius:4px;display:block;box-shadow:var(--shadow-lg)} .coach-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none} .coach-row.reverse .coach-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .coach-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.2rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .coach-name .accent{color:var(--red);display:block} .coach-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .coach-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .coach-rank{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light); margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)} .coach-bio{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .coach-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .coach-highlight{padding:14px 16px;background:var(--bg-alt);border:1px solid var(--border); border-left:3px solid var(--red);border-radius:3px} .coach-highlight:nth-child(even){border-left-color:var(--blue)} .ch-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light);margin-bottom:3px} .ch-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.94rem; text-transform:uppercase;letter-spacing:.02em;color:var(--text-dark);line-height:1.25} .coach-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* ── programs index rows ────────────────────────────────── */ .program-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; padding:72px 0;border-bottom:1px solid var(--border)} .program-row:first-of-type{padding-top:0} .program-row:last-of-type{border-bottom:none} .program-row.reverse .program-img-col{order:2} .program-row.reverse .program-content{order:1} .program-img-wrap{position:relative} .program-img-wrap img{width:100%;border-radius:4px;display:block;box-shadow:var(--shadow-lg); object-fit:cover;aspect-ratio:4/3} .program-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none;z-index:1} .program-row.reverse .program-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .program-img-wrap.blue::before{border-color:var(--blue)} .program-badge{position:absolute;bottom:-12px;right:-12px;z-index:2;background:var(--red);color:#fff; padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.78rem; letter-spacing:.18em;text-transform:uppercase;border-radius:2px;box-shadow:0 4px 16px rgba(217,14,22,.4)} .program-badge.blue{background:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.4)} .program-row.reverse .program-badge{right:auto;left:-12px} .program-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .program-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .program-role.blue{color:var(--blue)} .program-role.blue::before{background:var(--blue)} .program-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .program-name .accent{color:var(--red);display:block} .program-name .accent.blue{color:var(--blue)} .program-tagline{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:22px; padding-bottom:20px;border-bottom:1px solid var(--border)} .program-desc{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .program-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .program-feat{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:3px; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem; letter-spacing:.04em;text-transform:uppercase;color:var(--text-dark);line-height:1.25} .program-feat.blue{border-left-color:var(--blue)} .program-feat-icon{font-size:1.1rem;flex-shrink:0} .program-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .program-schedule-mini{margin:22px 0 0;padding:20px 24px;background:var(--ink); border-left:4px solid var(--red);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15)} .program-schedule-mini.blue{border-left-color:var(--blue)} .psm-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .program-schedule-mini.blue .psm-label{color:var(--blue)} .psm-grid{display:flex;flex-wrap:wrap;gap:12px} .psm-item{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:6px; padding:12px 18px;min-width:150px;box-shadow:0 2px 8px rgba(0,0,0,.1)} .psm-day{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem; letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .psm-time{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.02rem; letter-spacing:.02em;color:var(--ink);line-height:1.25} .psm-note{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:12px;font-style:italic;line-height:1.5} /* ── program detail page ────────────────────────────────── */ .overview-inner{align-items:start} .overview-body{font-size:1.03rem;line-height:1.78;color:var(--text-mid);margin-bottom:16px} .age-groups{display:grid;gap:14px;margin-top:22px} .age-group-card{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .age-group-card:nth-child(even){border-left-color:var(--blue)} .age-group-emoji{font-size:1.8rem;flex-shrink:0} .age-group-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark)} .age-group-detail{font-size:.88rem;color:var(--text-mid);margin-top:2px} .sched-card{background:var(--ink);border-radius:12px;overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)} .sched-row{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap} .sched-row:last-child{border-bottom:none} .sched-row-label{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:#fff} .sched-row-days{font-size:.86rem;color:rgba(255,255,255,.5);margin-top:2px} .sched-row-times{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem; letter-spacing:.04em;color:var(--red);white-space:nowrap} .instructors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .parent-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .parent-info-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:26px 24px;border-top:3px solid var(--blue)} .parent-info-card:nth-child(odd){border-top-color:var(--red)} .parent-info-icon{font-size:1.7rem;margin-bottom:12px} .parent-info-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} .parent-info-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} .testimonial-quote{font-size:1.15rem;line-height:1.75;color:var(--text-mid);font-style:italic;margin-bottom:18px} .testimonial-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.06em;color:var(--text-dark)} .testimonial-detail{font-size:.85rem;color:var(--text-light);margin-top:3px} /* ── events ─────────────────────────────────────────────── */ .event-row{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center; background:var(--bg);border:1px solid var(--border);border-radius:10px; padding:34px;margin-bottom:24px;box-shadow:var(--shadow-sm)} .event-flyer-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)} .event-flyer-wrap img{width:100%;display:block;object-fit:cover} .event-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--red);margin-bottom:12px} .event-tag.away{color:var(--blue)} .event-tag-dot{width:7px;height:7px;border-radius:50%;background:currentColor} .event-title{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase; color:var(--text-dark);margin-bottom:16px} .event-title .highlight{color:var(--red)} .event-row.away .event-title .highlight{color:var(--blue)} .event-meta{display:grid;gap:10px;margin:18px 0 20px;padding:18px 0; border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .event-meta-row{display:flex;align-items:flex-start;gap:12px} .event-meta-icon{font-size:1rem;flex-shrink:0;margin-top:1px} .event-meta-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light)} .event-meta-value{font-size:.96rem;color:var(--text-dark);font-weight:500;line-height:1.45} .event-desc{font-size:1rem;line-height:1.72;color:var(--text-mid);margin-bottom:20px} .event-cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn-event{display:inline-block;padding:14px 32px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:#fff;background:var(--red);border:2px solid var(--red); border-radius:3px;transition:background .2s,transform .2s;box-shadow:0 4px 16px rgba(217,14,22,.3)} .btn-event:link,.btn-event:visited{color:#fff} .btn-event:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px)} .event-row.away .btn-event{background:var(--blue);border-color:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.3)} .event-row.away .btn-event:hover{background:var(--blue-bright);border-color:var(--blue-bright)} .past-card-title{padding:14px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.8); text-align:center;line-height:1.3} /* ── seminar formats ────────────────────────────────────── */ .sem-feat-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:30px 26px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s} .sem-feat-card:nth-child(even){border-top-color:var(--blue)} .sem-feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .sem-feat-icon{font-size:1.9rem;margin-bottom:14px} .sem-feat-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px} .sem-feat-duration{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px} .sem-feat-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} /* ── free trial tiles ───────────────────────────────────── */ .trial-benefit-icon{font-size:1.25rem;flex-shrink:0} /* ── component responsive ───────────────────────────────── */ @media(max-width:1024px){ .bb-grid{grid-template-columns:repeat(2,1fr)} .coach-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .coach-row.reverse .coach-img-col,.coach-row.reverse .coach-content{order:0} .coach-img-wrap{max-width:420px;margin:0 auto} .program-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .program-row.reverse .program-img-col,.program-row.reverse .program-content{order:0} .event-row{grid-template-columns:1fr;gap:28px;padding:26px} .event-flyer-wrap{max-width:420px;margin:0 auto} .instructors-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .bb-grid{grid-template-columns:1fr;gap:20px} .coach-highlights{grid-template-columns:1fr} .program-features{grid-template-columns:1fr} .parent-info-grid{grid-template-columns:1fr} .instructors-grid{grid-template-columns:1fr} .psm-item{width:100%;flex-direction:row;justify-content:space-between;align-items:center} .psm-time{text-align:right} .event-cta-row .btn-event,.event-cta-row .btn-secondary{width:100%;text-align:center} } /* ── instructor cards on program pages ──────────────────── */ .instructor-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .instructor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .instructor-img{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .instructor-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} .instructor-info{padding:18px 20px 22px} .instructor-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:4px} .instructor-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em; text-transform:uppercase;line-height:1.45} /* ── misc layout holders ────────────────────────────────── */ .sched-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .event-flyer-col,.event-details-col{min-width:0} /* ── "what a class looks like" breakdown ────────────────── */ .class-breakdown{display:grid;gap:12px;margin-top:22px} .class-phase{display:flex;gap:16px;align-items:flex-start;padding:16px 20px; background:var(--bg-alt);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .class-phase:nth-child(even){border-left-color:var(--blue)} .class-phase-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem; line-height:1;color:var(--red);flex-shrink:0;width:34px} .class-phase:nth-child(even) .class-phase-num{color:var(--blue)} .class-phase-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:3px} .class-phase-detail{font-size:.92rem;line-height:1.6;color:var(--text-mid)} /* ══ NEON STARTUP ══════════════════════════════════════════ The glow has to live INSIDE the keyframes. An animation with fill-mode `both` leaves its last frame's filter applied for good, so any static drop-shadow on the element is overridden and the sign ends up flat. Every frame therefore carries its own glow, and the tube ends lit rather than merely visible. */ .neon,.neon-slow{will-change:filter,opacity} .neon{animation:neon-strike 2.6s ease-out both} .neon-slow{animation:neon-strike 3.2s ease-out .3s both} .neon.neon-hum{animation:neon-strike 2.6s ease-out both, neon-hum 4.5s ease-in-out 3s infinite} .neon-slow.neon-hum{animation:neon-strike 3.2s ease-out .3s both, neon-hum 4.5s ease-in-out 3.8s infinite} /* dark = tube off, lit = tube on and glowing */ @keyframes neon-strike{ 0% {opacity:.05;filter:brightness(.18) saturate(.2) drop-shadow(0 0 0 rgba(100,200,255,0))} 3% {opacity:.92;filter:brightness(1.7) saturate(1.3) drop-shadow(0 0 26px rgba(120,210,255,.75))} 5% {opacity:.07;filter:brightness(.2) saturate(.22) drop-shadow(0 0 0 rgba(100,200,255,0))} 10% {opacity:.96;filter:brightness(1.8) saturate(1.35)drop-shadow(0 0 30px rgba(120,210,255,.8))} 12% {opacity:.09;filter:brightness(.22) saturate(.25) drop-shadow(0 0 2px rgba(100,200,255,.1))} 16% {opacity:.6; filter:brightness(1) saturate(.9) drop-shadow(0 0 12px rgba(100,200,255,.35))} 18% {opacity:.1; filter:brightness(.22) saturate(.25) drop-shadow(0 0 2px rgba(100,200,255,.1))} 25% {opacity:1; filter:brightness(1.9) saturate(1.4) drop-shadow(0 0 34px rgba(130,215,255,.85))} 28% {opacity:.35;filter:brightness(.5) saturate(.6) drop-shadow(0 0 6px rgba(100,200,255,.2))} 32% {opacity:1; filter:brightness(1.45)saturate(1.2) drop-shadow(0 0 26px rgba(120,210,255,.7))} 36% {opacity:.72;filter:brightness(.95) saturate(.95) drop-shadow(0 0 12px rgba(100,200,255,.35))} 41% {opacity:1; filter:brightness(1.3) saturate(1.12)drop-shadow(0 0 24px rgba(120,210,255,.6))} 46% {opacity:.9; filter:brightness(1.05)saturate(1.02)drop-shadow(0 0 16px rgba(110,205,255,.45))} 54% {opacity:1; filter:brightness(1.2) saturate(1.08)drop-shadow(0 0 22px rgba(120,210,255,.55))} 70% {opacity:1; filter:brightness(1.05)saturate(1.02)drop-shadow(0 0 20px rgba(115,208,255,.5))} 100%{opacity:1; filter:brightness(1.02)saturate(1) drop-shadow(0 0 18px rgba(110,205,255,.45)) drop-shadow(0 0 42px rgba(90,180,255,.22))} } /* lit and breathing */ @keyframes neon-hum{ 0%,100%{filter:brightness(1.02) saturate(1) drop-shadow(0 0 18px rgba(110,205,255,.45)) drop-shadow(0 0 42px rgba(90,180,255,.22))} 50% {filter:brightness(1.1) saturate(1.05) drop-shadow(0 0 26px rgba(125,215,255,.6)) drop-shadow(0 0 58px rgba(90,180,255,.3))} } /* red-dominant marks read better with a warm glow */ .neon-red,.neon-red.neon-hum{--glow-a:rgba(255,120,110,.5);--glow-b:rgba(217,14,22,.25)} /* no animation? still lit. */ @media(prefers-reduced-motion:reduce){ .neon,.neon-slow,.neon.neon-hum,.neon-slow.neon-hum{ animation:none !important;opacity:1 !important; filter:drop-shadow(0 0 18px rgba(110,205,255,.45)) drop-shadow(0 0 42px rgba(90,180,255,.22)) !important} } /* ══════════════════════════════════════════════════════════ COMPONENTS ══════════════════════════════════════════════════════════ */ /* ── homepage black-belt cards ──────────────────────────── */ .bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .bb-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden; text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .bb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .bb-img-wrap{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .bb-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:top center;transition:transform .4s} .bb-card:hover .bb-img-wrap img{transform:scale(1.04)} .bb-info{padding:18px 20px 22px} .bb-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:5px} .bb-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em;text-transform:uppercase;line-height:1.45} /* ── coach rows (/coaches/ and bio pages) ───────────────── */ .coach-row{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center; padding:64px 0;border-bottom:1px solid var(--border)} .coach-row:first-of-type{padding-top:0} .coach-row:last-of-type{border-bottom:none} .coach-row.single{padding-top:0;border-bottom:none} .coach-row.reverse .coach-img-col{order:2} .coach-row.reverse .coach-content{order:1} .coach-img-wrap{position:relative} .coach-img-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center; border-radius:4px;display:block;box-shadow:var(--shadow-lg)} .coach-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none} .coach-row.reverse .coach-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .coach-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.2rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .coach-name .accent{color:var(--red);display:block} .coach-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .coach-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .coach-rank{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light); margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)} .coach-bio{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .coach-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .coach-highlight{padding:14px 16px;background:var(--bg-alt);border:1px solid var(--border); border-left:3px solid var(--red);border-radius:3px} .coach-highlight:nth-child(even){border-left-color:var(--blue)} .ch-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light);margin-bottom:3px} .ch-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.94rem; text-transform:uppercase;letter-spacing:.02em;color:var(--text-dark);line-height:1.25} .coach-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* ── programs index rows ────────────────────────────────── */ .program-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; padding:72px 0;border-bottom:1px solid var(--border)} .program-row:first-of-type{padding-top:0} .program-row:last-of-type{border-bottom:none} .program-row.reverse .program-img-col{order:2} .program-row.reverse .program-content{order:1} .program-img-wrap{position:relative} .program-img-wrap img{width:100%;border-radius:4px;display:block;box-shadow:var(--shadow-lg); object-fit:cover;aspect-ratio:4/3} .program-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none;z-index:1} .program-row.reverse .program-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .program-img-wrap.blue::before{border-color:var(--blue)} .program-badge{position:absolute;bottom:-12px;right:-12px;z-index:2;background:var(--red);color:#fff; padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.78rem; letter-spacing:.18em;text-transform:uppercase;border-radius:2px;box-shadow:0 4px 16px rgba(217,14,22,.4)} .program-badge.blue{background:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.4)} .program-row.reverse .program-badge{right:auto;left:-12px} .program-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .program-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .program-role.blue{color:var(--blue)} .program-role.blue::before{background:var(--blue)} .program-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .program-name .accent{color:var(--red);display:block} .program-name .accent.blue{color:var(--blue)} .program-tagline{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:22px; padding-bottom:20px;border-bottom:1px solid var(--border)} .program-desc{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .program-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .program-feat{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:3px; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem; letter-spacing:.04em;text-transform:uppercase;color:var(--text-dark);line-height:1.25} .program-feat.blue{border-left-color:var(--blue)} .program-feat-icon{font-size:1.1rem;flex-shrink:0} .program-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .program-schedule-mini{margin:22px 0 0;padding:20px 24px;background:var(--ink); border-left:4px solid var(--red);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15)} .program-schedule-mini.blue{border-left-color:var(--blue)} .psm-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .program-schedule-mini.blue .psm-label{color:var(--blue)} .psm-grid{display:flex;flex-wrap:wrap;gap:12px} .psm-item{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:6px; padding:12px 18px;min-width:150px;box-shadow:0 2px 8px rgba(0,0,0,.1)} .psm-day{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem; letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .psm-time{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.02rem; letter-spacing:.02em;color:var(--ink);line-height:1.25} .psm-note{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:12px;font-style:italic;line-height:1.5} /* ── program detail page ────────────────────────────────── */ .overview-inner{align-items:start} .overview-body{font-size:1.03rem;line-height:1.78;color:var(--text-mid);margin-bottom:16px} .age-groups{display:grid;gap:14px;margin-top:22px} .age-group-card{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .age-group-card:nth-child(even){border-left-color:var(--blue)} .age-group-emoji{font-size:1.8rem;flex-shrink:0} .age-group-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark)} .age-group-detail{font-size:.88rem;color:var(--text-mid);margin-top:2px} .sched-card{background:var(--ink);border-radius:12px;overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)} .sched-row{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap} .sched-row:last-child{border-bottom:none} .sched-row-label{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:#fff} .sched-row-days{font-size:.86rem;color:rgba(255,255,255,.5);margin-top:2px} .sched-row-times{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem; letter-spacing:.04em;color:var(--red);white-space:nowrap} .instructors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .parent-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .parent-info-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:26px 24px;border-top:3px solid var(--blue)} .parent-info-card:nth-child(odd){border-top-color:var(--red)} .parent-info-icon{font-size:1.7rem;margin-bottom:12px} .parent-info-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} .parent-info-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} .testimonial-quote{font-size:1.15rem;line-height:1.75;color:var(--text-mid);font-style:italic;margin-bottom:18px} .testimonial-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.06em;color:var(--text-dark)} .testimonial-detail{font-size:.85rem;color:var(--text-light);margin-top:3px} /* ── events ─────────────────────────────────────────────── */ .event-row{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center; background:var(--bg);border:1px solid var(--border);border-radius:10px; padding:34px;margin-bottom:24px;box-shadow:var(--shadow-sm)} .event-flyer-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)} .event-flyer-wrap img{width:100%;display:block;object-fit:cover} .event-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--red);margin-bottom:12px} .event-tag.away{color:var(--blue)} .event-tag-dot{width:7px;height:7px;border-radius:50%;background:currentColor} .event-title{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase; color:var(--text-dark);margin-bottom:16px} .event-title .highlight{color:var(--red)} .event-row.away .event-title .highlight{color:var(--blue)} .event-meta{display:grid;gap:10px;margin:18px 0 20px;padding:18px 0; border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .event-meta-row{display:flex;align-items:flex-start;gap:12px} .event-meta-icon{font-size:1rem;flex-shrink:0;margin-top:1px} .event-meta-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light)} .event-meta-value{font-size:.96rem;color:var(--text-dark);font-weight:500;line-height:1.45} .event-desc{font-size:1rem;line-height:1.72;color:var(--text-mid);margin-bottom:20px} .event-cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn-event{display:inline-block;padding:14px 32px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:#fff;background:var(--red);border:2px solid var(--red); border-radius:3px;transition:background .2s,transform .2s;box-shadow:0 4px 16px rgba(217,14,22,.3)} .btn-event:link,.btn-event:visited{color:#fff} .btn-event:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px)} .event-row.away .btn-event{background:var(--blue);border-color:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.3)} .event-row.away .btn-event:hover{background:var(--blue-bright);border-color:var(--blue-bright)} .past-card-title{padding:14px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.8); text-align:center;line-height:1.3} /* ── seminar formats ────────────────────────────────────── */ .sem-feat-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:30px 26px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s} .sem-feat-card:nth-child(even){border-top-color:var(--blue)} .sem-feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .sem-feat-icon{font-size:1.9rem;margin-bottom:14px} .sem-feat-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px} .sem-feat-duration{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px} .sem-feat-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} /* ── free trial tiles ───────────────────────────────────── */ .trial-benefit-icon{font-size:1.25rem;flex-shrink:0} /* ── component responsive ───────────────────────────────── */ @media(max-width:1024px){ .bb-grid{grid-template-columns:repeat(2,1fr)} .coach-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .coach-row.reverse .coach-img-col,.coach-row.reverse .coach-content{order:0} .coach-img-wrap{max-width:420px;margin:0 auto} .program-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .program-row.reverse .program-img-col,.program-row.reverse .program-content{order:0} .event-row{grid-template-columns:1fr;gap:28px;padding:26px} .event-flyer-wrap{max-width:420px;margin:0 auto} .instructors-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .bb-grid{grid-template-columns:1fr;gap:20px} .coach-highlights{grid-template-columns:1fr} .program-features{grid-template-columns:1fr} .parent-info-grid{grid-template-columns:1fr} .instructors-grid{grid-template-columns:1fr} .psm-item{width:100%;flex-direction:row;justify-content:space-between;align-items:center} .psm-time{text-align:right} .event-cta-row .btn-event,.event-cta-row .btn-secondary{width:100%;text-align:center} } /* ── instructor cards on program pages ──────────────────── */ .instructor-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .instructor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .instructor-img{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .instructor-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} .instructor-info{padding:18px 20px 22px} .instructor-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:4px} .instructor-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em; text-transform:uppercase;line-height:1.45} /* ── misc layout holders ────────────────────────────────── */ .sched-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .event-flyer-col,.event-details-col{min-width:0} /* ── "what a class looks like" breakdown ────────────────── */ .class-breakdown{display:grid;gap:12px;margin-top:22px} .class-phase{display:flex;gap:16px;align-items:flex-start;padding:16px 20px; background:var(--bg-alt);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .class-phase:nth-child(even){border-left-color:var(--blue)} .class-phase-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem; line-height:1;color:var(--red);flex-shrink:0;width:34px} .class-phase:nth-child(even) .class-phase-num{color:var(--blue)} .class-phase-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:3px} .class-phase-detail{font-size:.92rem;line-height:1.6;color:var(--text-mid)} /* ══ NEON STARTUP ══════════════════════════════════════════ Real neon doesn't fade in — the tube stutters, catches, drops out, then holds. A sign that also hums must declare BOTH animations in one shorthand; two separate `animation` rules on the same element silently overwrite each other. */ .neon{animation:neon-strike 2.4s ease-out both} .neon-slow{animation:neon-strike 3.1s ease-out .35s both} .neon-slow.neon-hum{animation:neon-strike 3.1s ease-out .35s both, neon-hum 4.5s ease-in-out 3.6s infinite} .neon.neon-hum{animation:neon-strike 2.4s ease-out both, neon-hum 4.5s ease-in-out 2.8s infinite} @keyframes neon-strike{ 0% {opacity:.04;filter:brightness(.2) saturate(.25)} 3% {opacity:.9; filter:brightness(1.6) saturate(1.25)} 5% {opacity:.06;filter:brightness(.2) saturate(.25)} 10% {opacity:.95;filter:brightness(1.7) saturate(1.3)} 12% {opacity:.08;filter:brightness(.25) saturate(.3)} 16% {opacity:.6; filter:brightness(.95) saturate(.9)} 18% {opacity:.1; filter:brightness(.25) saturate(.3)} 25% {opacity:1; filter:brightness(1.8) saturate(1.35)} 28% {opacity:.35;filter:brightness(.55) saturate(.65)} 32% {opacity:1; filter:brightness(1.4) saturate(1.15)} 36% {opacity:.7; filter:brightness(.95) saturate(.95)} 41% {opacity:1; filter:brightness(1.3) saturate(1.1)} 46% {opacity:.88;filter:brightness(1.02) saturate(1)} 54% {opacity:1; filter:brightness(1.18) saturate(1.06)} 68% {opacity:1; filter:brightness(1) saturate(1)} 100% {opacity:1; filter:brightness(1) saturate(1)} } @keyframes neon-hum{ 0%,100%{filter:brightness(1) drop-shadow(0 0 14px rgba(100,200,255,.2))} 50% {filter:brightness(1.07) drop-shadow(0 0 24px rgba(100,200,255,.34))} } @media(prefers-reduced-motion:reduce){ .neon,.neon-slow,.neon-hum,.neon-slow.neon-hum,.neon.neon-hum{ animation:none !important;opacity:1 !important;filter:none !important} } /* ══════════════════════════════════════════════════════════ COMPONENTS ══════════════════════════════════════════════════════════ */ /* ── homepage black-belt cards ──────────────────────────── */ .bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .bb-card{background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden; text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .bb-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .bb-img-wrap{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .bb-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:top center;transition:transform .4s} .bb-card:hover .bb-img-wrap img{transform:scale(1.04)} .bb-info{padding:18px 20px 22px} .bb-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:5px} .bb-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em;text-transform:uppercase;line-height:1.45} /* ── coach rows (/coaches/ and bio pages) ───────────────── */ .coach-row{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:center; padding:64px 0;border-bottom:1px solid var(--border)} .coach-row:first-of-type{padding-top:0} .coach-row:last-of-type{border-bottom:none} .coach-row.single{padding-top:0;border-bottom:none} .coach-row.reverse .coach-img-col{order:2} .coach-row.reverse .coach-content{order:1} .coach-img-wrap{position:relative} .coach-img-wrap img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center; border-radius:4px;display:block;box-shadow:var(--shadow-lg)} .coach-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none} .coach-row.reverse .coach-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .coach-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.2rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .coach-name .accent{color:var(--red);display:block} .coach-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .coach-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .coach-rank{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light); margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--border)} .coach-bio{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .coach-highlights{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .coach-highlight{padding:14px 16px;background:var(--bg-alt);border:1px solid var(--border); border-left:3px solid var(--red);border-radius:3px} .coach-highlight:nth-child(even){border-left-color:var(--blue)} .ch-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light);margin-bottom:3px} .ch-value{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.94rem; text-transform:uppercase;letter-spacing:.02em;color:var(--text-dark);line-height:1.25} .coach-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} /* ── programs index rows ────────────────────────────────── */ .program-row{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; padding:72px 0;border-bottom:1px solid var(--border)} .program-row:first-of-type{padding-top:0} .program-row:last-of-type{border-bottom:none} .program-row.reverse .program-img-col{order:2} .program-row.reverse .program-content{order:1} .program-img-wrap{position:relative} .program-img-wrap img{width:100%;border-radius:4px;display:block;box-shadow:var(--shadow-lg); object-fit:cover;aspect-ratio:4/3} .program-img-wrap::before{content:'';position:absolute;top:-10px;left:-10px;width:55%;height:55%; border-top:3px solid var(--red);border-left:3px solid var(--red);border-radius:3px 0 0 0;pointer-events:none;z-index:1} .program-row.reverse .program-img-wrap::before{left:auto;right:-10px;border-left:none; border-right:3px solid var(--red);border-radius:0 3px 0 0} .program-img-wrap.blue::before{border-color:var(--blue)} .program-badge{position:absolute;bottom:-12px;right:-12px;z-index:2;background:var(--red);color:#fff; padding:10px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:.78rem; letter-spacing:.18em;text-transform:uppercase;border-radius:2px;box-shadow:0 4px 16px rgba(217,14,22,.4)} .program-badge.blue{background:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.4)} .program-row.reverse .program-badge{right:auto;left:-12px} .program-role{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:8px; display:flex;align-items:center;gap:10px} .program-role::before{content:'';display:inline-block;width:24px;height:2px;background:var(--red);flex-shrink:0} .program-role.blue{color:var(--blue)} .program-role.blue::before{background:var(--blue)} .program-name{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;text-transform:uppercase; color:var(--text-dark);margin-bottom:6px} .program-name .accent{color:var(--red);display:block} .program-name .accent.blue{color:var(--blue)} .program-tagline{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.88rem; letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:22px; padding-bottom:20px;border-bottom:1px solid var(--border)} .program-desc{font-size:1.02rem;line-height:1.78;color:var(--text-mid);margin-bottom:14px} .program-features{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0} .program-feat{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:3px; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem; letter-spacing:.04em;text-transform:uppercase;color:var(--text-dark);line-height:1.25} .program-feat.blue{border-left-color:var(--blue)} .program-feat-icon{font-size:1.1rem;flex-shrink:0} .program-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .program-schedule-mini{margin:22px 0 0;padding:20px 24px;background:var(--ink); border-left:4px solid var(--red);border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15)} .program-schedule-mini.blue{border-left-color:var(--blue)} .psm-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px} .program-schedule-mini.blue .psm-label{color:var(--blue)} .psm-grid{display:flex;flex-wrap:wrap;gap:12px} .psm-item{display:flex;flex-direction:column;gap:4px;background:#fff;border-radius:6px; padding:12px 18px;min-width:150px;box-shadow:0 2px 8px rgba(0,0,0,.1)} .psm-day{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.82rem; letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .psm-time{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.02rem; letter-spacing:.02em;color:var(--ink);line-height:1.25} .psm-note{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:12px;font-style:italic;line-height:1.5} /* ── program detail page ────────────────────────────────── */ .overview-inner{align-items:start} .overview-body{font-size:1.03rem;line-height:1.78;color:var(--text-mid);margin-bottom:16px} .age-groups{display:grid;gap:14px;margin-top:22px} .age-group-card{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-alt); border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .age-group-card:nth-child(even){border-left-color:var(--blue)} .age-group-emoji{font-size:1.8rem;flex-shrink:0} .age-group-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark)} .age-group-detail{font-size:.88rem;color:var(--text-mid);margin-top:2px} .sched-card{background:var(--ink);border-radius:12px;overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)} .sched-row{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap} .sched-row:last-child{border-bottom:none} .sched-row-label{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:#fff} .sched-row-days{font-size:.86rem;color:rgba(255,255,255,.5);margin-top:2px} .sched-row-times{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1rem; letter-spacing:.04em;color:var(--red);white-space:nowrap} .instructors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .parent-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .parent-info-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:26px 24px;border-top:3px solid var(--blue)} .parent-info-card:nth-child(odd){border-top-color:var(--red)} .parent-info-icon{font-size:1.7rem;margin-bottom:12px} .parent-info-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} .parent-info-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} .testimonial-quote{font-size:1.15rem;line-height:1.75;color:var(--text-mid);font-style:italic;margin-bottom:18px} .testimonial-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.06em;color:var(--text-dark)} .testimonial-detail{font-size:.85rem;color:var(--text-light);margin-top:3px} /* ── events ─────────────────────────────────────────────── */ .event-row{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center; background:var(--bg);border:1px solid var(--border);border-radius:10px; padding:34px;margin-bottom:24px;box-shadow:var(--shadow-sm)} .event-flyer-wrap{position:relative;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-md)} .event-flyer-wrap img{width:100%;display:block;object-fit:cover} .event-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--red);margin-bottom:12px} .event-tag.away{color:var(--blue)} .event-tag-dot{width:7px;height:7px;border-radius:50%;background:currentColor} .event-title{font-family:'Barlow Condensed',sans-serif;font-weight:900; font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1;text-transform:uppercase; color:var(--text-dark);margin-bottom:16px} .event-title .highlight{color:var(--red)} .event-row.away .event-title .highlight{color:var(--blue)} .event-meta{display:grid;gap:10px;margin:18px 0 20px;padding:18px 0; border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .event-meta-row{display:flex;align-items:flex-start;gap:12px} .event-meta-icon{font-size:1rem;flex-shrink:0;margin-top:1px} .event-meta-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--text-light)} .event-meta-value{font-size:.96rem;color:var(--text-dark);font-weight:500;line-height:1.45} .event-desc{font-size:1rem;line-height:1.72;color:var(--text-mid);margin-bottom:20px} .event-cta-row{display:flex;gap:12px;flex-wrap:wrap} .btn-event{display:inline-block;padding:14px 32px;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase; text-decoration:none;color:#fff;background:var(--red);border:2px solid var(--red); border-radius:3px;transition:background .2s,transform .2s;box-shadow:0 4px 16px rgba(217,14,22,.3)} .btn-event:link,.btn-event:visited{color:#fff} .btn-event:hover{background:var(--red-bright);border-color:var(--red-bright);transform:translateY(-2px)} .event-row.away .btn-event{background:var(--blue);border-color:var(--blue);box-shadow:0 4px 16px rgba(26,79,204,.3)} .event-row.away .btn-event:hover{background:var(--blue-bright);border-color:var(--blue-bright)} .past-card-title{padding:14px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.8); text-align:center;line-height:1.3} /* ── seminar formats ────────────────────────────────────── */ .sem-feat-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; padding:30px 26px;border-top:3px solid var(--red);transition:transform .22s,box-shadow .22s} .sem-feat-card:nth-child(even){border-top-color:var(--blue)} .sem-feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .sem-feat-icon{font-size:1.9rem;margin-bottom:14px} .sem-feat-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.15rem; text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px} .sem-feat-duration{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:10px} .sem-feat-desc{font-size:.94rem;line-height:1.65;color:var(--text-mid)} /* ── free trial tiles ───────────────────────────────────── */ .trial-benefit-icon{font-size:1.25rem;flex-shrink:0} /* ── component responsive ───────────────────────────────── */ @media(max-width:1024px){ .bb-grid{grid-template-columns:repeat(2,1fr)} .coach-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .coach-row.reverse .coach-img-col,.coach-row.reverse .coach-content{order:0} .coach-img-wrap{max-width:420px;margin:0 auto} .program-row{grid-template-columns:1fr;gap:36px;padding:48px 0} .program-row.reverse .program-img-col,.program-row.reverse .program-content{order:0} .event-row{grid-template-columns:1fr;gap:28px;padding:26px} .event-flyer-wrap{max-width:420px;margin:0 auto} .instructors-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .bb-grid{grid-template-columns:1fr;gap:20px} .coach-highlights{grid-template-columns:1fr} .program-features{grid-template-columns:1fr} .parent-info-grid{grid-template-columns:1fr} .instructors-grid{grid-template-columns:1fr} .psm-item{width:100%;flex-direction:row;justify-content:space-between;align-items:center} .psm-time{text-align:right} .event-cta-row .btn-event,.event-cta-row .btn-secondary{width:100%;text-align:center} } /* ── instructor cards on program pages ──────────────────── */ .instructor-card{background:var(--bg);border:1px solid var(--border);border-radius:6px; overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow-sm); transition:transform .22s,box-shadow .22s} .instructor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .instructor-img{position:relative;overflow:hidden;padding-bottom:110%;background:var(--bg-alt)} .instructor-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center} .instructor-info{padding:18px 20px 22px} .instructor-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.2rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:4px} .instructor-role{font-size:.78rem;color:var(--text-light);letter-spacing:.04em; text-transform:uppercase;line-height:1.45} /* ── misc layout holders ────────────────────────────────── */ .sched-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .event-flyer-col,.event-details-col{min-width:0} /* ── "what a class looks like" breakdown ────────────────── */ .class-breakdown{display:grid;gap:12px;margin-top:22px} .class-phase{display:flex;gap:16px;align-items:flex-start;padding:16px 20px; background:var(--bg-alt);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:4px} .class-phase:nth-child(even){border-left-color:var(--blue)} .class-phase-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.5rem; line-height:1;color:var(--red);flex-shrink:0;width:34px} .class-phase:nth-child(even) .class-phase-num{color:var(--blue)} .class-phase-name{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1rem; text-transform:uppercase;letter-spacing:.03em;color:var(--text-dark);margin-bottom:3px} .class-phase-detail{font-size:.92rem;line-height:1.6;color:var(--text-mid)} /* ══ NEON STARTUP ══════════════════════════════════════════ Real neon doesn't fade in — the tube stutters, catches, drops out, then holds. Two different timings so the header mark and the hero sign don't flicker in lockstep. Respects prefers-reduced-motion (rule at the top of file). */ .neon{animation:neon-strike 2.4s ease-out 1 both} .neon-slow{animation:neon-strike 3.1s ease-out .35s 1 both} @keyframes neon-strike{ 0% {opacity:.05;filter:brightness(.25) saturate(.3)} 4% {opacity:.85;filter:brightness(1.5) saturate(1.2)} /* first strike */ 7% {opacity:.08;filter:brightness(.25) saturate(.3)} /* fails */ 11% {opacity:.9; filter:brightness(1.6) saturate(1.25)} 13% {opacity:.1; filter:brightness(.3) saturate(.35)} 17% {opacity:.55;filter:brightness(.9) saturate(.9)} 19% {opacity:.12;filter:brightness(.3) saturate(.35)} 26% {opacity:1; filter:brightness(1.7) saturate(1.3)} /* catches */ 29% {opacity:.4; filter:brightness(.6) saturate(.7)} 33% {opacity:1; filter:brightness(1.35) saturate(1.15)} 37% {opacity:.75;filter:brightness(1) saturate(1)} 42% {opacity:1; filter:brightness(1.25) saturate(1.1)} 47% {opacity:.9; filter:brightness(1.05) saturate(1)} 55% {opacity:1; filter:brightness(1.15) saturate(1.05)} 70% {opacity:1; filter:brightness(1) saturate(1)} 100% {opacity:1; filter:brightness(1) saturate(1)} } /* once lit, a slow breathing hum */ .neon-hum{animation:neon-hum 4.5s ease-in-out 3s infinite} @keyframes neon-hum{ 0%,100%{filter:brightness(1) drop-shadow(0 0 14px rgba(100,200,255,.22))} 50% {filter:brightness(1.06) drop-shadow(0 0 22px rgba(100,200,255,.34))} } @media(prefers-reduced-motion:reduce){ .neon,.neon-slow,.neon-hum{animation:none !important;opacity:1 !important;filter:none !important} } /* ── hero stat counters ─────────────────────────────────── */ .hero-stats{display:flex;gap:48px;margin-top:34px;flex-wrap:wrap} .hero-stat-num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:2.8rem; line-height:1;color:#fff} .hero-stat-num span{color:var(--red)} .hero-stat-label{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.68rem; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px} @media(max-width:1024px){.hero-stats{justify-content:center}} @media(max-width:768px){.hero-stats{gap:32px;margin-top:26px}.hero-stat-num{font-size:2.2rem}}