:root {
color-scheme: light;
--color-bg: #ffffff;
--color-surface: #ffffff;
--color-surface-sunken: #e9eef0;
--color-text: #0e1a1f;
--color-text-muted: #46585f;
--color-primary: #0f4c5c;
--color-primary-dark: #0a3743;
--color-on-primary: #ffffff;
--color-accent: #1c5c46;
--color-band: #0f4c5c;
--color-on-band: #ffffff;
--color-on-band-muted: #cfe0e5;
--color-on-band-faint: #bcd3d9;
--color-border: #d5dee1;
--color-border-strong: #b3c2c7;
--color-border-control: #7d9199;
--color-notice-text: #0f3a46;
--color-notice-border: #0f4c5c;
--color-success-bg: #e6f0eb;
--color-success-text: #14503c;
--color-error-bg: #fdeceb;
--color-error-text: #9b241c;
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 6px;
--max-width: 1440px;
--measure: 62ch;
--band-inset: max(1.5rem, calc(50% - var(--max-width) / 2 + 1.5rem));
--font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--font-ui: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--text-eyebrow: 0.75rem;
--text-meta: 0.8125rem;
--text-label: 0.875rem;
--text-body: 1.0625rem;
--text-lead: 1.1875rem;
--text-h3: 1.375rem;
--text-h2: 1.75rem;
--text-h1: clamp(1.875rem, 4.2vw, 2.5rem);
--text-display: clamp(1.875rem, 4.6vw, 2.875rem);
--motion-fast: 130ms;
--motion-base: 180ms;
--motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
--header-height: 4.25rem;
--header-bar-height: 4.25rem;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
:target {
scroll-margin-top: calc(var(--header-height) + 1rem);
}
main [id],
main :target {
scroll-margin-top: calc(var(--header-height) + 1rem);
}
body {
font-family: var(--font-sans);
font-size: var(--text-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
h1,
h2,
h3 {
font-family: var(--font-display);
color: var(--color-text);
text-wrap: balance;
}
h1 {
font-size: var(--text-h1);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.012em;
}
h2 {
font-size: var(--text-h2);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
}
h3 {
font-size: var(--text-h3);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.006em;
}
p {
margin: 0 0 1em;
}
a {
color: var(--color-primary);
text-underline-offset: 0.15em;
}
a:hover,
a:focus-visible {
color: var(--color-primary-dark);
}
img {
max-width: 100%;
display: block;
}
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.5rem;
}
.skip-link {
position: absolute;
left: -999px;
top: auto;
background: var(--color-primary);
color: var(--color-on-primary);
padding: 0.75rem 1rem;
border-radius: 0 0 var(--radius-md) 0;
z-index: 1000;
}
.skip-link:focus {
left: 0;
top: 0;
}
.eyebrow {
display: block;
font-family: var(--font-ui);
font-size: var(--text-eyebrow);
font-weight: 600;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.site-header {
background: var(--color-surface);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--color-border);
}
.nav-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0.85rem 1.5rem;
max-width: var(--max-width);
margin: 0 auto;
gap: 1rem;
}
.brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.2rem;
text-decoration: none;
color: var(--color-text);
display: flex;
align-items: center;
gap: 0.55rem;
letter-spacing: -0.01em;
min-height: 44px;
}
.brand:hover {
color: var(--color-text);
}
.brand-mark {
width: 26px;
height: 26px;
flex-shrink: 0;
}
.nav-toggle {
display: none;
background: none;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-sm);
padding: 0.4rem 0.6rem;
font-size: 1rem;
color: var(--color-text);
min-height: 44px;
min-width: 44px;
}
.nav-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.05rem;
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 1101px) {
.nav-tool-badge {
display: none;
}
.nav-links {
flex: 1 1 100%;
}
.nav-links > li:last-child {
margin-left: auto;
}
}
.nav-links li {
display: flex;
align-items: center;
}
.nav-links a {
display: inline-flex;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--color-text-muted);
font-weight: 500;
font-size: 0.88rem;
padding-bottom: 0.2rem;
border-bottom: 1px solid transparent;
}
.nav-links a:hover,
.nav-links a:focus-visible {
color: var(--color-text);
}
.nav-links a[aria-current="page"] {
color: var(--color-text);
border-bottom-color: var(--color-primary);
}
.lang-toggle {
border: 1px solid var(--color-border-control);
background: transparent;
color: var(--color-text);
border-radius: var(--radius-sm);
padding: 0.32rem 0.8rem;
font-size: 0.78rem;
letter-spacing: 0.03em;
cursor: pointer;
min-height: 44px;
}
.lang-toggle:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
@media (max-width: 1100px) {
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-links {
display: none;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
width: 100%;
padding: 0.5rem 0 0.25rem;
gap: 0;
}
.nav-links.open {
display: flex;
max-height: var(--nav-menu-max, calc(100vh - var(--header-bar-height) - 1rem));
max-height: var(--nav-menu-max, calc(100dvh - var(--header-bar-height) - 1rem));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.nav-links li {
width: 100%;
border-bottom: 1px solid var(--color-border);
flex: 0 0 auto;
}
.nav-links li:last-child {
border-bottom: none;
padding-top: 0.7rem;
}
.nav-links a {
display: flex;
align-items: center;
min-height: 48px;
width: 100%;
font-size: 0.9rem;
padding-bottom: 0;
border-bottom: none;
}
.nav-links a[aria-current="page"] {
border-bottom: none;
box-shadow: inset 3px 0 0 var(--color-primary);
padding-left: 0.7rem;
margin-left: -0.7rem;
}
.lang-toggle {
width: 100%;
justify-content: center;
}
}
.disclaimer-banner {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
border-left: 3px solid var(--color-notice-border);
color: var(--color-notice-text);
font-size: 0.82rem;
line-height: 1.5;
padding: 0.6rem 1.5rem 0.6rem calc(1.5rem - 3px);
padding-inline: calc(var(--band-inset) - 3px) var(--band-inset);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
.disclaimer-text {
flex: 1;
min-width: 0;
}
.disclaimer-more {
display: inline;
}
.disclaimer-more summary {
display: inline list-item;
list-style-position: inside;
cursor: pointer;
color: inherit;
text-decoration: underline;
text-underline-offset: 0.15em;
padding: 0.5rem 0.15rem;
margin-left: 0.2em;
font-weight: 600;
}
.disclaimer-more summary:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.disclaimer-more[open] summary {
font-weight: 400;
}
.disclaimer-more p {
margin: 0.5rem 0 0;
max-width: var(--measure);
}
.disclaimer-banner .container {
padding: 0;
max-width: calc(var(--max-width) - 3px);
}
.disclaimer-banner strong {
font-weight: 600;
margin-right: 0.35em;
}
.disclaimer-banner[hidden] {
display: none;
}
.disclaimer-close {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--color-notice-text);
font-size: 1.1rem;
line-height: 1;
width: 44px;
height: 44px;
margin: -0.55rem -0.5rem -0.55rem 0;
cursor: pointer;
}
.disclaimer-close:hover {
background: var(--color-surface);
}
.disclaimer-close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
main {
flex: 1;
padding: 3rem 0 7rem;
}
main[data-page-kind="arrival"] {
padding-top: 0;
}
.hero {
background: var(--color-band);
color: var(--color-on-band);
padding: 3rem 0 3.25rem;
padding-inline: var(--band-inset);
margin-bottom: 3rem;
}
.hero h1 {
margin: 0 0 1.1rem;
max-width: 24ch;
color: var(--color-on-band);
font-size: var(--text-display);
}
.hero .eyebrow {
color: var(--color-on-band-faint);
}
.hero p {
font-size: var(--text-lead);
color: var(--color-on-band-muted);
max-width: 46ch;
}
@media (min-width: 900px) {
.hero-layout {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 3.5rem;
align-items: start;
}
.hero-layout > * {
min-width: 0;
}
}
.hero-choose {
margin-top: 2.5rem;
background: var(--color-surface);
color: var(--color-text);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
padding: 1.3rem 1.4rem 1.1rem;
}
.hero-choose .eyebrow {
color: var(--color-text-muted);
}
.hero-choose .eyebrow::before {
background: currentColor;
}
.hero-choose p {
color: var(--color-text-muted);
}
.hero-choose a:focus-visible,
.hero-choose button:focus-visible {
outline-color: var(--color-primary);
}
@media (min-width: 900px) {
.hero-choose {
margin-top: 0;
}
}
.hero-choose h2 {
margin: 0.2rem 0 0.9rem;
font-size: var(--text-h3);
line-height: 1.2;
}
.hero-choose-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--color-border);
}
.hero-choose-list li {
border-bottom: 1px solid var(--color-border);
}
.hero-choose-list a {
display: flex;
align-items: center;
min-height: 44px;
padding: 0.55rem 0.2rem;
color: var(--color-text);
text-decoration: none;
font-size: 0.97rem;
line-height: 1.35;
transition:
background-color var(--motion-fast) var(--motion-ease),
padding-left var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease);
}
.hero-choose-list a:hover,
.hero-choose-list a:focus-visible {
background: var(--color-surface-sunken);
color: var(--color-primary);
padding-left: 0.5rem;
}
.hero .hero-choose-note {
margin: 0.9rem 0 0;
max-width: none;
font-size: var(--text-meta);
line-height: 1.45;
color: var(--color-text-muted);
}
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.4rem;
margin-top: 1.75rem;
}
.hero .btn-primary {
background: var(--color-on-band);
color: var(--color-band);
}
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
background: var(--color-on-band-muted);
color: var(--color-band);
}
.hero .btn-secondary {
color: var(--color-on-band);
text-decoration-color: var(--color-on-band-faint);
}
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible {
color: var(--color-on-band);
background: rgb(255 255 255 / 0.12);
text-decoration-color: var(--color-on-band);
}
.hero a:focus-visible,
.hero button:focus-visible {
outline: 2px solid var(--color-on-band);
outline-offset: 2px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: var(--radius-sm);
padding: 0.7rem 1.3rem;
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
min-height: 44px;
font-family: var(--font-ui);
}
.btn-primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--color-primary-dark);
color: var(--color-on-primary);
}
.btn-secondary {
background: transparent;
border-color: transparent;
color: var(--color-text);
text-decoration: underline;
text-decoration-color: var(--color-border-strong);
text-underline-offset: 0.2em;
padding-left: 0;
padding-right: 0;
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
color: var(--color-primary);
text-decoration-color: var(--color-primary);
}
.pillar-grid {
list-style: none;
margin: 2rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1px;
border: 1px solid var(--color-border);
}
@media (min-width: 900px) {
.pillar-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.pillar {
background: var(--color-surface);
outline: 1px solid var(--color-border);
padding: 1.6rem 1.5rem;
min-width: 0;
}
.pillar h3 {
margin: 0 0 0.5rem;
}
.pillar h3 a {
display: block;
padding: 0.6rem 0;
margin: -0.6rem 0;
color: var(--color-text);
text-decoration: none;
}
.pillar h3 a::after {
content: " \2192";
color: var(--color-primary);
}
.pillar h3 a:hover,
.pillar h3 a:focus-visible {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pillar p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.97rem;
}
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1.5rem;
}
.card h3 {
margin-top: 0;
}
.card p {
color: var(--color-text-muted);
margin-bottom: 0;
}
.story-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.story-card {
border-left: 2px solid var(--color-border-strong);
padding-left: 1.25rem;
}
.story-card h3 {
margin: 0 0 0.5rem;
font-size: 1.05rem;
}
.story-card p {
color: var(--color-text-muted);
font-size: 0.95rem;
margin: 0;
}
.resources-finder {
margin: 2rem 0 2.75rem;
}
.resources-finder h2 {
margin-top: 0;
}
.resource-filter-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.resource-filter-grid > div {
min-width: 0;
}
.resource-filter-grid input,
.resource-filter-grid select,
.needs-finder input {
width: 100%;
}
.filter-summary {
color: var(--color-text-muted);
font-size: 0.9rem;
margin: 0.75rem 0 0;
}
.resource-group {
margin-bottom: 2.75rem;
}
.resource-group h2 {
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 0.25rem;
}
.resource-item {
padding: 1.1rem 0;
border-bottom: 1px solid var(--color-border);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.25rem;
}
.resource-item:last-child {
border-bottom: none;
}
@media (min-width: 1100px) {
.resource-group:has(> .resource-item) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 2.5rem;
}
.resource-group:has(> .resource-item) > h2 {
grid-column: 1 / -1;
}
.resource-group:has(> .resource-item) > .resource-item:last-child {
border-bottom: 1px solid var(--color-border);
}
}
.resource-item h4 {
margin: 0;
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.98rem;
}
.resource-item .phone {
font-weight: 600;
color: var(--color-accent);
font-size: 0.9rem;
}
.resource-item > a[href^="http"] {
display: flex;
align-items: center;
min-height: 44px;
overflow-wrap: anywhere;
}
.resource-item p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.92rem;
max-width: var(--measure);
}
.resource-item a {
font-size: 0.88rem;
word-break: break-word;
}
.resource-group ul {
padding-left: 1.15rem;
}
.resource-group li {
margin-bottom: 0.5rem;
color: var(--color-text-muted);
}
.section-spaced {
margin-top: 3.5rem;
}
.mental-urgent-card {
margin-top: 2rem;
border-color: var(--color-error-text);
background: var(--color-error-bg);
}
.mental-focus-card {
max-width: none;
margin-top: 1.5rem;
}
.mental-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 0.75rem;
margin: 1rem 0;
}
.mental-action {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
min-height: 68px;
padding: 0.9rem 1rem;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
overflow-wrap: anywhere;
}
.mental-action:hover,
.mental-action:focus-visible {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.mental-action strong {
color: var(--color-primary);
font-size: 1.08rem;
}
.mental-action span {
margin-top: 0.3rem;
font-size: 0.9rem;
line-height: 1.45;
}
.mental-call-script {
margin-bottom: 0;
}
.breathing-card {
max-width: 420px;
}
.comfort-card {
max-width: 420px;
margin-top: 1.5rem;
}
.comfort-text {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.5;
margin: 0.75rem 0 1.25rem;
min-height: 3.5em;
}
.story-note {
border-left: 2px solid var(--color-border-strong);
padding-left: 1.25rem;
font-size: 0.9rem;
color: var(--color-text-muted);
margin-bottom: 2.5rem;
max-width: var(--measure);
}
form {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: 560px;
}
form[hidden] {
display: none;
}
.subscribe-section[hidden] {
display: none;
}
label {
font-weight: 600;
font-size: 0.85rem;
display: block;
margin-bottom: 0.4rem;
}
input[type="text"],
input[type="email"],
input[type="date"],
input[type="search"],
select,
textarea {
font-family: inherit;
font-size: 1rem;
padding: 0.65rem 0.8rem;
border: 1px solid var(--color-border-control);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
resize: vertical;
width: 100%;
max-width: 100%;
min-height: 44px;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="date"]:focus-visible,
input[type="search"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 1px;
}
textarea {
min-height: 140px;
}
.field-hint {
font-size: 0.8rem;
color: var(--color-text-muted);
font-weight: 400;
}
.form-status {
font-size: 0.88rem;
padding: 0.65rem 0.85rem;
border-radius: var(--radius-sm);
}
.form-status:empty {
display: none;
}
.form-status.success {
background: var(--color-success-bg);
color: var(--color-success-text);
}
.form-status.error {
background: var(--color-error-bg);
color: var(--color-error-text);
}
.form-status.info {
background: var(--color-surface-sunken);
color: var(--color-text-muted);
}
.form-status-action {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.5rem;
border: none;
background: none;
font: inherit;
font-weight: 600;
color: inherit;
text-decoration: underline;
cursor: pointer;
}
.form-status-action:hover {
text-decoration: none;
}
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.site-footer {
border-top: 1px solid var(--color-border);
padding: 1.75rem 0 5rem;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.site-footer .container {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.breathing-circle {
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--color-accent);
opacity: 0.22;
margin: 1.5rem auto;
transition: transform 4s ease-in-out, opacity 4s ease-in-out;
}
.breathing-circle.inhale {
transform: scale(1.4);
opacity: 0.4;
}
.breathing-circle.exhale {
transform: scale(0.85);
opacity: 0.16;
}
.breathing-label {
text-align: center;
font-weight: 600;
min-height: 1.4em;
font-size: 0.9rem;
letter-spacing: 0.03em;
color: var(--color-text-muted);
}
.chat-launcher {
position: fixed;
bottom: 1.1rem;
right: 1.1rem;
z-index: 200;
border-radius: var(--radius-md);
border: 1px solid var(--color-border-control);
background: var(--color-surface);
color: var(--color-text);
padding: 0.65rem 1.05rem;
font-weight: 600;
font-size: 0.86rem;
box-shadow: 0 4px 14px rgba(20, 15, 10, 0.14);
cursor: pointer;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
@media (max-width: 600px) {
.chat-launcher {
width: 48px;
min-width: 48px;
padding: 0;
justify-content: center;
font-size: 0;
gap: 0;
}
.chat-launcher::before {
content: "";
width: 20px;
height: 16px;
border: 2px solid currentColor;
border-radius: 4px 4px 4px 0;
}
}
body:has(form :focus) .chat-launcher {
opacity: 0;
pointer-events: none;
}
.chat-launcher:hover,
.chat-launcher:focus-visible {
border-color: var(--color-primary);
color: var(--color-primary);
}
.chat-launcher::before {
content: "";
width: 8px;
height: 8px;
border: 1.5px solid currentColor;
background: none;
flex-shrink: 0;
}
.chat-panel {
position: fixed;
bottom: 4.6rem;
right: 1.1rem;
width: min(370px, calc(100vw - 1.6rem));
max-height: min(560px, calc(100vh - 7.5rem));
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: 0 16px 40px rgba(20, 15, 10, 0.22);
display: none;
flex-direction: column;
overflow: hidden;
z-index: 200;
transition:
opacity var(--motion-base) var(--motion-ease),
transform var(--motion-base) var(--motion-ease);
}
.chat-panel.open {
display: flex;
opacity: 1;
transform: translateY(0);
}
.chat-header {
padding: 0.95rem 1.15rem;
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-ui);
font-weight: 600;
font-size: 1.02rem;
}
.chat-close {
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
color: var(--color-text-muted);
line-height: 1;
min-width: 32px;
min-height: 32px;
}
.chat-close:hover {
color: var(--color-text);
}
.chat-body {
padding: 0.95rem 1.15rem;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.chat-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.chat-option-group {
margin: 0.45rem 0 0;
color: var(--color-text-muted);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.chat-option-btn {
text-align: left;
padding: 0.6rem 0.8rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface-sunken);
color: var(--color-text);
cursor: pointer;
font-size: 0.88rem;
min-height: 40px;
}
.chat-option-btn:hover,
.chat-option-btn:focus-visible {
border-color: var(--color-primary);
}
.chat-message {
border-radius: var(--radius-sm);
padding: 0.7rem 0.85rem;
font-size: 0.88rem;
white-space: pre-wrap;
}
.chat-message.bot {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
}
.chat-message.user {
background: var(--color-primary);
color: var(--color-on-primary);
align-self: flex-end;
}
.chat-message.crisis {
background: var(--color-error-bg);
border: 1px solid var(--color-notice-border);
color: var(--color-error-text);
}
.chat-message.soft-support {
border-left: 3px solid var(--color-accent);
}
.chat-message ul {
margin: 0.4rem 0 0;
padding-left: 1.1rem;
}
.chat-resources-heading {
margin-top: 0.6rem;
font-weight: 600;
}
.chat-tool-list {
list-style: none;
margin: 0.3rem 0 0;
padding: 0;
}
.chat-tool-list li {
margin-bottom: 0.55rem;
}
.chat-tool-list a {
display: block;
font-weight: 600;
padding: 0.3rem 0 0.1rem;
}
.chat-tool-why {
display: block;
font-size: 0.85rem;
color: var(--color-text-muted);
padding-bottom: 0.3rem;
}
.chat-footer {
padding: 0.85rem 1.15rem;
border-top: 1px solid var(--color-border);
display: flex;
gap: 0.5rem;
}
.chat-footer input {
flex: 1;
min-height: 40px;
}
.chat-footer .btn {
padding: 0.6rem 1rem;
min-height: 40px;
}
#deadline-results {
scroll-margin-top: calc(var(--header-height) + 1rem);
}
#deadline-results :is(h2, h3):focus {
outline: none;
}
.chat-options-only {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border);
font-size: 0.9rem;
line-height: 1.5;
}
.chat-options-only {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border);
font-size: 0.9rem;
line-height: 1.5;
}
.chat-note {
font-size: 0.72rem;
color: var(--color-text-muted);
padding: 0 1.15rem 0.75rem;
}
.chat-urgent {
padding: 0.7rem 1.15rem;
border-top: 1px solid var(--color-border);
background: color-mix(in srgb, var(--color-notice-border) 12%, var(--color-surface));
}
.chat-urgent-intro {
margin: 0 0 0.3rem;
font-size: 0.82rem;
font-weight: 600;
}
.chat-urgent-lines {
margin: 0;
padding-left: 1.1rem;
font-size: 0.85rem;
display: grid;
gap: 0;
}
.quick-exit {
flex-shrink: 0;
margin-left: auto;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--color-text);
color: var(--color-bg);
border: none;
border-radius: var(--radius-sm);
padding: 0.4rem 0.9rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
min-height: 44px;
min-width: 44px;
white-space: nowrap;
}
.quick-exit:hover,
.quick-exit:focus-visible {
background: var(--color-primary);
color: var(--color-on-primary);
}
.letter-output {
width: 100%;
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.6;
padding: 1rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
resize: vertical;
margin-bottom: 1rem;
}
.container-narrow {
max-width: calc(640px + 3rem);
margin-inline: auto;
}
@media (min-width: 900px) {
.container-narrow {
margin-inline: auto;
max-width: var(--max-width);
}
.container-narrow > * {
max-width: 640px;
}
}
.principles-intro {
font-size: 1.1rem;
color: var(--color-text-muted);
max-width: var(--measure);
margin-bottom: 2.5rem;
}
.principle-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: principle;
}
.principle-list li {
counter-increment: principle;
padding: 2rem 0;
border-top: 1px solid var(--color-border);
position: relative;
padding-left: 3rem;
}
.principle-list li:last-child {
padding-bottom: 0;
}
.principle-list li::before {
content: counter(principle);
position: absolute;
left: 0;
top: 2rem;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--color-text-muted);
}
.principle-list h2 {
font-size: 1.4rem;
margin: 0 0 0.6rem;
}
.principle-list p {
color: var(--color-text-muted);
margin: 0;
max-width: var(--measure);
}
.journey-list {
list-style: none;
margin: 2rem 0 0;
padding: 0;
}
.journey-item {
padding: 1rem 0 1rem 1.25rem;
border-left: 2px solid var(--color-border-strong);
margin-left: 0.4rem;
position: relative;
}
.journey-item::before {
content: "";
position: absolute;
left: -5px;
top: 1.4rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-accent);
}
.journey-label {
margin: 0 0 0.2rem;
font-weight: 600;
}
.journey-date {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.flyer {
max-width: 720px;
margin: 0 auto 2.5rem;
padding: 2rem 1.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.flyer-brand {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text-muted);
margin-bottom: 1.25rem;
}
.flyer-title {
margin: 0 0 1.25rem;
font-size: 1.6rem;
}
.flyer-points {
padding-left: 1.2rem;
margin: 0 0 1.5rem;
}
.flyer-points li {
margin-bottom: 0.6rem;
font-size: 1.02rem;
}
.flyer-contacts {
border-top: 1px solid var(--color-border);
padding-top: 1rem;
margin-bottom: 1.5rem;
}
.story-support {
margin: 1rem 0 0;
padding: 1rem 1.1rem;
border-left: 3px solid var(--color-notice-border);
background: color-mix(in srgb, var(--color-notice-border) 12%, var(--color-surface));
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.story-support-intro {
margin: 0 0 0.6rem;
font-weight: 600;
}
.story-support-lines {
margin: 0;
padding-left: 1.1rem;
display: grid;
gap: 0;
}
.flyer-contact-line {
margin: 0 0 0.35rem;
font-size: 0.92rem;
color: var(--color-text-muted);
}
.flyer-contact-line .phone-link {
display: inline;
min-height: 0;
min-width: 0;
padding: 0;
font-weight: 600;
}
.flyer-footer {
display: flex;
align-items: center;
gap: 1rem;
border-top: 1px solid var(--color-border);
padding-top: 1rem;
}
.flyer-qr {
flex-shrink: 0;
width: 96px;
height: 96px;
border: 1px solid var(--color-border);
background: #fff;
}
.flyer-footer-text p {
margin: 0;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.flyer-url {
font-weight: 600;
overflow-wrap: anywhere;
}
.nav-tool-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
@media (max-width: 1100px) {
.nav-links .nav-tool-link {
display: flex;
width: 100%;
min-height: 48px;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: nowrap;
}
}
.nav-tool-badge {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 999px;
padding: 0.1rem 0.5rem;
}
.case-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.case-toolbar .story-note {
margin: 0;
}
.case-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 1.5rem;
overflow-x: auto;
}
.case-tab-btn {
font: inherit;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-muted);
padding: 0.6rem 0.9rem;
cursor: pointer;
white-space: nowrap;
min-height: 44px;
}
.case-tab-btn:hover,
.case-tab-btn:focus-visible {
color: var(--color-primary);
}
.case-tab-btn[aria-current="true"] {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.case-item-list {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.case-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
padding: 0.9rem 1rem;
}
.case-item p {
margin: 0.3rem 0 0;
}
.case-item-notes {
color: var(--color-text-muted);
font-size: 0.92rem;
white-space: pre-wrap;
}
.case-inline-select {
margin-top: 0.5rem;
width: auto;
max-width: 220px;
display: block;
}
.case-delete-btn {
margin-top: 0.6rem;
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
.case-add-form {
border-top: 1px solid var(--color-border);
padding-top: 1.25rem;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.case-add-form h3 {
margin: 0;
font-size: 1.05rem;
}
.case-deadline-headline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.case-deadline-headline strong {
flex: 1 1 auto;
}
.case-urgency-badge {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.15rem 0.55rem;
border-radius: 999px;
white-space: nowrap;
background: var(--color-border);
color: var(--color-text-muted);
}
.case-deadline-vencido .case-urgency-badge {
background: color-mix(in srgb, var(--color-error-text) 18%, var(--color-surface));
color: var(--color-error-text);
}
.case-deadline-proximo .case-urgency-badge {
background: color-mix(in srgb, var(--color-notice-border) 18%, var(--color-surface));
color: var(--color-notice-text);
}
.case-deadline-completado .case-urgency-badge {
background: color-mix(in srgb, var(--color-success-text) 18%, var(--color-surface));
color: var(--color-success-text);
}
.case-summary-output {
min-height: 320px;
}
@media print {
.no-print,
.chat-launcher,
.chat-panel,
.quick-exit {
display: none !important;
}
body {
background: #fff;
}
.flyer {
border: none;
box-shadow: none;
break-after: page;
page-break-after: always;
padding: 0;
max-width: 100%;
}
.flyer:last-child {
break-after: auto;
page-break-after: auto;
}
body.print-one .flyer:not(.print-target) {
display: none !important;
}
body.print-one .flyer.print-target {
break-after: auto;
page-break-after: auto;
}
}
.flyer-print-one {
margin-top: 1rem;
}
.deadline-count {
font-family: var(--font-ui);
font-size: 1.25rem;
font-weight: 600;
margin: 0.35rem 0 0.5rem;
}
.deadline-item {
border-left: 3px solid var(--color-border-strong);
}
.deadline-open {
border-left-color: var(--color-success-text);
}
.deadline-urgent {
border-left-color: var(--color-notice-border);
}
.deadline-passed {
border-left-color: var(--color-error-text);
}
.deadline-urgent .case-urgency-badge {
color: var(--color-notice-text);
background: color-mix(in srgb, var(--color-notice-border) 18%, var(--color-surface));
}
.deadline-passed .case-urgency-badge {
color: var(--color-error-text);
background: color-mix(in srgb, var(--color-error-text) 16%, var(--color-surface));
}
.deadline-open .case-urgency-badge {
color: var(--color-success-text);
background: color-mix(in srgb, var(--color-success-text) 16%, var(--color-surface));
}
.unverified-note {
font-size: 0.78rem;
color: var(--color-text-muted);
border-top: 1px dashed var(--color-border-strong);
margin: 0.6rem 0 0;
padding-top: 0.4rem;
}
.glossary-entry h2 {
font-size: 1.15rem;
}
#state-results {
margin-top: 1.25rem;
}
#state-results[hidden] {
display: none;
}
.phone-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
min-width: 44px;
padding: 0.35rem 0;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.resource-item .phone a {
display: inline-block;
padding: 0.55rem 0;
margin: -0.3rem 0;
min-height: 44px;
font-weight: 700;
font-size: 1.125rem;
font-variant-numeric: tabular-nums;
}
.pathway-intro {
font-size: 1.05rem;
max-width: var(--measure);
}
.pathway-phase {
margin-top: 2.5rem;
}
.pathway-phase h2 {
font-size: 1.15rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--color-border);
}
.pathway-steps {
list-style: none;
margin: 0;
padding: 0;
}
.pathway-step {
display: flex;
gap: 0.9rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--color-border);
}
.pathway-step h3 {
margin: 0 0 0.3rem;
}
.pathway-step p {
margin: 0 0 0.5rem;
color: var(--color-text-muted);
max-width: var(--measure);
}
.pathway-step-number {
flex-shrink: 0;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
color: var(--color-text);
font-weight: 600;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pathway-step-link {
display: inline-block;
font-weight: 600;
font-size: 0.92rem;
padding: 0.6rem 0;
}
.pathway-avoid {
margin-top: 3rem;
padding: 1.25rem;
border: 1px solid var(--color-notice-border);
border-left-width: 3px;
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
}
.pathway-avoid h2 {
margin-top: 0;
font-size: 1.1rem;
color: var(--color-notice-text);
}
.pathway-avoid li {
margin-bottom: 0.7rem;
max-width: var(--measure);
}
.process-universal {
margin-top: 2rem;
padding: 1.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-sunken);
}
.process-universal h2 {
margin-top: 0;
font-size: 1.1rem;
}
.process-universal li {
margin-bottom: 0.7rem;
max-width: var(--measure);
}
.needs-finder > p {
max-width: var(--measure);
}
.needs-finder > label {
display: block;
margin-top: 1rem;
}
.needs-finder > input {
max-width: var(--measure);
}
.needs-group {
margin-top: 2rem;
}
.needs-group h3 {
font-size: 1rem;
margin-bottom: 0.65rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--color-border);
}
.needs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
gap: 0.75rem;
}
.need-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 0;
min-height: 44px;
padding: 0.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
overflow-wrap: anywhere;
}
.need-card:hover,
.need-card:focus-visible {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.need-card span {
margin-top: 0.3rem;
color: var(--color-text-muted);
font-size: 0.88rem;
line-height: 1.45;
}
@media (max-width: 640px) {
.resource-filter-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.process-meta {
margin: 0 0 0.5rem;
font-size: 0.92rem;
color: var(--color-text-muted);
max-width: var(--measure);
}
.process-meta-label {
font-weight: 600;
color: var(--color-text);
margin-right: 0.35rem;
}
.process-your-part {
border-left: 3px solid var(--color-accent);
padding: 0.15rem 0 0.15rem 0.7rem;
}
.process-who {
font-size: 0.92rem;
color: var(--color-text-muted);
margin: 0 0 1rem;
}
.process-endings {
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border-strong);
}
.process-endings h2 {
font-size: 1.15rem;
}
.process-endings li {
margin-bottom: 0.7rem;
max-width: var(--measure);
}
#process-result[hidden] {
display: none;
}
main[data-page-kind] .page-head .eyebrow {
display: flex;
align-items: start;
gap: 0.55rem;
}
main[data-page-kind] .page-head .eyebrow::before {
content: "";
flex: 0 0 auto;
width: 1.625rem;
height: 3px;
margin-top: 0.5em;
background: currentColor;
}
main[data-page-kind="tool"] .page-head .eyebrow {
color: var(--color-accent);
}
main[data-page-kind="directory"] .page-head .eyebrow {
color: var(--color-primary);
}
.page-head {
margin-bottom: 1.75rem;
}
main[data-page-kind="tool"] .page-head,
main[data-page-kind="directory"] .page-head {
padding-bottom: 0.9rem;
border-bottom: 3px solid currentColor;
color: var(--color-primary);
}
main[data-page-kind="tool"] .page-head {
color: var(--color-accent);
}
main[data-page-kind="tool"] .page-head h1,
main[data-page-kind="directory"] .page-head h1 {
color: var(--color-text);
}
.page-head h1 {
margin-bottom: 0;
}
.page-head .eyebrow {
margin-bottom: 0.35rem;
}
main[data-page-kind="tool"] .page-head,
main[data-page-kind="directory"] .page-head {
margin-bottom: 1.4rem;
}
.hero .page-head .eyebrow::before,
.notfound-hero .page-head .eyebrow::before {
background: var(--color-on-band-faint);
}
.tool-split {
display: grid;
gap: 2.5rem;
margin-top: 1.75rem;
}
@media (min-width: 900px) {
.tool-split {
grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
gap: 3rem;
align-items: start;
}
.tool-panel {
position: sticky;
top: calc(var(--header-height) + 1rem);
max-height: calc(100vh - var(--header-height) - 2rem);
overflow-y: auto;
}
}
.tool-panel form {
max-width: none;
}
@media (min-width: 900px) {
.tool-output:has(> [hidden]),
.tool-output:has(> :empty) {
border-left: 1px solid var(--color-border);
padding-left: 2rem;
}
.tool-output > .section-spaced {
margin-top: 0;
}
}
@media (min-width: 1100px) {
.reading-layout {
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
column-gap: 3.5rem;
align-items: start;
}
.reading-layout > .reading-index {
grid-column: 1;
grid-row: 1 / span 999;
}
.reading-layout > *:not(.reading-index) {
grid-column: 2;
}
}
.reading-index {
display: none;
}
@media (min-width: 1100px) {
.reading-index {
display: block;
position: sticky;
top: calc(var(--header-height) + 1.5rem);
max-height: calc(100vh - var(--header-height) - 3rem);
overflow-y: auto;
font-size: 0.94rem;
}
}
.reading-index h2 {
margin: 0 0 0.7rem;
font-family: var(--font-ui);
font-size: var(--text-meta);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.reading-index ol {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid var(--color-border);
}
.reading-index a {
display: block;
padding: 0.4rem 0 0.4rem 0.9rem;
margin-left: -1px;
border-left: 2px solid transparent;
color: var(--color-text-muted);
text-decoration: none;
line-height: 1.35;
transition:
color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease);
}
.reading-index a:hover,
.reading-index a:focus-visible {
color: var(--color-primary);
border-left-color: var(--color-border-strong);
}
.reading-index a[aria-current="true"] {
color: var(--color-primary);
font-weight: 600;
border-left-color: var(--color-primary);
}
main > .container > p,
main > .container > section > p:first-of-type {
max-width: var(--measure);
}
@media (min-width: 900px) {
main[data-page-kind="directory"] .glossary-entry {
display: grid;
grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
column-gap: 2.5rem;
align-items: baseline;
}
main[data-page-kind="directory"] .glossary-entry > h3,
main[data-page-kind="directory"] .glossary-entry > h2 {
margin-top: 0;
}
main[data-page-kind="directory"] .glossary-entry > :not(h2):not(h3) {
grid-column: 2;
max-width: var(--measure);
}
}
.noscript-fallback {
margin: 1.75rem 0;
padding: 1.25rem 1.4rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-sm);
max-width: var(--measure);
}
.noscript-fallback h2 {
margin: 0 0 0.6rem;
font-size: var(--text-h3);
}
.noscript-fallback p {
margin: 0 0 0.8rem;
color: var(--color-text-muted);
}
.noscript-fallback p:last-child {
margin-bottom: 0;
}
.noscript-fallback a {
color: var(--color-primary);
}
.btn,
.nav-links a,
.lang-toggle,
.nav-toggle,
.quick-exit,
.chat-launcher,
.chat-option-btn,
.case-tab-btn,
.disclaimer-close,
.disclaimer-more summary {
transition:
background-color var(--motion-fast) var(--motion-ease),
border-color var(--motion-fast) var(--motion-ease),
color var(--motion-fast) var(--motion-ease),
transform var(--motion-fast) var(--motion-ease);
}
.btn:active,
.lang-toggle:active,
.nav-toggle:active,
.chat-launcher:active,
.chat-option-btn:active,
.case-tab-btn:active,
.disclaimer-close:active {
transform: translateY(1px);
}
a,
.resource-item a,
.site-footer a {
transition:
color var(--motion-fast) var(--motion-ease),
text-decoration-color var(--motion-fast) var(--motion-ease);
}
.card,
.resource-item,
.story-card,
.pillar,
.flyer {
transition:
border-color var(--motion-base) var(--motion-ease),
background-color var(--motion-base) var(--motion-ease);
}
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
transition: border-color var(--motion-fast) var(--motion-ease);
}
input[type="date"] {
-webkit-appearance: none;
appearance: none;
text-align: left;
min-width: 0;
}
select {
padding-right: 2.5rem;
text-overflow: ellipsis;
}
@starting-style {
.chat-panel.open {
opacity: 0;
transform: translateY(8px);
}
}
@media (max-width: 1100px) {
.nav-links.open {
animation: vm-drop var(--motion-base) var(--motion-ease);
}
}
@keyframes vm-drop {
from {
opacity: 0;
transform: translateY(-6px);
}
}
#deadline-results:not([hidden]),
#pathway-result:not([hidden]),
#process-result:not([hidden]),
#letter-output:not([hidden]),
#state-results:not(:empty) {
animation: vm-arrive var(--motion-base) var(--motion-ease);
}
@keyframes vm-arrive {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto;
}
.breathing-circle,
.breathing-circle.inhale,
.breathing-circle.exhale {
transform: none;
opacity: 0.22;
}
}
.process-diagram,
.deadline-timeline-figure {
margin: 1.5rem 0 2rem;
overflow-x: auto;
}
.process-diagram svg,
.deadline-timeline-figure svg {
display: block;
width: 100%;
height: auto;
}
.process-diagram svg {
max-width: 34rem;
}
.deadline-timeline-figure svg {
min-width: 20rem;
}
.process-diagram figcaption,
.deadline-timeline-figure figcaption {
margin-top: 0.6rem;
font-size: var(--text-meta);
color: var(--color-text-muted);
max-width: var(--measure);
}
@media print {
.process-diagram svg circle,
.deadline-timeline-figure svg circle {
fill: #fff !important;
stroke: #000 !important;
}
.process-diagram svg line,
.deadline-timeline-figure svg line,
.process-diagram svg text,
.deadline-timeline-figure svg text {
stroke: #000 !important;
fill: #000 !important;
}
}
main[data-page-kind="reading"] p,
main[data-page-kind="reading"] li {
max-width: var(--measure);
}
main[data-page-kind="reading"] h2 {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
}
main[data-page-kind="reading"] h2:first-of-type {
margin-top: 1.5rem;
}
.help-bar {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-sunken);
padding: 0.7rem 1.5rem;
padding-inline: var(--band-inset);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.2rem 1.25rem;
}
.help-bar-title {
margin: 0;
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.95rem;
flex: none;
}
.help-bar-numbers {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0 1.25rem;
}
.help-bar-numbers a {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
min-height: 44px;
padding: 0.55rem 0;
margin: -0.55rem 0;
font-weight: 700;
font-size: 1.0625rem;
font-variant-numeric: tabular-nums;
color: var(--color-primary);
text-decoration: none;
}
.help-bar-digits {
text-decoration: underline;
text-underline-offset: 0.15em;
}
.help-bar-numbers a span:not(.help-bar-digits) {
font-weight: 400;
font-size: var(--text-meta);
color: var(--color-text-muted);
}
.help-bar-note {
margin: 0;
font-size: var(--text-meta);
color: var(--color-text-muted);
flex: 1 1 100%;
}
.help-bar-verified {
margin: 0;
font-size: var(--text-meta);
color: var(--color-text-muted);
flex: 1 1 100%;
margin-top: 0.1rem;
}
@media (max-width: 600px) {
.help-bar {
padding-block: 0.6rem;
gap: 0.15rem 1rem;
}
.mental-help-bar .help-bar-title {
flex: 1 1 100%;
min-width: 0;
overflow-wrap: anywhere;
}
.help-bar-numbers {
flex-direction: column;
gap: 0.3rem;
flex: 1 1 100%;
}
.help-bar-numbers a {
margin-block: 0;
}
.help-bar-note {
margin-top: 0.45rem;
}
}
@media (max-width: 400px) {
.help-bar {
padding-block: 0.35rem;
}
.help-bar-title {
font-size: 0.875rem;
line-height: 1.25;
}
.help-bar-note,
.help-bar-verified {
line-height: 1.25;
}
.help-bar-numbers {
gap: 0.2rem;
}
.help-bar-note {
margin-top: 0.25rem;
}
}
@media print {
.help-bar {
display: none;
}
.hero,
.notfound-hero {
background: none;
color: var(--color-text);
padding-block: 0;
}
.hero h1,
.hero .eyebrow,
.hero p,
.notfound-hero h1,
.notfound-hero .eyebrow,
.notfound-hero .notfound-lead {
color: var(--color-text);
}
.hero .eyebrow::before,
.notfound-hero .eyebrow::before {
background: var(--color-text);
}
.hero .btn-primary {
background: none;
color: var(--color-text);
}
}
#event-date-hint {
min-height: 1.5em;
margin-top: 0.35rem;
}
.notfound-hero {
display: flex;
align-items: center;
gap: 1.75rem;
background: var(--color-band);
color: var(--color-on-band);
padding-block: 2.75rem 3rem;
padding-inline: var(--band-inset);
margin-bottom: 2.5rem;
}
.notfound-hero h1,
.notfound-hero .eyebrow {
color: var(--color-on-band);
}
.notfound-hero .eyebrow {
color: var(--color-on-band-faint);
}
.notfound-hero .notfound-lead {
color: var(--color-on-band-muted);
}
.notfound-mark {
flex: 0 0 auto;
width: 112px;
height: 112px;
color: var(--color-on-band);
}
.notfound-hero-text {
min-width: 0;
}
.notfound-lead {
max-width: var(--measure);
margin-bottom: 0;
}
.notfound-hint {
margin: 0 0 0.5rem;
padding: 0.75rem 1rem;
border-left: 3px solid var(--color-primary);
background: var(--color-surface-sunken);
font-size: var(--text-meta);
}
.notfound-doors .pillar.is-match {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
background: var(--color-surface-sunken);
}
@media (max-width: 600px) {
.notfound-hero {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.notfound-mark {
width: 72px;
height: 72px;
}
}
@media (forced-colors: active) {
main[data-page-kind] .page-head .eyebrow::before,
.hero .page-head .eyebrow::before,
.notfound-hero .page-head .eyebrow::before,
.hero-choose .eyebrow::before,
.hero .eyebrow::before,
.notfound-hero .eyebrow::before {
height: 0;
background: none;
border-top: 3px solid CanvasText;
}
.journey-item::before {
width: 0;
height: 0;
background: none;
border: 4px solid CanvasText;
}
.hero,
.notfound-hero {
border-bottom: 1px solid CanvasText;
}
.hero-choose {
border: 1px solid CanvasText;
}
.brand-mark rect,
.brand-mark path {
fill: CanvasText;
}
.notfound-mark {
color: CanvasText;
}
}