/* ========================================================= CAB Electrical Services — site stylesheet Palette taken from UK cable colours: live = brown/amber, neutral = blue, earth = green/yellow ========================================================= */ :root { --bg: #0D151E; /* blue-black, like a cable duct at night */ --surface: #131E29; --raised: #1A2835; --line: #273A4C; --text: #E9EEF3; --muted: #9AA9BA; --live: #FFB547; /* lamp amber, the "live" accent */ --live-deep: #E0902A; --neutral: #5B9BFF; /* neutral-conductor blue */ --earth-g: #4FA84A; --earth-y: #E6CF3A; --danger: #FF6B5E; --ok: #53C78A; --radius-s: 6px; --radius-m: 12px; --radius-l: 22px; --wrap: 1200px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --font: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } html, body { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-variation-settings: "wdth" 100; padding-bottom: env(safe-area-inset-bottom, 0px); } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--live); text-underline-offset: .18em; } a:hover { color: #FFD08A; } :focus-visible { outline: 2px solid var(--neutral); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -999px; top: 0; background: var(--live); color: #1a1206; padding: .6rem 1rem; z-index: 999; } .skip:focus { left: 1rem; top: 1rem; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Type ---------- */ h1, h2, h3, h4 { font-family: var(--font); line-height: 1.08; margin: 0 0 .6em; letter-spacing: -.01em; } h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 800; font-variation-settings: "wdth" 118; letter-spacing: -.025em; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 800; font-variation-settings: "wdth" 115; letter-spacing: -.02em; } h3 { font-size: 1.3rem; font-weight: 700; font-variation-settings: "wdth" 108; } h4 { font-size: 1.05rem; font-weight: 700; } p { margin: 0 0 1em; max-width: 68ch; } .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 58ch; } .muted { color: var(--muted); } .small { font-size: .9rem; } /* ---------- Earth stripe signature ---------- */ .earth-stripe { height: 5px; background: repeating-linear-gradient(-45deg, var(--earth-g) 0 10px, var(--earth-y) 10px 20px); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); } /* The frosted-glass effect lives on a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside the header's box. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13, 21, 30, .88); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); } .header-inner { max-width: 1400px; display: flex; align-items: center; gap: 1.5rem; min-height: 104px; } .brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--text); flex-shrink: 0; } /* Logo shown as-is, no background plate. Text name only appears if the image fails to load. */ .brand .logo { height: 92px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(40,90,220,.35)); } .wordmark { display: block; line-height: 1.05; font-weight: 800; font-size: 1.45rem; font-variation-settings: "wdth" 112; color: #C3B8FF; letter-spacing: -.01em; } .wordmark small { display: block; margin-top: .3rem; font-size: .8rem; font-weight: 500; color: var(--muted); font-variation-settings: "wdth" 100; letter-spacing: 0; } .brand-text { display: none; } .brand.no-logo .logo { display: none; } .brand.no-logo .brand-text { display: block; } .brand.no-logo .brand-text, .brand-text { line-height: 1.1; font-weight: 800; font-variation-settings: "wdth" 112; font-size: 1rem; } .brand-text span { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; font-variation-settings: "wdth" 100; } .nav { margin-left: auto; } .nav ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; } .nav a { display: block; white-space: nowrap; padding: .55rem .6rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .96rem; } .nav a:hover { background: var(--raised); color: var(--text); } .nav a[aria-current="page"] { color: var(--live); } .header-cta { display: flex; align-items: center; gap: .7rem; } .header-phone { color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap; font-variation-settings: "wdth" 110; } .header-phone small { display: block; font-weight: 500; color: var(--muted); font-size: .75rem; } .nav-toggle { display: none; margin-left: auto; background: var(--raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; width: 46px; height: 46px; cursor: pointer; } .nav-toggle svg { margin: auto; } @media (max-width: 1360px) { .header-phone { display: none; } } @media (min-width: 1101px) { .nav li.m-only { display: none; } } @media (max-width: 1100px) { .nav-toggle { display: grid; } .header-cta .btn { display: none; } .nav { position: fixed; inset: 0 0 0 auto; top: 0; width: min(88vw, 360px); background: var(--surface); border-left: 1px solid var(--line); padding: calc(110px + env(safe-area-inset-top, 0px)) 1.2rem 2rem; transform: translateX(100%); visibility: hidden; transition: transform .28s ease, visibility 0s .28s; z-index: 60; overflow-y: auto; height: 100vh; height: 100dvh; overscroll-behavior: contain; } .nav.open { transform: none; visibility: visible; transition: transform .28s ease; } .nav ul { flex-direction: column; } .nav a { font-size: 1.15rem; padding: .85rem 1rem; } .nav-extra { display: block !important; margin-top: 1.5rem; } .nav-toggle { position: relative; z-index: 70; } .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 48; opacity: 0; pointer-events: none; transition: opacity .25s; } .scrim.show { opacity: 1; pointer-events: auto; } } .nav-extra { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.35rem; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; font-variation-settings: "wdth" 108; font-size: 1rem; text-decoration: none; cursor: pointer; line-height: 1.1; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; } .btn-live { background: var(--live); color: #1B1204; } .btn-live:hover { background: #FFC56E; color: #1B1204; } .btn-ghost { border-color: var(--line); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--muted); color: var(--text); } .btn-wa { background: #25D366; color: #06270F; } .btn-wa:hover { background: #4be083; color: #06270F; } .btn svg { width: 20px; height: 20px; flex-shrink: 0; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* ---------- Sections ---------- */ .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section-alt { background: var(--surface); border-block: 1px solid var(--line); } .section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head p { color: var(--muted); font-size: 1.12rem; } /* ---------- Hero ---------- */ .hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero::before { /* faint drawing-board grid, like an installation schematic */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: .22; mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .hero h1 { max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 3.8rem); } .hero .lede { margin-bottom: 1.8rem; } .hero-trust { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; } .hero-trust img.award { width: 112px; height: auto; } .trust-lines { font-size: .95rem; color: var(--muted); } .trust-lines strong { color: var(--text); display: block; font-size: 1rem; } .stars { color: var(--live); letter-spacing: .1em; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: 16ch; } } /* ---------- Interactive house (home hero) ---------- */ .house-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(.9rem, 2vw, 1.4rem); } .house-svg { width: 100%; height: auto; } .house-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .9rem 0 1rem; } .readout { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .6rem .8rem; } .readout b { display: block; font-size: 1.35rem; font-variation-settings: "wdth" 115; font-variant-numeric: tabular-nums; } .readout span { font-size: .8rem; color: var(--muted); } .readout.solar b { color: var(--live); } .readout.grid b { color: var(--neutral); } .switch-plate { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } @media (max-width: 520px) { .switch-plate { grid-template-columns: repeat(2, 1fr); } } .rocker { display: flex; align-items: center; gap: .6rem; text-align: left; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; } .rocker .pip { width: 12px; height: 22px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); position: relative; flex-shrink: 0; } .rocker .pip::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 9px; border-radius: 3px; background: var(--muted); transition: all .18s; } .rocker[aria-pressed="true"] { border-color: var(--live-deep); } .rocker[aria-pressed="true"] .pip::after { bottom: 10px; background: var(--live); box-shadow: 0 0 10px var(--live); } .house-hint { font-size: .85rem; color: var(--muted); margin: .7rem 0 0; } /* SVG states */ .house-svg .glow, .house-svg .tv-glow, .house-svg .heat, .house-svg .beam, .house-svg .sun, .house-svg .flow, .house-svg .ev-cable { opacity: 0; transition: opacity .35s ease; } .house-svg.s-lights .glow { opacity: 1; } .house-svg.s-cinema .tv-glow { opacity: 1; } .house-svg.s-heating .heat { opacity: 1; } .house-svg.s-alarm .beam { opacity: 1; } .house-svg.s-solar .sun, .house-svg.s-solar .flow-solar { opacity: 1; } .house-svg.s-battery.s-solar .flow-batt { opacity: 1; } .house-svg.s-ev .ev-cable { opacity: 1; } .house-svg .panel { fill: #1F3550; transition: fill .35s; } .house-svg.s-solar .panel { fill: #3F7FD9; } .house-svg .blind { transform-box: fill-box; transform-origin: top; transform: scaleY(.12); transition: transform .5s ease; } .house-svg.s-blinds .blind { transform: scaleY(1); } .house-svg .batt-bar { opacity: .25; transition: opacity .3s; } .house-svg.s-battery .batt-bar { opacity: 1; } .house-svg .led { fill: #3a4a5a; } .house-svg.s-alarm .led { fill: var(--danger); animation: blink 1.4s infinite; } .dash-move { stroke-dasharray: 6 8; animation: dash 1s linear infinite; } @keyframes dash { to { stroke-dashoffset: -28; } } @keyframes blink { 50% { opacity: .2; } } /* ---------- Trust bar ---------- */ .trustbar { border-block: 1px solid var(--line); background: var(--surface); } .trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .trust-item { padding: 1.4rem 1.2rem; border-right: 1px solid var(--line); display: flex; gap: .9rem; align-items: center; } .trust-item:last-child { border-right: 0; } .trust-item svg { width: 34px; height: 34px; color: var(--live); flex-shrink: 0; } .trust-item b { display: block; font-variation-settings: "wdth" 110; } .trust-item span { color: var(--muted); font-size: .88rem; } @media (max-width: 860px) { .trustbar-inner { grid-template-columns: 1fr 1fr; } .trust-item:nth-child(2) { border-right: 0; } .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } @media (max-width: 460px) { .trustbar-inner { grid-template-columns: 1fr; } .trust-item { border-right: 0; border-bottom: 1px solid var(--line); } } /* ---------- Consumer-unit service grid ---------- */ .board { background: linear-gradient(#1b2836, #16212c); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.75rem); } .board-label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; flex-wrap: wrap; } .board-label strong { color: var(--text); font-size: 1.05rem; } .breakers { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; } .breaker { display: block; background: #E8ECEF; color: #1A2530; border-radius: 8px; padding: 2.4rem 1rem 1.1rem; position: relative; text-decoration: none; min-height: 170px; } .breaker::before { /* the toggle */ content: ""; position: absolute; top: .8rem; left: 1rem; width: 30px; height: 16px; border-radius: 4px; background: #1A2530; transition: background .2s; } .breaker::after { /* status window */ content: ""; position: absolute; top: .95rem; right: 1rem; width: 18px; height: 10px; border-radius: 2px; background: #C7CED4; transition: background .2s; } .breaker:hover::after, .breaker:focus-visible::after { background: var(--ok); } .breaker:hover::before, .breaker:focus-visible::before { background: var(--live-deep); } .breaker h3 { font-size: 1.12rem; margin-bottom: .35rem; color: #0E1822; } .breaker p { font-size: .92rem; margin: 0; color: #3C4A57; } .breaker:hover { color: #1A2530; } .breaker.b-smart { background: #FFE2B0; } .breaker.b-business { background: #CFE0FF; } /* ---------- Split / feature ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split.flip > :first-child { order: 2; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } } .check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .55rem; } .check-list li { padding-left: 1.9rem; position: relative; } .check-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231B1204' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; } .two-col-list { columns: 2; column-gap: 2rem; } @media (max-width: 560px) { .two-col-list { columns: 1; } } /* Domestic / Business fork */ .fork { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .fork a { display: block; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-l); text-decoration: none; color: var(--text); border: 1px solid var(--line); position: relative; overflow: hidden; min-height: 280px; } .fork .home-side { background: #1E2A1F linear-gradient(160deg, #2b2415 0%, #17202a 70%); } .fork .biz-side { background: linear-gradient(160deg, #15253d 0%, #141d27 70%); } .fork h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-variation-settings: "wdth" 118; font-weight: 800; } .fork p { color: var(--muted); max-width: 40ch; } .fork .go { font-weight: 700; color: var(--live); } .fork .biz-side .go { color: var(--neutral); } .fork a:hover { border-color: var(--muted); color: var(--text); } .fork svg.fork-icon { position: absolute; right: -10px; bottom: -10px; width: 180px; opacity: .14; } @media (max-width: 760px) { .fork { grid-template-columns: 1fr; } } /* Smart feature tiles */ .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .tile { background: var(--bg); padding: 1.6rem 1.5rem; } .tile svg { width: 38px; height: 38px; color: var(--live); margin-bottom: .9rem; } .tile h3 { margin-bottom: .4rem; } .tile p { color: var(--muted); font-size: .97rem; margin-bottom: .6rem; } .tile .tags { display: flex; flex-wrap: wrap; gap: .35rem; } .tag { font-size: .78rem; padding: .2rem .55rem; border-radius: 999px; background: var(--raised); color: var(--muted); border: 1px solid var(--line); } @media (max-width: 900px) { .tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 580px) { .tiles { grid-template-columns: 1fr; } } /* ---------- Reviews ---------- */ .reviews { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1rem; } .review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.6rem; margin: 0; display: flex; flex-direction: column; } .review.big { background: var(--raised); } .review.big blockquote { font-size: 1.25rem; line-height: 1.45; font-variation-settings: "wdth" 104; } .review blockquote { margin: .6rem 0 1.2rem; flex: 1; } .review figcaption { color: var(--muted); font-size: .92rem; } .review figcaption b { color: var(--text); display: block; } @media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } } /* ---------- Map ---------- */ .map-shell { display: grid; grid-template-columns: 1fr 340px; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--surface); } .map { background: #0B1824; align-self: stretch; } .map-side { padding: 1.4rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; } .map-side h3 { margin: 0; } .town-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .town-chip { font: inherit; font-size: .86rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; } .town-chip:hover { border-color: var(--muted); } .town-chip[aria-pressed="true"] { background: var(--live); color: #1B1204; border-color: var(--live); } .town-info { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem; } .town-info h4 { margin-bottom: .3rem; font-size: 1.2rem; } .town-info p { font-size: .94rem; color: var(--muted); margin-bottom: .7rem; } .map-fallback { padding: 2rem; color: var(--muted); } @media (max-width: 900px) { .map-shell { grid-template-columns: 1fr; } .map { min-height: 380px; } .map-side { border-left: 0; border-top: 1px solid var(--line); } } /* custom Wirral map */ .map { position: relative; min-height: 0; } .wm { width: 100%; height: auto; display: block; overflow: hidden; font-family: var(--font); } .wm-land { fill: #1A2A38; stroke: #3A5268; stroke-width: 1.5; stroke-linejoin: round; } .wm-other { fill: #131F2A; stroke: #26384A; stroke-width: 1; } .wm-isle { fill: #1A2A38; stroke: #3A5268; } .wm-reach { fill: rgba(91,155,255,.05); stroke: #5B9BFF; stroke-width: 1; stroke-dasharray: 5 6; opacity: .6; pointer-events: none; } .wm-pulse { fill: none; stroke: #5B9BFF; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: wm-pulse 2.4s ease-out infinite; } @keyframes wm-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } } .wm-sea { fill: #3B5670; font-size: 13px; font-style: italic; letter-spacing: .04em; } .wm-region { fill: #4A6178; font-size: 15px; font-weight: 700; } .wm-town { cursor: pointer; outline: none; } .wm-hit { fill: transparent; } .wm-dot { fill: var(--live); stroke: #1B1204; stroke-width: 2.5; transition: r .2s; } .wm-base .wm-dot { fill: var(--neutral); } .wm-label { fill: var(--text); font-size: 12.5px; font-weight: 600; paint-order: stroke; stroke: #0B1824; stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .2s; pointer-events: none; } .wm-major .wm-label, .wm-town:hover .wm-label, .wm-town:focus-visible .wm-label, .wm-town.active .wm-label { opacity: 1; } .wm-town:focus-visible .wm-dot { stroke: var(--neutral); stroke-width: 4; } .wm-town.active .wm-dot { r: 9; fill: #fff; stroke: var(--live); stroke-width: 4; } .wm-reset { position: absolute; left: 1rem; bottom: 1rem; font: inherit; font-size: .88rem; font-weight: 600; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .wm-reset:hover { border-color: var(--muted); } @media (max-width: 900px) { .map { min-height: 0; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--line); position: relative; } .page-hero h1 { max-width: 20ch; } .crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 1.2rem; } .crumbs a { color: var(--muted); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; } .crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; } /* ---------- Service finder ---------- */ .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .filter { font: inherit; font-weight: 600; font-size: .95rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } .finder-search { width: 100%; max-width: 420px; } .svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0; } .svc-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.1rem; } .svc-list li[hidden] { display: none; } .svc-list b { display: block; margin-bottom: .2rem; } .svc-list span { color: var(--muted); font-size: .92rem; } .svc-list .kind { display: inline-block; margin-top: .5rem; font-size: .75rem; padding: .1rem .5rem; border-radius: 4px; background: var(--raised); color: var(--muted); } .finder-count { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; } /* Deep service sections */ .deep { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 5vw, 4rem); } .deep-nav { position: sticky; top: 100px; align-self: start; display: grid; gap: .2rem; } .deep-nav a { color: var(--muted); text-decoration: none; padding: .5rem .8rem; border-left: 2px solid var(--line); } .deep-nav a:hover { color: var(--text); border-color: var(--live); } .deep-body article { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); } .deep-body article:last-child { border-bottom: 0; } .deep-body h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); } .fact { background: var(--surface); border-left: 3px solid var(--neutral); padding: 1rem 1.2rem; border-radius: 0 var(--radius-m) var(--radius-m) 0; margin: 1.5rem 0; max-width: 68ch; } .fact b { color: var(--neutral); } @media (max-width: 900px) { .deep { grid-template-columns: 1fr; } .deep-nav { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* ---------- Energy simulator ---------- */ .sim { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.8rem); } @media (max-width: 900px) { .sim { grid-template-columns: 1fr; } } .sim-flow svg { width: 100%; height: auto; } .sim-flow .node rect { fill: var(--raised); stroke: var(--line); } .sim-flow .node text { fill: var(--text); font-family: var(--font); font-weight: 700; font-size: 15px; } .sim-flow .node .val { fill: var(--muted); font-weight: 500; font-size: 13px; } .sim-flow .wire { fill: none; stroke: var(--line); stroke-width: 3; } .sim-flow .current { fill: none; stroke-linecap: round; stroke-dasharray: 4 10; animation: dash 1.1s linear infinite; transition: stroke-width .3s, opacity .3s; } .sim-controls { display: grid; gap: 1rem; align-content: start; } .range-row label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .4rem; } .range-row output { color: var(--live); font-variant-numeric: tabular-nums; } input[type="range"] { width: 100%; accent-color: var(--live); height: 28px; } .toggles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .8rem; } .stat b { display: block; font-size: 1.5rem; font-variation-settings: "wdth" 115; font-variant-numeric: tabular-nums; } .stat span { color: var(--muted); font-size: .82rem; } .day-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 90px; margin-top: .3rem; } .day-bars div { background: var(--neutral); border-radius: 2px 2px 0 0; min-height: 2px; position: relative; } .day-bars div.solar { background: var(--live); } .day-bars div.now { outline: 2px solid var(--text); outline-offset: 1px; } .bars-legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); margin-top: .4rem; } .bars-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; } /* ---------- Tools (business) ---------- */ .tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 3vw, 2rem); } .seg { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.4rem; } .check-table { width: 100%; border-collapse: collapse; } .check-table th, .check-table td { text-align: left; padding: .85rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; } .check-table th { color: var(--muted); font-weight: 600; font-size: .88rem; } .check-table td:first-child { font-weight: 700; } .check-table .legal { color: var(--live); font-size: .8rem; font-weight: 600; display: block; } .table-scroll { overflow-x: auto; } .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 760px) { .calc { grid-template-columns: 1fr; } } .calc-result { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.3rem; } .calc-result .big { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; font-variation-settings: "wdth" 118; color: var(--live); line-height: 1; margin: .2rem 0 .6rem; font-variant-numeric: tabular-nums; } /* ---------- Forms ---------- */ .field { display: grid; gap: .35rem; } .field label, .field legend { font-weight: 600; font-size: .95rem; } .field .hint { color: var(--muted); font-size: .85rem; } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: .8rem .95rem; width: 100%; min-height: 48px; } textarea { min-height: 130px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--neutral); outline-offset: 1px; border-color: transparent; } .field.error input, .field.error textarea, .field.error select { border-color: var(--danger); } .field .err { color: var(--danger); font-size: .85rem; display: none; } .field.error .err { display: block; } fieldset { border: 0; padding: 0; margin: 0; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .chips { display: flex; flex-wrap: wrap; gap: .45rem; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: .93rem; } .chip input:checked + span { background: var(--live); color: #1B1204; border-color: var(--live); font-weight: 600; } .chip input:focus-visible + span { outline: 2px solid var(--neutral); outline-offset: 2px; } .seg-toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .seg-toggle .chip span { border: 0; background: transparent; } .seg-toggle .chip input:checked + span { background: var(--text); color: var(--bg); } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.3rem, 3vw, 2.2rem); } .form-status { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-m); display: none; } .form-status.show { display: block; } .form-status.ok { background: rgba(83,199,138,.12); border: 1px solid var(--ok); } .form-status.bad { background: rgba(255,107,94,.1); border: 1px solid var(--danger); } .hp { position: absolute; left: -9999px; } .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.3rem; margin-bottom: 1rem; } .contact-card h3 { font-size: 1.05rem; margin-bottom: .3rem; } .contact-card a.big { font-size: 1.5rem; font-weight: 800; font-variation-settings: "wdth" 115; text-decoration: none; } /* ---------- FAQ ---------- */ .faq { max-width: 860px; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 1.2rem 2.5rem 1.2rem 0; font-weight: 700; font-size: 1.12rem; position: relative; font-variation-settings: "wdth" 106; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .3rem; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--live); border-bottom: 2px solid var(--live); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq .answer { padding-bottom: 1.3rem; color: #CBD5DF; } .faq-group { margin-bottom: 3rem; } .faq-group > h2 { font-size: 1.5rem; color: var(--muted); } /* ---------- Steps (a real sequence) ---------- */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: s; } .steps li { counter-increment: s; border-top: 3px solid var(--line); padding-top: 1rem; } .steps li::before { content: counter(s); display: block; font-size: 2.2rem; font-weight: 800; font-variation-settings: "wdth" 120; color: var(--live); line-height: 1; margin-bottom: .6rem; } .steps li:first-child { border-color: var(--live); } .steps p { color: var(--muted); font-size: .95rem; } @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } } /* ---------- CTA band ---------- */ .cta-band { background: var(--live); color: #1B1204; border-radius: var(--radius-l); padding: clamp(1.8rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; } .cta-band h2 { margin-bottom: .3rem; color: #1B1204; } .cta-band p { margin: 0; color: #4A3514; } .cta-band .btn-dark { background: #1B1204; color: var(--live); } .cta-band .btn-dark:hover { background: #2d1f08; color: #FFD08A; } .cta-band .btn-outline-dark { border-color: #1B1204; color: #1B1204; } .cta-band .btn-outline-dark:hover { background: rgba(0,0,0,.08); color: #1B1204; } @media (max-width: 760px) { .cta-band { grid-template-columns: 1fr; } } /* ---------- Award block ---------- */ .award-block { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.5rem, 3vw, 2.2rem); } .award-block img { width: 160px; } @media (max-width: 600px) { .award-block { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { background: #0A1118; border-top: 1px solid var(--line); margin-top: 0; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3.5rem 2.5rem; } .site-footer h4 { color: var(--text); margin-bottom: .9rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--text); } .site-footer address { font-style: normal; color: var(--muted); line-height: 1.7; } .footer-base { border-top: 1px solid var(--line); padding-block: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .88rem; } .socials { display: flex; gap: .6rem; margin-top: 1rem; } .socials a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; } .socials svg { width: 18px; height: 18px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Floating actions ---------- */ .wa-float { position: fixed; right: 1.2rem; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0,0,0,.4); } .wa-float svg { width: 32px; height: 32px; color: #fff; } .wa-float:hover { background: #3ee07d; } .mobile-bar { display: none; } @media (max-width: 700px) { .wa-float { display: none; } .mobile-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; color: var(--text); text-decoration: none; font-size: .78rem; font-weight: 600; } .mobile-bar a svg { width: 22px; height: 22px; } .mobile-bar a.q { background: var(--live); color: #1B1204; } .mobile-bar a.w svg { color: #25D366; } body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } } /* utilities */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 2rem; } .center { text-align: center; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } } .prose h2 { margin-top: 2.2rem; font-size: 1.6rem; } .prose ul { padding-left: 1.2rem; max-width: 66ch; } .prose li { margin-bottom: .4rem; } /* small-screen refinements */ .nav-toggle { flex-shrink: 0; } .readout b { white-space: nowrap; } @media (max-width: 520px) { .readout b { font-size: 1.05rem; } .readout { padding: .5rem .55rem; } .brand-text { font-size: .92rem; } .brand .logo { height: 58px; } .wordmark { font-size: 1.05rem; } .wordmark small { display: none; } .header-inner { min-height: 80px; } .hero .btn-row .btn { flex: 1 1 auto; } } @media (max-width: 600px) { .wm-label { font-size: 21px; stroke-width: 6px; } .wm-sea { font-size: 18px; } .wm-region { font-size: 22px; } .wm-dot { r: 9; } .wm-town.active .wm-dot { r: 12; } } /* ===== Round 3 additions ===== */ .brand.no-logo .brand-text { font-size: 2rem; color: var(--text); } .brand.no-logo .brand-text span { font-size: .9rem; } /* Services dropdown */ .nav .has-sub { position: relative; } .nav .caret { width: 12px; height: 12px; display: inline-block; margin-left: .25rem; vertical-align: 1px; } .nav .sub { list-style: none; margin: 0; padding: .5rem; display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 80; flex-direction: column; } .nav .sub a { font-weight: 500; } .nav .sub em { font-style: normal; font-size: .72rem; font-weight: 700; color: #1B1204; background: var(--live); border-radius: 999px; padding: .1rem .45rem; margin-left: .35rem; vertical-align: 1px; } @media (min-width: 1101px) { .nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display: flex; } .nav .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; } } @media (max-width: 1100px) { .nav .sub { display: flex; position: static; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 0 0 0 .6rem; margin: 0 0 .4rem .9rem; min-width: 0; background: none; } .nav .sub a { font-size: 1rem; padding: .5rem .8rem; color: var(--muted); } .nav .caret { display: none; } } /* coming soon */ .soon-pill, .soon-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; color: #1B1204; background: var(--live); border-radius: 999px; padding: .15rem .55rem; vertical-align: middle; font-variation-settings: "wdth" 100; } .soon-badge { font-size: .9rem; padding: .35rem .8rem; margin-bottom: 1rem; } .soon-badge svg { width: 18px; height: 18px; } .breaker.b-soon { background: repeating-linear-gradient(-45deg, #FFE2B0 0 14px, #FFD793 14px 28px); } .breaker.b-soon h3::after { content: "Soon"; font-size: .7rem; margin-left: .45rem; padding: .1rem .45rem; border-radius: 999px; background: #1B1204; color: var(--live); vertical-align: 2px; } .soon-visual svg { width: 100%; max-width: 420px; margin-inline: auto; } .consent { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; font-size: .95rem; } .consent input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--live); flex-shrink: 0; } /* van */ .van-stage { position: relative; overflow: hidden; padding-bottom: 6px; } .van-drive { transition: transform 1.6s cubic-bezier(.2,.8,.25,1); } .js-ready .van-drive { transform: translateX(-110%); } /* only hidden off-stage when the script is running, so it can drive in */ .van-stage.arrived .van-drive { transform: none; } .van-stage .wheel { transform-box: view-box; } .van-stage.arrived .wheel { animation: spin .4s linear 4; } @keyframes spin { to { transform: rotate(360deg); } } .road { height: 3px; margin-top: -4px; background: repeating-linear-gradient(90deg, var(--line) 0 30px, transparent 30px 50px); } .van { width: 100%; height: auto; } .van-caption { color: var(--muted); font-size: .95rem; margin-top: .8rem; } .van-hero { overflow: hidden; } .van-backdrop { position: absolute; right: -4%; bottom: -8%; width: min(760px, 70vw); opacity: .13; pointer-events: none; filter: saturate(.6); } .van-hero .wrap { position: relative; } @media (max-width: 760px) { .van-backdrop { width: 120vw; right: -30%; opacity: .08; } } /* rocker nod */ .rock-nod { display: inline-flex; align-items: center; gap: .5rem; } .rock-nod img { width: auto; height: 20px; filter: grayscale(1) brightness(.9); opacity: .45; transition: filter .3s, opacity .3s, transform .3s; } .rock-nod:hover img { filter: none; opacity: 1; transform: rotate(-6deg) scale(1.15); } /* small jobs list */ .joblist-inner { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; } .jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem; } .job input { position: absolute; opacity: 0; pointer-events: none; } .job span { display: flex; align-items: center; gap: .6rem; padding: .8rem .9rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 600; font-size: .95rem; min-height: 56px; } .job span svg { width: 22px; height: 22px; color: var(--live); flex-shrink: 0; } .job input:checked + span { border-color: var(--live); background: #2A2212; } .job input:checked + span::after { content: ""; margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--live) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%231B1204' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; flex-shrink: 0; } .job input:focus-visible + span { outline: 2px solid var(--neutral); outline-offset: 2px; } .jl-panel { position: sticky; top: 130px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.3rem; display: grid; gap: 1rem; } .jl-panel h3 { margin: 0; } .jl-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; max-height: 260px; overflow: auto; } .btn.is-disabled { opacity: .45; pointer-events: auto; cursor: not-allowed; } @media (max-width: 900px) { .joblist-inner { grid-template-columns: 1fr; } .jl-panel { position: static; } } /* garden explorer */ .garden { display: grid; grid-template-columns: 1.6fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .garden-svg { width: 100%; height: auto; display: block; } .garden-svg .spot { cursor: pointer; outline: none; } .garden-svg .spot circle { fill: var(--live); stroke: #1B1204; stroke-width: 3; transition: r .2s; } .garden-svg .spot text { fill: #1B1204; font: 800 14px var(--font); text-anchor: middle; pointer-events: none; } .garden-svg .spot::before { content: none; } .garden-svg .spot:hover circle, .garden-svg .spot:focus-visible circle { r: 17; } .garden-svg .spot.active circle { fill: #fff; stroke: var(--live); stroke-width: 4; r: 17; } .garden-svg .spot:focus-visible circle { stroke: var(--neutral); } .garden-info { padding: 1.6rem; border-left: 1px solid var(--line); } .ip-badge { display: inline-block; font-weight: 800; font-variation-settings: "wdth" 115; font-size: 1.05rem; padding: .3rem .8rem; border-radius: 8px; background: rgba(91,155,255,.15); color: var(--neutral); border: 1px solid rgba(91,155,255,.4); margin-bottom: .9rem; } .garden-info p { color: #CBD5DF; } @media (max-width: 900px) { .garden { grid-template-columns: 1fr; } .garden-info { border-left: 0; border-top: 1px solid var(--line); } } /* EV calculator */ .evcalc { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.8rem); } .ev-controls { display: grid; gap: .7rem; align-content: start; } .ev-controls .range-row label { font-size: .92rem; } .ev-results { display: grid; gap: 1.2rem; align-content: start; } .ev-bars, .ev-speed { display: grid; gap: .6rem; } .ev-bar-row { display: grid; grid-template-columns: 100px 1fr 110px; align-items: center; gap: .8rem; } .ev-bar-row span { font-weight: 600; font-size: .95rem; } .ev-bar-row b { text-align: right; font-size: 1.2rem; font-variation-settings: "wdth" 112; font-variant-numeric: tabular-nums; } .ev-track { height: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .ev-fill { height: 100%; border-radius: 5px; transition: width .35s ease; } .ev-fill.petrol { background: #FF6B5E; } .ev-fill.electric { background: #53C78A; } .ev-fill.plug { background: var(--muted); } .ev-stats .stat b { font-size: 1.3rem; } .ev-chart svg { width: 100%; height: auto; } .ev-chart text { fill: var(--muted); font: 12px var(--font); } .ev-chart #ln-cross text { fill: var(--live); font-weight: 700; font-size: 13px; } .ev-chart h3, .ev-speed h3 { font-size: 1.05rem; margin-bottom: .5rem; } @media (max-width: 960px) { .evcalc { grid-template-columns: 1fr; } } @media (max-width: 520px) { .ev-bar-row { grid-template-columns: 76px 1fr 84px; } .ev-bar-row b { font-size: 1rem; } } .soon-band { background: linear-gradient(120deg, var(--live), #FFCF7A); } .job { display: flex; } .job span { flex: 1; } /* menu button swaps to a close icon while the menu is open */ .nav-toggle span { display: grid; place-items: center; } .nav-toggle svg { width: 24px; height: 24px; } .nav-toggle .i-close, .nav-toggle[aria-expanded="true"] .i-open { display: none; } .nav-toggle[aria-expanded="true"] .i-close { display: grid; } /* ===== Round 4: rewiring, consumer units, AV ===== */ .steps.steps-6 { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } @media (max-width: 700px) { .steps.steps-6 { grid-template-columns: 1fr; } } /* era explorer */ .era-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .era-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; } .era-card svg { width: 100%; height: auto; background: #0A1219; border-bottom: 1px solid var(--line); } .era-card svg [data-e] { opacity: 0; transition: opacity .4s; } .era-card svg [data-e].on { opacity: 1; } .era-card figcaption { padding: 1.1rem 1.2rem 1.3rem; } .era-card h3 { margin-bottom: .4rem; } .era-cap { display: none; color: var(--muted); font-size: .95rem; margin: 0; } .era-cap.on { display: block; animation: fadeUp .35s ease; } .era-note { fill: #FF6B5E; font: 700 12px var(--font); } .era-verdicts { margin-top: 1rem; } .era-verdict { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.3rem 1.4rem; } .era-verdict.on { display: grid; grid-template-columns: 180px 1fr; gap: .5rem 1.5rem; align-items: start; animation: fadeUp .35s ease; } .era-verdict h3 { margin: 0; font-size: 1.35rem; } .era-verdict .check-list { grid-column: 2; margin: 0; } .meter { grid-row: span 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-self: center; } .meter span { height: 14px; border-radius: 3px; background: var(--raised); } .meter[data-level="3"] span { background: var(--danger); } .meter[data-level="2"] span:nth-child(-n+3) { background: #FF9A4A; } .meter[data-level="1"] span:nth-child(-n+2) { background: var(--live); } .meter[data-level="0"] span:nth-child(1) { background: var(--ok); } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 860px) { .era-grid { grid-template-columns: 1fr; } .era-card { flex-direction: row; } .era-card svg { width: 42%; border-bottom: 0; border-right: 1px solid var(--line); } .era-verdict.on { grid-template-columns: 1fr; } .era-verdict .check-list { grid-column: 1; } .meter { grid-row: auto; max-width: 200px; } } @media (max-width: 480px) { .era-card { flex-direction: column; } .era-card svg { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); } } /* wipes */ .wipe { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); touch-action: pan-y; user-select: none; cursor: ew-resize; } .wipe-layer svg { display: block; width: 100%; height: auto; } .wipe-top { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); } .wipe-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; pointer-events: none; } .wipe-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--live); box-shadow: 0 0 12px rgba(255,181,71,.6); } .wipe-handle span { position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: var(--live); box-shadow: 0 4px 16px rgba(0,0,0,.4); } .wipe-handle span::before, .wipe-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; margin-top: -7px; } .wipe-handle span::before { left: 5px; border-right-color: #1B1204; } .wipe-handle span::after { right: 5px; border-left-color: #1B1204; } .wipe-tag { position: absolute; top: .8rem; font-size: .8rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; background: rgba(13,21,30,.8); color: var(--text); pointer-events: none; } .wipe-tag.l { left: .8rem; } .wipe-tag.r { right: .8rem; } .wipe-range { position: absolute; left: 0; right: 0; bottom: .5rem; width: calc(100% - 2rem); margin: 0 1rem; opacity: 0; height: 30px; } .wipe-range:focus-visible { opacity: 1; } .x-cable { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 10 8; animation: dash 1.4s linear infinite; } .x-cable.lt { stroke: #5B9BFF; } .x-cable.rg { stroke: #FFB547; } .x-lab { font: 700 11px var(--font); fill: #5E86B0; letter-spacing: .06em; } .x-note rect { fill: rgba(13,21,30,.85); stroke: #3E6A96; } .x-note text { fill: #E9EEF3; font: 600 13px var(--font); } /* consumer unit simulator */ .cu-sim { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); transition: box-shadow .3s; } .cu-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .seg-btn { font: inherit; font-weight: 600; font-size: .92rem; border: 0; background: transparent; color: var(--text); padding: .5rem 1rem; border-radius: 999px; cursor: pointer; } .seg-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); } .cu-stage { overflow-x: auto; } .cu { width: 100%; min-width: 560px; height: auto; display: block; } .cu-sim[data-mode="new"] .cu-old, .cu-sim[data-mode="old"] .cu-new { display: none; } .cu .body { fill: #FFFFFF; stroke: #B9C2CA; } .cu .dev { cursor: pointer; outline: none; } .cu .dev:hover .body, .cu .dev:focus-visible .body { stroke: var(--neutral); stroke-width: 3; } .cu .lever { fill: #1A2530; transition: transform .25s ease, fill .25s; transform-box: fill-box; transform-origin: center bottom; } .cu .lever.red { fill: #C4302B; } .cu .flag { fill: #C4302B; transition: fill .25s; } .cu .tbtn { fill: #E6CF3A; stroke: #9A8A20; } .cu .dtext { font: 700 12px var(--font); fill: #1A2530; text-anchor: middle; } .cu .dtext.small { font-size: 12px; } .cu .dtext.light { fill: #E9EEF3; } .cu .afdd-tag { font: 700 10px var(--font); fill: #2F6FD6; text-anchor: middle; } .cu .afdd-tag.dim { fill: #8A96A2; } .cu .clabel { font: 600 11.5px var(--font); fill: #1A2530; text-anchor: middle; transition: fill .25s, opacity .25s; } .cu .clabel.sub { font-weight: 500; fill: #5A6672; } .cu.old .clabel { fill: #E9D9C0; } .cu .clabel.dark { opacity: .25; } .cu .dev.tripped .lever { transform: translateY(30px); fill: #6B7782; } .cu .dev.tripped .flag { fill: #53C78A; } .cu .dev.tripped .body { stroke: var(--danger); stroke-width: 3; animation: blink .9s 3; } .cu .spd-win { fill: #53C78A; } .cu .spd-bolt { fill: #9AA4AD; transition: fill .2s; } .cu .spd.surging .spd-bolt { fill: var(--live); animation: blink .35s 6; } .cu .spd.surging .body { stroke: var(--live); stroke-width: 3; } .cu .fuse.blown .fwire { stroke: #1A1A1A; stroke-dasharray: 20 10 30; } .cu .fuse.blown rect:first-child { stroke: var(--danger); stroke-width: 3; } .cu-sim.danger { box-shadow: 0 0 0 2px var(--danger), 0 0 40px rgba(255,107,94,.25); } .cu-faults { margin: 1rem 0; } .cu-faults .filter { display: inline-flex; align-items: center; gap: .45rem; } .cu-faults svg { width: 18px; height: 18px; color: var(--live); } .cu-faults .filter[aria-pressed="true"] svg { color: var(--bg); } .cu-verdict { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: var(--radius-m); background: var(--bg); border: 1px solid var(--line); animation: fadeUp .3s ease; } .cu-verdict h3 { margin-bottom: .3rem; font-size: 1.15rem; } .cu-verdict p { color: #CBD5DF; max-width: 80ch; } .cu-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; } .cu-verdict.good { border-color: rgba(83,199,138,.5); } .cu-verdict.good .cu-icon { background: var(--ok); color: #06270F; } .cu-verdict.bad { border-color: rgba(255,107,94,.6); } .cu-verdict.bad .cu-icon { background: var(--danger); color: #2A0806; } .cu-verdict.info { border-color: rgba(91,155,255,.5); } .cu-verdict.info .cu-icon { background: var(--neutral); color: #06172F; } /* cinema planner */ .cinema { display: grid; grid-template-columns: 290px 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .cinema-controls { display: grid; gap: 1.1rem; align-content: start; } .cinema-controls h3 { font-size: .95rem; color: var(--muted); margin-bottom: .45rem; font-weight: 600; } .cinema-controls .seg { margin: 0; } .cinema-controls .filter { font-size: .88rem; padding: .45rem .8rem; } .cinema-stage { min-width: 0; } .cin { width: 100%; height: auto; display: block; border-radius: var(--radius-m); background: #070B10; } .cin-floor { fill: #1B2632; transition: fill .6s; } .cin-wash { fill: #FFE2B0; opacity: 0; transition: opacity .6s; pointer-events: none; } .cin-stars circle { fill: #FFFFFF; } .cin-stars { opacity: 0; transition: opacity .6s; } .cin-steps circle { fill: var(--live); opacity: .2; transition: opacity .6s; } .cin-wall, .cin-lab { font: 600 12px var(--font); fill: var(--muted); text-anchor: middle; } .cin-screen { fill: #E9EEF3; } .cin-tv { fill: #0A0F14; stroke: #5B9BFF; stroke-width: 2; } .cin-glow { fill: #5B9BFF; opacity: 0; transition: opacity .6s; } .cin-beam { fill: url(#beam); opacity: 0; transition: opacity .6s; } .cinema[data-display="tv"] .cin-screen, .cinema[data-display="tv"] .cin-proj { display: none; } .cinema[data-display="projector"] .cin-tv { display: none; } .cinema[data-scene="film"] .cin-floor { fill: #0C1219; } .cinema[data-scene="film"] .cin-stars { opacity: .55; } .cinema[data-scene="film"] .cin-steps circle { opacity: .9; } .cinema[data-scene="film"] .cin-glow { opacity: .18; } .cinema[data-scene="film"] .cin-beam { opacity: 1; } .cinema[data-scene="interval"] .cin-floor { fill: #1E2833; } .cinema[data-scene="interval"] .cin-wash { opacity: .08; } .cinema[data-scene="interval"] .cin-stars { opacity: .25; } .cinema[data-scene="interval"] .cin-steps circle { opacity: .9; } .cinema[data-scene="up"] .cin-floor { fill: #3A4652; } .cinema[data-scene="up"] .cin-wash { opacity: .16; } .spk rect, .spk circle:first-child { fill: #2A3A4B; stroke: var(--live); stroke-width: 2; } .spk circle:last-child { fill: var(--live); } .spk.sub rect { fill: #221A10; } .spk.ceil circle:first-child { fill: rgba(91,155,255,.12); stroke: var(--neutral); stroke-dasharray: 4 3; } .spk.ceil circle:last-child { fill: var(--neutral); } .spk { animation: pop .35s ease; transform-box: fill-box; transform-origin: center; } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .cin-cables { opacity: 0; transition: opacity .4s; } .cinema[data-xray="on"] .cin-cables { opacity: 1; } .cinema[data-xray="on"] .cin-floor { fill: #0B1C2E; } .run { fill: none; stroke-width: 2.5; stroke-dasharray: 8 6; animation: dash 1.2s linear infinite; } .run.sp { stroke: var(--live); } .run.dt { stroke: var(--neutral); } .run.pw { stroke: var(--danger); } .cinema-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .8rem; } .cinema-readout .stat b { font-size: 1.5rem; } .cin-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; font-size: .82rem; color: var(--muted); } .cin-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .35rem; vertical-align: 3px; } .cinema-list { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.1rem; } .cinema-list .check-list { columns: 2; column-gap: 2rem; display: block; } .cinema-list .check-list li { break-inside: avoid; margin-bottom: .55rem; } @media (max-width: 960px) { .cinema { grid-template-columns: 1fr; } .cinema-list .check-list { columns: 1; } } /* distribution diagram */ .dist { width: 100%; height: auto; } .dist-lines path { stroke: var(--line); stroke-width: 3; fill: none; } .dist-pulse path { stroke: var(--neutral); stroke-width: 3; fill: none; stroke-dasharray: 6 30; animation: dash 1.6s linear infinite; } .dist-pulse path:nth-child(2n) { animation-duration: 2.1s; stroke: var(--live); } .dist-node rect { fill: var(--raised); stroke: var(--line); } .dist-node.hub rect { fill: #13233A; stroke: var(--neutral); stroke-width: 2; } .dist-node text { fill: var(--text); font: 700 14px var(--font); text-anchor: middle; } .dist-node text.sm { font-weight: 500; font-size: 12px; fill: var(--muted); } .av-ghost text { font-size: 12px; } /* dropdown gets two columns now it's longer */ @media (min-width: 1101px) { .nav .sub { display: none; min-width: 460px; } .nav .has-sub:hover > .sub, .nav .has-sub:focus-within > .sub { display: grid; grid-template-columns: 1fr 1fr; } } .meter-wrap { grid-row: span 2; align-self: center; } .meter-wrap .meter { grid-row: auto; } .meter-lab { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .4rem; } @media (max-width: 860px) { .meter-wrap { grid-row: auto; max-width: 200px; } } .av-ghost text { fill: #FFB547; font-weight: 700; } /* ===== Round 5: bathrooms, lighting, projects ===== */ /* shower */ .shower { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); align-items: start; } .shower-stage svg { width: 100%; height: auto; border-radius: var(--radius-m); display: block; } .shower-panel { display: grid; gap: 1.1rem; } .shower-panel h3 { font-size: .95rem; color: var(--muted); font-weight: 600; margin-bottom: .45rem; } .shower-panel .seg { margin: 0; } .shw-lcd { font: 800 15px var(--font); fill: #53C78A; } .shw-drops line { stroke: #BFE0FF; stroke-width: 2; stroke-linecap: round; animation: fall .6s linear infinite; } @keyframes fall { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(var(--dx), 236px); opacity: .2; } } .shw-spray { transition: opacity .4s; } .shw-steam path { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; opacity: 0; transition: opacity .6s; filter: blur(3px); } .shower[data-season="winter"] .shw-steam path { opacity: .18; animation: rise 3s ease-in-out infinite; } @keyframes rise { 50% { transform: translateY(-10px); } } .shw-cable path { fill: none; stroke: var(--danger); stroke-width: 4; stroke-dasharray: 8 6; animation: dash 1.2s linear infinite; } .shw-cable text { fill: var(--danger); font: 700 12px var(--font); } .shw-cable { opacity: 0; transition: opacity .4s; } .shower.xray .shw-cable { opacity: 1; } @media (max-width: 860px) { .shower { grid-template-columns: 1fr; } .shower-stage { max-width: 380px; margin-inline: auto; width: 100%; } } /* bathroom zones */ .bzone { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .bz { width: 100%; height: auto; display: block; border-radius: var(--radius-m); touch-action: pan-y; } .bz-side { display: grid; gap: 1rem; align-content: start; } .bz-zones rect { transition: y .3s, height .3s, opacity .3s; } .bz-zones .z0 { fill: rgba(255,107,94,.35); } .bz-zones .z1 { fill: rgba(255,181,71,.22); } .bz-zones .z2 { fill: rgba(91,155,255,.2); } .bz-zones .zl { fill: var(--text); font: 700 13px var(--font); opacity: .8; } .bz-zones .zl.out { fill: var(--muted); font-weight: 600; } .bz-225 { stroke: var(--muted); stroke-dasharray: 5 5; transition: opacity .3s; } .bz-225t { fill: var(--muted); font: 600 12px var(--font); transition: opacity .3s; } .bzone.nozones .bz-zones { opacity: 0; } .bz-ceil { stroke: #34495E; stroke-width: 8; fill: none; } .bz-ufh { fill: url(#none); fill: #FF7A45; opacity: .5; } .bz-small { fill: var(--muted); font: 600 12px var(--font); } .bz-item { cursor: pointer; outline: none; } .bz-item:hover > *:first-child, .bz-item:focus-visible > *:first-child, .bz-item.active > *:first-child { stroke: var(--live); stroke-width: 3; } .bz-item[data-item="ufh"]:hover text, .bz-item[data-item="ufh"].active text { fill: var(--live); } .bz-light { cursor: grab; outline: none; transition: transform .05s; } .bz-light.dragging { cursor: grabbing; } .bz-beam { fill: #FFE7A3; opacity: .22; } .bz-light.wet .bz-beam { fill: #FFB547; opacity: .3; } .bz-light:focus-visible rect:first-of-type { stroke: var(--neutral); stroke-width: 3; } .bz-info { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem; } .bz-info h3 { margin: .2rem 0 .4rem; font-size: 1.1rem; } .bz-info p { color: #CBD5DF; font-size: .95rem; } .ip-badge.z1 { background: rgba(255,181,71,.15); color: var(--live); border-color: rgba(255,181,71,.45); } .ip-badge.z2 { background: rgba(91,155,255,.15); color: var(--neutral); } .ip-badge.zo { background: var(--raised); color: var(--text); border-color: var(--line); } @media (max-width: 960px) { .bzone { grid-template-columns: 1fr; } } /* mirror */ .mirror svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto .8rem; border-radius: var(--radius-l); } .mir-fog { opacity: 0; transition: opacity 2.5s ease; } .mirror[data-steam="on"][data-demist="off"] .mir-fog { opacity: 1; } .mir-ring { fill: none; stroke: #FFF3D6; stroke-width: 6; opacity: .15; transition: opacity .6s, filter .6s; } .mirror[data-demist="on"] .mir-ring { opacity: 1; filter: drop-shadow(0 0 10px #FFE2A8); } /* IP strip */ .ip-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .ipc { background: var(--bg); padding: 1.3rem; position: relative; } .ipc b { display: block; font-size: 1.6rem; font-variation-settings: "wdth" 118; margin-bottom: .3rem; } .ipc span { color: var(--muted); font-size: .95rem; } .ipc::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--raised); } .ipc.ok::before { background: var(--neutral); width: 50%; } .ipc.good::before { background: var(--live); width: 75%; } .ipc.best::before { background: var(--ok); } @media (max-width: 860px) { .ip-strip { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .ip-strip { grid-template-columns: 1fr; } } /* seasonal outdoor lights */ .events { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 1.2rem; } .ev-stage { position: relative; } .ev-scene { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .ev-stars circle { fill: #FFFFFF; opacity: .7; } .ev-eaves .px { transition: fill .15s; } .bol { fill: #9AA9BA; } .porch { filter: drop-shadow(0 0 6px #FFD29A); } .ev-badge { position: absolute; left: 1rem; top: 1rem; background: rgba(5,10,18,.72); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .6rem .9rem; backdrop-filter: blur(6px); } .ev-badge b { display: block; font-size: 1.15rem; font-variation-settings: "wdth" 112; } .ev-badge span { color: var(--muted); font-size: .85rem; } .ev-months input { width: 100%; } .ev-ticks { display: grid; grid-template-columns: repeat(12, 1fr); font-size: .75rem; color: var(--muted); text-align: center; margin-top: .2rem; } .ev-chips { margin: 0; } .ev-chips .filter { font-size: .88rem; padding: .45rem .85rem; } .ev-side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .ev-side[hidden] { display: none; } .ev-side [data-side="red"][aria-pressed="true"] { background: #E3182D; border-color: #E3182D; color: #fff; } .ev-side [data-side="blue"][aria-pressed="true"] { background: #1B4FD8; border-color: #1B4FD8; color: #fff; } @media (max-width: 520px) { .ev-ticks span:nth-child(even) { visibility: hidden; } .ev-badge { left: .5rem; top: .5rem; padding: .4rem .6rem; } .ev-badge b { font-size: .95rem; } } /* kitchen scenes */ .kitchen { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); align-items: start; --lc: #FFC18D; } .kit { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .kit-wall { transition: fill .5s; } .k-down path, .k-pend, .k-under, .k-plinthglow { fill: var(--lc); transition: opacity .5s, fill .3s; } .k-strip, .k-plinth, .k-bulb { fill: var(--lc); transition: opacity .5s, fill .3s; } .k-dim { transition: opacity .5s; pointer-events: none; } .kit-controls { display: grid; gap: 1rem; } .kit-controls .seg { margin: 0; } .k-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); } #kit-k { background: linear-gradient(90deg, #FF9A3C, #FFD7A8, #F4F7FF); border-radius: 999px; height: 10px; appearance: none; -webkit-appearance: none; } #kit-k::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); } #kit-k::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 3px solid var(--bg); } @media (max-width: 860px) { .kitchen { grid-template-columns: 1fr; } } /* project planner */ .projects { display: grid; gap: 1.5rem; } .projects > .seg { margin: 0; } .proj-timeline, .proj-reqs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.1rem, 2.5vw, 1.8rem); } .pt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .pt-head h2 { margin: 0; } .pt-track { position: relative; height: 6px; background: var(--raised); border-radius: 3px; margin: 2.5rem 0 1rem; } .pt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--live); border-radius: 3px; transition: width .6s ease; } .pt-van { position: absolute; top: -34px; width: 60px; margin-left: -30px; transition: left .6s ease; } .pt-van svg { width: 60px; height: 30px; display: block; } .pt-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .pt-stages li { display: grid; justify-items: center; text-align: center; gap: .5rem; font-size: .88rem; color: var(--muted); transition: color .3s; } .pt-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line); font-weight: 700; color: var(--muted); transition: all .3s; } .pt-node svg { width: 18px; height: 18px; } .pt-stages li.cab .pt-node { border-color: var(--live); color: var(--live); } .pt-stages li.now { color: var(--text); } .pt-stages li.now .pt-node { transform: scale(1.18); background: var(--raised); } .pt-stages li.cab.now .pt-node { background: var(--live); color: #1B1204; box-shadow: 0 0 0 6px rgba(255,181,71,.2); } .pt-stages li.done .pt-node { background: var(--raised); } .pt-stages li.cab.done .pt-node { background: rgba(255,181,71,.18); } .pt-legend { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 0; } .pt-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); display: inline-block; margin-left: .6rem; } .pt-dot.cab { border-color: var(--live); background: rgba(255,181,71,.3); margin-left: 0; } @media (max-width: 760px) { .pt-track { display: none; } .pt-stages { grid-template-columns: 1fr !important; } .pt-stages li { grid-template-columns: 34px 1fr; justify-items: start; text-align: left; align-items: center; } } .bzone .bz, .wipe, .cin, .ev-scene, .kit { -webkit-user-select: none; user-select: none; } .bz-light { touch-action: none; } .bz-drag { fill: var(--live); font: 700 11px var(--font); pointer-events: none; } .k-down path, .k-pend, .k-under, .k-plinthglow { mix-blend-mode: screen; } .k-strip, .k-plinth, .k-bulb { filter: drop-shadow(0 0 6px var(--lc)); } /* ===== Kitchen planner ===== */ .kplan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 1.2rem; } .kp-chips { margin: 0; } .kp-chips .filter { font-size: .86rem; padding: .42rem .8rem; } .kp-main { display: grid; grid-template-columns: 1fr 330px; gap: 1.2rem; align-items: start; } .kp { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .kp-app { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; pointer-events: none; } .kp-app.on { opacity: 1; transform: none; } .kp-under { fill: #FFD29A; opacity: .2; } .kp-sockets rect { fill: #EEF2F5; } .kp-led { fill: #53C78A; filter: drop-shadow(0 0 3px #53C78A); transition: fill .2s; } .kp-app.isolated .kp-led { fill: #FF6B5E; filter: none; } .kp-app.isolated { filter: grayscale(.7) brightness(.7); } .kp-heat ellipse { fill: #FF6B3D; opacity: .7; animation: blink 1.6s ease-in-out infinite; } .kp-app.isolated .kp-heat, .kp-app.isolated .kp-air, .kp-app.isolated .kp-steam, .kp-app.isolated .kp-ovenglow { display: none; } .kp-ovenglow { fill: #FF9A4A; opacity: .35; } .kp-air path, .kp-steam { fill: none; stroke: #FFFFFF; stroke-width: 2.5; opacity: .35; stroke-dasharray: 6 6; animation: dash 1.5s linear infinite; } .kp-drum { transform-box: fill-box; transform-origin: center; animation: spin 2.4s linear infinite; } .kp-app.isolated .kp-drum { animation: none; } .kp-lab { fill: #9CC8FF; font: 700 11px var(--font); } .kp-side { display: grid; gap: 1rem; } .kp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .kp-board h3, .kp-iso h3 { font-size: 1rem; margin-bottom: .5rem; } .kp-board ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .kp-board li { display: flex; gap: .7rem; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; animation: fadeUp .3s ease; } .kp-board li b { display: block; font-size: .95rem; } .kp-board li span:not(.kp-rcbo) { color: var(--muted); font-size: .84rem; } .kp-rcbo { flex-shrink: 0; width: 14px; height: 26px; border-radius: 3px; background: #FFFFFF; position: relative; margin-top: .15rem; } .kp-rcbo::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 8px; border-radius: 1px; background: #1A2530; } .kp-board li.big .kp-rcbo { width: 20px; } .kp-board li.big .kp-rcbo::after { background: #2F6FD6; } .kp-plate { display: flex; flex-wrap: wrap; gap: 4px; background: #EEF2F5; border-radius: 8px; padding: 8px; } .kp-plate p { color: #3C4A57 !important; margin: 0; } .kp-sw { font: inherit; display: grid; justify-items: center; gap: 4px; width: 62px; padding: 6px 2px 5px; border: 1px solid #C9D1D8; border-radius: 4px; background: #FFFFFF; cursor: pointer; } .kp-rk { width: 18px; height: 26px; border-radius: 3px; background: #E3E7EA; position: relative; box-shadow: inset 0 0 0 1px #B8C3CC; } .kp-rk::after { content: ""; position: absolute; left: 2px; right: 2px; height: 11px; border-radius: 2px; background: #8A96A2; bottom: 2px; transition: all .15s; } .kp-sw[aria-pressed="true"] .kp-rk::after { top: 2px; bottom: auto; background: #C4302B; } .kp-sw.cooker .kp-rk { width: 24px; } .kp-sw.cooker[aria-pressed="true"] .kp-rk::after { background: #C4302B; box-shadow: 0 0 6px rgba(196,48,43,.6); } .kp-sl { font-size: .7rem; font-weight: 700; color: #1A2530; } .kp-sw:focus-visible { outline: 2px solid var(--neutral); } @media (max-width: 1000px) { .kp-main { grid-template-columns: 1fr; } } .kp-main { grid-template-columns: 1fr; } .kp-side { grid-template-columns: 1.3fr 1fr; align-items: start; } .kp-stats { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 220px)); } @media (max-width: 760px) { .kp-side { grid-template-columns: 1fr; } .kp-stats { grid-template-columns: 1fr 1fr; } } .kp-under { opacity: .32; mix-blend-mode: screen; } .kp-sw { width: 72px; } @media (max-width: 600px) { .kp-chips, .ev-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; margin-inline: -.2rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .kp-chips .filter, .ev-chips .filter { flex-shrink: 0; } } /* ===== Air conditioning ===== */ .aircon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 1.1rem; } .ac-controls { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; } .ac-controls h3 { font-size: .95rem; color: var(--muted); font-weight: 600; margin-bottom: .45rem; } .ac-controls .seg { margin: 0; } .ac-controls .filter { font-size: .88rem; padding: .45rem .85rem; } .ac-scene { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .ac-sky { fill: #0F2236; transition: fill .6s; } .aircon[data-mode="heat"] .ac-sky { fill: #0B1420; } .ac-sun, .ac-snow { transition: opacity .5s; } .aircon[data-mode="cool"] .ac-snow, .aircon[data-mode="heat"] .ac-sun { opacity: 0; } .aircon[data-mode="heat"] .ac-snow circle { animation: snow 3s linear infinite; } .aircon[data-mode="heat"] .ac-snow circle:nth-child(2n) { animation-duration: 4s; } @keyframes snow { from { transform: translateY(-20px); } to { transform: translateY(40px); opacity: .2; } } .ac-rl { fill: var(--muted); font: 600 12px var(--font); } .rt { opacity: 0; transition: opacity .4s, fill .4s; fill: transparent; } .aircon[data-mode="cool"] .rt.on { fill: #FF6B3D; } .aircon[data-mode="heat"] .rt.on { fill: #5B9BFF; } .ac-in { opacity: 0; transition: opacity .4s; } .ac-in.on { opacity: 1; } .ac-inled { fill: #53C78A; } .ac-air path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 10; animation: dash 1s linear infinite; } .aircon[data-mode="cool"] .ac-air path { stroke: #9CC8FF; } .aircon[data-mode="heat"] .ac-air path { stroke: #FF9A4A; } .ac-temp { fill: var(--text); font: 800 18px var(--font); } .ac-pipes path { fill: none; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .4s; stroke-dasharray: 10 8; animation: dash 1.4s linear infinite; } .ac-pipes path.on { opacity: .9; } .aircon[data-mode="cool"] .ac-pipes path { stroke: #7FB8FF; } .aircon[data-mode="heat"] .ac-pipes path { stroke: #FF8A4A; animation-direction: reverse; } .ac-fan { transform-box: fill-box; transform-origin: center; animation: spin .7s linear infinite; } .ac-elec { opacity: 0; transition: opacity .4s; } .aircon.xray .ac-elec { opacity: 1; } .aircon.xray .ac-pipes path.on { opacity: .25; } .ac-elec path { fill: none; stroke-width: 3.5; stroke-dasharray: 8 6; animation: dash 1.1s linear infinite; } .ac-elec .e-main, .ac-elec .e-link { stroke: var(--danger); stroke-width: 4.5; } .ac-elec .e-ic { stroke: var(--live); opacity: 0; } .ac-elec .e-ic.on { opacity: 1; } .ac-callout rect { fill: rgba(13,21,30,.9); stroke: var(--danger); } .ac-callout text { fill: var(--text); font: 700 11px var(--font); } .ac-iso { filter: drop-shadow(0 0 0 transparent); transition: filter .3s; } .aircon.xray .ac-iso { filter: drop-shadow(0 0 8px #E6CF3A); } .ac-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } @media (max-width: 760px) { .ac-stats { grid-template-columns: 1fr 1fr; } .ac-controls { display: grid; } } @media (max-width: 600px) { .ac-controls .seg { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem; } .ac-controls .filter { flex-shrink: 0; } } /* ===== Round 9: seasons, story, health check, troubleshooter, work, reviews, reminder, knob, sounds ===== */ /* dropdowns: single-column ones */ @media (min-width: 1101px) { .nav .has-sub:hover > .sub.one, .nav .has-sub:focus-within > .sub.one { grid-template-columns: 1fr; min-width: 250px; } .nav .sub.one { min-width: 250px; } } /* seasonal homepage */ .sz { display: none; } .sz-bulbs circle { animation: twinkle 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4px currentColor); } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .sz-snow circle { animation: snowfall 6s linear infinite; } .sz-snow circle:nth-child(3n) { animation-duration: 8s; } .sz-snow circle:nth-child(3n+1) { animation-duration: 7s; animation-delay: -3s; } @keyframes snowfall { from { transform: translateY(-30px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(330px); opacity: 0; } } .bat { animation: batfly 5s ease-in-out infinite; } .bat.b2 { animation-duration: 6.5s; animation-delay: -2s; } @keyframes batfly { 0%, 100% { translate: 0 0; } 50% { translate: -40px 14px; } } .pumpkin ellipse { filter: drop-shadow(0 0 8px rgba(255,138,31,.8)); } .fw { animation: fwpop 2.6s ease-out infinite; transform-box: fill-box; } .fw .fw-in { animation: fwscale 2.6s ease-out infinite; animation-delay: inherit; transform-origin: 0 0; } @keyframes fwscale { 0% { transform: scale(0); opacity: 1; } 40% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.15); opacity: 0; } } .heart { animation: floatup 4s ease-in-out infinite; } .heart.h2 { animation-delay: -1.3s; } .heart.h3 { animation-delay: -2.6s; } @keyframes floatup { 0% { transform: translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } } .house-panel { position: relative; } .season-badge { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-top: .6rem; background: linear-gradient(90deg, rgba(255,181,71,.14), transparent); border-left: 3px solid var(--live); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: .55rem .9rem; font-size: .92rem; animation: fadeUp .5s ease; } .season-badge[hidden] { display: none; } .season-badge b { display: inline; } .season-badge a { font-size: .82rem; } @media (prefers-reduced-motion: reduce) { .sz-bulbs circle, .sz-snow circle, .bat, .fw, .fw .fw-in, .heart { animation: none !important; } } /* help chip in the hero */ .help-chip { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.1rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 600; background: var(--surface); } .help-chip:hover { border-color: var(--danger); color: var(--text); } .help-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(255,107,94,.6); animation: ping 1.8s infinite; } @keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255,107,94,0); } 100% { box-shadow: 0 0 0 0 rgba(255,107,94,0); } } /* promo cards */ .promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .promo { display: block; padding: 1.5rem; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; } .promo:hover { border-color: var(--live); color: var(--text); transform: translateY(-2px); } .promo-k { display: inline-block; font-size: .78rem; font-weight: 700; color: #1B1204; background: var(--live); padding: .15rem .55rem; border-radius: 999px; margin-bottom: .7rem; } .promo h3 { margin-bottom: .4rem; } .promo p { color: var(--muted); font-size: .95rem; } .promo .go { color: var(--live); font-weight: 700; } @media (max-width: 860px) { .promo-grid { grid-template-columns: 1fr; } } /* scroll story */ .story { height: 320vh; position: relative; border-block: 1px solid var(--line); background: var(--surface); } .story-sticky { position: sticky; top: 104px; height: calc(100vh - 104px); display: flex; align-items: center; overflow: hidden; } .story-grid { display: grid; grid-template-columns: 340px 1fr; gap: 2rem; align-items: center; } .story-svg { width: 100%; height: auto; max-height: calc(100vh - 150px); display: block; } .story-bar { height: 4px; background: var(--raised); border-radius: 2px; margin: 1rem 0; overflow: hidden; } .story-bar span { display: block; height: 100%; width: 0; background: var(--live); } .story-stages { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .35rem; } .story-stages li { padding: .5rem .7rem; border-left: 3px solid var(--line); color: var(--muted); transition: all .25s; } .story-stages li b { display: block; font-size: .98rem; } .story-stages li span { display: none; font-size: .9rem; } .story-stages li.done { border-color: rgba(255,181,71,.4); } .story-stages li.on { border-color: var(--live); color: var(--text); background: var(--bg); border-radius: 0 8px 8px 0; } .story-stages li.on span { display: block; } .st-c { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .st-c.rg { stroke: #FFB547; } .st-c.lt { stroke: #5B9BFF; } .st-cables, .st-boxes, .st-acc, .st-lights { opacity: 0; } .story.static { height: auto; } .story.static .story-sticky { position: static; height: auto; padding-block: 3rem; } .story.static .story-stages li span { display: block; } @media (max-width: 900px) { .story { height: 260vh; } .story-sticky { top: 80px; height: calc(100vh - 80px); } .story-grid { grid-template-columns: 1fr; gap: .8rem; } .story-copy h2 { font-size: 1.5rem; margin-bottom: .2rem; } .story-copy > p, .story-copy > .btn { display: none; } .story-stages li:not(.on) { display: none; } .story-svg { max-height: 48vh; } } /* health check */ .hc { max-width: 820px; margin-inline: auto; } .hc-quiz, .hc-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.3rem, 3vw, 2.2rem); } .hc-quiz.in { animation: fadeUp .35s ease; } .hc-progress { height: 6px; background: var(--raised); border-radius: 3px; overflow: hidden; margin-bottom: .8rem; } .hc-progress span { display: block; height: 100%; background: var(--live); transition: width .35s ease; } .hc-q { font-size: clamp(1.4rem, 3vw, 2rem); margin: .3rem 0 .4rem; outline: none; } .hc-answers { display: grid; gap: .6rem; margin: 1.2rem 0 .6rem; } .hc-ans { font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left; padding: 1rem 1.2rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; } .hc-ans:hover, .hc-ans:focus-visible { border-color: var(--live); } .hc-ans.picked { background: var(--live); color: #1B1204; border-color: var(--live); } .hc-back { font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; padding: .4rem 0; } .hc-top { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: center; margin-bottom: 1rem; } .hc-dial { width: 100%; height: auto; } .hc-arc { stroke-dasharray: 0 1; transition: stroke-dasharray 1.2s cubic-bezier(.2,.8,.25,1); } .hc-needle { transform-origin: 120px 130px; transform: rotate(-90deg); transition: transform 1.2s cubic-bezier(.2,.8,.25,1); } .hc-dl { fill: var(--muted); font: 600 12px var(--font); } .hc-score { font-size: 4rem; line-height: 1; margin: .2rem 0 .4rem; font-weight: 800; font-variation-settings: "wdth" 118; } .hc-score span { font-size: 1.6rem; color: var(--muted); } .hc-urgent { background: rgba(255,107,94,.12); border: 1px solid var(--danger); border-radius: var(--radius-m); padding: 1rem 1.2rem; margin-bottom: 1.2rem; } @media (max-width: 640px) { .hc-top { grid-template-columns: 1fr; } .hc-dial { max-width: 260px; } } /* troubleshooter */ .tb-safety { background: rgba(255,107,94,.1); border: 1px solid rgba(255,107,94,.5); border-radius: var(--radius-m); padding: .9rem 1.1rem; margin-bottom: 1.2rem; } .tb { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 3vw, 2rem); } .tb-step.in { animation: fadeUp .3s ease; } .tb-q { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: .2rem 0 .6rem; outline: none; } .tb-text p { color: #CBD5DF; } .tb-opts { display: grid; gap: .55rem; margin: 1rem 0; } .tb-opt { font: inherit; font-weight: 600; text-align: left; padding: .9rem 1.1rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; } .tb-opt:hover, .tb-opt:focus-visible { border-color: var(--live); } .tb-end { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1rem; border-radius: var(--radius-m); background: var(--bg); border: 1px solid var(--line); } .tb-end.ok { border-color: var(--ok); } .tb-end.call { border-color: var(--live); } .tb-end.dno { border-color: var(--neutral); } .tb-board { width: 100%; height: auto; display: block; } .tb-board .b { fill: #FFFFFF; stroke: #B9C2CA; transition: stroke .2s; } .tb-board text { font: 700 11px var(--font); fill: #1A2530; text-anchor: middle; } .tb-board .tb-grp { fill: #5A6672; font-weight: 600; } .tb-board .lv { transition: transform .35s ease; transform-box: fill-box; } .tb-dev.down .lv { transform: translateY(40px); } .tb-dev.down .lv { fill: #8A96A2 !important; } .tb-dev.hl .b { stroke: var(--live); stroke-width: 4; animation: blink 1.2s ease-in-out infinite; } .tb.done-ok .tb-dev .b { stroke: var(--ok); stroke-width: 3; } .tb-cap { margin-top: .6rem; } @media (max-width: 860px) { .tb { grid-template-columns: 1fr; } .tb-visual { order: -1; } } /* our work */ .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .work { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .work .wipe { border: 0; border-radius: 0; } .work figcaption { padding: 1.2rem 1.3rem 1.4rem; } .work h3 { margin: .5rem 0 .4rem; } .work p { color: var(--muted); font-size: .95rem; } .work-tag { font-size: .78rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--raised); color: var(--text); } .work-illus { font-size: .75rem; color: var(--muted); margin-left: .5rem; } .work.has-photos .work-illus { display: none; } .work-photo { display: block; width: 100%; aspect-ratio: 720 / 380; object-fit: cover; } @media (max-width: 860px) { .work-grid { grid-template-columns: 1fr; } } /* reviews */ .rv-filters { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: .8rem; } .rv-filters h3 { font-size: .95rem; color: var(--muted); font-weight: 600; margin-bottom: .45rem; } .rv-filters .seg { margin: 0; } .rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } .rv-card { animation: fadeUp .3s ease; } /* EICR reminder */ .reminder { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 3vw, 2rem); } .reminder h3 { font-size: 1.4rem; } .rm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; } .rm-form .btn-row { grid-column: 1 / -1; } .rm-due { grid-column: 1 / -1; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .8rem 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; } .rm-due b { font-size: 1.4rem; font-variation-settings: "wdth" 112; } .rm-warn { color: var(--danger); font-weight: 600; } .btn:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 760px) { .reminder, .rm-form { grid-template-columns: 1fr; } } /* amp knob */ .amp { background: #0D0D0D; border: 1px solid #2A2A2A; border-radius: var(--radius-m); padding: .8rem 1rem; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px); } .amp-face { display: flex; align-items: center; gap: 1rem; } .amp-knob { width: 110px; height: 110px; flex-shrink: 0; } .amp-ticks text { fill: #C8C8C8; font: 700 9px var(--font); text-anchor: middle; } .amp-ticks text:last-child { fill: var(--live); font-size: 11px; } .amp-pointer { transition: transform .15s; } .amp-label { font-weight: 700; display: block; color: #EDEDED; letter-spacing: .02em; } .amp-range { width: 100%; accent-color: var(--live); } .amp-out { font-size: 1.5rem; font-weight: 800; color: var(--live); font-variation-settings: "wdth" 118; } .kitchen.eleven .kit { animation: elevenGlow 1.2s ease-in-out infinite alternate; } @keyframes elevenGlow { to { filter: brightness(1.15) drop-shadow(0 0 18px rgba(255,181,71,.45)); } } .kitchen.eleven .amp-note { color: var(--live); font-weight: 700; } /* sound toggle */ .sound-toggle { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .85rem; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; } .sound-toggle svg { width: 16px; height: 16px; } .sound-toggle[aria-pressed="false"] .waves { opacity: .25; } .sound-toggle[aria-pressed="true"] { color: var(--live); border-color: var(--live); } .tb-board .tb-lab text { font-size: 9px; font-weight: 600; } /* keep the three promo cards' links level with each other */ .promo { display: flex; flex-direction: column; } .promo p { flex: 1; } .promo .go { margin-top: .4rem; } .promo .go { white-space: nowrap; font-size: .96rem; } .promo .promo-k { align-self: flex-start; } /* ===== Round 10: van tile, building, calendar, disruption planner ===== */ /* van tile in the services grid */ .js-ready .vt-carl { transform: translateY(40px); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1.8s; } .van-stage.arrived .vt-carl { transform: none; } .js-ready .vt-arm { opacity: 0; transform-box: view-box; transform-origin: 630px 140px; } .van-stage.arrived .vt-arm { animation: armIn .3s ease 2.2s forwards, thumbsup 1.8s ease-in-out 2.5s infinite; } @keyframes armIn { to { opacity: 1; } } @keyframes thumbsup { 0%, 60%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(-3px) scale(1.06); } 40% { transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .vt-carl { transition: none !important; } .van-stage.arrived .vt-arm { animation: armIn 0s forwards; } } /* building cut-through */ .bd { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .bd-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .bd-side { display: grid; gap: 1rem; align-content: start; } .bd-lab { fill: var(--muted); font: 600 11px var(--font); text-anchor: middle; } .bd-normal, .bd-screens, .bd-leds { transition: opacity .25s; } .bd-air path { fill: none; stroke: #9CC8FF; stroke-width: 2.5; stroke-dasharray: 5 7; animation: dash 1s linear infinite; } .bd-fan { transform-box: fill-box; transform-origin: center; animation: spin .8s linear infinite; } .bd-dark { opacity: 0; transition: opacity .35s; pointer-events: none; } .bd-em { opacity: 0; transition: opacity .3s .25s; } .bd-emu { fill: #F4F6F8; } .bd-exit rect { fill: #1B9E4B; } .bd-evled { fill: #53C78A; } .bd-evcable { stroke-dasharray: 6 6; animation: dash 1s linear infinite; } .bd.blackout .bd-dark { opacity: .82; } .bd.blackout .bd-normal, .bd.blackout .bd-screens, .bd.blackout .bd-leds, .bd.blackout .bd-air { opacity: 0; } .bd.blackout .bd-fan, .bd.blackout .bd-evcable { animation-play-state: paused; } .bd.blackout .bd-evled { fill: #FF6B5E; } .bd.blackout .bd-em { opacity: 1; } .bd.blackout .bd-exit rect { fill: #2EE06E; filter: drop-shadow(0 0 8px #2EE06E); } .bd.blackout .bd-emu { filter: drop-shadow(0 0 6px #FFFFFF); } .bd-spot { cursor: pointer; outline: none; } .bd-spot circle { fill: var(--live); stroke: #1B1204; stroke-width: 3; transition: r .15s; } .bd-spot text { fill: #1B1204; font: 800 13px var(--font); text-anchor: middle; pointer-events: none; } .bd-spot:hover circle, .bd-spot:focus-visible circle { r: 15; } .bd-spot.active circle { fill: #FFFFFF; stroke: var(--live); stroke-width: 4; r: 15; } .bd-info { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.1rem; } .bd-info h3 { margin-bottom: .35rem; } .bd-info p { color: #CBD5DF; font-size: .95rem; } .bd-info dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; font-size: .9rem; margin: 0 0 .6rem; } .bd-info dt { color: var(--muted); } .bd-info dd { margin: 0; } .bd-battery { background: var(--bg); border: 1px solid #2EE06E; border-radius: var(--radius-m); padding: .8rem 1rem; } .bd-battery[hidden] { display: none; } .bd-bat-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: .4rem; } .bd-bat-top b { font-size: 1.3rem; color: #2EE06E; font-variant-numeric: tabular-nums; } .bd-bat { height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; margin-bottom: .5rem; } .bd-bat span { display: block; height: 100%; background: #2EE06E; transition: width .15s linear; } @media (max-width: 960px) { .bd { grid-template-columns: 1fr; } } /* compliance calendar */ .cal { display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.1rem, 2.5vw, 1.8rem); } .cal-inputs { display: grid; gap: 1rem; align-content: start; } .cal-inputs .field[hidden] { display: none; } .cal-out { display: grid; gap: 1rem; min-width: 0; } .cal-grid { width: 100%; border-collapse: collapse; min-width: 640px; } .cal-grid th, .cal-grid td { border-bottom: 1px solid var(--line); padding: .55rem .3rem; text-align: center; } .cal-grid thead th { font-size: .8rem; color: var(--muted); font-weight: 700; } .cal-grid thead th span { display: block; font-weight: 500; font-size: .7rem; } .cal-grid tbody th { text-align: left; font-size: .88rem; font-weight: 600; width: 34%; padding-right: .8rem; } .cal-grid thead th:nth-child(2) { color: var(--live); } .k { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; } .k.due { background: var(--live); box-shadow: 0 0 0 3px rgba(255,181,71,.2); } .k.over { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,107,94,.25); animation: blink 1.4s infinite; } .k.rep { width: 8px; height: 8px; background: #5E7890; } .cal-key { display: flex; flex-wrap: wrap; gap: 1rem; } .cal-key i { margin-right: .35rem; } .cal-alert { background: rgba(255,107,94,.1); border: 1px solid rgba(255,107,94,.5); border-radius: var(--radius-m); padding: .8rem 1rem; } .cal-alert ul { margin: .3rem 0 0; padding-left: 1.1rem; } .cal-ok { background: rgba(83,199,138,.1); border: 1px solid rgba(83,199,138,.5); border-radius: var(--radius-m); padding: .8rem 1rem; } @media (max-width: 900px) { .cal { grid-template-columns: 1fr; } } /* disruption planner */ .dp { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.1rem, 2.5vw, 1.8rem); } .dp-inputs { display: grid; gap: 1rem; align-content: start; } .dp-inputs .form-grid { gap: .8rem; } .dp-out { display: grid; gap: .9rem; align-content: start; min-width: 0; } .dp-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: .6rem; margin-bottom: .35rem; } .dp-day { font-weight: 700; font-size: .88rem; color: var(--muted); } .dp-bar { position: relative; height: 22px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--bg) 0 calc(100%/24 - 1px), var(--line) calc(100%/24 - 1px) calc(100%/24)); } .dpseg { position: absolute; top: 0; bottom: 0; border-radius: 4px; transition: all .3s; } .dpseg.open { background: #3A6FBF; } .dpseg.work { background: repeating-linear-gradient(-45deg, rgba(255,181,71,.8) 0 6px, rgba(255,181,71,.45) 6px 12px); } .dpseg.off { background: var(--danger); box-shadow: 0 0 10px rgba(255,107,94,.6); z-index: 1; } .dp-axis .dp-bar { background: none; height: 16px; } .dp-axis .dp-bar span { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--muted); } .dp-axis .dp-bar span:first-child { transform: none; } .dp-axis .dp-bar span:last-child { transform: translateX(-100%); } .dp-key { display: flex; flex-wrap: wrap; gap: 1rem; } .k.open { border-radius: 3px; background: #3A6FBF; } .k.work { border-radius: 3px; background: repeating-linear-gradient(-45deg, rgba(255,181,71,.8) 0 3px, rgba(255,181,71,.45) 3px 6px); } .k.off { border-radius: 3px; background: var(--danger); } .dp-key i { margin-right: .35rem; } .dp-sum { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.1rem; } .dp-sum p { margin-bottom: .5rem; } .dp .btn { justify-self: start; } @media (max-width: 900px) { .dp { grid-template-columns: 1fr; } } .season-play { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font: inherit; font-size: .82rem; font-weight: 700; color: #1B1204; background: var(--live); border: 0; border-radius: 999px; padding: .3rem .75rem; cursor: pointer; } .season-play svg { width: 16px; height: 16px; } .season-play:hover { background: #FFC56E; } /* ===== The board's main switch and RCD (end of the services grid) ===== */ .board .breaker::after { background: var(--ok); box-shadow: 0 0 6px rgba(83,199,138,.7); transition: background .15s, box-shadow .15s; } .board .breaker { transition: filter .2s, opacity .2s; } .board .breaker.dead { filter: grayscale(.6) brightness(.72); } .board .breaker.dead::after { background: #9AA4AD; box-shadow: none; } .board .breaker.dead::before { background: #6B7782; } .board .breaker.pop::after { box-shadow: 0 0 14px rgba(83,199,138,1); } .board-filler { display: flex; align-items: center; gap: 1.2rem; background: linear-gradient(180deg, #16222E, #111B25); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; min-height: 170px; } .ms-modules { display: flex; gap: .45rem; flex-shrink: 0; } .ms-mod { position: relative; width: 74px; padding: 0; border: 0; background: none; cursor: pointer; } .ms-mod svg { width: 74px; height: auto; display: block; } .ms-rcd { cursor: default; } .ms-rcd-lever { padding: 0; border: 0; background: none; cursor: pointer; display: block; } .ms-body { fill: #E8ECEF; stroke: #C9D1D8; } .ms-lever { transition: transform .22s cubic-bezier(.3,1.4,.5,1); transform-box: fill-box; } .ms-lever.red { fill: #C4302B; } .ms-lever.blue { fill: #2F6FD6; } .ms-main.off .ms-lever, .ms-rcd-lever.off .ms-lever { transform: translateY(28px); } .ms-main.off .ms-lever { fill: #7A2A26; } .ms-t { font: 800 10px var(--font); fill: #1A2530; text-anchor: middle; } .ms-io { font: 600 9px var(--font); fill: #5A6672; text-anchor: middle; } .ms-test { position: absolute; left: 50%; top: 68%; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid #9A8A20; background: #E6CF3A; color: #1B1204; font: 800 12px var(--font); cursor: pointer; box-shadow: 0 2px 0 #9A8A20; } .ms-test:active { transform: translate(-50%, -46%); box-shadow: none; } .ms-mod:focus-visible, .ms-test:focus-visible, .ms-rcd-lever:focus-visible { outline: 2px solid var(--neutral); outline-offset: 2px; border-radius: 6px; } .ms-main:hover .ms-body, .ms-rcd-lever:hover .ms-body { stroke: var(--live); stroke-width: 3; } .ms-copy h3 { font-size: 1.12rem; margin-bottom: .3rem; } .ms-status { font-size: .92rem; color: var(--muted); margin-bottom: .5rem; min-height: 2.8em; } .ms-status a { font-weight: 600; } .ms-copy > a { font-weight: 700; font-size: .92rem; } .board-filler.tripped { border-color: rgba(255,107,94,.6); } .board.powered-off { box-shadow: inset 0 0 0 9999px rgba(0,0,0,.18); } .board-filler.narrow { flex-direction: column; align-items: flex-start; } .cal-std { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); margin-top: .15rem; } .town-quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.2rem 1.3rem; } .town-quote h3 { margin-bottom: .3rem; } .kl-link { max-width: 760px; } .circuit-backdrop { opacity: .16; } .circuit-backdrop svg { width: 100%; height: auto; } .sj-art svg { width: 100%; height: auto; display: block; border-radius: var(--radius-l); } .sj-lab { fill: var(--muted); font: 700 14px var(--font); } .sj-socket { animation: sjmove 5s ease-in-out infinite; } @keyframes sjmove { 0%, 18% { transform: translate(40px, 206px); } 45%, 82% { transform: translate(143px, 105px); } 100% { transform: translate(40px, 206px); } } .sj-chase { stroke-dashoffset: 0; animation: dash 1.2s linear infinite; } .sj-old { animation: sjold 5s ease-in-out infinite; } .sj-new { animation: sjnew 5s ease-in-out infinite; } @keyframes sjold { 0%, 30% { opacity: 1; } 40%, 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes sjnew { 0%, 30% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sj-socket { animation: none; transform: translate(143px, 105px); } .sj-old { animation: none; opacity: 0; } .sj-new { animation: none; opacity: 1; } } /* ===== Outdoor garden scene ===== */ .garden { grid-template-columns: 1.75fr 1fr; } .garden-scene { display: flex; flex-direction: column; } .garden-svg .gl { opacity: 0; transition: opacity .45s ease; mix-blend-mode: screen; pointer-events: none; } .garden-svg .gl[data-l="sec"] { transition: opacity .12s ease; } .garden-svg .bulb { fill: #7A8692; transition: fill .3s, filter .3s; } .garden-svg .bulb.lit { fill: #FFE6B2; filter: drop-shadow(0 0 5px #FFD29A); } .garden-svg .gd-night { transition: opacity .25s; pointer-events: none; } .garden-svg .gd-stars circle { animation: twinkle 3s ease-in-out infinite; } .garden-svg .gd-stars, .garden-svg .gd-moon, .garden-svg .gd-sun, .garden-svg .gd-moths, .garden-svg .gd-steam, .garden-svg .gd-bubbles { transition: opacity .4s; } .garden-svg .gd-bubbles circle { fill: #E6F6FF; animation: bubble 1.6s ease-in infinite; transform-box: fill-box; } .garden-svg .gd-bubbles circle:nth-child(2) { animation-delay: -.5s; } .garden-svg .gd-bubbles circle:nth-child(3) { animation-delay: -1s; } .garden-svg .gd-bubbles circle:nth-child(4) { animation-delay: -1.3s; } .garden-svg .gd-bubbles circle:nth-child(5) { animation-delay: -.8s; } @keyframes bubble { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-14px); opacity: 0; } } .garden-svg .gd-steam path { animation: steam 4s ease-in-out infinite; filter: blur(2px); } .garden-svg .gd-steam path:nth-child(2) { animation-delay: -1.3s; } .garden-svg .gd-steam path:nth-child(3) { animation-delay: -2.6s; } @keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } } .garden-svg .gd-ripples ellipse { transform-box: fill-box; transform-origin: center; animation: ripple 3.2s ease-out infinite; } .garden-svg .gd-ripples ellipse:nth-child(2) { animation-delay: -1.1s; } .garden-svg .gd-ripples ellipse:nth-child(3) { animation-delay: -2.2s; } @keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(3); opacity: 0; } } .garden-svg.raining .gd-ripples ellipse { animation-duration: 1.1s; } .garden-svg .gd-wire, .garden-svg .bulb[data-l="festoon"] { transform-box: view-box; transform-origin: 270px 226px; animation: sway 6s ease-in-out infinite; } @keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.6deg); } } .garden-svg .moth { animation: moth 4s ease-in-out infinite; transform-box: fill-box; } @keyframes moth { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(6px, -5px); } 50% { transform: translate(-4px, -9px); } 75% { transform: translate(-7px, 3px); } } .garden-svg .gd-rain { opacity: 0; transition: opacity .4s; pointer-events: none; } .garden-svg .gd-rain line { animation: rainfall .7s linear infinite; } @keyframes rainfall { from { transform: translate(0, -40px); } to { transform: translate(-14px, 40px); } } .garden-svg.raining .gd-rain { opacity: .75; } .garden-svg .gd-ip { opacity: 0; transition: opacity .4s .2s; pointer-events: none; } .garden-svg.raining .gd-ip { opacity: 1; } .garden-svg .gd-ip rect { fill: #0D151E; stroke: #53C78A; stroke-width: 1.5; } .garden-svg .gd-ip text { fill: #53C78A; font: 800 11px var(--font); text-anchor: middle; } .garden-svg .gd-pirzone { opacity: 0; pointer-events: none; } .garden-svg .gd-pirzone.scan { animation: pirscan 1.5s ease-in-out forwards; } .garden-svg .gd-pirsweep { transform-box: view-box; transform-origin: 70px 74px; } .garden-svg .gd-pirzone.scan .gd-pirsweep { animation: sweep 1.5s ease-in-out forwards; } @keyframes pirscan { 0% { opacity: 0; } 20% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } } @keyframes sweep { from { transform: rotate(-24deg); } to { transform: rotate(14deg); } } .garden-svg .gd-flash { pointer-events: none; mix-blend-mode: screen; } .gd-controls { display: grid; gap: .8rem; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line); } .gd-controls .seg { margin: 0; } .gd-controls .filter { font-size: .86rem; padding: .4rem .8rem; } .gd-lights { display: flex; flex-wrap: wrap; gap: .35rem; } .gd-lights .chip span { font-size: .82rem; padding: .3rem .7rem; } .gd-actions .btn { padding: .55rem 1rem; font-size: .9rem; } .gd-actions .btn:disabled { opacity: .6; } .gd-status { min-height: 2.6em; } @media (prefers-reduced-motion: reduce) { .garden-svg .gd-rain line, .garden-svg .gd-bubbles circle, .garden-svg .gd-steam path, .garden-svg .gd-ripples ellipse, .garden-svg .moth, .garden-svg .gd-wire, .garden-svg .bulb, .garden-svg .gd-stars circle { animation: none !important; } } @media (max-width: 900px) { .garden { grid-template-columns: 1fr; } } /* ===== Make the troubleshooter hook stand out: a power-blip flicker ===== */ .help-chip.flicker { gap: .6rem; padding: .6rem 1.1rem .6rem .8rem; font-size: 1rem; border: 1px solid rgba(255,181,71,.55); background: linear-gradient(90deg, rgba(255,181,71,.12), rgba(255,181,71,.03)); animation: chipglow 2.6s ease-in-out infinite; } .help-chip.flicker b { color: var(--live); } .help-chip.flicker:hover { border-color: var(--live); animation: none; } .hc-bulb { width: 24px; height: 24px; flex-shrink: 0; color: #FFE2A8; } .hc-bulb.sm { width: 15px; height: 15px; vertical-align: -3px; margin-right: .3rem; color: #FFFFFF; } .hc-bulb .bulb-glass { fill: #FFE2A8; filter: drop-shadow(0 0 6px rgba(255,210,140,.9)); } .hc-bulb.sm .bulb-glass { fill: #FFFFFF; filter: none; } .flicker .hc-bulb .bulb-glass { animation: blip 6s steps(1, end) infinite; } .flicker:hover .hc-bulb .bulb-glass { animation: none; } @keyframes blip { 0%, 84%, 100% { opacity: 1; } 86% { opacity: .15; } 88% { opacity: 1; } 90% { opacity: .1; } 93% { opacity: .9; } 95% { opacity: .2; } 97% { opacity: 1; } } @keyframes chipglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,181,71,0); } 50% { box-shadow: 0 0 18px 2px rgba(255,181,71,.28); } } .promo.promo-alert { border-color: rgba(255,107,94,.55); animation: alertglow 2.8s ease-in-out infinite; } .promo.promo-alert:hover { animation: none; border-color: var(--danger); } .promo.promo-alert .promo-k { background: var(--danger); color: #FFFFFF; display: inline-flex; align-items: center; } @keyframes alertglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,94,0); } 50% { box-shadow: 0 0 22px 2px rgba(255,107,94,.25); } } @media (prefers-reduced-motion: reduce) { .help-chip.flicker, .promo.promo-alert, .flicker .hc-bulb .bulb-glass { animation: none !important; } } /* ===== Fast dial hub ===== */ .wa-float { display: none !important; } .hub-fab { position: fixed; right: 1.2rem; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.2rem .85rem 1rem; border: 0; border-radius: 999px; background: linear-gradient(180deg, #FF7A6E, #E24A3E); color: #FFFFFF; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 0 #9E2A22, 0 10px 24px rgba(0,0,0,.45); transition: transform .08s, box-shadow .08s; animation: hubpulse 2.6s ease-in-out infinite; } .hub-fab svg { width: 20px; height: 20px; } .hub-fab:hover { animation: none; filter: brightness(1.05); } .hub-fab:active { transform: translateY(5px); box-shadow: 0 1px 0 #9E2A22, 0 4px 10px rgba(0,0,0,.4); } .hub-fab:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; } @keyframes hubpulse { 0%, 100% { box-shadow: 0 6px 0 #9E2A22, 0 10px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(255,107,94,.5); } 50% { box-shadow: 0 6px 0 #9E2A22, 0 10px 24px rgba(0,0,0,.45), 0 0 0 10px rgba(255,107,94,0); } } body.hub-on .hub-fab { animation: none; } .hub-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(4,8,12,.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; } .hub-scrim.open { opacity: 1; } .hub { position: fixed; z-index: 71; right: 1.2rem; bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px)); width: min(440px, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow: auto; background: linear-gradient(180deg, #1C2A38, #141F2A); border: 1px solid #2F4256; border-radius: 22px; padding: 1.1rem 1.1rem 1rem; box-shadow: 0 24px 60px rgba(0,0,0,.6); opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right; transition: opacity .2s, transform .2s cubic-bezier(.2,.9,.3,1.2); } .hub.open { opacity: 1; transform: none; } .hub-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; } .hub-head h2 { font-size: 1.35rem; margin: 0; } .hub-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .hub-999 { background: rgba(255,107,94,.12); border: 1px solid rgba(255,107,94,.5); border-radius: 12px; padding: .55rem .8rem; font-size: .92rem; margin: 0 0 .8rem; } .hub-999 a { color: #FFFFFF; font-weight: 800; } .hub-keys { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .hub-key { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6rem; align-items: center; padding: .8rem .8rem .75rem; border-radius: 16px; text-decoration: none; color: var(--text); background: linear-gradient(180deg, #2A3B4C, #22313F); border: 1px solid #3A5066; box-shadow: 0 4px 0 #101A24, inset 0 1px 0 rgba(255,255,255,.08); transition: transform .07s, box-shadow .07s, border-color .15s; } .hub-key:hover { border-color: var(--live); color: var(--text); } .hub-key:active, .hub-key.pressed { transform: translateY(4px); box-shadow: 0 0 0 #101A24, inset 0 2px 6px rgba(0,0,0,.35); } .hub-key:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; } .hub-key .hk-i { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); } .hub-key .hk-i svg { width: 22px; height: 22px; } .hub-key b { font-size: .98rem; line-height: 1.2; } .hub-key small { color: var(--muted); font-size: .78rem; } .hub-key .hk-n { position: absolute; top: .4rem; right: .55rem; font-size: .7rem; font-weight: 800; color: var(--muted); } .hub-key.k-carl { background: linear-gradient(180deg, #FFC56E, #FFB547); color: #1B1204; border-color: #FFB547; box-shadow: 0 4px 0 #A8711F; } .hub-key.k-carl small, .hub-key.k-carl .hk-n { color: #4A3410; } .hub-key.k-carl .hk-i { background: rgba(0,0,0,.08); } .hub-key.k-carl:active { box-shadow: 0 0 0 #A8711F, inset 0 2px 6px rgba(0,0,0,.25); } .hub-key.k-wa .hk-i { color: #25D366; } .hub-key.k-gas .hk-i, .hub-key.k-dno .hk-i { color: #9CC8FF; } .hub-foot { margin: .7rem 0 0; text-align: center; } @media (max-width: 860px) { .hub-fab { display: none; } .mobile-bar { grid-template-columns: 1fr 1fr 1fr 1fr !important; } .mobile-bar .h { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; border: 0; background: #E24A3E; color: #FFFFFF; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; } .mobile-bar .h svg { width: 22px; height: 22px; } .hub { right: .6rem; left: .6rem; width: auto; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); } .hub-foot { display: none; } } @media (min-width: 861px) { .mobile-bar .h { display: none; } } @media (prefers-reduced-motion: reduce) { .hub-fab { animation: none; } .hub, .hub-scrim { transition: none; } } /* ===== Tactile switch controls ===== */ .rocker { background: linear-gradient(180deg, #24333F, #1C2832); border-color: #33475A; box-shadow: 0 3px 0 #0E161E, inset 0 1px 0 rgba(255,255,255,.06); transition: transform .07s, box-shadow .07s, border-color .2s, background .2s; } .rocker:active { transform: translateY(3px); box-shadow: 0 0 0 #0E161E, inset 0 2px 5px rgba(0,0,0,.35); } .rocker .pip { width: 18px; height: 28px; border-radius: 5px; background: linear-gradient(180deg, #E9EEF3, #C9D1D8); border: 1px solid #9AA9BA; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); perspective: 60px; } .rocker .pip::after { left: 2px; right: 2px; height: 12px; bottom: 2px; border-radius: 3px; background: linear-gradient(180deg, #F7F9FB, #D5DCE2); box-shadow: 0 2px 2px rgba(0,0,0,.3); transform-origin: center bottom; transition: bottom .2s cubic-bezier(.3,1.5,.5,1), background .2s, box-shadow .2s; } .rocker[aria-pressed="true"] { background: linear-gradient(180deg, #2E3A2A, #232E22); border-color: var(--live-deep); } .rocker[aria-pressed="true"] .pip::after { bottom: 13px; background: linear-gradient(180deg, #FFD08A, #FFB547); box-shadow: 0 0 10px rgba(255,181,71,.8), 0 -2px 2px rgba(0,0,0,.25); } .filter, .tb-opt, .hc-ans { transition: transform .07s, box-shadow .07s, background .15s, border-color .15s, color .15s; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .filter:active, .tb-opt:active, .hc-ans:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); } .chip span { transition: transform .07s, box-shadow .07s, background .15s; box-shadow: 0 2px 0 rgba(0,0,0,.3); } .chip input:active + span, .chip:active span { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.35); } .ms-mod:active svg, .ms-rcd-lever:active svg { transform: translateY(2px); } .ms-mod svg, .ms-rcd-lever svg { transition: transform .07s; } @media (prefers-reduced-motion: reduce) { .rocker .pip::after { transition: none; } } @media (max-width: 420px) { .hub-key { padding: .65rem .6rem; column-gap: .45rem; } .hub-key .hk-i { width: 32px; height: 32px; border-radius: 10px; } .hub-key .hk-i svg { width: 18px; height: 18px; } .hub-key b { font-size: .9rem; } } /* ===== Services finder: every card is a link ===== */ .svc-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; } .svc-list li { background: none; border: 0; padding: 0; } .svc-card { position: relative; height: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: .9rem; row-gap: .7rem; padding: 1.05rem 1.1rem 1rem; border-radius: var(--radius-m); background: linear-gradient(180deg, #172430, #131E28); border: 1px solid var(--line); border-left: 4px solid #5E7890; text-decoration: none; color: var(--text); box-shadow: 0 3px 0 #0B131A; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; } .svc-card.c-smart { border-left-color: var(--live); } .svc-card.c-business { border-left-color: var(--neutral); } .svc-card:hover, .svc-card:focus-visible { transform: translateY(-3px); border-color: rgba(255,181,71,.6); box-shadow: 0 8px 20px rgba(0,0,0,.35); color: var(--text); background: linear-gradient(180deg, #1B2A38, #16222E); } .svc-card:active { transform: translateY(1px); box-shadow: 0 1px 0 #0B131A; } .svc-ic { grid-row: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,181,71,.1); color: var(--live); } .c-business .svc-ic { background: rgba(91,155,255,.12); color: var(--neutral); } .c-home .svc-ic { background: rgba(255,255,255,.06); color: #DDE6EE; } .svc-ic svg { width: 24px; height: 24px; } .svc-txt { display: block; min-width: 0; } .svc-txt b { display: block; font-size: 1.02rem; line-height: 1.25; margin: .1rem 0 .3rem; padding-right: 4.2rem; } .svc-d { display: block; color: var(--muted); font-size: .9rem; line-height: 1.45; } .svc-kind { display: block; margin-top: .45rem; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: #7E93A8; } .svc-go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .9rem; color: var(--live); border-top: 1px solid var(--line); padding-top: .65rem; } .svc-go svg { width: 14px; height: 14px; transition: transform .15s; } .svc-card:hover .svc-go svg { transform: translateX(3px); } .svc-badge { position: absolute; top: .7rem; right: .7rem; font-size: .7rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; } .svc-badge.b-try { background: rgba(83,199,138,.15); color: #53C78A; border: 1px solid rgba(83,199,138,.45); } .svc-badge.b-pop { background: var(--live); color: #1B1204; } .svc-badge.b-soon { background: var(--raised); color: var(--muted); border: 1px solid var(--line); } @media (prefers-reduced-motion: reduce) { .svc-card, .svc-go svg { transition: none; } } /* the older ".svc-list span / b" rules are more specific, so restate the card colours here */ .svc-list .svc-card b { color: var(--text); font-weight: 800; } .svc-list .svc-card .svc-d { color: #A9B6C3; font-size: .9rem; } .svc-list .svc-card .svc-kind { color: #7E93A8; font-size: .74rem; } .svc-list .svc-card .svc-go { color: var(--live); font-size: .9rem; } .svc-list .svc-card .svc-ic { color: #DDE6EE; } .svc-list .svc-card.c-smart .svc-ic { color: var(--live); } .svc-list .svc-card.c-business .svc-ic { color: var(--neutral); } .svc-list .svc-card .svc-badge { font-size: .7rem; } .svc-list .svc-card .svc-badge.b-try { color: #53C78A; } .svc-list .svc-card .svc-badge.b-pop { color: #1B1204; } .svc-list .svc-card .svc-badge.b-soon { color: var(--muted); } /* ===== Services page: hero tiles ===== */ .svc-hero .lede { max-width: 640px; } .hero-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-top: 1.6rem; } .hero-tile { display: grid; justify-items: center; gap: .35rem; padding: 1.1rem .6rem 1rem; border-radius: 16px; border: 1px solid #33475A; background: linear-gradient(180deg, #1D2B38, #16222D); color: var(--text); font: inherit; cursor: pointer; text-align: center; box-shadow: 0 4px 0 #0B131A; transition: transform .12s, box-shadow .12s, border-color .15s; } .hero-tile:hover { transform: translateY(-3px); border-color: var(--live); box-shadow: 0 8px 18px rgba(0,0,0,.35); } .hero-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #0B131A; } .ht-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,181,71,.12); color: var(--live); } .ht-ic svg { width: 28px; height: 28px; } .hero-tile b { font-size: .98rem; line-height: 1.2; } .ht-n { font-size: .78rem; color: var(--muted); } @media (max-width: 900px) { .hero-tiles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 460px) { .hero-tiles { grid-template-columns: repeat(2, 1fr); } } /* ===== Services page: pick a room ===== */ .rx { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.4rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .rx-svg { width: 100%; height: auto; display: block; } .rx-room { cursor: pointer; outline: none; transition: opacity .25s; } .rx-hit { fill: rgba(255,255,255,.02); stroke: transparent; stroke-width: 3; transition: fill .2s, stroke .2s; } .rx-room:hover .rx-hit, .rx-room:focus-visible .rx-hit { fill: rgba(255,181,71,.1); stroke: rgba(255,181,71,.6); } .rx-room.active .rx-hit { fill: rgba(255,181,71,.2); stroke: var(--live); } .rx.has-active .rx-room:not(.active):not(:hover) { opacity: .55; } .rx-glow { opacity: .35; transition: opacity .25s; } .rx-room.active .rx-glow { opacity: 1; filter: drop-shadow(0 0 4px #FFD29A); } .rx-lab { fill: #DDE6EE; font: 800 13px var(--font); text-anchor: middle; pointer-events: none; } .rx-room.active .rx-lab { fill: var(--live); } .rx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; } .rx-chip { font: inherit; font-size: .82rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .rx-chip[aria-pressed="true"] { background: var(--live); color: #1B1204; border-color: var(--live); } .rx-panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1.1rem 1.1rem .9rem; } .rx-panel.in { animation: fadeUp .3s ease; } .rx-panel h3 { font-size: 1.35rem; margin-bottom: .2rem; } .rx-panel p { color: var(--muted); margin-bottom: .8rem; } .rx-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .rx-panel a { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: 0 2px 0 #0B131A; transition: transform .12s, border-color .15s; } .rx-panel a:hover { border-color: var(--live); transform: translateX(3px); color: var(--text); } .rx-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255,181,71,.12); color: var(--live); } .rx-ic svg { width: 20px; height: 20px; } .rx-panel b { display: block; font-size: .95rem; } .rx-panel small { color: var(--live); font-weight: 700; font-size: .78rem; } @media (max-width: 900px) { .rx { grid-template-columns: 1fr; } } /* ===== Services page: finder bar ===== */ .finder-bar { display: grid; gap: .8rem; margin-bottom: .6rem; } .finder-bar .filters { margin: 0; } .finder-search input { font-size: 1.05rem; padding: .85rem 1rem; } .finder-search { max-width: 520px; margin: 0; } /* ===== Services page: how it works ===== */ .steps4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; counter-reset: s4; } .steps4::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 3px; background: linear-gradient(90deg, var(--live), var(--live)) no-repeat; background-size: 0% 100%; background-color: var(--raised); transition: background-size 1.4s ease; border-radius: 2px; } .steps4.in::before { background-size: 100% 100%; } .steps4 li { position: relative; display: grid; justify-items: center; text-align: center; gap: .35rem; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; } .steps4.in li { opacity: 1; transform: none; } .steps4.in li:nth-child(2) { transition-delay: .3s; } .steps4.in li:nth-child(3) { transition-delay: .6s; } .steps4.in li:nth-child(4) { transition-delay: .9s; } .s4-ic { position: relative; z-index: 1; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 3px solid var(--live); color: var(--live); box-shadow: 0 0 0 6px var(--bg); } .s4-ic svg { width: 30px; height: 30px; } .steps4 b { font-size: 1.05rem; } .steps4 li > span:last-child { color: var(--muted); font-size: .92rem; max-width: 220px; } @media (max-width: 760px) { .steps4 { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; } .steps4::before { display: none; } } /* ===== Services page: compact feature panels ===== */ .two-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .feature-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.5rem; scroll-margin-top: 110px; } .fp-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(91,155,255,.14); color: var(--neutral); margin-bottom: .8rem; } .fp-ic svg { width: 32px; height: 32px; } .feature-panel h2 { font-size: 1.5rem; margin-bottom: .4rem; } .feature-panel p { color: #CBD5DF; } .fp-points { list-style: none; padding: 0; margin: .8rem 0 1.1rem; display: flex; flex-wrap: wrap; gap: .4rem; } .fp-points li { font-size: .82rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; background: rgba(83,199,138,.12); color: #53C78A; border: 1px solid rgba(83,199,138,.35); } @media (max-width: 820px) { .two-panels { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .steps4 li { opacity: 1; transform: none; transition: none; } .steps4::before { transition: none; background-size: 100% 100%; } } @media (max-width: 600px) { .rx-lab { font-size: 27px; paint-order: stroke; stroke: #0D151E; stroke-width: 5px; } .rx { padding: .8rem; } } .wm-near .wm-dot { fill: var(--bg); stroke: var(--live); stroke-width: 2.5; stroke-dasharray: 3 2; } .nearby { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; background: linear-gradient(135deg, rgba(255,181,71,.08), rgba(91,155,255,.06)); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.2rem, 3vw, 2rem); } .nearby-ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,181,71,.14); color: var(--live); } .nearby-ic svg { width: 30px; height: 30px; } .nearby h2 { margin-bottom: .4rem; } .nearby p { color: #CBD5DF; max-width: 720px; } .nearby-towns { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 1.1rem; } .nearby-towns span { font-size: .85rem; font-weight: 700; padding: .3rem .75rem; border-radius: 999px; border: 1px dashed rgba(255,181,71,.6); color: var(--text); } @media (max-width: 600px) { .nearby { grid-template-columns: 1fr; } } /* ===== CCTV and alarms: the night scene ===== */ .sec { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .sec-stage { position: relative; } .sec-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .sec-l { opacity: 0; transition: opacity .35s; pointer-events: none; } .sec-svg.has-lights .l-lights, .sec-svg.has-cctv .l-cctv, .sec-svg.has-door .l-door, .sec-svg.has-alarm .l-alarm { opacity: 1; } .sec-flood { opacity: 0; transition: opacity .12s; mix-blend-mode: screen; } .sec-bulb { fill: #7A8692; } .sec-svg.flood-on .sec-flood { opacity: 1; } .sec-svg.flood-on .sec-bulb { fill: #FFFFFF; filter: drop-shadow(0 0 6px #FFFFFF); } .sec-camcone { opacity: .25; mix-blend-mode: screen; transition: opacity .3s; } .sec-svg.cam-detect .sec-camcone { opacity: .9; animation: blink 1s ease-in-out infinite; } .sec-camled { fill: #53C78A; } .sec-svg.cam-detect .sec-camled { fill: #FF3B30; animation: blink .6s steps(1) infinite; } .sec-ring { opacity: 0; transform-box: fill-box; transform-origin: center; } .sec-dbbtn { fill: #5BB8FF; } .sec-svg.ring .sec-ring { animation: dbring 1.2s ease-out 2; } @keyframes dbring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.4); } } .sec-strobe { fill: #2A5A8A; } .sec-strobeglow, .sec-soundwaves { opacity: 0; } .sec-svg.alarm-on .sec-strobe { animation: strobe .35s steps(1) infinite; } .sec-svg.alarm-on .sec-strobeglow { animation: strobeglow .35s steps(1) infinite; } .sec-svg.alarm-on .sec-soundwaves { animation: blink .5s ease-in-out infinite; } @keyframes strobe { 0% { fill: #5BB8FF; } 50% { fill: #E9F6FF; } } @keyframes strobeglow { 0% { opacity: 1; } 50% { opacity: .2; } } .sec-svg.alarm-on { animation: alarmflash .7s steps(1) 4; } @keyframes alarmflash { 50% { filter: brightness(1.25) hue-rotate(-10deg); } } .sec-bbtext { fill: #3A2170; font: 900 10px var(--font); text-anchor: middle; } .sec-door { transition: transform .5s; transform-box: fill-box; transform-origin: left; } .sec-svg.door-open .sec-door { transform: scaleX(.35); } .sec-burglar.walking .l1 { animation: stride .45s ease-in-out infinite; transform-box: fill-box; transform-origin: top; } .sec-burglar.walking .l2 { animation: stride .45s ease-in-out infinite reverse; transform-box: fill-box; transform-origin: top; } @keyframes stride { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } } .sec-burglar.flee .sb-body { animation: none; } .sec-burglar.gone { opacity: 0; transition: opacity .5s; } .sec-alert { fill: #FFFFFF; font: 800 22px var(--font); paint-order: stroke; stroke: #05080C; stroke-width: 5px; } .sec-feed { position: absolute; left: 12px; top: 12px; width: 32%; min-width: 150px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0B1218; border: 2px solid #3A4A58; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; pointer-events: none; } .sec-feed.show { opacity: 1; transform: none; } .sf-head { font: 700 10px var(--font); color: #DDE6EE; padding: 4px 6px; background: rgba(0,0,0,.6); display: flex; align-items: center; gap: 5px; } .sf-time { margin-left: auto; color: var(--muted); } .sf-rec { width: 7px; height: 7px; border-radius: 50%; background: #FF3B30; animation: blink 1s steps(1) infinite; } .sf-view { position: relative; height: calc(100% - 20px); background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px), radial-gradient(circle at 50% 60%, #2A3A30, #0B1218); filter: saturate(.2); } .sf-box { position: absolute; left: 38%; top: 22%; width: 22%; height: 62%; border: 2px solid #FF3B30; color: #FF3B30; font: 800 9px var(--font); padding: 2px; opacity: 0; } .sec-feed.detect .sf-box { opacity: 1; animation: blink .8s steps(1) infinite; } .sec-feed.detect .sf-view::after { content: ""; position: absolute; left: 44%; top: 32%; width: 10%; height: 46%; background: #05080C; border-radius: 40% 40% 10% 10%; } .sec-phone { position: absolute; right: 12px; bottom: 12px; width: 210px; border-radius: 16px; background: rgba(18,26,36,.95); border: 1px solid #3A4A58; padding: .55rem .65rem; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; pointer-events: none; } .sec-phone.show { opacity: 1; transform: none; } .sp-app { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; color: var(--muted); } .sp-app svg { width: 14px; height: 14px; } .sp-msg p { margin: .3rem 0 0; font-size: .82rem; font-weight: 600; animation: fadeUp .3s ease; } .sp-msg p:first-child { color: #FFFFFF; } .sp-msg p:not(:first-child) { color: var(--muted); font-size: .74rem; } .sec-side { display: grid; gap: .9rem; align-content: start; } .sec-togs { display: grid; gap: .45rem; } .sec-tog { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; text-align: left; box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: border-color .15s, background .15s, transform .07s; } .sec-tog:active { transform: translateY(2px); } .st-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--muted); } .st-ic svg { width: 18px; height: 18px; } .st-sw { margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--raised); position: relative; transition: background .2s; } .st-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #C9D1D8; transition: transform .2s cubic-bezier(.3,1.5,.5,1); } .sec-tog[aria-pressed="true"] { border-color: var(--live); background: rgba(255,181,71,.08); } .sec-tog[aria-pressed="true"] .st-ic { color: var(--live); background: rgba(255,181,71,.14); } .sec-tog[aria-pressed="true"] .st-sw { background: var(--live); } .sec-tog[aria-pressed="true"] .st-sw::after { transform: translateX(16px); background: #FFFFFF; } .sec-meter { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; font-weight: 700; } .sm-bar { height: 10px; border-radius: 6px; background: var(--raised); overflow: hidden; } .sm-bar i { display: block; height: 100%; width: 0; background: var(--danger); transition: width .4s, background .4s; } .sm-bar[data-level="mid"] i { background: var(--live); } .sm-bar[data-level="high"] i { background: var(--ok); } .sec-out { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .9rem 1rem; } .sec-out h3 { margin-bottom: .3rem; font-size: 1.1rem; } .sec-out.good { border-color: var(--ok); } .sec-out.mid { border-color: var(--live); } .sec-out.bad { border-color: var(--danger); } .sec-out.good h3 { color: #53C78A; } .sec-out.bad h3 { color: var(--danger); } @media (max-width: 960px) { .sec { grid-template-columns: 1fr; } .sec-phone { width: 170px; } } @media (max-width: 520px) { .sec-feed { min-width: 120px; } .sec-phone { right: 6px; bottom: 6px; width: 150px; } } /* ===== Best fit finder ===== */ .bf { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1.1rem, 2.5vw, 1.8rem); } .bf h3 { font-size: 1.05rem; margin: .2rem 0 .6rem; } .bf h3 small { color: var(--muted); font-weight: 500; } .bf .seg { margin: 0 0 1.2rem; } .bf-needs { display: flex; flex-wrap: wrap; gap: .4rem; } .bf-out.in { animation: fadeUp .3s ease; } .bf-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; } .bf-list li { display: flex; gap: .7rem; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; } .bf-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255,181,71,.12); color: var(--live); } .bf-ic svg { width: 20px; height: 20px; } .bf-list b { display: block; } .bf-list span { color: var(--muted); font-size: .9rem; } @media (max-width: 860px) { .bf { grid-template-columns: 1fr; } } /* ===== Camera coverage ===== */ .cov { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .cov-svg { width: 100%; height: auto; display: block; } .cov-t { fill: #9AA9BA; font: 700 13px var(--font); text-anchor: middle; } .cov-cone { fill: rgba(91,184,255,.28); stroke: rgba(91,184,255,.7); stroke-width: 1.5; opacity: 0; transition: opacity .3s; } .cov-cone.on { opacity: 1; } .cov-cams circle { fill: #3A4A58; stroke: #9AA9BA; stroke-width: 2; cursor: pointer; transition: fill .2s; } .cov-cams circle.on { fill: #5BB8FF; stroke: #FFFFFF; } .cov-zones circle { fill: #3A1E1E; stroke: var(--danger); stroke-width: 2; transition: fill .3s, stroke .3s; } .cov-zones text { fill: #FFFFFF; font: 800 12px var(--font); text-anchor: middle; pointer-events: none; } .cov-zones .ok circle { fill: #1E3A2A; stroke: var(--ok); } .cov-side { display: grid; gap: .8rem; align-content: start; } .cov-togs { display: grid; gap: .4rem; } .cov-tog { font: inherit; font-weight: 700; text-align: left; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .cov-tog[aria-pressed="true"] { border-color: #5BB8FF; background: rgba(91,184,255,.1); } .cov-meter { display: flex; align-items: baseline; gap: .5rem; } .cov-pct { font-size: 2rem; color: #5BB8FF; font-variation-settings: "wdth" 118; } .cov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .cov-list li { font-size: .92rem; color: var(--muted); padding-left: 1.4rem; position: relative; } .cov-list li::before { content: "\2715"; position: absolute; left: 0; color: var(--danger); font-weight: 800; } .cov-list li.ok { color: var(--text); } .cov-list li.ok::before { content: "\2713"; color: var(--ok); } @media (max-width: 860px) { .cov { grid-template-columns: 1fr; } } /* ===== Doorbells and door entry ===== */ .de { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .de-modes { margin: 0 0 1rem; } .de-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; } .de-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .de-ring { fill: rgba(127,224,255,.0); } .de-btn { fill: #5BB8FF; } .de-svg.ringing .de-ring { animation: dering 1.4s ease-out; fill: rgba(127,224,255,.5); transform-box: fill-box; transform-origin: center; } @keyframes dering { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .de-visitor { opacity: 0; transition: opacity .4s, transform 1s; } .de-svg.ringing .de-visitor, .de-svg.delivered .de-visitor { opacity: 1; } .de-svg.delivered .de-visitor { transform: translateX(-30px); } .de-svg.gone .de-visitor { opacity: 0; transform: translateX(80px); } .de-phone { width: 230px; margin: 0 auto 1rem; border-radius: 26px; border: 3px solid #3A4A58; background: #0B1218; padding: .6rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .dp-top { font-size: .78rem; font-weight: 800; color: var(--muted); text-align: center; margin-bottom: .4rem; } .dp-screen { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; background: #1A2530; display: grid; place-items: center; overflow: hidden; } .dp-idle { color: var(--muted); font-size: .82rem; } .dp-live { position: absolute; top: 6px; left: 6px; font: 800 .65rem var(--font); color: #FFFFFF; background: #FF3B30; padding: 1px 6px; border-radius: 4px; display: none; } .de-phone.live .dp-screen { background: radial-gradient(circle at 60% 55%, #C98E64 0 12%, transparent 13%), radial-gradient(ellipse at 60% 95%, #C4302B 0 28%, transparent 29%), linear-gradient(#3B6E58, #264A3A); } .de-phone.live .dp-idle { display: none; } .de-phone.live .dp-live { display: block; } .dp-bubble { margin-top: .5rem; font-size: .84rem; background: #1E2E3E; border-radius: 10px; padding: .4rem .6rem; animation: fadeUp .3s ease; } .dp-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: .4rem; margin-top: .5rem; } .dp-btns button { font: inherit; font-size: .78rem; font-weight: 700; padding: .45rem; border-radius: 10px; border: 0; background: var(--live); color: #1B1204; cursor: pointer; } .dp-btns button:disabled { background: var(--raised); color: var(--muted); cursor: default; } .de-ringbtn { width: 100%; justify-content: center; } .de-flat { fill: #1A2530; stroke: #5A6672; stroke-width: 2; transition: fill .2s; } .de-flat.calling { animation: flatcall .5s steps(1) infinite; } @keyframes flatcall { 50% { fill: #FFCF7A; } } .de-gdoor { transition: transform .6s; transform-box: fill-box; transform-origin: left; } .de-svg.open .de-gdoor { transform: scaleX(.12); } .de-lock { fill: #FF6B5E; transition: fill .2s; } .de-svg.open .de-lock { fill: #53C78A; } .de-reader { fill: #5A6672; } .de-svg.fob .de-reader { fill: #53C78A; filter: drop-shadow(0 0 4px #53C78A); } .de-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .5rem 0 .9rem; } .de-key { font: inherit; font-weight: 700; font-size: .88rem; padding: .7rem .4rem; border-radius: 10px; border: 1px solid #5A6672; background: linear-gradient(180deg, #C9D1D8, #A9B3BC); color: #1A2530; cursor: pointer; box-shadow: 0 3px 0 #6E7A86; } .de-key:active { transform: translateY(3px); box-shadow: none; } .de-status { min-height: 2.6em; font-weight: 600; margin-top: .8rem; } @media (max-width: 860px) { .de-grid { grid-template-columns: 1fr; } } /* ===== Smoke, heat and CO alarms ===== */ .sa { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .sa-svg { width: 100%; height: auto; display: block; } .sa-room { fill: #7E93A8; font: 700 12px var(--font); text-anchor: middle; } .sa-tag { fill: #DDE6EE; font: 800 10px var(--font); text-anchor: middle; pointer-events: none; } .sa-alarm { cursor: pointer; outline: none; transition: opacity .3s; } .sa-alarm.off { opacity: 0; pointer-events: none; } .sa-led { fill: #53C78A; } .sa-waves { fill: none; stroke: #FF6B5E; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; } .sa-alarm:hover circle:nth-child(2), .sa-alarm:focus-visible circle:nth-child(2) { stroke: var(--live); stroke-width: 3; } .sa-alarm.sounding .sa-led { fill: #FF3B30; animation: blink .4s steps(1) infinite; } .sa-alarm.sounding .sa-waves { animation: sawave 1s ease-out infinite; } @keyframes sawave { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.4); } } .sa-svg.no-boiler .sa-boiler, .sa-svg.no-burner .sa-burner { opacity: .15; } .sa-flame { animation: blink 1.2s ease-in-out infinite; } .sa-side { display: grid; gap: .6rem; align-content: start; } .sa-side h3 { margin: .4rem 0 0; font-size: 1rem; } .sa-info { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .9rem 1rem; margin-top: .4rem; } .sa-info h3 { margin: 0 0 .3rem; font-size: 1.05rem; } .sa-good { color: #53C78A; font-weight: 700; } .sa-bad { color: var(--danger); font-weight: 700; } @media (max-width: 900px) { .sa { grid-template-columns: 1fr; } } /* ===== Lofts and garages ===== */ .lg { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .lg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1.2rem; display: grid; gap: .8rem; align-content: start; } .lg-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .lg-head h2 { margin: 0; font-size: 1.5rem; } .lg-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .lg-t { fill: #9AA9BA; font: 700 11px var(--font); text-anchor: middle; } .lg-glow, .lg-sockets { opacity: 0; transition: opacity .3s; } .lg-svg.lit .lg-glow { opacity: 1; } .lg-svg.lit .lg-lights rect { fill: #FFF3D6; filter: drop-shadow(0 0 6px #FFE2B0); } .lg-svg.lit { background: none; } .lg-svg.lit .lg-rocker { fill: #FFB547; } .lg-svg.show-sockets .lg-sockets { opacity: 1; } .lg-door { transform-box: view-box; transform-origin: 260px 140px; transition: transform 1.2s ease-in-out; } .lg-svg.open .lg-door { transform: scaleY(.04); } .lg-gglow { transition: opacity .6s .6s; } .lg-svg.open .lg-gglow { opacity: .18; } .lg-motorled { fill: #8A96A2; } .lg-svg.open .lg-motorled { fill: #53C78A; } .lg-gsock, .lg-gev { opacity: 0; transition: opacity .3s; } .lg-svg.show-gsock .lg-gsock, .lg-svg.show-gev .lg-gev { opacity: 1; } .lg-opts { display: flex; flex-wrap: wrap; gap: .4rem; } @media (max-width: 900px) { .lg { grid-template-columns: 1fr; } } /* ===== Solar ===== */ .solar-badges { display: grid; gap: .6rem; align-self: center; } .sb-item { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; } .sb-item svg { grid-row: span 2; width: 34px; height: 34px; color: var(--live); } .sb-item span { color: var(--muted); font-size: .9rem; } .sd { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .sd-stage { position: relative; } .sd-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); --glint: .5; } .sd-slot { cursor: pointer; outline: none; } .sd-cell { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.35); stroke-width: 1.2; stroke-dasharray: 4 3; transition: fill .15s; } .sd-slot:hover .sd-cell, .sd-slot:focus-visible .sd-cell { fill: rgba(255,181,71,.25); stroke: var(--live); } .sd-panel { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; transition: opacity .2s, transform .2s cubic-bezier(.3,1.5,.5,1); pointer-events: none; } .sd-panel rect { fill: url(#sdpanel); stroke: #C9D1D8; stroke-width: 1.5; } .sd-panel path { stroke: rgba(255,255,255,.35); stroke-width: 1; } .sd-slot.on .sd-panel { opacity: 1; transform: none; filter: brightness(calc(.8 + var(--glint) * .5)); } .sd-dir { fill: #FFFFFF; font: 800 11px var(--font); text-anchor: middle; } .sd-hint { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); background: rgba(13,21,30,.85); color: #FFFFFF; font-weight: 700; padding: .5rem .9rem; border-radius: 999px; pointer-events: none; } .sd-hint[hidden] { display: none; } .sd-side { display: grid; gap: .7rem; align-content: start; } .sd-side h3 { font-size: .95rem; color: var(--muted); font-weight: 600; margin: 0; } .sd-side .seg { margin: 0; } .sd-side .filter { font-size: .84rem; padding: .4rem .75rem; } .sd-stats { margin: .2rem 0 0; } .sd-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--raised); } .sd-used { background: var(--live); transition: width .3s; } .sd-exp { background: #5BB8FF; transition: width .3s; } .sd-splittxt { margin: 0; } @media (max-width: 960px) { .sd { grid-template-columns: 1fr; } } /* ===== Outdoor kitchen planner ===== */ .ok { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .ok-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .ok-app { opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; } .ok-app.on { opacity: 1; transform: none; } .ok-g { mix-blend-mode: screen; } .ok-cable { stroke: #3A4A58; stroke-dasharray: 10 8; transition: stroke .3s; } .ok-svg.live .ok-cable { stroke: var(--live); animation: dash 1s linear infinite; filter: drop-shadow(0 0 4px rgba(255,181,71,.7)); } .ok-smoke path { animation: steam 3s ease-in-out infinite; } .ok-smoke path:nth-child(2) { animation-delay: -1.5s; } .ok-fire { animation: blink 1s ease-in-out infinite; } .ok-heat ellipse { animation: blink 1.6s ease-in-out infinite; } .ok-bulbs circle { filter: drop-shadow(0 0 4px #FFD29A); } .ok-lab { fill: #1A2530; font: 700 9px var(--font); text-anchor: middle; } text.ok-lab[text-anchor="start"] { fill: #E6CF3A; font-size: 10px; } .ok-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; } .ok-chip { font: inherit; font-size: .82rem; font-weight: 700; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.35); } .ok-chip[aria-pressed="true"] { background: var(--live); color: #1B1204; border-color: var(--live); } .ok-side { display: grid; gap: .8rem; align-content: start; } .ok-meter { display: grid; gap: .4rem; } .ok-meter b { font-size: 1.8rem; font-variation-settings: "wdth" 118; display: block; } .ok-meter span { color: var(--muted); font-size: .85rem; } .ok-bar { height: 10px; border-radius: 6px; background: var(--raised); overflow: hidden; } .ok-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ok), var(--live), var(--danger)); background-size: 300px 100%; transition: width .4s; } .ok-supply, .ok-reqs { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .8rem 1rem; } .ok-supply h3, .ok-reqs h3 { font-size: 1rem; margin-bottom: .3rem; } .ok-rec { margin: 0; } @media (max-width: 960px) { .ok { grid-template-columns: 1fr; } } .sec-stage, .sd-stage, .ok-stage, .sa-stage, .de-stage, .cov-stage { align-self: start; } /* ===== Services mega menu ===== */ .header-inner { position: relative; } .nav .has-sub.mega-host { position: static; } .mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } .mega-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--live); } .mega-h svg { width: 18px; height: 18px; flex-shrink: 0; } .mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .mega-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); } .mega-foot a { font-weight: 700 !important; } .mega-foot a:first-child { color: var(--live) !important; } @media (min-width: 1101px) { .nav .sub.mega { left: 0; right: 0; top: 100%; width: auto; min-width: 0; padding: 1.3rem 1.5rem 1.1rem; border-radius: 0 0 var(--radius-l) var(--radius-l); } .nav .has-sub.mega-host:hover > .sub.mega, .nav .has-sub.mega-host:focus-within > .sub.mega { display: block; } .nav .sub.mega .mega-col a { display: block; padding: .42rem .6rem; border-radius: 8px; color: var(--text); font-weight: 600; } .nav .sub.mega .mega-col a:hover, .nav .sub.mega .mega-col a:focus-visible { background: rgba(255,181,71,.1); color: var(--live); } .nav .has-sub.mega-host::after { left: 0; right: 0; } } @media (max-width: 1100px) { .nav .sub.mega { display: block; } .mega-cols { grid-template-columns: 1fr; gap: .7rem; } .mega-h { margin: .5rem 0 .2rem .8rem; } .mega-foot { flex-direction: column; gap: 0; border-top: 0; margin-top: .2rem; padding-top: 0; } .mega-foot a { padding: .5rem .8rem; } } /* ===== Home page board: compact breaker modules in labelled circuits ===== */ .board.cu2 { display: grid; grid-template-columns: 230px 1fr; gap: 1.2rem; align-items: start; } .cu2-main .board-filler { flex-direction: column; align-items: flex-start; min-height: 0; height: 100%; padding: 1.1rem; } .cu2-main .ms-copy h3 { font-size: 1.05rem; } .cu2-main .ms-status { font-size: .86rem; min-height: 0; } .cu2-rows { display: grid; gap: .7rem; } .cu2-row { display: grid; grid-template-columns: 150px 1fr; gap: .8rem; align-items: center; padding: .55rem .6rem; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.05); } .cu2-lab { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #AAB8C6; background: #E8ECEF; color: #1A2530; padding: .35rem .55rem; border-radius: 6px; box-shadow: inset 0 0 0 1px #C9D1D8; } .cu2-lab svg { width: 16px; height: 16px; flex-shrink: 0; color: #3A2170; } .cu2-mods { display: flex; flex-wrap: wrap; gap: .45rem; } .mod { position: relative; width: 104px; min-height: 104px; display: grid; justify-items: center; align-content: start; gap: .3rem; padding: .55rem .4rem .5rem; border-radius: 8px; text-decoration: none; text-align: center; color: #1A2530; background: linear-gradient(180deg, #F4F6F8, #DDE3E8); border: 1px solid #B8C3CC; box-shadow: 0 3px 0 #8A96A2, 0 6px 14px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s, filter .2s; } .mod:hover, .mod:focus-visible { transform: translateY(-3px); box-shadow: 0 6px 0 #8A96A2, 0 12px 20px rgba(0,0,0,.35); color: #1A2530; z-index: 3; } .mod:active { transform: translateY(2px); box-shadow: 0 1px 0 #8A96A2; } .mod-lever { width: 18px; height: 12px; border-radius: 3px; background: #1A2530; box-shadow: inset 0 -3px 0 rgba(255,255,255,.12); transition: transform .2s cubic-bezier(.3,1.5,.5,1); } .mod.g-smart .mod-lever { background: #C47A12; } .mod.g-biz .mod-lever { background: #2F6FD6; } .mod:hover .mod-lever { transform: translateY(-2px); } .mod-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(26,37,48,.08); color: #3A2170; } .mod.g-smart .mod-ic { color: #A85F0A; } .mod.g-biz .mod-ic { color: #2456B8; } .mod-ic svg { width: 19px; height: 19px; } .mod-name { font-size: .8rem; font-weight: 800; line-height: 1.15; } .mod-led { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(83,199,138,.9); transition: background .15s, box-shadow .15s; } .mod-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); width: 180px; padding: .5rem .65rem; border-radius: 8px; background: #0D151E; color: #E9EEF3; font-size: .78rem; font-weight: 600; line-height: 1.35; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; } .mod-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #0D151E; } .mod:hover .mod-tip, .mod:focus-visible .mod-tip { opacity: 1; transform: translateX(-50%); } /* the main switch and RCD act on the modules */ .board .mod.dead { filter: grayscale(.7) brightness(.62); } .board .mod.dead .mod-led { background: #8A96A2; box-shadow: none; } .board .mod.dead .mod-lever { transform: translateY(5px); background: #6B7782; } .board .mod.pop .mod-led { box-shadow: 0 0 12px rgba(83,199,138,1); } @media (max-width: 1100px) { .board.cu2 { grid-template-columns: 1fr; } .cu2-main .board-filler { flex-direction: row; align-items: center; } } @media (max-width: 700px) { .cu2-row { grid-template-columns: 1fr; gap: .45rem; } .cu2-lab { justify-self: start; } .cu2-mods { display: grid; grid-template-columns: repeat(3, 1fr); } .mod { width: auto; min-height: 96px; } .mod-tip { display: none; } .cu2-main .board-filler { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .mod, .mod-lever, .mod-tip { transition: none; } } .cu2-row { grid-template-columns: 136px 1fr; } .mod { width: 96px; } .cu2-lab { font-size: .7rem; } @media (max-width: 700px) { .cu2-row { grid-template-columns: 1fr; } .cu2-mods { display: grid; grid-template-columns: repeat(3, 1fr); } .mod { width: auto; } } /* ===== Linked tiles (smart home page and home page) ===== */ .lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; } .lt-grid.two { grid-template-columns: 1fr 1fr; } .lt-grid.one { grid-template-columns: 1fr; } .lt { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: .9rem; row-gap: .65rem; padding: 1rem 1.05rem .9rem; border-radius: var(--radius-m); background: linear-gradient(180deg, #172430, #131E28); border: 1px solid var(--line); border-left: 4px solid var(--live); text-decoration: none; color: var(--text); box-shadow: 0 3px 0 #0B131A; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; } .lt:hover, .lt:focus-visible { transform: translateY(-3px); border-color: rgba(255,181,71,.6); box-shadow: 0 8px 20px rgba(0,0,0,.35); background: linear-gradient(180deg, #1B2A38, #16222E); color: var(--text); } .lt:active { transform: translateY(1px); box-shadow: 0 1px 0 #0B131A; } .lt-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,181,71,.12); color: var(--live); } .lt-ic svg { width: 24px; height: 24px; } .lt .lt-body { display: block; min-width: 0; } .lt .lt-body b { display: block; font-size: 1.02rem; line-height: 1.25; color: var(--text); margin: .1rem 0 .25rem; padding-right: 3.6rem; } .lt .lt-d { display: block; color: #A9B6C3; font-size: .9rem; line-height: 1.4; } .lt .lt-go { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .9rem; color: var(--live); border-top: 1px solid var(--line); padding-top: .6rem; } .lt .lt-go svg { width: 14px; height: 14px; transition: transform .15s; } .lt:hover .lt-go svg { transform: translateX(3px); } .lt .lt-badge { position: absolute; top: .7rem; right: .7rem; font-size: .7rem; font-weight: 800; padding: .15rem .5rem; border-radius: 999px; background: rgba(83,199,138,.15); color: #53C78A; border: 1px solid rgba(83,199,138,.45); } @media (max-width: 560px) { .lt-grid.two { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .lt, .lt .lt-go svg { transition: none; } } /* ===== Smart room demo ===== */ .sc { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .sc-stage { align-self: start; } .sc-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .sc-sky { transition: fill .7s; } .sc-sun, .sc-night, .sc-beam { transition: opacity .7s; } .sc-blindsrect { transform-box: fill-box; transform-origin: top; transition: transform .9s cubic-bezier(.4, 0, .2, 1); } .sc-dark { transition: opacity .6s; pointer-events: none; } .sc-glow { opacity: 0; transition: opacity .5s; mix-blend-mode: screen; pointer-events: none; } .sc-beam { mix-blend-mode: screen; pointer-events: none; } .sc-bulb { fill: #7A8692; transition: fill .3s, filter .3s; } .sc-bulb.lit { fill: #FFE6B2; filter: drop-shadow(0 0 6px #FFD29A); } .sc-pic { opacity: 0; transition: opacity .4s; animation: schue 8s linear infinite; } .sc-tvglow { opacity: 0; transition: opacity .5s; mix-blend-mode: screen; pointer-events: none; } .sc-svg.tv-on .sc-pic { opacity: 1; } .sc-svg.tv-on .sc-tvglow { opacity: .6; } @keyframes schue { to { filter: hue-rotate(360deg); } } .sc-note { opacity: 0; fill: #9CC8FF; stroke: #9CC8FF; transform-box: fill-box; } .sc-svg.music-on .sc-note { animation: scnote 2.6s ease-out infinite; } .sc-svg.music-on .sc-note.n2 { animation-delay: -.9s; } .sc-svg.music-on .sc-note.n3 { animation-delay: -1.7s; } @keyframes scnote { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(16px, -70px); } } .sc-ring { fill: #0D151E; stroke: #5B9BFF; stroke-width: 4; transition: stroke .4s; } .sc-ring.warm { stroke: #FF8A4A; } .sc-temp { fill: #FFFFFF; font: 800 16px var(--font); text-anchor: middle; } .sc-tlab { fill: #9AA9BA; font: 700 11px var(--font); text-anchor: middle; } .sc-armed { opacity: 0; transition: opacity .4s; } .sc-svg.armed .sc-armed { opacity: 1; } .sc-armtxt { fill: #53C78A; font: 800 13px var(--font); text-anchor: middle; } .sc-hit { cursor: pointer; outline: none; } .sc-hitbox { fill: transparent; stroke: transparent; stroke-width: 3; transition: stroke .15s, fill .15s; } .sc-hit:hover .sc-hitbox, .sc-hit:focus-visible .sc-hitbox { stroke: var(--live); fill: rgba(255,181,71,.06); } .sc-side { display: grid; gap: .8rem; align-content: start; } .sc-side h3 { margin: 0; font-size: 1rem; } .sc-scenes { margin: 0; } .sc-scenes .filter { font-size: .86rem; padding: .4rem .8rem; } .sc-togs { display: flex; gap: .5rem; flex-wrap: wrap; } .sc-status { min-height: 3.4em; margin: 0; color: #CBD5DF; } @media (max-width: 960px) { .sc { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sc-pic, .sc-svg.music-on .sc-note, .sc-blindsrect { animation: none; transition: none; } } /* ===== Solar: "not quite ready" notice ===== */ .solar-notice { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.3rem; align-items: center; padding: 1.1rem 1.3rem; border-radius: var(--radius-l); border: 1px solid rgba(255,181,71,.65); background: linear-gradient(90deg, rgba(255,181,71,.18), rgba(255,181,71,.05)); } .sn-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,181,71,.2); color: var(--live); } .sn-ic svg { width: 30px; height: 30px; } .solar-notice b { display: block; font-size: 1.15rem; } .solar-notice p { margin: .25rem 0 0; color: #DCE4EC; } @media (max-width: 760px) { .solar-notice { grid-template-columns: auto 1fr; } .solar-notice .btn { grid-column: 1 / -1; justify-self: start; } } /* ===== Heating page ===== */ .qa { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.3rem 0 1.4rem; max-width: 820px; } .qa-col { padding: .9rem 1.1rem; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); } .qa-col b { display: block; margin-bottom: .25rem; font-size: 1.05rem; } .qa-col span { color: #CBD5DF; font-size: .92rem; } .qa-col.own { border-left: 4px solid var(--live); } .qa-col.own b { color: var(--live); } .qa-col.shared { border-left: 4px solid #5B9BFF; } .qa-col.shared b { color: #8DBBFF; } @media (max-width: 640px) { .qa { grid-template-columns: 1fr; } } .hx { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .hx-stage { align-self: start; } .hx-svg { width: 100%; height: auto; display: block; border-radius: var(--radius-m); } .hx-cu { fill: #5A6672; font: 800 12px var(--font); text-anchor: middle; } .hx-br .b { fill: #FFFFFF; stroke: #B9C2CA; stroke-width: 1.5; transition: stroke .2s, fill .2s; } .hx-br .lv { fill: #1A2530; transition: transform .3s; transform-box: fill-box; } .hx-bl { fill: #4A5662; font: 700 8.5px var(--font); text-anchor: middle; } .hx-br.hi .b { stroke: #5B9BFF; stroke-width: 4; fill: #EAF2FF; } .hx-br.hi.own .b { stroke: var(--live); fill: #FFF4DE; } .hx-br.hi .lv { fill: #2F6FD6; } .hx-br.hi.own .lv { fill: #E0902A; transform: translateY(2px); } .hx-tag { font: 800 10px var(--font); fill: #2F6FD6; } .hx-tag.own { fill: #B26A12; } .hx-cable { stroke: #5B9BFF; stroke-dasharray: 9 7; animation: dash 1s linear infinite; transition: stroke .3s; } .hx-cable.own { stroke: var(--live); filter: drop-shadow(0 0 4px rgba(255,181,71,.7)); } .hx-dev { display: none; animation: fadeUp .35s ease; } .hx-t { fill: #C7D0D8; font: 700 11px var(--font); text-anchor: middle; } .hx-temp { fill: #FFFFFF; font: 800 18px var(--font); text-anchor: middle; } .hx-temp2 { fill: #1A2530; font: 800 15px var(--font); text-anchor: middle; } .hx-wire { stroke: #9AA9BA; stroke-width: 2; stroke-dasharray: 4 5; animation: dash 1.4s linear infinite; } .hx-mat, .hx-elem, .hx-rail { stroke: #FF8A4A; filter: drop-shadow(0 0 5px rgba(255,138,74,.9)); } .hx-pipe { stroke: #5BB8FF; animation: dash 1.2s linear infinite; stroke-dasharray: 9 7; } .hx-heat { animation: blink 2.6s ease-in-out infinite; } .hx-fan { transform-box: fill-box; transform-origin: center; animation: spin 1.1s linear infinite; } .hx-chips { display: grid; gap: .4rem; margin-bottom: .9rem; } .hx-chip { display: flex; align-items: center; gap: .6rem; font: inherit; font-weight: 700; text-align: left; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); cursor: pointer; box-shadow: 0 2px 0 rgba(0,0,0,.35); transition: border-color .15s, background .15s, transform .07s; } .hx-chip:active { transform: translateY(2px); } .hx-chip[aria-pressed="true"] { border-color: var(--live); background: rgba(255,181,71,.08); } .hx-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .hx-dot.yes { background: var(--live); box-shadow: 0 0 8px rgba(255,181,71,.8); } .hx-dot.no { background: #5B9BFF; } .hx-ans { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 1rem 1.1rem; } .hx-q { color: var(--muted); font-size: .85rem; font-weight: 700; } .hx-yn { font-size: 2rem; font-weight: 800; font-variation-settings: "wdth" 118; margin: .1rem 0 .3rem; } .hx-yn.yes { color: var(--live); } .hx-yn.no { color: #8DBBFF; } .hx-why { color: #CBD5DF; } .hx-ans dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; font-size: .9rem; margin: .6rem 0; } .hx-ans dt { color: var(--muted); } .hx-ans dd { margin: 0; } @media (max-width: 960px) { .hx { grid-template-columns: 1fr; } } .uf { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(1rem, 2.5vw, 1.6rem); } .uf-stage { align-self: start; } .uf-svg { width: 100%; height: auto; display: block; } .uf-glow { opacity: 0; } .uf-room { transition: all .25s; } .uf-tt { fill: #FFFFFF; font: 800 12px var(--font); text-anchor: middle; } .uf-floor { fill: #FFB547; font: 800 16px var(--font); text-anchor: middle; } .uf-side { display: grid; gap: .8rem; align-content: start; } .uf-side h3 { margin: 0; font-size: .95rem; color: var(--muted); font-weight: 600; } .uf-ws { margin: 0; } .uf-ws .filter { display: grid; gap: 0; text-align: center; } .uf-ws small { font-size: .7rem; font-weight: 500; opacity: .75; } .uf-stats { margin: 0; } .uf-note { margin: 0; min-height: 3em; } @media (max-width: 960px) { .uf { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hx-cable, .hx-wire, .hx-pipe, .hx-heat, .hx-fan, .hx-dev { animation: none; } } .solar-notice-wrap { padding-top: 1.2rem; padding-bottom: 0; } .solar-notice-wrap + .page-hero { padding-top: 1.2rem; } .scope-note { display: flex; gap: .7rem; align-items: flex-start; max-width: 760px; margin: 1.1rem 0 1.2rem; padding: .85rem 1rem; border-radius: var(--radius-m); background: rgba(91,155,255,.08); border: 1px solid rgba(91,155,255,.35); color: #CBD5DF; font-size: .95rem; } .scope-note svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--neutral); margin-top: .1rem; } .scope-note b { color: var(--text); } /* ===== Home page: illustrated service grid ===== */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: .9rem; grid-auto-flow: dense; } .bento-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, #22344A 0%, #15212D 60%, #121C26 100%); border: 1px solid var(--line); text-decoration: none; color: var(--text); box-shadow: 0 4px 0 #0B131A; transition: transform .18s, border-color .18s, box-shadow .18s; } a.bento-tile:hover, a.bento-tile:focus-visible { transform: translateY(-4px); border-color: rgba(255,181,71,.65); box-shadow: 0 14px 28px rgba(0,0,0,.4); color: var(--text); } .bento-tile.b-big { grid-column: span 2; grid-row: span 2; } .bento-tile.b-wide { grid-column: span 2; } .bt-art { flex: 1; min-height: 0; display: grid; place-items: center; padding: .8rem .8rem 0; } .bt-art svg { width: 100%; height: 100%; max-height: 100%; } .b-big .bt-art { padding: 1.6rem 1.6rem .4rem; } .bt-text { padding: .2rem 1.1rem 1rem; } .bt-text h3 { margin: 0; font-size: 1.12rem; } .b-big .bt-text h3 { font-size: 1.6rem; } .b-big .bt-text p { color: #A9B6C3; margin: .3rem 0 0; } .bt-go { position: absolute; right: .9rem; bottom: .9rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,181,71,.14); color: var(--live); transition: transform .18s, background .18s; } .bt-go svg { width: 15px; height: 15px; } a.bento-tile:hover .bt-go { transform: translateX(3px); background: var(--live); color: #1B1204; } .b-more { justify-content: center; padding: 1.1rem 1.2rem; gap: .7rem; background: linear-gradient(135deg, rgba(255,181,71,.10), rgba(91,155,255,.08)), #15212D; } .b-more .bt-text { padding: 0; } .b-more .bt-text p { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; } .bt-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .bt-chip { font-size: .8rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); text-decoration: none; transition: border-color .15s, color .15s; } .bt-chip:hover { border-color: var(--live); color: var(--live); } .bt-all { align-self: flex-start; padding: .5rem 1rem; font-size: .9rem; } /* the little illustrations move */ .bt-led { fill: #53C78A; animation: btblink 2.2s ease-in-out infinite; } .bt-wire { stroke-dasharray: 260; stroke-dashoffset: 260; animation: btdraw 4s ease-in-out infinite; } .bt-wire.w2 { animation-delay: .8s; } .bt-glow { fill: #FFD9A0; opacity: .3; mix-blend-mode: screen; animation: btglow 3s ease-in-out infinite; } .bt-drop { fill: #9CC8FF; animation: btdrop 1.2s linear infinite; } .bt-fill { fill: #53C78A; transform-box: fill-box; transform-origin: left; animation: btfill 3.5s ease-in-out infinite; } .bt-knob { fill: #8A96A2; animation: btknob 4s ease-in-out infinite; } .bt-knob.k1 { animation-delay: 1.2s; } .bt-knob.k2 { animation-delay: 2.4s; } .bt-bulb { fill: #3A4A58; animation: btbulb 4s ease-in-out infinite; } .bt-rec { fill: #FF3B30; animation: btblink 1s steps(1) infinite; } .bt-strobe { fill: #2A5A8A; animation: btstrobe 2.4s steps(1) infinite; } .bt-strobeglow { fill: #5BB8FF; opacity: 0; animation: btstrobeglow 2.4s steps(1) infinite; } @keyframes btblink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes btdraw { 0% { stroke-dashoffset: 260; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -260; } } @keyframes btglow { 0%, 100% { opacity: .2; } 50% { opacity: .75; } } @keyframes btdrop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } } @keyframes btfill { 0% { transform: scaleX(.08); } 80%, 100% { transform: scaleX(1); } } @keyframes btknob { 0%, 35% { transform: translateX(0); fill: #8A96A2; } 45%, 90% { transform: translateX(26px); fill: #FFB547; } 100% { transform: translateX(0); fill: #8A96A2; } } @keyframes btbulb { 0%, 35% { fill: #3A4A58; } 45%, 90% { fill: #FFD36B; } 100% { fill: #3A4A58; } } @keyframes btstrobe { 0%, 60%, 100% { fill: #2A5A8A; } 10%, 30% { fill: #E9F6FF; } 20% { fill: #5BB8FF; } } @keyframes btstrobeglow { 0%, 60%, 100% { opacity: 0; } 10%, 30% { opacity: .45; } 20% { opacity: .15; } } @media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; } .bento-tile.b-big { grid-row: span 2; } } @media (max-width: 520px) { .bento { grid-auto-rows: 160px; gap: .7rem; } .bento-tile.b-big { grid-row: span 1; grid-auto-rows: auto; min-height: 260px; } .bento-tile.b-wide { grid-column: span 2; } .bt-text h3 { font-size: 1rem; } .b-big .bt-text h3 { font-size: 1.3rem; } } @media (prefers-reduced-motion: reduce) { .bt-led, .bt-wire, .bt-glow, .bt-drop, .bt-fill, .bt-knob, .bt-bulb, .bt-rec, .bt-strobe, .bt-strobeglow { animation: none; } .bt-wire { stroke-dashoffset: 0; } } /* rows grow to fit their content; on phones the big tile takes two full rows */ .bento { grid-auto-rows: minmax(200px, auto); } .b-more .bt-text, .b-more .bt-all { flex-shrink: 0; } @media (max-width: 900px) { .bento { grid-auto-rows: minmax(180px, auto); } } @media (max-width: 520px) { .bento { grid-auto-rows: minmax(150px, auto); } .bento-tile.b-big { grid-column: span 2; grid-row: span 2; min-height: 0; } } /* two even rows of tiles, with "everything else" across the full width */ .bento-tile.b-full { grid-column: 1 / -1; } .b-full.b-more { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; } .b-full .bt-chips { flex: 1 1 420px; } /* fuse board: one breaker trips, its light goes red, then it resets */ .bt-brk.trip { animation: bttrip 3.6s ease-in-out infinite; transform-box: fill-box; } .bt-led.trip { animation: bttripled 3.6s steps(1) infinite; } @keyframes bttrip { 0%, 40% { transform: translateY(0); } 45%, 75% { transform: translateY(26px); } 80%, 100% { transform: translateY(0); } } @keyframes bttripled { 0%, 44% { fill: #53C78A; opacity: 1; } 45%, 79% { fill: #FF3B30; opacity: 1; } 80%, 100% { fill: #53C78A; opacity: 1; } } /* lighting: colour-changing downlights */ .bt-beam { fill: #FFD9A0; opacity: .35; mix-blend-mode: screen; animation: btglow 3s ease-in-out infinite; } .bt-rgb { animation: btrgb 9s linear infinite; } .bt-strip { fill: #FFB547; animation: btrgbfill 9s linear infinite; } @keyframes btrgb { 0%, 25% { filter: none; } 35%, 55% { filter: hue-rotate(180deg) saturate(2.4); } 65%, 85% { filter: hue-rotate(290deg) saturate(2.4); } 100% { filter: none; } } @keyframes btrgbfill { 0%, 25% { fill: #FFB547; } 35%, 55% { fill: #5BB8FF; } 65%, 85% { fill: #E85BFF; } 100% { fill: #FFB547; } } @media (max-width: 900px) { .b-full.b-more { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .bt-brk.trip, .bt-led.trip, .bt-beam, .bt-rgb, .bt-strip { animation: none; } } @media (max-width: 900px) { .b-full .bt-chips { flex: 0 0 auto; } } /* ===== Hero house: extra life ===== */ .house-svg .hx-stars circle { animation: hxtw 3.2s ease-in-out infinite; } .house-svg .hx-stars { opacity: .55; transition: opacity .6s; } .house-svg.s-solar .hx-stars { opacity: .18; } @keyframes hxtw { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } .house-svg .hx-clouds { opacity: .55; } .house-svg .hx-cloud { animation: hxcloud 80s linear infinite; } .house-svg .hx-cloud.c2 { animation-duration: 110s; animation-delay: -60s; } @keyframes hxcloud { from { transform: translateX(-420px); } to { transform: translateX(720px); } } .house-svg .hx-bird { animation: hxbird 26s linear infinite; animation-delay: 4s; transform: translate(-80px, 70px); } .house-svg .hx-wing { transform-box: fill-box; transform-origin: center; animation: hxflap .5s ease-in-out infinite; } @keyframes hxbird { 0% { transform: translate(-80px, 70px); } 40% { transform: translate(700px, 40px); } 100% { transform: translate(700px, 40px); } } @keyframes hxflap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-.4); } } .house-svg .hx-halo { animation: hxhalo 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes hxhalo { 0%, 100% { transform: scale(.9); opacity: .12; } 50% { transform: scale(1.1); opacity: .28; } } .house-svg .hx-rays { transform-box: view-box; transform-origin: 566px 58px; animation: spin 40s linear infinite; } .house-svg .hx-sunbeam { opacity: 0; transition: opacity .4s; animation: dash 1.2s linear infinite; } .house-svg.s-solar .hx-sunbeam { opacity: .8; } .house-svg .hx-spill { opacity: 0; transition: opacity .4s; mix-blend-mode: screen; } .house-svg.s-lights .hx-spill { opacity: .18; } .house-svg .hx-tree { transform-box: view-box; transform-origin: 28px 400px; animation: hxsway 6s ease-in-out infinite; } @keyframes hxsway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } } .house-svg .hx-smoke { opacity: 0; transition: opacity .5s; } .house-svg.s-heating .hx-smoke { opacity: 1; } .house-svg .hx-smoke circle { transform-box: fill-box; transform-origin: center; animation: hxsmoke 3.6s ease-out infinite; } .house-svg .hx-smoke circle:nth-child(2) { animation-delay: -1.2s; } .house-svg .hx-smoke circle:nth-child(3) { animation-delay: -2.4s; } @keyframes hxsmoke { 0% { transform: translate(0, 0) scale(.6); opacity: .7; } 100% { transform: translate(14px, -48px) scale(2.2); opacity: 0; } } .house-svg .hx-energy { opacity: 0; transition: opacity .4s; } .house-svg.s-solar .e-solar, .house-svg.s-battery.s-solar .e-batt, .house-svg.s-solar .e-house, .house-svg.s-ev .e-ev { opacity: 1; } .house-svg .hx-energy circle { filter: drop-shadow(0 0 3px #FFD36B); } .house-svg .hx-strobe { opacity: 0; } .house-svg.s-alarm .hx-strobe { animation: hxstrobe 1.6s steps(1) infinite; } @keyframes hxstrobe { 0%, 70%, 100% { opacity: 0; } 10%, 30% { opacity: .55; } 20% { opacity: .15; } } .house-svg.s-cinema .tv-glow > rect:first-child { animation: hxtv 2.2s steps(5) infinite; } @keyframes hxtv { 0% { fill: #5B9BFF; } 25% { fill: #A855F7; } 50% { fill: #5B9BFF; } 75% { fill: #F97316; } 100% { fill: #5B9BFF; } } .house-svg .hx-bolt { opacity: 0; } .house-svg.s-ev .hx-bolt { animation: hxbolt 1.4s ease-in-out infinite; } @keyframes hxbolt { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } /* Christmas: night sky, Santa and heavy snow */ .house-svg.season-xmas .sun, .house-svg.season-halloween .sun, .house-svg.season-xmas .hx-sunbeam { display: none; } .house-svg.season-xmas .hx-stars { opacity: .9; } .house-svg .hx-snow circle { animation: hxsnow 8s linear infinite; } @keyframes hxsnow { from { transform: translate(0, -60px); } to { transform: translate(18px, 460px); } } .house-svg .hx-santa { animation: hxsanta 20s linear infinite; transform: translate(-260px, 30px); } @keyframes hxsanta { 0% { transform: translate(-260px, 34px); } 50% { transform: translate(720px, 4px); } 100% { transform: translate(720px, 4px); } } .house-svg .hx-santa-bob { animation: hxbob 1.4s ease-in-out infinite; } @keyframes hxbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .house-svg .hx-leg { animation: hxleg .45s ease-in-out infinite; transform-box: fill-box; transform-origin: top; } @keyframes hxleg { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } } .house-svg .hx-trail circle { animation: hxtw 1s ease-in-out infinite; } .house-svg .hx-trail circle:nth-child(2n) { animation-delay: -.5s; } @media (prefers-reduced-motion: reduce) { .house-svg .hx-stars circle, .house-svg .hx-cloud, .house-svg .hx-bird, .house-svg .hx-wing, .house-svg .hx-halo, .house-svg .hx-rays, .house-svg .hx-sunbeam, .house-svg .hx-tree, .house-svg .hx-smoke circle, .house-svg .hx-strobe, .house-svg .tv-glow > rect, .house-svg .hx-bolt, .house-svg .hx-snow circle, .house-svg .hx-santa, .house-svg .hx-santa-bob, .house-svg .hx-leg, .house-svg .hx-trail circle { animation: none !important; } .house-svg .hx-santa { transform: translate(380px, 14px); } .house-svg .hx-bird { display: none; } } /* ===== Santa's Rooftop Dash ===== */ .dash { display: grid; grid-template-columns: 1fr 280px; gap: 1.2rem; align-items: start; } .dash-stage { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: #050C1E; } .dash-canvas { display: block; width: 100%; aspect-ratio: 960 / 400; touch-action: manipulation; cursor: pointer; outline: none; } .dash-canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--live); } .dash-hud { position: absolute; top: .6rem; left: .8rem; right: .8rem; display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; font-weight: 700; color: #DDE6EE; font-size: .95rem; text-shadow: 0 2px 4px rgba(0,0,0,.6); } .dash-hud b { color: var(--live); font-variant-numeric: tabular-nums; } .dash-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: .5rem; padding: 1rem; background: rgba(5,12,30,.72); backdrop-filter: blur(2px); } .dash-overlay[hidden] { display: none; } .dash-overlay h2 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2.1rem); } .dash-overlay p { margin: 0; max-width: 460px; color: #CBD5DF; } .dash-keys span { display: inline-block; padding: .05rem .45rem; border-radius: 6px; border: 1px solid #5A6672; background: #0D151E; font-weight: 700; font-size: .85rem; } .dash-save { display: grid; gap: .35rem; margin-top: .4rem; } .dash-save[hidden] { display: none; } .dash-save label { font-weight: 700; font-size: .9rem; } .dash-save-row { display: flex; gap: .4rem; } .dash-save-row input { width: 12rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: #0D151E; color: var(--text); font: inherit; } .dash-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 1rem 1.1rem; } .dash-board h2 { font-size: 1.2rem; margin: 0 0 .6rem; } .dash-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .3rem; } .dash-list li { display: grid; grid-template-columns: 1.8rem 1fr auto; align-items: center; gap: .4rem; padding: .4rem .55rem; border-radius: 8px; background: var(--bg); font-weight: 600; } .dash-list li:nth-child(1) .dl-rank { color: #FFD36B; } .dash-list li:nth-child(2) .dl-rank { color: #C9D1D8; } .dash-list li:nth-child(3) .dl-rank { color: #D9935A; } .dash-list li.me { outline: 2px solid var(--live); } .dl-rank { font-weight: 800; color: var(--muted); } .dl-score { color: var(--live); font-variant-numeric: tabular-nums; } .dash-list .dl-empty { display: block; color: var(--muted); font-weight: 500; } .dash-clear { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; font: inherit; cursor: pointer; } .dash-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.2rem; } .dash-tips div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: .8rem 1rem; display: grid; gap: .15rem; } .dash-tips span { color: var(--muted); font-size: .92rem; } .season-badge .season-game { font-weight: 800; } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash-tips { grid-template-columns: 1fr; } } @media (max-width: 520px) { .dash-hud { font-size: .8rem; } .dash-overlay p { font-size: .9rem; } } /* Halloween ghost and Easter bunny on the home page house */ .house-svg .hx-ghost { opacity: .92; transition: transform 1.7s cubic-bezier(.45,0,.25,1), opacity .5s; } .house-svg .hx-ghost.moving { opacity: .5; } .house-svg .hx-ghost-bob { animation: hxghost 2.4s ease-in-out infinite; } @keyframes hxghost { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(0, -5px) rotate(3deg); } } .house-svg .hx-bunny { animation: hxbunny 15s linear infinite; transform: translate(-40px, 399px); } @keyframes hxbunny { 0% { transform: translate(-40px, 399px); } 30% { transform: translate(250px, 399px); } 38% { transform: translate(250px, 399px); } 75% { transform: translate(690px, 399px); } 100% { transform: translate(690px, 399px); } } .house-svg .hx-bunny-hop { animation: hxhop .5s ease-in-out infinite; } @keyframes hxhop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @media (prefers-reduced-motion: reduce) { .house-svg .hx-ghost-bob, .house-svg .hx-bunny, .house-svg .hx-bunny-hop { animation: none !important; } .house-svg .hx-bunny { transform: translate(330px, 399px); } } .house-svg.season-halloween .hx-sunbeam { display: none; } /* festive frame for the game */ .dash-stage { overflow: visible; padding: 7px; border: 0; background: repeating-linear-gradient(-45deg, #C4302B 0 12px, #F6F1E8 12px 24px); box-shadow: 0 12px 30px rgba(0,0,0,.45); } .dash-canvas { border-radius: calc(var(--radius-l) - 6px); } .dash-hud { top: calc(.6rem + 7px); left: calc(.8rem + 7px); right: calc(.8rem + 7px); } .dash-overlay { inset: 7px; border-radius: calc(var(--radius-l) - 6px); } .dash-stage::before, .dash-stage::after { content: ""; position: absolute; top: -16px; width: 70px; height: 48px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cpath d='M30 22 C22 10 10 12 4 6 C8 16 4 22 10 28 C16 26 22 30 30 22Z' fill='%231F6B3A'/%3E%3Cpath d='M34 22 C42 10 54 12 60 6 C56 16 60 22 54 28 C48 26 42 30 34 22Z' fill='%23267A43'/%3E%3Ccircle cx='27' cy='26' r='5' fill='%23E3182D'/%3E%3Ccircle cx='37' cy='27' r='5' fill='%23C4302B'/%3E%3Ccircle cx='32' cy='19' r='5' fill='%23E3182D'/%3E%3C/svg%3E") no-repeat center / contain; z-index: 3; pointer-events: none; } .dash-stage::before { left: -14px; } .dash-stage::after { right: -14px; transform: scaleX(-1); } .dash-overlay h2 { color: #FFE9A8; } .xmas-kicker { display: inline-block; margin: 0 0 .5rem; padding: .3rem .8rem; border-radius: 999px; background: #C4302B; color: #FFFFFF; font-weight: 800; font-size: .9rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); } .dash-hero h1 { color: #FFFFFF; text-shadow: 0 2px 0 #1F6B3A; } @media (max-width: 640px) { .dash-overlay { gap: .3rem; padding: .6rem; } .dash-overlay h2 { font-size: 1.25rem; } .dash-start p:not(.dash-keys) { display: none; } .dash-keys { font-size: .8rem; } .dash-start .btn, .dash-over .btn { padding: .45rem 1rem; font-size: .9rem; } .dash-result { font-size: .85rem; } .dash-save label { font-size: .8rem; } .dash-save-row input { width: 9.5rem; padding: .4rem .55rem; } } .dash-throw { position: absolute; right: 20px; bottom: 20px; z-index: 2; width: 84px; height: 84px; border-radius: 50%; border: 3px solid #FFFFFF; background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFE3F7 60%, #9CB8D6); color: #1A2A4A; font: 800 .95rem var(--font); box-shadow: 0 6px 18px rgba(0,0,0,.45); cursor: pointer; touch-action: manipulation; } .dash-throw[hidden] { display: none; } .dash-throw:active { transform: scale(.94); } .dash-tips { grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .dash-throw { width: 64px; height: 64px; right: 14px; bottom: 14px; font-size: .8rem; } .dash-hud span:nth-child(4) { display: inline; } } /* Services panel: only the Services link opens it. No full-width hover strip; instead a narrow invisible corridor, exactly as wide as the link, runs down to the panel so the mouse can travel to it without it closing. */ @media (min-width: 1101px) { .nav .has-sub.mega-host::after { display: none; } .nav .has-sub.mega-host > a { position: relative; } .nav .has-sub.mega-host.mega-open > a::after { content: ""; position: absolute; left: -6px; right: -6px; top: 100%; height: 48px; } .nav .has-sub.mega-host:not(.mega-open) > .sub.mega { display: none !important; } /* only the script opens it */ .nav .has-sub.mega-host.mega-open > .sub.mega { display: block; } } /* solar: coming soon */ .soon-tag { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: rgba(255,181,71,.16); color: var(--live); border: 1px solid rgba(255,181,71,.4); vertical-align: middle; } .soon-card .soon-pill { display: inline-block; margin-bottom: .7rem; padding: .25rem .7rem; border-radius: 999px; background: var(--live); color: #1B1204; font-weight: 800; font-size: .8rem; } .soon-card .lt-grid { margin-top: .6rem; } .soon-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); } /* Santa's Rooftop Dash v3: bigger game, leaderboard below, full screen */ .dash { grid-template-columns: 1fr; } .dash-canvas { aspect-ratio: 960 / 460; } .dash-board { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; align-items: start; } .dash-board h2 { grid-column: 1 / -1; margin: 0; } .dash-board .dash-list { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); grid-auto-flow: column; grid-template-rows: repeat(5, auto); } .dash-board p { grid-column: 1 / -1; margin: 0; } .dash-list li { grid-template-columns: 1.8rem 1fr auto auto; } .dash-list .dl-st { font-size: .78rem; color: var(--muted); font-weight: 600; } .dash-full { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.4); background: rgba(4,10,26,.55); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; } .dash-full svg { width: 20px; height: 20px; } .dash-full[hidden] { display: none; } .dash-full:hover { background: rgba(4,10,26,.8); } .dash-stage:fullscreen { display: flex; align-items: center; justify-content: center; padding: 0; background: #02060C; border-radius: 0; } .dash-stage:fullscreen .dash-canvas { width: min(100vw, calc(100vh * 960 / 460)); height: auto; border-radius: 0; } .dash-stage:fullscreen::before, .dash-stage:fullscreen::after { display: none; } .dash-newbest { color: #FFD36B; } @media (max-width: 700px) { .dash-board .dash-list { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; } .dash-tips { grid-template-columns: 1fr; } .dash-full { width: 34px; height: 34px; left: 12px; bottom: 12px; } } @media (max-width: 640px) { .dash-hud span:nth-child(5) { display: none; } .dash-hud { font-size: .76rem; } }