/* * ============================================================ * RESPONSIVE OVERRIDES * All media queries in one place, ordered from largest to smallest. * ============================================================ */ /* ---- ≤ 1400px ---- */ @media (max-width: 1400px) { .hero-title { font-size: 26px; } .hero-description { font-size: 13.5px; line-height: 2; margin-bottom: 16px; } /* Intro + three actions + statement box must fit the 440px-tall card, with all three actions on one row of the 400px-wide panel. */ .hero-content-panel { top: 50%; } .hero-actions { gap: 8px; } .hero-actions .btn-cta { padding: 10px 20px; font-size: 13px; } .hero-placeholder-box { padding: 14px 16px; margin-top: 16px; gap: 10px; } .hero-placeholder-icon { width: 26px; height: 26px; } .hero-placeholder-icon svg { width: 13px; height: 13px; } .hero-placeholder-text { font-size: 11.5px; line-height: 1.8; } } /* ---- ≤ 1200px ---- */ @media (max-width: 1200px) { .features-section { grid-template-columns: repeat(2, 1fr); } .glass-3d-icon { display: none; } .self-study-card, .online-class-card { padding-left: 280px !important; } } /* ---- ≤ 991px (Tablet / small laptop) ---- */ @media (max-width: 991px) { /* Header: all header breakpoints live in header.css. */ /* Hero — static mobile/tablet layout (the desktop-only scroll shrink animation never ran below this breakpoint even before it was removed entirely — see sections.css). */ .hero-scroll-track { height: auto !important; margin-bottom: -15px; margin-top: 120px; } .hero-section { height: auto; min-height: auto; padding: 0 20px; } .hero-visual-card { width: 100%; height: auto; max-height: none; padding: 30px; display: flex; flex-direction: column; gap: 30px; position: relative; top: auto; left: auto; transform: none; border-radius: var(--radius-md) !important; } /* .hero-visual-card-backdrop is an absolutely-positioned sibling with a fixed size, so it can't follow the stacked content here (title/text spilled out above it and the photo below it on phones). Below this breakpoint the card paints the same glass box itself and grows with its content instead. */ .hero-visual-card-backdrop { display: none; } .hero-visual-card { background-color: var(--glass-bg); border: 1px solid var(--neutral-border); border-top: 1px solid var(--glass-border-highlight); box-shadow: var(--glass-shadow); transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* Was a fixed 350px height — fine for the old bg+cutout composite, which tolerated any box shape since the character was independently anchored within it. The new single banner photo's crop math (see .hero-banner-img in sections.css) instead needs a predictable container aspect ratio to stay framed correctly. 4:3 here is deliberately wider than the ≤768px mobile square below: this tablet-width range should reveal a bit more of the artwork on each side, per the "iPad-ish widths show more of the scene" requirement. */ .unified-poster-container { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; right: auto; top: auto; border-radius: var(--radius-md) !important; } .hero-content-panel { position: relative; width: 100% !important; left: auto; top: auto; transform: none; opacity: 1; pointer-events: auto; text-align: right; } /* برگ برنده cards (tablet + phone, ≤991px): the desktop hover-reveal card (icon/title centered, description absolutely-positioned and hidden until :hover — see sections.css) doesn't have an equivalent on a touch screen at ANY width in this range, tablet included — there's no hover state to trigger the reveal, so the description was either invisible, or stuck permanently mid-transition, depending on the browser. Confirmed reported on a real tablet as well as phones, not just the narrower ≤768px range this rule used to be scoped to. Fixed by giving up on the hover choreography entirely at this breakpoint: every child goes back to plain static flow (icon, then title, then description, stacked top to bottom) instead of being absolutely positioned for a two-state hover animation, so everything is simply always visible — nothing to reveal, nothing that can get stuck. This also removes the swipeable one-card carousel the ≤768px range used to become (arrows/dots/scroll-snap, below) — a fixed, always-visible grid the user can only vertical- scroll past like the rest of the page, never a horizontal swipe surface, per explicit request. */ .features-carousel-wrap { display: contents; } .features-arrow, .features-dots { display: none; } .features-section { grid-template-columns: repeat(2, 1fr); gap: 14px; } .feature-card { min-height: 0; align-items: flex-start; justify-content: flex-start; text-align: right; padding: 22px 20px; } .feature-card:hover { transform: none; } /* no hover lift on a device with no real hover pointer */ .feature-icon-badge { margin-bottom: 12px; } .feature-card:hover .feature-icon-badge { transform: none; } .feature-glow-icon { display: none; } /* a hover-triggered flourish with nothing left to react to */ .feature-title { max-width: none; font-size: 15.5px; } .feature-content, .feature-card:hover .feature-content { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; } .feature-more-hint { display: none; } /* "there's more, hover to reveal it" — nothing is hidden anymore */ .info-card { padding: 35px 25px; min-height: auto; flex-direction: column; } .info-content-left { display: none; } /* Placement banner */ .placement-card { padding: 34px 22px; } .placement-content-right { align-items: center; text-align: center; } .placement-heading { font-size: 54px; white-space: nowrap; } .placement-title { font-size: 20px; } .placement-subtitle { text-align: center; } .placement-cta { width: 100%; justify-content: center; } /* Feedback banner */ .feedback-banner-card { flex-direction: column; text-align: center; gap: 24px; padding: 34px 24px; } .feedback-banner-content { align-items: center; text-align: center; } .feedback-banner-title { font-size: 19px; } .feedback-banner-subtitle { text-align: center; font-size: 14px; } /* Online class card */ .online-class-card { padding: 40px 30px 0 30px !important; flex-direction: column !important; min-height: auto !important; position: relative; } .online-class-card .info-title { font-size: 28px; } .online-class-card .info-subtitle { font-size: 16px; margin-bottom: 5px; } .online-class-card .info-body-container.online-class-body { flex-direction: column; align-items: center; text-align: center; gap: 15px; } .online-class-card .online-class-action { position: absolute; bottom: 60px; right: 30px; margin-top: 0; z-index: 10; } .online-class-card .online-kid-wrapper { position: relative; height: 250px; left: auto; bottom: -48px; margin-top: 20px; justify-content: flex-end; width: 100%; z-index: 20; } /* Self-study card */ .self-study-card { padding: 40px 30px 0 30px !important; flex-direction: column !important; min-height: auto !important; position: relative; } .self-study-card .info-title { font-size: 28px; } .self-study-card .info-subtitle { font-size: 16px; margin-bottom: 5px; } .self-study-card .info-body-container.self-study-body { flex-direction: column; align-items: center; text-align: center; gap: 15px; } .self-study-card .self-study-action { position: absolute; bottom: 60px; right: 30px; margin-top: 0; padding-right: 0; z-index: 10; } .self-study-card .kid-image-wrapper { position: relative; height: 220px; left: auto; bottom: 0; margin-top: 20px; justify-content: flex-end; width: 100%; z-index: 20; } /* Footer — tablet keeps the attached tab-strip composition (it is not yet the accordion below), but is its own reinterpretation rather than a shrunk desktop: About stacks its media above the text, Contact drops to a single column with the map moved below, and the team cards narrow. */ /* Re-measured for this breakpoint's own layout (Contact's single-column grid + map-below-items makes it noticeably taller here than at desktop width) so the three tabs still share one consistent hub height instead of the desktop value under- or over-shooting it. */ .footer-panel-content { padding: 28px 24px; min-height: 545px; } .footer-about { flex-direction: column; align-items: stretch; gap: 24px; text-align: center; } .footer-about-media { flex: none; margin: 0 auto; } .footer-about-badge { left: 50%; transform: translateX(-50%); bottom: -14px; } .footer-contact-grid { grid-template-columns: 1fr 1fr; } .footer-location { grid-column: 1 / 3; grid-row: auto; } /* 110px, not the card's own half-width (96px) — see the footer.css note on .footer-team-track's desktop padding: it has to also cover the ~10.5px of overhang scale(1.1) adds to a 192px card at this width, or the first/last card clips against its neighbouring arrow. */ .footer-team-track { padding-inline: calc(50% - 110px); } .footer-team-card { width: 192px; padding: 22px 14px; } } /* ---- ≤ 768px (Mobile) ---- */ @media (max-width: 768px) { /* Hero banner: square, matching the "770×770" head-to-waist crop this composition is designed around — see .hero-banner-img in sections.css and the ≤991px tablet override above (4:3) this narrows further at phone widths. */ .unified-poster-container { aspect-ratio: 1 / 1; } /* Phones: the header bar keeps only the brand and the menu button (everything else is in the sheet — see header.css). */ .header-actions { display: none; } /* برگ برنده cards (phone): single column below tablet width — the ≤991px rule above already switched every card to the static, always-visible, non-hover, non-carousel layout; this just narrows the 2-column grid down to 1 so a card's title/description keep a comfortable reading width instead of compressing into a 2-up grid this narrow. */ .features-section { grid-template-columns: 1fr; } /* Online card (mobile): the desktop line breaks would leave orphans at this width, so the text flows freely, and it keeps clear of the character that overlaps the card from below. */ .online-class-card .info-body-text br { display: none; } .online-class-card .info-body-text-block { margin-bottom: 34px; } /* Online class card (mobile) */ .online-class-card { padding: 30px 20px 0 20px !important; } .online-class-card .online-kid-wrapper { height: 260px !important; margin-top: -30px; bottom: -47px; left: -52px; justify-content: flex-end; } .online-class-card .info-body-text { font-size: 15px; line-height: 1.8; } .online-class-card .online-class-action { height: auto; bottom: 35px; right: 20px; } /* Self-study card (mobile) */ .self-study-card { padding: 30px 20px 0 20px !important; } .self-study-card .kid-image-wrapper { height: 240px !important; margin-top: -30px; bottom: 0; left: -60px; justify-content: flex-end; } .self-study-card .info-body-text { font-size: 15px; line-height: 1.8; } .self-study-card .self-study-action { height: auto; bottom: 35px; right: 20px; } /* Reserve button inside cards */ .btn-dark-reserve { padding: 12px 20px; font-size: 15px; } /* Footer wave: a touch shorter at mobile widths so it stays a subtle transition rather than a proportionally-oversized shape. 40px is still an exact multiple of the pattern's 20px tile, so the seam between .footer-wave-shape and the footer box stays aligned. Overriding the --footer-wave-h custom property (rather than the .footer-wave/-shape top/height directly) also shrinks .site-footer's margin-top to match in the same rule — the two can never drift back out of sync into a bare, unpatterned gap above the wave. */ .site-footer { --footer-wave-h: 40px; } /* Footer (mobile) — a genuine recomposition, not a scaled-down tab-hub: the grid collapses to a single column so each tab and the content block that immediately follows it in the DOM (footer.js's own `.footer-tab` / `.footer-panel-content` pairing needs no change) stack together into one bordered, expand/collapse accordion row per section, with a chevron that flips to show open/closed state. Same colors, typography and tap/swipe interactions as desktop — just a different layout for a narrow screen. */ .footer-top { align-items: flex-start; flex-direction: column; gap: 10px; } .footer-tabs { display: block; } /* --footer-accordion-radius: a smaller, one-off radius (the shared --radius-sm token is 16px, meant for much larger cards/buttons) — on these short accordion rows 16px on all 4 corners read closer to a pill than an intentional card curve. 12px keeps the same rounded language as the rest of the site without that over-rounded look. */ .footer-tab { width: 100%; flex-direction: row; justify-content: flex-start; text-align: right; font-size: 13px; padding: 15px 16px; gap: 12px; border: 1px solid var(--neutral-border); border-radius: 12px; margin-bottom: 8px; } .footer-tab-icon { width: 19px; height: 19px; } .footer-tab-chevron { display: flex; margin-inline-start: auto; } .footer-tab.active { border-color: var(--accent-gold); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } .footer-tab.active .footer-tab-chevron { transform: rotate(180deg); } /* Slightly roomier than the tab rows' own padding so the open panel reads as a deliberately larger content area, not just the same tab chrome continued downward — modest (4px/2px), not a resize. */ .footer-panel-content { padding: 24px 18px; min-height: 0; border: 1px solid var(--accent-gold); border-top: none; border-radius: 12px; border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 8px; } /* .footer-hub's own card chrome (background/border/radius/shadow) was designed for the desktop tab-strip-fused-to-a-panel look. On mobile .footer-tabs/.footer-panel-content already turn into their own individually-bordered, individually-rounded accordion rows (above), so leaving the outer card active too nests two different corner radii inside one another — .footer-hub's large var(--radius-lg) curve around the first tab and last panel's own smaller, straight- edged corners, which is exactly the jagged/mismatched-corner look. Stripping the outer card back to a plain wrapper at this breakpoint leaves only the accordion rows' own consistent radius. */ .footer-hub { background: none; border: none; border-radius: 0; box-shadow: none; overflow: visible; } .footer-about-img { height: 160px; } /* Contact panel (mobile): the 6 items are too long as icon+label+value rows at this width, so they become tiles in a 2-row × 3-column grid — icon plus its short label (the value itself is hidden; the tile is still the link) — with the location block, address included, kept as its own full-width row underneath. */ .footer-contact-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 12px 10px; } .footer-contact-grid .footer-contact-item { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px 6px 12px; text-align: center; } .footer-contact-grid .footer-contact-item .footer-contact-text { align-items: center; } .footer-contact-grid .footer-contact-item .footer-contact-text strong { font-size: 12px; line-height: 1.5; } .footer-contact-grid .footer-contact-item .footer-contact-text span { display: none; } .footer-location { grid-column: 1 / -1; grid-row: auto; } /* Team (phones): no carousel — a one-card-at-a-time slider left each card ~100px wide at phone widths, so names/roles wrapped into fragments or got clipped (a member without a photo then read as an empty box). Instead every member is a full-width row: photo (or initial) beside their name and role, all three visible at once. */ .footer-team { display: block; } .footer-team-arrow, .footer-team-dots { display: none; } .footer-team-track { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: visible; scroll-snap-type: none; mask-image: none; -webkit-mask-image: none; } .footer-team-card, .footer-team-card.is-active { width: 100%; flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 3px; padding: 14px 16px; text-align: right; opacity: 1; transform: none; cursor: default; border-color: var(--neutral-border); background-color: var(--color-surface-elevated); box-shadow: none; } .footer-team-avatar, .footer-team-card.is-active .footer-team-avatar { grid-row: 1 / span 2; width: 54px; height: 54px; font-size: 20px; transform: none; } /* The founder (centre card of the desktop carousel) leads the list. */ .footer-team-card[data-index="1"] { order: -1; } .footer-team-card h4, .footer-team-card.is-active h4 { margin: 0; align-self: end; font-size: 15px; color: var(--primary-navy); } .footer-team-role, .footer-team-card.is-active .footer-team-role { align-self: start; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); } } /* ---- Touch devices wider than 991px (e.g. a touchscreen desktop monitor): the ≤991px rule above already covers phone/tablet widths; this catches a touch-primary screen the width breakpoint doesn't — no hover to open a برگ برنده card, so its description is always shown. ---- */ @media (hover: none) { .feature-content { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; } .feature-more-hint { display: none; } }