/* Keera - one stylesheet for all nineteen pages (the eighteen content pages and 404.html). Quiet, one accent, light or dark depending on the viewer's system setting. Layout is a single column: .wrap for full-width bands, .prose for anything meant to be read. Pages carry classes only - no inline styles, no media queries in markup. */ /* ---------- fonts (variable, latin + latin-ext cuts only) ---------- */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- tokens ---------- */ /* Every colour on the site comes from these twelve tokens, which is what makes the dark scheme one block instead of a second stylesheet. A hex value anywhere below this point is a bug: it would only be right in one scheme. */ :root { color-scheme: light dark; --bg: #ffffff; --surface: #f6f7f8; --card: #ffffff; --ink: #14171c; --muted: #5b6472; --line: #e2e5e9; --accent: #1657c8; --accent-hover: #0f47a8; --btn-ink: #ffffff; --ok: #166534; --err: #b42318; /* The invented corporation's red, and the one colour here that names nothing on the page but the two brand marks in #omnivor. */ --omnivor: #c0271d; /* The green the sustainability pages run their whole accent in, and the only green on the site. It is not a second accent loose in the palette: nothing reads it but the .theme-leaf block below. */ --leaf: #1d7a44; --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1040px; --prose: 34rem; --radius: 10px; } /* Dark scheme. It follows the system setting only - there is no toggle, and adding one would mean JavaScript and a stored preference on a site that currently ships neither. The artwork is left alone: the mascot is a transparent PNG-alpha webp and sits on the dark ground, and the comic pages and the screenshot are framed images that carry their own light. */ @media (prefers-color-scheme: dark) { :root { --bg: #0f1218; --surface: #161a21; --card: #1b2029; --ink: #e7eaef; --muted: #a0a9b8; --line: #272d38; --accent: #6ea8ff; --accent-hover: #8dbcff; --btn-ink: #0b0e14; --ok: #4ade80; --err: #ff9c93; --omnivor: #ff8f83; --leaf: #5fd08a; } } /* The sustainability pages, and only those, run the accent green: . The page argues about clean power, so the colour it is drawn in is part of the argument rather than decoration. It is a swap, not an addition - no page shows blue and green at once - which is what keeps the one-accent rule intact. --accent picks up whichever --leaf the scheme is already using, so only the hover shade needs saying twice. */ .theme-leaf { --accent: var(--leaf); --accent-hover: #16603a; } @media (prefers-color-scheme: dark) { .theme-leaf { --accent-hover: #8ee0ae; } } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; } img, svg { max-width: 100%; } img { height: auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; text-wrap: balance; } h1 { font-size: clamp(30px, 5vw, 44px); } h2 { font-size: clamp(24px, 3.4vw, 31px); } h3 { font-size: 18px; letter-spacing: -0.01em; } p { margin: 0; } p + p, h2 + p, h3 + p, p + ul, p + .btn-row { margin-top: 14px; } strong { font-weight: 600; } .eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; } .lede { font-size: 19px; color: var(--muted); } .note { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted); } .mono { font-family: var(--mono); } /* ---------- layout ---------- */ .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 12px; top: 12px; z-index: 10; background: var(--bg); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 28px); } .prose { max-width: var(--prose); } .band { padding: clamp(48px, 7vw, 76px) 0; border-top: 1px solid var(--line); } .band--alt { background: var(--surface); } .band > .wrap > * + * { margin-top: 28px; } [id] { scroll-margin-top: 24px; } /* ---------- header ---------- */ .site-header { border-bottom: 1px solid var(--line); background: var(--bg); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 16px; padding-bottom: 16px; } .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; } .brand:hover { text-decoration: none; } .brand img { display: block; flex: 0 0 auto; } .site-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14.5px; /* the DE/EN/FR switcher sits before the nav in the DOM - the menu checkbox has to be the nav's preceding sibling - so the row is ordered here */ order: 1; } .site-nav a { color: var(--muted); } .site-nav a[aria-current="page"] { color: var(--ink); } .lang { display: flex; /* the links pick up vertical padding on coarse pointers while the current language and the separators do not, so center them rather than letting the default stretch pull the unpadded items up */ align-items: center; gap: 6px; order: 2; margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); } .lang a { color: var(--muted); } .lang [aria-current] { color: var(--ink); font-weight: 600; } .lang span[aria-hidden] { color: var(--line); } /* The nav renders three ways. Above 1000px the six labels fit beside the wordmark and the switcher. Between 700px and 1000px they take a full-width row of their own. Below 700px that row is a panel behind a hamburger. The toggle is a for the visually hidden .site-menu-state checkbox that sits just before the

, so the open state is a sibling selector and needs no JavaScript. It is a checkbox rather than

on purpose: the same

has to render inline above the breakpoint, and a closed

hides its children through a slot CSS cannot reliably re-show. */ .site-menu-state, .site-menu-toggle { display: none; } @media (max-width: 1000px) { .site-nav { order: 3; flex: 1 1 100%; } } @media (max-width: 700px) { /* wordmark, switcher and toggle have to share a 320px row on a small phone */ .site-header .wrap { gap: 10px 14px; } .site-menu-state { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .site-menu-toggle { display: flex; align-items: center; justify-content: center; order: 2; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 14px; cursor: pointer; user-select: none; } .site-menu-state:focus-visible + .site-menu-toggle { outline: 2px solid var(--accent); outline-offset: 2px; } /* the toggle is an icon; its word is the accessible name of the checkbox and must stay in the DOM, so it is hidden rather than removed */ .site-menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-menu-bars { display: block; position: relative; width: 15px; height: 2px; background: currentColor; } .site-menu-bars::before, .site-menu-bars::after { content: ""; position: absolute; left: 0; width: 15px; height: 2px; background: currentColor; } .site-menu-bars::before { top: -5px; } .site-menu-bars::after { top: 5px; } .lang { order: 1; } .site-nav { display: none; } .site-menu-state:checked ~ .site-nav { display: flex; flex-direction: column; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); } .site-menu-state:checked ~ .site-nav a { padding: 12px 2px; font-size: 16px; border-bottom: 1px solid var(--line); } /* the header's own bottom border closes the panel */ .site-menu-state:checked ~ .site-nav a:last-child { border-bottom: 0; } } /* ---------- hero ---------- */ .hero { padding: clamp(44px, 7vw, 80px) 0 clamp(44px, 7vw, 72px); } .hero .wrap { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; grid-template-columns: 1fr; } .hero--split .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .hero p { margin-top: 18px; } .hero-art { margin: 0; } .hero-art img { display: block; width: 100%; border-radius: var(--radius); } @media (max-width: 780px) { .hero--split .wrap { grid-template-columns: 1fr; } .hero-art { max-width: 360px; } } /* ---------- buttons and links ---------- */ .btn-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } .btn { display: inline-block; background: var(--accent); color: var(--btn-ink); font-weight: 600; font-size: 16px; padding: 11px 20px; border: 1px solid var(--accent); border-radius: 8px; } .btn:hover { text-decoration: none; background: var(--accent-hover); border-color: var(--accent-hover); } .btn--quiet { background: transparent; color: var(--ink); border-color: var(--line); } .btn--quiet:hover { background: var(--surface); } .arrow { font-size: 15.5px; } /* ---------- cards and lists ---------- */ .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .card { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 26px); background: var(--card); } .card > * + * { margin-top: 12px; } /* Product icons: a line glyph in the accent, above the name it belongs to. */ .icon { display: block; width: 30px; height: 30px; color: var(--accent); } .card .icon { margin-bottom: 14px; } .hero .icon { margin-bottom: 16px; } .card > .icon + h3 { margin-top: 0; } /* The two brand marks in #omnivor on the sustainability pages. Not part of the five-glyph icon set: these are filled marks in each side's own colour, and they are built from the same two parts on purpose, so the shapes carry the contrast - Keera's C is open with the square at its mouth, Omnivor's O is closed with the square sealed inside. Each sits inside its own

, to the left of the name, so the mark and the name read as one line - which is why this one is 26px where the product icons above a name are 30px. / .logo-head { display: flex; align-items: center; gap: 10px; } / The same row for the leaf beside the #partners

: the one glyph that sits left of a section heading rather than above a name. It aligns to the top rather than the middle because an

in a 34rem column wraps to two lines and a leaf centred against both would float beside neither; at 1.15em its box is within a hair of the first line's, so flex-start lands it on that line. It is sized in em for the same reason - the heading itself is a clamp. / .icon-head { display: flex; align-items: flex-start; gap: 12px; } .icon-head > .icon { flex: none; width: 1.15em; height: 1.15em; } / This is the one

on the site that sits outside .prose, as a child of .wrap: the 34rem reading measure is for paragraphs, and at 31px it is 30px short of holding "Wie wir Infrastruktur-Partner wählen" and the leaf on one line. Lifting it out puts it under .band > .wrap > * + , which is the 28px band rhythm rather than the 14px a heading wants over its own paragraph, so the gap is restated here. / .icon-head + .prose { margin-top: 14px; } .logo { flex: none; width: 26px; height: 26px; } .logo--keera { color: var(--accent); } .logo--omnivor { color: var(--omnivor); } .card h3 + p { margin-top: 10px; } .card p { color: var(--muted); } /* A quieter card than the two product ones: a tinted panel with no border, so the deployment options do not compete with the products above them. / .card--quiet { border-color: transparent; background: var(--surface); } .card--quiet .icon { color: var(--muted); } .plain-list { margin: 0; padding: 0; list-style: none; } .plain-list li { padding-left: 18px; position: relative; color: var(--muted); } .plain-list li + li { margin-top: 8px; } .plain-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--muted); } / ---------- diagrams ---------- / / The diagrams are HTML and CSS rather than SVG on purpose: they reflow from a row into a column instead of scrolling sideways, they inherit the colour tokens in both schemes, and they stay readable to a screen reader in source order. / / What Keera Code is, as a stack: the layers share their borders so the block reads as one thing seen in cross-section rather than four loose cards. The API layer carries the accent because it is the only layer a client touches. / .stack-fig { margin: 0; } .stack { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; } .stack-layer { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 24px; padding: 18px 22px; } .stack-layer + .stack-layer { border-top: 1px solid var(--line); } .stack-layer--api { box-shadow: inset 3px 0 0 var(--accent); } .stack-label { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .stack-layer--api .stack-label { color: var(--accent); } .stack-layer p + p { margin-top: 0; } .stack-layer .stack-text { color: var(--muted); font-size: 16px; } .stack-fig figcaption { margin-top: 10px; } @media (max-width: 620px) { .stack-layer { grid-template-columns: 1fr; gap: 6px; } } .flow { margin: 0; display: grid; grid-template-columns: 1fr auto minmax(0, 1.25fr) auto 1fr; align-items: stretch; gap: 12px; } .flow-stage { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 18px 20px; } .flow-stage--main { border-color: var(--accent); } .flow-title { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .flow-stage--main .flow-title { color: var(--accent); } .flow-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: 15.5px; } .flow-steps li { counter-increment: step; position: relative; padding-left: 26px; color: var(--ink); } .flow-steps li + li { margin-top: 9px; } .flow-steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); } .flow-arrow { align-self: center; color: var(--muted); font-size: 20px; line-height: 1; } .flow-branch { grid-column: 3; text-align: center; color: var(--muted); font-family: var(--mono); font-size: 12.5px; } @media (max-width: 860px) { .flow { grid-template-columns: 1fr; gap: 10px; } .flow-arrow { justify-self: center; transform: rotate(90deg); } .flow-branch { grid-column: 1; text-align: left; } } / Text beside an illustration. Same shape as the split hero, one band down. / .split { display: grid; gap: clamp(24px, 4vw, 44px); align-items: center; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } @media (max-width: 780px) { .split { grid-template-columns: 1fr; } .split .figure { max-width: 360px; } } .facts { display: grid; gap: 22px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } / Four-item groups read better two-up than as three plus an orphan: four tracks of 240px do not fit the 1040px wrap. / .facts--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts h3 { margin-bottom: 8px; } .facts p { color: var(--muted); } / ---------- tables ---------- / .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 34rem; } th, td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-bottom: 1px solid var(--line); } thead th { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; } tbody th { font-weight: 600; white-space: nowrap; } td { color: var(--muted); } / Short values like "dein Tenant" read worse broken over two lines than the column reads narrow. / td.tight { white-space: nowrap; } / ---------- figures ---------- / .figure { margin: 0; } .figure img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); } .figure figcaption { margin-top: 10px; } / The gateway screenshot is 1920px of small UI type: below 700px it scrolls sideways instead of shrinking into a grey smudge. The scrollbar is left visible on purpose - a hidden one leaves the right half of the shot undiscoverable. / @media (max-width: 700px) { .figure--shot { overflow-x: auto; } .figure--shot img { width: 860px; max-width: none; } } / ---------- story ---------- / .act { padding: clamp(48px, 7vw, 76px) 0; border-top: 1px solid var(--line); } .act-intro { max-width: var(--prose); margin-bottom: clamp(28px, 4vw, 40px); } .act-intro p { margin-top: 14px; color: var(--muted); } / One comic page per act: four rendered pages replaced the 24 single-panel slots. The page is capped below its own pixel width so the lettering stays sharp, and the narration survives as a per-page transcript in the figcaption - a screen reader cannot read text baked into artwork, and the captions are what carry the story's cross-references between panels. / .comic { margin: 0; max-width: 860px; } .comic img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); } .comic figcaption { margin-top: 14px; font-size: 16px; color: var(--muted); } .comic summary { cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink); } / decimal-leading-zero reproduces the 01-24 numbering the artwork itself letters, and `start` on each
keeps a page's transcript on its own numbers - act IV's captions refer back to panels 05, 12 and 16 by number. / .script { margin: 16px 0 0; padding-left: 2.6em; max-width: var(--prose); list-style: decimal-leading-zero; } .script li + li { margin-top: 10px; } .script li::marker { font-family: var(--mono); font-size: 12px; color: var(--ink); } .cast { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .cast img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; } .cast h3 { margin-bottom: 6px; } .cast p { color: var(--muted); font-size: 16px; } @media (max-width: 620px) { .facts--four { grid-template-columns: 1fr; } } / ---------- contact form ---------- / .form { max-width: 34rem; } .field + .field, .field + .choices, .choices + .field, .field + .form-actions { margin-top: 18px; } .label { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .label span { text-transform: none; letter-spacing: 0; } .input { width: 100%; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; } .input:focus { border-color: var(--accent); outline: none; } textarea.input { resize: vertical; min-height: 96px; } .choices { border: 0; margin: 0; padding: 0; } .choices legend { padding: 0; } .choice { display: flex; align-items: center; gap: 10px; font-size: 16px; } .choice + .choice { margin-top: 8px; } .choice input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; } .form-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; } .form-status { display: none; font-size: 15.5px; } .form-status.is-shown { display: block; } .form-status.is-ok { color: var(--ok); } .form-status.is-error { color: var(--err); } .hp { display: none; } / ---------- footer ---------- / .site-footer { border-top: 1px solid var(--line); padding: 40px 0; font-size: 15px; color: var(--muted); } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .site-footer a { color: var(--muted); } .site-footer .note { flex: 1 1 100%; } / ---------- coarse pointers and print ---------- */ @media (pointer: coarse) { .site-nav a, .site-footer nav a, .lang a { padding: 4px 0; } } @media print { :root { --bg: #ffffff; --surface: #f6f7f8; --card: #ffffff; --ink: #14171c; --muted: #3f4650; --line: #d9dde2; --accent: #1657c8; --btn-ink: #ffffff; --omnivor: #c0271d; --leaf: #1d7a44; } .site-header, .site-footer, .skip-link, form { display: none; } body { font-size: 11pt; } a { color: inherit; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }