/* ========================================================================== GAIA Lab — design system Palette + typography derived from plume.pdf (ITER · AI Session, April 2026) ========================================================================== */ /* -------------------------------------------------------------------------- Theme-independent tokens -------------------------------------------------------------------------- */ :root { /* --- Fonts (embedded in plume.pdf) ------------------------------------ */ --sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace; /* --- Metrics ---------------------------------------------------------- */ --max: 1280px; --max-text: 760px; --gutter: clamp(1.25rem, 4vw, 3.5rem); --radius: 4px; --radius-lg: 8px; --nav-h: 72px; } /* ========================================================================== THEMES Set with `data-theme` on . Every colour in the stylesheet resolves through these tokens, so adding a theme means adding one block below — no other rule needs to change. Roles, so a new theme stays coherent: --ink / --ink-deep page background, footer --surface* panels and cards --tile* flush grid cells (team, affiliations) --cyan* PRIMARY accent: links, eyebrows, buttons, borders --amber* SECONDARY: figures, stats, BMBF-funded work --magenta* TERTIARY: risk, threat, news. Used sparingly. --on-accent text sitting ON a filled accent (contrast-critical) --plasma-1..5 radial bloom, hot core → cool edge ========================================================================== */ /* ---- 1. DARK · "Deep Field" --------------------------------------------- The plume.pdf palette, unaltered. Currently hidden from the switcher — the block stays so it can be re-shown without redefining tokens. */ [data-theme='dark'] { --ink: #07101A; --ink-deep: #050E18; --surface: #101C27; --surface-2: #0B1422; --surface-3: #0C1B29; --tile: #07101A; --tile-hover: #0B1422; --cyan: #00B5F9; --cyan-bright: #6FD8FF; --cyan-dim: #027BAB; --cyan-deep: #044A68; --amber: #FFA326; --amber-dim: #A86F21; --magenta: #FF5CB8; --magenta-dim: #974178; --text: #F2F6FA; --text-soft: #C4CFDA; --text-muted: #8B95A1; --text-dim: #5D6B7C; --text-faint: #3E4A58; --line: rgba(0, 181, 249, 0.13); --line-mid: rgba(0, 181, 249, 0.26); --line-strong: rgba(0, 181, 249, 0.45); --line-neutral: rgba(255, 255, 255, 0.07); --line-magenta: rgba(255, 92, 184, 0.22); --on-accent: #050E18; --header-bg: rgba(7, 16, 26, 0.82); --overlay-bg: rgba(5, 14, 24, 0.98); --btn-bg: rgba(0, 181, 249, 0.05); --btn-bg-hover: rgba(0, 181, 249, 0.11); --row-hover: rgba(0, 181, 249, 0.035); --amber-wash: rgba(255, 163, 38, 0.045); --mono-wash: rgba(0, 181, 249, 0.09); --logo-filter: brightness(0) invert(1); --photo-filter: saturate(0.55) contrast(1.04); --plasma-1: #FFD24E; --plasma-2: #FFA326; --plasma-3: #E86A3C; --plasma-4: #974178; --plasma-5: #3B1A44; --plasma-c1: #7FE3FF; --plasma-c2: #00B5F9; --plasma-c3: #027BAB; --plasma-c4: #073352; --plasma-op: 0.5; } /* ---- 2. PLASMA · "Ignition" -------------------------------------------- Same structure, lifted off the floor: a violet-indigo base instead of near-black, with the accents pushed to full saturation. Reads hotter and noticeably brighter while keeping the deck's cyan/amber/magenta triad. */ :root, [data-theme='plasma'] { --ink: #17112E; --ink-deep: #100B22; --surface: #241B45; --surface-2: #1E1739; --surface-3: #2B2152; --tile: #17112E; --tile-hover: #1E1739; --cyan: #22E6FF; --cyan-bright: #8CF3FF; --cyan-dim: #12A6C6; --cyan-deep: #1B5A78; --amber: #FFC24D; --amber-dim: #B4801F; --magenta: #FF3D9A; --magenta-dim: #B02766; --text: #F8F5FF; --text-soft: #D6CFEE; --text-muted: #A198C2; --text-dim: #756B96; --text-faint: #524977; --line: rgba(34, 230, 255, 0.15); --line-mid: rgba(34, 230, 255, 0.3); --line-strong: rgba(34, 230, 255, 0.52); --line-neutral: rgba(255, 255, 255, 0.09); --line-magenta: rgba(255, 61, 154, 0.3); --on-accent: #100B22; --header-bg: rgba(23, 17, 46, 0.84); --overlay-bg: rgba(16, 11, 34, 0.98); --btn-bg: rgba(34, 230, 255, 0.07); --btn-bg-hover: rgba(34, 230, 255, 0.14); --row-hover: rgba(34, 230, 255, 0.045); --amber-wash: rgba(255, 194, 77, 0.055); --mono-wash: rgba(34, 230, 255, 0.1); --logo-filter: brightness(0) invert(1); --photo-filter: saturate(0.62) contrast(1.05); --plasma-1: #FFF08A; --plasma-2: #FFC24D; --plasma-3: #FF5C7A; --plasma-4: #C2278A; --plasma-5: #43205C; --plasma-c1: #A8F5FF; --plasma-c2: #22E6FF; --plasma-c3: #12A6C6; --plasma-c4: #1A2E6B; --plasma-op: 0.58; } /* ---- 3. LIGHT · "Photonic" -------------------------------------------- Inverted for daylight and printing. Accents are darkened to hold contrast on white (cyan #00B5F9 fails WCAG on white, #0089CC passes), and logos are knocked to black instead of white. */ [data-theme='light'] { --ink: #EEF2F7; --ink-deep: #E3EAF2; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F7FAFE; --tile: #FFFFFF; --tile-hover: #F5F9FE; /* Accents are darkened until they clear WCAG AA (4.5:1) as text on both --ink and --surface, and as a background under white --on-accent. The deck's #00B5F9 only reaches 3.4:1 on white, so it can't be reused. */ --cyan: #0072AD; --cyan-bright: #005E92; /* hover goes darker, not lighter, on light bg */ --cyan-dim: #38A8D8; --cyan-deep: #A9C8DA; --amber: #AD4F0C; --amber-dim: #E0A052; --magenta: #C4006B; --magenta-dim: #E07AB0; --text: #0A141F; --text-soft: #2C3A48; --text-muted: #58667A; --text-dim: #7B8796; --text-faint: #A7B1BD; --line: rgba(0, 114, 173, 0.2); --line-mid: rgba(0, 114, 173, 0.34); --line-strong: rgba(0, 114, 173, 0.58); --line-neutral: rgba(10, 20, 31, 0.11); --line-magenta: rgba(196, 0, 107, 0.26); --on-accent: #FFFFFF; --header-bg: rgba(238, 242, 247, 0.86); --overlay-bg: rgba(238, 242, 247, 0.98); --btn-bg: rgba(0, 114, 173, 0.06); --btn-bg-hover: rgba(0, 114, 173, 0.13); --row-hover: rgba(0, 114, 173, 0.05); --amber-wash: rgba(173, 79, 12, 0.05); --mono-wash: rgba(0, 114, 173, 0.08); --logo-filter: brightness(0); --photo-filter: saturate(0.72) contrast(1.02); --plasma-1: #FFD24E; --plasma-2: #FF9A3C; --plasma-3: #FF6F91; --plasma-4: #B25FD6; --plasma-5: #7FA8E8; --plasma-c1: #9FE6FF; --plasma-c2: #35B6EE; --plasma-c3: #0089CC; --plasma-c4: #8FB6DE; --plasma-op: 0.3; } /* ---- 4. BIOSPHERE · "Living System" ------------------------------------ The only theme that isn't blue, and the only one that points at the lab's own name: GAIA, the Earth. Abyssal green-black base, bioluminescent mint as the primary, solar gold as the secondary, coral for risk. The hue does double duty — bioluminescence and phosphor-green instrument panels land in the same place, which is also where this lab's two subjects (planetary systems, nuclear/photonic engineering) overlap. Bloom gradients run gold → green → teal, like an aurora rather than a plasma core. */ [data-theme='biosphere'] { --ink: #06160F; --ink-deep: #030F0A; --surface: #10261B; --surface-2: #0B1C14; --surface-3: #123021; --tile: #06160F; --tile-hover: #0B1C14; --cyan: #2BF5A0; /* primary is mint, not cyan — role, not hue */ --cyan-bright: #8CFFCB; --cyan-dim: #12A86B; --cyan-deep: #0A4D33; --amber: #F4B942; --amber-dim: #9C7420; --magenta: #FF6F91; --magenta-dim: #B2465F; --text: #EFF7F1; --text-soft: #C2D6C8; --text-muted: #8CA394; --text-dim: #62776A; --text-faint: #42534A; --line: rgba(43, 245, 160, 0.13); --line-mid: rgba(43, 245, 160, 0.26); --line-strong: rgba(43, 245, 160, 0.46); --line-neutral: rgba(255, 255, 255, 0.07); --line-magenta: rgba(255, 111, 145, 0.24); --on-accent: #03140C; --header-bg: rgba(6, 22, 15, 0.84); --overlay-bg: rgba(3, 15, 10, 0.98); --btn-bg: rgba(43, 245, 160, 0.05); --btn-bg-hover: rgba(43, 245, 160, 0.12); --row-hover: rgba(43, 245, 160, 0.035); --amber-wash: rgba(244, 185, 66, 0.05); --mono-wash: rgba(43, 245, 160, 0.09); --logo-filter: brightness(0) invert(1); --photo-filter: saturate(0.5) contrast(1.05); --plasma-1: #FFE9A3; --plasma-2: #F4B942; --plasma-3: #5FD97F; --plasma-4: #0E8F7A; --plasma-5: #0A3B34; --plasma-c1: #A8FFD9; --plasma-c2: #2BF5A0; --plasma-c3: #12A86B; --plasma-c4: #0A3B2E; --plasma-op: 0.46; } /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* 100%, never a px value — a fixed root font-size overrides the reader's browser default and forces them to zoom. Everything else is in rem so it scales with whatever they've chosen. */ font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 2rem); /* Reserve the scrollbar's space even on pages too short to scroll, so the header doesn't shift sideways when moving between long and short pages. */ scrollbar-gutter: stable; } /* Gentle bump on large displays so the layout doesn't feel sparse at 1440p+. Proportional, so it still respects the reader's base size. */ @media (min-width: 1600px) { html { font-size: 106.25%; } } body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--sans); /* 400, not 300. Space Grotesk Light is a display weight — at body sizes it reads thin and therefore smaller than it is. Headings keep 300. */ font-weight: 400; font-size: 1.0625rem; line-height: 1.7; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } strong, b { font-weight: 500; color: var(--text); } ::selection { background: var(--cyan); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; } /* ========================================================================== Layout primitives ========================================================================== */ .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(4rem, 9vw, 8.5rem); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .section--flush-top { padding-top: 0; } /* Hairline dividers — the PDF's dominant structural device */ .section--ruled { border-top: 1px solid var(--line-neutral); } .rule { height: 1px; border: 0; margin: 0; background: var(--line-neutral); } .grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* Foresight-style asymmetric split: sticky label column + content column */ .split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .split__aside { position: sticky; top: calc(var(--nav-h) + 2.5rem); } .stack-sm > * + * { margin-top: 0.5rem; } .stack > * + * { margin-top: 1.25rem; } .stack-lg > * + * { margin-top: 2.5rem; } .measure { max-width: var(--max-text); } /* ========================================================================== Typography components ========================================================================== */ /* Mono uppercase eyebrow with leading accent dot — lifted straight from the deck */ .eyebrow { display: flex; align-items: center; gap: 0.6em; margin: 0 0 1.25rem; font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan); } .eyebrow::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .eyebrow--amber { color: var(--amber); } .eyebrow--magenta { color: var(--magenta); } .eyebrow--muted { color: var(--text-dim); } .eyebrow--plain::before { display: none; } /* Small mono metadata label, no dot */ .label { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); } .label--cyan { color: var(--cyan); } .label--amber { color: var(--amber); } /* Display headline: light weight, tight tracking, part of it dimmed. In the deck the secondary clause is always set in grey. */ .display { font-size: clamp(2.75rem, 7vw, 5.25rem); font-weight: 300; line-height: 0.98; letter-spacing: -0.035em; } .h-xl { font-size: clamp(2.15rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -0.03em; } .h-lg { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.025em; } .h-md { font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.22; letter-spacing: -0.015em; } .h-sm { font-size: 1.125rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; } .dim { color: var(--text-muted); } .cy { color: var(--cyan); } .am { color: var(--amber); } .mg { color: var(--magenta); } .lead { font-size: clamp(1.1875rem, 1.4vw, 1.4375rem); line-height: 1.6; color: var(--text-soft); } .body-copy { color: var(--text-soft); } .body-copy p + p { margin-top: 1.1em; } .small { font-size: 0.9375rem; color: var(--text-muted); } .footnote { font-size: 0.9375rem; line-height: 1.55; color: var(--text-dim); } /* ========================================================================== Plasma motif — the deck's only imagery: soft radial amber→magenta bloom ========================================================================== */ .plasma { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, var(--plasma-1) 0%, var(--plasma-2) 14%, var(--plasma-3) 30%, var(--plasma-4) 52%, var(--plasma-5) 72%, transparent 88%); filter: blur(28px); opacity: var(--plasma-op); } .plasma--hero { top: -10%; right: -14%; width: min(46rem, 74vw); aspect-ratio: 1; opacity: calc(var(--plasma-op) * 0.84); } .plasma--cyan { background: radial-gradient(circle at 50% 50%, var(--plasma-c1) 0%, var(--plasma-c2) 18%, var(--plasma-c3) 40%, var(--plasma-c4) 66%, transparent 86%); opacity: calc(var(--plasma-op) * 0.44); } .plasma--sm { width: min(26rem, 60vw); aspect-ratio: 1; } /* Dimmed bloom for interior page heads and callouts, scaled per theme so the light theme doesn't wash out. */ .plasma--soft { opacity: calc(var(--plasma-op) * 0.62); } /* Faint grid field, echoing the deck's waveguide-mesh diagrams */ .mesh-bg::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, #000 0%, transparent 100%); opacity: 0.6; } .section > .wrap, .hero > .wrap { position: relative; z-index: 1; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.8rem 1.4rem; border: 1px solid var(--line-mid); border-radius: var(--radius); font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text); background: var(--btn-bg); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .btn:hover { border-color: var(--line-strong); background: var(--btn-bg-hover); color: var(--text); } .btn:active { transform: translateY(1px); } .btn__arrow { transition: transform .2s ease; } .btn:hover .btn__arrow { transform: translateX(3px); } .btn--primary { background: var(--cyan); border-color: var(--cyan); color: var(--on-accent); font-weight: 700; } .btn--primary:hover { background: var(--cyan-bright); border-color: var(--cyan-bright); color: var(--on-accent); } .btn--ghost { background: transparent; border-color: var(--line-neutral); } .btn--sm { padding: 0.55rem 1rem; font-size: 0.8125rem; } /* Inline text link with mono arrow */ .tlink { display: inline-flex; align-items: baseline; gap: 0.45em; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .tlink:hover { color: var(--cyan-bright); border-bottom-color: currentColor; } .tlink__arrow { transition: transform .2s ease; } .tlink:hover .tlink__arrow { transform: translateX(3px); } /* Prose links inside body copy */ .body-copy a, .prose a { color: var(--cyan); border-bottom: 1px solid var(--line-mid); transition: border-color .2s ease, color .2s ease; } .body-copy a:hover, .prose a:hover { color: var(--cyan-bright); border-bottom-color: currentColor; } /* ========================================================================== Header / nav ========================================================================== */ .header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line-neutral); } .header__inner { display: flex; align-items: center; gap: 1.5rem; height: var(--nav-h); } /* Wordmark reproduces the deck's lockup: GAIA in white, LAB in cyan, mono tagline */ .brand { display: flex; align-items: center; gap: 0.7rem; flex: none; } .brand__mark { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .brand__word { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text); } .brand__word span { color: var(--cyan); } .brand__tag { font-family: var(--mono); font-size: 0.5625rem; letter-spacing: 0.1em; color: var(--text-dim); white-space: nowrap; } .brand__dots { display: grid; grid-template-columns: repeat(2, 3px); gap: 2px; align-self: start; margin-top: 3px; } .brand__dots i { width: 3px; height: 3px; background: var(--cyan); border-radius: 1px; } .brand__dots i:nth-child(3) { opacity: 0.35; } /* Nav fills the space between logo and switcher and centres itself in it. Brand, switcher and CTA are identical on every page, so the centre never moves between pages. */ .nav { flex: 1; } .nav__list { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; } .nav__link { position: relative; display: block; padding: 0.35rem 0; font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; transition: color .2s ease; } .nav__link:hover { color: var(--text); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav__link:hover::after { transform: scaleX(1); } .nav__link[aria-current='page'] { color: var(--text); } .nav__link[aria-current='page']::after { transform: scaleX(1); } .nav__link .ext { color: var(--text-faint); font-size: 0.85em; } .header__cta { flex: none; } .nav-toggle { display: none; flex: none; margin-left: auto; padding: 0.5rem; } .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--text); transition: transform .25s ease, opacity .2s ease; } .nav-toggle span + span { margin-top: 6px; } .nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-neutral); } .hero__inner { /* Top matches .pagehead so the eyebrow sits at the same height on every page. */ padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(4.5rem, 12vw, 10rem); max-width: 62rem; } .hero__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-neutral); margin-bottom: clamp(2rem, 5vw, 3.5rem); } .hero__title { margin-bottom: 1.75rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; } /* Page hero for interior pages — shorter, ruled */ .pagehead { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--line-neutral); } .pagehead__title { margin-bottom: 1.25rem; } /* Breadcrumb */ .crumbs { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.5rem; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); } .crumbs a:hover { color: var(--cyan); } /* ========================================================================== Stat strip (deck pages 04 / 07) ========================================================================== */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border-top: 1px solid var(--line-neutral); border-bottom: 1px solid var(--line-neutral); } .stat { padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem); border-left: 1px solid var(--line-neutral); } .stat:first-child { border-left: 0; padding-left: 0; } .stat__label { margin-bottom: 0.85rem; } .stat__value { display: block; font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--amber); margin-bottom: 0.6rem; } .stat__value .unit { font-size: 0.44em; letter-spacing: 0; color: var(--text-soft); } .stat__note { font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); } /* ========================================================================== Cards ========================================================================== */ .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.2vw, 1.75rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s ease, background .25s ease, transform .25s ease; } a.card:hover, .card--interactive:hover { border-color: var(--line-strong); background: var(--surface-3); transform: translateY(-2px); } .card__num { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 1.5rem; } .card__title { margin-bottom: 0.6rem; } .card__body { font-size: 1rem; line-height: 1.6; color: var(--text-muted); } .card__foot { margin-top: auto; padding-top: 1.5rem; } /* Accent hairline on the top edge, used to colour-code card families */ .card--accent { border-top-width: 2px; border-top-color: var(--cyan-dim); } .card--accent-amber { border-top-width: 2px; border-top-color: var(--amber-dim); } .card--accent-magenta { border-top-width: 2px; border-top-color: var(--magenta-dim); } /* Numbered process step, mirroring the deck's 01 INGEST → 05 CONTROL row */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .step { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--line-mid); } .step__n { display: block; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 1rem; } .step__title { margin-bottom: 0.55rem; } .step__body { font-size: 1rem; line-height: 1.6; color: var(--text-muted); } /* ========================================================================== Definition rows (deck page 04: CONTINUOUS / BAYESIAN / CLEAR-BOX) ========================================================================== */ .defs { list-style: none; } .def { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 0.5rem clamp(1.5rem, 3vw, 3rem); padding-block: 1.4rem; border-top: 1px solid var(--line-neutral); } .def:last-child { border-bottom: 1px solid var(--line-neutral); } .def__term { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); padding-top: 0.35rem; } .def__desc { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--text-soft); } /* Numbered ordered list, mono counters */ .olist { list-style: none; counter-reset: ol; } .olist > li { counter-increment: ol; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.5rem 1rem; padding-block: 1.15rem; border-top: 1px solid var(--line-neutral); color: var(--text-soft); } .olist > li:last-child { border-bottom: 1px solid var(--line-neutral); } .olist > li::before { content: counter(ol, decimal-leading-zero); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; color: var(--cyan); padding-top: 0.4rem; } /* Bullet list with cyan square markers */ .blist { list-style: none; } .blist li { position: relative; padding-left: 1.4rem; color: var(--text-soft); } .blist li + li { margin-top: 0.7rem; } .blist li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; background: var(--cyan); border-radius: 1px; } .blist--amber li::before { background: var(--amber); } .blist--magenta li::before { background: var(--magenta); } /* Contrast pair: today's failure mode vs. the GAIA-esque alternative */ .compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .compare__col { padding: clamp(1.25rem, 2.2vw, 1.75rem); border: 1px solid var(--line-neutral); border-radius: var(--radius); background: var(--surface-2); } .compare__col--now { border-color: var(--line-magenta); } .compare__col--next { border-color: var(--line-mid); } .compare__head { margin-bottom: 1.25rem; } /* ========================================================================== Tabs (Foresight-style focus-area switcher) ========================================================================== */ .tabs__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } .tab { padding: 0.6rem 1.05rem; border: 1px solid var(--line-neutral); border-radius: 999px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); transition: color .2s ease, border-color .2s ease, background .2s ease; } .tab:hover { color: var(--text); border-color: var(--line-mid); } .tab[aria-selected='true'] { color: var(--on-accent); background: var(--cyan); border-color: var(--cyan); font-weight: 700; } .tabpanel[hidden] { display: none; } .tabpanel__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; } /* ========================================================================== Team ========================================================================== */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px; background: var(--line-neutral); border: 1px solid var(--line-neutral); border-radius: var(--radius); overflow: hidden; } .person { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.4rem; background: var(--tile); transition: background .25s ease; } .person:hover { background: var(--tile-hover); } .person__avatar { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-mid); border-radius: var(--radius); background: var(--surface); font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; color: var(--cyan); } .person__name { font-size: 1.0625rem; font-weight: 400; line-height: 1.25; } .person__role { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--text-muted); } .person__links { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .person__link { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); border-bottom: 1px solid transparent; } .person__link:hover { border-bottom-color: currentColor; } /* Advisors get an amber avatar to separate them from core staff */ .person--advisor .person__avatar { color: var(--amber); border-color: var(--amber-dim); } /* ========================================================================== Publication + news rows ========================================================================== */ .rows { list-style: none; border-top: 1px solid var(--line-neutral); } .row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem); align-items: baseline; padding-block: 1.6rem; border-bottom: 1px solid var(--line-neutral); transition: background .2s ease; } .row:hover { background: var(--row-hover); } .row__date { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding-top: 0.3rem; } .row__title { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); font-weight: 400; line-height: 1.35; letter-spacing: -0.015em; } .row:hover .row__title { color: var(--text); } .row__meta { margin-top: 0.5rem; } .row__abstract { display: block; margin-top: 0.6rem; max-width: 46rem; font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); } .row__source { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; } .row:hover .row__source { color: var(--cyan-bright); } .newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .news__tag { margin-bottom: 1.1rem; } .news__text { font-size: 1rem; line-height: 1.6; color: var(--text-soft); } /* ========================================================================== Long-form prose (project outlines) ========================================================================== */ .prose { max-width: var(--max-text); color: var(--text-soft); } .prose h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.55rem, 2.2vw, 1.95rem); color: var(--text); } .prose h3 { margin: 2.25rem 0 0.85rem; font-size: 1.25rem; font-weight: 400; color: var(--text); } .prose > *:first-child { margin-top: 0; } .prose p { line-height: 1.72; } .prose ol, .prose ul { margin: 1.35rem 0; } /* ========================================================================== Callout / CTA band ========================================================================== */ .callout { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); } .callout__inner { position: relative; z-index: 1; max-width: 46rem; } .callout .plasma { opacity: calc(var(--plasma-op) * 0.62); } /* Fine-print funding note */ .notebox { padding: 1.15rem 1.35rem; border-left: 2px solid var(--amber-dim); background: var(--amber-wash); border-radius: 0 var(--radius) var(--radius) 0; } /* ========================================================================== Footer ========================================================================== */ .footer { position: relative; overflow: hidden; border-top: 1px solid var(--line-neutral); background: var(--ink-deep); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .footer__title { margin-bottom: 1.25rem; } .footer__list { list-style: none; } .footer__list li + li { margin-top: 0.7rem; } .footer__list a, .footer__list span { font-size: 0.9375rem; color: var(--text-muted); transition: color .2s ease; } .footer__list a:hover { color: var(--cyan); } /* Bottom bar reproduces the deck's "01 / 10 ······ gaia-lab.de / plume" footer */ .footer__bar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--line-neutral); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); } .footer__bar a:hover { color: var(--cyan); } .skip { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.75rem 1rem; background: var(--cyan); color: var(--on-accent); font-family: var(--mono); font-size: 0.8125rem; } .skip:focus { left: 0.5rem; top: 0.5rem; } /* ========================================================================== Scroll reveal ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1080px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1140px) { .nav-toggle { display: block; } .header__cta { display: none; } .nav { position: fixed; inset: var(--nav-h) 0 auto; margin: 0; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; background: var(--overlay-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-neutral); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility .22s; } .nav.is-open { opacity: 1; visibility: visible; transform: none; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.75rem; } .nav__list li { border-bottom: 1px solid var(--line-neutral); } .nav__link { padding: 1rem 0; font-size: 0.9375rem; } .nav__link::after { display: none; } .split { grid-template-columns: 1fr; } .split__aside { position: static; } .tabpanel__grid { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .grid--2, .grid--3, .grid--4, .compare { grid-template-columns: 1fr; } .def { grid-template-columns: 1fr; gap: 0.35rem; } .def__term { padding-top: 0; } .row { grid-template-columns: 1fr; } .row__date { padding-top: 0; } .stat { border-left: 0; padding-inline: 0; border-top: 1px solid var(--line-neutral); } .stat:first-child { border-top: 0; } .footer__grid { grid-template-columns: 1fr; } .hero__meta { justify-content: flex-start; } } /* ========================================================================== Pipeline — horizontal numbered rail. Mirrors deck page 05: 01 INGEST → 02 LIFT → … → 05 CONTROL, boxed stages joined by arrows in the gap. ========================================================================== */ .pipeline { --pgap: clamp(0.6rem, 1.2vw, 1.25rem); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pgap); list-style: none; } .stage { position: relative; display: flex; flex-direction: column; padding: 1.15rem 1.1rem 1.35rem; background: var(--surface-2); border: 1px solid var(--line); border-top: 2px solid var(--cyan-dim); border-radius: var(--radius); transition: border-color .25s ease, background .25s ease; } .stage:hover { border-color: var(--line-strong); background: var(--surface-3); } /* Connector sits exactly in the grid gap, so it never overlaps text. */ .stage:not(:last-child)::after { content: '→'; position: absolute; top: 50%; left: 100%; width: var(--pgap); transform: translateY(-50%); text-align: center; font-family: var(--mono); font-size: 0.8125rem; line-height: 1; color: var(--cyan-dim); pointer-events: none; } .stage__n { display: block; margin-bottom: 0.9rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); } .stage__title { margin-bottom: 0.5rem; font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); } .stage__body { font-size: 0.9375rem; line-height: 1.55; color: var(--text-muted); } /* Amber variant for the "how it works" narrative */ .pipeline--amber .stage { border-top-color: var(--amber-dim); } .pipeline--amber .stage__n { color: var(--amber); } .pipeline--amber .stage:not(:last-child)::after { color: var(--amber-dim); } /* 5 columns is too tight below ~1080px; drop arrows and reflow. */ @media (max-width: 1080px) { .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stage:not(:last-child)::after { display: none; } } @media (max-width: 700px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 460px) { .pipeline { grid-template-columns: 1fr; } } /* ========================================================================== Team photos Drop files into assets/img/team/.jpg — square crops. If a file is missing the is removed by JS and the monogram shows. ========================================================================== */ .person { padding: 0; gap: 0; } .person__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line-neutral); } .person__photo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: var(--photo-filter); transition: filter .35s ease, transform .5s ease; } .person:hover .person__photo { filter: saturate(1) contrast(1); transform: scale(1.03); } /* Monogram sits underneath the photo as the fallback layer. */ .person__mono { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 1.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--cyan-deep); background: radial-gradient(circle at 50% 40%, var(--mono-wash), transparent 70%), var(--surface); } .person--advisor .person__mono { color: var(--amber-dim); } .person__body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; padding: 1.15rem 1.25rem 1.3rem; } .person__body .person__links { margin-top: auto; padding-top: 0.75rem; } /* ========================================================================== Affiliations / partner logos Drop files into assets/img/affiliations/.svg (SVG preferred). Logos are knocked out to white so dark-on-light source files still read on the navy background. Add .affil__logo--raw to keep original colours. ========================================================================== */ .affils { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; list-style: none; background: var(--line-neutral); border: 1px solid var(--line-neutral); border-radius: var(--radius); overflow: hidden; } .affil { display: grid; place-items: center; gap: 0.5rem; min-height: 104px; padding: 1.25rem 1rem; background: var(--tile); text-align: center; transition: background .25s ease; } .affil:hover { background: var(--tile-hover); } .affil__logo { max-height: 34px; width: auto; filter: var(--logo-filter); opacity: 0.62; transition: opacity .25s ease; } .affil:hover .affil__logo { opacity: 1; } .affil__logo--raw { filter: none; opacity: 0.85; } .affil__name { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); transition: color .25s ease; } .affil:hover .affil__name { color: var(--text); } /* Once a logo has actually loaded, the text label is redundant. */ .affil.has-logo .affil__name { display: none; } /* ========================================================================== Theme switcher Three swatches, each previewing its own palette regardless of which theme is active — so the preview colours here are intentionally hard-coded. ========================================================================== */ /* Ordered explicitly so the switcher sits between nav and CTA on desktop, regardless of where it appears in the markup. */ .brand { order: 1; } .nav { order: 2; } .theme-switch { order: 3; } .header__cta { order: 4; } .theme-switch { display: flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.25rem; border: 1px solid var(--line-neutral); border-radius: 999px; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .theme-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; transition: background .2s ease; } .theme-btn:hover { background: var(--btn-bg-hover); } .theme-btn__dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-neutral) inset; transition: transform .2s ease; } .theme-btn:hover .theme-btn__dot { transform: scale(1.12); } .theme-btn[aria-pressed='true'] { background: var(--btn-bg-hover); box-shadow: 0 0 0 1px var(--line-strong); } .theme-btn[aria-pressed='true'] .theme-btn__dot { transform: scale(1.15); } .theme-btn[data-theme-set='dark'] .theme-btn__dot { background: linear-gradient(135deg, #00B5F9 0%, #FF5CB8 52%, #FFA326 100%); } .theme-btn[data-theme-set='plasma'] .theme-btn__dot { background: linear-gradient(135deg, #22E6FF 0%, #FF3D9A 52%, #FFC24D 100%); } .theme-btn[data-theme-set='light'] .theme-btn__dot { background: linear-gradient(135deg, #FFFFFF 0%, #0072AD 55%, #C4006B 100%); } .theme-btn[data-theme-set='biosphere'] .theme-btn__dot { background: linear-gradient(135deg, #2BF5A0 0%, #F4B942 52%, #FF6F91 100%); } /* Cross-fade on switch. Applied by JS only for the duration of the change, so it never interferes with hover transitions. */ @media (prefers-reduced-motion: no-preference) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .28s ease, border-color .28s ease, color .28s ease, opacity .28s ease !important; } } @media (max-width: 1140px) { /* Keep the switcher left of the burger. */ .theme-switch { order: 2; margin-left: auto; } .nav-toggle { order: 3; margin-left: 0.25rem; } } @media (max-width: 400px) { .theme-switch { gap: 0.15rem; padding: 0.2rem; } .theme-btn { width: 23px; height: 23px; } }