/* ========================================================================== EcoMycel Design System — Layer 1: Tokens -------------------------------------------------------------------------- Extracted from public_html/{index,material,forschung,team,mitmachen, impressum}.html (bundled Claude Design pages, Aug 2025). Every value below appears in the shipped site. Where the site used several near-identical values for one job, the ladder here keeps the dominant one and the note says what it replaces. ========================================================================== */ :root { /* ---------------------------------------------------------------------- COLOR — Brand One green carries the whole brand. It is the only saturated hue on the site; everything else is ink on near-black. ---------------------------------------------------------------------- */ --eco-green: #7fe28f; /* primary accent — 113 uses */ --eco-green-hover: #93ec9f; /* solid-button hover only */ --eco-green-light: #c8f5cf; /* end stop of the scroll-progress gradient */ --eco-green-link-hover: #a9edb4; /* inline text-link hover */ --eco-coral: #e2867a; /* the only non-green accent; negative/alert */ /* ---------------------------------------------------------------------- COLOR — Surfaces Two near-blacks alternate down the page to separate sections without rules: --surface is the default, --surface-raised marks every other content band. ---------------------------------------------------------------------- */ --eco-surface: #0b1015; --eco-surface-raised: #10181d; --eco-surface-card: rgba(255,255,255,0.025); /* default card fill */ --eco-surface-card-accent:rgba(127,226,143,0.05); /* highlighted card fill */ --eco-surface-header: rgba(11,16,21,0.72); /* header after scroll */ --eco-surface-menu: rgba(11,16,21,0.98); /* mobile menu sheet */ /* ---------------------------------------------------------------------- COLOR — Ink A single paper white stepped down by alpha. The source shipped ELEVEN alphas (.75 .70 .65 .62 .60 .55 .50 .45 .40 .35 .25); this is the six-step ladder that covers all of them. Contrast vs #0b1015 is noted — see a11y notes in README. ---------------------------------------------------------------------- */ --eco-ink: #f3f6f1; /* 17.5:1 headings, values */ --eco-ink-strong: rgba(243,246,241,0.75); /* 9.9:1 nav, lead copy */ --eco-ink-body: rgba(243,246,241,0.62); /* 7.1:1 default body */ --eco-ink-muted: rgba(243,246,241,0.50); /* 5.0:1 captions, small */ --eco-ink-faint: rgba(243,246,241,0.40); /* 3.6:1 LARGE TEXT ONLY */ --eco-ink-ghost: rgba(243,246,241,0.25); /* 2.1:1 decoration only */ /* ---------------------------------------------------------------------- COLOR — Hairlines The site is built almost entirely from 1px rules rather than boxes. ---------------------------------------------------------------------- */ --eco-line-strong: rgba(243,246,241,0.15); /* chip + tab outlines */ --eco-line: rgba(243,246,241,0.10); /* card + spec-row rules */ --eco-line-soft: rgba(243,246,241,0.08); /* footer, section splits */ --eco-line-accent: rgba(127,226,143,0.30); /* accent card outline */ --eco-line-accent-strong: rgba(127,226,143,0.50); /* nav CTA outline */ /* ---------------------------------------------------------------------- COLOR — Accent washes and glows Green is used at low alpha as light, not as fill. ---------------------------------------------------------------------- */ --eco-accent-tint: rgba(127,226,143,0.12); /* active tab / hover fill */ --eco-accent-wash: rgba(127,226,143,0.05); /* card + section wash */ --eco-accent-glow: rgba(127,226,143,0.35); /* text-shadow halo */ --eco-accent-glow-soft: rgba(127,226,143,0.18); /* resting halo */ --eco-accent-halo: rgba(127,226,143,0.14); /* radial bloom behind media*/ /* ---------------------------------------------------------------------- TYPOGRAPHY — Families Four families, four jobs. Never mix the jobs. Archivo structure — headings, names, numeric values IBM Plex Sans voice — all running prose, weight 300 IBM Plex Mono signal — labels, eyebrows, buttons, chips, data Newsreader argument — the italic statement lines between sections ---------------------------------------------------------------------- */ --eco-font-display: 'Archivo', system-ui, -apple-system, sans-serif; --eco-font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --eco-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; --eco-font-quote: 'Newsreader', Georgia, 'Times New Roman', serif; /* ---------------------------------------------------------------------- TYPOGRAPHY — Scale Every heading size on the site is a clamp(). Nothing scales by breakpoint; type scales with the viewport and the layout follows. ---------------------------------------------------------------------- */ --eco-size-display-xl: clamp(40px, 6.5vw, 96px); /* subpage h1 */ --eco-size-display-l: clamp(38px, 5.4vw, 80px); /* closing CTA h2 */ --eco-size-display-m: clamp(32px, 4.2vw, 60px); /* home h1 */ --eco-size-h2: clamp(30px, 3.4vw, 50px); /* standard section h2 */ --eco-size-h2-lg: clamp(32px, 3.6vw, 56px); /* emphasised section h2 */ --eco-size-h3: clamp(24px, 2.8vw, 36px); /* panel + accordion h3 */ --eco-size-h4: 22px; /* two-column card h3 */ --eco-size-quote: clamp(26px, 3.6vw, 46px); /* statement line */ --eco-size-quote-sm: clamp(22px, 2.4vw, 32px); /* hero sub-statement */ --eco-size-metric: clamp(40px, 4vw, 64px); /* big green data value */ --eco-size-lead: clamp(17px, 1.3vw, 21px); /* hero + section lead */ --eco-size-body: 18px; /* default prose */ --eco-size-body-sm: 15px; /* dense prose */ --eco-size-caption: 14px; /* card copy, footer */ --eco-size-label: 12px; /* mono UI label */ --eco-size-label-sm: 11px; /* mono micro-label */ --eco-size-eyebrow: 13px; /* section index */ /* Line heights — tighter as type gets larger */ --eco-leading-display: 1.05; --eco-leading-heading: 1.15; --eco-leading-quote: 1.4; --eco-leading-snug: 1.6; --eco-leading-body: 1.7; /* Letter spacing — mono is always tracked out, display is always tracked in */ --eco-track-display: -0.01em; --eco-track-label: 0.06em; /* micro-labels, tabs */ --eco-track-ui: 0.08em; /* buttons, nav, footer headings */ --eco-track-eyebrow: 0.14em; /* section index — the widest track used */ /* Weights — the body face is LIGHT; that is a deliberate brand choice */ --eco-weight-body: 300; --eco-weight-body-em: 400; --eco-weight-medium: 500; --eco-weight-bold: 600; /* ---------------------------------------------------------------------- LAYOUT One gutter token governs the whole page. Sections are full-bleed and pad themselves; there is no fixed-width container anywhere on the site. ---------------------------------------------------------------------- */ --eco-gutter: clamp(24px, 6vw, 120px); --eco-header-h: 84px; --eco-section-y: clamp(60px, 10vw, 140px); /* standard band */ --eco-section-y-sm: clamp(60px, 9vw, 120px); /* compact band */ --eco-section-y-lg: clamp(90px, 12vw, 180px); /* statement band */ --eco-section-y-xl: clamp(100px, 14vw, 220px); /* hero statement band */ --eco-gap-major: clamp(40px, 6vw, 100px); /* between grid columns */ --eco-gap-card: 24px; /* between cards */ --eco-gap-card-tight: 20px; /* 4-up card grids */ --eco-gap-chip: 10px; /* between chips */ --eco-gap-stack: 20px; /* stacked paragraphs */ /* Measure — the site sets max-width in ch on nearly every text block */ --eco-measure-body: 56ch; --eco-measure-lead: 60ch; --eco-measure-heading: 16ch; --eco-measure-quote: 24ch; /* ---------------------------------------------------------------------- SHAPE ---------------------------------------------------------------------- */ --eco-radius-pill: 100px; /* every button, chip, tab and badge */ --eco-radius-card: 16px; /* cards and framed media */ --eco-radius-media: 14px; /* small media and portrait frames */ /* ---------------------------------------------------------------------- ELEVATION Two families: black shadows lift MEDIA off the page, green shadows are interaction feedback. Never a green shadow at rest on a static element. ---------------------------------------------------------------------- */ --eco-shadow-media: 0 30px 70px -20px rgba(0,0,0,0.6); --eco-shadow-media-lg: 0 40px 90px -20px rgba(0,0,0,0.6); --eco-shadow-lift: 0 20px 50px -15px rgba(127,226,143,0.25); --eco-shadow-btn: 0 10px 40px rgba(127,226,143,0.45); --eco-shadow-ring: 0 0 24px rgba(127,226,143,0.30); /* ---------------------------------------------------------------------- MOTION One easing curve for everything. Four durations. ---------------------------------------------------------------------- */ --eco-ease: cubic-bezier(.16, .8, .3, 1); --eco-dur-fast: .3s; --eco-dur-base: .35s; --eco-dur-slow: .5s; --eco-dur-image: .8s; --eco-lift-btn: translateY(-3px); --eco-lift-card: translateY(-6px); --eco-lift-media: translateY(-4px); --eco-zoom-image: scale(1.06); /* Stacking */ --eco-z-header: 50; --eco-z-menu: 60; --eco-z-progress: 70; }