@charset "utf-8"; /* =========================================================================== ClearMind Services — site stylesheet --------------------------------------------------------------------------- Contents 01 Tokens 02 Text-size and high-contrast modes 03 Reset and base elements 04 Layout primitives 05 Typography 06 Buttons and links 07 Header and navigation 08 Hero and page headers 09 Cards, lists, callouts, steps 10 Accordion (FAQ) 11 Forms 12 CTA band 13 Footer 14 Utilities 15 Print --------------------------------------------------------------------------- Colours come from the client's logo. Contrast rule: --purple-500 measures 4.39:1 on white — fine for large display text, icons, borders and fills, but short of AA for body copy, so body-size text uses --purple-700, --blue-900 or --ink. Every pair in this file is verified against WCAG AA (4.5:1 text, 3:1 UI boundaries and large text). =========================================================================== */ /* -- 01 Tokens ----------------------------------------------------------- */ :root { /* brand */ --purple-500: #8B53FF; /* logo wordmark — 4.39:1 on white: large text, icons and fills; not body-size text */ --purple-600: #7A3DF0; --purple-700: #6B2FD6; /* accessible purple: links, small text */ --purple-900: #3B1A78; /* headings */ --blue-900: #0327A0; /* logo figure — headings, deep surfaces */ --orange-500: #EC8613; /* logo tagline — accents, large text only */ --orange-700: #AF5709; /* accessible orange: >=4.5:1 on white and on --warm */ --orange-600: #C2680B; /* graphic accent: >=3:1 on white and --warm */ --amber-400: #F7B61C; --pink-400: #FF7AE1; /* ink and surfaces */ --ink: #1A1533; --ink-muted: #4A4363; --ink-subtle: #6A6383; --paper: #FFFFFF; --lavender: #FAF8FF; --lavender-200:#EFE8FF; --warm: #FFF7EC; --warm-200: #FFE9CC; --line: #E2DCF0; --line-strong: #8F7CBB; /* UI boundaries (inputs, buttons): >=3:1 */ --line-soft: #C9BFE4; /* decorative separators only */ /* feedback */ --error: #B3261E; --error-bg: #FDECEA; --success: #1B6E3C; --success-bg: #E9F6EE; /* focus — deliberately not brand purple, so it reads against purple UI */ --focus: #0B3FD8; /* shape and depth */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(26, 21, 51, .06), 0 2px 8px rgba(26, 21, 51, .05); --shadow-md: 0 2px 6px rgba(26, 21, 51, .07), 0 12px 28px rgba(26, 21, 51, .08); /* rhythm */ --gap: 1.25rem; --section-y: clamp(3rem, 7vw, 5.5rem); --wrap: 72rem; --measure: 38rem; /* type */ --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --lh-tight: 1.15; --lh-body: 1.65; /* the header is sticky; anchors must clear it */ --header-h: 4.5rem; } /* -- 02 Text-size and high-contrast modes -------------------------------- */ /* Driven by the accessibility toolbar; applied to before first paint. */ html { font-size: 100%; } html[data-textsize="large"] { font-size: 112.5%; } html[data-textsize="xlarge"] { font-size: 125%; } html[data-contrast="high"] { --ink: #000000; --ink-muted: #1A1A1A; --ink-subtle: #1A1A1A; --paper: #FFFFFF; --lavender: #FFFFFF; --lavender-200: #FFFFFF; --warm: #FFFFFF; --warm-200: #FFFFFF; --line: #000000; --line-strong: #000000; --purple-500: #4B0FA8; --purple-600: #4B0FA8; --purple-700: #4B0FA8; --purple-900: #000000; --blue-900: #00136B; --orange-500: #8A4200; --orange-700: #8A4200; --shadow-sm: none; --shadow-md: none; } html[data-contrast="high"] a { text-decoration: underline; } html[data-contrast="high"] .card, html[data-contrast="high"] .callout, html[data-contrast="high"] .field input, html[data-contrast="high"] .field select, html[data-contrast="high"] .field textarea, html[data-contrast="high"] .acc__item { border-width: 2px; } html[data-contrast="high"] .btn { border-width: 3px; } /* -- 03 Reset and base elements ------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.125rem; /* 18px at default text size */ line-height: var(--lh-body); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } :where(h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote) { margin: 0 0 1rem; } :where(ul, ol) { padding-left: 1.35em; } li + li { margin-top: .4rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Focus: always visible, never removed. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 3px; } /* Older engines without :focus-visible still get a ring. */ :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--lavender-200); color: var(--ink); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blue-900); color: #fff; padding: .85rem 1.25rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; outline: 3px solid var(--amber-400); outline-offset: -3px; } /* -- 04 Layout primitives ------------------------------------------------ */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } @media (max-width: 30rem) { .wrap { width: min(100% - 1.75rem, var(--wrap)); } } .section { padding-block: var(--section-y); } .section--tint { background: var(--lavender); } .section--warm { background: var(--warm); } .section--deep { background: var(--blue-900); color: #fff; } .section--deep :where(h2, h3) { color: #fff; } .section--deep a { color: var(--amber-400); } .stack > * + * { margin-top: 1rem; } .stack-lg > * + * { margin-top: 2rem; } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* Text column capped for readability. */ .prose { max-width: var(--measure); } .prose--wide { max-width: 46rem; } /* -- 05 Typography ------------------------------------------------------- */ h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 800; letter-spacing: -.015em; color: var(--purple-900); text-wrap: balance; } h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); margin-bottom: .6em; } h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); margin-bottom: .6em; } h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); margin-bottom: .5em; } h4 { font-size: 1.05rem; margin-bottom: .4em; letter-spacing: 0; } .eyebrow { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--orange-700); margin-bottom: .75rem; } .lede { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); line-height: 1.55; color: var(--ink-muted); } .pull { border-left: 5px solid var(--purple-500); padding: .35rem 0 .35rem 1.4rem; margin: 2rem 0; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.4; font-weight: 700; color: var(--purple-900); } /* Heading that should look one level smaller than its semantic level. */ .h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.4rem); } .muted { color: var(--ink-muted); } .small { font-size: .925rem; } /* -- 06 Buttons and links ------------------------------------------------ */ a { color: var(--purple-700); text-underline-offset: .18em; /* Email addresses and URLs are single unbreakable tokens; `anywhere` lets them wrap AND shrinks their min-content width, which `break-word` does not — without it a 30-character address forces horizontal scroll at 320px. */ overflow-wrap: anywhere; } a:hover { color: var(--purple-900); } .btn { --btn-bg: var(--purple-700); --btn-fg: #fff; --btn-bd: var(--purple-700); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; /* comfortable touch target */ padding: .7rem 1.5rem; border: 2px solid var(--btn-bd); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .btn:hover { --btn-bg: var(--purple-900); --btn-bd: var(--purple-900); color: #fff; } .btn:active { transform: translateY(1px); } .btn--secondary { --btn-bg: transparent; --btn-fg: var(--purple-700); --btn-bd: var(--line-strong); } .btn--secondary:hover { --btn-bg: var(--lavender-200); --btn-bd: var(--purple-700); color: var(--purple-900); } .btn--accent { --btn-bg: var(--orange-700); --btn-bd: var(--orange-700); } .btn--accent:hover { --btn-bg: #8A4507; --btn-bd: #8A4507; } .btn--onDeep { --btn-bg: #fff; --btn-fg: var(--blue-900); --btn-bd: #fff; } .btn--onDeep:hover { --btn-bg: var(--amber-400); --btn-bd: var(--amber-400); color: #241a00; } .btn--ghostOnDeep { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .6); } .btn--ghostOnDeep:hover { --btn-bg: rgba(255, 255, 255, .14); --btn-bd: #fff; color: #fff; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* Text link that behaves like a call to action. */ .arrow-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; } .arrow-link::after { content: "\2192"; transition: transform .18s ease; } .arrow-link:hover { border-bottom-color: currentColor; } .arrow-link:hover::after { transform: translateX(3px); } /* -- 07 Header and navigation -------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); } /* The header carries 8 nav items, a wide logo and a CTA, so it is allowed to run wider than the content measure. */ .site-header .wrap { --wrap: 82rem; } .utility-bar { background: var(--blue-900); color: #fff; font-size: .9rem; } .utility-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.25rem; padding-block: .45rem; } .utility-bar a { color: #fff; } .utility-bar__contact { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; } /* Accessibility toolbar */ .a11y-bar { display: flex; align-items: center; gap: .4rem; } .a11y-bar__label { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; } .a11y-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: .2rem .65rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); background: transparent; color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; } .a11y-btn:hover { background: rgba(255, 255, 255, .16); } .a11y-btn[aria-pressed="true"] { background: var(--amber-400); color: #241a00; border-color: var(--amber-400); } .header-main .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); padding-block: .6rem; } /* The full lockup is 8:1, far too wide for small screens, so the markup swaps to the square mark under 420px via . min-width:0 lets the brand shrink rather than pushing the Menu button off the viewport. */ .brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; } .brand picture { display: block; } .brand img { height: clamp(2.1rem, 1.5rem + 1.6vw, 2.75rem); width: auto; max-width: 100%; } .nav-toggle { display: none; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .45rem .9rem; border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--purple-900); font: inherit; font-weight: 700; cursor: pointer; } .nav-toggle__bars { display: inline-block; width: 1.1rem; height: 2px; background: currentColor; position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav { display: flex; align-items: center; gap: .15rem; } .nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; } .nav__list li { margin: 0; } .nav__link { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .5rem; border-radius: var(--r-sm); color: var(--ink); font-size: .925rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .nav__link:hover { background: var(--lavender-200); color: var(--purple-900); } /* Current-page marker. Square the bottom corners: with the full radius the inset underline curls up at each end and reads as a broken box. */ .nav__link[aria-current="page"], .nav__disclosure[aria-current="true"] { color: var(--purple-900); box-shadow: inset 0 -3px 0 var(--purple-500); border-radius: var(--r-sm) var(--r-sm) 0 0; } /* Services disclosure menu */ .nav__item--has-menu { position: relative; } .nav__disclosure { border: 0; background: none; font: inherit; cursor: pointer; } .nav__disclosure::after { content: ""; width: .42em; height: .42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.1em); transition: transform .18s ease; } .nav__disclosure[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-.1em); } .nav__menu { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 90; min-width: 20rem; margin: 0; padding: .5rem; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md); } .nav__menu[hidden] { display: none; } .nav__menu a { display: block; padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--ink); font-size: .95rem; text-decoration: none; } .nav__menu a:hover { background: var(--lavender-200); color: var(--purple-900); } .nav__menu li + li { margin-top: 1px; } .nav__menu-divider { margin: .4rem .3rem; border-top: 1px solid var(--line); } .nav__cta { margin-left: .5rem; } .nav__cta .btn { white-space: nowrap; } /* Mobile navigation */ @media (max-width: 71.9375rem) { .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: 0 0 0 auto; width: min(24rem, 100%); display: block; padding: 1.25rem 1.25rem 3rem; overflow-y: auto; background: var(--paper); border-left: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateX(100%); transition: transform .22s ease; } .nav[data-open="true"] { transform: translateX(0); } .nav[hidden] { display: none; } .nav__list { display: block; } .nav__list li { margin: 0; } .nav__link { display: flex; justify-content: space-between; width: 100%; padding: .8rem .6rem; font-size: 1.05rem; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); } .nav__link[aria-current="page"] { box-shadow: none; background: var(--lavender-200); } .nav__menu { position: static; min-width: 0; margin: .25rem 0 .5rem .6rem; border: 0; border-left: 3px solid var(--lavender-200); border-radius: 0; box-shadow: none; padding: .25rem 0 .25rem .6rem; } .nav__cta { display: block; margin: 1rem 0 0; } .nav__cta .btn { width: 100%; } .nav-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(26, 21, 51, .45); } .nav-scrim[hidden] { display: none; } .nav { z-index: 96; } } /* -- 08 Hero and page headers -------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 82% -12%, var(--lavender-200), transparent 62%), radial-gradient(42rem 24rem at 8% 108%, var(--warm-200), transparent 60%), var(--lavender); padding-block: clamp(3rem, 6vw, 5.5rem); border-bottom: 1px solid var(--line); } .hero__inner { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } @media (max-width: 56rem) { .hero__inner { grid-template-columns: 1fr; } } .hero h1 { margin-bottom: .45em; } .hero__aside { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-md); } /* Interior page header */ .page-head { background: var(--lavender); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 4.5vw, 3.5rem); } .page-head h1 { margin-bottom: .35em; } .page-head .lede { max-width: 46rem; margin-bottom: 0; } /* Deep page header — used where the client's mockup shows a solid banner behind the title. Same brand blue as the CTA band, so it reads as part of the system rather than a one-off. */ .page-head--deep { background: radial-gradient(38rem 20rem at 88% 0%, rgba(139, 83, 255, .38), transparent 62%), var(--blue-900); border-bottom: 0; } .page-head--deep h1 { color: #fff; } .page-head--deep .lede { color: rgba(255, 255, 255, .92); } .page-head--deep .eyebrow { color: var(--amber-400); } .page-head--deep .breadcrumb a { color: #fff; } .page-head--deep .breadcrumb [aria-current="page"], .page-head--deep .breadcrumb li + li::before { color: rgba(255, 255, 255, .75); } .breadcrumb { font-size: .9rem; margin-bottom: 1rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: .3rem .55rem; list-style: none; margin: 0; padding: 0; } .breadcrumb li { margin: 0; display: flex; align-items: center; gap: .55rem; } .breadcrumb li + li::before { content: "/"; color: var(--ink-subtle); } .breadcrumb [aria-current="page"] { color: var(--ink-muted); } /* -- 09 Cards, lists, callouts, steps ------------------------------------ */ .card { display: flex; flex-direction: column; padding: clamp(1.15rem, 2.5vw, 1.6rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .card > :last-child { margin-bottom: 0; } .card h3 { margin-bottom: .45em; } .card p { color: var(--ink-muted); } .card__foot { margin-top: auto; padding-top: 1rem; } /* A card that is entirely one link target. */ .card--link { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card--link:hover { border-color: var(--purple-500); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card--link { position: relative; } /* The whole card is the hit area, so the title link carries no underline of its own; hover and focus are expressed by the card. */ .card--link h3 a { color: var(--purple-900); text-decoration: none; } .card--link h3 a::after { content: ""; position: absolute; inset: 0; } .card--link:hover h3 a { color: var(--purple-700); } .card--link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--purple-500); } .card--link h3 a:focus-visible { outline: none; } .card__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin-bottom: 1rem; border-radius: var(--r-md); background: var(--lavender-200); color: var(--purple-700); flex: 0 0 auto; } .card__icon svg { width: 1.5rem; height: 1.5rem; } .card__icon--warm { background: var(--warm-200); color: var(--orange-700); } /* Checklist — used for "What You Can Expect", service inclusions, rights */ .checklist { list-style: none; padding: 0; margin: 0 0 1rem; } .checklist li { position: relative; padding-left: 2rem; margin-top: .65rem; } .checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 1.15rem; height: .6rem; border-left: 3px solid var(--purple-500); border-bottom: 3px solid var(--purple-500); transform: rotate(-45deg); border-radius: 1px; } .checklist--warm li::before { border-color: var(--orange-600); } .callout { padding: clamp(1.1rem, 2.4vw, 1.5rem); border: 1px solid var(--line); border-left: 5px solid var(--purple-500); border-radius: var(--r-md); background: var(--lavender); } .callout > :last-child { margin-bottom: 0; } .callout h3 { margin-bottom: .4em; } .callout--warm { background: var(--warm); border-left-color: var(--orange-600); } .callout--urgent { background: var(--error-bg); border-color: #F3C9C5; border-left-color: var(--error); } .callout--urgent h3 { color: #7C1A15; } /* Numbered process steps */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; } .steps > li { position: relative; counter-increment: step; padding-left: 3.5rem; margin-top: 1.5rem; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--purple-700); color: #fff; font-weight: 800; font-size: 1.05rem; } .steps h3 { margin-bottom: .3em; } .steps p { margin-bottom: 0; color: var(--ink-muted); } /* Definition-style value list */ .values { display: grid; gap: var(--gap); } .values dt { font-weight: 800; color: var(--purple-900); font-size: 1.1rem; } .values dd { margin: .25rem 0 0; color: var(--ink-muted); } /* -- 09b Photography ------------------------------------------------------- */ /* Every photo declares width/height so the browser reserves the right space and the page does not jump as images arrive. */ .media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--lavender-200); } .media img { width: 100%; height: 100%; object-fit: cover; } .media--band img { aspect-ratio: 16 / 6; } @media (max-width: 46rem) { .media--band img { aspect-ratio: 3 / 2; } } .media--portrait img { aspect-ratio: 4 / 5; } .media figcaption { padding: .6rem .2rem 0; font-size: .875rem; color: var(--ink-muted); } /* Text beside a photo; the photo drops below the text on narrow screens. */ .split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split > * { min-width: 0; } .split .media img { aspect-ratio: 3 / 2; } .split .media--portrait img { aspect-ratio: 4 / 5; } @media (max-width: 56rem) { .split { grid-template-columns: 1fr; } /* Keep the text first on small screens even when the photo comes first in source order, so the page still reads top-to-bottom. */ .split--imageFirst .media { order: 2; } } /* Registered NDIS Provider badge. Sits on white so the purple mark keeps its contrast on any section tint. */ .ndis-badge { display: inline-block; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } /* Absolute widths, not percentages: inside a shrink-to-fit box a percentage width resolves against an indefinite container, so the card sizes itself to the image's intrinsic 720px and stretches. The global img rule still caps these at 100% on very narrow screens. */ .ndis-badge img { width: 20rem; } /* Footer sits on a dark ground, so the badge keeps its white card but runs smaller than the page-level one. */ .site-footer .ndis-badge { margin-top: 1.25rem; padding: .8rem 1rem; } .site-footer .ndis-badge img { width: 12rem; } /* Hero: a trust marker under the calls to action, not a headline. */ .ndis-badge--hero { margin-top: 1.75rem; } .ndis-badge--hero img { width: 14rem; } /* -- 10 Accordion (FAQ) --------------------------------------------------- */ /* Built on
so it works with JavaScript disabled. */ .acc { display: grid; gap: .75rem; } .acc__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; } .acc__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .acc__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; font-weight: 700; font-size: 1.05rem; color: var(--purple-900); cursor: pointer; list-style: none; } .acc__q::-webkit-details-marker { display: none; } .acc__q:hover { background: var(--lavender); } .acc__q::after { content: ""; flex: 0 0 auto; width: .6rem; height: .6rem; margin-top: .45em; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; } .acc__item[open] .acc__q::after { transform: rotate(-135deg); } .acc__a { padding: 0 1.15rem 1.15rem; } .acc__a > :last-child { margin-bottom: 0; } /* -- 11 Forms ------------------------------------------------------------- */ .form { max-width: 44rem; } .form fieldset { margin: 0 0 2rem; padding: 0; border: 0; /* Fieldsets default to min-inline-size:min-content, so a long