/* ============================================================================ fuel.css — FuelFacts signature layer (AAA spec, per-site set piece) Loads AFTER data.css. Everything here is namespaced .fx-* so it can never collide with the shared component layer, which another session owns. Voice: ENCYCLOPEDIC ARCHIVE. A reference volume, not an app. Hairline engraving, running heads in small caps, a marginalia rule down the left of the set piece, en-dashes and specimen numbering. Nothing bounces. ========================================================================== */ /* --------------------------------------------------- 0. ACCENT REPAIR (local) data.css declares --accent: var(--site-accent, #3C4A55) on :root, but shell() writes --site-accent on . A custom property is substituted where it is DECLARED, so --accent resolves to the neutral fallback on every page of every ring site and the per-site hue never reaches the CSS. Repaired here rather than in the master because _shared is owned by another session mid-rollout — flag raised; the master fix is one line. Dark values are lightened deliberately: the published light-paper accents sit at 2.4–3.3:1 on the dark ground and would fail AA if reused unchanged. fuel light #2F6B3F = 6.06:1 on paper · dark #6FBF86 = 8.33:1 on dark paper (both values are the ring's own, from _shared/contrast-check.mjs). */ :root { --accent: #2F6B3F; --accent-2: #2F6B3F; --accent-3: #2F6B3F; --accent-soft: color-mix(in srgb, #2F6B3F 9%, var(--paper)); } :root[data-theme="dark"] { --accent: #6FBF86; --accent-2: #6FBF86; --accent-3: #6FBF86; --accent-soft: color-mix(in srgb, #6FBF86 13%, var(--paper)); } /* anything that paints #fff on a solid accent needs dark ink once the accent itself is light */ :root[data-theme="dark"] .az a:hover, :root[data-theme="dark"] .pager .on, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .dial-choices button[aria-pressed="true"] { color: #101311; } /* ------------------------------------------------- 1. micro-iconography fuel's drawing language: 1.4px hairline, round caps, NO fill, 24-box. (burn draws with a 2.2px notebook nib; fly with 1px atlas rules and solid survey marks; cook with solid butcher silhouettes. Four different hands.) */ .fx-i { width: 1em; height: 1em; flex: none; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .fx-i-lg { width: 1.15em; height: 1.15em; } /* ------------------------------------------------------ 2. THE SET PIECE "Energy anatomy" — one food's calories dissected into the three fuels that supply them, with the per-gram arithmetic shown and reconciled against the USDA figure printed at the top of the page. */ .fx-anat { margin: var(--s5) 0 0; padding-left: var(--s4); border-left: 1px solid var(--line-2); /* the marginalia rule */ max-width: 760px; } @media (max-width: 640px) { .fx-anat { padding-left: var(--s3); } } .fx-anat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: 14px; } .fx-anat-title { font-family: var(--sans); font-size: .7rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; } .fx-anat-plate { font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; } /* the drawn bar */ .fx-bar { display: block; width: 100%; height: auto; } .fx-bar .seg { stroke: var(--ink); stroke-width: 1; } .fx-bar .seg-p { fill: var(--accent); fill-opacity: .82; } .fx-bar .seg-c { fill: url(#fxHatchC); } .fx-bar .seg-f { fill: url(#fxHatchF); } /* the hatch patterns live in a separate svg, so they are scoped to the figure, not to .fx-bar */ .fx-anat .hatch-line { stroke: var(--ink-2); stroke-width: 1; fill: none; } .fx-bar .frame { fill: none; stroke: var(--ink); stroke-width: 1.1; } .fx-bar .segdiv { stroke: var(--ink); stroke-width: 1.1; } .fx-bar .inlab { font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .fx-bar .inlab-on { fill: #FFFFFF; } .fx-bar .inlab-off { fill: var(--ink); } .fx-bar .rule { stroke: var(--line-2); stroke-width: 1; } .fx-bar .rtick { stroke: var(--line-2); stroke-width: 1; } .fx-bar .rlab { font-family: var(--sans); font-size: 10px; fill: var(--faint); letter-spacing: .05em; font-variant-numeric: tabular-nums; } :root[data-theme="dark"] .fx-bar .inlab-on { fill: #0E1211; } /* the working — where the arithmetic is shown, not hidden */ .fx-work { margin-top: 18px; border-top: 1px solid var(--line); } .fx-work-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: var(--s3); align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); } /* Narrow: the name and its result stay on one line, the working drops beneath them as the sub-line — the arithmetic reads as an annotation, not a column. */ @media (max-width: 560px) { .fx-work-row { grid-template-columns: 1fr auto; row-gap: 3px; } .fx-work-name { grid-column: 1; grid-row: 1; } .fx-work-out { grid-column: 2; grid-row: 1; } .fx-work-sum { grid-column: 1 / -1; grid-row: 2; } } .fx-work-name { display: inline-flex; align-items: center; gap: 8px; font-size: .93rem; font-weight: 600; color: var(--ink); } .fx-work-sum { font-size: .87rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: -.005em; } .fx-work-sum b { color: var(--ink-2); font-weight: 600; } .fx-work-out { text-align: right; font-variant-numeric: tabular-nums; font-size: .95rem; font-weight: 650; color: var(--ink); white-space: nowrap; } .fx-work-out span { color: var(--muted); font-weight: 500; font-size: .84rem; } /* the reconciliation — the whole reason this set piece earns its space */ .fx-recon { margin-top: 14px; padding: 12px 0 0; font-size: .84rem; line-height: 1.6; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; } .fx-recon .fx-i { margin-top: .25em; color: var(--faint); } .fx-recon b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } /* provenance as ornament — a dated colophon, not a footnote */ .fx-prov { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .fx-prov b { color: var(--muted); font-weight: 600; letter-spacing: .1em; } .fx-prov .fx-sep { color: var(--line-2); } /* ------------------------------------------- 3. the running head (layout move) Category + specimen number set as a running head above the H1, the way a reference volume numbers its plates. */ .fx-runhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .fx-runhead a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); } .fx-runhead a:hover { color: var(--accent); border-color: var(--accent); } .fx-runhead .fx-rule { flex: 1 1 40px; height: 1px; background: var(--line-2); min-width: 24px; } .fx-runhead .fx-plate { color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: .1em; } /* ------------------------------------------------- 4. confident emptiness One full-width near-empty moment per food page. It is not decoration: it is the page admitting the limits of its own numbers. */ .fx-caveat { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .fx-caveat .wrap { padding-top: var(--s8); padding-bottom: var(--s8); } .fx-caveat p { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 400; line-height: 1.45; letter-spacing: -.02em; color: var(--ink-2); max-width: 26ch; margin: 0 auto; text-align: center; } .fx-caveat p em { color: var(--ink); font-style: italic; } @media (max-width: 640px) { .fx-caveat .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } } @media (prefers-reduced-motion: reduce) { .fx-anat *, .fx-bar * { transition: none !important; animation: none !important; } }