/* ============================================================
ALTILAVORI — Roofing brand layer over the altilavori DS.
Same editorial-brutalist STRUCTURE (heavy display, mono labels,
1px hazard borders, color-as-elevation, no shadows, StoryStream
rhythm) — RECOLORED from rave mint/ultraviolet to a green +
safety-yellow contractor palette on a warm near-black canvas.
============================================================ */
/* Fonts are loaded via in each page (not @import) so the
linked stylesheet has no chained import request. */
:root {
/* ---- Brand hazards (recolor of mint / ultraviolet) -------- */
--green: #0a8f44; /* deep readable green — accents/text on light */
--green-bright: #04b851; /* brand bright — primary fills/buttons */
--green-deep: #2f8731; /* brand deep — avatars, pressed */
--green-border: #1c6b3f; /* darker green outline */
--pine: #0e3a22; /* deep pine block (kept dark for contrast) */
--signal: #ffcc00; /* safety yellow — stars & accents */
--signal-deep: #e0a800;
--link-hover-c: #06753a; /* headline/link hover (deep green) */
--focus-cyan: #0a8f44; /* keyboard focus ring (green) */
--rail: #cbe6d5; /* StoryStream rail — light green line */
/* ---- Surfaces -------------------------------------------- */
--canvas: #f4f3ed; /* warm paper — page background */
--canvas-2: #ebe8df; /* alt section, slightly deeper warm */
--surface-slate:#edefe8; /* secondary light panel */
--surface-3: #e3e5dd;
--image-frame: #dcdad0; /* 1px hairline border */
--white: #14180f; /* FOREGROUND ink (flipped dark for light UI) */
--black: #000000;
/* ---- Text ------------------------------------------------ */
--text-primary: #14180f; /* near-black green — headings & body */
--text-secondary:#5f6a5c; /* bylines, timestamps, meta */
--text-muted: #3c443a; /* secondary body */
--text-inverted: #0b0e0b; /* text on green / yellow tiles (unchanged) */
--error: #c43b2f;
/* ---- Tile palette (materials, not rave) ------------------ */
--tile-green: #04b851;
--tile-pine: #14532d;
--tile-terracotta:#bd5638; /* clay roof tile */
--tile-yellow: #ffcc00;
--tile-slate: #2b342f;
--tile-sky: #2f6bff;
--tile-white: #f3f0e8;
/* ---- Radii (DS nested scale) ----------------------------- */
--r-input: 2px; --r-image: 3px; --r-nested: 4px;
--r-pill: 20px; --r-card: 20px; --r-feature: 24px;
--r-promo: 30px; --r-cta: 40px; --r-round: 50%;
/* ---- Spacing --------------------------------------------- */
--pad-card: 24px; --pad-feature: 40px;
--gap-stream: 14px; --gap-col: 20px;
--container: 1300px; --content: 1180px;
--pad-x: 48px; --pad-x-mobile: 24px;
/* ---- Fonts ----------------------------------------------- */
--font-display: 'Anton', Impact, 'Helvetica Neue', sans-serif;
--font-sans: 'Space Grotesk', Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
--font-serif: 'Newsreader', Georgia, serif;
/* ---- Motion ---------------------------------------------- */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur-color: 150ms; --dur-btn: 180ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--canvas);
color: var(--text-primary);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ============================================================
TYPE ROLES (mapped from DS base.css, recolored hover)
============================================================ */
.av-hero {
font-family: var(--font-display); font-size: clamp(3.4rem, 9vw, 6.4rem);
line-height: 0.92; letter-spacing: 1px; text-transform: uppercase; margin: 0;
}
.hl { color: var(--green); }
.av-display-2 {
font-family: var(--font-display); font-size: clamp(2.8rem, 6.5vw, 5rem);
line-height: 0.94; text-transform: uppercase; margin: 0;
}
.av-display-3 {
font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.6rem);
line-height: 0.96; text-transform: uppercase; margin: 0;
}
.av-h-large { font-family: var(--font-sans); font-size: clamp(1.6rem,2.6vw,2.13rem); font-weight: 700; line-height: 1.05; margin: 0; }
.av-h-med { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin: 0; }
.av-h-small { font-family: var(--font-sans); font-size: 1.2rem; font-weight: 700; line-height: 1.15; margin: 0; }
.av-light-cap {
font-family: var(--font-sans); font-size: 1.05rem; font-weight: 300;
line-height: 1.3; letter-spacing: 1.9px;
}
.av-eyebrow {
font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
line-height: 1.3; letter-spacing: 1.8px; text-transform: uppercase;
}
.av-caps-xl {
font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400;
line-height: 1.2; letter-spacing: 1.6px; text-transform: uppercase;
}
.av-body { font-family: var(--font-sans); font-size: 1.06rem; font-weight: 500; line-height: 1.62; }
.av-lead { font-family: var(--font-sans); font-size: clamp(1.12rem,1.6vw,1.3rem); font-weight: 400; line-height: 1.6; color: var(--text-muted); }
.av-body-compact { font-family: var(--font-sans); font-size: 0.86rem; font-weight: 400; line-height: 1.6; }
.av-mono-btn { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; line-height: 2; letter-spacing: 1.5px; text-transform: uppercase; }
.av-mono-time { font-family: var(--font-mono); font-size: 0.69rem; font-weight: 500; line-height: 1.2; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }
.av-serif-quote { font-family: var(--font-serif); font-size: clamp(1.3rem,2.6vw,2rem); font-weight: 400; line-height: 1.35; }
.muted { color: var(--text-secondary); }
.green { color: var(--green); }
.av-link { transition: color var(--dur-color) var(--ease); }
.av-link:hover { color: var(--link-hover-c); }
/* ============================================================
LAYOUT
============================================================ */
.wrap { max-width: var(--container); margin: 0 auto; padding-inline: var(--pad-x); }
.content { max-width: var(--content); margin: 0 auto; padding-inline: var(--pad-x); }
section { position: relative; }
.section-pad { padding-block: clamp(40px, 6vw, 76px); }
.section-pad-sm { padding-block: clamp(28px, 4vw, 52px); }
.divider { height: 1px; background: var(--image-frame); border: 0; margin: 0; }
.eyebrow-row { display: flex; align-items: center; gap: 12px; color: var(--green); margin-bottom: 22px; }
/* ============================================================
HAZARD TAPE — signature stripe (caution-tape, recolored green)
============================================================ */
.hazard-tape {
background: repeating-linear-gradient(-45deg,
var(--signal) 0 22px, #0b0e0b 22px 44px);
height: 10px;
}
.hazard-strip {
display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
background: var(--green-bright); color: var(--text-inverted);
padding: 14px 28px; border-radius: var(--r-pill);
font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem;
letter-spacing: 1.5px; text-transform: uppercase;
}
.hazard-strip .dot { width: 7px; height: 7px; background: var(--text-inverted); border-radius: 50%; }
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
border: 1px solid transparent; border-radius: var(--r-feature);
padding: 16px 26px; transition: background var(--dur-btn) var(--ease),
color var(--dur-btn) var(--ease), box-shadow var(--dur-btn) var(--ease),
border-color var(--dur-btn) var(--ease);
text-align: center; line-height: 1;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--green-bright); color: var(--text-inverted); }
.btn-primary:hover { background: var(--green); }
.btn-primary:active { background: var(--green-deep); }
.btn-outline {
background: transparent; color: var(--white);
border-color: var(--white); border-radius: var(--r-cta);
}
.btn-outline:hover { background: var(--green-bright); color: var(--text-inverted); border-color: var(--green-bright); }
.btn-ghost {
background: transparent; color: var(--white); border-color: var(--image-frame);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-wa { background: #25D366; color: #07210f; }
.btn-wa:hover { background: #1fbf5b; }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 34px; font-size: 0.82rem; }
.cta-white { transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.cta-white:hover { background: var(--green-bright) !important; color: var(--text-inverted) !important; transform: translateY(-1px); }
/* CTAs sitting on saturated tiles: hover must contrast the tile, not blend in */
.tile-fill .cta-white:hover { background: var(--pine) !important; color: #fff !important; }
.tile-fill .btn:not(.cta-white):not(.btn-primary):not(.btn-wa):hover { background: var(--pine) !important; color: #fff !important; border-color: var(--pine) !important; }
a.tile-fill { transition: filter var(--dur-color) var(--ease); }
a.tile-fill:hover { filter: brightness(1.06); }
/* ============================================================
MASTHEAD / NAV
============================================================ */
.masthead {
position: sticky; top: 0; z-index: 60;
background: rgba(244,243,237,0.85); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--image-frame);
}
.masthead-inner {
max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x);
height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-mark {
width: 34px; height: 34px; border-radius: var(--r-nested);
background: var(--green-bright); color: var(--text-inverted);
display: grid; place-items: center; font-family: var(--font-display);
font-size: 1.35rem; line-height: 1; padding-top: 3px;
}
.brand-name {
font-family: var(--font-display); font-size: 1.55rem; letter-spacing: 1px;
text-transform: uppercase; line-height: 1; padding-top: 3px;
}
.brand-name .tld { color: var(--green); }
.brand-name .srl { font-size: 0.55em; letter-spacing: 1.2px; vertical-align: 2px; color: var(--text-secondary); }
html { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted);
padding: 10px 14px; border-radius: var(--r-input); white-space: nowrap;
transition: color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease);
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--white); box-shadow: inset 0 -2px 0 0 var(--green); }
.nav-right { display: flex; align-items: center; gap: 16px; }
.nav-phone {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
font-family: var(--font-mono); font-weight: 600; font-size: 0.78rem;
letter-spacing: 0.5px; color: var(--white);
}
.nav-phone svg { width: 16px; height: 16px; color: var(--green); }
.nav-toggle {
display: none; background: transparent; border: 1px solid var(--image-frame);
color: var(--white); width: 44px; height: 44px; border-radius: var(--r-input);
cursor: pointer; place-items: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
/* mobile drawer — driven purely by :target (no JS), same as index.html */
.mobile-menu {
position: fixed; inset: 0; z-index: 60; background: var(--canvas);
transform: translateX(100%); visibility: hidden;
transition: transform 280ms var(--ease), visibility 0s linear 280ms;
padding: 24px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.mobile-menu:target { transform: translateX(0) !important; visibility: visible !important; transition: transform 280ms var(--ease), visibility 0s; }
.mm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mm-brand { font-family: var(--font-display); text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.5px; color: var(--white); }
.mm-close { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--image-frame); border-radius: var(--r-input); color: var(--white); background: transparent; touch-action: manipulation; }
.mm-close svg { width: 22px; height: 22px; pointer-events: none; }
.mobile-menu a {
font-family: var(--font-display); font-size: 2rem; text-transform: uppercase;
letter-spacing: 0.5px; padding: 12px 0; border-bottom: 1px solid var(--surface-slate);
color: var(--white);
}
.mobile-menu a.active { color: var(--green); }
.mobile-menu .mm-cta { margin-top: 20px; }
/* ============================================================
IMAGE SLOTS / FRAMES
============================================================ */
image-slot {
--slot-bg: var(--surface-slate);
border: 1px solid var(--image-frame);
background: var(--surface-slate);
color: var(--text-secondary);
display: block;
width: 100%;
height: auto; /* clear the component's default 160px so aspect-ratio governs */
}
.framed { border: 1px solid var(--image-frame); border-radius: var(--r-card); overflow: hidden; }
/* Entrance effect for every image slot: fade-in + blur-up + tiny rise.
Base state is set by JS (.img-reveal) only when motion is allowed, so
no-JS / reduced-motion users always see the image immediately. */
@media (prefers-reduced-motion: no-preference) {
image-slot.img-reveal {
opacity: 0;
filter: blur(14px);
transform: translateY(16px) scale(1.012);
transition: opacity 620ms var(--ease), filter 620ms var(--ease), transform 620ms var(--ease);
will-change: opacity, filter, transform;
}
image-slot.img-reveal.img-in {
opacity: 1;
filter: blur(0);
transform: none;
}
}
/* ============================================================
TILES / CARDS
============================================================ */
.card {
background: #ffffff; border: 1px solid var(--image-frame);
border-radius: var(--r-card); padding: var(--pad-card);
transition: border-color var(--dur-color) var(--ease);
}
.card.slate { background: var(--surface-slate); border-color: transparent; }
.card-link:hover { border-color: var(--green); }
.card-link:hover .card-title { color: var(--green); }
.card-title { transition: color var(--dur-color) var(--ease); }
.tile-fill { border-radius: var(--r-feature); padding: var(--pad-feature); color: var(--text-inverted); }
.tile-green { background: var(--green-bright); }
.tile-pine { background: var(--pine); color: #eef3ee; }
.tile-yellow { background: var(--tile-yellow); }
.tile-terra { background: var(--tile-terracotta); color: #fdf4ef; }
.tile-slate { background: var(--surface-slate); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--image-frame); }
.grid { display: grid; gap: var(--gap-col); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* numbered service tile */
.svc { display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.svc .num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; color: var(--green); }
.svc .svc-ico { width: 40px; height: 40px; color: var(--green); }
.svc h3 { margin: 0; }
.svc p { margin: 0; color: var(--text-secondary); }
.svc .more { margin-top: auto; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.card-link:hover .more { color: var(--green); }
/* ============================================================
STATS / METRICS (mono)
============================================================ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--image-frame); border: 1px solid var(--image-frame); border-radius: var(--r-card); overflow: hidden; }
.stat { background: #ffffff; padding: 30px 26px; }
.stat .n { font-family: var(--font-display); font-size: clamp(2.4rem,4vw,3.4rem); line-height: 1; color: var(--green); }
.stat .l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); margin-top: 10px; }
/* ============================================================
STORYSTREAM RAIL (process steps / timeline)
============================================================ */
.stream { position: relative; padding-left: 34px; }
.stream::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 1px; background: var(--rail); }
.stream-item { position: relative; padding-bottom: 40px; }
.stream-item:last-child { padding-bottom: 0; }
.stream-item::before {
content: ""; position: absolute; left: -30px; top: 4px; width: 15px; height: 15px;
border-radius: 50%; background: var(--canvas); border: 1px solid var(--green);
}
.stream-item.dot-fill::before { background: var(--green); }
.stream-item .t { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 1.3px; color: var(--green); text-transform: uppercase; }
.stream-item h4 { margin: 8px 0 8px; font-size: 1.3rem; }
.stream-item p { margin: 0; color: var(--text-secondary); }
/* ============================================================
ACCORDION (FAQ)
============================================================ */
.acc { border-top: 1px solid var(--image-frame); }
.acc-item { border-bottom: 1px solid var(--image-frame); }
.acc-q {
width: 100%; background: transparent; border: 0; cursor: pointer; color: var(--white);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 26px 4px; text-align: left; font-family: var(--font-sans);
font-size: clamp(1.05rem,1.8vw,1.3rem); font-weight: 700; line-height: 1.3;
transition: color var(--dur-color) var(--ease);
}
.acc-q:hover { color: var(--green); }
.acc-item.open .acc-q { color: var(--green); }
.acc-icon { flex: 0 0 auto; width: 26px; height: 26px; position: relative; }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; background: currentColor; transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.acc-icon::before { top: 12px; left: 3px; right: 3px; height: 2px; }
.acc-icon::after { left: 12px; top: 3px; bottom: 3px; width: 2px; }
.acc-item.open .acc-icon::after { transform: scaleY(0); opacity: 0; }
.acc-a { overflow: hidden; max-height: 0; transition: max-height 300ms var(--ease); }
.acc-a-inner { padding: 0 4px 28px; color: var(--text-muted); font-size: 1.06rem; line-height: 1.7; max-width: 760px; }
/* ============================================================
FORMS
============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); }
.field label .req { color: var(--green); }
.input, .textarea, .select {
background: #ffffff; border: 1px solid var(--image-frame); color: var(--white);
border-radius: var(--r-input); padding: 15px 16px; font-family: var(--font-sans);
font-size: 1rem; width: 100%; transition: border-color var(--dur-color) var(--ease), box-shadow var(--dur-color) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #9aa59a; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.textarea { resize: vertical; min-height: 130px; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.8px; }
.field.invalid .field-error { display: block; }
.form-note { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; }
.form-success {
display: none; align-items: center; gap: 14px; background: var(--pine);
border: 1px solid var(--green-border); border-radius: var(--r-card);
padding: 20px 24px; color: #eef3ee;
}
.form-success .muted { color: #aebfae; }
.form-success strong { color: #ffffff; }
.form-success.show { display: flex; }
.form-success svg { width: 26px; height: 26px; color: var(--green-bright); flex: 0 0 auto; }
.checkbox-row { display: flex; align-items: flex-start; gap: 12px; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--green-bright); }
.checkbox-row label { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: var(--text-secondary); line-height: 1.5; }
/* ---- Sent modal (ventana emergente) ---- */
.sent-overlay {
position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(0,0,0,0.72);
opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
}
.sent-overlay.show { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease); }
.sent-modal {
background: var(--canvas-2); border: 1px solid var(--green-border); border-radius: var(--r-feature);
padding: 40px 36px 34px; max-width: 440px; width: 100%; text-align: center; color: #eef3ee;
transform: translateY(14px) scale(0.98); transition: transform 240ms var(--ease);
max-height: calc(100vh - 48px); overflow-y: auto;
}
.sent-overlay.show .sent-modal { transform: none; }
.sent-modal .sent-ico {
width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
background: var(--green-bright); color: var(--text-inverted);
display: grid; place-items: center;
}
.sent-modal .sent-ico svg { width: 32px; height: 32px; }
.sent-modal h3 { margin: 0 0 12px; color: #fff; }
.sent-modal p { margin: 0 0 26px; color: #b7c6b7; font-size: 0.98rem; line-height: 1.6; }
.sent-modal p .ph { color: #fff; font-weight: 700; white-space: nowrap; }
.sent-modal .btn { width: 100%; }
/* ============================================================
REVIEWS
============================================================ */
.review { background: var(--surface-slate); border-radius: var(--r-card); padding: 30px; display: flex; flex-direction: column; gap: 16px; height: 100%; }
.stars { display: flex; gap: 3px; color: var(--signal); }
.stars svg { width: 17px; height: 17px; }
.review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review .av { width: 40px; height: 40px; border-radius: 50%; background: var(--green-deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-sans); }
.review .who .nm { font-weight: 700; font-size: 0.92rem; }
.review .who .mt { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
/* ============================================================
FOOTER
============================================================ */
.footer { background: var(--canvas-2); border-top: 1px solid var(--image-frame); padding-block: 64px 36px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h5 { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 18px; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: var(--text-muted); font-size: 0.92rem; }
.footer-links a:hover { color: var(--green); }
.footer .blurb { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; max-width: 320px; margin: 16px 0 0; }
.footer-bottom { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--surface-slate); }
.footer-bottom span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); }
/* ============================================================
PAGE HERO (interior)
============================================================ */
.page-hero { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 64px); }
.breadcrumb { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 26px; display: flex; gap: 10px; align-items: center; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { color: var(--image-frame); }
/* ============================================================
UTILITIES
============================================================ */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 12px; } .gap-md { gap: 20px; } .gap-lg { gap: 32px; }
.wrap-flex { flex-wrap: wrap; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mt-lg { margin-top: 40px; } .mt-md { margin-top: 24px; } .mt-sm { margin-top: 14px; }
.max-60 { max-width: 60ch; } .max-50 { max-width: 50ch; }
.text-center { text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--image-frame); border-radius: var(--r-pill); padding: 8px 14px; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* ============================================================
BEFORE / AFTER COLUMNS (Prima e dopo)
============================================================ */
.ba-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ba-col { display: flex; flex-direction: column; gap: 22px; }
.ba-item { position: relative; }
.ba-item image-slot { width: 100%; aspect-ratio: 1; border-radius: var(--r-card); }
.ba-rows { display: flex; flex-direction: column; gap: 22px; }
.ba-badge {
position: absolute; top: 14px; left: 14px; z-index: 3;
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-weight: 700; font-size: 0.64rem;
letter-spacing: 1.5px; text-transform: uppercase;
padding: 8px 13px; border-radius: var(--r-pill); pointer-events: none;
}
.ba-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ba-badge.before { background: var(--text-primary); color: #fff; }
.ba-badge.after { background: var(--green-bright); color: var(--text-inverted); }
.ba-cap { margin-top: 10px; }
/* Before/after hover — subtle zoom inside the frame + green hairline.
Image transform stays translate(-50%,-50%) (cover baseline), so we append
scale to it. Motion is gated so reduced-motion users just get the border. */
.ba-item image-slot { transition: border-color var(--dur-color) var(--ease); cursor: pointer; }
.ba-item:hover image-slot { border-color: var(--green); }
@media (prefers-reduced-motion: no-preference) {
.ba-item image-slot::part(image) { transition: transform 500ms var(--ease); }
.ba-item:hover image-slot::part(image) { transform: translate(-50%, -50%) scale(1.07) !important; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1020px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.cols-4 { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
.nav-links, .nav-phone { display: none; }
.nav-toggle { display: grid; }
}
@media (max-width: 860px) {
:root { --pad-x: 24px; }
.cols-3 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
/* collapse the inline two-column section layouts (heroes, splits, CTA bands) */
main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.footer-grid { grid-template-columns: 1fr; }
.cols-4 { grid-template-columns: 1fr 1fr; }
.ba-cols { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; }
.tile-fill { padding: 28px; }
/* FAQ: the category sidebar must NOT stick on mobile, or it overlaps the
accordion content as you scroll. Force it back into normal flow. */
main aside[style*="sticky"] { position: static !important; top: auto !important; }
/* --- Compact rhythm on phones ------------------------------------
Audience skews older: keep TEXT large and KEEP IMAGES VISIBLE,
just framed as tidy landscape crops so the page scans fast. */
.section-pad { padding-block: clamp(28px, 6vw, 44px); }
.section-pad-sm { padding-block: clamp(20px, 4vw, 30px); }
/* Hero + before/after framing is handled in the UNIFORM block below. */
/* Declutter: hide the hazard strip + hero trust chips on phones */
.hazard-strip, .hero-trust { display: none; }
/* Service cards: tighter frames for faster scanning */
.card { padding: 18px; }
.svc { min-height: 0; gap: 10px; }
.svc .svc-ico { width: 30px; height: 30px; }
}
/* Compact masthead on phones: drop the top-bar "Preventivo" button so the
logo + wordmark never get crowded by it. The CTA still lives in the
hamburger drawer, so nothing is lost. */
@media (max-width: 600px) {
.masthead-inner { gap: 12px; padding: 0 18px; }
.nav-right { gap: 8px; }
.nav-right .btn { display: none; }
.brand-name { font-size: 1.3rem; }
.brand-logo { height: 34px; }
}
/* ============================================================
MOBILE POLISH — phone-specific improvements
============================================================ */
/* Fixed bottom bar: add breathing room so footer isn't hidden */
@media (max-width: 860px) {
body { padding-bottom: 74px; }
}
/* Phones ≤ 480px: tighter type + full-width tap targets */
@media (max-width: 480px) {
/* Type scale: reduce clamp minimums for 360px screens */
.av-hero { font-size: clamp(2.4rem, 11vw, 3.4rem) !important; line-height: 0.93 !important; }
.av-display-2 { font-size: clamp(1.9rem, 8.5vw, 2.8rem) !important; }
.av-display-3 { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; }
.av-h-med { font-size: 1.15rem !important; }
.av-lead { font-size: 1.08rem !important; }
/* Page hero: compact top padding so the title is in-view immediately */
.page-hero { padding-block-start: clamp(20px, 5vw, 36px) !important; }
/* Hero framing handled in the UNIFORM block. */
.page-hero img, .page-hero image-slot { margin-top: 6px; }
/* Buttons: full-width stacked for easy thumb tapping */
.btn-row { flex-direction: column !important; gap: 10px !important; }
.btn-row .btn { width: 100% !important; justify-content: center !important; }
/* Before/after stays two uniform columns — see UNIFORM block. */
/* Tiles: breathing room reduced */
.tile-fill { padding: 22px 18px !important; }
/* CTA tile buttons: always stack */
.tile-fill .btn-row { flex-direction: column !important; }
.tile-fill .btn { width: 100% !important; }
/* Section spacing: a bit tighter */
.section-pad { padding-block: 28px !important; }
/* Reviews: compact */
.review { padding: 18px !important; }
/* Stream: less bottom gap */
.stream-item { padding-bottom: 20px !important; }
/* Breadcrumb: hide to save space */
.breadcrumb { display: none !important; }
/* max-width helpers: remove on phones */
.max-60, .max-50 { max-width: 100% !important; }
/* Stats: 2-up grid */
.stats { grid-template-columns: 1fr 1fr !important; }
/* Accordion: slightly larger tap target */
.acc-q { padding: 20px 4px !important; font-size: 1rem !important; }
}
/* ============================================================
UNIFORM IMAGE FRAMING ON MOBILE
Every hero is the SAME 4:3 box on every page; every before/after
tile is the SAME 4:3 box. "cover" + a per-photo object-position
keeps each subject in view. Plain ![]()
(client share file) honors
object-position directly; recomputes its cover crop.
============================================================ */
@media (max-width: 760px) {
/* --- Heroes: identical size on EVERY page, a touch TALLER than the
"Perché su corda" feature image so the hero anchors the page --- */
.page-hero img,
.page-hero image-slot {
width: 100% !important;
aspect-ratio: 3 / 4 !important;
height: auto !important;
min-height: 0 !important;
border-radius: 20px !important;
object-fit: cover !important;
}
/* Second-section feature + terracotta CTA photos: SAME tall box as the hero
on every page, so hero and feature read at one consistent size. */
#tetti-why-v2, #facciate-condo, #home-why, #facciate-why {
aspect-ratio: 3 / 4 !important; width: 100% !important; height: auto !important; min-height: 0 !important;
}
/* Subject framing per hero (plain ![]()
in the share file) */
.page-hero img[src*="hero-home"] { object-position: 50% 30% !important; }
.page-hero img[src*="facciate-hero"]{ object-position: 50% 18% !important; }
.page-hero img[src*="tetti-hero"] { object-position: 50% 50% !important; }
/* Feature-photo crop: keep the full figure in frame (no half-body cut) */
#facciate-condo { object-position: 42% 15% !important; }
#tetti-why-v2 { object-position: 50% 48% !important; }
/* --- Before / after: ALWAYS two columns on EVERY page so every
prima/dopo tile is the exact same size. Home uses .cols-4,
tetti/facciate use .cols-2 — :has(.ba-item) unifies both. --- */
.ba-rows .grid,
.grid:has(.ba-item) {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.ba-item img,
.ba-item image-slot {
width: 100% !important;
aspect-ratio: 4 / 3 !important;
height: auto !important;
min-height: 0 !important;
object-fit: cover !important;
}
}
/* reduced motion */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
html { scroll-behavior: auto; }
}
/* ============================================================
HOME ADDITIONS — google badge · zones map · urgenze ·
faq teaser · mobile CTA bar · scroll-to-top
============================================================ */
/* ---- Google rating badge (reviews header) --------------- */
.google-badge {
display: inline-flex; align-items: center; gap: 14px;
background: #fff; border: 1px solid var(--image-frame);
border-radius: var(--r-pill); padding: 11px 18px;
transition: border-color var(--dur-color) var(--ease);
}
.google-badge:hover { border-color: var(--green); }
.google-badge .g-logo { width: 30px; height: 30px; flex: 0 0 auto; }
.google-badge .g-top { display: flex; align-items: center; gap: 9px; }
.google-badge .g-score { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; letter-spacing: .5px; }
.google-badge .g-stars { display: flex; gap: 2px; color: var(--signal); }
.google-badge .g-stars svg { width: 14px; height: 14px; }
.google-badge .g-meta {
font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-secondary); margin-top: 5px;
}
/* ---- Urgenze band --------------------------------------- */
.urgenze { background: var(--pine); border-radius: var(--r-feature); overflow: hidden; }
.urgenze .hazard-tape { height: 12px; }
.urgenze-body {
display: grid; grid-template-columns: 1.5fr auto; gap: 32px; align-items: center;
padding: clamp(28px, 4vw, 44px);
}
.urgenze-body p { color: #bcd0bf; margin: 16px 0 0; max-width: 48ch; }
.urgenze-cta { display: flex; flex-direction: column; gap: 12px; min-width: 250px; }
/* ---- Dove operiamo / zones ------------------------------ */
.zones { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 44px; align-items: start; }
.zone-tabs {
display: inline-flex; gap: 5px; background: var(--surface-slate);
border: 1px solid var(--image-frame); border-radius: var(--r-pill); padding: 5px;
}
.zone-tab {
font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
letter-spacing: 1.1px; text-transform: uppercase; padding: 11px 18px;
border: 0; border-radius: 15px; background: transparent; color: var(--text-muted); cursor: pointer;
transition: background var(--dur-btn) var(--ease), color var(--dur-btn) var(--ease);
}
.zone-tab.active { background: var(--green-bright); color: var(--text-inverted); }
.zone-comuni { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.zone-comuni[hidden] { display: none; }
.zone-comune {
font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-muted);
border: 1px solid var(--image-frame); border-radius: var(--r-pill); padding: 8px 13px; background: #fff;
}
.zone-comune.hq { background: var(--green-deep); color: #fff; border-color: transparent; }
.zone-note { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 24px 0 0; max-width: 44ch; }
.zone-maps { position: relative; }
.zone-map {
border: 1px solid var(--image-frame); border-radius: var(--r-card); overflow: hidden;
aspect-ratio: 4 / 3; background: var(--surface-slate);
}
.zone-map[hidden] { display: none; }
.zone-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ---- FAQ teaser (reuses .acc) --------------------------- */
.faq-teaser-acc { max-width: 900px; }
/* ---- Hero image that matches the heading block height ---- */
.hero-stretch { width: 100%; }
@media (max-width: 760px) {
.hero-stretch { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10; }
}
/* ============================================================
TOUCH FEEDBACK — mirror desktop hovers on tap (touch has no :hover)
============================================================ */
@media (hover: none) {
.btn-primary:active { background: var(--green) !important; }
.btn-wa:active { background: #1fbf5b !important; }
.tile-fill .cta-white:active { background: var(--pine) !important; color: #fff !important; }
.tile-fill .btn:not(.cta-white):not(.btn-primary):not(.btn-wa):active { background: var(--pine) !important; color: #fff !important; border-color: var(--pine) !important; }
.av-link:active { color: var(--link-hover-c); }
.nav-links a:active { color: var(--white); }
.ba-item:active { box-shadow: 0 0 0 1px var(--green); }
.ba-item:active image-slot { border-color: var(--green); }
.ba-item:active image-slot::part(image) { transform: translate(-50%, -50%) scale(1.06) !important; }
.ba-item:active > img { transform: scale(1.06); }
}
/* ---- Hero trust chips: tighter so the three sit on one row -- */
.hero-trust { gap: 8px; }
.hero-trust .chip { padding: 7px 12px; letter-spacing: 1.1px; }
/* ---- Mobile sticky CTA bar ------------------------------ */
.mobile-cta { display: none; }
/* ---- Scroll to top (sits above the WhatsApp float) ------- */
.to-top {
position: fixed; right: 22px; bottom: 90px; z-index: 65;
width: 50px; height: 50px; border-radius: 50%;
background: var(--green-bright); color: var(--text-inverted);
border: 1px solid var(--green-border); cursor: pointer;
display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity 200ms var(--ease), transform 200ms var(--ease), background var(--dur-btn) var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--green); }
.to-top svg { width: 22px; height: 22px; }
/* ---- Floating WhatsApp button (desktop only) -------------- */
.wa-float {
position: fixed; right: 22px; bottom: 22px; z-index: 64;
width: 54px; height: 54px; border-radius: 50%;
background: #25D366; color: #07210f; border: 1px solid #1c9e4d;
display: grid; place-items: center;
transition: background var(--dur-btn) var(--ease);
}
.wa-float:hover { background: #1fbf5b; }
.wa-float svg { width: 27px; height: 27px; }
@media (max-width: 860px) {
.wa-float { display: none; }
}
@media (max-width: 860px) {
.zones { grid-template-columns: 1fr; gap: 28px; }
.zone-maps { order: -1; }
.urgenze-body { grid-template-columns: 1fr; }
.urgenze-cta { min-width: 0; }
.mobile-cta {
display: grid; grid-template-columns: 1fr 1fr 1fr;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
background: var(--canvas); border-top: 1px solid var(--image-frame);
}
.mcta-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
min-height: 62px; padding: 10px 6px calc(12px + env(safe-area-inset-bottom, 0px));
font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700;
letter-spacing: 0.5px; text-transform: uppercase; color: var(--white); border-right: 1px solid var(--image-frame);
}
.mcta-btn:last-child { border-right: 0; }
.mcta-btn svg { width: 23px; height: 23px; }
.mcta-btn.wa { color: #1fa855; }
.mcta-btn.quote { background: var(--green-bright); color: var(--text-inverted); }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.to-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); right: 14px; width: 46px; height: 46px; }
/* Elderly-friendly: generous tap targets on every button */
.btn { min-height: 50px; }
.btn-lg { min-height: 56px; }
}