/* ========================================================================== ELEXIR HEALTH — CORE DESIGN SYSTEM -------------------------------------------------------------------------- Single source of truth for the whole site. Every token below is extracted verbatim from the approved reference file `elexir-health-landing-3lang-2.html`. No new colours, fonts or spacing conventions are introduced — additional components (mobile drawer, forms, interior page hero) are composed strictly from the existing tokens. CONTENTS 01. Tokens 02. Reset & base 03. Typography primitives 04. Buttons 05. Header / navigation / language switcher 06. Mobile drawer 07. Hero 08. Trust strip 09. Sections & section heads 10. Service grid 11. Patient journey ("how it works") 12. Dark feature band 13. Testimonial 14. CTA band 15. Interior page hero + breadcrumb 16. Forms 17. Accordion / FAQ 18. Footer 19. Micro-interactions (reveal on scroll) 20. Responsive 21. Reduced motion ========================================================================== */ /* ========================================================================== 01. TOKENS ========================================================================== */ :root{ /* --- Palette --------------------------------------------------------- */ --ink:#14201B; /* body text, deepest neutral */ --forest:#1B3A2F; /* primary brand green — headings, dark bands */ --forest-mid:#2C5346; /* mid green — pill text */ --forest-soft:#3E6857; /* soft green — eyebrows, captions */ --sage-bg:#F1F4EC; /* page background */ --paper:#FBFAF5; /* card / surface background */ --amber:#B8863B; /* accent — primary highlight */ --amber-deep:#8F6425; /* accent dark — italic accents, focus ring */ --amber-pale:#E9DCC0; /* accent pale — on dark backgrounds */ --live:#4E8B6C; /* "line open" status dot */ --line: rgba(20,32,27,0.14); --line-soft: rgba(20,32,27,0.08); /* --- Type ------------------------------------------------------------ */ --display: "Fraunces", serif; /* headings, stats, pull-quotes */ --body: "Inter", sans-serif; /* all running text, buttons */ --mono: "IBM Plex Mono", monospace; /* eyebrows, tags, meta, numbers */ /* --- Layout ---------------------------------------------------------- */ --wrap: 1180px; /* --- Radii (reference uses a very tight radius scale) ----------------- */ --r-xs: 2px; /* focus ring */ --r-sm: 3px; /* buttons, tags, small surfaces */ --r-md: 4px; /* panels on dark */ --r-lg: 6px; /* large CTA card */ --r-pill: 100px; /* --- Elevation (the reference uses exactly one shadow) ---------------- */ --shadow-float: 0 8px 24px -12px rgba(20,32,27,0.25); /* --- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(.4,0,.2,1); --t-fast: .18s ease; --t-mid: .25s ease; } /* Arabic typographic swap — same tokens, different families. */ body.lang-ar{ --display: "Amiri", serif; --body: "IBM Plex Sans Arabic", sans-serif; --mono: "IBM Plex Sans Arabic", sans-serif; } /* ========================================================================== 02. RESET & BASE ========================================================================== */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--sage-bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:font-family .1s; } body.lang-ar{ line-height:1.85; } img,svg{ display:block; max-width:100%; } a{ color:inherit; } p{ margin:0; } .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; } ::selection{ background:var(--amber-pale); color:var(--forest); } :focus-visible{ outline:2px solid var(--amber-deep); outline-offset:3px; border-radius:var(--r-xs); } /* Skip link — visually hidden until focused. */ .skip-link{ position:absolute; inset-inline-start:16px; top:-60px; z-index:200; background:var(--forest); color:var(--paper); font-family:var(--body); font-size:14px; font-weight:600; padding:11px 18px; border-radius:var(--r-sm); text-decoration:none; transition:top var(--t-fast); } .skip-link:focus{ top:12px; } /* Screen-reader-only utility. */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================================== 03. TYPOGRAPHY PRIMITIVES ========================================================================== */ h1,h2,h3{ font-family:var(--display); font-weight:560; line-height:1.08; margin:0; letter-spacing:-0.01em; } /* Arabic needs looser leading and no negative tracking. */ body.lang-ar h1, body.lang-ar h2, body.lang-ar h3{ letter-spacing:0; font-weight:700; line-height:1.35; } .eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--forest-soft); } body.lang-ar .eyebrow{ letter-spacing:0; font-size:13px; } /* Italic amber accent used inside headings. */ .accent{ font-style:italic; color:var(--amber-deep); font-weight:450; } body.lang-ar .accent{ font-style:normal; } /* Live status dot with pulsing ring. */ .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 0 rgba(78,139,108,0.5); animation:pulse 2.4s infinite; flex-shrink:0; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(78,139,108,0.45); } 70%{ box-shadow:0 0 0 7px rgba(78,139,108,0); } 100%{ box-shadow:0 0 0 0 rgba(78,139,108,0); } } /* ========================================================================== 04. BUTTONS ========================================================================== */ .btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:600; font-size:14.5px; padding:13px 24px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .btn:hover{ transform:translateY(-1px); } .btn-primary{ background:var(--forest); color:var(--paper); } .btn-primary:hover{ background:var(--ink); } .btn-line{ background:transparent; color:var(--forest); border-color:var(--line); } .btn-line:hover{ border-color:var(--forest); } /* ACCESSIBILITY NOTE — the reference file used `background:var(--amber)` with paper-coloured text, which measures 3.09:1 and fails WCAG AA (4.5:1) for 14.5px text. Shifting the resting state to --amber-deep gives 5.00:1 while keeping light text on gold. Hover then deepens to --ink. To restore the exact reference appearance, swap the two lines below back to `background:var(--amber)` / `:hover{ background:var(--amber-deep) }`. */ .btn-amber{ background:var(--amber-deep); color:var(--paper); } .btn-amber:hover{ background:var(--ink); } /* Outline button placed on the dark forest band. */ .btn-line-invert{ background:transparent; color:var(--paper); border-color:rgba(251,250,245,0.35); } .btn-line-invert:hover{ border-color:var(--paper); } /* WhatsApp — deliberately uses the brand palette rather than WhatsApp green, so the button sits inside the design system. The glyph carries the meaning. */ .btn-wa{ background:var(--forest); color:var(--paper); } .btn-wa:hover{ background:var(--ink); } .btn-wa-line{ background:transparent; color:var(--forest); border-color:var(--line); } .btn-wa-line:hover{ border-color:var(--forest); } /* Floating WhatsApp launcher, bottom corner, follows text direction. To remove it site-wide, delete the block from the four HTML pages — no other code depends on it. */ .wa-float{ position:fixed; inset-inline-end:20px; bottom:20px; z-index:60; width:52px; height:52px; border-radius:50%; background:var(--forest); color:var(--paper); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-float); text-decoration:none; transition:transform var(--t-fast), background var(--t-fast); } .wa-float:hover{ background:var(--ink); transform:translateY(-2px); } .wa-float svg{ width:26px; height:26px; } /* Text link with a trailing arrow that nudges on hover. */ .link-arrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body); font-size:14px; font-weight:600; color:var(--forest); text-decoration:none; transition:gap var(--t-fast), color var(--t-fast); } .link-arrow svg{ transition:transform var(--t-fast); } .link-arrow:hover{ color:var(--amber-deep); } .link-arrow:hover svg{ transform:translateX(3px); } [dir="rtl"] .link-arrow svg{ transform:scaleX(-1); } [dir="rtl"] .link-arrow:hover svg{ transform:scaleX(-1) translateX(3px); } /* ========================================================================== 05. HEADER / NAVIGATION / LANGUAGE SWITCHER ========================================================================== */ header{ position:sticky; top:0; z-index:50; background:rgba(241,244,236,0.86); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color var(--t-mid), background var(--t-mid); } header.scrolled{ border-bottom:1px solid var(--line); background:rgba(241,244,236,0.97); } .nav{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; } .logo{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--forest); flex-shrink:0; } .logo-mark{ font-family:"Fraunces", serif; font-weight:650; font-size:22px; letter-spacing:-0.01em; } .logo-mark em{ font-style:italic; color:var(--amber-deep); font-weight:450; } .nav-links{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; } .nav-links a{ text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink); opacity:0.8; position:relative; padding-bottom:3px; transition:opacity var(--t-fast); white-space:nowrap; } .nav-links a:hover{ opacity:1; } /* Underline marker for the page you are currently on. */ .nav-links a[aria-current="page"]{ opacity:1; } .nav-links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--amber); } .nav-right{ display:flex; align-items:center; gap:18px; flex-shrink:0; } .nav-phone{ font-family:var(--mono); font-size:13px; color:var(--forest); text-decoration:none; display:flex; align-items:center; gap:7px; direction:ltr; } .lang-switch{ display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; background:var(--paper); } .lang-btn{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.03em; padding:6px 10px; border-radius:var(--r-pill); border:none; background:transparent; color:var(--forest-soft); cursor:pointer; transition:background var(--t-fast), color var(--t-fast); } .lang-btn:hover{ color:var(--forest); } .lang-btn.active{ background:var(--forest); color:var(--paper); } /* Hamburger — hidden on desktop, shown below 980px. */ .nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--forest); cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); } .nav-toggle:hover{ border-color:var(--forest); } .nav-toggle span{ display:block; width:16px; height:1.5px; background:currentColor; position:relative; transition:background var(--t-fast); } .nav-toggle span::before, .nav-toggle span::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:currentColor; transition:transform var(--t-fast), top var(--t-fast); } .nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; } .nav-toggle[aria-expanded="true"] span{ background:transparent; } .nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); } /* ========================================================================== 06. MOBILE DRAWER ========================================================================== */ .drawer{ position:fixed; inset:76px 0 0 0; z-index:49; background:var(--sage-bg); border-top:1px solid var(--line); padding:28px 0 40px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid); } .drawer.open{ opacity:1; visibility:visible; transform:translateY(0); } .drawer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .drawer-links a{ display:block; font-family:var(--display); font-size:26px; font-weight:560; color:var(--forest); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--line-soft); transition:color var(--t-fast); } .drawer-links a:hover{ color:var(--amber-deep); } .drawer-foot{ margin-top:32px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; } /* The header hides .nav-phone below 720px; inside the drawer it stays visible. */ .drawer .drawer-phone{ display:flex; font-size:14px; } /* ========================================================================== 07. HERO ========================================================================== */ .hero{ position:relative; padding:76px 0 90px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.05fr 0.85fr; gap:56px; align-items:center; } .status-pill{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:0.03em; background:var(--paper); border:1px solid var(--line); padding:7px 14px 7px 12px; border-radius:var(--r-pill); color:var(--forest-mid); margin-bottom:26px; } body.lang-ar .status-pill{ font-size:13px; } .hero h1{ font-size:clamp(36px, 4.4vw, 56px); color:var(--forest); max-width:15ch; } .hero-sub{ margin-top:22px; font-size:17.5px; color:var(--ink); opacity:0.78; max-width:46ch; line-height:1.6; } body.lang-ar .hero-sub{ line-height:1.9; } .hero-actions{ display:flex; align-items:center; gap:16px; margin-top:34px; flex-wrap:wrap; } /* Opacity removed from the reference value (0.85 → 1) so 13px text clears WCAG AA: 4.13:1 → 5.69:1. The colour token is unchanged. */ .hero-note{ font-size:13px; color:var(--forest-soft); } .hero-stats{ display:flex; gap:34px; margin-top:52px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; } .stat b{ display:block; font-family:var(--display); font-size:26px; font-weight:560; color:var(--forest); direction:ltr; } .stat span{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--forest-soft); } body.lang-ar .stat span{ letter-spacing:0; font-size:12px; } /* --- Vial illustration (brand device) --------------------------------- */ .vial-stage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:420px; } .vial-halo{ position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(184,134,59,0.16), rgba(184,134,59,0) 70%); } .vial-svg{ position:relative; width:210px; z-index:2; overflow:visible; } /* --- Vial motion ------------------------------------------------------ Three independent, slow animations. Nothing loops in sync, so the illustration never looks mechanical. 1. .vial-liquid the level rises and falls by 2px, as if settling. Safe because the liquid rect extends well past the vial base and the clipPath trims it — the old version moved the whole shape and left a visible gap underneath. 2. .vial-wave the surface slides sideways. One wave period is 80 user units, so translating exactly -80px restarts invisibly. 3. .vial-bubble bubbles rise to the surface and fade out, staggered. -------------------------------------------------------------------- */ .vial-liquid{ animation:vialSettle 7s ease-in-out infinite; transform-origin:center bottom; } @keyframes vialSettle{ 0%,100%{ transform:translateY(0); } 50% { transform:translateY(-2px); } } .vial-wave{ animation:vialWave 9s linear infinite; } @keyframes vialWave{ from{ transform:translateX(0); } to { transform:translateX(-80px); } } .vial-bubble{ animation:vialBubble 5s ease-in infinite; opacity:0; } .vial-bubble.b2{ animation-duration:6.4s; animation-delay:1.6s; } .vial-bubble.b3{ animation-duration:7.2s; animation-delay:3.1s; } @keyframes vialBubble{ 0% { transform:translateY(4px) scale(0.7); opacity:0; } 15% { opacity:0.6; } 70% { opacity:0.45; } 100%{ transform:translateY(-30px) scale(1); opacity:0; } } /* The highlight brightens very slightly, which reads as light moving on glass. */ .vial-shine{ animation:vialShine 6.5s ease-in-out infinite; } @keyframes vialShine{ 0%,100%{ stroke-opacity:0.45; } 50% { stroke-opacity:0.75; } } .vial-tag{ position:absolute; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 12px; font-family:var(--mono); font-size:11px; color:var(--forest); box-shadow:var(--shadow-float); } .vial-tag.t1{ top:14%; left:2%; } .vial-tag.t2{ bottom:10%; right:0%; } [dir="rtl"] .vial-tag.t1{ left:auto; right:2%; } [dir="rtl"] .vial-tag.t2{ right:auto; left:0%; } .vial-tag .label-dot{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--amber); margin-inline-end:6px; } /* ========================================================================== 08. TRUST STRIP ========================================================================== */ .trust{ background:var(--forest); color:var(--paper); padding:20px 0; } .trust .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 34px; } .trust-item{ display:flex; align-items:baseline; gap:10px; font-size:13.5px; opacity:0.88; } .trust-item b{ font-family:var(--mono); font-weight:500; color:var(--amber-pale); letter-spacing:0.08em; text-transform:uppercase; font-size:11.5px; white-space:nowrap; } /* ========================================================================== 09. SECTIONS & SECTION HEADS ========================================================================== */ section{ padding:96px 0; } .section-head{ max-width:640px; margin-bottom:56px; } .section-head .eyebrow{ margin-bottom:14px; display:block; } .section-head h2{ font-size:clamp(28px, 3vw, 38px); color:var(--forest); } .section-head p{ margin-top:16px; font-size:16px; opacity:0.75; max-width:52ch; } /* Head with a trailing action on the far side (desktop only). */ .section-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap; } .section-head-row .section-head{ margin-bottom:0; } /* Background variants — all drawn from the two surface tokens. */ .bg-paper{ background:var(--paper); } .bg-sage{ background:var(--sage-bg); } /* ========================================================================== 10. SERVICE GRID The 1px gap over a --line background produces hairline dividers. ========================================================================== */ .service-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .service-card{ background:var(--paper); padding:34px 30px 30px; display:flex; flex-direction:column; gap:16px; transition:background .2s ease; text-decoration:none; color:inherit; } .service-card:hover{ background:var(--sage-bg); } .service-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .service-icon{ width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--forest); flex-shrink:0; transition:border-color var(--t-fast), color var(--t-fast); } .service-card:hover .service-icon{ border-color:var(--amber-pale); color:var(--amber-deep); } .service-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber-deep); border:1px solid var(--amber-pale); background:rgba(184,134,59,0.08); padding:4px 8px; border-radius:var(--r-pill); white-space:nowrap; } body.lang-ar .service-tag{ letter-spacing:0; font-size:11.5px; } .service-card h3{ font-size:19px; color:var(--forest); font-weight:560; } body.lang-ar .service-card h3{ font-size:20px; } .service-card p{ font-size:14.5px; opacity:0.72; line-height:1.55; } body.lang-ar .service-card p{ line-height:1.8; } .service-card .link-arrow{ margin-top:auto; padding-top:6px; } /* A card that spans two columns so the 7 services + CTA cell fill the 3-column grid exactly (3 + 3 + [wide card | CTA]) with no empty tracks. */ @media (min-width: 981px){ .service-card.wide{ grid-column: span 2; } .service-card.wide p{ max-width:52ch; } } /* Final cell of the grid used as an inline call to action. */ .service-cta{ background:var(--sage-bg); padding:34px 30px 30px; display:flex; flex-direction:column; justify-content:center; gap:14px; } .service-cta h3{ font-size:19px; color:var(--forest); font-weight:560; } .service-cta p{ font-size:14.5px; opacity:0.72; } .service-cta .btn{ align-self:flex-start; margin-top:6px; } /* ========================================================================== 11. PATIENT JOURNEY ("how it works") ========================================================================== */ .how{ background:var(--sage-bg); } /* Ordered/unordered lists used purely for semantics, not for markers. */ .plain-list{ list-style:none; margin:0; padding:0; } .how-list{ display:grid; grid-template-columns:repeat(3, 1fr); gap:44px; } .how-list.cols-4{ grid-template-columns:repeat(4, 1fr); gap:32px; } .how-step{ position:relative; padding-top:26px; } .how-step::before{ content:attr(data-n); font-family:var(--mono); font-size:12px; color:var(--amber-deep); letter-spacing:0.08em; direction:ltr; display:inline-block; } .how-step h3{ font-size:21px; color:var(--forest); margin-top:14px; } .how-list.cols-4 .how-step h3{ font-size:19px; } .how-step p{ margin-top:10px; font-size:14.5px; opacity:0.75; } /* Hairline connector between steps. */ .how-line{ height:1px; background:var(--line); position:absolute; top:6px; left:34px; right:-22px; } [dir="rtl"] .how-line{ left:-22px; right:34px; } .how-step:last-child .how-line{ display:none; } /* ========================================================================== 12. DARK FEATURE BAND ========================================================================== */ .band-dark{ background:var(--forest); color:var(--paper); position:relative; overflow:hidden; } .band-dark::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 20%, rgba(184,134,59,0.14), transparent 70%); } [dir="rtl"] .band-dark::before{ background:radial-gradient(600px 300px at 15% 20%, rgba(184,134,59,0.14), transparent 70%); } .band-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .band-dark h2{ color:var(--paper); font-size:clamp(24px,2.6vw,34px); max-width:16ch; } .band-dark > .wrap > div > p, .band-grid > div > p{ margin-top:18px; opacity:0.78; font-size:15.5px; max-width:44ch; } .band-dark .eyebrow{ color:var(--amber-pale); } .check-list{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; } .check-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; opacity:0.9; } .check{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--amber-pale); } .panel-card{ background:rgba(251,250,245,0.05); border:1px solid rgba(251,250,245,0.16); border-radius:var(--r-md); padding:32px; } .panel-card h3{ color:var(--paper); font-size:22px; margin-top:12px; font-weight:560; } .panel-card p{ opacity:0.75; font-size:14.5px; margin-top:10px; } .panel-card .btn{ margin-top:22px; } /* ========================================================================== 13. TESTIMONIAL ========================================================================== */ .testimonial{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .testimonial .wrap{ max-width:820px; text-align:center; } .quote-figure{ margin:0; } .testimonial blockquote{ font-family:var(--display); font-style:italic; font-weight:450; font-size:clamp(21px,2.4vw,28px); color:var(--forest); line-height:1.42; margin:0; } body.lang-ar .testimonial blockquote{ font-style:normal; line-height:1.7; } .testimonial cite{ display:block; margin-top:26px; font-style:normal; font-family:var(--mono); font-size:12px; letter-spacing:0.05em; color:var(--forest-soft); } body.lang-ar .testimonial cite{ letter-spacing:0; } /* ========================================================================== 14. CTA BAND ========================================================================== */ .cta-band{ background:var(--sage-bg); padding:90px 0; } .cta-inner{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; } .cta-inner h2{ font-size:clamp(23px,2.4vw,30px); color:var(--forest); max-width:18ch; } .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; } /* ========================================================================== 15. INTERIOR PAGE HERO + BREADCRUMB ========================================================================== */ .page-hero{ padding:64px 0 56px; background:var(--sage-bg); } .page-hero h1{ font-size:clamp(32px,3.8vw,46px); color:var(--forest); max-width:18ch; margin-top:14px; } .page-hero p{ margin-top:20px; font-size:17px; opacity:0.78; max-width:56ch; line-height:1.6; } .crumbs{ display:flex; align-items:center; gap:9px; list-style:none; margin:0; padding:0; } .crumbs li{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--forest-soft); } body.lang-ar .crumbs li{ letter-spacing:0; font-size:13px; text-transform:none; } .crumbs a{ text-decoration:none; opacity:0.75; transition:opacity var(--t-fast); } .crumbs a:hover{ opacity:1; } .crumbs li[aria-current]{ color:var(--amber-deep); } /* ========================================================================== 15b. SERVICE DETAIL SECTIONS (services.html) Two columns: narrative on one side, "what's included" on the other. Alternating surfaces come from .bg-paper / .bg-sage on the
. ========================================================================== */ .svc{ padding:72px 0; border-top:1px solid var(--line); scroll-margin-top:96px; } .svc-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start; } .svc-num{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:var(--amber-deep); direction:ltr; display:block; margin-bottom:12px; } .svc h2{ font-size:clamp(24px,2.6vw,32px); color:var(--forest); max-width:18ch; } .svc-lead{ margin-top:18px; font-size:16.5px; opacity:0.78; max-width:50ch; line-height:1.6; } body.lang-ar .svc-lead{ line-height:1.9; } .svc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } /* Panel listing what the service covers. */ .svc-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:30px 28px; } .bg-paper .svc-panel{ background:var(--sage-bg); } .svc-panel h3{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--forest-soft); font-weight:500; margin-bottom:18px; } body.lang-ar .svc-panel h3{ letter-spacing:0; font-size:12.5px; text-transform:none; } /* Check list on light surfaces — the pale accent is reserved for dark bands. */ .check-list.on-light{ margin-top:0; } .check-list.on-light li{ opacity:1; font-size:14.5px; } .check-list.on-light .check{ color:var(--amber-deep); } /* ========================================================================== 15c. SIMPLE CONTENT BLOCKS (about.html, contact.html) ========================================================================== */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } .split-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; } /* Contact page: wider form column, narrower details column. NOTE — this must be a class, never an inline style. An inline grid-template-columns beats the media query below on specificity, which left the contact page stuck in two columns on phones. */ .split-form{ grid-template-columns:1.15fr 0.85fr; } /* Section titles that sit above a prose column. */ .split-title{ margin-top:14px; font-size:clamp(26px,2.8vw,34px); color:var(--forest); } .split-title.sm{ font-size:clamp(22px,2.2vw,26px); } .prose p + p{ margin-top:16px; } .prose p{ font-size:16px; opacity:0.78; line-height:1.65; max-width:56ch; } body.lang-ar .prose p{ line-height:1.95; } .value h3{ font-size:19px; color:var(--forest); margin-top:14px; } .value p{ margin-top:10px; font-size:14.5px; opacity:0.75; } .value .service-icon{ margin-bottom:2px; } /* Contact detail rows. */ .contact-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; } .contact-list li{ display:flex; gap:14px; align-items:flex-start; } .contact-list .service-icon{ margin-top:2px; } .contact-list dt, .contact-list .c-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--forest-soft); display:block; margin-bottom:4px; } body.lang-ar .contact-list .c-label{ letter-spacing:0; font-size:12.5px; text-transform:none; } .contact-list .c-value{ font-size:15.5px; color:var(--ink); text-decoration:none; } .contact-list a.c-value:hover{ color:var(--amber-deep); text-decoration:underline; } /* ========================================================================== 15d. LEGAL PAGES Long-form prose. Deliberately narrow measure and generous leading — these are documents people need to actually read, not skim. ========================================================================== */ .legal{ background:var(--paper); padding:72px 0 96px; } .legal .wrap{ max-width:760px; } .legal-updated{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--forest-soft); padding-bottom:28px; margin-bottom:44px; border-bottom:1px solid var(--line); } body.lang-ar .legal-updated{ letter-spacing:0; font-size:13px; text-transform:none; } .legal section{ padding:0; margin-bottom:44px; scroll-margin-top:96px; } .legal h2{ font-size:22px; color:var(--forest); padding-bottom:0; margin-bottom:16px; display:flex; gap:12px; align-items:baseline; } .legal h2 .n{ font-family:var(--mono); font-size:12px; color:var(--amber-deep); letter-spacing:0.08em; direction:ltr; flex-shrink:0; } .legal h3{ font-size:17px; color:var(--forest); margin:26px 0 10px; } .legal p{ font-size:15.5px; line-height:1.7; opacity:0.82; } body.lang-ar .legal p{ line-height:2; } .legal p + p{ margin-top:14px; } .legal ul, .legal ol{ margin:14px 0 0; padding-inline-start:22px; } .legal li{ font-size:15.5px; line-height:1.7; opacity:0.82; margin-bottom:9px; } .legal li::marker{ color:var(--amber-deep); } .legal a{ color:var(--forest); text-decoration:underline; text-underline-offset:2px; } .legal a:hover{ color:var(--amber-deep); } /* Definition-style table for the company identification block. */ .legal-dl{ margin:18px 0 0; padding:24px 26px; background:var(--sage-bg); border-radius:var(--r-md); } .legal-dl > div{ display:flex; gap:16px; padding:9px 0; flex-wrap:wrap; } .legal-dl > div + div{ border-top:1px solid var(--line-soft); } .legal-dl dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--forest-soft); flex:0 0 190px; padding-top:3px; } body.lang-ar .legal-dl dt{ letter-spacing:0; font-size:12.5px; text-transform:none; } .legal-dl dd{ margin:0; font-size:15px; flex:1 1 240px; } /* Values still awaiting the client's real data. */ .todo{ font-family:var(--mono); font-size:12.5px; background:rgba(184,134,59,0.1); border:1px solid var(--amber-pale); color:var(--amber-deep); padding:2px 8px; border-radius:var(--r-sm); } /* Callout for the points that matter most. */ .legal-note{ margin-top:18px; padding:20px 22px; background:var(--sage-bg); border-inline-start:2px solid var(--amber); border-radius:0 var(--r-sm) var(--r-sm) 0; } .legal-note p{ font-size:14.5px; opacity:0.88; } /* Table of contents at the top of each legal document. */ .legal-toc{ margin:0 0 44px; padding:24px 26px; background:var(--sage-bg); border-radius:var(--r-md); } .legal-toc h2{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--forest-soft); font-weight:500; margin-bottom:14px; display:block; } body.lang-ar .legal-toc h2{ letter-spacing:0; font-size:12.5px; text-transform:none; } .legal-toc ol{ margin:0; padding-inline-start:20px; } .legal-toc li{ margin-bottom:7px; font-size:14.5px; } /* ========================================================================== 16. FORMS ========================================================================== */ .form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px; } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .field{ display:flex; flex-direction:column; gap:7px; } .field.full{ grid-column:1 / -1; } .field label, .field .field-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--forest-soft); display:block; } body.lang-ar .field label, body.lang-ar .field .field-label{ letter-spacing:0; font-size:12.5px; text-transform:none; } .field .req{ color:var(--amber-deep); } .field input, .field select, .field textarea{ font-family:var(--body); font-size:15px; color:var(--ink); background:var(--sage-bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; width:100%; min-height:47px; transition:border-color var(--t-fast), background var(--t-fast); } /* Without appearance:none a