The user wants a really beautiful hero section for a UK electrician company's website, in HTML/CSS (in a single self-contained file per my delivery constraints). They said "in html/css" — so I should lean heavily on CSS, but I can use JS sparingly if needed. They said html/css specifically, so I'll keep it primarily HTML/CSS — maybe minimal or no JavaScript. Let me honor that: pure HTML + CSS is actually a nice constraint and shows craft. Maybe a tiny bit of JS for a counter animation, but honestly I can do counters with CSS? No, counters need JS for animation. I could do it without JS entirely — pure CSS animations. That would be impressive: zero JS. Actually, let me think about what makes a memorable electrician hero: Concept ideas: 1. Dark, dramatic "power" theme — deep midnight navy/charcoal with warm amber/yellow light. Electricity = light in darkness. A signature moment: an interactive light switch? A CSS-only toggle that turns the hero's lights on/off? That could be a signature moment — a working light switch in the hero that, when flipped, changes the entire scene from "day/bright" to "evening with warm glow" or vice versa. Pure CSS with a checkbox hack. That's memorable and on-brand for an electrician. 2. Electric arc / sparkline animation — a CSS-drawn circuit line that animates a pulse traveling along it. 3. Big editorial typography with a word highlighted by an animated "current" underline. Let me design: - Company name: something British-sounding. "Volt & Co."? "BrightSpark Electrical"? "Hartley & Volt"? Let's do "Volthouse" or "Ampthill"? UK electricians often named like "Smith Electrical Ltd". Something with character: "J. Whitfield Electrical"? Or "Voltline"? Let me go with "Hartley & Son Electrical" — feels like a family-run UK trade. Or "BrightSpark" is a bit cliché. Maybe "VOLTEDGE"? Hmm. Let me pick "Watts & Co." — a pun on watts, sounds like a family firm ("Watts the electrician"). Actually "Watts Electrical" — nice. Or "John Watts Electrical — since 1987". I like that: "Watts Electrical Ltd" with "Est. 1989" and "NICEIC Approved" badges — real UK credibility markers (NICEIC, Part P, Which? Trusted Trader). Layout thinking (avoid generic centered hero with gradient): - Full-viewport hero, dark charcoal (#12100c-ish warm dark) with warm amber (#ffb020 / #f5a623) accent — electric amber, not blue/purple. Amber/yellow is the natural "electric warning/light" color for electricians and avoids blue-purple. - Asymmetric composition: left column big editorial headline, right side a signature visual. - Signature visual: a detailed CSS/SVG illustration? They said HTML/CSS — I can inline an SVG. An SVG line-art of a house with a glowing filament/circuit? Or a big animated "filament bulb" — a drawn bulb whose filament flickers with a warm glow, tied to the light-switch interaction. Signature moment plan: A real, working toggle switch (UK rocker style or old-school dolly switch) mounted on the hero. Flipping it toggles a class (via :checked) that: - Turns the scene from "night mode" (dark, moody, filament glowing warm) to... hmm, actually the more dramatic version: default is lights ON (warm, readable, amber glow). Flipping the switch turns lights OFF — the hero goes dark, the bulb filament goes dark, and then tiny "emergency" elements: the headline's key word gets an outlined glow? Hmm, maybe off-state should still be usable: in "off" state, the scene goes moody-dark, a beam light dims, and a caption appears "Power cut? We answer in 4 rings." with an emergency line glowing. That's a narrative: flip the switch off → power cut → emergency electrician message appears. That's storytelling! Signature moment achieved. So: - Default (switch ON): warm bright-ish dark charcoal with amber accents, everything lit. - Switch OFF: lights out — background deepens to near-black, the bulb goes out, the "daylight" stats dim, and an "POWER CUT?" emergency strip lights up in the darkness with the 24/7 number pulsing like a beacon. Genius — the hero itself demonstrates the emergency service. Pure CSS via :has() or the checkbox sibling selector. `#switch:checked ~ ...` — need DOM ordering: put the checkbox at the top of body/hero so later siblings can respond. Also an animated current pulse traveling along a decorative circuit line (CSS keyframes on an SVG path with stroke-dashoffset, or CSS-only with a positioned dot along a border path). SVG with animate is fine inline. Typography: I need a distinctive font, not Inter/Roboto. For an electrician with craft: a strong condensed/grotesque display. Options from Google Fonts: - "Archivo" (Expanded weights) — strong industrial. - "Space Grotesk" — bit overused in AI stuff. - "Fraunces" — editorial serif, interesting contrast for a trade? Could be lovely: warm serif + technical mono. - "Sora"? "Manrope"? meh. - "Bricolage Grotesque" — characterful, has optical sizes, feels crafted. Good choice. - Pair with "IBM Plex Mono" or "JetBrains Mono" for labels/technical details (voltage readings, certifications) — mono labels give the "spec sheet" electrician feel. I'll go with Bricolage Grotesque for display + IBM Plex Mono for technical labels. Warm palette: - Background: #141210 (warm near-black) / paper #f4efe6? Actually decide: dark hero feels right for electricity/light. Warm charcoal #17140f, ink lines #2a251d, amber #f7a600 (electric amber), warm cream text #f5ecd9, dim text #8a8172. - No gradients as decoration — but a radial light glow around the bulb is *literal light*, which is diegetic, not decorative gradient abuse. I'll keep it subtle and purposeful — a soft radial warm glow emanating from the bulb is justified since it represents actual lamplight. I'll keep it restrained. Structure: 1. Top bar: logo (custom SVG bolt-in-circle mark) + wordmark "WATTS & SON — ELECTRICAL", nav (Services, About, Safety, Contact), phone number right, and "NICEIC Approved" chip. Keep minimal. 2. Main hero grid: - Left: mono kicker "NICEIC APPROVED · PART P · EST. 1989", massive headline like "Good wiring is invisible. Bad wiring isn't." or "The current under every calm home." Hmm. Editorial headline options: - "We keep the lights on." — simple, strong, ties to the switch interaction. - "Power, handled properly." - "Your home's electrics, done once, done right." - I like: "We keep South London's lights on." with a strong typographic treatment, and the word "lights" subtly glows/flickers. Or big line: "GOOD WIRING / IS INVISIBLE." with sub "So is our work — until the day it saves your house." Hmm. - Let me do: line 1 "We keep the" line 2 "lights on." — with "lights" having an animated flicker/glow. Then subcopy: "Watts & Son — NICEIC-approved electricians serving Greater London since 1989. Rewires, EV chargers, fault-finding and 24/7 callouts, done once and done right." - CTAs: primary solid amber "Book an electrician" + secondary outlined "24/7 emergency: 020 7946 0821" (use 020 7946 0xxx which is the Ofcom drama range — safe fictional UK number). - Trust strip: three small stats but NOT equal cards — inline text with dividers: "4.9★ 1,200+ Which? reviews" — wait, no emoji; use SVG star. Stats like "35 yrs on the tools", "12,400 jobs signed off", "60 min avg. emergency response". Presented as a single ruled line with mono numerals, not card boxes. - Right: the bulb illustration — a large drawn filament bulb (SVG) hanging from a cord from the top of the hero, with the pull-cord? Ooh — alternative interaction: a pull-cord light switch (bathroom style)! A hanging cord with a toggle... but click targets on a thin cord are fiddly. A proper wall switch plate is more solid. Let me combine: the bulb hangs from the ceiling (cord from top edge), and below/near it a mounted UK light switch plate (a dolly toggle) labeled with mono text "MAIN SUPPLY — ON". Flip it down → lights out. Actually maybe simpler and stronger: the switch plate IS in the hero right side, and the bulb hangs. The switch is a CSS checkbox styled as a rocker switch: real 3D-ish plate with screws (no cheap gradients — but subtle shading for physical realism is fine and diegetic; I'll use restrained box-shadows and a couple of tones, keeping it crafted rather than gradient-slathered. A physical switch kind of needs some shading; I'll do it with flat tones + inset shadows, tasteful). 3. Emergency layer (visible when OFF): the whole scene dims; a strip/panel lights up: "POWER'S OUT? Don't sit in the dark." + "020 7946 0821 — a human answers, day or night." Maybe the phone number becomes the only lit element, glowing like a beacon. Also small text "Board tripping? Burning smell? Call first, act safe." Safety copy adds authenticity. 4. Bottom of hero: a marquee-less ruled ticker? Maybe a thin line with mono items: "REWIRES / FUSE BOARDS / EV CHARGERS / EICR REPORTS / LANDLORD CERTS / SMART LIGHTING" separated by small bolt glyphs. Static (or slow CSS scroll). A subtle scrolling ticker in mono is nice texture, but "repeated identical" — a ticker is fine, it's a list, not filler cards. I'll make it a marquee with CSS animation, pausing on hover. Actually with pure CSS a marquee needs duplicated content — acceptable. Also decorative circuit trace: an SVG polyline running from the switch plate across the background to the bulb — with a moving pulse (small bright dash traveling). When OFF, the pulse stops (animation-play-state: paused) and the trace goes dim. That reinforces the circuit concept. Let me also add a tiny "live voltage" readout in mono that changes? Without JS it can't change randomly... I could use CSS steps() to cycle content? CSS can't change text. With JS I could. The user said "in html/css" — I'll respect that strictly: ZERO JavaScript. That's a flex and matches their ask. Everything with CSS only. Flicker animation on "lights" word: subtle opacity/glow keyframes — like a filament waver. Use text-shadow? Glowing titles — I said I dislike glowing titles as decoration... but here the word "lights" glowing is diegetic (it represents a light). Hmm, my own taste: a faint warm tint flicker, not a heavy neon glow. I'll do a gentle flicker of color/brightness, restrained, plus underline by a thin animated current line. Keep glow minimal — mostly a color flicker from cream to amber with slight blur? I'll do flicker via keyframes on opacity/color, with a very slight text-shadow only during the "on" peaks. Actually to be safe and tasteful: animate the color between cream and amber and a nearby "spark" cursor? Let me design: the word "lights." in amber with a hand-drawn-ish SVG underline that pulses. And a rare flicker (opacity dips) like mains hum. Subtle. Bulb SVG design: - Cord: vertical line from top with a small ceiling rose (circle) at top. - Bulb: classic A-shape: circle glass + screw base (rectangles) + inner filament (zigzag path). - Glow: SVG radial gradient circle behind bulb, opacity tied to state. Diegetic light — fine. - Filament: stroke amber with a flicker animation (filter? use opacity pulsing). - Light rays? Skip; keep clean. Switch plate design (CSS): a rounded rect plate (#e8e2d4 cream plastic — UK switches are often cream/white or brass; cream fits palette), two screws top/bottom (small circles), a rocker dolly in the middle that flips. The rocker: a vertical pill that translates/rotates. Simplest convincing rocker: a rectangle with an inner "dolly" that switches which half is raised. Using a checkbox: when checked, transform: translateY + rotateX? Without perspective it's flat; I can fake with a skewed highlight. Alternative: a rotary knob? Or classic toggle lever (US style)? UK dolly switch: a rectangular protrusion. I can do: outer dolly frame; inner rocker with ::before top half and ::after bottom half; ON state: top half appears pressed in (darker, inset shadow), bottom out. OFF: reverse. That's a genuinely convincing trick used in CSS switch recreations. Let me implement: .rocker { position:relative; width:44px; height:88px; background:#f3eee2; border-radius:6px; } Top pressed (ON): ::before (top half) gets inset shadow + slightly darker; ::after (bottom half) raised (lighter + drop shadow). Or even simpler and quite convincing: the whole dolly tilts — transform: rotateX with perspective on parent. With `perspective` on the plate and `transform: rotateX(12deg)` vs `rotateX(-12deg)` on the dolly, it reads as a physical rocker instantly. Yes! Use perspective. ON = rotateX(-14deg) (bottom out, top in) hmm sign depends. Add a small "I / O" or "ON/OFF" mono labels above/below the dolly. And a faint amber indicator LED? A tiny amber dot that's lit when ON, dark when OFF — nice diegetic detail. Click affordance: label wrapping checkbox, cursor:pointer, focus-visible ring for a11y (outline). Also keyboard accessible for free since it's a checkbox. Scene state changes via `#power:checked` sibling selectors — checkbox must be an earlier sibling of everything it controls. I'll place `` as the first child of ``... but body styling? Fine. Or first child of hero. Everything state-scoped to hero: put it as first child of the hero

, then all following siblings can be selected with `#power:checked ~ ...` and `#power:not(:checked) ~ ...`. But nav is inside hero too? Let me structure hero as the whole page (it's just a hero section demo): header + hero content + ticker all inside one

, with checkbox first. Wait — the label can be anywhere; the input must precede the elements it affects in DOM. OK. Default state: checked = ON (lights on). Unchecked = OFF (power cut → emergency mode). Emergency mode changes: - Background darkens: hero background from #17140f to #0b0a08 (transition 0.5s). - Bulb glow/filament fade out; filament goes dark grey. - Circuit trace dim; pulse animation paused. - Amber accents dim to dull bronze; text dims slightly. - Emergency panel: initially hidden/dark, lights up: appears in lower-left or replacing stats — it slides up with a lit amber border? Let me place it where the stats strip is: in OFF mode, stats strip gets replaced/crossfaded by the emergency banner. Position both in same grid area, crossfade + slight translate. - Emergency banner content: left: mono red? No — keep amber/cream; a pulsing amber dot + "24/7 EMERGENCY CALLOUT"; big phone number in display font; small line "Board tripping? Burning smell? Isolate at the mains and call us." and "Avg. 47 min to your door." - The phone number could gently pulse like a beacon (opacity/glow keyframes, subtle). - Also maybe the headline dims and its amber word flickers out? Cute: when off, "lights." word turns grey. Also nice: the background of the hero could have a very subtle blueprint grid or wall texture? A faint vertical wall line where the switch is mounted — the switch sits on a subtle "wall" panel delineated by a thin border line, like a section of wall. I'll add a faint skirting-board line at bottom? Could be overkill. A subtle vertical rule behind the switch suggesting a wall edge, plus the switch's drop shadow grounds it. I'll include a faint dotted guide line from the switch to the circuit trace: the trace starts at the switch, runs across to the bulb cord — telling the story "this switch powers this bulb". Circuit trace SVG: absolutely positioned full-hero SVG with a path: from switch plate → right angle → across → up to bulb cord top? The bulb hangs from top center-right. Path: M switchX switchY → horizontal to bulbX → vertical up to bulb. With small right-angle corners (rounded). Animated dash pulse: a short bright segment traveling along using stroke-dasharray + dashoffset animation on a duplicate path. Implementation: path stroke #2c271e (idle), overlay same path stroke amber width 2 with dasharray like "18 1400" and animate dashoffset from 0 to -(total). Use pathLength="100" to normalize! Set pathLength="100" on the path, dasharray "6 94", animate dashoffset 100→0 loop. That works great with pure CSS keyframes on stroke-dashoffset. SVG path can carry pathLength attribute. Bulb flicker: keyframes on filament opacity (0.75~1) and glow scale/opacity slightly, e.g. 7s loop with occasional dips. Use steps or precise percentages. Ticker at bottom: mono uppercase items with bolt separators (SVG bolt inline, tiny). Marquee: track duplicated, translateX(-50%) loop 30s linear infinite, pause on hover. Border-top thin line. Also on OFF state, ticker dims. Nav: left logo: bolt SVG inside a circle outline + "WATTS & SON" in display font, small "ELECTRICAL · LONDON" mono under or beside. Center/right links: Services, Rewires, EV Chargers, About — mono or medium weight. Right: phone chip: "020 7946 0821" mono + "Book a visit" small solid button? Keep nav airy. Add "NICEIC" text badge. Also a nice detail: a vertical mono caption on the far right edge, rotated: "EST. 1989 — putney, london SW15" writing-mode: vertical-rl. Adds editorial texture. Responsiveness: - Under 1024px: hide/simplify the bulb+switch column or move switch inline. Keep the interaction — maybe stack: headline first, then a row with bulb (smaller) + switch. Or keep switch anchored bottom-right. Simplest robust: at ≤960px, the illustration column becomes a horizontal band under the CTAs: bulb smaller on left, switch on right, circuit simplified (hide the long trace or keep short). I'll use CSS to reposition; SVG trace might be awkward responsive — I can make the trace with absolutely positioned divs (two lines) instead? An SVG with viewBox and preserveAspectRatio="none" positioned between known anchor points is tricky responsively. Alternative: draw the trace as border-based L-shape divs positioned relative to the switch and bulb containers. Hmm. Better plan: place switch and bulb inside one "board" area (right column), and draw the trace within that column's coordinate space (an absolutely-positioned SVG covering the right column, with the switch and bulb placed at known relative positions). Since both endpoints live in the same column, one SVG with viewBox and absolutely positioned bulb/switch at percentage coordinates that match the path endpoints. To keep alignment exact: put the bulb and the switch INSIDE the SVG coordinate space? I can make the bulb part of the SVG (it's vector anyway), and only the switch is HTML (needs to be a real form control overlaying the SVG at the path start). If the SVG uses preserveAspectRatio and I position the switch with percentages... misalignment risk across sizes. Alternative: make the right column fixed-width (e.g., 380–460px) on desktop, so coordinates are stable. On mobile, scale the whole column with transform: scale() based on media queries? Transform scale keeps proportions — set column at fixed px size and scale it down at breakpoints (e.g., @media (max-width:...) { .board { transform: scale(.8) } }). That preserves the internal SVG/switch alignment perfectly. Even simpler: at small screens, hide the circuit trace SVG and just show bulb above switch in a simple flow — lose the connecting line on mobile, acceptable. Actually the trace is a nice detail; losing it on mobile is fine if the composition still holds. Hmm, but the "switch powers bulb" story needs the connection implied... On mobile they can be adjacent: bulb left, switch right, with a short horizontal trace between them via a simple div line. Workable. Let me define the right column ("board"): position relative, width 440px, height ~560px (desktop). Contains: - SVG (absolute inset 0, viewBox="0 0 440 560") with: cord from top at x=300: ceiling rose at y=40, cord line down to bulb at y~170; bulb drawn at (300, 240) glass r=52; filament inside; glow circle behind. - Trace path: starts at switch location. Switch at (110, 400) center, plate 96x150? UK plate ~ 86x86 square for 1-gang. Plate 92x92 at (110, 410) center. Trace: M 158 410 (right edge of plate) H 300? then up to cord junction... but the cord is the power line conceptually; connecting to bulb glass bottom? Real wiring goes to the rose. Path: M 156 410 L 300 410 L 300 96 (rose) — nice: the current travels through the wall to the ceiling rose then down the cord to the bulb. Rounded corners: use path with quadratic corners: M156 410 H288 Q300 410 300 398 V110 ... to rose at y=88. - Then HTML switch overlay positioned at left:64px top:364px (plate 92 wide => center 110). Switch plate HTML on top of SVG. Bulb design in SVG: - Glow: radial gradient amber→transparent. Diegetic. - Glass: circle cx300 cy240 r54 fill rgba(255, 214, 140, 0.08)? plus stroke cream thin. Slight highlight arc. - Neck + screw base: below circle: small rect transitions (trapezoid path) + 3 thread lines, then a small tip. Base color: #3a352c strokes with cream threads? Brass? Cream/gray metal. - Filament: path zigzag between two contact posts: M282 258 L282 244 ... a classic "double loop": I'll draw: two support wires from base up into glass, connected by a zigzag "W" filament: e.g., M284 262 V236 L292 252 L300 224 L308 252 L316 236 V262. Stroke amber 2.5, round caps, with class "filament" animated (flicker: opacity + slight stroke-width). In OFF: filament stroke #4a443a, no animation. - Maybe tiny "spark" stars around bulb? Skip, keep clean. OFF state transitions: use CSS transitions on fill/stroke/opacity — SVG presentation attributes via CSS work (fill, stroke, opacity as CSS properties). Now the layout grid for hero main: .hero-inner { display:grid; grid-template-columns: minmax(0,1fr) auto; } Left content max-width ~ 640px with padding. Right: the board column. Left column content: - Kicker row: small amber bolt icon + mono "NICEIC APPROVED CONTRACTOR — EST. 1989" with letter-spacing. - H1: display font, huge (clamp(3rem, 7vw, 6.5rem)), lines: "We keep" (cream) "the lights on." with "lights" wrapped in span.lights (amber, flicker). Maybe better line breaks: "We keep the / lights on." — Hmm "We keep the lights on." is 5 words; break as "We keep / the lights on." Big and punchy. - Sub: "Watts & Son is a family-run electrical firm covering West and South-West London. Rewires, consumer units, EV chargers and EICR certificates — signed off first time, guaranteed for five years." Keep to ~2 lines. - CTA row: primary button (amber bg, dark text, slight arrow icon): "Book an electrician"; secondary: text-link style with phone icon: "020 7946 0821" labelled "24/7 emergency". Buttons: solid amber with dark text, hover: slight translate + darker amber; secondary: underlined mono with arrow. - Stats rule: a single horizontal line with three inline stat blocks separated by vertical hairlines: "38 yrs — family run", "12,400+ — jobs signed off", "47 min — avg. emergency response". Numbers in display font, labels mono small. Not boxed — ruled inline list. On OFF state this crossfades to emergency panel — actually better: keep stats but dim them heavily, and slide the emergency panel up from below the CTAs? Space is limited. Alternative: emergency panel overlays the stats area (same grid cell, two children stacked with grid-area, crossfade via opacity + visibility). Yes: .statbar and .emergency both in same cell; .emergency initially opacity 0, pointer-events none, translateY(12px); OFF: reverse. Emergency panel design: bordered (1px amber-ish) dark panel, left amber pulse dot, content: mono label "POWER CUT / EMERGENCY", big number, note. Height similar to stats to avoid jump — stats ~90px, emergency can be ~120px; slight height change acceptable since it's a state change (transition will shift layout...). To avoid janky layout shift, give the cell a fixed min-height covering both. Fine — actually a small layout shift when switching is okay-ish, but smoother with fixed area. I'll set the shared container height to fit the emergency panel, stats vertically centered. Hmm wait: also think about whether the OFF emergency replacing stats is discoverable. Add a mono caption near the switch: "try me — flip the main switch" with a small pointing arrow? A little invitation label: mono, dim: "↳ flip the mains". Without emoji, use an SVG arrow or text arrow "↳"? Unicode arrows are fine (not emoji). I'll draw a tiny curved arrow SVG from label to switch for craft. Or simpler: a dashed line + label. Keep it subtle. Also: sound? No. Fonts via Google Fonts CDN: Bricolage Grotesque (weights 400..800, maybe use 'opsz' axis; specify family=Bricolage+Grotesque:opsz,wght@12..96,400..800) and IBM Plex Mono (400,500,600). Icons: I said use an icon library for small icons; but with zero-JS and single file, inline SVG icons are my icon set (hand-drawn inline SVG is better than a library for a pure HTML/CSS file — and it counts as proper icons, not emoji). I'll inline: bolt, phone, arrow-right, star, shield/check, arrow-down-right. Consistent 1.5px stroke style. Colors palette (warm, restrained): --bg: #16130e (warm charcoal) --bg-off: #0a0908 --panel: #1d1913 --line: #2e2820 --cream: #f2e9d8 --dim: #9b8f79 --amber: #f6a712? Let's pick #ffb020? Electric amber: #F5A700 / #FFB020. Use --amber: #f2a20c and a brighter --amber-hi: #ffc84a for filament. Danger red? For emergency maybe a warm signal amber is enough; keep unified — amber only + cream + neutrals. One idea one color: amber carries everything. Background texture: subtle noise? CSS noise via repeating radial? I can add a very faint SVG feTurbulence noise as a data-URI background with low opacity — adds material feel. Keep opacity ~0.04. Also a faint radial vignette darkening corners (diegetic room feel) — subtle. Also large background word? Like a huge outlined "240V" watermark? Could be nice texture: giant mono outline "240V ~50Hz" faint behind right column? Or vertical "SUPPLY: 230V AC" mono text along the left edge, rotated. I'll add rotated vertical mono text on the far left: "SINGLE PHASE · 230V · 50HZ · RCD PROTECTED" in dim color. Editorial, electrician-specific. Header details: top hairline border under nav. Nav links hover: amber underline slide (background-size trick). Phone number in nav: mono with phone icon. The "hero" should also gracefully fill viewport: min-height: 100vh (use 100svh) with ticker pinned at bottom of hero (not fixed). Use flex column: header, main (flex:1), ticker. Switch markup: ... dolly ... screws ... labels ... Place input as first child of

. All subsequent selectors: #power:checked ~ ... Note: the switch itself is inside .board which is deep in the tree — sibling combinator works from the input's level: #power ~ .hero-main .board .switch-plate? The input and .hero-main would be siblings if input is direct child of section and .hero-main too. Header, hero-main, ticker, svg-bg all siblings of input. State selectors (write both directions; default checked=ON): - OFF (unchecked): #power:not(:checked) ~ .scene ... Apply a class-based approach: I'll style defaults as ON, and use #power:not(:checked) to override to OFF. Transitions on the affected properties. Elements affected: 1. .hero (section) background-color: ON #16130e → OFF #0a0907. 2. body noise/vignette constant. 3. .glow (SVG radial circle) opacity 1→0; .filament stroke color amber→#4d4536, animation stopped; .bulb-glass stroke dim; .bulb-fill (inner subtle fill) → transparent. 4. .circuit-pulse (animated dash) opacity 1→0 and animation-play-state paused; .circuit-base stroke → dimmer. 5. .statbar → hidden; .emergency → shown. 6. .lights (headline word) color amber→#6b6252; its underline animation pause. 7. .tick (ticker) opacity .9→.35. 8. .led (switch indicator) — ON: amber glow dot; OFF: dark. 9. .dolly rotateX flip. 10. Switch plate label text "MAINS" + tiny "ON/OFF" — maybe a small engraved text that stays. 11. Left vertical voltage text dims. 12. Nav? Slightly dim too (whole scene dimming) — apply to a wrapper: put dimming on individual pieces or use a common transition. Could set `.hero-inner`/content opacity? If I dim everything uniformly except the emergency, it's simpler: #power:not(:checked) ~ .hero-main .col-left .kicker, h1, sub, ctas → opacity .55? But emergency panel is also in col-left... I'll dim: header, h1, sub, kicker, ctas, stats(hidden anyway), ticker, vertical texts, board idle strokes. Emergency gets full brightness. The phone CTA secondary (emergency number) maybe stays lit since it's relevant! Nice touch: the secondary "24/7 emergency" number stays at full brightness even when everything dims — because in a power cut that's what you need. I'll deliberately keep it bright. Transitions: ~.6s ease for colors; dolly transform .15s; emergency panel .5s delay .15s. Extra micro-details for craft: - Selection color: amber bg dark text (::selection). - Focus-visible outlines amber. - Buttons: primary with subtle press state (translateY(1px)). - Hover on primary: background shifts to lighter amber + arrow nudges right. - The bulb glass reflection: small arc highlight. - Ceiling rose: concentric circles. - Add tiny "spider bracket"? overkill. - Add falling dust? no. - Hint label near switch: ".hint" mono dim: "MAIN SUPPLY — try flipping it" with a small hand-drawn arrow. On OFF, hint changes? Can't change text via CSS. Two hint spans crossfade: "flip the mains" (ON) → "flip it back" (OFF)? Cute: after flipping off, hint says "flip it back on". I'll do dual-span crossfade — delightful. Accessibility: aria-label on the checkbox input ("Main power switch"). The label wraps? Use separate. Add role="switch"? For a checkbox, adding role="switch" is reasonable with aria-checked managed by browser? role="switch" on checkbox needs aria-checked to reflect; browsers do map checked state to aria-checked automatically for checkbox role... For role="switch" they may not. Keep simple: input checkbox with aria-label; fine for a demo. Also prefers-reduced-motion: reduce — disable animations/marquee. Ticker items: "FULL & PART REWIRES", "CONSUMER UNITS", "EICR CERTIFICATES", "EV CHARGE POINTS", "SMART LIGHTING", "FAULT FINDING", "LANDLORD REPORTS", "OUTDOOR POWER" — separated by small bolt SVGs. Marquee duplicate list aria-hidden for the clone. Star rating: "4.9/5 · 620 Which? Trusted Trader reviews" maybe in stats: replace "family run 38yrs"? Keep 3 stats: "38 yrs on the tools", "12,400 jobs signed off", "4.9★ 620 reviews" — star as SVG. Labels mono beneath? Inline: number big + label small under. Ruled row: display:flex; gap; dividers via border-left. That's fine (not cards). Nav phone: mono "020 7946 0821" — good. Buttons: "Book an electrician". Also add a small "scroll" indicator? It's just a hero; skip or add thin down arrow at bottom-left near ticker? Skip. Headline font sizing: Bricolage Grotesque at 96 optical size, weight 700-800, tight letter-spacing (-0.02em), line-height 0.98. Cream color. "lights." amber with .flicker animation. Flicker keyframes (mains hum): mostly 1 opacity with quick dips at odd times: @keyframes flick { 0%,100%{opacity:1} 3%{opacity:.6} 5%{opacity:1} 42%{opacity:1} 43%{opacity:.75} 44%{opacity:1} 71%{opacity:.85} 72%{opacity:1} } duration 6s. In OFF, word is grey and animation... keep subtle flicker even off? Dead wire shouldn't flicker; stop it. Now, the trace pulse: .pulse path with pathLength=100? pathLength attribute applies to that path. dasharray: "8 92"; keyframes dashoffset { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } } wait direction: decreasing dashoffset moves dash forward along path direction. from 0? Let me think: dash pattern starts at path start offset by dashoffset. Animating dashoffset from 100 to 0 moves pattern toward... increasing offset shifts pattern backward. Standard marching ants: animate from 100 to 0 gives movement in path direction? For dashoffset decreasing, dashes appear to move forward (toward end). Actually offset shifts the pattern start backwards along the path when increased; so decreasing offset 100→0 moves dashes forward. Either direction loops seamlessly since pattern period 100 = total length: offset 100 ≡ 0 mod 100, seamless. Good. Duration ~2.2s linear infinite. Delay a bit after load. Add a second pulse with delay for rhythm? One clean pulse is enough; maybe two (delay 1.1s offset) to feel like AC? Cute: two pulses = alternating current feel. I'll add two. Also add subtle "junction" dots at trace corners (small circles) that light amber when ON, dim when OFF. Switch plate visual details: - Plate: 100x100? UK single rocker plate ratio square ~ 86x86. Let's do 96x96, border-radius 10px, background #ece4d3 (cream plastic), border 1px #d8cfba? plus outer shadow (0 12px 24px rgba(0,0,0,.45)) and inner top highlight (inset 0 1px 0 rgba(255,255,255,.5)). Screws: 6px circles with slot line (::before rotated). - Dolly area: center, width 34, height 62, perspective: 160px on plate; dolly background #f6f0e2, border-radius 5, border 1px rgba(0,0,0,.12), transition transform .18s; ON: rotateX(16deg)? Decide: rocker ON = top pressed in → top edge recedes → rotateX positive? rotateX positive rotates top away (into screen) when transform-origin center: rotateX(20deg) tips top backward. So ON: rotateX(18deg); OFF: rotateX(-18deg). Plus shadow under the protruding edge: ON → bottom protrudes → shadow below dolly: box-shadow: 0 4px 6px rgba(0,0,0,.25). OFF → top protrudes → shadow above: 0 -4px 6px. Can switch via :checked selectors. Also a subtle ridge line at dolly middle? Add ::after center horizontal groove line. - LED indicator: small 5px dot above dolly: ON amber with tiny glow (diegetic indicator light); OFF transparent/dark. - Engraved text: plate bottom area tiny mono "MAINS" letterspaced #a99e87; plus "ON"/"OFF" micro labels either side of dolly? Space tight; put "ON" above dot and "OFF" below? Actually put tiny vertical "I"/"O"? Keep: LED dot + "MAINS" at bottom. - Plate mounted on wall: behind plate, a faint wall panel: .wall { position:absolute; } maybe a 160x200 rounded rect slightly darker/lighter than bg with hairline border, so the switch reads as mounted. Plus the trace exits from plate right edge through a small grommet. Board composition (desktop): board width 460, height 600? Bulb top-right at (300, ~230), switch lower-left at (~120, 430), trace connecting with right angles, plus maybe a second stub line going off-canvas bottom-right to imply the rest of the house ("→ kitchen ring final" tiny mono label along the trace? Cute: tiny labels "L1" "N" "E"? or "to: upstairs lighting"). Add a small branch: from corner (300,398) continue down-right off board to edge with label "UPSTAIRS LIGHTING →"? Hmm the trace from switch goes right then up to rose. Add a second branch from the same junction down to bottom edge labeled "…and the rest of the house". Might clutter; one tiny mono label near trace: "2.5mm² · 6A lighting circuit" — electrician spec adds authenticity. Place dim mono text along horizontal run. Bulb glow: radial gradient in SVG defs; circle r=120 at bulb center. Also a broader scene glow? A large soft radial behind right column to suggest the bulb lighting the wall — that's diegetic room light. Keep subtle (opacity .12 cream-amber). When OFF it goes 0. I could even brighten slightly the left column near bulb? Too complex; skip. Also let the bulb swing gently? A slow pendulum sway (transform-origin at cord top, rotate ±1.5deg, 6s ease-in-out infinite) adds life — subtle aliveness. With glow attached inside same group so it moves together. Nice. Reduced-motion disables. Header: also include a tiny "Which? Trusted Trader" text badge? Keep nav: logo left; center links (hide on mobile); right: phone + button. Mobile: logo + phone icon button + hamburger? Without JS, a hamburger can be details/summary or checkbox... scope creep. Mobile nav: just logo + "Book" button + phone icon. Hide links ≤860px. Fine. Ticker: bottom border-top and border-bottom hairlines, height ~56px, mono 12px letterspaced dim, items uppercase with bolt separators, marquee 28s. On hover pause. ON state maybe ticker items cream-dim; OFF → dim more. Emergency panel: [ dot pulsing ] 24/7 EMERGENCY CALLOUT (mono, amber) "020 7946 0821" big display amber (beacon pulse: subtle opacity 1→.75? maybe a soft glow — restrained) "Tripped board, burning smell, total outage — isolate at the mains and call. A human answers, day or night. Avg. 47 min to your door." Border-left 2px amber; background #141009. Also crossfade: statbar opacity→0 translateY(-6px), emergency opacity→1 translateY(0). Container fixed min-height ~120px, both grid-stacked (display:grid; > * { grid-area: 1/1 }). Let me also consider the "hero" left/right proportions: left flexes, right board fixed 460px; on ≤1180px board scale .85; ≤1024: move board below? Let me plan breakpoints: - ≥1200: side by side, board 460px. - 900–1200: board scales (transform-origin top right) to .8, columns still side by side; reduce h1 size via clamp anyway. - ≤900: stack: left content first, then board (scaled .8, centered/left), height auto — board fixed height 600*.8=480; give container height 500 with transform origin top left. Or simpler: keep board unscaled but reduce to width 380 with new coordinates? Scaling via transform is easier and pixel-consistent. I'll wrap board in .board-wrap with height set to scaled height per breakpoint and .board { transform: scale(s); transform-origin: top left; }. Hmm, on very small screens (<380px) board 460*.62 — still fine. Edge: on mobile the circuit trace endpoints inside SVG remain aligned because everything inside .board scales together — including the HTML switch if it's positioned absolutely inside .board. But wait: the emergency panel + stats are in the left column; on mobile they stack below CTAs — fine. Also the "hint" (flip the mains) should be near the switch — put inside board, absolutely positioned near plate: e.g., left of plate below: text + curved arrow SVG pointing to plate. ON: "Go on — flip the mains" ; OFF: "Flip it back on". Two spans absolutely stacked, crossfade. Vertical rotated text on far left of viewport: "SINGLE PHASE — 230V — 50Hz — RCD PROTECTED" writing-mode vertical, dim, hidden <1100px. Noise overlay: data-uri feTurbulence SVG as body::after fixed, pointer-events none, opacity .05, mix-blend overlay? Keep normal blend low opacity. Vignette: hero::before radial-gradient transparent center → rgba(0,0,0,.5) edges? That's a gradient but diegetic room shadow; subtle. Actually with the bulb glow doing the work, a mild vignette grounds it. Keep very subtle. In OFF state, deepen vignette (everything darker) — the emergency number stays lit. Maybe in OFF, add a faint cool moonlight? No — keep unified: pure darkness with amber beacon. Transitions of many properties — define utility: transition: color .5s, background-color .5s, border-color .5s, opacity .5s, fill .5s, stroke .5s. Buttons: .btn-primary { background: var(--amber); color: #1a130a; font-weight 600; padding 14px 22px; border-radius: 8px? For trade brand maybe squarer: 6px. Hover: background #ffc14d? plus translateY(-1px), shadow amber-ish subtle? Shadow of amber might read glow; use dark shadow. Arrow icon shifts 3px. Active: translateY(0). } .btn-ghost / .tel-link { mono? Use display font medium with underline offset; icon phone. } Nav CTA: "Book a visit" small amber-outline? Use amber solid small. Headline maybe include a third line? "We keep the lights on." is strong alone. Add a thin amber "current" underline beneath "lights" — an SVG squiggle? A simple 3px line that "energizes": background line with traveling dash? Under text: use a span with position relative; ::after line amber, and animate a brighter segment via gradient? A moving highlight on the underline: linear-gradient(90deg, transparent, amber, transparent) background-size 40% animate background-position — that's a gradient but as a moving current pulse — diegetic again (it's literally current). Hmm, I could instead put a small dot traveling along the underline... CSS can't easily run a dot along a straight line except translateX animation — do that: ::after = hairline underline; ::before = 18px amber segment translating across, with soft edges via border-radius, opacity fade at ends. Simple and effective. ON only. Also decorative: maybe a huge outlined "⚡"? No. Word "lights." period amber too. Sub copy width ~54ch. Header height ~76px, border-bottom 1px var(--line). Logo mark: circle 34px with bolt SVG centered, stroke cream; wordmark "WATTS & SON" display 700, letter-spacing .02em, with "ELECTRICAL · LONDON" mono 10px dim underneath. Compact two-line lockup. Links: mono 12px uppercase letterspacing 1.2px? Or display 500 15px. I'll use mono uppercase — technical vibe. Phone in nav: display 600 15px with phone SVG; plus tiny "24/7" mono above? Keep single line + separate small amber button "Book a visit". Also NICEIC chip near logo? Put in kicker instead. Kicker: [bolt icon] "NICEIC APPROVED CONTRACTOR · PART P REGISTERED · EST. 1989" mono 11-12px dim with amber separators "·". Maybe first token amber. Stats numbers: display 700 ~28px cream; labels mono 11px dim uppercase. Star icon amber 14px inline before 4.9. Let me now write the SVG board coordinates concretely. Board: width 460, height 620 (desktop). viewBox "0 0 460 620". Positions: - Ceiling rose: cx=300, cy=52 (three concentric circles r=16/10/4, stroke dim cream). Cord from rose bottom (300, 62) down to bulb top. Bulb glass center (300, 210), r=56. Cord length 62→154 (glass top at 210-56=154). - Screw base: glass bottom at (300,266). Neck trapezoid from y 262→276 width 26→34; threads: 3 lines across base y 278,286,294 width ~34→30; bottom tip small rounded rect y 296→306. Metal color: #574f40 stroke, fill #221d15? For dark bg: base fill #2b251b with stroke #6b6151, thread lines #6b6151. - Contact posts inside glass: from base up: left post x=286 from y=268 to 236; right post x=314 from y=268 to 236. Filament zigzag: M286 236 L293 246 L300 222 L307 246 L314 236 — a nice "M" shape. Stroke #ffc24d, width 3, linejoin round. Plus tiny center dot where filament peaks? no. - Glow: circle cx300 cy210 r=130 fill url(#gGlow). Radial gradient: 0%: rgba(255,183,64,.55) → 40%: rgba(255,157,20,.18) → 100% transparent. Also large room glow: circle r=230 fill url(#gRoom) opacity .16 (rgba(255,190,90,...)). These are light, justified. - Glass fill: rgba(255, 200, 120, 0.07) with stroke rgba(242,233,216,.35) 1.5. Highlight arc: path arc top-left inside: M 262 180 A 46 46 0 0 1 292 164 stroke rgba(255,255,255,.25) width 3 round. - Switch: plate HTML at center (120, 460): plate 96x96 → left 72, top 412. Trace starts at plate right edge: (172, 460) → H to 288 → corner → V up to (300...) wait rose at cx 300: corner at (300-12=288? Let me do rounded corner radius 12: M 172 460 H 288 Q 300 460 300 448 V 70 (into rose bottom 62? stop at 66). Base trace stroke #3a331f? On-state base stroke #332c1e, 2px. Over it, pulse path same d, stroke var amber-hi, width 2.5, pathLength 100 dasharray "7 93". - Junction branch: from (240, 460) V down to 620 (bottom edge) — a branch leaving downward with a small terminal arrow; label along it? Rotated text inside SVG: with mono 10px fill dim "TO: UPSTAIRS LIGHTING" transform rotate(90) at x... place at (252, 540) rotated. Plus junction dot at (240,460) r=4. - Corner dots: at (288,460)? junction dots at path corners: (300,448)? Add small circles r=3 amber (ON) at (240,460) and (300,448)? The corner is curved; place dot at (240,460) only + maybe at trace start (176,460). Keep 2 dots. - Spec label along horizontal run: . Might collide with branch; place at x=196 y=450. Bulb sway: group #lamp (cord+rose? rose fixed to ceiling; sway should pivot at rose: put cord+bulb+filament+glow in with transform-origin 300px 52px; animation sway 7s ease-in-out infinite alternate? rotate(-1.6deg)→(1.6deg). SVG CSS transform-origin works in modern browsers with transform-box: fill-box? Set style="transform-origin: 300px 52px" via CSS with `transform-box: view-box`? transform-box: view-box makes origin relative to viewBox — good: .lamp { transform-box: view-box; transform-origin: 300px 52px; } Hmm transform-box: view-box is supported. Use it. Glow inside lamp group moves with sway — physically glow would too; fine. Board HTML:

? (faint mount panel behind switch) must be OUTSIDE/BEFORE content — remember sibling selector constraint: input must precede everything it controls. If input is inside .board at top, then #power:checked ~ selectors only reach elements after it inside .board — not the left column. So input must be placed as first child of the hero section (before header). Then its visual switch (label) lives inside .board — the label is fine anywhere. So:

...

...left...right(board with )...

CSS selectors: #power:not(:checked) ~ .hero-main .board .filament { ... } etc. And #power:not(:checked) ~ .ticker, #power:not(:checked) ~ header. Hide the raw input: position absolute, opacity 0, but keep focusable; on focus-visible, outline the label: #power:focus-visible ~ .hero-main .switch-plate { outline: 2px solid var(--amber); outline-offset: 4px; } Good a11y. Left column dimming in OFF: #power:not(:checked) ~ .hero-main .copy > *:not(.emergency-stack)... simpler: give classes. Elements: .kicker, h1, .sub, .ctas, .statbar. Rule: #power:not(:checked) ~ .hero-main .copy .kicker, ... { opacity:.5 } and .ctas .btn-primary opacity .55, but .tel-link stays 1. Ticker dim: opacity .35. Board idle parts dim: filament stroke → #4a4133; glow opacity 0; glass stroke dim; trace base stroke → #221d13; pulse opacity 0 + paused; junction dots fill dim; rose stroke dim; base metal dims slightly; room glow 0. Sway animation-play-state paused? In darkness a bulb wouldn't visibly sway — pause it. And hint crossfade. Header dim: #power:not(:checked) ~ header { opacity:.45 } except phone? Header phone should stay visible! Keep header dim but exclude .nav-tel? If header opacity .45 dims everything inside. Instead dim header via child selectors excluding tel: messy. Alternative: don't dim header at all, or dim only nav links+logo: #power:not(:checked) ~ header .nav-links, header .brand { opacity:.4 }. Fine. Emergency panel in OFF gets full brightness + its beacon. Also maybe in OFF the background's vignette strengthens: hero::after (vignette layer) opacity ON .5 → OFF 1 with darker gradient? Use two layered radial gradients constant, and animate opacity of a darker overlay. Simple: .hero::after { background: radial-gradient(120% 90% at 68% 30%, transparent 40%, rgba(0,0,0,.55) 100%); } constant; plus in OFF add another overlay .blackout? Could set hero background transition + increase vignette opacity via a dedicated element .shade with transition. I'll add .shade div (absolute inset 0, bg radial dark edges + slight full dark rgba(0,0,0,.25)), opacity 0 ON → 1 OFF, transition .8s. z-index above background/svg but below content? It should also darken the bulb (already dark) — place it above svg wiring but below board content? Bulb is in svg... shade above whole .board but below emergency? If shade covers board, switch plate also darkens (realistic — in darkness the plate is dark). But the switch label must remain clickable — pointer-events none on shade. Plate darkened in OFF is realistic. But its LED off anyway. OK: shade absolute inset covering hero, pointer-events:none, z-index 1; content z-index 2? Then shade wouldn't darken content. Hmm — want shade to darken visuals but keep emergency text bright. Layering: bg(0) → wiring svg is inside board... Simplify: skip full-screen shade; instead individually darken the pieces (already planned) and deepen hero background-color. Bulb glow→0 handles most. Vignette constant. Good enough, less risk. Ticker: also dim. Transition timing: background .8s, strokes/fills .6s, glow .5s, emergency .45s delay .1s, statbar .3s. Now the copy (UK tone, no waffle): Kicker: "NICEIC APPROVED ELECTRICIANS · WEST & SOUTH-WEST LONDON · EST. 1989" H1: "We keep the lights on." Sub: "Watts & Son is a third-generation electrical firm. From full rewires to EV charge points, every job is signed off, certified and guaranteed for five years — done once, done properly." CTAs: [Book an electrician →] [☎ 020 7946 0821 — 24/7 line] Stats: - "38" label "years on the tools" - "12,400+" label "jobs certified" — hmm "+" - "4.9★" label "620 Which? reviews" — use SVG star. Emergency: - label: "● 24/7 EMERGENCY CALLOUT" (dot pulsing) - number big: "020 7946 0821" - line: "Total outage? Tripped board you can't reset? Isolate at the consumer unit and call — a human answers, day or night. Average 47 minutes to your door." Hint: "go on — flip the mains" / "flip it back on". Ticker items: FULL REWIRES · CONSUMER UNITS · EICR CERTIFICATES · EV CHARGE POINTS · FAULT FINDING · SMART LIGHTING · OUTDOOR POWER · LANDLORD CERTS. Vertical edge text: "230V · 50HZ · SINGLE PHASE · RCD PROTECTED · PART P COMPLIANT". Nav links: Services, Landlords, Emergency, About. Right: phone + Book a visit button. Let me write the marquee: .ticker { overflow:hidden } .ticker-track { display:flex; width:max-content; animation: slide 30s linear infinite; } two identical .ticker-group (ul) each display:flex gap:2.5rem padding-right 2.5rem. @keyframes slide { to { transform: translateX(-50%) } }. Pause on hover: .ticker:hover .ticker-track { animation-play-state: paused }. Fonts link: plus preconnects. Now CSS details. Root vars: --bg:#17130d; --bg-off:#0b0906; --ink:#f2e9d6; --dim:#a3977f; --dim2:#6f6552; --line:#2e291f; --amber:#f6a80b; --amber-hi:#ffc64d; --amber-deep:#b97e07; Body: background var(--bg) — but hero is whole page; set on .hero and body same. h1: font-family "Bricolage Grotesque"; font-optical-sizing auto? Set font-variation? Just font-weight 750? Bricolage supports 200-800; use 700; letter-spacing -0.025em; line-height .98; font-size clamp(52px, 6.2vw, 96px). With opsz axis auto via font-optical-sizing: auto. Lights span: color amber; position relative; padding-right small for the period? Word is "lights." include period inside span. Underline: ::after { content:""; position:absolute; left:0; right:0; bottom: .06em; height:3px; background: currentColor? use amber; opacity .9; border-radius:2px; } plus ::before pulse segment { width:56px; height:3px; background: #ffd77a; border-radius:3px; bottom same; animation: run 2.4s ease-in-out infinite; } @keyframes run { 0%{ left:0; opacity:0 } 15%{opacity:1} 50%{ left: calc(100% - 56px); opacity:1 } 65%,100% { left: calc(100% - 56px); opacity:0 } } hmm direction one-way then fade; or ping-pong. One-way with fade at end then restart = current flowing. Use left 0→calc(100%-56px) linear-ish. Keyframes: 0% {left:0; opacity:0} 10% {opacity:1} 45% {left:calc(100% - 56px)} 55% {left:calc(100% - 56px); opacity:0} 100% {left:calc(100% - 56px); opacity:0}. OK. Flicker on .lights: animation: flick 7s infinite. Buttons row: display flex gap 18px align-center wrap. .btn-primary: display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:#221703; font: 600 16px display; padding:15px 24px; border-radius:8px; border:1px solid #ffd77a3d? maybe none; box-shadow: 0 10px 24px -12px rgba(246,168,11,.45)?? that's a glow-ish shadow — keep a neutral dark shadow instead: 0 12px 24px -14px rgba(0,0,0,.6). Hover: background #ffb32e; svg arrow translateX(3px) transition. .tel-link: inline-flex gap 10px; color ink; font 600 17px display; border-bottom? Style: mono label above? Do: 24/7 EMERGENCY020 7946 0821 — two-line lockup, nice. small mono 10px dim letterspaced; strong 18px. Stats: .statbar { display:flex; border-top:1px solid var(--line); padding-top:22px; gap:0; } each .stat { padding-right:36px; margin-right:36px; border-right:1px solid var(--line);} last no border. number: display 700 30px; label mono 10.5px dim uppercase margin-top 6. Emergency: .emergency { border:1px solid #3d2f14; border-left:3px solid var(--amber); background:#191206; border-radius:10px; padding:20px 24px; } label row: pulsing dot (box-shadow pulse? animate scale/opacity of ::after ring — a radar ping, diegetic alarm) + mono 11px amber letterspaced. Number: display 700 clamp(28px,3vw,40px) color amber-hi? beacon pulse: animation beacon 2s infinite (opacity .85→1 + slight text-shadow warm? minimal). note: 14px dim line-height 1.6, maybe max-width 52ch. Emergency hidden default: opacity:0; transform:translateY(10px); pointer-events:none; visibility:hidden; transition .45s; OFF: visible. Both in .stack { display:grid } .stack > * { grid-area: 1 / 1 }. Board sizing: .board { position:relative; width:460px; height:620px; } svg absolute inset 0 (width/height 100%). Switch label .switch-plate { position:absolute; left:72px; top:412px; width:96px; height:96px; ... } content: screws via ::before/::after? Need 2 screws + dolly + led + text: build with child divs: etc, , , MAINS. Label cursor pointer; user-select none; -webkit-tap-highlight transparent. Plate style: background:#e9e1cf; border-radius:10px; border:1px solid #cfc4ab; box-shadow: 0 18px 30px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.08); In OFF darken plate: #power:not(:checked) ~ .hero-main .switch-plate { background:#4a4438... } transitions. Hmm plate at left:72 top:412, size 96 → center (120,460); trace starts at x=172 (right edge), y=460 ✓. Screws: 7px circle at top center (x 50%, y 8px) and bottom (y calc(100%-8px)); background:#cfc4ab; border:1px solid #a89c82; slot: ::before 1px line rotated 40deg dark. Position screws slightly inset corners? UK plates have single screw top+bottom center for grid plates, or corners. Center top/bottom is fine. Dolly container: absolute center; width:36px; height:64px; top:50% left:50% translate(-50%,-56%)? Actually center slightly above middle because LED above? LED at top: place LED above dolly: led at y ~14; dolly centered at 50% (48px) → from 16 to 80 — overlaps LED. Reposition: LED at top 10 (center), dolly top 26 height 52, engrave at bottom 10. Plate 96 tall: screws at 7 and 89 conflict with LED? UK plates: screws at extreme top/bottom edges. LED tiny at y=18. Fine: screw top center at top:6; LED at 20; dolly 30→78 (48 tall); engrave text at 84. Tight but ok. Or drop engrave, put "MAINS" below plate outside on wall (stencil style) — actually engraved on plate bottom is nicer. Let me restructure: plate 96x116 (portrait, 1-gang with room)? UK 1-gang is square 86x86. I'll keep square and place "MAINS" label under the plate on the wall (stencil mono dim text at left:72 top: 512). And plate interior: screw top, LED, dolly, screw bottom. Clean. Dolly: width 34; height 48; centered horizontally; top:26px; border-radius:6px; background:#f4eddc; border:1px solid #b9ad92; box-shadow: 0 3px 5px rgba(0,0,0,.28), inset 0 1px 0 #fff; transition transform .16s ease, box-shadow .16s; parent perspective: 140px on .switch-plate; ON (default checked): transform: rotateX(17deg); OFF: rotateX(-17deg). Also ::after groove: center line 2px #d9cfb8 at middle? vertical groove? UK rockers have horizontal mid-ridge: height 2px at 50%, bg rgba(0,0,0,.08). Shadow side: ON bottom protrudes toward viewer bottom → shadow below: box-shadow 0 4px 6px rgba(0,0,0,.3). OFF: top protrudes → 0 -4px 6px. LED: 6px dot top:16px center; ON: background var(--amber-hi); box-shadow: 0 0 6px 1px rgba(255,180,40,.8) — diegetic indicator. OFF: background #57503f. Screws: positions top:5px & bottom:5px, left 50%. Wall behind: .wallpad { position:absolute; left:52px; top:392px; width:136px; height:136px; background:rgba(255,255,255,.015); border:1px solid var(--line); border-radius:12px }? Subtle mount panel. Plus "MAINS" stencil under: at left:52 top:534 width 136 text-align center mono 10 dim letterspaced. Also small hint near: below at 556: hint spans. Hmm board height 620; ok. Hint: two spans stacked absolute at left:200px top:505px? Near switch right side. Actually trace occupies right of switch (y=460 horizontal). Put hint BELOW plate: left:52 width:136 top:534 → stencil "MAINS"; hint at top:556. Or hint to the left? Board left edge at 52... Put hint text below: "↓ go on — flip the mains" with arrow pointing up to plate. Use small SVG arrow. Simpler: mono text "↳ flip the mains" — "↳" unicode arrow, fine. I'll craft: hint { position:absolute; left:64px; top:548px; } span.hint-on / span.hint-off stacked crossfade. Wait also stencil "MAINS" — combine: make hint text itself: ON: "MAINS — go on, flip it"; OFF: "MAINS — flip it back". Two spans with shared prefix... crossfade two full lines. Content: hint-on: "MAIN SUPPLY · GO ON, FLIP IT" hint-off: "MAIN SUPPLY · FLIP IT BACK" Style mono 10px dim letterspacing 1px; with a small blinking? no. Wire grommet where trace meets plate: small circle at (172,460)? junction dot there — amber ON. SVG wiring markup: Glass fill ON: rgba(255,190,90,.10) → OFF: rgba(255,255,255,.02); stroke rgba(242,233,214,.5)→.15. Cord stroke #6b6151 2px; OFF dim #3a342a. Rose strokes #6b6151; OFF #3a342a. Node fill: ON var(--amber) with tiny glow? fill #f6a80b; OFF #453d2c. spec text fill #6f6552; font-family mono; font-size 9.5; letter-spacing .12em. OFF dim more. Pulse: stroke #ffc64d width 2.5 stroke-linecap round; dasharray "8 92"; animation pulsemove 2.6s linear infinite; p2 delay 1.3s. @keyframes pulsemove { from{stroke-dashoffset:0} to{stroke-dashoffset:-100} }? Direction: decreasing offset (0→-100) moves dashes forward (start→end) since path drawn from switch to rose (direction of current flow when on... actually current flows from supply→switch→rose→bulb; path starts at switch so forward = toward bulb ✓). Branch path drawn from junction down: fine. Wait check dash direction: increasing dashoffset shifts the dash pattern toward the path start (backward); decreasing (0→-100) shifts forward. Yes. OFF: .wire-pulse { opacity:0; animation-play-state:paused } — but pausing keeps last dash position; opacity 0 hides it anyway. Transitions on SVG: stroke-opacity/fill-opacity/opacity transitions work; stroke color transitions work as CSS. Add transition: all .6s on relevant classes (careful with pulse: don't transition opacity of pulse with .6s? fine). Lamp sway: .lamp { transform-box: view-box; transform-origin: 300px 52px; animation: sway 7.5s ease-in-out infinite alternate; } @keyframes sway { from { transform: rotate(-1.4deg) } to { transform: rotate(1.6deg) } } OFF: animation-play-state paused — but pausing leaves rotation offset mid-sway — bulb frozen tilted in the dark; acceptable/realistic. Or set OFF transform: rotate(0) with transition — sudden? transition transform 1.2s then rotate back while pause: apply both: paused + transform rotate(0deg) — transitions from current computed? When animation is paused, computed transform is the paused keyframe value; adding transform property won't apply because animation still fills? animation not filling (default fill none) — while paused, the animation still applies current frame value, overriding the transform property. So it stays tilted — fine, realistic (light doesn't move when off... actually a bulb would still swing if it was swaying! Realism: keep swaying even off? A hanging bulb sways gently regardless of power. Keep animation running always. Simpler + alive. OK keep always.) Filament flicker: @keyframes fil { 0%,100% { opacity:1 } 4% {opacity:.55} 6%{opacity:1} 38%{opacity:.92} 40%{opacity:.6} 41.5%{opacity:1} 68%{opacity:1} 70%{opacity:.75} 71%{opacity:1} } 8s. Also bulbglow subtle breathe: scale? animate opacity .9→1. Use same flicker timing family. Set .bulbglow animation glow 8s infinite same keyframes. OFF: .filament { stroke:#4d4433; animation:none; opacity:1 } .bulbglow { opacity:0 } .roomglow { opacity:0 }. Header markup:

[svg bolt in roundel] Watts & SonElectrical · London

[phone svg] 020 7946 0821 Book a visit

Brand strong: display 700 18px letterspacing .01; em: mono 9.5px dim uppercase letterspacing .18em not italic. Bolt roundel svg: — encode carefully (# → %23, quotes). opacity .05 might gray-wash; use .04 and mix-blend? Keep normal; it adds texture on dark. Actually noise white-ish on dark at 4% is fine. Also ::selection { background: var(--amber); color:#241a05 }. Reduced motion: @media (prefers-reduced-motion: reduce) { *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important} } — but that kills the state transitions charm; transitions .15s ok. Focus-visible styles. Also details: html { scroll-behavior } irrelevant. Title: "Watts & Son Electrical — Electricians in West London". Now — count check on my anti-generic instincts: no equal card rows ✓ (stats are a ruled inline strip), amber/cream not blue/purple ✓, no gradient banners (only diegetic light radial in the SVG + button hover solid) ✓, no emoji (all inline SVG icons) ✓, distinctive fonts ✓, zero JS ✓ (a signature in itself), real interaction (working switch) ✓, memorable moment (flip mains → blackout → emergency beacon) ✓. One more idea to raise craft: when OFF, the emergency phone number could have a subtle "beacon" — a soft pulsing ring around a dot? Keep the pulsing dot next to label. Number: gentle opacity pulse 0.9↔1, 2.4s. Fine. Also when OFF, maybe title changes emphasis: "lights." goes dim grey with tiny "cut" ? no text swap; grey is enough. Let me also handle: when unchecked, hint-off shown. Crossfade spans. Also add title attribute? no. Check sibling selector: header/.hero-main/.ticker are siblings of #power inside section.hero. The dim rules target descendants — fine. Board is inside .hero-main right column:

svg + wallpad + label.switch-plate + stencil + hint

. Wait — the switch label must be . It's deep inside; still toggles input by id ✓. Clicking label toggles checkbox → :not(:checked) updates ✓. Keyboard: input focusable (opacity 0 but present; keep it visually-hidden but focusable: position absolute; width 1px etc — standard .visually-hidden but that clips focus; use opacity:0; position:absolute; pointer-events:none? Focus still works. Then focus-visible rule on label ✓. But input inside .hero top-level absolute at 0,0 — screen readers announce checkbox ✓. Prevent text selection flash on rapid clicks: user-select none on label ✓. Also small delight: rapid flipping — transitions are smooth ✓. Now write the actual bolt/phone/arrow/star icons: Bolt (fill): hmm craft: M13.2 2 L5 13.6 h4.6 L8.4 22 L19 10.4 h-4.8 L13.2 2 Z — decent zigzag bolt. Phone (stroke): — classic handset: path "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z" (feather phone). Use that. Arrow right: stroke. Star (fill): M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z. Arrow down-right for hint? using "↳"? I'd rather inline a small svg: curved arrow:

Full rewires

with li display flex gap. Between items the bolt acts as separator at start of each item. Use span.sep? Each item: FULL REWIRES. Ticker duplicates: group ul.ticker-group twice, second aria-hidden="true". Let me write dims for h1 lines:

We keep
the lights.

Hmm "We keep the lights on." — dropping "on" changes meaning... "We keep the lights on." needs "on". Options: "We keep / the lights on." with span on "lights on": lights on. underline under both words. Good: underline under "lights on.". Sub: "Third-generation electricians for West & South-West London. Full rewires, consumer units, EV charge points and EICRs — certified, signed off, and guaranteed for five years." Stats numbers with plus: "38" / "12,400+" / "4.9". Labels: "YEARS ON THE TOOLS" / "JOBS SIGNED OFF" / "WHICH? REVIEWS (620)". Emergency note refine: "Total outage or a board that won't reset? Kill the mains and call. A human answers in four rings — day, night, weekends. Average 47 min to your door." Nav links: Services · Landlords · Emergency · Reviews. OK — also include . Also the ofcom TV drama number 02079460821 ✓ (real Ofcom reserved range: 01632 960xxx is national; London drama range is 020 7946 09xx — I recall 020 7946 0958 etc. The reserved London ranges: 020 7946 0900–0999. So use 020 7946 0921 to be safe. Yes — 020 7946 09xx is the allocated drama range. I'll use "020 7946 0921".) Now sizes: board 460x620 might be tall vs header+ticker in 100svh on smaller laptops (e.g., 768px height): main available ≈ 768-76-54=638 — board 620 fits barely with padding. Set board height 600 and adjust coords? Let me scale coordinates to 600: switch plate top 412→ keep? I'll set board 460x560 and re-y: rose 44, bulb cy 200 (r54), base ~256–296, switch plate center y 430 → plate top 382, stencil 492, hint 514, branch to 560. Trace: M172 430 H288 Q300 430 300 418 V62. Bulb cx300 cy200 r54: glass top 146; cord from 60 to 146. Posts: from 254? glass bottom 254. Base: 258–296. Filament: posts M287 254 V232 / M313 254 V232; zigzag M287 232 L294 244 L300 220 L306 244 L313 232. Wait posts should start at base top (~258) inside glass: M287 256 V232. Glow circles r 120/220 at (300,200). Available height on 700px viewport: 700-76-54=570 < 560+padding 80 → board might overflow → main scrolls; acceptable since page scrolls anyway; but for the "full viewport hero" feel, add @media (max-height:760px) { .board { transform: scale(.85); transform-origin: top center } .board-wrap{height:480px} } combined with width breakpoints — getting complex. Simplify: .visual uses align-self:center; and board-wrap height auto with board inside; allow page scroll if short. But grid stretch: hero-main min-height might exceed viewport → header+main+ticker > 100svh → ticker below fold — meh. I'll cap: .hero-main { min-height: 0 } and board-wrap height: min(560px, calc(100svh - 220px))? Then board overflows if scaled... Add scale via transform when height small: media (max-height:820px): scale .88 origin top center, wrap height 500px. And (max-height:700px): scale .78, wrap 440. Also combine with width rules — both may apply; transforms multiply if both set transform — later rule overrides. Handle: use scale() values in each media and ensure consistent (max-height rules set transform only; width rules (mobile) set their own; potential conflict on small+short devices — mobile heights usually fine; accept). Actually cleaner responsive approach: define a CSS var --bs (board scale) and set .board { transform: scale(var(--bs)); transform-origin: top center } and .board-wrap { height: calc(560px * var(--bs)) } — wait scale from top center keeps box 460 wide; wrap height calc(560px*var(--bs)) ✓ and width stays 460 box (visual narrower but centered ✓). Then breakpoints just set --bs: default 1; ≤1280: .9; ≤960 stacked: .95; ≤520: .74; max-height 800: .85; max-height 680: .74. If two media both match, later in file wins — order: put max-height rules last. Mobile width 520 with height 680? phones landscape — rare; fine. Hmm transform-origin top center: wrap needs width for centering: .board-wrap { display:flex; justify-content:center } board flex none width 460. Height var. ✓ desktop also uses same mechanism (--bs:1). Right column width: at --bs .9 visual width 414 — grid col auto sizes to 460 box still (transform doesn't affect layout) leaving gap on right — acceptable minor. OK. Also on stacked mobile, board after copy, before ticker; add some bottom padding. Edge text hide ≤1200. One more flourish for first impression: on load, a quick "power-up" sequence — bulb flickers on (animation once: glow 0→flicker→full over 1.2s) — CSS animation runs on load automatically: .bulbglow, .filament { animation: powerup ... } but they also need flicker loop... combine: two animations comma-separated: animation: powerup 1.4s ease-out both, flick 8s 1.6s infinite? Powerup keyframes handle initial surge: 0%{opacity:0} 35%{opacity:.9} 45%{opacity:.2} 60%{opacity:1}... 'both' fill; then flick with delay starts after. Also headline could fade-slide in on load: .copy > * { animation: rise .8s cubic-bezier(.2,.7,.2,1) both } staggered delays (kicker .05, h1 .12, sub .22, ctas .3, stats .4). Board: fade in scale? .board-wrap animation rise too. Ticker fade. These load animations give instant "alive" feel. Keep subtle (translateY 14px, opacity 0→1). Note: .copy children animation 'both' sets opacity — conflicts with OFF-state dim rules (opacity .5) — animation fill both ends and holds final value (opacity:1 from keyframe 'to') forever, overriding later opacity rules?? Animation fill forwards wins over normal declarations indefinitely! Fix: rise keyframes end at natural state and don't use forwards after finish? 'both'/'forwards' keeps applying final keyframe forever, beating the cascade. Workaround: after animation ends it still applies. To allow state dimming, put dim on inner elements or use animation only on opacity from 0→1 with 'backwards' fill (applies only during delay) — animation without forwards: during animation it animates, after it releases to cascade ✓, but before start (delay) needs backwards fill to hide initial. Use: animation: rise .7s .1s cubic both → hmm 'both' includes forwards. Use fill-mode: backwards! animation: rise .7s cubic-bezier(.2,.7,.2,1) backwards; then during delay shows 'from' (opacity 0), animates, then releases — perfect. Same for powerup: use backwards, then flick loop separate — while powerup runs (no fill after), flick with delay>powerup start? Set filament animation: powerup 1.2s ease-out backwards, flick 9s 2s infinite — during first 1.2s powerup controls; after, flick (delayed start 2s: between 1.2–2s filament has no active animation except flick pending with no backwards fill → opacity from cascade (1) ✓). For glow also scale pulse? fine as opacity only. Also OFF-state transitions vs load animations: fine. Let me also set transition on .lights color, .kicker etc. Now write final code carefully. I'll aim for ~600-700 lines total. Let me draft the CSS structure: 1. Reset & vars 2. Base (body, selection, focus) 3. Noise overlay 4. Hero shell, header, nav 5. Hero-main grid, copy, kicker, h1, lights underline, sub, ctas, buttons, statbar, emergency 6. Board (wrap, svg styles, trace, lamp, bulb, switch plate, dolly, led, screws, stencil, hint) 7. State: #power:not(:checked) rules 8. Ticker 9. Edge text 10. Load animations + keyframes 11. Responsive Double-check sibling selectors with class names consistent. Emergency stacking: .stack { position:relative; display:grid; margin-top: 34px } children grid-area 1/1; .statbar align-self:start; .emergency align-self:start. Container min-height: stats ~92px; emergency ~150px → cell grows to 150 always, leaving gap under stats on ON state... layout: copy bottom = stats then nothing; extra 60px whitespace under stats always — acceptable (breathing room) since column is centered vertically anyway. Fine. Hmm actually order: ctas, then stack(statbar/emergency). margin-top 36. Emergency pointer-events none when hidden ✓ so tel links under? they're separate. Let me write ticker keyframes with width max-content and two groups each padding-right 48px; translateX(-50%) of track = one group width ✓. Fonts: display: 'Bricolage Grotesque', mono: 'IBM Plex Mono'. Let me write out SVG numbers final (board 460x560): Rose at (300,46): circles r=15, r=9.5, center dot r=3 (fill). Cord: y 61→148? glass top: cy200 r54 → top 146; cord 58→146 (line stroke 2). Glass circle (300,200,54). Shine arc: M266 176 A46 46 0 0 1 286 158 → check: point (266,176): dist from center sqrt(34²+24²)=~41.6; (286,158): sqrt(14²+42²)=44.3 — near r54? Those are inside glass (should be on inner upper-left) as highlight — fine as freeform arc r46. Shoulder/base: glass bottom 254 — overlap ok: base neck y252→264. threads: tip: → "M292 286 h16 l-2 7 h-12 z". Posts: M287 254 V234 M313 254 V234 (stroke 2, color #7d7259? posts cream-dim). Filament: M287 234 L294 246 L300 222 L306 246 L313 234 (width 3 amber-hi, class filament). Glow: bulbglow r=125 at (300,200); roomglow r=225. Trace: d="M172 430 H288 Q300 430 300 418 V60" (end just above rose bottom 61 — V60 ✓ ends at rose). Branch: M240 430 V560. terminal chevron: M235 552 l5 6 5 -6? arrow pointing down: stroke. Nodes: (172,430), (240,430) r=3.5. spec text: x=196 y=421 (above horizontal run): "6A LIGHTING · 1.5mm²" mono 9. branch label: rotate(90 254 505), text anchored: "TO: FIRST FLOOR LIGHTS" x=254 y=505 rotate around that point → reads downward along branch. Position x offset 254 (right of line 240). Switch plate: left:72 top:382 w96 h96 → center (120,430) ✓ trace starts x=172 (right edge 168 + 4 gap; node at 172 sits just off plate — move node to 170? plate right edge = 72+96=168; start trace at 168. Node at 168,430 → half covered by plate edge; place node at 174 as a "grommet" dot just outside. Trace M174 430... fine. Dolly/LED/engrave positions as planned. Wall pad: left:50 top:360 w140 h140 (extends 20px around plate) rounded 14. Stencil "MAIN SUPPLY" at left:40 top:530 width:160 center. Hint: left:40 top:552 width:170: arrow svg (12px) + span text. Two hint spans absolutely: wrap position relative height 16px; spans absolute left 22px (after arrow) top 0. Arrow at left:0. Wait board height 560; hint at 552 → clip! Move: stencil top:522, hint top:540 → bottom ~556 ✓ tight. Or increase board height to 580: branch V580, wrap height calc(580*var(--bs)). Let me set board 460x580; branch M240 430 V574; chevron M235 563 l5 6 5 -6 → at 569 ✓; stencil 524; hint 544 (bottom ~560 ✓). viewBox "0 0 460 580". Desktop layout height: header 78 + main (max(copy, 580)+padding 80ish=660) + ticker 54 ≈ 792 > typical 100svh 800? ~fits 800+. With --bs media for shorter screens ✓. Reduce main padding-top: 28px. Copy column also holds stats; total copy height ~ 480 — board 580 dominates → centered copy ok. Now selector list for OFF state: #power:not(:checked) ~ .hero-main .copy .kicker, #power:not(:checked) ~ .hero-main .copy h1, #power:not(:checked) ~ .hero-main .copy .sub, #power:not(:checked) ~ .hero-main .ctas .btn { opacity:.45 } #power:not(:checked) ~ .hero-main .ctas .tel { opacity:1 } (override; specificity: define after) #power:not(:checked) ~ header .brand, #power:not(:checked) ~ header nav, #power:not(:checked) ~ header .btn { opacity:.4 } header .nav-tel stays. Hmm header .nav-tel selector specificity equal; just don't include it. Board dims: #power:not(:checked) ~ .hero-main .filament { stroke:#4b4234; animation:none } #power:not(:checked) ~ .hero-main .bulbglow, ... .roomglow { opacity:0 } #power:not(:checked) ~ .hero-main .glass { fill:rgba(255,255,255,.02); stroke:rgba(242,233,214,.14) } #power:not(:checked) ~ .hero-main .cord, .rose-circle... { stroke:#39332a } #power:not(:checked) ~ .hero-main .shine { opacity:.08 } #power:not(:checked) ~ .hero-main .metal, .thread, .post { stroke:#463f33 } (fill #1c1710) #power:not(:checked) ~ .hero-main .wire-base, .wire-branch, .chev { stroke:#241f16 } #power:not(:checked) ~ .hero-main .wire-pulse { opacity:0; animation-play-state:paused } #power:not(:checked) ~ .hero-main .node { fill:#3a3327 } #power:not(:checked) ~ .hero-main .spec, .branch-label { fill:#4b4335 } #power:not(:checked) ~ .hero-main .led { background:#544c3c; box-shadow:none } #power:not(:checked) ~ .hero-main .dolly { transform: rotateX(-17deg); box-shadow: 0 -4px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6) } #power:not(:checked) ~ .hero-main .switch-plate { background:#574f40; border-color:#3f382c; box-shadow: 0 18px 30px -12px rgba(0,0,0,.7) } #power:not(:checked) ~ .hero-main .screw { background:#4a4234; border-color:#332c21 } #power:not(:checked) ~ .hero-main .wallpad { border-color:#241f16; background:transparent } #power:not(:checked) ~ .hero-main .stencil { color:#544b3a } #power:not(:checked) ~ .ticker { opacity:.35 } #power:not(:checked) ~ .hero-main .statbar { opacity:0; visibility:hidden; transform:translateY(-8px) } #power:not(:checked) ~ .hero-main .emergency { opacity:1; visibility:visible; transform:none; pointer-events:auto } #power:not(:checked) ~ .hero-main .hint-on { opacity:0 } .hint-off { opacity:1 } #power:not(:checked) ~ .hero-main .lights { color:#6d6350; animation:none } .lights::before { opacity:0!important? animation none } and .lights::after { background:#4b4234 }. h1 dim .45 would double-dim .lights (child) — h1 opacity .45 affects lights too; lights color grey anyway; ok but the underline ::after inside also dims — fine. Wait: h1 opacity .45 in OFF + lights color grey → good. Emergency beacon: .emergency .num { animation: beacon 2.6s ease-in-out infinite } always running but only visible in OFF ✓ (hidden via visibility, animation runs harmlessly). @keyframes beacon { 0%,100% { opacity:1 } 50% { opacity:.72 } } dot ping: .edot { width:9px;height:9px;border-radius:50%;background:var(--amber); position relative } ::after { inset:-3px; border:1px solid var(--amber); border-radius:50%; animation: ping 1.8s cubic-bezier(0,.6,.4,1) infinite } @keyframes ping { from { transform:scale(.6); opacity:.9 } to { transform:scale(2.1); opacity:0 } }. Transition delays: emergency transition-delay .15s when turning off? transitions defined on base with delay 0; on the :not(:checked) rule add transition-delay:.25s so blackout happens first, then emergency appears — cinematic sequencing! Similarly statbar hides quickly. And hint swap delay .3s. Nice storytelling: flip → 0.4s darkness swells → stats fade → emergency slides up glowing. Also hero background transition .7s. dolly transition .16s quick ✓. Alright, also add cursor pointer on dolly area (whole label). Mobile: plate/hint still fine scaled. Now write markup fully:

svg + text

svg + number Book a visit

NICEIC APPROVED · PART P · EST. 1989

We keep
the lights on.

...

Book an electrician 24/7 EMERGENCY LINE020 7946 0921

3 stats

...

MAIN SUPPLY

go on — flip itflip it back on

items

Input placement: first child ✓. It's absolutely positioned visually-hidden. Kicker bolt svg amber 14px. Check: label inside .board — the label element with class switch-plate must have for="power" ✓. Also add :hover states: plate hover: slight brighten + dolly wiggle? On hover: .switch-plate:hover .dolly { transform: rotateX(10deg)? but that conflicts with state transforms... hover transform would override state-specific? Both selectors apply — the more specific/late wins; hover rule after state rules could break OFF tilt. Instead hover: filter brightness(1.05) on plate + cursor. Keep simple. Nav link hover underline: .links a { position relative } ::after { height:1px; background:var(--amber); width:0 → 100% transition }. Let me now also confirm h1 with
: "We keep" / "the lights on." Underline under "lights on." spanning two words + period. Length fine. Font weights: Bricolage 700 for h1; 600 buttons/brand; stats numbers 700. Letter-spacing h1: -0.03em maybe too tight for Bricolage; -0.02em. Colors final: --bg:#181410; OFF #0a0806. Let me pick slightly warmer: #191510. Ticker text #8b8069; bolts #b97e07 opacity .7. Buttons radius 8. I think there's enough definition. Time to write it. I'll be careful with: - data-uri noise escaping: url("data:image/svg+xml;utf8,") — need % encoding for # → %23 ✓; single quotes inside double-quoted url ✓. Spaces okay-ish but safer to keep. - transform-box: view-box for lamp sway. - pathLength on pulses. Write keyframes: @keyframes rise { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } } (fill backwards per element with delays) Elements: .kicker .06s, h1 .14s, .sub .24s, .ctas .32s, .stack .42s, .visual .5s? apply animation: rise .7s cubic-bezier(.22,.75,.25,1) backwards + per-element animation-delay. But .statbar also has state transition on transform/opacity — animation backwards fill releases after run ✓ no conflict. Careful: .emergency hidden default opacity 0 — its rise animation irrelevant (inside .stack animation applies to stack container ✓ good, animate .stack not children). Powerup for .bulbglow & .filament & pulses: pulses start after? .wire-pulse animation: pulsemove 2.6s linear infinite 1s; powerup: on .bulbglow: powerup 1.5s ease-out backwards, flick 9s linear 2.5s infinite? Hmm glow flicker same timing as filament flick: give both animation lists. Compose: .filament { animation: powerup 1.4s ease-out backwards, flick 8.5s 2.4s infinite } .bulbglow { animation: powerup 1.4s .1s ease-out backwards, flick 8.5s 2.5s infinite }. powerup keyframes: 0%{opacity:0} 40%{opacity:1} 52%{opacity:.15} 66%{opacity:1} 74%{opacity:.5} 100%{opacity:1}. flick keyframes as earlier. sway keyframes; pulsemove; slide; run (underline); ping; beacon; flick; powerup. .lights { animation: flick 8.5s 2.4s steps? word flicker: reuse flick (opacity dips) — text opacity dips subtle ✓. Add color always amber. In OFF we set animation:none & color grey — but powerup/flick lists: OFF rule sets animation:none overriding list ✓. Underline pulse ::before animation run 2.8s ease-in-out 1.2s infinite; OFF: animation-play-state? just opacity 0 via color? ::before background amber-hi; OFF: #power:not(:checked) ~ .hero-main .lights::before { opacity:0; animation:none } — set base ::before opacity animated by keyframes; overriding animation:none leaves base opacity 1! Set base opacity 0? Keyframes control opacity; with animation none, opacity falls back to base (0 if base 0) ✓. Set .lights::before { opacity:0 } and keyframes set opacity>0 — during animation animated values override ✓. Same trick for pulses: base .wire-pulse { opacity:0 }? But ON they animate (keyframes set opacity 1 ranges) — define pulsemove keyframes to include opacity 1 at all frames, base opacity 0, OFF sets animation none → base 0 ✓. And pulse delays: with base opacity 0 and animation infinite delay 1s — during delay, no fill → invisible ✓ good. Similarly .node base fill amber via fill property (not opacity) → OFF overrides fill ✓. .dolly base transform rotateX(17deg) (ON default); OFF overrides ✓ transition on transform ✓. But base rule must come with perspective on parent ✓. Also initial load: dolly already ON ✓. Beacon/ping only inside emergency (hidden default) ✓ no load anim needed. Emergency default: opacity 0, visibility hidden, translateY(12px), pointer-events none, transition: opacity .4s, transform .4s, visibility 0s linear .4s (hide delay) — and OFF state: transition-delay .3s for opacity/transform, visibility 0s. Manage: .emergency { opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none; transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; } #power:not(:checked) ~ .hero-main .emergency { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition: opacity .5s ease .35s, transform .5s ease .35s, visibility 0s linear .35s } .statbar { transition: opacity .3s ease, transform .3s ease, visibility 0s; } base visible. #power:not(:checked) ~ .hero-main .statbar { opacity:0; visibility:hidden; transform:translateY(-10px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s } Hero bg transition .7s. Ticker opacity transition .5s. Kicker/h1/sub dim: transition opacity .5s .05s? When returning ON, un-dim with delay 0? Simpler: single transition .5s both ways. Enough planning — also decide focus ring: #power:focus-visible ~ .hero-main .switch-plate { outline:2px solid var(--amber); outline-offset:5px; border-radius:12px }. And hover affordance: .switch-plate:active .dolly { transition-duration:.08s }. Also add title/tooltip? skip. Small print bottom-right of hero? skip. Also nav "Emergency" link could scroll to emergency? It's a demo; href="#" fine — every interactive element wired... nav links going nowhere is placeholder-ish. Since it's a hero-only deliverable, links with href="#" are conventional; but I prefer minimal fake links: keep them (standard for a hero section mock) — acceptable. Let me write the code now. I'll keep CSS commented and organized. Also ensure no external CSS/JS beyond Google Fonts (allowed CDN). All good. One more check: the run keyframes for underline pulse: .lights::after (base line): bottom:-0.04em? For 96px text, 3px line at bottom .02em. Use: bottom:-0.02em; height:.045em? em-based scales: height .04em; ::before width 1.2em height .04em. run keyframes: 0%{ left:-1.2em? start off-left: left:0; opacity:0 } 12%{opacity:1} 55%{ left:calc(100% - 1.2em); opacity:1 } 68%{ left:calc(100% - 1.2em); opacity:0 } 100%{ same; opacity:0 }. animate left — layout animation but tiny element, fine (could use transform: translateX with known width? width varies; left ok). lights span padding: underline spans text width naturally (inline block? span inline; ::after positioned needs position:relative on span ✓ inline works with relative). Period inside span: "lights on." — underline under all incl period ✓. Statbar markup:

38years on the tools

12,400+jobs signed off

620 which? reviews

Labels uppercase mono 10px; n 28px 700; star svg 15px amber inline. Emergency markup:

24/7 EMERGENCY CALLOUT — LONDON

020 7946 0921

Total outage? Board that won't reset? Kill the mains and call — a human answers, day or night. Average 47 minutes to your door.

Kicker:

NICEIC APPROVED CONTRACTOR · PART P · EST. 1989

— style middots via content with padding spans? Just text with · characters, letter-spacing .16em, mono 11px, color dim; first part amber? Make "NICEIC APPROVED" amber? Keep single dim with amber bolt icon leading. Header right phone: 020 7946 0921. Ticker items list (8): as decided. Edge text: "230V · 50HZ · SINGLE PHASE · RCD PROTECTED". Write everything now. Also include favicon? Skip / could add inline svg favicon link data-uri bolt — nice touch: . Sure, small. Media queries order: base (desktop) → @media (max-width:1280px) --bs:.9? Actually 1280 wide fits 460 board easily; instead tie to height first: @media (max-height:840px){ :root{--bs:.86} } @media (max-height:720px){ :root{--bs:.76} } then widths: @media (max-width:1120px){ .edge{display:none} } @media (max-width:960px){ .main{grid-template-columns:1fr; padding-bottom:56px} .visual{order:2; margin-top:36px; justify-content:flex-start?} center: .board-wrap{margin:0 auto} } @media (max-width:520px){ :root{--bs:.72} } @media (max-width:860px){ .links{display:none} } @media (max-width:600px){ .nav-tel{display:none} } @media (max-width:700px){ .statbar{flex-wrap:wrap; row-gap:18px} .stat{border:none!important; padding:0 28px 0 0} }. Order in file: max-height before max-width so mobile (which often matches max-height? phones portrait height >840 → no) — iPhone height ~850-900 → no max-height triggers ✓. Landscape phones height ~400 → --bs .76 + stacked — ok. Also on stacked, hero min-height: auto (let it grow) ✓ since flex column with main flex:1 grows. Grid .main: grid-template-columns: minmax(0,1fr) auto; align-items:center; gap: 40px; padding: 24px clamp(22px,5vw,72px) 40px; (left edge padding accounts edge-text width? edge at left:14 vertical, hidden <1120; desktop left padding 72 ok.) Copy max-width 640. Also hero position relative for edge abs. Let me finalize hint arrow svg: pointing up (toward plate) ✓ color amber-dim. Stencil & hint color dim2. Now the wiring SVG final: Wait glass bottom 254, metal at 252 overlaps glass — draw metal after glass ✓ order fine. Posts from 254 up. Rose r1/r2 stroke, dot fill. Cord to glass top 146 ✓ (200-54). blabel rotated: rotate(90 256 500) — text drawn at that point rotated to run downward; text-anchor default start; starting at (256,500) rotated 90 → extends downward from y=500 leftward? rotate 90° clockwise: text baseline direction +x becomes +y (down) ✓ starts at (256,500) going down — but branch line at x=240 going to 574; text at x=256 (right of line), from y=500 down to ~500+ text length (~ 9px*0.6*22chars≈120) → 620 > 580 clip! Start higher: rotate(90 256 470) → ends ~590 slightly clipped... text "TO FIRST-FLOOR LIGHTS" 21 chars ≈ 21*6=126 → 470+126=596 >580 clip 16px. Shorten: "FIRST-FLOOR LIGHTS" 18ch≈108 → 470+108=578 ✓. Or move branch start junction lower... keep "FIRST FLOOR LIGHTS" starting y=466. Set transform="rotate(90 256 466)" x=256 y=466. Hmm wait: after rotate 90 about (256,466), text runs down along x=256 from y=466 ✓. Actually check rotate direction: positive angle clockwise in SVG → baseline +x axis maps to +y ✓. spec text at (196,420): horizontal run from 174→288 at y430; label above at y=421, starting x=196 → "6A LIGHTING · 1.5mm²" ~20ch*5.7≈114 → ends 310 > run end 288 but extends over corner region — visually fine (dim), or shorten "6A · 1.5mm² RADIAL"? Keep "6A LIGHTING CIRCUIT" (19ch≈108 → 304). Slight overhang ok, or move x=186. Set x=188, text "6A LIGHTING · 1.5mm²". Pulses p1/p2 duplicates for rhythm; b1 branch pulse with delay 1.7s. Pulse dasharray: "7 93" with pathLength 100 ✓ linecap round. Keyframes pulsemove { 0%{stroke-dashoffset:0; opacity:1} 90%{opacity:1} 100%{stroke-dashoffset:-100; opacity:1}? To have pause between pulses add trailing: 0%{offset 0} 75%{offset -100; opacity 1} 76-100%{offset -100; opacity 0}? Then pulse reaches end and vanishes, restarts — with round cap the head disappearing at rose = current absorbed ✓. Keyframes: @keyframes flow { 0% { stroke-dashoffset:0; opacity:0 } 6%{opacity:1} 70% { stroke-dashoffset:-100; opacity:1 } 78%,100% { stroke-dashoffset:-100; opacity:0 } } duration 2.8s. p2 delay 1.4s; b1 delay .9s duration 2.8s. Base .pulse { opacity:0 } ✓. OFF: .pulse { animation:none; opacity:0 } ✓ (explicit). Sway: .lamp { transform-box:view-box; transform-origin:300px 46px; animation: sway 7s ease-in-out infinite alternate } — transform-origin with view-box units ✓. @keyframes sway { from{ transform:rotate(-1.3deg)} to{ transform:rotate(1.4deg)} } Filament stroke: #ffc95e width 3 linecap round linejoin round. Glass fill: rgba(255,196,110,.10); stroke: rgba(242,233,214,.5) width 1.4. Shine: stroke rgba(255,244,220,.35) width 2.5 round. Posts stroke #857a63 width 2. Metal fill #262016 stroke #6a5f4b width 1.2; thread stroke #6a5f4b width 1.3. Cord stroke #7a6f58 width 2. Rose strokes #7a6f58 1.4; dot fill #7a6f58. Wire base stroke #38migrate: #38301f? On dark bg #191510, wire #3b3222 visible subtle ✓ width 2. Node fill #f6a80b (ON) with slight glow: filter? skip glow, small r3.5 amber reads as solder joint. spec fill #6f6552 font-size 9 letter-spacing .14em font-family mono. Now the plate engraving? Removed; stencil outside ✓. Screws: .screw { position:absolute; left:50%; width:7px;height:7px; margin-left:-3.5px; border-radius:50%; background:#cfc3a8; border:1px solid #9d9074; } .st{top:6px} .sb{bottom:6px} slot: ::before { content:""; position:absolute; left:1px; right:1px; top:50%; height:1px; background:#8a7d61; transform:rotate(-40deg) }. Dolly groove ::after: { content:""; position:absolute; left:4px; right:4px; top:calc(50% - 1px); height:2px; border-radius:2px; background:rgba(31,26,18,.14) }. Plate: display block (label). Add inner bezel: box-shadow inset list: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.25)? Keep: border:1px solid #d3c8ad; background:#e9e0cc; box-shadow: 0 16px 28px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 3px rgba(87,74,49,.18); border-radius:10px. perspective:150px on plate. dolly: position absolute; left:50%; top:27px; width:32px; height:46px; margin-left:-16px; background:#f3ecdb; border:1px solid #b5a98c; border-radius:6px; box-shadow: 0 4px 7px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.7); transform: rotateX(17deg); transition: transform .16s ease, box-shadow .16s ease; LED: top:15px; left:50%; margin-left:-3px; width:6px;height:6px;border-radius:50%; background:#ffc451; box-shadow:0 0 7px 1px rgba(255,178,44,.75); transition: .5s. Wallpad: left:48px; top:358px; width:144px; height:144px; border-radius:16px; border:1px solid #2b2519; background:rgba(255,255,255,.012); transition. Hmm plate (72..168, 382..478) inside pad (48..192, 358..502) ✓ margins 24/24 ✓. Stencil: left:48; top:512; width:144; text-align:center; mono 9.5px ls .24em color #7d7259. Hint: left:44; top:540; width:180; display:flex; gap:8px; align-items:flex-start? single line: color #8b8069; mono 10.5px; spans position relative? For crossfade: .hint span { transition: opacity .4s } .hint-off { position:absolute; left:21px; top:1px; opacity:0 }. hint-on inline after arrow. Arrow svg vertical-align. Check overlap: branch line x=240 from y430 down; hint at y540 x44..224 — clear ✓. Stencil 512 vs branch x240 no overlap (width to 192) ✓. Board bottom elements vs branch chevron (235..245, 566..572) ✓ clear of hint (ends x~224). visual column: also maybe align board to right: .board-wrap { justify-content:flex-end } on desktop? Center of column auto width; grid col auto = wrap width = 460; fine. Add slight parallax? no JS. OK. Header: display:flex; align-items:center; justify-content:space-between; padding: 0 clamp(22px,5vw,72px); height:80px; border-bottom:1px solid var(--line); gap:24px. links center: margin-left:auto? Use flex: brand | links (margin: 0 auto) | right. links gap 30px. Now, the "Book a visit" nav button + hero primary both amber — consistent. Also hover for statbar? none. Emergency number font-size clamp(30px, 4vw, 44px). The sub color: #bdb096 (between dim and cream) for readability: use #b6aa90. Sub width: max-width 56ch; margin-top 26px. h1 margin-top 22px after kicker. CTAs margin-top 34px; gap 26px; align-items:center. tel lockup: small mono 9.5px dim ls .18em; strong 17px cream; hover strong color amber-hi; phone svg 18px amber. Primary btn font-size 16.5px. OK also — subtle: kicker has tiny bolt svg 13px amber. Edge-text bottom: 140px. Noise: also add slight vertical wall gradient? skip. Write HTML now. Also remember lang="en-GB"? lang="en". Title + meta description. Let me write the complete file mentally consistent, then output. I'll write ~ well-structured. Also add a comment header in CSS? Keep comments minimal but organized. Font stack fallbacks: display: "Bricolage Grotesque", "Archivo", sans-serif? fallback: sans-serif. mono: "IBM Plex Mono", ui-monospace, monospace. One concern: Bricolage Grotesque availability ✓ Google Fonts. Also the load 'rise' animations on .copy children and .visual and header? Header static (no anim) fine; add slight fade to ticker. prefers-reduced-motion: kill sway/pulses/marquee/flick, keep opacity transitions. @keyframes marquee slide to -50%. Ticker group: display:flex; gap:44px; padding-right:44px; align-items:center; li{display:flex;gap:10px;align-items:center; white-space:nowrap; font:500 11px mono; ls .14em; color:#8b8069; text-transform:uppercase} svg bolt 9px fill #b97e07 opacity .8. Track: display:flex; width:max-content; animation: slide 32s linear infinite. Now compose the final answer: short intro sentence (I'll describe approach briefly), then the single HTML block, then explanation after code (concise). Language: English. Let me write out all CSS values concretely and double check selectors' spelling consistency. Also: `.power-ctl` visually hidden: position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none. (Label handles clicks.) Hmm: clicking label toggles input ✓. Also spacebar when input focused toggles ✓. Emergency pointer-events auto only when visible ✓ (tel link clickable). Transition for .glass fill/stroke — CSS transitions on fill/stroke colors ✓ modern browsers. Transition common: add to each target its own transition property list. I'll add a shared rule: .wire, .pulse, .node, .cord, .rose, .glass, .shine, .post, .metal, .thread, .filament, .bulbglow, .roomglow, .spec, .chev { transition: opacity .6s ease, stroke .6s ease, fill .6s ease, stroke-opacity .6s ease, fill-opacity .6s ease }. For elements with animation on opacity (.pulse base opacity 0 animated): transitions don't conflict. Note: .filament has animation flick controlling opacity — OFF sets animation:none then opacity? filament OFF keeps opacity 1 default ✓ stroke dim ✓. .bulbglow OFF: opacity 0 — but base has animation powerup+flick with fill? powerup fill backwards → after completion releases ✓ then flick infinite controls opacity! flick keyframes set opacity between .55 and 1 — if flick is still running in OFF, it overrides opacity 0!! OFF must set animation:none on .bulbglow too ✓ (I planned animation:none only for filament — add for glow). Also .lights flick same concern → set animation:none in OFF for .lights ✓ planned. Also pulses: OFF animation:none + base opacity 0 ✓. Sway continues (transform only) ✓ fine. flick keyframes on .lights: opacity — base text opacity 1; flick dips .6 — ok. But h1 dim uses opacity on h1 (parent) not the span — no conflict ✓. Now dim rules for copy: transition on those elements: .kicker,h1,.sub,.btn,.tel { transition: opacity .5s ease }. For h1 dimming .45: includes lights span color change separately ✓. Ticker transition opacity .6s. Edge-text also dim? include: #power:not(:checked) ~ .edge { opacity:.3 }. Assemble OFF rule block carefully with full selectors. Also default ON rules. Grid area of stack: ensure .stack { display:grid; } children grid-area 1/1; alignment start: .stack > * { grid-area:1/1; align-self:start }. Emergency padding 22 26; radius 10; border 1px solid #453412; border-left 3px solid var(--amber); background:#1a1309; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6), inset 0 0 40px rgba(246,168,11,.05)? inset warm wash subtle ok. .enum display:block; margin:10px 0 8px; font display 700; color:#ffc95e; text-decoration none; letter-spacing .01em; hover underline. .ehead mono 10.5 ls .2em color var(--amber) display flex gap 10 align center. .enote 13.5px color #a89b81 line-height 1.65 max-width 46ch. .statbar border-top 1px var(--line); padding-top 24; display flex. .stat .n font 700 30px display cream; display flex align baseline gap 6. star svg 16 amber translateY(-1)? inline. .stat .l mono 10px ls .16em dim2 margin-top 7 uppercase. .stat + .stat { border-left:1px solid var(--line); padding-left:34px; margin-left:34px } first stat padding-right:34? Use .stat { padding-right:34px } .stat + .stat { border-left ... padding-left:34px } — combined spacing 68 between? First stat's padding-right 34 + second's margin-left 34 → too much. Fix: .stat{ padding:0 34px } .stat:first-child{padding-left:0} .stat:last-child{padding-right:0} .stat + .stat { border-left:1px solid var(--line) }. Gap via padding ✓. Buttons: .btn { display:inline-flex; align-items:center; gap:10px; background:var(--amber); color:#241a05; border-radius:8px; font:600 16px/1 display; padding:16px 24px; transition: .25s; letter-spacing:.01em } .btn:hover { background:#ffbd3d; transform:translateY(-1px) } .btn:active{ transform:translateY(0) } .btn svg { transition: transform .25s } .btn:hover svg { transform:translateX(3px) } .btn-sm { padding:10px 16px; font-size:13.5px; border-radius:7px }. nav-tel: display:flex; gap:9px; align-items:center; font:600 15px display; color:var(--ink); svg 17 amber. hover color amber-hi. Links a: font:500 11px mono; ls .16em; uppercase; color:#9a8e75; padding:6px 2px; position:relative. ::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--amber); transition:width .25s } hover::after width 100%; hover color ink. Brand: flex gap 12. roundel svg 34. brand-text strong display:block font 700 17px ls .02em; em { display:block; font:500 8.5px mono; ls .3em; color:var(--dim2); font-style:normal; margin-top:3px; text-transform:uppercase }. Kicker: mono 11px ls .18em color #9a8e75; svg 13 fill amber; margin-bottom:6px. h1: font-size:clamp(46px, 6vw, 92px); font-weight:700; letter-spacing:-.02em; line-height:1.02; color:var(--ink); margin:0. .lights { color:var(--amber); position:relative; animation: flick 8.5s 2.2s infinite; transition: color .6s } .lights::after { content:""; position:absolute; left:.05em; right:.05em; bottom:.02em; height:.035em; border-radius:99px; background:currentColor; opacity:.55 } Hmm currentColor amber ✓ dims with color change ✓. .lights::before { content:""; position:absolute; left:0; bottom:.02em; height:.05em; width:1.4em; border-radius:99px; background:#ffe09a; opacity:0; animation: run 3s 1.6s ease-in-out infinite; filter:none }. @keyframes run { 0%{ left:-1.4em; opacity:0 } 15%{opacity:.9} 60%{ left:calc(100% - 1.4em); opacity:.9 } 72%,100%{ left:calc(100% - 1.4em); opacity:0 } } Start left -1.4em (em of span font-size) ✓ moves right. Sub margin: 26px 0 0; font-size:16.5px; line-height:1.7; color:#b3a78d; max-width:56ch; font-weight:400. body font default: display for headings, set body font-family display; use mono via class. Base font smoothing. OK — also hero::after vignette: position:absolute; inset:0; pointer-events:none; background: radial-gradient(115% 95% at 62% 28%, transparent 42%, rgba(8,6,3,.55) 100%); z-index:0? It must not block: pointer-events none ✓; place behind content: hero children need z-index above: header/main/ticker position relative z-index 1. Add. But vignette above wiring svg? wiring inside main (z1) → above vignette → glow not dimmed by vignette — fine (glow is light). Hmm vignette darkening bottom corners behind ticker only visually (ticker z1 above, opaque bg? ticker bg transparent — vignette shows through text area, fine). Hero background-color transitions ✓ on .hero. Also add subtle bottom hairline above ticker already via border-top. Right column on ultra-wide: grid 1fr auto — board right-aligned with page padding ✓. I think ready. Also double-check the trace vertical passing y147..? cord at x300 from 61→147; trace vertical x300 from 418 up to 62 — trace overlaps cord line visually from 62→147?? Trace goes up to V62 which passes THROUGH the rose (46±15 → rose spans 31..61) — trace ends at 62, right at rose bottom ✓ then rose/cord visually continues — reads as wire entering rose ✓. But trace line (x=300, y=62..418) vs cord (y=61..147): they'd overlap on segment 61..147!! Both at x=300 vertical → double line. Conceptually wall wire goes up to ceiling rose from behind — overlapping the hanging cord exactly looks like one thick line. Fix: offset trace to x=306 parallel? Then corner: H288 Q306? Let me route trace to approach rose from left side: M174 430 H288 Q300 430 300 418 V ... it must reach rose at (300,46). Alternative: end trace at rose bottom left: route: H 276 Q288 430? Make trace: M174 430 H282 Q294 430 294 418 V 52? Rose at cx300 — entering rose left side at (285,46): path M174 430 H282 Q294 430 294 418 V60 then curve into rose: at top add Q294 46 300 46? End at rose edge (285,46) is on rose circle ✓: V 52 then Q294 46? Let me simply do: M174 430 H282 Q294 430 294 418 V58 — vertical at x294, rose circle spans x285..315 at cy46: point (294,58) is inside rose circle? dist from (300,46): sqrt(36+144)=~13.4 <15 ✓ inside — good, wire appears to enter rose from below-left. Cord at x300 separate ✓ no overlap (294 vs 300, 6px apart — slight parallel closeness but distinct). Even better: x=292. Set: d="M174 430H280Q292 430 292 418V58". Junction corner radius 12 ✓. Node at (174,430) ✓. Cord stays clean ✓. Also bulb sway rotates lamp incl glow — trace static; slight disconnect at rose during sway (cord top fixed at rose since rose is inside lamp group... rose should stay fixed (mounted to ceiling) while cord+bulb sway. But cord top must stay attached at rose bottom (300,61). If sway pivots at (300,46), cord top stays ~fixed ✓ rose itself rotating barely visible (circles) ✓ fine — rotate rose too, imperceptible. Pulse endpoint at (292,58) inside rose — pulse vanishing there, then bulb lights — implied ✓. Also check: glass r54 top y146, cord bottom 147 ✓ touches. Now the LOAD animation for board: .visual { animation: rise .8s .45s cubic backwards } ✓. Also apply rise to .stack children? .stack as one unit ✓. Edge: .edge { position:absolute; left:16px; top:50%; transform:translateY(-50%); writing-mode:vertical-rl; ... } rotate 180 to read bottom-up: transform: translateY(-50%) rotate(180deg). font mono 9px ls .32em color #645a47. Also add hero::before? nothing. Let me also give header backdrop? No. Finally responsive stacked: .main{ grid-template-columns:1fr; gap:44px; padding-top:40px } .copy{ max-width:640px } .board-wrap{ margin:0 auto }. Edge-case: very wide short screens (1920x750): --bs .86 → board 460 box height 498 visual; fine. Also .visual { align-self:center }. Ticker padding: 0 0? track full-bleed ✓; ticker height:58px; align-items center; border-top:1px solid var(--line); position relative; maybe fade masks at edges: mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) — gradient used functionally as fade mask ✓ fine. Emergency 'visibility' transitions with delay — include visibility in transition lists ✓ (as written). One more: `#power:not(:checked)` — when user loads page checked; unchecked after flip ✓. ARIA: input aria-label "Main power" + role? add aria-hidden? fine. Also prevent iOS double-tap zoom on label: touch-action: manipulation. Write final copy for sub: "Third-generation master electricians covering West & South-West London. Rewires, consumer units, EV charge points and EICR certificates — every job notified, signed off and guaranteed for five years." Kicker: "NICEIC APPROVED CONTRACTOR · PART P REGISTERED · EST. 1989". Nav: SERVICES, REWIRES, LANDLORDS, EMERGENCY. Ticker: FULL & PART REWIRES / CONSUMER UNITS / EICR CERTIFICATES / EV CHARGE POINTS / FAULT FINDING & REPAIRS / SMART LIGHTING / OUTDOOR POWER / LANDLORD CERTIFICATES. Stats: 38 / YEARS ON THE TOOLS; 12,400+ / JOBS SIGNED OFF; 4.9 / 620 WHICH? REVIEWS. Hint text lowercase mono: "go on — flip it" / "flip it back on". Stencil: "MAIN SUPPLY". Alright, writing the final file. Also include small screen h1 clamp min 44px. Potential CSS var for bs: :root { --bs:1 } .board { transform: scale(var(--bs)); transform-origin:top center } .board-wrap { height: calc(580px * var(--bs)); display:flex; justify-content:center }. Max-height media: @media (max-height:840px){ :root{--bs:.85} } @media (max-height:700px){ :root{--bs:.72} } @media (max-width:540px){ :root{--bs:.7} } — order matters; phones portrait height ~ 800+: max-height 840 applies → .85; then max-width 540 (later) → .7 ✓ final .7 good. At .7: visual width 322, board box still 460 centered in wrap width 100% (mobile) ✓ visual centered ✓. Grid desktop: .main { grid-template-columns: minmax(0,1fr) auto }. Ensure .wiring { position:absolute; inset:0; width:100%; height:100% }. Board position relative. Also make sure label doesn't capture drag select: user-select:none. Let me now also verify pulse path direction for branch (b1): d M240 430 V574 downward ✓. Chevron: stroke #5c5138 width 1.6. OK writing output. Also, after code block, a concise explanation: concept (working mains switch → blackout → emergency beacon), pure HTML/CSS zero JS, palette/type choices, list of details, responsive notes. Also double check no emoji anywhere ✓. No alert ✓. No lorem ✓. Font weights loaded: Bricolage opsz,wght@12..96,300..800; IBM Plex Mono 400;500;600. Let me be careful: in Google Fonts URL ampersands must be & in HTML? In href attribute raw & is tolerated but valid HTML prefers &. Use &. data URI favicon: — need proper encoding: spaces ok in some browsers; safer encode: replace spaces with %20? Data URIs in href with spaces generally work when quoted. I'll encode conservative: use single-quote attribute wrapper with double quotes inside ✓ and %23 for #. Keep spaces (browsers handle). Fine. Noise bg data uri similarly. Now write everything. Also ::selection. Also add scroll? body overflow-x hidden to avoid accidental overflow. Let me make sure that transitions of visibility: property `visibility` transition needs `transition: visibility 0s linear .45s` ✓ included per state. Also for .statbar hide: include visibility. Potential specificity: state rules `#power:not(:checked) ~ .main .copy h1 { opacity:.45 }` — id adds specificity, fine. But careful: `#power:not(:checked) ~ .main .ctas .tel { opacity:1 }` after the .btn dim rule — .tel isn't .btn ✓ so only dim .btn (primary). Also dim .kicker,h1,.sub. Header: `#power:not(:checked) ~ .top .brand, #power:not(:checked) ~ .top .links { opacity:.45 }` add transition on .brand,.links. Emergency must not be dimmed by `.copy > *`? I didn't blanket-dim; explicit list only ✓. h1 dim .45 + lights color #6a604e. Let me write .lights OFF color: #6b614e; ::after currentColor follows ✓ (::before animation none & base opacity 0 ✓). Edge dim. Now finalize hint spans positions: .hint { position:absolute; left:46px; top:540px; display:flex; align-items:center; gap:9px; font:500 10.5px mono; letter-spacing:.08em; color:#8b8069; } .hint .harrow { color:#b97e07 } .hint span.on{} .hint span.off { position:absolute; left:calc(13px + 9px); top:50%; transform:translateY(-50%); opacity:0; } widths differ → fine crossfade. Set .hint { position:relative? } inner spans: .on static; .off absolute relative to .hint: left offset after arrow: arrow width 13 + gap 9 = 22px; top:50% translateY(-50%). ✓ State: #power:not(:checked) ~ .main .hint .on { opacity:0 } .off { opacity:1 }. transition opacity .4s on both. Board wiring text elements: font-family:'IBM Plex Mono'; letter-spacing:2px; font-size:9px. SVG text letter-spacing via CSS ✓. Also add slight rotation? no. Compose ticker li svg: width 9 fill #b97e07. Kicker bolt same path 13px. Brand roundel: hmm bolt path: make consistent bolt: M20.2 7 L11.2 20.2 h5.1 L14.5 29 L25.4 15.1 h-5.3 L20.2 7 Z. I'll draw once and reuse path with ? Different files sizes; just repeat path with transforms: define symbol in first svg? Use ... then everywhere with width/height — works inline same doc ✓ nice. Define once in a hidden svg at body start: Watts & Son Electrical — Master Electricians, West London hidden defs svg section.hero ... CSS: write fully. Also — small: `.main` class name conflicts nothing. Let me also compute hint .off left: arrow svg width 13 + gap 9 → 22px. Also for very narrow (<360) plate scaled .7? board min visual width 322 > 320? borderline ok. Alright, final code: I'll now write everything in one pass, carefully. For .stack > * grid-area 1/1 — .statbar & .emergency. Add align-self:start. Emergency default hidden; also `transform: translateY(14px)`. Emergency `box-shadow: 0 24px 48px -20px rgba(0,0,0,.65)`. Also give .emergency a faint top highlight? no. .enum hover: text-decoration underline; color #ffd98a. edot ping ::after needs position: .edot{position:relative; width:9px;height:9px;border-radius:50%;background:var(--amber); flex:none} .edot::after{content:"";position:absolute;inset:-4px;border:1px solid var(--amber);border-radius:50%;animation:ping 1.7s cubic-bezier(.2,.6,.35,1) infinite}. @keyframes ping{0%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}. Beacon on .enum: animation beacon 2.8s ease-in-out infinite. Keyframes list: rise, powerup, flick, sway, flow, run, slide, ping, beacon. flick: 0%,100%{opacity:1} 3%{opacity:.55} 4.5%{opacity:1} 37%{opacity:.9} 38.5%{opacity:.55} 40%{opacity:1} 69%{opacity:1} 70.5%{opacity:.7} 72%{opacity:1} — duration 8.5s. powerup: 0%{opacity:0} 38%{opacity:1} 50%{opacity:.12} 64%{opacity:1} 74%{opacity:.45} 100%{opacity:1} — 1.4s ease-out? use linear-ish ease. sway alternate infinite ease-in-out 7s. flow: as defined, 2.9s. run: 3s. slide: 34s. Reduced motion: .lamp, .pulse, .lights, .ticker .track, .lights::before, .edot::after, .enum { animation: none !important }? blanket: *{animation-duration:.01ms;...} kills loops oddly (they'd run once instantly → fine). Use targeted: those { animation:none !important } + keep transitions. Also add `will-change`? skip. Everything set — write it. Actually one more layout consideration: `.main` min-height to push ticker down when viewport tall: hero{min-height:100svh; display:flex; flex-direction:column} .main{flex:1; display:grid; align-items:center} ✓ ticker bottom ✓. Also on stacked layout, main content may exceed viewport → hero grows ✓. grid align-items:center — for stacked (1 col) also centers vertically per row; single row → fine. Desktop: two columns centered vertically ✓. Now write. (Also remember: no separate files, everything inline ✓.) For the SVG `` approach with `` — old Safari needs xlink; modern fine with href. Accept. Final copy strings double-check apostrophes: use ’? plain ' fine. Write the response: brief intro line, code block ~ full HTML, then explanation with a few bullets. Language: English. Let me carefully write the CSS in order now (mentally compile): Also: `.hero { position:relative; background:var(--bg); transition: background-color .7s ease; overflow:hidden; }` overflow hidden clips board? board inside padding ✓; ticker mask ✓; edge at left:16 ✓. Sway rotation may push glow slightly — overflow hidden ok. `.hero::after` vignette z-index:0; give .top,.main,.ticker,.edge position:relative; z-index:1. And .hero::after pointer-events none. body { margin:0; background:#0c0a07; color:var(--ink); font-family:'Bricolage Grotesque',sans-serif; -webkit-font-smoothing:antialiased; } body::after noise fixed z 60 pointer-events none opacity .045. Also `b`/strong defaults fine. Container paddings var: --pad: clamp(22px, 5vw, 72px). Header: padding:0 var(--pad). Main: padding: 20px var(--pad) 44px. OK write final. hmm one more: input absolute — place top-left; visibility fine. Also I realize: `#power:not(:checked) ~ .main .ctas .btn { opacity:.45 }` — .btn also used in header (.top .btn) — selector scoped under .main ✓ separate rule for header. Emergency width: within copy max-width 640 ✓ fine. Also .copy { max-width:660px }. Finally—write answer. For the marquee mask: mask-image with -webkit- prefix for safari: add both. Also ticker bottom safe-area? skip. Let me also confirm `transform-box: view-box` browser support: Chrome 118+? Actually transform-box values fill-box|border-box|view-box supported Chrome 64+, FF 55+, Safari 11+ ✓ good. Write out code now, being meticulous with matching braces and selectors. After code, explanation section — keep concise (6-8 bullets). Here's my take: instead of a generic stock-photo hero, I built the whole thing around one idea — **a working mains switch**. Flip it and the hero goes dark, the bulb dies, and a 24/7 emergency callout lights up like a beacon. It's a tiny bit of theatre that *is* the pitch: "we keep the lights on." And since you asked for HTML/CSS, I kept it **100% JavaScript-free** — the switch is a checkbox, everything else is CSS. ```html Watts & Son Electrical — Master Electricians, West London

Watts & SonElectrical · London

020 7946 0921 Book a visit

NICEIC Approved Contractor · Part P · Est. 1989

We keep
the lights on.

Third-generation master electricians covering West & South-West London. Rewires, consumer units, EV charge points and EICR certificates — every job notified, signed off and guaranteed for five years.

Book an electrician 24/7 emergency line020 7946 0921

38Years on the tools

12,400+Jobs signed off

4.9620 Which? reviews

24/7 Emergency callout — London

020 7946 0921

Total outage? Board that won't reset? Kill the mains and call — a human answers, day or night. Average 47 minutes to your door.

MAIN SUPPLY

go on — flip it flip it back on

Single phase · 230V · 50Hz · RCD protected · Part P compliant

Full & part rewires
Consumer units
EICR certificates
EV charge points
Fault finding & repairs
Smart lighting
Outdoor power
Landlord certificates

``` **What's going on in there:** - **The signature moment** — a real UK-style rocker switch (with screws, an indicator LED, and a 3D `rotateX` dolly) wired to a hidden checkbox. Flip it and the room blacks out in sequence: the bulb dies, the current pulses on the circuit stop, the trust stats fade, and an emergency panel slides up with a pulsing beacon phone number. Flip it back and the bulb does a little power-up surge flicker — just like a real filament. All of it is one `:checked` pseudo-class; zero JavaScript. - **The illustration is diegetic** — an SVG pendant bulb swaying gently from its ceiling rose, a circuit trace running from the switch with a current pulse travelling along it (`pathLength` + `stroke-dashoffset`), and spec annotations ("6A · 1.5mm²", "First floor lights") for authenticity. - **Palette & type** — warm charcoal + electric amber + cream, with Bricolage Grotesque for the editorial headline and IBM Plex Mono for the technical labels. The amber glow you see is literal lamplight, not decoration. - **Copy that sells like a UK trade site** — NICEIC / Part P credentials, Which? review stats, and an Ofcom-reserved drama-range London number. - **Practical bits** — the board scales via a single `--bs` variable so the switch and wiring never misalign, stats crossfade into the emergency panel in the same grid slot (no layout jump), the ticker pauses on hover, everything is keyboard-accessible with a visible focus ring on the switch, and `prefers-reduced-motion` is respected.

We keepthe lights on.

We keep
the lights on.

build a really beautiful hero section for an electrician com...