/*
* Divisi Brand CSS
* Sits on top of Bootstrap 5.3 — override only what differs from vanilla Bootstrap.
*
* Brand palette (per brand guide):
* Primary: #00A85A · #0CEA7B
* Secondary: #6D6E70 · #000000
*
* Brand fonts (self-hosted from brand kit):
* Heading: Qualy (primary font)
* Body: MazzardH (secondary font)
*/
/* ── 0a. Self-hosted brand fonts ────────────────────────────────────────── */
@font-face {
font-family: 'Qualy';
src: url("../fonts/Qualy.7bd158242f2c.woff2") format('woff2');
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MazzardH';
src: url("../fonts/MazzardH-Regular.5bc51c70507c.woff2") format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MazzardH';
src: url("../fonts/MazzardH-Medium.330b61616737.woff2") format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MazzardH';
src: url("../fonts/MazzardH-SemiBold.fec8f79a3547.woff2") format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MazzardH';
src: url("../fonts/MazzardH-Bold.663f35e00d91.woff2") format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ── 0b. Design tokens ──────────────────────────────────────────────────── */
:root {
/* Brand fonts */
--dv-font-heading: 'Qualy', system-ui, -apple-system, 'Segoe UI', sans-serif;
--dv-font-body: 'MazzardH', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Brand palette — exact values from brand guide */
--dv-green: #00A85A; /* Primary green */
--dv-green-light: #0CEA7B; /* Primary accent green */
--dv-green-dark: #007a45; /* Functional hover shade — not a structural colour */
--dv-green-pale: #f0faf5; /* Reserved for hero & on-brand accent sections */
--dv-gray: #6D6E70; /* Brand secondary gray */
/* Text */
--dv-text: #000000; /* Brand black */
--dv-text-muted: #505153; /* Accessible secondary text — 5.8:1 on white (WCAG AA all sizes) */
/* Surfaces */
--dv-surface: #ffffff;
--dv-surface-alt: #f5f5f5; /* Neutral alternating section background */
/* Card / outline system — modern retro: crisp borders, no soft glow */
--dv-card-border: rgba(0, 0, 0, 0.80);
--dv-card-shadow: none;
--dv-card-hover-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85);
/* Accessibility */
--dv-min-touch: 48px; /* Minimum touch target height (WCAG 2.5.8) */
/* Bootstrap token overrides */
--bs-primary: var(--dv-green);
--bs-primary-rgb: 0, 168, 90;
--bs-link-color: var(--dv-green);
--bs-link-color-rgb: 0, 168, 90;
--bs-link-hover-color: var(--dv-green-dark);
--bs-body-bg: #ffffff;
--bs-body-font-family: var(--dv-font-body);
--bs-body-font-size: 1.0625rem; /* 17px — rural readability baseline */
--bs-body-line-height: 1.75; /* generous leading for low-literacy readers */
--bs-body-color: var(--dv-text);
--bs-secondary-color: var(--dv-text-muted);
--bs-border-color: rgba(0, 0, 0, 0.2);
--bs-border-radius: 0.5rem;
--bs-border-radius-lg: 0.75rem;
--bs-border-radius-xl: 1rem;
}
/* ── Dark mode token overrides ──────────────────────────────────────────── */
/* Deep forest + brand green. base.html sets data-bs-theme on from the
device's prefers-color-scheme (no in-page switcher); dark is the default. */
[data-bs-theme="dark"] {
--dv-green-pale: #16241b; /* Deep green-tinted panel */
--dv-gray: #9a9b9d;
--dv-text: #f2f4f2;
--dv-text-muted: #b9c0bb; /* green-grey secondary text */
--dv-surface: #121a15; /* forest surface */
--dv-surface-alt: #0f1611; /* deeper alternating band */
--dv-card-border: rgba(255, 255, 255, 0.14);
--dv-card-shadow: none;
--dv-card-hover-shadow: 3px 3px 0 rgba(12, 234, 123, 0.25);
--bs-body-bg: #0b110d; /* brand canvas: near-black with a green heart */
--bs-body-color: var(--dv-text);
--bs-secondary-color: var(--dv-text-muted);
--bs-border-color: rgba(255, 255, 255, 0.14);
--bs-link-color: var(--dv-green-light);
--bs-link-hover-color: var(--dv-green-light);
}
/* Deep brand-green band — the download anchor's moment. Rich, not loud:
the app splash's forest gradient with the site's normal light text.
Always dark, so it carries its own dark tokens for when the page is light. */
.dv-band-green {
--dv-text: #f2f4f2;
--dv-text-muted: #b9c0bb;
--dv-card-border: rgba(255, 255, 255, 0.14);
--bs-body-bg: #0b110d;
--bs-secondary-color: var(--dv-text-muted);
background: linear-gradient(180deg, #103322 0%, #0b2416 60%, #0a1f13 100%);
border-top: 1px solid rgba(12, 234, 123, 0.18);
border-bottom: 1px solid rgba(12, 234, 123, 0.18);
color: var(--dv-text);
}
/* ── 1. Base typography ─────────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
}
body {
font-family: var(--dv-font-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Wide-gutter rows (.g-5) and decorative tilts overhang the viewport by a
few px on phones; the overhang is never content, so clip it. */
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
font-family: var(--dv-font-heading);
font-weight: 800;
letter-spacing: -0.02em;
}
/* ── 2. Brand utility classes ───────────────────────────────────────────── */
.text-brand {
color: var(--dv-green) !important;
}
.bg-brand {
background-color: var(--dv-green) !important;
}
.border-brand {
border-color: var(--dv-green) !important;
}
/* ── 3. Navbar ──────────────────────────────────────────────────────────── */
.dv-navbar {
padding-top: 1rem;
padding-bottom: 1rem;
background: #000000; /* Brand black — per brand guide */
box-shadow: 0 2px 0 rgba(0, 168, 90, 0.35); /* Green rule under pure black reads crisper */
transition: box-shadow 0.2s ease;
}
.dv-navbar .navbar-brand {
font-size: 1.35rem;
font-weight: 800;
color: var(--dv-green-light); /* bright accent on dark bg */
display: flex;
align-items: center;
gap: 0.5rem;
}
.dv-navbar .navbar-brand img {
width: 36px;
height: 36px;
object-fit: contain;
}
.dv-navbar .navbar-brand:hover {
color: #fff;
text-decoration: none;
}
.dv-navbar .nav-link {
font-weight: 600;
color: rgba(255, 255, 255, 0.78) !important; /* light on dark bg */
padding: 0.5rem 0.9rem;
min-height: 44px;
display: flex;
align-items: center;
border-radius: 0.4rem;
transition: background-color 0.15s ease, color 0.15s ease;
}
.dv-navbar .nav-link:hover,
.dv-navbar .nav-link.active {
color: #fff !important;
background-color: rgba(0, 168, 90, 0.18); /* green-tinted hover on dark */
}
/* Mobile drawer border */
.dv-navbar .dv-nav-drawer-border {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ── 4. Buttons ─────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary {
background-color: var(--dv-green);
border-color: var(--dv-green);
color: #04170d; /* black-on-green, like the app — and AA contrast */
font-weight: 700;
min-height: var(--dv-min-touch);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background-color: var(--dv-green-light);
border-color: var(--dv-green-light);
color: #04170d;
}
.btn-primary:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.4);
}
/* Bootstrap's .btn-outline-primary, form focus rings, checkboxes and pagination
bake in their own blue and ignore --bs-primary — rebrand them to Divisi green
here so the whole site is on-brand (not just .btn-primary). */
.btn-outline-primary {
--bs-btn-color: var(--dv-green);
--bs-btn-border-color: var(--dv-green);
--bs-btn-hover-bg: var(--dv-green);
--bs-btn-hover-border-color: var(--dv-green);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--dv-green-dark);
--bs-btn-active-border-color: var(--dv-green-dark);
--bs-btn-disabled-color: var(--dv-green);
--bs-btn-disabled-border-color: var(--dv-green);
--bs-btn-focus-shadow-rgb: 0, 168, 90;
}
[data-bs-theme="dark"] .btn-outline-primary {
--bs-btn-color: var(--dv-green-light);
--bs-btn-border-color: var(--dv-green-light);
--bs-btn-hover-bg: var(--dv-green-light);
--bs-btn-hover-border-color: var(--dv-green-light);
--bs-btn-hover-color: #06241a;
--bs-btn-active-bg: var(--dv-green-light);
--bs-btn-active-border-color: var(--dv-green-light);
--bs-btn-active-color: #06241a;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: var(--dv-green);
box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.25);
}
.form-check-input:checked {
background-color: var(--dv-green);
border-color: var(--dv-green);
}
.pagination {
--bs-pagination-color: var(--dv-green);
--bs-pagination-hover-color: var(--dv-green-dark);
--bs-pagination-focus-color: var(--dv-green-dark);
--bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(0, 168, 90, 0.25);
--bs-pagination-active-bg: var(--dv-green);
--bs-pagination-active-border-color: var(--dv-green);
}
/* ── 5. App store buttons ───────────────────────────────────────────────── */
.store-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.35rem;
border-radius: 999px;
border: 1.5px solid rgba(255, 255, 255, 0.30);
background: #0b0b0c;
color: #fff !important;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
min-height: var(--dv-min-touch);
transition: border-color 0.15s ease, transform 0.15s ease;
}
.store-btn:hover {
border-color: var(--dv-green-light);
transform: translateY(-1px);
text-decoration: none;
}
.store-btn i {
font-size: 1.5rem;
flex-shrink: 0;
}
.store-btn-play i {
color: var(--dv-green-light);
}
.store-btn-apple i {
color: #fff;
}
/* Footer variant — shares the row evenly whether the container has it stacked
(xs, lg) or side by side (sm, md). flex:1 1 0 + min-width:0 rather than
width:100%, so two of them in a flex row divide the space instead of
overflowing it. nowrap because "Download on App Store" breaking over two lines
is what made the tablet footer look broken; the clamp shrinks the label instead.
The vw term is capped at the lg column width (~300px) rather than the viewport,
so a wide screen doesn't push the label past a narrow stacked column. */
.store-btn-footer {
flex: 1 1 0;
min-width: 0;
justify-content: center;
white-space: nowrap;
padding-inline: 0.9rem;
font-size: clamp(0.78rem, 1.6vw, 0.9rem);
}
/* Detected platform button — bigger, ringed; the other one fades back */
.store-btn-featured {
padding: 0.85rem 1.55rem;
font-size: 1.05rem;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 20px rgba(0, 0, 0, 0.18);
}
.store-btn-featured:hover {
opacity: 1;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 8px 24px rgba(0, 0, 0, 0.24);
}
/* ── 6. Hero section ────────────────────────────────────────────────────── */
.dv-hero {
background-color: var(--bs-body-bg);
padding: 5rem 0 4rem;
position: relative;
overflow: hidden;
}
.dv-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
}
.dv-hero-headline {
font-size: clamp(2rem, 5vw, 3.25rem);
line-height: 1.15;
font-weight: 900;
color: var(--dv-text);
}
.dv-hero-headline span {
color: var(--dv-green);
}
/* Stat pills */
.dv-stat-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--bs-body-bg);
border: 1px solid var(--dv-card-border);
border-radius: 2rem;
padding: 0.4rem 0.9rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--dv-text);
box-shadow: var(--dv-card-shadow);
}
.dv-stat-pill .dv-stat-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dv-green);
flex-shrink: 0;
}
/* Trust strip */
/* ── Form controls — crisp, app-like visibility in both themes ─────────── */
.form-control,
.form-select,
.input-group-text {
border-color: rgba(0, 0, 0, 0.45);
background-color: var(--dv-surface);
color: var(--dv-text);
}
.form-control:focus,
.form-select:focus {
border-color: var(--dv-green);
box-shadow: 0 0 0 0.25rem rgba(0, 168, 90, 0.18);
background-color: var(--dv-surface);
color: var(--dv-text);
}
.form-control::placeholder {
color: var(--dv-text-muted);
opacity: 0.75;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
border-color: rgba(255, 255, 255, 0.35);
background-color: #161616;
}
/* ── Article share row — labelled pills, platform-tinted on hover ──────── */
.dv-share-label {
display: block;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--dv-text-muted);
margin-bottom: 0.6rem;
}
.dv-share-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.dv-share-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1.5px solid var(--dv-card-border);
background: var(--dv-surface);
color: var(--dv-text);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease;
min-height: var(--dv-min-touch);
}
.dv-share-btn i {
font-size: 1.15rem;
color: var(--dv-green);
}
[data-bs-theme="dark"] .dv-share-btn i {
color: var(--dv-green-light);
}
.dv-share-btn:hover {
transform: translateY(-1px);
border-color: var(--dv-green);
color: var(--dv-text);
}
.dv-share-btn--wa:hover { border-color: #25d366; }
.dv-share-btn--wa i { color: #25d366; }
.dv-share-btn--fb:hover { border-color: #1877f2; }
.dv-share-btn--fb i { color: #1877f2; }
[data-bs-theme="dark"] .dv-share-btn--fb i { color: #6ea8ff; }
/* ── Tag badge — readable green on the pale surface in either theme ────── */
.dv-tag-badge {
background: var(--dv-green-pale);
color: var(--dv-green-dark);
font-weight: 600;
}
[data-bs-theme="dark"] .dv-tag-badge {
color: var(--dv-green-light);
}
/* ── Accessibility: black-on-green buttons (matches the app) + visible
prose links (never colour-only) ──────────────────────────────────────── */
p a:not(.btn),
.dv-faq-body a,
.dv-article-body a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Brand icon (inline SVG sprite, templates/includes/_icons.html) ────── */
.dv-icon {
width: 1.25em;
height: 1.25em;
vertical-align: -0.22em;
flex-shrink: 0;
}
.dv-icon--lg {
width: 2rem;
height: 2rem;
}
/* ── App-UI fragments (WhatsApp-style cropped showcase pieces) ─────────── */
.dv-frag {
display: block;
width: 100%;
height: auto;
border-radius: 0.9rem;
border: 1.5px solid var(--dv-card-border);
background: var(--dv-surface);
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.10);
}
[data-bs-theme="dark"] .dv-frag {
box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.06);
}
.dv-frag-stack {
max-width: 360px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
.dv-frag--tilt-l {
transform: rotate(-1.6deg) translateX(-4%);
}
.dv-frag--tilt-r {
transform: rotate(1.4deg) translateX(4%);
}
/* Phones: the collaged stacks read as clutter at 375px — show one straight
fragment per stack, sized like an app-screenshot chip. */
@media (max-width: 767.98px) {
.dv-frag-stack {
max-width: 300px;
}
.dv-frag-stack > :nth-child(n+2) {
display: none;
}
.dv-frag--tilt-l,
.dv-frag--tilt-r {
transform: none;
}
/* Wide pillar cards (meaning teaser, "works offline") stack vertically */
.dv-about-pillar-card--wide {
flex-direction: column;
}
}
/* ── Per-section conversion row ────────────────────────────────────────── */
.dv-section-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
}
/* ── Hero collage — broken-up app UI, arranged with intent ─────────────── */
.dv-hero-collage {
position: relative;
max-width: 480px;
margin: 0 auto;
display: grid;
gap: 1.1rem;
}
.dv-collage-a {
width: 88%;
transform: rotate(-1.6deg);
}
.dv-collage-b {
width: 78%;
margin-left: auto;
margin-top: -2.2rem;
transform: rotate(1.8deg);
}
.dv-collage-c {
width: 62%;
margin-left: 6%;
margin-top: -1.4rem;
transform: rotate(-1.2deg);
}
/* ── Phone widget: selected-country flag over a compact select ─────────── */
.dv-phone-widget {
position: relative;
}
.dv-phone-widget .dv-phone-country {
flex: 0 0 4.6rem;
max-width: 4.6rem;
color: transparent; /* the flag overlay is the visible value */
}
.dv-phone-widget .dv-phone-flag {
position: absolute;
left: 0.8rem;
top: 50%;
transform: translateY(-50%);
z-index: 5;
font-size: 1.15rem;
line-height: 1;
pointer-events: none;
}
/* ── Scroll FAB — the app's nudge, on the web ──────────────────────────── */
.dv-scroll-fab {
position: fixed;
left: 50%;
bottom: 0.9rem;
transform: translateX(-50%);
z-index: 1040;
width: 40px;
height: 40px;
border: 1px solid var(--dv-card-border);
border-radius: 50%;
background: rgba(18, 26, 21, 0.78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--dv-green-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.dv-scroll-fab:hover {
transform: translateX(-50%) scale(1.06);
background: rgba(18, 26, 21, 0.95);
}
.dv-scroll-fab i {
transition: transform 0.25s ease;
}
.dv-scroll-fab.is-up i {
transform: rotate(180deg);
}
/* ── Scroll-reveal (progressive: visible without JS; base.html observes) ── */
.dv-reveal--init {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.dv-reveal--init.is-in {
opacity: 1;
transform: none;
}
.dv-reveal-d1 { transition-delay: 0.08s; }
.dv-reveal-d2 { transition-delay: 0.16s; }
.dv-reveal-d3 { transition-delay: 0.24s; }
/* ── 7. Section spacing ─────────────────────────────────────────────────── */
.section-py {
padding: 5rem 0;
}
.section-py-sm {
padding: 3.5rem 0;
}
/* ── 8. Feature cards ───────────────────────────────────────────────────── */
.dv-feature-card {
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
padding: 2rem;
height: 100%;
background: var(--dv-surface);
box-shadow: var(--dv-card-shadow);
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.dv-feature-card:hover {
border-color: var(--dv-text);
box-shadow: var(--dv-card-hover-shadow);
transform: none;
}
.dv-feature-card .dv-icon-wrap {
width: 52px;
height: 52px;
border-radius: 0.75rem;
background: var(--dv-green-pale);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
font-size: 1.5rem;
color: var(--dv-green);
flex-shrink: 0;
}
.dv-feature-card h3 {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.dv-feature-card p {
font-size: 1rem;
color: var(--dv-text-muted);
margin: 0;
line-height: 1.7;
}
.dv-coming-soon {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(0, 168, 90, 0.12);
color: var(--dv-green);
padding: 0.2em 0.55em;
border-radius: 0.3rem;
vertical-align: middle;
margin-left: 0.35rem;
}
/* ── 9. Steps (How it works) ────────────────────────────────────────────── */
.dv-steps-section {
background: var(--dv-surface-alt);
}
.dv-steps-row {
display: flex;
align-items: flex-start;
}
.dv-step-item {
flex: 1;
min-width: 0;
}
.dv-step-num {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--dv-green);
color: #fff;
font-family: var(--dv-font-heading);
font-size: 1.5rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.dv-step-connector {
flex: 0 0 2.5rem;
height: 2px;
background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
margin-top: 2rem; /* aligns to vertical centre of 64px circle */
opacity: 0.35;
align-self: flex-start;
}
@media (max-width: 767px) {
.dv-steps-row {
flex-direction: column;
align-items: center;
gap: 2rem;
}
.dv-step-item {
width: 100%;
max-width: 320px;
}
.dv-step-connector {
display: none;
}
}
/* ── 10. CTA section ────────────────────────────────────────────────────── */
.dv-cta-section {
background: #000000; /* Brand black — flat, no gradient */
color: #fff;
}
.dv-cta-section h2,
.dv-cta-section h3,
.dv-cta-section h4 {
color: #fff;
}
.dv-cta-section p {
color: rgba(255, 255, 255, 0.88);
}
.dv-cta-tertiary,
.dv-cta-tertiary:hover {
color: rgba(255, 255, 255, 0.65);
}
/* App download page — page-specific overrides */
.dv-app-section {
min-height: 88vh;
}
.dv-app-section h1 {
font-size: clamp(1.6rem, 5vw, 2.25rem);
}
.dv-app-tagline {
max-width: 36ch;
margin-inline: auto;
}
/* ── 10a. Testimonials ──────────────────────────────────────────────────── */
.dv-testimonials-section {
background: var(--dv-green-pale);
}
.dv-testimonial-card {
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-xl);
padding: 1.75rem;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: var(--dv-card-shadow);
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dv-testimonial-card:hover {
transform: none;
box-shadow: var(--dv-card-hover-shadow);
border-color: var(--dv-text);
}
.dv-testimonial-card--featured {
border-color: var(--dv-green);
background: var(--dv-surface);
}
[data-bs-theme="dark"] .dv-testimonial-card--featured {
background: var(--dv-surface);
}
.dv-testimonial-stars {
color: #f59e0b;
font-size: 1rem;
letter-spacing: 0.05em;
}
.dv-testimonial-text {
font-size: 1rem;
line-height: 1.75;
color: var(--dv-text);
font-style: italic;
margin: 0;
flex: 1;
}
.dv-testimonial-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid var(--dv-card-border);
}
.dv-testimonial-avatar {
flex-shrink: 0;
border-radius: 50%;
overflow: hidden;
}
.dv-testimonial-name {
font-weight: 700;
font-size: 0.9375rem;
color: var(--dv-text);
}
.dv-testimonial-role {
font-size: 0.875rem;
color: var(--dv-text-muted);
}
/* ── 10b. FAQ ───────────────────────────────────────────────────────────── */
.dv-faq-item {
border: 1px solid var(--dv-card-border) !important;
border-radius: var(--bs-border-radius-lg) !important;
margin-bottom: 0.625rem;
overflow: hidden;
background: var(--dv-surface);
}
.dv-faq-btn {
font-weight: 700;
font-size: 1rem;
color: var(--dv-text) !important;
background: var(--dv-surface) !important;
box-shadow: none !important;
border: none;
padding: 1.1rem 1.4rem;
min-height: 52px;
display: flex;
align-items: center;
}
.dv-faq-btn:not(.collapsed) {
color: var(--dv-green) !important;
background: var(--dv-surface-alt) !important;
}
/* Override Bootstrap's accordion chevron in both light and dark mode */
.dv-faq-btn::after,
.dv-faq-btn:not(.collapsed)::after,
[data-bs-theme=dark] .dv-faq-btn::after,
[data-bs-theme=dark] .dv-faq-btn:not(.collapsed)::after {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A85A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300A85A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c%2fsvg%3e");
}
.dv-faq-body {
font-size: 1rem;
color: var(--dv-text);
line-height: 1.8;
padding: 0 1.4rem 1.5rem;
background: var(--dv-surface);
}
/* Deep links (/what-grows/ → /faq/#faq2) target the collapse panel, so the
browser's fragment scroll parks the question itself behind the sticky navbar.
Native scroll-margin fixes the landing without any JS scroll-offset maths:
navbar (~52px) + the question button (~52px) + breathing room. */
.dv-faq-accordion .accordion-collapse {
scroll-margin-top: 8rem;
}
/* ── 11. Footer ─────────────────────────────────────────────────────────── */
.dv-footer {
background: #000000; /* Brand black — same as navbar */
color: rgba(255, 255, 255, 0.72);
padding: 3rem 0 1.75rem;
}
.dv-footer-brand {
font-family: var(--dv-font-heading);
font-size: 1.2rem;
font-weight: 800;
color: #fff !important;
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none !important;
}
.dv-footer-brand img {
width: 30px;
height: 30px;
object-fit: contain;
}
.dv-footer a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
}
.dv-footer a:hover {
color: var(--dv-green-light);
}
.dv-footer .dv-footer-divider {
border-color: rgba(255, 255, 255, 0.1);
margin: 1.75rem 0 1.25rem;
}
.dv-footer .dv-social-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.dv-footer .dv-social-btn:hover {
background: var(--dv-green);
color: #fff;
}
/* ── 11b. Social share buttons ─────────────────────────────────────────── */
.dv-social-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem 1.1rem;
border-radius: 2rem;
font-size: .875rem;
font-weight: 600;
border: none;
color: #fff !important;
text-decoration: none;
transition: opacity .15s ease, transform .12s ease;
white-space: nowrap;
}
.dv-social-btn:hover {
opacity: .85;
transform: translateY(-1px);
}
.dv-social-btn i {
font-size: 1.1rem;
flex-shrink: 0;
}
.dv-social-btn-wa {
background: #25D366;
}
.dv-social-btn-wa:hover {
background: #1fbd5a;
}
.dv-social-btn-fb {
background: #1877F2;
}
.dv-social-btn-fb:hover {
background: #0d69df;
}
.dv-social-btn-x {
background: #1a1a1a;
}
.dv-social-btn-x:hover {
background: #000;
}
/* ── 12. Share page cards ───────────────────────────────────────────────── */
.dv-share-strip {
height: 4px;
background: linear-gradient(90deg, var(--dv-green), var(--dv-green-light));
}
.dv-share-hero {
width: 100%;
max-height: 340px;
object-fit: cover;
border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
}
.dv-share-card {
border: 1px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
overflow: hidden;
box-shadow: var(--dv-card-shadow);
}
.dv-profile-header {
background: linear-gradient(135deg, var(--dv-green-dark) 0%, var(--dv-green) 100%);
padding: 2rem 1.5rem;
text-align: center;
}
.dv-profile-avatar {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
display: block;
margin: 0 auto 0.75rem;
}
.dv-profile-avatar--brand {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
padding: 0;
}
.dv-crop-badge {
background: rgba(0, 168, 90, 0.12);
color: var(--dv-green);
border: 1px solid rgba(0, 168, 90, 0.2);
border-radius: 2rem;
padding: 0.3em 0.8em;
font-size: 0.8rem;
font-weight: 600;
}
[data-bs-theme="dark"] .dv-crop-badge {
background: rgba(0, 168, 90, 0.18);
border-color: rgba(0, 168, 90, 0.3);
}
/* Hero wrap and placeholder */
.dv-share-hero-wrap {
position: relative;
background: linear-gradient(135deg, var(--dv-green-dark) 0%, var(--dv-green) 100%);
border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
overflow: hidden;
min-height: 200px;
}
.dv-share-hero-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 200px;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dv-share-hero-icon {
font-size: 3.5rem;
opacity: 0.85;
}
.dv-photo-count {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 0.25rem 0.6rem;
border-radius: 999px;
backdrop-filter: blur(4px);
}
/* Creator avatar */
.dv-creator-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.dv-creator-avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: var(--dv-green-pale);
color: var(--dv-green);
font-size: 1.2rem;
}
/* Profile avatar placeholder */
.dv-profile-avatar--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
}
/* ── 13. Error pages ────────────────────────────────────────────────────── */
.dv-error-code {
font-size: clamp(5rem, 18vw, 9rem);
font-weight: 900;
color: var(--dv-green);
line-height: 1;
font-family: var(--dv-font-heading);
}
.dv-error-icon {
font-size: 3.5rem;
color: var(--dv-green);
opacity: 0.6;
}
/* ── 14. Contact form ───────────────────────────────────────────────────── */
/* Honeypot: visually hidden & out of flow — bots fill it, humans never see it */
.dv-honeypot {
position: absolute;
top: -9999px;
left: -9999px;
opacity: 0;
pointer-events: none;
tab-size: 0;
}
/* Phone widget: country select capped so the number input gets most space */
.dv-phone-widget .dv-phone-country {
max-width: 52%;
flex: 0 0 auto;
}
.dv-phone-widget .dv-phone-dial {
font-size: 0.9rem;
min-width: 3.2rem;
background: var(--dv-surface, #f0f4f1);
color: var(--dv-green);
border-color: var(--bs-border-color);
}
.dv-phone-widget .dv-phone-local {
min-width: 0;
flex: 1 1 auto;
}
/* ── 15. Article body (blog detail) — mobile-first ──────────────────────── */
.dv-article-body {
/* Mobile: comfortable 18px reading baseline for rural users */
font-family: var(--dv-font-body);
font-size: 1.125rem;
line-height: 1.95;
color: var(--dv-text);
word-break: break-word;
overflow-wrap: break-word;
}
/* Desktop: bump size + constrain line length for comfortable reading */
@media (min-width: 768px) {
.dv-article-body {
font-size: 1.1875rem;
line-height: 1.9;
max-width: 72ch; /* ~65–70 characters per line — optimal reading measure */
}
}
.dv-article-body h2 {
font-family: var(--dv-font-heading);
font-size: 1.45rem;
font-weight: 700;
margin: 2.5rem 0 0.75rem;
color: var(--dv-text);
border-bottom: 2px solid var(--dv-card-border);
padding-bottom: 0.4rem;
}
@media (min-width: 768px) {
.dv-article-body h2 {
font-size: 1.625rem;
}
}
.dv-article-body h3 {
font-family: var(--dv-font-heading);
font-size: 1.2rem;
font-weight: 600;
margin: 2rem 0 0.6rem;
color: var(--dv-green);
}
@media (min-width: 768px) {
.dv-article-body h3 {
font-size: 1.35rem;
}
}
.dv-article-body h4 {
font-weight: 600;
font-size: 1.05rem;
margin: 1.5rem 0 0.4rem;
color: var(--dv-text);
}
.dv-article-body p {
margin-bottom: 1.5rem;
}
.dv-article-body ul,
.dv-article-body ol {
padding-left: 1.5rem;
margin-bottom: 1.5rem;
}
.dv-article-body li {
margin-bottom: 0.65rem;
line-height: 1.8;
}
/* Images: full-width on mobile, constrained + rounded on desktop */
.dv-article-body img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1.5rem 0;
display: block;
}
/* Photo credit — the MCP pipeline emits "\n*Photo: … / Pexels*" in one
paragraph (sometimes with a hard
), so an straight after an image
is a caption: pull it up against the image and set it small and muted. */
.dv-article-body img + em,
.dv-article-body img + br + em {
display: block;
margin-top: -1.1rem;
font-size: 0.82rem;
line-height: 1.5;
color: var(--dv-text-muted);
}
.dv-article-body img + br {
display: none;
}
.dv-article-body blockquote {
border-left: 4px solid var(--dv-green);
padding: 0.75rem 1.1rem;
margin: 1.5rem 0;
background: var(--dv-green-pale);
border-radius: 0 0.5rem 0.5rem 0;
font-style: italic;
color: var(--dv-text-muted);
}
.dv-article-body pre {
background: var(--dv-surface-alt);
border-radius: 0.5rem;
padding: 1rem 1.1rem;
overflow-x: auto;
margin-bottom: 1.25rem;
font-size: 0.9rem;
}
.dv-article-body code {
background: var(--dv-surface-alt);
padding: 0.15em 0.4em;
border-radius: 0.25rem;
font-size: 0.9em;
color: var(--dv-green-dark);
}
.dv-article-body pre code {
background: none;
padding: 0;
color: var(--dv-text);
}
.dv-article-body strong {
color: var(--dv-text);
font-weight: 700;
}
/* Links — visible brand green with accessible underline */
.dv-article-body a {
color: var(--dv-green);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.dv-article-body a:hover {
color: var(--dv-green-dark);
text-decoration-thickness: 2px;
}
.dv-article-body hr {
border-color: var(--dv-card-border);
margin: 2.25rem 0;
}
/* Tables: scrollable on mobile */
.dv-article-body table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.25rem;
font-size: 0.9375rem;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.dv-article-body table th,
.dv-article-body table td {
padding: 0.65rem 1rem;
border: 1px solid var(--dv-card-border);
text-align: left;
white-space: nowrap;
}
.dv-article-body table th {
background: var(--dv-surface-alt);
color: var(--dv-text);
font-weight: 600;
}
/* ── Dark mode article overrides ────────────────────────────────────────── */
[data-bs-theme="dark"] .dv-article-body a {
color: var(--dv-green-light);
}
[data-bs-theme="dark"] .dv-article-body a:hover {
color: #fff;
}
[data-bs-theme="dark"] .dv-article-body blockquote {
color: var(--dv-text-muted);
}
[data-bs-theme="dark"] .dv-article-body code {
color: var(--dv-green-light);
}
/* ── Article hero ────────────────────────────────────────────────────────── */
.dv-article-hero {
min-height: 240px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
@media (min-width: 576px) {
.dv-article-hero {
min-height: 300px;
}
}
@media (min-width: 768px) {
.dv-article-hero {
min-height: 380px;
}
}
.dv-article-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .75) 100%);
pointer-events: none;
}
.dv-article-hero-content {
position: relative;
z-index: 1;
padding: 1.5rem 0;
}
@media (min-width: 768px) {
.dv-article-hero-content {
padding: 2rem 0;
}
}
.dv-article-hero-tag {
display: inline-block;
background: rgba(255, 255, 255, .18);
color: #fff;
font-size: .72rem;
font-weight: 600;
letter-spacing: .03em;
padding: .25em .75em;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .22);
transition: background .15s;
}
.dv-article-hero-tag:hover {
background: rgba(255, 255, 255, .3);
color: #fff;
}
.dv-article-hero-title {
color: #fff;
font-size: clamp(1.35rem, 4.5vw, 2.35rem);
font-weight: 800;
line-height: 1.22;
text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
margin: 0;
}
/* Article meta bar icons */
.dv-article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
font-size: 0.85rem;
color: var(--dv-text-muted);
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--dv-card-border);
}
/* ═══════════════════════════════════════════════════════════════════════════
16. About page
═══════════════════════════════════════════════════════════════════════════ */
/* Hero */
.dv-about-hero {
background: var(--bs-body-bg);
border-bottom: 1px solid var(--dv-card-border);
}
/* Problem section */
.dv-about-problem-section {
background: var(--dv-surface);
}
/* Stat grid */
.dv-about-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.dv-about-stat-card {
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
padding: 1.5rem;
box-shadow: var(--dv-card-shadow);
}
.dv-about-stat-card--brand {
background: var(--dv-green);
border-color: var(--dv-green);
color: #fff;
}
.dv-about-stat-num {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--dv-green);
line-height: 1;
margin-bottom: 0.4rem;
}
.dv-about-stat-card--brand .dv-about-stat-num {
color: #fff;
}
.dv-about-stat-label {
font-size: .85rem;
color: var(--dv-text-muted);
line-height: 1.4;
}
.dv-about-stat-card--brand .dv-about-stat-label {
color: rgba(255, 255, 255, .85);
}
/* Pillar cards */
.dv-about-pillar-card {
display: flex;
gap: 1.25rem;
padding: 1.75rem;
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
box-shadow: var(--dv-card-shadow);
height: 100%;
transition: border-color .15s, box-shadow .15s;
}
.dv-about-pillar-card:hover {
border-color: var(--dv-text);
box-shadow: var(--dv-card-hover-shadow);
}
.dv-about-pillar-card--wide {
align-items: flex-start;
}
/* Brand mark inside a card — the logo carries its own colour, so it gets no
tinted tile behind it the way .dv-about-pillar-icon glyphs do. Intrinsic
width/height on the ![]()
plus auto height keeps the real aspect ratio. */
.dv-teaser-mark {
width: 3.5rem;
height: auto;
flex-shrink: 0;
}
/* Stacked variant: icon (or image) above the text instead of beside it.
The default row layout reserves a fixed 52px icon column for the full height
of the card, which is fine in a two-across grid but leaves a tall empty
gutter once cards get narrow — three-across, or any card carrying a real
paragraph. Stack those so the text uses the whole width. */
.dv-about-pillar-card--stack {
flex-direction: column;
align-items: flex-start;
}
.dv-about-pillar-icon {
width: 52px;
height: 52px;
border-radius: .875rem;
background: var(--dv-green-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--dv-green);
flex-shrink: 0;
}
.dv-about-pillar-label {
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--dv-green);
margin-bottom: .3rem;
}
.dv-about-pillar-title {
font-size: 1.0625rem;
font-weight: 800;
margin-bottom: .5rem;
}
/* Value cards */
.dv-about-value-card {
padding: 2rem 1.5rem;
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
box-shadow: var(--dv-card-shadow);
height: 100%;
}
.dv-about-value-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--dv-green-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--dv-green);
margin: 0 auto 1.25rem;
}
.dv-about-value-title {
font-size: 1rem;
font-weight: 800;
margin-bottom: .5rem;
}
/* Partnership section */
.dv-about-partner-section {
background: var(--dv-surface);
}
.dv-about-partner-pillars {
display: flex;
flex-wrap: wrap;
gap: .75rem;
}
.dv-about-partner-pill {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .6rem 1rem;
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: 999px;
font-size: .875rem;
font-weight: 600;
color: var(--dv-text);
box-shadow: var(--dv-card-shadow);
}
.dv-about-partner-pill i {
color: var(--dv-green);
font-size: 1rem;
}
/* ═══════════════════════════════════════════════════════════════════════════
17. Features section — revamped pillars layout
═══════════════════════════════════════════════════════════════════════════ */
.dv-features-pillar {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 2rem;
background: var(--dv-surface);
border: 1.5px solid var(--dv-card-border);
border-radius: var(--bs-border-radius-lg);
box-shadow: var(--dv-card-shadow);
height: 100%;
transition: border-color .15s, box-shadow .15s;
}
.dv-features-pillar:hover {
border-color: var(--dv-text);
box-shadow: var(--dv-card-hover-shadow);
transform: none;
}
.dv-features-pillar-icon {
width: 56px;
height: 56px;
border-radius: 1rem;
background: var(--dv-green-pale);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: var(--dv-green);
flex-shrink: 0;
}
.dv-features-pillar-kicker {
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--dv-green);
margin-bottom: .25rem;
}
.dv-features-pillar h3 {
font-size: 1.1rem;
font-weight: 800;
margin-bottom: .4rem;
line-height: 1.3;
}
.dv-features-pillar p {
font-size: 1rem;
color: var(--dv-gray);
margin: 0;
line-height: 1.6;
}
.dv-features-pillar-outcome {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .78rem;
font-weight: 700;
color: var(--dv-green);
margin-top: .75rem;
padding: .3em .75em;
background: var(--dv-green-pale);
border-radius: 999px;
}
/* ── Product showcase rows (device ⇄ copy, zig-zag) ──────────────────────────── */
.dv-showcase-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 5vw, 4rem);
align-items: center;
}
.dv-showcase-row + .dv-showcase-row {
margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.dv-showcase-row--reverse .dv-showcase-media {
order: 2;
}
/* Soft brand glow behind the device for depth (best-in-class app showcase look) */
.dv-showcase-media {
position: relative;
}
.dv-showcase-media::before {
content: "";
position: absolute;
inset: 6% 18%;
z-index: 0;
background: radial-gradient(closest-side, rgba(0, 168, 90, .22), transparent 72%);
filter: blur(26px);
}
.dv-showcase-h {
font-family: var(--dv-font-heading);
font-weight: 800;
font-size: clamp(1.3rem, 2.6vw, 1.8rem);
margin: .3rem 0 .6rem;
}
@media (max-width: 768px) {
.dv-showcase-row {
grid-template-columns: 1fr;
text-align: center;
}
.dv-showcase-media {
order: -1 !important;
}
.dv-showcase-copy .dv-features-pillar-outcome {
display: inline-flex;
}
}
/* ── Centered search band (crop-check teaser) ────────────────────────────────── */
.dv-search-band {
background: var(--dv-green-pale);
border: 1px solid var(--bs-border-color);
border-radius: 1.25rem;
padding: clamp(2rem, 5vw, 3.25rem);
text-align: center;
}
[data-bs-theme="dark"] .dv-search-band {
background: var(--dv-surface-alt);
}
.dv-search-band .dv-about-pillar-label {
justify-content: center;
}
.dv-search-form {
max-width: 540px;
margin: 1.25rem auto 0;
}
/* ── Address typeahead dropdown (shared by /app/ grow form + home teaser) ─────── */
.dv-geo-suggest-wrap {
position: relative;
}
.dv-geo-suggest {
margin: .35rem 0 0;
border: 1px solid var(--bs-border-color);
border-radius: .6rem;
overflow: hidden;
background: var(--dv-surface);
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.dv-geo-suggest-item {
display: flex;
align-items: flex-start;
gap: .5rem;
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: .6rem .8rem;
font-size: .92rem;
line-height: 1.35;
color: var(--dv-text);
cursor: pointer;
border-bottom: 1px solid var(--bs-border-color);
}
.dv-geo-suggest li:last-child .dv-geo-suggest-item {
border-bottom: 0;
}
.dv-geo-suggest-item:hover,
.dv-geo-suggest-item:focus-visible {
background: var(--dv-green-pale);
color: var(--dv-green-dark);
outline: none;
}
.dv-geo-suggest-item i {
color: var(--dv-green);
font-size: 1.05rem;
margin-top: .1rem;
flex-shrink: 0;
}
[data-bs-theme="dark"] .dv-geo-suggest-item:hover,
[data-bs-theme="dark"] .dv-geo-suggest-item:focus-visible {
color: var(--dv-green-light);
}
/* ── Focused tool wrap (the /app/ crop tool inside the website chrome) ────────── */
.dv-tool-wrap {
max-width: 640px;
margin: 0 auto;
}
/* ── App-download modal (includes/_app_modal.html) ───────────────────────────── */
/* Bootstrap's own modal, re-skinned through its CSS variables rather than by
overriding its rules — so focus trap, backdrop and scroll lock stay stock. */
.dv-app-modal {
--bs-modal-bg: var(--dv-surface);
--bs-modal-color: var(--dv-text);
--bs-modal-border-color: var(--dv-card-border);
--bs-modal-border-radius: 1rem;
--bs-modal-width: 33rem;
}
.dv-app-modal .modal-title {
font-family: var(--dv-font-heading);
font-weight: 800;
}
.dv-app-modal-list {
list-style: none;
margin: 0.5rem 0 0;
padding: 0;
display: grid;
gap: 0.85rem;
font-size: 0.95rem;
line-height: 1.5;
color: var(--dv-text);
}
.dv-app-modal-list li {
display: flex;
gap: 0.65rem;
align-items: flex-start;
}
.dv-app-modal-list i {
color: var(--dv-green);
font-size: 1.25rem;
flex-shrink: 0;
line-height: 1.25;
}
.dv-app-modal-note {
font-size: 0.85rem;
color: var(--dv-text-muted);
margin: 1.1rem 0 1rem;
text-align: center;
}