html,
body {
margin: 1vw 1vw 1vw 1vw;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-color: black;
}
@font-face {
font-family: "Ogg-Regular";
src: url(assets/font/Ogg/Ogg-Regular.woff) format("woff"),
url(assets/font/Ogg/Ogg-Regular.woff2) format("woff2"),
url(assets/font/Ogg/Ogg-Regular.eot) format("eot"),
url(assets/font/Ogg/Ogg-Regular.svg) format("svg");
unicode-range: U+0025-00FF, U+4??;
}
@font-face {
font-family: "Founders_Grotesk_Regular";
src: url(assets/font/Founders_Grotesk/Founders_Grotesk_Regular.woff) format("woff"),
url(assets/font/Founders_Grotesk/Founders_Grotesk_Regular.woff2) format("woff2"),
url(assets/font/Founders_Grotesk/Founders_Grotesk_Regular.svg) format("svg");
}
@font-face {
font-family: "Founders_Grotesk_Medium";
src: url(assets/font/Founders_Grotesk/Founders_Grotesk_Medium.woff) format("woff"),
url(assets/font/Founders_Grotesk/Founders_Grotesk_Medium.woff) format("woff2"),
url(assets/font/Founders_Grotesk/Founders_Grotesk_Medium.svg) format("svg");
}
:root {
--gold: #d4af37;
}
* {
user-select: text;
}
*::selection {
background: var(--gold);
color: white;
}
#index-page body {
margin: 1vw;
overflow-y: hidden;
}
/*
style for password wrap
*/
#pwd_wrap {
position: fixed;
width: 120vw;
height: 120vh;
top: -10vw;
left: -10vw;
min-width: 120vw;
min-height: 120vh;
z-index: 999999;
background: white;
text-align: center;
padding-top: 55vh;
color: black;
}
input {
border: 1px solid black;
padding: 5px;
border-radius: 1px;
font-size: 0.85vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: .2vw;
text-indent: 3px;
text-align: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: black;
}
#top_nav {
display: block;
height: 10vw;
position: relative;
}
#top_nav_left {
display: block;
height: 10vw;
width: 20%;
float: left;
position: relative;
}
#top_nav_right {
display: grid;
grid-template-columns: auto auto;
height: 10vw;
width: 20%;
float: right;
text-align: right;
}
/* ////////style for top nav menu////////*/
a.menu:link {
color: #ffffff;
text-decoration: none;
display: inline-block;
color: #ffffff;
}
a.menu:visited {
color: #ffffff;
text-decoration: none;
display: inline-block;
}
a.menu:hover {
color: #ffffff;
border-bottom: solid 0.11vw #ffffff;
display: inline-block;
}
/* ////////style for top nav menu_defund_nypd Only
a.menu_defund_nypd:link {
color: #fff;
text-decoration: none;
display: inline-block;
}
a.menu_defund_nypd:visited {
color: #fff;
text-decoration: none;
display: inline-block;
}
a.menu_defund_nypd:hover {
color: #fff;
border-bottom: solid 0.11vw #fff;
display: inline-block;
}
.work,
.about {
text-decoration: none;
color: #000;
border-bottom: solid 0.11vw #000;
}
////////*/
/* ////////style for top contact_link////////*/
a.contact_link:link {
color: #ffffff;
text-decoration: none;
}
a.contact_link:visited {
color: #ffffff;
text-decoration: none;
}
a.contact_link:hover {
color: #ffffff;
border-bottom: solid 0.11vw #ffffff;
text-decoration: none;
}
/* ////////style for logo////////*/
a.logo:link {
color: #ffffff;
text-decoration: none;
}
a.logo:visited {
color: #ffffff;
text-decoration: none;
}
a.logo:hover {
color: #ffffff;
text-decoration: none;
opacity: 0.6;
}
.landing_text {
height: auto;
max-width: 100vw;
word-wrap: break-word;
left: 2vw;
padding-bottom: 4vh;
}
.landing_text_mobile {
display: none;
}
.suke {
display: none;
}
.public_container {
display: grid;
grid-template-columns: 50% 50%;
column-gap: 2vw;
grid-row-gap: 0.7vw;
margin-right: 3vw;
}
.private_container {
display: grid;
grid-template-columns: 47.5vw 47.5vw;
column-gap: 1.2em;
grid-row-gap: 1.07em;
}
.info_content {
height: 67vh;
position: absolute;
margin-bottom: 5vh;
max-width: 100vw;
padding-right: 2%;
transform: translateY(40%);
-moz-transform: translateY(40%);
-webkit-transform: translateY(40%);
}
.info_text {
height: auto;
padding-bottom: 4vh;
}
.middle_box {
height: 4vh;
width: 100vw;
}
.container_info_page {
display: grid;
grid-template-columns: 50%;
column-gap: 1vw;
grid-row-gap: 2vw;
margin-right: 2vw;
padding-top: 3.5vh;
padding-bottom: 8vh;
width: 94vw;
}
.container_info_page_mobile {
display: none;
}
.INTERIOR_Page_Content {
margin-right: 0vw;
margin-bottom: 1.3vw;
}
.two_row_images {
display: grid;
grid-template-columns: 50% 50%;
column-gap: 1vw;
margin-right: 0vw;
margin-bottom: 1vw;
}
.container_project_title_discription {
display: flex;
flex-direction: column;
width: 60vw;
margin: 0vw auto 4vw auto;
}
/* 第一层 */
.container_project_title_discription > :nth-child(1) {
padding-bottom: 4vw;
width: 100%;
text-align: center;
}
/* 第二层 */
.container_project_title_discription > :nth-child(2) {
padding-bottom: 4vw;
width: 100%;
text-align: center;
}
/* 第三层 */
.container_project_title_discription > :nth-child(3) {
width: 100%;
display: flex;
justify-content: flex-end;
text-align: right;
/* 内容右对齐 */
}
.project_cat {
padding-left: 26vw;
display: inline-block;
}
/*For Work and Work_private Image hover */
.hover-animation {
width: 47.5vw;
height: 34vw;
display: inline-block;
-webkit-background-size: cover;
background-size: cover;
position: relative;
overflow: hidden;
}
/*///////////////////////////////////////
all project covers below!!
///////////////////////////////////////*/
.zara_hair {
background-image: url(assets/image/thumb_images/zara_hair_cover.jpg)
}
.lancome_rouge_absolu {
background-image: url(assets/image/thumb_images/lancome_rouge_absolu_cover.jpg)
}
.zara_beauty {
background-image: url(assets/image/thumb_images/zara_beauty_cover.jpg)
}
.rose_inc {
background-image: url(assets/image/thumb_images/rose_inc_cover.jpg)
}
.nars_explicit_lipstick {
background-image: url(assets/image/thumb_images/nars_explicit_lipstick_cover.jpg)
}
.trussardi_primo {
background-image: url(assets/image/thumb_images/trussardi_primo_cover.jpg)
}
.zara_press_kit {
background-image: url(assets/image/thumb_images/zara_press_kit_cover.jpg)
}
.nuori_accessories {
background-image: url(assets/image/thumb_images/nuori_accessories_cover.jpg)
}
.thief_and_heist {
background-image: url(assets/image/thumb_images/thief_and_heist_cover.jpg)
}
.sny {
background-image: url(assets/image/thumb_images/sny_cover.jpg)
}
.baccarat_riviera {
background-image: url(assets/image/thumb_images/baccarat_riviera_cover.jpg)
}
.dior_gold {
background-image: url(assets/image/thumb_images/dior_gold_cover.jpg)
}
.roger_vivier {
background-image: url(assets/image/thumb_images/roger_vivier_cover.jpg)
}
.hugo_boss {
background-image: url(assets/image/thumb_images/hugo_boss_cover.jpg)
}
.slightly_windy_music_box {
background-image: url(assets/image/thumb_images/slightly_windy_music_box_cover.jpg)
}
.lina_swivel_chair {
background-image: url(assets/image/thumb_images/lina_swivel_chair_cover.jpg)
}
.hover-animmation:before,
.hover-animation:after {
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
position: absolute;
background: inherit;
transition: .5s;
}
.hover-animation:before {
padding-top: 33%;
padding-bottom: 33%;
padding-right: 1%;
padding-left: 1%;
display: -webkit-block;
display: -moz-block;
display: -ms-block;
display: -o-block;
display: block;
text-align: center;
color: #fff;
background: #000;
content: attr(data-text);
font-family: Ogg-Regular;
font-size: 2.2vw;
place-items: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
word-break: keep-all;
}
.hover-animation:hover:before {
opacity: 1;
}
.hover-animation:hover:after {
opacity: 0;
}
.Single_image {
object-fit: cover;
width: 96vw;
/* height: 54.89vw;*/
height: auto;
display: block;
}
.double_image {
object-fit: cover;
width: 47.5vw;
/* height: 55vw;*/
height: auto;
}
img:hover {
opacity: 0;
transition: .5s ease;
-webkit-transition: .5s ease;
}
.image:hover {
opacity: 1;
}
.Single_image:hover {
opacity: 1;
}
.double_image:hover {
opacity: 1;
}
/*/////p0 is for logotype/////*/
p0 {
font-size: 1.5vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: 3px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #fffff;
}
/*/////p is for landing page text/////*/
p {
font-size: 5vw;
text-align: left;
line-height: 1.4;
font-family: Ogg-Regular;
letter-spacing: 2px;
margin: -20px 0 -10px 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p1 is for top nav text/////*/
p1 {
font-size: 0.85vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: .2vw;
text-indent: 3px;
text-align: center;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p2 is for Hover State Effect/////*/
p2 {
color: white;
font-family: Ogg-Regular;
font-size: 2.2vw;
text-align: center;
background-color: #000;
display: inline-grid;
place-items: center;
margin: 0;
min-width: 47.5vw;
min-height: 34vw;
max-width: 47.5vw;
max-height: 34vw;
position: absolute;
z-index: -1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/*/////p3 is for Project title/////*/
p3 {
font-size: 3vw;
font-family: Ogg-Regular;
letter-spacing: .1vw;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p4 is for description paragraph/////*/
p4 {
font-size: 1.625vw;
font-family: Ogg-Regular;
letter-spacing: 0.04vw;
word-wrap: break-word;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p11 is for project decription caption ////*/
p11 {
font-size: 1vw;
font-family: "Founders_Grotesk_Regular";
letter-spacing: 0.04vw;
word-wrap: break-word;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p5 is for about intro copy/////*/
p5 {
font-size: 3.2vw;
font-family: Ogg-Regular;
letter-spacing: 0.03vw;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p6 is for selected sclients services and get in touch/////*/
p6 {
font-size: 1.1vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: .3vw;
text-align: center;
display: inline;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////p7 is for About Small Font/////*/
p7 {
font-size: 1.4vw;
font-family: Founders_Grotesk_Regular;
letter-spacing: 0.04vw;
word-wrap: break-word;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #ffffff;
}
/*/////Belowis for Defund NYPD/////*/
p8 {
font-size: 1vw;
font-family: Founders_Grotesk_Regular;
letter-spacing: .2vw;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #fff;
text-align: center;
line-height: 1;
}
p9 {
font-size: 4.5vw;
text-align: center;
font-family: Ogg-Regular;
letter-spacing: 0px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #fff;
}
p10 {
font-size: 2.12vw;
text-align: left;
line-height: 1.4;
font-family: Ogg-Regular;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #fff;
}
.NYPD1 {
display: block;
text-align: center;
}
.NYPD2 {
display: block;
text-align: center;
margin-top: 5%;
}
.NYPD3 {
display: block;
text-align: left;
margin-top: 10%;
padding: 0 10% 10% 10%;
}
/*/////Phone End!/////*/
@media screen and (max-width: 1200px) {
html,
body {
margin: 3.2vw 3.2vw 3.2vw 3.2vw;
overflow-x: hidden;
min-height: 100vh;
}
#top_nav {
height: 10vw;
color: #ffffff;
}
#top_nav_left {
height: 10vw;
width: 20%;
z-index: 999;
top: 3px;
color: #ffffff;
}
#top_nav_right {
display: none;
color: #ffffff;
}
.suke {
display: block;
}
.mobile_burger {
display: block;
width: 94vw;
box-shadow: none;
position: relative;
height: 60px;
overflow: hidden;
}
#sidebarMenu {
background-color: none;
height: 100vh;
position: fixed;
width: 100vw;
opacity: 0;
top: 0;
left: 0;
padding: 0 0 0 0;
z-index: 998;
display: none;
}
.sidebarMenuInner {
margin: 0;
padding: 0;
min-width: 100vw;
max-height: 100vh;
min-height: 100vh;
background-color: #000;
padding-top: 40vh;
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
cursor: pointer;
text-align: center;
text-decoration: none;
}
.sidebarMenuInner li span {
display: block;
}
.sidebarMenuInner li a {
list-style: none;
color: #fff;
cursor: pointer;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
opacity: 1;
display: block;
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 999;
height: auto;
width: auto;
top: 3px;
right: 0;
height: 30px;
width: 40px;
}
.openSidebarMenu {
display: block;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 1px;
width: 100%;
background-color: #fff;
}
.spinner_nypd {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 1px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 6px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 6px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
background-color: #fff;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 11px;
background-color: #fff;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -8px;
background-color: #fff;
}
.public_container {
grid-template-columns: auto;
margin-top: 5vh;
grid-row-gap: 2vw;
pointer-events: auto;
z-index: 999;
}
.private_container {
grid-template-columns: auto;
margin-top: 5vh;
grid-row-gap: 2vw;
pointer-events: auto;
z-index: 999;
-webkit-overflow-scrolling: touch;
}
.image_hover {
object-fit: cover;
min-width: 87.1vw;
min-height: 63.3vw;
max-width: 87.1vw;
max-height: 63.3vw;
}
.hover-animation:before {
font-size: 5vw;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.hover-animation {
width: 87.1vw;
height: 63.3vw;
}
.INTERIOR_Page_Content {
margin-bottom: 2.5vw;
}
.two_row_images {
display: grid;
grid-template-columns: auto auto;
column-gap: 2.5vw;
margin-right: 0vw;
margin-bottom: 1.8vw;
}
.Single_image {
object-fit: cover;
width: 88vw;
height: auto
}
.double_image {
object-fit: cover;
width: 100%;
height: auto;
}
.container_project_title_discription {
width: 100%;
}
/* 第三层 */
.container_project_title_discription > :nth-child(3) {
text-align: center;
}
.project_cat {
padding-left: 0;
padding-top: 4px;
}
.container_info_page {
display: none;
}
.container_info_page_mobile {
display: grid;
grid-template-columns: 100%;
grid-row-gap: 2vw;
padding-top: 3.5vh;
padding-bottom: 2vh;
width: 100%;
}
.landing_text {
display: none;
}
.landing_text_mobile {
max-height: 50%;
max-width: 90vw;
word-wrap: break-word;
left: 6.4vw;
display: block;
bottom: 6.4vw;
position: absolute;
}
p {
font-size: 8.5vw;
line-height: 1.3;
letter-spacing: 1px;
margin: 0 0 0 0;
overflow-y: hidden;
}
p0 {
font-size: 4vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: 0.3vw;
}
p1 {
text-decoration: none;
font-size: 7vw;
letter-spacing: 2vw;
line-height: 12vh;
font-family: Founders_Grotesk_Medium;
}
p2 {
font-size: 5vw;
min-width: 87.1vw;
min-height: 63.3vw;
max-width: 87.1vw;
max-height: 63.3vw;
}
p3 {
font-size: 6.5vw;
line-height: 1.4;
}
p4 {
font-size: 3.5vw;
line-height: 1.6;
}
p5 {
font-size: 6.5vw;
line-height: 1.4;
}
p6 {
font-size: 3vw;
font-family: Founders_Grotesk_Medium;
letter-spacing: 4px;
}
p7 {
font-size: 3.5vw;
line-height: 1.6;
}
/*/////Belowis for Defund NYPD/////*/
p8 {
font-size: 2vw;
letter-spacing: .2vw;
line-height: 1.2;
display: inline-block;
}
p9 {
font-size: 6vw;
}
p10 {
font-size: 4vw;
line-height: 1.4;
}
p11 {
font-size: 2vw;
line-height: 1.6;
}
.NYPD2 {
margin-top: 15%;
}
.NYPD3 {
margin-top: 12%;
padding: 0 8% 10% 8%;
}
input {
font-size: 7vw;
letter-spacing: 0vw;
line-height: 1;
margin-top: 5%;
color: black;
}
#pwd_wrap {
padding-top: 55%;
}
#pwd_wrap form {
padding: 15%;
}
}
/*/////iPad End!/////*/
@media screen and (min-width: 1400px) {}