/* ============================================================================ Med&X member portal v2 — DESIGN TOKENS Source: BRAND-BRIEF.md + README "Design Tokens" (member export 2026-08-28). Every value below is copied from the brief; the artboards use these literal values inline. Use the variables for NEW elements; leave the copied artboard markup with its inline literals (traceability to the .dc.html files). Round 3: the block between the ROUND 3 TOKENS markers mirrors shared/medx-tokens.css, the canonical file. ========================================================================== */ :root { /* colours (exact, non-negotiable) */ --ink: #191512; /* near-black — dark surfaces, primary text */ --cream: #f7f1e6; /* warm paper page ground — never pure white */ --card: #fdfaf3; /* card cream */ --crimson: #9b1b22; /* primary action */ --crimson-hover: #7e151b; --gold: #c9a962; /* premium moments, hairline flourishes */ --gold-hover: #d9bd7f; --gold-btn-hover: #b8994f; /* gold filled button hover (artboards) */ --gold-dark: #6e5626; /* dark-on-light gold text */ --soft: #4a4239; /* secondary text */ --muted: #6d6459; /* dates / tertiary labels: 5.2:1 on cream (AA; the old #9b8f80 was 2.8:1) */ --banner: #f1e8d3; /* email-confirm banner ground */ --hair: rgba(25,21,18,.16); /* hairline on light */ --hair-soft: rgba(25,21,18,.1); /* row separators inside cards */ --hair-ink: rgba(247,241,230,.25); /* hairline on ink */ --hair-ink-soft: rgba(247,241,230,.14); --scrim: rgba(25,21,18,.45); /* typography: --font-ui, --font-display, the title steps and the type scale sit in the ROUND 3 TOKENS block below */ --font-mono: ui-monospace, Menlo, monospace; /* shape & motion (the radius scale and the springs sit in the ROUND 3 TOKENS block below) */ --gutter: 36px; /* page gutter (desktop) */ --gutter-m: 18px; /* page gutter (≤900px) */ --drawer-w: 300px; --ease-drawer: var(--ease); --shadow-drawer: 12px 0 44px rgba(25,21,18,.4); /* motion language — ONE easing and four durations for every surface (both portals, the event app): quick = hover · press · colour (cards lift on it too); reveal = entrances · overlays · drawers · sheets · toasts; exit = anything fading away; drift = slow photo zoom only. Hover, entrance and exit timings use these, never literals (only stagger delays and the slow-load hairline's creep are written out). --t-fast / --t-enter are the admin portal's names for the same two values (admin tokens.css), so a rule moved between the products keeps its timing. */ --ease: cubic-bezier(.22,1,.36,1); --t-quick: 180ms; --t-reveal: 340ms; --t-exit: 200ms; /* exits ease in and out (never a front-loaded snap): whatever leaves is seen leaving */ --ease-exit: cubic-bezier(.4,0,.2,1); /* a scrim or a sheet fading in: the fade ramps (the house --ease reaches 60 % in its first frame, a dim that read as a snap); what travels keeps --ease / --ease-settle */ --ease-fade: cubic-bezier(.25,.1,.25,1); --t-drift: var(--spring-enter-dur); /* the photo settle and drift join Class T (ROUND3-RULES §4.1): readers pair it with --spring-enter */ /* settle: a sheet, a popover or a toast arriving comes to rest on a critically damped spring (response .34, damping 1: it settles in the 480 ms of --t-settle and never goes past its place, motion pass 1 Oct 2026, where the old damping .8 curve took a sheet 1.5 % past its place and back) — for the TRAVEL only (transform); its fade keeps --ease. Browsers without linear() get --ease. Regenerate with springCurve(.34, 1) (js/ui.js), never hand-edit */ --ease-settle: var(--ease); --t-settle: 480ms; --t-fast: var(--t-quick); --t-enter: var(--t-reveal); --shadow-lift: 0 16px 30px -20px rgba(25,21,18,.5); /* a clickable card, hovered (lifts 2px) */ --shadow-sheet: 0 10px 34px rgba(25,21,18,.15); /* a list row under the pointer (alerts, search results, thread list, directory, pickers). Translucent ink, so it reads the same on the card cream and on the page cream */ --row-hover: rgba(25,21,18,.04); /* PHONE CALM (DESIGN-RULES §2 and §3): the type scale (--fs-*) sits in the ROUND 3 TOKENS block below */ /* 4-point spacing grid */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --gutter-p: 20px; /* phone page gutter */ --pic-ring: rgba(25,21,18,.12); /* hairline around a person's circle on cream */ --tap: 44px; /* smallest touch target */ /* Liquid Glass · GLASS-RULES §1 (2026-09-25). Glass is for what FLOATS over content (bars, sheets, menus, chips on photos, segmented controls, toasts); what IS content stays cream paper, on the radius scale since round 3 (A1). Final tints are set by the contrast check (§1.7, after/glass/glass-contrast.json) */ --glass-blur: 24px; /* bars */ --glass-blur-sheet: 30px; /* sheets, popovers, drawer */ --glass-blur-chip: 16px; /* chips and buttons on photos */ --glass-sat: 180%; --glass-light: rgba(250, 246, 238, .72); /* over cream pages */ --glass-light-strong: rgba(250, 246, 238, .88); /* sheets and popovers: long text sits on them */ --glass-dark: rgba(25, 21, 18, .58); /* over photos, ink bands (.52 in GLASS-RULES §1.3; raised by the §1.7 check: gold 11px on dark glass over the Forum ink card measured 4.57 at .52) */ --glass-dark-chip: rgba(25, 21, 18, .40); /* the floating tab bar: its 11px crimson and gold labels sit on whatever scrolls under it, photos included, so it takes the §1.7 ceilings (the iOS 26 native bar's cream is .80 too). Dark .62 is used only when the whole bar sits over a dark region (chrome.js › underIsDark). The light lens sits right behind the selected crimson label, so it darkens less than the shared .07: at .80 with a .07 lens the label measured 4.42 over a dark photo on Projects (§1.7 sweep), with .04 it reads 4.6 over an ink ground. The native bar settled the same way (a 6% lens) */ --glass-bar-light: rgba(250, 246, 238, .80); --glass-bar-dark: rgba(25, 21, 18, .62); --glass-bar-lens-light: rgba(25, 21, 18, .04); --glass-edge-light: inset 0 1px 0 rgba(255, 255, 255, .70), inset 0 0 0 .5px rgba(255, 255, 255, .50); --glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .14); --glass-shadow: 0 10px 30px rgba(25, 21, 18, .14), 0 1px 3px rgba(25, 21, 18, .10); --glass-shadow-dark: 0 10px 30px rgba(0, 0, 0, .30); --glass-lens-light: rgba(25, 21, 18, .07); /* the selected-tab pill inside a light bar */ --glass-lens-dark: rgba(247, 241, 230, .11); /* .16 in §1.3: behind the selected gold label it lifted the ground to 4.6:1; .11 gives 5.9:1 (§1.7) */ --glass-solid-light: #f3ece0; /* fallbacks (§1.6) */ --glass-solid-dark: #221d19; --glass-press: .96; /* pressed scale */ --r-sheet: var(--r-xl); --r-pop: 22px; --r-drawer: 24px; /* popovers and the drawer are glass only, never content (ROUND3-RULES §2) */ /* the space every bottom-anchored thing keeps free (§1.9.1, §1.10, §2.1): 0 wherever no bar is drawn; the web bar sets it in app.css (html.mx-webbar), the iOS layer writes a px value inline on in native mode. JS reads it through ui.bottomSpace() (a measured length: before @property support the computed value is the unresolved calc() text) */ --mx-tabbar-h: 0px; /* how much of the first block under a phone photo hero shows above the tab bar's top edge (§1.9.3): the whole 44px segmented control (Plexus, Accelerator) with 8px of air, the first fact row (Gala, Forum), the tile numbers (Bridges) with their labels under the bar. Measured line by line against the capsule's curved ends: from 375 to 440 wide every peek from 48 to 57 cuts nothing (the Bridges labels start at 64 and poke out at the bar's round ends above 57). Under 375 the Bridges "Per evening" label wraps to a line starting at 47, so the peek drops to 46 (the tabs keep 2px of air) (app.css › the hero on phones) */ --mx-hero-peek: 52px; } /* ---- ROUND 3 TOKENS (canonical copy) --------------------------------------------------------------------------- ROUND3-RULES §2 to §6 and §11 (A1, A10, A11, A12, A14). The same block, byte for byte, sits in shared/medx-tokens.css (the canonical file) and in user-portal/frontend-v2/css/tokens.css (the mirror, until the portal imports the shared file). Change both together: the Phase 1 verify diffs the two blocks. */ :root { /* type families (§3, D2). Option A is in force. No rule, inline style or script names a family, they read these two. A D2 pick is a swap of the lines below and nothing else: B: --font-display takes the --font-ui stack with "SF Pro Display" in place of "SF Pro Text". Steps: display and title1 700 at -.03em, title2 600 at -.015em, title3 -.01em (-.015em at 20 and 21 px). C: --font-ui "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif and --font-display "Instrument Serif", Georgia, serif. Steps: display, title1 and title2 400 at 0, title3 -.015em. The three display sizes grow by 1.08: --fs-display 37px, --fs-title1 32px, --fs-title2 24px. SF Pro is only ever reached through the system stack. Inter and Newsreader come from /assets/fonts/fonts.css. */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --font-display: ui-serif, "New York", "Newsreader", Georgia, serif; /* weight and tracking per title step (§3.2, option A). --font-display is for 22 px and up only */ --fw-display: 500; --ls-display: -.01em; /* .t-display, .mx-hero-title (34) */ --fw-title1: 500; --ls-title1: -.005em; /* .t-title1, .mx-lt (30) */ --fw-title2: 500; --ls-title2: 0em; /* .t-title2, sheet titles (22) */ --ls-title3: -.01em; /* display-classed text under 22 px: --font-ui 600, this tracking from 17 px up */ --ls-caps: .12em; /* 12 px caps labels and 13 px caps buttons */ /* figures (§3.1): every figure that changes or carries money (countdowns, prices, counts, badges) is --font-ui with font-variant-numeric: tabular-nums, and from 20 px up takes these two. --font-display never sets a figure */ --fw-num: 600; --ls-num: -.02em; /* type scale (DESIGN-RULES §2, the member scale). 12 px floor, 16 px body and inputs. Nothing on screen is drawn below --fs-label, the 11 px tab labels excepted (GLASS §1.9.1) */ --fs-display: 34px; /* hero title */ --fs-title1: 30px; /* large screen title (root screens) */ --fs-title2: 22px; /* feature card title, sheet title */ --fs-title3: 18px; /* list-row and card titles, names */ --fs-body: 16px; /* running text, inputs */ --fs-2nd: 14px; /* secondary lines, roles, meta */ --fs-label: 12px; /* eyebrows, tags, section heads, field labels: the floor */ --fs-btn: 13px; /* button text */ --fs-num: 40px; /* countdown, stat tiles */ /* corners (§2, A1, D3). Content rounds on this scale, people are 50%, full-bleed heroes and edge strips stay square where they touch the screen edge. Buttons 44 px tall and up take --r-md, shorter ones --r-sm. Nesting: an inner radius is the outer radius minus the padding between them, never below --r-xs, and media that touches its card edge takes the card corners through the clip. A hairline on a rounded shape is 1px at most rgba(25,21,18,.10), or a .5px inset shadow. Native layers take the same values with cornerCurve .continuous */ --r-xs: 6px; /* tags: a printed label on paper */ --r-sm: 10px; /* inputs, buttons under 44 px, thumbnails, institution tiles, boxes of 40 to 60 px */ --r-md: 14px; /* buttons 44 px and taller, grouped lists */ --r-lg: 20px; /* cards, photo cards, tiles on the page, the white QR plate */ --r-xl: 28px; /* sheets, a hero-sized card that does not touch a screen edge */ --r-capsule: 999px; /* glass controls, chips, the ui.seg track and lens, badges, the countdown capsule */ /* springs (§4.2, A11): Countfocal springCurve, settle within .15 percent sampled at 240 Hz. Snappy and ring are critically damped since the motion pass of 1 Oct 2026 (Countfocal retired its own snappy and ring on 29 Sept: they went 2 and 3.8 percent past their place, the tickets lens 1.8 px and the Plexus lens up to 4.9 px). The names stay, the values are Countfocal's control spring. Here each spring holds its own cubic-bezier fallback, and its linear() value arrives only through the @supports block below (§5.1). ui.js installSprings() re-publishes the same values at boot. Regenerate with springCurve, never hand-edit */ --spring-enter: cubic-bezier(.22, 1, .36, 1); --spring-enter-dur: 696ms; /* response .62, damping .94: entrances, the count-up, the photo settle */ --spring: cubic-bezier(.22, 1, .36, 1); --spring-dur: 612ms; /* .52, .90: anything that moves or resizes */ --spring-snappy: cubic-bezier(.22, 1, .36, 1); --spring-snappy-dur: 587ms; /* .42, 1 (Countfocal control): press release, the seg lens, the tab lens, switches */ --spring-ring: cubic-bezier(.22, 1, .36, 1); --spring-ring-dur: 587ms; /* .42, 1 (Countfocal control): a mark coming into place */ --spring-control: cubic-bezier(.22, 1, .36, 1); --spring-control-dur: 587ms; /* .42, 1 (Countfocal control): critically damped, a small control */ --spring-calm: cubic-bezier(.22, 1, .36, 1); --spring-calm-dur: 700ms; /* .5, 1 (Countfocal CALM): critically damped, a hero flight, a card that resizes */ /* motion classes (§4.1). Class T (transitions, gestures, control feedback): at most 700 ms, the opening excepted, transform and opacity only apart from the four named exceptions, one motion per moment, interruptible, a release hands its velocity to the spring. Class A (ambient loops): their own timings, paused off screen and while hidden, the first frame only under Reduce Motion, at most one per screen. Press language §4.3 */ --t-press: 100ms; /* a paper press goes down to --paper-press on --ease, and back up on --spring-snappy */ --paper-press: .97; /* paper buttons, rows and cards. Glass keeps --glass-press .96 and tab items .92 */ --t-rm-fade: 160ms; /* Reduce Motion: a Class T movement becomes this opacity crossfade */ --t-rm-color: 120ms; /* Reduce Motion: press and lens changes are instant with this colour change */ /* scroll progress (§6). Written by script only, one requestAnimationFrame per frame, never a CSS transition. --bar-p on the top bar (Phase 2A): 0 at rest, 1 folded. --p and --py on a receding hero or card (ui.recede): 0 at rest and 1 when its bottom edge reaches the bar, and half the distance scrolled past its top */ --bar-p: 0; --p: 0; --py: 0px; /* the sticky action bar of the project pages (§11, the kit .mx-actionbar): one 48 px proxy button in 8 px of glass, floating at bottom: var(--mx-tabbar-h). Its own height, so the end of a page can scroll clear of it */ --actionbar-h: 64px; } @supports (animation-timing-function: linear(0, 1)) { :root { --spring-enter: linear(0, 0.0098, 0.036, 0.0739, 0.1201, 0.1718, 0.2265, 0.2826, 0.3387, 0.3937, 0.4468, 0.4976, 0.5455, 0.5904, 0.6322, 0.6709, 0.7064, 0.7388, 0.7684, 0.7951, 0.8193, 0.8411, 0.8605, 0.8779, 0.8934, 0.9072, 0.9194, 0.9302, 0.9397, 0.948, 0.9553, 0.9617, 0.9672, 0.9721, 0.9763, 0.9799, 0.983, 0.9857, 0.988, 0.99, 0.9917, 0.9931, 0.9944, 0.9954, 0.9963, 0.997, 0.9976, 0.9981, 1); --spring: linear(0, 0.0108, 0.0395, 0.0812, 0.1318, 0.1881, 0.2476, 0.3082, 0.3685, 0.4273, 0.4837, 0.5371, 0.5872, 0.6337, 0.6765, 0.7156, 0.7511, 0.7832, 0.812, 0.8377, 0.8606, 0.8808, 0.8986, 0.9141, 0.9277, 0.9395, 0.9497, 0.9584, 0.9659, 0.9723, 0.9777, 0.9823, 0.9861, 0.9893, 0.9919, 0.9941, 0.9958, 0.9973, 0.9984, 0.9993, 1, 1.0005, 1.0009, 1.0012, 1.0013, 1.0015, 1.0015, 1.0015, 1); --spring-snappy: linear(0, 0.0149, 0.0527, 0.1055, 0.1671, 0.2332, 0.3005, 0.3667, 0.4303, 0.4904, 0.5463, 0.5978, 0.6448, 0.6873, 0.7255, 0.7597, 0.7901, 0.8171, 0.8409, 0.8619, 0.8803, 0.8964, 0.9105, 0.9227, 0.9334, 0.9427, 0.9507, 0.9576, 0.9636, 0.9688, 0.9733, 0.9771, 0.9804, 0.9833, 0.9857, 0.9878, 0.9896, 0.9911, 0.9924, 0.9936, 0.9945, 0.9953, 0.996, 0.9966, 0.9971, 0.9976, 0.9979, 0.9982, 1); --spring-ring: linear(0, 0.0149, 0.0527, 0.1055, 0.1671, 0.2332, 0.3005, 0.3667, 0.4303, 0.4904, 0.5463, 0.5978, 0.6448, 0.6873, 0.7255, 0.7597, 0.7901, 0.8171, 0.8409, 0.8619, 0.8803, 0.8964, 0.9105, 0.9227, 0.9334, 0.9427, 0.9507, 0.9576, 0.9636, 0.9688, 0.9733, 0.9771, 0.9804, 0.9833, 0.9857, 0.9878, 0.9896, 0.9911, 0.9924, 0.9936, 0.9945, 0.9953, 0.996, 0.9966, 0.9971, 0.9976, 0.9979, 0.9982, 1); --spring-control: linear(0, 0.0149, 0.0527, 0.1055, 0.1671, 0.2332, 0.3005, 0.3667, 0.4303, 0.4904, 0.5463, 0.5978, 0.6448, 0.6873, 0.7255, 0.7597, 0.7901, 0.8171, 0.8409, 0.8619, 0.8803, 0.8964, 0.9105, 0.9227, 0.9334, 0.9427, 0.9507, 0.9576, 0.9636, 0.9688, 0.9733, 0.9771, 0.9804, 0.9833, 0.9857, 0.9878, 0.9896, 0.9911, 0.9924, 0.9936, 0.9945, 0.9953, 0.996, 0.9966, 0.9971, 0.9976, 0.9979, 0.9982, 1); --spring-calm: linear(0, 0.0149, 0.0528, 0.1057, 0.1674, 0.2335, 0.3008, 0.3671, 0.4308, 0.4909, 0.5468, 0.5983, 0.6452, 0.6877, 0.7259, 0.7601, 0.7905, 0.8174, 0.8412, 0.8622, 0.8806, 0.8967, 0.9107, 0.923, 0.9336, 0.9428, 0.9509, 0.9578, 0.9638, 0.9689, 0.9734, 0.9772, 0.9805, 0.9833, 0.9858, 0.9879, 0.9896, 0.9912, 0.9925, 0.9936, 0.9945, 0.9954, 0.996, 0.9966, 0.9971, 0.9976, 0.9979, 0.9983, 1); } } @media (prefers-reduced-motion: reduce) { :root { --paper-press: 1; } } /* ---- end ROUND 3 TOKENS ---------------------------------------------------------------------------------------- */ @media (max-width: 374px) { :root { --mx-hero-peek: 46px; } } /* registered as a length where the engine can (iOS 16.4+, Chrome 85+): getComputedStyle then returns "95px", not the calc() */ @property --mx-tabbar-h { syntax: ''; inherits: true; initial-value: 0px; } @supports (animation-timing-function: linear(0, 1)) { :root { --ease-settle: linear(0, 0.0151, 0.0534, 0.1068, 0.1691, 0.2357, 0.3035, 0.3701, 0.4341, 0.4943, 0.5504, 0.6019, 0.6488, 0.6912, 0.7293, 0.7633, 0.7935, 0.8203, 0.8439, 0.8646, 0.8828, 0.8987, 0.9126, 0.9247, 0.9352, 0.9443, 0.9521, 0.9589, 0.9648, 0.9698, 0.9742, 0.9779, 0.9812, 0.9839, 0.9863, 0.9883, 0.99, 0.9915, 0.9928, 0.9938, 0.9948, 0.9956, 0.9962, 0.9968, 0.9973, 0.9977, 0.998, 0.9983, 1); } } /* ---- repeated utility vocabulary (only where the design repeats itself) ---- */ /* micro-label: 9–11px Inter 600 uppercase, tracked — eyebrows, buttons, tags */ .micro { font: 600 10.5px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } .micro-9 { font: 600 9px var(--font-ui); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; } .micro-10 { font: 600 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } /* numbered section eyebrow — "01 · OUR PROJECTS" (house signature) */ .eyebrow { display: flex; align-items: baseline; gap: 14px; } .eyebrow-n { font-family: var(--font-ui); font-weight: 600; font-size: 14px; color: var(--crimson); } /* display-classed text under 22 px (ROUND3-RULES §3.1) */ .eyebrow-t { font: 600 14px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; } .eyebrow-s { font-size: 12.5px; color: var(--soft); } /* buttons: crimson filled, hairline ghost, gold filled. Uppercase 13px text (phone calm scale), never wrap. The family is 44 px tall and up on phones, so it takes --r-md, and .btn-sm (36 tall) takes --r-sm (ROUND3-RULES §2) */ .btn-primary, .btn-ghost, .btn-gold, .btn-ghost-ink { display: inline-block; padding: 13px 22px; font: 600 var(--fs-btn) var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; border-radius: var(--r-md); border: 0; line-height: normal; text-align: center; box-sizing: border-box; } /* colour eases in and out; a press sinks the button a pixel (transform only — no layout moves) */ .btn-primary, .btn-ghost, .btn-gold, .btn-ghost-ink { transition: background-color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); } .btn-primary:active, .btn-ghost:active, .btn-gold:active, .btn-ghost-ink:active { transform: translateY(1px); } .btn-primary { background: var(--crimson); color: var(--cream); } .btn-ghost { border: 1px solid rgba(25,21,18,.35); color: var(--ink); background: transparent; } .btn-ghost-ink { border: 1px solid rgba(247,241,230,.35); color: var(--cream); background: transparent; } .btn-gold { background: var(--gold); color: var(--ink); } /* hover colours only for a real pointer — on touch a tapped button used to keep its hover shade */ @media (hover: hover) { .btn-primary:hover { background: var(--crimson-hover); color: var(--cream); } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .btn-ghost-ink:hover { border-color: var(--cream); color: var(--cream); } .btn-gold:hover { background: var(--gold-btn-hover); color: var(--ink); } } .btn-primary[disabled], .btn-ghost[disabled], .btn-gold[disabled] { opacity: .55; cursor: default; } /* a filled primary on a phone is full width inside the gutter and 48 tall; .btn-block asks for that everywhere */ .btn-block { display: flex !important; width: 100%; align-items: center; justify-content: center; gap: 10px; min-height: 48px; } .btn-sm { padding: 0 14px !important; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-label) !important; border-radius: var(--r-sm); } .btn-primary .mx-ic, .btn-ghost .mx-ic, .btn-gold .mx-ic, .btn-ghost-ink .mx-ic { flex: none; } @media (max-width: 500px) { .btn-primary, .btn-ghost, .btn-gold, .btn-ghost-ink { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } .btn-sm { min-height: 36px; } /* a full-width label too long for a small phone ("GET NOTIFIED WHEN APPLICATIONS OPEN" at 320) takes two balanced lines instead of being cut at both edges; a label that fits stays on one line */ .btn-block { white-space: normal; text-wrap: balance; line-height: 18px; padding-left: 16px; padding-right: 16px; } } /* card: a cream sheet on --r-lg with the soft hairline a rounded shape takes (ROUND3-RULES §2), no shadow */ .card { background: var(--card); border: 1px solid var(--hair-soft); border-radius: var(--r-lg); box-sizing: border-box; } .card-ink { background: var(--ink); color: var(--cream); border: 1px solid rgba(201,169,98,.55); border-radius: var(--r-lg); box-sizing: border-box; } /* hairlines */ .hairline { height: 1px; background: var(--hair); } .hairline-ink { height: 1px; background: var(--hair-ink-soft); } .rule-gold { display: inline-block; width: 28px; height: 1px; background: var(--gold); } .rule-crimson { display: inline-block; width: 34px; height: 1px; background: var(--crimson); } .dot-gold { display: inline-block; width: 6px; height: 6px; background: var(--gold); } /* toggle — 34×18 rectangle, 14px square knob, crimson when on */ .toggle { position: relative; display: inline-block; width: 34px; height: 18px; background: rgba(25,21,18,.25); cursor: pointer; flex: none; } .toggle { transition: background-color var(--t-quick) var(--ease); } .toggle::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--cream); transition: transform var(--t-quick) var(--ease); } .toggle.on { background: var(--crimson); } .toggle.on::after { transform: translateX(16px); } /* chips: capsules (a tappable filter or toggle, ROUND3-RULES §2), hairline, crimson when selected (newsletter topics, specialties): 14px sentence case, 36 tall */ .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid rgba(25,21,18,.22); border-radius: var(--r-capsule); background: transparent; color: var(--ink); font: 500 var(--fs-2nd) var(--font-ui); letter-spacing: 0; text-transform: none; cursor: pointer; white-space: nowrap; box-sizing: border-box; } .chip { transition: background-color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease); } .chip.on { border-color: var(--crimson); background: var(--crimson); color: var(--cream); } @media (hover: hover) { .chip:not(.on):hover { border-color: var(--ink); } } /* inputs — card cream fill, hairline, crimson focus outline (Auth / Profile vocabulary) */ .input { border: 1px solid rgba(25,21,18,.25); background: #fdfaf3; padding: 13px 14px; font: var(--fs-body) var(--font-ui); color: var(--ink); width: 100%; box-sizing: border-box; border-radius: var(--r-sm); min-height: 52px; } textarea.input { min-height: 104px; line-height: 1.5; } .input { transition: border-color var(--t-quick) var(--ease); } @media (hover: hover) { .input:hover { border-color: rgba(25,21,18,.45); } } .input:focus { outline: 1px solid var(--crimson); outline-offset: -1px; } .label { font: 600 var(--fs-label) var(--font-ui); letter-spacing: var(--ls-caps); color: var(--soft); text-transform: uppercase; } /* empty-state voice: one line (display-classed text under 22 px, so --font-ui 600 upright, ROUND3-RULES §3.1), one sentence, at most one ghost action (compact) */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px 30px; } .empty-line { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-title3); letter-spacing: var(--ls-title3); line-height: 1.3; } .empty-why { font-size: var(--fs-2nd); color: var(--soft); max-width: 400px; line-height: 1.45; } /* striped placeholder (spots awaiting real content) */ .placeholder { border: 1px dashed rgba(25,21,18,.3); background: repeating-linear-gradient(45deg, rgba(25,21,18,.05) 0 8px, transparent 8px 16px); display: flex; align-items: center; justify-content: center; font: 600 8.5px var(--font-mono); color: var(--soft); } /* ---- PROJECT ACCENTS (--proj-*, round 3 walkthrough H9, Alen 30 Sept: "give the Accelerator, the Gala Evening and Plexus (each project) its own little colour, obviously it's all ours"). One small accent per project, from the Med&X family: Plexus keeps the house crimson, the Gala takes an antique gold, the Accelerator a copper, the Forum and Building Bridges the green and blue slates of the shared --cat-* set, Mentorship a muted plum. Used for a dot, an icon and a quiet action label, never for a surface. Three steps each: --proj- on cream and card paper (text and icons): AA, 5.2 to 7.4 on #f7f1e6, 5.6 to 8.0 on #fdfaf3 --proj--lt on ink, dark glass and the scrim of a photo: AA, 8.4 to 10.0 on #191512 --proj--tint a soft wash behind a pressed row or a mark, never behind text that needs the contrast above Measured ratios: round3/walk-2026-09-30/projects/contrast.txt */ :root { --proj-plexus: #9b1b22; --proj-plexus-lt: #ec9a9d; --proj-plexus-tint: rgba(155, 27, 34, .07); --proj-gala: #806020; --proj-gala-lt: #d9bd7f; --proj-gala-tint: rgba(128, 96, 32, .08); --proj-accelerator: #9a4f14; --proj-accelerator-lt: #e8a868; --proj-accelerator-tint: rgba(154, 79, 20, .08); --proj-forum: #3f5d52; --proj-forum-lt: #94bdac; --proj-forum-tint: rgba(63, 93, 82, .08); --proj-bridges: #355070; --proj-bridges-lt: #9bb8d8; --proj-bridges-tint: rgba(53, 80, 112, .08); --proj-mentorship: #6c4668; --proj-mentorship-lt: #d3a6cf; --proj-mentorship-tint: rgba(108, 70, 104, .08); }