/* ===================================================================== ZÜRICH SOUND: DESIGN TOKENS The single source of truth for colours, type, spacing, shapes and motion. styles.css only uses these variables, so changing a value here updates the whole site. Two layers: 1. Base values (the raw palette, font stacks, scales) 2. Roles (what a value is FOR). Components use roles, so you can e.g. swap the accent colour without touching any component. ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. COLOUR PALETTE (base values) ------------------------------------------------------------------- */ --palette-white: #ffffff; --palette-ink: #0a0a0a; /* near-black, softer than pure #000 */ --palette-red: #ff2e31; /* signature red */ --palette-red-deep: #d0021b; /* darker red, e.g. lead image placeholder */ --palette-blue: #0099ff; /* signature blue, used for the main title */ --title-private: var(--palette-blue); /* ZÜRICH SOUND on the Privat page */ --title-business: #ffffff; /* ZÜRICH SOUND on the Business page */ --palette-grey-100: #f5f5f5; /* soft surfaces */ --palette-grey-200: #ececec; /* light tiles */ --palette-grey-900: #161616; /* dark tiles */ --palette-grey-600: #555555; /* secondary text on light surfaces */ --palette-whatsapp: #25d366; /* WhatsApp brand green, icon only */ /* ------------------------------------------------------------------- 2. COLOUR ROLES (use these in components) ------------------------------------------------------------------- */ --color-bg: var(--palette-white); /* page background */ --color-text: var(--palette-ink); /* default text */ --color-text-muted: var(--palette-grey-600);/* taglines, secondary info */ --color-title: var(--title-private); /* the big ZÜRICH SOUND title */ --color-accent: var(--palette-blue); /* small highlights only: hovers, focus, FAQ "+", section labels (same blue as the title) */ --color-label: var(--palette-ink); /* small mono labels (header, form fields) */ --color-card-dark: var(--palette-ink); /* footer card */ --color-tile-dark: var(--palette-grey-900);/* dark boxes */ --color-tile-light: var(--palette-grey-200);/* light boxes */ --color-card-text: var(--palette-white); /* text on the footer card */ --color-tile-dark-text: var(--palette-white); /* text on dark boxes */ --color-tile-light-text: var(--palette-ink); /* text on light boxes */ --color-on-surface: var(--palette-ink); /* text on the floating buttons */ --color-brand: var(--palette-blue); /* active DE/EN button */ --color-on-accent: var(--palette-white); /* text placed on the accent colour */ --color-surface: var(--palette-white); /* floating buttons, map link */ --color-surface-soft: var(--palette-grey-100);/* grey info card */ --color-whatsapp: var(--palette-whatsapp); --color-selection-bg: var(--color-accent); --color-selection-text:var(--color-on-accent); /* ------------------------------------------------------------------- 3. TYPOGRAPHY Fonts are loaded from Google Fonts in index.html. If you change a family here, update that too. ------------------------------------------------------------------- */ /* Families */ --font-display: "Anton", Impact, sans-serif; /* big title only, always uppercase */ --font-sans: "DM Sans", system-ui, sans-serif; /* body, headings, buttons */ --font-mono: "Space Mono", ui-monospace, monospace; /* small labels, links */ /* Weights (Anton only has one weight, 400) */ --weight-regular: 400; /* large footer type */ --weight-medium: 500; /* default UI + body */ --weight-bold: 700; /* mono links in the footer */ /* Size scale */ --text-label: 12px; /* mono labels, buttons */ --text-body: 14px; /* intro line, footer links */ --text-lead: clamp(22px, 2.4vw, 32px); /* about paragraph */ --text-heading: clamp(32px, 2.8vw, 48px); /* footer heading */ --text-contact: clamp(28px, 2.8vw, 48px); /* email / phone in the footer */ /* the main title has no fixed size: script.js scales it to the full column width */ /* Line heights */ --leading-display: .9; --leading-snug: 1.15; --leading-normal: 1.2; --leading-button: 1; /* Letter spacing */ --tracking-label: .04em; /* uppercase mono */ --tracking-tight: -.02em; /* lead text */ --tracking-tighter:-.04em; /* large headings */ /* ------------------------------------------------------------------- 4. SPACING ------------------------------------------------------------------- */ --space-3xs: 2px; --space-2xs: 3px; --space-xs: 6px; --space-sm: 8px; --space-md: 16px; --space-lg: 20px; --space-xl: 32px; --space-2xl: 64px; --gutter: clamp(16px, 2.5vw, 48px); /* left/right page margin */ --grid-gap: var(--space-md); /* gap between cards */ --float-inset: 18px; /* distance of floating buttons from the screen edge */ /* Vertical rhythm of the big sections */ --section-about: 22vh; --section-footer-top: 30vh; --section-footer-end: 12vh; /* page ends soon after the footer (the flare may touch the card a little at the very end) */ --intro-offset: clamp(160px, 30vh, 280px); /* ------------------------------------------------------------------- 5. LAYOUT Breakpoint (CSS can't use variables inside @media, so it's written out in styles.css): mobile = max-width 809px, desktop = 810px and up. ------------------------------------------------------------------- */ --page-max-width: 1840px; --about-max-width: 30ch; --footer-min-height: 528px; /* ------------------------------------------------------------------- 6. SHAPES ------------------------------------------------------------------- */ --radius-card: 12px; /* images + footer card (WebGL reads this too) */ --radius-control: 8px; /* floating buttons */ --radius-inner: 6px; /* items inside a control, e.g. DE/EN buttons */ --radius-round: 50%; /* cursor */ --cursor-size: 14px; /* ------------------------------------------------------------------- 7. ELEVATION ------------------------------------------------------------------- */ --shadow-float: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .08); /* ------------------------------------------------------------------- 8. MOTION Scroll smoothness and the bottom flare live in script.js (Lenis "lerp" and the FLARE object). ------------------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* soft "expo-like" ease */ --duration-fast: .25s; /* colour changes */ --duration-base: .4s; /* hovers, fades */ --duration-slow: .5s; /* movement */ /* ------------------------------------------------------------------- 9. LAYERS (z-index) ------------------------------------------------------------------- */ --z-webgl: 0; /* canvas with the images */ --z-page: 1; /* all page content */ --z-float: 40; /* GET IN TOUCH + language switch */ --z-cursor: 100; } /* ===================================================================== BUSINESS MODE (html[data-audience="business"]) Black & white: the greys are the exact negative of Privat (so the growing "negative cursor" circle shows them correctly), the title is white and the small accents are grey, no colour. The switch between both modes is animated in script.js. ===================================================================== */ html[data-audience="business"] { --color-bg: #000000; /* inverse of #ffffff */ --color-text: #f5f5f5; /* inverse of #0a0a0a */ --color-text-muted: #aaaaaa; /* inverse of #555555 */ --color-title: var(--title-business); --color-accent: #8c8c8c; /* grey highlights, readable on black and on the light footer card */ --color-brand: #f5f5f5; /* active DE/EN: white */ --color-label: #f5f5f5; --color-on-accent: #000000; --color-surface: #000000; /* floating buttons turn black */ --color-surface-soft: #0a0a0a; /* inverse of #f5f5f5 */ --color-on-surface: #f5f5f5; --color-card-dark: #f5f5f5; /* footer card */ --color-card-text: #000000; --color-tile-dark: #e9e9e9; /* inverse of #161616 */ --color-tile-dark-text: #000000; --color-tile-light: #131313; /* inverse of #ececec */ --color-tile-light-text: #f5f5f5; --shadow-float: 0 1px 2px rgba(255, 255, 255, .08), 0 4px 16px rgba(255, 255, 255, .08); }