/* sc-components — the shared design system for every sitectrl site. * * ONE source of truth. Seeded into every tenant's htdocs (like * sc-track.js) and linked in every page, so a component fix here reaches * every site on the next deploy. Consumed two ways: * - pipelines emit the markup via site_components/markup.py * - agents write the markup directly (taught by CATALOG.md) * * Responsive by construction: desktop is the base rule, mobile is the * @media(max-width:767px) override. Colours default to CSS variables a * tenant can override in its own stylesheet without forking this file: * --sc-accent (bars, active states) --sc-ink (text) * --sc-bg (surface) --sc-muted (secondary text) */ /* THEME BINDING — step 2 of docs/site-components-plan.md. * * These values used to be the AWC Korea palette, hard-coded, because * the library had exactly one caller. Seeded onto all 39 tenants it * would have painted a brewery navy: a component dropped into any * template site announced itself as foreign, which is the opposite of * what a shared library is for. * * The templates turn out to already agree on a token vocabulary — * measured across all eight `htdocs/style.css`: * * --accent --bg --bg-alt --border 8 of 8 * --fg --fg-soft --radius --shadow 7 of 8 * --ink / --muted local-services' names for * --fg / --fg-soft * * So there is nothing to invent. Each --sc-* reads the template's own * token, falls through the alternate name, and only then lands on the * literal it used to be. A template is a THEME; the library reads it. * * Every literal below is the value this file shipped with, so a page * with no template stylesheet renders exactly as it did before. */ :root { --sc-accent: var(--accent, #33507a); --sc-ink: var(--fg, var(--ink, #000)); --sc-bg: var(--bg, #fff); --sc-muted: var(--fg-soft, var(--muted, #55566e)); --sc-tile-bg: var(--bg-alt, #f2f3f5); --sc-radius: var(--radius, var(--radius-sm, 14px)); --sc-heading: var(--fg, var(--ink, #23254c)); --sc-btn: var(--accent, #33507a); /* NOT bound. --sc-bar is the header's companion strip and --sc-purple * a tier colour; both are lighter/darker partners to the accent with * no template token that means the same thing, and deriving one with * colour-mix() would change how AWC Korea renders today. They stay * literal until a second caller needs them. */ --sc-bar: #557bb8; } /* ============================ HEADER ============================ * image1 (mobile) + image8 (desktop). Desktop: horizontal links, big * logo at the right end. Mobile: a vertical menu showing 3 links with a * carat above and below (scroll ±3 or finger-scroll), logo ~2/3 on the * right. Active link underlined. No "Home" — the logo links home. */ .sc-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--sc-bg); padding: .5rem 1.5rem; } .sc-header__bar { height: 15px; background: var(--sc-bar); } .sc-header__nav { display: flex; align-items: center; min-width: 0; } /* --sc-header-fs/-ls/-gap: read as CSS vars, not literals, so * switch_preview.py can set them to the LIVE site's own measured nav * typography (stamped as data-sc-fs/-ls/-gap on .sc-header__links, * read by fitHeaderLinks() in sc-components.js) instead of the generic * defaults below -- AWC Korea's live header keeps 6 links on one row * at 15px/700/1px letter-spacing/35px gap (hosted3/REPORT.txt E2), a * tighter fit than these defaults reproduce on their own. * fitHeaderLinks() shrinks further from whichever baseline is in play * only if that still doesn't fit -- a safety net, not the mechanism. * These fallback literals are unchanged for every site with no capture * to measure from. */ .sc-header__links { display: flex; flex-direction: row; align-items: center; gap: var(--sc-header-gap, 2rem); list-style: none; margin: 0; padding: 0; } .sc-header__links a { color: var(--sc-ink); font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: var(--sc-header-ls, .03em); white-space: nowrap; font-size: var(--sc-header-fs, 1.05rem); } .sc-header__links a[aria-current="page"] { text-decoration: underline; } .sc-header__carat { display: none; } /* desktop: no carats */ .sc-header__brand { flex: 0 0 auto; display: flex; } .sc-header__brand img { height: 88px; width: auto; max-width: 100%; display: block; } @media (max-width: 767px) { .sc-header { align-items: stretch; gap: 1rem; padding: .5rem 1rem; } /* Left third: a 3-row scroll menu framed by up/down carats. */ .sc-header__nav { flex-direction: column; flex: 0 0 38%; justify-content: center; --sc-row: 2.6em; } .sc-header__carat { display: block; border: 0; background: none; color: var(--sc-accent); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 0; text-align: left; } .sc-header__links { flex-direction: column; gap: 0; max-height: calc(var(--sc-row) * 3); overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .sc-header__links::-webkit-scrollbar { display: none; } .sc-header__links li { scroll-snap-align: start; } .sc-header__links a { display: flex; align-items: center; height: var(--sc-row); font-size: 1.05rem; } /* Right two-thirds: the logo, as large as the row allows. */ .sc-header__brand { flex: 0 0 60%; align-items: center; justify-content: flex-end; } .sc-header__brand img { height: auto; max-height: 120px; } } /* ============================ GALLERY ========================== * image17/image16. A full-bleed hero reel that CROSS-FADES (not * slides), autoplays, and continues from wherever the visitor left it. * Hollow dots, the active one filled. NO dots and NO autoplay when * there is a single image. Bleeds by the page gutter (--sc-pad). */ .sc-gallery { margin: 0 calc(var(--sc-pad, 1.5rem) * -1) 1.25rem; } .sc-gallery__frame { position: relative; width: 100%; height: min(56vw, 520px); overflow: hidden; background: #eef1f4; } .sc-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .9s ease; } .sc-gallery__slide.is-active { opacity: 1; } .sc-gallery__dots { display: flex; gap: 14px; justify-content: center; padding: 16px 0; } .sc-gallery__dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c9d3dd; background: transparent; padding: 0; cursor: pointer; transition: background .2s, border-color .2s; } .sc-gallery__dot.is-active { background: var(--sc-accent); border-color: var(--sc-accent); } @media (min-width: 768px) { .sc-gallery__frame { height: min(42vw, 560px); } } /* ============================ FOOTER =========================== * image7 (mobile) / image3 (desktop). A blue band, white text. * Desktop top half is 3 columns: contact (email + Instagram, as text) * on the left, logo centred, nav (JOIN/RENEW + EVENTS) on the right. * Mobile stacks it centred: contact as ICONS, then the two nav links, * then the logo. Legal block is centred under both, in smaller text. * DOM order is contact, brand, nav (the desktop row); mobile reorders. */ .sc-footer { background: var(--sc-foot-bg, var(--sc-bar)); color: #fff; text-align: center; padding: 2.5rem 1.5rem 1.75rem; } .sc-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 900px; margin: 0 auto; } .sc-footer__contact, .sc-footer__nav { display: flex; flex-direction: column; gap: .5rem; } .sc-footer a { color: inherit; text-decoration: none; } .sc-footer__contact a { font-weight: 700; } .sc-footer__nav a { font-weight: 700; letter-spacing: .03em; } .sc-footer__contact a svg { display: none; } /* desktop: text */ .sc-footer__brand { display: flex; flex-direction: column; align-items: center; gap: .4rem; } .sc-footer__brand img { height: 74px; width: auto; } .sc-footer__legal { margin-top: 1.5rem; font-size: .84rem; line-height: 1.7; opacity: .95; } .sc-footer__legal a { text-decoration: underline; } @media (max-width: 767px) { .sc-footer__top { flex-direction: column; gap: 1rem; } .sc-footer__contact { order: 1; flex-direction: row; gap: 1.1rem; justify-content: center; } .sc-footer__nav { order: 2; gap: 1rem; } .sc-footer__brand { order: 3; margin-top: .6rem; } .sc-footer__contact a span { display: none; } /* mobile: icons */ .sc-footer__contact a svg { display: block; width: 26px; height: 26px; } } /* ============================ INFO TILES ======================== * image2/image19 (mobile) / image18 (desktop 2-col). Title (navy, bold, * NO background), then image, then text. One line between title→image * and image→text; generous space above the title. Stacked on mobile, * two columns on desktop. */ .sc-info-tiles { display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem; margin: 1rem 0; } .sc-info-tile__title { color: var(--sc-heading, #23254c); font-weight: 700; font-size: 1.5rem; margin: 3.2em 0 1em; line-height: 1.2; } .sc-info-tile__img { width: 100%; height: auto; display: block; margin: 0 0 1em; border-radius: 8px; } .sc-info-tile__text { color: var(--sc-body, var(--sc-muted)); line-height: 1.75; } @media (max-width: 767px) { /* Mobile only: tiles stack in a single column, so the very first one (right after the photo reel) needs less top margin than the rest. Scoped here so it never fights the desktop rule below, which must give every tile in a row the SAME top margin or the row's titles drift out of alignment (measured: "Join Us" sitting lower than "Get To Know Us" on the top row, 2026-09-13). */ .sc-info-tile:first-child .sc-info-tile__title { margin-top: 1.4em; } } @media (min-width: 768px) { .sc-info-tiles { grid-template-columns: 1fr 1fr; } .sc-info-tile .sc-info-tile__title { margin-top: 1.6em; } } /* ============================ BUTTON (shared) ==================== */ .sc-btn { display: inline-block; background: var(--sc-btn, var(--sc-accent)); color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; text-decoration: none; padding: .7rem 1.3rem; border-radius: 8px; border: 0; cursor: pointer; margin-top: 1rem; } /* ============================ INSTRUCTIONS ====================== * image5 (mobile) / image4 (desktop 2-col). A title, then faint-gray * rounded tiles each holding text and an optional button. One line * between title and the first tile, one line between tiles. Two columns * on desktop. */ .sc-instructions__title { color: var(--sc-heading, #23254c); font-weight: 700; font-size: 1.4rem; margin: 1.2em 0 1em; } .sc-instructions__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .sc-instruction-tile { background: var(--sc-tile-bg); border: 1px solid rgba(0,0,0,.06); border-radius: var(--sc-radius); padding: 1.4rem 1.5rem 1.5rem; } .sc-instruction-tile__body { color: var(--sc-body, var(--sc-muted)); line-height: 1.7; } @media (min-width: 768px) { .sc-instructions__grid { grid-template-columns: 1fr 1fr; align-items: start; } } /* ============================ EVENT TILES ======================= * image9 (mobile) / image12 (desktop side-by-side). A title, then a * rounded card: light-gray top holds the event image, white bottom * holds Date/Time/Location (blue labels), a description, and an RSVP * button. On desktop the gray media and white body sit side by side. * 3-4 lines between tiles. */ .sc-event { margin: 0 0 3.5rem; } .sc-event__title { color: var(--sc-heading, #23254c); font-weight: 700; font-size: 1.5rem; margin: 0 0 1rem; } .sc-event__card { border: 1px solid rgba(0,0,0,.08); border-radius: 16px; overflow: hidden; } .sc-event__media { background: var(--sc-tile-bg); padding: 1.5rem; display: flex; align-items: center; justify-content: center; } .sc-event__media img { max-width: 72%; height: auto; display: block; } .sc-event__body { background: #fff; padding: 1.5rem 1.6rem 1.6rem; color: var(--sc-body, var(--sc-muted)); } .sc-event__meta { line-height: 1.9; } .sc-event__meta b { color: var(--sc-accent); font-weight: 700; } .sc-event__desc { line-height: 1.75; margin: 1rem 0; } @media (min-width: 768px) { .sc-event__card { display: grid; grid-template-columns: 1fr 1fr; } .sc-event__media img { max-width: 88%; } } /* ============================ TIER BAR (shared) ================= */ .sc-tier-bar { color: #fff; font-weight: 700; font-size: 1.05rem; padding: .6rem var(--sc-pad, 1.5rem); margin: 1.2rem calc(var(--sc-pad, 1.5rem) * -1) .9rem; } /* ============================ LOGO SCROLLER ===================== * image13/image6 (mobile) / image14 (desktop). A horizontally * scrollable row (or 4-row grid, for Donor) of white rounded logo * cards — logo CONTAINED, never zoomed (also fixes partner-tile zoom). * Dots appear (via JS) only when the row overflows. scrollbar hidden. */ .sc-scroller__track { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; } .sc-scroller__track::-webkit-scrollbar { display: none; } .sc-scroller__track--rows { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: minmax(42%, 1fr); gap: .8rem 1rem; } .sc-logo-card { flex: 0 0 auto; scroll-snap-align: start; width: 46%; aspect-ratio: 3 / 2; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 1.1rem; } .sc-scroller__track--rows .sc-logo-card { width: auto; aspect-ratio: 2 / 1; padding: .7rem; } .sc-logo-card img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .sc-scroller__dots { display: flex; gap: 10px; justify-content: center; padding: 12px 0 0; } .sc-scroller__dots:empty { display: none; } .sc-scroller__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: #c9d3dd; padding: 0; cursor: pointer; } .sc-scroller__dot.is-active { background: var(--sc-accent); } @media (min-width: 768px) { .sc-logo-card { width: 220px; } .sc-scroller__track--rows { grid-auto-columns: minmax(200px, 1fr); } } /* ============================ SPONSOR TIERS ===================== * image10/image11 (mobile) / image15 (desktop). A purple rounded * container with a white title + description, then a horizontal * scroller of white tier tiles (tier name + bullet benefits), with * light dots. One tile shows at a time on mobile; more on desktop. * Reuses the generic scroller (data-sc-scroller / -track / -dots). */ .sc-sponsor-tiers { background: var(--sc-purple, #3f2a7a); color: #fff; border-radius: 18px; padding: 1.5rem 1.5rem 1.25rem; margin: 1.5rem 0; } .sc-sponsor-tiers__title { font-weight: 700; font-size: 1.4rem; margin: 0 0 .7rem; } .sc-sponsor-tiers__desc { line-height: 1.7; margin: 0 0 1.25rem; opacity: .96; } .sc-tier-tile { flex: 0 0 88%; scroll-snap-align: start; background: #fff; color: var(--sc-body, #333); border-radius: 14px; padding: 1.5rem 1.6rem; } .sc-tier-tile__title { color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1rem; font-size: 1.1rem; } .sc-tier-tile ul { margin: 0; padding-left: 1.2rem; line-height: 1.9; } .sc-tier-tile li { margin-bottom: .5rem; } .sc-scroller__dots--light .sc-scroller__dot { background: rgba(255,255,255,.4); } .sc-scroller__dots--light .sc-scroller__dot.is-active { background: #fff; } @media (min-width: 768px) { .sc-tier-tile { flex-basis: 44%; } } /* ============ HEADER VARIANT: sc-header--menu ==================== * * A PLAIN HAMBURGER, for sites that are not the association this * component was drawn from. * * The default .sc-header is a measured reproduction of one customer's * real header: a three-row scrolling list framed by up/down carats. * That is correct for them and unrecognisable everywhere else — a * switch preview of a trade company shipped with eight long links in * that reel and the visitor reported, twice, that "the hamburger does * not work". There was no hamburger. * * So this is opt-in and leaves the default alone. Add sc-header--menu * and the mobile header becomes a button that shows every link; the * desktop row wraps instead of overflowing. */ .sc-header--menu .sc-header__toggle { display: none; } @media (min-width: 768px) { /* EIGHT LINKS DO NOT FIT ON ONE ROW. The reel never needed to wrap * because that site has seven short ones; "Discuss a Trade * Opportunity" beside seven others does. */ .sc-header--menu .sc-header__links { flex-wrap: wrap; row-gap: .35rem; } /* Logo left, nav right — nearly every real site (D-SF10 N2a, 2026-09-11 * 17:21Z). The default .sc-header has no desktop order rule because * markup.py emits nav-then-brand in the DOM, matching the one customer * header this component was measured from; the switch funnel's plain- * hamburger variant is a different, more common site shape and the * same DOM order read as the logo sitting on the right of every switch * preview. Scoped to this opt-in variant only — the default .sc-header * and Wild Apricot's own header stay exactly as measured. */ .sc-header--menu .sc-header__brand { order: 1; } .sc-header--menu .sc-header__nav { order: 2; } /* Right-aligned links, matching how nearly every real site lays out * a right-hand nav (D-SF10 N2c, 2026-09-11 17:45Z). N2a moved the * logo left, but `.sc-header__nav` itself is `flex: 1 1 auto` * (render.py's own inline style, #1057) so it fills the rest of the * header row -- and `.sc-header__links` (the `