/* ========================================================================== Hotel Loyalty Points: base layer for the home page. Follows the approved design artifact (2026-09-30): white page, alternating light and ink bands, layered media, floating cards, fine grain for depth. Colours and type come from Elementor's Global Kit (Site Settings). The custom properties below only alias the kit's own variables so component CSS stays readable; the second value is a fallback for the editor's first paint. Change a colour in Site Settings > Global Colours, not here. ========================================================================== */ :root { --hlp-ink: var(--e-global-color-primary, #33312e); --hlp-ink-2: var(--e-global-color-text, #5f5a53); --hlp-ink-deep: var(--e-global-color-hlpdark, #262422); --hlp-tan: var(--e-global-color-secondary, #a5835a); /* rules, icons, fills; never small text on light */ --hlp-tan-deep: var(--e-global-color-accent, #7a5f3c); /* tan for text on light grounds */ --hlp-tan-ink: var(--e-global-color-hlptanlt, #c9ab84); /* tan for text on ink grounds */ --hlp-mid: var(--e-global-color-hlpmid, #b4ada3); --hlp-light: var(--e-global-color-hlplight, #eae6df); --hlp-light-2: var(--e-global-color-hlppaper, #f3f0ea); --hlp-white: var(--e-global-color-hlpwhite, #fbfaf7); --hlp-on-ink: var(--e-global-color-hlpondark, #f3efe8); --hlp-on-ink-2: var(--e-global-color-hlpondarks, #c9c2b7); --hlp-line-ink: #4a4642; /* hairlines on ink grounds */ --hlp-header-h: 68px; /* the header once solid; native #hash jumps land below it */ --hlp-gut: clamp(16px, 4vw, 40px); --hlp-ease: cubic-bezier(.2, .7, .2, 1); --hlp-shadow-1: 0 1px 2px rgba(51, 49, 46, .06), 0 8px 24px -8px rgba(51, 49, 46, .14); --hlp-shadow-2: 0 2px 4px rgba(51, 49, 46, .06), 0 24px 48px -16px rgba(51, 49, 46, .28); --hlp-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.19 0 0 0 0 0.18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html { scroll-padding-top: calc(var(--hlp-header-h) + 8px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.elementor-page { background: var(--hlp-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Fine grain over the whole page: the design's depth comes from this plus shadows, never from heavier colour. */ body.elementor-page::after { content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--hlp-grain); opacity: .07; mix-blend-mode: multiply; } /* grain on ink bands (class hlp-grain-ink on the section) */ .e-con.hlp-grain-ink { isolation: isolate; } .e-con.hlp-grain-ink::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--hlp-grain); opacity: .12; mix-blend-mode: screen; } .e-con.hlp-grain-ink > .e-con-inner { position: relative; z-index: 1; } /* The kit's Paragraph Spacing applies to EVERY

, including Heading widgets set to the p tag. Headings never carry margin; spacing comes from container gaps. */ .elementor-widget-heading .elementor-heading-title { margin: 0; } .elementor-widget-heading :is(h1, h2, h3).elementor-heading-title { text-wrap: balance; } /* Paragraph spacing inside rich text: the last paragraph never adds a gap. */ .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Second half of a heading in Tan Deep: ... */ .hlp-soft { color: var(--hlp-tan-deep); } /* Reading measure for ledes */ .hlp-measure { max-width: 60ch; } /* -------------------------------------------------------------------------- Eyebrow (Heading widget + class hlp-eyebrow): tracked caps with a short leading rule. hlp-eyebrow--noline drops the rule. -------------------------------------------------------------------------- */ .hlp-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; } .hlp-eyebrow .elementor-heading-title::before { content: ""; flex: none; width: 22px; height: 1.5px; background: currentColor; } .hlp-eyebrow--noline .elementor-heading-title::before { display: none; } /* -------------------------------------------------------------------------- Focus: visible everywhere, 3px Tan (3.5:1 on the white page). -------------------------------------------------------------------------- */ body.elementor-page :focus-visible { outline: 3px solid var(--hlp-tan); outline-offset: 3px; } /* -------------------------------------------------------------------------- Images. The free Image widget has no aspect-ratio control, so the ratio is a class on the widget (Advanced > CSS Classes). The photo is cropped to fill. -------------------------------------------------------------------------- */ .hlp-img { width: 100%; } .hlp-img img { display: block; width: 100%; height: auto; } .hlp-ratio-4x5 img { aspect-ratio: 4 / 5; object-fit: cover; } .hlp-ratio-5x6 img { aspect-ratio: 5 / 6; object-fit: cover; } .hlp-ratio-3x4 img { aspect-ratio: 3 / 4; object-fit: cover; } .hlp-ratio-1x1 img { aspect-ratio: 1 / 1; object-fit: cover; } .hlp-ratio-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; } .hlp-ratio-16x10 img { aspect-ratio: 16 / 10; object-fit: cover; } .hlp-ratio-4x3 img { aspect-ratio: 4 / 3; object-fit: cover; } .hlp-ratio-3x2 img { aspect-ratio: 3 / 2; object-fit: cover; } /* Depth utilities (Advanced > CSS Classes) */ .e-con.hlp-shadow-1, .elementor-widget.hlp-shadow-1 img { box-shadow: var(--hlp-shadow-1); } /* beats Elementor's .elementor img { box-shadow: none } */ .e-con.hlp-shadow-2, .elementor-widget.hlp-shadow-2 img { box-shadow: var(--hlp-shadow-2); } /* -------------------------------------------------------------------------- Buttons (Button widget + class hlp-btn). Colours are in the widget's Style tab; this adds the design's lift and the arrow nudge. -------------------------------------------------------------------------- */ .hlp-btn .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; } .hlp-btn .elementor-button:hover { box-shadow: 0 10px 24px -10px rgba(122, 95, 60, .6); } .hlp-btn .elementor-button-icon { transition: transform .3s ease; } .hlp-btn .elementor-button-icon svg { width: .9em; height: .9em; } .hlp-btn .elementor-button:hover .elementor-button-icon { transform: translateX(4px); } .hlp-btn--text .elementor-button { min-height: 0; box-shadow: none !important; } /* -------------------------------------------------------------------------- Smooth scroll (Lenis, js/hlp.js). Its own stylesheet, inlined; and native smooth scrolling must be off while it runs, or the two fight. -------------------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* -------------------------------------------------------------------------- Reveal (js/hlp.js adds .hlp-js to , then .is-in once per element). Fades and a gentle scale only, per the handoff: no slides, nothing bouncy, once per element. Keyframes animate the individual opacity and scale properties, so nothing clashes with an element's own transform (the polaroid's tilt, the strip card's offset, a card's hover lift). Without JS, in the editor, or under reduced motion nothing is hidden. -------------------------------------------------------------------------- */ @keyframes hlp-in { from { opacity: 0; scale: .975; } to { opacity: 1; scale: 1; } } @keyframes hlp-in-soft { from { opacity: 0; } to { opacity: 1; } } @keyframes hlp-img-in { from { scale: 1.06; } to { scale: 1; } } .hlp-js .hlp-rv:not(.is-in), .hlp-js .hlp-rv-item:not(.is-in) { opacity: 0; } .hlp-js .hlp-rv.is-in:not(.is-instant) { animation: hlp-in 1s var(--hlp-ease) var(--hlp-d, 0ms) both; } .hlp-js .hlp-rv-item.is-in:not(.is-instant) { animation: hlp-in-soft .7s ease var(--hlp-d, 0ms) both; } /* photographs inside a revealed block settle from a slight zoom */ .hlp-js .hlp-rv.is-in:not(.is-instant) .hlp-img img { animation: hlp-img-in 1.6s var(--hlp-ease) var(--hlp-d, 0ms) both; } /* cards and notes floating on a photo arrive just after it */ .hlp-js .hlp-rv.is-in:not(.is-instant) :is(.hlp-loc-card, .hlp-float-badge, .hlp-polaroid, .hlp-note-chip) { animation: hlp-in-soft .8s ease calc(var(--hlp-d, 0ms) + 350ms) both; } body.elementor-editor-active .hlp-rv, body.elementor-editor-active .hlp-rv-item { opacity: 1 !important; animation: none !important; } /* -------------------------------------------------------------------------- Hello Elementor's reset paints every