/* LUMA - colours, fonts, spacing and the animation timings Sheet 1 of 9. Source order decides the cascade - see the link tags in luma.html. */ /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* Backgrounds */ --bg: #0A0A0C; --surface: #141418; --surface-2: #1C1C22; --surface-3: #242430; /* 2026-09-15 — the flat day-screen skin. The Layer 9 card gradient is gone and these are what replaced it. Green-black rather than the neutral --surface above, which is why they are their own tokens and not a tweak to those: --surface still paints every card on the other four tabs. */ --surface-flat: #1A1F1A; /* card ground */ --surface-inset: #141914; /* tiles and sub-buttons INSIDE a flat card */ --text-bright: #E8F0E8; /* the one oversized figure per card */ /* The plank badge is the only well tinted to its own section rather than to --surface-inset — it holds the purple glyph and needs a ground to sit on. */ --plank-badge: #1E1530; --plank-badge-line: #2A1F45; /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-2: rgba(255,255,255,0.12); /* The two day-tab header buttons and the cat tile beside them. One-off surfaces that are deliberately warmer than --surface-2, from the mockup. */ --hdr-btn: #252B25; --hdr-cat: #1C1815; /* Accent — Lime (primary, used sparingly) */ --lime: #C9F53B; --lime-dim: rgba(201, 245, 59, 0.12); --lime-glow: rgba(201, 245, 59, 0.25); /* The mid layer of the splash button's halo. --lime-glow is the contact ring, --lime-dim the outer spread. */ --lime-glow-2: rgba(201, 245, 59, 0.30); /* The single glow pulse the launch button plays once at the end of the opening sequence. Giorgi's brief asked for #c8f135 at 40% — that is this app's own --lime to within a shade, so it uses the palette rather than a second green. */ --lime-pulse: rgba(201, 245, 59, 0.40); /* Accent — Teal (progress bars, secondary) */ --teal: #00DDB3; --teal-dim: rgba(0, 221, 179, 0.12); /* Contextual — Amber (coaching, real life moments) */ --amber: #E8863A; --amber-dim: rgba(232, 134, 58, 0.15); /* The streak flame's two ends. --amber is its middle, so the mark stays inside the app's warm accent rather than introducing a fourth colour: a deeper ember at the base and a hot tip. Used by .streak-fire only. */ --fire-base: #F2541B; --fire-tip: #FFD15C; /* Supplements — the glow cards (2026-09-16). Giorgi's hexes. The three glows are RGB TRIPLETS, not hexes, and that is not a style choice: each one is needed at three different opacities (0.25 and 0.10 in the gradient, 0.35 in the shadow), and `rgba(var(--x), .25)` is the only form that gets there without color-mix(). A hex in a var cannot be given an alpha. --sup-card-bg is a flat colour and stays a hex. */ --sup-card-bg: #111318; --sup-glow-protein: 255, 107, 43; /* #FF6B2B */ --sup-glow-vitd: 255, 210, 63; /* #FFD23F */ --sup-glow-multi: 139, 92, 246; /* #8B5CF6 */ /* The segmental body figure on the InBody analysis (2026-09-18, rebuilt as a real silhouette the same day). Each view is a PAIR: the colour a segment holding nothing lands on, and the colour the heaviest segment reaches. The figure interpolates between them with two stacked layers — the low colour painted once underneath, the high colour over it at `fill-opacity: var(--f)` — which is literal interpolation with no color-mix(), the function the supplement glows above already avoid. The --rgb triplets are the same high colour again, as a triplet, because the glow needs it at a COMPUTED alpha and a hex in a custom property cannot be given one. Giorgi's brief named #c8f135 and #e2564a. Both are this palette's own --lime and --red to within a shade, so they map onto it rather than introducing a second green and a second red — the call the splash button's glow already made for the identical hex. */ /* 2026-09-24 — the anatomical figure: muscle is the mockup's MINT (dark mint under bright mint), fat is its THERMAL heat-map. The fat pair is only the fallback now; the real fat fill is the two radial gradients the figure carries in its own (--ib-warm / --ib-hot). --seg-fat-ink is the colour the limb pills print fat in, since a gradient cannot colour text. */ --seg-lean-lo: #2c5f50; --seg-lean-hi: #3fae8c; --seg-lean-rgb: 63, 174, 140; --seg-fat-lo: #e8a33a; --seg-fat-hi: #e8742a; --seg-fat-rgb: 232, 116, 42; --seg-fat-ink: #F0873A; /* The muscle <-> fat morph. Giorgi's 400ms; rule 5 says it lives here. */ --ib-seg-morph: 400ms; /* Contextual — Red (InBody day, warnings) */ --red: #E05555; --red-dim: rgba(224, 85, 85, 0.12); /* Text */ --text-1: #F2F2F5; --text-2: #A0A0B0; --text-3: #52525E; /* Layer 9 — per-section accents. Each day-tab card carries data-accent="key" and ONE CSS rule maps it to --accent / --accent-dim, so the widget treatment cannot drift the way per-card colours would. */ --c-score: #C9F53B; --c-score-dim: rgba(201, 245, 59, 0.14); --c-cal: #FF7A45; --c-cal-dim: rgba(255, 122, 69, 0.14); --c-water: #3BC8F5; --c-water-dim: rgba(59, 200, 245, 0.14); --c-walk: #4ADE80; --c-walk-dim: rgba(74, 222, 128, 0.14); --c-work: #FF4D6D; --c-work-dim: rgba(255, 77, 109, 0.14); --c-plank: #A78BFA; --c-plank-dim: rgba(167, 139, 250, 0.14); --c-sleep: #6C8CFF; --c-sleep-dim: rgba(108, 140, 255, 0.14); --c-weight: #C9F53B; --c-weight-dim: rgba(201, 245, 59, 0.14); /* 2026-09-21 — protein's own colour. It used to borrow --c-work (#FF4D6D) from the movement card, which was invisible while the two lived in separate cards and reads as a mistake the moment they are two rows of one list. A rose rather than another warm: the eight day rows now run lime / indigo / cyan / orange / rose / green / red / violet, and orange-red-rose in sequence would have collapsed into one smear. */ --c-protein: #E8619B; --c-protein-dim: rgba(232, 97, 155, 0.14); /* 2026-09-15 — the five score sections got their own palette when the hero went segmented. ONE source for the arc segments, the row badges and the row bars, so a colour can never say one thing on the ring and another on a bar. Deliberately NOT the --c-* card accents above: those tint whole cards, and two of them (weight = lime, plank = purple) would have collided here. */ --sc-nutrition: #D4F244; --sc-nutrition-dim: rgba(212, 242, 68, 0.14); --sc-movement: #4ECDC4; --sc-movement-dim: rgba(78, 205, 196, 0.14); --sc-recovery: #A78BFA; --sc-recovery-dim: rgba(167, 139, 250, 0.14); --sc-weighin: #F97316; --sc-weighin-dim: rgba(249, 115, 22, 0.14); --sc-plank: #F43F5E; --sc-plank-dim: rgba(244, 63, 94, 0.14); --c-coach: #00DDB3; --c-coach-dim: rgba(0, 221, 179, 0.14); /* 2026-09-23 — the mood slider's three stops, left to right. The face, the glow and the thumb ring are BLENDED between these in JS (it reads them from here), so these three hexes are the whole palette — change one and every part follows. */ --mood-low: #FF5A4E; --mood-mid: #FFC53D; --mood-high: #5EE07A; --mood-none: #7A7A88; /* the Health character before she has set today (2026-09-24) */ --mood-blink: 4200ms; /* the face's idle blink loop */ --mood-float: 3400ms; /* the face's idle bob */ --mood-nudge: 1800ms; /* the untouched thumb saying "drag me" */ /* 2026-09-24 — the sleep sky (js/05-photos-score.js, sleepSkyColours()). Four stops, each a top and a bottom colour, BLENDED in JS as the hours move: a short night is a sunset, 8h+ is full night. Change a hex here and the sky follows. */ --sky-set-1: #EC6F86; --sky-set-2: #F2A06C; --sky-dusk-1: #B45E86; --sky-dusk-2: #D98A78; --sky-twi-1: #4B2186; --sky-twi-2: #93508F; --sky-night-1: #1B0C4A; --sky-night-2: #3F2F9E; --sky-twinkle: 2400ms; /* the stars */ --sky-glow: 5200ms; /* the moon's slow breathing glow */ /* The daily practice on Health (2026-09-24, js/16-health-daily.js). Headspace- bright scenes INSIDE the dark app — each kind of practice owns one ground. --hd-ink is the dark ink those scenes are written in, never pure black. */ --hd-sun: #FFB81C; --hd-sun-2: #FFD23C; --hd-yolk: #FFC93C; --hd-tang: #FF6B1A; --hd-hill: #1662F0; --hd-sky: #5DA9FF; --hd-berry: #E5484D; --hd-leaf: #15A55A; --hd-mint: #7BE0A6; --hd-night: #241257; --hd-lav: #B79CFF; --hd-coral: #FF7A6E; --hd-ink: #2B2233; --dur-hd-idle: 4000ms; /* the character on the card breathing */ --dur-hd-sway: 4800ms; /* the tip's leaf */ --dur-hd-drift: 16s; /* the player's slowest wave; the others are fractions */ --dur-hd-bop: 520ms; /* the doing-day character's bounce */ --dur-hd-hold: 800ms; /* hold-to-finish */ --dur-hd-release: 1400ms; /* hold-to-let-go */ --dur-hd-float: 1600ms; /* the released thought leaving */ --dur-hd-count: 1000ms; /* one beat of the 3 · 2 · 1 before a breathing practice */ /* The Plank glyph — Giorgi's own 64x64 PNG (2026-09-07), inlined so CLAUDE.md rule 2 still holds and sw.js gains no asset to cache. It is used as an ALPHA MASK, never as an : .png-icon paints it with background-color, so every place that coloured the old stroke drawing through `stroke` still recolours it — accent purple in the card header, grey in the row, lime when done. */ --plank-png: url("data:image/png;base64,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"); /* Orb colors for animated background */ --orb-1: #C9F53B; --orb-2: #00DDB3; --orb-3: #7C3AED; /* Typography */ --font-num: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-ka: 'Noto Sans Georgian', -apple-system, sans-serif; /* The editorial serif, and the ONE place it is allowed: the splash headline. CLAUDE.md's typography rule says never to use Noto Serif Georgian because it is Putki's face — this is Giorgi's explicit call for the photo splash and it has exactly one consumer (.splash-line). Do not reach for it anywhere else; every other Georgian label stays on --font-ka. */ --font-ka-serif: 'Noto Serif Georgian', Georgia, serif; /* Spacing */ --pad: 20px; --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --radius-pill: 999px; /* Motion */ /* The InBody cycle's quiet colour — far from the test, present but asking for nothing. A muted version of --teal rather than a grey, so the row still belongs to the palette. Lifted from a darker first draft on Giorgi's call: it had all but vanished against the card. Named because the timeline's head dot reads it from JS as well as the row reading it from CSS. */ --ib-sleeping: #4E8C7A; /* The InBody row's "charging" breath, the week before the test. Long and slow on purpose — it has to read as alive without competing with the score ring for attention. Rule 5: it lives here, not inline on the animation. */ --ib-pulse: 2600ms; --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-mid: 280ms; --dur-slow: 500ms; /* 2026-09-23 — the CargoX-style side entry: a headline arrives from off the left or right edge rather than rising a few pixels. Long, because --ease-out spends most of the travel in the first third and the rest is the soft landing. The distance is fixed px, not %, so a short word and a long one arrive at the same speed. Every host clips overflow (splash shell, streak shell, finish). */ --dur-slide: 850ms; --slide-dist: 320px; --slide-stagger: 130ms; /* The streak page rising from the bottom edge. js/05 reads this one number to know when the page has landed, so the CSS and the count-up cannot disagree. */ --dur-rise: 620ms; --dur-drop: 380ms; /* 2026-09-24 — a full page (weight history, InBody analysis, profile…) slides in from the right and back out to the right, like an iPhone push. pageOut() in js/06-progress.js reads --dur-page-out to know when to remove the node. */ --dur-page: 420ms; --dur-page-out: 300ms; /* The accent triplets the solid buttons tint themselves with. */ --lime-rgb: 201, 245, 59; --teal-rgb: 0, 221, 179; /* The arcs grow and the glowing head travels on this one number, so they land together. It was a bare 900ms on .sc-seg-fill until the head needed to match. */ --dur-ring-fill: 900ms; /* 2026-09-24 — the score bubble. The flash on a finished row lasts the row reward's own 900ms; the colour cloud behind the bubble turns once in 24s, slow enough to read as drift and never as a spinner. The three triplets are the bubble's prism (orange, blue, violet), needed at several alphas. */ --dur-orb-pulse: 900ms; --dur-hero-glow: 24s; --hg-orange: 255, 154, 60; --hg-blue: 60, 123, 255; --hg-violet: 155, 92, 255; /* ---- The splash opening timeline ------------------------------------ One sequence, read top to bottom, every step starting from t=0 at the moment #splash gains `ready` (which is when the orb has drawn its first frame — see startSplashWhenOrbReady()). Rule 5: these exist so the whole opening can be retimed here rather than hunted through the block below. 0 -> 1100 the orb swells up out of the dark (2026-09-23, was the photo) 600 -> 850 the LUMA wordmark drops 8px into place 800 -> 1050 headline line 1 (S.splashLine1) 950 -> 1200 headline line 2 (S.splashLine2, 150ms behind line 1) 1100 -> 1350 the tagline, fade only 1300 -> 1600 the button springs up from 0.88 1600 -> 2000 the button pulses its glow once, then settles The stagger between the two headline lines is the difference between --sp-in-line1 and --sp-in-line2; keep it at 150ms if either moves. */ --sp-dur-orb: 1100ms; --sp-in-orb: 0ms; --sp-dur-breathe: 5600ms; /* the no-WebGL orb's breath; the shader keeps its own */ --sp-dur-step: 250ms; /* wordmark, both headline lines, tagline */ --sp-dur-btn: 300ms; --sp-dur-pulse: 400ms; --sp-in-mark: 600ms; --sp-in-line1: 800ms; --sp-in-line2: 950ms; --sp-in-tag: 1100ms; /* The squiggle draws ACROSS the tagline and the button rather than delaying them — it is an underline, and an underline that finishes before the line it belongs to has arrived reads as a stray mark. The opening is the same length it was. */ --sp-dur-squig: 520ms; --sp-in-squig: 1080ms; --sp-in-btn: 1300ms; --sp-in-pulse: 1600ms; /* ---- The way out: the orb flares and fills the screen (2026-09-23) ---- Measured from the tap. js/12-init.js reads all five, so retime them HERE. 0 -> 280 the text fades away 0 -> 520 the orb flares lime-white (the shader's uIgnite, 0 -> 1) 120 -> 820 it swells until it covers the whole column 560 -> 1080 the splash fades, and the day screen is underneath it */ --sp-dur-ignite: 520ms; --sp-in-grow: 120ms; --sp-dur-grow: 700ms; --sp-in-out: 560ms; --sp-dur-out: 520ms; }