297 lines
7.2 KiB
CSS
297 lines
7.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
WEB THEME (default)
|
|
------------------------------------------------------------
|
|
A "technical print" layout painted in the gruvbox dark-hard
|
|
palette. Tokens live here; the page markup uses Tailwind
|
|
utilities plus the @utility classes below. Everything visual
|
|
is scoped to html[data-theme="web"] so the skeuo desktop
|
|
(which reads its own vars from skeuo.css) is never affected.
|
|
============================================================ */
|
|
|
|
:root {
|
|
/* gruvbox dark-hard */
|
|
--bg: #1d2021;
|
|
--bg-raised: #282828;
|
|
--bg-well: #161819;
|
|
|
|
--ink: #fbf1c7;
|
|
--body: #d5c4a1;
|
|
--muted: #a89984;
|
|
--faint: #928374;
|
|
|
|
/* one accent (orange); other gruvbox hues are for status only */
|
|
--accent: #fe8019;
|
|
--accent-strong: #d65d0e;
|
|
--negative: #fb4934;
|
|
--positive: #b8bb26;
|
|
|
|
--rule: rgba(235, 219, 178, 0.16);
|
|
--rule-soft: rgba(235, 219, 178, 0.09);
|
|
--rule-strong: rgba(235, 219, 178, 0.3);
|
|
|
|
--fill: rgba(235, 219, 178, 0.035);
|
|
--fill-strong: rgba(235, 219, 178, 0.07);
|
|
|
|
--ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* Beats page.css's :root when the web theme is active. The desk is a light,
|
|
colourful, cartoon-skeuomorphic surface — the dark gruvbox values in :root
|
|
are only the fallback for the desktop mode. */
|
|
html[data-theme="web"] {
|
|
color-scheme: light;
|
|
--bg: #f7e7c6;
|
|
--bg-raised: #fffdf6;
|
|
--bg-well: #eed9b0;
|
|
--accent: #f4823a;
|
|
--accent2: #d4611c;
|
|
--accent3: #f2c14e;
|
|
--green: #58bd72;
|
|
--red: #ea6f6a;
|
|
--gray: #7f7768;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-ink: var(--ink);
|
|
--color-body: var(--body);
|
|
--color-muted: var(--muted);
|
|
--color-faint: var(--faint);
|
|
--color-accent: var(--accent);
|
|
--color-accent-strong: var(--accent-strong);
|
|
--color-positive: var(--positive);
|
|
--color-negative: var(--negative);
|
|
--color-bg: var(--bg);
|
|
|
|
--font-sans: var(--font-plex);
|
|
--font-mono: var(--font-plexmono);
|
|
--font-display: var(--font-news);
|
|
}
|
|
|
|
html[data-theme="web"] {
|
|
scroll-behavior: smooth;
|
|
scroll-padding-top: 5.5rem;
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
html[data-theme="web"] ::selection {
|
|
background: rgba(244, 130, 58, 0.3);
|
|
color: var(--ink);
|
|
}
|
|
|
|
html[data-theme="web"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
html[data-theme="web"] ::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
html[data-theme="web"] ::-webkit-scrollbar-track {
|
|
background: var(--bg-well);
|
|
}
|
|
html[data-theme="web"] ::-webkit-scrollbar-thumb {
|
|
background: #d9c49b;
|
|
border: 3px solid var(--bg-well);
|
|
border-radius: 99px;
|
|
}
|
|
html[data-theme="web"] ::-webkit-scrollbar-thumb:hover {
|
|
background: #c9b184;
|
|
}
|
|
|
|
/* Phones never get the desktop-mode button. */
|
|
html[data-device="phone"] .desktop-toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Type
|
|
------------------------------------------------------------------ */
|
|
|
|
@utility display {
|
|
font-family: var(--font-news), Georgia, "Times New Roman", serif;
|
|
font-weight: 500;
|
|
letter-spacing: -0.012em;
|
|
line-height: 1.12;
|
|
color: var(--ink);
|
|
}
|
|
|
|
@utility serif-num {
|
|
font-family: var(--font-news), Georgia, serif;
|
|
font-weight: 500;
|
|
font-variant-numeric: lining-nums tabular-nums;
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* run-in metadata label: mono, sentence case — deliberately not all-caps */
|
|
@utility label {
|
|
font-family: var(--font-plexmono), ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
@utility lede {
|
|
font-size: 1.0625rem;
|
|
line-height: 1.7;
|
|
color: var(--body);
|
|
}
|
|
|
|
@utility measure {
|
|
max-width: 34rem;
|
|
}
|
|
|
|
@utility measure-wide {
|
|
max-width: 46rem;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Surfaces — restrained translucency, hairline rules
|
|
------------------------------------------------------------------ */
|
|
|
|
@utility shell {
|
|
width: 100%;
|
|
max-width: 1840px;
|
|
margin-inline: auto;
|
|
padding-inline: clamp(1.25rem, 3.5vw, 5rem);
|
|
}
|
|
|
|
@utility glass {
|
|
background-color: var(--fill);
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
@utility glass-soft {
|
|
background-color: transparent;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
@utility glass-sunken {
|
|
background-color: var(--bg-well);
|
|
border: 1px solid var(--rule-soft);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
@utility glass-bar {
|
|
background-color: rgba(29, 32, 33, 0.94);
|
|
border-bottom: 1px solid rgba(235, 219, 178, 0.22);
|
|
backdrop-filter: blur(12px) saturate(120%);
|
|
}
|
|
|
|
@utility glass-press-sm {
|
|
background-color: transparent;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 8px;
|
|
transition-property: background-color, border-color, color;
|
|
transition-duration: 160ms;
|
|
transition-timing-function: ease-out;
|
|
|
|
&:hover {
|
|
background-color: var(--fill-strong);
|
|
border-color: var(--rule-strong);
|
|
color: var(--ink);
|
|
}
|
|
&:active {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
@utility rule {
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
|
|
@utility rule-strong {
|
|
border-top: 1px solid var(--rule-strong);
|
|
}
|
|
|
|
@utility rule-soft {
|
|
border-top: 1px solid var(--rule-soft);
|
|
}
|
|
|
|
@utility index-num {
|
|
font-family: var(--font-plexmono), ui-monospace, monospace;
|
|
font-size: 0.78rem;
|
|
color: var(--faint);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Motion — scroll reveals only
|
|
------------------------------------------------------------------ */
|
|
|
|
/* Scroll reveal. Hidden until `.is-in` lands, and every block on the editorial
|
|
page is wrapped, so the page fills in from top to bottom: the first screenful
|
|
cascades in document order on load, everything else reveals as it scrolls in.
|
|
A failed JS bundle leaves the page visible via the <noscript> rule in layout. */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translate3d(0, 18px, 0);
|
|
transition:
|
|
opacity 0.8s var(--ease-cinematic),
|
|
transform 0.8s var(--ease-cinematic);
|
|
transition-delay: var(--delay, 0ms);
|
|
}
|
|
.reveal.is-in {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%,
|
|
49% {
|
|
opacity: 1;
|
|
}
|
|
50%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.animate-blink {
|
|
animation: blink 1.05s step-end infinite;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html[data-theme="web"] {
|
|
scroll-behavior: auto;
|
|
}
|
|
.reveal {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
transition: none;
|
|
}
|
|
.animate-blink {
|
|
animation: none !important;
|
|
}
|
|
* {
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------------
|
|
Helpers
|
|
------------------------------------------------------------------ */
|
|
|
|
html[data-theme="web"] .link {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
text-decoration-color: rgba(254, 128, 25, 0.4);
|
|
transition: text-decoration-color 150ms ease-out;
|
|
}
|
|
html[data-theme="web"] .link:hover {
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
html[data-theme="web"] .hide-scrollbar {
|
|
scrollbar-width: none;
|
|
}
|
|
html[data-theme="web"] .hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|