/* erzeugt aus noevu-final, nicht von Hand ändern */ :root { /* ========================================================================== Colors — Base palette (hex) ========================================================================== */ --color-green: #236053; --color-orange: #ff6b30; --color-cream: #F4E7D9; --color-grey: #36302C; --color-white: #fff; /* ========================================================================== Color Mix Steps — Tokenized percentages for brightness/opacity Percentage = how much of the original color is retained. ========================================================================== */ /* Brightness (mix with white or black) */ --mix-bright: 70%; --mix-very-bright: 40%; --mix-dark: 80%; --mix-very-dark: 60%; /* Alpha / transparency — weight given to `transparent` in color-mix() */ --alpha-subtle: 85%; --alpha-moderate: 45%; --alpha-strong: 20%; /* ========================================================================== Colors — Brightness variants via color-mix(in oklab) Change a base color above → all variants update automatically. ========================================================================== */ /* Green */ --color-green-bright: color-mix(in oklab, var(--color-green) var(--mix-bright), white); --color-green-very-bright: color-mix(in oklab, var(--color-green) var(--mix-very-bright), white); --color-green-dark: color-mix(in oklab, var(--color-green) var(--mix-dark), black); --color-green-very-dark: color-mix(in oklab, var(--color-green) var(--mix-very-dark), black); /* Orange */ --color-orange-bright: color-mix(in oklab, var(--color-orange) var(--mix-bright), white); --color-orange-very-bright: color-mix(in oklab, var(--color-orange) var(--mix-very-bright), white); --color-orange-dark: color-mix(in oklab, var(--color-orange) var(--mix-dark), black); --color-orange-very-dark: color-mix(in oklab, var(--color-orange) var(--mix-very-dark), black); /* Cream */ --color-cream-bright: color-mix(in oklab, var(--color-cream) var(--mix-bright), white); --color-cream-very-bright: color-mix(in oklab, var(--color-cream) var(--mix-very-bright), white); --color-cream-dark: color-mix(in oklab, var(--color-cream) var(--mix-dark), black); --color-cream-very-dark: color-mix(in oklab, var(--color-cream) var(--mix-very-dark), black); /* Grey */ --color-grey-bright: color-mix(in oklab, var(--color-grey) var(--mix-bright), white); --color-grey-very-bright: color-mix(in oklab, var(--color-grey) var(--mix-very-bright), white); --color-grey-dark: color-mix(in oklab, var(--color-grey) var(--mix-dark), black); --color-grey-very-dark: color-mix(in oklab, var(--color-grey) var(--mix-very-dark), black); /* Semantic color aliases Three dark levels: dark (green tint) → black (near-black neutral) dark = --color-green-very-dark (~#0b201c) — brand dark, green tint black = --color-grey-very-dark (~#141110) — near-black, neutral */ --color-black: var(--color-grey-very-dark); /* Status colors — used for editor overlay badges, toasts, and any future semantic UI surface. Tints derive via color-mix to stay token-driven. */ --color-success: var(--color-green); --color-success-tint: color-mix(in oklab, var(--color-success) 18%, var(--color-white)); --color-warning: var(--color-orange); --color-warning-tint: color-mix(in oklab, var(--color-warning) 16%, var(--color-white)); --color-info: color-mix(in oklab, var(--color-green) 55%, var(--color-cream)); --color-info-tint: color-mix(in oklab, var(--color-info) 18%, var(--color-white)); /* ========================================================================== Typography — Fluid viewport-based scale Everything cascades from --font-size-base: font-size-base → text-xs…text-6xl (ratio multipliers) → rhythm (base × 1.5 = line-height unit) → all spacing (rhythm multiples) → header-height, section-py, grid-gap, container-px Changing --font-scale scales the ENTIRE layout proportionally: text sizes, line-heights, spacing, padding, gaps — all shift together. --font-size-base formula: calc(--font-scale * (1rem - COEFF * max(0px, 1400px - 100vw))) │ │ │ └─ cap: no reduction above 1400px │ │ └─ coefficient: steepness of mobile shrinkage │ └─ ceiling: full size (1rem = 16px) at cap and above └─ global multiplier (1 = default, 0.9 = 10% smaller, 1.2 = 20% larger) Desktop stays fixed, mobile shrinks proportionally. Resulting sizes (at --font-scale: 1.2, coefficient 0.0015): 375px → ~17.4px 768px → ~18.1px 1400px+ → 19.2px ========================================================================== */ --font-scale: 1.2; --font-size-base: calc(var(--font-scale) * (1rem - 0.002 * max(0px, 1400px - 100vw))); /* Font families */ --font-title: "Abril Fatface", "Abril Fatface Fallback", georgia, serif; --font-body: "Heebo", "Heebo Fallback", system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Consolas", monospace; /* Font weights */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — multipliers of --font-size-base */ --text-xs: calc(var(--font-size-base) * 0.825); --text-sm: calc(var(--font-size-base) * 0.875); --text-base: var(--font-size-base); --text-lg: calc(var(--font-size-base) * 1.125); --text-xl: calc(var(--font-size-base) * 1.25); --text-2xl: calc(var(--font-size-base) * 1.5); --text-3xl: calc(var(--font-size-base) * 1.875); --text-4xl: calc(var(--font-size-base) * 2.25); --text-5xl: calc(var(--font-size-base) * 2.75); --text-6xl: calc(var(--font-size-base) * 3.25); /* ========================================================================== Vertical Rhythm All line-heights, margins, and paddings derive from --rhythm. This ensures baseline alignment across adjacent columns. body line-height = 1 rhythm unit. ========================================================================== */ --rhythm: calc(var(--font-size-base) * 1.5); /* Heading leading is unitless and off the rhythm grid: the serif display face sets far tighter than body text */ --leading-display: 1.1; --leading-title: 1.2; /* ========================================================================== Spacing — Rhythm multiples Use these for all margins, paddings, and gaps. ========================================================================== */ --space-half: calc(var(--rhythm) * 0.5); --space-1: var(--rhythm); --space-1-5: calc(var(--rhythm) * 1.5); --space-2: calc(var(--rhythm) * 2); --space-3: calc(var(--rhythm) * 3); --space-4: calc(var(--rhythm) * 4); --space-6: calc(var(--rhythm) * 6); --space-8: calc(var(--rhythm) * 8); /* Header */ --header-height: calc(var(--rhythm) * 3.5); /* Section vertical padding */ --section-py: var(--space-4); --section-py-mobile: var(--space-1); /* Section border depth — clip-path overlap for oval/arrow section borders */ --section-border-depth: 2vw; /* Content width limits */ --heading-max-width: 100ch; /* Container */ --container-max: 1280px; --container-px: var(--space-1); /* ========================================================================== Grid 12-column layout grid with rhythm-based gap. ========================================================================== */ --grid-columns: 12; --grid-gap: var(--rhythm); /* ========================================================================== Breakpoints (reference only — cannot use var() in @media) @media (min-width: 480px) → mobile @media (min-width: 768px) → tablet @media (min-width: 1024px) → desktop @media (min-width: 1280px) → wide ========================================================================== */ --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; /* ========================================================================== Border Radius For nested radii: inner = outer - padding. Set --radius-parent and --radius-padding on the container, then use --radius-inset on child elements. Example: .card { --radius-parent: var(--radius-xl); --radius-padding: var(--space-1); border-radius: var(--radius-parent); padding: var(--radius-padding); } .card .tag { border-radius: var(--radius-inset); } If padding > radius, CSS clamps negative border-radius to 0. ========================================================================== */ --radius-xs: 5px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --radius-inset: calc(var(--radius-parent, var(--radius-lg)) - var(--radius-padding, var(--rhythm))); /* ========================================================================== Shadows ========================================================================== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); /* Card hover — soft depth shadow using space tokens + color-mix. Use on any interactive card component for consistent hover feedback. */ --shadow-card-hover: 0 var(--space-half) var(--space-2) color-mix(in oklab, var(--color-grey), transparent var(--alpha-subtle)); /* Primary button glow (orange — adapted from Squarespace button mixin) */ --shadow-button: 0 0 15px color-mix(in oklab, var(--color-white), transparent var(--alpha-moderate)), 8px 8px 40px color-mix(in oklab, var(--color-orange), transparent var(--alpha-strong)), inset -5px -5px 10px color-mix(in oklab, var(--color-white), transparent var(--alpha-subtle)); --shadow-button-hover: 0 0 15px color-mix(in oklab, var(--color-white), transparent var(--alpha-strong)), 8px 8px 40px color-mix(in oklab, var(--color-orange) 70%, transparent), inset -5px -5px 10px color-mix(in oklab, var(--color-orange), transparent var(--alpha-subtle)); /* Secondary button glow (green) */ --shadow-button-secondary: 0 0 15px color-mix(in oklab, var(--color-white), transparent var(--alpha-moderate)), 8px 8px 40px color-mix(in oklab, var(--color-green), transparent var(--alpha-strong)); --shadow-button-secondary-hover: 0 0 15px color-mix(in oklab, var(--color-white), transparent var(--alpha-strong)), 8px 8px 40px color-mix(in oklab, var(--color-green) 70%, transparent); /* ========================================================================== Glass surface — frosted nav pill, dropdown menu, command palette Single source so all three frosted surfaces share opacity + blur + color. Dark variant overridden on .header--dark / .cc-overlay--dark wrappers (custom props inherit, so the override cascades to descendant surfaces). ========================================================================== */ --glass-bg: color-mix(in oklab, var(--color-white) 72%, transparent); --glass-border: color-mix(in oklab, var(--color-white) 65%, transparent); --glass-blur: 40px; /* ========================================================================== Transitions & Animation ========================================================================== */ --transition-fast: 150ms ease-in-out; --transition-normal: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; /* Easing curves — spring overshoot + soft ease (Command Center nav) */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Heading underline reveal animation */ --underline-duration: 0.6s; --underline-delay: 0.6s; --underline-easing: cubic-bezier(0.4, 0, 0.2, 1); /* Reveal of a measured value, e.g. a bar growing to its length */ --duration-reveal: 900ms; --delay-reveal: 300ms; } @media (width <= 768px) { :root { --section-border-depth: 8vw; } }