/* ========================================================================== CityFoundry AG — Design tokens Single source of truth for colour, type, radius, spacing, motion. Values extracted from the client's Figma file "Website" (key s5Q5gf9E0Jas3Kn5PKxYXt) via the Figma REST API — every number below comes from actual node data, not from eyeballing a screenshot. Reference data: ../../reference-desing/data/ Decisions: ../../Ai/DESIGN-DECISION.txt (Section 1) ========================================================================== */ /* -------------------------------------------------------------------------- FONTS — self-hosted. Google Fonts CDN is a GDPR/revDSG problem for this site (the visitor's IP is sent to Google). Never re-add the . See DESIGN-DECISION Section 14. DM Sans ships as a variable font, so one file covers 400-700. Poppins 700 is the only Poppins weight the design uses. -------------------------------------------------------------------------- */ /* Poppins 700 — headings */ @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* DM Sans variable 100-1000 — body, labels, nav */ @font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-var-latin.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-var-latin-ext.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ======================================================================== COLOUR ======================================================================== */ /* --- Surfaces & brand (Figma counts across all 7 page frames) ---------- */ --cf-teal: #004045; /* x246 navbar, hero, CTA, footer ground */ --cf-ink: #0A3533; /* x173 headings on light, dark button */ --cf-white: #FFFFFF; /* x125 cards, section ground */ --cf-sky: #BCD8DA; /* x118 muted text + hairline on dark */ --cf-cyan: #00E4F3; /* x74 accent, CTA on dark, active nav */ --cf-cream: #F5F0EB; /* x65 warm section bg, inner box */ --cf-crystal: #E5F6FF; /* x62 light section bg, badge bg */ --cf-teal-2: #00555C; /* x4 minor variant */ --cf-teal-muted: #5F7572; /* muted label on light (team role, partner)*/ /* NOTE on --cf-cyan: the brand guideline slide printed HEX #00DCB9 next to RGB 0,228,243 — two different colours. #00E4F3 is the RGB reading and it is what the client's own Figma uses, 74 times. That mismatch is the root cause of the client's "colours do not seem to be aligned with the CI" remark. Do not revert to #00DCB9. */ /* --- Lines & fields ---------------------------------------------------- */ --cf-border: #D6DED9; /* card border, 1px */ --cf-border-2: #D6DDD9; /* input border, 1px */ --cf-field: #EEF5F4; /* input background */ --cf-placeholder: #7FA3A2; /* --- States ------------------------------------------------------------ */ --cf-error: #EB5757; --cf-error-strong: #D32F2F; --cf-error-bg: #FFDADA; --cf-success: #27AE60; /* --- Channel triplets ------------------------------------------------- The named hairline tokens below cover the common alphas. When a rule needs an alpha that is not in that list, compose it from these instead of writing a new literal: box-shadow: 0 30px 70px rgb(var(--cf-ink-rgb) / .24); This is what keeps every colour in the site traceable to this file. */ --cf-ink-rgb: 10 53 51; --cf-teal-rgb: 0 64 69; --cf-white-rgb: 255 255 255; --cf-sky-rgb: 188 216 218; --cf-border-rgb: 214 222 217; --cf-cyan-rgb: 0 228 243; --cf-error-rgb: 235 87 87; /* --- Hairlines --------------------------------------------------------- */ --cf-line-ink-07: rgba(10, 53, 51, .07); --cf-line-ink-08: rgba(10, 53, 51, .08); --cf-line-ink-10: rgba(10, 53, 51, .10); --cf-line-ink-12: rgba(10, 53, 51, .12); --cf-line-ink-14: rgba(10, 53, 51, .14); --cf-line-ink-16: rgba(10, 53, 51, .16); --cf-line-ink-18: rgba(10, 53, 51, .18); --cf-line-light-10: rgba(255, 255, 255, .10); --cf-line-light-12: rgba(255, 255, 255, .12); --cf-line-light-16: rgba(255, 255, 255, .16); --cf-line-light-20: rgba(255, 255, 255, .20); --cf-line-light-28: rgba(255, 255, 255, .28); /* Soft Sky at 30% — the exact hairline the Figma navbar and footer use (stroke #BCD8DA, opacity 0.302, 1px inside). */ --cf-line-sky-30: rgba(188, 216, 218, .30); /* Figma draws card hairlines at 40% of #D6DED9, not full strength. */ --cf-line-border-40: rgb(var(--cf-border-rgb) / .40); /* --- Cyan at low opacity (Webinar badge, focus glow) ------------------- */ --cf-cyan-14: rgba(0, 228, 243, .14); --cf-cyan-24: rgba(0, 228, 243, .24); /* --- Interaction ------------------------------------------------------ Hover shades. These are the only two colours in the system that are not straight out of the Figma — it has no hover states — so they are derived: cyan one step lighter, ink one step lighter. Defined here so no stylesheet has to invent its own. */ --cf-cyan-hover: #4DEFF8; --cf-ink-hover: #12433F; /* ======================================================================== TYPOGRAPHY Poppins 700 headings · DM Sans 400/500/600/700 everything else. No italic anywhere — 565 text nodes across the Figma file, zero italic. No Poppins 500 — the design only uses Poppins 700. ======================================================================== */ --cf-font-head: 'Poppins', system-ui, -apple-system, sans-serif; --cf-font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --cf-font-doc: 'DM Sans', system-ui, -apple-system, sans-serif; /* Sizes — desktop (>=1200px). Mobile scale lives in base.css. */ --cf-fs-h1: 56px; --cf-lh-h1: 1.10; --cf-fs-h1-cta: 48px; --cf-lh-h1-cta: 1.10; --cf-fs-h2: 40px; --cf-lh-h2: 1.15; --cf-fs-h3: 28px; --cf-lh-h3: 1.20; --cf-fs-h4: 20px; --cf-lh-h4: 1.60; --cf-fs-h5: 18px; --cf-lh-h5: 1.65; --cf-fs-body: 16px; --cf-lh-body: 1.50; --cf-lh-body-dark: 1.60; /* Figma 25.6/16 */ --cf-fs-body-sm: 15px; --cf-lh-body-sm: 1.55; --cf-fs-body-xs: 14px; --cf-lh-body-xs: 1.50; --cf-fs-label: 14px; --cf-lh-label: 1.30; --cf-fs-nav: 13px; --cf-lh-nav: 1.30; --cf-fs-eyebrow: 12px; --cf-lh-eyebrow: 1.30; /* Figma has letter-spacing 0 everywhere. Uppercase micro-labels are unreadable at 12-13px without tracking, so this is one deliberate deviation — documented in HOMEPAGE-BRIEF Section 2. */ --cf-ls-caps: .04em; /* ======================================================================== RADIUS Figma: 16 dominant (x77), 8 (x44), 30 (x37), 12 (x25), 999 (x16). The brand guidelines' 44px asymmetric device does NOT appear in the client's design — removed. ======================================================================== */ --cf-r-card: 16px; --cf-r-inner: 12px; --cf-r-btn: 8px; --cf-r-pill: 30px; --cf-r-round: 999px; /* ======================================================================== LAYOUT ======================================================================== */ --cf-shell: 1280px; /* container — Figma 1440 frame minus 2x80 */ --cf-shell-narrow: 1120px; /* Situationsfinder card */ --cf-shell-text: 800px; /* centred CTA copy */ --cf-gutter: 80px; --cf-gutter-md: 40px; --cf-gutter-sm: 20px; --cf-sec-pad: 120px; /* standard section vertical padding */ --cf-sec-pad-alt: 100px; /* Situationsfinder wrapper */ --cf-gap-2col: 32px; --cf-gap-4col: 24px; --cf-gap-head: 16px; /* badge -> h2 -> intro */ --cf-gap-sec: 56px; /* section header -> content */ --cf-gap-card: 32px; /* inside a 2-col card */ --cf-pad-card: 48px; /* 2-col card padding */ --cf-pad-card-sm: 32px; /* 4-col card padding */ --cf-pad-finder: 64px; /* Situationsfinder card padding */ /* ======================================================================== MOTION The client explicitly liked the movement: "I love the presence of some pictures and also that they move (also boxes and stuff)". Keep it. Everything below is disabled under prefers-reduced-motion (base.css). ======================================================================== */ --cf-ease: cubic-bezier(.16, 1, .3, 1); --cf-ease-in-out: cubic-bezier(.76, 0, .24, 1); --cf-reveal-shift: 24px; --cf-reveal-duration: .7s; --cf-stagger: 80ms; --cf-zoom-scale: 1.06; --cf-zoom-duration: 1s; /* ======================================================================== LEGACY ALIASES — deprecated, do not use in new CSS. Ten page stylesheets have not been migrated yet (karriere, rechtliches, ueber-uns, pillar, kontakt, leistungen, referenzen, ressourcen, beitrag, inner). They still reference the old token names. Mapping them here keeps those pages rendering AND pulls them onto the new palette for free, instead of leaving them on the off-brand colours. Delete each line as its page is rebuilt. Target: this whole block gone. ======================================================================== */ --cf-ink-2: #0d3a36; --cf-muted: var(--cf-teal); /* was #5E8386 */ --cf-muted-dark: var(--cf-sky); /* was #9fbfbc */ --cf-link: var(--cf-teal-2); /* was #00706F */ --cf-surface: var(--cf-cream); /* was #F3F7F6 */ --cf-surface-2: var(--cf-crystal); /* was #E8F5F3 */ --cf-alert: var(--cf-error); /* was #B4472C */ --cf-yellow: var(--cf-cream); /* Bright Ember removed — not in Figma */ --cf-radius-pill: var(--cf-r-round); --cf-radius-md: var(--cf-r-card); --cf-radius-sm: var(--cf-r-inner); /* The signature gradient does not appear once in the client's Figma file — zero gradient fills across all 7 page frames — and the client flagged the old treatment as off-CI. These aliases flatten it to quiet on-brand surfaces so un-migrated pages stay coherent rather than rainbow. */ --cf-grad-1: var(--cf-crystal); --cf-grad-2: var(--cf-cream); --cf-grad-3: var(--cf-cream); --cf-grad-4: var(--cf-cyan); --cf-gradient: linear-gradient(135deg, var(--cf-crystal) 0%, var(--cf-cream) 100%); --cf-gradient-conic: radial-gradient(circle at 50% 40%, var(--cf-crystal) 0%, var(--cf-cream) 100%); }