/* ============================================ The Willow Lane Manor - Brand Stylesheet Layout = Bootstrap 5.3. This file is brand styling only. REM-based. Base: 16px = 1rem. ============================================ */ :root { /* Brand palette */ --wlm-color-green: #3F5E3D; --wlm-color-green-deep: #2E4A2D; --wlm-color-leaf: #6F8F6B; --wlm-color-leaf-soft: #A8BFA3; --wlm-color-gold: #F2C94C; --wlm-color-gold-warm: #FFD76A; --wlm-color-cream: #F7F5EE; --wlm-color-cream-deep: #EFEBDD; --wlm-color-ink: #1F2A1E; --wlm-color-ink-soft: #4A5249; --wlm-color-mute: #7C8579; --wlm-color-line: #DDD8C7; --wlm-color-line-soft: #E8E3D2; --wlm-color-white: #FFFFFF; --wlm-color-accent: var(--wlm-color-gold); --wlm-color-accent-warm: var(--wlm-color-gold-warm); --wlm-font-display: 'Outfit', system-ui, sans-serif; --wlm-font-body: 'DM Sans', system-ui, sans-serif; --wlm-font-mono: 'JetBrains Mono', ui-monospace, monospace; --wlm-size-xxs: 0.25rem; --wlm-size-sm: 0.75rem; --wlm-r-sm: 0.25rem; --wlm-r-md: 0.5rem; --wlm-r-lg: 0.875rem; --wlm-r-xl: 1.5rem; --wlm-r-pill: 999px; --wlm-shadow-sm: 0 1px 2px rgba(31, 42, 30, 0.06); --wlm-shadow-md: 0 0.5rem 1.5rem -0.5rem rgba(31, 42, 30, 0.12); --wlm-shadow-md-strong: 0 0.5rem 1.5rem -0.5rem rgba(31, 42, 30, 0.8); --wlm-shadow-lg: 0 1.5rem 3.75rem -1rem rgba(31, 42, 30, 0.18); --wlm-ease: cubic-bezier(0.4, 0, 0.2, 1); --wlm-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Bootstrap variable overrides */ --bs-primary: #3F5E3D; --bs-primary-rgb: 63, 94, 61; --bs-body-color: #1F2A1E; --bs-body-bg: #F7F5EE; --bs-body-font-family: 'DM Sans', system-ui, sans-serif; --bs-border-color: #DDD8C7; --bs-link-color: #3F5E3D; --bs-link-hover-color: #2E4A2D; /* --wlm-fs-01: 0.5625rem; --wlm-fs-02: 0.625rem; --wlm-fs-03: 0.6875rem; --wlm-fs-04: 0.75rem; --wlm-fs-05: 0.8125rem; --wlm-fs-06: 0.875rem; --wlm-fs-07: 0.9375rem; --wlm-fs-10: 1rem; --wlm-fs-11: 1.0625rem; --wlm-fs-12: 1.125rem; --wlm-fs-13: 1.25rem; --wlm-fs-14: 1.5rem; --wlm-fs-20: 2rem; */ } /* ===== Base ===== */ html { font-size: 1rem; } body { background: var(--wlm-color-cream); color: var(--wlm-color-ink); font-family: var(--wlm-font-body); font-size: 0.9375rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-family: var(--wlm-font-display); font-weight: 400; letter-spacing: -0.02em; margin: 0; color: var(--wlm-color-ink); line-height: 1.1; } a { color: inherit; text-decoration: none; cursor: pointer; } img { max-width: 100%; height: auto; } /* ===== Type utilities ===== */ .wlm-eyebrow { font-family: var(--wlm-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wlm-color-green); display: block; } .wlm-eyebrow--mute { color: var(--wlm-color-mute); } .wlm-display-xl { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 300; letter-spacing: -0.035em; line-height: 1.05; } .wlm-display-lg { font-size: clamp(2.5rem, 4.6vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; } .wlm-display-md { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; } .wlm-display-sm { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; } .wlm-italic-accent { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; } /* ===== Buttons ===== */ .wlm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.875rem 1.75rem; font-family: var(--wlm-font-body); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: var(--wlm-r-pill); cursor: pointer; transition: all 0.25s var(--wlm-ease); white-space: nowrap; line-height: 1; } .wlm-btn--primary { background: var(--wlm-color-green); color: var(--wlm-color-cream); } .wlm-btn--primary:hover { background: var(--wlm-color-green-deep); transform: translateY(-1px); color: var(--wlm-color-cream); } .wlm-btn--accent { background: var(--wlm-color-accent); color: var(--wlm-color-ink); } .wlm-btn--accent:hover { background: var(--wlm-color-accent-warm); color: var(--wlm-color-ink); } .wlm-btn-outline-primary { background: transparent; color: var(--wlm-color-green); border: 1px solid var(--wlm-color-green); } .wlm-btn-outline-primary:hover { background: var(--wlm-color-green); color: var(--wlm-color-cream); } .wlm-bg-green .wlm-btn-outline-primary, .wlm-btn-outline-primary-light { background: transparent; color: var(--wlm-color-cream); border: 1px solid rgba(247, 245, 238, 0.6); } .wlm-bg-green .wlm-btn-outline-primary:hover, .wlm-btn-outline-primary-light:hover { background: var(--wlm-color-cream); color: var(--wlm-color-green); } .wlm-btn--text { background: transparent; color: var(--wlm-color-green); padding: 0.5rem 0; border-radius: 0; border: none; border-bottom: 1px solid var(--wlm-color-green); } .wlm-btn-sm { padding: 0.625rem 1.125rem; font-size: 0.6875rem; } /*** Pills ****************************************************************************************************************************************************/ .wlm-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--wlm-r-pill); background: var(--wlm-color-cream-deep); color: var(--wlm-color-ink-soft); font-size: 0.75rem; font-weight: 500; font-family: var(--wlm-font-body); letter-spacing: 0.04em; } .wlm-pill-white { background: var(--wlm-color-white); color: var(--wlm-color-ink-soft); border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); } .wlm-pill-cream { background: var(--wlm-color-cream-deep); color: var(--wlm-color-ink-soft); } .wlm-pill-green { background: var(--wlm-color-green); color: var(--wlm-color-cream); } .wlm-pill-gold { background: var(--wlm-color-accent); color: var(--wlm-color-ink); } .wlm-pill-outline { background: transparent; border: 1px solid var(--wlm-color-line); } /* ===== Cards ===== */ .wlm-card { background: var(--wlm-color-white); border-radius: var(--wlm-r-lg); overflow: hidden; border: none; color: inherit; text-decoration: none; transition: all 0.3s var(--wlm-ease); } a.wlm-card:hover { color: inherit; } .wlm-card--soft { box-shadow: var(--wlm-shadow-sm); } .wlm-card--soft:hover { box-shadow: var(--wlm-shadow-md); transform: translateY(-2px); } .wlm-card--bordered { border: 1px solid var(--wlm-color-line); } /* ===== Forms - overrides on Bootstrap form-control / form-select ===== */ .form-control, .form-select, textarea.form-control { background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); padding: 0.75rem 0.875rem; font-family: var(--wlm-font-body); font-size: 0.9375rem; color: var(--wlm-color-ink); } .form-control:focus, .form-select:focus, textarea.form-control:focus { background: var(--wlm-color-white); color: var(--wlm-color-ink); border-color: var(--wlm-color-green); box-shadow: 0 0 0 0.1875rem rgba(63, 94, 61, 0.12); } .form-control::placeholder, textarea.form-control::placeholder { color: var(--wlm-color-mute); } .wlm-label, .form-label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wlm-color-mute); font-weight: 500; display: block; margin-bottom: 0.25rem; } /* OTP boxed input */ .wlm-input--boxed { border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); padding: 0.75rem 0; background: var(--wlm-color-white); font-family: var(--wlm-font-display); font-size: 1rem; text-align: center; outline: none; width: 100%; } .wlm-input--boxed:focus { border-color: var(--wlm-color-green); } /* ===== Divider ===== */ .wlm-divider { height: 1px; background: var(--wlm-color-line); border: none; margin: 0; } /* ===== Icon button (round 40px) ===== */ .wlm-icon-btn { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid currentColor; color: inherit; transition: all 0.2s; cursor: pointer; padding: 0; flex-shrink: 0; } /* .wlm-icon-btn:hover { background: currentColor; } */ .wlm-icon-btn:hover { color: var(--wlm-color-cream); background: var(--wlm-color-green); border-color: var(--wlm-color-green); } .wlm-icon-btn:hover svg { color: var(--wlm-color-cream); } /* ============================================ NAV - overrides on Bootstrap navbar ============================================ */ .wlm-nav { background: var(--wlm-color-cream); padding: 1.5rem 0; position: sticky; top: 0; z-index: 1030; transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } .wlm-nav .navbar-brand { flex-shrink: 0; margin-right: 1.5rem; } /* Nav over hero - transparent, white text */ .wlm-nav--on-image { position: absolute; top: 0; left: 0; right: 0; background: transparent; color: var(--wlm-color-cream); } .wlm-nav--on-image .navbar-brand img { filter: brightness(0) invert(1); } .wlm-nav--on-image .nav-link, .wlm-nav--on-image .wlm-icon-btn { color: var(--wlm-color-cream); } .wlm-nav--on-image .wlm-icon-btn:hover { background: var(--wlm-color-cream); } .wlm-nav--on-image .wlm-icon-btn:hover svg { color: var(--wlm-color-green); } /* Nav after scroll - fixed cream bar with shadow */ .wlm-nav--scrolled { position: fixed; /*background: var(--wlm-color-cream) !important;*/ background: #FFFFFF !important; color: var(--wlm-color-ink) !important; padding: 1rem 0; border-bottom: 1px solid var(--wlm-color-line-soft); box-shadow: 0 0.5rem 1.5rem -1rem rgba(31, 42, 30, 0.18); } .wlm-nav--scrolled .navbar-brand img { filter: none; } .wlm-nav--scrolled .nav-link, .wlm-nav--scrolled .wlm-icon-btn { color: var(--wlm-color-ink); } .wlm-nav--scrolled .wlm-icon-btn { border-color: var(--wlm-color-line); } .wlm-nav--scrolled .wlm-icon-btn:hover { background: var(--wlm-color-green); border-color: var(--wlm-color-green); } .wlm-nav--scrolled .wlm-icon-btn:hover svg { color: var(--wlm-color-cream); } .wlm-nav .navbar-brand img { height: 3.5rem; width: auto; transition: height 0.25s ease; } .wlm-nav--scrolled .navbar-brand img { height: 2.75rem; } .wlm-nav .navbar-nav .nav-link { color: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.5rem 0.875rem !important; position: relative; transition: opacity 0.2s; } .wlm-nav .navbar-nav .nav-link:hover, .wlm-nav .navbar-nav .nav-link:focus { color: inherit; opacity: 0.7; } .wlm-nav .navbar-nav .nav-link.active { color: inherit; } .wlm-nav .navbar-nav .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0.875rem; right: 0.875rem; height: 1px; background: currentColor; } .wlm-nav .navbar-toggler:focus { box-shadow: none; } /* Hamburger - only rendered below xl (Bootstrap's .navbar-expand-xl hides at xl+) */ /* @media (max-width: 1199.98px) { .wlm-nav .navbar-toggler { border: 1px solid currentColor; color: inherit; width: 2.5rem; height: 2.5rem; border-radius: 50%; padding: 0; display: grid; place-items: center; margin-left: 0.5rem; flex-shrink: 0; } .wlm-nav .navbar-toggler:focus { box-shadow: none; } .wlm-nav .navbar-toggler-icon { width: 1rem; height: 1rem; background-image: none; position: relative; } .wlm-nav .navbar-toggler-icon::before, .wlm-nav .navbar-toggler-icon::after, .wlm-nav .navbar-toggler-icon span { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; } .wlm-nav .navbar-toggler-icon::before { top: 0.25rem; } .wlm-nav .navbar-toggler-icon::after { bottom: 0.25rem; } } */ /* ============================================ MOBILE MENU OFFCANVAS (left side) Below xl: behaves as offcanvas. xl+: becomes inline nav. ============================================ */ .wlm-mobile-menu.offcanvas-xl { --bs-offcanvas-width: 18rem; } /* Offcanvas-only styling (mobile) - cream bg, ink text, link borders. Above xl Bootstrap collapses .offcanvas-xl into a regular flex container, so we must NOT apply background/color there or it would override the transparent-on-hero navbar styling. */ @media (max-width: 1199.98px) { .wlm-mobile-menu { background: var(--wlm-color-cream); color: var(--wlm-color-ink); } .wlm-mobile-menu .offcanvas-header { padding: 1.25rem 1.5rem; align-items: center; justify-content: space-between; } .wlm-mobile-menu .offcanvas-header .navbar-brand img { height: 2.75rem; filter: none; /* logo always dark inside the menu */ } .wlm-mobile-menu .offcanvas-body { padding: 1rem 0.5rem; } .wlm-mobile-menu .navbar-nav { gap: 0; } .wlm-mobile-menu .nav-link { color: var(--wlm-color-ink) !important; font-size: 1.0625rem !important; padding: 0.875rem 1rem !important; border-bottom: 1px solid var(--wlm-color-line-soft); } .wlm-mobile-menu .nav-link:hover { color: var(--wlm-color-green) !important; opacity: 1; } .wlm-mobile-menu .nav-link.active { color: var(--wlm-color-green) !important; } .wlm-mobile-menu .nav-link.active::after { display: none; } .wlm-mobile-menu .nav-item:last-child .nav-link { border-bottom: none; } } /* ============================================ HERO ============================================ */ .wlm-hero { position: relative; height: 45rem; overflow: hidden; background: var(--wlm-color-green-deep); } .wlm-hero--md { height: 35rem; } .wlm-hero--sm { height: 26.25rem; } @media (max-width: 991.98px) { .wlm-hero { height: 32rem; } .wlm-hero--md { height: 32rem; } .wlm-hero--sm { height: 20rem; } } /* Slide = full-bleed background image only */ .wlm-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s var(--wlm-ease); } .wlm-hero__slide.active { opacity: 1; } .wlm-hero__slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 42, 30, 0.2) 0%, rgba(31, 42, 30, 0.65) 100%); } /* Container - sits on top of slides, constrains content width */ .wlm-hero__container { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 6rem; /* under transparent navbar */ padding-bottom: 4rem; pointer-events: none; } .wlm-hero__container > * { pointer-events: auto; } @media (max-width: 991.98px) { .wlm-hero__container { padding-bottom: 2rem; } } /* Content panel - stacks within container, fades with active slide */ .wlm-hero__content { color: var(--wlm-color-cream); max-width: 40rem; /* tweak to taste */ position: absolute; bottom: 6rem; /* leave room for dots */ left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); opacity: 0; transition: opacity 0.8s var(--wlm-ease); pointer-events: none; } @media (min-width: 576px) { .wlm-hero__content { right: auto; } } .wlm-hero__content.active { opacity: 1; pointer-events: auto; } .wlm-hero__content .wlm-eyebrow { color: var(--wlm-color-accent); } .wlm-hero__content h1 { color: var(--wlm-color-cream); } .wlm-hero__content p { font-size: 1.0625rem; opacity: 0.92; margin: 1rem 0 1.75rem; } .wlm-hero__dots { display: none; gap: 0.625rem; justify-content: flex-end; margin-top: auto; } .wlm-hero__dot { width: 1.75rem; height: 2px; background: rgba(247, 245, 238, 0.4); border: none; cursor: pointer; transition: background 0.3s; padding: 0; } .wlm-hero[data-slider] .wlm-hero__dots { display: flex; } .wlm-hero__dot.active { background: var(--wlm-color-cream); } /* ============================================ SECTION BACKGROUNDS - colored full-bleed sections Pair with Bootstrap's `
…` ============================================ */ .wlm-bg-green { background: var(--wlm-color-green); color: var(--wlm-color-cream); } .wlm-bg-green h1, .wlm-bg-green h2, .wlm-bg-green h3, .wlm-bg-green h4 { color: var(--wlm-color-cream); } .wlm-bg-green .wlm-eyebrow { color: var(--wlm-color-accent); } .wlm-bg-green .form-control, .wlm-bg-green .form-select, .wlm-bg-green textarea.form-control { background: rgba(247, 245, 238, 0.08); border-color: rgba(247, 245, 238, 0.3); color: var(--wlm-color-cream); } .wlm-bg-green .form-control:focus, .wlm-bg-green .form-select:focus, .wlm-bg-green textarea.form-control:focus { background: rgba(247, 245, 238, 0.08); color: var(--wlm-color-cream); border-color: var(--wlm-color-accent); box-shadow: 0 0 0 0.1875rem rgba(242, 201, 76, 0.18); } .wlm-bg-green .form-control::placeholder, .wlm-bg-green textarea.form-control::placeholder { color: rgba(247, 245, 238, 0.5); } .wlm-bg-green .wlm-label, .wlm-bg-green .form-label { color: var(--wlm-color-accent); } .wlm-bg-cream-deep { background: var(--wlm-color-cream-deep); } /* Big section padding (96px) - Bootstrap's py-5 = 3rem, we want 6rem */ .py-section { padding-block: 6rem; } .pt-section { padding-top: 6rem; } .pb-section { padding-bottom: 6rem; } @media (max-width: 991.98px) { .py-section { padding-block: 4rem; } .pt-section { padding-top: 4rem; } .pb-section { padding-bottom: 4rem; } } /* ============================================ FOOTER ============================================ */ .wlm-footer { background: var(--wlm-color-green-deep); color: var(--wlm-color-cream); padding: 4rem 0 1.5rem; } @media (max-width: 991.98px) { .wlm-footer { padding: 3rem 0 1.5rem; } } .wlm-footer hr { border-top: 1px solid rgba(247, 245, 238, 0.18); opacity: 1; margin-block: 3rem 1.5rem; } .wlm-footer__col-title { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wlm-color-accent); margin-bottom: 1rem; } .wlm-footer__col a { display: block; padding: 0.25rem 0; opacity: 0.85; font-size: 0.875rem; color: var(--wlm-color-cream); } .wlm-footer__col a:hover { opacity: 1; } .wlm-footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .wlm-footer__brand-mark { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--wlm-color-accent); border-radius: 50%; font-family: var(--wlm-font-display); font-size: 0.875rem; color: var(--wlm-color-accent); } .wlm-footer__brand-text { font-family: var(--wlm-font-display); font-size: 1.0625rem; letter-spacing: 0.02em; line-height: 1; color: var(--wlm-color-cream); } .wlm-footer__brand-text small { display: block; font-family: var(--wlm-font-body); font-size: 0.5625rem; letter-spacing: 0.32em; margin-top: 0.25rem; opacity: 0.7; } .wlm-footer__newsletter { display: flex; border-bottom: 1px solid rgba(247, 245, 238, 0.4); } .wlm-footer__newsletter input { flex: 1; background: transparent; border: none; color: var(--wlm-color-cream); padding: 0.5rem 0; outline: none; font-size: 0.8125rem; } .wlm-footer__newsletter input::placeholder { color: rgba(247, 245, 238, 0.4); } .wlm-footer__newsletter button { background: transparent; border: none; color: var(--wlm-color-accent); padding: 0 0.5rem; } .wlm-footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; opacity: 0.7; flex-wrap: wrap; gap: 0.5rem; } /* ============================================ FILTER CHIPS ============================================ */ .wlm-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border-radius: var(--wlm-r-pill); border: 1px solid var(--wlm-color-line); background: transparent; font-size: 0.8125rem; color: var(--wlm-color-ink-soft); cursor: pointer; transition: all 0.2s; } .wlm-chip:hover { border-color: var(--wlm-color-green); } .wlm-chip.active { background: var(--wlm-color-green); color: var(--wlm-color-cream); border-color: var(--wlm-color-green); } /* ============================================ HEART / FAVORITE ============================================ */ .wlm-heart { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(0.5rem); border: none; cursor: pointer; transition: all 0.2s; } .wlm-heart:hover { background: var(--wlm-color-cream); } .wlm-heart svg { color: var(--wlm-color-ink-soft); transition: color 0.2s; } .wlm-heart.active svg { color: #C84A4A; fill: #C84A4A; } /* ============================================ GALLERY (magazine grid 2fr 1fr 1fr) + LIGHTBOX ============================================ */ .wlm-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 18.75rem 13.75rem; gap: 1rem; } .wlm-gallery__item { background-size: cover; background-position: center; border-radius: var(--wlm-r-md); cursor: pointer; transition: transform 0.3s var(--wlm-ease); } .wlm-gallery__item:hover { transform: scale(1.01); } .wlm-gallery__item:first-child { grid-column: span 1; grid-row: span 2; } @media (max-width: 991.98px) { .wlm-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 12rem 12rem; } .wlm-gallery__item:first-child { grid-column: span 2; grid-row: span 1; } } /*** Gallery: count-aware layouts via CSS :has() Supports 1-8 images; 9+ are hidden. The base .wlm-gallery rules above define the 5-image magazine layout; every other count overrides below. ***/ /* 9+ images: discard extras */ .wlm-gallery .wlm-gallery__item:nth-child(n+9) { display: none; } /*** 1 image: full width ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(1):last-child) { grid-template-columns: 1fr; grid-template-rows: 28rem; } .wlm-gallery:has(.wlm-gallery__item:nth-child(1):last-child) .wlm-gallery__item:first-child { grid-column: span 1; grid-row: span 1; } /*** 2 images: 50 / 50 ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: 22rem; } .wlm-gallery:has(.wlm-gallery__item:nth-child(2):last-child) .wlm-gallery__item:first-child { grid-column: span 1; grid-row: span 1; } /*** 3 images: equal thirds ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 22rem; } .wlm-gallery:has(.wlm-gallery__item:nth-child(3):last-child) .wlm-gallery__item:first-child { grid-column: span 1; grid-row: span 1; } /*** 4 images: 1 tall left · 2 middle (stacked) · 1 tall right ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, 15rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; } /*** 6 images: 1 tall left · 4 middle (2 rows × 2) · 1 tall right ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(2, 15rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 4; grid-row: 1 / span 2; } /*** 7 images: 3 left · 1 tall center · 3 right ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) { grid-template-columns: 1fr 2fr 1fr; grid-template-rows: repeat(3, 10.5rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 1; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 1; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(7) { grid-column: 3; grid-row: 3; } /*** 8 images: 1 tall left · 6 middle (3 rows × 2) · 1 tall right ***/ .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(3, 11rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 2; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(7) { grid-column: 3; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(8) { grid-column: 4; grid-row: 1 / span 3; } /*** Mobile overrides (≤ 991px) for count-aware layouts ***/ @media (max-width: 991.98px) { /* 5 images: 2 top · 3 bottom (6-col LCM grid) */ .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); grid-template-rows: 12rem 12rem; } .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(5):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; } /* 3 images: drop to single column on tablet/phone */ .wlm-gallery:has(.wlm-gallery__item:nth-child(3):last-child) { grid-template-columns: 1fr; grid-template-rows: repeat(3, 13rem); } /* 7 images: 2 top · 3 middle · 2 bottom (6-col LCM grid) */ .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 12rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1 / span 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 4 / span 3; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 3 / span 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 1 / span 3; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(7):last-child) .wlm-gallery__item:nth-child(7) { grid-column: 4 / span 3; grid-row: 3; } } /* Below md: smaller count overrides */ @media (max-width: 767.98px) { /* 4 images: 1 full · 2 side by side · 1 full */ .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 12rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 1; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(4):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; } } /* 8 images: below md -> 3 · 2 · 3 (6-col LCM grid) */ @media (max-width: 767.98px) { .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 12rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 5 / span 2; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 1 / span 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 4 / span 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 1 / span 2; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(7) { grid-column: 3 / span 2; grid-row: 3; } .wlm-gallery:has(.wlm-gallery__item:nth-child(8):last-child) .wlm-gallery__item:nth-child(8) { grid-column: 5 / span 2; grid-row: 3; } /* 6 images: 1 full · 4 thumbs · 1 full */ .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 12rem); } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(1) { grid-column: 1 / span 4; grid-row: 1; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(2) { grid-column: 1; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(3) { grid-column: 2; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(4) { grid-column: 3; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(5) { grid-column: 4; grid-row: 2; } .wlm-gallery:has(.wlm-gallery__item:nth-child(6):last-child) .wlm-gallery__item:nth-child(6) { grid-column: 1 / span 4; grid-row: 3; } } .wlm-lightbox { position: fixed; inset: 0; background: rgba(31, 42, 30, 0.92); z-index: 2000; display: none; align-items: center; justify-content: center; } .wlm-lightbox.open { display: flex; } .wlm-lightbox__img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--wlm-r-md); } .wlm-lightbox__close, .wlm-lightbox__prev, .wlm-lightbox__next { position: absolute; background: rgba(247, 245, 238, 0.12); border: 1px solid rgba(247, 245, 238, 0.3); color: var(--wlm-color-cream); width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background 0.2s; } .wlm-lightbox__close:hover, .wlm-lightbox__prev:hover, .wlm-lightbox__next:hover { background: rgba(247, 245, 238, 0.25); } .wlm-lightbox__close { top: 1.5rem; right: 1.5rem; } .wlm-lightbox__prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .wlm-lightbox__next { right: 1.5rem; top: 50%; transform: translateY(-50%); } /* Walk-through strip (home only) */ .wlm-walkthrough { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0 4rem; scrollbar-width: none; } .wlm-walkthrough::-webkit-scrollbar { display: none; } .wlm-walkthrough__item { height: 22.5rem; background-size: cover; background-position: center; border-radius: var(--wlm-r-md); flex-shrink: 0; flex-basis: 22%; cursor: pointer; } .wlm-walkthrough__item--wide { flex-basis: 30%; } @media (max-width: 991.98px) { .wlm-walkthrough { padding: 0 1.5rem; } .wlm-walkthrough__item, .wlm-walkthrough__item--wide { flex-basis: 80%; } } /* ============================================ OFFCANVAS (member + booking) - overrides on Bootstrap ============================================ */ .offcanvas { background: var(--wlm-color-cream); } .wlm-offcanvas-header { padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wlm-color-line); } .wlm-offcanvas-body { flex: 1; overflow-y: auto; padding: 2rem; } .wlm-offcanvas-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--wlm-color-line); background: var(--wlm-color-white); } /* Stepper */ .wlm-stepper { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; } .wlm-stepper__dot { flex: 1; height: 3px; background: var(--wlm-color-line); border-radius: 2px; transition: background 0.3s; } .wlm-stepper__dot.done { background: var(--wlm-color-green); } .wlm-stepper__dot.active { background: var(--wlm-color-accent); } /* OTP boxes */ .wlm-otp-row { display: flex; gap: 0.25rem; margin-bottom: 2rem; } .wlm-otp-row .wlm-input--boxed { flex: 1; min-width: 0; } /* Expiry dual-select (card modal) — styled to look like a single input */ .wlm-expiry-wrap { display: flex; align-items: center; border: 1px solid var(--bs-border-color, #ced4da); border-radius: var(--wlm-r-md); overflow: hidden; background: var(--wlm-color-white, #fff); } .wlm-expiry-sel { flex: 1; border: none; border-radius: 0; box-shadow: none !important; outline: none; background: transparent; padding: 0.375rem 0.5rem; font-size: 1rem; min-width: 0; -webkit-appearance: none; appearance: none; } .wlm-expiry-sel:focus { box-shadow: none !important; outline: none; } .wlm-expiry-wrap:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); } .wlm-expiry-sep { flex-shrink: 0; padding: 0 0.1rem; color: var(--wlm-color-mute, #888); font-size: 1rem; user-select: none; pointer-events: none; } /* ============================================ FORM SUCCESS / ERROR ============================================ */ .wlm-form-success { /*background: rgba(242, 201, 76, 0.12);*/ /*border: 1px solid rgba(242, 201, 76, 0.5);*/ background: #eaf4bf; /* #e3f4be */ border: 1px solid #cbeb88; border-radius: var(--wlm-r-md); padding: 1rem 1.25rem; color: var(--wlm-color-ink); display: flex; gap: 0.75rem; align-items: flex-start; } .wlm-form-error { /*background: rgba(200, 74, 74, 0.08);*/ /*border: 1px solid rgba(200, 74, 74, 0.4);*/ background: #f5e8e0; border: 1px solid #e3a9a6; border-radius: var(--wlm-r-md); padding: 0.75rem 1rem; color: #802828; margin-bottom: 1.5rem; font-size: 0.8125rem; } .wlm-form-error .bi::before, .wlm-form-error [class*=" bi-"]::before, .wlm-form-error [class^=bi-]::before { vertical-align: -.125em; } /* Scoped flex layout for error banners inside the account flyout and card modal only */ .wlm-flyout .wlm-form-error, .wlm-modal .wlm-form-error { display: flex; gap: 0.75rem; align-items: flex-start; } /* Info banner (e.g. OTP resend notification) */ .wlm-form-info { background: #e8f4fd; border: 1px solid #90c8f0; border-radius: var(--wlm-r-md); padding: 0.75rem 1rem; color: #1a5f8a; font-size: 0.8125rem; display: flex; gap: 0.75rem; align-items: flex-start; } /* ============================================ SHARE MODAL ============================================ */ .wlm-modal .modal-content { background: var(--wlm-color-cream); border-radius: var(--wlm-r-lg); box-shadow: var(--wlm-shadow-lg); } /* ============================================ INPUT WITH LEADING ICON + TRAILING BUTTON (used for share copy + send-by-email rows) ============================================ */ .wlm-input-row { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem 0.625rem 1rem; background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); transition: border-color 0.2s, box-shadow 0.2s; } .wlm-input-row:focus-within { border-color: var(--wlm-color-green); box-shadow: 0 0 0 0.1875rem rgba(63, 94, 61, 0.12); } .wlm-input-row > i { color: var(--wlm-color-mute); flex-shrink: 0; } .wlm-input-row > input, .wlm-input-row > .wlm-input-row__text { flex: 1; min-width: 0; border: none; background: transparent; outline: none; padding: 0; font-family: var(--wlm-font-body); font-size: 0.875rem; color: var(--wlm-color-ink); } .wlm-input-row > .wlm-input-row__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--wlm-font-mono); font-size: 0.75rem; color: var(--wlm-color-ink-soft); } .wlm-input-row > input::placeholder { color: var(--wlm-color-mute); } .wlm-input-row > .wlm-btn { flex-shrink: 0; } /* ============================================ PAYMENT CARD VISUAL (profile) ============================================ */ .wlm-payment-card { background: linear-gradient(135deg, var(--wlm-color-green), var(--wlm-color-green-deep)); border-radius: var(--wlm-r-lg); padding: 1.25rem; color: var(--wlm-color-cream); position: relative; } .wlm-payment-card__number { font-family: var(--wlm-font-display); font-size: 1rem; letter-spacing: 0.18em; margin-top: 1.75rem; } .wlm-payment-card__row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.75rem; font-size: 0.75rem; } /* Saved card / "use different card" - two separate radio buttons */ .wlm-card-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); cursor: pointer; transition: border-color 0.15s; } .wlm-card-option--active { border-color: var(--wlm-color-green); } .wlm-card-option input[type="radio"] { accent-color: var(--wlm-color-green); } /* Grouped card form - appears below "Use a different card" when selected */ .wlm-card-form { background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); padding: 1rem; } /* When "Use a different card" is expanded - square the bottom so it connects to the form */ .wlm-card-option--open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: var(--wlm-color-line); margin-bottom: 0 !important; } /* Card form that immediately follows an open option - joins as one component */ .wlm-card-option--open + .wlm-card-form { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; border-color: var(--wlm-color-green); } /* Alerts (booking flyout previews) */ .wlm-alert { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0.875rem; border-radius: var(--wlm-r-md); border: 1px solid; font-size: 0.8125rem; line-height: 1.45; } .wlm-alert > i { font-size: 1rem; flex-shrink: 0; margin-top: 0.0625rem; } .wlm-alert--warn { background: rgba(242, 201, 76, 0.12); border-color: rgba(242, 201, 76, 0.5); color: var(--wlm-color-ink); } .wlm-alert--warn > i { color: #B8860B; } .wlm-alert--info { background: rgba(63, 94, 61, 0.06); border-color: rgba(63, 94, 61, 0.2); color: var(--wlm-color-ink); } .wlm-alert--info > i { color: var(--wlm-color-green); } .wlm-alert--error { background: rgba(200, 74, 74, 0.08); border-color: rgba(200, 74, 74, 0.4); color: #802828; } .wlm-alert--error > i { color: #C84A4A; } /* ============================================ TOGGLE SWITCH (notifications) ============================================ */ .wlm-toggle { position: relative; width: 2.25rem; height: 1.25rem; background: var(--wlm-color-line); border-radius: 999px; cursor: pointer; flex-shrink: 0; transition: background 0.2s; } .wlm-toggle::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; background: var(--wlm-color-white); border-radius: 50%; transition: left 0.2s; } .wlm-toggle.on { background: var(--wlm-color-green); } .wlm-toggle.on::after { left: 1.125rem; } .wlm-toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.875rem 0; border-bottom: 1px solid var(--wlm-color-line-soft); cursor: pointer; } /* ============================================ PROGRAM ROW (member dashboard) ============================================ */ .wlm-program-row { background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line-soft); border-radius: var(--wlm-r-md); padding: 1rem; margin-bottom: 0.75rem; } .wlm-program-row--past { opacity: 0.85; } .wlm-program-row--past .wlm-program-row__cover { filter: grayscale(0.2); } .wlm-program-row__cover { width: 4rem; height: 4rem; border-radius: var(--wlm-r-md); background-size: cover; background-position: center; flex-shrink: 0; } .wlm-program-row__actions { display: flex; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--wlm-color-line-soft); } .wlm-program-row__actions a { font-size: 0.75rem; color: var(--wlm-color-green); border-bottom: 1px solid var(--wlm-color-green); cursor: pointer; line-height: 1; } .wlm-program-row__actions a.is-mute { color: var(--wlm-color-mute); border-bottom-color: var(--wlm-color-mute); margin-left: auto; } /* ============================================ BOOKING DETAIL ROW (summary step) ============================================ */ .wlm-detail-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 0; border-bottom: 1px solid var(--wlm-color-line-soft); } .wlm-detail-row:last-child { border-bottom: none; } .wlm-detail-row__icon { width: 2rem; height: 2rem; border-radius: var(--wlm-r-md); background: var(--wlm-color-cream-deep); display: grid; place-items: center; color: var(--wlm-color-green); flex-shrink: 0; } /* Tabs inside member offcanvas */ .wlm-flyout-tabs { display: flex; padding: 0 1.5rem; border-bottom: 1px solid var(--wlm-color-line); } .wlm-flyout-tabs__btn { flex: 1; padding: 0.875rem 0; background: transparent; border: none; font-size: 0.8125rem; font-weight: 500; color: var(--wlm-color-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; } .wlm-flyout-tabs__btn.active { color: var(--wlm-color-green); border-bottom-color: var(--wlm-color-green); } /* ============================================ TIMELINE (register-complete page) ============================================ */ .wlm-timeline { list-style: none; padding: 0; margin: 0; position: relative; } .wlm-timeline li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-bottom: 1.5rem; position: relative; } .wlm-timeline li::before { content: ''; position: absolute; left: 1.4375rem; top: 3rem; bottom: 0; width: 1px; background: var(--wlm-color-line); } .wlm-timeline li:last-child::before { display: none; } .wlm-timeline__marker { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--wlm-color-line); background: var(--wlm-color-white); color: var(--wlm-color-mute); display: grid; place-items: center; font-family: var(--wlm-font-display); font-size: 0.875rem; position: relative; z-index: 1; } .wlm-timeline li.active .wlm-timeline__marker { border-color: var(--wlm-color-green); background: var(--wlm-color-green); color: var(--wlm-color-cream); } /* ============================================ UTILITY - inline-style replacements ============================================ */ /* Address base style */ address { color: var(--wlm-color-ink-soft); line-height: 1.6; } /*** Color utilities ***/ .wlm-text-ink { color: var(--wlm-color-ink); } .wlm-text-soft { color: var(--wlm-color-ink-soft); } .wlm-text-mute { color: var(--wlm-color-mute); } .wlm-text-green { color: var(--wlm-color-green); } .wlm-text-leaf { color: var(--wlm-color-leaf); } .wlm-text-accent { color: var(--wlm-color-accent); } .wlm-text-cream { color: var(--wlm-color-cream); } .wlm-text-cream-soft { color: rgba(247, 245, 238, 0.82); } .wlm-text-cream-dim { color: rgba(247, 245, 238, 0.6); } .wlm-text-cream-muted { color: rgba(247, 245, 238, 0.85); } /*** Background utilities ***/ .wlm-bg-accent { background: var(--wlm-color-accent); } /*** Border utilities ***/ .wlm-border-line { border-color: var(--wlm-color-line) !important; } .wlm-border-dashed { border-style: dashed !important; border-color: var(--wlm-color-line) !important; } .wlm-pseudo-link { border-bottom: 1px solid; cursor: pointer; } .wlm-link-green { color: var(--wlm-color-green); border-bottom: 1px solid var(--wlm-color-green); } /*** Font family utilities ***/ .wlm-font-display { font-family: var(--wlm-font-display); } .wlm-font-mono { font-family: var(--wlm-font-mono); } /* Card title - display font + 1.125rem (practitioner/space names on cards) */ .wlm-card-title { font-family: var(--wlm-font-display); font-size: 1.125rem; } /* Price display - display font + 1.5rem */ .wlm-price-lg { font-family: var(--wlm-font-display); font-size: 1.5rem; } /*** Font size utilities (non-Bootstrap sizes) ***/ .wlm-text-xl { font-size: 2rem; } .wlm-text-lg { font-size: 1.5rem; } .wlm-fs-18 { font-size: 1.125rem; } /* 18 px */ .wlm-fs-17 { font-size: 1.0625rem; } /* 17 px */ .wlm-fs-16 { font-size: 1rem; } /* 16 px - explicit base reset */ .wlm-text-sm { font-size: 0.875rem; } .wlm-text-xs { font-size: 0.75rem; } .wlm-text-xxs { font-size: 0.6875rem; } .wlm-text-tiny { font-size: 0.625rem; } /*** Avatar / image sizes ***/ .wlm-avatar-xs { width: 1.75rem; height: 1.75rem; object-fit: cover; } .wlm-avatar-sm { width: 2rem; height: 2rem; object-fit: cover; } .wlm-avatar-md { width: 3.5rem; height: 3.5rem; object-fit: cover; } .wlm-avatar-lg { width: 8.75rem; height: 8.75rem; object-fit: cover; } /*** Circle icon containers ***/ .wlm-circle-icon-sm { width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .wlm-circle-icon-md { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } .wlm-circle-icon-lg { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; } /*** Aspect ratio ***/ .wlm-aspect-3-4 { aspect-ratio: 3/4; } @media (max-width: 575.98px) { .wlm-aspect-3-4 { aspect-ratio: 4/3; } } /*** Overlay gradient (dark bottom-fade for card overlays) ***/ .wlm-overlay-dark { background: linear-gradient(180deg, transparent 50%, rgba(31, 42, 30, 0.85)); } /*** Shadow utility ***/ .wlm-shadow-md { box-shadow: var(--wlm-shadow-md); } /*** Sticky sidebar offset (sits below fixed nav) ***/ .wlm-sticky-top-offset { top: 6rem; } /*** Max-width reset ***/ .wlm-mw-none { max-width: none; } /*** Offcanvas/panel width ***/ .wlm-panel-width { width: 25rem; max-width: 100vw; } /*** Micro margin (sub-Bootstrap spacing, stacked detail labels) ***/ .wlm-mb-half { margin-bottom: 0.125rem; } /*** Schedule nav (week-picker control strip) ***/ .wlm-schedule-nav { display: flex; gap: 0.5rem; align-items: center; } .wlm-schedule-nav button, .wlm-schedule-nav a { height: 2.5rem; display: grid; align-items: center; justify-content: center; border-radius: var(--wlm-r-pill); background: transparent; color: var(--wlm-color-green); border: 1px solid var(--wlm-color-green); text-transform: uppercase; white-space: nowrap; line-height: 1; transition: all 0.25s var(--wlm-ease); letter-spacing: 0.08em; } .wlm-schedule-nav button.wlm-schedule-nav__prev, .wlm-schedule-nav button.wlm-schedule-nav__next, .wlm-schedule-nav a { width: 2.5rem; padding: 0; flex-shrink: 0; font-size: 1rem; cursor: pointer; } .wlm-schedule-nav button.wlm-schedule-nav__label { padding: 0 1.125rem; font-family: var(--wlm-font-body); font-size: 0.6875rem; font-weight: 500; cursor: default; } .wlm-schedule-nav button.wlm-schedule-nav__prev:hover, .wlm-schedule-nav button.wlm-schedule-nav__next:hover, .wlm-schedule-nav a:hover { background: var(--wlm-color-green); color: var(--wlm-color-cream); } /*** Footer text ***/ .wlm-footer-desc { opacity: 0.8; font-size: 0.875rem; max-width: 20rem; } .wlm-footer-newsletter-desc { opacity: 0.8; font-size: 0.8125rem; margin-bottom: 0.75rem; } /*** Schedule bar (week nav + filter group) ***/ /* * Below md : column, both blocks full-width and centered. * md+ : row. nav gets margin-right: auto which consumes all free space * on that flex line, shoving filters to the right edge. * When the filters group is too wide to share the line it wraps * to a new row; justify-content: center then centers it there. * The filters group itself also flex-wraps so individual dropdowns * can spill onto additional lines rather than overflowing. */ .wlm-schedule-bar { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .wlm-schedule-bar__filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.375rem 1.25rem; } @media (min-width: 768px) { .wlm-schedule-bar { flex-direction: row; flex-wrap: wrap; /*justify-content: center;*/ align-items: center; gap: 0.5rem 1.5rem; } .wlm-schedule-bar > .wlm-schedule-nav { margin-right: auto; } } /*** Filter dropdown (replaces native selects for sort / filter controls) ***/ .wlm-filter-dropdown { position: relative; } .wlm-filter-toggle { display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: none; padding: 0; font-family: var(--wlm-font-body); font-size: 0.9375rem; color: var(--wlm-color-mute); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color 0.2s var(--wlm-ease); } .wlm-filter-toggle:hover, .wlm-filter-toggle:focus-visible { color: var(--wlm-color-green); outline: none; } .wlm-filter-chevron { flex-shrink: 0; font-size: 0.625rem; transition: transform 0.2s var(--wlm-ease); } .wlm-filter-dropdown.show .wlm-filter-chevron { transform: rotate(180deg); } .wlm-filter-menu { min-width: 10rem; padding: 0.375rem 0; background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); box-shadow: var(--wlm-shadow-md); font-family: var(--wlm-font-body); font-size: 0.875rem; } .wlm-filter-menu .dropdown-item { padding: 0.5rem 0.875rem; color: var(--wlm-color-ink-soft); transition: background 0.15s var(--wlm-ease), color 0.15s var(--wlm-ease); } .wlm-filter-menu .dropdown-item:hover, .wlm-filter-menu .dropdown-item:focus { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green); } .wlm-filter-menu .dropdown-item.active, .wlm-filter-menu .dropdown-item:active { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green); font-weight: 500; } /* Schedule List - Practitioner */ .wlm-schedule-list .row { /* padding-top: 1rem; padding-bottom: 1rem; padding-right: 1.5rem; padding-left: 1.5rem; */ padding: 1rem 1.5rem; align-items: center !important; --bs-gutter-y: 0; --bs-gutter-x: 0; } .wlm-schedule-list .row:not(:last-child) { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .wlm-schedule-list__program, .wlm-schedule-list__checkout, .wlm-schedule-list__details { display: flex; gap: 1rem !important; align-items: center; } .wlm-schedule-list .small { color: var(--wlm-color-mute); font-family: var(--wlm-font-body); } .wlm-schedule-list__details .pills { display: flex; gap: .25rem !important; justify-content: end; flex-wrap: wrap; } @media (min-width: 992px) { .wlm-schedule-list__details .pills { justify-content: start; min-width: 13rem; padding-right: 1.5rem; } } @media (min-width: 1200px) { .wlm-schedule-list__details .pills { min-width: 16rem; } } @media (min-width: 1400px) { .wlm-schedule-list__details .pills { min-width: 18rem; } } .wlm-schedule-list__details .pills span { font-size: 0.6875rem; background: transparent; border: 1px solid var(--wlm-color-line); display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: var(--wlm-r-pill); color: var(--wlm-color-ink-soft); font-weight: 500; letter-spacing: 0.04em; } .wlm-schedule-list__details .pills span.yellow { background: var(--wlm-color-accent); color: var(--wlm-color-ink); } .wlm-schedule-list__details { font-family: var(--wlm-font-display); font-size: 1rem; } .wlm-schedule-list__checkout button { /*.wlm-btn-sm*/ padding: 0.625rem 1.125rem; font-size: 0.6875rem; /*.wlm-btn-primary*/ background: var(--wlm-color-green); color: var(--wlm-color-cream); display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: none; border-radius: var(--wlm-r-pill); cursor: pointer; transition: all 0.25s var(--wlm-ease); white-space: nowrap; line-height: 1; margin-left: 1.5rem; } .wlm-schedule-list__checkout button:hover { background: var(--wlm-color-green-deep); transform: translateY(-1px); color: var(--wlm-color-cream); } .img-thumb-sm { width: 3.5rem; height: 3.5rem; border-radius: var(--bs-border-radius) !important; object-fit: cover !important; } /* Close buttons */ .wlm-btn-close { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: transparent; border: 1px solid var(--wlm-color-line); color: var(--wlm-color-mute); transition: all 0.2s; cursor: pointer; padding: 0; flex-shrink: 0; font-size: 0.875rem; } .wlm-btn-close:hover, .wlm-payment-card .wlm-btn-close:hover { color: var(--wlm-color-cream); background: var(--wlm-color-green); border-color: var(--wlm-color-green); } .bi::before, [class*=" bi-"]::before, [class^=bi-]::before { vertical-align: -.2em; } /* Delete buttons (Credit Card) */ .wlm-payment-card .wlm-btn-close { position: absolute; top: 0.625rem; right: 0.625rem; width: 2rem; height: 2rem; border: 1px solid var(--wlm-color-gold-warm); color: var(--wlm-color-gold); } /* ============================================ DATEPICKER - overrides on vanillajs-datepicker (datepicker-bs5) Loaded only on pages that need it (bed-breakfast, occasion-details, space-details). Repaints the BS5 default to use the WLM palette. Works on both light cream and `.wlm-bg-green` section backgrounds. ============================================ */ .datepicker-dropdown { z-index: 1080; padding-top: 0.375rem; } .datepicker-picker { background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-lg); box-shadow: var(--wlm-shadow-md); padding: 0.625rem; font-family: var(--wlm-font-body); font-size: 0.8125rem; color: var(--wlm-color-ink); } .datepicker-header .datepicker-controls { display: flex; align-items: center; gap: 0.25rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--wlm-color-line-soft); } .datepicker-header .datepicker-controls .button { background: transparent; border: none; border-radius: var(--wlm-r-md); color: var(--wlm-color-ink); font-family: var(--wlm-font-display); font-weight: 500; font-size: 0.875rem; padding: 0.4rem 0.6rem; box-shadow: none; transition: background-color 0.15s var(--wlm-ease); } .datepicker-header .datepicker-controls .view-switch { flex: 1 1 auto; } .datepicker-header .datepicker-controls .button:hover, .datepicker-header .datepicker-controls .button:focus-visible { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green); outline: none; } .datepicker-header .datepicker-controls .prev-button, .datepicker-header .datepicker-controls .next-button { flex: 0 0 2rem; font-size: 1rem; line-height: 1; } .datepicker-header .datepicker-controls .prev-button.disabled, .datepicker-header .datepicker-controls .next-button.disabled { color: var(--wlm-color-line); cursor: default; pointer-events: none; } .datepicker-main { padding-top: 0.5rem; } .datepicker .days-of-week .dow { color: var(--wlm-color-mute); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0; } /* Note: do NOT add `gap` here - vanillajs-datepicker sizes cells at 14.2857% (1/7), and any positive gap pushes the row past 100% and wraps Saturday onto the next line. */ .datepicker-grid { gap: 0; } .datepicker-cell { border: none; border-radius: var(--wlm-r-md); background: transparent; color: var(--wlm-color-ink); height: 2.125rem; line-height: 2.125rem; font-weight: 400; transition: background-color 0.12s var(--wlm-ease), color 0.12s var(--wlm-ease); } .datepicker-cell:not(.disabled):hover { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green-deep); } .datepicker-cell.prev, .datepicker-cell.next { color: var(--wlm-color-mute); } .datepicker-cell.disabled { color: var(--wlm-color-line); cursor: default; } .datepicker-cell.today:not(.selected), .datepicker-cell.today:not(.selected):not(.disabled) { color: var(--wlm-color-green); font-weight: 600; box-shadow: inset 0 0 0 1px var(--wlm-color-leaf-soft); background: transparent; } .datepicker-cell.focused:not(.selected) { background: none; } .datepicker-cell.selected, .datepicker-cell.selected:hover, .datepicker-cell.range-start, .datepicker-cell.range-end { background: var(--wlm-color-green); color: var(--wlm-color-cream); font-weight: 500; } .datepicker-cell.range { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green-deep); border-radius: 0; } .datepicker-cell.range-start { border-radius: var(--wlm-r-md) 0 0 var(--wlm-r-md); } .datepicker-cell.range-end { border-radius: 0 var(--wlm-r-md) var(--wlm-r-md) 0; } .datepicker-cell.range-start.range-end { border-radius: var(--wlm-r-md); } .datepicker-view .week { color: var(--wlm-color-mute); } .datepicker-footer { display: none; } /* Inputs that own a datepicker get a subtle calendar glyph hint. We re-assert the background-* longhands on `:focus` and inside `.wlm-bg-green` because the project's `.form-control:focus` rules use the `background:` shorthand, which (without these re-asserts) snaps `background-repeat` back to `repeat` and tiles the icon across the input. */ .wlm-datepicker-wrap { position: relative; } .wlm-datepicker-wrap > .form-control, .wlm-datepicker-wrap > .form-control:focus, .wlm-bg-green .wlm-datepicker-wrap > .form-control, .wlm-bg-green .wlm-datepicker-wrap > .form-control:focus { padding-right: 2.25rem; cursor: pointer; background-repeat: no-repeat; background-position: right 0.875rem center; background-size: 1rem 1rem; } .wlm-datepicker-wrap > .form-control, .wlm-datepicker-wrap > .form-control:focus { background-image: url("data:image/svg+xml;utf8,"); } /* On dark green sections, retint the calendar glyph in the accent gold */ .wlm-bg-green .wlm-datepicker-wrap > .form-control, .wlm-bg-green .wlm-datepicker-wrap > .form-control:focus { background-image: url("data:image/svg+xml;utf8,"); } /* ============================================ CHOICES.JS - WLM theme overrides Targets the .choices wrapper that Choices.js injects around every initialised . Loaded on every page that links choices.min.css. Overrides the library defaults with the WLM palette. ============================================ */ /*** Outer container ***/ .choices { margin-bottom: 0; font-family: var(--wlm-font-body); font-size: 0.9375rem; } /*** Inner (the "input" bar) ***/ .choices .choices__inner { background: var(--wlm-color-white); border: 1px solid var(--wlm-color-line); border-radius: var(--wlm-r-md); padding: 0.5rem 0.875rem; min-height: unset; font-size: 0.9375rem; color: var(--wlm-color-ink); line-height: 1.5; } /* Multi-select / tag-input inner - extra bottom gap to clear chips */ .choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner { padding: 0.375rem 0.875rem 0.125rem; min-height: 2.75rem; } /* Square off bottom corners while dropdown is open (normal direction) */ .choices.is-open:not(.is-flipped) .choices__inner { border-radius: var(--wlm-r-md) var(--wlm-r-md) 0 0; } /* Square off top corners when dropdown opens upward */ .choices.is-flipped.is-open .choices__inner { border-radius: 0 0 var(--wlm-r-md) var(--wlm-r-md); } /* Focus / open ring */ /*.choices.is-focused .choices__inner,*/ .choices.is-open .choices__inner { border-color: var(--wlm-color-green); box-shadow: 0 0 0 0.1875rem rgba(63, 94, 61, 0.12); } /*** Selected item (single-select label) ***/ .choices .choices__list--single .choices__item { color: var(--wlm-color-ink); padding: 0; white-space: nowrap; overflow-x: clip; text-overflow: ellipsis; } /*** Chips / tags (multi-select selected items) ***/ .choices .choices__list--multiple .choices__item { display: inline-flex; align-items: center; background: var(--wlm-color-green); border: 1px solid var(--wlm-color-green-deep); border-radius: var(--wlm-r-pill); color: var(--wlm-color-cream); font-family: var(--wlm-font-body); font-size: 0.75rem; font-weight: 500; padding: 0.1875rem 0.625rem; margin-right: 0.3125rem; margin-bottom: 0.25rem; line-height: 1.4; } .choices .choices__list--multiple .choices__item.is-highlighted { background: var(--wlm-color-green-deep); border-color: var(--wlm-color-green-deep); } /*** Remove (×) button on chips ***/ .choices .choices__button { border-left-color: rgba(247, 245, 238, 0.35); opacity: 0.65; transition: opacity 0.15s var(--wlm-ease); } .choices .choices__button:hover, .choices .choices__button:focus { opacity: 1; } /*** Text input inside multi-select / tag-input inner bar ***/ .choices .choices__input { background: transparent; color: var(--wlm-color-ink); font-family: var(--wlm-font-body); font-size: 0.9375rem; margin-bottom: 0.25rem; padding: 0.125rem 0 0.125rem 2px; } /*** Chevron indicator (single-select only) ** Replaces the default CSS-border triangle with an SVG chevron. */ .choices[data-type*=select-one]::after { content: ''; height: 0.625rem; width: 0.625rem; border-style: none; /* kill the triangle */ border-width: 0; background: url("data:image/svg+xml;utf8,") no-repeat center; background-size: contain; /*right: 0.875rem;*/ right: 1rem; margin-top: -0.3125rem; /* centres the 10px icon on top:50% */ pointer-events: none; transition: transform 0.2s var(--wlm-ease); } /* When open: rotate chevron, reset the library's shifted margin */ .choices[data-type*=select-one].is-open::after { border-style: none; border-color: transparent; margin-top: -0.3125rem; transform: rotate(180deg); } /*** Dropdown list ***/ .choices .choices__list--dropdown, .choices .choices__list[aria-expanded] { background: var(--wlm-color-white); /*border: 1px solid var(--wlm-color-line);*/ /*border-top: none;*/ border-radius: 0 0 var(--wlm-r-md) var(--wlm-r-md); /*box-shadow: var(--wlm-shadow-md);*/ margin-top: -1px; z-index: 100; word-break: break-word; border: 1px solid var(--wlm-color-green); box-shadow: 0 2px 0 0.1875rem rgba(63, 94, 61, 0.12); border-top: 1px solid var(--wlm-color-line); } /* Upward-opening dropdown */ .choices.is-flipped .choices__list--dropdown, .choices.is-flipped .choices__list[aria-expanded] { border-radius: var(--wlm-r-md) var(--wlm-r-md) 0 0; border-top: 1px solid var(--wlm-color-line); border-bottom: none; margin-top: 0; margin-bottom: -1px; } /*** Search input inside dropdown ***/ .choices .choices__list--dropdown .choices__input, .choices .choices__list[aria-expanded] .choices__input { background: var(--wlm-color-cream); border-bottom: 1px solid var(--wlm-color-line); color: var(--wlm-color-ink); font-family: var(--wlm-font-body); font-size: 0.875rem; padding: 0.625rem 0.875rem; } /*** Individual option ***/ .choices .choices__list--dropdown .choices__item, .choices .choices__list[aria-expanded] .choices__item { font-size: 0.9375rem; padding: 0.625rem 0.875rem; color: var(--wlm-color-ink); transition: background 0.15s var(--wlm-ease); } /*** Highlighted (hovered / keyboard) option ***/ .choices .choices__list--dropdown .choices__item.is-highlighted, .choices .choices__list[aria-expanded] .choices__item.is-highlighted { background: var(--wlm-color-cream-deep); color: var(--wlm-color-green); } /*** Selected option ***/ .choices .choices__list--dropdown .choices__item.is-selected, .choices .choices__list[aria-expanded] .choices__item.is-selected { color: var(--wlm-color-green); font-weight: 500; } /*** Placeholder ***/ .choices .choices__placeholder { color: var(--wlm-color-mute); opacity: 1; } /*** Group heading ***/ .choices .choices__heading { font-family: var(--wlm-font-display); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wlm-color-mute); border-bottom-color: var(--wlm-color-line); padding: 0.625rem 0.875rem; } /*** Dark-section (wlm-bg-green) variant ***/ .wlm-bg-green .choices .choices__inner { background: rgba(247, 245, 238, 0.08); border-color: rgba(247, 245, 238, 0.3); color: var(--wlm-color-cream); } .wlm-bg-green .choices.is-focused .choices__inner, .wlm-bg-green .choices.is-open .choices__inner { border-color: var(--wlm-color-accent); box-shadow: 0 0 0 0.1875rem rgba(242, 201, 76, 0.18); } .wlm-bg-green .choices .choices__list--single .choices__item { color: var(--wlm-color-cream); } /* Chips on dark background - use gold so they pop */ .wlm-bg-green .choices .choices__list--multiple .choices__item { background: var(--wlm-color-gold); border-color: var(--wlm-color-gold-warm); color: var(--wlm-color-ink); } .wlm-bg-green .choices .choices__list--multiple .choices__item.is-highlighted { background: var(--wlm-color-gold-warm); border-color: var(--wlm-color-gold-warm); } .wlm-bg-green .choices .choices__button { border-left-color: rgba(31, 42, 30, 0.35); } .wlm-bg-green .choices[data-type*=select-one]::after { background-image: url("data:image/svg+xml;utf8,"); } .wlm-bg-green .choices .choices__input { background: transparent; color: var(--wlm-color-cream); } .wlm-bg-green .choices .choices__list--dropdown, .wlm-bg-green .choices .choices__list[aria-expanded] { background: var(--wlm-color-green-deep); border-color: rgba(247, 245, 238, 0.2); } .wlm-bg-green .choices .choices__list--dropdown .choices__input, .wlm-bg-green .choices .choices__list[aria-expanded] .choices__input { background: rgba(247, 245, 238, 0.06); border-bottom: 1px solid rgba(247, 245, 238, 0.15); color: var(--wlm-color-cream); } .wlm-bg-green .choices .choices__list--dropdown .choices__item, .wlm-bg-green .choices .choices__list[aria-expanded] .choices__item { color: var(--wlm-color-cream); } .wlm-bg-green .choices .choices__list--dropdown .choices__item.is-highlighted, .wlm-bg-green .choices .choices__list[aria-expanded] .choices__item.is-highlighted { background: rgba(247, 245, 238, 0.1); color: var(--wlm-color-accent); } .wlm-bg-green .choices .choices__list--dropdown .choices__item.is-selected, .wlm-bg-green .choices .choices__list[aria-expanded] .choices__item.is-selected { color: var(--wlm-color-accent); } .wlm-bg-green .choices .choices__placeholder { color: rgba(247, 245, 238, 0.5); } .wlm-bg-green .choices .choices__heading { color: rgba(247, 245, 238, 0.45); border-bottom-color: rgba(247, 245, 238, 0.15); } /* Konrad - Navbar buttons fixes */ .navbar .wlm-btn-icon { width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; background: transparent; border: 1px solid var(--wlm-color-cream); color: var(--wlm-color-cream); transition: all 0.2s; cursor: pointer; padding: 0; flex-shrink: 0; } .navbar-toggler.wlm-btn-icon { font-size: 1.25rem; margin-left: 0.5rem; } .navbar .wlm-btn-icon .bi.bi-share { font-size: 0.875rem; } .navbar .wlm-btn-icon:hover { background: var(--wlm-color-cream); color: var(--wlm-color-green); } .navbar.wlm-nav--scrolled .wlm-btn-icon { background: transparent; border-color: var(--wlm-color-line); color: var(--wlm-color-green); } .navbar.wlm-nav--scrolled .wlm-btn-icon:hover { background: var(--wlm-color-green); border-color: var(--wlm-color-green); color: var(--wlm-color-cream); } /* Add a required/recommended class to labels to render red/yellow star */ .wlm-label.required::after, .wlm-label.recommended::after, .form-label.required::after, .form-label.recommended::after { content: "*"; margin-left: 0.25rem; color: var(--bs-danger, #dc3545); font-weight: 400; } .wlm-label.recommended::after, .form-label.recommended::after { color: var(--bs-warning, #ffc107); } /* Add optional label */ .wlm-label.optional::after, .wlm-label.readonly::after, .form-label.optional::after, .form-label.readonly::after { content: "(Optional)"; margin-left: 0.25rem; color: #adb5bd; font-weight: 100; font-size: 0.75rem; } /* Add Read Only label */ .form-label.readonly::after, .wlm-label.readonly::after{ content: "(Read Only)"; } @media (min-width: 768px) { .me-6rem { margin-right: 6rem; } } @media (min-width: 1200px) and (max-width: 1399.98px) { nav.navbar .container { max-width: 100%; } } /* Schedule List */ .wlm-schedule-list__day .wlm-schedule-list__item:not(:last-child), .wlm-schedule-list__other .wlm-schedule-list__item:not(:last-child) { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; } .wlm-schedule-list__other .wlm-schedule-list__item.current { background: var(--wlm-color-cream-deep); } section.wlm-bg-cream-deep .wlm-schedule-list__other .wlm-schedule-list__item.current { background: var(--wlm-color-cream); } /* ============================================================ occasions.css Responsive image grid for the Occasion Images component. Container: .wlm-occasion__grid Child: .wlm-occasion__item Supports 1-8 items; 9+ are hidden. Uses min-width media queries (mobile-first). Uses CSS :has() to detect item count automatically. ============================================================ */ /* ============================================================ BASE (mobile-xs): 1 column, 18/6 panoramic ============================================================ */ .wlm-occasion__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .wlm-occasion__item { display: block; position: relative; overflow: hidden; border-radius: var(--bs-border-radius-lg); aspect-ratio: 18 / 6; transition: all 0.3s var(--wlm-ease); } .wlm-occasion__item:hover { box-shadow: var(--wlm-shadow-md-strong); transform: translateY(-2px); } /* Inner layout - background, overlay, and title */ .wlm-occasion__bg { position: absolute; inset: 0; } .wlm-occasion__title { font-family: var(--wlm-font-display); font-size: 1.125rem; position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; color: var(--wlm-color-cream); } .wlm-occasion__overlay { background: linear-gradient(180deg, transparent 50%, rgba(31, 42, 30, 0.85)); position: absolute; width: 100%; height: 100%; } /* 9+ items are always hidden */ .wlm-occasion__item:nth-child(n+9) { display: none; } /* ============================================================ SM >=576px: 2 columns, 1/1 square - 1 item -> full width (single column) - 3/5/7 -> last item hidden (keeps rows even) ============================================================ */ @media (min-width: 576px) { .wlm-occasion__grid { grid-template-columns: repeat(2, 1fr); } .wlm-occasion__item { aspect-ratio: 1 / 1; } /* 1 item: keep single column */ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(1):last-child) { grid-template-columns: 1fr; } /* Odd counts - hide trailing item so rows stay even */ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(3):last-child) .wlm-occasion__item:nth-child(3), .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(5):last-child) .wlm-occasion__item:nth-child(5), .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(7):last-child) .wlm-occasion__item:nth-child(7) { display: none; } } /* ============================================================ MD >=768px: 2 columns, 3/2 landscape Same even-row hide rule as sm carries through. ============================================================ */ @media (min-width: 768px) { .wlm-occasion__item { aspect-ratio: 3 / 2; } } /* ============================================================ LG+ >=992px: count-aware, max 4 per row ============================================================ */ @media (min-width: 992px) { /*** DEFAULT: 8-item layout (2 rows of 4, all 3/4 portrait) ** This is the base for 8 visible items AND for 9+ items in the DOM where extras are hidden via nth-child(n+9). Because hidden elements still count as children, :nth-child(8):last-child never matches when there are 9+ nodes, so the 8-item style must be the unconditional default. Rules for 1-7 items override it via :has(). */ .wlm-occasion__grid { grid-template-columns: repeat(4, 1fr); } .wlm-occasion__item { aspect-ratio: 3 / 4; } /* Restore items that were hidden at sm/md (odd-count rule no longer applies at lg+ because every count gets its own layout) */ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(3):last-child) .wlm-occasion__item:nth-child(3), .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(5):last-child) .wlm-occasion__item:nth-child(5), .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(7):last-child) .wlm-occasion__item:nth-child(7) { display: block; } /*** 1 item: full width, 18/6 panoramic ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(1):last-child) { grid-template-columns: 1fr; } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(1):last-child) .wlm-occasion__item { aspect-ratio: 18 / 6; } /*** 2 items: 2 per row, 3/2 landscape ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(2):last-child) .wlm-occasion__item { aspect-ratio: 3 / 2; } /*** 3 items: 3 per row, 3/2 landscape ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(3):last-child) .wlm-occasion__item { aspect-ratio: 3 / 2; } /*** 4 items: 4 per row, 3/4 portrait ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(4):last-child) .wlm-occasion__item { aspect-ratio: 3 / 4; } /*** 5 items: row 1 = 4x 3/4 | row 2 = 1 full-width 18/6 ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(5):last-child) { grid-template-columns: repeat(4, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(5):last-child) .wlm-occasion__item:nth-child(-n+4) { aspect-ratio: 3 / 4; } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(5):last-child) .wlm-occasion__item:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 18 / 6; } /*** 6 items: row 1 = 4x 3/4 | row 2 = 2x 3/2 ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(6):last-child) { grid-template-columns: repeat(4, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(6):last-child) .wlm-occasion__item:nth-child(-n+4) { aspect-ratio: 3 / 4; } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(6):last-child) .wlm-occasion__item:nth-child(n+5) { grid-column: span 2; aspect-ratio: 3 / 2; } /*** 7 items: row 1 = 4x 3/4 | row 2 = 3x 3/2 Uses a 12-col grid so both rows divide evenly: row 1: each item spans 3 of 12 (= 4 per row) row 2: each item spans 4 of 12 (= 3 per row) ***/ .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(7):last-child) { grid-template-columns: repeat(12, 1fr); } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(7):last-child) .wlm-occasion__item:nth-child(-n+4) { grid-column: span 3; aspect-ratio: 3 / 4; } .wlm-occasion__grid:has(.wlm-occasion__item:nth-child(7):last-child) .wlm-occasion__item:nth-child(n+5) { grid-column: span 4; aspect-ratio: 3 / 2; } } /*** Avatar stack (image-only, overlapping) ***/ .wlm-avatar-stack { display: flex; align-items: center; } .wlm-avatar-stack__item { border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); position: relative; z-index: 0; transition: z-index 0s; border-radius: 50%; width: 2rem; height: 2rem; object-fit: cover; } .wlm-avatar-stack__item + .wlm-avatar-stack__item { margin-left: -0.5rem; } .wlm-avatar-stack__item:hover { z-index: 10; } /* ============================================================ Occasion Block - pages -> occasions ============================================================ */ /* Image column - the linked card */ .wlm-occasion-block__image-link { display: block; border-radius: var(--bs-border-radius-lg); /* Bootstrap rounded-3 */ overflow: hidden; position: relative; height: 32.5rem; } /* Dark gradient that fades in over the bottom half of the image */ .wlm-occasion-block__image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 50%, rgba(31, 42, 30, 0.55)); } /* Italic quote pinned to the bottom-left of the image */ .wlm-occasion-block__image-caption { position: absolute; bottom: 1.5rem; left: 1.5rem; color: var(--wlm-color-cream); font-family: var(--wlm-font-display); font-style: italic; font-size: 1.125rem; max-width: 20rem; } /* Italic green tagline beneath the heading */ .wlm-occasion-block__tagline { font-family: var(--wlm-font-display); font-style: italic; font-size: 1.0625rem; /* wlm-fs-17 */ color: var(--wlm-color-green); } /* Body copy paragraph beneath the tagline */ .wlm-occasion-block__desc { color: var(--wlm-color-ink-soft); } /* "Best in" venue grid wrapper */ .wlm-occasion-block__venue-grid { border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: #fff; } /* Each venue row item (pairs with col-6) */ .wlm-occasion-block__venue-item { display: flex; align-items: baseline; } /* Location pin icon inside venue items */ .wlm-occasion-block__venue-item i { font-size: 11px; flex-shrink: 0; } /* Venue name */ .wlm-occasion-block__venue-title { font-family: var(--wlm-font-display); font-size: 0.875rem; } /* Venue capacity note */ .wlm-occasion-block__venue-capacity { font-size: 0.875em; color: var(--wlm-color-mute); } /* CTA row - link + button, right-aligned */ .wlm-occasion-block__actions { display: flex; justify-content: flex-start; align-items: center; } @media (min-width: 992px) { .wlm-occasion-block__container > article:nth-child(even) > div:first-child, .wlm-spaces-block__container > article:nth-child(even) > div:first-child, .wlm-practitioner-block__container > article:nth-child(even) > div:first-child { order: 2 !important; } .wlm-occasion-block__container > article:nth-child(even) > div:last-child, .wlm-spaces-block__container > article:nth-child(even) > div:last-child, .wlm-practitioner-block__container > article:nth-child(even) > div:last-child { order: 1 !important; } } /* ============================================================ Space Block - pages -> spaces ============================================================ */ /* Image column - the linked card */ .wlm-spaces-block__image-link { display: block; border-radius: var(--bs-border-radius-lg); overflow: hidden; height: 28.75rem; } /* Body copy paragraph */ .wlm-spaces-block__desc { color: var(--wlm-color-ink-soft); } /* Pill/tag wrapper */ .wlm-spaces-block__tags { display: flex; flex-wrap: wrap; } /* CTA row - link + button, right-aligned */ .wlm-spaces-block__actions { display: flex; justify-content: flex-end; align-items: center; } /* ============================================================= Practitioner Blocks · practitioner-blocks.css Scoped component styles for .wlm-practitioner-block__container ============================================================= */ /*** Article row ***/ .wlm-practitioner-block__container article { align-items: stretch; } /*** Practitioner image ***/ .wlm-practitioner-block__container .practitioner-image a { display: block; height: 100%; } .wlm-practitioner-block__container .practitioner-image a > div { border-radius: var(--bs-border-radius-lg); overflow: hidden; height: 100%; min-height: 28.75rem; } /*** Practitioner details ***/ .wlm-practitioner-block__container .practitioner-details { display: flex; flex-direction: column; } /* Eyebrow - mirrors .wlm-eyebrow */ .wlm-practitioner-block__container .practitioner-details > span { font-family: var(--wlm-font-body); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wlm-color-green); display: block; } /* Heading - mirrors .wlm-display-md */ .wlm-practitioner-block__container .practitioner-details > h3 { font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; margin-top: 0.5rem; margin-bottom: 1rem; } /* Body copy - mirrors .wlm-text-soft */ .wlm-practitioner-block__container .practitioner-details > p { color: var(--wlm-color-ink-soft); margin-bottom: 0.5rem; } /* Read-more arrow icon - mirrors .ms-2 + adds hover nudge */ .wlm-practitioner-block__container .practitioner-details > a { width: fit-content; } .wlm-practitioner-block__container .practitioner-details > a > i { margin-left: 0.5rem; display: inline-block; transition: transform 0.2s var(--wlm-ease); } .wlm-practitioner-block__container .practitioner-details > a:hover > i { transform: translateX(4px); } /*** Practitioner programs ***/ /* Label - mirrors .wlm-label */ .wlm-practitioner-block__container .practitioner-programs > span, .wlm-practitioner-block__container .practitioner-schedule > span { font-family: var(--wlm-font-body); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wlm-color-mute); font-weight: 500; display: block; margin-bottom: 0.5rem; } /* Pill row - mirrors .d-flex .flex-wrap */ .wlm-practitioner-block__container .practitioner-programs > div { display: flex; flex-wrap: wrap; } .child-border-bottom-not-last > div:not(:last-child), .child-border-bottom-not-last > a:not(:last-of-type) { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); } /* Program Aside */ .wlm-program-aside .wlm-program-aside__items > a { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; border-bottom: none; } .wlm-program-aside .wlm-program-aside__items > a:not(:last-of-type) { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); } .wlm-program-aside .wlm-program-aside__items > a > img.rounded-circle, .wlm-program-aside .wlm-program-aside__items > a > div.rounded-2 { width: 3.5rem; height: 3.5rem; object-fit: cover; } .wlm-schedule-practitioners:hover { background-color: var(--wlm-color-cream-deep); } /*.wlm-user-title*/ /* Disable select text if empty */ .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text=""]::after { display: none; }