/* ========================================================================== The Caring Locksmith — site.css Single stylesheet. No framework. Mobile-first. Two themes: day warm cream paper, forest green, brass · Fraunces + Source Sans 3 night near-black green, glowing van yellow · Space Grotesk + IBM Plex Sans The theme is the data-theme attribute on , set before first paint by partials/theme.html (auto = night between sunset and sunrise in Clovis). Every colour below is a token; components never hard-code a theme. ========================================================================== */ /* --- 1. Tokens ---------------------------------------------------------- */ :root { /* Day (default) */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bg: #f6efe3; /* page: cream */ --bg-2: #fbf7ee; /* paper: tint sections, cards */ --bg-3: #efe5d2; /* deeper cream: flat cards, map box */ --ink: #1e2a26; /* body text 14.6:1 on cream */ --ink-2: #4f5d58; /* 6.6:1 on cream */ --line: #e3d8c3; --heading: #0f3d33; /* forest */ --brand: #0f3d33; /* logo mark, brand-coloured bits */ --brand-2: #0b2e27; --accent: #b8862b; /* brass */ --on-accent: #1e2a26; --link: #0f3d33; --link-hover:#b8862b; --dark: #0f3d33; /* dark sections, footer, trust bar */ --dark-2: #0b2e27; --on-dark: #f6efe3; --on-dark-2: #c9d6d1; --on-dark-accent: #e9c46a; --cta: #0f3d33; /* primary action */ --on-cta: #f6efe3; --cta-hover: #0b2e27; --glow: none; --frame: #fbf7ee; /* photo frame */ --photo-filter: none; --radius: 6px; --radius-lg: 10px; --shadow: 0 10px 30px rgb(30 42 38 / .12); --focus: #b8862b; /* Type scale */ --step--1: clamp(.82rem, .8rem + .1vw, .88rem); --step-0: clamp(1rem, .96rem + .2vw, 1.08rem); --step-1: clamp(1.18rem, 1.1rem + .4vw, 1.35rem); --step-2: clamp(1.45rem, 1.3rem + .75vw, 1.85rem); --step-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.6rem); --step-4: clamp(2.15rem, 1.7rem + 2.4vw, 3.5rem); --display-weight: 600; --display-tracking: -.02em; /* Space */ --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.25rem; --s5: 3.5rem; --s6: 5rem; --wrap: 1140px; } :root[data-theme="night"] { --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bg: #07110e; --bg-2: #0b1c17; --bg-3: #0e241e; --ink: #e8f1ee; --ink-2: #9db8b0; --line: rgb(255 255 255 / .12); --heading: #ffffff; --brand: #ffc61a; --brand-2: #e5a800; --accent: #ffc61a; --on-accent: #07110e; --link: #ffc61a; --link-hover:#ffd84d; --dark: #0e241e; --dark-2: #07110e; --on-dark: #ffffff; --on-dark-2: #9db8b0; --on-dark-accent: #ffc61a; --cta: #ffc61a; --on-cta: #07110e; --cta-hover: #ffd84d; --glow: 0 0 34px rgb(255 198 26 / .4); --frame: #0e241e; --photo-filter: saturate(.85) brightness(.9); --radius: 8px; --radius-lg: 14px; --shadow: 0 14px 40px rgb(0 0 0 / .55); --focus: #ffc61a; --display-weight: 700; --display-tracking: -.03em; color-scheme: dark; } /* --- 2. Reset ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } body, .site-header, .alert-strip, .hero, .section, .trust-bar, .card, .site-footer, .cta-band, .call-bar { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } img, picture, svg { max-width: 100%; display: block; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); line-height: 1.1; margin: 0 0 var(--s2); letter-spacing: var(--display-tracking); color: var(--heading); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); font-weight: 700; } h4 { font-size: var(--step-1); font-weight: 700; } p, ul, ol { margin: 0 0 var(--s2); } a { color: var(--link); text-underline-offset: 3px; } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; } /* --- 3. Layout helpers -------------------------------------------------- */ .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, 760px); margin-inline: auto; } .section { padding-block: var(--s5); background: var(--bg); } @media (min-width: 900px) { .section { padding-block: var(--s6); } } .section--tint { background: var(--bg-2); } .section--green { background: var(--dark); color: var(--on-dark); } [data-theme="night"] .section--green { border-block: 1px solid var(--line); } .section--green h2, .section--green h3 { color: var(--on-dark); } .section--green a { color: var(--on-dark-accent); } .section--green p, .section--green li { color: var(--on-dark); } .section--green figcaption { color: var(--on-dark-2); } .grid { display: grid; gap: var(--s3); } @media (min-width: 700px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s1); } .section--green .eyebrow { color: var(--on-dark-accent); } .lede { font-size: var(--step-1); color: var(--ink-2); } .section--green .lede { color: var(--on-dark-2); } .center { text-align: center; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--accent); color: var(--on-accent); padding: .75rem 1.25rem; font-weight: 700; } .skip-link:focus { left: 0; } /* --- 4. Buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; padding: .85em 1.4em; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; min-height: 48px; /* touch target */ } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn--call, .btn--solid { background: var(--cta); color: var(--on-cta); border-color: var(--cta); box-shadow: var(--glow); } .btn--call { font-size: 1.05em; } .btn--call:hover, .btn--solid:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--on-cta); } /* Outline buttons: on light ground (day hero, day sections) forest/brass; on dark ground (night everywhere, green sections in day) white. */ .btn--text, .btn--ghost { background: transparent; color: var(--heading); border-color: var(--accent); } .btn--text:hover, .btn--ghost:hover { background: var(--heading); color: var(--bg); border-color: var(--heading); } .section--green .btn--text, .section--green .btn--ghost, [data-theme="night"] .btn--text, [data-theme="night"] .btn--ghost { color: var(--on-dark); border-color: rgb(255 255 255 / .45); } .section--green .btn--text:hover, .section--green .btn--ghost:hover, [data-theme="night"] .btn--text:hover, [data-theme="night"] .btn--ghost:hover { background: rgb(255 255 255 / .12); color: #fff; border-color: #fff; } .section--green .btn--call, .section--green .btn--solid { color: var(--on-cta); } [data-theme="day"] .section--green .btn--call, [data-theme="day"] .section--green .btn--solid, :root:not([data-theme]) .section--green .btn--call, :root:not([data-theme]) .section--green .btn--solid { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); } /* --- 5. Alert strip ----------------------------------------------------- */ .alert-strip { background: var(--dark); color: var(--on-dark-2); font-size: var(--step--1); padding: .5rem 0; } [data-theme="night"] .alert-strip { background: var(--bg-3); border-bottom: 1px solid var(--line); } .alert-strip .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; justify-content: center; } .alert-strip strong { color: var(--on-dark); } .alert-strip a { color: var(--on-dark-accent); font-weight: 700; text-decoration: none; } .alert-strip a:hover { text-decoration: underline; } @media (min-width: 900px) { .alert-strip .wrap { justify-content: space-between; } } /* --- 6. Header + nav ---------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: var(--s2); min-height: 72px; } .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--heading); margin-right: auto; } .brand svg { width: 30px; height: 39px; flex: none; color: var(--brand); } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.05; letter-spacing: -.01em; color: var(--heading); } [data-theme="night"] .brand-name { text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; } .brand-name span { display: block; } .brand-sub { font-size: .66rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-2); text-transform: uppercase; white-space: nowrap; } /* Between the desktop breakpoint and a wide screen the row is tight: drop the city line under the logo so nothing wraps. */ @media (min-width: 1000px) and (max-width: 1299px) { .brand-sub { display: none; } } .header-cta { white-space: nowrap; } .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 2px solid var(--line); border-radius: var(--radius); padding: .5rem .75rem; font: inherit; font-weight: 700; font-size: .9rem; color: var(--heading); cursor: pointer; min-height: 44px; } .nav-toggle svg { width: 20px; height: 20px; } .nav-toggle[aria-expanded="true"] .icon-open, .nav-toggle[aria-expanded="false"] .icon-close { display: none; } .site-nav { display: none; } .site-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--s2) 0; } .site-nav ul { list-style: none; margin: 0; padding: 0; } .site-nav > ul > li > a, .site-nav .submenu a { display: block; padding: .7rem 1rem; text-decoration: none; font-weight: 700; color: var(--ink); border-radius: var(--radius); } .site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--bg-3); color: var(--heading); } .site-nav .submenu { padding-left: 1rem; } .site-nav .submenu a { font-weight: 500; font-size: .95rem; color: var(--ink-2); } .header-cta { display: none; } /* Theme switch: lives inside the nav list so it lands in the mobile panel and in the desktop row with one piece of markup. */ .nav-theme { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; } .nav-theme > span { font-size: var(--step--1); font-weight: 700; color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; } .theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); } .theme-switch button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; font: inherit; } .theme-switch button svg { width: 18px; height: 18px; } .theme-switch button:hover { color: var(--heading); background: var(--bg-3); } .theme-switch button[aria-pressed="true"] { background: var(--heading); color: var(--bg); } [data-theme="night"] .theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } @media (min-width: 1000px) { .nav-toggle { display: none; } .site-nav { display: block; } .site-nav > ul { display: flex; gap: .15rem; align-items: center; } .site-nav > ul > li { position: relative; } .site-nav > ul > li > a { padding: .55rem .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); white-space: nowrap; } [data-theme="night"] .site-nav > ul > li > a { text-transform: none; letter-spacing: 0; font-size: .93rem; font-weight: 500; color: var(--ink-2); } [data-theme="night"] .site-nav > ul > li > a:hover, [data-theme="night"] .site-nav > ul > li > a[aria-current="page"] { color: #fff; } .site-nav .submenu { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem; padding-left: .4rem; } .site-nav li:hover > .submenu, .site-nav li:focus-within > .submenu { display: block; } .header-cta { display: inline-flex; } .nav-theme { padding: 0 .25rem 0 .75rem; } .nav-theme > span { display: none; } .theme-switch button { width: 32px; height: 32px; } .theme-switch button svg { width: 16px; height: 16px; } } /* --- 7. Hero ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); padding-block: var(--s5); } .hero h1 { margin-bottom: var(--s2); text-wrap: balance; } .hero p { color: var(--ink-2); font-size: var(--step-1); max-width: 46ch; } .hero .eyebrow { color: var(--accent); } .hero-grid { display: grid; gap: var(--s4); align-items: center; } @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } } .hero .btn-row { margin-block: var(--s3); } .hero-note { font-size: var(--step--1); color: var(--ink-2); margin: 0; font-weight: 600; } .hero-phone { display: none; } /* Day: framed, slightly tilted photo with a strip of tape */ .hero-media { position: relative; margin: 0; } .hero-media img { border-radius: 2px; box-shadow: var(--shadow); border: 10px solid var(--frame); filter: var(--photo-filter); } .hero-media figcaption { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--ink-2); margin-top: .8rem; } @media (min-width: 900px) { .hero-media { transform: rotate(-2deg); margin: 0 .75rem; } .hero-media::before { content: ""; position: absolute; z-index: 1; left: 40%; top: -12px; width: 96px; height: 26px; background: rgb(184 134 43 / .45); transform: rotate(-4deg); } } /* Night: the photo becomes a full-bleed backdrop with a gradient, and the phone number becomes the headline act. */ [data-theme="night"] .hero { background: var(--bg); color: var(--on-dark); } [data-theme="night"] .hero h1 { color: #fff; } [data-theme="night"] .hero p { color: #cfe3dd; } [data-theme="night"] .hero .eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .7rem; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; color: #cfe3dd; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--step--1); } [data-theme="night"] .hero .eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 12px #3ddc84; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } [data-theme="night"] .hero-grid { grid-template-columns: minmax(0, 660px); } /* The text column sits above the backdrop; the figure is positioned against the full-width .hero (the .wrap is deliberately not positioned). */ [data-theme="night"] .hero-grid > :not(.hero-media) { position: relative; z-index: 1; } [data-theme="night"] .hero-media { position: absolute; inset: 0; margin: 0; transform: none; z-index: 0; } [data-theme="night"] .hero-media::before { display: none; } [data-theme="night"] .hero-media img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; } [data-theme="night"] .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 17 14 / .78) 0%, rgb(7 17 14 / .9) 100%); } [data-theme="night"] .hero-media figcaption { display: none; } [data-theme="night"] .hero-phone { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.02em; line-height: 1.05; color: var(--accent); text-decoration: none; text-shadow: 0 0 40px rgb(255 198 26 / .45); margin: .25rem 0 0; } [data-theme="night"] .hero .btn-row { margin-top: var(--s2); } [data-theme="night"] .hero-note { color: #9db8b0; } @media (min-width: 900px) { [data-theme="night"] .hero { min-height: 36rem; display: flex; align-items: center; } [data-theme="night"] .hero-media { inset: 0 0 0 auto; width: 70%; } [data-theme="night"] .hero-media::after { background: linear-gradient(90deg, #07110e 0%, rgb(7 17 14 / .96) 28%, rgb(7 17 14 / .62) 52%, rgb(7 17 14 / .18) 100%), linear-gradient(180deg, rgb(7 17 14 / 0) 55%, #07110e 100%); } } /* --- 8. Trust bar ------------------------------------------------------- */ .trust-bar { background: var(--dark); color: var(--on-dark); padding-block: var(--s3); } [data-theme="night"] .trust-bar { background: var(--bg-3); border-block: 1px solid var(--line); color: var(--on-dark-2); } .trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } @media (min-width: 760px) { .trust-list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .trust-list { grid-template-columns: repeat(6, 1fr); } } .trust-list li { display: flex; align-items: center; gap: .55rem; font-size: var(--step--1); font-weight: 700; } [data-theme="night"] .trust-list li { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; } .trust-list svg { width: 24px; height: 24px; flex: none; color: var(--on-dark-accent); } /* --- 9. Cards ----------------------------------------------------------- */ .card { background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: var(--radius-lg); padding: var(--s3); display: flex; flex-direction: column; } [data-theme="night"] .card { background: var(--bg-3); border-top-color: var(--line); } .card h3 { font-size: var(--step-1); margin-bottom: .5rem; } .card p { color: var(--ink-2); } .card img { border-radius: var(--radius); filter: var(--photo-filter); } .card .card-link { margin-top: auto; padding-top: var(--s2); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; color: var(--accent); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; } [data-theme="night"] .card .card-link { text-transform: none; letter-spacing: 0; font-size: var(--step-0); } .card .card-link svg { width: 1.1em; height: 1.1em; flex: none; } .card .card-link:hover { text-decoration: underline; } a.card { text-decoration: none; color: inherit; } a.card:hover { border-color: var(--accent); } a.card:hover .card-link { text-decoration: underline; } .card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-3); color: var(--heading); display: grid; place-items: center; margin-bottom: var(--s2); } [data-theme="night"] .card-icon { background: rgb(255 198 26 / .12); color: var(--accent); border-radius: var(--radius); } .card-icon svg { width: 26px; height: 26px; } .card--flat { border: 0; background: var(--bg-3); } [data-theme="night"] .card--flat { border: 1px solid var(--line); background: var(--bg-2); } /* Cards inside dark sections (the "how it works" steps) */ .section--green .card { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .18); border-top-color: var(--on-dark-accent); } [data-theme="night"] .section--green .card { background: var(--bg-2); border-color: var(--line); } .section--green .card h3 { color: #fff; } .section--green .card p { color: var(--on-dark-2); } .section--green .card-icon { background: var(--on-dark-accent); color: var(--dark-2); } [data-theme="night"] .section--green .card-icon { background: var(--accent); color: var(--on-accent); } .section--green .card .card-link { color: var(--on-dark-accent); } /* --- 10. Checklist ------------------------------------------------------ */ .check-list { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; gap: .55rem; } /* Absolute marker, not a grid column — an
  • can contain any mix of elements and text nodes, and grid would treat each of them as an item. */ .check-list li { position: relative; padding-left: 2em; } .check-list li::before { content: ""; position: absolute; left: 0; top: .34em; width: 1.2em; height: 1.2em; border-radius: 50%; background-color: var(--heading); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; } .check-list li::after { content: ""; position: absolute; left: .225em; top: .565em; width: .75em; height: .75em; background: var(--bg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; } [data-theme="night"] .check-list li::before { background-color: var(--accent); } [data-theme="night"] .check-list li::after { background: var(--on-accent); } .section--green .check-list li::before { background-color: var(--on-dark-accent); } .section--green .check-list li::after { background: var(--dark-2); } [data-theme="night"] .section--green .check-list li::after { background: var(--on-accent); } .col-list { columns: 2; column-gap: var(--s3); } .col-list li { break-inside: avoid; } @media (max-width: 560px) { .col-list { columns: 1; } } /* --- 11. Media + text --------------------------------------------------- */ .media-text { display: grid; gap: var(--s4); align-items: center; } @media (min-width: 860px) { .media-text { grid-template-columns: 1fr 1fr; } .media-text--flip .media-text__media { order: 2; } } .media-text__media img { border-radius: 2px; border: 10px solid var(--frame); box-shadow: var(--shadow); filter: var(--photo-filter); } [data-theme="night"] .media-text__media img { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; } .media-text figcaption { font-family: var(--font-display); font-style: italic; font-size: var(--step-0); color: var(--ink-2); margin-top: .8rem; } [data-theme="night"] .media-text figcaption { font-family: var(--font-body); font-style: normal; font-size: var(--step--1); } /* --- 12. Reviews -------------------------------------------------------- */ .review-grid { display: grid; gap: var(--s3); } @media (min-width: 860px) { .review-grid { grid-template-columns: repeat(3, 1fr); } } .review { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-lg); padding: var(--s3); margin: 0; } [data-theme="night"] .review { background: var(--bg-2); border-color: var(--line); } .review::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--on-dark-accent); margin-bottom: .6rem; } .review blockquote { margin: 0 0 var(--s2); color: var(--on-dark); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--step-1); line-height: 1.45; } [data-theme="night"] .review blockquote { font-family: var(--font-body); font-style: normal; font-weight: 400; font-size: var(--step-0); color: #eaf4f1; } .review figcaption { font-weight: 700; color: var(--on-dark-accent); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; } .stars { display: flex; gap: 2px; margin-bottom: var(--s2); color: var(--on-dark-accent); } .stars svg { width: 18px; height: 18px; } /* --- 13. FAQ ------------------------------------------------------------ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: var(--s3) 2.5rem var(--s3) 0; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); position: relative; color: var(--heading); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; transition: transform .2s ease; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after { transform: rotate(180deg); } .faq .faq-body { padding-bottom: var(--s3); color: var(--ink-2); max-width: 68ch; } .faq .faq-body > :last-child { margin-bottom: 0; } /* --- 14. CTA band ------------------------------------------------------- */ .cta-band { background: var(--dark); color: var(--on-dark); padding-block: var(--s4); } [data-theme="night"] .cta-band { background: var(--bg-3); border-block: 1px solid var(--line); } .cta-band h2 { color: var(--on-dark); margin-bottom: .5rem; font-size: var(--step-2); } .cta-band p { color: var(--on-dark-2); margin-bottom: var(--s3); max-width: 60ch; } .cta-band .btn--solid { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); box-shadow: none; } .cta-band .btn--solid:hover { background: var(--on-dark-accent); border-color: var(--on-dark-accent); color: var(--dark-2); } [data-theme="night"] .cta-band .btn--solid { background: var(--cta); color: var(--on-cta); border-color: var(--cta); box-shadow: var(--glow); } .cta-band .btn--ghost { border-color: rgb(255 255 255 / .55); color: var(--on-dark); } .cta-band .btn--ghost:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); } @media (min-width: 860px) { .cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); } .cta-band p:last-of-type { margin-bottom: 0; } .cta-band .btn-row { flex: none; } } /* --- 15. Breadcrumbs ---------------------------------------------------- */ .breadcrumbs { font-size: var(--step--1); padding-block: var(--s2); color: var(--ink-2); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; } .breadcrumbs li + li::before { content: "›"; margin-right: .35rem; color: var(--accent); } .breadcrumbs a { color: var(--ink-2); } /* --- 16. Footer --------------------------------------------------------- */ .site-footer { background: var(--dark-2); color: var(--on-dark-2); padding-block: var(--s5) var(--s3); font-size: .95rem; } [data-theme="night"] .site-footer { border-top: 1px solid var(--line); } .site-footer h2, .site-footer h3 { color: var(--on-dark); font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s2); } .site-footer a { color: var(--on-dark); text-decoration: none; } .site-footer a:hover { color: var(--on-dark-accent); text-decoration: underline; } .footer-grid { display: grid; gap: var(--s4); } @media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .footer-brand svg { width: 34px; height: 44px; color: var(--on-dark-accent); margin-bottom: var(--s2); } .footer-nap { font-style: normal; } .footer-nap strong { color: var(--on-dark); } /* More specific than `.site-footer ul` above, which sets display:grid. */ .site-footer ul.payments { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s2); } .payments li { border: 1px solid rgb(255 255 255 / .25); border-radius: 4px; padding: .2rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-2); } .footer-legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgb(255 255 255 / .15); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .82rem; } .social-row { display: flex; gap: .6rem; margin-top: var(--s2); } .social-row a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid rgb(255 255 255 / .25); } .social-row svg { width: 20px; height: 20px; } /* --- 17. Sticky mobile call bar ----------------------------------------- */ .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: grid; grid-template-columns: 1fr 1fr; background: var(--dark-2); border-top: 1px solid rgb(255 255 255 / .18); padding-bottom: env(safe-area-inset-bottom); } .call-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem .5rem; font-weight: 800; text-decoration: none; font-size: 1rem; min-height: 56px; } .call-bar .cb-call { background: var(--accent); color: var(--on-accent); } [data-theme="night"] .call-bar .cb-call { box-shadow: var(--glow); } .call-bar .cb-text { color: var(--on-dark); } .call-bar svg { width: 20px; height: 20px; } body { padding-bottom: 60px; } @media (min-width: 1000px) { .call-bar { display: none; } body { padding-bottom: 0; } } /* --- 18. Forms ---------------------------------------------------------- */ .form-grid { display: grid; gap: var(--s2); max-width: 620px; } label { font-weight: 700; display: block; margin-bottom: .35rem; } input, textarea, select { font: inherit; width: 100%; padding: .75rem .85rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink); min-height: 48px; } input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; } .hp { position: absolute; left: -9999px; } .form-error { background: rgb(184 134 43 / .14); border: 2px solid var(--accent); border-radius: var(--radius); padding: .85rem 1rem; font-weight: 700; color: var(--ink); } /* --- 19. Utilities ------------------------------------------------------ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .icon-sprite { display: none; } .tel-link { font-weight: 800; white-space: nowrap; } .map-embed { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-3) center/cover no-repeat; border: 1px solid var(--line); display: grid; place-items: center; text-align: center; padding: var(--s3); color: var(--ink); } /* --- 20. Print ---------------------------------------------------------- */ @media print { .site-header, .call-bar, .alert-strip, .cta-band, .site-nav { display: none !important; } body { padding: 0; color: #000; background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }