141 lines
4.9 KiB
CSS
141 lines
4.9 KiB
CSS
/* Global styles only (ADR 0001, section 6): layer order, tokens, reset, focus ring. */
|
|
@layer reset, base;
|
|
|
|
/* Tokens. Dark is the default, so it applies even without data-theme.
|
|
A nested [data-theme] element re-scopes the theme tokens (used by the dev button page). */
|
|
:root,
|
|
:root[data-theme="dark"],
|
|
[data-theme="dark"] {
|
|
--bg: #09090B;
|
|
--tile: #121215;
|
|
--tile-2: #19191D;
|
|
--tile-3: #232328;
|
|
--line: rgba(255,255,255,.07);
|
|
--line-2: rgba(255,255,255,.15);
|
|
--ink: #F4F2EE;
|
|
--ink-2: #BFBDB8;
|
|
--ink-3: #95938E;
|
|
--accent: #C8141C;
|
|
/* Crimson for small text (like counts): plain crimson is 3.2:1 on the dark tiles. */
|
|
--accent-text: color-mix(in srgb, #C8141C, white 40%);
|
|
--danger: #FF6B70;
|
|
--glass: rgba(18,18,21,.72);
|
|
--shadow-pop: 0 10px 28px rgba(0,0,0,.5);
|
|
/* Panels (bento tiles): a faint top highlight and a soft drop. */
|
|
--shadow-tile: inset 0 1px 0 rgba(255,255,255,.035), 0 0 0 1px rgba(255,255,255,.02), 0 24px 44px -24px rgba(0,0,0,.8);
|
|
/* Buttons: drop shadows and the soft-depth (neumorphic) light and shade. */
|
|
--shadow-btn: 0 10px 20px -6px rgba(0,0,0,.35);
|
|
--shadow-float: 0 14px 28px -12px rgba(0,0,0,.55);
|
|
--neu-d: rgba(0,0,0,.8);
|
|
--neu-l: rgba(255,255,255,.05);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
:root[data-theme="light"],
|
|
[data-theme="light"] {
|
|
--bg: #EFEDE9;
|
|
--tile: #FBFAF8;
|
|
--tile-2: #F3F1EE;
|
|
--tile-3: #E8E5E0;
|
|
--line: rgba(26,28,31,.08);
|
|
--line-2: rgba(26,28,31,.16);
|
|
--ink: #1A1C1F;
|
|
--ink-2: #46484D;
|
|
--ink-3: #686A70;
|
|
--accent: #C8141C;
|
|
--accent-text: #C8141C;
|
|
--danger: #B3121A;
|
|
--glass: rgba(251,250,248,.74);
|
|
--shadow-pop: 0 10px 28px rgba(26,28,31,.14);
|
|
--shadow-tile: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(26,28,31,.04), 0 16px 36px -20px rgba(26,28,31,.22);
|
|
--shadow-btn: 0 10px 20px -6px rgba(26,28,31,.22);
|
|
--shadow-float: 0 14px 28px -12px rgba(26,28,31,.3);
|
|
--neu-d: rgba(26,28,31,.17);
|
|
--neu-l: rgba(255,255,255,.95);
|
|
color-scheme: light;
|
|
}
|
|
|
|
:root {
|
|
/* Crimson shades, derived from --accent (spec "Design tokens"). */
|
|
--accent-hi: color-mix(in srgb, var(--accent), white 26%);
|
|
--accent-lo: color-mix(in srgb, var(--accent), black 30%);
|
|
--accent-soft: color-mix(in srgb, var(--accent), transparent 88%);
|
|
--accent-deep: color-mix(in srgb, var(--accent), black 55%);
|
|
--accent-glow: rgba(255,110,110,.75);
|
|
--accent-glow-0: rgba(255,110,110,0);
|
|
/* Text and marks on a crimson face: white in both themes. */
|
|
--on-accent: #FFFFFF;
|
|
/* Over photos and video (mobile slides): white text, dark fades and dark glass, same in both themes. */
|
|
--on-media: #FFFFFF;
|
|
--on-media-line: rgba(255,255,255,.18);
|
|
--on-media-badge: rgba(255,255,255,.5);
|
|
--media-fade: rgba(0,0,0,.8);
|
|
--media-fade-top: rgba(0,0,0,.45);
|
|
--media-fade-0: rgba(0,0,0,0);
|
|
--media-glass: rgba(0,0,0,.28);
|
|
--media-shadow: rgba(0,0,0,.35);
|
|
|
|
/* HexAvatar initials: dark muted gradients, same in both themes. */
|
|
--hex-oxblood: linear-gradient(145deg, #6e1a22, #3a0d12);
|
|
--hex-navy: linear-gradient(145deg, #243a63, #121d36);
|
|
--hex-forest: linear-gradient(145deg, #25573f, #112a1f);
|
|
--hex-slate: linear-gradient(145deg, #4a5663, #262d35);
|
|
--hex-plum: linear-gradient(145deg, #55294f, #2a1328);
|
|
--hex-graphite: linear-gradient(145deg, #3d3d42, #1c1c20);
|
|
--avatar-ink: #F4F2EE;
|
|
|
|
/* Shape and motion. */
|
|
--r-panel: 18px;
|
|
--r-card: 16px;
|
|
--r-ctl: 12px;
|
|
--ease: cubic-bezier(.2,.8,.2,1);
|
|
}
|
|
|
|
@layer reset {
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
body { margin: 0; }
|
|
/* Form controls take the page font instead of the UA's 13.33px Arial. */
|
|
button, input, textarea, select { font: inherit; }
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
color: var(--ink);
|
|
background: var(--bg);
|
|
font-family: var(--font-sans), system-ui, sans-serif;
|
|
}
|
|
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
|
|
}
|
|
|
|
/* Reduced motion, app-wide (ADR 0001, section 6; spec "Motion"). Switches off
|
|
card rise-ins, the feed pill and skeleton shimmer, sparks, heart bursts and
|
|
the light sweep on buttons, the featured glow, caption fade and slide (its
|
|
autoplay is stopped in FeaturedCarousel via matchMedia), and stops snap and smooth scrolling. State
|
|
changes still happen instantly. The loading spinner is kept, only slowed,
|
|
because it is the only sign that something is loading. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.post,
|
|
.post-cm,
|
|
.post-pop,
|
|
.feed-pill,
|
|
.feed-skel::after,
|
|
.post-like-beat .post-heart,
|
|
.btn-spark *,
|
|
.btn-spark::before,
|
|
.btn-spark::after,
|
|
.btn-gloss::before,
|
|
.btn-gloss::after,
|
|
.btn-sweep::before,
|
|
.account-dot,
|
|
.featured-cf::before,
|
|
.featured-cap,
|
|
.minnect-card { animation: none !important; }
|
|
.featured-item,
|
|
.featured-ring,
|
|
.featured-dot { transition: none !important; }
|
|
.btn-sweep::before,
|
|
.btn-gloss::after { transition: none !important; }
|
|
.panel-scroll, .feed-list { scroll-behavior: auto !important; scroll-snap-type: none !important; }
|
|
.spinner { animation-duration: 2.4s !important; }
|
|
}
|