:root {
--navy: #0c2d57;
--blue: #103b70;
--yellow: #f8c331;
--yellow-ui-thin: #b08306;
--yellow-rule: #b08306;
--ink: #16243a;
--muted: #55627a;
--line: #d9e0ea;
--paper: #f5f7fa;
--white: #ffffff;
--red: #f0262f;
--red-accessible: #e02028;
--red-ink: #e02028;
--on-navy: #b9c6da;
--ok: #0b7a43;
--err: #b3131b;
--control-border: #88909c;
--font-heading: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
--font-body: "Public Sans", "Segoe UI", Arial, sans-serif;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--space-24: 96px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-flat: none;
--shadow-raised: 0 8px 24px rgb(12 45 87 / 8%);
--shadow-floating: 0 16px 48px rgb(12 45 87 / 14%);
--content-max: 1200px;
--reading-max: 72ch;
--header-h: 72px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 8px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
color: var(--ink);
background: var(--white);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
font-family: var(--font-heading);
font-weight: 800;
color: var(--navy);
line-height: 1.1;
margin: 0 0 var(--space-4);
overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; line-height: 1.25; }
p { margin: 0 0 var(--space-4); }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--yellow); color: var(--navy); }
.wrap {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--space-6);
}
.wrap--narrow { max-width: var(--reading-max); }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--space-4);
top: calc(-1 * var(--space-12));
z-index: var(--layer-important);
background: var(--navy);
color: var(--white);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
transition: top var(--duration-moderate-1) var(--ease-out-2);
}
.skip-link:focus-visible { top: var(--space-4); }
.note {
color: var(--muted);
font-size: 0.95rem;
}
.text-link { font-weight: 600; }
:focus-visible {
outline: 3px solid var(--navy);
outline-offset: 3px;
border-radius: 2px;
}
.on-navy :focus-visible,
.site-footer :focus-visible,
.site-header .btn--primary:focus-visible {
outline: 3px solid var(--yellow);
outline-offset: 3px;
box-shadow: 0 0 0 3px var(--navy);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
padding: 12px 24px;
min-height: 44px;
border-radius: 999px;
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background-color var(--duration-quick-2) var(--ease-out-2), color var(--duration-quick-2) var(--ease-out-2), border-color var(--duration-quick-2) var(--ease-out-2), box-shadow var(--duration-quick-2) var(--ease-out-2);
}
.btn--primary { background: var(--yellow); color: var(--navy); }
.btn--primary:hover { background: #ffd35c; color: var(--navy); }
.btn--secondary {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn--secondary:hover { background: var(--navy); color: var(--white); }
.btn--ghost { background: transparent; color: var(--blue); border-color: transparent; }
.btn--ghost:hover { background: var(--paper); color: var(--navy); }
.btn--destructive { background: var(--red-accessible); color: var(--white); }
.btn--sm { padding: 9px 18px; min-height: 44px; }
.btn--lg { padding: 14px 30px; }
.btn[disabled], .btn--disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.site-header {
position: sticky;
top: 0;
z-index: var(--layer-4);
background: rgb(255 255 255 / 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
}
.header-inner {
display: flex;
align-items: center;
gap: var(--space-6);
min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 40px; width: auto; }
.brand .rf-logo { height: 40px; width: auto; overflow: visible; }
.brand .rf-logo .rf-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.brand .rf-logo .rf-fade { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.brand .rf-logo .rf-draw {
animation: rf-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.brand .rf-logo .rf-draw:nth-of-type(2) { animation-delay: 0.15s; }
.brand .rf-logo .rf-draw:nth-of-type(1) { animation-delay: 0.45s; }
.brand .rf-logo .rf-draw:nth-of-type(3) { animation-delay: 0.65s; }
.brand .rf-logo .rf-draw:nth-of-type(4) { animation-delay: 0.85s; }
.brand .rf-logo .rf-fade {
animation: rf-fade 0.6s ease-out 1.05s both;
}
}
@keyframes rf-draw {
to { stroke-dashoffset: 0; }
}
@keyframes rf-fade {
to { opacity: 1; }
}
.site-nav { margin-left: auto; }
.nav-list {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
min-height: 44px;
color: var(--muted);
font-weight: 500;
text-decoration: none;
background: none;
border: 0;
font: inherit;
font-weight: 500;
cursor: pointer;
border-radius: var(--radius-sm);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--navy); }
.nav-caret {
width: 8px; height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--duration-quick-2) var(--ease-out-2);
}
.nav-item--group { position: relative; }
.nav-item--group[aria-open="true"] .nav-caret,
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(225deg) translateY(-2px); }
.nav-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 280px;
max-height: min(70vh, 480px);
overflow: auto;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-floating);
padding: var(--space-2);
display: none;
}
.nav-item--group[aria-open="true"] .nav-menu { display: block; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu a {
display: block;
padding: 10px 14px;
min-height: 44px;
color: var(--ink);
text-decoration: none;
border-radius: var(--radius-sm);
font-weight: 500;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--paper); color: var(--navy); }
.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav-cta { display: inline-flex; align-items: center; margin-left: var(--space-2); }
.nav-cta-sm {
display: inline-flex;
align-items: center;
padding: 6px 14px;
min-height: 36px;
font-size: 0.9rem;
border-radius: 999px;
background: var(--yellow);
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
.nav-cta-sm:hover, .nav-cta-sm:focus-visible { background: #ffd35c; color: var(--navy); }
@media (min-width: 1024px) {
.nav-cta-sm { display: none; }
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
margin-left: auto;
min-height: 44px;
min-width: 44px;
padding: 10px 12px;
background: none;
border: 2px solid var(--navy);
border-radius: 8px;
color: var(--navy);
cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
display: block;
width: 18px; height: 2px;
background: var(--navy);
position: relative;
content: "";
}
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after { position: absolute; top: 6px; }
.mobile-menu {
border-top: 1px solid var(--line);
background: var(--white);
padding: var(--space-4) var(--space-6) var(--space-8);
max-height: calc(100vh - var(--header-h));
overflow: auto;
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-group__btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 48px;
padding: 12px 8px;
background: none;
border: 0;
border-bottom: 1px solid var(--line);
font: inherit;
font-weight: 600;
color: var(--navy);
cursor: pointer;
text-align: left;
}
.mobile-group__list { padding: 0 0 var(--space-4) var(--space-4); }
.mobile-group__list a {
display: block;
padding: 10px 0;
min-height: 44px;
color: var(--muted);
text-decoration: none;
}
.mobile-group__link {
display: flex;
align-items: center;
min-height: 48px;
padding: 12px 8px;
color: var(--navy);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--line);
}
.mobile-group__link--cta { color: var(--blue); }
.hero {
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: var(--space-12) 0;
}
.hero--home { padding: var(--space-16) 0; }
.hero .lede { max-width: 56ch; color: var(--muted); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-12);
align-items: center;
}
.hero-panes { display: grid; gap: var(--space-4); }
.hero-pane {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 999px;
padding: 0 28px;
min-height: 76px;
text-decoration: none;
transition: transform var(--duration-quick-2) var(--ease-out-2);
}
.hero-pane:hover { transform: translateX(6px); }
.hero-pane__label { font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.hero-pane__detail { font-weight: 500; font-size: 0.9rem; opacity: 1; }
.hero-pane--1 { width: 88%; background: var(--yellow); color: var(--navy); }
.hero-pane--2 { width: 100%; background: var(--yellow); color: var(--navy); }
.hero-pane--3 { width: 76%; background: var(--yellow); color: var(--navy); }
.hero-pane--4 { width: 88%; background: var(--navy); color: var(--white); }
.section { padding: var(--space-12) 0; }
.section--paper { background: var(--paper); }
.section-sub { color: var(--muted); max-width: 60ch; }
.page-hero { padding: var(--space-8) 0 var(--space-6); }
.page-hero .lede { color: var(--muted); max-width: 60ch; }
.closing-cta { background: var(--navy); }
.closing-cta h2 { color: var(--white); }
.closing-cta .cta-support { color: var(--on-navy); }
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
padding: 0;
margin: var(--space-8) 0 0;
list-style: none;
}
.card-grid--list { grid-template-columns: repeat(2, 1fr); }
.card-grid--wide { grid-template-columns: repeat(2, 1fr); }
.service-card a {
display: block;
height: 100%;
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
text-decoration: none;
box-shadow: var(--shadow-flat);
transition: box-shadow var(--duration-quick-2) var(--ease-out-2), transform var(--duration-quick-2) var(--ease-out-2);
}
.service-card a:hover { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.service-card h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.service-card p { margin: 0; color: var(--muted); font-size: 0.97rem; }
.section--paper .service-card a { background: var(--white); }
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
margin-top: var(--space-8);
}
.category-card {
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-6);
background: var(--white);
}
.category-card h3 a { color: var(--navy); text-decoration: none; }
.category-card h3 a:hover { text-decoration: underline; }
.category-card ul { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }
.category-card ul a { color: var(--blue); text-decoration: none; font-weight: 500; }
.category-card ul a:hover { text-decoration: underline; }
.category-card .text-link { font-size: 0.95rem; }
.article-card a {
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
padding: var(--space-6);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-md);
text-decoration: none;
}
.article-card h2, .article-card h3 { font-size: 1.2rem; margin: 0; }
.article-card p { margin: 0; color: var(--muted); }
.article-card__group {
color: var(--muted);
font-weight: 600;
font-size: 0.85rem;
text-transform: none;
letter-spacing: 0.02em;
}
.article-card__date { color: var(--muted); font-size: 0.9rem; margin-top: auto; }
.article-card a:hover { box-shadow: var(--shadow-raised); }
.directory { margin-top: var(--space-6); }
.directory__input {
width: 100%;
min-height: 48px;
padding: 12px 16px;
font: inherit;
color: var(--ink);
background: var(--white);
border: 1.5px solid var(--control-border);
border-radius: 10px;
}
.directory__count { color: var(--muted); font-size: 0.95rem; min-height: 1.6em; margin: var(--space-2) 0 0; }
.directory__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-4); padding: 0; list-style: none; }
.directory--page + [data-directory-groups] .directory-group { margin-top: var(--space-8); }
.directory-group h2 { margin-top: var(--space-8); }
.directory-group .card-grid { margin-top: var(--space-4); }
.directory__empty { color: var(--muted); }
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-8);
margin: var(--space-8) 0 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.steps .step { position: relative; padding-top: var(--space-4); }
.step__rule { display: block; width: 48px; height: 4px; background: var(--navy); margin-bottom: var(--space-4); }
.step:nth-child(2) .step__rule { background: var(--yellow-ui-thin); }
.step:nth-child(3) .step__rule { background: var(--yellow); }
.step h3 { font-size: 1.1rem; }
.step p { color: var(--muted); font-size: 0.97rem; margin: 0; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.panel--plain { background: transparent; border: 0; padding: 0; max-width: 68ch; }
.panel--plain ul, .panel ul { padding-left: 1.2em; margin: 0; display: grid; gap: var(--space-2); }
.panel-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.panel--include { border-top: 4px solid var(--navy); }
.panel--exclude { border-top: 4px solid var(--yellow-ui-thin); }
.panel--include ul, .panel--exclude ul { margin-top: var(--space-3); }
.faq-section { }
.faq-list { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.faq {
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--white);
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
min-height: 44px;
cursor: pointer;
font-weight: 600;
color: var(--navy);
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "";
width: 10px; height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform var(--duration-quick-2) var(--ease-out-2);
flex-shrink: 0;
}
.faq[open] summary::after { transform: rotate(225deg); }
.faq__body { padding: 0 var(--space-6) var(--space-4); }
.faq__body p { margin: 0; color: var(--muted); }
.breadcrumbs { padding: var(--space-4) 0 0; }
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0 var(--space-6);
max-width: var(--content-max);
margin-inline: auto;
list-style: none;
font-size: 0.9rem;
color: var(--muted);
}
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }
.cta-block { margin: var(--space-6) 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.cta-support { margin: 0; color: var(--muted); font-size: 0.95rem; }
.closing-cta .cta-block { align-items: center; text-align: center; }
.site-footer {
border-top: 1px solid var(--line);
background: var(--navy);
color: var(--on-navy);
margin-top: var(--space-16);
padding: var(--space-12) 0 var(--space-8);
}
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-8);
}
.footer-group h3 {
color: var(--white);
font-size: 1rem;
margin-bottom: var(--space-3);
}
.footer-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 0.95rem; }
.footer-bottom {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgb(255 255 255 / 0.15);
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: 0.9rem;
}
.footer-bottom p { margin: 0; }
.footer-legal { color: var(--on-navy); }
.toast {
position: fixed;
bottom: var(--space-6);
left: 50%;
transform: translateX(-50%);
background: var(--navy);
color: var(--white);
padding: var(--space-3) var(--space-6);
border-radius: 999px;
box-shadow: var(--shadow-floating);
z-index: var(--layer-5);
font-size: 0.95rem;
max-width: min(90vw, 40ch);
}
.notice {
background: var(--paper);
border: 1px solid var(--line);
border-left: 4px solid var(--yellow-ui-thin);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-6);
margin: var(--space-6) 0;
}
.notice p { margin: 0; }
.notice code { background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 0.9em; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label { font-weight: 600; }
.input, .select, .textarea {
font: inherit;
color: var(--ink);
background: var(--white);
border: 1.5px solid var(--control-border);
border-radius: 10px;
padding: 12px 14px;
min-height: 44px;
width: 100%;
}
.input:focus, .select:focus, .textarea:focus {
outline: 3px solid var(--navy);
outline-offset: 2px;
border-color: var(--navy);
}
.input--error, .select--error, .textarea--error { border-color: var(--err); }
.field__error { color: var(--err); font-size: 0.9rem; font-weight: 500; }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: 0.6; background: var(--paper); }
dialog.dialog {
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-floating);
padding: var(--space-8);
max-width: min(92vw, 560px);
}
dialog.dialog::backdrop { background: rgb(12 45 87 / 0.5); }
.dialog__close { margin-top: var(--space-6); }
.section--404 { padding: var(--space-24) 0; text-align: center; }
.error-code {
font-family: var(--font-heading);
font-weight: 800;
font-size: clamp(4rem, 12vw, 7rem);
color: var(--line);
margin: 0;
line-height: 1;
}
.error-links { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); padding: 0; list-style: none; }
.error-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 20px;
border: 2px solid var(--navy);
border-radius: 999px;
color: var(--navy);
font-weight: 600;
text-decoration: none;
}
.error-links a:hover { background: var(--navy); color: var(--white); }
.article-meta { color: var(--muted); font-size: 0.95rem; }
.sources { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.sources ul { padding-left: 1.2em; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); margin-top: var(--space-8); }
.why-item h3 { font-size: 1.1rem; }
.why-item p { color: var(--muted); margin: 0; }
@media (max-width: 1023px) {
.site-nav { display: none; }
.nav-toggle { display: inline-flex; }
.hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
.hero-pane__detail { display: inline; }
.card-grid, .card-grid--list, .card-grid--wide { grid-template-columns: repeat(2, 1fr); }
.directory__list { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
.category-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.wrap { padding-inline: var(--space-4); }
.breadcrumbs ol { padding-inline: var(--space-4); }
.section { padding: var(--space-8) 0; }
.hero { padding: var(--space-8) 0; }
.hero--home { padding: var(--space-12) 0; }
.card-grid, .card-grid--list, .card-grid--wide { grid-template-columns: 1fr; }
.directory__list { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; }
.category-grid { grid-template-columns: 1fr; }
.panel-split { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-pane { min-height: 64px; padding: 0 22px; }
.hero-pane__label { font-size: 1.05rem; }
.btn { width: 100%; }
.hero-actions .btn, .cta-block .btn { width: auto; min-width: 200px; }
.header-inner { gap: var(--space-3); }
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: vt-out var(--duration-quick-2) var(--ease-in-2) both;
}
::view-transition-new(root) {
animation: vt-in var(--duration-moderate-1) var(--ease-out-2) both;
}
@keyframes vt-out {
to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-in {
from { opacity: 0; transform: translateY(4px); }
}
.site-header.is-scrolled { box-shadow: var(--shadow-raised); }
@media (max-width: 360px) {
.wrap { padding-inline: var(--space-3); }
body { font-size: 1rem; }
}
body.theme-swiss {
--sw-grad: var(--navy);
--sw-grad-glow: var(--navy);
--sw-page-pad: var(--space-4);
background: var(--white);
}
body.theme-swiss .wrap,
body.theme-swiss .site-header .wrap { max-width: 1280px; padding-inline: var(--space-4); }
body.theme-swiss .breadcrumbs ol { padding-inline: var(--space-4); }
body.theme-swiss h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4.6rem); line-height: 1; letter-spacing: -0.03em; }
body.theme-swiss h2 { font-size: clamp(1.7rem, 2.5vw + 0.8rem, 3rem); letter-spacing: -0.025em; }
body.theme-swiss .section { padding: var(--space-12) 0; }
body.theme-swiss .site-header { background: rgb(255 255 255 / 0.96); }
body.theme-swiss .sw-eyebrow {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin: 0 0 var(--space-3);
color: var(--muted);
font-family: var(--font-body);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.theme-swiss .sw-eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: var(--line);
align-self: center;
}
body.theme-swiss .sw-eyebrow strong { color: var(--navy); }
body.theme-swiss .sw-hero {
position: relative;
overflow: hidden;
background: var(--sw-grad-glow);
padding: var(--space-12) 0;
}
body.theme-swiss .sw-hero__wrap,
body.theme-swiss .sw-hero > .wrap { position: relative; z-index: 1; }
body.theme-swiss .sw-hero__mark {
display: block;
margin: 0 0 var(--space-6);
overflow: visible;
}
body.theme-swiss .sw-hero__mark path {
fill: none;
stroke: var(--yellow);
stroke-width: 14;
stroke-linecap: round;
}
.js-anim .sw-hero__mark path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-anim [data-motion="fade-up"] { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s var(--ease-out-2), transform 0.6s var(--ease-out-2);
}
[data-reveal].is-inview { opacity: 1; transform: none; }
}
[data-reveal] { will-change: opacity, transform; }
body.theme-swiss .sw-hero__eyebrow {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin: 0 0 var(--space-4);
color: var(--on-navy);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.theme-swiss .sw-hero__eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: rgb(255 255 255 / 0.22);
align-self: center;
}
body.theme-swiss .sw-hero__eyebrow strong { color: var(--yellow); }
body.theme-swiss .sw-hero h1 { color: var(--white); }
body.theme-swiss .sw-hero .lede { color: var(--on-navy); max-width: 52ch; font-size: 1.15rem; margin-top: var(--space-6); }
body.theme-swiss .sw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
body.theme-swiss .sw-hero .btn--primary { background: var(--yellow); color: var(--navy); }
body.theme-swiss .sw-hero .btn--primary:hover,
body.theme-swiss .sw-hero .btn--primary:focus-visible { background: var(--white); color: var(--navy); }
body.theme-swiss .sw-hero__ghost {
color: var(--white);
background: transparent;
border: 0;
box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.6);
}
body.theme-swiss .sw-hero__ghost:hover,
body.theme-swiss .sw-hero__ghost:focus-visible { color: var(--navy); background: var(--white); box-shadow: none; }
body.theme-swiss .sw-hero__cards {
display: grid;
gap: var(--space-4);
margin: var(--space-12) 0 0;
padding: 0;
list-style: none;
}
body.theme-swiss .sw-hero__card {
display: block;
padding: 20px var(--space-6);
border: 1px solid rgb(255 255 255 / 0.22);
border-radius: var(--radius-md);
background: rgb(255 255 255 / 0.08);
backdrop-filter: blur(4px);
text-decoration: none;
transition: background-color var(--duration-quick-2) var(--ease-out-2), border-color var(--duration-quick-2) var(--ease-out-2);
}
body.theme-swiss .sw-hero__card:hover,
body.theme-swiss .sw-hero__card:focus-visible { background: rgb(255 255 255 / 0.14); border-color: var(--yellow); }
body.theme-swiss .sw-hero__card-num {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.1rem;
color: var(--yellow);
line-height: 1;
margin-bottom: var(--space-2);
}
body.theme-swiss .sw-hero__card-label {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.2rem;
line-height: 1.15;
color: var(--white);
}
body.theme-swiss .sw-hero__card-detail { display: block; font-weight: 500; font-size: 0.88rem; color: var(--on-navy); }
body.theme-swiss .sw-cat-grid {
display: grid;
gap: 0;
margin-top: var(--space-8);
border-top: 2px solid var(--navy);
}
body.theme-swiss .sw-cat { padding: var(--space-6) 0; border-bottom: var(--sw-rule, 1px solid var(--line)); }
body.theme-swiss .sw-cat h3 a {
color: var(--navy); text-decoration: none;
background-image: linear-gradient(var(--yellow), var(--yellow));
background-repeat: no-repeat;
background-size: 0% 3px;
background-position: 0 100%;
padding-bottom: 2px;
transition: background-size var(--duration-moderate-1) var(--ease-out-2);
}
body.theme-swiss .sw-cat h3 a:hover { background-size: 100% 3px; }
body.theme-swiss .sw-cat ul { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }
body.theme-swiss .sw-cat ul a { color: var(--blue); text-decoration: none; font-weight: 500; }
body.theme-swiss .sw-cat ul a::before { content: "—"; color: var(--yellow-ui-thin); margin-right: 6px; }
body.theme-swiss .sw-cat ul a:hover { color: var(--navy); }
body.theme-swiss .sw-cat .text-link { font-size: 0.95rem; }
body.theme-swiss .sw-searchband {
background: var(--sw-grad);
padding: var(--space-12) 0 var(--space-24);
transition: padding-bottom var(--duration-moderate-1) var(--ease-out-2);
}
body.theme-swiss .sw-searchband:has(.directory--typeahead.is-open) {
padding-bottom: calc(var(--space-24) + min(52vh, 380px));
}
body.theme-swiss .sw-searchband h2 { color: var(--white); }
body.theme-swiss .sw-searchband .section-sub { color: var(--on-navy); }
body.theme-swiss .sw-searchband .text-link { color: var(--yellow); }
body.theme-swiss .sw-searchband .directory__input {
background: var(--white);
border: 0;
border-radius: 6px;
box-shadow: 0 12px 32px rgb(12 45 87 / 35%);
}
body.theme-swiss .sw-searchband .directory__input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }
body.theme-swiss .sw-searchband .service-card a { background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.22); backdrop-filter: blur(4px); }
body.theme-swiss .sw-searchband .service-card a:hover { border-color: var(--yellow); box-shadow: none; transform: none; }
body.theme-swiss .sw-searchband .service-card h3 { color: var(--white); }
body.theme-swiss .sw-searchband .service-card p { color: var(--on-navy); }
body.theme-swiss .sw-searchband .directory__count,
body.theme-swiss .sw-searchband .directory__empty { color: var(--on-navy); }
body.theme-swiss .directory--typeahead {
position: relative;
z-index: var(--layer-4);
max-width: 640px;
margin: var(--space-8) auto 0;
}
body.theme-swiss .directory--typeahead .directory__input { text-align: center; }
body.theme-swiss .directory--typeahead .directory__count { text-align: center; }
body.theme-swiss .directory--typeahead .directory__list {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
right: 0;
z-index: var(--layer-4);
display: none;
grid-template-columns: 1fr;
gap: 0;
margin: 0;
padding: var(--space-2);
list-style: none;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: 0 18px 44px rgb(12 45 87 / 28%);
max-height: min(52vh, 380px);
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--line) transparent;
transform-origin: top center;
}
body.theme-swiss .directory--typeahead.is-open .directory__list { display: grid; }
body.theme-swiss .directory--typeahead .service-card a {
display: flex;
align-items: baseline;
gap: var(--space-3);
background: transparent;
border: 0;
border-radius: 8px;
padding: var(--space-3) var(--space-4);
backdrop-filter: none;
}
body.theme-swiss .directory--typeahead .service-card a::before {
content: "";
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--yellow);
align-self: center;
opacity: 0;
transition: opacity var(--duration-quick-2) var(--ease-out-2);
}
body.theme-swiss .directory--typeahead .service-card a:hover::before,
body.theme-swiss .directory--typeahead .service-card a:focus-visible::before { opacity: 1; }
body.theme-swiss .directory--typeahead .service-card a:hover,
body.theme-swiss .directory--typeahead .service-card a:focus-visible { background: rgb(248 195 49 / 14%); border: 0; transform: none; }
body.theme-swiss .directory--typeahead .service-card h3 { font-size: 1rem; color: var(--navy); }
body.theme-swiss .directory--typeahead .service-card a:hover h3,
body.theme-swiss .directory--typeahead .service-card a:focus-visible h3 { color: var(--navy); }
body.theme-swiss .directory--typeahead .service-card p { display: none; }
body.theme-swiss .sw-steps { display: grid; gap: var(--space-6); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
body.theme-swiss .sw-step { border-top: 2px solid var(--navy); padding-top: var(--space-4); }
body.theme-swiss .sw-step__num {
display: block;
font-family: var(--font-heading);
font-weight: 800;
font-size: 2.6rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--yellow);
margin-bottom: var(--space-3);
}
body.theme-swiss .sw-step h3 { font-size: 1.1rem; }
body.theme-swiss .sw-step p { color: var(--muted); font-size: 0.97rem; margin: 0; }
body.theme-swiss .sw-why-grid { display: grid; gap: 0; margin-top: var(--space-8); border-top: 1px solid var(--line); }
body.theme-swiss .sw-why { padding: var(--space-6) 0; border-bottom: 1px solid var(--line); }
body.theme-swiss .sw-why h3 { font-size: 1.1rem; }
body.theme-swiss .sw-why p { color: var(--muted); margin: 0; }
body.theme-swiss .article-card a { background: var(--white); border: 0; border-top: 2px solid var(--line); border-radius: 0; padding-inline: 0; transition: border-color var(--duration-quick-2) var(--ease-out-2); }
body.theme-swiss .article-card a:hover { border-top-color: var(--yellow); box-shadow: none; }
body.theme-swiss .faq-section .wrap { max-width: min(100% - 2 * var(--space-4), 880px); margin-inline: auto; }
body.theme-swiss .faq-section h2 { text-align: center; }
body.theme-swiss .faq-list {
width: fit-content;
max-width: min(100%, 820px);
margin-inline: auto;
background: var(--white);
border: 0;
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-12);
box-shadow: 0 16px 40px rgb(12 45 87 / 8%);
}
body.theme-swiss .faq { border: 0; border-radius: 0; padding: var(--space-2) 0; }
body.theme-swiss .faq summary { padding-inline: 0; justify-content: center; gap: var(--space-3); }
body.theme-swiss .faq__body { padding: 0 0 var(--space-4); }
body.theme-swiss .faq__body p { color: var(--muted); max-width: 68ch; margin-inline: auto; text-align: justify; }
body.theme-swiss .sw-closing {
background: var(--sw-grad-glow);
text-align: left;
padding: var(--space-16) 0;
}
body.theme-swiss .sw-closing h2 { color: var(--white); font-size: clamp(1.9rem, 3vw + 0.8rem, 3.2rem); max-width: 24ch; }
body.theme-swiss .sw-closing .cta-block { align-items: flex-start; }
body.theme-swiss .sw-closing .cta-support { color: var(--on-navy); }
body.theme-swiss .sw-closing .btn--primary { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
body.theme-swiss .native-enquiry-host {
margin-top: var(--space-8);
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-6);
box-shadow: 0 24px 60px rgb(0 0 0 / 28%);
max-width: 640px;
}
body.theme-swiss .native-enquiry { display: grid; gap: var(--space-4); }
body.theme-swiss .native-enquiry .field--check label {
display: flex;
gap: var(--space-3);
align-items: flex-start;
font-weight: 500;
font-size: 0.95rem;
color: var(--muted);
}
body.theme-swiss .native-enquiry .field--check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--navy); }
body.theme-swiss .native-enquiry .cta-support { margin: 0; }
body.theme-swiss .native-enquiry__done h3 { color: var(--navy); }
body.theme-swiss .native-enquiry__done p { color: var(--muted); margin: 0; }
body.theme-swiss .native-enquiry .input,
body.theme-swiss .native-enquiry .select,
body.theme-swiss .native-enquiry .textarea { background: var(--white); }
.hp-field {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
}
body.theme-swiss .site-footer { margin-top: 0; }
@media (min-width: 640px) {
body.theme-swiss { --sw-page-pad: var(--space-6); }
body.theme-swiss .sw-step__num {
color: var(--yellow);
font-size: 3.2rem;
}
body.theme-swiss .sw-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
body.theme-swiss .sw-hero__cards { grid-template-columns: repeat(2, 1fr); }
body.theme-swiss .sw-why-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
body.theme-swiss .sw-why:nth-child(odd) { border-right: 1px solid var(--line); padding-right: var(--space-8); }
body.theme-swiss .sw-why:nth-child(even) { padding-left: var(--space-8); }
body.theme-swiss .sw-cat-grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); }
body.theme-swiss .sw-cat:nth-child(odd) { border-right: 1px solid var(--line); padding-right: var(--space-6); }
body.theme-swiss .sw-cat:nth-child(even) { padding-left: var(--space-6); }
}
@media (min-width: 1024px) {
body.theme-swiss { --sw-page-pad: var(--space-8); }
body.theme-swiss .sw-hero { padding: var(--space-24) 0; }
body.theme-swiss .sw-hero__cards { grid-template-columns: repeat(4, 1fr); }
body.theme-swiss .sw-cat-grid { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
body.theme-swiss .sw-cat {
border-bottom: 0;
border-right: 1px solid var(--line);
padding: var(--space-6) var(--space-6) var(--space-6) 0;
}
body.theme-swiss .sw-cat:nth-child(odd) { border-right: 1px solid var(--line); }
body.theme-swiss .sw-cat:first-child { padding-left: 0; }
body.theme-swiss .sw-cat:last-child { border-right: 0; padding-right: 0; }
body.theme-swiss .sw-cat:nth-child(even) { padding-left: var(--space-6); }
body.theme-swiss .sw-cat:nth-child(3) { padding-left: var(--space-6); }
body.theme-swiss .sw-steps { grid-template-columns: repeat(4, 1fr); }
body.theme-swiss .sw-closing { padding: var(--space-24) 0; }
body.theme-swiss .section { padding: var(--space-24) 0; }
}
@media (min-width: 1440px) {
body.theme-swiss { --sw-page-pad: var(--space-12); }
}