/* ============================================================ 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; --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; } .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(4rem, 8vw, 6rem); } .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__num { font-family: var(--font-display); font-variation-settings: "opsz" 144; font-size: 0.85rem; 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; } /* ============================================================ 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; } /* ============================================================ 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; } } /* ============================================================ 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; } }