/* Common
------------------------------------------------------------------------- */
:root {
--accent-color: #c10230;
--offwhite: #ececec;
--offblack: #3a3a38;
--bg-color: #1f1f1f;
}
*,
*:before,
*:after { margin:0; padding:0; box-sizing:border-box;}
html { font-size: calc(100vw / 1512 * 10);
scrollbar-color: var(--accent-color) transparent;
scrollbar-width: thin;
overflow-x: hidden;}
/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar { width:8px;}
::-webkit-scrollbar-track { background: transparent;}
::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px;}
body { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size:14px; font-weight:700; letter-spacing:normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg-color);
color: var(--offblack);
overflow-x: hidden;}
h1 { /* font-weight:900 */; font-size:5vw; letter-spacing:-0.5px; line-height:1; margin-top:200px;}
h2 { font-size:8vw; /* font-weight:900; */ line-height:0.7; margin-bottom:50px; color:var(--offwhite);}
#gallery h2 { margin-bottom:25px; }
h2.our-work { color:var(--offblack)!important; margin-bottom:0; letter-spacing:-2px; }
h2.our-work .hgl-txt { color: var(--offblack); line-height:0; box-shadow: inset 0 -0.1em 0 rgb(193 2 48) }
h3 { font-weight:800 }
footer h3 { font-weight:300; }
h4 { font-size:20px; font-weight:300; }
h2.title-we-are-for-d { border-right:10px solid var(--accent-color); }
/* Background noise effect
------------------------------------------------------------------------- */
body::before { content:""; position:fixed; top:-50%; left:-50%; width:200%; height:200%;
background: transparent url("images/noise-transparent.png") repeat 0 0;
background-size: 300px 300px;
-webkit-animation: noise-animation 0.3s steps(5) infinite;
animation: noise-animation 0.3s steps(5) infinite;
opacity: 0.9;
will-change: transform;
z-index: 100;
pointer-events: none; }
.slogan { font-weight:300; color:var(--offwhite); }
.slogan .dot { font-weight:300; color:var(--accent-color); padding-left:10px; padding-right:10px;}
@-webkit-keyframes noise-animation {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-2%, -3%);
}
20% {
transform: translate(-4%, 2%);
}
30% {
transform: translate(2%, -4%);
}
40% {
transform: translate(-2%, 5%);
}
50% {
transform: translate(-4%, 2%);
}
60% {
transform: translate(3%, 0);
}
70% {
transform: translate(0, 3%);
}
80% {
transform: translate(-3%, 0);
}
90% {
transform: translate(2%, 2%);
}
100% {
transform: translate(1%, 0);
}
}
@keyframes noise-animation {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-2%, -3%);
}
20% {
transform: translate(-4%, 2%);
}
30% {
transform: translate(2%, -4%);
}
40% {
transform: translate(-2%, 5%);
}
50% {
transform: translate(-4%, 2%);
}
60% {
transform: translate(3%, 0);
}
70% {
transform: translate(0, 3%);
}
80% {
transform: translate(-3%, 0);
}
90% {
transform: translate(2%, 2%);
}
100% {
transform: translate(1%, 0);
}
}
/* Grid System
------------------------------------------------------------------------- */
.container { width:100%; max-width:100%; margin:0 auto; padding:0 2rem; height:100%;}
.row { display:grid; grid-template-columns:repeat(12, 1fr); gap:1rem; width:100%;}
.row-content { height:calc(100% - 14rem); align-items:end; margin-bottom:2rem;}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10;}
.col-11 { grid-column: span 11;}
.col-12 { grid-column: span 12;}
/* Header
------------------------------------------------------------------------- */
header { position:fixed; top:0; left:0; width:100%; padding:2rem 0; z-index:10;}
.header-container { display:flex; align-items:center; justify-content:space-between;
max-width:100%; margin:0 auto; padding:0 2rem;}
.logo { margin-right:auto;}
.logo img { width:100px; height:auto; }
.get-in-touch { display:flex; align-items:center; margin-left:auto; position:relative;}
.get-in-touch a { display:inline-block; background-color:var(--accent-color); padding: 0.5rem 10px;
color: var(--offwhite); text-decoration:none; font-size:14px; font-weight:500;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}
.yellow-line-container { width:40vw; height:2px; margin-left:1rem; background-color: rgba(34, 34, 32, 0.1);}
.scroll-indicator { height:100%; width:0;
background-color: var(--accent-color);
transition: width 0.1s linear; }
.vertical-line { width:1px; height:2.4rem; background-color:#333; margin:0 2rem;}
.nav-links { display:flex; gap:3rem; text-align:right; margin-left:3rem;}
/* Hero Section
------------------------------------------------------------------------- */
.hero { min-height:100vh; display:flex; align-items:center; }
.hero-left { position:relative;}
.hero-image { width:100%; overflow:hidden; opacity:0; transform:scale(0.9); transform-origin:center; position:relative; filter:blur(1px);}
.hero-image img { width:100%; height:auto; margin-bottom:0px; z-index:1; position:relative;
filter: grayscale(20%);
-o-object-fit: cover;
object-fit: cover; }
.col-3-pos { padding-left:20px; padding-right:20px; }
.hero-right { padding-left:2rem; overflow:hidden;}
.hero-right-inner { width:100%; display:flex; justify-content:space-evenly; align-items:flex-end; }
.hero-right-inner .hri-col1 { width:45%; padding-right: 5rem; }
.hero-right-inner .hri-col2 { width:55% }
.about-text { font-weight:300; line-height:1.6; text-transform:none;
opacity: 0;
transform: translateY(5rem);
filter: blur(5px);
color: var(--offwhite); }
/* 5 img cols & what we do Section
------------------------------------------------------------------------- */
.gallery { /*min-height:90vh;*/ display: flex; align-items:end; overflow:hidden; margin-top:200px;}
.gallery-wrapper { display:flex; justify-content:center; gap:2rem; margin-bottom:3rem; overflow:visible;}
/* Initialize gallery images */
.gallery-item { flex:0 0 25rem; height:35rem; overflow:hidden; position:relative;}
.gallery-item img { width:100%; height:100%;
-o-object-fit: cover;
object-fit: cover;
filter: grayscale(0%);
transition: filter 0.5s ease;
-webkit-clip-path: inset(100% 0 0 0);
clip-path: inset(100% 0 0 0); }
.gallery-caption { max-width:80rem; margin:0 auto; margin-top:60px; padding:2rem; line-height:1.6; text-transform:none;
opacity: 0;
transform: translateY(3rem);
filter: blur(5px); }
/* our work
------------------------------------------------------------------------- */
.project { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-between; overflow:hidden;
padding-top:150px; padding-bottom:50px; padding-left:2rem; padding-right:2rem; background-color:var(--offwhite); }
.project-intro { position:relative; z-index:3; text-align:left; display:flex; flex-direction:column; align-items:center; gap:0.25rem;
opacity:0; margin-top:0;}
.project-intro>h4 { padding-right:50px; padding-left:10px; }
.project-effect { opacity: 0;
filter: blur(5px);
transform: translateY(20px); }
/* Footer
------------------------------------------------------------------------- */
footer { padding:50px 0; }
footer .row-content { align-items: start; }
.footer-blk { padding-top:20px; font-weight:300; color:var(--offwhite);}
.footer-blk .fb-col1 { font-size:20px; padding-left:5vw; padding-right:5vw; line-height:1.2; }
.footer-blk .fb-col2 { font-size:20px; padding-right:5vw; line-height:1.2; text-align:left }
footer .f-field { display:inline-block; width:50px; margin-right:20px; padding-bottom:10px; }
.address { margin-bottom:10px; }
footer a { color: var(--offwhite); text-decoration:none; cursor:pointer; transition: all 0.3s ease-out; }
footer a:hover { color: var(--accent-color); }
/* Highlight text
---------------------------------------------------- */
.hgl-txt { position:relative; text-align:left; margin:0; max-width: 100%;
line-height:1.4; color:var(--offwhite); display:inline;
background: transparent;
box-shadow: inset 0 -0.5em 0 rgb(193 2 48); }
.ht-for-d { display:block; }
.ht-for-m { display:none; }
.title-we-are-for-d { display:block; }
.title-we-are-for-m { display:none; }
.work-d { display:block; }
.work-m { display:none; }
/* ==========================================================================
Media Style
============================================================================= */
@media only screen and (max-width:1400px) {
.container,
.header-container,
.project { padding-left:20px; padding-right:20px; }
#hero .row.row-content { align-items: start; }
}
@media only screen and (max-width:1300px) {
.title-we-are-for-d { display:none; }
.title-we-are-for-m { display:block; }
.hero-right-inner { width:100%; display:block; justify-content:flex-start; align-items:baseline; }
.hero-right-inner .hri-col1 { width:100%; padding-right:0; margin-top:100px; }
.hero-right-inner .hri-col2 { width:100%; margin-top:50px; }
}
@media only screen and (max-width:1200px) {
.project { padding-top:100px; padding-bottom:20px; }
.project .row { display:block; }
.project .col-5 { width:100%; }
.project .col-7 { width:100%; }
.project-intro>h4 { padding-right:0; margin-top:20px; padding-left:0; }
.gallery { margin-top:150px; }
.gallery-wrapper { justify-content:space-between; gap:1rem; }
.gallery-item { flex: 0 0 27rem; }
.gallery-caption { max-width:100%; }
.footer-blk .fb-col1 { padding-left:50px; }
}
@media only screen and (max-width:1024px) {
header { padding:4rem 0; }
.yellow-line-container { width:20vw; }
h1 { font-size:70px; }
.ht-for-d { display:none; }
.ht-for-m { display:block; }
.work-d { display:none; }
.work-m { display:block;}
}
@media only screen and (max-width:767px) {
body { font-size:16px; }
.container,
.header-container,
.project { padding-left:20px; padding-right:20px; }
.slogan { font-size:14px; }
h1 { font-size:40px; font-weight:700; margin-top:150px; }
h2 { margin-bottom: 25px; font-size:40px; font-weight:700; }
h3 { font-size:22px; }
h4 { font-size:20px; }
.logo img { width:100px; height:auto; }
.get-in-touch { display:none; }
.nav-links { padding-top:0px; }
#hero .row { display:block; grid-template-columns:repeat(1, 1fr); gap:0; width:100%; margin-top:150px;}
#hero .col-5.hero-left { grid-column: span 1; }
#hero .col-5.hero-right { grid-column: span 1; }
.hero-right-inner .hri-col1 { margin-top:50px; }
#gallery h2 { margin-bottom:0;}
.gallery { margin-top:150px; min-height:auto;}
.gallery-wrapper { justify-content:center; }
.gallery-caption { max-width:100%; margin-top:30px; }
.project { padding-top:80px; }
footer .row { display:block; }
.footer-blk .fb-col1 { padding-left:0; padding-right:0; margin-bottom:50px; }
}