:root { /* Vorher nur innerhalb .btcodex-species/.btcodex-index definiert, wodurch andere Seitentypen (Gattung, Kulturgruppe, Systemartikel) die Variablen nur zufällig als Nachfahren geerbt haben. Auf :root gehoben, damit jede Seite verlässlich dieselbe Farbwelt bekommt. */ /* Precision-System-Realignment (0.1.14): Der Codex entstand in der fruheren "Herbarium Ledger"-Phase (warmes Creme/Nah-Schwarz, Georgia- Serife fuer Namen). Diese Palette und Font-Stacks werden hier auf die inzwischen eingefrorenen Precision-System-Tokens (project-blacktrap- design-system, Entscheidung §18) angehoben - identisch zu growbook-base.css und den Elementor-Kit-Variablen. Einzige bewusste Abweichung: --bt-soft/--bt-muted bleiben zwei Stufen (siehe unten), und --bt-water bleibt ein eigener, domänenspezifischer Akzent ohne Site-weites Gegenstueck. */ /* Raw-rgba-Nacharbeit (0.1.15): Die 0.1.14-Migration liess ~54 dekorative rgba(...)-Werte unangetastet, weil sie die ALTE Palette direkt als RGB- Tripel dekomponieren statt eine CSS-Variable zu referenzieren. In diesem Pass wurden rgba(8,10,9|18,28,23|9,14,12, X) auf die neuen --bt-bg/ --bt-panel-soft-Dekompositionen (22,22,24 / 27,27,33) und rgba(184,255,210| 156,203,173, X) auf die neue --bt-green-Dekomposition (107,176,121) bzw. eine proportional dazu aufgehellte Mint-Toenung (126,221,147) umgestellt; Alpha-Werte blieben unveraendert. */ /* Restposten-Nacharbeit (0.1.16): Die letzten drei uebersehenen rgba- Tripel aus der alten Palette (17,26,22 / 11,16,14 / 17,21,19) wurden anhand ihres jeweiligen Gradient-Partners auf die passende neue Precision-Dekomposition umgestellt (--bt-bg 22,22,24 bzw. --bt-panel 33,33,41), Alpha unveraendert. Ausserdem wurde --bt-cream entfernt: alle 6 Verwendungsstellen dienten nachweislich nur als Ersatz fuer bereits vorhandene Tokens an Stellen, wo das analoge Element auf Species-/Index-Seiten laengst --bt-ink, --bt-soft oder #ffffff nutzt (kein eigenstaendiger "besonders/aktiv"-Marker) - daher auf diese Tokens zusammengefuehrt statt als eigener warmer Akzent beibehalten. */ /* Zweiter Restposten-Nacharbeit (0.1.17): Ein Adversarial-Review fand einen zweiten, unmigriert gebliebenen Cluster roher Alt-Paletten- rgba()-Werte, konzentriert in der Genus-/Kulturgruppen-Seitenfamilie (Species-TOC/-Sections, Footer-Nav-Hover, Genus-Textpanels/-Kultur- karten, Kulturgruppen-Stats/-Werte, Reference-Profile-Card-Cluster). 24 rgba()-Tripel wurden konvertiert, Alpha jeweils unveraendert: dunkle gruenschwarze Tripel (16,24,20 / 12,24,18 / 10,24,18 / 9,17,13 / 4,7,6 / Gradient-Paar 26,38,32+10,14,12) -> --bt-bg-Dekomposition (22,22,24) bzw. beim Footer-Nav-Hover auf das bereits im Nicht-Hover- Geschwisterselektor etablierte Paar (27,27,33 / 22,22,24), damit der Hover nicht in die alte Palette zurueckblitzt; blasse Mint-Tripel (172,214,190 / 177,214,196) -> --bt-green-Dekomposition (107,176,121), ein naeher am hellen Mint-Ton liegendes Tripel (183,227,204) -> die helle Mint-Hervorhebung (126,221,147), jeweils per Distanzvergleich zu den beiden in 0.1.15 dokumentierten Alt-Paletten-Referenzpunkten (156,203,173 bzw. 184,255,210) zugeordnet. */ /* Hex-Bereinigung, Abschluss (0.1.18): Der in 0.1.17 zurueckgestellte Cluster solider Alt-Paletten-Hex-Werte wurde jetzt konvertiert - damit ist die Precision-System-Migration dieser Datei vollstaendig. #07100b/#06100b (dunkle Nah-Schwarz-Textfarbe AUF hellem/gruenem Akzent-Hintergrund, sitweites Pendant zur Elementor-Globalvariable "bt-on-live" #0E1410) -> neuer Token --bt-on-live, an allen 4 tatsaechlichen Text-auf-Akzent-Stellen (Index-Search-Button, Product-Card-Button, Reference-Profile-Card-Button inkl. dessen !important-Override). Eine 5. Fundstelle von #06100b (.btcodex-reference-profile-card Hintergrund) war KEINE Text-auf-Gruen- Rolle, sondern eine solide dunkle Panel-Flaeche mit gruenlich getoentem Rand - strukturell identisch zu .btcodex-genus-page .btcodex-index-card (bereits auf --bt-panel migriert) - daher stattdessen auf --bt-panel gemappt. #b7e3cc (183,227,204) deckt sich exakt mit dem in 0.1.15 dokumentierten hellen Mint-Referenzpunkt und tritt an 8 Stellen im Reference-Profile-Card-/Core-Score-Panel-/Core-Match-Badge-Cluster als solide Fuellung auf (Kicker-Label, Value-dd, Button-Hintergrund, Badge-/Panel-Akzente, Border-Top, Hover-Border) - wegen dieses wiederholten, einheitlichen Bedarfs als eigener Token --bt-green-bright (#7edd93, solides Pendant zum bereits etablierten rgba(126,221,147,*)) festgeschrieben statt einzeln als Literal wiederholt. #dbe8df (Reference-Profile-Card-Summary, Fliesstext mit line-height 1.65) -> var(--bt-soft), analog zu allen anderen Fliesstext-Absaetzen der Datei. #8da898 (zwei 10px-Uppercase-Labels in Core-Match-Badge/Core-Score- Panel) -> var(--bt-muted), analog zu allen anderen dt-/Label-Selektoren der Datei. #0d1210 (.btcodex-related-card Basis-Hintergrund, von Media-/ Body-Layern vollstaendig ueberdeckt, aber strukturell eine Karte) -> var(--bt-panel), wie die bereits migrierte, analoge .btcodex-index-card. #050605 (4x, Media-Platzhalter-Hintergrund von Hero/Index-Card/Related- Card/Product-Card) und #070907 (2x, Gradient-Endstop hinter denselben Platzhalter-Icons) -> var(--bt-bg), naechstliegender Precision-Wert zum alten Nah-Schwarz und farblich identisch zur Rolle "rezessierte Flaeche hinter Bildinhalt". #030605 (.btcodex-citation-box__copy, ein eingesenktes Steuerelement innerhalb eines Panels) -> var(--bt-bg), gleiche "eingesenkt"-Logik. #19201c (.btcodex-index-card:hover, Hover-Zustand des Basiswerts var(--bt-panel)) -> var(--bt-panel-soft), die naechstliegende Precision-Stufe UND die bereits in 0.1.16 fuer Hover-Zustaende etablierte Zwischenstufe. Zusaetzlich fand die Abschluss-Suche zwei nie zuvor erfasste rohe rgba()-Rueckstaende der ALTEN Palette, ausserhalb des Genus-/Kultur- gruppen-Clusters: rgba(238,232,220,0.34) (.btcodex-index-card__status Border, alte Creme/Ink-Dekomposition) -> rgba(242,242,240,0.34) (neue --bt-ink-Dekomposition), plus die zugehoerige Textfarbe #eef5ec -> var(--bt-ink); und rgba(201,168,95,0.14) (.btcodex-list--risks::before Hintergrund, alte Amber-Dekomposition) -> rgba(224,179,90,0.14) (neue --bt-amber-Dekomposition). Damit ist der komplette Farb-Migrationspfad (0.1.14-0.1.18) fuer diese Datei abgeschlossen. Finales Token-Set: --bt-bg #161618, --bt-ink #f2f2f0, --bt-soft #a8a8ae, --bt-muted #6c6c72, --bt-line #2e2e36, --bt-line-strong #35353f, --bt-panel #212129, --bt-panel-soft #1b1b21, --bt-green #6bb079, --bt-green-bright #7edd93, --bt-amber #e0b35a, --bt-water #8baebc, --bt-on-live #0e1410. Alle rgba()- und Hex- Vorkommen der alten "Herbarium Ledger"-Palette in dieser Datei sind auf diese Tokens (oder auf domaenenfremde, bewusst unveraenderte Werte wie #ffffff/reines Schwarz) zurueckgefuehrt; verbleibende Hex-Literale ausserhalb von :root sind entweder Precision-fremde, absichtliche Werte (z.B. #ffffff fuer Ueberschriften) oder liegen ausserhalb dieses Farb-Scopes (Layout/Spacing/Font-Family unveraendert). */ /* Mobile-Layout-Fix (0.1.19): Reiner Grid-Collapse-Bugfix, UNABHAENGIG von der oben dokumentierten Color/Font-Migration (0.1.14-0.1.18) - keine Hex-/rgba-/Font-Family-Werte in diesem Pass veraendert. Zwei vorbestehende Responsive-Buecke behoben, die auf echten Telefon- breiten (~375-412px) zu ueberlappendem Text fuehrten: (1) .btcodex-profile-panels (2-spaltiger Kurzprofil-/System-Vergleich) hatte in keinem @media-Block einen Treffer - der vorhandene Mobile- Fix bei max-width:720px zielte faelschlich auf .btcodex-profile-panel (Singular, die einzelne Karte) statt auf den Plural-Container. Beim Grep auf dasselbe Singular/Plural-Muster wurden zwei weitere, bisher komplett unkollabierte 2-Spalten-Grids gefunden und im selben 720px-Block ergaenzt: .btcodex-species__text-panels und .btcodex-species-toc__list. (2) .btcodex-related-species__grid (3-spaltiges "Mehr aus diesem Profil"-Raster) blieb bis zur kleinsten Breite bei repeat(3,...), wodurch die 24px kursiven Mono-Binomialnamen in .btcodex-related- card__title (sowie die analogen .btcodex-index-card__title/ .btcodex-reference-profile-card__title) auf ~110px Spaltenbreite umbrachen und mit dem 150px-Media-Bild/Nachbarkarten kollidierten (nur 1px Grid-Gap). Neue Stufen ergaenzt: repeat(2,...) bei max-width:760px, 1fr bei max-width:480px (Muster wie bereits bei .btcodex-recommendation-grid). Zusaetzlich overflow-wrap:anywhere auf allen drei Binomial-Titel-Klassen sowie grid-template-rows von "150px 1fr" auf "150px minmax(0, auto)" bei .btcodex-related- card__link, damit umbrechender Text die Karte kontrolliert waechst statt ihren festen Rahmen zu durchbrechen. */ /* Growbook-Kontext (0.1.20): fehlende Button-/Ueberschriftfarbe ergaenzt, keine funktionale Aenderung. */ /* Exhaustive mobile-grid audit (0.1.23): supersedes the three prior one-off fixes (0.1.19's .btcodex-profile-panels singular/plural typo, plus the two separately-discovered uncollapsed 3-column grids .btcodex-related-species__grid and .btcodex-footer-nav__grid, the latter fixed only in this pass). Every grid-template-columns declaration in this file (base rules and inside all 7 @media blocks) and every no-wrap display:flex row was swept in one pass instead of waiting for the next screenshot. Fixes in this pass: (1) .btcodex-footer-nav__grid (repeat(3,...), zero prior mobile override anywhere) -> repeat(2,...) at max-width:760px, 1fr at max-width:480px, matching the .btcodex-related-species__grid pattern. (2) .btcodex-index-search (grid-template-columns: minmax(260px,1fr) minmax(210px,270px) 132px - hard px minimums summing to 602px, guaranteed to overflow any phone viewport, zero prior override) -> minmax(0, 1fr) (stacked single column) at max-width:760px, plus a matching border/padding adjustment on .btcodex-index-search__field and .btcodex-index-search__button for the stacked layout. (3) .btcodex-species-sidebar - a display:grid with no base grid-template-columns, expanded to an explicit repeat(2,...) by the max-width:1120px rule with no narrower override to collapse it back - now gets grid-template-columns:1fr at max-width:760px so it cannot get stuck 2-wide on a phone (a full-repo grep found no template currently rendering this class, but the CSS-side trap is closed regardless). (4) .btcodex-core-match-badge (flex row, no wrap, fixed ~25-char uppercase label + variable-length value) gets flex-wrap:wrap as a defensive safety net. Every other multi-column grid and no-wrap flex row was re-verified against its real markup in includes/class-btcodex-shortcodes.php and either already collapses correctly or is a small-fixed-column + 1fr icon/label pattern (92px/120px/150px 1fr) that does not overflow at phone widths, so it was left untouched. One dead selector, .btcodex-metric-grid--bt, is referenced in two @media rules but does not exist anywhere in the codebase; left as-is because it is harmless - the real .btcodex-metric-grid is always listed in the same rule and already receives the override. No further .btcodex-profile-panels/ .btcodex-profile-panel-style singular/plural or misnamed-selector mismatches were found in any @media block. No color, font, or non-layout property was touched. */ /* Word-wrap precision pass (0.1.24): overflow-wrap: anywhere -> break-word on profile-panel values, fixes ugly mid-word line breaks on short phrases; unrelated to color/font/grid work. Also downgraded on .btcodex-data-row__value, .btcodex-metric__label/__value, and .btcodex-citation-box__link (same short-phrase/URL reasoning; a genuinely too-long single token still gets broken by break-word's last-resort fallback). Left as overflow-wrap: anywhere on the three binomial-name title classes (.btcodex-related-card__title, .btcodex-index-card__title, .btcodex-reference-profile-card__title) per the 0.1.19 note above, since those can render a genuinely unbreakable long single token (species epithet or quoted cultivar name) inside a narrow card column. */ --bt-bg: #161618; /* Precision "plane" (vorher #080a09) */ --bt-ink: #f2f2f0; /* Precision "text-1" (vorher warmes Creme #eee8dc) */ --bt-soft: #a8a8ae; /* Precision "text-2", fuer laufenden Sekundaertext (vorher #c9c0ad) */ --bt-muted: #6c6c72; /* eigene, dunklere dritte Stufe fuer Eyebrow-/Label-Text (uppercase, 10-11px) - spiegelt growbook-base.css' eigene Zwei-Stufen-Loesung (--btgb-text-secondary/--btgb-muted); nicht auf ein einziges text-2 zusammengefuehrt, weil beide Stufen im Codex durchgaengig unterschiedliche Rollen haben */ --bt-line: #2e2e36; /* Precision "hairline", flacher Hex statt rgba (vorher rgba(238,232,220,.16)) */ --bt-line-strong: #35353f; /* growbook "--btgb-border-strong"-Aequivalent (vorher rgba(...,.3)) */ --bt-panel: #212129; /* Precision "raised" (vorher #111513) */ --bt-panel-soft: #1b1b21; /* Zwischenstufe plane/raised (vorher #151b18); siehe Docblock unten */ --bt-green: #6bb079; /* Precision Chlorophyll = --btgb-green (vorher #9ccbad) */ --bt-green-bright: #7edd93; /* solides Pendant zu rgba(126,221,147,*); Reference-Profile- Card-/Core-Score-Panel-/Core-Match-Badge-Cluster (vorher #b7e3cc) */ --bt-amber: #e0b35a; /* Precision "bt-attention" (vorher #c9a85f) */ --bt-water: #8baebc; /* unveraendert: kein Site-weites Aequivalent, Kontrast gegen #161618 weiterhin > die vorherige Kombination gegen #080a09 */ --bt-on-live: #0e1410; /* identisch zur Elementor-Globalvariable "bt-on-live": dunkle Tinte fuer Text auf var(--bt-green)/--bt-green-bright-Flaechen (vorher #06100b/#07100b) */ /* Schriften - Precision System (DESIGN.md §18, FROZEN 2026-08-27), identisch zu growbook-base.css: Space Grotesk = Subject/Identity, IBM Plex Sans = Interface/Fliesstext, IBM Plex Mono (kursiv) = binomische/wissenschaftliche Namen und Daten-/Referenzwerte. Alle drei werden bereits sitewide ueber das Elementor-Kit geladen (elementor-gf-spacegrotesk-css, elementor-gf-ibmplexsans-css, elementor-gf-ibmplexmono-css); kein eigenes @font-face/Enqueue notwendig, da /codex-v2/... als normale WP-Shortcode-Seiten im Theme gerendert werden und somit den Kit-Head wie jede andere Seite erhalten. */ --bt-font-display: "Space Grotesk", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --bt-font-text: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --bt-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .btcodex-route { background: var(--bt-bg); color: var(--bt-ink); } .btcodex-route *, .btcodex-species *, .btcodex-index * { box-sizing: border-box; } .btcodex-species, .btcodex-index { width: min(1180px, calc(100vw - 40px)); margin: 0 auto; padding: 0 0 80px; color: var(--bt-ink); font-family: var(--bt-font-text); } .btcodex-kicker, .btcodex-species__kicker { margin: 0 0 14px; color: var(--bt-green); font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: 2.6px; text-transform: uppercase; } /* Systemartikel - Shell war bisher unstyled (0 Regeln), wird jetzt an das Grundlayout (Breite/Zentrierung wie .btcodex-species/.btcodex-index) und den Hero-Look der übrigen Seiten angeglichen. */ .btcodex-system-article { width: min(860px, calc(100vw - 40px)); margin: 0 auto; padding: 0 0 80px; color: var(--bt-ink); font-family: var(--bt-font-text); } .btcodex-system-article__hero { padding: 54px 0 34px; border-bottom: 1px solid var(--bt-line); } .btcodex-system-article__title { margin: 0; color: #ffffff; font-family: var(--bt-font-display); font-size: clamp(34px, 4.6vw, 54px); font-weight: 400; line-height: 1.05; } .btcodex-system-article__subtitle { max-width: 620px; margin: 14px 0 0; color: var(--bt-soft); font-size: 17px; line-height: 1.55; } .btcodex-system-article__summary { max-width: 680px; margin: 18px 0 0; color: var(--bt-muted); font-size: 14px; line-height: 1.6; } /* Species hero */ .btcodex-species-hero { display: grid; grid-template-columns: minmax(360px, 46%) minmax(0, 1fr); min-height: 520px; border: 1px solid var(--bt-line); background: rgba(22, 22, 24, 0.92); } .btcodex-species-hero__media { position: relative; min-height: 520px; background: var(--bt-bg); overflow: hidden; } .btcodex-species-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 22, 24, 0) 42%, rgba(22, 22, 24, 0.58) 100%), linear-gradient(0deg, rgba(22, 22, 24, 0.16), rgba(22, 22, 24, 0.16)); pointer-events: none; } .btcodex-species-hero__image { display: block; width: 100%; height: 100%; min-height: 520px; object-fit: cover; } /* External-image attribution (Namensnennung). Neutral, high-contrast overlay in the hero's bottom-right corner; only rendered when the entry has an image_author or image_license value (see class-btcodex-shortcodes.php). */ .btcodex-species-hero__credit { position: absolute; z-index: 1; right: 16px; bottom: 14px; margin: 0; max-width: calc(100% - 32px); padding: 7px 10px; border-radius: 2px; background: rgba(16, 16, 18, 0.88); color: #fff; font-family: var(--bt-font-text); font-size: 12px; line-height: 1.4; letter-spacing: 0.01em; text-align: right; overflow-wrap: break-word; } .btcodex-index-card__credit, .btcodex-related-card__credit { margin: 0; padding: 8px 14px; color: var(--bt-ink); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } .btcodex-species-hero__credit a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.7); } .btcodex-index-card__credit a, .btcodex-related-card__credit a { color: var(--bt-muted); text-decoration: underline; text-decoration-color: var(--bt-line-strong); } .btcodex-species-hero__credit a:hover { color: #fff; } .btcodex-index-card__credit a:hover, .btcodex-related-card__credit a:hover { color: var(--bt-ink); } .btcodex-species-hero__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 64px 58px; background: linear-gradient(180deg, rgba(22, 22, 24, 0.92), rgba(22, 22, 24, 0.96)); } .btcodex-species-hero__title, .btcodex-index-hero__title, .btcodex-section__title, .btcodex-species__section-title { margin: 0; color: var(--bt-ink); font-family: var(--bt-font-text); font-weight: 400; line-height: 1.04; letter-spacing: 0; } .btcodex-species-hero__title { max-width: 760px; margin: 0; color: #ffffff; font-family: var(--bt-font-mono); font-style: italic; font-size: clamp(42px, 4.6vw, 76px); font-weight: 400; line-height: 0.98; letter-spacing: 0; } .btcodex-species-hero__subtitle { max-width: 620px; margin: 18px 0 0; color: var(--bt-soft); font-size: 18px; line-height: 1.6; } .btcodex-status-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .btcodex-status-line__item { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; color: var(--bt-ink); border: 1px solid var(--bt-line-strong); background: rgba(107, 176, 121, 0.08); font-size: 12px; font-weight: 800; line-height: 1.2; text-transform: uppercase; } .btcodex-species-hero__meta { display: grid; grid-template-columns: 120px 1fr; gap: 11px 18px; max-width: 560px; margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--bt-line); } /* Shared data rows */ .btcodex-data-row { display: contents; } .btcodex-data-row__label { color: var(--bt-muted); font-size: 11px; font-weight: 800; line-height: 1.45; text-transform: uppercase; } .btcodex-data-row__value { margin: 0; color: var(--bt-soft); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; } /* Profile panels */ .btcodex-section--profile-panels { padding: 58px 0; } .btcodex-profile-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .btcodex-profile-panels--single { grid-template-columns: minmax(0, 1fr); } .btcodex-profile-panel { padding: 30px; border: 1px solid rgba(126, 221, 147, 0.14); background: linear-gradient(180deg, rgba(27, 27, 33, 0.94), rgba(27, 27, 33, 0.98)); } .btcodex-profile-panel__title { margin: 10px 0 24px; color: #ffffff; font-family: var(--bt-font-text); font-size: clamp(25px, 2vw, 34px); font-weight: 400; line-height: 1.08; letter-spacing: 0; } .btcodex-profile-panel__list { display: grid; gap: 1px; margin: 0; padding: 0; background: rgba(126, 221, 147, 0.12); border: 1px solid rgba(126, 221, 147, 0.12); } /* 0.1.27: increased .btcodex-profile-panel__item horizontal padding 16px->20px for more comfortable mobile right-edge spacing, purely cosmetic, no functional/overflow bug. */ .btcodex-profile-panel__item { display: grid; grid-template-columns: minmax(120px, 0.72fr) minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 15px 20px; background: rgba(22, 22, 24, 0.84); } .btcodex-profile-panel__item dt { margin: 0; color: var(--bt-muted); font-size: 10px; font-weight: 900; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; } .btcodex-profile-panel__item dd { display: grid; gap: 5px; margin: 0; color: #ffffff; overflow-wrap: break-word; } .btcodex-profile-panel__value { display: block; font-family: var(--bt-font-mono); font-size: clamp(16px, 1.05vw, 20px); font-weight: 400; line-height: 1.22; } .btcodex-profile-panel__hint { display: block; max-width: 32em; color: var(--bt-muted); font-family: var(--bt-font-text); font-size: 11px; font-weight: 400; line-height: 1.45; } .btcodex-profile-panel__item--bt-air .btcodex-profile-panel__value, .btcodex-profile-panel__item--bt-flow .btcodex-profile-panel__value { color: var(--bt-green); } .btcodex-profile-panel__item--bt-water .btcodex-profile-panel__value, .btcodex-profile-panel__item--bt-ph .btcodex-profile-panel__value { color: var(--bt-water); } .btcodex-profile-panel__item--bt-density .btcodex-profile-panel__value, .btcodex-profile-panel__item--bt-capillary .btcodex-profile-panel__value { color: var(--bt-amber); } /* Metrics */ .btcodex-console, .btcodex-reference-strip, .btcodex-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line); } .btcodex-metric-grid { background: rgba(126, 221, 147, 0.035); } .btcodex-reference-strip { margin-bottom: 64px; } .btcodex-metric { display: grid; align-content: start; gap: 10px; min-height: 104px; padding: 18px 20px; border: 1px solid rgba(126, 221, 147, 0.13); background: linear-gradient(180deg, rgba(27, 27, 33, 0.92), rgba(27, 27, 33, 0.96)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); min-width: 0; } .btcodex-metric__label { display: block; margin: 0; color: var(--bt-muted); font-size: 9px; font-weight: 900; letter-spacing: 0.07em; line-height: 1.2; text-transform: uppercase; overflow-wrap: break-word; } .btcodex-metric__value { display: block; margin: 0; color: #ffffff; font-family: var(--bt-font-mono); font-size: clamp(18px, 1.25vw, 23px); font-weight: 400; line-height: 1.16; overflow-wrap: break-word; } .btcodex-metric--bt-air .btcodex-metric__value, .btcodex-metric--bt-flow .btcodex-metric__value { color: var(--bt-green); } .btcodex-metric--bt-water .btcodex-metric__value, .btcodex-metric--bt-ph .btcodex-metric__value { color: var(--bt-water); } .btcodex-metric--bt-density .btcodex-metric__value, .btcodex-metric--bt-capillary .btcodex-metric__value { color: var(--bt-amber); } /* Species layout */ .btcodex-species-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 42px; align-items: start; } .btcodex-species-main { min-width: 0; } .btcodex-species-sidebar { position: sticky; top: 120px; display: grid; gap: 16px; } .btcodex-section, .btcodex-species__genus-profile { padding: 64px 0; border-bottom: 1px solid var(--bt-line); } /* Keep section links clear of the fixed site navigation. */ .btcodex-section[id] { scroll-margin-top: 8rem; } .btcodex-section__header { max-width: 760px; margin-bottom: 30px; } .btcodex-section--quick-profile .btcodex-section__header, .btcodex-section--bt-profile .btcodex-section__header { margin-bottom: 22px; } .btcodex-section__title, .btcodex-species__section-title { font-size: clamp(30px, 3vw, 46px); } .btcodex-species__lead { max-width: 760px; margin: 18px 0 0; color: var(--bt-soft); font-size: 18px; line-height: 1.75; } .btcodex-species__text-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 34px; background: var(--bt-line); border: 1px solid var(--bt-line); } .btcodex-species__text-panel { padding: 30px; background: var(--bt-panel); } .btcodex-species__panel-title { margin: 0 0 14px; color: var(--bt-ink); font-family: var(--bt-font-text); font-size: 26px; font-weight: 400; line-height: 1.12; } .btcodex-species__panel-content, .btcodex-section--description, .btcodex-section--practice, .btcodex-section--sources { color: var(--bt-soft); font-size: 16px; line-height: 1.8; } .btcodex-section--description, .btcodex-section--practice, .btcodex-section--sources { max-width: 900px; } .btcodex-section--description h2, .btcodex-section--description h3, .btcodex-section--practice h2, .btcodex-section--practice h3, .btcodex-section--sources h2, .btcodex-section--sources h3 { color: var(--bt-ink); font-family: var(--bt-font-text); font-weight: 400; letter-spacing: 0; } .btcodex-section--description a, .btcodex-section--practice a, .btcodex-section--sources a { color: var(--bt-green); } /* Sidebar */ .btcodex-sidebox { padding: 22px; border: 1px solid var(--bt-line); background: var(--bt-panel); } .btcodex-sidebox__kicker { margin: 0 0 10px; color: var(--bt-green); font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: 1.8px; text-transform: uppercase; } .btcodex-sidebox__title { margin: 0 0 14px; color: var(--bt-ink); font-family: var(--bt-font-text); font-size: 24px; font-weight: 400; line-height: 1.12; } .btcodex-sidebox__text { margin: 0; color: var(--bt-soft); font-size: 15px; line-height: 1.65; } .btcodex-sidebox__muted { margin: 0; color: var(--bt-muted); font-size: 14px; line-height: 1.6; } .btcodex-side-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .btcodex-side-list li { padding: 10px 0; color: var(--bt-soft); font-size: 14px; line-height: 1.55; border-bottom: 1px solid var(--bt-line); } .btcodex-side-list li:last-child { border-bottom: 0; } .btcodex-token-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .btcodex-token { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; color: var(--bt-ink); border: 1px solid var(--bt-line-strong); background: var(--bt-panel-soft); font-size: 13px; line-height: 1.3; } /* Index */ .btcodex-index-hero { padding: 76px 0 48px; border-bottom: 1px solid var(--bt-line); } .btcodex-index-hero__title { font-size: clamp(42px, 5vw, 72px); } .btcodex-index-hero__intro { max-width: 780px; margin: 20px 0 0; color: var(--bt-soft); font-size: 18px; line-height: 1.75; } .btcodex-index-search { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(210px, 270px) 132px; align-items: stretch; max-width: none; margin-top: 34px; border: 1px solid rgba(126, 221, 147, 0.18); background: linear-gradient(180deg, rgba(27, 27, 33, 0.9), rgba(22, 22, 24, 0.92)); } .btcodex-index-search__field { display: grid; gap: 7px; padding: 11px 14px 12px; border-right: 1px solid var(--bt-line); } .btcodex-index-search__label { color: var(--bt-muted); font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } /* 0.1.26: hardened search-form input/select against the same Blocksy [type=submit]-class specificity-tie collision fixed in 0.1.25. Blocksy's main.min.css has "input:is([type=url],[type=tel],[type=text],[type=search], ...)" which for our type="search" input resolves to specificity (0,1,1) - actually HIGHER than this single class (0,1,0), not merely a tie, so without !important the theme's default blue text/background would win outright regardless of stylesheet order. The