*{
box-sizing:border-box;
}
body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:#fcfcfb;
color:#444;
}
a{
color:inherit;
}
.container{
width:min(900px,90%);
margin:auto;
} .site-header{
width:100%;
padding:20px 0;
position:relative;
z-index:10;
border-bottom:1px solid #eee;
}
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
} .logo a{
font-size:22px;
font-weight:600;
text-decoration:none;
letter-spacing:-0.5px;
} .menu{
display:flex;
align-items:center;
gap:32px;
list-style:none;
padding:0;
margin:0;
}
.menu li{
list-style:none;
}
.menu li a{
text-decoration:none;
color:#555;
font-size:15px;
transition:.3s;
}
.menu li a:hover{
color:#111;
} .menu-toggle{
display:none;
background:none;
border:0;
font-size:26px;
cursor:pointer;
} .hero{
position:relative;
padding:80px 0;
overflow:hidden;
}
.hero::after{
content:"";
position:absolute;
top:0;
right:0;
width:55%;
height:100%;
background-image:
linear-gradient(
to right,
#fcfcfb 0%,
transparent 40%
),
url(//bamz.co.id/wp-content/themes/bamz-theme/assets/images/studio.png);
background-size:cover;
background-position:center;
opacity:.50;
z-index:0;
}
.hero .container{
position:relative;
z-index:1;
}
.hero h1{
font-size:68px;
letter-spacing:-3px;
margin:30px 0;
font-weight:600;
line-height:1.1;
}
.intro{
font-size:23px;
line-height:1.8;
max-width:550px;
color:#555;
} .journal{
border-top:1px solid #eee;
}
.journal-row{
display:grid;
grid-template-columns:160px 1fr;
gap:50px;
padding:55px 0;
border-bottom:1px solid #eee;
}
.date{
font-size:14px;
color:#999;
align-content:center;
}
.text{
max-width:650px;
}
.highlight{
font-size:26px;
line-height:1.6;
}
.text p{
line-height:1.9;
font-size:18px;
} .text ul{
list-style:none;
padding:0;
margin:0;
}
.text li{
padding:16px 0;
border-bottom:1px solid #eee;
font-size:19px;
} .posts a{
display:block;
padding:18px 0;
font-size:20px;
text-decoration:none;
border-bottom:1px solid #eee;
}
.posts a:hover{
color:#2563eb;
} .page-content{
padding:30px 0;
}
.single-page .date{
font-size:14px;
color:#999;
margin-bottom:30px;
}
.single-page h1{
font-size:48px;
letter-spacing:-2px;
margin-bottom:40px;
}
.content p{
font-size:18px;
line-height:1.7;
margin-bottom:30px;
}
.content h2{
margin-top:40px;
} .case-header{
padding:70px 0;
background:linear-gradient(
120deg,
#ffffff 0%,
#f5f5f5 50%,
#ecece8 100%
);
}
.case-header span{
font-size:13px;
color:#888;
}
.case-header h1{
font-size:42px;
font-weight:600;
letter-spacing:-1.5px;
margin:18px 0;
}
.case-header p{
font-size:17px;
color:#666;
max-width:600px;
line-height:1.7;
}
.case-item{
display:grid;
grid-template-columns:60px 1fr;
gap:30px;
padding:55px 0;
border-top:1px solid #eee;
}
.case-item:first-child {
border-top: none;
}
.case-number{
font-size:13px;
color:#999;
padding-top:5px;
} .case-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:45px;
align-items:center;
} .case-image img{
width:100%;
object-fit:cover;
border-radius:14px;
display:block;
border:1px solid #eee;
transition:.35s;
}
.case-image img:hover{
transform:scale(1.015);
} .case-meta{
font-size:12px;
color:#2563eb;
margin-bottom:10px;
text-transform:uppercase;
letter-spacing:.5px;
font-weight: 400;
}
.case-info h2{
font-size:32px;
font-weight:500;
letter-spacing:-.5px;
margin:0 0 15px;
}
.case-info p{
font-size:17px;
line-height:1.75;
color:#666;
max-width:620px;
}
.case-tech{
margin-top:18px;
font-size:14px;
color:#555;
}
.case-info a{
display:inline-block;
margin-top:22px;
font-size:15px;
color:#111;
text-decoration:none;
}
.case-info a:hover{
color:#2563eb;
} @media(max-width:700px){
.case-item{
grid-template-columns:1fr;
gap:15px;
}
.case-header h1{
font-size:34px;
}
.case-content{
grid-template-columns:1fr;
gap:25px;
}
.case-info h2{
font-size:27px;
}
} @media(max-width:700px){
.container{
width:90%;
} .header-inner{
flex-direction:row;
justify-content:space-between;
align-items:center;
}
.site-header{
padding:25px 0;
}
.logo a{
font-size:20px;
}
.menu-toggle{
display:block;
}
.main-nav{
position:absolute;
top:75px;
left:0;
width:100%;
background:#fcfcfb;
display:none;
padding:20px 5%;
border-top:1px solid #eee;
}
.main-nav.active{
display:block;
}
.menu{
width:100%;
flex-direction:column;
gap:18px;
align-items:flex-start;
} .hero{
padding:30px 0;
}
.hero::after{
opacity:.3;
}
.hero h1{
font-size:42px;
letter-spacing:-1.5px;
margin:20px 0;
}
.intro{
font-size:19px;
line-height:1.7;
} .journal-row{
grid-template-columns:1fr;
gap:15px;
padding:35px 0;
}
.highlight{
font-size:22px;
}
.text p{
font-size:16px;
}
.text li{
font-size:17px;
} .single-page h1{
font-size:34px;
}
.content p{
font-size:16px;
} .posts a{
font-size:18px;
} .portfolio-header h1{
font-size:38px;
}
.portfolio-grid{
grid-template-columns:1fr;
}
} .contact-section{
padding-bottom:80px;
}
.contact-layout{
display:grid;
grid-template-columns:350px 1fr;
gap:60px;
padding-top:30px;
}
.contact-info{
display:flex;
flex-direction:column;
gap:35px;
}
.contact-item span{
display:block;
font-size:13px;
color:#888;
margin-bottom:8px;
}
.contact-item strong{
font-size:18px;
font-weight:600;
color:#171717;
}
.contact-form{
display:flex;
flex-direction:column;
gap:15px;
}
.contact-form input,
.contact-form textarea{
width:100%;
border:1px solid #ddd;
background:#fff;
border-radius:10px;
padding:16px;
font-size:15px;
font-family:inherit;
}
.contact-form textarea{
height:150px;
resize:none;
}
.contact-form button{
background:#171717;
color:white;
border:none;
padding:16px;
border-radius:30px;
font-size:15px;
font-weight:600;
cursor:pointer;
}
.contact-form button:hover{
background:#2563eb;
}
@media(max-width:700px){
.contact-header h1{
font-size:34px;
}
.contact-layout{
grid-template-columns:1fr;
gap:40px;
}
} .about-content{
padding-bottom:50px;
}
.about-text p{
font-size:18px;
line-height:1.7;
}
.about-text strong{
color:#111;
}
.about-end{
margin-top:70px;
padding-top:40px;
border-top:1px solid #eee;
}
.about-end p{
margin-bottom:25px;
}
.about-end a{
display:inline-block;
margin-right:30px;
color:#111;
text-decoration:none;
border-bottom:1px solid #111;
padding-bottom:5px;
}
@media(max-width:768px){
.about-content{
padding-top:30px;
}
.about-text p{
font-size:16px;
}
.about-end a{
margin-bottom:15px;
}
} .blog-item{
display:grid;
grid-template-columns:80px 1fr;
gap:40px;
padding:60px 0;
border-top:1px solid #eee;
}
.blog-item:first-child {
border-top: none;
} .blog-date{
padding-top:5px;
}
.blog-date span{
display:block;
font-size:42px;
font-weight:500;
line-height:1;
}
.blog-date small{
display:block;
font-size:13px;
color:#999;
text-transform:uppercase;
} .blog-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
} .blog-content.no-image{
grid-template-columns:1fr;
}
.blog-content.no-image .blog-info{
max-width:700px;
}
.blog-image{
overflow:hidden;
}
.blog-image img{
width:100%;
aspect-ratio:16/10;
object-fit:cover;
display:block;
}
.blog-info{
max-width:450px;
}
.blog-meta{
font-size:14px;
font-weight:400;
color:#999;
margin:0 0 15px;
}
.blog-info h2{
font-size:36px;
font-weight:500;
line-height:1.3;
letter-spacing:-0.5px;
margin:0 0 20px;
}
.blog-info h2 a{
text-decoration:none;
color:inherit;
}
.blog-info p{
font-size:16px;
line-height:1.8;
color:#555;
margin-bottom:25px;
}
.blog-tag{
font-size:14px;
color:#777;
margin-bottom:25px;
}
.blog-info > a{
text-decoration:none;
} @media(max-width:768px){
.blog-item{
grid-template-columns:1fr;
gap:25px;
}
.blog-date{
display:flex;
gap:10px;
align-items:center;
}
.blog-date span{
font-size:32px;
}
.blog-date small{
font-size:12px;
}
.blog-content{
grid-template-columns:1fr;
gap:30px;
}
.blog-info h2{
font-size:28px;
}
} .single-blog .container{
width:min(900px,90%);
margin:auto;
}
.single-image{
margin-bottom:50px;
}
.single-image img{
width:100%;
height:auto;
display:block;
}
.single-content{
font-size:17px;
line-height:1.7;
padding: 30px 0;
}
.single-content h2{
font-size:34px;
font-weight:500;
margin:50px 0 20px;
}
.single-content h3{
font-size:25px;
font-weight:500;
margin:40px 0 15px;
}
.single-content img{
max-width:100%;
height:auto;
}
@media(max-width:768px){
.single-content{
font-size:16px;
}
}