/* * RAPID interim sign-up: site styles. * Ported from the llcw-bricks build (post 1458, templates 146/151/159/157) so the page looks the same * without WordPress or Bricks. Palette: 30_DESIGN-SYSTEM-AND-BRAND/LLCW-APPROVED-PALETTE.md and * Style Guide v0.13. Colour lives ONLY in the :root block below; every rule uses var(--ll-*). * Black appears only as rgba(0,0,0,a) shadow or overlay. Crisis Red is used in its three allowed * places only: Quick Exit, the rail icons and (not on this page) the Donate heart. */ :root { /* The nine colours, plus white. */ --ll-support-blue: #221FBB; --ll-support-blue-dark: #181683; --ll-calm-beige: #F3EBD9; --ll-optimism-orange: #F45336; --ll-caring-coral: #F8D8D0; --ll-mindful-mauve: #DBD8F4; --ll-growth-green: #EBE6B4; --ll-hopeful-yellow: #FAE2B5; --ll-light-calm-beige: #FBF9F4; --ll-white: #FFFFFF; --ll-crisis-red: #B42318; /* Aliases the copied scripts and stylesheets expect. */ --ll-blue: var(--ll-support-blue); --ll-beige: var(--ll-calm-beige); --ll-beige-light: var(--ll-light-calm-beige); --ll-light-purple: var(--ll-mindful-mauve); --ll-hairline: color-mix(in srgb, var(--ll-support-blue) 14%, transparent); --ll-rule: color-mix(in srgb, var(--ll-support-blue) 25%, transparent); --ll-shadow-header: 10px 14px 54px color-mix(in srgb, var(--ll-support-blue) 25%, transparent); --ll-shadow-qe-hover: inset 0 0 0 2px rgba(0, 0, 0, 0.35); --ll-font: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Type scale (polish pass, 28 Oct 2026): one body size, one small size, three heading steps. */ --ll-text-s: 16px; --ll-text: 18px; --ll-text-l: 20px; --ll-h1: clamp(34px, 4.4vw, 50px); --ll-h2: clamp(28px, 3vw, 36px); --ll-h3: 24px; --ll-line-height-headline: 1.15; --ll-line-height-body: 1.6; /* Layout: one reading column, one wide column for the cards. Spacing on an 8px rhythm. */ --ll-col: 760px; --ll-col-wide: 1120px; --ll-measure: 60ch; --ll-space-section: clamp(56px, 8vw, 104px); --ll-gutter: clamp(20px, 4vw, 32px); --ll-radius-button: 24px; --ll-radius-card: 32px; --ll-radius-hero: 60px; --ll-radius-pill: 9999px; --ll-rail-clear: 120px; --ll-rail-bar: 210px; --ll-qe-inset-y: 12px; --ll-qe-inset-x: 16px; --llx-dur: 150ms; --llx-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Fallback reserve for the bottom bar; site.js replaces it with the bar's measured height. */ @media (max-width: 991px) { :root { --ll-rail-bar: 160px; } } /* ---------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 24px; -webkit-font-smoothing: antialiased; } @media (max-width: 991px) { html { scroll-padding-bottom: var(--ll-rail-bar); } } body { margin: 0; background: var(--ll-white); color: var(--ll-support-blue); font-family: var(--ll-font); font-size: var(--ll-text); line-height: var(--ll-line-height-body); text-rendering: optimizeLegibility; } h1, h2, h3, h4 { text-wrap: balance; } p, li { text-wrap: pretty; } h1, h2, h3, h4 { color: var(--ll-support-blue); font-weight: 700; } a { color: inherit; } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--ll-support-blue); outline-offset: 3px; } img { max-width: 100%; height: auto; } [hidden] { display: none !important; } .llcw-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; } .skip-to-content { position: absolute; top: -100px; left: 16px; z-index: 10000; padding: 12px 24px; border-radius: 0 0 8px 8px; background: var(--ll-support-blue); color: var(--ll-white); font-size: 16px; font-weight: 700; text-decoration: none; } .skip-to-content:focus { top: 0; outline: 3px solid var(--ll-white); outline-offset: -6px; } /* Room for the fixed chrome at desktop widths (expert review, 28 Oct 2026): - the crisis rail on the right (104px wide); - Quick Exit at the bottom left (to x=138). Below 1500px the centred column would run under one or the other, so the sections, header and footer all take the same side padding, which also keeps one left edge for logo, text and cards. The selector names the section class so it outranks .ll-cn__section's own padding (it silently lost before). */ @media (min-width: 992px) and (max-width: 1499.98px) { main > section.ll-cn__section, .ll-header__inner, .ll-ft__inner { padding-left: 152px; padding-right: var(--ll-rail-clear); } } @media (max-width: 991px) { body { padding-bottom: var(--ll-rail-bar); } } /* --------------------------------------------------------------- header */ .ll-header { background: var(--ll-support-blue); color: var(--ll-white); } .ll-header__inner { max-width: calc(var(--ll-col-wide) + 2 * var(--ll-gutter)); min-height: 113px; margin: 0 auto; padding: 0 var(--ll-gutter); display: flex; align-items: center; } .ll-header__brand { display: inline-flex; border-radius: 8px; } .ll-header__brand:focus-visible { outline-color: var(--ll-white); } .ll-header__logo { display: block; width: auto; height: 50px; } @media (max-width: 991px) { .ll-header__inner { min-height: 64px; padding-left: max(var(--ll-gutter), calc(env(safe-area-inset-left) + 20px)); } .ll-header__logo { height: 36px; } } /* ------------------------------------------------------------- sections */ .ll-cn__section { padding: var(--ll-space-section) var(--ll-gutter); } .ll-cn__section--beige-light { background: var(--ll-light-calm-beige); } .ll-cn__section--white { background: var(--ll-white); } .ll-cn__section--beige, .ll-kit-enq { background: var(--ll-calm-beige); } #ways-to-help { background: var(--ll-mindful-mauve); } /* One left edge: every section's inner box is the wide column (the cards fill it), and text inside it keeps to the reading column. The header and footer align to the same box. */ .ll-cn__inner { width: 100%; max-width: var(--ll-col-wide); margin: 0 auto; display: flex; flex-direction: column; gap: 24px; } .ll-cn__inner > :not(.ll-cn__cards) { max-width: var(--ll-col); } .ll-svc-kit__anchor { scroll-margin-top: 24px; } .ll-cn__h1 { margin: 0; max-width: 20ch; font-size: var(--ll-h1); line-height: 1.1; letter-spacing: -0.015em; } .ll-cn__lede { margin: 0; max-width: var(--ll-measure); font-size: var(--ll-text-l); line-height: 1.55; } .ll-cn__h2, .ll-svc-kit__band-h { margin: 0; font-size: var(--ll-h2); line-height: var(--ll-line-height-headline); letter-spacing: -0.01em; } /* A heading followed by its text sits closer than the gap between blocks. */ .ll-cn__inner > :is(.ll-cn__h1, .ll-cn__h2) + :is(.ll-cn__p, .ll-cn__lede) { margin-top: -8px; } .ll-cn__p { margin: 0; max-width: var(--ll-measure); font-size: var(--ll-text); line-height: var(--ll-line-height-body); } .ll-cn__p a:not([class]) { text-decoration: underline; text-underline-offset: 2px; } main a, .ll-ft a { overflow-wrap: anywhere; } .ll-cn__note { margin: 0; max-width: var(--ll-measure); font-size: var(--ll-text-s); line-height: var(--ll-line-height-body); } .ll-cn__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .ll-cn__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; margin-top: 8px; width: 100%; } .ll-cn__card { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 32px); background: var(--ll-white); border: 0; border-radius: var(--ll-radius-card); color: var(--ll-support-blue); } .ll-cn__card-h { margin: 0; font-size: var(--ll-h3); line-height: 1.25; } /* --------------------------------------------------------------- buttons */ a.ll-hp__btn { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; padding: 12px 28px; border-radius: var(--ll-radius-pill); background: var(--ll-support-blue); color: var(--ll-white); font-size: var(--ll-text); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; } @media (max-width: 478px) { a.ll-hp__btn { white-space: normal; text-align: center; } } .ll-svc-kit__btn { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; margin-top: auto; padding: 12px 28px; border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-pill); color: var(--ll-support-blue); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; } a.ll-hp__btn, .ll-svc-kit__btn, .ll-kit-enq__form button[type=submit], .ll-ms__btn { transition: background-color var(--llx-dur) var(--llx-ease), color var(--llx-dur) var(--llx-ease), box-shadow var(--llx-dur) var(--llx-ease); } @media (hover: hover) { a.ll-hp__btn:hover, .ll-ms__btn:not(.ll-ms__btn--ghost):hover, .brxe-form button[type=submit]:hover { background: var(--ll-white); color: var(--ll-support-blue); box-shadow: inset 0 0 0 2px var(--ll-support-blue); text-decoration: none; } .ll-ms__btn--ghost:hover { background: var(--ll-light-calm-beige); text-decoration: none; } .ll-svc-kit__btn:hover { background: var(--ll-support-blue); color: var(--ll-white); } } main a:not([class]):hover, .ll-rail a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; } /* -------------------------------------------------------------- the form */ .ll-form-col { display: flex; flex-direction: column; gap: 24px; width: 100%; } .ll-form-guard { margin: 0; padding: 16px 24px; background: var(--ll-white); border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-button); font-size: var(--ll-text-s); line-height: 1.6; } .ll-form-col > .ll-form-intro + .ll-form-intro { margin-top: -16px; } .ll-form-guard a, .ll-kit-enq .ll-cn__p a { color: inherit; text-decoration: underline; } .brxe-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; width: 100%; } .brxe-form .form-group { display: flex; flex-direction: column; width: 100%; margin: 0; padding: 0; } .brxe-form .form-group > label { margin-bottom: 8px; color: var(--ll-support-blue); font-size: var(--ll-text); font-weight: 700; line-height: 1.4; } .brxe-form :is(input[type=text], input[type=email], input[type=tel]) { width: 100%; height: 52px; padding: 0 20px; background: var(--ll-white); color: var(--ll-support-blue); border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-pill); font: inherit; font-size: var(--ll-text); line-height: 1.2; } /* Width hints at the expected answer (GOV.UK): names, phone and town are short; email stays full width. */ .brxe-form :is(.ll-field--name, .ll-field--short) input { max-width: 24rem; } .brxe-form textarea { width: 100%; min-height: 128px; padding: 14px 20px; background: var(--ll-white); color: var(--ll-support-blue); border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-button); font: inherit; font-size: var(--ll-text); line-height: 1.5; resize: vertical; } .brxe-form :is(input, textarea, button):focus-visible { outline: 3px solid var(--ll-support-blue); outline-offset: 3px; } .brxe-form > div:has(> input[type=hidden]):not(:has(input:not([type=hidden]))) { display: none; } /* Choice rows: one option per row, each row at least 44px tall so it is easy to hit with a thumb, and a Support Blue box or circle (the browser's default ring is grey or black, which is off-palette). */ .brxe-form .form-group > .label { display: block; margin: 0 0 8px; font-size: var(--ll-text); font-weight: 700; line-height: 1.4; } .brxe-form .options-wrapper { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .brxe-form .options-wrapper.ll-options--inline { flex-direction: row; flex-wrap: wrap; column-gap: 32px; } .brxe-form .options-wrapper li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; } .brxe-form .options-wrapper li > input:is([type=radio], [type=checkbox]) { appearance: none; -webkit-appearance: none; flex: 0 0 24px; width: 24px; height: 24px; margin: 10px 0 0; background: var(--ll-white) center / 16px 16px no-repeat; border: 2px solid var(--ll-support-blue); cursor: pointer; } .brxe-form .options-wrapper li > input[type=radio] { border-radius: 50%; } .brxe-form .options-wrapper li > input[type=radio]:checked { background-color: var(--ll-support-blue); box-shadow: inset 0 0 0 4px var(--ll-white); } .brxe-form .options-wrapper li > input[type=checkbox] { border-radius: 6px; } /* A data URI cannot read CSS variables: the tick's "white" is --ll-white. */ .brxe-form .options-wrapper li > input[type=checkbox]:checked { background-color: var(--ll-support-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .brxe-form .options-wrapper li > label { display: block; flex: 1 1 auto; margin: 0; padding: 10px 0; font-size: var(--ll-text); font-weight: 400; line-height: 24px; cursor: pointer; } .ll-form-callout { padding: 12px 16px; background: var(--ll-white); border-left: 4px solid var(--ll-support-blue); border-radius: 0 var(--ll-radius-button) var(--ll-radius-button) 0; } .brxe-form .form-group:has(> .ll-form-legend) { margin-top: 20px; padding-top: 32px; border-top: 2px solid var(--ll-rule); } .brxe-form .form-group:first-child:has(> .ll-form-legend) { margin-top: 0; padding-top: 0; border-top: 0; } .ll-form-legend { margin: 0; font-size: var(--ll-h3); line-height: 1.25; } .ll-form-sublegend { margin: 0; font-size: var(--ll-text-l); font-weight: 700; line-height: 1.3; } .ll-form-hint { margin: -16px 0 0; font-size: 16px; line-height: 1.5; } .ll-form-note { margin: 0; font-size: 16px; line-height: 1.5; } .ll-form-hint a, .ll-form-note a { color: inherit; text-decoration: underline; } /* The honeypot: out of sight and out of the tab order, but still in the form for bots. */ .brxe-form .ll-hp-field { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* Send button (Bricks' markup: .text plus a .loading spinner). */ .brxe-form .submit-button-wrapper { justify-self: start; width: auto; margin-top: 4px; } .brxe-form button[type=submit] { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 28px; background: var(--ll-support-blue); color: var(--ll-white); border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-pill); font: inherit; font-size: var(--ll-text); font-weight: 700; line-height: 1.2; cursor: pointer; } .brxe-form button[type=submit] .loading { display: none; } .brxe-form button[type=submit] .loading svg { width: 1em; height: 1em; } .brxe-form button[type=submit].sending { cursor: default; } .brxe-form button[type=submit].sending .text { opacity: 0.7; } .brxe-form button[type=submit].sending .loading { display: inline-flex; } @media (prefers-reduced-motion: no-preference) { .brxe-form button[type=submit].sending .loading svg { animation: ll-spin 1s linear infinite; } } @keyframes ll-spin { to { transform: rotate(-360deg); } } @media (max-width: 478px) { .brxe-form .submit-button-wrapper, .brxe-form button[type=submit] { width: 100%; justify-content: center; } } .ll-turnstile, .ll-turnstile:empty { margin: 0; } .ll-privacy { margin: 0; max-width: var(--ll-measure); font-size: var(--ll-text-s); line-height: 1.5; } .ll-privacy a { color: inherit; text-decoration: underline; } /* Send errors (site.js adds .message.error). Announced by llcw-form-a11y's observer. */ .brxe-form .message { padding: 16px 20px; background: var(--ll-white); color: var(--ll-support-blue); border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-button); font-size: 17px; font-weight: 600; line-height: 1.5; } .brxe-form .message a { color: inherit; } /* Field errors and the error summary (llcw-form-a11y). */ .llcw-field-error { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 4px 12px; background: var(--ll-white); color: var(--ll-support-blue); border-radius: var(--ll-radius-button); font-size: var(--ll-text-s); font-weight: 700; line-height: 1.4; } .llcw-field-error::before { content: "\26A0\FE0E"; margin-right: 6px; } .brxe-form .form-group:has([aria-invalid="true"]) { padding-left: 16px; border-left: 4px solid var(--ll-support-blue); } .brxe-form [aria-invalid="true"]:is(input[type=text], input[type=email], input[type=tel], textarea) { border-width: 3px; } .llcw-form-summary { width: 100%; margin: 0 0 16px; padding: 16px 24px; background: var(--ll-white); color: var(--ll-support-blue); border: 3px solid var(--ll-support-blue); border-radius: var(--ll-radius-button); font-size: var(--ll-text-s); font-weight: 400; line-height: 1.4; } .llcw-form-summary:focus { outline: 3px solid var(--ll-support-blue); outline-offset: 3px; } .llcw-form-summary .ll-ms__sumtitle { font-size: var(--ll-text-l); } .llcw-form-summary:empty { display: none; } .ll-ref { font-weight: 700; } /* ------------------------------------------------- crisis support block */ .ll-svc-kit__crisis { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; padding: 20px 24px; border: 2px solid var(--ll-support-blue); border-radius: var(--ll-radius-button); } @media (max-width: 478px) { .ll-svc-kit__crisis { grid-template-columns: minmax(0, 1fr); } } .ll-svc-kit__crisis-label { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; } .ll-svc-kit__crisis-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; } .ll-svc-kit__crisis-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 17px; line-height: 1.5; } .ll-svc-kit__crisis-num { font-weight: 700; text-decoration: underline; white-space: nowrap; } /* ----------------------------------------------------------- crisis rail */ .ll-rail { position: fixed; top: 50%; right: 0; z-index: 9000; display: flex; flex-direction: column; width: 104px; max-width: 104px; overflow: hidden; transform: translateY(-50%); background: var(--ll-support-blue); color: var(--ll-support-blue); border-radius: 14px 0 0 14px; box-shadow: var(--ll-shadow-header); font-variation-settings: 'wdth' 75; } .ll-rail summary { list-style: none; cursor: pointer; } .ll-rail summary::-webkit-details-marker { display: none; } .ll-rail summary:focus-visible { outline: 3px solid var(--ll-white); outline-offset: -3px; } .ll-rail:not([open]) .ll-rail__expanded, .ll-rail[open] .ll-rail__collapsed { display: none; } .ll-rail__status, .ll-rail__toggle { background: var(--ll-support-blue-dark); color: var(--ll-white); font-size: 17px; font-weight: 700; text-align: center; } .ll-rail__status { order: 0; display: flex; align-items: center; justify-content: center; padding: 8px 4px; line-height: 1.2; white-space: nowrap; } .ll-rail__panel { order: 1; display: flex; flex-direction: column; background: var(--ll-light-calm-beige); } .ll-rail__toggle { order: 2; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 6px; line-height: 1.15; } .ll-rail__chev::before { content: "\203A"; display: inline-block; margin-right: 6px; font-weight: 700; transform: rotate(90deg); } details:not([open]) > .ll-rail__toggle .ll-rail__chev { display: none; } .ll-rail__item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; background: var(--ll-light-calm-beige); color: var(--ll-support-blue); text-align: center; text-decoration: none; transition: background-color var(--llx-dur) var(--llx-ease); } .ll-rail__item + .ll-rail__item { border-top: 1px solid var(--ll-hairline); } .ll-rail__item:hover, .ll-rail__item:focus-visible { background: var(--ll-calm-beige); } .ll-rail__item:hover .ll-rail__item-value, .ll-rail__item:focus-visible .ll-rail__item-value { text-decoration-thickness: 2px; } .ll-rail__item:focus-visible { outline: 3px solid var(--ll-support-blue); outline-offset: -3px; } .ll-rail__icon { color: var(--ll-crisis-red); font-size: 16px; line-height: 1; } .ll-rail__itemtext { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 5px; } .ll-rail__item-label { font-size: 16px; font-weight: 600; } .ll-rail__item-value { font-size: 16px; font-weight: 700; text-decoration: underline; } .ll-rail__note { padding: 10px 6px; background: var(--ll-calm-beige); color: var(--ll-support-blue); font-size: 16px; font-weight: 600; line-height: 1.35; text-align: center; } .ll-rail__note-label { display: block; } .ll-rail__note a { color: var(--ll-support-blue); font-weight: 700; text-decoration: underline; } @media (hover: hover) { .ll-rail__toggle:hover { background: var(--ll-support-blue); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .ll-rail__toggle { transition: background-color 150ms ease; } } @media (min-width: 992px) { .ll-rail:not([open]) { width: 44px; max-width: 44px; border-radius: 16px 0 0 16px; } .ll-rail:not([open]) > .ll-rail__toggle { writing-mode: vertical-rl; padding: 18px 10px; white-space: nowrap; } } /* Below 992px: a compact bar along the bottom (polish pass, 28 Oct 2026). Still open by default and still showing every number, but about 150px tall instead of 270px on a phone: row 1 "Available 24/7" and Collapse, row 2 the four contacts side by side, row 3 Call 000. Collapsed, it is one strip: a tappable "Call 13 11 14" and "Show all" (expert review, 28 Oct 2026: a person in crisis should not have to tap twice to call). Every text node stays at 16px or more. Here the wrapping