:root{
--green-900:#1b3a2b;
/* Added for the two cards under the homepage search, which needed a green
dark enough to carry white text and lighter than the 900 the header ink
uses, so the cards read as a surface rather than as a second header. */
--green-800:#1f5a3c;
--green-700:#2f6b45;
--green-500:#4c9a63;
--green-300:#a8d5b5;
--green-100:#eef7ef;
--earth:#8a6d4b;
--cream:#faf8f2;
--text:#233329;
/* Secondary text: captions, latin names, "no results", meta lines. One
token, because the two greys it replaces (#7b8a80 and #6a7a6f) were
three percent of luminance apart and both failed AA - 3.63:1 and
4.15:1. This is 5.12:1 at worst, on white, cream or green-100. */
--muted:#5d6b62;
/* The warning amber, dark enough to read: 6.53:1 at worst, where
#8a6d1f was 4.47:1. */
--warn-ink:#6b5518;
--radius:14px;
--shadow:0 4px 16px rgba(27,58,43,0.12);
/* Height of the sticky site header. A sensible default for the first paint;
assets/header.js measures the real bar and overwrites it, since the header
is taller on narrow screens and when the nav wraps. */
--header-h:61px;
/* One width for the whole page. The header used to be 1400, .container 1100
and the plant article 840, so on any screen wider than 1400 the logo sat
150px left of the breadcrumb and the breadcrumb 130px left of the card: a
three-step staircase down the left edge, constant at every width above
that. Raised from 1100 at the same time, because an 840px article stranded
in the middle of a 1920 screen left most of it empty. */
--page-max:1240px;
/* Where the hero artwork is centred when a hero does not say otherwise.
.hero-media img reads these, so the visible crop can be nudged per hero
without re-exporting the picture. See assets/hero/README.md. */
--hero-focus-x:50%;
--hero-focus-y:52%;
}
/* Keeps anchor jumps and scrollIntoView from parking their target underneath
the sticky header. */
html{scroll-padding-top:calc(var(--header-h) + 12px);}
*{box-sizing:border-box;}
body{
margin:0;
font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
color:var(--text);
background:var(--cream);
}
/* width:100% is not redundant. body is a column flex container (so the footer
can be pushed down on a short page), which makes every direct child a flex
item, and an item with auto margins on the cross axis stops stretching and
sizes to its own content instead. A container holding a wide grid still
filled the page, so most of the site looked unaffected; a container holding
only a breadcrumb shrank to the width of the words and the auto margins then
centred it. An explicit width gives the item a base size to stretch from,
and the auto margins go back to centring the leftover. */
.container{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 20px;}
a{text-decoration:none;color:inherit;}
/* Sticky, so the nav and the language switcher stay reachable on the long
pages. z-index sits above everything on the page (the tallest was #site-nav
at 60, and Leaflet's own controls at 800) but below the listing modal at
1000, which is meant to cover the header along with the rest. */
.site-header{
background:#fff;color:var(--text);position:sticky;top:0;z-index:900;
border-bottom:1px solid var(--green-100);
}
/* Added by assets/header.js once the page has scrolled, so the bar lifts off
the content instead of carrying a shadow while it is still at rest. */
.site-header.is-stuck{box-shadow:0 4px 16px rgba(27,58,43,.09);}
.header-inner{display:flex;align-items:center;max-width:var(--page-max);margin:0 auto;padding:14px 20px;gap:16px;}
.header-left{display:flex;align-items:center;gap:12px;flex:none;}
/* The logo is a 4:1 horizontal lockup. Height is set and width left auto, so
the aspect ratio is the file's own and can never be squashed; display:flex
removes the inline descender gap under the image. */
.brand{display:flex;align-items:center;flex:none;}
.brand img{display:block;height:38px;width:auto;}
.site-header nav a{margin-left:24px;color:var(--green-700);font-weight:500;}
.site-header nav a.active,.site-header nav a:hover{color:var(--green-900);}
#lang-select{background:var(--green-700);color:#fff;border:1px solid var(--green-500);border-radius:6px;padding:4px 8px;font-weight:600;cursor:pointer;flex:none;}
.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:8px;border:none;background:none;cursor:pointer;flex:none;}
.menu-toggle span{display:block;width:100%;height:2px;background:var(--green-900);border-radius:2px;}
.menu-toggle:hover span{background:var(--green-500);}
.login-btn{background:var(--green-700);color:#fff !important;padding:9px 20px;border-radius:999px;font-weight:700;font-size:0.9rem;white-space:nowrap;flex:none;}
.login-btn:hover{background:var(--green-700);color:#fff !important;}
#account-extras{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none;}
.account-icon-btn{background:none;border:none;cursor:pointer;padding:4px;position:relative;line-height:1;display:flex;align-items:center;color:var(--green-700);}
.account-icon-btn svg{width:24px;height:24px;}
.account-icon-btn:hover{color:var(--green-900);}
.account-icon-btn .badge-dot{position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;background:#d9534f;border:1.5px solid #fff;}
#site-nav{position:absolute;top:100%;left:0;background:#fff;border-top:1px solid var(--green-100);border-right:1px solid var(--green-100);border-bottom-right-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;width:max-content;max-width:calc(100vw - 64px);padding:18px 32px 22px 22px;gap:16px;z-index:60;}
#site-nav[hidden]{display:none;}
#site-nav a{margin-left:0;color:var(--green-900);font-weight:600;font-size:1.05rem;}
#site-nav a:hover{color:var(--green-500);}
/* Desktop: full nav bar inline in the header, no hamburger. The hamburger
dropdown above is for narrow/mobile screens only. */
@media(min-width:701px){
.menu-toggle{display:none;}
#site-nav{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;border:none;box-shadow:none;width:auto;max-width:none;padding:0;gap:20px;margin:0;}
#site-nav[hidden]{display:flex;}
#site-nav a{font-size:0.95rem;}
}
/* No ad network is wired in yet, so the placeholder boxes stay hidden.
Remove this rule once real ads are plugged into these slots. */
.ad-slot{display:none;background:var(--green-100);border:1px dashed var(--green-300);border-radius:10px;align-items:center;justify-content:center;color:#8aa392;font-size:0.85rem;position:relative;min-height:90px;margin:20px auto;}
.ad-leaderboard{max-width:728px;min-height:90px;}
.ad-inline{min-height:100px;margin:30px auto;}
.ad-label{position:absolute;top:6px;left:10px;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;color:#a3b5aa;}
.hero{background:linear-gradient(180deg,var(--green-100),var(--cream));padding:60px 0 40px;text-align:center;}
.hero h1{font-size:2.2rem;color:var(--green-900);margin-bottom:10px;}
.hero p{color:var(--green-700);max-width:600px;margin:0 auto 30px;font-size:1.05rem;}
.search-panel{max-width:700px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;}
/* Centred, like every other .search-panel on the site. It was briefly
left-aligned to sit over the breadcrumb and the photo; centred is how it
read before the container regression and is what it goes back to. The auto
margins only do anything above 700px, so on a phone it still fills the
content width. */
.plant-page-search{margin:16px auto 20px;padding:12px 16px;}
.plant-page-search .search-tabs{margin-bottom:8px;gap:8px;}
.plant-page-search .tab-btn{padding:7px;font-size:0.85rem;}
/* The field inside the card. A tint rather than a border: the card is already
a white box, and a second bordered box inside it is the thing being removed
everywhere else on the site. */
.plant-page-search .wp-search{
background:var(--green-100);border-radius:999px;padding:4px 16px;
}
.plant-page-search .wp-search input{padding:8px 0;font-size:0.95rem;}
.plant-page-search .photo-drop{min-height:0;padding:14px;gap:10px;}
/* .related-plants-grid / .related-plant-card lived here: a square photo with
a name under it, used by the category, related-plants and bonsai lists. It
was the second of two plant cards on the site, and the reason the category
pages never looked like the homepage. Everything now renders the one card
(.plant-grid / .plant-card below), so both classes are gone. */
.search-tabs{display:flex;gap:10px;margin-bottom:16px;}
.tab-btn{flex:1;padding:10px;border:none;border-radius:10px;background:var(--green-100);color:var(--green-700);font-weight:600;cursor:pointer;font-size:0.95rem;transition:.2s;}
.tab-btn.active{background:var(--green-500);color:#fff;}
.tab-panel{display:none;text-align:left;}
.tab-panel.active{display:block;}
/* "#plant-search-input{border:1px solid ...}" used to live here. It was the
plant page's field, but the same id is on the homepage search and on the
404, where the markup asks for a flat input inside a pill. An id scores
1-0-0 and ".home-search-input{border:none}" scores 0-1-0, so the border
won on all three: a rounded box sat inside the rounded pill, which is the
box-in-a-box this change is undoing. The field is styled by .wp-search at
the end of this file now, by class, so no page has to out-weigh an id. */
.search-results{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;}
/* The message a search with nothing to show puts there. The colour was an
inline #6a7a6f, which is below 4.5:1 on the white card; --muted is the
token the rest of the site's secondary text uses. */
.search-empty{margin:0;padding:8px;color:var(--muted);}
.search-empty a{color:var(--green-700);text-decoration:underline;}
/* The address and its Copy button, on a wide screen with a mouse only.
Hidden by default, so a phone gets exactly the markup it had before and
nothing has to be measured for the common case to be right.
Three conditions, and all three are needed:
min-width - there is room for an address on the line;
hover:hover - the device has a pointer that can rest on something, which
rules out a tablet in portrait with a stylus-less finger;
pointer:fine - that pointer is accurate, i.e. a mouse or a trackpad and
not a fingertip.
A narrow desktop window therefore keeps the mailto alone, which is right:
the test is "is there room and is this a mouse", not "is this a big phone".
display:none and not visibility or opacity: hidden this way the button is
out of the accessibility tree and out of the tab order too, so a phone
reader is never offered a Copy button it cannot usefully press. */
.search-empty-desk{display:none;}
@media (min-width:900px) and (hover:hover) and (pointer:fine){
/* A wrapping flex row, which is what gets "one line if it fits, two clean
ones if not" without deciding in advance which it will be. The sentence
and the address are the two items; column-gap separates them on one line,
row-gap on two, and because both items are flex children the second line
starts at the paragraph's own left edge instead of under wherever the
first line happened to end. That is the alignment an inline span with a
margin-left cannot give. */
.search-empty{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:3px;}
.search-empty-desk{display:inline-flex;align-items:baseline;gap:7px;}
}
/* The site's own font, like the sentence it sits under. It was monospace, on
the argument that an address is read character by character - true of a
licence key, overdone for an address somebody is about to copy with the
button next to it, and it read as a code sample rather than as text. */
.search-empty-addr{color:inherit;}
/* A text link, not a control with a box. No border, no background, and the
colour of the sentence around it; the underline on hover and the focus ring
are what say it can be pressed. */
.search-empty-copy{
display:inline-flex;align-items:center;gap:5px;
font:inherit;font-size:.92em;line-height:inherit;
padding:0;border:0;background:none;color:inherit;cursor:pointer;
text-decoration:underline;text-decoration-color:transparent;
text-underline-offset:2px;transition:text-decoration-color .15s,color .15s;
}
.search-empty-copy:hover{color:var(--green-700);text-decoration-color:currentColor;}
.search-empty-copy:focus-visible{
outline:2px solid var(--green-500);outline-offset:3px;border-radius:4px;
}
.search-empty-copy-icon{width:15px;height:15px;flex:none;}
/* Done: the word changes and the icon goes green, which is the whole signal.
Nothing moves, because the icon keeps its box and the two words are close
enough in length ("Copier"/"Copié", "Kopieren"/"Kopiert") that the line
does not reflow. */
.search-empty-copy.is-done{color:var(--green-700);}
.result-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px;cursor:pointer;transition:.15s;}
.result-item:hover{background:var(--green-100);}
.result-item img{width:48px;height:48px;object-fit:cover;border-radius:8px;}
.result-item .rname{font-weight:600;color:var(--green-900);}
.result-item .rlatin{font-size:0.8rem;color:var(--muted);font-style:italic;}
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:140px;border:2px dashed var(--green-300);border-radius:10px;color:var(--green-700);text-align:center;padding:20px;font-weight:500;background:var(--green-100);transition:.15s;}
.photo-drop.drag-active{border-color:var(--green-500);background:var(--green-300);}
.photo-choice-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.photo-choice-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:8px;background:var(--green-700);color:#fff;font-weight:600;font-size:0.95rem;cursor:pointer;transition:.15s;}
.photo-choice-btn:hover{background:var(--green-500);}
#photo-preview{max-width:100%;max-height:220px;border-radius:10px;margin-top:14px;display:block;}
.photo-result{margin-top:14px;}
.breadcrumb{font-size:0.85rem;color:var(--green-700);margin:14px 0 0;}
.breadcrumb a{color:var(--green-700);}
.breadcrumb a:hover{color:var(--green-500);text-decoration:underline;}
.breadcrumb-sep{margin:0 8px;color:var(--green-300);}
.breadcrumb [aria-current="page"]{color:var(--green-900);font-weight:600;}
.tools-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0 40px;}
.tools-column h2{color:var(--green-900);font-size:1.05rem;margin:0 0 12px;}
.tool-item{background:var(--green-100);padding:12px 14px;border-radius:10px;margin-bottom:10px;}
.tool-item b{display:block;color:var(--green-900);margin-bottom:4px;}
.tool-item p{margin:0;font-size:0.9rem;color:var(--text);line-height:1.5;}
.section-title{color:var(--green-900);margin:50px 0 20px;font-size:1.5rem;}
/* A short page used to leave a band of cream below the footer: on a 410 at
1280x900 the footer ended at 514px and 386px of background showed under it.
The body is a column that fills the viewport and the footer takes the slack,
so it sits on the bottom edge when there is not enough content to push it
there, and behaves normally when there is.
The cookie banner, its dim and the scripts are all out of flow, so the
footer is the last thing in the column either way. */
body{min-height:100vh;display:flex;flex-direction:column;}
.site-footer{margin-top:auto;}
/* The publish flow has no footer and sets its own full-height background. */
.pub-body{display:block;}
.site-footer{background:var(--green-900);color:var(--green-300);text-align:center;padding:20px;font-size:0.9rem;}
/* Growing calendar ---------------------------------------------------------
Fixed design: the same card, the same three colours, for every plant that
has calendar data. Only the segment positions change, so these values are
deliberately literal rather than themed. */
/* Same pale green and radius as .info-item and .placement, so this reads as
one of the page's cards rather than an insert pasted over them. */
.gcal{
background:var(--green-100);border-radius:12px;
padding:18px 20px 14px;margin:0 0 18px;
}
/* Titles the card, rather than repeating the h1 sitting just above it.
Same treatment as the Meilleur emplacement heading it sits beside. */
.gcal-head{margin:0 0 10px;font-size:0.85rem;font-weight:700;letter-spacing:0.04em;
text-transform:uppercase;color:var(--green-700);}
.gcal-badge{
display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;
padding:5px 12px;border-radius:999px;
background:#E7F0E5;color:#2F5D3A;font-size:0.85rem;font-weight:600;
}
.gcal-leaf{width:15px;height:15px;flex:none;}
/* The track is the whole year. Segments are positioned on it, so months with
no activity stay empty instead of being stretched to fill the bar. */
/* White for the empty months now the card itself is green, so the months with
nothing happening still read as empty rather than as a fourth phase. */
/* One row per phase, because real windows overlap: basil is still being sown
in June and July while the first sowings are already being picked. A single
bar would have to pick a winner and invent a sequence. */
.gcal-rows{position:relative;display:grid;gap:8px;}
.gcal-row{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:10px;}
.gcal-row-label{font-size:0.78rem;font-weight:600;color:#1B3A2B;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gcal-track{position:relative;height:28px;border-radius:7px;background:#fff;}
/* Marker label sits once under the whole stack rather than on every row. */
.gcal-today-label{
position:absolute;top:calc(100% + 4px);transform:translateX(-50%);margin:0;
font-size:0.72rem;font-weight:700;color:#1B3A2B;white-space:nowrap;
}
.gcal-seg{
position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
padding:0 6px;font-size:0.8rem;font-weight:600;overflow:hidden;
}
.gcal-seg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gcal-seg-sow{background:#D9E8D2;color:#3E6B3E;border-radius:7px 0 0 7px;}
.gcal-seg-growth{background:#9FCB8E;color:#1F4D22;}
.gcal-seg-harvest{background:#E8A93C;color:#5C3D0A;border-radius:7px;}
.gcal-seg-sow{border-radius:7px;}
/* The source gave a season, not months, so the edges are deliberately soft:
the bar has to occupy months to line up with the axis, but it should not
read as a boundary the source never stated. */
.gcal-seg-approx{
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}
/* Marker sits above the bar and carries its own label below it. translateX
keeps it centred on the date rather than starting at it. */
.gcal-today{position:absolute;top:-4px;bottom:-4px;width:2px;background:#1B3A2B;transform:translateX(-1px);}
.gcal-today span{
position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
font-size:0.72rem;font-weight:700;color:#1B3A2B;white-space:nowrap;
}
/* Offset by the row-label column (74px) plus its gap (10px), so the month
ticks line up with the start of the tracks rather than the card edge. */
.gcal-months{
display:grid;grid-template-columns:repeat(12,1fr);
margin:26px 0 0 84px;padding:0;list-style:none;
}
.gcal-months li{text-align:center;font-size:0.72rem;color:#8a9a90;}
/* Says what this card answers, so it does not read as a rival to the
Care by Season tab, which answers the other question. */
.gcal-note{margin:12px 0 0;font-size:0.75rem;line-height:1.45;color:#7a8a80;}
.gcal-source{margin:4px 0 0;font-size:0.72rem;color:#8a9a90;}
.gcal-source a{color:inherit;}
/* Desktop keeps the labels inside the bar, as designed, so the legend is for
phones only. */
.gcal-legend{display:none;}
@media(max-width:640px){
.gcal{padding:16px 14px 12px;}
.gcal-badge{font-size:0.8rem;padding:5px 10px;}
.gcal-track{height:24px;}
.gcal-row{grid-template-columns:62px 1fr;gap:8px;}
.gcal-row-label{font-size:0.72rem;}
.gcal-months{margin-left:70px;}
.gcal-months li{font-size:0.68rem;}
/* A two-month phase is about 50px wide on a phone, which is not enough for
"Croissance" at any readable size. Rather than ship a truncated word, the
bar goes colour-only here and the names move to a legend underneath. The
colours, proportions and marker are unchanged. */
.gcal-seg{font-size:0.66rem;}
.gcal-legend{
display:flex;flex-wrap:wrap;gap:6px 14px;
margin:12px 0 0;padding:0;list-style:none;
}
.gcal-legend li{
display:flex;align-items:center;gap:6px;
font-size:0.76rem;font-weight:600;color:#1B3A2B;
}
.gcal-legend li span{font-weight:500;color:#7a8a80;}
.gcal-legend i{width:11px;height:11px;border-radius:3px;flex:none;}
.gcal-key-sow i{background:#D9E8D2;}
.gcal-key-growth i{background:#9FCB8E;}
.gcal-key-harvest i{background:#E8A93C;}
}
@media(max-width:400px){
.gcal-months li{font-size:0.62rem;letter-spacing:-0.02em;}
.gcal-legend{gap:5px 10px;}
.gcal-legend li{font-size:0.72rem;}
}
.footer-links{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:8px 20px;margin-top:8px;
}
.footer-links a{
display:inline-flex;align-items:center;gap:6px;
color:var(--green-300);opacity:0.75;font-size:0.8rem;text-decoration:underline;
}
.footer-links a:hover{opacity:1;}
/* The text is only 17px tall, which is a poor tap target. Keyed to a coarse
pointer rather than a width, so phones and tablets get the 44px hit area
and a mouse-driven desktop keeps the tighter row. */
@media(pointer:coarse){
.footer-links{gap:0 20px;}
.footer-links a{min-height:44px;}
}
/* This icon carries a viewBox and no width/height, so with no rule of its own
it took the replaced-element default and stretched to fill the footer: a
1060px camera. Every other inline icon on the site is sized in CSS; this one
was simply missed. */
.footer-icon{width:14px;height:14px;flex:none;}
/* inline-flex, not flex: as a block-level flex box this stretched the full
width of the summary column with its label stranded at the left end. */
.bonsai-example{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:var(--green-100);padding:6px 12px 6px 6px;border-radius:20px;text-decoration:none;cursor:pointer;transition:.15s;}
.bonsai-example:hover{background:var(--green-300);}
.bonsai-example img{width:32px;height:32px;object-fit:cover;border-radius:50%;}
.bonsai-example span{font-size:0.75rem;font-weight:600;color:var(--green-700);}
.bonsai-steps{padding-left:20px;margin:0 0 16px;color:var(--text);font-size:1.05rem;}
.bonsai-steps li{margin-bottom:18px;line-height:1.7;}
.bonsai-diagram{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;margin:0 0 16px;max-width:380px;}
.bonsai-diagram img{width:100%;display:block;}
.plant-detail-content{max-width:var(--page-max);margin:0 auto;}
.plant-top{display:flex;gap:24px;align-items:flex-start;margin-bottom:18px;}
.plant-media{flex:0 0 260px;}
.plant-hero-figure{margin:0;}
/* A frame of one shape, whatever shape the photograph is.
It was height:auto with object-fit:contain, which meant the box took the
proportions of whichever photo was showing: a portrait one sat in it with
white down the side, and switching between a portrait and a landscape one
resized the frame and pushed the text below it up or down. The same 4/3 and
cover the plant cards use, so one photo looks like the next and nothing
moves when they are swapped.
cover crops rather than shrinks, which also keeps the picture at a usable
size: contain scaled a 1000x1333 photo down until the copyright mark in its
corner was too small to read. */
.plant-hero-figure img{
/* height:auto is load-bearing: the width and height ATTRIBUTES on the img
are a presentational hint of height:750px, which beats aspect-ratio when
height is left unset, and max-height then clamped the box to 400 and gave
a 320x400 frame instead of a 320x240 one. */
width:100%;height:auto;aspect-ratio:4/3;max-height:400px;object-fit:cover;
background:var(--green-100);
border-radius:var(--radius);box-shadow:var(--shadow);display:block;
}
.plant-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-top:8px;}
.gthumb-btn{flex:0 0 auto;padding:0;border:2px solid transparent;border-radius:10px;background:none;cursor:pointer;line-height:0;}
.gthumb-btn img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block;}
.gthumb-btn:hover{border-color:var(--green-300);}
.gthumb-btn.active{border-color:var(--green-500);}
.plant-summary{flex:1;min-width:0;}
.plant-summary h1{margin:0 0 4px;color:var(--green-900);font-size:1.6rem;}
.plant-summary .latin{font-style:italic;color:var(--muted);}
.diff-badge{display:inline-block;margin-top:8px;background:var(--green-100);color:var(--green-700);padding:4px 10px;border-radius:20px;font-size:0.8rem;font-weight:600;}
.variation-section{margin-bottom:20px;}
.variation-label{display:block;font-size:0.8rem;color:var(--green-700);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:8px;}
.variation-list{display:flex;flex-wrap:wrap;gap:8px;}
.variation-chip{background:var(--green-100);color:var(--green-700);padding:6px 12px;border-radius:20px;font-size:0.85rem;}
.detail-tabs{display:flex;gap:8px;margin:24px 0 16px;flex-wrap:wrap;}
.dtab-btn{background:#fff;border:1px solid var(--green-300);padding:9px 15px;border-radius:20px;font-weight:600;color:var(--green-700);cursor:pointer;transition:.2s;}
.dtab-btn:hover{border-color:var(--green-500);}
.dtab-btn.active{background:var(--green-100);border-color:var(--green-500);color:var(--green-900);}
.dtab-panel{display:none;}
.dtab-panel.active{display:block;}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.info-item{background:var(--green-100);padding:12px;border-radius:10px;}
.info-item h3{display:block;color:var(--green-900);margin:0 0 4px;font-size:0.85rem;font-weight:700;}
/* Only the facts that carry a citation get one, so it is set quietly and does
not compete with the care text around it. */
.info-source{display:block;margin-top:4px;font-size:0.72rem;color:#8a9a90;}
.info-source a{color:inherit;}
.season-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.season-item{background:var(--cream);border-left:4px solid var(--green-500);padding:12px 14px;border-radius:8px;}
.season-item h3{display:block;color:var(--green-900);margin:0 0 4px;font-size:1rem;font-weight:700;text-transform:capitalize;}
/* Growing & Maintenance reuses the season cards, but its headings are phrases
("Soil and pot", "Erde und Topf"), which capitalize would turn into titles. */
.grow-grid .season-item h3{text-transform:none;}
.pest-item{background:#fff5f0;border-left:4px solid #d97b5f;padding:12px 14px;border-radius:8px;margin-bottom:10px;}
.pest-item h3{color:#a8452a;margin:0;font-size:1rem;font-weight:700;}
.pest-item .signs{font-size:0.85rem;color:#7a5a4e;margin:4px 0;}
/* Common problems, above the pests in the same tab. Amber rather than the
pests' red: these are care mistakes to correct, not something to treat. */
.problems-title{color:var(--green-900);font-size:1.05rem;font-weight:700;margin:18px 0 10px;}
.problems-title:first-of-type{margin-top:0;}
.problem-list{display:grid;gap:10px;margin-bottom:6px;}
.problem-item{background:#fdf6e3;border-left:4px solid #e0b84b;padding:12px 14px;border-radius:8px;}
.problem-item h4{color:var(--warn-ink);margin:0;font-size:1rem;font-weight:700;}
.problem-item .cause{font-size:0.9rem;color:#6b5518;margin:4px 0;}
@media(min-width:900px){
.problem-list{grid-template-columns:1fr 1fr;gap:12px;}
}
.plant-intro{margin:16px 0 0;color:var(--text);font-size:1.08rem;line-height:1.7;}
/* Had a bottom margin only, so it sat flush against whatever card was above. */
.highlight-box{background:#fdf6e3;border-left:4px solid #e0b84b;border-radius:8px;padding:14px 18px;margin:20px 0;}
.highlight-box h3{display:block;color:var(--warn-ink);margin:0 0 4px;font-size:1rem;font-weight:700;}
.highlight-box p{margin:0;color:#6b5518;font-size:1.02rem;line-height:1.6;}
/* Cards, like every other tab, and two columns on desktop so the panel is not
half empty. The columns also hold each answer at a readable measure without
a max-width that would strand the right-hand side. */
.faq-grid{display:grid;gap:12px;}
.faq-item{background:var(--green-100);border-radius:10px;padding:14px 16px;margin:0;}
.faq-item h3{display:block;color:var(--green-900);margin:0 0 6px;font-size:1rem;font-weight:700;}
.faq-item p{margin:0;color:var(--text);font-size:0.97rem;line-height:1.6;}
@media(min-width:900px){
.faq-grid{grid-template-columns:1fr 1fr;gap:14px;}
}
/* Widening the article to the page width lets the two-column grids use the
space, but running prose has to stay at a readable measure, or a line of FAQ
answer runs to roughly 150 characters at 1920. Scoped to wide screens, so
nothing at or below 900px is touched. */
@media(min-width:900px){
.plant-intro{max-width:70ch;}
/* The card fills the panel like every other card; it is the text inside it
that needs the measure. Capping the card itself stopped the pest panel at
58% of the container while Informations and Entretien filled it. */
.pest-item > div{max-width:72ch;}
/* A 260px photo beside a 900px text column read as an afterthought once the
article got wider. */
.plant-media{flex:0 0 320px;}
}
.verdict-box{flex:2;min-width:260px;border-radius:10px;padding:14px 18px;font-weight:600;line-height:1.5;}
.verdict-good{background:#e3f5e9;color:var(--green-900);border:1px solid var(--green-300);}
.verdict-bad{background:#fff5f0;color:#a8452a;border:1px solid #f0c4b0;}
/* Shared with Plant Sitters. The marketplace's own listing/search/map styles
moved to the .mk-* block at the end of this file. */
.listing-location{font-size:0.85rem;color:var(--muted);margin:0 0 6px;}
.listing-contact{display:inline-block;background:var(--green-500);color:#fff;text-decoration:none;padding:8px 16px;border-radius:8px;font-weight:600;font-size:0.9rem;border:1px solid transparent;cursor:pointer;}
.listing-contact:hover{background:var(--green-700);}
.listing-contact.message-toggle{background:transparent;color:var(--green-700);border-color:var(--green-500);}
.listing-contact.message-toggle:hover{background:var(--green-100);}
.no-results{text-align:center;color:var(--muted);padding:30px 0;}
.market-post-cta{background:var(--green-100);border-radius:var(--radius);padding:30px;text-align:center;margin:30px 0;}
.market-post-cta h2{color:var(--green-900);margin:0 0 8px;}
.market-post-cta p{color:var(--green-700);margin:0 0 16px;}
.sitters-wrap{padding-bottom:60px;}
.sitters-gate{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;text-align:center;}
.sitters-gate p{color:var(--green-700);margin-bottom:16px;}
.sitters-coming-soon{font-size:0.85rem;color:#8aa392;margin-top:14px;margin-bottom:0;}
.auth-form{display:flex;flex-direction:column;gap:10px;max-width:360px;margin:0 auto;text-align:left;}
.auth-form label{font-size:0.85rem;font-weight:600;color:var(--green-700);}
.auth-form input{padding:10px 12px;border:1px solid var(--green-300);border-radius:8px;font-size:1rem;}
.auth-form button[type="submit"]{margin-top:6px;padding:12px;border:none;border-radius:8px;cursor:pointer;}
.auth-toggle-link{background:none;border:none;color:var(--green-700);text-decoration:underline;cursor:pointer;font-size:0.9rem;padding:4px;}
.auth-message{margin-top:14px;color:var(--green-700);font-weight:600;}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:360px;margin:0 auto 12px;padding:12px;border:1px solid var(--green-300);border-radius:8px;background:#fff;color:var(--text);font-weight:600;font-size:0.95rem;cursor:pointer;}
.oauth-btn:hover{border-color:var(--green-500);background:var(--green-100);}
.oauth-btn-apple{background:#000;color:#fff;border-color:#000;}
.oauth-btn-apple:hover{background:#222;border-color:#222;}
.oauth-divider{max-width:360px;margin:0 auto 12px;text-align:center;color:#8aa392;font-size:0.85rem;}
.oauth-switch{margin-top:16px;font-size:0.9rem;color:var(--green-700);}
.oauth-switch a{color:var(--green-700);font-weight:700;text-decoration:underline;}
#auth-back{display:block;margin-bottom:14px;}
.sitters-account-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:var(--green-900);font-weight:600;}
.link-btn{background:none;border:none;color:var(--green-700);text-decoration:underline;cursor:pointer;}
.sitters-post-panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:30px;}
.sitters-post-panel h2{margin:0 0 14px;color:var(--green-900);}
.dashboard-info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--green-100);}
.dashboard-info-row:last-of-type{border-bottom:none;}
#dashboard-signout{margin-top:14px;}
.dashboard-message-card,.dashboard-listing-card{background:var(--green-100);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.dashboard-message-card .meta,.dashboard-listing-card .meta{font-size:0.8rem;color:var(--green-700);font-weight:600;margin-bottom:4px;}
.dashboard-source-tag{font-weight:400;font-style:italic;opacity:0.8;}
.listing-form{display:flex;flex-direction:column;gap:10px;}
.listing-form-row{display:flex;gap:14px;flex-wrap:wrap;}
.listing-form-row[hidden]{display:none;}
.sitters-role-intro{max-width:640px;margin:0 0 24px;color:var(--green-700);}
.form-select-label{font-size:0.85rem;font-weight:700;color:var(--green-700);margin:0 0 4px;}
.care-type-row{margin-top:10px;padding-top:14px;border-top:1px dashed var(--green-300);}
#care-type-row[hidden]{display:none;}
#compensation-row[hidden]{display:none;}
.role-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.role-option{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--green-300);border-radius:10px;cursor:pointer;background:#fff;font-weight:500;}
.role-option input{position:absolute;opacity:0;pointer-events:none;}
.role-option:hover{border-color:var(--green-500);}
.role-option:has(input:checked){border-color:var(--green-500);background:var(--green-100);}
.role-option-label{color:var(--green-900);}
.role-option-desc{font-size:0.8rem;color:var(--text);opacity:0.75;font-weight:400;}
#always-available-row{margin-top:10px;}
#always-available-row[hidden]{display:none;}
#dates-section{margin-top:10px;padding-top:14px;border-top:1px dashed var(--green-300);display:flex;flex-direction:column;gap:14px;}
#dates-section[hidden]{display:none;}
.date-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px;}
.date-field label{font-size:0.85rem;font-weight:600;color:var(--green-700);}
#listing-photo-row{display:flex;flex-direction:column;gap:6px;}
#listing-photo-row[hidden]{display:none;}
#listing-photo-row label{font-size:0.85rem;font-weight:600;color:var(--green-700);}
.sitter-listing-photo{width:100%;max-height:220px;object-fit:cover;border-radius:10px;margin-bottom:10px;}
.listing-form-row label{display:flex;align-items:center;gap:6px;font-weight:500;}
.listing-form input,.listing-form textarea{padding:10px 12px;border:1px solid var(--green-300);border-radius:8px;font-size:1rem;flex:1;min-width:140px;}
.listing-form textarea{min-height:80px;resize:vertical;}
.form-safety-note{font-size:0.8rem;color:#a8452a;margin:4px 0 0;}
.autocomplete-field{position:relative;flex:1;min-width:140px;}
.autocomplete-field input{width:100%;}
.autocomplete-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--green-300);border-radius:8px;box-shadow:var(--shadow);max-height:220px;overflow-y:auto;z-index:20;margin-top:4px;}
.autocomplete-suggestions[hidden]{display:none;}
.autocomplete-option{padding:8px 12px;cursor:pointer;font-size:0.95rem;}
.autocomplete-option:hover,.autocomplete-option.active{background:var(--green-100);}
.location-note{font-size:0.8rem;color:#a8452a;margin:-4px 0 0;}
.listing-form button[type="submit"]{align-self:flex-start;padding:10px 20px;border:none;border-radius:8px;cursor:pointer;margin-top:6px;}
.sitter-listing-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;}
.sitter-listing-meta{font-size:0.75rem;font-weight:700;color:var(--green-700);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:6px;}
.sitter-listing-card h3{margin:0 0 6px;color:var(--green-900);}
.sitter-poster{font-size:0.85rem;color:var(--muted);font-style:italic;}
.message-box{margin-top:10px;display:flex;flex-direction:column;gap:8px;}
.message-box textarea{padding:10px;border:1px solid var(--green-300);border-radius:8px;min-height:60px;}
.message-box button{align-self:flex-start;padding:8px 16px;border:none;border-radius:8px;cursor:pointer;}
@media(max-width:480px){
.header-inner{gap:8px;padding:12px 14px;}
/* 4:1, so 28px tall is 112px wide, close to what the old wordmark took. */
.brand img{height:28px;}
.login-btn{padding:8px 14px;font-size:0.85rem;}
#lang-select{padding:4px 6px;font-size:0.85rem;}
}
/* Very narrow phones. The German header was already 5px over at this width
with the old text wordmark, and the logo is wider than that text was, so
the row is tightened here rather than only giving back what the logo took. */
@media(max-width:400px){
.header-inner{gap:6px;padding:10px 10px;}
.brand img{height:24px;}
.login-btn{padding:7px 11px;font-size:0.8rem;}
}
@media(max-width:600px){
.info-grid,.season-grid,.tools-columns{grid-template-columns:1fr;}
.hero h1{font-size:1.6rem;}
.search-tabs{flex-direction:column;}
.plant-top{flex-direction:column;gap:12px;}
.plant-media{flex:0 0 auto;width:100%;}
.plant-hero-figure img{max-height:240px;}
.role-options{grid-template-columns:1fr;}
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* --- Homepage -------------------------------------------------------------
Three bands: a calm hero that leads with the search, three feature cards,
then the library. The old page opened with an ad slot and a pale gradient
headline; this leads with the sentence that says what the site is for. */
.home-hero{
/* --hero-focus-* now default in :root, shared with the other two heroes.
The phone override further down still belongs to this one. */
position:relative;isolation:isolate;overflow:hidden;
background:
radial-gradient(1100px 420px at 50% -120px, rgba(76,154,99,.16), transparent 70%),
linear-gradient(180deg,var(--green-100),var(--cream) 78%);
/* The bottom padding is the landing strip for the feature cards, which sit
half over the hero. Content centres inside the padding box, so it ends up
above the cards rather than behind them.
140px here, with the cards pulled back 54, left 144px of empty hero
between the search box and the first card. The cards are rows now rather
than tall tiles, so the strip they need is the overlap plus a normal
gap: 82 - 54 = 28px of padding below the content, which measures 38px of
air between the search box and the first card. */
padding:52px 20px 82px;text-align:center;
}
/* Without a minimum the hero is only as tall as its text, and object-fit:cover
then crops a 16:9 photograph to a thin mid-band, losing the doorway and the
view through it. Capped so the hero never eats the fold. */
.home-hero.has-media{
/* Scales with WIDTH, not just viewport height. object-fit:cover scales the
photo to the hero's width, so on a 2000px screen a fixed 460px hero showed
only 41% of the image height: a thin slice through the palest part of the
frame, with the foliage cropped away above and below. Tying the floor to
vw keeps roughly half the picture visible as the screen grows, and the vh
term stops it eating a short viewport. */
/* Raised again: at 30vw the cards had eaten the lower third and the box was
only as tall as its own text, so object-fit:cover cropped the photograph
to a thin pale band and the plants at top and bottom were lost. The vw
term keeps roughly half the frame visible as the screen grows; the vh term
stops it swallowing a short viewport. */
/* Tightened again, and this is the half of the gap the padding did not
explain. A floor above what the content actually needs is slack, and with
the column pinned to the top every pixel of it fell into the gap below
the search box: 515px of floor against 409px of content was 106px of
empty hero nobody asked for. The floor now sits under the content at the
sizes that matter, so it only does its original job, which is keeping the
photograph from being cropped to a band on a screen whose text happens to
be short. The cap is what a very wide screen gets, and there the gap grows
again by whatever the cap exceeds the content. */
min-height:clamp(340px, min(26vw, 48vh), 420px);
/* Aligned to the top, not centred. Centring split all the slack between the
header and the cards, so the taller the hero got the further the headline
fell: 127px of gap at 1440px wide and over 200px at 1920px. The gap is now
just the top padding, at any hero height, and the extra height goes to the
photograph below the search box where it was wanted. */
display:flex;align-items:flex-start;
}
/* The picture is absent until artwork is dropped into assets/hero/, and the
gradient above is the hero on its own until then. */
/* Positive z-index, not negative: .home-hero sets isolation:isolate, and a
negative-index child of a stacking context paints behind that element own
background, which hid the photo under the fallback gradient. */
/* The one rule that puts hero artwork behind a hero. The homepage, the
marketplace and Plant Sitting all carry it; what differs between them is
where the crop is centred and whether the image is lifted, and that stays
with each hero below. It was two near-identical copies before Plant Sitting
needed a third. */
.hero-media{position:absolute;inset:0;z-index:0;display:block;}
/* The crop and the lift are part of the artwork, not of one page's layout, so
they live with the picture and every hero gets the same ones. The focus
point is a pair of variables (defaults in :root) so a hero can nudge its
crop without re-exporting anything; the homepage does, on phones.
The saturation and contrast were the homepage's alone, which is most of why
the marketplace hero looked bleached beside it: same photograph, served
flat. */
.hero-media img{
width:100%;height:100%;object-fit:cover;display:block;
object-position:var(--hero-focus-x) var(--hero-focus-y);
filter:saturate(1.22) contrast(1.06);
}
/* Readability scrim. Veils the CENTRE only, not the whole frame: the bright
sea-and-sky band through the middle is where the headline and search sit and
carries little detail, while the interior plants on the left and the terrace
on the right are the point of the picture and stay clear. Veiling toward
cream rather than black keeps the dark-green type legible without restyling
it. An even wash strong enough for the dark foliage at the column edges
washed the whole photograph out. */
.home-hero.has-media::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:
/* Measured in px from the centre, not in percentages. The text column is a
fixed 760px, so a percentage band tracks the viewport instead of the
text: at 2000px it veiled 74% of the width to protect a column occupying
38% of it, bleaching the Monstera and the terrace at the edges. Anchored
to the column, the veil stays the same real width at every screen size
and the planted edges stay clear. */
/* A soft halo for the space labels, which sit on bare photograph with no
panel behind them. It is a wash with no edge, not a container. */
radial-gradient(ellipse 320px 210px at calc(50% + 530px) 44%,
rgba(250,248,242,.92), rgba(250,248,242,.55) 52%, rgba(250,248,242,0) 100%),
/* Lightened from .88/.62: that veil was tuned for a shorter hero where the
photograph was a backdrop. With the taller frame it bleached the picture
to near-white. The headline is #1b3a2b, dark enough to carry a thinner
scrim; the sweep behind these numbers is in the commit message. */
/* Falls off to nothing at ±570 rather than ±640, so the monstera on the
left and the terrace on the right sit on clear photograph instead of
the tail of the veil. The centre is unchanged. */
linear-gradient(90deg,
rgba(250,248,242,0) calc(50% - 570px),
rgba(250,248,242,.54) calc(50% - 470px),
rgba(250,248,242,.82) calc(50% - 400px),
rgba(250,248,242,.82) calc(50% + 400px),
rgba(250,248,242,.54) calc(50% + 470px),
rgba(250,248,242,0) calc(50% + 570px)),
linear-gradient(180deg,
rgba(250,248,242,.16) 0%, rgba(250,248,242,.04) 40%,
rgba(250,248,242,.22) 72%, rgba(250,248,242,.62) 88%,
rgba(250,248,242,.95) 99%, rgba(250,248,242,1) 100%);
}
/* The headline column stays centred on the hero. It was briefly a two-column
grid, which pushed the text 132px left of centre and out from under the
scrim, dropping the headline to 2.4:1 over the dark monstera. The space
labels float beside the column instead, so they cost the text nothing. */
.home-hero-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.home-hero-main{min-width:0;}
/* Space labels ------------------------------------------------------------- */
/* Deliberately not links. There are no balcony or garden destination pages, so
these say what the site covers rather than promising a page that is not
there. See the comment on the markup in scripts/build.js. */
.home-hero-title{
margin:0 0 14px;color:var(--green-900);font-size:clamp(2rem,4.6vw,3rem);
line-height:1.1;letter-spacing:-0.02em;font-weight:800;
}
.home-hero-sub{
margin:0 auto 30px;max-width:60ch;color:#4d5f55;
font-size:clamp(1rem,1.7vw,1.13rem);line-height:1.6;
}
/* Search sits on white against the tinted hero, so it reads as the one thing
to do here rather than as another band of colour. */
.home-search{
display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto;
background:#fff;border:1px solid #e3eae5;border-radius:999px;padding:6px 8px 6px 20px;
box-shadow:0 10px 30px rgba(27,58,43,.10);
}
/* The ring itself comes from .wp-focus-ring at the end of the file, so that
every search on the site shows the same one. This only tints the border. */
.home-search:focus-within{border-color:var(--green-500);}
/* ".home-search-icon{color:#8b9991}" was here. The icon is .wp-search-icon
now, in the site green, like the pin and the calendar on the other cards. */
.home-search-input{padding:14px 0;font-size:1rem;}
.home-search-results{max-width:560px;margin:10px auto 0;text-align:left;}
.home-search-results:not(:empty){
background:#fff;border:1px solid #e3eae5;border-radius:16px;padding:8px;
box-shadow:0 10px 30px rgba(27,58,43,.10);
}
/* Feature cards ------------------------------------------------------------ */
/* The cards straddle the bottom edge of the hero, roughly half over the
photograph and half on the cream below it, so the two read as one
composition instead of a band and then a separate section. The hero's
bottom padding is what keeps its own content clear of them. */
/* Two cards, not three. Stretching the pair across the full 1240px container
left each one wide and empty, so they keep roughly the width they had as a
trio and sit centred under the hero instead. */
/* Two cards, side by side from 768px and stacked below it. They used to be
tall centred tiles: a 76px icon, centred copy and a call-to-action pill,
which came to 260px of height for two sentences. They are rows now, icon
left and text right, and the pill is gone because the whole card was
already the link to the same place. */
.home-features{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
/* Wider than the 840px the tall cards used. A row gives the text about
260px at that width, which is three lines of the German marketplace
sentence; 920 brings it to two without touching the type size. */
max-width:920px;margin:-54px auto 0;position:relative;z-index:2;
}
/* Dark green, not white. These two cards are the only route from the homepage
to the marketplace and the sitting board, and as white cards on a page of
white cards they read as two more plant tiles. Green makes them the one
thing under the hero that is not the library.
The colour is --green-800, which this pair is what added to the palette: it
sits between the 900 the header ink uses and the 700 of the buttons. White
on it measures 8.1:1, and the paragraph at 88% white 6.5:1, both well over
the 4.5:1 the text has to clear. */
.home-feature{
display:flex;align-items:center;text-align:left;gap:14px;min-height:44px;
background:var(--green-800);border:1px solid rgba(255,255,255,.14);
border-radius:16px;padding:20px;
box-shadow:0 14px 32px rgba(27,58,43,.22);transition:.18s;
}
.home-feature:hover{
transform:translateY(-2px);box-shadow:0 18px 40px rgba(27,58,43,.3);
border-color:rgba(255,255,255,.28);
}
/* White, not --green-500: the focus ring has to be visible against the card
it sits on, and a mid green on a dark green is the one pair that fails. */
.home-feature:focus-visible{outline:3px solid #fff;outline-offset:3px;}
/* The tile, and the line icon centred in it.
White at 16% rather than the pale --green-100 the rest of the page uses for
icons, because on this card that pale tile would be the brightest thing on
it. 48px, with the icon at 28 inside it: the icon used to be a bitmap that
filled the tile edge to edge, and a line drawing at that size reads as a
diagram rather than an icon. The padding the tile had is the gap now, so
centring does the work instead of a fixed inset. */
.home-feature-tile{
flex:none;width:48px;height:48px;border-radius:13px;
background:rgba(255,255,255,.16);
display:flex;align-items:center;justify-content:center;
}
/* currentColor on the svg, so this one rule sets the stroke. */
.home-feature-icon{flex:none;width:28px;height:28px;color:#fff;}
.home-feature-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.home-feature h2{margin:0;font-size:1.02rem;font-weight:800;color:#fff;letter-spacing:-0.01em;}
.home-feature p{margin:0;font-size:0.84rem;line-height:1.45;color:rgba(255,255,255,.88);max-width:none;}
/* The chevron points down everywhere else on the site; here it is the "go"
affordance left over from the pill, so it is turned to point along the
reading direction and nudges on hover. */
.home-feature-go{
flex:none;width:17px;height:17px;color:#fff;
transform:rotate(-90deg);transition:transform .18s;
}
.home-feature:hover .home-feature-go{transform:translateX(3px) rotate(-90deg);}
/* Library ------------------------------------------------------------------ */
.home-library{margin-top:44px;padding-bottom:64px;}
/* The category hero carries the same search box as the homepage. .hero gives
its a 30px bottom margin, which is the gap above the field. */
.category-search{margin-top:4px;}
/* A listing page has no "Browse the library" heading above the chips: the