:root {
color-scheme: light;
--radius-s: 12px;
--radius-m: 20px;
--radius-l: 28px;
--radius-pill: 999px;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: clamp(2.5rem, 1.75rem + 2.5vw, 3.5rem);
--space-8: clamp(3.5rem, 2rem + 6vw, 7rem);
--container: 72rem;
--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
--duration-press: 100ms;
--duration-fast: 160ms;
--duration-page: 200ms;
--duration: 240ms;
--duration-slow: 320ms;
--press: 0.97;
--press-small: 0.94;
--icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 9v5' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.2' r='1.1'/%3E%3C/svg%3E");
--icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='m6.4 10.3 2.4 2.4 4.8-5.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M10 5.8v5' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.9' r='1.1'/%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2356635d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
} body {
--color-bg: var(--wp--preset--color--bg);
--color-surface: var(--wp--preset--color--surface);
--color-surface-alt: var(--wp--preset--color--surface-alt);
--color-ink: var(--wp--preset--color--ink);
--color-on-ink: var(--wp--preset--color--on-ink);
--color-text: var(--wp--preset--color--text);
--color-muted: var(--wp--preset--color--muted);
--color-border: var(--wp--preset--color--border);
--color-primary: var(--wp--preset--color--primary);
--color-primary-strong: var(--wp--preset--color--primary-strong);
--color-primary-soft: var(--wp--preset--color--primary-soft);
--color-on-primary: var(--wp--preset--color--on-primary);
--color-accent: var(--wp--preset--color--accent);
--color-accent-strong: var(--wp--preset--color--accent-strong);
--color-accent-soft: var(--wp--preset--color--accent-soft);
--color-on-ink-muted: var(--wp--custom--color--on-ink-muted);
--color-text-soft: var(--wp--custom--color--text-soft);
--color-border-strong: var(--wp--custom--color--border-strong);
--color-control: var(--wp--custom--color--control);
--color-link: var(--wp--custom--color--link);
--color-success: var(--wp--custom--color--success);
--color-success-soft: var(--wp--custom--color--success-soft);
--color-error: var(--wp--custom--color--error);
--color-error-strong: var(--wp--custom--color--error-strong);
--color-error-soft: var(--wp--custom--color--error-soft);
--color-info: var(--wp--custom--color--info);
--color-info-soft: var(--wp--custom--color--info-soft);
--color-warning: var(--wp--custom--color--warning);
--color-warning-soft: var(--wp--custom--color--warning-soft);
--color-focus: var(--wp--custom--color--focus);
--color-invalid-bg: var(--wp--custom--color--invalid-bg); --tint: var(--wp--custom--tint);
--shade: var(--wp--custom--shade);
--primary-shade: var(--wp--custom--primary-shade);
--ripple: var(--wp--custom--ripple);
--shadow-s: 0 1px 2px rgb(var(--shade) / 0.04), 0 2px 8px rgb(var(--shade) / 0.04);
--shadow-m: 0 2px 6px rgb(var(--shade) / 0.05), 0 18px 40px -14px rgb(var(--shade) / 0.18);
--shadow-l: 0 4px 12px rgb(var(--shade) / 0.06), 0 32px 80px -24px rgb(var(--shade) / 0.3);
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: 5.5rem;
}
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-kerning: normal;
overflow-wrap: break-word;
} .wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
.wp-site-blocks > * {
margin-block: 0;
}
.wp-site-blocks > main {
flex: 1;
}
h1,
h2,
h3 {
margin: 0;
font-weight: 560;
line-height: 1.15;
letter-spacing: -0.02em;
text-wrap: balance;
}
h1 {
font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
line-height: 1.08;
letter-spacing: -0.03em;
}
h2 {
font-size: clamp(1.625rem, 1.3rem + 1.35vw, 2.5rem);
}
h3 {
font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
}
p,
dl,
figure,
blockquote {
margin: 0;
}
:where(ul, ol) {
margin: 0;
}
p {
text-wrap: pretty;
}
:where(a) {
color: var(--color-link);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
transition:
color var(--duration-fast) var(--ease-out),
text-decoration-color var(--duration-fast) var(--ease-out);
}
:where(a:hover) {
color: var(--color-text);
text-decoration-color: initial;
}
img,
svg {
max-width: 100%;
}
::selection {
background: color-mix(in srgb, var(--color-primary) 26%, transparent);
}
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link:focus {
border-radius: var(--radius-pill);
background: var(--color-ink);
color: var(--color-on-ink);
font-weight: 600;
} .container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--space-8);
}
.wp-site-blocks :is(main, .wp-block-post-content) > :is(.section, .hero) {
margin-block: 0;
}
.section--alt {
background: var(--color-surface-alt);
}
.stack > * + * {
margin-top: var(--space-4);
}
.stack > .eyebrow + * {
margin-top: var(--space-2);
}
.stack > * + :is(.grid, .split, .steps),
.stack > .steps + *,
.stack > * + .sbk {
margin-top: var(--space-6);
} .wp-block-group:is(.split, .grid, .hero__inner, .hero__panel, .card, .brand, .site-header__inner, .site-header__end, .header-tools, .site-footer__inner, .site-footer__brand, .site-footer__contact, .site-footer__legal, .contact-list, .contact-list > *, .about-portrait) > * {
margin-block: 0;
}
.grid {
display: grid;
gap: clamp(1rem, 0.6rem + 1.5vw, 1.5rem);
}
.grid--2 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.grid--3 {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 1rem + 4vw, 4.5rem);
align-items: start;
}
@media (min-width: 56rem) {
.split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.eyebrow {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-primary-strong);
}
.eyebrow::before {
content: "";
flex: none;
width: 1.5rem;
height: 1px;
background: currentColor;
}
.lead {
font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
line-height: 1.6;
color: var(--color-muted);
max-width: 60ch;
}
.muted {
color: var(--color-muted);
}
.prose {
max-width: 65ch;
}
.prose > * + * {
margin-top: 1em;
} .site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--color-bg) 78%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 1px rgb(var(--tint) / 7%);
view-transition-name: site-header;
}
.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) {
.admin-bar .site-header {
top: 0;
}
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
min-height: 4.25rem;
padding-block: var(--space-2);
}
.brand {
position: relative;
display: inline-grid;
grid-template-columns: auto minmax(0, auto);
align-items: center;
column-gap: clamp(0.5rem, 0.3rem + 1vw, 0.75rem);
min-width: 0;
margin-right: auto;
line-height: 1.2;
}
.brand::before {
content: "";
grid-row: 1 / 3;
width: clamp(2rem, 1.6rem + 1.5vw, 2.375rem);
aspect-ratio: 1;
background: url(//sisetunne.ee/wp-content/themes/docraz/assets/icons/favicon.svg) 50% / contain no-repeat;
}
.brand__name,
.brand .wp-block-site-title {
font-size: 1.0625rem;
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1.2;
}
.brand .wp-block-site-title a {
color: var(--color-text);
text-decoration: none;
} .brand .wp-block-site-title a::after {
content: "";
position: absolute;
inset: 0;
}
.brand__tagline {
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
color: var(--color-muted);
} .site-header .wp-block-navigation,
.site-header__end,
.header-tools {
flex: none;
}
.site-header__end {
display: flex;
align-items: center;
gap: var(--space-2) var(--space-4);
}
.header-tools {
display: flex;
align-items: center;
gap: var(--space-2);
} .site-header .wp-block-navigation {
gap: var(--space-2) var(--space-5);
}
.site-header .wp-block-navigation__container,
.site-header .wp-block-navigation .wp-block-page-list {
gap: 0.125rem;
}
.site-header .wp-block-navigation-item__content {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding: 0.5rem 0.875rem;
border-radius: var(--radius-pill);
color: var(--color-text);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
background: rgb(var(--tint) / 5%);
color: var(--color-text);
}
.site-header .wp-block-navigation-item__content:active {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.site-header .wp-block-navigation .wp-block-navigation-item__content:is([aria-current="page"], .current-menu-item > *) {
background: var(--color-primary-soft);
color: var(--color-primary-strong);
font-weight: 600;
} .site-header .wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content,
.site-header .wp-block-navigation .nav__link--cta > .wp-block-navigation-item__content {
margin-left: var(--space-2);
padding-inline: 1.125rem;
background: var(--color-primary);
color: var(--color-on-primary);
font-weight: 600;
box-shadow:
inset 0 1px rgb(255 255 255 / 0.14),
0 1px 2px rgb(var(--shade) / 0.16);
}
.site-header .wp-block-navigation :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content:is(:hover, [aria-current="page"]),
.site-header .wp-block-navigation .nav__link--cta > .wp-block-navigation-item__content:is(:hover, [aria-current="page"]) {
background: var(--color-primary-strong);
color: var(--color-on-primary);
} .site-header .wp-block-navigation__responsive-container-open {
display: none;
}
@media (max-width: 59.999rem) {
.site-header__inner {
flex-wrap: nowrap;
column-gap: var(--space-2);
}
.site-header__end {
display: contents;
}
.site-header .wp-block-navigation {
order: 3;
}
.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.5rem 1rem 0.5rem 0.8125rem;
border: 1px solid rgb(var(--tint) / 0.14);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--color-surface) 70%, transparent);
color: var(--color-text);
font: inherit;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
} .site-header .wp-block-navigation__responsive-container-open::before {
content: "";
width: 1.125rem;
height: 0.625rem;
background:
linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 65% 2px no-repeat;
border-radius: 2px;
}
.site-header .wp-block-navigation__responsive-container-open svg {
display: none;
}
.site-header .wp-block-navigation__responsive-container-open:hover {
background: var(--color-surface);
border-color: rgb(var(--tint) / 0.28);
}
.site-header .wp-block-navigation__responsive-container-open:active {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
position: fixed;
inset: 0.625rem 0.625rem auto auto;
width: min(24rem, 100% - 1.25rem);
max-height: calc(100dvh - 1.25rem);
overflow-y: auto;
padding: var(--space-3) var(--space-3) var(--space-5);
border-radius: var(--radius-l);
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
color: var(--color-text);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%); box-shadow:
var(--shadow-l),
inset 0 0 0 1px rgb(255 255 255 / calc(0.7 * var(--wp--custom--glass, 1))),
0 0 0 100vmax rgb(var(--shade) / 0.22);
transform-origin: top right;
animation: none;
transition:
opacity var(--duration-fast) var(--ease-out),
transform var(--duration-slow) var(--ease-spring);
}
@starting-style {
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
opacity: 0;
transform: translateY(-0.5rem) scale(0.96);
}
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
position: relative;
margin: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-4);
padding-top: 3.5rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
top: 0;
right: 0;
font-size: 0;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 50%;
background: rgb(var(--tint) / 6%);
color: var(--color-text);
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-out);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
background: rgb(var(--tint) / 0.11);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
display: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
content: "";
grid-area: 1 / 1;
width: 1.125rem;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: rotate(45deg);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
transform: rotate(-45deg);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content :is(.wp-block-navigation__container, .wp-block-page-list) {
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
align-items: stretch;
width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
display: flex;
width: 100%;
justify-content: flex-start;
min-height: 3rem;
padding: 0.625rem 1rem;
border-radius: var(--radius-s);
font-size: 1.125rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-page-list) > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .nav__link--cta > .wp-block-navigation-item__content {
justify-content: center;
margin: var(--space-3) 0 0;
border-radius: var(--radius-pill);
font-size: 1rem;
}
}
@media (max-width: 29.999rem) { .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
width: 2.75rem;
justify-content: center;
padding: 0;
font-size: 0;
} .site-header__inner {
flex-wrap: wrap;
}
.header-tools {
margin-left: auto;
}
:root[data-theme] .theme-toggle {
position: relative;
width: 2.25rem;
}
.theme-toggle::after {
content: "";
position: absolute;
inset: 0 -4px;
}
} .theme-toggle {
display: none;
}
:root[data-theme] .theme-toggle {
display: inline-grid;
flex: none;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-muted);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover {
background: rgb(var(--tint) / 6%);
color: var(--color-text);
}
.theme-toggle:active {
transform: scale(var(--press-small));
transition-duration: var(--duration-press);
}
.theme-toggle svg {
width: 1.25rem;
height: 1.25rem;
transition: transform var(--duration-slow) var(--ease-out);
}
.theme-toggle[aria-pressed="true"] svg {
transform: rotate(180deg);
} ul.lang-switch {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 2px;
margin: 0;
padding: 3px;
border-radius: var(--radius-pill);
background: rgb(var(--tint) / 6%);
list-style: none;
}
.lang-switch li {
margin: 0;
list-style: none;
}
.lang-switch .lang-switch__link {
position: relative;
display: inline-grid;
place-items: center;
min-width: 2.25rem;
min-height: 1.875rem;
padding: 0 0.5rem;
border-radius: var(--radius-pill);
color: var(--color-muted);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
} @media (pointer: coarse) {
.lang-switch .lang-switch__link {
min-width: 2.75rem;
}
.lang-switch .lang-switch__link::after {
content: "";
position: absolute;
inset: -7px -1px;
}
}
.lang-switch .lang-switch__link:hover {
color: var(--color-text);
}
.lang-switch .lang-switch__link:active {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.lang-switch .lang-switch__link[aria-current]:not([aria-current="false"]) {
background: var(--color-surface);
color: var(--color-text);
font-weight: 600;
text-decoration: none;
box-shadow:
0 1px 2px rgb(var(--shade) / 0.14),
0 0 0 0.5px rgb(var(--tint) / 8%);
view-transition-name: lang-current;
} .site-footer {
margin-top: auto;
background: var(--color-ink);
color: var(--color-on-ink);
padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--space-5);
font-size: 0.9375rem;
}
.site-footer a {
color: inherit;
text-decoration-color: rgb(235 230 221 / 0.35);
}
.site-footer a:hover {
color: #fff;
text-decoration-color: initial;
}
.site-footer :focus-visible {
outline-color: var(--color-on-ink);
}
.site-footer__inner {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.site-footer__brand {
display: grid;
align-content: start;
justify-items: start;
gap: 0.125rem;
}
.site-footer__brand::before {
content: "";
width: 2.5rem;
aspect-ratio: 1;
margin-bottom: var(--space-3);
background: url(//sisetunne.ee/wp-content/themes/docraz/assets/icons/favicon.svg) 50% / contain no-repeat;
}
.site-footer .brand__tagline {
color: var(--color-on-ink-muted);
}
.site-footer__contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
font-style: normal;
}
.site-footer__nav .wp-block-navigation__container,
.site-footer__nav .wp-block-page-list {
display: grid;
justify-items: start;
gap: var(--space-2);
}
.site-footer__nav .wp-block-navigation-item__content {
text-decoration: none;
}
.site-footer__nav .wp-block-navigation-item__content:hover {
text-decoration: underline;
}
.site-footer__nav [aria-current="page"] {
color: #fff;
font-weight: 600;
}
.site-footer .site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-2) var(--space-5);
margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
padding-top: var(--space-5);
background: linear-gradient(rgb(235 230 221 / 0.14), rgb(235 230 221 / 0.14)) 50% 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
font-size: 0.8125rem;
color: var(--color-on-ink-muted);
} .hero {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--color-bg);
padding-block: clamp(2.5rem, 1rem + 7vw, 7.5rem) clamp(3rem, 1rem + 6vw, 6.5rem);
}
.hero::before,
.hero::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
}
.hero::before {
inset: -25% -15%;
background:
radial-gradient(34% 44% at 26% 36%, rgb(169 196 178 / 0.9), transparent 70%),
radial-gradient(28% 38% at 76% 30%, rgb(233 191 166 / 0.85), transparent 70%),
radial-gradient(32% 40% at 62% 74%, rgb(201 193 234 / 0.9), transparent 70%),
radial-gradient(24% 32% at 36% 76%, rgb(239 220 184 / 0.8), transparent 70%);
-webkit-mask-image: linear-gradient(#000 50%, transparent 75%);
mask-image: linear-gradient(#000 50%, transparent 75%);
opacity: var(--wp--custom--blob, 1);
animation: hero-drift 48s ease-in-out infinite alternate;
}
.hero::after {
inset: 0;
background: repeating-radial-gradient(ellipse 130% 100% at 72% 42%, transparent 0 30px, var(--ripple) 31px, transparent 32.5px);
-webkit-mask-image: radial-gradient(55% 62% at 72% 42%, #000 20%, transparent 70%);
mask-image: radial-gradient(55% 62% at 72% 42%, #000 20%, transparent 70%);
animation: hero-ripple 40s ease-in-out infinite alternate;
}
@keyframes hero-drift {
0% {
transform: translate3d(0, 0, 0) rotate(0) scale(1);
}
50% {
transform: translate3d(3%, -3%, 0) rotate(5deg) scale(1.06);
}
100% {
transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(1.02);
}
}
@keyframes hero-ripple {
to {
transform: scale(1.1);
}
}
.hero:has(.lg-root)::before,
.hero:has(.lg-root)::after {
animation-play-state: paused;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: start;
}
.hero__panel,
.hero__inner > .lg-root {
width: 100%;
max-width: 46rem;
}
.hero__panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: start;
gap: var(--space-4);
padding: clamp(1.5rem, 0.9rem + 3vw, 3.5rem);
border-radius: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
background: color-mix(in srgb, var(--color-surface) 34%, transparent);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
box-shadow:
inset 0 1px rgb(255 255 255 / calc(0.8 * var(--wp--custom--glass, 1))),
inset 0 0 0 1px rgb(255 255 255 / calc(0.5 * var(--wp--custom--glass, 1))),
0 1px 2px rgb(var(--shade) / 5%),
0 30px 70px -30px rgb(var(--shade) / 0.35);
}
.hero__inner .lg-glass {
box-shadow:
0 1px 2px rgb(var(--shade) / 5%),
0 30px 70px -30px rgb(var(--shade) / 0.35) !important;
}
.hero__inner :is(.lg-overlight, .lg-overlight-blend) {
display: none;
}
.lg-content > .hero__panel {
max-width: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: inset 0 1px rgb(255 255 255 / calc(0.6 * var(--wp--custom--glass, 1)));
}
.hero__title {
font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
font-weight: 520;
line-height: 1.04;
letter-spacing: -0.035em;
}
.hero__lead {
max-width: 48ch;
font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
line-height: 1.6;
color: var(--color-text-soft);
}
.wp-block-buttons:is(.hero__actions, .btn-row) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.wp-block-buttons.hero__actions {
gap: var(--space-3);
margin-top: var(--space-3);
}
.hero__actions > :is(.btn, .wp-block-button) {
flex: auto;
}
.hero__actions > .wp-block-button > .wp-block-button__link {
width: 100%;
}
@media (min-width: 30rem) {
.hero__actions > :is(.btn, .wp-block-button) {
flex: initial;
}
} .btn,
.wp-block-button .wp-block-button__link,
.wp-block-search__button.wp-element-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 2.875rem;
padding: 0.625rem 1.375rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: transparent;
color: var(--color-text);
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.005em;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
:is(.btn, .wp-block-button .wp-block-button__link, .wp-block-search__button.wp-element-button):active {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.btn:disabled {
opacity: 0.85;
cursor: progress;
}
.btn--primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.wp-block-search__button.wp-element-button {
background: var(--color-primary);
color: var(--color-on-primary);
box-shadow:
inset 0 1px rgb(255 255 255 / 0.14),
0 1px 2px rgb(var(--shade) / 0.16),
0 6px 16px -8px rgb(var(--primary-shade) / 0.6);
}
.btn--primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wp-block-search__button.wp-element-button:hover {
background: var(--color-primary-strong);
color: var(--color-on-primary);
}
.btn--secondary,
:root .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
padding: 0.625rem 1.375rem;
border: 1px solid rgb(var(--tint) / 0.16);
background: var(--color-surface);
color: var(--color-text);
box-shadow: 0 1px 2px rgb(var(--shade) / 6%);
}
.btn--secondary:hover,
:root .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
border-color: rgb(var(--tint) / 0.42);
color: var(--color-text);
}
.btn--ghost {
color: var(--color-text);
border-color: rgb(var(--tint) / 0.16);
}
.btn--ghost:hover {
background: rgb(var(--tint) / 5%);
color: var(--color-text);
}
.btn--danger {
background: var(--color-error);
color: var(--color-on-primary);
}
.btn--danger:hover {
background: var(--color-error-strong);
color: var(--color-on-primary);
}
.btn--small {
min-height: 2.25rem;
padding: 0.375rem 0.875rem;
font-size: 0.8125rem;
}
@media (pointer: coarse) {
.btn--small {
min-height: 2.75rem;
}
}
.btn-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
} .card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
box-shadow: var(--shadow-s);
}
.card--link {
position: relative;
color: inherit;
text-decoration: none;
transition:
transform var(--duration) var(--ease-out),
border-color var(--duration) var(--ease-out);
}
.card--link::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: var(--shadow-m);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration) var(--ease-out);
}
.card--link:hover {
color: inherit;
border-color: var(--color-border-strong);
}
.card--link:hover::after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.card--link:hover {
transform: translateY(-3px);
}
.card--link:active {
transform: translateY(-1px);
transition-duration: var(--duration-press);
}
}
.card__title {
font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);
transition: color var(--duration-fast) var(--ease-out);
}
.card--link:hover .card__title {
color: var(--color-primary-strong);
}
.card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 0.75rem;
color: var(--color-muted);
font-size: 0.875rem;
}
.card__meta > * + *::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin-right: 0.75rem;
border-radius: 50%;
background: currentColor;
vertical-align: middle;
}
.card__body {
color: var(--color-muted);
}
.card__body > * {
margin: 0;
}
.card__body > * + * {
margin-top: 0.75em;
}
.card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.price {
font-weight: 650;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.duration {
color: var(--color-muted);
font-variant-numeric: tabular-nums;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375em;
min-width: 1.5rem;
padding: 0.125rem 0.5rem;
border-radius: var(--radius-pill);
background: rgb(var(--tint) / 8%);
color: var(--color-text);
font-size: 0.75rem;
font-weight: 650;
line-height: 1.4;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.btn--primary .badge {
background: rgb(255 255 255 / 0.22);
color: inherit;
}
.badge--pending,
.badge--confirmed,
.badge--cancelled {
padding-inline: 0.625rem;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.badge--pending::before,
.badge--confirmed::before,
.badge--cancelled::before {
content: "";
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: currentColor;
}
.badge--pending {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.badge--confirmed {
background: var(--color-success-soft);
color: var(--color-success);
}
.badge--cancelled {
background: var(--color-error-soft);
color: var(--color-error);
}
.alert {
--alert-icon: var(--icon-info);
position: relative;
padding: 0.875rem 1rem 0.875rem 2.875rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-s);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.9375rem;
line-height: 1.55;
}
.alert::before {
content: "";
position: absolute;
left: 1rem;
top: 1.0625rem;
width: 1.125rem;
height: 1.125rem;
background: currentColor;
-webkit-mask: var(--alert-icon) center / contain no-repeat;
mask: var(--alert-icon) center / contain no-repeat;
}
.alert > * + * {
margin-top: 0.5rem;
}
.alert ul {
display: grid;
gap: 0.25rem;
padding: 0;
list-style: none;
}
.alert a {
color: inherit;
font-weight: 600;
text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.alert a:hover {
color: inherit;
text-decoration-color: initial;
}
.alert:focus-visible {
outline-color: currentColor;
}
.alert--success {
--alert-icon: var(--icon-success);
border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
background: var(--color-success-soft);
color: var(--color-success);
}
.alert--error {
--alert-icon: var(--icon-error);
border-color: color-mix(in srgb, var(--color-error) 25%, transparent);
background: var(--color-error-soft);
color: var(--color-error);
}
.alert--info {
border-color: color-mix(in srgb, var(--color-info) 22%, transparent);
background: var(--color-info-soft);
color: var(--color-info);
}
.empty {
padding: clamp(1.5rem, 1rem + 3vw, 2.5rem);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-m);
background: color-mix(in srgb, var(--color-surface) 50%, transparent);
color: var(--color-muted);
text-align: center;
} .form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
}
.form--narrow {
max-width: 34rem;
}
.form__row {
display: grid;
gap: var(--space-5) var(--space-4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
align-items: start;
}
.form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-2);
}
.field {
display: grid;
align-content: start;
gap: 0.375rem;
}
.field__label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
}
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea) {
max-width: 100%;
min-height: 3rem;
padding: 0.6875rem 0.9375rem;
border: 1px solid var(--color-control);
border-radius: var(--radius-s);
background-color: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 1rem;
line-height: 1.4;
transition: border-color var(--duration-fast) var(--ease-out);
}
.field :where(input, select, textarea) {
width: 100%;
}
.field :where(input, select, textarea, fieldset) {
scroll-margin-top: 6rem;
}
:where(input, select, textarea):hover {
border-color: var(--color-text-soft);
}
:where(input, select, textarea):focus-visible {
outline-offset: 1px;
border-color: var(--color-focus);
}
:where(input, textarea)::placeholder {
color: var(--color-muted);
opacity: 1;
}
:where(input, select, textarea):disabled {
background-color: var(--color-surface-alt);
color: var(--color-muted);
cursor: not-allowed;
}
:where(select:not([multiple], [size])) {
padding-right: 2.75rem;
background-image: var(--icon-chevron);
background-position: right 0.875rem center;
background-size: 1rem;
background-repeat: no-repeat;
-webkit-appearance: none;
appearance: none;
}
:where(textarea) {
min-height: 8rem;
resize: vertical;
field-sizing: content;
}
:where(input[type="checkbox"], input[type="radio"]) {
accent-color: var(--color-primary);
}
.field--checkbox {
grid-template-columns: auto 1fr;
align-items: start;
column-gap: 0.75rem;
}
.field--checkbox input {
width: 1.25rem;
height: 1.25rem;
margin: 0.15rem 0 0;
cursor: pointer;
transition: transform var(--duration-fast) var(--ease-out);
}
.field--checkbox input:active {
transform: scale(var(--press-small));
transition-duration: var(--duration-press);
}
.field--checkbox label {
font-size: 0.9375rem;
cursor: pointer;
}
.field--checkbox .field__hint,
.field--checkbox .field__error {
grid-column: 2;
}
.field__hint {
font-size: 0.8125rem;
color: var(--color-muted);
}
.field__error {
display: flex;
align-items: flex-start;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-error);
}
.field__error::before {
content: "";
flex: none;
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
background: currentColor;
-webkit-mask: var(--icon-error) center / contain no-repeat;
mask: var(--icon-error) center / contain no-repeat;
}
.field--invalid :is(input, select, textarea),
:where(input, select, textarea)[aria-invalid="true"] {
border-color: var(--color-error);
background-color: var(--color-invalid-bg);
}
.field--invalid :is(input, select, textarea):focus-visible {
outline-color: var(--color-error);
}
.honeypot {
position: absolute;
left: -1e4px;
width: 1px;
height: 1px;
overflow: hidden;
} .steps {
display: flex;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.step {
counter-increment: step;
flex: 1;
min-width: 0;
padding-top: 0.625rem;
border-top: 3px solid var(--color-border-strong);
color: var(--color-muted);
font-size: 0.75rem;
font-weight: 500;
line-height: 1.35;
hyphens: auto;
overflow-wrap: anywhere;
}
.step::before {
content: counter(step) "\00a0\00a0";
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.step--done {
border-color: var(--color-primary);
color: var(--color-text);
}
.step--current {
border-color: var(--color-primary-strong);
color: var(--color-text);
font-weight: 650;
}
@media (min-width: 36rem) {
.step {
font-size: 0.875rem;
}
}
.calendar {
padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-m);
box-shadow: var(--shadow-s);
}
.calendar__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.calendar__title {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: capitalize;
}
.calendar__nav {
display: flex;
gap: var(--space-1);
}
.calendar__nav .btn {
min-width: 2.25rem;
padding-inline: 0.5rem;
}
@media (pointer: coarse) {
.calendar__nav .btn {
min-width: 2.75rem;
}
}
.calendar__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.25rem;
text-align: center;
}
.calendar__weekday {
padding-block: 0.25rem 0.5rem;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
}
.calendar__day {
display: grid;
place-items: center;
width: 100%;
max-width: 3rem;
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
color: var(--color-muted);
font-size: 0.9375rem;
font-variant-numeric: tabular-nums;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.calendar__day--available {
background: var(--color-primary-soft);
color: var(--color-primary-strong);
font-weight: 650;
}
a.calendar__day:hover {
background: var(--color-primary);
color: var(--color-on-primary);
}
a.calendar__day:active {
transform: scale(var(--press-small));
transition-duration: var(--duration-press);
}
.calendar__day--selected,
.calendar__day--selected:hover {
background: var(--color-primary-strong);
color: var(--color-on-primary);
box-shadow: 0 6px 14px -6px rgb(var(--primary-shade) / 0.7);
}
.calendar__day--today {
box-shadow: inset 0 0 0 2px var(--color-accent);
}
.calendar__day--today.calendar__day--selected {
box-shadow:
inset 0 0 0 2px var(--color-accent),
0 6px 14px -6px rgb(var(--primary-shade) / 0.7);
}
.calendar__day--disabled {
color: color-mix(in srgb, var(--color-muted) 55%, transparent);
}
.slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
gap: var(--space-2);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.slots legend {
margin-bottom: var(--space-3);
padding: 0;
font-size: 0.9375rem;
font-weight: 600;
}
.slot {
position: relative;
display: block;
}
.slot input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.slot span {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-control);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: 0.9375rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
pointer-events: none;
transition:
background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.slot span::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
box-shadow: 0 6px 14px -6px rgb(var(--primary-shade) / 0.7);
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.slot:hover input:not(:checked) + span {
border-color: var(--color-primary-strong);
background: var(--color-primary-soft);
}
.slot input:active + span {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.slot input:checked + span {
background: var(--color-primary-strong);
border-color: var(--color-primary-strong);
color: var(--color-on-primary);
}
.slot input:checked + span::after {
opacity: 1;
}
.slot input:focus-visible + span {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
.summary {
display: grid;
grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
max-width: 40rem;
}
.summary dt,
.summary dd {
padding-block: 0.75rem;
border-top: 1px solid var(--color-border);
}
.summary dt:first-of-type,
.summary dt:first-of-type + dd {
padding-top: 0;
border-top: 0;
}
.summary dt {
padding-right: var(--space-5);
color: var(--color-muted);
font-size: 0.9375rem;
}
.summary dd {
margin: 0;
font-weight: 600;
} .contact-list {
display: grid;
padding: 0;
list-style: none;
}
.contact-list > * {
display: grid;
gap: 0.125rem;
padding-block: 0.875rem;
border-top: 1px solid var(--color-border);
}
.contact-list > :first-child {
padding-top: 0;
border-top: 0;
}
a[href^="tel:"] {
white-space: nowrap;
}
a[href^="mailto:"] {
overflow-wrap: anywhere;
}
.home-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: home-step;
}
.home-steps > * {
counter-increment: home-step;
}
.home-steps > *::before {
content: counter(home-step);
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-accent-soft);
color: var(--color-accent-strong);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.home-cta {
background:
radial-gradient(36rem 22rem at 12% 0%, rgb(169 196 178 / calc(0.4 * var(--wp--custom--blob, 1))), transparent 70%),
radial-gradient(36rem 22rem at 88% 100%, rgb(201 193 234 / calc(0.45 * var(--wp--custom--blob, 1))), transparent 70%),
var(--color-surface-alt);
text-align: center;
}
.home-cta :is(.lead, h2) {
margin-inline: auto;
}
.home-cta .wp-block-buttons {
justify-content: center;
}
.about-portrait {
display: grid;
place-items: center;
justify-self: center;
width: 100%;
max-width: 26rem;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-l);
background:
radial-gradient(60% 55% at 28% 30%, rgb(169 196 178 / calc(0.95 * var(--wp--custom--blob, 1))), transparent 75%),
radial-gradient(55% 50% at 78% 38%, rgb(233 191 166 / calc(0.85 * var(--wp--custom--blob, 1))), transparent 75%),
radial-gradient(60% 55% at 55% 85%, rgb(201 193 234 / calc(0.95 * var(--wp--custom--blob, 1))), transparent 75%),
var(--color-surface);
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / calc(0.5 * var(--wp--custom--glass, 1))),
var(--shadow-m);
color: var(--color-primary-strong);
font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
font-weight: 250;
letter-spacing: 0.04em;
line-height: 1;
}
.about-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-portrait .wp-block-image {
width: 100%;
height: 100%;
}
@media (min-width: 56rem) {
.about-portrait {
aspect-ratio: 4 / 5;
}
} .wp-block-post-template.grid > * {
margin-block: 0;
}
.post-card {
height: 100%;
}
.post-card .wp-block-post-title {
font-size: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
}
.post-card .wp-block-post-title a {
color: var(--color-text);
text-decoration: none;
}
.post-card .wp-block-post-title a:hover {
color: var(--color-primary-strong);
}
.wp-block-post-date,
.post-card .wp-block-post-excerpt {
color: var(--color-muted);
}
.wp-block-post-date {
font-size: 0.875rem;
}
.wp-block-query-pagination {
gap: var(--space-3);
font-weight: 600;
}
.wp-block-search__input {
border-radius: var(--radius-s);
}
.wp-block-search__inside-wrapper {
gap: var(--space-2);
}  :root .sbk {
--sbk-accent: var(--color-primary-strong);
--sbk-accent-soft: var(--color-primary-soft);
--sbk-on-accent: var(--color-on-primary);
--sbk-border: var(--color-border);
--sbk-muted: var(--color-muted);
--sbk-error: var(--color-error);
--sbk-success: var(--color-success);
--sbk-info: var(--color-info);
--sbk-warning: var(--color-warning);
--sbk-radius: var(--radius-s);
}
:root :is(.scf-form, .scf-alert) {
--scf-error: var(--color-error);
--scf-success: var(--color-success);
}
.sbk .sbk-field {
--sbk-border: var(--color-control);
}
.sbk-stack.stack {
display: block;
}
.sbk-calendar__day--disabled {
opacity: 1;
}
.sbk-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea):hover {
border-color: var(--color-text-soft);
}
.sbk-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus-visible {
border-color: var(--color-focus);
}
.sbk .sbk-field textarea {
min-height: 8rem;
}
.sbk-field.sbk-field--invalid :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
border-color: var(--color-error);
background-color: var(--color-invalid-bg);
}
.scf-form {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-5);
max-width: 40rem;
}
.scf-field {
display: grid;
align-content: start;
gap: 0.375rem;
}
.scf-field__label {
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.scf-field :is(input:not([type="checkbox"]), textarea) {
width: 100%;
min-height: 3rem;
padding: 0.6875rem 0.9375rem;
border: 1px solid var(--color-control);
border-radius: var(--radius-s);
background-color: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 1rem;
line-height: 1.4;
scroll-margin-top: 6rem;
transition: border-color var(--duration-fast) var(--ease-out);
}
.scf-form .scf-field textarea {
min-height: 8rem;
resize: vertical;
field-sizing: content;
}
.scf-field :is(input:not([type="checkbox"]), textarea):hover {
border-color: var(--color-text-soft);
}
.scf-field :is(input:not([type="checkbox"]), textarea):focus-visible {
outline-offset: 1px;
border-color: var(--color-focus);
}
.scf-field--checkbox {
grid-template-columns: auto 1fr;
align-items: start;
column-gap: 0.75rem;
}
.scf-field--checkbox input {
width: 1.25rem;
height: 1.25rem;
margin: 0.15rem 0 0;
accent-color: var(--color-primary);
cursor: pointer;
scroll-margin-top: 6rem;
transition: transform var(--duration-fast) var(--ease-out);
}
.scf-field--checkbox input:active {
transform: scale(var(--press-small));
transition-duration: var(--duration-press);
}
.scf-field--checkbox .scf-field__label {
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0;
cursor: pointer;
}
.scf-field--checkbox .scf-field__error {
grid-column: 2;
}
.scf-field__error {
display: flex;
align-items: flex-start;
gap: 0.375rem;
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-error);
}
.scf-field__error::before {
content: "";
flex: none;
width: 1rem;
height: 1rem;
margin-top: 0.05rem;
background: currentColor;
-webkit-mask: var(--icon-error) center / contain no-repeat;
mask: var(--icon-error) center / contain no-repeat;
}
.scf-field--invalid :is(input, textarea) {
border-color: var(--color-error);
background-color: var(--color-invalid-bg);
}
.scf-field--invalid :is(input, textarea):focus-visible {
outline-color: var(--color-error);
}
.scf-alert {
--alert-icon: var(--icon-info);
position: relative;
margin: 0 0 var(--space-5);
padding: 0.875rem 1rem 0.875rem 2.875rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-s);
background: var(--color-surface);
color: var(--color-text);
font-size: 0.9375rem;
line-height: 1.55;
}
.scf-alert::before {
content: "";
position: absolute;
left: 1rem;
top: 1.0625rem;
width: 1.125rem;
height: 1.125rem;
background: currentColor;
-webkit-mask: var(--alert-icon) center / contain no-repeat;
mask: var(--alert-icon) center / contain no-repeat;
}
.scf-alert ul {
display: grid;
gap: 0.25rem;
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
}
.scf-alert a {
color: inherit;
font-weight: 600;
}
.scf-alert:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.scf-alert--success {
--alert-icon: var(--icon-success);
border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
background: var(--color-success-soft);
color: var(--color-success);
}
.scf-alert--error {
--alert-icon: var(--icon-error);
border-color: color-mix(in srgb, var(--color-error) 25%, transparent);
background: var(--color-error-soft);
color: var(--color-error);
}
.scf-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-top: var(--space-2);
}
.scf-actions .scf-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.875rem;
padding: 0.625rem 1.375rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-on-primary);
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.005em;
box-shadow:
inset 0 1px rgb(255 255 255 / 0.14),
0 1px 2px rgb(var(--shade) / 0.16),
0 6px 16px -8px rgb(var(--primary-shade) / 0.6);
cursor: pointer;
touch-action: manipulation;
transition:
background-color var(--duration-fast) var(--ease-out),
opacity var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.scf-actions .scf-button:hover {
background: var(--color-primary-strong);
color: var(--color-on-primary);
}
.scf-actions .scf-button:active {
transform: scale(var(--press));
transition-duration: var(--duration-press);
}
.scf-actions .scf-button:disabled {
opacity: 0.85;
cursor: progress;
} @media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
html {
scroll-behavior: smooth;
}
}
::view-transition-group(*) {
animation-duration: var(--duration-page);
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation-timing-function: var(--ease-out);
}
::view-transition-group(lang-current) {
animation-duration: var(--duration);
animation-timing-function: var(--ease-in-out);
}
@media screen and (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.wp-site-blocks :is(main, .wp-block-post-content) > .section:not(:first-child) > .container > :not(.grid),
.wp-site-blocks :is(main, .wp-block-post-content) > .section:not(:first-child) .grid > * {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 8rem;
}
.wp-site-blocks :is(main, .wp-block-post-content) > .section:not(:first-child) .grid > :nth-child(3n + 2) {
animation-range: entry 1.5rem entry 9.5rem;
}
.wp-site-blocks :is(main, .wp-block-post-content) > .section:not(:first-child) .grid > :nth-child(3n + 3) {
animation-range: entry 3rem entry 11rem;
}
.wp-site-blocks :is(main, .wp-block-post-content) > .section:not(:first-child) :is(.container > *, .grid > *):focus-within {
animation: none;
}
}
}
@keyframes reveal {
from {
opacity: 0;
transform: translateY(1.5rem);
}
} @media (prefers-reduced-motion: reduce) {
:root {
--press: 1;
--press-small: 1;
}
.theme-toggle svg {
transition: none;
}
.hero::before,
.hero::after {
animation: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open {
transform: none !important;
transition-property: opacity;
}
}
@media (prefers-reduced-transparency: reduce) {
.site-header,
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.hero__panel {
background: var(--color-surface);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (prefers-contrast: more) { body {
--color-muted: color-mix(in srgb, var(--color-text) 82%, var(--color-bg));
--color-border: color-mix(in srgb, var(--color-text) 45%, var(--color-bg));
--color-border-strong: color-mix(in srgb, var(--color-text) 60%, var(--color-bg));
--color-control: color-mix(in srgb, var(--color-text) 68%, var(--color-bg));
}
}
@media (forced-colors: active) {
.slot input:checked + span,
.calendar__day--selected,
.step--current,
.site-header .wp-block-navigation-item__content[aria-current="page"],
.lang-switch .lang-switch__link[aria-current]:not([aria-current="false"]) {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.btn,
.wp-block-button__link,
.slot span {
border-color: ButtonText;
}
.alert::before,
.field__error::before {
background: CanvasText;
}
.site-header .wp-block-navigation__responsive-container-open::before {
background:
linear-gradient(ButtonText, ButtonText) 0 0 / 100% 2px no-repeat,
linear-gradient(ButtonText, ButtonText) 0 100% / 65% 2px no-repeat;
}
.site-header .is-menu-open {
border: 1px solid CanvasText;
}
.site-header .wp-block-navigation__responsive-container-close::before,
.site-header .wp-block-navigation__responsive-container-close::after {
background: ButtonText;
}
}