@charset "UTF-8"; /* ========================================================================== LIVING WATER INDIA — EARTH PALETTE -------------------------------------------------------------------------- Re-skins the design system in css/lw.css to the Living Water India colour palette (see "Living Water India Site (standalone).html"). Structure, typography, spacing and motion are untouched — this file only redefines colour. The original system was two colours: white ground, navy ink, blue accent. This one is warm and earthen: a cream paper ground, a forest-green ink, a terracotta accent, with olive, sand, sage, earth-brown and water-blue as the supporting range. Load AFTER css/lw.css: To roll this out to the rest of the site, add that second to about.html, work.html, partner.html, contact.html and 404.html. Nothing else needs to change. ========================================================================== */ /* -------------------------------------------------------------------------- 01 The palette, named -------------------------------------------------------------------------- */ :root { /* Paper — the warm ground, light to deep */ --cream: #f6f1e6; /* page ground */ --cream-2: #efe7d7; /* alternating bands, tinted sections */ --cream-3: #f1ead8; /* raised cards on a sand ground */ --sand: #e3d2ac; /* tint blocks, image placeholders, deep accent */ /* Forest — the ink, and the inverted ground */ --forest-deep: #2c4a17; /* headings, hero/footer ground */ --forest: #4f8a2a; /* primary fills, figures, mid green */ --forest-mid: #3d6b21; /* the step between the two */ /* The living range */ --olive: #7dc242; /* logo green — growth — links, land */ --sage: #b6dc8e; /* soft green — labels on dark ground */ --clay: #b25b33; /* terracotta — the brand accent, the CTA */ --clay-deep: #9c4c28; /* its pressed / hover state */ --clay-soft: #c4705a; /* muted terracotta — livelihoods */ --earth: #8a6a4b; /* brown — waste, warm labels */ --gold: #b49a62; /* brass — rules, flourishes */ --water: #6d8fa8; /* the blue that remains: water itself */ /* Text on the cream ground */ --ink: #2b2921; /* base body */ --ink-2: #4a4436; /* lead prose */ --ink-3: #544e40; /* secondary prose */ --mute: #8b8570; /* meta, captions, footnotes */ --mute-2: #6b6555; /* stat labels */ /* Text on the forest ground */ --light: #f1ede0; /* ---- Remap the design-system tokens ------------------------------------ lw.css refers to these names throughout; only their values change. The historical blue/steel names now carry clay and earth. ---------------------------------------------------------------------- */ --paper: var(--cream); --paper-2: var(--cream-2); --paper-3: var(--sand); --deep: var(--forest-deep); --deep-2: var(--forest); --deep-3: var(--forest-mid); --blue: var(--clay); /* accent: links, button fills, focus */ --blue-lt: var(--clay-soft); --blue-glow: var(--sand); /* accent when sitting on forest */ --steel: var(--earth); /* the quieter second colour */ --steel-lt: var(--sage); /* ---- Semantic: cream ground ---------------------------------------- */ --fg: var(--forest-deep); --fg-2: var(--ink-3); --fg-3: var(--mute); --hair: rgba(63, 81, 55, .16); --hair-soft: rgba(63, 81, 55, .08); --hair-strong: rgba(63, 81, 55, .34); } /* Forest ground — hero, impact band, CTA, footer, drawer. Light text is the cream at reduced opacity, so the grain and the ghosted photography behind it still read through. */ .on-deep { --bg: var(--forest-deep); --fg: var(--light); --fg-2: rgba(241, 237, 224, .78); --fg-3: rgba(241, 237, 224, .55); --hair: rgba(241, 237, 224, .18); --hair-soft: rgba(241, 237, 224, .09); --hair-strong: rgba(241, 237, 224, .32); --accent: var(--sand); --accent-warm: var(--sage); } /* -------------------------------------------------------------------------- 02 Body & page chrome -------------------------------------------------------------------------- */ html { background: var(--cream); } body { background: var(--cream); color: var(--forest-deep); } /* The standalone selects in sand. */ ::selection { background: var(--sand); color: var(--forest-deep); } .on-deep ::selection { background: var(--sand); color: var(--forest-deep); } /* -------------------------------------------------------------------------- 03 The few colours lw.css hard-codes rather than tokenises -------------------------------------------------------------------------- */ /* Figure hover scrim — was navy, now forest */ a.fig::after, .fig--hover::after { background: linear-gradient(to top, rgba(46, 58, 38, .55), transparent 62%); } /* Overlapping figure — a green-cast shadow, not a blue-cast one */ .fig-stack__over { box-shadow: 0 30px 70px -34px rgba(63, 81, 55, .34); } /* Buttons wipe to clay; cream text reads warmer on terracotta than pure white */ .btn:hover { color: var(--cream); } /* -------------------------------------------------------------------------- 03b The partner call to action carries the clay -------------------------------------------------------------------------- In the reference, terracotta is reserved for one thing: "Partner With Us". Everything else is forest or cream, which is what makes the clay pill read as the single action on the page. -------------------------------------------------------------------------- */ .site-header .btn { --btn-bg: var(--clay); --btn-fg: var(--cream); --btn-fill: var(--clay-deep); border-color: transparent; } .site-header .btn:hover, .site-header .btn:focus-visible { color: var(--cream); border-color: transparent; } /* The closing CTA's primary action, and any partner link styled as a solid button outside the header. */ .cta__actions .btn:not(.btn--line), .btn[href^="partner"]:not(.btn--line):not(.btn--paper) { --btn-bg: var(--clay); --btn-fg: var(--cream); --btn-fill: var(--clay-deep); } /* On the forest hero the partner button stays cream — a clay pill on a green photograph loses its edge — but it still wipes to clay on hover. */ .on-deep .btn--paper { --btn-bg: var(--cream); --btn-fg: var(--forest-deep); --btn-fill: var(--clay); } /* Drawer hairlines pick up the cream rather than plain white */ .drawer__list li { border-block-start-color: rgba(241, 237, 224, .14); } .drawer__list li:last-child { border-block-end-color: rgba(241, 237, 224, .14); } .drawer__foot { color: rgba(241, 237, 224, .52); } /* Header — a solid cream strip on every page and at every scroll position, so it no longer flips to light type over forest zones. */ .site-header, .site-header[data-over-dark="true"], .site-header[data-stuck="true"], .site-header[data-stuck="true"][data-over-dark="true"] { background: var(--cream); backdrop-filter: none; -webkit-backdrop-filter: none; border-block-end-color: var(--hair-soft); color: var(--forest-deep); } /* Footer */ .site-footer { color: var(--light); } .footer-col a:hover { color: var(--sand); } .to-top:hover { color: var(--sand); } /* Filled outcome band and dark form controls */ .outcome { background: var(--forest); color: var(--light); } .outcome::after { border-color: rgba(241, 237, 224, .18); } .outcome::before { border-color: rgba(241, 237, 224, .13); } .outcome .micro { color: rgba(241, 237, 224, .64); } .outcome .body, .outcome .body-w { color: rgba(241, 237, 224, .85); } .on-deep .field select option { background: var(--forest); color: var(--light); } /* -------------------------------------------------------------------------- 04 Domain colour — water, land, waste, livelihoods -------------------------------------------------------------------------- The standalone gives each of the four pressures its own hue. The ledger rows and the practice panels carry them here, on the mono index and the sub-label, so the four domains stay recognisable page to page. -------------------------------------------------------------------------- */ .ledger:not(.ledger--data) .ledger__row:nth-child(1) { --domain: var(--water); } .ledger:not(.ledger--data) .ledger__row:nth-child(2) { --domain: var(--olive); } .ledger:not(.ledger--data) .ledger__row:nth-child(3) { --domain: var(--earth); } .ledger:not(.ledger--data) .ledger__row:nth-child(4) { --domain: var(--clay-soft); } /* Longer ledgers (the reports and policies list) carry the range round again rather than dropping to an uncoloured tile. */ .ledger:not(.ledger--data) .ledger__row:nth-child(5) { --domain: var(--gold); } .ledger:not(.ledger--data) .ledger__row:nth-child(6) { --domain: var(--forest-mid); } .ledger:not(.ledger--data) .ledger__row:nth-child(7) { --domain: var(--water); } .ledger:not(.ledger--data) .ledger__row:nth-child(8) { --domain: var(--olive); } .ledger__sub { color: var(--domain, var(--accent-warm)); } .ledger__row:hover .ledger__n { color: var(--domain, var(--accent)); } .ledger__row::before { background: var(--domain, var(--fg)); } .panel--a { --domain: var(--water); } .panel--b { --domain: var(--olive); } .panel--c { --domain: var(--earth); } .panel__n { color: var(--domain, var(--fg-3)); } /* -------------------------------------------------------------------------- 05 Warm detail -------------------------------------------------------------------------- */ /* Brass rules under section eyebrows, as in the standalone's hand-drawn stroke */ .eyebrow--warm { color: var(--earth); } .micro--warm { color: var(--earth); } .on-deep .eyebrow--warm, .on-deep .micro--warm { color: var(--sage); } /* Statistics read in forest on cream, sand on forest */ .stat-lead__value { color: var(--forest); } .on-deep .stat-lead__value { color: var(--sand); } /* Timeline year markers */ .timeline__year { color: var(--forest); } .on-deep .timeline__year { color: var(--sand); } /* Partner marquee and credential rules sit on the gold hairline */ .marquee { border-color: rgba(180, 154, 98, .34); } .on-deep .marquee { border-color: rgba(241, 237, 224, .18); } /* Focus ring — clay on cream, sand on forest */ :focus-visible { outline-color: var(--clay); } .on-deep :focus-visible { outline-color: var(--sand); } /* -------------------------------------------------------------------------- 06 Print -------------------------------------------------------------------------- */ @media print { .sect, .site-footer { background: #fff !important; color: #000 !important; } }