/* HTBB bundle — generated by build.js on 2026-10-09T18:30:25.938Z. Do not edit; edit the source files instead. */
/* ==================== css/htbb-new.css ==================== */
/* ============================================================
HEADER LINK
============================================================ */
.htbb-header-link {
opacity: 0;
animation: htbbFadeIn 1.5s ease forwards;
margin: 0;
padding: 0;
position: relative;
display: inline-flex;
gap: 10px;
}
@keyframes htbbFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.htbb-header-link a {
color: #fff;
border: 1px solid #000;
background: #000;
padding: 12px 10px;
transition: all 0.5s;
font-size: 44px
}
.htbb-header-link a:hover,
.htbb-header-link a:focus {
color: #000;
background: #fff;
}
/* ============================================================
QUOTES
============================================================ */
.quotes-slider {
width: 100%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 0 25px 110px;
line-height: 1;
min-height: 255px;
}
.quotes-slider__item {
margin: 0;
padding: 0;
opacity: 0;
transition: opacity 0.7s ease;
}
.quotes-slider__item.is-visible {
opacity: 1;
}
.quotes-slider__quote {
margin: 0;
position: relative;
font-size: 42px;
}
.quotes-slider__quote:before,
.quotes-slider__quote:after {
content: '"';
display: inline-block;
}
.quotes-slider__author {
display: block;
margin-top: 19px;
font-style: normal;
font-size: 30px;
}
/* Optional loading state */
.quotes-slider.is-loading {
visibility: hidden;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.quotes-slider__item {
transition: none;
}
}
@media (max-width: 940px) {
.quotes-slider {
padding: 0 25px 55px;
}
.quotes-slider__quote {
font-size: 30px;
line-height: 1;
}
.quotes-slider__author {
font-size: 20px;
}
}
/* ==================== css/calendar.css ==================== */
/**
* HTBB Calendar.
*
* Paper-and-ink treatment to match the show's identity: an inked weekday band,
* hairline rules, and showtimes as ghost buttons that invert on hover.
*
* Colour comes from the host theme through --htbb-text / --htbb-background /
* --htbb-accent. Everything below derives from those three, so re-skinning the
* calendar for another show means changing them on the host page and nothing
* in this file. The fallbacks only apply if the theme stops supplying them.
*
* The grid, hit targets, disabled states and stable height are load-bearing —
* change them with care.
*/
.htbb-calendar {
font-family: 'avenir next' !important;
/* One indirection so every rule below reads from a local name. The host
variable wins whenever it is set; the literal is a safety net, not a
design decision. */
--cal-ink: var(--htbb-text, #333f48);
--cal-paper: var(--htbb-background, #ebe9e1);
--cal-accent: var(--htbb-accent, #333f48);
/* Two weights of line, and the difference between them is the hierarchy:
the grid recedes to structure, the showtime buttons come forward as the
thing to click. Same weight for both is what made this read as a box
inside a box.
These three literals are the pre-color-mix fallback, and they are the one
place the ink is written out rather than derived. A custom property holding
an unsupported function is not invalid at parse time — it fails later, when
it is substituted — so the usual two-declaration fallback does nothing here
and every border that referenced it would disappear. Hence the @supports
block below, which is the only construct that actually branches. */
--cal-rule: rgba(30, 43, 52, 0.3);
--cal-button-rule: rgba(30, 43, 52, 0.7);
/* The wash on a day with no performance. Light enough to stay behind the
date, heavy enough that a dark Monday reads as deliberate. */
--cal-dark-day: rgba(30, 43, 52, 0.05);
--cal-speed: 0.18s;
}
/* Derive the same three from whatever ink the theme is actually using, so the
calendar re-skins with the host page instead of with the literals above. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
.htbb-calendar {
--cal-rule: color-mix(in srgb, var(--cal-ink) 30%, transparent);
--cal-button-rule: color-mix(in srgb, var(--cal-ink) 70%, transparent);
--cal-dark-day: color-mix(in srgb, var(--cal-ink) 5%, transparent);
}
}
/* The mount point owns its own width — the host page places it. Setting a
max-width on the id here would outrank any class the page puts on the same
element and force horizontal overflow on narrower screens. */
/* Reserve height before the sheet resolves so the page below does not jump.
Removed by calendar.js once the month renders. */
#htbb-calendar.is-loading {
min-height: 40vw;
}
/* ---- month nav ---- */
.htbb-calendar__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: -2em;
padding-bottom: 0;
font-family: 'avenir next' !important;
}
.htbb-calendar__month {
color: #333f48 !important;
margin: 0;
min-width: 12ch;
letter-spacing: 0.02em;
text-align: center;
font-family: 'avenir next' !important;
}
.htbb-calendar__prev,
.htbb-calendar__next {
/* Real disabled buttons, not a class: keyboard users and screen readers get
the state for free, and a disabled button cannot be clicked at all. */
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: 0;
border-radius: 50%;
color: #333f48;
cursor: pointer;
transition: background-color var(--cal-speed) ease;
}
.htbb-calendar__prev::before,
.htbb-calendar__next::before {
content: '';
display: block;
width: 13px;
height: 13px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transition: transform var(--cal-speed) ease;
}
/* The glyph is a rotated corner, so nudging it back along its own diagonal is
what optically centres it in the round hit target. */
.htbb-calendar__prev::before { transform: rotate(-135deg) translate(-2px, -2px); }
.htbb-calendar__next::before { transform: rotate(45deg) translate(-2px, -2px); }
.htbb-calendar__prev:hover:not(:disabled),
.htbb-calendar__next:hover:not(:disabled) {
background: var(--cal-dark-day);
}
.htbb-calendar__prev:hover:not(:disabled)::before { transform: rotate(-135deg) translate(0, 0); }
.htbb-calendar__next:hover:not(:disabled)::before { transform: rotate(45deg) translate(-4px, -4px); }
.htbb-calendar__prev:disabled,
.htbb-calendar__next:disabled {
opacity: 0.25;
cursor: default;
}
/* ---- legend ---- */
/* Block, not flex: the markup carries a
between the two sentences, and a
inside a flex container is inert. */
.htbb-calendar__legend {
display: block;
max-width: 100%;
margin: 0 auto 1.5rem;
color: var(--cal-accent);
line-height: 1.5;
text-align: center;
text-wrap: balance;
font-weight: bold;
font-family: 'avenir next' !important;
}
.htbb-calendar__legend[hidden] {
display: none;
}
/* Sits tight under the Best Availability line when both are showing. */
.htbb-calendar__legend:not([hidden]) + .htbb-calendar__legend--talkback {
margin-top: -1rem;
}
.htbb-calendar__month p {
color: var(--cal-accent);
line-height: 1.5;
text-align: center;
text-wrap: balance;
font-weight: bold;
font-family: 'avenir next' !important;
font-size: 20px;
margin-bottom: 1em;
}
/* Sized in em and aligned on the baseline, so it tracks the legend's type at
every breakpoint instead of needing a second rule further down. */
.htbb-calendar__swatch {
display: inline-block;
width: 3.25em;
height: 1em;
vertical-align: -0.14em;
background: var(--cal-accent);
}
/* ---- grid ---- */
.htbb-calendar__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
/* Weekday strip sizes to its text; every day row after it shares height
equally, so a cell with two showtimes does not make its row taller than
the rest. grid-auto-rows rather than a fixed count, so a five-row month
draws five rows and not a dead sixth. */
grid-template-rows: auto;
grid-auto-rows: 1fr;
/* One continuous rule everywhere: the grid draws the top and left edges,
each cell draws its right and bottom. Borders on all four sides of every
cell would double up to 2px on every shared line. */
border-top: 1px solid var(--cal-ink);
border-left: 1px solid var(--cal-ink);
}
.htbb-calendar__weekday,
.htbb-calendar__day {
border-right: 2px solid #232b31;
border-bottom: 2px solid #232b31;
}
/* The band is one solid bar of ink. Its cell borders are the same ink, so the
seven columns fuse into a single block instead of showing seams. */
.htbb-calendar__weekday {
padding: 0.6rem 0.25rem;
font-family: 'avenir next' !important;
border-right-color: var(--cal-ink);
border-bottom-color: var(--cal-ink);
color: var(--cal-ink);
font-size: clamp(1rem, 0.5vw + 0.85rem, 1.25rem);
font-weight: 500;
text-align: center;
text-transform: uppercase;
}
/* Full names by default; the short form takes over once seven columns can no
longer hold "Wednesday". Adjust the breakpoint to taste — both strings are
always in the markup, so only this rule decides. */
.htbb-calendar__weekday-short {
display: none;
}
@media (max-width: 990px) {
.htbb-calendar__weekday-full {
display: none;
}
.htbb-calendar__weekday-short {
display: inline;
}
}
/* ---- day cells ---- */
.htbb-calendar__day {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
/* Square-ish cells keep all six rows the same height whatever the month. */
min-height: 6.5rem;
padding: 0.45rem 0.45rem 0.5rem;
}
/* The numeral labels the cell; the showtimes are the thing to click. Holding
the date back a little is what lets the buttons lead. */
.htbb-calendar__date {
width: 100%;
font-size: 0.875rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
opacity: 0.85;
text-align: left;
}
/* A day outside the month, used only to pad the grid. It keeps its border so
the grid reads as one unbroken block. */
.htbb-calendar__day.is-empty .htbb-calendar__date {
visibility: hidden;
}
/* A dark day is a scheduling fact, not a gap. The wash says so. */
.htbb-calendar__day.is-dark {
}
.htbb-calendar__day.is-empty {
background: none;
}
/* Fade the contents, never the cell. Dimming the whole cell would take its
border with it and leave the grid lines uneven. */
.htbb-calendar__day.is-dark .htbb-calendar__date,
.htbb-calendar__day.is-past .htbb-calendar__date {
opacity: 0.35;
}
.htbb-calendar__day.is-past .htbb-calendar__times {
opacity: 0.35;
}
/* An inset bar rather than a ring: a full outline around one cell reads as an
error state, and it fights the grid rules on all four sides. */
.htbb-calendar__day.is-today {
box-shadow: inset 0 3px 0 0 var(--cal-accent);
}
/* ---- performances ---- */
.htbb-calendar__times {
display: flex;
flex-direction: column;
gap: 0.3rem;
width: 100%;
/* Anchor the showtimes to the bottom of the cell so one-show and two-show
days still line up across a row. */
margin: auto 0 0;
padding: 0;
list-style: none;
}
.htbb-calendar__link {
display: block;
padding: 0.3rem 0.25rem;
background: none;
border: 1px solid var(--cal-button-rule);
color: #333f48;
font-size: clamp(0.8125rem, 0.5vw + 0.7rem, 1.0625rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.03em;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition:
background-color var(--cal-speed) ease,
border-color var(--cal-speed) ease,
color var(--cal-speed) ease;
}
.htbb-calendar__link:hover,
.htbb-calendar__link:focus-visible {
background: var(--cal-ink);
border-color: var(--cal-ink);
color: var(--cal-paper);
}
/* The filled block is the Best Available marker — the only showtime that gets
a background. The legend swatch above must stay in step with this rule. */
.htbb-calendar__performance.is-best-available .htbb-calendar__link {
background: var(--cal-accent);
border-color: var(--cal-accent);
color: var(--cal-paper);
}
/* Already inked, so it cannot invert on hover the way the others do. A paper
ring inside the block gives it the same amount of feedback. */
.htbb-calendar__performance.is-best-available .htbb-calendar__link:hover,
.htbb-calendar__performance.is-best-available .htbb-calendar__link:focus-visible {
box-shadow: inset 0 0 0 2px var(--cal-paper);
color: #FAC946;
}
/* Visible focus everywhere, offset so it never sits under an adjacent rule. */
.htbb-calendar__link:focus-visible,
.htbb-calendar__prev:focus-visible,
.htbb-calendar__next:focus-visible {
outline: 2px solid var(--cal-accent);
outline-offset: 2px;
}
/* Available to screen readers, invisible on screen. */
.htbb-calendar__sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------------------ *
* Narrow screens
* ------------------------------------------------------------------ */
@media (max-width: 900px) {
.htbb-calendar__day {
min-height: 4.75rem;
gap: 0.25rem;
padding: 0.3rem 0.25rem 0.35rem;
}
.htbb-calendar__date {
font-size: 0.75rem;
}
.htbb-calendar__link {
padding: 0.25rem 0.125rem;
letter-spacing: 0;
}
}
@media (max-width: 680px) {
/* Fluid rather than a fixed 56px, and the 12ch floor comes off. Together
those two were wider than a phone: the title overflowed the sheet and
pushed both arrows off the edge of the screen.
Qualified by the mount point's id so this outranks a theme rule like
`#calendar h2` whatever order the stylesheets load in — an id plus a
class beats an id plus an element. It still caps at the 3.5rem/56px the
page asked for, and only shrinks below the width where that overflows. */
#htbb-calendar .htbb-calendar__month,
#calendar h2 {
width: auto;
min-width: 0;
font-size: 30px;
}
/* Reclaim the width the two arrows need back from the gap. */
.htbb-calendar__nav {
gap: 0.125rem;
}
.htbb-calendar {
padding-top: 0;
margin: 0;
}
.htbb-calendar__nav {
margin-top: -2em;
padding-top: 35px;
}
.htbb-calendar__legend {
font-size: 14px;
}
.htbb-calendar {
padding: 15px;
}
.calendar-box>h2 {
font-size: 28px;
}
#htbb-calendar .htbb-calendar__month, #calendar h2 {
font-size: 24px;
}
.htbb-calendar__month p {
font-size: 12px;
line-height: 1;
}
}
/* ------------------------------------------------------------------ *
* List view (rendered by calendar.js below CONFIG.listBelow)
* ------------------------------------------------------------------ */
.htbb-calendar__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--cal-ink);
}
.htbb-calendar__list-day {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0;
border-bottom: 2px solid #232b31;
}
.htbb-calendar__list-date {
display: flex;
flex-direction: column;
/* Fixed column so every row's showtimes line up down the page. */
flex: 0 0 5rem;
text-align: left;
}
.htbb-calendar__list-weekday {
font-size: 0.75rem;
letter-spacing: 0.12em;
opacity: 0.7;
text-transform: uppercase;
}
.htbb-calendar__list-date time {
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.htbb-calendar__list-day .htbb-calendar__times {
flex: 1;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
/* A wrapping flex container stretches its lines to fill the cross axis, so
two showtimes on one date grew into two full-height slabs. Both of these
hold the buttons to their own height. */
align-items: center;
align-content: center;
/* Overrides the bottom-anchoring the grid cells want. */
margin: 0;
}
.htbb-calendar__list-day .htbb-calendar__performance {
flex: 1 1 8rem;
}
/* Full-size tap targets — the whole point of the list. */
.htbb-calendar__list-day .htbb-calendar__link {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.5rem 0.75rem;
}
.htbb-calendar__list-day.is-past {
opacity: 0.35;
}
.htbb-calendar__empty {
padding: 2rem 0;
text-align: center;
}
/* ------------------------------------------------------------------ *
* Reduced motion
* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.htbb-calendar__link,
.htbb-calendar__prev,
.htbb-calendar__next,
.htbb-calendar__prev::before,
.htbb-calendar__next::before {
transition: none;
}
.htbb-calendar__prev:hover:not(:disabled)::before { transform: rotate(-135deg) translate(-2px, -2px); }
.htbb-calendar__next:hover:not(:disabled)::before { transform: rotate(45deg) translate(-2px, -2px); }
}
/* ==================== css/htbb-menu.css ==================== */
/* ==========================================================
HTBB — SLIDE-OUT MENU
========================================================== */
/* ----------------------------------------------------------
HAMBURGER
---------------------------------------------------------- */
.htbb-menu-toggle {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 80px;
height: 60px;
padding: 5px;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
z-index: 1001;
}
.htbb-menu-toggle span {
display: block;
width: 100%;
height: 6px;
margin: 0;
background: #333f48;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
/* ----------------------------------------------------------
OVERLAY
---------------------------------------------------------- */
.htbb-menu-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
}
.htbb-menu-overlay.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* ----------------------------------------------------------
MENU PANEL
---------------------------------------------------------- */
.htbb-menu {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 420px;
max-width: 90vw;
height: 100vh;
height: 100dvh;
background: #fff;
transform: translateX(-100%);
visibility: hidden;
transition:
transform 0.45s ease,
visibility 0.45s ease;
overflow-y: auto;
overscroll-behavior: contain;
}
.htbb-menu.is-open {
transform: translateX(0);
visibility: visible;
}
/* ----------------------------------------------------------
CLOSE BUTTON
---------------------------------------------------------- */
.htbb-menu-close {
position: absolute;
top: 25px;
right: 25px;
width: 38px;
height: 38px;
padding: 0;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
}
.htbb-menu-close span {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 32px;
height: 2px;
background: #fff;
}
.htbb-menu-close span:first-child {
transform:
translate(-50%, -50%)
rotate(45deg);
}
.htbb-menu-close span:last-child {
transform:
translate(-50%, -50%)
rotate(-45deg);
}
/* ----------------------------------------------------------
MENU CONTENT
---------------------------------------------------------- */
.htbb-menu-inner {
display: flex;
background: #333f48;
min-height: 100%;
padding: 100px 50px 60px;
}
/* ----------------------------------------------------------
MENU LIST
---------------------------------------------------------- */
.htbb-menu-list {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.htbb-menu-item {
margin: 0;
padding: 0;
}
.htbb-menu-link {
position: relative;
display: inline-block;
font-family: 'avenir next' !important;
padding: 8px 0;
color: #fff;
font-size: 38px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
transition: opacity 0.25s ease;
}
.htbb-menu-link:hover {
opacity: 0.55;
}
/* ----------------------------------------------------------
BODY LOCK
---------------------------------------------------------- */
body.htbb-menu-open {
overflow: hidden;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 1140px) {
.htbb-menu-toggle {
width: 60px;
}
}
@media (max-width: 600px) {
.htbb-menu {
width: 85vw;
max-width: 360px;
}
.htbb-menu-inner {
padding:
90px
30px
50px;
}
.htbb-menu-link {
font-size: 28px;
}
.htbb-menu-close {
top: 20px;
right: 20px;
}
}
/* ----------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.htbb-menu,
.htbb-menu-overlay,
.htbb-menu-toggle span {
transition: none;
}
}
/* ==================== css/htbb-faqs.css ==================== */
/* ============================================================
FAQ
============================================================ */
#htbb-faq {
width: 100%;
max-width: 1390px;
margin: 0 auto;
padding: 0 20px;
}
/* Reserve a little space while Google Sheets loads. */
#htbb-faq.is-loading {
min-height: 20rem;
}
/* ------------------------------------------------------------
ITEM
------------------------------------------------------------ */
.htbb-faq__item {
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.htbb-faq__item:first-child {
}
.htbb-faq__heading {
margin: 0;
font: inherit;
font-size: 28px;
}
/* ------------------------------------------------------------
QUESTION
------------------------------------------------------------ */
.htbb-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
width: 100%;
min-height: 60px;
padding: 1.25rem 1.5rem;
background: transparent;
border: 0;
border-radius: 0;
color: #333f48;
font: inherit;
text-align: left;
cursor: pointer;
appearance: none;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.htbb-faq__label {
flex: 1;
font-family: 'avenir next' !important;
font-weight: 700;
font-size: 28px;
line-height: 1.25;
}
/* ------------------------------------------------------------
PLUS / MINUS
------------------------------------------------------------ */
.htbb-faq__icon {
--htbb-faq-icon-weight: 6px;
position: relative;
flex: 0 0 22px;
width: 22px;
height: 22px;
color: currentColor;
}
.htbb-faq__icon::before,
.htbb-faq__icon::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: var(--htbb-faq-icon-weight);
margin-top:
calc(
var(--htbb-faq-icon-weight) / -2
);
background: currentColor;
transition:
transform 0.2s ease;
}
/* Vertical portion of + */
.htbb-faq__icon::after {
transform: rotate(90deg);
}
/* Open = minus */
.htbb-faq__question[aria-expanded='true']
.htbb-faq__icon::after {
transform: rotate(0deg);
}
/* ------------------------------------------------------------
ANSWER
------------------------------------------------------------ */
.htbb-faq__answer[hidden] {
display: none;
}
.htbb-faq__answer-inner {
padding:
0
4.75rem
1.5rem
1.5rem;
color: inherit;
font-size: 26px;
font-weight: 400;
font-family: 'avenir next' !important;
line-height: 1.5;
}
.htbb-faq__answer-inner p {
margin: 0 0 1em;
}
.htbb-faq__answer-inner p:last-child {
margin-bottom: 0;
}
.htbb-faq__answer-inner a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ------------------------------------------------------------
OPEN ITEM
------------------------------------------------------------ */
.htbb-faq__item:has(
.htbb-faq__question[aria-expanded='true']
) {
background: #333f48;
color: #eae9e1;
}
.htbb-faq__item:has(
.htbb-faq__question[aria-expanded='true']
)
.htbb-faq__question {
color: #eae9e1 !important;
}
.htbb-faq__item:has(
.htbb-faq__question[aria-expanded='true']
)
.htbb-faq__answer-inner {
color: #eae9e1;
}
/* ------------------------------------------------------------
FOCUS
------------------------------------------------------------ */
.htbb-faq__question:focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 640px) {
.htbb-faq__question {
gap: 1.25rem;
min-height: 54px;
padding: 1rem;
}
.htbb-faq__label {
font-size: 18px;
-webkit-hyphens: none !important;
hyphens: none !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
.htbb-faq__icon {
flex-basis: 18px;
width: 18px;
height: 18px;
}
.htbb-faq__answer-inner {
font-size: 16px;
padding:
0
3.25rem
1.25rem
1rem;
}
#htbb-faq {
padding: 0;
}
.htbb-faq__question {
padding: 1rem 10px;
}
.htbb-faq__answer-inner {
padding: 0 10px 1rem;
}
}
@media (max-width: 500px) {
.htbb-faq__label {
font-size: 15px;
}
}
/* ==================== css/htbb-cast-creative.css ==================== */
/* ==========================================================
HTBB — CAST
========================================================== */
.htbb-cast {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0px 25px 60px;
}
/* ----------------------------------------------------------
GRID
---------------------------------------------------------- */
.htbb-cast__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 45px 40px;
}
/* ----------------------------------------------------------
CAST CARD
---------------------------------------------------------- */
.htbb-cast__card {
min-width: 0;
margin: 0;
}
.htbb-cast__button {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
text-align: inherit;
cursor: pointer;
}
/* ----------------------------------------------------------
IMAGE
---------------------------------------------------------- */
.htbb-cast__image-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: #000;
}
.htbb-cast__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.35s ease,
opacity 0.35s ease;
}
.htbb-cast__button:hover .htbb-cast__image {
transform: scale(1.025);
}
/* ----------------------------------------------------------
CARD TEXT
---------------------------------------------------------- */
.htbb-cast__info {
padding: 10px 8px 12px;
background: #000;
color: #fff;
text-align: center;
min-height: 105px;
display: flex;
flex-direction: column;
justify-content: center;
}
.htbb-cast__name {
margin: 0;
letter-spacing: 0px;
color: #ebe9e1;
font-family: "avenir next", sans-serif !important;
font-size: 18px;
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
}
.htbb-cast__role {
margin: 3px 0 0;
color: #ebe9e1;
font-family: "avenir next", sans-serif !important;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 1.1;
text-transform: uppercase;
}
/* ==========================================================
MODAL
========================================================== */
.htbb-cast-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.htbb-cast-modal.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.htbb-cast-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.8);
}
.htbb-cast-modal__dialog {
/* position: relative; */
z-index: 1;
width: 100%;
max-width: 1100px;
max-height: calc(100dvh - 80px);
overflow-y: auto;
background: #eae9e1;
}
/* ----------------------------------------------------------
MODAL CONTENT
---------------------------------------------------------- */
.htbb-cast-modal__inner {
display: grid;
grid-template-columns: minmax(250px, 35%) 1fr;
gap: 50px;
padding: 60px;
}
.htbb-cast-modal__photo {
width: 100%;
}
.htbb-cast-modal__photo img {
display: block;
width: 100%;
height: auto;
}
.htbb-cast-modal__name {
margin: 0;
color: #333f48;
font-family: "alternate-gothic-condensed-a", sans-serif !important;
font-size: 48px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.htbb-cast-modal__role {
margin: 5px 0 25px;
color: #333f48;
font-family: "avenir next", sans-serif !important;
font-size: 18px;
font-style: italic;
text-transform: uppercase;
}
.htbb-cast-modal__bio,
.htbb-cast-modal__bio p {
color: #333f48;
font-family: "century-gothic", sans-serif !important;
font-size: 17px;
line-height: 1.6;
}
.htbb-cast-modal__bio p:first-child {
margin-top: 0;
}
.htbb-cast-modal__bio p:last-child {
margin-bottom: 0;
}
.htbb-cast-modal__name br {
display: none;
}
.htbb-cast-modal__name .htbb-cast__name-break {
margin: 0 6px;
}
/* ==========================================================
CAST MODAL — PREVIOUS / NEXT
========================================================== */
.htbb-cast-modal__nav {
pointer-events: none;
}
.htbb-cast-modal__arrow {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
padding: 0;
border: 0;
background: transparent;
color: #FAC946;
cursor: pointer;
transform: translateY(-50%);
transition:
opacity 0.2s ease,
transform 0.2s ease;
pointer-events: auto;
}
.htbb-cast-modal__arrow span {
display: block;
font-family: Arial, sans-serif;
font-size: 64px;
font-weight: 300;
line-height: 1;
}
.htbb-cast-modal__arrow--prev {
left: 20px;
}
.htbb-cast-modal__arrow--next {
right: 20px;
}
.htbb-cast-modal__arrow:hover,
.htbb-cast-modal__arrow:focus-visible {
opacity: 0.7;
}
.htbb-cast-modal__arrow--prev:hover {
transform: translate(-4px, -50%);
}
.htbb-cast-modal__arrow--next:hover {
transform: translate(4px, -50%);
}
/* ==========================================================
CAST MODAL ARROWS — MOBILE
========================================================== */
@media (max-width: 760px) {
.htbb-cast-modal__arrow {
width: 40px;
height: 50px;
}
.htbb-cast-modal__arrow span {
font-size: 48px;
}
.htbb-cast-modal__arrow--prev {
left: 5px;
}
.htbb-cast-modal__arrow--next {
right: 5px;
}
}
/* ----------------------------------------------------------
SOCIALS
---------------------------------------------------------- */
.htbb-cast-modal__socials {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
}
.htbb-cast-modal__socials a {
color: #333f48;
font-family: "avenir next", sans-serif !important;
font-size: 14px;
font-weight: 700;
text-decoration: underline;
text-transform: uppercase;
}
/* ----------------------------------------------------------
CLOSE
---------------------------------------------------------- */
.htbb-cast-modal__close {
position: relative;
top: 10px;
right: 10px;
z-index: 2;
display: block;
width: 40px;
height: 40px;
margin-left: auto;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.htbb-cast-modal__close span {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 2px;
background: #333f48;
}
.htbb-cast-modal__close span:first-child {
transform: translate(-50%, -50%) rotate(45deg);
}
.htbb-cast-modal__close span:last-child {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* ----------------------------------------------------------
BODY LOCK
---------------------------------------------------------- */
body.htbb-cast-modal-open {
overflow: hidden;
}
/* ==========================================================
TABLET
========================================================== */
@media (max-width: 900px) {
.htbb-cast__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 25px;
}
.htbb-cast-modal__inner {
gap: 35px;
padding: 50px 40px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 600px) {
.htbb-cast {
padding: 40px 20px;
}
.htbb-cast__grid {
gap: 25px 15px;
}
.htbb-cast__name {
font-size: 15px;
}
.htbb-cast__role {
font-size: 13px;
}
.htbb-cast-modal {
padding: 15px;
}
.htbb-cast-modal__dialog {
max-height: calc(100dvh - 30px);
}
.htbb-cast-modal__inner {
grid-template-columns: 1fr;
gap: 25px;
padding: 55px 25px 35px;
}
.htbb-cast-modal__photo {
max-width: 300px;
margin: 0 auto;
}
.htbb-cast-modal__name {
font-size: 38px;
}
}
@media (max-width: 500px) {
.htbb-cast__name br {
display: none;
}
.htbb-cast__name-break::before {
content: " ";
}
.htbb-cast__name {
font-size: 13px;
}
.htbb-cast__role {
font-size: 11px;
}
.htbb-cast__info {
padding: 10px 4px;
}
.header-bar h2 {
font-size: 30px;
padding: 10px;
}
.htbb-cast__info {
min-height: 85px;
}
}
@media (max-width: 415px) {
.htbb-cast__name {
font-size: 10px;
}
.htbb-cast__role {
font-size: 9px;
}
.htbb-cast__info {
padding: 10px 2px;
}
}
/* ==========================================================
REDUCED MOTION
========================================================== */
@media (prefers-reduced-motion: reduce) {
.htbb-cast__image,
.htbb-cast-modal {
transition: none;
}
}
/* ==================== css/htbb-creative.css ==================== */
/* ============================================================
HTBB — CREATIVE
============================================================ */
.htbb-creative {
width: 1350px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 2em;
}
.htbb-creative__grid {
display: flex;
flex-direction: column;
gap: 28px;
}
.htbb-creative__row {
display: grid;
grid-template-columns:
repeat(
var(--creative-columns),
minmax(0, 1fr)
);
gap: 28px 8rem;
width: auto;
margin-inline: auto;
}
.htbb-creative__info {
font-family: 'avenir next' !important;
color: #333f48;
}
/* ------------------------------------------------------------
CARD
------------------------------------------------------------ */
.htbb-creative__card {
min-width: 0;
text-align: center;
}
.htbb-creative__button {
display: block;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: center;
}
button.htbb-creative__button {
cursor: pointer;
}
.htbb-creative__button--static {
cursor: default;
}
/* ------------------------------------------------------------
ROLE / NAME
------------------------------------------------------------ */
.htbb-creative__role {
margin: 0 0 2px;
font-size: clamp(26px, 2vw, 34px);
font-weight: 400;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #333f48;
font-family: 'avenir next' !important;
}
.htbb-creative__name {
margin: 0;
font-size: clamp(28px, 2.2vw, 36px);
font-weight: 700;
line-height: 0.95;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #333f48;
font-family: 'avenir next' !important;
}
.htbb-creative__name span {
font-weight: 400;
}
.htbb-creative__name span.htbb-creative__last-name {
font-weight: 700;
}
/* One-person row: first + last name on same line */
.htbb-creative__row[style*="--creative-columns: 1"] .htbb-creative__name br {
display: none;
}
.htbb-creative__row[style*="--creative-columns: 1"] .htbb-creative__last-name::before {
content: " ";
}
/* Bio indication */
.htbb-creative__card--has-bio .htbb-creative__button {
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.htbb-creative__card--has-bio .htbb-creative__button:hover {
opacity: 0.65;
}
.htbb-creative__card--has-bio .htbb-creative__button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 8px;
}
/* ============================================================
MODAL
============================================================ */
.htbb-creative-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
}
.htbb-creative-modal.is-open {
display: block;
}
.htbb-creative-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
}
.htbb-creative-modal__dialog {
position: absolute;
top: 50%;
left: 50%;
width: min(900px, calc(100% - 40px));
max-height: calc(100vh - 60px);
overflow-y: auto;
transform: translate(-50%, -50%);
background: #f1efe5;
padding: 60px;
}
body.htbb-creative-modal-open {
overflow: hidden;
}
/* ------------------------------------------------------------
CLOSE
------------------------------------------------------------ */
.htbb-creative-modal__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 3;
width: 32px;
height: 32px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.htbb-creative-modal__close span {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 2px;
background: currentColor;
}
.htbb-creative-modal__close span:first-child {
transform:
translate(-50%, -50%)
rotate(45deg);
}
.htbb-creative-modal__close span:last-child {
transform:
translate(-50%, -50%)
rotate(-45deg);
}
/* ------------------------------------------------------------
MODAL CONTENT
------------------------------------------------------------ */
.htbb-creative-modal__details {
max-width: 720px;
margin-inline: auto;
}
.htbb-creative-modal__name {
margin: 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1;
text-transform: uppercase;
}
.htbb-creative-modal__role {
margin-top: 8px;
font-size: 20px;
text-transform: uppercase;
}
.htbb-creative-modal__bio {
margin-top: 30px;
}
.htbb-creative-modal__bio p {
margin:
0
0
1em;
}
.htbb-creative-modal__bio p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------
SOCIALS
------------------------------------------------------------ */
.htbb-creative-modal__socials {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
margin-top: 30px;
}
/* ------------------------------------------------------------
MODAL ARROWS
------------------------------------------------------------ */
.htbb-creative-modal__nav {
pointer-events: none;
}
.htbb-creative-modal__arrow {
position: fixed;
top: 50%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 70px;
padding: 0;
border: 0;
background: none;
font-size: 60px;
font-family: Arial, sans-serif;
font-weight: 300;
line-height: 1;
cursor: pointer;
pointer-events: auto;
transform: translateY(-50%);
}
.htbb-creative-modal__arrow--prev {
left: 10px;
}
.htbb-creative-modal__arrow--next {
right: 10px;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
/*
* Ignore the PER ROW grouping on mobile.
* The JS row wrappers remain in the DOM, but display: contents
* allows every creative card to participate in one continuous
* two-column grid.
*/
.htbb-creative__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 16px;
}
.htbb-creative__row {
display: contents;
}
.htbb-creative__card {
width: 100%;
min-width: 0;
}
/*
* On desktop, one-person rows suppress the automatic
* between first and last name.
*
* Once the rows are flattened on mobile, restore that break
* so names fit properly inside their two-column card.
*/
.htbb-creative__row[style*="--creative-columns: 1"] .htbb-creative__name br {
display: initial;
}
.htbb-creative__row[style*="--creative-columns: 1"] .htbb-creative__last-name::before {
content: none;
}
/* Modal */
.htbb-creative-modal__dialog {
width: calc(100% - 24px);
max-height: calc(100vh - 24px);
padding: 55px 30px 40px;
}
.htbb-creative-modal__arrow {
width: 34px;
font-size: 46px;
}
}
@media (max-width: 500px) {
/*
* Continue the flattened layout,
* but switch everything to one column.
*/
.htbb-creative__grid {
grid-template-columns: minmax(0, 1fr);
gap: 18px 16px;
}
.htbb-creative__role {
font-size: 18px;
}
.htbb-creative__name {
font-size: 22px;
}
.htbb-creative {
padding-top: 25px;
}
.htbb-creative__name br {
display: none !important;
}
.htbb-creative__name .htbb-creative__last-name {
margin: 0 6px;
}
}
@media (max-width: 415px) {
.htbb-creative__role {
font-size: 14px;
}
.htbb-creative__name {
font-size: 18px;
}
}