(every other admin/views/*.php screen -- Active Users, Ads, etc. -- has its own custom save UI, not this pattern), so this selector only ever matches there in practice; no extra scoping needed. :has(#submit) rather than a blanket p.submit match for the same reason as LSE's: #submit is the DEFAULT id WP's submit_button() gives its call when no explicit name/id is passed, same call this screen makes. Browsers without :has() support just don't match this rule, leaving Save Settings exactly where WP puts it by default. */ .wrap form p.submit:has( #submit ) { position: sticky; bottom: 0; z-index: 10; margin: 20px 0 0; padding: 12px 20px; background: #f0f0f1; border-top: 1px solid #dcdcde; box-shadow: 0 -2px 6px rgba( 0, 0, 0, 0.06 ); } /* Guarantees the native `hidden` attribute always wins, no matter what `display` value a class sets elsewhere. Without this, any element that both has an explicit `display` (flex, block, etc.) AND gets toggled via `hidden` — as several pieces of GroupBrief's UI do, e.g. RSVP's "Not Going" state, the media-resize hint text, the admin add-Section-Moderator row — silently stops hiding, because an author stylesheet's `display` declaration beats the browser's own `[hidden] { display: none }` default at equal specificity. Setting this once, globally, up front means no future toggled element can accidentally reintroduce the same bug. */ [hidden] { display: none !important; } .gb-theme-autumn-oak { --gb-primary: #D4A017; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #D4A017; --gb-on-accent: #2E2420; --gb-bg: #FAF3E8; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #2E2420; --gb-text-muted: #7C6B5B; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #5C1A1A; --gb-frame-text: #FAF3E8; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FAF3E8; } .gb-theme-stone-rust { --gb-primary: #A35F35; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #A35F35; --gb-on-accent: #FFFFFF; --gb-bg: #F5F3F0; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #2B2B2B; --gb-text-muted: #716D68; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #3A3A3A; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-regatta-blue { --gb-primary: #186FA8; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #186FA8; --gb-on-accent: #FFFFFF; --gb-bg: #F4F6F8; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #1F2A33; --gb-text-muted: #65707A; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #0B3D5C; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-royal-plum { --gb-primary: #8C3FA0; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #8C3FA0; --gb-on-accent: #FFFFFF; --gb-bg: #F7F3F6; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #241521; --gb-text-muted: #796A76; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #3B1240; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-meadow-green { --gb-primary: #227A3B; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #227A3B; --gb-on-accent: #FFFFFF; --gb-bg: #F5F7F0; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #202B1F; --gb-text-muted: #677364; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #1B4D2E; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-golden-harvest { --gb-primary: #D9A61C; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #D9A61C; --gb-on-accent: #2E2015; --gb-bg: #FAF3E0; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #2E2015; --gb-text-muted: #7B6C54; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #5C4317; --gb-frame-text: #FAF3E0; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FAF3E0; } .gb-theme-maroon { --gb-primary: #BF1F24; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #BF1F24; --gb-on-accent: #FFFFFF; --gb-bg: #F7F0EE; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #241816; --gb-text-muted: #7C6765; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #2A0E10; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-scarlet { --gb-primary: #C9A876; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #C9A876; --gb-on-accent: #2A1810; --gb-bg: #F8F0EC; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #2A1810; --gb-text-muted: #7B695E; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #8A0E2E; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-charcoal-steel { --gb-primary: #8C8E92; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #8C8E92; --gb-on-accent: #232326; --gb-bg: #F2F3F4; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #232326; --gb-text-muted: #6B6E72; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #2B2B2E; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } .gb-theme-usa { --gb-primary: #E1193A; --gb-primary-dark: color-mix(in srgb, var(--gb-primary) 80%, black); --gb-accent: #E1193A; --gb-on-accent: #FFFFFF; --gb-bg: #FBFAF7; --gb-surface: color-mix(in srgb, white 55%, var(--gb-bg) 45%); --gb-text: #1C1F2B; --gb-text-muted: #6B7282; --gb-border: color-mix(in srgb, white 70%, var(--gb-text-muted) 30%); --gb-heading: #144096; --gb-frame-text: #FFFFFF; --gb-frame-text-muted: color-mix(in srgb, var(--gb-frame-text) 70%, var(--gb-heading) 30%); --gb-on-heading: #FFFFFF; } /* System-font stacks only, no @font-face/webfont loading -- the same 5 curated pairings as Lodge Sites Engine's LSE_Font_Pairings (see GB_Settings::FONT_PAIRINGS), kept as GroupBrief's own native typography rather than a runtime dependency on that plugin. */ .gb-typography-classic-serif { --gb-font-heading: Georgia, 'Times New Roman', Times, serif; --gb-font-body: Georgia, 'Times New Roman', Times, serif; } .gb-typography-modern-sans { --gb-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --gb-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .gb-typography-traditional { --gb-font-heading: 'Times New Roman', Times, Georgia, serif; --gb-font-body: Arial, Helvetica, 'Segoe UI', sans-serif; } .gb-typography-friendly-humanist { --gb-font-heading: Verdana, Geneva, Tahoma, sans-serif; --gb-font-body: Verdana, Geneva, Tahoma, sans-serif; } .gb-typography-bold-statement { --gb-font-heading: 'Arial Black', 'Arial Bold', Arial, sans-serif; --gb-font-body: Georgia, 'Times New Roman', serif; } /* GB's closest structural equivalent to LSE's own .lse-page panel -- the single outer container every front-end template (feed.php, auth.php, invitation-gate.php, feed-cancelled.php, feed-locked.php) wraps its whole page in. Background derived from --gb-accent, driven by the admin-adjustable --gb-chrome-intensity (unlike 's own frame background above, which is fixed at 100% always). Plain var(--gb-bg) fallback declared first, same color-mix()-unsupported-browser pattern as everywhere else in this file. */ .gb-wrap { max-width: 720px; margin: 0 auto; background-color: var(--gb-bg); background-color: color-mix(in srgb, var(--gb-accent) var(--gb-chrome-intensity), var(--gb-bg)); color: var(--gb-text); font-size: 16px; line-height: 1.5; font-family: var(--gb-font-body, inherit); } /* Panel text contrast, gb-chrome-full only (Page Background Intensity exactly '100') -- at that one setting .gb-wrap's background above is the palette's pure, unblended Accent color, so --gb-text (chosen for contrast against --gb-bg) can no longer be trusted; --gb-on-accent is the palette's own contrast-safe pairing for text directly on Accent. Lower intensities blend enough toward --gb-bg that --gb-text stays legible on its own, same reasoning as LSE's own lse-chrome-full. */ body.gb-chrome-full .gb-wrap { color: var(--gb-on-accent); } /* The override above only reaches elements that inherit their color -- these sit directly on .gb-wrap's background with no card of their own in between (confirmed by tracing every DOM branch of feed.php, auth.php, invitation-gate.php, feed-cancelled.php and feed-locked.php) but each sets its OWN explicit color for the non-chrome-full case, so a direct swap is needed for every one of them individually. */ body.gb-chrome-full .gb-header-text-link, body.gb-chrome-full .gb-header-link-divider, body.gb-chrome-full .gb-back-to-feed, body.gb-chrome-full .gb-empty, body.gb-chrome-full .gb-section-nav a { color: var(--gb-on-accent); } /* The rule above assumes each of these sits directly on .gb-wrap's own accent-tinted background. That's true for .gb-empty and for the feed page's own "Back to main feed" link — but three of these are actually nested inside a .gb-card in the real templates: the feed header's User Manual / My Profile / Log Out links and their dividers, that same card's section-nav strip (all in the .gb-feed-header card in feed.php), and the Profile page's own "Back to Feed" link (wrapped in a plain .gb-card there, unlike its un-carded sibling in feed.php). .gb-card is always the much lighter --gb-surface background regardless of palette or chrome intensity, so on-accent text painted there can end up with little or no contrast (confirmed invisible on the USA palette, whose --gb-on-accent is pure white). This is more specific than the rule above, so it wins only for the actually- card-nested instances, leaving the un-carded ones untouched. */ body.gb-chrome-full .gb-card .gb-header-text-link, body.gb-chrome-full .gb-card .gb-header-link-divider, body.gb-chrome-full .gb-card .gb-section-nav a, body.gb-chrome-full .gb-card .gb-back-to-feed { color: var(--gb-text); } /* Defensive resets -- every selector below paints its own card-like background (--gb-surface/--gb-input-bg/etc.) but has no explicit color of its own today, relying on inheriting --gb-text from an ancestor. Without this, the gb-chrome-full override above would leak onto these cards and pair on-accent text with a surface background never designed to hold it. Unconditional and harmless outside gb-chrome-full, since --gb-text is already the effective inherited value there regardless. (.gb-reaction-btn:hover/.gb-reaction-active and .gb-post-pinned are deliberately omitted -- each already gets its color from a base rule declared directly on the same element, which is immune to any ancestor's color by definition.) */ body.gb-chrome-full .gb-card, body.gb-chrome-full .gb-post, body.gb-chrome-full .gb-rsvp-block, body.gb-chrome-full .gb-poll-organizer-preview, body.gb-chrome-full .gb-palette-row, body.gb-chrome-full .gb-stat-card, body.gb-chrome-full tr.gb-note-new, body.gb-chrome-full .gb-avatar-form, body.gb-chrome-full .gb-notification-prefs-form, body.gb-chrome-full .gb-media-resizable-footer, body.gb-chrome-full .gb-modal, body.gb-chrome-full .gb-card-block-row, body.gb-chrome-full .gb-manual-toc { color: var(--gb-text); } .gb-card { background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: 10px; padding: 20px; margin-bottom: 20px; } .gb-card-center { text-align: center; padding: 40px 24px; } .gb-input { width: 100%; padding: 10px 12px; margin: 4px 0 12px; border: 1px solid var(--gb-border); border-radius: 6px; background: var(--gb-input-bg); color: var(--gb-text); font-size: 15px; font-family: inherit; box-sizing: border-box; } .gb-button { display: inline-block; padding: 10px 18px; border-radius: 6px; border: 1px solid var(--gb-border); background: var(--gb-surface); color: var(--gb-text); cursor: pointer; font-size: 15px; font-family: inherit; } /* color was hardcoded #fff -- fails WCAG AA for Autumn Oak/Golden Harvest's own lighter, gold-toned accents (see the contrast audit in this file's own top comment). --gb-on-accent is chosen per palette specifically for legibility against --gb-primary/--gb-accent, and :hover inherits this same resolved value automatically (the custom property itself doesn't change between states, only the background it's paired with does), so no separate :hover color rule is needed. */ .gb-button-primary { background: var(--gb-primary-dark); border-color: var(--gb-primary-dark); color: var(--gb-on-accent); } .gb-button-primary:hover { background: var(--gb-primary); } .gb-post { background: var(--gb-surface); border: 1px solid var(--gb-border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; } .gb-wrap h1, .gb-wrap h2, .gb-wrap h3, .gb-post-title { font-family: var(--gb-font-heading, inherit); margin: 0 0 4px; } .gb-post-meta { display: flex; align-items: center; gap: 8px; color: var(--gb-text-muted); font-size: 13px; margin-bottom: 10px; } .gb-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; margin-right: 6px; } /* ---- Reactions ---- */ .gb-reaction-bar { display: flex; gap: 4px; margin-top: 10px; } .gb-reaction-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--gb-border); border-radius: 20px; padding: 4px 10px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--gb-text); } .gb-reaction-btn:hover { background: var(--gb-surface-alt, rgba(0,0,0,0.04)); } .gb-reaction-btn.gb-reaction-active { border-color: var(--gb-accent, #7a6a4f); background: var(--gb-surface-alt, rgba(0,0,0,0.05)); } .gb-reaction-emoji { display: inline-flex; align-items: center; } .gb-reaction-emoji img { display: block; } .gb-reaction-count { font-size: 12px; color: var(--gb-text-muted); } /* ---- RSVP ---- */ .gb-rsvp-block { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--gb-border); border-radius: 8px; background: var(--gb-surface-alt, rgba(0,0,0,0.02)); } .gb-rsvp-datetime { font-weight: 600; margin-bottom: 8px; } .gb-rsvp-response label { display: block; margin-bottom: 8px; font-size: 13px; } .gb-rsvp-headcount-input { width: 60px; margin-left: 6px; } .gb-rsvp-going-status { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .gb-rsvp-total { font-size: 13px; color: var(--gb-text-muted); margin: 4px 0; } .gb-rsvp-past { font-style: italic; color: var(--gb-text-muted); } /* ---- Shared "Organizer view" panel — used by both the RSVP breakdown and the poll's pre-vote results preview, so the pattern reads as one consistent feature ("leadership gets an extra panel here") rather than two differently-styled things members might interpret differently. ---- */ .gb-poll-organizer-preview { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--gb-accent); border-radius: 6px; background: var(--gb-surface-alt, rgba(0,0,0,0.03)); } .gb-poll-organizer-preview summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gb-accent); } .gb-poll-organizer-preview .gb-poll-results, .gb-rsvp-breakdown-list { margin-top: 8px; } .gb-rsvp-breakdown-list { padding-left: 18px; font-size: 13px; } /* ---- Polls ---- */ .gb-post-poll { border-left: 4px solid var(--gb-accent); } .gb-poll-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gb-accent); margin-bottom: 4px; } /* Shared wrapper for any inline SVG icon sitting next to text (RSVP date, poll badge) — SVG icons are used instead of Unicode emoji throughout because emoji rendering depends on font availability/loading order, which briefly showed the right icon before a webfont swap replaced it with an empty glyph, even with an !important font-family override. SVG has no such dependency. */ .gb-icon-inline { display: inline-flex; align-items: center; vertical-align: middle; } .gb-icon-inline svg { display: block; } .gb-poll { margin-top: 10px; } .gb-poll-option-choice { display: block; padding: 6px 0; font-size: 14px; } .gb-poll-comment-input { display: block; width: 100%; box-sizing: border-box; margin: 8px 0; } .gb-poll-result-row { margin-bottom: 10px; } .gb-poll-result-label { font-size: 14px; margin-bottom: 3px; } .gb-poll-my-choice .gb-poll-result-label { font-weight: 600; } .gb-poll-result-bar-wrap { background: rgba(0,0,0,0.08); border-radius: 4px; height: 10px; overflow: hidden; } .gb-poll-result-bar { background: var(--gb-accent, #7a6a4f); height: 100%; } .gb-poll-result-count { font-size: 12px; color: var(--gb-text-muted); margin-top: 2px; } .gb-poll-comments { margin-top: 14px; border-top: 1px solid var(--gb-border); padding-top: 8px; } .gb-poll-comments-heading { font-size: 13px; font-weight: 600; margin: 0 0 6px; } .gb-poll-comment { font-size: 13px; margin-bottom: 6px; } /* ---- Composer: RSVP / Poll toggles ---- */ .gb-composer-toggle { margin-top: 10px; } #gb-rsvp-fields, #gb-poll-builder { margin: 8px 0; padding: 10px 14px; border: 1px solid var(--gb-border); border-radius: 8px; } .gb-poll-hint { font-size: 12px; font-style: italic; color: var(--gb-text-muted); margin-top: 0; } .gb-poll-option-row { margin-bottom: 6px; } .gb-poll-option-row .gb-poll-option-input { width: 100%; box-sizing: border-box; } .gb-comments { margin-top: 14px; border-top: 1px solid var(--gb-border); padding-top: 10px; } .gb-comment { padding: 8px 0; border-bottom: 1px solid var(--gb-border); font-size: 14px; } .gb-comment:last-child { border-bottom: none; } .gb-comment-date { color: var(--gb-text-muted); font-size: 12px; margin-left: 6px; } .gb-comment-restricted { color: var(--gb-text-muted); font-style: italic; font-size: 13px; } /* Plain text-link look for the "Load N more comments" trigger (see GB_Feed::RECENT_COMMENTS_LIMIT/ajax_load_more_comments()) -- a real