/*
Theme Name: Valencia Restaurant
Theme URI: https://valenciahotelcollection.com
Author: SDCO Partners
Author URI: https://stitchdesignco.com
Description: Custom restaurant theme for Valencia Collection dining properties. Shared component architecture with per-site branding (logo, colors, typography) applied per concept.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valencia-restaurant
Update URI: false
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, block-patterns, wide-blocks, block-styles
*/
/* ---------------------------------------------------------------------
Reset
Everything measures border-box: a width or height is the whole box, and
padding and border fit inside it rather than adding on top.
This theme is standalone — not a child of `valencia` — so it needs its own
copy; the parent's reset never reached it. Added 2026-09-28 alongside the
parent's, reversing the deferral recorded as H4 in
docs/hotel-judgement-calls.md. Note this theme had no reset at all before,
not even on form controls, so its newsletter and enquiry inputs were the
`width: 100%` + padding case that overhangs its own container.
`.vr-reviews__panel` below deliberately keeps content-box and must keep it:
its min-height is a content height that the 80px padding is meant to add
to. It is declared with a two-class selector so the core group stylesheet,
which loads after this file, cannot take it back.
--------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ---------------------------------------------------------------------
Base
--------------------------------------------------------------------- */
:root {
/* Stand-in for --vhc-rest-mark on a site with no brand registered, so a
masked mark never falls back to a solid 14px square. */
--vhc-rest-ig-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='17.8' cy='6.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
/* Lenis owns scrolling when active — native smooth would fight its
per-frame scrollTo. Anchor nav goes through valenciaLenis instead
(restaurant.js). */
html.lenis {
scroll-behavior: auto;
}
body {
margin: 0;
background: var(--wp--preset--color--ground);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--body);
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0.02em;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Script display heads — Pencerio (or stand-in) is a hairline face, so
sizes run big and weights stay untouched. */
.vr-script-head {
margin: 0;
font-family: var(--wp--preset--font-family--script);
font-weight: var(--vhc-rest-display-weight, 400); /* Vbar's heads are Director Light */
/* --vhc-rest-head-size: a brand whose display face is not a script
(The Vandy's Lennon caps at 56) sizes the section heads down; unset
= the script clamp. */
font-size: var(--vhc-rest-head-size, clamp(3.25rem, 8.3vw, 7.5rem));
line-height: 1.1;
color: var(--wp--preset--color--accent);
text-align: center;
text-transform: var(--vhc-rest-head-transform, none);
letter-spacing: var(--vhc-rest-head-tracking, var(--vhc-rest-display-tracking, normal));
}
/* ---------------------------------------------------------------------
Shared atoms — pill buttons, kickers, underline links, circle arrows
--------------------------------------------------------------------- */
.vr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 40px;
border-radius: 50px;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
transition: opacity 0.2s ease;
}
.vr-btn:hover {
opacity: 0.85;
}
/* Core button blocks in the same dress (block styles registered in
functions.php); the theme.json button fill/padding is reset here. */
.wp-block-button.is-style-vr-accent > .wp-block-button__link,
.wp-block-button.is-style-vr-accent-2 > .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 40px;
border: 0;
border-radius: 50px;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
transition: opacity 0.2s ease;
}
.wp-block-button.is-style-vr-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-vr-accent-2 > .wp-block-button__link:hover {
opacity: 0.85;
}
.wp-block-button.is-style-vr-accent > .wp-block-button__link {
/* --vhc-rest-button-bg: the button colour when accent is white (1791's
steel blue "Be our guest"); unset = accent. */
background: var(--vhc-rest-button-bg, var(--wp--preset--color--accent));
color: var(--wp--preset--color--on-accent);
}
.wp-block-button.is-style-vr-accent-2 > .wp-block-button__link {
background: var(--wp--preset--color--accent-2);
color: var(--wp--preset--color--ink);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.wp-block-button.is-style-vr-link > .wp-block-button__link {
display: inline-block;
padding: 0 0 14px;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
background: transparent;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 1.3;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-vr-link.vr-link--white > .wp-block-button__link {
color: var(--wp--preset--color--white);
}
.vr-btn--accent {
background: var(--vhc-rest-button-bg, var(--wp--preset--color--accent));
color: var(--wp--preset--color--on-accent);
}
.vr-btn--accent-2 {
background: var(--wp--preset--color--accent-2);
color: var(--wp--preset--color--ink);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.vr-kicker {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.vr-kicker__mark {
width: 14px;
height: auto;
}
.vr-kicker--mark::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background: var(--vhc-rest-mark) no-repeat center / contain;
}
.vr-kicker--white {
color: var(--wp--preset--color--white);
}
.vr-kicker--accent {
color: var(--wp--preset--color--accent);
}
.vr-link {
display: inline-block;
padding-bottom: 14px;
border-bottom: 1px solid currentColor;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--ink);
}
.vr-link--white {
color: var(--wp--preset--color--white);
}
.vr-arrows {
display: flex;
gap: 8px;
}
.vr-arrows__btn {
position: relative;
width: 40px;
height: 40px;
border: 1px solid var(--wp--preset--color--accent);
border-radius: 50%;
background: transparent;
color: var(--wp--preset--color--accent);
cursor: pointer;
transition: opacity 0.2s ease;
}
/* An arrow with nowhere to go reads as broken rather than finished — on a
2560-wide screen the menu carousel's six slides fill the track exactly, so
both arrows did nothing at all (1791 #8). restaurant.js now disables them
when the track cannot scroll, and at each end of it. */
.vr-arrows__btn[disabled] {
cursor: default;
opacity: 0.35;
}
.vr-arrows__btn::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-top: 1.5px solid currentColor;
border-right: 1.5px solid currentColor;
transform: translate(-70%, -50%) rotate(45deg);
}
.vr-arrows__btn--prev {
transform: rotate(180deg);
}
.vr-arrows__btn:hover {
opacity: 0.6;
}
.vr-arrows--panel .vr-arrows__btn {
border-color: var(--wp--preset--color--reviews-ink);
color: var(--wp--preset--color--reviews-ink);
}
/* ---------------------------------------------------------------------
Header — transparent overlay on the hero
--------------------------------------------------------------------- */
.vr-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 30px 60px;
}
.vr-header__logo img {
display: block;
/* --vhc-rest-logo-height: a short, wide wordmark (Vbar's 140×73) reads
too small at the 44px default. */
height: var(--vhc-rest-logo-height, 44px);
width: auto;
}
/* A concept registered without logo artwork yet shows its name instead. */
.vr-header__wordmark {
color: var(--vhc-rest-chrome, #fff);
display: block;
font-family: var(--vhc-rest-font-script);
font-size: 1.75rem;
font-weight: var(--vhc-rest-display-weight, 400);
line-height: 44px;
white-space: nowrap;
}
.vr-header__bar {
display: flex;
align-items: center;
gap: 40px;
}
.vr-header__nav ul {
display: flex;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
list-style: none;
}
/* The bar is a flex row, so a tight header shrinks the items and the labels
break mid-phrase — "Caravan Court" stacked as two lines on The Vandy
(#1). A nav label is a name, not a paragraph: it stays on one line and the
item keeps its width. */
.vr-header__nav li {
flex: 0 0 auto;
}
.vr-header__nav a {
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
color: var(--wp--preset--color--chrome);
transition: opacity 0.2s ease;
}
.vr-header__nav a:hover {
opacity: 0.7;
}
.vr-header__toggle {
display: none;
flex-direction: column;
gap: 6px;
padding: 8px 0;
background: none;
border: none;
cursor: pointer;
}
.vr-header__toggle span[aria-hidden] {
display: block;
width: 26px;
height: 2px;
background: var(--wp--preset--color--chrome);
transition: transform 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.vr-header__toggle span[aria-hidden] {
transition: none;
}
}
@media (max-width: 1100px) {
.vr-header {
padding: 20px 24px;
}
.vr-header__toggle {
display: flex;
}
.vr-header__bar {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding: 24px;
background: var(--wp--preset--color--nav-bg);
}
.vr-header.is-open .vr-header__bar {
display: flex;
}
.vr-header__nav ul {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
}
/* ---------------------------------------------------------------------
Covers — full-bleed media slots (hero, live music)
--------------------------------------------------------------------- */
.vr-cover {
position: relative;
overflow: hidden;
}
.vr-cover__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
}
.vr-cover__media > video,
.vr-cover__media > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vr-cover__pause {
position: absolute;
right: 30px;
bottom: 30px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 32px;
height: 32px;
border: 1px solid var(--wp--preset--color--accent-2);
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.vr-cover__pause span {
display: block;
width: 2px;
height: 10px;
background: var(--wp--preset--color--accent-2);
}
/* Paused: a play triangle. It used to rotate one bar 90 degrees and hide
the other, which draws a horizontal dash rather than anything that reads
as "play". The 2px nudge is optical centring — a triangle's visual centre
sits left of its bounding box. */
.vr-cover__pause.is-paused span {
display: none;
}
.vr-cover__pause.is-paused::before {
border-color: transparent transparent transparent var(--wp--preset--color--accent-2);
border-style: solid;
border-width: 5px 0 5px 8px;
content: '';
display: block;
margin-left: 2px;
}
.vr-hero {
/* ~1440/806 comp ratio; a plain height (not aspect-ratio + min-height,
whose transferred min-width blows out narrow viewports). */
height: clamp(540px, 56vw, 100svh);
}
.vr-hero__title {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
padding-top: 40px;
color: var(--wp--preset--color--accent-2);
text-align: center;
font-weight: 400;
}
.vr-hero__script {
display: block;
margin: 0;
font-family: var(--wp--preset--font-family--script);
font-size: clamp(2.25rem, 13.2vw, 11.875rem);
line-height: 0.9;
}
.vr-hero__joiner {
display: block;
z-index: 2;
font-family: var(--wp--preset--font-family--body);
font-weight: 200;
font-style: italic;
font-size: clamp(1.375rem, 2.8vw, 2.5rem);
letter-spacing: -0.06em;
line-height: 1;
margin: 0.5em 0 -0.35em;
}
/* ---------------------------------------------------------------------
Intro — accent statement + supporting copy
--------------------------------------------------------------------- */
.vr-intro {
display: grid;
grid-template-columns: minmax(0, 648fr) minmax(0, 600fr);
gap: clamp(40px, 5vw, 72px);
align-items: start;
padding: clamp(72px, 8.5vw, 120px) 60px;
}
.vr-intro__lead {
margin: 0;
/* --vhc-rest-font-statement: a brand can set its statement lines (intro
lead, split heading, Find Us) in the display face — Elora uses Memoir
where Water Trough keeps the body serif. */
font-family: var(--vhc-rest-font-statement, inherit);
font-size: clamp(1.75rem, 2.8vw, 2.5rem);
line-height: 1.2;
/* --vhc-rest-statement-color: the intro lead + hours lead when a
skeleton draws them in the ink rather than the accent (Two Mules). */
color: var(--vhc-rest-statement-color, var(--wp--preset--color--accent));
text-transform: var(--vhc-rest-intro-transform, none);
letter-spacing: var(--vhc-rest-display-tracking, normal);
}
/* Stress inside the lead (Vbar: "The bar on Santana Row") is drawn as an
underline in the skeletons, not an italic — display faces rarely carry one. */
.vr-intro__lead em {
font-style: normal;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.12em;
}
.vr-intro__copy {
margin: 0;
max-width: 600px;
}
/* Multi-paragraph intro copy (the builder wraps it in __body so the
two-column grid keeps its two children). */
.vr-intro__body {
max-width: 600px;
}
.vr-intro__body .vr-intro__copy {
margin: 0 0 1em;
}
.vr-intro__body .vr-intro__copy:last-child {
margin-bottom: 0;
}
/* ---------------------------------------------------------------------
Photo gallery slider — edge-bleed image row (IG-feed treatment)
--------------------------------------------------------------------- */
/* The arrows are the last thing in the band, so the band's bottom is the
arrows' bottom and the next section starts against them. A concept whose
carousel is followed by a full-bleed photo needs air there — Naranja #1
asked for 180px. */
.vr-carousel {
padding: clamp(48px, 6vw, 96px) 0 var(--vhc-rest-carousel-pad-bottom, 0);
}
.vr-carousel__track {
display: flex;
gap: 16px;
padding-left: 60px;
scroll-padding-left: 60px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.vr-carousel__track::-webkit-scrollbar {
display: none;
}
.vr-carousel__slide {
flex: 0 0 auto;
width: min(316px, 72vw);
margin: 0;
scroll-snap-align: start;
}
.vr-carousel__slide img {
display: block;
width: 100%;
aspect-ratio: 316 / 421;
object-fit: cover;
}
/* Placeholder slide: the slide's own width, the photo's aspect. */
.vr-carousel__slide.vr-ph {
aspect-ratio: 316 / 421;
}
.vr-carousel .vr-arrows {
justify-content: flex-end;
padding: 36px 60px 0;
}
/* ---------------------------------------------------------------------
Tabbed menu
--------------------------------------------------------------------- */
.vr-menu {
padding: clamp(48px, 5vw, 60px) 60px;
}
.vr-menu__head {
margin: 0 0 clamp(40px, 5.5vw, 80px);
}
.vr-menu__tabs {
display: flex;
flex-wrap: wrap;
}
.vr-menu__tabs button {
flex: 1 1 0;
min-width: 110px;
padding: 0 0 22px;
background: none;
border: none;
border-bottom: 1px solid var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--wp--preset--color--ink);
cursor: pointer;
transition: color 0.2s ease;
}
.vr-menu__tabs button:hover {
color: var(--vhc-rest-tab-active, var(--wp--preset--color--accent));
}
/* --vhc-rest-tab-active: the active tab's colour when accent is the ink
(Vbar: red on white tabs, 6574:5382). */
.vr-menu__tabs button.is-active {
color: var(--vhc-rest-tab-active, var(--wp--preset--color--accent));
border-bottom: 4px solid var(--vhc-rest-tab-active, var(--wp--preset--color--accent));
padding-bottom: 19px;
}
.vr-menu__panel {
margin-top: clamp(48px, 6vw, 80px);
columns: 4;
column-gap: 60px;
}
.vr-menu__panel:not(.is-active) {
display: none;
}
.vr-menu__panel-label {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.vr-menu__category {
break-inside: avoid;
margin-bottom: 42px;
}
.vr-menu__category-title {
margin: 0 0 28px;
/* A statement role too: the Vandy skeleton draws category titles in
Lennon (6552:12645); brands without a statement face keep the body. */
/* --vhc-rest-font-category: a category face of its own (Dorrego's:
Spectral where the statements are Spectral SC). */
font-family: var(--vhc-rest-font-category, var(--vhc-rest-font-statement, var(--wp--preset--font-family--body)));
font-weight: 400;
font-size: clamp(1.5rem, 1.95vw, 1.75rem);
line-height: 1.2;
color: var(--wp--preset--color--accent);
letter-spacing: var(--vhc-rest-display-tracking, normal);
/* --vhc-rest-category-transform: Oveja Negra sets its category titles in caps like every other display line. */
text-transform: var(--vhc-rest-category-transform, capitalize);
}
.vr-menu__item {
margin-bottom: 28px;
}
.vr-menu__name {
margin: 0 0 10px;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vr-menu__desc {
margin: 0;
color: var(--wp--preset--color--muted);
}
.vr-menu__note {
margin: 0;
}
.vr-menu__disclaimer {
margin: clamp(40px, 5vw, 72px) 0 0;
max-width: 596px;
color: var(--wp--preset--color--muted);
}
@media (max-width: 1100px) {
.vr-menu__panel {
columns: 2;
}
}
@media (max-width: 640px) {
.vr-menu__panel {
columns: 1;
}
.vr-menu__tabs button {
flex: 1 1 33%;
padding: 12px 0;
}
.vr-menu__tabs button.is-active {
padding-bottom: 9px;
}
}
/* ---------------------------------------------------------------------
Hours
--------------------------------------------------------------------- */
.vr-hours__photo {
display: block;
width: 100%;
margin: 0;
}
.vr-hours__photo img,
.vr-hours__photo.vr-ph {
display: block;
width: 100%;
aspect-ratio: 1440 / 797;
object-fit: cover;
}
.vr-hours__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
gap: clamp(40px, 6vw, 90px);
align-items: start;
padding: clamp(72px, 8.5vw, 120px) 60px;
}
.vr-hours__lead {
margin: 0;
max-width: 420px;
font-size: clamp(1.5rem, 2.25vw, 2rem);
line-height: 1.2;
color: var(--vhc-rest-statement-color, var(--wp--preset--color--accent));
}
.vr-hours__group {
padding: 16px 0;
border-bottom: 1px solid var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.3;
}
.vr-hours__group:first-child {
padding-top: 0;
}
.vr-hours__group:last-of-type {
border-bottom: none;
}
.vr-hours__group p {
margin: 0;
}
.vr-hours__label {
font-weight: 700;
}
/* ---------------------------------------------------------------------
Find us
--------------------------------------------------------------------- */
/* Hours and Find Us butt together, so the whole visible separation between
them is this top padding — 124px at 1464 wide. Water Trough #1 wanted 90px
of it back. max() so the subtraction cannot go negative on a phone, where
the clamp is already at its 72px floor. */
.vr-find {
padding: var(--vhc-rest-find-pad-top, clamp(72px, 8.5vw, 130px)) 60px clamp(72px, 8.5vw, 130px);
text-align: center;
}
/* The comp had the headline sitting half its height over the map card
(138px head, 57px overlap), and that is what this was. Two GMs reported
it as unreadable from different venues — BugHerd #498 (Vbar) and #502
(Oveja Negra) — so the headline clears the map now, network-wide per
Hunter. The overlap scaled with each brand's display size, so it ran
from 27px on Vbar's Director to 58px on Water Trough's Pencerio: worst
exactly where the type is largest.
Still an em, so the gap stays proportional to each brand's headline the
way the overlap did. position/z-index are gone with it — they existed
only to lift the headline over the map card.
Mobile already set this to 0 and is left alone: the overlap never
applied there, which is why both reports are desktop. */
.vr-find > .vr-script-head {
margin-bottom: 0.3em;
}
.vr-find__grid {
display: grid;
/* The map is capped, not fixed, and the side columns hold a floor.
340px, not a round number. Font-size here is
clamp(1.375rem, 2.25vw, 2rem), so the type is near its 32px cap
exactly where the column is at its narrowest, and "Hotel Valencia"
in the widest brand face needs about 330px. At the earlier 220px
floor the name broke after "Hotel" (#501), while at 1440 — where
the column grew to 302px — it already read correctly. That gap is
what gave the pinch away.
It is a per-brand threshold, which is why 300px was not enough:
--vhc-rest-font-statement differs by venue, and Vbar's face is wide
enough to still split at 1440 where Oveja's did not. 340 clears
every venue at every width.
The cost is the map, which this squeezes to 378px at 1280 (it was
600 before #501 was worked). It stays legible as a locator, but it
is a visible change to the band's balance and worth a designer's
eye. With a hard 600px centre, every width
between the single-column breakpoint and ~1280px crushed the note
and address columns — 111px at 1024px, which broke "Hotel Valencia
Santana Row" across four lines in display type (#501). The side
columns now hold a floor and the map gives way first; at 1280 and
above they still land on 229px, so the comp is unchanged. */
grid-template-columns:
minmax(min(100%, 340px), 1fr)
minmax(0, 600px)
minmax(min(100%, 340px), 1fr);
gap: clamp(24px, 4vw, 60px);
align-items: center;
}
.vr-find__note,
.vr-find__address {
margin: 0;
/* --vhc-rest-font-find: a brand whose Find Us lines take a face of
their own (The Vandy: Instrument Serif where the statements are
Lennon); unset = the statement face, then the body face. */
font-family: var(--vhc-rest-font-find, var(--vhc-rest-font-statement, inherit));
font-size: clamp(1.375rem, 2.25vw, 2rem);
line-height: 1.2;
/* --vhc-rest-find-color: Find Us lines in the muted tone (Dorrego's,
Naranja) or the ink (Two Mules); unset = the statement colour, then accent. */
color: var(--vhc-rest-find-color, var(--vhc-rest-statement-color, var(--wp--preset--color--accent)));
letter-spacing: var(--vhc-rest-display-tracking, normal);
}
.vr-find__note a {
color: inherit;
}
/* #501, the last of it: "Hotel Valencia Santana" / "Row" left the place
name split with one word stranded on its own line. `pretty` is exactly
this — it re-flows to avoid an orphaned last word — and it fixes the
two widths where that happened (1024 and 390) while changing nothing on
any other venue, checked across all thirteen.
Progressive enhancement, deliberately: browsers without it keep the
current wrap rather than breaking, so there is nothing to fall back to.
`balance` was tried first and does nothing here — it evens line lengths,
and these lines are already even; the problem was the orphan. */
.vr-find__note {
text-wrap: pretty;
}
.vr-find__map {
position: relative;
display: block;
/* Explicit width: the mobile rule centres this grid item with auto
margins, which shrink-wraps it — an intrinsic-less placeholder box
would collapse to 0 wide. */
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.vr-find__map {
margin: 0;
}
.vr-find__map a {
display: block;
}
.vr-find__map img {
display: block;
width: 100%;
aspect-ratio: 600 / 540;
object-fit: cover;
}
.vr-find__map.vr-ph {
aspect-ratio: 600 / 540;
}
.vr-find__pin,
.vr-find__map::after {
position: absolute;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
transform: translate(-50%, -60%);
pointer-events: none;
}
/* Accent-filled pin with a white center (was an inline SVG). */
.vr-find__map::after {
content: "";
/* --vhc-rest-pin: the pin keeps a colour of its own when accent is white (Vbar: red). */
background: var(--vhc-rest-pin, var(--wp--preset--color--accent));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cpath fill='%23000' d='M28.4381 53.5026C21.8249 47.9072 16.882 42.7327 13.6095 37.9791C10.3365 33.2259 8.7 28.7438 8.7 24.5328C8.7 18.382 10.6861 13.4806 14.6583 9.82858C18.6301 6.17619 23.2234 4.35 28.4381 4.35C33.6529 4.35 38.2478 6.17619 42.2228 9.82858C46.1982 13.4806 48.1859 18.382 48.1859 24.5328C48.1859 28.7438 46.5478 33.2259 43.2716 37.9791C39.9958 42.7327 35.0513 47.9072 28.4381 53.5026Z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'%3E%3Cpath fill='%23000' d='M28.4381 53.5026C21.8249 47.9072 16.882 42.7327 13.6095 37.9791C10.3365 33.2259 8.7 28.7438 8.7 24.5328C8.7 18.382 10.6861 13.4806 14.6583 9.82858C18.6301 6.17619 23.2234 4.35 28.4381 4.35C33.6529 4.35 38.2478 6.17619 42.2228 9.82858C46.1982 13.4806 48.1859 18.382 48.1859 24.5328C48.1859 28.7438 46.5478 33.2259 43.2716 37.9791C39.9958 42.7327 35.0513 47.9072 28.4381 53.5026Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.vr-find__map::before {
content: "";
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 13px;
height: 13px;
border-radius: 50%;
/* White in the centre of a coloured teardrop on most concepts, but
Canteen inverts it — a white pin with a green dot (Canteen #3). */
background: var(--vhc-rest-pin-center, #fff);
transform: translate(calc(-50% - 0.7px), calc(-50% - 10.9px));
pointer-events: none;
}
/* ---------------------------------------------------------------------
Live music + upcoming shows
--------------------------------------------------------------------- */
.vr-live {
height: clamp(440px, 56vw, 100svh);
}
.vr-live__title {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
font-family: var(--wp--preset--font-family--script);
/* --vhc-rest-live-size: the live-music title shares the script clamp
with the hero; a caps display face (Midnight Shift's Shift at 100)
sizes it down — falls back to the brand's hero size, then the clamp. */
font-size: var(--vhc-rest-live-size, var(--vhc-rest-hero-size, clamp(2.25rem, 13.2vw, 11.875rem)));
line-height: 0.95;
text-align: center;
color: var(--wp--preset--color--accent-2);
}
.vr-shows {
background: var(--wp--preset--color--band);
color: var(--wp--preset--color--on-band);
padding: clamp(48px, 5vw, 62px) 60px clamp(56px, 6vw, 78px);
}
/* Optional blurb + calendar link between the kicker and the cards (the
Canteen's "Live Music Every Thursday, Friday & Saturday" copy). */
.vr-shows__intro {
max-width: 640px;
margin-top: 20px;
}
.vr-shows__copy {
margin: 0 0 20px;
}
.vr-shows__intro .wp-block-buttons {
margin: 0;
}
.vr-shows__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin-top: clamp(32px, 4vw, 57px);
}
.vr-shows__img {
margin: 0;
}
.vr-shows__card img,
.vr-shows__card .vr-ph {
display: block;
width: 100%;
aspect-ratio: 420 / 236;
object-fit: cover;
}
.vr-shows__name {
margin: 30px 0 8px;
font-size: 1.5rem;
line-height: 1;
text-transform: capitalize;
}
.vr-shows__when {
margin: 0 0 36px;
}
/* ---------------------------------------------------------------------
Split features — groups / food trucks
--------------------------------------------------------------------- */
.vr-split {
display: grid;
gap: clamp(40px, 7vw, 110px);
align-items: center;
padding: clamp(72px, 8.5vw, 150px) 60px 0;
}
.vr-split__photo {
margin: 0;
}
.vr-split__photo img {
display: block;
width: 100%;
object-fit: cover;
}
.vr-split--lead {
grid-template-columns: minmax(0, 499fr) minmax(0, 440fr);
padding-left: clamp(60px, 12vw, 181px);
}
.vr-split--lead .vr-split__photo img {
aspect-ratio: 499 / 645;
}
.vr-split--trail {
grid-template-columns: minmax(0, 596fr) minmax(0, 424fr);
padding-right: clamp(60px, 10vw, 178px);
padding-bottom: clamp(72px, 8.5vw, 150px);
}
.vr-split--trail .vr-split__photo {
order: 2;
}
.vr-split--trail .vr-split__photo img {
aspect-ratio: 424 / 485;
}
.vr-split--trail .vr-split__body {
text-align: center;
max-width: 400px;
justify-self: center;
}
.vr-split__small {
display: block;
width: 180px;
margin: 0 0 34px;
}
.vr-split__small img {
display: block;
width: 100%;
aspect-ratio: 180 / 233;
object-fit: cover;
}
.vr-split__small.vr-ph {
aspect-ratio: 180 / 233;
}
.vr-split__heading {
margin: 0 0 24px;
max-width: 380px;
font-family: var(--vhc-rest-font-statement, var(--wp--preset--font-family--body));
font-weight: 400;
font-size: clamp(1.5rem, 2.25vw, 2rem);
line-height: 1.15;
text-transform: var(--vhc-rest-split-transform, capitalize);
letter-spacing: var(--vhc-rest-display-tracking, normal);
}
.vr-split--trail .vr-split__heading {
max-width: none;
}
.vr-split__copy {
margin: 0 0 1.25em;
max-width: 380px;
}
.vr-split__copy:last-of-type {
margin-bottom: 40px;
}
/* A bulleted block in the split copy (Vbar's dress code). */
.vr-split__list {
margin: 0 0 40px;
padding-left: 1.25em;
max-width: 380px;
}
.vr-split__list li {
margin: 0 0 0.35em;
}
.vr-split--trail .vr-split__copy {
max-width: none;
}
.vr-split--trail .vr-split__body .wp-block-buttons {
justify-content: center;
}
/* ---------------------------------------------------------------------
Reviews — photo half + accent quote slider
--------------------------------------------------------------------- */
.vr-reviews {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: clamp(72px, 8.5vw, 160px);
}
.vr-reviews__photo {
margin: 0;
}
.vr-reviews__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* min-height is the content height and the 80px padding adds to it. The
core group stylesheet (border-box, loaded after this file) needs the
two-class selector to lose. */
.vr-reviews__panel,
.wp-block-group.vr-reviews__panel {
box-sizing: content-box;
}
.vr-reviews__panel {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: clamp(440px, 47vw, 686px);
padding: 80px clamp(32px, 7vw, 100px);
background: var(--wp--preset--color--reviews-bg);
color: var(--wp--preset--color--reviews-ink);
text-align: center;
}
.vr-reviews__stars {
display: flex;
gap: 8px;
margin: 0 0 40px;
}
.vr-reviews__stars img {
width: 26px;
height: 26px;
}
/* Five accent-2 stars (was a row of inline SVGs). A concept whose review
card is itself painted in accent-2 needs to name another colour, or the
stars vanish into the card — Elora's were #c26f51 on #c26f51 (Elora #2). */
.vr-reviews__stars::before {
content: "";
display: block;
width: 162px;
height: 26px;
background: var(--vhc-rest-reviews-stars, var(--wp--preset--color--accent-2));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.4516 26.4516'%3E%3Cpath fill='%23000' d='M5.28118 24.7343L7.38436 15.6782L0.339686 9.57977L9.60877 8.80276L13.2258 0.248141L16.8427 8.80276L26.1118 9.57977L19.0672 15.6782L21.1888 24.7343L13.2258 19.9031L5.28118 24.7343Z'/%3E%3C/svg%3E") left center / 26px 26px space;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.4516 26.4516'%3E%3Cpath fill='%23000' d='M5.28118 24.7343L7.38436 15.6782L0.339686 9.57977L9.60877 8.80276L13.2258 0.248141L16.8427 8.80276L26.1118 9.57977L19.0672 15.6782L21.1888 24.7343L13.2258 19.9031L5.28118 24.7343Z'/%3E%3C/svg%3E") left center / 26px 26px space;
}
.vr-reviews__quote,
.wp-block-quote.vr-reviews__quote {
margin: 0;
padding: 0;
border: 0;
}
.vr-reviews__quote:not(.is-active) {
display: none;
}
.vr-reviews__quote p {
margin: 0 0 40px;
/* --vhc-rest-font-quote: the review quote's face when the brand draws
it outside the body face (The Vandy: Instrument Serif). */
font-family: var(--vhc-rest-font-quote, inherit);
font-weight: 300;
font-size: clamp(1.375rem, 2.25vw, 2rem);
line-height: 1.15;
letter-spacing: -0.01em;
}
.vr-reviews__quote cite {
font-style: normal;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.vr-reviews .vr-arrows {
position: absolute;
right: clamp(24px, 4vw, 60px);
bottom: clamp(24px, 3vw, 45px);
}
/* ---------------------------------------------------------------------
Follow — Instagram row
--------------------------------------------------------------------- */
.vr-follow {
padding: clamp(72px, 8.5vw, 130px) 0 clamp(80px, 9.5vw, 137px);
overflow: hidden;
text-align: center;
}
.vr-follow__handle {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 20px auto clamp(40px, 4.5vw, 66px);
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--wp--preset--color--ink);
}
.vr-follow__handle img {
width: 14px;
}
/* The Instagram mark ahead of the handle. Every brand's kicker-mark.svg is
the same Figma export with its fill BAKED IN — white for seven concepts,
#393635 for five — so it could not follow the band it sat on: white on
Dorrego's cream band was invisible, #393635 on Canteen's dark one likewise.
Painting it as a mask in currentColor makes it match the handle text it
sits beside, which is what all four colour tickets asked for by hex
(Dorrego's #1 #131E29, Two Mules #2 #393635, Canteen #4 white, Naranja #2
#131E29 — each exactly that brand's own --vhc-rest-ink). */
.vr-follow__handle::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: var(--vhc-rest-mark, var(--vhc-rest-ig-fallback)) no-repeat center / contain;
mask: var(--vhc-rest-mark, var(--vhc-rest-ig-fallback)) no-repeat center / contain;
}
.vr-follow__handle a {
color: inherit;
text-decoration: none;
}
.vr-follow__row {
display: flex;
gap: 20px;
width: calc(100% + 90px);
margin-left: -45px;
}
.vr-follow__row a,
.vr-follow__row > .wp-block-image,
.vr-follow__row > .vr-ph {
flex: 1 1 0;
min-width: 0;
margin: 0;
}
.vr-follow__row > .wp-block-image a {
display: block;
}
.vr-follow__row img {
display: block;
width: 100%;
aspect-ratio: 290 / 404;
object-fit: cover;
}
/* ---------------------------------------------------------------------
Footer
--------------------------------------------------------------------- */
.vr-footer {
background: var(--wp--preset--color--footer-bg);
color: var(--wp--preset--color--footer-ink);
padding: 65px 60px 0;
}
.vr-footer a {
color: inherit;
}
.vr-footer__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
padding-bottom: clamp(48px, 6vw, 82px);
border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--footer-ink) 50%, transparent);
}
/* Height-driven by default, so marks of different proportions sit on one
line. A concept whose mark is wide and short reads too small that way and
sets the width pair instead — The Vandy #2 asked for 360px. */
.vr-footer__logo {
height: var(--vhc-rest-footer-logo-height, clamp(64px, 7.5vw, 108px));
width: var(--vhc-rest-footer-logo-width, auto);
max-width: 100%;
}
.vr-footer__wordmark {
color: var(--vhc-rest-footer-ink, #fff);
display: block;
font-family: var(--vhc-rest-font-script);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--vhc-rest-display-weight, 400);
height: auto;
line-height: 1.1;
}
/* The parent hotel's mark, same pair as the brand logo above — 1791 #4 asked
for The George at 200px wide. */
.vr-footer__parent img {
display: block;
height: var(--vhc-rest-parent-logo-height, clamp(64px, 7.5vw, 108px));
width: var(--vhc-rest-parent-logo-width, auto);
max-width: 100%;
}
.vr-footer__meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 66px);
}
.vr-footer__address {
font-style: normal;
line-height: 1.375;
}
.vr-footer__address a {
text-decoration: none;
}
.vr-footer__newsletter {
width: min(444px, 100%);
}
.vr-footer__label {
margin: 0 0 10px;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.vr-newsletter {
display: flex;
align-items: flex-end;
gap: 34px;
}
.vr-newsletter input[type="email"] {
flex: 1;
padding: 8px 0;
background: transparent;
border: none;
border-bottom: 1px solid var(--wp--preset--color--footer-ink);
border-radius: 0;
color: var(--wp--preset--color--footer-ink);
font-family: var(--wp--preset--font-family--body);
font-size: 1rem;
letter-spacing: 0.02em;
}
.vr-newsletter input[type="email"]::placeholder {
color: var(--wp--preset--color--footer-ink);
opacity: 0.6;
}
.vr-newsletter input[type="email"]:focus {
outline: none;
border-bottom-width: 2px;
}
.vr-newsletter button {
padding: 8px 0;
background: none;
border: none;
border-bottom: 1px solid var(--wp--preset--color--footer-ink);
color: var(--wp--preset--color--footer-ink);
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
}
.vr-footer__legal {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
padding-bottom: 46px;
}
.vr-footer__social {
display: flex;
gap: 16px;
}
.vr-footer__social a {
display: inline-flex;
transition: opacity 0.2s ease;
}
.vr-footer__social a:hover {
opacity: 0.7;
}
.vr-footer__colophon {
text-align: right;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.5;
}
.vr-footer__colophon p {
margin: 0;
}
.vr-footer__colophon a {
text-decoration: none;
}
.vr-footer__colophon a:hover {
text-decoration: underline;
}
.vr-footer__collection {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 84px;
margin: 0 -60px;
padding: 14px 60px;
/* --vhc-rest-collection-bg: the collection bar's fill when a skeleton
draws it on a brand tone (The Vandy: the sheet's sage band); unset
= the page ground. */
background: var(--vhc-rest-collection-bg, var(--wp--preset--color--ground));
/* The bar takes a brand tone but the type kept the page's ink, which on
Two Mules put #393635 on #67250d — 1.05:1, effectively unreadable
(Two Mules #3). A concept that paints the bar names the type with it. */
color: var(--vhc-rest-collection-ink, var(--wp--preset--color--ink));
}
.vr-footer__collection p {
margin: 0;
font-family: "Ortica Linear", Georgia, serif;
font-size: 1.1875rem;
letter-spacing: 0.13em;
text-transform: uppercase;
text-align: left;
}
.vr-footer__collection a {
position: absolute;
right: 60px;
color: var(--vhc-rest-collection-ink, var(--wp--preset--color--ink));
font-family: "Outfit", sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 10px;
}
/* ---------------------------------------------------------------------
Placeholders — gray media slots for concepts seeded before photography
(valencia_restaurant_media() emits .vr-ph in place of the ![]()
)
--------------------------------------------------------------------- */
.vr-ph {
display: block;
background: var(--wp--preset--color--ph);
}
.vr-carousel__slide .vr-ph {
width: 100%;
aspect-ratio: 316 / 421;
}
.vr-split__photo .vr-ph,
.vr-split__photo.vr-ph {
width: 100%;
}
.vr-split--lead .vr-split__photo .vr-ph {
aspect-ratio: 499 / 645;
}
.vr-split--trail .vr-split__photo .vr-ph {
aspect-ratio: 424 / 485;
}
.vr-reviews__photo .vr-ph,
.vr-reviews__photo.vr-ph {
height: 100%;
min-height: 480px;
}
/* Reviews photo / split photo figures: margin comes from the section grid. */
.vr-reviews__photo,
.vr-split__photo {
margin: 0;
}
.vr-shows__card .vr-ph {
width: 100%;
aspect-ratio: 420 / 236;
}
.vr-follow__row .vr-ph {
width: 100%;
aspect-ratio: 290 / 404;
}
.vr-find__mapimg {
display: block;
width: 100%;
aspect-ratio: 600 / 540;
object-fit: cover;
}
/* Inline brand-colored glyphs (were Water Trough-colored SVG files). */
.vr-find__pin {
height: 58px;
color: var(--wp--preset--color--accent);
}
.vr-reviews__stars svg {
width: 26px;
height: 26px;
color: var(--wp--preset--color--accent-2);
}
/* ---------------------------------------------------------------------
Plain hero title (name + tagline) — concepts whose comp leads with
the display face rather than the script greeting
--------------------------------------------------------------------- */
.vr-hero__title--plain {
gap: 18px;
padding: 40px 24px 0;
color: var(--wp--preset--color--chrome);
}
.vr-hero__name {
display: block;
margin: 0;
font-family: var(--wp--preset--font-family--script);
font-weight: var(--vhc-rest-display-weight, 400);
/* --vhc-rest-hero-size: a brand whose hero line is a sentence rather
than a name (The Vandy's two-line subhead at Lennon 56) can size it
down; unset = the name clamp. */
font-size: var(--vhc-rest-hero-size, clamp(2.75rem, 8.5vw, 7.5rem));
line-height: 1;
/* --vhc-rest-hero-transform: skeletons that set the hero line in caps
(Vbar's "VBAR", Oveja Negra's subhead) keep sentence case in the
content and transform here. --vhc-rest-display-tracking: letter-
spacing shared by the display + statement roles (Oveja: 0.14em). */
text-transform: var(--vhc-rest-hero-transform, none);
/* --vhc-rest-head-tracking: hero + section heads when they track
differently from the statements (Naranja: 13% vs 2%). */
letter-spacing: var(--vhc-rest-head-tracking, var(--vhc-rest-display-tracking, normal));
}
/* Stress inside the hero line ("Spirits for the People") keeps the
display face's italic. */
.vr-hero__name em {
font-style: italic;
}
.vr-hero__tagline {
display: block;
margin: 0;
font-family: var(--wp--preset--font-family--subhead);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------
Menu intro statement (optional, between the script head and the tabs)
--------------------------------------------------------------------- */
.vr-menu__intro {
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.vr-menu__intro-lead {
margin: 0 0 16px;
/* The copy docs' "Menus subhead" is a statement: the statement face
where a brand sets one (Director on Vbar, Spectral SC on Dorrego's). */
font-family: var(--vhc-rest-font-statement, inherit);
font-size: clamp(1.5rem, 2.25vw, 2rem);
line-height: 1.2;
color: var(--vhc-rest-statement-color, var(--wp--preset--color--accent));
}
.vr-menu__intro-copy {
margin: 0;
}
/* Hours note — body paragraph under the ruled list. */
.vr-hours__note {
margin: 24px 0 0;
max-width: 480px;
}
.vr-hours__note a {
color: inherit;
}
/* Header pill — reservations or phone. Filled per brand (pill-bg / pill-ink),
flips to an outline in the border color on hover. */
.vr-header__reserve {
background: var(--wp--preset--color--pill-bg);
color: var(--wp--preset--color--pill-ink);
border: 1px solid var(--wp--preset--color--pill-border);
transition: background-color 0.2s ease, color 0.2s ease;
}
/* The pill used to empty its fill on hover and keep only the border colour
for the label, which over the dark header left the text at roughly 3:1.
It keeps the fill and takes a ring instead — BugHerd (Oveja Negra) #8. */
.vr-header__reserve:hover,
.vr-header__reserve:focus-visible {
background: var(--vhc-rest-pill-hover-bg, var(--wp--preset--color--pill-bg));
/* currentColor, so the ring always reads against whatever the fill is. */
box-shadow: inset 0 0 0 2px currentColor;
color: var(--vhc-rest-pill-hover-ink, var(--wp--preset--color--pill-ink));
opacity: 1;
}
.vr-header__phone {
white-space: nowrap;
}
/* Text inside the band-colored shows strip follows the band's contrast. */
.vr-shows .vr-kicker,
.vr-shows .vr-link,
.vr-shows .wp-block-button.is-style-vr-link > .wp-block-button__link {
color: var(--wp--preset--color--on-band);
}
/* Footer brand story + address intro line. */
.vr-footer__story {
max-width: 720px;
padding-top: clamp(40px, 5vw, 64px);
line-height: 1.5;
}
.vr-footer__story p {
margin: 0 0 1em;
}
.vr-footer__story p:last-child {
margin-bottom: 0;
}
.vr-footer__address-intro a {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------------------------------------------------------------------
Responsive
--------------------------------------------------------------------- */
@media (max-width: 900px) {
.vr-intro,
.vr-hours__grid,
.vr-split--lead,
.vr-split--trail {
grid-template-columns: 1fr;
padding-left: 24px;
padding-right: 24px;
}
.vr-split--trail .vr-split__photo {
order: 0;
}
.vr-menu,
.vr-shows,
.vr-find,
.vr-footer {
padding-left: 24px;
padding-right: 24px;
}
.vr-carousel__track {
padding-left: 24px;
scroll-padding-left: 24px;
}
.vr-carousel .vr-arrows {
padding-left: 24px;
padding-right: 24px;
}
.vr-find > .vr-script-head {
margin-bottom: 0;
}
.vr-find__grid {
grid-template-columns: 1fr;
}
.vr-find__map {
max-width: 600px;
margin: 0 auto;
}
.vr-shows__grid {
grid-template-columns: 1fr;
}
.vr-reviews {
grid-template-columns: 1fr;
}
.vr-reviews__photo img {
aspect-ratio: 4 / 3;
}
.vr-follow__row {
width: 100%;
margin-left: 0;
padding: 0 24px;
box-sizing: border-box;
overflow-x: auto;
scrollbar-width: none;
}
.vr-follow__row a,
.vr-follow__row > .wp-block-image,
.vr-follow__row > .vr-ph {
flex: 0 0 60vw;
}
.vr-footer__meta,
.vr-footer__legal {
flex-direction: column;
align-items: flex-start;
}
.vr-footer__colophon {
text-align: left;
}
.vr-footer__collection {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin: 0 -24px;
padding: 24px;
}
.vr-footer__collection a {
position: static;
}
}
/* ---------------------------------------------------------------------
Oveja Negra BugHerd round 1 — #8, #10/#11, #12, #18
--------------------------------------------------------------------- */
/* #10 / #11 — the Find Us note and address set in caps. A brand slot
rather than caps in the copy, so the other concepts are unchanged. */
.vr-find__note,
.vr-find__address {
letter-spacing: var(--vhc-rest-find-tracking, inherit);
text-transform: var(--vhc-rest-find-transform, none);
}
/* #12 asked for an Instagram mark ahead of the handle and this rule drew a
second one in CSS — but .vr-follow__handle::before was already painting the
brand's own kicker-mark.svg, which IS the Instagram logo on all twelve
concepts. Two marks shipped side by side (1791 #6, Elora #4). The brand's
export is the designer's artwork, so that one stays and this one goes; the
colour ask that #12 was really about is solved there, in currentColor. */
/* #18 — five stars, not six. The row is one masked box, and a 26px star
tiled with `space` fits six times into 162px. Widening the tile to the
star plus its 8px gap, and the box to five whole tiles, gives five. */
.vr-reviews__stars::before {
width: 170px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.5905 26.4516'%3E%3Cpath fill='%23000' d='M5.28118 24.7343L7.38436 15.6782L0.339686 9.57977L9.60877 8.80276L13.2258 0.248141L16.8427 8.80276L26.1118 9.57977L19.0672 15.6782L21.1888 24.7343L13.2258 19.9031L5.28118 24.7343Z'/%3E%3C/svg%3E") left center / 34px 26px space;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.5905 26.4516'%3E%3Cpath fill='%23000' d='M5.28118 24.7343L7.38436 15.6782L0.339686 9.57977L9.60877 8.80276L13.2258 0.248141L16.8427 8.80276L26.1118 9.57977L19.0672 15.6782L21.1888 24.7343L13.2258 19.9031L5.28118 24.7343Z'/%3E%3C/svg%3E") left center / 34px 26px space;
}
/* ---------------------------------------------------------------------
Footer newsletter, backed by Gravity Forms (BugHerd Oveja Negra #5).
The signup used to post nowhere; it is a seeded form now, so the entries
are kept and the site's address is notified. Gravity Forms brings its own
wrappers and its own selectors, so these are flattened back into the
single underlined row the footer had, matching the depth the hotel
theme's .vhc-gform rules use so they win without !important.
--------------------------------------------------------------------- */
/* The bespoke form was the flex row itself; here the row is Gravity Forms'
own