/* Fonts (Inter + Plus Jakarta Sans) are loaded via in each page's with preconnect, not via @import: @import blocks the CSSOM and delays first paint, and preload lets the browser discover/fetch the font stylesheet in parallel with style.css instead of after it. */ /* ---------- Design tokens ---------- */ :root { --color-cream: #faf6ee; --color-cream-deep: #f1e7d3; --color-white: #ffffff; --color-ink: #211c15; --color-ink-soft: #5c5346; --color-ink-faint: #8a8071; --color-gold: #a9813f; --color-gold-deep: #83621f; --color-gold-light: #d9bd85; --color-border: #e6dbc4; /* --font-display: "Lora", "Georgia", serif; */ /* --font-body: "Instrument Sans", "Segoe UI", sans-serif; */ --font-display: "Inter", sans-serif; --font-body: "Plus Jakarta Sans", sans-serif; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; --container-w: 1400px; --radius: 4px; --transition: 220ms ease; --shadow-soft: 0 12px 40px rgba(33, 28, 21, 0.08); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-cream); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 1.25rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-deep); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--color-gold); display: inline-block; } .section-head { max-width: 680px; margin-bottom: var(--space-5); } .section-head h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: var(--space-2); } .section-head p { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: 1.05rem; } .project-intro p + p { margin-top: var(--space-3); } .section { padding: 90px 0; } .section--alt { background: var(--color-cream-deep); } .section--dark { background: var(--color-ink); color: var(--color-cream); } .section--dark .eyebrow { color: var(--color-gold-light); } .section-foot { margin-top: var(--space-4); } /* ---------- Buttons ---------- One primary CTA per page (the header "Contattaci"): near-black fill, soft lift on hover. Everything else is the gold-outline secondary style, so the primary keeps its visual weight uncontested. */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.9em 1.7em; border-radius: 0; font-weight: 600; font-size: 0.95rem; border: 1px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-ink); color: var(--color-cream); box-shadow: var(--shadow-soft); } .btn-primary:hover { background: var(--color-gold-deep); color: var(--color-white); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(33, 28, 21, 0.16); } .btn-primary:active { transform: translateY(0); } .btn-outline { background: transparent; color: var(--color-gold-deep); border-color: var(--color-gold); } .btn-outline:hover { background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); } .link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--color-gold-deep); border-bottom: 1px solid transparent; transition: border-color var(--transition), gap var(--transition); } .link-arrow svg { width: 1em; height: 1em; transition: transform var(--transition); } .link-arrow:hover { border-color: currentColor; } .link-arrow:hover svg { transform: translateX(4px); } .section--dark .link-arrow { color: var(--color-gold-light); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(250, 246, 238, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--transition), box-shadow var(--transition); } .site-header.is-scrolled { border-color: var(--color-border); box-shadow: 0 4px 24px rgba(33, 28, 21, 0.06); } /* Pages with a full-screen photo hero (index.html): the header floats transparently over the image, in the same fixed position at the very top, and only gains its usual cream/blur background once scrolled. */ body.has-hero-overlay .site-header { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background var(--transition), backdrop-filter var(--transition), border-color var(--transition), box-shadow var(--transition); } body.has-hero-overlay .site-header.is-scrolled { background: rgba(250, 246, 238, 0.9); backdrop-filter: blur(10px); } body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav a, body.has-hero-overlay .site-header:not(.is-scrolled) .header-phone, body.has-hero-overlay .site-header:not(.is-scrolled) .nav-toggle { color: var(--color-white); } body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav a.is-active, body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav a:hover { color: var(--color-gold-light); } /* The "Progetti" submenu always sits on its own solid white card, even while the header itself is still transparent over the hero photo — so its links keep the normal dark palette instead of inheriting the white/gold-light hero-overlay colours above (which would be unreadable on a white background). */ body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav .submenu a { color: var(--color-ink-soft); } body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav .submenu a:hover, body.has-hero-overlay .site-header:not(.is-scrolled) .main-nav .submenu a.is-active { color: var(--color-gold-deep); } /* Header logo (index.html only): white while the header floats transparently over the hero photo, gold again once scrolled — same swap point as the nav/phone/hamburger colours above, on both desktop and mobile (no separate mobile override anymore, see the removed block this replaced). Instant swap, no transition. */ body.has-hero-overlay .site-header .brand img { filter: brightness(0) invert(1); } body.has-hero-overlay .site-header.is-scrolled .brand img { filter: none; } .site-header__bar { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: 0.9rem 0; } .header-center { display: flex; align-items: center; gap: var(--space-3); min-width: max-content; } .brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .brand img { height: 50px; width: auto; } /* Header logo only (test): larger and wider than the footer lockup, which keeps the original 50px height above via .brand img. */ .site-header .brand img { height: 64px; width: auto; } /* Mobile only: nudge the header logo slightly off the left edge — desktop keeps its current position untouched (the footer brand lockup is intentionally not scoped by this rule). */ @media (max-width: 959px) { .site-header .brand { margin-left: 0.5rem; } .site-header .brand img { height: 48px; } } .brand span { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; } .main-nav { display: none; } .main-nav ul { display: flex; gap: var(--space-3); } .main-nav ul li { white-space: nowrap; flex-shrink: 0; } .main-nav a { font-size: 0.88rem; font-weight: 600; color: var(--color-ink-soft); transition: color var(--transition); position: relative; padding: 0.3rem 0; } .main-nav a:hover, .main-nav a.is-active { color: var(--color-ink); } .main-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--color-gold); } /* "Progetti" submenu: opens on hover (mouse) or focus-within (keyboard), pure CSS — no JS needed since it never has to persist state. */ .main-nav li.has-submenu { position: relative; } .main-nav .submenu { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; min-width: 190px; margin-top: 0.6rem; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 20; } .main-nav li.has-submenu:hover .submenu, .main-nav li.has-submenu:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .main-nav .submenu a { display: block; padding: 0.6rem 1.1rem; font-size: 0.85rem; white-space: nowrap; } .main-nav .submenu a:hover { background: var(--color-cream-deep); color: var(--color-gold-deep); } .main-nav .submenu a.is-active { color: var(--color-gold-deep); } .main-nav .submenu a.is-active::after { content: none; } .header-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; margin-left: auto; } .header-phone { display: none; font-size: 0.85rem; font-weight: 600; color: var(--color-ink-soft); white-space: nowrap; flex-shrink: 0; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 0; background: transparent; } .nav-toggle svg { width: 20px; height: 20px; } @media (min-width: 960px) { .main-nav { display: block; } .header-phone { display: inline-flex; align-items: center; gap: 0.4em; } .nav-toggle { display: none; } .site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; } .header-center { grid-column: 2; justify-self: center; } .header-actions { grid-column: 3; justify-self: end; } } .mobile-nav { display: none; flex-direction: column; padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--color-border); } .mobile-nav.is-open { display: flex; background: rgba(250, 246, 238, 0.85); backdrop-filter: blur(12px); } .mobile-nav a { padding: 0.7rem 0 0.7rem 0.5rem; font-weight: 600; border-bottom: 1px solid var(--color-border); } @media (min-width: 960px) { .mobile-nav { display: none !important; } } /* ---------- Hero entrance animation (shared, desktop + mobile) ---------- Pure CSS, staggered by data-hero-step: eyebrow -> title -> primary CTA -> secondary CTA. No scroll-jacking, hero is always above the fold so this just plays once on load. */ @keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .reveal-hero { opacity: 0; animation: hero-in 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards; } .reveal-hero[data-hero-step="1"] { animation-delay: 0ms; } .reveal-hero[data-hero-step="2"] { animation-delay: 140ms; } .reveal-hero[data-hero-step="3"] { animation-delay: 300ms; } .reveal-hero[data-hero-step="4"] { animation-delay: 440ms; } @media (prefers-reduced-motion: reduce) { .reveal-hero { animation: none; opacity: 1; transform: none; } } /* ---------- Hero (desktop, >=768px) ---------- Full-bleed, full-screen photo hero: image is the section's own background (100vw, no boxed frame), text overlays the left side, header floats transparently on top until scrolled (see body.has-hero-overlay .site-header below). */ .hero-v2 { display: none; } @media (min-width: 768px) { .hero-v2 { display: flex; align-items: center; position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; } .hero-v2__media { position: absolute; inset: 0; z-index: 0; } .hero-v2__media img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 48%; } /* Very light darkening so the text stays readable without dulling the photo's natural brightness and colour. */ .hero-v2__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.08); } /* Soft dissolve into the next section's background, so it reads as emerging from the photo rather than a hard cut. */ .hero-v2__fade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 26vh; background: linear-gradient(to bottom, rgba(250, 246, 238, 0) 0%, var(--color-cream) 92%); pointer-events: none; } .hero-v2__inner { position: relative; z-index: 3; width: 100%; } .hero-v2__content { max-width: 600px; position: relative; } .hero-v2__eyebrow { display: block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: var(--space-3); } .hero-v2__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1.15; color: var(--color-white); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.22); max-width: 600px; } .hero-v2__actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); } /* On the photo, the secondary CTA reads gold border / white text (the sitewide .btn-outline is gold text, for use on light bg). */ .hero-v2 .btn-outline { color: var(--color-white); } } /* ---------- Hero (mobile only, <768px) ---------- Full-bleed portrait photo with a generous sky area reserved for the content, anchored to the top so it never overlaps the house. */ .hero-mobile-v2 { display: none; } @media (max-width: 767px) { .hero-v2 { display: none; } .hero-mobile-v2 { display: block; position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; } .hero-mobile-v2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Soft dissolve into the next section's background, so it reads as emerging from the photo rather than a hard cut (same treatment as the desktop hero's fade). */ .hero-mobile-v2__fade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 22vh; background: linear-gradient(to bottom, rgba(250, 246, 238, 0) 0%, var(--color-cream) 92%); pointer-events: none; } .hero-mobile-v2__content { position: relative; z-index: 2; padding: 90px 26px 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Sized down from 0.72rem so the full phrase fits on one line at 375px width with clear room from the container's side padding, instead of wrapping to two lines. */ .hero-mobile-v2__eyebrow { display: block; font-family: var(--font-body); font-size: 0.52rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-light); margin-bottom: var(--space-2); white-space: nowrap; } .hero-mobile-v2__title { font-family: var(--font-display); font-weight: 700; color: var(--color-white); font-size: clamp(1.6rem, 7.6vw, 2.1rem); line-height: 1.05; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } /* Side by side, same height (both are plain .btn now) — "Richiedi informazioni" left, "Scopri i nostri progetti" right. Font/padding are trimmed down from the sitewide .btn defaults so both labels fit on one line without wrapping at mobile widths. */ .hero-mobile-v2__actions { margin-top: 32px; display: flex; align-items: center; gap: 10px; width: fit-content; } .hero-mobile-v2__actions .btn { padding: 0.75em 0.85em; font-size: 0.7rem; white-space: nowrap; } .hero-mobile-v2 .btn-outline { color: var(--color-white); } } .page-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; color: var(--color-white); background-size: cover; background-position: center; } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 12, 0.3) 0%, rgba(20, 17, 12, 0.8) 100%); } .page-hero__content { position: relative; padding-bottom: var(--space-4); } .breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); margin-bottom: var(--space-2); } .breadcrumb a { color: var(--color-gold-light); font-weight: 600; } .page-hero h1 { color: var(--color-white); font-size: clamp(2rem, 4.5vw, 3.2rem); } .page-hero .status-badge { margin-bottom: var(--space-2); } /* ---------- Cards / grids ---------- */ .grid { display: grid; gap: var(--space-3); } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .feature-card { min-width: 0; padding: var(--space-3); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--color-gold-light); } .feature-card .icon { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-gold-light); display: flex; align-items: center; justify-content: center; color: var(--color-gold-deep); margin-bottom: var(--space-2); } .feature-card .icon svg { width: 22px; height: 22px; } .feature-card h3 { font-size: 1.05rem; font-weight: 700; font-family: var(--font-body); } .feature-card p { margin-top: 0.5rem; font-size: 0.92rem; color: var(--color-ink-soft); } /* ---------- Tilt card (Caratteristiche costruttive, index) ---------- A subtle 3D tilt that follows the cursor, on top of the plain .feature-card lift/shadow hover. --rx/--ry are set from real cursor position in main.js; JS only runs on real hover-capable pointers and respects prefers-reduced-motion, so touch devices just get the ordinary .feature-card hover untouched. */ .tilt-card { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--transition), border-color var(--transition); } .tilt-card:hover { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.015); box-shadow: var(--shadow-soft); border-color: var(--color-gold-light); } /* ---------- Atmosfera: full-bleed photo (index) ---------- A single still photo, edge-to-edge, at its own natural aspect ratio (no crop, no forced height). */ .atmosfera-section { padding: 0; } .atmosfera-media { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; line-height: 0; } .atmosfera-media img { display: block; width: 100%; height: auto; } /* Mobile only: the source photo is very wide (2.11:1) and the section is already edge-to-edge (no side margins left to reclaim), so at phone widths it renders as a thin strip. Crop a bit off the left and right instead (object-fit:cover at a taller ratio) so the room reads bigger/taller — desktop keeps the full, uncropped photo. */ @media (max-width: 767px) { .atmosfera-media img { aspect-ratio: 1.7 / 1; height: auto; object-fit: cover; object-position: center; } } /* Generic full-bleed, natural-ratio image block — same edge-to-edge technique as the "Atmosfera" photo above, reusable wherever a photo needs to span the full viewport width without cropping or forcing a height (e.g. Chi Siamo). */ .full-bleed-media { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; line-height: 0; } .full-bleed-media img { display: block; width: 100%; height: auto; } /* ---------- Chi Siamo ---------- Three content blocks (philosophy split / full-bleed visual / "guarda avanti" split) share one halved padding so the gap between any two of them is identical (45px + 45px = 90px, half of the site's usual 90px + 90px between plain .section blocks). */ .chi-siamo-block { padding-top: 45px; padding-bottom: 45px; } .chi-siamo-visual__text { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; /* Nudge the centred block up slightly, off dead-centre. */ transform: translateY(-10%); } .chi-siamo-visual__text::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 17, 12, 0.4); } .chi-siamo-visual__text h2 { color: var(--color-white); font-size: clamp(1.6rem, 3.6vw, 2.6rem); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .chi-siamo-visual__text p { margin-top: var(--space-2); color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; line-height: 1.5; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); } /* Mobile: the image is much shorter, so the upward nudge and desktop text sizes leave the copy too tall to fit — keep it centred and scale the type down instead. */ @media (max-width: 700px) { .chi-siamo-visual__text { transform: none; } .chi-siamo-visual__text h2 { font-size: 1.15rem; } .chi-siamo-visual__text p { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.4; } } /* Project cards */ .project-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; height: clamp(26rem, 72vh, 48rem); color: var(--color-white); } /* Mobile: the two project photos sit side by side (see .grid-2), so the tall single-column height clamp above would make them absurdly elongated. Use a 4:5 photo ratio instead, matched to the narrower column width. */ @media (max-width: 719px) { .project-card { height: auto; aspect-ratio: 4 / 5; } /* Tighter gap between the two side-by-side photos so they sit slightly closer together and render a touch larger within the same column width. */ .grid-2 { gap: var(--space-2); } } .project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; } .project-card:hover img { transform: scale(1.06); } .project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 12, 0) 40%, rgba(20, 17, 12, 0.88) 100%); } .project-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3); z-index: 1; } .status-badge { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35em 0.8em; border-radius: 0; background: rgba(20, 17, 12, 0.4); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); } .project-card__body h3 { margin-top: 0.5rem; font-size: 1.3rem; color: var(--color-white); display: flex; align-items: center; gap: 0.35em; } .project-card__body h3 .location-pin { width: 0.78em; height: 0.78em; flex-shrink: 0; color: var(--color-gold-light); } .project-card__body p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); margin-top: 0.2rem; } /* Mobile: cards are half-width (see .grid-2), so the desktop text sizes above overwhelm the photo. Scale badge/title/location down to match. */ @media (max-width: 719px) { .project-card__body { padding: var(--space-2); } .status-badge { font-size: 0.6rem; padding: 0.3em 0.6em; } .project-card__body h3 { margin-top: 0.4rem; font-size: 0.92rem; } .project-card__body p { font-size: 0.72rem; margin-top: 0.15rem; } } /* Accordion project row (Progetti realizzati, Lavori in corso): hovering a card grows it while the sibling compresses, row height stays fixed so only the width redistributes between them. */ @media (min-width: 720px) and (hover: hover) and (pointer: fine) { .accordion-row { display: flex; } .accordion-row .project-card { flex: 1 1 0%; transition: flex-grow 550ms cubic-bezier(0.22, 1, 0.36, 1); } .accordion-row .project-card:hover { flex-grow: 1.55; } .accordion-row:hover .project-card:not(:hover) { flex-grow: 0.65; } } /* ---------- Project catalog (Progetti realizzati / Lavori in corso / Progetti futuri index pages) ---------- A scalable index-page card, bigger and richer than the homepage teaser card above, two per row on desktop. Adding a project later means adding one more .catalog-card block in the markup and a new detail page — this grid/card CSS never needs to change. */ .catalog-grid { display: grid; gap: var(--space-5); } @media (min-width: 900px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } } .catalog-card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .catalog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: var(--color-gold-light); } .catalog-card__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; } .catalog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; } .catalog-card:hover .catalog-card__media img { transform: scale(1.045); } .catalog-card__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; } .catalog-card__title { font-size: 1.5rem; display: flex; align-items: center; gap: 0.4em; } .catalog-card__title .location-pin { width: 0.68em; height: 0.68em; flex-shrink: 0; color: var(--color-gold-deep); } .catalog-card__location { margin-top: 0.25rem; font-size: 0.9rem; color: var(--color-ink-faint); } .catalog-card__tags { margin-top: var(--space-2); margin-bottom: var(--space-2); display: flex; flex-wrap: wrap; gap: 0.5rem; } .catalog-card__tags li { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gold-deep); border: 1px solid var(--color-border); background: var(--color-cream-deep); padding: 0.4em 0.8em; } .catalog-card__cta { margin-top: auto; align-self: flex-start; } /* ---------- Project detail pages ---------- */ /* Servizi e dotazioni (left) + Caratteristiche tecniche (right): one section, two columns, stacked on mobile. */ .project-specs { display: grid; gap: var(--space-5); } @media (min-width: 900px) { .project-specs { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .specs-grid__item { padding: var(--space-3); background: var(--color-white); border: 1px solid var(--color-border); text-align: center; } .specs-grid__item .icon { width: 42px; height: 42px; margin: 0 auto var(--space-2); border-radius: 50%; border: 1px solid var(--color-gold-light); display: flex; align-items: center; justify-content: center; color: var(--color-gold-deep); } .specs-grid__item .icon svg { width: 20px; height: 20px; } .specs-grid__item h3 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); } .specs-grid__item p { margin-top: 0.3rem; font-size: 1.05rem; font-weight: 700; color: var(--color-ink); } /* Combined "Locali" + "Bagni" card: two mini stat blocks side by side inside one specs-grid tile instead of two separate tiles. Reuses the existing .icon/h3/p styling above (they still match as descendants), just splits the tile horizontally. */ .specs-grid__item--split { display: flex; gap: var(--space-2); } .specs-grid__item--split > div { flex: 1; min-width: 0; } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .gallery a { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .gallery a:hover img { transform: scale(1.05); } @media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, 1fr); } } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(15, 12, 8, 0.92); padding: var(--space-3); } .lightbox.is-open { display: flex; } .lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; width: auto; border-radius: var(--radius); } .lightbox__close { position: absolute; top: var(--space-3); right: var(--space-3); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: var(--color-white); display: flex; align-items: center; justify-content: center; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: var(--color-white); display: flex; align-items: center; justify-content: center; } .lightbox__nav svg { width: 20px; height: 20px; } .lightbox__prev { left: var(--space-3); } .lightbox__next { right: var(--space-3); } /* ---------- Split layout (image + text) ---------- */ .split { display: grid; gap: var(--space-5); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: minmax(0, 52%) 1fr; gap: var(--space-6); } /* Reversed sections swap which track each side occupies (not just visual order), so the text column is always the same size across sections, regardless of whether the image sits on the left or the right. */ .split--reverse { grid-template-columns: 1fr minmax(0, 52%); } .split--reverse .split__media { order: 2; } /* Personalizza la tua casa (home): the image column takes slightly more room than the text column, ~4.5cm wider than the shared .split--reverse ratio used elsewhere. */ #personalizza .split--reverse { grid-template-columns: 1fr minmax(0, calc(52% + 4.5cm)); } /* The bleed-right image sits close to the full-bleed photo above and the "Progetti Completati" section below — just a minimal breathing gap (not the site's usual 90px), in the section's own background colour, so adjacent photos never touch directly (the image's own proportions and the column split above are untouched). */ #personalizza { padding-top: 20px; padding-bottom: 20px; } #progetti-completati { padding-top: 20px; } } .split__media { max-width: 460px; margin: 0 auto; } @media (min-width: 900px) { .split__media { max-width: none; } } .split__media img { border-radius: var(--radius); width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; } .split__media.is-tall img { aspect-ratio: 16 / 10; } .split__media + div, .split__content { max-width: 620px; } /* Bleed variant: the image keeps the same column position as any other split image, but its outer edge extends past the container all the way to the viewport edge, instead of stopping at the container's padding. */ @media (min-width: 900px) { .split__media--bleed-right { --bleed: calc(max(0px, (100vw - var(--container-w)) / 2) + 1.25rem); width: calc(100% + var(--bleed)); margin-right: calc(-1 * var(--bleed)); } .split__media--bleed-right img { aspect-ratio: auto; object-fit: contain; border-radius: 0; } } .split__eyebrow { margin-bottom: var(--space-2); } .split h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } .split p { margin-top: var(--space-2); color: var(--color-ink-soft); } /* Story stack split (Caratteristiche costruttive): the fan needs ~870px of unobstructed width to show all cards at full spread, so it keeps the single-column layout well past the standard .split breakpoint and only splits into two columns once there's room to spare. */ /* .split__media normally shrink-wraps its content and self-centers (via margin:0 auto, sized for an ); the story-stack has no intrinsic width of its own, so force the wrapper to fill all the space it's given at every breakpoint, or the fan gets clipped. */ .split--story .split__media { width: 100%; margin: 0; } @media (min-width: 900px) { .split--story { grid-template-columns: 1fr; } } @media (min-width: 1300px) { .split--story { grid-template-columns: minmax(220px, 22%) 1fr; gap: var(--space-4); } } /* Desktop-only photo background for the "Le nostre 6 storie" text column: below 1300px this column stacks full-width above the fan (plain text on the page background reads fine there), so the image only makes sense once the column narrows down to sit beside the fan. */ .split--story .split__content-bg { display: none; } @media (min-width: 1300px) { /* --bleed = distance from this column's own left edge out to the actual viewport edge (container's centering margin, if any, plus its own padding) — same formula as .split__media--bleed-right, mirrored. */ .split--story .split__content { --bleed: calc(max(0px, (100vw - var(--container-w)) / 2) + 1.25rem); position: relative; align-self: stretch; z-index: 0; padding: var(--space-4); } /* Image and overlay both escape the column box on 3 sides — left out to the viewport edge, top/bottom out past the section's own 90px padding — while staying pinned to the column's own right edge (the boundary with the fan never moves). The image sits in a plain
wrapper (not positioned directly on the ) because absolutely-positioned replaced elements (img/video) don't reliably stretch between opposing top/bottom or left/right offsets — they keep their intrinsic aspect ratio instead. A non-replaced wrapper stretches normally. */ .split--story .split__content-bg { display: block; position: absolute; top: -90px; bottom: -90px; right: 0; left: calc(-1 * var(--bleed)); z-index: -2; } .split--story .split__content-bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .split--story .split__content::before { content: ""; position: absolute; top: -90px; bottom: -90px; right: 0; left: calc(-1 * var(--bleed)); z-index: -1; background: rgba(20, 17, 12, 0.45); } .split--story .split__content .eyebrow { color: var(--color-gold-light); } .split--story .split__content .eyebrow::before { background: var(--color-gold-light); } .split--story .split__content h1 { color: var(--color-white); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); } .split--story .split__content p { color: rgba(255, 255, 255, 0.9); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); } } .check-list li { display: flex; align-items: flex-start; gap: 0.6em; margin-top: 0.7em; font-size: 0.95rem; } .check-list svg { width: 1.1em; height: 1.1em; flex-shrink: 0; margin-top: 0.15em; color: var(--color-gold); } /* ---------- Legal pages (Privacy Policy, Cookie Policy) ---------- */ .legal-content { max-width: 760px; } .legal-lead { font-size: 1.05rem; color: var(--color-ink-soft); } .legal-content h2 { margin-top: var(--space-5); font-size: 1.3rem; } .legal-content h2:first-of-type { margin-top: var(--space-4); } .legal-content p { margin-top: var(--space-2); color: var(--color-ink-soft); } .legal-content .check-list { margin-top: var(--space-2); } .legal-updated { margin-top: var(--space-4); font-size: 0.85rem; color: var(--color-ink-faint); font-style: italic; } /* ---------- Story stack (Caratteristiche costruttive) ---------- A fanned stack of cards: the active one sits front-and-center, the rest fan out behind it. Positioning (transform/opacity/z-index) is computed in JS per active index; CSS only owns the transition. */ .story-stack { --story-card-w: 320px; --story-card-h: 380px; } .story-stack__stage { position: relative; height: calc(var(--story-card-h) + 120px); overflow: hidden; /* Without this, touch browsers treat a horizontal drag across the fan as an attempt to scroll the page and cancel the pointerdown/pointerup sequence the swipe-to-navigate logic in main.js relies on — vertical scrolling still passes through untouched, only horizontal panning is handed to JS. */ touch-action: pan-y; } .story-stack__card { position: absolute; left: 50%; bottom: 60px; width: var(--story-card-w); height: var(--story-card-h); padding: var(--space-4); display: flex; flex-direction: column; justify-content: flex-start; text-align: left; font: inherit; color: inherit; background: var(--color-white); border: 1px solid var(--color-border); border-radius: calc(var(--radius) * 3); box-shadow: 0 20px 45px rgba(33, 28, 21, 0.12); cursor: pointer; transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1), opacity 450ms ease, box-shadow 400ms ease, border-color 400ms ease; } .story-stack__card.is-active { cursor: default; box-shadow: 0 30px 60px rgba(33, 28, 21, 0.18); border-color: var(--color-gold-light); } .story-stack__card:not(.is-active) p { display: none; } .story-stack__num { font-family: var(--font-display); font-size: 1rem; color: var(--color-gold-deep); font-style: italic; } .story-stack__card h3 { margin-top: 0.5rem; font-size: 1.05rem; line-height: 1.25; } .story-stack__card p { margin-top: var(--space-2); color: var(--color-ink-soft); font-size: 0.85rem; line-height: 1.45; } .story-stack__nav { margin-top: var(--space-4); display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .story-stack__arrow { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-gold-light); background: var(--color-white); color: var(--color-gold-deep); flex-shrink: 0; transition: background var(--transition), color var(--transition), border-color var(--transition); } .story-stack__arrow:hover { background: var(--color-gold); color: var(--color-white); border-color: var(--color-gold); } .story-stack__arrow svg { width: 18px; height: 18px; } .story-stack__dots { display: flex; gap: 0.5rem; } .story-stack__dots button { appearance: none; border: none; padding: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background var(--transition), transform var(--transition); } .story-stack__dots button.is-active { background: var(--color-gold); transform: scale(1.4); } @media (max-width: 640px) { .story-stack { --story-card-w: 250px; --story-card-h: 360px; } .story-stack__card { padding: var(--space-3); } } /* ---------- Contact ---------- */ .contact-grid { display: grid; gap: var(--space-4); } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } } .contact-info-item { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); } .contact-info-item:first-child { border-top: none; } .contact-info-item .icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-gold-light); display: flex; align-items: center; justify-content: center; color: var(--color-gold-deep); flex-shrink: 0; } .contact-info-item .icon svg { width: 20px; height: 20px; } .contact-info-item h3 { font-size: 0.95rem; font-weight: 700; font-family: var(--font-body); } .contact-info-item p, .contact-info-item a { margin-top: 0.2rem; font-size: 0.95rem; color: var(--color-ink-soft); } .contact-info-item a:hover { color: var(--color-gold-deep); } /* Form */ .form { display: grid; gap: var(--space-2); } .form-row { display: grid; gap: var(--space-2); } @media (min-width: 560px) { .form-row--2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-size: 0.85rem; font-weight: 700; color: var(--color-ink); } .field .req { color: var(--color-gold-deep); } .field input, .field select, .field textarea { font-family: inherit; font-size: 0.95rem; padding: 0.85em 1em; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); color: var(--color-ink); } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; border-color: var(--color-gold); } .field-radios { display: flex; gap: var(--space-3); flex-wrap: wrap; } .field-radio { display: flex; align-items: center; gap: 0.5em; font-size: 0.9rem; } .field-radio input { accent-color: var(--color-gold-deep); width: 16px; height: 16px; } .field-checkbox { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; color: var(--color-ink-soft); } .field-checkbox input { accent-color: var(--color-gold-deep); width: 16px; height: 16px; margin-top: 0.2em; flex-shrink: 0; } .field-checkbox a { color: var(--color-gold-deep); text-decoration: underline; } .form-note { font-size: 0.8rem; color: var(--color-ink-faint); } .form-status { font-size: 0.9rem; font-weight: 600; padding: 0.8em 1em; border-radius: var(--radius); display: none; } .form-status.is-visible { display: block; } .form-status.is-success { background: #eef4e7; color: #3f5c26; } .form-status.is-error { background: #fbeceb; color: #8a2f27; } /* ---------- CTA banner ---------- */ .cta-banner { text-align: center; padding: var(--space-6) 0 var(--space-5); } .cta-banner h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--color-white); } .cta-banner p { margin: var(--space-2) auto 0; max-width: 520px; color: rgba(255, 255, 255, 0.8); } .cta-banner p.cta-banner__lead--single-line { max-width: none; white-space: nowrap; } @media (max-width: 700px) { .cta-banner p.cta-banner__lead--single-line { white-space: normal; } } .cta-banner__actions { margin-top: var(--space-4); display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; } /* ---------- Footer ---------- */ .site-footer { background: var(--color-ink); color: rgba(250, 246, 238, 0.75); padding: var(--space-5) 0 var(--space-3); } .footer-grid { display: grid; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(250, 246, 238, 0.14); } @media (min-width: 800px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } } .footer-link-btn { font: inherit; color: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; text-align: left; } .footer-brand .brand span { color: var(--color-cream); } .footer-brand p { margin-top: var(--space-2); max-width: 320px; font-size: 0.92rem; } .footer-social { margin-top: var(--space-3); display: flex; gap: 0.7rem; } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(250, 246, 238, 0.25); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition), color var(--transition); } .footer-social a:hover { border-color: var(--color-gold); color: var(--color-gold-light); } .footer-social svg { width: 18px; height: 18px; } .footer-col h4 { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-cream); margin-bottom: var(--space-2); } .footer-col li { margin-top: 0.6rem; font-size: 0.92rem; } .footer-col a:hover { color: var(--color-gold-light); } .footer-bottom { display: flex; flex-direction: column; gap: 0.6rem; padding-top: var(--space-3); font-size: 0.8rem; } @media (min-width: 700px) { .footer-bottom { flex-direction: row; justify-content: space-between; } } /* ---------- Utilities ---------- */ .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Legal pages (Privacy Policy, Cookie Policy) ---------- Editorial layout: sticky/scrollspy TOC + content cards. Reuses existing components (.page-hero, .feature-card + .icon, .btn, .reveal, .check-list) wherever possible; palette restricted to the values below, per the page's own explicit design brief. */ .legal-page { --legal-bg: #f7f2ec; background: var(--legal-bg); } .page-hero--legal h1 { font-size: clamp(2.4rem, 5.4vw, 4.5rem); } .page-hero__subtitle { margin-top: var(--space-2); max-width: 620px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); } .legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } @media (min-width: 1000px) { .legal-layout { grid-template-columns: 220px minmax(0, 900px); gap: var(--space-6); align-items: start; } } .legal-toc { font-size: 0.88rem; } .legal-toc__label { display: none; } .legal-toc nav > ul { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .legal-toc nav > ul::-webkit-scrollbar { display: none; } .legal-toc a { display: block; flex: 0 0 auto; white-space: nowrap; padding: 0.5em 1em; border: 1px solid var(--color-border); border-radius: 100px; color: var(--color-ink-soft); transition: color var(--transition), border-color var(--transition), background var(--transition); } .legal-toc a.is-active { color: var(--color-ink); border-color: var(--color-gold); background: var(--color-white); } @media (min-width: 1000px) { .legal-toc { position: sticky; top: calc(var(--space-3) + 84px); } .legal-toc__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-ink); margin-bottom: var(--space-3); } .legal-toc nav > ul { flex-direction: column; overflow-x: visible; } .legal-toc a { border: none; border-left: 2px solid var(--color-border); border-radius: 0; padding: 0.4em 0 0.4em 1em; } .legal-toc a.is-active { background: none; border-left-color: var(--color-gold); } } .legal-content { min-width: 0; } .legal-card { padding: var(--space-4); box-shadow: 0 4px 24px rgba(33, 28, 21, 0.05); margin-bottom: var(--space-4); } .legal-card:hover { transform: none; } .legal-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: var(--space-2); } .legal-card p { font-size: 1.125rem; line-height: 1.75; color: var(--color-ink-soft); margin-top: var(--space-2); } .legal-card .check-list { margin-top: var(--space-3); } .legal-card.reveal { transform: translateY(10px); transition: opacity 300ms ease, transform 300ms ease; } .legal-lead { font-size: 1.15rem; color: var(--color-ink-soft); margin-bottom: var(--space-4); } /* Key facts (email, PEC, indirizzo, P.IVA) as small dedicated cards instead of being buried in a paragraph. */ .legal-facts { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-3); } @media (min-width: 560px) { .legal-facts { grid-template-columns: 1fr 1fr; } } .legal-fact { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); } .legal-fact__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-deep); margin-bottom: 0.3rem; } .legal-fact a { color: var(--color-ink); font-weight: 600; } /* Info box for a single important point, lifted out of the paragraph flow. Background is a light gold tint, so it stays inside the gold accent family rather than introducing a new colour. */ .legal-info-box { display: flex; align-items: flex-start; gap: var(--space-3); background: rgba(169, 129, 63, 0.07); border: 1px solid rgba(169, 129, 63, 0.2); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-3); } .legal-info-box svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 0.1em; color: var(--color-gold-deep); } .legal-info-box p { margin: 0; font-size: 1rem; color: var(--color-ink-soft); } /* Vertical timeline (conservazione dei dati) */ .legal-timeline { list-style: none; position: relative; margin: var(--space-3) 0 0; padding-left: 28px; } .legal-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); } .legal-timeline li { position: relative; padding-bottom: var(--space-3); } .legal-timeline li:last-child { padding-bottom: 0; } .legal-timeline__dot { position: absolute; left: -28px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-white); border: 2px solid var(--color-gold); } .legal-timeline h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--color-ink); } .legal-timeline p { margin-top: 0.2rem; font-size: 0.95rem; color: var(--color-ink-soft); } /* FAQ accordion */ .legal-faq__item { border-bottom: 1px solid var(--color-border); } .legal-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; background: none; border: none; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); text-align: left; cursor: pointer; } .legal-faq__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-gold-deep); transition: transform var(--transition); } .legal-faq__item.is-open .legal-faq__chevron { transform: rotate(180deg); } .legal-faq__answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease; } .legal-faq__answer p { padding-bottom: var(--space-3); margin: 0; font-size: 1rem; color: var(--color-ink-soft); } .legal-faq__item.is-open .legal-faq__answer { max-height: 320px; } /* Closing CTA band, ahead of the footer */ .legal-cta { text-align: center; max-width: 560px; margin: var(--space-6) auto 0; } @media (min-width: 720px) { .legal-cta { max-width: 900px; } } .legal-cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); color: var(--color-ink); } .legal-cta p { margin-top: var(--space-2); color: var(--color-ink-soft); } .legal-cta .btn { margin-top: var(--space-4); } @media (prefers-reduced-motion: reduce) { .legal-faq__answer { transition: none; } } /* Visually hidden but still readable by screen readers/search engines — used for the one required

on pages whose visual design has no room for a printed page title (hero was removed site-wide, see nav). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--color-ink); color: var(--color-cream); padding: 0.8em 1.2em; z-index: 1000; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } :focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 2px; }