/* ========================================================================== Busoft — Design tokens Every value the design uses lives here. Nothing else defines a raw colour. Theming: set data-theme="software|consulting|academy|startups" on any element (normally ). All accent tokens re-map. Default = software. ========================================================================== */ :root { /* ---- Brand ramp (all derived from the logo teal #35B3AC) -------------- */ --teal-50: #f0fcfd; --teal-100: #d6f5f8; --teal-200: #ade9ef; --teal-300: #74d6e0; --teal-400: #45c6d3; --teal-500: #29b8c8; /* sampled from logo (לוגו צבעוני.png) */ --teal-600: #1f9dab; --teal-700: #217f8c; --teal-800: #1c6b72; --teal-900: #124d55; /* ---- Ink / neutrals --------------------------------------------------- */ --ink-900: #19212b; --ink-800: #2f3a45; /* brand ink — logo glyph + wordmark */ --logo-glyph: #2f3a45; --ink-700: #3f4c59; --ink-600: #0f172a; /* body text */ --ink-500: #475569; /* secondary text */ --ink-400: #64748b; --ink-300: #94a3b8; --ink-200: #cbd5e1; --ink-100: #e6ebf2; --ink-050: #f1f4f9; --surface: #ffffff; --surface-page: #f8f9fc; --surface-sunken: #eef1f7; --surface-glass: rgba(255, 255, 255, .78); --surface-dark: #19212b; --surface-dark-2: #202b37; --text: var(--ink-600); --text-soft: var(--ink-500); --text-faint: var(--ink-400); --text-on-dark: #ffffff; --text-on-dark-soft: rgba(255, 255, 255, .72); --border: rgba(15, 23, 42, .09); --border-strong: rgba(15, 23, 42, .16); --border-on-dark: rgba(255, 255, 255, .14); /* ---- Warm micro-accent (CTA highlights only, used sparingly) ---------- */ --spark: #ffcf6b; /* warm micro-accent, CTA highlights only */ --spark-ink: #4a3a12; /* ---- Status ----------------------------------------------------------- */ --ok: #2e9a95; --warn: #c98a1f; --err: #c2453f; /* ---- Accent (overridden per theme below) ------------------------------ */ --accent: var(--teal-500); --accent-soft: var(--teal-300); --accent-strong: var(--teal-800); --accent-ink: var(--teal-900); /* accent text on light bg */ --accent-on: #ffffff; /* text on accent fill */ --accent-tint: rgba(41, 184, 200, .08); /* card wash */ --accent-tint-2: rgba(41, 184, 200, .16); /* chips, rules */ --accent-glow: rgba(41, 184, 200, .28); /* hover glow / focus ring */ --grad-a: #74d6e0; --grad-b: #29b8c8; --grad-c: #1c6b72; /* decorative gradient (surfaces, marks, icon tiles) */ --gradient: linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 48%, var(--grad-c) 100%); /* CTA gradient: darker so --accent-on text always clears WCAG AA */ --cta-a: #22a7b7; --cta-b: #17798a; --cta-c: #0f5461; --gradient-cta: linear-gradient(135deg, var(--cta-a) 0%, var(--cta-b) 52%, var(--cta-c) 100%); --gradient-soft: linear-gradient(135deg, rgba(116, 214, 224, .18) 0%, rgba(41, 184, 200, .12) 50%, rgba(28, 107, 114, .14) 100%); --gradient-text: linear-gradient(120deg, var(--grad-a) 0%, #43c8d6 55%, #bff0f5 100%); /* ---- Spacing scale (4px base) ----------------------------------------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --space-12: 8rem; --section-y: clamp(3.5rem, 7vw, 7rem); --gutter: clamp(1.15rem, 4vw, 2.5rem); --measure: 68ch; /* ---- Radii ------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ---- Shadows (soft, low-contrast — the fluent/emma feel) -------------- */ --sh-xs: 0 1px 2px rgba(15, 23, 42, .05); --sh-sm: 0 2px 8px rgba(15, 23, 42, .06); --sh-md: 0 10px 28px -14px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .04); --sh-lg: 0 26px 60px -28px rgba(15, 23, 42, .34), 0 4px 12px rgba(15, 23, 42, .05); --sh-glow: 0 18px 40px -20px var(--accent-glow); --sh-dark: 0 24px 70px -30px rgba(0, 0, 0, .65); /* ---- Type ------------------------------------------------------------- */ --font-sans: "Inter", "Heebo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-he: "Heebo", "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: .8125rem; --fs-sm: .9063rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.125rem, .35vw + 1.05rem, 1.3125rem); --fs-xl: clamp(1.375rem, .8vw + 1.15rem, 1.75rem); --fs-2xl: clamp(1.625rem, 1.4vw + 1.25rem, 2.25rem); --fs-3xl: clamp(2rem, 2.4vw + 1.35rem, 3rem); --fs-4xl: clamp(2.4rem, 4.4vw + 1.1rem, 4.125rem); --fs-5xl: clamp(2.75rem, 5.4vw + 1rem, 4.8rem); --lh-tight: 1.04; --lh-snug: 1.18; --lh-head: 1.28; --lh-body: 1.68; --tr-tight: -.035em; --tr-head: -.02em; --tr-eyebrow: .14em; /* ---- Motion ----------------------------------------------------------- */ --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 720ms; --dur-5: 1200ms; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --reveal-shift: 18px; --stagger: 70ms; /* ---- Layers ----------------------------------------------------------- */ --z-base: 1; --z-sticky: 50; --z-drawer: 80; --z-top: 100; --header-h: 74px; --header-h-condensed: 60px; } /* ========================================================================== Per-pillar themes — close variations of the logo teal only. ========================================================================== */ [data-theme="software"] { --accent: #29b8c8; --accent-soft: #74d6e0; --accent-strong: #1b7f8b; --accent-ink: #135c66; --accent-on: #ffffff; --accent-tint: rgba(41, 184, 200, .08); --accent-tint-2: rgba(41, 184, 200, .17); --accent-glow: rgba(41, 184, 200, .30); --grad-a: #74d6e0; --grad-b: #29b8c8; --grad-c: #1c6b72; --cta-a: #22a7b7; --cta-b: #17798a; --cta-c: #0f5461; } [data-theme="consulting"] { --accent: #217f8c; --accent-soft: #6cb4bf; --accent-strong: #14606c; --accent-ink: #114c56; --accent-on: #ffffff; --accent-tint: rgba(33, 127, 140, .08); --accent-tint-2: rgba(33, 127, 140, .17); --accent-glow: rgba(33, 127, 140, .30); --grad-a: #6cb4bf; --grad-b: #217f8c; --grad-c: #114c56; --cta-a: #2b8e9c; --cta-b: #1a6b78; --cta-c: #104c56; } [data-theme="academy"] { --accent: #74d6e0; --accent-soft: #ade9ef; --accent-strong: #1f9dab; --accent-ink: #12606b; /* AA text colour for the light theme */ --accent-on: #0f3d44; /* ink on light fill — too light for white text */ --accent-tint: rgba(116, 214, 224, .12); --accent-tint-2: rgba(116, 214, 224, .26); --accent-glow: rgba(116, 214, 224, .38); --grad-a: #d6f5f8; --grad-b: #74d6e0; --grad-c: #1f9dab; --cta-a: #ade9ef; --cta-b: #74d6e0; --cta-c: #3fb6c6; } [data-theme="startups"] { --accent: #1c6b72; --accent-soft: #4fa3ac; --accent-strong: #114f56; --accent-ink: #0f4249; --accent-on: #ffffff; --accent-tint: rgba(28, 107, 114, .08); --accent-tint-2: rgba(28, 107, 114, .17); --accent-glow: rgba(28, 107, 114, .30); --grad-a: #4fa3ac; --grad-b: #1c6b72; --grad-c: #0d3b41; --cta-a: #24818a; --cta-b: #175f68; --cta-c: #0d444b; } /* Accent tokens that need to change inside dark bands */ .is-dark, [data-surface="dark"] { --text: var(--text-on-dark); --text-soft: var(--text-on-dark-soft); --border: var(--border-on-dark); --border-strong: rgba(255, 255, 255, .24); --accent-ink: var(--accent-soft); --surface: rgba(255, 255, 255, .05); --surface-glass: rgba(255, 255, 255, .07); }