html{
scroll-behavior: smooth;
}
:root{
--bg:#E4E4E4;
--text:#080808;
}
.word {
white-space: nowrap;
}
.char {
display: inline-block;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:var(--bg);
color:var(--text);
font-family:"Archivo",sans-serif;
}
a{
color:inherit;
text-decoration:none;
}
header{
width:100%;
display:flex;
justify-content:center;
padding:40px 20px;
border-bottom:1px solid rgba(0,0,0,.08);
}
.menu{
/*background:#080808; */
border-radius:999px;
display:flex;
gap:60px;
padding:16px 42px;
}
.menu a{
color: var(--text);
font-size:.82rem;
font-weight:700;
transition:.25s;
}
.menu a:hover{
opacity:.7;
}
.hero{
max-width:1400px;
margin:auto;
min-height:calc(100vh - 120px);
display:flex;
flex-direction:column;
justify-content:center;
padding:0 70px 80px;
}
.job{
font-size:.9rem;
margin-bottom:20px;
}
.hero h1{
font-family:"Archivo Black",sans-serif;
font-size:clamp(4rem,11vw,9rem);
line-height:.9;
letter-spacing:-5px;
margin-bottom:60px;
}
.hero-info{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
}
.left{
width:340px;
font-size:1rem;
line-height:1.4;
}
.right{
text-align:right;
font-size:1rem;
font-weight:500;
}
.btn{
margin:90px auto 0;
font-weight:800;
font-size:1rem;
letter-spacing:.5px;
position:relative;
}
.btn::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:2px;
background:#080808;
transition:.3s;
}
.btn:hover::after{
width:100%;
}
/* ------------------------- */
/* Tablet */
/* ------------------------- */
@media(max-width:992px){
.hero{
padding:40px;
}
.hero-info{
flex-direction:column;
align-items:flex-start;
gap:30px;
}
.right{
text-align:left;
}
}
/* ------------------------- */
/* Mobile */
/* ------------------------- */
@media(max-width:768px){
header{
padding:30px 20px;
}
.menu{
width:100%;
gap:20px;
justify-content:space-around;
padding:14px 12px;
}
.menu a{
font-size:.70rem;
}
.hero{
padding:20px;
}
.hero h1{
letter-spacing:-2px;
margin-bottom:40px;
}
.left{
width:100%;
font-size:.95rem;
}
.right{
font-size:.95rem;
}
.btn{
margin-top:60px;
}
}
.container{
width:min(1300px,90%);
margin:auto;
}
/* ====================== */
.projects{
background:#080808;
color:#E4E4E4;
padding:120px 0;
}
.projects h2{
font-family:"Archivo Black";
font-size:clamp(3rem,7vw,5rem);
line-height:1;
margin-bottom:60px;
}
.project-card{
margin-bottom:80px;
}
.project-card img{
width:100%;
border-radius:6px;
display:block;
}
.project-info{
display:flex;
justify-content:space-between;
margin-top:18px;
font-size:.9rem;
}
.project-info a{
font-weight:700;
}
/* ====================== */
.skills{
padding:90px 0;
}
.skills .container{
display:flex;
justify-content:space-between;
align-items:center;
gap:80px;
}
.skills-title{
font-weight:700;
}
.skills-grid{
display:grid;
grid-template-columns:repeat(8,1fr);
gap:50px;
flex:1;
text-align:center;
font-weight:700;
}
/* ====================== */
.about{
padding:120px 0;
border-top:1px solid rgba(0,0,0,.08);
}
.about-grid{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:80px;
}
.about h2{
margin-top:20px;
font-family:"Archivo Black";
font-size:clamp(2rem,4vw,3.6rem);
line-height:1.05;
}
.about p{
line-height:1.9;
}
.numbers{
grid-column:1/-1;
display:flex;
justify-content:space-between;
margin-top:60px;
}
.numbers h3{
font-size:3rem;
font-family:"Archivo Black";
}
.numbers span{
text-transform:uppercase;
font-size:.85rem;
}
/* ====================== */
.contact{
padding:120px 0;
border-top:1px solid rgba(0,0,0,.08);
}
.contact-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:70px;
}
.contact h2{
font-family:"Archivo Black";
font-size:clamp(2rem,5vw,4rem);
line-height:1;
}
.contact p{
line-height:1.8;
}
.contact-btn{
display:inline-block;
margin-top:35px;
background:#080808;
color:#E4E4E4;
padding:18px 34px;
font-weight:700;
}
/* ====================== */
footer{
border-top:1px solid rgba(0,0,0,.08);
padding:30px 0;
}
.footer{
display:flex;
justify-content:space-between;
font-size:.9rem;
}
/* ====================== */
@media(max-width:900px){
.skills .container,
.about-grid,
.contact-grid{
display:flex;
flex-direction:column;
}
.skills-grid{
grid-template-columns:repeat(2,1fr);
}
.project-info,
.numbers,
.footer{
flex-direction:column;
gap:25px;
}
}
/* ====================== */
/* WORKFLOW */
/* ====================== */
.workflow{
padding:140px 0;
border-top:1px solid rgba(0,0,0,.08);
}
.workflow-tag{
display:block;
margin-bottom:25px;
font-size:.75rem;
font-weight:700;
letter-spacing:3px;
opacity:.45;
}
.workflow-title{
font-family:"Archivo Black";
font-size:clamp(3rem,7vw,5.6rem);
line-height:.95;
letter-spacing:-3px;
margin-bottom:90px;
max-width:900px;
}
.workflow-list{
display:flex;
flex-direction:column;
}
.workflow-item{
display:grid;
grid-template-columns:80px 220px 1fr;
gap:90px;
align-items:start;
padding:45px 0;
border-top:1px solid rgba(0,0,0,.08);
transition:.35s;
}
.workflow-item:last-child{
border-bottom:1px solid rgba(0,0,0,.08);
}
.workflow-item span{
font-size:.85rem;
font-weight:700;
opacity:.35;
}
.workflow-item h3{
font-size:2rem;
font-family:"Archivo Black";
letter-spacing:-1px;
}
.workflow-item p{
max-width:520px;
font-size:1rem;
line-height:1.8;
color:rgba(8,8,8,.75);
}
/* ====================== */
@media(max-width:900px){
.workflow{
padding:90px 0;
}
.workflow-title{
margin-bottom:60px;
}
.workflow-item{
display:flex;
flex-direction:column;
gap:18px;
padding:35px 0;
}
.workflow-item h3{
font-size:1.6rem;
}
}
/* ====================== */
/* MANIFESTO */
/* ====================== */
.manifesto{
padding:220px 0;
border-top:1px solid rgba(0,0,0,.08);
border-bottom:1px solid rgba(0,0,0,.08);
}
.manifesto-title{
font-family:"Archivo Black",sans-serif;
font-size:clamp(3rem,11vw,9rem);
line-height:.88;
letter-spacing:-5px;
text-transform:uppercase;
max-width:1200px;
}
/* ====================== */
.mobile{
display:none;
}
@media(max-width:768px){
.desktop{
display:none;
}
.mobile{
display:block;
margin-left:0;
}
}
.blur-mask{
position:fixed;
bottom:0;
left:0;
width:100%;
height:160px;
pointer-events:none;
backdrop-filter:blur(16px);
background:linear-gradient(
rgba(228,228,228,0),
rgba(228,228,228,.15),
rgba(228,228,228,.55),
rgba(228,228,228,.85)
);
mask-image:linear-gradient(
transparent,
black
);
z-index:999;
}
.language-switch{
display:flex;
align-items:center;
gap:12px;
margin-bottom: 50px;
}
.language-switch button{
background:none;
border:none;
cursor:pointer;
font-family:"Archivo",sans-serif;
font-size:.85rem;
font-weight:700;
color:#080808;
transition:.3s;
}
.language-switch button:hover{
opacity:.5;
}