/* ==========================================================================
Deansgate Haus - interior pages
========================================================================== */
/* The interior pages use the source's soft "aurora" wash rather than flat linen. */
.dh-pageskin {
background:
radial-gradient(60% 50% at 12% 8%, color-mix(in oklab, var(--dh-champagne) 22%, transparent) 0%, transparent 60%),
radial-gradient(70% 60% at 88% 20%, color-mix(in oklab, #f3e0d0 55%, transparent) 0%, transparent 65%),
var(--dh-linen);
}
/* ---------------------------------------------------------------- header */
.dh-ph {
position: relative;
color: var(--dh-burgundy);
padding: 150px 24px 80px;
overflow: hidden;
}
.dh-ph__glow {
position: absolute; inset-inline: 0; top: 0; height: 60%;
pointer-events: none; opacity: .6;
background: radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--dh-linen) 60%, transparent) 0%, transparent 70%);
}
.dh-ph__inner { position: relative; max-width: 64rem; margin-inline: auto; }
.dh-ph__eyebrow { color: rgba(61,10,10,.7); font-size: .65rem; margin-bottom: 24px; }
.dh-ph__title { font-size: 42px; line-height: 1.05; font-weight: 400; margin: 0; }
.dh-ph__intro { font-size: 18px; line-height: 1.6; color: rgba(61,10,10,.7); margin: 28px 0 0; max-width: 48rem; font-weight: 400; }
.dh-ph__split { display: grid; gap: 24px; margin-top: 32px; }
.dh-ph__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.dh-champagne { color: var(--dh-champagne); }
.dh-muted { color: rgba(61,10,10,.6); }
@media (min-width: 768px) {
.dh-ph { padding: 200px 48px 130px; }
.dh-ph__title { font-size: 68px; }
.dh-ph__intro { font-size: 22px; }
.dh-ph__split { grid-template-columns: 1fr auto; align-items: end; }
}
/* ----------------------------------------------------------------- prose */
.dh-prose { padding: 0 24px 48px; color: var(--dh-burgundy); }
.dh-prose__inner { max-width: 56rem; margin-inline: auto; }
.dh-prose__inner--wide { max-width: var(--dh-max); }
.dh-prose__eyebrow { color: rgba(61,10,10,.5); font-size: .65rem; }
.dh-prose__title { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 24px; }
.dh-prose__body { font-size: 16px; line-height: 1.7; color: rgba(61,10,10,.8); }
.dh-prose__body > p { margin: 0 0 16px; }
.dh-prose__body a { color: var(--dh-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.dh-prose__body a:hover { color: var(--dh-champagne); }
@media (min-width: 768px) {
.dh-prose { padding: 0 48px 64px; }
.dh-prose__title { font-size: 36px; }
.dh-prose__body { font-size: 17px; }
}
/* ----------------------------------------------------------------- cards */
.dh-cards { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 768px) {
.dh-cards--2 { grid-template-columns: repeat(2, 1fr); }
.dh-cards--3 { grid-template-columns: repeat(3, 1fr); }
.dh-cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .dh-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.dh-card {
background: rgba(255,255,255,.6);
border: 1px solid rgba(61,10,10,.1);
border-radius: 16px;
padding: 28px;
color: var(--dh-burgundy);
}
.dh-card--featured { border-color: var(--dh-champagne); box-shadow: 0 12px 40px -20px rgba(212,165,122,.8); }
.dh-card__title { font-size: 22px; line-height: 1.25; font-weight: 400; margin: 0 0 12px; }
.dh-card__body, .dh-card p { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.75); margin: 0 0 12px; }
.dh-card p:last-child { margin-bottom: 0; }
.dh-card a { color: var(--dh-burgundy); text-decoration: underline; text-underline-offset: 3px; }
.dh-card a:hover { color: var(--dh-champagne); }
@media (min-width: 768px) { .dh-card { padding: 36px; } .dh-card__title { font-size: 26px; } }
.dh-list { list-style: disc; padding-left: 20px; margin: 16px 0 0; }
.dh-list li { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.78); margin-bottom: 8px; }
.dh-note { font-size: 15px; line-height: 1.7; margin-top: 24px; color: rgba(61,10,10,.85); }
.dh-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dh-chip {
display: inline-flex; align-items: center;
border: 1px solid rgba(61,10,10,.15);
background: rgba(255,255,255,.5);
border-radius: 999px;
padding: 8px 16px;
font-size: 13px;
color: rgba(61,10,10,.8);
}
.dh-deflist { margin: 0; }
.dh-deflist > div { margin-bottom: 18px; }
.dh-deflist dt { font-size: .6rem; letter-spacing: var(--dh-luxe); text-transform: uppercase; color: rgba(61,10,10,.5); margin-bottom: 4px; }
.dh-deflist dd { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(61,10,10,.85); }
.dh-deflist dd a { color: inherit; text-decoration: none; }
.dh-deflist dd a:hover { color: var(--dh-champagne); }
@media (min-width: 768px) { .dh-deflist--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; } .dh-deflist--grid > div { margin-bottom: 0; } }
.dh-hours { width: 100%; font-size: 15px; color: rgba(61,10,10,.8); border-collapse: collapse; }
.dh-hours td { padding: 12px 0; }
.dh-hours td:last-child { text-align: right; }
.dh-hours tr:not(:last-child) { border-bottom: 1px solid rgba(61,10,10,.1); }
.dh-studios { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 768px) { .dh-studios { grid-template-columns: repeat(3, 1fr); } }
.dh-studio {
aspect-ratio: 4/3; border-radius: 12px;
background: rgba(61,10,10,.06);
border: 1px dashed rgba(61,10,10,.25);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
color: rgba(61,10,10,.6); font-size: 14px;
}
.dh-studio__ph { font-size: .6rem; letter-spacing: var(--dh-luxe); text-transform: uppercase; color: rgba(61,10,10,.45); }
/* ------------------------------------------------------------------ FAQs */
.dh-faqpage { padding: 0 24px 80px; }
.dh-faqpage__inner { max-width: 48rem; margin-inline: auto; }
.dh-faqgroup { margin-bottom: 64px; }
.dh-faqgroup__title { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 24px; }
.dh-faqs { border-top: 1px solid rgba(61,10,10,.15); }
.dh-faq { border-bottom: 1px solid rgba(61,10,10,.15); padding: 20px 0; }
.dh-faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.dh-faq summary::-webkit-details-marker { display: none; }
.dh-faq summary h3 { font-size: 17px; line-height: 1.4; font-weight: 400; margin: 0; }
.dh-faq__plus { font-size: 28px; line-height: 1; color: var(--dh-champagne); flex-shrink: 0; transition: transform .3s ease; }
.dh-faq[open] .dh-faq__plus { transform: rotate(45deg); }
.dh-faq p { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.75); margin: 16px 0 0; }
.dh-faq a { color: var(--dh-burgundy); text-decoration: underline; }
@media (min-width: 768px) {
.dh-faqpage { padding: 0 48px 112px; }
.dh-faqgroup__title { font-size: 34px; }
.dh-faq summary h3 { font-size: 20px; }
.dh-faq p { font-size: 16px; }
}
/* --------------------------------------------------------------- classes */
.dh-classintro { padding: 0 24px 40px; }
.dh-classintro__inner { max-width: 64rem; margin-inline: auto; }
.dh-classintro__lead { font-size: 16px; line-height: 1.7; color: rgba(61,10,10,.8); max-width: 44rem; margin: 0; }
.dh-style { padding: 40px 24px; }
.dh-style__inner { max-width: 64rem; margin-inline: auto; }
.dh-style__img { width: 100%; aspect-ratio: 16/6; object-fit: cover; border-radius: 12px; margin-bottom: 32px; display: block; }
.dh-style__title { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 20px; }
.dh-style__blurb { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.7); max-width: 44rem; margin: 0; }
.dh-style__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .dh-style__list { grid-template-columns: repeat(2, 1fr); } }
.dh-style__item {
background: rgba(255,255,255,.6);
border: 1px solid rgba(61,10,10,.1);
border-radius: 12px;
padding: 16px 20px;
height: 100%;
}
.dh-style__item summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
cursor: pointer; list-style: none; font-size: 14px; color: var(--dh-burgundy);
}
.dh-style__item summary::-webkit-details-marker { display: none; }
.dh-style__plus { font-size: 18px; line-height: 1; color: rgba(61,10,10,.4); transition: transform .3s ease; }
.dh-style__item[open] .dh-style__plus { transform: rotate(45deg); }
.dh-style__item p { font-size: 14px; line-height: 1.7; color: rgba(61,10,10,.75); margin: 14px 0 0; }
@media (min-width: 768px) { .dh-style { padding: 64px 48px; } .dh-style__title { font-size: 34px; } }
/* -------------------------------------------------------------- schedule */
.dh-schedpage { padding: 0 24px 80px; }
.dh-schedpage__inner { max-width: var(--dh-max); margin-inline: auto; }
.dh-schedpage__offer { margin-top: 56px; }
.dh-offercard { background: var(--dh-burgundy); color: var(--dh-linen); padding: 40px; border-radius: 16px; }
.dh-offercard__eyebrow { color: var(--dh-champagne); font-size: .65rem; }
.dh-offercard__copy { font-size: 24px; line-height: 1.35; font-weight: 400; margin: 0 0 28px; color: var(--dh-linen); }
.dh-offercard__copy span { color: var(--dh-champagne); }
@media (min-width: 768px) { .dh-schedpage { padding: 0 48px 112px; } .dh-offercard { padding: 56px; } .dh-offercard__copy { font-size: 32px; } }
/* --------------------------------------------------------------- pricing */
.dh-prices { display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 768px) {
.dh-prices--2 { grid-template-columns: repeat(2, 1fr); }
.dh-prices--3 { grid-template-columns: repeat(3, 1fr); }
.dh-prices--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .dh-prices--4 { grid-template-columns: repeat(4, 1fr); } }
.dh-price {
display: flex; flex-direction: column; justify-content: space-between;
background: rgba(255,255,255,.6);
border: 1px solid rgba(61,10,10,.1);
border-radius: 16px;
padding: 28px;
}
.dh-price__title { font-size: 19px; line-height: 1.35; font-weight: 400; margin: 0; }
.dh-price__desc { font-size: 13px; line-height: 1.6; color: rgba(61,10,10,.7); margin: 14px 0 0; }
.dh-price__buy { margin-top: 28px; }
/* Healcode renders its own inside; make it look like our button. */
.dh-price__buy a,
.dh-price__buy .healcode-pricing-option-text-link,
.dh-price__buy .healcode-contract-text-link,
.dh-price__buy .healcode-gift-card-text-link,
/* The 2026 pricing page builds its cards as Elementor text-editor widgets, so
the .dh-price__buy wrapper above simply does not exist there and every Buy
now fell back to a default-blue browser link. Healcode stamps these classes
onto the wherever it hydrates, so catch it in that context too. Only
drafts 426 / 210 / 88 match -- no published page has a healcode link inside
an Elementor widget. */
.elementor-widget-text-editor .healcode-pricing-option-text-link,
.elementor-widget-text-editor .healcode-contract-text-link,
.elementor-widget-text-editor .healcode-gift-card-text-link,
/* The pricing subpage CTAs live in html widgets, not text-editor ones, and
would otherwise fall through to a default-blue browser link exactly as the
/pricing/ buttons did before this rule was widened. */
.elementor-widget-html .healcode-pricing-option-text-link,
.elementor-widget-html .healcode-contract-text-link,
.elementor-widget-html .healcode-gift-card-text-link {
display: inline-flex; align-items: center; justify-content: center;
background: var(--dh-burgundy); color: var(--dh-linen) !important;
font-size: 12px; letter-spacing: var(--dh-luxe); text-transform: uppercase; line-height: 1;
min-height: 52px; padding: 16px 32px; border-radius: 999px;
border: 1px solid var(--dh-burgundy);
text-decoration: none !important;
transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.dh-price__buy a:hover,
.elementor-widget-text-editor .healcode-pricing-option-text-link:hover,
.elementor-widget-text-editor .healcode-contract-text-link:hover,
.elementor-widget-text-editor .healcode-gift-card-text-link:hover,
.elementor-widget-html .healcode-pricing-option-text-link:hover,
.elementor-widget-html .healcode-contract-text-link:hover,
.elementor-widget-html .healcode-gift-card-text-link:hover {
background: var(--dh-champagne); color: var(--dh-burgundy) !important;
border-color: var(--dh-champagne);
}
/* .dh-price__buy supplied the gap above the button; nothing does here. */
.elementor-widget-text-editor .healcode-link { margin-top: 8px; }
/* ---------------------------------------------- pricing card alignment
The cards stretch to equal height in the grid, but Elementor's widget wrap
uses `align-content: flex-start`, so the contents sit at the top and the Buy
now button lands wherever the copy happens to end. A card whose copy wrapped
to one more line pushed its button ~26px below its neighbour's, and the slack
collected underneath (37px vs 63px to the card's bottom edge).
Pinning the button to the card's bottom fixes the four rows that are wrong
today and, more importantly, keeps the row aligned when copy length changes
later -- the misalignment was deterministic on line count, not drift.
Two structures are covered because the pages were built differently:
/pricing/ the button sits INSIDE the copy widget
the pricing subpages the button is its own widget after the copy
Scoped by a .dh-price-card class on the column rather than :has(), which this
project avoids. */
.dh-price-card > .elementor-widget-wrap {
display: flex;
flex-direction: column;
align-content: stretch;
}
.dh-price-card > .elementor-widget-wrap > .elementor-element:last-child {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
/* healcode renders a custom element that defaults to display:inline, on which
an auto margin does nothing at all. */
.dh-price-card healcode-widget { display: block; }
.dh-price-card > .elementor-widget-wrap > .elementor-element:last-child > healcode-widget,
.dh-price-card .dh-cta-buy { margin-top: auto; }
/* ------------------------------------------------- pricing subpage CTAs */
.dh-cta-buy { margin-top: 18px; }
.dh-cta-buy .healcode-link { margin-top: 0; }
.dh-cta-buy__label {
font-size: 11px; letter-spacing: var(--dh-luxe); text-transform: uppercase;
color: rgba(61,10,10,.55); margin: 0 0 10px;
}
.dh-cta-buy__note {
font-size: 13px; line-height: 1.6; font-style: italic;
color: rgba(61,10,10,.55); margin: 0;
}
.dh-cta-buy--grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .dh-cta-buy--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dh-cta-buy--grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .dh-price { padding: 36px; } .dh-price__title { font-size: 21px; } }
/* ------------------------------------------------------------- workshops */
.dh-ph--workshops .dh-ph__title { max-width: 56rem; }
.dh-workshops { padding: 0 24px 80px; }
.dh-workshops__inner { max-width: 64rem; margin-inline: auto; }
.dh-workshops__widget { margin-bottom: 64px; scroll-margin-top: 128px; }
.dh-workshops__head { text-align: center; max-width: 40rem; margin: 0 auto 48px; }
.dh-workshops__head .dh-eyebrow { color: rgba(61,10,10,.5); }
.dh-workshops__title { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0; }
.dh-workshops__note { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.7); margin: 20px 0 0; }
.dh-workshops__empty { text-align: center; color: rgba(61,10,10,.6); font-size: 15px; }
.dh-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.dh-witem {
background: color-mix(in oklab, var(--dh-linen) 60%, transparent);
border: 1px solid rgba(61,10,10,.1);
border-radius: 24px;
padding: 28px;
display: grid; gap: 24px; align-items: start;
}
.dh-witem__date .dh-eyebrow { margin-bottom: 8px; }
.dh-witem__date p { font-size: 14px; line-height: 1.4; color: var(--dh-burgundy); margin: 0; }
.dh-witem__body h3 { font-size: 20px; line-height: 1.35; font-weight: 400; margin: 0; }
.dh-witem__body p { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.75); margin: 12px 0 0; }
.dh-witem__teachers { font-size: 12px !important; letter-spacing: .04em; text-transform: uppercase; color: rgba(61,10,10,.6) !important; margin-top: 16px !important; }
.dh-witem__buy { display: flex; flex-direction: column; gap: 16px; }
.dh-witem__cost { font-size: 15px; color: var(--dh-burgundy); margin: 0; }
@media (min-width: 768px) {
.dh-workshops { padding: 0 48px 112px; }
.dh-workshops__title { font-size: 34px; }
.dh-witem { grid-template-columns: 3fr 6fr 3fr; padding: 40px; }
.dh-witem__buy { align-items: flex-end; }
}
/* -------------------------------------------------------------- teachers */
.dh-tsec { padding: 0 24px 80px; }
.dh-tsec__inner { max-width: var(--dh-max); margin-inline: auto; }
.dh-tgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 1024px) { .dh-tgrid { grid-template-columns: repeat(4, 1fr); } }
.dh-tcard {
position: relative; display: block; text-align: left; padding: 0; border: 1px solid rgba(61,10,10,.1);
border-radius: 16px; overflow: hidden; background: rgba(61,10,10,.08); cursor: pointer;
box-shadow: 0 10px 30px -20px rgba(74,16,28,.35);
}
.dh-tcard__media { display: block; aspect-ratio: 3/4; width: 100%; overflow: hidden; }
.dh-tcard__media img { height: 100%; width: 100%; object-fit: cover; object-position: top; filter: grayscale(1); transition: filter .5s ease, transform .5s ease; display: block; }
.dh-tcard:hover .dh-tcard__media img { filter: grayscale(0); transform: scale(1.03); }
.dh-tcard__ph { display: flex; align-items: center; justify-content: center; height: 100%; font-size: .6rem; letter-spacing: var(--dh-luxe); text-transform: uppercase; color: rgba(61,10,10,.5); }
.dh-tcard__scrim { position: absolute; inset-inline: 0; bottom: 0; height: 40%; background: linear-gradient(to top, rgba(61,10,10,.9), rgba(61,10,10,.5), transparent); pointer-events: none; }
.dh-tcard__meta { position: absolute; inset-inline: 0; bottom: 0; padding: 16px 48px 16px 16px; }
.dh-tcard__name { display: block; color: var(--dh-linen); font-size: 15px; line-height: 1.25; }
.dh-tcard__role { display: block; font-size: .6rem; letter-spacing: var(--dh-luxe); text-transform: uppercase; color: rgba(250,248,243,.7); margin-top: 4px; }
.dh-tcard__plus {
position: absolute; bottom: 12px; right: 12px;
height: 32px; width: 32px; border-radius: 999px;
background: var(--dh-linen); color: var(--dh-burgundy);
display: flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1; transition: background-color .3s ease;
}
.dh-tcard:hover .dh-tcard__plus { background: var(--dh-champagne); }
.dh-tmodal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dh-tmodal[hidden] { display: none; }
.dh-tmodal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.dh-tmodal__panel {
position: relative; width: 100%; max-width: 48rem; max-height: 85vh; overflow: hidden;
background: var(--dh-linen); border: 1px solid rgba(61,10,10,.15); border-radius: 16px;
display: grid; grid-template-rows: auto 1fr;
}
@media (min-width: 768px) { .dh-tmodal__panel { grid-template-rows: none; grid-template-columns: minmax(0,240px) 1fr; } }
.dh-tmodal__img { width: 100%; height: 200px; object-fit: cover; object-position: top; display: block; }
@media (min-width: 768px) { .dh-tmodal__img { height: 100%; } }
.dh-tmodal__body { padding: 28px; overflow-y: auto; }
.dh-tmodal__name { font-size: 24px; line-height: 1.25; font-weight: 400; margin: 0 0 16px; }
.dh-tmodal__bio { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.78); margin: 0; white-space: pre-line; }
.dh-tmodal__links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .7rem; letter-spacing: var(--dh-luxe); text-transform: uppercase; }
.dh-tmodal__links a { color: var(--dh-burgundy); border-bottom: 1px solid var(--dh-champagne); padding-bottom: 2px; text-decoration: none; }
.dh-tmodal__links a:hover { color: rgba(61,10,10,.7); }
.dh-tmodal__close {
position: absolute; top: 10px; right: 10px; z-index: 2;
height: 36px; width: 36px; border: 0; border-radius: 999px; cursor: pointer;
background: rgba(250,248,243,.9); color: var(--dh-burgundy); font-size: 22px; line-height: 1;
}
body.dh-modal-open { overflow: hidden; }
/* --------------------------------------------------------------- podcast */
.dh-podcast { padding: 0 24px 80px; }
.dh-podcast__inner { max-width: 56rem; margin-inline: auto; display: grid; gap: 24px; }
.dh-ep {
background: rgba(255,255,255,.6);
border: 1px solid rgba(61,10,10,.1);
border-radius: 16px;
overflow: hidden;
display: grid;
}
@media (min-width: 768px) { .dh-ep { grid-template-columns: 240px 1fr; } }
.dh-ep__cover img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block; }
.dh-ep__body { padding: 28px; }
.dh-ep__title { font-size: 21px; line-height: 1.3; font-weight: 400; margin: 8px 0 12px; }
.dh-ep__excerpt { font-size: 15px; line-height: 1.7; color: rgba(61,10,10,.75); margin: 0 0 20px; }
.dh-ep__audio { width: 100%; }
@media (min-width: 768px) { .dh-podcast { padding: 0 48px 112px; } .dh-ep__body { padding: 32px; } }
/* ----------------------------------------------------------------- legal */
.dh-legal { padding: 0 24px 80px; }
.dh-legal__inner { max-width: 56rem; margin-inline: auto; display: grid; gap: 20px; }
.dh-legal .dh-card__title { font-size: 22px; margin-bottom: 16px; }
@media (min-width: 768px) { .dh-legal { padding: 0 48px 112px; } }
/* ------------------------------------------------------------ hire block */
.dh-hireblock { padding: 64px 24px; }
.dh-hireblock__card {
max-width: 64rem; margin-inline: auto;
background: var(--dh-burgundy); color: var(--dh-linen);
padding: 40px; border-radius: 14px;
box-shadow: 0 30px 80px -40px rgba(61,10,10,.6);
}
.dh-hireblock__card h2 { font-size: 28px; line-height: 1.2; font-weight: 400; margin: 0 0 20px; color: var(--dh-linen); }
.dh-hireblock__card p { font-size: 16px; line-height: 1.7; color: rgba(250,248,243,.8); margin: 0 0 32px; max-width: 44rem; }
@media (min-width: 768px) {
.dh-hireblock { padding: 96px 48px; }
.dh-hireblock__card { padding: 64px; }
.dh-hireblock__card h2 { font-size: 40px; }
.dh-hireblock__card p { font-size: 18px; }
}
/* ----------------------------------------------------------------- login */
.dh-login { padding: 150px 24px 96px; text-align: center; }
.dh-login__inner { max-width: 44rem; margin-inline: auto; }
.dh-login__title { font-size: 40px; line-height: 1.05; font-weight: 400; margin: 0; }
.dh-login__copy { font-size: 17px; line-height: 1.7; color: rgba(61,10,10,.7); margin: 28px 0 36px; }
@media (min-width: 768px) { .dh-login { padding: 200px 48px 128px; } .dh-login__title { font-size: 56px; } }
/* =============================================================================
STAGED - NOT APPLIED. Ship this WITH the page swap, not before it.
=============================================================================
Root-cause fix for grey headings on the OLD shortcode-rendered pages.
What is actually wrong
---------------------
css/pages.css sets `color: var(--dh-burgundy)` on the section wrappers
(.dh-ph, .dh-prose, .dh-card ...) and expects the headings inside to inherit
it. They never do. Astra emits a direct rule in its astra-theme-css-inline-css
block painting h1-h6 with --ast-global-color-2 (#1e293b, its stock slate),
and a direct rule always beats an inherited value regardless of how specific
the ancestor's rule is. So every heading on every interior page renders slate
instead of burgundy.
It is NOT the Elementor kit. Kit 5 defines no heading colour whatsoever - its
compiled CSS carries only global colour variables, container widths and the
20px --kit-widget-spacing. Changing the kit would do nothing here.
Why this rule rather than a colour
----------------------------------
Restoring `inherit` repairs the mechanism the design was written against, so
each section keeps deciding its own heading colour - burgundy on the linen
sections, linen on the burgundy hire block - instead of hard-coding one value
that would then be wrong on the dark blocks.
Scope: .dh-sec only, which exists solely on the Deansgate shortcode sections.
It cannot touch wp-admin, the HFE header/footer, or any other theme output.
The v2 drafts do not need this. They set their heading colour explicitly
through Elementor's own controls, so they render burgundy either way. This
rule exists so the old pages match during any period where both are visible,
and so the underlying bug is fixed rather than papered over.
How to apply, at swap time
--------------------------
Append to wp-content/themes/astra-child/css/pages.css, then confirm the
heading colour on a live page reads rgb(61, 10, 10).
Reverting is deleting these four lines.
Do NOT apply this ahead of the swap: pages.css is shared with the live site,
so it repaints production the moment it lands.
========================================================================== */
.dh-sec :is(h1, h2, h3, h4, h5, h6) {
color: inherit;
}
/* --- full-bleed hero image band -------------------------------------------
A single Image widget in a full-width, zero-padding section. The band sits
directly under each page's title block. Height is fixed and the image is
cropped with object-fit so a 16:9 source reads as a band rather than
occupying most of the viewport (2560x1440 full-bleed would be ~800px tall
at desktop width). One rule here rather than per-page settings, so the band
height is changeable in one place. */
.dh-hero-band { margin-bottom: 64px; }
.dh-hero-band .elementor-widget-image,
.dh-hero-band .elementor-widget-image figure,
.dh-hero-band .elementor-image { margin: 0; line-height: 0; }
.dh-hero-band img {
display: block;
width: 100%;
height: 460px;
object-fit: cover;
object-position: center;
}
@media (max-width: 767px) {
.dh-hero-band img { height: 260px; }
}
/* ---------------------------------------------------------------------------
/events/whats-on/ enrolments widget (Mindbody 2053712fb60)
That widget's theme is configured Mindbody-side for a DARK ground: it ships
`div.healcode, div.healcode table tr td, div.healcode table tr th
{ color:#ffffff !important }`.
On the linen page every date, time and day is therefore white on near-white
and effectively invisible. Re-assert the body colour, scoped to this widget
so nothing else is touched. The champagne (#c8a882) borders and buttons the
theme also sets already read correctly on linen and are left alone.
The cleaner long-term fix is Mindbody-side: retheme the widget for a light
background. This override is safe either way.
--------------------------------------------------------------------------- */
.dh-workshops__widget div.healcode,
.dh-workshops__widget div.healcode table tr td,
.dh-workshops__widget div.healcode table tr th {
color: var(--dh-burgundy) !important;
}
.dh-workshops__widget div.healcode a,
.dh-workshops__widget div.healcode a:visited {
color: var(--dh-burgundy);
}
.dh-workshops__widget div.healcode table tr th {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
}