67 lines
2.1 KiB
CSS
67 lines
2.1 KiB
CSS
@font-face{
|
|
font-family:'Lilita One';
|
|
src:url('fonts/lilita-one.woff2') format('woff2');
|
|
font-display:swap;
|
|
}
|
|
@font-face{
|
|
font-family:'Nunito';
|
|
src:url('fonts/nunito.woff2') format('woff2');
|
|
font-weight:200 1000;
|
|
font-display:swap;
|
|
}
|
|
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--ink:#1a1648;
|
|
--night:#2b2a80;
|
|
--lamp:#ffc93c;
|
|
--paper:#fffaf0;
|
|
--ff-display:'Lilita One',system-ui,sans-serif;
|
|
--ff-body:'Nunito',system-ui,sans-serif;
|
|
--gutter:clamp(1rem,4vw,3rem);
|
|
}
|
|
html{font-size:100%;-webkit-text-size-adjust:100%}
|
|
body{
|
|
background:var(--night);
|
|
color:var(--paper);
|
|
font-family:var(--ff-body);
|
|
font-size:1.0625rem;
|
|
font-weight:600;
|
|
line-height:1.6;
|
|
overflow-x:clip;
|
|
}
|
|
::selection{background:var(--lamp);color:var(--ink)}
|
|
a{color:inherit}
|
|
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
|
|
main :focus-visible{outline-color:var(--ink)}
|
|
.skip{
|
|
position:absolute;left:var(--gutter);top:-5rem;z-index:10;
|
|
padding:.6rem 1rem;background:var(--lamp);color:var(--ink);font-weight:800;
|
|
}
|
|
.skip:focus{top:.75rem}
|
|
.wrap{max-width:48rem;margin-inline:auto;padding-inline:var(--gutter)}
|
|
.top{padding-block:1.25rem}
|
|
.logo{font-family:var(--ff-display);font-size:1.6rem;text-decoration:none;color:var(--lamp)}
|
|
main{
|
|
position:relative;
|
|
margin-top:24px;
|
|
background:var(--paper);color:var(--ink);
|
|
padding-block:clamp(2.5rem,6vw,4rem);
|
|
}
|
|
main::before{
|
|
content:'';position:absolute;left:0;right:0;bottom:100%;height:24px;
|
|
background:linear-gradient(to top right,var(--paper) 50%,transparent 51%) 0 100%/48px 24px repeat-x;
|
|
}
|
|
h1,h2{font-family:var(--ff-display);font-weight:400;line-height:1.1;text-wrap:balance}
|
|
h1{font-size:clamp(2.4rem,7vw,3.75rem)}
|
|
h2{margin-top:2.25rem;font-size:1.5rem}
|
|
h3{margin-top:1.25rem;font-size:1.0625rem;font-weight:800}
|
|
p,ul{margin-top:.6rem}
|
|
ul{padding-left:1.25rem}
|
|
li{margin-top:.25rem}
|
|
address{margin-top:.6rem;font-style:normal}
|
|
main a{overflow-wrap:anywhere;text-underline-offset:.15em}
|
|
footer{padding-block:1.5rem 2rem}
|
|
footer ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:0;padding:0;list-style:none}
|
|
footer li{margin:0}
|
|
footer a{font-weight:800}
|