/* PrepLocal's app typeface: Plus Jakarta Sans (SIL Open Font License, static/fonts/PlusJakartaSans-OFL.txt), served from this site rather than a font CDN, so no visitor's browser is sent to a third party to draw text. One variable file per character range covers every weight. Declaring it here costs nothing on pages that don't use it - a browser only downloads a font a page actually asks for (the landing page keeps its own). */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-wght-normal.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --pl-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pl-font-display: var(--pl-font); } /* Daytime values of the shared day-to-night theme. theme.js takes these over on a page with and keeps them in step with the visitor's clock; they are here so the page is still fully coloured before that runs, or if it never does. Keep in step with DAY in theme.js. Colours are space-separated RGB triplets so a page can add its own alpha: rgb(var(--pl-wall-top) / 0.42). */ :root { --pl-body: 251 236 196; --pl-wall-top: 111 174 95; --pl-wall-mid: 247 197 102; --pl-wall-bottom: 200 85 61; --pl-corner-1: 63 125 58; --pl-corner-2: 242 164 137; --pl-stop-0: 207 230 194; --pl-stop-1: 251 236 196; --pl-stop-2: 246 207 148; --pl-stop-3: 233 165 116; --pl-heading-dark: 122 29 20; --pl-heading-light: 212 87 74; --pl-subtitle: 110 74 64; --pl-shine: 255 243 230; --pl-pill-0: 238 246 230; --pl-pill-1: 253 241 216; --pl-pill-2: 249 220 192; --pl-pill-text: 181 50 37; --pl-pill-hover-0: 139 191 106; --pl-pill-hover-1: 224 99 79; --pl-card-surface: 255 253 247; --pl-heading-shadow: rgba(122, 29, 20, 0.45); --pl-soft-shadow: rgba(122, 29, 20, 0.2); --pl-logo-shadow: rgba(62, 48, 41, 0.42); --pl-logo-dusk: 0; --pl-logo-night: 0; --pl-stars: 0; /* The everyday interface - cards, text, borders, inputs, links - as ready-to-use colours. theme.js keeps every text colour here readable on both the cards and the page around them. */ --pl-surface: #fffdf7; --pl-surface-glass: rgba(255, 253, 247, 0.8); --pl-ground-wash: rgba(255, 253, 247, 0.6); --pl-topbar: rgba(255, 253, 247, 0.86); --pl-ink: #26291f; --pl-muted: #6f6a56; --pl-faint: #8f8770; --pl-border: #e5ddc7; --pl-border-soft: #efe9d9; --pl-input: #ffffff; --pl-primary: #b53225; --pl-primary-hover: #963024; --pl-primary-soft: rgba(181, 50, 37, 0.1); --pl-primary-focus: rgba(181, 50, 37, 0.22); --pl-on-primary: #ffffff; --pl-heading: #7a1d14; --pl-card-heading-dark: #7a1d14; --pl-card-heading-light: #d4574a; /* Status text (paid, pending, refunded...) drawn on a faint tint of itself: dark on the light cards, light on the dark ones. light-dark() follows the color-scheme theme.js sets as the cards switch. */ --pl-ok: light-dark(#15803d, #86efac); --pl-warn: light-dark(#92400e, #fcd34d); --pl-info: light-dark(#1d4ed8, #93c5fd); --pl-neutral: light-dark(#4b5563, #cbd5e1); --pl-danger: light-dark(#b91c1c, #fca5a5); } /* Browsers without light-dark() keep the daytime status colours. */ @supports not (color: light-dark(#000, #fff)) { :root { --pl-ok: #15803d; --pl-warn: #92400e; --pl-info: #1d4ed8; --pl-neutral: #4b5563; --pl-danger: #b91c1c; } } /* Form fields a page leaves to the browser's defaults take the theme's input colours, so none are left in the browser's own grey at night. Zero specificity, so any rule a page does set still wins. */ :where([data-pl-theme]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="image"]), textarea, select) { background-color: var(--pl-input); color: var(--pl-ink); } /* The PrepLocal teardrop, cross-fading through its day, dusk and night colours with the theme - see prep_logo() in _prep_logo.html. */ .pl-logo { position: relative; display: inline-block; flex: none; } .pl-logo img { display: block; width: 100%; height: 100%; } .pl-logo img + img { position: absolute; inset: 0; } .pl-logo .pl-logo-dusk { opacity: var(--pl-logo-dusk); } .pl-logo .pl-logo-night { opacity: var(--pl-logo-night); } /* The sky behind a themed page, with its stars - the landing page's background, reusable anywhere: placed first inside . It sits behind everything (z-index -1), so the page's own layout is untouched. `is-soft` lays a wash of the card colour over it for busier pages whose text sits straight on the background. */ .pl-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 1500px 320px at 50% 4%, rgb(var(--pl-wall-top) / 0.42), transparent 68%), radial-gradient(ellipse 1500px 320px at 50% 32%, rgb(var(--pl-wall-mid) / 0.34), transparent 70%), radial-gradient(ellipse 1600px 340px at 50% 94%, rgb(var(--pl-wall-bottom) / 0.38), transparent 70%), radial-gradient(circle at 84% 16%, rgb(var(--pl-corner-1) / 0.14), transparent 26%), radial-gradient(circle at 20% 86%, rgb(var(--pl-corner-2) / 0.30), transparent 28%), linear-gradient(180deg, rgb(var(--pl-stop-0)) 0%, rgb(var(--pl-stop-1)) 40%, rgb(var(--pl-stop-2)) 72%, rgb(var(--pl-stop-3)) 100%); } .pl-sky.is-soft::before { content: ""; position: absolute; inset: 0; background: var(--pl-ground-wash); } /* The night sky: two star fields that fade in as it gets dark (--pl-stars follows the night, so they are gone by day) and twinkle out of step with each other. Drawn as inline SVG tiles, so there is nothing to fetch. Put inside a page's background layer, before anything that should sit over it. */ .pl-stars { position: absolute; inset: 0; opacity: var(--pl-stars); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 78%); } .pl-stars span { position: absolute; inset: 0; } .pl-stars span:first-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420'%3E%3Ccircle cx='209' cy='66' r='1.1' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='343' cy='155' r='0.6' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='28' cy='183' r='0.6' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='272' cy='345' r='0.7' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='401' cy='394' r='1.0' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='621' cy='23' r='1.2' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='95' cy='53' r='0.8' fill='%23fff' fill-opacity='0.90'/%3E%3Ccircle cx='118' cy='244' r='1.0' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='350' cy='30' r='0.6' fill='%23fff' fill-opacity='0.56'/%3E%3Ccircle cx='434' cy='180' r='0.8' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='290' cy='128' r='1.2' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='158' cy='241' r='1.0' fill='%23fff' fill-opacity='0.93'/%3E%3Ccircle cx='465' cy='123' r='1.3' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='268' cy='316' r='0.7' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='29' cy='279' r='1.1' fill='%23fff' fill-opacity='0.77'/%3E%3Ccircle cx='557' cy='133' r='1.1' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='370' cy='192' r='1.2' fill='%23fff' fill-opacity='0.97'/%3E%3Ccircle cx='304' cy='278' r='0.6' fill='%23fff' fill-opacity='0.84'/%3E%3Ccircle cx='413' cy='413' r='1.2' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='248' cy='279' r='0.6' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='110' cy='52' r='0.6' fill='%23fff' fill-opacity='0.87'/%3E%3Ccircle cx='86' cy='106' r='0.9' fill='%23fff' fill-opacity='0.93'/%3E%3Ccircle cx='55' cy='189' r='1.0' fill='%23fff' fill-opacity='0.94'/%3E%3Ccircle cx='522' cy='360' r='0.8' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='231' cy='368' r='1.3' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='115' cy='100' r='0.8' fill='%23fff' fill-opacity='0.72'/%3E%3Ccircle cx='376' cy='112' r='0.6' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='237' cy='237' r='1.3' fill='%23fff' fill-opacity='0.83'/%3E%3Ccircle cx='330' cy='258' r='1.1' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='573' cy='325' r='1.2' fill='%23fff' fill-opacity='0.89'/%3E%3Ccircle cx='252' cy='168' r='0.7' fill='%23fff' fill-opacity='0.80'/%3E%3Ccircle cx='43' cy='32' r='0.7' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='219' cy='26' r='0.6' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='68' cy='154' r='0.6' fill='%23fff' fill-opacity='0.93'/%3E%3C/svg%3E"); animation: pl-twinkle 4.5s ease-in-out infinite; } .pl-stars span:last-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360'%3E%3Ccircle cx='351' cy='280' r='1.3' fill='%23fff' fill-opacity='0.73'/%3E%3Ccircle cx='205' cy='355' r='1.1' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='138' cy='96' r='1.2' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='59' cy='119' r='1.1' fill='%23fff' fill-opacity='0.76'/%3E%3Ccircle cx='107' cy='29' r='1.1' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='203' cy='262' r='1.5' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='55' cy='260' r='1.5' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='341' cy='109' r='1.6' fill='%23fff' fill-opacity='0.91'/%3E%3Ccircle cx='409' cy='340' r='1.1' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='378' cy='286' r='1.2' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='325' cy='41' r='1.5' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='237' cy='173' r='1.0' fill='%23fff' fill-opacity='0.71'/%3E%3Ccircle cx='260' cy='134' r='1.6' fill='%23fff' fill-opacity='0.93'/%3E%3Ccircle cx='460' cy='90' r='0.9' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='62' cy='252' r='1.1' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='149' cy='146' r='1.5' fill='%23fff' fill-opacity='0.70'/%3E%3Cpath d='M165 233Q165 237 169 237Q165 237 165 241Q165 237 160 237Q165 237 165 233Z' fill='%23fff8e6'/%3E%3Cpath d='M120 234Q120 240 126 240Q120 240 120 245Q120 240 115 240Q120 240 120 234Z' fill='%23fff8e6'/%3E%3Cpath d='M69 36Q69 41 74 41Q69 41 69 46Q69 41 64 41Q69 41 69 36Z' fill='%23fff8e6'/%3E%3C/svg%3E"); background-position: 170px 90px; animation: pl-twinkle 6.5s ease-in-out infinite 1.8s; } @keyframes pl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .pl-stars span { animation: none; } }