loki5512344
456366006e
Buttons and inputs in the kit used rounded-md (6px) while the landing CTAs hard-coded 0.6rem (9.6px), so a form row could mix three different corners. Add --radius-ctl (10px, matching --radius-panel), point every interactive control at it via rounded-ctl and make the CTAs consume the same variable. Drop the unused ButtonAnchor helper.
79 lines
2.3 KiB
CSS
79 lines
2.3 KiB
CSS
@import "tailwindcss";
|
|
@import "@fontsource-variable/unbounded";
|
|
@import "@fontsource-variable/onest";
|
|
@import "@fontsource-variable/jetbrains-mono";
|
|
|
|
@theme {
|
|
--color-abyss: #0d1416;
|
|
--color-slate: #142226;
|
|
--color-shoal: #1f3238;
|
|
--color-frost: #9fb3b0;
|
|
--color-snow: #eef5f3;
|
|
--color-ice: #5cc8e7;
|
|
--color-ember: #e8835a;
|
|
|
|
--font-display: "Unbounded Variable", system-ui, sans-serif;
|
|
--font-sans: "Onest Variable", system-ui, sans-serif;
|
|
--font-code: "JetBrains Mono Variable", ui-monospace, monospace;
|
|
|
|
--text-hero: 3.8125rem;
|
|
--text-hero--line-height: 1.05;
|
|
--radius-panel: 10px;
|
|
/* Buttons, inputs and their containers. The landing CTAs hard-code the same value, so one
|
|
control cannot land at 6px while its neighbour in the same row lands at 10px. */
|
|
--radius-ctl: 10px;
|
|
}
|
|
|
|
/* The page accent follows the active ClickGui theme (useActiveTheme sets it on :root);
|
|
registering it as a color lets theme switches cross-fade instead of snapping. */
|
|
@property --color-ice {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: #5cc8e7;
|
|
}
|
|
@property --page-accent-glow {
|
|
syntax: "<color>";
|
|
inherits: true;
|
|
initial-value: rgb(92 200 231 / 0.35);
|
|
}
|
|
|
|
@layer base {
|
|
html {
|
|
/* Height reserved for the floating top bar (TopBar): its top margin plus the bar itself. */
|
|
--topbar-h: 4.25rem;
|
|
scroll-padding-top: calc(var(--topbar-h) + 1rem);
|
|
color-scheme: dark;
|
|
/* 100vw full-bleed sections exceed the scrollbar-less client width by a few px;
|
|
clip on html too so the document can never pan horizontally. */
|
|
overflow-x: clip;
|
|
transition: --color-ice 400ms ease, --page-accent-glow 400ms ease;
|
|
}
|
|
body {
|
|
@apply bg-abyss text-snow font-sans antialiased;
|
|
min-height: 100dvh;
|
|
/* Full-bleed sections span 100vw; never let that turn into a horizontal scrollbar. */
|
|
overflow-x: clip;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
@apply font-display font-bold;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-ice);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Konami easter egg: the whole page cycles through the hue wheel for a few seconds. */
|
|
html.lv-konami { animation: lv-konami-hue 1.4s linear infinite; }
|
|
@keyframes lv-konami-hue { to { filter: hue-rotate(360deg); } }
|