/* ========================================================================== Handld.it - Air Conditioning Installation, Teesside Design system + page styles. Mobile first. No frameworks. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* ---------------------------------------------------------------- themes -- * Brand colour is a THEME, not a constant. Every page declares one on * , and the palette below is the only thing that * changes between them — layout, spacing and type stay identical. * * platform the Handld.it brand itself: home, guides index, * anything that is about the company rather than a job * air-conditioning the first service. Teal and navy. * * Adding a service means adding one block below and passing its name as * `theme` to layout(). Nothing else needs to know about it. * * The values here are the air-conditioning palette, so a page that declares * no theme at all still renders correctly rather than unstyled. */ --navy: #0b1f33; --navy-700: #12314f; --navy-100: #d7e3ec; --blue: #168aad; --blue-700: #11708e; --blue-800: #0e5c75; --cyan: #34b6d9; --ice: #f2f9fc; --ice-200: #e2f0f6; --line: #d9e6ee; --line-strong: #c3d7e3; --body: #34495e; --muted: #5b7186; --accent: #34b6d9; --accent-ink: #0b1f33; --focus: #34b6d9; --hero-glow: #e7f4f9; /* Not themed: these mean the same thing whatever the service. */ --white: #ffffff; --success: #12795c; --success-bg: #e8f6f1; --error: #b3261e; --error-bg: #fdecea; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Spacing / radius / shadow */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --shadow-sm: 0 1px 2px rgba(11, 31, 51, 0.06), 0 2px 6px rgba(11, 31, 51, 0.05); --shadow-md: 0 2px 6px rgba(11, 31, 51, 0.06), 0 12px 28px rgba(11, 31, 51, 0.08); --shadow-lg: 0 4px 12px rgba(11, 31, 51, 0.07), 0 24px 56px rgba(11, 31, 51, 0.12); --wrap: 1120px; --wrap-narrow: 760px; --header-h: 64px; } /* Service theme: air conditioning. Teal and navy, cool, the colour of the job. */ [data-theme="air-conditioning"] { --navy: #0b1f33; --navy-700: #12314f; --navy-100: #d7e3ec; --blue: #168aad; --blue-700: #11708e; --blue-800: #0e5c75; --cyan: #34b6d9; --ice: #f2f9fc; --ice-200: #e2f0f6; --line: #d9e6ee; --line-strong: #c3d7e3; --body: #34495e; --muted: #5b7186; --accent: #34b6d9; --accent-ink: #0b1f33; --focus: #34b6d9; --hero-glow: #e7f4f9; } /* Platform theme: the Handld.it brand. Royal blue and yellow, deliberately warmer and louder than any service, so a service page and a company page never look like the same kind of page. */ [data-theme="platform"] { --navy: #16205c; --navy-700: #24327e; --navy-100: #d5dbf3; --blue: #3050d8; --blue-700: #2740b4; --blue-800: #1f3391; --cyan: #ffc53d; --ice: #f5f6fd; --ice-200: #e4e8f8; --line: #dde2f5; --line-strong: #c4cbea; --body: #3a4170; --muted: #5f6791; --accent: #ffc53d; --accent-ink: #16205c; --focus: #3050d8; --hero-glow: #e6eafc; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--white); color: var(--body); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--navy); line-height: 1.18; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(2rem, 6.4vw, 3.15rem); } h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); } h3 { font-size: clamp(1.1rem, 2.6vw, 1.3rem); letter-spacing: -0.01em; } p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--blue-800); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--navy); } img, svg { max-width: 100%; height: auto; display: block; } /* A link that carries a chevron. The global svg rule above is display:block, which would drop the icon onto a line of its own, so these opt back into the text flow as one unbreakable line. */ .textlink { display: inline-flex; align-items: center; gap: 6px; } .textlink svg { flex: 0 0 auto; } ul { margin: 0 0 1.1em; padding-left: 1.2em; } li { margin-bottom: 0.4em; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: 12px; color: var(--white); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: clamp(48px, 8vw, 88px); } .section--ice { background: var(--ice); } .section--tight { padding-block: clamp(36px, 6vw, 64px); } .section__intro { max-width: 62ch; } .section__intro p { color: var(--body); } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-800); margin-bottom: 0.7em; } .lede { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--body); } /* -------------------------------------------------------------------------- 4. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-weight: 650; font-size: 1.02rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--blue); border-color: var(--blue); color: var(--white); box-shadow: 0 1px 2px rgba(11, 31, 51, 0.12), 0 8px 20px rgba(22, 138, 173, 0.24); } .btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); color: var(--white); } .btn--ghost { background: var(--white); border-color: var(--line-strong); color: var(--navy); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue-800); background: var(--white); } .btn--onnavy { background: var(--white); border-color: var(--white); color: var(--navy); } .btn--onnavy:hover { background: var(--ice); border-color: var(--ice); color: var(--navy); } .btn--lg { min-height: 58px; font-size: 1.08rem; padding: 16px 30px; } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; } .btn[disabled]:active { transform: none; } .btn__spinner { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: var(--white); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--line); } .site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.22rem; font-weight: 750; letter-spacing: -0.035em; color: var(--navy); text-decoration: none; } .brand:hover { color: var(--navy); } .brand__mark { flex: 0 0 auto; } .brand__dot { color: var(--blue); } .header-cta { min-height: 42px; padding: 9px 16px; font-size: 0.95rem; } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; background: radial-gradient(90% 120% at 82% 0%, var(--hero-glow) 0%, transparent 60%), var(--ice); border-bottom: 1px solid var(--ice-200); overflow: hidden; padding-block: clamp(32px, 6vw, 68px) clamp(36px, 6vw, 76px); } .hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); color: var(--navy); font-size: 0.85rem; font-weight: 600; padding: 7px 14px 7px 11px; border-radius: 999px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .hero__badge svg { flex: 0 0 auto; } .hero h1 { margin-bottom: 0.45em; } .hero__sub { font-size: clamp(1.05rem, 2.6vw, 1.22rem); max-width: 34ch; margin-bottom: 1.5em; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__actions .btn { flex: 1 1 260px; } .hero__micro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; font-size: 0.92rem; color: var(--muted); } .hero__micro span { display: inline-flex; align-items: center; gap: 6px; } .hero__micro svg { color: var(--blue); flex: 0 0 auto; } .hero__media { position: relative; } .hero__media svg { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } /* -------------------------------------------------------------------------- Hero illustration (home). One enquiry, checked against a postcode, passed to the installer who fits. Every colour is a theme token, so the drawing re-skins itself with the rest of the page; the trade in the chip cycles because the platform is not one trade. The global prefers-reduced-motion block at the top of this file stops all of the animation below, and the diagram still reads correctly frozen. -------------------------------------------------------------------------- */ .hf-panel { fill: var(--white); } .hf-card { fill: var(--ice); stroke: var(--line); stroke-width: 1.5; } .hf-card--match { fill: var(--white); stroke: var(--blue); stroke-width: 2.5; } .hf-house { color: var(--blue); } .hf-chip { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.5; } .hf-chipicon { color: var(--blue); } .hf-title { fill: var(--muted); font: 600 17px var(--font); letter-spacing: 0.04em; text-transform: uppercase; } .hf-chiptext { fill: var(--navy); font: 650 19px var(--font); } .hf-avatar { fill: var(--navy-100); } .hf-avatar--match { fill: var(--blue); } .hf-bar { fill: var(--navy-100); } .hf-bar--sub { fill: var(--line-strong); } .hf-bar--match { fill: var(--navy-700); } .hf-link { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 5 7; animation: hf-dash 1.4s linear infinite; } .hf-link--on { stroke: var(--blue); stroke-width: 3; stroke-dasharray: none; animation: none; } .hf-pulse { fill: var(--accent); stroke: var(--white); stroke-width: 2; animation: hf-travel 2.4s ease-in-out infinite; } .hf-pill { fill: var(--accent); } .hf-pilltext { fill: var(--accent-ink); font: 700 19px var(--font); letter-spacing: 0.02em; } .hf-badge { fill: var(--accent); } .hf-badgetick { color: var(--accent-ink); } .hf-badge, .hf-badgetick { transform-box: fill-box; transform-origin: center; animation: hf-pop 2.4s ease-out infinite; } .hf-trade { opacity: 0; animation: hf-cycle 7.2s ease-in-out infinite; } .hf-trade--2 { animation-delay: 2.4s; } .hf-trade--3 { animation-delay: 4.8s; } @keyframes hf-cycle { 0%, 2% { opacity: 0; transform: translateY(7px); } 7%, 27% { opacity: 1; transform: translateY(0); } 32%, 100%{ opacity: 0; transform: translateY(-7px); } } @keyframes hf-travel { 0% { cx: 260px; opacity: 0; } 12% { opacity: 1; } 62% { opacity: 1; } 72%, 100% { cx: 376px; opacity: 0; } } @keyframes hf-pop { 0%, 58% { opacity: 0; transform: scale(0.4); } 72%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes hf-dash { to { stroke-dashoffset: -24; } } /* The brand mark follows the theme rather than the two colours it was drawn with, so the header matches the page it sits on. */ .brand__mark rect { fill: var(--navy); } .brand__mark path { stroke: var(--accent); } .hero__areas { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ice-200); font-size: 0.93rem; color: var(--muted); } .hero__areas strong { color: var(--navy); font-weight: 650; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1.02fr 0.98fr; } .hero__actions .btn { flex: 0 0 auto; } } /* -------------------------------------------------------------------------- 7. Trust strip -------------------------------------------------------------------------- */ .trust { padding-block: clamp(32px, 5vw, 52px); background: var(--white); } .trust__grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .trust__item { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .trust__icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--ice); color: var(--blue-800); } .trust__item h3 { margin: 0 0 4px; font-size: 1.02rem; } .trust__item p { margin: 0; font-size: 0.95rem; color: var(--muted); } @media (min-width: 760px) { .trust__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } /* -------------------------------------------------------------------------- 8. Quote wizard -------------------------------------------------------------------------- */ .quote { background: var(--ice); padding-block: clamp(40px, 7vw, 80px); } .quote__head { text-align: center; max-width: 56ch; margin: 0 auto clamp(22px, 4vw, 34px); } .quote__head p { color: var(--body); margin-bottom: 0; } .wizard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); max-width: 660px; margin-inline: auto; overflow: hidden; } .wizard__progress { padding: 18px 20px 0; } .wizard__progress-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.86rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .wizard__progress-meta .step-label { color: var(--navy); } .wizard__bar { height: 6px; background: var(--ice-200); border-radius: 999px; overflow: hidden; } .wizard__bar-fill { height: 100%; width: 16.66%; background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%); border-radius: 999px; transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .wizard__body { padding: 22px 20px 24px; } .step[hidden] { display: none; } .step__legend { display: block; font-size: clamp(1.22rem, 3.4vw, 1.5rem); font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 4px; padding: 0; } .step__hint { font-size: 0.94rem; color: var(--muted); margin: 0 0 18px; } .step fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } /* Option cards */ .options { display: grid; gap: 10px; grid-template-columns: 1fr; } .options--compact { grid-template-columns: repeat(2, 1fr); } @media (min-width: 560px) { .options { grid-template-columns: repeat(2, 1fr); } .options--compact { grid-template-columns: repeat(3, 1fr); } } .option { position: relative; display: block; } .option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .option__card { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); color: var(--navy); font-weight: 600; font-size: 1rem; cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; } .option__card:hover { border-color: var(--blue); background: var(--ice); } .option input:focus-visible + .option__card { outline: 3px solid var(--focus); outline-offset: 2px; } .option input:checked + .option__card { border-color: var(--blue); background: var(--ice); box-shadow: inset 0 0 0 1px var(--blue); } .option__icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--ice); color: var(--blue-800); transition: background-color 0.14s ease, color 0.14s ease; } .option input:checked + .option__card .option__icon { background: var(--blue); color: var(--white); } .options--compact .option__card { justify-content: center; text-align: center; min-height: 56px; font-size: 1.05rem; } /* Text fields */ .field { margin-bottom: 16px; } .field:last-of-type { margin-bottom: 0; } .field > label { display: block; font-weight: 650; color: var(--navy); font-size: 0.95rem; margin-bottom: 6px; } .field__hint { font-size: 0.87rem; color: var(--muted); margin: 0 0 7px; } .input, .textarea { width: 100%; min-height: 52px; padding: 13px 15px; font: inherit; font-size: 1rem; color: var(--navy); background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); transition: border-color 0.14s ease, box-shadow 0.14s ease; } .input::placeholder, .textarea::placeholder { color: #93a7b7; } .input:hover, .textarea:hover { border-color: var(--blue); } .input:focus, .textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52, 182, 217, 0.28); } .textarea { min-height: 104px; resize: vertical; line-height: 1.5; } .input--postcode { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; max-width: 260px; } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--error); } .error-text { display: none; margin: 7px 0 0; font-size: 0.89rem; font-weight: 600; color: var(--error); } .error-text.is-visible { display: flex; gap: 6px; align-items: flex-start; } /* Honeypot - hidden from humans, reachable by naive bots */ .hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Optional extras */ .extras { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ice); margin-bottom: 20px; } .extras > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 650; font-size: 0.95rem; color: var(--navy); display: flex; align-items: center; gap: 9px; } .extras > summary::-webkit-details-marker { display: none; } .extras > summary .chev { transition: transform 0.18s ease; color: var(--blue); } .extras[open] > summary .chev { transform: rotate(90deg); } .extras__body { padding: 0 16px 16px; } .uploader { margin-top: 4px; } .uploader__drop { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: var(--white); border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); color: var(--navy); font: inherit; font-weight: 600; font-size: 0.95rem; text-align: left; cursor: pointer; } .uploader__drop:hover { border-color: var(--blue); background: var(--white); } .uploader__drop small { display: block; font-weight: 500; color: var(--muted); font-size: 0.82rem; } .uploader__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; padding: 0; list-style: none; } .uploader__list:empty { margin-top: 0; } .thumb { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--ice-200); margin: 0; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .thumb button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(11, 31, 51, 0.78); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; } .thumb button:hover { background: var(--navy); } /* Consent */ .consent { display: flex; gap: 11px; align-items: flex-start; padding: 14px; background: var(--ice); border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 4px; } .consent input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; } .consent label { font-size: 0.88rem; line-height: 1.55; color: var(--body); cursor: pointer; } .privacy-note { font-size: 0.82rem; color: var(--muted); margin: 12px 0 0; line-height: 1.55; } /* Nav */ .wizard__nav { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .wizard__nav .btn--primary { flex: 1 1 auto; } .wizard__back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 12px 8px; font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--muted); cursor: pointer; border-radius: var(--r-sm); } .wizard__back:hover { color: var(--navy); } .wizard__back[hidden] { display: none; } .form-status { display: none; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 13px 15px; border-radius: var(--r-md); font-size: 0.92rem; font-weight: 600; background: var(--error-bg); border: 1px solid #f3c9c5; color: var(--error); } .form-status.is-visible { display: flex; } /* Success */ .wizard__success { padding: 34px 22px 38px; text-align: center; } .wizard__success[hidden] { display: none; } .success-mark { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); } .wizard__success h3 { font-size: clamp(1.3rem, 3.6vw, 1.55rem); margin-bottom: 10px; } .wizard__success > p { max-width: 46ch; margin-inline: auto; color: var(--body); } .next-steps { list-style: none; padding: 0; margin: 22px auto 0; max-width: 400px; text-align: left; display: grid; gap: 12px; } .next-steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--ice); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; font-size: 0.93rem; margin: 0; } .next-steps .n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; } @media (min-width: 560px) { .wizard__progress { padding: 22px 28px 0; } .wizard__body { padding: 26px 28px 28px; } .wizard__success { padding: 40px 32px 44px; } } /* -------------------------------------------------------------------------- 9. Content sections -------------------------------------------------------------------------- */ .cards { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: clamp(24px, 4vw, 36px); } @media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); } .card h3 { margin-bottom: 8px; } .card p { font-size: 0.96rem; color: var(--body); } .card p:last-child { margin-bottom: 0; } .card__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ice); color: var(--blue-800); margin-bottom: 14px; } .steps { counter-reset: step; list-style: none; padding: 0; margin: clamp(24px, 4vw, 36px) 0 0; display: grid; gap: 18px; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } } .steps li { position: relative; counter-increment: step; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 24px; margin: 0; box-shadow: var(--shadow-sm); } .steps li::before { content: counter(step); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700; font-size: 1rem; margin-bottom: 14px; } .steps h3 { font-size: 1.08rem; margin-bottom: 6px; } .steps p { font-size: 0.95rem; margin: 0; color: var(--body); } .areas__grid { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; } @media (min-width: 880px) { .areas__grid { grid-template-columns: 1.25fr 0.75fr; } } .area-list { list-style: none; padding: 22px; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .area-list h3 { font-size: 1rem; margin-bottom: 12px; } .area-list li { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--ice-200); font-size: 0.96rem; color: var(--navy); font-weight: 600; margin: 0; } .area-list li:last-child { border-bottom: 0; } .area-list svg { color: var(--blue); flex: 0 0 auto; } .cost-factors { list-style: none; padding: 0; margin: clamp(20px, 3vw, 30px) 0 0; display: grid; gap: 12px; } @media (min-width: 640px) { .cost-factors { grid-template-columns: repeat(2, 1fr); } } .cost-factors li { display: flex; gap: 11px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 17px; margin: 0; font-size: 0.95rem; } .cost-factors strong { display: block; color: var(--navy); font-size: 0.97rem; } .cost-factors span { color: var(--muted); font-size: 0.9rem; } .cost-factors svg { color: var(--blue); flex: 0 0 auto; margin-top: 3px; } .inline-cta { margin-top: clamp(26px, 4vw, 34px); } .uses { margin-top: clamp(24px, 4vw, 36px); display: grid; gap: 14px; } @media (min-width: 720px) { .uses { grid-template-columns: repeat(2, 1fr); } } .use { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: var(--r-md); padding: 20px 22px; } .use h3 { font-size: 1.05rem; margin-bottom: 6px; } .use p { font-size: 0.95rem; margin: 0; } /* FAQ */ .faq { margin-top: clamp(24px, 4vw, 34px); max-width: 820px; } .faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; } .faq__item summary { list-style: none; cursor: pointer; display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 17px 20px; font-weight: 650; font-size: 1.01rem; color: var(--navy); line-height: 1.4; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary:hover { background: var(--ice); } .faq__item summary .plus { flex: 0 0 auto; width: 24px; height: 24px; position: relative; color: var(--blue); } .faq__item summary .plus::before, .faq__item summary .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; } .faq__item summary .plus::before { left: 4px; right: 4px; top: 11px; height: 2px; } .faq__item summary .plus::after { top: 4px; bottom: 4px; left: 11px; width: 2px; } .faq__item[open] summary .plus::after { transform: scaleY(0); opacity: 0; } .faq__item[open] summary { background: var(--ice); } .faq__answer { padding: 2px 20px 18px; font-size: 0.97rem; } .faq__answer p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 10. Final CTA + footer -------------------------------------------------------------------------- */ .final-cta { background: radial-gradient(80% 140% at 85% 10%, #164263 0%, rgba(22, 66, 99, 0) 62%), var(--navy); color: #cfe0ec; padding-block: clamp(48px, 8vw, 84px); text-align: center; } .final-cta h2 { color: var(--white); max-width: 22ch; margin-inline: auto; } .final-cta p { max-width: 50ch; margin-inline: auto; margin-bottom: 1.8em; color: #c3d7e6; } .final-cta .btn { min-width: min(320px, 100%); } .final-cta__micro { margin-top: 16px; font-size: 0.9rem; color: #9fbacd; margin-bottom: 0; } .site-footer { background: var(--navy); color: #9fbacd; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 34px; font-size: 0.9rem; } .site-footer__inner { display: grid; gap: 18px; } .site-footer .brand { color: var(--white); font-size: 1.1rem; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .site-footer a { color: #c3d7e6; text-decoration: none; } .site-footer a:hover { color: var(--white); text-decoration: underline; } .site-footer__legal { color: #7f9cb2; font-size: 0.83rem; line-height: 1.6; margin: 0; } @media (min-width: 720px) { .site-footer__inner { grid-template-columns: auto 1fr; align-items: center; } .site-footer nav { justify-content: flex-end; } .site-footer__legal { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.09); } } /* -------------------------------------------------------------------------- 11. Sticky mobile CTA -------------------------------------------------------------------------- */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(150%) blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(11, 31, 51, 0.08); transform: translateY(110%); transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1); } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta .btn { width: 100%; min-height: 50px; } body.has-sticky-cta { padding-bottom: 76px; } @media (min-width: 900px) { .sticky-cta { display: none; } body.has-sticky-cta { padding-bottom: 0; } } @media print { .sticky-cta, .site-header, .wizard__nav { display: none !important; } } /* Placeholder legal links (until the real pages exist). */ .placeholder-note { color: inherit; opacity: 0.75; font-style: italic; } form[hidden] { display: none !important; } .wizard__timing { font-weight: 500; color: var(--muted); } .noscript-note { max-width: 660px; margin: 0 auto 16px; padding: 14px 18px; background: var(--white); border: 1px solid var(--line-strong); border-left: 3px solid var(--blue); border-radius: var(--r-md); color: var(--navy); font-weight: 600; font-size: 0.95rem; } /* The step heading receives focus programmatically on each step change so screen readers announce it; it is not interactive, so no focus ring. */ .step__legend:focus { outline: none; } /* -------------------------------------------------------------------------- Tees Transporter Bridge. On narrow screens it sits between the hero copy and the illustration, where it is legible. On wide screens it moves to the right of the copy and bleeds off the edge, behind the illustration. -------------------------------------------------------------------------- */ .hero > .wrap { position: relative; z-index: 1; } .bridge { width: 100%; aspect-ratio: 1200 / 300; margin: 22px 0 4px; background-color: var(--navy-700); -webkit-mask: url("/assets/img/tees-transporter-bridge.svg") no-repeat bottom center / 100% auto; mask: url("/assets/img/tees-transporter-bridge.svg") no-repeat bottom center / 100% auto; opacity: 0.18; pointer-events: none; } @media (min-width: 900px) { .bridge { position: absolute; right: -20%; bottom: -26px; z-index: -1; width: min(1120px, 70%); margin: 0; opacity: 0.16; } } /* -------------------------------------------------------------------------- Cooled air drifting from the indoor unit. Motion is slow and low-contrast: it should read as air moving, not as an animation. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .airflow path { animation: air-drift 5.4s ease-in-out infinite; } .airflow path:nth-child(2) { animation-delay: 0.85s; } .airflow path:nth-child(3) { animation-delay: 1.7s; } } @keyframes air-drift { 0%, 100% { opacity: 0.2; transform: translate(-12px, 3px); } 50% { opacity: 1; transform: translate(9px, -3px); } } /* ========================================================================== Directory, location and guide page types ========================================================================== */ /* ------------------------------------------------------------ breadcrumbs */ .crumbs { border-bottom: 1px solid var(--line); background: var(--white); font-size: 0.86rem; } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; list-style: none; margin: 0; padding: 10px 0; } .crumbs li { margin: 0; color: var(--muted); } .crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-strong); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--blue-800); text-decoration: underline; } .crumbs li[aria-current] { color: var(--navy); font-weight: 600; } /* --------------------------------------------------------- service picker */ .servicegrid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: clamp(24px, 4vw, 34px); } @media (min-width: 720px) { .servicegrid { grid-template-columns: repeat(2, 1fr); } } .servicecard { display: block; padding: 26px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } a.servicecard:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; } .servicecard__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: var(--ice); color: var(--blue-800); margin-bottom: 15px; } .servicecard h3 { margin-bottom: 7px; } .servicecard p { font-size: 0.96rem; color: var(--body); margin-bottom: 14px; } .servicecard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--blue-800); font-size: 0.96rem; } .servicecard--soon { background: transparent; border-style: dashed; box-shadow: none; } .servicecard--soon .servicecard__icon { background: var(--white); border: 1px solid var(--line); color: var(--muted); } .servicecard--soon h3 { color: var(--muted); } /* ------------------------------------------------------------- area picker */ .arealist { list-style: none; padding: 0; margin: clamp(22px, 4vw, 30px) 0 0; display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 560px) { .arealist { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .arealist { grid-template-columns: repeat(4, 1fr); } } .arealist li { margin: 0; } .arealink { display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--navy); box-shadow: var(--shadow-sm); transition: border-color 0.14s ease, transform 0.14s ease; } .arealink:hover { border-color: var(--blue); transform: translateY(-1px); color: var(--navy); } .arealink svg { color: var(--blue); flex: 0 0 auto; } .arealink strong { display: block; font-weight: 650; font-size: 1rem; line-height: 1.3; } .arealink small { display: block; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.03em; } /* ------------------------------------------------------------- link lists */ .linklist { list-style: none; padding: 0; margin: clamp(18px, 3vw, 26px) 0 0; display: grid; gap: 0; max-width: 720px; } .linklist li { margin: 0; border-bottom: 1px solid var(--line); } .linklist li:first-child { border-top: 1px solid var(--line); } .linklist a { display: flex; align-items: center; gap: 9px; padding: 14px 4px; color: var(--navy); font-weight: 600; text-decoration: none; font-size: 1rem; } .linklist a:hover { color: var(--blue-800); } .linklist a::after { content: "\203A"; margin-left: auto; color: var(--blue); font-size: 1.3rem; line-height: 1; } .linklist svg { color: var(--blue); flex: 0 0 auto; } .area-list__links { list-style: none; padding: 0; margin: 0; } .area-list__links li { border-bottom: 1px solid var(--ice-200); padding: 0; margin: 0; } .area-list__links li:last-child { border-bottom: 0; } .area-list__links a { display: flex; align-items: center; gap: 9px; padding: 10px 0; color: var(--navy); font-weight: 600; font-size: 0.94rem; text-decoration: none; } .area-list__links a:hover { color: var(--blue-800); } .area-list__links svg { color: var(--blue); flex: 0 0 auto; } /* ------------------------------------------------------- real-data panel */ .datapanel { margin-top: clamp(26px, 4vw, 36px); padding: 24px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r-md); max-width: 720px; } .datapanel h3 { margin-bottom: 14px; font-size: 1.05rem; } .datapanel dl { display: grid; gap: 12px 22px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 0 0 12px; } .datapanel dt { font-size: 0.85rem; color: var(--muted); } .datapanel dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--navy); } /* ------------------------------------------------------------ guide cards */ .guidegrid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: clamp(24px, 4vw, 34px); } @media (min-width: 680px) { .guidegrid { grid-template-columns: repeat(2, 1fr); } } .guidecard { display: block; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease; } .guidecard:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: var(--shadow-md); color: inherit; } .guidecard h3 { margin-bottom: 8px; font-size: 1.1rem; } .guidecard p { font-size: 0.94rem; color: var(--body); margin-bottom: 13px; } .guidecard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--blue-800); font-size: 0.93rem; } /* ------------------------------------------------------------ guide pages */ .guide { padding-block: clamp(28px, 5vw, 48px) clamp(40px, 7vw, 72px); } .guide__head { margin-bottom: clamp(24px, 4vw, 34px); } .guide__head h1 { margin-bottom: 0.4em; } .guide__summary { font-size: clamp(1.05rem, 2.4vw, 1.18rem); color: var(--body); margin-bottom: 0.8em; } .guide__meta { font-size: 0.85rem; color: var(--muted); margin: 0; } .guide__toc { background: var(--ice); border: 1px solid var(--ice-200); border-radius: var(--r-md); padding: 18px 22px; margin-bottom: clamp(26px, 4vw, 38px); } .guide__toc h2 { font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-800); margin-bottom: 10px; } .guide__toc ol { margin: 0; padding-left: 1.15em; } .guide__toc li { margin-bottom: 5px; font-size: 0.95rem; } .guide__toc a { color: var(--navy); text-decoration: none; } .guide__toc a:hover { color: var(--blue-800); text-decoration: underline; } .guide__section { margin-bottom: clamp(30px, 5vw, 44px); scroll-margin-top: 88px; } .guide__section h2 { padding-top: 8px; border-top: 2px solid var(--ice-200); margin-bottom: 0.6em; } .guide__section h3 { font-size: 1.08rem; margin: 1.6em 0 0.35em; color: var(--navy); } .guide__section ul { padding-left: 1.2em; } .guide__section li { margin-bottom: 0.45em; } /* A section that is waiting on real data rather than being padded out. */ .guide__section--pending h2::after { content: "Coming soon"; display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--ice); border: 1px solid var(--line); color: var(--muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle; } .note { margin: 1.3em 0; padding: 15px 18px; background: var(--ice); border-left: 3px solid var(--cyan); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .note p { margin: 0; font-size: 0.96rem; color: var(--navy); } .guide__cta { margin: clamp(32px, 5vw, 46px) 0; padding: 28px 26px; background: var(--navy); border-radius: var(--r-lg); text-align: center; color: #c3d7e6; } .guide__cta h2 { color: var(--white); border: 0; padding: 0; margin-bottom: 0.4em; font-size: clamp(1.25rem, 3vw, 1.5rem); } .guide__cta p { margin-bottom: 1.3em; } .guide__cta-micro { font-size: 0.85rem; color: #9fbacd; margin: 14px 0 0; } .guide__faq, .guide__related { margin-top: clamp(30px, 5vw, 44px); } .guide__faq h2, .guide__related h2 { padding-top: 8px; border-top: 2px solid var(--ice-200); margin-bottom: 0.7em; } /* Home hero has no long supporting paragraph, so it needs less bottom space. */ .hero--home .hero__micro { margin-bottom: 4px; } /* -------------------------------------------------------------------------- Local colour. An area page wears its town's colours in the hero, and only in the hero. Only in the hero for two reasons. Red is already the error colour in this system, so a page of it makes a failed form ambiguous; and the buttons, links and focus rings are what tell someone they are still on Handld.it rather than somewhere else. A stripe and a badge read as local pride. A fully recoloured page reads as a different website. Adding a town is one line. A town without one falls back to the service's own colour and looks exactly as it does today, so this never has to be complete to be correct. -------------------------------------------------------------------------- */ .hero--location { --local: var(--blue); --local-ink: var(--white); /* The stripe is the one place the town colour has to hold its own against white. A light club colour needs a deeper shade here or the stripe washes out; --local-line exists so a town can say so without darkening the badge it sits above. */ --local-line: var(--local); border-top: 5px solid var(--local-line); background: radial-gradient(90% 120% at 82% 0%, color-mix(in srgb, var(--local) 15%, var(--white)) 0%, transparent 62%), var(--ice); } [data-location="middlesbrough"] .hero--location { --local: #d6001c; --local-ink: #ffffff; } [data-location="stockton-on-tees"] .hero--location { --local: #ffcf00; --local-ink: #1b1400; --local-line: #a87d00; } .hero--location .hero__badge { background: var(--local); border-color: color-mix(in srgb, var(--local) 74%, #000); color: var(--local-ink); box-shadow: none; } /* The town's name in the heading takes its colour. Deliberately off-brand — it is the one word on the page that is about where you are rather than what we do, so it is the one word worth colouring. --local-line rather than --local because this is text: a club colour light enough to need a dark badge is too light to read as a heading. */ .hero--location .hero__local { color: var(--local-line); } .hero--location .bridge { background-color: color-mix(in srgb, var(--local-line) 78%, var(--navy)); opacity: 0.24; } /* =========================================================================== * Installer profiles * ======================================================================== */ /* Small uppercase pill. Marks example content and unpublished profiles. */ .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ice); border: 1px solid var(--line); color: var(--muted); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; vertical-align: middle; } /* Draft banner. Loud on purpose: this page is not published. */ .draftbar { background: #fff6e5; border-bottom: 1px solid #f0d9a8; color: #5c4310; font-size: 0.92rem; padding: 12px 0; } .draftbar strong { color: #3f2d06; } .draftbar code { background: rgba(0, 0, 0, 0.05); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; } .hero--installer { padding-bottom: clamp(28px, 5vw, 44px); } .profile__head { display: grid; gap: clamp(22px, 4vw, 34px); align-items: start; } @media (min-width: 900px) { .profile__head { grid-template-columns: 1.35fr 0.65fr; } } .glance { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; } .glance h2 { font-size: 1rem; margin-bottom: 14px; } .glance dl { margin: 0; display: grid; gap: 12px; } .glance dt { font-size: 0.82rem; color: var(--muted); } .glance dd { margin: 2px 0 0; font-weight: 700; color: var(--navy); font-size: 1rem; } .glance .field__hint { margin: 16px 0 0; } /* Capability checklists — services, property types, system types. */ .capgrid { display: grid; gap: 14px; } @media (min-width: 720px) { .capgrid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .capgrid { grid-template-columns: repeat(3, 1fr); } } .capcard { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--cyan); border-radius: var(--r-md); padding: 20px 22px; } .capcard h3 { font-size: 1.02rem; margin-bottom: 12px; } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .checks li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.95rem; } .checks svg { color: var(--success); flex: 0 0 auto; margin-top: 1px; } .caplimits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 20px 0 0; font-size: 0.92rem; color: var(--muted); } .caplimits svg { color: var(--blue); display: inline-block; vertical-align: -3px; margin-right: 6px; } /* Job photos. A placeholder tile is styled to read as a gap to be filled, never as a photograph of work that exists. */ .jobshots { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .jobshots { grid-template-columns: repeat(4, 1fr); } } .jobshot { margin: 0; } .jobshot img, .jobshot__frame { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); object-fit: cover; background: var(--white); border: 1px solid var(--line); } .jobshot__frame { display: grid; place-items: center; background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(52, 182, 217, 0.07) 11px 22px), linear-gradient(160deg, var(--white), var(--ice-200)); border-style: dashed; border-color: var(--line-strong); color: var(--blue); } .jobshot figcaption { margin-top: 9px; font-size: 0.86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Working hours. */ .hours { width: 100%; border-collapse: collapse; font-size: 0.93rem; } .hours th, .hours td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; } .hours th { font-weight: 500; color: var(--body); } .hours td { text-align: right; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; } .hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; } .hours__closed { color: var(--muted); font-weight: 500; } /* Testimonials. */ .testimonials { display: grid; gap: 14px; } @media (min-width: 760px) { .testimonials { grid-template-columns: repeat(2, 1fr); } } .testimonial { margin: 0; padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r-md); } .testimonial p { margin: 0 0 12px; color: var(--navy); font-size: 1rem; } .testimonial p::before { content: "\201C"; } .testimonial p::after { content: "\201D"; } .testimonial cite { font-style: normal; font-size: 0.88rem; color: var(--muted); font-weight: 600; } .testimonial--placeholder { border-left-style: dashed; border-left-color: var(--line-strong); background: var(--ice); } .testimonial--placeholder p { color: var(--muted); font-style: italic; } /* Installer cards — the index, and the "who covers this area" block. */ .installers { display: grid; gap: 14px; } @media (min-width: 760px) { .installers { grid-template-columns: repeat(2, 1fr); } } .installercard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .installercard--draft { border-style: dashed; box-shadow: none; } .installercard__head h3 { font-size: 1.12rem; margin: 0 0 4px; } .installercard__head h3 a { color: var(--navy); text-decoration: none; } .installercard__head h3 a:hover { color: var(--blue-800); text-decoration: underline; } .installercard__meta { margin: 0; font-size: 0.88rem; color: var(--muted); } .installercard__context { margin: 0; font-size: 0.93rem; } .installercard__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } .installercard__points li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; } .installercard__points svg { color: var(--success); flex: 0 0 auto; margin-top: 2px; } .installercard__wait { margin: 0; font-size: 0.9rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); } .installercard__wait svg { color: var(--blue); display: inline-block; vertical-align: -3px; margin-right: 6px; } .installercard__go { margin: auto 0 0; font-size: 0.93rem; font-weight: 600; } .installercard__go svg { display: inline-block; vertical-align: -2px; }