/* ============================================================================ SENDRAISE · DESIGN TOKENS Single source of truth for color, type, spacing, radii, shadows, blur, motion and layout. Consumed by components.css and every page. Naming: raw palette = --c-* semantic = --bg / --fg / --border ... type = --font-* / --fs-* / --lh-* spacing = --s-* radii = --r-* shadow = --sh-* blur = --blur-* motion = --ease-* / --dur-* layout = --max / --nav-h / --z-* ============================================================================ */ /* Fonts — kept on CDN (see README for self-hosting path) */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap'); @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap'); /* FK Grotesk — self-hosted (display face, real brand font) */ @font-face{font-family:'FK Grotesk';src:url('fonts/FKGrotesk-Regular.woff2') format('woff2'),url('fonts/FKGrotesk-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'FK Grotesk';src:url('fonts/FKGrotesk-Medium.woff2') format('woff2'),url('fonts/FKGrotesk-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'FK Grotesk';src:url('fonts/FKGrotesk-Bold.woff2') format('woff2'),url('fonts/FKGrotesk-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;} :root { /* ── Raw palette ───────────────────────────────────────────────────────── */ --c-bone: #fbfbf9; /* warm off-white (legacy app bg) */ --c-paper: #f3f3f3; /* canonical page background */ --c-white: #ffffff; --c-ink: #262522; /* primary text on light */ --c-night: #15181e; /* near-black dark surface (heroes, CTA boxes) */ --c-navy: #1c2f3f; /* brand navy — footer, accents */ --c-navy-mid: #27546f; --c-blue: #3081db; /* interactive / link blue */ --c-blue-light: #c3d5e0; /* text on dark surfaces */ --c-mist: #dbe2e7; /* light cool tint (frame bg, faint headings) */ --c-teal: #317195; /* decorative sphere (button glow) */ --c-hex: #31719b; /* decorative hexagon (hero backdrop) */ --c-orange: #e6611e; /* decorative warm glow (rgb 230,97,30) */ --c-orange-ink: #bc5f06; /* orange used as text/tag */ --c-red: #a40d00; --c-success: #1f8a5b; /* validation / succès */ --c-success-soft: rgba(31,138,91,0.12); --c-btn-light: #edeff1; /* light "demo" button face */ /* ── Semantic · light surface (default) ────────────────────────────────── */ --bg: var(--c-paper); --surface: var(--c-white); --surface-sunk: rgba(28,47,63,0.04); /* faint panel (pricing section) */ --fg: var(--c-ink); --fg-strong: #000000; --text-muted: rgba(0,0,0,0.55); --text-faint: rgba(0,0,0,0.35); --text-eyebrow: rgba(0,0,0,0.35); --border: rgba(66,65,59,0.12); --border-strong: rgba(66,65,59,0.20); --link: var(--c-navy); /* ── Semantic · dark surface ───────────────────────────────────────────── */ --bg-dark: var(--c-night); --fg-on-dark: var(--c-blue-light); --fg-on-dark-strong: #dbe2e7; --text-on-dark: rgba(255,255,255,0.55); --text-on-dark-soft: rgba(195,213,224,0.70); --border-on-dark: rgba(255,255,255,0.10); /* ── Typography ─────────────────────────────────────────────────────────── */ --font-display: 'FK Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'DM Mono', ui-monospace, monospace; /* Type scale (fluid where it spans hero→mobile) */ --fs-display: clamp(72px, 10vw, 130px); /* product name (ACE / STASE) */ --fs-h1: clamp(38px, 5.1vw, 60px); /* page hero headline */ --fs-h2: clamp(28px, 3.6vw, 46px); /* section heading */ --fs-h3: clamp(22px, 2.5vw, 30px); /* sub-section / card title */ --fs-h4: 18px; /* small heading */ --fs-lead: 22px; /* hero tagline / lead paragraph */ --fs-body: 16px; --fs-body-sm: 14px; --fs-small: 13.5px; --fs-caption: 12px; --fs-eyebrow: 11px; /* mono labels / kickers */ --nav-weight: 500; /* nav / menu item text weight */ --lh-tight: 1.12; --lh-snug: 1.25; --lh-normal: 1.6; --lh-relaxed: 1.7; --tracking-tight: -0.025em; --tracking-display:-0.04em; --tracking-wide: 0.08em; --tracking-eyebrow: 0.1em; /* ── Spacing scale (4px base) ──────────────────────────────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-18:72px; --s-20:80px; --s-24:96px; --s-30:120px; --section-y: var(--s-20); /* default vertical section rhythm */ --section-x: var(--s-8); /* default horizontal gutter */ /* ── Radii ─────────────────────────────────────────────────────────────── */ --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:14px; --r-3xl:16px; --r-pill:9999px; /* ── Shadows ───────────────────────────────────────────────────────────── */ --sh-sm: 0 4px 16px rgba(0,0,0,0.06); --sh-md: 0 4px 24px rgba(0,0,0,0.07); --sh-lg: 0 12px 48px rgba(28,47,63,0.12); --sh-hover: 0 8px 32px rgba(0,0,0,0.08); --sh-menu: 0 8px 24px rgba(0,0,0,0.08); --sh-dark: 0 18px 60px rgba(0,0,0,0.38); /* ── Blur (decorative backdrops) ───────────────────────────────────────── */ --shape-blur: 130px; /* hero / mission geometric backdrop wash */ --sphere-blur: 62px; /* button glow sphere */ --sphere-blur-lg: 124px; /* large frame glow */ /* ── Motion ────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.22,1,.36,1); --dur-fast: 0.15s; --dur-base: 0.18s; --dur-slow: 0.45s; --dur-sphere: 0.6s; /* ── Layout ────────────────────────────────────────────────────────────── */ --max: 1200px; --nav-h: 72px; --z-base: 1; --z-nav: 100; --z-modal: 1000; } @media (min-width:2048px){ :root{ --max:1320px; } }