/* ═══════════════════════════════════════════════════════════════════════════ urologyclinic-lb.com — Dr. Imad Ghantous · Urology & Men's Health DESIGN SYSTEM STYLESHEET (single source for the whole site) Ported faithfully from _reference/original-design.html (the approved React prototype). Theme = white / blue / grey academic clinical. Backgrounds alternate #fff and var(--off-white). Mobile-first; no horizontal overflow at 360px. Bilingual EN + Arabic with CSS-toggled, RTL-mirrored layouts. TABLE OF CONTENTS 1. Google Fonts import 2. Design tokens (:root CSS variables) — spec §2 3. Reset / base / scrollbar / selection / scroll 4. Typography helpers (.serif .mono .eyebrow .section-h) 5. Buttons (.btn-primary .btn-outline .btn-wa .btn-grey) 6. Cards, tags, nav-link, inputs, social-chip, axis-tab 7. Reveal-on-scroll 8. Keyframes (fadeUp, fadeIn, slideIn, pulse) 9. Layout utilities (container, grids, .hide-mob, .hamb) 10. Header: top utility bar + sticky nav (.scrolled blur) + mobile menu 11. Hero 12. Sticky WhatsApp float (.wa-float — RTL aware) 13. Footer 14. Service-page components (.svc-hero .step .faq-item .cta-band .info-grid .breadcrumb) — spec §7 15. Internationalization (EN/AR toggle, Arabic fonts, RTL) — spec §3 16. Responsive breakpoints (960px, 540px) + 360px safety ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. GOOGLE FONTS ───────────────────────────────────────────────────────── Exact families/weights the reference uses (spec §2a): Libre Baskerville (serif/headings EN) · Source Sans 3 (body EN) · Courier Prime (mono/eyebrows) · Noto Naskh Arabic (AR body) · Noto Kufi Arabic (AR headings/mono). Fonts are loaded via async in each page's (non-render-blocking); no @import here (an @import would re-introduce a render-blocking request). */ /* ── 2. DESIGN TOKENS (spec §2) ────────────────────────────────────────────── Every colour/measure used across the site. Names match the spec exactly so other agents and inline styles can reference them. */ :root { /* neutrals / surfaces */ --white: #ffffff; --off-white: #f5f7fa; --page-grey: #eceff4; --border: #d8dee8; --border-mid: #c2ccd8; /* text */ --text-dark: #0c1a2c; --text-mid: #3a4e66; --text-light: #6b7e96; --text-dim: #9aa9bc; /* blues */ --blue: #2b74c4; --blue-mid: #3f86d4; --blue-light: #67a6e8; --blue-pale: #eaf3fc; --blue-dim: rgba(43, 116, 196, 0.09); /* focus-ring tint */ --blue-glow: rgba(63, 134, 212, 0.2); /* hero glow */ /* greys */ --grey: #7b90a7; --grey-light: #b9c6d4; --grey-pale: #eff3f8; --grey-dark: #485c70; /* navy / accents */ --navy: #1f5288; --navy-mid: #2b649e; --navy-footer: #143a5e; /* footer surface (reference) */ --success: #1a6e40; --urgent: #b83232; --gold: #b7902f; /* WhatsApp brand */ --wa: #25D366; --wa-dark: #20b858; /* layout */ --mw: 1260px; /* max content width */ --px: clamp(18px, 5vw, 72px); /* section side padding */ --nav-h: 64px; /* sticky nav height */ /* fonts (shortcuts) */ --font-serif: 'Libre Baskerville', Georgia, serif; --font-sans: 'Source Sans 3', system-ui, -apple-system, sans-serif; --font-mono: 'Courier Prime', monospace; --font-ar-body: 'Noto Naskh Arabic', 'Source Sans 3', sans-serif; --font-ar-head: 'Noto Kufi Arabic', serif; /* shared shadows */ --shadow-card: 0 4px 20px rgba(23, 80, 140, 0.1); --shadow-btn: 0 6px 20px rgba(23, 80, 140, 0.25); --shadow-pop: 0 12px 32px rgba(9, 29, 52, 0.15); } /* ── 3. RESET / BASE / SCROLLBAR / SELECTION / SCROLL ───────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* offset anchor jumps so the sticky nav doesn't cover section tops */ scroll-padding-top: calc(var(--nav-h) + 12px); } body { background: var(--off-white); color: var(--text-dark); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; text-align: start; overflow-x: hidden; /* hard guard against horizontal scroll */ } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font-family: inherit; } /* scrollbar */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--page-grey); } ::-webkit-scrollbar-thumb { background: var(--blue-light); border-radius: 3px; } /* selection */ ::selection { background: var(--blue-pale); } /* visible focus for keyboard users (accessibility) */ :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; } /* ── 4. TYPOGRAPHY HELPERS ─────────────────────────────────────────────────── .serif → Libre Baskerville (EN headings) .mono → Courier Prime (eyebrows / labels) .eyebrow→ mono uppercase blue-light kicker .section-h → big serif section heading */ .serif { font-family: var(--font-serif); } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 10px; } .section-h { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 46px); font-weight: 700; color: var(--text-dark); line-height: 1.15; } /* ── 5. BUTTONS ────────────────────────────────────────────────────────────── Shared base + the four named variants. Hover lifts + shadows from reference. text-decoration:none so they work equally as or