/* ============================================================================ CRESTLINE DESIGN SYSTEM Loaded AFTER concept-2.css and inner.css so it settles the five things that had drifted across 28 pages: 1. PALETTE white ground, wine as the single brand accent 2. TYPE one scale for h1-h6 and body (was 32 different h3 sizes) 3. CONTROLS one button language + one link language (was 28 classes) 4. SCRIMS decorative overlays removed, legibility ones kept 5. SPACING one 4px-based rhythm (was 56 arbitrary gap values) ========================================================================= */ /* ---------- 1. PALETTE --------------------------------------------------- */ :root { --paper: #FFFFFF; --ivory: #FFFFFF; --cream: #F7F5F2; --surface: #FFFFFF; --surface-2: #F7F5F2; --ink: #3E2E12; /* bronze-black, 13.09:1 on white */ --muted: #5A4E3C; /* warm grey-brown body copy */ /* THE BRAND GOLD, sampled from the logo gradient (#F5D576 -> #C29D48). Gold is 2.04:1 on white, so --gold is decorative / for dark grounds and --gold-ink is the accessible gold used for text and links on white. */ --gold: #C29D48; --gold-light: #F5D576; --gold-mid: #D9B04F; --gold-deep: #8A6B2A; --gold-ink: #8A6B2A; --gold-tint: rgba(194, 157, 72, 0.10); /* aliases: the whole codebase says --wine, so it now resolves to gold and every existing rule adopts the brand palette without being rewritten */ --wine: #8A6B2A; --wine-deep: #6B521F; --wine-soft: #C29D48; --wine-tint: rgba(194, 157, 72, 0.10); --brown: #2E2413; --brown-deep: #1E180C; /* the dark band ground */ --peach: #F5D576; /* the light end of the logo gradient */ --peach-soft: #FAE9BE; --hair: rgba(62, 46, 18, 0.14); --hair-strong: rgba(62, 46, 18, 0.26); /* ---------- 5. SPACING: a single 4px-based rhythm ----------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --section-y: clamp(56px, 7vw, 96px); --section-y-sm: clamp(40px, 5vw, 64px); --head-mb: clamp(24px, 3vw, 40px); --card-gap: clamp(16px, 2vw, 24px); --pad-x: clamp(40px, 10vw, 144px); /* ---------- 2. TYPE SCALE ---------------------------------------------- */ --fs-h1: clamp(34px, 5.2vw, 64px); --fs-h2: clamp(28px, 3.6vw, 44px); --fs-h3: clamp(20px, 1.9vw, 26px); --fs-h4: clamp(17px, 1.4vw, 20px); --fs-h5: 16px; --fs-h6: 14px; --fs-body: clamp(15px, 1.05vw, 17px); --fs-sm: 14px; --fs-xs: 12.5px; --lh-tight: 1.12; --lh-head: 1.2; --lh-body: 1.7; /* Headings take a geometric sans that echoes the CRESTLINE wordmark (wide-set, high-waisted caps). Body stays Inter. */ --f-display: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif; --f-italic: 'Jost', 'Century Gothic', system-ui, sans-serif; --f-body: 'Inter', system-ui, -apple-system, sans-serif; --radius-lg: 6px; --radius-md: 4px; --radius-sm: 2px; } html, body { background: var(--paper); color: var(--ink); } .lw-alt, .lw-sec--alt { background: var(--surface-2); } /* ---------- 2. TYPOGRAPHY ------------------------------------------------ */ h1, .lw-h1, .lw-pg-title, .lw-hero-title { font-family: var(--f-display); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--sp-4); text-wrap: balance; } h2, .lw-h2 { font-family: var(--f-display); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: -0.012em; color: var(--ink); margin: 0 0 var(--sp-4); text-wrap: balance; } h3, .lw-h3 { font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.006em; color: var(--ink); margin: 0 0 var(--sp-3); text-wrap: balance; } h4, .lw-h4 { font-family: var(--f-body); font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0 0 var(--sp-2); } h5, .lw-h5 { font-family: var(--f-body); font-size: var(--fs-h5); font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0 0 var(--sp-2); letter-spacing: 0.01em; } h6, .lw-h6 { font-family: var(--f-body); font-size: var(--fs-h6); font-weight: 600; line-height: 1.4; color: var(--muted); margin: 0 0 var(--sp-2); letter-spacing: 0.06em; text-transform: uppercase; } h1 em, h2 em, h3 em, .lw-h1 em, .lw-h2 em, .lw-h3 em { font-family: var(--f-italic); font-style: italic; color: var(--wine); letter-spacing: 0; } p, .lw-body, .lw-p { font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } li { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); } .lw-eyebrow, .lw-pg-eyebrow, .lw-sec-kicker { font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wine); margin: 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .lw-eyebrow-dash { width: 26px; height: 1px; background: var(--wine); display: inline-block; } .lw-eyebrow-brass { color: var(--peach); } .lw-eyebrow-brass .lw-eyebrow-dash { background: var(--peach); } /* ---------- 3. ONE BUTTON LANGUAGE -------------------------------------- */ .lw-btn, .lw-head-cta, .lw-bl-soon-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; padding: 14px 26px; min-height: 46px; border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } .lw-btn:focus-visible, .lw-link:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; } .lw-btn-solid, .lw-btn-primary, .lw-bl-soon-cta, .lw-btn-brass { background: var(--wine); color: #fff; border-color: var(--wine); } .lw-btn-solid:hover, .lw-btn-primary:hover, .lw-bl-soon-cta:hover, .lw-btn-brass:hover { background: var(--wine-deep); border-color: var(--wine-deep); color: #fff; } .lw-btn-outline, .lw-btn-secondary { background: transparent; color: var(--wine); border-color: var(--wine); } .lw-btn-outline:hover, .lw-btn-secondary:hover { background: var(--wine); color: #fff; border-color: var(--wine); } .lw-on-dark .lw-btn-outline, .lw-props .lw-btn-outline, footer .lw-btn-outline, .lw-footer .lw-btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); } .lw-on-dark .lw-btn-outline:hover, .lw-props .lw-btn-outline:hover, footer .lw-btn-outline:hover, .lw-footer .lw-btn-outline:hover { background: #fff; color: var(--wine); border-color: #fff; } .lw-btn-sm { padding: 10px 18px; min-height: 38px; font-size: var(--fs-xs); } .lw-btn-lg { padding: 17px 34px; min-height: 54px; } /* ---------- 3b. ONE HYPERLINK LANGUAGE --------------------------------- */ .lw-body a:not(.lw-btn), .lw-tc-block li a:not(.lw-btn), .lw-story-body a:not(.lw-btn), .lw-faq-a a:not(.lw-btn), .lw-tc-block a, .lw-more-link { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s var(--ease); } .lw-body a:not(.lw-btn):hover, .lw-tc-block li a:not(.lw-btn):hover, .lw-story-body a:not(.lw-btn):hover, .lw-faq-a a:not(.lw-btn):hover, .lw-tc-block a:hover, .lw-more-link:hover { color: var(--wine-deep); } /* navigation is never prose: no underline anywhere in nav, menu, footer columns, breadcrumbs or tabs */ .lw-header a, .lw-nav a, .lw-menu a, .lw-prop-bar a, .lw-crumb a, .lw-crumbs a, .lw-foot-col a, .lw-foot-links a, .lw-mobar a, .lw-tab-name, .lw-drop-name, nav a { text-decoration: none; } .lw-foot-col a:hover, .lw-foot-links a:hover, .lw-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; } .lw-link, .lw-rs-link, .lw-op-link, .lw-ev-card-link, .lw-sec-cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wine); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .2s var(--ease), border-color .2s var(--ease); } .lw-link:hover, .lw-rs-link:hover, .lw-op-link:hover, .lw-ev-card-link:hover, .lw-sec-cta:hover { color: var(--wine-deep); border-bottom-color: var(--wine-deep); } .lw-link-light { color: var(--peach); } .lw-link-light:hover { color: #fff; border-bottom-color: #fff; } .lw-link-dark { color: var(--wine); } .lw-link-arrow { display: inline-flex; align-items: center; } .lw-foot-links a, .lw-foot-col a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: var(--fs-sm); transition: color .2s var(--ease); } .lw-foot-links a:hover, .lw-foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ---------- 4. SCRIMS: decorative overlays removed --------------------- */ .lw-props::before, .lw-offers::before, .lw-concierge::before, .lw-home-pk::before, .lw-of-cta::before, .lw-abt-invite::before { content: none !important; display: none !important; } .lw-hero-caption::before { content: none !important; display: none !important; } .lw-ev-card figure::after, .lw-collage-item::after, .lw-gl-item::after, .lw-home-pk-card::after { content: none !important; display: none !important; } /* the gallery magnifier icon is an affordance, not a scrim -- keep it */ .lw-gl-mason .lw-gl-item::after { content: ' 00e' !important; display: grid !important; } /* KEPT because removing these measured below WCAG minimums: .lw-header::before logo over the hero video, 1.09:1 -> 3.9:1 .lw-hero-veil caption and booking form legibility .lw-pg-hero::after inner-page banner text */ /* ---------- 5. SPACING RHYTHM ------------------------------------------ */ .lw-sec, .lw-section { padding-top: var(--section-y); padding-bottom: var(--section-y); } .lw-sec-sm { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); } .lw-sec-head, .lw-dine-head, .lw-props-top, .lw-sec-top { margin-bottom: var(--head-mb); } .lw-rooms-grid, .lw-fac-grid, .lw-gal-grid, .lw-loc-grid, .lw-mp-grid, .lw-home-rooms-grid, .lw-offers-grid, .lw-ev-grid, .lw-props-grid, .lw-dine-grid, .lw-blog-grid, .lw-team-grid { gap: var(--card-gap); } .lw-btn-row, .lw-sec-ctas, .lw-404-links, .lw-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .lw-card, .lw-offer-body, .lw-rm-card-body, .lw-ev-card-body, .lw-jr-body, .lw-fac-card, .lw-dinefeat-card { padding: var(--sp-5); } .lw-body, .lw-sec-head p, .lw-props-lede, .lw-dine-head p { max-width: 68ch; } .lw-sec-head, .lw-dine-head, .lw-props-intro { max-width: 46rem; } /* ---------- surfaces on a white ground --------------------------------- */ .lw-card, .lw-offer-card, .lw-rm-card, .lw-ev-card, .lw-fac-card, .lw-jr-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); } hr, .lw-rule { border: 0; border-top: 1px solid var(--hair); margin: var(--sp-6) 0; } /* ============================================================ SPECIFICITY BRIDGE The bare h1..h6/p rules above lost to the older component rules, which are more specific. These re-issue every selector that already declared a heading or paragraph font-size, at the scale value, so the scale wins by matching specificity rather than by !important. ============================================================ */ /* --- H2 --- */ .lw-bl-featured-body h2, .lw-dine-head .lw-h2, .lw-h2, .lw-props-top .lw-h2 { font-size: var(--fs-h2); font-family: var(--f-display); line-height: var(--lh-head); } /* --- H3 --- */ .lw-au-mv-col h3, .lw-au-val h3, .lw-bl-body h3, .lw-bl-soon h3, .lw-bookpop-head h3, .lw-ct-form h3, .lw-ct-info h3, .lw-dine-body h3, .lw-dinefeat-top h3, .lw-dn-cross-body h3, .lw-dp-body h3, .lw-ex-body h3, .lw-fc-card h3, .lw-home-pk-cap h3, .lw-home-room-body h3, .lw-jr-body h3, .lw-loc-info h3, .lw-menu-info h3, .lw-mp-body h3, .lw-news-copy h3, .lw-of-empty h3, .lw-offer-body h3, .lw-op-card h3, .lw-props-panel h3, .lw-ritual h3, .lw-rs-body h3, .lw-tc-block h3 { font-size: var(--fs-h3); font-family: var(--f-display); line-height: 1.28; } /* --- H4 --- */ .lw-ct-block h4, .lw-dinemini h4, .lw-ev-card-body h4, .lw-home-nb-body h4, .lw-loc-way h4 { font-size: var(--fs-h4); font-family: var(--f-body); font-weight: 600; line-height: 1.35; } /* --- H5 --- */ .lw-foot-col h5 { font-size: var(--fs-h5); font-family: var(--f-body); font-weight: 600; line-height: 1.35; } /* --- BODY COPY --- */ .lw-abt-chap-body p, .lw-abt-copy p, .lw-au-mv-col p, .lw-au-quote p, .lw-au-val p, .lw-bl-body p, .lw-bl-featured-body p, .lw-bl-soon p, .lw-body, .lw-ct-block p, .lw-ct-form > p, .lw-ct-info p, .lw-dine-body p, .lw-dine-head .lw-body, .lw-dinemini p, .lw-dn-cross-body p, .lw-dn-cta-inner p, .lw-dp-body p, .lw-ev-card-body p, .lw-ex-body p, .lw-fc-card p, .lw-foot-brand p, .lw-home-ed-copy p, .lw-home-nb-body p, .lw-home-pk-cap p, .lw-home-room-body p, .lw-jr-body p, .lw-loc-info p, .lw-loc-way p, .lw-mp-body p, .lw-of-empty p, .lw-offer-body p, .lw-op-body p, .lw-op-card p, .lw-panel-desc, .lw-pg-intro p, .lw-props-intro p, .lw-props-panel p, .lw-ritual p, .lw-rm-desc p, .lw-rs-body p, .lw-story-body p, .lw-story-quote p, .lw-voice p { font-size: var(--fs-body); line-height: var(--lh-body); } /* --- the last H1/H2 holdouts ------------------------------------------- .lw-props-top and .lw-dine-head carried !important from the fold-fitting work, and the About hero title had its own pair of rules. Matched here so every H1 and H2 on the site resolves to one scale value. */ .lw-props-top .lw-h2, .lw-dine-head .lw-h2, .lw-bl-featured-body h2 { font-size: var(--fs-h2) !important; line-height: var(--lh-head); } .lw-abt-hero-title, .lw-pg-title, .lw-hero-title { font-size: var(--fs-h1) !important; line-height: var(--lh-tight); font-family: var(--f-display); } /* the hero caption name is display type but sits over imagery, so it keeps its own optical size -- one value, not three */ .lw-cap-name { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.1; } /* --- bespoke title classes mapped onto the scale ------------------------ These carry no h1/h2 in their selector, so the tag rules never reached them. Each is placed by the role it plays, not by the size it happened to have. */ /* page-level titles behave as H1 */ .lw-abt-hero-title, .lw-au-title, .lw-of-title, .lw-rm-title { font-size: var(--fs-h1); line-height: var(--lh-tight); font-family: var(--f-display); } /* section-level titles behave as H2 */ .lw-abt-collage-title, .lw-au-cta-title, .lw-au-mv-title, .lw-room-name, .lw-panel-name { font-size: var(--fs-h2); line-height: var(--lh-head); font-family: var(--f-display); } /* standfirst / lede copy: one size, slightly larger than body */ .lw-abt-prologue-lede, .lw-rm-desc .lw-rm-lede-inline { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--muted); } /* supporting lede lines run at body size */ .lw-au-lede, .lw-of-lede, .lw-rm-lede, .lw-props-lede { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); } /* small UI labels share one size */ .lw-tab-name, .lw-drop-name, .lw-nav.is-open .lw-drop-name { font-size: var(--fs-sm); font-family: var(--f-body); } .lw-abt-sig-name { font-size: var(--fs-h3); font-family: var(--f-display); } /* --- eyebrows: one size everywhere (was 12.5 / 13 / 15.3px) ------------- */ .lw-eyebrow, .lw-pg-eyebrow, .lw-sec-kicker, .lw-eyebrow-brass, .lw-eyebrow.lw-eyebrow-brass { font-size: var(--fs-xs); letter-spacing: 0.16em; } /* --- body copy: one size (was 13.95 / 15.12px) -------------------------- */ .lw-body, .lw-panel-desc, .lw-dinefeat-desc, .lw-props-lede, .lw-au-cta-text, .lw-story-body p { font-size: var(--fs-body); line-height: var(--lh-body); } /* card meta lines stay deliberately smaller than body copy */ .lw-panel-loc, .lw-dinefeat-sub { font-size: var(--fs-sm); } /* --- the last type holdouts (these carry !important upstream) ----------- */ .lw-pg-intro .lw-eyebrow, .lw-abt-hero-eyebrow, .lw-pg-eyebrow { font-size: var(--fs-xs) !important; letter-spacing: 0.16em; } .lw-dine-head .lw-body, .lw-story-body p, .lw-of-lede, .lw-abt-lede { font-size: var(--fs-body) !important; line-height: var(--lh-body); } /* --- last two outliers ------------------------------------------------- .lw-dinefeat-desc carries !important from the dining-height fitting, and the brass eyebrow picked up a size from its .lw-props-intro context. */ .lw-dinefeat-desc { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; color: var(--muted); } .lw-props-intro .lw-eyebrow, .lw-eyebrow.lw-eyebrow-brass, .lw-props-intro .lw-eyebrow-brass { font-size: var(--fs-xs) !important; } /* the properties-panel CTA had bespoke vh-based padding from the fold work */ .lw-props-panel .lw-btn { padding: 14px 26px; min-height: 46px; } /* ---------- TEXT ORGANISATION ------------------------------------------ Long prose was centre-aligned across a ~760px measure. Left-align body copy and hold it to a comfortable measure; keep centring only for the short intro blocks that are composed as centred (eyebrow + heading + a single supporting line). */ .lw-story-body, .lw-story-body p, .lw-au-body, .lw-au-body p, .lw-tc-block, .lw-tc-block p, .lw-tc-block li, .lw-faq-a, .lw-faq-a p, .lw-rs-body, .lw-rs-body p { text-align: left; max-width: 68ch; } .lw-story-body, .lw-au-body { margin-left: auto; margin-right: auto; } /* centred intro blocks keep their composition but gain a readable measure */ .lw-au-lede, .lw-pg-intro-inner p, .lw-sec-head p { max-width: 62ch; margin-left: auto; margin-right: auto; } /* headings and their supporting copy share one left edge in left-aligned sections, so the eyebrow, heading and paragraph line up */ .lw-sec-head:not(.is-centred) { text-align: left; } .lw-sec-head:not(.is-centred) .lw-eyebrow { justify-content: flex-start; } /* --- centred intro blocks: heading centred, prose left ------------------ The centring lives on the wrapper, so the paragraph has to opt out. */ .lw-au-intro-inner .lw-au-lede, .lw-pg-intro-inner p, .lw-abt-prologue p { text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto; } /* ---------- DARK BANDS: text must not inherit the light-ground colours --- The blanket p/li colour above is correct on white but fails on the dark footer and dark feature bands (measured 2.43:1). Restore light text there. */ .lw-footer, .lw-footer p, .lw-footer li, .lw-footer address, .lw-foot-brand p, .lw-foot-col p, .lw-foot-col li, .lw-props, .lw-props p, .lw-props li, .lw-on-dark, .lw-on-dark p, .lw-on-dark li { color: rgba(255, 255, 255, 0.82); } .lw-footer h1, .lw-footer h2, .lw-footer h3, .lw-footer h4, .lw-footer h5, .lw-footer h6, .lw-props h1, .lw-props h2, .lw-props h3, .lw-props h4, .lw-on-dark h1, .lw-on-dark h2, .lw-on-dark h3, .lw-on-dark h4, .lw-h2-light, .lw-foot-col h5 { color: #fff; } .lw-footer strong, .lw-props strong, .lw-on-dark strong { color: #fff; } /* the italic display accent stays peach on dark, wine on light */ .lw-props h2 em, .lw-on-dark h2 em, .lw-h2-light em, .lw-footer h2 em { color: var(--peach); } /* the properties panel is a LIGHT card inside the dark section, so it opts back out of the dark-band text colours (chips measured 1.09:1 white-on-cream) */ .lw-props-panel, .lw-props-panel p, .lw-props-panel li, .lw-props-panel span, .lw-props-panel dt, .lw-props-panel dd, .lw-panel-meta, .lw-panel-meta li, .lw-panel-meta span, .lw-panel-desc, .lw-panel-loc { color: var(--muted); } .lw-props-panel h1, .lw-props-panel h2, .lw-props-panel h3, .lw-props-panel h4, .lw-panel-name, .lw-props-panel strong { color: var(--ink); } .lw-props-panel .lw-panel-tag { color: var(--wine); } .lw-props-panel .lw-panel-meta i { color: var(--wine); } /* ---------- SPACING RHYTHM, applied to the real section bands ----------- 14 different section paddings and 5 grid gaps were in use. These are the classes that actually declare their own vertical padding. EXCLUDED on purpose: .lw-hero / .lw-pg-hero-inner / .lw-abt-hero-inner (their padding is tied to the measured header clearance -- see LAY-10), overlays (.lw-bookpop, .lw-menu-*), and inner components (*-card, *-body, *-panel, *-tab) which need component padding, not a section rhythm. */ .lw-404, .lw-abt-collage, .lw-abt-ethos, .lw-abt-invite, .lw-abt-prologue, .lw-au-collage, .lw-au-cta, .lw-au-intro, .lw-au-mv, .lw-bl-soon, .lw-dine, .lw-dinemini, .lw-dn-cross, .lw-dn-cta, .lw-lb, .lw-loc-info, .lw-mp, .lw-of-cta, .lw-of-head, .lw-op, .lw-props, .lw-ritual, .lw-rm-amen, .lw-rm-gallery, .lw-rm-intro, .lw-rm-sim, .lw-story-quote, .lw-tc, .lw-voice, .lw-ct-form, .lw-au-grid { padding-top: var(--section-y); padding-bottom: var(--section-y); } /* one gap for every card grid */ .lw-abt-collage-grid, .lw-au-collage-grid, .lw-au-grid-inner, .lw-bl-grid, .lw-dine-grid, .lw-ex-grid, .lw-fc-grid, .lw-gl-grid, .lw-gu-grid, .lw-home-nb-grid, .lw-home-pk-grid, .lw-home-rooms-grid, .lw-journal-grid, .lw-mp-grid, .lw-op-grid, .lw-rituals-grid, .lw-rm-amen-grid, .lw-rm-sim-grid, .lw-rs-grid { gap: var(--card-gap); } /* --- section bands that were missing or carry !important upstream ------- */ .lw-run, .lw-rs, .lw-faq, .lw-news, .lw-story, .lw-journal, .lw-events, .lw-offers, .lw-fc, .lw-gu, .lw-ex, .lw-gl, .lw-nb, .lw-cc { padding-top: var(--section-y); padding-bottom: var(--section-y); } /* these two were compressed by the one-fold work and carry !important */ .lw-dine, .lw-props { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; } /* an intro band that sits directly under a banner needs no top gap doubled */ .lw-pg-intro { padding-top: var(--section-y-sm); padding-bottom: var(--section-y-sm); } /* the properties band is pinned by an ID selector (#properties) from the one-fold work; match that specificity to bring it onto the rhythm, but keep it compressed on short viewports so the fold intent survives */ #properties, #properties.lw-props { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; } @media (max-height: 780px) { #properties, #properties.lw-props { padding-top: var(--section-y-sm) !important; padding-bottom: var(--section-y-sm) !important; } } /* ---------- FORM CONTROLS: one language --------------------------------- */ input[type="checkbox"], input[type="radio"] { accent-color: var(--wine); width: 20px; height: 20px; min-width: 20px; min-height: 20px; cursor: pointer; } @media (pointer: coarse) { input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; min-width: 24px; min-height: 24px; } } .lw-news-check { display: flex; align-items: center; gap: var(--sp-3); } .lw-news-check label, .lw-news-check span { font-size: var(--fs-sm); color: var(--muted); } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea { font-family: var(--f-body); font-size: var(--fs-body); color: var(--ink); border-radius: var(--radius-md); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; } label { font-family: var(--f-body); font-size: var(--fs-sm); color: var(--ink); font-weight: 600; } /* ============================================================ HEADINGS ON THE GEOMETRIC SANS Jost is lighter on the page than the serif it replaces, so display sizes take weight 400-500 and a little tracking to match the wordmark. ============================================================ */ h1, .lw-h1, .lw-pg-title, .lw-hero-title, .lw-abt-hero-title, .lw-au-title, .lw-of-title, .lw-rm-title { font-weight: 400; letter-spacing: 0.005em; } h2, .lw-h2, .lw-abt-collage-title, .lw-au-cta-title, .lw-au-mv-title, .lw-room-name, .lw-panel-name { font-weight: 400; letter-spacing: 0.005em; } h3, .lw-h3 { font-weight: 500; letter-spacing: 0.008em; } /* the serif italic accent does not belong in a geometric sans -- emphasis inside a heading becomes gold and a shade heavier instead */ h1 em, h2 em, h3 em, .lw-h1 em, .lw-h2 em, .lw-h3 em { font-family: var(--f-display); font-style: normal; font-weight: 500; color: var(--gold-ink); } .lw-props h2 em, .lw-on-dark h2 em, .lw-h2-light em, .lw-footer h2 em { color: var(--gold-light); } /* ============================================================ THE PEAK MOTIF The logo is a mountain peak in a circle. These carry that language through the interface at small scale. ============================================================ */ /* the eyebrow rule becomes a chevron */ .lw-eyebrow-dash { width: 14px; height: 9px; background: none !important; border: 0; position: relative; flex: 0 0 auto; } .lw-eyebrow-dash::before { content: ""; position: absolute; inset: 0; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) scale(0.72); transform-origin: center; } /* list markers become small peaks */ .lw-panel-meta li, .lw-rm-amen li, .lw-fac-list li, .lw-list-peak li { list-style: none; position: relative; } .lw-list-peak li { padding-left: 22px; } .lw-list-peak li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 6px; border-left: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); transform: rotate(45deg) scale(0.8); } /* the active nav item carries a small peak instead of a flat underline */ /* Active nav item: a 2px underline in the gold accent. The peak motif read as a stray diamond at this size; an underline is the conventional and unambiguous active signal, and it survives any font size. */ .lw-nav a.is-active::after, .lw-prop-bar-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; width: auto; margin-left: 0; border: 0; background: currentColor; transform: none; border-radius: 1px; } .lw-nav a, .lw-prop-bar-nav a { position: relative; } /* a faint peak divider between sections */ .lw-peak-rule { border: 0; height: 14px; margin: var(--sp-7) auto; width: 100%; max-width: var(--max-content); position: relative; } .lw-peak-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--hair); } .lw-peak-rule::after { content: ""; position: absolute; left: 50%; top: 2px; width: 12px; height: 8px; margin-left: -6px; background: var(--paper); border-left: 1.5px solid var(--gold); border-top: 1.5px solid var(--gold); transform: rotate(45deg) scale(0.85); } /* cards lift a gold peak edge on hover */ .lw-card, .lw-offer-card, .lw-rm-card, .lw-ev-card, .lw-fac-card, .lw-jr-card { position: relative; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .lw-card:hover, .lw-offer-card:hover, .lw-rm-card:hover, .lw-ev-card:hover, .lw-fac-card:hover, .lw-jr-card:hover { border-color: rgba(194, 157, 72, 0.55); box-shadow: 0 10px 30px rgba(62, 46, 18, 0.08); transform: translateY(-2px); } /* full-bleed feature bands sit on the dark ground, not on the gold accent -- light gold on mid gold measured 3.48:1 */ .lw-concierge, .lw-dn-cta, .lw-of-cta, .lw-abt-invite, .lw-au-cta { background: var(--brown-deep); color: #fff; } .lw-concierge .lw-eyebrow, .lw-dn-cta .lw-eyebrow, .lw-of-cta .lw-eyebrow, .lw-abt-invite .lw-eyebrow, .lw-au-cta .lw-eyebrow { color: var(--gold-light); } .lw-concierge h2, .lw-concierge h3, .lw-concierge p, .lw-dn-cta h2, .lw-dn-cta p, .lw-of-cta h2, .lw-of-cta p, .lw-abt-invite h2, .lw-abt-invite p, .lw-au-cta h2, .lw-au-cta p { color: #fff; } .lw-concierge p, .lw-dn-cta p, .lw-of-cta p, .lw-abt-invite p, .lw-au-cta p { color: rgba(255,255,255,0.84); } /* ============================================================ CHILD SINGLE PAGE Each transplanted block brought the .lw-pg-intro band that used to introduce it as a standalone page. On one page those become section headers: same content, section rhythm instead of page-band padding. ============================================================ */ body.lw-single .lw-pg-intro { padding-top: var(--section-y); padding-bottom: var(--sp-5); background: transparent; } body.lw-single .lw-pg-intro + .lw-rs, body.lw-single .lw-pg-intro + .lw-fc, body.lw-single .lw-pg-intro + .lw-dp, body.lw-single .lw-pg-intro + .lw-ex, body.lw-single .lw-pg-intro + .lw-loc, body.lw-single .lw-pg-intro + .lw-gu { padding-top: 0; } /* the scroll anchor sits above each block, offset for the fixed chrome */ .lw-anchor { display: block; height: 0; scroll-margin-top: 150px; } body.lw-single section[id] { scroll-margin-top: 150px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* alternate the section grounds so eleven stacked blocks stay legible */ body.lw-single .lw-pg-intro:nth-of-type(even) { background: var(--surface-2); } /* anchor offset: the real chrome measures 119px, not the 150px assumed -- the extra 31px plus the band's own 96px padding read as a dead gap */ .lw-anchor { scroll-margin-top: 124px; } body.lw-single section[id] { scroll-margin-top: 124px; } body.lw-single .lw-pg-intro { padding-top: var(--section-y-sm); } /* ============================================================ CHILD PROPERTY: warmer and more vibrant than the parent The parent stays minimal white. The child carries the logo gold with more confidence -- a gold property bar, gold section grounds and warmer card treatments -- while using the same type, spacing and components, so it still reads as one brand. ============================================================ */ body.lw-single .lw-prop-bar, body.lw-single .lw-prop-bar.is-compact { /* translucent so the hero reads through the bar; the blur keeps the nav legible without making the bar a solid block */ background: linear-gradient(100deg, rgba(74, 56, 20, 0.72) 0%, rgba(104, 80, 34, 0.66) 46%, rgba(133, 103, 44, 0.62) 100%) !important; backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15); border-bottom: 1px solid rgba(255, 255, 255, 0.18); } /* once it leaves the hero the content behind is arbitrary, so it firms up */ body.lw-single .lw-prop-bar.is-stuck { background: linear-gradient(100deg, rgba(74, 56, 20, 0.90) 0%, rgba(104, 80, 34, 0.88) 46%, rgba(133, 103, 44, 0.86) 100%) !important; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } /* a soft shadow under the text keeps it readable on a light photo */ body.lw-single .lw-prop-bar:not(.is-stuck) .lw-prop-bar-label, body.lw-single .lw-prop-bar:not(.is-stuck) .lw-prop-bar-nav a { text-shadow: 0 1px 3px rgba(30, 24, 12, 0.55); } body.lw-single .lw-prop-bar-label { color: #FFF3D6 !important; } body.lw-single .lw-prop-bar-nav a { color: rgba(255,255,255,0.94) !important; } body.lw-single .lw-prop-bar-nav a:hover, body.lw-single .lw-prop-bar-nav a.is-active { color: #fff !important; } /* alternating warm grounds so eleven stacked sections stay readable */ body.lw-single .lw-pg-intro:nth-of-type(odd) { background: transparent; } body.lw-single .lw-pg-intro:nth-of-type(even) { background: #FDFAF3; } /* the child picks up a touch more gold on its section headings */ body.lw-single .lw-pg-intro .lw-eyebrow { color: var(--gold-ink); } /* ============================================================ PARENT: minimal, elegant, ample white space The brand site stays white and quiet -- more air between sections, gold used sparingly as punctuation rather than as surface. ============================================================ */ body:not(.lw-single) { --section-y: clamp(72px, 9vw, 128px); --head-mb: clamp(28px, 3.4vw, 48px); } body:not(.lw-single) .lw-sec-head, body:not(.lw-single) .lw-dine-head { margin-bottom: var(--head-mb); } /* fewer, quieter rules on the parent */ body:not(.lw-single) .lw-card, body:not(.lw-single) .lw-offer-card, body:not(.lw-single) .lw-ev-card, body:not(.lw-single) .lw-jr-card { border-color: rgba(62, 46, 18, 0.10); box-shadow: none; } /* the peak divider is the parent's main flourish */ body:not(.lw-single) .lw-peak-rule { margin: clamp(48px, 6vw, 88px) auto; } /* ============================================================ SECTION ILLUSTRATION (line art) Drawn inline so it costs no request, scales cleanly and takes currentColor. The roofline is the Crestline peak, so the drawing carries the same motif as the eyebrow chevron and list markers. ============================================================ */ .lw-pg-intro--illus { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 40px); text-align: left; } .lw-sec-illus { width: clamp(84px, 9vw, 116px); flex: 0 0 auto; color: var(--gold-ink); line-height: 0; } .lw-sec-illus svg { width: 100%; height: auto; display: block; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } /* the shield sits in front of the boxes, so it gets an opaque ground */ .lw-sec-illus .lw-illus-fill { fill: var(--paper); } .lw-sec-illus-copy { min-width: 0; } .lw-pg-intro--illus .lw-eyebrow { justify-content: flex-start; } .lw-pg-intro--illus .lw-sec-illus-copy > p:last-child { max-width: 62ch; margin-left: 0; margin-right: 0; text-align: left; } /* on narrow screens the drawing sits above the copy, centred */ @media (max-width: 720px) { .lw-pg-intro--illus { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-4); } .lw-pg-intro--illus .lw-eyebrow { justify-content: center; } .lw-pg-intro--illus .lw-sec-illus-copy > p:last-child { margin-left: auto; margin-right: auto; text-align: center; } } /* facility card icons: line art in the same language as the section drawing */ .lw-fc-icon svg { width: 26px; height: 26px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .lw-fc-icon { color: var(--gold-ink); } .lw-fc-card:hover .lw-fc-icon { background: var(--gold-ink); color: #fff; } /* the welcome section lost its pull-quote, so the copy column is shorter than the imagery -- centre it rather than leaving dead space under the CTA */ body.lw-single .lw-story-copy { align-self: center; } body.lw-single .lw-story-copy .lw-link { margin-top: var(--sp-5); } /* ============================================================ FACILITY CARDS -- icon centred, name centred beneath it Matches the supplied reference: no chip behind the icon, the drawing carries itself, and the label sits directly under it. ============================================================ */ .lw-fc-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-6) var(--sp-5); } .lw-fc-icon { width: 56px !important; height: 56px !important; background: none !important; border-radius: 0 !important; margin: 0 0 var(--sp-4) !important; color: var(--gold-ink); display: flex; align-items: center; justify-content: center; } .lw-fc-icon svg { width: 100%; height: 100%; stroke-width: 1.5; } .lw-fc-card:hover .lw-fc-icon { background: none !important; color: var(--gold); } .lw-fc-card h3 { text-align: center; margin: 0 0 var(--sp-2); } .lw-fc-card p { text-align: center; margin: 0; } /* ============================================================ FOOTER ARTWORK -- Jaipur motif behind the footer Dark ground with gold ornament at the edges. A dark overlay sits over it so the footer copy keeps its measured contrast. ============================================================ */ .lw-footer { position: relative; background-color: var(--brown-deep); background-image: linear-gradient(rgba(18, 13, 5, 0.82), rgba(18, 13, 5, 0.82)), url("https://assets.simplotel.com/simplotel/image/upload/q_70,f_jpg,w_1600/crestline-hotels-and-resorts/image.jpg_(2)_61b75b7d.png"); background-size: cover; background-position: center; background-repeat: no-repeat; /* never background-attachment: fixed -- it janks on scroll and iOS ignores it */ } /* phones: a narrower file, and a heavier veil because the artwork crops to its busiest region at small widths */ @media (max-width: 720px) { .lw-footer { background-image: linear-gradient(rgba(18, 13, 5, 0.88), rgba(18, 13, 5, 0.88)), url("https://assets.simplotel.com/simplotel/image/upload/q_70,f_jpg,w_760/crestline-hotels-and-resorts/image.jpg_(2)_61b75b7d.png"); } } /* touch: a 36px row plus the row gap clears the 44px target without stretching an 11-item list to ~484px, which a 44px min-height did */ @media (pointer: coarse) { .lw-footer a, .lw-foot-col a, .lw-foot-links a { display: inline-flex; align-items: center; min-height: 36px; } .lw-foot-col li { margin-bottom: 6px; } .lw-footer .lw-social a, .lw-footer [class*="social"] a { width: 44px; height: 44px; justify-content: center; } } /* reduce the work on devices that ask for it */ @media (prefers-reduced-data: reduce) { .lw-footer { background-image: none; background-color: var(--brown-deep); } } /* ============================================================ FACILITIES SECTION -- Jaipur cityscape behind the whole band The artwork is a dark night scene, so the band runs light-on-dark: a veil holds the copy legible and the icons sit in a soft translucent circle so they read against any part of the image. ============================================================ */ .lw-fc { position: relative; background-color: var(--brown-deep); background-image: linear-gradient(rgba(16, 11, 4, 0.80), rgba(16, 11, 4, 0.80)), url("https://assets.simplotel.com/simplotel/image/upload/q_70,f_jpg,w_1800/crestline-hotels-and-resorts/image_jpg_321db966.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 720px) { .lw-fc { background-image: linear-gradient(rgba(16, 11, 4, 0.86), rgba(16, 11, 4, 0.86)), url("https://assets.simplotel.com/simplotel/image/upload/q_70,f_jpg,w_800/crestline-hotels-and-resorts/image_jpg_321db966.png"); } } @media (prefers-reduced-data: reduce) { .lw-fc { background-image: none; } } /* the cards become glass on the artwork rather than white boxes */ .lw-fc .lw-fc-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(247, 217, 152, 0.20); border-radius: var(--radius-lg); } .lw-fc .lw-fc-card:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(247, 217, 152, 0.42); box-shadow: none; transform: translateY(-2px); } .lw-fc .lw-fc-card h3 { color: #FFF3D8; } .lw-fc .lw-fc-card p { color: rgba(255, 255, 255, 0.80); } /* icons: a soft tile so the stroke reads over any part of the artwork */ .lw-fc .lw-fc-icon { width: 72px !important; height: 72px !important; border-radius: 50% !important; margin: 0 0 var(--sp-4) !important; background: rgba(247, 217, 152, 0.10) !important; border: 1px solid rgba(247, 217, 152, 0.26); color: #F7D998; display: flex; align-items: center; justify-content: center; } .lw-fc .lw-fc-icon svg { width: 38px; height: 38px; stroke-width: 1.6; } .lw-fc .lw-fc-card:hover .lw-fc-icon { background: rgba(247, 217, 152, 0.18) !important; color: #FFF0CC; } /* the section intro that sits directly above the band inherits the dark treatment so the heading does not float on white above a dark band */ .lw-fc-intro, .lw-pg-intro:has(+ .lw-fc) { background: var(--brown-deep); } .lw-pg-intro:has(+ .lw-fc) h2, .lw-pg-intro:has(+ .lw-fc) .lw-h2 { color: #FFF3D8; } .lw-pg-intro:has(+ .lw-fc) h2 em, .lw-pg-intro:has(+ .lw-fc) .lw-h2 em { color: var(--gold-light); } .lw-pg-intro:has(+ .lw-fc) p { color: rgba(255, 255, 255, 0.82); } .lw-pg-intro:has(+ .lw-fc) .lw-eyebrow { color: var(--gold-light); } /* the intro band above the facilities section carries the same artwork, so the heading sits on the dark ground its light text was written for. This has to beat body.lw-single .lw-pg-intro:nth-of-type(even), hence the compound. */ body.lw-single .lw-pg-intro:has(+ .lw-fc), body.lw-single .lw-pg-intro:nth-of-type(even):has(+ .lw-fc), body.lw-single .lw-pg-intro:nth-of-type(odd):has(+ .lw-fc) { background-color: var(--brown-deep) !important; background-image: linear-gradient(rgba(16, 11, 4, 0.86), rgba(16, 11, 4, 0.80)), url("https://assets.simplotel.com/simplotel/image/upload/q_70,f_jpg,w_1800/crestline-hotels-and-resorts/image_jpg_321db966.png") !important; background-size: cover; background-position: center bottom; background-repeat: no-repeat; padding-bottom: var(--sp-6); } /* and the band below continues the same image without a seam */ .lw-fc { background-position: center top; } /* ============================================================ FOOTER -- restrained, and a third shorter ============================================================ */ .lw-footer { padding: clamp(40px, 4.4vw, 60px) var(--pad-x) 0 !important; font-size: var(--fs-sm); } .lw-footer .lw-foot-inner, .lw-footer > .lw-foot-grid { padding-bottom: clamp(24px, 2.6vw, 36px); } /* the 126px wordmark was decoration only -- reduce it to a quiet mark */ .lw-foot-wordmark { font-size: clamp(28px, 4vw, 46px) !important; line-height: 1 !important; opacity: 0.10; margin: 0 !important; padding: 0 !important; letter-spacing: 0.18em; pointer-events: none; } /* column headings: small caps, gold, generous tracking */ .lw-foot-col h5 { font-size: var(--fs-xs) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light) !important; margin: 0 0 var(--sp-3) !important; font-weight: 600; } .lw-foot-col ul { margin: 0; padding: 0; list-style: none; } .lw-foot-col li { margin-bottom: 4px; } .lw-foot-col a, .lw-footer address, .lw-foot-brand p { font-size: var(--fs-sm); line-height: 1.55; } /* the long Property list flows into two columns instead of one tall stack */ .lw-foot-col:has(li:nth-child(7)) ul { column-count: 2; column-gap: var(--sp-5); } .lw-foot-col:has(li:nth-child(7)) li { break-inside: avoid; } /* the bottom bar: one hairline, quiet type */ .lw-footer-bar { border-top: 1px solid rgba(247, 217, 152, 0.16); padding: var(--sp-4) 0 !important; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.62); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; } .lw-foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } @media (max-width: 720px) { .lw-footer { padding-top: clamp(32px, 8vw, 44px) !important; } .lw-foot-col:has(li:nth-child(7)) ul { column-count: 2; column-gap: var(--sp-4); } .lw-footer-bar { justify-content: center; text-align: center; } } /* ============================================================ FOOTER v2 -- scoped to .lw-footer (a bare `footer` selector also matches the