mirror of
https://github.com/ivabus/www
synced 2025-06-08 14:30:26 +03:00
140 lines
2.5 KiB
CSS
140 lines
2.5 KiB
CSS
/*This page includes CSS for products page + all products ancillary pages*/
|
|
|
|
/* Products - Main */
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
|
|
.products-hero{
|
|
background-image: url("/Images/x-large-grid-hero.svg");
|
|
background-attachment: fixed;
|
|
background-position: top;
|
|
background-repeat: repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.products-hero h1{
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.lead-container{
|
|
padding-left: 25vw;
|
|
padding-right: 25vw;
|
|
margin-bottom: -2.7vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
|
|
.product-container{
|
|
padding: 7vw !important;
|
|
}
|
|
|
|
.gen-art{
|
|
display:none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Products - TEA.CLI */
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
|
|
.products-hero{
|
|
background-image: url("/Images/x-large-grid-hero.svg");
|
|
background-attachment: fixed;
|
|
background-position: top;
|
|
background-repeat: repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.products-hero h1{
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.lead-container{
|
|
padding-left: 25vw;
|
|
padding-right: 25vw;
|
|
margin-bottom: -2.7vw;
|
|
}
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1200px) {
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 992px) {
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 576px) and (max-width: 768px) {
|
|
|
|
}
|
|
|
|
@media only screen and (max-width: 576px) {
|
|
|
|
.tea-cli-container{
|
|
padding: 7vw !important;
|
|
}
|
|
|
|
.gen-art{
|
|
display:none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Generative Art styling */
|
|
|
|
#pro-gen-art-1{
|
|
background-image: url("/Images/gen-art/glass-triangles.jpg");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
left: 8.3vw;
|
|
top: 12.2vw;
|
|
width: 16.7vw;
|
|
height: 17vw;
|
|
z-index: 0;
|
|
}
|
|
|
|
#pro-gen-art-2{
|
|
background-image: url("/Images/gen-art/colorful-sandal.jpg");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: 8.3vw;
|
|
top: 19.2vw;
|
|
width: 16.7vw;
|
|
height: 10vw;
|
|
}
|
|
|
|
#pro-gen-art-3{
|
|
background-image: url("/Images/gen-art/pixel-mouth.jpg");
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
background-size: cover;
|
|
position: absolute;
|
|
right: 19.3vw;
|
|
top: 14.2vw;
|
|
border-radius: 100px;
|
|
width: 7vw;
|
|
height: 7vw;
|
|
box-shadow: 0px 0px 12px #1a1a1a;
|
|
}
|