/* ===================================
Beach Plaza Hotel — property brand layer
-------------------------------------------------------------------
This is the ONLY Beach Plaza-specific stylesheet. It loads on top of
the stock Crafto engine (css/style.min.css, responsive.min.css,
vendors.min.css, icon.min.css) and the stock Crafto hotel vertical
(demos/hotel-and-resort/hotel-and-resort.css) — the same engine and
the same layering Sonesta Livingstone runs on.
Everything below is either (a) a Crafto design token re-pointed at a
Beach Plaza value, or (b) a component that comes from the building
itself and has no Crafto equivalent (the fluted divider, the Art Deco
hero treatment, the concept/mock labelling, the booking bar).
Palette provenance: deterministically derived from the property's own
photography in Phase 3 (2026-09-03), re-measured for WCAG AA contrast.
Typography: Nunito (display) + Raleway (body), operator decision
2026-09-03 (Phase 4B §9), self-hosted — see README.md "Font provenance".
====================================== */
/* ---------- 1. Self-hosted brand typefaces ---------- */
@font-face {
font-family: "Nunito";
src: url("../../assets/fonts/nunito-var-latin.woff2") format("woff2");
font-weight: 200 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Raleway";
src: url("../../assets/fonts/raleway-var-latin.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ---------- 2. Crafto tokens re-pointed at Corendon Beach Plaza ---------- */
/* The four brand colours are sampled from the supplied artwork
(inbox/raw/1. Logo's/PNG/, the designer's RGB export, 2026-09-22):
dark green #1a383e beige #d9cdb6 tan #ce7b41 red #ed1c24
The tan is a display colour, not a text colour: measured against the page it sits on it
reaches 2.71:1 on cream and 3.08:1 on paper, both short of 4.5:1. So body-size text in
that hue uses --bp-terracotta-text #9d5929 - the same hue darkened until it measures
4.54:1 on cream and 5.17:1 on paper. --bp-terracotta-900 #a55c27 is a button and hover
colour, never body text. The band greens are the brand green lightened and darkened.
tools/contrast.py re-measures every one of these on each build. */
:root {
/* Crafto tokens */
--base-color: #1a383e; /* brand dark green */
--dark-gray: #151617; /* ink */
--medium-gray: #43494b; /* ink-muted, 7.6:1 on cream */
--extra-medium-gray: #d9cdb6; /* brand beige - borders */
--very-light-gray: #f0ebe2; /* cream */
--light-medium-gray: #fbfaf7; /* paper */
--alt-font: "Nunito", "Trebuchet MS", Avenir, sans-serif;
--primary-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
/* Brand colours, exactly as supplied */
--bp-green: #1a383e;
--bp-beige: #d9cdb6;
--bp-tan: #ce7b41;
--bp-red: #ed1c24;
/* Working values derived from them */
--bp-petrol: #1a383e;
--bp-petrol-800: #13282d;
--bp-petrol-600: #26515a;
--bp-terracotta: #ce7b41;
--bp-terracotta-900: #a55c27;
--bp-terracotta-text: #9d5929; /* measured 4.54:1 on cream, 5.17:1 on paper */
--bp-blush: #e7c3aa;
--bp-cream: #f0ebe2;
--bp-sand: #d9cdb6;
--bp-paper: #fbfaf7;
--bp-line: rgba(26, 56, 62, .16);
--bp-line-dark: rgba(240, 235, 226, .22);
}
/* ---------- 3. Type scale ---------- */
body {
font-size: 17px;
line-height: 30px;
letter-spacing: .2px;
color: var(--medium-gray);
background-color: var(--bp-paper);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--alt-font);
font-weight: 800;
letter-spacing: -.015em;
color: var(--dark-gray);
}
h2 { line-height: 1.16; }
h3 { line-height: 1.22; }
/* Deco kicker: the terracotta rule that opens every section */
.bp-kicker {
font-family: var(--primary-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .1625rem;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
color: var(--bp-terracotta-text);
}
.bp-kicker::before {
content: "";
width: 22px;
height: 2px;
background: var(--bp-terracotta);
}
.bg-base-color .bp-kicker,
.bp-statement .bp-kicker,
.bp-on-dark .bp-kicker { color: var(--bp-blush); }
.bg-base-color .bp-kicker::before,
.bp-statement .bp-kicker::before,
.bp-on-dark .bp-kicker::before { background: var(--bp-terracotta); }
/* ---------- 4. Cannelure: the building's fluted-column rhythm ---------- */
.bp-flute {
height: 10px;
max-width: 180px;
background: repeating-linear-gradient(90deg, var(--bp-line) 0 2px, transparent 2px 14px);
}
.bp-on-dark .bp-flute,
.bg-base-color .bp-flute {
background: repeating-linear-gradient(90deg, var(--bp-line-dark) 0 2px, transparent 2px 14px);
}
.bp-fluted {
background-image: repeating-linear-gradient(90deg, rgba(240, 235, 226, .05) 0 1px, transparent 1px 120px);
}
/* ---------- 5. Header ---------- */
/* Two states, one component.
.bp-header--over-hero sits on the hero photograph and starts transparent; the top
scrim on .bp-hero keeps it legible. Once the page scrolls past
the hero, beach-plaza.js sets .bp-scrolled on and the bar
takes a solid petrol background.
.bp-header--solid every other page: solid from the first paint, because those
pages put a photograph directly under the bar. */
.bp-header .navbar {
background-color: transparent;
transition: background-color 240ms ease, box-shadow 240ms ease;
}
.bp-header--solid .navbar,
.bp-scrolled .bp-header--over-hero .navbar {
background-color: var(--bp-petrol);
box-shadow: 0 1px 0 rgba(240, 235, 226, .12);
}
/* The supplied lockup is horizontal, 3.67:1. One asset, coloured by currentColor, so the
same file serves the header, the footer and any surface. */
.bp-header .bp-brand svg {
height: 46px;
width: auto;
color: var(--bp-cream);
display: block;
}
.bp-header .navbar-brand { padding: 14px 0; }
@media (max-width: 1199px) {
.bp-header .bp-brand svg { height: 40px; }
}
@media (max-width: 991px) {
.bp-header .bp-brand svg { height: 34px; }
}
.navbar .navbar-nav .nav-link {
font-family: var(--primary-font);
font-size: 14px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bp-cream);
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link { color: var(--bp-beige); }
.navbar .navbar-nav .nav-item.active .nav-link {
text-decoration: underline;
text-decoration-color: var(--bp-tan);
text-decoration-thickness: 2px;
text-underline-offset: 6px;
}
.bp-utility, .bp-utility a {
font-family: var(--primary-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bp-blush);
}
.bp-utility a:hover { color: var(--bp-cream); }
.bp-nowrap { white-space: nowrap; }
/* The hamburger has to be visible against the photograph too. */
.navbar .navbar-toggler-line { background-color: var(--bp-cream); }
/* ---------- 6. Buttons ---------- */
.btn {
font-family: var(--primary-font);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.btn.btn-base-color {
background-color: var(--bp-terracotta-900);
border-color: var(--bp-terracotta-900);
color: #fff; /* 4.8:1 measured */
}
.btn.btn-base-color:hover { background-color: var(--bp-petrol); border-color: var(--bp-petrol); }
.btn.btn-transparent-white-light:hover { background-color: rgba(240, 235, 226, .14); }
/* Visible focus on every interactive element (WCAG 2.4.7).
The engine sets `outline: none` on links, buttons and form fields with higher
specificity than a bare :focus-visible rule, so 21 of the 33 focusable elements on the
home page had no visible focus at all (measured 2026-09-24 with focus({focusVisible:true}),
which makes :focus-visible match the way a keyboard focus does). !important is the right
tool here: a focus ring is not a style preference that a later rule may quietly win.
Two colours, so the ring is visible on light surfaces and on petrol alike. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .nav-link:focus-visible, .navbar-toggler:focus-visible {
outline: 3px solid var(--bp-terracotta-900) !important;
outline-offset: 2px !important;
border-radius: 2px;
}
.bp-on-dark a:focus-visible, .bp-on-dark button:focus-visible,
.bp-on-dark .btn:focus-visible, .bp-on-dark .nav-link:focus-visible,
.bp-header a:focus-visible, .bp-header button:focus-visible,
footer.bp-footer a:focus-visible, .bp-booking :focus-visible,
.bp-hero-motion:focus-visible {
outline: 3px solid var(--bp-blush) !important;
outline-offset: 3px !important;
}
/* ---------- 7. Hero ---------- */
.bp-hero { position: relative; background-color: var(--bp-petrol); overflow: hidden; }
.bp-hero picture, .bp-hero > img {
display: block;
width: 100%;
height: min(78vh, 720px);
object-fit: cover;
}
.bp-hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
/* Top scrim so the transparent nav stays legible over the photograph */
.bp-hero::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 380px;
z-index: 1; pointer-events: none;
background: linear-gradient(to bottom,
rgba(18, 39, 43, .88) 0,
rgba(18, 39, 43, .80) 140px,
rgba(18, 39, 43, .42) 240px,
rgba(18, 39, 43, .11) 325px,
rgba(18, 39, 43, 0) 100%);
}
.bp-hero-copy {
position: absolute; inset: 0; z-index: 3;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: var(--bp-cream);
padding-inline: 24px; pointer-events: none;
background: radial-gradient(ellipse 60% 45% at 50% 46%, rgba(18, 39, 43, .42), rgba(18, 39, 43, 0) 72%);
}
.bp-hero-position {
font-family: var(--primary-font); font-weight: 600;
font-size: clamp(.95rem, 1.4vw, 1.15rem); letter-spacing: .04em;
text-shadow: 0 1px 16px rgba(18, 39, 43, .55);
margin-bottom: 8px;
}
.bp-hero-name {
font-family: var(--alt-font); font-weight: 800; color: var(--bp-cream);
font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: 1.02; letter-spacing: -.02em;
margin: 0 0 18px; text-shadow: 0 2px 34px rgba(18, 39, 43, .5);
}
.bp-hero-tagline {
font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500;
text-shadow: 0 1px 16px rgba(18, 39, 43, .55);
position: relative; padding-bottom: 16px; margin-bottom: 0;
}
.bp-hero-tagline::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
width: 44px; height: 2px; background: var(--bp-terracotta);
}
/* ---------- 8. Concept / MOCK labelling ---------- */
.bp-mock {
display: inline-block;
font-family: var(--primary-font);
font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--bp-petrol-800); background-color: var(--bp-sand);
padding: 3px 10px; border-radius: 2px; vertical-align: middle;
}
.btn .bp-mock {
margin-inline-start: 10px; padding: 2px 7px;
font-size: 10px; letter-spacing: .12em;
background-color: var(--bp-petrol-800); color: var(--bp-cream);
}
.bp-notice {
border-inline-start: 3px solid var(--bp-terracotta);
background-color: var(--bp-cream);
padding: 20px 24px;
font-size: 15px; line-height: 26px;
}
.bp-on-dark .bp-notice {
background-color: rgba(240, 235, 226, .08);
color: var(--bp-cream);
}
/* ---------- 9. Booking bar ---------- */
.bp-booking { background-color: var(--bp-petrol-800); }
.bp-home .bp-booking { padding-top: 34px !important; padding-bottom: 38px !important; }
.bp-booking-form {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: 14px; align-items: end;
}
.bp-booking-field label {
display: block;
font-family: var(--primary-font);
font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
color: var(--bp-blush); margin-bottom: 6px;
}
.bp-booking-field input,
.bp-booking-field select {
width: 100%; padding: 13px 14px;
font-family: var(--primary-font); font-size: 15px;
color: var(--bp-cream);
background-color: rgba(240, 235, 226, .07);
border: 1px solid rgba(240, 235, 226, .28);
border-radius: 2px;
min-height: 48px;
}
.bp-booking-field select option { color: var(--dark-gray); }
.bp-booking-result:empty { display: none; }
.bp-booking-result {
margin-top: 20px; color: var(--bp-cream);
background-color: rgba(240, 235, 226, .08);
border-inline-start: 3px solid var(--bp-terracotta);
padding: 16px 20px; font-size: 15px; line-height: 26px;
}
@media (max-width: 767px) {
.bp-booking-form { grid-template-columns: 1fr; }
.bp-booking-form .btn { width: 100%; }
}
/* ---------- 10. Room cards & fact strips ---------- */
.bp-card { background-color: var(--bp-paper); height: 100%; border: 1px solid var(--bp-line); }
.bp-card img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.bp-card-body { padding: 28px; }
.bp-facts {
list-style: none; margin: 0 0 16px; padding: 0;
display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.bp-facts li {
font-family: var(--primary-font);
font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--bp-terracotta-text);
border: 1px solid var(--bp-sand);
padding: 5px 10px; border-radius: 2px;
}
.bp-on-dark .bp-facts li { color: var(--bp-blush); border-color: rgba(240, 235, 226, .28); }
.bp-room-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bp-room-row img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.bp-room-row:nth-child(even) .bp-room-row-media { order: 2; }
@media (max-width: 991px) {
.bp-room-row { grid-template-columns: 1fr; gap: 28px; }
.bp-room-row:nth-child(even) .bp-room-row-media { order: 0; }
}
/* ---------- 11. Statement band ---------- */
.bp-statement { background-color: var(--bp-petrol-600); color: var(--bp-cream); position: relative; overflow: hidden; }
.bp-statement .bp-big {
font-family: var(--alt-font); font-weight: 800; letter-spacing: -.015em;
font-size: clamp(1.8rem, 4.6vw, 3.2rem); line-height: 1.16; max-width: 22ch;
color: var(--bp-cream);
}
.bp-statement .bp-big strong { color: var(--bp-terracotta); font-weight: 800; }
.bp-statement-mark {
position: absolute; right: -20px; bottom: -10px;
width: min(420px, 45%); opacity: .10; color: var(--bp-cream); pointer-events: none;
}
.bp-statement-mark svg { width: 100%; height: auto; }
/* ---------- 12. Section mark ----------
The old plume belonged to the previous identity and is gone with it. The new lockup's
own device is the rule that flanks BEACH PLAZA, which is already what .bp-kicker draws,
so a section opens with that rule rather than with a second symbol. */
.bp-mark { display: none; }
/* ---------- 13. On-dark bands ---------- */
.bp-on-dark { background-color: var(--bp-petrol); color: var(--bp-cream); }
.bp-on-dark h1, .bp-on-dark h2, .bp-on-dark h3, .bp-on-dark h4, .bp-on-dark h5, .bp-on-dark h6 { color: var(--bp-cream); }
.bp-on-dark p { color: var(--bp-sand); }
.bp-on-dark a:not(.btn) { color: var(--bp-blush); }
.bp-cream-band { background-color: var(--bp-cream); }
/* ---------- 14. Contact form ---------- */
.bp-form label {
display: block;
font-family: var(--primary-font);
font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--dark-gray); margin-bottom: 6px;
}
.bp-form input, .bp-form textarea, .bp-form select {
width: 100%; padding: 13px 15px; min-height: 48px;
font-family: var(--primary-font); font-size: 16px;
color: var(--dark-gray); background-color: #fff;
border: 1px solid var(--bp-sand); border-radius: 2px;
}
.bp-form textarea { min-height: 150px; }
.bp-form .bp-hp { position: absolute; left: -9999px; }
.bp-form-status[role="status"]:empty { display: none; }
.bp-form-status {
margin-top: 18px; padding: 14px 18px; border-radius: 2px;
font-size: 15px; line-height: 25px;
}
.bp-form-status.is-ok { background-color: #e7f2ec; border-inline-start: 3px solid #1f7a4d; color: #12492e; }
.bp-form-status.is-error { background-color: #fbeceb; border-inline-start: 3px solid #a12a22; color: #7a201a; }
/* ---------- 15. FAQ accordion ---------- */
.bp-faq details {
border-bottom: 1px solid var(--bp-line);
padding: 22px 0;
}
.bp-faq summary {
font-family: var(--alt-font); font-weight: 700; font-size: 1.1rem;
color: var(--dark-gray); cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 20px;
min-height: 44px;
}
.bp-faq summary::-webkit-details-marker { display: none; }
.bp-faq summary::after {
content: "+"; font-family: var(--primary-font); font-weight: 400;
font-size: 1.6rem; line-height: 1; color: var(--bp-terracotta-text); flex: none;
}
.bp-faq details[open] summary::after { content: "\2212"; }
.bp-faq .bp-faq-answer { padding-top: 14px; }
/* ---------- 16. Skip link ---------- */
.bp-skip {
position: absolute; left: -9999px; top: 0; z-index: 9999;
background-color: var(--bp-paper); color: var(--dark-gray); padding: 12px 20px;
font-weight: 700;
}
.bp-skip:focus { left: 0; }
/* ---------- 17. Footer ---------- */
footer.bp-footer { background-color: var(--bp-petrol-800); color: var(--bp-sand); }
footer.bp-footer a { color: var(--bp-blush); }
footer.bp-footer a:hover { color: #fff; }
footer.bp-footer .bp-footer-mark { width: 40px; color: var(--bp-cream); }
footer.bp-footer .nav-link { color: var(--bp-blush); }
/* ---------- 18. Motion budget ---------- */
/* Phase 3 decision, carried into this build: no parallax, no scroll-jacking. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.bp-hero-video { display: none; }
}
/* ---------- 19. Breakpoint tuning ---------- */
@media (max-width: 991px) {
.bp-hero picture, .bp-hero > img { height: min(64vh, 520px); }
.bp-statement-mark { display: none; }
}
@media (max-width: 575px) {
body { font-size: 16px; line-height: 28px; }
.bp-card-body { padding: 22px; }
.bp-hero picture, .bp-hero > img { height: min(72vh, 560px); }
}
/* ---------- 20. Page-title band (every page below the home page) ----------
Crafto's own page title relies on bg-gradient-dark-transparent, which darkens the
BOTTOM of the section only. That works when the headline sits on the bottom edge; our
pages put a kicker, a headline and an intro paragraph in the band, so the text needs
cover from the top as well. Measured on /rooms/ 2026-09-24: cream text over a bright
room photograph was unreadable. This scrim restores it. */
.bp-pagetitle { position: relative; }
.bp-pagetitle::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom, rgba(18, 39, 43, .86) 0, rgba(18, 39, 43, .52) 45%, rgba(18, 39, 43, .78) 100%),
linear-gradient(to right, rgba(18, 39, 43, .70) 0, rgba(18, 39, 43, .18) 70%);
pointer-events: none;
}
.bp-pagetitle > .container { position: relative; z-index: 2; }
.bp-pagetitle h1 { color: var(--bp-cream); }
.bp-pagetitle p { color: var(--bp-sand); }
.bp-pagetitle .bp-kicker { color: var(--bp-blush); }
/* Breadcrumb, on the dark band and off it. */
.bp-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; }
.bp-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .55; }
.bp-breadcrumb, .bp-breadcrumb a { color: var(--bp-blush); text-decoration: none; }
.bp-breadcrumb a:hover { color: var(--bp-cream); text-decoration: underline; }
.bp-breadcrumb .active { color: var(--bp-cream); }
/* ---------- 21. Hero legibility ----------
The facade photograph is bright and light-coloured, so cream type on top of it needs
more than the radial pool that was there. Measured 2026-09-24: the tagline sat at
roughly 1.6:1 against the rendered wall. This raises it well past 4.5:1. */
.bp-hero-copy {
background:
radial-gradient(ellipse 72% 56% at 50% 50%, rgba(18, 39, 43, .70), rgba(18, 39, 43, 0) 76%),
linear-gradient(to bottom, rgba(18, 39, 43, 0) 40%, rgba(18, 39, 43, .45) 100%);
}
.bp-hero-name { text-shadow: 0 2px 30px rgba(18, 39, 43, .85), 0 0 90px rgba(18, 39, 43, .6); }
.bp-hero-position, .bp-hero-tagline { text-shadow: 0 1px 14px rgba(18, 39, 43, .9); }
.bp-hero-tagline { color: var(--bp-cream); font-weight: 600; }
/* ---------- 22. Rhythm ----------
Crafto's pt-7/pb-7 are generous. Beach Plaza's bands carry less furniture than the
Crafto demos do, so the vertical measure is tightened a step to keep the page reading
as one piece rather than a series of islands. */
section.pt-7 { padding-top: 96px; }
section.pb-7 { padding-bottom: 96px; }
section.pt-6 { padding-top: 76px; }
section.pb-6 { padding-bottom: 76px; }
@media (max-width: 767px) {
section.pt-7, section.pt-6 { padding-top: 56px; }
section.pb-7, section.pb-6 { padding-bottom: 56px; }
}
/* ---------- 23. Footer lockup ---------- */
footer.bp-footer .bp-footer-lockup svg { width: min(300px, 80%); height: auto; color: var(--bp-cream); display: block; }
footer.bp-footer h2,
footer.bp-footer h3 { color: var(--bp-blush); }
footer.bp-footer p { color: var(--bp-sand); }
/* ---------- 24. Light islands inside a dark band ----------
.bp-on-dark paints the whole band, including anything light sitting on it. A room
card is a light surface, so the inherited cream headings and sand body text landed
at roughly 1.3:1 on the card's own paper background (measured 2026-09-24 on the home
page room grid, where the card copy was effectively invisible). These rules put the
card back on its own colours regardless of the band it sits in. */
.bp-on-dark .bp-card,
.bp-on-dark .bp-card p { color: var(--medium-gray); }
.bp-on-dark .bp-card h1,
.bp-on-dark .bp-card h2,
.bp-on-dark .bp-card h3,
.bp-on-dark .bp-card h4 { color: var(--dark-gray); }
.bp-on-dark .bp-card a:not(.btn) { color: var(--bp-terracotta-text); }
.bp-on-dark .bp-card .bp-facts li {
color: var(--bp-terracotta-text);
border-color: var(--bp-sand);
}
.bp-on-dark .bp-card .bp-kicker { color: var(--bp-terracotta-text); }
/* The same guard for the notice block and any other light surface we drop on petrol. */
.bp-on-dark .bp-notice.bp-notice--light,
.bp-on-dark .bp-notice.bp-notice--light p { color: var(--medium-gray); }
/* ---------- 25. Cannelure weight ----------
At 2px on 14px the fluting read as dotted noise rather than as the building's fluted
columns. Wider staves, tighter pitch and a touch more contrast make it read as the
architectural detail it is taken from. */
.bp-flute {
height: 12px;
max-width: 200px;
background: repeating-linear-gradient(90deg,
rgba(27, 55, 61, .26) 0 2px, transparent 2px 9px);
}
.bp-on-dark .bp-flute,
.bg-base-color .bp-flute {
background: repeating-linear-gradient(90deg,
rgba(240, 235, 226, .32) 0 2px, transparent 2px 9px);
}
/* ---------- 26. Footer notice ----------
.bp-notice is a light block by default. In the footer it sits on petrol, so it needs the
dark variant; measured 2026-09-24 it was rendering sand-on-cream at 1.32:1. */
footer.bp-footer .bp-notice {
background-color: rgba(240, 235, 226, .09);
color: var(--bp-cream);
}
footer.bp-footer .bp-notice p { color: var(--bp-cream); }
/* ---------- 27. Hero scrim, measured ----------
The facade is white and sunlit, so the hero copy needs real cover, not a hint of one.
Measured with tools/scrim.py against the BRIGHTEST pixel behind each line (2026-09-24):
before after AA floor
kicker desktop 4.87 6.16 4.5
wordmark desktop 3.44 4.71 3.0 (large type)
tagline desktop 5.95 7.32 4.5
kicker mobile 3.79 <-- failed 7.36 4.5
wordmark mobile (was folded in) 7.56 3.0 (large type)
tagline mobile 2.03 <-- failed 5.70 4.5
The mobile crop puts the brightest part of the wall directly behind the tagline, which
is why the small viewport needed more than the large one. */
.bp-hero-copy {
background:
radial-gradient(ellipse 78% 62% at 50% 50%, rgba(18, 39, 43, .82), rgba(18, 39, 43, 0) 78%),
linear-gradient(to bottom, rgba(18, 39, 43, 0) 30%, rgba(18, 39, 43, .55) 100%);
}
@media (max-width: 991px) {
.bp-hero-copy {
background:
radial-gradient(ellipse 120% 52% at 50% 52%, rgba(18, 39, 43, .88), rgba(18, 39, 43, .10) 92%),
linear-gradient(to bottom, rgba(18, 39, 43, .30) 0, rgba(18, 39, 43, .12) 35%, rgba(18, 39, 43, .62) 100%);
}
}
/* ---------- 28. Hero motion control ----------
WCAG 2.2.2: the hero video loops and runs longer than five seconds, so there has to be
a way to stop it that does not depend on an operating-system preference. The control is
only inserted when the video actually plays, so it never appears on a still hero. */
.bp-hero-motion {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 4;
font-family: var(--primary-font);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bp-cream);
background-color: rgba(18, 39, 43, .72);
border: 1px solid rgba(240, 235, 226, .45);
border-radius: 2px;
padding: 10px 16px;
min-height: 44px;
cursor: pointer;
}
.bp-hero-motion:hover { background-color: rgba(18, 39, 43, .9); }
@media (max-width: 767px) {
.bp-hero-motion { right: 12px; bottom: 12px; }
}
/* ---------- 29. Mobile menu button ----------
The engine's toggler renders 22x14 CSS px. That is below the WCAG 2.2 SC 2.5.8 floor of
24x24 and it is the primary navigation control on a phone, so it is brought up to this
project's own 44x44 design goal rather than just over the line. Measured 2026-09-24. */
@media (max-width: 991px) {
/* Only below the collapse breakpoint. Setting display on .navbar-toggler
unconditionally overrode the engine's own display:none and put a hamburger next to
the full desktop menu. */
.navbar .navbar-toggler {
min-width: 44px;
min-height: 44px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 10px;
}
}
.navbar .navbar-toggler .navbar-toggler-line {
width: 22px;
height: 2px;
margin: 0;
}
/* Footer and utility links are standalone targets, not links inside a sentence, so the
inline exception in SC 2.5.8 does not cover them. Their hit area is padded to 24px
without changing how they look. */
footer.bp-footer .footer-navbar .nav-link,
.bp-utility a {
display: inline-block;
padding-block: 4px;
min-height: 24px;
}
/* ---------- 30. Focus on form fields ----------
An outline alone is not dependable on and