/* FONTS: inter-variable from HTML */ html { font-family: InterVariable, sans-serif; } :root { --rounded-corner: 12px; --blue1: rgb(153, 193, 241); --blue2: rgb(98, 160, 234); --blue3: rgb(53, 132, 228); --blue4: rgb(28, 113, 216); --blue5: rgb(26, 95, 180); --green1: rgb(143, 240, 164); --green2: rgb(87, 227, 137); --green3: rgb(51, 209, 122); --green4: rgb(46, 194, 126); --green5: rgb(38, 162, 105); --yellow1: rgb(249, 240, 107); --yellow2: rgb(248, 228, 92); --yellow3: rgb(246, 211, 45); --yellow4: rgb(245, 194, 17); --yellow5: rgb(229, 165, 10); --orange1: rgb(255, 190, 111); --orange2: rgb(255, 163, 72); --orange3: rgb(255, 120, 0); --orange4: rgb(230, 97, 0); --orange5: rgb(198, 70, 0); --red1: rgb(246, 97, 81); --red2: rgb(237, 51, 59); --red3: rgb(224, 27, 36); --red4: rgb(192, 28, 40); --red5: rgb(165, 29, 45); --purple1: rgb(220, 138, 221); --purple2: rgb(192, 97, 203); --purple3: rgb(145, 65, 172); --purple4: rgb(129, 61, 156); --purple5: rgb(97, 53, 131); --brown1: rgb(205, 171, 143); --brown2: rgb(181, 131, 90); --brown3: rgb(152, 106, 68); --brown4: rgb(134, 94, 60); --brown5: rgb(99, 69, 44); --light1: rgb(255, 255, 255); --light2: rgb(246, 245, 244); --light3: rgb(222, 221, 218); --light4: rgb(192, 191, 188); --light5: rgb(154, 153, 150); --dark1: rgb(119, 118, 123); --dark2: rgb(94, 92, 100); --dark3: rgb(61, 56, 70); --dark4: rgb(36, 31, 49); --dark5: rgb(0, 0, 0); --text: #f6f5f4; --maxwidth: 56rem; --pill: 64px; --gnomeblue: var(--blue3); } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { margin: 0; padding: 0; font-size: 12pt; font-weight: 400; font-variation-settings: "wght" 400; line-height: 1.6; letter-spacing: -0.01em; word-spacing: -0.01em; scroll-behavior: smooth; } @media (min-width: 700px) { html, body { font-size: 18px; } } a { color: var(--blue3); } table { border-collapse: collapse; width: 100%; } table td { vertical-align: baseline; } table.typography td { padding-bottom: 1rem; } body { color: var(--text); background-color: var(--light1); display: grid; grid-template-columns: 1fr; grid-template-rows: 4rem auto; grid-template-areas: "hd" "splash" "main" "ft"; min-height: 100vh; } @media (min-width: 2400px) { /* really wide layout */ body { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hdb" "splash splash main" "splash splash main" "ft ft ft"; } } h1{ font-weight: 800; font-variation-settings: "wght" 800; } h2, h3, h4 { font-weight: 800; font-variation-settings: "wght" 800; } .title-1 { font-weight: 800; font-variation-settings: "wght" 800; font-size: 24pt; } .title-2 { font-weight: 800; font-variation-settings: "wght" 800; font-size: 22pt; color: var(--gnomeblue); } .title-3 { font-weight: 800; font-variation-settings: "wght" 800; font-size: 18pt; } .title-4 { font-weight: 700; font-variation-settings: "wght" 700; font-size: 16pt; } /* hide elements only useful with javascript */ .hidden { display: none; } /* HEADER */ .header { grid-area: hd; background-color: var(--dark4); } .header a { color: var(--light1); text-decoration: none; } .header .home { font-weight: 800; font-variation-settings: "wght" 800; margin-right: 3rem; } .header .nav { display: flex; list-style: none; gap: 1rem; max-width: var(--maxwidth); margin: 0 auto; padding: 0 1rem; align-items: baseline; } .header .nav li { display: block; list-style: none; padding: 1rem; } .hdb { grid-area: hdb; background-color: var(--dark4); } .inlinebtns { display: block; text-align: center; } .btn { font-weight: 800; font-variation-settings: "wght" 800; display: inline-block; font-size: 120%; color: var(--light1); background-color: var(--dark1); padding: 0.4rem 1rem; border-radius: 500px; margin: 3rem auto; max-width: 20rem; text-align: center; text-decoration: none; } .btn.download { background-color: var(--gnomeblue); } .btn.download:hover { background-color: var(--blue3); } .btn.download:active { background-color: var(--blue2); } /* BODY */ .block { padding: 2rem; } .splash { grid-area: splash; background-image: url('tris.svg'), linear-gradient(45deg, var(--gnomeblue) 70%, var(--purple2) 100%); background-repeat: no-repeat; background-position: bottom left; background-size: 60%, 100%; display: grid; grid-template-rows: 1fr; align-items: end; } @media (min-width: 2400px) { .splash { align-items: start; } } .splash a { color: var(--light2); } .splash > div { max-width: var(--maxwidth); margin: 0 auto; padding: 0 1rem; } .splash h1 { margin-top: 5em; } .splash .sample { /* font-weight: normal; font-variation-settings: 'wght' 400; font-size: 20pt; line-height: 100%; */ --var-weight: 600; --var-letterSpacing: -0.03em; --var-lineHeight: 1.1; font-size: 28px; letter-spacing: var(--var-letterSpacing); line-height: var(--var-lineHeight); font-variation-settings: "wght" var(--var-weight), "slnt" var(--var-slant); word-wrap: anywhere; /* webkit */ overflow-wrap: anywhere; /* ffox */ } @media (min-width: 500px) { .splash { min-height: 50vh; } } #logopreview { width: 100%; height: auto; } #logopreview .logofill { fill: var(--dark4); } @media (prefers-color-scheme: dark) { #logopreview .logofill { fill: var(--light2); } } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem,1fr)); margin: 1rem 0 3rem; padding: 0; gap: 16px; align-items: end; } .tiles li { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; /* space-around;*/ gap: 16px; } .tiles > li > .colorpatch { display: block; width: var(--pill); height: var(--pill); border-radius: var(--pill); } .tiles > li > .colorpatch.stroked { border: 1px solid var(--light3); } @media (prefers-color-scheme: dark) { .tiles > li > .colorpatch.stroked { border: 1px solid var(--dark3); } } .tiles > li > .colorpatch.hsl { /* --H, --S, --L come from the HTML */ background-color: hsl(var(--H),var(--S),var(--L)); } @media (prefers-color-scheme: dark) { .tiles > li > .colorpatch.hsl { background-color: hsl(var(--H),var(--S),calc(var(--L)*.85)); /* darken by 15% */ } } .logotile { list-style: none; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; /* space-around;*/ gap: 16px; } .logotile img { display: block; width: 100%; height: auto; border-radius: 16px; } .logotile .description { font-size: 80%; } .main { grid-area: main; background-color: var(--light1); color: var(--dark5); } @media (prefers-color-scheme: dark) { .main { background-color: var(--dark4); color: var(--light2); } } .main > div { max-width: var(--maxwidth); margin: 0 auto; padding: 2rem 1rem 4rem 1rem; } @media (min-width: 700px) { .faq { columns: 2; orphans: 3; } } /* FOOTER */ .container:has(+ footer) { /* last container before footer */ margin-bottom: 4rem; } footer { grid-area: ft; background-color: var(--dark5); color: white; padding: 5rem 3rem 7rem; text-align: center; flex-shrink: 0; & a { text-decoration: none; font-weight: 600; font-variation-settings: "wght" 600; color: white; display: block; margin: auto; } & .copy { font-size: 70%; } &>div { max-width: var(--maxwidth); margin: 0 auto; padding: 0 1rem; } } footer a[href^="http"]:after, ul.nav a[href^="http"]:after { content: none; } ul.bottomlinks { column-width: 12rem; column-gap: 12px; line-height: 1.8rem; max-width: var(--pagegridwidth); margin: 0 auto 4rem; } /* force 2 column on mobile */ @media only screen and (max-width: 600px) { ul.bottomlinks { font-size: 80%; column-count: 2; column-width: auto; } } ul.bottomlinks li { display: block; list-style: none; text-align: left; white-space: nowrap; } ul.bottomlinks li a { font-weight: 400; text-decoration: underline; text-decoration-color: rgba(255,255,255,0); transition: all 200ms ease-out; } ul.bottomlinks li a:hover { text-decoration-color: rgba(255,255,255,1); } a.social { width: 32px; height: 32px; margin: 0; } .socials { display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; margin: 48px 6px 0 0; gap: 12px; } .social { fill: rgba(255,255,255,0.6); transition: all 200ms ease-out; } .social:hover { fill: rgba(255,255,255,1); }