105 lines
1.9 KiB
CSS
105 lines
1.9 KiB
CSS
@import "../src/assets/fonts/secular-one/secular-one.css";
|
|
|
|
:root {
|
|
font-size: 20px;
|
|
color: #f8ebdd;
|
|
|
|
--theme-c-walnut-brown: #422322;
|
|
--theme-c-desert-sand-translucent: #e7c7b1bf;
|
|
|
|
--container-box-shadow: 1vw 1vw 4vw rgba(0, 0, 0, 0.7);
|
|
--welcome-header-mainline-font-size: 7vw;
|
|
--welcome-header-subline-font-size: 3.625vw;
|
|
|
|
--color-background: #2d4c5a;
|
|
--page-background: url(../src/assets/layered-waves-dark.svg);
|
|
--page-background-image-height: 100vw;
|
|
--page-background-image-max-height: 80vh;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-background);
|
|
}
|
|
|
|
body::after {
|
|
background: var(--page-background);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center bottom;
|
|
|
|
display: block;
|
|
|
|
content: "";
|
|
position: sticky;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
height: var(--page-background-image-height);
|
|
max-height: var(--page-background-image-max-height);
|
|
|
|
z-index: -1;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
|
|
height: 100vh;
|
|
}
|
|
|
|
.flex > * {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.image {
|
|
flex: 0 0 60vh;
|
|
max-height: 100vh;
|
|
|
|
background-color: var(--theme-c-desert-sand-translucent);
|
|
|
|
border: 1vw solid var(--theme-c-walnut-brown);
|
|
border-radius: 4.5vw;
|
|
|
|
transform: scale(0.84) translateX(15%) rotateZ(calc(-1 * (11 * 1deg)));
|
|
transform-origin: 0 100%;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transform: scale(1.2) rotateZ(calc(11 * 1deg));
|
|
}
|
|
|
|
.headings {
|
|
flex: 0 0 55vw;
|
|
margin: 0;
|
|
}
|
|
|
|
.headings :where(h1, h2) {
|
|
font-family: "Secular One", sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.headings h1 {
|
|
font-size: var(--welcome-header-mainline-font-size);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.headings h2 {
|
|
font-size: var(--welcome-header-subline-font-size);
|
|
font-weight: 300;
|
|
}
|