/* The Racquet Club at El Conquistador ================================================================== Derived from design-system/ — the master lives there, this is the one-way copy the site actually serves. Change the master first. Built by hand from: design-system/tokens/*.css verbatim, in styles.css order design-system/components/* each component's inline style object, turned into a class tokens/fonts.css is deliberately NOT here. It is an @import, and CSS requires @import before every other rule — dropped into the middle of this file the browser would silently ignore it and the whole type system would fall back to Times. The three faces are loaded by the in each page's instead, which is better for font loading anyway. TONE. The design system gives most components tone="light"|"reverse". Here that is one context class: .rc-band redefines the semantic variables, and every component inside it picks up the reversed palette without needing a variant of its own. ================================================================== */ /* ── tokens/colors.css ───────────────────────────────────────────── */ /* Warm paper, bay teal, brass. The teal is the club's colour and the one fixed point — it survived the redesign unchanged. */ :root { /* Base — light */ --paper: #F0ECE5; --paper-raised: #FBF9F5; --teal: #206679; --teal-mid: #3B6E7C; --teal-soft: #4A7C89; --brass: #8A6A3B; /* Base — reverse */ --teal-deep: #17505E; --teal-well: #12414C; --cream: #EFE3CD; --cream-mid: #A8C4CB; --brass-light: #C79A5B; /* Rules */ --rule: #20667926; --rule-strong: #20667933; --rule-reverse: #EFE3CD26; --rule-reverse-strong: #EFE3CD33; /* Tone — light is the default. .rc-band overrides these. */ --fg: var(--teal); --fg2: var(--teal-mid); --accent: var(--brass); --rule-c: var(--rule); --rule-strong-c: var(--rule-strong); --raised: var(--paper-raised); --ground: var(--paper); } /* ── tokens/typography.css ───────────────────────────────────────── */ :root { --display: "Libre Caslon Display", "Times New Roman", serif; --body: "EB Garamond", Garamond, Georgia, serif; --label: "Libre Franklin", "Helvetica Neue", sans-serif; --size-hero: clamp(2.5rem, 5.4vw, 3.875rem); --size-h1: clamp(2rem, 4.2vw, 3.25rem); --size-h2: 1.75rem; --size-h3: 1.1875rem; --size-figure: 1.6875rem; --size-lede: 1.375rem; --size-body: 1.0625rem; --size-small: 0.9375rem; --size-eyebrow: 0.625rem; --size-label: 0.625rem; --size-nav: 0.6875rem; /* Tracking. Only the sans is letterspaced; the Caslon is set solid. */ --track-eyebrow: 0.32em; --track-label: 0.2em; --track-nav: 0.18em; --track-button: 0.18em; --track-question: 0.14em; --track-display: 0; --leading-hero: 1.08; --leading-h2: 1.15; --leading-lede: 1.55; --leading-body: 1.7; --measure: 34rem; --measure-centered: 36rem; } /* ── tokens/spacing.css ──────────────────────────────────────────── */ /* Court-derived: 78ft x 36ft, service lines 21ft either side of the net, doubles alleys 4.5ft. The intervals are irregular because the court is. */ :root { --alley: 4.5px; --s1: 9px; --s2: 18px; --s3: 36px; /* court width */ --s4: 54px; /* standard section padding */ --s5: 78px; /* court length — page openings */ --s6: 117px; /* the pause before a reversed band */ --wrap-max: 66rem; --gutter: var(--s4); --gutter-narrow: var(--s2); } /* ── tokens/borders.css ──────────────────────────────────────────── */ :root { --radius: 0; --plate-pad: var(--s3); --photo-mat: var(--s1); --ornament-rule: 110px; /* the rule either side of the court mark */ } /* ── tokens/motion.css ───────────────────────────────────────────── */ /* Colour transitions only. A club does not animate. */ :root { --transition-hover: background 140ms ease, color 140ms ease, border-color 140ms ease; --focus-ring: 2px solid var(--brass); --focus-offset: 3px; } @media (prefers-reduced-motion: reduce) { :root { --transition-hover: none; } } /* ── tokens/base.css ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--teal); font-family: var(--body); font-size: var(--size-body); line-height: var(--leading-body); } img, svg { display: block; max-width: 100%; } figure { margin: 0; } a { color: var(--fg); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.16em; text-decoration-thickness: 1px; } a:hover { color: var(--accent); text-decoration-color: currentColor; } a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .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; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ══ COMPONENTS ═══════════════════════════════════════════════════ */ /* Wrap — the one centred column. */ .rc-wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); } /* Section. Undivided by default; --divided adds the hairline above. --opening is a page opening, --tall the wider standalone block. */ .rc-section { padding-block: var(--s4); } .rc-section--divided { border-top: 1px solid var(--rule-c); } .rc-section--centered { text-align: center; } .rc-section--opening { padding-block: var(--s5) var(--s3); } .rc-section--tall { padding-block: var(--s5); } /* Band — the reversed section. At most ONE per page: it is where the page asks for something. Two bands and neither reads as the moment that matters. Never reverse a whole page. */ .rc-band { --fg: var(--cream); --fg2: var(--cream-mid); --accent: var(--brass-light); --rule-c: var(--rule-reverse); --rule-strong-c: var(--rule-reverse-strong); --raised: var(--teal); --ground: var(--teal-deep); background: var(--teal-deep); color: var(--cream); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: var(--s4); text-align: center; } .rc-band a:hover { color: var(--cream); } .rc-band--spaced { margin-top: var(--s4); } /* Split — weighted rather than always even. The design system names this class but never defines it (there is no component stylesheet in the project), so the collapse below is a decision made here. */ .rc-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: center; } .rc-split--wide-left { grid-template-columns: 1.1fr 1fr; } .rc-split--wider-left { grid-template-columns: 1.2fr 1fr; } .rc-split--top { align-items: start; } @media (max-width: 46rem) { .rc-split, .rc-split--wide-left, .rc-split--wider-left { grid-template-columns: 1fr; } } /* Plate — raised fill, hairline, square corners. Never a shadow. */ .rc-plate { background: var(--raised); border: 1px solid var(--rule-c); padding: var(--plate-pad); } /* ── Brand ───────────────────────────────────────────────────────── */ /* Wordmark. The flanking rules are part of the mark, not decoration around it — the qualifier never appears without them. */ .rc-wordmark { display: inline-block; text-decoration: none; text-align: center; } .rc-wordmark__name { font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1.06; color: var(--fg); } .rc-wordmark__qual { display: flex; align-items: center; gap: 7px; margin-top: 7px; } /* The rules need a basis floor: the row is shrink-to-fit, so with a long qualifier flex:1 resolves to zero and they vanish. They never go. */ .rc-wordmark__rule { flex: 1 0 13px; height: 1px; background: var(--rule-strong-c); } .rc-wordmark__text { font-family: var(--label); font-weight: 500; font-size: 8px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } /* CourtMark — a doubles court at true proportion. An ornament, not the logo: it never stands in for the name. */ .rc-courtmark { width: 86px; height: auto; } .rc-courtmark .rc-courtmark__line { fill: none; stroke: var(--teal-soft); stroke-width: 1; vector-effect: non-scaling-stroke; } .rc-courtmark .rc-courtmark__net { stroke: var(--brass); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .rc-band .rc-courtmark .rc-courtmark__line { stroke: var(--cream-mid); } .rc-band .rc-courtmark .rc-courtmark__net { stroke: var(--brass-light); } /* Divider — rule, court mark, rule. The letterhead separator. */ .rc-divider { display: flex; align-items: center; justify-content: center; gap: var(--s2); } .rc-divider__rule { height: 1px; width: var(--ornament-rule); background: var(--rule-strong-c); } .rc-divider--spaced { margin-top: var(--s3); } /* Seal — the club's emblem. The one place a figure appears, and the only component with a raster dependency. */ .rc-seal { position: relative; width: 200px; height: 200px; flex: 0 0 auto; } .rc-seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; } .rc-seal__figure { position: absolute; left: 28.7%; top: 22%; width: 42.6%; height: 56%; } /* The seal leads the homepage. It is the club's mark, and at 200px the ring type reads — below ~84px the brass small caps drop out and below ~56px it stops being a seal at all. It says the name once, so the opening does not repeat what the masthead already says. */ .rc-seal__lead { display: flex; justify-content: center; } /* ── Navigation ──────────────────────────────────────────────────── */ .rc-masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-block: var(--s2); flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong-c); } .rc-nav { display: flex; gap: var(--s3); font-family: var(--label); font-weight: 500; font-size: var(--size-nav); letter-spacing: var(--track-nav); text-transform: uppercase; } .rc-nav a { color: var(--teal-soft); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: var(--transition-hover); } .rc-nav a:hover { color: var(--teal); border-bottom-color: var(--brass); } .rc-nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); } /* SiteFooter. --seal is the tighter top margin used when the seal sits above it. */ .rc-footer { margin-top: var(--s5); padding-block: var(--s3); border-top: 1px solid var(--rule-strong-c); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); font-size: var(--size-small); color: var(--fg2); } .rc-footer--seal { margin-top: var(--s3); } .rc-footer__note { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } /* ── Typography ──────────────────────────────────────────────────── */ /* HeroTitle is not mounted: the seal leads the homepage instead, and no other page uses a hero. Its spec lives in design-system/components/ typography/HeroTitle.jsx if it is ever wanted back. */ .rc-pagetitle { font-family: var(--display); font-weight: 400; font-size: var(--size-h1); line-height: var(--leading-hero); margin: 0; text-wrap: balance; color: var(--fg); } .rc-eyebrow { font-family: var(--label); font-weight: 500; font-size: var(--size-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s2); } .rc-h2 { font-family: var(--display); font-weight: 400; font-size: var(--size-h2); line-height: var(--leading-h2); margin: 0 0 var(--s2); color: var(--fg); } .rc-lede { font-size: var(--size-lede); line-height: var(--leading-lede); max-width: var(--measure); margin: 0 0 var(--s2); color: var(--fg); } .rc-lede--centered { max-width: var(--measure-centered); margin: 0 auto var(--s2); } /* Prose. A centred paragraph longer than three lines is a mistake. */ .rc-prose { max-width: var(--measure); color: var(--fg2); font-size: var(--size-body); line-height: var(--leading-body); } .rc-prose p { margin: 0 0 var(--s2); } .rc-prose--centered { margin-inline: auto; } /* ── Figures ─────────────────────────────────────────────────────── */ /* Scarcity is stated as a number, never as an adjective. Figures are set in the display Caslon — engraved rather than measured. */ .rc-figures { display: flex; flex-wrap: wrap; justify-content: center; padding-block: var(--s2); border-top: 1px solid var(--rule-strong-c); border-bottom: 1px solid var(--rule-strong-c); } .rc-figure { padding: 0 var(--s3); text-align: center; border-left: 1px solid var(--rule-c); min-width: 9rem; } .rc-figure:first-child { border-left: none; } .rc-figure__value { font-family: var(--display); font-size: var(--size-figure); line-height: 1.2; color: var(--fg); } .rc-figure__label { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); margin-top: 4px; } .rc-details { border-top: 1px solid var(--rule-c); max-width: var(--measure); margin: 0; } .rc-details__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); padding-block: var(--s1); border-bottom: 1px solid var(--rule-c); } .rc-details dt { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); } .rc-details dd { margin: 0; font-family: var(--display); font-size: var(--size-h3); text-align: right; color: var(--fg); } /* ── Forms ───────────────────────────────────────────────────────── */ /* The label says what happens. No club in the survey has a "Join Now" button. Hover shifts toward brass — never a lift, never a shadow. */ .rc-button { font-family: var(--label); font-weight: 600; font-size: var(--size-nav); letter-spacing: var(--track-button); text-transform: uppercase; color: var(--paper); background: var(--teal); border: 1px solid var(--teal); padding: 11px var(--s3); border-radius: 0; white-space: nowrap; cursor: pointer; transition: var(--transition-hover); } .rc-button:hover { background: var(--brass); border-color: var(--brass); } .rc-band .rc-button { color: var(--teal-deep); background: var(--brass-light); border-color: var(--brass-light); } .rc-band .rc-button:hover { background: var(--cream); border-color: var(--cream); } .rc-input { flex: 1 1 15rem; font-family: var(--body); font-size: 1.0625rem; color: var(--teal); background: var(--paper-raised); border: 1px solid var(--rule-strong); padding: 11px var(--s2); border-radius: 0; } .rc-band .rc-input { color: var(--cream); background: var(--teal-well); border-color: var(--rule-reverse-strong); } /* WaitlistForm — the whole revenue model in one block. A club whose only online purpose is collecting names must actually collect a name. */ .rc-waitlist__body { font-size: var(--size-body); line-height: var(--leading-body); max-width: 30rem; margin: 0 auto var(--s2); color: var(--fg2); } .rc-waitlist__form { display: flex; gap: var(--s1); max-width: 30rem; margin: 0 auto; flex-wrap: wrap; } /* ── Content ─────────────────────────────────────────────────────── */ /* Photo — a print on a mat, never bled to the edge. */ .rc-photo { background: var(--raised); border: 1px solid var(--rule-c); padding: var(--photo-mat); margin: 0; } .rc-photo img { width: 100%; height: auto; } .rc-photo figcaption { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); padding: var(--s2) 0 var(--alley); } /* WonderingList — the questions a prospect is too embarrassed to ask, none of them about money. */ .rc-wondering { list-style: none; margin: 0 auto; padding: 0; max-width: var(--measure); text-align: left; } .rc-wondering li { padding-block: var(--s2); border-bottom: 1px solid var(--rule-c); } .rc-wondering li:last-child { border-bottom: none; } .rc-wondering__q { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-question); text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .rc-wondering__a { margin: 0; font-size: var(--size-body); line-height: 1.6; color: var(--fg); } /* Steward — withholding the fee only works if a person is standing at the door. */ .rc-steward { border-left: 2px solid var(--accent); padding-left: var(--s2); max-width: var(--measure); } .rc-steward--centered { border-left: none; padding-left: 0; margin-inline: auto; text-align: center; } .rc-steward--spaced { margin-top: var(--s3); } .rc-steward__name { font-family: var(--display); font-size: var(--size-h3); margin: 0; color: var(--fg); } .rc-steward__role { font-family: var(--label); font-weight: 500; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); margin: 5px 0 7px; } .rc-steward__tel { margin: 0; font-size: var(--size-body); } .rc-steward__tel a { color: var(--fg); } /* ── Page furniture ──────────────────────────────────────────────── */ /* The map on Contact, filtered to sit into the paper rather than glow off it. */ .rc-map { border: 1px solid var(--rule-strong-c); background: var(--paper-raised); aspect-ratio: 4 / 5; overflow: hidden; } .rc-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.5) sepia(0.12) contrast(1.02); } /* ── Narrow screens ────────────────────────────────────────────── The gutter is court-scale: 54px each side is a third of a phone, which squeezed the navigation off the edge and forced the figures to stack (taking their vertical hairlines with them, pointing the wrong way). spacing.css ships --gutter-narrow for exactly this and the design system never spent it. Vertical rhythm is deliberately left alone — space is where the club's calm comes from, and it reads correctly on a phone. */ @media (max-width: 46rem) { .rc-wrap { padding-inline: var(--gutter-narrow); } .rc-band { margin-inline: calc(-1 * var(--gutter-narrow)); padding-inline: var(--gutter-narrow); } .rc-nav { gap: var(--s2); } /* Stay in one row so the hairlines keep separating columns, not rows. */ .rc-figure { min-width: 0; flex: 1; padding: 0 var(--s1); } }