146 lines
4.1 KiB
CSS
146 lines
4.1 KiB
CSS
:root {
|
|
--header-text-transparency: 0.21;
|
|
--primary-text-transparency: 0.76;
|
|
--secondary-text-transparency: 0.58;
|
|
|
|
--header-text-color: rgba(255, 255, 255, var(--header-text-transparency));
|
|
--primary-text-color: rgba(255, 255, 255, var(--primary-text-transparency));
|
|
--secondary-text-color: rgba(255, 255, 255, var(--secondary-text-transparency));
|
|
}
|
|
|
|
html, body, h1, h2, h3, h4, h5, h6, p {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Open Sans", sans-serif;
|
|
font-optical-sizing: auto;
|
|
font-style: normal;
|
|
font-variation-settings: "wdth" 100;
|
|
color: var(--primary-text-color);
|
|
}
|
|
|
|
body {
|
|
background-color: #2B2738;
|
|
}
|
|
|
|
body::before {
|
|
background-attachment: scroll;
|
|
content: '';
|
|
display: block;
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
transform: scale(1);
|
|
width: 100vw;
|
|
z-index: 0;
|
|
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.071)%3B%20stroke-width%3A%201.01px%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M424%2C331.8c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-132%2C76.2c-10.8%2C6.3-24.2%2C6.3-35%2C0l-132-76.2%20C96.7%2C355.8%2C90%2C344.3%2C90%2C331.8V179.2c0-12.5%2C6.7-24.1%2C17.5-30.3l132-76.2c10.8-6.3%2C24.2-6.3%2C35%2C0l132%2C76.2%20c10.8%2C6.3%2C17.5%2C17.8%2C17.5%2C30.3V331.8z%20M238.5%2C73l-256%2C147.6%20M273.5%2C439l252.1-145.4%20M256%2C634.7V378.3c0-12.5%2C6.7-24.1%2C17.5-30.3%20l252.1-145.4%20M256-122.7v256.4c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-256%2C147.6%22%2F%3E%3C%2Fsvg%3E');
|
|
background-size: 794px;
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
height: 100vh;
|
|
}
|
|
|
|
main {
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
section {
|
|
height: 100vh;
|
|
}
|
|
|
|
.section-text {
|
|
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20preserveAspectRatio%3D%22none%22%3E%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%20path%20%7B%20fill%3A%20none%3B%20stroke%3A%20rgba(255,255,255,0.122)%3B%20stroke-width%3A%201.01px%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20%7D%20%3C%2Fstyle%3E%20%3Cpath%20vector-effect%3D%22non-scaling-stroke%22%20d%3D%22M424%2C331.8c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-132%2C76.2c-10.8%2C6.3-24.2%2C6.3-35%2C0l-132-76.2%20C96.7%2C355.8%2C90%2C344.3%2C90%2C331.8V179.2c0-12.5%2C6.7-24.1%2C17.5-30.3l132-76.2c10.8-6.3%2C24.2-6.3%2C35%2C0l132%2C76.2%20c10.8%2C6.3%2C17.5%2C17.8%2C17.5%2C30.3V331.8z%20M238.5%2C73l-256%2C147.6%20M273.5%2C439l252.1-145.4%20M256%2C634.7V378.3c0-12.5%2C6.7-24.1%2C17.5-30.3%20l252.1-145.4%20M256-122.7v256.4c0%2C12.5-6.7%2C24.1-17.5%2C30.3l-256%2C147.6%22%2F%3E%3C%2Fsvg%3E');
|
|
background-size: 384px;
|
|
background-position: center;
|
|
background-repeat: repeat;
|
|
}
|
|
.section-image > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.centered {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.dual-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 85vh;
|
|
}
|
|
.dual-column > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.bg-red {
|
|
background-color: Tomato;
|
|
}
|
|
.bg-blue {
|
|
background-color: midnightblue;
|
|
}
|
|
|
|
.mb {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.text-display {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.color-purple {
|
|
color:rgb(128, 92, 212);
|
|
}
|
|
|
|
.color-secondary {
|
|
color: var(--secondary-text-color);
|
|
}
|
|
|
|
@media (width >= 768px) {
|
|
.dual-column {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
/* Text resizing */
|
|
|
|
/* sm */
|
|
@media (width >= 576px) {
|
|
.text-lg {
|
|
font-size: 2rem;
|
|
}
|
|
.text-display {
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
/* md */
|
|
@media (width >= 768px) {
|
|
.text-lg {
|
|
font-size: 3rem;
|
|
}
|
|
.text-display {
|
|
font-size: 5rem;
|
|
}
|
|
}
|
|
/* lg */
|
|
@media (width >= 992px) {
|
|
.text-lg {
|
|
font-size: 3rem;
|
|
}
|
|
.text-display {
|
|
font-size: 7rem;
|
|
}
|
|
} |