/* =============================================================================
Devision Hotel - TIDEWELL (coastal, light and airy)
Loaded after the skeleton's main.css.
Every brand value is declared once in :root and consumed as var(--dv-*)
below. There is no hex, font stack, radius or section measure outside the
token block - so Theme Options > Branding restyles this skin wholesale.
See ../../_SKIN-CONVENTIONS.md (note the token-priority blocker in §1).
Section order is identical across all six skins:
1 tokens · 2 base type · 3 buttons · 4 header · 5 hero · 6 booking mask
7 layout + section titles · 8 cards + prices · 9 rooms · 10 blocks
11 module surfaces · 12 chrome · 13 footer + newsletter · 14 states
15 responsive
============================================================================= */
/* --- 1. tokens -------------------------------------------------------------- */
:root {
--dv-color-primary: #1B3A5C;
--dv-color-primary-contrast: #FFFFFF;
--dv-color-secondary: #9FBFB5;
--dv-color-secondary-contrast: #17302A;
--dv-color-accent: #C96F4A;
--dv-color-text: #2A3238;
--dv-color-heading: #1B3A5C;
--dv-color-muted: #6E7780;
/* Muted, taken to AA. --dv-color-muted was chosen to support body copy at 14px+,
but this skin uses it at 0.62-0.72rem for card meta, table headers, form labels,
calendar day names and footer copy - it measured below 4.5:1 on the page.
#646C74: 5.03:1 on bg, 4.65:1 on bg-alt. Every COLOUR use of muted now
reads this token; muted itself stays declared so Branding still has both. */
--dv-color-muted-ink: #646C74;
--dv-color-bg: #FAF8F4;
--dv-color-bg-alt: #F3EFE7;
--dv-color-border: #E2DDD4;
--dv-color-link: #1B3A5C;
--dv-color-link-hover: #C96F4A;
--dv-font-body: "Mulish", "Helvetica Neue", Arial, sans-serif;
--dv-font-heading: "Marcellus", Georgia, serif;
/* Heading scale, ratio 1.28. Marcellus at a gentle 1.28 - the coastal skin is airy, not dramatic.
calc() on --dv-font-size-base, NOT rem: rem resolves against the ROOT element,
and the parent hardcodes :root { font-size: 16px } while the base token is applied
to body. So rem would leave this ladder frozen when Branding changes the base -
the opposite of the intent. Same pattern as §18.2a. Governs editor headings in
WYSIWYG content; contextual sizes (hero, page title, cards) keep their clamps. */
--dv-h1: calc(var(--dv-font-size-base) * 2.62);
--dv-h2: calc(var(--dv-font-size-base) * 2);
--dv-h3: calc(var(--dv-font-size-base) * 1.5);
--dv-h4: calc(var(--dv-font-size-base) * 1.15);
--dv-h5: calc(var(--dv-font-size-base) * 1.0);
--dv-font-size-base: 16px;
--dv-line-height-base: 1.65;
--dv-font-weight-normal: 400;
--dv-font-weight-bold: 700;
--dv-container-max: 1220px;
--dv-gutter: 1.5rem;
--dv-space-section: 6rem;
--dv-radius: 0;
--dv-radius-lg: 0;
--dv-shadow: 0 1px 2px rgba(27, 58, 92, .06);
/* Error tone. Deliberately NOT --dv-color-accent: on this skin the accent does
not clear 4.5:1 against the page, so validation messages would be
effectively invisible. Chosen to sit in the same family as the accent while
passing AA, and exposed as its own token so Branding can still reach it.
--dv-rule-accent is the same idea for 1px rules, which need 3:1. */
/* The accent used as small caps TEXT. Conventions §8: --dv-color-accent is a
FILL colour and most accents in this set fall below 4.5:1 on their own page.
6.10:1 on bg, 6.47:1 on bg-alt. */
/* Text sitting ON the accent fill - a button label is text, so the fill does
have a contrast bar. near-black warmed toward the terracotta. 5.1:1 on --dv-color-accent. */
--dv-color-accent-contrast: #231007;
--dv-color-accent-ink: #9A4520;
--dv-color-error: #9C3316;
--dv-rule-accent: #C96F4A;
--dv-shadow-lg: 0 18px 44px rgba(27, 58, 92, .12);
/* skin-local scale, derived from tokens so nothing here is a brand value */
--tw-rule: 1px solid var(--dv-color-border);
--tw-rule-strong: 1px solid var(--dv-color-primary);
--tw-micro: .72rem;
--tw-track: .14em;
/* Sticky header wordmark (inline with nav); row height + JS --dv-sticky-header-height follow this. */
--tw-sticky-logo-max: 65px;
/* Pinned one-row bar outer height (body offset while stuck - do not tie to JS var). */
--tw-sticky-bar-height: 65px;
--tw-header-sticky-duration: 0.45s;
--tw-header-sticky-ease: cubic-bezier(0.4, 0, 0.2, 1);
/* Mobile cream bar (~70% of prior depth: logo + padding; JS syncs body offset). */
--tw-mobile-logo-max: 72px;
--tw-mobile-bar-padding-y: 0.35rem;
--tw-mobile-bar-min: calc(var(--tw-mobile-logo-max) + (var(--tw-mobile-bar-padding-y) * 2));
--tw-utility-font: calc(var(--dv-font-size-base) * 0.8125);
/* Inner page title band; news/promo singles use deep-page-title overrides (§12). */
--tw-page-title-pad-y: 2.25rem;
--tw-page-title-pad-deep-top: clamp(4.5rem, 10vw, 7rem);
--tw-page-title-pad-deep-bottom: clamp(2.75rem, 5vw, 4.25rem);
/* First content line below page title band + subnav (Nocturne/Esplanade pattern). */
--dv-content-after-title-gap: 2.25rem;
--dv-tab-track: 0.14em;
--dv-tab-pill-radius: 0;
--dv-tab-label-case: uppercase;
}
/* --- 2. base type ----------------------------------------------------------- */
body {
font-family: var(--dv-font-body);
font-size: var(--dv-font-size-base);
line-height: var(--dv-line-height-base);
color: var(--dv-color-text);
background: var(--dv-color-bg);
font-weight: var(--dv-font-weight-normal);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .fancy-title {
font-family: var(--dv-font-heading);
color: var(--dv-color-heading);
font-weight: var(--dv-font-weight-normal);
line-height: 1.14;
text-wrap: pretty;
}
h1, .h1 { font-size: var(--dv-h1); }
h2, .h2 { font-size: var(--dv-h2); }
h3, .h3 { font-size: var(--dv-h3); }
h4, .h4 { font-size: var(--dv-h4); }
h5, .h5 { font-size: var(--dv-h5); }
/* h4 and h5 sit at or near body size, so they need the label treatment to read as
headings rather than bold copy. */
h4, .h4, h5, .h5 { line-height: 1.3; }
h5, .h5 {
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
a { color: var(--dv-color-link); }
a:hover { color: var(--dv-color-link-hover); }
.container {
max-width: var(--dv-container-max);
--bs-gutter-x: calc(var(--dv-gutter) * 2);
}
.layout__block { padding-block: calc(var(--dv-space-section) / 2); }
/* Parent _content.scss: .home #content { margin-top: -5rem } below lg - pulls block 1 under hero. */
body.skin-tidewell.home #content {
margin-top: 0 !important;
}
.wysiwyg { color: var(--dv-color-text); }
.wysiwyg a { text-underline-offset: .2em; }
.wysiwyg h2, .wysiwyg h3 { margin-block: 1.6em .6em; }
.wysiwyg ul { padding-left: 1.1em; }
.wysiwyg li { margin-block: .35em; }
.wysiwyg blockquote {
border-left: 2px solid var(--dv-color-secondary);
padding-left: 1.2em;
margin-inline: 0;
font-family: var(--dv-font-heading);
font-size: 1.2em;
}
.wysiwyg table { width: 100%; border-collapse: collapse; }
.wysiwyg th, .wysiwyg td { border-bottom: var(--tw-rule); padding: .7em .5em; text-align: left; }
.wysiwyg--light, .wysiwyg--light h2, .wysiwyg--light h3 { color: var(--dv-color-primary-contrast); }
/* --- 3. buttons ------------------------------------------------------------- */
.button,
.btn,
.ff-btn-submit,
.frm-fluent-form .ff-btn-submit,
.wpcf7-submit,
.booking-mask__button input,
.newsletter__form input[type="submit"] {
display: inline-block;
font-family: var(--dv-font-body);
font-size: var(--tw-micro);
letter-spacing: var(--tw-track);
text-transform: uppercase;
padding: .95em 1.7em;
border: 1px solid var(--dv-button-bg);
border-radius: var(--dv-radius);
background: var(--dv-button-bg);
color: var(--dv-button-color);
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover,
.btn:hover,
.ff-btn-submit:hover,
.wpcf7-submit:hover,
.booking-mask__button input:hover,
.newsletter__form input[type="submit"]:hover {
background: var(--dv-button-hover-bg);
border-color: var(--dv-button-hover-bg);
color: var(--dv-color-primary-contrast);
}
.button--book {
background: var(--dv-color-accent);
border-color: var(--dv-color-accent);
color: var(--dv-color-accent-contrast);
}
.button--book:hover { background: var(--dv-color-primary); border-color: var(--dv-color-primary); }
.button--clear {
background: transparent;
color: var(--dv-color-primary);
border-color: var(--dv-color-primary);
}
.button--clear:hover { background: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }
.button--white { background: var(--dv-color-bg); color: var(--dv-color-primary); border-color: var(--dv-color-bg); }
/* --- 4. header -------------------------------------------------------------- */
.site-header {
background: var(--dv-color-bg);
border-bottom: 0;
transition:
background-color var(--tw-header-sticky-duration) var(--tw-header-sticky-ease),
box-shadow var(--tw-header-sticky-duration) var(--tw-header-sticky-ease);
}
body.skin-tidewell .site-header.is-sticky,
body.skin-tidewell .site-header.is-sticky-out {
transform: none !important;
animation: none !important;
}
.site-header__utility {
transition:
opacity var(--tw-header-sticky-duration) var(--tw-header-sticky-ease),
max-height var(--tw-header-sticky-duration) var(--tw-header-sticky-ease),
padding-block var(--tw-header-sticky-duration) var(--tw-header-sticky-ease),
border-width var(--tw-header-sticky-duration) var(--tw-header-sticky-ease);
max-height: 6rem;
overflow: hidden;
}
.site-header__masthead {
transition:
padding-block var(--tw-header-sticky-duration) var(--tw-header-sticky-ease),
text-align var(--tw-header-sticky-duration) var(--tw-header-sticky-ease);
}
.site-header__masthead .logo__img,
.site-header__masthead .logo svg {
transition: max-height var(--tw-header-sticky-duration) var(--tw-header-sticky-ease);
}
body.skin-tidewell .menu-scroll-container {
transition: padding-block var(--tw-header-sticky-duration) var(--tw-header-sticky-ease);
}
/* Sticky sentinel/spacer: zero layout footprint (1px sentinel read as a top rule on desktop). */
body.skin-tidewell .tw-sticky-sentinel {
display: block;
width: 100%;
height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
pointer-events: none;
}
body.skin-tidewell .tw-header-spacer {
display: block;
width: 100%;
height: 0;
margin: 0;
padding: 0;
border: 0;
pointer-events: none;
}
.site-header__utility {
background: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
font-size: var(--tw-utility-font);
letter-spacing: .06em;
}
.site-header__utility .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 1rem 1.5rem;
padding-block: .45rem;
min-height: 0;
}
.site-header__utility-contact {
margin: 0;
opacity: .9;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
.site-header__top-nav {
display: flex;
flex-wrap: nowrap;
gap: 1.1rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-header__top-nav--right { justify-content: flex-end; }
.site-header__utility .site-header__top-nav a {
color: var(--dv-color-primary-contrast);
opacity: .82;
text-decoration: none;
font-size: var(--tw-utility-font);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.site-header__utility .site-header__top-nav a:hover {
opacity: 1;
color: var(--dv-color-primary-contrast);
}
.site-header__utility .nav-main__submenu-toggle,
.site-header__utility .nav-main__dropdown { display: none !important; }
.site-header__utility .nav-main__item-row > a { padding: 0; border: 0; }
.site-header__masthead {
padding-block: 2rem .25rem;
text-align: center;
width: 100%;
}
.site-header__masthead .logo {
display: block;
width: fit-content;
max-width: 100%;
margin-inline: auto;
color: var(--dv-color-heading);
text-decoration: none;
}
/* Explicit height - width:auto alone collapses inline SVG to 0x0 (parent main.css width:240px overridden). */
.site-header__masthead .logo__img,
.site-header__masthead .logo svg {
display: block;
width: auto !important;
max-width: min(240px, 100%);
height: 76px;
max-height: 76px;
}
.site-header__bar {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: clamp(0.85rem, 1.75vw, 2.1rem);
padding-block: 1rem 1.25rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
body.skin-tidewell .site-header__book-desktop {
display: flex;
align-items: center;
flex: 0 0 auto;
}
body.skin-tidewell .site-header__book-desktop .button--book,
body.skin-tidewell .site-header .button--book {
position: static !important;
top: auto !important;
right: auto !important;
margin: 0;
align-self: center;
}
body.skin-tidewell .nav-main__list > li.menu-item-has-children > a::after,
body.skin-tidewell .nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after {
display: none !important;
content: none !important;
}
@media (min-width: 992px) {
body.skin-tidewell .menu-container,
body.skin-tidewell .menu-scroll-container {
position: static !important;
transform: none !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
color: inherit !important;
padding: 0 !important;
}
/* Expanded header: centred masthead + nav stack (home and inner pages at rest). */
body.skin-tidewell .site-header:not(.is-sticky):not(.is-sticky-out) .menu-scroll-container {
display: block;
}
body.skin-tidewell .nav-main__drawer-body {
overflow: visible !important;
max-height: none !important;
}
body.skin-tidewell #nav-main.nav-main {
display: block !important;
position: static !important;
width: auto !important;
transform: none !important;
background: transparent !important;
padding: 0 !important;
}
body.skin-tidewell .mobile-header {
display: none !important;
}
body.skin-tidewell .site-header {
height: auto !important;
min-height: 0 !important;
padding-top: 0 !important;
}
/*
* Same pin model as Esplanade: parent sticky-header.js + sticky-header.css
* (position:fixed on .site-header.is-sticky). Tidewell-only: compact one-row
* chrome below + beat parent main.css 70px flex bar.
*/
body.skin-tidewell .site-header.is-sticky,
body.skin-tidewell .site-header.is-sticky-out {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding-top: 0 !important;
animation: none !important;
transform: none !important;
box-shadow: var(--dv-shadow);
background: var(--dv-color-bg);
}
body.skin-tidewell .site-header.is-sticky > .container {
width: 100%;
max-width: var(--dv-container-max);
margin-inline: auto;
padding-inline: var(--dv-gutter) !important;
box-sizing: border-box;
}
body.skin-tidewell .site-header.is-sticky .site-header__utility {
opacity: 0;
max-height: 0;
padding-block: 0;
border-width: 0;
visibility: hidden;
pointer-events: none;
}
/* One row: logo left, nav + Book inline (utility hidden, height from ResizeObserver). */
body.skin-tidewell .site-header.is-sticky .menu-container,
body.skin-tidewell .site-header.is-sticky .menu-scroll-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: clamp(1rem, 2vw, 1.75rem);
padding-block: .65rem;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
overflow: visible;
}
body.skin-tidewell .site-header.is-sticky .site-header__masthead {
padding: 0;
flex: 0 0 auto;
width: auto;
max-width: none;
text-align: left;
align-self: center;
}
body.skin-tidewell .site-header.is-sticky .site-header__masthead .logo {
display: block;
width: fit-content;
margin-inline: 0;
color: var(--dv-color-heading);
}
body.skin-tidewell .site-header.is-sticky .site-header__masthead .logo__img,
body.skin-tidewell .site-header.is-sticky .site-header__masthead .logo svg,
body.skin-tidewell .site-header.is-sticky .site-header__masthead > .logo > svg {
width: auto !important;
height: var(--tw-sticky-logo-max);
max-height: var(--tw-sticky-logo-max);
}
body.skin-tidewell .site-header.is-sticky .nav-main__drawer-body {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
align-self: center;
overflow: visible;
}
body.skin-tidewell .site-header__bar {
gap: clamp(0.85rem, 1.5vw, 2.1rem);
}
/* Nav flexes; Book stays in-flow beside it (no margin-left:auto sliding over links). */
body.skin-tidewell #nav-main.nav-main {
flex: 1 1 0%;
min-width: 0;
max-width: 100%;
overflow: visible;
}
body.skin-tidewell .site-header__book-desktop {
flex: 0 0 auto;
margin-left: 0;
align-self: center;
max-width: none;
}
body.skin-tidewell .nav-main .nav-main__list {
max-width: 100%;
flex-wrap: nowrap;
overflow: visible;
}
body.skin-tidewell .site-header.is-sticky .site-header__bar {
padding: 0;
flex: 1 1 0%;
min-width: 0;
max-width: 100%;
align-items: center;
justify-content: flex-start;
gap: clamp(0.75rem, 1.25vw, 1.35rem);
overflow: visible;
}
body.skin-tidewell .site-header.is-sticky .nav-main__list {
flex-wrap: nowrap;
gap: clamp(0.65rem, 1.1vw, 1.35rem);
justify-content: flex-end;
min-width: 0;
max-width: 100%;
overflow: visible;
}
/* Hover/focus flyouts must not clip on any header flex wrapper (see §18.2). */
body.skin-tidewell .site-header,
body.skin-tidewell .site-header > .container,
body.skin-tidewell .menu-container,
body.skin-tidewell .menu-scroll-container {
overflow: visible;
}
body.skin-tidewell .nav-main__list > li.menu-item-has-children {
z-index: 1;
}
body.skin-tidewell .nav-main__list > li.menu-item-has-children:hover,
body.skin-tidewell .nav-main__list > li.menu-item-has-children:focus-within {
z-index: 80;
}
body.skin-tidewell .site-header.is-sticky .site-header__book-desktop {
flex: 0 0 auto;
margin-left: 0;
align-self: center;
}
body.skin-tidewell .site-header.is-sticky .site-header__book-desktop .button--book {
align-self: center;
white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199px) {
body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a,
body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > a {
letter-spacing: .1em !important;
}
body.skin-tidewell .site-header.is-sticky .nav-main__list {
gap: 0.65rem;
}
}
/* Body offset while stuck: sticky-header.css (loads last) uses --tw-sticky-bar-height. */
body.skin-tidewell {
padding-top: 0 !important;
}
/* Parent main.css hides .button--book below xl; keep Book in the centred bar through 1199px. */
body.skin-tidewell .site-header__book-desktop .button--book,
body.skin-tidewell .site-header .site-header__book-desktop .button--book {
display: inline-flex !important;
}
body.skin-tidewell.sticky-menu-active {
padding-top: 0 !important;
}
body.skin-tidewell .nav-main {
padding: 0 !important;
}
body.skin-tidewell .nav-main .nav-main__list {
width: auto !important;
justify-content: center;
padding-top: 0 !important;
}
body.skin-tidewell .nav-main .nav-main__list > li + li {
margin-left: 0 !important;
}
body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a,
body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > a {
font-family: var(--dv-font-body) !important;
font-size: calc(var(--dv-font-size-base) * 0.875) !important;
letter-spacing: .13em !important;
padding: .35em 0 !important;
text-transform: uppercase !important;
font-weight: var(--dv-font-weight-normal) !important;
}
/* Submenu parents: drop the item-row wrapper from layout so links align with plain li > a. */
body.skin-tidewell #nav-main.nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row {
display: contents;
}
body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) {
display: flex;
align-items: center;
}
/* Beat parent main.css .site-header.is-sticky { height:70px; display:flex } */
body.skin-tidewell .site-header.is-sticky {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
flex: none !important;
flex-direction: unset !important;
align-items: unset !important;
justify-content: unset !important;
}
}
.nav-main__list {
display: flex;
align-items: center;
gap: 2.1rem;
list-style: none;
margin: 0;
padding: 0;
}
.nav-main__list > li > a,
.nav-main__list > li > .nav-main__item-row > a {
font-size: calc(var(--dv-font-size-base) * 0.875);
letter-spacing: .13em;
text-transform: uppercase;
color: var(--dv-color-text);
text-decoration: none;
padding-block: .35em;
border-bottom: 1px solid transparent;
}
.nav-main__list > li > a:hover,
.nav-main__list > li > .nav-main__item-row > a:hover,
.nav-main__list > li.current-menu-item > a,
.nav-main__list > li.current-menu-item > .nav-main__item-row > a {
color: var(--dv-color-primary);
border-bottom-color: var(--dv-color-accent);
}
.nav-main__dropdown {
list-style: none;
margin: 0;
padding: .5rem 0;
background: var(--dv-color-bg);
border: var(--tw-rule);
min-width: 13rem;
}
.nav-main__dropdown a {
display: block;
padding: .5rem 1rem;
font-size: .84rem;
color: var(--dv-color-text);
text-decoration: none;
}
.nav-main__dropdown a:hover { background: var(--dv-color-bg-alt); color: var(--dv-color-primary); }
.mobile-header { display: none; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after { background: var(--dv-color-primary); }
/* --- 4.3 Content-aware nav (see CONTENT-AWARE-NAV-SPEC) -------------------- */
@media (min-width: 992px) {
body.skin-tidewell .site-header #nav-main .nav-main__list > li > a,
body.skin-tidewell .site-header #nav-main .nav-main__list > li > .nav-main__item-row > a {
white-space: nowrap;
}
body.skin-tidewell .site-header #nav-main .nav-main__list > li {
flex: none;
}
html.nav-adaptive-step-1 body.skin-tidewell .nav-main__list {
gap: 1.65rem;
}
html.nav-adaptive-step-1 body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > a,
html.nav-adaptive-step-1 body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
letter-spacing: .11em !important;
}
html.nav-adaptive-step-2 body.skin-tidewell .nav-main__list {
gap: 1.25rem;
}
html.nav-adaptive-step-2 body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > a,
html.nav-adaptive-step-2 body.skin-tidewell .nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
letter-spacing: .09em !important;
}
html.nav-adaptive-step-2 body.skin-tidewell .site-header__bar {
gap: clamp(0.65rem, 1vw, 1rem);
}
html.nav-adaptive-step-3 body.skin-tidewell .site-header__utility {
display: none !important;
}
/* Step 4: burger + drawer; Book stays in .site-header__book-desktop (unlike true mobile). */
html.nav-collapsed body.skin-tidewell .mobile-header {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
padding-block: var(--tw-mobile-bar-padding-y, 0.65rem);
box-sizing: border-box;
}
html.nav-collapsed body.skin-tidewell .menu-container .site-header__masthead {
display: none !important;
}
html.nav-collapsed body.skin-tidewell .site-header__book-desktop {
display: flex !important;
flex: 0 0 auto;
align-items: center;
margin-left: auto;
}
html.nav-collapsed body.skin-tidewell .site-header > .container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
html.nav-collapsed body.skin-tidewell .menu-container {
order: 3;
flex: 1 1 100%;
width: 100%;
}
html.nav-collapsed body.skin-tidewell .menu-scroll-container {
display: block;
}
html.nav-collapsed body.skin-tidewell #nav-main.nav-main {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 55;
width: auto;
max-height: calc(100dvh - 7rem);
flex-direction: column;
background: var(--dv-color-primary);
padding: 0 !important;
box-shadow: var(--dv-shadow-lg);
box-sizing: border-box;
}
html.nav-collapsed body.skin-tidewell #nav-main.nav-main.is-open,
html.nav-collapsed body.skin-tidewell.nav-open #nav-main.nav-main,
html.nav-collapsed body.skin-tidewell .site-header:has(.hamburger.is-active) #nav-main.nav-main {
display: flex !important;
}
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__list {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 0 !important;
}
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__list > li {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__list > li > a,
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__list > li > .nav-main__item-row > a {
color: var(--dv-color-primary-contrast) !important;
padding: 0.85rem 1.25rem !important;
min-height: 3.25rem;
box-sizing: border-box;
}
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__submenu-toggle {
display: inline-flex !important;
border-left: 1px solid rgba(255, 255, 255, 0.12);
color: var(--dv-color-primary-contrast);
}
html.nav-collapsed body.skin-tidewell .site-header #nav-main .nav-main__drawer-footer {
display: none !important;
}
}
/* --- 5. hero ---------------------------------------------------------------- */
.hero-wrapper--split { padding: 1.25rem 0 0; background: var(--dv-color-bg); }
.hero--split {
display: grid !important;
grid-template-columns: 1.35fr 1fr;
max-width: var(--dv-container-max);
margin-inline: auto;
border: var(--tw-rule);
background: var(--dv-color-bg);
min-height: 0;
box-shadow: none;
}
body.skin-tidewell .hero.hero--split::before {
display: none !important;
content: none !important;
}
body.skin-tidewell .hero--split .hero__title {
position: static !important;
inset: auto !important;
transform: none !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: auto !important;
}
.hero--split .hero__slider { overflow: hidden; }
.hero--split .hero__slide img {
width: 100%;
height: 100%;
min-height: 470px;
object-fit: cover;
display: block;
}
.hero--split .hero__panel {
background: var(--dv-color-bg-alt);
padding: 2.9rem 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
body.skin-tidewell .hero--split {
align-items: stretch;
}
body.skin-tidewell .hero--split .hero__slider {
min-height: 470px;
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .hero--split .hero__slide,
body.skin-tidewell .hero--split .hero__slide > div {
height: 100%;
}
body.skin-tidewell .hero--split .hero__booking .booking-mask__title {
color: var(--dv-color-heading);
}
body.skin-tidewell .hero--split .booking-mask__button input,
body.skin-tidewell .hero--split .booking-mask__button .button {
background: var(--dv-color-primary);
border-color: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
}
body.skin-tidewell .hero--split .booking-mask__button input:hover,
body.skin-tidewell .hero--split .booking-mask__button .button:hover {
background: var(--dv-color-accent);
border-color: var(--dv-color-accent);
color: var(--dv-color-accent-contrast);
}
.hero--split .hero__title .h1 {
display: block;
font-family: var(--dv-font-heading);
font-size: clamp(1.9rem, 2.6vw, 2.5rem);
color: var(--dv-color-heading);
margin-bottom: .6rem;
}
.hero--split .hero__title p {
color: var(--dv-color-muted-ink);
margin: 0 0 1.9rem;
max-width: 34ch;
}
.hero--split .hero__booking { border-top: var(--tw-rule); padding-top: 1.4rem; }
/* Booking focus (CD prototype hero presentation) - split hero keeps panel sharp. */
html.booking-focus-open body.skin-tidewell .hero--split .hero__slider {
filter: blur(6px);
opacity: 0.55;
pointer-events: none;
}
html.booking-focus-open body.skin-tidewell .hero--split .hero__panel {
background: var(--dv-color-bg-alt);
}
/* --- 6. booking mask -------------------------------------------------------- */
/* CSS only - the engine emits one .booking-mask__field per configured field. */
.booking-mask .container { padding: 0; max-width: none; }
.booking-mask__title {
font-size: var(--tw-micro);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
margin-bottom: .8rem;
}
.booking-mask__form { display: grid; gap: .6rem; }
.booking-mask--stacked .booking-mask__form { grid-template-columns: 1fr 1fr; }
.booking-mask--stacked .booking-mask__field--small,
.booking-mask--stacked .booking-mask__button { grid-column: 1 / -1; }
.booking-mask__field label {
display: block;
font-size: .62rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
margin-bottom: .25rem;
}
.booking-mask__field input,
.booking-mask__field .form-control {
width: 100%;
background: var(--dv-color-bg);
border: var(--tw-rule);
border-radius: var(--dv-radius);
padding: .7rem .8rem;
font-family: var(--dv-font-body);
font-size: .9rem;
color: var(--dv-color-text);
}
.booking-mask__field input:focus { outline: 2px solid var(--dv-color-accent-ink); outline-offset: -2px; }
.booking-mask__button input { width: 100%; }
/* inline variant, for the mask dropped into content via block or shortcode */
.booking-mask--inline .booking-mask__form {
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
align-items: end;
background: var(--dv-color-bg-alt);
border: var(--tw-rule);
padding: 1rem;
}
.booking-mask--table .booking-mask__button input { background: var(--dv-color-primary); border-color: var(--dv-color-primary); }
/* --- 6.1 Booking mask type + method variants (engine markup, 19 Aug) ------- */
/* From components/booking-mask.twig. The room and table masks are the SAME component:
type is --room or --table, variant is --inline, --stacked or --compact, and the three
methods produce three different children. The §6 pass only covered the variant, so
these were uncovered:
.booking-mask--table table booking, which pairs date + time + covers
.booking-mask--room room booking, check-in + check-out + guests
.booking-mask__field--time , which UAs style themselves
.booking-mask__link method=link, an anchor instead of a form
.booking-mask__embed method=embed, raw provider HTML - contain it, do not style in
*/
.booking-mask__field--time input[type="time"] {
font-family: var(--dv-font-body);
color: var(--dv-color-heading);
background: transparent;
border: 0;
padding: 0;
}
.booking-mask__field--time input[type="time"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.booking-mask__field--small input[type="number"] { -moz-appearance: textfield; }
.booking-mask__field--small input::-webkit-outer-spin-button,
.booking-mask__field--small input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* method=link: no form, so the anchor carries the whole surface */
.booking-mask__link { display: inline-block; }
.booking-mask--stacked .booking-mask__link,
.booking-mask--compact .booking-mask__link { width: 100%; text-align: center; }
/* method=embed: provider HTML. Give it room and a max width, style nothing inside. */
.booking-mask__embed { width: 100%; }
.booking-mask__embed iframe { width: 100%; border: 0; display: block; }
/* --- 6.2 Booking overlay (Book on inner pages; home uses hero focus) -------- */
body.skin-tidewell .booking-overlay {
z-index: 200;
}
body.skin-tidewell .booking-overlay__scrim {
background: rgba(27, 58, 92, 0.58);
}
body.skin-tidewell .booking-mask__field--date .js-booking-date { cursor: pointer; }
body.skin-tidewell .booking-overlay__panel {
background: var(--dv-color-bg);
border: var(--tw-rule);
box-shadow: 0 20px 48px rgba(27, 58, 92, 0.22);
}
body.skin-tidewell .booking-overlay .booking-mask .container {
background: var(--dv-color-bg);
}
body.skin-tidewell .booking-overlay__close {
border-color: var(--dv-color-border);
}
@media (min-width: 768px) {
body.skin-tidewell .booking-overlay .booking-mask--stacked .booking-mask__form,
body.skin-tidewell .booking-overlay .booking-mask--dialog .booking-mask__form {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767.98px) {
body.skin-tidewell .booking-overlay.is-open {
justify-content: flex-end;
}
body.skin-tidewell .booking-overlay__panel {
width: 100%;
max-width: none;
margin: 0;
padding: 2.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
border-left: 0;
border-right: 0;
border-bottom: 0;
}
body.skin-tidewell .booking-overlay .booking-mask__form {
grid-template-columns: 1fr;
}
}
html.booking-overlay-open body.skin-tidewell .site-header,
html.booking-overlay-open body.skin-tidewell .hero-wrapper,
html.booking-overlay-open body.skin-tidewell #content,
html.booking-overlay-open body.skin-tidewell #footer,
html.booking-overlay-open body.skin-tidewell .newsletter {
filter: blur(4px);
opacity: 0.5;
pointer-events: none;
transition: filter 0.25s ease, opacity 0.25s ease;
}
html.booking-overlay-open body.skin-tidewell .booking-overlay {
filter: none;
opacity: 1;
pointer-events: auto;
}
/* the table mask is the narrower of the two, so it does not want the room mask's
four-column stretch when it appears in content */
.booking-mask--table.booking-mask--stacked .booking-mask__form { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
/* --- 7. layout + section titles --------------------------------------------- */
.pretitle {
display: block;
font-size: var(--tw-micro);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--dv-color-secondary-contrast);
}
.fancy-title { position: relative; display: inline-block; padding-bottom: .5rem; }
.fancy-title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 3rem;
height: 1px;
background: var(--dv-color-accent);
transform: translateX(-50%);
}
/* --- 8. cards + price contexts ---------------------------------------------- */
/* Promo embed strip - horizontal scroll; cap item width (large card src attrs). */
.promo-embed--strip .promo-embed__track {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 1.25rem;
}
.promo-embed--strip .promo-embed__item {
flex: 0 0 auto;
scroll-snap-align: start;
min-width: 0;
max-width: 100%;
}
.promo-embed--strip.promo-embed--cols-2 .promo-embed__item {
width: min(16rem, calc((100% - 1.25rem) / 2));
}
.promo-embed--strip.promo-embed--cols-3 .promo-embed__item {
width: min(13rem, calc((100% - 2.5rem) / 3));
}
.promo-embed--strip.promo-embed--cols-4 .promo-embed__item {
width: min(11rem, calc((100% - 3.75rem) / 4));
}
.promo-embed--strip .card--portrait .card__image img {
width: 100%;
max-width: 100%;
height: auto;
}
.promo-embed--strip .card--portrait .card__content { padding: 0 .625rem .75rem; }
.promo-embed--strip .card--portrait .card__content h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.promo-embed--strip .card--portrait .card__content p { display: none; }
/* CD Promo Hub Filters (Oct 2026): white card, square 4:3 image, padded content,
one meta line "CATEGORY · DATE". */
.card {
display: block;
background: #FFFFFF;
border: 0;
border-radius: var(--dv-radius);
box-shadow: none;
height: 100%;
text-decoration: none;
}
.card__image { overflow: hidden; }
.card--portrait .card__image img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.card--link:hover .card__image img { transform: scale(1.03); }
.card__content { padding: 0 1.125rem 1.25rem; margin: 0; border-top: 0; }
.card__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
margin-top: .875rem;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
.card__cat, .card__date { background: none; padding: 0; position: static; }
/* Parent main.css `.card .card__date` is a 74px absolute navy badge - out-ranks the line above. */
body.skin-tidewell .card .card__date {
position: static;
top: auto;
left: auto;
display: inline;
width: auto;
height: auto;
background: none;
color: inherit;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: left;
}
.card__cat + .card__date::before {
content: "\00b7";
margin: 0 .6em;
}
.card__content h3 { font-size: 1.3125rem; line-height: 1.25; margin: .5rem 0 .375rem; }
.card__content p { font-size: .875rem; line-height: 1.6; color: var(--dv-color-text); margin: 0; }
.card__content .card__price { margin-top: .625rem; }
.card--link:hover h3 { color: var(--dv-color-accent); }
/* price - inline flow, never flex (the partial carries its own spacing) */
.card__price,
.room__price,
.promo-single__price-line { display: block; margin-top: .95rem; color: var(--dv-color-muted-ink); }
.card__price__prefix,
.room__price__prefix,
.promo-single__price-line__prefix {
font-size: .68rem;
letter-spacing: var(--tw-track);
text-transform: uppercase;
}
.card__price__amount,
.room__price__amount,
.promo-single__price-line__amount {
font-family: var(--dv-font-heading);
font-weight: var(--dv-font-weight-normal);
font-size: 1.35rem;
color: var(--dv-color-accent-ink);
}
.card__price__unit,
.room__price__unit,
.promo-single__price-line__unit { font-size: .78rem; }
.promo-single__price-line { margin-top: 1.4rem; }
.promo-single__price-line__amount { font-size: 1.7rem; }
/* --- 9. rooms --------------------------------------------------------------- */
.room {
border: var(--tw-rule);
background: var(--dv-color-bg);
border-radius: var(--dv-radius);
height: 100%;
display: flex;
flex-direction: column;
}
.room__carousel { position: relative; }
.room__carousel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.room__nav { position: absolute; inset: auto 0 .6rem; display: flex; justify-content: space-between; padding-inline: .6rem; }
.room__prev, .room__next {
width: 2rem; height: 2rem;
border: 0;
background: var(--dv-color-bg);
color: var(--dv-color-primary);
cursor: pointer;
}
.room__content { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.room__content h3 { font-size: 1.3rem; margin: 0 0 .5rem; }
.room__footer { margin-top: auto; }
.room__buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.room-feature { text-align: center; padding: 1.4rem .8rem; }
.room-feature__icon { width: 2.4rem; height: 2.4rem; margin: 0 auto .8rem; color: var(--dv-color-secondary-contrast); }
.room-feature h3, .room-feature h4 { font-size: 1.05rem; margin: 0 0 .35rem; }
.room-feature p { color: var(--dv-color-muted-ink); font-size: .92rem; margin: 0; }
/* --- 10. blocks ------------------------------------------------------------- */
.promo { position: relative; display: block; overflow: hidden; }
.promo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .5s ease; }
.promo:hover img { transform: scale(1.04); }
.promo__overlay {
position: absolute;
inset: auto 0 0;
padding: 1.4rem;
background: linear-gradient(transparent, rgba(27, 58, 92, .82));
color: var(--dv-color-primary-contrast);
font-family: var(--dv-font-heading);
font-size: 1.25rem;
}
a.gallery { display: block; overflow: hidden; }
a.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* Block carousel: §17.6. Post carousel: §17.5a / `.post-carousel` rules below. */
.post-carousel .carousel__content { padding: 2rem 0; }
.post-carousel .carousel__card { background: var(--dv-color-bg-alt); padding: 1.6rem; border: var(--tw-rule); }
.feature-margin { background: var(--dv-color-bg-alt); }
.embed-container { position: relative; aspect-ratio: 16 / 9; }
.embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { border-bottom: var(--tw-rule); padding: .8rem .6rem; text-align: left; }
.info-table th {
font-family: var(--dv-font-body);
font-size: var(--tw-micro);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
.table-item--left .info-table, .table-item--right .info-table { margin-block: 1rem; }
.features__slide { padding-top: 1.6rem; }
.features .slide__content h3 {
font-family: var(--dv-font-heading);
font-size: var(--dv-h3);
margin: 0 0 .75rem;
}
.accordion, .faq .accordion { border-top: var(--tw-rule); }
.accordion-item { border: 0; border-bottom: var(--tw-rule); background: transparent; }
.accordion-button {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 1.1rem 0;
font-family: var(--dv-font-heading);
font-size: 1.1rem;
color: var(--dv-color-heading);
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--dv-color-accent-ink); box-shadow: none; }
.accordion-button::after { filter: none; }
.accordion-body { padding: 0 0 1.2rem; color: var(--dv-color-muted-ink); }
.faq-intro { margin-bottom: 1.6rem; }
/* --- 10.3 Info panel (INFO-PANEL CD Oct 2026) ------------------------------- */
/* Scoped to .info-panel--* so Tables block .info-table menus are unchanged. */
body.skin-tidewell .info-panel--panel .info-panel__panel {
max-width: 48rem;
margin-inline: auto;
text-align: center;
background: var(--dv-color-bg-alt);
border-radius: var(--dv-radius-lg);
padding: 2.5rem 2.75rem;
border: 0;
box-shadow: none;
}
body.skin-tidewell .info-panel--panel .info-panel__heading {
margin: 0 0 0.875rem;
font-family: var(--dv-font-heading);
font-weight: 400;
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
letter-spacing: 0;
text-transform: none;
color: var(--dv-color-heading);
}
body.skin-tidewell .info-panel--panel .info-panel__body {
text-align: center;
}
body.skin-tidewell .info-panel--table .info-panel__table-wrap {
max-width: 64rem;
margin-inline: auto;
}
body.skin-tidewell .info-panel--table .info-panel__table {
display: block;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
body.skin-tidewell .info-panel--table .info-panel__table tbody {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
body.skin-tidewell .info-panel--table .info-panel__table tr {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
gap: 0.625rem;
padding: 2rem 1.5rem 1.875rem;
min-width: 0;
border-top: 0;
}
body.skin-tidewell .info-panel--table .info-panel__table th,
body.skin-tidewell .info-panel--table .info-panel__table td {
display: block;
width: auto;
padding: 0;
border: 0;
background: transparent;
}
body.skin-tidewell .info-panel--table .info-panel__table th {
font-family: var(--dv-font-body);
font-weight: 400;
font-size: 0.9375rem;
letter-spacing: 0;
text-transform: none;
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .info-panel--table .info-panel__table td {
font-family: var(--dv-font-heading);
font-weight: 400;
font-size: clamp(1.75rem, 3.2vw, 2.875rem);
line-height: 1;
color: var(--dv-color-heading);
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
justify-content: center;
gap: 0;
border-block: 1px solid var(--dv-color-border);
padding-block: 1.625rem;
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
flex: 0 1 auto;
flex-direction: row;
align-items: center;
text-align: left;
gap: 0.875rem;
padding: 0 2.5rem;
border-inline-start: 1px solid var(--dv-color-border);
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item:first-child {
border-inline-start: 0;
}
body.skin-tidewell .info-panel--strip .info-panel__icon {
flex: none;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
background: transparent;
border: 0;
}
body.skin-tidewell .info-panel--strip .info-panel__icon img {
width: 4rem;
height: 4rem;
object-fit: contain;
}
body.skin-tidewell .info-panel--strip .info-panel__label {
font-family: var(--dv-font-body);
font-weight: 700;
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .info-panel--strip .info-panel__value {
font-family: var(--dv-font-heading);
font-weight: 400;
font-size: 1.75rem;
line-height: 1.2;
color: var(--dv-color-heading);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed {
background: var(--dv-color-primary);
border-block: 0;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip {
max-width: 68.75rem;
margin-inline: auto;
padding: 2.125rem var(--dv-gutter, 1.5rem);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
flex: 1 1 0;
justify-content: center;
border-inline-start-color: color-mix(in srgb, var(--dv-color-primary-contrast) 35%, transparent);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__label {
color: color-mix(in srgb, var(--dv-color-primary-contrast) 72%, transparent);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__value {
color: var(--dv-color-primary-contrast);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__icon {
width: 4rem;
height: 4rem;
background: transparent;
border: 0;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__icon img {
width: 4rem;
height: 4rem;
}
@media (max-width: 767.98px) {
body.skin-tidewell .info-panel--table .info-panel__table tbody {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.skin-tidewell .info-panel--table .info-panel__table tr {
padding: 1.375rem 0.875rem;
}
body.skin-tidewell .info-panel--table .info-panel__table td {
font-size: clamp(1.35rem, 6vw, 2.125rem);
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
flex-direction: column;
align-items: stretch;
padding-block: 0;
border-block: 1px solid var(--dv-color-border);
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
flex: none;
width: 100%;
border-inline-start: 0;
border-top: 1px solid var(--dv-color-border);
padding: 0.875rem 0;
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item:first-child {
border-top: 0;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip {
flex-direction: column;
padding: 0.5rem 1.5rem;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
justify-content: flex-start;
text-align: left;
border-inline-start: 0;
border-top: 1px solid color-mix(in srgb, var(--dv-color-primary-contrast) 35%, transparent);
padding: 0.875rem 0;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip-item:first-child {
border-top: 0;
}
}
body.skin-tidewell .info-panel--panel .info-panel__panel {
background: #F3EFE7;
border-radius: 0;
text-align: left;
border-top: 3px solid var(--dv-color-accent);
padding: 2.125rem 2.5rem;
}
body.skin-tidewell .info-panel--panel .info-panel__body {
text-align: left;
}
body.skin-tidewell .info-panel--table .info-panel__table tbody {
gap: 0.75rem;
background: transparent;
}
body.skin-tidewell .info-panel--table .info-panel__table tr {
background: #F3EFE7;
border-top: 3px solid var(--dv-color-accent);
align-items: flex-start;
text-align: left;
padding: 1.75rem 1.5rem;
}
body.skin-tidewell .info-panel--table .info-panel__table th {
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
gap: 0.75rem;
border: 0;
padding: 0;
}
body.skin-tidewell .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
flex: 1 1 0;
flex-direction: column;
align-items: center;
text-align: center;
background: #F3EFE7;
border: 0;
padding: 1.625rem 1.125rem;
}
body.skin-tidewell .info-panel--strip .info-panel__icon {
border-radius: 0;
background: transparent;
color: var(--dv-color-accent);
width: 4rem;
height: 4rem;
}
body.skin-tidewell .info-panel--strip .info-panel__icon img {
width: 4rem;
height: 4rem;
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed {
background: var(--dv-color-primary);
}
body.skin-tidewell .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
flex-direction: column;
text-align: center;
}
/* --- 11. module surfaces ---------------------------------------------------- */
.reviews { border: var(--tw-rule); padding: 1.6rem; background: var(--dv-color-bg-alt); }
.reviews__title { font-size: 1.2rem; margin: 0 0 1rem; }
.reviews__score { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.reviews__rating { font-family: var(--dv-font-heading); font-size: 2.2rem; color: var(--dv-color-primary); }
.reviews__stars { display: inline-flex; gap: .12rem; }
.reviews__star { width: 1rem; height: 1rem; display: inline-block; background: var(--dv-color-border); }
.reviews__star--full { background: var(--dv-star-color); }
.reviews__star--half { background: linear-gradient(90deg, var(--dv-star-color) 50%, var(--dv-color-border) 50%); }
.reviews__count { font-size: .82rem; color: var(--dv-color-muted-ink); }
.reviews__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.reviews__item { border-top: var(--tw-rule); padding-top: 1.1rem; }
.reviews__item-head { display: flex; align-items: center; gap: .6rem; }
.reviews__avatar { width: 2rem; height: 2rem; border-radius: 50%; }
.reviews__author { font-weight: var(--dv-font-weight-bold); }
.reviews__when { font-size: .78rem; color: var(--dv-color-muted-ink); }
.reviews__text { color: var(--dv-color-muted-ink); margin: .5rem 0 0; }
/* --- 11.1b Reviews + calendar hooks (engine markup, 19 Aug) ---------------- */
/* Added after reading components/reviews.twig and components/promo-calendar.twig.
Hooks the earlier §11 pass did not cover because they were written before the
rendered markup was available. */
/* the provider modifier exists so a second source can diverge later */
.reviews--google { }
/* empty is a real third state alongside full and half */
.reviews__star--empty { background: var(--dv-color-border); }
/* the count wraps an external link */
.reviews__count a { color: var(--dv-color-accent-ink); text-decoration: none; }
.reviews__count a:hover { color: var(--dv-color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
/* per-review stars, smaller than the headline set */
.reviews__item-rating {
display: inline-flex;
gap: .1rem;
margin-top: .35rem;
}
.reviews__item-rating .reviews__star { width: .8rem; height: .8rem; }
.promo-calendar__title {
font-family: var(--dv-font-heading);
font-size: var(--dv-h3);
color: var(--dv-color-heading);
margin: 0 0 .8rem;
}
/* month and list are the two views; both share the head */
.promo-calendar--month .promo-calendar__grid { width: 100%; }
.promo-calendar__nav--prev { margin-right: auto; }
.promo-calendar__nav--next { margin-left: auto; }
/* a day carrying events is distinct from today - both can apply at once */
.promo-calendar__cell.has-events .promo-calendar__day { font-weight: var(--dv-font-weight-bold); color: var(--dv-color-heading); }
.promo-calendar__grid th { text-align: center; }
.promo-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.promo-calendar__month { font-family: var(--dv-font-heading); font-size: 1.4rem; color: var(--dv-color-heading); }
.promo-calendar__nav { text-decoration: none; padding: .4rem .7rem; border: var(--tw-rule); }
.promo-calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.promo-calendar__grid th {
font-size: .66rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
padding-bottom: .5rem;
font-weight: var(--dv-font-weight-normal);
}
.promo-calendar__cell { border: var(--tw-rule); vertical-align: top; height: 6.2rem; padding: .4rem; }
.promo-calendar__cell--empty { background: var(--dv-color-bg-alt); }
.promo-calendar__cell.is-today { outline: 2px solid var(--dv-color-accent-ink); outline-offset: -2px; }
.promo-calendar__day { font-size: .78rem; color: var(--dv-color-muted-ink); }
.promo-calendar__events { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; }
.promo-calendar__event a {
display: block;
font-size: .7rem;
line-height: 1.3;
padding: .2rem .35rem;
background: var(--dv-event-color);
color: var(--dv-color-primary-contrast);
text-decoration: none;
}
.promo-calendar__event--events a { background: var(--dv-color-accent); }
.promo-calendar__event--offer a { background: var(--dv-color-primary); }
.promo-calendar__list { list-style: none; margin: 0; padding: 0; }
.promo-calendar__list-item { border-bottom: var(--tw-rule); }
.promo-calendar__list-item a { display: flex; gap: 1rem; padding: .9rem 0; text-decoration: none; }
.promo-calendar__list-date { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dv-color-muted-ink); min-width: 7rem; }
.promo-calendar__list-title { font-family: var(--dv-font-heading); color: var(--dv-color-heading); }
.promo-calendar__empty { color: var(--dv-color-muted-ink); }
/* --- 11 / 11.2 Function rooms (ROOM-01 - Sep 2026 CD comp) ------------------ */
.function-room {
background: var(--dv-color-bg-alt);
border: var(--tw-rule);
border-radius: var(--dv-radius);
padding: 1.75rem;
margin-bottom: 2.4rem;
}
.function-room__image {
border-radius: var(--dv-radius);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-color-primary) 12%, transparent);
}
.function-room__divide-panel {
background: var(--dv-color-bg-alt);
border-color: var(--dv-color-border);
color: inherit;
transition: border-color .25s ease, background-color .25s ease;
}
.function-room__divide-panel:hover,
.function-room.is-matrix-open .function-room__divide-panel {
border-color: var(--dv-color-accent);
background: var(--dv-color-bg);
}
.function-room__divide-title,
.function-room__matrix-heading,
.function-room__matrix-foot-label {
color: var(--dv-color-accent-ink);
font-family: var(--dv-font-body);
}
.function-room__divide-caret { color: var(--dv-color-primary); }
.function-room__divide-bar { color: var(--dv-color-primary-contrast); }
.function-room__divide-bar:nth-child(1) { background: var(--dv-color-primary); }
.function-room__divide-bar:nth-child(2) { background: color-mix(in srgb, var(--dv-color-primary) 78%, var(--dv-color-secondary)); }
.function-room__divide-bar:nth-child(3) { background: color-mix(in srgb, var(--dv-color-primary) 56%, var(--dv-color-secondary)); }
.function-room__divide-bar:nth-child(4) { background: color-mix(in srgb, var(--dv-color-primary) 34%, var(--dv-color-secondary)); }
.function-room__divide-bar:nth-child(5) { background: color-mix(in srgb, var(--dv-color-primary) 18%, var(--dv-color-secondary)); }
.function-room__divide-note { color: var(--dv-color-muted-ink); }
.function-room__divide-toggle {
color: var(--dv-color-primary);
border-bottom-color: var(--dv-rule-accent);
font-family: var(--dv-font-body);
}
.function-room__divide-panel:hover .function-room__divide-toggle,
.function-room.is-matrix-open .function-room__divide-toggle {
color: var(--dv-color-accent-ink);
}
.function-room__title {
font-family: var(--dv-font-heading);
font-size: var(--dv-h3);
font-weight: var(--dv-font-weight-bold);
color: var(--dv-color-heading);
}
.function-room__desc {
font-size: .9375rem;
line-height: 1.65;
color: var(--dv-color-muted-ink);
margin: 0 0 1.25rem;
}
.function-room__desc :first-child { margin-top: 0; }
.function-room__desc :last-child { margin-bottom: 0; }
.function-room__desc p { color: inherit; }
.function-room__badge {
background: color-mix(in srgb, var(--dv-color-accent) 14%, var(--dv-color-bg-alt));
border: 1px solid var(--dv-color-border);
border-radius: 0;
color: var(--dv-color-accent-ink);
font-family: var(--dv-font-body);
}
.function-room__qualifier {
background: var(--dv-color-bg);
border: 1px solid var(--dv-color-border);
border-radius: 0;
color: var(--dv-color-primary);
font-family: var(--dv-font-body);
}
.function-room__dims { border-color: var(--dv-color-border); }
.function-room__dim-label {
color: var(--dv-color-accent-ink);
font-family: var(--dv-font-body);
font-size: .656rem;
letter-spacing: var(--tw-track);
text-transform: uppercase;
font-weight: var(--dv-font-weight-bold);
}
.function-room__dim-value {
font-family: var(--dv-font-heading);
font-size: 1.25rem;
color: var(--dv-color-heading);
}
.function-room__capacities th,
.function-room__capacities td,
.function-room__matrix-table th,
.function-room__matrix-table td {
border-color: var(--dv-color-border);
}
.function-room__capacities th,
.function-room__matrix-table thead th {
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
font-size: .656rem;
letter-spacing: var(--tw-track);
text-transform: uppercase;
color: var(--dv-color-accent-ink);
}
.function-room__capacities thead th.function-room__col-capacity,
.function-room__matrix-table thead th.function-room__matrix-col--whole {
color: var(--dv-color-accent-ink);
}
.function-room__matrix-table thead th.function-room__matrix-col--whole {
background: var(--dv-color-bg-alt);
border-radius: 0;
}
.function-room__col-layout,
.function-room__matrix-table tbody td:first-child,
.function-room__layout-name { color: var(--dv-color-text); }
.function-room__layout-note { color: var(--dv-color-muted); }
.function-room__col-capacity,
.function-room__matrix-table tbody td:not(:first-child) {
font-family: var(--dv-font-heading);
font-size: 1.0625rem;
color: var(--dv-color-heading);
text-align: right;
}
.function-room__matrix-cell--whole {
background: var(--dv-color-bg-alt);
font-size: 1.125rem;
}
.function-room__matrix-foot-row { background: var(--dv-color-bg); }
.function-room__matrix-foot-row td {
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
font-size: .6875rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dv-color-accent-ink);
}
.function-room__matrix-foot-row .function-room__matrix-cell--meta {
font-weight: 400;
font-size: .84375rem;
letter-spacing: 0;
text-transform: none;
color: var(--dv-color-muted);
}
.function-room__matrix-foot-row .function-room__matrix-cell--whole.function-room__matrix-cell--meta {
color: var(--dv-color-heading);
font-weight: 700;
}
.function-room__matrix-wrap { border-top-color: var(--dv-color-border); }
.function-room__matrix-group-title { color: var(--dv-color-heading); font-weight: var(--dv-font-weight-bold); }
.function-room__matrix-pair dt { color: var(--dv-color-muted); font-size: .82rem; }
.function-room__matrix-pair dd {
font-family: var(--dv-font-heading);
color: var(--dv-color-heading);
font-weight: var(--dv-font-weight-bold);
}
.function-room__actions .function-room__cta--enquire {
display: inline-block;
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
font-size: var(--tw-micro);
letter-spacing: var(--tw-track);
text-transform: uppercase;
text-decoration: none;
color: var(--dv-color-primary-contrast);
background: var(--dv-color-primary);
padding: .8125rem 1.375rem;
border-radius: var(--dv-radius);
border: 0;
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.function-room__actions .function-room__cta--enquire:hover {
background: var(--dv-color-accent);
color: var(--dv-color-accent-contrast);
}
.function-room__actions .function-room__cta--pdf {
display: inline-block;
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
font-size: var(--tw-micro);
letter-spacing: var(--tw-track);
text-transform: uppercase;
text-decoration: none;
color: var(--dv-color-primary);
border: 0;
border-bottom: 1px solid var(--dv-rule-accent);
padding: 0 0 .1875rem;
background: transparent;
}
.function-room__actions .function-room__cta--pdf:hover {
color: var(--dv-color-accent-ink);
}
.enquiry-form { background: var(--dv-color-bg-alt); border: var(--tw-rule); padding: 2rem; }
.enquiry-form__title { font-size: 1.5rem; margin: 0 0 .6rem; }
.enquiry-form__intro { color: var(--dv-color-muted-ink); margin-bottom: 1.4rem; }
.ff-el-input--label label,
.wpcf7 label {
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
.ff-el-form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
background: var(--dv-color-bg);
border: var(--tw-rule);
border-radius: var(--dv-radius);
padding: .7rem .8rem;
font-family: var(--dv-font-body);
}
.ff-el-progress-bar,
.ff-step-header .ff-el-progress-bar,
.ff-el-progress-status { background-color: var(--dv-form-accent); }
.ff-step-titles li.ff_active { color: var(--dv-color-primary); }
.social-wall { margin-block: 1rem; }
.juicer-feed .j-text, #curator-feed-default-layout { font-family: var(--dv-font-body) !important; }
/* download shortcode + gated modal */
.button--download::after { content: " \2193"; }
.modal-content { background: var(--dv-color-bg); border: var(--tw-rule); border-radius: var(--dv-radius); }
.modal-header, .modal-footer { border-color: var(--dv-color-border); }
.modal-title { font-family: var(--dv-font-heading); color: var(--dv-color-heading); }
/* --- 12. chrome ------------------------------------------------------------- */
/* Parent `_page-title.scss` adds 4-6rem padding + margin on `.page-title` - reset here. */
body.skin-tidewell .page-title {
position: relative;
background: var(--dv-color-bg-alt);
padding: 0 !important;
margin-bottom: 0 !important;
}
body.skin-tidewell .page-title::before {
display: none !important;
}
.page-title__background { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-title__background::after { content: ""; position: absolute; inset: 0; background: rgba(27, 58, 92, .42); }
.page-title__overlay { position: relative; padding-block: 5.5rem; }
/* Plain inner pages (Dine, etc.) - not news/promo deep hero bands. */
body.skin-tidewell:not(.home):not(.deep-page-title) .page-title__overlay {
padding-block: var(--tw-page-title-pad-y) 2rem;
}
/*
* Layout-builder inner pages: one gap from title band (incl. subnav when present) to main content.
* Excludes deep hero singles (news/promo) - they use back-link + intro rhythm instead.
*/
body.skin-tidewell:not(.home):not(.deep-page-title):not(.page-contact):not(:has(.contact--tidewell)) .page-title + #content {
padding-top: var(--dv-content-after-title-gap) !important;
}
body.skin-tidewell:not(.home):not(.deep-page-title) .page-title--tall .page-title__overlay {
padding-block: clamp(3rem, 6vw, 4.5rem);
}
body.skin-tidewell:not(.home) .page-title__overlay .container > div {
text-align: left;
}
body.skin-tidewell:not(.home) .page-title h1 {
margin-inline: 0;
max-width: none;
}
/* News + promo singles: parent adds body.deep-page-title (promo-single.php). */
body.skin-tidewell.deep-page-title .page-title:not(.page-title--no-bg) .page-title__overlay {
padding-block: var(--tw-page-title-pad-deep-top) var(--tw-page-title-pad-deep-bottom);
}
body.skin-tidewell.deep-page-title .page-title--tall .page-title__overlay {
padding-block: clamp(5.25rem, 11vw, 8.5rem) var(--tw-page-title-pad-deep-bottom);
}
body.skin-tidewell.deep-page-title .page-title:has(.page-title__background) {
min-height: clamp(16rem, 34vw, 24rem);
}
body.skin-tidewell.deep-page-title .page-title:not(.page-title--no-bg) h1 {
font-size: clamp(2rem, 4.2vw, 3.15rem);
}
body.skin-tidewell.deep-page-title .page-title__overlay .container > div {
display: flex;
flex-direction: column;
}
body.skin-tidewell.deep-page-title .page-title #breadcrumbs {
order: -1;
margin: 0 0 0.85rem;
width: 100%;
}
body.skin-tidewell.deep-page-title .page-title h1 {
order: 0;
}
.page-title h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--dv-color-primary-contrast); }
.page-title--no-bg h1 { color: var(--dv-color-heading); }
.page-title--tall .page-title__overlay { padding-block: 9rem; }
.promo-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.promo-filter .btn-secondary {
background: transparent;
border: var(--tw-rule);
color: var(--dv-color-text);
font-size: var(--tw-micro);
letter-spacing: .12em;
text-transform: uppercase;
padding: .6em 1.1em;
}
.promo-filter .btn-secondary:hover { border-color: var(--dv-color-primary); color: var(--dv-color-primary); }
.promo-filter .btn-secondary.active {
background: var(--dv-color-primary);
border-color: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
}
.promo-index__empty {
border-top: var(--tw-rule-strong);
border-bottom: var(--tw-rule);
padding: 3rem 0;
text-align: center;
font-family: var(--dv-font-heading);
font-size: 1.25rem;
color: var(--dv-color-muted-ink);
}
.pagination-block { margin-top: 3rem; }
.pagination { display: flex; justify-content: center; gap: .3rem; list-style: none; padding: 0; }
.pagination a, .pagination span {
display: block;
min-width: 2.4rem;
padding: .55rem .6rem;
text-align: center;
border: var(--tw-rule);
text-decoration: none;
font-size: .84rem;
}
.pagination a:hover { border-color: var(--dv-color-primary); }
.pagination .current span,
.pagination li.current span {
background: var(--dv-color-primary);
border-color: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
}
/* --- 13. footer + newsletter ------------------------------------------------ */
.newsletter { background: var(--dv-color-primary); color: var(--dv-color-primary-contrast); padding-block: 4rem; }
.newsletter__form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .8rem; align-items: end; text-align: left; }
.form__group label { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: .3rem; }
.form__control {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, .4);
padding: .55rem 0;
color: var(--dv-color-primary-contrast);
font-family: var(--dv-font-body);
}
.form__control::placeholder { color: rgba(255, 255, 255, .5); }
.form__group--submit input { background: var(--dv-color-accent); border-color: var(--dv-color-accent); color: var(--dv-color-accent-contrast); }
#footer { background: var(--dv-color-bg-alt); color: var(--dv-color-text); padding-block: 4rem 1.5rem; }
.footer__info .logo--footer .logo__img,
.footer__info .logo--footer svg { max-height: 46px; width: auto; }
#footer .footer__heading { color: var(--dv-color-heading); letter-spacing: .12em; }
.footer__address { color: var(--dv-color-muted-ink); margin-block: 1rem; }
.social-links { display: flex; gap: .8rem; list-style: none; margin: 0; padding: 0; }
body.skin-tidewell #footer .social-links a,
body.skin-tidewell.footer-chrome--light #footer .social-links a {
display: grid;
place-items: center;
box-sizing: border-box;
width: 2.35rem;
height: 2.35rem;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--dv-color-primary) 18%, var(--dv-color-border));
background: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
body.skin-tidewell #footer .social-links a:hover,
body.skin-tidewell #footer .social-links a:focus-visible,
body.skin-tidewell.footer-chrome--light #footer .social-links a:hover,
body.skin-tidewell.footer-chrome--light #footer .social-links a:focus-visible {
background: var(--dv-color-accent);
border-color: var(--dv-color-accent);
color: var(--dv-color-accent-contrast);
}
body.skin-tidewell #footer .social-links svg,
body.skin-tidewell.footer-chrome--light #footer .social-links svg {
display: block;
width: 1.05rem;
height: 1.05rem;
pointer-events: none;
}
body.skin-tidewell.footer-chrome--light #footer .social-links svg path {
fill: currentColor;
}
body.skin-tidewell #footer .social-links svg.social-icon--x {
transform: scale(0.88);
transform-origin: center center;
}
#footer ul { list-style: none; padding: 0; }
#footer li a { text-decoration: none; font-size: .92rem; }
.footer__copy { border-top: var(--tw-rule); margin-top: 2.6rem; padding-top: 1.2rem; font-size: .78rem; color: var(--dv-color-muted-ink); }
.footer__copy p { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 0; }
.devision-link-dark svg { height: .9rem; width: auto; }
/* FOCUS RINGS use --dv-color-accent-ink, not --dv-color-accent.
A focus ring is a non-text UI indicator, so WCAG 1.4.11 wants 3:1 against the
colour it sits on - and the raw accent failed that on three of the seven skins
(Thermae 1.81, Esplanade 2.94 on bg-alt, Tidewell's field ring on secondary 1.73).
accent-ink is the one accent-family token already measured against BOTH grounds in
every skin, so it clears 3:1 with margin everywhere. All rings are 2px with a 2px
offset: Nocturne's was 1px, which is harder to see and inconsistent for no reason.
Conventions §18. */
/* --- 14. states ------------------------------------------------------------- */
.card--link:focus-visible,
.button:focus-visible,
.promo:focus-visible { outline: 2px solid var(--dv-color-accent-ink); outline-offset: 3px; }
/* --- 15. responsive --------------------------------------------------------- */
@media (max-width: 1199px) {
.hero--split { grid-template-columns: 1fr; }
.hero--split .hero__slide img { min-height: 340px; }
}
@media (max-width: 991.98px) {
.site-header__utility .container {
grid-template-columns: 1fr;
gap: .4rem;
text-align: center;
justify-items: center;
}
.site-header__top-nav--right { justify-content: center; }
.site-header__bar { flex-wrap: wrap; gap: 1rem; }
.nav-main__list { gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.newsletter__form { grid-template-columns: 1fr; }
.footer__info { margin-bottom: 2rem; }
/* Match parent mobile-nav.css (lg): hamburger + drawer, not a 768-991 dead zone. */
body.skin-tidewell .site-header {
height: auto !important;
min-height: 0 !important;
padding-top: 0 !important;
box-sizing: border-box;
}
body.skin-tidewell .site-header > .container {
display: flex;
align-items: center;
min-height: 0;
padding-inline: var(--dv-gutter);
box-sizing: border-box;
}
body.skin-tidewell .mobile-header {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 0;
padding-block: var(--tw-mobile-bar-padding-y);
padding-bottom: 0 !important;
box-sizing: border-box;
}
body.skin-tidewell .mobile-header .logo {
display: flex !important;
align-items: center;
flex: 1 1 auto;
min-width: 0;
line-height: 0;
}
body.skin-tidewell .mobile-header .logo__img {
display: block;
max-height: var(--tw-mobile-logo-max);
width: auto;
height: auto;
}
/* Cap size only - height: auto collapses inline SVG (same as sticky masthead fix). */
body.skin-tidewell .mobile-header .logo svg {
display: block;
width: auto;
max-width: min(12rem, 62vw);
height: var(--tw-mobile-logo-max);
max-height: var(--tw-mobile-logo-max);
}
body.skin-tidewell .mobile-header .hamburger {
flex: 0 0 auto;
margin-inline-end: 0;
padding-block: 8px;
position: relative;
z-index: 131;
}
/* Parent main.css paints .is-active bars white (for dark drawers). Cream mobile
bar + white X is invisible - keep primary like the closed burger (Thermae). */
body.skin-tidewell .mobile-header .hamburger.is-active .hamburger-inner,
body.skin-tidewell .mobile-header .hamburger.is-active .hamburger-inner::before,
body.skin-tidewell .mobile-header .hamburger.is-active .hamburger-inner::after,
body.skin-tidewell .mobile-header .hamburger.is-active:hover .hamburger-inner,
body.skin-tidewell .mobile-header .hamburger.is-active:hover .hamburger-inner::before,
body.skin-tidewell .mobile-header .hamburger.is-active:hover .hamburger-inner::after {
background-color: var(--dv-color-primary) !important;
}
body.skin-tidewell.nav-open .mobile-header,
body.skin-tidewell .site-header:has(.hamburger.is-active) .mobile-header {
position: relative;
z-index: 130;
}
body.skin-tidewell .site-header.is-sticky {
min-height: 0 !important;
height: auto !important;
padding-top: 0 !important;
}
/* Fixed mobile offset - do not use --dv-sticky-header-height (JS/RO updates shift the bar). */
body.skin-tidewell {
padding-top: var(--tw-mobile-bar-min) !important;
}
body.skin-tidewell.is-header-stuck {
padding-top: var(--tw-mobile-bar-min) !important;
}
/* Drawer overlay: no centred masthead logo (mobile bar keeps the mark). */
body.skin-tidewell .menu-container .site-header__masthead {
display: none !important;
}
/*
* Mobile drawer: parent _menu.scss uses height: 100vh + overflow on
* .menu-scroll-container, which clips the sticky Book band below the visible
* viewport on Chrome Android (100vh > visual viewport). Panel starts under the
* cream mobile bar; links scroll; footer stays in view.
*/
body.skin-tidewell .menu-container {
top: var(--tw-mobile-bar-min) !important;
height: calc(100dvh - var(--tw-mobile-bar-min)) !important;
max-height: calc(100svh - var(--tw-mobile-bar-min)) !important;
background-color: var(--dv-color-primary) !important;
z-index: 125;
}
body.skin-tidewell .menu-container.is-open .menu-scroll-container {
display: flex !important;
flex-direction: column;
height: 100% !important;
max-height: 100% !important;
min-height: 0;
overflow: hidden !important;
padding: 1.25rem var(--dv-gutter)
calc(1rem + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
body.skin-tidewell .menu-container .nav-main__drawer-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.skin-tidewell .menu-container.is-open .nav-main__drawer-footer {
display: block !important;
flex: 0 0 auto;
margin-top: auto;
padding-top: 1rem;
border-top-color: rgba(255, 255, 255, .22);
}
body.skin-tidewell .menu-container.is-open .nav-main__drawer-footer .button {
width: 100%;
justify-content: center;
}
body.skin-tidewell .site-header .nav-main .nav-main__list > li > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li > .nav-main__item-row > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-parent > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-ancestor > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-parent > .nav-main__item-row > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-ancestor > .nav-main__item-row > a {
color: var(--dv-color-primary-contrast) !important;
border-bottom-color: transparent;
}
body.skin-tidewell .site-header .nav-main .nav-main__list > li > a:hover,
body.skin-tidewell .site-header .nav-main .nav-main__list > li > .nav-main__item-row > a:hover,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-item > a,
body.skin-tidewell .site-header .nav-main .nav-main__list > li.current-menu-item > .nav-main__item-row > a {
color: var(--dv-color-primary-contrast) !important;
border-bottom-color: var(--dv-color-accent);
}
body.skin-tidewell .nav-main .nav-main__submenu-toggle {
color: rgba(255, 255, 255, .92);
}
/* Flush hero under fixed header (split wrapper top pad is for desktop inset). */
body.skin-tidewell .hero-wrapper--split {
padding-top: 0;
margin-top: 0;
}
body.skin-tidewell .hero-wrapper--split .hero--split {
border-top: 0;
}
/* Split hero + in-panel booking: keep hero in document flow (see F&F spread hero @991). */
body.skin-tidewell.home .hero-wrapper--split {
display: flow-root;
position: relative;
z-index: 3;
}
body.skin-tidewell.home .hero--split {
overflow: visible;
}
body.skin-tidewell.home #content {
position: relative;
z-index: 2;
background: var(--dv-color-bg);
}
}
@media (max-width: 767px) {
:root {
/* mobile ladder: the ratio compresses from 1.28 to 1.168 rather than each level
getting its own clamp(). Keeps the tokens as the single source of truth, so
Branding still moves the whole ladder, and keeps this skin's proportions
recognisable instead of flattening every skin to the same small-screen scale.
h5 holds at body size - it is a label, and it never goes below the copy. */
--dv-h1: calc(var(--dv-font-size-base) * 1.87);
--dv-h2: calc(var(--dv-font-size-base) * 1.6);
--dv-h3: calc(var(--dv-font-size-base) * 1.37);
--dv-h4: calc(var(--dv-font-size-base) * 1.17);
--dv-h5: calc(var(--dv-font-size-base) * 1); --dv-space-section: 4rem; }
.site-header__utility { display: none; }
.booking-mask--stacked .booking-mask__form { grid-template-columns: 1fr; }
.card__content h3 { font-size: 1.2rem; }
.page-title__overlay { padding-block: 3.5rem; }
.function-room__capacities { display: block; overflow-x: auto; }
}
/* =============================================================================
16. SHARED SURFACES (added after the §11 pass - see ../../_REMAINING-SURFACES.md)
Slick controls, skip link, contact + map, promo hub, spinner, Easepick.
Written against --dv-* tokens only, so this block stays brandable and reads the
same across all six skins - only the values below differ per skin.
============================================================================= */
/* --- 16.1 Slick carousel controls ------------------------------------------- */
/* Applies to the hero slider and the room carousel, both of which are Slick.
Note (verified Aug 2026): init.slick.js runs the hero with dots: false and no
arrows (fade autoplay), and the room carousel supplies its own .room__prev /
.room__next. The dot rules below are therefore INERT on the current build -
kept because they cost nothing and any skin or client enabling dots gets a
treatment rather than default Slick chrome. The .slick-track rule is not
inert: it equalises slide heights. */
.slick-slider { position: relative; }
.slick-track { display: flex; align-items: stretch; }
.slick-slide { height: auto; }
.slick-slide > div { height: 100%; }
.slick-dots {
position: absolute;
inset: auto 0 1.25rem;
display: flex;
justify-content: center;
gap: .5rem;
list-style: none;
margin: 0;
padding: 0;
z-index: 2;
}
.slick-dots li { line-height: 0; }
.slick-dots li button {
width: 2.25rem;
height: 3px;
padding: 0;
border: 0;
border-radius: 0;
background: var(--dv-color-border);
color: transparent;
font-size: 0;
cursor: pointer;
opacity: .8;
transition: background .2s ease, opacity .2s ease;
}
.slick-dots li button:hover { opacity: 1; }
.slick-dots li.slick-active button { background: var(--dv-color-accent); opacity: 1; }
.slick-dots li button::before { display: none; }
.slick-prev,
.slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 2.75rem;
height: 2.75rem;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: var(--dv-color-bg);
color: var(--dv-color-primary);
font-size: 0;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.slick-prev { left: 1rem; }
.slick-next { right: 1rem; }
.slick-prev.slick-disabled,
.slick-next.slick-disabled { opacity: .35; cursor: default; }
/* --- 16.2 Skip link --------------------------------------------------------- */
/* Hidden until focused. Present in base.twig on every page. */
.skip-link.screen-reader-text {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link.screen-reader-text:focus {
left: 1rem;
top: 1rem;
width: auto;
height: auto;
padding: .75rem 1.25rem;
background: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
border-radius: var(--dv-radius);
font-size: .85rem;
text-decoration: none;
outline: 2px solid var(--dv-color-accent-ink);
outline-offset: 2px;
}
/* --- 16.3 Contact page + map ------------------------------------------------ */
/* #map is initialised by JS with no intrinsic height, so it collapses without */
/* this rule. That was the actual bug, not the styling. */
#map {
width: 100%;
height: clamp(20rem, 42vh, 30rem);
background: var(--dv-color-bg-alt);
border: 1px solid var(--dv-color-border);
border-radius: var(--dv-radius);
}
.contact-details { display: grid; gap: 1.25rem; }
.contact-details a { text-decoration: none; }
.contact-details p { margin: 0; }
.contact-details strong,
.contact-details dt {
display: block;
font-family: var(--dv-font-body);
font-size: .66rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
margin-bottom: .2rem;
}
/* --- 16.4 Promo hub -------------------------------------------------------- */
/* Verified against ajax.js and page-promo-hub.twig (Theo, Aug 2026): the flex
row is .promo-hub__filter, the buttons themselves carry .js-hub-type /
.js-hub-cat, and the active one gets a plain .active class - not .is-active
and not [aria-pressed]. The loader is a separate #js-hub-loader that is
shown and hidden, so results are not dimmed. */
.js-promo-hub { display: block; }
.promo-hub__filter,
.promo-hub__filter--cat {
display: flex;
flex-wrap: wrap;
gap: .5rem;
list-style: none;
margin: 0 0 1.25rem;
padding: 0;
}
button.js-hub-type,
button.js-hub-cat,
.promo-hub__filter a {
background: transparent;
border: 1px solid var(--dv-color-border);
border-radius: 0;
padding: .6em 1.15em;
font-family: var(--dv-font-body);
font-size: .7rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dv-color-text);
text-decoration: none;
cursor: pointer;
transition: background .16s ease, border-color .16s ease, color .16s ease;
}
button.js-hub-type:hover,
button.js-hub-cat:hover { border-color: var(--dv-color-primary); color: var(--dv-color-heading); }
button.js-hub-type.active,
button.js-hub-cat.active {
background: var(--dv-color-primary);
border-color: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
}
.promo-hub__filter--cat { margin-bottom: 2rem; }
#js-hub-results { min-height: 8rem; }
#js-hub-loader:not([hidden]) { display: grid; place-items: center; min-height: 4rem; }
/* --- 16.5 AJAX spinner ----------------------------------------------------- */
.spinner {
width: 1.75rem;
height: 1.75rem;
margin: 2rem auto;
border: 2px solid var(--dv-color-border);
border-top-color: var(--dv-color-accent);
border-radius: 50%;
animation: dv-spin .7s linear infinite;
}
@keyframes dv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.spinner { animation-duration: 2s; }
}
/* --- 16.6a Easepick date picker (rewritten 20 Aug, smoke QA) --------------- */
/*
* WHY THE PREVIOUS RULES DID NOTHING. Easepick renders its panel inside a SHADOW
* ROOT. Descendant selectors from this stylesheet - .easepick-wrapper .day,
* .easepick-wrapper .month-name and so on - cannot cross that boundary, so every
* one of them was inert. The smoke build showed the library defaults throughout:
* indigo selected days, a pale blue in-range band, red for today, square white
* panel.
*
* CSS custom properties DO inherit through a shadow boundary, and easepick reads a
* documented set off .easepick-wrapper. That is the only CSS-only route in, so the
* whole picker is themed through them here - which also keeps it token-driven and
* therefore brandable.
*
* The three that mattered visually:
* --easepick-primary-color selected day fill + header chevrons (was indigo)
* --easepick-in-range-color the band between two dates (was pale blue)
* --easepick-today-color today's marker (was red)
*
* Anything genuinely outside the shadow root - the wrapper's own box - is still
* styled with ordinary rules below.
*/
.easepick-wrapper {
--easepick-font-family: var(--dv-font-body);
--easepick-color: var(--dv-color-text);
--easepick-background-color: var(--dv-color-bg);
--easepick-border-radius: var(--dv-radius);
--easepick-wrapper-box-shadow: var(--dv-shadow-lg);
--easepick-z-index: 60;
/* selected days and the header chevrons */
--easepick-primary-color: var(--dv-color-primary);
--easepick-secondary-color: var(--dv-color-text);
/* the in-range band sits behind ~13px numerals, so it takes bg-alt rather than a
tint of primary - the numerals stay on --dv-color-text and keep their contrast */
--easepick-in-range-color: var(--dv-color-bg-alt);
--easepick-day-hover-color: var(--dv-color-accent-ink);
/* today, and days the provider has closed off */
--easepick-today-color: var(--dv-color-accent-ink);
--easepick-locked-color: var(--dv-color-muted-ink);
--easepick-disabled-color: var(--dv-color-muted-ink);
--easepick-highlighted-day-color: var(--dv-color-accent-ink);
/* a little more room than the default 36px, so the panel does not feel cramped
against these skins' generous field padding */
--easepick-day-width: 2.4rem;
--easepick-day-height: 2.2rem;
}
/* the wrapper itself is in the light DOM, so ordinary rules reach it */
.easepick-wrapper { position: relative; z-index: 60; }
/* --- 17.1 Blog ------------------------------------------------------------- */
/* Verified: page-blog.twig routes posts through partial/card.twig with
class "card--blog", so blog cards inherit this skin's card treatment. Only the
filter form, the blog-specific card tweaks and the pagination wrapper need
rules. .button--purple / .button--thic are legacy classes on the Apply button;
they are neutralised here so it matches the skin's own button. */
.form--light { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.form--light .form__group { flex: 1 1 16rem; }
.form--light label {
display: block;
font-family: var(--dv-font-body);
font-size: .66rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
margin-bottom: .3rem;
}
select.form__control {
width: 100%;
background: var(--dv-color-bg-alt);
border: 1px solid var(--dv-color-border);
border-radius: var(--dv-radius);
padding: .7rem 2.2rem .7rem .8rem;
font-family: var(--dv-font-body);
font-size: .95rem;
color: var(--dv-color-text);
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--dv-color-muted) 50%),
linear-gradient(135deg, var(--dv-color-muted) 50%, transparent 50%);
background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - .8rem) 1.15rem;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
select.form__control:focus { outline: 2px solid var(--dv-color-accent-ink); outline-offset: -2px; }
.filters__apply { flex: 0 0 auto; }
.button--purple,
.button--thic {
background: var(--dv-button-bg);
border-color: var(--dv-button-bg);
color: var(--dv-button-color);
}
.button--purple:hover,
.button--thic:hover { background: var(--dv-button-hover-bg); border-color: var(--dv-button-hover-bg); }
.card--blog .card__cat { color: var(--dv-color-accent-ink); }
/* teases - used by search and archive listings */
.tease { border-bottom: 1px solid var(--dv-color-border); padding-block: 1.6rem; }
.tease:first-of-type { padding-top: 0; }
.tease .h2, .tease h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.tease .h2 a, .tease h2 a { text-decoration: none; color: var(--dv-color-heading); }
.tease .h2 a:hover, .tease h2 a:hover { color: var(--dv-color-link-hover); }
.tease p { color: var(--dv-color-muted-ink); margin: 0; max-width: 68ch; }
.tease img {
display: block;
width: 100%;
max-width: 22rem;
height: auto;
margin-top: 1rem;
border-radius: var(--dv-radius);
}
/* --- 17.2 Promo single date title ------------------------------------------ */
.date-title {
display: inline-block;
font-family: var(--dv-font-body);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
padding-bottom: .5rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid var(--dv-rule-accent, var(--dv-color-accent));
}
article[class*="post-type-"] > .container:first-of-type { padding-top: 2.5rem; }
/* --- 17.3 Form controls and error states ---------------------------------- */
/* Fluent Forms and CF7 side by side - the theme is form-plugin-agnostic, so both
get the same treatment. Labels, text inputs, submit and the progress bar are
already handled in §11; this is everything else. */
.ff-el-form-check,
.wpcf7-list-item { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .45rem; }
.wpcf7-list-item { margin-left: 0; }
.ff-el-form-check input[type="checkbox"],
.ff-el-form-check input[type="radio"],
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
appearance: none;
flex: none;
width: 1.05rem;
height: 1.05rem;
margin-top: .18rem;
background: var(--dv-color-bg-alt);
border: 1px solid var(--dv-color-border);
cursor: pointer;
}
.ff-el-form-check input[type="radio"],
.wpcf7-list-item input[type="radio"] { border-radius: 50%; }
.ff-el-form-check input[type="checkbox"] { border-radius: var(--dv-radius); }
.ff-el-form-check input[type="checkbox"]:checked,
.wpcf7-list-item input[type="checkbox"]:checked {
background: var(--dv-color-primary);
border-color: var(--dv-color-primary);
}
.ff-el-form-check input[type="checkbox"]:checked::after,
.wpcf7-list-item input[type="checkbox"]:checked::after {
content: "";
display: block;
width: .28rem;
height: .55rem;
margin: .1rem auto 0;
border-right: 2px solid var(--dv-color-primary-contrast);
border-bottom: 2px solid var(--dv-color-primary-contrast);
transform: rotate(45deg);
}
.ff-el-form-check input[type="radio"]:checked,
.wpcf7-list-item input[type="radio"]:checked {
border-color: var(--dv-color-primary);
box-shadow: inset 0 0 0 3px var(--dv-color-bg-alt), inset 0 0 0 1rem var(--dv-color-primary);
}
.ff-el-form-check input:focus-visible,
.wpcf7-list-item input:focus-visible { outline: 2px solid var(--dv-color-accent-ink); outline-offset: 2px; }
.ff-el-form-check-label,
.wpcf7-list-item-label {
font-family: var(--dv-font-body);
font-size: .92rem;
color: var(--dv-color-text);
cursor: pointer;
text-transform: none;
letter-spacing: 0;
}
select.ff-el-form-control,
.wpcf7 select {
width: 100%;
background: var(--dv-color-bg-alt);
border: 1px solid var(--dv-color-border);
border-radius: var(--dv-radius);
padding: .7rem .8rem;
font-family: var(--dv-font-body);
color: var(--dv-color-text);
}
textarea.ff-el-form-control,
.wpcf7 textarea { min-height: 8rem; resize: vertical; }
/* error and success. --dv-color-accent doubles as the error tone rather than
introducing a red that no skin declares - a hardcoded red would be the one
value Branding could not reach. */
.ff-el-is-error .ff-el-form-control,
.wpcf7 .wpcf7-not-valid {
border-color: var(--dv-color-error, var(--dv-color-heading));
outline: 1px solid var(--dv-color-error, var(--dv-color-heading));
outline-offset: -2px;
}
.ff-el-input--content .error,
.text-danger,
.wpcf7-not-valid-tip {
display: block;
font-family: var(--dv-font-body);
font-size: .78rem;
letter-spacing: 0;
text-transform: none;
color: var(--dv-color-error, var(--dv-color-heading));
margin-top: .3rem;
}
.ff-message-success,
.wpcf7-response-output {
border: 1px solid var(--dv-color-border);
border-left: 3px solid var(--dv-color-primary);
border-radius: var(--dv-radius);
background: var(--dv-color-bg-alt);
padding: 1rem 1.2rem;
margin-top: 1.2rem;
font-family: var(--dv-font-body);
font-size: .95rem;
color: var(--dv-color-text);
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output { border-left-color: var(--dv-color-error, var(--dv-color-heading)); }
/* --- 17.4 Featherlight lightbox ------------------------------------------- */
/* Was styled in Fell & Fold only. Backdrop is derived from --dv-color-bg, so it
reads correctly on the dark skin as well as the five light ones. */
.featherlight { background: transparent; }
.featherlight:last-of-type { background: color-mix(in srgb, var(--dv-color-bg) 88%, transparent); }
.featherlight .featherlight-content {
background: var(--dv-color-bg);
border: 0;
border-bottom: 0;
border-radius: var(--dv-radius);
padding: 1rem;
max-width: 92vw;
max-height: 92vh;
}
.featherlight .featherlight-inner { display: block; }
.featherlight .featherlight-image { max-height: 82vh; width: auto; }
.featherlight .featherlight-close-icon {
background: transparent;
color: var(--dv-color-heading);
font-family: var(--dv-font-body);
font-size: 1.5rem;
line-height: 1;
width: 2.5rem;
height: 2.5rem;
}
.featherlight .featherlight-close-icon:hover { color: var(--dv-color-link-hover); }
/* Gallery lightbox: drop Featherlight's full-height side hit zones + glyph arrows. */
body.skin-tidewell .featherlight-next,
body.skin-tidewell .featherlight-previous {
top: 50%;
right: auto;
bottom: auto;
left: auto;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
background: color-mix(in srgb, var(--dv-color-bg) 88%, transparent) !important;
border: 1px solid var(--dv-color-border);
border-radius: 999px;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
body.skin-tidewell .featherlight-previous {
left: calc(1.25rem + env(safe-area-inset-left, 0px));
}
body.skin-tidewell .featherlight-next {
right: calc(1.25rem + env(safe-area-inset-right, 0px));
}
body.skin-tidewell .featherlight-next:hover,
body.skin-tidewell .featherlight-previous:hover {
background: var(--dv-color-bg) !important;
box-shadow: var(--dv-shadow);
}
body.skin-tidewell .featherlight-next span,
body.skin-tidewell .featherlight-previous span {
display: none !important;
}
body.skin-tidewell .featherlight-previous::before,
body.skin-tidewell .featherlight-next::before {
content: "";
display: block;
width: .5rem;
height: .5rem;
border: solid var(--dv-color-accent);
border-width: 0 2px 2px 0;
}
body.skin-tidewell .featherlight-previous::before {
transform: rotate(135deg);
margin-left: .15rem;
}
body.skin-tidewell .featherlight-next::before {
transform: rotate(-45deg);
margin-right: .15rem;
}
/* --- 17.5 The four inheriting blocks -------------------------------------- */
/* two_col_text - a real gutter, and the columns stack cleanly on mobile */
.layout__block .row.gx-lg-6 > [class*="col-lg-6"] .wysiwyg { max-width: 60ch; }
@media (max-width: 991px) {
.layout__block .row > [class*="col-lg-6"] + [class*="col-lg-6"] { margin-top: 1.6rem; }
}
/* text_portrait + full_width_image - shared figure treatment */
.layout__block figure { margin: 0; }
.layout__block figure img { display: block; width: 100%; height: auto; border-radius: var(--dv-radius); }
.layout__block figcaption {
font-family: var(--dv-font-body);
font-size: .78rem;
line-height: 1.5;
color: var(--dv-color-muted-ink);
padding-top: .6rem;
border-top: 1px solid var(--dv-color-border);
margin-top: .7rem;
}
.container-fluid.px-0 figcaption { padding-inline: var(--dv-gutter); }
img.ukiyo { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
img.ukiyo { transform: none !important; }
}
/* post_carousel - shares .carousel hooks with the carousel block, so only the
post-specific parts are set here */
.post-carousel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.post-carousel .carousel__images { position: relative; }
.post-carousel .carousel__image img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; display: block; border-radius: var(--dv-radius); }
.post-carousel .carousel__nav { position: absolute; inset: auto .7rem .7rem auto; display: flex; gap: .4rem; margin: 0; }
.carousel__prev,
.carousel__next {
width: 2.4rem;
height: 2.4rem;
border: 1px solid var(--dv-color-border);
border-radius: var(--dv-radius);
background: var(--dv-color-bg);
color: var(--dv-color-heading);
cursor: pointer;
}
.carousel__prev:hover,
.carousel__next:hover { background: var(--dv-color-primary); border-color: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }
.post-carousel .carousel__card h3 { font-size: 1.4rem; margin: 0 0 .6rem; }
.post-carousel .carousel__card .button { margin-top: 1rem; }
@media (max-width: 767px) {
.post-carousel { grid-template-columns: minmax(0, 1fr); }
}
/* --- 17.6 404 -------------------------------------------------------------- */
/* The template hardcodes inline font-size on its h1 and h3, so those cannot be
restyled from here without !important - which would break Branding. Only the
surrounding treatment is set. Flagged in _REMAINING-SURFACES.md. */
.error404 #content,
body.error404 #content { background: var(--dv-color-bg); }
body.error404 .wysiwyg h1 { color: var(--dv-color-heading); font-family: var(--dv-font-heading); }
body.error404 .wysiwyg strong {
display: inline-block;
font-family: var(--dv-font-body);
font-size: .72rem;
font-weight: var(--dv-font-weight-normal);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
border: 1px solid var(--dv-color-border);
border-radius: var(--dv-radius);
padding: .4rem .8rem;
}
body.error404 .wysiwyg p { color: var(--dv-color-muted-ink); }
/* =============================================================================
18. SUBNAV-01 + HEADER DROPDOWN
Section subnav (`partial/subnav.twig`, rendered by `partial/page-title.twig`)
and the header dropdown (`menu.twig` -> `.nav-main__dropdown`). Two different
surfaces, designed together because they answer the same question.
CSS only. Token-only, so Branding still drives both.
THIS SKIN
Placement: Flush band under the page title, matching the rule-above-card idiom.
Active: Accent underline, 2px - the same device the cards use.
Mobile: Horizontal scroll, edge-faded.
Sticky: Parent sticky-header.js + §4 compact bar (.is-sticky hides utility; logo --tw-sticky-logo-max inline with nav).
THREE PARENT-THEME NOTES - read before debugging
1. `_nav-main.scss` sets `background-color: white !important` on
`.nav-main__dropdown`. A skin cannot beat that without its own `!important`,
which would then beat Branding too (conventions §1). Worked around below with
`background-image`, a different property that paints over background-color and
still reads from tokens. Remove the workaround if the parent drops the
`!important`.
2. Same file sets `padding-top: 8px !important` on the mobile dropdown. Not
overridable either, so vertical rhythm below 992px is set with `margin`.
3. `menu.twig` is recursive and reuses `.nav-main__dropdown` at EVERY depth,
while the parent only positions `> li.menu-item-has-children`. A third level
would anchor to the first, so third-level positioning is added here.
============================================================================= */
/* --- 18.1 Subnav ----------------------------------------------------------- */
.subnav {
background: var(--dv-color-bg-alt);
border-bottom: 1px solid var(--dv-color-border);
}
.subnav__list {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
gap: 1.9rem;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__item { flex: none; display: flex; }
.subnav__item > a {
display: flex;
align-items: center;
gap: .5rem;
padding: 1.05em .1em;
border-radius: 0;
font-family: var(--dv-font-body);
font-weight: var(--dv-font-weight-bold);
font-size: .72rem;
letter-spacing: .2em;
text-transform: uppercase;
white-space: nowrap;
color: var(--dv-color-muted-ink);
text-decoration: none;
transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.subnav__item > a:hover { color: var(--dv-color-heading); }
.subnav__item > a:focus-visible {
outline: 2px solid var(--dv-color-accent-ink);
outline-offset: 2px;
}
/* is-current is on the item; aria-current is on the link. Match both, because
either one alone is a legitimate render. */
.subnav__item.is-current > a,
.subnav__item > a[aria-current="page"] {
color: var(--dv-color-heading);
box-shadow: inset 0 -2px 0 var(--dv-color-accent);
}
@media (max-width: 767px) {
.subnav__list {
padding-inline: var(--dv-gutter);
margin-inline: calc(var(--dv-gutter) * -1);
}
}
/* --- 18.2 Header dropdown -------------------------------------------------- */
.nav-main__list > li.menu-item-has-children { position: relative; }
.nav-main__dropdown {
/* background-image, not background-color - see note 1 above */
background-image: linear-gradient(var(--dv-color-bg), var(--dv-color-bg));
border: 1px solid var(--dv-color-border);
border-radius: 0;
box-shadow: var(--dv-shadow-lg);
padding: .5rem 0;
min-width: 14rem;
text-align: left;
z-index: 60;
}
.nav-main__dropdown > li { white-space: nowrap; }
.nav-main__dropdown > li + li { margin-left: 0; }
.nav-main__dropdown > li > a {
display: block;
padding: .6rem 1.15rem;
font-family: var(--dv-font-body);
font-size: .85rem;
letter-spacing: 0;
text-transform: none;
color: var(--dv-color-text);
text-decoration: none;
}
/* --dv-color-accent-ink, NOT --dv-color-link-hover: a dropdown row is ~13.6px text
on --dv-color-bg-alt, and in three skins link-hover is the raw accent, which
fails AA on that ground (Esplanade 2.90, Fell & Fold 3.49, Tidewell 3.59). The
ink token is defined to clear 4.5:1 on BOTH grounds, which is exactly the pair a
row sits on. Conventions §8. */
.nav-main__dropdown > li > a:hover,
.nav-main__dropdown > li > a:focus-visible { background: var(--dv-color-bg-alt); color: var(--dv-color-accent-ink); }
.nav-main__dropdown > li.current-menu-item > a,
.nav-main__dropdown > li.current_page_item > a { color: var(--dv-color-heading); font-weight: var(--dv-font-weight-bold); }
/* Tidewell CD: no header caret on parent items (dropdown on hover still works). */
.nav-main__list > li.menu-item-has-children > a::after,
.nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after {
content: none;
display: none;
}
.nav-main__list > li.current-menu-parent > a,
.nav-main__list > li.current-menu-parent > .nav-main__item-row > a,
.nav-main__list > li.current-menu-ancestor > a,
.nav-main__list > li.current-menu-ancestor > .nav-main__item-row > a { color: var(--dv-color-heading); }
/* third level: menu.twig recurses with the same class - see note 3 */
.nav-main__dropdown li.menu-item-has-children { position: relative; }
.nav-main__dropdown .nav-main__dropdown {
top: -.5rem;
left: 100%;
transform: none;
}
.nav-main__dropdown li.menu-item-has-children > a::after {
content: "";
float: right;
width: .3rem;
height: .3rem;
margin-top: .38rem;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
opacity: .7;
}
@media (max-width: 991.98px) {
/* inline and always open in the drawer. Parent forces padding-top: 8px with
!important, so rhythm is set with margin instead - see note 2. */
.nav-main__dropdown {
background-image: none;
border: 0;
border-left: 1px solid var(--dv-color-border);
border-radius: 0;
box-shadow: none;
margin: .35rem 0 .6rem .25rem;
min-width: 0;
}
.nav-main__dropdown > li > a { padding: .45rem .9rem; font-size: .9rem; }
.nav-main__dropdown .nav-main__dropdown { top: auto; left: auto; }
.nav-main__list > li.menu-item-has-children > a::after { float: right; margin-top: .5rem; }
}
/* --- 18.3 Mobile nav open state ------------------------------------------- */
/* nav-toggle.js adds .is-open to `.menu-container` and .is-active to the
`.hamburger`. These skins render their nav as `.nav-main` with no
`.menu-container` wrapper, so the .is-open class never lands and the drawer
would never open. Driving it from the hamburger instead keeps this CSS-only:
no Twig change, no JS change. The .is-open selector is kept as a fallback for
any skin that does wrap in `.menu-container`. */
@media (max-width: 991.98px) {
.site-header:has(.hamburger.is-active) .nav-main,
.menu-container.is-open .nav-main,
.nav-main.is-open { display: block; }
/* Drawer closed: do not flash dropdown panels during breakpoint cross. */
.menu-container:not(.is-open) .nav-main__dropdown,
body:not(.nav-open) .menu-container .nav-main__dropdown {
display: none !important;
}
}
/* =============================================================================
19. BREADCRUMB-01
`#breadcrumbs`, rendered inside `partial/page-title.twig`. A Theme Options
toggle, so every rule here has to degrade to nothing when it is off - which it
does, because it is all scoped to #breadcrumbs.
THIS SKIN
Placement: Inside the page-title band, above the H1.
Separator: "/" - see the note below, this is a Yoast setting not CSS.
TWO CONSTRAINTS WORTH KNOWING
1. The separator is a TEXT NODE between spans, so no skin can restyle or
replace it from CSS - there is nothing to select. It is set once per
deployment in Yoast > Search Appearance > Breadcrumbs. The character above
is this skin's recommendation; the CSS below is written so any character
works, because spacing comes from flex gap rather than from the glyph.
2. Yoast nests one wrapper span around the whole trail, so the flex container
is `#breadcrumbs > span`, not `#breadcrumbs`. Both are set below, so this
survives a Timber-rendered trail that omits the wrapper.
============================================================================= */
#breadcrumbs,
#breadcrumbs > span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .55rem;
font-family: var(--dv-font-body);
font-size: .72rem;
font-weight: var(--dv-font-weight-normal);
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1.4;
}
#breadcrumbs > span { gap: .55rem; }
#breadcrumbs span { display: inline-flex; align-items: center; gap: .55rem; }
#breadcrumbs a {
color: inherit;
text-decoration: none;
transition: color .18s ease;
}
#breadcrumbs a:hover { color: var(--dv-color-accent-ink); }
/* over photography the ink token is too dark, so the crumb brightens instead */
.page-title:not(.page-title--no-bg) #breadcrumbs a:hover { color: var(--dv-color-primary-contrast); text-decoration: underline; text-underline-offset: 3px; }
#breadcrumbs a:focus-visible {
outline: 2px solid var(--dv-color-accent-ink);
outline-offset: 3px;
opacity: 1;
}
/* Yoast marks the current crumb .breadcrumb_last; a Timber trail may use
aria-current instead. Match both - either alone is a legitimate render. */
#breadcrumbs .breadcrumb_last,
#breadcrumbs [aria-current="page"] {
color: var(--dv-color-primary-contrast);
font-weight: var(--dv-font-weight-bold);
opacity: 1;
}
/* on the image band */
/* Full-strength white over photography: 0.85 measured 4.53 on Thermae's band before
any real-image variance, and a scrim is never as predictable as a flat swatch. */
.page-title #breadcrumbs { color: var(--dv-color-primary-contrast); }
/* and on the plain band, where the ground is light */
/* --dv-color-text, NOT --dv-color-muted: the trail is 11px uppercase, so it needs
4.5:1, and muted was built for 14px+ body support - it failed on four of the seven
light grounds (Thermae 3.25, Fell & Fold 3.59, Meridian 3.77, Esplanade 4.48).
Conventions §8. */
.page-title--no-bg #breadcrumbs { color: var(--dv-color-text); }
.page-title--no-bg #breadcrumbs .breadcrumb_last,
.page-title--no-bg #breadcrumbs [aria-current="page"] { color: var(--dv-color-heading); }
@media (max-width: 767px) {
#breadcrumbs,
#breadcrumbs > span { font-size: .64rem; gap: .4rem; }
}
/* --- 18.2a Dropdown hardening (from the Esplanade smoke build, 18 Aug) ------ */
/*
* Two defects seen on the server that §18.2 could not prevent on its own.
*
* 1. ROWS RENDERED AS TRACKED CAPS. The parent's nav typography reaches the
* dropdown anchors as well as the bar, and lands with enough weight to
* survive the plain `text-transform: none` in §18.2. Forced here.
*
* On the !important: text-transform and letter-spacing are not
* Branding-controlled - no token feeds them - so forcing them cannot break
* re-branding. The font-size IS derived from --dv-font-size-base rather than
* pinned to a literal, so Branding still moves it (conventions §1: important
* on a var() is fine, important on a literal is not).
*
* 2. THE HOVER/CURRENT BAND DID NOT REACH THE PANEL EDGES. The parent pads the
* horizontally, so every row sat inset. Padding is zeroed on the list and
* carried by the anchors instead, which is where a full-bleed row needs it.
*
* `overflow: hidden` is what lets a full-bleed row clip to the panel radius -
* without it the first and last rows square off the rounded corners. That is
* visible on the two skins with a radius, invisible on the five without.
*
* DELETE WHEN: the parent stops applying bar typography and list padding to
* `.nav-main__dropdown`. Then §18.2 alone is enough.
*/
.nav-main__dropdown {
padding-inline: 0 !important;
overflow: hidden;
}
.nav-main__dropdown > li,
.nav-main__dropdown li { padding-inline: 0; margin-inline: 0; }
.nav-main__dropdown li > a {
display: block;
width: 100%;
box-sizing: border-box;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: var(--dv-font-body);
font-size: calc(var(--dv-font-size-base) * .85) !important;
font-weight: var(--dv-font-weight-normal);
line-height: 1.4;
}
.nav-main__dropdown > li.current-menu-item > a,
.nav-main__dropdown > li.current_page_item > a { font-weight: var(--dv-font-weight-bold); }
@media (max-width: 991.98px) {
.nav-main__dropdown { overflow: visible; }
.nav-main__dropdown li > a { font-size: calc(var(--dv-font-size-base) * .9) !important; }
}
/* --- 18.5 Mobile drawer subnav (Tidewell) ------------------------------------
Top-level drawer links are handled in section 15; sub-links inherit desktop
panel chrome unless stripped here (same pattern as Esplanade section 18.5). */
@media (max-width: 991.98px) {
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown,
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown.nav-main__dropdown--nested,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown.nav-main__dropdown--nested {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-left: 1px solid rgba(255, 255, 255, .22) !important;
border-radius: 0 !important;
box-shadow: none !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
left: auto !important;
top: auto !important;
min-width: 0 !important;
width: 100% !important;
padding: 0 0 0 .75rem !important;
margin: 0 0 .35rem .35rem !important;
overflow: visible !important;
text-align: left !important;
}
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown li > a,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown li > a,
body.skin-tidewell.nav-open .nav-main .nav-main__list > li.menu-item-has-children .nav-main__dropdown li > a,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__list > li.menu-item-has-children .nav-main__dropdown li > a {
color: rgba(255, 255, 255, .78) !important;
font-size: 1.125rem !important;
font-weight: 400 !important;
letter-spacing: .03em !important;
text-transform: none !important;
padding: 0 0 0 .5rem !important;
background: transparent !important;
min-height: 2.75rem;
display: flex;
align-items: center;
line-height: 1.25;
}
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown li > a:hover,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown li > a:hover,
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown li > a:focus-visible,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown li > a:focus-visible {
color: var(--dv-color-secondary) !important;
background: transparent !important;
}
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown > li.current-menu-item > a,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown > li.current-menu-item > a,
body.skin-tidewell.nav-open .nav-main .nav-main__dropdown > li.current_page_item > a,
body.skin-tidewell .menu-container.is-open .nav-main .nav-main__dropdown > li.current_page_item > a {
color: #fff !important;
font-weight: 600 !important;
background: transparent !important;
}
}
/* =============================================================================
20. FEATURE GROUNDS (block: feature)
Replaces the old free colour picker, which wrote a literal into an inline
style and so beat both this file and Branding. Four named grounds, each
carrying its own text colour, so the pairing is decided here and cannot be
mis-set by an editor.
ONE CORRECTION TO THE HANDOFF: the accent ground uses
--dv-color-accent-contrast, NOT --dv-color-secondary-contrast.
secondary-contrast is checked against --dv-color-secondary, which is a light
neutral in most of these skins, so on the accent it fails AA in five of the
seven - Ironmonger 1.54, Meridian 2.35, Tidewell 3.92, Esplanade 3.94,
Fell & Fold 4.11. accent-contrast is the token defined for exactly this pairing
and passes in all seven (4.81 to 9.14). Conventions §8.
============================================================================= */
.wysiwyg--feature { padding: 2rem; }
.wysiwyg--feature--ground-page { background: var(--dv-color-bg); color: var(--dv-color-text); }
.wysiwyg--feature--ground-alt { background: var(--dv-color-bg-alt); color: var(--dv-color-text); }
.wysiwyg--feature--ground-page h1, .wysiwyg--feature--ground-page h2,
.wysiwyg--feature--ground-page h3, .wysiwyg--feature--ground-page h4,
.wysiwyg--feature--ground-alt h1, .wysiwyg--feature--ground-alt h2,
.wysiwyg--feature--ground-alt h3, .wysiwyg--feature--ground-alt h4 { color: var(--dv-color-heading); }
.wysiwyg--feature--ground-page a { color: var(--dv-color-link); }
.wysiwyg--feature--ground-alt a { color: var(--dv-color-link); }
.wysiwyg--feature--ground-primary {
background: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
}
.wysiwyg--feature--ground-accent {
background: var(--dv-color-accent);
color: var(--dv-color-accent-contrast);
}
/* On the two filled grounds every child inherits the ground's own contrast colour:
the skin's heading and link tokens are chosen against the PAGE, so letting them
through here is how a heading ends up invisible on a dark fill. */
.wysiwyg--feature--ground-primary h1, .wysiwyg--feature--ground-primary h2,
.wysiwyg--feature--ground-primary h3, .wysiwyg--feature--ground-primary h4,
.wysiwyg--feature--ground-primary strong, .wysiwyg--feature--ground-primary blockquote,
.wysiwyg--feature--ground-accent h1, .wysiwyg--feature--ground-accent h2,
.wysiwyg--feature--ground-accent h3, .wysiwyg--feature--ground-accent h4,
.wysiwyg--feature--ground-accent strong, .wysiwyg--feature--ground-accent blockquote { color: inherit; }
.wysiwyg--feature--ground-primary a:not(.button),
.wysiwyg--feature--ground-accent a:not(.button) {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.wysiwyg--feature--ground-primary blockquote,
.wysiwyg--feature--ground-accent blockquote { border-color: currentColor; }
.wysiwyg--feature--ground-primary .button,
.wysiwyg--feature--ground-accent .button {
background: transparent;
border-color: currentColor;
color: inherit;
text-decoration: none;
}
.wysiwyg--feature--ground-primary .button:hover,
.wysiwyg--feature--ground-accent .button:hover {
background: currentColor;
color: var(--dv-color-primary);
}
.wysiwyg.wysiwyg--feature h2,
.wysiwyg.wysiwyg--feature h3 {
margin-block-start: 0;
}
.wysiwyg.wysiwyg--feature--ground-primary h2,
.wysiwyg.wysiwyg--feature--ground-alt h2,
.wysiwyg.wysiwyg--feature--ground-page h2 {
margin-top: 0;
margin-block-start: 0;
}
/* --- 20.1 Feature block (panel overlap - same margin/padding every ground) --- */
/* Parent `_wysiwyg.scss`: asymmetric padding + margin-top on the panel; image-right
adds `figure.feature-margin` margin-top. Alt vs primary looked different because
only one variant got the extra figure offset - panel spacing is unified here. */
body.skin-tidewell .layout__block .row > [class*="col-lg-6"] {
align-self: flex-start !important;
}
body.skin-tidewell .layout__block .wysiwyg--feature,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-page,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-alt,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-primary,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-accent {
margin-top: 5rem !important;
padding: 2rem !important;
position: relative !important;
}
body.skin-tidewell .layout__block figure.feature-margin {
margin-top: 0 !important;
}
body.skin-tidewell .layout__block .wysiwyg--feature > :first-child {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
body.skin-tidewell .layout__block .wysiwyg--feature h1,
body.skin-tidewell .layout__block .wysiwyg--feature h2,
body.skin-tidewell .layout__block .wysiwyg--feature h3,
body.skin-tidewell .layout__block .wysiwyg--feature h4 {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
body.skin-tidewell .layout__block .wysiwyg--feature h2,
body.skin-tidewell .layout__block .wysiwyg--feature h3 {
margin-bottom: .75rem !important;
margin-block-end: .75rem !important;
}
@media (max-width: 991px) {
body.skin-tidewell .layout__block .wysiwyg--feature,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-page,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-alt,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-primary,
body.skin-tidewell .layout__block .wysiwyg--feature--ground-accent {
margin-top: 0 !important;
}
}
/* =============================================================================
20. SESSION HARDENING (content blocks, hubs, forms, singles)
============================================================================= */
/* --- Promo / offer cards: parent `.card--link:hover` teal text bleed ---------- */
body.skin-tidewell a.card.card--link:hover,
body.skin-tidewell a.card.card--link:focus,
body.skin-tidewell a.card.card--link:focus-visible {
transform: none;
}
body.skin-tidewell a.card.card--link:hover .card__content h3,
body.skin-tidewell a.card.card--link:focus .card__content h3,
body.skin-tidewell a.card.card--link:focus-visible .card__content h3 {
color: var(--dv-color-accent);
}
body.skin-tidewell a.card.card--link:hover .card__content p,
body.skin-tidewell a.card.card--link:focus .card__content p,
body.skin-tidewell a.card.card--link:focus-visible .card__content p,
body.skin-tidewell a.card.card--link:hover .card__content .wysiwyg,
body.skin-tidewell a.card.card--link:focus .card__content .wysiwyg,
body.skin-tidewell a.card.card--link:focus-visible .card__content .wysiwyg {
color: var(--dv-color-text);
}
/* --- Buttons: visited must not beat hover ----------------------------------- */
body.skin-tidewell .button:hover,
body.skin-tidewell .btn:hover,
body.skin-tidewell .button:visited:hover,
body.skin-tidewell .btn:visited:hover,
body.skin-tidewell .ff-btn-submit:hover,
body.skin-tidewell .wpcf7-submit:hover {
background: var(--dv-button-hover-bg);
border-color: var(--dv-button-hover-bg);
color: var(--dv-color-primary-contrast);
}
body.skin-tidewell .button,
body.skin-tidewell .btn {
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* --- Breadcrumbs: parent `--no-bg` $primary link bleed (not Esplanade hero) -- */
body.skin-tidewell .page-title--no-bg #breadcrumbs {
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .page-title--no-bg #breadcrumbs a {
color: var(--dv-color-heading) !important;
}
body.skin-tidewell .page-title--no-bg #breadcrumbs a:hover {
color: var(--dv-color-link-hover) !important;
}
/* --- Post carousel: slick fade + link buttons -------------------------------- */
body.skin-tidewell .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
pointer-events: none;
}
/* --- Journal + promo hub (POST-01): news.css loads after skin.css ------------- */
body.skin-tidewell .page-title + #content .news-index,
body.skin-tidewell .page-title + #content .promo-hub-index {
padding-top: 0;
}
body.skin-tidewell .news-index__filters--promo.news-index__filters--advanced.mb-4 {
margin-bottom: 1rem !important;
}
body.skin-tidewell .news-index__row--category,
body.skin-tidewell .news-index__row--tags {
margin-bottom: 0.5rem;
}
body.skin-tidewell .news-index__row-label,
body.skin-tidewell .news-index__filtered-label {
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .news-index__search.form__control,
body.skin-tidewell .news-index__search,
body.skin-tidewell .news-index__panel-search.form__control,
body.skin-tidewell .news-index__panel-search {
border-radius: var(--dv-radius) !important;
font-family: var(--dv-font-body);
font-size: var(--dv-font-size-base);
font-weight: var(--dv-font-weight-normal);
letter-spacing: normal;
text-transform: none;
border: 1px solid var(--dv-color-border) !important;
background: var(--dv-color-bg) !important;
color: var(--dv-color-text) !important;
box-shadow: none !important;
}
body.skin-tidewell .news-index__search:focus,
body.skin-tidewell .news-index__search:focus-visible,
body.skin-tidewell .news-index__panel-search:focus,
body.skin-tidewell .news-index__panel-search:focus-visible {
outline: none;
border-color: var(--dv-color-primary) !important;
}
body.skin-tidewell .news-index__category-select.form__control,
body.skin-tidewell .news-index__category-select {
border-radius: var(--dv-radius) !important;
border: 1px solid var(--dv-color-border) !important;
background: var(--dv-color-bg) !important;
color: var(--dv-color-text) !important;
}
body.skin-tidewell .news-index__chip,
body.skin-tidewell .news-index__panel-trigger,
body.skin-tidewell .news-index__filters-mobile,
body.skin-tidewell .news-index__sheet-chips .news-index__chip {
border-radius: var(--dv-radius) !important;
font-family: var(--dv-font-body);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.55em 1.15em;
border: 1px solid var(--dv-color-border) !important;
background: transparent !important;
color: var(--dv-color-text) !important;
}
body.skin-tidewell .news-index__chip:hover,
body.skin-tidewell .news-index__panel-trigger:hover {
border-color: var(--dv-color-primary) !important;
color: var(--dv-color-heading) !important;
}
body.skin-tidewell .news-index__chip.is-active {
background: var(--dv-color-primary) !important;
border-color: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .news-index__chip.is-active:not([data-slug=""])::before {
content: none !important;
}
body.skin-tidewell .news-index__chip--tag {
background: var(--dv-color-bg-alt) !important;
}
body.skin-tidewell .news-index__chip--tag.is-active {
background: var(--dv-color-primary) !important;
border-color: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .news-index__panel-trigger--selector.is-open {
background: var(--dv-color-primary) !important;
border-color: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .news-index__trigger-count,
body.skin-tidewell .news-index__filters-mobile-count,
body.skin-tidewell .news-index__active-chip,
body.skin-tidewell .news-index__panel-inner,
body.skin-tidewell .news-index__panel-close,
body.skin-tidewell .news-layout-tuner__pill {
border-radius: var(--dv-radius) !important;
}
body.skin-tidewell .news-index__meta-row {
border-top: 1px solid var(--dv-color-border);
padding-top: 0.75rem;
}
/* --- Fluent Forms (boxed skins; Fell & Fold underline stays in child skin.css) - */
body.skin-tidewell .frm-fluent-form abbr.required,
body.skin-tidewell .frm-fluent-form .required,
body.skin-tidewell .frm-fluent-form .ff-el-is-required .required {
color: var(--dv-color-error, var(--dv-color-heading)) !important;
text-decoration: none !important;
}
body.skin-tidewell .frm-fluent-form .ff-el-form-control,
body.skin-tidewell .frm-fluent-form input.ff-el-form-control,
body.skin-tidewell .frm-fluent-form select.ff-el-form-control,
body.skin-tidewell .frm-fluent-form textarea.ff-el-form-control {
background: var(--dv-color-bg) !important;
border: 1px solid var(--dv-color-border) !important;
border-radius: var(--dv-radius) !important;
box-shadow: none !important;
font-family: var(--dv-font-body) !important;
color: var(--dv-color-text) !important;
}
body.skin-tidewell .frm-fluent-form .ff-el-form-control:focus {
border-color: var(--dv-color-accent) !important;
outline: 0 !important;
box-shadow: none !important;
}
body.skin-tidewell .frm-fluent-form .ff-el-is-error .ff-el-form-control {
border-color: var(--dv-color-error, var(--dv-color-heading)) !important;
outline: 0 !important;
}
body.skin-tidewell .frm-fluent-form .ff-btn.ff-btn-submit,
body.skin-tidewell .frm-fluent-form .ff-btn-submit,
body.skin-tidewell .contact__form .ff-btn.ff-btn-submit,
body.skin-tidewell .contact__form .ff-btn-submit,
body.skin-tidewell .enquiry-form .ff-btn.ff-btn-submit,
body.skin-tidewell .enquiry-form .ff-btn-submit {
background: var(--dv-button-bg) !important;
border: 1px solid var(--dv-button-bg) !important;
border-radius: var(--dv-radius) !important;
color: var(--dv-button-color) !important;
font-family: var(--dv-font-body) !important;
box-shadow: none !important;
transform: none !important;
}
body.skin-tidewell .frm-fluent-form .ff-btn.ff-btn-submit:hover,
body.skin-tidewell .frm-fluent-form .ff-btn-submit:hover,
body.skin-tidewell .frm-fluent-form .ff-btn.ff-btn-submit:visited:hover,
body.skin-tidewell .frm-fluent-form .ff-btn-submit:visited:hover,
body.skin-tidewell .contact__form .ff-btn.ff-btn-submit:hover,
body.skin-tidewell .enquiry-form .ff-btn.ff-btn-submit:hover {
background: var(--dv-button-hover-bg) !important;
border-color: var(--dv-button-hover-bg) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .enquiry-wizard__progress--blocks .enquiry-wizard__step.is-active {
border-color: var(--dv-color-primary) !important;
background: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .enquiry-form .enquiry-wizard__next.button,
body.skin-tidewell .enquiry-form .enquiry-wizard__back.button--clear {
box-shadow: none !important;
transform: none !important;
}
/* --- Promo / news singles: back link + title rhythm --------------------------- */
body.skin-tidewell .news-single__back,
body.skin-tidewell .promo-single__back {
padding-top: 0.85rem;
}
body.skin-tidewell.deep-page-title .news-single__back,
body.skin-tidewell.deep-page-title .promo-single__back {
padding-top: 1.35rem;
}
body.skin-tidewell .news-single__byline {
padding-top: 0.35rem;
padding-bottom: 0.5rem;
}
body.skin-tidewell .news-single__back-link,
body.skin-tidewell .promo-single__back-link {
color: var(--dv-color-heading);
text-decoration: none;
border-bottom: 2px solid var(--dv-color-accent);
padding-bottom: 0.15rem;
}
body.skin-tidewell .news-single__back-link:hover,
body.skin-tidewell .promo-single__back-link:hover {
color: var(--dv-color-accent-ink);
}
/* --- Promo single: facts rail (CD Sep 2026) ----------------------------------- */
body.skin-tidewell .promo-single__intro {
padding-top: 1.35rem !important;
padding-bottom: 2rem;
}
body.skin-tidewell .promo-single__facts-rail {
margin-top: 1.5rem;
}
@media (min-width: 992px) {
body.skin-tidewell .promo-single__facts-rail {
margin-top: 0;
}
}
body.skin-tidewell .promo-single__facts-panel {
background: var(--dv-color-bg-alt);
border: var(--tw-rule);
border-top: 3px solid var(--dv-color-accent);
border-radius: 0;
padding: 1.65rem 1.5rem 1.45rem;
box-shadow: none;
}
body.skin-tidewell .promo-single__facts-items .promo-single__facts-item {
padding: 0 0 1rem;
margin: 0 0 1rem;
}
body.skin-tidewell .promo-single__facts-items .promo-single__facts-item:not(:last-child) {
border-bottom: var(--tw-rule);
}
body.skin-tidewell .promo-single__facts-items .promo-single__facts-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
body.skin-tidewell .promo-single__facts-label {
font-family: var(--dv-font-body);
font-size: var(--tw-micro);
letter-spacing: var(--tw-track);
text-transform: uppercase;
color: var(--dv-color-accent-ink);
margin-bottom: 0.35rem;
}
body.skin-tidewell .promo-single__facts-value {
font-size: 0.92rem;
line-height: 1.55;
color: var(--dv-color-text);
}
body.skin-tidewell .promo-single__facts-items:not(:empty) + .promo-single__facts-price {
margin-top: 1.15rem;
padding-top: 1.15rem;
border-top: 3px solid var(--dv-color-accent);
}
body.skin-tidewell .promo-single__facts-items:empty + .promo-single__facts-price {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
body.skin-tidewell .promo-single__facts-rail .promo-single__price-line {
margin: 0;
text-align: left;
color: var(--dv-color-text);
}
body.skin-tidewell .promo-single__facts-rail .promo-single__price-line__prefix {
display: block;
margin-bottom: 0.15rem;
}
body.skin-tidewell .promo-single__facts-rail .promo-single__price-line__amount {
font-size: 2.1rem;
color: var(--dv-color-accent-ink);
}
body.skin-tidewell .promo-single__facts-cta {
margin-top: 1.25rem;
}
body.skin-tidewell .promo-single__facts-cta .button {
width: 100%;
text-align: center;
justify-content: center;
}
/* =============================================================================
19. CONTACT PAGE (CD: Contact Tidewell)
Twig: templates/pages/page-contact.twig (split + form band, not parent grid).
CD: map left bleed, details right, sand band form - see _working/cd-tidewell-contact.html
============================================================================= */
/* CD in-comp hero: solid navy band, breadcrumbs then title (no photo title band). */
body.skin-tidewell:has(.contact--tidewell) .page-title {
background: var(--dv-color-primary);
}
body.skin-tidewell:has(.contact--tidewell) .page-title__background {
display: none;
}
body.skin-tidewell:has(.contact--tidewell) .page-title__overlay {
padding-block: clamp(1.625rem, 4vw, 1.875rem) clamp(1.75rem, 4vw, 2rem);
}
body.skin-tidewell:has(.contact--tidewell) .page-title__overlay .container > div {
display: flex;
flex-direction: column;
text-align: left;
}
body.skin-tidewell:has(.contact--tidewell) .page-title #breadcrumbs {
order: -1;
margin: 0 0 0.5rem;
width: 100%;
color: #d1d8e0;
}
body.skin-tidewell:has(.contact--tidewell) .page-title #breadcrumbs a {
color: inherit;
}
body.skin-tidewell:has(.contact--tidewell) .page-title #breadcrumbs a:hover {
color: var(--dv-color-primary-contrast);
}
body.skin-tidewell:has(.contact--tidewell) .page-title h1 {
color: var(--dv-color-primary-contrast);
font-size: clamp(2rem, 4vw, 2.5rem);
font-weight: 400;
}
/* Map split sits flush under the navy band - not the layout-builder #content gap (§12). */
body.skin-tidewell:has(.contact--tidewell) .page-title + #content {
padding-top: 0 !important;
}
body.skin-tidewell .contact--tidewell.contact--after-blocks {
--dv-contact-after-blocks-gap: 0;
padding-bottom: 0;
overflow-x: clip;
}
body.skin-tidewell .layout.layout--contact-above + .contact--tidewell {
margin-top: var(--dv-content-block-gap, 2.25rem);
}
/* First block after the title band: no stacked top padding (ACF pt-6 + padding-block). */
body.skin-tidewell .page-title + #content > .layout:first-child > .layout__block:first-child {
padding-top: 0 !important;
}
body.skin-tidewell .contact--tidewell .contact__split {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
width: 100vw;
max-width: 100vw;
margin-inline-start: calc(50% - 50vw);
box-sizing: border-box;
}
body.skin-tidewell .contact--tidewell .contact__side {
padding: clamp(2.5rem, 5vw, 3.5rem) var(--dv-gutter);
box-sizing: border-box;
}
body.skin-tidewell .contact--tidewell .contact__details::before {
content: "";
display: block;
width: 2.5rem;
height: 2px;
background: var(--dv-color-accent);
margin-bottom: 1.25rem;
}
body.skin-tidewell .contact--tidewell .contact__eyebrow {
display: none;
}
body.skin-tidewell .contact--tidewell .contact__heading {
font-family: var(--dv-font-heading);
font-size: clamp(1.75rem, 3.4vw, 2.125rem);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--dv-color-heading);
margin: 0 0 1rem;
line-height: 1.15;
}
body.skin-tidewell .contact--tidewell .contact__intro {
max-width: 40ch;
margin-bottom: 1.25rem;
color: var(--dv-color-text);
line-height: 1.7;
}
body.skin-tidewell .contact--tidewell .contact__address {
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.7;
color: var(--dv-color-text);
}
body.skin-tidewell .contact--tidewell .contact__list {
margin: 0 0 0.5rem;
}
body.skin-tidewell .contact--tidewell .contact__item {
display: block;
margin: 0 0 1rem;
padding: 0;
border: 0;
}
body.skin-tidewell .contact--tidewell .contact__label {
margin: 0 0 0.35rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .contact--tidewell .contact__value {
margin: 0;
font-family: var(--dv-font-heading);
font-size: clamp(1.25rem, 2.4vw, 1.4375rem);
line-height: 1.25;
color: var(--dv-color-heading);
}
body.skin-tidewell .contact--tidewell .contact__link {
color: inherit;
text-decoration: none;
}
body.skin-tidewell .contact--tidewell .contact__link:hover {
color: var(--dv-color-accent-ink);
text-decoration: underline;
text-underline-offset: 0.15em;
}
body.skin-tidewell .contact--tidewell .contact__map {
min-height: 0;
}
body.skin-tidewell .contact--tidewell .contact__map-link {
display: block;
min-height: clamp(18rem, 42vw, 27.5rem);
border-radius: 0;
background: var(--dv-color-bg-alt);
overflow: hidden;
height: 100%;
}
body.skin-tidewell .contact--tidewell .contact__map-image {
width: 100%;
height: 100%;
min-height: inherit;
aspect-ratio: auto;
object-fit: cover;
}
body.skin-tidewell .contact--tidewell .contact__directions {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
body.skin-tidewell .contact--tidewell .contact__directions-copy {
margin: 0;
max-width: 40ch;
font-size: 0.90625rem;
line-height: 1.65;
color: var(--dv-color-text);
}
body.skin-tidewell .contact--tidewell .contact__directions-link.button--primary {
background: var(--dv-color-primary);
border: 1px solid var(--dv-color-primary);
border-radius: 0;
color: var(--dv-color-primary-contrast);
font-family: var(--dv-font-body);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0 1.625rem;
min-height: 3rem;
box-shadow: none;
text-decoration: none;
}
body.skin-tidewell .contact--tidewell .contact__directions-link.button--primary:hover {
background: var(--dv-color-heading);
border-color: var(--dv-color-heading);
color: var(--dv-color-primary-contrast);
text-decoration: none;
}
body.skin-tidewell .contact--tidewell .contact__form-band {
background: var(--dv-color-bg-alt);
padding: clamp(3rem, 6vw, 4rem) var(--dv-gutter) clamp(3.5rem, 7vw, 4.5rem);
width: 100vw;
max-width: 100vw;
margin-inline-start: calc(50% - 50vw);
box-sizing: border-box;
}
body.skin-tidewell .contact--tidewell .contact__form-band-inner {
max-width: 40rem;
margin-inline: auto;
}
body.skin-tidewell .contact--tidewell .contact__form {
margin: 0;
padding: 0;
border: 0;
}
body.skin-tidewell .contact--tidewell .contact__form-intro.wysiwyg {
text-align: center;
margin-bottom: 1.75rem;
}
body.skin-tidewell .contact--tidewell .contact__form-intro.wysiwyg h2,
body.skin-tidewell .contact--tidewell .contact__form-intro .contact__form-title {
font-family: var(--dv-font-heading);
font-size: clamp(1.65rem, 3vw, 1.875rem);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
line-height: 1.15;
color: var(--dv-color-heading);
margin: 0 0 0.5rem;
}
body.skin-tidewell .contact--tidewell .contact__form-intro.wysiwyg p {
max-width: 36ch;
margin: 0 auto;
color: var(--dv-color-text);
line-height: 1.65;
}
body.skin-tidewell .contact--tidewell .contact__form .ff-el-input--label label {
font-size: 0.65625rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dv-color-muted-ink);
}
body.skin-tidewell .contact--tidewell .contact__form .ff-t-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem 0.875rem;
}
body.skin-tidewell .contact--tidewell .contact__form .ff-t-cell.ff-t-column-1.ff-t-full-width,
body.skin-tidewell .contact--tidewell .contact__form .ff-t-cell.ff-t-column-2.ff-t-full-width {
grid-column: 1 / -1;
}
body.skin-tidewell .contact--tidewell .contact__form .ff_submit_btn_wrapper.ff-el-group,
body.skin-tidewell .contact--tidewell .contact__form .ff-el-group.ff_submit_btn_wrapper {
margin: 1.35rem 0 0 !important;
display: flex;
justify-content: center;
width: 100%;
grid-column: 1 / -1;
}
body.skin-tidewell .contact--tidewell .contact__form .ff-btn.ff-btn-submit,
body.skin-tidewell .contact--tidewell .contact__form .ff-btn-submit {
background: var(--dv-color-accent) !important;
border-color: var(--dv-color-accent) !important;
color: var(--dv-color-accent-contrast) !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
padding: 0 1.875rem !important;
min-height: 3rem !important;
}
body.skin-tidewell .contact--tidewell .contact__form .ff-btn.ff-btn-submit:hover,
body.skin-tidewell .contact--tidewell .contact__form .ff-btn-submit:hover {
background: var(--dv-color-accent-ink) !important;
border-color: var(--dv-color-accent-ink) !important;
color: var(--dv-color-accent-contrast) !important;
}
@media (max-width: 767.98px) {
body.skin-tidewell .contact--tidewell .contact__split {
grid-template-areas:
"side"
"map";
}
body.skin-tidewell .contact--tidewell .contact__side {
grid-area: side;
order: 1;
}
body.skin-tidewell .contact--tidewell .contact__map {
grid-area: map;
order: 2;
}
body.skin-tidewell .contact--tidewell .contact__map-link,
body.skin-tidewell .contact--tidewell .contact__map-image {
min-height: 0;
aspect-ratio: 16 / 10;
}
body.skin-tidewell .contact--tidewell .contact__value,
body.skin-tidewell .contact--tidewell .contact__link {
min-height: 2.75rem;
display: inline-flex;
align-items: center;
}
body.skin-tidewell .contact--tidewell .contact__directions-link.button--primary {
width: 100%;
justify-content: center;
}
body.skin-tidewell .contact--tidewell .contact__form .ff-t-container {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) {
body.skin-tidewell .contact--tidewell .contact__split {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "map side";
min-height: 27.5rem;
}
body.skin-tidewell .contact--tidewell .contact__map {
grid-area: map;
margin-inline-start: 0;
width: auto;
max-width: none;
min-height: 27.5rem;
}
body.skin-tidewell .contact--tidewell .contact__map-link {
min-height: 27.5rem;
}
body.skin-tidewell .contact--tidewell .contact__side {
grid-area: side;
padding-inline: clamp(1.25rem, 5vw, 4rem);
padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
}
/* --- 10.1 Promo box hardening (parent `_promo.scss` pill overlay + hover bleed) --- */
body.skin-tidewell a.promo,
body.skin-tidewell .promo {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
border-radius: var(--dv-radius) !important;
background: var(--dv-color-primary) !important;
text-decoration: none !important;
}
body.skin-tidewell .promo::before,
body.skin-tidewell .promo::after {
display: none !important;
content: none !important;
opacity: 0 !important;
}
body.skin-tidewell .promo img {
width: 100% !important;
aspect-ratio: 4 / 5 !important;
object-fit: cover !important;
display: block !important;
border-radius: var(--dv-radius) var(--dv-radius) 0 0 !important;
transform: none !important;
}
body.skin-tidewell .promo:hover img,
body.skin-tidewell .promo:focus img,
body.skin-tidewell .promo:focus-visible img { transform: scale(1.04) !important; }
body.skin-tidewell .promo .promo__overlay {
position: static !important;
inset: auto !important;
transform: none !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
margin: 0 !important;
padding: 1rem 1.25rem !important;
background: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
font-family: var(--dv-font-heading) !important;
font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: center !important;
border-radius: 0 0 var(--dv-radius) var(--dv-radius) !important;
white-space: normal !important;
box-sizing: border-box !important;
}
body.skin-tidewell .promo:hover .promo__overlay,
body.skin-tidewell .promo:focus .promo__overlay,
body.skin-tidewell .promo:focus-visible .promo__overlay {
background: var(--dv-color-heading) !important;
}
/* --- 17.5a Post carousel hardening (parent `.carousel` flex + teal card bleed) --- */
body.skin-tidewell .carousel.post-carousel {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
gap: 2rem !important;
align-items: center !important;
}
body.skin-tidewell .post-carousel .carousel__images {
position: relative !important;
width: auto !important;
font-size: inherit !important;
}
body.skin-tidewell .post-carousel .carousel__content {
display: block !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.skin-tidewell .post-carousel .carousel__content h1,
body.skin-tidewell .post-carousel .carousel__content h2,
body.skin-tidewell .post-carousel .carousel__content h3,
body.skin-tidewell .post-carousel .carousel__content h4,
body.skin-tidewell .post-carousel .carousel__content h5 {
color: var(--dv-color-heading) !important;
}
body.skin-tidewell .post-carousel .carousel__card {
background: var(--dv-color-bg) !important;
border: 1px solid var(--dv-color-border) !important;
border-radius: var(--dv-radius) !important;
color: var(--dv-color-text) !important;
padding: 1.75rem !important;
box-shadow: none !important;
}
body.skin-tidewell .post-carousel .carousel__card h3 {
color: var(--dv-color-heading) !important;
}
body.skin-tidewell .post-carousel .carousel__card p,
body.skin-tidewell .post-carousel .carousel__card .wysiwyg {
color: var(--dv-color-text) !important;
}
body.skin-tidewell .post-carousel .carousel__nav {
position: absolute !important;
inset: auto 1.25rem 1.25rem auto !important;
bottom: 1.25rem !important;
right: 1.25rem !important;
margin: 0 !important;
display: flex !important;
gap: .4rem !important;
z-index: 3 !important;
}
body.skin-tidewell .post-carousel .carousel__prev,
body.skin-tidewell .post-carousel .carousel__next {
width: 2.4rem !important;
height: 2.4rem !important;
padding: 0 !important;
border: 1px solid var(--dv-color-border) !important;
border-radius: 999px !important;
background: var(--dv-color-bg) !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
}
body.skin-tidewell .post-carousel .carousel__next { transform: none !important; }
body.skin-tidewell .post-carousel > * { min-width: 0 !important; }
body.skin-tidewell .post-carousel .carousel__images,
body.skin-tidewell .post-carousel .carousel__content {
overflow: hidden !important;
min-width: 0 !important;
}
body.skin-tidewell .post-carousel .carousel__images .slick-list,
body.skin-tidewell .post-carousel .carousel__cards .slick-list {
overflow: hidden !important;
width: 100% !important;
}
body.skin-tidewell .post-carousel .carousel__images .slick-track,
body.skin-tidewell .post-carousel .carousel__cards .slick-track {
display: flex !important;
align-items: stretch !important;
}
body.skin-tidewell .post-carousel .carousel__images .slick-slide,
body.skin-tidewell .post-carousel .carousel__cards .slick-slide {
float: none !important;
height: auto !important;
}
body.skin-tidewell .post-carousel .carousel__images .slick-slide > div,
body.skin-tidewell .post-carousel .carousel__cards .slick-slide > div {
width: 100% !important;
}
body.skin-tidewell .post-carousel .carousel__cards .carousel__card {
opacity: 1 !important;
height: 100%;
}
body.skin-tidewell .post-carousel .carousel__image img {
width: 100% !important;
aspect-ratio: 6 / 5 !important;
object-fit: cover !important;
display: block !important;
}
body.skin-tidewell .post-carousel .carousel__image-placeholder {
aspect-ratio: 6 / 5;
width: 100%;
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .post-carousel .carousel__cards .slick-list {
min-height: 0 !important;
}
body.skin-tidewell .post-carousel .carousel__cards .slick-slide.slick-active {
z-index: 2;
}
body.skin-tidewell .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
pointer-events: none;
}
@media (max-width: 767px) {
body.skin-tidewell .carousel.post-carousel {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* --- 17.6 Block carousel (`.carousel` without `.post-carousel`) -------------- */
/* CD: slide left, primary ground card right, gutter between; STY-02 nav on slide. */
body.skin-tidewell .carousel:not(.post-carousel) {
display: grid !important;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
align-items: center !important;
gap: clamp(1.25rem, 3vw, 2rem) !important;
}
body.skin-tidewell .carousel:not(.post-carousel) > * {
min-width: 0 !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images {
grid-column: 1;
width: 100% !important;
max-width: none !important;
position: relative !important;
font-size: inherit !important;
overflow: hidden !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content {
grid-column: 2;
width: 100% !important;
max-width: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card {
background: var(--dv-color-primary) !important;
border: var(--tw-rule) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--dv-color-primary-contrast) !important;
padding: 2rem !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content h1,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content h2,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content h3,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content h4,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content h5,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card h3 {
color: var(--dv-color-primary-contrast) !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card h3 {
font-family: var(--dv-font-heading);
margin-bottom: .75rem !important;
margin-block-end: .75rem !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card p,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card .wysiwyg,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card .wysiwyg p {
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card p:last-child {
margin-bottom: 0;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card .button,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card .button--white {
background: var(--dv-color-bg) !important;
border-color: var(--dv-color-bg) !important;
color: var(--dv-color-primary) !important;
margin-top: 1.25rem;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__card .button:hover {
background: var(--dv-color-accent) !important;
border-color: var(--dv-color-accent) !important;
color: var(--dv-color-accent-contrast) !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__nav {
position: absolute !important;
inset: auto 1.25rem 1.25rem auto !important;
margin: 0 !important;
display: flex !important;
gap: .4rem !important;
z-index: 3 !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__prev,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__next {
position: static !important;
transform: none !important;
width: 2.4rem !important;
height: 2.4rem !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: color-mix(in srgb, var(--dv-color-bg) 52%, transparent) !important;
background-image: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
color: var(--dv-color-accent) !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__prev:hover,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__next:hover {
background: var(--dv-color-bg) !important;
color: var(--dv-color-link-hover) !important;
box-shadow: var(--dv-shadow);
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__next {
transform: none !important;
}
/* Same slick + intrinsic img height as post carousel (§17.5a) - do NOT use height:100% on img. */
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images .slick-list {
overflow: hidden !important;
width: 100% !important;
height: auto !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images .slick-track {
display: flex !important;
align-items: stretch !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images .slick-slide {
float: none !important;
height: auto !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images .slick-slide > div {
width: 100% !important;
height: auto !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__image img {
width: 100% !important;
height: auto !important;
aspect-ratio: 6 / 5 !important;
object-fit: cover !important;
display: block !important;
border: var(--tw-rule);
border-radius: 0 !important;
}
@media (max-width: 991px) {
body.skin-tidewell .carousel:not(.post-carousel) {
display: block !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__images,
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content {
grid-column: auto !important;
width: 100% !important;
max-width: none !important;
}
body.skin-tidewell .carousel:not(.post-carousel) .carousel__content {
margin-top: 1.25rem !important;
padding: 0 !important;
}
}
/* --- 18.6 Desktop dropdown - CD Complete Reference v6 ---------------------- */
/*
* Last word on the bar dropdown at 992px and up; earlier dropdown rules stay for
* the drawer and as fallbacks. v6 specimen: 208px panel, 7px block padding,
* 10px 18px rows at 13.5px, rows in text ink, current in heading ink + bold,
* hover band white in accent-ink. The comp gives bar parents a down caret, so
* the all-widths hide in the header section is reversed here (the drawer keeps
* its toggle instead). overflow is visible so a third-level flyout is not clipped.
*/
@media (min-width: 992px) {
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__list > li.menu-item-has-children > a::after,
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after {
content: "" !important;
display: inline-block !important;
width: 5px;
height: 5px;
margin-left: .45rem;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .75;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown {
min-width: 13rem;
padding: 7px 0 !important;
background: var(--dv-color-bg) !important;
border: 1px solid var(--dv-color-border) !important;
border-radius: var(--dv-radius);
box-shadow: 0 18px 42px -20px rgba(0, 0, 0, .28);
overflow: visible;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown .nav-main__dropdown {
top: -8px;
left: 100%;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px !important;
font-family: var(--dv-font-body) !important;
font-size: calc(var(--dv-font-size-base) * .84375) !important;
font-weight: var(--dv-font-weight-normal) !important;
line-height: 1.4;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none;
color: var(--dv-color-text) !important;
background: transparent !important;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li.current-menu-item > a,
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li.current_page_item > a {
color: var(--dv-color-heading) !important;
font-weight: var(--dv-font-weight-bold) !important;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li > a:hover,
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li > a:focus-visible {
background: #FFFFFF !important;
color: var(--dv-color-accent-ink) !important;
}
body.skin-tidewell .site-header #nav-main.nav-main .nav-main__dropdown li.menu-item-has-children > a::after {
content: "";
flex: 0 0 auto;
float: none;
width: 5px;
height: 5px;
margin: 0;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(-45deg);
opacity: .7;
}
}
/* =============================================================================
21. Block signatures (CD Oct 2026 - "Block Signatures Seven Skins")
Feature: flush split + top bar · Promo: overlap caption card · Gallery: 4:3 matted prints
Carousel + Post carousel: bleed split, sand card (C-1) · Tabs: underline serif, sand split
Tables: navy header band
============================================================================= */
body.skin-tidewell {
--tw-bleed-pad: max(var(--dv-gutter, 1.5rem), calc((100vw - var(--dv-container-max, 1320px)) / 2 + var(--dv-gutter, 1.5rem)));
--tw-print-shadow: 0 12px 28px -16px color-mix(in srgb, var(--dv-color-primary) 45%, transparent);
}
/* --- 21.1 Feature: flush 50/50, square image, 4px accent bar on the panel -- */
body.skin-tidewell .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) {
--bs-gutter-x: 0;
align-items: stretch;
}
body.skin-tidewell .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) > [class*="col-lg-6"] {
align-self: stretch !important;
}
body.skin-tidewell .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) figure {
margin: 0 !important;
height: 100%;
background: none !important;
}
body.skin-tidewell .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) figure:not(.feature-figure--landscape) img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 0;
}
body.skin-tidewell .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature {
height: 100%;
margin: 0 !important;
padding: 3.5rem !important;
border: 0 !important;
border-top: 4px solid var(--dv-color-accent) !important;
border-radius: 0 !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
justify-content: center;
}
body.skin-tidewell .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature--ground-accent {
border-top-color: var(--dv-color-primary) !important;
}
@media (max-width: 991px) {
body.skin-tidewell .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature {
height: auto;
padding: 2rem !important;
}
}
body.skin-tidewell .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature::after {
content: none !important;
display: none !important;
}
/* --- 21.2 Promo: 4:3 image, caption card overlaps the bottom by 48px ------ */
body.skin-tidewell .layout__block .row.gx-lg-6:has(a.promo) {
justify-content: center;
}
body.skin-tidewell .layout__block a.promo {
background: transparent !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.skin-tidewell .layout__block a.promo img {
aspect-ratio: 4 / 3 !important;
border-radius: 0 !important;
}
body.skin-tidewell .layout__block a.promo:hover img,
body.skin-tidewell .layout__block a.promo:focus-visible img {
transform: none !important;
}
body.skin-tidewell .layout__block a.promo .promo__overlay {
position: relative !important;
z-index: 2 !important;
width: auto !important;
margin: -48px 20px 0 !important;
padding: 1.25rem 1.4rem 1.1rem !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: .45rem !important;
background: var(--dv-color-bg) !important;
color: var(--dv-color-heading) !important;
font-family: var(--dv-font-heading) !important;
font-size: 1.45rem !important;
font-weight: 400 !important;
text-align: left !important;
border-top: 4px solid var(--dv-color-accent) !important;
border-radius: 0 !important;
box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--dv-color-primary) 40%, transparent);
transition: transform .25s ease, box-shadow .25s ease !important;
}
body.skin-tidewell .layout__block a.promo .promo__cta {
display: inline-block;
font-family: var(--dv-font-body);
font-size: var(--tw-micro);
font-weight: 600;
letter-spacing: var(--tw-track);
text-transform: uppercase;
color: var(--dv-color-accent-ink);
}
body.skin-tidewell .layout__block a.promo:hover .promo__overlay,
body.skin-tidewell .layout__block a.promo:focus-visible .promo__overlay {
background: var(--dv-color-bg) !important;
color: var(--dv-color-heading) !important;
transform: translateY(-4px) !important;
box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--dv-color-primary) 55%, transparent);
}
@media (max-width: 767px) {
body.skin-tidewell .layout__block a.promo img {
aspect-ratio: 16 / 9 !important;
}
body.skin-tidewell .layout__block a.promo .promo__overlay {
margin-top: -30px !important;
}
}
/* --- 21.3 Gallery: 4:3 prints on a 10px mat, 24px gap; mat lifts on hover - */
body.skin-tidewell .gallery-grid {
--bs-gutter-x: 24px;
--bs-gutter-y: 24px;
}
body.skin-tidewell .gallery-grid > [class*="col-"] {
margin-bottom: 0 !important;
}
body.skin-tidewell a.gallery {
padding: 10px;
background: var(--dv-color-bg);
border: 0;
box-shadow: var(--tw-print-shadow);
box-sizing: border-box;
transition: transform .25s ease, box-shadow .25s ease;
}
body.skin-tidewell a.gallery img {
aspect-ratio: 4 / 3;
}
body.skin-tidewell a.gallery:hover,
body.skin-tidewell a.gallery:focus-visible {
transform: translateY(-4px);
box-shadow: 0 18px 34px -16px color-mix(in srgb, var(--dv-color-primary) 50%, transparent);
}
@media (max-width: 767px) {
body.skin-tidewell .gallery-grid {
--bs-gutter-x: 12px;
--bs-gutter-y: 12px;
}
body.skin-tidewell a.gallery {
padding: 6px;
}
}
/* --- 21.4 Carousel + Post carousel: full-bleed split, sand card, carets in card */
body.skin-tidewell .layout__block .carousel:not(.post-carousel),
body.skin-tidewell .layout__block .carousel.post-carousel {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
grid-template-rows: 1fr auto;
align-items: stretch !important;
gap: 0 !important;
}
body.skin-tidewell .layout__block .carousel .carousel__images {
display: contents !important;
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider {
grid-column: 1;
grid-row: 1 / span 2;
min-width: 0;
}
body.skin-tidewell .layout__block .carousel .carousel__image img {
display: block;
width: 100% !important;
aspect-ratio: 4 / 3 !important;
max-height: clamp(280px, 60vh, 640px) !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* Desktop: the slider is pinned to the row so the image never sets the height - the row is
the capped 4:3 height or the sand panel, whichever is taller, and the image fills it. */
@media (min-width: 992px) {
body.skin-tidewell .layout__block .carousel .carousel__images-slider {
position: relative;
min-height: min(clamp(280px, 60vh, 640px), 37.5vw);
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-list {
position: absolute !important;
inset: 0;
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-list,
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-track,
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-slide,
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-slide > div,
body.skin-tidewell .layout__block .carousel .carousel__images-slider .carousel__image,
body.skin-tidewell .layout__block .carousel .carousel__images-slider .carousel__image img {
height: 100% !important;
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider .slick-track {
display: flex !important;
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider .carousel__image img {
max-height: none !important;
aspect-ratio: auto !important;
}
}
body.skin-tidewell .layout__block .carousel .carousel__content {
grid-column: 2 !important;
grid-row: 1;
display: flex !important;
align-items: flex-end !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) 1.25rem !important;
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .layout__block--carousel-bleed .carousel .carousel__content {
padding-inline-end: var(--tw-bleed-pad) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__card {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 34rem;
color: var(--dv-color-text) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__card h3,
body.skin-tidewell .layout__block .carousel .carousel__content h3 {
color: var(--dv-color-heading) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__card p,
body.skin-tidewell .layout__block .carousel .carousel__card .wysiwyg,
body.skin-tidewell .layout__block .carousel .carousel__card .wysiwyg p {
color: var(--dv-color-text) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__card .button,
body.skin-tidewell .layout__block .carousel .carousel__card .button--white {
background: var(--dv-color-primary) !important;
border-color: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__nav {
grid-column: 2;
grid-row: 2;
position: static !important;
inset: auto !important;
margin: 0 !important;
padding: 0 clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) !important;
display: flex !important;
gap: .5rem !important;
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .layout__block--carousel-bleed .carousel .carousel__nav {
padding-inline-end: var(--tw-bleed-pad) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__prev,
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__next {
background: transparent !important;
border: 1px solid var(--dv-color-primary) !important;
color: var(--dv-color-primary) !important;
}
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__prev:hover,
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__next:hover,
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__prev:focus-visible,
body.skin-tidewell .layout__block .carousel .carousel__nav .carousel__next:focus-visible {
background: var(--dv-color-primary) !important;
color: var(--dv-color-primary-contrast) !important;
}
body.skin-tidewell .layout__block .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
visibility: hidden;
}
@media (max-width: 991px) {
body.skin-tidewell .layout__block .carousel:not(.post-carousel),
body.skin-tidewell .layout__block .carousel.post-carousel {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto;
}
body.skin-tidewell .layout__block .carousel .carousel__images-slider {
grid-column: 1;
grid-row: 1;
}
body.skin-tidewell .layout__block .carousel .carousel__content {
grid-column: 1 !important;
grid-row: 2;
padding: 1.75rem var(--tw-bleed-pad) 1rem !important;
}
body.skin-tidewell .layout__block .carousel .carousel__nav {
grid-column: 1;
grid-row: 3;
padding: 0 var(--tw-bleed-pad) 1.75rem !important;
}
}
/* --- 21.5 Tabs: Marcellus underline labels, 3px accent; flush sand slide --- */
body.skin-tidewell .feature-nav--underline button.feature-nav__button {
font-family: var(--dv-font-heading);
font-size: 1.375rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
border-bottom-width: 3px !important;
}
body.skin-tidewell .feature-nav--underline button.feature-nav__button:not(.active):hover {
color: var(--dv-color-heading);
}
body.skin-tidewell .feature-nav--underline button.feature-nav__button.active {
border-bottom-color: var(--dv-color-accent) !important;
}
body.skin-tidewell .tabs-block--underline .features .slide {
gap: 0;
align-items: stretch;
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .tabs-block--underline .features .slide .slide__image > img {
height: 100%;
border-radius: 0;
}
body.skin-tidewell .tabs-block--underline .features .slide .slide__content {
padding: clamp(1.75rem, 4vw, 3.5rem);
align-self: center;
}
@media (max-width: 991px) {
body.skin-tidewell .feature-nav--underline button.feature-nav__button {
font-size: 1.125rem;
}
body.skin-tidewell .tabs-block--underline .features .slide .slide__image {
margin-bottom: 0;
}
}
/* --- 21.6 Tables: sand panel, navy header band, 24px rows ----------------- */
body.skin-tidewell .table-item .info-table {
background: var(--dv-color-bg-alt);
}
body.skin-tidewell .table-item .info-table thead tr th {
background: var(--dv-color-primary);
color: var(--dv-color-primary-contrast);
border-bottom: 0;
padding: .9rem 1.5rem;
}
body.skin-tidewell .table-item .info-table tbody tr td {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--dv-color-border);
}
body.skin-tidewell .table-item__media {
border-radius: 0;
}
/* =============================================================================
22. Library icons (Phosphor) - see _md/ICONS.md
Info panel strip: terracotta glyph, no frame; band: light terracotta (per CD).
============================================================================= */
body.skin-tidewell .room-feature .room-feature__icon--glyph {
width: 2.4rem;
height: 2.4rem;
}
body.skin-tidewell .info-panel.info-panel--strip .info-panel__icon--glyph {
background: transparent;
border: 0;
border-radius: 0;
color: var(--dv-color-accent);
}
body.skin-tidewell .info-panel.info-panel--strip.info-panel--full-bleed .info-panel__icon--glyph {
color: color-mix(in srgb, var(--dv-color-accent) 50%, #fff);
}