/* ========================================================================== Al Noor Institute — responsive.css Breakpoints: 1200 · 1024 · 900 · 768 · 560 · 380 ========================================================================== */ /* ---------- Large desktop ------------------------------------------------- */ @media (min-width: 1600px) { :root { --container: 1280px; } body { font-size: 17px; } } /* ---------- Small desktop / large tablet ---------------------------------- */ @media (max-width: 1180px) { .nav__list { gap: 0; } .nav__link { padding-inline: 11px; font-size: .92rem; } .brand__sub { display: none; } } @media (max-width: 1024px) { :root { --space-9: 72px; --space-8: 52px; } .hero__grid { gap: var(--space-6); } .split { gap: var(--space-6); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } /* ---------- Tablet: switch to mobile navigation --------------------------- */ @media (max-width: 960px) { .nav { display: none; } .header__actions .btn--primary { display: none; } .hamburger { display: grid; } .header__inner { justify-content: space-between; } .header__actions { margin-inline-start: auto; } .hero__grid { grid-template-columns: 1fr; } .hero__media { order: -1; } .hero__badge { inset-inline-start: var(--space-4); inset-block-end: -18px; } .hero__lead { max-width: none; } .split, .split--reverse { grid-template-columns: 1fr; } .split--reverse .split__media { order: -1; } .split__media { order: -1; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--border); } .grid-3 { grid-template-columns: repeat(2, 1fr); } /* Improved mobile navigation */ .mobile-nav { padding: var(--space-6) var(--space-5); background: var(--white); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); } .mobile-nav__link { padding: 16px var(--space-4); font-size: 1.1rem; border-radius: var(--radius); transition: all .2s var(--ease); } .mobile-nav__link:hover { background: var(--primary-100); color: var(--primary); transform: translateX(4px); } .mobile-nav__link[aria-current="page"] { background: var(--primary); color: var(--white); font-weight: 700; } } /* ---------- Tablet portrait ----------------------------------------------- */ @media (max-width: 768px) { :root { --space-9: 60px; --space-8: 44px; --header-h: 68px; } body { font-size: 15.5px; } .section-head { margin-bottom: var(--space-6); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; gap: var(--space-4); } .form-card { padding: var(--space-5); } /* Stacked toolbar. `flex-wrap` must be cleared: kept together with `column`, it lets items spill into extra columns instead of stacking. `min-inline-size: 0` stops each item from being sized by its widest content (the seven category chips), which pushed the row past the viewport — hidden until now by `overflow-x: hidden` on . `flex: none` is needed because the base `flex: 1 1 320px` becomes a 320px *height* basis once the axis turns vertical. */ .toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; } .search-field { max-inline-size: none; min-inline-size: 0; flex: none; } .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; min-inline-size: 0; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; } .pill-list { grid-template-columns: 1fr; } /* Steps become a compact indicator row */ .step__label { display: none; } .step__dot { inline-size: 36px; block-size: 36px; font-size: .9rem; } .step::before { inset-block-start: 18px; } .cta-band { padding: var(--space-7) var(--space-5); } .footer { margin-top: var(--space-8); } .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } .footer__bottom { flex-direction: column; align-items: flex-start; } .job-card__head { flex-direction: column; align-items: stretch; } .job-card__head .btn { align-self: flex-start; } .event-detail__meta { grid-template-columns: 1fr; gap: var(--space-3); } .event-detail__body { padding: var(--space-5); } /* New components responsive adjustments */ .principal-message { grid-template-columns: 1fr; text-align: center; } .principal-message__media { margin-bottom: var(--space-5); } .principal-message__signature { align-items: center; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .team-card { padding: var(--space-5); } .team-card__avatar { inline-size: 70px; block-size: 70px; } .achievement-card { padding: var(--space-5); } .achievement-card__icon { inline-size: 56px; block-size: 56px; } .testimonial-card { padding: var(--space-5); } .testimonial-card__content::before { font-size: 3rem; inset-block-start: -12px; } .map-container iframe { height: 300px; } /* Topbar & Azhari components responsive */ .topbar__quick { display: none; } .topbar__inner { justify-content: center; text-align: center; } .quran-band__grid { grid-template-columns: 1fr; gap: var(--space-6); } .quran-band { padding: var(--space-6); } .quran-features { grid-template-columns: 1fr; } .azhar-calc__grid { grid-template-columns: 1fr; gap: var(--space-5); } .azhar-calc { padding: var(--space-5); } .azhar-calc__inputs { grid-template-columns: 1fr; } .bus-routes-grid { grid-template-columns: 1fr; } .wa-widget { inset-block-end: calc(var(--space-4) + 50px); inset-inline-end: var(--space-4); } .wa-widget__card { inline-size: calc(100vw - 32px); inset-inline-end: -8px; } } /* ---------- Large phone --------------------------------------------------- */ @media (max-width: 560px) { :root { --space-9: 52px; --space-7: 36px; } .container { padding-inline: var(--space-4); } h1 { font-size: 1.95rem; line-height: 1.35; } h2 { font-size: 1.5rem; } .btn { padding: 12px 20px; font-size: .93rem; } .btn--lg { padding: 14px 24px; font-size: .97rem; } .btn-row .btn { flex: 1 1 100%; } .hero { padding-block: var(--space-7) var(--space-7); } .hero__badge { position: static; margin-top: var(--space-4); max-inline-size: none; } .hero__trust { gap: var(--space-3); flex-direction: column; align-items: flex-start; } .stats__grid { grid-template-columns: 1fr; } .stat { border-inline-start: 0; border-top: 1px solid var(--border); padding-block: var(--space-5); } .stat:first-child { border-top: 0; } .card, .job-card, .vm-card { padding: var(--space-5); } .summary-list div { flex-direction: column; gap: 2px; } .summary-list dd { text-align: start; } .form-nav { flex-direction: column-reverse; } .form-nav .btn { inline-size: 100%; } /* Full-screen sheet on phones — more readable than a floating card. The UA stylesheet caps