/* ========================================================================== Public org website ("front door") — Cub Scout "trail badge" design system. Brand basis: org_types/cub_scout_pack/brand_guidelines.md Foundation (used heavily): Cub Scouts Blue #003F87 + Gold #FDC116. Accents (sparing): SA Red #CE1126, Tan #D6CEBD, Gray #515354. Type: Montserrat (official free alternate for Proxima Nova). Design language: badge/patch "stitching" (dashed gold details), deep blue grounds, parchment-canvas content bands, trail-marker numbered steps. Mobile-first; the design must hold with zero photos. ========================================================================== */ /* Brand values flow from the ORG_TYPE theme (org_types//public_theme.css, the `--brand-*` contract) inlined into ahead of this file. The literal fallbacks below keep this stylesheet self-sufficient: if an org type ships no theme, the page still renders in the Cub Scout palette. Structural rules below reference only these `--cs-*` aliases, so the brand seam is this block alone. */ :root { --cs-blue: var(--brand-primary, #003F87); --cs-blue-dark: var(--brand-primary-dark, #002a5c); /* SA Dark Blue #003366 family */ --cs-blue-pale: var(--brand-primary-pale, #9AB3D5); --cs-gold: var(--brand-accent, #FDC116); --cs-gold-deep: var(--brand-accent-deep, #e0a800); --cs-red: var(--brand-danger, #CE1126); /* sparing accent; never tinted */ --cs-tan: var(--brand-tan, #D6CEBD); --cs-tan-light: var(--brand-tan-light, #E9E9E4); --cs-gray: var(--brand-muted, #515354); --cs-gray-dark: var(--brand-ink, #232528); --cs-canvas: var(--brand-paper, #f8f6f0); /* warm paper band */ --cs-white: var(--brand-surface, #ffffff); --cs-font-display: var(--brand-font-display, "Montserrat", "Helvetica Neue", Arial, sans-serif); --cs-font-body: var(--brand-font-body, "Montserrat", "Helvetica Neue", Arial, sans-serif); /* Per-tenant accent: a tenant's own color layered WITHIN the Blue/Gold frame (brand_guidelines.md). Defaults to the org-type accent; overridden inline per tenant in the page . Consumed by accent surfaces below. */ --tenant-accent: var(--cs-gold); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --shadow-card: 0 2px 6px rgba(0, 42, 92, 0.10), 0 12px 32px rgba(0, 42, 92, 0.12); --stitch: 2px dashed var(--brand-stitch-color, rgba(253, 193, 22, 0.55)); } * { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.cs-site { margin: 0; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.65; color: var(--cs-gray-dark); background: var(--cs-canvas); -webkit-font-smoothing: antialiased; } .cs-site h1, .cs-site h2, .cs-site h3 { font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--cs-blue); text-wrap: balance; } .cs-site p { margin: 0 0 1em; } .cs-site a { color: var(--cs-blue); } .cs-site img { max-width: 100%; display: block; } .cs-container { width: min(1080px, 100% - 2.5rem); margin-inline: auto; } /* --- The "stitch" motif: dashed gold rule, like patch embroidery --------- */ .cs-stitch { border: 0; border-top: var(--stitch); margin: 0 auto; width: 72px; } /* Eyebrow label: mono-spaced-feeling uppercase tracker above headings */ .cs-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cs-blue); margin-bottom: 0.6rem; } .cs-on-blue .cs-eyebrow { color: var(--cs-gold); } /* ========================================================================== Header / nav ========================================================================== */ .cs-header { background: var(--cs-blue); color: var(--cs-white); border-bottom: 4px solid var(--cs-gold); position: sticky; top: 0; z-index: 50; } /* Branding-only header for the embedded form: no nav, and not sticky (the embed is served standalone on the tenant's domain, where a sticky bar is unwanted). */ .cs-embed-header { position: static; } .cs-header-inner { display: flex; align-items: center; gap: 0.9rem; padding: 0.65rem 0; } .cs-site .cs-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--cs-white); min-width: 0; } .cs-brand img { height: 42px; width: auto; } .cs-brand-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--cs-gold); color: var(--cs-blue); font-weight: 800; font-size: 1.05rem; border-radius: 50%; outline: var(--stitch); outline-offset: -5px; } .cs-brand-name { font-weight: 800; font-size: 1.02rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-brand-sub { /* Wrap (don't inherit the name's nowrap/clip) so a long "Chartered by ..." line shows in full on narrow screens instead of getting cut off. */ display: block; white-space: normal; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--cs-blue-pale); } /* flex-wrap: with up to 3 catalog links added beyond the core 3 + CTA, a single row can outgrow tablet-ish desktop widths — wrap onto a second row (header height grows a touch) rather than squeeze link labels into an illegible mid-word break. white-space: nowrap on the links themselves keeps each label intact when a row does get tight. */ .cs-nav { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.25rem; } .cs-site .cs-nav a { color: var(--cs-white); text-decoration: none; white-space: nowrap; font-weight: 600; font-size: 0.9rem; padding: 0.45rem 0.7rem; border-radius: 8px; } .cs-nav a:hover { background: rgba(255, 255, 255, 0.12); } .cs-nav a[aria-current="page"] { color: var(--cs-gold); box-shadow: inset 0 -3px 0 var(--cs-gold); border-radius: 8px 8px 0 0; } .cs-nav .cs-btn { margin-left: 0.4rem; } /* Desktop "More" overflow for catalog pages beyond the first 3 — a details popover under the nav, same pattern as .cs-nav-toggle-menu below. */ .cs-nav-more { position: relative; } .cs-nav-more > summary { list-style: none; cursor: pointer; color: var(--cs-white); font-weight: 600; font-size: 0.9rem; padding: 0.45rem 0.7rem; border-radius: 8px; } .cs-nav-more > summary::-webkit-details-marker { display: none; } .cs-nav-more > summary:hover { background: rgba(255, 255, 255, 0.12); } .cs-nav-more[open] > summary { background: rgba(255, 255, 255, 0.12); } .cs-nav-more-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 200px; padding: 0.5rem; background: var(--cs-blue-dark); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-shadow: var(--shadow-card); display: grid; gap: 0.15rem; z-index: 60; } .cs-site .cs-nav-more-menu a { color: var(--cs-white); text-decoration: none; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.92rem; } .cs-nav-more-menu a:hover { background: rgba(255, 255, 255, 0.1); } .cs-nav-more-menu a[aria-current="page"] { color: var(--cs-gold); } /* Mobile nav: collapses to a details popover, no JS required */ .cs-nav-toggle { display: none; } @media (max-width: 720px) { .cs-nav { display: none; } .cs-nav-toggle { display: block; margin-left: auto; position: relative; } .cs-nav-toggle > summary { list-style: none; cursor: pointer; color: var(--cs-white); font-weight: 700; font-size: 0.9rem; padding: 0.5rem 0.8rem; border: 1.5px solid rgba(255,255,255,0.45); border-radius: 8px; } .cs-nav-toggle > summary::-webkit-details-marker { display: none; } .cs-nav-toggle[open] > summary { background: rgba(255,255,255,0.12); } .cs-nav-toggle-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 0.5rem; background: var(--cs-blue-dark); border: 1px solid rgba(255,255,255,0.18); border-radius: 12px; box-shadow: var(--shadow-card); display: grid; gap: 0.15rem; } .cs-site .cs-nav-toggle-menu a { color: var(--cs-white); text-decoration: none; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.95rem; } .cs-nav-toggle-menu a:hover { background: rgba(255,255,255,0.1); } .cs-nav-toggle-menu a[aria-current="page"] { color: var(--cs-gold); } } /* ========================================================================== Buttons ========================================================================== */ .cs-btn { display: inline-block; font-family: inherit; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; text-align: center; white-space: nowrap; padding: 0.78rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer; transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out); } .cs-btn:hover { transform: translateY(-2px); } .cs-btn:active { transform: translateY(0); } /* Disabled / in-flight (the interest form swaps the label to "Sending…"). */ .cs-btn:disabled, .cs-btn[aria-disabled="true"] { opacity: 0.7; cursor: default; transform: none; box-shadow: none; } /* `.cs-site a` (below) outranks single-class button colors on buttons, so button color rules carry the .cs-site prefix to win specificity. */ .cs-site .cs-btn-gold, .cs-btn-gold { background: var(--cs-gold); color: var(--cs-blue); outline: var(--stitch); outline-offset: -6px; box-shadow: 0 6px 18px rgba(253, 193, 22, 0.35); } .cs-btn-gold:hover { box-shadow: 0 10px 26px rgba(253, 193, 22, 0.45); } .cs-site .cs-btn-ghost, .cs-btn-ghost { background: transparent; color: var(--cs-white); border: 2px solid rgba(255, 255, 255, 0.65); } .cs-site .cs-btn-ghost:hover { border-color: var(--cs-gold); color: var(--cs-gold); } .cs-site .cs-btn-blue, .cs-btn-blue { background: var(--cs-blue); color: var(--cs-white); box-shadow: 0 6px 18px rgba(0, 63, 135, 0.3); } /* Keyboard focus: explicit ring everywhere; the gold button's decorative stitch uses `outline`, so focus there switches to a blue ring. */ .cs-site :focus-visible { outline: 3px solid var(--cs-gold); outline-offset: 2px; } .cs-site .cs-btn-gold:focus-visible, .cs-site .cs-cta-panel a:focus-visible { outline: 3px solid var(--cs-blue); outline-offset: 2px; } /* Screen-reader-only text (calendar dates for the visual date chip). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ========================================================================== Hero (Home) ========================================================================== */ .cs-hero { position: relative; display: grid; align-items: center; /* Photo-forward hero: tall enough that the tenant's own photo reads as the opening statement, content-bound so a short tagline never floats in a void. (Front-door UX revamp Phase 4: bolder, photo carries the warmth.) */ min-height: clamp(380px, 52vh, 580px); background: var(--cs-blue-dark); color: var(--cs-white); overflow: hidden; } .cs-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; /* Let the photo carry the warmth (authentic outdoor adventure). A whisper of desaturation keeps it on-brand without crushing it to a flat panel. */ filter: saturate(0.96); opacity: 1; } .cs-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; /* Graded diagonal scrim, lighter than the original flat wash: anchor the headline zone (left) and the CTA zone (bottom), let the photo actually show elsewhere. Text legibility over bright tenant photos is guaranteed by the text-shadow floor below, not by drowning the image. */ background: linear-gradient(97deg, rgba(0, 42, 92, 0.84) 0%, rgba(0, 42, 92, 0.55) 46%, rgba(0, 42, 92, 0.18) 100%), linear-gradient(0deg, rgba(0, 30, 66, 0.62) 0%, rgba(0, 30, 66, 0) 40%); } .cs-hero-inner { position: relative; z-index: 2; padding: clamp(1.9rem, 5vw, 3rem) 0 clamp(2.1rem, 5vw, 3.25rem); max-width: 760px; } /* Hero layout: single column by default. When an upcoming join event is present the intro and the event card sit side by side (photo shows past the card on the right) so the event no longer eats its own full-width band below the fold. */ .cs-hero-grid { position: relative; z-index: 2; display: grid; align-items: center; } /* With an event card, the hero band owns its top/bottom breathing room on the GRID (uniform padding-block) so both the intro and the card clear the header's gold line above and the section below — otherwise the card's gold top-border kisses the header line and its bottom edge the next section. The inner then drops its own vertical padding so it isn't doubled, and the grid gap spaces intro from card when they stack. */ .cs-hero--with-event .cs-hero-inner { padding-block: 0; } .cs-hero--with-event .cs-hero-grid { padding-block: clamp(2.25rem, 5.5vw, 3.25rem); gap: clamp(1.5rem, 4vw, 2rem); } @media (min-width: 880px) { .cs-hero--with-event .cs-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 25rem); gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } /* let the intro breathe across its share of the row rather than cap at 760px */ .cs-hero--with-event .cs-hero-inner { max-width: none; } } /* the card carries z-index/padding itself; the grid wrapper owns positioning */ .cs-hero-grid .cs-hero-inner { z-index: auto; } .cs-hero-event { position: relative; } /* Inside the hero the card fills its column (its own max-width/auto-centering is for the old standalone band); trim its top margin so it aligns in the row. */ .cs-hero-event .cs-event-cta { max-width: 34rem; margin-inline: auto; } @media (min-width: 880px) { .cs-hero-event .cs-event-cta { max-width: none; margin-inline: 0; } } /* Tighten the hero's vertical rhythm: trim the eyebrow gap, the default h1 margins, and the subtitle/CTA spacing so the band reads compact. */ .cs-hero .cs-eyebrow { margin-bottom: 0.35rem; } .cs-hero h1 { margin: 0.1em 0 0.3em; } .cs-hero-sub { margin: 0; } .cs-hero-ctas { margin-top: 1.15rem; } .cs-hero h1 { color: var(--cs-white); font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.04; text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance; } /* Legibility insurance: the scrim lightens to 0.18 on the photo side, and a tenant may upload a bright hero photo — a firm blue shadow keeps the white text AA regardless of what's behind it, without darkening the whole hero. */ .cs-hero h1, .cs-hero-sub, .cs-hero .cs-eyebrow { text-shadow: 0 1px 3px rgba(0, 30, 66, 0.65), 0 2px 20px rgba(0, 30, 66, 0.6); } .cs-hero h1 .cs-underline { /* gold stitch under the last words of the tagline */ border-bottom: 4px solid var(--cs-gold); padding-bottom: 0.06em; } .cs-hero-sub { font-size: clamp(1.05rem, 2.5vw, 1.3rem); font-weight: 500; color: var(--cs-tan-light); max-width: 52ch; } /* Quiet, low-commitment secondary link (e.g. "Just have questions? Say hello…" under an intro paragraph): smaller than body text, underlined at rest per the public-page house rule, with enough vertical padding that the tap target clears the 44px phone ideal (padding does the work so the at-rest rhythm stays tight). */ .cs-quiet-link { font-size: 0.92rem; margin-top: 0.4rem; } .cs-quiet-link a { display: inline-block; padding-block: 0.7rem; text-decoration: underline; } /* On a blue band the default link color (`--cs-blue`) would render invisible against the blue background — same fix `.cs-on-blue .cs-eyebrow` already uses: swap to the same light tone `.cs-hero-sub` uses, which clears AA. */ .cs-on-blue .cs-quiet-link a { color: var(--cs-tan-light); } .cs-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 1.6rem; } /* The hero's secondary CTA sits quieter — smaller, so the gold "Get in touch" primary leads decisively. Hierarchy comes from SIZE, not a washed-out color: the label stays white and the border stays legible so it clears WCAG against a bright hero photo (the scrim's contrast can't be guaranteed everywhere). */ .cs-hero-ctas .cs-btn-ghost { padding: 0.6rem 1.2rem; font-size: 0.88rem; } /* staggered load reveal (hero only; respect reduced motion) */ @media (prefers-reduced-motion: no-preference) { .cs-hero .cs-reveal { opacity: 0; transform: translateY(14px); animation: cs-rise 0.7s var(--ease-out) forwards; } .cs-hero .cs-reveal:nth-child(2) { animation-delay: 0.12s; } .cs-hero .cs-reveal:nth-child(3) { animation-delay: 0.24s; } .cs-hero .cs-reveal:nth-child(4) { animation-delay: 0.36s; } } @keyframes cs-rise { to { opacity: 1; transform: none; } } /* ========================================================================== Content bands + badge cards ========================================================================== */ .cs-band { padding: clamp(2.8rem, 7vw, 4.5rem) 0; } .cs-band-blue { background: var(--cs-blue); color: var(--cs-white); } .cs-band-blue h1, .cs-band-blue h2, .cs-band-blue h3 { color: var(--cs-white); } .cs-band-blue h1 { text-transform: uppercase; } .cs-band-tan { background: var(--cs-tan-light); } /* Band spacing modifiers (replace per-template inline padding). */ .cs-band--flush { padding: 0; } .cs-band--tight-bottom { padding-bottom: 2rem; } /* Layout utilities — centered band content + a centered reading measure, used by the home/join CTA strips and the form intro (was inline style="..."). */ .cs-center { text-align: center; } /* `.cs-site p { margin: 0 0 1em }` (0,0,1,1) would otherwise zero the inline margins and pin a centered measure to the left — scope to .cs-site so the auto-centering wins. */ .cs-site .cs-measure { max-width: 52ch; margin-inline: auto; } .cs-stack-top { margin-top: 1.2em; } .cs-stack-card { margin-top: 1.5rem; } /* gap above a full-width card under a split */ .cs-stack-sm { margin-top: 0.9rem; } /* small top gap (e.g. a field after a checkbox) */ .cs-section-head { text-align: center; max-width: 640px; margin: 0 auto 2rem; } .cs-section-head h1, .cs-section-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); text-transform: uppercase; } .cs-card { background: var(--cs-white); border-radius: 16px; box-shadow: var(--shadow-card); padding: 1.6rem 1.5rem; position: relative; } .cs-card::after { /* inner stitched border = patch */ content: ""; position: absolute; inset: 7px; border: var(--stitch); border-radius: 11px; pointer-events: none; opacity: 0.45; } /* The last paragraph in a card carries no trailing gap (was inline style="margin-bottom:0" on the join cards). */ .cs-card > p:last-child { margin-bottom: 0; } .cs-split { display: grid; gap: 1.5rem; align-items: center; } @media (min-width: 880px) { .cs-split { grid-template-columns: 1fr 1fr; gap: 3rem; } /* Photo sits second by default; `.is-first` flips it ahead of the prose. */ .cs-split > .cs-split-photo.is-first { order: -1; } } /* A pair of `.cs-card`s sharing a split (the join who/what-to-expect pair) reads as one balanced set only if they match height, regardless of which has more copy — stretch the row and let each card fill it. */ .cs-split--cards { align-items: stretch; } .cs-split--cards .cs-card { height: 100%; } .cs-split-photo img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow-card); } .cs-split-photo { position: relative; align-self: start; } @media (min-width: 880px) { .cs-band-blue .cs-split-photo { position: sticky; top: 90px; } } .cs-split-photo::before { /* Offset frame behind the photo — the one decorative surface a tenant's own accent tints (defaults to gold, so no change unless a tenant sets one). Keeps the pack's color "within the Blue/Gold frame" per brand_guidelines. */ content: ""; position: absolute; inset: 14px -10px -10px 14px; border: 3px solid var(--tenant-accent); border-radius: 18px; z-index: -1; } /* prose width for static/markdown blocks */ .cs-prose { max-width: 68ch; } .cs-prose h2 { font-size: 1.25rem; margin-top: 1.6em; } .cs-prose ul { padding-left: 1.2rem; } /* Verbatim recitations (Scout Oath / Law) get a gold accent bar so they read as distinct quotations, not body copy — also breaks up the text wall. */ .cs-prose blockquote { margin: 0.5em 0 1.1em; padding: 0.15em 0 0.15em 1rem; border-left: 3px solid var(--cs-gold); font-weight: 500; } .cs-prose blockquote p { margin: 0; } /* Progressive disclosure for long static explainers (the home program block): native
; the summary reads as a quiet text button with a chevron. Full content stays in the DOM (SEO / no-JS). */ .cs-more { margin-top: 1.1rem; } .cs-more summary { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; min-height: 44px; /* tap-target floor */ font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cs-gold); } .cs-more summary::-webkit-details-marker { display: none; } .cs-more summary::after { content: ""; width: 0.55em; height: 0.55em; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-0.1em); transition: transform 0.2s var(--ease-out); } .cs-more[open] summary::after { transform: rotate(225deg) translateY(-0.1em); } @media (prefers-reduced-motion: reduce) { .cs-more summary::after { transition: none; } } /* Underlined at rest: the summary sits near gold uppercase eyebrows and the chevron alone is too quiet a cue — it must read as a link without hover (touch has none). */ .cs-more summary { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .cs-more summary:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 3px; border-radius: 2px; } .cs-more[open] summary { margin-bottom: 0.4rem; } /* On white/tan bands the gold summary would wash out; inherit the band's ink. */ .cs-band:not(.cs-band-blue) .cs-more summary { color: var(--cs-blue); } /* ========================================================================== CTA panel (gold) — express interest ========================================================================== */ .cs-cta-panel { /* Warm radial highlight + gold-to-deep gradient gives the slab depth instead of one flat saturated fill; the blue top rule ties it to the event card. */ background: radial-gradient(125% 145% at 50% -15%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(168deg, var(--cs-gold) 0%, var(--cs-gold-deep) 100%); color: var(--cs-blue); border-radius: 20px; border-top: 5px solid var(--cs-blue); padding: clamp(2.1rem, 5vw, 3.1rem) clamp(1.5rem, 5vw, 3rem) clamp(1.9rem, 5vw, 2.9rem); text-align: center; position: relative; box-shadow: var(--shadow-card); overflow: hidden; } /* Decorative trail-blaze diamond above the heading — echoes the Getting Started trail markers and gives the panel a composed top, not a bare headline. */ .cs-cta-panel::before { content: ""; display: block; width: 16px; height: 16px; margin: 0 auto 1rem; background: var(--cs-blue); transform: rotate(45deg); border-radius: 3px; box-shadow: 0 0 0 5px rgba(0, 63, 135, 0.14); } .cs-cta-panel::after { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(0, 63, 135, 0.4); border-radius: 14px; pointer-events: none; } .cs-cta-panel h2 { color: var(--cs-blue); text-transform: uppercase; margin-top: 0; } .cs-cta-panel p { max-width: 46ch; margin-inline: auto; font-weight: 500; } .cs-cta-panel .cs-btn { position: relative; z-index: 1; margin-top: 0.3rem; } /* ========================================================================== Upcoming join-event CTA (auto; top of home) — the next Open House/kickoff, featured in-season or within JOIN_EVENT_CTA_WINDOW_DAYS. Built in agent/website/event_cta.py. A focused announcement card so it reads as "here's the next thing to come to", distinct from the gold express-interest panel lower down the page. ========================================================================== */ .cs-event-cta { background: var(--cs-blue); color: var(--cs-white); border-radius: 16px; border-top: 5px solid var(--cs-gold); /* The card sits blue-on-blue over the hero photo/scrim, so the blue-tinted card shadow alone barely separates it (worst when the hero photo is bright or the card stacks over the darkest scrim on mobile). A faint white hairline ring — drawn via box-shadow so it hugs the rounded corners and adds no layout — keeps the card reading as a distinct object on any background. */ box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.16); padding: clamp(1.6rem, 3.4vw, 2.2rem) clamp(1.25rem, 3vw, 1.75rem); max-width: 580px; margin-inline: auto; } .cs-event-cta .cs-eyebrow { color: var(--cs-gold); margin-bottom: 0.4rem; } .cs-event-cta h2 { color: var(--cs-white); text-transform: uppercase; font-size: clamp(1.18rem, 3vw, 1.5rem); margin: 0.1rem 0 0.7rem; } .cs-event-facts { margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.3rem; } .cs-event-facts > div { display: flex; gap: 0.75rem; align-items: baseline; } .cs-event-facts dt { flex: none; min-width: 4.3rem; font: 700 0.72rem/1.5 var(--cs-font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--cs-gold); } .cs-event-facts dd { margin: 0; font-weight: 500; color: var(--cs-white); } /* Keep the link INLINE (not inline-block): the row baseline-aligns the gold label to the value, and an inline-block's baseline is its LAST line — which would drop the "Where" label to the address's second line. Inline keeps the dd's baseline on its first line so the label sits beside the place name. */ .cs-event-facts dd a { color: inherit; text-decoration: underline; } .cs-event-cta-note { max-width: 56ch; margin: 0 0 0.9rem; color: var(--cs-tan-light); } /* Interactive elements sit on the blue card, so the default gold/blue focus ring would vanish into it — give everything on the card a white ring that reads on blue (covers the gold button and the Directions link alike). */ .cs-site .cs-event-cta :focus-visible { outline-color: var(--cs-white); outline-offset: 3px; } /* ========================================================================== Trail-marker steps (Getting Started) ========================================================================== */ .cs-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; } .cs-step { display: grid; grid-template-columns: 52px 1fr; gap: 1.1rem; position: relative; padding-bottom: 1.9rem; } .cs-step:not(:last-child)::before { /* the trail: dashed connector between markers */ content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; border-left: var(--stitch); } .cs-step-num { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: var(--cs-blue); color: var(--cs-gold); font-weight: 800; font-size: 1.25rem; border-radius: 50%; outline: var(--stitch); outline-offset: -6px; } .cs-step h3 { font-size: 1.08rem; margin-bottom: 0.25em; } .cs-step p { margin-bottom: 0.4em; color: var(--cs-gray); } .cs-step a { font-weight: 700; } /* "We'll walk you through the rest…" reassurance under the steps list. */ .cs-steps-note { max-width: 60ch; margin: 0.5rem auto 0; text-align: center; color: var(--cs-gray); } /* ========================================================================== Calendar ========================================================================== */ .cs-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; } .cs-cal-head h2 { margin: 0; text-transform: uppercase; } /* The page title is an

on the calendar page (page-level heading): the default view's warm fixed heading, or a look-back month label. */ .cs-cal-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); text-transform: uppercase; } /* Month group heading over each list (default view has one per month). */ .cs-cal-month { text-transform: uppercase; font-size: 1rem; letter-spacing: 0.08em; color: var(--cs-blue); margin: 1.8rem 0 0.7rem; } .cs-cal-month:first-of-type { margin-top: 0.4rem; } .cs-cal-nav { display: flex; gap: 0.5rem; } .cs-cal-nav a, .cs-cal-nav span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cs-white); color: var(--cs-blue); border: 2px solid var(--cs-blue); font-weight: 800; text-decoration: none; font-size: 1.1rem; } .cs-cal-nav span { opacity: 0.25; border-color: var(--cs-gray); color: var(--cs-gray); } /* Look-back affordances: "Back to upcoming" above a finished month, and the quiet "See what we've been up to" entry at the foot of the upcoming list. */ .cs-cal-back { margin: 0 0 1.2rem; } .cs-cal-foot { margin-top: 1.6rem; } .cs-cal-lookback { margin: 0 0 0.6rem; } /* Both look-back links carry a 44px tap height (they are lone text links, not buttons, so the hit area needs padding to clear the phone floor). */ .cs-cal-back a, .cs-cal-lookback a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } /* upcoming list */ .cs-event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; } /* A folded month keeps a little air between the summary and its first heading. */ .cs-cal-fold[open] .cs-cal-month:first-of-type { margin-top: 0.9rem; } .cs-event-item { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; background: var(--cs-white); border-radius: 14px; padding: 0.9rem 1rem; box-shadow: 0 1px 4px rgba(0, 42, 92, 0.10); align-items: center; } .cs-event-date { text-align: center; background: var(--cs-blue); color: var(--cs-white); border-radius: 10px; padding: 0.45rem 0.2rem; line-height: 1.1; } .cs-event-date b { display: block; font-size: 1.3rem; color: var(--cs-gold); } .cs-event-date small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .cs-event-item h3 { font-size: 1rem; margin: 0 0 0.15em; } .cs-event-meta { font-size: 0.85rem; color: var(--cs-gray); margin: 0; } .cs-event-dens { margin: 0.3em 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; } .cs-den-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cs-blue); background: rgba(0, 63, 135, 0.10); border-radius: 999px; padding: 0.12rem 0.55rem; white-space: nowrap; } /* Completed events stay in the list (the org reads as alive) but as texture, not the message: a muted paper card, a gray date chip with a small check. Ink stays on AA-passing pairings (gray #515354 on white/tan-light; white on the gray chip) — the treatment is quiet, never a dropout. */ .cs-event-item.is-past { background: var(--cs-tan-light); box-shadow: none; } .cs-event-item.is-past .cs-event-date { background: var(--cs-gray); } .cs-event-item.is-past .cs-event-date b { color: var(--cs-white); } .cs-event-item.is-past h3 { color: var(--cs-gray); } .cs-event-check { display: block; margin-top: 0.1rem; font-size: 0.72rem; line-height: 1; color: var(--cs-gold); } .cs-empty { text-align: center; padding: 2.5rem 1rem; color: var(--cs-gray); background: var(--cs-white); border-radius: 14px; } .cs-empty p { margin: 0; } /* ========================================================================== Footer ========================================================================== */ .cs-footer { background: var(--cs-blue-dark); color: var(--cs-blue-pale); margin-top: clamp(2.5rem, 7vw, 4rem); border-top: 4px solid var(--cs-gold); font-size: 0.88rem; } .cs-site .cs-footer a { color: var(--cs-white); } .cs-footer-grid { display: grid; gap: 1.6rem; padding: 2.2rem 0 1.4rem; } @media (min-width: 720px) { .cs-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } .cs-footer h4 { color: var(--cs-gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.6rem; } .cs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } /* Lift footer text links to a >=24px touch target (WCAG 2.2 target size) while keeping the column rhythm — the reduced gap above absorbs the added padding. */ .cs-footer li a { display: inline-block; padding-block: 0.3rem; } .cs-footer-legal { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 1.1rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1.6rem; align-items: center; justify-content: space-between; font-size: 0.78rem; } .cs-attribution { max-width: 52ch; opacity: 0.8; } /* Platform attribution wordmark is a link to membercairn.com. Fade the whole unit slightly and brighten on hover/focus so it reads as clickable (the inner logo/text carry their own inline colors, so we animate the link, not them). */ .cs-powered-link { display: inline-flex; text-decoration: none; border-radius: 6px; opacity: 0.85; transition: opacity 0.15s ease; } .cs-powered-link:hover, .cs-powered-link:focus-visible { opacity: 1; } .cs-powered-link:focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 3px; } /* "Follow us" social row — icon pills in the identity column. Hidden entirely when no links are set (the template guards on website.social). */ .cs-footer-social { margin-top: 1.2rem; } .cs-footer-social ul { display: flex; flex-wrap: wrap; gap: 0.6rem; /* overrides .cs-footer ul grid */ } .cs-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); transition: background 0.15s ease, color 0.15s ease; } .cs-footer-social a:hover, .cs-footer-social a:focus-visible { background: var(--cs-gold); color: var(--cs-blue-dark); } .cs-footer-social a:focus-visible { outline: 2px solid var(--cs-white); outline-offset: 2px; } .cs-social-icon { width: 20px; height: 20px; display: block; } /* Google reviews trust link — a quiet inline text link (home "Find us" band + footer) with a small external-link glyph. Inherits its band's link color (blue on white, white in the footer), so it reads as a soft secondary link, never a button. */ .cs-reviews-link { display: inline-flex; align-items: center; gap: 0.35rem; padding-block: 0.4rem; /* lift the hit area clear of the 24px tap floor */ font-size: 0.9rem; font-weight: 600; text-decoration: none; } .cs-reviews-link:hover, .cs-reviews-link:focus-visible { text-decoration: underline; } .cs-ext-ico { width: 0.85em; height: 0.85em; flex: none; opacity: 0.8; } /* Preview ribbon shown to admins on a not-yet-public page. */ .cs-preview-bar { background: var(--cs-red); color: #fff; text-align: center; padding: 0.55rem 1rem; font-weight: 700; font-size: 0.9rem; } /* legal pages */ .cs-legal-wrap { max-width: 72ch; margin-inline: auto; padding: 2.5rem 0; } .cs-legal-wrap h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); text-transform: uppercase; } /* ========================================================================== Public forms (interest list / RSVP) — parchment cards on the trail band ========================================================================== */ .cs-form { max-width: 620px; margin-inline: auto; } .cs-form .cs-section-head { margin-bottom: 1.4rem; } .cs-form-intro { color: var(--cs-gray); margin: 0 auto 1.6rem; max-width: 60ch; text-align: center; } /* "Fields marked * are required" — a quiet centered note tucked under the intro. */ .cs-form-required { text-align: center; margin-top: -0.8rem; } /* Each logical group (parent / children / questions) is a parchment card. */ .cs-form-card { background: var(--cs-white); border-radius: 16px; box-shadow: var(--shadow-card); padding: 1.5rem 1.4rem; margin-bottom: 1.3rem; } .cs-form-card > h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 0.9rem; } /* Reserve the Turnstile widget's rendered footprint so the async iframe paint doesn't reflow the form (jarring on a slow mobile connection). The managed widget renders ~300x65px; min-height holds the slot until it loads. */ .cf-turnstile { min-height: 65px; } /* Turnstile's own wrapper: no card chrome (background/border/shadow) — an invisible/managed widget in an empty white card reads as a broken blank card before it paints. Reserve its footprint and match the form-card vertical rhythm without the card look. */ .cs-turnstile { min-height: 65px; margin-bottom: 1.3rem; } /* Success headline: a warm sentence-case h1, not the uppercase section style. */ .cs-form-success-title { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0.4rem 0 0.6rem; } /* Thank-you momentum block: the next public event + a calendar link, set off from the confirmation by a quiet divider so it reads as "here's what's next" without competing with the primary "Back to site" action. */ .cs-success-next { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--cs-tan); } .cs-success-event { margin: 0.35rem 0 0.7rem; line-height: 1.5; } .cs-success-cal-only { margin-top: 1.2rem; } .cs-success-cal { display: inline-block; padding-block: 0.4rem; /* clear the 24px tap floor */ font-weight: 600; } /* "(optional)" marker — quiet, lowercase, never competes with the field label. */ .cs-optional { font-weight: 400; font-size: 0.85em; color: var(--cs-gray); } /* Field label + control. Labels are blocks; checkboxes use .cs-check instead. */ .cs-field { display: block; margin: 0 0 0.9rem; font-weight: 700; font-size: 0.92rem; color: var(--cs-gray-dark); } .cs-field:last-child { margin-bottom: 0; } .cs-form input[type="text"], .cs-form input[type="email"], .cs-form input[type="tel"], .cs-form select, .cs-form textarea { width: 100%; margin-top: 0.4rem; font-family: inherit; font-size: 1rem; font-weight: 400; color: var(--cs-gray-dark); background: var(--cs-white); padding: 0.68rem 0.8rem; border: 1.5px solid var(--cs-tan); border-radius: 10px; transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out); } .cs-form textarea { resize: vertical; min-height: 5.5rem; } .cs-form input:focus, .cs-form select:focus, .cs-form textarea:focus { outline: none; border-color: var(--cs-blue); box-shadow: 0 0 0 3px rgba(0, 63, 135, 0.15); } .cs-form input::placeholder, .cs-form textarea::placeholder { color: var(--cs-gray); opacity: 0.7; } .cs-help { color: var(--cs-gray); font-size: 0.85rem; margin-top: 0.45rem; line-height: 1.45; } /* Checkbox rows: box left, wrapping label right, comfortable tap target. */ .cs-check { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.9rem; font-weight: 500; font-size: 0.95rem; cursor: pointer; } .cs-check input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--cs-blue); } /* Child name + grade on one row, stacking on the narrowest phones. */ .cs-child-row { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; } .cs-child-row input[type="text"] { flex: 1 1 auto; margin-top: 0; } .cs-child-row select { flex: 0 0 7rem; margin-top: 0; } @media (max-width: 380px) { .cs-child-row { flex-wrap: wrap; } .cs-child-row select { flex-basis: 100%; } } /* "Add another child" — a quiet ghost button, not a primary action. */ .cs-add-row { margin-top: 0.4rem; font-family: inherit; font-weight: 700; font-size: 0.85rem; color: var(--cs-blue); background: transparent; border: 1.5px dashed var(--cs-blue-pale); border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out); } .cs-add-row:hover { border-color: var(--cs-blue); background: rgba(0, 63, 135, 0.05); } .cs-form-errors { background: #fbe9e7; border: 1.5px solid var(--cs-red); color: #8a0c1a; border-radius: 12px; padding: 0.9rem 1.1rem; margin-bottom: 1.3rem; } .cs-form-errors strong { display: block; margin-bottom: 0.3rem; } .cs-form-errors ul { margin: 0; padding-left: 1.2rem; } /* The SMS/compliance fine print sits below the form: deliberately quiet so it never competes with the submit action. Muted (AA-passing on the tan band), small, tight leading. Content/placement unchanged — this is de-emphasis only. */ .cs-legal-note { color: var(--cs-gray); font-size: 0.78rem; line-height: 1.45; margin: 1.2rem 0; } /* "What happens next" reassurance, just above the submit button: a quiet, centered muted line that sets an honest reply-time expectation. */ .cs-form-next { color: var(--cs-gray); font-size: 0.9rem; line-height: 1.5; text-align: center; margin: 0 auto 0.9rem; max-width: 52ch; } .cs-form-submit { width: 100%; margin-top: 0.4rem; } @media (min-width: 520px) { .cs-form-submit { width: auto; min-width: 14rem; } } /* Honeypot: off-screen, never shown to humans. */ .cs-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== Catalog pages (front-door expansion): FAQ / leaders / gallery ========================================================================== */ /* FAQ list — each Q/A is a stitched card, like the join-step cards. */ .cs-faq-list { max-width: 720px; margin: 0 auto; padding: 0; display: grid; gap: 1rem; } .cs-faq-item { margin: 0; } .cs-faq-item dt { font-size: 1.05rem; font-weight: 800; color: var(--cs-blue); margin-bottom: 0.35em; } .cs-faq-item dd { margin: 0; color: var(--cs-gray-dark); } /* Leader roster — reuses .cs-card in a responsive grid. auto-fit (not auto-fill) collapses empty tracks, and justify-content: center keeps a short roster (1-2 leaders) reading as a centered cluster instead of left-hugging with a dead void beside it. */ .cs-card-grid { display: grid; gap: 1.3rem; align-items: start; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); } .cs-leader-card { text-align: center; } .cs-leader-photo { width: 108px; height: 108px; margin: 0 auto 0.9rem; border-radius: 50%; object-fit: cover; outline: var(--stitch); outline-offset: -6px; } /* First-initial fallback when a leader has no photo — same footprint as .cs-leader-photo so a photo-less card holds the grid row's height, styled off the header's .cs-brand-mark gold circle. */ .cs-leader-mono { width: 108px; height: 108px; margin: 0 auto 0.9rem; display: grid; place-items: center; background: var(--cs-gold); color: var(--cs-blue); font-weight: 800; font-size: 2.6rem; line-height: 1; border-radius: 50%; outline: var(--stitch); outline-offset: -6px; } .cs-leader-card h3 { font-size: 1.1rem; margin-bottom: 0.2em; } .cs-card-sub { color: var(--cs-gray); font-weight: 600; font-size: 0.88rem; margin-bottom: 0.6em; } .cs-card-contact { margin: 0.6em 0 0; font-size: 0.9rem; } .cs-card-contact a { display: inline-block; padding: 0.15rem 0; } /* Open volunteer roles — a quiet list under the "we could use a hand" band. */ .cs-open-roles { list-style: none; margin: 0 auto 1.6rem; padding: 0; max-width: 480px; display: grid; gap: 0.5rem; text-align: left; } .cs-open-roles li { background: var(--cs-white); border-radius: 10px; padding: 0.7rem 1rem; font-weight: 600; box-shadow: var(--shadow-card); } /* Photo gallery — masonry-ish responsive grid, captions read as patch labels. */ .cs-album-title { text-transform: uppercase; font-size: 1.1rem; margin: 2rem 0 1rem; } .cs-album-title:first-child { margin-top: 0; } .cs-gallery-grid { display: grid; gap: 0.9rem; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); margin-bottom: 1.6rem; } .cs-gallery-item { margin: 0; } .cs-gallery-item img { /* height: auto overrides the width/height HTML attributes (a presentational hint the browser otherwise honors verbatim), letting aspect-ratio compute a uniform box regardless of the photo's real (often portrait) shape. */ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-card); } .cs-gallery-item figcaption { margin-top: 0.4rem; font-size: 0.85rem; color: var(--cs-gray); }