/* ==========================================================================
EcoMycel Design System — Layer 2: Base, primitives and components
Requires ecomycel.tokens.css.
Fonts (add to before this file):
========================================================================== */
/* --------------------------------------------------------------------------
BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--eco-surface);
color: var(--eco-ink);
font-family: var(--eco-font-body);
font-weight: var(--eco-weight-body);
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
}
a { color: var(--eco-green); text-decoration: none; }
a:hover { color: var(--eco-green-link-hover); }
img { max-width: 100%; }
/* Keyboard focus. The source shipped `outline:none` on form fields with no
replacement — this restores a visible focus ring on every control. */
:focus-visible {
outline: 2px solid var(--eco-green);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------------------
TYPOGRAPHY
-------------------------------------------------------------------------- */
.eco-display,
.eco-h1, .eco-h2, .eco-h3, .eco-h4 {
font-family: var(--eco-font-display);
font-weight: var(--eco-weight-bold);
color: var(--eco-ink);
margin: 0;
}
.eco-display { font-size: var(--eco-size-display-xl); line-height: var(--eco-leading-display); letter-spacing: var(--eco-track-display); max-width: 18ch; }
.eco-h1 { font-size: var(--eco-size-display-m); line-height: 1.12; letter-spacing: var(--eco-track-display); max-width: 14ch; }
.eco-h2 { font-size: var(--eco-size-h2); line-height: var(--eco-leading-heading); max-width: var(--eco-measure-heading); }
.eco-h2--lg { font-size: var(--eco-size-h2-lg); }
.eco-h3 { font-size: var(--eco-size-h3); line-height: 1.2; }
.eco-h4 { font-size: var(--eco-size-h4); font-weight: var(--eco-weight-medium); line-height: 1.3; }
/* Section index — "03 / 09 — Warum EcoMycel?". Opens every section. */
.eco-eyebrow {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-eyebrow);
letter-spacing: var(--eco-track-eyebrow);
text-transform: uppercase;
color: var(--eco-green);
margin-bottom: 28px;
}
/* Mono micro-label above a value or a list. */
.eco-label {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label-sm);
letter-spacing: var(--eco-track-label);
text-transform: uppercase;
color: var(--eco-ink-muted);
}
.eco-lead { font-size: var(--eco-size-lead); line-height: var(--eco-leading-snug); color: var(--eco-ink-body); max-width: var(--eco-measure-lead); margin: 0; }
.eco-body { font-size: var(--eco-size-body); line-height: var(--eco-leading-body); color: var(--eco-ink-body); max-width: var(--eco-measure-body); margin: 0; }
.eco-body--sm { font-size: var(--eco-size-body-sm); line-height: var(--eco-leading-snug); color: var(--eco-ink-muted); }
.eco-caption { font-size: var(--eco-size-caption); line-height: var(--eco-leading-snug); color: var(--eco-ink-muted); }
/* Stacked prose */
.eco-prose { display: flex; flex-direction: column; gap: var(--eco-gap-stack); }
/* --------------------------------------------------------------------------
STATEMENT
The italic serif line that sits alone in its own band between sections.
Second half of the sentence is wrapped in .eco-statement__key, which glows.
-------------------------------------------------------------------------- */
.eco-statement {
font-family: var(--eco-font-quote);
font-style: italic;
font-weight: var(--eco-weight-body-em);
font-size: var(--eco-size-quote);
line-height: var(--eco-leading-quote);
color: var(--eco-ink);
max-width: var(--eco-measure-quote);
margin: 0 auto;
text-align: center;
}
.eco-statement--sm { font-size: var(--eco-size-quote-sm); }
.eco-statement__key {
color: var(--eco-green);
text-shadow: 0 0 30px var(--eco-accent-glow);
}
.eco-statement__key.is-visible {
animation: eco-pulse-glow 8s ease-in-out .2s infinite;
}
@keyframes eco-pulse-glow {
0%, 100% { text-shadow: 0 0 14px rgba(127,226,143,0.18); }
22% { text-shadow: 0 0 30px rgba(127,226,143,0.45); }
38% { text-shadow: 0 0 8px rgba(127,226,143,0.12); }
58% { text-shadow: 0 0 38px rgba(127,226,143,0.55); }
76% { text-shadow: 0 0 10px rgba(127,226,143,0.15); }
90% { text-shadow: 0 0 24px rgba(127,226,143,0.35); }
}
/* --------------------------------------------------------------------------
LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.eco-section { padding: var(--eco-section-y) var(--eco-gutter); position: relative; }
.eco-section--sm{ padding: var(--eco-section-y-sm) var(--eco-gutter); }
.eco-section--statement { padding: var(--eco-section-y-lg) var(--eco-gutter); text-align: center; }
.eco-section--statement-xl { padding: var(--eco-section-y-xl) var(--eco-gutter); text-align: center; }
/* Alternating band. Use on every other content section. */
.eco-section--raised { background: var(--eco-surface-raised); }
/* Ambient green bloom behind a band. Position picks where the light sits. */
.eco-section--lit-tl { background: radial-gradient(ellipse 800px 500px at 15% 10%, var(--eco-accent-wash), transparent 70%), var(--eco-surface-raised); }
.eco-section--lit-tr { background: radial-gradient(ellipse 800px 500px at 85% 20%, var(--eco-accent-wash), transparent 70%), var(--eco-surface-raised); }
.eco-section--lit-c { background: radial-gradient(ellipse 900px 460px at 50% 50%, rgba(127,226,143,0.07), transparent 70%), var(--eco-surface); }
/* The gradient hairline that separates bands. Always inset by the gutter. */
.eco-rule {
height: 1px;
border: 0;
margin: 0 var(--eco-gutter);
background: linear-gradient(90deg, transparent, rgba(127,226,143,0.22), transparent);
}
/* Flat rule used inside a section */
.eco-rule--flat { background: var(--eco-line-soft); margin: 0; }
/* Two-column editorial split. Ratio classes match the ones used on the site. */
.eco-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--eco-gap-major); }
.eco-split--l { grid-template-columns: 1.1fr 0.9fr; }
.eco-split--r { grid-template-columns: 0.9fr 1.1fr; }
.eco-split--media-l { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
.eco-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--eco-gap-card-tight); }
.eco-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--eco-gap-card); }
.eco-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px var(--eco-gap-card); }
/* --------------------------------------------------------------------------
MEDIA
-------------------------------------------------------------------------- */
.eco-media {
border-radius: var(--eco-radius-card);
overflow: hidden;
position: relative;
box-shadow: var(--eco-shadow-media);
}
.eco-media--sm { border-radius: var(--eco-radius-media); }
.eco-media--framed { border: 1px solid var(--eco-line); }
.eco-media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--eco-dur-image) var(--eco-ease); }
.eco-media:hover > img { transform: var(--eco-zoom-image); }
.eco-media--4-3 { aspect-ratio: 4 / 3; }
.eco-media--3-4 { aspect-ratio: 3 / 4; }
.eco-media--5-4 { aspect-ratio: 5 / 4; }
.eco-media--square { aspect-ratio: 1 / 1; }
/* Green bloom behind a media frame. Wrap the frame in this. */
.eco-halo { position: relative; }
.eco-halo::before {
content: "";
position: absolute;
inset: -30px;
background: radial-gradient(circle, var(--eco-accent-halo) 0%, rgba(127,226,143,0) 72%);
filter: blur(4px);
pointer-events: none;
}
/* Placeholder frame for imagery that does not exist yet. */
.eco-media--placeholder {
border: 1px solid var(--eco-line);
background: repeating-linear-gradient(135deg, rgba(243,246,241,0.035) 0 2px, transparent 2px 14px);
box-shadow: none;
display: grid;
place-items: center;
}
/* --------------------------------------------------------------------------
BUTTONS
Every button is a pill. Primary is solid green with dark text; everything
else is an outline that turns green on hover.
-------------------------------------------------------------------------- */
.eco-btn {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
padding: 15px 28px;
border-radius: var(--eco-radius-pill);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
transition: all var(--eco-dur-base) var(--eco-ease);
}
.eco-btn--primary {
color: var(--eco-surface);
background: var(--eco-green);
box-shadow: 0 0 0 rgba(127,226,143,0);
}
.eco-btn--primary:hover {
color: var(--eco-surface);
background: var(--eco-green-hover);
transform: var(--eco-lift-btn);
box-shadow: var(--eco-shadow-btn);
}
.eco-btn--secondary {
color: var(--eco-ink);
background: transparent;
border-color: var(--eco-line-strong);
}
.eco-btn--secondary:hover {
color: var(--eco-ink);
border-color: var(--eco-green);
background: rgba(127,226,143,0.08);
transform: var(--eco-lift-btn);
box-shadow: 0 10px 40px rgba(127,226,143,0.3);
}
/* Oversized closing call to action. Breathes on its own. */
.eco-btn--glow {
font-size: 17px;
letter-spacing: 0.1em;
padding: 24px 58px;
color: var(--eco-ink);
background: transparent;
border: 1.5px solid var(--eco-green);
animation: eco-glow-pulse 2.4s ease-in-out infinite;
}
.eco-btn--glow:hover { color: var(--eco-ink); background: rgba(127,226,143,0.1); transform: var(--eco-lift-btn); }
@keyframes eco-glow-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(127,226,143,0.35), 0 0 18px 2px rgba(127,226,143,0.25); }
50% { box-shadow: 0 0 0 10px rgba(127,226,143,0), 0 0 40px 8px rgba(127,226,143,0.55); }
}
/* Inline forward link — "Material im Detail →". The arrow slides on hover. */
.eco-link-arrow {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
color: var(--eco-green);
display: inline-flex;
align-items: center;
gap: 10px;
transition: gap var(--eco-dur-fast) ease;
}
.eco-link-arrow:hover { gap: 16px; color: var(--eco-green); }
/* --------------------------------------------------------------------------
CHIPS, TAGS AND TABS
-------------------------------------------------------------------------- */
.eco-chip {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: 0.03em;
color: var(--eco-ink-strong);
border: 1px solid var(--eco-line-strong);
padding: 9px 16px;
border-radius: var(--eco-radius-pill);
display: inline-block;
transition: all var(--eco-dur-fast) ease;
}
.eco-chip:hover { border-color: var(--eco-green); color: var(--eco-green); }
.eco-chip--solid {
color: var(--eco-surface);
background: var(--eco-green);
border-color: transparent;
font-weight: var(--eco-weight-bold);
padding: 11px 22px;
box-shadow: 0 0 24px var(--eco-accent-glow);
}
.eco-chip-row { display: flex; flex-wrap: wrap; gap: var(--eco-gap-chip); }
/* Filter / property tabs. Same pill, but selection is a state, not a hover. */
.eco-tab {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-label);
text-transform: uppercase;
padding: 12px 20px;
border: 1px solid var(--eco-line-strong);
background: transparent;
color: var(--eco-ink-muted);
cursor: pointer;
border-radius: var(--eco-radius-pill);
transition: all var(--eco-dur-fast) ease;
}
.eco-tab:hover { border-color: var(--eco-green); }
.eco-tab[aria-selected="true"], .eco-tab.is-active {
border-color: var(--eco-green);
background: rgba(127,226,143,0.08);
color: var(--eco-green);
box-shadow: 0 0 24px rgba(127,226,143,0.2);
}
/* Badge — the roadmap step marker. */
.eco-badge {
display: inline-block;
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label-sm);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
color: var(--eco-green);
border: 1px solid rgba(127,226,143,0.4);
border-radius: var(--eco-radius-pill);
padding: 7px 14px;
background: transparent;
}
.eco-badge--goal { background: var(--eco-accent-tint); }
/* --------------------------------------------------------------------------
CARDS
-------------------------------------------------------------------------- */
.eco-card {
background: var(--eco-surface-card);
border: 1px solid rgba(243,246,241,0.09);
border-radius: var(--eco-radius-card);
padding: 32px 26px;
display: flex;
flex-direction: column;
gap: 18px;
transition: all .4s var(--eco-ease);
}
.eco-card:hover {
border-color: rgba(127,226,143,0.45);
background: var(--eco-accent-wash);
transform: var(--eco-lift-card);
box-shadow: var(--eco-shadow-lift);
}
/* Card carrying the primary path through a set. */
.eco-card--accent {
background: var(--eco-surface-card-accent);
border-color: var(--eco-line-accent);
}
.eco-card__num { font-family: var(--eco-font-mono); font-size: var(--eco-size-label); color: var(--eco-green); }
.eco-card__title { font-family: var(--eco-font-display); font-size: var(--eco-size-h4); font-weight: var(--eco-weight-medium); color: var(--eco-ink); }
.eco-card__text { font-size: var(--eco-size-caption); line-height: var(--eco-leading-snug); color: var(--eco-ink-muted); }
/* Person card — portrait, name, discipline. */
.eco-person { display: flex; flex-direction: column; gap: 14px; transition: transform .4s var(--eco-ease); }
.eco-person:hover { transform: var(--eco-lift-card); }
.eco-person__photo { aspect-ratio: 3 / 4; border: 1px solid var(--eco-line); overflow: hidden; border-radius: var(--eco-radius-media); }
.eco-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--eco-dur-image) var(--eco-ease); }
.eco-person:hover .eco-person__photo img { transform: var(--eco-zoom-image); }
.eco-person__name { font-family: var(--eco-font-display); font-weight: var(--eco-weight-medium); font-size: 16px; color: var(--eco-ink); }
.eco-person__role { font-family: var(--eco-font-mono); font-size: var(--eco-size-label-sm); color: var(--eco-green); margin-top: 4px; }
/* Callout — an honest note about work in progress. */
.eco-callout {
max-width: 64ch;
border: 1px solid var(--eco-line-accent);
border-radius: var(--eco-radius-media);
padding: 24px 28px;
background: rgba(127,226,143,0.04);
}
.eco-callout__title {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
color: var(--eco-green);
margin-bottom: 14px;
}
/* --------------------------------------------------------------------------
DATA DISPLAY
-------------------------------------------------------------------------- */
/* Spec — mono label over a display-face value, hung under a hairline. */
.eco-spec { border-top: 1px solid var(--eco-line); padding-top: 16px; }
.eco-spec__label { font-family: var(--eco-font-mono); font-size: var(--eco-size-label-sm); letter-spacing: var(--eco-track-label); color: var(--eco-ink-muted); text-transform: uppercase; }
.eco-spec__value { font-family: var(--eco-font-display); font-size: 24px; font-weight: var(--eco-weight-bold); color: var(--eco-ink); margin-top: 4px; text-shadow: 0 0 24px var(--eco-accent-glow-soft); }
.eco-spec-list { display: flex; flex-direction: column; gap: 26px; }
/* Data row — label left, value right, hairline above. Nudges on hover. */
.eco-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-top: 1px solid var(--eco-line);
transition: padding-left var(--eco-dur-fast) ease;
}
.eco-row:hover { padding-left: 8px; }
.eco-row__label { font-size: var(--eco-size-caption); color: var(--eco-ink-muted); }
.eco-row__value { font-family: var(--eco-font-mono); font-size: var(--eco-size-caption); color: var(--eco-ink); }
/* Headline metric — the one place green type gets big. */
.eco-metric__value { font-family: var(--eco-font-display); font-weight: var(--eco-weight-bold); font-size: var(--eco-size-metric); color: var(--eco-green); text-shadow: 0 0 40px rgba(127,226,143,0.3); }
.eco-metric__unit { font-family: var(--eco-font-mono); font-size: var(--eco-size-label); letter-spacing: var(--eco-track-label); color: var(--eco-ink-muted); margin-top: 10px; }
/* --------------------------------------------------------------------------
TIMELINE
Horizontal on desktop, stacked on mobile. The goal node is a rotated square.
-------------------------------------------------------------------------- */
.eco-timeline { position: relative; }
.eco-timeline__line {
position: absolute; top: 9px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, rgba(127,226,143,0.5), rgba(243,246,241,0.12) 85%, rgba(127,226,143,0.5));
}
.eco-timeline__nodes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.eco-node { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.eco-node__dot {
width: 11px; height: 11px; border-radius: 50%;
background: var(--eco-surface-raised);
border: 1px solid rgba(243,246,241,0.35);
transition: all var(--eco-dur-fast) ease;
}
.eco-node__year { font-family: var(--eco-font-mono); font-size: var(--eco-size-eyebrow); color: var(--eco-ink-muted); transition: color var(--eco-dur-fast) ease; }
.eco-node__phase { font-family: var(--eco-font-display); font-size: var(--eco-size-body-sm); font-weight: var(--eco-weight-medium); line-height: 1.3; color: rgba(243,246,241,0.45); transition: color var(--eco-dur-fast) ease; }
.eco-node.is-active .eco-node__dot { background: var(--eco-green); border: none; box-shadow: 0 0 0 6px rgba(127,226,143,0.18), 0 0 20px rgba(127,226,143,0.55); }
.eco-node.is-active .eco-node__year { color: var(--eco-green); font-weight: var(--eco-weight-bold); }
.eco-node.is-active .eco-node__phase { color: var(--eco-ink); }
.eco-node:hover .eco-node__year { color: var(--eco-green); }
.eco-node--goal .eco-node__dot { width: 16px; height: 16px; border-radius: 4px; transform: rotate(45deg); background: var(--eco-green); border: none; box-shadow: 0 0 14px rgba(127,226,143,0.4); }
/* Detail panel under the timeline. */
.eco-panel {
margin-top: 44px;
padding: 32px clamp(24px, 3vw, 40px);
border: 1px solid var(--eco-line);
border-radius: var(--eco-radius-card);
background: rgba(255,255,255,0.02);
}
/* --------------------------------------------------------------------------
ACCORDION
Full-bleed rows separated by hairlines. The "+" rotates to "×".
-------------------------------------------------------------------------- */
.eco-accordion__row { border-bottom: 1px solid var(--eco-line-soft); }
.eco-accordion__row:first-child { border-top: 1px solid var(--eco-line-soft); }
.eco-accordion__trigger {
width: 100%;
background: none; border: 0; cursor: pointer;
padding: clamp(28px, 4vw, 40px) var(--eco-gutter);
display: flex; align-items: center; justify-content: space-between;
text-align: left; color: var(--eco-ink); gap: 20px;
transition: background var(--eco-dur-fast) ease;
}
.eco-accordion__trigger:hover { background: rgba(127,226,143,0.03); }
.eco-accordion__num { font-family: var(--eco-font-mono); font-size: var(--eco-size-label); color: var(--eco-green); }
.eco-accordion__title { font-family: var(--eco-font-display); font-weight: var(--eco-weight-bold); font-size: var(--eco-size-h3); }
.eco-accordion__icon { font-family: var(--eco-font-mono); font-size: 20px; color: var(--eco-ink-faint); transition: transform var(--eco-dur-fast) ease, color var(--eco-dur-fast) ease; }
.eco-accordion__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height var(--eco-dur-slow) var(--eco-ease), opacity var(--eco-dur-base) ease; }
.eco-accordion__body { padding: 0 var(--eco-gutter) clamp(36px, 5vw, 56px); }
.eco-accordion__row.is-open .eco-accordion__panel { max-height: 900px; opacity: 1; }
.eco-accordion__row.is-open .eco-accordion__icon { transform: rotate(45deg); color: var(--eco-green); }
/* --------------------------------------------------------------------------
FORM
Underline fields only. No boxes, no fills.
-------------------------------------------------------------------------- */
.eco-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; text-align: left; }
.eco-field { display: flex; flex-direction: column; gap: 8px; }
.eco-field__label { font-family: var(--eco-font-mono); font-size: var(--eco-size-label-sm); letter-spacing: var(--eco-track-label); text-transform: uppercase; color: var(--eco-ink-muted); }
.eco-input, .eco-textarea {
background: transparent;
border: none;
border-bottom: 1px solid rgba(243,246,241,0.2);
color: var(--eco-ink);
font-size: 16px;
font-family: var(--eco-font-body);
padding: 10px 0;
transition: border-color var(--eco-dur-fast) ease;
}
.eco-textarea { resize: none; }
.eco-input:focus, .eco-textarea:focus { border-bottom-color: var(--eco-green); }
/* Underline focus alone is not a visible-enough indicator; keep the ring too. */
.eco-input:focus-visible, .eco-textarea:focus-visible { outline: 2px solid var(--eco-green); outline-offset: 4px; }
/* --------------------------------------------------------------------------
HEADER, NAV AND CHROME
-------------------------------------------------------------------------- */
.eco-progress {
position: fixed; top: 0; left: 0; height: 3px;
background: linear-gradient(90deg, var(--eco-green), var(--eco-green-light));
box-shadow: 0 0 12px rgba(127,226,143,0.6);
z-index: var(--eco-z-progress);
transition: width .1s linear;
}
.eco-header {
position: fixed; top: 0; left: 0; right: 0;
z-index: var(--eco-z-header);
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--eco-gutter);
height: var(--eco-header-h);
background: transparent;
border-bottom: 1px solid transparent;
transition: transform var(--eco-dur-slow) var(--eco-ease), background .4s ease, border-color .4s ease;
}
/* .is-scrolled after 40px; .is-hidden while scrolling down past 160px. */
.eco-header.is-scrolled {
background: var(--eco-surface-header);
backdrop-filter: blur(18px) saturate(140%);
border-bottom-color: var(--eco-line-soft);
}
.eco-header.is-hidden { transform: translateY(-100%); }
.eco-brand { display: flex; align-items: center; gap: 12px; }
.eco-brand img { height: 34px; width: auto; object-fit: contain; }
.eco-brand__word { font-family: var(--eco-font-display); font-weight: var(--eco-weight-bold); font-size: 17px; letter-spacing: 0.01em; color: var(--eco-ink); }
.eco-nav { display: flex; gap: 40px; align-items: center; }
.eco-nav__link {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
color: var(--eco-ink-strong);
transition: color var(--eco-dur-fast) ease, text-shadow var(--eco-dur-fast) ease;
}
.eco-nav__link:hover { color: var(--eco-ink); text-shadow: 0 0 22px rgba(127,226,143,0.7), 0 0 8px rgba(127,226,143,0.5); }
.eco-nav__cta {
font-family: var(--eco-font-mono);
font-size: var(--eco-size-label);
letter-spacing: var(--eco-track-ui);
text-transform: uppercase;
padding: 10px 20px;
border: 1px solid var(--eco-line-accent-strong);
border-radius: var(--eco-radius-pill);
color: var(--eco-green);
transition: all var(--eco-dur-base) var(--eco-ease);
animation: eco-cta-pulse 2.6s ease-in-out infinite;
}
.eco-nav__cta:hover { background: var(--eco-accent-tint); border-color: var(--eco-green); box-shadow: var(--eco-shadow-ring); transform: translateY(-1px); }
@keyframes eco-cta-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(127,226,143,0.4); }
50% { box-shadow: 0 0 16px 4px rgba(127,226,143,0.55); }
}
/* --------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------- */
.eco-footer { padding: clamp(60px, 8vw, 100px) var(--eco-gutter) 40px; background: radial-gradient(ellipse 700px 300px at 10% 0%, rgba(127,226,143,0.04), transparent 70%), var(--eco-surface); }
.eco-footer__cols { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 40px; padding-bottom: 60px; }
.eco-footer__heading { font-family: var(--eco-font-mono); font-size: var(--eco-size-label-sm); letter-spacing: var(--eco-track-ui); color: var(--eco-ink-muted); margin-bottom: 18px; text-transform: uppercase; }
.eco-footer__list { display: flex; flex-direction: column; gap: 12px; }
.eco-footer__list a, .eco-footer__list span { font-size: var(--eco-size-caption); color: var(--eco-ink-strong); }
.eco-footer__legal {
display: flex; justify-content: space-between; align-items: center;
padding-top: 24px; border-top: 1px solid var(--eco-line-soft);
font-family: var(--eco-font-mono); font-size: var(--eco-size-label-sm);
color: var(--eco-ink-muted);
}
.eco-footer__legal a { color: var(--eco-ink-muted); font-size: var(--eco-size-label-sm); }
/* --------------------------------------------------------------------------
SCROLL REVEAL
The source markup carries .reveal on 124 elements and a script that adds
.in-view — but no CSS ever existed for either, so nothing animated. These
are the rules that make the existing markup and script do what they meant.
-------------------------------------------------------------------------- */
.eco-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s var(--eco-ease), transform .7s var(--eco-ease);
}
.eco-reveal.is-visible { opacity: 1; transform: none; }
.eco-stagger > *:nth-child(1) { transition-delay: 0s; }
.eco-stagger > *:nth-child(2) { transition-delay: .1s; }
.eco-stagger > *:nth-child(3) { transition-delay: .2s; }
.eco-stagger > *:nth-child(4) { transition-delay: .3s; }
.eco-stagger > *:nth-child(n+5) { transition-delay: .4s; }
/* --------------------------------------------------------------------------
RESPONSIVE
Single breakpoint at 768px, matching the source. Layout collapses to one
column; type keeps scaling on its own via clamp().
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
.eco-nav { display: none; }
.eco-split, .eco-split--l, .eco-split--r, .eco-split--media-l,
.eco-grid, .eco-grid--3 { grid-template-columns: 1fr; gap: 28px; }
.eco-timeline__line { display: none; }
.eco-timeline__nodes { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; }
.eco-node { flex-direction: row; align-items: center; gap: 14px; }
.eco-footer__cols { grid-template-columns: 1fr; gap: 36px; }
.eco-footer__legal { flex-direction: column; gap: 16px; align-items: flex-start; }
.eco-statement { font-size: clamp(22px, 6vw, 30px); }
.eco-btn { min-height: 44px; }
}
/* --------------------------------------------------------------------------
REDUCED MOTION
The site runs four infinite animations with no guard. This stops all of
them and keeps revealed content visible.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.eco-reveal { opacity: 1; transform: none; }
}