/* modules/plants/public/plants-theme.css * * THE PLANTS THEME IS A TOKEN OVERRIDE. NOTHING ELSE. * * Plants articles use the EXACT civic article template — same layout, hero, * grid, spacing, typography, drop cap, section rules, citations block. This * file changes COLOUR TOKENS and nothing structural, which is only possible * because the civic stylesheets contain zero hardcoded hex outside tokens.css * (verified 2026-08-12: `grep '#[0-9A-Fa-f]{6}' civic-page.css base.css * components.css` returns nothing). Every gold position resolves through * var(--color-sacred-gold), so reassigning that one variable moves the eyebrow, * the hero underline bar, the drop cap and the section-heading rules together. * * If you find yourself adding a layout, spacing, or font rule here, stop: that * is structural drift, and the template-identity QA gate * (scripts/plants-qa-gate.js) is designed to fail on it. * * Scoped to .dt-plants on so the civic corpus is untouched. */ .dt-plants { /* Cipher Teal takes every Sacred Gold position on article pages. */ --color-sacred-gold: #00B8A9; /* Body grounds replace the civic creams. paper = primary, fog = the alternating band (civic already uses fog for its alternating surfaces, so this is a swap, not a new mechanism). */ --color-paper: #EEF1EA; --color-fog: #E4E9E1; /* Rule hairlines follow the new ground rather than the cream. */ --color-rule: #D9DFD5; } /* Links ON PAPER only. Deliberately NOT done by reassigning --color-cipher: that token also drives the hero's radial gradient and focus rings, and the spec scopes this change to links on the paper ground. */ .dt-plants .civic-page a, .dt-plants .section__body a, .dt-plants .citations a, .dt-plants .related a, .dt-plants .name-table a { color: #0F6E56; } .dt-plants .civic-page a:hover, .dt-plants .section__body a:hover, .dt-plants .citations a:hover, .dt-plants .related a:hover, .dt-plants .name-table a:hover { color: #085041; } /* Hero band is unchanged ground (Cosmos Black) with the specified headline value. Set explicitly because .hero__title inherits --color-paper, which the override above moved to the new body ground. */ .dt-plants .hero__title { color: #F2EFE6; } /* .hero background stays var(--color-cosmos) #080D1A and the dek stays var(--color-sterling) #A8B5BD — both inherited untouched. */ /* Eyebrow: the genus/family label that replaces the civic state label. Same size, spacing, letterspacing and position as the civic eyebrow — it reuses .hero__breadcrumb's type ramp deliberately. */ .dt-plants .hero__eyebrow { font-family: var(--font-data); font-size: var(--text-xs); color: var(--color-sacred-gold); text-transform: uppercase; letter-spacing: var(--tracking-wider); margin-bottom: var(--space-1); } /* Inline citation markers [1] at the claim. */ .dt-plants .cite-ref { font-family: var(--font-data); font-size: 0.78em; vertical-align: super; line-height: 0; color: #0F6E56; text-decoration: none; padding: 0 1px; } .dt-plants .cite-ref:hover { color: #085041; text-decoration: underline; } /* Sources foot section — Cinzel header + teal rule is exactly the civic .citations treatment, inherited; only the numbering is added. */ .dt-plants .citations ol { list-style: none; padding-left: 0; counter-reset: cite; } .dt-plants .citations ol li { counter-increment: cite; position: relative; padding-left: var(--space-3); margin-bottom: var(--space-1); font-size: var(--text-sm); line-height: 1.55; } .dt-plants .citations ol li::before { content: '[' counter(cite) ']'; position: absolute; left: 0; font-family: var(--font-data); font-size: var(--text-xs); color: var(--color-sacred-gold); } .dt-plants .citation__accessed { color: var(--color-fg-muted); } /* The registry footer line. Renders ONLY when a human sign-off timestamp exists — never faked, never a placeholder. */ .dt-plants .registry-footer { font-family: var(--font-data); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-fg-muted); border-top: 1px solid var(--color-rule); padding-top: var(--space-2); margin-top: var(--space-3); } /* ── Share row ────────────────────────────────────────────────────────────── Theme tokens only. No brand colours from other companies: an X-blue or a Pinterest-red button on this page would be the loudest thing on it, and the loudest thing on a registry page should be the plant's name. Quiet, institutional, sized like the citation type around it. */ .dt-plants .share { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--color-rule); } .dt-plants .share__heading { font-family: var(--font-data, ui-monospace, monospace); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-3, #6B7C74); margin: 0 0 12px; font-weight: 500; } .dt-plants .share__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dt-plants .share__btn { font-family: var(--font-data, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: 8px 14px; border: 1px solid var(--color-rule); border-radius: 2px; background: transparent; color: var(--color-ink, #12201C); cursor: pointer; transition: border-color .15s ease, color .15s ease; line-height: 1.2; } .dt-plants .share__btn:hover { border-color: var(--color-sacred-gold); color: var(--color-sacred-gold); } .dt-plants .share__btn:focus-visible { outline: 2px solid var(--color-sacred-gold); outline-offset: 2px; } .dt-plants .share__btn--primary { border-color: var(--color-sacred-gold); color: var(--color-sacred-gold); } .dt-plants .share__btn--primary:hover { background: var(--color-sacred-gold); color: #04231F; } /* Reserved so the confirmation cannot shift the row when it appears. */ .dt-plants .share__status { font-family: var(--font-data, ui-monospace, monospace); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-sacred-gold); min-width: 7ch; display: inline-block; } .dt-plants .share__fallback { font-family: var(--font-data, ui-monospace, monospace); font-size: 12px; color: var(--color-ink-3, #6B7C74); word-break: break-all; margin: 10px 0 0; }