/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, button, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main, section {
display: block;
}
html {
scroll-behavior: smooth;
}
section {
scroll-margin-top: 70px;
}
body {
min-height: -webkit-fill-available;
}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
font-size: 1em;
font-weight: normal;
font-style: normal;
}
ul, ul li {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
fieldset, img {
border: none;
}
caption, th {
text-align: left; }
table {
border-collapse: collapse;
border-spacing: 0; }
ul {
padding: 0px;
margin: 0px; }
ul li {
display: inline;
margin: 0px;
padding: 0px;
float: left; }
.clear {
clear: both; }
/* VARIABLES */
:root {
--light: #eeeeee;
--dark: #18191b;
--color1: #b12763;
--color2: #555962;
--color-fade: rgba(219, 207, 192, 0.70); /* unused */
--x-screen-12-24: 12px;
--x-screen-16-36: 16px;
--x-screen-16-48: 16px;
--y-screen-16-24: 16px;
--y-screen-24-36: 24px;
--y-screen-24-48: 24px;
--y-screen-36-48: 36px;
--y-screen-36-64: 36px;
--space: 16px;
/* Fonts */
--font1: helvetica-neue-lt-pro, sans-serif;
--font2: sans-serif;
@media all and ( min-width: 768px ) {
--x-screen-12-24: 24px;
--x-screen-16-36: 36px;
--x-screen-16-48: 48px;
--y-screen-16-24: 24px;
--y-screen-24-36: 36px;
--y-screen-24-48: 48px;
--y-screen-36-48: 48px;
--y-screen-36-64: 64px;
}
}
.f-light { color: var(--light); }
.f-dark { color: var(--dark); }
.b-dark { background-color: var(--dark); }
.b-light { background-color: var(--light); }
.f-color1 { color: var(--color1); }
.f-color2 { color: var(--color2); }
.b-color1 { background-color: var(--color1); }
.b-color2 { background-color: var(--color2); }
/*----------------------------
GLOBAL STYLES
-----------------------------*/
html, body {
background: var(--light);
font-family: var(--font1);
color: var(--dark);
font-size: 16px;
font-weight: 200;
font-style: normal;
text-align: left;
line-height: 1.15;
letter-spacing: .2px;
overflow-x: hidden;
width: 100dvw;
height: 100dvh;
}
/* Text and Sizing */
b, strong,.bold { font-family: var(--font1);font-weight: 400; }
i, em { font-family: var(--font1);font-style: italic; }
b i, strong i, b em, strong em { font-family: var(--font1);font-weight: 400;font-style: italic; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-1);
font-weight: 700;
line-height: 1.14;
letter-spacing: -0.13px;
color: var(--dark);
text-transform: uppercase;
text-align: center;
}
h1 { font-size: 30px; }
h2 { font-size: 24px;margin:auto; }
h3 { font-size: 16px;line-height: 1.25;margin:auto; }
h4 { font-size: 1em;line-height: 1;margin:auto; }
a { color: var(--dark);text-decoration: none; }
button { background-color: unset; cursor: pointer; }
a:hover { color: var(--color1);text-decoration: underline; }
.button {
padding: 3px 34px;
background-color: var(--light);
color: var(--dark);
text-decoration: none;
font-size: 24px;
font-weight: 700;
}
.dark-button {
background-color: var(--dark);
color: var(--light);
}
.dark-svg {
color: var(--dark);
}
.inv-svg {
background-color: var(--dark);
}
.hover {
transition: all 0.2s ease-in-out;
}
/* .hover:hover {
opacity: 0.85;
} */
.button.hover:hover {
background-color: var(--color2);
color: var(--light);
text-decoration: none;
}
button.dark-svg.hover:hover {
color: var(--color2);
}
button.inv-svg.hover:hover {
background-color: var(--color2);
}
p {
margin: .75em 0;
line-height: 125%;
text-wrap: pretty;
}
input[type="text"] {
font-size: 16px;
}
sup {
vertical-align: 2px;
font-size: smaller;
}
small, .text-small { font-size: 13px; }
.upper {
text-transform: uppercase;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.nowrap { white-space: nowrap;}
img {
max-width: 100%;
object-fit: cover;
height: auto;
width: auto;
display: block;
}
/* svg {
height: .65em;
} */
/* Display Sizes */
.mobile {
display: inline-block;
}
.tablet {
display: none;
}
/* Structure */
.flex {
display: flex;
flex-wrap: nowrap;
text-align: center;
justify-content: center;
align-items: center;
}
.column { flex-direction: column; }
.col-row { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.flex-break {
flex-basis: 100% !important;
}
@media (min-width: 768px) {
html, body { font-size: 16px; }
small, .text-small { font-size: 16px; }
.mobile { display: none !important; }
.tablet { display: inline-block; }
.col-row { flex-direction: row; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
}
@media (max-width: 1023px) {
.desktop { display: none; }
}
@media (max-width: 375px) {
}
/*----------------------------
GENERAL CONTENT STYLES
-----------------------------*/
.icon {
height: 1em;
width: 1em;
display: inline-block;
flex-shrink: 0;
background-color: var(--light);
-webkit-mask-size: cover;
mask-size: cover;
}
.icon.b-dark { background-color: var(--dark); }
.logo {
height: 1em;
width: auto;
flex-shrink: 0;
background-color: var(--light);
-webkit-mask-size: cover;
-webkit-mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-size: cover;
mask-position: 50% 50%;
mask-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
}
main {
display: flex;
flex-direction: column;
padding: 30px 24px 69px;
gap: 30px;
}
section, header {
max-width: 870px;
margin: 0 auto;
}
@media (min-width: 768px) {
main {
padding: 16px 24px 116px;
gap: 46px;
}
}