/* ============================================================ 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} .aspot-feat-facts{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px} .aspot-feat-facts li{border-top:1px solid var(--line);padding-top:11px; 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)}