|
.page { |
|
|
|
|
|
overflow: hidden; |
|
} |
|
|
|
|
|
#logo { |
|
img { |
|
width: auto; |
|
max-width: 75%; |
|
max-height: 160px; |
|
} |
|
} |
|
|
|
|
|
|
|
#tagline { |
|
h1 { |
|
span { |
|
position: relative; |
|
|
|
&::after { |
|
content: ""; |
|
pointer-events: none; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
top: 100%; |
|
|
|
height: 100%; |
|
margin-top: -0.2em; |
|
background: url("https://static.graphite.rs/textures/text-sketch-underline.png"); |
|
background-repeat: no-repeat; |
|
background-size: contain; |
|
} |
|
} |
|
} |
|
|
|
p { |
|
font-size: 1.2rem; |
|
|
|
@media screen and (max-width: 1400px) { |
|
max-width: unset; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
#quick-links { |
|
margin-top: calc(40 * var(--variable-px)); |
|
gap: calc(var(--font-size-link) * 0.8) calc(var(--font-size-link) * 0.8 * 2); |
|
|
|
&, |
|
.social-media-buttons, |
|
.call-to-action-buttons { |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: row; |
|
} |
|
|
|
.social-media-buttons, |
|
.call-to-action-buttons { |
|
gap: calc(var(--font-size-link) * 0.8); |
|
} |
|
|
|
.social-media-buttons img { |
|
width: calc(var(--font-size-link) * 2); |
|
display: block; |
|
} |
|
|
|
.call-to-action-buttons .github-stars { |
|
display: inline-flex; |
|
padding-left: calc(var(--font-size-link) / 2); |
|
padding-right: 0; |
|
|
|
img { |
|
margin: auto; |
|
width: calc(var(--font-size-link) * 4 / 3); |
|
height: calc(var(--font-size-link) * 4 / 3); |
|
} |
|
|
|
span { |
|
margin: auto calc(var(--font-size-link) / 2); |
|
} |
|
|
|
div { |
|
display: inline-flex; |
|
background: var(--color-fog); |
|
padding: 0 calc(var(--font-size-link) / 2); |
|
border-left: var(--border-thickness) solid var(--color-crimson); |
|
align-items: center; |
|
|
|
&:empty { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
&:has(.github-stars div:empty) { |
|
visibility: hidden; |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
#overview { |
|
background-color: var(--color-cloud); |
|
|
|
.sizzle-video { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
max-width: 100%; |
|
|
|
.block { |
|
min-width: 0; |
|
flex-direction: row; |
|
|
|
&.text { |
|
flex: 1 4 100%; |
|
flex-direction: column; |
|
|
|
p:has(.button) { |
|
margin-top: 20px; |
|
} |
|
} |
|
|
|
&.video { |
|
flex: 0 1 fit-content; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 900px) { |
|
flex-wrap: wrap; |
|
|
|
.block.video { |
|
flex: 1 1 100%; |
|
justify-content: center; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 1100px) { |
|
p:has(.button) { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
#donate { |
|
h2 { |
|
color: #cc304f; |
|
} |
|
} |
|
|
|
|
|
|
|
#proceduralism { |
|
background-color: var(--color-slate); |
|
color: white; |
|
|
|
.diptych { |
|
background: black; |
|
color: var(--color-fog); |
|
overflow: hidden; |
|
align-items: stretch; |
|
justify-content: center; |
|
gap: 0; |
|
--video-width: calc(460 * var(--variable-px)); |
|
|
|
@media screen and (max-width: 1360px) { |
|
--video-width: calc(400 * var(--variable-px)); |
|
} |
|
|
|
@media screen and (max-width: 1280px) { |
|
--video-width: calc(300 * var(--variable-px)); |
|
} |
|
|
|
@media screen and (max-width: 1080px) { |
|
--video-width: calc(500 * var(--variable-px)); |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
--video-width: 100%; |
|
} |
|
|
|
a { |
|
color: var(--color-mustard); |
|
} |
|
|
|
.video-background { |
|
flex: 1 0 var(--video-width); |
|
justify-content: center; |
|
|
|
&, |
|
video { |
|
max-width: var(--video-width); |
|
} |
|
|
|
&::after { |
|
content: none; |
|
} |
|
} |
|
|
|
.description { |
|
margin: calc(var(--feature-box-padding) * var(--variable-px)); |
|
} |
|
|
|
+ .diptych { |
|
margin-top: calc(40 * var(--variable-px)); |
|
} |
|
} |
|
|
|
.pipelines .feature-icon { |
|
background: rgba(255, 255, 255, 0.0625); |
|
|
|
img { |
|
filter: brightness(100); |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
#newsletter { |
|
background-color: var(--color-peach); |
|
position: relative; |
|
|
|
#newsletter-success { |
|
position: absolute; |
|
top: 0; |
|
|
|
&:not(:target) ~ .diptych .newsletter-success, |
|
&:target ~ .diptych form { |
|
display: none; |
|
} |
|
} |
|
|
|
.diptych { |
|
justify-content: center; |
|
|
|
.newsletter-signup { |
|
.newsletter-success { |
|
margin-top: 40px; |
|
padding: 40px; |
|
width: 100%; |
|
box-sizing: border-box; |
|
background: var(--color-ale); |
|
border: 2px solid var(--color-navy); |
|
} |
|
|
|
form { |
|
width: 100%; |
|
margin-top: 40px; |
|
display: flex; |
|
gap: 20px; |
|
flex-wrap: wrap; |
|
|
|
.same-line { |
|
display: flex; |
|
gap: 20px; |
|
flex: 100000 1 0; |
|
flex-wrap: wrap; |
|
min-width: Min(100%, 700px); |
|
|
|
div { |
|
min-height: auto; |
|
} |
|
} |
|
|
|
.input-column { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
--input-focus-color: var(--color-ale); |
|
|
|
&.name { |
|
flex: 1 0 0; |
|
min-width: 240px; |
|
} |
|
|
|
&.phone { |
|
display: none; |
|
} |
|
|
|
&.email { |
|
flex: 1 0 0; |
|
min-width: 240px; |
|
} |
|
|
|
@media screen and (max-width: 400px) { |
|
&.name, |
|
&.email { |
|
min-width: 100%; |
|
} |
|
} |
|
|
|
&.submit { |
|
flex: 1 0 auto; |
|
min-width: 100%; |
|
|
|
.button { |
|
text-align: center; |
|
} |
|
} |
|
|
|
label, |
|
input { |
|
flex: 0 0 auto; |
|
} |
|
|
|
label { |
|
font-size: var(--font-size-link); |
|
font-weight: 800; |
|
margin-bottom: 10px; |
|
line-height: 1; |
|
} |
|
|
|
input:not([type="submit"]) { |
|
flex: 0 0 auto; |
|
width: 100%; |
|
height: calc(var(--font-size-link) * 2); |
|
font-size: calc(var(--font-size-link) * 0.9); |
|
color: inherit; |
|
border: var(--border-thickness) solid currentColor; |
|
border-radius: 0; |
|
outline: none; |
|
margin: 0; |
|
padding: 0 var(--font-size-link); |
|
font-family: inherit; |
|
font-weight: inherit; |
|
box-sizing: border-box; |
|
|
|
&:focus { |
|
border-color: var(--input-focus-color); |
|
} |
|
} |
|
|
|
input[type="submit"] { |
|
background: none; |
|
outline: none; |
|
cursor: pointer; |
|
border-radius: 0; |
|
|
|
&:focus { |
|
border-color: var(--input-focus-color); |
|
color: var(--input-focus-color); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.social-media-links { |
|
display: flex; |
|
flex: 0 1 fit-content; |
|
flex-direction: column; |
|
flex-wrap: wrap; |
|
justify-content: flex-end; |
|
gap: 20px 80px; |
|
min-width: 0; |
|
|
|
a { |
|
text-decoration: none; |
|
display: flex; |
|
|
|
img { |
|
width: 48px; |
|
height: 48px; |
|
} |
|
|
|
span { |
|
line-height: 48px; |
|
margin: 0; |
|
margin-left: 20px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
#dive-in { |
|
.video-container { |
|
background: var(--color-fog); |
|
margin-top: calc(40 * var(--variable-px)); |
|
|
|
> div { |
|
margin: calc(20 * var(--variable-px)) auto; |
|
width: 100%; |
|
max-width: 800px; |
|
|
|
+ p { |
|
margin-top: 0; |
|
} |
|
} |
|
} |
|
|
|
.buttons { |
|
display: flex; |
|
gap: calc(var(--font-size-link) * 0.8); |
|
margin-top: calc(40 * var(--variable-px)); |
|
|
|
@media screen and (max-width: 600px) { |
|
flex-direction: column; |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
#recent-news { |
|
background-color: var(--color-parchment); |
|
|
|
.banner img { |
|
width: 100%; |
|
height: auto; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.headline a { |
|
text-decoration: none; |
|
font-weight: 700; |
|
} |
|
|
|
.summary { |
|
margin: 20px 0; |
|
flex-direction: column; |
|
gap: 20px; |
|
text-align: justify; |
|
text-justify: inter-character; |
|
-webkit-hyphens: auto; |
|
hyphens: auto; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-box-orient: vertical; |
|
-webkit-line-clamp: 6; |
|
|
|
code { |
|
text-justify: auto; |
|
} |
|
|
|
|
|
|
|
p { |
|
display: inline; |
|
|
|
&::after { |
|
content: "\A\A"; |
|
white-space: pre; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|