/* ========================================================= Net Re — Shared Stylesheet Colors, type, and components per BRAND-REFERENCE.md Supports: light/dark (header toggle + prefers-color-scheme) + EN/AR (RTL) THEMING MODEL ------------- A tiny inline script in each page's resolves the theme (saved choice, else the OS setting) and stamps it on before first paint, so there is no flash. The header toggle flips that attribute and saves the choice in localStorage under "netre-theme". The prefers-color-scheme block below is the no-JS fallback and is scoped with :not([data-theme="light"]) so it never fights an explicit choice. ========================================================= */ :root{ /* Brand constants — same in both themes */ --navy: #000023; --blue: #92cbed; --grey: #ebebeb; --mint: #d6f2e3; --white: #ffffff; --line-light: rgba(255,255,255,0.18); /* Gradient ramp stops, for reference: #000023 navy -> #0b1a6b -> #1f4fc4 -> #5fa3dd -> #d6f2e3 mint. The last two are too light to carry white text, which is why the three gradients below differ in where they stop. */ /* Decorative full-range gradient — rules, borders, CTA band. Never carries text. */ --gradient: linear-gradient(135deg, #000023 0%, #0b1a6b 32%, #1f4fc4 58%, #5fa3dd 80%, #d6f2e3 100%); /* Text-bearing gradient surfaces (page heroes, gradient sections): same ramp, veiled with a directional navy scrim so white copy clears WCAG AA (>=4.5:1) everywhere — including the light/mint tail, where plain white was ~1.2:1. */ --gradient-band: linear-gradient(135deg, rgba(0,0,35,0.12) 0%, rgba(0,0,35,0.34) 52%, rgba(0,0,35,0.52) 78%, rgba(0,0,35,0.64) 100%), linear-gradient(135deg, #000023 0%, #0b1a6b 32%, #1f4fc4 58%, #5fa3dd 80%, #d6f2e3 100%); /* Small elements with white text (buttons, tags): ramp truncated before the light stops, so even the far corner stays >=7:1 against white. */ --gradient-cta: linear-gradient(120deg, #000023 0%, #0b1a6b 42%, #1f4fc4 100%); --gradient-soft: linear-gradient(135deg, rgba(0,0,35,0.06) 0%, rgba(146,203,237,0.14) 55%, rgba(214,242,227,0.18) 100%); --radius: 14px; --max: 1180px; --serif: "Playfair Display", "Georgia", serif; --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; --sans-ar: "Cairo", "Tajawal", "Helvetica Neue", Arial, sans-serif; /* Semantic tokens — light mode (default) */ --bg: #ffffff; --surface: #ffffff; --surface-2: var(--grey); --card-on-grey: #ffffff; --panel: var(--grey); /* light emblem panel — light in both themes */ --text: var(--navy); --text-muted: rgba(0,0,35,0.7); --text-faint: rgba(0,0,35,0.62); --border: rgba(0,0,35,0.12); --border-strong: rgba(0,0,35,0.32); --input-bg: #ffffff; /* Readable accent for eyebrows/links on light surfaces. Sky blue (#92cbed) is only 1.75:1 on white, so light mode uses the mid-blue gradient stop. */ --accent: #1f4fc4; /* Gradient used as text fill (numerals, gradient eyebrows) — clipped to the legible half of the ramp so no glyph fades into the background. */ --gradient-text: linear-gradient(135deg, #0b1a6b 0%, #1f4fc4 100%); --callout-bg: var(--mint); --callout-text: var(--navy); /* Navy accent card. Brand navy on a light page is a deliberate strong accent; in dark mode that same navy is within a few points of the page background, so the card disappears — the dark value lifts it back into view. */ --card-navy-bg: var(--navy); --card-navy-border: rgba(255,255,255,0.16); /* Dark palette — values live here once; the two blocks below only assign them, so light and dark can never drift apart. */ --d-bg: #07070f; --d-surface: #0d0e22; --d-surface-2: #12142b; --d-card-on-grey: #191c36; /* cards must sit ABOVE the tinted section, not below it */ --d-text: #f3f4fa; --d-text-muted: rgba(243,244,250,0.72); --d-text-faint: rgba(243,244,250,0.55); --d-border: rgba(255,255,255,0.12); --d-border-strong: rgba(255,255,255,0.38); --d-input-bg: #12142b; --d-accent: var(--blue); --d-gradient-text: linear-gradient(135deg, #5fa3dd 0%, #92cbed 100%); --d-callout-bg: rgba(146,203,237,0.10); --d-card-navy-bg: #171a3d; --d-card-navy-border: rgba(146,203,237,0.22); } /* Dark theme — explicit visitor choice via the header toggle */ :root[data-theme="dark"]{ color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --card-on-grey: var(--d-card-on-grey); --text: var(--d-text); --text-muted: var(--d-text-muted); --text-faint: var(--d-text-faint); --border: var(--d-border); --border-strong: var(--d-border-strong); --input-bg: var(--d-input-bg); --accent: var(--d-accent); --gradient-text: var(--d-gradient-text); --callout-bg: var(--d-callout-bg); --callout-text: var(--d-text); --card-navy-bg: var(--d-card-navy-bg); --card-navy-border: var(--d-card-navy-border); } :root[data-theme="light"]{ color-scheme: light; } /* Dark theme — no-JS fallback. Scoped so an explicit "light" choice always wins. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --card-on-grey: var(--d-card-on-grey); --text: var(--d-text); --text-muted: var(--d-text-muted); --text-faint: var(--d-text-faint); --border: var(--d-border); --border-strong: var(--d-border-strong); --input-bg: var(--d-input-bg); --accent: var(--d-accent); --gradient-text: var(--d-gradient-text); --callout-bg: var(--d-callout-bg); --callout-text: var(--d-text); --card-navy-bg: var(--d-card-navy-bg); --card-navy-border: var(--d-card-navy-border); } } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } html[lang="ar"] body, html[lang="ar"] .btn, html[lang="ar"] .eyebrow, html[lang="ar"] .nav a, html[lang="ar"] .footer-grid h4{ font-family: var(--sans-ar); } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family: var(--sans-ar); font-weight: 700; font-style: normal !important; } body{ margin:0; font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; transition: background 0.15s ease, color 0.15s ease; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } h1,h2,h3,h4{ font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: 0.2px; /* MUST inherit, not hard-set to --text: these headings also sit on the navy hero, navy sections and gradient bands, which set color:#fff on the section. Hard-setting --text made every one of them navy-on-navy in light mode. */ color: inherit; } h1{ font-size: clamp(2.4rem, 4.5vw, 4rem); } h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); } h3{ font-size: 1.3rem; } p{ margin: 0 0 1em; } em{ font-style: italic; } [dir="rtl"] em{ font-style: normal; } .container{ max-width: var(--max); margin: 0 auto; padding: 0 28px; } .eyebrow{ font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); } [dir="rtl"] .eyebrow{ letter-spacing: 0; } .eyebrow--gradient{ color: var(--accent); } @supports ((-webkit-background-clip: text) or (background-clip: text)){ .eyebrow--gradient{ background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } } .section{ padding: 96px 0; } .section--tight{ padding: 64px 0; } .section--grey{ background: var(--surface-2); } .section--grey .card{ background: var(--card-on-grey); } .section--navy{ background: var(--navy); color: var(--white); } .section--gradient{ background: var(--gradient-band); color: var(--white); } /* On any dark/navy/gradient surface the eyebrow reverts to sky blue or white — the light-mode accent is too dark to read there. */ .section--navy .eyebrow, .hero .eyebrow, .card--navy .eyebrow{ color: var(--blue); } .section--gradient .eyebrow, .page-hero .eyebrow{ color: rgba(255,255,255,0.92); } .section--navy .card .num, .hero .card--navy .num{ color: var(--blue); } /* ---------- Buttons ---------- */ .btn{ display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } [dir="rtl"] .btn{ letter-spacing: 0; } .btn--primary{ background: var(--white); color: var(--navy); } .btn--primary:hover{ background: var(--blue); } .btn--gradient{ background: var(--gradient-cta); color: #fff; } .btn--gradient:hover{ filter: brightness(1.18); } .btn--outline{ border-color: rgba(255,255,255,0.45); color: var(--white); background: transparent; } .btn--outline:hover{ background: rgba(255,255,255,0.14); border-color: var(--white); } .btn--dark{ background: var(--navy); color: var(--white); } .btn--dark:hover{ background: #10123f; } /* Outlined button on a light/dark page background — a 12%-alpha border is effectively invisible, so this variant uses the stronger border token. */ .btn--ghost-dark{ border-color: var(--border-strong); color: var(--text); } .btn--ghost-dark:hover{ background: rgba(128,128,160,0.12); border-color: var(--accent); color: var(--accent); } /* ---------- Visible keyboard focus (was suppressed on inputs) ---------- */ :where(a, button, input, select, textarea):focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .site-header :where(a, button):focus-visible, .section--navy :where(a, button):focus-visible, .section--gradient :where(a, button):focus-visible, .page-hero :where(a, button):focus-visible, .hero :where(a, button):focus-visible, .site-footer :where(a, button):focus-visible{ outline-color: var(--blue); } /* ---------- Header / Nav ---------- */ .site-header{ position: sticky; top: 0; z-index: 100; background: var(--navy); border-bottom: 2px solid transparent; border-image: var(--gradient) 1; } .site-header .container{ display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 24px; } .brand{ display:flex; align-items:center; flex: 0 0 auto; } .brand img{ height: 34px; width: 126.5px; } .nav{ display: flex; align-items: center; gap: 26px; flex: 1 1 auto; justify-content: center; min-width: 0; } .nav a{ font-size: 0.76rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.85); padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; } .nav a:hover, .nav a[aria-current="page"]{ color: var(--white); border-image: var(--gradient) 1; border-bottom: 2px solid; } .header-actions{ display:flex; align-items:center; gap:14px; flex: 0 0 auto; } .lang-switch{ font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.85); border: 1.5px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 8px 16px; white-space: nowrap; } .lang-switch:hover{ background: rgba(255,255,255,0.1); color:#fff; } /* ---------- Theme toggle ---------- */ .theme-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; padding: 0; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.9); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover{ background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; } .theme-toggle svg{ width: 17px; height: 17px; display: block; } /* Show the icon for the theme you'd switch TO: moon while light, sun while dark. */ .theme-toggle .icon-sun{ display: none; } .theme-toggle .icon-moon{ display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display: none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display: none; } } /* Re-assert for an explicit light choice inside a dark-preferring OS. */ :root[data-theme="light"] .theme-toggle .icon-sun{ display: none; } :root[data-theme="light"] .theme-toggle .icon-moon{ display: block; } .nav-toggle{ display:none; background:none; border:none; color:var(--white); font-size:1.6rem; cursor:pointer; } @media (max-width: 1180px){ .nav{ position: absolute; top: 84px; left:0; right:0; background: var(--navy); flex-direction: column; align-items: flex-start; padding: 20px 28px 30px; gap: 18px; display: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .nav a{ white-space: normal; } .nav.is-open{ display:flex; } .nav-toggle{ display:block; } .header-actions .btn, .header-actions .lang-switch{ padding: 10px 16px; font-size: 0.68rem; } } @media (max-width: 480px){ .header-actions .btn--outline{ display:none; } .header-actions{ gap: 10px; } .theme-toggle{ width: 34px; height: 34px; } } /* ---------- Hero ---------- */ .hero{ position: relative; overflow: hidden; background: var(--navy); color: var(--white); } .hero-grid{ display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: stretch; min-height: 560px; } .hero-copy{ display:flex; flex-direction: column; justify-content: center; padding: 80px 60px; position: relative; } .hero-copy .lede{ font-size: 1.05rem; color: rgba(255,255,255,0.75); max-width: 440px; } /* Per the brand manual (p.32) this is a LIGHT panel holding the emblem — kept light in dark mode too, so the navy end of the gradient emblem stays visible. */ .hero-visual{ background: radial-gradient(circle at 75% 25%, rgba(146,203,237,0.45), transparent 55%), radial-gradient(circle at 20% 80%, rgba(214,242,227,0.45), transparent 55%), var(--panel); display:flex; align-items:center; justify-content:center; position: relative; min-height: 320px; } .hero-visual .emblem{ width: 260px; height: 226px; } .hero-cta-band{ background: var(--gradient-band); padding: 34px 0; text-align: center; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; min-height: unset; } .hero-copy{ padding: 64px 28px 40px; } .hero-visual{ padding: 40px 0; min-height: 220px; } .hero-visual .emblem{ width: 190px; height: 165px; } } /* Page hero (interior pages, no split) */ .page-hero{ background: var(--gradient-band); color: var(--white); padding: 120px 0 70px; } .page-hero p.lede{ max-width: 640px; color: rgba(255,255,255,0.9); font-size: 1.05rem; } /* ---------- Cards / Grids ---------- */ .grid{ display:grid; gap: 32px; } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .grid--3, .grid--2{ grid-template-columns: 1fr; } } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px; position: relative; overflow: hidden; } .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--gradient); opacity: 0.85; } .card--navy{ background: var(--card-navy-bg); color: var(--white); border-color: var(--card-navy-border); } .card--navy::before{ opacity: 0; } .card--navy h3{ color: var(--white); } .card--navy p{ color: rgba(255,255,255,0.78); } .card--navy p:last-child{ margin-bottom: 0; } .social-links{ display:flex; gap:14px; margin-top:10px; } .social-links a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); color: var(--text); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .social-links a:hover{ color: var(--accent); border-color: var(--accent); background: rgba(31,79,196,0.08); } .card .num{ font-family: var(--serif); font-size: 2.2rem; color: var(--accent); margin-bottom: 10px; } @supports ((-webkit-background-clip: text) or (background-clip: text)){ .card .num{ background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } } html[lang="ar"] .card .num{ font-family: var(--sans-ar); font-weight:800; } /* Light panel framing the standalone emblem (Our Story). Must stay AFTER the .card rules above — it shares their specificity, so source order decides. */ .emblem-panel{ background: var(--panel); border: none; text-align: center; } .emblem-panel::before{ display: none; } .emblem-panel img{ width: 280px; height: 243px; margin: 0 auto; } @media (max-width: 900px){ .emblem-panel img{ width: 200px; height: 174px; } } .divider{ height:1px; background: var(--border); border:none; margin: 0; } /* ---------- Milestone timeline (Our Story) ---------- */ .timeline{ list-style: none; margin: 0; padding: 0; } .timeline li{ display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-inline-start: 24px; padding-bottom: 26px; position: relative; border-inline-start: 2px solid var(--border); } .timeline li:last-child{ padding-bottom: 0; border-inline-start-color: transparent; } .timeline li::before{ content: ""; position: absolute; inset-inline-start: -7px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--gradient-cta); border: 2px solid var(--surface-2); } .timeline-year{ font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--accent); line-height: 1.6; } html[lang="ar"] .timeline-year{ font-family: var(--sans-ar); font-weight: 800; } .timeline-text{ color: var(--text-muted); font-size: 0.95rem; } @media (max-width: 520px){ .timeline li{ grid-template-columns: 1fr; gap: 2px; } } /* ---------- Team ---------- */ .person{ max-width: 820px; } .person + .person{ margin-top: 0; } .person-head{ display:flex; align-items:center; gap: 20px; margin-bottom: 22px; } /* Monogram stands in for a photograph. Swap the span for an when you have headshots — the circle sizing already fits a square image. */ .person-avatar{ flex: 0 0 auto; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--gradient-cta); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 1.6rem; letter-spacing: 1px; /* Thin ring so a light photo background doesn't bleed into a light page */ box-shadow: 0 0 0 1px var(--border), 0 6px 18px rgba(0,0,35,0.14); } .person-avatar img{ width:100%; height:100%; object-fit: cover; display:block; } .person-name{ margin: 0 0 4px; font-size: 1.7rem; } .person-role{ margin: 0; font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } [dir="rtl"] .person-role{ letter-spacing: 0; } .pull-quote{ margin: 26px 0 0; padding: 22px 26px; background: var(--surface-2); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); } .pull-quote p{ font-family: var(--serif); font-size: 1.05rem; font-style: italic; margin: 0 0 12px; } html[lang="ar"] .pull-quote p{ font-family: var(--sans-ar); font-style: normal; } .pull-quote cite{ font-family: var(--sans); font-style: normal; font-size: 0.76rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); } html[lang="ar"] .pull-quote cite{ font-family: var(--sans-ar); letter-spacing: 0; } [dir="rtl"] .pull-quote cite{ letter-spacing: 0; } @media (max-width: 560px){ .person-avatar{ width: 76px; height: 76px; font-size: 1.2rem; } .person-name{ font-size: 1.4rem; } } /* ---------- Stats strip ---------- */ .stats{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; } .stats .stat h3{ color: #fff; margin-bottom: 4px; font-size: 2.1rem; } .stats .stat span{ font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.88); } [dir="rtl"] .stats .stat span{ letter-spacing: 0; } @media (max-width: 700px){ .stats{ grid-template-columns: repeat(2,1fr); } } /* ---------- Footer ---------- */ .site-footer{ background: var(--navy); color: rgba(255,255,255,0.75); padding: 64px 0 28px; border-top: 3px solid transparent; border-image: var(--gradient) 1; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-grid h4{ font-family: var(--sans); font-size: 0.75rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--white); margin-bottom: 16px; } [dir="rtl"] .footer-grid h4{ letter-spacing: 0; } .footer-grid ul{ list-style:none; margin:0; padding:0; } .footer-grid li{ margin-bottom: 10px; font-size: 0.9rem; } .footer-grid a:hover{ color: var(--white); } .footer-brand img{ height: 30px; width: 111.6px; margin-bottom: 14px; } .footer-brand p{ font-size: 0.88rem; max-width: 300px; color: rgba(255,255,255,0.6); } .footer-brand .social-links{ margin-top: 18px; } .footer-brand .social-links a{ width: 34px; height: 34px; border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); } .footer-brand .social-links a:hover{ color: var(--blue); border-color: var(--blue); background: rgba(255,255,255,0.08); } .footer-bottom{ display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 0.78rem; color: rgba(255,255,255,0.5); } .footer-bottom .legal-links{ display:flex; gap:20px; flex-wrap: wrap; } .footer-bottom a:hover{ color: var(--white); } @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } } /* ---------- Forms ---------- */ .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } } .field{ display:flex; flex-direction:column; gap:8px; margin-bottom: 20px; } .field label{ font-size: 0.78rem; font-weight:700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); } .field input, .field select, .field textarea{ font-family: inherit; font-size: 0.95rem; padding: 13px 16px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text); } .field textarea{ resize: vertical; min-height: 130px; } .field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); } .field input::placeholder, .field textarea::placeholder{ color: var(--text-faint); } .field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown){ border-color: #c0392b; } /* Honeypot: must stay in the layout for bots to find and fill, so it is moved off-screen rather than display:none'd, which many bots skip. */ .field--hidden{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Form status message ---------- */ .form-status{ display: none; margin-top: 16px; padding: 13px 18px; border-radius: 8px; font-size: 0.9rem; border-inline-start: 4px solid var(--border-strong); background: var(--surface-2); color: var(--text); } .form-status--pending{ border-inline-start-color: var(--accent); } .form-status--success{ border-inline-start-color: #1e8e5a; background: var(--callout-bg); color: var(--callout-text); } .form-status--error{ border-inline-start-color: #c0392b; background: rgba(192,57,43,0.10); } .btn[disabled]{ opacity: 0.6; cursor: progress; } /* ---------- Legal pages ---------- */ .legal{ max-width: 820px; } .legal h2{ margin-top: 2em; font-size: 1.5rem; } .legal h2:first-of-type{ margin-top: 0; } .legal p, .legal li{ color: var(--text-muted); font-size: 0.98rem; } .legal ul, .legal ol{ padding-inline-start: 22px; } .legal .updated{ font-size: 0.85rem; color: var(--text-faint); margin-bottom: 2.5em; } .callout{ background: var(--callout-bg); border-inline-start: 4px solid var(--blue); border-radius: var(--radius); padding: 20px 26px; font-size: 0.92rem; color: var(--callout-text); margin: 1.6em 0; } /* ---------- Utility ---------- */ .center{ text-align:center; } .mt-0{ margin-top:0; } .muted{ color: var(--text-muted); } .tag{ display:inline-block; font-size: 0.7rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; background: var(--gradient-cta); color: #fff; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; } [dir="rtl"] .tag{ letter-spacing: 0; } /* ---------- Blog / Insights ---------- */ .article{ max-width: 780px; } .article-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; color: var(--text-faint); font-size: 0.85rem; margin-bottom: 1.8em; } .article-meta .dot{ opacity: 0.5; } .article h2{ margin-top: 1.8em; font-size: 1.6rem; } .article h2:first-of-type{ margin-top: 0; } .article h3{ margin-top: 1.4em; font-size: 1.15rem; } .article p, .article li{ color: var(--text-muted); } .article ul, .article ol{ padding-inline-start: 22px; } .article .lede{ color: var(--text); font-size: 1.15rem; } .article-table-wrap{ overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--border); border-radius: var(--radius); } .article-table{ width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; } .article-table th, .article-table td{ text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; } .article-table th{ background: var(--surface-2); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); } .article-table tr:last-child td{ border-bottom: none; } .article-table td:first-child{ font-weight: 600; color: var(--text); } .article-faq{ border-top: 1px solid var(--border); padding-top: 6px; } .article-faq h3{ margin-bottom: 0.4em; } .article-faq > div + div{ margin-top: 1.6em; } .back-link{ display:inline-flex; align-items:center; gap:8px; font-size:0.82rem; font-weight:600; color: var(--text-muted); margin-bottom: 24px; } .back-link:hover{ color: var(--accent); } [dir="rtl"] .back-link svg{ transform: scaleX(-1); } /* Cascading-failure flow diagram: brand-colored, CSS-only, no image weight */ .flow-diagram{ margin: 2em 0; display: flex; flex-direction: column; } .flow-step{ display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; } .flow-step--final{ background: var(--surface-2); border-color: var(--border-strong); } .flow-num{ flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-cta); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 0.85rem; } .flow-step h4{ margin: 0 0 2px; font-size: 0.95rem; } .flow-step p{ margin: 0; font-size: 0.82rem; color: var(--text-faint); } .flow-arrow{ width: 2px; height: 22px; background: var(--border-strong); margin-inline-start: 35px; position: relative; } .flow-arrow::after{ content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--border-strong); } .flow-branch{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .flow-branch-col{ display: flex; flex-direction: column; } .flow-branch-col .flow-arrow{ margin-inline-start: 35px; } @media (max-width: 640px){ .flow-branch{ grid-template-columns: 1fr; } } /* ---------- Cookie consent banner (shown to EEA/UK visitors only) ---------- */ .consent-banner{ position: fixed; inset-inline: 0; bottom: 0; z-index: 999; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,35,0.08); } .consent-banner[hidden]{ display: none; } .consent-banner p{ margin: 0; color: var(--text-muted); font-size: 0.85rem; max-width: 680px; } .consent-banner-actions{ display: flex; gap: 10px; flex-shrink: 0; } .consent-banner-actions .btn{ padding: 10px 22px; font-size: 0.72rem; } @media (max-width: 640px){ .consent-banner{ flex-direction: column; align-items: stretch; text-align: center; } .consent-banner-actions{ justify-content: center; } }