/* =========================================================================== All Brains Clinic — design system Tokens taken from the live Webflow stylesheet so the rebuild matches the brand exactly. Hand-authored replacement for abc-a95358.webflow.shared.css (308 KB of generated CSS -> this file). =========================================================================== */ /* --- font (self-hosted) --------------------------------------------------- The .ttf the Webflow site serves is 97 KB and sits on the critical path, preloaded from . The same variable font as WOFF2 — same 465 glyphs, same 100–900 weight axis, built from that file with fontTools — is 42 KB. The .ttf stays as the second `src` for anything that cannot read WOFF2; nothing that can render this site is in that group, so in practice it is never fetched. Regenerate with: python3 -c "from fontTools.ttLib import TTFont; \ f=TTFont('src/fonts/CabinetGrotesk-Variable.ttf'); f.flavor='woff2'; \ f.save('src/fonts/CabinetGrotesk-Variable.woff2')" ------------------------------------------------------------------------- */ @font-face { font-family: "Cabinet Grotesk"; src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2-variations"), url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2"), url("/fonts/CabinetGrotesk-Variable.ttf") format("truetype-variations"), url("/fonts/CabinetGrotesk-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* --- tokens --------------------------------------------------------------- */ :root { /* brand navy */ --navy-950: #011626; --navy-900: #02213d; --navy-800: #073e6b; --navy-700: #024275; --navy-ink: #16314d; /* brand green / mint */ --mint: #4ecfa2; --mint-light: #65e0b5; --mint-pale: #c7ebde; --green: #228a66; /* The brand green above is 4.29:1 on white, 3.65:1 on --ground and 3.34:1 on --mint-pale, so it is below WCAG AA (4.5:1) as body or label text on every light surface the site uses. It stays as the exported brand value for rules, borders and large display glyphs; --green-text is the same hue darkened until it clears AA on all three (6.17 / 5.25 / 4.81). Any green that paints *characters* on a light background uses --green-text. */ --green-text: #1c6e53; --green-deep: #186b4e; --green-darkest: #073324; --mint-ink: #0b412e; /* accents */ --blue: #2a8dda; --teal: #3daeb5; --gold: #fdb833; /* neutrals */ --ground: #e4eef8; --surface: #ffffff; --line: #c7d9ec; --ink: #14344f; --ink-strong: #0b2540; /* One step darker than the exported #4b6b8c, which is 4.33:1 on --mint-pale and so fails AA for the ledes that sit in a .section--mint band. At #476685 it clears AA on all three light surfaces (5.99 / 5.10 / 4.67); the shift is four points of lightness on a neutral, not a brand colour. */ --muted: #476685; /* type */ --font: "Cabinet Grotesk", "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --step-3: clamp(1.9rem, 1.5rem + 2vw, 3.1rem); --step-4: clamp(2.3rem, 1.7rem + 3vw, 4rem); /* layout */ --wrap: 1180px; /* Height of the sticky header. Read by the mobile nav panel, which hangs off the bottom of it, and by scroll-padding-top, which keeps an in-page anchor from landing underneath it. */ --header-h: 76px; --gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem); --radius: 18px; --radius-sm: 12px; --shadow: 0 1px 2px rgba(2, 33, 61, .06), 0 14px 38px -20px rgba(2, 33, 61, .3); --shadow-lg: 0 2px 6px rgba(2, 33, 61, .08), 0 30px 60px -28px rgba(2, 33, 61, .4); } /* --- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* The header is sticky, so without this every jump to a fragment — the skip link, a /questions/#faq-… deep link, /contact/#form — parks its target underneath the header. */ scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-strong); text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); letter-spacing: -.01em; } p { margin: 0 0 1em; } a { color: var(--green-text); } /* One focus ring for the whole site, form controls included — without it a text input falls back to the browser's own thin default and the site has two different focus indicators. No `border-radius` here: browsers already draw the outline along the element's own corners, and setting it in this rule deformed every pill — .btn and .search-chip visibly squared off from 999px to 4px for as long as they held focus. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--surface); color: var(--ink-strong); padding: .8em 1.2em; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; } .skip-link:focus { left: 0; } /*
carries tabindex="-1" so following the skip link actually moves focus rather than only the scroll position — without it the next Tab goes back to the header. It is not in the tab order and is not a control, so it takes no focus ring; the jump, and the next Tab landing inside the content, are the feedback. The attribute has to be in the selector: `[tabindex]:focus-visible` above is (0,2,0) and would otherwise outline the whole page. */ main[tabindex]:focus, main[tabindex]:focus-visible { outline: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); } .section { padding-block: var(--section-y); } .section--ground { background: var(--ground); } .section--mint { background: var(--mint-pale); } .section--navy { background: var(--navy-950); color: #fff; } .section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .section--navy p { color: #a9cbea; } .eyebrow { font-size: var(--step--1); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-text); margin: 0 0 .8em; } .section--navy .eyebrow { color: var(--mint); } .lede { font-size: var(--step-1); color: var(--muted); max-width: 60ch; } .section--navy .lede { color: #a9cbea; } .grid { display: grid; gap: var(--gap); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .7em; padding: 1.05em 1.9em; border-radius: 999px; font: inherit; font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; background: var(--mint); color: var(--mint-ink); border: 1px solid var(--green-deep); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .btn::after { content: "→"; font-weight: 800; } .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -8px rgba(34, 138, 102, .6); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } .btn--ghost::after { content: none; } .btn--ghost:hover { background: rgba(255, 255, 255, .08); box-shadow: none; } .btn--dark { background: var(--green-deep); color: #eafff6; border-color: var(--green-deep); } .btn--sm { padding: .7em 1.25em; font-size: .74rem; } .btns { display: flex; flex-wrap: wrap; gap: .75rem; } /* --- header / nav --------------------------------------------------------- */ .site-header { background: var(--navy-950); position: sticky; top: 0; z-index: 100; } .site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); } .brand { display: flex; align-items: center; flex: none; } .brand img { height: 42px; width: auto; } .nav { margin-left: auto; display: flex; align-items: center; gap: 0; } .nav a { color: #dbe8f6; text-decoration: none; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .7em .62em; border-radius: 8px; white-space: nowrap; } .nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); } .nav a[aria-current="page"] { color: var(--mint); } .nav-toggle { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: .6em; color: #fff; } .nav-toggle svg { width: 26px; height: 26px; } /* `.nav a` above is more specific than `.btn`, so without this the header's primary call to action inherits the nav's pale link colour and lands at 1.57:1 on the mint pill. */ .nav .btn { margin-left: .7rem; color: var(--mint-ink); } @media (max-width: 1200px) { .nav-toggle { display: block; } .nav { position: fixed; inset: var(--header-h) 0 auto; background: var(--navy-950); flex-direction: column; align-items: stretch; gap: 0; padding: 1rem var(--gap) 2rem; border-top: 1px solid rgba(255, 255, 255, .1); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .nav[hidden] { display: none; } .nav a { padding: .9em .4em; font-size: .9rem; } .nav .btn { margin-top: .8rem; justify-content: center; } } /* --- cards ---------------------------------------------------------------- */ .card { background: var(--surface); border-radius: var(--radius); padding: 1.9rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .6rem; } .card--link { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; } .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card__media { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 16/10; background: var(--ground); } .card__media img { width: 100%; height: 100%; object-fit: cover; } .card__title { font-size: var(--step-1); } .card__text { font-size: var(--step--1); color: var(--muted); margin: 0; } .card__icon { width: 54px; height: 54px; } .tag { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .35em .85em; border-radius: 999px; background: var(--mint-pale); color: var(--green-deep); } /* --- footer --------------------------------------------------------------- */ .site-footer { background: var(--navy-950); color: #a9cbea; padding-block: 4rem 2.5rem; } /* These are

so the document's heading order never jumps from the h1 or h2 above straight to an h4; they are sized here, not by the level. */ .site-footer h2 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1em; } .site-footer a { color: #dbe8f6; text-decoration: none; font-size: var(--step--1); } .site-footer a:hover { color: var(--mint); text-decoration: underline; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--gap); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: #7f9dbb; } /* =========================================================================== Home page =========================================================================== */ /* --- hero ----------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; background: var(--navy-950); overflow: hidden; } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(1, 22, 38, .93) 0%, rgba(1, 22, 38, .74) 46%, rgba(1, 22, 38, .34) 100%), linear-gradient(to top, rgba(1, 22, 38, .6), transparent 45%); } /* Pause/play for the background clip — WCAG 2.2.2. Small and in the corner, because it is a control for decoration, but a real button: in the tab order, with the site's own focus ring, and a hit area that clears 44px. The panel is opaque enough that the glyph keeps its contrast whatever frame is behind it. */ .hero__motion { position: absolute; right: var(--gap); bottom: 1.25rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 999px; cursor: pointer; background: rgba(1, 22, 38, .72); color: #fff; border: 1px solid rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .hero__motion[hidden] { display: none; } .hero__motion:hover { background: rgba(1, 22, 38, .9); } .hero__motion svg { width: 18px; height: 18px; } .hero__motion[data-state="playing"] .hero__motion-play { display: none; } .hero__motion[data-state="paused"] .hero__motion-pause { display: none; } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(4rem, 3rem + 8vw, 8.5rem); } .hero__copy h1 { color: #fff; max-width: 17ch; } .hero__lede { color: #cfe0f2; font-size: var(--step-1); max-width: 46ch; margin: 1.4rem 0 2.2rem; } @media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; } .hero__copy h1 { max-width: none; } } /* wait-time card */ .waits { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius); padding: 1.7rem 1.9rem; } .waits__h { font-size: var(--step-0); color: #fff; margin: 0 0 1.1rem; letter-spacing: -.01em; } .waits__h span { display: block; font-weight: 500; color: #a9cbea; font-size: .82rem; letter-spacing: 0; } .waits__table { width: 100%; border-collapse: collapse; } .waits__table th, .waits__table td { padding: .72rem .4rem; text-align: right; } .waits__table thead th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #a9cbea; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .18); } .waits__table tbody th { text-align: left; font-weight: 600; color: #dbe8f6; font-size: var(--step--1); } .waits__table tbody tr + tr th, .waits__table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .1); } .waits__table td { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; width: 4.5em; } .waits .is-abc { color: var(--mint); } .waits .is-other { color: #7fb0e0; } /* --- quick links strip ---------------------------------------------------- */ .quicklinks { background: var(--navy-900); } .quicklinks__inner { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1px; align-items: stretch; } .quicklink { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.6rem; text-decoration: none; color: #fff; transition: background .16s ease; } .quicklink:hover { background: rgba(255, 255, 255, .06); } .quicklink img { filter: brightness(0) invert(1); opacity: .9; flex: none; } .quicklink span { display: grid; font-size: var(--step--1); color: #a9cbea; line-height: 1.35; } .quicklink strong { color: #fff; font-size: var(--step-0); font-weight: 700; } .quicklink--cta { background: var(--mint); color: var(--mint-ink); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; justify-content: center; padding-inline: 3rem; } .quicklink--cta:hover { background: var(--mint-light); } @media (max-width: 860px) { .quicklinks__inner { grid-template-columns: 1fr; } .quicklink--cta { padding-block: 1.1rem; } } /* --- numbered reasons ----------------------------------------------------- */ .reasons { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap) clamp(1.5rem, 4vw, 3rem); counter-reset: r; } @media (max-width: 900px) { .reasons { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .reasons { grid-template-columns: 1fr; } } .reasons li { display: grid; gap: .35rem; } .reasons__n { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--mint); letter-spacing: -.03em; margin-bottom: .3rem; } .reasons h3 { font-size: var(--step-1); color: #fff; } .reasons p { font-size: var(--step--1); color: #a9cbea; margin: 0; } /* --- closing CTA ---------------------------------------------------------- */ .cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (max-width: 860px) { .cta { grid-template-columns: 1fr; } } .cta__facts { margin: 0; display: grid; gap: 1.2rem; } .cta__facts div { padding-left: 1.1rem; border-left: 3px solid var(--mint); } .cta__facts dt { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); font-weight: 700; margin-bottom: .25rem; } .cta__facts dd { margin: 0; color: #dbe8f6; font-size: var(--step--1); } .cta__facts a { color: #dbe8f6; } /* =========================================================================== Article Body styles apply to rich text exported from Webflow, so they are written against the markup the export actually produces: bare h2/h3/p/ul, tables inside a .table-scroll box, and Webflow's own w-richtext-* figure classes. =========================================================================== */ .article { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--section-y); } .article__inner { max-width: 46rem; margin-inline: auto; min-width: 0; } .article__title { font-size: var(--step-3); max-width: 22ch; } .article__standfirst { margin: 1.2rem 0 0; max-width: none; } /* --- byline --------------------------------------------------------------- */ .byline { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .9rem; margin: 1.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: var(--step--1); } .byline__avatar { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; background: var(--ground); flex: none; } .byline__who { font-weight: 700; color: var(--ink-strong); } .byline__when { color: var(--muted); } .byline__who + .byline__when::before { content: "·"; margin-right: .9rem; color: var(--line); } /* --- lead image ----------------------------------------------------------- */ .article__hero { margin: clamp(2rem, 1rem + 3vw, 3rem) 0 0; } .article__hero img { width: 100%; max-height: 30rem; object-fit: cover; border-radius: var(--radius); background: var(--ground); } /* --- body typography ------------------------------------------------------ */ .article-body { margin-top: clamp(2rem, 1rem + 3vw, 3rem); overflow-wrap: break-word; } .article-body > :first-child { margin-top: 0; } .article-body h2 { font-size: var(--step-2); margin: 2.6em 0 .6em; } .article-body h3 { font-size: var(--step-1); margin: 2em 0 .5em; } .article-body h6 { margin: 2em 0 .5em; font-size: var(--step--1); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green-text); } .article-body p { margin: 0 0 1.35em; } .article-body a { color: var(--green-deep); text-underline-offset: .18em; } .article-body a:hover { color: var(--green-text); } .article-body strong { color: var(--ink-strong); font-weight: 700; } .article-body ul, .article-body ol { margin: 0 0 1.6em; padding-left: 1.3em; } .article-body li { margin-bottom: .55em; } .article-body li::marker { color: var(--green-text); } .article-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line); } .article-body blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4rem; border-left: 4px solid var(--mint); font-size: var(--step-1); color: var(--ink-strong); } .article-body blockquote p:last-child { margin-bottom: 0; } /* --- figures (Webflow rich-text markup) ----------------------------------- */ .article-body figure { margin: 2.2em 0; } .article-body figure img { width: 100%; border-radius: var(--radius-sm); background: var(--ground); } .article-body figcaption { margin-top: .8em; font-size: var(--step--1); color: var(--muted); text-align: center; } .article-body .w-richtext-align-center { margin-inline: auto; text-align: center; } .article-body .w-richtext-align-normal { margin-inline: 0; } .article-body .w-richtext-align-fullwidth { width: 100%; margin-inline: 0; text-align: center; } .article-body .w-richtext-align-fullwidth > div, .article-body .w-richtext-align-center > div { max-width: 100%; } @media (min-width: 1000px) { /* let the full-width figures breathe past the prose measure, never past .wrap */ .article-body .w-richtext-align-fullwidth { width: calc(100% + 7rem); margin-inline: -3.5rem; } } /* --- tables --------------------------------------------------------------- */ /* Article bodies carry real comparison tables. Each one scrolls inside its own box so a wide table never drags the whole page sideways. */ .table-scroll { overflow-x: auto; max-width: 100%; margin: 2.2em 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); -webkit-overflow-scrolling: touch; } .table-scroll table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--step--1); } .table-scroll caption { caption-side: top; text-align: left; padding: 1rem 1.1rem .85rem; font-weight: 700; color: var(--ink-strong); border-bottom: 1px solid var(--line); } .table-scroll th, .table-scroll td { padding: .8rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .table-scroll thead th { background: var(--ground); color: var(--ink-strong); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .table-scroll tbody th { font-weight: 700; color: var(--ink-strong); } .table-scroll tbody tr:last-child th, .table-scroll tbody tr:last-child td { border-bottom: 0; } .table-scroll tbody tr:nth-child(even) { background: rgba(228, 238, 248, .45); } .table-scroll p { margin: 0; } /* --- key-takeaways callout (24 Articles carry one) ------------------------ */ .article-body .article-summary { margin: 0 0 2.4em; } .article-body .article-summary > p:first-child { margin-bottom: .6em; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; } .article-body .tldr { font-size: var(--step-0); } .article-body .key-takeaways { margin-bottom: 0; } .article-body .key-takeaways li:last-child { margin-bottom: 0; }