/* Courtenay BAC PAC — "plaintext letterhead" presentation layer over Twenty Twenty-Five. Grammar (from the approved v1 mockup): warm paper, near-black ink, hairline rules, Fira Sans body with Fira Code as *texture* (letterhead, eyebrows, bracket nav, date stamps, fine print). Colour lives almost entirely on ONE signature element — the gradient-lit button that lifts on hover and presses on click. Gold appears only in micro-doses (logo, BAC marks, quote rules). Flat everywhere else. */ :root { color-scheme: light; --paper: #FCFCFA; --ink: #17181A; --faint: #6B6E72; --rule: #E4E3DD; --accent: #0A3B78; /* board ink — Courtenay deep blue */ --accent-top: #0E4C97; --accent-mid: #0B4F9E; /* "tiger blue" — calendar hovers */ --accent-tint: rgba(11, 79, 158, 0.06); --gold: #F2B705; --gold-ink: #9A6E00; --gold-deep: #7A5800; /* ghost-button / playlist-nav hover text */ --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; --sans: "Fira Sans", system-ui, -apple-system, sans-serif; --wrap: 720px; /* Scheme-fixed — identical in light and dark. The signature button and the roster tags keep their deep-blue ground (the white label needs it), and text set on gold stays near-black in both schemes. */ --accent-deep: #0A3B78; --accent-deep-top: #0E4C97; --on-gold: #17181A; /* Supporting tokens, promoted from literals so the dark scheme can restate them. Light values are the exact pre-dark-mode pixels. */ --focus-halo: rgba(34, 70, 122, 0.55); /* outer focus ring */ --accent-edge: rgba(34, 70, 122, 0.32); /* ghost-button / playlist-nav border */ --accent-edge-strong: rgba(34, 70, 122, 0.45); /* translate-select hover border */ --link-underline: rgba(34, 70, 122, 0.3); /* prose link underline at rest */ --accent-open-edge: rgba(11, 79, 158, 0.22); /* open accordion border */ --quiet-line: #C9CDD3; /* hero-lead underline, avatar dash */ --rule-hover: #dcdbd4; /* accordion hover hairline */ --rule-hover-2: #cfd6df; /* zoom-figure hover hairline */ --whisper: #C9C8C0; /* footer signature */ --sheet: #fff; /* brightest surface: rail, chips, lightbox pane */ --sheet-hover: #fff; /* lightbox close-button hover */ --float-chip: rgba(252, 252, 250, 0.94); /* floating controls over images */ --well: #F4F6F9; /* recessed avatar slab */ --well-2: #E8ECF2; /* thumbnail placeholder */ --well-ink: #9DB3CE; /* avatar glyph */ --hl-swipe: linear-gradient(120deg, rgba(242, 183, 5, 0.75), rgba(242, 183, 5, 0.45)); --glass-a: rgba(255, 255, 255, 0.78); /* tile frost, bright stop */ --glass-b: rgba(255, 255, 255, 0.42); /* tile frost, thin stop */ --glass-edge: rgba(255, 255, 255, 0.9); /* tile border */ --glass-gleam: rgba(255, 255, 255, 0.9); /* tile inset highlight */ --glass-gleam-hover: rgba(255, 255, 255, 0.95); --aurora-blue: rgba(11, 79, 158, 0.22); /* tile-grid blue blob (the gold blob reads fine on both schemes) */ --ghost-blend: multiply; /* ghost photos: multiply into paper (light)… */ --ghost-fade: 1; /* dark can dial all ghosts down together */ --ghost-filter: none; /* …or a dim positive "projected slide" (dark) */ --gt-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6E72' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6E72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* toggle glyph = the scheme you'd switch TO (masked, so colour comes from currentColor) */ --scheme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E"); } /* Block-editor presets → scheme-aware tokens. theme.json keeps the light palette for the editor UI; the front end re-points the generated preset custom properties at our tokens so preset-classed markup (the header and footer's has-base-background-color, content links via accent-3, …) follows the scheme. This sheet loads after the inline global-styles sheet, so this same-specificity :root wins the tie. */ :root { --wp--preset--color--base: var(--paper); --wp--preset--color--contrast: var(--ink); --wp--preset--color--accent-1: var(--gold); --wp--preset--color--accent-2: var(--accent-mid); --wp--preset--color--accent-3: var(--accent); --wp--preset--color--accent-4: var(--faint); --wp--preset--color--accent-5: var(--rule); } /* ---------- THE CHALKBOARD: dark scheme ---------- Not an inversion — the board the letterhead gets pinned to. Blue-black board, chalk ink, the board-blue accents lightened to chalk blue, gold held as the one warm note. Two entry points, SAME payload: 1. the media block — follows the OS unless the visitor chose light; 2. the [data-theme="dark"] block — the visitor's explicit choice (stamped on by the header toggle; see functions.php). `screen and` keeps print on paper — a printout is always the light letterhead. KEEP THE TWO BLOCKS IDENTICAL. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #15191F; --ink: #E8E6E1; --faint: #9BA1A8; --rule: #2A313B; --accent: #7FA8D9; --accent-top: #99BCE8; --accent-mid: #8FB5E2; --accent-tint: rgba(127, 168, 217, 0.1); --gold-ink: #D9A93A; --gold-deep: #E3B84F; --focus-halo: rgba(127, 168, 217, 0.65); --accent-edge: rgba(143, 181, 226, 0.4); --accent-edge-strong: rgba(143, 181, 226, 0.55); --link-underline: rgba(143, 181, 226, 0.45); --accent-open-edge: rgba(127, 168, 217, 0.32); --quiet-line: #3E4653; --rule-hover: #39414C; --rule-hover-2: #3E4855; --whisper: #4E545C; --sheet: #1B212A; --sheet-hover: #242B35; --float-chip: rgba(27, 33, 42, 0.94); --well: #20262E; --well-2: #242B34; --well-ink: #5E7189; --hl-swipe: linear-gradient(120deg, rgba(242, 183, 5, 0.95), rgba(242, 183, 5, 0.7)); --glass-a: rgba(36, 42, 52, 0.72); --glass-b: rgba(36, 42, 52, 0.45); --glass-edge: rgba(255, 255, 255, 0.14); --glass-gleam: rgba(255, 255, 255, 0.07); --glass-gleam-hover: rgba(255, 255, 255, 0.1); --aurora-blue: rgba(90, 146, 214, 0.26); --ghost-blend: normal; --ghost-fade: 1; --ghost-filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(1.5) brightness(0.45) contrast(1.05); --gt-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA1A8' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA1A8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --scheme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); } } /* visitor's explicit choice — MUST mirror the media block above exactly */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --paper: #15191F; --ink: #E8E6E1; --faint: #9BA1A8; --rule: #2A313B; --accent: #7FA8D9; --accent-top: #99BCE8; --accent-mid: #8FB5E2; --accent-tint: rgba(127, 168, 217, 0.1); --gold-ink: #D9A93A; --gold-deep: #E3B84F; --focus-halo: rgba(127, 168, 217, 0.65); --accent-edge: rgba(143, 181, 226, 0.4); --accent-edge-strong: rgba(143, 181, 226, 0.55); --link-underline: rgba(143, 181, 226, 0.45); --accent-open-edge: rgba(127, 168, 217, 0.32); --quiet-line: #3E4653; --rule-hover: #39414C; --rule-hover-2: #3E4855; --whisper: #4E545C; --sheet: #1B212A; --sheet-hover: #242B35; --float-chip: rgba(27, 33, 42, 0.94); --well: #20262E; --well-2: #242B34; --well-ink: #5E7189; --hl-swipe: linear-gradient(120deg, rgba(242, 183, 5, 0.95), rgba(242, 183, 5, 0.7)); --glass-a: rgba(36, 42, 52, 0.72); --glass-b: rgba(36, 42, 52, 0.45); --glass-edge: rgba(255, 255, 255, 0.14); --glass-gleam: rgba(255, 255, 255, 0.07); --glass-gleam-hover: rgba(255, 255, 255, 0.1); --aurora-blue: rgba(90, 146, 214, 0.26); --ghost-blend: normal; --ghost-fade: 1; --ghost-filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(1.5) brightness(0.45) contrast(1.05); --gt-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA1A8' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA1A8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --scheme-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); } } /* ---------- Global ---------- */ /* Reserve the scrollbar gutter even on short pages, so the centered column doesn't shift sideways when navigating between scrolling and non-scrolling pages */ html { scrollbar-gutter: stable; } ::selection { background: var(--gold); color: var(--on-gold); } :where(a, button, summary, input, select, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus-halo); border-radius: 4px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Editor-typed section headings: mono labels with a highlighter swipe */ .wp-block-heading { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: lowercase; color: var(--on-gold); width: fit-content; padding: 0.12em 0.5em; border-radius: 3px; background: var(--hl-swipe); -webkit-box-decoration-break: clone; box-decoration-break: clone; /* Constrained layout centers fit-content children with !important auto margins. Recreate the column's left edge instead: (container − wrap) / 2, floored at 0 so narrow viewports fall back to the container's own padding edge. */ margin-left: max(0px, calc(50% - var(--wrap) / 2)) !important; margin-right: auto !important; } /* the "//" sits ON the gold swipe, so it keeps the deep board blue in both schemes */ .wp-block-heading::before { content: "// "; color: var(--accent-deep); } /* BAC / PAC two-tone chips */ .cbp-bac, .cbp-pac { display: inline-block; font-weight: 600; padding: 0.05em 0.32em; border-radius: 3px; line-height: 1.3; } .cbp-bac { color: #0B4F9E; background: var(--gold); } .cbp-pac { color: var(--gold); background: #0B4F9E; } /* BAC / PAC expansion tooltips — a mono "fine print" annotation on hover / focus / tap. the_content wraps each chip with the trigger + tip (see functions.php); the text stays real (translatable) DOM text. Keyboard focus reuses the global [tabindex] focus ring. */ .cbp-abbr { position: relative; cursor: help; } .cbp-abbr__tip { position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 40; width: max-content; max-width: min(16rem, 74vw); padding: 6px 9px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 0.72rem; font-weight: 400; line-height: 1.35; letter-spacing: 0.01em; text-align: center; white-space: normal; border-radius: 4px; box-shadow: 3px 3px 0 rgba(23, 24, 26, 0.16); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 3px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; } .cbp-abbr__tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--ink); } .cbp-abbr:hover .cbp-abbr__tip, .cbp-abbr:focus-visible .cbp-abbr__tip, .cbp-abbr.is-open .cbp-abbr__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.15s ease, transform 0.15s ease; } @media (prefers-reduced-motion: reduce) { .cbp-abbr__tip, .cbp-abbr:hover .cbp-abbr__tip, .cbp-abbr:focus-visible .cbp-abbr__tip, .cbp-abbr.is-open .cbp-abbr__tip { transform: translateX(-50%); transition: opacity 0.12s ease; } } /* Downward variant — for triggers near the top of the page (e.g. the letterhead wordmark) where there's no room for the tooltip to open upward. */ .cbp-abbr--down .cbp-abbr__tip { top: calc(100% + 9px); bottom: auto; } .cbp-abbr--down .cbp-abbr__tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); } /* Page titles: quiet mono document titles */ .wp-block-post-title { font-family: var(--mono); font-size: clamp(1.25rem, 3vw, 1.55rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; } /* ---------- Header: the letterhead ---------- */ .cbp-header { border-bottom: 1px solid var(--rule); } .cbp-letterhead { font-family: var(--mono); } .cbp-letterhead__school { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink); } .cbp-letterhead__school .cbp-brand__mark svg { width: 44px; height: 44px; display: block; } .cbp-home-link { color: inherit; text-decoration: none; } .cbp-home-link:hover, .cbp-home-link:focus { color: inherit; text-decoration: none; } a.cbp-brand__mark { display: block; line-height: 0; } .cbp-letterhead__name { font-size: clamp(1.12rem, 2.6vw, 1.5rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } .cbp-letterhead__council { margin: 8px 0 0; font-size: 0.88rem; color: var(--faint); max-width: 58ch; line-height: 1.55; } .cbp-letterhead__council a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; } .cbp-letterhead__council a:hover { color: var(--accent); text-decoration-color: var(--accent); } .cbp-letterhead__meta { font-size: 0.72rem; color: var(--faint); letter-spacing: 0.02em; margin: 14px 0 0; } .cbp-letterhead__meta span { white-space: nowrap; } .cbp-letterhead__meta i { color: var(--rule); font-style: normal; padding: 0 8px; } /* bracket nav — flat at rest. On hover the brackets slide in and hug the word ([ Home ] → [Home], with a hint of overshoot); the link presses down on click like the signature button. Closed brackets also mark the page you're on. Transforms (not margins) so neighbouring links never shift; 1ch = exactly the mono space inside the bracket content, so "closed" is always flush. */ .cbp-header .wp-block-navigation a { display: inline-block; font-family: var(--mono); font-size: 0.8rem; font-weight: 400; color: var(--faint); text-decoration: none; padding: 2px 0; transition: color 0.15s, transform 0.12s; } .cbp-header .wp-block-navigation a::before, .cbp-header .wp-block-navigation a::after { display: inline-block; white-space: pre; /* keep the gap space from collapsing */ color: var(--rule); transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1), color 0.15s; } .cbp-header .wp-block-navigation a::before { content: "[ "; } .cbp-header .wp-block-navigation a::after { content: " ]"; } .cbp-header .wp-block-navigation a:hover { color: var(--accent); } .cbp-header .wp-block-navigation a:hover::before, .cbp-header .wp-block-navigation a:hover::after { color: var(--accent); } .cbp-header .wp-block-navigation a:hover::before { transform: translateX(1ch); } .cbp-header .wp-block-navigation a:hover::after { transform: translateX(-1ch); } .cbp-header .wp-block-navigation a:active { transform: translateY(1px); } .cbp-header .wp-block-navigation a:active::before, .cbp-header .wp-block-navigation a:active::after { color: var(--gold-ink); transition: none; } .cbp-header .wp-block-navigation a[aria-current="page"] { color: var(--accent); } .cbp-header .wp-block-navigation a[aria-current="page"]::before, .cbp-header .wp-block-navigation a[aria-current="page"]::after { color: var(--accent); } .cbp-header .wp-block-navigation a[aria-current="page"]::before { transform: translateX(1ch); } .cbp-header .wp-block-navigation a[aria-current="page"]::after { transform: translateX(-1ch); } /* Translate menu: quiet mono select */ .gtranslate_wrapper { display: inline-flex; align-items: center; } .gtranslate_wrapper select, .gtranslate_wrapper .gt_selector { -webkit-appearance: none; appearance: none; border: 1px solid var(--rule); border-radius: 8px; padding: 5px 26px 5px 28px; font-family: var(--mono); font-weight: 400; font-size: 0.74rem; color: var(--faint); background-color: transparent; background-image: var(--gt-icons); /* globe + chevron; stroke colour lives with the palette */ background-repeat: no-repeat, no-repeat; background-position: 8px center, right 8px center; background-size: 14px, 11px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .gtranslate_wrapper select:hover, .gtranslate_wrapper .gt_selector:hover { color: var(--accent); border-color: var(--accent-edge-strong); background-color: var(--accent-tint); } /* Dark/light toggle: a quiet square twin of the translate select. Ships with the hidden attribute; scheme-toggle.js reveals it once wired (no JS = no dead control). The glyph shows the scheme you'd switch TO (moon on paper, sun on the board) and swaps with the palette via --scheme-ico. */ .cbp-scheme[hidden] { display: none; } .cbp-scheme { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .cbp-scheme__ico { width: 15px; height: 15px; display: block; background: currentColor; -webkit-mask: var(--scheme-ico) center / contain no-repeat; mask: var(--scheme-ico) center / contain no-repeat; } .cbp-scheme:hover { color: var(--accent); border-color: var(--accent-edge-strong); background-color: var(--accent-tint); } /* Install-app control — a quiet sibling of the scheme toggle (NOT the signature button). Ships hidden; pwa-install.js reveals it only where install is possible. On iOS Safari the click opens a small "Add to Home Screen" hint. */ .cbp-install[hidden] { display: none; } .cbp-install-wrap { position: relative; display: inline-flex; } .cbp-install { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--faint); font: inherit; font-size: 0.82rem; line-height: 1; cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; } .cbp-install__ico { width: 15px; height: 15px; display: block; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0l-3.5-3.5M12 13l3.5-3.5'/%3E%3Cpath d='M5 16v2.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v10m0 0l-3.5-3.5M12 13l3.5-3.5'/%3E%3Cpath d='M5 16v2.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V16'/%3E%3C/svg%3E") center / contain no-repeat; } .cbp-install:hover { color: var(--accent); border-color: var(--accent-edge-strong); background-color: var(--accent-tint); } .cbp-install__hint[hidden] { display: none; } .cbp-install__hint { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: max-content; max-width: 15rem; padding: 8px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 0.8rem; line-height: 1.4; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); } .cbp-install__share { display: inline-block; width: 0.9em; height: 0.95em; vertical-align: -0.12em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M8.5 7.5 12 4l3.5 3.5'/%3E%3Cpath d='M7 11H5.5A1.5 1.5 0 0 0 4 12.5v6A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 18.5 11H17'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M8.5 7.5 12 4l3.5 3.5'/%3E%3Cpath d='M7 11H5.5A1.5 1.5 0 0 0 4 12.5v6A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5v-6A1.5 1.5 0 0 0 18.5 11H17'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---------- THE SIGNATURE: the one slick, tactile element ---------- Modern pill. Blue at rest; hovers into Courtenay gold via a true gradient crossfade: the gold gradient is the element's own background, and a blue-gradient ::before (negative z-index paints above the background but below the label) fades OUT on hover. Springy lift, sliding arrow, pressed :active. */ .btn, .wp-block-button__link { --lift: 0; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; text-decoration: none; color: #fff; padding: 0.88em 1.55em; border: 1px solid rgba(10, 20, 40, 0.22); border-radius: 999px; background: linear-gradient(180deg, #FFCE2E, var(--gold)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 1.5px rgba(18, 30, 55, 0.14), 0 6px 16px -6px rgba(18, 30, 55, 0.42); cursor: pointer; transform: translateY(var(--lift)); transition: color 0.18s ease, border-color 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.2, 0.7, 0.3, 1); } .btn::before, .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; /* scheme-fixed deep blue: the signature element looks the same on paper and board */ background: linear-gradient(180deg, var(--accent-deep-top), var(--accent-deep)); transition: opacity 0.18s ease; } .btn .arrow { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn:hover, .wp-block-button__link:hover { --lift: -2px; color: var(--on-gold); border-color: rgba(154, 110, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 2px 3px rgba(154, 110, 0, 0.16), 0 12px 26px -8px rgba(214, 166, 20, 0.6); } .btn:not(.btn--ghost):not(.btn--outline):hover::before, .wp-block-button__link:hover::before { opacity: 0; } .btn:hover .arrow { transform: translateX(4px); } .btn:active, .wp-block-button__link:active { --lift: 0; box-shadow: inset 0 2px 4px rgba(120, 88, 0, 0.3), 0 1px 1px rgba(18, 30, 55, 0.12); } .btn:focus-visible, .wp-block-button__link:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px -6px rgba(18, 30, 55, 0.42), 0 0 0 3px var(--paper), 0 0 0 5px var(--focus-halo); } /* secondary: a quiet ghost version — blue outline that also hovers gold */ .btn--ghost, .btn--outline { color: var(--accent); background: transparent; border: 1px solid var(--accent-edge); box-shadow: none; } .btn--ghost::before, .btn--outline::before { background: rgba(242, 183, 5, 0.16); opacity: 0; } .btn--ghost:hover, .btn--outline:hover { --lift: -1px; color: var(--gold-deep); border-color: rgba(200, 150, 10, 0.65); box-shadow: 0 6px 16px -10px rgba(154, 110, 0, 0.5); } .btn--ghost:hover::before, .btn--outline:hover::before { opacity: 1; } .btn--ghost:active, .btn--outline:active { --lift: 0; box-shadow: none; } /* legacy alias from older content: gold primary → signature primary */ .btn--gold { color: #fff; } /* ---------- Links & Community page: terminal link rows ---------- The Links page is a stack of buttons, and stacking the loud signature pill breaks the "only ever ONE" rule. So on this page the buttons drop the gold and become quiet full-width mono rows in the header's own control language — hairline border, faint at rest, accent text + tint fill on hover — with a `›` prompt that slides in and the bracket-nav's press-on-click. Scoped by page-id (same idiom as the ghost photos). */ body.page-id-10 .wp-block-buttons { gap: 10px; width: 100%; } body.page-id-10 .wp-block-button { width: 100%; } body.page-id-10 .wp-block-button__link { --lift: 0; display: flex; align-items: center; gap: 0.6em; width: 100%; overflow: visible; font-family: var(--mono); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; text-align: left; color: var(--ink); padding: 0.82em 1em; border: 1px solid var(--rule); border-radius: 8px; background: transparent; box-shadow: none; transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.12s; } /* replace the pill's blue-gradient overlay with a mono prompt glyph */ body.page-id-10 .wp-block-button__link::before { content: "\203A"; /* › */ position: static; inset: auto; z-index: auto; background: none; opacity: 1; flex: none; color: var(--rule); transition: color 0.15s, transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1); } body.page-id-10 .wp-block-button__link:hover { --lift: 0; color: var(--accent); border-color: var(--accent-edge-strong); background-color: var(--accent-tint); box-shadow: none; } body.page-id-10 .wp-block-button__link:hover::before { opacity: 1; color: var(--accent); transform: translateX(3px); } body.page-id-10 .wp-block-button__link:active { transform: translateY(1px); background-color: var(--accent-tint); box-shadow: none; } body.page-id-10 .wp-block-button__link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--focus-halo); } /* ---------- Eyebrow labels ---------- */ .cbp-eyebrow { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.04em; color: var(--faint); text-transform: lowercase; margin: 0 0 14px; } .cbp-eyebrow::before { content: "// "; color: var(--accent); } /* ---------- Homepage hero: one sentence + ghost of the gym floor ---------- */ .cbp-hero { position: relative; overflow: hidden; } .cbp-hero__inner { max-width: var(--wrap); margin: 0 auto; padding: 44px 28px 6px; position: relative; } /* GHOST PHOTO — the faded blueprint-blue gym-floor tiger, multiply-blended into paper */ .cbp-hero__ghost { position: absolute; right: -50px; top: 4px; width: 400px; max-width: 58%; aspect-ratio: 900 / 564; background: url("ghost-doors.jpg") center / cover no-repeat; opacity: calc(0.18 * var(--ghost-fade, 1)); mix-blend-mode: var(--ghost-blend); filter: var(--ghost-filter); pointer-events: none; /* dissolve the photo's edges into the paper */ -webkit-mask-image: radial-gradient(80% 85% at 58% 45%, #000 30%, transparent 74%); mask-image: radial-gradient(80% 85% at 58% 45%, #000 30%, transparent 74%); } .cbp-hero__lead { font-size: 1.22rem; line-height: 1.5; max-width: 38ch; margin: 0 0 12px; position: relative; z-index: 1; } .cbp-hero__lead strong { font-weight: 600; } .cbp-hero__lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--quiet-line); text-underline-offset: 3px; } .cbp-hero__lead a:hover { color: var(--accent); text-decoration-color: var(--accent); } .cbp-hero__lead--es { font-size: 0.98rem; color: var(--faint); margin: 0 0 10px; } .cbp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; } /* language line: directions + the switcher itself */ .cbp-lang { max-width: var(--wrap); margin: 0 auto; padding: 10px 28px 30px; position: relative; z-index: 1; } .cbp-lang__label { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); letter-spacing: 0.02em; } .cbp-lang__label::before { content: "// "; color: var(--accent); } /* ---------- Category / resource tiles: frosted glass over a soft aurora ---------- The one place the flat page goes dimensional (these ARE the site, per the user). Brand-colored blobs sit behind the grid; the cards are translucent white with backdrop-blur, so the color glows through the frost. Hover answers in gold. */ .cbp-tiles { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 1.25rem 0 0; padding: 0; list-style: none; } /* the aurora */ .cbp-tiles::before, .cbp-tiles::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(46px); pointer-events: none; } .cbp-tiles::before { width: 48%; height: 75%; left: -6%; top: -14%; background: radial-gradient(closest-side, var(--aurora-blue), transparent 72%); } .cbp-tiles::after { width: 48%; height: 65%; right: -4%; bottom: -32%; background: radial-gradient(closest-side, rgba(242, 183, 5, 0.2), transparent 72%); } .cbp-tile { position: relative; display: block; background: linear-gradient(135deg, var(--glass-a), var(--glass-b)); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid var(--glass-edge); border-radius: 18px; padding: 22px 18px 20px; text-decoration: none; color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-gleam), 0 1px 1px rgba(18, 30, 55, 0.05), 0 12px 28px -14px rgba(18, 30, 55, 0.25); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease; } .cbp-tile:hover { transform: translateY(-3px); border-color: rgba(242, 183, 5, 0.65); box-shadow: inset 0 1px 0 var(--glass-gleam-hover), 0 2px 3px rgba(154, 110, 0, 0.08), 0 18px 38px -16px rgba(18, 30, 55, 0.32), 0 0 0 3px rgba(242, 183, 5, 0.14); } /* Tile icon is drawn from CSS — NOT embedded in the page content — so editing the page in the Classic Editor can never delete it. Colour comes from background-color; each tile picks its glyph via the --cbp-ico variable set by its modifier class below. */ .cbp-tile::before { content: ""; display: block; width: 28px; height: 28px; margin-bottom: 14px; background-color: var(--accent); transition: background-color 0.2s ease; --cbp-ico-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"); -webkit-mask: var(--cbp-ico, var(--cbp-ico-fallback)) center / contain no-repeat; mask: var(--cbp-ico, var(--cbp-ico-fallback)) center / contain no-repeat; } .cbp-tile:hover::before { background-color: var(--gold-ink); } .cbp-tile b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; } .cbp-tile__sub, .cbp-tile span { display: block; font-size: 0.84rem; color: var(--faint); margin-top: 4px; } /* per-tile glyphs (generated) */ .cbp-tile--health { --cbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2 5 4-12 2 7h6'/%3E%3C/svg%3E"); } .cbp-tile--academic { --cbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h6v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M20 5a2 2 0 0 0-2-2h-6v16h6a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .cbp-tile--social { --cbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M2 20a7 7 0 0 1 14 0'/%3E%3Cpath d='M17 6a3 3 0 0 1 0 6M22 20a7 7 0 0 0-5-6.7'/%3E%3C/svg%3E"); } .cbp-tile--emotional { --cbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); } .cbp-tile--rights { --cbp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 10h16M5 10l7-5 7 5M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3C/svg%3E"); } /* ---------- Quick links: typed list with mono ticks ---------- */ .cbp-linklist { list-style: none; margin: 0; padding: 0; } .cbp-linklist li { margin: 0; } .cbp-linklist a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 10px 24px; position: relative; border-bottom: 1px dashed var(--rule); font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: color 0.15s; } .cbp-linklist li:last-child a { border-bottom: 0; } .cbp-linklist a::before { content: "›"; font-family: var(--mono); color: var(--accent); position: absolute; left: 2px; } .cbp-linklist a::after { content: "↗"; font-family: var(--mono); font-size: 0.8em; color: var(--rule); } .cbp-linklist a:hover { color: var(--accent); } .cbp-linklist a:hover::after { color: var(--accent); } /* ---------- Latest minutes: dated plaintext list ---------- */ .cbp-minutes { list-style: none; margin: 0; padding: 0; } .cbp-minutes li { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--rule); font-size: 0.95rem; } .cbp-minutes li:first-child { border-top: 0; padding-top: 2px; } .cbp-minutes li::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; background: var(--accent); } .cbp-minutes li.is-bac::before { background: var(--gold); } .cbp-minutes li span { font-family: var(--mono); } /* the date stamp */ /* ---------- Meet your PAC & BAC roster ---------- */ .cbp-roster-head { display: flex; align-items: center; gap: 12px; margin: 1.5rem 0 1rem; } .cbp-tag { font-family: var(--mono); color: #fff; font-weight: 500; letter-spacing: 0.06em; font-size: 0.7rem; padding: 5px 10px; border-radius: 6px; } /* scheme-fixed chip grounds — the white label needs the deep colours in both schemes */ .cbp-tag.pac { background: var(--accent-deep); } .cbp-tag.bac { background: #9A6E00; } .cbp-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .cbp-person { border: 1px solid var(--rule); border-radius: 2px; background: transparent; padding: 16px 12px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; } .cbp-avatar { width: 50px; height: 50px; border-radius: 2px; background: var(--well); border: 1px dashed var(--quiet-line); display: grid; place-items: center; color: var(--well-ink); } .cbp-avatar svg { width: 28px; height: 28px; } .cbp-person .cbp-role { font-weight: 600; color: var(--accent); font-size: 0.88rem; line-height: 1.25; } .cbp-person .cbp-name { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); border: 1px dashed var(--rule); background: var(--sheet); border-radius: 6px; padding: 3px 9px; } .cbp-person .cbp-req { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.04em; color: var(--gold-ink); text-transform: lowercase; } /* ---------- Hairline sections + generic card ---------- */ .cbp-cream, .cbp-card { background: transparent; border: 1px solid var(--rule); border-radius: 2px; } /* legacy banner components, kept quiet in case they return */ .cbp-banner { background: transparent; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); } .cbp-badge { display: inline-block; font-family: var(--mono); background: transparent; color: var(--accent) !important; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: lowercase; padding: 0; margin: 0 0 0.5rem; } .cbp-badge::before { content: "// "; } .cbp-event-card { background: transparent; border: 1px dashed var(--rule); border-radius: 2px; } .cbp-event-label { font-family: var(--mono); color: var(--faint) !important; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: lowercase; margin: 0 0 0.25rem; } /* ---------- The Events Calendar — brand accents + scheme-aware chrome ---------- Tribe paints from --tec-color-* custom properties it defines on :root with hardcoded near-blacks/greys (unreadable on the board). Re-point them at our tokens ON THE WRAPPER ELEMENTS (.tribe-common covers the events bar too): element-level custom properties beat tribe's inherited :root set regardless of stylesheet order. Light values are near-identical to tribe's defaults. */ .tribe-common, .tribe-common--breakpoint-medium .tribe-events, .tribe-events { --tec-color-accent-primary: var(--accent); --tec-color-accent-primary-hover: var(--accent-mid); --tec-color-accent-primary-active: var(--accent-mid); --tec-color-accent-secondary: var(--ink); --tec-color-background-events: var(--sheet); --tec-color-background: var(--paper); --tec-color-background-secondary: var(--well); --tec-color-background-secondary-hover: var(--well-2); --tec-color-text-primary: var(--ink); --tec-color-text-primary-light: var(--faint); --tec-color-text-secondary: var(--faint); --tec-color-text-disabled: var(--rule); --tec-color-border-default: var(--rule); --tec-color-border-secondary: var(--rule); --tec-color-border-tertiary: var(--faint); --tec-color-border-hover: var(--faint); --tec-color-border-active: var(--ink); --tec-color-icon-primary: var(--faint); --tec-color-icon-secondary: var(--rule); --tec-color-icon-active: var(--ink); --tec-color-icon-disabled: var(--rule); --tec-color-icon-focus: var(--accent); --tec-color-event-icon: var(--ink); --tec-color-event-icon-hover: var(--accent); /* tribe's alias vars resolve their var() chains up at :root, where the re-points above can't reach — so restate the aliases here too */ --tec-color-text-events-title: var(--ink); --tec-color-text-event-title: var(--ink); --tec-color-text-event-date: var(--ink); --tec-color-text-secondary-event-date: var(--faint); --tec-color-link-primary: var(--ink); --tec-color-link-accent: var(--accent); --tec-color-link-accent-hover: var(--accent-mid); --tec-color-button-primary: var(--accent-deep); /* scheme-fixed: white label */ --tec-color-button-primary-hover: var(--accent-deep-top); --tec-color-button-primary-active: var(--accent-deep-top); --tec-color-button-primary-background: var(--accent-tint); --tec-color-background-events-bar-submit-button: var(--accent-deep); --tec-color-background-events-bar-submit-button-hover: var(--accent-deep-top); --tec-color-background-events-bar-submit-button-active: var(--accent-deep-top); } .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date { color: var(--gold-ink); } .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-calendar-month__day-cell--selected { background-color: var(--accent-deep); /* scheme-fixed: tribe sets white text on it */ } /* ---------- bbPress (Discussion) — re-ink the plugin's grey chrome ---------- bbPress hardcodes light greys (#eaeaea header strip, #fff/#fbfbfb striping). Map them onto tokens so the forum table reads in both schemes; light values land within a hair of the plugin defaults. */ #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--well); border-top-color: var(--rule); } #bbpress-forums div.even, #bbpress-forums ul.even { background-color: var(--sheet); } #bbpress-forums div.odd, #bbpress-forums ul.odd { background-color: var(--paper); } #bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { border-top-color: var(--rule); } #bbpress-forums .bbp-forums-list { border-left-color: var(--rule); } /* ---------- Footer: fine print on paper ---------- */ .cbp-footer { border-top: 1px solid var(--rule); } .cbp-footer__cols { display: flex; gap: 2rem 3.25rem; flex-wrap: wrap; } .cbp-footer .cbp-footer__h { margin: 0 0 0.8rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase; color: var(--faint); } .cbp-footer .cbp-footer__h::before { content: "// "; color: var(--accent); } .cbp-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .cbp-footer__col a { font-family: var(--mono); font-size: 0.78rem; color: var(--faint); text-decoration: none; } .cbp-footer__col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .cbp-footer__fine { margin: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); letter-spacing: 0.01em; line-height: 1.9; } .cbp-footer__fine a { color: var(--accent); text-decoration: none; } .cbp-footer__fine a:hover { text-decoration: underline; } .cbp-footer__fine .cbp-footer__mark { float: left; margin: 4px 12px 0 0; } .cbp-footer__fine .cbp-footer__mark svg { width: 34px; height: 34px; display: block; } .cbp-footer__sig { margin: 14px 0 0; font-family: var(--mono); font-size: 0.72rem; color: var(--whisper); } /* ---------- Page lead paragraphs ---------- */ .cbp-lead { font-size: 1.15rem; line-height: 1.55; color: var(--ink); max-width: 40ch; } .cbp-lead strong { font-weight: 600; } /* ---------- Accordion (one per module) ---------- */ .cbp-acc { border: 1px solid var(--rule); border-radius: 2px; background: transparent; margin: 1.3rem 0; transition: border-color .2s ease, box-shadow .3s ease; } .cbp-acc:hover { border-color: var(--rule-hover); } /* Open card lifts gently off the paper and picks up a whisper of board-blue. */ .cbp-acc[open] { border-color: var(--accent-open-edge); box-shadow: 0 10px 26px -14px rgba(11, 79, 158, 0.22); } .cbp-acc > summary { list-style: none; cursor: pointer; padding: 0.95rem clamp(1rem, 3vw, 1.3rem); display: flex; align-items: baseline; gap: 0.75rem; font-weight: 600; font-size: 1.02rem; color: var(--ink); transition: background .2s ease, color .2s ease; } .cbp-acc > summary::-webkit-details-marker { display: none; } .cbp-acc > summary::before { content: "+"; flex: 0 0 auto; font-family: var(--mono); font-weight: 500; color: var(--accent); transition: transform .25s ease, color .2s ease; } .cbp-acc[open] > summary::before { content: "−"; } .cbp-acc > summary:hover { background: var(--accent-tint); } .cbp-acc > summary:hover::before { color: var(--accent-top); transform: translateY(-1px) scale(1.12); } .cbp-acc[open] > summary { background: var(--accent-tint); border-bottom: 1px dashed var(--rule); } .cbp-acc__body { padding: 0.55rem clamp(1rem, 3vw, 1.3rem) 1.5rem; } /* Smooth "rollout": animate the disclosed panel open and closed. This is the modern route — interpolate-size lets height:auto animate, and we transition ::details-content (everything below the summary). Browsers without support just snap open as before; reduced-motion is honoured by the global rule at the foot of this file. */ :root { interpolate-size: allow-keywords; } .cbp-acc::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .34s ease, opacity .3s ease, content-visibility .34s allow-discrete; } .cbp-acc[open]::details-content { block-size: auto; opacity: 1; } /* ---------- Prose rendered faithfully from the module markdown ---------- */ .cbp-prose { color: var(--ink); font-size: 0.98rem; line-height: 1.68; } .cbp-prose > :first-child { margin-top: 0.7rem; } .cbp-prose p, .cbp-prose li { font-size: 0.98rem; } /* deterministic base so headings stay dominant */ /* Section headings — clearly larger/bolder than body + links */ .cbp-prose h2 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 2rem 0 0.6rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); } .cbp-prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1rem; } /* Sub-sections (council names / right statements) — accent-keyed */ .cbp-prose h3 { font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 1.7rem 0 0.5rem; padding-left: 0.7rem; border-left: 2px solid var(--accent); } .cbp-prose h3 em { /* the "· big school decisions" tag */ color: var(--gold-ink); font-style: normal; font-weight: 500; font-size: 0.85em; } .cbp-prose p { margin: 0.6rem 0; } .cbp-prose ul, .cbp-prose ol { margin: 0.6rem 0 0.9rem; padding-left: 1.35rem; } .cbp-prose li { margin: 0.34rem 0; line-height: 1.6; } .cbp-prose li::marker { color: var(--accent); } .cbp-prose strong { color: var(--ink); font-weight: 600; } .cbp-prose hr { border: 0; border-top: 1px dashed var(--rule); margin: 1.5rem 0; } /* Links stay secondary to headings */ .cbp-prose a { color: var(--accent); font-weight: 500; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px; } .cbp-prose a:hover { text-decoration-color: var(--accent); } /* Source quotes: the excerpt body is real reading, so set it for reading — Fira Sans at 1rem (~16px), near-black ink (~17:1), framed by the gold rule. The trailing "— Source, …" attribution keeps the quiet mono-grey texture: that's a short label, the one place the typewriter face reads well. */ .cbp-prose blockquote { margin: 1.1rem 0; padding: 0.35rem 0 0.35rem 1.1rem; background: transparent; border-left: 2px solid var(--gold); border-radius: 0; color: var(--ink); font-family: var(--sans); } .cbp-prose blockquote p { margin: 0.5rem 0; font-size: 1rem; line-height: 1.6; } .cbp-prose blockquote p:first-child { margin-top: 0; } .cbp-prose blockquote p:last-child { margin-bottom: 0; } /* attribution line — only when a quote body precedes it (never the lone-p callout) */ .cbp-prose blockquote p:last-child:not(:first-child) { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; color: var(--faint); } /* ---------- Responsive video embed (16:9) ---------- */ .cbp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.1rem 0 0.5rem; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #000; } .cbp-video iframe, .cbp-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cbp-figcaption { font-family: var(--mono); font-size: 0.76rem; line-height: 1.6; color: var(--faint); margin: 0.3rem 0 1rem; } .cbp-figcaption strong { color: var(--ink); font-weight: 500; } /* Two videos side by side (e.g. English + Spanish) */ .cbp-video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; margin: 1.1rem 0 0.5rem; } .cbp-video-pair figure { margin: 0; } .cbp-video-pair .cbp-video { margin: 0; } .cbp-video-pair .cbp-figcaption { margin: 0.45rem 0 0; } /* ---------- YouTube playlist ([cbp_playlist]): player + always-open thumbnail rail ---------- */ /* One stacked layout at every width (player, prev/next bar, then the rail as compact rows): the content column is slim even on wide monitors, so a side rail never has room to breathe. */ .cbp-pl { margin: 1.1rem 0 1.6rem; } .cbp-pl__stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #000; } .cbp-pl__frame, .cbp-pl__hero { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Thumbnail facade — no iframe until the family taps play */ .cbp-pl__hero { display: block; background-size: cover; background-position: center; } .cbp-pl__hero[hidden] { display: none; } /* JS hides the facade once the player loads */ .cbp-pl__hero::after { /* bottom gradient so the title reads over any thumbnail */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(transparent, rgba(9, 16, 28, 0.78)); } /* play button borrows the signature-button treatment (blue → gold on hover) */ .cbp-pl__playbtn { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; isolation: isolate; background: linear-gradient(180deg, #FFCE2E, var(--gold)); border: 1px solid rgba(10, 20, 40, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 16px -4px rgba(9, 16, 28, 0.6); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .cbp-pl__playbtn::before { /* blue layer that fades out on hover */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: linear-gradient(180deg, var(--accent-deep-top), var(--accent-deep)); transition: opacity 0.18s ease; } .cbp-pl__playbtn::after { /* play triangle, drawn in CSS (no inline SVG) */ content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border: 11px solid transparent; border-right: 0; border-left: 17px solid #fff; transition: border-left-color 0.18s ease; } .cbp-pl__hero:hover .cbp-pl__playbtn, .cbp-pl__hero:focus-visible .cbp-pl__playbtn { transform: translate(-50%, -52%) scale(1.05); } .cbp-pl__hero:hover .cbp-pl__playbtn::before, .cbp-pl__hero:focus-visible .cbp-pl__playbtn::before { opacity: 0; } .cbp-pl__hero:hover .cbp-pl__playbtn::after, .cbp-pl__hero:focus-visible .cbp-pl__playbtn::after { border-left-color: var(--on-gold); } .cbp-pl__herotitle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0.7rem 0.95rem; color: #fff; font-weight: 500; font-size: 0.95rem; line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } /* Previous / next bar: quiet ghost pills */ .cbp-pl__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin: 0.75rem 0; } .cbp-pl__nav { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--accent); background: transparent; border: 1px solid var(--accent-edge); border-radius: 99px; padding: 0.5rem 1rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .cbp-pl__nav:hover:not(:disabled) { background: rgba(242, 183, 5, 0.14); border-color: rgba(200, 150, 10, 0.6); color: var(--gold-deep); } .cbp-pl__nav:disabled { opacity: 0.4; cursor: default; } .cbp-pl__count { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; } /* The rail — always expanded, numbered thumbs + titles */ .cbp-pl__rail { max-height: 22rem; overflow-y: auto; scrollbar-width: thin; margin: 0; padding: 0.3rem; list-style: none; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); } .cbp-pl__rail li { margin: 0; } .cbp-pl__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.45rem; border-radius: 7px; text-decoration: none; color: var(--ink); } .cbp-pl__item:hover { background: var(--accent-tint); text-decoration: none; } .cbp-pl__item.is-active { background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--gold); } .cbp-pl__thumb { flex: 0 0 78px; position: relative; } .cbp-pl__thumb img { display: block; width: 78px; height: 44px; object-fit: cover; border-radius: 5px; background: var(--well-2); } .cbp-pl__num { /* index badge on the thumbnail corner */ position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 4px; background: rgba(9, 16, 28, 0.78); color: #fff; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; line-height: 1.35; } .cbp-pl__item.is-active .cbp-pl__num { background: var(--gold); color: var(--on-gold); } .cbp-pl__meta { min-width: 0; } .cbp-pl__t { display: block; font-size: 0.84rem; font-weight: 500; line-height: 1.35; } .cbp-pl__dur { display: block; margin-top: 2px; color: var(--faint); font-family: var(--mono); font-size: 0.7rem; font-variant-numeric: tabular-nums; } /* ---------- Section pages (Resources subpages): subhead ---------- */ /* The intro line under the title. Give it a tighter measure and keep it left-aligned flush with the title (margin-left = the offset that centres a content-size column, clamped to 0 on narrow screens). Holding the text to the left half clears the right of the header for the ghost photo — the same move the homepage hero makes with its 38ch lead. */ .parent-pageid-7.page-child .wp-block-post-title { margin-bottom: 0.45rem; } .parent-pageid-7.page-child .entry-content { margin-top: 0; } .parent-pageid-7.page-child .cbp-lead { font-size: 0.98rem; line-height: 1.5; color: var(--faint); text-align: left; max-width: 44ch; margin-top: 0; margin-bottom: 1.7rem; /* WordPress's constrained layout forces `margin-inline: auto !important` on non-aligned children, which would centre this narrow block and leave it indented from the title. Re-flush its left edge to the content column (the offset that centres a --wrap-wide column; clamped to 0 on screens narrower than --wrap). The !important is only here to beat core's. */ margin-left: max(0px, calc((100% - var(--wrap)) / 2)) !important; margin-right: auto; } /* ---------- Section-page ghost (Resources subpages) ---------- */ /* Each Resources child page carries a faded photo behind its title — same blueprint-blue, multiply-into-paper treatment as the homepage hero. .cbp-page is the full-width wrapper from templates/page.html. With the subhead held left, the ghost lives in the cleared top-right: it overlaps the content column's right edge and bleeds ~150px on toward the viewport edge, so it reads as one photo behind the header rather than a thumbnail stranded in the margin. Because it now sits on blank paper, not under text, it can carry more opacity and a softer, wider reveal. */ .parent-pageid-7.page-child .cbp-page { position: relative; } .parent-pageid-7.page-child .wp-block-post-title, .parent-pageid-7.page-child .entry-content { position: relative; z-index: 1; } /* Accordions are transparent by default; give them the paper colour here so the ghost is cleanly hidden behind them and only shows in the header band (otherwise the photo reads as showing *through* the first accordion). */ .parent-pageid-7.page-child .cbp-acc { background: var(--paper); } .parent-pageid-7.page-child .cbp-page::before { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 0; right: max(12px, calc(50% - var(--wrap) / 2 - 150px)); width: 460px; max-width: 48%; aspect-ratio: 900 / 564; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: calc(0.24 * var(--ghost-fade, 1)); mix-blend-mode: var(--ghost-blend); filter: var(--ghost-filter); -webkit-mask-image: radial-gradient(85% 92% at 62% 42%, #000 46%, transparent 84%); mask-image: radial-gradient(85% 92% at 62% 42%, #000 46%, transparent 84%); } /* per-page photo */ body.page-id-75 .cbp-page::before { background-image: url("ghost-gym.jpg"); } body.page-id-76 .cbp-page::before { background-image: url("ghost-backpacks.jpg"); } body.page-id-77 .cbp-page::before { background-image: url("ghost-playground.jpg"); } body.page-id-78 .cbp-page::before { background-image: url("ghost-hallway.jpg"); } /* Rights page — a portrait newspaper clipping of "Queen Mary" Courtenay. Give it a taller, narrower box (the extra class beats the base rule's specificity so these dimensions actually win), and dial the opacity down: newsprint stays legible even when faint, so it should whisper, not shout. */ body.page-id-55.parent-pageid-7 .cbp-page::before { background-image: url("ghost-courtenay.jpg"); aspect-ratio: 460 / 1016; width: 210px; max-width: 30%; opacity: calc(0.14 * var(--ghost-fade, 1)); } /* ---------- Responsive ---------- */ @media (max-width: 600px) { .cbp-tiles, .cbp-roster { grid-template-columns: repeat(2, 1fr); } .cbp-video-pair { grid-template-columns: 1fr; } .cbp-hero__ghost { opacity: calc(0.1 * var(--ghost-fade, 1)); right: -70px; } .parent-pageid-7.page-child .cbp-page::before { opacity: calc(0.1 * var(--ghost-fade, 1)); } .cbp-footer__cols { gap: 1.6rem 2rem; } /* Section nav stays visible on phones — no hamburger. Its own strip under the letterhead: ONE hairline rule (on the