*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
a {
color: inherit;
}
h1,
h2,
h3,
h4 {
line-height: 1.08;
text-wrap: balance;
font-weight: inherit;
}
p {
text-wrap: pretty;
}
ul,
ol {
list-style: none;
padding: 0;
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 2px;
}
:root {
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
--space-4xl: 9rem;
--container: 1240px;
--container-narrow: 820px;
--gutter: clamp(1.25rem, 5vw, 3.5rem);
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 20px;
--radius-pill: 999px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--dur: 0.55s;
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow {
max-width: var(--container-narrow);
}
.section {
padding-block: clamp(4rem, 10vw, var(--space-4xl));
position: relative;
}
.section--tight {
padding-block: clamp(3rem, 7vw, var(--space-3xl));
}
.skip-link {
position: absolute;
left: var(--space-md);
top: -100px;
z-index: 200;
padding: var(--space-sm) var(--space-md);
background: #fff;
color: #000;
border-radius: var(--radius-sm);
font-size: 0.85rem;
transition: top 0.2s var(--ease);
}
.skip-link:focus {
top: var(--space-md);
}
.lang-switch {
display: inline-flex;
align-items: center;
gap: 1px;
border: 1px solid currentColor;
border-radius: var(--radius-pill);
padding: 2px;
opacity: 0.75;
transition: opacity 0.3s var(--ease);
}
.lang-switch:hover {
opacity: 1;
}
.lang-switch__btn {
display: inline-flex;
text-decoration: none;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.3rem 0.6rem;
border-radius: var(--radius-pill);
color: inherit;
transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch__btn[aria-pressed='true'] {
background: currentColor;
}
.lang-switch__btn[aria-pressed='true'] span {
color: var(--lang-active-fg, #000);
}
[data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-visible {
opacity: 1;
transform: none;
}
@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;
scroll-behavior: auto !important;
}
[data-reveal] {
opacity: 1;
transform: none;
}
}
.photo {
position: relative;
overflow: hidden;
background-color: var(--photo-fallback, #1a1a1a);
aspect-ratio: var(--photo-ratio, 3 / 4);
}
.photo::after {
content: '';
position: absolute;
inset: 0;
background-image: var(--photo-overlay, none), var(--photo, none);
background-size: auto, cover;
background-position: center, var(--photo-position, center);
background-repeat: no-repeat, no-repeat;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 2000;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
::selection {
background: #ff600f;
color: #ffffff;
}
html {
scrollbar-width: thin;
scrollbar-color: #3a3a40 #0a0a0b;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #0a0a0b;
}
::-webkit-scrollbar-thumb {
background: #2e2e33;
border: 2px solid #0a0a0b;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #4a4a52;
}
.photo--full {
background-image: var(--photo, none);
background-size: cover;
background-position: center;
}
.photo--full::before {
content: '';
position: absolute;
inset: 0;
background: rgba(10, 10, 11, 0.38);
-webkit-backdrop-filter: blur(20px) saturate(0.9);
backdrop-filter: blur(20px) saturate(0.9);
}
.photo--full::after {
background-size: auto, contain;
background-position: center, center;
}
.form__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form__note.form__note--error {
color: #d0362a;
}