/** * Dot-nav styling for the "21 Day EU Expedition" page's 12 embedded * FlexSlider galleries. See js/ten-years-later-galleries.js for the full * diagnosis and the JS half of this fix, which toggles the classes below * based on the active slide - this file only styles their visual result. */ /* * Slide image sizing (2026-08-22 fix - "white box around galleries, images * need to fill or the container needs to adjust per image"). The vendored * flexslider.css only sets `max-width: 100%` on slide images - never an * explicit `width`, so a photo whose NATIVE width is smaller than the * slider's own width (fixed by its widest/most common slide, matching the * gallery-height-sync fix in ten-years-later-galleries.js/script-gallery- * flexslider.php) rendered at its own smaller natural size, centered * (`.slides > li { text-align: center }`, vendor CSS) - the surrounding * background-color (this file's #edebe7 loading tone) showed through as a * visible box on the sides. `width: 100%; height: auto` forces every slide * image to fill the container's width and scale proportionally - the exact * per-image height that produces then feeds straight into the height-sync * fix, which resizes the CONTAINER to match, so mixed portrait/landscape * photos each get their own correctly-fitted box with zero cropping and * zero gap. `.kcb-gallery-slider`/`.kcb-portfolio-slider` are excluded - * blocks.css already gives those their own identical width:100% rule, this * covers the remaining "plain .slider_wrapper" markup this page's 12 * galleries and the legacy [tg_masonry_gallery] shortcode both use. */ .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider .slides > li img { width: 100%; height: auto; max-width: 100%; display: block; } /* Fallback for the truncation JS not running at all (JS disabled, a * jQuery/FlexSlider load failure, etc.) - without this, a gallery with many * dots still wraps into multiple rows, but at least with even spacing * between wrapped rows instead of the bare block the parent theme's * flexslider.css ships (margin-top on the whole nav, nothing between * wrapped rows - the original "padding is very off" symptom on its own, * independent of the truncation fix below). */ .flex-control-nav { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 8px; } .flex-control-nav li.pm-dot-hidden { display: none; } .flex-control-nav li.pm-dot-gap-before::before, .flex-control-nav li.pm-dot-gap-after::after { content: '\2026'; display: inline-block; width: 12px; color: #999999; font-size: 11px; line-height: 1; text-align: center; vertical-align: middle; pointer-events: none; } .flex-control-nav li.pm-dot-gap-before::before { margin-right: 4px; } .flex-control-nav li.pm-dot-gap-after::after { margin-left: 4px; } /* * Dot tap targets (2026-08-23 mobile audit): the vendored flexslider.css * dots are ~8x8px hit areas - far below the 24px WCAG 2.5.8 floor, and on * this page they're the only slide-jump UI. Padding + background-clip * keeps the small visual dot while the real hit box grows to 24px+. */ .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flex-control-paging li a { box-sizing: content-box; padding: 9px; background-clip: content-box; } /* * Touch arrow slabs (2026-08-23 mobile audit): the vendored touch reveal * parks 80x80 rgba(0,0,0,.4) blocks on both edges of every gallery - * ~43% of the image width covered at mid-height on a 375px phone. Restyle * to the site's own 44px blurred-circle control language * (css/slider-controls.css) - same ergonomics, far less photo occluded. */ @media (hover: none) { .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider .flex-direction-nav a { width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background: rgba(20, 20, 20, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 0; /* hide the vendored text glyph sizing quirks */ } .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider .flex-direction-nav a::before { font-size: 20px; line-height: 44px; } } /* * Keyboard reveal twin (2026-08-23 a11y audit): the vendored arrows rest * at -80px inside overflow:hidden and only slide in on :hover - a * keyboard user tabs onto an invisible control. Mirror the hover reveal * on :focus-visible. */ .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider .flex-prev:focus-visible { left: 10px; opacity: 1; } .slider_wrapper:not(.kcb-gallery-slider):not(.kcb-portfolio-slider) .flexslider .flex-next:focus-visible { right: 10px; opacity: 1; } /* * This page's own "Expedition Sponsors" band, white instead of the sitewide * warm-limestone surface logo-showcase.css gives every other .logo-showcase * (homepage's "Sponsored By"/"Featured By" - a deliberate Field Plan Phase 1 * choice to break up a flush white/white page, Kedyn's call, 2026-08-23). * This page is a single long scroll of stat band / map / anchor-nav / * expedition-sponsors / 12 city sections in tight succession - the warm band * reads as one more stripe in an already busy stack rather than a deliberate * accent, so it's scoped off just here via body_class()'s automatic * `.page-id-4487`, not by editing logo-showcase.css's own sitewide rule. */ .page-id-4487 .logo-showcase, .page-id-4487 .kcb-style-wrap:has(+ .kcb-style-wrap > .logo-showcase) { background: #fff; } /* * Intro title lines - center them, and undo the pull-quote treatment * screen.css applies to every bare
(2026-08-26, Kedyn: * "the header/title text block is left-aligned, while other page * headers/titles on the site are typically centered"). * * Two separate problems, one element. His intro's headline is authored as * an

wrapped in a
, so it inherits screen.css:641's * generic pull-quote styling - `opacity: 0.4` and `text-transform: * uppercase` - plus screen.css:664's `blockquote h3 { font-size: 20px }`, * which is SMALLER than an ordinary h3 (26px, screen.css:438). The page's * headline was therefore rendering faded to 40% and undersized, which is * most of why it read as misplaced rather than merely left-aligned. * The uppercase + letter-spacing is kept - it reads as deliberate and * matches the theme's own page titles. * * Centering matches the real site convention: `#page_caption * .page_title_wrapper { text-align: center }` (screen.css:3416) centers * the title on every page that uses the theme's page header. This page * suppresses that header (its

is .pm-visually-hidden) and substitutes * a canvas paragraph block, so the convention has to be re-applied here by * hand. * * Scoped by `:has(h3)` on purpose, NOT by position: this page has TWO * blockquotes, and the second one ("What followed was a blur of silence, * strangers, and stories") is a genuine pull-quote where the faded, * uppercase, left-aligned treatment is correct and must stay. Only the * intro blockquote contains a heading. The 12 location h2s and the running * prose are untouched - centered multi-paragraph body copy would be worse * typography than the left alignment being fixed here. * * Measured on the live page while building this: the location h2s * ("Amsterdam" et al) ALREADY compute to text-align:center, so this intro * block was the only left-aligned heading on the whole page. Centering it * therefore makes the page internally consistent as well as matching the * sitewide page-header convention - checking the inline style attributes * alone suggests the opposite, because their centering comes from a * stylesheet rule rather than from an inline style Kedyn typed. * * opacity has to be reset on the
itself, not the

: a * parent's opacity creates a new stacking context and cannot be undone by * a child. */ .page-id-4487 .sidebar_content .kcb-paragraph > blockquote:has(h3), .page-id-4487 .sidebar_content .kcb-paragraph > blockquote:has(h3) + h2 { text-align: center; } .page-id-4487 .sidebar_content .kcb-paragraph > blockquote:has(h3) { opacity: 1; } .page-id-4487 .sidebar_content .kcb-paragraph > blockquote:has(h3) h3 { /* clamp rather than a flat 30px: uppercase at 2px tracking is wide, and this headline is 36 characters - at a flat 30px it would wrap to four lines on a 375px phone. Floors at 22px (still above the 20px it was rendering at before), tops out at the h2 scale. */ font-size: clamp(22px, 5vw, 30px); line-height: 1.25; } /* --------------------------------------------------------------------------- * Type alignment with the Alaska feature (2026-08-29, Kedyn: "ensure fonts * are all aligned across both posts"). * * The two expedition posts already share the same three families - Fraunces * for display, Work Sans for body, Oswald for UI chrome - and the same body * and H2 scale. They are authored in different systems though (the Alaska * page is content-builder blocks, this one is classic-editor markup), so * this page picks up the theme's generic element rules where the other picks * up the blocks' own. Two of those generic rules pull it out of line: * * 1. The opening title is marked up

, and that * renders Fraunces at 700. Every other piece of display type on * both posts is Fraunces 300 (the Kirki setting for h1-h7), so this one * headline was the only bold serif on either page - it read as a * different typeface rather than the same one. * * DELIBERATELY NOT CHANGED: the second blockquote on this page ("What * followed was a blur of silence...") is italic uppercase Fraunces, where * the equivalent pull-quote on the Alaska page is Work Sans in sentence * case. That is a real difference in voice, but it is two lines long, it is * legible, and it clearly reads as an intentional interstitial rather than * drift - so aligning it would be redesigning a published page rather than * correcting an inconsistency. Kedyn's call, either direction. * * (A `blockquote:not(:has(h3))` rule was tried here and removed: the text * sits inside an
, and screen.css uppercases h1-h7 sitewide, so a * text-transform on the blockquote never reaches it - the rule looked * correct and did nothing.) * ------------------------------------------------------------------------ */ .page-id-4487 #page_content_wrapper blockquote strong { font-weight: 300; }