/* ============================================================ Preserve A Spot — homepage blocks: countdown + featured band Matches the "Night at the Lodge" master. Dark by default; the site-wide sun/moon toggle puts .lodge-light on . ============================================================ */ .aspot-hero,.aspot-feat{ --ink:#151210; --ink-2:#1b1712; --gold:#c9a159; --gold-lt:#e2c483; --paper:#f3ecdd; --bone:#cbc0aa; --mut:#8c8474; --line:rgba(201,161,89,.18); --disp:"Playfair Display",Georgia,serif; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Montserrat",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; display:block;background:var(--ink);color:var(--paper);font-family:var(--sans); } .aspot-hero *,.aspot-feat *{box-sizing:border-box} /* Divi's column/module can impose text-align:center and a border; the blocks own their own alignment and framing, so neutralise anything inherited. */ .aspot-hero,.aspot-feat,.aspot-hero-in,.aspot-hero-copy,.aspot-feat-copy{text-align:left} .aspot-hero-in>*,.aspot-feat-copy>*{border-width:0} .aspot-hero a,.aspot-feat a{text-decoration:none;color:inherit} /* shared button */ /* Renamed from .aspot-btn at 0.14.0: the single-event stylesheet defines .aspot-btn too, and where both loaded the featured band's CTA rendered as an empty outlined box — the background and the label were being overridden. This class is unique to the homepage blocks. */ .aspot-bbtn{display:inline-flex;align-items:center;justify-content:center; align-self:flex-start;width:max-content;max-width:100%;text-align:center; font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase; background:var(--gold);color:#1c150a;border:1px solid var(--gold);padding:15px 28px; transition:background .18s,border-color .18s,color .18s} .aspot-hero .aspot-bbtn:hover,.aspot-hero .aspot-bbtn:focus, .aspot-feat a:hover .aspot-bbtn,.aspot-feat .aspot-bbtn:focus{background:transparent;color:var(--gold-lt);border-color:var(--gold-lt);outline:none} /* ---------- hero + next-up card ---------- Matches the design master: a FIXED establishing image with a standing headline, and the next event in a glass card at the right. The previous version made the next event's own image the hero, so the page led with whatever happened to be next — usually a recurring tour — and changed character weekly. */ .aspot-hero{position:relative;min-height:var(--aspot-hero-h,86vh); display:flex;align-items:flex-end;overflow:hidden;isolation:isolate} .aspot-hero-bg{position:absolute;inset:0;z-index:0} .aspot-hero-bg img{width:100%;height:100%;object-fit:cover;display:block} .aspot-hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,12,9,.55) 0%,rgba(15,12,9,.18) 36%,rgba(15,12,9,.82) 80%,#15120e 100%)} .aspot-hero-in{position:relative;z-index:2;width:min(1280px,92vw);margin:0 auto; padding:0 0 clamp(46px,6vw,86px);display:grid;grid-template-columns:1.32fr .68fr; gap:clamp(26px,3.4vw,46px);align-items:end;text-align:left} .aspot-hero.no-card .aspot-hero-in{grid-template-columns:1fr} .aspot-hero-eye{font-family:var(--mono);font-size:12px;letter-spacing:.4em; text-transform:uppercase;color:var(--gold);display:flex;align-items:center; gap:14px;margin-bottom:22px} .aspot-hero-eye::before{content:"";width:46px;height:1px;background:var(--gold);flex:none} .aspot-hero h1{font-family:var(--disp);font-weight:500;font-size:clamp(46px,7.4vw,96px); line-height:.96;margin:0;letter-spacing:-.015em;color:#fbf6ec; text-shadow:0 2px 34px rgba(0,0,0,.45)} .aspot-hero h1 em{font-style:italic;color:var(--gold)} .aspot-hero-sub{font-family:var(--serif);font-size:clamp(20px,2.3vw,27px);color:#d9cfba; margin:20px 0 0;max-width:42ch;line-height:1.4} .aspot-nextcard{background:rgba(28,23,17,.74);backdrop-filter:blur(10px); border:1px solid rgba(201,161,89,.28);padding:26px 26px 24px} .aspot-nextcard .lab{font-family:var(--mono);font-size:10px;letter-spacing:.26em; text-transform:uppercase;color:var(--gold);margin-bottom:12px} .aspot-nextcard h3{font-family:var(--disp);font-weight:500;font-size:23px;line-height:1.12; margin:0 0 16px;color:#fbf6ec} .aspot-nextcard h3 a{color:inherit;text-decoration:none} .aspot-nextcard h3 a:hover,.aspot-nextcard h3 a:focus{color:var(--gold-lt);outline:none} .aspot-nextcard .meta{font-family:var(--serif);font-size:17px;color:#cabfa9; display:flex;flex-direction:column;gap:3px;margin:18px 0} .aspot-nextcard .meta .cost{font-family:var(--sans);font-weight:700;font-size:12px; color:#1c150a;background:var(--gold);padding:3px 9px;align-self:flex-start;margin-top:5px} /* the button belongs to the card — it used to sit loose in the band and drift to the far left edge of the page */ .aspot-nextcard .aspot-bbtn{width:100%;justify-content:center;margin:0} .aspot-cd-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .aspot-cd-clock .u{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.07); padding:11px 4px;text-align:center;display:flex;flex-direction:column;gap:6px} .aspot-cd-clock .n{font-family:var(--disp);font-weight:600;font-size:31px;line-height:1; color:var(--gold);font-variant-numeric:tabular-nums} .aspot-cd-clock .l{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em; text-transform:uppercase;color:#a59c8c} .aspot-cd-clock.is-live .n{color:var(--gold-lt)} @media(max-width:880px){ .aspot-hero{min-height:0} .aspot-hero-in{grid-template-columns:1fr;padding:clamp(56px,12vw,90px) 0 clamp(34px,6vw,50px)} .aspot-nextcard{max-width:420px} } /* ---------- featured band ---------- */ .aspot-feat{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .aspot-feat-in{width:min(1280px,92vw);margin-inline:auto; padding:clamp(40px,5vw,70px) 0;display:grid;grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px);align-items:center} .aspot-feat-img{position:relative;aspect-ratio:4/3;overflow:hidden; border:1px solid var(--line);background:var(--ink-2)} .aspot-feat-img img{width:100%;height:100%;object-fit:cover; filter:saturate(.94) brightness(.9);transition:transform .6s,filter .35s} .aspot-feat-in:hover .aspot-feat-img img{transform:scale(1.05);filter:saturate(1.02) brightness(.98)} .aspot-feat-date{position:absolute;top:16px;left:16px;z-index:2; background:rgba(13,10,7,.66);backdrop-filter:blur(4px); border:1px solid rgba(201,161,89,.34);padding:9px 13px;text-align:center; display:flex;flex-direction:column;gap:4px;line-height:1} .aspot-feat-date .mo{font:500 9.5px/1 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--gold)} .aspot-feat-date .d{font-family:var(--disp);font-weight:600;font-size:24px;color:#fbf6ec} .aspot-feat-eyebrow{display:block;font:600 11px/1 var(--sans);letter-spacing:.3em; text-transform:uppercase;color:var(--gold)} .aspot-feat-cat{display:inline-flex;align-items:center;gap:8px;margin-top:14px; font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone)} .aspot-feat-cat i{width:7px;height:7px;border-radius:50%;flex:none} .aspot-feat-copy h2{margin:12px 0 0;font-family:var(--disp);font-weight:600; font-size:clamp(27px,3.4vw,44px);line-height:1.06;color:#fbf6ec;letter-spacing:-.01em} .aspot-feat-in:hover .aspot-feat-copy h2{color:var(--gold-lt)} .aspot-feat-lede{margin:14px 0 0;font-family:var(--serif);font-style:italic; font-size:clamp(16px,1.6vw,19px);line-height:1.5;color:var(--bone);max-width:52ch} /* Divi applies a list-style to li directly, so clearing it on the ul is not enough — the When / Where / From rows rendered with bullets. Same fix as the nav menus. */ .aspot-feat-facts,.aspot-feat-facts li{list-style:none!important} .aspot-feat-facts li::marker,.aspot-feat-facts li::before{content:none!important;display:none!important} .aspot-feat-facts{margin:24px 0 0!important;padding:0!important;display:grid;gap:13px} .aspot-feat-facts li{border-top:1px solid var(--line);padding:11px 0 0!important;margin:0!important; font-size:14.5px;color:var(--paper)} .aspot-feat-facts span{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin-bottom:6px} .aspot-feat-copy .aspot-bbtn{margin-top:28px;color:#1c150a} @media(max-width:820px){ .aspot-feat-in{grid-template-columns:1fr} .aspot-feat-img{aspect-ratio:16/10} } /* ============================================================ LIGHT MODE — the site-wide toggle puts .lodge-light on ============================================================ */ html.lodge-light .aspot-hero,html.lodge-light .aspot-feat{background:#faf6ed;color:#4a4438} html.lodge-light .aspot-cd-bg{filter:saturate(.92) brightness(.95)} html.lodge-light .aspot-cd::after{background:linear-gradient(90deg,rgba(250,246,237,.95) 0%,rgba(250,246,237,.8) 48%,rgba(250,246,237,.55) 100%)} html.lodge-light .aspot-cd.no-img::after{background:radial-gradient(120% 140% at 12% 20%,rgba(143,36,24,.06),transparent 55%)} html.lodge-light .aspot-cd-eyebrow,html.lodge-light .aspot-feat-eyebrow{color:#8f2418} html.lodge-light .aspot-cd-title,html.lodge-light .aspot-feat-copy h2, html.lodge-light .aspot-cd-clock .n,html.lodge-light .aspot-feat-date .d{color:#1c1a17} html.lodge-light .aspot-cd-when,html.lodge-light .aspot-feat-lede, html.lodge-light .aspot-cd-cat,html.lodge-light .aspot-feat-cat{color:#6a6253} html.lodge-light .aspot-cd-clock{background:rgba(28,26,23,.14);border-color:rgba(28,26,23,.14)} html.lodge-light .aspot-cd-clock .u{background:rgba(255,255,255,.72)} html.lodge-light .aspot-cd-clock .l,html.lodge-light .aspot-feat-date .mo, html.lodge-light .aspot-feat-facts span{color:#8f2418} html.lodge-light .aspot-feat{border-color:rgba(28,26,23,.12)} html.lodge-light .aspot-feat-facts li{border-top-color:rgba(28,26,23,.12);color:#4a4438} html.lodge-light .aspot-feat-img,html.lodge-light .aspot-feat-date{border-color:rgba(28,26,23,.14)} html.lodge-light .aspot-bbtn{background:#8f2418;border-color:#8f2418;color:#faf6ed} html.lodge-light .aspot-cd a:hover .aspot-bbtn,html.lodge-light .aspot-cd .aspot-bbtn:hover, html.lodge-light .aspot-feat-in:hover .aspot-bbtn{background:transparent;color:#8f2418;border-color:#8f2418} html.lodge-light .aspot-cd-cost{background:#8f2418;color:#faf6ed} html.lodge-light .aspot-cd-mem{color:#8f2418;border-color:rgba(143,36,24,.4)} html.lodge-light .aspot-cd-title a:hover,html.lodge-light .aspot-feat-in:hover .aspot-feat-copy h2{color:#8f2418} @media(prefers-reduced-motion:reduce){ .aspot-feat-img img{transition:none} } /* light mode — hero. The image ground stays dark for legibility; only the page chrome under it flips, matching the master. */ html.lodge-light .aspot-hero-bg::after{background:linear-gradient(180deg,rgba(15,12,9,.5) 0%,rgba(15,12,9,.15) 36%,rgba(20,16,12,.7) 80%,#faf6ed 100%)} html.lodge-light .aspot-hero h1,html.lodge-light .aspot-hero-sub{color:#fbf6ec} html.lodge-light .aspot-nextcard{background:rgba(24,20,15,.8)} /* ---- featured slider (0.48.0) ---- */ .aspot-feat.is-slider{position:relative} .aspot-feat-track{display:grid} /* every slide occupies the same cell, so the band never jumps height between a short title and a long one */ .aspot-feat.is-slider .aspot-feat-in{grid-area:1/1;transition:opacity .32s ease} .aspot-feat.is-slider .aspot-feat-in.is-off{opacity:0;pointer-events:none} /* the controls sat below the whole band, marooned between the band and the filter bar. They now sit in the band's own left column, centred under the image, and the band's bottom padding is pulled back so they read as part of the image block. */ .aspot-feat-nav{width:min(1280px,92vw);margin:0 auto;display:grid; grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px); margin-top:calc(-1 * clamp(40px,5vw,70px) + 4px);padding-bottom:clamp(34px,4.4vw,58px); position:relative;z-index:2} .aspot-feat-navgrp{grid-column:1;display:flex;align-items:center;justify-content:center;gap:16px} @media(max-width:820px){ .aspot-feat-nav{grid-template-columns:1fr;margin-top:0;padding-bottom:clamp(26px,5vw,40px)} .aspot-feat-navgrp{grid-column:1} } .aspot-feat-nav button{background:transparent;border:1px solid var(--line,rgba(201,161,89,.22)); color:var(--gold,#c9a159);width:42px;height:42px;border-radius:0;cursor:pointer; font-family:"JetBrains Mono",monospace;font-size:17px;line-height:1; display:inline-flex;align-items:center;justify-content:center;transition:.18s} .aspot-feat-nav button:hover,.aspot-feat-nav button:focus-visible{ background:var(--gold,#c9a159);color:#1c150a;border-color:var(--gold,#c9a159);outline:none} .aspot-feat-dots{display:flex;align-items:center;gap:9px} .aspot-feat-dots button{width:9px;height:9px;min-width:0;padding:0;border-radius:50%; border:1px solid var(--gold,#c9a159);background:transparent} .aspot-feat-dots button.on{background:var(--gold,#c9a159)} .aspot-feat-dots button:hover{background:var(--gold,#c9a159)} @media(prefers-reduced-motion:reduce){.aspot-feat.is-slider .aspot-feat-in{transition:none}} html.lodge-light .aspot-feat-nav button{border-color:rgba(28,26,23,.16);color:#8f2418} html.lodge-light .aspot-feat-nav button:hover,html.lodge-light .aspot-feat-nav button:focus-visible{ background:#8f2418;color:#faf6ed;border-color:#8f2418} html.lodge-light .aspot-feat-dots button{border-color:#8f2418} html.lodge-light .aspot-feat-dots button.on,html.lodge-light .aspot-feat-dots button:hover{background:#8f2418} /* pause / play — drawn in CSS, no icon font */ .aspot-feat-play .ic{position:relative;display:block;width:11px;height:12px} .aspot-feat-play .ic::before,.aspot-feat-play .ic::after{content:"";position:absolute;top:0; width:3.5px;height:12px;background:currentColor;transition:.18s} .aspot-feat-play .ic::before{left:0} .aspot-feat-play .ic::after{right:0} /* paused state shows a play triangle instead of the two bars */ .aspot-feat-play.is-paused .ic::before{left:1px;width:0;height:0;background:transparent; border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent} .aspot-feat-play.is-paused .ic::after{display:none} /* pause control: present for keyboard and AT, out of the way otherwise */ .aspot-feat-play{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .aspot-feat-play:focus-visible{position:static;width:42px;height:42px;clip-path:none; overflow:visible;border:1px solid var(--gold,#c9a159)}