/* ==========================================================================
CDMOworld Gutenberg Blocks — Frontend Styles
Mirrors cdm.html section CSS exactly.
========================================================================== */
/* ==========================================================================
THEME COMPATIBILITY
All the rules in this section are scoped to body.has-cdmw-blocks so they
only affect pages that actually use our blocks. They do NOT change the
layout of regular blog posts, About pages, archives, etc.
The .has-cdmw-blocks body class is added by gp-custom-widgets.php via the
body_class filter when the post contains any cdmw/* block.
========================================================================== */
/* 1. Force every CDMW section to be full-viewport-width so the colored
backgrounds bleed edge-to-edge regardless of the theme container. */
body.has-cdmw-blocks .hero,
body.has-cdmw-blocks .event-bar,
body.has-cdmw-blocks .latest-articles,
body.has-cdmw-blocks .news-capsules,
body.has-cdmw-blocks .expert-post,
body.has-cdmw-blocks .summer-section,
body.has-cdmw-blocks .studios,
body.has-cdmw-blocks .facility,
body.has-cdmw-blocks .events {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
position: relative;
left: 0;
right: 0;
}
/* 2. Remove vertical gaps the theme adds between our block sections. */
body.has-cdmw-blocks .entry-content > .hero,
body.has-cdmw-blocks .entry-content > .event-bar,
body.has-cdmw-blocks .entry-content > .latest-articles,
body.has-cdmw-blocks .entry-content > .news-capsules,
body.has-cdmw-blocks .entry-content > .expert-post,
body.has-cdmw-blocks .entry-content > .summer-section,
body.has-cdmw-blocks .entry-content > .studios,
body.has-cdmw-blocks .entry-content > .facility,
body.has-cdmw-blocks .entry-content > .events {
margin-top: 0;
margin-bottom: 0;
}
/* 3. Reset .entry-content padding ONLY on CDMW pages so colored sections
can fully bleed. Other pages keep their normal theme spacing. */
body.has-cdmw-blocks .entry-content,
body.has-cdmw-blocks .inside-article,
body.has-cdmw-blocks .post-image,
body.has-cdmw-blocks article.post {
padding: 0;
margin: 0;
}
/* 4. Hide the WordPress page title only on CDMW pages
(the theme already hides its own .entry-title elsewhere). */
body.has-cdmw-blocks .entry-header,
body.has-cdmw-blocks .page-header {
display: none;
}
/* 5. Drop empty blocks that core sometimes inserts between block sections. */
body.has-cdmw-blocks .entry-content > p:empty {
display: none;
}
/* Make sure inline SVGs in our blocks behave consistently */
.hero svg, .event-bar svg, .latest-articles svg, .news-capsules svg,
.expert-post svg, .summer-section svg, .studios svg, .facility svg, .events svg {
display: inline-block;
vertical-align: middle;
}
/* Override theme's aggressive heading sizes so our cards stay compact */
.hero h1.slide-title,
.hero h3.card-title,
.hero h3.ad-title,
.event-bar .event-title,
.latest-articles .latest-articles__title,
.latest-articles .cat-card__title,
.latest-articles .article-headline,
.news-capsules .news-capsules__title,
.news-capsules .capsule-feature__title,
.news-capsules .capsule-signup__title,
.expert-post .expert-post__title,
.expert-post .expert-feature__title,
.expert-post .expert-mini__title,
.summer-section .summer-title,
.studios .studios__title,
.studios .studio-card__title,
.facility .facility__title,
.facility .facility-video__name,
.facility .facility-panel__title,
.facility .facility-spot__title,
.events .events__title,
.events .event-card__title,
.events .event-live__title {
font-family: var(--cdmw-font) !important;
letter-spacing: normal !important;
}
/* Latest Articles headlines use
which the theme makes huge — keep ours small */
.latest-articles .article-headline {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.375 !important;
margin: 0 0 3px !important;
color: hsl(var(--cdmw-primary)) !important;
}
.latest-articles .cat-card__title {
font-size: 13px !important;
font-weight: 700 !important;
color: #fff !important;
margin: 0 !important;
}
.expert-post .expert-mini__title {
font-size: 14px !important;
font-weight: 700 !important;
margin: 0 0 2px !important;
}
/* Ensure list bullets removed from our blocks build (theme might add them).
Spacing is handled by the section-specific rules; we only kill list-style here. */
.news-capsules .capsule-list,
.facility .facility-panel__list {
list-style: none !important;
padding-left: 0 !important;
}
.news-capsules .capsule-list li { margin: 0 !important; padding: 0 !important; }
/* ---------- Design Tokens ---------- */
:root {
--cdmw-bg: 210 20% 98%;
--cdmw-fg: 230 44% 16%;
--cdmw-primary: 230 44% 16%;
--cdmw-secondary: 199 92% 56%;
--cdmw-hero-bg: 199 92% 35%;
--cdmw-muted: 210 20% 96%;
--cdmw-muted-fg: 220 9% 46%;
--cdmw-border: 220 13% 91%;
--cdmw-slate-300: 215 20% 81%;
--cdmw-slate-600: 215 19% 35%;
--cdmw-slate-700: 215 25% 27%;
--cdmw-slate-900: 222 47% 11%;
--cdmw-orange: 24 95% 53%;
--cdmw-orange-dark: 21 90% 48%;
--cdmw-lavender: 250 95% 85%;
--cdmw-radius: 0.375rem;
--cdmw-shadow-card: 0 4px 6px -1px rgb(0 0 0 / .05), 0 2px 4px -2px rgb(0 0 0 / .05);
--cdmw-shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);
--cdmw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .10), 0 10px 10px -5px rgb(0 0 0 / .04);
--cdmw-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ---------- Section container ---------- */
.section-container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
width: 100%;
}
@media (min-width: 640px) { .section-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .section-container { padding: 0 2rem; } }
/* ==========================================================================
HERO SECTION
========================================================================== */
.hero {
background-color: hsl(var(--cdmw-hero-bg));
}
.hero .section-container {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.hero-grid {
display: grid;
grid-template-columns: 1.35fr 1fr 180px;
gap: 1.25rem;
align-items: stretch;
}
/* Lead Slider */
.lead-slider {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: var(--cdmw-shadow-elevated);
}
.slides-stage {
position: relative;
height: 320px;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s ease;
pointer-events: none;
}
.slide.is-active {
opacity: 1;
pointer-events: auto;
}
.slide > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.40) 50%, rgba(0,0,0,0) 100%);
}
.slide-content {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.25rem;
color: #fff;
}
.slide-eyebrow {
display: inline-block;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
background: rgba(255,255,255,.20);
padding: 4px 10px;
border-radius: 9999px;
margin-bottom: 8px;
color: #fff;
}
.slide-title {
font-family: var(--cdmw-font);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 8px;
color: #fff;
}
.slide-dek {
font-size: 0.875rem;
color: rgba(255,255,255,.90);
margin: 0 0 12px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.read-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: hsl(var(--cdmw-secondary));
font-weight: 600;
font-size: 0.75rem;
padding: 8px 14px;
border-radius: 0.5rem;
text-decoration: none;
transition: background .2s;
}
.read-btn:hover { background: rgba(255,255,255,.90); }
.read-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.slider-arrow {
position: absolute;
top: 32%;
transform: translateY(-50%);
background: rgba(0,0,0,.50);
color: #fff;
border: 0;
border-radius: 9999px;
padding: 6px;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
}
.slider-arrow:hover { background: rgba(0,0,0,.70); }
.slider-arrow.prev { left: 8px; }
.slider-arrow.next { right: 8px; }
.slider-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dots {
position: absolute;
top: 12px; right: 12px;
display: flex;
gap: 6px;
z-index: 5;
}
.dot {
height: 6px; width: 6px;
border-radius: 9999px;
background: rgba(255,255,255,.50);
border: 0; padding: 0;
cursor: pointer;
transition: width .3s, background .3s;
}
.dot.is-active { width: 20px; background: #fff; }
/* Stacked cards — min height matches .slides-stage so the middle column
stays visually aligned with the lead slider (matches cdm.html intent). */
.cards-stack {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 12px;
align-self: stretch;
min-height: 320px;
box-sizing: border-box;
}
.card {
background: #fff;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: var(--cdmw-shadow-card);
display: flex;
color: inherit;
text-decoration: none;
transition: box-shadow .2s, transform .2s;
min-height: 0;
}
.card:hover { box-shadow: var(--cdmw-shadow-elevated); transform: translateY(-2px); }
.card > img { width: 128px; height: 100%; object-fit: cover; flex-shrink: 0; display: block; }
.card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.card-eyebrow { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--cdmw-secondary)); }
.card-title {
font-family: var(--cdmw-font);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.375;
margin: 4px 0 0;
color: hsl(var(--cdmw-primary));
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color .2s;
}
.card:hover .card-title { color: hsl(var(--cdmw-secondary)); }
.card-dek {
font-size: 11px;
color: hsl(var(--cdmw-slate-600));
margin: 6px 0 0;
line-height: 1.375;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Ad card */
.ad-card { display: block; height: 100%; min-height: 320px; }
.ad-link {
display: block;
position: relative;
height: 100%;
min-height: 320px;
border-radius: 0.5rem;
overflow: hidden;
background: #000;
box-shadow: var(--cdmw-shadow-xl);
color: #fff;
text-decoration: none;
}
.ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; display: block; }
.ad-link:hover .ad-img { transform: scale(1.05); }
.ad-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.70) 0%, rgba(0,0,0,.20) 50%, rgba(0,0,0,.90) 100%);
}
.ad-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; }
.ad-eyebrow { font-size: 9px; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; color: rgba(255,255,255,.70); margin: 0 0 4px; }
.ad-title { font-size: 1.125rem; font-weight: 900; line-height: 1.05; color: rgb(196,181,253); margin: 0; word-break: break-word; }
.ad-dek { font-size: 10px; font-weight: 500; color: rgba(255,255,255,.90); line-height: 1.375; margin: 0 0 8px; }
.ad-btn {
display: inline-flex; align-items: center; gap: 4px;
background: #c4b5fd; color: #000; font-weight: 900;
padding: 6px 10px; border-radius: 0.375rem; font-size: 10px; transition: background .2s;
}
.ad-btn:hover { background: #fff; }
.ad-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Hero responsive
OLD: hid .ad-card below 1023px → many laptop widths lost the promo column
and looked broken vs cdm.html. Keep 3-column layout wider; tuck promo
into its own row on smaller tablets instead of nuking it. */
@media (max-width: 1023px) {
.hero-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(140px, 180px);
gap: 1rem;
}
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"lead cards"
"ad ad";
align-items: start;
}
.hero-grid > .lead-slider { grid-area: lead; min-width: 0; }
.hero-grid > .cards-stack {
grid-area: cards;
min-height: min(320px, 52vw);
}
.hero-grid > .ad-card {
grid-area: ad;
display: block;
min-height: 260px;
width: 100%;
}
.hero-grid > .ad-card .ad-link { min-height: 260px; }
}
@media (max-width: 760px) {
.hero-grid {
grid-template-columns: 1fr;
grid-template-areas:
"lead"
"cards"
"ad";
}
.hero-grid > .lead-slider { grid-area: lead; width: 100%; min-width: 0; }
.hero-grid > .cards-stack { grid-area: cards; min-height: 0; width: 100%; min-width: 0; }
.hero-grid > .ad-card {
grid-area: ad;
display: block;
width: 100%;
min-width: 0;
}
.slides-stage { height: 280px; }
.hero-grid > .ad-card .ad-link { min-height: 300px; }
}
/* ==========================================================================
EVENT BAR
========================================================================== */
.event-bar {
background: #f1f5f9;
border-top: 1px solid hsl(var(--cdmw-border));
border-bottom: 1px solid hsl(var(--cdmw-border));
}
.event-bar .section-container { padding-top: 12px; padding-bottom: 12px; }
.event-card {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 0.5rem;
border: 1px solid #cbd5e1;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
color: inherit;
text-decoration: none;
}
.event-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(90deg, rgba(32,44,60,.92) 0%, rgba(39,53,73,.65) 55%, rgba(57,73,96,.35) 100%),
url('https://editorial-edge-platform.lovable.app/assets/philly-skyline-DfN1-Cjq.jpg');
background-size: cover;
background-position: center 40%;
}
.event-content {
position: relative;
display: flex; flex-direction: column; gap: 8px;
padding: 12px 20px;
}
@media (min-width: 768px) { .event-content { flex-direction: row; align-items: center; justify-content: space-between; } }
.event-left { display: flex; align-items: center; gap: 16px; }
.event-date { color: #fff; line-height: 1; }
.event-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #7dd3fc; }
.event-info { color: #fff; }
.event-eyebrow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #7dd3fc; margin-bottom: 2px; }
.event-title { font-family: var(--cdmw-font); font-size: 16px; font-weight: 600; line-height: 1.25; }
@media (min-width: 768px) { .event-title { font-size: 18px; } }
.event-cta {
display: inline-flex; align-items: center; gap: 8px;
align-self: flex-start;
background: #fff; color: #0f172a; font-weight: 600; font-size: 12px;
padding: 6px 12px; border-radius: 6px;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
transition: background .2s; white-space: nowrap;
}
@media (min-width: 768px) { .event-cta { align-self: auto; } }
.event-cta:hover { background: #f0f9ff; }
.event-cta-arrow { display: inline-block; transition: transform .2s; }
.event-card:hover .event-cta-arrow { transform: translateX(2px); }
/* ==========================================================================
LATEST ARTICLES
========================================================================== */
.latest-articles { background: #fff; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.latest-articles__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.latest-articles__title { font-family: var(--cdmw-font); font-size: 20px; font-weight: 700; color: hsl(var(--cdmw-fg)); line-height: 1.2; margin: 0; }
@media (min-width: 768px) { .latest-articles__title { font-size: 24px; } }
.view-all {
display: none; align-items: center; gap: 8px;
color: hsl(var(--cdmw-secondary)); font-weight: 500; font-size: 14px;
text-decoration: none; transition: gap .2s;
}
@media (min-width: 768px) { .view-all { display: inline-flex; } }
.view-all:hover { gap: 12px; }
.view-all svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view-all-mobile-wrap { display: block; text-align: center; margin-top: 32px; }
@media (min-width: 768px) { .view-all-mobile-wrap { display: none; } }
.view-all-mobile { display: inline-flex; align-items: center; gap: 8px; color: hsl(var(--cdmw-secondary)); font-weight: 500; font-size: 14px; text-decoration: none; }
.view-all-mobile svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cat-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
.cat-grid--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cat-grid--4 { grid-template-columns: repeat(4, 1fr); } .cat-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.cat-card { border: 1px solid hsl(var(--cdmw-border)); border-radius: 0.5rem; overflow: hidden; background: #fff; }
.cat-card__head { background: hsl(var(--cdmw-primary)); padding: 10px 14px; }
.cat-card__title { font-family: var(--cdmw-font); font-size: 13px; font-weight: 700; color: #fff; margin: 0; }
.cat-card__list { padding: 8px 0; }
.article-link { display: block; padding: 8px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid hsl(var(--cdmw-border)); transition: background .15s; }
.article-link:last-child { border-bottom: none; }
.article-link:hover { background: hsl(var(--cdmw-muted)); }
.article-headline { font-size: 12px; font-weight: 600; line-height: 1.375; color: hsl(var(--cdmw-primary)); margin: 0 0 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; }
.article-link:hover .article-headline { color: hsl(var(--cdmw-secondary)); }
.article-date { font-size: 10px; color: hsl(var(--cdmw-muted-fg)); }
/* ==========================================================================
NEWS CAPSULES
========================================================================== */
.news-capsules { background: hsl(var(--cdmw-muted)); padding: 2rem 0; border-top: 1px solid hsl(var(--cdmw-border)); border-bottom: 1px solid hsl(var(--cdmw-border)); }
.news-capsules__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.news-capsules__icon { width: 22px; height: 22px; stroke: hsl(var(--cdmw-secondary)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.news-capsules__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: hsl(var(--cdmw-secondary)); }
.news-capsules__title { font-family: var(--cdmw-font); font-size: 22px; font-weight: 800; color: hsl(var(--cdmw-fg)); margin: 0; }
.news-capsules__sub { font-size: 14px; color: hsl(var(--cdmw-muted-fg)); font-style: italic; }
.news-capsules__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .news-capsules__grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.capsule-feature { display: block; border-radius: 0.5rem; overflow: hidden; background: #fff; box-shadow: var(--cdmw-shadow-card); text-decoration: none; color: inherit; transition: box-shadow .2s; }
.capsule-feature:hover { box-shadow: var(--cdmw-shadow-elevated); }
.capsule-feature__img { width: 100%; height: 200px; object-fit: cover; display: block; }
.capsule-feature__body { padding: 16px; }
.capsule-tag-feature { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: hsl(var(--cdmw-secondary)); color: #fff; padding: 2px 8px; border-radius: 9999px; margin-bottom: 8px; }
.capsule-feature__title { font-size: 16px; font-weight: 700; color: hsl(var(--cdmw-primary)); margin: 0 0 8px; line-height: 1.3; }
.capsule-feature__dek { font-size: 13px; color: hsl(var(--cdmw-slate-600)); line-height: 1.5; margin: 0 0 12px; }
.capsule-feature__cta { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--cdmw-secondary)); font-weight: 600; font-size: 13px; }
.capsule-feature__cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.capsule-list { list-style: none; padding: 0; margin: 0; background: #fff; border-radius: 0.5rem; box-shadow: var(--cdmw-shadow-card); overflow: hidden; }
.capsule-list li { border-bottom: 1px solid hsl(var(--cdmw-border)); }
.capsule-list li:last-child { border-bottom: none; }
.capsule-list a { display: block; padding: 14px 16px; text-decoration: none; color: inherit; transition: background .15s; }
.capsule-list a:hover { background: hsl(var(--cdmw-muted)); }
.capsule-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--cdmw-secondary)); margin-bottom: 4px; }
.capsule-list-title { display: block; font-size: 13px; font-weight: 600; color: hsl(var(--cdmw-primary)); line-height: 1.375; }
.capsule-signup { background: hsl(var(--cdmw-primary)); border-radius: 0.5rem; padding: 20px; color: #fff; }
.capsule-signup__icon { width: 28px; height: 28px; stroke: hsl(var(--cdmw-secondary)); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.capsule-signup__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.capsule-signup__dek { font-size: 13px; color: rgba(255,255,255,.80); line-height: 1.5; margin: 0 0 14px; }
.capsule-signup__form { display: flex; flex-direction: column; gap: 8px; }
.capsule-signup__input { border: 0; border-radius: 0.375rem; padding: 8px 12px; font-size: 13px; width: 100%; color: hsl(var(--cdmw-fg)); background: #fff; outline: none; font-family: var(--cdmw-font); }
.capsule-signup__input:focus { box-shadow: 0 0 0 2px hsl(var(--cdmw-secondary)); }
.capsule-signup__btn { background: hsl(var(--cdmw-secondary)); color: #fff; border: 0; border-radius: 0.375rem; padding: 10px 16px; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .2s; font-family: var(--cdmw-font); }
.capsule-signup__btn:hover { opacity: 0.9; }
.capsule-signup__alt { display: inline-block; margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.70); text-decoration: none; transition: color .2s; }
.capsule-signup__alt:hover { color: #fff; }
/* ==========================================================================
EXPERT POST
========================================================================== */
.expert-post { background: #fff; padding: 2rem 0; }
.expert-post__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.expert-post__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--cdmw-secondary)); display: block; margin-bottom: 4px; }
.expert-post__title { font-family: var(--cdmw-font); font-size: 22px; font-weight: 800; color: hsl(var(--cdmw-fg)); margin: 0; }
.expert-post__more { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--cdmw-secondary)); font-weight: 500; font-size: 14px; text-decoration: none; }
.expert-post__more svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.expert-post__grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .expert-post__grid { grid-template-columns: 2fr 1fr; } }
.expert-feature { display: flex; gap: 16px; text-decoration: none; color: inherit; }
.expert-feature__avatar { width: 80px; height: 80px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; display: block; }
.expert-feature__column-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: hsl(var(--cdmw-secondary)); display: block; margin-bottom: 6px; }
.expert-feature__title { font-size: 18px; font-weight: 700; color: hsl(var(--cdmw-primary)); margin: 0 0 8px; line-height: 1.3; }
.expert-feature__dek { font-size: 14px; color: hsl(var(--cdmw-slate-600)); line-height: 1.6; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.expert-feature__cta { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--cdmw-secondary)); font-weight: 600; font-size: 13px; }
.expert-feature__cta svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.expert-side { display: flex; flex-direction: column; gap: 16px; }
.expert-mini { display: flex; gap: 12px; text-decoration: none; color: inherit; padding: 14px; border: 1px solid hsl(var(--cdmw-border)); border-radius: 0.5rem; transition: box-shadow .2s; }
.expert-mini:hover { box-shadow: var(--cdmw-shadow-card); }
.expert-mini__avatar { width: 48px; height: 48px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; display: block; }
.expert-mini__title { font-size: 14px; font-weight: 700; color: hsl(var(--cdmw-primary)); margin: 0 0 2px; }
.expert-mini__author { font-size: 12px; color: hsl(var(--cdmw-secondary)); font-weight: 500; margin: 0 0 4px; }
.expert-mini__dek { font-size: 12px; color: hsl(var(--cdmw-slate-600)); line-height: 1.4; margin: 0; }
/* ==========================================================================
AI SUMMER SERIES BANNER
========================================================================== */
.summer-section { padding: 1.5rem 0; }
.summer-banner {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1d4ed8 100%);
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--cdmw-shadow-xl);
}
.summer-banner__inner {
display: flex; flex-direction: column; gap: 16px;
padding: 24px 28px;
}
@media (min-width: 768px) { .summer-banner__inner { flex-direction: row; align-items: center; gap: 24px; } }
.summer-chip {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
border-radius: 9999px; padding: 4px 12px;
color: #fff; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .1em;
white-space: nowrap; flex-shrink: 0;
}
.summer-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.summer-chip__text { color: #fff; }
.summer-content { flex: 1; }
.summer-title { font-family: var(--cdmw-font); font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 6px; }
@media (min-width: 768px) { .summer-title { font-size: 26px; } }
.summer-title__date { font-size: 14px; font-weight: 400; color: rgba(255,255,255,.70); margin-left: 8px; }
.summer-dek { font-size: 14px; color: rgba(255,255,255,.80); line-height: 1.5; margin: 0; }
.summer-ctas { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.summer-btn {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30);
color: #fff; font-size: 13px; font-weight: 600;
padding: 8px 16px; border-radius: 0.5rem;
text-decoration: none; transition: background .2s;
white-space: nowrap;
}
.summer-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.summer-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.summer-sponsors { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.summer-sponsors__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.60); white-space: nowrap; }
.summer-sponsor-link {
display: inline-flex;
background: rgba(255, 255, 255, 0.94);
padding: 4px 10px;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.summer-sponsor-link img {
height: 22px;
width: auto;
max-width: 120px;
object-fit: contain;
display: block;
filter: none;
opacity: 1;
}
/* ==========================================================================
STUDIOS
========================================================================== */
.studios { position: relative; padding: 2.5rem 0; overflow: hidden; }
.studios__bg {
position: absolute; inset: 0;
background: linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
z-index: 0;
}
.studios .section-container { position: relative; z-index: 1; }
.studios__head { margin-bottom: 24px; }
.studios__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: hsl(var(--cdmw-secondary)); display: block; margin-bottom: 4px; }
.studios__title { font-family: var(--cdmw-font); font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.studios__dek { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.5; margin: 0; }
.studios__grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .studios__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.studio-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; }
.studio-card--featured { background: rgba(255,255,255,.08); }
.studio-card--bright { background: #fff; }
.studio-card--bright .studio-card__eyebrow { color: hsl(var(--cdmw-secondary)); }
.studio-card--bright .studio-card__title { color: hsl(var(--cdmw-primary)); }
.studio-card--bright .studio-card__dek,
.studio-card--bright .studio-card__now { color: hsl(var(--cdmw-slate-600)); }
.studio-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0; }
.studio-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.studio-card__media:hover .studio-card__img { transform: scale(1.04); }
.studio-card__tag {
position: absolute; top: 10px; left: 10px; z-index: 2;
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
padding: 3px 8px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 4px;
}
.studio-card__tag--blue { background: #2563eb; color: #fff; }
.studio-card__tag--orange { background: #f97316; color: #fff; }
.studio-card__tag--yellow { background: #eab308; color: #000; }
.studio-card__tag svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio-card__play-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.studio-card__play {
width: 44px; height: 44px; border-radius: 9999px;
background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.60);
display: flex; align-items: center; justify-content: center;
transition: background .2s, transform .2s;
}
.studio-card__media:hover .studio-card__play { background: rgba(0,0,0,.75); transform: scale(1.1); }
.studio-card__play svg { width: 18px; height: 18px; fill: #fff; stroke: none; }
.studio-card__body { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.studio-card__eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: hsl(var(--cdmw-secondary)); margin-bottom: 4px; display: block; }
.studio-card__title { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.studio-card__dek { font-size: 13px; color: rgba(255,255,255,.70); line-height: 1.5; margin: 0 0 6px; }
.studio-card__dek--flex { flex: 1; }
.studio-card__now { font-size: 12px; color: rgba(255,255,255,.55); font-style: italic; margin: 0 0 12px; }
.studio-card__cta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.studio-card__cta-row--inline { flex-wrap: wrap; }
.studio-btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; padding: 7px 14px;
border-radius: 0.375rem; text-decoration: none; transition: opacity .2s;
white-space: nowrap;
}
.studio-btn:hover { opacity: 0.85; }
.studio-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.studio-btn--blue { background: #2563eb; color: #fff; }
.studio-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.studio-btn--orange { background: #f97316; color: #fff; }
.studio-btn--navy { background: #1e3a5f; color: #fff; }
.studio-card--bright .studio-btn--navy { background: hsl(var(--cdmw-primary)); color: #fff; }
/* ==========================================================================
FACILITY WALKTHROUGH — 1:1 port from cdm.html (lines 1783–2115)
========================================================================== */
.facility {
position: relative;
padding-top: 3rem;
padding-bottom: 3rem;
overflow: hidden;
}
.facility__bg {
position: absolute;
inset: 0;
background-image:
linear-gradient(115deg,
rgba(15, 24, 36, 0.92) 0%,
rgba(25, 36, 52, 0.78) 55%,
rgba(36, 48, 66, 0.55) 100%),
url('https://editorial-edge-platform.lovable.app/assets/cdmo-facility-bg-74GfwP12.jpg');
background-size: cover;
background-position: center center;
z-index: 0;
}
.facility__darken {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.40) 0%,
transparent 50%,
transparent 100%);
pointer-events: none;
z-index: 1;
}
.facility > .section-container {
position: relative;
z-index: 2;
}
.facility__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 16px;
max-width: 56rem;
margin-left: auto;
margin-right: auto;
}
.facility__eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.25em;
color: #7dd3fc;
}
.facility__title {
font-family: var(--cdmw-font);
font-size: 24px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.25;
}
@media (min-width: 768px) {
.facility__title { font-size: 30px; }
}
.facility__more {
display: none;
align-items: center;
gap: 4px;
color: #7dd3fc;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
text-decoration: none;
transition: gap 0.2s ease, color 0.2s ease;
}
@media (min-width: 768px) {
.facility__more { display: inline-flex; }
}
.facility__more:hover { color: #fff; gap: 8px; }
.facility__more svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.facility__grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
max-width: 64rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.facility__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Card 1 — Video preview */
.facility-video {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
background: #0f172a;
display: block;
text-decoration: none;
box-shadow:
0 25px 50px -12px rgb(0 0 0 / 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1);
}
.facility-video__img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
transition: opacity 0.2s ease;
display: block;
}
.facility-video:hover .facility-video__img { opacity: 1; }
.facility-video__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.6) 0%,
transparent 100%);
}
.facility-video__play-wrap {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.facility-video__play {
width: 48px;
height: 48px;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
transition: transform 0.2s ease;
}
.facility-video:hover .facility-video__play { transform: scale(1.1); }
.facility-video__play svg {
width: 20px;
height: 20px;
margin-left: 2px;
color: hsl(var(--cdmw-secondary));
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.facility-video__tag-area {
position: absolute;
bottom: 8px;
left: 8px;
color: #ffffff;
z-index: 1;
}
.facility-video__tag {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
background: hsl(var(--cdmw-secondary));
padding: 2px 6px;
border-radius: 4px;
color: #fff;
}
.facility-video__name {
font-size: 16px;
font-weight: 700;
margin: 4px 0 0;
line-height: 1.2;
color: #ffffff;
}
/* Card 2 — Glassmorphic panel */
.facility-panel {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 16px;
color: #fff;
}
.facility-panel__eyebrow {
display: block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7dd3fc;
}
.facility-panel__title {
font-family: var(--cdmw-font);
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 4px 0 8px;
line-height: 1.3;
}
@media (min-width: 768px) {
.facility-panel__title { font-size: 20px; }
}
.facility-panel__dek {
font-size: 12px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.625;
margin: 0 0 12px;
}
@media (min-width: 768px) {
.facility-panel__dek { font-size: 14px; }
}
.facility-panel__list {
list-style: none;
margin: 0 0 12px;
padding: 0;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.5;
}
.facility-panel__list li + li { margin-top: 4px; }
.facility-panel__link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #7dd3fc;
background: transparent;
padding: 0;
border-radius: 0;
font-weight: 600;
font-size: 12px;
text-decoration: none;
transition: color 0.2s ease;
}
.facility-panel__link:hover { color: #ffffff; opacity: 1; }
.facility-panel__link svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Card 3 — Spotlight CTA (no card background, sits on the dark hero bg) */
.facility-spot {
background: transparent;
border: 0;
padding: 0;
color: #fff;
display: flex;
flex-direction: column;
}
.facility-spot__head {
display: flex;
align-items: center;
gap: 8px;
color: #7dd3fc;
margin-bottom: 4px;
}
.facility-spot__head svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
}
.facility-spot__eyebrow {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #7dd3fc;
}
.facility-spot__title {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 4px;
line-height: 1.3;
}
@media (min-width: 768px) {
.facility-spot__title { font-size: 20px; }
}
.facility-spot__dek {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 12px;
line-height: 1.5;
}
@media (min-width: 768px) {
.facility-spot__dek { font-size: 14px; }
}
.facility-spot__btns {
display: flex;
flex-direction: column;
gap: 8px;
}
.facility-spot__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: opacity 0.2s ease, background 0.2s ease;
}
.facility-spot__btn--primary {
background: hsl(var(--cdmw-secondary));
color: #ffffff;
}
.facility-spot__btn--primary:hover { opacity: 0.9; }
.facility-spot__btn--ghost {
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
background: transparent;
}
.facility-spot__btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.facility-spot__btn svg {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ==========================================================================
EVENTS GRID
========================================================================== */
.events { background: #fff; padding: 2rem 0; }
.events__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.events__title { font-family: var(--cdmw-font); font-size: 24px; font-weight: 800; color: hsl(var(--cdmw-fg)); margin: 0; }
.events__title span { color: hsl(var(--cdmw-secondary)); }
.events__view-all { display: none; align-items: center; gap: 8px; color: hsl(var(--cdmw-secondary)); font-size: 14px; font-weight: 500; text-decoration: none; }
@media (min-width: 768px) { .events__view-all { display: inline-flex; } }
.events__view-all svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.events__view-all-mobile-wrap { display: block; text-align: center; margin-top: 24px; }
@media (min-width: 768px) { .events__view-all-mobile-wrap { display: none; } }
.events__view-all-mobile { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--cdmw-secondary)); font-size: 14px; font-weight: 500; text-decoration: none; }
.events__view-all-mobile svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.events__grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .events__grid { grid-template-columns: 1fr 1fr 1.2fr; } }
/* reuse .event-card but with child classes for events-grid context */
.events__grid .event-card {
display: flex; flex-direction: column;
border: 1px solid hsl(var(--cdmw-border)); border-radius: 0.75rem; overflow: hidden;
background: #fff; box-shadow: var(--cdmw-shadow-card); text-decoration: none; color: inherit;
transition: box-shadow .2s, transform .2s;
}
.events__grid .event-card:hover { box-shadow: var(--cdmw-shadow-elevated); transform: translateY(-2px); }
.event-card__media { overflow: hidden; }
.event-card__img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform .4s; }
.events__grid .event-card:hover .event-card__img { transform: scale(1.04); }
.event-card__body { padding: 14px 16px; }
.event-card__title { font-size: 15px; font-weight: 700; color: hsl(var(--cdmw-primary)); margin: 0 0 10px; line-height: 1.3; }
.event-card__meta { display: flex; flex-direction: column; gap: 6px; }
.event-card__meta-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: hsl(var(--cdmw-slate-600)); }
.event-card__meta-row svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.event-live {
background: hsl(var(--cdmw-primary));
border-radius: 0.75rem; padding: 20px; color: #fff;
display: flex; flex-direction: column;
}
.event-live__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.event-live__live-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #4ade80; }
.event-live__live-dot { width: 8px; height: 8px; border-radius: 9999px; background: #4ade80; animation: cdmw-pulse 1.5s infinite; display: block; }
@keyframes cdmw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.event-live__radio-icon { width: 22px; height: 22px; stroke: rgba(255,255,255,.40); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.event-live__title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.event-live__sub { font-size: 12px; color: rgba(255,255,255,.70); font-style: italic; margin: 0 0 10px; }
.event-live__dek { font-size: 13px; color: rgba(255,255,255,.80); line-height: 1.5; margin: 0 0 14px; }
.event-live__schedule { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.90); margin-bottom: 14px; }
.event-live__schedule svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.event-live__btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.event-live__btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; padding: 8px 14px;
border-radius: 0.375rem; text-decoration: none; transition: opacity .2s; white-space: nowrap;
}
.event-live__btn:hover { opacity: 0.9; }
.event-live__btn svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.event-live__btn--primary { background: hsl(var(--cdmw-orange)); color: #fff; }
.event-live__btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
/* ==========================================================================
RESET vs. theme “Additional CSS” (GeneratePress / global Customizer sheet)
Your site loads huge global rules such as:
h1…h6 { font-family: … !important }
ul { margin: 0 }
.entry-content .alignfull { max-width: 100%; margin-left: 0; … }
Those can overpower block styles or flex/grid quirks. Anything below is
scoped to body.has-cdmw-blocks (added by gp-custom-widgets.php only on
pages that contain a cdmw/* block). You do NOT need duplicate CSS in the
page footer unless your host defers plugin styles before Customizer —
then switch enqueue priority in PHP or paste this fragment last in WP.
========================================================================== */
/* --- Typography: beat global h1/h3 !important stacks (Playfair / Inter) --- */
body.has-cdmw-blocks .hero .slide-title,
body.has-cdmw-blocks .hero .slide-eyebrow,
body.has-cdmw-blocks .hero .slide-dek,
body.has-cdmw-blocks .hero .card-title,
body.has-cdmw-blocks .hero .card-eyebrow,
body.has-cdmw-blocks .hero .card-dek,
body.has-cdmw-blocks .hero .ad-title,
body.has-cdmw-blocks .hero .ad-eyebrow,
body.has-cdmw-blocks .hero .ad-dek,
body.has-cdmw-blocks .hero .ad-btn {
font-family: var(--cdmw-font) !important;
}
body.has-cdmw-blocks .slide-title {
font-family: var(--cdmw-font) !important;
}
body.has-cdmw-blocks .event-bar .event-title,
body.has-cdmw-blocks .latest-articles .latest-articles__title,
body.has-cdmw-blocks .latest-articles .cat-card__title,
body.has-cdmw-blocks .latest-articles .article-headline,
body.has-cdmw-blocks .news-capsules .news-capsules__title,
body.has-cdmw-blocks .news-capsules .capsule-feature__title,
body.has-cdmw-blocks .news-capsules .capsule-list-title,
body.has-cdmw-blocks .news-capsules .capsule-signup__title,
body.has-cdmw-blocks .expert-post .expert-post__title,
body.has-cdmw-blocks .expert-post .expert-feature__title,
body.has-cdmw-blocks .expert-post .expert-mini__title,
body.has-cdmw-blocks .summer-section .summer-title,
body.has-cdmw-blocks .studios .studios__title,
body.has-cdmw-blocks .studios .studio-card__title,
body.has-cdmw-blocks .facility .facility__title,
body.has-cdmw-blocks .facility .facility-video__name,
body.has-cdmw-blocks .facility .facility-panel__title,
body.has-cdmw-blocks .facility .facility-spot__title,
body.has-cdmw-blocks .events .events__title,
body.has-cdmw-blocks .events .event-card__title {
font-family: var(--cdmw-font) !important;
}
/* --- Hero: hard-locked 3-up grid using grid-template-areas + html body
selector. Doesn't require the .has-cdmw-blocks body class so it works
even on front pages where is_singular() is false. --- */
@media (min-width: 901px) {
html body .hero .hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) 200px !important;
grid-template-rows: auto !important;
grid-template-areas: "cdmw-l cdmw-c cdmw-r" !important;
grid-auto-flow: row !important;
gap: 1.25rem !important;
align-items: stretch !important;
width: 100% !important;
}
html body .hero .hero-grid > .lead-slider {
grid-area: cdmw-l !important;
min-width: 0 !important;
}
html body .hero .hero-grid > .cards-stack {
grid-area: cdmw-c !important;
min-width: 0 !important;
min-height: 320px !important;
}
html body .hero .hero-grid > .ad-card {
grid-area: cdmw-r !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
min-width: 200px !important;
min-height: 320px !important;
}
html body .hero .hero-grid > .ad-card .ad-link {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 320px !important;
}
html body .hero .slides-stage {
height: 320px !important;
min-height: 320px !important;
}
}
@media (min-width: 761px) and (max-width: 900px) {
html body .hero .hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
grid-template-areas:
"cdmw-l cdmw-c"
"cdmw-r cdmw-r" !important;
gap: 1rem !important;
align-items: start !important;
}
html body .hero .hero-grid > .lead-slider {
grid-area: cdmw-l !important;
min-width: 0 !important;
}
html body .hero .hero-grid > .cards-stack {
grid-area: cdmw-c !important;
min-height: min(320px, 52vw) !important;
}
html body .hero .hero-grid > .ad-card {
grid-area: cdmw-r !important;
display: block !important;
width: 100% !important;
min-height: 240px !important;
}
html body .hero .hero-grid > .ad-card .ad-link {
min-height: 240px !important;
display: block !important;
}
}
@media (max-width: 760px) {
html body .hero .hero-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
grid-template-areas:
"cdmw-l"
"cdmw-c"
"cdmw-r" !important;
}
html body .hero .hero-grid > .lead-slider { grid-area: cdmw-l !important; }
html body .hero .hero-grid > .cards-stack {
grid-area: cdmw-c !important;
min-height: 0 !important;
}
html body .hero .hero-grid > .ad-card {
grid-area: cdmw-r !important;
display: block !important;
width: 100% !important;
min-height: 280px !important;
}
html body .hero .hero-grid > .ad-card .ad-link {
min-height: 280px !important;
display: block !important;
}
html body .hero .slides-stage { height: 280px !important; }
}
/* If global Custom CSS hides `.site-header { display:none }`, restore it here.
Uncomment only when the header disappears on homepage with CDMW blocks.
body.has-cdmw-blocks .site-header {
display: revert !important;
position: relative;
z-index: 100;
}
*/