/* TMN currently uses the shared tokens in globals.css. Add :root overrides or tenant-only classes here when needed. */ /* GlobalSettings ▸ Site Setting ▸ Skin Ads: RootLayout.tsx sets --container-max-width to 1056px (skin ads on) or 1216px (off) on . Redeclared here (theme.css, injected per-request via ThemeCss — see src/app/(frontend)/lib/ThemeCss.tsx) rather than relying solely on the base rule in globals.css, since this file bypasses Next.js's CSS bundling/cache entirely. */ .container-1280 { max-width: var(--container-max-width, 1216px); background: white; /* width: 100%; */ } html { overscroll-behavior: none; } .has-skin-ad .site-footer, .has-skin-ad .site-header, .has-skin-ad .scroll-header, .has-skin-ad .newsletter-box , .has-skin-ad .pre-footer { background: none; border: none; box-shadow: none; } .has-skin-ad .site-footer .container-1280, .has-skin-ad .site-header .container-1280, .has-skin-ad .scroll-header .container-1280, .has-skin-ad .newsletter-box .container-1280, .has-skin-ad .pre-footer .container-1280 { background: white; } .has-skin-ad .scroll-header.top-0 .container-1280 { border-bottom: 1px solid var(--color-neutral-300); } .has-skin-ad .site-footer .container-1280 { border-top: 1px solid var(--color-neutral-300); } .has-skin-ad:has(.scroll-header.\-top-\[66px\]) .site-header > .container-1280{ border-bottom: 1px solid var(--color-neutral-300); } /* --------------------------------------------------------------------------- * Baseline styling for the CKEditor "Insert block" blocks, loaded by every tenant. * * Gallery and Sponsor use the WordPress class names Pedestrian's content migration * produced, because that markup already exists in migrated posts and the block * definitions reproduce it verbatim. The rules here are the subset those blocks need to * lay out correctly anywhere; Pedestrian additionally loads wp-content.css *after* this * file, so its own migration-accurate rules still win and that site is unchanged. * * CTA is the exception — it is markup this plugin writes rather than inherits, so it owns * its own `pb-cta-*` classes and is styled only here. * ------------------------------------------------------------------------- */ /* ── Gallery ─────────────────────────────────────────────────────────────── */ .ckeditor-richtext .wp-block-gallery.has-nested-images { display: flex; flex-wrap: wrap; align-items: normal; gap: var(--wp--style--unstable-gallery-gap, 16px); margin: 2em 0; box-sizing: border-box; } .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image { box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; position: relative; margin: 0; max-width: 100%; /* Clips the hover zoom below to the image's own box instead of spilling into neighbours. */ overflow: hidden; /* Two-up until the columns- modifier below narrows it. */ width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2); } .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image img { display: block; height: auto; max-width: 100%; width: auto; transition: transform 0.3s ease; } /* Only zooms when the image is actually a link — plain images stay put on hover. */ .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image a:hover img { transform: scale(1.06); } .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { position: static; display: table-caption; caption-side: bottom; outline-offset: -1px; margin: 0; padding: 0.6em; overflow: visible; color: inherit; font-size: 0.75em; font-style: italic; font-weight: normal; text-align: center; text-decoration: none; text-shadow: none; background-color: #0000000d; } /* Higher specificity than any generic ".ckeditor-richtext a" link style — the caption sits inside the image's own link (so the whole image is clickable) but must not look like one. */ .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image a figcaption { font-weight: normal; text-decoration: none; } /* Underline only shows up on hover, as the cue that the caption is part of the link. */ .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image a:hover figcaption { text-decoration: underline; } .ckeditor-richtext .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > a, .ckeditor-richtext .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image > div { display: flex; flex-grow: 1; } .ckeditor-richtext .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image a, .ckeditor-richtext .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img { flex: 1 0 0%; height: 100%; width: 100%; object-fit: cover; } .ckeditor-richtext .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image { width: 100%; } /* Single column below 600px — matching WordPress's own gallery breakpoint, so a 4-up gallery doesn't become four slivers on a phone. */ @media (min-width: 600px) { .ckeditor-richtext .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image { width: calc(33.33333% - var(--wp--style--unstable-gallery-gap, 16px) * 0.66667); } .ckeditor-richtext .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * 0.75); } } @media (max-width: 599px) { .ckeditor-richtext .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100%; } } /* ── Sponsor ─────────────────────────────────────────────────────────────── */ .ckeditor-richtext .wp-block-tiptip-hyperlink-group-block { margin-top: 24px; margin-bottom: 34px; } .ckeditor-richtext .wp-block-hyperlink-group { display: block; text-decoration: none; } /* Figma sponsor lockup (15226:21553): one left-aligned line — lead-in text, an 8px gap, then the sponsor logo 18px tall. No card, no border, no background, no roundel. Two shapes of published markup have to land on this same layout: - migrated from WordPress — the logo figure comes before the h6, and there is no .premium-native-btyb-wrapper; - written by the CKEditor Sponsor block — h6 first, both nested in that wrapper, plus a Pedestrian roundel figure beside it. `order` below settles the sequence for both. Almost every declaration is !important because the border, padding and logo size it replaces are inline styles on the already-published markup, which a stylesheet cannot outrank any other way. */ .ckeditor-richtext .premium-native-preamble-hyperlink-group, .ckeditor-richtext .native-preamble-hyperlink-group, .ckeditor-richtext .premium-native-preamble-hyperlink-group .wp-block-group, .ckeditor-richtext .native-preamble-hyperlink-group .wp-block-group { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; max-width: none; background-color: transparent; /* Both longhands: published badges carry `border-width` inline, and wp-content.css turns any element with that inline property solid, so the style has to be cleared too. */ border-width: 0 !important; border-style: none !important; border-radius: 0 !important; padding: 0 !important; } /* Lead-in line — Figma "Ped - Trade Gothic LH/Heading 2XS" (16px/700, 1.15, -2%). `trade-gothic-next` is the LT Pro cut in Pedestrian's Adobe kit; tenants that don't load that kit fall through to their own sans, same as .font-ped-heading does. The `p` selector covers the legacy shape, which used a paragraph for this line. */ .ckeditor-richtext .premium-native-preamble-hyperlink-group h6, .ckeditor-richtext .premium-native-preamble-hyperlink-group p, .ckeditor-richtext .native-preamble-hyperlink-group h6, .ckeditor-richtext .native-preamble-hyperlink-group p { order: 1; margin: 0 !important; font-family: 'trade-gothic-next', var(--font-inter), Inter, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.32px !important; text-align: left !important; color: #1d1d1d; } /* 87 of the 90 published badges wrap the whole lockup in a link; it must not recolour. */ .ckeditor-richtext .premium-native-preamble-hyperlink-group a, .ckeditor-richtext .native-preamble-hyperlink-group a { color: inherit; } /* `size-full` is a WordPress image-size marker, but it collides with Tailwind's own size-full utility (width/height:100%) and stretches the figure — hence width/height. */ .ckeditor-richtext .premium-native-preamble-hyperlink-group figure, .ckeditor-richtext .native-preamble-hyperlink-group figure { order: 2; display: flex; align-items: center; justify-content: flex-start; width: auto; height: auto; margin: 0; } /* Logo. The block's "Logo width (px)" writes that width inline and it has to govern, so nothing here is !important — 18px tall is only the Figma default for a logo left unsized. The class is repeated to outweigh wp-content.css's `.wp-block-image img { height: auto }`, which is equally specific and loads later; raising specificity beats it while still yielding to the inline width/height. Matched on `img` rather than `figure img` because the legacy shape puts the logo straight in the row, without a figure. The roundel is the only other image here, and it is hidden below. */ .ckeditor-richtext .premium-native-preamble-hyperlink-group.premium-native-preamble-hyperlink-group img, .ckeditor-richtext .native-preamble-hyperlink-group.native-preamble-hyperlink-group img { width: auto; height: 18px; object-fit: contain; } /* The badge used to sit on a filled card; now it sits on whatever is behind it. The markup still carries WordPress' `has-base-background-color`, kept for fidelity with the badges already published, so this has to outrank it: the compound selector is one class heavier than wp-content.css's `.ckeditor-richtext .has-base-background-color` and therefore wins on Pedestrian too, where that file loads after this one. */ .ckeditor-richtext [data-pb-block='btyb'], .ckeditor-richtext [data-pb-block='btyb'].has-base-background-color { background-color: transparent; color: #1d1d1d; } /* Pedestrian's own roundel, baked into the block's markup and dropped by the new lockup. Matched through the wrapper so it can't also catch the logo figure, which sits at the same depth in the migrated shape. */ .ckeditor-richtext .premium-native-btyb-wrapper > figure.wp-block-image { display: none !important; } /* ── CTA ─────────────────────────────────────────────────────────────────── */ .ckeditor-richtext .pb-cta-wrapper { margin: 20px 0; } .ckeditor-richtext .pb-cta-wrapper--button { text-align: center; } /* Text line: copy left, link right, wrapping to two rows when they no longer fit. (`--textlink` is the class the Layout dropdown labels "Text line" — see definitions.ts.) */ .ckeditor-richtext .pb-cta-wrapper--textlink { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .ckeditor-richtext .pb-cta-copy { flex: 1 1 200px; font-size: 20px; font-weight: 700; line-height: 1.2; color: inherit; } /* Optional icon in front of a text line's copy. */ .ckeditor-richtext .pb-cta-icon { flex-shrink: 0; width: auto; height: 40px; margin: 0; } a.pb-cta-copy:hover, a.pb-cta-copy:focus-visible { text-decoration: underline; } /* Plain-link variant: no colour, no pill. It inherits the article's own text colour so it reads as part of the copy rather than as a call-to-action chip — which is the point of it for things like a terms-and-conditions line. */ .ckeditor-richtext .pb-cta-link { font-size: 16px; font-weight: 600; line-height: 1.4; color: inherit; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .ckeditor-richtext .pb-cta-link:hover, .ckeditor-richtext .pb-cta-link:focus-visible { opacity: 0.7; } /* Helpline card: the old CMS's "Help is available" box — a bold heading line, then one short paragraph per service, with every number and chat link underlined. */ .ckeditor-richtext .pb-cta-wrapper--helpline { border: 1px solid #d9d9d9; border-radius: 16px; padding: 16px 20px; font-size: 14px; line-height: 1.5; } .ckeditor-richtext .pb-cta-wrapper--helpline p { margin: 0 0 12px; font-size: inherit; line-height: inherit; } .ckeditor-richtext .pb-cta-wrapper--helpline p:last-child { margin-bottom: 0; } .ckeditor-richtext .pb-cta-wrapper--helpline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ckeditor-richtext .pb-cta-wrapper--helpline ul, .ckeditor-richtext .pb-cta-wrapper--helpline ol { margin: 0 0 12px; padding-left: 20px; font-size: inherit; line-height: inherit; } .ckeditor-richtext .pb-cta-wrapper--helpline ul { list-style: disc; } .ckeditor-richtext .pb-cta-wrapper--helpline ol { list-style: decimal; } .ckeditor-richtext .pb-cta-wrapper--helpline li:last-child { margin-bottom: 0; } /* `background` and `color` come from the block's own inline style — the colour is picked per block, so there is no class here to carry it. */ .ckeditor-richtext .pb-cta-btn { border-radius: 100px; display: inline-block; font-size: 20px; font-weight: 700; line-height: 1.2; padding: 18px 40px; text-align: center; text-decoration: none; } .ckeditor-richtext .pb-cta-btn:hover, .ckeditor-richtext .pb-cta-btn:focus-visible { opacity: 0.9; } /* ── Media ───────────────────────────────────────────────────────────────── */ /* An image beside a column of text. Ratio and position are independent modifiers, both set as custom properties on the wrapper: `--pb-media-*-basis` is the flex-basis the ratio modifier claims for each column, `--pb-media-*-order` is which side `position` puts it on. Both fall back to an equal, image-first split so an unrecognised modifier still lays out sanely. The mobile block below resets all four at the same (single-class) specificity as the base rule and the modifiers, so it wins purely by appearing last — same trick the gallery breakpoint above uses. */ .ckeditor-richtext .pb-media-wrapper { display: flex; align-items: flex-start; gap: 24px; margin: 2em 0; --pb-media-image-basis: 50%; --pb-media-text-basis: 50%; --pb-media-image-order: 1; --pb-media-text-order: 2; } .ckeditor-richtext .pb-media-wrapper--ratio-33-67 { --pb-media-image-basis: 33.3333%; --pb-media-text-basis: 66.6667%; } .ckeditor-richtext .pb-media-wrapper--ratio-67-33 { --pb-media-image-basis: 66.6667%; --pb-media-text-basis: 33.3333%; } .ckeditor-richtext .pb-media-wrapper--position-right { --pb-media-image-order: 2; --pb-media-text-order: 1; } .ckeditor-richtext .pb-media-wrapper__media { flex: 1 1 var(--pb-media-image-basis); order: var(--pb-media-image-order); min-width: 0; margin: 0; } .ckeditor-richtext .pb-media-wrapper__media img { display: block; width: 100%; height: auto; } .ckeditor-richtext .pb-media-wrapper__text { flex: 1 1 var(--pb-media-text-basis); order: var(--pb-media-text-order); min-width: 0; } .ckeditor-richtext .pb-media-wrapper__heading { margin: 0 0 12px; font-size: 20px; font-weight: 700; line-height: 1.2; } .ckeditor-richtext .pb-media-wrapper__text p { margin: 0 0 12px; } .ckeditor-richtext .pb-media-wrapper__text p:last-child { margin-bottom: 0; } .ckeditor-richtext .pb-media-wrapper__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .ckeditor-richtext .pb-media-wrapper__text ul, .ckeditor-richtext .pb-media-wrapper__text ol { margin: 0 0 12px; padding-left: 20px; } .ckeditor-richtext .pb-media-wrapper__text ul { list-style: disc; } .ckeditor-richtext .pb-media-wrapper__text ol { list-style: decimal; } .ckeditor-richtext .pb-media-wrapper__text li { margin-bottom: 4px; } /* Stacked below 700px — image on top, text under it, in that order regardless of `position`, since there is no "side" left to put the image on. */ @media (max-width: 699px) { .ckeditor-richtext .pb-media-wrapper { flex-direction: column; --pb-media-image-basis: 100%; --pb-media-text-basis: 100%; --pb-media-image-order: 1; --pb-media-text-order: 2; } } /* ── Social embed ────────────────────────────────────────────────────────── */ /* The "Social embed" block, for every source but Brightcove: the block writes the * platform's iframe straight into the content, and this sizes it. It is not sized inline * because processInlineStyles (RichText.tsx) drops `position` and `aspect-ratio`, which is * what a responsive frame takes. The per-source sizes mirror `frameStyle` in * CustomCKEditor5Field/blocks/socialEmbeds.ts, which the admin preview uses instead. */ .ckeditor-richtext .pb-social-embed { margin: 2em 0; } .ckeditor-richtext .pb-social-embed__frame { position: relative; } .ckeditor-richtext .pb-social-embed__frame iframe { display: block; width: 100%; height: 100%; border: 0; } .ckeditor-richtext .pb-social-embed[data-video-source='youtube'] .pb-social-embed__frame { aspect-ratio: 16 / 9; } .ckeditor-richtext .pb-social-embed[data-video-source='tiktok'] .pb-social-embed__frame { aspect-ratio: 9 / 16; max-width: 325px; margin: 0 auto; } /* Instagram and X posts have no fixed shape — text, one image or a carousel all differ — * so they get the heights their platforms' own embeds settle on rather than a ratio. */ .ckeditor-richtext .pb-social-embed[data-video-source='instagram'] .pb-social-embed__frame { height: 640px; max-width: 540px; margin: 0 auto; } .ckeditor-richtext .pb-social-embed[data-video-source='x'] .pb-social-embed__frame { height: 500px; max-width: 550px; margin: 0 auto; } /* ── Social embed: two Brightcove videos ─────────────────────────────────── */ /* Rendered by renderCkEditorContent (RichText.tsx), not written into the content, because * each player is a React component. Two clips only — from three the block becomes a * slider, which brings its own stylesheet (BrightcoveVideoSlider.css). */ .ckeditor-richtext .ped-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 2em 0; } @media (max-width: 640px) { .ckeditor-richtext .ped-video-grid { grid-template-columns: 1fr; } } /* ── Products (client components) ───────────────────────────────────────── */ /* Both the `list` and `carousel` layouts are real React components — ProductsListBlock * and ProductsCarouselBlock — each a straight port of the old Posts/Pages "Products" * Section block's own layout component, with its own Tailwind classes. RichText.tsx swaps * the (empty) `data-pb-block="products"` marker this block writes for whichever one the * saved data picked. Nothing to style here except this one override: * * .content-editor-render/.ckeditor-richtext force every `a` in article content to show an * underline (migrated WordPress copy needs that). These components never want that on the * image link or the button link (button only wants hover:opacity-85, set in the component * itself) — only the title link does, and only on hover. Both reset rules are plain, * non-`!important` CSS, so matching one attribute/class deeper here already outranks them * on specificity alone — no `!important` needed, and none of the Tailwind `!` modifier's * cascade-layer edge cases to worry about. */ .ckeditor-richtext [data-pb-block='products'] a { text-decoration: none; } .ckeditor-richtext [data-pb-block='products'] a.product-title-link:hover { text-decoration: underline; }