/* Shared site effects: underwater god-rays background + image lightbox */ .has-godrays{position:relative;isolation:isolate} .godrays-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.92} .has-godrays > *:not(.godrays-canvas){position:relative;z-index:1} /* lightbox popup */ .lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:2rem;background:rgba(5,18,24,.87);backdrop-filter:blur(6px)} .lb.open{display:flex} .lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:94vw} .lb img{max-width:94vw;max-height:86vh;border-radius:10px;box-shadow:0 30px 90px -20px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.12)} .lb figcaption{color:#dbeef1;font-family:"Tajawal",sans-serif;font-size:.95rem;text-align:center} .lb-x{position:absolute;top:1.1rem;inset-inline-start:1.1rem;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center} .lb-x:hover{background:rgba(255,255,255,.22)} [data-lightbox]{cursor:zoom-in} @media (prefers-reduced-motion:reduce){.godrays-canvas{opacity:.72}} /* LTR languages (en/fr/it): Reem Kufi has no Latin glyphs, fall back to a Latin display face */ body.is-ltr h1, body.is-ltr h2, body.is-ltr h3, body.is-ltr h4, body.is-ltr h5, body.is-ltr .kufi, body.is-ltr .brand .name, body.is-ltr .page-head h1, body.is-ltr .foot-brand .name, body.is-ltr .omodal-body h3, body.is-ltr .cat h3, body.is-ltr .stat .n, body.is-ltr .n{ font-family:"Tajawal","Segoe UI",system-ui,sans-serif; letter-spacing:0; } /* brand NAME only: red on light surfaces, yellow on dark page-heads/footer (hero handled inline) */ .brand-accent{color:var(--brand-red)} .page-head .brand-accent, footer .brand-accent{color:var(--brand-yellow)} /* phone field with country code */ /* Phone field: dial code always on the LEFT, number on the RIGHT. The combo is forced LTR so the order never flips with the page direction (RTL Arabic). */ /* ---------- phone field: one control, code inside the number box ---------- The dial code and the number read as a single input: the wrapper carries the border, background and focus ring that .field input/select would normally draw, and the two controls inside are stripped bare and separated by a hairline. Forced LTR so the code always sits on the left, even on the RTL pages. */ .phone-combo{ display:flex;align-items:stretch;direction:ltr; width:100%;overflow:hidden; border:1px solid var(--line);border-radius:11px; background:var(--surface-2); transition:border-color .2s,box-shadow .2s; } .phone-combo:focus-within{ border-color:var(--glacier); box-shadow:0 0 0 3px color-mix(in oklab,var(--glacier) 20%,transparent); } /* out-specifies `.field select` / `.field input` so the inner controls stay flat */ .phone-combo .phone-code{ flex:0 0 auto;width:96px;min-width:0; border:0;border-inline-end:1px solid var(--line);border-radius:0; background:transparent;box-shadow:none; font-family:"IBM Plex Mono","Tajawal",monospace;font-size:.88rem; padding:.8rem .5rem;text-align:center;direction:ltr;color:var(--ink); cursor:pointer;appearance:none;-webkit-appearance:none; /* chevron drawn in, since appearance:none removes the native one */ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%234a636a' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .55rem center;padding-right:1.3rem; } .phone-combo .phone-code:focus{outline:none;border-color:var(--line);box-shadow:none} .phone-combo input[type=tel]{ flex:1 1 auto;min-width:0; border:0;border-radius:0;background:transparent;box-shadow:none; padding:.8rem 1rem;direction:ltr;text-align:left; } .phone-combo input[type=tel]:focus{outline:none;border-color:transparent;box-shadow:none} .phone-combo input[type=tel]::placeholder{text-align:left} @media (max-width:560px){ .phone-combo .phone-code{width:86px;font-size:.8rem;padding-inline:.35rem 1.15rem} .phone-combo input[type=tel]{padding-inline:.75rem} } /* ---------- language switcher: collapsed pill that expands ---------------- The .langs container keeps its existing pill styling (and the header's light/scrolled theming) and now holds a single trigger. The list is absolutely positioned so opening it never changes the header's height. */ .langs{position:relative;display:inline-flex;padding:0;overflow:visible} .lang-trigger{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.05em; /* min-height keeps this a comfortable thumb target on phones; at .42rem padding it measured 26px, well under the ~44px guideline. */ min-height:40px;padding:.4rem .8rem;border:0;border-radius:999px; background:transparent;color:inherit;cursor:pointer;line-height:1; transition:background .2s ease; } .lang-trigger:hover{background:rgba(127,127,127,.12)} /* Header sits transparent over the dark hero at the top of the page, so the collapsed pill reads white there. The two states where the header is on a light surface — scrolled (frosted) and the error pages — flip it back to ink, otherwise it disappears. */ header .langs .lang-trigger{color:#fff} header .langs .lang-trigger:hover{background:rgba(255,255,255,.16)} header.scrolled .langs .lang-trigger{color:var(--ink,#0a2129)} header.scrolled .langs .lang-trigger:hover{background:rgba(10,33,41,.08)} .lang-trigger .flag{font-size:.95rem;line-height:1} .lang-trigger .chev{opacity:.6;transition:transform .25s cubic-bezier(.2,.7,.2,1)} .lang-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)} .lang-list{ position:absolute;top:calc(100% + .5rem);inset-inline-end:0;z-index:70; min-width:132px;padding:.3rem; background:var(--surface,#fff);border:1px solid var(--line,#d8e4e5); border-radius:12px;box-shadow:0 1px 2px rgba(7,26,33,.05),0 18px 40px -18px rgba(7,26,33,.45); display:flex;flex-direction:column;gap:.1rem; opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97);transform-origin:top center; transition:opacity .2s ease,transform .22s cubic-bezier(.2,.7,.2,1),visibility .22s; } .langs.open .lang-list{opacity:1;visibility:visible;transform:none} /* higher specificity than the header's generic `.langs a` theming, which is written for the transparent-over-hero state and would wash these out */ .langs .lang-list a{ display:flex;align-items:center;gap:.55rem; min-height:42px;padding:.5rem .7rem;border-radius:8px; font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em; color:var(--ink,#0a2129);background:transparent; transition:background .16s ease,color .16s ease; } .langs .lang-list a .flag{font-size:1.05rem;line-height:1} .langs .lang-list a .name{ font-family:"Tajawal",sans-serif;font-size:.85rem;letter-spacing:0; } .langs .lang-list a:hover{background:var(--surface-2,#f3f8f8)} .langs .lang-list a.on{background:var(--ink,#0a2129);color:var(--ground,#eaf1f2)} @media (prefers-reduced-motion:reduce){ .lang-list{transition:none} .lang-trigger .chev{transition:none} } /* Spam honeypot. It must be unreachable to people but must NOT extend the layout: the previous `left:-9999px` made the document ~10,000px wide, and on an RTL page that leaves the phone viewport parked in empty space showing a blank screen. This clips the field to a 1px box instead. */ .hp-field{ position:absolute !important; width:1px;height:1px;padding:0;margin:-1px;border:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap; } /* Footer links sit at 35px, under the tap-target guideline. Give them room on touch screens without loosening the desktop layout. */ /* pages.css loads after this file, so these need to out-specify its `.foot-col a` / `.channel` rules rather than merely restate them. */ @media (max-width:920px){ footer .foot-col a{padding:.62rem 0} .channels .channel{padding:.55rem 0} .crumbs a{display:inline-block;padding:.5rem 0} } /* ---------- direction-aware icons ----------------------------------------- The CTA arrow is drawn pointing left, which reads as "forward" in Arabic. When the translator flips the page to LTR (body.is-ltr) forward becomes rightward, so mirror the glyph rather than shipping a second icon. */ .dir-icon{transition:transform .2s ease} body.is-ltr .dir-icon{transform:scaleX(-1)} /* Same idea for the chevron on product cards: it sits at the end of the label, so it must point the way the text runs. */ .card .order-cta::after{content:"\2039"} /* ‹ — RTL default */ body.is-ltr .card .order-cta::after{content:"\203A"} /* › — LTR */ /* ---------- form text: optical vertical centring ------------------------- Tajawal reserves a 10px ascent against a 6px descent, so with line-height :normal the browser centres that asymmetric font box and the ink lands ~1.6px above the middle of the field. IBM Plex Mono (the dial code) leans the other way, ~1.8px low — which left the code and the number visibly out of line inside the merged phone control. Both are corrected by shifting the padding while keeping its total, so field heights do not change. Selectors are deliberately deeper than `.field input` because pages.css loads after this file and would otherwise win. */ form .field input, form .field select, form .field textarea, .phone-combo input[type=tel]{ padding-top:.9rem;padding-bottom:.7rem; } .phone-combo .phone-code{ padding-top:.7rem;padding-bottom:.9rem; } /* Direction: free-text fields carry dir="auto" so the browser follows what is actually typed; email and tel stay LTR in every language. */ input[dir="ltr"], .phone-combo input[type=tel]{direction:ltr;text-align:left} /* ---------- pill text: optical vertical centring -------------------------- Fonts reserve descender space that these short words never use, so the browser centres the line box correctly while the visible glyphs ride high. Corrected by shifting the padding down and keeping its total, so no pill changes height. The amount differs by language, which is why this looked fine in Arabic and wrong the moment you switched: Arabic — طازجة / اطلب الآن leave ~2.2px of the reserve unused -> 1.1px Latin — All / Fresh / Order now have NO descenders at all and waste more of it, measuring 2-3px high at the same 1.1px -> 2.6px Measured on the rendered page in both directions; residuals are under ~0.7px. Selectors are prefixed with `body` because pages.css and the per-page @push blocks load after this file and would otherwise win. */ body .chip {padding-block:calc(.5rem + 1.1px) calc(.5rem - 1.1px)} body .mkt-chip {padding-block:calc(.32rem + 1.1px) calc(.32rem - 1.1px)} body .pill {padding-block:calc(.45rem + 1.1px) calc(.45rem - 1.1px)} body .card .tag{padding-block:calc(.3rem + 1.1px) calc(.3rem - 1.1px)} body .card-go {padding-block:calc(.5rem + 1.1px) calc(.5rem - 1.1px)} body.is-ltr .chip {padding-block:calc(.5rem + 2.6px) calc(.5rem - 2.6px)} body.is-ltr .mkt-chip {padding-block:calc(.32rem + 2.6px) calc(.32rem - 2.6px)} body.is-ltr .pill {padding-block:calc(.45rem + 2.6px) calc(.45rem - 2.6px)} body.is-ltr .card .tag{padding-block:calc(.3rem + 2.6px) calc(.3rem - 2.6px)} body.is-ltr .card-go {padding-block:calc(.5rem + 2.6px) calc(.5rem - 2.6px)} /* The dot in the category badge is geometric, not type — keep it on the true centre rather than following the text nudge. */ body .card .tag i{position:relative;top:-1.1px} body.is-ltr .card .tag i{top:-2.6px} /* ---------- fishing-net divider ------------------------------------------- Lives here rather than in partials/styles.blade.php because the net is now included on every page, and that partial is only loaded by layouts.site — inner pages use layouts.page, so the markup was rendering completely unstyled and pushing all content below the fold. effects.css is pulled in by partials/head, which both layouts share. */ .net-divider{ --net-cord:#5f7f88;--net-rope:#41626b;--net-knot:#37565f; --net-star:#C9885B;--net-shell:#C3CDD0; position:relative;height:clamp(96px,12vw,158px); background:var(--ground);overflow:hidden;margin-top:-1px;pointer-events:none; } .net-divider::before{ content:"";position:absolute;left:0;right:0;top:0;height:52%; background:linear-gradient(to bottom,rgba(5,24,31,.2),rgba(5,24,31,0)); pointer-events:none; } .net-divider svg{position:absolute;inset:0;width:100%;height:100%;display:block} .net-life{position:absolute;inset:0} .net-life .nl{ position:absolute;left:var(--x);top:var(--y); width:var(--s);height:var(--s); transform:translate(-50%,-50%) rotate(var(--r)); filter:drop-shadow(0 2px 4px rgba(7,26,33,.18)); } .net-life .nl svg{position:static;width:100%;height:100%} @media (max-width:640px){ .net-life .nl{--s:32px!important} .net-life .nl:nth-child(3){display:none} } /* ---------- product cards (shared) ---------------------------------------- Used by /products (.card) and the homepage featured strip (.prod). Kept here rather than in either page's own