/* ========================================================================== GRINDHOUSE NASHVILLE — BRAND FOUNDATION v2 Paste into: Divi → Theme Options → General → Custom CSS (or your child theme's style.css) Design system is built out of the badge itself: · the hexagon's pointed ends → chevron section edges, no square boxes · six guitar strings → the connective rule between sections · the lightning bolts → dividers and list markers · the distressed letterpress → grain overlay on dark grounds Everything scoped under .gh so it cannot collide with the Divi theme. Every page's Code module needs .gh on its outermost div. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* -------------------------------------------------------------------------- BRIXTON -- the logo face. Served from /uploads/fonts/brixton-wood.woff2 (147KB, subset to the characters this site actually uses). The old TTF Divi serves from /uploads/et-fonts/ is 669KB and uncompressed on the wire; it stays only as a fallback in case the woff2 ever goes missing. A for the woff2 lives in Divi > Theme Options > Integration, in the box. It starts the download before this stylesheet is even parsed, which is what removes the flash of Arial Narrow on first load. If the font path here ever changes, change it there too or the preload silently fetches a file nothing uses. -------------------------------------------------------------------------- */ @font-face{ font-family:"Brixton Wood"; src:url("https://www.grindhousenashville.com/wp-content/uploads/fonts/brixton-wood.woff2") format("woff2"), url("https://www.grindhousenashville.com/wp-content/uploads/et-fonts/Brixton_Wood-Vector.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } /* Brixton Lead was never uploaded. Pointing it at the same file is what the browser already ends up doing via the fallback stack, minus a failed request on every page load. Swap in a real Lead file here if one arrives. */ @font-face{ font-family:"Brixton Lead"; src:url("https://www.grindhousenashville.com/wp-content/uploads/fonts/brixton-wood.woff2") format("woff2"), url("https://www.grindhousenashville.com/wp-content/uploads/et-fonts/Brixton_Wood-Vector.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } :root{ /* --- core, sampled from the badge --- */ --gh-red: #C5352A; --gh-ink: #1F1B1A; --gh-bone: #E9E6D3; /* --- accessible extensions --- */ --gh-red-deep: #A82A20; --gh-red-light: #E0705E; --gh-red-press: #8F231B; --gh-ink-deep: #14100F; --gh-ink-soft: #5C5551; --gh-ink-line: #39322F; --gh-bone-soft: #B5AFA0; --gh-bone-lift: #F4F2E6; --gh-bone-line: #C6C1AC; --gh-amber: #E8A33D; /* stage light — glow only, never type */ /* Brixton Wood is the distressed cut used in the badge — big sizes only. Brixton Lead is the cleaner cut — headings, labels, buttons. Barlow carries all running text; Brixton is a display face, not a reading face. Brixton has NO middle dot (·) and no diamond (◆) — use the bullet (•) or the .gh-bolt element instead, or you'll get tofu. */ --gh-display: "Brixton Wood","Grindhouse Nashville Brixton Wood","Oswald","Arial Narrow Bold",sans-serif; --gh-head: "Brixton Lead","Brixton Wood","Grindhouse Nashville Brixton Wood","Oswald","Arial Narrow",Helvetica,sans-serif; --gh-body: "Barlow",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --gh-max: 1180px; --gh-pad: clamp(20px,5vw,48px); --gh-chev: clamp(28px,4.5vw,64px); /* chevron drop */ } /* -------------------------------------------------------------------------- RESET — undo Divi's global typography, inside .gh only -------------------------------------------------------------------------- */ .gh,.gh *{ box-sizing:border-box; } .gh{ font-family:var(--gh-body); font-size:18px; line-height:1.62; color:var(--gh-ink); background:var(--gh-bone); overflow-x:hidden; } .gh p{ margin:0 0 1em; padding:0; } .gh h1,.gh h2,.gh h3,.gh h4{ margin:0; padding:0; font-weight:400; } .gh ul,.gh ol{ margin:0; padding:0; list-style:none; } .gh li{ margin:0; } .gh img{ max-width:100%; height:auto; display:block; } .gh a{ color:var(--gh-red-deep); text-decoration:none; } .gh a:hover{ text-decoration:underline; } .gh a:focus-visible,.gh button:focus-visible,.gh input:focus-visible{ outline:3px solid var(--gh-amber); outline-offset:3px; } /* Divi wraps Code modules in a padded row — kill it for full-bleed */ .et_pb_section.gh-fullwidth, .et_pb_row.gh-fullwidth, .et_pb_module.gh-fullwidth{ padding:0 !important; margin:0 !important; width:100% !important; max-width:100% !important; } /* -------------------------------------------------------------------------- GRAIN — the letterpress texture off the logo. Dark grounds only. -------------------------------------------------------------------------- */ .gh-grain::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.42; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- LAYOUT + CHEVRON SECTIONS -------------------------------------------------------------------------- */ .gh-wrap{ max-width:var(--gh-max); margin:0 auto; padding:0 var(--gh-pad); position:relative; z-index:3; } .gh-band{ position:relative; padding:clamp(64px,9vw,116px) 0; } .gh-band--ink { background:var(--gh-ink); color:var(--gh-bone); } .gh-band--deep{ background:var(--gh-ink-deep); color:var(--gh-bone); } .gh-band--bone{ background:var(--gh-bone); color:var(--gh-ink); } .gh-band--lift{ background:var(--gh-bone-lift);color:var(--gh-ink); } .gh-band--red { background:var(--gh-red); color:var(--gh-bone-lift); } .gh-band--ink p,.gh-band--deep p{ color:var(--gh-bone-soft); } .gh-band--ink a,.gh-band--deep a{ color:var(--gh-red-light); } .gh-band--red p{ color:rgba(244,242,230,.9); } .gh-band--red a{ color:var(--gh-bone-lift); } /* the chevron divider — an inverted badge point between two bands. background = colour ABOVE, path fill = colour BELOW. */ .gh-chev{ display:block; line-height:0; position:relative; z-index:3; } .gh-chev svg{ display:block; width:100%; height:var(--gh-chev); } .gh-chev--pad{ padding-top:0; } /* extra breathing room where a chevron eats into a band */ .gh-band--after-chev{ padding-top:clamp(40px,6vw,72px); } .gh-grid{ display:grid; gap:clamp(26px,4vw,46px); } .gh-grid--3{ grid-template-columns:1fr; } @media (min-width:820px){ .gh-grid--3{ grid-template-columns:repeat(3,1fr); } } .gh-grid--4{ grid-template-columns:repeat(2,1fr); gap:14px; } @media (min-width:820px){ .gh-grid--4{ grid-template-columns:repeat(4,1fr); } } /* -------------------------------------------------------------------------- TYPE -------------------------------------------------------------------------- */ .gh-h1{ font-family:var(--gh-display); font-size:clamp(3.9rem,15vw,10.5rem); line-height:.84; letter-spacing:-.015em; text-transform:uppercase; text-wrap:balance; } .gh-h2{ color:var(--gh-ink); font-family:var(--gh-head); font-weight:400; font-size:clamp(2rem,5vw,3.4rem); line-height:1.04; letter-spacing:.005em; text-transform:uppercase; text-wrap:balance; margin-bottom:.4em; } /* Divi styles h2 globally at #666, and an INHERITED colour always loses to a direct rule -- so .gh-h2 has to state its own. Light bands get ink above; every dark container is listed here. Add new dark sections to this list. */ .gh-band--ink .gh-h2, .gh-band--deep .gh-h2, .gh-band--red .gh-h2, .gh-hero .gh-h2, .gh-opry .gh-h2, .gh-eventstrip .gh-h2, .gh-foot .gh-h2{ color:var(--gh-bone); } .gh-h3{ color:var(--gh-ink); font-family:var(--gh-head); font-weight:400; font-size:clamp(1.4rem,2.7vw,1.75rem); line-height:1.16; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.5em; } .gh-band--ink .gh-h3, .gh-band--deep .gh-h3, .gh-band--red .gh-h3, .gh-hero .gh-h3, .gh-opry .gh-h3, .gh-eventstrip .gh-h3{ color:var(--gh-bone); } .gh-eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--gh-head); font-weight:400; font-size:clamp(16px,1.7vw,20px); text-transform:uppercase; letter-spacing:.2em; color:var(--gh-red-deep); margin-bottom:1.1em; } .gh-eyebrow::before{ content:""; flex:none; width:18px; height:23px; background:currentColor; clip-path:polygon(56% 0,0 58%,40% 58%,44% 100%,100% 42%,60% 42%); } .gh-band--ink .gh-eyebrow,.gh-band--deep .gh-eyebrow{ color:var(--gh-red-light); } .gh-band--red .gh-eyebrow{ color:var(--gh-bone-lift); } .gh-lede{ font-size:clamp(1.18rem,2.1vw,1.42rem); line-height:1.5; max-width:56ch; } .gh-center{ text-align:center; } .gh-center .gh-eyebrow{ justify-content:center; } .gh-center .gh-lede{ margin-left:auto; margin-right:auto; } /* the badge's lightning bolt, as a reusable element — Brixton has no middle dot or diamond, so separators are drawn, never typed */ .gh-bolt{ display:inline-block; flex:none; width:.62em; height:.78em; background:currentColor; vertical-align:-.06em; clip-path:polygon(56% 0,0 58%,40% 58%,44% 100%,100% 42%,60% 42%); } /* -------------------------------------------------------------------------- SCROLL REVEAL -------------------------------------------------------------------------- */ .gh-rise{ opacity:0; transform:translateY(26px); } .gh-rise.is-in{ opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1); transition-delay:calc(var(--i,0) * 90ms); } /* -------------------------------------------------------------------------- BUTTONS — a true parallelogram (skewed box, unskewed label) so the border stays whole. `.gh .gh-btn` outranks the `.gh a` reset. -------------------------------------------------------------------------- */ .gh .gh-btn{ display:inline-block; font-family:var(--gh-head); font-weight:400; font-size:clamp(1.15rem,1.5vw,1.3rem); text-transform:uppercase; letter-spacing:.09em; padding:17px 36px; border:2px solid var(--gh-red); background:var(--gh-red); color:var(--gh-bone-lift); cursor:pointer; transform:skewX(-9deg); transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease; } .gh .gh-btn > span{ display:inline-block; transform:skewX(9deg); } .gh .gh-btn:hover{ background:var(--gh-red-press); border-color:var(--gh-red-press); color:#fff; text-decoration:none; transform:skewX(-9deg) translateY(-3px); } .gh .gh-btn--ghost{ background:transparent; border-color:currentColor; color:inherit; } .gh .gh-btn--ghost:hover{ background:currentColor; border-color:currentColor; color:var(--gh-ink); } .gh-btns{ display:flex; flex-wrap:wrap; gap:18px; } /* -------------------------------------------------------------------------- MARQUEE — the venue marquee, running -------------------------------------------------------------------------- */ .gh-marquee{ position:relative; overflow:hidden; background:var(--gh-red); color:var(--gh-bone-lift); border-top:3px solid var(--gh-ink); border-bottom:3px solid var(--gh-ink); padding:16px 0; } .gh-marquee__track{ display:flex; width:max-content; will-change:transform; animation:gh-roll 38s linear infinite; } .gh-marquee:hover .gh-marquee__track{ animation-play-state:paused; } .gh-marquee__set{ display:flex; align-items:center; flex:none; } .gh-marquee__set span{ font-family:var(--gh-head); font-weight:400; text-transform:uppercase; letter-spacing:.16em; font-size:clamp(16px,2vw,20px); white-space:nowrap; padding:0 24px; } .gh-marquee__set i{ flex:none; width:15px; height:19px; background:currentColor; opacity:.75; clip-path:polygon(56% 0,0 58%,40% 58%,44% 100%,100% 42%,60% 42%); } @keyframes gh-roll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .gh-marquee--quiet{ background:transparent; color:var(--gh-bone-soft); border:0; border-top:1px solid var(--gh-ink-line); border-bottom:1px solid var(--gh-ink-line); } .gh-marquee--quiet .gh-marquee__track{ animation-duration:64s; } /* -------------------------------------------------------------------------- HERO -------------------------------------------------------------------------- */ .gh-hero{ position:relative; overflow:hidden; min-height:min(94vh,860px); min-height:min(94dvh,860px); display:flex; flex-direction:column; justify-content:flex-end; background:var(--gh-ink-deep); } .gh-hero__media{ position:absolute; inset:0; z-index:0; } .gh-hero__media picture,.gh-opry__media picture,.gh-shot picture{ display:contents; } .gh-hero__media img,.gh-hero__media video{ width:100%; height:100%; object-fit:cover; filter:saturate(.82) brightness(.72) contrast(1.06); } .gh-hero__scrim{ position:absolute; inset:0; z-index:1; background: radial-gradient(56% 42% at 50% 6%, rgba(232,163,61,.20) 0%, transparent 66%), linear-gradient(95deg, rgba(20,16,15,.95) 0%, rgba(20,16,15,.86) 30%, rgba(20,16,15,.42) 62%, rgba(20,16,15,.30) 100%), linear-gradient(to top, rgba(20,16,15,.96) 0%, rgba(20,16,15,.72) 34%, rgba(20,16,15,.34) 70%, rgba(20,16,15,.62) 100%); animation:gh-breathe 11s ease-in-out infinite alternate; } @keyframes gh-breathe{ from{opacity:.94} to{opacity:1} } /* the six strings */ /* the string band sits in normal flow now, between the copy and the social row */ .gh-strings{ position:relative; z-index:2; width:100%; height:clamp(92px,13vh,152px); pointer-events:auto; cursor:crosshair; touch-action:pan-y; /* a swipe always scrolls; taps still strum */ } .gh-strings canvas{ display:block; width:100%; height:100%; } .gh-hero__inner{ position:relative; z-index:3; width:100%; padding:clamp(110px,15vw,170px) 0 clamp(22px,3.2vh,38px); } /* social sits directly beneath the strings, at the foot of the hero */ .gh-hero__social{ position:relative; z-index:4; width:100%; padding:clamp(14px,2.2vh,24px) 0 clamp(26px,4vh,46px); } .gh-hero__badge{ width:clamp(140px,20vw,210px); margin-bottom:clamp(22px,3vw,32px); filter:drop-shadow(0 10px 28px rgba(0,0,0,.6)); } .gh-hero .gh-h1{ color:var(--gh-bone); margin-bottom:.24em; } .gh-hero .gh-h1 .gh-word{ display:block; overflow:hidden; } .gh-hero .gh-h1 .gh-word > span{ display:block; transform:translateY(105%); animation:gh-drop .95s cubic-bezier(.16,.9,.28,1) forwards; } .gh-hero .gh-h1 .gh-word:nth-child(2) > span{ animation-delay:.13s; } .gh-hero .gh-h1 em{ font-style:normal; color:var(--gh-red-light); } @keyframes gh-drop{ to{ transform:translateY(0); } } .gh-hero .gh-eyebrow{ font-size:clamp(17px,2.1vw,23px); letter-spacing:.17em; margin-bottom:.9em; } .gh-hero .gh-lede{ color:var(--gh-bone); margin-bottom:1.6em; font-size:clamp(1.22rem,2.2vw,1.5rem); } .gh-hero .gh-btn--ghost{ color:var(--gh-bone); } .gh-hero .gh-btn--ghost:hover{ background:var(--gh-bone); color:var(--gh-ink); } /* -------------------------------------------------------------------------- STATS — count up, bolt separators -------------------------------------------------------------------------- */ .gh-stats{ display:grid; grid-template-columns:repeat(2,1fr); max-width:var(--gh-max); margin:0 auto; padding:0 var(--gh-pad); } @media (min-width:900px){ .gh-stats{ grid-template-columns:repeat(4,1fr); } } .gh-stat{ position:relative; padding:34px 18px; text-align:center; } .gh-stat + .gh-stat::before{ content:""; position:absolute; left:0; top:50%; transform:translate(-50%,-50%); width:15px; height:19px; background:var(--gh-red); opacity:.9; clip-path:polygon(56% 0,0 58%,40% 58%,44% 100%,100% 42%,60% 42%); } @media (max-width:899px){ .gh-stat:nth-child(odd)::before{ display:none; } } .gh-stat b{ display:block; font-family:var(--gh-display); font-weight:400; font-size:clamp(2.6rem,6vw,4.2rem); line-height:1; color:var(--gh-bone); font-variant-numeric:tabular-nums; } .gh-stat span{ display:block; margin-top:14px; font-family:var(--gh-head); font-weight:400; text-transform:uppercase; letter-spacing:.09em; font-size:clamp(16px,1.8vw,21px); line-height:1.35; color:var(--gh-bone-soft); } /* -------------------------------------------------------------------------- ANGLED FEATURE ROWS — replaces the three equal boxes -------------------------------------------------------------------------- */ .gh-reasons{ display:grid; gap:clamp(30px,4vw,52px); } @media (min-width:820px){ .gh-reasons{ grid-template-columns:repeat(3,1fr); } } .gh-reason{ position:relative; padding-top:30px; } .gh-reason::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--gh-red); clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,18px 100%); transition:transform .3s ease; transform-origin:left center; } .gh-reason:hover::before{ transform:scaleX(1.04); } .gh-reason .gh-h3{ margin-bottom:.45em; } /* -------------------------------------------------------------------------- POSTER TYPE — the alumni wall, set like a festival bill -------------------------------------------------------------------------- */ .gh-poster{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.16em .5em; text-align:center; font-family:var(--gh-display); text-transform:uppercase; line-height:.98; color:var(--gh-ink); } /* the poster sits on a light band by default; these put it back to bone whenever it is dropped onto a dark one. Without the light default the big names render bone-on-bone and simply do not appear. */ .gh-band--ink .gh-poster, .gh-band--deep .gh-poster, .gh-hero .gh-poster, .gh-opry .gh-poster{ color:var(--gh-bone); } .gh-poster b{ font-weight:400; } .gh-poster .t1{ font-size:clamp(2.4rem,8.4vw,6rem); } .gh-poster .t2{ font-size:clamp(1.5rem,4.4vw,3.2rem); color:var(--gh-ink-soft); } .gh-band--ink .gh-poster .t2, .gh-band--deep .gh-poster .t2, .gh-hero .gh-poster .t2, .gh-opry .gh-poster .t2{ color:var(--gh-bone-soft); } .gh-poster .t3{ font-family:var(--gh-head); font-weight:400; letter-spacing:.09em; font-size:clamp(1.1rem,2.2vw,1.5rem); color:var(--gh-bone-soft); opacity:.85; } .gh-poster .gh-bolt{ color:var(--gh-red-light); align-self:center; width:.30em; height:.40em; margin:0 .06em; } /* -------------------------------------------------------------------------- HANDBILL — this week's round, as a taped-up flyer -------------------------------------------------------------------------- */ .gh-bills{ display:grid; gap:clamp(28px,4vw,40px); } @media (min-width:820px){ .gh-bills{ grid-template-columns:repeat(3,1fr); } } .gh-bill{ position:relative; background:var(--gh-bone-lift); box-shadow:0 14px 34px rgba(31,27,26,.16); padding:0 0 26px; transition:transform .35s cubic-bezier(.2,.7,.25,1), box-shadow .35s ease; } .gh-bill:nth-child(1){ transform:rotate(-1.3deg); } .gh-bill:nth-child(2){ transform:rotate(.7deg); } .gh-bill:nth-child(3){ transform:rotate(-.5deg); } .gh-bill:hover{ transform:rotate(0deg) translateY(-8px); box-shadow:0 22px 46px rgba(31,27,26,.24); } .gh-bill::before{ /* the piece of tape */ content:""; position:absolute; top:-13px; left:50%; z-index:4; width:92px; height:26px; transform:translateX(-50%) rotate(-2.5deg); background:rgba(233,230,211,.72); box-shadow:0 1px 3px rgba(31,27,26,.22); } .gh-bill__art{ aspect-ratio:4/5; background:var(--gh-ink); display:grid; place-items:center; overflow:hidden; } .gh-bill__art img{ width:100%; height:100%; object-fit:cover; } .gh-bill__body{ padding:22px 24px 0; } .gh-bill__body .gh-h3{ margin-bottom:.35em; } .gh-bill__body p{ color:var(--gh-ink-soft); font-size:1.05rem; margin:0; } /* -------------------------------------------------------------------------- VIDEO -------------------------------------------------------------------------- */ .gh-video{ position:relative; border:3px solid var(--gh-red); box-shadow:0 0 0 1px var(--gh-ink-line), 0 26px 60px rgba(0,0,0,.5); } .gh-video iframe,.gh-video > a{ display:block; width:100%; aspect-ratio:16/9; border:0; } .gh-thumbs{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:14px; } @media (min-width:820px){ .gh-thumbs{ grid-template-columns:repeat(4,1fr); } } .gh-thumb{ display:grid; place-items:center; aspect-ratio:16/9; overflow:hidden; background:var(--gh-ink); border:1px solid var(--gh-ink-line); transition:transform .3s ease, border-color .3s ease; } .gh-thumb:hover{ transform:translateY(-5px); border-color:var(--gh-red); text-decoration:none; } .gh-thumb img{ width:100%; height:100%; object-fit:cover; } /* -------------------------------------------------------------------------- EMAIL CAPTURE -------------------------------------------------------------------------- */ .gh-form{ display:flex; flex-wrap:wrap; gap:14px; max-width:580px; } .gh-form input{ flex:1 1 250px; min-width:0; font-family:var(--gh-body); font-size:1.05rem; padding:16px 18px; color:var(--gh-ink); background:var(--gh-bone-lift); border:2px solid var(--gh-bone-lift); border-radius:0; } .gh-form input::placeholder{ color:var(--gh-ink-soft); opacity:1; } .gh-fineprint{ font-size:.98rem; letter-spacing:.02em; margin-top:16px; opacity:.9; } /* -------------------------------------------------------------------------- SPLIT CTA FOOTER -------------------------------------------------------------------------- */ .gh-splits{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--gh-ink-line); } @media (min-width:820px){ .gh-splits{ grid-template-columns:repeat(3,1fr); } } .gh-split{ position:relative; overflow:hidden; background:var(--gh-ink-deep); padding:44px 34px; display:flex; flex-direction:column; gap:10px; transition:background .25s ease; } .gh-split::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:var(--gh-red); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.25,1); } .gh-split:hover{ background:var(--gh-ink); text-decoration:none; } .gh-split:hover::after{ transform:scaleX(1); } .gh-split .gh-h3{ color:var(--gh-bone); margin:0; } .gh-split p{ margin:0; color:var(--gh-bone-soft); font-size:1.05rem; } .gh-split .gh-go{ font-family:var(--gh-head); font-weight:400; text-transform:uppercase; letter-spacing:.11em; font-size:16px; color:var(--gh-red-light); margin-top:8px; } /* -------------------------------------------------------------------------- PHOTO STRIP — the room, three shots deep -------------------------------------------------------------------------- */ .gh-strip{ display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:760px){ .gh-strip{ grid-template-columns:1.35fr 1fr 1fr; } .gh-strip--even{ grid-template-columns:repeat(3,1fr); } } .gh-shot{ position:relative; overflow:hidden; background:var(--gh-ink); } .gh-shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .6s cubic-bezier(.2,.7,.25,1); } .gh-shot:hover img{ transform:scale(1.045); } .gh-shot--tall img{ aspect-ratio:1/1; } @media (min-width:760px){ .gh-strip .gh-shot img{ aspect-ratio:auto; height:clamp(240px,26vw,380px); } } /* -------------------------------------------------------------------------- OPRY — the one credential nobody else can claim -------------------------------------------------------------------------- */ .gh-opry{ position:relative; overflow:hidden; background:var(--gh-ink-deep); } .gh-opry__media{ position:absolute; inset:0; } .gh-opry__media img{ width:100%; height:100%; object-fit:cover; } .gh-opry__scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(20,16,15,.94) 0%, rgba(20,16,15,.86) 34%, rgba(20,16,15,.30) 72%, rgba(20,16,15,.55) 100%); } .gh-opry__inner{ position:relative; z-index:3; padding:clamp(70px,10vw,130px) 0; } .gh-opry .gh-lede{ color:var(--gh-bone); } @media (max-width:760px){ .gh-hero{ min-height:min(84dvh,720px); } .gh-strings{ height:clamp(78px,11vh,110px); } .gh .gh-social a{ width:52px; height:52px; } .gh-social svg{ width:23px; height:23px; } .gh-social{ gap:10px; } /* 3:2 sits much closer to the native shape of these photos than 4:3 did */ .gh-shot img{ aspect-ratio:3/2; } .gh-strip,.gh-strip--even{ gap:8px; } } @media (max-width:900px){ .gh-hero__scrim{ background: radial-gradient(60% 34% at 50% 4%, rgba(232,163,61,.16) 0%, transparent 62%), linear-gradient(to top, rgba(20,16,15,.97) 26%, rgba(20,16,15,.80) 58%, rgba(20,16,15,.46) 100%); } } @media (max-width:760px){ /* phone: keep the top of the frame clear so you can see the room, then go almost solid behind the type instead of fighting it */ .gh-opry__scrim{ background:linear-gradient(to top, rgba(20,16,15,.97) 0%, rgba(20,16,15,.95) 46%, rgba(20,16,15,.72) 66%, rgba(20,16,15,.30) 100%); } .gh-opry__inner{ padding-top:clamp(190px,46vw,300px); padding-bottom:clamp(44px,8vw,64px); } } /* stat footnote */ .gh-statnote{ font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.09em; font-size:clamp(16px,1.7vw,19px); color:var(--gh-bone-soft); text-align:center; max-width:var(--gh-max); margin:26px auto 0; padding:0 var(--gh-pad); line-height:1.75; } .gh-statnote b{ color:var(--gh-red-light); font-weight:400; } /* -------------------------------------------------------------------------- SOCIAL — one icon set, used in the hero and again in the footer -------------------------------------------------------------------------- */ .gh-social{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .gh .gh-social a{ display:grid; place-items:center; width:54px; height:54px; /* comfortably above the 44px thumb-target minimum */ border:1.5px solid currentColor; color:var(--gh-bone-soft); transform:skewX(-9deg); transition:color .18s ease, background .18s ease, transform .18s ease; } .gh .gh-social a:hover{ background:var(--gh-red); border-color:var(--gh-red); color:var(--gh-bone-lift); transform:skewX(-9deg) translateY(-3px); text-decoration:none; } .gh-social svg{ width:23px; height:23px; fill:currentColor; transform:skewX(9deg); display:block; } .gh-social__label{ font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.16em; font-size:clamp(15px,1.5vw,17px); color:var(--gh-bone-soft); margin-right:4px; margin-bottom:10px; } .gh-band--bone .gh-social a,.gh-band--lift .gh-social a{ color:var(--gh-ink-soft); } .gh-hero .gh-social{ margin-top:0; } .gh-hero .gh-social a{ color:rgba(233,230,211,.72); } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ .gh-foot{ background:var(--gh-ink-deep); color:var(--gh-bone-soft); position:relative; } .gh-foot__top{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,56px); padding:clamp(52px,7vw,84px) 0 clamp(34px,4vw,48px); align-items:start; } @media (min-width:860px){ .gh-foot__top{ grid-template-columns:auto 1fr auto; } } .gh-foot__badge{ width:clamp(128px,16vw,168px); } .gh-foot__where{ font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.1em; font-size:clamp(17px,2vw,21px); line-height:1.95; color:var(--gh-bone); } .gh-foot__where span{ display:block; } .gh-foot__where .gh-free{ color:var(--gh-red-light); } .gh .gh-foot a{ color:var(--gh-bone-soft); } .gh .gh-foot a:hover{ color:var(--gh-red-light); } .gh-foot__bar{ border-top:1px solid var(--gh-ink-line); padding:22px 0 clamp(34px,5vw,52px); display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between; font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.1em; font-size:clamp(15px,1.5vw,17px); } /* -------------------------------------------------------------------------- MOTION OFF -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .gh *,.gh *::before,.gh *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .gh-rise{ opacity:1; transform:none; } .gh-hero .gh-h1 .gh-word > span{ transform:none; } .gh-bill{ transform:none !important; } } /* ========================================================================== EVENT PAGES — tickets, lineup cards, detail rows. Added for the Whitefish Grind landing page; reusable for any future show. ========================================================================== */ /* the standing event facts, as a stacked block */ .gh-facts{ display:grid; gap:2px; background:var(--gh-ink-line); border-top:3px solid var(--gh-red); border-bottom:3px solid var(--gh-red); } @media (min-width:820px){ .gh-facts{ grid-template-columns:repeat(4,1fr); } } .gh-fact{ background:var(--gh-ink-deep); padding:28px 22px; text-align:center; } .gh-fact b{ display:block; font-family:var(--gh-head); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:clamp(1.35rem,2.5vw,1.75rem); color:var(--gh-bone); line-height:1.2; } .gh-fact span{ display:block; margin-top:11px; font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.13em; font-size:clamp(15px,1.6vw,18px); color:var(--gh-bone-soft); } /* LINEUP — portrait, name, and what they've had cut */ .gh-lineup{ display:grid; gap:clamp(20px,3vw,28px); grid-template-columns:repeat(2,1fr); } @media (min-width:900px){ .gh-lineup{ grid-template-columns:repeat(4,1fr); } } .gh-writer{ display:flex; flex-direction:column; } .gh-writer__art{ position:relative; overflow:hidden; aspect-ratio:3/4; background:linear-gradient(165deg,#2A211D,#14100F); border:2px solid var(--gh-red); } .gh-writer__art img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:transform .6s cubic-bezier(.2,.7,.25,1), filter .4s ease; } .gh-writer:hover .gh-writer__art img{ transform:scale(1.05); filter:grayscale(.55) contrast(1.05); } .gh-writer__name{ font-family:var(--gh-head); font-weight:400; text-transform:uppercase; font-size:clamp(1.3rem,2.4vw,1.6rem); letter-spacing:.02em; line-height:1.12; color:var(--gh-bone); margin:20px 0 11px; } .gh-writer__cutlabel{ font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.13em; font-size:clamp(15px,1.5vw,17px); color:var(--gh-red-light); margin-bottom:8px; } .gh-writer__cuts{ font-size:1.05rem; line-height:1.55; color:var(--gh-bone-soft); margin:0; } /* TICKETS */ .gh-tiers{ display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:760px){ .gh-tiers{ grid-template-columns:repeat(3,1fr); } } .gh-tier{ display:flex; flex-direction:column; gap:6px; background:var(--gh-bone-lift); border:2px solid var(--gh-bone-line); padding:clamp(24px,3vw,34px); transition:border-color .2s ease, transform .2s ease; } .gh-tier:hover{ border-color:var(--gh-red); transform:translateY(-4px); } .gh-tier--feature{ border-color:var(--gh-red); background:var(--gh-bone); } .gh-tier__name{ font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.12em; font-size:clamp(15px,1.6vw,17px); color:var(--gh-ink-soft); } .gh-tier__price{ font-family:var(--gh-display); font-size:clamp(2.6rem,6vw,3.6rem); line-height:1; color:var(--gh-ink); } .gh-tier__note{ font-size:1.05rem; line-height:1.5; color:var(--gh-ink-soft); margin:4px 0 20px; } .gh-tier .gh-btn{ margin-top:auto; margin-inline:9px; text-align:center; } /* POSTER */ .gh-posterframe{ max-width:520px; margin:0 auto; border:3px solid var(--gh-red); box-shadow:0 26px 60px rgba(0,0,0,.5); background:var(--gh-ink); } .gh-posterframe img{ width:100%; display:block; } /* PRESENTED BY */ .gh-present{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(24px,5vw,56px); text-align:center; } .gh-present img{ width:clamp(120px,15vw,170px); } .gh-present__fest{ font-family:var(--gh-head); text-transform:uppercase; line-height:1.15; } .gh-present__fest b{ display:block; font-size:clamp(1.8rem,3.8vw,2.6rem); color:var(--gh-bone); font-weight:400; } .gh-present__fest span{ display:block; font-size:clamp(1.05rem,1.9vw,1.3rem); letter-spacing:.16em; color:var(--gh-red-light); margin-top:6px; } /* the event hero is a bit shorter than the home page hero — it has a job to do */ .gh-wf-hero{ min-height:min(82vh,780px); min-height:min(82dvh,780px); } .gh-wf-hero .gh-h1{ font-size:clamp(3.2rem,11.5vw,8rem); } @media (min-width:820px){ .gh-grid--2{ grid-template-columns:1fr 1fr; } } /* ============================================================ MONTANA RANGE — the drawn hero backdrop for event pages. Vector, so it is sharp on every screen and costs ~6KB. Sits at the bottom of the hero and keeps its proportions; the phone rule scales it up so the big peak still reads. ============================================================ */ .gh-range{ position:absolute; left:-9%; bottom:0; width:118%; height:auto; display:block; z-index:0; pointer-events:none; animation:gh-drift 34s ease-in-out infinite alternate; } @keyframes gh-drift{ from{ transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-1.1%,-1.4%,0) scale(1.035); } } .gh-wf-hero .gh-hero__media{ background: radial-gradient(74% 54% at 60% 4%, rgba(232,163,61,.26) 0%, transparent 64%), linear-gradient(to bottom, #2A1C16 0%, #211714 34%, #14100F 78%); } /* the drawn hero is already dark — it needs far less scrim than a photo does */ .gh-wf-hero .gh-hero__scrim{ background: radial-gradient(62% 46% at 62% 10%, rgba(232,163,61,.14) 0%, transparent 68%), linear-gradient(to top, rgba(20,16,15,.86) 0%, rgba(20,16,15,.40) 30%, rgba(20,16,15,.04) 58%, rgba(20,16,15,.22) 100%); } @media (max-width:900px){ .gh-range{ left:-58%; width:206%; } .gh-wf-hero .gh-hero__scrim{ background: radial-gradient(70% 34% at 58% 6%, rgba(232,163,61,.13) 0%, transparent 64%), linear-gradient(to top, rgba(20,16,15,.88) 0%, rgba(20,16,15,.46) 36%, rgba(20,16,15,.06) 70%, rgba(20,16,15,.24) 100%); } } @media (max-width:600px){ .gh-range{ left:-124%; width:318%; } } /* ============================================================ PHONE CROPS — purpose-cut portrait versions of the two big photos, so nobody gets sliced out of frame on a phone. Delivered as a CSS background inside a media query on purpose: · a desktop browser never downloads the phone file at all · if the file is missing or renamed, the layer simply does not paint and the desktop photo underneath still shows. Nothing ever goes blank. Upload GH-Blog-2-mobile.jpg and gh-opry-mobile.jpg through the WordPress media library. Each rule lists both the 2026/09 and the 2026/08 folder, so it works whichever month they land in -- the one that does not exist simply does not paint. If you upload them in some later month, add that folder as a third url() line. ============================================================ */ .gh-phonecrop{ display:none; } @media (max-width:760px){ .gh-phonecrop{ display:block; position:absolute; inset:0; z-index:0; background-repeat:no-repeat; background-size:cover; } .gh-phonecrop--hero{ filter:saturate(.82) brightness(.72) contrast(1.06); background-image: url("https://www.grindhousenashville.com/wp-content/uploads/2026/09/GH-Blog-2-mobile.jpg"), url("https://www.grindhousenashville.com/wp-content/uploads/2026/08/GH-Blog-2-mobile.jpg"); background-position:50% 42%; } .gh-phonecrop--opry{ background-image: url("https://www.grindhousenashville.com/wp-content/uploads/2026/09/gh-opry-mobile.jpg"), url("https://www.grindhousenashville.com/wp-content/uploads/2026/08/gh-opry-mobile.jpg"); background-position:50% 38%; } } /* ============================================================ EVENT STRIP — a single upcoming show, promoted on the home page, with the four writers' faces. Reusable: change the copy, the four portraits and the href, keep the shape. The range behind it is the same drawing as the Whitefish hero, cut down to two ridges so it costs about 1KB. ============================================================ */ .gh-eventstrip{ position:relative; overflow:hidden; background:var(--gh-ink); border-top:3px solid var(--gh-red); padding:clamp(52px,7vw,92px) 0 clamp(52px,7vw,88px); } .gh-eventstrip__range{ position:absolute; left:-4%; bottom:0; width:108%; height:auto; display:block; z-index:0; pointer-events:none; opacity:.9; } .gh-eventstrip__glow{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(60% 74% at 78% 4%, rgba(232,163,61,.16) 0%, transparent 66%); } .gh-eventstrip .gh-wrap{ position:relative; z-index:2; } .gh-eventstrip__grid{ display:grid; gap:clamp(24px,3vw,44px); align-items:center; } @media (min-width:900px){ .gh-eventstrip__grid{ grid-template-columns:1fr auto; } } .gh-eventstrip__where{ display:block; font-family:var(--gh-head); text-transform:uppercase; letter-spacing:.09em; font-size:clamp(1.25rem,2.4vw,1.7rem); color:var(--gh-bone-soft); margin-top:16px; line-height:1.3; } .gh-eventstrip__where b{ color:var(--gh-bone); font-weight:400; } .gh-eventstrip .gh-h2{ color:var(--gh-bone); margin:8px 0 0; font-size:clamp(2.7rem,7vw,4.4rem); } .gh-eventstrip .gh-h2 em{ font-style:normal; color:var(--gh-red-light); } .gh-eventstrip .gh-lede{ color:var(--gh-bone-soft); } .gh-eventstrip__cta{ justify-content:flex-start; } @media (min-width:900px){ .gh-eventstrip__cta{ justify-content:flex-end; } } /* the four faces, across the full width beneath the copy */ .gh-eventstrip__cast{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,22px); margin-top:clamp(34px,4.5vw,54px); } @media (min-width:760px){ .gh-eventstrip__cast{ grid-template-columns:repeat(4,1fr); } } .gh .gh-cast{ display:block; color:inherit; } .gh .gh-cast:hover{ text-decoration:none; } .gh .gh-cast:hover .gh-cast__name{ color:var(--gh-red-light); } .gh-cast__art{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; border:2px solid var(--gh-red); background:linear-gradient(165deg,#2A211D,#14100F); } .gh-cast__art img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) contrast(1.06); transition:transform .6s cubic-bezier(.2,.7,.25,1), filter .4s ease; } .gh-cast:hover .gh-cast__art img{ transform:scale(1.05); filter:grayscale(.5) contrast(1.06); } .gh-cast__name{ display:block; font-family:var(--gh-head); font-weight:400; text-transform:uppercase; letter-spacing:.03em; line-height:1.15; font-size:clamp(1.05rem,1.9vw,1.35rem); color:var(--gh-bone); margin-top:14px; } .gh-cast__cut{ display:block; font-size:clamp(.98rem,1.5vw,1.08rem); line-height:1.45; color:var(--gh-bone-soft); margin-top:6px; } @media (max-width:760px){ .gh-eventstrip__range{ left:-42%; width:184%; } } /* ========================================================================== HOMEPAGE — September 2026 New components below. Everything above this line is unchanged. NOTE ON HEADING COLOUR: Divi styles h1-h6 globally, and an INHERITED colour always loses to a direct rule. So every heading in here sets its own colour explicitly. Leaving one out is how a heading silently turns Divi grey. ========================================================================== */ /* ---------- STICKY SITE NAV ---------- */ /* ---------- DIVI'S OWN HEADER ---------- The site navigation is .gh-nav, built into the page itself. Divi also renders its own theme header, which paints on top of ours and hides it. Turn Divi's off and remove the vertical space it reserves. If you ever want Divi's menu back, delete this block. */ #main-header, #top-header, #et-top-navigation, #et_mobile_nav_menu, .et_slide_in_menu_container{ display:none !important; } #page-container{ padding-top:0 !important; } #et-main-area{ margin-top:0 !important; } /* ---------- DIVI'S OWN FOOTER ---------- Same story at the bottom. The homepage uses a blank template so it never showed, but every other page renders Divi's stock footer -- the widget columns, the social icons and the "Designed by Elegant Themes" line -- underneath our own footer. Every page on this site builds its own footer, so Divi's is always wrong. Off. */ #main-footer, #footer-bottom, #footer-widgets, .et_pb_footer_columns, #footer-info, .et-social-icons{ display:none !important; } #et-main-area{ margin-bottom:0 !important; } /* FIXED, not sticky. position:sticky only works if no ancestor clips or transforms, and Divi wraps page content in several elements that do -- so a sticky nav silently scrolls away. Fixed always holds. The .gh-navpad spacer the head script inserts keeps the page from sliding underneath it. */ .gh-nav{position:fixed; top:0; left:0; right:0; z-index:9000; background:rgba(20,16,15,.93); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid rgba(233,230,211,.13);} body.admin-bar .gh-nav{top:32px} @media (max-width:782px){ body.admin-bar .gh-nav{top:46px} } .gh-navpad{display:block; width:100%} .gh-nav__in{max-width:1240px; margin:0 auto; padding:0 clamp(16px,3vw,28px); display:flex; align-items:center; gap:clamp(14px,3vw,34px); min-height:64px;} .gh-nav__brand{flex:none; display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--gh-bone); margin-right:auto;} .gh-nav__brand img{height:34px; width:auto; display:block} .gh-nav__brand b{font-size:15px; letter-spacing:.17em; text-transform:uppercase; font-weight:700; white-space:nowrap; color:var(--gh-bone);} @media (max-width:900px){ .gh-nav__brand b{display:none} } .gh-nav__links{display:flex; align-items:center; gap:clamp(4px,1.4vw,10px);} .gh-nav__links a{position:relative; text-decoration:none; color:#C4BBAC; white-space:nowrap; font-size:15px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; padding:20px 12px 18px; transition:color .16s;} .gh-nav__links a::after{content:""; position:absolute; left:12px; right:12px; bottom:14px; height:2px; background:var(--gh-red); transform:scaleX(0); transform-origin:left; transition:transform .2s cubic-bezier(.22,.7,.3,1);} .gh-nav__links a:hover{color:var(--gh-bone)} .gh-nav__links a:hover::after,.gh-nav__links a[aria-current="page"]::after{transform:scaleX(1)} .gh-nav__links a[aria-current="page"]{color:var(--gh-bone)} .gh-nav__cta{flex:none; margin-left:6px; display:inline-flex; align-items:center; background:var(--gh-red); color:#fff !important; text-decoration:none; padding:11px 18px; font-size:14px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; transition:background .16s, transform .16s; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);} .gh-nav__cta:hover{background:var(--gh-red-deep); transform:translateY(-1px)} /* ---------- NARROW DESKTOP ---------- Between the menu button breakpoint and roughly a laptop width there is just enough room for all five links plus the button, but only if they tighten up. Without this the "Next show" button falls off the right edge -- which is what the old sideways scroll was hiding. */ @media (min-width:881px) and (max-width:1120px){ .gh-nav__in{gap:14px} .gh-nav__brand b{font-size:14px; letter-spacing:.13em} .gh-nav__links{gap:2px} .gh-nav__links a{font-size:13.5px; letter-spacing:.06em; padding:20px 8px} .gh-nav__links a::after{left:8px; right:8px} .gh-nav__cta{padding:10px 13px; font-size:13px; letter-spacing:.06em} } @media (max-width:1000px){ .gh-nav__brand b{display:none} } /* ---------- MOBILE NAV ---------- The links used to sit in a row that scrolled sideways, which meant the last two items were invisible unless you knew to swipe. Under 880px the row becomes a full-height panel behind a menu button instead: every link is on screen at once, at a size you can hit with a thumb. The button itself is built by the head script, so it exists on every page whether or not that page's markup has been updated. */ .gh-nav__toggle{display:none; flex:none; margin-left:8px; width:46px; height:44px; background:none; border:0; padding:0; cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent;} .gh-nav__toggle i{position:absolute; left:11px; right:11px; height:2px; background:var(--gh-bone); border-radius:2px; transition:transform .24s cubic-bezier(.22,.7,.3,1), opacity .16s;} .gh-nav__toggle i:nth-child(1){top:14px} .gh-nav__toggle i:nth-child(2){top:21px} .gh-nav__toggle i:nth-child(3){top:28px} .gh-nav.is-open .gh-nav__toggle i:nth-child(1){transform:translateY(7px) rotate(45deg)} .gh-nav.is-open .gh-nav__toggle i:nth-child(2){opacity:0} .gh-nav.is-open .gh-nav__toggle i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* the panel CTA is a copy of the bar CTA, made by the script */ .gh-nav__mcta{display:none} @media (max-width:880px){ .gh-nav__toggle{display:block} .gh-nav__cta{display:none} /* the bar's backdrop-filter is dropped on mobile: a filtered element becomes the containing block for its fixed children, which would size the panel against the 65px bar instead of the screen. Without it the panel can be plain fixed, pinned to the bottom of the screen, so it always covers whatever is behind it no matter how tall the bar is. */ .gh-nav{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(18,14,13,.98);} .gh-nav__links{position:fixed; left:0; right:0; top:var(--gh-navh,64px); bottom:0; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:10px 0 48px; margin:0; background:#100D0C; overflow-y:auto; -webkit-overflow-scrolling:touch; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s, transform .24s cubic-bezier(.22,.7,.3,1), visibility .2s;} .gh-nav.is-open .gh-nav__links{opacity:1; visibility:visible; transform:none} .gh-nav__links a{font-family:var(--gh-head); font-size:clamp(27px,8vw,38px); letter-spacing:.02em; line-height:1; text-transform:uppercase; font-weight:400; color:var(--gh-bone); padding:19px clamp(20px,6vw,34px); border-bottom:1px solid rgba(233,230,211,.10);} /* the thin desktop underline becomes a red bar down the left edge */ .gh-nav__links a::after{left:0; right:auto; top:0; bottom:0; width:4px; height:auto; transform:scaleY(0); transform-origin:center;} .gh-nav__links a:hover::after, .gh-nav__links a[aria-current="page"]::after{transform:scaleY(1)} .gh-nav__links a[aria-current="page"]{color:var(--gh-red)} .gh-nav__mcta{display:inline-flex; align-self:flex-start; margin:26px clamp(20px,6vw,34px) 0; align-items:center; background:var(--gh-red); color:#fff !important; text-decoration:none; padding:15px 26px; font-size:15px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);} .gh-nav__mcta::after{display:none} } /* while the panel is open the page behind it must not scroll */ body.gh-navopen{overflow:hidden} @media (prefers-reduced-motion:reduce){ .gh-nav__links, .gh-nav__toggle i{transition:none !important} } /* ---------- FLARE: the shared shapes that kill the box grid ---------- A notched "cut corner" borrowed from a torn gig poster, used on every card so nothing on the page is a plain rectangle. */ .gh-cut{clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));} .gh-cut--sm{clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));} /* diagonal band divider - a harder edge than the chevron, used between the dark and bone sections so the page never stacks two flat blocks */ .gh-slash{position:relative; height:clamp(38px,5vw,68px); overflow:hidden} .gh-slash svg{position:absolute; inset:0; width:100%; height:100%; display:block} /* rotated rubber stamp, sits over the hero corner */ .gh-stamp{position:absolute; right:clamp(16px,4vw,58px); bottom:clamp(74px,10vw,120px); z-index:4; width:clamp(96px,11vw,138px); height:clamp(96px,11vw,138px); border-radius:50%; border:2.5px solid rgba(233,230,211,.5); display:grid; place-items:center; text-align:center; transform:rotate(-11deg); pointer-events:none; padding:10px; background:rgba(20,16,15,.28); backdrop-filter:blur(2px);} .gh-stamp b{display:block; font-family:var(--gh-head); font-size:clamp(24px,3vw,34px); line-height:.94; color:var(--gh-bone); letter-spacing:.02em} .gh-stamp span{display:block; margin-top:5px; font-size:12px; letter-spacing:.19em; text-transform:uppercase; color:rgba(233,230,211,.72); font-weight:700; line-height:1.3} @media (max-width:700px){ .gh-stamp{display:none} } /* ---------- THE TWO-SIDED PROMISE ---------- */ .gh-two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,20px); margin-top:clamp(34px,4.4vw,52px)} @media (max-width:840px){ .gh-two{grid-template-columns:1fr} } .gh-two__half{padding:clamp(30px,3.8vw,48px); position:relative; clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));} .gh-two__half--a{background:var(--gh-ink); transform:rotate(-.5deg)} .gh-two__half--b{background:var(--gh-bone-lift,#F4F2E6); transform:rotate(.5deg); box-shadow:inset 0 0 0 1px var(--gh-rule,#CFC9B4)} @media (max-width:840px){ .gh-two__half--a,.gh-two__half--b{transform:none} } .gh .gh-two__k{font-size:clamp(13.5px,1.6vw,15px); letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin:0 0 18px; line-height:1.5} .gh-two__half--a .gh-two__k{color:var(--gh-red-light)} .gh-two__half--b .gh-two__k{color:var(--gh-red)} /* explicit colours - Divi's global h3 rule beats inheritance */ .gh-two h3{font-family:var(--gh-head); font-size:clamp(27px,3.7vw,42px); line-height:1.04; margin:0 0 16px; text-transform:uppercase; letter-spacing:.02em} .gh-two__half--a h3{color:var(--gh-bone)} .gh-two__half--b h3{color:var(--gh-ink)} .gh-two p{margin:0; font-size:clamp(16.5px,1.95vw,19.5px); line-height:1.6; max-width:44ch} .gh-two__half--a p{color:#C6BDAE} .gh-two__half--b p{color:var(--gh-ink-soft,#5C5551)} /* ---------- SONGS YOU KNOW ---------- */ .gh-known{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:clamp(10px,1.3vw,15px); margin-top:clamp(30px,4vw,44px);} .gh-known__i{background:var(--gh-bone-lift,#F4F2E6); padding:20px 22px 18px; min-height:126px; display:flex; flex-direction:column; justify-content:space-between; position:relative; box-shadow:inset 0 0 0 1px var(--gh-rule,#CFC9B4); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition:background .18s, transform .18s;} .gh-known__i:nth-child(3n+2){transform:rotate(.45deg)} .gh-known__i:nth-child(3n){transform:rotate(-.4deg)} .gh-known__i:hover{background:#fff; transform:translateY(-3px) rotate(0deg)} .gh .gh-known__t{font-size:clamp(18.5px,2.05vw,21.5px); font-weight:700; line-height:1.22; letter-spacing:-.008em; margin:0 0 4px; color:var(--gh-ink)} .gh .gh-known__by{font-size:15.5px; color:var(--gh-ink-soft,#5C5551); margin:0} .gh .gh-known__w{margin:13px 0 0; padding-top:11px; font-size:14.5px; letter-spacing:.04em; color:var(--gh-ink-soft,#5C5551); border-top:1px solid var(--gh-rule-soft,#DFDACA)} .gh .gh-known__w b{color:var(--gh-red); font-weight:700} /* ---------- SHOWS: ticket stubs, not boxes ---------- */ .gh-shows{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(30px,4vw,44px);} .gh-showcard{position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit; padding:clamp(24px,2.8vw,32px); background:rgba(233,230,211,.055); box-shadow:inset 0 0 0 1px rgba(233,230,211,.19); clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); transition:background .18s, transform .18s;} .gh-showcard::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gh-red)} .gh-showcard:hover{background:rgba(233,230,211,.1); transform:translateY(-3px)} .gh-showcard__tag{display:inline-block; align-self:flex-start; font-size:13.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:6px 12px; margin-bottom:18px; color:var(--gh-ink); background:var(--gh-red-light); transform:rotate(-1.2deg); clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));} .gh-showcard__tag--home{background:var(--gh-bone); color:var(--gh-ink)} .gh-showcard h3{font-family:var(--gh-head); font-size:clamp(25px,3vw,33px); line-height:1.06; margin:0 0 11px; color:var(--gh-bone); text-transform:uppercase; letter-spacing:.02em} .gh-showcard p{margin:0 0 16px; font-size:clamp(16px,1.85vw,18px); line-height:1.58; color:#BAB1A3} .gh .gh-showcard__meta{margin-top:auto; padding-top:16px; font-size:15.5px; letter-spacing:.04em; color:var(--gh-bone-soft,#B5AFA0); border-top:1px dashed rgba(233,230,211,.28)} .gh .gh-showcard__meta b{color:var(--gh-bone); font-weight:700} /* ---------- VIDEO WALL ---------- */ .gh-vids{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:clamp(16px,2vw,22px); margin-top:clamp(30px,4vw,44px);} .gh-vid{position:relative; display:block; border:0; padding:0; width:100%; cursor:pointer; background:var(--gh-ink-deep); overflow:hidden; text-align:left; transition:transform .18s; clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));} .gh-vid:hover{transform:translateY(-3px)} .gh-vid__frame{display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:#000} .gh-vid__frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,.7,.3,1), opacity .3s; opacity:.9} .gh-vid:hover .gh-vid__frame img{transform:scale(1.05); opacity:1} .gh-vid__frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0} .gh-vid__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:68px; border-radius:50%; background:rgba(197,53,42,.94); display:grid; place-items:center; pointer-events:none; transition:transform .2s, background .2s; box-shadow:0 8px 30px -8px rgba(0,0,0,.7)} .gh-vid:hover .gh-vid__play{transform:translate(-50%,-50%) scale(1.09); background:var(--gh-red)} .gh-vid__play svg{width:25px; height:25px; margin-left:4px; fill:#fff} .gh-vid__cap{display:block; padding:17px 19px 19px} .gh-vid__cap b{display:block; font-size:18px; font-weight:700; line-height:1.28; color:var(--gh-bone); margin-bottom:5px} .gh-vid__cap span{display:block; font-size:15px; color:var(--gh-bone-soft,#B5AFA0); line-height:1.5} .gh-vid__flag{display:block; position:absolute; left:14px; top:14px; z-index:2; font-size:13.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:6px 11px; background:var(--gh-red); color:#fff; transform:rotate(-1.5deg); clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));} /* ---------- PARTNERS ---------- Logos are shown UNTOUCHED, in their own colours. Nothing is recoloured, stretched or cropped. Publishers and labels run as a ticker; festivals and causes sit still. Every plaque is white so any mark reads on it. */ .gh .gh-plabel{margin:clamp(46px,5.2vw,66px) 0 clamp(18px,2.2vw,24px); display:flex; align-items:center; gap:18px; font-family:var(--gh-head); font-weight:400; font-size:clamp(17px,2vw,22px); letter-spacing:.15em; text-transform:uppercase; color:var(--gh-bone-soft,#B5AFA0)} /* this had a doubled .gh in the selector, so the rule never matched and the line after each label never drew */ .gh .gh-plabel::after{content:""; flex:1; height:1px; background:rgba(233,230,211,.22)} /* One solid white band running the full width of the page, logos sliding across it. No plaques, no fade at the edges -- the white IS the surface. */ .gh-ptick{position:relative; overflow:hidden; width:100%; background:#FFFFFF; padding:clamp(22px,3vw,38px) 0; border-top:3px solid var(--gh-red); border-bottom:3px solid var(--gh-red);} .gh-ptick__track{display:flex; width:max-content; animation:gh-ptick 46s linear infinite} .gh-ptick:hover .gh-ptick__track{animation-play-state:paused} .gh-ptick__set{display:flex; align-items:center; gap:clamp(38px,5.5vw,86px); padding-right:clamp(38px,5.5vw,86px)} /* inside the white band a tile is just the artwork -- no box of its own */ .gh-ptick .gh-partner{background:none; box-shadow:none; clip-path:none; width:auto; min-height:0; padding:0} .gh-ptick .gh-partner:hover{transform:none; box-shadow:none} .gh-ptick .gh-partner img{height:clamp(46px,5.4vw,74px); width:auto; max-height:none; max-width:clamp(180px,20vw,280px)} @keyframes gh-ptick{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){ .gh-ptick__track{animation:none} } .gh-partner{background:#FFFFFF; width:250px; min-height:172px; flex:none; display:grid; place-items:center; padding:26px 28px; text-align:center; box-shadow:0 1px 0 rgba(0,0,0,.24); transition:transform .18s, box-shadow .18s; clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));} .gh-partner:hover{transform:translateY(-3px); box-shadow:0 8px 22px -9px rgba(0,0,0,.6)} /* the artwork: contained, never stretched, never filtered */ .gh-partner img{max-width:100%; max-height:120px; width:auto; height:auto; object-fit:contain; display:block} /* wordmark fallback, shown ONLY while a logo file is missing */ .gh-partner:has(img) span{display:none} .gh-partner span{font-size:15px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#4A423B; line-height:1.32} /* the static grids (festivals, causes) reuse the same tile */ .gh-pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(12px,1.5vw,18px)} .gh-pgrid .gh-partner{width:auto} .gh .gh-partners__note{margin-top:26px; text-align:center; font-size:15px; color:#8A7F71} /* ---------- CONTACT ---------- */ .gh-reach{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:center; margin-top:clamp(30px,4vw,44px)} @media (max-width:840px){ .gh-reach{grid-template-columns:1fr} } .gh .gh-reach__list{display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(22px,2.6vw,30px)} .gh .gh-reach__list span{font-size:15px; font-weight:600; letter-spacing:.03em; padding:9px 15px; color:var(--gh-bone-soft,#B5AFA0); box-shadow:inset 0 0 0 1px rgba(233,230,211,.22); clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));} .gh-mailbox{padding:clamp(26px,3.4vw,40px); background:rgba(233,230,211,.06); text-align:center; box-shadow:inset 0 0 0 1px rgba(233,230,211,.2); transform:rotate(-.7deg); clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));} @media (max-width:840px){ .gh-mailbox{transform:none} } .gh .gh-mailbox p{margin:0 0 8px; font-size:13.5px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--gh-bone-soft,#B5AFA0)} .gh-mailbox a{display:inline-block; font-family:var(--gh-head); font-size:clamp(17px,2vw,24px); line-height:1.18; color:var(--gh-red-light); text-decoration:none; letter-spacing:.01em; border-bottom:2px solid transparent; transition:border-color .16s} .gh-mailbox a:hover{border-bottom-color:var(--gh-red-light)} .gh-mailbox small{display:block; margin-top:14px; font-size:14.5px; color:#A79C8E; line-height:1.55} /* section anchor offset under the sticky nav */ .gh-anchor{scroll-margin-top:78px}