/* ============================================================================= Lodge Digital — Property Design System ("Direct & Warm" / Design B) ----------------------------------------------------------------------------- Consolidated from the six original static HTML files (early case-study build). All classes are prefixed lc- ("lodge cottage") to avoid collisions with Astra's own classes or other plugins on a shared theme. Mobile-first; single breakpoint at 900px, matching the original build. Known-bug fixes / locked decisions (do not "simplify" these away): 1. .lc-phero / .lc-hero use position:relative — required so the absolutely positioned .lc-phero__txt / .lc-hero__card resolve against the hero, not an ancestor further up. 2. .lc-stackgrid at desktop uses grid-template-columns: minmax(0,1fr) minmax(0,1fr) — two EQUAL columns with an explicit minmax(0, ...) floor. This is the fix for the two-column collapse bug noted in the project brief: an asymmetric fr-track split (e.g. 1fr 1.1fr) intermittently collapsed one column to near-zero width in real browsers. Keep splits symmetric with minmax(0, 1fr), or use flexbox with min-width:0. 3. .lc-say bottom padding and .lc-cta bottom margin carry intentionally doubled values from explicit client feedback on the original build. ========================================================================== */ /* ----------------------------------------------------------------------- 0. Self-hosted fonts (added v1.3.0 — previously loaded from fonts.googleapis.com/fonts.gstatic.com, which added an external DNS+connection+CSS-then-font round trip that was delaying LCP under throttled connections. Both are variable fonts covering the full weight range used across the site in a single file each, subset to Latin only (site is English-only) and trimmed to the wght range this theme actually uses via fonttools varLib.instancer. font-weight is a RANGE, not a fixed value, because these are variable fonts — the browser picks the exact weight requested by font-weight in the design tokens/utility classes below, same as the Google-hosted version did. Source: google/fonts GitHub repo (OFL-1.1 licensed) — see assets/fonts/OFL-*.txt for the license text of each family. ----------------------------------------------------------------------- */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/bricolage-grotesque-variable.woff2') format('woff2-variations'); } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/figtree-variable.woff2') format('woff2-variations'); } /* ----------------------------------------------------------------------- 1. Tokens ----------------------------------------------------------------------- */ :root { --paper: #f6f1e7; --pine: #33452f; --moss: #8ba24b; --honey: #d29a3f; --chest: #5a3a22; --ink: #31382c; --sub: #5b6150; --muted: #8a8570; } @media (prefers-reduced-motion: reduce) { .lc-phero .lc-frameimg img, .lc-hero .lc-frameimg img { animation: none; } .lc-reveal img { transform: none; opacity: 1; transition: none; } .lc-bookbar { transition: none; } .lc-marq .lc-run { animation: none; } } /* ----------------------------------------------------------------------- 2. Base ----------------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: 'Figtree', sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } .lc-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } img { display: block; width: 100%; height: 100%; object-fit: cover; } /* sitewide reset — NOT scoped to .lc-wrap; several images (e.g. .lc-loc, .lc-hosts) live outside a .lc-wrap container and need this too */ .lc-bar a, .lc-foot a, .lc-marq span, .lc-fnav a { color: inherit; } h1, h2, h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -.02em; margin: 0; } @media (min-width: 900px) { .lc-wrap { padding: 0 40px; } } /* Astra's own "scroll to top" button — belt-and-braces hide in case the asset-stripping in functions.php doesn't catch every version/variant of its markup. Doesn't match the brand and duplicates what the sticky book bar already does. */ #scroll-top, .ast-scroll-top-container, .scroll-to-top { display: none !important; } /* ----------------------------------------------------------------------- 3. Header / nav ----------------------------------------------------------------------- */ header.lc-bar { position: sticky; top: 0; z-index: 30; background: rgba(246, 241, 231, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(51, 69, 47, .08); } header.lc-bar .lc-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; } .lc-brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; color: var(--pine); text-decoration: none; } .lc-pill { background: var(--pine); color: #f6f1e7 !important; /* !important needed: the .lc-bar a{color:inherit} helper rule below has higher specificity (class+element) than a single-class .lc-pill selector and was winning, making this text unreadable */ font-weight: 700; font-size: 13.5px; padding: 10px 19px; border-radius: 999px; text-decoration: none; white-space: nowrap; } nav.lc-desknav { display: none !important; } /* defensive !important — same reasoning as the mobile-hide rule below */ .lc-row-end { display: flex; align-items: center; gap: 14px; } .lc-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; flex: 0 0 auto; } .lc-hamburger span { display: block; width: 100%; height: 2px; background: var(--pine); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } .lc-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .lc-hamburger.is-open span:nth-child(2) { opacity: 0; } .lc-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .lc-mobile-menu { /* container itself — the actual link layout is on .lc-mobile-menu nav below, since the