/** * Thameside Blocks — layout polish (hero, footer, scroll padding). * * Header: `parts/header.html` (always-on hamburger + Navigation overlay; submenus expand on tap). Styles: `assets/css/site-header.css`. * Menus: Appearance → Menus — assign “Primary Menu” (header + footer use the same location). Footer intros: `footer_text` / * `copyright` in `thameside_site_options`, or edit the Footer template part directly. * * CSS cascade notes (avoid unnecessary `!important`): * - Inline `style=""` on blocks beats almost all author rules — remove spacing from patterns/templates and * control band padding in this file or theme.json instead of fighting inline. * - This stylesheet is enqueued after `global-styles` and `thameside-content-blocks` (see `functions.php`) * so equal-specificity rules here win by source order — prefer longer, scoped selectors over `!important`. * - WordPress global styles use `!important` on some utilities (notably `.has-text-color` vs palette classes); * chained selectors like `.has-white-color.has-text-color` still lose — those palette fixes keep one * intentional `!important` per colour (documented below). * - Header/off‑canvas (`site-header.css`) still overrides Core Navigation with many `!important` rules; * reducing those safely needs a follow‑up pass (layered overrides or theme.json block styles where global). */ :root { --thameside-header-height-mobile: 120px; --thameside-header-height-desktop: 90px; /* Responsive header height token used for page offset (see templates). */ --thameside-header-height: var(--thameside-header-height-mobile); --thameside-transition: cubic-bezier(0.645, 0.045, 0.355, 1); --thameside-primary: #041c49; --thameside-secondary: #e22f2b; --thameside-nav-desktop: 1200px; } /* Fixed header shell (template part wrapper in templates) */ .site-header-area { position: fixed; top: 0; left: 0; right: 0; isolation: isolate; /* * Hero Vimeo iframe gets transforms + Thameside compat may inject `.embed` wrappers — GPU layers * have intermittently painted above z-index ~10k, swallowing the top-right menu toggle visually. */ /* * Some hero/video embeds can create their own compositing layers and end up painting above * “reasonable” z-index values. Keep the header (and its overlay dialog) unequivocally on top. */ z-index: 2147483000; } /* Allow hero/full-bleed blocks to extend past constrained post layout horizontally */ .thameside-main--front .wp-block-post-content, .thameside-main--front { overflow-x: visible; } /* * Transparent home hero chrome — complements `site-header.css` base background on `.thameside-site-header`. * `header-scroll.js` toggles `.sticky` after scroll (mirrors legacy Thameside). */ .thameside-site-header { transition: background-color 0.6s var(--thameside-transition), border-color 0.6s var(--thameside-transition); } body.home .site-header-area .thameside-site-header:not(.sticky) { background-color: transparent !important; } /* * Compact page header (re-uses the existing `thameside/hero` block). * * Apply to Careers via `body.page-id-188`, and allow re-use by adding the class * `th-hero--compact` to any `thameside/hero` block in the editor. */ body.page-id-188 .thameside-content-blocks.block__hero, .thameside-content-blocks.block__hero.th-hero--compact { min-height: unset; height: auto; background: linear-gradient(180deg, rgba(235, 235, 237, 0.92) 0%, rgba(255, 255, 255, 1) 70%) !important; align-items: flex-end; justify-content: flex-start; padding: clamp(2.5rem, 4vw, 4.5rem) 0 clamp(2.5rem, 4vw, 4rem); } body.page-id-188 .thameside-content-blocks.block__hero .block__hero__image, body.page-id-188 .thameside-content-blocks.block__hero .block__hero__video, .thameside-content-blocks.block__hero.th-hero--compact .block__hero__image, .thameside-content-blocks.block__hero.th-hero--compact .block__hero__video { display: none; } body.page-id-188 .thameside-content-blocks.block__hero .block__hero__content, .thameside-content-blocks.block__hero.th-hero--compact .block__hero__content { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 2rem; } body.page-id-188 .thameside-content-blocks.block__hero .block__hero__content h1, .thameside-content-blocks.block__hero.th-hero--compact .block__hero__content h1 { color: var(--wp--preset--color--primary) !important; font-size: clamp(3.2rem, 4vw, 5.6rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0; animation: none; } /* Ensure plugin hero colour overrides don't win on compact headers. */ body.page-id-188 .wp-site-blocks .thameside-content-blocks.block__hero .block__hero__content h1:not(.has-text-color), .wp-site-blocks .thameside-content-blocks.block__hero.th-hero--compact .block__hero__content h1:not(.has-text-color) { color: var(--wp--preset--color--primary) !important; } body.page-id-188 .thameside-content-blocks.block__hero .block__hero__content p, .thameside-content-blocks.block__hero.th-hero--compact .block__hero__content p { color: rgba(4, 28, 73, 0.78); font-size: 1.8rem; line-height: 1.55; margin: 1.25rem 0 0; animation: none; } .thameside-site-header.sticky, body.blog .site-header-area .thameside-site-header, body.single .site-header-area .thameside-site-header, body.error404 .site-header-area .thameside-site-header { background-color: var(--thameside-primary) !important; } /* --- News / archives (Query Loop) — parity with legacy `.blog-posts` grid --- */ .wp-site-blocks .blog-posts { margin-bottom: 8rem; /* Use global theme constrained width (match other pages). */ max-width: none; } .wp-site-blocks .blog-posts__intro { padding: 3.5rem 0; margin-bottom: 2.5rem; border-bottom: 1px solid #eaeaea; text-align: left; } .wp-site-blocks .blog-posts__intro .wp-block-query-title, .wp-site-blocks .blog-posts__intro .wp-block-heading { margin: 0; letter-spacing: -0.02em; } .wp-site-blocks .blog-posts__posts { width: 100%; display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; padding: 0; margin: 0; align-items: stretch; } .wp-site-blocks .wp-block-query + .blog-posts__pagination, .wp-site-blocks .wp-block-query > .blog-posts__pagination { margin-top: 2.5rem; } .wp-site-blocks .wp-block-query { /* Match Careers: content starts right after compact hero. */ padding: 0 0 6rem; } @media (min-width: 768px) { .wp-site-blocks .blog-posts__posts { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (min-width: 1200px) { .wp-site-blocks .blog-posts__posts { /* Always 3 per row on desktop (matches live). */ grid-template-columns: repeat(3, 1fr); gap: 30px; } } .wp-site-blocks .blog-posts__post { width: 100%; position: relative; text-decoration: none; } .wp-site-blocks .blog-posts__posts > li { margin: 0 !important; /* WP global styles add margin between post-template items */ padding: 0; display: flex; } .wp-site-blocks .blog-posts__post { display: flex; flex-direction: column; width: 100%; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(4, 28, 73, 0.12); border-radius: 24px; overflow: hidden; } .wp-site-blocks .blog-posts__post.has-global-padding { /* The Group block adds global side padding; the card image should be full-bleed. */ padding: 0 !important; } .wp-site-blocks .blog-posts__post__content { /* Reduce “floaty” feel: consistent internal rhythm */ gap: 0.35rem; } .wp-site-blocks .blog-posts__post > * { min-width: 0; } .wp-site-blocks .blog-posts__post .wp-block-post-featured-image, .wp-site-blocks .blog-posts__post .wp-block-post-featured-image a { display: block; } .wp-site-blocks .blog-posts__post .wp-block-post-featured-image { margin: 0; overflow: hidden; aspect-ratio: 5 / 3; background: rgba(255, 255, 255, 0.75); width: 100%; } .wp-site-blocks .blog-posts__post.is-layout-constrained > .wp-block-post-featured-image { /* * WordPress constrained layout applies max-width + auto margins to direct children, * which creates “gutters” inside the card. Featured image should be full-bleed. */ max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; justify-self: stretch; } .wp-site-blocks .blog-posts__post .wp-block-post-featured-image a { width: 100%; } .wp-site-blocks .blog-posts__post .wp-block-post-featured-image img { width: 100%; display: block; object-fit: cover; transition: transform 600ms var(--thameside-transition); height: 100%; will-change: transform; } .wp-site-blocks .blog-posts__post:hover .wp-block-post-featured-image img, .wp-site-blocks .blog-posts__post:focus-within .wp-block-post-featured-image img { transform: scale(1.03); } .wp-site-blocks .blog-posts__post__content { position: relative; padding: 1rem 1.25rem 1.25rem; z-index: 2; display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; align-items: flex-start; } .wp-site-blocks .blog-posts__post__content .post-meta { /* Keep date locked left and close to image. */ width: 100%; } .wp-site-blocks .blog-posts__post__content .wp-block-post-title, .wp-site-blocks .blog-posts__post__content .title { /* Make the text block align with the date and CTA (no weird centering). */ width: 100%; } .wp-site-blocks .blog-posts__post__content a { text-decoration: none; } .wp-site-blocks .blog-posts__post__content .post-meta { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; margin-bottom: 0.35rem; flex-wrap: wrap; } .wp-site-blocks .blog-posts__post__content .date { margin: 0; font-size: 14px; color: rgba(4, 28, 73, 0.7); } .wp-site-blocks .blog-posts__post__content .title { line-height: 1.2; margin: 0.4rem 0 0; /* Consistent card rhythm: clamp titles to 2 lines like editorial cards. */ display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wp-site-blocks .blog-posts__post__content .wp-block-post-title { margin: 0; } .wp-site-blocks .blog-posts__post__content .wp-block-post-title a { display: inline; } .wp-site-blocks .blog-posts__post__content .read-more { display: inline-flex; align-items: center; gap: 0.4rem; } .wp-site-blocks .blog-posts__post__content .wp-block-post-excerpt { margin: 0; } .wp-site-blocks .blog-posts__post__content .wp-block-post-excerpt__more-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; } /* Hide excerpt text but keep the more-link (link is inside the excerpt paragraph). */ .wp-site-blocks .blog-posts__post__content .wp-block-post-excerpt__excerpt { margin: 0; font-size: 0; line-height: 0; } .wp-site-blocks .blog-posts__post__content .wp-block-post-excerpt__more-link { font-size: 1.6rem; line-height: 1.2; margin-top: 0.9rem; /* add space between title and CTA */ align-self: flex-start; color: rgba(4, 28, 73, 0.85); position: relative; padding-bottom: 2px; } .wp-site-blocks .blog-posts__post__content .wp-block-post-excerpt__more-link::after { content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 8px; vertical-align: -2px; background: url("/wp-content/plugins/thameside-content-blocks/assets/images/arrow-red.svg") no-repeat center center; background-size: contain; transition: transform 200ms var(--thameside-transition), opacity 200ms var(--thameside-transition); opacity: 0.85; } .wp-site-blocks .blog-posts__post:hover .wp-block-post-excerpt__more-link::after, .wp-site-blocks .blog-posts__post:focus-within .wp-block-post-excerpt__more-link::after { transform: rotate(-45deg); opacity: 1; } .wp-site-blocks .blog-posts__pagination { margin-top: 30px; } /* Modern pagination (News / archives) */ .wp-site-blocks .blog-posts__pagination .wp-block-query-pagination { gap: 0.75rem; justify-content: flex-start; } .wp-site-blocks .blog-posts__pagination .wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; } .wp-site-blocks .blog-posts__pagination :where(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid rgba(4, 28, 73, 0.18); background: rgba(255, 255, 255, 0.8); color: var(--wp--preset--color--primary); text-decoration: none; font-family: var(--wp--preset--font-family--body); font-size: 1.6rem; line-height: 1; transition: background-color 200ms var(--thameside-transition), border-color 200ms var(--thameside-transition), color 200ms var(--thameside-transition), transform 200ms var(--thameside-transition); } .wp-site-blocks .blog-posts__pagination :where(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover { background: #fff; border-color: rgba(4, 28, 73, 0.3); transform: translateY(-1px); } .wp-site-blocks .blog-posts__pagination :where(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next):focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 3px; } .wp-site-blocks .blog-posts__pagination .page-numbers.current { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--primary); color: #fff; } .wp-site-blocks .blog-posts__pagination .page-numbers.dots { border-color: transparent; background: transparent; min-width: auto; padding: 0 0.4rem; color: rgba(4, 28, 73, 0.55); } /* Block style: Cover — “Thameside hero (full viewport)” */ .wp-block-cover.is-style-thameside-hero-video { min-height: 100vh !important; } /* * Hero media — mirror PHP inline breakout (`render.php`) for layered SS consistency. * Avoid transform-based centering (parent overflow/stacking can clip). */ .wp-block-thameside-hero-media.alignfull.th-hero-media, .wp-block-thameside-hero-media.alignfull { box-sizing: border-box; width: 100vw; width: 100dvw; max-width: none; position: relative; left: 50%; margin-left: -50vw; margin-right: -50vw; transform: none; } /* * Block editor: alignfull hero-media breakout (100vw / -50vw) must not apply against the canvas iframe. * `add_editor_style()` scopes under `.editor-styles-wrapper`; `body.block-editor-iframe__body` covers the * iframe shell where those rules sometimes still reach. Front end unchanged. */ .editor-styles-wrapper .wp-block-thameside-hero-media.alignfull.th-hero-media, .editor-styles-wrapper .wp-block-thameside-hero-media.alignfull, .block-editor-block-list__layout .wp-block-thameside-hero-media.alignfull.th-hero-media, .block-editor-block-list__layout .wp-block-thameside-hero-media.alignfull, body.block-editor-iframe__body .wp-block-thameside-hero-media.alignfull.th-hero-media, body.block-editor-iframe__body .wp-block-thameside-hero-media.alignfull { position: relative !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; transform: none !important; box-sizing: border-box !important; } .editor-styles-wrapper .wp-block-thameside-hero-media.th-hero-media-editor, body.block-editor-iframe__body .wp-block-thameside-hero-media.th-hero-media-editor { min-height: clamp(240px, 42vmin, 440px) !important; max-height: min(560px, 82vh); height: auto !important; } .editor-styles-wrapper .wp-block-thameside-hero-media.th-hero-media-editor.th-hero-media--motion, body.block-editor-iframe__body .wp-block-thameside-hero-media.th-hero-media-editor.th-hero-media--motion { height: auto !important; min-height: clamp(240px, 42vmin, 440px) !important; } .editor-styles-wrapper .thameside-content-blocks.block__hero, .editor-styles-wrapper .thameside-content-blocks.block__hero--video, body.block-editor-iframe__body .thameside-content-blocks.block__hero, body.block-editor-iframe__body .thameside-content-blocks.block__hero--video { min-height: min(440px, 75vh); height: auto; } /* * Palette + `.has-text-color` — REQUIRED `!important`: * Core global stylesheet forces `.has-text-color { color: var(--wp--preset--color--text) !important }` * (or similar), which overrides named palette classes. Doubled classes must match with `!important` * or the wrong colour wins. Prefer fixing patterns to avoid pairing both utilities when possible. */ .has-primary-color.has-text-color { color: var(--wp--preset--color--primary) !important; } .has-secondary-color.has-text-color { color: var(--wp--preset--color--secondary) !important; } .has-accent-color.has-text-color { color: var(--wp--preset--color--accent) !important; } .has-light-blue-color.has-text-color { color: var(--wp--preset--color--light-blue) !important; } .has-light-grey-color.has-text-color { color: var(--wp--preset--color--light-grey) !important; } .has-white-color.has-text-color { color: var(--wp--preset--color--white) !important; } .has-dark-color.has-text-color { color: var(--wp--preset--color--dark) !important; } .has-dark-grey-color.has-text-color { color: var(--wp--preset--color--dark-grey) !important; } body.home .thameside-main--front { margin-top: 0; padding-top: 0; } /* --- Single posts (News) --- */ body.single-post .thameside-single__title { letter-spacing: -0.03em; line-height: 1.05; margin-top: 0; margin-bottom: 1.25rem; text-align: center; } body.single-post .thameside-single__date { margin: 0; color: rgba(4, 28, 73, 0.78); font-size: 1.6rem; line-height: 1.6; margin-bottom: 1.75rem; text-align: center; } body.single-post .thameside-single__content { width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 2rem; padding-right: 2rem; padding-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-bottom: clamp(4rem, 7vw, 6rem); } @media (min-width: 768px) { body.single-post .thameside-single__content { padding-left: 6rem; padding-right: 6rem; } } /* * Dedicated post content width (legacy ~780px). * Slightly wider for a more modern reading measure, still comfortably readable. */ @media (min-width: 1024px) { body.single-post .thameside-single__content { max-width: 860px; } } /* * WP adds `has-global-padding` and an inner constrained layout to `post-content`. * That can make the text column narrower than the featured image. Keep a single * content width by removing inner padding/constraints inside our post shell. */ body.single-post .thameside-single__content.has-global-padding { padding-left: 2rem !important; padding-right: 2rem !important; } @media (min-width: 768px) { body.single-post .thameside-single__content.has-global-padding { padding-left: 6rem !important; padding-right: 6rem !important; } } body.single-post .thameside-single__content .wp-block-post-content.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; } body.single-post .thameside-single__content .wp-block-post-content.is-layout-constrained { max-width: 100% !important; } body.single-post .thameside-single__featured-image.wp-block-post-featured-image { margin: 0; overflow: hidden; border-radius: 24px; background: rgba(255, 255, 255, 0.6); aspect-ratio: 16 / 9; } body.single-post .thameside-single__featured-image.wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; } body.single-post .thameside-single__content .wp-block-post-content { font-size: 1.8rem; line-height: 1.7; } body.single-post .thameside-single__content .wp-block-post-content > :first-child { margin-top: 0; } body.single-post .thameside-single__content .wp-block-post-content :where(h2, h3, h4) { letter-spacing: -0.02em; margin-top: clamp(2.25rem, 4vw, 3rem); } body.single-post .thameside-single__content .wp-block-post-content :where(p, ul, ol, blockquote, figure, .wp-block-table) { margin-bottom: 1.25rem; } body.single-post .thameside-single__content .wp-block-post-content :where(ul, ol) { margin-left: 0; padding-left: 1.5rem !important; list-style-position: inside; } body.single-post .thameside-single__content .wp-block-post-content :where(li) { margin-bottom: 0.5rem; } body.single-post .thameside-single__content .wp-block-post-content :where(blockquote) { margin-left: 0; margin-right: 0; padding: 1.25rem 1.5rem; border-left: 5px solid var(--wp--preset--color--secondary); background: rgba(255, 255, 255, 0.7); border-radius: 12px; } body.single-post .thameside-single__content .wp-block-post-content :where(blockquote) p { margin: 0; } body.single-post .thameside-single__back { margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 1023px) { :root { scroll-padding-top: var(--thameside-header-height-mobile); } } @media (min-width: 1024px) { :root { scroll-padding-top: var(--thameside-header-height-desktop); --thameside-header-height: var(--thameside-header-height-desktop); } } /* * Root rem scale — matches classic Thameside. In the block/Site Editor iframe this rule from `custom.css` * is scoped incorrectly for `html`; see `thameside_blocks_editor_iframe_canvas_typography()` in `functions.php`. */ html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 1023px) { body { font-size: 16px; } } .wp-block-post-content.alignfull { max-width: none; padding-left: 0; padding-right: 0; } /* * Homepage vertical rhythm: Thameside blocks set section padding via `--thameside-block-pad-*`. * theme.json sets global `styles.spacing.blockGap` to `0` so core flow layout does not inject * `margin-block-start: var(--wp--preset--spacing--section-gap)` between siblings (e.g. main → footer). * Keep post-content top-level margins at zero so band padding alone controls rhythm. */ body.home .wp-site-blocks .thameside-main--front .wp-block-post-content.is-layout-flow > *, body.home .thameside-main--front .wp-block-post-content.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; } /* * Full-width sections that wrap inner blocks (e.g. “Our Services” heading + cards): align outer * padding with the same scale as plugin blocks (variables come from thameside-content-blocks.css). */ .thameside-main--front .wp-block-post-content > .wp-block-group.alignfull { padding-block: var(--thameside-section-y-sm, clamp(2.25rem, 4.25vw, 3rem)); box-sizing: border-box; } @media (min-width: 768px) { .thameside-main--front .wp-block-post-content > .wp-block-group.alignfull { padding-block: var(--thameside-section-y-md, clamp(3rem, 5.25vw, 4rem)); } } @media (min-width: 1200px) { .thameside-main--front .wp-block-post-content > .wp-block-group.alignfull { padding-block: var(--thameside-section-y-lg, clamp(4rem, 7vw, 6rem)); } } /* Classic `_blocks.scss`: same background band + same background band => padding-top: 0 on the second. */ body.home .thameside-main--front .wp-block-post-content > .wp-block-group.alignfull.has-white-background-color + .wp-block-group.alignfull.has-white-background-color, body.home .thameside-main--front .wp-block-post-content > .wp-block-group.alignfull.has-white-background-color + .wp-block-thameside-media-text.block__bg--white, body.home .thameside-main--front .wp-block-post-content > .wp-block-thameside-media-text.block__bg--white + .wp-block-group.alignfull.has-white-background-color, body.home .thameside-main--front .wp-block-post-content > .wp-block-thameside-media-text.block__bg--white + .wp-block-thameside-media-text.block__bg--white { padding-top: 0; } /* Slightly tighter bottom padding on the final front-page band before the footer (footer supplies top padding). */ body.home .thameside-main--front .wp-block-post-content > .wp-block-thameside-media-text:last-child { padding-bottom: var(--thameside-section-y-md, clamp(3rem, 5.25vw, 4rem)); } /* * Remove the global-styles sibling margin between the last content section and the footer * template part. Core adds `:where(.wp-site-blocks) > * { margin-block-start: ... }` which * creates an unwanted gap above the footer when our last band already controls spacing. */ .wp-site-blocks > .site-footer-wrap.wp-block-template-part, .wp-site-blocks > footer.wp-block-template-part, .wp-site-blocks > .wp-block-template-part.site-footer-wrap { margin-block-start: 0; } .thameside-site-header .wp-block-site-logo { z-index: 10; } /* * About + interior pages: tighten `thameside/logos` spacing so it doesn't feel “detached” * between two full-width content bands. Remove the Core flow margin between siblings, but * keep the logos block padding so the band still feels intentional. */ .wp-block-post-content > .wp-block-thameside-media-text + .wp-block-thameside-logos, .wp-block-post-content > .wp-block-thameside-breadcrumbs + .wp-block-thameside-logos, .wp-block-post-content > .wp-block-thameside-text + .wp-block-thameside-logos, .wp-block-post-content > .wp-block-thameside-logos + .wp-block-thameside-media-text, .wp-block-post-content > .wp-block-thameside-logos + .wp-block-thameside-text, .wp-block-post-content > .wp-block-thameside-logos + .wp-block-thameside-breadcrumbs { margin-block-start: 0; } /* * Collapse the leading band padding only when adjacent logos/media-text bands share the * same background colour, so two same-colour bands feel like one. When the colours differ * (e.g. a white logos band followed by a light-blue media-text band) we leave the plugin * CSS in control so the colour change is framed by proper top/bottom padding. */ .wp-block-post-content > .wp-block-thameside-logos.block__bg--white + .wp-block-thameside-media-text.block__bg--white, .wp-block-post-content > .wp-block-thameside-media-text.block__bg--white + .wp-block-thameside-logos.block__bg--white, .wp-block-post-content > .wp-block-thameside-logos.block__bg--light-blue + .wp-block-thameside-media-text.block__bg--light-blue, .wp-block-post-content > .wp-block-thameside-media-text.block__bg--light-blue + .wp-block-thameside-logos.block__bg--light-blue, .wp-block-post-content > .wp-block-thameside-logos.block__bg--grey + .wp-block-thameside-media-text.block__bg--grey, .wp-block-post-content > .wp-block-thameside-media-text.block__bg--grey + .wp-block-thameside-logos.block__bg--grey, .wp-block-post-content > .wp-block-thameside-logos.block__bg--dark-blue + .wp-block-thameside-media-text.block__bg--dark-blue, .wp-block-post-content > .wp-block-thameside-media-text.block__bg--dark-blue + .wp-block-thameside-logos.block__bg--dark-blue { padding-top: 0; } .thameside-site-header .wp-block-site-logo img { width: 184px; height: auto; } /* Core Navigation in the header template part (see `site-header.css` for overlay + Thameside offcanvas parity). */ .thameside-site-header .wp-block-navigation { position: relative; z-index: 5; } /* * Footer — parity with classic Thameside `parts/bottom-bar.php` + `_footer.scss` * + `.container` / `.column` gutters from `_grid.scss`. * Global theme.json `elements.link` / `elements.heading` must not bleed into this region. */ footer.site-footer.thameside-site-footer, .site-footer.thameside-site-footer, footer.thameside-site-footer, .thameside-site-footer { background-color: var(--wp--preset--color--primary-dark, rgb(1, 9, 25)); /* legacy darken(primary); palette `primary-dark` for Site Editor */ border-bottom: 10px solid var(--thameside-secondary); box-sizing: border-box; color: #ffffff; /* Padding from CSS — footer template part no longer uses inline padding (cleaner cascade). */ padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); } /* * Inner shell = legacy `.container` (max-width 90% @ desktop) + `.column` horizontal padding. * Block `alignwide` alone uses theme wideSize (1200px) — too narrow vs classic — override to 90%. */ .thameside-site-footer .thameside-footer-inner.alignwide { max-width: 90%; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; padding-left: 2rem; padding-right: 2rem; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; --wp--style--block-gap: 0 !important; } @media (min-width: 768px) { .thameside-site-footer .thameside-footer-inner.alignwide { padding-left: 6rem; padding-right: 6rem; } } /* Stop layout-flow block presets from adding vertical gaps between flex columns / siblings */ .thameside-site-footer .thameside-footer-inner.is-layout-flow > *, .thameside-site-footer .site-footer__top.is-layout-flow > *, .thameside-site-footer .thameside-footer__top.is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; } .thameside-site-footer .site-footer__column.is-layout-flow > * + *, .thameside-site-footer .thameside-footer__column.is-layout-flow > * + * { margin-block-start: 0; } /* No extra layout gap between the columns band and the copyright group (global styles sometimes still apply gap). */ .thameside-site-footer .thameside-footer-inner > .wp-block-columns + .site-footer__bottom, .thameside-site-footer .thameside-footer-inner > .wp-block-columns + .thameside-footer__bottom { margin-block-start: 0 !important; } /* Beat theme.json global link colours inside the footer shell. */ .thameside-site-footer :where(a):where(:not(.wp-element-button)) { color: inherit; text-decoration: none; } .thameside-site-footer .thameside-footer__top h1, .thameside-site-footer .thameside-footer__top h2, .thameside-site-footer .thameside-footer__top h3, .thameside-site-footer .thameside-footer__top h4, .thameside-site-footer .thameside-footer__top h5, .thameside-site-footer .thameside-footer__top h6, .thameside-site-footer .thameside-footer__top p { color: #ffffff; } /* * Footer primary row — mirrors live/classic Thameside (`_footer.scss`): brand ~40%, nav ~25%, form ~25%. * Gaps come from column-gap (flex bases are 0 — proportions follow flex-grow). */ .thameside-site-footer .site-footer__top.wp-block-columns { align-items: flex-start !important; /* Even rhythm between all three columns (was visually tighter between 1↔2 than 2↔3) */ column-gap: clamp(2rem, 5vw, 4rem); row-gap: 2rem; margin-block-end: 0 !important; /* Thin separator only — keep padding minimal so there isn’t a tall empty band above copyright */ padding-block-end: 0.5rem !important; border-block-end: 1px solid rgba(255, 255, 255, 0.12); } /* Desktop: align nav + newsletter with brand copy — logo sits above the first heading in column 1 */ @media (min-width: 782px) { .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column--nav, .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column--form { padding-block-start: calc(95px + 20px); } } .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; box-sizing: border-box; min-height: 0; min-width: 0; flex: 1 1 0 !important; width: auto !important; max-width: none !important; } /* Desktop: brand column wider (see https://www.thamesidefire.co.uk/ footer proportions) */ @media (min-width: 782px) { .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column--brand { flex: 8 1 0 !important; } .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column--nav, .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column--form { flex: 5 1 0 !important; } } @media (max-width: 781px) { .thameside-site-footer .site-footer__top > .wp-block-column.site-footer__column { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } .thameside-site-footer .thameside-footer__top > .wp-block-group { width: 100%; max-width: 100%; margin-bottom: 2rem; box-sizing: border-box; flex-shrink: 0; } .thameside-site-footer .thameside-footer__column--brand .wp-block-site-logo img, .thameside-site-footer .site-footer__column--brand .wp-block-site-logo img { margin-bottom: 20px; height: auto; } body .thameside-site-footer .site-footer__intro, body .thameside-site-footer .thameside-footer__intro { font-size: 1.6rem; line-height: 1.6; color: #ffffff; max-width: 42rem; } /* Footer brand column: classic uses softer white for copy/links */ .thameside-site-footer .site-footer__column--brand p, .thameside-site-footer .thameside-footer__column--brand p { color: rgba(255, 255, 255, 0.7); font-size: 1.6rem; line-height: 1.6; } .thameside-site-footer .site-footer__column--brand a, .thameside-site-footer .thameside-footer__column--brand a { color: rgba(255, 255, 255, 0.7); } .thameside-site-footer .site-footer__column--brand a:hover, .thameside-site-footer .thameside-footer__column--brand a:hover { color: #ffffff; } .thameside-site-footer .thameside-footer__column--brand a, .thameside-site-footer .site-footer__column--brand a { display: inline-block; text-decoration: none; transition: color 300ms var(--thameside-transition); text-wrap: nowrap; } /* Clickable T:/E: line (shortcode) — keep above any full-width footer overlays. */ .thameside-site-footer .site-footer__column--brand .site-footer__contact-lines a, .thameside-site-footer .thameside-footer__column--brand .thameside-footer__contact-lines a { position: relative; z-index: 2; pointer-events: auto; } /* Core Navigation: classic `.navbar-nav a` = DM Serif 2.2rem — beat theme.json `core/navigation` + block presets. */ .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation, .thameside-site-footer .site-footer__column--nav .wp-block-navigation { row-gap: 0; column-gap: 0; font-family: "DM Serif Display", serif !important; font-size: 2.2rem !important; font-weight: 400; line-height: 1.2; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation__container, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation__container { flex-direction: column; align-items: stretch; width: 100%; gap: 0.8rem; margin-block-start: 0; padding-block-start: 0; } /* Nav column: left-aligned menu + socials (readable / professional) */ .thameside-site-footer .site-footer__column--nav, .thameside-site-footer .thameside-footer__column--nav { text-align: left; } /* * Newsletter column: “Stay up to date” (GF HTML `

`) should align with first nav link. * Strip core Navigation top offset; match serif size/line-height + link padding shim. */ .thameside-site-footer .site-footer__column--nav > .wp-block-navigation:first-child { margin-block-start: 0 !important; padding-block-start: 0 !important; } .thameside-site-footer .site-footer__column--form .gform_wrapper, .thameside-site-footer .thameside-footer__column--form .gform_wrapper { margin-block-start: 0 !important; } .thameside-site-footer .site-footer__column--form .gfield.gfield--type-html, .thameside-site-footer .thameside-footer__column--form .gfield.gfield--type-html { margin-block-start: 0 !important; padding-block-start: 0 !important; padding-block-end: 0 !important; } .thameside-site-footer .site-footer__column--form .gfield--type-html h3, .thameside-site-footer .thameside-footer__column--form .gfield--type-html h3 { margin: 0 !important; padding-block-start: 0.2rem; padding-inline: 0; font-family: "DM Serif Display", serif !important; font-size: 2.2rem !important; font-weight: 400 !important; line-height: 1.2 !important; color: #ffffff !important; } .thameside-site-footer .site-footer__column--form .gfield--type-html.gfield_html p, .thameside-site-footer .thameside-footer__column--form .gfield--type-html.gfield_html p { margin-block-start: 0.35rem; margin-block-end: 0.35rem; color: rgba(255, 255, 255, 0.7); font-family: inherit; font-size: 1.6rem; line-height: 1.4; font-weight: 300; } .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation__container, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation__container { align-items: flex-start; } .thameside-site-footer .thameside-footer__column--nav .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav .wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer__column--nav ul.wp-block-social-links.footer-socials.is-content-justification-center, .thameside-site-footer .site-footer__column--nav ul.wp-block-social-links.footer-socials.is-content-justification-center { justify-content: flex-start; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item { flex-direction: column; align-items: stretch; align-self: stretch; width: 100%; background-color: transparent; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content { display: block; overflow: hidden; width: 100%; box-sizing: border-box; padding-top: 0.2rem; padding-bottom: 0.2rem; color: rgba(255, 255, 255, 0.7) !important; font-family: "DM Serif Display", serif !important; font-size: 2.2rem !important; line-height: 1.2 !important; font-weight: 400 !important; text-decoration: none !important; transition: color 300ms var(--thameside-transition); } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:hover, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:hover, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:focus, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:focus, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: #ffffff !important; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .current-menu-item .wp-block-navigation-item__content, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .current-menu-item .wp-block-navigation-item__content, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item--current .wp-block-navigation-item__content, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item--current .wp-block-navigation-item__content { color: #ffffff !important; } /* Footer nav: remove the classic underline hover effect */ .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after { display: none !important; content: none !important; } /* Footer: hide nested submenus (classic footer only printed top-level links). */ .thameside-site-footer .wp-block-navigation__submenu-container, .thameside-site-footer .wp-block-navigation__submenu-icon { display: none !important; } /* * Gap above footer social row: `thameside/footer-social-links` renders the inner * `ul.wp-block-social-links` as a direct column child (no `.wp-block-thameside-footer-social-links` * wrapper on the front). Column `.is-layout-flow > * + *` forces margin-block-start:0 on that ul — * restore space under the large vertical nav (2.2rem links). */ .thameside-site-footer .thameside-footer__column--nav.is-layout-flow > .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav.is-layout-flow > .wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer__column--nav > .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav > .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav .wp-block-navigation + ul.wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation + ul.wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer__column--nav > .wp-block-thameside-footer-social-links .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav > .wp-block-thameside-footer-social-links .wp-block-social-links.footer-socials { margin-block-start: clamp(2rem, 5vw, 3.25rem) !important; } .thameside-site-footer .thameside-footer__column--nav .wp-block-social-links.footer-socials, .thameside-site-footer .site-footer__column--nav .wp-block-social-links.footer-socials { list-style: none; padding: 0; margin-left: 0; margin-right: 0; gap: 2rem; } /* * `.thameside-footer-inner.alignwide` forces --wp--style--block-gap: 0, which collapses * Social Links row spacing. Re-assert gap on the footer nav column list only. */ .thameside-site-footer .thameside-footer-inner.alignwide .site-footer__column--nav ul.wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer-inner.alignwide .thameside-footer__column--nav ul.wp-block-social-links.footer-socials, .thameside-site-footer .thameside-footer-inner.alignwide .wp-block-thameside-footer-social-links ul.wp-block-social-links.footer-socials { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2rem !important; row-gap: 1rem !important; column-gap: 2rem !important; --wp--style--block-gap: 2rem !important; } .thameside-site-footer .thameside-footer__column--nav .wp-block-social-links.footer-socials .wp-social-link, .thameside-site-footer .site-footer__column--nav .wp-block-social-links.footer-socials .wp-social-link { display: inline-block; margin-right: 0; line-height: 0; background: #ffffff; border-radius: 9999px; width: 34px; height: 34px; } .thameside-site-footer .thameside-footer__column--nav .wp-block-social-links.footer-socials .wp-social-link:last-child, .thameside-site-footer .site-footer__column--nav .wp-block-social-links.footer-socials .wp-social-link:last-child { margin-right: 0; } .thameside-site-footer .thameside-footer__column--nav .footer-socials .wp-block-social-link-anchor, .thameside-site-footer .site-footer__column--nav .footer-socials .wp-block-social-link-anchor, .thameside-site-footer .thameside-footer__column--nav .footer-socials .wp-social-link :where(button, a), .thameside-site-footer .site-footer__column--nav .footer-socials .wp-social-link :where(button, a) { color: #000000 !important; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; } /* Old theme YouTube glyph was softer */ .thameside-site-footer .footer-socials .wp-social-link-youtube .wp-block-social-link-anchor { color: #cccccc !important; } /* Legacy SVG social icons were 32×32px */ .thameside-site-footer .footer-socials.wp-block-social-links { font-size: 32px; } /* Gravity Forms in footer (classic `_footer.scss`) */ .thameside-site-footer .thameside-footer__column--form .gform_confirmation_message, .thameside-site-footer .site-footer__column--form .gform_confirmation_message { color: #ffffff; font-size: 2.2rem; } .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gform_title, .thameside-site-footer .site-footer__column--form .gform_wrapper .gform_title, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gform_description, .thameside-site-footer .site-footer__column--form .gform_wrapper .gform_description, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gfield_label, .thameside-site-footer .site-footer__column--form .gform_wrapper .gfield_label, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gfield_description, .thameside-site-footer .site-footer__column--form .gform_wrapper .gfield_description, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gsection_title, .thameside-site-footer .site-footer__column--form .gform_wrapper .gsection_title, .thameside-site-footer .thameside-footer__column--form .gform_wrapper legend, .thameside-site-footer .site-footer__column--form .gform_wrapper legend { color: #ffffff !important; } .thameside-site-footer .thameside-footer__column--form .gform_wrapper h2, .thameside-site-footer .site-footer__column--form .gform_wrapper h2, .thameside-site-footer .thameside-footer__column--form .gform_wrapper h3, .thameside-site-footer .site-footer__column--form .gform_wrapper h3 { color: #ffffff !important; } .thameside-site-footer .thameside-footer__column--form .gform_wrapper input::placeholder, .thameside-site-footer .site-footer__column--form .gform_wrapper input::placeholder, .thameside-site-footer .thameside-footer__column--form .gform_wrapper textarea::placeholder, .thameside-site-footer .site-footer__column--form .gform_wrapper textarea::placeholder { color: rgba(255, 255, 255, 0.55); opacity: 1; } .thameside-site-footer .thameside-footer__column--form .gfield input[type="color"], .thameside-site-footer .site-footer__column--form .gfield input[type="color"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="date"], .thameside-site-footer .site-footer__column--form .gfield input[type="date"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="datetime-local"], .thameside-site-footer .site-footer__column--form .gfield input[type="datetime-local"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="datetime"], .thameside-site-footer .site-footer__column--form .gfield input[type="datetime"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="email"], .thameside-site-footer .site-footer__column--form .gfield input[type="email"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="month"], .thameside-site-footer .site-footer__column--form .gfield input[type="month"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="number"], .thameside-site-footer .site-footer__column--form .gfield input[type="number"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="password"], .thameside-site-footer .site-footer__column--form .gfield input[type="password"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="search"], .thameside-site-footer .site-footer__column--form .gfield input[type="search"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="tel"], .thameside-site-footer .site-footer__column--form .gfield input[type="tel"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="text"], .thameside-site-footer .site-footer__column--form .gfield input[type="text"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="time"], .thameside-site-footer .site-footer__column--form .gfield input[type="time"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="url"], .thameside-site-footer .site-footer__column--form .gfield input[type="url"], .thameside-site-footer .thameside-footer__column--form .gfield input[type="week"], .thameside-site-footer .site-footer__column--form .gfield input[type="week"], .thameside-site-footer .thameside-footer__column--form .gfield select, .thameside-site-footer .site-footer__column--form .gfield select { border: 1px solid rgba(255, 255, 255, 0.3); background: none; color: #ffffff; min-height: 50px; padding: 1rem; font-weight: 300; width: 100%; box-sizing: border-box; } .thameside-site-footer .thameside-footer__column--form .gfield textarea, .thameside-site-footer .site-footer__column--form .gfield textarea { border: 1px solid rgba(255, 255, 255, 0.3); background: none; color: #ffffff; padding: 1rem; font-weight: 300; width: 100%; box-sizing: border-box; } /* Form column: shortcode / GF stack flush with column top (matches other columns after duplicate heading removal) */ .thameside-site-footer .site-footer__column--form .wp-block-shortcode, .thameside-site-footer .thameside-footer__column--form .wp-block-shortcode { margin-block-start: 0; margin-block-end: 0; } /* * Gravity Forms may still render `.gform_heading` when title/description content exists in the form editor, * even with title="false" — duplicates “Stay up to date” from fields/HTML blocks. */ .thameside-site-footer .site-footer__column--form .gform_wrapper .gform_heading { display: none !important; } .thameside-site-footer .site-footer__column--form .gfield--type-captcha, .thameside-site-footer .thameside-footer__column--form .gfield--type-captcha { /* Breathing room after email vs tight GF grid (--gf-field-gap-y is small here) */ margin-block-start: 0.85rem !important; margin-block-end: 0.75rem !important; } /* Gravity Forms layout parity with Thameside `_forms.scss` inside the footer shell */ .thameside-site-footer .thameside-footer__column--form .gform_wrapper, .thameside-site-footer .site-footer__column--form .gform_wrapper { width: 100%; max-width: none; margin-block-end: 0 !important; padding-block-end: 0 !important; /* * GF Orbital/Foundation defaults: --gf-form-gap-y 40px + --gf-form-footer-margin-y-start 24px * made a large gap between the email field and Subscribe after switching to the shortcode embed. */ --gf-form-gap-y: 0.35rem; --gf-form-footer-margin-y-start: 0.35rem; --gf-field-gap-y: 0.35rem; } .thameside-site-footer .site-footer__column--form .gform_wrapper .gform_fields, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gform_fields { row-gap: 0.35rem; } .thameside-site-footer .site-footer__column--form .gform_wrapper .gfield, .thameside-site-footer .thameside-footer__column--form .gform_wrapper .gfield { margin-block-end: 0.35rem; } /* * GF `theme.min.css` (Orbital / `.gravity-theme`, including `.gform-theme--no-framework`): * - `#field_submit, .gform_footer { display:flex }` + submit `align-self:flex-end` stretches the row vs fields. * - `.gform_footer, .gform_page_footer { margin:6px 0 0; padding:16px 0 }` — the vertical padding (esp. bottom) * leaves a large strip below the button inside the wrapper before the copyright row. * Classic Thameside footer used block flow; tighten footer column to wrapper edge. */ .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme #field_submit, .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme .gform_footer, .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme .gform_page_footer, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme #field_submit, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme .gform_footer, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme .gform_page_footer { display: block; width: 100%; margin-block-start: 0.35rem !important; margin-inline: 0 !important; margin-block-end: 0 !important; padding: 0 !important; } .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme #field_submit input, .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme .gform_footer input, .thameside-site-footer .site-footer__column--form .gform_wrapper.gravity-theme .gform_footer button, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme #field_submit input, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme .gform_footer input, .thameside-site-footer .thameside-footer__column--form .gform_wrapper.gravity-theme .gform_footer button { align-self: unset; max-width: 100%; } .thameside-site-footer .thameside-footer__column--form .gfield_label, .thameside-site-footer .site-footer__column--form .gfield_label { display: block; margin-bottom: 0.35rem; font-weight: 400; } /* Legacy footer CTA: secondary fill + white arrow (submit is often `` — use composite background) */ .thameside-site-footer .thameside-footer__column--form .gform_footer input[type="submit"], .thameside-site-footer .site-footer__column--form .gform_footer input[type="submit"], .thameside-site-footer .thameside-footer__column--form .gform_footer button, .thameside-site-footer .site-footer__column--form .gform_footer button, .thameside-site-footer .thameside-footer__column--form .gform_page_footer input[type="button"], .thameside-site-footer .site-footer__column--form .gform_page_footer input[type="button"], .thameside-site-footer .thameside-footer__column--form .gform_page_footer input[type="submit"], .thameside-site-footer .site-footer__column--form .gform_page_footer input[type="submit"] { background-color: var(--thameside-secondary); background-image: url("../images/arrow-white.svg"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 15px 15px; color: #ffffff; border: none; padding: 1.25rem 3.5rem 1.25rem 2rem; font-family: "DM Serif Display", serif; font-size: 2rem; line-height: 1.7; cursor: pointer; transition: 600ms var(--thameside-transition); } .thameside-site-footer .thameside-footer__bottom, .thameside-site-footer .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; color: #ffffff; margin-block-start: 0 !important; padding-block-start: 0.5rem !important; } .thameside-site-footer .thameside-footer__bottom .thameside-footer__bottom-copy, .thameside-site-footer .thameside-footer__bottom p.thameside-footer__bottom-copy, .thameside-site-footer .site-footer__bottom .thameside-footer__bottom-copy { margin: 0; color: #ffffff; font-family: "Inter Tight", sans-serif; font-size: 1.6rem; line-height: 1.6; font-weight: 400; } /* Legacy `wp-block-columns` footer layout (customised sites) */ @media (max-width: 781px) { .thameside-site-footer .thameside-footer-grid { flex-direction: column !important; flex-wrap: nowrap !important; } .thameside-site-footer .thameside-footer-grid > .wp-block-column { flex-basis: 100% !important; } } .thameside-site-footer .thameside-footer-grid .wp-block-navigation .wp-block-navigation__container { flex-direction: column; align-items: flex-start; } .thameside-site-footer .thameside-footer-brand .wp-block-site-title a { color: inherit; text-decoration: none; } .thameside-site-footer .thameside-footer-grid a { color: inherit; } .thameside-site-footer .thameside-footer-grid .wp-block-navigation .wp-block-navigation-item__content { color: inherit; text-decoration: none; } .thameside-site-footer .thameside-footer-grid .wp-block-navigation .wp-block-navigation-item__content:hover, .thameside-site-footer .thameside-footer-grid .wp-block-navigation .wp-block-navigation-item__content:focus { opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .thameside-site-header { transition: none; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content, .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after { transition: none; } .thameside-site-footer .thameside-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after, .thameside-site-footer .site-footer__column--nav .wp-block-navigation .wp-block-navigation-item__content::after { transform: translateX(0); } } /* * Legacy Thameside `.button` (classic PHP theme) — core Button block style * `Thameside classic (legacy CTA)`. Icon matches `Thameside/assets/images/arrow-red.svg`. */ .wp-block-button.is-style-thameside-classic .wp-block-button__link { display: inline-block; margin-top: 20px; margin-bottom: 2rem; margin-right: 20px; background: #ffffff; line-height: 1.7; padding: 1.25rem 2rem; color: #041c49; font-size: 2rem; font-family: "DM Serif Display", serif; border: none; border-radius: 0; box-shadow: none; text-decoration: none; cursor: pointer; transition: 600ms var(--thameside-transition, cubic-bezier(0.645, 0.045, 0.355, 1)); } .wp-block-buttons > .wp-block-button.is-style-thameside-classic:last-child .wp-block-button__link { margin-right: 0; } .wp-block-button.is-style-thameside-classic .wp-block-button__link::after { content: ""; display: inline-block; width: 15px; height: 15px; background: url("../images/arrow-red.svg") no-repeat center center; background-size: contain; margin-left: 10px; vertical-align: middle; transform: translateY(-2px); opacity: 0.8; transition: transform 300ms var(--thameside-transition, cubic-bezier(0.645, 0.045, 0.355, 1)), opacity 300ms var(--thameside-transition, cubic-bezier(0.645, 0.045, 0.355, 1)); } .wp-block-button.is-style-thameside-classic .wp-block-button__link:hover::after, .wp-block-button.is-style-thameside-classic .wp-block-button__link:focus-visible::after { transform: translateY(-2px) rotate(-45deg); opacity: 1; } @media (prefers-reduced-motion: reduce) { .wp-block-button.is-style-thameside-classic .wp-block-button__link, .wp-block-button.is-style-thameside-classic .wp-block-button__link::after { transition: none; } .wp-block-button.is-style-thameside-classic .wp-block-button__link:hover::after, .wp-block-button.is-style-thameside-classic .wp-block-button__link:focus-visible::after { transform: translateY(-2px); } } /* --- Single Career (vacancy) pages: restore classic layout utilities --- */ .single-career .container--thin, .post-type-career .container--thin { width: 100%; margin: 0 auto; box-sizing: border-box; } @media (min-width: 1200px) { .single-career .container--thin, .post-type-career .container--thin { max-width: 60%; } } .single-career .row, .post-type-career .row { position: relative; display: flex; margin: 0 auto; flex-wrap: wrap; width: 100%; } .single-career .column, .post-type-career .column { margin: 0; min-width: 0; flex-grow: 0; flex-shrink: 0; flex-basis: auto; width: 100%; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; } @media (min-width: 768px) { .single-career .column, .post-type-career .column { padding-left: 6rem; padding-right: 6rem; } } .single-career .content, .post-type-career .content { padding-top: 0; padding-bottom: 3rem; } /* Career hero needs breathing room below fixed header. */ .single-career .block__hero--simple, .post-type-career .block__hero--simple { /* * The legacy `.block__hero--simple` uses a fixed `height: 400px` which leaves a large empty band * under the centered title. On career pages we want the hero to size to content (like live). */ height: auto; min-height: unset; padding-top: clamp(3rem, 4vw, 4rem); padding-bottom: clamp(3rem, 4vw, 4rem); } /* Tighten title → first paragraph rhythm on career hero + content. */ .single-career .block__hero__content h1, .post-type-career .block__hero__content h1 { margin-bottom: 0; } .single-career .block__hero__content p, .post-type-career .block__hero__content p { margin-top: 0; } /* Remove any extra top margin on the first content block. */ .single-career .content .wp-block-post-content > :first-child, .post-type-career .content .wp-block-post-content > :first-child { margin-top: 0; } /* Classic vacancy body copy is slightly larger (old theme used ~2rem on singles). */ .single-career .content p, .post-type-career .content p { font-size: 2rem; } /* * Single Career (vacancy) typography parity: * - Old theme applied body typography to lists (inherit Inter Tight), and list copy matched paragraph size. * - In the block theme we bumped only `

` to 2rem, leaving `