/* Theme Name: Redruth Town Council Description: Child theme for Redruth Town Council. Built on Unify by Unify Studio. Author: Unify Studio for Redruth Town Council Author URI: https://unify-studio.co.uk Template: unify * Version: 1.4.76 License: GNU General Public License v2 or later Text Domain: redruth */ /* ══════════════════════════════════════════════════════ REDRUTH TOWN COUNCIL — Design tokens ══════════════════════════════════════════════════════ */ :root { /* ── Brand palette (RTC 2026 rebrand — Plum-led) ────────────── Primary: Bright Plum #7F194F · Redruth Rose #EF4B78 · Redruth Black #2A3846 Secondary: Discover Purple #46337C · Cornish Blue #65A3D4 · Cornish Gold #EFCB52 · Discover Green #8D9638 Existing structural token names are kept and re-pointed at the brand colours below, so every selector flows through unchanged. */ /* Brand primaries */ --rtc-plum: #7F194F; /* Bright Plum — PRIMARY (hero / councillor bands, buttons, Read More) */ --rtc-plum-dark: #5E1339; /* hover / deep */ --rtc-rose: #EF4B78; /* Redruth Rose — ACCENT ONLY (~2.9:1 on white; never small text / white-on-rose) */ --rtc-rose-dark: #D43A66; --rtc-black: #2A3846; /* Redruth Black — dark anchor (footer, deep sections) */ --rtc-black-dark: #1F2A33; /* Brand secondaries (re-hued — lighter / brighter than the old palette) */ --rtc-purple: #46337C; /* Discover Purple (new — no prior equivalent) */ --rtc-blue: #65A3D4; /* Cornish Blue (light — use dark text on fills) */ --rtc-blue-dark: #4F8CBE; /* hover */ --rtc-gold: #EFCB52; /* Cornish Gold (light — use dark text on fills) */ --rtc-gold-light: #F3D56E; /* hover (lighter) */ --rtc-green: #8D9638; /* Discover Green */ --rtc-green-dark: #767E2E; /* hover */ /* ── Structural aliases — kept so existing selectors keep working ── */ --rtc-navy: var(--rtc-black); /* dark anchor = Redruth Black */ --rtc-navy-dark: var(--rtc-black-dark); --rtc-pink: var(--rtc-rose); /* accent = Redruth Rose */ --rtc-pink-dark: var(--rtc-rose-dark); --rtc-berry: var(--rtc-plum); /* deep panels = Bright Plum */ --rtc-berry-dark: var(--rtc-plum-dark); --rtc-burgundy: var(--rtc-plum); /* the re-warm: burgundy → Bright Plum */ --rtc-burgundy-dark: var(--rtc-plum-dark); /* ── Neutrals ── */ --rtc-text: #1E1E23; /* main font colour */ --rtc-text-muted: #5A5A5A; --rtc-off-white: #F5F4F0; --rtc-bg-alt: #ECEAE4; --rtc-gold-tint: #FDF7E3; /* pale Cornish Gold wash — "upcoming" panels (dark text only) */ --unify-slider-bg: var(--rtc-black-dark); /* Hero Slider fill behind photos (contrast fallback) */ --rtc-white: #FFFFFF; --rtc-error: #A4262C; /* form errors — 7:1 on white */ /* ── Unify aliases (point at the brand tokens) ── */ --unify-primary: var(--rtc-navy); --unify-secondary: var(--rtc-navy-dark); --unify-accent: var(--rtc-gold); --unify-bg: var(--rtc-off-white); --unify-bg-alt: var(--rtc-bg-alt); --unify-text: var(--rtc-text); --unify-text-muted: var(--rtc-text-muted); --unify-border: rgba(42, 56, 69, 0.15); --unify-max-width: 1440px; /* inner content grid (matches Figma) */ /* ── Type family + weights ── */ --unify-font-heading: "proxima-nova", sans-serif; --unify-font-body: "proxima-nova", sans-serif; --rtc-weight-regular: 400; --rtc-weight-semibold: 600; --rtc-weight-bold: 700; /* ── Fluid type scale ────────────────────────────── Each value is mobile-min → desktop-max. The max equals the design size and is capped, so type never overshoots on large screens; the min is a comfortable mobile size. Fluid between ~380px and ~1280px viewport. Comments show the px range. */ --rtc-fs-h1: clamp(2.25rem, 1.62rem + 2.67vw, 3.75rem); /* 36 → 60 */ --rtc-fs-h2: clamp(1.875rem, 1.48rem + 1.67vw, 2.8125rem); /* 30 → 45 section heading */ --rtc-fs-h2-sm: clamp(1.4375rem, 1.25rem + 0.78vw, 1.875rem); /* 23 → 30 services / report intro */ --rtc-fs-h3: clamp(1.625rem, 1.39rem + 1.00vw, 2.1875rem); /* 26 → 35 */ --rtc-fs-h3-sm: clamp(1.375rem, 1.24rem + 0.56vw, 1.6875rem); /* 22 → 27 report-issue accordion title */ --rtc-fs-h3-xs: clamp(1.125rem, 1.02rem + 0.44vw, 1.375rem); /* 18 → 22 services box / sub-menu */ --rtc-fs-h4: clamp(1.375rem, 1.22rem + 0.67vw, 1.75rem); /* 22 → 28 featured news headline */ --rtc-fs-body: 1.0625rem; /* 17 (bumped from 16 for readability) */ /* ── Line heights ── */ --rtc-lh-tight: 1.1; --rtc-lh-heading: 1.2; --rtc-lh-body: 1.6; /* ── Nav ── */ --unify-nav-height: 64px; --unify-nav-bg: var(--rtc-white); --unify-nav-color: var(--rtc-text); /* ── Radius ── */ --unify-radius-md: 4px; --unify-radius-pill: 50px; } /* ══════════════════════════════════════════════════════ MOURNING MODE — Unify Mourning plugin While mourning mode is on the plugin adds body.unify-mourning, and every brand token re-points to black and grey. Set on :root (via :has) so the aliases above (--rtc-navy, --rtc-burgundy, --unify-primary…) follow. Light greys keep dark text and dark greys keep white text, as the brand colours they replace do, so contrast holds or improves: plum #2B2B2B / purple #333333 / blue #4A4A4A / green #555555 with white: 7.5–14:1 gold #D9D9D9 with #1E1E23 text: 11:1; as a focus ring on black #1A1A1A: 12:1 rose #8C8C8C stays decorative (hover on the dark footer 5:1) ══════════════════════════════════════════════════════ */ :root:has(> body.unify-mourning) { --rtc-plum: #2B2B2B; --rtc-plum-dark: #121212; --rtc-rose: #8C8C8C; --rtc-rose-dark: #767676; --rtc-black: #1A1A1A; --rtc-black-dark: #0D0D0D; --rtc-purple: #333333; --rtc-blue: #4A4A4A; --rtc-blue-dark: #333333; --rtc-gold: #D9D9D9; --rtc-gold-light: #E6E6E6; --rtc-green: #555555; --rtc-green-dark: #3D3D3D; --rtc-off-white: #F5F5F5; --rtc-bg-alt: #EBEBEB; --rtc-gold-tint: #F2F2F2; --unify-border: rgba(26, 26, 26, 0.15); } /* ══════════════════════════════════════════════════════ GUTENBERG SPACING SCALE (forced) This is a classic theme (no theme.json). WordPress still emits its own copy of these spacing-preset variables — EMPTY — in a global-styles block that prints after this stylesheet, which blanks out the padding/margin the block editor sets via the spacing sliders, so they collapse to nothing on the front end. !important — and covering :root AND body, since WP may scope its version to body — makes our values win so the editor's spacing controls work site-wide. Values match WordPress core's default spacing scale. ══════════════════════════════════════════════════════ */ :root, body { --wp--preset--spacing--20: 0.44rem !important; --wp--preset--spacing--30: 0.67rem !important; --wp--preset--spacing--40: 1rem !important; --wp--preset--spacing--50: 1.5rem !important; --wp--preset--spacing--60: 2.25rem !important; --wp--preset--spacing--70: 3.38rem !important; --wp--preset--spacing--80: 5.06rem !important; } /* ══════════════════════════════════════════════════════ HOMEPAGE — slider sits flush under transparent nav ══════════════════════════════════════════════════════ */ .rtc-transparent-nav .rtc-main { padding-top: 0; } .rtc-transparent-nav .unify-hero-slider { margin-top: 0; } /* ══════════════════════════════════════════════════════ BASE TYPOGRAPHY ══════════════════════════════════════════════════════ */ body { background: var(--rtc-white); font-family: var(--unify-font-body); color: var(--rtc-text); font-size: var(--rtc-fs-body); font-weight: var(--rtc-weight-regular); line-height: var(--rtc-lh-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--unify-font-heading); color: var(--rtc-text); line-height: var(--rtc-lh-heading); } h1 { font-size: var(--rtc-fs-h1); font-weight: var(--rtc-weight-bold); line-height: var(--rtc-lh-tight); } h2 { font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); } h3 { font-size: var(--rtc-fs-h3); font-weight: var(--rtc-weight-semibold); } h4 { font-size: var(--rtc-fs-h4); font-weight: var(--rtc-weight-bold); } h5, h6 { font-weight: var(--rtc-weight-bold); } p { font-size: var(--rtc-fs-body); line-height: var(--rtc-lh-body); } /* Secondary heading variants from the design system — apply where needed */ .rtc-h2--intro { font-size: var(--rtc-fs-h2-sm); font-weight: var(--rtc-weight-semibold); } /* services / report intro */ .rtc-h3--accordion { font-size: var(--rtc-fs-h3-sm); font-weight: var(--rtc-weight-semibold); } /* report-issue accordion title */ .rtc-h3--compact { font-size: var(--rtc-fs-h3-xs); font-weight: var(--rtc-weight-bold); } /* services box title / right sub-menu */ a { color: var(--rtc-burgundy); } a:hover { color: var(--rtc-gold); opacity: 1; } /* ══════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════ */ .unify-nav { border-bottom: 1px solid rgba(42, 56, 69, 0.1); } .rtc-utility-bar { background: var(--rtc-burgundy); /* Updated so white links are visible */ border-bottom: 1px solid var(--unify-border); padding: 6px 0; font-size: 0.75rem; } .rtc-utility-bar__inner { max-width: var(--unify-max-width); margin-inline: auto; padding-inline: var(--unify-gutter); display: flex; justify-content: flex-end; align-items: center; gap: var(--unify-space-lg); } .rtc-utility-bar a { color: var(--rtc-white); /* Updated links to white */ text-decoration: none; font-size: 0.75rem; transition: color var(--unify-transition); } .rtc-utility-bar a:hover { color: var(--rtc-gold); /* Updated hover to gold */ } .rtc-report-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--rtc-burgundy); color: var(--rtc-white) !important; padding: 8px 18px; border-radius: var(--unify-radius-pill); font-size: 0.8rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background var(--unify-transition); } .rtc-report-btn:hover { background: var(--rtc-burgundy-dark); color: var(--rtc-white) !important; opacity: 1; } .rtc-report-btn svg { width: 14px; height: 14px; } /* ══════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════ */ .unify-btn { border-radius: var(--unify-radius-pill); font-weight: var(--rtc-weight-bold); letter-spacing: 0.06em; } .unify-btn--gold { background: var(--rtc-gold); border-color: var(--rtc-gold); color: var(--rtc-white); } .unify-btn--gold:hover { background: var(--rtc-gold-light); border-color: var(--rtc-gold-light); color: var(--rtc-white); opacity: 1; } .unify-btn--burgundy { background: var(--rtc-burgundy); border-color: var(--rtc-burgundy); color: var(--rtc-white); } .unify-btn--burgundy:hover { background: var(--rtc-burgundy-dark); border-color: var(--rtc-burgundy-dark); color: var(--rtc-white); opacity: 1; } .unify-btn--green { background: var(--rtc-green); border-color: var(--rtc-green); color: var(--rtc-white); } .unify-btn--green:hover { background: var(--rtc-green-dark); border-color: var(--rtc-green-dark); color: var(--rtc-white); opacity: 1; } /* Blue — used for document / agenda (PDF) buttons */ .unify-btn--blue { background: var(--rtc-blue); border-color: var(--rtc-blue); color: var(--rtc-white); } .unify-btn--blue:hover { background: var(--rtc-blue-dark); border-color: var(--rtc-blue-dark); color: var(--rtc-white); opacity: 1; } /* ── WPForms submit button — matched to the site's primary plum pill CTA. WPForms ships its own button styles, so the key visual properties carry !important to win reliably whichever markup mode is active. ── */ .wpforms-container .wpforms-submit, .wpforms-container button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: auto; background-color: var(--rtc-plum, #7F194F) !important; color: var(--rtc-white, #fff) !important; border: 1px solid var(--rtc-plum, #7F194F) !important; border-radius: var(--unify-radius-pill, 50px) !important; padding: 14px 32px !important; font-family: inherit; font-size: 0.95rem; font-weight: var(--rtc-weight-bold, 700); letter-spacing: 0.06em; line-height: 1.2; text-transform: none; box-shadow: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .wpforms-container .wpforms-submit:hover, .wpforms-container button[type="submit"]:hover, .wpforms-container .wpforms-submit:focus-visible, .wpforms-container button[type="submit"]:focus-visible { background-color: var(--rtc-plum-dark, #5E1339) !important; border-color: var(--rtc-plum-dark, #5E1339) !important; color: var(--rtc-white, #fff) !important; transform: translateY(-1px); } .wpforms-container .wpforms-submit:focus-visible, .wpforms-container button[type="submit"]:focus-visible { outline: 3px solid var(--rtc-purple, #46337C) !important; outline-offset: 2px; } .wpforms-container .wpforms-submit[disabled], .wpforms-container .wpforms-submit.wpforms-disabled { opacity: 0.6; cursor: default; transform: none; } /* ── WPForms layout — fill the column. WPForms fields default to the "Medium" size (~60% wide), which looks short. Force the container, fields and inputs to the full column width. ── */ .wpforms-container, .wpforms-container .wpforms-form { max-width: 100%; width: 100%; } .wpforms-container .wpforms-field { max-width: 100%; padding-left: 0; padding-right: 0; } .wpforms-container .wpforms-field-small, .wpforms-container .wpforms-field-medium, .wpforms-container .wpforms-field-large { max-width: 100% !important; width: 100%; } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="url"], .wpforms-container input[type="number"], .wpforms-container input[type="password"], .wpforms-container input[type="date"], .wpforms-container select, .wpforms-container textarea { width: 100%; max-width: 100%; box-sizing: border-box; } /* ── Media columns — image on top, text below, aligned across the row. Add "rtc-media-cols" to a Columns block (Advanced ▸ Additional CSS class). Every column's image is locked to one aspect ratio, so the text beneath starts on the same line regardless of the original image heights; each column is a flex column, so a trailing button pins to the bottom and the CTAs line up too. Ratio defaults to 16:9 — add a modifier for others. ── */ .rtc-media-cols .wp-block-column { display: flex; flex-direction: column; } .rtc-media-cols .wp-block-column > .wp-block-image, .rtc-media-cols .wp-block-column > figure.wp-block-image { margin: 0 0 1rem; } .rtc-media-cols .wp-block-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 12px; } /* Trailing button(s) drop to the bottom so they align across columns. */ .rtc-media-cols .wp-block-column > .wp-block-buttons:last-child, .rtc-media-cols .wp-block-column > .wp-block-button:last-child { margin-top: auto; } /* Aspect-ratio variants — add alongside rtc-media-cols. */ .rtc-media-cols.is-ratio-square .wp-block-image img { aspect-ratio: 1 / 1; } .rtc-media-cols.is-ratio-4-3 .wp-block-image img { aspect-ratio: 4 / 3; } .rtc-media-cols.is-ratio-3-2 .wp-block-image img { aspect-ratio: 3 / 2; } /* ══════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════ */ .rtc-hero { position: relative; height: 70vh; min-height: 480px; overflow: hidden; } .rtc-hero__media { position: absolute; inset: 0; } .rtc-hero__media img, .rtc-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; } .rtc-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100% ); } .rtc-hero__pause { position: absolute; top: 50%; right: var(--unify-gutter); transform: translateY(-50%); width: 48px; height: 48px; background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background var(--unify-transition); backdrop-filter: blur(4px); } .rtc-hero__pause:hover { background: rgba(255,255,255,0.35); } .rtc-hero__ctas { position: absolute; bottom: 0; left: 0; right: 0; display: flex; } .rtc-hero__cta { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; font-size: 0.9rem; font-weight: var(--rtc-weight-bold); text-decoration: none; transition: filter var(--unify-transition), opacity var(--unify-transition); gap: 8px; } .rtc-hero__cta:hover { filter: brightness(1.1); opacity: 1; } .rtc-hero__cta--gold { background: var(--rtc-gold); color: var(--rtc-white); } .rtc-hero__cta--green { background: var(--rtc-green); color: var(--rtc-white); } .rtc-hero__cta--burgundy { background: var(--rtc-burgundy); color: var(--rtc-white); } .rtc-hero__cta svg { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 640px) { .rtc-hero__ctas { flex-direction: column; } .rtc-hero { height: 60vh; } } /* ══════════════════════════════════════════════════════ HOW CAN WE HELP — 2x2 signpost card grid Authoritative here: the inline !important override in front-page.php was removed (v1.3.2), so this stylesheet is the single source. ══════════════════════════════════════════════════════ */ .rtc-help { background: var(--rtc-white); padding-top: var(--unify-space-section); padding-bottom: clamp(2rem, 4vw, 3.5rem); /* tighter gap down to the section below */ } .rtc-help__title { font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); margin-bottom: var(--unify-space-xl); color: var(--rtc-text); } .rtc-help__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .rtc-help-card { border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: 1.6fr 1fr; /* more room for the (now larger) text */ text-decoration: none; height: clamp(380px, 34vw, 500px); min-width: 0; box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rtc-help-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.16); opacity: 1; } .rtc-help-card__image-wrap { overflow: hidden; display: block; position: static; width: 100%; min-width: 0; } .rtc-help-card__image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .rtc-help-card:hover .rtc-help-card__image { transform: scale(1.04); } .rtc-help-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 26px; background: var(--rtc-off-white); transition: background 0.3s ease; position: static; min-width: 0; overflow: hidden; } .rtc-help-card:hover .rtc-help-card__body { background: var(--rtc-plum); } .rtc-help-card__title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .rtc-help-card__title { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); /* was max 20px — too timid */ font-weight: var(--rtc-weight-bold); color: var(--rtc-plum); margin: 0; line-height: 1.2; flex: 1; min-width: 0; transition: color 0.3s ease; } .rtc-help-card:hover .rtc-help-card__title { color: var(--rtc-white); } .rtc-help-card__text { font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.0625rem); /* ~15 → 17px, was max 14px */ font-weight: var(--rtc-weight-regular); color: var(--rtc-text); /* darker than muted — more legible at this size */ margin: 0; line-height: 1.55; transition: color 0.3s ease; } .rtc-help-card:hover .rtc-help-card__text { color: rgba(255,255,255,0.9); } .rtc-help-card__icon { width: 38px; height: 38px; min-width: 38px; max-width: 38px; border-radius: 50%; background: var(--rtc-plum); display: flex; align-items: center; justify-content: center; color: var(--rtc-white); flex-shrink: 0; transition: background 0.3s ease; padding: 0; border: none; font-size: 1rem; letter-spacing: 0; text-transform: none; box-sizing: content-box; } .rtc-help-card:hover .rtc-help-card__icon { background: rgba(255,255,255,0.25); outline: 1.5px solid rgba(255,255,255,0.5); } @media (max-width: 768px) { .rtc-help__grid { grid-template-columns: 1fr; gap: 14px; } /* Compact row on phones — image left, text right (as the What we do signposts) so the four cards don't run to several screens. */ .rtc-help-card { height: auto; grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); border-radius: 12px; } .rtc-help-card:hover { transform: none; } .rtc-help-card__image-wrap { position: relative; aspect-ratio: auto; min-height: 88px; } .rtc-help-card__image { position: absolute; inset: 0; } .rtc-help-card__body { gap: 6px; padding: 14px 16px; justify-content: center; } .rtc-help-card__title { font-size: 1.1rem; } .rtc-help-card__text { display: none; } /* title only on phones — keeps each card one short row */ .rtc-help-card__icon { width: 30px; height: 30px; min-width: 30px; max-width: 30px; } .rtc-help-card__icon svg { width: 15px; height: 15px; } } /* ══════════════════════════════════════════════════════ NEWS & EVENTS .rtc-news-card is ONE shared component used by both the homepage carousel and the news archive. The carousel section (.rtc-news) and its layout/JS live in front-page.php; the card itself lives here so the archive templates can reuse it. Carousel-only rules are scoped under .rtc-news / .rtc-news__track. ══════════════════════════════════════════════════════ */ .rtc-news { background: var(--rtc-gold); padding-block: var(--unify-space-section); } .rtc-news .unify-inner { position: relative; } .rtc-news__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--unify-space-xl); gap: var(--unify-space-md); } .rtc-news__title { font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); color: var(--rtc-text); margin: 0; } /* Arrows — circle at rest, grow into a pill on hover. Shape lives on a ::before so the layout box stays fixed (no neighbour shift) and the arrow icon stays centred. prev = outline, next = filled white. */ .rtc-news__arrows { display: flex; gap: 10px; align-items: center; } .rtc-news__arrow { position: relative; width: 64px; height: 44px; border: none; background: transparent; padding: 0; color: var(--rtc-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--unify-transition); } .rtc-news__arrow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; /* 44px circle centred in the 64px box */ right: 10px; border-radius: 999px; border: 2px solid var(--rtc-text); background: transparent; transition: left 0.32s cubic-bezier(.22, 1, .36, 1), right 0.32s cubic-bezier(.22, 1, .36, 1), background 0.2s ease, border-color 0.2s ease; z-index: 0; } .rtc-news__arrow svg { position: relative; z-index: 1; } .rtc-news__arrow--next::before { background: var(--rtc-white); border-color: var(--rtc-white); } /* Grow well past the box on hover for a decisive horizontal stretch */ .rtc-news__arrow:hover:not(:disabled)::before { left: -10px; right: -10px; } .rtc-news__arrow:disabled { opacity: 0.4; cursor: default; } /* Carousel — viewport clips the track inside the content container */ .rtc-news__viewport { overflow: hidden; margin-bottom: var(--unify-space-xl); } .rtc-news__track { --rtc-news-gap: 28px; display: flex; gap: var(--rtc-news-gap); transition: transform 0.45s cubic-bezier(.4, 0, .2, 1); will-change: transform; } /* ── Shared card — used by BOTH the homepage carousel and the news archive. No box behind the image or text; everything sits on the section background. ── */ .rtc-news-card { display: flex; flex-direction: column; text-decoration: none; color: var(--rtc-text); min-width: 0; } /* Image — rounded top-left + top-right only */ .rtc-news-card__image-wrap { border-radius: 20px 20px 0 0; overflow: hidden; display: block; margin-bottom: 18px; } .rtc-news-card__image { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.4s ease; } .rtc-news-card:hover .rtc-news-card__image { transform: scale(1.03); } /* Date */ .rtc-news-card__date { font-size: 1rem; color: var(--rtc-text); margin: 0 0 10px; } /* Title — H4 (featured news headline) */ .rtc-news-card__title { font-size: var(--rtc-fs-h4); font-weight: var(--rtc-weight-bold); color: var(--rtc-text); margin: 0 0 12px; line-height: 1.25; } /* Excerpt — 16px */ .rtc-news-card__excerpt { font-size: 1rem; /* 16 */ color: var(--rtc-text); margin: 0 0 24px; line-height: 1.5; } /* Read More — base = solid burgundy (used on the white archive background) */ .rtc-news-card__btn { display: inline-flex; align-items: center; margin-top: auto; padding: 13px 32px; border-radius: var(--unify-radius-pill); border: 2px solid var(--rtc-burgundy); background: var(--rtc-burgundy); color: var(--rtc-white); font-size: 0.95rem; font-weight: var(--rtc-weight-bold); align-self: flex-start; transition: background var(--unify-transition), border-color var(--unify-transition), color var(--unify-transition); } .rtc-news-card__btn:hover, .rtc-news-card:hover .rtc-news-card__btn { background: var(--rtc-burgundy-dark); border-color: var(--rtc-burgundy-dark); color: var(--rtc-white); } /* ── Carousel-only: 3-up flex sizing (the archive uses its own grid) ── */ .rtc-news__track .rtc-news-card { --per: 3; flex: 0 0 calc((100% - (var(--rtc-news-gap, 28px) * (var(--per) - 1))) / var(--per)); } /* News-card title — homepage carousel AND archive grid share one size, smaller than the base H4 (28px) which stays for any featured-lead use. */ .rtc-news__track .rtc-news-card__title, .rtc-news-grid .rtc-news-card__title { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); } @media (max-width: 1024px) { .rtc-news__track .rtc-news-card { --per: 2; } } @media (max-width: 680px) { .rtc-news__track .rtc-news-card { --per: 1.1; } } /* On the gold carousel the button is outline → white fill (per the design-system board) */ .rtc-news .rtc-news-card__btn { background: transparent; border-color: var(--rtc-text); color: var(--rtc-text); } .rtc-news .rtc-news-card__btn:hover, .rtc-news .rtc-news-card:hover .rtc-news-card__btn { background: var(--rtc-white); border-color: var(--rtc-white); color: var(--rtc-text); } .rtc-news__view-all { text-align: center; margin-top: 1rem; } .rtc-news__view-all-link { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: var(--rtc-weight-bold); color: var(--rtc-text); text-decoration: none; } .rtc-news__view-all-link .rtc-news__view-all-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--rtc-white); display: flex; align-items: center; justify-content: center; color: var(--rtc-text); flex-shrink: 0; } /* ══════════════════════════════════════════════════════ WELCOME / MISSION ══════════════════════════════════════════════════════ */ .rtc-welcome { background: var(--rtc-white); padding-top: clamp(3.25rem, 6vw, 5.5rem); /* breathing room above the welcome text */ padding-bottom: clamp(1rem, 2vw, 2rem); /* tight, so the townscape nestles up to it */ } .rtc-welcome__inner { display: grid; /* Heading column is capped so the two columns stay close together and the block reads as one unit instead of two stranded islands on wide screens. The whole inner is width-capped and centred for the same reason. */ grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; /* top-align the heading with the intro paragraph */ max-width: 1080px; margin-inline: auto; } .rtc-welcome__eyebrow { display: block; font-size: 0.7rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.2em; color: var(--rtc-plum); /* was --rtc-gold: failed WCAG on white (~1.5:1). Plum ≈ 9.7:1. */ margin-top: var(--unify-space-sm); /* sits below the title (design order) */ } .rtc-welcome__title { /* a

styled as a heading — the slider owns the page

*/ font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); line-height: var(--rtc-lh-heading); color: var(--rtc-text); margin: 0; } .rtc-welcome__text { font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3rem); /* lead paragraph: 18 → ~21px */ line-height: 1.55; color: var(--rtc-text); } @media (max-width: 768px) { .rtc-welcome__inner { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ TOWNSCAPE ILLUSTRATION — full-bleed band under Welcome ══════════════════════════════════════════════════════ */ .rtc-townscape { width: 100%; background: var(--rtc-white); line-height: 0; /* kills the inline-image baseline gap */ } .rtc-townscape img { display: block; width: 100%; height: auto; } /* Placeholder — delete this rule and swap the markup for an once the real artwork is exported from Figma. */ .rtc-townscape--placeholder { min-height: clamp(180px, 22vw, 320px); display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient( 45deg, var(--rtc-bg-alt), var(--rtc-bg-alt) 14px, var(--rtc-off-white) 14px, var(--rtc-off-white) 28px ); color: var(--rtc-text-muted); font-size: 0.8rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.4; } /* ══════════════════════════════════════════════════════ 50/50 SPLIT SECTION ══════════════════════════════════════════════════════ */ .rtc-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; } .rtc-split__image { overflow: hidden; } .rtc-split__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .rtc-split__content { background: var(--rtc-burgundy); padding: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: var(--unify-space-md); } .rtc-split__eyebrow { font-size: 0.7rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.2em; color: var(--rtc-gold); /* was rgba(255,255,255,.6) ≈ 4.4:1 on the dark panel; gold ≈ 6:1 and reads as an accent */ } .rtc-split__title { font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); color: var(--rtc-white); line-height: 1.2; margin: 0; } .rtc-split__text { font-size: var(--rtc-fs-body); line-height: var(--rtc-lh-body); color: rgba(255,255,255,0.85); margin: 0; } /* Mirrored variant (optional second band): content on the left, image on the right, so stacked sections alternate. On mobile the content leads. */ .rtc-split--reverse .rtc-split__content { order: 1; } .rtc-split--reverse .rtc-split__image { order: 2; } @media (max-width: 768px) { .rtc-split { grid-template-columns: 1fr; } .rtc-split__image { min-height: 280px; } } /* ══════════════════════════════════════════════════════ COUNCILLORS CPT — horizontal cards in a 2-col grid, ward filter tabs, and a map CTA bar. ══════════════════════════════════════════════════════ */ /* ── Ward filter tabs — segmented control ── */ .rtc-ward-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 auto var(--unify-space-2xl); overflow-x: auto; background: var(--rtc-bg-alt); border-radius: var(--unify-radius-pill); } .rtc-ward-tab { flex: 0 0 auto; white-space: nowrap; border: none; cursor: pointer; font-family: var(--unify-font-body); font-size: 1rem; font-weight: var(--rtc-weight-bold); color: var(--rtc-text); background: transparent; padding: 15px 32px; border-radius: var(--unify-radius-pill); transition: background 0.2s ease, color 0.2s ease; } .rtc-ward-tab:not(.is-active):hover { background: rgba(42, 56, 69, 0.06); } .rtc-ward-tab.is-active { background: var(--rtc-burgundy); color: var(--rtc-white); } /* ── Grid ── */ .rtc-councillors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } /* ── Card — photo left, details right ── */ .rtc-councillor-card { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; background: var(--rtc-off-white); border: 1px solid var(--unify-border); border-radius: 14px; padding: 22px; } .rtc-councillor-card__media { width: 150px; } .rtc-councillor-card__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: 10px; display: block; } .rtc-councillor-card__photo--placeholder { aspect-ratio: 1 / 1; background: var(--unify-bg-alt); display: flex; align-items: center; justify-content: center; color: var(--rtc-text-muted); font-size: 3rem; } .rtc-councillor-card__info { min-width: 0; } .rtc-councillor-card__name { font-size: 1.2rem; font-weight: var(--rtc-weight-bold); color: var(--rtc-text); margin: 0 0 2px; } /* Sub-label = ward (design shows the ward here, not the role) */ .rtc-councillor-card__role { font-size: 0.8rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rtc-burgundy); margin: 0 0 var(--unify-space-sm); } .rtc-councillor-card__address { font-size: 0.95rem; color: var(--rtc-text-muted); line-height: 1.6; margin: 0 0 var(--unify-space-sm); white-space: pre-line; } .rtc-councillor-card__phone { font-size: 0.95rem; color: var(--rtc-text); margin: 0 0 4px; } .rtc-councillor-card__phone a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .rtc-councillor-card__email { display: inline-block; font-size: 0.95rem; color: var(--rtc-burgundy); margin: 0 0 var(--unify-space-sm); overflow-wrap: anywhere; } /* Download Document — grey pill button (matches the design) */ .rtc-councillor-card__doc { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 18px; border-radius: var(--unify-radius-pill); background: var(--rtc-bg-alt); color: var(--rtc-burgundy); font-size: 0.78rem; font-weight: var(--rtc-weight-bold); text-decoration: none; transition: background 0.2s ease; } .rtc-councillor-card__doc:hover { background: #ddd8cf; color: var(--rtc-burgundy); opacity: 1; } /* Committee chips — link through to the committee's documents */ .rtc-councillor-card__committees { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .rtc-councillor-card__committee { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--unify-radius-pill, 50px); background: rgba(127,25,79,0.08); color: var(--rtc-plum, #7F194F); font-size: 0.72rem; font-weight: var(--rtc-weight-semibold, 600); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } a.rtc-councillor-card__committee:hover, a.rtc-councillor-card__committee:focus-visible { background: var(--rtc-plum, #7F194F); color: #fff; } /* Retained for single-ward [rtc_councillors ward="…"] usage (no tabs) */ .rtc-ward-heading { font-size: var(--rtc-fs-h3-sm); font-weight: var(--rtc-weight-semibold); color: var(--rtc-text); text-align: center; margin: var(--unify-space-2xl) 0 var(--unify-space-lg); padding-bottom: var(--unify-space-sm); border-bottom: 2px solid var(--rtc-pink); } /* ── Map CTA bar (sits below the cards) ── */ .rtc-councillor-map-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; background: var(--rtc-bg-alt); border-radius: 16px; padding: 24px 32px; margin-top: var(--unify-space-2xl); } .rtc-councillor-map-cta__text { font-size: 1rem; font-weight: var(--rtc-weight-bold); color: var(--rtc-text); margin: 0; } .rtc-councillor-map-cta__btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--rtc-burgundy); color: var(--rtc-white); padding: 12px 26px; border-radius: var(--unify-radius-pill); font-size: 0.85rem; font-weight: var(--rtc-weight-bold); text-decoration: none; transition: background 0.2s ease; } .rtc-councillor-map-cta__btn:hover { background: var(--rtc-burgundy-dark); color: var(--rtc-white); opacity: 1; } /* Centred page-header variant (opt-in via .rtc-page-header--center) */ .rtc-page-header--center { text-align: center; } @media (max-width: 768px) { .rtc-councillors-grid { grid-template-columns: 1fr; } } /* Phones: small round photo so each card is roughly one screen or less (council feedback on Councillors page scroll depth). */ @media (max-width: 560px) { .rtc-councillors-grid { gap: 14px; } .rtc-councillor-card { grid-template-columns: 72px 1fr; gap: 14px; padding: 14px; } .rtc-councillor-card__media { width: 72px; } .rtc-councillor-card__photo { border-radius: 50%; } } /* ══════════════════════════════════════════════════════ JOIN OUR NEWSLETTER — full-bleed 50/50 split One component (template-parts/section-newsletter.php) on every page that has it. Form = Unify Opt-in plugin, themed via its --uoi-* properties. ══════════════════════════════════════════════════════ */ .rtc-newsletter { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; } .rtc-newsletter__media { overflow: hidden; background: var(--rtc-bg-alt) center / cover no-repeat; /* swap: background-image: url(.../building.jpg); — or drop an inside */ } .rtc-newsletter__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .rtc-newsletter__content { background: var(--rtc-burgundy); padding: clamp(2.5rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: var(--unify-space-lg); } .rtc-newsletter__title { font-size: var(--rtc-fs-h3); font-weight: var(--rtc-weight-semibold); color: var(--rtc-white); margin: 0; } .rtc-newsletter__form { display: flex; flex-direction: column; gap: var(--unify-space-md); } .rtc-newsletter__field { display: flex; flex-direction: column; gap: 6px; } .rtc-newsletter__label { font-size: 0.8rem; font-weight: var(--rtc-weight-bold); color: rgba(255,255,255,0.9); } .rtc-newsletter__input { width: 100%; padding: 12px 22px; border-radius: var(--unify-radius-pill); border: 1.5px solid rgba(255,255,255,0.6); background: transparent; color: var(--rtc-white); font-family: var(--unify-font-body); font-size: 0.95rem; } .rtc-newsletter__input::placeholder { color: rgba(255,255,255,0.5); } .rtc-newsletter__input:focus { outline: none; border-color: var(--rtc-white); } .rtc-newsletter__btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 6px; padding: 12px 28px; border: none; cursor: pointer; border-radius: var(--unify-radius-pill); background: var(--rtc-white); color: var(--rtc-burgundy); font-family: var(--unify-font-body); font-size: 0.9rem; font-weight: var(--rtc-weight-bold); transition: background 0.2s ease, color 0.2s ease; } .rtc-newsletter__btn:hover { background: var(--rtc-off-white); color: var(--rtc-burgundy); } /* No image set → the form column runs full width, content centred. */ .rtc-newsletter--no-image { grid-template-columns: 1fr; min-height: 0; } .rtc-newsletter--no-image .rtc-newsletter__content { align-items: center; text-align: center; } .rtc-newsletter--no-image .unify-optin-inline { width: 100%; max-width: 640px; } /* Live opt-in form on the plum column (white on Bright Plum ≈ 9.8:1). */ .rtc-newsletter__content .unify-optin-inline { max-width: none; --uoi-text: var(--rtc-white); --uoi-muted: rgba(255,255,255,0.85); --uoi-field-bg: transparent; --uoi-field-text: var(--rtc-white); --uoi-field-border: rgba(255,255,255,0.6); --uoi-field-focus: var(--rtc-gold); --uoi-btn-bg: var(--rtc-white); --uoi-btn-bg-hover: var(--rtc-off-white); --uoi-btn-text: var(--rtc-plum); --uoi-btn-border: 2px solid var(--rtc-white); --uoi-btn-border-hover: var(--rtc-off-white); --uoi-radius: var(--unify-radius-pill); --uoi-gap: 14px; --uoi-error: var(--rtc-gold-light); --uoi-success: var(--rtc-white); } .rtc-newsletter__content .unify-optin-inline__input { padding: 12px 22px; font-family: var(--unify-font-body); font-size: 0.95rem; } .rtc-newsletter__content .unify-optin-inline__submit { padding: 12px 28px; font-family: var(--unify-font-body); font-size: 0.9rem; font-weight: var(--rtc-weight-bold); } .rtc-newsletter__content .unify-optin-inline__input:focus-visible, .rtc-newsletter__content .unify-optin-inline__submit:focus-visible { outline: 3px solid var(--rtc-gold); outline-offset: 2px; } /* Consent row + status message on plum. */ .rtc-newsletter__content .unify-optin-inline__consent { font-size: 0.9rem; } .rtc-newsletter__content .unify-optin-inline__consent a { color: var(--rtc-white); } .rtc-newsletter__content .unify-optin-inline__consent input { width: 1.25rem; height: 1.25rem; } .rtc-newsletter__content .unify-optin-inline__consent input:focus-visible { outline: 3px solid var(--rtc-gold); outline-offset: 2px; } .rtc-newsletter__content .unify-optin-inline__input::placeholder { color: rgba(255,255,255,0.7); } .rtc-newsletter__content .unify-optin-inline__message { font-size: 1rem; } /* Admin-only "connect Mailchimp" hint keeps the plugin's own dark-on-cream colours. */ .rtc-newsletter__content .unify-optin-inline__notice { max-width: 640px; } @media (max-width: 768px) { .rtc-newsletter { grid-template-columns: 1fr; } .rtc-newsletter__media { min-height: 280px; } } /* ══════════════════════════════════════════════════════ COUNCIL SERVICES — archive grid + single (content + sidebar) ══════════════════════════════════════════════════════ */ /* Blue page-header variant (services use blue, not burgundy) */ .rtc-page-header--blue { background: var(--rtc-blue); } /* ── Archive intro ── */ .rtc-services-intro { text-align: center; max-width: 620px; margin: 0 auto var(--unify-space-2xl); font-size: var(--rtc-fs-h3-xs); color: var(--rtc-text); line-height: 1.4; } /* ── Archive grid ── */ .rtc-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rtc-service-card { display: flex; flex-direction: column; gap: 10px; background: var(--rtc-bg-alt); border-radius: 14px; padding: 24px 26px; text-decoration: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .rtc-service-card:hover { background: var(--rtc-blue); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.12); opacity: 1; } .rtc-service-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .rtc-service-card__title { font-size: var(--rtc-fs-h3-xs); font-weight: var(--rtc-weight-bold); color: var(--rtc-text); margin: 0; line-height: 1.2; transition: color 0.25s ease; } .rtc-service-card:hover .rtc-service-card__title { color: var(--rtc-white); } .rtc-service-card__desc { font-size: 0.9rem; color: var(--rtc-text-muted); margin: 0; line-height: 1.5; transition: color 0.25s ease; } .rtc-service-card:hover .rtc-service-card__desc { color: rgba(255,255,255,0.9); } .rtc-service-card__icon { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: var(--rtc-blue); color: var(--rtc-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.25s ease; } .rtc-service-card:hover .rtc-service-card__icon { background: rgba(255,255,255,0.25); outline: 1.5px solid rgba(255,255,255,0.6); } @media (max-width: 900px) { .rtc-services-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .rtc-services-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════ LAYOUT / GUTENBERG UTILITIES ══════════════════════════════════════════════════════ */ /* Narrower inner container (1200) — used by the report-an-issue accordion and the Council Documents plugin. */ .rtc-inner-narrow { max-width: 1200px; margin-inline: auto; padding-inline: var(--unify-gutter); } /* Signpost card for Gutenberg — add "rtc-signpost" to a Group block's Additional CSS class(es). Build the group as: Image, then Heading (and an optional paragraph). Rounds the corners, sits the image flush to the top, and applies the theme's padding + type. */ .rtc-signpost { display: flex; flex-direction: column; height: 100%; /* fills its column so cards align top AND bottom */ border-radius: 16px; overflow: hidden; background: var(--rtc-white, #fff); /* white so cards stand out on any section colour */ box-shadow: 0 4px 16px rgba(0,0,0,0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .rtc-signpost:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.16); } .rtc-signpost figure, .rtc-signpost .wp-block-image { margin: 0; width: 100%; } /* Fixed image band — every card's image renders the same height regardless of the uploaded file's dimensions, so the titles below always line up. Change the ratio here (e.g. 3 / 2 or 4 / 3) to taste. */ .rtc-signpost .wp-block-image img, .rtc-signpost figure img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; /* crops to fill the band, never stretches/distorts */ } .rtc-signpost .wp-block-heading, .rtc-signpost h2, .rtc-signpost h3, .rtc-signpost h4 { margin: 0; padding: 20px 24px; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); /* was inheriting the full heading scale → too big */ line-height: 1.25; color: var(--rtc-burgundy); /* Plum — ties the title to the "View here" link (was Discover Green) */ font-weight: var(--rtc-weight-bold); } .rtc-signpost p { margin: 0; padding: 0 24px 22px; color: var(--rtc-text-muted); } /* Call-to-action link in a signpost card — gets the shared diagonal arrow for consistency with the hero CTA cards (rendered in the link's own colour via a mask, so it always matches). Targets a link that's the only thing on its line (a standalone "Discover more" link), so links inside body copy are left alone. No underline on these card links — the arrow nudge is the hover cue. */ .rtc-signpost p > a:only-child, .rtc-signpost > a:only-child { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--rtc-weight-semibold, 600); text-decoration: none; } .rtc-signpost p > a:only-child:hover, .rtc-signpost > a:only-child:hover { text-decoration: none; } .rtc-signpost p > a:only-child::after, .rtc-signpost > a:only-child::after { content: ""; width: 1em; height: 1em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.18s ease; } .rtc-signpost p > a:only-child:hover::after, .rtc-signpost > a:only-child:hover::after { transform: translate(2px, -2px); } /* Linked title (set automatically from the old "View here" link, or by linking the heading in the editor). The link stretches over the whole card so image, title and text are one tap target. */ .rtc-signpost { position: relative; } .rtc-signpost :is(h2, h3, h4) a { color: inherit; text-decoration: none; } .rtc-signpost :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .rtc-signpost:hover :is(h2, h3, h4) a { text-decoration: underline; text-underline-offset: 3px; } .rtc-signpost :is(h2, h3, h4) a:focus-visible { outline: none; } .rtc-signpost:has(:is(h2, h3, h4) a:focus-visible) { outline: 3px solid var(--rtc-purple); outline-offset: 3px; } /* Other links inside the card text stay clickable above the stretched link. */ .rtc-signpost p a { position: relative; z-index: 2; } /* Mobile: compact row — small square image left, title and link right — so a stack of signposts doesn't run to several screens (council feedback: reduce scroll depth). Works with or without the group's inner container. */ @media (max-width: 781px) { .wp-block-columns:has(.rtc-signpost) { gap: 12px; margin-bottom: 12px; } .rtc-signpost { height: auto; border-radius: 12px; } .rtc-signpost:hover { transform: none; } .rtc-signpost:not(:has(> .wp-block-group__inner-container)), .rtc-signpost > .wp-block-group__inner-container { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-auto-rows: auto; gap: 0 16px !important; /* WP's block-gap (is-layout-*) would otherwise add a row gap between every implicit row */ align-content: center; min-height: 96px; } .rtc-signpost figure, .rtc-signpost .wp-block-image { grid-column: 1; grid-row: 1 / span 3; position: relative; width: 96px !important; height: auto !important; min-height: 96px; max-height: none; margin: 0 !important; align-self: stretch; overflow: hidden; } /* !important beats the width/height/aspect-ratio the image block writes inline, which otherwise keeps a portrait photo at full height. */ .rtc-signpost .wp-block-image img, .rtc-signpost figure img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; aspect-ratio: auto !important; object-fit: cover !important; } .rtc-signpost .wp-block-image a { position: static; } .rtc-signpost > *, .rtc-signpost > .wp-block-group__inner-container > * { margin-block: 0 !important; } .rtc-signpost > :not(figure):not(.wp-block-image), .rtc-signpost > .wp-block-group__inner-container > :not(figure):not(.wp-block-image) { grid-column: 2; } /* Empty paragraphs or spacers left in the card would add rows. */ .rtc-signpost :is(p:empty, .wp-block-spacer) { display: none; } .rtc-signpost .wp-block-heading, .rtc-signpost h2, .rtc-signpost h3, .rtc-signpost h4 { padding: 14px 16px 4px 0; font-size: 1.05rem; align-self: end; } .rtc-signpost p { padding: 0 16px 14px 0; font-size: .98rem; } /* Title-only card: centre the title in the row. */ .rtc-signpost :is(h2, h3, h4):last-child { padding-block: 14px; align-self: center; grid-row: 1 / span 3; } } /* ══════════════════════════════════════════════════════ FULL-WIDTH GROUP ALIGNMENT A full-width Group spans the viewport but caps its inner blocks to theme.json contentSize with no side gutter, so they don't line up with ordinary page content (which sits in .unify-inner = max-width + gutter). Re-point a full-width group's default-width children to the SAME box as .unify-inner, on every screen size. Wide / full children keep their own alignment. Uses the theme's own vars, so it stays correct whatever the gutter is. ══════════════════════════════════════════════════════ */ .wp-block-group.alignfull > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.wp-block-group__inner-container)), .wp-block-group.alignfull > .wp-block-group__inner-container > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)) { max-width: var(--unify-max-width, 1440px); margin-inline: auto; padding-inline: var(--unify-gutter, 2rem); box-sizing: border-box; } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .unify-footer { background: var(--rtc-white); color: var(--rtc-text); position: relative; overflow: hidden; /* contains the clock tower bleed */ } /* Keep all footer content above the decorative tower */ .unify-footer > * { position: relative; z-index: 1; } .rtc-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); padding-bottom: var(--unify-space-xl); border-bottom: 1px solid var(--unify-border); } .rtc-footer__brand-name { font-size: 0.95rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--rtc-burgundy); margin-bottom: var(--unify-space-md); } .rtc-footer__contact p { font-size: 1rem; color: var(--rtc-text); line-height: 1.7; margin: 0 0 4px; } .rtc-footer__contact a { color: var(--rtc-text); text-decoration: none; transition: color var(--unify-transition); } .rtc-footer__contact a:hover { color: var(--rtc-pink); } .rtc-footer__col-title { font-size: 0.85rem; font-weight: var(--rtc-weight-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--rtc-text-muted); margin-bottom: var(--unify-space-md); } .rtc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rtc-footer__links a { font-size: 1rem; color: var(--rtc-text); text-decoration: none; transition: color var(--unify-transition); } .rtc-footer__links a:hover { color: var(--rtc-pink); } .rtc-footer__socials { display: flex; flex-direction: column; gap: 12px; } .rtc-footer__socials a { font-size: 1rem; color: var(--rtc-text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: color var(--unify-transition); } .rtc-footer__socials a:hover { color: var(--rtc-pink); } .rtc-footer__socials svg { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; /* icon follows the link colour, incl. hover */ } .rtc-footer__bar { display: flex; align-items: center; justify-content: space-between; padding-top: var(--unify-space-lg); flex-wrap: wrap; gap: var(--unify-space-md); } .rtc-footer__bar p, .rtc-footer__bar a { font-size: 0.85rem; color: var(--rtc-text-muted); text-decoration: none; } .rtc-footer__bar a:hover { color: var(--rtc-plum); /* was Rose — 2.9:1 on white, too light for small text */ text-decoration: underline; text-underline-offset: 3px; } .rtc-footer__bar a:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 3px; border-radius: 2px; } /* Legal links — one horizontal row (menu location "Footer — Legal links"). */ .rtc-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; } .rtc-footer__legal li { margin: 0; padding: 0; } .rtc-footer__legal a { display: inline-block; padding-block: 6px; } /* ~30px tap height */ /* "Cookie settings" — a button (opens the consent banner) styled to match the links. */ .rtc-footer__cookie-btn { display: inline-block; padding: 6px 0; margin: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--rtc-text-muted); text-decoration: none; cursor: pointer; } .rtc-footer__cookie-btn:hover { color: var(--rtc-plum); text-decoration: underline; text-underline-offset: 3px; } .rtc-footer__cookie-btn:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 3px; border-radius: 2px; } @media (max-width: 600px) { .rtc-footer__bar { flex-direction: column; align-items: flex-start; gap: .5rem; } .rtc-footer__legal-nav { order: -1; } } /* ── Clock tower — bleeds up from the footer's bottom-right ────────── url() is relative to this stylesheet (theme root), so it resolves to /assets/clock-tower.svg. Keep this rule in style.css. */ .unify-footer::after { content: ""; position: absolute; bottom: 0; /* anchor the tower's right edge to the content edge on wide screens, and to the viewport edge once the viewport is narrower than the grid */ right: calc(50% - min(50%, (var(--unify-max-width) / 2))); height: 100%; width: clamp(110px, 15vw, 185px); background: url(assets/clock-tower.svg) right bottom / contain no-repeat; pointer-events: none; z-index: 0; } /* Reserve room on the right so the columns clear the tower. Matches the grid's stack breakpoint (768px) so there's no in-between window where 3 columns and a full-size tower fight for space. */ @media (min-width: 769px) { .rtc-footer__grid, .rtc-footer__bar { padding-right: clamp(150px, 16vw, 210px); } } @media (max-width: 768px) { .rtc-footer__grid { grid-template-columns: 1fr; } /* Tower steps back so it never sits on top of the stacked text */ .unify-footer::after { opacity: 0.12; width: 130px; } } /* ══════════════════════════════════════════════════════ UTILITY — page header banner ══════════════════════════════════════════════════════ */ .rtc-page-header { background: var(--rtc-plum); /* was Cornish Blue — white title needs a dark bg (plum, on-brand) */ padding: clamp(2.5rem, 5vw, 4rem) 0; margin-bottom: var(--unify-space-2xl); } .rtc-page-header__title { font-size: var(--rtc-fs-h1); font-weight: var(--rtc-weight-bold); line-height: var(--rtc-lh-tight); color: var(--rtc-white); margin: 0; } .rtc-page-header__breadcrumb { font-size: 0.95rem; color: rgba(255,255,255,0.8); margin-top: var(--unify-space-sm); } .rtc-page-header__breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; } .rtc-page-header__breadcrumb a:hover { color: var(--rtc-white); opacity: 1; } /* ══════════════════════════════════════════════════════ UPCOMING MEETINGS SECTION (Homepage) ══════════════════════════════════════════════════════ */ .rtc-upcoming-meetings { background: var(--rtc-white); padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); } .rtc-upcoming-meetings__title { font-size: var(--rtc-fs-h2); font-weight: var(--rtc-weight-semibold); color: var(--rtc-text); margin: 0 0 var(--unify-space-xl, 2.5rem); } /* Visually hidden, still read by screen readers (shared utility). */ .rtc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════ HOMEPAGE QUICK ACTIONS (mobile only — front-page.php) ══════════════════════════════════════════════════════ */ .rtc-home-quick { display: none; } @media (max-width: 768px) { .rtc-home-quick { display: block; background: var(--rtc-off-white); padding-block: 1.25rem; } .rtc-home-quick__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .rtc-home-quick__link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 20px; border-radius: var(--unify-radius-pill); background: var(--rtc-plum); color: var(--rtc-white); font-weight: var(--rtc-weight-bold); text-decoration: none; } .rtc-home-quick__link::after { content: "\2192"; margin-left: 12px; } .rtc-home-quick__link:hover { background: var(--rtc-plum-dark); color: var(--rtc-white); } .rtc-home-quick__link:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 2px; } } /* ══════════════════════════════════════════════════════ COUNCIL DOCUMENTS PLUGIN ([council_documents], Meetings page) The plugin exposes --cd-* colour hooks; map them to RTC tokens here. "body" lifts specificity: the plugin's stylesheet is enqueued by the shortcode, so it prints after this file and would otherwise win. ══════════════════════════════════════════════════════ */ body .cd-wrap { --cd-text: var(--rtc-text); --cd-muted: var(--rtc-text-muted); --cd-accent: var(--rtc-plum); --cd-accent-hover: var(--rtc-plum-dark); --cd-on-accent: var(--rtc-white); --cd-focus: var(--rtc-purple); --cd-surface: var(--rtc-white); --cd-surface-alt: var(--rtc-off-white); --cd-border: var(--rtc-bg-alt); --cd-highlight: var(--rtc-gold); --cd-on-highlight: var(--rtc-black); --cd-upcoming-bg: var(--rtc-gold-tint); --cd-radius: 14px; } /* ══════════════════════════════════════════════════════ RECENT MEETINGS PANEL (Shortcode: [council_recent_meetings]) ══════════════════════════════════════════════════════ */ .cd-panel-wrap { background-color: var(--rtc-bg-alt); border-radius: 16px; padding: clamp(20px, 3vw, 30px); font-family: var(--unify-font-body); color: var(--rtc-text); margin: var(--unify-space-xl, 2rem) 0; } .cd-rm-grid { display: grid; grid-template-columns: 2.5fr 2fr 1fr 1.5fr 1.5fr; align-items: center; gap: 15px; padding: 20px 0; } .cd-rm-header { font-weight: var(--rtc-weight-bold); color: var(--rtc-text-muted); border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 15px; padding-top: 0; } .cd-rm-row { border-bottom: 1px solid rgba(0,0,0,0.1); } .cd-rm-row:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); } .cd-rm-col strong { font-weight: var(--rtc-weight-bold); color: var(--rtc-text); } .cd-rm-btn { display: inline-flex; align-items: center; background-color: var(--rtc-white); color: var(--rtc-plum); /* was Cornish Blue — 2.6:1 on white, too light for 14px text */ padding: 8px 20px; border-radius: var(--unify-radius-pill); text-decoration: none !important; font-weight: var(--rtc-weight-bold); font-size: 0.85rem; transition: all 0.2s ease; border: 2px solid transparent; } .cd-rm-btn:hover { background-color: var(--rtc-plum); color: var(--rtc-white); } .cd-rm-btn:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 2px; } .cd-rm-ext { font-size: 0.6rem; background-color: var(--rtc-off-white); padding: 2px 4px; border-radius: var(--unify-radius-md); margin-left: 8px; margin-right: 4px; color: var(--rtc-plum); transition: all 0.2s ease; } .cd-rm-btn:hover .cd-rm-ext { background-color: var(--rtc-white); color: var(--rtc-plum); } .cd-rm-footer { text-align: center; padding-top: 25px; } .cd-rm-view-all { display: inline-flex; align-items: center; color: var(--rtc-text); font-weight: var(--rtc-weight-bold); text-decoration: none !important; font-size: 1rem; transition: opacity 0.2s ease; } .cd-rm-view-all:hover { opacity: 0.8; } .cd-rm-arrow { display: inline-flex; align-items: center; justify-content: center; background-color: var(--rtc-blue); color: var(--rtc-white); width: 24px; height: 24px; border-radius: 50%; margin-left: 10px; } /* Mobile Responsiveness */ @media (max-width: 800px) { .cd-rm-grid { grid-template-columns: 1fr; gap: 8px; } .cd-rm-header { display: none; } /* Left-aligned on phones (centred text was hard to scan). The column header is hidden here, so each detail gets its own small label. */ .cd-rm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 0; text-align: left; } .cd-rm-row .cd-rm-title { flex: 0 0 100%; font-size: 1.05rem; } .cd-rm-row :is(.cd-rm-loc, .cd-rm-time, .cd-rm-date) { font-size: .95rem; } .cd-rm-row :is(.cd-rm-loc, .cd-rm-time, .cd-rm-date)::before { display: block; font-size: .75rem; font-weight: var(--rtc-weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--rtc-text-muted); } .cd-rm-row .cd-rm-loc::before { content: "Where"; } .cd-rm-row .cd-rm-time::before { content: "Time"; } .cd-rm-row .cd-rm-date::before { content: "Date"; } .cd-rm-action { flex: 0 0 100%; margin-top: 6px; } .cd-rm-action:empty { display: none; } .cd-rm-footer { text-align: left; } } /* ══════════════════════════════════════════════════════ SINGLE POSTS (News & Events) ══════════════════════════════════════════════════════ */ /* Match the single post content to the site's standard container width (.unify-inner = --unify-max-width) rather than a narrower measure. */ .single-post .rtc-main .unify-inner, .single-post article { max-width: var(--unify-max-width, 1440px); margin-left: auto; margin-right: auto; padding-left: var(--unify-gutter, 20px); padding-right: var(--unify-gutter, 20px); } /* Ensure any wide/full-width Gutenberg blocks inside the post stay constrained */ .single-post .alignwide, .single-post .alignfull { max-width: 100%; margin-left: auto; margin-right: auto; } /* ── Unify Carousel — map its --uc-* hooks to RTC tokens (body prefix beats the plugin's own defaults) ── */ body .unify-carousel { --uc-title: var(--rtc-text); --uc-text: var(--rtc-text-muted); --uc-eyebrow: var(--rtc-text-muted); /* 6.9:1 on white */ --uc-accent: var(--rtc-plum); --uc-accent-contrast: var(--rtc-white); --uc-arrow-fg: var(--rtc-text); } /* ── Light palette fills always carry dark text ── Rose, Cornish Blue, Sky Blue, Gold and Green are too light for white text (1.6–3.5:1). Any block given one of these backgrounds in the editor gets Redruth text colour (4.7–10.5:1) instead, even if white text was picked. Buttons keep their own colours. */ :is(.has-rtc-rose-background-color, .has-rtc-blue-background-color, .has-rtc-sky-blue-background-color, .has-rtc-gold-background-color, .has-rtc-green-background-color)[class], :is(.has-rtc-rose-background-color, .has-rtc-blue-background-color, .has-rtc-sky-blue-background-color, .has-rtc-gold-background-color, .has-rtc-green-background-color) :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, figcaption, blockquote, cite):not(.wp-element-button):not(.wp-element-button *) { color: var(--rtc-text) !important; } /* ══════════════════════════════════════════════════════ WPFORMS — accessible field styling (site-wide) Clear labels, 48px fields, 3:1 borders, a visible focus ring and errors that don't rely on colour alone. ══════════════════════════════════════════════════════ */ .wpforms-container { --wpforms-field-border-color: var(--rtc-text-muted); --wpforms-field-border-size: 2px; --wpforms-field-border-radius: 10px; --wpforms-field-text-color: var(--rtc-text); --wpforms-field-background-color: var(--rtc-white); --wpforms-field-size-input-height: 50px; --wpforms-field-size-font-size: 1.0625rem; --wpforms-label-color: var(--rtc-text); --wpforms-label-sublabel-color: var(--rtc-text-muted); --wpforms-label-error-color: var(--rtc-error); --wpforms-button-background-color: var(--rtc-plum); --wpforms-button-text-color: var(--rtc-white); --wpforms-button-border-radius: var(--unify-radius-pill, 50px); } .wpforms-container .wpforms-field { padding-block: 0 1.35rem; } .wpforms-container .wpforms-field-label { display: block; margin: 0 0 .45rem; font-size: 1.05rem; font-weight: var(--rtc-weight-bold); color: var(--rtc-text); line-height: 1.35; } .wpforms-container .wpforms-field-sublabel, .wpforms-container .wpforms-field-description { font-size: .95rem; color: var(--rtc-text-muted); margin-top: .35rem; } .wpforms-container .wpforms-required-label { color: var(--rtc-error); font-weight: var(--rtc-weight-bold); } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="url"], .wpforms-container input[type="number"], .wpforms-container input[type="date"], .wpforms-container select { min-height: 50px; } .wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container input[type="tel"], .wpforms-container input[type="url"], .wpforms-container input[type="number"], .wpforms-container input[type="date"], .wpforms-container select, .wpforms-container textarea { padding: 12px 14px; font: inherit; font-size: 1.0625rem; color: var(--rtc-text); background: var(--rtc-white); border: 2px solid var(--rtc-text-muted); border-radius: 10px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .wpforms-container textarea { min-height: 170px; resize: vertical; } .wpforms-container input:hover, .wpforms-container select:hover, .wpforms-container textarea:hover { border-color: var(--rtc-black); } .wpforms-container input:focus, .wpforms-container select:focus, .wpforms-container textarea:focus { outline: 3px solid var(--rtc-purple); outline-offset: 2px; border-color: var(--rtc-black); box-shadow: none; } .wpforms-container input[type="checkbox"], .wpforms-container input[type="radio"] { width: 22px; height: 22px; accent-color: var(--rtc-plum); margin-right: .5rem; } .wpforms-container input[type="checkbox"]:focus-visible, .wpforms-container input[type="radio"]:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 2px; } .wpforms-container .wpforms-field-checkbox li, .wpforms-container .wpforms-field-radio li, .wpforms-container .wpforms-field-gdpr-checkbox li { display: flex; align-items: flex-start; gap: .25rem; margin-bottom: .5rem; } /* Errors: red border plus a "!" marker and bold message — not colour alone. */ .wpforms-container input.wpforms-error, .wpforms-container select.wpforms-error, .wpforms-container textarea.wpforms-error, .wpforms-container .wpforms-has-error input, .wpforms-container .wpforms-has-error select, .wpforms-container .wpforms-has-error textarea { border-color: var(--rtc-error) !important; } .wpforms-container label.wpforms-error, .wpforms-container em.wpforms-error { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .95rem; font-style: normal; font-weight: var(--rtc-weight-bold); color: var(--rtc-error); } .wpforms-container label.wpforms-error::before, .wpforms-container em.wpforms-error::before { content: "!"; flex: 0 0 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--rtc-error); color: var(--rtc-white); font-size: .8rem; line-height: 1; } .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) { background: var(--rtc-gold-tint) !important; border: 2px solid var(--rtc-green) !important; border-radius: 12px; color: var(--rtc-text) !important; padding: 1.1rem 1.25rem !important; } .wpforms-container .wpforms-submit-container { padding-top: .5rem; } /* ══════════════════════════════════════════════════════ CONTACT PAGE (Template: RTC Contact) ══════════════════════════════════════════════════════ */ .rtc-contact { padding-block: clamp(2rem, 4vw, 3.25rem) var(--unify-space-section, 64px); } .rtc-contact__routes { margin-bottom: clamp(2rem, 4vw, 3rem); } .rtc-contact__routes-title { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 0 0 1rem; color: var(--rtc-text); } .rtc-contact__route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .rtc-contact__route { position: relative; background: var(--rtc-off-white); border: 1px solid var(--rtc-bg-alt); border-left: 5px solid var(--rtc-plum); border-radius: 12px; padding: 18px 52px 18px 20px; transition: background-color .2s ease, transform .2s ease; } .rtc-contact__route:hover { background: var(--rtc-bg-alt); transform: translateY(-2px); } .rtc-contact__route-link { font-weight: var(--rtc-weight-bold); font-size: 1.1rem; color: var(--rtc-plum); text-decoration: none; } .rtc-contact__route-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .rtc-contact__route-link:focus-visible { outline: none; } .rtc-contact__route:focus-within { outline: 3px solid var(--rtc-purple); outline-offset: 2px; } .rtc-contact__route-text { margin: .3rem 0 0; color: var(--rtc-text-muted); font-size: .98rem; line-height: 1.45; } .rtc-contact__route-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--rtc-plum); } .rtc-contact__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } .rtc-contact__heading { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); margin: 0 0 1.25rem; color: var(--rtc-text); line-height: 1.2; } .rtc-contact__form-card { background: var(--rtc-white); border: 1px solid var(--rtc-bg-alt); border-radius: 16px; box-shadow: 0 6px 24px rgba(30, 30, 35, .06); padding: clamp(20px, 3vw, 36px); } .rtc-contact__form-body > *:first-child { margin-top: 0; } .rtc-contact__form-body > *:last-child { margin-bottom: 0; } .rtc-contact__details { background: var(--rtc-black); color: var(--rtc-white); border-radius: 16px; padding: clamp(20px, 3vw, 32px); } .rtc-contact__details .rtc-contact__heading { color: var(--rtc-white); } .rtc-contact__item + .rtc-contact__item { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .2); } .rtc-contact__label { margin: 0 0 .35rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--rtc-gold); } .rtc-contact__details p, .rtc-contact__address { margin: 0; font-style: normal; line-height: 1.55; color: var(--rtc-white); } .rtc-contact__big-link { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: var(--rtc-weight-bold); color: var(--rtc-white); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .rtc-contact__directions { display: inline-block; margin-top: .6rem; color: var(--rtc-white); font-weight: var(--rtc-weight-bold); text-decoration: underline; text-underline-offset: 3px; } .rtc-contact__big-link:hover, .rtc-contact__directions:hover { color: var(--rtc-gold); } .rtc-contact__details a:focus-visible { outline: 3px solid var(--rtc-gold); outline-offset: 3px; border-radius: 2px; } .rtc-contact__map { margin-top: clamp(24px, 4vw, 44px); border-radius: 16px; overflow: hidden; background: var(--rtc-bg-alt); height: clamp(280px, 34vw, 440px); } .rtc-contact__map iframe { display: block; width: 100%; height: 100%; border: 0; } @media (max-width: 900px) { .rtc-contact__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .rtc-contact__route, .rtc-contact__route:hover { transition: none; transform: none; } } /* ══════════════════════════════════════════════════════ COLOURED BOXES ON MOBILE Columns, column and group blocks with a background colour often carry generous desktop padding set in the editor (inline styles). Once columns stack on phones that padding squeezes the text into a narrow strip, so reset it to a consistent box padding. Columns nested inside a coloured box lose their own padding so the text uses the box's full width. ══════════════════════════════════════════════════════ */ @media (max-width: 781px) { .rtc-page__content :is(.wp-block-columns, .wp-block-column, .wp-block-group).has-background { padding: 1.75rem 1.25rem !important; } .rtc-page__content .has-background :is(.wp-block-columns, .wp-block-column):not(.has-background) { padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .rtc-page__content .has-background .wp-block-columns { gap: 1.25rem; } .rtc-page__content .has-background > :first-child, .rtc-page__content .has-background .wp-block-column > :first-child { margin-top: 0; } .rtc-page__content .has-background > :last-child, .rtc-page__content .has-background .wp-block-column > :last-child { margin-bottom: 0; } /* Stacked columns: tighter gap between boxes. */ .rtc-page__content .wp-block-columns { margin-bottom: 1.5rem; } } /* ══════════════════════════════════════════════════════ SEARCH BLOCK (core/search) — e.g. the Search page Full-width field; on phones the button drops below so the field gets the whole width (council feedback: field too narrow on mobile). ══════════════════════════════════════════════════════ */ .rtc-page__content .wp-block-search { width: 100%; max-width: 860px; } .rtc-page__content .wp-block-search__inside-wrapper { display: flex; gap: 10px; width: 100% !important; max-width: 100%; border: 0; padding: 0; } .rtc-page__content .wp-block-search__input { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 1.0625rem; color: var(--rtc-text); background: var(--rtc-white); border: 2px solid var(--rtc-text-muted); border-radius: 10px; } .rtc-page__content .wp-block-search__input:focus { outline: 3px solid var(--rtc-purple); outline-offset: 2px; border-color: var(--rtc-black); } .rtc-page__content .wp-block-search__button { flex: 0 0 auto; min-height: 52px; margin: 0; padding: 12px 26px; border: 0; border-radius: var(--unify-radius-pill, 50px); background: var(--rtc-plum); color: var(--rtc-white); font-weight: var(--rtc-weight-bold); font-size: 1rem; cursor: pointer; } .rtc-page__content .wp-block-search__button:hover { background: var(--rtc-plum-dark); } .rtc-page__content .wp-block-search__button:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 2px; } @media (max-width: 560px) { .rtc-page__content .wp-block-search__inside-wrapper { flex-direction: column; } .rtc-page__content .wp-block-search__button { width: 100%; } } /* ══════════════════════════════════════════════════════ PAGE HEADERS ON PHONES — no featured image A plain Plum band with the title (and breadcrumb) instead of a tall photo header, to cut scroll depth (council feedback). Setting background-image to none also stops the photo downloading. `body` prefix outranks the templates' own inline styles. ══════════════════════════════════════════════════════ */ @media (max-width: 768px) { body .rtc-page-header--image, body .rtc-news-hero--has-image { background-image: none !important; background-color: var(--rtc-plum) !important; padding-block: 2.5rem !important; /* same as the plain (no-image) band */ } body .rtc-news-hero--has-image .rtc-news-hero__overlay { display: none; } body .rtc-news-hero--has-image .rtc-news-hero__title { font-size: clamp(1.75rem, 7vw, 2.25rem); } body .rtc-service-hero--image { background: var(--rtc-plum); } body .rtc-service-hero--image .rtc-service-hero__img, body .rtc-service-hero--image .rtc-service-hero__overlay { display: none; } body .rtc-service-hero--image .rtc-service-hero__inner { padding-block: clamp(22px, 4vw, 42px); } } /* ══ NEWS: Publications band (between the articles and the newsletter) ══ */ .rtc-news-pubs { background: var(--rtc-bg-alt); } .rtc-news-pubs__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(1.75rem, 4vw, 2.75rem); } .rtc-news-pubs__title { margin: 0 0 .35rem; color: var(--rtc-plum); } .rtc-news-pubs__text p { margin: 0; color: var(--rtc-text); } .rtc-news-pubs__btn { display: inline-flex; align-items: center; min-height: 48px; padding: .75rem 1.5rem; border-radius: 999px; background: var(--rtc-plum); color: var(--rtc-white); font-weight: var(--rtc-weight-bold, 700); text-decoration: none; } .rtc-news-pubs__btn:hover { background: var(--rtc-plum-dark); color: var(--rtc-white); } .rtc-news-pubs__btn:focus-visible { outline: 3px solid var(--rtc-gold); outline-offset: 3px; box-shadow: 0 0 0 6px var(--rtc-plum-dark); } /* ══ PEOPLE: initials when there's no photo (rtc_initials_avatar) ══ */ .rtc-initials { container-type: size; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; background: var(--rtc-plum); color: var(--rtc-white); } .rtc-initials__text { font-size: 38cqmin; font-weight: var(--rtc-weight-bold, 700); line-height: 1; letter-spacing: .02em; color: var(--rtc-white); } .rtc-staff-org__person .ph { overflow: hidden; } /* ── Policy pages: expandable sections (core Details block) ────────────── Add the "rtc-policy-acc" class to a Details block (Advanced ▸ Additional CSS class) to match the Unify Accordion look. Native
, so it works with keyboard and screen readers without any script. */ .wp-block-details.rtc-policy-acc { background: var(--rtc-white); border: 1px solid rgba(42, 56, 70, 0.12); border-radius: 12px; margin: 0 0 10px; padding: 0; overflow: hidden; position: relative; transition: box-shadow 0.25s ease, border-color 0.25s ease; } .wp-block-details.rtc-policy-acc[open] { box-shadow: 0 6px 22px rgba(42, 56, 70, 0.09); border-color: transparent; } .wp-block-details.rtc-policy-acc[open]::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rtc-plum); } .wp-block-details.rtc-policy-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: var(--rtc-weight-bold, 700); line-height: 1.35; color: var(--rtc-text); } .wp-block-details.rtc-policy-acc > summary::-webkit-details-marker { display: none; } .wp-block-details.rtc-policy-acc > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2.5px solid var(--rtc-plum); border-bottom: 2.5px solid var(--rtc-plum); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s ease; } .wp-block-details.rtc-policy-acc[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .wp-block-details.rtc-policy-acc > summary:hover, .wp-block-details.rtc-policy-acc[open] > summary { background: rgba(127, 25, 79, 0.05); } .wp-block-details.rtc-policy-acc[open] > summary { color: var(--rtc-plum); } .wp-block-details.rtc-policy-acc > summary:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: -3px; } .wp-block-details.rtc-policy-acc > :not(summary) { margin-left: 18px; margin-right: 18px; } .wp-block-details.rtc-policy-acc > summary + * { margin-top: 16px; } .wp-block-details.rtc-policy-acc > :last-child { margin-bottom: 20px; } .wp-block-details.rtc-policy-acc h3, .wp-block-details.rtc-policy-acc h4 { margin-top: 1.5rem; margin-bottom: 0.5rem; } @media (prefers-reduced-motion: reduce) { .wp-block-details.rtc-policy-acc > summary::after { transition: none; } } /* Highlighted note inside a policy, e.g. the young person's statement */ .rtc-policy-note { background: var(--rtc-gold-tint); border-left: 4px solid var(--rtc-gold); border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 1rem 0; } .rtc-policy-note > :first-child { margin-top: 0; } .rtc-policy-note > :last-child { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════ FILE BLOCK — document card (1.4.74; thumbnail + preview toggle 1.4.75) Core File block as a card: page-1 thumbnail or file-type tile, name, "PDF · 1.2 MB", plum Download button; the PDF viewer (if switched on) sits in a "Preview document" toggle. Markup regrouped by rtc_file_block_card() in functions.php. ════════════════════════════════════════════════════════════════════ */ .wp-block-file { display: block; box-sizing: border-box; margin: 0 0 16px; padding: 16px 20px 16px 16px; background: var(--rtc-white); border: 1px solid var(--rtc-bg-alt); border-radius: 14px; box-shadow: 0 6px 20px rgba(42, 56, 70, 0.06); font-size: var(--rtc-fs-body); } /* Row: thumbnail | name + meta | button */ .rtc-file__row { display: flex; align-items: center; gap: 18px; } /* Thumbnail — portrait page, A4-ish */ .rtc-file__thumb { flex: 0 0 auto; position: relative; display: block; width: 64px; aspect-ratio: 1 / 1.35; overflow: hidden; border: 1px solid var(--rtc-bg-alt); border-radius: 6px; background: var(--rtc-white); box-shadow: 0 2px 6px rgba(42, 56, 70, 0.12); text-decoration: none; } .rtc-file__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } a.rtc-file__thumb { transition: transform 0.18s ease, box-shadow 0.18s ease; } a.rtc-file__thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(42, 56, 70, 0.16); } /* No preview image: a page tile with grey "text" lines and a type label */ .rtc-file__thumb.is-tile { background: var(--rtc-off-white); } .rtc-file__thumb.is-tile::before { /* folded corner */ content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; background: linear-gradient(225deg, var(--rtc-white) 50%, var(--rtc-bg-alt) 50%); } .rtc-file__tile-lines { position: absolute; top: 14px; left: 9px; right: 18px; height: 26px; background: repeating-linear-gradient(to bottom, var(--rtc-bg-alt) 0 3px, transparent 3px 7px); border-radius: 2px; } .rtc-file__tile-ext { position: absolute; left: 6px; right: 6px; bottom: 8px; padding: 3px 0; border-radius: 4px; background: var(--rtc-plum); color: var(--rtc-white); font-size: 0.6875rem; font-weight: var(--rtc-weight-bold); letter-spacing: 0.06em; line-height: 1; text-align: center; } .rtc-file__thumb--doc .rtc-file__tile-ext { background: var(--rtc-purple); } /* white on Discover Purple ~10:1 */ .rtc-file__thumb--sheet .rtc-file__tile-ext, .rtc-file__thumb--slides .rtc-file__tile-ext { background: var(--rtc-black); } /* white on Redruth Black ~12:1 */ /* Name + meta */ .rtc-file__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rtc-file__info > a, .wp-block-file > a:not(.wp-block-file__button) { color: var(--rtc-text); font-size: 1.0625rem; font-weight: var(--rtc-weight-semibold); line-height: var(--rtc-lh-heading); text-decoration: none; overflow-wrap: anywhere; } .rtc-file__info > a:hover, .wp-block-file > a:not(.wp-block-file__button):hover { color: var(--rtc-plum); text-decoration: underline; text-underline-offset: 3px; } .rtc-file__meta { font-size: 0.875rem; color: var(--rtc-text-muted); letter-spacing: 0.02em; } /* Download button — plum pill, white text (~10:1) */ .wp-block-file .wp-block-file__button, .wp-block-file a.wp-block-file__button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; margin: 0; padding: 11px 22px; border: 0; border-radius: 999px; background: var(--rtc-plum); color: var(--rtc-white); font-size: 0.95rem; font-weight: var(--rtc-weight-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color 0.18s ease; } .wp-block-file .wp-block-file__button:hover { background: var(--rtc-plum-dark); color: var(--rtc-white); opacity: 1; } .wp-block-file a:focus-visible, .rtc-file__preview > summary:focus-visible { outline: 3px solid var(--rtc-purple); outline-offset: 3px; border-radius: 4px; } .wp-block-file .wp-block-file__button:focus-visible { border-radius: 999px; } .rtc-file__dl { flex: 0 0 auto; } .rtc-file__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Preview toggle (only when the editor switched on the inline PDF viewer) */ .rtc-file__preview { margin: 12px 0 0; } .rtc-file__preview > summary { margin-left: 82px; /* lines up under the name */ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--rtc-plum); font-size: 0.9375rem; font-weight: var(--rtc-weight-semibold); } .rtc-file__preview > summary::-webkit-details-marker { display: none; } .rtc-file__preview > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .rtc-file__preview[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .rtc-file__preview > summary:hover { text-decoration: underline; text-underline-offset: 3px; } .rtc-file__preview .wp-block-file__embed { display: block; width: 100%; height: 70vh !important; /* overrides the block's fixed height */ max-height: 760px; margin: 12px 0 0; border: 1px solid var(--rtc-bg-alt); border-radius: 10px; background: var(--rtc-off-white); } /* Browsers that can't show PDFs inline (most phones) lose the viewer: hide the toggle too. */ .rtc-file__preview:not(:has(.wp-block-file__embed)) { display: none; } /* Fallback when the markup wasn't regrouped */ .wp-block-file:not(.rtc-file) .wp-block-file__embed { margin-bottom: 16px; border-radius: 10px; } .wp-block-file:not(.rtc-file) > a:not(.wp-block-file__button) { margin-right: 14px; } @media (max-width: 600px) { .wp-block-file { padding: 14px; } .rtc-file__row { flex-wrap: wrap; gap: 14px; } .rtc-file__thumb { width: 52px; } .rtc-file__info { flex: 1 1 0; } .wp-block-file .wp-block-file__button, .wp-block-file a.wp-block-file__button { flex-basis: 100%; justify-content: center; } .rtc-file__preview { display: none; } } @media (prefers-reduced-motion: reduce) { .wp-block-file .wp-block-file__button, a.rtc-file__thumb, .rtc-file__preview > summary::after { transition: none; } }