/* ============================================================ KB BADMINTON ACADEMY — shared stylesheet Theme: deep green + white, orange accent (matches logo) ============================================================ */ :root { /* India tricolor theme — saffron · white · India green, chakra navy accent. Green tokens map to the flag's India-green family (primary), the orange tokens to saffron. Surfaces stay white and text dark so contrast holds. */ --green-900: #0a1f4a; /* deep chakra navy (dark sections, footer) */ --green-800: #0f2a63; /* navy */ --green-700: #138808; /* India green — primary buttons / heading accent */ --green-600: #17a30b; /* lighter India green (hover) */ --green-100: #e2f3df; /* light green tint (section background) */ --green-50: #f1faee; --teal: #17a30b; /* accent green */ --orange: #ff9933; /* saffron (fills / accents — dark text on top) */ --orange-dark: #b5620e; /* readable saffron for small text (AA on white) */ --saffron: #ff9933; /* flag saffron */ --india-green: #138808; /* flag green */ --chakra: #0a1f4a; /* chakra navy (deep accent) */ --ink: #16202e; /* navy-black text */ --muted: #5a6876; --line: #e2e7ec; --white: #ffffff; --radius: 14px; --r-sm: 10px; --shadow: 0 10px 30px rgba(10, 30, 56, 0.12); --shadow-sm: 0 1px 2px rgba(10, 30, 56, 0.05), 0 4px 12px rgba(10, 30, 56, 0.06); --shadow-lg: 0 24px 60px rgba(10, 30, 56, 0.18); --font-head: "Poppins", "Segoe UI", sans-serif; --font-display: "Barlow Condensed", "Poppins", "Segoe UI", sans-serif; --font-body: "Inter", "Segoe UI", sans-serif; --font-logo: "Playfair Display", Georgia, serif; /* 4/8px spacing rhythm */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Motion tokens (150–300ms micro-interactions) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 150ms; --t-base: 220ms; --t-slow: 320ms; /* Layered z-index scale */ --z-nav: 100; --z-overlay: 400; --z-modal: 500; --z-toast: 900; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } /* Mobile-menu-only CTA links (shown inside the slide-out nav on small screens). */ .nav-mobile-cta { display: none; } body { font-family: var(--font-body); color: var(--ink); position: relative; isolation: isolate; /* Designed tricolour canvas: angular splash bands plus faint court-line geometry. Sections are translucent below, so this remains visible. */ background: linear-gradient(118deg, transparent 0 10%, rgba(255, 153, 51, 0.18) 10% 18%, transparent 18% 43%, rgba(19, 136, 8, 0.14) 43% 51%, transparent 51%) fixed, linear-gradient(302deg, transparent 0 16%, rgba(19, 136, 8, 0.18) 16% 24%, transparent 24% 56%, rgba(255, 153, 51, 0.13) 56% 64%, transparent 64%) fixed, repeating-linear-gradient(90deg, rgba(10, 31, 74, 0.045) 0 1px, transparent 1px 88px) fixed, repeating-linear-gradient(0deg, rgba(10, 31, 74, 0.035) 0 1px, transparent 1px 72px) fixed, #fffaf4; line-height: 1.6; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; /* -1, not 0. body sets `isolation: isolate`, so a negative-z pseudo paints above body's own background but below every child -- which is all this decorative layer needs. At z-index 0 it sat *above* content, which forced the `body > *` rule below to lift every child back over it, and that rule then clobbered position/z-index on anything else appended to . */ z-index: -1; pointer-events: none; background: linear-gradient(150deg, transparent 8%, rgba(255, 153, 51, 0.28) 8% 11%, transparent 11% 36%, rgba(19, 136, 8, 0.22) 36% 39%, transparent 39%), linear-gradient(28deg, transparent 54%, rgba(10, 31, 74, 0.08) 54% 57%, transparent 57%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } /* The `body > *:not(.site-splash) { position: relative; z-index: 1 }` rule that used to live here is gone. It outranked every class selector (0,1,1) and silently flattened position:fixed to relative on anything parented to -- it broke the sticky header, the mobile nav drawer, every modal and toast, and finally the Zoho payment sheet, which is injected into by their script and has no way to defend itself. Moving body::before to z-index -1 removes the need for it entirely. */ /* Page-load splash for the public website. It appears on every full page open; the logo is reserved for this launch moment, not normal navigation chrome. */ .site-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255, 153, 51, 0.18), transparent 42%), linear-gradient(315deg, rgba(19, 136, 8, 0.18), transparent 42%), rgba(255, 255, 255, 0.98); pointer-events: none; animation: siteSplashExit 1.85s var(--ease-out) forwards; } .site-splash-logo { width: 104px; height: 104px; border-radius: 26px; background: url("../assets/logo.jpeg") center / 165% no-repeat; box-shadow: 0 18px 42px rgba(10, 31, 74, 0.18); opacity: 0; transform: scale(0.76); animation: siteSplashLogo 620ms var(--ease-out) forwards; } .site-splash-bars { display: flex; width: 168px; height: 6px; margin-top: 22px; border-radius: 999px; overflow: hidden; transform: scaleX(0); transform-origin: center; animation: siteSplashBars 520ms var(--ease-out) 360ms forwards; } .site-splash-bars i { flex: 1; } .site-splash-bars i:nth-child(1) { background: var(--saffron); } .site-splash-bars i:nth-child(2) { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .site-splash-bars i:nth-child(3) { background: var(--india-green); } .site-splash-name { margin-top: 18px; font-family: var(--font-head); font-size: 0.98rem; font-weight: 800; color: var(--ink); opacity: 0; animation: siteSplashName 440ms ease 620ms forwards; } @keyframes siteSplashLogo { to { opacity: 1; transform: scale(1); } } @keyframes siteSplashBars { to { transform: scaleX(1); } } @keyframes siteSplashName { to { opacity: 1; } } @keyframes siteSplashExit { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .site-splash { animation: siteSplashExit 700ms ease forwards; } .site-splash-logo, .site-splash-bars, .site-splash-name { animation: none; opacity: 1; transform: none; } } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } .container { width: min(1180px, 92%); margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; padding: 13px 28px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: all 0.25s ease; letter-spacing: 0.02em; } .btn-primary { /* Subtle top-lit gradient + soft green shadow gives depth, so the button reads polished instead of a flat block of colour. */ background: linear-gradient(180deg, var(--green-600) 0%, var(--green-700) 100%); color: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 10px rgba(19,136,8,0.26); } /* India-flag CTA. At rest it is the ordinary green primary button; on hover, focus or press the tricolour sweeps across it left to right and the label turns chakra navy. The sweep sits on ::after at z-index -1 with `isolation: isolate` on the button: negative-z children paint above their stacking context's own background but below its text, so the flag slides over the green while the label stays on top. No extra wrapper element needed. Navy rather than white for the label -- white would vanish on the middle band, while navy clears AA on all three (7.54 / 16.06 / 7.17). The colour is timed to the sweep so it never sits light-on-white mid-animation. */ .btn-tricolour { position: relative; overflow: hidden; isolation: isolate; transition: color 0.28s ease 0.12s, transform 0.25s ease, box-shadow 0.25s ease; } .btn-tricolour::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--saffron) 0 33.333%, #ffffff 33.333% 66.666%, #35c65a 66.666% 100%); transform: translateX(-101%); transition: transform 0.55s var(--ease-out); } .btn-primary.btn-tricolour:hover::after, .btn-primary.btn-tricolour:focus-visible::after, .btn-primary.btn-tricolour:active::after { transform: translateX(0); } /* Scoped as .btn-primary.btn-tricolour (0,3,0): .btn-primary:hover below is (0,2,0) and would otherwise win on order and repaint the fill green. */ .btn-primary.btn-tricolour:hover, .btn-primary.btn-tricolour:focus-visible, .btn-primary.btn-tricolour:active { background: linear-gradient(180deg, var(--green-600) 0%, var(--green-700) 100%); color: var(--green-900); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 22px rgba(10,31,74,0.26); } @media (prefers-reduced-motion: reduce) { .btn-tricolour, .btn-tricolour::after { transition: none; } .btn-primary.btn-tricolour:hover::after, .btn-primary.btn-tricolour:focus-visible::after, .btn-primary.btn-tricolour:active::after { transform: translateX(0); } } .btn-primary:hover { background: linear-gradient(180deg, var(--green-700) 0%, #0e6b05 100%); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 22px rgba(19,136,8,0.34); } .btn-outline { background: transparent; color: var(--green-700); border-color: var(--green-700); } .btn-outline:hover { background: var(--green-700); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(19,136,8,0.22); } .btn-light { background: var(--white); color: var(--green-800); box-shadow: 0 3px 10px rgba(10,30,56,0.14); } .btn-light:hover { background: var(--white); color: var(--green-700); transform: translateY(-2px); box-shadow: 0 9px 24px rgba(10,30,56,0.22); } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } /* .site-header keeps its own position:sticky / z-index:100 now that nothing overrides them. */ /* India tricolor stripe across the top of the site */ .site-header::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--saffron) 0 33.333%, #ffffff 33.333% 66.666%, var(--india-green) 66.666% 100%); } .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; } .brand { display: flex; align-items: center; gap: 12px; } .brand .logo-mark { width: 52px; height: 52px; border-radius: 50%; background: url("../assets/logo.jpeg") center / 165% no-repeat; box-shadow: 0 2px 8px rgba(0,0,0,0.12); flex-shrink: 0; } /* Phones: 52px would push the header taller than its ~73px bar. */ @media (max-width: 560px) { .site-header .brand .logo-mark { width: 38px; height: 38px; } } .brand .brand-text { font-family: var(--font-logo); font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: 0.03em; line-height: 1; } .brand .brand-text small { display: block; font-family: var(--font-head); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; color: var(--green-700); text-transform: uppercase; margin-top: 3px; } .main-nav { display: flex; align-items: center; gap: 22px; } .main-nav a { font-family: var(--font-head); font-size: 0.9rem; font-weight: 500; color: var(--ink); padding: 6px 2px; position: relative; white-space: nowrap; transition: color 0.2s; } .main-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: var(--green-700); transition: width 0.25s ease; } .main-nav a:hover, .main-nav a.active { color: var(--green-700); } .main-nav a:hover::after, .main-nav a.active::after { width: 100%; } .nav-cta { display: flex; align-items: center; gap: 16px; } .nav-cta .btn { padding: 9px 18px; font-size: 0.85rem; border-width: 1.5px; white-space: nowrap; } .nav-login { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--ink); white-space: nowrap; transition: color 0.2s; } .nav-login:hover { color: var(--green-700); } /* Nav dropdown ("More") */ .dropdown { position: relative; } .drop-toggle { font-family: var(--font-head); font-size: 0.92rem; font-weight: 500; color: var(--ink); background: none; border: none; cursor: pointer; padding: 6px 2px; display: flex; align-items: center; gap: 5px; transition: color 0.2s; } .dropdown:hover .drop-toggle, .dropdown:focus-within .drop-toggle { color: var(--green-700); } .dropdown-menu { position: absolute; top: 100%; right: 0; background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; min-width: 210px; display: none; z-index: 60; } .dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; } .dropdown-menu a { display: block; padding: 10px 14px; border-radius: 7px; font-family: var(--font-head); font-size: 0.9rem; font-weight: 500; } .dropdown-menu a:hover { background: var(--green-50); color: var(--green-700); } .dropdown-menu a::after { display: none; } /* Promo strip (referral offer) */ .promo-strip { background: linear-gradient(90deg, var(--orange), #f7b84a); color: #3a2703; text-align: center; padding: 12px 18px; font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; } .promo-strip a { color: var(--green-900); text-decoration: underline; font-weight: 700; white-space: nowrap; } .promo-strip a:hover { color: var(--green-700); } /* Pricing */ .price { font-family: var(--font-head); font-size: 1.65rem; font-weight: 800; color: var(--green-700); margin: 6px 0 4px; } .price small { font-size: 0.85rem; font-weight: 600; color: var(--muted); } .price-tiers { list-style: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; } .price-tiers li { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.92rem; color: var(--muted); } .price-tiers strong { font-family: var(--font-head); color: var(--ink); font-weight: 700; } .price-tiers em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--green-700); margin-left: 6px; } /* Standard plan bounded in its own panel, with a card per duration inside */ .plan-group { max-width: 920px; margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--green-600); border-radius: 16px; padding: 26px 24px; box-shadow: var(--shadow); } .plan-group-head { text-align: center; margin-bottom: 18px; } .plan-group-head .meta { color: var(--green-700); } .plan-group-head h3 { font-family: var(--font-head); font-size: 1.35rem; margin: 2px 0 6px; } .plan-group-head p { color: var(--muted); max-width: 540px; margin: 0 auto; } .term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .term-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; text-align: center; } .term-card .meta { justify-content: center; } .term-card .price { font-size: 1.55rem; margin: 6px 0 2px; color: var(--ink); } .term-card .btn { margin-top: auto; align-self: center; } .term-card.featured { background: linear-gradient(180deg, #fff4e0, #fffdf8); border-color: #ffb866; box-shadow: 0 0 0 1px #ffb866, 0 8px 20px rgba(217,138,16,0.16); } .term-card.featured .price { color: #b5620e; } .term-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #b5620e; color: #fff; font-family: var(--font-head); font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 11px; border-radius: 999px; white-space: nowrap; } .plan-note { font-size: 0.82rem; color: var(--muted); margin: 4px 0 12px; } /* Divider between the Standard plan and the other, separate offerings */ .plan-divider { display: flex; align-items: center; gap: 14px; max-width: 920px; margin: 30px auto 18px; color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-head); font-weight: 600; } .plan-divider::before, .plan-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* Coaching / Book-a-court shown as their own, clearly separate callouts */ .plan-callout { max-width: 920px; margin: 0 auto 14px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--green-600); border-radius: 14px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; text-align: left; box-shadow: var(--shadow-sm); } .plan-callout.payg { border-left-color: var(--gold, #d97a0e); } .plan-callout .meta { color: var(--green-700); } .plan-callout.payg .meta { color: var(--gold-deep, #b5620e); } .plan-callout h3 { font-family: var(--font-head); margin: 2px 0 4px; } .plan-callout p { margin: 0; color: var(--muted); } /* Soft gold savings tag (matches the "best value" highlight, keeps it off-green) */ .save-tag { display: inline-block; font-family: var(--font-head); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b5620e; background: #fff2df; border: 1px solid #ffe0b3; padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; } .card .meta { font-family: var(--font-head); font-size: 0.8rem; font-weight: 600; color: var(--orange-dark); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; } /* Event rows */ .event-row { display: flex; align-items: center; gap: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; transition: all 0.25s; flex-wrap: wrap; } .event-row:hover { box-shadow: var(--shadow); border-color: var(--green-600); } .event-date { flex-shrink: 0; width: 74px; height: 74px; border-radius: 12px; background: var(--green-700); color: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-head); line-height: 1.1; } .event-date .day { font-size: 1.5rem; font-weight: 800; } .event-date .month { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .event-row h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; } .event-row .event-info { flex: 1; min-width: 220px; } .event-row .event-info p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: all 0.3s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ---------- Media placeholder slots (swapped for real images/videos later) ---------- */ .media-slot { position: relative; background: linear-gradient(135deg, rgba(16,41,77,0.92), rgba(42,168,126,0.85)), repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,0.9); overflow: hidden; border-radius: var(--radius); min-height: 200px; } .media-slot svg { opacity: 0.85; } .media-slot .slot-label { font-family: var(--font-head); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; text-align: center; padding: 0 12px; } .media-slot img, .media-slot video, .media-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } /* ---------- Hero ---------- */ .hero { padding: 60px 0 80px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; right: -140px; top: 40px; width: 420px; height: 420px; background: repeating-linear-gradient(135deg, var(--green-100) 0 3px, transparent 3px 22px); opacity: 0.9; z-index: -1; } .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 48px; } .eyebrow { font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.16em; color: var(--green-700); text-transform: uppercase; margin-bottom: 16px; } .hero-tags { display: flex; flex-wrap: wrap; gap: 10px; /* Bottom spacing belongs to .hero-actions below, so the gap is stated in one place instead of a 4px margin here fighting a 0 there. */ margin: 26px 0 0; } .hero-tags span { font-family: var(--font-head); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(4px); } /* Phones: at full size the three pills fill the row edge to edge (and overflow it below ~370px), so they read as one crowded block. Shrink them so the 10px gaps actually show. */ @media (max-width: 560px) { .hero-tags { margin: 20px 0 0; } .hero-tags span { font-size: 0.66rem; letter-spacing: 0.10em; padding: 7px 12px; } } .hero h1 { font-family: var(--font-display); font-size: clamp(2.6rem, 5.4vw, 4.1rem); font-weight: 700; line-height: 1.04; letter-spacing: 0.005em; color: var(--ink); margin-bottom: 22px; } .hero h1 .accent { color: var(--green-700); } .hero .lede { font-size: 1.05rem; color: var(--muted); max-width: 420px; margin-bottom: 30px; } /* Diamond photo cluster */ .diamond-cluster { position: relative; height: 480px; } .diamond { position: absolute; width: 230px; height: 230px; transform: rotate(45deg); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); } .diamond .media-slot { width: 142%; height: 142%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 0; min-height: 0; } .diamond-1 { top: 110px; left: 0; } .diamond-2 { top: 0; left: 190px; width: 260px; height: 260px; } .diamond-3 { top: 230px; left: 205px; } /* ---------- Video hero (alternate home page) ---------- */ .video-hero { position: relative; min-height: min(88vh, 780px); display: flex; align-items: center; overflow: hidden; } .video-hero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .video-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 17, 32, 0.88) 0%, rgba(10, 30, 56, 0.72) 45%, rgba(10, 30, 56, 0.35) 100%); z-index: 1; } .video-hero .hero-content { position: relative; z-index: 2; color: var(--white); padding: 90px 0; } .video-hero .eyebrow { color: var(--orange); } .video-hero h1 { font-family: var(--font-head); font-size: clamp(2.3rem, 4.8vw, 3.6rem); font-weight: 800; line-height: 1.12; margin-bottom: 22px; } .video-hero h1 .accent { color: var(--orange); } /* Tricolour hero — the three lines read as the Indian flag's bands. Green is brightened for legibility over the dark video. */ .video-hero h1.hero-tri .tri-saffron { color: var(--saffron); } .video-hero h1.hero-tri .tri-white { color: #ffffff; } .video-hero h1.hero-tri .tri-green { color: #35c65a; } .video-hero .lede { font-size: 1.08rem; opacity: 0.92; max-width: 480px; margin-bottom: 32px; } .video-hero .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } /* Three equally-weighted CTAs side by side read as clutter, so membership -- the considered decision, not the first click -- drops to a text link under the two buttons. Every path is still one tap away. */ .video-hero .hero-secondary { margin-top: 18px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); } .video-hero .hero-secondary a { color: var(--white); font-family: var(--font-head); font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 1px; transition: border-color 0.18s, color 0.18s; } .video-hero .hero-secondary a:hover { color: #35c65a; border-color: #35c65a; } @media (max-width: 560px) { .video-hero .hero-actions { gap: 10px; margin-top: 18px; } .video-hero .hero-actions .btn { flex: 1 1 100%; justify-content: center; } .video-hero .hero-secondary { margin-top: 15px; font-size: 0.88rem; } } .btn-ghost { background: transparent; color: var(--white); border-color: var(--white); } .btn-ghost:hover { background: var(--white); color: var(--green-800); } .video-hero .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.85); display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ---------- Feature strip ---------- */ .feature-strip { background: rgba(241, 250, 238, 0.76); backdrop-filter: blur(2px); border-block: 1px solid var(--line); padding: 38px 0; } .feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; } .feature-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .feature-item .icon-ring { width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--green-700); display: grid; place-items: center; color: var(--green-700); background: var(--white); transition: all 0.25s; } .feature-item:hover .icon-ring { background: var(--orange); border-color: var(--orange); color: var(--white); transform: translateY(-4px); } .feature-item p { font-family: var(--font-head); font-size: 0.84rem; font-weight: 600; color: var(--ink); line-height: 1.35; } /* ---------- Sections ---------- */ .section { padding: 80px 0; background: rgba(255, 255, 255, 0.54); backdrop-filter: blur(1px); } .section.tinted { background: rgba(241, 250, 238, 0.64); } .section-head { margin-bottom: 40px; } .section-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.08; color: var(--ink); } .section-title::after { content: ""; display: block; width: 56px; height: 3px; background: linear-gradient(90deg, var(--green-700) 55%, var(--orange) 55%); margin-top: 10px; border-radius: 2px; } .section-head.center { text-align: center; } .section-head.center .section-title::after { margin-inline: auto; } .section-head .sub { color: var(--muted); margin-top: 14px; max-width: 640px; } .section-head.center .sub { margin-inline: auto; } /* ---------- About split ---------- */ .split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; } .split .media-slot { min-height: 320px; } .split p { color: var(--muted); margin-bottom: 16px; } /* ---------- Video band ---------- */ .video-band { background: var(--green-100); border-radius: var(--radius); padding: 44px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; } .video-band h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 14px; } .video-band p { color: var(--muted); margin-bottom: 24px; } .video-band .media-slot { min-height: 300px; } .play-badge { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.92); display: grid; place-items: center; color: var(--green-800); box-shadow: 0 6px 24px rgba(0,0,0,0.25); } /* ---------- Cards (programs / facilities) ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; } .card { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(226, 231, 236, 0.86); border-radius: var(--radius); padding: 30px 24px; text-align: center; backdrop-filter: blur(8px); transition: all 0.28s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--green-600); } .card .icon-ring { width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--green-700); display: grid; place-items: center; color: var(--green-700); } .card h3 { font-family: var(--font-head); font-size: 0.98rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .card p { font-size: 0.88rem; color: var(--muted); } /* ---------- FAQ accordion ---------- */ .faq-list { display: grid; gap: 12px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 22px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-item[open] { border-color: var(--green-600); box-shadow: var(--shadow); } .faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--green-700); flex-shrink: 0; } .faq-item[open] summary::after { content: "\2212"; } .faq-item > p { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; line-height: 1.65; } /* ---------- Highlights list ---------- */ .highlight-list { display: grid; gap: 14px; } .highlight-item { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; font-family: var(--font-head); font-size: 0.92rem; font-weight: 500; transition: all 0.25s; } .highlight-item:hover { border-color: var(--green-600); box-shadow: var(--shadow); } .highlight-item .icon-ring { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--green-700); display: grid; place-items: center; color: var(--green-700); } .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; } /* ---------- Coaches ---------- */ .coach-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all 0.28s ease; } .coach-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .coach-card .media-slot { border-radius: 0; min-height: 240px; } .coach-card .coach-info { padding: 20px; } .coach-card h3 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; } .coach-card .role { color: var(--green-700); font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; margin: 4px 0 8px; } .coach-card .exp { font-size: 0.85rem; color: var(--muted); } /* ---------- Testimonials ---------- */ .testimonial-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; transition: all 0.25s; } .testimonial-card:hover { box-shadow: var(--shadow); } .testimonial-card .quote-mark { font-family: var(--font-logo); font-size: 2.4rem; line-height: 0.5; color: var(--green-700); } .testimonial-card blockquote { font-size: 0.92rem; color: var(--ink); font-weight: 500; } .stars { color: var(--orange); letter-spacing: 3px; font-size: 0.95rem; } .testimonial-card .who { display: flex; align-items: center; gap: 10px; margin-top: auto; } .testimonial-card .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-700); color: var(--white); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; } .testimonial-card .who span { font-family: var(--font-head); font-size: 0.88rem; font-weight: 600; } /* ---------- Gallery ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .gallery-grid .media-slot { min-height: 150px; border-radius: 10px; transition: transform 0.25s; } .gallery-grid .media-slot:hover { transform: scale(1.04); } /* ---------- CTA band ---------- */ .cta-band { /* India-flag two-tone: India green → saffron along the same diagonal. Green is held solid under the text on the left so white stays legible; saffron lands at the button end. */ background: linear-gradient(120deg, var(--india-green) 0%, var(--india-green) 50%, var(--saffron) 112%); border-radius: var(--radius); padding: 42px 46px; display: flex; align-items: center; gap: 28px; color: var(--white); flex-wrap: wrap; } .cta-band .icon-ring { width: 74px; height: 74px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.14); display: grid; place-items: center; color: var(--white); } .cta-band h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; } .cta-band p { opacity: 0.9; margin-top: 6px; } .cta-band .btn { margin-left: auto; } /* ---------- Page hero (inner pages) ---------- */ .page-hero { background: linear-gradient(120deg, rgba(10,30,56,0.94), rgba(16,41,77,0.88)), repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px); color: var(--white); padding: 100px 0; text-align: center; border-bottom: 4px solid var(--orange); } .page-hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.2rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.06; } .page-hero p { margin-top: 12px; opacity: 0.88; max-width: 620px; margin-inline: auto; } /* ---------- Tables (schedule / pricing) ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); } /* ---- Gallery grid (marketing) ---- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .gallery-item { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); box-shadow: 0 6px 18px rgba(10,30,56,0.08); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.05); } .gallery-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; color: #fff; font-size: 0.88rem; font-weight: 600; background: linear-gradient(transparent, rgba(10,30,56,0.75)); } @media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } /* ---- Gallery page: video cards, masonry photo wall, lightbox ---- */ .gallery-hero p { max-width: 60ch; } .section-head .eyebrow { display: inline-block; font-family: "Barlow Condensed", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; font-size: 0.82rem; color: var(--green-700); margin-bottom: 8px; } /* Academy-in-action video cards */ .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .video-card { position: relative; border: 0; padding: 0; cursor: pointer; width: 100%; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; background: #0a1e38; box-shadow: 0 10px 26px rgba(10,30,56,0.14); } .video-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; transition: transform 0.5s ease, opacity 0.3s ease; } .video-card:hover img { transform: scale(1.06); opacity: 1; } .video-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--green-700); box-shadow: 0 6px 18px rgba(0,0,0,0.28); transition: transform 0.25s ease, background 0.25s ease; } .video-play svg { margin-left: 3px; } .video-card:hover .video-play { transform: scale(1.08); background: #fff; } .video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left; color: #fff; font-weight: 600; font-size: 0.92rem; background: linear-gradient(transparent, rgba(6,18,38,0.82)); } /* Masonry photo wall */ .masonry { columns: 4 250px; column-gap: 14px; } .photo-item { position: relative; display: block; margin: 0 0 14px; break-inside: avoid; cursor: zoom-in; border-radius: var(--radius); overflow: hidden; background: var(--line); box-shadow: 0 6px 18px rgba(10,30,56,0.08); } .photo-item img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; } .photo-item:hover img { transform: scale(1.05); } .photo-item::after { content: ""; position: absolute; inset: 0; background: rgba(10,30,56,0); transition: background 0.3s ease; } .photo-item:hover::after { background: rgba(10,30,56,0.14); } .photo-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px 12px 10px; color: #fff; font-size: 0.86rem; font-weight: 600; background: linear-gradient(transparent, rgba(10,30,56,0.78)); } /* Lightbox (photos + video) */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(6,14,26,0.94); padding: 3vh 2vw; opacity: 0; animation: lb-in 0.2s ease forwards; } .lightbox[hidden] { display: none; } @keyframes lb-in { to { opacity: 1; } } .lb-stage { margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; } .lb-media { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 82vh; } .lb-media img, .lb-media video { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .lb-caption { min-height: 1em; color: #eef2f7; font-size: 0.95rem; font-weight: 500; text-align: center; } .lb-btn { position: absolute; width: 48px; height: 48px; border: 0; cursor: pointer; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; transition: background 0.2s ease; } .lb-btn:hover { background: rgba(255,255,255,0.26); } .lb-close { top: 3vh; right: 3vw; } .lb-prev { left: 2vw; top: 50%; transform: translateY(-50%); } .lb-next { right: 2vw; top: 50%; transform: translateY(-50%); } body.lb-open { overflow: hidden; } @media (max-width: 720px) { .video-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .masonry { columns: 2 150px; column-gap: 10px; } .photo-item { margin-bottom: 10px; } .lb-prev { left: 1vw; } .lb-next { right: 1vw; } .lb-btn { width: 42px; height: 42px; } } @media (max-width: 460px) { .video-grid { grid-template-columns: 1fr; } } table.styled { width: 100%; border-collapse: collapse; background: var(--white); min-width: 560px; } table.styled th, table.styled td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.92rem; } table.styled th { background: var(--green-700); color: var(--white); font-family: var(--font-head); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.82rem; } table.styled tr:last-child td { border-bottom: none; } table.styled tr:hover td { background: var(--green-50); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: start; } .contact-info-card { background: var(--green-50); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: grid; gap: 20px; } .contact-line { display: flex; gap: 14px; align-items: flex-start; } .contact-line .icon-ring { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--green-700); display: grid; place-items: center; color: var(--green-700); background: var(--white); } .contact-line strong { display: block; font-family: var(--font-head); font-size: 0.92rem; } .contact-line span { color: var(--muted); font-size: 0.9rem; } form.contact-form { display: grid; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form label { font-family: var(--font-head); font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 6px; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 8px; font-family: var(--font-body); font-size: 0.93rem; color: var(--ink); background: var(--white); transition: border-color 0.2s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--green-600); } .form-note { display: none; background: var(--green-100); color: var(--green-800); border: 1px solid var(--green-600); padding: 14px 18px; border-radius: 8px; font-weight: 500; font-size: 0.92rem; } .form-note.show { display: block; } /* ---------- Footer ---------- */ .site-footer { background: var(--green-900); color: rgba(255,255,255,0.85); padding: 60px 0 0; margin-top: 80px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 44px; } .site-footer .brand .brand-text { color: var(--white); } .site-footer .brand .brand-text small { color: var(--teal); } .site-footer .tagline { margin-top: 14px; font-size: 0.92rem; opacity: 0.8; } .footer-title { font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); margin-bottom: 18px; } .footer-links { list-style: none; display: grid; gap: 10px; } .footer-links a { font-size: 0.92rem; opacity: 0.82; transition: all 0.2s; } .footer-links a:hover { opacity: 1; color: var(--orange); padding-left: 4px; } .footer-contact { display: grid; gap: 12px; font-size: 0.92rem; } .footer-contact div { display: flex; gap: 10px; align-items: center; } .footer-contact svg { flex-shrink: 0; color: var(--teal); } .social-row { display: flex; gap: 12px; margin-top: 22px; } .social-row a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.1); display: grid; place-items: center; color: var(--white); transition: all 0.25s; } .social-row a:hover { background: var(--orange); transform: translateY(-3px); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; text-align: center; font-size: 0.85rem; opacity: 0.7; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.visible { opacity: 1; transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 1000px) { .hero-grid, .split, .two-col, .video-band, .contact-grid { grid-template-columns: 1fr; } .diamond-cluster { height: 420px; max-width: 480px; margin-inline: auto; } .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; } .gallery-grid, .gallery-grid.cols-4, .gallery-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .cta-band .btn { margin-left: 0; } } @media (max-width: 1150px) { /* Collapse to the hamburger menu below 1150px. The full desktop nav (6 links + Member Login + Become a Member) doesn't fit until ~1100px, so collapsing here stops the links/CTA from clipping at tablet/small-laptop widths. */ .main-nav { position: fixed; top: 81px; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--white); width: min(300px, 82vw); height: calc(100vh - 81px); padding: 24px; box-shadow: -10px 0 30px rgba(0,0,0,0.08); transform: translateX(100%); transition: transform 0.3s ease; } .main-nav.open { transform: translateX(0); } .main-nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); } .nav-toggle { display: block; } .dropdown { width: 100%; } .drop-toggle { display: none; } .dropdown-menu { display: block; position: static; border: none; box-shadow: none; padding: 0; min-width: 0; } .dropdown-menu a { padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--line); } /* Top-bar CTA buttons would overflow a phone width — hide them and use the in-menu versions instead; keep the hamburger toggle. */ .nav-cta .btn, .nav-cta .nav-login { display: none; } .nav-mobile-cta { display: block; margin-top: 6px; font-weight: 600; color: var(--green-700); } /* Scope to `.main-nav a...` (0,2,1): the plain `.main-nav a` rule above is (0,1,1) and outranks a lone class, which is why the white text and the centring never applied and the CTA rendered as dark ink with the nav link's bottom border still attached. */ .main-nav a.nav-mobile-cta--primary { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); background: linear-gradient(180deg, var(--green-600), var(--green-700)); border: none; border-bottom: none; border-radius: 10px; padding: 14px 18px; margin-top: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(19, 136, 8, 0.28); transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease, filter 0.18s ease; } /* The nav's sliding underline has no place on a solid button. */ .main-nav a.nav-mobile-cta--primary::after { display: none; } .main-nav a.nav-mobile-cta--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(19, 136, 8, 0.34); filter: brightness(1.05); } .main-nav a.nav-mobile-cta--primary:active { transform: translateY(0) scale(0.98); box-shadow: 0 4px 12px rgba(19, 136, 8, 0.26); } /* Rises in just after the drawer finishes sliding, so it reads as the menu's final call to action rather than arriving with everything else. */ .main-nav.open a.nav-mobile-cta--primary { animation: navCtaRise 0.45s var(--ease-out) both 0.18s; } @keyframes navCtaRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .main-nav.open a.nav-mobile-cta--primary { animation: none; } .main-nav a.nav-mobile-cta--primary { transition: none; } .main-nav a.nav-mobile-cta--primary:hover { transform: none; } } .nav-mobile-cta--primary::after { display: none; } } @media (max-width: 760px) { .diamond { width: 170px; height: 170px; } .diamond-2 { width: 195px; height: 195px; left: 140px; } .diamond-1 { left: 0; top: 90px; } .diamond-3 { left: 150px; top: 180px; } .diamond-cluster { height: 350px; } .section { padding: 56px 0; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid, .gallery-grid.cols-4, .gallery-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } .video-band { padding: 26px; } .cta-band { padding: 30px 26px; } .footer-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } /* ============================================================ GLOBAL POLISH LAYER (UI/UX pass — a11y, motion, interaction) ============================================================ */ /* Keyboard focus: a single visible ring on every interactive element. :focus-visible keeps it keyboard-only so mouse clicks stay clean. */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green-600); outline-offset: 2px; border-radius: 6px; } /* Comfortable, consistent pointer + tap behaviour */ a, button, .btn, [role="button"], summary, label[for] { cursor: pointer; } button, .btn, a { -webkit-tap-highlight-color: transparent; } a, .btn, button { touch-action: manipulation; } /* Brand-tinted text selection */ ::selection { background: rgba(23,163,11, 0.22); color: var(--ink); } /* Buttons share one motion rhythm and never look dead on tap */ .btn { transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } .btn:active { transform: translateY(0) scale(0.98); } /* Comfortable min touch target for nav / inline links on touch devices */ @media (pointer: coarse) { .main-nav a, .nav-login, .footer a { min-height: 44px; display: inline-flex; align-items: center; } } /* Body measure: keep long paragraphs readable (65–75 chars) */ .section p, .hero .lede, .section-head .sub { max-width: 68ch; } /* Respect users who prefer less motion — and never leave reveal content hidden */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .btn:hover, .btn-primary:hover, .btn-light:hover { transform: none; } } /* Intro splash: shown once per browser tab. The script stamps .intro-seen on for every page after the first, so the splash is skipped on normal navigation instead of replaying on each full page load. */ html.intro-seen .site-splash { display: none; }