/* Glow Electrical Contracting — concept 4, "Current". Built off their NEW brand identity, submitted 13 Aug 2026, not the old gold Wix look concepts 1 to 3 are built on. Client's own words: "Sharp. Trusted. Current." Dark, minimal, technically confident, premium. Reference sites they named: westcork.com.au, tesla.com/en_au, newageelectricalco.com.au, havenelectrical.com.au. Palette, sampled not guessed: #2D6CA3 the plug in ring, sampled straight off their PDF logo pack #545454 their own stated grey Black + white, per their own brand colour list. NOTE (18 Aug 2026): the van's vivid #0082DD was previously used here as a decorative glow. It has been REMOVED entirely — glowing blue accents are 22 Electrical Works' signature and were the single biggest reason the two client sites read as the same template. See the palette block below. */ /* --------------------------------------------------------------------------- PALETTE, revised 18 Aug 2026 — deliberate separation from 22 Electrical Works. Josh at 22EW is also a Scalus client and also an electrician in Melbourne's east, and side by side the two sites read as one template. 22EW's ground is #0B0E14 / #080B10, a COLD BLUE BLACK (hue ~220), its accent is #00A2E2 cyan used as a glow on almost every element, and its text is #E8EBF0, a cool grey. Glow now moves the opposite way on the colour wheel: a WARM GRAPHITE ground (hue ~25, a black carrying their own #545454 grey plus a trace of warmth) and a WARM PAPER text colour, with #2D6CA3 demoted to a STRUCTURAL colour — rules, borders, hairlines, small type accents — never a glow. Every rgba(45,108,163,...) box-shadow and radial "glow" in this file was removed in the same pass. The two grounds are now ~40 degrees of hue and opposite temperatures apart, which is the difference you can see at a glance. Contrast, computed not eyeballed, with every translucent layer composited down onto the ground behind it first: --fg on --ink 16.75:1, on --ink-2 15.67, on --ink-3 14.17 --fg-mute (72%) 8.96 / 8.57 --fg-mute2 (55%) 5.51 on --ink-2, 4.88 on the deepest ground --ink-4 --blue-dk #709bc0 as text: 6.35 / 5.94 / 5.37 / 4.70 across the four grounds, so it passes 4.5:1 everywhere it is used, including on --ink-4 which the old #6291BA failed at 4.14. white on raw --blue 5.55, so buttons are unchanged. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- THEME LAYER, added 18 Aug 2026 — light and dark, defaulting to the visitor. Tim: "the site needs to have light and dark modes, and make it default to the user ... then have the option for light and dark ... on bottom left." How it works, and why it is built this way: 1. A tiny inline script in stamps data-theme on BEFORE first paint, reading localStorage first and prefers-color-scheme second. Setting it after paint is the classic failure here: the page renders in the wrong theme for a frame and reads as broken. 2. Everything below is a TOKEN swap on that one attribute. No duplicated stylesheet, no per-component light variants — the components were already written against tokens, so the whole site follows automatically. 3. The bare :root selector carries the dark values as well, so a visitor with JavaScript off still gets a complete, correct dark site rather than an unstyled one. The light theme is deliberately NOT a generic white template. It keeps the same warm axis the dark theme is built on: a warm paper ground (hue ~35) and a warm near-black ink, so it reads as the same brand with the light switched on. 22EW has no light mode at all, and the warm/cold separation that keeps the two apart is carried by both of Glow's themes. --------------------------------------------------------------------------- */ :root{ --blue:#2D6CA3; /* the plug in ring, sampled off their PDF logo pack */ --blue-lt:#3A7AB8; /* their own stated upper end of the blue range */ --on-blue:#ffffff; --grey:#545454; --gold:#E0A32E; /* the review stars, see the star block below */ --gold-glow:224,163,46; } /* --------------------------------------------------------------------------- DARK — the ground the brand was designed on, and still the default when the visitor has no stored choice and no system preference. --------------------------------------------------------------------------- */ :root, :root[data-theme="dark"]{ color-scheme:dark; --blue-dk:#709bc0; /* on-dark text safe on all four grounds, >=4.70:1 */ --blue-line:rgba(45,108,163,.42); /* structural rules and borders */ /* warm graphite ground — their grey warmed, NOT 22EW's blue black */ --ink:#141210; --ink-2:#1C1917; --ink-3:#252220; --ink-4:#302C29; --ink-rgb:20,18,16; --fg:#F5F2EE; /* warm paper, not 22EW's cool #E8EBF0 */ --fg-rgb:245,242,238; --fg-mute:rgba(245,242,238,.72); --fg-mute2:rgba(245,242,238,.55); --line:rgba(245,242,238,.10); --line-2:rgba(245,242,238,.18); --tint-1:rgba(245,242,238,.045); /* a barely-there raise off the ground */ --tint-2:rgba(245,242,238,.028); --mesh:rgba(245,242,238,.05); /* the hero texture and hex divider lines */ --ft-bg:#08090a; --scrim:rgba(12,13,15,.75); /* photo tags, pinned bar, chat panel */ --glass-bg:rgba(21,23,26,.55); --glass-hi:rgba(255,255,255,.09); --glass-hi-2:rgba(255,255,255,.16); --glass-line:rgba(255,255,255,.14); --sh:0 24px 60px rgba(16,12,8,.5); /* the lockup is white on every placement now — see the note on .sec-invert .form-brand. Nothing reads these two any more (the artwork is resolved in the markup at build time), but leaving them pointing at the dark files would hand the next person the wrong answer. */ --logo-h:/media/brand/logo-horiz-white.png; --area-map:url(/media/service-area.svg); --area-map-sm:url(/media/service-area-sm.svg); --logo-s:/media/brand/logo-stacked-white.png; --theme-icon-sun:1; --theme-icon-moon:0; } /* --------------------------------------------------------------------------- LIGHT — warm paper, warm ink. Contrast, computed with every translucent layer composited down onto what sits behind it, never read off the raw rgba: --fg #171412 on --ink #F6F3EE 16.02 : 1 --fg on --ink-2 #EFEAE2 15.02 : 1 --fg-mute (74%) on --ink 9.28 : 1 --fg-mute2 (58%) on --ink 5.67 : 1, on --ink-3 #E6DFD4 5.19 : 1 --blue-dk #1F5A8C on --ink 6.31 : 1, on --ink-3 5.77 : 1 white on --blue #2D6CA3 5.55 : 1 (buttons unchanged) --blue-dk had to be DARKENED for this theme rather than reused: the dark theme's #709bc0 lands at 2.4:1 on warm paper, which is the single most common way a theme swap ships an unreadable link colour. --------------------------------------------------------------------------- */ :root[data-theme="light"]{ color-scheme:light; --blue-dk:#1F5A8C; --blue-line:rgba(45,108,163,.34); --ink:#F6F3EE; --ink-2:#EFEAE2; --ink-3:#E6DFD4; --ink-4:#DBD3C6; --ink-rgb:246,243,238; --fg:#171412; --fg-rgb:23,20,18; --fg-mute:rgba(23,20,18,.74); --fg-mute2:rgba(23,20,18,.64); /* 58% measured 4.10 on --ink-3 and in the footer */ --line:rgba(23,20,18,.12); --line-2:rgba(23,20,18,.22); --tint-1:rgba(23,20,18,.045); --tint-2:rgba(23,20,18,.03); --mesh:rgba(23,20,18,.05); --ft-bg:#E7E0D6; --scrim:rgba(246,243,238,.82); --glass-bg:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.55); --glass-hi-2:rgba(255,255,255,.75); --glass-line:rgba(23,20,18,.14); --sh:0 24px 60px rgba(60,44,28,.14); --logo-h:/media/brand/logo-horiz-light.png; --area-map:url(/media/service-area-light.svg); --area-map-sm:url(/media/service-area-light-sm.svg); --logo-s:/media/brand/logo-stacked-light.png; --theme-icon-sun:0; --theme-icon-moon:1; } :root{ /* Type, chosen by rendering "GLOW" beside the actual logo file in six Fontshare display candidates (Supreme, Nippo, Excon, Technor, Panchang, Chillax) at matched size and picking by eye, not by name. Supreme's W has the same pointed apex as the logo's W, its O is the same wide near perfect circle as the plug ring, and its G is a plain open geometric form like the mark's, where Excon's G carried a stylised terminal spur the logo doesn't have and Technor's cut corners fought the logo's clean even strokes. Switzer pairs as the quiet workhorse: a neutral geometric grotesk built for exactly this loud/quiet split (see the Scalus type library's own "Clash Display + Switzer" trades pairing), legible small, and nowhere near the banned Inter/Space Grotesk default set. */ --disp:"Supreme",system-ui,sans-serif; --text:"Switzer",system-ui,-apple-system,"Segoe UI",sans-serif; /* Editorial / spec-sheet layout language. 22EW is a 1240px wrap with 16px radius pill-button cards on a 104px section rhythm — a conventional stacked marketing site. Glow goes wider and squarer: a 1320px measure so the type can run big and the compositions can go asymmetric, a 3px radius that reads as a drawn rule rather than a rounded card, and a warm shadow instead of a black one. Michael's own references are Tesla and West Cork. */ --wrap:1320px; /* Tim, 18 Aug: "have rounded corners" on the work cards. 10px, not 16px. 22EW's signature is a 16px pill-radius card that lifts and glows on hover, and the sharp 3px was part of deliberately not being that. 10px reads as intentionally rounded while staying visibly tighter than theirs, and the rest of the separation is structural rather than cosmetic: Glow keeps the hairline-ruled numbered spec-sheet sections and the no-lift card hover. Applied through the shared token so it lands on every card at once, not just the three Tim was looking at. */ --r:10px; --ease:cubic-bezier(.22,1,.36,1); --mono:"Supreme",ui-monospace,SFMono-Regular,Menlo,monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--fg-mute); font-family:var(--text);font-size:17px;line-height:1.66;font-weight:400; overflow-x:hidden;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;height:auto} a{color:inherit} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;color:var(--fg);margin:0; line-height:1.06;letter-spacing:-.01em} p{margin:0 0 1em} .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto} section[id],article[id],#hero-quiz{scroll-margin-top:96px} @media(max-width:640px){section[id],article[id],#hero-quiz{scroll-margin-top:86px}} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--disp);font-weight:600;font-size:14.5px;letter-spacing:.06em; text-transform:uppercase;text-decoration:none;cursor:pointer; padding:16px 28px;border-radius:var(--r);border:1.5px solid transparent; min-height:54px;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease; } .btn:hover{transform:translateY(-2px)} .btn-pri{background:var(--blue);color:var(--on-blue)} .btn-pri:hover{background:var(--blue-lt)} .btn-gho{border-color:var(--line-2);color:var(--fg)} .btn-gho:hover{border-color:var(--blue-dk);color:var(--blue-dk)} .btn-ink{background:var(--fg);color:var(--ink)} .btn-ink:hover{background:#fff} .btn-sm{padding:11px 19px;min-height:44px;font-size:13px} .btn[disabled]{background:var(--ink-3);color:var(--fg-mute2);box-shadow:none;transform:none;cursor:not-allowed} /* ---------- header ---------- */ .hd{position:sticky;top:0;z-index:60;background:rgba(var(--ink-rgb),.86); backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid var(--line)} .hd-in{display:flex;align-items:stretch;gap:22px;min-height:76px} .brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto} .brand img{height:32px;width:auto} /* --------------------------------------------------------------------------- NAV ALIGNMENT (Tim, 18 Aug: "make sure these all line up properly"). The old rule hung a `border-bottom` off each while the row was `align-items:center`, so the underline sat at the bottom of each link's own box rather than on one shared baseline, and the boxes were different heights because some items are links and one is a