/* ╔══════════════════════════════════════════════════════════════════════════╗ ║ JAS Cleaning — PUBLIC SITE CHROME ║ ║ ║ ║ Shared header, navigation, and footer styles for consumer pages. ║ ║ Also includes the gradient "photo" placeholders that will be replaced ║ ║ by real photography in production. ║ ║ ║ ║ LOADED BY: home, about, services, reviews, faq, contact, legal, ║ ║ status, accessibility, transparency, 404, ║ ║ /areas/*, /services/*, /blog/* ║ ║ NOT loaded by: bookings, clean-checklist (custom chrome), ║ ║ /pm/* (PM portal), /account/* (customer account) ║ ║ ║ ║ DEPENDS ON: styles.css (uses all tokens defined there) ║ ║ ║ ║ Sections: ║ ║ • .ub — top utility bar (location, phone, sign-in, EN/ES) ║ ║ • nav.bar — sticky main nav (logo, menu, CTAs) ║ ║ • .page-h — page hero (eyebrow, h1, lead) ║ ║ • .eb — section eyebrow (mono, tracked, uppercase) ║ ║ • section.pg — generic content section padding ║ ║ • footer.site — bottom footer (4-col grid + legal row) ║ ║ • .ph-* — gradient "photo" placeholders (kitchen, bath, etc.) ║ ╚══════════════════════════════════════════════════════════════════════════╝ */ /* Shared site chrome for JAS public pages */ .ub { background: var(--ink); color: var(--paper); font-size: 12px; padding: 10px 56px; display:flex; align-items:center; justify-content:space-between; } .ub .pin { display:inline-flex; gap:6px; align-items:center; } .ub .right { display:flex; gap:16px; align-items:center; } .ub .lang b { border-bottom:1px solid rgba(255,255,255,0.4); padding-bottom:1px; font-weight:400; } .ub .lang span { opacity:0.55; margin-left:10px; } nav.bar { padding: 20px 56px; border-bottom: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; background: var(--bone); position: sticky; top:0; z-index:50; } nav.bar .menu { display:flex; gap:28px; font-size:14px; color: var(--ink-2); } nav.bar .menu a { color:inherit; text-decoration:none; cursor:pointer; } nav.bar .menu a:hover { color: var(--leaf); } nav.bar .menu a.on { color: var(--leaf); } nav.bar .ctas { display:flex; gap:8px; } .eb { font-family: var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-3); } .page-h { padding: 64px 56px 32px; border-bottom: 1px solid var(--line-soft); } .page-h h1 { font-family: var(--display); font-size: 88px; line-height: 1.04; letter-spacing:-0.02em; margin: 12px 0 36px; font-weight:400; padding-bottom: 4px; } .page-h h1 em { color: var(--leaf); font-style: italic; } .page-h .lead { font-size: 18px; color: var(--ink-2); max-width: 640px; line-height: 1.5; margin-top: 8px; } section.pg { padding: 64px 56px; } footer.site { background: var(--bone); padding: 48px 56px 24px; display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; border-top:1px solid var(--line); } footer.site h5 { font-family: var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight:500; } footer.site a { display:block; color: var(--ink); text-decoration:none; font-size:14px; padding:4px 0; } footer.site a:hover { color: var(--leaf); } footer.site .legal { grid-column: 1 / -1; border-top:1px solid var(--line); padding-top:20px; font-family: var(--mono); font-size:11px; color: var(--ink-3); letter-spacing:0.12em; text-transform:uppercase; display:flex; justify-content:space-between; margin-top: 16px; } .ph { background-size:cover; background-position:center; } /* Licensed room photography (public/photos — see docs/media-credits.md) layered over the original gradients, which remain visible while the image loads. */ .ph-kitchen { background: url('/photos/kitchen.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } .ph-bath { background: url('/photos/bath.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } .ph-living { background: url('/photos/living.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } .ph-window { background: url('/photos/window.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } .ph-bed { background: url('/photos/bed.webp') center/cover no-repeat, linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } /* Owner-provided founder portrait (Susana Davilla — see docs/media-credits.md). center 30% keeps her face framed inside the 300px about-card crop. */ /* Founder card: the ORIGINAL design — 300px photo banner over the note. The photo asset itself is pre-composed for this wide shape (full portrait centered over a soft blur-extended backdrop), so nothing important crops. */ .about-founder { padding: 0; overflow: hidden; } .about-founder .founder-photo { display: block; width: 100%; height: 300px; object-fit: cover; object-position: center; background: linear-gradient(135deg, #EFE9DC 0%, #E1D9C5 100%); } .about-founder .founder-note { padding: 24px; } /* Admin-fed public content runtime: non-blocking shimmer while same-origin public facts load. Existing static copy remains the fallback if the endpoint is slow/offline. */ [data-content-key], [data-content-href-key] { transition: color 160ms ease, opacity 160ms ease, background-position 420ms ease; } [data-content-loading="true"].content-shimmer { color: transparent !important; border-radius: 0.35em; background: linear-gradient(100deg, rgba(20,62,31,0.08) 20%, rgba(212,189,134,0.26) 38%, rgba(20,62,31,0.08) 56%); background-size: 220% 100%; animation: public-content-shimmer 1.05s ease-in-out infinite; } [data-content-loading="true"].content-shimmer::selection { color: transparent; } body[data-public-content-status="fallback"] [data-content-key], body[data-public-content-status="fallback"] [data-content-href-key] { opacity: 0.98; } @keyframes public-content-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { [data-content-loading="true"].content-shimmer { animation: none; } }