/* ============================================================ Yesh — Design System "Make it Yesh." · יֵשׁ — to exist, there is Shared tokens, base styles, and components for the landing site and the product app. Part of the Avad Shamar ecosystem. ============================================================ */ /* ---------- Fonts (graceful fallback if offline) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&family=Frank+Ruhl+Libre:wght@500;700&display=swap'); /* ---------- Design tokens ---------- A "skin" overrides only the SEED tokens (below, marked ●) on the element via JS. Everything else is DERIVED from those seeds with color-mix(), so one swap re-skins the entire system. Default seeds = "Volt": warm bone paper, near-black ink, electric lime — the logo colourway, so the landing site and the pre-JS app match. */ :root { /* ● Seeds — surfaces & ink */ --canvas: #F4F1E8; --surface: #FFFFFF; --surface-2: #EEEADD; --ink: #161616; --ink-soft: #3C3A33; --ink-mute: #6E6B60; --ink-faint: #9B988B; --line: #E2DDCE; --line-2: #EDE9DC; /* Card-surface alias used by the console modules (Finance, Outbound, Growth Engine/Finder). Maps to the white card surface so panels read as crisp cards on the warm canvas rather than transparent beige. */ --surface-1: var(--surface); /* ● Seeds — accents */ --accent: #CCDC2E; /* primary action — electric lime */ --on-accent: #1A1B05; --accent-2: #231F20; /* secondary spark — near-black ink */ --on-accent-2: #F4F1E8; /* ● Seeds — dark feature surfaces (sidebar, hero card, toast) */ --hero: #161616; --on-hero: #F4F1E8; /* ● Seeds — semantic hues (skins may override) */ --pos: #2F8F5B; --warn: #C2891E; --neg: #C0473F; /* Derived — accent scale (legacy --brand-* names) */ --brand-600: var(--accent); --brand-700: color-mix(in srgb, var(--accent) 84%, #000); --brand-800: color-mix(in srgb, var(--accent) 62%, #000); --brand-500: color-mix(in srgb, var(--accent) 88%, #fff); --brand-400: color-mix(in srgb, var(--accent) 70%, #fff); --brand-200: color-mix(in srgb, var(--accent) 30%, var(--surface)); --brand-100: color-mix(in srgb, var(--accent) 18%, var(--surface)); --brand-50: color-mix(in srgb, var(--accent) 10%, var(--surface)); --brand-ink: color-mix(in srgb, var(--accent) 40%, #0b0b07); /* Derived — secondary scale (legacy --gold-* names) */ --gold: var(--accent-2); --gold-400: color-mix(in srgb, var(--accent-2) 78%, #fff); --gold-700: color-mix(in srgb, var(--accent-2) 76%, #000); --gold-200: color-mix(in srgb, var(--accent-2) 34%, var(--surface)); --gold-50: color-mix(in srgb, var(--accent-2) 16%, var(--surface)); /* Derived — neutrals mapped onto seeds (legacy names) */ --ink-2: var(--ink-soft); --muted: var(--ink-mute); --faint: var(--ink-faint); --bg: var(--canvas); /* Derived — sidebar / hero surfaces (from --hero / --on-hero) */ --side-bg: var(--hero); --side-ink: var(--on-hero); --side-ink-2: color-mix(in srgb, var(--on-hero) 80%, var(--hero)); --side-mute: color-mix(in srgb, var(--on-hero) 56%, var(--hero)); --side-faint: color-mix(in srgb, var(--on-hero) 40%, var(--hero)); --side-line: color-mix(in srgb, var(--on-hero) 14%, transparent); --side-hover: color-mix(in srgb, var(--on-hero) 9%, transparent); /* Derived — semantic backgrounds (sit on any surface) */ --pos-bg: color-mix(in srgb, var(--pos) 14%, var(--surface)); --warn-bg: color-mix(in srgb, var(--warn) 16%, var(--surface)); --neg-bg: color-mix(in srgb, var(--neg) 14%, var(--surface)); --info: var(--brand-600); --info-bg: var(--brand-50); /* Radii */ --r-xs: 6px; --r-sm: 9px; --r: 13px; --r-lg: 18px; --r-xl: 24px; --pill: 999px; /* Growth design-system radii (12 small · 16 card · 20 hero). `--radius` was referenced 50+× by the gf-/ge-/ob- modules but never defined → square cards; defining it here un-squares the whole Growth system at once. */ --radius: 14px; --r-chip: 12px; --r-card: 16px; --r-hero: 20px; /* Missing accent/surface steps the Growth modules reference. */ --brand-300: color-mix(in srgb, var(--accent) 45%, var(--surface)); --surface-3: color-mix(in srgb, var(--surface-2) 62%, var(--canvas)); /* ============================================================ YESH Theme Engine — semantic tokens (the public token API) ------------------------------------------------------------ Component-facing names. Each DERIVES from the seed tokens above, so all 33 skins + light/dark inherit them for free, and the Theme Engine (themes.js → Yesh.engine) can override any single one per workspace or client portal via root.style.setProperty(). New code should reference THESE names rather than raw seeds. ● = the ones a workspace theme typically customizes. */ --app-bg: var(--canvas); /* ● main application background */ --surface-elevated: var(--surface); /* raised card that floats above the canvas */ --surface-muted: var(--surface-2); /* recessed / secondary surface */ --sidebar-bg: var(--side-bg); /* ● sidebar background */ --sidebar-text: var(--side-ink); /* ● sidebar text */ --primary-accent: var(--accent); /* ● primary accent (lime by default) */ --secondary-accent: var(--accent-2); /* ● secondary accent */ --primary-button: var(--accent); /* ● primary CTA background */ --primary-button-text: var(--on-accent); /* primary CTA label */ --border-soft: var(--line); /* default hairline */ --border-strong: color-mix(in srgb, var(--ink) 24%, var(--line)); /* visible edge for cards / filters / tabs */ --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-mute); --success: var(--pos); --success-bg: var(--pos-bg); --warning: var(--warn); --warning-bg: var(--warn-bg); --danger: var(--neg); --danger-bg: var(--neg-bg); /* --info / --info-bg are defined above (brand-tinted by default). */ /* Chips read as a cool, distinct neutral — NOT the warm beige of cards, so filters/tags/status pills stop blending into surfaces. */ --chip-bg: color-mix(in srgb, var(--ink) 6%, var(--surface)); --chip-text: var(--ink-soft); --chip-border: color-mix(in srgb, var(--ink) 13%, var(--surface)); --active-tab: var(--accent); /* active tab rail / accent */ --active-tab-text: var(--ink); /* active tab label */ --inactive-tab: var(--ink-mute); /* inactive tab label */ --input-bg: var(--surface); /* ● form field background */ --input-border: var(--line); /* form field border */ --focus-ring: var(--ring); /* keyboard / focus ring */ /* ---- Component-surface + treatment tokens (Theme Engine, STEP 8) ---- Each defaults to the existing flat value, so all 33 skins + the 7 original presets render byte-for-byte unchanged. The Glass / Gradient / Light presets (and any custom theme) override these via root.style.setProperty(), and the [data-theme-style] treatment rules in app.css consume the blur / gradient / glow slots. New components should reference THESE names. */ --card-bg: var(--surface-elevated); /* ● panels & cards (translucent under glass) */ --modal-bg: var(--surface); /* ● dialogs, drawers, side panels */ --table-header-bg: transparent; /* table / list header row */ --table-row-hover: var(--surface-2); /* row highlight on hover */ --nav-active-bg: var(--brand-600); /* active sidebar item background */ --nav-active-text: var(--on-accent); /* active sidebar item label */ --shadow-sm: var(--sh-1); /* card elevation (themeable) */ --shadow: var(--sh-2); /* raised elevation */ --shadow-lg: var(--sh-3); /* modal / overlay elevation */ --blur: 0px; /* backdrop blur (glass only) */ --glass-border: var(--border-soft); /* frosted edge on glass surfaces */ --bg-gradient: none; /* page background glow / gradient */ --hero-gradient: none; /* topbar / hero header gradient */ --accent-glow: none; /* glow on active / AI / CTA states */ /* ---- Gradient Background Engine tokens (customizable gradient "skin" layer) ---- Inert by default so every skin/treatment is byte-identical until the engine sets data-grad-on="1" + data-grad-scope on . Yesh.gradient writes these; the [data-grad-scope~="page"] rules in app.css consume them per surface. */ --grad-page: none; /* page canvas gradient (.main) */ --grad-hero: none; /* hero / header gradient (topbar, page-head) */ --grad-section: none; /* large section panels */ --grad-card: none; /* card wash over a solid surface */ --grad-widget: none; /* dashboard bento tiles */ --grad-modal: none; /* dialogs, drawers, menus */ --grad-portal: none; /* Client Space surfaces */ --grad-overlay: none; /* subtle full-page mood wash */ --grad-glow: none; /* accent glow blobs */ --grad-blur: 0px; /* softness hint (reserved) */ /* Future-proofing slots the engine can drive (typography / shape / density). Default to the existing scale so nothing shifts until a theme sets them. */ --ui-radius: var(--r); --ui-font: var(--font-sans); --ui-font-display: var(--font-display); /* Functional accent codes — these encode FUNCTION, not brand (map category pins, sequence step-type channels), so they're centralized here as tokens rather than hard-coded in components, but intentionally don't re-skin. */ --map-base: #20364e; /* Growth Finder map canvas */ --ch-comm: #0284c7; /* call / LinkedIn step icons */ --ch-flow: #7c3aed; /* approval / branch step icons */ /* Shadows (neutral dark so they read on warm paper too) */ --sh-1: 0 1px 2px rgba(20,18,12,.07), 0 1px 3px rgba(20,18,12,.05); --sh-2: 0 6px 18px rgba(20,18,12,.09), 0 2px 5px rgba(20,18,12,.05); --sh-3: 0 18px 48px rgba(20,18,12,.20), 0 6px 16px rgba(20,18,12,.10); /* Soft, calm card shadow for the premium Growth cockpit. */ --sh-soft: 0 1px 2px rgba(20,18,12,.04), 0 4px 14px rgba(20,18,12,.05); --sh-soft-2: 0 2px 6px rgba(20,18,12,.06), 0 10px 28px rgba(20,18,12,.08); --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); /* Type — driven by the typography engine (assets/js/fonts.js). The engine overwrites --font-display/body/accent + the token scale via inline styles on ; these are the safe fallbacks if it never runs. --font-sans is kept as a back-compat ALIAS of --font-body so every existing `var(--font-sans)` rule inherits the chosen body face. */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-sans: var(--font-body); --font-display: 'Space Grotesk', var(--font-body); --font-accent: 'Newsreader', Georgia, 'Times New Roman', serif; --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-hebrew: 'Frank Ruhl Libre', var(--font-serif); /* Resolved weights (engine picks the nearest available per family). */ --font-weight-display: 600; --font-weight-body: 400; --font-weight-accent: 500; /* Type-scale tokens — defaults equal the `Comfortable` preset, which is the app's current look, so nothing shifts until a scale preset is chosen. */ --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.35rem; --text-2xl: 1.65rem; --text-3xl: 2.1rem; --text-4xl: 2.75rem; --line-height-tight: 1.18; --line-height-normal: 1.55; --line-height-relaxed: 1.75; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0em; --letter-spacing-wide: 0.035em; --maxw: 1180px; /* ---------- Responsive foundation ---------- Canonical breakpoint system (used throughout responsive.css): Desktop ≥ 1025px baseline — spacious, unchanged Tablet ≤ 1024px hybrid / 2-col, sidebar → drawer Phone ≤ 767px single column, scroll-tabs, table→cards, sheet modals Small ≤ 380px tightened spacing/type The control tokens below are re-pointed per breakpoint in responsive.css, so layout primitives read one variable instead of hard-coding px per screen. */ --safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --touch: 44px; /* minimum interactive target on touch */ --view-px: 32px; /* .view horizontal padding */ --view-py: 28px; /* .view top padding */ --card-px: 18px; /* panel / card inner padding */ --grid-gap: 22px; /* responsive grid gutter */ --sheet-radius: 20px; /* mobile bottom-sheet corner */ } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: var(--line-height-normal); font-size: var(--text-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Accent face — premium moments: pull-quotes, badges, portal welcome. */ .type-accent { font-family: var(--font-accent); } blockquote, .pull-quote { font-family: var(--font-accent); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input, textarea, select { font: inherit; color: inherit; } ul { list-style: none; padding: 0; } ::selection { background: var(--brand-200); color: var(--brand-ink); } h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); } h1 { font-size: clamp(2.4rem, 5vw, 4rem); } h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); } h3 { font-size: 1.32rem; letter-spacing: -0.015em; } p { color: var(--ink-2); } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: 92px 0; } .center { text-align: center; } .muted { color: var(--muted); } .serif { font-family: var(--font-serif); font-style: italic; } .hebrew { font-family: var(--font-hebrew); direction: rtl; } .grid { display: grid; gap: 22px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .spread { justify-content: space-between; } /* ---------- Brand mark ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; } .brand .mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand-600), var(--brand-800)); color: var(--on-accent); font-family: var(--font-hebrew); font-size: 17px; line-height: 1; box-shadow: var(--sh-1); position: relative; } .brand .mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--surface), 0 0 10px var(--gold-400); } .brand .name { font-size: 1.18rem; letter-spacing: -0.02em; color: var(--ink); } .brand .name b { color: var(--brand-700); font-weight: 700; } /* ---------- Yesh logo (image lockup) ---------- */ .ylogo { display: block; flex: none; width: 32px; height: 32px; } /* ---------- Line-art icons (shared) ---------- */ .ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.16em; flex: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-sm); font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; white-space: nowrap; line-height: 1; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary-button); color: var(--primary-button-text); box-shadow: var(--sh-1); } .btn-primary:hover { background: color-mix(in srgb, var(--primary-button) 84%, #000); box-shadow: var(--sh-2); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--brand-200); background: var(--brand-50); color: var(--brand-700); } .btn-soft { background: var(--brand-50); color: var(--brand-700); } .btn-soft:hover { background: var(--brand-100); } .btn-gold { background: var(--gold); color: var(--on-accent-2); box-shadow: var(--sh-1); } .btn-gold:hover { background: var(--gold-400); } .btn-quiet { background: transparent; color: var(--ink-2); padding: 9px 12px; } .btn-quiet:hover { background: var(--line-2); color: var(--ink); } .btn-lg { padding: 14px 24px; font-size: 1.02rem; border-radius: var(--r); } .btn-sm { padding: 8px 13px; font-size: 0.86rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------- Cards ---------- */ .card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); } .card-hover { transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--brand-200); } /* ---------- Badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--pill); font-size: 0.76rem; font-weight: 600; background: var(--brand-50); color: var(--brand-700); letter-spacing: .01em; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge.gold { background: var(--gold-50); color: var(--gold-700); } .badge.pos { background: var(--pos-bg); color: var(--pos); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.neg { background: var(--neg-bg); color: var(--neg); } .badge.gray { background: var(--line-2); color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-600); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); } .input, .textarea, .select { width: 100%; padding: 11px 13px; border: 1px solid var(--input-border); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); transition: border-color .14s ease, box-shadow .14s ease; font-size: 0.95rem; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--focus-ring); } .textarea { resize: vertical; min-height: 96px; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--faint); } /* ---------- Misc ---------- */ .divider { height: 1px; background: var(--line); border: 0; } .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--line-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink-2); } /* Scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--surface); } *::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } /* Animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes sparkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } } .reveal { opacity: 0; } .reveal.in { animation: fadeUp .6s cubic-bezier(.2,.7,.3,1) forwards; } /* Responsive base */ @media (max-width: 900px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr; } .section { padding: 64px 0; } } @media (max-width: 560px) { .cols-4 { grid-template-columns: 1fr; } .wrap { padding: 0 18px; } }