/* The design vocabulary: colour, space, shape, depth, glass, motion, type, focus. No selectors but `:root` and the preferences. These are Alda Apps' tokens ("Canopy", AldaApps 02-design-language/tokens.css, with 04-colors/colors.css for the colours), under the same `--alda-*` names, so Feedscape reads as one of the family and a change there is easy to bring here. Copied rather than imported: the site is uploaded on its own and loads only its own files. What Feedscape chooses within them: - Pure greys round the photo (04-colors' grey ramp, the family's "neutral ground"): a photo is judged on grey, and any tint round it shifts how its colours look. No colour wash behind anything. - Its own accent, Feedscape blue (04-colors' `--alda-app-feedscape`), the logo's, for focus, links, what is picked, the switch that is on, and the one main button. The other apps fill that button with the text colour; Feedscape takes its logo's blue (the owner's choice, 10 November 2026). - The stage, where the photo is shown, on a card like the details panel (white, or #1c1c1c in the dark), as 02-design-language allows a photo app's canvas (the owner's choice, 11 November 2026). Each colour states both schemes once with `light-dark()`. `color-scheme` picks one: the system's, or the one chosen with the theme switch (theme.js sets `data-theme` on ). */ :root { color-scheme: light dark; /* ---------------------------------------------------------------------------------------------------- colour */ /* The grey ramp (04-colors), step 1 the far end from the text, step 12 the text. */ --alda-grey-1: light-dark(#fcfcfc, #0f0f0f); --alda-grey-2: light-dark(#f4f4f4, #171717); --alda-grey-3: light-dark(#ededed, #1f1f1f); --alda-grey-4: light-dark(#e4e4e4, #262626); --alda-grey-6: light-dark(#d1d1d1, #383838); --alda-grey-11: light-dark(#606060, #aeaeae); --alda-grey-12: light-dark(#1c1c1c, #f0f0f0); /* The page, light grey or near-black, and the plates on it (the details panel, the text pages, dialogs). Light: grey-3, a step below near-white, so the glass bars read lighter than the page and the white plates stand out (at grey-2 the bars were hard to tell from what was behind them). */ --alda-surface: light-dark(#ededed, #0f0f0f); --alda-card: light-dark(#ffffff, #1c1c1c); --alda-ink: var(--alda-grey-12); /* 4.5:1 or more on the page, a card and the glass. */ --alda-ink-dim: var(--alda-grey-11); --alda-border: light-dark(rgb(28 28 28 / 13%), rgb(255 255 255 / 11%)); /* 3:1, for the edge of a control that must be seen. */ --alda-border-strong: light-dark(rgb(28 28 28 / 50%), rgb(255 255 255 / 40%)); /* Feedscape blue: 4.5:1 on the page in light; the dark scheme's half is pale and takes dark ink on it. */ --alda-accent: light-dark(#2f56c9, #8ea8ff); --alda-accent-ink: light-dark(#ffffff, #0c1430); /* Status, text-strength in both schemes. */ --alda-good: light-dark(#28713d, #83d494); --alda-warn: light-dark(#7c5e0d, #d9c47a); --alda-bad: light-dark(#aa3f23, #ee9776); /* The BETA sticker: Clearwing's muted red, calmer than the error red; white on it is 5.2:1. */ --alda-beta: #b14e49; --alda-shadow: light-dark(rgb(28 28 28 / 12%), rgb(0 0 0 / 45%)); /* Behind a dialog: black at about 43 % in light, 60 % in dark. */ --alda-scrim: light-dark(rgb(0 0 0 / 43%), rgb(0 0 0 / 60%)); /* Glass tints, in the theme's grey. `glass` is the desktop apps' own (glass.rs: #f7f7f7 at 40 %, #1c1c1c at 48 %), thin, and enough for text over the page, a card or the canvas grey. `panel` is dense enough for 4.5:1 text over pure white or black: where a photo passes under a pane, glass.js thickens the tint towards it. */ --alda-glass: light-dark(rgb(247 247 247 / 40%), rgb(28 28 28 / 48%)); --alda-panel: light-dark(rgb(244 244 244 / 80%), rgb(31 31 31 / 80%)); --alda-glass-edge: light-dark(rgb(255 255 255 / 75%), rgb(255 255 255 / 16%)); --alda-glass-sheen-colour: light-dark(rgb(255 255 255 / 75%), rgb(255 255 255 / 14%)); /* ----------------------------------------------------------------------------------------------------- space A 4 px step. `inset` is the one distance glass keeps: content sits this far inside a pane, and a pane floats this far from the edges of what it floats over. */ --alda-space-1: 0.25rem; --alda-space-2: 0.5rem; --alda-space-3: 0.75rem; --alda-space-4: 1rem; --alda-space-5: 1.5rem; --alda-space-6: 2rem; --alda-space-7: 3rem; --alda-inset: var(--alda-space-3); /* Control heights: inside a bar or a row, the default, and the main action (and touch). */ --alda-control-sm: 1.875rem; --alda-control: 2.25rem; --alda-control-lg: 2.75rem; /* ----------------------------------------------------------------------------------------------------- shape Concentric: a shape a gap inside another takes its radius less the gap, so a pane is a card's radius plus the inset. Things you press are capsules; fields and tiles are rounded rectangles; photos are square. */ --alda-radius-xs: 0.375rem; --alda-radius-sm: 0.5rem; --alda-radius-md: 0.75rem; --alda-radius-lg: calc(var(--alda-radius-md) + var(--alda-inset)); --alda-radius-dialog: 1rem; --alda-radius-xl: 2rem; --alda-radius-pill: 999px; /* ------------------------------------------------------------------------------------------------- elevation Fixed: nothing gains a shadow on hover. Each height a tight contact shadow plus wider, paler ones, with no dark rim. 1: controls that stand on a surface (the main button, a segment's thumb, a switch's knob). 2: glass floating over the page or the photo: mostly below, and a little above, which marks its top edge where it meets what it floats over (the phone's action bar, along the screen's foot, needs that most). 3: what floats over everything (dialogs, toasts, notices). */ --alda-elevation-1: 0 1px 2px color-mix(in srgb, var(--alda-shadow) 90%, transparent), 0 2px 6px -2px var(--alda-shadow); --alda-elevation-2: 0 -1px 4px -1px var(--alda-shadow), 0 1px 2px -1px var(--alda-shadow), 0 4px 10px -3px var(--alda-shadow), 0 6px 12px -6px var(--alda-shadow); /* reaching 4 px above, 12 px below */ --alda-elevation-3: 0 2px 4px -2px var(--alda-shadow), 0 12px 28px -10px var(--alda-shadow), 0 36px 72px -28px var(--alda-shadow); /* ----------------------------------------------------------------------------------------------------- glass The family's recipe (Clearwing's glass.rs in CSS), bottom to top: what lies behind, blurred 20 px and made 1.35 times as colourful; the tint; a sheen from the top fading out over 220 px; a fine grain; a 1 px edge lit from above (full on top, 15 % on the sides, 50 % at the bottom); elevation 2. Only for what floats: the top bar, the view capsule over the photo, the phone's action bar, the toast. */ --alda-glass-filter: blur(20px) saturate(1.35); --alda-scrim-filter: blur(16px) saturate(1.1); --alda-glass-tint: var(--alda-glass); --alda-glass-dense: var(--alda-panel); --alda-grain: 0.035; /* The grain's tile, a file of its own: the pages' CSP loads no data: images. */ --alda-grain-image: url("grain.svg"); /* The sheen starts at 16.5 % white in light and 7 % in dark, as glass.rs, and fades as (1 − t)² in five steps. */ --alda-sheen-top: light-dark( color-mix(in srgb, var(--alda-glass-sheen-colour) 22%, transparent), color-mix(in srgb, var(--alda-glass-sheen-colour) 50%, transparent) ); --alda-sheen: linear-gradient( 180deg, var(--alda-sheen-top) 0, color-mix(in srgb, var(--alda-sheen-top) 64%, transparent) 44px, color-mix(in srgb, var(--alda-sheen-top) 36%, transparent) 88px, color-mix(in srgb, var(--alda-sheen-top) 16%, transparent) 132px, color-mix(in srgb, var(--alda-sheen-top) 4%, transparent) 176px, transparent 220px ); /* The edge's three strengths, facing up, sideways and down. In dark the rim is lifted towards the ink, so the top edge still catches the light. */ --alda-edge: light-dark(var(--alda-glass-edge), color-mix(in srgb, var(--alda-glass-edge) 75%, var(--alda-ink))); --alda-edge-up: var(--alda-edge); --alda-edge-side: color-mix(in srgb, var(--alda-edge) 15%, transparent); --alda-edge-down: color-mix(in srgb, var(--alda-edge) 50%, transparent); /* -------------------------------------------------------------------------------------------- fills and films What sits on glass or a card is never glass: plain fills, no blur, edge or grain. - track: the resting fill of a control (a button, a segmented control, a chip); - hover and press: a film of ink over whatever is there, one step and two; - track-strong: a switch that is off; - raised: what stands up out of a track (a segment's thumb): the card colour in light, a step lighter in dark; - rail: the thin outline of a picked thing, about 3:1; - divider: a hairline between groups. */ --alda-track: color-mix(in srgb, var(--alda-ink) 8%, transparent); --alda-fill-hover: color-mix(in srgb, var(--alda-ink) 7%, transparent); --alda-fill-press: color-mix(in srgb, var(--alda-ink) 12%, transparent); --alda-track-strong: color-mix(in srgb, var(--alda-ink) 24%, transparent); --alda-raised: light-dark(var(--alda-card), color-mix(in srgb, var(--alda-ink) 22%, var(--alda-card))); --alda-rail: color-mix(in srgb, var(--alda-ink) 32%, transparent); --alda-divider: color-mix(in srgb, var(--alda-ink-dim) 28%, transparent); /* The accent's other shapes: a tint behind something picked, and its edge. */ --alda-accent-soft: color-mix(in srgb, var(--alda-accent) 14%, transparent); --alda-accent-soft-hover: color-mix(in srgb, var(--alda-accent) 20%, transparent); --alda-accent-edge: color-mix(in srgb, var(--alda-accent) 45%, transparent); /* ---------------------------------------------------------------------------------------------------- motion Calm: short, decelerating, nothing that bounces. Hover answers at once; a state change takes 150 ms; a panel or a dialog about a fifth of a second; something new appearing 300 ms, rising a little as it fades in. */ --alda-motion-fast: 90ms; --alda-motion: 150ms; --alda-motion-slow: 220ms; --alda-motion-enter: 300ms; --alda-rise: 0.5rem; --alda-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* ------------------------------------------------------------------------------------------------------ type The system's own face for everything in the app; Sora (self-hosted, SIL OFL) for the brand only: the wordmark and page headings. */ --alda-font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif; --alda-font-brand: 'Sora', var(--alda-font-ui); --alda-text-2xs: 0.6875rem; /* 11: section labels, the BETA sticker */ --alda-text-xs: 0.75rem; /* 12: captions, words under a control, badges */ --alda-text-sm: 0.8125rem; /* 13: labels, controls, bar items */ --alda-text-md: 0.9375rem; /* 15: body, the main action */ --alda-text-lg: 1.0625rem; /* 17: lead text */ --alda-text-xl: 1.25rem; /* 20: panel and dialog titles */ --alda-display-sm: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* page titles */ --alda-display-md: clamp(1.875rem, 1.2rem + 2.8vw, 3rem); /* the picker's heading */ --alda-leading-display: 1.08; --alda-leading-tight: 1.2; --alda-leading: 1.5; --alda-tracking-display: -0.03em; --alda-tracking-title: -0.012em; --alda-tracking-caps: 0.07em; /* ----------------------------------------------------------------------------------------------------- focus Every focusable thing draws the same ring: 2 px in the accent, 2 px out, with a soft halo on the app's controls. */ --alda-focus-width: 2px; --alda-focus-offset: 2px; --alda-focus-halo: 0 0 0 6px color-mix(in srgb, var(--alda-accent) 22%, transparent); /* ----------------------------------------------------------------------------------------------------- depth */ --alda-z-bar: 20; --alda-z-overlay: 40; --alda-z-toast: 60; } /* The theme the switch chose; without one (or without scripts) the system's. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* ------------------------------------------------------------------------------------------------- preferences */ /* Reduced motion: nothing slides or rises; fades stay, quickly. */ @media (prefers-reduced-motion: reduce) { :root { --alda-motion-slow: var(--alda-motion); --alda-motion-enter: var(--alda-motion); --alda-rise: 0px; } } /* Reduced transparency: glass becomes a plate in the card colour, with no blur or grain. The edge, the sheen and the shadow stay, so it is still a pane. */ @media (prefers-reduced-transparency: reduce) { :root { --alda-glass-tint: var(--alda-card); --alda-glass-dense: var(--alda-card); --alda-glass-filter: none; --alda-scrim-filter: none; --alda-grain: 0; } } /* More contrast: plates instead of glass, a visible border instead of the lit edge, weak text halfway to the text, firmer tracks and hairlines. */ @media (prefers-contrast: more) { :root { --alda-glass-tint: var(--alda-card); --alda-glass-dense: var(--alda-card); --alda-glass-filter: none; --alda-grain: 0; --alda-edge-up: var(--alda-border-strong); --alda-edge-side: var(--alda-border-strong); --alda-edge-down: var(--alda-border-strong); --alda-ink-dim: color-mix(in srgb, var(--alda-grey-11) 50%, var(--alda-grey-12)); --alda-border: var(--alda-border-strong); --alda-track: color-mix(in srgb, var(--alda-ink) 16%, transparent); --alda-track-strong: color-mix(in srgb, var(--alda-ink) 40%, transparent); --alda-rail: var(--alda-border-strong); --alda-divider: var(--alda-border-strong); } }