@font-face { 
font-family: 'Outfit'; 
src: url(//zerknij.co/wp-content/themes/zerknijco/assets/fonts/Outfit-VariableFont_wght.ttf) format('truetype'); 
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
@font-face { 
font-family: 'Syne'; 
src: url(//zerknij.co/wp-content/themes/zerknijco/assets/fonts/Syne-VariableFont_wght.ttf) format('truetype'); 
font-style: normal;
font-weight: 400 800;
font-display: swap;
}
:root {
--title: 'Syne', sans-serif;
--body: 'Outfit', sans-serif;
--white: #ffffff;
--black: #24282F;
--black-30: rgba(36, 40, 47, 0.3);
--black-50: rgba(36, 40, 47, 0.5);
--bright: #f4f4f5;
--bright-30: rgba(244, 244, 245, 0.3);
--brighter: rgba(255, 255, 255, 0.7);
--gray-1: #E7E9EC;
--gray-2: #D8D8DE;
--gray-3: #9A9CA4;
--gray-4: #46464F;
--makeup: #593C97;
--makeup-light: #BFBFDC;
--makeup-dark: #352062;
--makeup-35: rgba(89, 60, 151, 0.35);
--neon: #29F049;
--neon-light: #A6FFB4; 
--neon-dark: #2DC244;
--accessibility: #DC3232;
--gradient-light-obverse: linear-gradient(0deg, var(--bright), var(--makeup-light));
--gradient-light-reverse: linear-gradient(0deg, var(--makeup-light), var(--bright));
--gradient-transparent: linear-gradient(0deg, var(--bright-30), var(--makeup-35));
--gradient-dark-edge: linear-gradient(180deg, var(--gray-1) 25%, var(--bright) 25%);
--gradient-shadow: radial-gradient(var(--makeup-light), transparent 60%);
--gradient-cover: linear-gradient(0deg, var(--gray-1) 0%, var(--gray-1) 20%, var(--gray-1) 80%, transparent 100%);
--gradient-glow-neon: radial-gradient(var(--neon-light), transparent 60%);
--gradient-glow-makeup: radial-gradient(var(--makeup-light), transparent 60%);
--size-xxs: calc(var(--size-s) * 0.3);
--size-xs: calc(var(--size-s) * 0.6);
--size-s: 1rem;
--size-m: calc(var(--size-s) * 2);
--size-l: calc(var(--size-m) * 2.1);
--size-xl: calc(var(--size-l) * 2.15);
--size-xxl: calc(var(--size-xl) * 1.45);
--width-xxl: 1600px;
--width-xl: calc(var(--width-xxl) * 0.8);
--width-l: calc(var(--width-xxl) * 0.66);
--width-m: calc(var(--width-xxl) * 0.5);
--width-s: calc(var(--width-xxl) * 0.4);
--width-xs: calc(var(--width-xxl) * 0.333);
--width-xxs: calc(var(--width-xxl) * 0.2);
--corner-xs: calc(var(--corner-s) / 3);
--corner-s: 2rem;
--corner-m: calc(var(--corner-s) * 2);
--corner-l: calc(var(--corner-s) * 3);
--layer: 0;
}
*, *::before, *::after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
margin-block: 0;
margin-inline: 0;
vertical-align: baseline;
color: var(--black);
font-family: var(--body);
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
html {
scroll-behavior: smooth;
}
body {
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bright);
}
::selection {
color: var(--bright);
background: var(--black);
}
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accessibility);
}
a:focus-visible {
outline-offset: 2px;
}
main, section, article, div, aside, header, footer, menu, nav, figure, figcaption {
display: block;
}
h1, h2, h3, h4, h5, h6, p, li, .title, .subtitle {
width: 100%;
overflow-wrap: break-word;
text-align: left;
}
h1, h2, h3, h4, h5, h6, .title {
font-family: var(--title);
text-wrap: balance;
}
h1, .title {
font-weight: 800;
line-height: 1;
text-transform: uppercase;
letter-spacing: -0.05em;
}
h1 { 
font-size: clamp(1.85rem, 3.25vw, 5rem);
}
.title {
font-size: clamp(1.85rem, 6.5vw, 6rem);
}
h2 { 
font-size: 1.8rem; 
font-weight: 750;
line-height: 1.1;
letter-spacing: -0.03em;
}
h3 { 
font-size: 1.5rem; 
font-weight: 730;
line-height: 1.15;
letter-spacing: -0.01em;
}
h4 { 
font-size: 1.25rem; 
font-weight: 600;
}
p, a, li, ul, ol, .subtitle, .current {
font-family: var(--body);
font-weight: 300;
text-transform: none;
line-height: 1.5;
letter-spacing: 0;
text-wrap: pretty;
}
p, a, li, ul, ol {
font-size: clamp(1rem, 0.85vw, 1.15rem); 
}
.subtitle, .subtitle a {
font-size: clamp(1.15rem, 1.5vw, 1.5rem);
}
p, li, ul, ol, .subtitle {
text-decoration: none;
}
a {
color: var(--makeup-dark);
text-decoration: underline solid var(--makeup-dark) 1px;
text-underline-offset: 0.22em;
}
a:hover {
text-decoration-thickness: 2.5px;
text-underline-offset: 0.25em;
}
strong {
font-weight: 600;
}
.center {
text-align: center;
}
.small {
font-size: clamp(0.8rem, 1.5rem, 0.9rem);
color: var(--black);
}
.alt-background {
background: var(--gray-1);
}
.alt-background-edge {
background: var(--gradient-dark-edge);
}
.shadow-background {
background: var(--gradient-shadow);
}
.fullwidth, 
.section {
width: 100%;
max-width: 100vw;
}
.section {
position: relative;
overflow: clip;
padding: 0 var(--size-m);
}
.layout-100, 
.layout-70, 
.layout-50, 
.layout-30, 
.layout-20 {
width: 100%;
}
.layout-100 {
max-width: var(--width-xxl);
margin: 0 auto;
}
.layout-70 {
max-width: var(--width-l);
}
.layout-50 {
max-width: var(--width-m);
}
.layout-30 {
max-width: var(--width-xs);
}
.layout-20 {
max-width: var(--width-xxs);
}
.flex-center,
.flex-flow,
.flex-tags,
.space-between,
.columns,
.row-reverse {
display: flex;
}
.flex-center {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.flex-flow {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.flex-tags {
flex-wrap: wrap;
align-items: flex-start;
gap: var(--size-m);
}
.space-between {
justify-content: space-between;
align-items: center;
}
.columns {
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
gap: var(--size-m);
}
.row-reverse {
flex-direction: row-reverse;
align-items: flex-start;
gap: var(--size-l);
}
.add-xs-gap {
gap: var(--size-xs);
}
.add-s-gap {
gap: var(--size-s);
}
.add-m-gap {
gap: var(--size-m);
}
.add-l-gap {
gap: var(--size-l);
}
.add-xl-gap {
gap: var(--size-xl);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.sticky {
position: sticky;
top: 0;
}
.emoji-inline {
display: inline-block;
vertical-align: middle;
}
.emoji-block {
display: block;
width: 4rem;
height: 4rem;
margin-bottom: var(--size-s);
}
.body-icon {
width: 1.85rem;
height: 1.85rem;
margin-top: -0.33rem;
}
.heading-icon {
width: 2rem;
height: 2rem;
margin-top: -0.66rem;
}
.top-bar {
z-index: var(--layer);
padding: var(--size-s) var(--size-m);
background: var(--gradient-transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-bottom: 1px solid var(--black);
}
.menu {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: end;
align-items: center;
gap: var(--size-xs) var(--size-m);
}
.menu-item {
width: fit-content;
}
.menu-item a {
font-family: var(--title);
font-weight: 450;
color: var(--black);
letter-spacing: 0.005rem;
text-decoration: none;
border-bottom: 0px solid var(--black);
transition: all 0.07s linear;
}
.menu-item a:hover {
border-bottom: 2px solid var(--black);
}
.button,
.menu .menu-item:last-child a {
display: block;
width: fit-content;
text-decoration: none;
}
.cta,
.menu .menu-item:last-child a {
font-family: var(--title);
font-weight: 540;
color: var(--black);
background: var(--neon);
border-radius: var(--corner-s);
border: none;
transition: all 0.33s ease-out;
}
.cta {
padding: var(--size-s) var(--size-m);
}
.menu .menu-item:last-child a {
padding: var(--size-xs) var(--size-s);
}
.cta:hover,
.menu .menu-item:last-child a:hover {
color: var(--bright);
background: var(--black);
border: none;
box-shadow: 0 0 1.25rem 0.15rem var(--neon);
}
.url {
font-weight: 300;
padding: var(--size-xxs) 0;
color: var(--makeup-dark);
border-bottom: 1px solid var(--makeup-dark);
}
.url:hover {
border-bottom-width: 3px;
padding-bottom: calc(var(--size-xxs) - 2px);
}
.navigation {
z-index: 10;
}
.burger {
display: none;
z-index: 11;
background: none;
cursor: pointer;
}
.burger svg {
width: 2.625rem;
height: 2.625rem;
display: block;
overflow: visible;
}
.burger svg line {
fill: none;
stroke: var(--black);
stroke-width: 2;
stroke-linecap: round;
transform-box: fill-box;
transform-origin: center;
transition: all 0.5s ease;
}
.burger-top {
transform: translateY(0) rotate(0);
}
.burger-mid {
transform: translateX(0);
}
.burger-bot {
transform: translateX(7.3335px) scaleX(0.6667);
}
.burger.is-active .burger-top {
transform: translateY(11px) rotate(45deg);
}
.burger.is-active .burger-mid {
transform: translateX(44px);
opacity: 0;
}
.burger.is-active .burger-bot {
transform: translateX(0) translateY(-11.2px) scaleX(1) rotate(-45deg);
}
.logo, 
.logo svg {
display: block;
overflow: visible;
}
.logo {
width: 11rem;
line-height: 0;
border: 0;
}
.logo-left,
.logo-right {
fill: var(--black);
}
.logo-dot {
fill: var(--neon);
}
.logo-left,
.logo-right,
.logo-dot {
transform-origin: center;
transform-box: fill-box;
transition: all 0.5s ease;
}
.logo:hover .logo-dot {
transform: scale(1.8);
filter: blur(12px);
}
.logo:hover .logo-left {
transform: translateX(-12px);
}
.logo:hover .logo-right {
transform: translateX(12px);
}
footer {
background: var(--gradient-light-reverse);
}
.box {
padding: var(--size-m);
border-radius: var(--corner-s);
background: var(--brighter);
}
.box h3 {
padding-bottom: var(--size-s);
}
.has-glow h1, 
.has-glow h2, 
.has-glow p, 
.has-glow a, 
.has-glow span {
position: relative;
z-index: 1;
}
.glow {
display: block;
position: absolute;
z-index: 0;
pointer-events: none;
width: 40rem;
height: 40rem;
}
.glow-neon {
background: var(--gradient-glow-neon);
opacity: 0.6;
}
.glow-makeup {
background: var(--gradient-glow-makeup);
opacity: 0.8;
}
.to-left {
transform: translateX(-33%) translateY(-45%);
}
.to-right {
transform: translateX(16.5%) translateY(-33%);
}
.page-header,
.page-header-smaller {
padding: var(--size-s) 0;
}
.page-header {
min-height: 30vh;
}
.page-header-smaller {
min-height: 15vh;
}
.spacing-xl {
padding: var(--size-xl) 0;
}
.spacing-xxl {
padding: var(--size-xxl) 0;
}
.is-js-scroll {
will-change: opacity, transform;
}
.fade-in.is-js-scroll,
.fade-in-faster.is-js-scroll {
opacity: 0;
}
.fade-out.is-js-scroll {
opacity: 1;
}
@supports (animation-timeline: view()) {
.fade-in, 
.fade-in-faster, 
.fade-out {
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: view(block);
}
.fade-in {
animation-name: fade-in-anim;
animation-range: cover 10% cover 40%;
}
.fade-in-faster {
animation-name: fade-in-anim;
animation-range: cover 5% cover 20%;
}
.fade-out {
animation-name: fade-out-anim;
animation-range: cover 70% cover 90%;
}
@keyframes fade-in-anim {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out-anim {
from { opacity: 1; }
to { opacity: 0; }
}
}
#contact {
padding-top: var(--size-xl);
} .wpcf7 {
width: 100%;
}
.wpcf7-form {
display: flex;
flex-direction: column;
gap: var(--size-s);
}
.wpcf7-text, .wpcf7-textarea {
width: 100%;
padding: var(--size-xs) var(--size-s);
margin-top: var(--size-xxs);
border: 1px solid var(--black);
border-radius: var(--corner-xs);
}
.wpcf7-text::placeholder, .wpcf7-textarea::placeholder {
color: var(--makeup);
opacity: 0.8;
}
.wpcf7-text:focus, .wpcf7-textarea:focus {
outline-color: var(--neon);
border-color: var(--neon);
}
.wpcf7-not-valid {
border-color: var(--accessibility);
outline-color: var(--accessibility);
}
.wpcf7-acceptance input, 
.wpcf7-acceptance span {
margin: 0;
cursor: pointer;
}
#contact .wpcf7-response-output {
margin: var(--size-s) 0;
padding: var(--size-s);
border-color: var(--accessibility);
}
@media only screen and (max-width: 1080px) {
.subtitle {
line-height: 1.3;
}
.section {
padding: 0 var(--size-s);
}
.row-reverse {
flex-direction: column;
}
.top-bar {
padding: var(--size-s);
}
.spacing-xl {
padding: var(--size-l) 0;
}
.spacing-xxl {
padding: var(--size-xl) 0;
}
}
@media only screen and (max-width: 860px) {
.burger {
display: block;
overflow: visible;
}
.menu {
flex-direction: column;
gap: 1.5rem;
padding: 4.85rem var(--size-m) var(--size-m) var(--size-m);
}
.navigation {
position: absolute;
top: 0;
right: 0;
background: var(--gradient-light-reverse);
border: 1px solid var(--black);
transition: all 0.5s ease;
transform: translateY(-100%);
}
.navigation.is-visible {
transform: translateY(0);
}
.grid-2 {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}.hero {
min-height: 60vh;
}
.hero-image-container {
height: 70vh;
overflow: hidden;
}
.hero-image-wrapper {
display: flex;
align-items: stretch;
height: 100%;
background: var(--bright);
}
.hero-image, 
.column-image,
.revealing-img {
height: 100%;
object-fit: cover;
}
.hero-image {
flex: 0 0 50%;
min-width: 50%;
}
.item-1 {
flex: 1;
}
.item-2 {
flex: 2;
}
.column-image {
width: 100%;
}
.about-wrapper,
.about-summary {
height: 100vh;
background: var(--gradient-cover);
}
.empty-box-about {
height: 50vh;
}
.projects {
position: relative;
padding: var(--size-l) 0;
}
.projects-layer {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.box-projects {
background: var(--white);
z-index: var(--layer);
}
.revealing {
position: relative;
width: 100%;
height: 80vh;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.revealing-img {
position: absolute;
inset: 0;
z-index: var(--layer);
}
.is-revealing {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-image-wrapper.is-js-scroll {
will-change: transform;
}
.revealing-img.is-js-scroll {
opacity: 1;
}
@supports (animation-timeline: view()) {
.hero-image-section {
view-timeline-name: --hero-image-timeline;
view-timeline-axis: block;
}
.hero-image-wrapper {
animation-name: hero-image-anim;
animation-duration: 1ms;
animation-timing-function: linear;
animation-fill-mode: both;
animation-timeline: --hero-image-timeline;
animation-range: cover 25% cover 80%;
}
@keyframes hero-image-anim {
from { transform: translateX(0%); }
to { transform: translateX(-150%); }
}
.revealing {
view-timeline-name: --revealing;
view-timeline-axis: block;
}
.revealing-img {
opacity: 1;
}
.revealing-img:nth-child(1) {
animation: revealing-fade 1ms linear both;
animation-timeline: --revealing;
animation-range: cover 20% cover 32%;
}
.revealing-img:nth-child(2) {
animation: revealing-fade 1ms linear both;
animation-timeline: --revealing;
animation-range: cover 37% cover 50%;
}
.revealing-img:nth-child(3) {
opacity: 1;
}
@keyframes revealing-fade {
from { opacity: 1; }
to { opacity: 0; }
}
}
@media only screen and (max-width: 1080px) {
.columns {
flex-direction: column;
}
.empty-box-about {
height: var(--size-l);
}
.to-right {
width: calc( 100vw - 2 * var(--size-s) );
height: calc( 100vw - 2 * var(--size-s) );
transform: translateX(0) translateY(-33%);
}
}