/*
* PAS-specific additions around GOV.UK Frontend classes for the public enquiry form.
* Kept small so the screens stay GDS-aligned where possible.
*/
/*
* Typography.
*
* GOV.UK Frontend's own font is GDS Transport, which we deliberately do not use:
* it is licensed for GOV.UK-branded services only.
*
* Its two @font-face rules are stripped out of the vendored copy of the Frontend
* stylesheet by scripts/vendor-govuk-frontend.sh. They had to go rather than just
* be overridden: their URLs are root-relative, and while the stylesheet came from
* a CDN they resolved against it, so every page load fired four requests for files
* that do not exist there. Neither the font-family override below nor a replacement
* @font-face in this file stopped them — only removing the rules did.
*
* The ~60 `font-family: GDS Transport, arial, sans-serif` declarations upstream are
* left alone. The override below beats them, and with no matching face the name is
* simply skipped in the stack.
*
* We self-host Open Sans instead, to match our other applications. One variable
* file per subset covers the whole 300-800 range, which includes the two weights
* GOV.UK Frontend actually asks for (400 and 700).
*
* The src URLs are relative to this stylesheet, not root-relative. The app is
* served under a context path (/planning-advice-service by default), so a leading
* slash would resolve to the origin root, outside the context path, and 404. The
* same rule that sends the vendor's own font URLs to the CDN root bites here, just
* with a different origin.
*
* font-display: fallback matches what GOV.UK Frontend sets for its own font.
*/
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800;
font-display: fallback;
src: url("../assets/fonts/open-sans-latin-v44.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Accented characters outside Latin-1 — applicant and agent names, and place
names, are free text and regularly contain them. */
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300 800;
font-display: fallback;
src: url("../assets/fonts/open-sans-latin-ext-v44.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--pas-font-family: "Open Sans", arial, sans-serif;
}
/*
* GOV.UK Frontend sets font-family explicitly on 59 selectors, so setting it on
* alone would leave most of the page on GDS Transport's Arial fallback.
*
* [class*="govuk-"] covers the single-class rules, which are all but three of
* them; those three are listed after it because they are specific enough to win
* otherwise. Form controls are listed by element as well, since they do not
* inherit font-family from an ancestor by default.
*
* Everything here ties the vendor rules on specificity rather than beating them,
* which is enough: this stylesheet is loaded after govuk-frontend.min.css, so on
* a tie the later rule applies. Keep this file last in the .
*/
body,
input,
select,
textarea,
button,
[class*="govuk-"],
.govuk-error-summary__list a,
.govuk-button-group .govuk-link,
.govuk-frontend-supported .govuk-accordion__show-all {
font-family: var(--pas-font-family);
}
/*
* Service header.
*
* The bar itself, the service-name band and their colours all come from GOV.UK Frontend
* (govuk-header, govuk-service-navigation). Only the two things the component knows nothing
* about are set here: the size of the Authority logo, and the accessibility toolbar button.
*/
/*
* The logo is a single-line lockup, much wider than the crown the component is sized around, so
* it needs an explicit width. In em so it tracks the header's own font-size, and capped at the
* viewport on narrow screens — below about 22em the fixed width alone would push the bar wider
* than the page and scroll the whole document sideways.
*
* The link around it has to be re-boxed to match. Upstream govuk-header__homepage-link is
* display: inline and sized by its own 30px font rather than by its contents, because the crown
* it was built for sits on the same line as the "GOV.UK" text beside it. Here the only content is
* an image about 60px tall, so the link's box — which is what the hover underline and border, the
* focus highlight and the pointer target are all drawn from — was a band across the middle of the
* logo rather than the logo itself.
*
* Making the link inline-block, with the image a block inside it, leaves the link box exactly the
* size of the image. The image's relative 3px lift and 2px bottom margin go for the same reason:
* both are optical corrections for the crown against neighbouring text, and here they only push
* the artwork out of the box that is now drawn around it. vertical-align on the link replaces the
* descender space an inline-block would otherwise leave under it inside govuk-header__logo.
*/
.govuk-header__homepage-link {
display: inline-block;
vertical-align: top;
}
.pas-header__logotype {
display: block;
position: static;
width: 12em;
max-width: 100%;
height: auto;
margin-bottom: 0;
}
/*
* With the highlight now covering the whole logo rather than a band across it, the white artwork
* would sit on #fd0 with almost no contrast. The component's own answer is fill: currentcolor,
* which an ![]()
cannot use, so invert the file instead: brightness(0) takes every colour in it
* to black and leaves the transparency alone, giving the black-on-yellow the rest of the focus
* state assumes.
*/
.govuk-header__homepage-link:focus .pas-header__logotype {
filter: brightness(0);
}
/*
* Recite Me toggle, ported from the permits service, which restyles the GOV.UK button into a
* yellow accessibility affordance: #ffd000 with dark text, a circular icon-only button on narrow
* screens that becomes a labelled pill from 59em, inverting to dark-on-white on hover.
*
* Sized in rem, not em. The permits rule uses font-size: 1em inside govuk-header, which resolves
* to 16px there; this button sits in govuk-service-navigation, where 1em would be 19px and every
* em-based dimension below would come out ~19% larger than on permits. 1rem reproduces the
* original proportions.
*
* The selectors deliberately match the specificity of the vendor rules they replace
* (.govuk-button:hover is 0,2,0; .govuk-button:focus:not(:active):not(:hover) is 0,4,0), so this
* file wins on source order alone. The permits stylesheet reaches for !important instead;
* matching specificity keeps the cascade legible and leaves the button overridable downstream.
*/
.pas-header__recite {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3125em;
/* Pushes the button to the end of the service-navigation row. An auto margin rather than
justify-content on the container, so the service name keeps its position when the button is
absent (no licence key configured). */
margin: 0 0 0 auto;
align-self: center;
flex-shrink: 0;
width: 2.5em;
height: 2.5em;
min-width: 2.5em;
min-height: 2.5em;
padding: 0.5em;
border: 0;
border-radius: 50%;
background: #ffd000;
color: #333333;
font-family: inherit;
font-size: 1rem;
line-height: 1.2;
cursor: pointer;
box-shadow: none;
transition: background 0.1s ease-in;
}
.pas-header__recite:hover {
background: #333333;
color: #ffffff;
text-decoration: underline;
}
/*
* Focus.
*
* The vendor rule would repaint the button in the focus yellow and add a black bar beneath it;
* on a round button that bar reads as a rendering defect, so it is suppressed and replaced by a
* black outline, which suits both the circle and the pill.
*
* This is the one deliberate departure from the permits button. There, box-shadow: none is set
* at ID specificity and the vendor's outline: 3px solid transparent is inherited, which leaves a
* yellow button with no visible focus indicator at all — a WCAG 2.4.7 failure, and on the
* control that opens the accessibility toolbar of all things. Keeping focus visible is worth
* more than matching that exactly.
*/
.pas-header__recite:focus:not(:active):not(:hover) {
background: #ffd000;
color: #333333;
box-shadow: none;
}
.pas-header__recite:focus {
outline: 3px solid #0b0c0c;
outline-offset: 2px;
}
#mra-access-icon-svg {
display: block;
width: 1.875em;
height: 1.875em;
flex-shrink: 0;
}
#mra-access-icon-svg img {
width: 100%;
height: 100%;
transition: filter 0.1s ease;
}
/* The icon file carries no fill, so it renders black against the yellow. On hover the button
goes dark, so the icon is inverted to white to stay legible. */
.pas-header__recite:hover #mra-access-icon-svg img {
filter: brightness(0) invert(1);
}
/* Hidden by default: below 59em the label would crowd the service name, so the button is the
icon alone. Its accessible name comes from aria-label either way. */
.mra-access-text {
display: none;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
}
@media (min-width: 59em) {
.mra-access-text {
display: block;
}
.pas-header__recite {
width: auto;
height: auto;
min-width: 12.5em;
min-height: 0;
padding: 0.375em 0.5em;
border-radius: 0.5em;
}
}
/*
* Service footer: the Royal Arms above "© Crown copyright".
*
* Frontend draws it from url(/assets/images/govuk-crest.svg). That is root-relative, so it
* resolves against the origin root and misses the /planning-advice-service context path — a 404,
* leaving the 112px the rule reserves as blank space. (While the stylesheet was CDN-hosted the
* same URL resolved against the CDN instead; the override below fixes either case.) Same root
* cause as the GDS Transport @font-face rules at the top of this file, which are stripped from
* the vendored stylesheet rather than overridden.
*
* Fixed by serving the file ourselves and pointing at it relatively: a relative url() resolves
* against THIS stylesheet, so it picks up the /planning-advice-service context path too.
*
* govuk-crest.svg is copied verbatim from the govuk-frontend 6.1.0 package, so it stays in step
* with the version loaded from the CDN — check it against the package on any upgrade. This is
* the only image the vendor stylesheet loads by absolute path; the remaining ones are the GDS
* Transport fonts, which are deliberately unused.
*
* Frontend draws the crest two ways and BOTH need the corrected path. The base rule uses a
* background image; a following @supports block then throws that away (background: currentcolor
* resets background-image to none) and paints the crest as a mask instead, so it can follow the
* text colour. Every current browser takes the mask branch, and an unloadable mask image is
* treated as transparent — masking the element away entirely — so fixing only the background
* image leaves the footer looking exactly as blank as it did with no fix at all.
*
* The structure below therefore mirrors the vendor's: background image for the browsers without
* mask support, mask for everything else, under an identical @supports condition. Only the image
* URLs change; the reserved height, sizing and centring all still come from the vendor rules,
* which this file overrides on source order rather than specificity.
*/
.govuk-footer__copyright-logo::before {
background-image: url("../assets/images/govuk-crest.svg");
}
@supports ((-webkit-mask-position: initial) or (mask-position: initial)) {
.govuk-footer__copyright-logo::before {
background: currentcolor;
-webkit-mask-image: url("../assets/images/govuk-crest.svg");
mask-image: url("../assets/images/govuk-crest.svg");
}
}
/* Conditionally revealed fields. Hidden by default until the wizard script shows them
based on the controlling answer; shown unconditionally when scripting is unavailable. */
.pas-conditional-field {
margin-bottom: 15px;
padding-left: 15px;
border-left: 4px solid #b1b4b6;
}
.pas-conditional-field--hidden {
display: none;
}
/* Multi-step wizard. Each step is a section; the script shows one at a time. Without
JavaScript every step is visible and the single submit button still works. */
.pas-wizard__step {
margin-bottom: 10px;
}
.pas-wizard__actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}
.pas-wizard__actions .govuk-button {
margin-bottom: 0;
}
/*
* Checkbox tick and focus fix.
*
* Thymeleaf's th:field renders a hidden companion immediately
* after each checkbox, so the