@media (max-width: 1440px) { .dash-grid--main-side { grid-template-columns: minmax(0, 1fr) 320px; } } @media (max-width: 1366px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); row-gap: var(--sp-8); } .site-nav { gap: 0; } .site-nav__link { padding-inline: var(--sp-2); } } @media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid--main-side, .dash-grid--3 { grid-template-columns: minmax(0, 1fr); } .grid-main-side, .grid-side-main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1024px) { .site-nav, .header-actions .btn--secondary { display: none; } .nav-toggle { display: grid; } .header-actions { margin-inline-start: auto; } .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero--service .hero__grid { grid-template-columns: minmax(0, 1fr); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); } .process__step::before { display: none; } .cta-banner { grid-template-columns: minmax(0, 1fr); } .cta-banner__body { padding: var(--sp-6); } .auth-grid { grid-template-columns: minmax(0, 1fr); } /* ---- The sidebar becomes a drawer ---------------------------------------- Below 1024 the shell collapses to one column and the sidebar leaves the flow entirely. `inset-inline-start` rather than `left` so it slides in from the right in Arabic without a second rule; `max-width: 86vw` so that at 320px the drawer still leaves enough of the page visible to make clear it is an overlay and not the whole screen. ------------------------------------------------------------------------- */ .app-shell, .dash:not(.app-shell) { grid-template-columns: minmax(0, 1fr); } .dash-main { grid-column: 1; } .dash-sidebar { grid-column: 1; position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-drawer-w); max-width: 86vw; z-index: 90; transform: translateX(-100%); transition: transform var(--t-slow); box-shadow: var(--sh-3); } .dash-sidebar.is-open { transform: none; } .dash-sidebar__close { display: grid; } .dash-topbar__menu { display: grid; } /* The scrim only exists while the drawer is open. `hidden` keeps it out of the document for everything else — including the accessibility tree. */ .dash-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(2, 7, 13, .62); } .dash-scrim[hidden] { display: none; } /* Set on by the drawer script. Locking scroll on the page rather than on the drawer is what stops the content behind it moving under the member's finger. */ body.dash-drawer-open { overflow: hidden; } .dash-content { padding: var(--sp-4); } .dash-topbar { padding-inline: var(--sp-4); } .dash-footer { padding-inline: var(--sp-4); } .dash-search input { width: 120px; } } @media (max-width: 860px) { /* The title and the account name cannot both have room. The account name goes: the member knows who they are signed in as, and the panel still carries it. */ .user-menu__id { display: none; } .user-menu__trigger { padding: 4px; border-radius: 50%; } } @media (max-width: 700px) { .dash-search { display: none; } } @media (max-width: 768px) { .section { padding-block: var(--sp-12); } .grid-3, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .section-head { flex-direction: column; align-items: flex-start; } .form-grid { grid-template-columns: minmax(0, 1fr); } .stat { border-inline-end: 0; border-bottom: 1px solid var(--color-border); } .feature { border-inline-end: 0; border-bottom: 1px solid var(--color-border); } .kv { grid-template-columns: minmax(0, 1fr); } .kv dd { text-align: start; padding-top: 0; } .kv dt { border-bottom: 0; padding-bottom: 0; } .dash-grid--2 { grid-template-columns: minmax(0, 1fr); } .bubble { max-width: 90%; } } @media (max-width: 480px) { /* At 375px and below the header cannot hold brand + language + action + menu. The primary action lives in the drawer; the language switch stays, because a bilingual site that hides its language control on a phone is not bilingual. */ .header-actions [data-search] { display: none; } .header-actions .btn--primary { display: none; } .brand img { height: 22px; } .site-header__inner { gap: var(--sp-2); } .lang-switch button { min-width: 34px; } } /* Touch pointers need a larger target than a mouse. 44px is the accepted minimum and is what the specification asks for; plain text links default to their line height, which is roughly 20px and misses often. */ @media (pointer: coarse) { .footer-col a, .footer-bottom a, .nav-dropdown__menu a, .mobile-drawer a, .link-arrow, .trending a, .folder-list__item, .pagination button, .tab, .chip { min-height: 44px; display: flex; align-items: center; } .footer-contact li { min-height: 44px; } .btn--sm { min-height: 44px; } .range-group button { min-height: 40px; min-width: 44px; } .btn-icon { width: 44px; height: 44px; } .switch { width: 52px; height: 30px; } .switch::after { width: 24px; height: 24px; } [dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-22px); } .switch[aria-checked="true"]::after { transform: translateX(22px); } .checkbox input, .radio input { width: 22px; height: 22px; } .footer-social a { width: 44px; height: 44px; } .lang-switch button { min-height: 44px; } /* The logo is a link home; give it a real tap area without changing how it looks. */ .brand { min-height: 44px; display: flex; align-items: center; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); } .dash-grid--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: minmax(0, 1fr); } .process { grid-template-columns: minmax(0, 1fr); } .rule-list { grid-template-columns: minmax(0, 1fr); } .radio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tracker { flex-direction: column; gap: var(--sp-4); } .tracker__step { display: flex; align-items: center; gap: var(--sp-3); text-align: start; } .tracker__step::before { display: none; } .tracker__dot { margin: 0; } .price-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } .btn { width: 100%; } .row .btn, .header-actions .btn, .pagination .btn, .btn--sm { width: auto; } .hero__actions .btn { width: 100%; } .toast-stack { inset-inline-start: var(--sp-4); inset-inline-end: var(--sp-4); max-width: none; } } @media print { .site-header, .site-footer, .dash-sidebar, .to-top, .toast-stack, .btn { display: none !important; } body { background: #fff; color: #000; } }