445 lines
7.6 KiB
CSS
445 lines
7.6 KiB
CSS
:root {
|
||
--ifm-red: #e2001a;
|
||
--ifm-grey: #7e7e7e;
|
||
--ifm-black: #222222;
|
||
--ifm-light-black: #1e1e1e;
|
||
--ifm-deep-black: #111111;
|
||
--ifm-white: #ffffff;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
|
||
}
|
||
|
||
body {
|
||
margin-top: 1em;
|
||
margin-bottom: 1em;
|
||
background-color: var(--ifm-black);
|
||
color: var(--ifm-white);
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--ifm-white);
|
||
}
|
||
|
||
.container {
|
||
width: min(80%, 900rem);
|
||
/* 1600px */
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header-grid {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-link {
|
||
display: block;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.brand-logos {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.brand-logos img {
|
||
flex: 0 0 auto;
|
||
width: auto;
|
||
height: auto;
|
||
max-width: none;
|
||
display: block;
|
||
}
|
||
|
||
.prc-stripes,
|
||
.header-title {
|
||
grid-column: 1 / span 2;
|
||
}
|
||
|
||
|
||
.prc-stripes {
|
||
width: 100%;
|
||
--square: 0.55rem;
|
||
/* 10px */
|
||
height: calc(var(--square) * 3);
|
||
background:
|
||
conic-gradient(from 90deg at 50% 50%, #000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
|
||
}
|
||
|
||
.header-title {
|
||
margin: 0.625rem 0 0.9375rem;
|
||
/* 10px 0 15px */
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
font-size: clamp(1.2rem, 1.2rem + 0.5vw, 2rem);
|
||
line-height: 1em;
|
||
color: inherit;
|
||
padding-left: 4rem;
|
||
padding-top: 1rem;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.h1 {
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
font-size: clamp(1.3rem, 1.3rem + 0.5vw, 2rem);
|
||
color: var(--ifm-white);
|
||
padding-top: 0.3125rem;
|
||
/* 5px */
|
||
padding-bottom: 0.3125rem;
|
||
/* 5px */
|
||
margin-bottom: 0.9375rem;
|
||
/* 15px */
|
||
margin-top: 0.625rem;
|
||
/* 10px */
|
||
line-height: 1em;
|
||
}
|
||
|
||
.href {
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.mixlink {
|
||
line-height: 1rem;
|
||
/* 16px */
|
||
font-weight: 600;
|
||
font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
|
||
/* 10px */
|
||
margin: 0;
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.amixlink {
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
color: var(--ifm-grey);
|
||
line-height: 1.6em;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
background: var(--ifm-deep-black);
|
||
display: inline-flex;
|
||
margin: 0.125rem 0;
|
||
/* 2px 0 */
|
||
padding: 0.125rem 0.625rem;
|
||
/* 2px 10px */
|
||
border-radius: 1.25rem;
|
||
/* 20px */
|
||
font-size: clamp(0.6rem, 0.6rem + 0.2vw, 1rem);
|
||
}
|
||
|
||
|
||
.amixlink:hover {
|
||
color: #000;
|
||
background: var(--ifm-red);
|
||
}
|
||
|
||
.mixsections {
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
font-weight: 900;
|
||
color: var(--ifm-grey);
|
||
padding: 0.3125rem;
|
||
/* 5px */
|
||
margin-top: 2%;
|
||
margin-bottom: 0.3125rem;
|
||
/* 5px */
|
||
margin-right: 0.9375rem;
|
||
/* 15px */
|
||
border: solid 0.1875rem var(--ifm-grey);
|
||
/* 3px */
|
||
text-decoration: none;
|
||
}
|
||
|
||
.prclogo {
|
||
height: 7.5rem;
|
||
/* 120px */
|
||
padding: 0.625rem 0 0.625rem 0.625rem;
|
||
/* 10px 0 10px 10px */
|
||
}
|
||
|
||
.divider {
|
||
height: 1.4375rem;
|
||
/* 23px */
|
||
padding: 0.625rem 0 0.625rem 0.625rem;
|
||
/* 10px 0 10px 10px */
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 15.625rem;
|
||
/* 250px */
|
||
border-top: 0.125rem solid var(--ifm-red);
|
||
/* 2px */
|
||
float: left;
|
||
clear: both;
|
||
}
|
||
|
||
.djsection {
|
||
font-family: Helvetica, Arial, sans-serif;
|
||
text-decoration: inherit;
|
||
color: var(--ifm-red);
|
||
font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem);
|
||
}
|
||
|
||
.djsection:hover {
|
||
background-color: #000;
|
||
}
|
||
|
||
.homeheader {
|
||
background-image: url('/img/header.png');
|
||
background-repeat: no-repeat;
|
||
padding-bottom: 1.25rem;
|
||
/* 20px */
|
||
}
|
||
|
||
.bottomimg {}
|
||
|
||
.imglink {
|
||
width: 12.5rem;
|
||
/* 200px */
|
||
}
|
||
|
||
.column {
|
||
float: left;
|
||
margin-left: 0;
|
||
padding-left: 2.5%;
|
||
padding-right: 2.5%;
|
||
width: 15%;
|
||
}
|
||
|
||
.row::after {
|
||
content: "";
|
||
clear: both;
|
||
display: table;
|
||
}
|
||
|
||
.content {
|
||
padding-left: 4rem;
|
||
width: min(90%, 100rem);
|
||
}
|
||
|
||
.latest {
|
||
max-width: 90%;
|
||
padding-bottom: 1rem;
|
||
}
|
||
|
||
.linkimg:hover {
|
||
filter: invert(70%);
|
||
}
|
||
|
||
.image_collage {
|
||
line-height: 0;
|
||
-webkit-column-count: 5;
|
||
-webkit-column-gap: 0px;
|
||
-moz-column-count: 5;
|
||
-moz-column-gap: 0px;
|
||
column-count: 5;
|
||
column-gap: 0px;
|
||
}
|
||
|
||
.image_collage img {
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* RESPONSIVE CSS FOR DIFFERENT DEVICES */
|
||
|
||
/* ===========================
|
||
MOBILE (till 600px)
|
||
=========================== */
|
||
@media (max-width: 600px) {
|
||
|
||
.container {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.header-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.brand-logos {
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
}
|
||
|
||
.brand-logos img {
|
||
max-width: 40%;
|
||
height: auto;
|
||
}
|
||
|
||
.prc-stripes,
|
||
.header-title {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.header-title {
|
||
padding: 0.75rem 1rem;
|
||
margin: 0.5rem 0 0.75rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.h1 {
|
||
font-size: clamp(1.4rem, 4vw, 1.8rem);
|
||
margin-top: 0.25rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.p {
|
||
font-size: 0.9rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.djsection {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
|
||
.column {
|
||
width: 100%;
|
||
float: none;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.content {
|
||
padding: 0.75rem 1rem;
|
||
margin: 0.5rem 0 0.75rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.footer {
|
||
height: auto;
|
||
padding: 1.5rem 0;
|
||
}
|
||
|
||
.imglink {
|
||
width: 9rem;
|
||
/* 144px circa */
|
||
}
|
||
|
||
.prclogo {
|
||
height: 5rem;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.divider {
|
||
height: 1rem;
|
||
padding: 0.5rem;
|
||
}
|
||
|
||
.bottomimg img,
|
||
.linkimg img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
}
|
||
|
||
/* ===========================
|
||
TABLET (601px – 900px)
|
||
=========================== */
|
||
@media (min-width: 601px) and (max-width: 900px) {
|
||
|
||
.container {
|
||
width: 90%;
|
||
}
|
||
|
||
.header {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.header-grid {
|
||
grid-template-columns: auto 1fr;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.header-title {
|
||
padding-left: 2rem;
|
||
padding-right: 2rem;
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
}
|
||
|
||
.h1 {
|
||
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||
}
|
||
|
||
.column {
|
||
width: 45%;
|
||
float: left;
|
||
padding-left: 2%;
|
||
padding-right: 2%;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
|
||
.content {
|
||
padding-left: 2rem;
|
||
padding-right: 2rem;
|
||
padding-top: 0.75rem;
|
||
padding-bottom: 0.75rem;
|
||
}
|
||
|
||
.footer {
|
||
height: auto;
|
||
padding: 2rem 0;
|
||
}
|
||
|
||
.footerlegal {
|
||
float: right;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.imglink {
|
||
width: 11rem;
|
||
/* 176px circa */
|
||
}
|
||
|
||
}
|
||
|
||
/* ===========================
|
||
SMALL DESKTOP (901px – 1200px)
|
||
=========================== */
|
||
@media (min-width: 901px) and (max-width: 1200px) {
|
||
|
||
.container {
|
||
width: 85%;
|
||
}
|
||
|
||
.header-title {
|
||
padding-left: 3rem;
|
||
padding-right: 5rem;
|
||
}
|
||
|
||
.column {
|
||
width: 22%;
|
||
padding-left: 1.5%;
|
||
padding-right: 1.5%;
|
||
}
|
||
|
||
.content {
|
||
padding-left: 3rem;
|
||
padding-right: 5rem;
|
||
}
|
||
}
|