/* Finarium — design tokens (v1, home page approved: Variant 2) Fluid values are clamp(min @390px, preferred, max @1920px). */ :root { /* ── Color: surfaces ───────────────────────────── */ --fin-bg: #f4f7f6; /* page background */ --fin-bg-alt: #eef2f1; /* alternating section */ --fin-surface: #ffffff; /* cards */ --fin-surface-hover: #fbfcfc; --fin-ink: #0b1110; /* primary text, footer bg */ --fin-ink-deep: #06100f; /* quote / dark band bg */ --fin-ink-card: #0c1a18; /* card surface inside a dark band */ --fin-surface-soft: #f7faf9; /* lighter cell inside an alt band */ /* ── Color: text ───────────────────────────────── */ --fin-text: #0b1110; --fin-text-body: #2c3634; --fin-text-muted: #47514f; --fin-text-label: #55605e; --fin-text-faint: #8b9391; --fin-on-dark: #eef3f2; --fin-on-dark-soft: rgba(238, 243, 242, 0.72); --fin-on-dark-faint: rgba(238, 243, 242, 0.45); --fin-on-dark-muted: #b6c2bf; /* body copy on a dark band */ --fin-on-dark-rule: rgba(238, 243, 242, 0.35); /* underline of a link on dark */ /* ── Color: brand ─────────────────────────────── */ --fin-accent: #19b4a6; /* bright: rules, eyebrow on dark, dots */ --fin-accent-deep: #0e7c74; /* actions, links, eyebrow on light */ --fin-accent-ink: #0b1110; /* hover state of primary action */ --fin-accent-light: #5fc9be; /* data marks only (asset dots) — never text or fills */ /* ── Color: lines ─────────────────────────────── */ --fin-border: #d9e0de; --fin-border-soft: #d3dbd9; --fin-border-strong: #c9d3d1; --fin-border-dark: rgba(238, 243, 242, 0.16); --fin-border-faint: #e4eae8; /* divider inside white chrome: dropdown, modal, drawer */ /* ── Typography ───────────────────────────────── */ --fin-font-display: Archivo, Helvetica, sans-serif; /* headings, buttons, lead */ --fin-font-body: "IBM Plex Sans", Helvetica, sans-serif; --fin-font-mono: "IBM Plex Mono", monospace; /* eyebrows, labels */ --fin-display-width: 108; /* section headings — font-variation-settings: 'wdth' */ --fin-card-width: 106; /* card / entry headings */ --fin-h1: clamp(38px, 6.1vw, 94px); --fin-h2: clamp(27px, 3.3vw, 46px); --fin-h2-sm: clamp(30px, 3.1vw, 44px); --fin-h3: clamp(20px, 1.75vw, 26px); /* card + entry heading, wdth 106 */ --fin-lead: clamp(19px, 1.85vw, 28px); --fin-quote: clamp(23px, 2.7vw, 42px); --fin-body: clamp(15px, 1.1vw, 17px); --fin-small: clamp(15px, 1.1vw, 16px); --fin-label: clamp(10.5px, 0.85vw, 12px); --fin-micro: 11px; --fin-ls-h1: -0.042em; --fin-ls-h2: -0.038em; --fin-ls-h3: -0.036em; --fin-ls-lead: -0.026em; --fin-ls-mono: 0.16em; --fin-lh-h1: 0.93; --fin-lh-h2: 1.02; --fin-lh-h3: 1.04; --fin-lh-body: 1.55; --fin-lh-long: 1.65; /* ── Layout & spacing ─────────────────────────── */ --fin-max: 1600px; /* content max width */ --fin-gutter: clamp(20px, 3.9vw, 56px); /* page side padding */ --fin-section: clamp(52px, 5.6vw, 92px); /* section vertical padding */ --fin-section-sm: clamp(44px, 5vw, 78px); --fin-measure: 560px; /* the measure: text column / lead max width */ /* Right edge wins: a full-width paragraph gets NO max-width — it must reach the same right edge as headings, rules and card grids. Cap copy only when it shares a row with another element. */ --fin-gap: 24px; /* grid column gap (tight grids) */ --fin-gap-col: clamp(24px, 3vw, 56px); /* column gap in two-column text bands */ --fin-split: minmax(0, 0.9fr) minmax(0, 1.1fr); /* heading | text band, ≥960px */ --fin-cards-2: repeat(2, minmax(0, 1fr)); /* entry cards, ≥900px */ --fin-cards-3: repeat(3, minmax(0, 1fr)); /* reason grid, ≥1200px */ --fin-card-gap: clamp(14px, 1.4vw, 20px); /* gap between adjacent cards */ --fin-stack: clamp(26px, 2.8vw, 38px); /* vertical stack rhythm */ --fin-card-pad: clamp(28px, 2.6vw, 40px) clamp(22px, 2.4vw, 36px); --fin-col-min: 320px; /* card auto-fit minimum */ --fin-col-min-sm: 220px; /* footer column minimum */ /* ── Lines (one system, four jobs) ────────────── */ --fin-rule-section: 1px solid #0b1110; /* under a section heading row */ --fin-rule-hair: 1px solid #d9e0de; /* grid + card hairlines, eyebrow rule */ --fin-rule-soft: 1px solid #d3dbd9; /* inside cards, footnote rule */ --fin-rule-dark: 1px solid rgba(238,243,242,0.2);/* same hairline on dark bands */ --fin-rule-brand: 2px solid #19b4a6; /* header bottom edge only */ /* ── Header & navigation ──────────────────────── */ --fin-header-pad: clamp(14px, 1.6vw, 22px) var(--fin-gutter); --fin-header-bg: rgba(244, 247, 246, 0.94); /* + backdrop-filter: blur(10px) */ --fin-logo-h: clamp(20px, 1.7vw, 24px); --fin-nav-size: 11px; /* mono, uppercase */ --fin-nav-ls: 0.12em; --fin-nav-gap: clamp(18px, 2.1vw, 30px); --fin-menu-w: 260px; /* Platform dropdown */ --fin-menu-w-lg: 320px; /* Solutions dropdown */ --fin-menu-item: 15px; /* dropdown / drawer item */ --fin-menu-item-pad: 11px 22px; --fin-menu-bridge: 14px; /* transparent hover bridge above the panel */ --fin-login-pad: 13px 26px; /* desktop; mobile 13px 22px */ --fin-tap-min: 46px; /* minimum tap target below 960px */ /* ── Buttons (two ranks, nothing else) ────────── */ --fin-btn-pri-pad: 17px 30px; /* primary, both surfaces */ --fin-btn-pri-size: 16px; /* Archivo 500 */ --fin-btn-min: 48px; /* tap height, all viewports */ --fin-btn-pri-bg: #0e7c74; /* on light; hover #0b1110 */ --fin-btn-pri-ink: #ffffff; --fin-btn-onink-bg: #06100f; /* primary inside a teal panel; hover #ffffff */ --fin-btn-sec-size: 15px; /* text link, Archivo 500 + arrow */ --fin-btn-sec-min: 44px; --fin-btn-gap: clamp(18px, 2vw, 26px); /* between primary and secondary */ --fin-btn-arrow: 13px; /* the → glyph, always present */ /* ── Elevation & motion ───────────────────────── */ --fin-shadow-media: 0 22px 50px rgba(11, 17, 16, 0.16); --fin-shadow-menu: 0 20px 44px rgba(11, 17, 16, 0.14); --fin-ease: .18s ease; /* every hover / colour transition */ --fin-ease-reveal: cubic-bezier(.22,.61,.36,1); /* scroll reveal */ --fin-reveal-dur: .58s; /* opacity+translate reveal */ --fin-reveal-rule: .7s; /* scaleX of a hairline */ --fin-reveal-step: 55ms; /* stagger between siblings, capped at 280ms */ --fin-reveal-y: 14px; /* reveal travel */ --fin-parallax-media: 0.055; /* media drift as a share of element height (scale 1.12) */ --fin-parallax-block: 0.06; /* default [data-parallax] factor */ --fin-shadow-modal: 0 34px 90px rgba(6, 16, 15, 0.42); --fin-scrim: rgba(6, 16, 15, 0.62); /* + backdrop-filter: blur(3px) */ --fin-z-header: 40; --fin-z-modal: 90; --fin-anchor-offset: 84px; /* sticky-header offset for in-page anchors */ --fin-radius: 0px; /* the system is square by design — no rounded corners */ /* ── Forms ────────────────────────────────────── */ --fin-field-h: 50px; /* min-height, all fields incl. the select trigger */ --fin-field-pad: 13px 16px; /* select trigger: 13px 44px 13px 16px */ --fin-field-bg: #ffffff; --fin-field-border: 1px solid #d9e0de; --fin-field-border-focus: 1px solid #0e7c74; --fin-field-size: 16px; /* never below 16px — iOS zooms smaller inputs */ --fin-field-label: 11px; /* mono, uppercase, tracking 0.14em */ --fin-field-gap: clamp(14px, 1.4vw, 20px); --fin-field-required: #0e7c74; --fin-field-error: #b3261e; /* ── Breakpoints (reference values) ───────────── */ --fin-bp-mobile: 390px; --fin-bp-tablet: 834px; --fin-bp-nav: 960px; /* desktop nav → burger below this */ --fin-bp-desk: 1440px; --fin-bp-wide: 1920px; /* JS layout thresholds actually used (component width in px, min-width logic): 560 · 620 · 700 · 760 · 900 · 1080 · 1100 · 1180 · 1540 960 is the only NAV breakpoint. Do not invent new values — reuse this set. */ }