/** * Where We've Been — Front-end styles * * John Cain brand: Didot (headings, 400 weight, never italic/bold), Gotham * (body/labels). Palette restricted to the three brand values below. The blue * is light (~1.8:1 on white), so it is never used for text — only as the active * pin ring and link-hover (paired with the dark resting state for legibility). * * The map lives under .where-weve-been. The modal is portaled to at * runtime (to escape the theme's slideout transform), so its styles are scoped * to .wwb-modal independently and carry their own brand vars. */ /* ── Map ──────────────────────────────────────────────────────────────────── */ .where-weve-been { --wwb-dark: #51545D; /* text, default pins — 7.5:1 on white */ --wwb-light: #C2C7CA; /* map land, borders — non-text only */ --wwb-blue: #B0C5CC; /* active-pin ring — accent only */ --wwb-land-stroke: #FFFFFF; color: var(--wwb-dark); font-family: "Gotham", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } .where-weve-been *, .where-weve-been *::before, .where-weve-been *::after { box-sizing: border-box; } .where-weve-been .container { max-width: 1080px; margin: 0 auto; padding: 16px 24px 40px; } .where-weve-been .region { margin-bottom: 48px; } .where-weve-been .region-label { text-align: center; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--wwb-dark); margin: 0 0 16px; } .where-weve-been .map-wrap { position: relative; width: 100%; margin: 0 auto; } .where-weve-been .map-wrap.us { aspect-ratio: 975 / 610; max-width: 1000px; } .where-weve-been .map-wrap.europe { aspect-ratio: 600 / 560; max-width: 100%; } .where-weve-been .map-wrap.caribbean { aspect-ratio: 600 / 380; max-width: 100%; } .where-weve-been svg.region-map { display: block; width: 100%; height: 100%; overflow: hidden; } /* Let the US map draw outside its viewBox so the active-pin scale isn't clipped. geoAlbersUsa returns null for off-country points, so nothing actually spills. */ .where-weve-been svg.region-map[data-region="us"] { overflow: visible; } .where-weve-been .state { fill: var(--wwb-light); stroke: var(--wwb-land-stroke); stroke-width: 1.2px; stroke-linejoin: round; } .where-weve-been .pin { fill: var(--wwb-dark); cursor: pointer; transition: transform 0.15s ease; transform-box: fill-box; transform-origin: center; } .where-weve-been .pin:hover { transform: scale(1.45); } /* Keyboard focus must be visible (WCAG 2.4.7). Mirror the hover scale and add a ring so focus reads on the light land. */ .where-weve-been .pin:focus-visible { outline: none; transform: scale(1.45); stroke: var(--wwb-dark); stroke-width: 2px; } /* Active = dark dot with a blue ring. The dark fill keeps contrast on the land; the blue ring is the brand accent and reads against the dark fill. */ .where-weve-been .pin.active { fill: var(--wwb-dark); stroke: var(--wwb-blue); stroke-width: 2.5px; transform: scale(1.7); } .where-weve-been .region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 800px) { .where-weve-been .region-grid { grid-template-columns: 1fr; gap: 32px; } } /* ── Modal (portaled to ) ───────────────────────────────────────────── Self-contained: own brand vars + the post-list content styles, which are used only inside the modal now that the inline panels are gone. */ .wwb-modal { --wwb-dark: #51545D; --wwb-light: #C2C7CA; --wwb-blue: #B0C5CC; position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.2s ease; font-family: "Gotham", Helvetica, Arial, sans-serif; color: var(--wwb-dark); } .wwb-modal, .wwb-modal *, .wwb-modal *::before, .wwb-modal *::after { box-sizing: border-box; } /* Author display rule would otherwise beat the [hidden] UA default. */ .wwb-modal[hidden] { display: none; } .wwb-modal.is-open { opacity: 1; } .wwb-modal__backdrop { position: absolute; inset: 0; background: rgba(81, 84, 93, 0.55); /* brand dark gray, translucent */ } .wwb-modal__card { position: relative; background: #fff; border: 1px solid var(--wwb-light); width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; padding: 44px 40px 32px; text-align: center; transform: translateY(8px); transition: transform 0.2s ease; } .wwb-modal.is-open .wwb-modal__card { transform: translateY(0); } .wwb-modal__close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 30px; line-height: 1; color: var(--wwb-dark); cursor: pointer; padding: 4px 10px; } .wwb-modal__close:hover { color: var(--wwb-blue); } .wwb-modal__close:focus-visible { outline: 2px solid var(--wwb-dark); outline-offset: 2px; } .wwb-modal .panel-location { font-family: "Didot", serif; font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 6px; color: var(--wwb-dark); } .wwb-modal .panel-count { font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--wwb-dark); margin: 0 0 16px; } .wwb-modal .post-list { list-style: none; margin: 0; padding: 0; } .wwb-modal .post-list li { border-top: 1px solid var(--wwb-light); padding: 13px 0; } .wwb-modal .post-list li:last-child { border-bottom: 1px solid var(--wwb-light); } /* Match the blog index title style: .everyday-blog-post .blog-post-details h3 — Didot (inherited), 22px, uppercase, centered, line-height 1.3. */ .wwb-modal .post-list a { color: var(--wwb-dark); text-decoration: none; font-family: "Didot", serif; font-size: 22px; line-height: 1.3; text-transform: uppercase; display: block; margin-bottom: 0; } /* Hover: just the brand blue, no underline (matches the site-wide link hover). */ .wwb-modal .post-list a:hover, .wwb-modal .post-list a:hover .post-date { color: var(--wwb-blue); } /* Keyboard focus stays visible without relying on the low-contrast blue. */ .wwb-modal .post-list a:focus-visible { outline: 2px solid var(--wwb-dark); outline-offset: 2px; } .wwb-modal .post-date { display: block; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--wwb-dark); text-decoration: none; margin-top: 7px; } .wwb-modal .more-btn { margin-top: 18px; display: inline-block; font-family: "Gotham", Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--wwb-dark); text-decoration: none; border: 1px solid var(--wwb-dark); padding: 11px 20px; transition: background 0.15s ease, color 0.15s ease; } .wwb-modal .more-btn:hover, .wwb-modal .more-btn:focus-visible { background: var(--wwb-dark); color: #fff; outline: none; } @media (prefers-reduced-motion: reduce) { .wwb-modal, .wwb-modal__card { transition: none; } .wwb-modal__card { transform: none; } } @media (max-width: 700px) { .wwb-modal__card { padding: 40px 22px 24px; } .wwb-modal .panel-location { font-size: 23px; } .wwb-modal .post-list a { font-size: 19px; } }