/* ========================================================================== Joy Therapy and Learning Center - design system Demo rebuild by WRITESEM. Brand colors extracted from the live joytlc.com stylesheet and logo. Color is used as a wayfinding system: each clinical discipline owns one brand color sitewide. Yellow (#F0D818) is 1.5:1 on white and fails WCAG AA for text, so it is decoration only; ABA text uses --aba-ink instead. ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { /* Brand */ --blue: #19A1E8; --pink: #E267C2; --orange: #FF9F27; --yellow: #F0D818; /* Text-safe variants (all >= 4.5:1 on white) */ --blue-ink: #0A6491; /* Blue that still passes WCAG AA behind white text (5.22:1). The brand blue is 2.87:1 with white, which fails, so anything putting white on blue uses this instead of --blue. */ --blue-aa: #1173A5; --pink-ink: #A82E8B; --orange-ink: #9A5600; --yellow-ink: #7A6B00; /* Neutrals */ --ink: #444444; --ink-strong: #1F2937; --ink-soft: #5B6470; --gray: #C2C2C2; --line: #E5E8EC; --bg: #FFFFFF; --bg-soft: #F7F9FB; /* Discipline tints (5-8% brand color on white) */ --tint-blue: #EEF9FE; --tint-pink: #FDF1FA; --tint-orange: #FFF7EC; --tint-yellow: #FEFCE8; --tint-slate: #F4F6F8; /* Program (cross-disciplinary) */ --slate: #5A6B7C; --slate-ink: #3D4B58; /* Type */ --font-head: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; /* Shape */ --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Depth */ --shadow-sm: 0 1px 2px rgba(31, 41, 55, .04), 0 2px 6px rgba(31, 41, 55, .05); --shadow: 0 4px 10px -2px rgba(31, 41, 55, .06), 0 2px 6px -2px rgba(31, 41, 55, .05); --shadow-lg: 0 16px 32px -10px rgba(31, 41, 55, .13), 0 6px 12px -6px rgba(31, 41, 55, .06); /* Rhythm */ --wrap: 1140px; --wrap-narrow: 720px; --gap: 1.65rem; --section-y: clamp(3rem, 6.5vw, 5rem); /* Default category = brand blue; overridden per page by .cat-* */ --cat: var(--blue); --cat-ink: var(--blue-ink); --cat-tint: var(--tint-blue); } /* Per-page discipline theming. Set on . --cat-bold / --cat-on-bold are the saturated pair used by page heroes. Each combination is verified against WCAG AA: pink #C43BA2 + white 4.67:1 blue #1178AE + white 4.86:1 orange #FF9F27 + #3D2600 6.94:1 yellow #F0D818 + #3D3400 8.61:1 slate #3D4B58 + white 9.24:1 */ .cat-speech { --cat: var(--pink); --cat-ink: var(--pink-ink); --cat-tint: var(--tint-pink); --cat-bold: #C43BA2; --cat-on-bold: #fff; } .cat-physical { --cat: var(--blue); --cat-ink: var(--blue-ink); --cat-tint: var(--tint-blue); --cat-bold: #1178AE; --cat-on-bold: #fff; } .cat-occupational { --cat: var(--orange); --cat-ink: var(--orange-ink); --cat-tint: var(--tint-orange); --cat-bold: #FF9F27; --cat-on-bold: #3D2600; } .cat-aba { --cat: var(--yellow); --cat-ink: var(--yellow-ink); --cat-tint: var(--tint-yellow); --cat-bold: #F0D818; --cat-on-bold: #3D3400; } .cat-program { --cat: var(--slate); --cat-ink: var(--slate-ink); --cat-tint: var(--tint-slate); --cat-bold: #3D4B58; --cat-on-bold: #fff; } /* ----------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1.075rem; line-height: 1.75; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink-strong); line-height: 1.2; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.015em; } h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); } h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; } h4 { font-size: 1.0625rem; font-weight: 700; } p, ul, ol { margin: 0 0 1.15rem; } a { color: var(--blue-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--pink-ink); } strong { font-weight: 700; color: var(--ink-strong); } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } /* Visible focus everywhere. Replaces the live site's accessibility widget. */ :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink-strong); color: #fff; padding: .85rem 1.25rem; border-radius: 0 0 var(--r) 0; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------- layout */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding-block: var(--section-y); } /* The last element in a section must not stack its own bottom margin on top of the section's padding; that was adding ~18px at every boundary. */ .section > .wrap > *:last-child, .section > .wrap-narrow > *:last-child { margin-bottom: 0; } .section-soft { background: linear-gradient(180deg, #FBFDFE 0%, var(--bg-soft) 100%); } .section-tint { background: var(--cat-tint); } .center { text-align: center; } .stack > * + * { margin-top: 1rem; } .grid { display: grid; gap: var(--gap); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .section-head { max-width: 46rem; margin-bottom: 2.5rem; } .section-head.center { margin-inline: auto; } .eyebrow { font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cat-ink); margin: 0 0 .6rem; } .lede { font-size: 1.15rem; color: var(--ink-soft); } /* -------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-head); font-weight: 800; font-size: 1rem; padding: .85rem 1.6rem; border-radius: var(--r-pill); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; text-align: center; line-height: 1.3; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn:active { transform: translateY(0); } /* Orange CTA. #9A5600 text on #FF9F27 would be low contrast, so the primary CTA uses dark ink on orange, which measures 7.4:1. */ .btn-primary { background: var(--orange); color: #3D2600; } .btn-primary:hover { background: #FFAE4D; color: #3D2600; } .btn-secondary { background: var(--blue-aa); color: #fff; } .btn-secondary:hover { background: #0F6C9B; color: #fff; } .btn-ghost { background: #fff; color: var(--ink-strong); border-color: var(--line); } .btn-ghost:hover { border-color: var(--cat); color: var(--cat-ink); background: #fff; } .btn-lg { font-size: 1.075rem; padding: 1rem 2rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .85rem; } /* ---------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .32rem .8rem; border-radius: var(--r-pill); background: var(--cat-tint); color: var(--cat-ink); border: 1px solid color-mix(in srgb, var(--cat) 35%, transparent); text-decoration: none; white-space: nowrap; } a.chip:hover { background: color-mix(in srgb, var(--cat) 18%, #fff); color: var(--cat-ink); } .chip-speech { background: var(--tint-pink); color: var(--pink-ink); border-color: #F0B6E1; } .chip-physical { background: var(--tint-blue); color: var(--blue-ink); border-color: #A9DDF7; } .chip-occupational { background: var(--tint-orange); color: var(--orange-ink); border-color: #FFD199; } .chip-aba { background: var(--tint-yellow); color: var(--yellow-ink); border-color: #E4D06B; } .chip-program { background: var(--tint-slate); color: var(--slate-ink); border-color: #C7D0D9; } /* ----------------------------------------------------------- top utility */ .utility { background: var(--ink-strong); color: #fff; font-size: .8125rem; padding: .4rem 0; } .utility .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.25rem; } .utility a { color: #E3E8EE; text-decoration: none; font-weight: 600; } .utility a:hover { color: #fff; text-decoration: underline; } .utility .utility-phone { margin-right: auto; font-weight: 700; color: #fff; } .utility .utility-phone a { color: #fff; } /* --------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; } .brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .brand img { height: 46px; width: auto; } .nav-main { margin-left: auto; } .nav-main ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; align-items: center; } .nav-main a { display: block; padding: .55rem .8rem; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 700; font-size: .975rem; color: var(--ink-strong); text-decoration: none; } .nav-main a:hover { background: var(--tint-blue); color: var(--blue-ink); } .nav-main a[aria-current="page"] { color: var(--blue-ink); box-shadow: inset 0 -3px 0 var(--blue); } .nav-cta { margin-left: .5rem; } .nav-toggle { display: none; margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: .55rem .7rem; cursor: pointer; color: var(--ink-strong); } .nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 960px) { .nav-toggle { display: block; } .nav-main { position: absolute; inset: 100% 0 auto; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); display: none; padding: 1rem 0 1.5rem; } .nav-main[data-open="true"] { display: block; } .nav-main ul { flex-direction: column; align-items: stretch; gap: .15rem; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .nav-main a { padding: .8rem 1rem; font-size: 1.05rem; } .nav-cta { margin: .75rem 0 0; } .nav-cta .btn { width: 100%; } .utility .wrap { justify-content: center; gap: .9rem; font-size: .75rem; } .utility .utility-phone { margin-right: 0; width: 100%; text-align: center; } } /* ----------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--tint-blue) 0%, #FFFDF8 45%, var(--tint-pink) 100%); } .hero-inner { padding-block: clamp(3rem, 8vw, 6rem); display: grid; gap: 3rem; grid-template-columns: 1.15fr .85fr; align-items: center; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 2rem; } } .hero h1 { margin-bottom: .5rem; } .hero .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 34rem; } .hero-art { position: relative; } .hero-blobs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .hero-blob { aspect-ratio: 1; border-radius: var(--r-xl); display: grid; place-items: center; box-shadow: var(--shadow); padding: 1.25rem; text-align: center; } .hero-blob svg { width: 54px; height: 54px; } .hero-blob span { font-family: var(--font-head); font-weight: 800; font-size: .9rem; display: block; margin-top: .5rem; } .hero-blob:nth-child(1) { background: var(--tint-blue); color: var(--blue-ink); } .hero-blob:nth-child(2) { background: var(--tint-pink); color: var(--pink-ink); transform: translateY(1.5rem); } .hero-blob:nth-child(3) { background: var(--tint-orange); color: var(--orange-ink); } .hero-blob:nth-child(4) { background: var(--tint-yellow); color: var(--yellow-ink); transform: translateY(1.5rem); } @media (max-width: 900px) { .hero-blob:nth-child(2n) { transform: none; } } /* ========================================================================== BOLD HOME PAGE Built in the spirit of the original site: giant photo, tilted tagline banners, script brand mark, and full-bleed saturated color bands. Band colors are tuned so their text passes WCAG AA. The original site runs white on #E267C2 (3.0:1), #19A1E8 (2.9:1) and #FF9F27 (2.0:1) — all fail. ========================================================================== */ :root { --band-pink: #C43BA2; /* white text 4.67:1 */ --band-blue: #1178AE; /* white text 4.86:1 */ --band-orange: #FF9F27; /* dark ink 6.94:1 — brighter than the original */ --ink-on-orange: #3D2600; } .bold-hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; background: linear-gradient(140deg, var(--tint-blue) 0%, #FFFDF8 50%, var(--tint-pink) 100%); } .bold-hero-media { position: relative; overflow: hidden; min-height: 460px; } .bold-hero-media picture, .bold-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .bold-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 4rem); max-width: 44rem; } .bold-hero-copy h1 { font-size: clamp(2.1rem, 4.1vw, 3.35rem); margin-bottom: .55rem; } .bold-hero-copy .h1-sub { display: block; color: var(--blue-ink); font-size: clamp(1.35rem, 2.5vw, 2.05rem); } .bold-hero-copy .lede { font-size: clamp(1.08rem, 1.6vw, 1.25rem); max-width: 32rem; } .bold-hero-copy .btn-row { margin-top: 1.9rem; } .hero-phone { margin-top: 1.6rem; font-size: 1.02rem; color: var(--ink-soft); } .hero-phone a { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--blue-ink); text-decoration: none; margin-left: .3rem; } .hero-phone a:hover { text-decoration: underline; } /* The three tilted tagline banners, lifted from the original. */ .tilt-stack { position: absolute; right: clamp(-1rem, 1vw, 1.5rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .75rem; align-items: flex-end; pointer-events: none; } .tilt { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: clamp(.95rem, 1.7vw, 1.55rem); padding: .5em 1.4em; white-space: nowrap; box-shadow: 0 6px 18px rgba(31,41,55,.22); } .tilt-blue { background: var(--band-blue); transform: rotate(-4deg); } .tilt-orange { background: var(--orange); color: var(--ink-on-orange); transform: rotate(2.5deg); } .tilt-pink { background: var(--band-pink); transform: rotate(-2deg); } @media (max-width: 900px) { .bold-hero { grid-template-columns: 1fr; } .bold-hero-media { min-height: 320px; order: -1; } .bold-hero-copy { padding: 2.25rem 1.25rem 2.75rem; max-width: none; } .tilt-stack { right: .5rem; gap: .5rem; } } @media (max-width: 560px) { .tilt { font-size: .8rem; padding: .45em 1em; } } /* Script brand mark. Decorative only, never load-bearing text. */ .script { font-family: "Caveat", "Segoe Script", cursive; font-weight: 700; color: var(--orange-ink); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.1; margin: 0 0 .35rem; } .intro-strip { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .intro-h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: var(--blue-ink); margin-bottom: 1.1rem; } .intro-body { max-width: 54rem; margin-inline: auto; font-size: 1.08rem; color: var(--ink-soft); } .big-h2 { font-size: clamp(1.75rem, 3.4vw, 2.55rem); } /* Full-bleed saturated bands */ .band { color: #fff; } .band-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: min(100% - 2.5rem, 1240px); margin-inline: auto; padding-block: clamp(2.5rem, 5vw, 4.25rem); gap: clamp(1.75rem, 4vw, 3.5rem); } .band-reverse .band-media { order: 2; } /* Soft placeholder so a not-yet-loaded band image reads as a panel rather than a hole punched in the color block. */ .band-media { border-radius: var(--r-xl); background: rgba(255,255,255,.16); } .band-media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; } .band-orange .band-media { background: rgba(61,38,0,.10); } .band-copy h2 { color: inherit; font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: .8rem; } .band-copy p { font-size: 1.08rem; } .band-eyebrow { font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .5rem; opacity: .92; } .band-list { list-style: none; padding: 0; margin: 0 0 1.6rem; } .band-list li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; } .band-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .band-phone { margin: 0 0 1.4rem; } .band-phone a { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: inherit; text-decoration: none; } .band-phone a:hover { text-decoration: underline; } .band-pink { background: var(--band-pink); } .band-blue { background: var(--band-blue); } .band-orange { background: var(--band-orange); color: var(--ink-on-orange); } .band-orange .band-copy h2 { color: var(--ink-on-orange); } /* White pill on colored bands; dark pill on the bright orange band. */ .btn-white { background: #fff; color: var(--ink-strong); } .btn-white:hover { background: #F4F8FB; color: var(--ink-strong); } .btn-ink { background: var(--ink-strong); color: #fff; } .btn-ink:hover { background: #111827; color: #fff; } .btn-xl { font-size: 1.12rem; padding: 1.05rem 2.2rem; } @media (max-width: 900px) { .band-inner { grid-template-columns: 1fr; } .band-reverse .band-media { order: 0; } } /* Page hero (interior). Saturated in the page's own discipline color so interior pages carry the same confidence as the home page, and so the color wayfinding is impossible to miss. */ .page-hero { background: var(--cat-bold); color: var(--cat-on-bold); position: relative; overflow: hidden; } /* Soft light bloom, keeps a large flat color from feeling like a slab. */ .page-hero::before { content: ""; position: absolute; right: -8%; top: -60%; width: 46vw; height: 200%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } .page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 6px; background: linear-gradient(90deg, var(--blue) 0 25%, var(--pink) 25% 50%, var(--orange) 50% 75%, var(--yellow) 75% 100%); } .page-hero-inner { padding-block: clamp(2.75rem, 6vw, 4.5rem); max-width: 48rem; position: relative; z-index: 1; } .page-hero h1 { margin-bottom: .45rem; color: var(--cat-on-bold); } .page-hero .lede { color: var(--cat-on-bold); opacity: .93; } .page-hero .eyebrow { color: var(--cat-on-bold); opacity: .85; } .page-hero .chip { background: rgba(255,255,255,.9); color: var(--cat-ink); border-color: transparent; } .page-hero p { color: var(--cat-on-bold); } /* The article byline sits inside .page-hero, so it inherits a bold category background. .article-meta sets --ink-soft for the blog index, where the background is white; on the hero that is dark grey on saturated colour and fails contrast. Re-tint the whole meta row, its inline role/org spans and its links onto the hero foreground. */ .page-hero .article-meta { color: var(--cat-on-bold); opacity: .92; } .page-hero .article-meta a, .page-hero .article-meta strong { color: var(--cat-on-bold); } .page-hero .article-meta .meta-sub { color: var(--cat-on-bold); opacity: .85; } /* Buttons sitting on a saturated hero */ .page-hero .btn-ghost { background: #fff; color: var(--ink-strong); border-color: #fff; } .page-hero .btn-ghost:hover { background: #F2F7FB; color: var(--ink-strong); } /* --------------------------------------------------- hero button contrast .btn-primary is var(--orange) #FF9F27, and the occupational hero band is --cat-bold #FF9F27. Identical. On those pages the primary call to action disappeared into its own background, and the ABA band (#F0D818) was nearly as bad. The demo styles .page-hero .btn-ghost but never .btn-primary, so this shipped in the static build too. Fixed surgically: only the two bands that clash get an inverted solid button. Blue, pink and slate heroes keep the orange button, where it reads fine and is the strongest thing on the page. */ .cat-occupational .page-hero .btn-primary, .cat-aba .page-hero .btn-primary { background: var(--ink-strong); color: #fff; } .cat-occupational .page-hero .btn-primary:hover, .cat-aba .page-hero .btn-primary:hover { background: #000; color: #fff; } /* Breadcrumbs sit directly above the band; give them room to breathe. */ .crumbs { padding-bottom: .9rem; } /* ---------------------------------------------------------- breadcrumbs */ .crumbs { font-size: .875rem; padding-top: 1rem; color: var(--ink-soft); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; } .crumbs li::after { content: "/"; margin-left: .4rem; color: var(--gray); } .crumbs li:last-child::after { content: ""; } .crumbs a { color: var(--ink-soft); } /* ---------------------------------------------------------------- cards */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.85rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; display: flex; flex-direction: column; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card h3 { margin-bottom: .5rem; } .card p { color: var(--ink-soft); margin-bottom: 1rem; } .card .card-link { margin-top: auto; font-family: var(--font-head); font-weight: 800; text-decoration: none; color: var(--cat-ink); display: inline-flex; align-items: center; gap: .35rem; } .card .card-link::after { content: "→"; transition: transform .15s ease; } .card:hover .card-link::after { transform: translateX(3px); } /* Service card: color-coded, the wayfinding system in action */ .service-card { border-top: 5px solid var(--cat); } .service-card .icon-badge { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; background: var(--cat-tint); color: var(--cat-ink); margin-bottom: 1rem; } .service-card .icon-badge svg { width: 28px; height: 28px; } /* Provider card */ .provider-card { text-align: center; align-items: center; padding: 1.4rem 1.1rem; } .provider-card .avatar { margin-bottom: .9rem; } .provider-card h3 { font-size: 1.075rem; margin-bottom: .15rem; } .provider-card .creds { font-size: .875rem; color: var(--ink-soft); margin: 0 0 .7rem; } .provider-card .card-link { margin-top: .9rem; font-size: .9rem; } .provider-card.is-rbt { padding: 1.1rem .9rem; } .provider-card.is-rbt .avatar svg { width: 64px; height: 64px; } .avatar { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--cat-tint); border: 3px solid var(--cat); overflow: hidden; } .avatar svg { width: 84px; height: 84px; color: var(--cat-ink); } .avatar-lg { width: 156px; height: 156px; } .avatar-lg svg { width: 124px; height: 124px; } /* -------------------------------------------------------- photography */ /* Real headshots. Portrait 3:4, circular on cards to match the silhouette fallback so a mixed grid still reads as one system. */ .avatar-img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid var(--cat); background: var(--cat-tint); } .avatar-img.avatar-lg { width: 156px; height: 156px; } .hero-photo img, .side-photo img, .page-hero-img img, .post-hero-img img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .hero-photo img { aspect-ratio: 3 / 2; object-fit: cover; } .side-photo img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow); } .page-hero-img, .post-hero-img { margin-top: 2rem; position: relative; z-index: 1; } .page-hero-img img, .post-hero-img img { aspect-ratio: 21 / 9; object-fit: cover; } @media (max-width: 700px) { .page-hero-img, .post-hero-img { margin-top: 1.25rem; } .page-hero-img img, .post-hero-img img { aspect-ratio: 16 / 10; } } /* Team hub banner, composed from real headshots. Overlapping portraits read as a group shot without pretending to be one. */ .team-mosaic { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; margin-top: 2rem; position: relative; z-index: 1; padding: 1.5rem 1rem; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .team-mosaic img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid #fff; box-shadow: var(--shadow-sm); margin-left: -14px; } .team-mosaic img:first-child { margin-left: 0; } .team-mosaic-more { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; /* --blue-aa, not --blue: white on the brand blue is 2.87:1 and fails AA. */ background: var(--blue-aa); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem; border: 3px solid #fff; box-shadow: var(--shadow-sm); margin-left: -14px; } @media (max-width: 700px) { .team-mosaic { margin-top: 1.25rem; padding: 1.1rem .6rem; gap: 0; } .team-mosaic img, .team-mosaic-more { width: 54px; height: 54px; margin-left: -10px; border-width: 2px; } .team-mosaic-more { font-size: .82rem; } } /* Blog card thumbnail */ .post-card-img { display: block; margin: -1.85rem -1.7rem 1.2rem; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; } .post-card-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* Byline avatar sits inline with the meta row */ .article-meta .byline .avatar-img { width: 44px; height: 44px; border-width: 2px; } /* ----------------------------------------------------------- value band Each value is a soft card tinted in its own brand color, with a rounded icon badge. Warmer than a bordered row while keeping the grid crisp. */ .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.35rem; } .value { padding: 1.75rem 1.4rem; border-radius: var(--r-xl); background: var(--cat-tint); border: 1px solid color-mix(in srgb, var(--cat) 22%, transparent); transition: transform .18s ease, box-shadow .18s ease; } .value:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .value-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--cat-ink); box-shadow: var(--shadow-sm); margin-bottom: 1.1rem; } .value-icon svg { width: 27px; height: 27px; } .value h3 { font-size: 1.06rem; margin-bottom: .45rem; color: var(--cat-ink); } .value p { font-size: .935rem; color: var(--ink-soft); margin: 0; } /* --------------------------------------------------------------- quotes */ .quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; } .quote { background: #fff; border-radius: var(--r-lg); padding: 1.75rem; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .quote blockquote { margin: 0 0 1rem; font-size: 1.06rem; color: var(--ink-strong); } .quote figcaption { margin-top: auto; font-size: .875rem; color: var(--ink-soft); font-style: normal; } .stars { color: var(--orange-ink); letter-spacing: .1em; margin-bottom: .75rem; font-size: 1.05rem; } /* ------------------------------------------------------------- prose */ .prose { max-width: 42rem; } .prose h2 { margin-top: 2.6rem; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 1.9rem; } .prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin-bottom: .55rem; } .prose li::marker { color: var(--cat); } .prose blockquote { margin: 1.75rem 0; padding: 1.1rem 1.4rem; border-left: 4px solid var(--cat); background: var(--cat-tint); border-radius: 0 var(--r) var(--r) 0; } .prose blockquote p:last-child { margin-bottom: 0; } .prose hr { margin: 2.5rem 0; } .prose img { border-radius: var(--r-lg); margin: 1.75rem 0; } .prose em { color: var(--ink-soft); } /* Signs / conditions lists */ .check-list { list-style: none; padding: 0; } .check-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); } .pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; } .pill-list li { background: var(--cat-tint); color: var(--cat-ink); border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent); padding: .4rem .9rem; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; } /* Numbered session steps */ .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.1rem; } .steps li { counter-increment: step; position: relative; padding-left: 3.4rem; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--cat); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; } .cat-aba .steps li::before { color: #3D3400; } .steps h3 { font-size: 1.075rem; margin-bottom: .25rem; } .steps p { margin: 0; color: var(--ink-soft); } /* Credentials block */ .creds-block { background: var(--cat-tint); border: 1px solid color-mix(in srgb, var(--cat) 25%, transparent); border-radius: var(--r-xl); padding: 1.9rem 1.75rem; } .creds-block h2 { font-size: 1.35rem; } .creds-block ul { list-style: none; padding: 0; margin: 0; } .creds-block li { position: relative; padding-left: 1.9rem; margin-bottom: .65rem; } .creds-block li:last-child { margin-bottom: 0; } .creds-block li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--cat-ink); font-weight: 800; } /* ------------------------------------------------------------------ FAQ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; font-family: var(--font-head); font-weight: 700; font-size: 1.075rem; color: var(--ink-strong); position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: .5rem; top: 1.5rem; width: 10px; height: 10px; border-right: 2.5px solid var(--cat-ink); border-bottom: 2.5px solid var(--cat-ink); transform: rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; } .faq summary:hover { color: var(--cat-ink); } .faq .faq-body { padding: 0 2.5rem 1.4rem 0; color: var(--ink-soft); } .faq .faq-body p:last-child { margin-bottom: 0; } /* --------------------------------------------------------- table of contents */ .toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.6rem; margin-bottom: 2.5rem; } .toc h2 { font-size: 1rem; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); } .toc ol { margin: 0; padding-left: 1.2rem; } .toc li { margin-bottom: .4rem; } .toc a { color: var(--ink-strong); text-decoration: none; } .toc a:hover { color: var(--cat-ink); text-decoration: underline; } /* --------------------------------------------------------------- article */ .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.5rem; } .article-meta .byline { display: flex; align-items: center; gap: .6rem; } .article-meta .byline .avatar { width: 42px; height: 42px; border-width: 2px; } .article-meta .byline .avatar svg { width: 34px; height: 34px; } .article-meta a { font-weight: 700; } .post-card .post-card-body { padding: 0; } .post-card time { font-size: .85rem; color: var(--ink-soft); display: block; margin-bottom: .5rem; } /* ------------------------------------------------------------ team filter */ .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.25rem; } .filter-btn { font-family: var(--font-head); font-weight: 700; font-size: .925rem; padding: .55rem 1.15rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #fff; color: var(--ink-strong); cursor: pointer; } .filter-btn:hover { border-color: var(--gray); } .filter-btn[aria-pressed="true"] { background: var(--ink-strong); color: #fff; border-color: var(--ink-strong); } .team-group + .team-group { margin-top: 3rem; } .team-group h2 { display: flex; align-items: center; gap: .75rem; } .team-group h2::before { content: ""; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--cat); flex-shrink: 0; } /* ------------------------------------------------------------- CTA band */ .cta-band { background: linear-gradient(135deg, var(--blue) 0%, #1489C7 100%); color: #fff; } .cta-band h2 { color: #fff; } .cta-band p { color: #E8F6FE; font-size: 1.1rem; } .cta-band .btn-ghost { background: #fff; color: var(--blue-ink); border-color: #fff; } .cta-band .btn-ghost:hover { background: #F0FAFF; color: var(--blue-ink); } .cta-phone { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2.1rem); color: #fff; text-decoration: none; display: inline-block; } .cta-phone:hover { color: #fff; text-decoration: underline; } /* ---------------------------------------------------------------- forms */ .form-grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; } @media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field.full { grid-column: 1 / -1; } .field label { font-family: var(--font-head); font-weight: 700; font-size: .925rem; color: var(--ink-strong); } .field input, .field select, .field textarea { font-family: inherit; font-size: 1rem; color: var(--ink); padding: .75rem .9rem; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); } .field textarea { min-height: 130px; resize: vertical; } .field .hint { font-size: .82rem; color: var(--ink-soft); } .notice { border-radius: var(--r); padding: 1rem 1.25rem; font-size: .95rem; border: 1px solid; margin-bottom: 1.5rem; } .notice-warn { background: #FFF7EC; border-color: #FFD199; color: #7A4400; } .notice-info { background: var(--tint-blue); border-color: #A9DDF7; color: var(--blue-ink); } .notice p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------ NAP / info */ .info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; } .info-list li { display: flex; gap: .9rem; align-items: flex-start; } .info-list svg { width: 22px; height: 22px; color: var(--cat-ink); flex-shrink: 0; margin-top: .2rem; } .info-list a { font-weight: 600; } .hours-table { width: 100%; border-collapse: collapse; } .hours-table th, .hours-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); font-size: .95rem; } .hours-table th { font-family: var(--font-head); font-weight: 700; color: var(--ink-strong); } .hours-table td { color: var(--ink-soft); } .map-embed { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .map-embed iframe { display: block; width: 100%; height: 380px; border: 0; } /* --------------------------------------------------------------- footer */ .site-footer { background: var(--ink-strong); color: #C7CFD9; padding-block: 3.5rem 2rem; margin-top: 0; } .site-footer a { color: #C7CFD9; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: .55rem; font-size: .95rem; } .footer-logo { background: #fff; border-radius: var(--r-lg); padding: 1rem 1.2rem; display: inline-block; margin-bottom: 1.2rem; } .footer-logo img { height: 84px; width: auto; } .footer-brand p { font-size: .95rem; line-height: 1.65; } .social-row { display: flex; gap: .6rem; margin-top: 1rem; } .social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; } .social-row a:hover { background: var(--blue); } .social-row svg { width: 20px; height: 20px; color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.13); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .85rem; } address.nap { font-style: normal; } /* ------------------------------------------------------- demo dock */ /* Fixed bottom-right stack: the proposal link and the demo notice. Both are demo-only chrome and vanish when DEMO_MODE is turned off. */ .demo-dock { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; max-width: calc(100vw - 2rem); } /* Hand-drawn "start here" arrow aimed at the proposal button. Decorative and aria-hidden; it hides itself once the proposal has been opened, and it is suppressed entirely for prefers-reduced-motion and on small screens. */ .demo-pointer { position: absolute; right: 100%; top: .1rem; margin-right: .55rem; display: flex; align-items: center; gap: .1rem; color: var(--orange); pointer-events: none; animation: pointer-nudge 1.6s ease-in-out infinite; } .demo-pointer-text { font-family: "Caveat", cursive; font-weight: 700; font-size: 1.6rem; line-height: 1; white-space: nowrap; color: var(--orange-ink); transform: rotate(-6deg); } .demo-pointer-arrow { width: 62px; height: 28px; flex-shrink: 0; } @keyframes pointer-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } } .demo-dock[data-seen="true"] .demo-pointer { display: none; } @media (max-width: 820px) { .demo-pointer { display: none; } } @media (prefers-reduced-motion: reduce) { .demo-pointer { animation: none; } } .demo-proposal { display: inline-flex; align-items: center; gap: .6rem; background: var(--orange); color: #3D2600; /* 6.94:1 */ font-family: var(--font-head); font-weight: 800; font-size: .95rem; padding: .8rem 1.25rem; border-radius: var(--r-pill); text-decoration: none; box-shadow: var(--shadow-lg); border: 2px solid #fff; transition: transform .15s ease, background-color .15s ease; } .demo-proposal:hover { background: #FFAE4D; color: #3D2600; transform: translateY(-2px); } .demo-proposal svg { width: 18px; height: 18px; flex-shrink: 0; } .demo-proposal-arrow { transition: transform .15s ease; } .demo-proposal:hover .demo-proposal-arrow { transform: translateX(3px); } .demo-ribbon { position: relative; z-index: 200; background: #1F2937; color: #fff; border-radius: var(--r-pill); padding: .6rem .75rem .6rem 1.15rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .75rem; font-family: var(--font-head); font-weight: 800; font-size: .8rem; letter-spacing: .04em; max-width: 100%; } @media (max-width: 560px) { .demo-dock { right: .6rem; bottom: .6rem; gap: .45rem; } .demo-proposal { font-size: .85rem; padding: .65rem 1rem; } .demo-ribbon { font-size: .72rem; padding: .5rem .6rem .5rem .9rem; } } .demo-ribbon::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .demo-ribbon button { background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; font-size: 1rem; line-height: 1; display: grid; place-items: center; flex-shrink: 0; } .demo-ribbon button:hover { background: rgba(255,255,255,.3); } .demo-ribbon[hidden] { display: none; } /* ------------------------------------------------------------------ 404 */ .error-page { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); } .error-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 16vw, 9rem); line-height: 1; color: var(--blue); margin: 0; } /* --------------------------------------------------------------- utility */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 2rem; } .mb-2 { margin-bottom: 2rem; } .mt-3 { margin-top: 3rem; } .split { display: grid; gap: 3rem; grid-template-columns: 1.35fr .65fr; align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } } .sticky-side { position: sticky; top: 100px; } @media (max-width: 900px) { .sticky-side { position: static; } } @media print { .utility, .site-header, .demo-ribbon, .cta-band, .site-footer { display: none !important; } body { font-size: 11pt; } } /* ========================================================================== WordPress additions ========================================================================== */ /* ------------------------------------------------------------- alert bar */ .alert-bar { background: #1F4E7A; color: #fff; position: relative; } .alert-bar.alert-warning { background: #8A4A00; } .alert-bar.alert-urgent { background: #8A1F1F; } .alert-bar.alert-good { background: #1B5E29; } .alert-inner { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; } .alert-bar p { margin: 0; font-size: .95rem; flex: 1; } .alert-bar a { color: #fff; font-weight: 600; } .alert-dismiss { background: none; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .3rem; flex: none; } /* -------------------------------------------------------- utility bar */ .a11y-toggle { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid rgba(255,255,255,.45); color: #fff; border-radius: 4px; padding: .2rem .6rem; font: inherit; font-size: .85rem; cursor: pointer; } .a11y-toggle:hover { background: rgba(255,255,255,.14); } /* ------------------------------------------------- accessibility panel */ .a11y-panel { background: #F4F6F8; border-bottom: 1px solid #DDE3E9; } .a11y-inner { padding: 1.4rem 0; } .a11y-panel h2 { font-size: 1.15rem; margin: 0 0 .2rem; } .a11y-panel > .wrap > p { margin: 0 0 1rem; font-size: .9rem; color: #5A6B7C; } .a11y-options { display: flex; flex-wrap: wrap; gap: .5rem; } .a11y-opt, .a11y-reset { font: inherit; font-size: .9rem; cursor: pointer; padding: .5rem .9rem; border: 2px solid #C2C9D1; background: #fff; border-radius: 6px; color: #222; } .a11y-opt:hover, .a11y-reset:hover { border-color: #444; } .a11y-opt.is-on { background: #1F4E7A; border-color: #1F4E7A; color: #fff; } .a11y-reset { margin-left: auto; text-decoration: underline; border-style: dashed; } .a11y-note { font-size: .85rem; color: #5A6B7C; margin: 1rem 0 0; max-width: 62ch; } /* The toggles themselves. Applied to so nothing escapes them. */ html.a11y-greyscale { filter: grayscale(1); } html.a11y-invert { filter: invert(1) hue-rotate(180deg); } html.a11y-invert img, html.a11y-invert video, html.a11y-invert picture { filter: invert(1) hue-rotate(180deg); /* keep photographs looking right */ } html.a11y-greyscale.a11y-invert { filter: grayscale(1) invert(1); } /* Deliberately gentle. A 125% jump and a blanket font override both break a tuned layout, which is worse for the person who switched them on than the problem they were trying to solve. 112% and a scoped font keep the design intact while still helping. */ html.a11y-bigtext { font-size: 112.5%; } html.a11y-bigtext .bold-hero-copy h1, html.a11y-bigtext .big-h2, html.a11y-bigtext .intro-h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } html.a11y-readable :where(p, li, dd, blockquote, .lede, .intro-body, figcaption) { font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif; letter-spacing: .01em; word-spacing: .04em; } html.a11y-underline a { text-decoration: underline !important; } html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } @media (max-width: 760px) { .utility-inner { justify-content: center; } .a11y-reset { margin-left: 0; } } /* ----------------------------------------------------------- back to top */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 52px; height: 52px; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--blue, #1178AE); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22); font: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, background .18s ease; } .to-top svg { width: 18px; height: 18px; } .to-top.is-visible { opacity: 1; transform: translateY(0); } .to-top:hover { background: var(--blue-ink, #0A5E8C); } .to-top:focus-visible { outline: 3px solid var(--blue-ink, #0A5E8C); outline-offset: 3px; } @media (max-width: 640px) { .to-top { right: .75rem; bottom: .75rem; width: 46px; height: 46px; } } @media (prefers-reduced-motion: reduce) { .to-top { transition: none; } } /* --------------------------------------------------------------- hero meta Secondary lines inside a page hero sit on a saturated discipline colour, so they cannot use --ink-soft: that measured 1.23:1 against the blue hero and 1.28:1 against the pink one, against a 4.5:1 minimum. White is 4.86 and 4.67 on those same backgrounds. */ .page-hero .hero-meta { color: #fff; opacity: .95; }