:root {
--lily: #cf2e84;
--lily-deep: #ae1f6c;
--blush: #fcf2f6;
--petal: #f3d9e5;
--ink: #2a2427;
--ink-soft: #5e5459;
--paper: #ffffff;
--font-display: "Lora", Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@font-face {
font-family: "Lora";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/lora-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lora";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0102-0103, U+0131, U+0152-0153, U+015E-015F, U+0162-0163, U+0218-021B, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Lora";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/lora-cyrillic.woff2") format("woff2");
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Lora";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/lora-italic-cyrillic.woff2") format("woff2");
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400-cyrillic.woff2") format("woff2");
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500-cyrillic.woff2") format("woff2");
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600-cyrillic.woff2") format("woff2");
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
--line: #eee4e8;
--petal-strong: #e9bfd3;
--night: #1e191c;
--step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
--step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
--step-1: clamp(1.15rem, 1.07rem + 0.35vw, 1.35rem);
--step-2: clamp(1.32rem, 1.18rem + 0.6vw, 1.7rem);
--step-3: clamp(2rem, 1.55rem + 1.9vw, 3.15rem);
--step-brand: clamp(6.5rem, 3.6rem + 12vw, 13rem);
--gutter: clamp(1.25rem, 0.75rem + 2.4vw, 2.5rem);
--section-y: clamp(4.5rem, 2.9rem + 6.5vw, 8.5rem);
--container: 76rem;
--header-h: 4.5rem;
--radius-s: 12px;
--radius-m: 20px;
--radius-l: 30px;
--shadow-soft: 0 1px 2px rgb(42 36 39 / 0.04), 0 18px 40px -26px rgb(174 31 108 / 0.32);
--shadow-lift: 0 2px 6px rgb(42 36 39 / 0.06), 0 30px 60px -30px rgb(174 31 108 / 0.45);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 70em) {
:root {
--header-h: 5rem;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
html.menu-open {
overflow: hidden;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-0);
line-height: 1.65;
font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-wrap: break-word;
}
main {
flex: 1 0 auto;
}
main:focus {
outline: none;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
address {
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.15;
text-wrap: balance;
}
img,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
button {
font: inherit;
color: inherit;
}
a {
color: var(--lily-deep);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 3px;
}
[hidden] {
display: none !important;
}
::selection {
background: var(--petal);
color: var(--ink);
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 220ms;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
transition-duration: 0.01ms !important;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
.container {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.prose > * + * {
margin-top: 1em;
}
.icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
}
.icon--small {
width: 1.125rem;
height: 1.125rem;
}
.icon--large {
width: 2.25rem;
height: 2.25rem;
}
mark.ph {
padding: 0.05em 0.3em;
border-radius: 4px;
background: #fff3bf;
color: #5c4400;
outline: 1px dashed #c99700;
outline-offset: 1px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.js [data-reveal] {
opacity: 0;
transform: translateY(1.75rem);
transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
}
.js [data-reveal].is-revealed {
opacity: 1;
transform: none;
}
.skip-link {
position: absolute;
z-index: 100;
top: 0.75rem;
left: 0.75rem;
padding: 0.6rem 1rem;
border-radius: var(--radius-s);
background: var(--paper);
color: var(--ink);
font-weight: 600;
box-shadow: var(--shadow-lift);
}
.skip-link:not(:focus) {
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.site-header {
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid transparent;
transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.site-header[data-scrolled] {
border-bottom-color: var(--line);
background: rgb(255 255 255 / 0.9);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
backdrop-filter: saturate(1.5) blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header[data-scrolled] {
background: var(--paper);
}
}
.site-header[data-menu-open] {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--paper);
border-bottom-color: var(--line);
}
.site-header__bar {
display: flex;
align-items: center;
gap: 0.75rem;
min-height: var(--header-h);
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-right: auto;
color: var(--ink);
text-decoration: none;
}
.brand__logo {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--paper), 0 6px 16px -6px rgb(207 46 132 / 0.55);
}
.brand__name {
display: none;
font-family: var(--font-display);
font-size: 1.375rem;
font-style: italic;
line-height: 1;
}
.brand__word {
font-style: normal;
}
@media (min-width: 30em) {
.brand__name {
display: inline;
}
}
.site-header__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.site-nav__list {
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__link {
position: relative;
display: block;
color: var(--ink);
text-decoration: none;
}
.site-nav__extra {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
@media (max-width: 69.99em) {
.site-header__actions .header-cta {
display: none;
}
.js .site-nav {
position: fixed;
inset: var(--header-h) 0 0;
z-index: 39;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem;
padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
overflow-y: auto;
background:
radial-gradient(120% 60% at 100% 100%, var(--blush) 0%, rgb(252 242 246 / 0) 70%),
var(--paper);
visibility: hidden;
opacity: 0;
transform: translateY(-0.75rem);
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.js .site-header[data-menu-open] .site-nav {
visibility: visible;
opacity: 1;
transform: none;
transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.js .site-nav__link {
padding: 0.55rem 0;
border-bottom: 1px solid var(--line);
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 2vw, 2.2rem);
line-height: 1.3;
}
.js .site-nav__link.is-active {
color: var(--lily-deep);
}
html:not(.js) .site-header {
position: static;
}
html:not(.js) .site-header__bar {
flex-wrap: wrap;
}
html:not(.js) .site-nav {
order: 3;
width: 100%;
padding-bottom: 0.75rem;
}
html:not(.js) .site-nav__list {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
}
html:not(.js) .site-nav__extra,
html:not(.js) .site-header__actions .menu-toggle {
display: none;
}
}
@media (min-width: 70em) {
.site-header__bar {
gap: 2rem;
}
.site-nav__list {
display: flex;
gap: clamp(1.1rem, 2vw, 2rem);
}
.site-nav__link {
padding: 0.5rem 0;
font-size: 0.9375rem;
}
.site-nav__link::after {
content: "";
position: absolute;
right: 0;
bottom: 0.15rem;
left: 0;
height: 1.5px;
background: var(--lily);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.45s var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after {
transform: scaleX(1);
}
.site-nav__extra,
.site-header__actions .menu-toggle,
.site-header__actions .header-call {
display: none;
}
}
.section {
padding-block: var(--section-y);
}
.section-head {
display: grid;
gap: 1rem;
max-width: 44rem;
}
.section-title {
font-size: var(--step-3);
line-height: 1.1;
letter-spacing: -0.01em;
}
.section-intro {
color: var(--ink-soft);
font-size: var(--step-1);
line-height: 1.55;
}
@media (min-width: 64em) {
.section-head {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
align-items: end;
gap: 3rem;
max-width: none;
}
.section-head .section-intro {
max-width: 30rem;
padding-bottom: 0.4rem;
}
}
.site-footer {
padding-block: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) 2rem;
background: var(--ink);
color: #e3d9de;
font-size: 0.9375rem;
}
.site-footer a {
color: var(--paper);
text-decoration-color: rgb(255 255 255 / 0.35);
}
.site-footer a:hover {
text-decoration-color: var(--paper);
}
.site-footer :focus-visible {
outline-color: var(--paper);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: 2.5rem 1.5rem;
}
@media (max-width: 47.99em) {
.site-footer__brand,
.site-footer__col:last-child {
grid-column: 1 / -1;
}
}
.site-footer__brand {
display: grid;
gap: 0.5rem;
align-content: start;
}
.site-footer__logo {
width: 3.75rem;
height: 3.75rem;
margin-bottom: 0.5rem;
border-radius: 50%;
}
.site-footer__name {
font-family: var(--font-display);
font-size: 1.375rem;
color: var(--paper);
}
.site-footer__tagline {
font-family: var(--font-display);
font-style: italic;
color: #cbbcc4;
}
.site-footer__col {
display: grid;
gap: 0.6rem;
align-content: start;
}
.site-footer__title {
margin-bottom: 0.4rem;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--petal);
}
.site-footer__links {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__bottom {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgb(255 255 255 / 0.12);
color: #bbafb5;
font-size: 0.875rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3rem;
padding: 0.7rem 1.5rem;
border: 1.5px solid transparent;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
text-align: center;
text-wrap: balance;
text-decoration: none;
cursor: pointer;
transition:
background-color 0.25s var(--ease),
color 0.25s var(--ease),
border-color 0.25s var(--ease),
box-shadow 0.25s var(--ease),
transform 0.25s var(--ease);
}
.btn--primary {
background: var(--lily);
color: var(--paper);
box-shadow: 0 12px 26px -14px rgb(207 46 132 / 0.85);
}
.btn--primary:hover {
background: var(--lily-deep);
transform: translateY(-1px);
}
.btn--large {
min-height: 3.5rem;
padding-inline: 2.1rem;
font-size: 1rem;
}
.btn--small {
min-height: 2.5rem;
padding: 0.45rem 1.15rem;
font-size: 0.875rem;
}
.btn--outline {
border-color: var(--petal);
background: var(--paper);
color: var(--ink);
}
.btn--outline:hover {
border-color: var(--lily);
color: var(--lily-deep);
}
.btn--text {
min-height: 2.75rem;
padding-inline: 0.25rem;
color: var(--ink);
text-decoration: underline;
text-decoration-color: var(--petal-strong);
text-decoration-thickness: 1.5px;
text-underline-offset: 0.4em;
}
.btn--text:hover {
color: var(--lily-deep);
text-decoration-color: var(--lily);
}
.btn--light {
background: var(--paper);
color: var(--lily-deep);
}
.btn--light:hover {
background: var(--blush);
}
.btn--outline-light {
border-color: rgb(255 255 255 / 0.7);
color: var(--paper);
}
.btn--outline-light:hover {
border-color: var(--paper);
background: rgb(255 255 255 / 0.12);
}
.icon-button {
display: inline-grid;
place-items: center;
flex: none;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--paper);
color: var(--ink);
cursor: pointer;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.icon-button:hover {
border-color: var(--lily);
color: var(--lily-deep);
}
.icon-button .icon {
width: 1.25rem;
height: 1.25rem;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
color: var(--lily-deep);
text-underline-offset: 0.25em;
}
.lang-switch__list {
display: flex;
margin: 0;
padding: 3px;
border: 1px solid var(--petal);
border-radius: 999px;
background: rgb(255 255 255 / 0.75);
list-style: none;
}
.lang-switch__link {
display: grid;
place-items: center;
min-width: 2.6rem;
height: 2.25rem;
padding: 0 0.6rem;
border-radius: 999px;
color: var(--ink-soft);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.lang-switch__link:hover {
color: var(--lily-deep);
}
.lang-switch__link[aria-current="true"] {
background: var(--lily);
color: var(--paper);
}
.menu-toggle__bars {
position: relative;
width: 1.15rem;
height: 0.65rem;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: transform 0.35s var(--ease-out), top 0.35s var(--ease-out);
}
.menu-toggle__bars::before {
top: 0;
}
.menu-toggle__bars::after {
top: calc(100% - 1.5px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
top: calc(50% - 0.75px);
transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
top: calc(50% - 0.75px);
transform: rotate(-45deg);
}
@media (forced-colors: active) {
.menu-toggle__bars::before,
.menu-toggle__bars::after {
background: CanvasText;
}
.lang-switch__link[aria-current="true"] {
outline: 2px solid CanvasText;
}
}
.lightbox {
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: rgb(30 25 28 / 0.96);
color: var(--paper);
}
.lightbox::backdrop {
background: rgb(30 25 28 / 0.6);
}
.lightbox[open] {
animation: lightbox-in 0.35s var(--ease-out);
}
@keyframes lightbox-in {
from {
opacity: 0;
}
}
.lightbox__figure {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
height: 100%;
padding: 4.5rem 1rem 1.5rem;
}
.lightbox__frame {
display: grid;
place-items: center;
min-height: 0;
}
.lightbox__frame img {
max-width: min(100%, 52rem);
max-height: calc(100vh - 9rem);
max-height: calc(100dvh - 9rem);
width: auto;
height: auto;
border-radius: var(--radius-s);
object-fit: contain;
}
.lightbox__caption {
padding-top: 1rem;
text-align: center;
font-size: var(--step--1);
color: rgb(255 255 255 / 0.85);
}
.lightbox__count {
margin-left: 0.5rem;
color: rgb(255 255 255 / 0.6);
font-variant-numeric: tabular-nums;
}
.lightbox .icon-button {
position: absolute;
border-color: rgb(255 255 255 / 0.25);
background: rgb(255 255 255 / 0.08);
color: var(--paper);
}
.lightbox .icon-button:hover {
border-color: var(--paper);
background: rgb(255 255 255 / 0.16);
color: var(--paper);
}
.lightbox :focus-visible {
outline-color: var(--paper);
}
.lightbox__close {
top: 1rem;
right: 1rem;
}
.lightbox__prev,
.lightbox__next {
top: 50%;
transform: translateY(-50%);
}
.lightbox__prev {
left: 1rem;
}
.lightbox__next {
right: 1rem;
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(1.5rem, 0.5rem + 4vw, 4rem) var(--section-y);
}
.hero::before {
content: "";
position: absolute;
z-index: -1;
top: -18rem;
right: -14rem;
width: 52rem;
height: 52rem;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(243 217 229 / 0.85), rgb(252 242 246 / 0.4) 55%, rgb(255 255 255 / 0));
pointer-events: none;
}
.hero__grid {
display: grid;
gap: 3.5rem;
align-items: center;
}
.hero__title {
display: grid;
justify-items: start;
}
.hero__kicker {
font-family: var(--font-body);
font-size: var(--step-0);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-soft);
}
.hero__brand {
margin: 0.1em 0 0 -0.05em;
padding-right: 0.08em;
font-size: var(--step-brand);
font-style: italic;
line-height: 0.86;
letter-spacing: -0.02em;
color: var(--lily);
}
.hero__descriptor {
margin-top: calc(var(--step-brand) * 0.22);
font-size: var(--step-2);
letter-spacing: 0.01em;
color: var(--ink);
}
.hero__tagline {
margin-top: 1.75rem;
font-family: var(--font-display);
font-size: var(--step-1);
font-style: italic;
color: var(--ink);
}
.hero__text {
max-width: 34rem;
margin-top: 0.6rem;
color: var(--ink-soft);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
margin-top: 2rem;
}
.hero__facts {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.75rem;
margin-top: 2.25rem;
padding: 1.5rem 0 0;
border-top: 1px solid var(--line);
list-style: none;
font-size: var(--step--1);
}
.hero__facts li {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.hero__facts .icon {
color: var(--lily);
}
.hero__facts a {
color: var(--ink);
text-decoration: none;
}
.hero__facts a:hover {
color: var(--lily-deep);
text-decoration: underline;
}
.hero__visual {
position: relative;
isolation: isolate;
justify-self: center;
width: min(100%, 27rem);
margin-inline: auto;
padding: 1.4rem 1.4rem 0 0;
}
.hero__visual::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 1.4rem;
left: 1.4rem;
border: 1.5px solid rgb(207 46 132 / 0.45);
border-radius: 50% 50% var(--radius-l) var(--radius-l) / 40% 40% var(--radius-l) var(--radius-l);
}
.hero__arch {
overflow: hidden;
aspect-ratio: 4 / 5;
border-radius: 50% 50% var(--radius-l) var(--radius-l) / 40% 40% var(--radius-l) var(--radius-l);
background: var(--blush);
box-shadow: var(--shadow-lift);
}
.hero__arch img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 40% 30%;
}
.hero__seal {
position: absolute;
bottom: 2.25rem;
left: -1.25rem;
width: clamp(5.75rem, 4.5rem + 4vw, 8.5rem);
height: auto;
border-radius: 50%;
box-shadow: 0 0 0 6px var(--paper), var(--shadow-lift);
}
@media (min-width: 64em) {
.hero__grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(3rem, 6vw, 6rem);
}
.hero__visual {
width: min(100%, 29rem);
margin-inline: auto 0;
}
.hero__seal {
left: -3rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.hero__copy > *,
.hero__title > * {
animation: hero-rise 1s var(--ease-out) both;
}
.hero__brand {
animation-delay: 0.08s;
}
.hero__descriptor {
animation-delay: 0.16s;
}
.hero__tagline {
animation-delay: 0.24s;
}
.hero__text {
animation-delay: 0.3s;
}
.hero__actions {
animation-delay: 0.36s;
}
.hero__facts {
animation-delay: 0.44s;
}
.hero__arch {
animation: hero-unveil 1.4s var(--ease-out) 0.1s both;
}
.hero__visual::before {
animation: hero-fade 1.2s var(--ease-out) 0.6s both;
}
.hero__seal {
animation: hero-seal 0.9s var(--ease-out) 0.75s both;
}
.is-swapped .hero *,
.is-swapped .hero__visual::before {
animation: none;
}
}
@keyframes hero-rise {
from {
opacity: 0;
transform: translateY(1.25rem);
}
}
@keyframes hero-unveil {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes hero-fade {
from {
opacity: 0;
}
}
@keyframes hero-seal {
from {
opacity: 0;
transform: scale(0.8) rotate(-12deg);
}
}
.about {
background: linear-gradient(180deg, var(--paper) 0%, var(--blush) 18%, var(--blush) 100%);
}
.about__grid {
display: grid;
gap: 3.5rem;
align-items: center;
}
.about__media {
position: relative;
isolation: isolate;
width: min(100% - 1.5rem, 30rem);
margin-inline: 0 auto;
}
.about__media::before {
content: "";
position: absolute;
z-index: -1;
inset: 1.4rem -1.4rem -1.4rem 1.4rem;
border: 1.5px solid rgb(207 46 132 / 0.35);
border-radius: var(--radius-l);
}
.about__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: 46% 50%;
border-radius: var(--radius-l);
box-shadow: var(--shadow-lift);
}
.about__copy {
display: grid;
gap: 1.5rem;
}
.about__copy .prose {
max-width: 36rem;
color: var(--ink-soft);
font-size: var(--step-1);
line-height: 1.6;
}
.values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: 1.5rem 2rem;
margin-top: 1rem;
}
.values__item {
position: relative;
padding-top: 1.1rem;
border-top: 1px solid var(--petal);
}
.values__item::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 2.25rem;
height: 2px;
background: var(--lily);
}
.values dt {
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.3;
}
.values dd {
margin-top: 0.3rem;
color: var(--ink-soft);
font-size: var(--step--1);
}
@media (min-width: 56em) {
.about__grid {
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(3.5rem, 7vw, 7rem);
}
.about__media {
margin-inline: auto;
}
}
.services__grid {
display: grid;
gap: 1px;
margin: 3rem 0 0;
padding: 0;
border-block: 1px solid var(--line);
background: var(--line);
list-style: none;
}
.service {
position: relative;
display: grid;
grid-template-rows: auto auto 1fr auto;
gap: 0.6rem;
padding: 1.75rem 1.5rem 1.6rem;
background: var(--paper);
transition: background-color 0.35s var(--ease);
}
.service:hover {
background: var(--blush);
}
.service__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-bottom: 0.4rem;
border-radius: 50%;
background: var(--blush);
color: var(--lily);
transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.service:hover .service__icon {
background: var(--lily);
color: var(--paper);
}
.service__title {
font-size: 1.375rem;
line-height: 1.25;
}
.service__text {
color: var(--ink-soft);
font-size: var(--step--1);
line-height: 1.55;
}
.service__link {
justify-self: start;
margin-top: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--lily-deep);
text-decoration: none;
}
.service__link::after {
content: "";
position: absolute;
inset: 0;
}
.service__link:hover,
.service:hover .service__link {
text-decoration: underline;
text-underline-offset: 0.25em;
}
.service__link:focus-visible {
outline: none;
}
.service__link:focus-visible::after {
outline: 3px solid var(--ink);
outline-offset: -3px;
}
@media (max-width: 35.99em) {
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service {
gap: 0.35rem;
padding: 1.25rem 0.9rem 1.15rem;
}
.service__icon {
width: 2.6rem;
height: 2.6rem;
}
.service__title {
font-size: 1.125rem;
}
.service__text {
display: none;
}
.service__link {
font-size: 0.8125rem;
}
}
@media (min-width: 36em) {
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 56em) {
.services__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 75em) {
.services__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.service {
padding: 2rem 1.75rem 1.75rem;
}
}
.gallery__grid {
display: flex;
gap: 0.875rem;
margin: 2.5rem calc(-1 * var(--gutter)) 0;
padding: 0 var(--gutter) 0.5rem;
overflow-x: auto;
list-style: none;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: thin;
scrollbar-color: var(--petal) transparent;
}
.gallery__item {
flex: 0 0 min(76vw, 21rem);
height: min(118vw, 30rem);
scroll-snap-align: start;
}
.gallery__link,
.gallery__ig {
position: relative;
display: block;
height: 100%;
overflow: hidden;
border-radius: var(--radius-m);
}
.gallery__link img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease-out);
}
.gallery__link:hover img {
transform: scale(1.045);
}
.gallery__link:focus-visible {
outline-offset: 4px;
}
.gallery__ig {
display: grid;
place-content: center;
justify-items: center;
gap: 0.75rem;
padding: 2rem;
background:
radial-gradient(120% 80% at 0% 0%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 60%),
linear-gradient(155deg, var(--lily), var(--lily-deep));
color: var(--paper);
text-align: center;
text-decoration: none;
}
.gallery__ig-text {
font-family: var(--font-display);
font-size: var(--step-2);
line-height: 1.25;
}
.gallery__ig-handle {
font-size: var(--step--1);
color: rgb(255 255 255 / 0.88);
text-decoration: underline;
text-decoration-color: rgb(255 255 255 / 0.45);
text-underline-offset: 0.25em;
}
.gallery__ig:hover .gallery__ig-handle {
text-decoration-color: var(--paper);
}
.gallery__ig:focus-visible {
outline-offset: 4px;
}
@media (min-width: 48em) {
.gallery__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: clamp(12rem, 9rem + 9vw, 17rem);
grid-auto-flow: dense;
gap: 1rem;
margin: 3rem 0 0;
padding: 0;
overflow: visible;
}
.gallery__item {
height: auto;
}
.gallery__item:nth-child(4n + 1),
.gallery__item:nth-child(4n + 3) {
grid-row: span 2;
}
.js .gallery__item:nth-child(2) {
transition-delay: 0.1s;
}
.js .gallery__item:nth-child(3) {
transition-delay: 0.2s;
}
}
.connect {
padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.connect__grid {
display: grid;
gap: 1.25rem;
}
.reviews,
.social {
display: grid;
align-content: start;
gap: 1rem;
padding: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
border-radius: var(--radius-l);
}
.reviews {
justify-items: start;
background:
radial-gradient(90% 70% at 100% 0%, rgb(243 217 229 / 0.9), rgb(243 217 229 / 0) 70%),
var(--blush);
}
.reviews__icon {
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background: var(--paper);
color: var(--lily);
box-shadow: var(--shadow-soft);
}
.reviews__icon .icon {
width: 1.75rem;
height: 1.75rem;
}
.reviews__text,
.social__intro {
max-width: 32rem;
color: var(--ink-soft);
}
.reviews .btn {
margin-top: 0.75rem;
}
.social {
grid-template-rows: auto auto 1fr;
border: 1px solid var(--line);
}
.social__list {
display: grid;
align-self: end;
gap: 0.75rem;
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
}
.social__link {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--petal);
border-radius: var(--radius-m);
color: var(--ink);
text-decoration: none;
transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.social__link:hover {
border-color: var(--lily);
background: var(--blush);
}
.social__icon {
display: grid;
place-items: center;
flex: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--lily);
color: var(--paper);
}
.social__text {
display: grid;
min-width: 0;
line-height: 1.35;
}
.social__network {
font-weight: 600;
}
.social__detail {
overflow: hidden;
color: var(--ink-soft);
font-size: var(--step--1);
text-overflow: ellipsis;
}
.social__action {
display: none;
align-items: center;
gap: 0.4rem;
margin-left: auto;
color: var(--lily-deep);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
@media (min-width: 30em) {
.social__action {
display: inline-flex;
}
}
@media (min-width: 56em) {
.connect__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.social__action {
display: none;
}
}
@media (min-width: 75em) {
.social__action {
display: inline-flex;
}
}
.contact {
padding-top: 0;
}
.contact__grid {
display: grid;
gap: 3rem;
align-items: start;
}
.contact__info {
display: grid;
gap: 1rem;
}
.contact-list {
margin-top: 1.25rem;
border-top: 1px solid var(--line);
}
.contact-list__item {
display: grid;
gap: 0.35rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
}
.contact-list dt {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--ink-soft);
font-size: var(--step--1);
}
.contact-list dt .icon {
color: var(--lily);
}
.contact-list dd {
display: grid;
justify-items: start;
gap: 0.35rem;
font-size: var(--step-1);
}
.contact-list address {
font-style: normal;
}
.contact-list__strong {
color: var(--ink);
font-family: var(--font-display);
font-size: var(--step-2);
text-decoration: none;
}
a.contact-list__strong:hover {
color: var(--lily-deep);
}
.contact-list .text-link {
font-size: var(--step--1);
}
@media (min-width: 40em) {
.contact-list__item {
grid-template-columns: 12rem minmax(0, 1fr);
align-items: baseline;
gap: 1.5rem;
}
}
.booking {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
border-radius: var(--radius-l);
background:
radial-gradient(80% 60% at 100% 0%, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0) 70%),
linear-gradient(160deg, var(--lily) 0%, var(--lily-deep) 100%);
color: var(--paper);
box-shadow: var(--shadow-lift);
}
.booking :focus-visible {
outline-color: var(--paper);
}
.booking__logo {
width: 4.25rem;
height: 4.25rem;
border-radius: 50%;
box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
}
.booking__title {
margin-top: 1.5rem;
font-size: clamp(1.9rem, 1.55rem + 1.1vw, 2.5rem);
}
.booking__text {
margin-top: 0.5rem;
color: rgb(255 255 255 / 0.92);
}
.booking__phone {
display: inline-block;
margin-top: 1.25rem;
color: var(--paper);
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.4rem);
line-height: 1.2;
text-decoration: none;
}
.booking__phone:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
.booking__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.75rem;
}
@media (min-width: 56em) {
.contact__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(3rem, 6vw, 6rem);
}
}
.not-found__inner {
display: grid;
justify-items: center;
gap: 1.25rem;
text-align: center;
}
.not-found__logo {
width: 6rem;
height: 6rem;
border-radius: 50%;
}
.prices {
background:
radial-gradient(60% 40% at 0% 0%, rgb(243 217 229 / 0.6), rgb(243 217 229 / 0) 70%),
var(--blush);
}
.price-nav {
margin-top: 2rem;
}
.price-nav__list {
display: flex;
gap: 0.5rem;
margin: 0 calc(-1 * var(--gutter));
padding: 0.25rem var(--gutter) 0.5rem;
overflow-x: auto;
list-style: none;
scrollbar-width: none;
}
.price-nav__list::-webkit-scrollbar {
display: none;
}
.price-nav__link {
display: inline-flex;
align-items: center;
min-height: 2.5rem;
padding: 0 1.1rem;
border: 1px solid var(--petal);
border-radius: 999px;
background: var(--paper);
color: var(--ink);
font-size: 0.875rem;
white-space: nowrap;
text-decoration: none;
transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.price-nav__link:hover {
border-color: var(--lily);
color: var(--lily-deep);
}
@media (min-width: 48em) {
.price-nav__list {
flex-wrap: wrap;
margin: 0;
padding: 0;
overflow: visible;
}
}
.price-grid {
margin-top: 2rem;
column-gap: 1.5rem;
}
@media (min-width: 48em) {
.price-grid {
columns: 2;
}
}
@media (min-width: 75em) {
.price-grid {
columns: 3;
}
}
.price-card {
display: block;
width: 100%;
margin-bottom: 1.25rem;
padding: 1.6rem 1.6rem 1.4rem;
border: 1px solid var(--petal);
border-radius: var(--radius-m);
background: var(--paper);
box-shadow: var(--shadow-soft);
break-inside: avoid;
scroll-margin-top: calc(var(--header-h) + 1rem);
}
.price-card__head {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.1rem;
color: var(--lily-deep);
font-size: var(--step-2);
font-weight: 500;
line-height: 1.2;
}
.price-card__icon {
display: grid;
place-items: center;
flex: none;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: var(--blush);
color: var(--lily);
}
.price-card__icon .icon {
width: 1.4rem;
height: 1.4rem;
}
.price-card__note {
margin: -0.4rem 0 0.9rem;
color: var(--ink-soft);
font-family: var(--font-display);
font-size: 0.9375rem;
font-style: italic;
line-height: 1.45;
}
.price-list {
display: grid;
gap: 0.15rem;
margin: 0;
padding: 0;
list-style: none;
}
.price-item {
padding: 0.35rem 0;
line-height: 1.45;
}
.price-item__line {
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
.price-item__name {
flex: 0 1 auto;
min-width: 0;
}
.price-item__leader {
flex: 1 1 1rem;
min-width: 0.75rem;
margin-bottom: 0.4em;
border-bottom: 2px dotted var(--petal-strong);
}
.price-item__price {
flex: none;
font-weight: 600;
font-variant-numeric: lining-nums tabular-nums;
letter-spacing: 0.01em;
white-space: nowrap;
}
.price-item__detail {
display: block;
margin-top: 0.1rem;
color: var(--ink-soft);
font-family: var(--font-display);
font-size: 0.875rem;
font-style: italic;
}
.price-item--group > .price-item__name {
display: block;
}
.price-sublist {
display: grid;
gap: 0.1rem;
margin: 0.3rem 0 0.1rem 0.15rem;
padding: 0 0 0 0.9rem;
border-left: 1.5px solid var(--petal);
list-style: none;
color: var(--ink-soft);
}
.price-sublist .price-item {
padding: 0.15rem 0;
}
.price-sublist .price-item__price {
color: var(--ink);
}
.price-extra {
margin-top: 1.1rem;
padding: 0.9rem 1.1rem 0.7rem;
border-radius: var(--radius-s);
background: var(--blush);
}
.price-extra__title {
margin-bottom: 0.25rem;
color: var(--lily-deep);
font-family: var(--font-display);
font-size: 1.0625rem;
font-style: italic;
}
.price-card__toggle {
display: flex;
align-items: center;
gap: 0.85rem;
width: 100%;
margin: 0;
padding: 1.05rem 1.15rem;
border: 0;
border-radius: inherit;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.price-card__chevron {
width: 1.25rem;
height: 1.25rem;
margin-left: auto;
color: var(--ink-soft);
transition: transform 0.35s var(--ease-out);
}
.price-card__toggle[aria-expanded="true"] .price-card__chevron {
transform: rotate(180deg);
}
.price-card__toggle:focus-visible {
outline-offset: -3px;
}
[data-accordion] .price-card {
padding: 0;
}
[data-accordion] .price-card__head {
margin: 0;
}
[data-accordion] .price-card__body {
padding: 0 1.25rem 1.15rem;
}
[data-accordion] .price-card__body:not([hidden]) {
animation: price-open 0.4s var(--ease-out);
}
@keyframes price-open {
from {
opacity: 0;
transform: translateY(-0.4rem);
}
}
@media print {
.skip-link,
.site-nav,
.site-header__actions,
.hero__actions,
.hero__visual,
.gallery,
.connect,
.booking__actions,
.price-nav,
.price-card__chevron,
.lightbox {
display: none !important;
}
.site-header {
position: static;
border: 0;
}
body {
font-size: 10.5pt;
}
.section,
.hero {
padding-block: 1.25rem;
background: none;
}
.price-card {
box-shadow: none;
break-inside: avoid;
}
.price-card__body[hidden] {
display: block !important;
}
.booking {
background: none;
color: inherit;
box-shadow: none;
}
.booking__phone {
color: inherit;
}
.site-footer {
background: none;
color: inherit;
}
.site-footer a {
color: inherit;
}
* {
animation: none !important;
}
.js [data-reveal] {
opacity: 1;
transform: none;
}
}