/* ==========================================================================
Winding Creek Condominium Association — site stylesheet
--------------------------------------------------------------------------
ONE stylesheet for the whole site. Plain CSS, no build step, no frameworks.
HOW TO RE-SKIN THIS SITE FOR ANOTHER COMMUNITY
----------------------------------------------
Almost everything you'd want to change lives in the ":root" block directly
below (colors, fonts, spacing, corner rounding). Change the values there and
the entire site follows. You should rarely need to touch anything lower down.
Section map:
1. Design tokens (:root) <- edit here to re-brand
2. Base / reset
3. Layout helpers
4. Accessibility helpers
5. Site header + navigation
6. Buttons
7. Hero
8. Cards & grids
9. Callouts / alert bands
10. Announcements
11. Document library
12. Forms
13. Embeds (Buildium widget, Google Form)
14. Page header (interior pages)
15. Site footer
16. Utilities
17. Motion & print preferences
========================================================================== */
/* ==========================================================================
0. FONTS
--------------------------------------------------------------------------
Playfair Display (headings) and Lato (body) are self-hosted from
assets/fonts/ rather than loaded from Google's servers. Self-hosting means
no third-party request on every page view, no privacy exposure for
residents, and the fonts work in the local preview with no internet.
Both are open-licensed (SIL Open Font License), so redistributing them this
way is permitted.
Only the Latin character set is included, which keeps them small
(~85 KB total). font-display: swap means text is readable immediately in
the fallback font and re-renders when the real font arrives.
========================================================================== */
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/lato-400.woff2") format("woff2");
}
@font-face {
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/lato-700.woff2") format("woff2");
}
/* Playfair Display ships as a single variable font — one file covers every
weight from 400 to 900, which is why there is only one file here. */
@font-face {
font-family: "Playfair Display";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("../fonts/playfairdisplay-variable.woff2") format("woff2");
}
/* ==========================================================================
1. DESIGN TOKENS — the "config file" for the whole site
========================================================================== */
:root {
/* ---- Brand colors -----------------------------------------------------
Taken from the association's existing banner artwork so the new site
matches materials residents already recognize. */
--color-green: #2E5D43; /* primary — headers, primary buttons */
--color-green-dark: #244A35; /* hover / pressed state for green */
--color-navy: #1F3A5F; /* secondary — footer, deep bands */
--color-navy-dark: #172C48; /* hover / pressed state for navy */
--color-gold: #C6A34B; /* accent — buttons, borders, highlights */
--color-gold-light: #D6B565; /* hover state for gold buttons */
--color-gold-dark: #7A5F22; /* gold as TEXT on cream (5.6:1 — passes) */
--color-gold-soft: #E3CE93; /* gold as TEXT on green (4.9:1 — passes)*/
--color-cream: #F7F5EF; /* page background */
--color-footer-text: #EDE7D6; /* warm cream for text on the navy footer */
/* Why three golds: the brand gold is a mid-tone. It has plenty of contrast
as a button or border, but as small TEXT it is too light on cream and too
dark on green. So gold-dark is used for gold wording on light backgrounds,
gold-soft for gold wording on dark backgrounds, and the brand gold itself
for everything that isn't small text. Change all four together. */
/* ---- Neutrals ---------------------------------------------------------- */
--color-white: #FFFFFF;
--color-ink: #23262A; /* body text */
--color-ink-soft: #55585C; /* secondary text — 7:1 on cream */
--color-line: #DFDBD1; /* hairlines, card borders */
--color-surface: #FFFFFF; /* card background */
--color-surface-alt: #EFEBE1; /* subtle banded section background */
/* ---- Semantic roles (what the rest of the file actually references) ---- */
--bg-page: var(--color-cream);
--bg-band: var(--color-surface-alt);
--text-body: var(--color-ink);
--text-muted: var(--color-ink-soft);
--text-heading: var(--color-navy);
--link: var(--color-green);
--link-hover: var(--color-green-dark);
/* ---- Typography -------------------------------------------------------
Playfair Display for headings, Lato for body text — both self-hosted
(see the @font-face block above). Georgia and the system sans-serif
stack are the fallbacks: they show instantly while the real fonts load,
and they cover the rare case where a webfont fails entirely. */
--font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, Verdana, sans-serif;
--size-base: 1.0625rem; /* 17px — Lato runs small; this reads comfortably */
--size-sm: 0.875rem;
--size-xs: 0.8125rem;
--leading: 1.65;
/* Fluid headings: scale smoothly between phone and desktop with no
breakpoint jumps. clamp(min, preferred, max) */
--size-h1: clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem);
--size-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
--size-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
/* ---- Spacing scale ----------------------------------------------------- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 3rem;
--space-8: 4rem;
/* Vertical rhythm between major page sections (tighter on phones). */
--section-y: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
/* ---- Shape & depth ----------------------------------------------------- */
--radius: 10px;
--radius-sm: 6px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(31, 58, 95, 0.06),
0 2px 8px rgba(31, 58, 95, 0.05);
--shadow-md: 0 2px 4px rgba(31, 58, 95, 0.07),
0 8px 24px rgba(31, 58, 95, 0.08);
/* ---- Layout ------------------------------------------------------------ */
--container: 68rem; /* max content width */
--container-narrow: 46rem; /* long-form reading width */
--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}
/* ==========================================================================
2. BASE / RESET
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 5.5rem; /* keeps anchor targets clear of sticky header */
}
body {
margin: 0;
background-color: var(--bg-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--size-base);
line-height: var(--leading);
/* Push the footer to the bottom on short pages. */
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4 {
font-family: var(--font-heading);
color: var(--text-heading);
line-height: 1.2;
margin: 0 0 var(--space-4);
font-weight: 700;
}
h1 { font-size: var(--size-h1); }
h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.35em; }
li + li { margin-top: var(--space-2); }
a {
color: var(--link);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover { color: var(--link-hover); }
strong { font-weight: 700; }
img, iframe { max-width: 100%; }
img { height: auto; display: block; }
hr {
border: 0;
border-top: 1px solid var(--color-line);
margin: var(--space-6) 0;
}
address { font-style: normal; }
/* ==========================================================================
3. LAYOUT HELPERS
========================================================================== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Narrow reading column. Works either combined with .container (which supplies
the side padding) or on its own inside an existing .container. */
.container--narrow {
max-width: var(--container-narrow);
margin-inline: auto;
}
/* A standard page section with breathing room above and below. */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
/* Banded (tinted) sections used to separate content visually. */
.section--band { background-color: var(--bg-band); }
.section--white { background-color: var(--color-white); }
/* Section intro: heading + short lead paragraph, centered. */
.section-head {
max-width: 42rem;
margin: 0 auto var(--space-6);
text-align: center;
}
.section-head p {
color: var(--text-muted);
font-size: 1.05rem;
}
/* Small uppercase label above a heading. */
.eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--size-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-gold-dark);
margin-bottom: var(--space-2);
}
/* ==========================================================================
4. ACCESSIBILITY HELPERS
========================================================================== */
/* Visible only to screen readers. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* "Skip to main content" — first tab stop on every page. */
.skip-link {
position: absolute;
top: 0;
left: var(--space-4);
transform: translateY(-120%);
z-index: 100;
background: var(--color-navy);
color: var(--color-white);
padding: var(--space-3) var(--space-4);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
font-weight: 700;
text-decoration: none;
}
.skip-link:focus {
transform: translateY(0);
color: var(--color-white);
}
/* One consistent, high-visibility focus ring everywhere. */
:focus-visible {
outline: 3px solid var(--color-gold-dark);
outline-offset: 2px;
border-radius: 2px;
}
/* On dark backgrounds the ring switches to the light gold so it stays visible. */
.site-footer :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.alert-band :focus-visible {
outline-color: var(--color-gold-soft);
}
/* ==========================================================================
5. SITE HEADER + NAVIGATION
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-white);
border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 4.25rem;
/* Safety net: on a very narrow phone, anything that won't fit wraps to a
second row instead of pushing the page sideways. A page that scrolls
horizontally feels broken; a header two rows tall does not. */
flex-wrap: wrap;
}
/* Small phones (roughly 415px and under): tighten the header so the logo,
the sign-in button and the Menu button all sit on one line. */
@media (max-width: 26em) {
.brand__mark { width: 32px; height: 32px; }
.brand__name { font-size: 0.98rem; }
.brand__tagline { display: none; }
.brand { gap: var(--space-2); }
.nav-toggle { padding: var(--space-2); }
.btn--header { padding: 0.55rem 0.8rem; }
}
/* Right-hand side of the header: the Owner Sign In button and, on phones,
the Menu toggle. The sign-in button stays visible at every screen size —
it is the single most-used thing on the site, so it never hides inside a
collapsed menu. */
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
/* Compact gold sign-in button that lives in the header bar. */
.btn--header {
padding: 0.6rem 1rem;
min-height: 42px;
font-size: var(--size-sm);
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-navy);
white-space: nowrap;
}
.btn--header:hover {
background: var(--color-gold-light);
border-color: var(--color-gold-light);
color: var(--color-navy);
}
/* On narrow phones the button shortens to just "Sign In" so the header stays
on one line next to the logo and the Menu button. The full "Homeowner Sign
In" appears once there's room for it. Screen readers always get the full
link text either way. */
.btn--header .btn__long { display: none; }
@media (min-width: 34em) {
.btn--header .btn__long { display: inline; }
.btn--header .btn__short { display: none; }
}
/* --- Logo / wordmark --- */
.brand {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
padding-block: var(--space-2);
}
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-navy);
font-size: 1.05rem;
}
.brand__tagline {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
/* --- Mobile menu button (hidden on desktop) --- */
.nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: var(--color-cream);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
color: var(--color-navy);
font: inherit;
font-size: var(--size-sm);
font-weight: 700;
padding: var(--space-2) var(--space-3);
cursor: pointer;
}
.nav-toggle:hover { background: var(--color-surface-alt); }
.nav-toggle__bars { width: 18px; height: 12px; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
content: "";
position: absolute;
left: 0; right: 0;
height: 2px;
background: currentColor;
border-radius: 2px;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::after { bottom: 0; }
/* --- Navigation: stacked drawer on phones, inline row on desktop --- */
.site-nav {
display: none;
position: absolute;
left: 0; right: 0;
top: 100%;
background: var(--color-white);
border-bottom: 1px solid var(--color-line);
box-shadow: var(--shadow-md);
padding: var(--space-3) var(--gutter) var(--space-5);
}
.site-nav[data-open="true"] { display: block; }
.site-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.site-nav__list li + li { margin-top: 0; }
.site-nav__link {
display: block;
padding: var(--space-3) var(--space-2);
color: var(--color-navy);
text-decoration: none;
font-size: var(--size-sm);
font-weight: 700;
border-radius: var(--radius-sm);
border-bottom: 1px solid var(--color-line);
}
.site-nav__link:hover {
background: var(--color-cream);
color: var(--color-green-dark);
}
/* aria-current="page" is set in the HTML of each page — no JS needed. */
.site-nav__link[aria-current="page"] {
color: var(--color-green-dark);
background: var(--color-cream);
}
/* Desktop layout */
@media (min-width: 62em) {
.nav-toggle { display: none; }
.site-nav {
display: block;
position: static;
background: none;
border: 0;
box-shadow: none;
padding: 0;
}
.site-nav__list {
flex-direction: row;
align-items: center;
gap: var(--space-1);
}
.site-nav__link {
border-bottom: 3px solid transparent;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
padding: var(--space-3);
white-space: nowrap;
}
.site-nav__link[aria-current="page"] {
background: none;
border-bottom-color: var(--color-gold);
}
.brand__mark { width: 44px; height: 44px; }
.brand__name { font-size: 1.15rem; }
}
/* ==========================================================================
6. BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none;
padding: 0.9rem 1.6rem;
border: 2px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease, transform 0.15s ease;
/* Comfortable thumb target on phones. */
min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Primary — the single most important action on a page. */
.btn--primary {
background: var(--color-green);
border-color: var(--color-green);
color: var(--color-white);
}
.btn--primary:hover {
background: var(--color-green-dark);
border-color: var(--color-green-dark);
color: var(--color-white);
}
/* Secondary — equally weighted alternative (e.g. manager sign-in). */
.btn--secondary {
background: var(--color-navy);
border-color: var(--color-navy);
color: var(--color-white);
}
.btn--secondary:hover {
background: var(--color-navy-dark);
border-color: var(--color-navy-dark);
color: var(--color-white);
}
/* Accent — gold, used on dark bands. Navy text keeps contrast well above AA. */
.btn--accent {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-navy);
}
.btn--accent:hover {
background: var(--color-gold-light);
border-color: var(--color-gold-light);
color: var(--color-navy);
}
/* Outline — quiet tertiary action. */
.btn--outline {
background: transparent;
border-color: var(--color-navy);
color: var(--color-navy);
}
.btn--outline:hover {
background: var(--color-navy);
color: var(--color-white);
}
/* Outline variant sitting on a dark background. */
.btn--outline-light {
background: transparent;
border-color: rgba(255, 255, 255, 0.7);
color: var(--color-white);
}
.btn--outline-light:hover {
background: var(--color-white);
border-color: var(--color-white);
color: var(--color-navy);
}
.btn--sm { padding: 0.6rem 1.1rem; font-size: var(--size-sm); min-height: 42px; }
.btn--block { width: 100%; }
/* Row of buttons that stacks on narrow screens. */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.btn-row--center { justify-content: center; }
@media (max-width: 30em) {
.btn-row .btn { width: 100%; }
}
/* ==========================================================================
7. HERO (home page)
========================================================================== */
/* A real photograph of the community sits behind the hero, under a heavy
green/navy wash. The wash is not decoration — it is what keeps the white
headline readable over a bright, high-contrast outdoor photo. If you swap
the photo, check the text is still easy to read before publishing.
The image is a CSS background rather than an ![]()
because it is decorative:
the page makes complete sense without it, so it needs no alt text. */
.hero {
background-color: var(--color-green);
background-image:
linear-gradient(155deg, rgba(31, 58, 95, 0.90) 0%, rgba(31, 58, 95, 0.84) 45%, rgba(36, 74, 53, 0.92) 100%),
url("../img/community-homes.jpg");
background-size: cover;
background-position: center 40%;
color: var(--color-white);
padding-block: clamp(2.75rem, 1.5rem + 6vw, 5.5rem);
}
.hero__grid {
display: grid;
gap: var(--space-6);
}
.hero h1 {
color: var(--color-white);
margin-bottom: var(--space-3);
}
.hero__eyebrow { color: var(--color-gold-soft); }
.hero__lead {
font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
color: rgba(255, 255, 255, 0.92);
max-width: 36rem;
margin-bottom: var(--space-6);
}
.hero .btn-row { margin-bottom: var(--space-5); }
/* Small facts strip under the hero copy: 108 homes / since 1985 / Fayetteville */
.hero__facts {
list-style: none;
margin: 0;
padding: var(--space-4) 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.22);
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
}
.hero__facts li { margin: 0; }
.hero__facts strong {
display: block;
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--color-gold-soft);
}
.hero__facts span {
font-size: var(--size-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 62em) {
.hero__grid {
grid-template-columns: 1.55fr 1fr;
align-items: start;
gap: var(--space-7);
}
}
/* ==========================================================================
8. CARDS & GRIDS
========================================================================== */
/* Auto-fitting card grid — 1 column on phones, more as space allows. */
.grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 40em) {
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
.grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--text-muted); font-size: var(--size-sm); }
/* Card whose whole body is a link target. */
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover {
border-color: var(--color-green);
box-shadow: var(--shadow-md);
color: inherit;
}
/* Small round icon badge at the top of a card. */
.card__icon {
width: 44px; height: 44px;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background: var(--color-surface-alt);
color: var(--color-green);
margin-bottom: var(--space-3);
}
.card__icon svg { width: 22px; height: 22px; }
/* Card with an accent stripe down the left edge. */
.card--accent { border-left: 4px solid var(--color-gold); }
/* Contact cards on the contact page. */
.contact-card { text-align: center; }
.contact-card .card__icon { margin-inline: auto; }
.contact-card a { font-weight: 700; word-break: break-word; }
/* ==========================================================================
8b. PHOTOS & MEDIA LAYOUTS
========================================================================== */
/* A community photograph. Rounded and lightly shadowed to match the cards. */
.photo {
width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow-md);
object-fit: cover;
}
figure { margin: 0; }
figcaption {
font-size: var(--size-xs);
color: var(--text-muted);
margin-top: var(--space-3);
text-align: center;
}
/* Text beside a photo. Stacks on phones (text first, which is what you want
when reading on a small screen), sits side by side from tablet up. */
.media {
display: grid;
gap: var(--space-6);
align-items: center;
}
@media (min-width: 52em) {
.media { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
/* Puts the photo on the LEFT on wide screens, while keeping the text first
in the HTML so it is still read first on a phone and by screen readers. */
.media--reverse > :first-child { order: 2; }
}
/* Taller crop for portrait photos so they don't dominate the page. */
.photo--portrait { max-height: 30rem; object-position: center 35%; }
/* ==========================================================================
8c. PRIMARY ACTION PANELS
--------------------------------------------------------------------------
The two things residents actually come here to do — owners signing in, and
renters registering for alerts. These are deliberately the largest, loudest
elements on the page.
========================================================================== */
.action-grid {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
}
@media (min-width: 52em) {
.action-grid { grid-template-columns: repeat(2, 1fr); }
}
.action-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-line);
border-top: 6px solid var(--color-green);
border-radius: var(--radius);
padding: var(--space-6);
box-shadow: var(--shadow-md);
}
.action-card--alt { border-top-color: var(--color-gold); }
.action-card h2,
.action-card h3 {
font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
margin-bottom: var(--space-3);
}
.action-card ul {
font-size: var(--size-sm);
color: var(--text-muted);
margin-bottom: var(--space-5);
}
/* Pushes the button to the bottom so side-by-side cards line up neatly. */
.action-card__cta { margin-top: auto; }
.action-card__cta .btn { width: 100%; font-size: 1.05rem; padding: 1.05rem 1.5rem; }
/* ==========================================================================
9. CALLOUTS / ALERT BANDS
========================================================================== */
/* Full-width dark band — used for the renter-alert callout on the home page. */
.alert-band {
background: var(--color-navy);
color: var(--color-white);
}
.alert-band h2 { color: var(--color-white); }
.alert-band p { color: rgba(255, 255, 255, 0.9); }
.alert-band .eyebrow { color: var(--color-gold-soft); }
.alert-band__inner {
display: grid;
gap: var(--space-5);
align-items: center;
}
@media (min-width: 52em) {
.alert-band__inner { grid-template-columns: 1.7fr auto; }
}
/* Inline note box inside body copy. */
.note {
background: var(--color-white);
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-green);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin-block: var(--space-5);
font-size: var(--size-sm);
}
.note--gold { border-left-color: var(--color-gold); }
.note h3, .note h4 { margin-bottom: var(--space-2); }
.note :last-child { margin-bottom: 0; }
/* ==========================================================================
10. ANNOUNCEMENTS
========================================================================== */
.announcements { list-style: none; margin: 0; padding: 0; }
.announcements li { margin: 0; }
.announcements li + li { margin-top: var(--space-4); }
.announcement {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.announcement__date {
display: block;
font-size: var(--size-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-gold-dark);
margin-bottom: var(--space-2);
}
.announcement h3 { margin-bottom: var(--space-2); }
.announcement p { color: var(--text-muted); font-size: var(--size-sm); }
/* ==========================================================================
11. DOCUMENT LIBRARY
========================================================================== */
.doc-group + .doc-group { margin-top: var(--space-7); }
.doc-group__head {
display: flex;
align-items: baseline;
gap: var(--space-3);
border-bottom: 2px solid var(--color-line);
padding-bottom: var(--space-2);
margin-bottom: var(--space-4);
}
.doc-group__head h2 { margin: 0; font-size: var(--size-h3); }
.doc-group__count { font-size: var(--size-xs); color: var(--text-muted); }
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.doc-list li { margin: 0; }
@media (min-width: 46em) { .doc-list { grid-template-columns: repeat(2, 1fr); } }
.doc-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
padding: var(--space-4);
height: 100%;
text-decoration: none;
color: inherit;
}
a.doc-item:hover {
border-color: var(--color-green);
box-shadow: var(--shadow-sm);
}
.doc-item__icon { flex: none; color: var(--color-green); margin-top: 2px; }
.doc-item__icon svg { width: 20px; height: 20px; }
.doc-item__name { font-weight: 700; display: block; }
.doc-item__meta {
display: block;
font-size: var(--size-xs);
color: var(--text-muted);
margin-top: 2px;
}
/* Placeholder styling for a document that has no PDF uploaded yet. */
.doc-item--pending { border-style: dashed; background: transparent; }
.doc-item--pending .doc-item__icon { color: var(--text-muted); }
/* ==========================================================================
11b. FAQ / RULES REFERENCE
--------------------------------------------------------------------------
Used on faq.html. Each question is a native element, so it opens
and closes with no JavaScript at all and works with a keyboard and a screen
reader out of the box.
========================================================================== */
/* --- Jump links across the top of the FAQ --- */
.jump-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.jump-nav li { margin: 0; }
.jump-nav a {
display: inline-block;
padding: var(--space-2) var(--space-4);
background: var(--color-white);
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
font-size: var(--size-sm);
font-weight: 700;
color: var(--color-navy);
text-decoration: none;
}
.jump-nav a:hover {
background: var(--color-navy);
border-color: var(--color-navy);
color: var(--color-white);
}
/* --- A group of questions under one topic --- */
.faq-section + .faq-section { margin-top: var(--space-7); }
.faq-section__head {
border-bottom: 3px solid var(--color-gold);
padding-bottom: var(--space-3);
margin-bottom: var(--space-4);
}
.faq-section__head h2 { margin-bottom: var(--space-2); }
/* The short "per the governing documents..." note under each topic heading. */
.faq-section__basis {
font-size: var(--size-sm);
color: var(--text-muted);
margin: 0;
}
/* --- One question --- */
.faq-item {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
margin-bottom: var(--space-3);
}
.faq-item[open] {
border-color: var(--color-green);
box-shadow: var(--shadow-sm);
}
.faq-item summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
padding: var(--space-4);
cursor: pointer;
font-weight: 700;
color: var(--color-navy);
/* Hide the default triangle in both engines; we draw our own below. */
list-style: none;
min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-cream); }
.faq-item__q { flex: 1 1 16rem; }
/* Our own open/close chevron. */
.faq-item__chevron {
flex: none;
width: 12px; height: 12px;
border-right: 2px solid var(--color-green);
border-bottom: 2px solid var(--color-green);
transform: rotate(45deg);
transition: transform 0.15s ease;
margin-left: auto;
}
.faq-item[open] .faq-item__chevron { transform: rotate(-135deg); }
.faq-item__body {
padding: 0 var(--space-4) var(--space-4);
font-size: var(--size-sm);
color: var(--text-body);
}
.faq-item__body p:first-child { margin-top: 0; }
/* The short citation at the end of an answer, e.g. "(Rule 16)". */
.faq-item__cite {
display: block;
margin-top: var(--space-3);
font-size: var(--size-xs);
color: var(--text-muted);
font-style: italic;
}
/* --- Verdict badges -------------------------------------------------------
The one-word answer, colored by meaning. Every combination below has been
checked for text contrast:
yes white on green 7.0:1
no white on brick 8.4:1
conditional navy on gold 4.7:1
info white on navy 13.2:1
The brick tone is drawn from the buildings' own brickwork rather than a
generic warning red, so it still belongs to this community's palette. */
.badge {
display: inline-block;
flex: none;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.35;
white-space: normal;
}
.badge--yes { background: var(--color-green); color: var(--color-white); }
.badge--no { background: #8C3A2B; color: var(--color-white); }
.badge--conditional { background: var(--color-gold); color: var(--color-navy); }
.badge--info { background: var(--color-navy); color: var(--color-white); }
/* --- Search box (created by JavaScript; absent if JS is off) --- */
.faq-search { margin-bottom: var(--space-6); }
.faq-search__count {
display: block;
font-size: var(--size-xs);
color: var(--text-muted);
margin-top: var(--space-2);
}
/* Applied by the search filter to hide non-matching questions and sections. */
[hidden] { display: none !important; }
/* --- Numbered process steps (the violation process) --- */
.steps {
list-style: none;
counter-reset: step;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
}
.steps li {
counter-increment: step;
margin: 0;
display: flex;
gap: var(--space-4);
align-items: flex-start;
background: var(--color-white);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
padding: var(--space-4);
font-size: var(--size-sm);
}
.steps li::before {
content: counter(step);
flex: none;
width: 2rem; height: 2rem;
display: grid;
place-items: center;
border-radius: var(--radius-pill);
background: var(--color-navy);
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 700;
}
/* ==========================================================================
12. FORMS
========================================================================== */
.form { max-width: 34rem; }
.form-field { margin-bottom: var(--space-4); }
.form-label {
display: block;
font-weight: 700;
font-size: var(--size-sm);
color: var(--color-navy);
margin-bottom: var(--space-2);
}
.form-label .req { color: #A3341F; }
.form-input,
.form-textarea {
width: 100%;
font: inherit;
font-size: 1rem; /* 16px stops iOS from zooming on focus */
color: var(--text-body);
background: var(--color-white);
border: 1px solid #C4BFB4;
border-radius: var(--radius-sm);
padding: 0.75rem 0.85rem;
min-height: 48px;
}
.form-textarea { min-height: 9rem; resize: vertical; }
.form-input:focus,
.form-textarea:focus { border-color: var(--color-green); }
.form-hint {
display: block;
font-size: var(--size-xs);
color: var(--text-muted);
margin-top: var(--space-2);
}
/* Honeypot: a field only bots fill in. Hidden from people AND screen readers. */
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
/* Status message shown after submitting. */
.form-status {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--size-sm);
border: 1px solid transparent;
}
.form-status:empty { display: none; }
.form-status[data-state="ok"] {
background: #E7F1E9;
border-color: var(--color-green);
color: #1D4530;
}
.form-status[data-state="error"] {
background: #FBEAE6;
border-color: #A3341F;
color: #7C2716;
}
.form-status[data-state="pending"] {
background: var(--color-surface-alt);
border-color: var(--color-line);
color: var(--text-muted);
}
/* ==========================================================================
13. EMBEDS (Buildium tenant widget, Google Form)
========================================================================== */
/* The Buildium tenant widget is a fixed 250x63 iframe we are not allowed to
restyle (cross-origin). We wrap it in our own card so it sits comfortably
inside the design instead of floating on the background. */
.widget-card {
background: var(--color-white);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow-md);
text-align: center;
}
.widget-card__title {
font-family: var(--font-heading);
font-weight: 700;
color: var(--color-navy);
font-size: 1.1rem;
margin: 0 0 var(--space-2);
}
.widget-card__note {
font-size: var(--size-xs);
color: var(--text-muted);
margin: var(--space-3) 0 0;
}
/* White plate behind the iframe so the widget's own background blends in. */
.widget-card__frame {
display: inline-block;
background: var(--color-white);
border-radius: var(--radius-sm);
padding: var(--space-2);
min-height: 63px;
}
.widget-card__frame iframe { display: block; }
/* The Buildium widget is a fixed 250px wide and we're not allowed to resize
it. On a 320px phone the card's normal padding would squeeze it narrower
than that and clip the button, so the padding gets out of the way. */
@media (max-width: 26em) {
.widget-card { padding: var(--space-4) var(--space-3); }
.widget-card__frame { padding: 0; }
}
/* Responsive wrapper for the embedded Google Form. */
.embed-frame {
background: var(--color-white);
border: 1px solid var(--color-line);
border-radius: var(--radius);
padding: var(--space-2);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.embed-frame iframe {
display: block;
width: 100%;
min-height: 1100px;
border: 0;
}
@media (min-width: 46em) {
.embed-frame iframe { min-height: 1250px; }
}
/* ==========================================================================
14. PAGE HEADER (interior pages)
========================================================================== */
.page-header {
background: var(--color-green);
color: var(--color-white);
padding-block: clamp(2rem, 1.25rem + 3.5vw, 3.5rem);
}
.page-header h1 { color: var(--color-white); margin-bottom: var(--space-2); }
.page-header p {
color: rgba(255, 255, 255, 0.9);
max-width: 44rem;
margin: 0;
}
.page-header .eyebrow { color: var(--color-gold-soft); }
/* Breadcrumb-ish "You are here" text is intentionally omitted — the nav's
aria-current marker already communicates location on a 7-page site. */
/* Long-form article typography on interior pages. */
.prose h2 { margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--space-5); }
.prose ul { padding-left: 1.2em; }
/* ==========================================================================
15. SITE FOOTER
========================================================================== */
.site-footer {
background: var(--color-navy);
color: var(--color-footer-text);
font-size: var(--size-sm);
margin-top: auto;
}
.site-footer a { color: var(--color-white); text-decoration: none; }
.site-footer a:hover { color: var(--color-gold); text-decoration: underline; }
.site-footer__top {
display: grid;
gap: var(--space-6);
padding-block: var(--space-7);
}
@media (min-width: 46em) {
.site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer h2 {
color: var(--color-white);
font-size: 1rem;
font-family: var(--font-body);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.site-footer__brand-name {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-white);
margin-bottom: var(--space-2);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-block: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
justify-content: space-between;
font-size: var(--size-xs);
color: var(--color-footer-text);
}
.site-footer__bottom p { margin: 0; }
/* The small governance note at the bottom of the footer's first column. */
.managed-by {
font-size: var(--size-xs);
color: var(--color-footer-text);
line-height: 1.5;
margin-top: var(--space-3);
}
/* ==========================================================================
16. UTILITIES
========================================================================== */
.text-center { text-align: center; }
.text-xs { font-size: var(--size-xs); }
.muted { color: var(--text-muted); }
.lead { font-size: 1.08rem; color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
/* Simple definition-style list used for pool hours, meeting cadence, etc. */
.info-list {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
border-top: 1px solid var(--color-line);
}
.info-list li {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
justify-content: space-between;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-line);
}
.info-list dt, .info-list__label { font-weight: 700; color: var(--color-navy); }
.info-list__value { color: var(--text-muted); }
/* ==========================================================================
17. MOTION & PRINT PREFERENCES
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.btn:hover { transform: none; }
}
@media print {
.site-header, .site-nav, .nav-toggle, .skip-link, .btn,
.jump-nav, .faq-search { display: none !important; }
body { background: #fff; color: #000; }
.site-footer { background: #fff; color: #000; }
/* Printing the FAQ (or saving it as a PDF) should produce the whole
reference, not a list of collapsed headings. The answers are opened by
site.js just before printing — CSS can't do it reliably, because browsers
hide a closed through an internal mechanism that a display rule
doesn't reach. Here we just tidy up what's left. */
.faq-item__chevron { display: none !important; }
.faq-item { break-inside: avoid; border-color: #999; }
.badge { border: 1px solid #999; }
}