/* * Koræi — visual system. * * Ported from the reference mockup (index.html): the same shapes, spacing, glow * and typography, with the palette narrowed to black and neon pink. Cyan * survives only where a second colour genuinely carries meaning, so nothing * competes with the accent. * * Everything is self-hosted, fonts included, which is what lets the * Content-Security-Policy stay at default-src 'self' with no exceptions - and * keeps visitors' IP addresses away from a font CDN (spec §5.2, §7.5). */ /* * The `hidden` attribute has to actually hide. * * The browser hides it with `[hidden] { display: none }` from its own stylesheet, and * ANY author rule that sets `display` beats that - so `.btn { display: inline-flex }` * quietly made every hidden button visible again. That is not theoretical: the tracker * shipped with "Salva nota" still on screen after script had hidden it, and a "Salvata" * confirmation that was never hidden in the first place, so it sat there permanently * and told the athlete nothing. One rule, and every `hidden` in the application means * what it says. * * !important is the point rather than a shortcut: the attribute must outrank whatever * class the element happens to carry, which is exactly what the browser intended and * failed to achieve on its own. */ [hidden] { display: none !important; } /* ---------- self-hosted fonts ---------- */ @font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } /* Colour tokens. Every colour in this stylesheet comes from here, which is the whole reason a light theme is a dozen overrides rather than a rewrite. :root is the dark theme; [data-theme="light"] on swaps the surfaces and the text. Two independent axes, and keeping them independent is what makes four accents cost eight small blocks instead of eight stylesheets: data-theme = dark | light -> surfaces, text, shadows data-accent = pink | green | orange | tiffany -> the accent tokens only The accent tokens used to be called --pink, which stopped being true the day the athlete could choose Tiffany. They are --accent* now: same values, honest name, and every rule in this file already went through them. The light theme exists for a real situation, not for taste: outdoors in sunlight a black screen is close to unreadable, and an athlete checking their session mid-ride is exactly the person who will be outdoors. */ :root { color-scheme: dark; /* NOTHING UNDER 12px. There were thirty-odd declarations between 9px and 11.5px in here - the eyebrows, the units, the tile captions, the meta under a meal - and on a phone in daylight they were the small print of an application whose whole job is to be read at a glance, one-handed, often outdoors. Davide asked for a floor and 12px is it. Where something needed to look smaller than what it labels, it is the weight and the colour that carry that now, not the size. */ /* Tiffany, fixed. Every other colour here follows the accent the athlete chose; this one marks things that are not about them and not controls - where a workout came from, and the training icons. A constant colour is what makes those findable without reading them. */ --tiffany: #2ee6df; --tiffany-line: rgba(46, 230, 223, .45); --bg: #08080b; /* Four steps of grey, and the two quiet ones were too quiet. Measured against #08080b: --mut was 6.2 : 1 and --mut2 only 3.2 : 1, which is under the 4.5 : 1 that body text needs - and those two carry the hints, the units and the tile captions, the small print that explains what every number on the dashboard means. On a phone in daylight it read as dark grey on black. Lifted to 8.8 : 1 and 6.2 : 1, and deliberately still grey: --ink is the white one, and if every step were white there would be no hierarchy left to read. Each remains distinctly quieter than the one above it. */ --ink: #f2f3f7; --ink-2: #dcdfe7; --mut: #a8acba; --mut2: #8b8f9c; --line: rgba(255, 255, 255, .09); --line-soft: rgba(255, 255, 255, .06); /* Card face, top and bottom of its gradient. OPAQUE, and that is the whole point of these two values being written as hex rather than as the rgba(255,255,255,.045) they replace. A translucent white only looks dark because --bg is painted behind it. Every time the browser composites a card against something else, the card turns white - and the ink on it is white too, so the card empties. That is not hypothetical: it is what a full-page screenshot on iOS does to the two tallest cards on the dashboard, which get their own compositing layer and are rasterised against the blank page rather than against the body. Everything inside them goes with it, because --accent-soft, --field and --track are translucent as well and were compositing against that same white. Printing does the same thing, for the same reason. These are the exact colours the old values produced over #08080b, so nothing on screen changes. An opaque card also means the fills inside it composite against the card itself, which is what makes one translucent value work on a card, a panel and a bar alike - so those stay as they are. */ --surface: #131316; --surface-2: #0d0d10; /* Quieter fills: tiles, inputs, chips. */ --field: rgba(255, 255, 255, .03); --field-soft: rgba(255, 255, 255, .015); --track: rgba(255, 255, 255, .07); /* Bars and floating panels are opaque: content scrolls behind them. */ --bar: rgba(8, 8, 11, .97); --panel: rgba(16, 16, 22, .99); --scrim: rgba(0, 0, 0, .6); --shadow-card: 0 10px 34px rgba(0, 0, 0, .35); --shadow-panel: 0 18px 44px rgba(0, 0, 0, .6); /* THE ACCENT: ONE VALUE PER COLOUR, and it is --accent-base. Everything else on this page is derived from it, in both modes, which is why adding a fifth colour is a single line. Derived rather than hand-picked twice because two hand-written variants drift: the first time somebody tunes the dark pink and forgets the light one, the app has two different pinks and nobody notices for a month. color-mix() does the tuning, and the percentages below were chosen by measuring contrast, not by eye - see the light block. */ --accent-base: #ff1e8e; --accent: var(--accent-base); /* THE SECOND BRAND COLOUR, and the reason it exists: the official logo is a gradient, not a colour. The ring runs from the accent at its foot to a cooler cousin at its head, and "æi" carries the same run. One value per palette, exactly like --accent-base, so a new accent is two lines rather than a hunt through the stylesheet. Every pairing is the accent's own neighbour on the wheel rather than a fixed blue: a cold blue beside orange is two brands arguing. Pink gets the light blue of the logo as drawn, which is where this started. */ --accent-2: #4cc9f0; --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent); --accent-line: color-mix(in srgb, var(--accent) 50%, transparent); /* Near-black ink on a filled accent button. Measured against all four bases: dark ink scores 5.7 to 15.5, white ink 1.3 to 3.6 - so one value serves every colour on dark surfaces. */ --on-accent: #0a0006; /* Accent-coloured text on the page background, lifted towards white so it stays legible at 13px. */ --accent-ink: color-mix(in srgb, var(--accent) 55%, white); /* Accent-coloured text, as its own token so it can be darkened without touching the colour itself. Identical to the accent today, in both modes: the athlete asked for one colour that does not change, and this is the seam to pull if a neon on white turns out to be too pale to read. */ --accent-text: var(--accent); /* Fluorescent means the colour bleeds past its own edge: a tight core and a wide wash. GRAPHICS ONLY. These went on headings, values and the brand word as a text-shadow, and a glow on a glyph eats the very edge that makes it a letter - at 13px a number stops being crisp and starts being a smudge in the accent colour. Rings, bars, the gauge and the microphone keep it; nothing with text in it does. */ --glow-accent: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 35%, transparent); --glow-accent-strong: 0 0 14px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 44px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 110px color-mix(in srgb, var(--accent) 20%, transparent); /* The quiet one. It used to light every button; it now lights one floating control, the chat's jump-to-latest, where the shadow is separating a round button from the conversation scrolling under it rather than advertising anything. A single tight layer, no wide wash - a page of these beside the strong glow's 110px halo is a smear in the accent colour, which is what it became. */ --glow-accent-soft: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent); --danger: #ff5c5c; --danger-ink: #ffb3b3; --ok: #7ee787; /* Il gradino di mezzo fra --ok e --danger: "ne resta, ma non tanto". Dichiarato qui accanto agli altri due perche' un colore semantico che vive in un solo punto del foglio e' un colore che il prossimo reinventa leggermente diverso. */ --warn: #f0b429; --r: 22px; --r-sm: 16px; --bar-h: 70px; /* I due caratteri, con un nome ciascuno. --sans veniva gia' usato da una regola ed era una variabile che non esisteva: una var() senza valore rende la dichiarazione invalida e la proprieta' torna a ereditare, quindi il carattere giusto arrivava per caso, perche' body e' Manrope. Definito qui, e la pila completa e' scritta una volta sola invece che in quattro punti del foglio. */ --sans: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif; --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; } /* Light theme. Not an inversion. Neon pink on white at full strength is unpleasant and fails contrast on small text, so the accent is darkened for text while the fills stay the brand pink, and the glows are cut right back - a glow on a white background reads as a printing error. */ /* Il secondo selettore e' la vetrina, che un attributo data-theme non ce l'ha e non puo' averlo: li' non c'e' un profilo su cui scrivere la preferenza, quindi il comando e' una casella di spunta e :has() la legge da :root - lo stesso meccanismo con cui la stessa pagina sceglie l'accento. Scritto prima e non dopo di proposito: AccentTest cerca la stringa `:root[data-theme="light"] {` per leggere questo blocco e controllare che il chiaro non ridipinga l'accento. Messo in coda al gruppo, quel testo resta dov'era. */ :root:has(.lp-theme-light:checked), :root[data-theme="light"] { color-scheme: light; --bg: #f6f6f8; --ink: #16161c; --ink-2: #35353f; /* THE TWO QUIET GREYS, MEASURED AGAINST THE DARKEST THING THEY LAND ON. --mut2 was #83879a: 3.30 : 1 on this background, under the 4.5 : 1 body text needs, and it carries the small print - the units, the hints, the tile captions. The same defect was found and fixed in the dark palette by reading the dashboard outdoors; here nobody had measured, and the light theme shipped with it. Then measured again on the painted page rather than against the page colour, which is what found the rest of it. Neither grey sits only on white: they land on the tile fill (#eeeef0 composited), the metric fill (#e2e2e4) and the setup banner (#d9d8da), and on that last one --mut itself was 4.40 : 1 and --mut2 3.56. So both are set against the worst ground and not the best. --mut is 4.91 : 1 on the banner and 6.46 on the page; --mut2 is 4.61 and 6.07. Still two distinct steps, still both quieter than --ink-2 above them: the hierarchy is what these four levels are for. */ --mut: #555967; --mut2: #595d6c; --line: rgba(16, 16, 28, .14); --line-soft: rgba(16, 16, 28, .09); --surface: #ffffff; --surface-2: #ffffff; --field: rgba(16, 16, 28, .035); --field-soft: rgba(16, 16, 28, .02); --track: rgba(16, 16, 28, .10); --bar: rgba(255, 255, 255, .98); --panel: #ffffff; --scrim: rgba(16, 16, 28, .38); --shadow-card: 0 6px 20px rgba(16, 16, 28, .07); --shadow-panel: 0 18px 44px rgba(16, 16, 28, .18); /* THE ACCENT DOES NOT CHANGE BETWEEN MODES. One coded value per colour, and light mode uses the same one at the same strength, glow included - the surfaces change, the accent does not. That is the point of having two independent axes. It used to darken the accent by half here and drop the glows. The reasoning was contrast, and the numbers are worth keeping written down: neon green at full strength on #f6f6f8 measures 1.4 : 1, where body text wants 4.5 : 1. It is fine for a filled button (dark ink on a bright fill), fine for a border, fine for a ring, and hard to read as small text. So if accent-coloured *text* on the light background ever needs help, the knob is --accent-text below: it is the accent everywhere it is a colour, and the one place to darken if it has to be read at 13px. Nothing else needs touching, and no colour has to be picked twice. */ --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 55%, transparent); /* Dark ink on a bright fill: measured 5.7 to 15.5 against all four bases, where white scores 1.3 to 3.6. The same value serves both modes for the same reason. */ --on-accent: #0a0006; /* Mixed half and half, down from 70%. At 70% the green resolved to #1eb25f and measured 2.77 : 1 on white, and Tiffany 3.16 - so accent-coloured text was illegible on a light page for two of the four palettes, in the one token whose entire job is being legible. At 50% the worst of the four is the green at 4.99 : 1 and the best the pink at 10.11. */ --accent-ink: color-mix(in srgb, var(--accent) 50%, black); /* And the knob, turned. This is the value links and other accent-coloured text take; on the dark theme it is the accent itself, here it is the darkened one. The fills, borders, rings and glows keep the brand colour at full strength - only text moves, which is the whole reason this is a separate token from --accent. */ --accent-text: var(--accent-ink); --danger: #c62828; --danger-ink: #8c1d1d; --ok: #1a7f37; /* Piu' scuro del gemello notturno: su fondo chiaro un ambra brillante non si legge. */ --warn: #a35c00; } /* ---------- accents ---------- One line per colour. Nothing else: the tokens above derive the soft fills, the lines, the ink and the glows from whichever base is in force, and the light block darkens that same base by half. A fifth colour is a value here, a constant in the Accent enum and a label in the two bundles. Tiffany is the one named after a colour that already exists in the world: #0ABAB5, brightened here because the original goes muddy on black. */ :root[data-accent="green"] { --accent-base: #2bff88; --accent-2: #2ee6df; } :root[data-accent="orange"] { --accent-base: #ff7a1a; --accent-2: #ffd23f; } :root[data-accent="tiffany"] { --accent-base: #2ee6df; --accent-2: #6ea8ff; } /* Le due palette che spostano anche le superfici. Le quattro qui sopra sono un accento su un fondo solo: nero quasi puro, uguale per tutte. Queste due sono nate come palette intere - "Tactical Performance" e "Clinical Bio-Tech" - e la meta' del loro carattere sta nel fondo: il volt su nero vero e' una torcia in una stanza buia, sull'asfalto e' una striscia su una strada; e la menta chiede l'ardesia, o resta il Tiffany su nero che c'e' gia'. I due valori dell'accento restano in una regola loro, come per tutte le altre - vedi AccentTest, che pretende esattamente due codici colore per accento e non tollera che ne compaia un terzo li' dentro. Le superfici sono una seconda regola, sotto: chi aggiunge un accento continua a scriverne due, e chi vuole anche un fondo scrive un blocco in piu' invece di allargare il primo. :not([data-theme="light"]) e non una seconda regola per il chiaro. Le superfici del tema chiaro sono dichiarate piu' in alto in questo file, quindi un blocco per accento scritto qui sotto le batterebbe per ordine di sorgente e l'atleta che passa al chiaro si ritroverebbe l'asfalto. Con la negazione questi due blocchi semplicemente non si applicano al chiaro, che si tiene i suoi bianchi - e' una decisione sulla luce in cui si sta, e un fondo antracite al sole non e' piu' leggibile del bianco. Ed e' anche cio' che tiene in piedi la regola di AccentTest: nessun accento scrive una seconda tavolozza per il chiaro. I due selettori raggruppati sono le due vie per arrivare allo stesso posto: l'attributo che scrive il server per chi ha un account, e il radio spuntato sulle pagine pubbliche, che un account non ce l'hanno. Raggruppati e non ripetuti: le superfici sono cinque valori, e due copie sono due copie che prima o poi divergono - la vetrina mostrerebbe una palette che l'applicazione non ha. */ :root[data-accent="volt"] { --accent-base: #d7ff2e; --accent-2: #f2f4f7; } :root[data-accent="ice"] { --accent-base: #4fe3b0; --accent-2: #7dd3fc; } /* Asfalto: antracite opaco, non nero. Le carte salgono di un gradino invece di scendere, perche' su un fondo gia' grigio una carta piu' scura sembra un buco. */ :root:not([data-theme="light"])[data-accent="volt"], :root:not([data-theme="light"]):not(:has(.lp-theme-light:checked)):has(.accent-pick[value="volt"]:checked) { --bg: #1a1c1e; --surface: #232629; --surface-2: #1e2124; --bar: rgba(26, 28, 30, .97); --panel: rgba(35, 38, 41, .99); } /* Ardesia: lo stesso quasi-nero con dentro del blu, cosi' la menta ha da dove staccarsi. */ :root:not([data-theme="light"])[data-accent="ice"], :root:not([data-theme="light"]):not(:has(.lp-theme-light:checked)):has(.accent-pick[value="ice"]:checked) { --bg: #0a1017; --surface: #121a24; --surface-2: #0d141d; --bar: rgba(10, 16, 23, .97); --panel: rgba(18, 26, 36, .99); } /* ---------- lo stesso colore, scelto prima di avere un account ---------- Le due pagine pubbliche - la vetrina e la registrazione - non hanno un atleta da cui leggere una preferenza, quindi non possono avere data-accent addosso: quell'attributo lo scrive il server, e qui non c'e' ancora niente da scrivere. Ma il colore si deve poter provare lo stesso, ed e' anche il modo piu' onesto di mostrare che l'applicazione lo lascia scegliere: si preme un pallino e la pagina cambia sotto le dita. Un gruppo di radio con classe .accent-pick, e :has() che guarda quale e' spuntato. Le due proprieta' finiscono su :root - lo stesso elemento su cui stanno le derivazioni li' sopra - quindi cambia tutto quello che ne discende: i riempimenti, le linee, l'inchiostro, i bagliori e il gradiente del marchio. Non una riga in piu' per ogni colore. Niente per il rosa: e' quello di :root, quindi il suo radio non ha bisogno di nessuna regola. Il valore, non l'id: sulla vetrina i radio si chiamano in un modo e nella registrazione sono il campo del form, ma il valore e' l'id dell'accento in tutti e due i casi - lo stesso che il server poi convalida contro l'enum. Dove :has() non c'e', il selettore e' invalido e la regola sparisce: la pagina resta rosa e i pallini non fanno niente. E' la degradazione giusta per una decorazione, e non serve una riga di JavaScript - che su queste pagine non c'e' proprio. */ :root:has(.accent-pick[value="green"]:checked) { --accent-base: #2bff88; --accent-2: #2ee6df; } :root:has(.accent-pick[value="orange"]:checked) { --accent-base: #ff7a1a; --accent-2: #ffd23f; } :root:has(.accent-pick[value="tiffany"]:checked) { --accent-base: #2ee6df; --accent-2: #6ea8ff; } :root:has(.accent-pick[value="volt"]:checked) { --accent-base: #d7ff2e; --accent-2: #f2f4f7; } :root:has(.accent-pick[value="ice"]:checked) { --accent-base: #4fe3b0; --accent-2: #7dd3fc; } * { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100vh; } /* ---------- the room behind the page ---------- The background was honest and anonymous: one flat colour. This puts the application somewhere - a dark hall with one lamp on it, or a track at the end of the day. Drawn, not photographed. The references share a quality of light rather than any photographic detail, and light is what a vector draws well: five kilobytes against three hundred, which on a phone over 4G is the difference between a page that is there and a page that arrives. It is also ours, with nothing in this repository whose licence we would have to be able to prove. Below the accent wash and above the flat colour, so the athlete's palette still tints the page and the artwork never competes with it. position: fixed rather than background-attachment: fixed, which janks on iOS during scroll. pointer-events: none, because a decoration that can be tapped is a decoration that swallows a tap meant for a card. If it is noticeable, it is too strong: no light in either file is drawn above 9% opacity, and the text on top keeps the contrast it was measured at. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("/img/arena-dark.svg") center / cover no-repeat; opacity: .85; } :root:has(.lp-theme-light:checked) body::after, :root[data-theme="light"] body::after { background-image: url("/img/arena-light.svg"); opacity: 1; } /* And the athlete's own answer to "how much of this do you want". Faint is a judgement made on one screen. On a bright phone outdoors the shapes can read as smudges, and somebody who finds any texture behind text tiring should not have to live with it - so the selector in the top bar offers three steps and this is where they land. "off" removes the element rather than making it transparent: nothing to composite, nothing to paint, no reason to keep it. */ :root[data-background="soft"] body::after { opacity: .4; } :root[data-theme="light"][data-background="soft"] body::after { opacity: .5; } :root[data-background="off"] body::after { display: none; } /* The ambient glow behind everything, straight from the mockup. */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* Both accent washes derive from the accent. The top-right one was a literal pink, so on any other colour the page kept a pink corner - the same defect as the volume bars, in the one place that covers the whole screen. */ radial-gradient(620px 420px at 88% -4%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%), radial-gradient(520px 380px at 0% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 65%), radial-gradient(760px 540px at 50% 108%, rgba(124, 58, 237, .10), transparent 65%); } /* The neon wash belongs to the dark theme; on a light page it just looks like a stain. Kept at a whisper so the light theme is not completely flat. */ :root:has(.lp-theme-light:checked) body::before, :root[data-theme="light"] body::before { background: radial-gradient(620px 420px at 88% -4%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 65%), radial-gradient(760px 540px at 50% 108%, rgba(124, 58, 237, .04), transparent 65%); } .app-shell { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 16px 16px 96px; } button, input, select, textarea { font-family: inherit; color: inherit; font-size: inherit; outline: none; } button { cursor: pointer; } input::placeholder { color: var(--mut2); } /* Links take --accent-text, not the accent itself, and that one word is a real fix. On the dark theme the two are the same value and always have been: the neon on near-black measures 5.2 to 15.0 : 1 depending on the palette. On the light theme the raw accent as 13px text measured 1.23 : 1 for the green, 1.44 for Tiffany, 2.42 for the orange and 3.34 for the pink - against the 4.5 : 1 body text needs. Every link in the application, and the stylesheet had already written down both the diagnosis and the cure beside the light palette: "if accent-coloured *text* ever needs help, the knob is --accent-text". Nobody had turned it. With it turned, the same four are 4.63 to 9.37. Found by measuring the painted page rather than the tokens - the token test passes either way, because --accent-text was correct and simply unused here. */ a { color: var(--accent-text); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- navbar ---------- */ nav.top { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 auto; /* Sotto ci vuole quanto sopra. Era zero, e il pulsante del tema - alto 44 pixel, che e' l'area minima da toccare - appoggiava sul bordo inferiore della barra. Con un controllo tondo si vede subito: sembra scivolato fuori invece che dentro. */ padding: 12px 16px; font-family: var(--cond); font-size: 14.5px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; } nav.top .logo { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--accent-text); } nav.top a { color: var(--mut); } nav.top a:hover { color: var(--ink); text-decoration: none; } nav.top button { background: none; border: 1px solid var(--line); color: var(--mut); border-radius: 999px; padding: 7px 14px; font-family: var(--cond); font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; } nav.top button:hover { border-color: var(--accent-line); color: var(--accent-text); } /* ---------- hero: the logo, full size ---------- */ /* The five pages with no top bar - sign in, register, and the three error pages - carry the logo here instead, and it is the same logo: the fragment the bar renders, scaled up. It used to be the word alone with a gradient across all five letters. That was a second logo: the ring was missing, and "Kor" took the accent instead of the page's ink. On the one page every visitor sees before anything else. Reported from production with a photograph of it. A flex row rather than a line of text, because the mark is a lockup: ring, gap, word. Everything scales with the viewport so it fills a phone without overflowing a narrow one, and the ring's stroke is thinned in viewBox units - at 50px across, the bar's 2.4 would draw a 5px band. */ .brand { display: flex; align-items: center; justify-content: center; gap: clamp(9px, 2.8vw, 15px); margin: 18px 0 2px; line-height: 1.05; } /* Il marchio e' un collegamento alla vetrina: e' l'anello piu' la parola, quindi il collegamento deve contenerli entrambi e non solo il testo. Nessuna sottolineatura e nessun colore suo - il marchio ha gia' i suoi, e un logo che si tinge di blu al passaggio non e' piu' il logo. */ .brand > a { display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; } .brand .logo-ring { width: clamp(38px, 11vw, 50px); height: clamp(38px, 11vw, 50px); } .brand .logo-ring circle { stroke-width: 1.7; } .brand .logo-word { font-size: clamp(40px, 12vw, 54px); letter-spacing: -1px; } .hero { padding-top: 8px; } /* The greeting opens the page, above the ring and against the left margin: it is a sentence addressed to a person, and a centred sentence under a big number reads as a caption for that number instead. */ /* Directly under the brand, so it reads as "Koraei — hello, Luca" and not as a caption for whatever comes next. */ /* An h1 since the wordmark left the hero, so it is sized here rather than inheriting the browser's 2em heading. Same 21px it has always been - it reads as a greeting, not a banner. */ .greet { text-align: center; margin: 14px 0 6px; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--ink); } .greet b { color: var(--accent-text); font-weight: 700; } /* ---------- cards ---------- */ .card { position: relative; margin-top: 18px; padding: 22px 20px; border-radius: var(--r); background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-soft); box-shadow: var(--shadow-card); } /* A page's own title, and it is an h1 because it is the page's heading. Every page used to open with the wordmark at 44-58px, six centimetres under the same wordmark in the top bar - the product's name said twice before the page said what it was once, on a screen 844px tall. The dashboard and the chat had already dropped it for that reason; this is the rest of the application catching up. The card's own heading was promoted in its place, so the page still has exactly one h1 and a screen reader is told where it is rather than which product it is. Same size as the h2 it replaces: nothing moves, the tag and the meaning changed. */ .card h1.page-title, .card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.2px; } .card h3 { font-size: 18px; font-weight: 700; } /* ---------- figures line up ---------- Every place the application prints a number. In a proportional face a 1 is narrower than an 8, so "12,4 km" and "8,1 km" start at different places and a column of distances down a list wobbles; worse, a counter that ticks 9 -> 10 shifts the text beside it sideways. tabular-nums makes every digit the same width, which is what the numerals in a table were designed for. One rule listing them rather than a declaration in each: this is a single typographic decision, and spread across fourteen rules it is fourteen places for the next figure to be forgotten. Only figures. Body text keeps proportional numerals, where they read better inside a sentence. */ .gauge-score, .history-fact, .macro-amount, .metric-value, .nutrition-history-kcal, .nutrition-kcal-value, .nutrition-kcal-target, .plan-card-count, .plan-entry-count, .planned-figure, .planned-percent, .session-when-value, .tile-value, .volume-value, .zone-pct { font-variant-numeric: tabular-nums; } /* Uppercase condensed micro-labels: the mockup's signature detail. */ .microlbl, .metric-label, .tile-label, .bubble-who, label { display: block; font-family: var(--cond); font-weight: 600; font-size: 12.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--mut); } /* A label belongs above the field it names, never beside it. `display: block` is what makes that true even inside a flex row, where an inline label would otherwise sit on the same line as its input and squeeze it. The one exception is a checkbox, whose label reads as a sentence next to the box - handled in .checkbox-row below. */ label { display: block; margin: 16px 0 8px; } /* ---------- forms ---------- */ /* Ogni campo in cui si scrive qualcosa, per tipo. La lista e' esplicita e va tenuta completa: un tipo che non compare qui non eredita niente e il browser lo disegna a modo suo - che e' come il campo "ora" della pianificazione e' finito a essere un rettangolo grigio squadrato in mezzo a pillole arrotondate. FormFieldStyleTest confronta questa lista con i tipi usati nei template. */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], textarea, select { width: 100%; border: 1px solid var(--line); background: var(--field); color: var(--ink); border-radius: 999px; padding: 13px 18px; font-size: 15px; appearance: none; } textarea { border-radius: var(--r-sm); } input:focus, textarea:focus, select:focus { border-color: var(--accent-line); } input[type="file"] { width: 100%; border: 1px dashed var(--line); background: var(--surface-2); color: var(--ink); border-radius: var(--r-sm); padding: 14px 16px; font-size: 14px; } .checkbox-row { display: flex; align-items: flex-start; gap: 12px; /* 44px, the tap target the rest of the application uses. The row is usually taller than that already - the health-data consent runs to two lines - but a one-line row must not be smaller. */ min-height: 44px; margin: 14px 0; padding: 4px 0; font-size: 14px; color: var(--ink-2); } /* 20px, not the browser's 13. Reported from the registration screen: the biometric-consent box "is too small, make it match the other one". Measured, both boxes were the same 13x13 - the browser's default, which the rest of the interface had grown past. What differed was the text beside them: one line against two, so the same small square looked smaller next to the taller block, and it was the more important of the two consents. Both are 20px now, which is also a target a thumb can hit. flex: 0 0 auto, or the box is squeezed by the label as it wraps - which is what made it look narrower than square on a phone in the first place. */ .checkbox-row input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--accent-text); } .checkbox-row label { margin: 0; font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-2); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border: none; border-radius: 999px; padding: 16px 20px; margin-top: 18px; font-family: var(--cond); font-weight: 600; font-size: 16.5px; letter-spacing: 2.2px; text-transform: uppercase; text-decoration: none; /* NO GLOW HERE. Every button used to be lit, on the reasoning that an outlined button should read as lit and one tight layer is not a light show. Measured on a real dashboard it is: eight or nine controls down the page, each with a halo, and the one button that actually starts something is indistinguishable from the seven that expand a fold. The glow is what says "this is the thing to press", so it belongs to .btn-primary and nowhere else. A box-shadow still lights the shape rather than the letters when it is used - glow belongs to graphics, never to type - and that rule has not changed. */ } .btn:hover { text-decoration: none; } .btn:active { transform: scale(.985); } /* The filled button is the loudest thing on its card, so it keeps the wide wash. */ .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-accent-strong); } .btn-secondary { background: var(--field); color: var(--ink); border: 1px solid var(--line); } .btn-secondary:hover { border-color: var(--accent-line); color: var(--accent-text); } /* Its own colour, not the accent's: a delete button that glows in the brand colour is inviting. */ .btn-danger { background: rgba(255, 92, 92, .1); border: 1px solid rgba(255, 92, 92, .5); color: var(--danger-ink); box-shadow: 0 0 12px rgba(255, 92, 92, .18); } /* Compact, inline variant: sits next to a set's inputs or under one exercise's note, not stretched full width like a page-level action. */ /* Small in width, never in height: 44px is what a thumb needs whatever the label says. */ .btn-small { width: auto; min-height: 44px; padding: 8px 16px; margin-top: 0; font-size: 13px; letter-spacing: 1.4px; } /* ---------- messages ---------- */ /* Margin on both sides, not just the bottom. An alert usually follows a paragraph of explanation, and with a bottom margin only it sat right up against that text - two blocks of prose with a border drawn between them, reading as one. */ .alert { border-radius: var(--r-sm); padding: 12px 16px; margin: 18px 0 16px; font-size: 14.5px; line-height: 1.55; } /* At the very top of a card the heading already provides the separation. */ .card > .alert:first-child, .app-shell > .alert:first-child { margin-top: 0; } .alert-error { background: rgba(255, 92, 92, .12); border: 1px solid rgba(255, 92, 92, .4); color: var(--danger-ink); } .alert-success { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink); } /* Always under the field, never beside it. The margin does that in a normal block form; flex-basis is what does it inside .plan-inline and .plan-add, where a message inserted as a sibling would otherwise become another column of the row and push the inputs sideways. width: 100% keeps long messages from stretching the row. */ .field-error { color: var(--danger); font-size: 13px; margin-top: 6px; flex: 0 0 100%; width: 100%; } .muted { color: var(--mut); font-size: 14px; } /* Provider credit and the link back to it, side by side and quiet: required by the Strava API Agreement, but it is their credit, not our headline. */ .attribution { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 14px; font-size: 13px; } .attribution .muted { font-size: 13px; } /* ---------- Strava card ---------- Grouped rather than a single column of paragraphs: facts, then actions, then the credit on its own rule at the foot. The old stack gave "Sync now" and "Disconnect" the same visual weight, one above the other, which is a poor way to present one everyday action and one that deletes an athlete's history. */ .strava-card .strava-body { margin-top: 14px; } .strava-card .strava-line { margin-top: 6px; } .strava-card .strava-line:first-child { margin-top: 0; } .strava-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } /* Pushed to the far end, away from the thumb that just pressed Sync. On a narrow screen the row wraps and it simply lands on the next line, still last. */ .strava-actions .strava-danger { margin-left: auto; } /* The quiet variant: legible, reachable, and not competing for the press. It turns red only on hover, when the intention is already there. */ .btn-quiet { background: none; border: 1px solid var(--line); color: var(--mut); } .btn-quiet:hover { border-color: var(--danger); color: var(--danger); } /* ---------- the guided setup ---------- Up to eight questions after the first login, one to a screen. Everything here is in service of one idea: the athlete should be able to see, without reading, how much is left and that they may stop. The bars are the progress - one per question this athlete is asked, filled when the account holds an answer and solid when it is the screen in front of you. The name of each is in the markup as hidden text, because a row of coloured bars tells somebody using a screen reader nothing at all, and the name of the current one is printed on the line below. Two ways out, styled apart on purpose: "I'll add this later" sits inside the card, under the question it skips, and "leave the setup" sits below the card. Neither uses the destructive quiet button of the rest of the application - that one turns red on hover, and skipping a question is not a dangerous act. */ .onboarding { max-width: 560px; margin: 0 auto; } .onboarding-mark { display: flex; justify-content: center; margin: 6px 0 18px; } .onboarding-mark .logo-ring { width: 26px; height: 26px; } .onboarding-mark .logo-word { font-size: 22px; } .onboarding-progress { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; } /* A bar and nothing else. The names sit on the line below now: there are up to eight questions, and eight words across a phone came out at five characters each. The name is still in the markup for a screen reader, hidden with .sr-only. */ .onboarding-progress li { flex: 1; height: 3px; border-radius: 2px; background: var(--line); } /* Answered: filled, but softly. Current: the full accent, so the screen you are on reads loudest even when it is not the one furthest along. */ .onboarding-progress li.is-done { background: color-mix(in srgb, var(--accent) 45%, transparent); } .onboarding-progress li.is-current { background: var(--accent); } /* "Step 3 of 7 — Measurements". The count is of the questions this athlete is actually asked. */ .onboarding-where { display: flex; gap: 8px; align-items: baseline; margin: 0 0 14px; font-family: var(--cond); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mut2); } .onboarding-where-what { color: var(--ink); font-weight: 700; } .onboarding-card { padding-bottom: 22px; } .onboarding-card .step-body > p:first-child { margin-bottom: 16px; } /* What each question is for, on the welcome screen; what a skipped one costs, on the closing one. */ .onboarding-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 14px; } .onboarding-list li { display: grid; gap: 2px; } .onboarding-list-what { font-family: var(--cond); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-text); } /* The doors on the sync question. Cards rather than a list of links: they are the only thing on that screen, and each one is a decision with a consequence written under it. */ .onboarding-routes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; } .onboarding-route { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); text-decoration: none; color: var(--ink); } .onboarding-route:hover { border-color: var(--accent-line); text-decoration: none; } .onboarding-route .ico { flex: 0 0 auto; margin-top: 2px; color: var(--accent-2); } .onboarding-route-text { display: grid; gap: 2px; min-width: 0; } .onboarding-route-name { font-weight: 700; } .onboarding-skip { display: flex; justify-content: center; margin-top: 14px; } /* Not the destructive hover: leaving a question for later is an ordinary choice. */ .onboarding-skip .btn-quiet:hover { border-color: var(--accent-line); color: var(--accent-text); } /* "I'll add this later", inside the card and under the question it skips - so it reads as belonging to that question, unlike the one below the card, which leaves the setup altogether. */ .onboarding-skip-step { display: flex; justify-content: center; margin-top: 16px; } .onboarding-skip-step .btn-quiet:hover { border-color: var(--accent-line); color: var(--accent-text); } /* A line of consequence under an action: what the button is about to do to the rest of the walk. */ .onboarding-aside { margin-top: 14px; font-size: 13px; } /* The free-text goal box, set apart from the checkbox list it is an alternative to. */ .onboarding-card .goal-text { margin: 18px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); } .onboarding-card .goal-text textarea { margin-bottom: 6px; } /* ---------- the four goal areas, closed ---------- Eighteen checkboxes in four headed lists was a screen and a half of small print on a phone, and the athlete had to read all of it to find the two that were theirs. Closed, the question is four rows. Opening is CSS and nothing else: the toggle is a checkbox, and `:checked ~ .goal-group-body` shows what follows it. Which is why the input is a sibling of the body rather than inside the label - a selector cannot climb back out of one. It works with scripting off, and app.js only adds the tidying-up when an area is closed again. The toggle is hidden but not display:none - it has to stay focusable and reachable by keyboard, and its label is the 44px row, so the whole row is the target. */ .goal-group { border-bottom: 1px solid var(--line); } .goal-group:last-of-type { border-bottom: 0; } .goal-group-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; } .goal-group-head { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 4px 2px; cursor: pointer; font-family: var(--cond); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mut); } /* The chevron, and why it is not a tick box. It was a tick box, and it read as one: reported from the live setup, an athlete who cycles as well as lifts saw the gym area open with a filled box and the other three closed with empty ones, and understood that he was only allowed to choose from the gym. He was not - the closed rows have always opened - but a control that looks like a checkbox says "selected", not "there is more inside". So it is the same rotating chevron as the schedules and the ask boxes: one meaning, one drawing, everywhere in the application. Written in text so it needs no asset. */ .goal-group-mark { flex: 0 0 auto; font-size: 18px; line-height: 1; color: var(--accent-text); transition: transform .15s ease; } .goal-group-mark::before { content: "\203A"; } .goal-group-toggle:checked + .goal-group-head { color: var(--ink); } .goal-group-toggle:checked + .goal-group-head .goal-group-mark { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .goal-group-mark { transition: none; } } /* What is chosen inside, so a closed area never hides an answer. app.js keeps it current. */ .goal-group-count { margin-left: auto; font-family: var(--cond); font-size: 12px; letter-spacing: 1.2px; color: var(--accent-text); white-space: nowrap; } .goal-group-name { flex: 0 1 auto; } /* The focus ring belongs on the row, since the input itself is not what the eye follows. */ .goal-group-toggle:focus-visible + .goal-group-head { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .goal-group-body { display: none; } .goal-group-toggle:checked ~ .goal-group-body { display: block; padding-bottom: 8px; } .goal-weight { margin-top: 10px; } /* What the reading found, named one per line: a wrong tick has to be visible before it is saved. */ .goal-suggested ul { margin: 6px 0 0; padding-left: 18px; } /* "or, if you already have one" - a rule with a word on it, between the written schedule and the two ways of supplying your own. */ .onboarding-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-family: var(--cond); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mut2); } .onboarding-or::before, .onboarding-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .onboarding-gym-ai .muted { margin-top: 8px; font-size: 13px; } /* The written-schedule card on the builder. Same shape as the camera card below it: one explanation, one control, one button. */ /* The two warnings on the scanner, set apart from the explanation above them: they are the two mistakes athletes actually made, and a reader who skims the paragraph still has to meet them. */ /* The figures of one session, folded. Three workouts on the card meant twelve tiles between the athlete and the rest of the page. The heading identifies the workout - sport, when, and which device sent it - and everything else is one tap away. Same chevron as the schedules, the ask boxes and the goal areas: one drawing for "there is more inside", everywhere in the application. */ /* .card-fold folds a whole card - the gym schedules use it, and so does the goals page's "what do you train". It used to be grouped here with .session-detail, the fold over one session's figures; that one is gone, because the last-session card now opens the newest workout outright and puts the others behind a single "altri X". */ /* ---------- un solo "espandi", sempre nello stesso posto ---------- Segnalato: "in alcune sezioni espandi e' a destra, alcune al centro, metti il bottone sempre a destra e meno invasivo, e lo stile deve essere uguale per tutti i bottoni di quel tipo". Erano due controlli diversi nati in momenti diversi. Quello delle schede era una riga larga tutta la carta con un disco accentato da 26 pixel; quello sotto il commento del coach era un testo in accento con una freccina, in linea - e siccome l'eroe della home e' una colonna centrata, li' si centrava da solo. Da cui "alcune al centro": non era una scelta, era l'allineamento del genitore che passava attraverso. Adesso i due selettori condividono una regola sola. A destra per costruzione - margin-left: auto sul contenuto, che non dipende da come e' allineato il contenitore - e piu' leggero: via il disco, resta la freccina, che e' la meta' discreta delle due. In accento e non in grigio, perche' su questa interfaccia l'accento vuol dire "si puo' premere", e la piega che nessuno vedeva era esattamente il difetto che il disco era stato messo a curare. L'area da toccare resta di 44 pixel: e' data dall'altezza minima, non dalla dimensione del segno. */ /* Il segno della piega, uno solo per tutte: una freccina disegnata con due bordi, che gira quando la piega si apre. Era un disco bordato da 26 pixel con il fondo in accento, messo quando le pieghe non si leggevano come premibili; adesso a dire "si puo' premere" ci pensa l'etichetta in accento accanto, e il disco restava solo a pesare. */ /* Grande quanto la sua etichetta: a sei pixel con un bordo da uno e mezzo era una virgola accanto a un testo da dodici e mezzo, e non si leggeva come parte dello stesso controllo. */ .session-detail-mark { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s ease; } .card-fold[open] > summary .session-detail-mark { transform: rotate(-135deg) translateY(3px); } @media (prefers-reduced-motion: reduce) { .session-detail-mark { transition: none; } } /* Quante schede ci sono dentro, cosi' la carta chiusa risponde comunque a "qui c'e' qualcosa?". Prima dell'etichetta, non spinto a destra: adesso e' la riga intera ad andare a destra, e un margin-left: auto qui dentro la riaprirebbe da un lato all'altro della carta. */ .card-fold-count { order: -1; color: var(--mut); } /* ---------- the last seven days ---------- Columns, and deliberately the same family as the weekly chart directly below it: the week by day, then the month by week, one above the other. Davide asked for exactly that, and it is also the cheaper reading - the eye learns one shape and applies it twice. Sixty pixels a column is what a phone gives, which is enough for the bar, the weekday, the date and one figure a line. Not enough for the sport's name, so the figure takes that discipline's colour - the same colour it has in the chart underneath, where the legend names it. A title attribute carries the name for a pointer, and the legend carries it for everybody else. Heights come from line-N and not bar-N: the bar-N classes set a width as well, so a 50% day would come out half as wide as its neighbours. That is what the line-N classes exist for. */ .day-bars { display: flex; align-items: flex-start; gap: 4px; list-style: none; margin: 10px 0 0; padding: 0; } .day-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; } /* A fixed height, not flex: 1. Measured, and it was wrong the first time: with the bar box stretching to fill what the labels left over, a day with two workouts under it got a shorter box than a day with one - so the busier day drew the shorter bar. Two figures where its neighbour had one, and the chart said the opposite of the truth. Every bar box is the same height now and the figures hang below it, however many there are. */ .day-bar { width: 100%; height: 96px; display: flex; align-items: flex-end; border-radius: 8px 8px 0 0; background: var(--field); } .day-fill { width: 100%; min-height: 3px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); } /* A day with nothing on it keeps its column and loses its ground: the gap is the rest day. */ .day-rest .day-bar { background: transparent; border-bottom: 1px dashed var(--line); } .day-label { display: grid; justify-items: center; margin-top: 8px; line-height: 1.1; } .day-weekday { font-family: var(--cond); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut2); } .day-date { font-size: 12px; color: var(--mut2); font-variant-numeric: tabular-nums; } /* Today is the column the athlete is standing in, and it is not finished yet. */ .day-today .day-weekday { color: var(--accent-text); } .day-figures { display: grid; justify-items: center; gap: 2px; margin-top: 6px; } .day-figure { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); } /* The discipline's own colour, the same one the weekly chart gives it. vol-accent for the athlete with a single discipline, whose chart is drawn in their chosen palette colour. */ .day-figure.vol-accent { color: var(--accent-text); } .day-figure[class*="vol-c"], .day-figure.vol-walking, .day-figure.vol-hiking { color: var(--bar); } .day-rest-word { font-family: var(--cond); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut2); } .scan-warning { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid var(--accent-line); font-size: 13px; } /* ---------- the three questions ---------- They sit inside the two forms that ask for a plan, above the controls that were already there, so the athlete reads what is being asked before the button that spends the interaction. Boxed and set apart from the rest of the form: these are questions rather than settings, and one of them is about injuries. Two rows each because an answer is a sentence - "spalla destra operata nel 2023, niente spinte sopra la testa" does not fit on one line at this width, and a field that hides the second half of the answer while it is typed is a field people give up on. */ .intake { display: grid; gap: 6px; margin-bottom: 14px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--field); } .intake-lead { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; } .intake label { font-family: var(--cond); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--mut2); } .intake textarea { width: 100%; resize: vertical; min-height: 56px; font: inherit; line-height: 1.4; } .intake .checkbox-row label { text-transform: none; letter-spacing: 0; font-size: 13px; } .magic-write-form { display: grid; gap: 8px; margin-top: 12px; } .magic-write-form select { max-width: 120px; } .magic-write-form .muted { font-size: 13px; } .onboarding-plan-form { margin-top: 18px; } .onboarding-plan-form .muted { margin-top: 8px; font-size: 13px; text-align: center; } /* A button that owns its line, for a screen with exactly one thing to do next. */ .btn-block { display: block; width: 100%; text-align: center; } .strava-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--mut2); } .strava-status.is-ok { color: var(--ok); } .strava-status.is-ok .dot { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .strava-status.is-error { color: var(--danger); } .strava-status.is-error .dot { background: var(--danger); box-shadow: 0 0 8px var(--danger); } /* The spinner replaces the status dot while a sync runs. A static "SYNC IN PROGRESS" on a page that never changes is indistinguishable from a page that has frozen; this is the part that says the waiting is expected. One element, one keyframe: no image, no script, nothing for the CSP to block. */ .spinner { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--accent-line); border-top-color: var(--accent-text); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Motion is the whole point here, so it is not simply switched off: the ring stays and pulses instead of turning, which still reads as "working". */ @media (prefers-reduced-motion: reduce) { .spinner { animation: spinner-pulse 1.6s ease-in-out infinite; } } @keyframes spinner-pulse { 50% { opacity: .35; } } /* The credit, bottom left, on its own rule. Required by Strava's Brand Guidelines, and it belongs here rather than among the controls, where it read as one more thing to act on. */ .strava-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .strava-credit { font-family: var(--cond); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mut2); } .strava-account { font-size: 13px; } /* ---------- gym schedules ---------- */ .plan-cards { list-style: none; margin: 12px 0 0; padding: 0; } .plan-cards li { margin-top: 10px; } /* A card row holds the link (edit) and the "Esegui" form side by side - the two cannot nest, a