/* ============================================================ BLAKFX KSA - responsive layer ------------------------------------------------------------ The pages are authored with inline styles, so every rule here uses !important. The dc runtime re-serialises style attributes on hydration, so each selector is emitted twice: once for the authored form and once for the normalised form. Breakpoints <= 1180px narrower gutters <= 900px tablet: wide grids -> 2 up, split layouts stack <= 640px phone: single column, compact type and spacing The mobile navigation rules live at the bottom and only apply once mobile-nav.js has set .mnav on , so the menu never disappears if that script fails to run. ============================================================ */ /* ---------- universal safety ---------- */ img, svg, video, canvas, image-slot { max-width: 100%; } /* The hero images carry a decorative outline drawn deliberately outside their own box. overflow-x: clip trims that ink at the viewport edge without turning into a scroll container, so the sticky header keeps working. Structural overflow is fixed at source below, not here. */ html, body { overflow-x: clip; } /* long unbroken tokens - product codes, URLs, Arabic compounds - must not be able to set a floor under the page width */ body { overflow-wrap: break-word; } /* ============ <= 1180px ============ */ @media (max-width: 1180px) { [style*="max-width:1240px"], [style*="max-width: 1240px"] { padding-left: 32px !important; padding-right: 32px !important; } /* the decorative outline around the SOVRALINK hero image is drawn outside its box; once the gutter narrows it has to come in or it pushes the page sideways */ [style*="inset:-24px"], [style*="inset: -24px"] { inset: -10px !important; } } /* ============ <= 900px - tablet ============ */ @media (max-width: 900px) { /* two-up and asymmetric split layouts stack */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns: repeat(2, 1fr)"], [style*="grid-template-columns:1.4fr 1fr"], [style*="grid-template-columns: 1.4fr 1fr"], [style*="grid-template-columns:1.3fr 1fr"], [style*="grid-template-columns: 1.3fr 1fr"], [style*="grid-template-columns:1.15fr 1fr"], [style*="grid-template-columns: 1.15fr 1fr"], [style*="grid-template-columns:1.1fr 1fr"], [style*="grid-template-columns: 1.1fr 1fr"], [style*="grid-template-columns:1fr 1.3fr"], [style*="grid-template-columns: 1fr 1.3fr"], [style*="grid-template-columns:1fr 1.1fr"], [style*="grid-template-columns: 1fr 1.1fr"], [style*="grid-template-columns:190px 1fr 300px"], [style*="grid-template-columns: 190px 1fr 300px"] { grid-template-columns: 1fr !important; } /* wide card grids drop to two up. This block follows the one above on purpose: "1fr 1fr" is a substring of "1fr 1fr 1fr", so the three-column rule has to be the one that wins on source order. */ [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"], [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"], [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"], [style*="grid-template-columns:repeat(7,1fr)"], [style*="grid-template-columns: repeat(7, 1fr)"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; } /* grid items default to min-width:auto, so a single wide word or a long button can push a track past the container and scroll the whole page sideways. This is the standard release valve. */ [style*="display:grid"] > *, [style*="display: grid"] > *, [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0 !important; } /* feature cards that span several tracks on desktop go full width instead - a "span 3" inside a two- or one-column grid would otherwise force extra implicit columns and scroll the page */ [style*="grid-column:span"], [style*="grid-column: span"] { grid-column: 1 / -1 !important; } /* section rhythm */ [style*="padding:110px 48px 0"], [style*="padding: 110px 48px 0px"] { padding: 84px 32px 0 !important; } [style*="padding:120px 48px 0"], [style*="padding: 120px 48px 0px"] { padding: 84px 32px 0 !important; } [style*="padding:110px 48px 120px"], [style*="padding: 110px 48px 120px"] { padding: 84px 32px 96px !important; } [style*="padding:120px 48px 120px"], [style*="padding: 120px 48px 120px"] { padding: 84px 32px 96px !important; } [style*="padding:130px 48px 140px"], [style*="padding: 130px 48px 140px"] { padding: 88px 32px 100px !important; } [style*="padding:96px 48px 88px"], [style*="padding: 96px 48px 88px"] { padding: 76px 32px 68px !important; } [style*="padding:96px 48px 130px"], [style*="padding: 96px 48px 130px"] { padding: 76px 32px 96px !important; } [style*="padding:96px 48px 120px"], [style*="padding: 96px 48px 120px"] { padding: 76px 32px 92px !important; } [style*="padding:64px 48px 120px"], [style*="padding: 64px 48px 120px"] { padding: 60px 32px 92px !important; } [style*="padding:26px 48px"], [style*="padding: 26px 48px"] { padding: 26px 32px !important; } } /* ============ <= 640px - phone ============ */ @media (max-width: 640px) { /* 1. every grid collapses; the exceptions below win on source order */ [style*="display:grid"], [style*="display: grid"] { grid-template-columns: 1fr !important; } /* 2. exception: four-up header stat strips stay two up - four stacked headline figures reads worse than a 2x2 block */ [style*="display:grid"]:has(> [style*="padding:26px 0"]), [style*="display: grid"]:has(> [style*="padding: 26px 0px"]) { grid-template-columns: 1fr 1fr !important; } /* 3. type scale */ h1[style] { font-size: clamp(30px, 8.4vw, 40px) !important; line-height: 1.2 !important; } h2[style] { font-size: clamp(23px, 6.2vw, 28px) !important; line-height: 1.2 !important; } h3[style] { font-size: 16px !important; } /* Arabic keeps the taller leading the AR pages author - ascenders and ligatures crowd, and can clip, at the Latin line-heights above */ html[dir="rtl"] h1[style] { line-height: 1.5 !important; } html[dir="rtl"] h2[style] { line-height: 1.45 !important; } p[style*="font-size:16.5px"], p[style*="font-size: 16.5px"], p[style*="font-size:17px"], p[style*="font-size: 17px"] { font-size: 15px !important; } /* 4. section rhythm */ [style*="padding:110px 48px 0"], [style*="padding: 110px 48px 0px"] { padding: 64px 20px 0 !important; } [style*="padding:120px 48px 0"], [style*="padding: 120px 48px 0px"] { padding: 64px 20px 0 !important; } [style*="padding:110px 48px 120px"], [style*="padding: 110px 48px 120px"] { padding: 64px 20px 72px !important; } [style*="padding:120px 48px 120px"], [style*="padding: 120px 48px 120px"] { padding: 64px 20px 72px !important; } [style*="padding:130px 48px 140px"], [style*="padding: 130px 48px 140px"] { padding: 64px 20px 76px !important; } [style*="padding:96px 48px 88px"], [style*="padding: 96px 48px 88px"] { padding: 56px 20px 52px !important; } [style*="padding:96px 48px 130px"], [style*="padding: 96px 48px 130px"] { padding: 56px 20px 76px !important; } [style*="padding:96px 48px 120px"], [style*="padding: 96px 48px 120px"] { padding: 56px 20px 72px !important; } [style*="padding:64px 48px 120px"], [style*="padding: 64px 48px 120px"] { padding: 48px 20px 72px !important; } [style*="padding:26px 48px"], [style*="padding: 26px 48px"] { padding: 22px 20px !important; } [style*="padding:0 48px"], [style*="padding: 0px 48px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="padding:48px"], [style*="padding: 48px"] { padding: 36px 20px !important; } /* 5. card padding */ [style*="padding:44px 52px"], [style*="padding: 44px 52px"] { padding: 30px 22px !important; } [style*="padding:52px 56px"], [style*="padding: 52px 56px"] { padding: 30px 22px !important; } [style*="padding:40px 44px 28px"], [style*="padding: 40px 44px 28px"] { padding: 24px 20px 20px !important; } [style*="padding:36px 40px 26px"], [style*="padding: 36px 40px 26px"] { padding: 22px 20px 18px !important; } [style*="padding:26px 32px"], [style*="padding: 26px 32px"] { padding: 20px 18px !important; } [style*="padding:22px 28px"], [style*="padding: 22px 28px"] { padding: 18px 18px !important; } [style*="padding:30px"], [style*="padding: 30px"] { padding: 20px !important; } [style*="padding:28px"], [style*="padding: 28px"] { padding: 20px !important; } [style*="padding:26px"], [style*="padding: 26px"] { padding: 20px !important; } [style*="padding:26px 22px 16px"], [style*="padding: 26px 22px 16px"] { padding: 20px 18px 15px !important; } [style*="padding:30px 26px 18px"], [style*="padding: 30px 26px 18px"] { padding: 22px 18px 15px !important; } /* stat cells: drop the vertical rules (LTR and the RTL mirror) and the horizontal inset. This sits after the card-padding block on purpose - [style*="padding:26px"] above also matches these cells. */ [style*="padding:26px 0"], [style*="padding: 26px 0px"], [style*="padding:26px 32px 26px 0"], [style*="padding: 26px 32px 26px 0px"] { padding-left: 0 !important; padding-right: 0 !important; border-right: none !important; border-left: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } /* 6. tall media frames */ [style*="height:640px"], [style*="height: 640px"] { height: 300px !important; } [style*="height:520px"], [style*="height: 520px"] { height: 260px !important; } [style*="height:500px"], [style*="height: 500px"] { height: 250px !important; } [style*="height:480px"], [style*="height: 480px"] { height: 250px !important; } [style*="height:460px"], [style*="height: 460px"] { height: 240px !important; } [style*="height:420px"], [style*="height: 420px"] { height: 230px !important; } [style*="height:400px"], [style*="height: 400px"] { height: 220px !important; } [style*="height:380px"], [style*="height: 380px"] { height: 215px !important; } [style*="height:210px"], [style*="height: 210px"] { height: 170px !important; } [style*="height:190px"], [style*="height: 190px"] { height: 160px !important; } [style*="height:180px"], [style*="height: 180px"] { height: 150px !important; } [style*="height:160px"], [style*="height: 160px"] { height: 140px !important; } [style*="height:150px"], [style*="height: 150px"] { height: 135px !important; } [style*="height:140px"], [style*="height: 140px"] { height: 130px !important; } /* 7. WhatsApp button sits clear of the thumb rail */ a[href^="https://wa.me/"] { width: 50px !important; height: 50px !important; bottom: 18px !important; } a[href^="https://wa.me/"] svg { width: 26px; height: 26px; } } /* ============ SOVRALINK coverage diagram ============ The rings are drawn at fixed pixel radii, so below tablet the floating labels are dropped and the rings pulled in. The three coverage-layer cards directly underneath carry the same text. */ @media (max-width: 820px) { #sovra-coverage-map { height: 320px !important; } #sovra-coverage-map .sovra-map-label { display: none !important; } #sovra-coverage-map .sovra-ring-outer { width: 300px !important; height: 300px !important; } #sovra-coverage-map .sovra-ring-mid { width: 190px !important; height: 190px !important; } #sovra-coverage-map .sovra-ring-inner { width: 86px !important; height: 86px !important; } } /* ============ navigation ============ Without JS the link row simply wraps onto a second line - usable, just tall. With JS, gains .mnav and the row becomes a toggled panel. */ .mnav-toggle { display: none; } @media (max-width: 1080px) { /* no-JS fallback: let the bar grow instead of overflowing */ html:not(.mnav) nav > div { height: auto !important; flex-wrap: wrap !important; gap: 14px !important; padding-top: 12px !important; padding-bottom: 12px !important; } html:not(.mnav) nav > div > div { flex-wrap: wrap !important; gap: 16px 18px !important; margin-left: 0 !important; margin-right: 0 !important; } html.mnav .mnav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: auto; padding: 0; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 2px; background: transparent; color: #E8ECF2; cursor: pointer; } html.mnav .mnav-toggle:hover { border-color: rgba(255, 255, 255, 0.4); } html.mnav .mnav-toggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; } html.mnav nav > div > div { display: none !important; } html.mnav nav.mnav-open > div > div { display: flex !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; padding: 6px 20px 20px !important; max-height: calc(100vh - 76px); overflow-y: auto; background: #0A0E17; border-bottom: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); } html.mnav nav.mnav-open > div > div > a { padding: 14px 2px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; font-size: 16px !important; } /* language switch and the briefing CTA are the last two links */ html.mnav nav.mnav-open > div > div > a:nth-last-child(2) { align-self: flex-start; margin-top: 14px; padding: 8px 14px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; font-size: 14px !important; } html.mnav nav.mnav-open > div > div > a:last-child { margin-top: 14px; padding: 15px 20px !important; border: 0 !important; border-radius: 2px !important; text-align: center; } }