/* Site-specific layout for the marketing site. Tokens only — see acre-tokens.css.
Populated starting Task 2 (shell), then extended per content task.
Note: --space-5 does not exist in acre-tokens.css (the scale skips from 4 to
6) — every place the shell brief called for it below uses --space-4 instead. */
/* Accessibility: color-scheme belongs on :root/, not a descendant div. acre-tokens.css
declares it on .acre-app, which only ever affected UI painted inside that div (scrollbars
adjacent to it, form controls within it) — the actual page canvas (before first paint) and the
OUTER scrollbar track are governed by the real root element's own color-scheme, which was never
told about dark mode, so dark mode showed a white flash and light scrollbars regardless of the
.acre-app declaration. :has() (broadly supported) reads the existing data-acre-theme marker
rather than duplicating the theme-detection logic anywhere new. */
:root { color-scheme: light; }
:root:has(.acre-app[data-acre-theme="dark"]) { color-scheme: dark; }
/* acre-tokens.css sets --text-body to 0.9375rem (15px), which is right for the PMS — a dense
operator tool read all day at a desk. This site is read once, by a stranger, often over 50 and
often in a park office in daylight. 1rem there. Overridden here rather than in the token sheet
because that file is linked in from Acre.PMS.UI and shared verbatim with the PMS; editing it
would reflow every operator screen. Only this site loads marketing.css, so the override cannot
reach them. */
:root { --text-body: 1rem; }
.acre-marketing { display: flex; flex-direction: column; min-height: 100vh; }
.acre-marketing__main { flex: 1; }
.acre-header {
display: flex; align-items: center; gap: var(--space-6);
padding: var(--space-4) var(--space-6);
background: var(--background); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 10;
}
.acre-header__brand {
display: inline-flex; align-items: center; gap: var(--space-2);
color: var(--foreground); text-decoration: none;
}
.acre-header__wordmark { font-family: var(--font-heading); font-weight: 700; }
.acre-header__nav { display: flex; gap: var(--space-4); margin-left: auto; }
.acre-header__nav a { color: var(--foreground); text-decoration: none; font-weight: 500; }
.acre-header__nav a:hover { color: var(--primary); }
.acre-header__actions { display: flex; align-items: center; gap: var(--space-3); }
.acre-marketing-logo svg { display: block; width: var(--avatar-sm); height: var(--avatar-sm); }
.acre-theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: var(--control-h-md); height: var(--control-h-md);
border-radius: var(--radius-control); border: 1px solid var(--border);
background: transparent; color: var(--foreground); cursor: pointer;
transition: background-color var(--duration-press) var(--ease-out);
}
.acre-theme-toggle:hover { background: var(--accent); }
.acre-theme-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.acre-btn {
display: inline-flex; align-items: center; justify-content: center;
box-sizing: border-box;
border-radius: var(--radius-field); padding: var(--space-3) var(--space-4);
font-family: var(--font-body); font-weight: 600; text-decoration: none;
transition: transform var(--duration-press) var(--ease-out),
box-shadow var(--duration-press) var(--ease-out);
}
.acre-btn:active { transform: scale(var(--scale-press)); }
.acre-btn--primary { background: var(--primary); color: var(--primary-foreground); }
.acre-btn--secondary { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.acre-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.acre-cta { display: flex; align-items: center; gap: var(--space-3); }
.acre-footer {
display: flex; flex-direction: column; gap: var(--space-4);
padding: var(--space-8) var(--space-6);
background: var(--card); border-top: 1px solid var(--border);
color: var(--muted-foreground);
}
.acre-footer__brand { display: flex; align-items: center; gap: var(--space-2); }
.acre-footer__attribution { margin: 0; font-weight: 600; color: var(--foreground); }
.acre-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.acre-footer__links a { color: var(--muted-foreground); text-decoration: none; }
.acre-footer__links a:hover { color: var(--primary); }
.acre-footer__guests { margin: 0; font-size: var(--text-sm); }
.acre-footer__guests a { color: var(--link-fg); }
.acre-footer__copy { margin: 0; font-size: var(--text-sm); }
@media (max-width: 40rem) {
.acre-header__nav { display: none; }
/* At 320px the header's brand + theme toggle + two full-size buttons do not fit one row and
push the header wider than the viewport (originally found by extending
ResrvAI.E2E.Marketing's horizontal-overflow theory down to 320px). The buttons are the part
that goes: the footer carries the same destinations, and on the two legal pages this header
still serves, a header CTA was never the point. The previous rule here matched
`.acre-header__actions .acre-cta`, the wrapper CtaPair rendered - MarketingHeader now emits
the links directly, so the selector has to match the links themselves or it silently stops
applying, which is exactly how the overflow came back.
The fixed .acre-mobile-cta bar that used to keep this reachable is gone with self-serve
signup, and with it --mobile-cta-bar-h and the two clearances sized from it (this footer's
padding-bottom, the consent banner's bottom offset) - both reserved ~73px for an element
that no longer renders. */
.acre-header__actions .acre-btn { display: none; }
}
/* ---- Image slots ----
A slot with no file still renders the gradient below: the permanent look of an unfilled slot,
not a loading state (see wwwroot/img/IMAGE-MANIFEST.md). It deliberately reuses only the raw
--acre-green-* tokens (no dark-mode override, same as the sidebar) so it looks identical in
both themes on purpose, instead of glaring the way a pale brand token would on a large area.
The rules below must reach the ![]()
through — a direct-child `> img` selector
stops matching the moment the .webp source is wrapped in one, and the photo then renders at
intrinsic size instead of covering the slot. */
[data-image-slot] {
border-radius: var(--radius-card);
min-height: 20rem;
overflow: hidden;
position: relative;
box-shadow: var(--shadow-card);
background:
radial-gradient(circle at 82% 18%, var(--acre-green-light), transparent 55%),
linear-gradient(155deg, var(--acre-green-deep) 0%, var(--acre-green-mid) 55%, var(--acre-green-primary) 100%);
}
[data-image-slot] > picture { display: block; width: 100%; height: 100%; }
[data-image-slot] img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ---- Hero ---- */
.acre-hero {
display: flex; align-items: center; gap: var(--space-8);
padding: var(--space-8) var(--space-6);
}
.acre-hero__copy { flex: 1 1 20rem; display: flex; flex-direction: column; gap: var(--space-4); }
.acre-hero__headline { font-size: var(--text-display); }
.acre-hero__sub { margin: 0; font-size: var(--text-lg); color: var(--muted-foreground); }
.acre-hero__reassure { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.acre-hero__media { flex: 1 1 20rem; min-height: 20rem; }
/* ---- Section shell ---- */
.acre-section {
display: flex; flex-direction: column; gap: var(--space-6);
padding: var(--space-8) var(--space-6);
}
.acre-section--feature {
background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.acre-section--feature [data-image-slot] { min-height: 16rem; }
/* .acre-section is full-bleed, which is right for the card grids but leaves the pricing
explanation running to ~120 characters a line while the cards above it are comfortably
constrained. Same measure as .acre-prose. */
.acre-section--measured { max-width: 40rem; margin: 0 auto; }
/* ---- Home AI preview (I16 / spec §8) ----
.acre-chat-msg* itself is acre-tokens.css's own component (shared with the PMS AiChat panel) —
this just gives its two bubbles a card to sit inside, sized to match the [data-image-slot]
min-height it visually replaces in this section. --card here (not the raw --acre-green-pale)
because it carries a dark-mode override; a plain white/near-white card reads correctly in both
themes against .acre-section--feature's own --card background one level up. */
.acre-home-ai-preview {
display: flex; flex-direction: column; gap: var(--space-3);
min-height: 16rem; padding: var(--space-6);
background: var(--background); border: 1px solid var(--border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
/* ---- Home pricing teaser (I16) ---- */
.acre-pricing-teaser {
display: flex; flex-wrap: wrap; gap: var(--space-4);
}
.acre-pricing-teaser__tier {
flex: 1 1 10rem;
display: flex; flex-direction: column; gap: var(--space-1);
padding: var(--space-4); text-align: center;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.acre-pricing-teaser__name { margin: 0; font-weight: 600; color: var(--foreground); }
.acre-pricing-teaser__price {
margin: 0; font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 700;
color: var(--primary);
display: flex; flex-direction: column;
}
.acre-pricing-teaser__price span {
font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400;
color: var(--muted-foreground);
}
.acre-pricing-teaser__link { margin: 0; text-align: center; }
.acre-pricing-teaser__link a { color: var(--primary); font-weight: 600; }
.acre-section-heading {
display: flex; flex-direction: column; gap: var(--space-2);
max-width: 40rem; margin: 0 auto; text-align: center;
}
.acre-section-heading__eyebrow {
margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--primary);
text-transform: uppercase;
}
.acre-section-heading__title { margin: 0; }
.acre-section-heading__lede { margin: 0; font-size: var(--text-lg); color: var(--muted-foreground); }
/* ---- Cards ---- */
.acre-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-6);
}
.acre-card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
padding: var(--space-card); box-shadow: var(--shadow-card);
transition: box-shadow var(--duration-entrance) var(--ease-out),
border-color var(--duration-entrance) var(--ease-out);
}
.acre-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-card-hover); }
.acre-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-h3); }
.acre-card p { margin: 0; color: var(--muted-foreground); }
/* ---- Closing CTA band ----
Reuses the confirmed-status bg/fg pair — already tuned for contrast in both
themes — as a highlight surface rather than inventing a new accent role. */
.acre-band {
display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
padding: var(--space-8) var(--space-6); text-align: center;
background: var(--status-confirmed-bg); color: var(--status-confirmed-fg);
}
.acre-band h2, .acre-band p { color: var(--status-confirmed-fg); margin: 0; }
/* .acre-btn--secondary's generic --border is ~1.16:1 against this band's pale-green background
(WCAG 1.4.11 non-text contrast needs 3:1) — effectively no visible edge on the "Log in" CTA
here. --status-confirmed-fg is already the token this section's own text uses against this
exact background (see the comment above), so it's a guaranteed-sufficient existing token
rather than a new one, scoped to this band only — the secondary button's border elsewhere
(header, mobile CTA bar, contact page) sits on --background/--card, where the generic --border
already has enough contrast. */
.acre-band .acre-btn--secondary { border-color: var(--status-confirmed-fg); }
@media (max-width: 40rem) {
.acre-hero { flex-direction: column; align-items: stretch; }
.acre-hero__media { min-height: 12rem; }
}
/* ---- Feature list (Features page) ----
A border-bottom + :last-of-type("last feature") pair does not work here: the
DOM is six .acre-feature s followed by an .acre-band , and
:last-of-type matches by tag name across ALL sibling s, not by
class — so it would match the band, not the last feature block, and never
fire on any .acre-feature. Express the boundary as a separator between
items instead, which sidesteps the tag-vs-class mismatch entirely. */
.acre-feature {
display: flex; flex-direction: column; gap: var(--space-3);
max-width: 64rem; margin: 0 auto;
padding: var(--space-6) var(--space-6);
}
.acre-feature + .acre-feature { border-top: 1px solid var(--border); }
.acre-feature h2 { margin: 0; font-size: var(--text-h2); }
.acre-feature p { margin: 0; font-size: var(--text-body); color: var(--muted-foreground); }
/* The container widened to 64rem to seat a photo beside the copy; the copy itself keeps the
original 40rem measure so every heading shares one left edge whether its section has a
photo or not, and no paragraph gets a longer line than it had before. */
.acre-feature__copy {
display: flex; flex-direction: column; gap: var(--space-3);
max-width: 40rem;
}
.acre-feature--media { flex-direction: row; align-items: center; gap: var(--space-8); }
.acre-feature--media .acre-feature__copy { flex: 1 1 18rem; }
.acre-feature--flip { flex-direction: row-reverse; }
.acre-feature__media { flex: 1 1 18rem; min-height: 16rem; }
/* Collapses at 52rem, not the 40rem the hero uses: these rows carry a 40rem copy column plus an
18rem photo, so they run out of room well before the single-column blocks do. Both the plain and
the flipped row become `column` (never column-reverse) so the heading always precedes its photo
on a phone regardless of which side the photo takes on desktop. */
@media (max-width: 52rem) {
.acre-feature--media,
.acre-feature--flip { flex-direction: column; align-items: stretch; }
.acre-feature__media { min-height: 12rem; }
}
/* ---- Pricing tiers ----
The featured tier is set apart by border/shadow weight and a small status-
tinted flag chip, not a full-card brand-pale background — a large raw
--acre-green-pale surface has no dark-mode override and would glare. */
.acre-tiers {
display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-6); padding: var(--space-8) var(--space-6);
}
.acre-tier {
display: flex; flex-direction: column; gap: var(--space-3);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card);
padding: var(--space-card); box-shadow: var(--shadow-card);
}
.acre-tier--featured { border-color: var(--border-card-hover); box-shadow: var(--shadow-card-hover); }
.acre-tier h2 { margin: 0; font-size: var(--text-h3); }
.acre-tier__flag {
align-self: flex-start; margin: 0; padding: var(--space-1) var(--space-3);
border-radius: var(--radius-badge); font-size: var(--text-sm); font-weight: 600;
background: var(--status-confirmed-bg); color: var(--status-confirmed-fg);
}
/* Only the featured tier carries a flag, so the other two used to pull their heading and price up
by one chip's height and the three prices sat at visibly different heights. The unflagged cards
render the same element with a hard space in it, hidden — reserving the row from the chip's own
class means the two can never drift apart the way a hand-computed height would. */
.acre-tier__flag--reserved { visibility: hidden; }
.acre-tier__price { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.acre-tier__amount { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 700; }
.acre-tier__period { font-size: var(--text-sm); color: var(--muted-foreground); }
.acre-tier__who { margin: 0; color: var(--muted-foreground); }
.acre-tier ul {
margin: 0; padding-left: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-2);
font-size: var(--text-body);
}
.acre-tier .acre-btn { margin-top: auto; align-self: flex-start; }
/* ---- Page header photo (About) ----
Deliberately wider than .acre-prose's 40rem reading measure: this is a header band, not a figure
inside the prose. Matches .acre-feature's 64rem + --space-6 gutter so the photo's edges line up
with the widest content elsewhere on the site. */
.acre-page-media { max-width: 64rem; margin: 0 auto; padding: var(--space-6); }
.acre-page-media [data-image-slot] { min-height: 18rem; }
/* ---- Prose blocks (About, Privacy, Terms) ---- */
.acre-prose {
display: flex; flex-direction: column; gap: var(--space-4);
max-width: 40rem; margin: 0 auto; padding: var(--space-8) var(--space-6);
}
.acre-prose h2 { margin: var(--space-4) 0 0; font-size: var(--text-h3); }
.acre-prose p { margin: 0; font-size: var(--text-body); color: var(--muted-foreground); }
.acre-prose ul {
margin: 0; padding-left: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-2);
font-size: var(--text-body); color: var(--muted-foreground);
}
.acre-prose a { color: var(--primary); }
/* ---- Review notice box (Privacy, Terms) ----
Uses --muted, which carries a dark override, rather than the raw amber
brand tokens — this box is informational, not a warning-severity alert. */
.acre-notice {
max-width: 40rem; margin: var(--space-6) auto 0; padding: var(--space-4) var(--space-6);
background: var(--muted); color: var(--muted-foreground);
border: 1px solid var(--border); border-radius: var(--radius-card);
}
.acre-notice p { margin: 0; }
.acre-notice p + p { margin-top: var(--space-2); }
.acre-notice strong { color: var(--foreground); }
/* ---- Contact result states ----
success/warn/error reuse the status bg/fg pairs, which carry dark-mode overrides —
the raw brand tokens (--acre-green-pale etc.) do not and would glare as a large surface. */
.acre-notice--success {
background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); border-color: transparent;
}
/* --status-pending-fg on --status-pending-bg measures 2.86:1 in light theme — fails WCAG AA
(4.5:1) for this box's body copy (the contact form's delayed/invalid/throttled paragraphs).
No other existing amber-toned token is darker (--kpi-amber-fg is the same #D97706), so this
uses --foreground instead — already the accessible-by-construction pair for body text against
any surface in both themes (light theme's near-black on the pale amber background comfortably
clears AA; dark theme's near-white on the dark amber background does too). The background
alone still carries the amber warning hue; color was never the sole signal here — the copy
itself always states the situation in words. */
.acre-notice--warn {
background: var(--status-pending-bg); color: var(--foreground); border-color: transparent;
}
.acre-notice--error {
background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); border-color: transparent;
}
.acre-notice--success strong, .acre-notice--warn strong, .acre-notice--error strong { color: inherit; }
.acre-notice--success a, .acre-notice--warn a, .acre-notice--error a { color: inherit; text-decoration: underline; }
.acre-notice__contact {
font-size: var(--text-h3); font-weight: 700;
}
/* ---- Cookie consent banner ----
--card/--card-foreground carry dark-mode overrides (unlike the raw brand tokens), so the
surface stays legible in both themes. It used to sit above the fixed mobile CTA bar via a
--mobile-cta-bar-h offset; that bar is gone with self-serve signup, so on mobile the banner
now sits at the bottom gutter like it does on desktop. */
.acre-consent-banner {
position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
z-index: var(--z-overlay);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--space-4); max-width: 48rem; margin: 0 auto;
padding: var(--space-4) var(--space-6);
background: var(--card); color: var(--card-foreground);
border: 1px solid var(--border); border-radius: var(--radius-card);
box-shadow: var(--shadow-card-hover);
}
.acre-consent-banner p { margin: 0; font-size: var(--text-sm); color: var(--card-foreground); }
.acre-consent-banner a { color: var(--link-fg); }
.acre-consent-banner__actions { display: flex; gap: var(--space-3); flex-shrink: 0; }
@media (max-width: 40rem) {
.acre-consent-banner {
left: var(--space-3); right: var(--space-3);
bottom: var(--space-3);
flex-direction: column; align-items: stretch;
}
.acre-consent-banner__actions { width: 100%; }
.acre-consent-banner__actions .acre-btn { flex: 1; min-height: var(--control-h-lg); }
}
/* ---- Contact form ---- */
.acre-form {
display: flex; flex-direction: column; gap: var(--space-4);
max-width: 40rem; margin: var(--space-6) auto 0; padding: 0 var(--space-6);
}
.acre-field { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 500; }
.acre-field input, .acre-field textarea {
font-family: var(--font-body); font-size: var(--text-body); color: var(--foreground);
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-field);
padding: var(--space-3); min-height: var(--control-h-field);
}
.acre-field textarea { min-height: 8rem; resize: vertical; }
.acre-field input:focus-visible, .acre-field textarea:focus-visible {
outline: 2px solid var(--ring); outline-offset: 2px;
}
/* Off-screen, not display:none — some bots skip fields hidden that way but still fill in
one merely moved out of the viewport. Kept out of the tab order via tabindex="-1" on the input. */
.acre-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.acre-form__alt {
max-width: 40rem; margin: var(--space-4) auto var(--space-8); padding: 0 var(--space-6);
color: var(--muted-foreground);
}
.acre-form__alt a { color: var(--primary); }