/* ==========================================================================
RSA School of Motoring Finglas: site stylesheet.
Design governance: the rsa-leinster locked skins govern this site. This file
is a curated port of sites/rsa-leinster/src/css/rsa.css (the brand-pack
makeover sheet, with its Phase 0 contrast fixes and its 480/768/1100
responsive rules). Rules were taken verbatim, never retyped, so a fix made
in Leinster can be re-ported by re-running the same selection.
tokens.css loads first (its own elements and are styled as the element here, so .h2 keeps one
meaning across the site and a measurement of .h2 still measures the pack. */
.rsa-site .prose h2 { margin: 48px 0 0; font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; color: var(--rsa-chalk); }
.rsa-site .prose h3 { margin: 28px 0 0; font: 700 17px/1.3 var(--font-body); color: var(--rsa-chalk); text-transform: none; letter-spacing: 0; }
.rsa-site .prose > :first-child { margin-top: 0; }
.rsa-site .prose ul { margin: 0; padding-left: 20px; }
.rsa-site .prose ul.ticks { padding-left: 0; }
.rsa-site .prose li + li { margin-top: 8px; }
.rsa-site .prose table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 15px; }
.rsa-site .prose th, .rsa-site .prose td { border: 1px solid var(--line-12); padding: 10px 12px; text-align: left; }
.rsa-site .prose th { font: 700 12px var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--rsa-chalk); }
.rsa-site .prose .panel-line { margin-top: 28px; }
.rsa-site .terms-version { margin-top: 32px; font-size: 12.5px; color: var(--rsa-smoke); }
/* Section headings on prose pages come through as .h2 inside .prose; the
component pages use .h2 on its own, which the port already styles. */
.rsa-site .t-main .t-sec { gap: 0; }
/* Cookie notice. Was an inline-styled grey bar with its own hard-coded colours
that ignored the palette entirely. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: #000; border-top: 1px solid var(--line-16); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
.cookie-bar p { margin: 0; font-size: 13.5px; color: var(--rsa-mist); }
.rsa-site .cookie-bar a { color: var(--rsa-green); }
.cookie-bar button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 2px; background: var(--rsa-green); color: var(--rsa-road-black); font: 800 12px var(--font-display); text-transform: uppercase; cursor: pointer; }
.cookie-bar button:hover { background: var(--rsa-green-hover); }
@media (max-width: 768px) {
/* On a phone the notice rests on the bottom edge and only lifts clear of the
sticky call bar while that bar is actually showing. It used to be lifted
72px unconditionally, but the bar is hidden while the page hero is on
screen, so the notice floated mid-screen with a gap under it and sat on
top of whatever was there: on /pay-now/ that was the Automatic toggle,
so a tap meant for the toggle dismissed nothing and selected nothing.
Found by a scripted tap at 390px that never registered. */
.cookie-bar { gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.cookie-bar p { font-size: 12.5px; flex: 1 1 200px; }
.cookie-bar button { min-height: 40px; }
body:has(.sticky-mobile-cta:not(.is-hidden)) .cookie-bar { bottom: calc(72px + env(safe-area-inset-bottom)); padding-bottom: 10px; }
}
/* The proof line in the hero badges row wraps as a unit on phones. */
.h-hero-badges .proof-line { gap: 8px; }
.h-hero-badges .proof-line .stars { font-size: 14px; }
/* Nested lists inside .nearby rows: the pack's anchor is a flex row, so the
label and its sub-label need to stack. */
.rsa-site .nearby a > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* .centre rows put the name and the address in one middle cell. */
.centre > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.centre-name .badge-g { font-size: 10px; padding: 4px 7px 3px; }
/* .pickup lists are plain ULs in the pack; ours carry no bullets. */
.rsa-site .pickup ul { list-style: none; padding: 0; }
/* .nearby and .pickups hold a list whose length is data, not a design choice:
six areas here, five on a leaf page, one to three fact cards. A grid with a
min track picks its columns from the width and leaves whatever is left over
stranded on the last row, which reads as a fault rather than a list. Wrapping
flex items that are allowed to grow have no last row to strand: the final
row's items share the leftover width instead of leaving a hole.
min-width:0 is load-bearing. Without it a long label ("Driving lessons
Blanchardstown") sets the item's min-content width and the row overflows the
container, which is what it was doing at 1440. */
.rsa-site .nearby, .rsa-site .pickups { display: flex; flex-wrap: wrap; }
.rsa-site .nearby > a, .rsa-site .pickups > * { flex: 1 1 260px; min-width: 0; }
.rsa-site .pickups > * { flex-basis: 280px; }
/* Standalone link lists need a real tap target on a phone. Links inside a
sentence are left alone: WCAG 2.5.8 exempts them, and padding them out
would open up the line spacing of every paragraph on the page. */
@media (max-width: 768px) {
.rsa-site .tlink,
.rsa-site .ft a,
.rsa-site .crumbs a,
.rsa-site .side-counties a,
.rsa-site .side-dl a,
.rsa-site .mm-links a { min-height: 44px; display: inline-flex; align-items: center; }
.rsa-site .ft-two a { min-height: 44px; }
}
/* The .prep-row label is the row's heading. At 768 the pack already gives the
buttons flex:1 1 100%, which leaves the label alone on a short row with a
hole beside it. Give it the full width too so it reads as a heading. */
@media (max-width: 768px) {
.rsa-site .prep-row > span { flex: 1 1 100%; margin-right: 0; }
}
/* Underlines the port could not have covered. In Leinster these three anchors
hold only an image or an SVG, so the UA's default underline had nothing to
draw on and the pack never needed a rule. Here the logo anchor carries the
Finglas badge, the phone icon anchor carries a label for screen readers, and
the ticket CTA carries its own words, so all three came out underlined.
Found by walking every anchor on every route and reading the computed
text-decoration, rather than by reading the stylesheet. */
.rsa-site .hdr-logo,
.rsa-site .hdr-icon,
.rsa-site .ticket-go { text-decoration: none; }
/* Phone-width fixes found by the corrected probe, 2026-10-23.
- .crumbs: the tap-target rule above makes each crumb link 44px tall. The
row stretched its items, so the link's text was centred in 44px while the
"/" separators and the current page's name sat at the top, putting "Home"
12px below "Buy lessons" on every page with a breadcrumb. Centre the row.
- .rating-chip: nowrap, and with the brand-network clarifier the line is
longer than a phone is wide, so it was cut off mid-word on /pay-now/.
Let it wrap; the stars stay together. */
@media (max-width: 768px) {
.rsa-site .crumbs { align-items: center; }
.rsa-site .rating-chip { white-space: normal; flex-wrap: wrap; max-width: 100%; line-height: 1.35; }
.rsa-site .rating-chip .stars { white-space: nowrap; }
}
/* Area pages: the route list in "The roads you'll be tested on". Leinster's
skin has no route list (its town pages name roads in running copy), and
three narrow text columns of road names was what read as badly styled.
Each route is a chip with its number on a sign plate in the Irish signage
colours: yellow on green for national (N) roads, black on white for
regional (R) roads. Chips wrap to content, so no grid row is left short. */
.rsa-site .road-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rsa-site .road-list li { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; background: var(--rsa-surface); border: 1px solid var(--line-12); border-radius: 2px; padding: 6px 16px 6px 6px; font: 600 15px/1.25 var(--font-body); color: var(--rsa-chalk); }
.rsa-site .road-no { display: inline-grid; place-items: center; min-width: 54px; height: 34px; padding: 0 8px; border-radius: 3px; font: 800 15px/1 var(--font-display); letter-spacing: .02em; }
.rsa-site .road-no.n { background: #00543C; color: #FFD200; box-shadow: inset 0 0 0 2px #FFD200; }
.rsa-site .road-no.r { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; }
.rsa-site #roads .pickup li span { display: block; font-size: 13px; color: var(--rsa-smoke); }
/* Two pick-up cards of very different lengths: let each take its own height
rather than stretching the short one into an empty block. */
.rsa-site #roads .pickups { align-items: flex-start; }
/* Area pages: three price tickets in the main column. The pack's auto-fit
grid fits two at 1100 (sidebar still beside it) and strands the third on a
row of its own, which Leinster's own town pages also do. Columns are picked
from the count instead: three across wherever three fit, one below. */
@media (min-width: 769px) {
.rsa-site .t-main .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The "Explore" bar under the form is a standalone link list: 44px targets. */
@media (max-width: 768px) {
.rsa-site .explore a,
.rsa-site .map-frame a { min-height: 44px; display: inline-flex; align-items: center; }
/* The skin's section heads drop to 28px here; the pack's floor is 30px. */
.rsa-site .t-main .h2 { font-size: 30px; }
}
/* Service-page photo hero (components/hero/v1.njk with heroPhotoIndex): town
skin C's .tc-hero, sized as rsa-leinster's /pricing/ sizes it
(css/pricing-page.css, .pp-hero-c), under a Finglas class because the same
hero serves Services, Pricing and About here. */
.rsa-site .fg-hero-c .tc-hero-in { min-height: 550px; padding-bottom: 50px; }
.rsa-site .fg-hero-c > .hm-c { width: 48%; }
.rsa-site .fg-hero-c .tc-copy { max-width: 560px; }
.fg-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--rsa-mist); }
.fg-rating .stars { font-size: 17px; }
@media (max-width: 1100px) {
.rsa-site .fg-hero-c .tc-copy { max-width: 47%; }
}
@media (max-width: 900px) {
.rsa-site .fg-hero-c > .hm-c { width: 100%; }
.rsa-site .fg-hero-c .tc-copy { max-width: none; }
.rsa-site .fg-hero-c .tc-hero-in { min-height: 0; }
}
/* Contact hero, from rsa-leinster's css/contact-page.css (.cp-hero-b). */
.cp-form-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 52px; align-items: start; padding-top: 32px; padding-bottom: 56px; }
.cp-form-hero-grid .tb-copy { gap: 22px; }
.cp-hero-book { margin-top: 26px; background: var(--rsa-night); }
.cp-hero-proof { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 12px; color: var(--rsa-mist); }
.fg-contact-hero .cp-hero-photo { height: 190px; min-height: 0; width: min(100%, 350px); margin-top: 10px; align-self: flex-start; border-radius: 2px; }
.fg-contact-hero .cp-hero-photo::before { inset: 10px -10px -10px 10px; }
.fg-contact-hero .cp-hero-photo > .hm-b { min-height: 0; }
.fg-contact-hero .cp-hero-photo > .hm-b.is-cut img { padding-top: 12px; object-position: center bottom; }
.fg-contact-hero .cp-hero-photo .tb-pin { top: auto; bottom: 10px; left: 10px; font-size: 10px; }
.fg-contact-hero .cp-hero-book .give-call { display: block; margin-top: 16px; }
@media (max-width: 1100px) { .cp-form-hero-grid { gap: 32px; } }
@media (max-width: 900px) {
.cp-form-hero-grid { grid-template-columns: 1fr; }
.cp-hero-book { margin-top: 8px; }
.fg-contact-hero .cp-hero-photo { width: min(100%, 320px); height: 180px; }
}
@media (max-width: 768px) {
.cp-form-hero-grid { padding-top: 24px; padding-bottom: 40px; }
}
/* Homepage "Passed with RSA" strip: four pass-photo tiles from the national
library. The locked skin's .rtile is a single tile beside review cards;
Finglas has no review text to put beside it, so the tiles get a row of
their own, four across, two on a phone. */
.rsa-site .pass-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rsa-site .pass-grid .rtile { margin: 0; aspect-ratio: 1; min-height: 0; grid-column: auto; padding: 16px; }
@media (max-width: 900px) { .rsa-site .pass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rsa-site .pass-grid .rtile { justify-content: flex-start; padding: 12px; }
.rsa-site .pass-grid .rtile .rtile-chip { padding: 7px 11px; font-size: 11px; letter-spacing: .04em; }
/* Homepage Finglas guide: long-form copy beside the "choosing a school"
checklist. */
.rsa-site .fg-guide { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.rsa-site .fg-guide-main .body { max-width: 68ch; }
.rsa-site .fg-guide-side .ticks li { margin-bottom: 12px; }
@media (max-width: 1000px) { .rsa-site .fg-guide { grid-template-columns: 1fr; gap: 32px; } }
.rsa-site .fg-guide-side .rating-chip { flex-wrap: wrap; white-space: normal; max-width: 100%; }
/* Contact: the standalone phone links need phone-width targets. */
@media (max-width: 768px) {
.rsa-site .fg-contact-hero .give-call,
.rsa-site #contact-details .h3 a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Homepage learning cards: titles are (they were s) so the four
lesson types count as headings; this keeps the skin's span styling. */
.rsa-site h3.lcard-title { margin: 0; }
/* Light Meath town pages (src/meath/town.njk): the booking card under the
hero, nothing else, so it needs its own vertical rhythm. */
.rsa-site .fg-meath-body { padding-top: 48px; padding-bottom: 72px; }
.rsa-site .fg-meath-body .book-card { max-width: 920px; }
.rsa-site .fg-meath-more { margin-top: 20px; }