@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Josefin+Sans:wght@200;300;400;500&display=swap");
/* ===========================================================================
PARK REGENCY — BRAND ALIGNMENT LAYER
Derived from the house style that the Park Regency design agent already
produces (agarcia818/park-regency-toolkit → toolkit/js/renderer.js and
toolkit/css/theme.css), not from a reading of the palette alone.
The measured house system, taken from the real marketing pieces:
display type 28–36px, weight 200–300, tracking 0.15–0.20em, uppercase
labels 9–13px, tracking 0.18–0.30em, uppercase, sage
body Cormorant, sentence case, airy leading
rules/borders 1px hairlines in creamDark #E4DCCB — never heavy blocks
surfaces one colour per surface with 60–70px of padding around it
motion hover transitions only; no entrance animation anywhere
Two corrections this version makes to the first attempt:
1. Scale. The guidelines' "0.2em–0.3em tracking, uppercase" describes the
LABEL role — the pieces use it at 9–13px. Applying it to a 56px headline
produced the heavy, clunky result. Display type is now 38px maximum at
weight 200, which is where the house pieces actually sit.
2. Colour volume. Ken's standing direction on the design agent is "more
white, less color". The previous pass filled the page with cream and
Forest bands, which is why the contrast read as harsh. Colour is now
carried by type and hairlines on a white ground; cream appears only as an
occasional band or chip.
Loaded LAST on every page. Delete the one and the site reverts.
=========================================================================== */
:root {
--pr-forest: #37432B;
--pr-forest-dark: #2A331F;
--pr-sage: #8B907C;
--pr-sage-dark: #6E7363; /* theme.css sageDark — sage that can carry text */
--pr-cream: #F1EBDF;
--pr-cream-dark: #E4DCCB; /* hairline rules */
--pr-white: #FFFFFF;
--pr-track-display: 0.16em; /* house display range 0.15–0.20em */
--pr-track-label: 0.28em; /* house label range 0.18–0.30em */
}
/* ---------------------------------------------------------------------------
1. Ground. White, not cream — colour is carried by type, not by fills.
--------------------------------------------------------------------------- */
.elementor-kit-11 {
--e-global-color-text: var(--pr-forest);
--e-global-color-secondary: var(--pr-forest);
--e-global-color-primary: var(--pr-forest);
/* Elementor drives eyebrow labels AND a full-width band from `accent`. Sage
on cream measures 2.77:1 — it fails AA for normal and large text alike, so
the guidelines' "muted combo" cannot carry copy. sageDark is 4.12:1 and
keeps the muted character. */
--e-global-color-accent: var(--pr-sage-dark);
--e-global-color-19b404c: var(--pr-white);
--e-global-color-73ece29: var(--pr-forest);
}
body { background-color: var(--pr-white); }
/* ---------------------------------------------------------------------------
2. Motion. The export staggers entrance animations at 200/400/600ms, so
content slides and fades in as you scroll. Nothing in the house style
animates on entrance — the pieces are still compositions. Removing it is the
single biggest change to how "considered" the site feels.
--------------------------------------------------------------------------- */
.elementor-invisible { visibility: visible !important; }
.animated {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ---------------------------------------------------------------------------
3. TYPE SCALE
The previous pass set every heading in uppercase. That is wrong, and the
audit shows why: of 74 headings, 49 are short labels ("About Park Regency",
"How It Works") where caps is the brand's signature device — but 25 are
sentence-length lines the copywriter wrote in sentence case, and forcing
those to caps turns a headline into shouting. It also spelled the company
PARK REGENCY mid-sentence, which is what made it look wrong.
Tag alone cannot separate the two: h2 carries 41 labels AND 22 sentences. So
a small classifier in park-regency-motion.js tags each heading .pr-label or
.pr-display by length, and the roles are styled separately here.
The default is sentence case. If that script never runs, headings stay as
authored — which is the safe failure, not a page of capitals.
Scale is fluid on a ~1.25 ratio:
display-xl 32 → 54px hero
display-l 26 → 38px section headlines
display-m 20 → 26px sub-headlines
label 11 → 13px uppercase, tracked, sage-dark
body 19 → 20px Cormorant Garamond, 1.75
--------------------------------------------------------------------------- */
.elementor-heading-title,
.elementor-kit-11 h1,
.elementor-kit-11 h2,
.elementor-kit-11 h3,
.elementor-kit-11 h4 {
font-family: "Josefin Sans", sans-serif !important;
color: var(--pr-forest);
text-transform: none; /* sentence case is the default, not caps */
font-weight: 300;
}
/* ---- Display: sentence case, light, barely tracked ------------------------
Tracking that opens caps closes up lowercase — sentence-case display wants
almost none, and a tighter line than the caps setting needed. */
.elementor-kit-11 h1,
h1.elementor-heading-title,
.pr-display.pr-display-xl .elementor-heading-title,
h1.pr-display {
font-size: clamp(32px, 4.2vw, 54px) !important;
font-weight: 250 !important;
letter-spacing: 0.005em !important;
line-height: 1.14 !important;
text-transform: none !important;
}
h2.pr-display,
.elementor-kit-11 h2.pr-display {
font-size: clamp(26px, 3vw, 38px) !important;
font-weight: 300 !important;
letter-spacing: 0.008em !important;
line-height: 1.22 !important;
text-transform: none !important;
}
h3.pr-display,
.elementor-kit-11 h3.pr-display {
font-size: clamp(20px, 1.9vw, 26px) !important;
font-weight: 300 !important;
letter-spacing: 0.01em !important;
line-height: 1.32 !important;
text-transform: none !important;
}
/* ---- Label: the brand's caps device, kept for what it suits --------------- */
.pr-label,
.elementor-kit-11 h2.pr-label,
.elementor-kit-11 h3.pr-label,
.elementor-kit-11 h4,
.elementor-kit-11 h5,
.elementor-kit-11 h6 {
font-size: clamp(11px, 0.95vw, 13px) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.26em !important;
line-height: 2 !important;
color: var(--pr-sage-dark) !important;
}
/* A label that is a card or step title, rather than a section eyebrow, stays
Forest and sits a little larger — it is a heading, not a kicker. */
.pr-label.pr-label-strong,
.elementor-kit-11 h3.pr-label {
font-size: clamp(12px, 1.05vw, 14px) !important;
letter-spacing: 0.2em !important;
color: var(--pr-forest) !important;
}
/* ---------------------------------------------------------------------------
4. Buttons. Quiet, wide-tracked, sharp-cornered — closer to a printed piece
than a web button. Cream on Forest is 8.84:1; the export's white-on-sage was
3.29:1 and failed AA on the primary conversion element.
--------------------------------------------------------------------------- */
.elementor-button:not([href^="tel:"]),
.elementor-button-link:not([href^="tel:"]) {
background-color: var(--pr-forest) !important;
color: var(--pr-cream) !important;
font-family: "Josefin Sans", sans-serif !important;
font-weight: 300 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
padding: 15px 32px !important;
border-radius: 0 !important;
border: 1px solid var(--pr-forest) !important;
white-space: nowrap;
transition: background-color .25s ease, color .25s ease;
}
.elementor-button:not([href^="tel:"]):hover,
.elementor-button-link:not([href^="tel:"]):hover {
background-color: transparent !important;
color: var(--pr-forest) !important;
}
/* Click-to-call is a text link, not a filled CTA. */
.elementor-button[href^="tel:"] {
background-color: transparent !important;
border: 0 !important;
font-family: "Josefin Sans", sans-serif !important;
font-weight: 300 !important;
font-size: 13px !important;
letter-spacing: 0.1em !important;
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
5. Hairlines and accents. The house style separates with 1px cream-dark
rules, never with filled blocks.
--------------------------------------------------------------------------- */
hr,
.elementor-divider-separator { border-color: var(--pr-cream-dark) !important; }
.elementor-icon { background-color: transparent !important; color: var(--pr-sage) !important; }
/* The testimonial carousel is a hand-rolled component that never got the brand
applied: it sets `font-family: sans-serif` (the 42 generic-font elements in
the audit) and three colours that are not in the palette — #999 meta text at
2.85:1, plus #6b8060 and #7a8c6e, near-sage greens invented for this widget. */
.pc-stars { color: var(--pr-sage) !important; }
.pc-author-name {
font-family: "Josefin Sans", sans-serif !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: var(--pr-forest) !important;
}
.pc-author-meta {
font-family: "Cormorant", Georgia, serif !important;
font-size: 15px !important;
color: var(--pr-sage-dark) !important; /* was #999 — 2.85:1 */
}
.pc-agent-tag {
font-family: "Josefin Sans", sans-serif !important;
font-size: 10px !important;
letter-spacing: var(--pr-track-label) !important;
color: var(--pr-sage-dark) !important; /* was #6b8060 — 4.30:1 */
}
.pc-text { font-family: "Cormorant", Georgia, serif !important; }
.pc-dot.active { background: var(--pr-forest) !important; } /* was #7a8c6e */
.pc-card { border: 1px solid var(--pr-cream-dark) !important; }
/* ---------------------------------------------------------------------------
6. Hero legibility. Logo, nav, phone and headline are all white directly over
the background video, so readability depended on which frame was playing — on
a bright frame the headline disappeared. The tint is strongest at the top and
bottom, where the type sits, and lightest through the middle so the
photography still reads. Mixed from forest-dark rather than black.
--------------------------------------------------------------------------- */
.elementor-background-video-container::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(42, 51, 31, .52) 0%,
rgba(42, 51, 31, .16) 38%,
rgba(42, 51, 31, .20) 60%,
rgba(42, 51, 31, .46) 100%
);
}
/* On the hero the button sits on forest-tinted video, so a forest fill nearly
disappears. It inverts to the guidelines' reverse combo — cream on forest —
which is the same 8.84:1 pairing read the other way round. */
.e-con:has(> .elementor-background-video-container) .elementor-button:not([href^="tel:"]) {
background-color: var(--pr-cream) !important;
color: var(--pr-forest) !important;
border-color: var(--pr-cream) !important;
}
.e-con:has(> .elementor-background-video-container) .elementor-button:not([href^="tel:"]):hover {
background-color: transparent !important;
color: var(--pr-cream) !important;
}
/* The interior pages put a photograph behind their page title. How it gets
there varies: Agents/Careers use an Elementor parallax layer built at runtime,
while Services/Contact paint it straight onto the container and have no such
layer at all — which is why a rule written against the parallax layer only
fixed half of them. Scrimming the hero CONTAINER covers both.
It has to be ::after, not ::before — Elementor already uses the container's
::before for its own background overlay, and defining one here replaced it,
which blanked the photograph entirely. The stack is ordered explicitly:
background at 0, scrim at 1, content at 2. Scoped to the first container on
the page so the parallax sections further down, which carry dark text, are
untouched — and scoped under .page-content, because the header and footer are
their own .elementor wrappers: matching "the first container in any wrapper"
tinted the header and footer too, which is what put a hard horizontal seam
across the top of the image. */
.page-content > .elementor > .e-con.e-parent:first-child { position: relative; }
.page-content > .elementor > .e-con.e-parent:first-child > .elementor-motion-effects-container { z-index: 0; }
.page-content > .elementor > .e-con.e-parent:first-child::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(42, 51, 31, .50) 0%,
rgba(42, 51, 31, .22) 45%,
rgba(42, 51, 31, .42) 100%
);
}
.page-content > .elementor > .e-con.e-parent:first-child > *:not(.elementor-motion-effects-container) {
position: relative;
z-index: 2;
}
/* Headings sitting on media stay white — the rule in §3 must not repaint them
Forest against a photograph. */
.elementor-background-video-container ~ * .elementor-heading-title,
.elementor-background-video-container ~ * h1,
.elementor-background-video-container ~ * h2 { color: inherit; }
/* ===========================================================================
7. DETAILING
Luxury here means restraint plus one considered detail per element — the
opposite of adding ornament. Everything below is a hairline, a slow
transition, or a small amount of space. Nothing new is introduced to the
palette and no element gains a second colour.
=========================================================================== */
/* Smooth in-page movement, and never fight a user who has asked for less. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Nav: a hairline that draws in from the left on hover, rather than a colour
change. Slow enough (.35s) to read as deliberate. */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .ekit-menu-nav-link {
position: relative;
padding-bottom: 4px;
}
.elementor-location-header .elementor-nav-menu a::after,
.elementor-location-header .ekit-menu-nav-link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: currentColor;
opacity: .55;
transition: width .35s cubic-bezier(.2,.6,.2,1);
}
.elementor-location-header .elementor-nav-menu a:hover::after,
.elementor-location-header .ekit-menu-nav-link:hover::after { width: 100%; }
/* A leading hairline beside section eyebrows was tried here and removed: the
labels are centred on most sections, and an inline rule on one side only
pushes the text off the page axis. The tracking already does the work of
marking them as labels. */
/* Cards: hairline border, no shadow at rest, and a barely-there lift on hover.
The house pieces use 0 1px 3px rgba(55,67,43,.08) — kept at that weight. */
.pc-card,
.elementor-widget-image-box .elementor-image-box-wrapper,
.amp-card {
border: 1px solid var(--pr-cream-dark);
border-radius: 0;
background: var(--pr-white);
transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.pc-card:hover,
.amp-card:hover {
box-shadow: 0 2px 14px rgba(55, 67, 43, .07);
border-color: var(--pr-sage);
transform: translateY(-2px);
}
/* Photography: a slow, small scale on hover. Anything faster or larger reads
as a web effect rather than a print sensibility. */
/* No `will-change` here: promoting every image on the page to its own
compositor layer froze the agents directory. The transition is scoped to the
hover itself, which is all it needs. */
.elementor-widget-image:hover img,
.elementor-image-box-img:hover img { transform: scale(1.03); }
.elementor-widget-image img,
.elementor-image-box-img img { transition: transform .7s cubic-bezier(.2,.6,.2,1); }
/* Numerals in the stat band: tabular so the figures align, and tracked in
slightly — large numbers need less letter-spacing than caps, not more. */
.elementor-counter-number-wrapper,
.elementor-counter-number {
font-family: "Josefin Sans", sans-serif !important;
font-weight: 200 !important;
letter-spacing: 0.02em !important;
font-variant-numeric: tabular-nums;
}
/* Links in body copy: the hairline underline sits below the baseline instead of
cutting through the descenders. */
.elementor-widget-text-editor a,
.amp-profile-bio a {
color: var(--pr-forest);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: var(--pr-sage);
transition: text-decoration-color .25s ease;
}
.elementor-widget-text-editor a:hover { text-decoration-color: var(--pr-forest); }
/* Visible focus, in brand. Keyboard users currently get the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
outline: 1px solid var(--pr-forest);
outline-offset: 3px;
}
/* Selection in cream rather than the browser blue. */
::selection { background: var(--pr-cream); color: var(--pr-forest); }
/* Forms: hairline underline fields rather than boxed inputs. */
.elementor-field-textual {
border: 0 !important;
border-bottom: 1px solid var(--pr-cream-dark) !important;
border-radius: 0 !important;
background: transparent !important;
font-family: "Cormorant Garamond", Georgia, serif !important;
font-size: 18px !important;
padding: 12px 2px !important;
transition: border-color .3s ease;
}
.elementor-field-textual:focus { border-bottom-color: var(--pr-forest) !important; }
.elementor-field-label {
font-family: "Josefin Sans", sans-serif !important;
font-size: 11px !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: var(--pr-track-label) !important;
color: var(--pr-sage-dark) !important;
}
/* ===========================================================================
8. NAVIGATION
The export set the nav in Cormorant — a display serif, at 18px/500, in
rgba(255,255,255,.63). Three separate legibility problems: a face drawn for
headlines rather than UI, no tracking to open the counters, and white held at
63% opacity over photography. theme.css already answers this: the house nav
is Josefin Sans, uppercase, ~0.15em tracking, at full strength.
=========================================================================== */
.elementor-location-header .ekit-menu-nav-link,
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-item {
font-family: "Josefin Sans", sans-serif !important;
/* Uppercase plus tracking is wider than the sentence-case serif it replaced,
and at 13px/0.16em the five items no longer fit the space between the logo
and the phone number — "Contact" dropped to a second row. Size and tracking
both scale with the viewport so the row stays on one line down to tablet. */
font-size: clamp(10.5px, 0.82vw, 12px) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: clamp(0.08em, 0.55vw - 0.28em, 0.14em) !important;
color: #FFFFFF !important;
opacity: 1 !important;
/* Barely-there shadow: enough to hold an edge against a bright video frame,
far below the level where it reads as a drop shadow. */
text-shadow: 0 1px 2px rgba(42, 51, 31, .38);
transition: color .3s ease;
}
/* The menu's own horizontal padding was tuned for the narrower serif; trim it
so the tracking has somewhere to go. */
.elementor-location-header .elementskit-navbar-nav > li > a {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Current page keeps a standing hairline instead of a colour change. */
.elementor-location-header .ekit-menu-nav-link.ekit-menu-item-active,
.elementor-location-header .elementor-item.elementor-item-active { opacity: 1 !important; }
.elementor-location-header .ekit-menu-nav-link.ekit-menu-item-active::after,
.elementor-location-header .elementor-item.elementor-item-active::after {
width: 100% !important;
opacity: .75;
}
/* On the profile pages the header sits on white, so the shadow comes off and
the type goes Forest. */
.pr-agent-profile .elementor-location-header .ekit-menu-nav-link,
.pr-agent-profile .elementor-location-header .elementor-item {
color: #37432B !important;
text-shadow: none;
}
/* ===========================================================================
9. MOTION
Paired with wp-content/park-regency-motion.js. The .pr-motion class is set by
that script, so if the script does not run — or the visitor has asked for
reduced motion — none of these rules apply and content is simply visible.
That ordering matters: content must never depend on JS to appear.
=========================================================================== */
.pr-motion .pr-reveal {
opacity: 0;
transform: translateY(14px);
transition:
opacity .7s cubic-bezier(.22, .61, .36, 1),
transform .7s cubic-bezier(.22, .61, .36, 1);
}
.pr-motion .pr-reveal.pr-in {
opacity: 1;
transform: none;
}
/* Hero settles on load rather than on scroll — it is already in view. Slightly
slower and with no vertical travel, so it reads as the page arriving rather
than as an element sliding in. */
.pr-motion .pr-hero .elementor-widget {
opacity: 0;
transition: opacity .9s cubic-bezier(.22, .61, .36, 1);
}
.pr-motion .pr-hero.pr-in .elementor-widget { opacity: 1; }
.pr-motion .pr-hero.pr-in .elementor-widget:nth-child(2) { transition-delay: .08s; }
.pr-motion .pr-hero.pr-in .elementor-widget:nth-child(3) { transition-delay: .16s; }
/* Images resolve from a slight over-scale as they reveal — the still-photography
equivalent of a slow push in. 1.4s is deliberately longer than the fade so the
picture keeps settling after the text has landed. */
.pr-motion .pr-reveal.elementor-widget-image img,
.pr-motion .pr-reveal .elementor-image-box-img img {
transform: scale(1.045);
transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.pr-motion .pr-reveal.pr-in.elementor-widget-image img,
.pr-motion .pr-reveal.pr-in .elementor-image-box-img img { transform: scale(1); }
/* The hover scale from §7 must not fight the reveal — it only takes over once
the element has finished arriving. */
.pr-motion .pr-reveal:not(.pr-in) img { transition-property: transform; }
/* A hairline that draws across under section headings as they arrive. */
.pr-motion .pr-reveal .pr-display::after {
content: "";
display: block;
width: 0;
height: 1px;
margin-top: 18px;
/* cream-dark on white is ~1.1:1 — the rule was drawing but could not be seen.
Sage at 60% reads as a quiet mark without becoming a divider. */
background: var(--pr-sage);
opacity: .6;
transition: width 1s cubic-bezier(.22, .61, .36, 1) .15s;
}
.pr-motion .pr-reveal.pr-in .pr-display::after { width: 56px; }
/* Alignment comes from the classifier reading computed text-align, so the rule
follows the heading whatever Elementor called the class. */
.pr-motion .pr-center::after,
.pr-motion .pr-center .elementor-heading-title::after { margin-inline: auto !important; }
.pr-motion .pr-right::after { margin-left: auto !important; }
@media (prefers-reduced-motion: reduce) {
.pr-motion .pr-reveal,
.pr-motion .pr-hero .elementor-widget { opacity: 1 !important; transform: none !important; }
}
/* ---------------------------------------------------------------------------
3a. Type on a dark fill.
The label roles pin colours that only work on white. Any container detected
as dark-filled lifts every role inside it to cream, so a section can be
recoloured without leaving text unreadable behind it.
--------------------------------------------------------------------------- */
/* Dark bands normalise to Forest. The careers values section was filled with
sage-dark, which is a muddy ground and only reaches 4.12:1 against cream —
under AA for the 14px labels sitting on it. Forest is the palette's canonical
dark and takes cream at 8.84:1, so the band both reads better and clears the
bar. This also gives the page one consistent dark, rather than two greens
competing a few hundred pixels apart, which is the clash on that page. */
.elementor-kit-11 .pr-on-dark { background-color: var(--pr-forest) !important; }
/* Specificity note: the label roles are set via `.elementor-kit-11 h3.pr-label`
(0,2,1), so a plain `.pr-on-dark .pr-label` (0,2,0) loses even with
!important on both — which is exactly how the careers step numbers stayed
Forest on sage-dark. These carry the kit class so they outrank it. */
.elementor-kit-11 .pr-on-dark .pr-label,
.elementor-kit-11 .pr-on-dark .pr-label-strong,
.elementor-kit-11 .pr-on-dark .pr-display,
.elementor-kit-11 .pr-on-dark .elementor-heading-title,
.elementor-kit-11 .pr-on-dark h1, .elementor-kit-11 .pr-on-dark h2,
.elementor-kit-11 .pr-on-dark h3, .elementor-kit-11 .pr-on-dark h4,
.elementor-kit-11 .pr-on-dark h5, .elementor-kit-11 .pr-on-dark h6,
.elementor-kit-11 .pr-on-dark h3.pr-label,
.elementor-kit-11 .pr-on-dark h4.pr-label {
color: var(--pr-cream) !important;
}
.elementor-kit-11 .pr-on-dark .elementor-icon { color: var(--pr-cream) !important; }
/* ---------------------------------------------------------------------------
3b. Type over media.
The label role carries sage-dark, which is correct on white and invisible on
a scrimmed photograph. Anything inside a hero — the video hero on the home
page, the image hero on the interior pages — is set light instead. Cream
rather than pure white so it sits with the rest of the palette.
--------------------------------------------------------------------------- */
.e-con:has(> .elementor-background-video-container) .pr-label,
.e-con:has(> .elementor-background-video-container) .elementor-heading-title,
.page-content > .elementor > .e-con.e-parent:first-child .pr-label,
.page-content > .elementor > .e-con.e-parent:first-child .elementor-heading-title {
color: var(--pr-cream) !important;
}
/* The hero's icon-list ticks travel with the text they label. */
.e-con:has(> .elementor-background-video-container) .elementor-icon-list-icon svg,
.page-content > .elementor > .e-con.e-parent:first-child .elementor-icon-list-icon svg {
fill: var(--pr-cream) !important;
stroke: var(--pr-cream) !important;
}
/* ---------------------------------------------------------------------------
10. Form messages (paired with park-regency-forms.js).
Elementor's own message markup is tied to its AJAX handler, which no longer
runs, so success and failure are rendered here instead.
--------------------------------------------------------------------------- */
.pr-form-message {
margin-top: 18px;
padding: 14px 18px;
border: 1px solid var(--pr-cream-dark);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 17px;
line-height: 1.6;
color: var(--pr-forest);
background: var(--pr-cream);
}
.pr-form-message:empty { display: none; }
.pr-form-pending { opacity: .75; }
.pr-form-success { border-color: var(--pr-forest); }
.pr-form-error { border-color: #8a3b2f; color: #8a3b2f; background: #fdf6f4; }
/* ===========================================================================
11. PHONES AND TABLETS
Nothing above was written against a narrow screen, and it showed in three
places: the slide-out menu, the first screen of every page, and the header.
The menu inherited §8's nav rule — white, 10.5px — which was written for links
over the video and painted the slide-out's links white on a white panel. The
export had also set an agent's headshot (Frank-Jimenez.jpg) as the background
image of both the hamburger and the close button below 1024px, which is the
grey box with a photo corner showing through it.
The first screen was spent on decoration: the home hero centred its copy in a
full-height block, so ~250px of empty video sat above the headline and the
only button landed at ~700px, below the fold once Safari's toolbars take
their share. The interior pages opened on a 350px photo band whose title was
an 11px label. Here the copy moves up, the bands shrink, and the actions —
book, call — sit where a thumb finds them.
ElementsKit switches to the slide-out at 1024px, so the menu rules use that
breakpoint; the layout rules use Elementor's phone breakpoint, 767px.
=========================================================================== */
/* ---- Header: hamburger, and a call button beside it ---------------------- */
/* Both injected pieces belong to the slide-out layout only; the desktop header
has its own phone number and consultation button. */
@media (min-width: 1025px) {
.pr-header-call, .pr-menu-actions { display: none !important; }
}
@media (max-width: 1024px) {
.elementor-location-header button.elementskit-menu-hamburger {
background: transparent !important;
background-image: none !important;
width: 44px !important;
height: 44px;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.elementor-location-header button.elementskit-menu-hamburger > .ekit-menu-icon {
color: var(--pr-white) !important;
font-size: 24px !important;
text-shadow: 0 1px 2px rgba(42, 51, 31, .38);
}
/* Injected by park-regency-motion.js. The office line was in the desktop
header and hidden below 1024px, so a phone visitor had no way to call
without scrolling to the footer. */
.pr-header-call {
float: right;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 4px;
color: var(--pr-white);
filter: drop-shadow(0 1px 2px rgba(42, 51, 31, .38));
}
.pr-header-call svg { width: 19px; height: 19px; stroke-width: 1.75; }
/* A thin line icon alone washed out over the brighter interior photos. */
.pr-header-call::before {
content: "";
position: absolute;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, .75);
border-radius: 50%;
background: rgba(42, 51, 31, .22);
}
.pr-header-call { position: relative; }
.pr-header-call svg { position: relative; }
/* The menu column is 20% on phones (75px) and 6% on tablets (49px): too
narrow for a second 44px button, so the call icon wrapped and pushed the
header down over the hero. The menu column now takes what it needs and the
logo column gives way. Not `width: auto` on the logo column — the logo is
sized as a percentage of it, so a wider column means a bigger logo. */
.elementor-location-header .elementor-element.elementor-element-3a07578 { --flex-wrap: nowrap !important; flex-wrap: nowrap !important; align-items: center; }
.elementor-location-header .elementor-element.elementor-element-17a801c { flex-shrink: 1 !important; min-width: 0; }
.elementor-location-header .elementor-element.elementor-element-60ac7c7 { --width: auto !important; flex: 1 0 96px; }
/* Profile pages put the header on white. */
.pr-agent-profile .elementor-location-header button.elementskit-menu-hamburger > .ekit-menu-icon,
.pr-agent-profile .pr-header-call { color: var(--pr-forest) !important; text-shadow: none; filter: none; }
.pr-agent-profile .pr-header-call::before { border-color: var(--pr-cream-dark); background: transparent; }
}
/* ---- The slide-out menu --------------------------------------------------- */
@media (max-width: 1024px) {
.elementor-location-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
background: var(--pr-forest) !important;
display: flex !important;
flex-direction: column;
height: 100% !important;
height: 100dvh !important;
/* ElementsKit parks the closed panel one viewport-width off to the left,
so it must never be wider than the viewport or its edge shows. */
max-width: min(100vw, 400px) !important;
width: 100vw !important;
overflow-y: auto;
box-shadow: 0 0 40px rgba(42, 51, 31, .35);
}
/* ElementsKit slid the panel in from left:-100vw over 0.6s on an ease-in
curve: nothing moved for ~300ms, then the panel's right edge swept across,
so the cut-off ends of the buttons and address ("…SULTATION", "…3-6116")
flashed past before the whole panel arrived. It now stays in place and
fades in with a short 24px travel, so the menu arrives whole. Hidden with
visibility when closed, so no edge of it can ever show.
Two stages: the solid Forest ground covers the page first, then the menu
text fades in on top of it, so the page's words and the menu's are never
both visible through a half-transparent panel. */
.elementor-location-header .elementskit-menu-container.elementskit-menu-offcanvas-elements {
left: 0 !important;
opacity: 0;
visibility: hidden;
transform: translateX(-24px);
transition: opacity .14s ease, transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .26s !important;
}
.elementor-location-header .elementskit-menu-container.elementskit-menu-offcanvas-elements.active {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .14s ease, transform .26s cubic-bezier(.22, .61, .36, 1), visibility 0s !important;
}
.elementor-location-header .elementskit-menu-offcanvas-elements > * {
opacity: 0;
transition: opacity .1s ease;
}
.elementor-location-header .elementskit-menu-offcanvas-elements.active > * {
opacity: 1;
transition: opacity .2s ease .12s;
}
.elementor-location-header .elementskit-nav-identity-panel {
order: -1;
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 18px 20px !important;
border-bottom: 1px solid rgba(241, 235, 223, .14);
}
.elementor-location-header .elementskit-nav-identity-panel .elementskit-nav-logo { margin: 0 !important; padding: 0 !important; }
/* The menu logo is the dark artwork for white grounds; on Forest it is
knocked out to cream-white rather than shipping a second file. */
.elementor-location-header .elementskit-nav-identity-panel .elementskit-nav-logo > img {
max-width: 56px !important;
filter: brightness(0) invert(1);
opacity: .92;
}
.elementor-location-header button.elementskit-menu-close {
position: relative;
margin: 0 -10px 0 0 !important;
width: 44px !important;
height: 44px;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
font-size: 0 !important;
color: transparent !important;
}
.elementor-location-header button.elementskit-menu-close::before,
.elementor-location-header button.elementskit-menu-close::after {
content: "";
position: absolute;
left: 11px;
top: 21px;
width: 22px;
height: 1.5px;
background: var(--pr-cream);
transform: rotate(45deg);
}
.elementor-location-header button.elementskit-menu-close::after { transform: rotate(-45deg); }
.elementor-location-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav {
padding: 12px 20px 0 !important;
}
.elementor-location-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li { width: 100%; }
.elementor-location-header .elementskit-menu-offcanvas-elements .elementskit-navbar-nav > li > a {
display: flex !important;
align-items: center;
min-height: 58px;
padding: 0 !important;
font-size: 19px !important;
letter-spacing: .16em !important;
color: var(--pr-cream) !important;
text-shadow: none;
border-bottom: 1px solid rgba(241, 235, 223, .14);
}
/* The §7 hover hairline doubles the row rule here; the current page is
marked with a short leading rule instead. */
.elementor-location-header .elementskit-menu-offcanvas-elements .ekit-menu-nav-link::after { display: none !important; }
.elementor-location-header .elementskit-menu-offcanvas-elements .ekit-menu-nav-link.active,
.elementor-location-header .elementskit-menu-offcanvas-elements .current-menu-item > a { color: var(--pr-white) !important; }
.elementor-location-header .elementskit-menu-offcanvas-elements .ekit-menu-nav-link.active::before,
.elementor-location-header .elementskit-menu-offcanvas-elements .current-menu-item > a::before {
content: "";
width: 18px;
height: 1px;
margin-right: 14px;
background: var(--pr-cream);
}
/* Book and call, at the bottom of the menu where the thumb already is.
Injected by park-regency-motion.js. */
.pr-menu-actions {
margin-top: auto;
padding: 28px 20px calc(28px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
gap: 12px;
}
.pr-menu-actions a {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
font-family: "Josefin Sans", sans-serif;
font-size: 12px;
letter-spacing: var(--pr-track-label);
text-transform: uppercase;
text-decoration: none;
border: 1px solid var(--pr-cream);
}
.pr-menu-actions .pr-menu-book { background: var(--pr-cream); color: var(--pr-forest); }
.pr-menu-actions .pr-menu-call { background: transparent; color: var(--pr-cream); }
.pr-menu-actions svg { width: 15px; height: 15px; }
.pr-menu-actions address {
margin-top: 8px;
font-style: normal;
text-align: center;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 15px;
line-height: 1.5;
color: rgba(241, 235, 223, .72);
}
.elementor-location-header .elementskit-menu-overlay { background: rgba(42, 51, 31, .55) !important; }
html.pr-menu-open, html.pr-menu-open body { overflow: hidden; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
.elementor-location-header .elementskit-menu-container.elementskit-menu-offcanvas-elements { transform: none; }
}
/* ---- Header logo holds one size across phone widths ----------------------- */
@media (max-width: 767px) {
/* Elementor sizes the logo as 26% of an 80%-wide column, so it grew with the
screen: 65px on a 375px phone, 129px at 650px. The taller header then
overran the space the page leaves for it (-100px margin), leaving a white
band above the photo and pushing into the page title. Held at its
375px size, the header stays ~90px tall at every phone width. */
.elementor-location-header .elementor-element.elementor-element-7e47013 img {
width: 64px !important;
max-width: 64px !important;
}
}
/* Tablets: the header pulls the page up by 76px but is ~89px tall, so a
strip of white showed above the photo (7px on the live site before these
changes, 13px with the 44px header buttons). Pulled up by its full height. */
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-location-header .elementor-element.elementor-element-3a07578 { --margin-bottom: -92px !important; }
}
/* ---- Home hero: copy to the top, the action inside the first screen ------- */
@media (max-width: 767px) {
/* Below 768px the video no longer loads (background_play_on_mobile is off in
index.html): ten megabytes is a long wait on a phone connection for a
backdrop. The video's own first frame stands in, at 37KB. */
.elementor-background-video-container {
background: #2A331F url("uploads/2026/08/home-hero-poster.jpg") center / cover no-repeat;
}
/* The copy runs top to bottom on a phone, so the scrim is even rather than
clear through the middle. */
.elementor-background-video-container::after {
background: linear-gradient(180deg, rgba(42, 51, 31, .62) 0%, rgba(42, 51, 31, .50) 100%);
}
.elementor-element.elementor-element-e2c8985 {
--min-height: 0px !important;
min-height: 0 !important;
--padding-top: 112px !important;
--padding-bottom: 44px !important;
--justify-content: flex-start !important;
justify-content: flex-start !important;
}
.elementor-element.elementor-element-9df35c8 p {
font-size: 18px !important;
line-height: 1.55 !important;
}
/* The button comes before the three ticks rather than after them. */
.elementor-element.elementor-element-1301d27 > .elementor-element-457f07a {
order: -1;
margin-bottom: 14px;
}
.elementor-element.elementor-element-1301d27 > .elementor-element-457f07a .elementor-button { width: 100%; min-height: 52px; }
}
/* ---- Interior pages: a title band, not a photo essay ---------------------- */
@media (max-width: 767px) {
body:not(.pr-agent-profile) .page-content > .elementor > .e-con.e-parent:first-child {
--min-height: 0px !important;
min-height: 0 !important;
--padding-top: 116px !important;
--padding-bottom: 26px !important;
}
/* The page name was an 11px label on a photograph. */
body:not(.pr-agent-profile) .page-content > .elementor > .e-con.e-parent:first-child .pr-label,
body:not(.pr-agent-profile) .page-content > .elementor > .e-con.e-parent:first-child .elementor-heading-title {
font-size: 15px !important;
}
body:not(.pr-agent-profile) .page-content > .elementor > .e-con.e-parent:first-child + .e-con {
--padding-top: 36px !important;
}
}
/* ---- Buttons wrap rather than run off the screen ------------------------- */
@media (max-width: 767px) {
/* Elementor sets buttons nowrap. With label tracking, "Schedule a
confidential conversation" on Careers measured 435px on a 375px phone and
scrolled the whole page sideways. */
.elementor-button {
white-space: normal !important;
max-width: 100%;
text-align: center;
line-height: 1.5 !important;
text-wrap: balance;
/* 32px a side left "Schedule your strategy call" 7px short of one line on
a 375px phone; 20px keeps the common labels on one line. */
}
/* Same selectors as §4, which sets the padding, so this outranks it. */
.elementor-button:not([href^="tel:"]),
.elementor-button-link:not([href^="tel:"]) {
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Elementor's content wrapper is a flex row; with wrapping allowed the text
span shrank below its natural width and short labels broke onto two lines.
It keeps its width unless the button is genuinely too narrow. */
.elementor-button .elementor-button-text { flex: 0 1 auto; min-width: 0; }
.elementor-button .elementor-button-content-wrapper { justify-content: center; }
}
/* ===========================================================================
12. INTERIOR PAGE TITLES ARE THE PAGE'S
Agents, Services, Careers and Contact had no
at all: their hero title
was an
styled as a label, so search engines had no stated page title.
It is now an
(class pr-page-title, set by scripts/seo_pages.py) and
keeps exactly the label look it had: §3's display rule for h1 would
otherwise blow "AGENTS" up to 54px. Values are §3's label values; the
phone size and cream colour from §6/§11 still apply on top.
=========================================================================== */
.elementor-kit-11 h1.pr-page-title.elementor-heading-title,
h1.pr-page-title.elementor-heading-title {
font-size: clamp(11px, 0.95vw, 13px) !important;
font-weight: 400 !important;
text-transform: uppercase !important;
letter-spacing: 0.26em !important;
line-height: 2 !important;
}