/* ============================================================ hai Farmer — "Harvest" theme layer ------------------------------------------------------------ This file is an OVERLAY. It loads after assets/css/style.css and never replaces it — style.css still owns the layout, this file owns the look. How it works 1. Every rule is scoped to body.lux, so a page opts in by adding class="lux" to . 2. The design tokens are re-declared on body.lux. Custom properties inherit, so every rule inside style.css that reads var(--green), var(--r-lg), var(--shadow-md)… silently picks up the Orchard Dusk palette without being rewritten here. 3. Only the pieces that need real restyling (gradients, depth, glass, card shells) are spelled out below. ============================================================ */ /* ---------- 1. TOKENS — Orchard Dusk ---------- Teal anchor, coral accent, cool ground. This was one of five palettes a visitor could switch between from a button in the corner. Orchard Dusk is now the only one: its values are declared here rather than in a [data-palette] block, the other four are gone, and so is the switcher. One palette means these are simply the site's colours. */ body.lux{ /* deep teal leads, so the coral below reads as the accent */ --green:#10635C; --green-dark:#0C4F4A; --green-soft:#E1EFEC; --forest:#0B3330; --forest-2:#061817; --orange:#DC6B4A; --orange-dark:#C2542F; --gold:#E0A24A; --red:#BE4A32; --red-dark:#9C3722; --star:#E0A24A; /* ink carries a trace of the teal so text sits in the same family */ --ink:#16211F; --ink-70:#47554F; --ink-50:#78857F; --ink-30:#A5AFAA; --line:#E1E7E3; --line-2:#D2DBD6; /* a cool paper ground, never plain #fff */ --bg:#F3F6F3; --bg-2:#EBF0EC; --tint:#E7EEEA; /* rounder geometry throughout */ --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:24px; --r-pill:999px; --shadow-sm:0 2px 10px -6px rgba(18,58,38,.4); --shadow-md:0 22px 48px -30px rgba(18,58,38,.6); --ff-display:'Fraunces','Quicksand',Georgia,serif; /* reusable finishes */ --grad-green:linear-gradient(135deg,#10635C,#1B857C); --grad-forest:linear-gradient(135deg,#0B3330,#10635C); --grad-gold:linear-gradient(135deg,#DC6B4A,#E89370); --ring:0 0 0 1px rgba(11,51,48,.07); /* --- the rest of the palette --------------------------------------- Expressed as tokens rather than literals so the colours live in one block instead of forty rules. That is still worth doing with a single palette: it is what lets the whole scheme be read, and changed, here. */ --bloom-1:rgba(16,99,92,.12); /* top-left wash on the page canvas */ --bloom-2:rgba(220,107,74,.10); /* top-right wash */ --bloom-3:rgba(16,99,92,.08); /* lower-right wash */ --dot:rgba(11,51,48,.05); /* paper weave */ /* opaque, not translucent: these back the sticky nav and the mobile fab bar, both of which sit over moving content the whole time the page scrolls. Frosting them meant a backdrop blur recomputed every frame — see §6. Solid fills read the same against the page canvas and cost nothing to scroll past. */ --glass:#F3F6F3; /* sticky nav, floating */ --glass-2:#FAFCFA; /* sticky nav, stuck */ --wash:rgba(16,99,92,.06); /* faintest accent fill */ --wash-2:rgba(16,99,92,.10); /* accent hover fill */ --wash-line:rgba(16,99,92,.30); /* accent hairline */ --card:#FFFFFF; /* card top */ --card-2:#F8FBF9; /* card bottom */ --footer-1:#0C2C2A; --footer-2:#061817; --footer-glow:rgba(16,99,92,.45); --scrim-rgb:11,51,48; /* inner-banner scrim base */ } /* ---------- 2. PAGE CANVAS ---------- Three soft colour blooms plus a faint dot weave. Fixed, so the page appears to slide over a printed sheet rather than scroll it. The blooms sit on a fixed pseudo-element of their own rather than on `background-attachment:fixed`, which is what they used to use. Same picture, very different cost: a fixed attachment is painted into the page's scrolling layer, so all four gradient layers get re-rasterised at viewport size on every single scroll frame — and it marks the page as non-fast-scrollable, pushing scroll back onto the main thread in Chrome and Safari both. That was the stutter, on desktop and on phones. A fixed pseudo-element with its own compositor layer is rasterised once and then simply left in place while the page slides over it. */ body.lux{background-color:var(--bg)} body.lux::before{ content:""; position:fixed;inset:0;z-index:-1;pointer-events:none; background-color:var(--bg); background-image: radial-gradient(58rem 40rem at 10% -6%,var(--bloom-1),transparent 60%), radial-gradient(44rem 34rem at 94% 4%,var(--bloom-2),transparent 62%), radial-gradient(52rem 42rem at 76% 92%,var(--bloom-3),transparent 60%), radial-gradient(var(--dot) 1px,transparent 1.3px); background-size:auto,auto,auto,24px 24px; /* promotes it to its own layer, so scrolling never repaints the gradients */ transform:translateZ(0); } body.lux .preloader{background:linear-gradient(160deg,var(--bg),var(--tint))} body.lux .preloader__curtain{background:var(--grad-forest)} body.lux .cursor__dot{background:var(--green)} body.lux .scroll-progress span{background:linear-gradient(90deg,var(--green),var(--gold))} /* ---------- 3. TYPE ---------- */ .lux h1,.lux h2,.lux h3,.lux h4,.lux h5{letter-spacing:-.015em} .lux .shead{margin-bottom:26px} .lux .shead h2{position:relative;padding-left:20px;font-size:clamp(1.45rem,2.4vw,2.05rem);font-weight:600} /* gradient tick standing in for a heading rule */ .lux .shead h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:5px; background:linear-gradient(180deg,var(--green),var(--gold))} /* a centred heading has no left edge to sit against, so the tick lies down into a short rule under the title instead */ .lux .shead--center h2{padding-left:0;padding-bottom:15px} .lux .shead--center h2::before{left:50%;right:auto;top:auto;bottom:0; width:58px;height:4px;transform:translateX(-50%); background:linear-gradient(90deg,var(--green),var(--gold))} .lux .price b{font-family:var(--ff-display);font-size:1.06rem;color:var(--red)} .lux .link-arrow{color:var(--green)} /* ---------- 4. BUTTONS ---------- Solid fills become gradients with a matching coloured shadow, and a light sheen sweeps across on hover. */ .lux .btn{background:var(--grad-forest);border-radius:var(--r-pill); box-shadow:0 14px 26px -16px rgba(18,58,38,.9);position:relative;overflow:hidden;isolation:isolate} .lux .btn::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.34) 47%,transparent 64%); transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.8,.2,1)} .lux .btn:hover{background:var(--grad-green);transform:translateY(-2px); box-shadow:0 20px 34px -18px rgba(18,90,55,.95)} .lux .btn:hover::after{transform:translateX(130%)} .lux .btn--green{background:var(--grad-green)} .lux .btn--green:hover{background:var(--grad-forest)} /* ---------- 5. ANNOUNCEMENT TICKER ---------- */ .lux .ticker{position:relative;background:linear-gradient(90deg,var(--forest),var(--green) 30%, var(--green) 70%,var(--forest));box-shadow:inset 0 -1px 0 rgba(255,255,255,.12)} /* messages dissolve into the bar's own colour at both edges */ .lux .ticker::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,var(--forest),transparent 10%,transparent 90%,var(--forest))} .lux .ticker__group li{font-weight:600;letter-spacing:.02em} .lux .ticker__group li::after{background:var(--gold);opacity:.75} /* ---------- 6. HEADER ---------- */ .lux .header__upper{background:linear-gradient(180deg,#FFFFFF,#FDFBF6); border-bottom:1px solid rgba(18,58,38,.07)} .lux .search{border-radius:var(--r-pill);border-color:rgba(18,58,38,.13);background:#fff; box-shadow:inset 0 1px 3px rgba(18,58,38,.05)} .lux .search:focus-within{border-color:var(--green);box-shadow:0 0 0 4px var(--wash-2)} .lux .search__btn{background:var(--grad-gold);box-shadow:0 8px 18px -10px rgba(198,129,27,.95)} .lux .search__btn:hover{background:linear-gradient(135deg,var(--orange-dark),var(--orange))} .lux .hotline__ic{background:linear-gradient(135deg,#fff,var(--green-soft)); box-shadow:inset 0 0 0 1px var(--wash-line)} .lux .hotline:hover .hotline__ic{background:var(--grad-green);box-shadow:0 10px 20px -12px rgba(18,90,55,.9)} .lux .hotline__txt b{font-weight:600} .lux .hact{border:1px solid transparent;border-radius:14px} .lux .hact:hover{background:var(--wash-2);border-color:var(--wash-line)} .lux .badge{background:var(--grad-gold);color:#3A2708;box-shadow:0 4px 10px -4px rgba(198,129,27,.9)} /* nav bar: a solid bar, not frosted glass. backdrop-filter on a full-width sticky element is the single most expensive thing a scrolling page can ask for — the compositor has to re-snapshot and re-blur the strip of page behind the header on every frame, for the whole length of the scroll. At .82 alpha the blur was barely legible anyway. */ .lux .header{background:var(--glass);border-bottom:1px solid rgba(18,58,38,.08)} .lux .header.is-stuck{background:var(--glass-2);box-shadow:0 14px 34px -26px rgba(18,58,38,.75)} .lux .header__in{min-height:60px} .lux .nav{gap:4px} .lux .nav__item>a{padding:9px 10px;border-radius:var(--r-pill);font-weight:700; transition:background .25s,color .25s,box-shadow .3s} .lux .nav__item>a:hover{background:var(--wash-2);color:var(--green)} .lux .nav__item.is-active>a{background:var(--grad-green);color:#fff; box-shadow:0 10px 20px -12px rgba(18,90,55,.95)} .lux .nav__item.is-active>a .ic--xs{color:rgba(255,255,255,.75)} .lux .nav__drop{border-radius:var(--r-md);border-color:rgba(18,58,38,.08);padding:8px; box-shadow:0 30px 60px -34px rgba(18,58,38,.65)} .lux .burger span{background:var(--forest)} /* ---------- 7. HERO CAROUSEL ---------- Full-bleed. This used to be pulled clamp(0,2.2vw,26px) off each edge and rounded, to read as a framed plate. The artwork already carries its own framing — leaf borders down both sides — so the inset only showed as a 26px strip of page background beside a banner that looked cropped. */ .lux .hbanner{padding-inline:0;padding-top:0} .lux .hbanner__box{border-radius:0; box-shadow:0 34px 70px -46px rgba(18,58,38,.85)} /* opaque for the same reason as the header (§6): these ride over the carousel artwork, so a backdrop blur here re-reads the image every frame */ .lux .hbanner__nav{background:rgba(255,255,255,.94); box-shadow:0 12px 26px -14px rgba(18,58,38,.7)} .lux .hbanner__nav:hover{background:var(--grad-green);color:#fff} /* ---------- 8. SECTION SHEETS ---------- The biggest change to the "plain white" feel: each content block sits on its own soft paper sheet with a hairline and a wide, low shadow. !important is needed because the source markup carries inline padding. */ .lux .section{padding-block:clamp(18px,2.4vw,30px)!important} .lux .shop>.container, .lux .picks>.container, .lux .videos>.container, .lux .journal>.container{ /* white paper laid over the section's own tint — see §18 */ background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.62)),var(--sheet,#fff); border:1px solid rgba(255,255,255,.9); border-radius:28px; padding-block:clamp(24px,3vw,38px); box-shadow:0 30px 70px -46px rgba(18,58,38,.55),var(--ring); } .lux .catstrip{padding-block:clamp(22px,3vw,38px)} /* filter tabs become pills */ .lux .tabs{gap:6px;background:var(--wash);padding:5px;border-radius:var(--r-pill)} .lux .tab{padding:7px 16px;border-radius:var(--r-pill);transition:background .25s,color .25s,box-shadow .3s} .lux .tab::after{display:none} .lux .tab:hover{background:rgba(255,255,255,.7);color:var(--ink)} .lux .tab.is-active{background:#fff;color:var(--green);box-shadow:0 8px 16px -10px rgba(18,58,38,.6)} .lux .carousel-nav button{border-color:rgba(18,58,38,.12);background:#fff; box-shadow:0 8px 18px -12px rgba(18,58,38,.55)} .lux .carousel-nav button:hover{background:var(--grad-green);border-color:transparent;color:#fff} /* ---------- 9. CATEGORY TILES ---------- */ .lux .catcard{ background:linear-gradient(165deg,rgba(255,255,255,.82),var(--tint,var(--green-soft)) 96%); border:1px solid rgba(255,255,255,.85); box-shadow:0 16px 34px -26px rgba(18,58,38,.7); padding:24px 12px 20px; } .lux .catcard:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px rgba(18,58,38,.6)} .lux .catcard figure{border:3px solid #fff;box-shadow:0 12px 22px -14px rgba(18,58,38,.75)} .lux .catcard b{font-weight:600;font-size:.92rem} .lux .catcard small{color:var(--ink-50)} /* ---------- 10. PRODUCT CARDS ---------- The image is inset inside the card with its own radius — the single detail that most separates a premium grid from a plain bordered one. */ .lux .prod{background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(18,58,38,.07);border-radius:20px; box-shadow:0 14px 34px -26px rgba(18,58,38,.65)} .lux .prod:hover{border-color:var(--wash-line);transform:translateY(-6px); box-shadow:0 34px 58px -32px rgba(18,58,38,.55)} .lux .prod__media{margin:8px 8px 0;border-radius:15px;aspect-ratio:1/.88; background:linear-gradient(160deg,var(--green-soft),var(--tint))} .lux .off{top:12px;left:12px;background:var(--grad-green);border-radius:var(--r-pill); padding:4px 10px;letter-spacing:.04em;box-shadow:0 8px 16px -8px rgba(18,90,55,.9)} .lux .off--hot{background:linear-gradient(135deg,#DD5237,var(--red))} .lux .prod__body{padding:14px 15px 15px} .lux .prod__cat{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-weight:700} .lux .prod h4{font-family:var(--ff-display);font-size:.95rem;font-weight:600} .lux .prod__vars button{border-color:rgba(18,58,38,.14);background:var(--card)} .lux .prod__vars button.is-active{background:var(--grad-green);border-color:transparent; box-shadow:0 8px 16px -10px rgba(18,90,55,.9)} .lux .prod__add{border-color:var(--wash-line);background:var(--wash);padding:10px 12px} .lux .prod__add:hover{background:var(--grad-green);border-color:transparent;color:#fff; box-shadow:0 14px 24px -14px rgba(18,90,55,.95)} .lux .prod__qty{border-color:var(--wash-line);background:var(--wash);padding:8px 10px} .lux .prod__qty button{box-shadow:0 6px 12px -8px rgba(18,58,38,.7)} .lux .prod__qty button:hover{background:var(--grad-green);color:#fff;box-shadow:none} /* ---------- 11. PASTEL TILES + CTA BAND ---------- */ .lux .ad{border-radius:26px;box-shadow:0 26px 50px -38px rgba(18,58,38,.8); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;height: 250px;} .lux .ad:hover{transform:translateY(-6px);box-shadow:0 40px 60px -38px rgba(18,58,38,.65)} .lux .ad--pink{background:linear-gradient(140deg,#FDEEF3,#F5CCDC)} .lux .ad--amber{background:linear-gradient(140deg,#FDF0D3,#F6D695)} .lux .ad--mint{background:linear-gradient(140deg,#ECF7EE,#CBE7D3)} .lux .ad--rust{background:linear-gradient(140deg,#FBEBE0,#F2CDB3)} /* The featured tiles carry no text of their own any more - the banner is the whole tile - so the rules that styled a heading and an eyebrow inside one have nothing left to style. The tints above still show while the image loads. */ .lux .ctaband{background:linear-gradient(120deg,#FBE9C6,#F7D89C 52%,#F2C877); border-radius:28px;box-shadow:0 34px 70px -48px rgba(120,80,20,.95)} /* two soft rings echo the roundness of the produce photography */ /* The pale circle that used to sit behind the band's heading is gone with the heading: the band is a finished banner now, and a translucent disc laid over somebody's artwork is a blemish, not a flourish. */ .lux .promo__eyebrow{background:var(--grad-forest);box-shadow:0 8px 18px -10px rgba(18,58,38,.9)} /* ---------- 12. VIDEOS + JOURNAL ---------- */ .lux .vid,.lux .post{background:linear-gradient(180deg,var(--card),var(--card-2)); border:1px solid rgba(18,58,38,.07);border-radius:20px; box-shadow:0 14px 34px -26px rgba(18,58,38,.65)} .lux .vid:hover,.lux .post:hover{border-color:var(--wash-line);transform:translateY(-6px); box-shadow:0 34px 58px -32px rgba(18,58,38,.55)} .lux .vid__media{margin:8px 8px 0;border-radius:15px} .lux .vid__play{background:rgba(255,255,255,.94);box-shadow:0 12px 26px -10px rgba(18,58,38,.8)} .lux .vid__play:hover{background:var(--grad-green);color:#fff} .lux .vid__body h4,.lux .post__body h4{font-family:var(--ff-display);font-weight:600} .lux .post__media{margin:8px 8px 0;border-radius:15px} .lux .post__cat{top:16px;left:16px;background:var(--grad-forest);border-radius:var(--r-pill); padding:5px 12px;box-shadow:0 8px 18px -10px rgba(18,58,38,.9)} /* ---------- 13. HIGHLIGHTS ---------- Was a flat grey band; now four raised cards on a tinted strip. */ .lux .highlights{background:linear-gradient(180deg,rgba(255,255,255,.55),var(--green-soft)); border-top:1px solid rgba(18,58,38,.08)} .lux .hl{background:var(--card);border:1px solid rgba(18,58,38,.06);border-radius:20px;padding:16px 18px; box-shadow:0 16px 34px -30px rgba(18,58,38,.8); transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s} .lux .hl:hover{transform:translateY(-5px);box-shadow:0 30px 50px -32px rgba(18,58,38,.6)} .lux .hl__ic{background:linear-gradient(135deg,#fff,var(--green-soft)); box-shadow:inset 0 0 0 1px var(--wash-line)} .lux .hl:hover .hl__ic{background:var(--grad-green);color:#fff;box-shadow:0 12px 22px -12px rgba(18,90,55,.9)} .lux .hl__txt b{font-weight:600} /* ---------- 14. FOOTER ---------- */ .lux .footer{background: radial-gradient(46rem 26rem at 12% -20%,var(--footer-glow),transparent 62%), radial-gradient(38rem 24rem at 92% 8%,rgba(226,155,47,.16),transparent 60%), linear-gradient(180deg,var(--footer-1),var(--footer-2))} /* the same dot weave as the page, inverted */ .lux .footer::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.2px);background-size:26px 26px} .lux .footer__top,.lux .footer__bar{position:relative;z-index:1} .lux .footer__brand img{background:#fff;border-radius:var(--r-sm);box-shadow:0 14px 30px -18px rgba(0,0,0,.9)} .lux .footer__col h6{color:var(--gold);letter-spacing:.14em} .lux .footer__col a:hover{color:#8FD4A8} .lux .footer__col .ic{color:var(--gold)} .lux .socials a{border-color:rgba(255,255,255,.22)} .lux .socials a:hover{background:var(--grad-green);border-color:transparent} .lux .footer__bar{border-top:1px solid rgba(255,255,255,.1)} /* ---------- 15. OVERLAYS ---------- */ .lux .drawer__panel,.lux .cart__panel{background:linear-gradient(180deg,var(--card),var(--bg)); border-radius:26px 0 0 26px;box-shadow:-30px 0 70px -34px rgba(18,58,38,.75)} .lux .drawer__head{background:linear-gradient(135deg,var(--green-soft),#fff)} .lux .drawer__call{background:var(--grad-green);box-shadow:0 16px 30px -18px rgba(18,90,55,.95)} .lux .drawer__call:hover{background:var(--grad-forest)} .lux .cart__head{background:linear-gradient(135deg,var(--green-soft),rgba(255,255,255,0))} .lux .cart__head em{background:var(--grad-green)} .lux .cart__row--total b{font-family:var(--ff-display)} .lux .cart__empty-ic{background:linear-gradient(135deg,#fff,var(--green-soft))} .lux .fabbar{background:var(--glass-2);border-color:rgba(18,58,38,.08); box-shadow:0 18px 40px -18px rgba(18,58,38,.45)} .lux .totop{background:var(--grad-green);box-shadow:0 16px 30px -14px rgba(18,90,55,.95)} .lux .totop:hover{background:var(--grad-forest)} .lux .toast{background:var(--grad-forest);box-shadow:0 20px 40px -18px rgba(18,58,38,.9)} /* ---------- 16. RESPONSIVE ---------- */ @media (max-width:860px){ /* sheets lose their inset on small screens — full-width paper reads better */ .lux .shop>.container, .lux .picks>.container, .lux .videos>.container, .lux .journal>.container{border-radius:20px;padding-inline:var(--pad)} .lux .tabs{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none} .lux .tabs::-webkit-scrollbar{display:none} .lux .ad { height: 220px; } } @media (max-width:620px){ .lux .shop>.container, .lux .picks>.container, .lux .videos>.container, .lux .journal>.container{border-radius:0;border-inline:0;box-shadow:none; background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.55)),var(--sheet,#fff)} /* the hero's phone-width reset used to live here; it is full-bleed at every width now, so §7 covers this breakpoint too */ } /* the header used to soften its blur here — 14px down to 10px — on the grounds that the effect is expensive on low-power devices. It turned out to be expensive everywhere, so §6 drops it at every width and there is nothing left for this breakpoint to soften. */ /* ============================================================ 17. PALETTE OPTIONS — removed ------------------------------------------------------------ This section held five complete colour schemes, swapped at runtime by a button in the bottom-left corner: Market Fresh, Harvest, Orchard Dusk, Turmeric Market and Field Slate. Orchard Dusk is now the only scheme, and its values are declared in section 1 above rather than in a [data-palette] block, so they apply without anything having to select them. The other four are gone, and so is the switcher: its markup in includes/footer.php, its stylesheet rules here, and assets/js/palette.js. A "POSTER SKIN" section also lived here — outlined cut-out cards, hard offset shadows, a leaf weave and leaf heading ticks. It was scoped entirely to [data-palette="fresh"], so it only ever applied to a scheme that no longer exists and went with it rather than being left as several hundred lines that nothing could match. ============================================================ */ /* ============================================================ 18. SECTION SURFACES ------------------------------------------------------------ A tint per section — grounds only. Nothing here touches type, accents, badges or prices: those stay identical page-wide so the catalogue still reads as one shop. Each value is a 4–8% wash, low enough in saturation to sit under the palette rather than fight it. Sheet sections get the tint under their white paper (§8); the full-bleed bands take it directly, which is what gives the page its banded rhythm as you scroll. ============================================================ */ /* --- sheet sections (tint shows through the paper) --- */ .lux .shop{--sheet:#EFF6F0} /* Our Products — green */ .lux .picks{--sheet:#FBF4E7} /* Super Saver Combos — amber */ .lux .picks ~ .picks{--sheet:#FBF0EA} /* Our Best Sellers — clay */ .lux .picks ~ .picks ~ .picks{--sheet:#FAEEF3} /* New Arrivals — rose */ .lux .videos{--sheet:#EEF3FA} /* Videos — blue */ .lux .journal{--sheet:#F3F7E9} /* Latest News — olive */ /* --- full-bleed bands (tint applied straight to the section) --- */ .lux .catstrip{background:linear-gradient(180deg,#F8F4EB,#FBF8F2)} .lux .ads{background:linear-gradient(180deg,#FBF8F2,#F4F6F2)} .lux .highlights{background:linear-gradient(180deg,rgba(255,255,255,.5),#E9F3F1); border-top:1px solid rgba(18,58,38,.08)} /* the hero and the CTA banner keep their own artwork and amber — adding a third colour to either only muddies them */