/ level by undoing the fixed 100% height on phones. */ @media (max-width: 980px) { html, body { height: auto; min-height: 100%; } body { overflow-x: clip; } /* `clip` = hidden but no scroll container */ } *, *::before, *::after { /* Soft wrapping for long URLs, emails, and Arabic ligatures that can otherwise blow past their container on a phone. */ min-width: 0; } /* iOS: inputs / textareas / selects must be >= 16px to stop auto-zoom on focus. */ input, select, textarea { font-size: 16px; } /* -------- 1. Navigation (mobile) -------- */ @media (max-width: 899px) { /* Keep the CTA cluster (1321 + "Ariza qoldirish") visible on mobile, but tighten the spacing and shrink the buttons so they fit alongside the logo and hamburger. */ .nav-inner { gap: 8px; } .nav-cta { margin-left: auto; display: flex; gap: 6px; align-items: center; } .nav-cta .btn { padding: 8px 10px; font-size: 13px; min-height: 38px; border-radius: 10px; white-space: nowrap; } .nav-cta .btn svg { width: 13px; height: 13px; } .nav-burger { margin-left: 0; } /* Drawer — animated slide-down, full-width. */ .nav-drawer { position: absolute; top: var(--nav-h); left: 0; right: 0; padding: 16px 20px 20px; background: #fff; border-bottom: 1px solid var(--ink-200); box-shadow: 0 18px 40px -18px rgba(0,0,0,.18); display: block; /* overrides component rule */ transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .22s; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .nav-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-drawer a { display: block; padding: 14px 0; font-size: 1rem; font-weight: 500; color: var(--ink-800); border-bottom: 1px solid var(--ink-100); } .nav-drawer a:last-child { border-bottom: 0; } /* Small screens: shrink the mark + wordmark so it never competes with the burger. */ .nav-logo { gap: 8px; } .nav-logo .logo-mark { width: 34px; height: 34px; } .nav-logo .logo-word { gap: 2px; } .nav-logo .logo-grand { font-family: "Archivo", "Inter", system-ui, sans-serif; font-size: 1.12rem; /* 20% smaller than 1.4rem */ font-weight: 700; /* was 800 — matches desktop thinner weight */ letter-spacing: -0.005em; line-height: 0.92; } .nav-logo .logo-sub { font-size: 0.42rem; letter-spacing: 0.2em; } /* Sticky nav shouldn't capture touch on its absolute drawer. */ .nav { position: sticky; } } /* Burger spin-to-X animation */ .nav-burger[aria-expanded="true"] svg { transform: rotate(90deg); } .nav-burger svg { transition: transform .22s cubic-bezier(.2,.7,.2,1); } /* Ultra-narrow phones (≤375px, iPhone SE/mini): squeeze the nav CTA cluster further so the 1321 pill and Ariza button still sit comfortably next to the logo+burger. */ @media (max-width: 375px) { .nav-inner { gap: 6px; } .nav-cta { gap: 4px; } .nav-cta .btn { padding: 7px 8px; font-size: 12px; min-height: 34px; border-radius: 9px; } .nav-cta .btn svg { width: 12px; height: 12px; } .nav-logo { gap: 6px; } .nav-logo .logo-mark { width: 30px; height: 30px; } .nav-logo .logo-grand { font-family: "Archivo", "Inter", system-ui, sans-serif; font-size: 1.0rem; /* 20% smaller than 1.25rem */ font-weight: 700; /* was 800 — ~15% thinner strokes */ letter-spacing: -0.005em; line-height: 0.92; } .nav-logo .logo-sub { font-size: 0.4rem; letter-spacing: 0.18em; } } /* -------- 2. Typography rhythm on small screens -------- */ @media (max-width: 640px) { /* Hero H1s can be huge with 8vw — cap them so they never wrap weirdly. */ .hero h1, .hero-h1 { font-size: clamp(2.1rem, 9vw, 3rem); max-width: 100%; } h1 { font-size: clamp(2rem, 8vw, 2.8rem); } h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); } h3 { font-size: clamp(1.25rem, 5vw, 1.6rem); } h4 { font-size: clamp(1.05rem, 4.2vw, 1.25rem); } .eyebrow { font-size: .7rem; } p, .lead { font-size: 1rem; line-height: 1.6; } section, .section { padding-block: clamp(40px, 9vw, 64px); } } /* -------- 3. Container gutters -------- */ @media (max-width: 640px) { .container { width: min(100% - 24px, var(--container)); } .container-wide { width: min(100% - 24px, var(--container-wide)); } } @media (max-width: 420px) { .container { width: min(100% - 20px, var(--container)); } .container-wide { width: min(100% - 20px, var(--container-wide)); } } /* -------- 4. Buttons — 44px minimum touch target -------- */ @media (max-width: 900px) { .btn { min-height: 44px; padding: 12px 20px; } /* .btn-sm raised to 44px Apple HIG minimum — used on course-card CTAs */ .btn-sm { min-height: 44px; padding: 11px 16px; } .btn-lg { min-height: 52px; padding: 16px 24px; font-size: 1.05rem; } /* Anchor-as-button in drawer */ .nav-drawer a[data-lead], .nav-drawer a[href^="tel"] { min-height: 44px; display: flex; align-items: center; } } /* -------- 5. Lead forms -------- */ @media (max-width: 640px) { .lead-form { padding: 20px 18px; border-radius: 16px; } .lead-form input, .lead-form select, .lead-form textarea { padding: 14px 14px; font-size: 16px; /* iOS zoom fix */ min-height: 46px; } .lead-form .btn { width: 100%; min-height: 48px; } } /* -------- 6. Cards & grids — stack cleanly on phones -------- */ @media (max-width: 640px) { .grid, .grid-2, .grid-3, .grid-4 { gap: 16px; } .course-card, .branch-card, .card { padding: 20px 18px; border-radius: 16px; } /* Hero stats: 2 per row on phones, full-width on very small */ .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hero-stats .stat { padding: 14px 16px; } .hero-stats .num { font-size: 1.6rem; } } @media (max-width: 380px) { .hero-stats { grid-template-columns: 1fr; } } /* -------- 7. Landing-page heroes (lp-hero-v2) -------- */ @media (max-width: 980px) { /* Single column hero grid on phones + tablets. */ .lp-grid { grid-template-columns: 1fr !important; gap: 32px; } .sticky-wrap { position: static !important; } } @media (max-width: 640px) { /* Shrink the huge decorative ornaments so they don't dominate the fold. */ .ornament-ar { font-size: clamp(5rem, 18vw, 9rem) !important; } .ornament-ar.top-right { top: -20px !important; right: -30px !important; } .ornament-ar.mid-left { left: -20px !important; } .ornament-ar.bottom { right: 0 !important; bottom: -30px !important; } /* Orbs scale down so blur stays subtle, not dominant. */ .orb { filter: blur(28px); opacity: .6; } .orb.o1 { width: 260px !important; height: 260px !important; top: -80px !important; left: -80px !important; } .orb.o2 { width: 200px !important; height: 200px !important; bottom: -80px !important; right: -60px !important; } /* Big numerals / module numerals: scale down so they stay on-card */ .module-card .m-big { font-size: clamp(3.5rem, 20vw, 5.5rem) !important; right: -8px !important; top: -6px !important; } .big-number { font-size: clamp(2.4rem, 14vw, 3.6rem) !important; } /* Format / module / reason grids: single column on phones */ .format-grid, .module-row, .reasons { grid-template-columns: 1fr !important; gap: 14px !important; } /* Trust counters: 2x2 grid with centered card treatment on mobile (matches homepage hero-stats-v2 aesthetic — top accent, centered, soft shadow, per-theme accent color). */ .trust-v2 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 !important; } .trust-v2 .t-item { background: #fff; border: 1px solid color-mix(in oklab, var(--t-glow, #888) 18%, var(--ink-100, #e8e8ea)); border-top: 3px solid color-mix(in oklab, var(--t-accent, #B68A4E) 65%, var(--t-glow, #B68A4E)); border-left: 0 !important; border-radius: 14px; padding: 18px 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 20px -14px rgba(20, 20, 40, 0.2); text-align: center; align-items: center; position: relative; overflow: hidden; } .trust-v2 .t-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--t-glow, #fff) 12%, transparent) 0%, transparent 60%); pointer-events: none; } .trust-v2 .t-num { font-size: clamp(1.6rem, 6.5vw, 2.1rem) !important; line-height: 1.05; color: var(--t-accent, var(--t-ink, #1a1a22)); font-weight: 700; position: relative; z-index: 1; } .trust-v2 .t-lbl { font-size: 0.78rem !important; line-height: 1.3; color: color-mix(in oklab, var(--t-ink, #1a1a22) 70%, transparent); position: relative; z-index: 1; } /* Sticky form on mobile: don't stick */ .sticky-wrap { position: static !important; top: auto !important; } /* Landing CTA band */ .cta-band { padding: 28px 20px; border-radius: 20px; } .cta-band h2 { font-size: clamp(1.4rem, 7vw, 2rem); max-width: 100%; } } /* -------- 8. Footer — CTA band stacks, contact cards full width -------- */ @media (max-width: 640px) { .footer { padding: 48px 0 24px; } .footer-cta { padding: 20px; gap: 18px; } .footer-cta .fc-title { font-size: 1.2rem; } .footer-cta .fc-actions .btn { width: 100%; justify-content: center; } .footer-cta .fc-ghost { width: 100%; justify-content: center; } .footer-contact .fcon { padding: 12px 14px; } .footer-contact .fcon strong { font-size: .88rem; word-break: break-word; } .footer-bottom { font-size: .72rem; } .footer-legal { flex-wrap: wrap; gap: 6px; } } /* -------- 9. Kurslar / catalog grid -------- */ @media (max-width: 640px) { /* Filter chips scroll horizontally instead of wrapping into many rows. */ .chips-row, .filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .chips-row::-webkit-scrollbar, .filter-chips::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; } /* Filter-bar on /pages/kurslar.html can turn into a vertical scroll with tight spacing on mobile, and its large chip row should scroll horizontally rather than wrap into tall stacks. */ .filter-bar { flex-wrap: nowrap !important; overflow-x: auto; padding: 8px 10px; scrollbar-width: none; } .filter-bar::-webkit-scrollbar { display: none; } .filter-bar .chip, .filter-bar .btn { flex-shrink: 0; } /* Price value must not wrap the thousands group. */ .course-card .cc-price { flex-wrap: wrap; row-gap: 2px; } .course-card .cc-price .v { white-space: nowrap; } .course-card .cc-price .u { white-space: nowrap; } } /* -------- 10. Ariza (wizard form) -------- Scoped to .wizard-step so landing pages' identically-named grids aren't hit. */ @media (max-width: 640px) { .wizard-step { padding: 20px 18px !important; } .wizard-progress { gap: 4px; } .wizard-progress .step { font-size: 11px; } .wizard-step .course-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .wizard-step .course-card { padding: 14px 12px !important; min-height: 96px; } .wiz-nav { flex-direction: column-reverse; gap: 10px; } .wiz-nav .btn { width: 100%; } } /* -------- 11. Filiallar (branches) -------- */ @media (max-width: 640px) { .branch-map, .branches-map { height: 320px !important; } .branch-card .head { flex-direction: column; align-items: flex-start; gap: 4px; } } /* -------- 12. About page -------- */ @media (max-width: 640px) { .about-hero { padding-block: 48px; } .timeline-item { padding-left: 28px; } } /* -------- 13. Rahmat (thank-you) -------- */ @media (max-width: 640px) { .rahmat-hero { padding-block: 56px; } .rahmat-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); } .rahmat-actions { flex-direction: column; gap: 12px; } .rahmat-actions .btn { width: 100%; } .rahmat-next { grid-template-columns: 1fr !important; } /* Clip the decorative blur-orbs inside the shell so they don't inflate scrollWidth */ .rahmat-shell { overflow: hidden; } .rahmat-orb { width: 260px !important; height: 260px !important; filter: blur(32px) !important; opacity: .75; } .rahmat-orb.o1 { top: -60px !important; left: -80px !important; } .rahmat-orb.o2 { bottom: -100px !important; right: -60px !important; } } /* -------- 14. Bolajon / yozgi / mental / xattotlik — big display numerals -------- */ @media (max-width: 640px) { .hero-hello, /* bolajon */ .big-digit, /* mental */ .hero-sum, /* any giant display number */ .hero-phrase { /* any giant display phrase */ font-size: clamp(2.5rem, 14vw, 4.2rem) !important; line-height: 1.02 !important; } .stat-big { font-size: clamp(2rem, 11vw, 3.4rem) !important; } } /* -------- 15. Section paddings for landings -------- */ @media (max-width: 640px) { .theme-section, .why-arab, .why-eng, .why-rus, .why-turk, .why-kids, .why-math, .why-xat, .why-yozgi { padding-block: clamp(44px, 10vw, 72px); } } /* -------- 16. Images / SVGs shouldn't overflow their wrapper -------- */ img, svg, video, iframe { max-width: 100%; height: auto; } .decor-svg, .hero-decor { max-width: 100%; } /* -------- 17. Prevent long words (emails, phone numbers) breaking layout -------- */ @media (max-width: 640px) { .footer-contact a strong, .footer-brand a, .rahmat-contact a, .contact-email { overflow-wrap: anywhere; word-break: break-word; } } /* -------- 18. Homepage-specific tweaks -------- */ @media (max-width: 640px) { /* Marquee text slows down a touch on mobile so it's legible. */ .marquee__row { animation-duration: 40s; } /* Section eyebrows and "KELMOQDAMIZ"-style badges shouldn't be cut off. */ .eyebrow { white-space: normal; } /* Features-v2: shrink the absolutely-positioned decorative SVGs so they don't overlap the paragraph text at mobile card widths. On desktop they're 160x160 .55 opacity bottom-right decoration — on a phone that swallows the card. */ .feature-v2 { padding: 20px 18px; } .feature-v2 .f-art { width: 70px !important; height: 70px !important; inset: auto -10px -10px auto !important; opacity: 0.25 !important; } .feature-v2 p { position: relative; z-index: 1; } .feature-v2 h4 { position: relative; z-index: 1; } /* Popular courses & branch cards can have similar decorative overlays */ .card .card-art, .course-card .c-art, .branch-card .b-art { opacity: 0.2 !important; } /* Family band pill row: allow wrap on mobile */ .family-band .pill-row { flex-wrap: wrap; gap: 8px; justify-content: center; } .family-band .pill { font-size: 0.85rem; padding: 8px 14px; } } @media (max-width: 420px) { /* Very small screens: just hide the decorative f-art completely */ .feature-v2 .f-art { display: none !important; } } /* -------- 19. CTA band grid on tablet-down -------- */ @media (max-width: 780px) { .cta-band { grid-template-columns: 1fr !important; gap: 20px; } } /* -------- 20. Focus ring — keep it visible on mobile too -------- */ :focus-visible { outline-offset: 2px; } /* =========================================================== 21. Landing-page mobile rhythm — kill the dead space between hero and first section + tighten themed CTA bands. Problem being fixed: On mobile the sticky lead-form stacks BELOW the hero text inside .lp-hero-v2. The hero then still carries ~56px of outer bottom padding, and the first section below adds ~40–64px of top padding, so the seam visually shows as ~100–120px of empty space. We collapse the hero's bottom padding and cap the next-section's top padding so the transition reads as an intentional ~32–48px gap. =========================================================== */ @media (max-width: 979px) { .lp-hero-v2 { /* top-padding retained for breathing room; bottom collapsed */ padding-top: clamp(48px, 9vw, 80px) !important; padding-bottom: clamp(24px, 5vw, 40px) !important; } /* First section after the hero: don't double up. */ .lp-hero-v2 + section, .lp-hero-v2 + .section { padding-top: clamp(32px, 7vw, 56px) !important; } /* Themed CTA bands share this structural pattern. */ .cta-arab, .cta-eng, .cta-rus, .cta-turk, .cta-kids, .cta-math, .cta-xat, .cta-yozgi { padding-block: clamp(40px, 9vw, 64px) !important; } } /* =========================================================== 22. Landing buttons — stack clean, full-width, equal height. Problem being fixed: Every landing's .hero-cta and .contact-row use display:flex; gap:12px; flex-wrap:wrap On a phone, "Bepul kirish testi" + "Dastur bilan tanishish" are different widths, so when flex-wrap kicks in one button looks adrift. We stack them vertically, full-width, center-aligned, so they read as one intentional action column. =========================================================== */ @media (max-width: 640px) { /* Hero CTA pair. Inline styles on this element set display:flex already — we just need to override direction, gap, and margin. */ .hero-cta { flex-direction: column !important; gap: 10px !important; margin-top: var(--s-5) !important; align-items: stretch !important; } .hero-cta .btn { width: 100%; justify-content: center; } /* CTA band action row (used in themed cta-arab/eng/rus/turk/kids/math/xat/yozgi). Scoped to .cta-* parents — the class is also used in filiallar.html for branch-card chip links, which should stay horizontal. */ .cta-arab .contact-row, .cta-eng .contact-row, .cta-rus .contact-row, .cta-turk .contact-row, .cta-kids .contact-row, .cta-math .contact-row, .cta-xat .contact-row, .cta-yozgi .contact-row { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-top: var(--s-5) !important; align-items: stretch !important; } .cta-arab .contact-row .btn, .cta-eng .contact-row .btn, .cta-rus .contact-row .btn, .cta-turk .contact-row .btn, .cta-kids .contact-row .btn, .cta-math .contact-row .btn, .cta-xat .contact-row .btn, .cta-yozgi .contact-row .btn { width: 100%; justify-content: center; } /* Trust counters sit tighter under the hero-cta on mobile. */ .trust-v2 { margin-top: var(--s-5) !important; } } /* =========================================================== 23. CTA band big-1321 row — phone number + caption stack cleanly on phones instead of wrapping awkwardly. =========================================================== */ @media (max-width: 640px) { .cta-arab .big-1321, .cta-eng .big-1321, .cta-rus .big-1321, .cta-turk .big-1321, .cta-kids .big-1321, .cta-math .big-1321, .cta-xat .big-1321, .cta-yozgi .big-1321 { font-size: clamp(2.4rem, 12vw, 3.6rem) !important; line-height: 1 !important; display: inline-block; } } /* =========================================================== 24. Lead-form on mobile — tighter top margin inside the hero so the gap above the form card doesn't dominate. =========================================================== */ @media (max-width: 979px) { .lp-grid > aside { /* The form aside sits directly after the hero text column. Cut the grid gap's visual weight by neutralizing any extra top spacing the theme might impose. */ margin-top: 0; } .sticky-wrap { margin-top: 0 !important; } } /* =========================================================== 25. Section eyebrows + h2 tighter margins on mobile so the first-visible element after the seam doesn't feel detached. =========================================================== */ @media (max-width: 640px) { .section .eyebrow-arab, .section .eyebrow-eng, .section .eyebrow-rus, .section .eyebrow-turk, .section .eyebrow-kids, .section .eyebrow-math, .section .eyebrow-xat, .section .eyebrow-yozgi, section .eyebrow-arab, section .eyebrow-eng, section .eyebrow-rus, section .eyebrow-turk, section .eyebrow-kids, section .eyebrow-math, section .eyebrow-xat, section .eyebrow-yozgi { margin-top: 0; } } /* =========================================================== 26. Homepage hero (.hero-v2) — tighten mobile rhythm. Problem being fixed: On desktop the hero uses --s-6 (32px) between sub and CTA, and --s-8 (64px) + --s-6 padding (32px) before hero-stats — that's ~96px of air between the buttons and the stats row. On a phone this reads as dead space. We collapse top/bottom padding, tighten inter-element gaps, and let the stats sit closer to the CTA while keeping a visible divider. =========================================================== */ @media (max-width: 640px) { .hero-v2 { padding: 44px 0 32px !important; } .hero-v2 .eyebrow { display: inline-block; } .hero-v2 h1 { margin: .35em 0 .15em !important; font-size: clamp(2.15rem, 8.4vw, 2.7rem) !important; line-height: 1.06 !important; } .hero-v2 .hero-sub { margin-top: 10px !important; font-size: 1rem; line-height: 1.5; } .hero-v2 .hero-cta { margin-top: 18px !important; gap: 8px !important; } .hero-stats-v2 { margin-top: 22px !important; padding-top: 20px !important; gap: 14px !important; } .hero-stats-v2 .num { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } .hero-stats-v2 .label { font-size: .82rem; } } @media (max-width: 420px) { .hero-v2 { padding: 36px 0 28px !important; } .hero-v2 .hero-cta { margin-top: 14px !important; } .hero-stats-v2 { margin-top: 18px !important; padding-top: 16px !important; } } /* =========================================================== 26b. Homepage hero stats — centered card tiles on mobile. On mobile, turn each stat into a soft tile with centered number + label. Matches the landing-page trust-v2 treatment so the whole site feels consistent. =========================================================== */ @media (max-width: 720px) { .hero-stats-v2 { border-top: 0 !important; padding-top: 4px !important; gap: 12px !important; } .hero-stats-v2 .stat { background: #fff; border: 1px solid color-mix(in oklab, var(--brand-700, #1f6e3d) 14%, var(--ink-100, #e8e8ea)); border-top: 3px solid color-mix(in oklab, var(--gold-500, #B68A4E) 70%, transparent); border-radius: 14px; padding: 18px 14px 16px !important; text-align: center; align-items: center !important; gap: 6px !important; box-shadow: 0 6px 18px -10px rgba(31, 110, 61, .18); position: relative; overflow: hidden; } .hero-stats-v2 .stat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--gold-500, #B68A4E) 8%, transparent) 0%, transparent 55%); pointer-events: none; } .hero-stats-v2 .num { font-size: clamp(1.7rem, 7.5vw, 2.3rem) !important; text-align: center; width: 100%; } .hero-stats-v2 .label { text-align: center; line-height: 1.35; color: var(--ink-700, #3d4147); } } @media (max-width: 380px) { .hero-stats-v2 .stat { padding: 16px 10px 14px !important; } .hero-stats-v2 .label { font-size: .78rem; } } /* =========================================================== 27. Landing hero (.lp-hero-v2) — tighten further. Section 21 already collapses the outer padding; this closes the remaining gaps inside the hero column: eyebrow → H1, H1 → lead, lead → CTA, CTA → trust counters. =========================================================== */ @media (max-width: 640px) { .lp-hero-v2 { padding-top: clamp(36px, 7vw, 56px) !important; padding-bottom: clamp(20px, 4vw, 32px) !important; } .lp-hero-v2 .hero-h1, .lp-hero-v2 h1 { margin-top: 10px !important; margin-bottom: 0 !important; font-size: clamp(2rem, 8.5vw, 2.8rem) !important; line-height: 1.06 !important; } .lp-hero-v2 .hero-lead, .lp-hero-v2 .lp-lead, .lp-hero-v2 p.lead { margin-top: 12px !important; font-size: 1rem; line-height: 1.55; } .lp-hero-v2 .hero-cta { margin-top: 18px !important; gap: 8px !important; } .lp-hero-v2 .trust-v2 { margin-top: 22px !important; } /* Eyebrow pill inside the landing heroes shouldn't push its own margin-top. */ .lp-hero-v2 .eyebrow-arab, .lp-hero-v2 .eyebrow-eng, .lp-hero-v2 .eyebrow-rus, .lp-hero-v2 .eyebrow-turk, .lp-hero-v2 .eyebrow-kids, .lp-hero-v2 .eyebrow-math, .lp-hero-v2 .eyebrow-xat, .lp-hero-v2 .eyebrow-yozgi { margin: 0 !important; } } @media (max-width: 420px) { .lp-hero-v2 { padding-top: 32px !important; padding-bottom: 20px !important; } .lp-hero-v2 .hero-h1, .lp-hero-v2 h1 { margin-top: 8px !important; } } /* =========================================================== 28. Hero buttons — slightly shorter on phones so the stacked pair doesn't dominate the fold. Overrides Section 4's .btn-lg sizing for hero context only. =========================================================== */ @media (max-width: 640px) { .hero-v2 .btn-lg, .lp-hero-v2 .btn-lg, .hero-cta .btn-lg { min-height: 46px !important; padding: 12px 20px !important; font-size: 1rem !important; } } /* =========================================================== 29. Landing-page trust counters — desktop card treatment. Promotes the flat left-border strips (each landing's local .trust-v2 .t-item rule) to centered white cards with a themed top accent, mirroring the homepage hero-stats-v2 aesthetic and the mobile treatment in Section 7. Specificity (.lp-hero-v2 .trust-v2 .t-item = 3 classes) beats the per-landing 2-class rules cleanly. =========================================================== */ @media (min-width: 641px) { .lp-hero-v2 .trust-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: 0; } .lp-hero-v2 .trust-v2 .t-item { background: #fff; border: 1px solid color-mix(in oklab, var(--t-glow, #888) 18%, var(--ink-100, #e8e8ea)); border-top: 3px solid color-mix(in oklab, var(--t-accent, #B68A4E) 65%, var(--t-glow, #B68A4E)); border-left: 0; border-radius: 16px; padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 24px -16px rgba(20, 20, 40, 0.22); text-align: center; align-items: center; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .lp-hero-v2 .trust-v2 .t-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--t-glow, #fff) 14%, transparent) 0%, transparent 60%); pointer-events: none; } .lp-hero-v2 .trust-v2 .t-item:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(20, 20, 40, 0.28); border-top-color: color-mix(in oklab, var(--t-accent, #B68A4E) 85%, var(--t-glow, #B68A4E)); } .lp-hero-v2 .trust-v2 .t-num { font-family: var(--font-display, inherit); font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.05; color: var(--t-accent, var(--t-ink, #1a1a22)); font-weight: 700; margin-top: 0; position: relative; z-index: 1; } .lp-hero-v2 .trust-v2 .t-lbl { font-size: 0.88rem; line-height: 1.35; color: color-mix(in oklab, var(--t-ink, #1a1a22) 70%, transparent); margin-top: 0; position: relative; z-index: 1; } } /* =========================================================== 30. iOS WebKit fallback for split gradient hero text. Chrome on iPhone uses WebKit. On some iOS builds, text that is both split into nested spans and painted with -webkit-text-fill- color: transparent can disappear. Keep the homepage phrase fully visible on iPhones by using a solid brand color there. =========================================================== */ @media (max-width: 640px) { @supports (-webkit-touch-callout: none) { .hero-v2 h1 .grad-text, .hero-v2 h1 .grad-text .split-word, .hero-v2 h1 .grad-text .split-char { background: none !important; -webkit-text-fill-color: var(--brand-700) !important; color: var(--brand-700) !important; animation: none !important; } } }