/* ============================================================================ an-chrome.css — the single source of truth for shared chrome. Added 27 Aug 2026. WHY THIS FILE EXISTS The 69 pages carried EIGHT different CSS profiles. index.html does not load an-town.css at all — it has 54KB of inline CSS instead; the town pages load an-town.css with 959 bytes inline; the content pages load it with 12-13KB inline; the legal pages load neither. The footer and cookie-banner MARKUP is byte-identical on all 69 pages, so every visible difference between them came from which stylesheet happened to win. That is why the footers, banners and heroes all looked slightly different. This file loads LAST on every page, so the chrome resolves identically everywhere regardless of what each page loaded before it. Every colour below is measured, not chosen by eye. Contrast ratios are stated against the ground the text actually sits on. ========================================================================= */ /* --------------------------------------------------------------------------- 1. PALETTE — one definition, reachable from every page ------------------------------------------------------------------------ */ :root{ --zn-paper:#FAF6EE; --zn-band:#F3E7D2; --zn-card:#FFFFFF; --zn-ink:#3E2246; --zn-body:#4A3358; --zn-mute:#6B5477; --zn-link:#A83A2A; /* 5.90:1 on paper, 5.20 on band, 6.36 on card */ --zn-gold:#FFC533; /* 10.2:1 on plum — a DARK-ground colour only */ --zn-gold-lt:#FFD873; /* 11.8:1 on plum */ --zn-gold-dk:#93721D; /* 4.50:1 on white — gold for LIGHT grounds */ --zn-plum:#3E2246; --zn-plum-deep:#231A44; --zn-footer:#1E2126; --zn-line:rgba(62,34,70,.16); } /* --------------------------------------------------------------------------- 2. LINK COLOUR BY GROUND Gold on paper measures 1.47:1 and light gold 1.27:1 — neither is a colour, both are a rumour. On the plum grounds the reverse is true: the ember link drops to 2.08:1. So the rule is decided by the ground, not by the component. ------------------------------------------------------------------------ */ /* light grounds -> ember. !important is needed because one of these links carries an inline style="color:var(--acc)" on the homepage, and inline beats any selector. Buttons are excluded. They are gold or plum PILLS, not body links — an earlier version of this rule repainted "Get a Solar Quote" ember on its own gold pill, which measured 3.40:1. */ .article a:not([class*="btn"]):not([class*="cta"]):not(.start-btn):not(.service-more), .art-lead a:not([class*="btn"]):not([class*="cta"]), .legal-doc a:not([class*="btn"]):not([class*="cta"]), .section-inner > p a:not([class*="btn"]):not([class*="cta"]), .art-block a:not([class*="btn"]):not([class*="cta"]):not(.service-more), .fit a:not([class*="btn"]):not([class*="cta"]), .srow a:not([class*="btn"]):not([class*="cta"]), .step a:not([class*="btn"]):not([class*="cta"]), .faq-wrap a:not([class*="btn"]):not([class*="cta"]), .guide-lede a:not([class*="btn"]):not([class*="cta"]), p.ctaline a:not([class*="btn"]):not([class*="cta"]), .legal-toc a{ color:var(--zn-link) !important; } /* --------------------------------------------------------------------------- 3. LEFTOVER DARK-THEME GREYS #D7D3CB, #C6C2BA and #E8DCEC were body colours when the site was dark. On the paper ground they measure 1.38, 1.65 and 1.23 to one. They survived the light conversion on the guide lede, the closing ctaline and the stat band captions. --zn-body is 10.22:1 on the same ground. ------------------------------------------------------------------------ */ .guide-lede, p.ctaline, .article p, .article li, .section-inner > p:not(.section-subtitle):not(.land-eyebrow):not(.land-note){ color:var(--zn-body) !important; } /* The greys above are not stray values — they are still DEFINED as variables in the page-level inline CSS and used by about twenty-five selectors: --tint #D7D3CB index, solar-battery-guide --mist #E8DCEC terms, privacy-policy --cold-t #D7D3CB index, solar-battery-guide --grid #A5A199 index, solar-battery-guide On the homepage they are correct: every one of those selectors sits on the configurator's plum panel. On the guide and the legal pages the same variables land on paper, at 1.23-1.65:1. Only the light-ground uses are corrected here — redefining the variables globally would break the dark panels that rely on them. */ .guide-toc a{color:var(--zn-link) !important;} .guide-toc{--tint:var(--zn-body);} body.legal .callout, body.legal .callout p, body.legal table.cookies th, body.legal table.cookies td, body.legal .doc p, body.legal .doc ul, body.legal .doc li{color:var(--zn-body) !important;} /* but never repaint text that is sitting on one of the dark bands. Scoped to the band's OWN paragraphs — an earlier version used a descendant selector, which reached inside the white cards standing on those bands and made the Nord Group card copy inherit the band's light text onto white. */ footer .guide-lede, footer p.ctaline, .cta-panel > p, .chero > p, .chero-in > p, .lc-hero > p, section[style*="#1B1E22"] > .section-inner > p, section[style*="#231A44"] > .section-inner > p{ color:inherit; } /* cards keep their own ink wherever they stand */ .gw .gw-body p,.gw .gw-body, .art-block p,.art-block li, .fit p,.srow p,.step p,.service-card p,.why-item p,.num-card p, .contact-block p{color:var(--zn-body) !important;} .gw h3,.art-block h2,.art-block h3,.fit b,.srow h3,.step b, .service-card h3,.why-item b,.num-card b,.contact-block h4{color:var(--zn-ink) !important;} /* except the one card that is deliberately dark */ .gw--field .gw-body p,.gw--field .gw-body{color:#C7D9F0 !important;} .gw--field h3,.gw--field .gw-fb{color:#fff !important;} /* --------------------------------------------------------------------------- 4. FOOTER — layout only. The colours are already correct. an-motion.css repaints the footer as a gold gradient with !important, and the footer logo was swapped to the dark variant to suit it (that PNG averages #231A44). Reading the stylesheets alone suggested the text had been left on the old dark-footer greys — but measuring the live page showed the cascade already resolves footer text to #3A2A10, which is 7.42:1 on the darker gold stop. It is fine. Overriding it to plum would have LOWERED it to 5.91:1, so this file deliberately does not touch footer text colour. What is actually wrong is structural: an-town.css declares four columns for five children, which drops Nord Group onto a row of its own. ------------------------------------------------------------------------ */ .foot-inner{max-width:1200px;margin:0 auto;} .foot-cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; /* five children, five columns */ gap:2rem;align-items:start; } @media(max-width:1200px){.foot-cols{grid-template-columns:1.6fr 1fr 1fr;}} @media(max-width:900px) {.foot-cols{grid-template-columns:1fr 1fr;}} @media(max-width:560px) {.foot-cols{grid-template-columns:1fr;}} .foot-logo{height:52px;width:auto;margin-bottom:1rem;} .foot-brand p{font-size:.88rem;max-width:340px;line-height:1.7;} .foot-col h5{font-family:'Montserrat',sans-serif;font-size:.95rem;font-weight:800;margin-bottom:.8rem;} .foot-col p{font-size:.86rem;margin-bottom:.6rem;line-height:1.65;} .foot-links-v{display:flex;flex-direction:column;gap:.5rem;} .foot-links-v a{font-size:.86rem;text-decoration:none;} .foot-links-v a:hover{text-decoration:underline;} .foot-bottom{border-top:1px solid rgba(35,26,68,.28);margin-top:2.25rem;padding-top:1.4rem;} .foot-legal{font-size:.74rem !important;margin-top:.6rem;line-height:1.6;opacity:.92;} /* Nord Group column: the five entries wrapped 1,2,2,2,1 lines — ragged, because the descriptors are different lengths in a 214px column. Each entry is now a fixed two-line block: brand, then descriptor beneath, so all five are the same height. Both lines keep the footer's own ink; the descriptor is lifted 15% toward the gold, which measures 5.40:1. */ .foot-links-v a .fg-b{display:block;font-weight:700;line-height:1.35;} .foot-links-v a .fg-d{ display:block;font-size:.78rem;line-height:1.35;margin-top:1px; color:#553E13; /* 5.40:1 on #F0B429 */ } .foot-links-v a:hover .fg-d{color:#3A2A10;} /* --------------------------------------------------------------------------- 6. CARD GRIDS — equal heights, equal rows .art-grid carried align-items:start, so cards on the same row ended up 583/825/610px tall. Measured on the live build: three grids, eight uneven rows between them. ------------------------------------------------------------------------ */ .art-grid,.fitgrid,.services-grid,.gw-grid,.areas-cards{ align-items:stretch; } .art-grid>*,.fitgrid>*,.services-grid>*,.gw-grid>*,.areas-cards>*{ height:100%; display:flex;flex-direction:column; } /* the trailing paragraph takes up the slack so the card feet line up */ .art-block>p:last-child,.fit>p:last-child,.service-card>p:last-child{ margin-bottom:0; } .service-card .service-more,.gw .gw-go{margin-top:auto;} /* ---- SITE RULE: every line of a card grid carries the same number of cards. No ragged last row, at any breakpoint. A fixed column count cannot do this, because the right number depends on how many cards the grid actually holds. So each grid is stamped at build time with zn-c{desktop}-{tablet}, chosen so that the count divides exactly: 6 cards -> 3 across, then 2 across, then 1 (3+3 / 2+2+2 / 6x1) 4 cards -> 4, then 2, then 1 (4 / 2+2 / 4x1) 3 cards -> 3, then 3, then 1 (3 / 3 / 3x1) never 2+1 2 cards -> 2, then 2, then 1 9 cards -> 3, then 3, then 1 auto-fit is deliberately not used anywhere on a card grid: it picks the column count from the viewport width, so it produces a short final row at whatever widths happen to fall badly. This was giving 4+2 on .steps across 57 pages and 3+1 on .fitgrid. */ [class*="zn-c"]{display:grid;} .zn-c1-1,.zn-c1-1{grid-template-columns:1fr !important;} @media(min-width:1080px){ .zn-c2-1,.zn-c2-2{grid-template-columns:repeat(2,1fr) !important;} .zn-c3-1,.zn-c3-2,.zn-c3-3{grid-template-columns:repeat(3,1fr) !important;} .zn-c4-1,.zn-c4-2,.zn-c4-4{grid-template-columns:repeat(4,1fr) !important;} } @media(min-width:700px) and (max-width:1079px){ .zn-c2-1,.zn-c3-1,.zn-c4-1{grid-template-columns:1fr !important;} .zn-c2-2,.zn-c3-2,.zn-c4-2{grid-template-columns:repeat(2,1fr) !important;} .zn-c3-3{grid-template-columns:repeat(3,1fr) !important;} .zn-c4-4{grid-template-columns:repeat(4,1fr) !important;} } @media(max-width:699px){ [class*="zn-c"]{grid-template-columns:1fr !important;} } /* --------------------------------------------------------------------------- 7. NORD GROUP CARDS The brand accents were sampled straight from each logo and land at 3.24-3.40:1 on the white card, below AA for 11.5px type. Darkened just enough to clear 4.5:1; the 5px top rule keeps the original hue. ------------------------------------------------------------------------ */ .gw--arctic{--gw-c:#5292B9;--gw-tagc:#457C9D;} /* 3.40 -> 4.54 */ .gw--ember {--gw-c:#E06C2D;--gw-tagc:#BC5A25;} /* 3.31 -> 4.54 */ .gw--aura {--gw-c:#12A093;--gw-tagc:#0E847A;} /* 3.24 -> 4.57 */ .gw--zenith{--gw-c:#ECB53E;--gw-tagc:var(--zn-gold-dk);} .gw {--gw-tagc:var(--zn-gold-dk);} /* 1.58 -> 4.50 */ .gw::before{background:var(--gw-c);} /* SOLARFIELD is deliberately a DARK navy card, so its tag is light blue on navy and already correct. Darkening it here would have made it unreadable — it must be excluded, not corrected. */ .gw:not(.gw--field) .gw-tag{color:var(--gw-tagc) !important;} /* --------------------------------------------------------------------------- 8. PARTNER LOGO STRIP There were two strips doing the same job: .cfg-brands on the homepage with grayscale(1) brightness(1.55) at 40px, and .lc-badges everywhere else with no filter at 60px. The grayscale one washes a white logo out almost to the background. One treatment now, on both. ------------------------------------------------------------------------ */ /* Only the row is laid out here. .cfg-brands also holds its own label, so it must NOT become a flex row itself — that would put the label beside the logos. The homepage keeps its own container; only the marks are normalised. */ .lc-badges,.cfg-brandrow{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:1.4rem 3rem;margin-top:1.4rem; } .cfg-brand{display:inline-flex;align-items:center;} .lc-badges img,.cfg-brands img{ height:56px;width:auto;max-width:200px; object-fit:contain;display:block; filter:none !important; /* was grayscale(1) brightness(1.55) on index */ opacity:.95; /* was .82 on index, .92 on the town pages */ transition:opacity .25s ease,transform .25s ease; } .lc-badges img:hover,.cfg-brands img:hover{opacity:1;transform:translateY(-3px);} @media(max-width:700px){ .lc-badges,.cfg-brandrow{gap:1.1rem 1.9rem;} .lc-badges img,.cfg-brands img{height:42px;max-width:140px;} } /* The strip must sit on a dark ground — these are white-on-transparent marks. an-motion.css already paints section[aria-label="Equipment partners"], and the rebuilt content pages reuse that exact label, so they inherit it. This restates it so the ground cannot go missing if that file is reordered. */ section[aria-label="Equipment partners"]{ background:linear-gradient(180deg,var(--zn-plum-deep),var(--zn-plum)); border-top:1px solid rgba(255,197,51,.18); border-bottom:1px solid rgba(255,197,51,.18); } section[aria-label="Equipment partners"] .land-eyebrow{color:var(--zn-gold-lt) !important;} /* --------------------------------------------------------------------------- 8b. NAVIGATION — the same bar on every page The nav resolves to rgba(10,14,34,.94) everywhere, which is correct. But an-motion.css carries `body.legal a{color:var(--warm) !important}`, and that is not scoped to the document — it repaints the TOP NAV links ember on the dark navy bar, measured at 2.08:1 on /terms. The document keeps the ember link; the chrome does not. The over-broad rule has been scoped at source in an-motion.css. Two rules had to be beaten, not one: removing `body.legal a` alone still left the nav ember, because the legal pages' own inline CSS carries `a{color:var(--blue)}` and --blue resolves to the ember there. The nav carries an id, so an id-based selector settles it for good. Verified against the rendered page, not the computed style. ------------------------------------------------------------------------ */ /* First, the nav is inconsistent with ITSELF on every page: the dropdown toggles ("What we fit", "Learn") are