/* ---------------------------------------------------------------------------
CO2IN Help & FAQ theme for Material for MkDocs.
Rule for this file: components come from www.co2in.com, they are not
invented here. Where a component exists on the live site, its rule is
copied. Reference implementation: design/reference.html.
Colour roles, taken from the live site's own usage:
- ALL headings and body copy are black (#1A1C1E).
- Green (#2FA875) is for buttons, icons, underlines and active states.
- Forest (#054938) is a BLOCK BACKGROUND, never text. It appears as a
text colour in exactly one rule on co2in.com.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Rubik";
src: url("../fonts/rubik-var.woff2") format("woff2-variations");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
:root {
--co2in-cream: #FEFEF9;
--co2in-mint-pale: #ECFFE3;
--co2in-mint: #A0E8C0;
--co2in-forest: #054938;
--co2in-green: #2FA875;
--co2in-ink: #1A1C1E;
--co2in-peach: #FFC9A1;
--co2in-slate: #6B7A72;
--co2in-rule: #DFE6DE;
/* design/reference.html declares this as --card. Card and panel surfaces sit
on it; it is not the same white as the cream page ground. */
--co2in-card: #FFFFFF;
/* The warning callout, from design/reference.html:122-123 -- `.warn` and
`.warn .ic`. Approved values that the reference itself never named, so
they were sitting in this file as bare literals. Named here rather than
re-mixed: they are the design's, not ours. */
--co2in-warn-bg: #FFF1E4;
--co2in-warn-ink: #C4763A;
/* Material composes --md-text-font-family as
`var(--md-text-font, _), -apple-system, ...`, so the knob to set is
--md-text-font, and it takes a bare family name. Setting
--md-text-font-family directly is overwritten by the theme. */
/* co2in.com's button arrow, for contexts that cannot carry inline SVG. */
--co2in-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 18.626h30M29.4 14l4.33 4.331a.5.5 0 0 1-.011.719l-4.474 4.19'/%3E%3C/svg%3E");
--md-text-font: "Rubik";
--md-code-font: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Material declares its palette on :root, and only stamps
[data-md-color-scheme] on when a palette is configured in
mkdocs.yml. There is none here, so overriding the scheme selector alone
never matched and the header stayed Material indigo. Override :root --
extra_css loads after the theme, so equal specificity resolves our way --
and keep the scheme selector for the day a palette toggle is added. */
:root,
[data-md-color-scheme="default"] {
--md-default-bg-color: var(--co2in-cream);
--md-default-fg-color: var(--co2in-ink);
--md-default-fg-color--light: var(--co2in-slate);
/* Material's muted-text ramp needs a step between slate and rule. This was
a bare #9AA69F, which appears nowhere in design/reference.html -- the one
colour in this file that really was invented rather than copied. Derived
from the palette instead, so the set of CO2IN colours stays exactly the
reference's. The fallback is for browsers without color-mix. */
--md-default-fg-color--lighter: var(--co2in-slate);
--md-default-fg-color--lighter: color-mix(in srgb, var(--co2in-slate) 62%, var(--co2in-cream));
--md-default-fg-color--lightest: var(--co2in-rule);
/* Light header: cream ground, black content. */
--md-primary-fg-color: var(--co2in-cream);
--md-primary-bg-color: var(--co2in-ink);
--md-primary-bg-color--light: var(--co2in-slate);
--md-accent-fg-color: var(--co2in-green);
--md-typeset-a-color: var(--co2in-green);
--md-code-bg-color: var(--co2in-mint-pale);
--md-code-fg-color: var(--co2in-forest);
}
/* --- Header ------------------------------------------------------------- */
/* GEOMETRY IS IN PX ON PURPOSE.
The approved design is authored against a 16px root. Material sets
html{font-size:125%} = 20px, so every rem copied from the design renders
25% oversized -- the button came out 15px/9.4px padding instead of
14px/7.5px, and the nav gap 25px instead of 22px. px keeps the header
identical to the design regardless of the theme's root scaling. */
.md-header {
border-bottom: 1px solid var(--co2in-rule);
box-shadow: none;
}
.md-header__inner { padding: 18px 32px; }
/* Logo at 46px: co2in.com renders the wordmark at its natural 76x46 with no
CSS override, so that is the authentic size. Material otherwise pads the
anchor by 8px and caps the image at 24px.
The 10px gap to the title also needs Material's own 20px title margin
removed, or the two stack to 30px. */
.md-header .md-logo { padding: 0; margin-right: 10px; }
.md-header .md-logo :is(img, svg) { height: 46px; width: auto; }
/* The landing page sets `hide: navigation`, so its drawer holds no navigation
and the card grid is the navigation instead. Material renders the toggle
from 1219px down regardless; a control that opens an empty panel is worse
than no control. co2in-header--home is rendered server-side by
header.html, so this needs no JavaScript and cannot flash. */
.co2in-header--home label[for="__drawer"] { display: none; }
/* "Help & FAQ" at 19px/500. This KNOWINGLY departs from design/reference.html,
which specifies 15px: the title is sized against the 46px co2in.com wordmark
beside it, not against the reference's 26px mark. Reviewed and kept
2026-08-11 -- see review/2026-08-11-ux-refactor-design.md, A1. Do not "fix"
this back to 15px without also shrinking the wordmark. Material ships
18px / 700. */
.md-header__title { font-size: 19px; font-weight: 500; line-height: 1.3; margin: 0; }
.md-header__title .md-ellipsis {
font-size: 19px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--co2in-ink);
}
/* Material swaps the site name for the page title on scroll, and implements
that by absolutely positioning both topics inside a fixed 48px block. With
the swap suppressed, the absolute topic stayed pinned to the top of that
block, sitting 14px above the logo's centre line. Returning it to normal
flow lets the header's own align-items:center do the alignment. */
/* Material sets the title offset as `[dir=ltr] .md-header__title` -- (0,2,0),
which outranks a bare class, so `.md-header__title { margin: 0 }` was
silently losing and the gap stayed 30px instead of 10px. */
/* Optically centre the title on the LOGO'S CAPITALS, not on its box. The
wordmark's box is 46 units tall, but "CO IN" only occupies 0-36.10 -- the
subscript 2 descends to 45.90 and drags the box centre down with it. The
caps' centre therefore sits 4.95 units above the box centre, so text
centred on the box reads ~5px low against the letters it should align to.
Measured by rasterising the SVG and reading each colour's painted extent. */
.md-header .md-header__title {
display: flex;
align-items: center;
height: auto;
margin: 0 0 0 5px;
position: relative;
/* Derived value was -4.9px, from the caps sitting 4.95 units above the box
centre. That overshoots by about 2px in practice -- the derivation aligns
the text's box to the caps, but the eye reads the text's own optical
centre, which sits lower than its box centre. Tuned against the rendered
header at 2px less. */
top: -2.9px;
}
.md-header__title .md-header__ellipsis { height: auto; }
.md-header__title .md-header__topic { position: static; }
/* The second topic MUST stay hidden, and it is not an oversight.
Material's title swap works by absolutely positioning both topics on top of
each other and cross-fading them. The rule above puts them back in normal
flow, which is what lets the header's own align-items:center place the
title against the wordmark. Two static topics do not overlap -- they stack,
doubling the title box to 49px and leaving the visible one 17px above the
logo's centre line.
Removing this line to "restore the swap" was tried on 2026-08-11 and did
exactly that. The swap and the static alignment cannot both be had without
reworking Material's markup; the alignment wins. */
.md-header__title .md-header__topic + .md-header__topic { display: none; }
.co2in-header__actions {
display: flex;
align-items: center;
gap: 22px;
margin-left: auto;
padding-left: 12px;
}
/* Language selector: "EN" plus chevron, matching co2in.com, replacing
Material's CJK translate glyph. */
.co2in-lang { display: flex; align-items: center; }
.co2in-lang .md-select { display: flex; align-items: center; }
.co2in-lang__button {
display: flex;
align-items: center;
gap: 5px;
padding: 0;
border: none;
background: transparent;
color: var(--co2in-slate);
font-family: inherit;
font-size: 14px;
line-height: 1.3;
/* The text box alone was 16.9px high, which is not a control. */
min-height: 32px;
cursor: pointer;
}
.co2in-lang__button:hover { color: var(--co2in-green); }
/* The trigger was 13px and the options inherited Material's 16px, so opening
the menu jumped the type scale for no reason. Both are 14px now. */
.co2in-lang .md-select__link { font-size: 14px; }
.co2in-lang .md-select__item { min-height: 36px; }
/* Neither the trigger nor the list said which language was already on. */
.co2in-lang .md-select__link[aria-current="true"] {
color: var(--co2in-green);
font-weight: 500;
}
.co2in-lang__chevron {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
}
.co2in-lang .md-select__inner { margin-top: 4px; }
/* co2in.com link: .c-bkmSKn on the live site -- black, with a 1px green bar
that sweeps in from the right on hover. */
.co2in-header__link {
position: relative;
color: var(--co2in-ink);
font-size: 14px;
line-height: 1.3;
text-decoration: none;
white-space: nowrap;
}
.co2in-header__link::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 100%;
height: 1px;
background: var(--co2in-green);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.25s ease;
}
.co2in-header__link:hover { color: var(--co2in-green); }
.co2in-header__link:hover::after { transform: scaleX(1); transform-origin: left; }
/* Primary button: .c-eFjjir + .c-eFjjir-dWUOxu-variant-primary, at the
header size modifier. Copied value for value.
Scoped tightly -- Material's own link rules outrank a bare class. */
.md-header .co2in-btn,
.md-typeset a.co2in-btn,
.co2in-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7.5px 18px;
border: 1px solid var(--co2in-green);
border-radius: 100px;
background: var(--co2in-green);
color: var(--co2in-cream);
font-size: 14px;
line-height: 21px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.md-header .co2in-btn:hover,
.md-typeset a.co2in-btn:hover,
.co2in-btn:hover {
background: transparent;
color: var(--co2in-green);
text-decoration: none;
}
/* 38px is co2in.com's --sizes-buttonIcon: a long thin arrow beside 14px text,
which is what gives the button its wide proportion. */
.co2in-btn__arrow {
width: 38px;
height: 38px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
/* In-content buttons (the two app store links in registration.md) take the
smaller icon. Markdown cannot carry the inline SVG, so the arrow is a mask
-- which means it still inherits colour through the hover inversion, unlike
a background image would.
The contact band is excluded from the type and padding shrink only. Its
button is authored in markdown like any other, so it was silently rendering
at 13px where design/reference.html gives it the default 14px button. The
26px arrow below is NOT scoped away: reference.html:51 sets .btn-ic to
26px, which is what this already matches. (The arrow's SVG carries
viewBox="0 0 38 38"; those are coordinate units, not rendered pixels.)
Negating by ancestor rather than by parent is deliberate: markdown wraps
the button in a
, so the anchor's parent is that
and never
.co2in-band itself. */
.md-typeset a.co2in-btn:not(.co2in-band a) { font-size: 13px; padding: 6.4px 16px; }
/* Consecutive in-content buttons -- the two app-store links -- are separate
paragraphs with no margin between them, so they sat edge to edge with a 0px
gap and read as one merged control. */
.md-typeset p + p > a.co2in-btn:only-child { margin-top: 10px; }
.md-typeset a.co2in-btn { margin-bottom: 2px; }
.md-typeset a.co2in-btn::after {
content: "";
width: 26px;
height: 26px;
flex: none;
background: currentColor;
-webkit-mask: var(--co2in-arrow) center / contain no-repeat;
mask: var(--co2in-arrow) center / contain no-repeat;
}
/* --- Typography --------------------------------------------------------- */
/* px again: the design's type scale is authored at a 16px root. */
.md-typeset { font-size: 15px; line-height: 1.75; color: var(--co2in-ink); }
.md-typeset p { max-width: 64ch; margin: 0 0 12px; }
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
color: var(--co2in-ink);
font-weight: 500;
}
.md-typeset h1 { font-size: 32px; letter-spacing: -0.025em; margin: 0 0 12px; line-height: 1.15; }
/* H3 is used for the cases inside a question -- e.g. the ways a transfer can
go wrong. It needs enough air to read as a sub-block rather than as a bold
line in a run of text, and a green rule to tie it to the answer above. */
.md-typeset h3 {
font-size: 16px;
letter-spacing: -0.01em;
margin: 26px 0 8px;
padding-left: 12px;
border-left: 2px solid var(--co2in-green);
}
/* Questions are H2, with a hairline above each so answers separate without
needing cards. */
.md-typeset h2 {
font-size: 18px;
letter-spacing: -0.01em;
line-height: 1.35;
border-top: 1px solid var(--co2in-rule);
margin-top: 26px;
margin-bottom: 10px;
padding-top: 26px;
}
.md-typeset h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
/* Standfirst under the page title. */
.md-typeset p.lede {
font-size: 16px;
line-height: 1.7;
color: var(--co2in-slate);
max-width: 62ch;
margin: 0 0 32px;
}
/* Inline link: .c-eFjjir-jGTpve-variant-inline -- green and underlined, and
the hover REMOVES the underline rather than changing the colour. */
.md-typeset a {
color: var(--co2in-green);
text-decoration: underline;
font-weight: inherit;
}
.md-typeset a:hover,
.md-typeset a:focus {
color: var(--co2in-green);
text-decoration: none;
}
/* Headerlink anchors must not inherit the underline. */
.md-typeset .headerlink { text-decoration: none; }
/* Tables carried no rules at all, so they rendered as raw Material: .64rem
against a 20px root is 12.8px, beside 15px body copy, with a 0.1rem radius
and grey borders from no palette in particular. 21 pages have tables and
the four-column German ones were the worst of it.
:not([class]) leaves Material's own tables -- search, footer -- alone. */
.md-typeset table:not([class]) {
font-size: 14px;
border: 1px solid var(--co2in-rule);
border-radius: 12px;
box-shadow: none;
}
.md-typeset table:not([class]) th {
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: var(--co2in-forest);
background: var(--co2in-mint-pale);
border-bottom: 1px solid var(--co2in-rule);
}
.md-typeset table:not([class]) td {
padding: 12px 16px;
border-top: 1px solid var(--co2in-rule);
}
.md-typeset table:not([class]) tbody tr:first-child td { border-top: none; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--co2in-cream); }
/* --- Sidebar navigation ------------------------------------------------- */
.md-nav { font-size: 13px; }
.md-nav__title { color: var(--co2in-ink); font-weight: 500; font-size: 14px; }
.md-nav--secondary .md-nav__list .md-nav__link { font-size: 13px; }
.md-nav__link { color: var(--co2in-ink); }
.md-nav__link:focus,
.md-nav__link:hover { color: var(--co2in-green); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active { color: var(--co2in-green); font-weight: 500; }
.md-nav--secondary .md-nav__title {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--co2in-slate);
font-weight: 500;
}
/* Section groups carry an icon set per item in the nav via Markdown, so keep
the group label itself quiet and black. */
.md-nav__item--section > .md-nav__link { color: var(--co2in-ink); font-weight: 500; }
/* --- Search ------------------------------------------------------------- */
.md-search__form {
border-radius: 100px;
background: var(--co2in-cream);
border: 1px solid var(--co2in-rule);
}
.md-search__form:hover { background: var(--co2in-cream); border-color: var(--co2in-mint); }
.md-search__input { color: var(--co2in-ink); }
.md-search__input::placeholder { color: var(--co2in-slate); }
.md-search__icon { color: var(--co2in-green); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-color: var(--co2in-green); }
/* --- Callouts ----------------------------------------------------------- */
/* `:not(.md-search-result__more)` matters. Material's "N more on this page"
in the search results is a , so these content-callout rules were
landing on it -- 18px/22px padding, a 20px margin and summary padding took
a 34px row up to 77px, which is the empty space around it in the hero
results panel. */
.md-typeset .admonition,
.md-typeset details:not(.md-search-result__more) {
border: none;
border-radius: 16px;
box-shadow: none;
font-size: 14px;
line-height: 1.7;
padding: 18px 22px;
margin: 20px 0;
max-width: 64ch;
}
.md-typeset .admonition > .admonition-title,
.md-typeset details:not(.md-search-result__more) > summary {
font-weight: 500;
font-size: 14px;
padding: 14px 0 4px 28px;
background: transparent;
border: none;
margin: 0;
}
.md-typeset .admonition > .admonition-title::before,
.md-typeset details:not(.md-search-result__more) > summary::before { left: 0; top: 15px; width: 18px; height: 18px; }
.md-typeset .admonition > .admonition-title::after,
.md-typeset details:not(.md-search-result__more) > summary::after { display: none; }
.md-typeset .admonition > p { margin: 0; max-width: none; }
/* Every callout in the content is authored `!!! info ""` -- all 21 of them,
deliberately titleless so the box carries the answer rather than a heading.
Python-Markdown emits no .admonition-title for an empty title, so the icon
rules above have never rendered once: every callout on the site is a plain
tinted rectangle. design/reference.html:117 shows the approved callout with
the icon present.
Hang it off the box instead, using Material's own mask mechanism so the
icon set stays the theme's. Where :has() is unsupported the rule is dropped
whole and the result is today's appearance, which is a safe floor. */
.md-typeset .admonition:not(:has(> .admonition-title)) { padding-left: 52px; }
.md-typeset .admonition:not(:has(> .admonition-title))::before {
content: "";
position: absolute;
left: 22px;
top: 20px;
width: 19px;
height: 19px;
background-color: var(--co2in-green);
-webkit-mask-image: var(--md-admonition-icon--info);
mask-image: var(--md-admonition-icon--info);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
/* The box is not positioned by default, so the absolute icon would escape it. */
.md-typeset .admonition { position: relative; }
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.tip {
background: var(--co2in-mint-pale);
color: var(--co2in-ink);
}
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .tip > .admonition-title {
background: transparent;
color: var(--co2in-ink);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .tip > .admonition-title::before { background-color: var(--co2in-green); }
.md-typeset .admonition.warning {
background: var(--co2in-warn-bg);
color: var(--co2in-ink);
}
.md-typeset .warning > .admonition-title { background: transparent; color: var(--co2in-ink); }
.md-typeset .warning > .admonition-title::before { background-color: var(--co2in-warn-ink); }
/* --- Landing page card grid --------------------------------------------- */
.md-typeset .grid.cards > ul > li {
border: 1px solid var(--co2in-rule);
border-radius: 20px;
padding: 24px;
background: var(--co2in-card);
box-shadow: none;
transition: border-color 0.15s;
}
.md-typeset .grid.cards > ul > li:hover { border-color: var(--co2in-green); }
/* Card titles link to the section overview. Keep them black like every other
heading -- the card is the affordance, not the link colour. */
.md-typeset .grid.cards > ul > li > p:first-child a,
.md-typeset .grid.cards > ul > li h3 a {
color: var(--co2in-ink);
text-decoration: none;
font-weight: 500;
}
.md-typeset .grid.cards > ul > li:hover > p:first-child a { color: var(--co2in-green); }
.md-typeset .grid.cards > ul > li > hr { display: none; }
/* The whole card is the link, as design/reference.html:71 has it -- there
.card IS the anchor. Here it cannot be: the card already contains its own
deep links, and wrapping it in an anchor would nest anchors, which is
invalid and which browsers silently reparent.
So the title's existing anchor is stretched across the card instead, and
the deep links are lifted above it. The border already reacted on hover,
promising the whole card was clickable; only the title actually was. */
.md-typeset .grid.cards > ul > li { position: relative; }
.md-typeset .grid.cards > ul > li > p:first-child a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.md-typeset .grid.cards > ul > li > p:last-child a {
position: relative;
z-index: 1;
}
/* The stretched anchor covers the card, so its own focus ring would be a box
round the whole thing. Put the ring on the card instead.
Both halves live inside @supports. Suppressing the anchor's own outline
unconditionally would leave keyboard users with NO focus indicator at all
wherever :has() is unsupported -- worse than the ring being the wrong
shape. Without :has() the anchor keeps its own ring and the card is simply
outlined by the anchor rather than by the li. */
@supports selector(li:has(> p a:focus-visible)) {
.md-typeset .grid.cards > ul > li > p:first-child a:focus-visible { outline: none; }
.md-typeset .grid.cards > ul > li:has(> p:first-child a:focus-visible) {
outline: 2px solid var(--co2in-green);
outline-offset: 2px;
}
}
/* The approved card leads with a 44px pale-mint badge (reference.html:74);
this only recoloured the raw Material icon. */
/* Badge and title share one row, centred on each other.
The icon and the title live in one
. Left inline, the 44px badge sits
inside the text line, inflates it to 60px and drops the title onto the
baseline underneath -- an icon stranded above its own heading with a band
of dead space around it. Making the badge block-level fixed the stranding
but kept them on separate lines.
Making the PARAGRAPH the flex row is what actually puts them side by side
and vertically centred, with the badge refusing to shrink. */
.md-typeset .grid.cards > ul > li > p:first-child {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
}
.md-typeset .grid.cards > ul > li > p:first-child .twemoji {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
margin: 0;
border-radius: 50%;
background: var(--co2in-mint-pale);
}
.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg {
width: 22px;
height: 22px;
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards svg { color: var(--co2in-green); }
/* Hero block on the landing page. */
.co2in-hero {
background: var(--co2in-mint-pale);
border-radius: 28px;
padding: 56px 32px 48px;
text-align: center;
margin: 32px 0;
}
.md-typeset .co2in-hero h1 {
font-size: clamp(28px, 3.2vw, 38px);
margin: 0 0 10px;
border-top: none;
padding-top: 0;
}
.md-typeset .co2in-hero p {
color: var(--co2in-ink);
font-size: 16px;
line-height: 1.6;
margin: 0 auto 28px;
max-width: 46ch;
}
/* Markdown wraps these links in a
, so the flex container's only child was
that paragraph -- and `.md-typeset p { max-width: 64ch }`, the reading
measure for body copy, capped it at ~480px. The chips total 498px, so they
wrapped for want of 18px. The paragraph itself has to be the flex row. */
.co2in-hero__links { display: contents; }
.md-typeset .co2in-hero__links > p {
display: flex;
flex-wrap: wrap;
gap: 9px;
justify-content: center;
max-width: none;
/* 22px is design/reference.html:61's `.chips{margin-top:22px}`. This was a
flat margin: 0, so the shortcuts sat hard against the search field with a
measured gap of exactly zero -- the two read as one control. */
margin: 22px 0 0;
}
/* Chips carry no arrow -- the arrow is what was making three of them too wide
to sit on one row. */
.md-typeset a.co2in-chip {
display: inline-flex;
align-items: center;
padding: 7.5px 18px;
border: 1px solid var(--co2in-green);
border-radius: 100px;
background: var(--co2in-green);
color: var(--co2in-cream);
font-size: 13px;
line-height: 21px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: color 0.15s, background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.md-typeset a.co2in-chip:hover {
background: transparent;
color: var(--co2in-green);
text-decoration: none;
}
.md-typeset a.co2in-chip::after { content: none; }
.md-typeset .co2in-hero__links a { text-decoration: none; }
/* Dark contact band, the site's `type-dark` pattern: forest ground with
cream and mint on top. */
.co2in-band {
background: var(--co2in-forest);
border-radius: 28px;
padding: 40px;
margin: 40px 0 0;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.md-typeset .co2in-band h2 {
color: var(--co2in-cream);
font-size: 22px;
border-top: none;
padding-top: 0;
margin: 0 0 6px;
}
.md-typeset .co2in-band p { color: var(--co2in-mint); font-size: 15px; line-height: 1.6; margin: 0; max-width: none; }
.co2in-band__body { flex: 1 1 260px; }
.md-typeset .co2in-band a.co2in-btn { margin-left: auto; }
.md-typeset .co2in-band a:not(.co2in-btn) { color: var(--co2in-mint); }
/* --- Footer ------------------------------------------------------------- */
/* One forest band with three link columns and a right-aligned strapline,
per the design. Material's prev/next nav and copyright line are replaced
wholesale in overrides/partials/footer.html. */
.co2in-footer { background: var(--co2in-forest); }
.co2in-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px;
padding: 36px 32px;
max-width: 1220px;
margin: 0 auto;
}
.co2in-footer__col { display: flex; flex-direction: column; gap: 9px; }
.co2in-footer__head {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--co2in-green);
}
.co2in-footer a {
color: var(--co2in-mint);
font-size: 13px;
text-decoration: none;
}
.co2in-footer a:hover { color: var(--co2in-cream); }
/* "(EN)" on a legal link whose document is not in the reader's language.
Quiet by design -- it is a caveat, not a label. */
.co2in-footer__untranslated {
margin-left: 6px;
font-size: 12px;
opacity: 0.75;
}
/* Strapline and mark travel together, so the gap between them is theirs --
not the 40px that separates the link columns. */
.co2in-footer__sign {
display: flex;
align-items: flex-start;
gap: 16px;
margin-left: auto;
}
.co2in-footer__mark {
width: 56px;
height: 56px;
flex: none;
/* The circle is inscribed in the PNG and touches all four edges, so there
is no image padding to cancel -- the offset is purely typographic. At
13px/1.6 the half-leading is 3.9px and the cap top sits a further 3px
below that, so the capital letters begin 6.9px under the line box top.
the cap top a further 3px below that. Tuned by eye from a magnified
comparison: 4.5px reads as level, where the computed 9px sat visibly
low. */
margin-top: 4.5px;
}
.co2in-footer__note {
margin: 0;
color: var(--co2in-mint);
font-size: 13px;
line-height: 1.6;
max-width: 34ch;
text-align: right;
}
/* 44.984375em is Material's own phone edge, 719.75px. The bespoke 700px this
replaced sat inside that band without matching it, so custom rules and
theme rules changed at different widths -- 20px of layout where the two
disagreed. */
@media (max-width: 44.984375em) {
/* Column flow, not a wrapping flex row and not a grid.
As a flex row the groups wrap onto a second line that starts below the
TALLEST of the first, so CO2IN having one more link than Legal opened a
72px hole above Language -- the largest piece of dead space on the phone.
A two-column grid only shrinks that to 56px, because a grid row is still
as tall as its tallest cell and the three groups are unequal by design.
Multi-column flow has no rows at all. With break-inside: avoid keeping
each group whole, the browser balances them into two columns by moving
entire groups, and no hole can form. */
.co2in-footer__inner {
display: block;
column-count: 2;
column-gap: 18px;
padding: 24px 18px;
}
.co2in-footer__col {
break-inside: avoid;
margin: 0 0 18px;
}
.co2in-footer__sign { column-span: all; margin-left: 0; padding-top: 4px; }
.co2in-footer__note { margin-left: 0; text-align: left; }
/* 13px in a 9px flex gap reads as one block of text; the size comes from
the compact band above. */
.co2in-footer a { font-size: 14px; }
.co2in-footer__inner { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
/* --- Focus -------------------------------------------------------------- */
/* design/reference.html:144 carries `a:focus-visible, .card:focus-visible`.
None of it survived into this stylesheet: there was no :focus-visible rule
anywhere, so keyboard users navigating the header, the language menu, the
chips, the footer or previous/next got whatever the browser happened to
draw over a custom background -- on the forest footer, effectively nothing.
One treatment everywhere rather than per-component variants, so the
affordance is recognisable wherever it appears. :focus-visible rather than
:focus keeps it off mouse clicks. */
.co2in-header__link:focus-visible,
.co2in-lang__button:focus-visible,
.co2in-lang .md-select__link:focus-visible,
.co2in-btn:focus-visible,
.md-typeset a.co2in-chip:focus-visible,
.co2in-footer a:focus-visible,
.co2in-pagenav__link:focus-visible,
.md-header label:focus-visible,
.md-nav__link:focus-visible,
.md-search__input:focus-visible {
outline: 2px solid var(--co2in-green);
outline-offset: 2px;
border-radius: 4px;
}
/* The footer sits on forest, where a green ring has too little contrast. */
.co2in-footer a:focus-visible { outline-color: var(--co2in-mint); }
/* --- Motion ------------------------------------------------------------- */
/* Touch has no hover, so without this a tap gives no feedback at all until
the next page paints. */
.co2in-btn:active,
.md-typeset a.co2in-chip:active,
.co2in-pagenav__link:active { transform: scale(0.985); }
@media (prefers-reduced-motion: reduce) {
.co2in-header__link::after,
.co2in-btn { transition: none; }
/* Added with the pressed states above -- the block reached two controls. */
.md-typeset a.co2in-chip,
.co2in-pagenav__link { transition: none; }
.co2in-btn:active,
.md-typeset a.co2in-chip:active,
.co2in-pagenav__link:active { transform: none; }
}
/* --- Late corrections --------------------------------------------------- */
/* External-link glyph on the co2in.com link. */
.co2in-header__link {
display: inline-flex;
align-items: center;
gap: 5px;
}
.co2in-header__ext {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Right-hand rail: design is "On this page", 11px uppercase label over a
hairline rule, with a 2px green bar marking the active item. */
.md-sidebar--secondary .md-nav__list { border-left: 1px solid var(--co2in-rule); }
.md-sidebar--secondary .md-nav__item { margin-left: 0; }
.md-sidebar--secondary .md-nav__link {
padding-left: 14px;
line-height: 1.45;
color: var(--co2in-slate);
}
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--passed:hover {
color: var(--co2in-green);
box-shadow: inset 2px 0 0 var(--co2in-green);
}
/* Left rail: design is a 252px column with a divider.
DESKTOP ONLY. Below 76.25em this same element is the slide-in drawer, and
Material parks it closed at left: -12.1rem -- exactly -242px, its own
width. Widening it to 252px without moving that offset left 10px of cream
drawer permanently visible down the left edge of every article page on a
phone. Scoped to the width where it is actually a rail. */
@media (min-width: 76.25em) {
.md-sidebar--primary { width: 252px; }
}
.md-sidebar--primary .md-sidebar__scrollwrap { border-right: 1px solid var(--co2in-rule); }
.md-sidebar--primary .md-nav__list { padding-right: 12px; }
/* --- Search ------------------------------------------------------------- */
/* The design puts search in the hero, not the header, so Material's header
trigger is hidden -- but ONLY where the hero actually has it.
This rule was unscoped, and hid the trigger on every page at every width,
contradicting the comment four lines below it which states the header
search is untouched everywhere else. On a phone reading an answer there was
then no way to search at all without going back to the landing page: the
label rendered at 0x0.
Two conditions, both necessary. .co2in-header--home because only the
landing page has a hero, and min-width 60em because hero-search.js only
moves the component above that -- below it the component stays in the
header and its trigger is the only way in. The class is rendered
server-side by header.html, so no JavaScript and no flash. */
@media (min-width: 60em) {
.co2in-header--home label[for="__search"] { display: none; }
}
/* Landing page: Material's search component is MOVED into the hero by
hero-search.js, so the header genuinely has no search on this page --
nothing hidden, nothing to reveal. Everywhere else the header search is
untouched.
Material shows its results panel through selectors rooted at .md-header,
which no longer match once the component has moved, so the panel is shown
here instead. */
.co2in-search-slot { max-width: 560px; margin: 0 auto; }
/* Stand-in for the hero search below 60em, injected by hero-search.js.
The real component goes back to the header there, and without this the
landing page -- whose entire job is "search the FAQ" -- rendered a blank
gap where its search field belongs. Same pill, opens Material's sheet. */
.co2in-search-proxy {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 48px;
padding: 0 18px;
background: var(--co2in-card);
border: 1.5px solid var(--co2in-mint);
border-radius: 100px;
color: var(--co2in-slate);
font-size: 16px;
text-align: left;
cursor: pointer;
}
.co2in-search-proxy svg {
width: 20px;
height: 20px;
flex: none;
fill: none;
stroke: var(--co2in-green);
stroke-width: 1.8;
stroke-linecap: round;
}
.co2in-search-proxy:focus-visible {
outline: 2px solid var(--co2in-green);
outline-offset: 2px;
}
.co2in-has-hero-search .md-header .md-search { display: none; }
.co2in-hero .md-search {
position: relative;
display: block;
width: 100%;
margin: 0;
}
.co2in-hero .md-search__overlay { display: none; }
.co2in-hero .md-search__inner {
/* Material floats this on desktop, so it contributes no height and
.md-search collapses to 8px -- which put the results panel on top of the
field instead of under it. Back into normal flow. */
float: none;
position: static;
width: 100%;
height: auto;
margin: 0;
transform: none;
opacity: 1;
pointer-events: auto;
}
.co2in-hero .md-search__form {
display: flex;
align-items: center;
height: auto;
padding: 4px 8px 4px 20px;
background: var(--co2in-card);
border: 1.5px solid var(--co2in-mint);
border-radius: 100px;
box-shadow: none;
}
.co2in-hero .md-search__form:hover { background: var(--co2in-card); border-color: var(--co2in-green); }
.co2in-hero .md-search__input {
height: 46px;
padding: 0 8px;
/* 16px, not 15px. iOS Safari zooms the whole page when focus lands on an
input below 16px, and the reader then has to pinch back out to read the
results. A functional defect rather than a preference. */
font-size: 16px;
color: var(--co2in-ink);
text-align: left;
}
.co2in-hero .md-search__input::placeholder { color: var(--co2in-slate); }
/* Enter pressed before Material's index finished building. Without a visible
state the key is indistinguishable from a dead one. Set by hero-search.js. */
.co2in-hero .md-search[data-co2in-pending] .md-search__form {
border-color: var(--co2in-green);
}
.co2in-hero .md-search[data-co2in-pending] .md-search__icon { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
.co2in-hero .md-search[data-co2in-pending] .md-search__icon { opacity: 1; }
}
.co2in-hero .md-search__icon[for="__search"] {
position: static;
width: 22px;
height: 22px;
margin: 0;
color: var(--co2in-green);
opacity: 1;
}
.co2in-hero .md-search__options { right: 12px; }
/* Results, anchored under the field rather than under the header.
Material reveals the panel AND the result list through selectors rooted at
.md-header -- `[data-md-toggle=search]:checked ~ .md-header .md-search__output`
and friends. None of those match once the component has moved, so the panel
was rendering at opacity 0 with `display: none` on the list: present in the
DOM, invisible on screen. Both are set explicitly here.
The inner elements are also sized for the header dropdown (a fixed ~688px),
so they are pinned to the field width instead. */
.co2in-hero .md-search__output {
display: none;
opacity: 1;
position: absolute;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 6;
max-height: 60vh;
border: 1px solid var(--co2in-rule);
border-radius: 16px;
background: var(--co2in-card);
box-shadow: 0 8px 24px rgba(5, 73, 56, 0.10);
overflow: hidden;
text-align: left;
}
.co2in-hero .md-search:focus-within .md-search__output,
.co2in-hero .md-search__output[data-co2in-open] { display: block; }
.co2in-hero .md-search__scrollwrap {
width: 100%;
max-height: 60vh;
margin: 0;
overflow-y: auto;
}
.co2in-hero .md-search-result { width: 100%; }
.co2in-hero .md-search-result__list { display: block; }
.co2in-hero .md-search-result__meta {
padding: 12px 20px;
font-size: 13px;
color: var(--co2in-slate);
background: var(--co2in-mint-pale);
}
/* The panel sits inside .md-typeset AND inside .co2in-hero, so the article
and hero type rules cascade into it. Material renders a result title as
and each section hit as
, so titles were picking up the hero's
clamp(28px,3.2vw,38px) and sitting beside 12.8px section headings -- while
the question-heading rules added rules and padding on top.
These used to transcribe Material's own search-result scale, measured off
the header search so the two matched. That scale is authored in rem against
Material's 20px root, so .64rem landed on 12.8px and .5rem on 10px -- and
Material raises that root to 22px at 1600px and 24px at 2000px, so the
transcription was only ever correct on a mid-size desktop. They are on the
CO2IN ladder now: 13px section headings, 16px titles. */
.md-typeset .co2in-hero .md-search__output h1 {
font-size: 16px;
font-weight: 400;
line-height: 1.4;
letter-spacing: normal;
margin: 11px 0;
padding: 0;
border: none;
color: var(--co2in-ink);
}
.md-typeset .co2in-hero .md-search__output h2 {
font-size: 13px;
font-weight: 700;
line-height: 1.6;
letter-spacing: normal;
margin: 0 0 6px;
padding: 0;
border: none;
color: inherit;
}
.md-typeset .co2in-hero .md-search__output :is(h3, h4) {
font-size: 13px;
font-weight: 700;
line-height: 1.6;
margin: 0 0 6px;
padding: 0;
border: none;
}
.md-typeset .co2in-hero .md-search__output p {
font-size: 13px;
line-height: 1.6;
max-width: none;
margin: 0;
}
/* "N more on this page" is a , and the panel sits inside
.md-typeset -- so MATERIAL'S OWN content rules for details/summary apply to
it here in a way they never do in the header. Reset to a 34px row with no
padding and no margin. The summary was 10px, transcribed from Material's
.5rem; a 10px control is too small to read on a desktop, let alone a
phone. */
.md-typeset .co2in-hero .md-search__output details.md-search-result__more {
margin: 0;
padding: 0;
font-size: 13px;
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
}
.md-typeset .co2in-hero .md-search__output details.md-search-result__more > summary {
margin: 0;
padding: 0;
font-size: 13px;
background: transparent;
border: none;
border-radius: 0;
list-style: none;
}
.md-typeset .co2in-hero .md-search__output details.md-search-result__more > summary::before,
.md-typeset .co2in-hero .md-search__output details.md-search-result__more > summary::after {
display: none;
}
/* The label inside the summary is a
, so it inherits .md-typeset's line
height rather than the summary's -- which is where the extra row height
came from. Sized explicitly. */
.md-typeset .co2in-hero .md-search__output details.md-search-result__more > summary > div {
font-size: 13px;
line-height: 1.4;
padding: 10px 16px 10px 44px;
}
.co2in-hero .md-search-result__link { padding: 0; }
.co2in-hero .md-search-result__link:hover { background: var(--co2in-mint-pale); }
.md-typeset .co2in-hero .md-search__output p { max-width: none; margin: 0; }
/* The magnifier is a