/* ========================================================= Step by Step Counselling Calm, warm, refined. No flashy effects. ========================================================= */ :root { --sand-50: #faf6f0; --sand-100: #f3ebde; --sand-200: #e6d8c3; --stone-300:#c8b89a; --stone-500:#6e5e47; --stone-700:#4a3f30; --ink-900: #2a241c; --ink-700: #4a3f30; --ink-500: #6c5f4d; --plum: #7c5a73; /* Darkened from #5d4156: the eyebrow label uses this at 0.78rem over the page gradient, whose darkest stop is #cbb0b4. The old value measured 4.42:1 there, just under the 4.5:1 needed for normal text (WCAG 1.4.3). This reads 5.03:1. */ --plum-dark:#54394d; --moss: var(--plum); --moss-dark:var(--plum-dark); /* Decorative hairlines: section dividers and card edges. Deliberately soft, and exempt from 1.4.11 because they carry no information. */ --line: #e3d8c3; /* Borders that define an interactive control. Must clear 3:1 against the field background (#faf6f0) to satisfy WCAG 1.4.11 Non-text Contrast; reads 3.29:1. */ --line-strong: #96875f; --bg-grad: radial-gradient(120% 130% at 78% 24%, #f3ece3 0%, #ece0d9 40%, #ddc4c6 72%, #cbb0b4 100%); --shadow-sm: 0 2px 6px rgba(74, 63, 48, 0.06); --shadow-md: 0 8px 24px rgba(74, 63, 48, 0.08); --radius-sm: 6px; --radius-md: 14px; --radius-lg: 22px; --serif: 'Lora', Georgia, 'Times New Roman', serif; --sans: 'Nunito Sans', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Anchor and skip-link targets sit clear of the sticky header, so a jumped-to or keyboard-focused element is never hidden behind it (WCAG 2.2, 2.4.11 Focus Not Obscured). Covering any id inside main also catches form fields reached by Tab. */ main, main [id] { scroll-margin-top: 100px; } @media (max-width: 880px) { /* Under 880px the header also carries the two-button CTA bar, so it is taller. */ main, main [id] { scroll-margin-top: 152px; } } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink-700); background: transparent; -webkit-font-smoothing: antialiased; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-grad); } img { max-width: 100%; height: auto; display: block; } /* Photos are wrapped in to offer WebP with a JPEG fallback. display:contents takes the wrapper out of layout entirely, so every existing rule that targets the img (including height:100% inside .card-image) keeps working untouched. */ picture { display: contents; } a { color: var(--moss-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--ink-900); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink-900); letter-spacing: -0.005em; line-height: 1.2; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; line-height: 1.15; } h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); font-weight: 500; } h3 { font-size: 1.35rem; font-weight: 500; } h4 { font-size: 1.15rem; font-weight: 500; } p { margin: 0 0 1em; } .eyebrow { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss-dark); margin: 0 0 1rem; font-weight: 500; } .centered { text-align: center; } .container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: white; padding: 0.5rem 1rem; z-index: 100; } .skip-link:focus { left: 1rem; top: 1rem; } /* ---------- Admin-controlled visibility ---------- */ /* When admin disables the contact form, JS adds .contact-hidden to . All elements tagged data-toggleable="contact" are then hidden. By default the form is visible (no class needed), so normal visitors see no delay. When hidden, there is a brief flash before JS runs. */ body.contact-hidden [data-toggleable="contact"] { display: none !important; } .hidden { position: absolute; left: -9999px; } /* ---------- Focus indicators (WCAG 2.4.7 Focus Visible AA) ---------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--moss-dark); outline-offset: 2px; border-radius: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--moss-dark); outline-offset: 2px; } /* ---------- Reduced motion (WCAG 2.3.3) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } } /* ---------- Header ---------- */ .site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.5rem; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink-900); } .brand img { height: 56px; width: auto; border-radius: 6px; display: block; } .site-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .site-nav a { text-decoration: none; color: var(--ink-700); font-size: 0.95rem; padding: 0.65rem 0.5rem; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; display: inline-block; } .site-nav a:hover { color: var(--ink-900); border-bottom-color: var(--stone-300); } .header-cta .phone { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink-900); background: var(--sand-100); padding: 0.55rem 1rem; border-radius: 999px; font-weight: 500; font-size: 0.95rem; border: 1px solid var(--line); transition: background 0.2s ease; } .header-cta .phone:hover { background: var(--sand-200); } .phone-icon { display: inline-flex; color: var(--moss-dark); } /* Hamburger menu, hidden on desktop */ .menu-button { display: none; } .mobile-nav { display: none; } /* Mobile-only call-to-action bar inside the sticky header. Hidden on desktop where the hero has its own clear CTAs. */ .cta-bar { display: none; } /* Belt and braces: force hidden at desktop widths */ @media (min-width: 881px) { .mobile-nav { display: none !important; } .menu-button { display: none !important; } .cta-bar { display: none !important; } } @media (max-width: 880px) { .site-nav { display: none; } /* CTA bar appears as a thin bar of two buttons below the main header bar. Lives inside the sticky header so they stick together. */ .cta-bar { display: flex; gap: 0.5rem; padding: 0.5rem 1rem 0.6rem; background: var(--sand-100); border-top: 1px solid var(--line); } .cta-bar-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 0.5rem; border-radius: 999px; font-family: var(--sans); font-size: 0.92rem; font-weight: 500; text-decoration: none; transition: background 0.15s ease, transform 0.1s ease; border: 1px solid transparent; } .cta-bar-btn:active { transform: translateY(1px); } .cta-bar-call { background: var(--moss-dark); color: white; } .cta-bar-call:hover, .cta-bar-call:focus { background: var(--moss); } .cta-bar-message { background: white; color: var(--ink-900); border-color: var(--line); } .cta-bar-message:hover, .cta-bar-message:focus { background: var(--sand-50); border-color: var(--moss); } /* Hide button labels at very narrow widths so the icons + bar gap stays clean */ @media (max-width: 360px) { .cta-bar-btn { font-size: 0.85rem; padding: 0.6rem 0.3rem; } } .header-cta .phone { /* tighten on mobile to leave room for the hamburger */ padding: 0.5rem 0.85rem; font-size: 0.9rem; } .menu-button { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: var(--sand-100); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; align-items: center; transition: background 0.2s ease; } .menu-button:hover { background: var(--sand-200); } .menu-button span { display: block; width: 18px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } /* Hamburger morphs into X when expanded */ .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { display: block; overflow: hidden; max-height: 0; background: var(--sand-50); border-top: 1px solid transparent; transition: max-height 0.3s ease, border-color 0.3s ease; } /* Override the hidden attribute when used for animation */ .mobile-nav[hidden] { display: block; max-height: 0; } .mobile-nav.is-open, .mobile-nav[hidden].is-open { max-height: 400px; border-top-color: var(--line); } .mobile-nav ul { list-style: none; margin: 0; padding: 0.5rem 0; } .mobile-nav li { border-bottom: 1px solid var(--line); } .mobile-nav li:last-child { border-bottom: none; } .mobile-nav a { display: block; padding: 0.95rem 1.5rem; color: var(--ink-900); text-decoration: none; font-size: 1rem; transition: background 0.15s ease; } .mobile-nav a:hover, .mobile-nav a:focus { background: var(--sand-100); } } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 500; text-decoration: none; font-size: 1rem; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; cursor: pointer; border: 1px solid transparent; font-family: var(--sans); } .btn-primary { background: var(--moss-dark); color: var(--sand-50); } .btn-primary:hover { background: var(--ink-900); color: var(--sand-50); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--moss-dark); border-color: var(--moss); } .btn-ghost:hover { background: rgba(124, 90, 115, 0.08); } /* ---------- Hero ---------- */ .hero { padding: 4.5rem 0 3rem; background: transparent; } .hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; } .hero-text { background: #fff; padding: 2.5rem 2.5rem 2.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border: 1px solid var(--line); } .hero-text .lede { font-size: 1.15rem; color: var(--ink-700); max-width: 560px; } .hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; } /* The fee, in the hero. Deliberately quiet: four plain facts and a link, not a price banner. It wraps to as many lines as it needs, so it holds at 320px without the row ever scrolling sideways. The separators are drawn rather than typed, so a screen reader hears "£55 individual, £75 couples" and not a string of bullet characters. */ .hero-fees { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 1.6rem; margin: 1.25rem 0 1.5rem; font-size: 0.95rem; color: var(--ink-700); } .hero-fee { display: inline-flex; align-items: baseline; gap: 0.3rem; } .hero-fees strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink-900); line-height: 1; } .hero-fees a { color: var(--plum-dark); text-decoration: underline; text-underline-offset: 3px; } .hero-fees a:hover { text-decoration-thickness: 2px; } /* The same facts on a topic page, where there is no pricing section to scroll to. */ .practical-fee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 1.6rem; margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-700); } .practical-fee strong { font-family: var(--serif); font-size: 1.15rem; color: var(--ink-900); } .practical-fee a { color: var(--plum-dark); text-decoration: underline; text-underline-offset: 3px; } .hero-image { position: relative; } .hero-image img { width: 100%; max-width: 420px; margin-left: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; } .hero-image-card { position: absolute; bottom: 1.5rem; left: 0; background: #fff; padding: 1rem 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-width: 240px; border: 1px solid var(--line); } .hero-image-card-label { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.25rem; } .hero-image-card-value { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--ink-900); line-height: 1.3; } @media (max-width: 880px) { .hero { padding: 2.5rem 0 2rem; } .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero-image img { max-width: 100%; aspect-ratio: 4 / 5; } .hero-image-card { position: static; margin-top: -2rem; margin-left: 1rem; } } /* ---------- Sections ---------- */ .section { padding: 5rem 0; } .section-about { background: white; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-cards { background: transparent; } .section-aside { background: transparent; padding: 3rem 0; } .aside-line { max-width: 680px; margin: 0 auto; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--ink-700); } .section-quotes { background: white; } .section-credentials { background: white; border-top: 1px solid var(--line); } .section-faq { background: white; border-top: 1px solid var(--line); } .section-share { background: transparent; } .section-contact { background: transparent; } .two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; } .two-col.reverse .col-text { order: 1; } .two-col.reverse .col-image { order: 2; } .col-image figure { margin: 0; } .col-image > figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .col-image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .col-image.rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .col-image.rooms img { aspect-ratio: 3 / 4; object-fit: cover; } /* Credentials section: centre photos vertically against the text column, and let the badges lozenge below stretch across the full container. */ .two-col.credentials-grid { align-items: center; margin-bottom: 2rem; } @media (max-width: 880px) { .two-col.credentials-grid { margin-bottom: 1.5rem; } } @media (max-width: 880px) { .section { padding: 3.5rem 0; } .two-col { grid-template-columns: 1fr; gap: 2.5rem; } .two-col.reverse .col-text { order: 2; } .two-col.reverse .col-image { order: 1; } } /* Topic list */ .topics { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } .topics li { display: flex; } .topics li a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; padding: 0.55rem 1.15rem; background: var(--moss-dark); border: 1px solid var(--moss-dark); border-radius: var(--radius-md); color: var(--sand-50); line-height: 1.25; box-shadow: var(--shadow-sm); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .topics li a:hover, .topics li a:focus-visible { background: var(--ink-900); border-color: var(--ink-900); color: var(--sand-50); transform: translateY(-1px); box-shadow: var(--shadow-md); } .topics li a .t { font-size: 0.95rem; font-weight: 600; } .topics li a .m { font-size: 0.76rem; color: var(--sand-50); margin-top: 0.12rem; } .topics-heading { text-align: center; margin-top: 1.5rem; } /* ---------- Cards ---------- */ .section-cards .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .card { background: var(--sand-50); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; border: 1px solid var(--line); } .card-image { aspect-ratio: 16 / 10; overflow: hidden; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.04); } .card-body { padding: 1.75rem 1.75rem 2rem; } .card-body h3 { margin-top: 0; } @media (max-width: 880px) { .section-cards .container { grid-template-columns: 1fr; gap: 1.5rem; } } /* ---------- Quotes ---------- */ .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; } .quote { margin: 0; padding: 2rem; background: var(--sand-50); border-radius: var(--radius-lg); border: 1px solid var(--line); position: relative; } .quote::before { content: "\201C"; font-family: var(--serif); font-size: 5rem; line-height: 1; color: var(--stone-300); position: absolute; top: 0.5rem; left: 1rem; } .quote blockquote { margin: 0 0 1rem; font-size: 1.05rem; color: var(--ink-700); font-style: italic; position: relative; z-index: 1; } .quote figcaption { font-size: 0.9rem; color: var(--stone-500); letter-spacing: 0.05em; } @media (max-width: 880px) { .quotes { grid-template-columns: 1fr; } } /* ---------- Pricing & badges ---------- */ .pricing { display: flex; gap: 1rem; margin: 1.5rem 0 2rem; flex-wrap: wrap; } .price { flex: 1; min-width: 160px; padding: 1.25rem 1.5rem; background: white; border-radius: var(--radius-md); border: 1px solid var(--line); } .price-label { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); margin-bottom: 0.4rem; } .price-value { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--ink-900); line-height: 1; } .price-meta { display: block; font-size: 0.85rem; color: var(--stone-500); margin-top: 0.3rem; } .badges { list-style: none; padding: 1.5rem 2rem; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-evenly; background: white; border: 1px solid var(--line); border-radius: var(--radius-md); } .badges li { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; } .badges li img { height: 64px; width: auto; max-width: 100%; opacity: 0.9; transition: opacity 0.2s ease; } .badges li:first-child img { height: 56px; } .badges li img:hover { opacity: 1; } @media (max-width: 540px) { .badges { padding: 1.25rem 1rem; gap: 1rem; } .badges li img { height: 48px; } .badges li:first-child img { height: 42px; } } /* ---------- FAQ ---------- */ .faq-list { max-width: 720px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 0.75rem; } .faq-item { background: var(--sand-50); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0; overflow: hidden; transition: border-color 0.2s ease; } .faq-item[open] { border-color: var(--stone-300); } .faq-item summary { padding: 1.1rem 1.4rem; font-weight: 500; font-size: 1.05rem; color: var(--ink-900); cursor: pointer; list-style: none; position: relative; padding-right: 3rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1.4rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--ink-500); font-weight: 300; transition: transform 0.2s ease; } .faq-item[open] summary::after { content: "−"; } .faq-item p { padding: 0 1.4rem 1.2rem; margin: 0; color: var(--ink-700); line-height: 1.6; } /* ---------- Contact ---------- */ .contact-lede { max-width: 520px; margin: 0 auto 2.5rem; color: var(--ink-700); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 720px; margin: 0 auto 2.5rem; } .contact-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem; background: white; border-radius: var(--radius-md); border: 1px solid var(--line); text-decoration: none; color: var(--ink-900); transition: border-color 0.2s ease, transform 0.15s ease; min-width: 0; } .contact-card:hover { border-color: var(--stone-300); transform: translateY(-2px); } .contact-card-label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone-500); } .contact-card-value { font-family: var(--serif); /* Scale font with viewport so the email always fits on one line. At narrow phones (~320px) clamp gives ~0.78rem; at desktop ~1rem. */ font-size: clamp(0.78rem, 3.2vw, 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* Stack cards into a single column on tablet-and-narrower so each card has the full container width to display the email comfortably on one line. */ @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } } .contact-form { max-width: 560px; margin: 0 auto 2rem; background: white; padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .field { margin-bottom: 1rem; } .field label { display: block; font-size: 0.85rem; color: var(--stone-500); margin-bottom: 0.4rem; letter-spacing: 0.04em; } /* Required fields say so in the label, matching the existing "(optional)" wording on the phone field, so the requirement is stated rather than left to be discovered on submit (WCAG 3.3.2 Labels or Instructions). */ .field label .req { font-weight: 400; opacity: 0.85; } .field-error { margin: 0.35rem 0 0; font-size: 0.85rem; font-weight: 600; color: #a3231b; /* 7.46:1 on white, 6.93:1 on the field background */ } .field-error[hidden] { display: none; } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a3231b; /* A ring rather than a thicker border, so flagging a field causes no reflow. */ box-shadow: 0 0 0 2px rgba(163, 35, 27, 0.18); } .field input, .field textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 1rem; background: var(--sand-50); color: var(--ink-900); } .field input:focus, .field textarea:focus { outline: 2px solid var(--moss); outline-offset: 1px; background: white; } .contact-form .btn { width: 100%; margin-top: 0.5rem; } .form-note { text-align: center; font-size: 0.85rem; color: var(--stone-500); margin-top: 1rem; margin-bottom: 0; } .socials { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap; } .socials a { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: white; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-700); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .socials a:hover { background: var(--moss-dark); color: white; } .socials li:last-child a { width: auto; height: auto; padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.9rem; } /* ---------- Footer ---------- */ .site-footer { padding: 2.5rem 0; background: var(--ink-900); color: var(--sand-200); font-size: 0.9rem; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .site-footer p { margin: 0; } .site-footer a { color: var(--sand-200); } .site-footer a:hover { color: white; } /* ---------- Share section ---------- */ .share-lede { max-width: 620px; margin: 0.75rem auto 2rem; color: var(--ink-700); line-height: 1.6; } .share-actions { display: flex; justify-content: center; margin-bottom: 1.5rem; } .share-actions .btn-primary svg { vertical-align: middle; margin-right: 0.5rem; margin-top: -2px; } .share-targets { list-style: none; padding: 0; margin: 0 auto; max-width: 700px; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .share-target { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: white; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-700); text-decoration: none; font-size: 0.95rem; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease, color 0.15s ease; font-family: inherit; } .share-target:hover { border-color: var(--moss); color: var(--moss-dark); transform: translateY(-1px); } .share-target svg { flex-shrink: 0; } .share-feedback { text-align: center; margin: 1rem 0 0; min-height: 1.2em; font-size: 0.9rem; color: var(--moss-dark); } @media (max-width: 540px) { .share-targets { gap: 0.5rem; } .share-target { font-size: 0.88rem; padding: 0.55rem 0.85rem; } } /* ---------- Long-form reading panel (articles + legal docs) ---------- */ .article-doc, .privacy-doc { background: #fff; padding: 2.75rem 2.75rem 3rem; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } @media (max-width: 600px) { .article-doc, .privacy-doc { padding: 1.75rem 1.3rem 2rem; } } /* ---------- Topic page: back to topics ---------- */ .back-top { margin: 0 0 1.5rem; } .back-fab { /* --dev-banner-h is set by site.js only on the preview site, where a fixed banner occupies the bottom of the viewport. It is 0 on production, so this resolves to the plain 16px offset there. */ position: fixed; left: 16px; bottom: calc(16px + var(--dev-banner-h, 0px)); z-index: 200; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--moss-dark); color: var(--sand-50); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 0.6rem 1rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .back-fab:hover, .back-fab:focus-visible { background: var(--ink-900); color: var(--sand-50); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.26); } .back-fab:focus-visible { outline: 2px solid var(--moss-dark); outline-offset: 3px; } /* ---------- Header booking CTA (topic pages) ---------- */ .header-cta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; } .header-book { padding: 0.55rem 1rem; font-size: 0.95rem; border-radius: 999px; white-space: nowrap; } .header-book .book-short { display: none; } @media (max-width: 880px) { .header-book { padding: 0.5rem 0.8rem; font-size: 0.85rem; } .header-book .book-long { display: none; } .header-book .book-short { display: inline; } } /* ---------- Crisis signposting ---------- Deliberately quiet: a calm bordered note, not a red alert box. Someone reading a page about their own distress should not be shouted at. Present on every topic page and, in one condensed line, in the footer of every page. */ .crisis-note { margin: 2.25rem 0 1.5rem; padding: 1.1rem 1.3rem; background: var(--sand-50); border: 1px solid var(--line); border-left: 4px solid var(--plum); border-radius: var(--radius-sm); } /* Two classes deep because the topic pages carry an inline