/** * V3 DESIGN OVERLAY — additive tokens (Phase 1) * ============================================ * Loaded after v3-storefront.css / v3-auth.css / v3-cart.css. * Source: approved v0_design/css/design-tokens.css at d19bc3c. * * HARD RULES * - Never redefine a frozen/runtime token (--bg, --card, --line, --ink, --muted, * --radius, --radius-sm, --radius-pill, --shadow-sm/md/lg, --container, * --green*, --berry*, --sale*, --header-h, --catbar-h, --searchbar-h, * --discountbar-h, --chrome-top). * - Only add NEW `--d-*` tokens, consumed by v3-design-overrides.css and the * component-owned v3-c-*.css files (DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10). * - One central dark-green system. Do not invent extra green literals here. */ :root { /* Editorial hero (guest home) */ --d-hero-ink: #0f1712; --d-hero-ink-soft: rgba(255, 255, 255, 0.78); --d-hero-eyebrow: rgba(255, 255, 255, 0.72); --d-hero-min-h: min(78vh, 660px); /* Redesign surfaces — quiet neutrals that sit on the frozen --bg canvas */ --d-surface-quiet: #f3f5f0; --d-surface-media: #eef2ea; /* Resting form-control border. The frozen --line token (~1.1:1 against white) fails WCAG 1.4.11 non-text contrast on a plain white field. This mixes the frozen --muted token toward white instead of inventing a new color. CP-008: lightened from 72% (~3.4:1) to 68% (~3.13:1) — still a safe margin over the 3:1 minimum, but visibly lighter, per feedback that the 72% line read as too dark/thick. The control stays unmistakably identifiable through the layered depth below, not through border weight alone. */ /* DG-FORM-FIELD-VISUAL-02 (concept F2, Mark) — the "lifted" field: a hairline edge plus a soft layered shadow instead of CP-008's 3:1 mixed border. The field is identified by the lift, the label above it and the 12px-rounded white surface; the focus/error states carry the strong colour edges. */ --d-field-border: rgba(23, 29, 24, 0.12); --d-field-border-hover: rgba(23, 29, 24, 0.26); /* CP-008 premium field system: readable-but-quieter input text (Mark asked for something near #555; measured ~7.45:1 on white, comfortably above the 4.5:1 text minimum), plus a restrained multi-layer "quiet depth" at rest — a soft inner top highlight and a barely-there ambient shadow, translating the Stripe/GOV.UK research notes into the existing green/neutral system rather than copying their visual language. */ --d-field-text: var(--ink, #171d18); /* DG-FORM-FIELD-VISUAL-01 — entered text is now the canonical ink (17.1:1, supersedes CP-008's #555 per Mark), so the placeholder can read as clearly lighter: --muted mixed toward white exactly like --d-field-border above, 85% -> ~#6f7972, 4.5:1 on white and ~3.8x lighter than the entered text. Mark 2026-09-26: lighter still, 75% -> ~#808982, ~3.6:1 (above the 3:1 non-text/large minimum; placeholder is a hint only). Standard text-entry geometry: F2 11px/14px padding (DG-FORM-FIELD-VISUAL-02 superseded 01's 14px/14px), 14px text; touch-first devices get 16px (the size below which iOS Safari zooms the page on focus; the viewport meta allows user zoom, so that zoom is not suppressed and must not be triggered). */ /* DG-MODAL-STABILITY-DEPTH-01 — one depth for every V2 popup panel. Four layers, all outside the white panel (never over its content): a crisp 1px edge, a close contact shadow, a deep drop, and a wide zero-offset dark glow so the panel reads as floating on all sides against the translucent dark backdrop — not only underneath. */ --d-modal-depth: 0 0 0 1px rgba(10, 14, 11, 0.14), 0 2px 8px rgba(10, 14, 11, 0.26), 0 24px 56px -10px rgba(10, 14, 11, 0.62), 0 0 110px 18px rgba(5, 8, 6, 0.55); /* DG-NAV-HEADER-SEARCH-01 — portal domain under the shared logo (~10:1 on white). */ --d-brand-domain: #1f3f73; --d-field-placeholder: color-mix(in srgb, var(--muted, #566159) 75%, #fff); --d-field-pad: 11px 14px; --d-field-font-size: 14px; --d-field-shadow-rest: 0 1px 2px rgba(23, 29, 24, 0.06), 0 4px 12px -4px rgba(23, 29, 24, 0.10); --d-field-shadow-hover: 0 1px 2px rgba(23, 29, 24, 0.07), 0 6px 14px -4px rgba(23, 29, 24, 0.14); /* DG-FORM-FIELD-VISUAL-02 — F2 geometry and states. 11px/14px padding with a 44px minimum height (touch target). Icons sit 13px from the edge; text next to an icon starts 40px in. Error = 2px red edge drawn as 1px border + 1px inset ring, so the field never shifts when an error appears. */ --d-field-radius: 12px; --d-field-min-h: 50px; --d-field-icon-inset: 13px; --d-field-icon-gap: 40px; --d-field-ok-border: color-mix(in srgb, var(--d-status-ok, #4BB543) 45%, #fff); --d-field-error-ring: inset 0 0 0 1px var(--d-status-fail, #a3160f), 0 0 0 3px rgba(163, 22, 15, 0.07), 0 4px 12px -4px rgba(163, 22, 15, 0.18); /* Field icons (decorative, CSS background layers — no markup). Colours keep the original placeholder tone (#6f7972; the placeholder itself is lighter since 2026-09-26), the deep focus green #1f6a1a (the former --d-status-ok; kept for icons, which need 3:1 — the brighter status green of DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 does not reach it) and --d-status-fail (#a3160f); data URIs cannot read custom properties. */ --d-field-ico-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7972' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --d-field-ico-user-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --d-field-ico-user-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3160f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); --d-field-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7972' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --d-field-ico-mail-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --d-field-ico-mail-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3160f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); --d-field-ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f7972' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); --d-field-ico-lock-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); --d-field-ico-lock-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3160f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); --d-field-ico-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6a1a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --d-field-ico-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3160f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); /* Focus: WCAG 2.2 Focus Appearance / GOV.UK guidance both hold that a diffuse glow alone is not a sufficient indicator — there also needs to be a solid, unmistakable core. --green-soft here is a flat 3px ring (not blurred), so it already satisfies that; the blurred outer term is purely the extra "premium halo" layered on top of it, never a replacement for it. */ /* DG-FORM-FIELD-VISUAL-02 — F2 focus: the solid green border is the core indicator; a 3px soft ring plus a green-tinted lift sit around it. */ --d-field-glow: 0 0 0 3px rgba(47, 143, 39, 0.14), 0 6px 16px -8px rgba(47, 143, 39, 0.30); /* Large frame radius. FINAL V0 app/globals.css line 42 defines `--radius-lg: 22px` for its composed frames (dashboard hero, customer offer, catalog cards). V2's frozen token set stops at `--radius`, so earlier overlay rules referenced a `var(--radius-lg)` that never existed: an unresolved custom property makes the whole `border-radius` declaration invalid, which is why the member-home dashboard and customer-offer frames rendered with square corners. Adding it as a `--d-*` token keeps the frozen names untouched. */ --d-radius-lg: 22px; /* Pack grouping (basket + program) — the "contents of a pack" surface */ --d-pack-tint: #f6faf3; --d-pack-guide: #cfe4c2; /* Reward accent */ --d-reward-gold: #e0a92b; /* ================================================================= DARK GREEN SURFACES — one central system ================================================================= Every dark green surface in later phases is built from this ramp and the two composite gradients below. Nothing in the overlay may invent another dark green. */ --d-green-900: #1f4a1b; /* frame anchor — darkest tier in use */ --d-green-800: #245c1f; --d-green-700: #2b6925; --d-green-600: #33762d; /* lightest tier — panel highlight */ /* DG-INFO-GREEN-PANEL-GRADIENT-32A (Mark): the one background of the green info-page panels (hero copy panels, bottom / contact bands, legal and What's New heroes), used only inside those info selectors (v3-design-overrides.css, v3-whats-new.css) and the legal-page .info-hero (v3-storefront.css). DG-INFO-PANEL-DEPTH-32B (Mark: still too subtle): a deeper dark end and a clearly lighter end, a 135deg depth from top-left to bottom-right. Contrast (white / the 80% white body copy): #133410 13.3:1 / 9.1:1; at the copy columns' furthest text the panel is no lighter than #2b6925 (6.7:1 / 4.9:1); #3b8034 (4.8:1) only meets the outer corner. */ --d-info-panel-gradient: linear-gradient(135deg, #133410 0%, var(--d-green-900) 26%, var(--d-green-700) 70%, #3b8034 100%); /* 32B: a soft, restrained lift for the same panels — a faint top edge plus a short close shadow and a wide, low one. */ --d-info-panel-shadow: inset 0 1px 0 rgba(154, 219, 124, 0.38), 0 2px 6px rgba(16, 40, 14, 0.10), 0 16px 34px -14px rgba(16, 40, 14, 0.42); /* Large surfaces that hold light cards inside them. */ --d-surface-frame: linear-gradient(148deg, var(--d-green-900) 0%, var(--d-green-800) 54%, var(--d-green-700) 100%); /* Small components whose own content is the contrast (gate, footer, reward band) — starts one tier lighter so the component never reads as a slab. */ --d-surface-panel: linear-gradient(160deg, var(--d-green-600) 0%, var(--d-green-700) 56%, var(--d-green-800) 100%); /* Light catching the surface. Layer above a surface gradient. */ --d-surface-glow: radial-gradient(100% 135% at 86% -8%, rgba(154, 219, 124, 0.26) 0%, rgba(154, 219, 124, 0) 60%); --d-surface-glow-left: radial-gradient(88% 125% at 6% 0%, rgba(154, 219, 124, 0.26) 0%, rgba(154, 219, 124, 0) 60%); --d-green-inset: rgba(10, 36, 14, 0.3); --d-green-hairline: rgba(255, 255, 255, 0.18); --d-green-hairline-strong: rgba(168, 226, 142, 0.44); --d-green-ink: #17381a; /* the ramp as ink on light surfaces */ /* Icon/accent green on a dark green surface. Final V0 uses this one value for `.auth-points svg` and the same family of on-dark ticks. */ --d-on-green-accent: #9adb7c; /* Quiet elements sitting on a dark green surface */ --d-on-green-quiet: rgba(255, 255, 255, 0.15); --d-on-green-quiet-edge: rgba(255, 255, 255, 0.46); --d-on-green-ink: rgba(233, 246, 226, 0.92); --d-on-green-recessed: rgba(10, 36, 14, 0.28); /* ================================================================= DARK-SURFACE BUTTONS — one central treatment ================================================================= A CTA on a dark surface needs physical cues or it reads as a flat sticker: a lit top edge, a shaded bottom edge, and a shadow dark enough to ground it against green. Both faces share the same lift so a cream CTA and a berry CTA feel like the same family of button. */ --d-btn-face: linear-gradient(180deg, #ffffff 0%, #f0f7e9 100%); --d-btn-face-hover: linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #f8fcf4 100%); --d-btn-berry-face: linear-gradient(180deg, var(--berry-bright) 0%, var(--berry) 100%); --d-btn-berry-face-hover: linear-gradient(180deg, #c62690 0%, var(--berry-bright) 100%); --d-btn-lift: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 0 rgba(16, 48, 20, 0.12), 0 10px 22px rgba(9, 32, 13, 0.36), 0 2px 4px rgba(9, 32, 13, 0.24); --d-btn-lift-hover: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(16, 48, 20, 0.14), 0 15px 30px rgba(9, 32, 13, 0.42), 0 3px 6px rgba(9, 32, 13, 0.26); --d-btn-lift-active: inset 0 2px 4px rgba(16, 48, 20, 0.18), 0 4px 10px rgba(9, 32, 13, 0.3); --d-btn-berry-lift: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(58, 4, 40, 0.3), 0 10px 22px rgba(9, 32, 13, 0.4), 0 2px 4px rgba(9, 32, 13, 0.26); --d-btn-berry-lift-hover: inset 0 1px 0 rgba(255, 255, 255, 0.36), inset 0 -2px 0 rgba(58, 4, 40, 0.32), 0 15px 30px rgba(9, 32, 13, 0.46), 0 3px 6px rgba(9, 32, 13, 0.28); /* Cream/light surfaces used *inside* dark green framing */ --d-cream: #fbfdf8; /* Form canvas — a tinted bed so white inputs read as raised surfaces */ --d-form-canvas: #f2f5ee; --d-form-canvas-edge: #dfe6d6; --d-input-border: #c3cebb; --d-input-border-strong: #9fb096; /* Saving / discount chips. Frozen already uses `--sale` red for struck prices and media badges, so savings stay in the red family and berry stays reserved for actions. Chip % comes from V2 discount, not 15. */ --d-save-tint: #fdeaea; --d-save-edge: #f3c9c7; --d-save-ink: #9c110d; /* Customer-price surface (PDP + category card) */ --d-price-edge: #cde3c1; /* Free starter set / free delivery reward band in the basket */ --d-kit-locked-top: #f7fbf4; --d-kit-locked-low: #e7f2df; --d-kit-locked-edge: #cfe3c2; --d-kit-track: #cbdec1; --d-kit-track-edge: #a8c39a; /* DG-HERO-CATALOG-CART-POLISH-30A (Mark): ONE sticky offset for the cart and the address (checkout) order summaries — the live bottom of the visible sticky chrome as v3-anchor-scroll.js measures it into --v2-anchor-offset (sale bar + header + search + category row / berry dock, + 12px; set on ) plus 4px, i.e. 16px under whatever chrome is actually stuck. Measured 2026-10-05: 114px chrome → 131px at ≥1100px, 69px → 85px at 1024px on the cart page (so no fixed 115px). Without the script: the chrome top + the category row. --header-h alone (68px) put the summary under the category row. */ --d-summary-sticky-top: calc(var(--v2-anchor-offset, calc(var(--chrome-top, 0px) + var(--catbar-h, 0px) + 12px)) + 4px); /* Status surfaces for the payment family (related, distinct per outcome) */ /* DG-STOREFRONT-MICRO-POLISH-CART-FLAVOURS-30 (Mark): brighter status colours. Consumers are borders only (the pack flavour select's still-to-choose / chosen border and, mixed 45% with white, the valid-field border); no text or icon uses them. Measured on #fff: #4BB543 2.63:1 and #ED7014 3.03:1 (on the error wash #fff4f3: 2.44:1 / 2.81:1) — below the WCAG 1.4.11 3:1 for a non-text indicator except #ED7014 on white. The state is never colour-only: the select's own text shows "Choose …" vs the chosen flavour. Neither is approved for text or icons (4.5:1 needed). */ --d-status-ok: #4BB543; --d-status-ok-tint: #eaf6e4; --d-status-wait: #ED7014; --d-status-wait-tint: #fdf3e0; --d-status-fail: #a3160f; --d-status-fail-tint: #fdeceb; --d-status-off: #4a5650; --d-status-off-tint: #eef0ec; /* Editorial typography */ --d-tracking-tight: -0.02em; --d-tracking-eyebrow: 0.09em; /* ================================================================= FINAL VARIANT A — homepage brand-bridge frame (2026-08-23 freeze) ================================================================= Additive. Separate from --d-green-* so large frames can read fresh while tiles keep the deeper ramp. --d-brand-frame-mid is the contrast floor behind body copy — do not lighten it. Exact values from the freeze / Mark Phase 1 brief. */ --d-brand-frame-light: #49a02c; --d-brand-frame-mid: #2f7a1f; --d-brand-frame-deep: #1c4d14; --d-brand-edge-green: #5ab120; --d-brand-glow-green: rgba(40, 192, 73, 0.34); --d-brand-glow-green-soft: rgba(90, 177, 32, 0.32); --d-brand-hairline-berry: rgba(233, 165, 209, 0.38); --d-brand-frame-guest: radial-gradient(54% 60% at 4% 106%, var(--d-brand-glow-green) 0%, transparent 62%), radial-gradient(62% 76% at 90% -10%, var(--d-brand-glow-green-soft) 0%, transparent 64%), radial-gradient(125% 125% at 74% -4%, var(--d-brand-frame-light) 0%, var(--d-brand-frame-mid) 38%, var(--d-brand-frame-deep) 100%); --d-brand-frame-dash: radial-gradient(46% 56% at 2% 104%, var(--d-brand-glow-green) 0%, transparent 60%), radial-gradient(50% 64% at 95% -12%, var(--d-brand-glow-green-soft) 0%, transparent 62%), radial-gradient(120% 120% at 88% -10%, var(--d-brand-frame-light) 0%, var(--d-brand-frame-mid) 46%, var(--d-brand-frame-deep) 100%); } /* DG-FORM-FIELD-VISUAL-01 — iOS focus-zoom guard for the standard text-entry size. Touch-first devices (phones, tablets) get 16px; mouse/trackpad devices at any width keep Mark's 14px. Keyed on input capability, not viewport width, because the zoom happens on every iOS device (iPad too) and never on desktop browsers. */ @media (hover: none) and (pointer: coarse) { :root { --d-field-font-size: 16px; } } /* DG-PRODUCT-PACK-EXPERIENCE-RUNTIME-10 — the accepted 09 / 09A component system (v3-c-*.css). Berry = guest unlock/register · green = member commerce · white ghost = secondary (Quick view) · green link = details · calm amber = availability status · red = a missing required choice only. */ :root { --d-c-quiet: #f6f8f4; --d-c-line-strong: #cfd8cb; --d-c-ink-2: #3c4740; --d-c-berry-line: #efcfe3; --d-c-berry-wash: #fbeef6; --d-c-amber: #8a5a00; --d-c-amber-soft: #fff6e2; --d-c-amber-line: #f1dfb2; --d-c-error: #b3261e; --d-c-error-soft: #fff4f3; --d-c-error-line: #e6b7b2; --d-c-choice-line: #7a3a12; /* CORRECTION-11A — the one blue for inline text links in components (6.7:1 on white). */ --d-c-link: #1d4ed8; --d-c-card-foot-gap: 10px; --d-c-shadow-card: 0 1px 2px rgba(23, 29, 24, 0.05), 0 8px 24px -12px rgba(23, 29, 24, 0.18); --d-c-focus: 0 0 0 3px #fff, 0 0 0 5px var(--green-dark); --d-c-page-max: 1200px; --d-c-gutter: clamp(16px, 3vw, 32px); --d-c-band-space: clamp(40px, 6vw, 72px); --d-c-secnav-h: 52px; } /* DG-MOBILE-STOREFRONT-POLISH-20 (Mark) — the PDP section navigation is hidden on phones, so the sticky band heads, the order summary and every scroll margin stop reserving its height there. */ @media (max-width: 720px) { :root { --d-c-secnav-h: 0px; } } /* DG-MOBILE-STOREFRONT-POLISH-20G (Mark) — one storefront rhythm for the homepage and the info pages (Help, Contact, How it works and its goal pages, Mark's Story, FAQ, Become a Member, Recipes). Change these values here and every one of those pages follows: the space between sections, the two title sizes (a section title and a title inside a card or panel) and the spacing inside the hero and closing-band copy. */ :root { --d-section-gap: 76px; --d-h2-section: clamp(28px, 3.2vw, 38px); --d-h2-card: clamp(22px, 2vw, 24px); --d-copy-title-gap: 16px; --d-copy-para-gap: 12px; --d-copy-actions-gap: 24px; } @media (max-width: 720px) { :root { --d-section-gap: 64px; } } /* DG-MOBILE-STOREFRONT-POLISH-20O (Mark) — on phones every popup (product, pack, sign-in/register/password, coupon, HerbaPoints, ingredients, welcome) sits at the top with this fixed gap (plus the notch's safe area); tablets and desktop keep them centred. 20P (Mark): 12px, the same as the popups' sides and bottom. */ :root { --d-modal-top-phone: 12px; } /* DG-INFO-PANEL-DEPTH-32B (Mark) — on phones the info panels are narrow and tall and the photo fills their lower part, so the same depth runs steeper and reaches its lighter green sooner: the dark-to-light change stays visible inside the copy. */ @media (max-width: 720px) { :root { --d-info-panel-gradient: linear-gradient(160deg, #133410 0%, var(--d-green-900) 18%, var(--d-green-800) 44%, var(--d-green-700) 74%, var(--d-green-600) 100%); } }