/* ============================================================ * Coach Marketing Site — Premium Public CSS * Brand colors are injected at from BrandResolver. * Typography: Plus Jakarta Sans (display) + Inter (body) for a * modern, corporate-but-warm feel. * ============================================================ */ :root { --brand-primary: #6366F1; --brand-accent: #8B5CF6; --brand-text: #0F172A; --brand-muted: #475569; --brand-soft: #94A3B8; --brand-bg: #FFFFFF; --brand-bg-soft: #F8FAFC; --brand-border: #E2E8F0; --brand-grad: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-accent) 100%); --brand-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 8%, #fff) 0%, color-mix(in srgb, var(--brand-accent) 12%, #fff) 100%); --cs-radius-sm: 10px; --cs-radius: 16px; --cs-radius-lg: 24px; --cs-radius-xl: 32px; /* 2026-06-24 — layered, soft shadows for a premium depth (applies to every card / dropdown / button across all coach sites via these tokens). */ --cs-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 3px 10px rgba(15, 23, 42, 0.05); --cs-sh-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 14px 32px rgba(15, 23, 42, 0.08); --cs-sh-lg: 0 8px 24px rgba(15, 23, 42, 0.07), 0 26px 60px rgba(15, 23, 42, 0.12); --cs-sh-brand: 0 8px 20px rgba(99, 102, 241, 0.20), 0 18px 44px rgba(99, 102, 241, 0.22); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body.cs-body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--brand-text); background: var(--brand-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.011em; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand-primary); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--brand-accent); } ::selection { background: color-mix(in srgb, var(--brand-primary) 22%, transparent); color: inherit; } .cs-container { max-width: 1240px; margin: 0 auto; padding: 0 28px; } .cs-container--narrow { max-width: 820px; } .cs-pad { padding: 50px 0; } .cs-h2 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 42px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.025em; line-height: 1.15; color: var(--brand-text); } .cs-lead { color: var(--brand-muted); font-size: 18px; margin: 0; max-width: 680px; line-height: 1.65; } .cs-eyebrow { display: inline-block; color: var(--brand-primary); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; padding: 6px 14px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); border-radius: 999px; } .cs-section-head { text-align: center; margin: 0 auto 56px; max-width: 760px; } .cs-section-head .cs-lead { margin: 0 auto; } /* 2026-06-24 — premium polish: balanced multi-line heading wrap (even line lengths) for an editorial/corporate finish; ignored gracefully on old browsers. */ .cs-h1, .cs-h2, .cs-h3, .cs-hero__title, .cs-bd__title { text-wrap: balance; } .cs-empty { text-align: center; padding: 70px 24px; color: var(--brand-soft); background: var(--brand-bg-soft); border-radius: var(--cs-radius); font-size: 14px; } .cs-prose { color: var(--brand-text); line-height: 1.7; } .cs-prose p { margin: 0 0 14px; } .cs-prose strong { color: var(--brand-text); } /* ── Buttons ─────────────────────────────────────────────────────── */ .cs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s, background 0.2s, filter 0.2s; text-decoration: none; font-family: inherit; letter-spacing: -0.005em; line-height: 1; } .cs-btn:hover { text-decoration: none; transform: translateY(-2px); } .cs-btn--primary { background: var(--brand-grad); color: #fff; box-shadow: var(--cs-sh-brand); } .cs-btn--primary:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 18px 44px rgba(99, 102, 241, 0.35); } .cs-btn--invert { background: #fff; color: var(--brand-primary); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .cs-btn--invert:hover { color: var(--brand-accent); } .cs-btn--outline { background: transparent; color: var(--brand-text); border: 2px solid var(--brand-border); } .cs-btn--outline:hover { border-color: var(--brand-text); } .cs-btn--sm { padding: 9px 18px; font-size: 13.5px; } .cs-btn--lg { padding: 16px 34px; font-size: 16px; } /* ── Top nav ─────────────────────────────────────────────────────── */ /* ── Premium top nav (2026-06-24) — glass, scroll-aware, pill links ── */ .cs-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.70); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } /* subtle elevation once the page is scrolled (toggled by JS .is-scrolled) */ .cs-nav.is-scrolled { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--brand-border); box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07); } .cs-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; gap: 22px; transition: padding .25s ease; } .cs-nav.is-scrolled .cs-nav__inner { padding-top: 10px; padding-bottom: 10px; } .cs-nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .cs-nav__brand img { max-height: 40px; transition: max-height .25s ease; } .cs-nav.is-scrolled .cs-nav__brand img { max-height: 34px; } .cs-nav__brand span { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 800; font-size: 20px; color: var(--brand-text); letter-spacing: -0.02em; } /* ── Corporate-premium menu (2026-06-24) — refined type + sliding center-out underline indicator, soft hover wash, clear active state ── */ .cs-nav__links { display: flex; gap: 2px; align-items: center; } .cs-nav__links > a, .cs-nav__toplink { position: relative; color: var(--brand-text); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; padding: 10px 16px; border-radius: 10px; line-height: 1; transition: color .2s ease, background .2s ease; } /* sliding underline indicator (grows from centre) */ .cs-nav__links > a::after, .cs-nav__toplink::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--brand-primary); transform: scaleX(0); transform-origin: center; transition: transform .24s cubic-bezier(.4,0,.2,1); } .cs-nav__links > a:hover, .cs-nav__toplink:hover { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 6%, transparent); } .cs-nav__links > a:hover::after, .cs-nav__toplink:hover::after { transform: scaleX(1); } .cs-nav__links > a[aria-current="page"], .cs-nav__toplink.is-active { color: var(--brand-primary); font-weight: 600; } .cs-nav__links > a[aria-current="page"]::after, .cs-nav__toplink.is-active::after { transform: scaleX(1); } /* refined login / CTA buttons */ .cs-nav__login { border-radius: 999px; font-weight: 600; letter-spacing: -0.01em; } .cs-nav__login:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .cs-nav__cta { border-radius: 999px; font-weight: 600; box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 28%, transparent); } .cs-nav__cta:hover { transform: translateY(-1px); } /* ── Font Awesome 6 → 5 shim ────────────────────────────────────────── The platform bundles Font Awesome 5 (fontawesome-all.min.css) but the coach-site templates author with Font Awesome 6 syntax (fa-solid, fa-cart-shopping, fa-circle-check, etc.). Without this shim those classes render NOTHING — students saw an invisible cart icon with a floating badge. Mapping FA6 family + icon names to their FA5 equivalents keeps both class styles working until/unless the platform adopts FA6 directly. */ .fa-solid, .fa-regular { font-family: 'Font Awesome 5 Free' !important; } .fa-solid { font-weight: 900; } .fa-regular { font-weight: 400; } .fa-brands { font-family: 'Font Awesome 5 Brands' !important; font-weight: 400; } /* FA6 icon names that don't exist in FA5 — alias to FA5 unicode points. */ .fa-cart-shopping::before { content: '\f07a'; } /* FA5: fa-shopping-cart */ .fa-circle-check::before { content: '\f058'; } /* FA5: fa-check-circle */ .fa-triangle-exclamation::before { content: '\f071'; } /* FA5: fa-exclamation-triangle */ .fa-circle-notch::before { content: '\f1ce'; } /* same in both */ /* Cart icon in the coach-site header — visible on every page so the student always has a clear path to checkout once they've added a course. */ .cs-nav__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; background: transparent; color: var(--brand-text); font-size: 17px; transition: background 0.15s, color 0.15s, transform 0.15s; text-decoration: none; /* 2026-06-24 — absorb the free space here so the right-side actions (cart + login + optional CTA) hug the right edge as a tight group. Without this, .cs-nav__inner's space-between scattered them apart once the default Contact button was removed. Works on mobile too (links hidden → brand left, actions right). */ margin-left: auto; margin-right: 4px; } .cs-nav__cart:hover { background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--brand-primary); transform: translateY(-1px); } .cs-nav__cart-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-primary, #6366F1); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35); line-height: 1; } .cs-nav__cart-count.is-zero { display: none; } .cs-nav__cart { background: transparent; border: 0; cursor: pointer; } /* ── Slide-out cart drawer ───────────────────────────────────────── Keeps the student inside the coach-branded experience after Add-to-cart. Only the final Checkout button leaves the coach site. */ .cs-cart-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 998; } .cs-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; box-shadow: -16px 0 40px rgba(15, 23, 42, 0.12); transform: translateX(100%); transition: transform 0.28s ease; z-index: 999; display: flex; flex-direction: column; } .cs-cart-open .cs-cart-overlay { opacity: 1; pointer-events: auto; } .cs-cart-open .cs-cart-drawer { transform: translateX(0); } .cs-cart-open { overflow: hidden; } .cs-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #E5E7EB; } .cs-cart-drawer__head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand-text, #0F172A); } .cs-cart-drawer__count { color: var(--brand-muted, #6B7280); font-weight: 500; font-size: 14px; margin-left: 4px; } .cs-cart-drawer__close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #F3F4F6; font-size: 22px; line-height: 1; cursor: pointer; color: #6B7280; } .cs-cart-drawer__close:hover { background: #E5E7EB; color: #111827; } .cs-cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 18px; } .cs-cart-drawer__empty { text-align: center; padding: 60px 20px; color: var(--brand-muted, #6B7280); } .cs-cart-drawer__empty i { font-size: 38px; color: #D1D5DB; margin-bottom: 14px; display: block; } .cs-cart-drawer__empty p { font-size: 16px; font-weight: 600; color: #111827; margin: 0 0 6px; } .cs-cart-drawer__empty small { font-size: 13px; } .cs-cart-drawer__item { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #F3F4F6; } .cs-cart-drawer__item img, .cs-cart-drawer__placeholder { width: 70px; height: 50px; object-fit: cover; border-radius: 8px; background: #F3F4F6; flex: 0 0 70px; display: flex; align-items: center; justify-content: center; color: #9CA3AF; } .cs-cart-drawer__meta { flex: 1 1 auto; min-width: 0; } .cs-cart-drawer__meta h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--brand-text, #0F172A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-cart-drawer__price { font-size: 14px; font-weight: 700; color: var(--brand-primary, #6366F1); } .cs-cart-drawer__foot { border-top: 1px solid #E5E7EB; padding: 18px 22px; background: #FAFAFA; } .cs-cart-drawer__total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .cs-cart-drawer__total span { color: #6B7280; font-size: 14px; } .cs-cart-drawer__total strong { font-size: 20px; font-weight: 800; color: var(--brand-text, #0F172A); } .cs-cart-drawer__checkout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 20px; font-weight: 600; font-size: 15px; text-decoration: none; } .cs-cart-drawer__view-full { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: var(--brand-muted, #6B7280); text-decoration: none; } .cs-cart-drawer__view-full:hover { color: var(--brand-primary, #6366F1); } .cs-nav__toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--brand-text); } .cs-nav-open .cs-nav__links { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #fff; padding: 20px 28px; border-bottom: 1px solid var(--brand-border); gap: 14px; } /* ── Hero ────────────────────────────────────────────────────────── */ .cs-hero { padding: 120px 0 100px; position: relative; overflow: hidden; background: var(--brand-grad-soft); } .cs-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--brand-primary) 14%, transparent) 0%, transparent 50%), radial-gradient(circle at 85% 70%, color-mix(in srgb, var(--brand-accent) 14%, transparent) 0%, transparent 50%); pointer-events: none; } /* Image-background hero: white text by default ONLY when explicitly flagged with cs-hero--image-bg class. Coach's _text_color in inline style overrides this rule via specificity (inline always wins). */ .cs-hero.cs-hero--image-bg { color: #fff; } .cs-hero.cs-hero--image-bg .cs-hero__headline, .cs-hero.cs-hero--image-bg .cs-hero__subhead { color: #fff; } .cs-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: center; position: relative; z-index: 1; } .cs-hero--text-image-left .cs-hero__grid { grid-template-columns: 1fr 1.05fr; } .cs-hero--text-image-left .cs-hero__image { order: -1; } .cs-hero--text-center .cs-hero__grid { grid-template-columns: 1fr; text-align: center; } .cs-hero--text-center .cs-hero__text { margin: 0 auto; max-width: 760px; } .cs-hero__headline { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 62px; line-height: 1.05; margin: 0 0 22px; font-weight: 800; letter-spacing: -0.035em; color: var(--brand-text); } .cs-hero__subhead { font-size: 20px; color: var(--brand-muted); margin: 0 0 36px; line-height: 1.6; max-width: 540px; } /* 2026-06-24 — disabled on request (coach controls hero image styling). .cs-hero__image img { border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-lg); } */ /* ── About ───────────────────────────────────────────────────────── */ .cs-about__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; align-items: center; } .cs-about__image img { border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-md); } .cs-creds { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; } .cs-creds li { color: var(--brand-text); font-weight: 500; display: flex; align-items: center; gap: 12px; } .cs-creds i { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } /* ── Generic grid ────────────────────────────────────────────────── */ .cs-grid { display: grid; gap: 28px; } .cs-grid--1 { grid-template-columns: 1fr; } .cs-grid--2 { grid-template-columns: repeat(2, 1fr); } .cs-grid--3 { grid-template-columns: repeat(3, 1fr); } .cs-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ── Cards (services, generic) ───────────────────────────────────── */ .cs-card { background: #fff; border-radius: var(--cs-radius-lg); overflow: hidden; box-shadow: var(--cs-sh-sm); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s; border: 1px solid var(--brand-border); display: flex; flex-direction: column; } .cs-card:hover { transform: translateY(-6px); box-shadow: var(--cs-sh-lg); border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border)); } .cs-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand-bg-soft); display: block; } .cs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .cs-card:hover .cs-card__media img { transform: scale(1.06); } .cs-card__body { padding: 26px 24px 26px; flex: 1; display: flex; flex-direction: column; } .cs-card__title { font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.015em; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; } .cs-card__desc { color: var(--brand-muted); font-size: 14.5px; margin: 0 0 20px; line-height: 1.6; flex: 1; } .cs-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; } /* 2026-06-24 — per-card social links (trainer/team cards). Brand-aware, premium; shows only the icons the coach filled. Consistent across cards. */ .cs-card__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .cs-card__social a { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-bg-soft); color: var(--brand-primary); border: 1px solid var(--brand-border); font-size: 13.5px; transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .2s ease; } .cs-card__social a:hover { background: var(--brand-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--cs-sh-sm); } .cs-price { font-size: 24px; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.02em; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; } /* ── Testimonials ────────────────────────────────────────────────── */ .cs-quote { background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-bg-soft) 100%); padding: 32px; border-radius: var(--cs-radius-lg); position: relative; border: 1px solid var(--brand-border); box-shadow: var(--cs-sh-sm); transition: transform 0.2s, box-shadow 0.2s; } .cs-quote:hover { transform: translateY(-4px); box-shadow: var(--cs-sh-md); } .cs-quote__icon { position: absolute; top: 26px; right: 28px; font-size: 38px; color: var(--brand-primary); opacity: 0.18; } .cs-stars { color: #F59E0B; margin-bottom: 14px; display: flex; gap: 2px; } .cs-quote__text { font-size: 16px; line-height: 1.75; margin: 0 0 22px; color: var(--brand-text); font-style: italic; } .cs-quote__author { display: flex; align-items: center; gap: 14px; } .cs-quote__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: var(--cs-sh-sm); } .cs-quote__author strong { display: block; font-weight: 700; font-size: 14.5px; } .cs-quote__author span { font-size: 13px; color: var(--brand-muted); } /* ── YouTube + video gallery ─────────────────────────────────────── */ .cs-video { display: flex; flex-direction: column; gap: 14px; } .cs-video__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cs-radius); background: #000; box-shadow: var(--cs-sh-md); transition: transform 0.25s, box-shadow 0.25s; display: block; cursor: pointer; } .cs-video__iframe { width: 100%; height: 100%; border: 0; display: block; } .cs-video__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(15, 23, 42, 0.78); z-index: 2; } .cs-video__loading i { font-size: 28px; color: var(--brand-accent, #8B5CF6); } .cs-video__thumb:hover { transform: translateY(-4px); box-shadow: var(--cs-sh-lg); } .cs-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } .cs-video__thumb:hover img { transform: scale(1.06); } .cs-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); transition: background 0.2s; } .cs-video__play::after { content: '\f04b'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 22px; width: 64px; height: 64px; background: var(--brand-grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5); transition: transform 0.2s; } .cs-video__thumb:hover .cs-video__play::after { transform: scale(1.1); } .cs-video__play i { display: none; } /* hidden — using ::after */ .cs-video__player { padding: 0; } .cs-video__player iframe, .cs-video__player video { width: 100%; height: 100%; border: 0; display: block; } .cs-video__title { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.015em; } .cs-video__desc { font-size: 14px; color: var(--brand-muted); margin: 0; line-height: 1.55; } /* ── Stats ───────────────────────────────────────────────────────── */ .cs-stat { text-align: center; padding: 40px 22px; background: linear-gradient(180deg, #FFFFFF 0%, var(--brand-bg-soft) 100%); border-radius: var(--cs-radius-lg); border: 1px solid var(--brand-border); box-shadow: var(--cs-sh-sm); transition: transform 0.2s; } .cs-stat:hover { transform: translateY(-4px); } .cs-stat__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--brand-grad); color: #fff; margin: 0 auto 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: var(--cs-sh-brand); } .cs-stat__num { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 52px; font-weight: 800; color: var(--brand-text); letter-spacing: -0.035em; line-height: 1; } .cs-stat__num small { font-size: 30px; color: var(--brand-primary); margin-left: 2px; } .cs-stat__label { color: var(--brand-muted); font-weight: 500; margin-top: 10px; font-size: 14.5px; } /* ── FAQ accordion ───────────────────────────────────────────────── */ .cs-accordion { display: grid; gap: 14px; } .cs-acc__item { background: #fff; border: 1.5px solid var(--brand-border); border-radius: var(--cs-radius); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .cs-acc__item:hover { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--brand-border)); } .cs-acc__item[open] { border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 12%, transparent); } .cs-acc__q { padding: 22px 28px; font-weight: 600; font-size: 15.5px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; list-style: none; color: var(--brand-text); letter-spacing: -0.01em; } .cs-acc__q::-webkit-details-marker { display: none; } .cs-acc__chev { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-bg-soft); color: var(--brand-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: transform 0.25s, background 0.2s, color 0.2s; flex-shrink: 0; } .cs-acc__item[open] .cs-acc__chev { transform: rotate(180deg); background: var(--brand-grad); color: #fff; } .cs-acc__a { padding: 4px 28px 26px; color: var(--brand-muted); line-height: 1.7; font-size: 15px; } /* ── Lead form ───────────────────────────────────────────────────── */ .cs-leadform { background: linear-gradient(180deg, var(--brand-bg-soft) 0%, #FFFFFF 100%); } .cs-form { background: #fff; padding: 44px; border-radius: var(--cs-radius-lg); border: 1px solid var(--brand-border); box-shadow: var(--cs-sh-md); } .cs-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; } .cs-field { display: flex; flex-direction: column; gap: 7px; } .cs-field--textarea { grid-column: 1 / -1; } .cs-label { font-size: 13px; font-weight: 600; color: var(--brand-text); letter-spacing: -0.005em; } .cs-req { color: #EF4444; } .cs-field input, .cs-field select, .cs-field textarea { width: 100%; padding: 14px 16px; border: 1.5px solid var(--brand-border); border-radius: 12px; font-family: inherit; font-size: 15px; background: #fff; color: var(--brand-text); transition: border-color 0.15s, box-shadow 0.15s; } .cs-field input:focus, .cs-field select:focus, .cs-field textarea:focus { outline: 0; border-color: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 18%, transparent); } .cs-form__success { display: none; padding: 16px 22px; background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; border-radius: 12px; margin: 18px 0 0; font-weight: 500; } .cs-form__success--show { display: block; } /* ── CTA banner ──────────────────────────────────────────────────── */ .cs-cta { padding: 80px 0; position: relative; overflow: hidden; } .cs-cta--brand { background: var(--brand-grad); color: #fff; } .cs-cta--brand::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 30%, rgba(255,255,255,.18) 0%, transparent 50%), radial-gradient(circle at 90% 70%, rgba(255,255,255,.10) 0%, transparent 50%); pointer-events: none; } .cs-cta--dark { background: #0F172A; color: #fff; } .cs-cta--light { background: var(--brand-bg-soft); color: var(--brand-text); } .cs-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; position: relative; z-index: 1; } .cs-cta__h { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 36px; margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; } .cs-cta__sub { margin: 8px 0 0; opacity: 0.92; font-size: 16px; line-height: 1.55; } /* ── Contact ─────────────────────────────────────────────────────── */ .cs-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; } .cs-contact__line { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 18px; } .cs-contact__line i { width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--brand-primary) 10%, transparent); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .cs-contact__line a { color: var(--brand-text); } .cs-contact__line a:hover { color: var(--brand-primary); } .cs-contact__map iframe { width: 100%; height: 400px; border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-md); } /* ── Footer ──────────────────────────────────────────────────────── */ .cs-footer { background: #0F172A; color: #94A3B8; padding: 70px 0 0; margin-top: 40px; } .cs-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 50px; padding-bottom: 50px; } .cs-footer__logo { max-height: 52px; margin-bottom: 16px; } .cs-footer__name { color: #fff; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 24px; margin: 0 0 14px; font-weight: 800; letter-spacing: -0.02em; } .cs-footer__tag { color: #CBD5E1; font-size: 14px; line-height: 1.6; max-width: 320px; } .cs-footer__col h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 18px; font-weight: 700; } .cs-footer__links { list-style: none; padding: 0; margin: 0; } .cs-footer__links li { margin-bottom: 12px; } .cs-footer__links a { color: #CBD5E1; font-size: 14px; transition: color 0.15s; } .cs-footer__links a:hover { color: #fff; } .cs-footer__bar { border-top: 1px solid #1E293B; padding: 24px 0; } .cs-footer__bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .cs-footer__bar-inner span { color: #64748B; font-size: 13px; } /* ── Recorded courses (with 60s preview player) ───────────────────── */ .cs-rec__grid { gap: 30px; } .cs-rec__card { background: #fff; border-radius: var(--cs-radius-lg); overflow: hidden; box-shadow: var(--cs-sh-sm); transition: transform 0.25s, box-shadow 0.25s; border: 1px solid var(--brand-border); display: flex; flex-direction: column; } .cs-rec__card:hover { transform: translateY(-6px); box-shadow: var(--cs-sh-lg); } .cs-rec__media { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .cs-rec__media video, .cs-rec__media iframe, .cs-rec__poster { width: 100%; height: 100%; display: block; object-fit: cover; } .cs-rec__thumb-link img { width: 100%; height: 100%; object-fit: cover; } .cs-rec__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%); color: #fff; border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px; transition: background 0.2s; } .cs-rec__play:hover { background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%); } .cs-rec__play i { width: 76px; height: 76px; border-radius: 50%; background: var(--brand-grad); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 14px 36px rgba(99, 102, 241, 0.45); transition: transform 0.2s; } .cs-rec__play:hover i { transform: scale(1.08); } .cs-rec__play span { background: rgba(0,0,0,0.55); padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(8px); letter-spacing: -0.005em; } .cs-rec__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.88); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); color: #fff; opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 5; } .cs-rec__overlay--show { opacity: 1; pointer-events: auto; } .cs-rec__overlay-content { text-align: center; padding: 28px; max-width: 90%; } .cs-rec__overlay-ic { width: 60px; height: 60px; background: var(--brand-grad); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; box-shadow: var(--cs-sh-brand); } .cs-rec__overlay h3 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 22px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.015em; color: #fff; } .cs-rec__overlay p { font-size: 14px; color: #CBD5E1; margin: 0 0 18px; } .cs-rec__body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; } .cs-rec__title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 17px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.015em; line-height: 1.3; } .cs-rec__meta { display: flex; gap: 14px; font-size: 13px; color: var(--brand-muted); margin-bottom: 14px; flex-wrap: wrap; } .cs-rec__rating { color: #F59E0B; font-weight: 600; } .cs-rec__rating i { margin-right: 4px; } .cs-rec__students i { margin-right: 4px; color: var(--brand-soft); } .cs-rec__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--brand-border); } .cs-rec__price { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: var(--brand-primary); letter-spacing: -0.02em; } /* Free-preview chip — sits over the thumbnail so the 60s rule is visible BEFORE the user clicks anything. */ .cs-rec__preview-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(15, 23, 42, 0.78); color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); letter-spacing: 0.01em; z-index: 3; pointer-events: none; } .cs-rec__preview-chip i { font-size: 11px; } /* Embedded YouTube/Vimeo iframe must fill the media area exactly. */ .cs-rec__iframe { width: 100%; height: 100%; border: 0; display: block; } /* Spinner shown while the preview iframe is fetching. */ .cs-rec__player-loading, .cs-rec__player-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 500; background: rgba(15, 23, 42, 0.78); text-align: center; padding: 16px; z-index: 2; } .cs-rec__player-loading i { font-size: 22px; color: var(--brand-accent, #8B5CF6); } .cs-rec__player-error i { font-size: 22px; color: #F59E0B; } .cs-rec__price--muted { color: var(--brand-muted); font-weight: 600; font-size: 14px; } /* Disabled-state for the cart button during the AJAX flight */ .cs-btn[disabled] { opacity: 0.7; cursor: progress; } .cs-rec__yt-course { font-size: 12.5px; color: var(--brand-muted); margin: 0 0 14px; padding: 8px 12px; background: color-mix(in srgb, var(--brand-primary) 6%, transparent); border-left: 3px solid var(--brand-primary); border-radius: 6px; line-height: 1.4; } .cs-rec__yt-course i { color: var(--brand-primary); margin-right: 4px; } .cs-rec__yt-course strong { color: var(--brand-text); } /* ── Footer social icons ──────────────────────────────────────────── */ .cs-footer__social { display: flex; gap: 10px; margin-top: 20px; } .cs-footer__social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #CBD5E1; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .cs-footer__social a:hover { background: var(--brand-grad); color: #fff; transform: translateY(-2px); box-shadow: var(--cs-sh-brand); } /* ── Floating action buttons (WhatsApp + sticky CTA) ────────────── */ .cs-float-btn { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: #fff !important; z-index: 999; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18); transition: transform 0.2s, box-shadow 0.2s; } .cs-float-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); } .cs-float-btn--whatsapp { background: #25D366; } .cs-float-cta { position: fixed; bottom: 24px; right: 96px; /* sits to left of WhatsApp */ padding: 13px 22px; border-radius: 999px; background: var(--brand-grad); color: #fff !important; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 9px; z-index: 998; box-shadow: var(--cs-sh-brand); transition: transform 0.2s, box-shadow 0.2s, filter 0.2s; text-decoration: none; } .cs-float-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(99, 102, 241, 0.40); filter: brightness(1.05); color: #fff !important; } @media (max-width: 640px) { .cs-float-cta { bottom: 88px; /* stack above WhatsApp on mobile */ right: 24px; } } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 1024px) { .cs-grid--4 { grid-template-columns: repeat(2, 1fr); } .cs-grid--3 { grid-template-columns: repeat(2, 1fr); } .cs-hero__grid, .cs-about__grid, .cs-contact__grid, .cs-footer__grid { grid-template-columns: 1fr; gap: 48px; } .cs-hero__headline { font-size: 46px; } .cs-hero__image { max-width: 500px; margin: 0 auto; } .cs-h2 { font-size: 34px; } .cs-cta__h { font-size: 28px; } } @media (max-width: 640px) { .cs-pad { padding: 64px 0; } .cs-container { padding: 0 20px; } .cs-hero { padding: 64px 0; } .cs-hero__headline { font-size: 36px; } .cs-hero__subhead { font-size: 17px; } .cs-h2 { font-size: 28px; } .cs-grid--3, .cs-grid--2 { grid-template-columns: 1fr; } .cs-form { padding: 28px 22px; } .cs-form__grid { grid-template-columns: 1fr; gap: 16px; } .cs-cta { padding: 56px 0; } .cs-cta__inner { flex-direction: column; align-items: flex-start; text-align: left; } .cs-cta__h { font-size: 26px; } .cs-nav__links { display: none; } .cs-nav__toggle { display: inline-block; } .cs-section-head { margin-bottom: 36px; } .cs-footer__grid { grid-template-columns: 1fr; gap: 32px; } .cs-stat__num { font-size: 42px; } .cs-contact__map iframe { height: 280px; } } /* ── Nav dropdowns (Menu Builder, 2026-06-17) ────────────────────── */ .cs-nav__item { position: relative; display: inline-flex; align-items: center; } .cs-nav__toplink { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-text); font-weight: 500; font-size: 15px; cursor: pointer; } .cs-nav__toplink.is-active { color: var(--brand-primary); } .cs-nav__caret { font-size: 10px; transition: transform .18s ease; opacity: .7; } .cs-nav__has-children:hover .cs-nav__caret, .cs-nav__has-children:focus-within .cs-nav__caret { transform: rotate(180deg); } .cs-nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid var(--brand-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,.12); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; } .cs-nav__has-children:hover .cs-nav__dropdown, .cs-nav__has-children:focus-within .cs-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .cs-nav__dropdown a { padding: 10px 13px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--brand-text); white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: background .15s ease, color .15s ease, padding-left .15s ease; } .cs-nav__dropdown a::after { display: none !important; } /* no underline inside the panel */ .cs-nav__dropdown a:hover { padding-left: 17px; } /* subtle slide-in on hover */ .cs-nav__dropdown a:hover { background: var(--brand-muted, #f4f5fb); color: var(--brand-primary); } /* Mobile: dropdowns expand inline inside the open menu drawer */ @media (max-width: 640px) { .cs-nav-open .cs-nav__item { display: block; width: 100%; } .cs-nav-open .cs-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--brand-border); border-radius: 0; margin: 6px 0 6px 10px; padding: 4px 0 4px 10px; min-width: 0; } .cs-nav-open .cs-nav__caret { display: none; } } /* ── Mega menu (Menu Builder, 2026-06-17) ────────────────────────── */ .cs-nav__has-mega { position: relative; } .cs-nav__mega { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--brand-border); border-radius: 14px; box-shadow: 0 20px 50px rgba(16,24,40,.14); padding: 22px 26px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; } .cs-nav__has-mega:hover .cs-nav__mega, .cs-nav__has-mega:focus-within .cs-nav__mega { opacity: 1; visibility: visible; transform: translateY(0); } .cs-nav__mega-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 22px 34px; min-width: 480px; max-width: 780px; } .cs-nav__mega-h { display: block; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-primary); margin-bottom: 11px; } a.cs-nav__mega-h:hover { text-decoration: underline; } .cs-nav__mega-h::after { display: none; } .cs-nav__mega-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .cs-nav__mega-links a { color: var(--brand-text); font-size: 14px; font-weight: 500; } .cs-nav__mega-links a::after { display: none; } .cs-nav__mega-links a:hover { color: var(--brand-primary); } .cs-nav__dropdown-label { padding: 9px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #9aa0bc; } /* Anchor the panel to the right for the last nav items so it never overflows the viewport. */ .cs-nav__links .cs-nav__item:last-child .cs-nav__mega, .cs-nav__links .cs-nav__item:nth-last-child(2) .cs-nav__mega { left: auto; right: 0; } @media (max-width: 640px) { .cs-nav-open .cs-nav__has-mega { display: block; width: 100%; } .cs-nav-open .cs-nav__mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--brand-border); border-radius: 0; margin: 6px 0 6px 10px; padding: 6px 0 6px 12px; } .cs-nav-open .cs-nav__mega-inner { display: block; min-width: 0; max-width: none; } .cs-nav-open .cs-nav__mega-col { margin-bottom: 14px; } } /* ── Builder sections: corporate polish (2026-06-18) — scoped to new blocks ── */ /* Rich Text — premium centred reading column + full editorial prose */ .cs-richtext .cs-prose { max-width: 820px; margin: 0 auto; font-size: 17px; } .cs-richtext .cs-prose > *:first-child { margin-top: 0; } .cs-richtext .cs-prose h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 34px 0 14px; } .cs-richtext .cs-prose h2 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; margin: 30px 0 12px; } .cs-richtext .cs-prose h3 { font-size: 21px; font-weight: 700; margin: 24px 0 10px; } .cs-richtext .cs-prose h4 { font-size: 18px; font-weight: 700; margin: 20px 0 8px; } .cs-richtext .cs-prose p { margin: 0 0 18px; line-height: 1.8; } .cs-richtext .cs-prose a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .cs-richtext .cs-prose ul, .cs-richtext .cs-prose ol { margin: 0 0 18px; padding-left: 24px; } .cs-richtext .cs-prose li { margin: 0 0 8px; line-height: 1.7; } .cs-richtext .cs-prose blockquote { margin: 24px 0; padding: 14px 24px; border-left: 3px solid var(--brand-primary); background: var(--brand-bg-soft); border-radius: 0 12px 12px 0; font-style: italic; } .cs-richtext .cs-prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; } .cs-richtext .cs-prose hr { border: 0; border-top: 1px solid var(--brand-border); margin: 30px 0; } .cs-richtext .cs-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; } .cs-richtext .cs-prose th, .cs-richtext .cs-prose td { border: 1px solid var(--brand-border); padding: 11px 14px; text-align: left; } .cs-richtext .cs-prose th { background: var(--brand-bg-soft); font-weight: 700; } /* Blog — clickable premium cards with clamps + read-more affordance */ .cs-blog .cs-card--link { text-decoration: none; color: inherit; } .cs-blog .cs-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cs-blog .cs-card__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cs-blog .cs-card__foot .cs-eyebrow { margin: 0; } .cs-blog .cs-readmore { color: var(--brand-primary); font-weight: 700; font-size: 13.5px; white-space: nowrap; } .cs-blog .cs-readmore__arr { display: inline-block; transition: transform .2s ease; } .cs-blog .cs-card--link:hover .cs-readmore__arr { transform: translateX(4px); } /* Cards — subtle button arrow nudge on hover (button text gets a trailing arrow) */ .cs-cards .cs-card__foot .cs-btn--primary::after { content: " \2192"; transition: margin .2s ease; } .cs-cards .cs-card:hover .cs-btn--primary::after { margin-left: 4px; } /* ── Image Gallery (gallery_v1) — Grid + Carousel + Lightbox ─────── */ .cs-gallery__wrap { position: relative; } .cs-gallery__item { margin: 0; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--cs-radius-lg); overflow: hidden; box-shadow: var(--cs-sh-sm); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, border-color 0.25s; display: flex; flex-direction: column; } .cs-gallery__item:hover { transform: translateY(-4px); box-shadow: var(--cs-sh-lg); border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border)); } .cs-gallery__item[role="button"] { cursor: zoom-in; } .cs-gallery__item:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 45%, transparent); outline-offset: 2px; } .cs-gallery__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-bg-soft); } .cs-gallery__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .cs-gallery__item:hover .cs-gallery__media img { transform: scale(1.05); } .cs-gallery__zoom { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, 0.55); color: #fff; border-radius: 999px; font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; } .cs-gallery__item:hover .cs-gallery__zoom { opacity: 1; transform: translateY(0); } .cs-gallery__caption { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; } .cs-gallery__title { font-weight: 600; font-size: 15px; } .cs-gallery__desc { font-size: 13.5px; line-height: 1.5; opacity: .75; } /* Carousel layout — horizontal scroll-snap track (responsive + touch) */ .cs-gallery--carousel .cs-gallery__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding: 6px 2px 10px; scrollbar-width: none; } .cs-gallery--carousel .cs-gallery__track::-webkit-scrollbar { display: none; } .cs-gallery--carousel .cs-gallery__item { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; } .cs-gallery__nav { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: 999px; cursor: pointer; background: #fff; color: var(--brand-primary); box-shadow: 0 10px 30px rgba(0,0,0,.16); display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 3; transition: transform .15s, background .2s, color .2s; } .cs-gallery__nav:hover { background: var(--brand-primary); color: #fff; transform: translateY(-50%) scale(1.06); } .cs-gallery__nav--prev { left: -8px; } .cs-gallery__nav--next { right: -8px; } .cs-gallery__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .cs-gallery__dot { width: 9px; height: 9px; padding: 0; border: none; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--brand-primary) 28%, #d1d5db); transition: width .2s, background .2s; } .cs-gallery__dot.is-active { width: 26px; background: var(--brand-primary); } @media (max-width: 1024px) { .cs-gallery--carousel .cs-gallery__item { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 640px) { .cs-gallery--carousel .cs-gallery__item { flex-basis: 86%; } .cs-gallery__nav { width: 38px; height: 38px; } } /* Lightbox overlay (shared, appended to ) */ .cs-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(8, 11, 20, 0.92); padding: 40px; } .cs-lightbox.is-open { display: flex; } .cs-lightbox__fig { margin: 0; max-width: min(1100px, 92vw); max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 14px; } .cs-lightbox__fig img { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .cs-lightbox__fig figcaption { text-align: center; color: #E5E7EB; display: flex; flex-direction: column; gap: 4px; max-width: 720px; } .cs-lightbox__title { font-weight: 600; font-size: 16px; color: #fff; } .cs-lightbox__desc { font-size: 14px; line-height: 1.55; color: #C7CBD3; } .cs-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 28px; line-height: 1; border-radius: 999px; cursor: pointer; transition: background .2s; } .cs-lightbox__close:hover { background: rgba(255,255,255,.22); } .cs-lightbox__nav { width: 52px; height: 52px; flex: 0 0 auto; margin: 0 8px; background: rgba(255,255,255,.1); border: none; color: #fff; font-size: 18px; border-radius: 999px; cursor: pointer; transition: background .2s, transform .15s; } .cs-lightbox__nav:hover { background: rgba(255,255,255,.24); transform: scale(1.07); } @media (max-width: 640px) { .cs-lightbox { padding: 16px; } .cs-lightbox__nav { position: absolute; bottom: 22px; } .cs-lightbox__nav--prev { left: 28%; } .cs-lightbox__nav--next { right: 28%; } } /* ── Coach blog detail — premium reading layout (.cs-bd*) ────────── */ .cs-bd { padding: 28px 0 0; } .cs-bd__crumbs { font-size: 13px; color: var(--brand-muted, #6b7280); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; } .cs-bd__crumbs a { color: var(--brand-primary); text-decoration: none; } .cs-bd__crumbs a:hover { text-decoration: underline; } .cs-bd__crumb-sep { opacity: .45; } .cs-bd__crumb-current { color: var(--brand-ink, #111827); font-weight: 500; } .cs-bd__hero { margin-bottom: 30px; } .cs-bd__title { font-size: 42px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 18px; } .cs-bd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 14px; color: var(--brand-muted, #6b7280); } .cs-bd__author { display: inline-flex; align-items: center; gap: 9px; } .cs-bd__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-grad, var(--brand-primary)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-transform: uppercase; } .cs-bd__avatar--lg { width: 52px; height: 52px; font-size: 17px; } .cs-bd__author-name { font-weight: 600; color: var(--brand-ink, #111827); } .cs-bd__meta-item i { margin-right: 6px; opacity: .8; } .cs-bd__cover { margin-top: 26px; border-radius: var(--cs-radius-xl, 20px); overflow: hidden; background: var(--brand-bg-soft); box-shadow: var(--cs-sh-lg); } .cs-bd__cover img { width: 100%; height: auto; display: block; max-height: 520px; object-fit: cover; } /* layout: share rail | content | sidebar */ .cs-bd__layout { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px; gap: 36px; align-items: start; } .cs-bd__share { position: sticky; top: 90px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .cs-bd__share-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-muted, #9ca3af); margin-bottom: 2px; } .cs-bd__share-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--brand-border); background: #fff; color: var(--brand-ink, #374151); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: transform .15s, background .2s, color .2s, box-shadow .2s; text-decoration: none; } .cs-bd__share-btn:hover { background: var(--brand-primary); color: #fff; transform: translateY(-2px); box-shadow: var(--cs-sh-sm); } .cs-bd__copy.is-copied { background: #16a34a; color: #fff; border-color: #16a34a; } .cs-bd__lead { font-size: 20px; line-height: 1.6; font-weight: 500; color: var(--brand-ink, #111827); margin: 0 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--brand-border); } /* Rich content prose */ .cs-bd__content { font-size: 17.5px; line-height: 1.85; color: var(--brand-text, #1f2937); } .cs-bd__content > :first-child { margin-top: 0; } .cs-bd__content h1, .cs-bd__content h2, .cs-bd__content h3, .cs-bd__content h4 { line-height: 1.3; letter-spacing: -0.01em; margin: 1.6em 0 .5em; scroll-margin-top: 90px; } .cs-bd__content h2 { font-size: 1.55em; } .cs-bd__content h3 { font-size: 1.28em; } .cs-bd__content h4 { font-size: 1.1em; } .cs-bd__content p { margin: 0 0 1.15em; } .cs-bd__content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; } .cs-bd__content ul, .cs-bd__content ol { margin: 0 0 1.2em 1.3em; padding: 0; } .cs-bd__content li { margin: 0 0 .5em; } .cs-bd__content img { max-width: 100%; height: auto; border-radius: var(--cs-radius-lg); margin: 1.6em 0; box-shadow: var(--cs-sh-sm); } .cs-bd__content blockquote { margin: 1.6em 0; padding: 16px 22px; border-left: 4px solid var(--brand-primary); background: var(--brand-bg-soft); border-radius: 0 var(--cs-radius) var(--cs-radius) 0; font-size: 1.05em; font-style: italic; } .cs-bd__content blockquote p:last-child { margin: 0; } .cs-bd__content pre { background: #0f172a; color: #e2e8f0; padding: 18px 20px; border-radius: var(--cs-radius); overflow-x: auto; font-size: .9em; line-height: 1.6; margin: 1.6em 0; } .cs-bd__content code { font-family: var(--font-mono, monospace); font-size: .9em; background: var(--brand-bg-soft); padding: 2px 6px; border-radius: 5px; } .cs-bd__content pre code { background: none; padding: 0; color: inherit; } .cs-bd__content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .95em; display: block; overflow-x: auto; } .cs-bd__content th, .cs-bd__content td { border: 1px solid var(--brand-border); padding: 10px 14px; text-align: left; } .cs-bd__content th { background: var(--brand-bg-soft); font-weight: 600; } .cs-bd__content hr { border: 0; border-top: 1px solid var(--brand-border); margin: 2em 0; } /* sidebar widgets */ .cs-bd__sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 18px; } .cs-bd__widget { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--cs-radius-lg); padding: 18px 18px; box-shadow: var(--cs-sh-sm); } .cs-bd__author-card { display: flex; align-items: center; gap: 12px; } .cs-bd__widget-title { font-weight: 600; font-size: 15px; } .cs-bd__author-role { font-size: 12.5px; color: var(--brand-muted, #6b7280); } .cs-bd__widget-h { font-size: 14px; font-weight: 600; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-muted, #6b7280); } .cs-bd__recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .cs-bd__recent a { display: flex; gap: 12px; align-items: center; text-decoration: none; } .cs-bd__recent img { width: 56px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; } .cs-bd__recent-title { display: block; font-size: 13.5px; font-weight: 500; color: var(--brand-ink, #111827); line-height: 1.35; transition: color .15s; } .cs-bd__recent a:hover .cs-bd__recent-title { color: var(--brand-primary); } .cs-bd__recent-date { display: block; font-size: 11.5px; color: var(--brand-muted, #9ca3af); margin-top: 2px; } .cs-bd__related { margin-top: 40px; background: var(--brand-bg-soft); } /* mobile share row appears inline; rails collapse */ @media (max-width: 1024px) { .cs-bd__layout { grid-template-columns: 1fr; } .cs-bd__share { position: static; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 8px; } .cs-bd__share-label { width: 100%; margin-bottom: 0; } .cs-bd__sidebar { position: static; } } @media (max-width: 640px) { .cs-bd__title { font-size: 30px; } .cs-bd__content { font-size: 16.5px; } .cs-bd__cover img { max-height: 280px; } } /* ── Benefits / Features (benefits_v1) ──────────────────────────── */ .cs-benefits__icon { width: 50px; height: 50px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-bg-soft); color: var(--brand-primary); border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, transparent); font-size: 18px; } .cs-benefits__icon img { width: 26px; height: 26px; object-fit: contain; } .cs-benefits__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .cs-benefits__desc { font-size: 13.5px; line-height: 1.55; opacity: .72; margin: 0; } /* split layout */ .cs-benefits__split { display: grid; grid-template-columns: 1fr minmax(220px, 360px) 1fr; align-items: center; gap: 24px; } .cs-benefits__col { display: flex; flex-direction: column; gap: 30px; } .cs-benefits__item { display: flex; align-items: center; gap: 14px; } .cs-benefits__col--left .cs-benefits__item { flex-direction: row; justify-content: flex-end; text-align: right; } .cs-benefits__col--right .cs-benefits__item { text-align: left; } .cs-benefits__item:hover .cs-benefits__icon { transform: translateY(-2px); box-shadow: var(--cs-sh-sm); transition: transform .2s, box-shadow .2s; } /* dotted/dashed connectors pointing toward the centre image */ .cs-benefits--conn-dotted .cs-benefits__col--left .cs-benefits__icon { position: relative; } .cs-benefits--conn-dotted .cs-benefits__col--left .cs-benefits__icon::after, .cs-benefits--conn-dashed .cs-benefits__col--left .cs-benefits__icon::after { content: ""; position: absolute; left: 100%; top: 50%; width: 26px; border-top: 2px dotted color-mix(in srgb, var(--brand-primary) 45%, transparent); } .cs-benefits--conn-dashed .cs-benefits__col--left .cs-benefits__icon::after { border-top-style: dashed; } .cs-benefits--conn-dotted .cs-benefits__col--right .cs-benefits__icon::before, .cs-benefits--conn-dashed .cs-benefits__col--right .cs-benefits__icon::before { content: ""; position: absolute; right: 100%; top: 50%; width: 26px; border-top: 2px dotted color-mix(in srgb, var(--brand-primary) 45%, transparent); } .cs-benefits--conn-dashed .cs-benefits__col--right .cs-benefits__icon::before { border-top-style: dashed; } .cs-benefits__col--right .cs-benefits__icon { position: relative; } /* centre image + concentric rings */ .cs-benefits__center { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; } .cs-benefits__hero { position: relative; z-index: 2; max-width: 100%; max-height: 460px; object-fit: contain; } .cs-benefits__rings { position: absolute; z-index: 1; width: 300px; height: 300px; border-radius: 50%; background: color-mix(in srgb, var(--brand-primary) 8%, transparent); } .cs-benefits__rings::before, .cs-benefits__rings::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .cs-benefits__rings::before { width: 72%; height: 72%; background: color-mix(in srgb, var(--brand-primary) 12%, transparent); } .cs-benefits__rings::after { width: 44%; height: 44%; background: color-mix(in srgb, var(--brand-primary) 18%, transparent); } /* grid layout */ .cs-benefits__grid .cs-benefits__card { text-align: center; padding: 26px 20px; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-sm); transition: transform .25s, box-shadow .25s; } .cs-benefits__grid .cs-benefits__card:hover { transform: translateY(-5px); box-shadow: var(--cs-sh-lg); } .cs-benefits__grid .cs-benefits__icon { margin: 0 auto 14px; width: 56px; height: 56px; } /* timeline layout */ .cs-benefits__timeline { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; position: relative; } .cs-benefits__timeline::before { content: ""; position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; background: color-mix(in srgb, var(--brand-primary) 25%, transparent); } .cs-benefits__tl-item { display: flex; gap: 18px; align-items: flex-start; position: relative; } .cs-benefits__tl-item .cs-benefits__icon { position: relative; z-index: 2; background: #fff; } @media (max-width: 900px) { .cs-benefits__split { grid-template-columns: 1fr; gap: 26px; } .cs-benefits__center { order: -1; min-height: auto; } .cs-benefits__col { gap: 22px; } .cs-benefits__col--left .cs-benefits__item { flex-direction: row; justify-content: flex-start; text-align: left; } .cs-benefits__col--left .cs-benefits__item .cs-benefits__text { order: 2; } .cs-benefits--conn-dotted .cs-benefits__icon::after, .cs-benefits--conn-dotted .cs-benefits__icon::before, .cs-benefits--conn-dashed .cs-benefits__icon::after, .cs-benefits--conn-dashed .cs-benefits__icon::before { display: none; } } /* ── Class Schedule (schedule_v1) ───────────────────────────────── */ .cs-schedule__card { position: relative; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-sm); padding: 18px 20px; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(0.4,0,0.2,1), box-shadow .25s; } .cs-schedule__card:hover { transform: translateY(-5px); box-shadow: var(--cs-sh-lg); } .cs-schedule__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .cs-schedule__time { background: var(--brand-primary); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; } /* 2026-06-24 — instructor badge defaults to the COACH'S OWN accent colour (white-label: cohesive with each coach's palette, not a hardcoded blue). Coaches can still override per item via badge_color. */ .cs-schedule__coach { background: var(--brand-accent); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-schedule__status { position: absolute; top: -9px; right: 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; } .cs-schedule__status--upcoming { background: #DBEAFE; color: #1E40AF; } .cs-schedule__status--live { background: #FEE2E2; color: #B91C1C; } .cs-schedule__status--completed { background: #E2E8F0; color: #475569; } .cs-schedule__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .cs-schedule__title { font-size: 18px; font-weight: 600; margin: 0; line-height: 1.3; } .cs-schedule__cta { flex: 0 0 auto; } .cs-schedule__focus { font-size: 13.5px; line-height: 1.55; opacity: .72; margin: 0; } @media (max-width: 640px) { .cs-schedule--carousel-m .cs-schedule__grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; } .cs-schedule--carousel-m .cs-schedule__grid::-webkit-scrollbar { display: none; } .cs-schedule--carousel-m .cs-schedule__card { flex: 0 0 86%; scroll-snap-align: start; } } /* ── Pricing & Plans (pricing_plans_v1) ─────────────────────────── */ .cs-pricing__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-sh-sm); padding: 26px 22px; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s; } .cs-pricing__card:hover { transform: translateY(-6px); box-shadow: var(--cs-sh-lg); border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border)); } .cs-pricing__name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; } .cs-pricing__price { font-size: 34px; font-weight: 800; color: var(--brand-primary); letter-spacing: -.02em; margin: 0 0 14px; line-height: 1; } .cs-pricing__cur { font-size: 20px; margin-right: 2px; } .cs-pricing__field { margin-bottom: 12px; } .cs-pricing__field > label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-muted, #475569); margin-bottom: 5px; } .cs-pricing__select { width: 100%; padding: 11px 14px; font-size: 14px; border: 1px solid var(--brand-border); border-radius: 999px; background: #fff; color: var(--brand-text); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 38px; transition: border-color .15s, box-shadow .15s; } .cs-pricing__select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent); } .cs-pricing__book { width: 100%; margin: 6px 0 4px; } .cs-pricing__book:disabled { opacity: .55; cursor: not-allowed; } .cs-pricing__cta { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; } .cs-pricing__cta-btn { width: 100%; } .cs-pricing__features { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--brand-border); display: flex; flex-direction: column; gap: 12px; } .cs-pricing__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--brand-text); } .cs-pricing__features i { color: var(--brand-primary); font-size: 16px; margin-top: 1px; flex: 0 0 auto; } /* Booking modal */ .cs-pricing-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; } .cs-pricing-modal[hidden] { display: none; } .cs-pricing-modal__overlay { position: absolute; inset: 0; background: rgba(8,11,20,.55); backdrop-filter: blur(2px); } .cs-pricing-modal__box { position: relative; z-index: 1; width: min(920px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--cs-radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.4); padding: 30px 32px; animation: cspm-in .25s cubic-bezier(.4,0,.2,1); } @keyframes cspm-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } .cs-pricing-modal__close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--brand-primary); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: filter .15s; } .cs-pricing-modal__close:hover { filter: brightness(1.08); } .cs-pricing-modal__title { text-align: center; font-size: 26px; font-weight: 800; margin: 0 0 18px; } .cs-pricing-modal__title span { color: var(--brand-primary); } .cs-pricing-modal__summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--cs-radius); padding: 14px 18px; font-size: 14px; margin-bottom: 20px; } .cs-pricing-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .cs-pm-field { margin-bottom: 14px; } .cs-pm-field > label { display: block; font-size: 14px; color: var(--brand-text); margin-bottom: 6px; } .cs-pm-field .req { color: #dc2626; } .cs-pm-field input, .cs-pm-field select, .cs-pm-field textarea { width: 100%; padding: 12px 16px; font-size: 14px; border: 1px solid var(--brand-border); border-radius: 999px; background: var(--brand-bg-soft); color: var(--brand-text); } .cs-pm-field textarea { border-radius: var(--cs-radius); resize: vertical; } .cs-pm-field input:focus, .cs-pm-field select:focus, .cs-pm-field textarea:focus { outline: none; border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); } .cs-pm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cs-pm-sub { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-muted, #64748b); margin: 4px 0 10px; } .cs-pricing-modal__submit { margin-top: 4px; padding: 13px 30px; } .cs-pricing-modal__msg { margin-top: 12px; font-size: 13.5px; padding: 10px 14px; border-radius: var(--cs-radius); } .cs-pricing-modal__msg.is-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .cs-pricing-modal__msg.is-err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } @media (max-width: 720px) { .cs-pricing-modal__box { padding: 24px 18px; } .cs-pricing-modal__grid, .cs-pricing-modal__summary { grid-template-columns: 1fr; } }