.section--light { background-color: var(--text-light); color: var(--text-dark); } .section--light :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--text-dark); } .section--light a:not(.brxe-button) { color: var(--primary-ultra-dark); font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } .section--light a:not(.brxe-button):hover, .section--light a:not(.brxe-button):focus-visible { text-decoration-thickness: 0.14em; }  .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: color-mix(in oklch, var(--base) 94%, transparent); border-block-end: 1px solid color-mix(in oklch, var(--primary) 18%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .site-header__container { display: flex; flex-direction: row; flex-wrap: wrap; inline-size: 100%; align-items: center; column-gap: var(--space-m); row-gap: var(--space-s); padding-block: var(--space-s); } .site-header__brand { min-inline-size: 0; order: 1; } .site-header__brand-text { color: var(--text-light); font-family: var(--heading-font-family); font-weight: 700; } .site-header__cta { order: 2; margin-inline-start: auto; } .site-header__nav { order: 3; flex-basis: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-xs) var(--space-s); min-inline-size: 0; } .site-header__nav-link { color: var(--text-light-muted); font-size: var(--text-s); font-weight: 600; transition: color var(--transition-duration) var(--transition-timing); } .site-header__nav-link:hover, .site-header__nav-link:focus-visible { color: var(--primary); } @media (min-width: 992px) { .site-header__brand { order: 0; } .site-header__nav { order: 0; flex: 1; flex-basis: auto; } .site-header__cta { order: 0; margin-inline-start: 0; } }  .site-footer { background-color: var(--base); border-block-start: 1px solid color-mix(in oklch, var(--primary) 18%, transparent); color: var(--text-light); padding-block: var(--section-space-s); } .site-footer__container { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; margin-inline: auto; gap: var(--space-l); } .site-footer__brand { display: grid; gap: var(--space-xs); } .site-footer__brand-text { color: var(--text-light); font-family: var(--heading-font-family); font-weight: 700; } .site-footer__description { color: var(--text-light-muted); max-inline-size: 44rem; } .site-footer__links { display: grid; gap: var(--space-xs); justify-items: start; } .site-footer__link { color: var(--text-light-muted); font-size: var(--text-s); font-weight: 600; transition: color var(--transition-duration) var(--transition-timing); } .site-footer__link:hover, .site-footer__link:focus-visible { color: var(--primary); } .site-footer__copyright { grid-column: 1 / -1; color: var(--text-light-muted); font-size: var(--text-xs); border-block-start: 1px solid color-mix(in oklch, var(--primary) 12%, transparent); padding-block-start: var(--space-m); } @media (min-width: 768px) { .site-footer__container { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl); } }  .event-card-grid, .media-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); inline-size: 100%; gap: var(--space-m); align-items: stretch; } .event-card, .media-card { min-inline-size: 0; background: radial-gradient(circle at top right, color-mix(in oklch, var(--primary) 12%, transparent), transparent 42%), var(--base-light); border: 1px solid color-mix(in oklch, var(--primary) 24%, transparent); border-radius: var(--radius); transition: border-color var(--transition-duration) var(--transition-timing), background-color var(--transition-duration) var(--transition-timing), transform var(--transition-duration) var(--transition-timing); } .event-card { display: flex; flex-direction: column; gap: var(--space-s); block-size: 100%; padding: var(--space-m); } .media-card { display: flex; flex-direction: column; block-size: 100%; overflow: hidden; } .event-card:hover, .event-card:focus-within, .media-card:hover, .media-card:focus-within { border-color: color-mix(in oklch, var(--primary) 48%, transparent); background-color: var(--base-ultra-light); } @media (prefers-reduced-motion: no-preference) { .event-card:hover, .event-card:focus-within, .media-card:hover, .media-card:focus-within { transform: translateY(-4px); } } .event-card--featured { border-color: color-mix(in oklch, var(--primary) 60%, transparent); } .event-card :is(h1, h2, h3, h4, h5, h6), .media-card__heading { color: var(--text-light); } .event-card :is(p, .brxe-text-basic), .media-card__meta { color: var(--text-light-muted); } .event-card .brxe-button { align-self: flex-start; margin-block-start: auto; } .media-card__image { display: block; inline-size: 100%; overflow: hidden; } .media-card__image img, img.media-card__image { display: block; inline-size: 100%; aspect-ratio: 16 / 9;  object-fit: cover; object-position: center; } @media (prefers-reduced-motion: no-preference) { .media-card__image img { transition: transform var(--transition-duration) var(--transition-timing); } .media-card:hover .media-card__image img { transform: scale(1.03); } } .media-card__heading { padding: var(--space-m) var(--space-m) 0; } .media-card__meta { padding: var(--space-s) var(--space-m) var(--space-m); }  .home-hero__actions, .home-trilogy__actions, .home-final-cta__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-m); min-inline-size: 0; } .home-final-cta__actions { justify-content: center; }  .home-hero { background: radial-gradient(circle at 78% 18%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 34%), radial-gradient(circle at 20% 80%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 32%), var(--base); color: var(--text-light); padding-block: var(--section-space-l); } .home-hero__container { display: grid; align-content: center; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .home-hero__heading { color: var(--text-light); max-inline-size: 13ch; } .home-hero__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 58rem; } @media (min-width: 768px) { .home-hero__container { min-block-size: clamp(24rem, 55svh, 42rem); } }  .home-events { background-color: var(--base); color: var(--text-light); padding-block: var(--section-space-m); } .home-events__container { display: grid; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .home-events__heading { color: var(--text-light); } .home-events__text { color: var(--text-light-muted); max-inline-size: 58rem; }  .home-trilogy { background: radial-gradient(circle at 18% 20%, color-mix(in oklch, var(--accent) 15%, transparent), transparent 34%), radial-gradient(circle at 82% 70%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 32%), var(--base); color: var(--text-light); border-block: 1px solid color-mix(in oklch, var(--primary) 18%, transparent); padding-block: var(--section-space-m); } .home-trilogy__container { display: grid; inline-size: 100%; max-inline-size: 76rem; margin-inline: auto; gap: var(--space-m); } .home-trilogy__eyebrow, .home-media__eyebrow, .home-final-cta__eyebrow { color: var(--primary); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .home-trilogy__heading { color: var(--text-light); max-inline-size: 18ch; } .home-trilogy__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 60rem; }  .home-media { background-color: var(--base); color: var(--text-light); padding-block: var(--section-space-m); } .home-media__container { display: grid; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .home-media__heading { color: var(--text-light); max-inline-size: 20ch; } .home-media__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 58rem; }  .home-final-cta { background: radial-gradient(circle at 50% 10%, color-mix(in oklch, var(--primary) 17%, transparent), transparent 40%), radial-gradient(circle at 16% 84%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 34%), var(--base); color: var(--text-light); border-block: 1px solid color-mix(in oklch, var(--primary) 18%, transparent); padding-block: var(--section-space-m); } .home-final-cta__container { display: grid; justify-items: center; inline-size: 100%; max-inline-size: 76rem; margin-inline: auto; gap: var(--space-m); text-align: center; } .home-final-cta__heading { color: var(--text-light); max-inline-size: 20ch; } .home-final-cta__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 58rem; }  .trilogy-hero { background: radial-gradient(circle at 80% 15%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 36%), radial-gradient(circle at 15% 85%, color-mix(in oklch, var(--primary) 14%, transparent), transparent 32%), var(--base); color: var(--text-light); padding-block: var(--section-space-l); } .trilogy-hero__container { display: grid; align-content: center; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .trilogy-hero__eyebrow { color: var(--primary); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .trilogy-hero__heading { color: var(--text-light); max-inline-size: 15ch; } .trilogy-hero__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 58rem; } .trilogy-hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-m); min-inline-size: 0; } .trilogy-pillars, .trilogy-roles, .trilogy-spaces, .trilogy-faq { background-color: var(--base); color: var(--text-light); padding-block: var(--section-space-m); } .trilogy-pillars__container, .trilogy-roles__container, .trilogy-spaces__container, .trilogy-faq__container, .trilogy-identity__container { display: grid; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); inline-size: 100%; gap: var(--space-m); } .pillar-card { min-inline-size: 0; display: grid; gap: var(--space-xs); padding: var(--space-m); background-color: var(--base-light); border: 1px solid color-mix(in oklch, var(--primary) 24%, transparent); border-radius: var(--radius); } .pillar-card__title { color: var(--primary); } .pillar-card__text { color: var(--text-light-muted); } .trilogy-roles__text { color: var(--text-light-muted); max-inline-size: 58rem; } .trilogy-roles__list { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); min-inline-size: 0; }  .role-chip { color: var(--accent-light); border: 1px solid color-mix(in oklch, var(--accent-light) 45%, transparent); border-radius: 999px; padding: 0.35em 0.9em; font-size: var(--text-s); font-weight: 600; } .trilogy-identity__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); } @media (min-width: 768px) { .trilogy-identity__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .trilogy-faq__item { display: grid; gap: var(--space-xs); padding-block: var(--space-m); border-block-start: 1px solid color-mix(in oklch, var(--primary) 12%, transparent); } .trilogy-faq__q { color: var(--text-light); } .trilogy-faq__a { color: var(--text-light-muted); max-inline-size: 60rem; }  .events-hero { background: radial-gradient(circle at 82% 20%, color-mix(in oklch, var(--primary) 15%, transparent), transparent 34%), var(--base); color: var(--text-light); padding-block: var(--section-space-m); } .events-hero__container { display: grid; inline-size: 100%; margin-inline: auto; gap: var(--space-s); } .events-hero__eyebrow { color: var(--primary); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .events-hero__heading { color: var(--text-light); max-inline-size: 16ch; } .events-hero__text { color: var(--text-light-muted); font-size: var(--text-l); max-inline-size: 58rem; } .events-featured, .events-upcoming, .events-past { background-color: var(--base); color: var(--text-light); padding-block: var(--section-space-m); } .events-featured__container, .events-upcoming__container, .events-past__container { display: grid; inline-size: 100%; margin-inline: auto; gap: var(--space-m); } .featured-event { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; min-inline-size: 0; background-color: var(--base-light); border: 1px solid color-mix(in oklch, var(--primary) 32%, transparent); border-radius: var(--radius); overflow: hidden; } .featured-event__media { min-inline-size: 0; } .featured-event__media img { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; } .featured-event__body { display: grid; align-content: center; gap: var(--space-xs); padding: var(--space-l); min-inline-size: 0; } .featured-event__date { color: var(--primary); font-size: var(--text-s); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .featured-event__heading { color: var(--text-light); } .featured-event__meta { color: var(--text-light-muted); font-size: var(--text-s); } .featured-event__text { color: var(--text-light-muted); } .featured-event__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-block-start: var(--space-s); min-inline-size: 0; } @media (min-width: 768px) { .featured-event { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .featured-event__media img { aspect-ratio: auto; } } .event-list { display: grid; grid-template-columns: minmax(0, 1fr); inline-size: 100%; max-inline-size: 62rem; gap: var(--space-m); } .events-past__text { color: var(--text-light-muted); max-inline-size: 58rem; }  .event-single__panel { background-color: var(--base-light); border-radius: var(--radius); padding: var(--space-m); }  .status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: var(--space-xs) var(--space-s); font-size: var(--text-s); font-weight: 600; border: 1px solid transparent; } .status-badge--success, .status-badge[data-event-status="scheduled"][data-ticket-status="on_sale"], .status-badge[data-event-status="scheduled"][data-ticket-status="free"] { color: var(--success); border-color: color-mix(in oklch, var(--success) 45%, transparent); } .status-badge--warning, .status-badge[data-event-status="postponed"], .status-badge[data-event-status="scheduled"][data-ticket-status="low"] { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 45%, transparent); } .status-badge--danger, .status-badge[data-event-status="cancelled"], .status-badge[data-event-status="scheduled"][data-ticket-status="sold_out"] { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 45%, transparent); } .status-badge--info, .status-badge[data-event-status="rescheduled"], .status-badge[data-event-status="scheduled"][data-ticket-status="at_door"] { color: var(--info); border-color: color-mix(in oklch, var(--info) 45%, transparent); } .status-badge--neutral, .status-badge[data-event-status="completed"] { color: var(--text-light); background-color: var(--base-ultra-light); }  .section--light .status-badge--success, .section--light .status-badge[data-event-status="scheduled"][data-ticket-status="on_sale"], .section--light .status-badge[data-event-status="scheduled"][data-ticket-status="free"] { color: var(--success-semi-dark); border-color: color-mix(in oklch, var(--success-semi-dark) 60%, transparent); } .section--light .status-badge--warning, .section--light .status-badge[data-event-status="postponed"], .section--light .status-badge[data-event-status="scheduled"][data-ticket-status="low"] { color: var(--warning-semi-dark); border-color: color-mix(in oklch, var(--warning-semi-dark) 60%, transparent); } .section--light .status-badge--danger, .section--light .status-badge[data-event-status="cancelled"], .section--light .status-badge[data-event-status="scheduled"][data-ticket-status="sold_out"] { color: var(--danger-semi-dark); border-color: color-mix(in oklch, var(--danger-semi-dark) 60%, transparent); } .section--light .status-badge--info, .section--light .status-badge[data-event-status="rescheduled"], .section--light .status-badge[data-event-status="scheduled"][data-ticket-status="at_door"] { color: var(--info-semi-dark); border-color: color-mix(in oklch, var(--info-semi-dark) 60%, transparent); } body { background: radial-gradient(circle at 15% 22%, rgba(221, 171, 36, 0.10), transparent 32%), linear-gradient(180deg, #0b0b0d 0%, #101013 55%, #0b0b0d 100%) !important; } #brx-content { background: transparent !important; }