/* ============================================================
greenhouse.css — Snap Plant Greenhouse Studio Design System
Fonts: Caveat (handwritten) + DM Sans (body)
Palette: earthy greens, terra, bark, soil
============================================================ */
/* Fonts loaded via tags in HTML for performance.
@import is serial and blocks rendering; is parallel. */
/* ============================================================
CSS Custom Properties
============================================================ */
:root {
/* Palette */
--earth: #f4efe4;
--earth-hi: #f9f5ec;
--bark: #d8ceb8;
--soil: #2a2318;
--soil-soft: #5a4a3a;
--soil-mute: #7a6a4a;
--forest: #2a4a1a;
--leaf: #8abf6a;
--leaf-hi: #5a8a3a;
--terra: #8a5d2e;
--terra-hi: #c8a06a;
/* Fonts */
--handwritten: 'Caveat', cursive;
--sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Rhythm */
--max-width: 1200px;
--section-pad-y: 72px;
--section-pad-x: 24px;
}
/* ============================================================
1. Reset
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
img,
video,
svg {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
list-style: none;
}
/* ============================================================
2. Body Defaults
============================================================ */
body {
background-color: var(--earth);
color: var(--soil);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
3. Layout
============================================================ */
.container {
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--section-pad-x);
padding-right: var(--section-pad-x);
}
.section {
padding-top: var(--section-pad-y);
padding-bottom: var(--section-pad-y);
}
/* ============================================================
4. Typography
============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--handwritten);
color: var(--soil);
line-height: 1.2;
}
h1 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
}
h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 600;
}
h3 {
font-size: 22px;
font-weight: 600;
}
h4 {
font-size: 18px;
font-weight: 500;
font-family: var(--sans);
}
h5 {
font-size: 14px;
font-weight: 600;
font-family: var(--sans);
text-transform: uppercase;
letter-spacing: 0.08em;
}
p {
font-family: var(--sans);
margin-bottom: 1em;
}
p:last-child {
margin-bottom: 0;
}
.accent {
color: var(--terra);
font-style: italic;
}
/* ============================================================
5. Buttons
============================================================ */
.btn-green,
.btn-outline,
.btn-light {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
border-radius: 999px;
padding: 10px 22px;
cursor: pointer;
border: 2px solid transparent;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-green {
background-color: var(--forest);
color: var(--earth);
border-color: var(--forest);
}
.btn-green:hover,
.btn-green:focus-visible {
background-color: var(--leaf-hi);
border-color: var(--leaf-hi);
color: var(--earth);
}
.btn-outline {
background-color: transparent;
color: var(--forest);
border-color: var(--forest);
}
.btn-outline:hover,
.btn-outline:focus-visible {
background-color: var(--forest);
color: var(--earth);
}
.btn-light {
background-color: var(--earth);
color: var(--forest);
border-color: var(--earth);
}
.btn-light:hover,
.btn-light:focus-visible {
background-color: var(--earth-hi);
border-color: var(--earth-hi);
}
.btn-lg {
font-size: 12px;
padding: 14px 32px;
letter-spacing: 1.5px;
}
/* ============================================================
6. Nav
============================================================ */
.nav {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--earth-hi);
border-bottom: 1px solid var(--bark);
}
.nav-strip {
height: 4px;
background: linear-gradient(
to right,
var(--forest) 0%,
var(--leaf) 40%,
var(--terra-hi) 70%,
var(--terra) 100%
);
}
.nav-inner {
display: flex;
align-items: center;
gap: 24px;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding: 12px var(--section-pad-x);
}
.nav-logo {
font-family: var(--handwritten);
font-size: 28px;
font-weight: 700;
color: var(--forest);
text-decoration: none;
flex-shrink: 0;
margin-right: auto;
}
.nav-logo:hover {
color: var(--leaf-hi);
}
.nav-links {
display: flex;
align-items: center;
gap: 20px;
}
.nav-links a {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--soil-mute);
text-decoration: none;
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--forest);
}
.nav-cta {
flex-shrink: 0;
}
/* Mobile nav toggle */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
flex-direction: column;
gap: 5px;
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--forest);
border-radius: 1px;
transition: all 0.2s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
@media (max-width: 768px) {
.nav-toggle {
display: flex;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--earth-hi);
border-bottom: 1px solid var(--bark);
flex-direction: column;
padding: 16px var(--section-pad-x);
gap: 12px;
z-index: 99;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.nav.open .nav-links {
display: flex;
}
.nav-inner {
gap: 12px;
}
/* Collapse inline grids on mobile */
.section [style*="grid-template-columns:repeat(3"],
.section [style*="grid-template-columns: repeat(3"] {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* ============================================================
7. Footer
============================================================ */
.footer {
background-color: var(--earth-hi);
border-top: 1px solid var(--bark);
padding-top: 48px;
padding-bottom: 0;
}
.footer-inner {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
max-width: var(--max-width);
margin-left: auto;
margin-right: auto;
padding: 0 var(--section-pad-x) 40px;
}
.footer-brand {
font-family: var(--handwritten);
font-size: 24px;
font-weight: 700;
color: var(--forest);
margin-bottom: 6px;
}
.footer-tag {
font-family: var(--handwritten);
font-size: 14px;
color: var(--leaf);
}
.footer-col h5,
.footer-heading {
font-family: var(--sans);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--leaf-hi);
margin-bottom: 12px;
}
/* ============================================================
Breadcrumb Navigation
============================================================ */
.breadcrumb {
font-family: var(--sans);
font-size: 12px;
color: var(--soil-mute);
margin-bottom: 16px;
}
.breadcrumb a {
color: var(--forest);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb .sep {
margin: 0 6px;
color: var(--bark);
}
.breadcrumb [aria-current="page"] {
color: var(--soil-soft);
}
.footer-col a {
display: block;
font-family: var(--sans);
font-size: 13px;
color: var(--soil-mute);
text-decoration: none;
margin-bottom: 8px;
transition: color 0.2s ease;
}
.footer-col a:hover {
color: var(--forest);
}
.footer-bottom {
text-align: center;
font-family: var(--sans);
font-size: 11px;
color: var(--soil-mute);
padding: 16px var(--section-pad-x);
border-top: 1px solid var(--bark);
max-width: 100%;
}
@media (max-width: 768px) {
.footer-inner {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
}
/* ============================================================
8. Cards
============================================================ */
.card {
background-color: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 12px;
padding: 20px;
transition: border-color 0.2s ease;
}
.card:hover {
border-color: var(--leaf);
}
/* ============================================================
9. Upload Drop Zone
============================================================ */
.drop-zone {
border: 2px dashed var(--leaf);
background-color: var(--earth-hi);
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.drop-zone.dragover {
border-color: var(--forest);
background-color: #f2ede0;
}
.drop-zone-icon {
font-size: 32px;
margin-bottom: 12px;
line-height: 1;
}
.drop-zone-primary {
font-family: var(--handwritten);
font-size: 22px;
font-weight: 600;
color: var(--forest);
margin-bottom: 6px;
}
.drop-zone-secondary {
font-family: var(--sans);
font-size: 12px;
color: var(--soil-mute);
}
/* ============================================================
10. Step Numbers
============================================================ */
.step-num {
width: 40px;
height: 40px;
border: 2px solid var(--leaf);
border-radius: 50%;
font-family: var(--handwritten);
font-size: 22px;
font-weight: 700;
color: var(--forest);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* ============================================================
11. Feature & Guide Cards
============================================================ */
.feat {
background-color: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 12px;
padding: 24px 20px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feat:hover {
border-color: var(--leaf);
box-shadow: 0 4px 16px rgba(42, 74, 26, 0.08);
}
.feat-icon {
font-size: 28px;
margin-bottom: 12px;
line-height: 1;
}
.feat h3 {
font-family: var(--handwritten);
font-size: 22px;
color: var(--forest);
margin-bottom: 8px;
}
.feat p {
font-family: var(--sans);
font-size: 14px;
color: var(--soil-soft);
line-height: 1.6;
}
.guide {
background-color: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 14px;
transition: border-color 0.2s ease;
}
.guide:hover {
border-color: var(--leaf);
}
.guide-icon {
font-size: 24px;
flex-shrink: 0;
line-height: 1;
}
.guide h3 {
font-family: var(--handwritten);
font-size: 20px;
color: var(--forest);
margin-bottom: 4px;
}
.guide p {
font-family: var(--sans);
font-size: 13px;
color: var(--soil-soft);
line-height: 1.55;
}
/* ============================================================
12. Testimonial
============================================================ */
.testimonial {
text-align: center;
background-color: var(--earth-hi);
border-top: 1px solid var(--bark);
border-bottom: 1px solid var(--bark);
padding: 48px var(--section-pad-x);
}
.testimonial blockquote {
font-family: var(--handwritten);
font-size: 28px;
font-weight: 500;
color: var(--soil);
line-height: 1.35;
max-width: 680px;
margin: 0 auto 16px;
}
.testimonial blockquote::before {
content: '\201C';
}
.testimonial blockquote::after {
content: '\201D';
}
.testimonial cite {
font-family: var(--sans);
font-size: 11px;
font-style: normal;
color: var(--soil-mute);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ============================================================
13. CTA Band
============================================================ */
.cta-band {
background-color: var(--forest);
color: var(--earth);
text-align: center;
padding: var(--section-pad-y) var(--section-pad-x);
}
.cta-band h2 {
font-family: var(--handwritten);
color: var(--earth);
margin-bottom: 16px;
}
.cta-band p {
color: var(--bark);
max-width: 560px;
margin: 0 auto 28px;
font-size: 15px;
}
/* ============================================================
14. Post Cards (Blog Index)
============================================================ */
.post-card {
background-color: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 12px;
padding: 24px;
transition: border-color 0.2s ease;
display: flex;
flex-direction: column;
gap: 8px;
}
.post-card:hover {
border-color: var(--leaf);
}
.post-card .tag {
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--leaf-hi);
}
.post-card h2 {
font-family: var(--handwritten);
font-size: 24px;
font-weight: 600;
color: var(--soil);
line-height: 1.25;
}
.post-card h2 a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease;
}
.post-card h2 a:hover {
color: var(--forest);
}
.post-card p {
font-family: var(--sans);
font-size: 14px;
color: var(--soil-soft);
line-height: 1.6;
margin-bottom: 0;
}
.post-card .meta {
font-family: var(--handwritten);
font-size: 12px;
font-style: italic;
color: var(--soil-mute);
margin-top: auto;
padding-top: 8px;
}
/* ============================================================
15. Article / Prose
============================================================ */
.article {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding: 48px var(--section-pad-x);
}
.article h1 {
font-family: var(--handwritten);
font-size: 44px;
font-weight: 700;
color: var(--soil);
line-height: 1.15;
margin-bottom: 24px;
}
.article h2 {
font-family: var(--handwritten);
font-size: 28px;
font-weight: 600;
color: var(--soil);
margin-top: 40px;
margin-bottom: 16px;
padding-top: 32px;
}
.article h2:not(:first-of-type) {
border-top: 1px solid var(--bark);
}
.article h3 {
font-family: var(--handwritten);
font-size: 22px;
font-weight: 600;
color: var(--soil);
margin-top: 28px;
margin-bottom: 12px;
}
.article p {
font-family: var(--sans);
font-size: 17px;
color: var(--soil-soft);
line-height: 1.75;
margin-bottom: 1.2em;
}
.article a {
color: var(--forest);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.article a:hover {
color: var(--leaf-hi);
}
.article blockquote {
border-left: 4px solid var(--leaf);
background-color: var(--earth-hi);
padding: 16px 20px;
margin: 28px 0;
border-radius: 0 8px 8px 0;
font-family: var(--handwritten);
font-style: italic;
font-size: 22px;
color: var(--soil);
line-height: 1.4;
}
.article code {
font-family: 'Courier New', Courier, monospace;
font-size: 0.88em;
background-color: var(--earth-hi);
border: 1px solid var(--bark);
padding: 2px 6px;
border-radius: 4px;
color: var(--soil-soft);
}
.article pre {
background-color: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 8px;
padding: 20px;
margin: 24px 0;
overflow-x: auto;
}
.article pre code {
background: none;
border: none;
padding: 0;
font-size: 14px;
line-height: 1.6;
}
.article ul,
.article ol {
list-style: initial;
padding-left: 28px;
margin-bottom: 1.2em;
}
.article ol {
list-style: decimal;
}
.article li {
font-family: var(--sans);
font-size: 17px;
color: var(--soil-soft);
line-height: 1.75;
margin-bottom: 0.4em;
}
.article strong {
font-weight: 700;
color: var(--soil);
}
.article img {
border-radius: 10px;
margin: 24px auto;
}
/* ============================================================
16. Responsive — 768px breakpoint
============================================================ */
@media (max-width: 768px) {
:root {
--section-pad-y: 44px;
--section-pad-x: 16px;
}
h1 {
font-size: clamp(30px, 8vw, 44px);
}
h2 {
font-size: clamp(24px, 6vw, 32px);
}
.footer-inner {
grid-template-columns: repeat(2, 1fr);
}
.article {
padding: 32px var(--section-pad-x);
}
.article h1 {
font-size: 36px;
}
.article h2 {
font-size: 24px;
}
.article p,
.article li {
font-size: 16px;
}
.testimonial blockquote {
font-size: 22px;
}
.cta-band {
padding: 40px 16px;
}
}
/* ============================================================
17. Focus & Active States
============================================================ */
/* Visible focus ring for keyboard navigation */
:focus-visible {
outline: 2px solid var(--forest);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--forest);
outline-offset: 2px;
}
/* FAQ accordion buttons */
.faq-q:focus-visible {
outline: 2px solid var(--forest);
outline-offset: 2px;
}
/* Nav links get a slightly more prominent indicator */
.nav-links a:focus-visible {
outline: 2px solid var(--leaf);
outline-offset: 4px;
}
/* Active nav link */
.nav-links a[aria-current="page"] {
color: var(--forest);
font-weight: 700;
border-bottom: 2px solid var(--leaf);
padding-bottom: 2px;
}
/* Upload zone keyboard focus */
.drop-zone:focus-within,
.drop-zone:focus {
border-color: var(--forest);
box-shadow: 0 0 0 3px rgba(42, 74, 26, 0.2);
}
/* ============================================================
18. Reduced Motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
18. Skip Nav
============================================================ */
.skip-nav {
position: absolute;
top: -40px;
left: 0;
background: var(--forest);
color: var(--earth);
padding: 8px 16px;
text-decoration: none;
z-index: 9999;
font-size: 14px;
border-radius: 0 0 8px 0;
}
.skip-nav:focus {
top: 0;
}
/* ============================================================
19. Hero Extras
============================================================ */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--forest);
color: var(--earth);
border-radius: 100px;
padding: 6px 16px;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 18px;
}
.hero-note {
font-family: var(--handwritten);
font-size: 16px;
color: var(--leaf);
margin-top: 18px;
}
.lead {
font-size: 16px;
color: var(--soil-soft);
max-width: 520px;
margin: 0 auto 24px;
line-height: 1.55;
}
.hero-btns {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 8px;
}
/* ============================================================
20. Processing Spinner
============================================================ */
.processing {
display: none;
text-align: center;
padding: 48px 16px;
max-width: 600px;
margin: 0 auto;
}
.processing.active {
display: block;
}
.spinner {
width: 48px;
height: 48px;
border: 3px solid var(--bark);
border-top-color: var(--leaf);
border-radius: 50%;
animation: gh-spin 0.8s linear infinite;
margin: 0 auto 16px;
}
@keyframes gh-spin {
to { transform: rotate(360deg); }
}
/* ============================================================
21. Result Section
============================================================ */
.result {
display: none;
max-width: 600px;
margin: 0 auto;
}
.result.active {
display: block;
}
.result-header {
text-align: center;
padding: 32px 0;
}
.result-header .common-name {
font-family: var(--handwritten);
font-size: 36px;
font-weight: 700;
color: var(--soil);
letter-spacing: -0.01em;
}
.result-header .sci-name {
font-style: italic;
color: var(--soil-mute);
font-size: 15px;
margin-top: 4px;
}
.result-header .plant-type {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 600;
color: var(--forest);
background: rgba(42, 74, 26, 0.08);
border: 1px solid rgba(42, 74, 26, 0.2);
padding: 3px 12px;
border-radius: 100px;
margin-top: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.confidence-badge {
display: inline-flex;
margin-left: 8px;
font-size: 10px;
padding: 2px 8px;
border-radius: 100px;
font-weight: 600;
}
.confidence-badge.high {
background: rgba(138, 191, 106, 0.15);
color: var(--leaf-hi);
}
.confidence-badge.medium {
background: rgba(176, 122, 74, 0.12);
color: var(--terra);
}
.confidence-badge.low {
background: rgba(220, 38, 38, 0.1);
color: #b91c1c;
}
.result-card {
background: var(--earth-hi);
border: 1px solid var(--bark);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 12px;
}
.result-card h3 {
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--soil-mute);
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.result-card h3 svg {
color: var(--leaf-hi);
}
.result-card p {
font-size: 14px;
color: var(--soil-soft);
line-height: 1.7;
margin-bottom: 0;
}
.care-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
}
.care-item {
background: var(--earth);
border: 1px solid var(--bark);
border-radius: 8px;
padding: 12px;
}
.care-item .cl {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--soil-mute);
margin-bottom: 4px;
}
.care-item .cv {
font-size: 13px;
font-weight: 600;
color: var(--soil);
}
.toxicity-safe { color: var(--leaf-hi); }
.toxicity-danger { color: #b91c1c; font-weight: 700; }
.toxicity-mild { color: var(--terra); }
.mushroom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.lookalikes-warning {
background: rgba(185, 28, 28, 0.06);
border: 1px solid rgba(185, 28, 28, 0.25);
border-radius: 8px;
padding: 12px 16px;
margin-top: 10px;
font-size: 13px;
line-height: 1.5;
color: #b91c1c;
}
.fun-fact {
background: rgba(138, 191, 106, 0.12);
border: 1px solid rgba(90, 138, 58, 0.25);
border-radius: 12px;
padding: 20px;
margin-bottom: 12px;
font-size: 14px;
line-height: 1.6;
color: var(--soil-soft);
}
.fun-fact strong {
color: var(--leaf-hi);
}
.try-again {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--forest);
color: var(--earth);
font-family: var(--sans);
font-weight: 600;
font-size: 13px;
border: none;
border-radius: 100px;
cursor: pointer;
margin: 24px auto;
transition: background-color 0.2s ease;
}
.try-again:hover {
background: var(--leaf-hi);
}
/* ============================================================
22. FAQ
============================================================ */
.faq-item {
border-bottom: 1px solid var(--bark);
}
.faq-q {
width: 100%;
background: none;
border: none;
text-align: left;
padding: 16px 0;
color: var(--soil);
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.2s ease;
}
.faq-q:hover {
color: var(--forest);
}
.faq-q::after {
content: '+';
font-size: 20px;
color: var(--soil-mute);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 12px;
}
.faq-item.open .faq-q::after {
transform: rotate(45deg);
color: var(--forest);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq-item.open .faq-a {
max-height: 300px;
}
.faq-a p {
color: var(--soil-soft);
font-size: 14px;
line-height: 1.7;
padding-bottom: 16px;
margin-bottom: 0;
}
/* ============================================================
24. Cookie Consent Banner
============================================================ */
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--forest);
color: var(--earth);
padding: 16px var(--section-pad-x);
z-index: 9999;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.cookie-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.cookie-inner p {
font-size: 13px;
color: var(--earth);
margin: 0;
flex: 1;
min-width: 200px;
}
.cookie-inner a {
color: var(--leaf);
text-decoration: underline;
}
.cookie-btns {
display: flex;
gap: 8px;
}
/* ============================================================
23. Responsive extras
============================================================ */
@media (max-width: 768px) {
.care-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.care-grid {
grid-template-columns: 1fr;
}
section[style*="grid-template-columns:repeat(3"] {
/* feature/guide grids go single column on narrow screens */
}
}