/* PlantPOP care pages — shared layer for plants/*.html. Repointed onto the colour system locked 20 Aug 2026. This file used to carry its own palette; it now declares no colour of its own and reads the tokens through ../../styles.css, so the care pages and the marketing pages finally move together. One edit in tokens/ updates every page. What changed beyond the repoint: - The page ground is --pp-page. It was cream, and cream is a type colour on green now, not a background. - Every tinted band on the page is the light tint the page declares in its — see COLOR-SYSTEM.md. A care page can carry several tinted bands because they are all the same, declared, light level. - Ochre, peach and the deep pink #B8456A are gone. The deep pink was doing the job --pp-ink-soft does now: secondary type that holds up in sun. - The likely zone is deep green, not olive. Zone colour is the one place the functional trio appears anywhere in this repo — and check-amber, at C* 41.0, sits at the palette's dot ceiling, which is why it is a 14px dot with its zone name and day range written out beside it. The three zone dots are one of the three licensed adjacencies in COLOR-SYSTEM A12; the card gap is what keeps them from sharing an edge. - Green and pink run the length of the page rather than collecting at its foot (COLOR-SYSTEM A7): the light chip in the hero, the care band in the top half, the truth panel in the middle and the closing CTA at the end. Every green ground carries its pink — an eyebrow, an emphasis or the button — and no two green grounds touch. - Prose meets the 18px care-page floor. These get read on a phone, outdoors, in bright sun; UI chrome (nav, eyebrows, pot buttons) is not prose and keeps its own sizes. This template was the odd one out in the repo, and the gap was structural rather than chromatic — same tokens, different everything else. What was brought into line: - The shell. 520px at every width, against 430/760 on the other care page. Two views that both open when you tap a stake now agree how wide that is. - Section padding. 32 top / 44 bottom is off the scale in both directions and lopsided besides; it is the system's 44 on a phone, 60 above it. - One spine. Above 760px every block inside a section lines up on the reading measure rather than stretching to whatever room the band has. - The closing button. It was the only button in the repo not built like a button — display face, sentence case, no tracking, no lift. - Cards. Four card types carried four different edge treatments; they all rest on --shadow-sm now, and the ones on the near-white page ground keep their hairline as well. - h2 at the display weight, so a section heading outranks the card titles beneath it. - The eyebrow above every h2, including the signals section, which was the one place on the page the system's rhythm device was missing. And what this pass brought over, so three pages reached by the same tap finally use the same devices rather than the same tokens: - The wave. Every green ground on this page butted straight against the light section above it, while the home page curves the top edge of every card and the other care page curves the top of every band. Five per page: one at the entry to each of the three green grounds and one at each exit, filled with the colour above. COLOR-SYSTEM A7 already described this as shipped on the care pages; on two of the three it was not. - The scroll reveal, off the same script and the same tokens, inside the same prefers-reduced-motion guard. These two pages had no entrance motion at all. - The skip link and the
landmark both other pages carry. - The myth section's heading. It was a paragraph dressed as one, a step below the h2 every other section opens with, under a duplicate of the eyebrow class beside it. - The active nav rule off pink. Pink on this ground is 1.8:1 — the page's one accent mark, spent where it could not be seen. - The footnote rule inside the green panel, replaced by the whitespace that was already separating it. Rank, before colour: hero the plant's name and its voice line · light chip second care the four answers · their labels second water the zone rows · the verdict and pot method second signals the symptoms · the explanations second the truth the one statement · the footnote second varieties the four names · descriptions second · thumbnails third myth the claim line · the paragraph second closer the heading and Shop now */ @import url("../../styles.css"); /* This file used to declare a third set of names on top of the system's own — --ink, --page, --card, --field, --border, --panel, --r and the rest — each one a second name for a token that already existed. A reader of a rule below could not tell whether --field was this file's invention or the system's, and the same colour arrived under three spellings across the three stylesheets. The rules name the system's roles directly. The last local value was --page-rgb, the page ground as channels, kept here because a gradient cannot interpolate a hex token to transparent. It is --pp-page-rgb in tokens/colors.css now, declared one line from --pp-page itself, so the copy that has to be kept in step lives beside the thing it copies rather than in a stylesheet three directories away. This file now declares nothing at all. */ * { box-sizing: border-box } body { margin: 0; background: var(--surface-background); color: var(--text-primary); font-family: var(--pp-font-body); -webkit-font-smoothing: antialiased; } h1, h2, .hd { font-family: var(--pp-font-display); font-weight: var(--pp-weight-display-soft); letter-spacing: var(--pp-ls-heading); color: var(--text-primary); margin: 0; } h1 { font-size: var(--size-h1); font-weight: var(--pp-weight-display); line-height: var(--pp-lh-display); } /* 900, the weight the other care page sets its section headings at. This file left h2 on 800 — the card-title weight — so a section heading here carried the same weight as the card titles underneath it. */ h2 { font-size: var(--size-h2); font-weight: var(--pp-weight-display); line-height: var(--pp-lh-heading); } /* Secondary type is --pp-ink-soft at 5.8:1 on the page. It was a deep pink, which read as an accent the system no longer has to spend here. */ .eyebrow { font-size: var(--size-eyebrow); letter-spacing: var(--pp-ls-eyebrow); text-transform: uppercase; font-weight: var(--pp-weight-body-bold); color: var(--text-secondary); } /* The shell. This was 520px at every width while the other care page ran 430 on a phone and 760 above it, so the two templates that open when you tap a stake disagreed about how wide a tap view is — and on a laptop this one was a 520px ribbon down the middle of the screen. Same shell as the other care page now. Prose inside it is still held to the reading measure, below. */ .wrap { max-width: 430px; margin: 0 auto } @media (min-width: 760px) { .wrap { max-width: 760px } } /* The skip link is components.css. This template is the only one with a sticky bar, so the only thing it has left to say is that the link clears it — the nav sits at 20. Everything else about the control was a third hand-written copy of it, one type step and one padding step off the other two. */ .pp-skip { z-index: 30 } .nav { position: sticky; top: 0; z-index: 20; background: rgba(var(--pp-page-rgb), .92); backdrop-filter: blur(8px); display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); } .nav a { position: relative; font-size: var(--size-body-s); font-weight: var(--pp-weight-body-bold); color: var(--text-secondary); text-decoration: none; white-space: nowrap; padding: var(--space-1) 0; border-bottom: 2px solid transparent; } /* The label's own box is 26px tall and this is the page's navigation on a phone. The padding that would make it 44 would carry the active rule ten pixels away from the word it underlines, so the target grows and the rule does not. It reaches into the bar's own 12px padding and no further, and the links are 16px apart, so no two targets overlap. */ .nav a::after { content: ""; position: absolute; inset: -10px 0; } /* The active tab darkens its label and gains a rule under it. The rule was pink, which is 1.8:1 on this ground — the page's one accent mark, spent on the one place it could not be seen, and pink on a near-white ground is what the hard rules forbid outright. It is ink now: the same tone the label steps up to, so the indicator and the label state the same thing twice rather than once visibly and once not. Pink on these pages stays on the three green grounds, where it is 6.2:1. */ .nav a.active { color: var(--text-primary); border-color: var(--state-selected-border) } /* Section padding is 44px on a phone and 60px above it — the system's figure, and the one the other care page uses. This file ran 32 top / 44 bottom, which is both off the scale and lopsided: every band on the page sat closer to the section above it than to its own content. */ section { position: relative; padding: var(--pp-panel-y) var(--pp-gutter) } .hero { background: var(--surface-background); padding-top: var(--space-3) } /* The plant's own voice. Not the light chip below it, which is a green chip with a cream label and would otherwise inherit ink-soft from this rule. This paragraph is what the page is for, and it was set at body size in the secondary tone — smaller and softer than the trait cards below it. It takes the lede step and full ink: 11.4:1 rather than 5.8:1, and the largest thing on the page after the plant's name. */ .hero p:not(.light) { font-size: var(--size-lede); color: var(--text-primary); line-height: var(--pp-lh-body); max-width: 34ch; margin-top: var(--space-4); } /* A tinted band. Every one of these on a page is the same tint — the light level the page declared — so a band can never contradict the hero. */ .field { background: var(--surface-subtle) } /* Small layout utilities, replacing the inline styles these pages carried. No colour or size is spelled out in markup any more. */ .hd-gap { margin-top: var(--space-3) } .stack { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5) } .zones { margin-top: var(--space-5) } .row__body { flex: 1; min-width: 0 } /* The premise under a section heading — a sentence, so it takes the body tone at 11.4:1 rather than the secondary tone the labels use. */ .lede { font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-primary); margin-top: var(--space-3); } /* One-word emphasis. Only ever used inside the green panel, which is the only ground pink is legal as type on. */ .hl { color: var(--text-inverse-accent) } /* Habitat scene — opt-in backdrop for a plant page: that species' native ground behind the hero, and the same art washed right back behind the column once there is room beside it. The wash gradient is load-bearing. It reaches solid page at 88%, and the -22px pull lands the eyebrow below that line, so hero copy never sits on live art. */ :root { --scene-dryland: url("../img/sahel-dryland.svg") } .hero--scene { position: relative; padding: 0 var(--space-5) var(--space-6); overflow: hidden } .hero--scene .scene { height: clamp(240px, 62vw, 330px); margin: 0 calc(var(--space-5) * -1) -22px; background: linear-gradient(180deg, rgba(var(--pp-page-rgb), 0) 0%, rgba(var(--pp-page-rgb), 0) 46%, rgba(var(--pp-page-rgb), .5) 68%, rgba(var(--pp-page-rgb), .93) 82%, var(--surface-background) 88%), var(--scene-dryland) 20% 78%/1150px auto no-repeat; } @media (min-width: 900px) { body.has-scene { background: linear-gradient(rgba(var(--pp-page-rgb), .74), rgba(var(--pp-page-rgb), .74)), var(--scene-dryland) center bottom/cover fixed no-repeat, var(--surface-background); } body.has-scene .wrap { background: var(--surface-background); box-shadow: var(--shadow-md) } } /* ── Light declaration ───────────────────────────────────────────────────── The tint above is one half of it; this line is the other, in words, with the clay the stake actually ships in. Required on every plant page. It is a green chip rather than a muted line: the one fixed statement in the hero, and where green enters the top of the page — cream on ink, 10.9:1. The clay swatch takes the cream hairline here; an ink alpha on the chip is invisible, and the cream clay needs an edge to read as a swatch at all. */ .light { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--size-caption); font-weight: var(--pp-weight-body-bold); letter-spacing: var(--pp-ls-button); line-height: var(--pp-lh-tight); text-transform: uppercase; color: var(--text-inverse); background: var(--surface-brand); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-top: var(--space-4); } .light .clay { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-on-brand); } :root[data-light="low"] .light .clay { background: var(--stake-light-low) } :root[data-light="medium"] .light .clay { background: var(--stake-light-medium) } :root[data-light="bright"] .light .clay { background: var(--stake-light-bright) } /* ── Cards ─────────────────────────────────────────────────────────────── */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5) } /* Label and answer, the right way round. The card set its metric name in display type and its answer in lighter, softer body type underneath, so the word "Water" outranked the interval you opened the page to find. The name is chrome now — small, tracked, uppercase, secondary tone, the same device as the eyebrows — and the answer takes the display face at --size-h4 in full ink, which the scale now places above the 18px body step. */ /* Cards rest on --shadow-sm, the way every card on the other two templates does. This file had four card types and four different edge treatments — .fact bare, .var-row bare, .row and .method hairlined — so nothing on the page agreed about what a card is. They all rest on the soft shadow now, and the ones sitting on the near-white page ground keep their hairline too, because white on --pp-page is 1.01:1 and a shadow is not an edge. */ .fact { background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4) } .fact .hd { font-family: var(--pp-font-body); font-size: var(--size-body-s); font-weight: var(--pp-weight-body-bold); letter-spacing: var(--pp-ls-eyebrow); line-height: var(--pp-lh-tight); text-transform: uppercase; color: var(--text-secondary); } /* These answers are phrases rather than the two-word values the newer care page carries — "Beginner-friendly, extremely forgiving" against "Bright, indirect" — so the answer holds the 18px care step instead of climbing to --size-h4 and wrapping to four lines in a half-width card. It still clears its own label by five pixels, a weight and a face. */ .fact .sub { font-family: var(--pp-font-display); font-weight: var(--pp-weight-display-soft); font-size: var(--size-care-body); line-height: var(--pp-lh-heading); letter-spacing: var(--pp-ls-heading); color: var(--text-primary); margin-top: var(--space-2); } /* ── Watering zones ──────────────────────────────────────────────────────── The only place in the repo the functional trio appears. Each row carries its zone name and its day range in words, so the dot is confirmation and never the message. */ .row { display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-bottom: var(--space-2); cursor: pointer; text-align: left; width: 100%; font-family: inherit; transition: box-shadow var(--motion-swap), border-color var(--motion-swap); } .row:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-ring); outline-offset: var(--state-focus-offset); } /* Selected keeps the resting shadow under the ink ring — without it the row dropped its shadow at the moment it was chosen and appeared to sink. */ .row[aria-pressed="true"] { border-color: var(--state-selected-border); box-shadow: 0 0 0 1.5px var(--state-selected-border), var(--shadow-sm) } .dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--border-subtle) } .dot--skip { background: var(--zone-skip) } .dot--check { background: var(--zone-check) } .dot--likely { background: var(--zone-likely) } /* A zone row answers two questions — which zone, and how many days — and both were set within a hair of the explanation between them. The zone name and the day range take the display face at --size-h4; the explanation keeps the 18px care floor and the secondary tone, so the row reads name and number first and the sentence second. */ .row .t1 { /* a row title, so it takes the heading tone */ font-family: var(--pp-font-display); font-size: var(--size-h4); font-weight: var(--pp-weight-display-soft); letter-spacing: var(--pp-ls-heading); line-height: var(--pp-lh-heading); color: var(--text-primary); } .row .t2 { font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-secondary); margin-top: 2px } .row .days { font-family: var(--pp-font-display); font-size: var(--size-h4); font-weight: var(--pp-weight-display-soft); letter-spacing: var(--pp-ls-heading); color: var(--text-primary); white-space: nowrap; } .verdict { background: var(--surface-subtle); border-radius: var(--radius-md); padding: var(--space-5); margin-top: var(--space-2) } .verdict .hd { font-size: var(--size-h4) } .verdict p { font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-primary); margin: var(--space-2) 0 0 } .verdict p b { color: var(--text-primary) } .pots { display: flex; gap: var(--space-2); margin-top: var(--space-4) } .pots button { flex: 1; min-height: var(--pp-hit-comfort); padding: var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--surface); color: var(--text-secondary); font-family: inherit; font-size: var(--size-body-s); font-weight: var(--pp-weight-body-bold); cursor: pointer; transition: background-color var(--motion-swap), color var(--motion-swap); } .pots button[aria-pressed="true"] { background: var(--surface-brand); color: var(--text-inverse); border-color: var(--state-selected-border) } .method { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-top: var(--space-3); font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-secondary); } .method b { color: var(--text-primary) } /* ── Signals and varieties ─────────────────────────────────────────────── */ .icon-slot { width: 60px; height: 60px; border-radius: var(--radius-sm); background: var(--surface-subtle); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: var(--size-caption); color: var(--text-secondary); text-align: center; } /* The thumbnail pairs with the name, so it starts where the name starts. Centred, it sat at a different height against every row's title depending on whether that row's description ran to one line or two. */ .var-row { display: flex; align-items: flex-start; gap: var(--space-4); background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-4); margin-bottom: var(--space-2); } .var-row .hd { font-size: var(--size-h4) } .var-row .sub { font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-secondary); margin-top: var(--space-2) } /* ── The green panel ─────────────────────────────────────────────────────── The one thing on the page you most want read, and the only ground pink is legal as type on. */ .panel { background: var(--surface-brand); color: var(--text-inverse); padding: var(--space-7) var(--space-5) } .panel p { font-family: var(--pp-font-display); font-weight: var(--pp-weight-display); font-size: var(--size-h2); line-height: var(--pp-lh-heading); letter-spacing: var(--pp-ls-heading); margin: 0; } .panel .tag { font-size: var(--size-caption); letter-spacing: var(--pp-ls-eyebrow); text-transform: uppercase; font-weight: var(--pp-weight-body-bold); color: var(--text-inverse-accent); margin-top: var(--space-5); } /* The footnote under the statement. It was held off by a cream hairline with padding on both sides of it; the gap those paddings already opened is what separates the two, and the rule was a second answer to a question the space had answered. One 44px step of whitespace instead — the same distance, no line. */ .panel .foot { margin-top: var(--space-7); font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-inverse); } .panel a { color: var(--text-inverse-accent); font-weight: var(--pp-weight-body-bold); text-decoration: none } .panel a:hover { text-decoration: underline } /* A full section on the green ground, white cards on top of it. Same ground as .panel; this one holds a grid rather than a single statement, which is why it keeps the ordinary section padding. Its eyebrow is the pink every green ground owes — 6.2:1, and the only ground pink is legal as type on. */ .panel-band { background: var(--surface-brand); color: var(--text-inverse) } .panel-band h2 { color: var(--text-inverse) } .eyebrow--on-panel { color: var(--text-inverse-accent) } /* The myth section. It used to hold the only two visually unique versions of components this file already had: `.eyebrow2`, which was `.eyebrow` under a second name, and `p.big`, a paragraph dressed as a heading one step below the h2 every other section on the page opens with. Both are gone. The section takes the eyebrow and the h2 the other six take, so the claim — the thing this section exists to deliver — outranks the paragraph explaining it by the same distance it does everywhere else, and the page's headings are its headings. */ .callout { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--space-5) } .callout p.small { font-size: var(--size-care-body); line-height: var(--pp-lh-body); color: var(--text-primary); margin: var(--space-3) 0 0 } .cta { background: var(--surface-brand); color: var(--text-inverse); text-align: center } .cta .eyebrow { color: var(--text-inverse-accent) } .cta h2 { color: var(--text-inverse); font-size: var(--size-h2); margin-top: var(--space-2) } /* The one action on the page — and, until this pass, the only button in the repo that was not built like a button. It sat in the display face at 19px, sentence case, no tracking, and swapped colour without lifting; then it was rebuilt here, in this file, as a fourth private copy of a control the system already owned. Someone arriving from the home page met a button that looked right and was declared nowhere near the other three. It is the shared button now — .pp-btn .pp-btn--accent .pp-btn--chunky in the markup, the same three classes the home page's closer carries — and all this file has left to say about it is where it sits. Pink fill under an ink label, which is what the closers on the other two templates use. */ .cta .pp-btn { margin-top: var(--space-4) } /* ── The wave ────────────────────────────────────────────────────────────── The join between a green band and the light section beside it. Every other template in the repo curves that join — the home page over the top edge of every card, the other care page at the top of every band — and these two pages butted their three green grounds straight against the light sections above them with a hard horizontal edge. COLOR-SYSTEM A7 states the device as already shipped on the care pages ("the wave carries the colour across the join"); on two of the three care pages it was not. Same authored path as the other two templates, and spent by the same rule: one at the entry to each green ground and one at the exit, filled with the colour of the section above so the curve reads as that ground spilling over. The two quiet joins on the page — tint to page ground, a step of about a point — take none. Five per page, countable. The wave occupies the top 30px of its section, so a section carrying one opens on the 60px step rather than the 44px one and no type ever lands under the curve. Above 760px section padding is already 60. */ .wave { position: absolute; top: -1px; left: 0; z-index: 1; width: 100%; height: 30px; } .has-wave { padding-top: var(--space-8) } /* ── Scroll reveal ───────────────────────────────────────────────────────── The home page and the other care page both rise their sections 16px on arrival, staggered; these two had no motion at all beyond hover, so three pages reached by the same tap behaved differently on the way in. Same tokens, same script, same guard. The hidden state is scoped to .js-reveal, which only assets/js/reveal.js sets. With JavaScript off the class never lands and every section renders normally — nothing here is ever hidden behind a script, and the hero carries no data-reveal, so the first screen never waits. */ [data-reveal] { transition: opacity var(--motion-reveal), transform var(--motion-reveal); } .js-reveal [data-reveal] { opacity: 0; transform: translateY(var(--motion-reveal-shift)); } .js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; } } /* ── Focus ───────────────────────────────────────────────────────────────── Ink ring with a page halo; on the two green grounds the ring flips to cream and drops the halo, because there the panel is the contrast. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: var(--state-focus-width) solid var(--state-focus-ring); outline-offset: var(--state-focus-offset); box-shadow: 0 0 0 calc(var(--state-focus-offset) + var(--state-focus-width) + 1px) var(--state-focus-halo); } .panel a:focus-visible, .cta a:focus-visible { outline-color: var(--state-focus-ring-on-brand); box-shadow: none; } /* ── Wider than the phone ────────────────────────────────────────────────── The tap view is a phone view first, and above 760px it does what the other care page does: the shell widens, section padding steps to 60, and every block inside a section lines up on the reading measure so the page keeps one spine instead of stretching its cards to whatever room it finds. Nothing changes but the arrangement — the colour fields, the type scale and the radii are the same tokens at every width. */ @media (min-width: 760px) { section { padding: var(--pp-panel-y-wide) var(--space-6) } /* The tab bar sits on the same left edge as the content under it. */ .nav { padding: var(--space-3) var(--space-6) } /* The habitat art is a backdrop, not content, so it is the one thing that does not take the measure — and its bleed has to follow the wider gutter. */ .hero--scene { padding: 0 var(--space-6) var(--pp-panel-y-wide) } .hero--scene .scene { margin: 0 calc(var(--space-6) * -1) -22px } /* One class, so any component that already sets a narrower measure of its own — the voice line's 34ch, say — still wins. This is a ceiling for the blocks that had none, not a width for everything. */ section > *:not(.scene):not(.wave) { max-width: var(--measure-care) } /* The closer is centred, so its blocks centre on the measure rather than sitting against the left gutter of a 760px band. */ .cta > *:not(.wave) { margin-left: auto; margin-right: auto } }