/* ============================================================ EURO PEPTIDE X — Foundations: Color + Type Brand: French biotech / peptide e-commerce (France & Belgique) Design language: Stripe-style architecture (thin display type, gradient-mesh hero, pill buttons, tabular figures) recolored to the Euro Peptide X navy → blue → teal → green identity. ------------------------------------------------------------ Font: Söhne is proprietary. Substitute = Hanken Grotesk (Google Fonts) at weight 300, font-feature-settings "ss01"/"tnum". Load in HTML: ============================================================ */ :root { /* ---- Brand & Primary (teal, the CTA color) ---- */ --primary: #0e8a7d; /* signature teal — filled CTA */ --primary-deep: #0a6b61; /* hover / mid gradient stop */ --primary-press: #084e47; /* pressed state */ --primary-soft: #2bb39e; /* lighter teal, UI accents */ --primary-bg-subdued: #c7ece5; /* pale teal tag background */ /* ---- Brand accents (from logo gradient) ---- */ --accent-green: #29b196; /* the rising-arrow green */ --accent-blue: #1a6f9e; /* mid blue in the helix */ --accent-deep-blue: #134e75; /* deeper helix blue */ --brand-dark-900: #062436; /* deep navy — dark surfaces */ /* ---- Ink (text) ---- */ --ink: #0a2a44; /* default body text, deep navy */ --ink-secondary: #2a3f54; /* secondary text on white */ --ink-mute: #5f7488; /* helper / captions / labels */ --ink-mute-2: #61718a; /* nav muted */ --on-primary: #ffffff; /* text on teal / navy */ /* ---- Surfaces ---- */ --canvas: #ffffff; /* default page background */ --canvas-soft: #f3f8f8; /* cool off-white feature band */ --canvas-mint: #e9f5f1; /* warm-cool mint interlude */ --canvas-sand: #f4efe4; /* optional cream interlude */ --hairline: #e1e9ee; /* 1px borders, cards, tables */ --hairline-input: #acc6d4; /* cooler hairline for inputs */ /* ---- Gradient-mesh stops (atmospheric hero backdrop) ---- */ --mesh-1: #e9f5f1; /* pale mint */ --mesh-2: #2bb39e; /* teal */ --mesh-3: #1a6f9e; /* blue */ --mesh-4: #134e75; /* deep blue */ --mesh-5: #29b196; /* green */ --mesh-6: #062436; /* navy anchor */ /* ---- Semantic (used in product UI only) ---- */ --success: #1c8c5f; --warning: #b07d22; --danger: #c1402f; --info: var(--accent-blue); /* ---- Elevation ---- */ --shadow-1: 0 1px 3px rgba(6,36,54,.08); --shadow-2: 0 8px 24px rgba(6,36,54,.10), 0 2px 6px rgba(6,36,54,.05); --shadow-3: 0 18px 48px rgba(6,36,54,.14), 0 4px 12px rgba(6,36,54,.06); /* ---- Radius scale ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; /* ---- Spacing scale (8px base) ---- */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-huge: 64px; /* ---- Type families ---- */ --font-display: "Hanken Grotesk", "Söhne", "SF Pro Display", system-ui, -apple-system, sans-serif; --font-body: "Hanken Grotesk", "Söhne", "SF Pro Text", system-ui, -apple-system, sans-serif; /* ---- Type scale tokens (size / weight / line-height / tracking) ---- */ --display-xxl: 300 56px/1.03 var(--font-display); --display-xl: 300 48px/1.15 var(--font-display); --display-lg: 300 32px/1.10 var(--font-display); --display-md: 300 26px/1.12 var(--font-display); --heading-lg: 300 22px/1.10 var(--font-display); --heading-md: 300 20px/1.40 var(--font-display); --heading-sm: 400 18px/1.40 var(--font-display); --body-lg: 300 16px/1.40 var(--font-body); --body-md: 300 15px/1.40 var(--font-body); --body-tabular:300 14px/1.40 var(--font-body); --button-md: 500 16px/1.0 var(--font-display); --button-sm: 500 14px/1.0 var(--font-display); --caption: 400 13px/1.40 var(--font-body); --micro: 300 11px/1.40 var(--font-body); --micro-cap: 600 10px/1.15 var(--font-display); } /* ============================================================ BASE / SEMANTIC ELEMENT STYLES ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--body-md); color: var(--ink); background: var(--canvas); font-feature-settings: "ss01"; /* stylistic-set on globally */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Display & headings — thin weight + negative tracking is the signature */ h1, .h1 { font: var(--display-xxl); letter-spacing: -1.4px; color: var(--ink); margin: 0 0 .4em; text-wrap: balance; } h2, .h2 { font: var(--display-xl); letter-spacing: -0.96px; color: var(--ink); margin: 0 0 .4em; text-wrap: balance; } h3, .h3 { font: var(--display-lg); letter-spacing: -0.64px; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; } h4, .h4 { font: var(--display-md); letter-spacing: -0.26px; color: var(--ink); margin: 0 0 .5em; } h5, .h5 { font: var(--heading-lg); letter-spacing: -0.22px; color: var(--ink); margin: 0 0 .5em; } h6, .h6 { font: var(--heading-md); letter-spacing: -0.20px; color: var(--ink); margin: 0 0 .5em; } p, .body { font: var(--body-md); color: var(--ink-secondary); margin: 0 0 1em; text-wrap: pretty; } .lead { font: var(--body-lg); color: var(--ink-secondary); } small, .caption { font: var(--caption); color: var(--ink-mute); letter-spacing: -.39px; } .eyebrow { font: var(--micro-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--primary-deep); } a, .link { color: var(--primary); text-decoration: none; } a:hover, .link:hover { color: var(--primary-deep); } /* Tabular figures — every money / numeric / count cell */ .tnum, .num, .price, td.num { font-feature-settings: "tnum"; letter-spacing: -.42px; } code, pre, .mono { font-family: "Söhne Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; } ::selection { background: var(--primary-soft); color: #fff; } /* ════════════════════════════════════════════════ DARK MODE — applied via data-theme="dark" on Auto-detected from prefers-color-scheme, or toggled manually. ════════════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; /* Brand (slightly brighter teal for dark surfaces) */ --primary: #1abfad; --primary-deep: #169e8e; --primary-press: #117b6e; --primary-soft: #30d4c0; --primary-bg-subdued: #0d2e2b; --accent-green: #24c5a0; --accent-blue: #2286b8; --accent-deep-blue: #1a6590; --brand-dark-900: #030c18; /* Ink / Text */ --ink: #d6ecf8; --ink-secondary: #92b5ca; --ink-mute: #597584; --ink-mute-2: #567284; /* Surfaces */ --canvas: #0b1929; --canvas-soft: #101e2d; --canvas-mint: #0c2824; --canvas-sand: #181510; --hairline: #1a2f46; --hairline-input: #223d54; /* Mesh (hero backdrop, stays rich) */ --mesh-1: #0c2824; --mesh-2: #0e5e52; --mesh-3: #0d4564; --mesh-4: #082c4c; --mesh-5: #0d5448; --mesh-6: #030c18; /* Semantic */ --success: #1db87c; --warning: #d49e2e; --danger: #e05040; /* Elevation (stronger contrast on dark) */ --shadow-1: 0 1px 4px rgba(0,0,0,.42); --shadow-2: 0 8px 28px rgba(0,0,0,.48), 0 2px 8px rgba(0,0,0,.28); --shadow-3: 0 20px 52px rgba(0,0,0,.62), 0 4px 14px rgba(0,0,0,.32); } /* Base transition for theme switching */ html { transition: none; } body { transition: background .28s, color .28s; } [data-theme="dark"] body { background: var(--canvas); color: var(--ink); }