Harper & Watt — Electricians in Sheffield

The user wants a beautiful hero section for a UK electrician company website. They want a single HTML file with embedded CSS (they said HTML/CSS, so I'll keep it primarily CSS-driven, maybe tiny vanilla JS for interactions — they said html/css so let me lean heavily on CSS, but a small bit of JS for interactions is acceptable if it elevates; actually they said "in html/css" — I should respect that and keep it to HTML + CSS only, no JS. I can still make it animated with pure CSS). Let me think about the design direction: UK electrician company. Think: NICEIC approved, Part P registered, 24/7 callouts, domestic & commercial. UK aesthetic — trustworthy, professional, local. I want to avoid: gradients as decoration, blue/purple defaults, emoji icons, generic layouts, equal-width card rows, glowing titles, Inter/Roboto as identity font. Design concept ideas: 1. **"Circuit board" motif** — an animated SVG circuit trace that runs across the hero, with a pulse of current travelling along it. This is the signature moment. Copper/amber accent color (like copper wire) on a deep charcoal/near-black background. This feels electric without being cheesy lightning bolts. 2. Color palette: Deep ink/charcoal (#0E0F0C or a warm dark like #12110E), warm off-white paper (#F4F1EA), copper/amber accent (#E8A33D or #D98E32 — copper wire color). Maybe a touch of "live" yellow like UK warning yellow (#F5C518-ish) — but I'll go copper/amber, more refined. High contrast. 3. Typography: A distinctive display font. Options from Google Fonts: "Fraunces" (elegant serif), "Space Grotesk" (techy), "Archivo" / "Archivo Expanded", "Clash Display" (not on Google), "Bricolage Grotesque" — Bricolage Grotesque is great and distinctive. Or "Instrument Serif" for an editorial touch. For an electrician: I'd go with a strong grotesque — "Archivo" with wide/black weights, or "Bricolage Grotesque". Let me use "Bricolage Grotesque" for display and maybe "Instrument Sans" or "Archivo" for body. Actually let me pair: Display = "Bricolage Grotesque" (has optical sizes, very characterful), Body = "Archivo". Mono accents = "Space Mono" or "JetBrains Mono" for labels like "NICEIC APPROVED · EST. 1987". A mono for small labels gives a technical spec-sheet feel — fits an electrician (voltage ratings, certifications). 4. Layout: Asymmetric. Left: big headline. Right or integrated: a visual — maybe a large SVG illustration of a consumer unit / fuse board, or an abstract live circuit. Or: full-bleed composition with the circuit trace sweeping from left edge, through/behind the headline, connecting to nodes. A "current pulse" animates along the path (stroke-dashoffset animation), lighting up nodes as it passes. Also: a ticker/marquee at the bottom with certifications: "NICEIC Approved Contractor · Part P Registered · 24/7 Emergency Callout · 5.0★ on Checkatrade" — wait, avoid star emoji... a star character is fine? Stars as rating... I'll use text like "Rated 5.0 / Checkatrade" without emoji. Marquee is a bit common but done tastefully as a thin spec strip it works — like a hazard-tape strip? A diagonal hazard stripe could be cheap. Keep it as a thin mono-type marquee with separator glyphs like "◆" or just "/" — small diamond separators drawn with CSS, not emoji. Actually a small rotated square via CSS or "·" characters. Fine. 5. Signature moment: The animated circuit — a hand-drawn-feeling SVG path with right-angle traces (circuit board style), current pulse (a glowing dot... hmm, glow. A small bright dot moving along path is okay if subtle; I said no glow ornaments but a "current" dot is functional storytelling, not bolted-on glow. I'll keep it as a bright copper dot with modest blur, that's the concept itself). Nodes light up when pulse passes — I can sync with CSS animation delays along the path since I control the timing. Better: use SVG `` nodes whose opacity keyframes align with the dash animation timing. If the pulse travels the path in 6s linear and I know approximate fraction positions of each node along the path, I can time their "flash". Getting exact fractions is tricky; approximate is fine. Alternatively, animate stroke-dashoffset on a bright short dash riding a dim full path — classic technique: a path with stroke-dasharray like "80 1200" and animate dashoffset. That creates a moving segment of light along the trace. 6. Also add: a subtle grid/graph-paper background (like technical drawing) at very low opacity — fits "spec sheet" vibe. 7. Content: - Top nav: logo (custom wordmark "Voltaire"? UK electrician names: "BrightSpark" is cliché... "Amp & Ohm"? Let me pick something credible: "Northline Electrical", "Hartley & Watt", "Kestrel Electrical". I like "Hartley & Watt" — feels like a proper established UK family firm. Or "Watts & Sons". Let me go: **"Harper & Watt — Electricians"** est. 1987, Sheffield or Leeds. Good. - Nav links: Services, About, Areas, Contact; phone number prominent (UK format 0114 258 4412 style). - Headline: something memorable. "Safe hands. Live wires." — nice wordplay. Or "The current runs through everything we do." Or big: "PROPERLY WIRED." Hmm. Options: - "Good wiring is invisible. So is our downtime." - "We keep Sheffield switched on." - Big statement: "SAFE / AS / HOUSES" with each word stacked? "Safe as houses" is a very British idiom — perfect for an electrician! Headline: "Safe as houses. Solid as the national grid." That's characterful. - Or: "Wired right, first time." I'll go with a stacked display headline: "SAFE AS HOUSES." big, then supporting line. That's memorable and British. - Sub copy: "NICEIC-approved electricians covering Sheffield and South Yorkshire since 1987. From a flickering lamp to a full rewire — done properly, certified, guaranteed." - CTAs: primary "Book an electrician" (solid copper button), secondary "24/7 emergency: 0114 258 4412" (outline with phone). - Trust stats strip: not equal cards — a single line: "Est. 1987 · 12,000+ jobs certified · NICEIC Approved · Part P". Or three stats laid asymmetrically. 8. Interaction without JS (pure CSS): - Button hover states with real transitions. - The current pulse animation loops. - Nav link underline animations. - Maybe a "live" status indicator: small dot pulsing "Electricians on call now — 2 available" like a live availability badge. The pulsing dot = alive feel. - Hover on the fuse-board illustration could animate switches — without JS, CSS :hover on SVG parts can flip a breaker. That's a fun micro-interaction: hover a breaker switch and it flips with a satisfying animation, and a light indicator turns on. That could be the memorable moment! A big consumer unit (fuse board) illustration on the right where hovering each rocker flips it, and when all... hmm, per-element toggling needs checkboxes (CSS-only toggle with :checked). I could make each breaker a checkbox pair — click to toggle, with labels as rockers. Clicking rockers to toggle circuits — pure HTML/CSS. And a "MAIN" master switch. When toggled, a corresponding room label lights. That's genuinely interactive and memorable: "flip the breakers." That might be ambitious but doable: 6 breakers, each an + label styled as a rocker switch (vertical rocker). Checked = ON position (switch translates up), circuit label LED turns amber. Let me design the consumer unit: a rounded rectangle panel, dark metal color with subtle border, two rows of MCB rockers, main switch on left, an RCD test button. Labels below each: "LIGHTS UP", "SOCKETS", "KITCHEN", "SHOWER", "OVEN", "GARAGE" etc. Keep it stylized/flat-ish with precise details — dimension feel. Rocker style: vertical pill, ~26×64px, with the inner "paddle" that shifts. ON shows small "I", OFF shows "O" (standard IEC symbols — nice authentic detail, and they're text characters, not emoji). LED indicator next to labels: small dot, off = dark, on = amber. Maybe also a hairline "load meter" — when more circuits on... can't compute across checkboxes in CSS. Skip. 9. Bottom strip: marquee with certifications in mono: "NICEIC APPROVED CONTRACTOR / PART P REGISTERED / 24H EMERGENCY CALL-OUT / TRUSTMARK REGISTERED / CITY & GUILDS QUALIFIED / £5M PUBLIC LIABILITY /" repeating. Marquee via CSS animation, duplicated content. Pause on hover. Tasteful. 10. Background: warm near-black (#111310?) Let me pick: - bg: #131512 (warm dark, slight green-black like old bakelite? or neutral #141414). Copper on warm dark looks great. Use #16140F. - ink/paper text: #F2EDE3 (warm paper white) - copper: #E39A3B / brighter #F2B04A for highlights - muted: #8A857A Graph grid lines: rgba(242,237,227,0.045). Hmm, but large low-contrast gray areas on dark backgrounds is something I want to avoid — I'll keep text contrast high, muted text still readable (~#9a9385 on #16140F is okay for small secondary, and keep amounts small). Alternatively light theme: warm paper background with dark ink and copper — editorial, very "British trade" like a well-designed van livery. A cream/off-white hero with black ink type and copper accents could actually be more distinctive than another dark hero, and dodges the "dark + glow" cliché entirely. Electricians' vans are often white with bold type. Hmm. Let me decide: **Light warm-paper hero** with near-black ink and copper accent — feels premium, editorial, distinctive. The circuit trace in copper on paper. Consumer unit in dark enamel sitting on the paper — nice contrast object. Marquee strip in ink black with paper text at bottom. This avoids every dark-theme cliché and looks like a designed brand. Palette: - paper: #F3EEE3 (warm cream) - ink: #191713 - copper: #C4622D? True copper is #B87333. On cream, copper #B4551F or #C05F2C reads well. Highlight copper #E07A3F. Let me use: --copper: #BC5A28; --copper-bright: #E27B3E. - optional supporting: a deep green? UK heritage: dark racing green #1E3A2F could be secondary (van livery often green/cream!). Actually cream + deep green + copper is a gorgeous British heritage combo. Nav/logo in green? Might muddy. Keep: paper, ink, copper, plus a muted line color rgba(25,23,19,0.15). Maybe use ink for the marquee band and the fuse board casing — restrained. Typography: - Display: "Bricolage Grotesque" — load weights 800/700 with optical sizing. Big stacked headline "SAFE AS HOUSES." Hmm — actually maybe better as: line 1 small "Harper & Watt" ... no, headline: "Safe as houses." in huge display, with "houses" possibly in italic or copper. Or stack: SAFE AS HOUSES. Stacked left-aligned huge (clamp 4rem–8rem). Tight leading. With a small copper circuit path weaving near it. - Mono labels: "Space Mono" or "IBM Plex Mono". IBM Plex Mono is clean. Use for eyebrow: "NICEIC APPROVED CONTRACTOR — SHEFFIELD, S.YORKS — EST. 1987". - Body: "Archivo" or Bricolage at lower weight. I'll use "Archivo" 400/500. Layout plan (desktop): - Full viewport hero (min-height: 100svh), grid: - header row: logo left, nav center/right, phone button right. - main: two columns — left: eyebrow, H1, para, CTAs, mini trust row; right: consumer unit interactive panel, slightly rotated? A slight rotate(-1.5deg)? Might be gimmicky. Keep straight but with a hard offset shadow (solid ink shadow offset 8px) for a printed feel. - bottom: marquee strip full width. - Circuit trace: an absolutely-positioned SVG spanning the hero, path running from left edge, with right-angle bends, passing behind headline area, ending at the consumer unit (as if powering it), with a travelling pulse. Nodes (small circles) at bends. Draw path with dashed bg? Style: 2px copper line at 35% opacity for the trace; the pulse segment brighter. Also add corner registration marks / spec annotations in mono: tiny labels like "FIG. 01 — DOMESTIC CONSUMER UNIT", "230V ~ 50Hz", "BS 7671:2018" scattered as annotation text — gives authored technical-drawing character. One near the fuse board: "FIG. 01 — 8-WAY CONSUMER UNIT, BS 7671". One near headline maybe "SHEET 1/1". These annotations are a nice craft detail. Emergency element: UK electrician sites need "24hr emergency callout". A distinct chip near CTAs: pulsing dot (copper) + "2 electricians on call now". Alive feel. Consumer unit details (CSS-built, not SVG, for crispness & interactivity): Container: width ~ 400-460px, background ink (#191713), border-radius 14px, padding, with an inset border line (copper hairline at top? maybe a small brand plate "HARPER & WATT — TYPE 2 — 230V~"). Inside: - Left column: main switch (a larger rocker) labelled "MAIN 100A" + RCD test button (small round, press effect on :active) labelled "TEST". - Right: grid of 6 MCBs (rockers) each with label beneath in mono tiny text and LED. Rows: maybe 2 columns × 3 rows of MCBs to fit width; real units are single row but for layout, 6 in one row is too wide. Alternatively 2 rows of 3. Fine — stylized. Rocker: button-like label over hidden checkbox. Structure: ```

IO LIGHTS

``` CSS: input hidden; .rocker shows paddle top when checked (ON = up). transition transform. LED: when #c1:checked ~ sibling led → background copper + small box-shadow (tiny, it's an LED — a 1px glow radius is honest). Use `#c1:checked ~ .led`. LED placement: inside the tag row? Each MCB cell: rocker centered, below it "tag" with tiny LED left of text. Paddle: I'll render rocker as a track (lighter inset) with a paddle (ink? no—) Real MCBs: black casing with a grey/black rocker that shows white "ON/OFF" area. Stylize: track = #26231d inset; paddle = paper-ish? Let me do paddle = #E8E2D4 (paper) — bright switch on dark board pops nicely and matches brand. When ON, paddle at top with "I" visible on paddle; when off, slides down, "O". Actually put letters on track: "I" at top, "O" at bottom in tiny mono, paddle covers the inactive one. Simpler: paddle has both? Keep letters on the track beside, dim when covered, bright when exposed: ``` .rocker { position:relative; } .rocker .i, .rocker .o { position:absolute; tiny mono; } #c:checked + .rocker .i { color: paper; } etc. .paddle { position:absolute; left:3px; right:3px; height:calc(50% - 3px); top:3px; background:paper; border-radius:4px; transition: top .18s cubic-bezier(.6,-0.2,.3,1.4); } #c:not(:checked) + .rocker .paddle { top: calc(50% + 0px); } ``` Slight overshoot easing gives a snap. Also on toggle, could flash LED. Nice. Main switch: wider rocker, default checked, maybe hide input & just static? Make it also toggleable but if main off... no logic. Make main switch also a checkbox styled bigger; independent. Fine. Or leave main as a static decorative larger rocker that wiggles on hover. I'll make it toggleable too, but no dependence. Add a small screw detail (dots) at corners of the board plate. Also a nice touch: the board's label strip at top: "HARPER & WATT · TYPE II · 230V ~ 50Hz · BS EN 61439" in tiny mono embossed (color #4a463d on ink, readable-ish). And a copper hairline separating. Under the board: annotation "FIG. 01 — TRY THE BREAKERS" with an arrow? A small hint in mono: "Go on — flip a breaker." in handwritten style? Handwritten font might be too cutesy; use mono italic. Cute microcopy invites interaction — good. The circuit trace connects visually to the board's left side. Mobile: stack — headline first, board below, marquee bottom. Use clamp everywhere, grid → single column. Header: - Logo: a small bolt glyph? Avoid cliché bolt... A custom mark: a square with "H&W" or a minimal mark: circle with a horizontal line and dot = simplified switch symbol (IEC symbol for a switch!). IEC switch symbol: a line with a lever — draw tiny inline SVG: circle-line-lever-circle. That's authentic and clever: the schematic symbol for a switch as the logo mark, in copper. Plus wordmark "HARPER & WATT" in Bricolage 800, small "ELECTRICAL" letter-spaced under or beside. - Nav: Services, Rewires, EV Chargers, About, Contact — with hover underline (copper) via background-size transition. - Right: phone pill: outline button "0114 258 4412" mono; and CTA "Book a visit" ink solid? Keep header light: one button ink. Eyebrow: mono, with a small copper square bullet: "NICEIC APPROVED · SHEFFIELD & SOUTH YORKSHIRE · EST. 1987" Headline with copper accent: "Safe as houses." — put "houses." in copper? Or italic serif for one word? Mixing an italic serif (e.g., "Instrument Serif" italic) for "houses" is a lovely editorial touch: "Safe as *houses*." — Instrument Serif Italic for the accent word. Yes — load Instrument Serif italic too. Sub: "From a tripping breaker at midnight to a full rewiring of a Victorian terrace — we do it properly, certify it, and guarantee it for ten years." CTAs: - Primary: "Book an electrician" — ink background, paper text, hard offset copper shadow that grows on hover, slight translate. - Secondary: "24/7 emergencies" with phone icon (use an inline SVG phone icon or lucide via CDN — single-file CDN allowed; but simpler to inline small SVG icons: phone, arrow). Inline SVG arrow that nudges on hover. Trust row under CTAs: three inline stats separated by hairlines (not cards): "38 yrs trading / 12,400 jobs certified / 4.9 Checkatrade (612 reviews)". As a horizontal row with dividers, small mono numbers in copper, labels in tiny caps. Not equal cards — just a flex row with left borders. Acceptable as it's a stat line, keep visually a single line, asymmetric widths. Marquee: ink band at very bottom of hero: repeating "NICEIC APPROVED CONTRACTOR — PART P REGISTERED — TRUSTMARK — 24/7 EMERGENCY CALL-OUT — £5M PUBLIC LIABILITY — CITY & GUILDS CERTIFIED — " in paper mono, with small copper diamonds between. Duplicate content 2× for seamless loop, animation translateX(-50%). Pause on hover. Grid paper background: subtle 1px lines every 48px at rgba ink 0.05, maybe plus larger 240px lines slightly stronger. Pure CSS gradients. Careful: "gradient background blocks" prohibition refers to decorative color gradients; a technical grid via linear-gradient lines is structural texture, fine and crisp (hard stops). Circuit SVG: absolutely positioned, z-index between bg and content (or behind text). Path example: start at left edge x=0,y=40%, go right, corner, down, etc., with rounded corners (use path arcs or just sharp corners — circuit style has 45° corners! Authentic PCB traces use 45° bends. Nice detail: use 45° chamfered corners.) Stroke copper at 0.5 opacity thin 1.5px. Pulse: same path overlay with stroke-dasharray "90 1600" animated dashoffset from 1690→0? For a path of length L, animate stroke-dashoffset from L+seg... simpler: dasharray: 90 2400; keyframes dashoffset from 2490 to 0 linear 7s infinite. Direction depends on path drawing direction. Also a leading dot? The dash segment suffices; maybe round linecap. Nodes: small circles at some path vertices, fill paper, stroke copper; a few have inner dot that blinks at staggered delays (2s cycle) — like status LEDs. Subtle. Also the trace ends at an outlet/plug symbol? End with an IEC socket symbol or arrow into the board. Keep simple: terminate with a filled copper square node near board. Reduce motion: @media (prefers-reduced-motion: reduce) — kill marquee/pulse animations. Responsive: - ≤1080px: board scales down (transform scale or smaller sizes via clamp on board width). - ≤900px: single column, board after text, centered-left; circuit svg hidden or simplified (keep, opacity lower). - Header nav: hide links on small, show only phone button + logo (no JS hamburger since no JS; a CSS-only hamburger with checkbox is possible — add it? To keep scope sane, at mobile show logo + phone button; nav links hidden. Acceptable for a hero-section demo. Or implement checkbox hamburger — extra flair; let me add simple details/summary? A

hamburger is easy and JS-free! Maybe skip to keep focus on hero composition; I'll hide nav under 860px and show a "Menu" details dropdown? Let me include a minimal details-based menu for completeness — actually the request is a hero section; nav simplicity is fine. I'll include the details hamburger quickly: styled summary with two bars; details[open] shows links panel. It's ~15 lines. Good craft. I'll do it.) Selection color: copper bg paper text. Fonts via Google Fonts link: Bricolage Grotesque (wght 800; maybe 600), Instrument Serif italic, Archivo (400;500;600), IBM Plex Mono (400;500). Four families is a lot but each has a role. Maybe drop Archivo and use Bricolage for body at 400? Bricolage body works fine. Reduce to 3: Bricolage Grotesque (display+body), Instrument Serif (accent italic), IBM Plex Mono (labels). Good — tighter identity. Bricolage Grotesque Google URL: family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,700;12..96,800 — request needed subsets. Let me also add subtle noise? Skip — keep clean. Headline sizing: clamp(3.2rem, 8.5vw, 7rem), line-height 0.95, letter-spacing -0.02em, weight 800, optical size large (font-optical-sizing auto or font-variation-settings). "houses" italic serif copper, slightly larger optically (serif italic tends to sit smaller; set 1.02em). Layout metrics: hero uses min-height 100svh; display flex column; header padding 28px 48px; main grid grid-template-columns: 1.05fr 0.95fr; gap 48px; padding 32px 48px 64px; marquee at bottom margin-top:auto. Circuit path coordinates: viewBox "0 0 1440 900" preserveAspectRatio="none"? Non-uniform scaling distorts stroke; use preserveAspectRatio="xMidYMid slice" with fixed viewBox 1440×810 and position absolute inset 0. Slice crops—okay. Or place svg only behind left column with pointer-events none. I'll do full-bleed svg with slice; design path within central area so cropping safe-ish. Simpler: hidden below 900px. Path design (1440×810): start x=-10,y=560 → h to 180 → 45° up to (220,520) → h 140 (360,520) → 45° up (400,480) → h to 620 → 45° down to (660,520)... hmm it should weave near the headline (left column occupies x≈48–700, y≈250–700). Let me route: from left edge y=600, across under the CTAs to x=560, then chamfer up-right to 600,560, right to 760, chamfer down to 800,600, right to 1040 — approaching the board area (right column x≈780–1390). Then it should climb to board's left side: chamfer up to (1080,560), up to y=300? The board sits roughly x 860–1330, y 180–620. Have trace enter board's bottom-left: go to (860, 640) then chamfer up to (900,600) then up to (900, 300)?? crossing the board... The board is DOM on top; trace behind it disappears under it — that actually reads as "entering the unit". I'll draw: M -20 620 H 320 L 360 580 H 560 L 600 540 H 700 L 740 580 H 980 L 1020 540 H 1180 (ends near board's lower area with a terminal square). Plus a second thinner branch: M 320 620 L 360 660 H 640 with a node — adds network feel. And a vertical branch up: from 700 540 L 700 300? that collides with text; okay it's behind text at low opacity... keep minimal: main + one branch + one short upper stub near top-left: M -20 120 H 140 L 180 160 with node — up near nav. Subtle. Nodes at (320,620),(560,540)? place at: (360,580),(700,540),(1020,540) and terminal (1180,540) square. Branch nodes (360,660)? Pulse: single moving dash on main path. I'll fine-tune numbers while writing; approximate is fine since it's abstract annotation. LED glow: box-shadow: 0 0 6px 1px rgba(226,123,62,.7) — tiny, honest LED bloom, acceptable. Emergency chip: border 1px ink/20, radius full, contains pulsing dot (copper, animation scale/opacity ring via ::after) + mono text "2 ENGINEERS ON CALL — 24/7". Buttons detail: primary ink button with copper 4px offset solid shadow (box-shadow: 4px 4px 0 copper) — on hover translate(-2,-2) & shadow 6px 6px 0; active translate(2,2) shadow 2px. Tactile, print-like. Secondary: transparent, 1px ink border, arrow icon svg inline; hover bg ink text paper. Nav underline: background-image: linear-gradient(copper,copper) — that's fine (it's a solid line, not decorative gradient). Use border-bottom animated width instead: ::after scaleX. Let me now also think headline copy final: Eyebrow: "NICEIC APPROVED ELECTRICIANS — SHEFFIELD & SOUTH YORKSHIRE" H1: Safe as *houses.* — maybe extend second line smaller: no, single line stacked: "Safe as houses." Two lines, "houses." italic copper serif. Strong. Paragraph: "Rewires, fuse boards, EV chargers and everything in between — done to BS 7671, certified on the spot, and guaranteed for ten years. The kind of work you never have to think about again." Stats: "EST. 1987" / "12,400+ JOBS CERTIFIED" / "4.9 ON CHECKATRADE (612)". Format: number big-ish Bricolage 700, label mono tiny. Board hint: below board: mono italic "fig. 01 — go on, flip a breaker." with a small drawn arrow? A little SVG curved arrow pointing to a rocker. Nice authored touch. I'll add small svg arrow from text to board. Screws at board corners: 4 small circles with a slot line (::before?) — do simple: each corner div.screw with radial? no gradients... a flat circle #2a2721 with a 1px paper-ish slot line via linear-gradient? Just an inline SVG? Simpler: small circle with ::after 8×1px line rotated 45°. Fine. Board top plate text + a small copper "LIVE" window? Real boards have an "RCD" label. Add two columns header: left big main switch, right 6 MCBs grid 3×2. Sizes: board width clamp(340px, 34vw, 430px). MCB rocker ~30×70. Main rocker 46×110. Labels: LIGHTS, SOCKETS, KITCHEN, SHOWER, GARAGE, SMOKE ALARM (6). LEDs on label line. Also add faint "zone" annotations around board in mono absolutely positioned: "BS EN 61439-3" top-right outside, tiny. And "230V~50Hz" bottom. Mobile menu with details: ``` ``` Styled only under 900px (display none on desktop). Alright — also the marquee: content items separated by copper "◆" — I'll use a span.diamond (CSS rotated square) to avoid emoji-ish chars. Rotation transform inline-block 6px square copper. Let me consider potential large low-contrast issues: muted text #6d675c on #F3EEE3 — contrast ok (~4.6). Fine. Focus states: outline copper offset for a11y. Now write the code carefully. Single HTML file. Let me draft CSS variables: ``` :root{ --paper:#F3EEE3; --paper-2:#EBE4D5; --ink:#191713; --ink-soft:#3A362E; --muted:#6E6759; --line:rgba(25,23,19,.16); --copper:#BC5A28; --copper-bright:#E07B3E; --board:#211E18; --board-edge:#2C2820; --paddle:#EDE6D6; } ``` Grid background: ``` background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; ``` --grid: rgba(25,23,19,.055). Applied to hero ::before inset 0. Plus maybe a stronger cross mark at intersections? skip. The hero section is the whole page here (100svh). Include a tiny footer? No — hero only, marquee at bottom serves as the base. Maybe add just below marquee nothing. Keep body bg paper. Write the pulse keyframes: ``` .trace-main { stroke: var(--copper); opacity:.45; } .pulse { stroke: var(--copper-bright); stroke-width:2.5; stroke-linecap:round; stroke-dasharray: 70 1900; animation: ride 6.5s linear infinite; } @keyframes ride { from { stroke-dashoffset: 1970; } to { stroke-dashoffset: 0; } } ``` Direction: decreasing dashoffset moves dashes forward along path direction. Path starts at left edge so current flows into board. Blinking nodes: ``` .node-dot { animation: blink 2.8s infinite; } .node:nth-of-type… delays .0/.7/1.4/2.1 @keyframes blink { 0%,100%{opacity:.15} 8%{opacity:1} 16%{opacity:.15} } ``` Font links: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Instrument+Serif:ital@1&display=swap Logo mark SVG (switch symbol): ``` ``` That's the IEC open-switch symbol. Copper color. Phone icon inline svg small for secondary CTA & header pill. Header pill "0114 258 4412" mono with phone icon; hover invert. Now the board HTML: ```

HARPER & WATT TYPE 2 · 230V~ 50Hz · BS EN 61439-3

IO MAIN
100A

-- a real

6 × mcb

screws

fig. 01 — go on, flip a breaker.

``` Hmm main-col layout: main rocker on left, plus RCD test button below it. Tag under each rocker. MCB cell: ```

IO LIGHTS

``` CSS sibling: #mcb1:checked ~ .led { on }. Since led after label, sibling selector works. Rocker CSS: ``` .rocker{ position:relative; width:30px; height:68px; background:#161310; border-radius:5px; box-shadow: inset 0 0 0 1px #383328; cursor:pointer; display:block; } .paddle{ position:absolute; left:4px; right:4px; height:calc(50% - 6px); top:3px; background:var(--paddle); border-radius:4px; transition: top .16s cubic-bezier(.55,0,.4,1.4); box-shadow: 0 1px 0 rgba(0,0,0,.4); } input:not(:checked) + .rocker .paddle{ top: calc(50% + 3px); } .rocker .mi,.rocker .mo{ position:absolute; font:500 8px mono; left:50%; transform:translateX(-50%); color:#5c554a; font-style:normal;} .mi{ top:8px } .mo{ bottom:8px } input:checked + .rocker .mi{ color: var(--ink); } /* letters on paddle? letters are on track under paddle... */ ``` Problem: letters at top would be covered by paddle when ON. Put letters ON the paddle? Real MCBs print ON/OFF on the visible exposed part. Better: put "I" letter positioned to appear on paddle face when ON... simpler: place letters in middle of paddle & track? Alternative clean approach: letters on the track top/bottom edges just 2px — partially covered is messy. Cleaner: paddle contains both letters stacked? When ON (top), show "I" on paddle; when OFF (bottom), show "O". Implement: paddle has ::after content "I" centered; when unchecked, content "O". With transition snap. Text color ink, font mono 9px bold. That reads perfectly: exposed paddle shows current state letter. ``` .paddle::after{ content:"I"; position:absolute; inset:0; display:grid; place-items:center; font:600 10px 'IBM Plex Mono'; color:var(--ink); } input:not(:checked)+.rocker .paddle::after{ content:"O"; } ``` Main rocker: width 42px height 120px, same logic, paddle taller. LED: 7px circle; default #3a352c; checked → copper-bright + glow. Position: within tag row. Structure: tag line under rocker: `LIGHTS`. Then selector: input:checked ~ .tagline .led — but tagline must be sibling after input. Order: input, label, span.tagline. OK. Grid: .mcb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 18px; } each cell flex column align center gap 8. Board head: padding 10px 16px, flex between, mono 9px letterspaced color #6b6355; bottom hairline #383328. Also small copper square logo dot in plate. Board container: background var(--board); border-radius 12px; padding: 18px 20px 22px; box-shadow: 10px 10px 0 rgba(25,23,19,0.9)? Solid ink offset shadow on paper bg — strong print vibe. Actually shadow color: var(--ink). Plus 1px border #000? Add outline hairline rgba(255..). Also inner top highlight skip. Screws: position absolute 4 corners of board: 9px circles #353026 with slot line. Test button: round 34px, bg #161310 border #383328, color #b7ae9d mono 8px "T"? Label under: "RCD TEST". Active: translateY(2px). It's a button element; clicking does nothing — is that a "dead interactive element"? It should do something... Make pressing it flash all LEDs off momentarily? Pure CSS can't. Alternative: make the TEST button toggle a CSS state too — could be another checkbox: checking "test" switches board into "tripped" state: all MCB LEDs off + a red...? RCD test trips the main! I can make it a checkbox "test" that when checked: main switch paddle forced down & main LED off + a small "RCD TRIPPED" indicator shows. But combined with main's own checkbox state — CSS can't OR/AND easily... Actually: `#test:checked ~ ...` no, main is separate branch. Simpler honest solution: make it a reset-style button that when :active visibly depresses and its own tiny LED flashes (button:active styles) — a press feedback but no state change... borderline dead. Better: remove test button; replace with a small "RCD" module that's just labeled graphic (non-interactive graphic is fine — it's an illustration, not a button-looking control). Render as a flat labelled block "RCD 30mA" with two tiny buttons drawn (non-clickable part of illustration is okay — it's a picture of a consumer unit). Hmm, but if it looks pressable users press it. Make it visually a graphic module (rounded rect with text) not a button shape. Fine. Actually — I can make RCD test work with clever CSS! Put the test checkbox BEFORE everything in board-body, so `#test:checked ~ .main-col .rocker` etc. Structure: input#test first child of .board-body, then .main-col, .mcb-grid. Then: ``` #test:checked ~ .main-col #sw-main? ``` can't select into descendants' siblings from ancestor's sibling... #test:checked ~ .main-col .main input? We can't force input state, but we can force visual: `#test:checked ~ .main-col .main .paddle { top: bottom }` override with higher specificity, and dim all LEDs: `#test:checked ~ .board-lights .led { off }` plus show "TRIPPED" banner: a .trip-flag element after #test: `#test + .trip-flag { display }`. And label the test control as clickable rocker-like small button labeled "TEST" with instruction. When tripped: a red-ish flag? Copper suffices: "RCD TRIPPED — RESET MAINS" text appears; user unchecks (click again) to reset, then flips mains back on. That's a genuinely fun narrative! But overriding paddle: need `!important`-ish specificity — `#test:checked ~ .main-col .main .paddle { top: calc(50% + 3px) !important; }` and its LED: force off similarly. And to communicate: main paddle forced O, all LEDs forced off: `#test:checked ~ * .led { background:#3a352c; box-shadow:none; }` with !important-ish. Also trip flag styled copper bg ink text mono tiny. But wait — if test is checked and main checkbox still checked, LED rule from `#sw-main:checked ~ .tagline .led` competes; use !important on trip rules — acceptable pragmatism. Also the paddle ::after content stays "I" since based on input state — override: `#test:checked ~ .main-col .main .paddle::after{ content:"O" }`. Test control: `TEST` small square button; when checked, style it "latched" (copper bg) hinting state changed; label "PRESS TO TEST"? Space tight. Tooltip-ish caption under: mono 7px "RCD TEST". The trip flag appears over the board head area or below grid: absolutely positioned strip at board bottom: "RCD TRIPPED — CLICK TEST AGAIN TO RESET". Clear affordance. This is the signature interaction: press TEST → whole board trips (all lights die, main snaps down, flag appears) → click again → reset, flip mains up. Delightful and thematically perfect for an electrician. I'll order z fine. Also hint text updates? Can't via CSS content swap: could: `.hint::after{ content:"fig. 01 — go on, flip a breaker." }` and when...: hint is outside board & not sibling. Could put hint inside board-wrap after figure? Make wrap contain hidden input too... simpler: skip contextual hint change; the flag explains itself. Edge: `#test:checked ~ * .led` — with ~ universal descendant: `#test:checked ~ .board-body .led`. Structure board: ```

…

RCD TRIPPED — PRESS TEST AGAIN TO RESET

…

screws…

``` But board-body flex: hidden input absolute-positioned off. trip-flag absolute bottom overlay. main-col & grid are flex children. Selector `#rcd:checked ~ .main-col .led`? LEDs are inside .tagline spans inside .cell inside .mcb-grid; trip covers all: `#rcd:checked ~ .main-col .led, #rcd:checked ~ .mcb-grid .led { … }`. And main paddle: `#rcd:checked ~ .main-col .main .paddle {…}`. Mains LED: main also gets a tagline with LED "MAINS". Trip flag position: absolute left/right 0 bottom -? Inside board bottom: inset-inline:20px; bottom:14px; padding:7px 10px; background:var(--copper); color:#17130f; font mono 9px; letter-spacing:.08em; It overlays grid bottom row partially — instead place at top under head? Overlaying bottom is fine, board tall enough; or position it floating above board (top:-?) as a callout tag sticking out. Put it as a strip overlapping board's bottom edge (bottom:-1px translate). I'll set bottom: 10px; with slight rotate(-1deg)? no rotation — clean. MCB default states: mixed — lights checked, sockets checked, garage unchecked etc. Variety shows both states. Defaults: LIGHTS ✓, SOCKETS ✓, KITCHEN ✓, SHOWER ✗, GARAGE ✗, ALARM ✓. Also mobile: board max-width 420 margin auto. The hint arrow: small inline SVG under board: curved arrow pointing up-right toward board. Draw: `

Safe ashouses.

Safe ashouses.

Safe as
houses.

Safe as
houses.

build a really beautiful hero section for a uk electrician c...