/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Laila:wght@300;400;500;600;700&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: 2em;
}
h3 {
font-family: "Laila", serif;
font-weight: 500;
font-style: normal;
font-size: 1.25rem;
margin-bottom: 1rem;
}
p, a, abbr, ul {
font-family: "Laila", serif;
font-weight: 300;
font-style: normal;
margin-bottom: 0.5rem;
line-height: 150%;
}
a {
color: unset;
}
:root {
--sky-blue: #7297c6;
--carpet-red: #c05946;
--off-white: #faedcb;
--off-black: #1e241f;
--content-p-left: 2rem;
--sidebar-width: 100px;
--b-nav-height: 100px;
}
body {
background: radial-gradient(50% 50% at 50% 50%, rgba(233, 228, 205, 0.5) 0%, rgba(250, 237, 203, 0.5) 25%, rgba(221, 215, 200, 0.5) 48.5%, rgba(221, 215, 200, 0) 100%), var(--sky-blue);
overflow-x: hidden;
width: 100vw;
}
html {
width: 100vw;
scroll-snap-type: y mandatory;
}
.intro,
.explanation,
.participation,
.benefits,
.requirements {
min-height: calc(100vh - var(--b-nav-height));
}
.intro,
.explanation,
.participation,
.benefits,
.requirements,
.design-selection {
scroll-snap-align: start;
}
.intro,
.explanation,
.participation,
.benefits,
.requirements,
.design-selection,
.design-archives {
padding-left: var(--content-p-left);
padding-right: var(--sidebar-width);
}
.intro,
.explanation,
.participation,
.benefits,
.requirements,
.design-selection {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 5vh;
padding-bottom: 5vh;
}
/* Intro */
.intro,
.participation,
.requirements {
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('data:image/svg+xml,');
background-size: 100vw auto;
background-repeat: no-repeat;
color: var(--off-black);
}
.intro h1 {
color: var(--off-white);
margin-bottom: 1rem;
font-size: 2.5em;
}
.intro [role=banner] {
display: flex;
flex-flow: column nowrap;
align-items: center;
max-width: 470px;
}
.intro [role=banner] h2 {
font-size: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: clamp(0px, 95vw - var(--sidebar-width), 470px) auto;
height: 15vw;
width: calc(95vw - var(--sidebar-width));
max-width: 470px;
max-height: 84px;
}
.intro [role=banner] h2 abbr {
font-size: 0;
}
.intro .summary {
display: flex;
flex-flow: column nowrap;
align-items: center;
margin-bottom: 3rem;
}
.intro .summary p:first-of-type {
display: none;
}
.intro .summary p:nth-of-type(2) {
font-size: 1rem;
width: max-content;
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: var(--off-white);
}
.explanation,
.benefits,
.design-selection {
background-color: var(--carpet-red);
color: var(--off-white);
position: relative;
}
:is(.explanation, .benefits, .design-selection)::before,
:is(.explanation, .benefits, .design-selection)::after {
content: "";
display: inline-block;
height: 40vw;
width: calc(100vw + 1.5rem);
position: absolute;
background-repeat: no-repeat;
background-size: 110vw auto;
}
:is(.explanation, .benefits, .design-selection)::before {
background-image: url('data:image/svg+xml,');
top: -18vw;
left: -1.5rem;
}
:is(.explanation, .benefits, .design-selection)::after {
background-image: url('data:image/svg+xml,');
transform: rotate(180deg);
bottom: 0;
left: -1.5rem;
}
.requirements {
padding-top: 10rem;
padding-bottom: 8rem;
}
.design-selection {
height: calc(100vh - 100px);
display: flex;
align-items: center;
}
.design-selection h3 {
font-size: 0;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: clamp(0px, 95vw - var(--sidebar-width), 470px) auto;
height: 16vw;
width: calc(95vw - var(--sidebar-width));
margin-bottom: 2rem;
max-width: 470px;
max-height: 120px;
}
.design-selection ul {
display: flex;
flex-flow: column nowrap;
gap: 1rem;
}
.design-selection li::after {
content: ">";
color: var(--off-white);
}
.design-selection li:hover {
text-decoration: underline;
}
.design-selection .design-name,
.design-selection .designer-name {
text-decoration: none;
}
.design-selection .design-name {
font-weight: 700;
}
.design-selection .designer-name {
font-weight: 500;
}
.design-archives {
position: relative;
top: -20vh;
color: var(--off-black);
}
.design-archives h3 {
font-size: 0;
}
.design-archives ul {
display: flex;
flex-flow: row-reverse nowrap;
justify-content: space-around;
}
.design-archives li {
background-color: var(--off-white);
padding: 0.5rem;
border-radius: 8px;
}
.design-archives a {
text-decoration: none;
}
/* Navbars */
.zen-resources a,
footer > a {
display: block;
font-size: 0px;
width: 100%;
height: 100%;
}
.zen-resources li,
footer a {
flex-grow: 1;
background-repeat: no-repeat;
background-size: 75px auto;
}
/* Bottom Nav -> Resources */
.zen-resources {
position: fixed;
left: 0;
bottom: 0;
background-color: var(--off-white);
border-radius: 16px 16px 0 0;
overflow: hidden;
box-sizing: border-box;
height: var(--b-nav-height);
}
.zen-resources h3 {
display: none;
font-size: 0px;
}
.zen-resources ul {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
height: var(--b-nav-height);
width: 100vw;
}
.zen-resources abbr {
font-size: 0;
}
.zen-resources li {
border-left: #fcf7ed 2px solid;
background-position: top;
height: var(--b-nav-height);
}
.zen-resources li:first-of-type {
border-left: none;
}
.zen-resources .view-css {
background-image: url('data:image/svg+xml,');
}
.zen-resources .css-resources {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-faq {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-submit {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-translations {
background-image: url('data:image/svg+xml,');
}
/* Side Nav */
footer {
position: fixed;
right: 0;
bottom: var(--b-nav-height);
display: flex;
flex-flow: column nowrap;
height: 80vh;
justify-content: space-between;
z-index: 10;
}
footer a {
background-position: right;
width: var(--sidebar-width);
}
footer a abbr {
font-size: 0;
}
footer .zen-validate-html {
background-image: url('data:image/svg+xml,');
}
footer .zen-validate-css {
background-image: url('data:image/svg+xml,');
}
footer .zen-license {
background-image: url('data:image/svg+xml,');
}
footer .zen-accessibility {
background-image: url('data:image/svg+xml,');
}
footer .zen-github {
background-image: url('data:image/svg+xml,');
}
@media screen and (width < 400px) {
.intro h1 {
font-size: 1.75rem;
}
.intro .summary p:nth-of-type(2) {
width: unset;
font-size: 0.9rem;
}
}
@media screen and (600px < width < 1000px) {
a,
p,
li,
abbr {
font-size: 1.5rem;
}
h3 {
font-size: 1.75em;
width: 600px;
}
.preamble,
:is(.explanation, .participation, .benefits, .requirements) > :is(h3, p) {
max-width: 600px;
}
.intro,
.explanation,
.participation,
.benefits,
.requirements,
.design-selection {
align-items: center;
}
[role=banner] > h1 {
font-size: 4rem;
}
.requirements {
padding-top: 10rem;
padding-bottom: 10rem;
}
}
@media screen and (height < 700px) {
a,
p {
font-size: 0.8rem;
}
.intro .summary {
margin-bottom: 1rem;
}
.participation {
padding-top: 7vh;
padding-bottom: 7vh;
}
.design-selection h3 {
margin-bottom: 1rem;
}
.design-selection ul {
gap: 0.25rem;
}
.design-archives {
top: -9rem;
}
}
@media screen and (width > 1000px) {
.intro h1 {
font-size: 3rem;
}
h3 {
font-size: 1.5rem;
}
p,
a,
abbr,
ul {
font-size: 1.25rem;
}
html {
scroll-snap-type: x mandatory;
width: initial;
overflow-y: hidden;
}
body {
width: initial;
overflow-x: visible;
}
.page-wrapper,
.main {
display: flex;
flex-flow: row nowrap;
}
.intro,
.explanation,
.participation,
.benefits,
.requirements,
.design-selection {
min-height: 100vh;
max-height: 100vh;
min-width: 100vw;
padding: 0;
height: 100vh;
width: 100vw;
}
.intro,
.explanation,
.participation,
.benefits,
.requirements {
min-height: unset;
}
.explanation,
.participation,
.benefits,
.requirements {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.intro {
align-items: center;
}
.intro::before,
.intro::after {
content: "";
display: inline-block;
width: auto;
height: 100vh;
aspect-ratio: 1/4.78313253;
position: fixed;
background-repeat: no-repeat;
background-size: auto 100vh;
transform: none;
z-index: 10;
}
.intro::before {
background-image: url('data:image/svg+xml,');
}
.intro::after {
background-image: url('data:image/svg+xml,');
}
.intro::before {
left: 0;
top: 0;
}
.intro,
::after {
left: initial;
right: 0;
top: 0;
bottom: initial;
}
:is(.explanation, .participation, .benefits, .requirements, .design-selection)::after {
background-image: none;
}
:is(.explanation, .benefits, .design-selection)::before {
background-size: 50vw auto;
background-position: center;
width: 100vw;
left: unset;
top: -40vh;
}
.participation, .requirements {
background-image: none;
}
:is(.participation, .requirements)::before {
content: "";
display: inline-block;
aspect-ratio: 4.78313253/1;
height: auto;
width: 100vw;
position: absolute;
background-repeat: no-repeat;
background-size: 100vw auto;
background-image: url('data:image/svg+xml,');
top: -15vh;
}
.preamble,
:is(.explanation, .participation, .benefits, .requirements) > :is(h3, p) {
width: 75vw;
}
.zen-resources {
background-color: initial;
right: 50%;
left: initial;
z-index: 100;
}
.zen-resources ul {
width: 30vw;
align-items: flex-start;
height: unset;
}
.zen-resources li {
border: initial;
background-size: 5vw auto;
width: 5vw;
background-position: bottom;
background-size: 5vw clamp(0px, 10vw, 100px);
flex-grow: 0;
}
.zen-resources a {
margin: 0;
width: 5vw;
}
.zen-resources .view-css {
background-image: url('data:image/svg+xml,');
}
.zen-resources .css-resources {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-faq {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-submit {
background-image: url('data:image/svg+xml,');
}
.zen-resources .zen-translations {
background-image: url('data:image/svg+xml,');
}
/* Side Nav */
footer {
position: fixed;
left: 50%;
bottom: 0;
flex-flow: row nowrap;
justify-content: space-around;
align-items: flex-end;
height: initial;
width: 30vw;
}
footer a {
background-position: center;
flex-grow: 0;
margin: 0;
background-size: 5vw auto;
width: 5vw;
height: 10vw;
background-position: bottom;
}
footer .zen-validate-html {
background-image: url('data:image/svg+xml,');
}
footer .zen-validate-css {
background-image: url('data:image/svg+xml,');
}
footer .zen-license {
background-image: url('data:image/svg+xml,');
}
footer .zen-accessibility {
background-image: url('data:image/svg+xml,');
}
footer .zen-github {
background-image: url('data:image/svg+xml,');
}
}
/*# sourceMappingURL=style.css.map */