/* @override
https://gs26.local/wp-content/themes/go26-child/go26-styles.css?* */
/* =========================================================
go26-styles.css — GoSafelyCA custom styles (go26-child)
Loaded by functions.php after GeneratePress's styles.
========================================================= */
/* =========================================================
WHERE THINGS LIVE (one source of truth per rule)
- Colors: GP Customizer > Colors > Global Colors (output as --ink, --teal, etc.)
- Fonts, sizes, weights: GP Customizer > Typography (Open Sans via GP Font Library, hosted locally)
- Site width, sidebar, menu breakpoint, element colors: GP Customizer
- Reusable block styles (buttons, sections, text column): GB Pro > Global Styles
- This file: tokens GP has no setting for, focus/link states, legacy components
Variable names use the gsc- prefix. Do not use --gap or --max-rows
(the Empty Chair Club snippet sets those on :root).
========================================================= */
/* @group Tokens */
:root {
/* Widths */
--gsc-text-width: 980px; /* readable text column (live's container) */
--gsc-narrow-width: 754px; /* live's text measure (784 col minus 15px padding); GP padding is the gutter */
/* Spacing scale */
--gsc-space-2xs: 4px;
--gsc-space-xs: 8px;
--gsc-space-s: 16px;
--gsc-space-m: 24px;
--gsc-space-l: 40px;
--gsc-space-xl: 64px;
--gsc-space-2xl: 96px;
/* Shape */
--gsc-radius: 3px; /* buttons (Total default) */
--gsc-radius-card: 8px;
/* Focus ring */
--gsc-focus-color: var(--ink, #000);
--gsc-focus-width: 3px;
--gsc-focus-offset: 2px;
}
/* Breakpoints (match GenerateBlocks defaults; CSS vars can't be used in media queries)
mobile <= 767px
tablet 768px - 1024px
desktop >= 1025px (GP mobile menu also switches at 1024px) */
@media (max-width: 767px) {
:root {
--gsc-space-l: 32px;
--gsc-space-xl: 48px;
--gsc-space-2xl: 64px;
}
}
/* @end Tokens */
/* @group Base */
/* ---------- Focus (WCAG 2.4.7 / 2.4.11) ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: var(--gsc-focus-width) solid var(--gsc-focus-color);
outline-offset: var(--gsc-focus-offset);
}
/* Dark areas: switch the ring to white */
.top-bar,
.site-footer,
.footer-widgets,
.site-info,
.gsc-on-dark {
--gsc-focus-color: var(--white, #fff);
}
/* ---------- Headings ----------
Sizes, weights and colors are in GP Customizer > Typography. GP has no
alignment setting, so H1 centering (live's page-title style) lives here. */
h1 {
text-align: center;
}
/* Page-title look on another heading level (Oct 12, Home).
Class gsc-title in Advanced > Additional CSS class(es), e.g. an H2 that
should look like the H1. Sizes follow the H1 in GP Customizer (40 / 32 / 28). */
.entry-content .gsc-title,
.is-root-container .gsc-title {
font-size: 40px;
font-weight: 800;
line-height: 1.375;
text-align: center;
color: var(--ink);
}
@media (max-width: 1024px) {
.entry-content .gsc-title,
.is-root-container .gsc-title { font-size: 32px; }
}
@media (max-width: 768px) {
.entry-content .gsc-title,
.is-root-container .gsc-title { font-size: 28px; }
}
/* ---------- Section rule ----------
Live's 4px WPBakery separator: under the page title and between sections.
Core Separator block (
). Overrides GP's 1px gray hr and core's 100px short rule. */
hr,
.wp-block-separator,
.block-editor-block-list__block.wp-block-separator { /* editor: beats GP's "body .block-editor-block-list__block hr" */
border: 0;
border-top: 4px solid var(--ink);
height: 0;
width: 100%;
max-width: none;
background: none;
opacity: 1;
margin: 0 0 var(--gsc-space-m);
}
/* Section rules: gap above (Oct 19). Exception to push-down, like the banner and band.
Only the rule that opens a section row, not the one under the H1. */
.entry-content section > hr:first-child,
.is-root-container section > hr:first-child {
margin-top: var(--gsc-space-l); /* 40, phones 32 */
}
/* Small print: source lines, notes (gsc-small on a Paragraph). First use: Wrong-Way Sources, Oct 19 */
.entry-content .gsc-small,
.is-root-container .gsc-small {
font-size: 14px;
line-height: 1.75;
}
/* Image floated right beside text (gsc-float-right on a core Image). First use: Safe Systems, Oct 19.
Centered on its own line on phones. */
.entry-content .gsc-float-right,
.is-root-container .gsc-float-right {
float: right;
max-width: 45%;
margin: 0 0 var(--gsc-space-s) var(--gsc-space-m);
}
.entry-content .gsc-float-right img,
.is-root-container .gsc-float-right img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 767px) {
.entry-content .gsc-float-right,
.is-root-container .gsc-float-right {
float: none;
max-width: 100%;
width: fit-content;
margin: 0 auto var(--gsc-space-m);
}
}
/* ---------- Links ----------
Color and hover color are set in GP Customizer. No underline, matching live
(flagged for Heidi: WCAG 1.4.1 links distinguishable without color). */
/* Push-down for content images and button groups, like paragraphs (Oct 19) */
.entry-content .wp-block-image,
.entry-content .wp-block-buttons,
.is-root-container .wp-block-image,
.is-root-container .wp-block-buttons {
margin-bottom: var(--gsc-space-m);
}
/* Banner photo sits flush on the Home tagline bar */
.entry-content .gsc-banner > .wp-block-image:not(:last-child) {
margin-bottom: 0;
}
/* @end Base */
/* @group Layout */
/* ---------- Full-width rows ----------
GB Elements set to Align: Full width break out of the content column
(GP: .no-sidebar .entry-content .alignfull uses 100vw). 100vw includes the
scrollbar where scrollbars are always visible, so clip the sliver. */
body {
overflow-x: clip;
}
/* A full-width row at the very end of a page sits on the footer (as live),
instead of leaving GP's 40px content padding as a white strip. */
.site-content:has(.entry-content > .alignfull:last-child) {
padding-bottom: 0;
}
/* Show/hide content by width (Oct 19). Mobile = 767 and below, matching GB.
Front end only: the editor shows both. display: none also hides from screen readers. */
@media (max-width: 767px) {
.entry-content .gsc-hide-mobile { display: none; }
}
@media (min-width: 768px) {
.entry-content .gsc-show-mobile { display: none; }
}
/* Stacked items with a gap (gsc-stack on a Container). First use: Slow the Fast Down speed bars, Oct 19 */
.entry-content .gsc-stack > * + *,
.is-root-container .gsc-stack > * + * {
margin-top: var(--gsc-space-s); /* 16 */
}
.entry-content .gsc-stack > *,
.is-root-container .gsc-stack > * {
margin-bottom: 0;
}
/* @end Layout */
/* @group Lists */
/* ---------- Lists ----------
Default item gap for content lists. Editors switch per list with
List block > Advanced > Additional CSS class(es):
gsc-list-spaced (16px, long sentence items) or gsc-list-tight (no gap). */
.entry-content ul,
.entry-content ol,
.is-root-container ul,
.is-root-container ol { margin-left: 2em; } /* 32px, live's indent (GP default 3em) */
.is-root-container ul,
.is-root-container ol { margin-left: 0; padding-left: 2em; } /* editor: lists are .wp-block (auto margins) with reverted padding */
.entry-content ul > li + li,
.entry-content ol > li + li,
.is-root-container ul > li + li,
.is-root-container ol > li + li { margin-top: var(--gsc-space-xs); }
.entry-content .gsc-list-spaced > li + li,
.is-root-container .gsc-list-spaced > li + li { margin-top: var(--gsc-space-s); }
.entry-content .gsc-list-tight > li + li,
.is-root-container .gsc-list-tight > li + li { margin-top: 0; }
/* Lists, plain: list semantics, no bullets or indent (e.g. E-bike Resources) */
.entry-content ul.gsc-list-plain,
.is-root-container ul.gsc-list-plain {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.entry-content ul.gsc-list-plain > li,
.is-root-container ul.gsc-list-plain > li {
margin-bottom: var(--gsc-space-s);
}
.entry-content ul.gsc-list-plain a,
.is-root-container ul.gsc-list-plain a {
font-weight: 700;
}
/* @end Lists */
/* @group Buttons */
/* ---------- Core / GP buttons ----------
Colors come from GP Customizer > Colors > Buttons. */
.button,
.wp-block-button__link,
button:not(.components-button),
input[type="submit"] {
border-radius: var(--gsc-radius);
}
/* Live's button padding (Total: .538em 1.077em at 14px) */
.button,
.wp-block-button .wp-block-button__link,
input[type="submit"] {
padding: 0.54em 1.08em;
}
/* @end Buttons */
/* @group Header */
/* Logo box: same height in both languages, so switching doesn't move the page */
.site-header .site-logo {
min-height: 72px;
display: flex;
align-items: center;
margin-top: 20px;
}
.site-header .site-logo .is-logo-image {
height: 90px;
width: auto;
}
@media (min-width: 1001px) {
html[lang^="en"] .main-navigation .main-nav > ul > li > a { font-size: 16px; }
}
.gsc-lang-switch,
.gsc-util-links {
display: flex;
flex-wrap: wrap;
gap: 0 12px;
margin: 0;
padding: 0;
list-style: none;
}
.gsc-lang-switch li + li::before,
.gsc-util-links li + li::before {
content: "|";
content: "|" / "";
margin-right: 12px;
}
.gsc-top-bar a {
color: var(--white);
text-decoration: none;
text-transform: uppercase;
}
.gsc-top-bar a:hover,
.gsc-top-bar a:focus-visible {
text-decoration: underline;
}
/* Top bar: Media Toolkits as a teal button (Josh, Oct 26) */
.gsc-top-bar .gsc-util-links a {
display: inline-block;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 12px;
padding-right: 12px;
border-radius: 3px;
background: var(--teal);
color: var(--ink);
}
.gsc-top-bar .gsc-util-links a:hover,
.gsc-top-bar .gsc-util-links a:focus-visible {
background: var(--maroon);
color: var(--white);
text-decoration: none;
}
/* nudges text to right to line up better with edge */
@media (min-width: 1001px) {
.main-navigation .main-nav > ul {
margin-right: -16px;
}
}
#mobile-header .site-logo.mobile-header-logo img {
width: calc(100vw - 100px);
max-width: 300px;
height: auto;
padding-top: 10px;
padding-bottom: 10px;
}
#mobile-header {
padding-top: 16px;
}
/* Phones and tablets (mobile header, up to 1000px): less space above the page banner, so the gap under the header matches the gap above the logo */
@media (max-width: 1000px) {
.entry-content .gsc-banner {
margin-top: 16px;
}
}
/* @end header */
/* @group Top Bar */
/* Top bar: EN/ES switcher (left) + utility links (right). GP Hook Element */
.gsc-top-bar {
background: var(--forest);
color: var(--white);
padding: 6px 16px;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
.gsc-top-bar__inner {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0 24px;
max-width: 980px;
margin: 0 auto;
}
@media (min-width: 1001px) {
/* Utility links pinned right; switcher stays centered like live */
.gsc-top-bar__util {
position: absolute;
top: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
}
}
/* Top bar: utility links move into the flyout at the hamburger breakpoint (Oct 9).
Keep in step with GP's Mobile Menu Breakpoint (768). */
@media (max-width: 1000px) {
.gsc-top-bar__util {
display: none;
}
}
/* @end top bar */
/* @group Main Menu */
/* ---------- Primary navigation ----------
Menu labels use
for live's two-line look. GP sets line-height to the
menu item height (60px), which doubles two-line items, so center the text
in a 60px row with a normal line height instead. */
.main-navigation .main-nav > ul > li > a {
display: flex;
align-items: center;
min-height: 60px;
line-height: 1.3;
padding-top: var(--gsc-space-xs);
padding-bottom: var(--gsc-space-xs);
}
.main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
line-height: 1.3;
}
/* ES nav: no dropdown arrows above the hamburger, so the longer Spanish labels fit on one row */
@media (min-width: 769px) {
:lang(es) .main-navigation .dropdown-menu-toggle {
display: none;
}
:lang(es) .main-navigation .main-nav ul li.menu-item-has-children > a {
padding-right: 12px; /* matches GP's 12px menu item padding */
}
}
/* @end main menu */
/* @group Drop Menus DT */
/* Desktop dropdowns: Slate edge and soft shadow, as live, no triangle (Oct 9) */
#site-navigation .main-nav ul ul {
border: 1px solid var(--slate);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
#site-navigation .main-nav ul ul {
padding: 0;
}
#site-navigation .main-nav ul ul li + li {
border-top: 1px solid var(--slate);
}
/* @end drop menus DT */
/* @group Mobile Menu */
/* Mobile-only menu items: hidden in the header nav, shown in the flyout (Oct 9) */
#site-navigation .gsc-mobile-only {
display: none;
}
/* Mobile menu: drop GP's hard-coded rgba(0,0,0,.02) tint on the toggle and open panel (Oct 9) */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
background-color: var(--white);
}
/* Mobile menu: larger hamburger / close icon (Oct 9) */
@media (max-width: 1000px) {
.menu-toggle .gp-icon {
font-size: 30px;
}
}
.top-bar,
.site-footer,
.footer-widgets,
.site-info,
.slideout-navigation,
.gsc-on-dark {
--gsc-focus-color: var(--white, #fff);
}
/* Mobile flyout: panel width 320px, as live (Oct 9). GP has no setting for it */
html:root {
--gp-slideout-width: 320px;
}
/* Mobile flyout: dividers (Oct 9) */
.slideout-navigation .main-nav li {
border-bottom: 1px solid var(--slate);
}
.slideout-navigation .main-nav .sub-menu li:last-child {
border-bottom: 0;
}
/* Mobile flyout: carets on the right edge, full-height tap area (Oct 9) */
.slideout-navigation .main-nav .dropdown-menu-toggle {
margin-left: auto;
align-self: stretch;
display: flex;
align-items: center;
}
/* Mobile flyout: roomier rows (Oct 9) */
.slideout-navigation .main-nav ul li a {
padding-top: 14px;
padding-bottom: 14px;
}
/* Mobile flyout: indent sub-items (Oct 9) */
.slideout-navigation .main-nav .sub-menu a {
padding-left: 24px;
}
/* Mobile flyout: line between parent and its sub-items (Oct 9) */
.slideout-navigation .main-nav .sub-menu {
border-top: 1px solid var(--slate);
}
/* Mobile flyout: larger close icon (Oct 9) */
.slideout-navigation button.slideout-exit .gp-icon {
font-size: 24px;
}
/* Mobile flyout: slightly larger, heavier carets (Oct 9) */
.slideout-navigation .main-nav .dropdown-menu-toggle .gp-icon {
font-size: 22px;
}
.slideout-navigation .main-nav .dropdown-menu-toggle .gp-icon svg {
stroke: currentColor;
stroke-width: 24;
}
/* @end */
/* @group Footer */
/* Footer: links + copyright (shortcodes [gsc_footer_links] / [gsc_footer_copy]) */
.gsc-footer-links {
margin-bottom: 0;
}
.gsc-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; }
.gsc-footer-pair { white-space: nowrap; }
@media (min-width: 768px) {
.gsc-footer-pair + .gsc-footer-pair::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 32px; border-radius: 50%; background-color: currentColor; vertical-align: middle; }
}
.gsc-footer-links a {
color: var(--white);
font-weight: 600;
/* text-decoration: underline;
text-underline-offset: 0.15em;*/
}
.gsc-footer-links a:hover,
.gsc-footer-links a:focus {
color: var(--white);
text-decoration: none;
}
.gsc-footer-copy {
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}
#wpconsent-container::part(wpconsent-banner) {
padding-top: 16px;
padding-bottom: 16px;
}
.gsc-footer-copy .gsc-footer-prefs {
all: unset;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 0.15em;
}
.gsc-footer-copy .gsc-footer-prefs:hover {
text-decoration: none;
}
.gsc-footer-copy .gsc-footer-prefs:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
/* @end footer */
/* @group Cookie Banner (WPConsent) */
/* Banner renders in a Shadow DOM: font via ::part, focus ring via WPConsent's own variables */
#wpconsent-container {
--wpconsent-focus-outline-color: var(--white);
--wpconsent-focus-outline-width: 3px;
--wpconsent-focus-outline-offset: 2px;
}
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button),
#wpconsent-container::part(wpconsent-preferences-save-button) {
font-family: inherit;
font-size: 14px;
font-weight: 400;
}
/* Phones: Preferences full width, Reject and Accept side by side;
smaller message text and less space above it */
@media (max-width: 767px) {
#wpconsent-container {
--wpconsent-font-size: 14px;
}
#wpconsent-container::part(wpconsent-banner-body) {
margin-top: 0;
padding-top: 0;
}
#wpconsent-container::part(wpconsent-banner-footer) {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
#wpconsent-container::part(wpconsent-button-preferences) {
flex: 1 1 100%;
}
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-accept) {
flex: 1 1 0;
margin: 0;
}
}
/* @end */
/* @group Video */
/* Video: push-down spacing like other components; none inside bands (band padding spaces it) */
.gsc-video { margin-bottom: var(--gsc-space-l); }
.gsc-band .gsc-video { margin-bottom: 0; }
/* @end Video */
/* @group Stat row */
/* ---------- Stat row (.gsc-stats) ----------
GB Container (tag ul, class gsc-stats) > Containers (tag li)
> core Paragraphs .gsc-stat-number and .gsc-stat-caption.
3 columns on desktop and tablet, 1 on mobile.
Five stats in one row (Share the Road): add gsc-stats-5. */
.entry-content .gsc-stats,
.is-root-container .gsc-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gsc-space-l) var(--gsc-space-m);
margin: 0 0 var(--gsc-space-l);
padding: 0;
list-style: none;
}
.entry-content .gsc-stats > li,
.is-root-container .gsc-stats > li {
min-width: 0;
margin: 0;
}
.entry-content .gsc-stat-number,
.is-root-container .gsc-stat-number {
margin: 0 0 var(--gsc-space-xs);
font-size: 42px; /* was 36px */
font-weight: 700;
line-height: 1;
color: #2e8277; /* darker teal for contrast, 4.59:1 (Oct 27) */
}
.entry-content .gsc-stat-caption,
.is-root-container .gsc-stat-caption {
margin: 0;
/* font-size: 14px;
font-weight: 600;
line-height: 1.5;*/
font-size: 15px;
font-weight: 600;
line-height: 1.5;
}
html[lang^="es"] .entry-content .gsc-stat-caption,
html[lang^="es"] .is-root-container .gsc-stat-caption { font-size: 14px; }
@media (min-width: 1025px) {
.entry-content .gsc-stats-5,
.is-root-container .gsc-stats-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: var(--gsc-space-s); /* 16px: keeps 5-up cells near live's width */
}
}
@media (max-width: 767px) {
.entry-content .gsc-stats,
.is-root-container .gsc-stats {
grid-template-columns: 1fr;
}
}
/* Steel theme: pages built around the blue agency banners (Go Safely Movement, Oct 19) */
.entry-content .gsc-theme-steel .gsc-stat-number,
.is-root-container .gsc-theme-steel .gsc-stat-number {
color: var(--steel);
}
.entry-content .gsc-theme-steel a.wp-block-button__link:not(.has-background),
.is-root-container .gsc-theme-steel a.wp-block-button__link:not(.has-background) {
background-color: #3f6b8f;
color: var(--white);
}
.entry-content .gsc-theme-steel a.wp-block-button__link:not(.has-background):hover,
.entry-content .gsc-theme-steel a.wp-block-button__link:not(.has-background):focus-visible {
background-color: var(--maroon);
color: var(--white);
}
/* Social icons outside the steel theme (Champion page): black, Maroon on hover */
.entry-content a[aria-label] .gb-shape {
color: var(--ink);
}
.entry-content a[aria-label]:hover .gb-shape,
.entry-content a[aria-label]:focus-visible .gb-shape {
color: var(--maroon);
}
/* @end Stat row */
/* @group Stages */
/* Image row with real-text captions (gsc-stages). First use: Child Passenger Safety, Oct 19 */
.entry-content ul.gsc-stages,
.is-root-container ul.gsc-stages {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gsc-space-m) var(--gsc-space-s);
list-style: none;
margin: 0 0 var(--gsc-space-m);
padding: 0;
}
.entry-content .gsc-stages > li,
.is-root-container .gsc-stages > li { margin: 0; }
.entry-content .gsc-stages figure,
.is-root-container .gsc-stages figure { margin: 0 0 var(--gsc-space-xs); }
.entry-content .gsc-stages img,
.is-root-container .gsc-stages img {
display: block; width: 100%; height: auto; border-radius: 4px;
}
.entry-content .gsc-stages p,
.is-root-container .gsc-stages p {
margin: 0; font-size: 16px; font-weight: 700; line-height: 1.375; text-align: center;
text-wrap: balance;
}
@media (max-width: 767px) {
.entry-content ul.gsc-stages,
.is-root-container ul.gsc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* @end Stages */
/* @group Download grid */
/* ---------- Download grid (.gsc-downloads) ----------
Provisional until Heidi tests it.
GB Element (tag ul, class gsc-downloads, role list) > GB Element (tag li)
> GB Element (tag a, class gsc-download, href = the file)
> core Image (alt empty, Resolution: Download tile) + core Paragraph .gsc-download-title.
One link per tile. The file type label comes from the link's extension.
4 across on desktop and tablet, 2 on mobile.
Variants: gsc-downloads-3 (3 / 3 / 1), gsc-downloads-5 (5 / 3 / 2). */
.entry-content .gsc-downloads,
.is-root-container .gsc-downloads {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--gsc-space-l) var(--gsc-space-m);
margin: 0 0 var(--gsc-space-l);
padding: 0;
list-style: none;
}
.entry-content .gsc-downloads > li,
.is-root-container .gsc-downloads > li {
min-width: 0;
margin: 0;
}
.entry-content .gsc-download,
.is-root-container .gsc-download {
display: flex;
flex-direction: column;
gap: var(--gsc-space-xs);
height: 100%;
border-radius: 4px;
text-decoration: none;
}
.entry-content .gsc-download .wp-block-image,
.is-root-container .gsc-download .wp-block-image {
margin: 0;
}
/*.entry-content .gsc-download img,
.is-root-container .gsc-download img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
}*/
.entry-content .gsc-download img,
.is-root-container .gsc-download img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
/* Square thumbs everywhere except the shape variant (media kits keep each image's own proportions) */
.entry-content .gsc-downloads:not(.gsc-downloads-shape) .gsc-download img,
.is-root-container .gsc-downloads:not(.gsc-downloads-shape) .gsc-download img {
aspect-ratio: 1;
object-fit: cover;
}
.entry-content .gsc-downloads-shape,
.is-root-container .gsc-downloads-shape {
align-items: start;
}
.entry-content .gsc-download-title,
.is-root-container .gsc-download-title {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
text-align: center;
}
.entry-content .gsc-download:hover .gsc-download-title,
.is-root-container .gsc-download:hover .gsc-download-title {
text-decoration: underline;
}
.entry-content .gsc-download:focus-visible .gsc-download-title,
.is-root-container .gsc-download:focus-visible .gsc-download-title {
text-decoration: underline;
}
/* File type label. The text after "/" is what screen readers hear ("..., PDF"). */
.entry-content .gsc-download .gsc-download-title::after,
.is-root-container .gsc-download .gsc-download-title::after {
display: inline-block; /* inline-block, not block, so the hover underline skips it */
width: 100%;
margin-top: var(--gsc-space-2xs);
font-size: 14px;
font-weight: 600;
color: var(--slate);
text-decoration: none;
}
.gsc-download[href$=".pdf" i] .gsc-download-title::after { content: "PDF"; content: "PDF" / ", PDF"; }
.gsc-download[href$=".zip" i] .gsc-download-title::after { content: "ZIP"; content: "ZIP" / ", ZIP"; }
.gsc-download[href$=".mp4" i] .gsc-download-title::after { content: "MP4 video"; content: "MP4 video" / ", MP4 video"; }
.gsc-download[href$=".doc" i] .gsc-download-title::after,
.gsc-download[href$=".docx" i] .gsc-download-title::after { content: "Word"; content: "Word" / ", Word"; }
.gsc-download[href$=".png" i] .gsc-download-title::after { content: "PNG"; content: "PNG" / ", PNG"; }
.gsc-download[href$=".jpg" i] .gsc-download-title::after,
.gsc-download[href$=".jpeg" i] .gsc-download-title::after { content: "JPG"; content: "JPG" / ", JPG"; }
.gsc-download[href*=".pdf?" i] .gsc-download-title::after { content: "PDF" / ", PDF"; }
.gsc-download[href^="mailto:" i] .gsc-download-title::after { content: "Email" / ", Email"; }
@media (min-width: 1025px) {
.entry-content .gsc-downloads-3,
.is-root-container .gsc-downloads-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.entry-content .gsc-downloads-5,
.is-root-container .gsc-downloads-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: var(--gsc-space-s);
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.entry-content .gsc-downloads-3,
.entry-content .gsc-downloads-5,
.is-root-container .gsc-downloads-3,
.is-root-container .gsc-downloads-5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.entry-content .gsc-downloads,
.is-root-container .gsc-downloads {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/*.entry-content .gsc-downloads-3,
.is-root-container .gsc-downloads-3 {
grid-template-columns: 1fr;
}*/
}
/* Download grid, shape variant (media kits): thumbs keep their own proportions instead of the square crop.
Add gsc-downloads-shape next to gsc-downloads; image Resolution Medium Large (or Full if smaller). */
.entry-content .gsc-downloads-shape, .is-root-container .gsc-downloads-shape { align-items: start; }
.entry-content .gsc-downloads-shape .gsc-download img, .is-root-container .gsc-downloads-shape .gsc-download img { aspect-ratio: revert-layer; object-fit: fill; }
/* @end Download grid */
/* @group Media Cards */
/* Media cards (gsc-media): thumbnail left, text right; stacks on phones. First use: Go Safely Movement, Oct 19 */
.entry-content ul.gsc-media,
.is-root-container ul.gsc-media {
list-style: none;
margin: 0 0 var(--gsc-space-m);
padding: 0;
}
.entry-content .gsc-media > li,
.is-root-container .gsc-media > li {
display: flex;
align-items: center;
gap: var(--gsc-space-m);
margin: 0;
}
.entry-content .gsc-media > li + li,
.is-root-container .gsc-media > li + li {
margin-top: var(--gsc-space-m);
}
.entry-content .gsc-media figure,
.is-root-container .gsc-media figure {
flex: 0 0 200px;
margin: 0;
}
.entry-content .gsc-media-lg figure,
.is-root-container .gsc-media-lg figure {
flex-basis: 284px;
}
.entry-content .gsc-media img,
.is-root-container .gsc-media img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
.entry-content .gsc-media h3,
.is-root-container .gsc-media h3 { margin: 0 0 var(--gsc-space-xs); }
.entry-content .gsc-media p,
.is-root-container .gsc-media p { margin: 0; }
@media (max-width: 767px) {
.entry-content .gsc-media > li,
.is-root-container .gsc-media > li {
flex-direction: column;
align-items: flex-start;
}
.entry-content .gsc-media figure,
.is-root-container .gsc-media figure {
flex: none;
width: 100%;
max-width: 360px;
}
}
/* @end media cars */
/* @group Accordion */
/* ---------- Accordion (.gsc-accordion) ----------
Provisional: Heidi compares both versions before one is picked.
Add class gsc-accordion to either:
- core Accordion (h3 > button), or
- GB Pro Accordion (toggle set to tag "button").
Title 21px/800 Forest (live), +/- icon on the left, divider between sections. */
.entry-content .gsc-accordion,
.is-root-container .gsc-accordion {
--gsc-acc-icon: 1em;
margin: 0 0 var(--gsc-space-l);
border-top: 1px solid var(--fog);
}
.entry-content .gsc-accordion .wp-block-accordion-item,
.entry-content .gsc-accordion .gb-accordion__item,
.is-root-container .gsc-accordion .wp-block-accordion-item,
.is-root-container .gsc-accordion .gb-accordion__item {
margin: 0;
padding: 0; /* GB Pro's starter template adds 1em padding and a black border */
border: 0;
border-bottom: 1px solid var(--fog);
}
.entry-content .gsc-accordion .wp-block-accordion-heading,
.is-root-container .gsc-accordion .wp-block-accordion-heading {
margin: 0;
font-size: inherit;
}
/* Title row (core button / GB Pro toggle) */
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle,
.entry-content .gsc-accordion .gb-accordion__toggle,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle,
.is-root-container .gsc-accordion .gb-accordion__toggle {
display: flex;
align-items: center;
justify-content: flex-start; /* GB Pro's template uses space-between */
gap: var(--gsc-space-xs);
width: 100%;
margin: 0;
padding: 12px 0;
border: 0;
border-radius: 0;
background: none;
color: var(--forest);
font: inherit;
font-size: 21px;
font-weight: 800;
line-height: 1.3;
text-align: left;
cursor: pointer;
}
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle:hover,
.entry-content .gsc-accordion .gb-accordion__toggle:hover,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle:hover,
.is-root-container .gsc-accordion .gb-accordion__toggle:hover {
background: none;
color: var(--forest);
}
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle:focus-visible,
.entry-content .gsc-accordion .gb-accordion__toggle:focus-visible,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle:focus-visible,
.is-root-container .gsc-accordion .gb-accordion__toggle:focus-visible {
background: none;
color: var(--forest);
}
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle:hover .gb-text,
.entry-content .gsc-accordion .gb-accordion__toggle:hover .wp-block-accordion-heading__toggle-title,
.entry-content .gsc-accordion .gb-accordion__toggle:hover .gb-text,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle:hover .gb-text,
.is-root-container .gsc-accordion .gb-accordion__toggle:hover .wp-block-accordion-heading__toggle-title,
.is-root-container .gsc-accordion .gb-accordion__toggle:hover .gb-text {
text-decoration: underline;
}
/* +/- icon on the left; the blocks' own icons are hidden */
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle-icon,
.entry-content .gsc-accordion .gb-accordion__toggle-icon,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle-icon,
.is-root-container .gsc-accordion .gb-accordion__toggle-icon {
display: none;
}
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle::before,
.entry-content .gsc-accordion .gb-accordion__toggle::before,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle::before,
.is-root-container .gsc-accordion .gb-accordion__toggle::before {
content: "+";
content: "+" / "";
flex: 0 0 var(--gsc-acc-icon);
text-align: center;
font-weight: 700;
}
.entry-content .gsc-accordion .wp-block-accordion-heading__toggle[aria-expanded="true"]::before,
.entry-content .gsc-accordion .gb-accordion__toggle[aria-expanded="true"]::before,
.is-root-container .gsc-accordion .wp-block-accordion-heading__toggle[aria-expanded="true"]::before,
.is-root-container .gsc-accordion .gb-accordion__toggle[aria-expanded="true"]::before {
content: "\2212";
content: "\2212" / "";
}
/* Panel */
/* Spacing on the first and last child, not the panel: a closed panel must stay 0px tall */
.entry-content .gsc-accordion .wp-block-accordion-panel > :first-child,
.entry-content .gsc-accordion .gb-accordion__content > :first-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel > :first-child,
.is-root-container .gsc-accordion .gb-accordion__content > :first-child {
margin-top: var(--gsc-space-xs);
}
.entry-content .gsc-accordion .wp-block-accordion-panel > :last-child,
.entry-content .gsc-accordion .gb-accordion__content > :last-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel > :last-child,
.is-root-container .gsc-accordion .gb-accordion__content > :last-child {
margin-bottom: var(--gsc-space-m);
}
.entry-content .gsc-accordion .wp-block-accordion-panel p:last-child,
.entry-content .gsc-accordion .wp-block-accordion-panel ul:last-child,
.entry-content .gsc-accordion .wp-block-accordion-panel ol:last-child,
.entry-content .gsc-accordion .wp-block-accordion-panel .gsc-downloads:last-child,
.entry-content .gsc-accordion .gb-accordion__content p:last-child,
.entry-content .gsc-accordion .gb-accordion__content ul:last-child,
.entry-content .gsc-accordion .gb-accordion__content ol:last-child,
.entry-content .gsc-accordion .gb-accordion__content .gsc-downloads:last-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel p:last-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel ul:last-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel ol:last-child,
.is-root-container .gsc-accordion .wp-block-accordion-panel .gsc-downloads:last-child,
.is-root-container .gsc-accordion .gb-accordion__content p:last-child,
.is-root-container .gsc-accordion .gb-accordion__content ul:last-child,
.is-root-container .gsc-accordion .gb-accordion__content ol:last-child,
.is-root-container .gsc-accordion .gb-accordion__content .gsc-downloads:last-child {
margin-bottom: var(--gsc-space-m);
}
.entry-content .gsc-accordion .gb-accordion__content > * > :last-child,
.is-root-container .gsc-accordion .gb-accordion__content > * > :last-child {
margin-bottom: 0;
}
/* @end Accordion */
/* @group Feature box */
/* ---------- Feature box (.gsc-feature) ----------
One-off for About OTS EN/ES. No pattern.
GB Element (class gsc-feature + a color class) > GB Element (text: core H2 + Paragraph) + core Image.
Color classes: gsc-feature-teal (black text, for contrast), gsc-feature-forest, gsc-feature-maroon.
Desktop: text left, 280px image right. Mobile: image on top, text below. */
.entry-content .gsc-feature,
.is-root-container .gsc-feature {
display: flex;
align-items: stretch;
gap: 0;
margin: 0 0 var(--gsc-space-l);
padding: 0;
background: var(--forest);
color: var(--white);
}
.entry-content .gsc-feature > :first-child,
.is-root-container .gsc-feature > :first-child {
align-self: center;
padding: var(--gsc-space-m);
flex: 1 1 auto;
min-width: 0;
}
.entry-content .gsc-feature > .wp-block-image,
.is-root-container .gsc-feature > .wp-block-image {
flex: 0 0 280px;
margin: 0;
}
.entry-content .gsc-feature img,
.is-root-container .gsc-feature img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-content .gsc-feature h2,
.entry-content .gsc-feature h3,
.entry-content .gsc-feature p,
.is-root-container .gsc-feature h2,
.is-root-container .gsc-feature h3,
.is-root-container .gsc-feature p {
margin: 0;
color: inherit;
}
.entry-content .gsc-feature h2 + p,
.entry-content .gsc-feature h3 + p,
.is-root-container .gsc-feature h2 + p,
.is-root-container .gsc-feature h3 + p {
margin-top: var(--gsc-space-xs);
}
.entry-content .gsc-feature a,
.is-root-container .gsc-feature a {
color: inherit;
text-decoration: underline;
}
.entry-content .gsc-feature-teal,
.is-root-container .gsc-feature-teal {
background: var(--teal);
color: var(--ink); /* white on teal is 2.27:1; black is 9.25:1 */
}
.entry-content .gsc-feature-forest,
.is-root-container .gsc-feature-forest {
background: var(--forest);
}
.entry-content .gsc-feature-maroon,
.is-root-container .gsc-feature-maroon {
background: var(--maroon);
}
/* Focus ring: white on the dark boxes, black on teal */
.gsc-feature {
--gsc-focus-color: var(--white);
}
.gsc-feature-teal {
--gsc-focus-color: var(--ink);
}
@media (max-width: 767px) {
.entry-content .gsc-feature,
.is-root-container .gsc-feature {
flex-direction: column;
align-items: stretch;
}
.entry-content .gsc-feature > .wp-block-image,
.is-root-container .gsc-feature > .wp-block-image {
flex: none;
order: -1; /* image on top visually; text stays first for screen readers */
}
.entry-content .gsc-feature > :first-child,
.is-root-container .gsc-feature > :first-child {
align-self: stretch;
}
}
/* @end Feature box */
/* @group Tables */
/* ---------- Tables (core Table block, all tables) ----------
Only the e-bike pages (EN/ES) use a table, so every core Table gets this; no class.
Header row: Table block > Header section. Row headers (first column) come from
pasted HTML with ; the block keeps them. */
.entry-content .wp-block-table,
.is-root-container .wp-block-table {
margin: 0 0 var(--gsc-space-s); /* a note or footnote usually follows */
overflow-x: auto;
}
.entry-content .wp-block-table table,
.is-root-container .wp-block-table table {
width: 100%;
table-layout: auto; /* columns size to content, even with "Fixed width table cells" on */
margin: 0; /* GP adds 24px under tables */
border-collapse: collapse;
font-size: 16px;
line-height: 1.5;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.is-root-container .wp-block-table th,
.is-root-container .wp-block-table td {
padding: 12px;
border: 1px solid var(--fog);
text-align: left;
vertical-align: top;
}
.entry-content .wp-block-table thead,
.is-root-container .wp-block-table thead {
border-bottom: 0;
}
.entry-content .wp-block-table thead th,
.is-root-container .wp-block-table thead th {
background: var(--smoke);
font-weight: 700;
}
.entry-content .wp-block-table tbody th,
.is-root-container .wp-block-table tbody th {
font-weight: 700;
}
.entry-content .wp-block-table figcaption,
.is-root-container .wp-block-table figcaption {
margin-top: var(--gsc-space-xs);
font-size: 14px;
color: var(--slate);
}
@media (max-width: 767px) {
.entry-content .wp-block-table th,
.entry-content .wp-block-table td,
.is-root-container .wp-block-table th,
.is-root-container .wp-block-table td {
padding: 8px;
}
}
/* Scrolling table box (phones): focusable so keyboard users can scroll it */
.entry-content .wp-block-table:focus-visible,
.is-root-container .wp-block-table:focus-visible {
outline: var(--gsc-focus-width) solid var(--gsc-focus-color);
outline-offset: var(--gsc-focus-offset);
}
@media (max-width: 480px) {
.wp-block-table th,
.wp-block-table td {
padding-left: 8px;
padding-right: 8px;
font-size: 15px;
}
}
/* @end Tables */
/* @group Quiz (QSM) */
/* ---------- Quiz (QSM, quizzes 1 and 2) ----------
Front end only. Intro weight, tighter question spacing,
site button style. QSM marks its button colors !important. */
.entry-content .qsm-quiz-container.qmn_quiz_container .quiz_begin p {
font-weight: 700;
color: var(--ink);
}
.entry-content .qsm-quiz-container.qmn_quiz_container .qsm-question-wrapper {
padding-top: 0;
padding-bottom: 22px;
}
.entry-content .qsm-quiz-container.qmn_quiz_container .mlw_qmn_question:empty,
.entry-content .qsm-quiz-container.qmn_quiz_container .qsm-question-wrapper legend:empty {
margin: 0;
}
.entry-content .qsm-quiz-container.qmn_quiz_container .qmn_btn {
background-color: var(--teal) !important;
color: var(--ink) !important;
border: 0;
border-radius: var(--gsc-radius);
font-size: 18px;
font-weight: 400;
line-height: 1.6;
padding: .54em 1.08em;
width: auto;
height: auto;
}
.entry-content .qsm-quiz-container.qmn_quiz_container .qmn_btn:hover,
.entry-content .qsm-quiz-container.qmn_quiz_container .qmn_btn:focus-visible {
background-color: var(--maroon) !important;
color: var(--white) !important;
}
/* Twitter share: QSM's old bird icon, hidden until a new image arrives (Oct 20) */
.entry-content .qsm-quiz-container.qmn_quiz_container a.mlw_qmn_quiz_link[onclick*="twitter"] {
display: none;
}
/* @end Quiz (QSM) */
/* @group Forms (Forminator) */
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-label,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-label,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-label,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-label { font-size: 16px; font-weight: 600; line-height: 1.5; }
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-radio,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-radio,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-radio,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-radio,
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-radio-label,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-radio-label,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-radio-label,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-radio-label { font-size: 16px; line-height: 1.6; }
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-error-message,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-error-message,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-error-message,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-error-message { font-size: 14px; }
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-button-submit,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-button-submit,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-button-submit,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-button-submit { font-size: 18px; font-weight: 400; line-height: 1.6; padding: .54em 1.08em; border-radius: 3px; color: var(--ink); background-color: var(--teal); }
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-button-submit:hover,
.forminator-ui.forminator-custom-form#forminator-module-7989.forminator-design--default .forminator-button-submit:focus-visible,
.forminator-ui.forminator-custom-form#forminator-module-7992.forminator-design--default .forminator-button-submit:focus-visible,
.forminator-ui.forminator-custom-form#forminator-module-7978.forminator-design--default .forminator-button-submit:focus-visible,
.forminator-ui.forminator-custom-form#forminator-module-7979.forminator-design--default .forminator-button-submit:focus-visible { color: var(--white); background-color: var(--maroon); }
/* Save as Draft link: site link blue once active (Forminator's #17a8e3 is 2.71:1) */
.forminator-ui.forminator-custom-form#forminator-module-7978 .forminator-save-draft-link:not(.disabled),
.forminator-ui.forminator-custom-form#forminator-module-7979 .forminator-save-draft-link:not(.disabled) {
color: var(--link-blue);
}
/* @end */
/* @group Stories viewer (Empty Chair Club) */
/* Bar above the story: Previous, counter, Next on the left; Show all on the right. */
.gsc-stories__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--gsc-space-s);
margin-bottom: var(--gsc-space-m);
}
.gsc-stories__arrows {
display: flex;
align-items: center;
gap: var(--gsc-space-s);
}
.gsc-stories__count {
min-width: 5.5em;
text-align: center;
font-size: 16px;
font-weight: 600;
}
/* Splide's own theme positions arrows absolutely; reset in case. */
.gsc-stories .splide__arrow {
position: static;
transform: none;
}
.gsc-stories .gsc-stories__all {
border: 2px solid var(--forest);
background: var(--white);
color: var(--forest);
}
.gsc-stories .gsc-stories__all:hover {
background: var(--forest);
color: var(--white);
}
/* The track takes the current story's height (set by the script). */
.gsc-stories .splide__track {
transition: height 0.4s ease;
}
.gsc-stories .splide__list {
align-items: flex-start;
}
@media (prefers-reduced-motion: reduce) {
.gsc-stories .splide__track {
transition: none;
}
}
/* Stories (V2 output: photo in an H2, name as h2.et_pb_slide_title,
date line, centered paragraphs). */
.gsc-stories .wp-block-post-template {
margin: 0;
padding: 0;
list-style: none;
}
.gsc-stories .wp-block-post {
margin: 0;
text-align: center;
}
.gsc-stories .wp-block-post img {
display: block;
margin: 0 auto;
border-radius: var(--gsc-radius-card);
}
.gsc-stories .et_pb_slide_title {
text-align: center;
}
/* Show all, or no JavaScript: stories stacked with a divider
(push-down: space and line below each story but the last). */
.gsc-stories .wp-block-post-template:not(.splide__list) > li:not(:last-child),
.gsc-stories .is-all .wp-block-post-template > li:not(:last-child) {
margin-bottom: var(--gsc-space-l);
padding-bottom: var(--gsc-space-l);
border-bottom: 1px solid var(--fog);
}
/* Mobile: arrows and counter on one row, Show all full width below. */
@media (max-width: 767px) {
.gsc-stories .gsc-stories__arrows {
flex: 1 1 100%;
justify-content: space-between;
}
.gsc-stories .gsc-stories__btn {
white-space: nowrap;
font-size: 16px;
padding: 0.5em 0.75em;
}
.gsc-stories__count {
min-width: 0;
}
.gsc-stories .gsc-stories__all {
flex: 1 1 100%;
}
}
/* @end Stories viewer */
/* @group Spanish scale */
/* Spanish: headings and stat numbers about 10% smaller */
html[lang^="es"] .entry-content h1,
html[lang^="es"] .is-root-container h1 { font-size: 36px; }
html[lang^="es"] .entry-content h2:not(.gsc-title),
html[lang^="es"] .is-root-container h2:not(.gsc-title) { font-size: 19px; }
html[lang^="es"] .entry-content h3:not(.gsc-title),
html[lang^="es"] .is-root-container h3:not(.gsc-title) { font-size: 16px; }
html[lang^="es"] .entry-content .gsc-stat-number,
html[lang^="es"] .is-root-container .gsc-stat-number { font-size: 36px; }
html[lang^="es"] .entry-content .gsc-title,
html[lang^="es"] .is-root-container .gsc-title { font-size: 36px; }
@media (max-width: 1024px) {
html[lang^="es"] .entry-content h1,
html[lang^="es"] .is-root-container h1 { font-size: 29px; }
html[lang^="es"] .entry-content .gsc-title,
html[lang^="es"] .is-root-container .gsc-title { font-size: 29px; }
}
@media (max-width: 768px) {
html[lang^="es"] .entry-content h1,
html[lang^="es"] .is-root-container h1 { font-size: 25px; }
html[lang^="es"] .entry-content h2:not(.gsc-title),
html[lang^="es"] .is-root-container h2:not(.gsc-title) { font-size: 18px; }
html[lang^="es"] .entry-content .gsc-title,
html[lang^="es"] .is-root-container .gsc-title { font-size: 25px; }
}
/* @end Spanish scale */
/* @group Home */
/* Home (8364 EN, 8375 ES), Oct 12. */
/* Tagline bar under the banner. Class gsc-tagline on a core Paragraph.
Live is white 18px on Teal (2.27:1); here Ink 20px/600 (9.25:1). */
.entry-content .gsc-tagline,
.is-root-container .gsc-tagline {
margin: 0;
padding: 12px var(--gsc-space-s);
background: var(--teal);
color: var(--ink);
font-size: 20px;
font-weight: 600;
line-height: 1.4;
text-align: center;
}
/* Image tile grid (.gsc-tiles)
GB Element (tag ul, class gsc-tiles, role list) > GB Element (tag li) >
core Image linked to a page (Resolution: Download tile where it exists).
The words are in the image, so the alt names the link.
Flex: 1 across up to 500px (max 360, centered), 2 across 501 to 767,
4 across from 768. A short last row is centered.
gsc-tile-contain on the li shows the whole image (non-square source). */
.entry-content .gsc-tiles,
.is-root-container .gsc-tiles {
--gsc-tiles-gap: var(--gsc-space-m);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gsc-tiles-gap);
margin: 0;
padding: 0;
list-style: none;
}
.entry-content .gsc-tiles > li,
.is-root-container .gsc-tiles > li {
flex: 0 0 100%;
max-width: 360px;
min-width: 0;
margin: 0;
}
@media (max-width: 500px) {
.entry-content .gsc-tiles > li,
.is-root-container .gsc-tiles > li {
flex-basis: calc((100% - var(--gsc-tiles-gap)) / 2);
max-width: none;
}
}
@media (min-width: 501px) {
.entry-content .gsc-tiles > li,
.is-root-container .gsc-tiles > li {
flex-basis: calc((100% - var(--gsc-tiles-gap)) / 2);
max-width: none;
}
}
@media (min-width: 768px) {
.entry-content .gsc-tiles > li,
.is-root-container .gsc-tiles > li {
flex-basis: calc((100% - 3 * var(--gsc-tiles-gap)) / 4);
}
}
.entry-content .gsc-tiles .wp-block-image,
.is-root-container .gsc-tiles .wp-block-image {
margin: 0;
}
.entry-content .gsc-tiles a,
.is-root-container .gsc-tiles a {
display: block;
border-radius: 4px;
}
.entry-content .gsc-tiles img,
.is-root-container .gsc-tiles img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
/* Square tiles everywhere except inside a logo panel (logos keep their own shape) */
.entry-content :not(.gsc-tiles-panel) > .gsc-tiles img,
.is-root-container :not(.gsc-tiles-panel) > .gsc-tiles img {
aspect-ratio: 1;
object-fit: cover;
}
.entry-content .gsc-tiles .gsc-tile-contain img,
.is-root-container .gsc-tiles .gsc-tile-contain img {
object-fit: contain;
}
/* Small tiles (.gsc-tiles-sm): logo grids (Game Plan partners).
Add to the ul next to gsc-tiles. 2 across up to 500px,
3 across 501 to 767, 5 across from 768 (about 132px in the 754 column). */
.entry-content .gsc-tiles.gsc-tiles-sm > li,
.is-root-container .gsc-tiles.gsc-tiles-sm > li {
flex-basis: calc((100% - var(--gsc-tiles-gap)) / 2);
max-width: none;
}
@media (min-width: 501px) {
.entry-content .gsc-tiles.gsc-tiles-sm > li,
.is-root-container .gsc-tiles.gsc-tiles-sm > li {
flex-basis: calc((100% - 2 * var(--gsc-tiles-gap)) / 3);
}
}
@media (min-width: 768px) {
.entry-content .gsc-tiles.gsc-tiles-sm > li,
.is-root-container .gsc-tiles.gsc-tiles-sm > li {
flex-basis: calc((100% - 4 * var(--gsc-tiles-gap)) / 5);
}
}
/* 3-across tiles (.gsc-tiles-3): wide logos (Game Plan transportation partners).
Default 1 / 2 across below 768, 3 across from 768 (about 235px in the 754 column). */
@media (min-width: 768px) {
.entry-content .gsc-tiles.gsc-tiles-3 > li,
.is-root-container .gsc-tiles.gsc-tiles-3 > li {
flex-basis: calc((100% - 2 * var(--gsc-tiles-gap)) / 3);
}
}
/* Logo panel (GSM media kit): Fog panel behind logo grids so white logos show, as on live.
GB Element (div, class gsc-tiles-panel) > one ul.gsc-tiles.gsc-tiles-sm per logo group. */
.entry-content .gsc-tiles-panel, .is-root-container .gsc-tiles-panel { background: var(--fog); padding: var(--gsc-space-l) var(--gsc-space-m); border-radius: 4px; }
.entry-content .gsc-tiles-panel .gsc-tiles + .gsc-tiles, .is-root-container .gsc-tiles-panel .gsc-tiles + .gsc-tiles { margin-top: var(--gsc-space-l); }
/* Directors row (.gsc-people)
GB Element (tag ul, class gsc-people, role list) > GB Element (tag li) >
core Image (round) + Paragraphs gsc-person-name, gsc-person-role and a link.
Live's captions were 10px; raised to 14px. */
.entry-content .gsc-people,
.is-root-container .gsc-people {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gsc-space-m) var(--gsc-space-l);
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.entry-content .gsc-people > li,
.is-root-container .gsc-people > li {
flex: 0 1 220px;
margin: 0;
}
html[lang^="es"] .entry-content .gsc-people > li,
html[lang^="es"] .is-root-container .gsc-people > li { flex-basis: 280px; }
.entry-content .gsc-people .wp-block-image,
.is-root-container .gsc-people .wp-block-image {
margin: 0 0 var(--gsc-space-xs);
}
.entry-content .gsc-people img,
.is-root-container .gsc-people img {
display: block;
width: 125px;
height: 125px;
margin: 0 auto;
object-fit: cover;
border-radius: 50%;
}
.entry-content .gsc-people p,
.is-root-container .gsc-people p {
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.entry-content .gsc-people .gsc-person-name,
.is-root-container .gsc-people .gsc-person-name {
margin-top: var(--gsc-space-xs);
font-size: 16px;
font-weight: 800;
}
.entry-content .gsc-people .gsc-person-link,
.is-root-container .gsc-people .gsc-person-link {
margin-top: var(--gsc-space-2xs);
font-weight: 600;
}
/* @end Home */
/* @group Empty Chair Club */
/* =========================================================
CARRIED OVER FROM LIVE ADDITIONAL CSS, renamed Oct 22
(.swipe-btn > .gsc-share-btn, .bordered-stat > .gsc-callout).
Used only on Empty Chair Club EN/ES. Values kept as on live
(provisional; see AA flags in the style reference).
========================================================= */
/* Share Your Story button (.gsc-share-btn) */
.gsc-share-btn-wrap .gsc-share-btn {
display: inline-block;
text-decoration: none;
padding: 1em 2em;
border: none;
border-radius: 5px;
font-weight: bold;
letter-spacing: 5px;
text-transform: uppercase;
cursor: pointer;
color: #ffffff;
transition: all 1000ms;
font-size: 15px;
position: relative;
overflow: hidden;
outline: 2px solid #2c9caf;
background-color: #2c9caf;
z-index: 0;
}
.gsc-share-btn-wrap .gsc-share-btn:hover,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible {
color: #ffffff;
/*transform: scale(1.1);*/
outline: 2px solid #70bdca;
box-shadow: 4px 5px 17px -4px #268391;
}
.gsc-share-btn-wrap .gsc-share-btn:focus-visible {
outline: var(--gsc-focus-width) solid var(--gsc-focus-color);
outline-offset: var(--gsc-focus-offset);
}
.gsc-share-btn-wrap .gsc-share-btn::before {
content: "";
position: absolute;
left: -50px;
top: 0;
width: 0;
height: 100%;
background-color: #70bdca;
transform: skewX(45deg);
z-index: -1;
transition: width 1000ms;
}
.gsc-share-btn-wrap .gsc-share-btn:hover::before,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible::before {
width: 250%;
}
.gsc-share-btn--xl { font-size: 22px; padding: 1.4em 2.8em; letter-spacing: 7px; }
@media (prefers-reduced-motion: reduce) {
.gsc-share-btn-wrap .gsc-share-btn,
.gsc-share-btn-wrap .gsc-share-btn::before { transition: none; }
.gsc-share-btn-wrap .gsc-share-btn:hover,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible { transform: none; }
}
/* Stat callout (.gsc-callout). Border was #6BBBAE on live, folded into --teal */
.gsc-callout {
border: 3px solid var(--teal, #62bbaf);
border-radius: var(--gsc-radius-card);
padding: 1rem 1.25rem;
margin: 0 0 var(--gsc-space-m);
background-color: var(--mist, #f8fcfb);
color: #222;
font-weight: 600;
text-align: center;
line-height: 1.4;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gsc-callout:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
/* Chair grid: chairs are list items; cancel the content-list gap */
.chair-grid .chairs > li { margin-top: 0; }
/* Image download tile (.gsc-download-button) */
.gsc-download-button-block { text-align: center; padding: 1.5rem 0; }
.gsc-download-button {
--gsc-btn-size: 170px;
display: inline-flex;
position: relative;
width: var(--gsc-btn-size);
height: var(--gsc-btn-size);
border-radius: 14px;
overflow: hidden;
text-decoration: none;
}
.gsc-download-button-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 1;
}
.gsc-download-button-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
transition: background 0.25s ease, opacity 0.25s ease;
z-index: 2;
}
.gsc-download-button:hover .gsc-download-button-bg::after,
.gsc-download-button:focus-visible .gsc-download-button-bg::after {
background: var(--teal, #62bbaf);
}
.gsc-download-button-label {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0.5rem 0.75rem;
text-align: center;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 18px;
font-weight: 700;
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
opacity: 1;
transition: opacity 0.25s ease;
}
.gsc-download-button:hover .gsc-download-button-label,
.gsc-download-button:focus-visible .gsc-download-button-label { opacity: 0; }
.gsc-download-button-icon {
position: absolute;
z-index: 3;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
color: var(--ink); /* was #ffffff; Ink on Teal 9.25:1 */
}
.gsc-download-button:hover .gsc-download-button-icon,
.gsc-download-button:focus-visible .gsc-download-button-icon { opacity: 1; }
.gsc-download-icon-svg { width: 42px; height: 42px; fill: currentColor; }
/* Share Your Story: Ink text for contrast (6.48 on #2c9caf, 9.82 on the hover sweep) */
.gsc-share-btn-wrap .gsc-share-btn,
.gsc-share-btn-wrap .gsc-share-btn:hover,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible { color: var(--ink); }
/* Share Your Story: diagonal sweep off for now (Joe, Oct 24). Delete this rule to bring it back */
.gsc-share-btn-wrap .gsc-share-btn::before { display: none; }
/* Share Your Story: no glow or hover outline (Joe, Oct 24). Keyboard focus keeps the site ring */
.gsc-share-btn-wrap .gsc-share-btn:hover,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible { box-shadow: none; }
.gsc-share-btn-wrap .gsc-share-btn:hover:not(:focus-visible) { outline-color: var(--maroon); }
/* Toolkit tile: file type under the label, like the download grid */
.gsc-download-button[href$=".pdf" i] .gsc-download-button-label { flex-wrap: wrap; align-content: center; }
.gsc-download-button[href$=".pdf" i] .gsc-download-button-label::after { content: "PDF" / ", PDF"; width: 100%; margin-top: var(--gsc-space-2xs); font-size: 14px; font-weight: 600; }
/* Share Your Story: standard button hover, no zoom (Oct 27) */
.gsc-share-btn-wrap .gsc-share-btn:hover,
.gsc-share-btn-wrap .gsc-share-btn:focus-visible {
background-color: var(--maroon);
color: var(--white);
}
/* @end Empty Chair Club */
|