/* ============================================================ Café Moses — Foundations קפה מוזס — בית קפה וקלייה Warm browns + cream. Bright, artisanal, vintage stamp feel. ============================================================ */ /* Fonts loaded via in index.html — no @import needed */ :root { /* ---------- BRAND PALETTE ---------------------------------- Warm coffee-house browns, anchored by paper-cream backgrounds. The system is "bright brown": cream is the canvas, browns are the ink, sunrise-rust is the single hot accent. -------------------------------------------------------------*/ /* Browns — darkest → lightest */ --brown-900: #2A1810; /* Espresso — strongest ink */ --brown-800: #3F2417; /* Dark roast — body text */ --brown-700: #5C3A21; /* Roasted bean — headings */ --brown-600: #7A4E2A; /* Mocha — secondary text */ --brown-500: #9C6B3D; /* Caramel — line work / logo ring */ --brown-400: #B58A5E; /* Hazelnut — borders */ --brown-300: #CFA77F; /* Latte — subtle accents */ --brown-200: #E2C6A3; /* Foam — chip backgrounds */ --brown-100: #EFDDC2; /* Light foam — hover surface */ /* Creams — paper / canvas */ --cream-50: #FFFCF7; /* Pure paper */ --cream-100: #FBF6EC; /* Page background — primary */ --cream-200: #F5EBD8; /* Card cream */ --cream-300: #ECDDC2; /* Divider cream */ /* Accents — sunrise + foliage from logo */ --sunrise-500: #C75A2E; /* Sunrise rust — primary accent (rare) */ --sunrise-600: #A8431F; /* Pressed accent */ --leaf-500: #6B7A3D; /* Coffee leaf — secondary accent */ --jasmine-100: #FFF7E5; /* Flower white — highlight */ /* Semantic colors */ --success: #5A7A3D; --warning: #C7903E; --danger: #A8431F; /* ---------- FOREGROUND / BACKGROUND TOKENS ---------------- */ --fg-1: var(--brown-900); --fg-2: var(--brown-700); --fg-3: var(--brown-600); --fg-4: var(--brown-500); --fg-inverse: var(--cream-100); --bg-page: var(--cream-100); --bg-surface: var(--cream-50); --bg-raised: var(--cream-200); --bg-sunken: var(--cream-300); --bg-inverse: var(--brown-900); --border-soft: color-mix(in oklab, var(--brown-500) 18%, transparent); --border-strong: color-mix(in oklab, var(--brown-700) 35%, transparent); --border-ink: var(--brown-800); --accent: var(--sunrise-500); --accent-fg: var(--cream-50); /* ---------- TYPE FAMILIES -------------------------------- */ --font-display: 'Suez One', 'Frank Ruhl Libre', Georgia, serif; --font-serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif; --font-sans: 'Heebo', -apple-system, system-ui, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ---------- TYPE SCALE ----------------------------------- */ --size-display: 88px; --size-h1: 56px; --size-h2: 40px; --size-h3: 28px; --size-h4: 22px; --size-body: 16px; --size-small: 14px; --size-micro: 12px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-stamp: 0.22em; /* ---------- SPACING -------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- RADII ---------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --radius-stamp: 50%; /* ---------- SHADOWS -------------------------------------- */ --shadow-soft: 0 1px 2px rgba(60, 36, 23, 0.06), 0 2px 6px rgba(60, 36, 23, 0.04); --shadow-card: 0 2px 4px rgba(60, 36, 23, 0.06), 0 8px 20px rgba(60, 36, 23, 0.10); --shadow-raised: 0 6px 12px rgba(60, 36, 23, 0.08), 0 18px 36px rgba(60, 36, 23, 0.14); --shadow-stamp: 0 1px 0 rgba(60, 36, 23, 0.05) inset, 0 0 0 1px rgba(60, 36, 23, 0.08); /* ---------- MOTION --------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-quick: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ SEMANTIC ELEMENT STYLES ============================================================ */ html, body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--size-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-family: var(--font-serif); color: var(--fg-1); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); font-weight: 700; margin: 0; } .display, h1.display { font-family: var(--font-display); font-size: var(--size-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 400; } h1, .h1 { font-size: var(--size-h1); font-weight: 900; } h2, .h2 { font-size: var(--size-h2); font-weight: 700; } h3, .h3 { font-size: var(--size-h3); font-weight: 700; } h4, .h4 { font-size: var(--size-h4); font-weight: 500; } p { margin: 0 0 var(--space-4); line-height: var(--lh-normal); color: var(--fg-2); } small, .small { font-size: var(--size-small); color: var(--fg-3); } .micro { font-size: var(--size-micro); color: var(--fg-3); } /* Signature stamp label — tracked uppercase mini-text */ .stamp-label { font-family: var(--font-sans); font-size: var(--size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-stamp); color: var(--brown-500); } code, .mono { font-family: var(--font-mono); font-size: 0.95em; background: var(--bg-raised); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--brown-800); } a { color: var(--brown-700); text-decoration: underline; text-underline-offset: 3px; } a:hover { color: var(--sunrise-500); } [dir="rtl"], .rtl { direction: rtl; text-align: right; }