/* ========================================================================= Visualista Design System — colors_and_type.css Premium · Dark · Gold-Akzent · Schweizer Präzision ========================================================================= */ /* --- Web fonts (Google Fonts stand-ins for licensed files) ----------------- Originals: Headings: Neuzeit Grotesk Bold Cond (DIN 30640 Std) Body: Helvetica Neue LT Pro 45 Light / 55 Roman Nearest Google Fonts substitutes (flagged for the user): Headings → Oswald 700 (condensed, bold, geometric) Body → Inter 300 / 400 (clean neutral grotesque) If the licensed .otf files are added to /fonts, @font-face blocks below will take priority over the Google fallbacks. --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap'); /* Licensed-font slots (currently empty — drop .otf/.woff2 into /fonts and uncomment to activate) */ /* @font-face { font-family: 'Neuzeit Grotesk'; src: url('fonts/NeuzeitGrotesk-BoldCond.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-Lt.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Pro'; src: url('fonts/HelveticaNeueLTPro-Roman.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } */ :root { /* ============ COLORS ============ */ /* Brand palette (exakt per CD) */ --vl-primary: #282828; /* Haupttext · dunkle Hintergründe */ --vl-secondary: #4d4d4d; /* sekundärer Text · subtile Linien */ --vl-light: #969696; /* Captions · Trennlinien · Placeholder */ --vl-accent: #c99a22; /* CTAs · Highlights · Premium-Akzent */ --vl-white: #ffffff; /* Extended surfaces (für Dark-Layouts) */ --vl-black: #0f0f0f; --vl-bg-deep: #1a1a1a; /* tiefer als Primary, für Hero-Backgrounds */ --vl-bg-raised: #242424; --vl-hairline: rgba(255, 255, 255, 0.08); --vl-hairline-dark: rgba(40, 40, 40, 0.12); /* Accent shades — GOLD (nur sparsam!) */ --vl-accent-hover: #e0ac2a; /* hellere Variante für Hover */ --vl-accent-press: #a87f17; /* dunkler für Press */ --vl-accent-soft: rgba(201, 154, 34, 0.12); /* Glow / Tinted BG */ --vl-accent-line: rgba(201, 154, 34, 0.40); /* Neutral scale (abgeleitet — für Tabellen, Surfaces, Disabled) */ --vl-gray-50: #f6f6f6; --vl-gray-100: #ededed; --vl-gray-200: #dcdcdc; --vl-gray-300: #c4c4c4; --vl-gray-400: #969696; /* = --vl-light */ --vl-gray-500: #6f6f6f; --vl-gray-600: #4d4d4d; /* = --vl-secondary */ --vl-gray-700: #3a3a3a; --vl-gray-800: #282828; /* = --vl-primary */ --vl-gray-900: #1a1a1a; /* Semantic roles — LIGHT mode default */ --fg-1: var(--vl-primary); /* primary text */ --fg-2: var(--vl-secondary); /* secondary text */ --fg-3: var(--vl-light); /* captions · muted */ --fg-accent: var(--vl-accent); --fg-on-dark: var(--vl-white); --bg-1: var(--vl-white); /* default surface */ --bg-2: var(--vl-gray-50); /* secondary surface */ --bg-3: var(--vl-gray-100); /* tertiary / raised */ --bg-dark: var(--vl-primary); /* dark sections */ --bg-deep: var(--vl-bg-deep); /* hero · full-bleed */ --border-1: var(--vl-gray-200); --border-2: var(--vl-gray-300); --border-strong: var(--vl-primary); --border-gold: var(--vl-accent); /* ============ TYPE ============ */ --font-heading: 'Neuzeit Grotesk', 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif; --font-body: 'Helvetica Neue LT Pro', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale (aus CD) — responsive via clamp */ --fs-display: clamp(48px, 6vw, 72px); --fs-h1: clamp(36px, 4.2vw, 48px); --fs-h2: clamp(26px, 2.8vw, 32px); --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 20px; --fs-body: 18px; --fs-body-sm: 15px; --fs-caption: 12px; --fs-overline: 11px; /* Line heights — condensed heads tight, body airy */ --lh-display: 0.95; --lh-heading: 1.08; --lh-body: 1.55; --lh-tight: 1.25; /* Letter spacing — Neuzeit heads get slight positive tracking in uppercase */ --ls-display: -0.01em; --ls-heading: 0; --ls-upper: 0.08em; /* uppercase labels */ --ls-overline: 0.18em; /* small eyebrow text */ /* ============ SPACE, RADII, SHADOW ============ */ /* Premium = generous whitespace · 8pt grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radii — minimal, architectonic. Cards nearly square. */ --r-none: 0; --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* Shadows — subtle, used sparingly on light surfaces */ --shadow-1: 0 1px 2px rgba(40, 40, 40, 0.06), 0 1px 4px rgba(40, 40, 40, 0.04); --shadow-2: 0 4px 10px rgba(40, 40, 40, 0.08), 0 1px 2px rgba(40, 40, 40, 0.04); --shadow-3: 0 12px 32px rgba(40, 40, 40, 0.12), 0 2px 6px rgba(40, 40, 40, 0.06); --shadow-gold-glow: 0 0 0 1px var(--vl-accent-line), 0 6px 24px rgba(201, 154, 34, 0.22); /* Motion — Swiss: präzise, nie verspielt */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; } /* ============ SEMANTIC ELEMENT DEFAULTS ============ */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-1); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .vl-heading { font-family: var(--font-heading); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--fg-1); margin: 0; text-transform: uppercase; } h1, .vl-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); } h2, .vl-h2 { font-size: var(--fs-h2); } h3, .vl-h3 { font-size: var(--fs-h3); } h4, .vl-h4 { font-size: var(--fs-h4); } .vl-display { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } .vl-overline { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--fg-3); } .vl-eyebrow { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 13px; letter-spacing: var(--ls-upper); text-transform: uppercase; color: var(--fg-accent); } p, .vl-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; text-wrap: pretty; } .vl-body-lg { font-size: var(--fs-body-lg); line-height: 1.5; } .vl-body-sm { font-size: var(--fs-body-sm); } .vl-caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: 0.02em; } small, .vl-small { font-size: var(--fs-body-sm); color: var(--fg-2); } a { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--fg-accent); } hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-6) 0; } ::selection { background: var(--vl-accent); color: var(--vl-white); } /* Dark-mode scoped class — apply to sections, not html */ .vl-on-dark { background: var(--bg-dark); color: var(--fg-on-dark); } .vl-on-dark h1, .vl-on-dark h2, .vl-on-dark h3, .vl-on-dark h4, .vl-on-dark h5, .vl-on-dark h6 { color: var(--fg-on-dark); } .vl-on-dark p, .vl-on-dark .vl-body { color: rgba(255,255,255,0.78); } .vl-on-dark .vl-caption, .vl-on-dark .vl-overline { color: rgba(255,255,255,0.55); } .vl-on-dark a { color: var(--fg-on-dark); } .vl-on-dark a:hover { color: var(--fg-accent); }