56 lines
1.9 KiB
CSS
56 lines
1.9 KiB
CSS
/* Wiggleverse — Spacing, radius, shadow, layout & motion tokens
|
|
Derived from the marketing-site CSS. The brand has almost no shadow system —
|
|
depth is carried by surface color + hairline borders, not drop shadows. */
|
|
|
|
:root {
|
|
/* ---- Spacing scale (rem) ---- */
|
|
--space-0: 0;
|
|
--space-1: .25rem;
|
|
--space-2: .5rem;
|
|
--space-3: .7rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.2rem;
|
|
--space-6: 1.6rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
/* Section rhythm — fluid vertical padding for page bands */
|
|
--section-pad: clamp(3rem, 7vw, 5.5rem);
|
|
--page-hero-pad: clamp(2.8rem, 6vw, 4.5rem);
|
|
|
|
/* ---- Layout ---- */
|
|
--wrap-max: 1080px; /* content column */
|
|
--wrap-gutter: 92vw; /* width: min(--wrap-max, --wrap-gutter) */
|
|
--measure-prose: 68ch; /* reading measure for prose blocks */
|
|
|
|
/* ---- Radii ---- */
|
|
--radius-card: 14px; /* path-cards, build-cards */
|
|
--radius-panel: 12px; /* principle tiles */
|
|
--radius-sm: 4px; /* focus ring rounding */
|
|
--radius-pill: 999px; /* buttons, tags, notices */
|
|
--radius-mark: 26px; /* favicon tile rounding */
|
|
|
|
/* ---- Borders ---- */
|
|
--border-hair: 1px; /* default hairline */
|
|
--border-card-w: 1px;
|
|
--btn-border-w: 1.5px; /* ghost button / focus weight */
|
|
|
|
/* ---- Elevation ---- *
|
|
* The system avoids drop shadows. "Lift" on hover is a -1 to -3px translateY,
|
|
* not a shadow. These tokens exist for the rare card that needs real elevation. */
|
|
--shadow-none: none;
|
|
--shadow-soft: 0 8px 24px rgba(9, 12, 34, .28);
|
|
--lift-1: translateY(-1px); /* @kind other */ /* buttons */
|
|
--lift-3: translateY(-3px); /* @kind other */ /* cards */
|
|
|
|
/* ---- Glass (sticky header) ---- */
|
|
--glass-sky: rgba(14, 18, 48, .82);
|
|
--glass-blur: 10px;
|
|
|
|
/* ---- Motion ---- */
|
|
--ease: ease; /* @kind other */
|
|
--dur-fast: .15s; /* @kind other */ /* hover / press transitions */
|
|
--dur-mid: .25s; /* @kind other */ /* mobile nav reveal */
|
|
}
|