/* This site is created with Grav, using a custom theme. 2021-2024 Luke Francke. */
* {
box-sizing: border-box;
}
body, html {
background: #e1f0e1;
margin: 0;
font-family: 'Hanken Grotesk', sans-serif;
scroll-behavior: smooth;
line-break: auto;
hyphens: auto;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
main {
margin: 8rem 10px 0 10px;
overflow: hidden;
-webkit-animation: opacity .5s .25s both ease-out;
-webkit-animation-delay: .35s;
}
*::selection {
color: #fff;
background: rgba( 0, 0, 0, 0.5 );
}
body::-webkit-scrollbar {
width: 5px;
}
body::-webkit-scrollbar-track {
background: #d7e0ea;
border-radius: 7px;
}
body::-webkit-scrollbar-thumb {
background: #232323;
border-radius: 7px;
}
input:focus {
outline: none !important;
}
.muted {
user-select: none;
-webkit-user-select: none;
}
.button {
font-family: 'Hanken Grotesk', sans-serif;
display: inline-block;
appearance: none;
text-decoration: none !important;
color: rgba( 0, 0, 0, 0.6 ) !important;
border: none;
letter-spacing: 2%;
padding: 4px 8px;
border-radius: 7px;
margin: 10px auto 10px 0;
font-size: 1.125rem;
background: rgba(0,0,0,0.1);
transition: background .25s linear;
}
.button:hover {
background: rgba(0,0,0,0.07);
}
.large-button {
font-size: 1.5rem;
margin: 25px auto 10px 0;
padding: 6px 12px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
color: #232323;
}
h3 {
scroll-margin-top: 60px;
}
p {
color: #232323;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 400;
line-height: 1.6em;
animation-delay: .8s;
}
.grey, .grey a {
color: #797776 !important;
}
ul, li {
color: #232323;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 400;
line-height: 1.6em;
}
ul {
padding-left: 1rem;
}
li {
list-style: "-  ";
padding-left: 2px;
}
sub {
font-size: 11px;
margin: 0 5px 0 5px;
}
.page-title, .blog-title {
font-size: 1.85rem;
}
.small-page-title {
font-size: 1.45rem;
margin: 0;
}
.italic {
font-style: italic;
}
.strong {
font-weight: 600;
}
.centered {
text-align: center !important;
}
.right-aligned {
text-align: right !important;
}
.small {
font-size: .8rem;
}
.no-padding {
padding: 0 !important;
}
table {
font-family: 'Hanken Grotesk', sans-serif;
}
td {
padding: 5px;
}
a {
color: #232323;
text-decoration: underline;
}
a:hover {
color: #232323;
text-decoration: none;
}
a:visited {
color: #232323;
text-decoration: underline;
}
a:active {
color: #232323;
text-decoration: underline;
}
.divider {
border-top: 2px solid rgba( 0, 0, 0, 0.2 );
padding: 10px 0 0 0;
margin: 5px auto;
max-width: 100%;
-webkit-animation: none;
}
.space {
display: block;
margin: 25px 0 0 0;
}
.space-bottom {
display: inline-block;
margin: 0 0 15px 0;
}
.nounderline {
text-decoration: none !important;
}
.bordered {
background: rgba(0,0,0,0.1);
margin: 5px 0;
padding: 5px 15px;
border-radius: 7px;
width: 100%;
margin: 25px auto 25px auto;
}
.image {
display: block;
margin: 10px auto 10px auto;
border-radius: 7px;
width: 300px;
border: 2px solid rgba( 0, 0, 0, 0.1 );
-webkit-animation: opacity .5s .25s both ease-out, image 1s linear;
-webkit-animation-delay: .75s;
}
.left-image {
margin: 0 !important;
width: 250px;
}
nav {
position: fixed;
top: 0;
left: 0;
min-height: 3rem;
z-index: 1;
background: #e1f0e1;
width: 100%;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.header-title {
font-size: 1.15rem;
text-transform: uppercase;
letter-spacing: .3em;
margin: .55rem 0 0 1.25rem;
font-weight: 600;
}
.header-title a {
text-decoration: none;
}
.navmenu-btn, .navmenuclose-btn {
position: absolute;
top: 0px;
right: 5px;
color: #000000;
background-color: transparent;
padding: 10px;
border: none;
cursor: pointer;
}
.navmenuclose-btn {
position: fixed;
}
.navmenu-btntext {
position: fixed;
right: 3rem;
top: -7px;
}
.navmenu-content {
display: none;
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
border: none;
background: #e1f0e1;
z-index: 1;
animation: mobile-menu .44s ease-out, opacity .44s ease-out;
}
.navmenu-links {
margin: 30% 0 0 0;
}
.navmenu-content a {
display: block;
text-align: left;
color: #232323;
padding: 12px 16px;
text-decoration: none;
font-size: 24px;
}
.navmenu-content span:hover {
border-bottom: 2px solid #232323;
}
.show {
display: block;
margin: 0 15px 0 0;
}
.hero-cover {
width: 100%;
height: auto;
margin: 1.75rem 0 0 0;
pointer-events: none;
border-radius: 7px;
}
.hero-main-text {
font-size: 2.25rem !important;
}
.pill {
background: rgba(0,0,0,0.1);
border: none;
color: #232323;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 2px 1px;
border-radius: 20px;
}
footer {
display: block;
margin: 5rem auto auto auto;
padding: 15px 15px 10px 15px;
width: 100%;
background: rgba(0,0,0,0.1);
font-size: .9rem;
overflow: hidden;
}
footer a {
color: #232323;
transition: color .25s ease;
}
footer a:hover {
color: #666666;
}
ul.footer-list {
list-style: none;
margin: 5px auto auto -15px;
}
ul.footer-list li {
display: inline-block;
color: #191919;
padding: 0 0.5rem 0 0;
}
ul.footer-list li a {
text-decoration: none !important;
}
.copy {
font-size: .84rem;
clear: both;
color: #232323;
}
.row {
display: block;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
.column img {
max-width: 100%;
max-height: auto;
margin: 0 auto 5px auto;
border-radius: 7px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.grid-container {
display: grid;
grid-template-columns: 35% 65%;
border-bottom: 2px solid rgba( 0, 0, 0, 0.1 );
}
.grid-item {
padding: 10px;
}
.date {
font-size: 1.25rem;
}
.nav-icon {
margin: auto 3px auto 3px;
}
.external-icon {
display: inline-block;
padding: 0 4px 0 4px;
}
.external-icon::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
}
.backlink {
font-size: 14px;
}
.backlink a {
text-decoration: none;
color: #232323;
text-decoration: underline;
text-underline-offset: 4px;
}
.backlink::before {
padding: 0 4px 0 4px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'%3E%3C/polyline%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
}
.showcase-container {
display: grid;
grid-template-columns: 50% 50%;
gap: 5px;
}
.showcase-img {
height: 100%;
width: 100%;
object-fit: cover;
}
.showcase-container > div {
height: 240px;
}
.red-note {
background: rgba(0,0,0,0.1);
border-left: 6px solid #f44336;
margin: 10px 0 10px 0;
padding: 15px 10px;
font-size: 14px;
border-radius: 7px;
margin: 25px auto 25px auto;
}
.cover-image {
display: block;
width: 100%;
margin: 2px auto 15px auto;
border-radius: 7px;
background-color: #ffffff;
pointer-events: none;
-webkit-animation: opacity .5s .25s both ease-out, image 1s linear;
}
@media only screen and (min-width: 768px) {
main {
width: 75% !important;
margin: 75px auto 0 12.5%;
}
ul, li {
margin-left: auto;
margin-right: auto;
}
.navmenu-btn, .navmenuclose-btn {
right: 12.5%;
}
.navmenu-btntext {
right: 15.5%;
}
.navmenu-content {
display: none;
left: 67.5%;
top: 0;
position: fixed;
width: 20%;
height: auto;
z-index: 1;
border-left: 2px solid rgba( 0, 0, 0, 0.1 );
border-right: 2px solid rgba( 0, 0, 0, 0.1 );
border-bottom: 2px solid rgba( 0, 0, 0, 0.1 );
animation: opacity .2s linear;
}
.navmenu-links {
margin: 5rem 2rem 0 0;
right: 0 !important;
}
.navmenu-content a {
font-size: 26px;
}
.show {
display: block;
margin: 0 150px 0 0;
}
.header-title {
margin: .75rem 0 0 12.5%;
}
.image {
width: 420px;
}
.showcase-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
max-width: 98%;
}
.showcase-container > div {
height: 45vh;
}
footer {
width: 75%;
margin: 8rem 0 0 12.5%;
font-size: 1.05rem;
padding: 15px !important;
border-radius: 7px 7px 0 0;
}
figure img {
max-width: 50%;
}
figcaption {
max-width: 45%;
}
}
@media only screen and (max-width: 720px) {
.cta-link, .start-text {
margin-left: 15px;
margin-right: 10px;
}
.mobile-hidden {
display: none !important;
}
.column {
width: 100% !important;
}
}
@keyframes image {
0% {
filter: blur(5px);
}
100% {
filter: none;
}
}
@keyframes opacity {
from {
opacity: 0%;
}
to {
opacity: 100%;
}
}
@keyframes slidein {
from {
width: 0px;
}
to {
width: 20px;
}
}
@keyframes mobile-menu {
0% {
left: 100%;
}
100% {
left: 0%;
}
}
@media (prefers-color-scheme: dark) {
*::selection {
color: #c2c2c2;
background: rgba( 255, 255, 255, 0.25 );
}
p, h1, h2, h3, h4, h5, h6, li, li ul, main a {
color: #c2c2c2 !important;
}
nav a, .navmenu-btn svg, .navmenuclose-btn svg, .divider, .external-icon, .availability-green, .availability-red, table, .button .external-icon, .search-icon, .bordered .button svg, .collapsible, .hero-text svg {
filter: invert(100%) !important;
}
img, .red-note, footer {
filter: none !important;
}
html, body {
background: #181f12;
}
footer {
background: rgba(255,255,255,0.15);
}
footer a {
color: #cccccc !important;
}
footer a:hover {
color: #666666;
}
.bordered, .button, .pill {
color: #c2c2c2 !important;
background: rgba(255,255,255,0.15);
}
.button:hover {
background: rgba(255, 255, 255, 0.1);
}
.grid-container, nav {
border-bottom: 2px solid rgba(255, 255, 255,0.2);
}
nav, .navmenu-content {
background: #181f12; 
}
.red-note, .column a {
color: #dcdcdc !important;
}
.red-note {
background: rgba(255,255,255,0.1);
}
.image {
border: 2px solid rgba( 255, 255, 255, 0.2 );
}
.backlink::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23c2c2c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'%3E%3C/polyline%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
}
@media only screen and (min-width: 768px) {
.navmenu-content {
border-left: 2px solid rgba( 255, 255, 255, 0.2 );
border-right: 2px solid rgba( 255, 255, 255, 0.2 );
border-bottom: 2px solid rgba( 255, 255, 255, 0.2 );
}
}
}
/* All font files are loaded from the servers of this site. */
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/luke/fonts/hankengrotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/user/themes/luke/fonts/hankengrotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/luke/fonts/hankengrotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpT59CjCQ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/user/themes/luke/fonts/hankengrotesk/ieVn2YZDLWuGJpnzaiwFXS9tYtpd59A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}