/* ============================================================ PHYSIO MENTORING — design tokens Brand: Manuel Rujano · "Die gesunde Praxis." ------------------------------------------------------------ Two foundations only — keep this file lean. 1. Colour scale — the BRAND palette is exactly five: three pillars (anthracite · cyan · coral) + black + white. Everything else is a neutral or a derived alias. 2. Type scale (Outfit primary, Instrument Serif accent) Imported as a single stylesheet by every preview/* card, every UI-kit screen, and the slide HTMLs. ============================================================ */ /* --- Webfonts ------------------------------------------------ */ /* Outfit: primary sans — geometric, rounded terminals, closest Google-Fonts match for the wordmark. FLAGGED: not the brand's licensed font, please drop the .otf/.ttf into /fonts to replace. */ /* Instrument Serif: warm classical serif used SPARINGLY for pull-quotes and the "menschlich" pillar. */ /* Self-hosted webfonts — no external requests to fonts.googleapis.com. Outfit + Instrument Serif live as .woff2 in /fonts and are declared in fonts.css (latin + latin-ext subsets). */ @import url("fonts.css"); :root { /* ----- BRAND (the only five) ------------------------------ */ /* Foundations */ --pm-black: #000000; /* brand black */ --pm-white: #ffffff; /* brand white */ /* The three pillars — every layout with 3 slots maps to these. */ --pm-pillar-wirtschaft: #3d4f54; /* 01 — anthracite, stability */ --pm-pillar-organisation: #00b0ff; /* 02 — cyan, signal / practice */ --pm-pillar-menschlich: #ff6584; /* 03 — coral, humanity, Herzlichkeit */ /* ----- Brand gradient (page canvas) ----------------------- */ /* The ONE permitted gradient: cyan → coral (Pillar 02 → 03). */ /* Held at ~10% intensity over white so it reads as a tinted */ /* atmosphere, not a saturated colour block. Wirtschaftlich- */ /* keit (01) stays solid; this gradient carries the warm, */ /* human spectrum of the practice. */ --pm-bg-tint-cyan: color-mix(in oklab, var(--pm-pillar-organisation) 10%, white); --pm-bg-tint-coral: color-mix(in oklab, var(--pm-pillar-menschlich) 10%, white); --pm-bg-gradient: linear-gradient( 135deg, var(--pm-bg-tint-cyan) 0%, var(--pm-bg-tint-coral) 100% ); /* ----- Aliases — keep legacy names working ---------------- */ /* `ink` historically meant the dark text colour; it now */ /* points at brand black. The logo SVGs keep their original */ /* hex (#12272e) baked in — they are discrete artefacts. */ --pm-ink: var(--pm-black); --pm-ink-press: #1a1a1a; --pm-cyan: var(--pm-pillar-organisation); --pm-cyan-press:#0094d6; --pm-cyan-soft: #cfeeff; --pm-coral: var(--pm-pillar-menschlich); /* ----- Neutrals — pure greyscale, no tint ----------------- */ /* Used for surfaces, rules and secondary text only. */ --pm-paper: #fafafa; /* near-white surface (cards on gradient) */ --pm-paper-2: #f1f1f1; /* inset / alt band */ --pm-line-soft: #e5e5e5; --pm-line: #d4d4d4; /* hairline rules, 1-px borders */ --pm-mute-2: #a3a3a3; /* tertiary / captions */ --pm-mute: #525252; /* secondary body text on light */ /* ----- Semantic surfaces (light theme) -------------------- */ /* --bg is the PAGE canvas → brand gradient. */ /* --bg-elev / --bg-inset are SOLID surfaces that sit ON it. */ --bg: var(--pm-bg-gradient); --bg-solid: var(--pm-white); /* fallback solid for solid-only contexts */ --bg-elev: var(--pm-white); --bg-inset: var(--pm-paper-2); --fg: var(--pm-black); --fg-mute: var(--pm-mute); --fg-faint: var(--pm-mute-2); --line: var(--pm-line); --line-soft: var(--pm-line-soft); --accent: var(--pm-cyan); --on-accent: var(--pm-black); /* ----- Status (used very rarely; no traffic-light dashboards) --- */ --ok: #2f7a51; --warn: #c08a2a; --err: #b04231; /* ----- Type ----------------------------------------------- */ --font-sans: "Outfit", "Helvetica Neue", Arial, sans-serif; --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — modular, designed for editorial reading. */ --t-display: clamp(48px, 6.4vw, 88px); --t-h1: clamp(36px, 4.2vw, 56px); --t-h2: clamp(28px, 3.0vw, 40px); --t-h3: 24px; --t-h4: 19px; --t-body: 17px; --t-body-sm: 15px; --t-caption: 13px; --t-eyebrow: 12px; /* Line heights */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.55; --lh-relaxed: 1.7; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; /* eyebrows, all-caps labels */ --ls-mega: 0.14em; /* Weights — Outfit ships 300/400/500/600/700 */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ----- Spacing scale (4-px base) -------------------------- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ----- Radii — kept restrained; brand is "direkt" --------- */ --r-0: 0; --r-1: 2px; --r-2: 4px; /* default — cards, inputs */ --r-3: 8px; /* large cards */ --r-4: 14px; /* hero blocks */ --r-pill: 999px; /* buttons (full-pill OR --r-2) */ /* ----- Elevation — minimal. Flat first, shadow only when something genuinely lifts (modal, dropdown). ------ */ /* Shadows are pure black at low opacity — the brand gradient */ /* provides the colour, shadows just provide depth. */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.06); --shadow-2: 0 6px 16px -8px rgba(0, 0, 0, 0.18), 0 2px 4px -2px rgba(0, 0, 0, 0.08); --shadow-3: 0 24px 48px -16px rgba(0, 0, 0, 0.22), 0 8px 16px -8px rgba(0, 0, 0, 0.12); /* ----- Motion -------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ============================================================ Element defaults — apply these on any document that pulls in this file. ============================================================ */ html, body { /* The page canvas is the brand cyan→coral gradient. */ /* `fixed` attachment keeps it stable while scrolling so it */ /* reads as a backdrop, not a repeating texture. */ background: var(--bg) fixed; background-attachment: fixed; min-height: 100%; color: var(--fg); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: 0; color: var(--fg); text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: var(--lh-tight); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); font-weight: var(--w-medium); } p { margin: 0; text-wrap: pretty; } small, .pm-caption { font-size: var(--t-caption); color: var(--fg-mute); } /* Eyebrow / kicker — used a lot on this brand. Numbers + word. */ .pm-eyebrow { font-size: var(--t-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-mute); font-weight: var(--w-medium); } /* Display — reserve for hero / quote moments. */ .pm-display { font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--w-semibold); } /* Serif accent — pull-quotes, the "human" voice. */ .pm-serif { font-family: var(--font-serif); font-weight: var(--w-regular); letter-spacing: 0; } .pm-serif.italic { font-style: italic; } /* Mono — used only for numbered tokens / data dashes. */ .pm-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Hairline rule — the brand's preferred separator. */ .pm-rule { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }