/* Lifeguin Next — the one stylesheet. From the prototype shown on 24 Sept 2026 (scripts/design/prototype/next.css), a sister of Penguin Stones' design system: navy ink, the brand yellow, one radius, soft shadows, Lilita One headings. Different on purpose: Figtree for 2,000-word articles; IBM Plex Mono only for small labels. Light and dark (owner, 25 Sept): the colours are tokens; dark ones take over when (set in by inc/setup.php from the visitor's choice or, in 'auto' mode, the device). Section "dark mode" at the end. Sections: fonts · tokens · base · header · drawer · tab bar · home · cards · article · Maria's content · country · search · footer · plugins. */ /* ── fonts: self-hosted, latin + latin-ext (Miško, Český Krumlov, Ľubochňa) ─────────────────────────────────────── */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/figtree-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lilita-one-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* IBM Plex Mono bold: Penguin Stones' own files, for the header menu and button set as there */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-mono-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-mono-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } /* Merriweather + Merriweather Sans: the fonts of today's site, used ONLY inside Maria's Wonder Blocks sections (owner, 25 Sept: "the custom blocks Maria uses and likes … identity is lost"). Variable fonts, copied from wp-content/fonts (travelore's download), so the theme does not depend on travelore. A browser fetches them only on pages with a section. */ @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/merriweather-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/merriweather-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(../fonts/merriweather-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 900; font-display: swap; src: url(../fonts/merriweather-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/merriweather-sans-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Merriweather Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/merriweather-sans-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Merriweather Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/merriweather-sans-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Merriweather Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/merriweather-sans-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ :root { --ink: #0f172a; --ink-2: #334155; --muted: #5b6b82; --line: #e2e8f0; --chrome-line: #cbd5e1; /* outlines of the header buttons, as on Penguin Stones */ /* Header highlight: Maria's yellow in light AND dark mode (owner, 27 Sept 2026: "change text highlight from that blue to yellow for both light and dark theme"; was Penguin Stones' blue #1d4ed8 / #eef2f9 in light mode). */ --chrome-hover: #fff5d6; --chrome-accent: #F7C32C; --bg: #f6f8fc; --surface: #ffffff; --surface-2: #f1f5fb; --yellow: #F7C32C; --yellow-hover: #e4b01c; --yellow-ink: #0f172a; /* Yellow words in posts (Maria's #f7c32c headings, her cards' labels and links, list bullets, stone numbers): the brand yellow itself. Round 6 had darkened them to a gold (#b98300 / #936800 / #a16207) for contrast on white; owner, 25 Sept: "change color to yellow branded one … all other texts in that not nice dark orange color". The three tokens stay, so a darker shade is one line away if it is ever wanted again. */ --amber: #f7c32c; --maria-gold: #f7c32c; --maria-gold-text: #f7c32c; --purple: #7b4585; --purple-soft: #f5edf7; --teal: #287278; --navy: #0f172a; --navy-2: #1e3a5f; --link: #1e3a5f; /* text links (navy-2 stays a background colour: the navy band's gradient) */ --header-bg: rgba(255, 255, 255, .94); --tile-paper: #f6f2eb; /* the homepage's three journal cards */ --tint-yellow: #fff5d6; --tint-yellow-ink: #6b4b00; --tint-yellow-ink-2: #5b4a17; --mark: #fff1b8; --purple-ink: #4a3550; --purple-ink-2: #6d5a73; color-scheme: light; --radius: 14px; --radius-sm: 10px; --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06); --shadow-md: 0 14px 34px rgba(15, 23, 42, .12); --font-display: 'Lilita One', 'Arial Black', system-ui, sans-serif; --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-label: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --page: min(1200px, 100% - 32px); --prose: 780px; --wide: 1040px; /* The header bar is exactly as tall as Penguin Stones' (owner, 25 Sept: switching between the sites should feel the same). There it is 18 px padding + its "Add to map" button (10 px padding, text clamp(14px, 1.1vw, 16px) at line-height 1.7) + 18 px, i.e. 80–83 px, and 14 + 42 + 14 = 70 px from 960 px down; both add a 1 px bottom line. */ --header-h: calc(56px + 1.7 * clamp(14px, 1.1vw, 16px)); } @media (max-width: 960px) { :root { --header-h: 70px; } } /* ── base ───────────────────────────────────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 17px/1.65 var(--font-text); overflow-wrap: break-word; } img, video, iframe, embed, object { max-width: 100%; } img { height: auto; } a { color: var(--link); } a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 6px; } .wrap { width: var(--page); margin-inline: auto; } .wrap-wide { max-width: var(--wide); } .label { font: 500 12px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--yellow); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; } .skip-link:focus { top: 12px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; font: 700 15px/1 var(--font-text); text-decoration: none; cursor: pointer; } .btn-yellow { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 6px 16px rgba(247, 195, 44, .35); } .btn-yellow:hover { background: var(--yellow-hover); } .btn-line { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); cursor: pointer; } .only-phone { display: none !important; } @media (max-width: 900px) { .only-desk { display: none !important; } .only-phone { display: block !important; } } /* ── header ─────────────────────────────────────────────────────────────────────────────────────────────────────── */ /* The frosted blur sits on a layer BEHIND the header, not on the header itself: an element with backdrop-filter becomes the containing block of its position:fixed children, which squeezed the phone menu (fixed, top to bottom of the screen) into the 64 px header — it was ~110 px tall and scrolled inside that strip (found 25 Sept). */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 0; } } .site-header > .wrap { display: flex; align-items: center; gap: 16px; height: var(--header-h); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; } .brand-mark { width: 40px; height: 40px; flex: none; display: block; } .brand b { font: 400 22px/1 var(--font-display); letter-spacing: .02em; } .brand small { display: block; font: 500 10px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; white-space: nowrap; } /* In the bar the name is set like PENGUINSTONES: Lilita One 18 px, 0.5 px letter spacing, one line in the middle of the bar (the tagline moved to the footer). Miško stays 40 px (owner). */ .site-header .brand b { display: block; font-size: 18px; letter-spacing: .5px; } /* hovering LIFEGUIN turns it blue (yellow in dark mode), as the PENGUINSTONES wordmark does (.ps-h-brand:hover) */ .site-header .brand:hover { color: var(--chrome-accent); } .nav .nav-menu { display: flex; align-items: center; gap: 16px; list-style: none; margin: 0; padding: 0; } .nav .nav-menu > li { position: relative; } .nav a, .nav summary { font: 600 15px/1 var(--font-text); color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; } .nav summary::-webkit-details-marker { display: none; } .nav a:hover, .nav summary:hover, .nav summary.on, .nav .current-menu-item > a { border-color: var(--yellow); } .nav .icon-chev { color: var(--muted); transition: transform .2s; } .dest-panel[open] .icon-chev { transform: rotate(180deg); } .dest-panel__box { position: absolute; top: calc(100% + (var(--header-h) - 42px) / 2 + 9px); left: -10px; width: min(860px, calc(100vw - 48px)); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); border: 1px solid var(--line); padding: 22px 24px; } .dest-panel__grid { display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .dest-panel__grid ul { list-style: none; margin: 8px 0 0; padding: 0; } .dest-panel__grid li a { display: flex; gap: 6px; align-items: baseline; padding: 4px 0; font: 500 15px/1.3 var(--font-text); color: var(--ink); text-decoration: none; border: 0; } .dest-panel__grid li a:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--yellow); } .dest-panel__grid .n { margin-left: auto; font: 500 12px var(--font-label); color: var(--muted); } .dest-panel__continent { display: block; font: 400 20px/1.1 var(--font-display) !important; color: var(--ink) !important; text-decoration: none; border: 0 !important; padding: 0 !important; } .nav .sub-menu { display: none; } .help-panel .dest-panel__box { width: 300px; padding: 14px 18px; } /* The wide Destinations panel hangs from the menu's right end (with the wider bar the menu starts further right, and a panel hung from "Destinations" ran 80–100 px off a 1,200–1,440 px screen). The small panels stay under their word. */ .nav { position: relative; } .nav .nav-menu > li:has(> .dest-panel:not(.help-panel)) { position: static; } .nav .dest-panel:not(.help-panel) > .dest-panel__box { left: auto; right: -10px; } .help-panel__list { list-style: none; margin: 0; padding: 0; } .help-panel__list a { display: block; padding: 8px 0 !important; font: 500 15px/1.3 var(--font-text) !important; border: 0 !important; } .help-panel__list li:first-child a { font-weight: 700 !important; } /* "Eat & stay": Places to eat + Places to stay in one dropdown (owner, 25 Sept: the header was too busy) */ .eat-panel .dest-panel__box { width: 260px; } .eat-panel .help-panel__list a { display: flex !important; align-items: baseline; gap: 12px; font-weight: 600 !important; } .eat-panel .help-panel__list .n { margin-left: auto; font: 500 12px var(--font-label); color: var(--muted); } .eat-panel .help-panel__list a[aria-current] { color: var(--link); text-decoration: underline; text-decoration-color: var(--yellow); } /* the search circle and the Newsletter button never give up width to the menu (the circle was squeezed to an oval) */ .site-header > .wrap > .icon-btn, .site-header > .wrap > .btn { flex: none; } /* Reading progress on an article: a 3 px yellow line along the header's bottom edge (header.php, assets/js/next.js). Empty until the text starts passing under the header; without JavaScript it stays empty. Replaces PostX's blue bar. */ .read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s; } .read-progress.is-on { opacity: 1; } .read-progress > span { display: block; height: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; } @media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } } @media (max-width: 900px) { .nav { display: none; } } /* The one-row menu needs ~1200 px (six entries since "Help the penguins" joined, 25 Sept); narrower screens (small laptops, tablets on their side) get the menu button, and keep search + Newsletter in the bar. */ @media (max-width: 1199px) and (min-width: 901px) { .nav { display: none; } .menu-drawer.only-phone { display: block !important; } } /* The bar is at most 1,200 px wide, so every wide screen has the same room: one 16 px spacing between menu items and between the bar's parts, and search + the light/dark switch as a pair, keep the tagline clear of the menu with the switch added (25 Sept; it had run 28 px into "Destinations"). */ .nav a, .nav summary { white-space: nowrap; } /* ── phone menu drawer (a
: works without JavaScript) ─────────────────────────────────────────────────── */ .menu-drawer > summary { list-style: none; } .menu-drawer > summary::-webkit-details-marker { display: none; } .menu-drawer__box { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; overflow: auto; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 16px 96px; z-index: 45; } .admin-bar .menu-drawer__box { top: calc(var(--header-h) + 46px); } /* One short list (owner, 25 Sept: the long country list came first and made the menu hard to use). Destinations and Help the penguins fold open; each continent folds open to its countries (inc/template-tags.php, lg_next_drawer_menu). */ .drawer-search { margin: 0 0 12px; } .drawer-menu, .drawer-sub, .drawer-countries { list-style: none; margin: 0; padding: 0; } .drawer-menu > li { border-bottom: 1px solid var(--line); } .drawer-row { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 2px; font: 700 17px/1.2 var(--font-text); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; } summary.drawer-row::-webkit-details-marker { display: none; } .drawer-row .n { margin-left: auto; font: 500 12px var(--font-label); color: var(--muted); } .drawer-row > .icon-chev { margin-left: auto; flex: none; color: var(--muted); transition: transform .2s; } .drawer-row .n + .icon-chev { margin-left: 4px; } .drawer-fold[open] > summary > .icon-chev { transform: rotate(180deg); } .drawer-row[aria-current] { color: var(--link); } .drawer-sub { padding: 0 0 10px 14px; border-left: 3px solid var(--yellow); margin-left: 2px; } .drawer-row--sub { min-height: 46px; font-size: 16px; font-weight: 600; } .drawer-countries { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 0 0 10px 4px; } .drawer-countries a { display: flex; align-items: center; gap: 6px; min-height: 40px; font: 500 15px/1.25 var(--font-text); color: var(--ink); text-decoration: none; } .drawer-countries .all { grid-column: 1 / -1; } .drawer-countries .all a { font-weight: 700; color: var(--link); } .drawer-countries a[aria-current] { font-weight: 700; color: var(--link); } .drawer-sub--links a { display: flex; align-items: center; min-height: 44px; font: 500 16px/1.25 var(--font-text); color: var(--ink); text-decoration: none; } @media (prefers-reduced-motion: reduce) { .drawer-row > .icon-chev { transition: none; } } .drawer-nl { display: flex; width: 100%; margin-top: 18px; } /* ── phone tab bar (as on Penguin Stones) ─────────────────────────────────────────────────────────────────────── */ .tabbar { display: none; } @media (max-width: 900px) { .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--muted); font: 500 11px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; padding: 6px 0; min-height: 44px; } .tabbar a.on { color: var(--link); } body { padding-bottom: 72px; } } /* ── page heads (archives, pages, plugin pages that ask for an H1) ────────────────────────────────────────────── */ .page-head { padding: 32px 0 0; } .page-head h1 { font: 400 clamp(30px, 4.6vw, 46px)/1.08 var(--font-display); color: var(--ink); margin: 0; letter-spacing: .01em; text-wrap: balance; } /* ── homepage ─────────────────────────────────────────────────────────────────────────────────────────────────── */ .hero { position: relative; color: #fff; background: var(--navy); overflow: hidden; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 23, 42, .35) 0%, rgba(15, 23, 42, .78) 100%); } .hero .wrap { position: relative; z-index: 2; padding: 88px 0 72px; text-align: center; } .hero h1 { font: 400 clamp(34px, 6vw, 64px)/1.02 var(--font-display); margin: 0 auto 16px; max-width: 16ch; text-wrap: balance; letter-spacing: .01em; color: #fff; } .hero p.lede { font-size: clamp(17px, 2.2vw, 20px); max-width: 52ch; margin: 0 auto 28px; color: #e8edf6; } .hero-search, .search-box { display: flex; gap: 8px; background: var(--surface); border-radius: 16px; padding: 6px; box-shadow: var(--shadow-md); } .hero-search { max-width: 560px; margin: 0 auto 28px; } .search-box { max-width: 640px; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } .hero-search input, .search-box input { flex: 1; min-width: 0; border: 0; font: 500 17px var(--font-text); padding: 0 14px; color: var(--ink); background: transparent; } .hero-search input:focus, .search-box input:focus { outline: none; } .hero-search:focus-within, .search-box:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; } /* phones: "Where do you want to waddle?" fits beside the button (16 px typed text: iPhones do not zoom in) */ @media (max-width: 600px) { .hero-search input, .search-box input { font-size: 16px; padding: 0 6px 0 12px; } } @media (max-width: 380px) { .hero-search input::placeholder, .search-box input::placeholder { font-size: 14px; } } /* The numbers: three tiles in one row on every screen, each its own see-through tile with a gap and no lines (owner, 27 Sept 2026: only Countries explored / Kilometres travelled / Flights taken, "a little bit bigger, higher"). Blur keeps the words readable on any photo. */ .stats { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 100%; } .stats span { display: flex; flex-direction: column; justify-content: center; min-height: 104px; padding: 18px 28px; text-align: center; background: rgba(15, 23, 42, .38); border-radius: 16px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: 0 1px 2px rgba(15, 23, 42, .45); } .stats b { display: block; font: 400 34px/1 var(--font-display); color: var(--yellow); white-space: nowrap; } .stats small { display: block; margin-top: 8px; font: 500 12px/1.25 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #dbe3ef; } .stats .stats-unset b { color: rgba(255, 255, 255, .45); } .stats-edit { display: table; margin: 12px auto 0; font: 500 13px var(--font-text); color: #fff; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 600px) { .hero .wrap { padding: 56px 0 44px; } .stats { gap: 8px; } .stats span { min-height: 88px; padding: 14px 6px; border-radius: 12px; } .stats b { font-size: clamp(15px, 4.6vw, 21px); } .stats small { margin-top: 6px; font-size: 10px; letter-spacing: .05em; } } /* About me / Help the penguins / Penguin Stones under the photo (front-page.php, lg_next_home_tiles): square photo tiles about the size of the sidebar's Instagram picture; on a phone three small ones in a row. */ .home-tiles-section { padding-bottom: 0; } .home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } /* Beside the sidebar, the three tiles are exactly the size of the Instagram picture at the top of it (owner, 25 Sept): the page is four equal columns with 20 px gaps — three tiles, then the sidebar. So on the homepage the sidebar is a quarter of the page (285 px at 1200) instead of 300 px, and its pictures follow. */ @media (min-width: 1200px) { .home .aside-layout > .article-aside { width: calc((100% - 60px) / 4); margin-left: 20px; } } /* The Tripadvisor logo (a transparent square, the logo in its middle) raised 38 px inside its square so its top lines up with the top of the "Where to next?" letters (owner, 26 Sept). Measured: within 1 px from 1280 px up, 2 px at 1230; below ~1230 the sidebar narrows and no fixed value fits. Holds while the widgets above it keep their order. */ @media (min-width: 1200px) { .home .article-aside .side-tile-fit img { object-position: 50% calc(50% - 38px); } } /* …and the top of "Latest guides" lines up with the top of the sidebar's second picture (App Store; owner, 25 Sept). That picture starts 28 px below the tiles (the Instagram widget is 8 px taller than its picture, then the sidebar's 20 px gap); the heading's letters start 7 px below its box (Lilita One 34 px, line-height 1.1), so 21 px. */ @media (min-width: 1200px) { .home .home-tiles-section { padding-bottom: 0; } .home .home-tiles-section + .section { padding-top: 21px; } } .home-tile { position: relative; display: block; color: var(--ink); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; } /* Three journal cards (owner, 27 Sept 2026: "standing out more, something unique"; Maria liked theblondeabroad.com's framed cards): a paper card with the photo inset and the title in Lilita One; a strip of yellow tape holds each one on the page, like a photo stuck into a travel journal. Owner, same day: no outline and no LEARN MORE. */ .home-tile::before { content: ""; position: absolute; z-index: 2; top: -10px; left: 50%; width: 84px; height: 22px; background: rgba(247, 195, 44, .72); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); pointer-events: none; } .home-tile:nth-child(2)::before { transform: translateX(-50%) rotate(2.5deg); } .home-tile:nth-child(3)::before { transform: translateX(-50%) rotate(-1.5deg); } .home-tile__card { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 16px 16px 18px; background: var(--tile-paper); text-align: center; } .home-tile__photo { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); } .home-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } /* a photo that must be zoomed to fill the square (LG_NEXT_TILE_ZOOM in inc/template-tags.php): the `scale` property, so the hover's transform: scale(1.04) adds to it instead of replacing it */ .home-tile__img { scale: var(--tile-zoom, 1); } .home-tile__title { display: block; margin-top: 14px; font: 400 25px/1.08 var(--font-display); letter-spacing: .01em; color: var(--ink); } .home-tile small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.35; color: var(--muted); } .home-tile:hover, .home-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); } .home-tile:hover .home-tile__img, .home-tile:focus-visible .home-tile__img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .home-tile, .home-tile__img { transition: none; } } /* phones: still three in a row (owner, 25 Sept), just the photo and the title */ @media (max-width: 600px) { .home-tiles { gap: 10px; } .home-tile::before { top: -7px; width: 44px; height: 14px; } .home-tile__card { padding: 6px 6px 8px; } .home-tile__title { margin-top: 7px; font-size: 15px; } .home-tile small { display: none; } } .section { padding: 56px 0; } .section-tight { padding-top: 0; } .section-first { padding-top: 24px; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .section-head h2 { font: 400 clamp(26px, 3.4vw, 34px)/1.1 var(--font-display); color: var(--ink); margin: 0; letter-spacing: .01em; } .section-head p { margin: 6px 0 0; color: var(--muted); } .section-head a { font-weight: 700; white-space: nowrap; color: var(--link); } /* guide cards: gaps halved (owner, 27 Sept 2026: "smaller gaps … about half"; were 22 px, 18 px on phones) */ .grid { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-stones { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .grid { grid-template-columns: 1fr; gap: 9px; } .section { padding: 40px 0; } .section-tight { padding-top: 0; } } .continents { display: grid; gap: 22px; grid-template-columns: 1.4fr 1fr; align-items: start; } /* a short continent box does not stretch to Europe's height */ @media (max-width: 900px) { .continents { grid-template-columns: 1fr; } } .continent { background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .continent h3 { font: 400 24px/1.1 var(--font-display); color: var(--ink); margin: 0 0 14px; } .continent h3 a { color: inherit; text-decoration: none; } .continent .chips { display: flex; flex-wrap: wrap; gap: 8px; } .continent .chips a { text-decoration: none; background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 8px 12px; font-weight: 600; font-size: 15px; } .continent .chips a .n { color: var(--muted); font: 500 12px var(--font-label); margin-left: 6px; } .continent .chips a:hover { background: var(--tint-yellow); } .band { border-radius: 20px; padding: 32px; } /* "Best places to go in " (the class name is historical): white in light mode (owner, 25 Sept), a dark surface in dark mode — a card like the map and country boxes, with Maria's yellow along the top. */ .band-navy { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-top: 5px solid var(--yellow); box-shadow: var(--shadow-sm); } .band-navy h2 { color: var(--ink); } .band-navy .section-head p { color: var(--muted); } .band-navy .section-head a { color: var(--link); } .dest { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .dest { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .dest { grid-template-columns: 1fr; } .band { padding: 22px 18px; border-radius: 16px; } } .dest a { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; } .dest a:hover { background: var(--tint-yellow); border-color: var(--yellow); } .dest .flag { font-size: 26px; } .dest b { font: 700 16px/1.2 var(--font-text); display: block; } .dest small { color: var(--muted); font-size: 13px; } .stones-band { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--tint-yellow); border-radius: 20px; padding: 28px 32px; } .stones-band h2 { font: 400 28px/1.1 var(--font-display); color: var(--ink); margin: 0 0 6px; } .stones-band p { margin: 0; color: var(--tint-yellow-ink-2); } @media (max-width: 700px) { .stones-band { grid-template-columns: 1fr; padding: 22px 18px; } } /* The sign-up card is laid out like the Penguin Stones band above it on the homepage (owner, 25 Sept: "same … with symmetrical Sign me up button"): same padding, the button at the right edge, both buttons the same width; on a phone both buttons run the full width. */ .newsletter { background: var(--purple-soft); border-radius: 20px; padding: 28px 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .newsletter h2 { font: 400 28px/1.1 var(--font-display); color: var(--purple); margin: 0 0 6px; } .newsletter p { margin: 0 0 6px; color: var(--purple-ink); } .newsletter p:last-child { margin-bottom: 0; } .newsletter-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; } .newsletter-cta small { color: var(--purple-ink-2); font-size: 13px; } :is(.newsletter-cta, .stones-band) .btn { min-width: 220px; } @media (max-width: 700px) { .newsletter { grid-template-columns: 1fr; padding: 22px 18px; } .newsletter-cta { align-items: stretch; text-align: center; } :is(.newsletter-cta, .stones-band) .btn { min-width: 0; } } /* ── cards ───────────────────────────────────────────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; } .card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .card .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; } .chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 5px 10px; font: 500 12px/1.2 var(--font-label); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; } a.chip:hover { background: var(--tint-yellow); } .chip.yellow { background: var(--tint-yellow); color: var(--tint-yellow-ink); } .chip.purple { background: var(--purple-soft); color: var(--purple); } /* A card's tags: its country, and Eat / Stay for restaurant and hotel guides (owner, 25 Sept) */ .card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; } .card-tags .chip { align-self: auto; } .chip.on-dark { background: rgba(255, 255, 255, .14); color: #fff; } .card-title { font: 700 19px/1.3 var(--font-text); color: var(--ink); margin: 0; text-wrap: balance; } .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { text-decoration: underline; text-decoration-color: var(--yellow); } .card p, .card .card-text { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .card-row { display: grid; grid-template-columns: 200px 1fr; } .card-row .card-media { aspect-ratio: auto; min-height: 100%; } @media (max-width: 600px) { .card-row { grid-template-columns: 1fr; } .card-row .card-media { aspect-ratio: 21 / 9; min-height: 0; } } @media (prefers-reduced-motion: reduce) { .card, a.card:hover { transition: none; transform: none; } } /* ── article ─────────────────────────────────────────────────────────────────────────────────────────────────── */ .article-head { padding: 36px 0 22px; } /* The "Home › Europe › Austria" line (lg_next_trail), and the travel calendar's own, looking the same */ .trail, .lg-wtg .lg-wtg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin: 0 0 14px; font: 500 14px/1.45 var(--font-text); color: var(--muted); } :is(.trail, .lg-wtg .lg-wtg-crumbs) a { color: var(--muted); text-decoration: none; } :is(.trail, .lg-wtg .lg-wtg-crumbs) a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } :is(.trail, .lg-wtg .lg-wtg-crumbs) [aria-current] { color: var(--ink-2); } :is(.trail__sep, .lg-wtg-crumbs__sep) { opacity: .7; } .trail.on-dark, .trail.on-dark a, .trail.on-dark [aria-current] { color: rgba(255, 255, 255, .9); } .trail.on-dark a:hover { color: #fff; } .article-title { font: 400 clamp(32px, 5vw, 52px)/1.05 var(--font-display); color: var(--ink); margin: 0 0 14px; max-width: 22ch; text-wrap: balance; letter-spacing: .01em; } .standfirst { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin: 0 0 20px; } .standfirst p { margin: 0; } .byline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; color: var(--muted); font-size: 15px; } .byline .who { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; } .byline .who img { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); } .listen { display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px 8px 8px; font: 700 14px var(--font-text); cursor: pointer; min-height: 44px; } .listen .play { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; } .listen small { font: 500 12px var(--font-label); color: #c7d2e4; } [data-lg-audio] { display: none; } [data-lg-audio].is-on { display: block; width: 100%; max-width: 520px; height: 40px; margin-top: 12px; flex-basis: 100%; } .hero-photo { width: var(--page); max-width: var(--wide); margin: 0 auto; } .hero-photo__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-md); } @media (max-width: 600px) { .hero-photo__img { border-radius: 14px; aspect-ratio: 4 / 3; } } .glance { width: min(var(--prose), 100% - 32px); margin: 32px auto 8px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; border-top: 5px solid var(--yellow); } .glance h2 { font: 400 22px/1.2 var(--font-display); color: var(--ink); margin: 0 0 14px; } .glance dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 0; } .glance dt { font: 500 12px/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .glance dd { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.45; } .glance .wide { grid-column: 1 / -1; } .glance a { color: var(--link); font-weight: 700; } .months { display: flex; gap: 3px; margin-top: 6px; } .months i { flex: 1; height: 22px; border-radius: 5px; background: var(--surface-2); font: 500 10px/22px var(--font-label); text-align: center; color: var(--muted); font-style: normal; overflow: hidden; } .months i.best { background: var(--yellow); color: var(--navy); } @media (max-width: 600px) { .glance dl { grid-template-columns: 1fr; } .glance { padding: 18px 16px; } .months i { font-size: 0; } .months i::first-letter { font-size: 10px; } } .share { width: min(var(--prose), 100% - 32px); margin: 28px auto 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 14px; } .share a, .share button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); text-decoration: none; font: 700 14px var(--font-text); cursor: pointer; } /* hover: the brand yellow with dark ink, as Penguin Stones' yellow buttons, and the 1 px lift of its round pill buttons (owner, 26 Sept: "make the share icons yellow on hover like penguinstones"); the same in dark mode */ .share a, .share button { transition: background-color .15s, border-color .15s, color .15s, transform .15s; } .share a:hover, .share button:hover, .share a:focus-visible, .share button:focus-visible { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .share a, .share button { transition: none; } .share a:hover, .share button:hover { transform: none; } } .share-done { font-weight: 600; color: var(--ink); } .page-links { margin: 1.5em 0; font-weight: 700; } /* ── Maria's content: her blocks unchanged; only the frame, the type and the colours around them ───────────────── What the reading column must respect, from the verbatim patterns (mu-plugins/patterns/) and the audit (scripts/design/theme-audit.php): · Wonder Blocks sections can be DARK (is-style-nfd-theme-dark / -darker / -primary, a dark cover) and their text is white; headings inside them keep the section's colours, and yellow text there stays yellow (it reads on dark). · Old classic-editor posts colour words yellow inline (#f7c32c / #ffcc00): amber on the light page (4.9:1). · Anything the author coloured on purpose (.has-text-color, a heading with its own background) keeps its colour. */ .prose { width: min(var(--prose), 100% - 32px); margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--ink-2); } .prose-wide { width: var(--page); max-width: var(--page); } .prose > * { margin-block: 0 1.1em; } .prose > :first-child { margin-top: 32px; } .prose img { max-width: 100%; height: auto; } .prose img:not(.emoji):not([width="16"]):not([width="20"]):not([width="24"]) { border-radius: 12px; } .prose img.emoji { display: inline; width: 1em; height: 1em; } .prose :is(h2, h3, h4, h5, h6) { color: var(--ink); scroll-margin-top: calc(var(--header-h) + 16px); } .prose h2, .prose h2 * { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: .01em; } .prose h2 { font-size: 30px; line-height: 1.15; margin-top: 1.6em; } /* Every heading in an article in Lilita One, the font of Penguin Stones' headings (owner, 27 Sept 2026: "all fonts on Lifeguin for headers matching Penguin Stones"; h3–h6 were Figtree bold). */ .prose :is(h3, h4, h5, h6), .prose :is(h3, h4, h5, h6) * { font-family: var(--font-display) !important; font-weight: 400 !important; letter-spacing: .01em; } .prose h3 { font-size: 24px; line-height: 1.2; } .prose :is(h4, h5, h6) { font-size: 20px; line-height: 1.25; } /* PostX headings carry per-block colours and sizes; the mock-up drew them as the site's headings. Not inside a dark section (the :not(:is(… *)) part), where the section's own white text must stay. */ .prose .ultp-heading-inner:not(:is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .wp-block-cover:not(.is-light)) *), .prose .ultp-heading-inner:not(:is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .wp-block-cover:not(.is-light)) *) span { color: var(--ink) !important; } .prose :is(.wp-block-ultimate-post-heading, .ultp-heading-wrap) h2 .ultp-heading-inner { font-size: 30px !important; line-height: 1.15 !important; } /* yellow words written inline in the old editor → readable amber on the light page */ .prose [style*="f7c32c" i], .prose [style*="ffcc00" i], .prose [style*="rgb(247, 195, 44)" i], .prose [style*="ffc000" i] { color: var(--amber) !important; } .prose .has-luminous-vivid-amber-color, .prose .has-vivid-yellow-color { color: var(--amber) !important; } /* Text links only: buttons (Wonder Blocks / core / PostX) keep their own colours — navy on the dark "Book your Room now" button was invisible in the first build. */ .prose a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]) { color: var(--link); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* The Post Grid boxes (continent pages, Madeira posts): their title links take the heading's colour — white on the photo overlay, ink on the card layouts. The rule above painted them navy on dark photos (found 25 Sept). */ .prose .rt-tpg-container a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]) { color: inherit; } .prose strong { color: var(--ink); } .prose :is([style*="color:" i], [style*="color :" i], .has-text-color) strong { color: inherit; } /* "Waddle Duration:" = bold inside a yellow span */ .prose ul li::marker, .prose ol li::marker { color: var(--amber); } .prose hr, .prose .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin-block: 2em; } .prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--yellow); color: var(--ink); } .prose figcaption, .prose .wp-caption-text { font-size: 14px; color: var(--muted); text-align: center; margin-top: 6px; } .prose .wp-caption { max-width: 100%; } .prose p.has-text-align-center em, .prose p[style*="text-align: center"] em { color: var(--muted); } .prose pre { overflow-x: auto; } .prose iframe { max-width: 100%; border: 0; } .prose .table-scroll, .prose .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .prose table { border-collapse: collapse; font-size: 16px; } .prose :is(th, td) { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .prose thead th { background: var(--surface-2); color: var(--ink); } .prose .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; } .prose .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; } .prose .aligncenter { margin-inline: auto; } .prose::after { content: ""; display: table; clear: both; } @media (max-width: 600px) { .prose .alignleft, .prose .alignright { float: none; margin-inline: auto; max-width: 100%; } } .prose .ultp-block-toc { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm); overflow: hidden; } .prose .ultp-block-toc * { font-family: var(--font-text) !important; } .prose .ultp-toc-header .ultp-toc-heading, .prose .ultp-toc-header .ultp-toc-heading *, .prose .ultp-toc-header svg { color: var(--navy) !important; } /* white on yellow was 1.6:1 */ /* Wider than the text on a computer: Maria's full-width and wide sections, Wonder Blocks containers, columns and galleries (design plan: "a readable ~680 px text column, with photos and galleries allowed wider"). In a 680 px column her review sections squeezed their text to ~350 px. Wide, not edge to edge: "Fullwidth section" stays a card on the page, as it looks today. Negative margins, not a transform (a transform would trap the lightbox). */ @media (min-width: 1000px) { .prose > :is(.alignwide, .alignfull, .nfd-container, .wp-block-columns, .wp-block-jetpack-tiled-gallery, .wp-block-gallery, .wp-block-ultimate-post-gallery) { --lg-w: min(var(--wide), 100vw - 64px); width: var(--lg-w); max-width: none; margin-left: calc((100% - var(--lg-w)) / 2); margin-right: calc((100% - var(--lg-w)) / 2); } } /* THE SIDEBAR (owner, 25 Sept 2026: "like today", and "wider after the side section") — travelore's sidebar-1 widgets. Below 1200 px it follows the article as a grid of small cards (it is first in the markup, so flex order moves it). From 1200 px it FLOATS on the right, 300 px wide, and the article flows beside it at 780 px and uses the full 1128 px once the sidebar ends. Everything with a box of its own (Maria's sections, galleries, photos, embeds, tables, the contents box) gets its own formatting context so it sits BESIDE the float instead of sliding under it; flex and grid containers and tables do that by themselves, and centred/aligned images keep their own display. */ .article-body:has(> .article-aside) { display: flex; flex-direction: column; } .article-aside { order: 2; width: min(var(--prose), 100% - 32px); margin: 40px auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 16px; align-items: start; text-align: center; } .article-aside .widget { margin: 0; min-width: 0; } .article-aside .widget:has(:is(h1, h2, h3, h4, h5, h6, iframe, .wp-block-embed, script)) { grid-column: 1 / -1; } .article-aside :is(figure, .wp-block-image) { margin: 0; } .article-aside img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 12px; } .article-aside .wp-block-image img { width: 100% !important; max-height: 220px; object-fit: contain; } .article-aside :is(h2, h3, h4) { font: 500 13px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 8px 0 0; } .article-aside iframe { max-width: 100%; border: 0; } .article-aside .wp-block-embed { margin: 0; } /* A WordPress post preview (wp-embed) waits as an invisible position:absolute iframe, 600 px wide, until it has loaded; in a centred column it started mid-box and stuck out 88 px on a 1024 px screen (the page scrolled sideways). Once loaded, wp-embed.js makes it a normal block that fits (max-width: 100%). */ :is(.article-aside, .prose) .wp-block-embed.is-type-wp-embed .wp-block-embed__wrapper { position: relative; overflow: hidden; } /* Maria's white/coloured cards keep their reading width (nfd-max-w-prose, ~709 px) but sat on the LEFT of her grey sections; once the text widens below the sidebar the section is 1,128 px and a wide empty strip showed on the right ("Hotel Surroundings", "Quick facts", "A Brief History of…"). Centred in the section instead. Text blocks keep their place. */ .prose .wp-block-group.nfd-max-w-prose[class*="nfd-theme-"]:not(.nfd-max-w-full) { margin-inline: auto !important; } /* Maps (84: Google My Maps, Mapy.cz) were pasted at a fixed 400–800 px and sat on the left of the column; they fill it now, keeping their height. The two YouTube players pasted as raw iframes get the usual 16:9. */ The wrapper (content-filters.php, lg_next_wrap_frames) is what fits beside the floating sidebar: an iframe at 100% of the column would not fit there and would drop below the sidebar, leaving a gap. */ .prose .lg-frame { display: flow-root; margin: 1.2em 0; } .prose .lg-frame > iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 12px; } .prose .lg-frame--video > iframe { height: auto; aspect-ratio: 16 / 9; } /* where a post box stood after a lead-in ("check out our blog post:"), one plain link to that post (content-filters.php) */ .prose .lg-post-link { margin-top: -.4em; } .prose .lg-post-link a { font-weight: 700; } /* Penguin Live Cams (a post of ours embedded as a widget) as a card with a button: inc/template-tags.php */ .side-card { display: block; max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); color: var(--ink); text-decoration: none; text-align: left; transition: transform .15s ease, box-shadow .15s ease; } .side-card:hover, .side-card:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, .14); } .side-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); } .article-aside .side-card__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; } .side-card__badge { position: absolute; top: 10px; left: 10px; padding: 5px 9px 5px 20px; border-radius: 999px; background: #dc2626; color: #fff; font: 700 11px/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; } .side-card__badge::before { content: ""; position: absolute; left: 8px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #fff; animation: lg-live 1.6s ease-in-out infinite; } @keyframes lg-live { 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .side-card, .side-card__badge::before { animation: none; transition: none; } } .side-card__body { display: grid; gap: 8px; padding: 14px 16px 16px; } .side-card__title { font: 400 22px/1.1 var(--font-display); letter-spacing: .01em; color: var(--ink); } .side-card__text { font-size: 14px; line-height: 1.45; color: var(--muted); } .side-card__btn { justify-self: start; min-height: 40px; padding: 0 16px; font-size: 14px; } .side-card__btn svg { width: 14px; height: 14px; } /* A logo that is not square (Tripadvisor): centred in a square the size of the other tiles, on nothing — the owner wanted its own see-through background (26 Sept); in dark mode its black letters turn white (inc/image-ink.php). */ .article-aside .side-tile-fit img { aspect-ratio: 1 / 1; height: auto !important; max-height: none; object-fit: contain; padding: 7%; } /* In the sidebar the card is a square tile, the size of the Ko-fi picture beside it (owner, 26 Sept: "on mobile I will have 2×2" — Instagram, App Store, Ko-fi, Penguin Live Cams): the photo fills it, the words sit on a dark fade at the bottom; the one-line description only where the tile is a full 285–300 px column. */ .article-aside .side-card { position: relative; max-width: none; aspect-ratio: 1 / 1; border: 0; border-radius: 12px; } .article-aside .side-card__media { position: absolute; inset: 0; aspect-ratio: auto; } .article-aside .side-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, .88) 100%); } .article-aside .side-card__badge { z-index: 1; } .article-aside .side-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; gap: 6px; padding: 12px; } .article-aside .side-card__title { color: #fff; font-size: 19px; } .article-aside .side-card__text { display: none; } .article-aside .side-card__btn { min-height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none; } @media (min-width: 1200px) { .article-aside .side-card__body { gap: 8px; padding: 16px; } .article-aside .side-card__title { font-size: 24px; } .article-aside .side-card__text { display: block; color: #e8edf6; } .article-aside .side-card__btn { min-height: 40px; padding: 0 16px; font-size: 14px; } } /* Maria's continent map (inc/continent-map.php): a card like the countries box under it; the hover label is the plugin's tooltip holding our flag + name + number of guides. */ .continent-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px; } .continent-map .map_wrapper { margin: 0; } .lg-map-tip { display: flex; align-items: center; gap: 10px; padding: 2px 4px; font: 400 14px/1.25 var(--font-text); white-space: nowrap; } .lg-map-tip__flag { font-size: 26px; line-height: 1; } .lg-map-tip__text { display: grid; } .lg-map-tip b { font-weight: 700; font-size: 15px; } .lg-map-tip small { font-size: 13px; opacity: .85; } /* The same sidebar on the homepage and country pages (owner, 25 Sept; front-page.php, category.php): after the sections on phones and tablets, a 300 px column beside them from 1200 px. As beside an article, it FLOATS, so the sections narrow beside it and widen again once it ends; the photo at the top stays full width. */ .aside-layout { display: flex; flex-direction: column; } .aside-layout > .article-aside { margin-bottom: 8px; } @media (min-width: 1200px) { .aside-layout { display: flow-root; width: var(--page); margin-inline: auto; } .aside-layout > .article-aside { margin: 56px 0 40px 40px; } /* level with the first section's content */ .aside-layout > .article-aside:has(+ .section-first) { margin-top: 24px; } .aside-layout > .article-aside:has(+ .section-tight) { margin-top: 0; } .aside-layout > :not(.article-aside) { display: flow-root; } .aside-layout > :not(.article-aside) > .wrap { width: auto; } } /* The newsletter card at the end of the sidebar (mu-plugins/lifeguin-newsletter-sidebar.php, owner's preview until Maria says yes). The plugin styles it for travelore's #secondary only; here it is a card like Penguin Live Cams, in the theme's colours and dark mode, with the site's yellow Newsletter button. */ .article-aside .lg-nls { display: grid; gap: 10px; justify-items: center; max-width: 420px; margin-inline: auto; padding: 22px 20px 18px; background: var(--purple-soft); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); text-align: center; } .article-aside .lg-nls > * { margin: 0; } .article-aside .lg-nls .lg-nls__icon { font-size: 30px; line-height: 1; } .article-aside .lg-nls .lg-nls__title { font: 400 26px/1.1 var(--font-display); letter-spacing: .01em; text-transform: none; color: var(--purple); } .article-aside .lg-nls .lg-nls__text { font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 34ch; text-wrap: balance; } .article-aside .lg-nls a.lg-nls__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin-top: 4px; padding: 0 20px; border-radius: 12px; background: var(--yellow); color: var(--yellow-ink); font: 700 16px/1 var(--font-text); text-decoration: none; box-shadow: 0 6px 16px rgba(247, 195, 44, .35); } .article-aside .lg-nls a.lg-nls__btn:hover { background: var(--yellow-hover); } .article-aside .lg-nls .lg-nls__small { font-size: 13px; line-height: 1.4; color: var(--muted); } @media (min-width: 1200px) { .article:has(.article-aside), .page-article:has(.article-aside) { --wide: 1128px; } .article-body:has(> .article-aside) { display: flow-root; width: min(1128px, 100% - 32px); margin-inline: auto; } .article-aside { float: right; width: 300px; margin: 32px 0 32px 48px; grid-template-columns: 1fr; gap: 20px; } .article-aside .wp-block-image img { max-height: none; } .article-body:has(> .article-aside) > .article-main > :is(.glance, .prose, .share) { width: auto; margin-inline: 0; } .article-body:has(> .article-aside) .glance { display: flow-root; } .article-body:has(> .article-aside) .prose > :is(.alignwide, .alignfull, .nfd-container, .wp-block-columns, .wp-block-jetpack-tiled-gallery, .wp-block-gallery, .wp-block-ultimate-post-gallery) { width: auto; margin-left: 0; margin-right: 0; } .article-body:has(> .article-aside) .prose > :is(div, figure, section, form, details, blockquote, hr, pre, iframe, p:has(img:not(.emoji), iframe, video, object, embed), :is(h2, h3, h4, h5, h6).has-background, ul.has-background, ol.has-background):not([class*="is-layout-flex"], [class*="is-layout-grid"], .wp-block-columns, .wp-block-buttons, .wp-block-cover, .wp-block-gallery, .wp-block-social-links, .wp-block-image.aligncenter, .alignleft, .alignright) { display: flow-root; } /* WordPress core gives spacers, centred figures, embeds, tiled galleries and PostX images `clear: both`, which would send each of them BELOW the sidebar and leave an empty column beside it (measured: the first spacer after the contents box jumped 1,100–1,500 px on 5 of 6 pages). Beside the sidebar nothing in the article clears it; the article's own end (.prose::after) still does. */ .article-body:has(> .article-aside) .prose > * { clear: none !important; } /* 27 Sept 2026: centred text that starts beside the sidebar and runs on below it centred its first lines in the text column and the rest on the full width, so a centred list stepped to the right halfway down (Penguin Stones page, "What You Can Do"). As its own block it keeps one width top to bottom; left-aligned text still wraps. */ .article-body:has(> .article-aside) .prose > :is(p, h2, h3, h4, h5, h6):is([style*="text-align: center"], [style*="text-align:center"], .has-text-align-center) { display: flow-root; } /* A full-width separator is `width:100% !important` (nfd-utilities.css: .is-style-wide.wp-block-separator), i.e. 1128 px, so it could not sit beside the sidebar and dropped below it, leaving an empty column. */ .article-body:has(> .article-aside) .prose > hr:is(.is-style-wide, :not(.wp-block-separator)) { width: auto !important; margin-inline: 0; } } /* The heading that repeats the title (decision 6): marked by inc/content-filters.php, hidden only when chosen. */ .lg-hide-repeat .prose .lg-repeats-title { display: none; } /* DARK sections: their own colours win over everything above. */ .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .wp-block-cover:not(.is-light), .has-background.has-text-color) :is(h2, h3, h4, h5, h6, strong, p, li) { color: inherit; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .wp-block-cover:not(.is-light)) :is([style*="f7c32c" i], [style*="ffcc00" i], [style*="rgb(247, 195, 44)" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--yellow) !important; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .wp-block-cover:not(.is-light)) a:not(.wp-block-button__link):not(.wp-element-button):not([class*="btn"]) { color: #fff; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary) li::marker { color: var(--yellow); } .prose :is(h2, h3, h4, h5, h6).has-text-color, .prose :is(h2, h3, h4, h5, h6).has-text-color * { color: inherit; } .prose .has-text-color > .ultp-heading-inner, .prose .has-background :is(h2, h3, h4, h5, h6) { color: inherit; } /* MARIA'S SECTIONS keep today's look (owner, 25 Sept 2026: "her fonts + yellow back"): inside any Wonder Blocks group (a class starting nfd-: Review, Hotel surroundings, Quick facts, Our waddle, Pro tips, Book your room …) the text is Merriweather Sans, the headings Merriweather, and the yellow she typed stays her yellow (a deeper gold of it on her light cards, see below) instead of the amber used elsewhere on the page. Her nfd-text-* size classes are !important and still win; dark sections keep the rules above. */ .prose .wp-block-group[class*="nfd-"] { --lg-maria-text: 'Merriweather Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --lg-maria-head: var(--font-display); /* was Merriweather; Lilita One since 27 Sept 2026 */ font-family: var(--lg-maria-text); font-size: 16px; line-height: 1.7; } .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6), .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6) * { font-family: var(--lg-maria-head) !important; letter-spacing: 0; } .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6), .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6) * { font-weight: 400 !important; letter-spacing: .01em; } .prose .wp-block-group[class*="nfd-"] h3 { font-size: 26px; line-height: 1.3; } .prose .wp-block-group[class*="nfd-"] :is(.btn, .wp-block-button__link, .wp-element-button, table) { font-family: var(--lg-maria-text); } /* Her yellow on her LIGHT cards and sections (white, light grey) read at 1.5:1 — owner, 25 Sept: "update Maria's yellow on white cards to increase the readability". There it is a deeper gold of the same hue: headings --maria-gold (3.3:1, large text), everything smaller --maria-gold-text (5:1). On her DARK sections (dark / darker / primary, a black background, a dark cover) the bright yellow she chose stays; a light card inside a dark section is gold again. */ .prose .wp-block-group[class*="nfd-"] :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--maria-gold-text) !important; } .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6):is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color), .prose .wp-block-group[class*="nfd-"] :is(h2, h3, h4, h5, h6) :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--maria-gold) !important; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color), .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is(h2, h3, h4, h5, h6):is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color), .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is(h2, h3, h4, h5, h6) :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--yellow) !important; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is(.is-style-nfd-theme-white, .is-style-nfd-theme-light, .nfd-theme-white, .nfd-theme-light) :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--maria-gold-text) !important; } .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is(.is-style-nfd-theme-white, .is-style-nfd-theme-light, .nfd-theme-white, .nfd-theme-light) :is(h2, h3, h4, h5, h6):is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color), .prose :is(.is-style-nfd-theme-dark, .is-style-nfd-theme-darker, .is-style-nfd-theme-primary, .nfd-theme-dark, .nfd-theme-darker, .nfd-theme-primary, .has-black-background-color, .wp-block-cover:not(.is-light)) :is(.is-style-nfd-theme-white, .is-style-nfd-theme-light, .nfd-theme-white, .nfd-theme-light) :is(h2, h3, h4, h5, h6) :is([style*="f7c32c" i], [style*="rgb(247, 195, 44)" i], [style*="ffcc00" i], [style*="ffc000" i], .has-luminous-vivid-amber-color, .has-vivid-yellow-color) { color: var(--maria-gold) !important; } .prose .wp-block-group[class*="nfd-"] a:is([style*="color" i], .has-text-color) { text-decoration: none; } .prose .wp-block-group[class*="nfd-"] :is(ul, ol) li::marker { color: inherit; } /* ── country, continent, archive ─────────────────────────────────────────────────────────────────────────────── */ .country-hero { position: relative; color: #fff; background: var(--navy); overflow: hidden; } .country-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15, 23, 42, .85) 0%, rgba(15, 23, 42, .35) 70%); } .country-hero .wrap { position: relative; z-index: 2; padding: 64px 0 56px; } .country-hero h1 { font: 400 clamp(40px, 7vw, 72px)/1 var(--font-display); margin: 10px 0 12px; letter-spacing: .01em; color: #fff; } .country-hero p { max-width: 50ch; margin: 0; font-size: 19px; color: #e8edf6; } .country-hero .facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .country-hero .facts span { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 8px 14px; font-weight: 600; } .whento { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 24px; display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; } .whento h2 { font: 400 24px/1.1 var(--font-display); color: var(--ink); margin: 0 0 4px; } .whento p { margin: 0; color: var(--muted); font-size: 15px; } .whento p a { white-space: nowrap; } /* "Travel calendar ›" never breaks in two */ .months12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; } .months12 i { font: 500 11px/36px var(--font-label); text-align: center; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-style: normal; } .months12 i.best { background: var(--yellow); color: var(--navy); } @media (max-width: 700px) { .whento { grid-template-columns: 1fr; } .months12 { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 600px) { .country-hero .wrap { padding: 40px 0 34px; } .country-hero p { font-size: 17px; } .country-hero .facts span { font-size: 14px; padding: 6px 12px; } } .tabs { display: flex; gap: 8px; flex-wrap: wrap; } .tabs a { text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-weight: 700; color: var(--ink); font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; } .tabs a:hover { border-color: var(--yellow); } .tabs a span { font: 500 12px var(--font-label); color: var(--muted); margin-left: 6px; } .stone-card .card-media { aspect-ratio: 1; } .stone-card .num { font: 400 20px/1 var(--font-display); color: var(--amber); } .pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 28px 0 0; } .pagination .page-numbers { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; } .pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); } /* ── search ──────────────────────────────────────────────────────────────────────────────────────────────────── */ .search-head { padding: 36px 0 12px; } .search-head h1 { font: 400 clamp(28px, 4vw, 40px)/1.1 var(--font-display); color: var(--ink); margin: 0 0 16px; } .results { display: grid; gap: 9px; } /* halved with the card grids (27 Sept 2026) */ .results .card-title { font-size: 20px; } .results .card-text p { margin: 0; color: var(--ink-2); font-size: 16px; } .results mark { background: var(--mark); color: inherit; padding: 0 .1em; border-radius: 3px; } .results .lg-ss-jump { font-weight: 700; color: var(--link); font-size: 15px; display: inline-block; margin-top: 6px; } /* ── footer ──────────────────────────────────────────────────────────────────────────────────────────────────── */ .site-footer { background: var(--navy); color: #c7d2e4; margin-top: 56px; } .footer-cols { padding: 44px 0 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } .footer-h { font: 500 12px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 12px; } .site-footer a { color: #e8edf6; text-decoration: none; display: block; padding: 6px 0; font-size: 15px; } .site-footer a:hover { text-decoration: underline; text-decoration-color: var(--yellow); } .site-footer .brand { display: flex; } .site-footer .brand b { color: #fff; } .site-footer .brand small { color: #c7d2e4; white-space: normal; } .site-footer p { font-size: 15px; margin: 12px 0 0; max-width: 36ch; } .site-footer .legal { border-top: 1px solid rgba(255, 255, 255, .12); padding: 16px 0 24px; font-size: 13px; } .site-footer .legal a { display: inline; padding: 0; font-size: 13px; } .site-footer .footer-menu { display: inline; list-style: none; margin: 0; padding: 0; } .site-footer .footer-menu li { display: inline; } /* The logos from travelore's footer (the shop, the Global Penguin Society), shown as they are: they were made for a dark footer (the Global Penguin Society logo is white on transparent), and the footer is navy in light and dark mode. */ .footer-cols:has(> .footer-logos) { grid-template-columns: 1.4fr 1fr 1fr 1fr auto; } .footer-logos { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .footer-logos .footer-logo { margin: 0; } .site-footer .footer-logos a { display: block; padding: 0; } .footer-logos img { display: block; width: auto !important; height: 72px !important; max-width: 180px !important; object-fit: contain; border-radius: 10px; } /* !important: the widget writes height:auto inline */ /* phones: the text first, then two by two (the logos beside Follow); after the rules above so it wins */ @media (max-width: 800px) { .footer-cols, .footer-cols:has(> .footer-logos) { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } } /* ── plugins that print into these pages ─────────────────────────────────────────────────────────────────────── */ /* The cookie banner (WPConsent) on phones: it covered ~42% of the first screen with 30 px buttons. Smaller text and the three choices side by side at the same size (Reject stays as easy as Accept), 44 px tall. Same words and order; styled through the parts the plugin exposes on its shadow DOM, so the plugin is untouched. */ @media (max-width: 600px) { #wpconsent-container::part(wpconsent-banner) { padding: 12px 16px; gap: 10px; } #wpconsent-container::part(wpconsent-banner-body) { font-size: 14px; line-height: 1.45; } #wpconsent-container::part(wpconsent-banner-footer) { flex-direction: row; gap: 8px; } #wpconsent-container::part(wpconsent-button-preferences), #wpconsent-container::part(wpconsent-button-cancel), #wpconsent-container::part(wpconsent-button-accept) { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 6px 4px; font-size: 14px; } } /* lifeguin-related-posts.php, when it is left inside the text (related_cards off) */ .prose .lg-related { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; } .prose .lg-related__heading { font: 400 24px/1.15 var(--font-display) !important; color: var(--ink) !important; } /* the About me signup box (lifeguin-newsletter-inline.php) */ .prose .lg-newsletter { background: var(--purple-soft) !important; border: 0 !important; border-radius: 20px !important; } .prose .lg-newsletter__title { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--purple) !important; } /* the travel calendar and the newsletter welcome page print their own
inside header/footer */ .lg-wtg-page .content-area { width: var(--page); margin: 0 auto; padding: 24px 0 0; } .lg-nl-welcome h1 { font: 400 clamp(30px, 4.6vw, 46px)/1.08 var(--font-display); color: var(--ink); } /* forms and buttons from plugins take the theme's type */ button, input, select, textarea { font-family: inherit; } /* The live newsletter box on About me (lifeguin-newsletter-inline.php, Mailchimp until the Brevo switch): the theme's fields and yellow button instead of the plugin's plain grey ones. */ .lg-newsletter input.mc_input, .lg-newsletter input[type="email"], .lg-newsletter input[type="text"] { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font: 500 16px var(--font-text); background: var(--surface); color: var(--ink); } .lg-newsletter input[type="submit"], .lg-newsletter .mc_signup_submit_button { appearance: none; min-height: 48px; padding: 0 28px; border: 0; border-radius: 12px; background: var(--yellow); color: var(--yellow-ink); font: 700 16px/1 var(--font-text); cursor: pointer; box-shadow: 0 6px 16px rgba(247, 195, 44, .35); } .lg-newsletter input[type="submit"]:hover, .lg-newsletter .mc_signup_submit_button:hover { background: var(--yellow-hover); } /* ── dark mode ─────────────────────────────────────────────────────────────────────────────────────────────────── */ /* Owner, 25 Sept 2026: "introduce white / dark mode". As on Penguin Stones: 'auto' follows the device, the header switch (sun / moon / half disc) picks light, dark or "as my device"; inc/setup.php decides before paint and stamps , which is the only thing these rules read. Chrome that is already dark (the photo heroes, the navy band, the footer, the Listen button) keeps its colours; surfaces, text, lines and links swap. */ :root[data-scheme="dark"] { --tile-paper: #1b263d; --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --line: #26324a; --chrome-line: rgba(255, 255, 255, .18); --chrome-hover: rgba(247, 195, 44, .16); --chrome-accent: #F7C32C; --bg: #0b1220; --surface: #121b2e; --surface-2: #0f172a; --yellow-ink: #0f172a; --amber: #f5bf3a; /* yellow words outside Maria's sections: the brand yellow reads on dark as it is */ --maria-gold: #f7c32c; --maria-gold-text: #f7c32c; /* her own yellow, bright again on her (now dark) cards */ --purple: #d9b3e0; --purple-soft: #221a2b; --teal: #6cc1c7; --link: #8ec2ff; --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35); --shadow-md: 0 14px 34px rgba(0, 0, 0, .5); --header-bg: rgba(11, 18, 32, .92); --tint-yellow: rgba(247, 195, 44, .14); --tint-yellow-ink: #f7d774; --tint-yellow-ink-2: #e8dcb4; --mark: rgba(247, 195, 44, .32); --purple-ink: #eadcef; --purple-ink-2: #c9b5cf; color-scheme: dark; } /* The switch: one 40 px circle beside search at every width. Its icon is the current choice; without JavaScript (no data-scheme) it has nothing to switch, so it hides. */ .theme-btn .icon { display: none; } .theme-btn:not([data-choice]) .icon-sun, .theme-btn[data-choice="light"] .icon-sun, .theme-btn[data-choice="dark"] .icon-moon, .theme-btn[data-choice="system"] .icon-auto { display: block; } html:not([data-scheme]) .theme-btn { display: none; } .site-header > .wrap > .theme-btn { flex: none; } /* The header's buttons as on Penguin Stones (owner, 25 Sept: switching between the sites should feel the same): search and the light/dark switch are 38 px circles with a 1 px outline, no fill, 18 px icons; the menu button is Penguin Stones' three bars (24 × 2.5 px, 5 px apart) in a 42 px target, turning into a cross when open. */ .site-header > .wrap > .icon-btn { width: 38px; height: 38px; padding: 0; background: transparent; border-color: var(--chrome-line); } .site-header > .wrap > .icon-btn svg { width: 18px; height: 18px; } .menu-btn { width: 42px; height: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; } .menu-btn span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .18s, opacity .18s; } .menu-drawer[open] > .menu-btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .menu-drawer[open] > .menu-btn span:nth-child(2) { opacity: 0; } .menu-drawer[open] > .menu-btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .menu-btn span { transition: none; } } /* The bar's width and side margins as on Penguin Stones at every size (owner, 26 Sept: "on mobile it is good but not on the desktop"): up to 1,600 px wide, 92% of the screen, 24 px inside (18 px from 960 px down). So Miško and the buttons sit where Penguin Stones' do; below the bar the page keeps its own 1,200 px column. Parts 8 px apart, as there; the switch and the phone menu are one pair, 2 px apart. */ .site-header > .wrap { width: min(1600px, 92vw); padding-inline: 24px; gap: 8px; } @media (max-width: 960px) { .site-header > .wrap { padding-inline: 18px; } } @media (max-width: 900px) { .site-header > .wrap > .menu-drawer { margin-left: -6px; } } /* The menu words and the Newsletter button set like Penguin Stones' STONES · COUNTRIES … and ADD TO MAP: IBM Plex Mono capitals, 13 px bold, 0.6 px apart, 10 × 14 px padding, a light background on hover; the button 14–16 px, 10 × 20 px, 6 px corners. Only the bar's own entries — the dropdown panels keep their own type. */ .nav .nav-menu { gap: 8px; } .nav .nav-menu > li > a, .nav .nav-menu > li > details > summary { font: 700 13px/1.7 var(--font-label); letter-spacing: .6px; text-transform: uppercase; padding: 10px 14px; border: 0; border-radius: 6px; transition: color .15s, background .15s; } /* hover = a yellow highlight with dark letters (yellow letters on the white bar would be ~1.6:1); the open or current item keeps a pale yellow */ .nav .nav-menu > li > a:hover, .nav .nav-menu > li > details > summary:hover { color: var(--yellow-ink); background: var(--yellow); } .nav .nav-menu > li > details > summary.on, .nav .nav-menu > .current-menu-item > a, .nav .nav-menu > li > details[open] > summary { background: var(--chrome-hover); } .nav .nav-menu > li > details > summary .icon-chev { color: currentColor; } .site-header > .wrap > .btn { min-height: 0; padding: 10px 20px; border-radius: 6px; font: 700 clamp(14px, 1.1vw, 16px)/1.7 var(--font-label); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(247, 195, 44, .28); transition: background .15s, transform .15s; } .site-header > .wrap > .btn:hover { transform: translateY(-1px); } .site-header > .wrap > .icon-btn:hover { border-color: var(--yellow); background: var(--yellow); color: var(--yellow-ink); } /* Maria's LIGHT sections (white cards, light grey bands) become dark surfaces: they are drawn from the Wonder Blocks colour variables (nfd-utilities.css), so remapping the variables is enough. Her dark sections are already dark and keep their colours; a card stays a step lighter than its band. */ :root[data-scheme="dark"] .prose { --wndb--color--surface: var(--surface); --wndb--color--text: var(--ink-2); --wndb--color--text--contrast: var(--ink); --wndb--color--text--faded: var(--muted); --wndb--color--borders: var(--line); --wndb--color--borders-light: var(--line); --wndb--color--subtle: var(--line); } :root[data-scheme="dark"] .prose :is(.is-style-nfd-theme-light, .nfd-theme-light) { --wndb--color--surface: var(--surface-2); --wndb--color--text: var(--ink-2); --wndb--color--text--contrast: var(--ink); --wndb--color--text--faded: var(--muted); --wndb--color--borders: var(--line); --wndb--color--borders-light: var(--line); --wndb--color--subtle: var(--line); } :root[data-scheme="dark"] .prose :is(.is-style-nfd-theme-white, .nfd-theme-white) { --wndb--color--surface: #16213a; --wndb--color--text: var(--ink-2); --wndb--color--text--contrast: var(--ink); --wndb--color--text--faded: var(--muted); --wndb--color--borders: var(--line); --wndb--color--borders-light: var(--line); --wndb--color--subtle: var(--line); } /* Text colours typed into posts (~200: black, #333, #555, #0e101a …) would vanish on dark: they take the text colour. Boxes pasted with a white background (31) become dark surfaces; the 36 yellow-highlight boxes stay yellow with dark text, as they were written. */ :root[data-scheme="dark"] .prose :is([style*="color:#000" i], [style*="color: #000" i], [style*="color:#333" i], [style*="color: #333" i], [style*="color:#555" i], [style*="color: #555" i], [style*="#0e101a" i], [style*="color:rgb(0, 0, 0)" i], [style*="color: rgb(0, 0, 0)" i], [style*="rgb(14, 16, 26)" i], [style*="#6b6b6b" i], [style*="color: #808080" i], [style*="#333300" i], .has-black-color, .has-contrast-color) { color: var(--ink-2) !important; } :root[data-scheme="dark"] .prose :is([style*="background-color:#fff" i], [style*="background-color: #fff" i], [style*="background-color:rgb(255, 255, 255)" i], [style*="background-color: rgb(255, 255, 255)" i], [style*="background:#fff" i], [style*="background: #fff" i], .has-white-background-color, .has-base-background-color) { background-color: var(--surface) !important; } :root[data-scheme="dark"] .prose :is([style*="background-color:#f7c32c" i], [style*="background-color: #f7c32c" i], [style*="background:#f7c32c" i], [style*="background: #f7c32c" i], .has-luminous-vivid-amber-background-color, .has-vivid-yellow-background-color), :root[data-scheme="dark"] .prose :is([style*="background-color:#f7c32c" i], [style*="background-color: #f7c32c" i], [style*="background:#f7c32c" i], [style*="background: #f7c32c" i], .has-luminous-vivid-amber-background-color, .has-vivid-yellow-background-color) * { color: #0f172a !important; } /* striped tables (core's grey stripe) */ :root[data-scheme="dark"] .prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--surface-2); } :root[data-scheme="dark"] .prose :is(table, th, td) { border-color: var(--line); } /* See-through pictures in dark mode (owner, 26 Sept: "transparent background would look nicer"): shown as they are, on the dark page — no more white plate behind every PNG, which boxed in coloured drawings and hid white-ink logos. The measured exceptions (inc/image-ink.php): black-ink logos flip to white ink; logos with black AND white parts keep a light plate. */ .lg-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } :is(.prose, .article-aside) img.lg-ink-dark { filter: url(#lg-alpha-clean); } :root[data-scheme="dark"] :is(.prose, .article-aside) img.lg-ink-dark { filter: url(#lg-alpha-clean) invert(1) hue-rotate(180deg); } :root[data-scheme="dark"] :is(.prose, .article-aside) img.lg-ink-mixed { background-color: #fff; border-radius: 12px; } /* PostX paints the contents box's inner list white per block; the box's own frame is already a surface. */ :root[data-scheme="dark"] .prose .ultp-block-toc :is(.ultp-block-toc-body, .ultp-block-wrapper, .ultp-toc-lists, ul) { background: transparent !important; } /* The About me sign-up box: the plugin prints its text in dark grey for a light box. */ :root[data-scheme="dark"] .prose .lg-newsletter, :root[data-scheme="dark"] .prose .lg-newsletter :is(p, span, label, strong, small, div, a:not(.btn)) { color: var(--ink-2) !important; } :root[data-scheme="dark"] .prose .lg-newsletter .lg-newsletter__title { color: var(--purple) !important; } :root[data-scheme="dark"] .prose .lg-newsletter :is(input[type="submit"], .mc_signup_submit_button) { color: var(--yellow-ink) !important; } :root[data-scheme="dark"] .lg-newsletter .mc_input { border-color: var(--line) !important; } /* the navy Listen pill on the dark page: a hairline so it keeps its shape */ :root[data-scheme="dark"] .listen { box-shadow: inset 0 0 0 1px var(--line); } /* The travel calendar pages (mu-plugins/assets/when-to-go/when-to-go.css) write their colours in for a light page; on dark they take the theme's. The purple current month / best months / button stay purple with white text. */ :root[data-scheme="dark"] .lg-wtg, :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-intro, .lg-wtg-label, .lg-wtg-m, .lg-wtg-h3, .lg-wtg-card__link, .lg-wtg-post__link, .lg-wtg-item__name, .lg-wtg-facts dd, .lg-wtg-az summary, .lg-wtg-nl__text) { color: var(--ink-2); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-h2, .lg-wtg-nl__h) { color: var(--ink); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-crumbs, .lg-wtg-m__n, .lg-wtg-m__num, .lg-wtg-card__stay, .lg-wtg-jump, .lg-wtg-item__meta, .lg-wtg-facts dt, .lg-wtg-none, .lg-wtg-az__n, .lg-wtg-item__note) { color: var(--muted); } :root[data-scheme="dark"] .lg-wtg :is(a:not([class]), .lg-wtg-card__posts, .lg-wtg-item__posts, .lg-wtg-m__now), :root[data-scheme="dark"] .lg-wtg .lg-wtg-item__name:hover { color: var(--purple); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-pick, .lg-wtg-m, .lg-wtg-facts, .lg-wtg-az, .lg-wtg-nl) { background: var(--surface); border-color: var(--line); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-list, .lg-wtg-item) { border-color: var(--line); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-card__img, .lg-wtg-post__img) { background: var(--surface-2); } :root[data-scheme="dark"] .lg-wtg .lg-wtg-cal__m a { background: var(--surface-2); color: var(--muted); } :root[data-scheme="dark"] .lg-wtg .lg-wtg-find select { background: var(--surface); color: var(--ink); border-color: var(--line); } /* The calendar's "Preview: this page is not public yet" note is about the calendar switch; in this look the whole site is a preview, so it only confuses (owner, 25 Sept). Hidden here; travelore still shows it to editors. */ .lg-wtg .lg-wtg-preview { display: none; } :root[data-scheme="dark"] .lg-wtg .lg-wtg-stones { background: rgba(40, 114, 120, .16); border-color: rgba(108, 193, 199, .3); } :root[data-scheme="dark"] .lg-wtg .lg-wtg-stones a { color: var(--teal); } :root[data-scheme="dark"] .lg-wtg :is(.lg-wtg-m[aria-current], .lg-wtg-m[aria-current] *, .lg-wtg-cal__m.is-best a, .lg-wtg-btn) { color: #fff; } :root[data-scheme="dark"] .lg-wtg .lg-wtg-m[aria-current] { background: #7b4585; border-color: #7b4585; } /* search: the smart search's highlight (mu-plugins/lifeguin-smart-search.php) is pale yellow under light text */ :root[data-scheme="dark"] mark { background: var(--mark) !important; color: inherit; } /* ── 27 Sept 2026: Work With Me round (the page keeps the sidebar and the normal template) ──────────────────────────────────────────────────────────────────────────── Text on Maria's yellow BACKGROUND is dark. The yellow-text rules above ([style*="f7c32c"]) also match an element whose style is a yellow background, so its text turned yellow on yellow: Work With Me's "Contact us" pill and Penguin Live Cams' unlinked "Living Coasts, UK" heading. Same colour as the dark-mode rule for yellow backgrounds. */ .prose :is([style*="background-color:#f7c32c" i], [style*="background-color: #f7c32c" i], [style*="background:#f7c32c" i], [style*="background: #f7c32c" i]), .prose .wp-block-group[class*="nfd-"] :is([style*="background-color:#f7c32c" i], [style*="background-color: #f7c32c" i], [style*="background:#f7c32c" i], [style*="background: #f7c32c" i]) { color: #0f172a !important; } /* A row of collaboration photos (class lg-collab-photos on a Columns block): every photo the same size. */ .prose .lg-collab-photos .wp-block-image img { display: block; width: min(100%, 340px) !important; height: auto !important; margin-left: auto; margin-right: auto; } /* A Button block with class lg-btn-yellow: the site's yellow button. */ .prose .wp-block-button.lg-btn-yellow > .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 12px; background: var(--yellow); color: var(--yellow-ink); font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px rgba(247, 195, 44, .35); } .prose .wp-block-button.lg-btn-yellow > .wp-block-button__link:hover { background: var(--yellow-hover); }