/* ============================================================ BRAND STANDARD — single source of truth for the whole site Colors · font · shape · elevation · focus · RTL Linked by every page (index, specialties, accessibility). ⚠️ Change a color/font HERE and every page updates. Never hardcode a hex color or a font-family in a page — always use these tokens (var(--brand-1), var(--font-main), …). ============================================================ */ /* ── Theme A · כחול סמכותי (DEFAULT) ── */ :root, [data-theme="A"] { --brand-1: #1a365d; --brand-2: #2b6cb0; --brand-3: #3182ce; --brand-light: #ebf4ff; --accent: #d97706; --text: #1a202c; --text-muted: #4a5568; --text-light: #718096; --bg: #f8f9fc; --card: #ffffff; --border: #e2e8f0; --success: #38a169; --gradient-hero: linear-gradient(135deg, #1a365d 0%, #2b6cb0 50%, #3182ce 100%); --gradient-cta: linear-gradient(135deg, #3182ce, #2b6cb0); --theme-name: "A · כחול סמכותי"; /* Typography standard — swap the font in ONE place */ --font-main: 'Heebo', sans-serif; /* Shape & elevation standard */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --shadow-sm: 0 4px 20px rgba(0,0,0,0.04); --shadow-md: 0 8px 24px rgba(0,0,0,0.12); } /* ── Theme B · טורקיז חם (OPT-IN: set ) ── */ [data-theme="B"] { --brand-1: #134e4a; --brand-2: #0d9488; --brand-3: #14b8a6; --brand-light: #ccfbf1; --accent: #f59e0b; --text: #1c1917; --text-muted: #44403c; --text-light: #78716c; --bg: #fefdf8; --card: #ffffff; --border: #e7e5e4; --success: #059669; --gradient-hero: linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #14b8a6 100%); --gradient-cta: linear-gradient(135deg, #14b8a6, #0d9488); --theme-name: "B · טורקיז חם"; } /* ── Base ── */ html { direction: rtl; } body { font-family: var(--font-main); color: var(--text); background: var(--bg); } /* ── Accessible focus standard (keyboard users) ── */ :where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--brand-3); outline-offset: 2px; } /* ── Placeholder-image marker (TEMPORARY) ── Floats the image filename on every demo image so it's easy to spot & replace with the real photo from the live site. ⚠ Remove this whole rule (or the .ph-img classes) once real images are in place. */ .ph-img { position: relative; } .ph-img::after { content: "⚠ " attr(data-ph); position: absolute; top: 8px; right: 8px; z-index: 6; direction: ltr; background: rgba(220,38,38,0.92); color: #fff; font: 700 11px/1.3 var(--font-main); padding: 4px 8px; border-radius: 6px; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }