/* ============================================================ THEME / PALETTE TOKENS Switch palette by setting data-palette on . ============================================================ */ :root { /* Default: EMBER (terracotta on cream) — good for plumbers, general trades */ --bg: #f7f1e8; --bg-soft: #f0e8da; --bg-card: #ffffff; --ink: #1c1612; --ink-soft: #5a4f44; --ink-faint: #8b7e70; --line: rgba(28, 22, 18, 0.10); --line-strong: rgba(28, 22, 18, 0.22); --accent: #c1502e; --accent-deep: #8e3819; --accent-soft: rgba(193, 80, 46, 0.10); --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', monospace; --max: 1240px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --radius-sm: 6px; --radius: 14px; --radius-lg: 22px; --shadow-card: 0 1px 0 rgba(28,22,18,0.04), 0 10px 30px -12px rgba(28,22,18,0.18); --shadow-hover: 0 1px 0 rgba(28,22,18,0.06), 0 18px 50px -16px rgba(28,22,18,0.28); } /* ─── PALETTE: SECURITY (deep blue) — locksmiths, security ─── */ [data-palette="security"] { --bg: #f1eee7; --bg-soft: #e7e3d9; --ink: #111721; --ink-soft: #3c4654; --ink-faint: #7a8497; --accent: #2b4a78; --accent-deep: #1a3258; --accent-soft: rgba(43, 74, 120, 0.10); } /* ─── PALETTE: FOREST (deep green) — tree felling, gardens ─── */ [data-palette="forest"] { --bg: #f3efe5; --bg-soft: #e9e3d5; --ink: #161e18; --ink-soft: #44504a; --ink-faint: #7a8a80; --accent: #3e6b3a; --accent-deep: #254523; --accent-soft: rgba(62, 107, 58, 0.10); } /* ─── PALETTE: VOLT (warm amber) — electricians, aircon ─── */ [data-palette="volt"] { --bg: #f6f1e7; --bg-soft: #ede5d3; --ink: #1d1709; --ink-soft: #574b32; --ink-faint: #8c7e62; --accent: #b8730a; --accent-deep: #835008; --accent-soft: rgba(184, 115, 10, 0.10); } /* ─── PALETTE: TIDE (deep teal) — pools, water ─── */ [data-palette="tide"] { --bg: #eef2f1; --bg-soft: #e0e7e6; --ink: #0f1c1e; --ink-soft: #3a4c4e; --ink-faint: #7a8a8c; --accent: #1e6470; --accent-deep: #11444e; --accent-soft: rgba(30, 100, 112, 0.10); } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); background-image: radial-gradient(1200px 600px at 100% 0%, var(--accent-soft), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(28,22,18,0.04), transparent 60%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Subtle paper grain */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000; opacity: 0.4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; text-decoration-skip-ink: auto; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, textarea { font: inherit; color: inherit; background: transparent; border: 0; outline: none; } ::selection { background: var(--accent); color: #fff; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; font-variation-settings: "opsz" 144; } /* ============================================================ UTILITIES ============================================================ */ .eyebrow { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; display: inline-flex; align-items: center; gap: 0.6em; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); display: inline-block; } .section { padding: clamp(4rem, 9vw, 8rem) var(--gutter); max-width: var(--max); margin: 0 auto; } .section__head { max-width: 740px; margin-bottom: clamp(2rem, 5vw, 4rem); } .section__head--center { text-align: center; margin-left: auto; margin-right: auto; } .section__head--center .eyebrow { justify-content: center; } .section__title { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 1rem; } .section__lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 60ch; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; border-radius: 999px; border: 1.5px solid transparent; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn__icon { width: 18px; height: 18px; } .btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--block { width: 100%; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background-color 0.2s ease; } .nav.is-scrolled { border-color: var(--line); } .nav__inner { max-width: var(--max); margin: 0 auto; padding: 0.9rem var(--gutter); display: flex; align-items: center; gap: 2.5rem; } .nav__logo { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; flex-shrink: 0; } .nav__logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); position: relative; flex-shrink: 0; } .nav__logo-mark::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid var(--accent); border-radius: 4px; } /* ─── Generated logo monogram (per-client brand mark) ─── */ .logo-mark--mono { display: inline-flex !important; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; background: var(--accent); color: #fff; overflow: hidden; } .logo-mark--mono::after { display: none !important; } .nav__logo-mark.logo-mark--mono { font-size: 0.92rem; } .footer__brand-mark.logo-mark--mono { font-size: 1.15rem; background: var(--accent); } .nav__links { display: flex; gap: 1.8rem; margin-left: auto; font-size: 0.95rem; color: var(--ink-soft); } .nav__links a { position: relative; padding: 0.3rem 0; transition: color 0.15s ease; } .nav__links a:hover { color: var(--ink); } .nav__links a::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: var(--accent); transition: width 0.2s ease; } .nav__links a:hover::after { width: 100%; } .nav__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem 0.55rem 0.85rem; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: 0.9rem; font-weight: 600; transition: background 0.2s ease; } .nav__cta:hover { background: var(--accent-deep); } .nav__cta-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; position: relative; box-shadow: 0 0 0 0 rgba(34,197,94, 0.7); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0); } } @media (max-width: 820px) { .nav__links { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) 0; overflow: hidden; } .hero__bg { position: absolute; inset: -10% -20% auto; height: 70%; background: radial-gradient(50% 60% at 80% 20%, var(--accent-soft), transparent 70%), radial-gradient(40% 50% at 0% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%); z-index: 0; } .hero__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 4rem); } .hero__photo { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); } .hero__photo img { display: block; width: 100%; height: clamp(220px, 38vw, 460px); object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); animation: fadeUp 0.7s 0.6s ease both; } .hero__copy { max-width: 720px; } .hero__title { font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 0.98; margin-bottom: 1.4rem; animation: fadeUp 0.7s 0.05s ease both; } .hero__title em { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "wght" 500; } .hero__lead { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--ink-soft); max-width: 56ch; margin-bottom: 2rem; line-height: 1.45; animation: fadeUp 0.7s 0.2s ease both; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2.5rem; animation: fadeUp 0.7s 0.35s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .trust-strip { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 0; font-size: 0.9rem; color: var(--ink-soft); animation: fadeUp 0.7s 0.5s ease both; } .trust-strip li { display: flex; align-items: center; gap: 0.5rem; padding-right: 1.1rem; margin-right: 1.1rem; border-right: 1px solid var(--line); } .trust-strip li:last-child { border-right: 0; } .trust-strip li::before { content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } .hero__card { position: relative; padding: 1.75rem; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transform: rotate(1.2deg); animation: cardIn 0.9s 0.5s cubic-bezier(.22,.9,.36,1) both; } @keyframes cardIn { from { opacity: 0; transform: rotate(0deg) translateY(20px); } to { opacity: 1; transform: rotate(1.2deg) translateY(0); } } .hero__card-rating { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .hero__card-stars { display: inline-flex; gap: 2px; color: #f59e0b; } .hero__card-stars svg { width: 16px; height: 16px; } .hero__card-text { font-size: 0.88rem; color: var(--ink-soft); } .hero__card-text strong { color: var(--ink); font-weight: 600; } .hero__card-quote { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.4; color: var(--ink); margin-bottom: 0.85rem; quotes: '"' '"'; } .hero__card-cite { font-size: 0.85rem; color: var(--ink-faint); font-style: normal; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__card { max-width: 480px; transform: rotate(0); } } /* Marquee under hero */ .marquee { position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; background: var(--bg-soft); overflow: hidden; margin: 0 calc(var(--gutter) * -1); } .marquee__track { display: flex; gap: 3rem; white-space: nowrap; animation: marquee 30s linear infinite; font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--ink-soft); } .marquee__track span { display: inline-flex; align-items: center; gap: 3rem; } .marquee__track span::after { content: "✦"; color: var(--accent); font-style: normal; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ SERVICES ============================================================ */ .services__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .service { background: var(--bg); padding: 2rem 1.75rem; position: relative; transition: background 0.2s ease; } .service:hover { background: var(--bg-soft); } .service__top { display: flex; align-items: center; justify-content: space-between; } .service__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; } .service__icon svg { width: 22px; height: 22px; } .service:hover .service__icon { background: var(--accent); color: var(--bg-card); } .service__num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.05em; } .service__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; margin: 0.6rem 0 0.65rem; } .service__desc { font-size: 0.96rem; color: var(--ink-soft); line-height: 1.5; } /* ============================================================ WORK / GALLERY (blueprint-style diagrams) ============================================================ */ .gallery__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .gallery-card__art { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-card:hover .gallery-card__art { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .gallery-card__art svg { width: 100%; height: 100%; display: block; } /* Photo variant of the gallery card */ .gallery-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .gallery-card--photo:hover .gallery-card__art img { transform: scale(1.04); } .gallery-card__body { padding-top: 1.1rem; } .gallery-card__fig { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.45rem; display: block; } .gallery-card__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.35rem; } .gallery-card__caption { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; } /* Shared "blueprint" diagram styling — used inside gallery SVGs */ .bp-grid-line { fill: none; stroke: var(--line); stroke-width: 1; } .bp-bg { fill: var(--bg-card); } .bp-paper { fill: var(--bg-soft); } .bp-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .bp-accent { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .bp-fill-accent { fill: var(--accent); stroke: none; } .bp-fill-ink { fill: var(--ink); stroke: none; } .bp-dim { fill: none; stroke: var(--ink-faint); stroke-width: 0.75; stroke-dasharray: 2 2; } .bp-label { font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.04em; fill: var(--ink-faint); } .bp-label--accent { fill: var(--accent); font-weight: 500; } @media (max-width: 540px) { .bp-label { font-size: 7px; } } /* ============================================================ PHOTO BAND (optional full-width image break) ============================================================ */ .band { position: relative; margin: clamp(1rem, 4vw, 3rem) 0; overflow: hidden; } .band[hidden] { display: none; } .band__img { width: 100%; height: clamp(220px, 30vw, 380px); object-fit: cover; display: block; } .band__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter); background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 78%, transparent) 0%, color-mix(in srgb, var(--ink) 40%, transparent) 45%, transparent 80%); } .band__text { font-family: var(--font-display); font-style: italic; font-weight: 500; color: #fff; font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; text-shadow: 0 1px 14px rgba(0,0,0,0.35); } /* ============================================================ AREAS ============================================================ */ .areas { background: var(--bg-soft); border-radius: var(--radius-lg); margin-top: 0; } .areas__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; } .areas__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.55rem 1rem; margin: 1.5rem 0 1rem; } .areas__list li { font-size: 0.95rem; color: var(--ink); padding: 0.45rem 0; border-bottom: 1px dashed var(--line); display: flex; align-items: center; gap: 0.5rem; } .areas__list li::before { content: "→"; color: var(--accent); font-size: 0.85rem; } .areas__note { font-size: 0.92rem; color: var(--ink-faint); margin-top: 1rem; font-style: italic; } .areas__map { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--bg); aspect-ratio: 4 / 3; } .areas__map iframe { width: 100%; height: 100%; border: 0; filter: contrast(0.95) saturate(0.85); } @media (max-width: 820px) { .areas__inner { grid-template-columns: 1fr; } } /* ============================================================ WHY ============================================================ */ .why__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; } .why-item { text-align: center; padding: 1.5rem 1rem; } .why-item__num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; font-style: italic; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 50%; margin-bottom: 1.2rem; } .why-item__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.55rem; } .why-item__desc { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; } /* ============================================================ REVIEWS ============================================================ */ .reviews__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .review { background: var(--bg-card); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .review__stars { display: inline-flex; gap: 2px; color: #f59e0b; } .review__stars svg { width: 16px; height: 16px; } .review__body { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.45; color: var(--ink); flex: 1; } .review__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.88rem; } .review__name { font-weight: 600; color: var(--ink); } .review__source { color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.4rem; } /* ============================================================ FAQ ============================================================ */ .faq__list { max-width: 760px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .faq-item summary::-webkit-details-marker, .faq-item summary::marker { display: none; content: ""; } .faq-item__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); flex-shrink: 0; padding-top: 0.3rem; } .faq-item__q { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.3; flex: 1; } .faq-item__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--ink-faint); transition: transform 0.25s ease, color 0.2s ease; } .faq-item:hover .faq-item__icon { color: var(--accent); } .faq-item[open] .faq-item__icon { transform: rotate(45deg); } .faq-item__answer { padding: 0 0 1.5rem calc(0.78rem + 1.1rem + 1ch); margin: -0.5rem 0 0; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; max-width: 62ch; } @media (max-width: 560px) { .faq-item__answer { padding-left: 0; } } /* ============================================================ CONTACT ============================================================ */ .contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 4.5rem); } .contact__direct { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.4rem; max-width: 380px; } .contact__direct-row { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--line); gap: 1rem; } .contact__direct-label { font-size: 0.82rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; flex-shrink: 0; } .contact__direct-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; text-align: right; } a.contact__direct-row { transition: color 0.15s ease; } a.contact__direct-row:hover .contact__direct-value { color: var(--accent); } .form { background: var(--bg-card); padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 1.2rem; } .form__field { display: flex; flex-direction: column; gap: 0.45rem; } .form__label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; } .form input, .form textarea { padding: 0.85rem 1rem; background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 1rem; transition: border-color 0.15s ease, background 0.15s ease; font-family: inherit; resize: vertical; } .form input:focus, .form textarea:focus { border-color: var(--accent); background: #fff; } .form input::placeholder, .form textarea::placeholder { color: var(--ink-faint); } .form input.is-invalid, .form textarea.is-invalid { border-color: #c0392b; background: rgba(192, 57, 43, 0.04); } .form__note { font-size: 0.82rem; color: var(--ink-faint); text-align: center; } @media (max-width: 820px) { .contact__inner { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--ink); color: color-mix(in srgb, var(--bg) 80%, transparent); padding: clamp(3rem, 6vw, 5rem) var(--gutter) 1.5rem; margin-top: 4rem; } .footer__inner { max-width: var(--max); margin: 0 auto; } .footer__brand { display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 2.5rem; } .footer__brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); position: relative; flex-shrink: 0; } .footer__brand-mark::after { content: ""; position: absolute; inset: 7px; border: 1.5px solid var(--accent); border-radius: 5px; } .footer__brand-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--bg); } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid color-mix(in srgb, var(--bg) 15%, transparent); } .footer__col h4 { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 50%, transparent); margin-bottom: 0.7rem; } .footer__col a, .footer__col span { font-family: var(--font-display); font-size: 1.15rem; color: var(--bg); transition: color 0.15s ease; } .footer__col a:hover { color: var(--accent); } .footer__bottom { padding-top: 1.5rem; font-size: 0.83rem; color: color-mix(in srgb, var(--bg) 50%, transparent); } /* ============================================================ STICKY MOBILE CALL BAR ============================================================ */ .callbar { position: fixed; bottom: 0; left: 0; right: 0; display: none; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 0.6rem; gap: 0.6rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); } .callbar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 12px; font-weight: 600; font-size: 0.95rem; } .callbar__btn svg { width: 18px; height: 18px; } .callbar__btn--call { background: var(--ink); color: var(--bg); } .callbar__btn--wa { background: #25d366; color: #fff; } @media (max-width: 820px) { .callbar { display: flex; } body { padding-bottom: 80px; } } /* ============================================================ PREMIUM LAYER (2026-07-02) — see claude-dev/UPGRADE_RECIPE.md Everything below is additive: remove this block and the page falls back to the standard template look. ============================================================ */ /* Dark-surface tokens. Defaults suit the "security" palette (navy night + brass keys); per-palette overrides follow. */ :root { --dk-bg: #0c1524; --dk-bg-soft: #131f33; --dk-ink: #f4f1e9; --dk-ink-soft: #b9c0cf; --dk-ink-faint: #7d8699; --dk-line: rgba(244, 241, 233, 0.14); --brass: #d9a441; --brass-deep: #b17f24; --brass-soft: rgba(217, 164, 65, 0.14); --brass-hover: #e5b658; --brass-glow: rgba(217, 164, 65, 0.55); --on-brass: #1a1305; } /* Each trade family gets its own night scene + metal accent. */ [data-palette="ember"] { /* plumbers, general: soot + warm copper */ --dk-bg: #191009; --dk-bg-soft: #241a11; --brass: #e08b4e; --brass-hover: #eb9f66; --brass-soft: rgba(224, 139, 78, 0.14); --brass-glow: rgba(224, 139, 78, 0.5); --on-brass: #200f04; } [data-palette="forest"] { /* tree felling: deep woodland + amber */ --dk-bg: #0d1710; --dk-bg-soft: #152219; --brass: #c9a24b; --brass-hover: #d8b465; --brass-soft: rgba(201, 162, 75, 0.14); --brass-glow: rgba(201, 162, 75, 0.5); --on-brass: #171001; } [data-palette="volt"] { /* electrical, aircon: near-black + hot gold */ --dk-bg: #14110a; --dk-bg-soft: #1e1a10; --brass: #e6b53a; --brass-hover: #f0c65b; --brass-soft: rgba(230, 181, 58, 0.15); --brass-glow: rgba(230, 181, 58, 0.55); --on-brass: #1c1301; } [data-palette="tide"] { /* pools, cleaning: deep water + aqua */ --dk-bg: #081a1f; --dk-bg-soft: #10262c; --brass: #6fcabf; --brass-hover: #8adcd2; --brass-soft: rgba(111, 202, 191, 0.15); --brass-glow: rgba(111, 202, 191, 0.45); --on-brass: #04211f; } /* ─── Dark cinematic hero ─── */ .hero--dark { background: radial-gradient(90rem 40rem at 85% -10%, var(--brass-soft), transparent 55%), radial-gradient(60rem 40rem at -10% 110%, rgba(43, 74, 120, 0.35), transparent 60%), linear-gradient(168deg, var(--dk-bg) 0%, var(--dk-bg-soft) 100%); color: var(--dk-ink); } .hero--dark .hero__bg { display: none; } .hero--dark .hero__title { color: var(--dk-ink); } .hero--dark .hero__title em { color: var(--brass); } .hero--dark .hero__lead { color: var(--dk-ink-soft); } .hero--dark .eyebrow { color: var(--brass); } .hero--dark .eyebrow::before { background: var(--brass); } .hero--dark .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--on-brass); box-shadow: 0 10px 30px -10px var(--brass-glow); } .hero--dark .btn--primary:hover { background: var(--brass-hover); border-color: var(--brass-hover); box-shadow: 0 14px 36px -10px var(--brass-glow); } .hero--dark .btn--ghost { color: var(--dk-ink); border-color: var(--dk-line); } .hero--dark .btn--ghost:hover { background: var(--dk-ink); color: var(--dk-bg); border-color: var(--dk-ink); } .hero--dark .trust-strip { color: var(--dk-ink-soft); } .hero--dark .trust-strip li { border-right-color: var(--dk-line); } .hero--dark .trust-strip li::before { background: var(--brass); } /* Review card goes glass on dark */ .hero--dark .hero__card { background: rgba(244, 241, 233, 0.07); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--dk-line); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.6); } .hero--dark .hero__card-rating { border-bottom-color: var(--dk-line); } .hero--dark .hero__card-text { color: var(--dk-ink-soft); } .hero--dark .hero__card-text strong { color: var(--dk-ink); } .hero--dark .hero__card-quote { color: var(--dk-ink); } .hero--dark .hero__card-cite { color: var(--dk-ink-faint); } /* Hero photo: framed, graded, part of the night scene */ .hero--dark .hero__photo img { filter: saturate(0.9) contrast(1.05) brightness(0.94); box-shadow: 0 0 0 1px var(--dk-line), 0 40px 80px -30px rgba(0, 0, 0, 0.7); } /* Marquee as the dark hero's bottom edge */ .hero--dark .marquee { background: rgba(0, 0, 0, 0.25); border-top-color: var(--dk-line); border-bottom: 0; color: var(--dk-ink-soft); } .hero--dark .marquee__track { color: var(--dk-ink-soft); } .hero--dark .marquee__track span::after { color: var(--brass); } /* ─── Scroll reveal (elements get .reveal via JS; observer adds .is-inview) ─── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } .reveal.is-inview { opacity: 1; transform: none; } /* If JS never runs, nothing is hidden: .reveal is only added by JS. */ /* ─── Blueprint diagrams draw themselves in on scroll ─── */ .bp-anim .bp-line, .bp-anim .bp-accent, .bp-anim .bp-dim { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s ease 0.15s; } .bp-anim.is-inview .bp-line, .bp-anim.is-inview .bp-accent, .bp-anim.is-inview .bp-dim { stroke-dashoffset: 0; } /* ─── Photo grade: mixed stock photos read as one brand ─── */ .gallery-card__art img, .band__img { filter: saturate(0.92) contrast(1.03); } .gallery-card__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, var(--accent-soft)); mix-blend-mode: multiply; } /* ─── Closing CTA band (mirrors the dark hero — bookends the page) ─── */ .cta-banner { margin: clamp(3rem, 7vw, 5rem) var(--gutter) 0; max-width: var(--max); } @media (min-width: 1280px) { .cta-banner { margin-left: auto; margin-right: auto; } } .cta-banner__inner { background: radial-gradient(50rem 20rem at 90% 0%, var(--brass-soft), transparent 60%), linear-gradient(160deg, var(--dk-bg), var(--dk-bg-soft)); color: var(--dk-ink); border-radius: var(--radius-lg); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.5); } .cta-banner__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; max-width: 18ch; } .cta-banner__title em { font-style: italic; color: var(--brass); } .cta-banner__sub { color: var(--dk-ink-soft); margin-top: 0.6rem; font-size: 1rem; max-width: 44ch; } .cta-banner__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; } .cta-banner .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--on-brass); box-shadow: 0 10px 30px -10px var(--brass-glow); } .cta-banner .btn--primary:hover { background: var(--brass-hover); border-color: var(--brass-hover); } .cta-banner .btn--ghost { color: var(--dk-ink); border-color: var(--dk-line); } .cta-banner .btn--ghost:hover { background: var(--dk-ink); color: var(--dk-bg); border-color: var(--dk-ink); } /* ─── Quality floor ─── */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .hero--dark :focus-visible, .cta-banner :focus-visible { outline-color: var(--brass); } /* ============================================================ MOTION REDUCED ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .bp-anim .bp-line, .bp-anim .bp-accent, .bp-anim .bp-dim { stroke-dasharray: none; stroke-dashoffset: 0; } } /* ── ForgeLab footer credit (template-wide since 2026-07-06) ── */ .footer__credit { font-size: .78rem; opacity: .55; } .footer__credit a { color: inherit; text-decoration: underline; } .footer__credit a:hover { opacity: 1; }