:root{
--space-xs:.5rem;
--space-sm:1rem;
--space-lg:3rem;
--container:1800px;
--radius-md:16px;
--radius-full:999px;
--icon-lg:26px;
--aspect-video:56.25%;
--work-height:clamp(180px,20vw,260px);
--fs-display:clamp(3.5rem,8vw,6.5rem);
--fs-heading:clamp(1.5rem,3vw,2.2rem);
--fs-body:clamp(.95rem,1.1vw,1.1rem);
--lh-tight:1.01;
--lh-normal:1.2;
--lh-body:1.6;
--font-display-1:"Glitz";
--font-display-2:"Behind";
--font-body:"Inter",sans-serif;
--speed-fast:.3s;
--speed-normal:.4s;
--speed-slow:1s;
--z-nav:1000;
--z-logo:1100;
--z-lightbox:9999;
--btn-py:clamp(8px,1vw,11px);
--btn-px:clamp(16px,2vw,24px);
--bg:#fff;
--text:#000;
--muted:#666;
--border:rgba(0,0,0,.08);
--nav:rgba(255,255,255,.6);
--overlay:rgba(0,0,0,.9);
--white:#fff;
}
@font-face{
font-family:"Glitz";
src:url("Data/Glitz.otf") format("opentype");
font-weight:normal;
font-style:normal;
}
@font-face{
font-family:"Behind";
src:url("Data/Behind.otf") format("opentype");
font-weight:normal;
font-style:normal;
}
@font-face{
font-family:"Inter";
src:url("Data/Inter-Variable.ttf") format("truetype");
font-weight:100 900;
font-style:normal;
font-display:swap;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:var(--font-body);
}
html{
scroll-behavior:smooth;
color-scheme:light dark;
}
body{
background:var(--bg);
color:var(--text);
line-height:var(--lh-body);
overflow-x:hidden;
transition:var(--speed-fast);
}
body.menu-open{
overflow:hidden;
}
h1{
font-family:var(--font-display-2);
font-size:var(--fs-display);
line-height:var(--lh-tight);
}
h2,h3{
font-family:var(--font-display-1);
font-size:var(--fs-heading);
line-height:var(--lh-normal);
}
p{
font-size:var(--fs-body);
line-height:var(--lh-body);
color:var(--muted);
}
h1,h2,h3,p{
max-width:1000px;
margin-inline:auto;
}
.section{
width:100%;
padding:var(--space-lg) 0;
border-top:1px solid var(--border);
}
.container{
max-width:var(--container);
width:92%;
margin:auto;
}
.section .container{
display:flex;
flex-direction:column;
text-align:center;
}
nav{
position:fixed;
top:0;
left:0;
width:100%;
background:var(--nav);
backdrop-filter:blur(12px);
z-index:var(--z-nav);
transition:transform .35s ease;
}
nav.hide{
transform:translateY(-100%);
}
.nav-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:var(--space-sm) 0;
}
nav ul{
display:flex;
gap:var(--space-sm);
list-style:none;
align-items:center;
}
nav a{
color:var(--text);
text-decoration:none;
opacity:.8;
transition:var(--speed-fast);
font-size:var(--fs-body);
}
nav a:hover{
opacity:1;
}
.logo{
color:var(--text);
text-decoration:none;
position:relative;
z-index:var(--z-logo);
transition:var(--speed-fast);
font-size:var(--fs-body);
font-family:var(--font-display-1);
}
.menu-toggle{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}
.menu-toggle span{
width:var(--icon-lg);
height:2px;
background:var(--text);
transition:var(--speed-fast);
}
.hero{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.hero p{
margin-top:var(--space-sm);
}
.hero-buttons{
display:flex;
gap:var(--space-sm);
flex-wrap:wrap;
margin-top:var(--space-sm);
justify-content:center;
}
.btn{
display:inline-block;
padding:var(--btn-py) var(--btn-px);
background:var(--text);
color:var(--bg);
border-radius:var(--radius-full);
text-decoration:none;
transition:var(--speed-fast);
font-size:var(--fs-body);
font-family:var(--font-display-2);
}
.btn:hover{
transform:translateY(-4px);
}
.btn.secondary{
background:transparent;
border:1px solid var(--text);
color:var(--text);
}
.showreel{
margin-top:var(--space-lg);
position:relative;
padding-bottom:var(--aspect-video);
height:0;
overflow:hidden;
border-radius:var(--radius-md);
}
.showreel iframe{
position:absolute;
inset:0;
width:100%;
height:100%;
border:0;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:var(--space-lg);
margin-top:var(--space-lg);
width:100%;
}
.hero-name{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
}
.hero-name img{
height:clamp(7em,17vw,17em);
width:auto;
transform-origin:center;
will-change:transform;
transition:transform var(--speed-fast);
}
.statement{
margin-top:var(--space-lg);
font-size:var(--fs-body);
color:var(--text);
}
.about{
display:grid!important;
grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
gap:var(--space-lg);
align-items:center;
justify-content:center;
text-align:left;
}
.about h2,.about p{
max-width:600px;
text-align:left;
margin:0;
}
.about-avatar img{
width:clamp(180px,50vw,420px);
transform-origin:center;
will-change:transform;
transition:transform var(--speed-fast);
}
.contact-links{
margin-top:var(--space-lg);
display:flex;
gap:var(--space-sm);
flex-wrap:wrap;
justify-content:center;
}
.footer-light{
background:var(--text);
color:var(--bg);
padding:var(--space-lg) 0;
}
.footer-light *{
color:var(--bg);
}
.footer-grid{
display:flex;
flex-wrap:wrap;
gap:var(--space-lg);
align-items:flex-start;
justify-content:space-between;
}
.footer-group{
font-size:var(--fs-body);
}
.footer-heading{
font-weight:600;
margin-bottom:6px;
}
.footer-social{
display:flex;
gap:var(--space-sm);
}
.footer-social img{
width:var(--icon-lg);
height:var(--icon-lg);
}
.footer-name{
font-family:var(--font-display-1);
font-size:var(--fs-body);
}
.footer-role-big{
font-family:var(--font-display-2);
font-size:var(--fs-display);
line-height:var(--lh-tight);
margin:0;
}
.footer-copyright{
flex-basis:100%;
text-align:center;
margin-top:var(--space-xs);
font-size:var(--fs-body);
}
.fade{
opacity:0;
transform:translateY(var(--space-lg));
transition:var(--speed-slow);
}
.fade.show{
opacity:1;
transform:translateY(0);
}
.mobile-home{
display:none;
}
@media(max-width:768px){
.menu-toggle{
display:flex;
}
.nav-links{
position:fixed;
top:0;
right:-100%;
height:100vh;
width:100%;
background:var(--bg);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:var(--space-sm);
transition:var(--speed-normal);
z-index:var(--z-nav);
}
.nav-links.active{
right:0;
}
.mobile-home{
display:block;
font-size:var(--fs-body);
}
body.menu-open .logo{
opacity:0;
pointer-events:none;
}
.nav-links li{
opacity:0;
transform:translateY(var(--space-sm));
transition:var(--speed-normal);
transition-delay:calc(.1s*var(--i));
}
.nav-links.active li{
opacity:1;
transform:translateY(0);
}
}
.masonry{
columns:auto 260px;
column-gap:var(--space-sm);
margin-top:var(--space-lg);
}
.masonry figure{
break-inside:avoid;
margin-bottom:var(--space-sm);
overflow:hidden;
border-radius:var(--radius-md);
}
.masonry img,.masonry video{
width:100%;
display:block;
}
#lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--overlay);
display:none;
align-items:center;
justify-content:center;
z-index:var(--z-lightbox);
}
#lightbox img,#lightbox video{
max-width:90%;
max-height:90%;
}
#lightbox .close{
position:absolute;
top:var(--space-lg);
right:var(--space-lg);
font-size:var(--fs-heading);
color:var(--white);
cursor:pointer;
}
.prev,.next{
display:none;
}
.prev{
left:var(--space-sm);
}
.next{
right:var(--space-sm);
}
#home,#portfolio,#work,#about,#contact{
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
#home{
background-image:url("Data/HeroBG.svg");
}
#portfolio{
background-image:url("Data/PortfolioBG.svg");
}
#work{
background-image:url("Data/WorkBG.svg");
}
#about{
background-image:url("Data/AboutBG.svg");
}
#contact{
background-image:url("Data/ContactBG.svg");
}
.work-carousel{
width:100vw;
margin-left:calc(-50vw + 50%);
overflow:hidden;
margin-top:var(--space-lg);
}
.work-track{
display:flex;
gap:0;
width:max-content;
animation:workScroll 35s linear infinite;
align-items:flex-start;
}
.work-track img,.work-track video{
height:var(--work-height);
width:auto;
border-radius:0;
object-fit:cover;
display:block;
}
@keyframes workScroll{
from{transform:translateX(0);}
to{transform:translateX(-50%);}
}
.cta-video{
border-radius:var(--radius-md);
overflow:hidden;
width:100%;
margin-top:var(--space-lg);
}
@media(prefers-color-scheme:dark){
:root{
--bg:#0a0a0a;
--text:#fff;
--muted:#b5b5b5;
--border:#1a1a1a;
--nav:rgba(0,0,0,.6);
}
}