/* ═══════════════════════════════════════════ english.physics.4sh.education — Stylesheet Adapted from Bengali_Site/css/style.css for English typography. ═══════════════════════════════════════════ */ /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: light; --crimson: #A51C30; --crimson-dk: #8C1829; --dark-red: #8B1E1E; --dark-red-dk: #6B1515; --charcoal: #1E1E1E; --body-text: #2D2D2D; --muted: #666666; --bg: #FFFFFF; --bg-dark: #1A1A1A; --header-h: 72px; --max-w: 1200px; --section-py: 100px; --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; --font-body: Georgia, 'Times New Roman', serif; --transition: 0.3s ease; } /* scroll-behavior: smooth is intentionally NOT set here. An animated scroll to a distant anchor (e.g. jumping from the top to a chapter 30+ sections down) passes through every intervening topic-slab, and each one crosses the lazy math-render IntersectionObserver's threshold mid-animation -- piling up enough synchronous KaTeX rendering in a tight window to hang or crash the tab on a real phone (confirmed: iOS Safari's "A problem repeatedly occurred" page on a #topic-33 jump). Instant (default) jumps don't animate through intermediate scroll positions, so this class of bug can't happen -- see the render-on-click logic at the end of body, which pre-renders just the destination section before the jump so there's no flash of unrendered math either. */ /* overflow-x:hidden needs to be on html, not just body -- is the actual root scrolling element on many mobile browsers, so body-only overflow-x:hidden (below) can fail to suppress a page-level horizontal scrollbar on some real Android Chrome versions even though it works fine on desktop/iOS Safari. Confirmed real symptom: a literal horizontal scrollbar at the bottom of the page on a real device, with the fixed header rendering as if relative to that wider, unclipped layout. */ html { font-size: 20px; overflow-x: hidden; max-width: 100%; } /* Every anchor-jump target (nav links, dropdown chapter links) needs this — otherwise the fixed header lands flush over the top of the section and crowds/covers the first line of content (e.g. the "Chapter N of 35" label). */ section[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); } body { font-family: var(--font-body); color: var(--body-text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; /* full-bleed elements (.topic-poster, .slab-first) break out to 100vw, which is wider than the viewport when a scrollbar is present — this clips that overhang instead of introducing horizontal scroll */ overflow-x: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } /* ═══════════════════════════════════════════ HEADER ═══════════════════════════════════════════ */ .site-header { /* backdrop-filter was removed here as a fix attempt, then reverted -- Bengali_Site_prod has this exact same position:fixed + backdrop-filter pattern and its hamburger works fine on Android, which proved this was never the real cause (see the .topic-banner 100vw fix below for the actual root cause). Kept for parity with the proven-working reference site rather than an unexplained deviation. */ position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,0.06); z-index: 1000; } .header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; height: 100%; display: flex; align-items: center; gap: 1.5rem; } .logo { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; color: var(--charcoal); letter-spacing: -0.02em; flex-shrink: 0; } .desktop-nav { display: flex; gap: 1.25rem; margin-left: auto; font-family: var(--font-sans); } .desktop-nav a { font-size: 0.8rem; color: var(--muted); font-weight: 500; transition: color var(--transition); letter-spacing: 0.01em; white-space: nowrap; } .desktop-nav a:hover { color: var(--charcoal); } .desktop-nav a.active { color: var(--crimson); font-weight: 600; } /* ═══════════════════════════════════════════ TOPICS DROPDOWN (desktop header, replaces the CTA button) ═══════════════════════════════════════════ */ .topics-dropdown { position: relative; margin-left: auto; } .topics-toggle { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; background: none; border: 1px solid rgba(0,0,0,0.16); color: var(--charcoal); padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; transition: border-color var(--transition), color var(--transition); } .topics-toggle .chevron { font-size: 0.65rem; transition: transform 0.25s ease; } .topics-toggle:hover, .topics-dropdown.open .topics-toggle { border-color: var(--crimson); color: var(--crimson); } .topics-dropdown.open .chevron { transform: rotate(180deg); } .topics-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 8px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 20px 60px rgba(0,0,0,0.16); padding: 1.25rem 1.5rem; width: 560px; max-height: min(70vh, 560px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1100; } .topics-dropdown.open .topics-menu { opacity: 1; visibility: visible; transform: translateY(0); } .topics-menu-heading { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); margin: 0 0 0.6rem; } .topics-menu-section + .topics-menu-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,0.08); } .topics-blocks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.75rem; } .topics-chapters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.75rem; } .topics-menu-section a { min-width: 0; font-family: var(--font-sans); font-size: 0.85rem; line-height: 1.3; color: var(--body-text); padding: 0.25rem 0; overflow-wrap: break-word; transition: color var(--transition); } .topics-blocks-grid a { font-weight: 700; color: var(--charcoal); } .topics-menu-section a:hover { color: var(--crimson); } /* ═══════════════════════════════════════════ MOBILE TOPICS GRID (inside the mobile nav drawer) ═══════════════════════════════════════════ */ .mobile-topics-heading { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); margin: 1.5rem 0 0.75rem; } .mobile-topics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 1rem; padding-bottom: 1.5rem; } .mobile-topics-grid a { min-width: 0; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.3; color: var(--charcoal); padding: 0.4rem 0; border-bottom: 1px solid #f0f0f0; overflow-wrap: break-word; } .mobile-topics-grid a:hover { color: var(--crimson); } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 10px; margin-left: auto; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: var(--transition); } /* ═══════════════════════════════════════════ MOBILE NAV ═══════════════════════════════════════════ */ .mobile-nav { position: fixed; top: 0; right: -100%; width: min(320px, 85vw); height: 100vh; background: #fff; z-index: 2000; padding: 5rem 2.5rem 2.5rem; transition: right 0.35s ease; box-shadow: -4px 0 24px rgba(0,0,0,0.08); overflow-y: auto; font-family: var(--font-sans); } @media (max-width: 900px) { .mobile-nav.open { right: 0; } } .mobile-nav nav { display: flex; flex-direction: column; gap: 0; } .mobile-link { display: block; font-size: 1.1rem; font-weight: 500; color: var(--charcoal); padding: 0.85rem 0; border-bottom: 1px solid #f0f0f0; transition: color var(--transition); } .mobile-link:hover { color: var(--crimson); } .mobile-nav-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; font-size: 1.75rem; cursor: pointer; color: var(--muted); line-height: 1; } .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1999; } @media (max-width: 900px) { .mobile-nav-overlay.open { display: block; } } /* ═══════════════════════════════════════════ SLAB — BASE ═══════════════════════════════════════════ */ .slab { padding: var(--section-py) 0; } .slab-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .slab-image-left .slab-image { order: -1; } .slab .slab-image { align-self: stretch; border-radius: 6px; overflow: hidden; min-height: 380px; min-width: 0; box-shadow: 0 16px 48px rgba(0,0,0,0.10); } .slab .slab-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ═══════════════════════════════════════════ TOPIC SLAB (physics content) — full-width, single column. Title + opening paragraph, then a full-width diagram, then the rest of the prose. Diagrams are content, not decoration — they read better at full slab width than squeezed into a half column. ═══════════════════════════════════════════ */ .topic-slab { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } .topic-slab .topic-text { max-width: 760px; margin: 0 auto; } .topic-slab .topic-text p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.85; color: var(--muted); margin-bottom: 1rem; } .topic-slab .topic-text p:last-child { margin-bottom: 0; } .topic-slab .topic-text p.fig-caption { font-size: 0.92rem; color: var(--crimson); opacity: 0.85; } /* Between-topic milestone — a proper pause between one topic and the next. Four fading bars stacked tightly read as one thicker, simpler divider (a soft tapered edge, without a single flat rectangle), with generous breathing space above and below. Only appears between two topics; a block divider already separates a block's opening topic. */ .topic-milestone { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; max-width: 760px; /* matches the topic-text column width */ margin: 4.5rem auto; } .topic-milestone .milestone-bar { width: 100%; height: 4px; border-radius: 3px; background: linear-gradient(to right, transparent, var(--crimson), transparent); } .topic-diagram { width: 99%; max-width: 752px; /* 99% of the 760px text column */ margin: 2.5rem auto; display: flex; align-items: center; justify-content: center; } .topic-diagram img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; } /* ═══════════════════════════════════════════ TOPIC BANNER — full-bleed title card reusing the hero image as a consistent backdrop across every chapter (the same foreboding, awe- inspiring mood each time), with the chapter title overlaid. The chapter's own illustration is separate — see .topic-diagram below, shown in full, uncropped. ═══════════════════════════════════════════ */ .topic-banner { position: relative; margin-bottom: 3rem; height: min(52vh, 460px); min-height: 320px; overflow: hidden; } /* Full-bleed breakout, split by viewport instead of one 100vw rule for all sizes. 100vw is a well-documented source of real-device-only bugs on Android Chrome (miscalculates against the dynamic toolbar/scrollbar, unlike desktop DevTools' mobile emulation, which never reproduces it) -- confirmed root cause of the site's fixed header rendering at roughly double the real viewport width on an actual Android phone, present on all 35 chapters via this one rule. Below 900px, .topic-slab's padding is a fixed 2rem at every width, so a plain negative margin achieves the identical full-bleed look with no viewport-unit math at all. Above 900px, .topic-slab's centering gap varies with viewport width, so the vw-based technique still does the real work there -- but only on desktop, where this bug doesn't occur. */ @media (max-width: 900px) { .topic-banner { margin-left: -2rem; margin-right: -2rem; } } @media (min-width: 901px) { .topic-banner { width: 100vw; /* margin-based full-bleed breakout (not transform) — .fade-in also animates via `transform`, and only one transform value can win when two rules both set it, so a transform-based centering trick here would silently fight the reveal animation on the same element. */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } } .topic-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .topic-banner::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .topic-banner-caption { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 2rem; } .topic-banner-caption .section-label { color: #fff; opacity: 0.8; margin-bottom: 0.75rem; } .topic-banner-caption h2 { font-family: var(--font-serif); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.55); max-width: 900px; margin: 0; } /* End-of-chapter CTA — same weight as the contact form's "Count me in" button, but dark red to read as a distinct, secondary action. */ .btn-chapter-cta { display: block; width: fit-content; background: var(--dark-red); color: #fff; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; text-align: center; padding: 0.9rem 2rem; border-radius: 4px; margin: 2rem auto 0; transition: background var(--transition); } .btn-chapter-cta:hover { background: var(--dark-red-dk); } /* Row that holds the chapter CTA alongside an experimental second CTA (currently only on topic-1). Falls back to stacked/centered on mobile. */ .topic-cta-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 2rem auto 0; } .topic-cta-row .btn-chapter-cta { margin: 0; } .btn-quiz-cta { background: var(--crimson); box-shadow: 0 4px 14px rgba(165, 28, 48, 0.35); } .btn-quiz-cta:hover { background: var(--crimson-dk); } /* Disabled state — quiz not launched yet. Greyed out, non-interactive. */ .btn-disabled { background: #9a9a9a; color: #f0f0f0; box-shadow: none; cursor: not-allowed; pointer-events: none; } .slab .slab-text { min-width: 0; } .slab .slab-text h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.35; color: var(--charcoal); margin-bottom: 1.25rem; } .slab .slab-text p { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.85; color: var(--muted); margin-bottom: 1rem; } .slab .slab-text p:last-child { margin-bottom: 0; } .slab .slab-subhead { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--charcoal); margin-bottom: 1.25rem !important; } .slab .slab-cta { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--crimson); margin-top: 1.5rem; } /* ── Founder slab ── */ .founder-credentials { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.85rem; } .founder-credentials li { font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.5; color: var(--charcoal); padding-left: 1.1rem; position: relative; } .founder-credentials li::before { content: "·"; position: absolute; left: 0; color: var(--crimson); font-weight: 700; } .cred-note { color: var(--muted); font-size: 0.85rem; } .founder-photo img { object-position: center 8%; } /* ── Section label ── */ .section-label { display: inline-block; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem; } /* ── Pull quote ── */ .pull-quote { border-left: 3px solid var(--crimson); padding: 0.75rem 1.25rem; margin: 1.5rem 0; font-family: var(--font-body); font-size: 1.2rem; font-weight: 500; color: var(--charcoal); line-height: 1.7; } /* ═══════════════════════════════════════════ SLAB 1 — FIRST (FULL-PAGE HERO SLAB) ═══════════════════════════════════════════ */ .slab-first { position: relative; margin-top: var(--header-h); padding: 0; min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .slab-first::after { content: ''; position: absolute; inset: 0; /* Darkened enough that the photo's own dark-olive cast converges on the same neutral near-black used by the dividers/contact/footer, instead of visibly clashing with it. */ background: rgba(0, 0, 0, 0.74); z-index: 1; } .slab-bg-image { position: absolute; inset: 0; z-index: 0; } .slab-bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .slab-first-inner { position: relative; z-index: 2; max-width: 780px; padding: 5rem 2rem; text-align: left; } .slab-first .slab-text .exam-tag { display: inline-block; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem; } .slab-first .slab-text h1 { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; line-height: 1.3; color: #ffffff; text-shadow: 0 2px 20px rgba(0,0,0,0.4); margin-bottom: 1.5rem; } .slab-first .slab-text p { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.88); margin-bottom: 1rem; } .slab-first .slab-text p:last-child { margin-bottom: 0; } .slab-first .pull-quote { border-left-color: var(--crimson); color: #ffffff; font-size: 1.25rem; } .hero-note { font-family: var(--font-sans); font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 2rem !important; } /* ═══════════════════════════════════════════ BLOCK DIVIDER (physicsblock — Mechanics, etc.) Full-bleed dark band, edge to edge — an architectural pause in the page rather than a card floating in white space. Matches the near- black used by the contact slab and footer, so the site reads as a single white/near-black system with one crimson accent throughout. ═══════════════════════════════════════════ */ .slab-divider { background: var(--charcoal); padding: 2rem 0; margin: 3rem 0; } .divider-inner { max-width: 820px; margin: 0 auto; padding: 0 2rem; text-align: center; } .divider-inner h2 { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; letter-spacing: 0.01em; color: #ffffff; } .divider-inner .divider-rule { display: block; width: 56px; height: 3px; background: var(--crimson); margin: 1rem auto 0; border-radius: 2px; } /* ═══════════════════════════════════════════ FADE-IN ANIMATION ═══════════════════════════════════════════ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* ═══════════════════════════════════════════ BACK TO TOP ═══════════════════════════════════════════ */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 44px; height: 44px; border-radius: 50%; background: var(--crimson); color: #fff; border: none; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), background var(--transition); z-index: 900; } .back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--crimson-dk); } /* ═══════════════════════════════════════════ FOOTER ═══════════════════════════════════════════ */ .site-footer { background: var(--charcoal); color: #fff; padding: 4rem 0 0; font-family: var(--font-sans); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } .footer-inner > * { min-width: 0; } .footer-logo { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: #fff; display: block; margin-bottom: 0.75rem; } .footer-tagline { font-size: 0.875rem; color: #888; line-height: 1.6; margin-bottom: 1.25rem; } .footer-social { display: flex; gap: 1rem; flex-wrap: wrap; } .social-link { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #aaa; border: 1px solid #444; padding: 0.3rem 0.75rem; border-radius: 3px; transition: color var(--transition), border-color var(--transition); } .social-link:hover { color: #fff; border-color: #fff; } .footer-nav-title { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--crimson); margin-bottom: 1.25rem; font-weight: 700; } .footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 0.6rem; } .footer-nav a, .footer-contact a { font-size: 0.875rem; color: #aaa; transition: color var(--transition); overflow-wrap: break-word; } .footer-nav a:hover, .footer-contact a:hover { color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; padding: 1.25rem 2rem; } .footer-bottom p { font-size: 0.8rem; color: #ffffff; } /* ═══════════════════════════════════════════ CONTACT FORM SLAB ═══════════════════════════════════════════ */ .slab-contact { background: var(--bg-dark); padding: var(--section-py) 0; } .contact-inner { max-width: 640px; margin: 0 auto; padding: 0 2rem; } .contact-inner h2 { font-family: var(--font-serif); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; color: var(--crimson); line-height: 1.4; margin-bottom: 2rem; } /* ── Click-to-WhatsApp contact slab ── A single, deliberate CTA — centered and weighted like a landing-page moment, not a buried link. WhatsApp's own green is used only here, as a recognition cue that this button leaves the site for WhatsApp. */ .contact-whatsapp { text-align: center; } .contact-whatsapp h2 { margin-bottom: 1rem; } .whatsapp-lead { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.8; color: rgba(255, 255, 255, 0.72); max-width: 480px; margin: 0 auto 2.25rem; } .btn-whatsapp { display: inline-flex; align-items: center; gap: 0.85rem; background: #25D366; color: #fff; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; padding: 1.05rem 2.75rem; border-radius: 50px; box-shadow: 0 10px 28px rgba(37, 211, 102, 0.32); transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-whatsapp:hover { background: #1fb958; transform: translateY(-2px); box-shadow: 0 14px 36px rgba(37, 211, 102, 0.42); } .whatsapp-icon { width: 26px; height: 26px; flex-shrink: 0; } .contact-whatsapp .form-note { margin-top: 1.5rem; text-align: center; } .contact-form { display: flex; flex-direction: column; gap: 1rem; } .contact-form label { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); } .contact-form input, .contact-form textarea { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; color: #fff; outline: none; transition: border-color var(--transition); width: 100%; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--crimson); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.25); } .contact-form textarea { resize: vertical; min-height: 90px; } .btn-submit { background: var(--crimson); color: #fff; border: none; padding: 0.9rem 2rem; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: background var(--transition); margin-top: 0.5rem; align-self: flex-start; } .btn-submit:hover { background: var(--crimson-dk); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .form-note { font-family: var(--font-sans); font-size: 0.82rem; color: rgba(255,255,255,0.75); margin-top: 0.5rem; } .form-success { font-family: var(--font-sans); font-size: 1.1rem; color: rgba(255,255,255,0.85); padding: 1.5rem 0; } .contact-mobile { color: var(--crimson) !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width: 900px) { .slab-first-inner { padding: 3.5rem 1.5rem; } .slab-inner { grid-template-columns: 1fr; } .desktop-nav { display: none; } .topics-dropdown { display: none; } .hamburger { display: flex; } .logo { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { :root { --section-py: 64px; } .slab-first-inner { padding: 2.5rem 1.25rem; } .slab-first .slab-text h1 { font-size: 1.5rem; } .footer-inner { grid-template-columns: 1fr; } .back-to-top { bottom: 1.25rem; right: 1.25rem; } .btn-whatsapp { font-size: 0.95rem; padding: 1rem 1.75rem; white-space: nowrap; } .whatsapp-icon { width: 22px; height: 22px; } }