/* ============================================================ BASE.CSS — design tokens, reset, typography, utilities Bpexch Exchange Pakistan · Mobile-first ============================================================ */ /* ---------- Design tokens (brand color system) ---------- */ :root { --mint: #8ADA8E; /* main brand / banner background */ --mint-light: #9FE2A3; /* cards sitting on green */ --mint-pale: #F2FAF3; /* tint cards inside white sections */ --forest: #153317; /* header + footer + dark buttons */ --forest-mid: #226D26; /* links, subtext on green, icons */ --action: #2E9B34; /* buttons on white */ --cream: #FFF7E8; /* warm highlight band */ --cream-text: #7A5A1E; --white: #FFFFFF; --body-text: #56665A; /* paragraphs */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'Figtree', sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 18px; --shadow-card: 0 6px 24px rgba(21, 51, 23, 0.08); --shadow-float: 0 14px 40px rgba(21, 51, 23, 0.12); --container: 1140px; --gutter: 20px; } /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--body-text); background: var(--white); -webkit-font-smoothing: antialiased; } img, svg, canvas { max-width: 100%; display: block; } a { color: var(--forest-mid); text-decoration: none; } ul, ol { list-style-position: inside; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--forest); line-height: 1.15; text-wrap: balance; } h1 { font-size: clamp(34px, 7vw, 58px); font-weight: 700; } h2 { font-size: clamp(26px, 4.4vw, 38px); font-weight: 700; } h3 { font-size: clamp(20px, 3vw, 24px); font-weight: 600; } h4 { font-size: 17px; font-weight: 600; } p { margin-bottom: 0; } strong { color: var(--forest); font-weight: 600; } /* ---------- Layout helpers ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .u-text-center { text-align: center; } /* Accessible skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--forest); color: var(--mint); padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 200; } .skip-link:focus { left: 0; } /* Visually hidden (screen-reader only) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Scroll-reveal animation hooks ---------- Hidden state is gated behind the .js class (added by an inline script in ). With JS off — or for any non-JS crawler — the class is never set, so content stays fully visible instead of being stuck at opacity:0. */ .js [data-animate] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } [data-animate].is-visible { opacity: 1; transform: none; } [data-animate="fade"] { transform: none; } /* When GSAP ScrollTrigger drives the reveals, the resting state is visible (GSAP animates the entrance from hidden). If GSAP never loads, this class is never added, so the CSS reveal above remains the fallback. Qualified with html. so this beats the .js hidden rules on specificity (0,2,1 vs 0,2,0) regardless of source order — otherwise the later ".js [data-animate-group] > *" rule wins the tie and elements GSAP skips (e.g. the hero stats) stay stuck at opacity:0. */ html.gsap-reveals [data-animate], html.gsap-reveals [data-animate-group] > * { opacity: 1; transform: none; transition: none; } /* Stagger children inside an animated group */ .js [data-animate-group] > * { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } [data-animate-group].is-visible > * { opacity: 1; transform: none; } [data-animate-group].is-visible > *:nth-child(2) { transition-delay: .1s; } [data-animate-group].is-visible > *:nth-child(3) { transition-delay: .2s; } [data-animate-group].is-visible > *:nth-child(4) { transition-delay: .3s; } [data-animate-group].is-visible > *:nth-child(5) { transition-delay: .4s; } [data-animate-group].is-visible > *:nth-child(6) { transition-delay: .5s; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } [data-animate], [data-animate-group] > * { opacity: 1; transform: none; } } /* ---------- Larger screens ---------- */ @media (min-width: 768px) { body { font-size: 17px; } .container { padding: 0 24px; } }