@layer reset,base,components,utilities;@font-face{font-family:Seymore;src:url(/fonts/Seymorescript-OVJm4.otf) format("opentype")}@font-face{font-family:Butler;src:url(/fonts/Butler_ExtraBold_Stencil.otf) format("opentype");font-weight:700}html{--clr-blue-500: #2070f4;--clr-red-700: #b40000;--clr-red-500: #ff5a5a;--clr-gray-900: #050505;--clr-gray-700: #232325;--clr-gray-300: #888;--clr-text: white;--ff-body: "Josefin Sans", sans-serif;--ff-script: "Seymore", serif;--ff-headline: "Butler", serif;--fw-normal: 300;--fw-bold: 400;--fs-xxl: clamp(30px, 16px + 4.375vw, 100px);--fs-lg: clamp(24px, 1rem + 2vw, 42px);--fs-normal: clamp(16px, 1rem + .2vw, 18px);--fs-hero-tagline: clamp(48px, 32px + 10vw, min(20vmin, 270px));--fs-contact-tagline: clamp(48px, 24px + 8vw, 180px);--claim-shadow: drop-shadow(3px 3px 6px black) drop-shadow(3px 3px 12px black)}@layer reset{body,p{margin:0;padding:0}a{color:unset}:is(h1,h2,h3){margin:0}img,svg{display:block;max-width:100%;height:auto;font-style:italic}ul:not([data-bulleted]){margin:0;padding:0;list-style:none}}@layer base{html{@media(prefers-reduced-motion:no-preference){scroll-behavior:smooth}}body{font-family:var(--ff-body);font-size:var(--fs-normal);font-weight:var(--fw-normal);line-height:1.15;color:var(--clr-text);background-color:var(--clr-gray-700)}h1{font-family:var(--ff-script)}h2{font-family:var(--ff-headline);font-size:var(--fs-xxl);line-height:.88}h3{font-family:var(--ff-headline);font-size:var(--fs-lg)}p{line-height:1.5}[id]{scroll-margin-top:3rem}}@layer components{hgroup{width:fit-content;display:grid;gap:clamp(1rem,2.5vw,2rem);>p{font-weight:var(--fw-bold);text-transform:uppercase;color:var(--clr-red-500)}}.text-only{&:is(body){margin:1rem auto;padding-inline:2rem;max-width:800px}h1,h2,h3,h4{font-family:var(--ff-body);margin-bottom:.5em;margin-top:.75em}h1{font-size:4rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.2rem}p+p{margin-top:.5em}}.underline-decoration{background-position:bottom;background-size:100% 50%;background-repeat:no-repeat;background-origin:padding-box;&.blue{background-image:url(/underline-blue.svg)}&.red{background-image:url(/underline-red.svg)}}header{contain:paint;position:relative;--min-hero-height: 600px;--hero-height: min(100vh, max(100vmin, var(--min-hero-height)));height:var(--hero-height);background-color:#000;>*{grid-area:stack}[data-hero-leaves]{position:absolute;right:-1rem;z-index:-2;filter:drop-shadow(-3px -17px 20px rgb(255 255 255 / .1));margin-block:auto;inset-block:0;@supports (animation-timeline: scroll()){animation:parallax linear;animation-timeline:scroll();margin-block:0;--translate-y: 10vh;--parallax-speed: 15}}[data-hero-background]{position:absolute;z-index:-3;object-fit:cover}[data-hero-tagline]{position:absolute;z-index:-1;display:flex;height:calc(70% + var(--fs-hero-tagline));margin-left:clamp(5%,5vw,10%);aside{align-self:end;font-size:var(--fs-hero-tagline);font-family:var(--ff-script);p{line-height:.88;text-align:center;padding-inline:.3em .6em;padding-bottom:.1em;&:first-line{color:var(--clr-blue-500)}}}}@media(width<1200px){nav>:nth-child(n+2){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}nav{font-weight:var(--fw-bold);align-self:flex-start;padding-top:2rem;display:flex;justify-content:space-around;align-items:center;[data-logo]{width:290px;height:min(25vh,150px);fill:var(--clr-text);filter:var(--claim-shadow)}a{text-decoration:none;text-transform:uppercase;color:var(--clr-gray-300);&:nth-child(2){order:1}&:nth-child(3){order:2}&:nth-child(4){order:3}&:nth-child(1){order:4}&:nth-child(5){order:5}&:nth-child(6){order:6}&:nth-child(7){order:7}}}nav-menu{--spacing: 3rem;--transition-time: .3s;justify-self:end;position:absolute;@media(width>1200px){display:none}width:calc(var(--spacing));top:calc(var(--spacing) * .5);right:calc(var(--spacing) * .5);padding:calc(var(--spacing) * .5);label[for=menu-toggle]{stroke-width:.8;color:var(--clr-gray-300);cursor:pointer;svg line{transition:opacity var(--transition-time) linear,transform var(--transition-time) linear}}input{display:none}nav-menu-popover{--translate-x: 100%;display:grid;background-color:var(--clr-gray-700);margin-top:1rem;padding:1rem .5rem;right:calc(var(--spacing) * -.5);text-transform:uppercase;position:absolute;width:max-content;line-height:1.5;transition-property:transform;transition-duration:var(--transition-time);transition-timing-function:ease-in-out;transform:translate(var(--translate-x));a{padding:.5rem 1rem;font-size:20px;line-height:1}}input[type=checkbox]:checked+nav-menu-popover{--translate-x: 0}&:has(input[type=checkbox]:checked){label svg{line:nth-child(1){transform:rotate(45deg)}line:nth-child(2){opacity:0}line:nth-child(3){transform:rotate(-45deg)}}}}}footer{width:fit-content;margin:1rem auto;padding-inline:1rem;text-align:center}section{--section-padding-block: clamp(4rem, 15vw, 20rem);--section-padding-inline: clamp(1.5rem, 6.8vw, 10rem);--content-padding-left: clamp(2rem, 6vw, 6rem);--content-padding-left-lg: clamp(2rem, 6vw, 6rem);--headline-gap: clamp(1rem, 3vw, 2rem);padding-block:var(--section-padding-block);padding-inline:var(--section-padding-inline);--content-max-width: 50ch;p{max-width:var(--content-max-width);a{font-weight:var(--fw-bold)}}hgroup{margin-bottom:var(--headline-gap)}hgroup~*{padding-left:var(--content-padding-left)}&:first-of-type,&:has(section-graphic:first-child){--content-padding-left: var(--content-padding-left-lg)}}checkered-list{display:grid;grid-template:minmax(0,1fr) minmax(0,1fr) / minmax(0,1fr) minmax(0,1fr);max-width:var(--content-max-width);color:#000;margin-top:var(--headline-gap, 3rem);@media(width<650px){--content-padding-left: 0;checkered-item{gap:.5rem;padding-block:1rem}}}checkered-item{background-color:var(--checkered-bg);display:grid;place-items:center;padding:clamp(.5rem,2vw,1rem);text-align:center;grid-template-rows:max-content max-content auto;gap:.5em;svg{max-width:35%;aspect-ratio:1 /1}h3{color:var(--checkered-text);line-height:1}li+li{margin-top:.3em}--checkered-bg: white;--checkered-text: var(--clr-red-500);&:nth-child(1),&:nth-child(4){--checkered-bg: var(--clr-red-500);--checkered-text: white}}.icon-insta,.icon-mail,.icon-phone{list-style-type:none;display:flex;gap:1em;align-items:center;>*{flex-basis:0;flex-grow:1}+li{margin-top:1em}&:before{line-height:0;width:2em}}.icon-insta:before{content:url(/ironleaves-design-freelancer-grafikdesign-illustration-about-contact-instagram.svg)}.icon-mail:before{content:url(/ironleaves-design-freelancer-grafikdesign-illustration-about-contact-mail.svg)}.icon-phone:before{content:url(/ironleaves-design-freelancer-grafikdesign-illustration-about-contact-telephone.svg)}}@layer utilities{.fill-blue{fill:var(--clr-blue-500)}.fill-dark-red{fill:var(--clr-red-700)}.fill-red{fill:var(--clr-red-500)}.fill-white{fill:#fff}.fill-black{fill:var(--clr-gray-900)}.flow{*+*{margin-top:var(--headline-gap, 1.5rem)}}[data-section=about]{display:grid;contain:paint;position:relative;grid-template:"graphics" auto "heading" auto "text" auto / auto;@media(width>=900px){grid-template:"heading graphics" auto "text graphics" 1fr / auto 1fr}>hgroup{grid-area:heading}>.flow{grid-area:text}h2{padding-right:clamp(.4em,6.25vw,1em);padding-bottom:.2em}section-graphic{display:contents;img,svg{grid-area:graphics;z-index:-1}img{max-width:40vw;justify-self:end;@media(width>=900px){animation:parallax linear;animation-timeline:view(block calc(-1.5 * var(--section-padding-block)));--translate-y: -15vh;--parallax-speed: clamp(1, .3vw / 1px, 5);max-width:25vw;margin-right:-5%;position:absolute;justify-self:initial}}svg{position:absolute;max-width:75vw;@media(width<900px){justify-self:end;transform:translate(50%) translateY(-25%)}@media(width>=900px){animation:parallax linear;animation-timeline:view(block calc(-1.5 * var(--section-padding-block)));--parallax-speed: 10;--translate-y: -50%;--translate-x: -5%}}}}[data-section=marketing]{display:grid;contain:paint;--fs-tagline-calc: 26px + 6.5vw;--fs-marketing-tagline: clamp(49px, var(--fs-tagline-calc), 150px);@media(width>=900px){grid-template:"graphics content ." auto / minmax(auto,900px) minmax(400px,max-content) auto;section-graphic{grid-area:graphics}marketing-content{grid-area:content}--fs-tagline-calc: 10vw - 40px}section-graphic{margin-bottom:2rem;@media(width<900px){max-width:75%;justify-self:end}display:grid;grid-template-areas:"stack";place-items:end;>*{grid-area:stack;@media(width>=900px)and (prefers-reduced-motion:no-preference){@supports (animation-timeline: view()){animation:parallax linear;animation-timeline:view(block calc(-2 * var(--section-padding-block)));&[data-chameleon],&[data-claim]{--parallax-speed: 5;--translate-y: -30vh}&[data-underline]{--translate-y: -45vh;--parallax-speed: 7.5}}}}>img{z-index:-1;--translate-x: 35%;--scale-x: calc(var(--scale-x-magnitude, 1) * var(--flip-x));--flip-x: -1;transform:translate(var(--translate-x, 0%)) translateY(var(--translate-y, 0%)) scale(var(--scale-x, 1),var(--scale-y, 1));@media(width>=900px){--flip-x: 1;--translate-x: -45%}}[data-underline]{--scale-x-magnitude: 1.7}[data-claim]{font-family:var(--ff-script);font-size:var(--fs-marketing-tagline);line-height:.9;filter:var(--claim-shadow);[data-indent]{display:block;margin-left:.56em}@media(width>=900px){justify-self:start}}}}[data-section=illustrations]{contain:paint;display:grid;grid-template:". graphics" auto "heading heading" auto "content content" auto / 1fr 1fr;@media(width>=900px){grid-template:"heading graphics ." auto "content graphics ." 1fr / minmax(400px,700px) minmax(400px,700px) auto}>hgroup{grid-area:heading}>.flow{grid-area:content}section-graphic{grid-area:graphics;display:grid;margin-right:-25%;>img{&:nth-child(2){margin-top:-25%;margin-right:-3%;max-width:60%;justify-self:end}@media(width>=900px){animation:parallax linear;animation-timeline:view(block calc(-2 * var(--section-padding-block)));&:nth-child(1){--parallax-speed: 4;--translate-y: -10vh}&:nth-child(2){--parallax-speed: 2}}}}}[data-section=photography]{display:grid;contain:paint;grid-template:"heading" auto "content" auto "graphics" auto / auto;@media(width>=900px){grid-template:"graphics heading ." auto "graphics content ." auto "graphics . ." auto / minmax(300px,900px) minmax(400px,max-content) auto}>hgroup{grid-area:heading}>.flow{grid-area:content}section-graphic{grid-area:graphics;display:grid;grid-template-areas:"stack";@media(width<900px){margin-inline:-10% 10%}>*{grid-area:stack;@media(width>=900px){animation:parallax linear;animation-timeline:view(block calc(-2 * var(--section-padding-block)));&:nth-child(1){--parallax-speed: 10;--translate-y: -50vh}&:nth-child(2){--parallax-speed: 5;--translate-y: -30vh}}}[data-photo-hand]{place-self:center;width:50%}}}[data-section=freelancer]{display:grid;grid-template-areas:"stack";background-color:var(--clr-red-500);padding-block:0;padding-left:0;--content-max-width: 70ch;@media(width>=1700px){>*{grid-area:stack}}:nth-child(n+2){justify-self:end}aside{--margin-block: .135em -.115em;font-family:var(--ff-headline);font-size:var(--fs-contact-tagline);line-height:.73;width:min-content;word-spacing:100vw;text-box:text alphabetic;margin-block:var(--margin-block);@supports (text-box: text alphabetic){--margin-block: 0}}h3{font-family:var(--ff-body);text-transform:uppercase}.content{--padding-block: 4rem;box-sizing:border-box;display:grid;grid-auto-rows:auto;height:100%;align-content:space-evenly;padding-block:var(--padding-block);padding-left:var(--content-padding-left);@media(width>=1700px){--padding-block: 0;--headline-gap: 0;align-self:center}}}[data-section=contact]{display:grid;overflow-x:clip;grid-template:"tagline tagline" auto "content graphics" auto / 3fr 2fr;@media(width>=900px){grid-template:"tagline graphics" auto "content graphics" auto / 3fr 2fr}background-color:var(--clr-blue-500);.tagline{grid-area:tagline;font-family:var(--ff-script);font-size:var(--fs-contact-tagline);line-height:.88}section-graphic{grid-area:graphics;margin-right:-50%;@media(width>=900px){animation:parallax linear;animation-timeline:view(block calc(-2 * var(--section-padding-block)));--parallax-speed: 3;--translate-y: -15vh}}.content{grid-area:content;padding-left:var(--content-space-left);margin-top:clamp(3rem,16px + 7vw,8rem)}ul{margin-top:2rem}a{text-decoration:none}}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media(prefers-reduced-motion:no-preference){@keyframes parallax{0%{transform:translate(var(--translate-x, 0%)) translateY(var(--translate-y, 0%)) scale(var(--scale-x, 1),var(--scale-y, 1))}to{transform:translate(var(--translate-x, 0%)) translateY(calc(var(--translate-y, 0%) + var(--parallax-base-speed, 100px) * var(--parallax-speed, 1))) scale(var(--scale-x, 1),var(--scale-y, 1))}}}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:300;src:url(/_astro/josefin-sans-vietnamese-300-normal.CYSpmMwP.woff2) format("woff2"),url(/_astro/josefin-sans-vietnamese-300-normal.CIl7uc20.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:300;src:url(/_astro/josefin-sans-latin-ext-300-normal.Bd7KVg_i.woff2) format("woff2"),url(/_astro/josefin-sans-latin-ext-300-normal.C3BJt8Gj.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:300;src:url(/_astro/josefin-sans-latin-300-normal.jK6vcIgA.woff2) format("woff2"),url(/_astro/josefin-sans-latin-300-normal.BxpWkS1B.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/_astro/josefin-sans-vietnamese-400-normal.5bZRxDiL.woff2) format("woff2"),url(/_astro/josefin-sans-vietnamese-400-normal.7lki-pri.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/_astro/josefin-sans-latin-ext-400-normal.WydUZGG0.woff2) format("woff2"),url(/_astro/josefin-sans-latin-ext-400-normal.GP5qjHwf.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Josefin Sans;font-style:normal;font-display:swap;font-weight:400;src:url(/_astro/josefin-sans-latin-400-normal.Bw73c5y2.woff2) format("woff2"),url(/_astro/josefin-sans-latin-400-normal.OLNf33Pm.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}