/* Non-invasive accessibility and layout safeguards for the legacy public theme. */ html { scroll-behavior: smooth; } img, video { max-width: 100%; height: auto; } /* Prevent the intrinsic logo dimensions from expanding the header. */ .navbar .nav-container { min-height: 68px; display: flex; align-items: center; } .navbar .navbar-brand { width: auto; margin: 0 1rem 0 0; flex: 0 0 auto; } [dir="rtl"] .navbar .navbar-brand { margin: 0 0 0 1rem; } .navbar .navbar-brand > img { display: block; width: min(170px, 18vw); height: auto; max-height: 52px; object-fit: contain; } .skip-link { position: fixed; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 10000; padding: .75rem 1rem; border-radius: .5rem; background: #1a2332; color: #fff; transform: translateY(-180%); transition: transform .2s ease; } .skip-link:focus { transform: translateY(0); color: #fff; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid #f2d427; outline-offset: 3px; } @media (max-width: 575px) { .navbar .nav-container { min-height: 56px; } .navbar .navbar-brand > img { width: 126px; max-height: 40px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* * Owl carousel nav arrows. Replaces the UIkit icon component that used to * supply these; see public/assets/js/main.js. uk-margin-small-* provided the * horizontal gap, so it is reproduced here rather than left to UIkit. */ .owl-nav-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 10px; } /* * Structural leftovers from UIkit's card component, whose 240 KB stylesheet was * removed from the eight product pages. assets/css/style.css already defines the * look of .uk-card / .uk-card-body / .uk-card-primary / .uk-section itself — in * fact it defines them so as to cancel UIkit (transparent background, no shadow, * tighter padding), but it loaded first and lost every specificity tie, so the * site never actually got the styling it asked for. These are the only two * declarations UIkit contributed that style.css does not restate. */ .uk-card { position: relative; } .uk-card-body::after { content: ""; display: table; clear: both; } /* * Public contact form (site/partials/contact-form.blade.php). * * Written with logical properties (inline-start/end, text-align: start) rather * than left/right, so the same rules serve the English and Arabic pages — is already set from the locale in layouts/master.blade.php. This is the * pattern the extracted page CSS uses; it is why those pages needed no RTL fork. */ .nn-contact-form { padding: 64px 0 88px; background: #f8fafc; } .nn-contact-form__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 800; color: #1a2332; margin-bottom: 8px; text-align: start; } .nn-contact-form__lead { color: #475569; margin-bottom: 28px; text-align: start; } .nn-contact-form__form { background: #fff; border-radius: 14px; border-top: 5px solid #f2d427; box-shadow: 0 10px 40px rgba(0,0,0,.06); padding: 32px; } .nn-contact-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .nn-contact-form__field { display: flex; flex-direction: column; text-align: start; } .nn-contact-form__field--full { grid-column: 1 / -1; } @media (max-width: 640px) { .nn-contact-form__grid { grid-template-columns: 1fr; } .nn-contact-form__form { padding: 22px; } } .nn-contact-form__field label { font-weight: 700; color: #1a2332; margin-bottom: 6px; font-size: .95rem; } .nn-contact-form__field input, .nn-contact-form__field textarea { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; color: #1a2332; background: #fff; text-align: start; } .nn-contact-form__field input:focus-visible, .nn-contact-form__field textarea:focus-visible { outline: 2px solid #2c95d3; outline-offset: 1px; border-color: #2c95d3; } .nn-contact-form__field [aria-invalid="true"] { border-color: #dc2626; } .nn-contact-form__error { color: #dc2626; font-size: .85rem; margin-top: 6px; } .nn-contact-form__errors { list-style: none; margin: 0; padding: 0; text-align: start; } .nn-contact-form__submit { margin-top: 24px; } .nn-contact-form__note { color: #64748b; font-size: .85rem; margin: 14px 0 0; text-align: start; } /* * The honeypot. Kept in the layout and merely invisible rather than * display:none — some bots skip display:none fields specifically because they * recognise the trick. */ .nn-contact-form__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; } /* * A heading typeset on two lines. * * The markup used to be two sibling

elements — one * heading split in half so each word got its own line. They stacked because * .lifebox-title is `display: flex; flex-direction: column` and each was a flex * ITEM, not because of anything on the elements themselves. * * They are now one

holding two spans, so re-establish the column here or * both words would run onto a single line. margin-bottom:0 matches what * .highlight-text was contributing when it sat on the headings directly. */ .split-heading { display: flex; flex-direction: column; margin-bottom: 0; } /* * Headings promoted to

for semantics only. * * Nine public pages had NO

at all — as wrong for search and for * heading-navigation as the homepage's seven. On the detail pages the page's * real title was already on screen, just marked up as an h2 or h3, so the fix * is to promote that element rather than invent a new heading. * * assets/css/style.css sizes headings by tag (h1 60px, h2 48px, h3 40px), so a * bare promotion would enlarge the title. These classes pin the size the * element had before, making the change invisible. */ h1.was-h2 { font-size: 48px; } h1.was-h3 { font-size: 40px; } /* h5 was 20px; the promotion to h1 is semantic only. */ h1.was-h5 { font-size: 20px; }