/* ============================================================= ZenithNord — motion, cards and the yellow/plum accents Added 2026-08-27. Loads LAST, after an-light.css. WHERE EACH PIECE COMES FROM Nothing here is invented. Every pattern is lifted from a sister site that already works, so the four brands read as one family: scroll reveal Nord Group .js-anim [data-rv] / .rv-in card motion EmberNord lift + accent wipe + corner bloom + the rotating numbered chip company cards Nord Group .gw gateway cards, all four brands area cards ArcticNord .area-card + .area-pill THE ACCENTS Yellow was doing too little and the page read flat. It is now the primary accent everywhere — rules, chips, card tops, pills — and the hero's plum (#3E2246 / #231A44, straight off the dawn and sunset gradients) is the second, carrying the footer, the bands and the deep panels. The blue is gone entirely as of the fourth pass — the ground is a warm paper and every heading is plum. ============================================================= */ :root{ --plum:#3E2246; /* dawn gradient, stop 3 */ --plum-deep:#231A44; /* sunset gradient, stop 2 */ --plum-wine:#6E2A3E; /* dawn gradient, stop 4 */ --gold:#FFC533; --gold-lit:#FFD873; --gold-deep:#C8952E; --ember:#E85E14; --ease-out:cubic-bezier(.22,.75,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); } /* ============================================================= 1. SCROLL REVEAL (Nord Group) Nothing is hidden by CSS until the script adds .js-anim to , so if the script fails or the visitor asked for reduced motion the page is simply static and fully visible. Content can never be left invisible by this file. ============================================================= */ .js-anim [data-rv]{ opacity:0; translate:0 22px; transition:opacity .62s var(--ease-out), translate .62s var(--ease-out); } .js-anim [data-rv].rv-in{opacity:1;translate:0 0;} /* the numbered chip pops in just behind its card */ .js-anim .step[data-rv] .cnum, .js-anim .num-card[data-rv] .cnum{ scale:.7;opacity:0; transition:scale .5s var(--ease-pop) .14s, opacity .38s .14s; } .js-anim .step[data-rv].rv-in .cnum, .js-anim .num-card[data-rv].rv-in .cnum{scale:1;opacity:1;} /* the rule under a section title wipes in from the left */ .js-anim .title-rule[data-rv]{ opacity:1;translate:0 0;scale:0 1;transform-origin:left center; transition:scale .85s var(--ease-out); } .js-anim .title-rule[data-rv].rv-in{scale:1 1;} @media(prefers-reduced-motion:reduce){ .js-anim [data-rv], .js-anim .step[data-rv] .cnum, .js-anim .num-card[data-rv] .cnum, .js-anim .title-rule[data-rv]{ opacity:1 !important;translate:none !important;scale:none !important; transition:none !important; } } /* the old always-on fade is replaced by the reveal above */ .reveal{opacity:1 !important;transform:none !important;} /* ============================================================= 2. THE CARD (EmberNord) Four things happen together on hover: the card lifts, an accent bar wipes across the top from the left, a soft accent bloom grows out of the top-right corner, and any numbered chip turns and grows. Applied to every card family on the page so they behave identically. ============================================================= */ .step,.why-item,.num-card,.service-card,.contact-block,.grp-card,.area-card{ position:relative; isolation:isolate; overflow:hidden; transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out), border-color .34s var(--ease-out); } .step>*,.why-item>*,.num-card>*,.service-card>*, .contact-block>*,.grp-card>*,.area-card>*{position:relative;z-index:1;} /* the bar across the top */ .step::before,.why-item::before,.num-card::before,.area-card::before{ content:"";position:absolute;left:0;right:0;top:0;height:4px; background:var(--gold); transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease-out); z-index:2; } .step:hover::before,.why-item:hover::before, .num-card:hover::before,.area-card:hover::before{transform:scaleX(1);} /* an-town.css uses .step::before as the CONNECTOR LINE between the numbered dots on the old vertical timeline, and gives the first and last step their own half-width variants: .step:first-child::before { left:50%; width:50%; } .step:last-child::before { width:50%; } Those are two classes deep and beat the single-class rule above, so on a six-card grid the eyebrow came out half-width on cards 1 and 6 and full width on 2-5. Re-stating them at matching depth is the fix; the timeline they were drawn for no longer exists. */ .steps .step:first-child::before, .steps .step:last-child::before, .why-list .why-item:first-child::before, .why-list .why-item:last-child::before{ top:0;left:0;right:0;width:auto;height:4px; background:var(--gold); transform:scaleX(0);transform-origin:left; } .steps .step:first-child:hover::before, .steps .step:last-child:hover::before, .why-list .why-item:first-child:hover::before, .why-list .why-item:last-child:hover::before{transform:scaleX(1);} /* the bloom out of the top-right corner */ .step::after,.why-item::after,.num-card::after,.area-card::after{ content:"";position:absolute;top:-40px;right:-40px; width:96px;height:96px;border-radius:50%; background:var(--gold);opacity:0;transform:scale(.4); transition:opacity .4s ease, transform .5s var(--ease-pop); pointer-events:none;z-index:0; } .step:hover::after,.why-item:hover::after, .num-card:hover::after,.area-card:hover::after{opacity:.22;transform:scale(1);} .step:hover,.why-item:hover,.num-card:hover,.area-card:hover{ transform:translateY(-7px); box-shadow:0 30px 64px rgba(62,34,70,.20); border-color:var(--gold-deep); } /* the numbered chip */ .cnum{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:11px; background:var(--gold);color:var(--plum-deep); font-weight:900;font-size:1.02rem;line-height:1; margin-bottom:.85rem; box-shadow:0 4px 14px rgba(255,197,51,.34); transition:transform .42s var(--ease-pop), background .42s, color .42s; } .step:hover .cnum,.num-card:hover .cnum{ transform:rotate(-6deg) scale(1.12); background:var(--plum-deep);color:var(--gold); } /* ============================================================= 3. THE THREE SECTIONS THAT READ FLAT "How the numbers actually work" was a two-column table, which is why it was tiring — you had to read every row to find anything. It becomes cards. The seven install stages and the return-detail list get the same card, so all three sections behave alike. ============================================================= */ .steps,.why-list,.num-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.4rem; margin-top:2rem; } .steps::before,.spine::before{display:none;} /* the old vertical spine */ .step,.why-item,.num-card{ background:var(--card,#fff); border:1.5px solid var(--line,rgba(62,34,70,.16)); border-radius:16px; padding:1.7rem 1.5rem; display:flex;flex-direction:column; } .step b,.why-item b,.num-card b{ display:block;font-size:1.1rem;font-weight:800; color:var(--ink,#3E2246);margin-bottom:.55rem;letter-spacing:-.01em; } .step p,.why-item p,.num-card p{ font-size:.93rem;line-height:1.72;color:var(--body,#4A3358);margin:0;flex:1; } /* the question a card answers, above its heading */ .num-card .q{ display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--warm,#A83A2A);margin-bottom:.5rem; } .step::before,.why-item::before{background:var(--gold);} .why-item{border-left:none;} /* ============================================================= 4. COMPANY CARDS (Nord Group .gw) All four brands, the group site's own treatment: logo plate left, trade in the brand's colour, body, then a footed link whose arrow slides on hover. Each card carries its brand accent as --gw-c. ============================================================= */ .gw-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem; } @media(max-width:1000px){.gw-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.gw-grid{grid-template-columns:1fr;}} .gw{ --gw-c:var(--gold); position:relative;display:flex;flex-direction:column;height:100%; background:var(--card,#fff); border:1px solid var(--line,rgba(62,34,70,.16)); border-radius:16px;padding:26px 22px 22px; text-decoration:none;overflow:hidden; transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .24s; } .gw::before{content:'';position:absolute;inset:0 0 auto;height:5px;background:var(--gw-c);} .gw:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(62,34,70,.18);border-color:transparent;} .gw-logo{height:70px;display:flex;align-items:center;margin-bottom:16px;} .gw-logo img{max-height:70px;max-width:100%;width:auto;object-fit:contain;object-position:left center;} .gw-logo .gw-fb{display:none;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink,#3E2246);} .gw-logo.nologo img{display:none;} .gw-logo.nologo .gw-fb{display:block;} .gw-tag{ font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--gw-c);margin:0 0 12px; } .gw-body{flex:1 1 auto;} .gw-body p{font-size:.9rem;line-height:1.65;color:var(--body,#4A3358);margin:0;} .gw-go{ margin-top:18px;padding-top:14px;border-top:1px solid var(--line,rgba(62,34,70,.16)); display:inline-flex;align-items:center;gap:8px; font-size:.86rem;font-weight:700;color:var(--ink,#3E2246); } .gw-go .arw{transition:transform .18s;} .gw:hover .gw-go .arw{transform:translateX(4px);} /* brand accents, sampled from each logo — the group site's own values */ .gw--arctic{--gw-c:#5292B9;} .gw--ember {--gw-c:#E06C2D;} .gw--aura {--gw-c:#12A093;} .gw--zenith{--gw-c:#ECB53E;} /* our own card, marked as the one you are already on */ .gw--zenith{background:linear-gradient(180deg,rgba(255,197,51,.14),rgba(255,197,51,.04));} .gw--zenith .gw-here{ position:absolute;top:14px;right:14px; font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--plum-deep);background:var(--gold); padding:.22rem .5rem;border-radius:999px; } /* ============================================================= 5. WHERE WE WORK (ArcticNord .area-card) Was a flat row of unlinked pills. Becomes ArcticNord's county cards, each one a heading that links to the county page with its towns as pills underneath — which is also the shape that carries the internal linking the town pages need. ============================================================= */ .areas-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;margin-top:2rem; } .area-card{ background:linear-gradient(135deg,rgba(255,197,51,.16) 0%,rgba(255,197,51,.05) 100%); border:1.5px solid rgba(255,197,51,.5); border-radius:16px;padding:1.75rem; box-shadow:inset 0 4px 0 0 var(--gold),0 10px 30px rgba(62,34,70,.10); } .area-card:hover{box-shadow:inset 0 4px 0 0 var(--gold-lit),0 18px 46px rgba(62,34,70,.20);} .area-card h3{font-size:1.15rem;font-weight:800;margin:0 0 1rem;} .area-card h3 a{color:var(--ink,#3E2246);text-decoration:none;transition:color .2s;} .area-card h3 a:hover{color:var(--warm,#A83A2A);} .area-card .area-pills{display:flex;flex-wrap:wrap;gap:.5rem;} .area-card a.area-pill{ font-size:.78rem;color:var(--body,#4A3358); border:1px solid rgba(62,34,70,.24);border-radius:20px; padding:.3rem .8rem;white-space:nowrap;text-decoration:none; transition:border-color .2s,color .2s,background .2s; } .area-card a.area-pill:hover{ border-color:var(--gold-deep);color:var(--ink,#3E2246);background:rgba(255,197,51,.30); } /* ============================================================= 6. MORE YELLOW, AND THE HERO'S PLUM A rule under every section title, plum for the alternating bands and the deep panels, and yellow doing the accent work it was not doing before. ============================================================= */ .title-rule{ display:block;width:104px;height:5px;border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--ember)); margin:.9rem 0 1.1rem; } /* Headings move off the blue and onto the plum. The blue stays as the ground and the body copy; plum now carries every title, which is what makes the yellow/plum pairing read as the brand rather than as two accents on a blue site. 12.6:1 on the page, 13.8:1 on a white card. Titles sitting ON a plum band stay white — those rules are more specific and come later. */ .section-title{ color:var(--plum) !important; margin-bottom:.2rem; } .step b,.why-item b,.num-card b, .service-card h3,.contact-block h4, .area-card h3 a,.zone h3,.srow h3, .split h3,.psplit h3,.grp-card b, details summary{color:var(--plum) !important;} /* the eyebrow above a title, and the small caps labels */ .land-eyebrow,.split-kicker{color:var(--warm) !important;} /* ============================================================= THE PLUM BANDS Yellow and plum is the pairing the site is built on, so the alternating band is plum rather than grey. Every section that takes it is listed here once, and everything that sits on it is coloured once, so a new plum section is a one-line change. Location pages use aria-label because their section has the town name in it — "Our services in Mansfield" — and there are 56 of them with no shared class to hook. ============================================================= */ #process,#group,#what-we-install, section[aria-label="Quote"], section[aria-label="Why choose ZenithNord"], section[aria-label^="Our services in"]{ background:linear-gradient(180deg,var(--plum-deep),var(--plum)) !important; border-top:4px solid var(--gold); } /* copy on the plum */ #process .section-title,#group .section-title,#what-we-install .section-title, section[aria-label="Why choose ZenithNord"] .section-title, section[aria-label^="Our services in"] .section-title{color:#fff !important;} #process .section-subtitle,#group .section-subtitle,#what-we-install .section-subtitle, section[aria-label="Why choose ZenithNord"] .section-subtitle, section[aria-label^="Our services in"] .section-subtitle{color:#E8DCEC !important;} /* White cards lift off the plum. :not(.gw--field) matters — SOLARFIELD keeps its navy, and because this rule carries !important a plain "#group .gw--field{background:...}" could never win against it no matter how specific it was. That is why the SOLARFIELD card stayed white with a white-ink logo on it through two attempted fixes: the first missed the specificity, the second was still losing to this !important. */ #process .step,#group .gw:not(.gw--field){ background:#fff !important; border-color:rgba(255,255,255,.18) !important; box-shadow:0 18px 44px rgba(10,8,20,.30) !important; } #process .step:hover,#group .gw:hover{ box-shadow:0 30px 64px rgba(10,8,20,.42) !important; } /* The service cards wear their yellow bar as an INSET box-shadow, not a border — so the flat "0 18px 44px" above wiped it out, and with it the hover state that swaps the bar to ember. The drop shadow has to carry the inset along with it. That is what lost the eyebrows and the animation. */ #what-we-install .service-card, section[aria-label^="Our services in"] .service-card{ background:#fff !important; border-color:rgba(255,255,255,.18) !important; box-shadow:inset 0 4px 0 0 var(--gold),0 18px 44px rgba(10,8,20,.30) !important; } #what-we-install .service-card:hover, section[aria-label^="Our services in"] .service-card:hover{ transform:translateY(-7px); box-shadow:inset 0 4px 0 0 var(--ember),0 30px 64px rgba(10,8,20,.42) !important; } /* the stats strip — 0% VAT, EV miles, MCS, counties */ section[aria-label="At a glance"]{ background:linear-gradient(180deg,var(--plum-deep),var(--plum)) !important; border-top:4px solid var(--gold); } section[aria-label="At a glance"] .statband{ border-top:none !important;border-bottom:none !important; } section[aria-label="At a glance"] .statband b{color:var(--gold) !important;} section[aria-label="At a glance"] .statband span{color:#E8DCEC !important;} /* The link pills under "What we do" were dark red, which was right on a light ground and unreadable on plum. */ #what-we-install .inline-links a, section[aria-label^="Our services in"] .inline-links a{ color:#FFD873 !important; border-color:rgba(255,216,115,.42) !important; background:rgba(255,255,255,.05) !important; } #what-we-install .inline-links a:hover, section[aria-label^="Our services in"] .inline-links a:hover{ background:var(--gold) !important;color:var(--plum-deep) !important; border-color:var(--gold) !important; } /* ============================================================= COMMON QUESTIONS The FAQ carried an inline background:#1B1E22, which the light theme was catching and turning into --band. That made it a THIRD ground — neither the paper above it nor the plum bands elsewhere — which is why it read as not belonging. It joins the plum bands, and the accordions are restyled for a dark ground. ============================================================= */ #faq{ background:linear-gradient(180deg,var(--plum-deep),var(--plum)) !important; border-top:4px solid var(--gold); } #faq .section-title{color:#fff !important;} #faq .section-subtitle{color:#E8DCEC !important;} #faq details{ background:rgba(255,255,255,.05); border:1px solid rgba(255,197,51,.20) !important; border-radius:12px; margin-bottom:.7rem; padding:0 1.15rem; transition:background .25s var(--ease-out),border-color .25s var(--ease-out); } #faq details:hover{background:rgba(255,197,51,.10);border-color:rgba(255,197,51,.42) !important;} #faq details[open]{background:rgba(255,197,51,.12);border-color:var(--gold) !important;} #faq summary{ color:#fff !important; padding:1.05rem 0; font-weight:700; } #faq summary .plus{color:var(--gold) !important;} #faq details p,#faq details li{color:#E8DCEC !important;} #faq details a{color:var(--gold) !important;} /* the engineering quote — plum ground, gold rule, gold attribution */ section[aria-label="Quote"] .quoteband{ border-left-color:var(--gold); padding-left:2rem; } section[aria-label="Quote"] .quoteband p{color:#fff !important;} section[aria-label="Quote"] .quoteband cite{color:var(--gold) !important;} /* ============================================================= "WHY ... CALLS US BACK" Four numbered rows of unbroken prose on a flat ground. Same content, given the card the rest of the site uses so the eye has edges to work with. ============================================================= */ /* an-town.css builds this as a numbered TIMELINE, not cards, and the leftovers were fighting the grid: .spine { padding-left:3.4rem } <- indented the whole grid .spine::before { the vertical rule } .srow { position:relative; padding:0 0 2.2rem } .srow .num { position:absolute; left:-3.4rem } <- chip OUTSIDE the card .srow h3 { color:#fff } <- white on a white card .srow p { color:#D7D3CB } The chip being pulled 3.4rem to the left of its own card is why the first one looked misplaced, and the white heading is why the writing vanished. Every one of those is overridden below rather than relied on to lose a specificity contest, because this section has to survive an-town.css loading before it on 56 pages. */ section[aria-label="Why choose ZenithNord"] .spine{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) !important; gap:1.4rem !important; margin-top:2rem !important; padding-left:0 !important; position:static !important; } section[aria-label="Why choose ZenithNord"] .spine::before{display:none !important;} /* These were white cards with plum text and it still could not be read, so they are dark cards with white text instead — which cannot fail whichever rule wins the background, because both are set here together. A deeper plum than the band behind them, with a gold top edge, so they still read as raised rather than as a hole in the section. */ section[aria-label="Why choose ZenithNord"] .srow{ position:relative !important; background:#160F2E !important; border:1px solid rgba(255,197,51,.28) !important; border-top:4px solid var(--gold) !important; border-radius:16px !important; padding:1.7rem 1.5rem !important; box-shadow:0 18px 44px rgba(8,5,18,.42) !important; display:flex !important;flex-direction:column !important; overflow:hidden;isolation:isolate; transition:transform .34s var(--ease-out),box-shadow .34s var(--ease-out); } section[aria-label="Why choose ZenithNord"] .srow:hover{ transform:translateY(-7px); box-shadow:0 30px 64px rgba(10,8,20,.42) !important; } section[aria-label="Why choose ZenithNord"] .srow .num{ position:static !important; left:auto !important;top:auto !important; width:38px !important;height:38px !important; border-radius:11px !important; display:inline-flex !important;align-items:center;justify-content:center; background:var(--gold) !important;color:var(--plum-deep) !important; border:none !important; font-weight:900 !important;font-size:1.02rem !important; margin-bottom:.85rem !important; box-shadow:0 4px 14px rgba(255,197,51,.34); transition:transform .42s var(--ease-pop),background .42s,color .42s; } section[aria-label="Why choose ZenithNord"] .srow:hover .num{ transform:rotate(-6deg) scale(1.12); background:var(--plum-deep) !important;color:var(--gold) !important; } section[aria-label="Why choose ZenithNord"] .srow h3, section[aria-label="Why choose ZenithNord"] .srow h3 *{ font-size:1.1rem !important;font-weight:800; color:#FFFFFF !important;margin:0 0 .55rem !important; } section[aria-label="Why choose ZenithNord"] .srow p, section[aria-label="Why choose ZenithNord"] .srow p *, section[aria-label="Why choose ZenithNord"] .srow li{ font-size:.93rem !important;line-height:1.72; color:#E8DCEC !important;margin:0 !important;flex:1; } section[aria-label="Why choose ZenithNord"] .srow a{color:var(--gold) !important;} /* ============================================================= "THE ROOFS HERE, AND WHAT THEY DECIDE" A tabbed panel of long prose with nothing to break it up. The tabs become proper pills and the panel becomes a card, so the run of text has a container rather than floating on the page. ============================================================= */ #an-local-detail .zsw{ display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0 1.2rem; } #an-local-detail .zsw button{ font-size:.82rem;font-weight:700; padding:.55rem 1.1rem;border-radius:999px; border:1.5px solid var(--edge,rgba(62,34,70,.30)); background:transparent;color:var(--body,#4A3358);cursor:pointer; transition:background .2s,color .2s,border-color .2s; } #an-local-detail .zsw button:hover{border-color:var(--gold-deep);background:rgba(255,197,51,.18);} #an-local-detail .zsw button[aria-selected="true"]{ background:var(--gold);border-color:var(--gold); color:var(--plum-deep);box-shadow:0 4px 14px rgba(255,197,51,.30); } #an-local-detail .zone{ background:var(--card,#fff); border:1.5px solid var(--line,rgba(62,34,70,.16)); border-top:4px solid var(--gold); border-radius:16px;padding:1.8rem 1.7rem; box-shadow:0 8px 26px rgba(62,34,70,.10); } #an-local-detail .zone h3{ font-size:1.15rem;font-weight:800;color:var(--ink,#3E2246);margin:0 0 .7rem; } #an-local-detail .zone p{ font-size:.95rem;line-height:1.75;color:var(--body,#4A3358); } #an-local-detail .zone p+p{margin-top:.9rem;} /* the closing call to action, in plum rather than flat ink */ .cta-panel{background:linear-gradient(135deg,var(--plum-deep),var(--plum-wine)) !important;} /* statband figures carry the gold */ .statband b{color:var(--warm,#A83A2A);} /* ============================================================= 7. THE FOOTER It was a pale grey band and it died at the bottom of the page. It is now the brand yellow with the hero's plum as its ink, which is 10.2:1 and the strongest pairing the palette has. ============================================================= */ footer{ background:linear-gradient(180deg,var(--gold) 0%,#F0B429 100%) !important; border-top:5px solid var(--plum-deep) !important; color:var(--plum-deep) !important; } footer h5{color:var(--plum-deep) !important;letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;} footer p,footer a,footer .foot-col a,footer .foot-bottom p{color:#3A2A10 !important;} footer a{text-decoration:none;transition:color .2s;} footer a:hover{color:var(--plum-deep) !important;text-decoration:underline;} footer .foot-legal{color:#5A4620 !important;} footer .foot-bottom{border-top:1px solid rgba(35,26,68,.24) !important;} /* The logo ships white-on-transparent, which vanished on the yellow. It was getting a plum plate to survive, which looked like a patch. There is now a footer variant of the artwork instead — sun recoloured white, wordmark recoloured plum — so it sits directly on the yellow with no plate, and can be run larger. See assets/zenithnord-logo-footer.png. */ /* Sized the way the rest of the site sizes it — height-driven, width auto — just larger than the original 52px. Setting width:auto AND height:auto made it width-driven off the 1540px source instead, which changed the whole proportion of the footer. */ footer .foot-logo{ background:none;padding:0; height:78px;width:auto;max-width:100%; margin-bottom:1rem; } /* SOLARFIELD's lockup is white-on-navy and is not a Nord brand, so its card carries the navy rather than white — the same treatment the Qualis site gives it. */ /* SOLARFIELD's lockup is white-on-navy and it is not a Nord brand, so its card carries the navy rather than white — the treatment the Qualis site gives it. These carry #group deliberately. The band rule above is "#group .gw", which is id+class and outranks a bare ".gw--field" — so the plain class version of this lost to the white background and put a white logo on a white card. Matching its specificity is the fix; !important would work too but would then have to be fought again by anything later. */ #group .gw--field{ --gw-c:#0B3D7C; background:#05214D !important; border-color:#05214D !important; } #group .gw--field .gw-tag{color:#8FB6E8 !important;} #group .gw--field .gw-body p{color:#C7D9F0 !important;} #group .gw--field .gw-go{color:#fff !important;border-top-color:rgba(255,255,255,.22) !important;} #group .gw--field .gw-fb{color:#fff !important;} #group .gw--field:hover{border-color:var(--gold) !important;} /* The two links closing the group section — "Qualis Energy" and "How we work". .inline-links a is the dark red used on light grounds, and this section is plum, so they were unreadable. Only #what-we-install had been given the light treatment; this one had been missed. */ #group .inline-links a{ color:#fff !important; border-color:rgba(255,255,255,.34) !important; background:rgba(255,255,255,.06) !important; } #group .inline-links a:hover{ background:var(--gold) !important; color:var(--plum-deep) !important; border-color:var(--gold) !important; } /* ============================================================= 8. THE FIGURE CARDS The three figures are drawn on a 760x300 canvas, but their plate was running the full column width — about 1198px — so the SVG was being scaled up a little over 1.5x and the block stood ~470px tall. Everything inside grew with it: 10.5px labels rendering at 16.6px, a card far bigger than the drawing needed. Capped near the artwork's own width and centred, so the figure sits at roughly its drawn size and the card is only as big as the thing inside it. ============================================================= */ .psplit-art{ display:block !important; /* index's inline CSS had this as flex, which put the caption BESIDE the drawing, inside the plate, instead of underneath it */ max-width:min(860px,100%); margin-left:auto;margin-right:auto; padding:.55rem .55rem .15rem; } /* index's inline CSS forces aspect-ratio:4/3 on these — written when the figures really were 4:3. Mine are 760x300, so the browser made a 4:3 box and preserveAspectRatio letterboxed the drawing inside it: a small figure marooned in a tall plate. Let the viewBox decide the height. */ .psplit-art svg{ width:100% !important; height:auto !important; aspect-ratio:auto !important; display:block; } /* EVERY FIGURE DEFINES ITS OWN INK. The drawings are painted with var(--sun), var(--acc) and friends. Those were only ever declared in index.html's inline