/* Ravit design tokens — concatenated, flat (no _ds folder dependency) */ /* ---- tokens/fonts.css ---- */ /* Ravit — Fonts Rubik: a warm, geometric sans with softly rounded corners and full Hebrew + Latin support. Chosen for the calm, friendly, non-corporate tone. NOTE: loaded from Google Fonts (no binaries were provided). See readme caveats. Every page links the font stylesheet directly in ; importing it here too would only add a second, chained request. */ /* ---- tokens/colors.css ---- */ /* Ravit — Color tokens Palette: purple (primary), cream (surface), soft yellow (accent). Green is RESERVED for the WhatsApp action only — never decorative. */ :root { /* ---- Purple (primary brand) ---- */ --purple-50: #F3EFFD; --purple-100: #E7DFFA; --purple-200: #CFBFF4; --purple-300: #B299EC; --purple-400: #9270E2; --purple-500: #6A4CE4; /* brand primary */ --purple-600: #5A3CD0; --purple-700: #4A2FAE; --purple-800: #382486; --purple-900: #281A5E; /* ---- Cream (warm surfaces / page) ---- */ --cream-50: #FFFDF9; --cream-100: #FDF8F0; --cream-200: #FBF1E4; /* default warm page background */ --cream-300: #F6E7D2; --cream-400: #EFD9BD; /* ---- Soft yellow (accent / highlight) ---- */ --yellow-100: #FFF4D1; --yellow-200: #FFE9A8; --yellow-300: #FFD66B; /* accent */ --yellow-400: #FBC846; /* ---- WhatsApp green (RESERVED for the WhatsApp CTA + icon only) ---- */ --whatsapp: #25D366; --whatsapp-700: #116B34; --whatsapp-soft: #E3F9EC; /* ---- Warm neutrals (ink) ---- */ --ink-900: #2A2440; /* primary text — warm near-black violet */ --ink-700: #4A4459; --ink-500: #6E687D; --ink-400: #938EA1; --ink-300: #C9C4D4; --ink-200: #E5E1EC; --ink-100: #F2EFF6; --white: #FFFFFF; /* ---- Status (used sparingly, kept warm/soft) ---- */ --success: #3CB46E; --warning: #F0A93B; --danger: #E1604E; --info: var(--purple-500); /* ================================================================= SEMANTIC ALIASES — prefer these in components ================================================================= */ --bg-page: var(--cream-200); --bg-page-soft: var(--cream-100); --bg-page-deep: var(--cream-300); --surface-card: var(--white); --surface-sunken: var(--cream-100); --surface-purple: var(--purple-500); --surface-purple-soft: var(--purple-50); --surface-yellow: var(--yellow-300); --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-on-purple: var(--white); --text-on-yellow: #2A2440; /* fixed — yellow stays light in both themes, so its text stays dark */ --text-link: var(--purple-600); --text-brand: var(--purple-700); /* purple text sitting on tinted/card surfaces — safe to relight per theme */ --border-soft: var(--ink-200); --border-strong: var(--ink-300); --border-purple: var(--purple-200); --accent: var(--yellow-300); --cta: var(--purple-500); --cta-hover: var(--purple-600); --cta-press: var(--purple-700); --cta-whatsapp: var(--whatsapp); --cta-whatsapp-hover: var(--whatsapp-700); --focus-ring: var(--purple-400); /* ---- Decorative surfaces reused across marketing pages (theme-aware) ---- */ --page-gradient: linear-gradient(180deg, #FBF1E4 0%, #FDF7EE 50%, #FBF1E4 100%); --panel-gradient: linear-gradient(160deg, #F5F1FD 0%, #ECE3FB 100%); --header-bg: rgba(251, 241, 228, 0.82); /* ---- WhatsApp demo phone (Ravit homepage) ---- */ --surface-phone: #ECE3D6; --border-phone: rgba(42, 36, 64, 0.30); --shadow-phone: 0 1px 1px rgba(42,36,64,0.04), 0 12px 24px -8px rgba(42,36,64,0.18), 0 32px 56px -16px rgba(42,36,64,0.22); --surface-map-1: #E7EFE6; --surface-map-2: #DEE8F1; --surface-file-chip: rgba(255,255,255,0.7); } /* ===================================================================== DARK THEME — toggled via [data-theme="dark"] on . Brand islands (CTA purple, WhatsApp green, yellow accent) keep their raw hue so buttons/badges read the same in both themes; only the neutral scale, tint surfaces and a couple of theme-aware aliases flip. ===================================================================== */ :root[data-theme="dark"] { --whatsapp-700: #1FAD52; /* Purple tints → dark surfaces (purple-500 CTA itself is untouched) */ --purple-50: #241D40; --purple-100: #2D2450; --purple-200: #4A3B7A; /* Cream → warm dark violet-black wells */ --cream-50: #1C1730; --cream-100: #1C1730; --cream-200: #171229; --cream-300: #221C3C; --cream-400: #2A2249; /* Ink neutrals inverted — this scale is used directly as text color throughout, so flipping it here relights every heading/body/caption */ --ink-900: #F4F1FA; --ink-700: #D6D0E6; --ink-500: #A79FC2; --ink-400: #8E85AC; --ink-300: #6E6690; --ink-200: #453B68; --ink-100: #2A2349; --whatsapp-soft: #16301F; /* Aliases that reference now-unchanged raw tokens (--white, --purple-600/700) need an explicit relight of their own */ --surface-card: #221C3C; --text-link: #B6A2F7; --text-brand: #C6B4FF; --page-gradient: linear-gradient(180deg, #171229 0%, #1B1530 55%, #171229 100%); --panel-gradient: linear-gradient(160deg, #241D40 0%, #2D2450 100%); --header-bg: rgba(23, 18, 41, 0.75); --surface-phone: #120E20; --border-phone: rgba(255, 255, 255, 0.18); --shadow-phone: 0 1px 1px rgba(0,0,0,0.3), 0 12px 24px -8px rgba(0,0,0,0.45), 0 32px 56px -16px rgba(0,0,0,0.55); --surface-map-1: #24352B; --surface-map-2: #22303F; --surface-file-chip: rgba(255,255,255,0.06); } /* ---- tokens/typography.css ---- */ /* Ravit — Typography tokens Single family (Rubik) carries display→body via weight + size. Hebrew-first, RTL-friendly. Generous line-height for a calm, airy read. */ :root { --font-sans: 'Rubik', system-ui, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-display: var(--font-sans); --font-mono: 'SFMono-Regular', ui-monospace, 'Menlo', monospace; /* Weights */ --fw-regular: 400; /* @kind other */ --fw-medium: 500; /* @kind other */ --fw-semibold: 600; /* @kind other */ --fw-bold: 700; /* @kind other */ --fw-black: 800; /* @kind other */ /* Type scale (fluid-friendly fixed steps) */ --fs-display: 64px; /* hero */ --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-lead: 20px; /* intro paragraph */ --fs-body: 17px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-overline: 12px; /* Line heights */ --lh-tight: 1.08; /* @kind other */ --lh-snug: 1.25; /* @kind other */ --lh-normal: 1.5; /* @kind other */ --lh-relaxed: 1.65; /* @kind other */ /* Letter spacing */ --ls-tight: -0.02em; /* @kind other */ --ls-normal: 0; /* @kind other */ --ls-wide: 0.04em; /* @kind other */ /* Semantic roles */ --text-display: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-display); --text-h1: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-display); --text-h2: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); --text-h3: var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans); --text-lead: var(--fw-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-sans); --text-body: var(--fw-regular) var(--fs-body)/var(--lh-relaxed) var(--font-sans); --text-body-strong: var(--fw-medium) var(--fs-body)/var(--lh-relaxed) var(--font-sans); --text-caption: var(--fw-regular) var(--fs-caption)/var(--lh-normal) var(--font-sans); } /* ---- tokens/spacing.css ---- */ /* Ravit — Spacing tokens. 4px base; airy by default. */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Layout */ --container-max: 1200px; --container-narrow: 760px; --gutter: var(--space-6); --section-y: var(--space-24); /* vertical rhythm between page sections */ } /* ---- tokens/radius.css ---- */ /* Ravit — Radius & shadow tokens. Everything is generously rounded; shadows are soft, low-contrast and warm-tinted (never hard gray drop-shadows). */ :root { /* Corner radii */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 40px; --radius-pill: 999px; /* Soft, warm-tinted shadows */ --shadow-xs: 0 1px 2px rgba(42, 36, 64, 0.05); --shadow-soft: 0 4px 16px rgba(42, 36, 64, 0.06); --shadow-card: 0 10px 30px rgba(42, 36, 64, 0.08); --shadow-float: 0 18px 48px rgba(42, 36, 64, 0.12); --shadow-purple: 0 12px 28px rgba(106, 76, 228, 0.28); --shadow-whatsapp: 0 12px 28px rgba(37, 211, 102, 0.30); /* Motion — gentle, no harsh bounces */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ } /* Dark theme — deeper, blacker shadows read correctly on dark surfaces (the light theme's warm-purple shadows would be invisible here). */ :root[data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.40); --shadow-float: 0 18px 48px rgba(0, 0, 0, 0.50); --shadow-purple: 0 12px 28px rgba(106, 76, 228, 0.45); --shadow-whatsapp: 0 12px 28px rgba(37, 211, 102, 0.35); } /* ---- tokens/base.css ---- */ /* Ravit — light base resets & helpers (optional for consumers, kept minimal). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font: var(--text-body); color: var(--text-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Default to RTL for Hebrew-first content; consumers can override per-element. */ :root { direction: rtl; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--purple-100); color: var(--purple-900); } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* Smooth, gentle theme crossfade — skipped entirely for users who asked the OS for reduced motion (WCAG 2.3.3 / IL accessibility regs). */ @media (prefers-reduced-motion: no-preference) { body, [data-page-gate] { transition: background-color 280ms ease, color 280ms ease; } }