/* ============================================================ Marco Schierhorn — Design Foundations Colors + Type tokens for marcoschierhorn.de Font: Montserrat (loaded via Google Fonts in HTML ) ============================================================ */ :root { /* ---- Brand color primitives ---- */ --blue: #174F78; /* primary — headings, links, key marks */ --blue-deep: #0F3A5A; /* darker blue for hover / dense type on light */ --blue-tint: #E7EEF4; /* very light blue wash for quiet surfaces */ --yellow: #FAB957; /* accent — thin lines, small highlights ONLY */ --yellow-soft: #FCE3B4; /* faint accent wash, used rarely */ --text: #2B2F36; /* primary text */ --muted: #6E7888; /* secondary / supporting text */ --hairline: #E2E6EB; /* borders, rules, dividers */ --surface: #F4F6F8; /* light section background */ --white: #FFFFFF; /* page background */ /* ---- Semantic color roles ---- */ --bg: var(--white); --bg-alt: var(--surface); --fg: var(--text); --fg-muted: var(--muted); --fg-on-blue: #EAF1F7; /* body text on a blue field */ --accent: var(--yellow); --link: var(--blue); --link-hover: var(--blue-deep); --border: var(--hairline); /* ---- Type family ---- */ --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Weights ---- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extra: 800; /* ---- Fluid type scale (editorial, confident) ---- */ --t-display: clamp(2.6rem, 6.2vw, 5rem); /* hero headline */ --t-h1: clamp(2.1rem, 4.4vw, 3.4rem); /* major section title */ --t-h2: clamp(1.6rem, 3vw, 2.3rem); /* sub section / card */ --t-h3: clamp(1.2rem, 2vw, 1.5rem); /* card heading */ --t-lead: clamp(1.2rem, 1.9vw, 1.6rem); /* sublines / leads */ --t-body: clamp(1.02rem, 1.25vw, 1.18rem);/* body copy */ --t-small: 0.9375rem; /* fine print */ --t-eyebrow: 0.78rem; /* section labels */ /* ---- Line heights ---- */ --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.72; /* ---- Tracking ---- */ --track-tight: -0.02em; --track-normal: 0; --track-eyebrow: 0.2em; /* ---- Spacing rhythm ---- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --space-section: clamp(5rem, 11vw, 9.5rem); /* vertical gap between sections */ --maxw: 1180px; /* page max width */ --maxw-read: 720px; /* comfortable reading measure */ /* ---- Radii (used very sparingly — site is mostly square/editorial) ---- */ --radius-sm: 4px; --radius-md: 8px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 0.7s; } /* ============================================================ Semantic element styles — opt in via these classes ============================================================ */ .ds-eyebrow { font-family: var(--font); font-weight: var(--w-semibold); font-size: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--muted); } .ds-display { font-family: var(--font); font-weight: var(--w-extra); font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--text); } .ds-h1 { font-family: var(--font); font-weight: var(--w-bold); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--text); } .ds-h2 { font-family: var(--font); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--text); } .ds-lead { font-family: var(--font); font-weight: var(--w-medium); font-size: var(--t-lead); line-height: 1.5; color: var(--muted); } .ds-body { font-family: var(--font); font-weight: var(--w-regular); font-size: var(--t-body); line-height: var(--lh-body); color: var(--text); } .ds-accent-line { width: 56px; height: 3px; background: var(--yellow); border: 0; }