/* ===========================================================================
BUB R3 — homepage redesign
---------------------------------------------------------------------------
Loaded only by the page that needs it (index.html {% block head %}), and
every class is r3- prefixed, so nothing here can collide with the existing
Bootstrap-based styles in custom.css. That also makes this trivially
revertible: drop the and the page falls back.
Colours were sampled from the R3 PDF rather than eyeballed — see the
comments against each token.
=========================================================================== */
:root {
--r3-navy: #182C60; /* nav, headlines, footer — the dominant colour */
--r3-navy-deep: #14254F; /* footer band, slightly deeper than the nav */
--r3-lime: #AEFB3B; /* CTA buttons. NOTE: the logo SVG carries its
own #BFF960 — a small inconsistency in the
source files, flagged to the creative team. */
--r3-magenta: #C824CC; /* eyebrow tags, feather rating marks */
--r3-purple: #B84BE3; /* "Rate a Course" card border */
--r3-blue: #3172F6; /* "Find a Course" card border */
--r3-blue-soft: #A0BEFA; /* its pill fill */
--r3-green: #00CB1C; /* "Birdie Quiz" card border */
--r3-lime-soft: #D3FA93; /* its pill fill */
--r3-pink-soft: #F7D9F7; /* "Rate a Course" pill fill */
--r3-teal: #00C0A4; /* "would recommend" badge */
--r3-cream: #FBF8F3; /* the warm section ground */
--r3-table-head: #DEEAF6; /* leaderboard header strip */
--r3-ink: #1F2937;
--r3-ink-soft: #5B6478;
/* Georgia is the agreed stand-in until New Spirit is licensed — the creative
team's call. It ships on macOS, iOS and Windows, but NOT on Android, so
the chain matters: Android falls through to Noto Serif, which is the
closest thing there to Georgia's proportions. Swapping in New Spirit later
is a change to this one line plus a @font-face. */
--r3-serif: Georgia, "Iowan Old Style", "Noto Serif", "Times New Roman", serif;
--r3-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
--r3-shell: 1240px;
}
/* custom.css paints the whole body with a navy→teal gradient from the old
design. R3 sections carry their own grounds, so on a redesigned page that
gradient only shows through below the last section as a stray teal block.
SCOPED to .r3-page, not bare `body` — deliberately. The pages that haven't
been redesigned yet render WHITE TEXT on that gradient, so removing it
globally makes /cookies, /terms and /privacy unreadable. Pages opt in by
setting {% block body_class %}r3-page{% endblock %}. */
body.r3-page { background: #fff; }
/* ── Shell ────────────────────────────────────────────────────────────── */
.r3 { font-family: var(--r3-sans); color: var(--r3-ink); }
.r3 *, .r3 *::before, .r3 *::after { box-sizing: border-box; }
.r3-wrap { max-width: var(--r3-shell); margin: 0 auto; padding: 0 24px; }
.r3 h1, .r3 h2, .r3 h3 {
font-family: var(--r3-serif);
color: var(--r3-navy);
margin: 0;
text-wrap: balance;
}
/* Eyebrow — a hard-edged magenta tag, deliberately NOT a rounded pill */
.r3-eyebrow {
display: inline-block;
background: var(--r3-magenta);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 6px 14px;
}
.r3-eyebrow--plain { /* text-only variant on cream sections */
background: none;
color: var(--r3-magenta);
padding: 0;
}
.r3-eyebrow--soft { /* Featured-course tag: light pill, magenta text */
background: #FCE6FF;
color: var(--r3-purple);
border-radius: 999px;
padding: 7px 15px;
}
.r3-eyebrow--outline { /* outlined variant on the navy section */
background: none;
color: var(--r3-magenta);
border: 1px solid var(--r3-magenta);
}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.r3-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--r3-lime);
color: var(--r3-navy);
font-weight: 600;
font-size: 1rem;
padding: 15px 30px;
border: none;
border-radius: 999px;
text-decoration: none;
transition: filter 0.15s, transform 0.15s;
}
.r3-btn:hover, .r3-btn:focus-visible {
filter: brightness(0.94);
color: var(--r3-navy);
transform: translateY(-1px);
}
.r3-btn--sm { padding: 11px 22px; font-size: 0.9rem; }
/* The CTA carries the hummingbird from the comp, not a feather. Masking the
existing birdie SVG rather than inlining its (very long) path means we reuse
the shipped asset and it takes the button's navy from currentColor — the
file itself is cyan. */
.r3-bird-icon {
width: 27px;
height: 27px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url('/static/images/birdie-hummingbird-nobackground.svg') center / contain no-repeat;
mask: url('/static/images/birdie-hummingbird-nobackground.svg') center / contain no-repeat;
}
.r3-card-tag .r3-bird-icon { width: 14px; height: 14px; }
/* ── Hero ─────────────────────────────────────────────────────────────── */
.r3-hero { position: relative; }
.r3-hero-media { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 861px) {
/* Desktop: copy sits over the photo, left-aligned */
.r3-hero { min-height: 720px; display: grid; }
/* The grid child is , NOT the inside it — targeting the image
alone left the copy stacked above the photo instead of over it. */
.r3-hero > picture {
grid-area: 1 / 1;
display: block;
height: 100%;
min-height: 720px;
}
.r3-hero-media { height: 100%; min-height: 720px; }
.r3-hero-inner {
grid-area: 1 / 1;
align-self: center;
width: 100%;
}
.r3-hero-copy { max-width: 730px; } /* Georgia is wider than the previous face */
.r3-hero h1, .r3-hero p, .r3-hero .r3-hero-note { color: #fff; }
.r3-hero h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
}
@media (max-width: 860px) {
/* Mobile: the photo becomes a band and the copy sits below it. This is the
layout in the R3 mobile comp, not a desktop reflow.
The copy block is WHITE, not cream — measured off the mobile comp, which
runs navy nav / photo / white (y244-545) / cream (y546+). The cream starts
at "What we do", directly under the "6 questions" line. Putting this block
on cream too erases that separation, which is the whole reason the section
below it reads as a distinct band. Desktop has no white band at all: there
the copy overlays the photo and cream follows straight after. */
.r3-hero-media { height: 230px; }
.r3-hero-inner { background: #fff; padding: 30px 0 38px; }
.r3-hero h1, .r3-hero p, .r3-hero .r3-hero-note { color: var(--r3-navy); }
.r3-hero p { color: var(--r3-ink-soft); }
}
.r3-hero h1 {
font-style: italic;
font-weight: 700;
font-size: clamp(2.2rem, 5.2vw, 3.9rem);
line-height: 1.08;
letter-spacing: -0.015em;
margin: 18px 0 0;
}
.r3-hero p {
font-size: clamp(1rem, 1.6vw, 1.12rem);
line-height: 1.6;
margin: 20px 0 0;
max-width: 34em;
}
.r3-hero .r3-btn { margin-top: 28px; }
.r3-hero-note { font-size: 0.88rem; margin: 14px 0 0; opacity: 0.9; }
/* ── Section scaffolding ──────────────────────────────────────────────── */
.r3-section { padding: 76px 0; }
.r3-section--cream { background: var(--r3-cream); }
.r3-section--navy { background: var(--r3-navy); }
/* ⚠️ .r3-board is in this list because it is a section too, just not named
.r3-section. Left out, its h2 fell through to BOOTSTRAP's heading defaults —
32px at font-weight 500. Georgia has only 400 and 700, so 500 does not
resolve to a real face and the heading rendered at regular weight, which is
why "Top-rated by women golfers" washed out against the fairway photo behind
it. Any new full-width band needs to be added here, or it inherits Bootstrap
rather than the brief. */
.r3-section h2,
.r3-results h2,
.r3-board h2 {
font-size: clamp(1.7rem, 3.2vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
margin: 14px 0 0;
}
.r3-section-head { margin-bottom: 44px; }
/* ── "What we do" cards ───────────────────────────────────────────────── */
.r3-cards {
display: grid;
gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.r3-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1.5px solid var(--r3-card-accent, var(--r3-blue));
padding: 26px 26px 22px;
min-height: 270px;
}
/* ── Card corners: asymmetric on purpose ──
These were a uniform 26px, which is what the team flagged. In the comp each
card carries THREE different radii — one 80px corner, one 64px corner on the
SAME diagonal, and 24px on the other two — and that long diagonal alternates
from card to card (rate ↘, find ↙, quiz ↘). The irregularity is the effect
the brief is after; one uniform radius reads as a plain rounded box.
Measured off BUB R3.pdf, not eyeballed. The artboards are 1440pt (p1) and
390pt (p2), so 1pt == 1 CSS px, and the border strokes sampled back as the
exact palette tokens (#B84BE3 / #78A2F7 / #58DC69), which confirms the scale.
Mobile uses the SAME absolute radii as desktop — these are fixed px and must
not be scaled per breakpoint. scratchpad/radii.js re-measures.
⚠️ Measure a radius on the 45° DIAGONAL, never by finding where the straight
top edge starts. Near its apex the arc is almost flat, so within a sampling
band of depth d it has already run sqrt(2*r*d) sideways — that under-reads,
and by an amount that changes with r AND with render resolution, so a comp
at 200dpi silently disagrees with a screenshot at 288dpi. It cost a full
wrong pass here (read 16/52/66, actually 24/64/80). The 45° point sits at
r(1 - 1/√2) in from the corner, which is resolution-independent.
Shorthand order is top-left, top-right, bottom-right, bottom-left. */
.r3-card--rate {
--r3-card-accent: var(--r3-purple);
border-radius: 64px 24px 80px 24px;
}
.r3-card--find {
--r3-card-accent: var(--r3-blue);
border-radius: 24px 80px 24px 64px;
}
.r3-card--quiz {
--r3-card-accent: var(--r3-green);
border-radius: 80px 24px 64px 24px;
}
.r3-card-tag {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
background: var(--r3-card-tag-bg, var(--r3-blue-soft));
color: var(--r3-navy);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 7px;
}
.r3-card--rate .r3-card-tag { background: var(--r3-pink-soft); color: var(--r3-magenta); }
.r3-card--quiz .r3-card-tag { background: var(--r3-lime-soft); }
.r3-card-tag svg { width: 14px; height: 14px; }
.r3-card-tag .r3-tag-feather {
display: inline-block;
width: 15px;
height: 15px;
background-color: currentColor;
-webkit-mask: url('/static/images/feather-r3.png') center / contain no-repeat;
mask: url('/static/images/feather-r3.png') center / contain no-repeat;
}
.r3-card h3 { font-size: 1.5rem; font-weight: 700; margin: 18px 0 0; }
.r3-card p {
color: var(--r3-ink-soft);
font-size: 0.95rem;
line-height: 1.6;
margin: 12px 0 0;
}
.r3-card-link {
margin-top: auto;
padding-top: 22px;
color: var(--r3-navy);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.r3-card-link:hover { color: var(--r3-navy); text-decoration: underline; }
/* ── Leaderboard on the fairway pattern ───────────────────────────────── */
/* The pattern was a 2000x300 export of a 7000x1051 original, and `cover` on a
band this tall was scaling it 2.5x in CSS px — 5x on a 2x screen — which is
why the stripes read as blurred. It is now a full-height 2800x1051 crop, so
the same band upscales ~1.4x on a 2x screen instead.
🔑 `cover` here is HEIGHT-driven (the art is far wider than the band), so
crispness is set entirely by the source's 1051px height — cropping the width
costs nothing visually and only trims bytes nobody downloads. Re-exporting
wider would NOT help; only a taller original would.
Crops are centre-anchored (`sips -c`), which keeps the framing the 2000px
export had — the ball still lands at the right-hand end on desktop. */
/* Same two-declaration image-set pattern the R3 heroes use: browsers that do
not parse the prefixed form keep the standard one above it. */
.r3-board {
background-image:
image-set(url('/static/images/pattern-fairway.webp') type('image/webp'),
url('/static/images/pattern-fairway.jpg') type('image/jpeg'));
background-image: -webkit-image-set(
url('/static/images/pattern-fairway.webp') type('image/webp'),
url('/static/images/pattern-fairway.jpg') type('image/jpeg'));
background-size: cover;
background-position: center;
padding: 66px 0;
}
/* A phone shows ~400px of the artwork's width. Shipping the desktop crop there
is 300KB to display a sliver, so it gets its own centre crop at the same
height — identical framing, a quarter of the bytes. */
@media (max-width: 860px) {
.r3-board {
background-image:
image-set(url('/static/images/pattern-fairway-sm.webp') type('image/webp'),
url('/static/images/pattern-fairway-sm.jpg') type('image/jpeg'));
background-image: -webkit-image-set(
url('/static/images/pattern-fairway-sm.webp') type('image/webp'),
url('/static/images/pattern-fairway-sm.jpg') type('image/jpeg'));
}
}
.r3-board-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.r3-board-table {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 40px rgba(0,0,0,0.16);
}
.r3-board-table table { width: 100%; border-collapse: collapse; }
.r3-board-table thead th {
background: var(--r3-table-head);
color: var(--r3-navy);
font-size: 0.82rem;
font-weight: 600;
text-align: left;
padding: 15px 18px;
white-space: nowrap;
}
.r3-board-table tbody td {
padding: 18px;
border-bottom: 1px solid #EEF1F6;
vertical-align: middle;
}
.r3-board-table tbody tr:last-child td { border-bottom: none; }
.r3-rank { color: var(--r3-ink-soft); font-variant-numeric: tabular-nums; width: 46px; }
.r3-course-name {
font-family: var(--r3-serif);
font-weight: 700;
font-size: 1.12rem;
color: var(--r3-navy);
text-decoration: none;
}
.r3-course-name:hover { color: var(--r3-navy); text-decoration: underline; }
.r3-course-loc {
display: flex;
align-items: center;
gap: 6px;
color: var(--r3-ink-soft);
font-size: 0.88rem;
margin-top: 4px;
}
.r3-course-loc svg { width: 13px; height: 13px; color: var(--r3-green); flex: 0 0 auto; }
.r3-score {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--r3-serif);
font-weight: 700;
color: var(--r3-navy);
font-variant-numeric: tabular-nums;
}
.r3-feathers { display: inline-flex; gap: 3px; }
.r3-feather {
display: inline-block;
width: 19px;
height: 19px;
background-color: var(--r3-magenta);
-webkit-mask: url('/static/images/feather-r3.png') center / contain no-repeat;
mask: url('/static/images/feather-r3.png') center / contain no-repeat;
}
.r3-feather--off { opacity: 0.22; }
.r3-score .r3-feather { width: 21px; height: 21px; }
.r3-rec {
display: inline-block;
background: #E4F7EF;
color: #0B7A5A;
font-size: 0.8rem;
font-weight: 600;
padding: 5px 11px;
border-radius: 8px;
white-space: nowrap;
}
.r3-rec--low { background: #F1F2F6; color: #5B6479; }
.r3-vol { color: var(--r3-navy); font-size: 0.88rem; white-space: nowrap; }
.r3-num { text-align: right; }
/* On phones the table drops to the three columns the mobile comp keeps */
@media (max-width: 860px) {
.r3-hide-sm { display: none; }
.r3-board-table tbody td { padding: 14px 12px; }
.r3-board-table thead th { padding: 12px; font-size: 0.76rem; }
.r3-course-name { font-size: 1rem; }
.r3-stack-sm { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
}
@media (min-width: 861px) { .r3-stack-sm { display: none; } }
/* ── Course spotlight ─────────────────────────────────────────────────── */
.r3-spot {
background: #fff;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 14px 36px rgba(24,44,96,0.10);
}
.r3-spot-media { position: relative; }
.r3-spot-media img { display: block; width: 100%; height: clamp(240px, 34vw, 430px); object-fit: cover; }
.r3-spot-badge {
position: absolute;
right: 18px;
bottom: 18px;
background: var(--r3-teal);
color: #04302A;
font-size: 0.82rem;
font-weight: 600;
padding: 8px 15px;
border-radius: 8px;
}
.r3-spot-body { padding: 24px 28px 28px; }
/* Score sits on the same row as the Featured-course tag, to the right of the
name — and the review count sits beside the button rather than above it.
Both per the comp. */
.r3-spot-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.r3-spot-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
flex-wrap: wrap;
margin-top: 26px;
}
.r3-spot h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; margin: 14px 0 0; }
.r3-spot-meta { color: var(--r3-ink-soft); font-size: 0.9rem; margin-top: 8px; }
.r3-spot-score {
font-family: var(--r3-serif);
font-size: clamp(1.6rem, 3.4vw, 2.1rem);
font-weight: 700;
color: var(--r3-navy);
display: inline-flex;
align-items: center;
gap: 9px;
white-space: nowrap;
}
.r3-spot-score .r3-feather { width: 26px; height: 26px; }
@media (max-width: 620px) {
/* On a phone the pair spreads to the card edges, as the mobile comp has it */
.r3-spot-foot { justify-content: space-between; gap: 12px; }
.r3-spot-body { padding: 20px 20px 24px; }
}
/* ── Six Birdies ──────────────────────────────────────────────────────── */
.r3-section--navy h2, .r3-section--navy p { color: #fff; }
.r3-flock-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.r3-flock-head p { color: rgba(255,255,255,0.82); margin-top: 16px; line-height: 1.6; }
.r3-birds {
display: grid;
gap: 16px;
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 900px) { .r3-birds { grid-template-columns: repeat(2, 1fr); } }
.r3-bird {
background: #22376E;
border-radius: 16px;
padding: 22px 12px 16px;
text-align: center;
text-decoration: none;
display: block;
transition: background 0.15s, transform 0.15s;
}
.r3-bird:hover { background: #2A4183; transform: translateY(-2px); }
.r3-bird img { width: 52px; height: 52px; object-fit: contain; }
.r3-bird span { display: block; margin-top: 12px; color: #fff; font-weight: 600; font-size: 0.95rem; }
.r3-flock-cta { text-align: center; margin-top: 38px; }
/* ── States ───────────────────────────────────────────────────────────── */
.r3-empty { text-align: center; padding: 34px; color: var(--r3-ink-soft); }
.r3-board-table .r3-empty { background: #fff; }
@media (prefers-reduced-motion: reduce) {
.r3 *, .r3 *::before, .r3 *::after { transition: none !important; }
}
/* ===========================================================================
Shell — nav and footer (base.html, so every page)
---------------------------------------------------------------------------
These sit on top of Bootstrap's .navbar/.navbar-expand-lg rather than
replacing it: that keeps the existing collapse toggle and the
"close the menu on an outside tap" handler in base.html working untouched.
=========================================================================== */
.r3-nav.navbar {
background: var(--r3-navy);
font-family: var(--r3-sans);
padding: 0;
/* 🔴 REQUIRED in the iOS/Android app shells. base.html sets
`viewport-fit=cover`, so the page runs UNDER the status bar; custom.css has
carried `.navbar { padding-top: calc(env(safe-area-inset-top) + 0.5rem) }`
since the Capacitor build to push the bar clear of the notch. The `padding: 0`
above silently overrode it, and the R3 nav shipped to prod tucked under the
clock and battery — fine in a desktop browser, broken in the apps.
Re-apply it as its own declaration AFTER the reset. In a browser the inset
is 0, so this changes nothing there. */
padding-top: env(safe-area-inset-top, 0px);
}
.r3-nav .r3-nav-inner {
width: 100%;
max-width: var(--r3-shell);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 20px;
min-height: 78px;
flex-wrap: wrap;
}
.r3-nav-logo { flex: 0 0 auto; display: block; padding: 12px 0; }
.r3-nav-logo img { height: 46px; width: auto; display: block; }
.r3-nav .navbar-collapse { flex-basis: auto; }
.r3-nav-menu { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; }
.r3-nav-links {
list-style: none;
display: flex;
gap: 34px;
margin: 0 auto;
padding: 0;
}
.r3-nav-links a,
.r3-nav-signin {
color: #fff;
text-decoration: none;
font-size: 0.98rem;
white-space: nowrap;
}
.r3-nav-links a:hover, .r3-nav-signin:hover { color: var(--r3-lime); }
.r3-nav-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
/* Hamburger — Bootstrap's toggler, restyled to three lime rules */
.r3-nav .navbar-toggler {
border: none;
padding: 6px;
margin-left: auto;
box-shadow: none;
}
.r3-nav .navbar-toggler:focus-visible { outline: 2px solid var(--r3-lime); }
.r3-nav-burger { display: block; width: 26px; }
.r3-nav-burger span {
display: block;
height: 2px;
background: #fff;
border-radius: 2px;
margin: 5px 0;
}
/* ⚠️ Keyed to the nav's expand breakpoint in base.html (navbar-expand-LG), not
to Bootstrap's md. If one moves the other must move with it, or the collapsed
panel between 768 and 992 loses these rules and falls back to custom.css's
200px right-aligned card. */
@media (max-width: 991.98px) {
/* custom.css floats .navbar-collapse as an absolutely-positioned 200px card
pinned to right:0 ("float the nav as a right-aligned card under the
toggle"). The R3 menu keeps that class so Bootstrap's toggle still works,
so it inherited the card — a narrow strip hard against the right edge with
the links almost touching its border. Undo it and let the menu be a
full-width panel whose items line up with the logo. */
.r3-nav .navbar-collapse {
position: static;
width: 100%;
min-width: 0;
background: transparent;
box-shadow: none;
border-radius: 0;
padding: 0;
}
.r3-nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 20px; }
.r3-nav-links { flex-direction: column; gap: 0; margin: 0; }
.r3-nav-links a, .r3-nav-signin {
display: block;
padding: 14px 0; /* aligns with the logo via .r3-nav-inner's 24px */
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.r3-nav-actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding-top: 16px;
}
.r3-nav-actions .r3-btn { justify-content: center; }
.r3-nav-logo img { height: 40px; }
/* .r3-nav-actions holds only Sign In / Join Free now — the signed-in menu is
the account disc out in the bar — so there is no dropdown left in the panel
to strip padding from or hide. */
}
/* ── Account disc ──
The same control at every width: the disc IS the dropdown button — no caret,
no name beside it. It replaced a person icon + first name on desktop so both
breakpoints read identically.
38px rather than the 30px the bordered-pill version gave it, which keeps the
tap target close to the 44px guideline. */
.r3-nav-chip {
display: grid;
place-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
flex: 0 0 auto;
background: var(--r3-lime);
color: var(--r3-navy);
text-decoration: none;
transition: box-shadow 0.15s ease;
}
.r3-nav-chip:hover,
.r3-nav-chip:focus-visible { color: var(--r3-navy); box-shadow: 0 0 0 3px rgba(174,251,59,0.35); }
.r3-nav-chip img { width: 100%; height: 100%; object-fit: cover; }
.r3-nav-initials { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
/* Source order is logo → burger → account → menu, because the account control
has to live outside the collapse. On desktop that would place it left of the
nav links, so push it past the menu. */
@media (min-width: 992px) {
.r3-nav-menu { order: 1; }
.r3-nav-account { order: 2; }
}
/* ── Footer ───────────────────────────────────────────────────────────── */
.r3-footer {
/* The supplied pattern is artwork on a CREAM ground — golf carts, tees and
magenta feathers. Dropped in raw it renders at full brightness and the
white footer text becomes unreadable. The comp tints it heavily: its
background samples at #394975 across ~80% of the area, with the pattern
only faintly legible underneath. Reproduce that with a near-opaque navy
wash over the image rather than by editing the asset, so the original
stays reusable. */
background-color: #394975;
background-image:
linear-gradient(rgba(57, 73, 117, 0.93), rgba(57, 73, 117, 0.93)),
url('/static/images/pattern-feather.jpg');
background-size: auto, cover;
background-position: center, center;
font-family: var(--r3-sans);
color: #fff;
padding: 58px 0 30px;
margin-top: auto;
}
.r3-footer-top {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.r3-footer-brand { max-width: 420px; }
.r3-footer-brand img { height: 58px; width: auto; display: block; }
.r3-footer-brand p {
margin: 20px 0 0;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255,255,255,0.92);
}
.r3-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.r3-footer-cols h4 {
font-family: var(--r3-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
margin: 0 0 16px;
}
.r3-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.r3-footer-cols li + li { margin-top: 11px; }
.r3-footer-cols a {
color: rgba(255,255,255,0.92);
text-decoration: none;
font-size: 0.95rem;
}
.r3-footer-cols a:hover { color: var(--r3-lime); }
.r3-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 42px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.22);
font-size: 0.86rem;
color: rgba(255,255,255,0.85);
}
.r3-social { display: flex; gap: 16px; }
.r3-social a { color: #fff; display: inline-flex; }
.r3-social a:hover { color: var(--r3-lime); }
.r3-social svg { width: 20px; height: 20px; }
@media (max-width: 767.98px) {
.r3-footer { padding: 40px 0 26px; }
.r3-footer-cols { flex-direction: column; gap: 26px; }
.r3-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ===========================================================================
Find a Course (page 3 of the R3 brief)
=========================================================================== */
/* Breadcrumb strip under the nav — a deeper navy than the nav itself (#0D1D45
sampled off the comp) so it reads as a sub-bar rather than more nav. */
.r3-crumb { background: #0D1D45; font-family: var(--r3-sans); }
.r3-crumb-inner {
max-width: var(--r3-shell);
margin: 0 auto;
padding: 13px 24px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 0.84rem;
}
.r3-crumb-here {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.76rem;
}
.r3-crumb-here svg { width: 15px; height: 15px; color: var(--r3-lime); }
.r3-crumb-sep { color: rgba(255,255,255,0.3); }
.r3-crumb-note { color: rgba(255,255,255,0.62); }
.r3-crumb-home {
margin-left: auto;
color: var(--r3-lime);
text-decoration: none;
font-weight: 600;
}
.r3-crumb-home:hover { color: var(--r3-lime); text-decoration: underline; }
/* The Find hero is a band, not the homepage's full-screen opener — the comp
gives it roughly a third of the height. */
@media (min-width: 861px) {
.r3-hero--find,
.r3-hero--find > picture,
.r3-hero--find .r3-hero-media { min-height: 460px; }
.r3-hero--find { min-height: 460px; }
/* The body copy sits over sunlit fairway here, which the homepage hero never
does. A scrim weighted to the LEFT keeps the type legible without veiling
the half of the photograph worth looking at. */
/* ⚠️ The scrim is a PSEUDO-ELEMENT, not a background on .r3-hero-inner —
because painting it there means making that element flex or grid to get
full height, and `.r3-wrap` is `margin: 0 auto`. Auto margins beat
`stretch` in both layouts: the wrap collapses to fit-content and centres
itself, dragging the copy into the middle of the photo. Leave
.r3-hero-inner a plain block and layer the scrim behind it. */
.r3-hero--find::after {
content: '';
grid-area: 1 / 1;
z-index: 0;
pointer-events: none;
background: linear-gradient(100deg,
rgba(13,29,69,0.68) 0%,
rgba(13,29,69,0.42) 42%,
rgba(13,29,69,0) 72%);
}
.r3-hero--find .r3-hero-inner { position: relative; z-index: 1; }
/* Pull the copy 40px left of the standard shell so "worth playing" clears the
sand feather — the tail of the "g" was overlapping its left edge by ~11px.
40 buys ~29px of clearance; kept deliberately small because every extra
pixel widens the misalignment noted below.
Done by WIDENING this hero's wrap rather than with a negative margin: the
wrap is `max-width + margin: 0 auto`, so a wider one only bites once the
viewport exceeds it and can never push the copy past the 24px gutter. A
negative margin would have shoved the headline off-screen around 900px.
⚠️ This intentionally breaks an alignment. The logo, the breadcrumb and the
search field below all sit on .r3-wrap at 124px (at 1440); the hero copy no
longer does. There is no shift that clears the feather AND keeps that
alignment — the alternative is leaving it at 124 and shrinking the h1
instead. Kim's call. */
.r3-hero--find .r3-hero-inner .r3-wrap { max-width: 1320px; }
}
@media (max-width: 860px) {
/* Copy lands on white and the search band below is white too, so drop the
hero's bottom padding rather than stacking two lots of it. */
.r3-hero--find .r3-hero-inner { padding-bottom: 8px; }
.r3-hero--find + .r3-search { padding-top: 22px; }
}
/* The Rate hero is the same band treatment as Find — Devon's header is a
4.67:1 panorama, so it gets the shorter of the two desktop heights. */
@media (min-width: 861px) {
.r3-hero--rate,
.r3-hero--rate > picture,
.r3-hero--rate .r3-hero-media { min-height: 460px; }
/* The copy sits over open fairway that runs light all the way to the left
edge, so this scrim is carried a little further across than Find's before
it clears — the tree line on the left is the only naturally dark ground,
and the h1 overruns it. It still releases before the feather-shaped pond,
which is the half of the frame worth seeing. */
.r3-hero--rate::after {
content: '';
grid-area: 1 / 1;
z-index: 0;
pointer-events: none;
background: linear-gradient(100deg,
rgba(13,29,69,0.72) 0%,
rgba(13,29,69,0.46) 46%,
rgba(13,29,69,0) 78%);
}
.r3-hero--rate .r3-hero-inner { position: relative; z-index: 1; }
}
@media (max-width: 860px) {
/* Same as Find, but the band underneath is .bub-rate-search — this page is
not on the .r3 section classes. */
.r3-hero--rate .r3-hero-inner { padding-bottom: 8px; }
}
/* On a phone the strip wraps to two lines and the "|" ends up orphaned. The
sub-label is context, not navigation — drop it and keep one clean line. */
@media (max-width: 600px) {
.r3-crumb-sep, .r3-crumb-note { display: none; }
.r3-crumb-inner { flex-wrap: nowrap; padding: 11px 20px; }
}
/* Search band */
.r3-search { background: #fff; padding: 46px 0 40px; }
.r3-search-label {
font-weight: 700;
color: var(--r3-navy);
font-size: 1.02rem;
margin: 0 0 14px;
}
/* The typeahead keeps its own classes and its dropdown-positioning JS — this
only re-skins it, because that positioning code is fiddly and works.
🔑 The pill border goes on the WRAP, not the input: the wrap is the flex row
that already holds the magnifier and the spinner. Bordering the input instead
leaves both of them stranded outside the pill. */
.r3-search .typeahead-wrap { max-width: 640px; }
.r3-search .typeahead-input-wrap {
border: 1.5px solid var(--r3-navy);
border-radius: 999px;
padding: 0 22px;
}
.r3-search .typeahead-input-wrap:focus-within {
border-color: var(--r3-navy);
box-shadow: 0 0 0 4px rgba(24,44,96,0.10);
}
.r3-search .typeahead-icon {
color: var(--r3-navy);
font-size: 1.05rem;
margin-right: 12px;
}
.r3-search .typeahead-input {
font-family: var(--r3-sans);
font-size: 1rem;
color: var(--r3-ink);
padding: 15px 0;
}
.r3-search .typeahead-input::placeholder { color: #9aa3b5; }
.r3-search .typeahead-dropdown {
border-radius: 16px;
border: 1px solid #E4E7EF;
box-shadow: 0 14px 34px rgba(24,44,96,0.14);
overflow: hidden;
}
.r3-search .ta-near {
margin-top: 14px;
background: none;
border: none;
padding: 0;
color: var(--r3-navy);
font-family: var(--r3-sans);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
}
.r3-search .ta-near:hover { text-decoration: underline; }
/* Results */
.r3-results { background: var(--r3-cream); padding: 62px 0 70px; }
.r3-course-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.r3-course-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 20px;
padding: 14px 14px 16px;
box-shadow: 0 10px 26px rgba(24,44,96,0.09);
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.r3-course-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(24,44,96,0.14);
}
.r3-card-media {
border-radius: 13px;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--r3-navy);
display: flex;
align-items: center;
justify-content: center;
}
.r3-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Most clubs have no photograph yet, so the fallback is the brand mark on navy
rather than a broken frame or a grey box — it reads as deliberate. */
.r3-card-media--empty { background: var(--r3-navy); }
.r3-card-media--empty span {
width: 44%;
height: 44%;
background-color: var(--r3-lime);
opacity: 0.55;
-webkit-mask: url('/static/images/logo-r3-symbol.svg') center / contain no-repeat;
mask: url('/static/images/logo-r3-symbol.svg') center / contain no-repeat;
}
.r3-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-top: 14px;
padding: 0 4px;
}
.r3-card-name {
font-family: var(--r3-serif);
font-weight: 700;
font-size: 1.12rem;
color: var(--r3-navy);
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.r3-card-score {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--r3-serif);
font-weight: 700;
color: var(--r3-navy);
white-space: nowrap;
}
.r3-card-score .r3-feather { width: 17px; height: 17px; }
.r3-card-count { color: var(--r3-ink-soft); font-size: 0.8rem; text-align: right; white-space: nowrap; }
.r3-card-loc {
display: flex;
align-items: center;
gap: 6px;
color: var(--r3-ink-soft);
font-size: 0.88rem;
margin-top: 4px;
padding: 0 4px;
}
.r3-card-loc svg { width: 13px; height: 13px; color: var(--r3-green); flex: 0 0 auto; }
.r3-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 16px;
padding: 0 4px;
}
.r3-card-details {
color: var(--r3-navy);
font-weight: 700;
font-size: 0.92rem;
display: inline-flex;
align-items: center;
gap: 6px;
}
.r3-results-cta { text-align: center; margin-top: 42px; }
.r3-empty-grid { text-align: center; padding: 40px; color: var(--r3-ink-soft); }
/* ===========================================================================
Leaderboard page
=========================================================================== */
/* A solid navy header, then the tables on the fairway pattern below it. The
pattern is a photograph — running the headline over it too fights the copy,
and the navy band gives the page a proper masthead. */
.r3-pagehead { background: var(--r3-navy); padding: 54px 0 58px; }
.r3-pagehead h1 {
color: #fff;
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
line-height: 1.14;
margin: 18px 0 0;
max-width: 18em;
}
.r3-pagehead p {
color: rgba(255,255,255,0.78);
font-size: 1.02rem;
line-height: 1.6;
margin: 18px 0 0;
max-width: 46em;
}
/* Plain R3 cream, NOT the homepage's fairway pattern. One band of that pattern
is a flourish; a whole page of it behind two large tables becomes the subject
and the navy headings have to fight it. Washing it back far enough to fix
that also pushes the ground olive — visibly off-palette next to the real
cream on /find. Cream keeps this page and /find reading as one system.
(To bring the texture back it's one declaration: layer
`linear-gradient(rgba(251,248,243,0.93), …), url('…/pattern-fairway.jpg')`.) */
.r3-board--page {
padding: 56px 0 72px;
background: var(--r3-cream);
}
/* Two tables in one band, so they need separating from each other. */
.r3-board-module + .r3-board-module { margin-top: 56px; }
.r3-board--page .r3-board h2,
.r3-board--page h2 {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 700;
margin: 12px 0 0;
}
.r3-board-table thead th.r3-num { text-align: right; }
/* The top three earn a little weight — the ranking is the point of the page. */
.r3-rank--top { color: var(--r3-navy); font-weight: 700; }
/* ===========================================================================
Club detail — page 4 of the R3 brief
=========================================================================== */
/* ── Hero ──────────────────────────────────────────────────────────────────
A photograph when we have one for this club (course_photos.json), otherwise
the feather pattern under a navy wash. Deliberately NOT a generic golf
photo: a picture of somewhere else at the top of a club's page reads as a
picture OF that club, which would be a straightforward lie about a business
we don't own the imagery for. */
.r3-club-hero {
position: relative;
display: grid;
background-color: var(--r3-navy);
}
.r3-club-hero > picture { grid-area: 1 / 1; display: block; height: 100%; }
.r3-club-photo {
display: block;
width: 100%;
/* A fixed band, not the photograph's own aspect ratio — left to itself a
1800x1200 image fills 740px of a 1400px viewport and pushes the whole
page below the fold. */
height: 400px;
object-fit: cover;
}
/* On a phone the copy is too tall to sit inside the picture — it overflowed
onto the navy below and the title ended up over the brightest part of the
photograph. Stack instead: photo band, then the heading on solid navy,
which is the same move the homepage hero makes. */
@media (max-width: 860px) {
.r3-club-hero { display: block; }
.r3-club-hero > picture { display: block; }
.r3-club-photo { height: 220px; }
.r3-club-hero::after { display: none; }
.r3-club-hero-inner { padding: 26px 0 30px; }
/* Only the photo variant needs a ground painted here — the plain variant
already has the feather pattern on the section itself. */
.r3-club-hero--photo .r3-club-hero-inner { background: var(--r3-navy); }
}
.r3-club-hero::after {
content: '';
grid-area: 1 / 1;
z-index: 0;
pointer-events: none;
background: linear-gradient(180deg,
rgba(13,29,69,0.34) 0%,
rgba(13,29,69,0.22) 34%,
rgba(13,29,69,0.90) 100%);
}
/* No photograph: the footer's treatment, so the band still carries brand. */
.r3-club-hero--plain {
min-height: 300px;
background-image:
linear-gradient(rgba(24,44,96,0.90), rgba(24,44,96,0.90)),
url('/static/images/pattern-feather.jpg');
background-size: cover;
background-position: center;
}
.r3-club-hero--plain::after { background: none; }
/* ⚠️ Plain block, never flex/grid — .r3-wrap inside is `margin: 0 auto`, and
auto margins collapse it to fit-content in both layouts. */
.r3-club-hero-inner {
grid-area: 1 / 1;
position: relative;
z-index: 1;
align-self: end;
width: 100%;
padding: 40px 0 34px;
}
.r3-club-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
}
.r3-club-head h1 {
color: #fff;
font-size: clamp(1.9rem, 4vw, 3.1rem);
line-height: 1.08;
margin: 0;
}
.r3-club-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
font-size: 0.9rem;
}
.r3-club-place {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,0.9);
}
.r3-club-place svg { width: 14px; height: 14px; color: var(--r3-lime); flex: 0 0 auto; }
.r3-club-pill {
background: rgba(255,255,255,0.16);
color: #fff;
border-radius: 999px;
padding: 5px 15px;
white-space: nowrap;
}
.r3-club-actions { text-align: right; }
.r3-club-phone { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin: 0; }
.r3-club-site {
display: inline-block;
color: var(--r3-lime);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
margin-top: 3px;
}
.r3-club-site:hover { color: var(--r3-lime); text-decoration: underline; }
.r3-club-actions .r3-btn { margin-top: 14px; }
/* ── Body ─────────────────────────────────────────────────────────────────── */
.r3-club-body { background: var(--r3-cream); padding: 44px 0 64px; }
.r3-club-grid {
display: grid;
gap: 26px;
align-items: start;
grid-template-columns: 1.5fr 1fr;
}
.r3-club-col { display: grid; gap: 24px; align-content: start; }
/* Stacked, the wanted order is score card → Category Ratings → facilities, and
those live in DIFFERENT columns. `order` only sorts siblings, so the column
wrappers go `display: contents` here — their children become items of the
grid itself and can then be sequenced across what were two columns.
⚠️ That drops .r3-club-col's own 24px gap, so the grid's 26px applies to
everything; near enough that it needs no compensation, but it is why the
stacked spacing is not identical to the desktop columns. */
@media (max-width: 979px) {
.r3-club-grid { grid-template-columns: 1fr; display: flex; flex-direction: column; }
.r3-club-col { display: contents; }
.r3-scorecard { order: 1; }
.r3-snapshot-inner { order: 2; } /* Category Ratings */
.r3-recband--compact { order: 3; } /* stays with the ratings, as on desktop */
.r3-club-col > .r3-panel { order: 4; } /* Review Highlights, then Facilities */
.r3-tellus { order: 5; }
}
/* ── Score card ───────────────────────────────────────────────────────────── */
.r3-scorecard {
background: var(--r3-navy);
border-radius: 22px;
padding: 30px 32px 32px;
color: #fff;
}
.r3-scorecard-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
}
.r3-scorecard h2 {
color: #fff;
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.18;
margin: 14px 0 0;
}
.r3-scorecard-sub {
color: rgba(255,255,255,0.72);
font-size: 0.92rem;
line-height: 1.55;
margin: 10px 0 0;
max-width: 34em;
}
.r3-ring {
flex: 0 0 auto;
width: 132px;
height: 132px;
border-radius: 50%;
border: 10px solid var(--r3-lime);
background: var(--r3-navy-deep);
display: grid;
place-content: center;
text-align: center;
/* The soft halo the comp puts behind the ring. */
box-shadow: 0 0 0 13px rgba(255,255,255,0.07);
}
.r3-ring b {
display: block;
font-family: var(--r3-serif);
font-weight: 700;
font-size: 2.1rem;
line-height: 1;
color: #fff;
}
.r3-ring span {
display: block;
text-transform: uppercase;
margin-top: 5px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--r3-lime);
}
.r3-ring--empty { border-color: rgba(255,255,255,0.22); box-shadow: none; }
.r3-ring--empty b { color: rgba(255,255,255,0.5); }
.r3-ring--empty span { color: rgba(255,255,255,0.45); }
.r3-scorecard hr {
border: none;
border-top: 1px solid rgba(255,255,255,0.16);
margin: 26px 0 22px;
}
.r3-quote {
display: flex;
gap: 12px;
align-items: flex-start;
}
.r3-quote > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--r3-lime); margin-top: 3px; }
.r3-quote p {
font-family: var(--r3-serif);
font-style: italic;
font-size: 1.06rem;
line-height: 1.45;
color: #fff;
margin: 0;
}
.r3-quote small {
display: block;
margin-top: 8px;
font-family: var(--r3-sans);
font-style: normal;
font-size: 0.85rem;
color: var(--r3-lime);
}
/* Aggregated highlights and concerns — only ever present with real reviews. */
.r3-notes { display: grid; gap: 9px; margin-top: 22px; }
.r3-note {
font-size: 0.88rem;
line-height: 1.5;
padding: 10px 14px;
border-radius: 11px;
background: rgba(255,255,255,0.07);
color: rgba(255,255,255,0.88);
}
.r3-note b { color: #fff; font-weight: 600; }
.r3-note--warn { background: rgba(255, 214, 130, 0.12); }
/* ── White panels ─────────────────────────────────────────────────────────── */
.r3-panel {
background: #fff;
border: 1px solid #F1EDE5;
border-radius: 20px;
padding: 26px 28px 28px;
}
.r3-panel h3 {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.r3-panel-sub {
color: var(--r3-ink-soft);
font-size: 0.88rem;
margin: 6px 0 0;
}
.r3-taglist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.r3-tag {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #E6E2D9;
border-radius: 999px;
padding: 8px 15px;
font-size: 0.88rem;
color: var(--r3-navy);
background: #fff;
}
.r3-tag svg { width: 13px; height: 13px; color: var(--r3-magenta); flex: 0 0 auto; }
.r3-tag em { font-style: normal; color: var(--r3-ink-soft); }
.r3-facilities {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-top: 18px;
}
.r3-facility {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid #EDE9E0;
border-radius: 12px;
padding: 13px 16px;
font-size: 0.94rem;
color: var(--r3-navy);
}
.r3-facility i {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: #F3F0E9;
display: grid;
place-content: center;
font-style: normal;
}
.r3-facility svg { width: 14px; height: 14px; }
.r3-facility--yes i { background: #E4F7EF; }
.r3-facility--yes svg { color: #0B7A5A; }
.r3-facility--no { color: var(--r3-ink-soft); }
.r3-facility--no svg { color: #B9BECB; }
/* ── Category ratings (right column) ──────────────────────────────────────── */
.r3-eyebrow--mint { /* Snapshot tag: pale green ground, ink text */
background: #E8FCD6;
color: #0A1628;
}
.r3-snapshot h2 { font-size: 1.5rem; margin: 14px 0 0; }
.r3-cats { display: grid; gap: 14px; margin-top: 20px; }
.r3-cat {
background: #fff;
border: 1px solid #F1EDE5;
border-radius: 16px;
padding: 18px 20px;
}
.r3-cat-row {
display: flex;
align-items: center;
gap: 14px;
}
.r3-cat-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 13px;
display: grid;
place-content: center;
background: #F1F2F6;
}
.r3-cat-icon svg { width: 21px; height: 21px; color: var(--r3-navy); }
.r3-cat--staff .r3-cat-icon { background: #F3E8FF; }
.r3-cat--food .r3-cat-icon { background: #D4E7FF; }
.r3-cat--bath .r3-cat-icon { background: #E0F5EE; }
.r3-cat-label { min-width: 0; flex: 1 1 auto; }
.r3-cat-label b {
display: block;
font-size: 1.02rem;
font-weight: 700;
color: var(--r3-navy);
}
.r3-cat-label span { display: block; font-size: 0.87rem; color: var(--r3-ink-soft); }
.r3-cat-score {
flex: 0 0 auto;
font-family: var(--r3-serif);
font-weight: 700;
font-size: 1.55rem;
color: var(--r3-navy);
white-space: nowrap;
}
.r3-cat-score i { font-style: normal; font-size: 0.86rem; color: var(--r3-ink-soft); }
.r3-cat-score--word { font-size: 1.25rem; }
.r3-cat-bar {
height: 7px;
border-radius: 999px;
background: #EFECE4;
margin-top: 16px;
overflow: hidden;
}
.r3-cat-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--r3-lime); }
.r3-tellus {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #F1EDE5;
border-radius: 14px;
padding: 15px 18px;
margin-top: 14px;
font-size: 0.88rem;
color: var(--r3-ink-soft);
}
.r3-tellus svg { width: 15px; height: 15px; flex: 0 0 auto; }
.r3-tellus a { color: var(--r3-navy); font-weight: 700; text-decoration: none; }
.r3-tellus a:hover { text-decoration: underline; }
/* ── Recommendation band + booking ────────────────────────────────────────── */
.r3-recband {
background: var(--r3-navy);
border-radius: 20px;
margin-top: 26px;
padding: 24px 30px;
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.r3-recband-mark {
flex: 0 0 auto;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--r3-magenta);
display: grid;
place-content: center;
}
.r3-recband-mark span {
width: 22px;
height: 22px;
background-color: #fff;
-webkit-mask: url('/static/images/feather-r3.png') center / contain no-repeat;
mask: url('/static/images/feather-r3.png') center / contain no-repeat;
}
.r3-recband-copy { flex: 1 1 260px; }
.r3-recband-copy b { display: block; color: #fff; font-size: 1.16rem; font-weight: 700; }
.r3-recband-copy span { display: block; color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-top: 3px; }
/* Compact: the band now sits inside the Category Ratings column instead of
spanning the page, so everything scales to that width. The copy basis drops
to 100px — at the inherited 260px the button was pushed onto its own row in
a column this narrow. */
.r3-recband--compact {
margin-top: 14px;
padding: 16px 18px;
border-radius: 16px;
gap: 14px;
}
.r3-recband--compact .r3-recband-mark { width: 34px; height: 34px; }
.r3-recband--compact .r3-recband-mark span { width: 16px; height: 16px; }
.r3-recband--compact .r3-recband-copy { flex: 1 1 100px; }
.r3-recband--compact .r3-recband-copy b { font-size: 0.98rem; }
.r3-recband--compact .r3-recband-copy span { font-size: 0.78rem; }
.r3-recband--compact .r3-btn { padding: 8px 14px; font-size: 0.8rem; }
.r3-book { margin-top: 34px; }
.r3-book h3 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.r3-book a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
color: var(--r3-magenta);
font-weight: 600;
text-decoration: none;
}
.r3-book a:hover { text-decoration: underline; }
@media (max-width: 640px) {
.r3-club-head { display: block; }
.r3-club-actions { text-align: left; margin-top: 20px; }
.r3-scorecard { padding: 24px 20px 26px; }
.r3-scorecard-top { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
.r3-panel { padding: 22px 20px 24px; }
}
/* ===========================================================================
Long-form document pages — support, privacy, terms, cookie policy
=========================================================================== */
/* These pages used to be white text on custom.css's navy→teal body gradient.
They're now a navy masthead over a cream ground with the prose on a white
card, which is the same navy → cream → white rhythm the rest of R3 uses. */
.r3-pagehead--doc { padding: 44px 0 46px; }
.r3-pagehead--doc h1 { margin: 0; }
.r3-pagehead--doc p { font-size: 0.92rem; margin-top: 12px; }
.r3-doc { background: var(--r3-cream); padding: 40px 0 70px; }
.r3-doc-card {
background: #fff;
border: 1px solid #F1EDE5;
border-radius: 20px;
padding: 44px 48px 48px;
/* Legal prose is read, not scanned — hold the measure near 70 characters
rather than letting it run the full width of the shell. */
max-width: 62rem;
margin: 0 auto;
color: var(--r3-ink);
font-size: 1rem;
line-height: 1.68;
}
.r3-doc-card > *:first-child { margin-top: 0; }
.r3-doc-card > *:last-child { margin-bottom: 0; }
.r3-doc-card p { margin: 0 0 1.1rem; }
.r3-doc-card h2,
.r3-doc-card h3,
.r3-doc-card h4,
.r3-doc-card h5,
.r3-doc-card h6 {
font-family: var(--r3-serif);
font-weight: 700;
color: var(--r3-navy);
font-size: 1.22rem;
line-height: 1.3;
margin: 2.1rem 0 0.75rem;
}
.r3-doc-card ul,
.r3-doc-card ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.r3-doc-card li { margin-bottom: 0.5rem; }
.r3-doc-card strong { color: var(--r3-navy); font-weight: 600; }
.r3-doc-card a { color: var(--r3-navy); font-weight: 600; text-decoration: underline; }
.r3-doc-card a:hover { color: var(--r3-magenta); }
.r3-doc-card hr { border: none; border-top: 1px solid #EDE9E0; margin: 2rem 0; }
/* Bootstrap utilities left over in the prose that assumed a dark ground. */
.r3-doc-card .text-muted { color: var(--r3-ink-soft) !important; }
@media (max-width: 640px) {
.r3-doc { padding: 26px 0 48px; }
.r3-doc-card { padding: 28px 22px 32px; border-radius: 16px; }
}
.r3-doc-back { margin-bottom: 18px; }
.r3-doc-back a {
color: var(--r3-lime);
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
}
.r3-doc-back a:hover { color: var(--r3-lime); text-decoration: underline; }
/* ===========================================================================
Profile — palette pass
The markup and its JS are untouched; these override the Bootstrap card and
button chrome inside .r3-profile only, so nothing leaks to other pages.
=========================================================================== */
.r3-profile { background: var(--r3-cream); padding: 36px 0 64px; }
.r3-profile .card {
background: #fff;
border: 1px solid #F1EDE5 !important;
border-radius: 20px;
box-shadow: 0 8px 22px rgba(24,44,96,0.07) !important;
}
.r3-profile .card-header {
background: transparent !important;
padding-bottom: 0;
}
.r3-profile .card h5,
.r3-profile .card-header h5 {
font-family: var(--r3-serif);
font-weight: 700;
color: var(--r3-navy);
}
/* The Birdie card keeps a coloured ground — it's the one place on this page
that should feel like the reveal — but on the R3 navy rather than the old
green gradient. */
.r3-profile .card[style*="linear-gradient"] {
background: var(--r3-navy) !important;
border-color: var(--r3-navy) !important;
}
.r3-profile .card[style*="linear-gradient"] h5 { color: #fff; }
/* Buttons: lime pill with navy type, as everywhere else on the site. */
.r3-profile .btn-green,
.r3-profile .btn.btn-green {
background: var(--r3-lime);
border-color: var(--r3-lime);
color: var(--r3-navy);
font-weight: 700;
border-radius: 999px;
}
.r3-profile .btn-green:hover { background: var(--r3-lime); filter: brightness(1.04); color: var(--r3-navy); }
.r3-profile .btn-outline-secondary {
border-color: #D8DBE4;
color: var(--r3-navy);
font-weight: 600;
border-radius: 999px;
}
.r3-profile .btn-outline-secondary:hover { background: var(--r3-navy); border-color: var(--r3-navy); color: #fff; }
.r3-profile .btn-outline-danger { border-radius: 999px; font-weight: 600; }
.r3-profile .btn-outline-light { border-radius: 999px; font-weight: 600; }
/* Green accents inherited from the old palette. */
.r3-profile .text-green { color: var(--r3-navy) !important; font-family: var(--r3-serif); }
.r3-profile a.text-green:hover { color: var(--r3-magenta) !important; }
.r3-profile .bg-green-light { background: #E4F7EF !important; }
.r3-profile .badge.bg-green-light { color: #0B7A5A !important; border-radius: 8px; }
.r3-profile .text-purple { color: var(--r3-magenta) !important; }
.r3-profile .review-item + .review-item { border-top: none; }
.r3-profile .border-bottom { border-color: #EDE9E0 !important; }
/* Modals share the page's chrome. */
.modal-content .modal-header.bg-green-dark { background: var(--r3-navy) !important; }
.modal-content { border-radius: 18px; border: none; }
.modal-content .btn-green {
background: var(--r3-lime); border-color: var(--r3-lime);
color: var(--r3-navy); font-weight: 700; border-radius: 999px;
}
.modal-content .btn-outline-secondary { border-radius: 999px; font-weight: 600; }
.modal-content .btn-danger { border-radius: 999px; font-weight: 600; }
/* An unearned feather was inheriting Bootstrap's .text-muted, which is dark
enough on white to read as a filled one — the opposite of what it means.
Matches the --off treatment the leaderboard feathers use. */
.r3-profile .birdie-icon.text-muted { color: #DCD9D2 !important; }
/* ===========================================================================
About Us
=========================================================================== */
.r3-pagehead--about { padding: 56px 0 60px; }
.r3-pagehead--about h1 {
margin: 18px 0 0;
max-width: 16em;
font-size: clamp(1.9rem, 4vw, 3rem);
}
.r3-about-photo { margin: 0; display: block; }
.r3-about-photo img {
display: block;
width: 100%;
object-fit: cover;
/* 🔑 An aspect-ratio, not a fixed height. With `cover` the crop window is a
FRACTION of the rendered image, so a fixed height crops differently at
every viewport width — at 420px the band started below their heads on a
laptop and cut their feet on a wide monitor.
Measured off the source: the group spans 21%–60% of the image height. At
13/5 the band is 38.5% of the width and the image renders at 77.7%, which
leaves 39% of slack; 31% of that puts the crop at 12.1%, clearing their
heads by ~4% and their feet by ~5% at any width. */
aspect-ratio: 13 / 5;
/* ⚠️ Required. The carries height="1554" as an attribute, which is a
presentational hint — with no `height` in CSS it wins, aspect-ratio is
ignored, and max-height then clamps the band to its own value. */
height: auto;
max-height: 640px;
object-position: center 31%;
}
@media (max-width: 860px) {
/* Nearly the whole frame fits at phone width, so the crop barely bites. */
.r3-about-photo img { aspect-ratio: 4 / 3; height: auto; max-height: 340px; object-position: center 34%; }
}
.r3-about { background: var(--r3-cream); padding: 60px 0 72px; }
.r3-about-body {
max-width: 40rem;
margin: 0 auto;
color: var(--r3-ink);
font-size: 1.06rem;
line-height: 1.72;
}
.r3-about-body p { margin: 0 0 1.4rem; }
.r3-about-body p:last-child { margin-bottom: 0; }
/* The opening paragraph carries the reader in, so it gets a little more air. */
.r3-about-lead { font-size: 1.2rem; line-height: 1.62; }
/* Mel's two one-line beats. They're doing the work of pull-quotes in the copy
already, so they're set as pull-quotes rather than buried in a paragraph. */
.r3-pull {
font-family: var(--r3-serif);
font-style: italic;
font-weight: 700;
font-size: clamp(1.35rem, 2.6vw, 1.7rem);
line-height: 1.32;
color: var(--r3-navy);
margin: 2.2rem 0 2.2rem !important;
padding-left: 22px;
border-left: 3px solid var(--r3-magenta);
}
.r3-about-cta { text-align: center; }
.r3-about-cta h2 { margin: 18px auto 0; max-width: 18em; }
.r3-about-cta-row {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.r3-btn--ghost {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.5);
}
.r3-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }