.focus-ring-fallback, :focus-visible { outline: 3px solid rgba(74, 149, 78, 0.9); outline-offset: 3px; } :focus-visible, [role="button"]:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(74, 149, 78, 0.9); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block } .site-header { position: sticky; top: 0; z-index: 1050; background: var(--primary-color); color: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) } .site-header.scrolled { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45) } .header-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.5vw; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; position: sticky; top: 0; z-index: 1150; background: var(--primary-color) } .nav-proof { width: 100%; text-align: center; margin-top: 0.5rem } .nav-proof__link { color: var(--accent-color); font-weight: 600; text-decoration: none; letter-spacing: 0.15em; font-size: 0.75rem } .nav-proof__link:hover { text-decoration: underline } margin:0; font-weight:600; color:rgba(255, 255, 255, 0.85) } .header-topline__links { display: flex; gap: 1rem; padding: 0 } .header-topline__links a { color: rgba(255, 255, 255, 0.65); font-size: 0.75rem; letter-spacing: 0.18em } .header-topline__links a:hover { color: #fff } .header-brandlines { display: none } @media(max-width: 767px) { .site-header { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) } .header-topline { flex-direction: row; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.3rem 1rem; font-size: 0.75rem; letter-spacing: 0.15em; text-align: center; flex-wrap: nowrap } .header-topline__links { justify-content: center; gap: 0.6rem; flex-wrap: nowrap } .header-topline__location { flex: 0 1 auto; margin: 0 } .nav-shell { flex-direction: column; align-items: center; gap: 0.35rem } .nav-actions .btn { padding: 0.35rem 0.9rem; font-size: 0.9rem; letter-spacing: 0.1em } .mobile-program-nav { display: none; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 0.35rem; width: 100% } .mobile-program-nav.is-open { display: flex } .mobile-program-nav a { color: #fff; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em } .navbar-collapse { order: 3; width: 100% } .navbar-brand { order: 1; text-align: center; width: 100%; padding-bottom: 0.25rem; display: none } .navbar-brand { display: none } .brand-stack { display: none } .brand-stack__eyebrow { display: none } .brand-stack__title { display: none } .nav-actions { order: 2; width: 100%; text-align: center } .nav-actions .btn { width: 90%; max-width: 320px; margin: 0.25rem auto; display: inline-flex; justify-content: center } .navbar-toggler { order: 4; align-self: center } .navbar-toggler .bi-list { color: var(--button-color); font-size: 1.25rem } .navbar-toggler { background: var(--button-color); border-radius: 999px; padding: 0.4rem 0.6rem } .brand-stack__title { font-size: 0.9rem; letter-spacing: 0.2em } } .nav-shell { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; justify-content: center; text-align: center } @media(min-width: 992px) { .nav-shell { flex-direction: row; justify-content: flex-start; align-items: center; gap: 2rem; text-align: left } .navbar-collapse { flex: 1; order: 0; justify-content: center; align-items: center } .navbar-nav.flex-column { flex-direction: row !important; width: auto !important } .navbar-nav { gap: 1.75rem; justify-content: center } .nav-actions, .nav-proof { width: auto; order: 0; margin-left: auto } .nav-actions .btn { width: auto; margin: 0 } .nav-proof { margin-left: 1rem } .mobile-program-nav { display: none } .showup-hero { background: radial-gradient(circle at top, rgba(245, 158, 11, 0.15), transparent 55%), var(--primary-color); border-radius: 24px; padding: clamp(2rem, 3vw, 3rem); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5) } .showup-hero h1 { font-family: var(--font-heading); letter-spacing: 0.08em; color: #fff } .showup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem } .showup-card { background: #fff; border-radius: 20px; padding: 1.75rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.05); min-height: 260px; display: flex; flex-direction: column; justify-content: space-between } .showup-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem } .showup-card p { color: rgba(15, 12, 8, 0.7) } .showup-card .btn { align-self: flex-start } .class-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem } .class-steps li { padding: 0.75rem 1rem; border-radius: 12px; background: rgba(13, 13, 13, 0.05); display: flex; align-items: center; gap: 0.6rem; font-weight: 600 } .class-steps .step-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(104, 150, 60, 0.12); display: inline-flex; align-items: center; justify-content: center; color: var(--button-color) } .showup-hero .trust-promises li { color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; gap: 0.35rem } .showup-hero .trust-promises i { color: var(--button-color) } .cta-alternate .btn { min-width: 180px } .showup-card ul li i { color: var(--button-color) } @media(max-width: 768px) { .showup-hero { text-align: left } .showup-grid { grid-template-columns: 1fr } .showup-card { min-height: auto } .cta-alternate { flex-direction: column; align-items: flex-start } } } .brand-stack { display: flex; flex-direction: column; color: #fff; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase } .brand-stack__eyebrow { font-size: 0.7rem; color: rgba(255, 255, 255, 0.85) } .brand-stack__title { font-size: 1.25rem; letter-spacing: 0.3em; margin-top: 0.4rem; color: #fff !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) } .nav-actions { display: flex; align-items: center; justify-content: center; width: 100% } .nav-cta { padding: 0.85rem 1.85rem; border-radius: 999px; font-weight: 700; letter-spacing: 0.08em; border: 2px solid rgba(255, 255, 255, 0.8); background-color: var(--button-color); color: var(--button-text); border-color: var(--button-color) } .nav-cta:hover, .nav-cta:focus-visible { background-color: var(--button-hover); border-color: var(--button-hover); color: #fff } .navbar-toggler { border-color: rgba(255, 255, 255, 0.5) } .navbar-nav { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; justify-content: center } .navbar-collapse { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem } @media(min-width: 992px) { .navbar-nav { flex-direction: row; justify-content: center; gap: 2rem } .navbar-collapse { flex-direction: row; justify-content: space-between; align-items: center } } .programs-dropdown { position: relative } .programs-dropdown__menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: none; width: min(920px, 95vw); margin-top: 0.5rem; z-index: 1150 } .programs-dropdown.show .programs-dropdown__menu { display: block } .dropdown-menu { background: #111; border: 1px solid rgba(255, 255, 255, 0.2) } .programs-dropdown__menu { border-radius: 16px; padding: clamp(1rem, 2vw, 1.5rem); max-width: 900px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(13, 13, 13, 0.95), rgba(18, 18, 18, 0.9)) } .dropdown-menu .dropdown-item { color: #fff; font-weight: 600 } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: rgba(255, 255, 255, 0.08) } .btn i { margin: 0 6px } .topbar-lead-form .btn-action { background-color: var(--button-color); color: white; border: none; transition: background-color 0.2s } .topbar-lead-form .btn-action:hover { background-color: var(--button-hover) } .cta-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: 50rem; background-color: var(--button-color); border: 1px solid var(--button-color); color: #fff; box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3); text-decoration: none; font-weight: 700; transition: all 0.2s ease; white-space: nowrap } .cta-pill:hover, .cta-pill:focus { background-color: var(--button-hover); border-color: var(--button-hover); color: #fff; text-decoration: none; transform: translateY(-2px) } @media(max-width: 991.98px) { .cta-pill { font-size: 0.75rem; padding: 0.25rem 0.6rem } } .hero-section { position: relative; min-height: clamp(65vh, 78vh, 90vh); overflow: hidden; background: url("../images/herobanner.f4411c.png")center/cover no-repeat } .hero-content .cta-primary { margin-top: 0.75rem } .hero.hero--parents .hero__inner { margin: 0 auto; text-align: center } .hero.hero--parents .hero__cta { justify-content: center } .vp-center { margin: 0 auto; text-align: center; justify-content: center } .hero-split { padding: 4rem 1.5rem; background: linear-gradient(to bottom, #ffffff 0%, var(--secondary-color)100%); overflow: hidden } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center } .hero-text { display: flex; flex-direction: column; align-items: flex-start } .hero-headline { font-size: clamp(2.5rem, 5vw, 3.8rem); color: var(--heading-color); line-height: 1.1; margin-bottom: 1.5rem } .hero-headline span { color: var(--primary-color); position: relative; white-space: nowrap } .hero-headline span::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background: var(--accent-color); opacity: 0.3; z-index: -1; border-radius: 4px } .hero-subhead { font-size: 1.15rem; color: #555; margin-bottom: 2rem; max-width: 540px } .trust-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem } .badge-item { display: flex; align-items: center; gap: 8px; background: #fff; padding: 0.6rem 1rem; border-radius: 12px; font-size: 0.9rem; font-weight: 700; color: var(--primary-color); box-shadow: 0 2px 8px rgba(0, 109, 119, 0.1); border: 1px solid rgba(0, 109, 119, 0.1) } .badge-item i { color: var(--accent-color); font-size: 1.1rem } .cta-group { display: flex; gap: 1rem; flex-wrap: wrap } .hero-image { position: relative } .hero-image img { border-radius: 24px; box-shadow: 20px 20px 0px rgba(0, 109, 119, 0.1); width: 100%; object-fit: cover; aspect-ratio: 4/3 } .floating-review { position: absolute; bottom: -30px; left: -30px; background: #fff; padding: 1.25rem; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); max-width: 220px; z-index: 2 } .review-stars { color: var(--accent-color); font-size: 0.9rem; margin-bottom: 0.5rem } .review-text { font-size: 0.85rem; font-weight: 700; color: var(--heading-color); margin: 0 } .review-author { font-size: 0.75rem; color: #777; display: block; margin-top: 5px } .hero-video-section { position: relative; width: 100%; min-height: clamp(60vh, 70vh, 76vh) !important; display: flex; align-items: center; justify-content: center; padding: clamp(2.75rem, 4vw, 4rem)clamp(1rem, 3vw, 2.5rem)clamp(3rem, 4vw, 4.25rem); margin-top: clamp(1rem, 3vw, 1.5rem); background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)); border-radius: 32px; box-shadow: 0 35px 65px rgba(27, 20, 12, 0.18); overflow: hidden } .hero-media { position: absolute; inset: 0; z-index: 0 } .hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; filter: saturate(1.03) } .hero-video-section::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45)); pointer-events: none } .hero-video-section .video-wrapper { display: none } .hero-bg-video, .video-wrapper img, .video-wrapper video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) } .hero-overlay { display: none } .hero-content-container { position: relative; z-index: 2; width: min(100%, 860px); background: rgba(255, 255, 255, 0.95); border-radius: 32px; padding: clamp(1.5rem, 4vw, 2.75rem); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); text-align: center; color: #0f0c08; backdrop-filter: blur(8px) } .hero-content-container h1, .hero-content-container h2, .hero-content-container p, .hero-content-container a { color: #0f0c08 } @media(max-width: 767px) { .hero-section, .hero-video-section { min-height: clamp(50vh, 60vh, 65vh); padding: clamp(1.5rem, 3vw, 2rem) } .hero-video-section { margin-top: 0 } .hero-section { margin-top: 0 } .hero-video-section { margin-top: 0 } .hero-cta-group { flex-direction: column; gap: 0.75rem } .hero-content-container { width: min(100%, calc(100% - 1.5rem)); padding: 1.5rem; border-radius: 24px; margin-top: 0 } .hero-content-container h1 { font-size: clamp(1.4rem, 6vw, 1.8rem) } .hero-kicker { display: none } .hero-content-container h1, .hero-content-container .lead { font-size: clamp(1.1rem, 4vw, 1.5rem); letter-spacing: 0.01em } .hero-kicker { display: none } .hero-content-container .btn { width: 100%; white-space: normal } } .hero-video-section--contact { margin-top: clamp(0.75rem, 2vw, 1.25rem) } .hero-content-container--contact { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; border: 1px solid rgba(140, 106, 46, 0.25); box-shadow: 0 30px 60px rgba(27, 20, 12, 0.18) } .hero__contact-grid { margin-top: 1.5rem; padding: 1.25rem; border-radius: 20px; border: 1px solid rgba(140, 106, 46, 0.25); background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.15); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; text-align: center } .hero__contact-grid h3 { font-size: 0.75rem; letter-spacing: 0.3rem; text-transform: uppercase; margin-bottom: 0.35rem; color: rgba(15, 12, 8, 0.8) } .hero__contact-grid a { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 1.1rem; font-weight: 700; color: var(--heading-color); text-decoration: none } .hero__contact-grid a:hover { color: var(--button-color) } .hero__contact-grid .contact-subtle { font-size: 0.85rem; color: #6d5f4d; margin: 0 } #schedule section.ssched .switch label:nth-child(4), #schedule section.ssched .switch label:nth-child(4) a { color: #0a0a0a; } @media(max-width: 768px) { .hero-video-section { padding-bottom: 2.5rem } .hero__contact-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) } .hero__contact-grid a { font-size: 1rem } } .action-panel { background: var(--surface-0); padding: clamp(2.5rem, 4vw, 3.75rem)1rem } .action-panel .text-center h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.5rem } .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem } .action-card { background: #fff; border-radius: 20px; border: 1px solid rgba(140, 106, 46, 0.15); padding: 1.75rem; box-shadow: 0 20px 35px rgba(27, 20, 12, 0.12); display: flex; flex-direction: column; min-height: 220px } .action-number { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(15, 12, 8, 0.6); margin-bottom: 0.75rem } .action-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; color: var(--heading-color) } .action-card p { flex: 1; margin-bottom: 1.25rem; color: rgba(15, 12, 8, 0.75) } .action-card .btn { align-self: flex-start } @media(max-width: 576px) { .action-card { min-height: auto } } .image-highlight-panel { background: var(--surface-1); padding: clamp(2rem, 3vw, 3rem)1rem } .image-highlight-panel .text-center h2 { margin-bottom: 0.5rem } .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem } .image-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 35px rgba(27, 20, 12, 0.12); display: flex; flex-direction: column; min-height: 260px } .image-card img { width: 100%; height: 180px; object-fit: cover } .image-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1 } .image-card-body h3 { margin-bottom: 0.5rem; font-size: 1.15rem; color: var(--heading-color) } .image-card-body p { flex: 1; color: rgba(15, 12, 8, 0.72); margin-bottom: 0 } .image-card-body .btn { margin-top: 1rem; align-self: flex-start } .hero-video-section .text-white, .hero-video-section .text-white-50, .hero-video-section .link-light { color: var(--heading-color) !important } .hero-video-section .link-light:hover, .hero-video-section .hero-link:hover { color: var(--button-hover) } .hero__inner { display: flex; flex-direction: column; gap: 1rem; align-items: center } .hero__title { font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 4.4rem); margin: 0; letter-spacing: 0.2em; text-transform: uppercase; color: var(--heading-color); text-shadow: 0 4px 12px rgba(255, 255, 255, 0.85) } .hero__subtitle { font-size: clamp(1rem, 2vw, 1.3rem); line-height: 1.6; color: var(--text-muted); max-width: 720px; margin: 0 } .hero__badges { list-style: none; padding: 0; margin: 1rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem } .hero__badges li { font-size: 1rem; font-weight: 700; background: rgba(255, 255, 255, 0.95); border-radius: 999px; border: 1px solid rgba(140, 106, 46, 0.2); padding: 0.4rem 1.1rem; color: var(--heading-color); box-shadow: 0 12px 30px rgba(27, 20, 12, 0.1) } .hero__badges .text-warning { color: var(--accent-ink) !important } .hero__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1rem } .hero__cta .btn { border-radius: 999px; padding: 0.85rem 2.5rem; font-weight: 700; letter-spacing: 0.08em } .hero__cta .btn-outline-primary { border-color: rgba(27, 20, 12, 0.3); color: var(--heading-color); background: transparent } .hero__cta .btn-outline-primary:hover { background: rgba(185, 138, 60, 0.08) } .hero__cta .btn-primary { background: var(--button-color); color: var(--button-text); box-shadow: 0 14px 28px rgba(27, 20, 12, 0.18) } .no-striking-stamp { margin: 0.75rem auto 1rem; padding: 0.6rem 1.2rem; border-radius: 18px; border: 1px solid rgba(15, 12, 8, 0.15); background: rgba(255, 255, 255, 0.85); box-shadow: 0 12px 24px rgba(15, 12, 8, 0.08); text-align: center; display: inline-flex; flex-direction: column; gap: 0.2rem } .no-striking-stamp__headline { font-weight: 700; margin: 0 } .no-striking-stamp__subhead { margin: 0; font-size: 0.9rem; color: rgba(15, 12, 8, 0.7) } .hero__cta .btn-primary:hover { background: var(--button-hover) } .hero-microcopy { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.75rem; font-weight: 600; color: rgba(15, 12, 8, 0.7) } .hero-confidence-strip { font-size: 0.85rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(15, 12, 8, 0.8) } .lane-card { background: #fff; border-radius: 28px; border: 1px solid rgba(15, 12, 8, 0.1); padding: 2rem; box-shadow: 0 20px 40px rgba(15, 12, 8, 0.08); display: flex; flex-direction: column; gap: 1rem } .lane-card__header h3 { margin: 0 } .lane-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-weight: 600 } .lane-card__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center } .lane-card__micro { font-size: 0.85rem; color: rgba(15, 12, 8, 0.7) } .lane-card__subcard { border-top: 1px solid rgba(15, 12, 8, 0.1); padding-top: 1rem } .lane-card__subgrid { display: flex; flex-direction: column; gap: 1rem } .lane-card__subgrid> div { border: 1px dashed rgba(15, 12, 8, 0.2); border-radius: 16px; padding: 0.75rem 1rem 1rem } .lane-card__subgrid .btn-sm { margin-top: 0.25rem } .how-card { border-radius: 24px; border: 1px solid rgba(15, 12, 8, 0.12); background: #fff; box-shadow: 0 20px 40px rgba(15, 12, 8, 0.1) } .lane-card--youth .lane-card__subgrid { flex-direction: column } .how-card h3 { margin-bottom: 0.5rem } .hero-helper { width: 100%; text-align: center; color: rgba(255, 255, 255, 0.85); margin: 0 } .hero-helper--dark { color: var(--heading-color) } .hero-link { color: var(--heading-color); font-weight: 600; transition: color 0.2s ease } .hero-link:hover, .hero-link:focus-visible { color: var(--button-hover) } .text-highlight { color: var(--accent-ink) } .hero__quote { background: rgba(255, 255, 255, 0.95); color: #1e293b; padding: 1.5rem; border-radius: 12px; max-width: 700px; margin: 1.5rem auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); text-align: center } .hero__quote blockquote { font-style: italic; font-size: 1.1rem; margin-bottom: 0.5rem; font-family: Georgia, serif } .hero__quote figcaption { font-size: 0.9rem; font-weight: 700; color: var(--primary-color); text-transform: uppercase; letter-spacing: 1px } .hero__cta { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center } .btn-lg { padding: 1rem 2rem; font-size: 1.1rem } .hero__meta { margin-top: 2rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); font-weight: 600 } .hero__meta.divider { margin: 0 8px; color: var(--accent-color) } .home-proof-list { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; font-weight: 600; color: #1c1610 } .home-proof-list li::before { content: '•'; margin-right: 0.25rem; color: var(--accent-color) } .private-core-cta .btn { min-width: 240px } @media(max-width: 767px) { .private-core-cta { align-items: center !important; width: 100%; max-width: none !important } .private-core-cta .btn { width: 100%; max-width: 320px } } @media(max-width: 768px) { .hero-video-section { min-height: auto !important; max-height: none; padding: clamp(2.25rem, 6vw, 3rem)1.25rem 3rem; align-items: center } .hero-content-container { padding: 1.75rem 1.25rem } .hero__badges { gap: 0.65rem } .hero__cta { width: 100%; justify-content: center } .hero__cta .btn { width: 100%; max-width: 360px } } @media(max-width: 991px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center } .hero-text { align-items: center; order: 1 } .hero-image { order: 2; margin: 0 1rem } .hero-headline { font-size: 2.5rem } .trust-badges { justify-content: center } .cta-group { justify-content: center; width: 100% } .floating-review { display: none } @media(min-width: 600px) { .floating-review { display: block; left: 50%; transform: translateX(-50%); bottom: -20px } } } .section { padding: var(--section-padding)1rem } .trust-strip { background: var(--heading-color); color: #fff; padding: 1.5rem 0 } .trust-list { display: flex; justify-content: space-around; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 1rem } .trust-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600 } .schedule thead th { background: var(--primary-color); color: #fff; padding: 1rem } .schedule tbody tr:nth-child(even) { background: var(--secondary-color) } ul { list-style-type: none; margin: 0; padding: 0 } .site-footer { background: var(--primary-color); color: #fff; padding: clamp(3rem, 4vw, 4.5rem)1rem } .footer-shell { max-width: 1200px; margin: 0 auto } .footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 2rem } .footer-brand { text-transform: uppercase; letter-spacing: 0.25em; font-weight: 700 } .footer-tagline { font-size: 1rem; font-weight: 500; margin: 0.25rem 0 0.75rem; color: rgba(255, 255, 255, 0.85) } .footer-address { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65) } .footer-brand a, .footer-address a { color: #ffffff; } .footer-brand>p:nth-child(3)>a { color: #ffffff; } .footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem } .footer-column h4 { margin-bottom: 0.75rem; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; } .footer-column h4 { color: rgba(255, 255, 255, 0.65); } .footer-column ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem } .footer-column a { color: rgba(255, 255, 255, 0.8); font-weight: 600; font-size: 0.95rem } .footer-column a:hover { color: var(--button-color) } .footer-contact { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em } .footer-contact p { margin: 0; font-weight: 600; color: rgba(255, 255, 255, 0.65); font-size: 0.85rem } .footer-contact a { color: #fff; font-weight: 700 } .footer-contact .btn { align-self: flex-start; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.7); padding: 0.7rem 1.4rem; font-size: 0.8rem; letter-spacing: 0.28em } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1.5rem } .footer-service, .footer-copy { margin: 0; color: rgba(255, 255, 255, 0.8) } @media(max-width: 768px) { .footer-bottom { justify-content: center; text-align: center } } .sticky-cta { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 450px; background-color: var(--button-color) !important; color: white !important; font-weight: bold; padding: 0.8rem 1.5rem; border-radius: 50rem !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); border: 2px solid #fff; animation: floatUp 1s ease-out; text-decoration: none; text-align: center } .sticky-cta:hover { background-color: var(--button-hover) !important; color: #fff !important } @media(min-width: 992px) { .sticky-cta { bottom: 30px } } .btn-animated { animation: subtle-pulse 2s infinite } .faq-accordion .accordion-button { border-radius: 0.75rem; border: 1px solid rgba(13, 59, 102, 0.2); background: rgba(255, 255, 255, 0.8); color: #0b2c55; font-weight: 600; box-shadow: none } .faq-accordion .accordion-button:not(.collapsed) { background: #0d3b66; color: #fff; box-shadow: 0 10px 25px rgba(9, 23, 45, 0.25) } .faq-accordion .accordion-body { border: 1px solid rgba(13, 59, 102, 0.15); border-radius: 0.75rem; border-top: none; padding: 1rem 1.25rem 1.25rem; background: #fff; box-shadow: 0 20px 35px rgba(9, 23, 45, 0.1) } .faq-accordion .accordion-item+.accordion-item .accordion-button { margin-top: 0.75rem } @keyframes subtle-pulse { 0% { transform: translateX(-50%)scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7) } 70% { transform: translateX(-50%)scale(1.02); box-shadow: 0 0 0 10px rgba(245, 158, 11, 0) } 100% { transform: translateX(-50%)scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0) } } @keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7) } 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0) } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0) } } .hero__cta .btn-animated, .text-center .btn-animated { animation: btn-pulse 2s infinite; transform: none } .text-center { text-align: center !important; display: flex; flex-direction: column; align-items: center; justify-content: center } .mt-4 { margin-top: 1.5rem !important } .cta-subnote-sm { display: block; font-size: 0.85rem; color: #64748b; font-weight: 600; margin-top: 0.75rem; letter-spacing: 0.01em } .cta-subnote-sm i { color: var(--primary-color) } .village-section { background: linear-gradient(to bottom, #ffffff, var(--secondary-color)) } .village-card { background: #fff; border-radius: 16px; padding: 1.5rem; box-shadow: 0 10px 25px rgba(0, 109, 119, 0.08); height: 100%; transition: transform 0.3s ease; text-align: center } .village-card:hover { transform: translateY(-5px) } .village-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem auto; border: 3px solid var(--accent-color) } .village-quote { font-style: italic; font-size: 1rem; color: var(--text-color); margin-bottom: 1rem } .village-name { font-weight: 700; color: var(--primary-color); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px } .safety-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem; margin-top: 3rem } .safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem } .safety-item { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--heading-color) } .safety-item i { font-size: 1.5rem; color: var(--primary-color) } .bg-warning { background-color: var(--accent-color) !important; color: #fff !important } .nav-link i.bi-shield-check { color: var(--accent-color); margin-right: 4px } .video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); background-color: #000; width: 100% } .video-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0 } #grand-slam-curriculum .card { position: relative } #grand-slam-curriculum .card-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; opacity: 0.75 } .card-safety .card-title::before { content: "🛡️ " } .card-movement .card-title::before { content: "↔️ " } .card-positions .card-title::before { content: "📍 " } .card-escapes .card-title::before { content: "🚪 " } .card-sweeps .card-title::before { content: "🔁 " } .card-sparring .card-title::before { content: "🎯 " } .retro-stage-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; padding: 6px 12px; background-image: url("../images/logo-2dfighter-bg-only.86eab6.png"); background-repeat: repeat-x; background-size: cover } .retro-logo-center { position: relative; transform: none; width: auto; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; text-align: center } .list-centered { display: inline-block; text-align: left; padding-left: 1.2rem } .stretch-card { transition: transform 0.2s; border: 1px solid #eee } .stretch-card:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; border-color: var(--bs-primary) } .step-number { background-color: var(--bs-primary); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 10px; flex-shrink: 0 } .skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; padding: 0.5rem 1rem; background: #000; color: #fff } .skip-link:focus { left: 0.5rem; top: 0.5rem } .programs-dropdown__menu { border-radius: 16px; padding: clamp(1rem, 2vw, 1.5rem); max-width: 900px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); background: linear-gradient(180deg, rgba(13, 13, 13, 0.95), rgba(18, 18, 18, 0.9)) } .programs-dropdown__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1rem } .programs-dropdown__card { background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.08) } .programs-dropdown__eyebrow { font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 0.35rem; color: rgba(255, 255, 255, 0.6) } .programs-dropdown__card h3 { font-size: 1rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.25em } .programs-dropdown__card p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.5rem } .programs-dropdown__card h3 { font-size: 1rem; margin: 0 0 0.35rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--button-color) } .programs-dropdown__link { font-size: 0.8rem; color: #fff; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase } .programs-dropdown__link:hover { text-decoration: underline } .programs-dropdown__cta { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1rem } .programs-dropdown__cta-label { margin-bottom: 0.35rem; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase } .programs-dropdown__cta-btn { color: #0f0c08; background: #fff; border-radius: 999px } .programs-dropdown__toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding-right: 1.1rem; cursor: pointer } .programs-dropdown__toggle::after { display: none } .programs-dropdown__label { position: relative } .programs-dropdown__icon { font-size: 0.85rem } .programs-dropdown.show .programs-dropdown__icon { transform: rotate(180deg) } .programs-dropdown__icon.rotate { transform: rotate(180deg) } .cta-bar { display: flex; align-items: center; gap: 0.75rem } .cta-bar__primary { padding: 0.35rem 1.5rem; font-size: 0.9rem; border-radius: 999px } .cta-bar__links { display: flex; flex-direction: column; gap: 0.15rem; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.7rem; font-weight: 700 } .cta-bar__link { color: #fff; text-decoration: none; font-size: 0.75rem } .cta-hero-block { border-radius: 32px; background: rgba(15, 12, 8, 0.9); color: #fff; padding: clamp(1.25rem, 2vw, 2rem); margin-top: clamp(1.25rem, 3vw, 1.75rem); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) } .cta-hero-block *, .cta-hero-block *::before, .cta-hero-block *::after, .cta-hero-block__actions a { color: #fff !important } .cta-hero-block *, .cta-hero-block *::before, .cta-hero-block *::after { color: #fff } .cta-hero-block__shell { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center } .cta-hero-block__eyebrow { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.65rem; font-weight: 700; opacity: 0.85 } .cta-hero-block__headline { font-size: clamp(1.75rem, 3vw, 2rem); margin: 0 } .cta-hero-block__subhead { text-align: center; margin-bottom: 0; color: rgba(255, 255, 255, 0.85) } .cta-hero-block__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; justify-content: center } .cta-hero-block__primary { min-width: 220px; border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 700 } .cta-hero-block__secondary { padding: 0.45rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; color: #fff; font-weight: 600 } .cta-hero-block__link { font-weight: 600; letter-spacing: 0.08em; color: #f8f8f8; text-decoration: underline; text-transform: uppercase; font-size: 0.75rem } .cta-hero-block__microcopy { font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin: 0 } .cta-proof-block { text-align: center; border-top: 1px solid rgba(15, 12, 8, 0.12); padding-top: 0.85rem; width: 100% } .cta-proof-block__rating { font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.25rem; font-weight: 700 } .cta-proof-block__snippet { font-size: 0.9rem; margin: 0; color: rgba(255, 255, 255, 0.8) } .cta-proof-block:not(.cta-proof-block--on-dark).cta-proof-block__snippet, .cta-proof-block:not(.cta-proof-block--on-dark).cta-proof-block__rating { color: #0f0c08; } .cta-proof-block__snippet { color: #0f0c08 !important; } .cta-proof-block--on-dark { border-color: rgba(255, 255, 255, 0.35) } .cta-decision-block { background: #f7f5f1; border-radius: 28px; padding: clamp(1.5rem, 3vw, 2rem); margin: clamp(1.5rem, 3vw, 2rem)0; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 25px 50px rgba(15, 12, 8, 0.08) } .cta-decision-block__shell { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center } .cta-decision-block__microcopy { margin: 0; font-weight: 600; color: #0f0c08; letter-spacing: 0.05em } .cta-decision-block__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center } .cta-decision-block__secondary { font-weight: 600; color: #0f0c08; text-decoration: none } .cta-footer-block { border-radius: 28px; background: #0f0c08; color: #fff; padding: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: clamp(1rem, 2vw, 1.5rem); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.35) } .cta-footer-block__shell { display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center } .cta-footer-block__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; width: 100% } .cta-footer-block__secondary { display: flex; gap: 0.5rem; align-items: center } .cta-footer-block__text { border-radius: 999px; padding: 0.45rem 1.2rem } .cta-footer-block__phone-link { text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 700; color: #f5f5f5 } .cta-footer-block__microcopy { font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); margin: 0 } .desktop-sticky-cta { position: fixed; right: 1.5rem; bottom: 1.75rem; border-radius: 999px; padding: 0.35rem 0.5rem; background: #0f0c08; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35); display: flex; align-items: center; gap: 0.5rem; z-index: 1200; min-width: 280px } .desktop-sticky-cta__primary { border-radius: 999px; padding: 0.45rem 1rem; font-weight: 700 } .desktop-sticky-cta__text { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; padding: 0.45rem 0.9rem; font-weight: 600 } .mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.15rem 0.55rem; border-top: 2px solid #222; background: #0f0c08; box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.25); z-index: 1100; transition: transform 0.35s ease, opacity 0.35s ease } .mobile-sticky-cta--hidden { transform: translateY(130%); opacity: 0 } .mobile-sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: nowrap } .mobile-sticky-cta__primary { flex: 1; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.82rem } .mobile-sticky-cta__text { font-size: 0.7rem; color: #fff; text-decoration: none; text-align: center; white-space: nowrap } .mobile-sticky-cta__text:hover { text-decoration: underline } .body-has-sticky { padding-bottom: 3.25rem } @media(min-width: 768px) { .cta-hero-block, .cta-decision-block, .cta-footer-block { margin-left: auto; margin-right: auto; max-width: 960px } .mobile-sticky-cta { display: none } } .page-book-intro .ss-book__section:nth-of-type(2) { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; } .page-book-intro .booking-embed { flex: 1; min-height: 85vh; } .page-book-intro .booking-embed__frame { min-height: 85vh; } .page-book-intro #calendlyInline { min-height: 85vh; height: 100%; width: 100%; } .page-book-intro #calendlyInline iframe { min-height: 85vh; width: 100%; border: 0; } .page-book-intro .ss-book__details { border: 1px solid rgba(15, 12, 8, 0.08); border-radius: 18px; background: #ffffff; padding: 1.5rem; box-shadow: 0 15px 40px rgba(15, 12, 8, 0.08); } .page-book-intro .ss-book__details summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; color: #0f0c08; margin-bottom: 0.75rem; } .page-book-intro .ss-book__details summary::-webkit-details-marker, .page-book-intro .ss-book__details summary::marker { display: none; content: ''; } .page-book-intro .ss-book__details-summary::after { content: '+'; font-size: 1.1rem; line-height: 1; color: #0f0c08; } .page-book-intro .ss-book__details[open] .ss-book__details-summary::after { content: '−'; } .page-book-intro .ss-book__details-body { margin-top: 0.5rem; } .pricing-module-block { margin: clamp(2rem, 4vw, 3rem)auto; padding: 1.5rem; border-radius: 28px; background: #fff8f2; border: 1px solid rgba(15, 12, 8, 0.08); text-align: center; max-width: 960px; box-shadow: 0 25px 50px rgba(15, 12, 8, 0.08) } .pricing-module-block__tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(15, 12, 8, 0.7) } .pricing-module-block__title { font-size: 1.2rem; font-weight: 700; margin: 0.35rem 0 } .pricing-module-block__details { font-size: 0.95rem; margin: 0; color: rgba(15, 12, 8, 0.7) } .offer-block { margin: clamp(2rem, 4vw, 3rem)auto } .offer-block__card { background: #ffffff; border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid rgba(15, 12, 8, 0.08); box-shadow: 0 25px 50px rgba(15, 12, 8, 0.08); text-align: left } .offer-block__section+.offer-block__section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(15, 12, 8, 0.08) } .offer-block__title { font-size: 1.35rem; font-weight: 700; margin: 0 } .offer-block__subtitle { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem } .offer-block__list { list-style: none; padding: 0; margin: 0.85rem 0 0; display: grid; gap: 0.4rem; color: rgba(15, 12, 8, 0.75) } .offer-block__list li::before { content: "•"; margin-right: 0.5rem; color: var(--button-color) } .offer-block__line { margin: 0.35rem 0 0; color: rgba(15, 12, 8, 0.75) } .schedule-block { margin: clamp(2rem, 4vw, 3rem)auto } .schedule-block__card { background: #fff8f2; border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgba(15, 12, 8, 0.08); box-shadow: 0 25px 50px rgba(15, 12, 8, 0.08); text-align: center } .schedule-block__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.18em } .schedule-block__times { display: grid; gap: 0.5rem; font-weight: 600 } .schedule-block__line { margin: 0; color: rgba(15, 12, 8, 0.75) } .thanks-cta-block { background: #0f0c08; color: #fff; padding: 2rem 1rem; border-radius: 28px; margin: 1.5rem auto; max-width: 860px; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) } .thanks-cta-block__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem } .thanks-cta-block__actions .btn { flex: 1 } @media(max-width: 767px) { .desktop-sticky-cta { display: none } } @media(min-width: 992px) { .navbar.navbar-expand-lg .nav-shell { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav brand actions" "proof proof proof"; align-items: center; column-gap: 2rem; row-gap: 0.35rem } .navbar.navbar-expand-lg .navbar-brand { grid-area: brand; justify-self: center; text-align: center } .navbar.navbar-expand-lg .brand-stack { align-items: center } .navbar.navbar-expand-lg .navbar-collapse { grid-area: nav; justify-self: start } .navbar.navbar-expand-lg .nav-actions { grid-area: actions; justify-self: end; margin-left: 0 } .navbar.navbar-expand-lg .nav-proof { grid-area: proof; width: 100%; margin: 0.25rem 0 0; margin-left: 0; text-align: center } } .ss-hero { color: var(--ss-text); } .ss-hero { background: radial-gradient(1100px 520px at 20% 10%, rgba(72, 255, 160, 0.10), transparent 55%), var(--ss-bg); } .ss-hero__wrap { max-width: var(--ss-max); margin: 0 auto; padding: 44px 18px; } .ss-hero__grid { display: grid; gap: 18px; grid-template-columns: 1.25fr 0.95fr; align-items: stretch; } .ss-hero__left { padding: 26px 22px; border: 1px solid var(--ss-border); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); } .ss-hero__eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-muted); } .ss-hero__headline { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; } .ss-hero__subhead { margin: 0 0 18px; color: var(--ss-muted); font-size: 16px; line-height: 1.45; max-width: 55ch; } .ss-hero__subline, .ss-hero__pricing, .ss-hero__location-note { margin: 4px 0; font-size: 0.95rem; color: var(--ss-text); } .ss-hero__pricing { color: var(--ss-muted); font-weight: 600; } .ss-hero__location-note a { color: #ffffff; text-decoration: underline; } .ss-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 14px; } .cta-helper { display: block; margin: 0.35rem 0 0.75rem; font-size: 0.75rem; line-height: 1.35; letter-spacing: 0.08em; color: var(--ss-muted); opacity: 1; } .ss-hero__cta-helper, .hero-cta-helper { margin-bottom: 0.75rem; } .ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 14px; text-decoration: none; font-weight: 650; border: 1px solid transparent; transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease; user-select: none; -webkit-tap-highlight-color: transparent; } .ss-btn:hover { transform: translateY(-1px); filter: brightness(1.03); } .ss-btn:active { transform: translateY(0px); filter: brightness(0.98); } .ss-btn--primary { background: var(--button-color); color: #fff; border-color: var(--button-color); box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4); } .ss-btn--primary:hover, .ss-btn--primary:focus, .ss-btn--primary:active { background: var(--button-hover); border-color: var(--button-hover); color: #fff; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4); } .ss-btn--secondary { background: rgba(255, 255, 255, 0.06); color: var(--ss-text); border-color: var(--ss-border); } .ss-btn__muted { font-weight: 600; opacity: 0.78; } .ss-hero__proof { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--ss-muted); line-height: 1.55; font-size: 14px; } .ss-hero__right { padding: 26px 22px; border-radius: var(--ss-radius); border: 1px solid var(--ss-border); background: var(--ss-surface); box-shadow: var(--ss-shadow); } .ss-card__title { margin: 0 0 10px; font-size: 16px; letter-spacing: 0.01em; } .ss-card__list { margin: 0 0 14px; padding: 0 0 0 18px; color: var(--ss-muted); line-height: 1.6; font-size: 14px; } .ss-card__mini { display: flex; flex-wrap: wrap; gap: 8px; } .ss-pill { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); color: var(--ss-muted); font-size: 12px; } @media (max-width: 860px) { .ss-hero__grid { grid-template-columns: 1fr; } } .ss-booking-quick .ss-btn--secondary { color: #0b0c0f; background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); } .ss-hero, .ss-hero * { color: #ffffff; } .ss-hero .ss-btn--primary, .ss-hero .ss-btn--primary * { color: #fff; } .ss-hero .ss-hero__media-btn { color: rgba(0, 0, 0, 0.88); } .mobile-program-nav a { color: #ffffff; } .mobile-program-nav a:hover, .mobile-program-nav a:focus { color: var(--button-color); } .ss-accent { color: var(--button-color); } .ss-hero__eyebrow .ss-accent { color: #ffffff; transition: color 0.2s ease; } .ss-hero__eyebrow:hover .ss-accent { color: var(--button-color); } .ss-hero__eyebrow .ss-accent { color: #ffffff !important; } .ss-hero__eyebrow:hover .ss-accent { color: var(--button-color) !important; } .ss-hero__eyebrow { color: #ffffff !important; } .ss-hero__eyebrow .ss-accent { color: #ffffff !important; } #hero .ss-hero__left .small.text-white.mb-2>a:nth-child(1), #hero .ss-hero__left .small.text-white.mb-2>a:nth-child(1):hover { color: #ffffff !important; } #meet-instructor .col-md-8>p:nth-of-type(7) a, #meet-instructor .col-md-8>p:nth-of-type(8) a { color: #000; } #local-easy>div>div>p.fw-semibold.mb-1>a { color: #000; } .ss-hero__eyebrow:hover .ss-accent { color: var(--button-color) !important; } .ss-book { --ss-text: rgba(255, 255, 255, 0.96); --ss-muted: rgba(255, 255, 255, 0.82); color: var(--ss-text); background: var(--ss-bg); } .ss-book__wrap { max-width: var(--ss-max); margin: 0 auto; padding: 0 18px; } .ss-book__hero { padding: 42px 0 22px; background: radial-gradient(1000px 520px at 18% 10%, rgba(72, 255, 160, 0.10), transparent 58%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ss-book__eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ss-muted); } .ss-book__headline { margin: 0 0 10px; font-size: clamp(30px, 4vw, 52px); line-height: 1.05; } .ss-book__subhead { margin: 0 0 16px; color: var(--ss-muted); font-size: 16px; line-height: 1.45; max-width: 60ch; } .ss-book__buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 8px; } .ss-book__contact { margin: 6px 0 10px; } .ss-book__proof { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--ss-muted); line-height: 1.6; font-size: 14px; } .ss-book__section { padding: 26px 0; } .ss-book__h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: 0.01em; } .ss-book__steps { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } .ss-book__grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); } .ss-book .ss-card { border: 1px solid var(--ss-border); background: var(--ss-surface); border-radius: var(--ss-radius); padding: 18px 16px; box-shadow: var(--ss-shadow); } .ss-book .ss-card__title { margin: 0 0 8px; font-size: 15px; } .ss-book .ss-card__text { margin: 0 0 8px; color: var(--ss-muted); line-height: 1.55; font-size: 14px; } .ss-faq { border: 1px solid var(--ss-border); background: rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 12px 14px; margin: 10px 0; } .ss-faq summary { cursor: pointer; font-weight: 650; } .ss-faq p { margin: 10px 0 0; color: var(--ss-muted); line-height: 1.55; font-size: 14px; } .ss-book__final { padding: 28px 0 44px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .ss-book__tiny { margin: 12px 0 0; color: var(--ss-muted); font-size: 13px; } .ss-book .ss-link { color: rgba(72, 255, 160, 0.92); text-decoration: none; border-bottom: 1px solid rgba(72, 255, 160, 0.25); } .ss-book .ss-link:hover { border-bottom-color: rgba(72, 255, 160, 0.6); } .ss-kingston-panel { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--ss-text); } @media (max-width: 920px) { .ss-book__steps, .ss-book__grid { grid-template-columns: 1fr; } } .free-intro-promise { margin: clamp(1.5rem, 3vw, 2.5rem) auto; } .free-intro-promise__card { background: #fff; border-radius: 24px; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid rgba(15, 12, 8, 0.08); box-shadow: 0 18px 40px rgba(15, 12, 8, 0.08); text-align: center; } .free-intro-promise__card p, .free-intro-promise__card ul { text-align: center; margin-left: auto; margin-right: auto; } .free-intro-promise__eyebrow { text-transform: uppercase; letter-spacing: 0.25em; font-size: 0.7rem; color: rgba(15, 12, 8, 0.6); margin: 0 0 0.75rem; } .free-intro-promise__list { list-style: none; padding: 0; margin: 0 auto 1rem; display: grid; gap: 0.4rem; color: rgba(15, 12, 8, 0.8); font-weight: 600; justify-items: center; text-align: center; width: fit-content; } .free-intro-promise__list li::before { content: none; } .free-intro-promise__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .safety-promise { margin: 0.75rem 0 0; font-weight: 600; color: rgba(15, 12, 8, 0.7); } .site-header--booking { display: none } body[data-layout="booking"] .site-header--booking { display: block; position: static; background: #fff; color: #0f0c08; border-bottom: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none } body[data-layout="booking"] .site-header--default { display: none } .hdr-booking { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px } .hdr-booking__brand { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: #0f0c08; text-decoration: none } .hdr-booking__actions { display: flex; align-items: center; gap: 10px } .hdr-booking__phone, .hdr-booking__text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.12); text-decoration: none; color: #0f0c08; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem } .hdr-booking__text { background: rgba(15, 12, 8, 0.04) } body[data-layout="booking"] .mobile-sticky-cta, body[data-layout="booking"] .desktop-sticky-cta { display: none !important } body[data-layout="booking"].body-has-sticky { padding-bottom: 0 !important } body[data-layout="booking"] .ss-book__hero { padding-top: 28px; padding-bottom: 18px } body[data-layout="booking"] .ss-book__buttons .ss-btn { min-height: 48px; padding: 14px 18px } @media (max-width: 640px) { body[data-layout="booking"] .ss-book__buttons .ss-btn { width: 100% } body[data-layout="booking"] main.ss-book { padding-top: 8px } body[data-layout="booking"] .ss-book__headline { margin-top: 6px } } .ss-book h1, .ss-book h2, .ss-book h3, .ss-book h4, .ss-book h5, .ss-book h6 { color: var(--ss-text); } .ss-book .text-muted { color: var(--ss-muted) !important; } body[data-layout="booking"] .ss-book__headline, body[data-layout="booking"] .ss-book__h2, body[data-layout="booking"] .ss-book__subhead { color: var(--ss-text) !important; } body[data-layout="booking"] .booking-embed__frame { height: 400vh; min-height: 400vh } body[data-layout="booking"] #calendlyInline, body[data-layout="booking"] #calendlyInline iframe { height: 100%; min-height: 400vh } .ss-btn:focus-visible, input:focus-visible, textarea:focus-visible, .form-control:focus-visible, .btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; box-shadow: none; } .ss-top-mobile-actions { display: none; } @media (max-width: 767.98px) { .ss-top-mobile-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: .65rem; width: min(100% - 1.25rem, 430px); margin: 1rem auto 1.15rem; padding: .35rem; border-radius: 999px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(54, 43, 36, .12); box-shadow: 0 10px 26px rgba(54, 43, 36, .14); } .ss-top-mobile-actions .ss-top-mobile-action { min-height: 58px; border-radius: 999px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; padding: .55rem .5rem; text-decoration: none !important; font-size: 1rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #362B24 !important; background: #fff; border: 1px solid rgba(54, 43, 36, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75); } .ss-top-mobile-actions .ss-top-mobile-action-icon { display: block; font-size: 1.45rem; line-height: 1; } .ss-top-mobile-actions .ss-top-mobile-action-call { background: #fff; } .ss-top-mobile-actions .ss-top-mobile-action-schedule { background: #fff; } .ss-top-mobile-actions .ss-top-mobile-action:focus-visible { outline: 3px solid #00DDE0; outline-offset: 3px; } } .page-bjj-glossary .learning-path-card, .page-bjj-glossary .path-card, .page-bjj-glossary .cta-card, .page-bjj-glossary .intro-card, .page-bjj-glossary .ready-card, .page-bjj-glossary .quick-start-card, .page-bjj-glossary .filter-panel .card, .page-bjj-glossary .map-card { background: var(--ss-surface) !important; color: var(--ss-ink) !important; opacity: 1 !important; text-shadow: none !important; } .page-bjj-glossary .glossary-card *, .page-bjj-glossary .glossary-path-card *, .page-bjj-glossary .glossary-paths *, .page-bjj-glossary .learning-path-card *, .page-bjj-glossary .path-card *, .page-bjj-glossary .cta-card *, .page-bjj-glossary .intro-card *, .page-bjj-glossary .ready-card *, .page-bjj-glossary .quick-start-card *, .page-bjj-glossary .filter-panel .card *, .page-bjj-glossary .map-card * { color: inherit; opacity: 1; text-shadow: none; } .page-bjj-glossary .glossary-card h1, .page-bjj-glossary .glossary-card h2, .page-bjj-glossary .glossary-card h3, .page-bjj-glossary .glossary-path-card h1, .page-bjj-glossary .glossary-path-card h2, .page-bjj-glossary .glossary-path-card h3, .page-bjj-glossary .learning-path-card h1, .page-bjj-glossary .learning-path-card h2, .page-bjj-glossary .learning-path-card h3, .page-bjj-glossary .path-card h1, .page-bjj-glossary .path-card h2, .page-bjj-glossary .path-card h3 { color: var(--ss-teal-dark) !important; font-weight: 800; } .page-bjj-glossary .glossary-card p, .page-bjj-glossary .glossary-path-card p, .page-bjj-glossary .learning-path-card p, .page-bjj-glossary .path-card p, .page-bjj-glossary .cta-card p, .page-bjj-glossary .intro-card p, .page-bjj-glossary .ready-card p { color: var(--ss-muted) !important; } .page-bjj-glossary .glossary-card a, .page-bjj-glossary .glossary-path-card a, .page-bjj-glossary .learning-path-card a, .page-bjj-glossary .path-card a, .page-bjj-glossary .cta-card a, .page-bjj-glossary .intro-card a, .page-bjj-glossary .ready-card a { color: var(--ss-green) !important; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; } .page-bjj-glossary .btn, .page-bjj-glossary .btn-primary, .page-bjj-glossary .btn-orange, .page-bjj-glossary .reserve-free-intro, .page-bjj-glossary a[href*="free-bjj-intro-tannersville-ny"] { background: var(--ss-green) !important; color: #ffffff !important; border-color: var(--ss-green) !important; opacity: 1 !important; text-shadow: none !important; } .page-bjj-glossary .ready-card, .page-bjj-glossary .cta-card, .page-bjj-glossary .glossary-cta { background: var(--ss-surface-soft) !important; border: 1px solid var(--ss-border); } .page-bjj-glossary .ready-card strong, .page-bjj-glossary .ready-card p, .page-bjj-glossary .cta-card strong, .page-bjj-glossary .cta-card p, .page-bjj-glossary .glossary-cta strong, .page-bjj-glossary .glossary-cta p { color: var(--ss-teal-dark) !important; } .page-bjj-glossary .glossary-search-shell, .page-bjj-glossary .filter-shell, .page-bjj-glossary .glossary-filters { color: #ffffff !important; } .page-bjj-glossary .glossary-search-shell label, .page-bjj-glossary .filter-shell label, .page-bjj-glossary .glossary-filters label, .page-bjj-glossary .glossary-search-shell strong, .page-bjj-glossary .filter-shell strong, .page-bjj-glossary .glossary-filters strong { color: #ffffff !important; } .page-bjj-glossary input[type="search"], .page-bjj-glossary input[type="text"] { background: #102625 !important; color: #ffffff !important; border: 1px solid #289fa1 !important; } .page-bjj-glossary input::placeholder { color: rgba(255, 255, 255, 0.7) !important; } .page-bjj-glossary .pill, .page-bjj-glossary .tag, .page-bjj-glossary .filter-chip, .page-bjj-glossary .letter-filter, .page-bjj-glossary .letter-btn { background: #ffffff !important; color: var(--ss-ink) !important; border: 1px solid var(--ss-border) !important; opacity: 1 !important; text-shadow: none !important; } .page-bjj-glossary .pill:hover, .page-bjj-glossary .tag:hover, .page-bjj-glossary .filter-chip:hover, .page-bjj-glossary .letter-filter:hover, .page-bjj-glossary .letter-btn:hover { background: #f4f1ed !important; color: var(--ss-teal-dark) !important; } .page-bjj-glossary .badge, .page-bjj-glossary .eyebrow, .page-bjj-glossary .kicker { color: var(--ss-green) !important; background: rgba(17, 106, 66, 0.09) !important; } .page-bjj-glossary [style*="opacity"] { opacity: 1; }