/* Reset */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where( :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *) ) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* Utopia space */ /* @link https://utopia.fyi/space/calculator?c=320,18,1.22,1680,25,1.43,6,1,414-1440&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-xl|m-2xl|2xl-4xl&g=s,l,xl,12 */ :root { /* Space 3xs: 5px → 6px */ --space-3xs: clamp(0.3125rem, 0.2978rem + 0.0735vi, 0.375rem); /* Space 2xs: 9px → 13px */ --space-2xs: clamp(0.5625rem, 0.5037rem + 0.2941vi, 0.8125rem); /* Space xs: 14px → 19px */ --space-xs: clamp(0.875rem, 0.8015rem + 0.3676vi, 1.1875rem); /* Space s: 18px → 25px */ --space-s: clamp(1.125rem, 1.0221rem + 0.5147vi, 1.5625rem); /* Space m: 27px → 38px */ --space-m: clamp(1.6875rem, 1.5257rem + 0.8088vi, 2.375rem); /* Space l: 36px → 50px */ --space-l: clamp(2.25rem, 2.0441rem + 1.0294vi, 3.125rem); /* Space xl: 54px → 75px */ --space-xl: clamp(3.375rem, 3.0662rem + 1.5441vi, 4.6875rem); /* Space 2xl: 72px → 100px */ --space-2xl: clamp(4.5rem, 4.0882rem + 2.0588vi, 6.25rem); /* Space 3xl: 108px → 150px */ --space-3xl: clamp(6.75rem, 6.1324rem + 3.0882vi, 9.375rem); /* Space 4xl: 126px → 175px */ --space-4xl: clamp(7.875rem, 7.1544rem + 3.6029vi, 10.9375rem); /* One-up pairs */ /* Space 3xs-2xs: 5px → 13px */ --space-3xs-2xs: clamp(0.3125rem, 0.1949rem + 0.5882vi, 0.8125rem); /* Space 2xs-xs: 9px → 19px */ --space-2xs-xs: clamp(0.5625rem, 0.4154rem + 0.7353vi, 1.1875rem); /* Space xs-s: 14px → 25px */ --space-xs-s: clamp(0.875rem, 0.7132rem + 0.8088vi, 1.5625rem); /* Space s-m: 18px → 38px */ --space-s-m: clamp(1.125rem, 0.8309rem + 1.4706vi, 2.375rem); /* Space m-l: 27px → 50px */ --space-m-l: clamp(1.6875rem, 1.3493rem + 1.6912vi, 3.125rem); /* Space l-xl: 36px → 75px */ --space-l-xl: clamp(2.25rem, 1.6765rem + 2.8676vi, 4.6875rem); /* Space xl-2xl: 54px → 100px */ --space-xl-2xl: clamp(3.375rem, 2.6985rem + 3.3824vi, 6.25rem); /* Space 2xl-3xl: 72px → 150px */ --space-2xl-3xl: clamp(4.5rem, 3.3529rem + 5.7353vi, 9.375rem); /* Space 3xl-4xl: 108px → 175px */ --space-3xl-4xl: clamp(6.75rem, 5.7647rem + 4.9265vi, 10.9375rem); /* Custom pairs */ /* Space s-xl: 18px → 75px */ --space-s-xl: clamp(1.125rem, 0.2868rem + 4.1912vi, 4.6875rem); /* Space m-2xl: 27px → 100px */ --space-m-2xl: clamp(1.6875rem, 0.614rem + 5.3676vi, 6.25rem); /* Space 2xl-4xl: 72px → 175px */ --space-2xl-4xl: clamp(4.5rem, 2.9853rem + 7.5735vi, 10.9375rem); } /* Utopia font-sizes */ /* @link https://utopia.fyi/type/calculator?c=320,18,1.22,1680,25,1.43,6,1,414-1440&s=0.75|0.5|0.25,1.5|2|3|4|6,s-xl|m-2xl&g=s,l,xl,12 */ :root { /* Step -1: 14.7541px → 17.4825px */ --step--1: clamp(0.9221rem, 0.882rem + 0.2006vi, 1.0927rem); /* Step 0: 18px → 25px */ --step-0: clamp(1.125rem, 1.0221rem + 0.5147vi, 1.5625rem); /* Step 1: 21.96px → 35.75px */ --step-1: clamp(1.3725rem, 1.1697rem + 1.014vi, 2.2344rem); /* Step 2: 26.7912px → 51.1225px */ --step-2: clamp(1.6745rem, 1.3166rem + 1.7891vi, 3.1952rem); /* Step 3: 32.6853px → 73.1052px */ --step-3: clamp(2.0428rem, 1.4484rem + 2.9721vi, 4.5691rem); /* Step 4: 39.876px → 104.5404px */ --step-4: clamp(2.4923rem, 1.5413rem + 4.7547vi, 6.5338rem); /* Step 5: 48.6487px → 149.4928px */ --step-5: clamp(3.0405rem, 1.5575rem + 7.415vi, 9.3433rem); /* Step 6: 59.3515px → 213.7747px */ --step-6: clamp(3.7095rem, 1.4385rem + 11.3546vi, 13.3609rem); } /* Fonts */ @font-face { font-family: "PP Neue Montreal"; font-weight: 500; font-style: normal; src: url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "PP Editorial New"; font-weight: 200; font-style: normal; src: url("../fonts/PPEditorialNew-Ultralight.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "PP Editorial New"; font-weight: 200; font-style: italic; src: url("../fonts/PPEditorialNew-UltralightItalic.woff2") format("woff2"); font-display: swap; } /* Vars */ :root { /* typography tokens */ --font-default: "PP Neue Montreal", sans-serif; --font-serif: "PP Editorial New", serif; --line-height-xs: 0.9; --line-height-sm: 1; --line-height-md: 1.3; --line-height-lg: 1.45; --font-weight-default: 500; --font-weight-serif: 200; --font-paragraph: var(--font-weight-default) var(--step-0) / var(--line-height-lg) var(--font-default); --font-hero: var(--font-weight-default) var(--step-6) / var(--line-height-xs) var(--font-default); --font-intro: var(--font-weight-serif) var(--step-2) / var(--line-height-md) var(--font-serif); --font-h2: var(--font-weight-default) var(--step-2) / var(--line-height-md) var(--font-default); --font-work-list: var(--font-weight-serif) var(--step-2) / var(--line-height-md) var(--font-serif); /* colors */ --color-brand: #caa5ea; --color-white: #fff; --color-white-30: rgba(255, 255, 255, 0.3); --color-black: #222; --color-black-30: rgba(34, 34, 34, 0.3); --color-black-80: rgba(34, 34, 34, 0.8); /* borders / radius / lines */ --border: 1px solid var(--color-black); --border-light: 1px solid var(--color-black-30); /* transitions */ --transition: 0.1s ease-in-out; --transition-medium: 0.2s ease-in-out; --transition-long: 0.4s ease-in-out; } /* Global */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-default); font-size: var(--step-0); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: var(--color-brand); color: var(--color-black); line-height: var(--line-height-lg); font-weight: var(--font-weight-default); transition: background-color 0.3s ease-in-out; width: 100%; } :focus:not(:focus-visible) { outline: 0; box-shadow: none; } :focus { outline: 2px solid #0000ff; outline-offset: 2px; box-shadow: 0 0 0 6px #fff; } img { display: block; } figcaption { font-family: var(--font-default); font-weight: var(--font-weight-default); font-size: var(--step--1); padding: var(--space-xs) 0 0 0; line-height: var(--line-height-md); color: var(--color-black-80); } h2 { font: var(--font-h2); } h2:first-of-type { margin-top: 0; } .richtext p { font: var(--font-paragraph); margin-top: 1em; } .richtext p:first-of-type { margin-top: 0; } .richtext p > a { text-decoration: underline; } .richtext p.small { font-size: var(--step--1); color: var(--color-black-80); } /* Layout */ :root { --grid-max-width: 105rem; /* 1680px */ --grid-gutter: var(--space-s-xl); --grid-outer-margin: var(--space-m-2xl); --grid-columns: 12; } .container { max-width: var(--grid-max-width); padding-inline: var(--grid-outer-margin); margin-inline: auto; width: 100%; } .grid { display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(var(--grid-columns), [col-start] 1fr); } .grid > * { grid-column: col-start / span var(--grid-columns); } /* Header */ .header { padding: var(--space-m-l) 0 var(--space-m-l) 0; position: relative; margin-bottom: var(--space-m-l); } .header-inner { display: flex; align-items: center; } .logo { z-index: 999; position: relative; display: flex; align-items: center; } .logo svg { /* 28px → 40px */ height: clamp(1.75rem, calc(1.57rem + 0.88vw), 2.5rem); width: auto; display: inline-block; fill: var(--color-black); transition: fill 0.2s ease-out; transition-delay: 0.3s; } .logo-text { /* 12.3px → 18px */ font-size: clamp(0.77rem, calc(0.68rem + 0.42vw), 1.13rem); line-height: var(--line-height-md); padding-left: 0.8em; margin-left: 0.8em; border-left: var(--border-light); transition: color 0.2s ease-out, border 0.2s ease-out; transition-delay: 0.3s; white-space: nowrap; } .header .btn { /* 12.3px → 18px */ font-size: clamp(0.77rem, calc(0.68rem + 0.42vw), 1.13rem); margin-left: auto; border: var(--border); display: inline-block; display: none; background-color: var(--color-black); color: var(--color-brand); padding: var(--space-2xs) var(--space-xs); line-height: var(--line-height-sm); border-radius: 999px; cursor: pointer; position: relative; transition: all 0.2s ease-in-out; } .header .btn:hover { background-color: var(--color-black-80); border-color: var(--color-black-80); } @media only screen and (min-width: 768px) { .header .btn { padding: var(--space-xs) var(--space-s); display: inline-block; } } /* Intro */ .home-intro .grid { align-items: center; } .intro { font: var(--font-intro); text-wrap: balance; } .intro a { display: inline-block; text-decoration-line: underline; text-decoration: underline 0.05em; text-underline-offset: 0.1em; transition: text-decoration 0.2s ease-in-out; } .intro a:hover { text-decoration: underline 0.15em var(--color-black-30); } .avatar { max-width: 100%; aspect-ratio: 1 / 1; grid-column: col-start / span 5; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--space-2xs); mix-blend-mode: multiply; } @media only screen and (min-width: 768px) { .avatar { grid-column: col-start / span 4; } .intro { grid-column: col-start 5 / span 8; font-size: var(--step-2); } } @media only screen and (min-width: 1024px) { .avatar { grid-column: col-start / span 3; } .intro { grid-column: col-start 4 / span 7; } } /* About text */ .about-text .grid { border-top: 1px solid var(--color-black-30); margin-top: var(--space-xl-2xl); padding-top: var(--space-xl-2xl); } .about-text .richtext { container-name: richtext; container-type: inline-size; } .about-text h2 { position: sticky; top: var(--space-m); } @media only screen and (min-width: 768px) { .about-text .heading { grid-column: col-start / span 4; } .about-text .richtext { grid-column: col-start 5 / span 8; } } @media only screen and (min-width: 1024px) { .about-text .heading { grid-column: col-start / span 5; } .about-text .richtext { grid-column: col-start 6 / span 7; } } .gallery { display: grid; grid-template-columns: 1fr; grid-gap: var(--space-m) var(--space-xs); margin: var(--space-l-xl) 0; background-color: var(--color-brand); position: relative; } .about-image { } .about-image img { width: 100%; object-fit: cover; border-radius: var(--space-2xs); aspect-ratio: 3 / 2; mix-blend-mode: multiply; } @container richtext (width > 520px) { .gallery { grid-template-columns: 1fr 1fr; } .about-image img { aspect-ratio: 1 / 1; } } .work-list { list-style: none; margin: var(--space-l-xl) 0; font: var(--font-work-list); } .work-list li { display: inline; } .work-list li:after { content: " •"; color: var(--color-black-30); font-feature-settings: "ss02" on; } .work-list li:last-of-type:after { content: ""; } /* Contact card */ .contact-card { background-color: var(--color-black); border-radius: var(--space-s); text-align: center; padding: var(--space-2xl-3xl) var(--space-s-xl); margin-top: var(--space-xl-2xl); } .contact-card h2 { color: var(--color-brand); font-family: var(--font-serif); font-weight: var(--font-weight-serif); font-size: var(--step-4); line-height: var(--line-height-sm); margin-bottom: 0.25em; } .contact-card p { color: var(--color-brand); } .contact-card .btn-group { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: var(--space-xs); margin-top: var(--space-m); } .contact-card .btn { color: var(--color-brand); border: 1px solid var(--color-brand); display: inline-block; /* color: var(--color-brand); */ padding: var(--space-s) var(--space-m); font-size: var(--step--1); line-height: var(--line-height-sm); border-radius: 999px; cursor: pointer; position: relative; transition: all 0.2s ease-in-out; /* text-transform: uppercase; letter-spacing: 0.02em; */ } @media only screen and (min-width: 768px) { .contact-card .btn { font-size: var(--step-0); } } .contact-card .btn:hover { color: var(--color-black); background: var(--color-brand); } /* Footer */ .footer { margin: var(--space-l) 0 var(--space-xl-2xl); } .footer a { text-decoration-line: underline; text-decoration: underline 0.05em; text-underline-offset: 0.2em; transition: all 0.2s ease-in-out; } .footer a:hover { color: var(--color-black); }