/* ========================================================================== Design tokens — Frisson palette First applied: M10A side-experiment 2026-05-12. Beta pass — M12 will polish. ========================================================================== */ :root { /* ========================================================================== SURFACES — Frisson Noir (deep night sky) — M12 ADR-169 palette pivot. Replaces the cream-* lineage. Token NAMES kept identical so every var() reference across the codebase keeps resolving — only VALUES change. cream-base → ink (deepest), cream-surface → midnight (cards), cream-mist/sunken → navy (section headers / wells). Navy stays for emphasis; visual drama now comes from PLUM accents. */ --cream-base: #0a0d1e; /* App bg — deepest ink (was #f4f1ea) */ --cream-base-rgb: 10, 13, 30; /* RGB triplet for translucent dark surfaces (was Frost cream) */ --cream-surface: #13182f; /* Cards / modals / popovers (was #fbfaf6) */ --cream-surface-rgb: 19, 24, 47; /* RGB triplet — panel/modal/popup fills w/ opacity (was Frost #fbfaf6) */ --cream-mist: #1c2547; /* Section header bg — admin table headers (was #eef0ec) */ --cream-sunken: #1c2547; /* Inputs / wells (was #ecebe2) */ --cream-lifted: #191f3c; /* Lifted card on a modal surface — between surface and sunken (designer echo-modal handoff, ADR-236) */ --navy-deep: #0a0d1e; /* Was #0d2238 — emphasis now via plum accents */ --navy-soft: #13182f; /* Was #1f2e44 — subtle elevated dark surface */ /* NEW — plum surface family. BG ONLY, never use as text/icon color. */ --surface-plum: #2a1f4d; --surface-plum-lift: #3d2b5e; /* Text — same role names; values flip for dark surface */ --text-dark: #eef0fa; /* Primary text (~17:1 on midnight) (was #1c2532) */ --text-muted: #bcc4dc; /* Secondary text (~9:1) (was #5a6478) */ /* Field labels — soft teal (muted+teal mix) so caps labels get a quiet identity instead of blending into grey (Petřin pokyn 2026-05-27; this REVERSES the old HARD RULE 9 "labels never teal"). One token → every .field__label across forms/dialogs/auth changes from one place. 2026-06-03: a brief app-wide gold retone was rolled back — gold belongs to LOCATIONS only, via the dedicated --location-color token below. */ --label-color: color-mix(in srgb, var(--accent-turquoise) 50%, var(--text-muted)); /* Locations — SOFT GOLD (muted+copper mix, 50 %, Petřin výběr 2026-06-03): the location caps (feed where / popup place + meta-place / concert location / mobile concert subtitle + gathering header location) get their OWN token, split from --label-color (Petřin pokyn — gold on form field labels was an accident). Gold ties places to the copper landmark family and stops fighting the teal song tag (--song-name). 2026-06-03 live tune: copper-bright, postupně 45 % → 35 % — lighter + progressively less saturated per Petřin pokyn („odbarvit a zesvětlit", pak „ještě odbarvit"). */ --location-color: color-mix(in srgb, var(--accent-copper-bright) 35%, var(--text-muted)); --continent-label: #7b7f86; /* Muted warm grey for world-view continent labels on the LIGHT Voyager map (continentLabels.js). Own token because UI text tokens are tuned for the dark chrome; this echoes Voyager's native label grey. */ --continent-label-halo: #ffffff; /* White lift behind continent labels so they stay legible over land or sea. */ --map-ocean-tint: #cdeaf2; /* Voyager ocean tint — fills any 1px gap the tile layer leaves so it blends with the sea (see .leaflet-container). */ --text-light: #eef0fa; /* Text on dark / on copper button (was #f4f1ea) */ --text-light-rgb: 238, 240, 250; /* RGB triplet for translucent light rims/rings */ --text-light-muted: #aab3d2; /* Tertiary text (~6.5:1) — lightened from #8c95b8 (Petra 2026-06-04: the token kept reading "on the edge"; tertiary may step back but must never be borderline-legible). NOT for placeholders. */ --text-ai-note: #8c95b8; /* M14 — deliberate low-contrast "whisper" EXCLUSIVELY for the always-visible AI provenance line (Petřin pokyn 2026-06-05). NEVER for content/labels/meta — ui-standards HARD RULE 14. */ --text-tombstone: #ccd3e6; /* M18.X-ECHO-DELETE-RULES — the founding-echo tombstone notice ("Original echo was deleted"). Muted-but-READABLE by design (scope: vlastní token, ne --text-muted; one step brighter than secondary so the italic line never reads borderline). */ /* Single source of truth for ALL input/textarea placeholder text (2026-06-04 placeholder audit). One token, one global rule — no per-component placeholder colors. #b0b8d2 ≈ 7.6:1 on input wells (--cream-sunken) — Petra 2026-06-04: stepped down from #bcc4dc (8.6:1), variant B of the rendered comparison (_preview/_placeholder_variants.html). */ --text-placeholder: #b0b8d2; /* Text ON full bright-accent buttons (violet/turquoise/copper/mine/songs). Dark ink — white (--text-light) disappears on Noir's luminous accents. Use ONLY on solid bright fills; rgba washes + dark/deep accents keep white. */ --text-on-accent: var(--surface-ink); /* Read-only / non-editable VALUE text (e.g. fixed location in Add a Moment). Clearly greyer than --text-dark so it reads as "display, not a field you type into" — --text-muted was too close to white (Petřin pokyn 2026-05-25, reads white next to the white title). Semantic alias — retune here, never hardcode the grey at call sites. */ --text-readonly: var(--text-light-muted); /* Brand accents — Frisson Noir DNA */ /* Teal (was turquoise #0d7575) — Save CTA, concerts, links, focus, primary brand */ --accent-turquoise: #4dd5cf; --accent-turquoise-bright: #7af0e8; /* Vivid splash / hover (was #3dd6c8) */ --accent-turquoise-deep: #1f8b83; /* Gradient bottom stop / pressed-bg (Noir deep teal, was Frost #095e5e) */ --accent-turquoise-tint: rgba(77, 213, 207, 0.14); /* Selected-state bg tint */ --accent-turquoise-rgb: 77, 213, 207; /* RGB triplet for rgba() — recomputed for Noir */ /* Song name — the ONE token for a song TITLE + its tag chrome (left rule, note glyph, song filter pill + result line, profile recent-echo eyebrow) across the feed / desktop popup / mobile sheet. Petra picked the luminous teal-bright (2026-06-03) after the original pale azure read flat („fádní") as small text on noir. The soft-gold feed LOCATION label (--location-color) stays far quieter, so the two don't collide. Retune song colour HERE only. */ --song-name: var(--accent-turquoise-bright); --song-name-rgb: var(--accent-turquoise-rgb); /* Gold (was copper #a06a2a) — landmarks/POI, system actions, "Mark as test" warn */ --accent-copper: #d4a04a; --accent-copper-bright: #efbe6d; /* Hover / warm highlight (was #c98b4b) */ --accent-copper-deep: #8a6a2a; /* M12 Noir PR5 — landmark teardrop body-shade bottom + cluster inner */ --accent-copper-hover: #8b5a20; /* Darkened copper for solid .auth-btn / auth submit :hover (was a duplicated hardcoded hex) */ --accent-copper-rgb: 212, 160, 74; /* RGB triplet for rgba() — recomputed for Noir */ /* M11.X-MARKERS (ADR-121): --accent-rust decommissioned — concert markers use --accent-turquoise (mapa); concert titles use --accent-violet (text). */ /* Iris (was violet #5a3a78) — Add/Create CTA, tour chips, gathering glyph */ --accent-violet: #ad77f2; /* Saturated iris — S~83% (was dusty #b89bdf → #a87fe8 still washed across chips/glyphs, Petřin pokyn 2026-05-27). Chip fill (ADR-140), marker fill (fanMomentSvg), aurora gradient stops. */ --accent-violet-soft: #cba5fb; /* Label / text foreground variant — between base and -bright. Used as `color:` on noir surfaces so labels/icons don't read dim (Petřin pokyn 2026-05-28). */ --accent-violet-soft-rgb: 203, 165, 251; /* RGB triplet for rgba() */ --accent-violet-bright: #d8b8ff; /* Highlight, badge (was #7d5fb8) */ --accent-violet-deep: #5a3f7a; /* NEW — gradient bottom stop */ /* Foreign-fan nick — ONE token for every foreign-nick surface: feed title, popup nick / by-nick / preview author, composer gathering author, confirm dialog author, moments-nearby eyebrow, mobile gathering header / row / detail authors. The viewer's OWN nick stays --accent-mine (magenta) via the --mine overrides. THIS token is the one safe experiment knob for the nick tone — every consumer below is verified nick TEXT only (event/concert feed titles override to --text-dark, so they never inherit this). Petřin pick 2026-06-03: light luminous lavender, a step above --accent-violet-bright. Earlier same-day tries: grey-violet mix (dusty), bright iris (loud), moon-muted + mist neutrals (weird). Retune here only. */ --nick-color: #e4c9ff; --accent-violet-rgb: 173, 119, 242; /* RGB triplet for rgba() — synced w/ #ad77f2 (Concert chip per ADR-140) */ /* M12 ADR-169 — NEW magenta family. "Your moment" identity (--accent-mine). Frost flipped this from rust → Noir magenta. Distinct from the two reds: cihla --danger (delete/ban + cancelled) reads pinkish-red, magenta --accent-mine reads pink. */ --accent-mine: #eb8aae; /* Magenta base — own-moment SVG/cluster fill flip */ --accent-mine-bright: #f0a5c3; /* Brighter — gradient top stop + hover (was #c41a0e) */ --accent-mine-deep: #7d2050; /* Deeper — gradient bottom stop (was #6b0700) */ --accent-mine-wash: rgba(235, 138, 174, 0.14); /* List item bg tint */ --accent-mine-rgb: 235, 138, 174; /* RGB triplet for rgba() with variable alpha */ /* Designer's canonical "clean" magenta (frisson-palette.html `--magenta`). Deeper than the light --accent-mine pink. Already used raw by the marker sprite dots (assets/markers-sprite.svg) — promoted to a first-class token so icons + the favourited heart share it (Petřin pokyn 2026-05-25). */ --accent-magenta: #c44a78; --accent-magenta-rgb: 196, 74, 120; /* M13Q — "lifted" magenta for like-count TEXT on the Noir surface. The base --accent-magenta reads dim as small text on dark (same problem --accent-violet-soft solves for violet text). Used ONLY for the like counter digits; the heart glyph keeps --accent-magenta + the #heart-shade fill. Shared across the event like (.popup__save / .rsvp__heart / .fm-rsvp__like) and the per-Echo like (echoLike.js) so both like counters read alike (Petřin pokyn 2026-06-01). Name + value = the designer's canonical palette (docs/handoff/frisson-handoff/frisson-palette.html). Mirrors the --accent-mine pink value but is a DISTINCT semantic token (like affinity, not own-moment identity). */ --magentaLift: #eb8aae; /* Online entity — azure (M12.X-DETAIL-POPUP, Petřin pokyn 2026-05-27). Online events shared violet with moments → confusing. Azure is the one genuinely free, distinct hue (broadcast / screen semantic), clearly apart from concert teal + moment violet + LIVE mint, so users always recognise what they're clicking. Sits at ~205° between teal + violet on the wheel = harmonises with both cool accents while owning its identity. */ --accent-online: #5fb0e8; /* Azure base — chip / RSVP / watch / bubble */ --accent-online-bright: #82c2f2; /* Hover / highlight */ /* (-soft #a3d2f7 text variant removed 2026-06-03 — its only consumers were the song-tag surfaces, which moved to --song-name (teal-bright, Petřin výběr); no azure-soft call sites remain.) */ --accent-online-deep: #2f6fa8; /* Gradient bottom stop / pressed-bg */ --accent-online-rgb: 95, 176, 232; /* RGB triplet for rgba() */ /* Facebook platform tone — Community hub row tint (ADR-252, designer handoff value adopted verbatim per Petřino rozhodnutí 2026-06-04). Deliberately NOT the azure --accent-online family: azure = online events world; this is a platform identity tint only. */ --platform-facebook: #8fb4f0; /* M13.X-PLATFORM-UNIFY (ADR-255) — ONE colour per platform, app-wide. Source of truth = the Community hub handoff tones (community-hub.css §"platform tones"), promoted from hub-local rules to tokens so every surface (hub, popup + sheet discussion rows, online detail/create, profile + Settings chips, list CTA) reads the same identity. Default = nearest Noir tone, but NOT palette-at-all-costs (Petřin pokyn 2026-06-04 večer „nehodí se na všechno"): where the brand identity needs it, a tuned brand value is fine (facebook sky blue; instagram = pink→blue gradient on the glyph itself, see platformIcons.js). Blue brands (telegram/zoom) share the facebook sky blue. */ --platform-reddit: var(--accent-turquoise); --platform-discord: var(--accent-violet-soft); --platform-forum: var(--accent-copper-bright); --platform-youtube: var(--accent-mine-bright); --platform-telegram: var(--platform-facebook); --platform-zoom: var(--platform-facebook); --platform-spotify: var(--success); --platform-twitch: var(--accent-violet); /* Instagram glyph = brand pink→blue gradient (platformIcons instagramSvg, mine→violet→online tones). This token only tints the glyph's SURROUNDINGS (tile wash, border, CAPS label) — light pink so the small label stays readable on noir (flat --accent-magenta read „moc tmavý"). */ --platform-instagram: var(--magentaLift); --platform-x: var(--text-light); --platform-tiktok: var(--accent-turquoise-bright); --platform-web: var(--text-muted); /* Status — outside brand palette, softened for dark-bg readability */ --success: #4dd5a8; /* Mint, teal-family green (was #2d8a5c) */ --success-rgb: 77, 213, 168; /* RGB triplet — status-dot glow */ --danger: #d96b6b; /* Softened brick — delete / ban FILL / border / button bg (was #b83838) */ --danger-rgb: 217, 107, 107; /* RGB triplet for rgba() with variable alpha */ /* Danger TEXT/icon foreground on dark (HARD RULE 13, Petřin pokyn 2026-05-31). Base --danger is a button-FILL hue -> as TEXT on noir it reads dim/disabled (~4.4:1 on plum). Lighter tint of the SAME brick hue, AA 5.1-7.3:1 on every noir surface. Mirrors --accent-violet-soft. Use as `color:` only — NEVER as background (buttons/fills/borders keep --danger). */ --danger-text: #f08a8a; --danger-deep: #a73030; /* LEGACY Frost text-on-light — do NOT use as text on noir (~2.2:1, vanishes). Kept for any light-surface remnant. */ --danger-bright: #e88888; /* Gradient end stop for LIVE banner (was #a73030) */ --danger-soft: rgba(217, 107, 107, 0.10); /* On-brand danger wash — was an undefined token silently falling back to off-brand rgba(180,35,35,…) at every callsite (M12D.X-REPORT-INDICATORS) */ --warning: #d4a04a; /* Gold — same family as copper (was #b8862d) */ --warning-rgb: 212, 160, 74; /* RGB triplet — status-dot glow */ /* Event status palette (M12 Noir PR4) — extracted from hardcoded hex in the feed-list status dots so the orange/green/grey reads as tokens, not magic numbers. Orange = scheduled, green = next/live, grey = past. */ --status-upcoming: #e8821f; --status-upcoming-rgb: 232, 130, 31; --status-next: #2e8a4f; --status-next-rgb: 46, 138, 79; --status-past: #9aa3b5; --status-past-rgb: 154, 163, 181; /* Test-data flag — standard full gold (#d4a04a = --accent-copper) when ON, grey (--text-muted) when OFF (Petřin pokyn 2026-05-24, flask in kebab). */ --test-data: var(--accent-copper); /* M11L (ADR-151) cancellation red — M12 ADR-169: UNIFIED with --danger (Petřin pokyn 2026-05-24). Zrušený koncert = stejná cihlová červená jako smazat/ban; rozliší se TREATMENTEM ne odstínem: výraznější strikethrough + danger halo = "NEKONALO se / pozor", musí zůstat dobře vidět. Token name ponechán jako sémantický alias (~50 odkazů + čitelnost záměru, lze později znovu rozdělit). Used pro CANCELLED badge / banner / row tint / chip. */ --cancelled-red: var(--danger); --cancelled-red-rgb: var(--danger-rgb); /* Borders — inverted alpha to read on dark */ --border-on-light: rgba(238, 240, 250, 0.16); --border-strong-light: rgba(238, 240, 250, 0.32); --border-on-light-strong-brand: rgba(77, 213, 207, 0.42); /* Teal-tinted divider for writing-mode kontexty (vertical rail labels) */ --border-on-dark: rgba(238, 240, 250, 0.16); /* Shape scale — unchanged */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* Elevation — deeper shadows for dark surface */ --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(238, 240, 250, 0.06); --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(238, 240, 250, 0.04); --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.50); /* Photon results, suggestion popups */ --shadow-overlay-bar: 0 4px 14px rgba(0, 0, 0, 0.40); /* Fixed overlay action bars */ /* M10B Stage 2 review (STYLE-010) — vermilion used by the GPS pin preview rectangle on the map. Semantic name so map.js can read it via getComputedStyle. Bumped lighter (vermilion) for dark-bg readability. */ --preview-boundary: #f08570; /* ====== Frisson Noir atmospheric tokens (M12 ADR-169) ====== Replaces Frost mesh. Same token NAMES so radial-gradient rules that reference these continue to work — only values change to Noir. */ /* Atmospheric mesh washes — radial-gradient stops, ~7-10% opacity */ --frost-wash-teal: rgba(77, 213, 207, 0.08); --frost-wash-plum: rgba(var(--accent-violet-rgb), 0.10); --frost-wash-copper: rgba(212, 160, 74, 0.07); /* Halo glows — single layer perf-friendly (žádný 4-stack) */ --halo-teal: 0 0 24px rgba(77, 213, 207, 0.30); --halo-plum: 0 0 24px rgba(var(--accent-violet-rgb), 0.32); --halo-multi: 0 0 32px rgba(var(--accent-violet-rgb), 0.20), 0 0 16px rgba(77, 213, 207, 0.18); /* NEW — danger halo for cancelled / warning surfaces (Petřin pokyn 2026-05-24: zrušený koncert = strike + danger halo, "NEKONALO se", musí být dobře vidět). */ --halo-danger: 0 0 24px rgba(217, 107, 107, 0.42); /* NEW — live indicator (mint, distinct from --success where both appear). Used for LIVE banner pill on online streams. */ --live: #4dd5a8; --live-rgb: 77, 213, 168; --live-bright: #6deec0; --live-wash: rgba(77, 213, 168, 0.16); /* NEW — glass tokens for floating panels on Noir surfaces. Used by hero strip, app footer pill, side panel chrome. */ --glass-strong: rgba(19, 24, 47, 0.85); --glass-soft: rgba(19, 24, 47, 0.66); /* `--opacity-self-declared` token removed (Petřin pokyn 2026-05-25): the 60 % dim on anonymous self-declared flags was never wanted — on the dark Noir surface it read as a "grayed / dead" flag rather than a soft signal. Anon flags now render at full opacity like registered ones; the "self-declared, anonymous" tooltip stays as the only disclosure cue. Reverses ADR-070 Rozhodnutí 2 (visual distinction). */ /* Typography — unified system (Cormorant Garamond display + Manrope body). Pairing works on dark; M14 launch = self-host with latin-only subset. */ --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif; --font-body: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Song "voice" — JetBrains Mono 600 (Petřin výběr 2026-06-03 — „tracklist" mono: maximum contrast against both the Caveat handwriting and the Cormorant nick, so nothing competes; reads like a terminal track listing in the teal --song-name). Earlier same-day tries: Forum (weak/jagged), Cardo (fought the handwriting), Domine (good but mono won). ONLY the 600 cut is loaded; used solely via .echo-song (the song tag). */ --font-song: "JetBrains Mono", "Cascadia Code", Consolas, monospace; /* ====== MOMENT CONTENT typography (user-WRITTEN moments/pins) — single source of truth. Retune the moment "voice" from HERE; call sites never hardcode size/weight/line-height. (M12 experiment 2026-05-27, Petřin nápad.) Two voices, length-driven (threshold = MOMENT_HAND_MAX_CHARS in textExpandable.js): short = handwriting (Caveat, reads as "a fan wrote this"); long = calm roman serif (Lora, comfortable for a long block). Author/date/More chrome always stays Manrope. ====== */ --font-moment: "Caveat", "Segoe Print", "Comic Sans MS", cursive; --font-moment-long: "Lora", Georgia, serif; /* Handwriting has a small x-height → sized up vs body; same size in popup AND side-panel list (Petřin pokyn 2026-05-27 „dej to na stejnou jako popup"). */ --fs-moment-hand: 1.35rem; --lh-moment-hand: 1.25; --fw-moment-hand: 500; /* Roman fallback — calm long-form reading, deliberately quieter/smaller than the handwriting (Petřin pokyn 2026-05-27 „ten roman je velký"). */ --fs-moment-roman: 0.82rem; --lh-moment-roman: 1.45; /* ====== ALIASES — for asset CSS (icons.css, markers, components.css) ====== Map asset-CSS token names onto canonical tokens. Single source of truth = the canonical token on the right; asset CSS keeps working without renaming. */ --surface-ink: var(--cream-base); --surface-midnight: var(--cream-surface); --surface-navy: var(--cream-mist); --text-moon: var(--text-dark); --text-moon-muted: var(--text-muted); --text-mist: var(--text-light-muted); --hairline-dark: var(--border-on-light); --hairline-dark-lo: rgba(238, 240, 250, 0.08); /* M13.X-MEDALLION — the faint card-on-panel surface tint already used raw across M12 noir cards (e.g. POI/profile cards ~.04). Tokenised so the medallion + future cards share one value. */ --surface-tint: rgba(238, 240, 250, 0.03); --surface-tint-hi: rgba(238, 240, 250, 0.05); --accent-violet-mid: var(--accent-violet); /* iris mid is the default in Noir */ /* ====== Songs accent — Noir PR3 (Petřin výběr B2 2026-05-24) ====== Dedicated amethyst hue for the 🎵 Songs pebble (music / future M13 community-ranked Tarja tracks). Distinct from every role color: teal=Save, iris=Add/community, copper=landmark/system, magenta=mine, mint=live. Was weakly teal (read as navy) — now its own luminous purple. */ --accent-songs: #b588ff; --accent-songs-rgb: 181, 136, 255; /* ========================================================================== TYPE & SPACING SCALE — Noir PR3 (per handoff tokens-type-spacing.css). Atomic tokens + 3 composite text-role tokens. New primitive classes use these; legacy inline font-size migration is an opportunistic follow-up. ⚠️ Composite `font:` shorthand RESETS font-style → never use a composite where italic Cormorant is wanted; expand longhand instead. ========================================================================== */ /* Font size — 8 atomic tokens (consolidates ~20 inline values, drift ≤1px) */ --fs-3xs: 0.625rem; /* 10px — feed location caps (toned below the nick, M13.X-PLACE-NAME) */ --fs-2xs: 0.6875rem; /* 11px — BETA pill, micro badge */ --fs-xs: 0.75rem; /* 12px — uppercase chip labels, meta */ --fs-sm: 0.8125rem; /* 13px — caption, secondary label */ --fs-md: 0.875rem; /* 14px — DEFAULT small UI body */ --fs-base: 1rem; /* 16px — body paragraph */ --fs-lg: 1.125rem; /* 18px — card title, sub-heading */ --fs-xl: 1.375rem; /* 22px — modal title (h3) */ /* NO --fs-2xl / --fs-3xl — display/hero sizes stay responsive (clamp/media). */ /* Title tiers (M13.X-TITLE-TIERS, Petřin pokyn 2026-06-03 — supersedes the "one size for every dialog" note in ADR-179). Content modals keep the big display title; quick confirm/reason/ban/delete prompts drop one step. */ --fs-modal-title: 2.1rem; /* ~33.6px — content modals & forms; restores the pre-ADR-179 Add-moment/Echo title size that the M12 PR6 title-unify shrank to 1.55rem (M13.X-TITLE-TIERS) */ --fs-dialog-title: var(--fs-xl); /* 22px — quick confirm/reason/ban/delete dialogs */ /* Spacing — 4px base */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Line-height */ --lh-tight: 1.15; /* display */ --lh-snug: 1.3; /* headings */ --lh-normal: 1.5; /* body (default) */ --lh-relaxed: 1.7; /* long-form */ /* Weight */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Letter-spacing */ --ls-tight: -0.01em; /* Cormorant display */ --ls-normal: 0; /* body */ --ls-wide: 0.02em; /* small caps body */ --ls-wider: 0.08em; /* label */ --ls-loose: 0.18em; /* uppercase chip */ --ls-widest: 0.22em; /* micro labels */ /* Composite text-role tokens — 3 most stable patterns only. All Manrope (no italic) so the `font:` shorthand is safe. Italic Cormorant = longhand. */ --text-eyebrow: var(--fw-bold) var(--fs-2xs)/var(--lh-tight) var(--font-body); --text-body: var(--fw-regular) var(--fs-md)/var(--lh-normal) var(--font-body); --text-h-section: var(--fw-bold) var(--fs-sm)/var(--lh-snug) var(--font-body); } /* ========================================================================== Frisson Map — base styles (mobile-first) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* M-UX-AUDIT-004 (M10 closure audit 2026-05-15) per nový P-032 (mobile): eliminate iOS Safari 300ms tap delay across ALL interactive elements. `touch-action: manipulation` disables double-tap zoom + delay without disabling pinch-zoom (which user-scalable=yes preserves). Map gestures live on the Leaflet container which sets its own touch-action, so this global rule doesn't interfere with pan/zoom on the map itself. */ button, [role="button"], a, summary, .leaflet-control a, input[type="button"], input[type="submit"], input[type="reset"] { touch-action: manipulation; } html, body { height: 100dvh; font-family: var(--font-body); background: var(--cream-base); color: var(--text-dark); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden; position: relative; } /* M12 rollout — Cormorant Garamond pro headlines (h1-h3) + identification labels v komponentách. Specificky komponenty mohou override (např. small UI labels) přes class. Light weight (300) pro hero ≥ 24px size minimum, medium (500) pro section h2, semibold (600) pro identifier labels. */ h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.02em; } /* Mapa = celý viewport pozadí. Map-first UX per Petřin pokyn 2026-05-14 — grid layout (dashboard styl) bylo "vykreslené velké panely nad mapou" a Petra to vrátila zpět na floating overlay pattern. Controls jsou floating absolute, s jasně oddělenými zónami (top row clusters + sidebar pod nimi). */ #map { position: absolute; inset: 0; width: 100%; height: 100%; /* Paint Voyager ocean tint as the first frame before Leaflet's `.leaflet-container` class lands. Matches .leaflet-container below so any pre-tile flash blends with the rendered map. */ background: #cdeaf2; } /* Leaflet container background fills any gap the rendered tile layer leaves behind: – the off-tile band above ~85° N (Web Mercator can't render the poles), and – the brief window during a zoom transition where the new tile set hasn't landed yet. M11D ADR-081 Phase 1 originally switched this to atmospheric navy (#1a2a3a) for Frost DNA. Petřin pokyn 2026-05-19 wieczór reversed that priority: the dynamic-minZoom exact-fit (map.js `_computeFillMinZoom`) tries to leave zero band, but subpixel rounding can expose a 1px strip — that strip MUST blend with the ocean ("musí splývat s mapou, tudíž ta modra barva mapy"). The Voyager ocean tint #cdeaf2 makes any residual gap invisible. */ .leaflet-container { background: var(--map-ocean-tint); } /* World-view continent labels (continentLabels.js) — English names drawn over the label-free Voyager base, styled to echo Voyager's own continent type: muted grey, letter-spaced uppercase Cormorant with a soft white halo so they stay legible over land or sea. Override Leaflet's default div-icon chrome (white box + border) and center the text on its lat/lng anchor. */ .continent-label.leaflet-div-icon, .continent-label { width: auto; height: auto; background: transparent; border: 0; box-shadow: none; white-space: nowrap; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; letter-spacing: 3px; text-transform: uppercase; color: var(--continent-label); text-shadow: 0 0 3px var(--continent-label-halo), 0 0 3px var(--continent-label-halo), 0 0 6px var(--continent-label-halo); pointer-events: none; transform: translate(-50%, -50%); } /* Backend health indicator — colored traffic-light DOT (Petřin pokyn 2026-05-14: "dej to backend is alive úplně pryč, jenom puntík — zelený když je online, oranžový když se načítá, červený když failed"). No text, no pill chrome — just a 16 px dot with a soft cream halo so it reads against any tile color. The aria-label (set via JS or data-i18n-aria-label) carries the text for screen readers and as a native title tooltip. */ .status { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--warning); /* M12 Noir PR4 (Petřin pokyn 2026-05-24 — "černý border pryč u všech indikátorů") — coloured glow per state, NO cream ring. */ box-shadow: 0 0 8px 2px rgba(var(--warning-rgb), 0.55); /* The element holds no visible text — kill any inherited typography so accidental text doesn't expand the box. */ font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden; transition: background 0.25s ease, box-shadow 0.25s ease; cursor: help; } .status--checking { background: var(--warning); box-shadow: 0 0 8px 2px rgba(var(--warning-rgb), 0.55); animation: status-dot-pulse 1.4s ease-in-out infinite; } .status--ok { background: var(--success); /* Glow must follow the dot colour — base .status sets a warning-orange glow that otherwise lingered behind the green/red dots (Petřin postřeh 2026-05-24: "zelený puntík, ale oranžový glow"). */ box-shadow: 0 0 8px 2px rgba(var(--success-rgb), 0.55); animation: none; } .status--error { background: var(--danger); box-shadow: 0 0 8px 2px rgba(var(--danger-rgb), 0.55); animation: status-dot-pulse 0.9s ease-in-out infinite; } @keyframes status-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Floating placement: top-left, vertically centered against the search bar (top: 0.9 rem + ~13 px = vertical middle of the 42 px tall input). Horizontally right of the 320 px search bar with a 0.75 rem gap. */ .status--floating { position: absolute; top: calc(max(0.9rem, env(safe-area-inset-top)) + 13px); left: calc(max(0.75rem, env(safe-area-inset-left)) + 320px + 0.75rem); z-index: 1000; pointer-events: auto; } @media (max-width: 767px) { /* Mobile (~360 px): tuck the dot to the right edge of the viewport, vertically aligned with the search bar — no room next to it. */ .status--floating { top: calc(max(0.9rem, env(safe-area-inset-top)) + 13px); left: auto; right: max(0.9rem, env(safe-area-inset-right)); } /* Petřin postřeh 2026-05-16 odp. — Leaflet zoom +/− tlačítka jsou na mobile redundantní (pinch zoom funguje nativně) a minus byl navíc zakrýtý footer chromem. Skrýt celý zoom control < 768 px. */ .leaflet-control-zoom { display: none !important; } } /* ========================================================================== M11.X-MODAL-CENTERING — master rule pro VŠECHNY native elementy. Per P-060: native .showModal() polozí dialog do top-layer + UA stylesheet ho automaticky centruje. ALE fallback path (setAttribute("open","") pro starší WebKit) nebo dialog v non-modal módu UA centering ztratí → render jako block na top-left. Tahle belt-and-suspenders rule explicitně vynutí center positioning bez ohledu na open path. Per-dialog rules dál override width/height/styling. Specificity: low (0,0,1) aby každý class-level override (např. .pin-privacy-chooser-dialog s vlastní záměrnou bottom-left pozicí) wins. ========================================================================== */ dialog { position: fixed; inset: 0; margin: auto; } /* ========================================================================== Pin form modal — uses the native element. ========================================================================== */ dialog#pin-form-dialog { border: 1px solid rgba(var(--accent-turquoise-rgb), 0.15); /* M12 PR6 Fáze-0 shell parity — kanonický dialog radius (ADR-179), byl 20px literál. */ border-radius: var(--radius-lg); padding: 0; max-width: 95vw; /* M13.X-ECHO-FLOW Fáze 2 (Petřin pokyn 2026-06-03) — the composer now holds the song rating, grouping cards and the location picker + mini-map; the 440px small-form default read needlessly narrow on desktop. Bumped to the 560px form tier (= .online-event-create-dialog, ui-standards §2). Mobile unaffected (95vw cap / fullscreen sheet). */ width: 560px; max-height: 90dvh; /* UA default `dialog { overflow: auto }` rendered a second scrollbar next to `.pin-form__body`'s own overflow-y:auto in anonymous mode (= longer form variant — extra .pin-form__anon-nationality block). Petřin postřeh 2026-05-19 odp. „dva scrollbary v Add Pin". Dialog is a flex-column shell delegated to #pin-form which manages its own internal scrolling region; the outer overflow is redundant and visually noisy. `hidden` also makes the 20 px border-radius correctly clip the form's rounded corners. */ overflow: hidden; /* Atmosphere: cream surface with subtle turquoise + violet radial tints in opposite corners — evokes the painted "splash" feel of Frisson art. */ background: radial-gradient(circle at 100% 0%, rgba(var(--accent-turquoise-rgb), 0.08), transparent 55%), radial-gradient(circle at 0% 100%, rgba(var(--accent-violet-rgb), 0.06), transparent 55%), var(--cream-surface); color: var(--text-dark); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 60px 120px rgba(var(--accent-turquoise-rgb), 0.10), 0 0 0 1px rgba(var(--accent-turquoise-rgb), 0.04); } dialog#pin-form-dialog::backdrop { /* Night-sky drama: dark navy with a faint turquoise vignette at center. */ background: radial-gradient(circle at center, rgba(var(--accent-turquoise-rgb), 0.18) 0%, transparent 50%), radial-gradient(circle at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.78) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } #pin-form { /* AI-S1-M11D-006 per P-045 + new P-054 (mobile sticky-footer mandate): form acts as a flex column bound by the dialog's max-height so the inner .pin-form__body scrolls while header + .form-actions remain pinned. Padding moved to per-region so the sticky footer can bleed edge-to-edge with its cream gradient. */ padding: 0; display: flex; flex-direction: column; gap: 0; max-height: 90dvh; } .pin-form__body { /* Scrollable middle region — the original .9rem flex gap moved here. */ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.9rem 1.4rem 0.4rem; display: flex; flex-direction: column; gap: 0.9rem; } /* Header row — title + close button. The title gradient stays (Frisson brand) but the size drops since "Add a pin" is redundant after the user just clicked the Add Pin CTA. */ .pin-form__header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0; /* AI-S1-M11D-006: padding moved from #pin-form so the header stays pinned at the top of the flex column while body scrolls. */ padding: 1.25rem 1.4rem 0.4rem; flex-shrink: 0; } /* M12 PR6 Fáze-0 — pin-form title typography now lives in the shared canonical title selector above (ADR-179); duplicate removed. The header is a center-aligned flex row, so the only pin-form-specific need is to drop the shared 0.8rem bottom margin (keeps the h2 vertically centered next to the close button). Single-property override, not a typography duplicate. */ #pin-form h2 { margin: 0; } /* M12 gathering title fix (Petřin pokyn 2026-05-31) — the title states the ACTION only ("Leave another Echo" / "Join with your Echo"). The header is a plain title + close button; the gathering identity it lands in lives in its own card at the top of the body (below), NOT floating in the header. */ .pin-form__header-text { display: flex; flex-direction: column; min-width: 0; } /* M12 proposal A (Petřin pokyn 2026-05-31) — the gathering identity is its OWN tinted card in the body, same chrome as .pin-form__location (so it reads as a sibling of the Location box, "same product"), under a quiet "Adding to this gathering" eyebrow. This anchors the name + founder instead of leaving them as two floating lines under the title. */ .pin-form__gathering-context { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0.7rem 0.85rem; background: var(--cream-sunken); border: 1px solid var(--border-on-light); border-radius: var(--radius-md); } /* Eyebrow — canonical small tracked label (same token family as .field__label). */ .pin-form__gathering-eyebrow { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-color); } /* Gathering name = Cormorant display italic (bright --text-dark), --fs-lg — reads as the gathering's own title inside the card, mirroring .pin-popup__kotva-name. */ .pin-form__gathering-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-lg); line-height: 1.15; color: var(--text-dark); word-break: break-word; } /* Founder identity = avatar + ✦nick, soft violet — same author treatment as the gathering popup header (.pin-popup__by-nick), so the modal echoes the gathering's own identity. */ .pin-form__gathering-author { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--nick-color); } .pin-form__gathering-avatar { flex: 0 0 auto; display: inline-flex; } .pin-form__gathering-avatar svg { display: block; border-radius: 50%; } .pin-form__gathering-nick { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em; color: inherit; } .pin-form__gathering-nick::before { content: "\2726"; /* ✦ owner mark, same as .pin-popup__by-nick */ margin-right: 0.3em; } /* #pin-form .pin-form__close — unified styling shared with .dialog-close et al. (Petřin pokyn 2026-05-16 odp.). Visual rules live in the unified block below. The generic `#pin-form button:not(...)` chrome rule (~ř.1281) carries higher specificity than `#pin-form .pin-form__close`, so it MUST exclude `.pin-form__close` (`:not(.pin-form__close)`) — without that exclusion it clobbered the canonical 48×48 circle into a 10px-radius ghost rectangle (Petřin postřeh M12 Dávka-A 2026-05-25). */ /* Location preview card — compact one-line summary with optional GPS-privacy disclaimer (hidden for click/search paths where storage is exact). The card sits as the first content block so the user immediately sees WHERE the pin will land. */ .pin-form__location { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.7rem 0.85rem; background: var(--cream-sunken); border: 1px solid var(--border-on-light); border-radius: 12px; } /* M12 Noir A② (mockup 08) — location is a flag + region chip row. The flag replaces the old "📍" emoji prefix per the FlagImg primitive. */ .pin-form__location-chip { display: flex; align-items: center; gap: var(--space-2); } .pin-form__location-flag { flex-shrink: 0; border-radius: 2px; } .pin-form__location-value { margin: 0; font-size: var(--fs-md); font-weight: 600; /* Read-only — location is fixed by the Add-a-Moment flow, not typed here. Dimmer than primary so it doesn't read as an editable field value. */ color: var(--text-readonly); font-variant-numeric: tabular-nums; } .pin-form__location-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; } .pin-form__location-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Add-mode hides the Move button, leaving this row empty — collapse it so the location box doesn't carry dead space below the chip (ADR-181 gap cleanup). */ .pin-form__location-actions:not(:has(> :not([hidden]))) { display: none; } .pin-form__location-actions .btn-link { font-size: 0.82rem; } /* Avatar collapse trigger — single-row preview that expands the grid underneath on click. Looks like a pill row, not a button-with-border so it sits softly within the form rather than competing with the primary submit CTA. */ #pin-form .avatar-toggle { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; background: var(--cream-sunken); border: 1px solid var(--border-on-light); border-radius: 12px; color: var(--text-dark); cursor: pointer; text-align: left; font: inherit; font-weight: 500; transition: border-color 180ms ease, background 180ms ease; } #pin-form .avatar-toggle:hover, #pin-form .avatar-toggle:focus-visible { background: var(--cream-surface); border-color: var(--accent-turquoise); transform: none; outline: none; } .avatar-toggle__preview { /* ADR-192 (Petřin pokyn 2026-05-28) — bare avatar disc, no cream backdrop and no teal inset ring. The sprite is its own opaque gradient circle, so the avatar fills the slot directly. Inline (Settings) variant adds the per-avatar glow via the shared "Avatar unification" rule (search ADR-192 in this file). */ width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .avatar-toggle__preview .avatar-tile-icon { /* The sprite fills the disc; the previous 60% inset only made sense when the slot had its own cream plate + ring (ADR-192 removed it). */ width: 100%; height: 100%; } .avatar-toggle__preview.is-empty { background: repeating-linear-gradient( -45deg, var(--cream-base) 0 6px, var(--cream-sunken) 6px 12px ); } .avatar-toggle__label { flex: 1 1 auto; font-size: 0.9rem; color: var(--text-dark); } .avatar-toggle__chevron { color: var(--text-muted); font-size: 0.85rem; transition: transform 200ms ease; } #pin-form .avatar-toggle[aria-expanded="true"] .avatar-toggle__chevron { transform: rotate(180deg); } /* When the grid is expanded, give it a little breathing room above. */ #pin-form-avatar-fieldset .avatar-grid:not([hidden]) { margin-top: 0.6rem; } #auth-profile-form .avatar-grid:not([hidden]) { margin-top: 0.6rem; } /* Identity row — avatar + username/nick na stejném řádku per Petřin pokyn 2026-05-15 odp. Used v Profile dialog (interactive avatar chooser) + Pin form (read-only random preview). */ .profile-identity-row { display: flex; align-items: flex-start; gap: 0.75rem; /* M12.X-PROFILE-FIDELITY — no ad-hoc margin; the form's canonical 0.9rem section gap (ADR-179) governs all field-to-field spacing now. */ margin-bottom: 0; } /* Logged-in users have no nick input + no avatar preview — form.js hides both children, leaving an empty row that still reserved a double form-gap + margin (a visible hole, esp. after the category field was removed per ADR-181). Collapse it when no child is visible; anonymous users keep it. */ .profile-identity-row:not(:has(> :not([hidden]))) { display: none; } .profile-identity-row__username { flex: 1 1 auto; min-width: 0; /* Override default .field margin pro tight integration v row. */ margin: 0; } /* Account-modals redesign (designer handoff 2026-06-04) — Profile dialog: avatar vertically centered with the nickname field (label + input); the rule hint moved OUT of the row, below it (see .profile-identity-hint). Scoped to the auth profile form — the pin-form identity row keeps its top alignment. */ #auth-profile-form .profile-identity-row { align-items: center; } /* The nickname rule hint spans below the avatar+field row. Negative-free: the form's flex gap supplies spacing above; pull is not needed because the hint follows the row directly. */ .profile-identity-hint { display: block; } /* Eyebrow section rule — tiny uppercase label + hairline running right (Profile ACCOUNT / PUBLIC PROFILE split, account-modals handoff). Uses the canonical eyebrow type token; hairline fades out like .auth-divider. */ .group-rule { display: flex; align-items: center; gap: 0.75rem; } /* A rule that OPENS a later section gets extra air above so the groups read as separate blocks (the form's 0.9rem flex gap alone was too uniform — caught on the render pass). */ .group-rule:not(:first-child) { margin-top: 0.6rem; } .group-rule > span { font: var(--text-eyebrow); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-light-muted); white-space: nowrap; } .group-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, var(--border-on-light), transparent); } /* Email privacy note — hint with a small lock glyph (was a parenthetical note on the label; account-modals handoff moved it under the value). */ .field__hint--lock { display: inline-flex; align-items: center; gap: 0.35rem; } .field__hint--lock svg { flex-shrink: 0; } /* Inline avatar-toggle variant — Petřin pokyn 2026-05-15 odp. iterace 3 "to fakt ne. Budeme mit proste kruh s hooverem": ŽÁDNÝ button box, ŽÁDNÝ outer border, ŽÁDNÝ outer bg. Jen kulatý preview avatar + chevron pod ním. Use #ID selector pro maximum specificity vs UA. */ #pref-avatar-toggle.avatar-toggle--inline, #pref-avatar-toggle { appearance: none; -webkit-appearance: none; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; flex: 0 0 auto; cursor: pointer; margin-top: 1.35rem; } .avatar-toggle--inline .avatar-toggle__preview { width: 56px; height: 56px; /* Subtle hover-able circle — Petřin "kruh s hooverem". */ transition: background 160ms ease, transform 160ms ease; } .avatar-toggle--inline .avatar-toggle__preview .avatar-tile-icon { /* ADR-192 — sprite fills the disc (was 70%; base rule is now 100%, the variant doesn't need its own override). */ width: 100%; height: 100%; } .avatar-toggle--inline:hover .avatar-toggle__preview { background: var(--accent-turquoise-tint); transform: scale(1.04); } .avatar-toggle--inline:focus-visible .avatar-toggle__preview { background: var(--accent-turquoise-tint); outline: 2px solid var(--accent-turquoise); outline-offset: 2px; } .avatar-toggle--inline:focus { outline: none; } .avatar-toggle--inline .avatar-toggle__label { display: none; } .avatar-toggle--inline .avatar-toggle__chevron { font-size: 1.1rem; line-height: 1; color: var(--text-dark); } /* Read-only preview variant — bez chevron, bez interactivity. Used v pin form pro anonymous users (avatar je random-generated, ne chooser). Žádné border, žádné box — plain circle. */ .avatar-toggle--preview-only { display: inline-flex; flex-direction: column; align-items: center; padding: 0; flex: 0 0 auto; margin-top: 1.35rem; cursor: default; background: transparent; border: 0; } .avatar-toggle--preview-only .avatar-toggle__preview { width: 48px; height: 48px; } .avatar-toggle--preview-only .avatar-toggle__preview .avatar-tile-icon { width: 65%; height: 65%; } /* M12 Noir — shrink the pin-form anon avatar preview (Petřin pokyn 2026-05-25 "zmenšit tlačítko s avatarem"). The generic `#pin-form .avatar-toggle` box chrome (padding + 12px frame) was making it tower over the nickname input; these same-specificity rules (later in source) tighten the box and the circle so it reads as a small avatar, not a slab. */ #pin-form .avatar-toggle--preview-only { /* M12 Noir — circle avatar matching the moments-feed avatar (Petřin pokyn 2026-05-25). Strip the #pin-form .avatar-toggle box chrome so it reads as a plain avatar token, not a slab. */ padding: 0; margin-top: 1.35rem; background: transparent; border: 0; } #pin-form .avatar-toggle--preview-only .avatar-toggle__preview { /* ADR-192 (Petřin pokyn 2026-05-28) — the registered Add Moment identity preview now uses the same per-avatar glow as the moments feed (applied by the shared "Avatar unification" rule). The previous teal halo + cream plate + border read as a separate "settings chip" instead of an avatar. Diameter = nickname field height (~44px, border-box). */ width: 44px; height: 44px; } #pin-form .avatar-toggle--preview-only .avatar-toggle__preview .avatar-tile-icon { /* Glyph fills the disc (matches feed avatar fullness). */ width: 100%; height: 100%; } /* Avatar picker modal grid — scrollable (Petřin pokyn 2026-05-15 odp. "v budoucnu jich tam bude mnohem vice, musi mit ta nabidka vlastni modalni okno ve kterem se bude dat scrollovat"). */ /* ========================================================================== Avatar picker modal — Frost design rollout 2026-05-15 (Petřin postřeh „ikony jsou strašně velké a ten design je strašný"). Panel + backdrop + h2 styling analog s public-profile-modal (shared modal pattern), plus tile size + atmospheric splash override pro picker context. ========================================================================== */ .avatar-picker-dialog { max-width: 420px; width: min(92vw, 420px); padding: 1.4rem 1.3rem 1.5rem; border: 1px solid rgba(var(--accent-turquoise-rgb), 0.15); border-radius: var(--radius-lg); /* Cream-surface + 2-corner atmospheric mesh (teal + plum) per shared „Custom div-based modal" pattern v design-system.md. */ background: radial-gradient(circle at 100% 0%, rgba(var(--accent-turquoise-rgb), 0.08), transparent 55%), radial-gradient(circle at 0% 100%, rgba(var(--accent-violet-rgb), 0.06), transparent 55%), var(--cream-surface); color: var(--text-dark); box-shadow: var(--halo-multi), 0 24px 60px rgba(0, 0, 0, 0.22); } .avatar-picker-dialog::backdrop { /* Shared 2-layer night-sky atmospheric backdrop (per design-system.md sekce „Custom div-based modal" → „Sdílený overlay backdrop"). */ background: radial-gradient(circle at center, rgba(var(--accent-turquoise-rgb), 0.18) 0%, transparent 50%), radial-gradient(circle at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.78) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .avatar-picker-dialog h2 { /* M13.X-TITLE-TIERS — quick avatar chooser = small dialog tier (Petřin výběr 2026-06-03). Self-contained again: pulled out of the unified big-modal selector list (which used to override the old 1.35rem turquoise look with the big white italic title). Keeps the white-italic canon + center align. */ font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: var(--fs-dialog-title); letter-spacing: 0.025em; line-height: 1.15; color: var(--text-dark); margin: 0 0 1rem; text-align: center; } .avatar-picker-dialog .avatar-grid--scrollable { /* 5-col tighter grid pro picker context (= 12-24 tiles ve scroll okenku). Default .avatar-grid je 4-col pro form fieldsets. */ grid-template-columns: repeat(5, 1fr); /* M-UX-AUDIT-043 (M10 closure audit) per nový P-034 (mobile): dvh prevents iOS Safari URL bar collapse cutting modal height. */ max-height: 60dvh; overflow-y: auto; padding: 0.4rem; margin-top: 0; gap: 0.5rem; } .avatar-picker-dialog .avatar-tile { /* Natural cell-width from 5-col grid 1fr distribuce (~67px tile). PŮVODNÍ pokus s `max-width/height: 64px; justify-self: center` způsobil bug: justify-self: center stripne grid cell auto-fill → tile collapse na content size (empty span s CSS mask) → 0×0 → ikony invisible. Atmospheric splash mesh per Frost system. */ background: radial-gradient(circle at 100% 0%, var(--frost-wash-teal), transparent 65%), radial-gradient(circle at 0% 100%, var(--frost-wash-plum), transparent 65%), var(--cream-base); } .avatar-picker-dialog .avatar-tile-icon { /* 60% → 50% — menší icon v picker context, větší breathing room. */ width: 50%; height: 50%; } /* ========================================================================== ADR-189 Stage 4 — sprite avatars (full-colour circles) replace the legacy single-colour CSS-mask glyphs. Two surfaces: the identity-row preview (Add Moment + Profile) and the new anonymous avatar picker. ========================================================================== */ /* Identity-row preview: the sprite is its own circle with a baked gradient, so neutralise the mask/currentColor treatment and let the fill the disc. */ .avatar-toggle__preview .avatar-tile-icon:has(svg), .avatar-toggle__preview .avatar-tile-icon:has(img.fm-avatar-photo) { width: 100%; height: 100%; background-color: transparent; -webkit-mask-image: none; mask-image: none; border-radius: 50%; overflow: hidden; } .avatar-toggle__preview .avatar-tile-icon svg, .avatar-toggle__preview .avatar-tile-icon img.fm-avatar-photo { width: 100%; height: 100%; display: block; } /* Anon Add Moment preview = picker trigger. Petřin pokyn 2026-05-27: NO boxy button frame — just the bare avatar disc with a pencil hint in the middle signalling it's editable. Strip the outer #pin-form .avatar-toggle button chrome too (was only stripping the inner preview), which left a tmavý zaoblený obdélník kolem avataru — Petřin postřeh 2026-05-28: "ja jsem řikala, ze tam nechci žádný čtverec kolem těch avatarů. avatar je tlačítko". */ #pin-form .avatar-toggle--clickable { cursor: pointer; background: transparent; border: 0; padding: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; width: auto; gap: 0; } #pin-form .avatar-toggle--clickable:hover, #pin-form .avatar-toggle--clickable:focus-visible { background: transparent; border-color: transparent; } #pin-form .avatar-toggle--clickable .avatar-toggle__preview { background: none; border: 0; padding: 0; box-shadow: none; position: relative; overflow: visible; transition: transform 160ms ease; } /* Pencil hint — bare outlined pencil pinned to the avatar's bottom-right edge (Petřin pokyn 2026-05-28 round 3: "nejde poznat že je to tužka … proč je tam to kolečko? chci normální rozeznatelnou tužku"). The teal coin around it crushed a 10px filled icon down to an unrecognisable diagonal stroke. Now: canonical outlined ICON_PENCIL (stroke-based, legible at 18px), turquoise stroke for hue parity with the avatar trigger, dark drop-shadow so the strokes stay readable on any avatar tone underneath. No coin, no ring. Round 4 (Petřin pokyn 2026-05-28): same affordance on the registered Profile dialog avatar — selector dropped #pin-form so it covers the inline pref-avatar-toggle too. The .avatar-toggle__preview span is already position:relative everywhere via the base rule, so the absolute hint anchors correctly on both surfaces. */ .avatar-toggle--clickable .avatar-toggle__preview { position: relative; } .avatar-toggle--clickable .avatar-toggle__edit-hint { position: absolute; bottom: -4px; right: -4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--accent-turquoise); filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.65)); transition: transform 160ms ease; pointer-events: none; } .avatar-toggle--clickable .avatar-toggle__edit-hint svg { width: 18px; height: 18px; display: block; } @media (hover: hover) and (pointer: fine) { #pin-form .avatar-toggle--clickable:hover .avatar-toggle__preview { transform: scale(1.05); } #pin-form .avatar-toggle--clickable:hover .avatar-toggle__edit-hint { transform: scale(1.1); } } #pin-form .avatar-toggle--clickable:focus-visible .avatar-toggle__edit-hint { outline: 2px solid var(--accent-turquoise); outline-offset: 2px; } #pin-form .avatar-toggle--clickable:focus { outline: none; } /* Reg avatar toggle is non-interactive while the reg picker is deferred (ADR-189 Stage 4 — sprite reg picker ships later). */ .avatar-toggle--static { cursor: default !important; pointer-events: none; } /* Anonymous avatar picker — reuses the .avatar-picker-dialog Frost shell; this modifier governs the two-set body (Mood + Tarja · Metal split by a divider). Grid layout derived from avatar-handoff/example.html + mockup 04. */ .avatar-picker-dialog--sets { width: min(94vw, 460px); max-width: 460px; } .avatar-picker__hint { margin: -0.4rem 0 1rem; text-align: center; font-size: 0.85rem; color: var(--text-muted); } .avatar-picker__body { max-height: 56dvh; overflow-y: auto; padding: 0.2rem 0.3rem; } .avatar-set__divider { height: 1px; margin: 1rem 0.2rem; background: linear-gradient(90deg, transparent, var(--border-on-light), transparent); } /* Sprite tile grid — full-colour avatars, no cream-base fill (the sprite is its own circle). Selection = teal ring + halo around the disc (mirrors the .avatar-tile.selected cyan halo so the two pickers read as one system). */ /* .avatar-grid.avatar-grid--sprite (0,2,0) — must out-rank the base .avatar-grid repeat(4,1fr) that sits later in source. 5-col matches the existing reg avatar-picker grid for cross-picker consistency. */ .avatar-grid.avatar-grid--sprite { grid-template-columns: repeat(5, 1fr); gap: 0.55rem; } .avatar-tile--sprite { appearance: none; -webkit-appearance: none; font: inherit; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 3px; background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; } .avatar-tile--sprite svg, .avatar-tile--sprite img.fm-avatar-photo { width: 100%; height: 100%; display: block; border-radius: 50%; } /* M13N — picker tiles glow with each avatar's own --av-glow, same as in-app. The picker is dark Noir now, so the old cream-Frost "no glow" exemption is stale; sprite and photo get the identical halo treatment. */ .avatar-tile--sprite svg, .avatar-tile--sprite img.fm-avatar-photo { filter: drop-shadow(0 0 4px rgba(var(--av-glow, 221, 227, 244), 0.8)) drop-shadow(0 0 7px rgba(var(--av-glow, 221, 227, 244), 0.42)); } @media (hover: hover) and (pointer: fine) { .avatar-tile--sprite:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 2px rgba(var(--accent-turquoise-rgb), 0.35), 0 6px 14px rgba(var(--accent-turquoise-rgb), 0.18); } } .avatar-tile--sprite:focus { outline: none; } .avatar-tile--sprite:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-turquoise), 0 0 0 5px rgba(var(--accent-turquoise-rgb), 0.22); } .avatar-tile--sprite.selected, .avatar-tile--sprite.selected:hover { box-shadow: 0 0 0 2px var(--accent-turquoise), 0 0 0 5px rgba(var(--accent-turquoise-rgb), 0.20), 0 8px 22px rgba(var(--accent-turquoise-rgb), 0.28); transform: translateY(-2px); } /* Category pills — replaces stacked radio with a tighter 2-button row. Visually closer to the Frisson design system's "Tab switcher" pattern (design-system.md, M10B addition). Native stays for a11y. */ /* Add-moment "What kind of moment?" switch moved to the canonical FSegment primitive in M12 Noir A② (was .category-pills/.category-pill — now dead, removed). Radiogroup styling lives with .segment (see FSegment block). */ /* "More details" disclosure — uses native
for zero JS. Mirrors the .mfa-manual pattern (auth dialog) so we don't drift between two disclosure looks. */ .pin-form__more { /* No border-top — the summary itself carries enough visual weight after Petřin 2026-05-14 feedback (= "miniaturní, prehledla"). */ } .pin-form__more > summary { cursor: pointer; /* M-UX-AUDIT-024 per P-030 (mobile): disclosure summary ≥44px tap target. Matches .pin-form__anon-nationality > summary pattern. */ padding: 0.75rem 0.85rem; min-height: 44px; color: var(--accent-turquoise); font-weight: 700; font-size: 0.92rem; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; background: rgba(var(--accent-turquoise-rgb), 0.08); border: 1px solid rgba(var(--accent-turquoise-rgb), 0.22); border-radius: var(--radius-sm); transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .pin-form__more > summary::-webkit-details-marker { display: none; } .pin-form__more > summary::after { /* Petřin postřeh 2026-05-16 odp. — šipka 0.85rem byla "hrozně malá" v rozevíratelném seznamu. Bumped to 1.15rem (~18 px) + bold weight pro solid visual presence. Apply app-wide na všechny disclosure markers. */ content: "▾"; font-size: 1.15rem; font-weight: 700; line-height: 1; transition: transform 200ms ease; } .pin-form__more[open] > summary::after { transform: rotate(180deg); } .pin-form__more > summary:hover, .pin-form__more > summary:focus-visible { background: rgba(var(--accent-turquoise-rgb), 0.14); border-color: var(--accent-turquoise); outline: none; } .pin-form__more-body { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.7rem; } /* M10F per ADR-070 — anonymous-only opt-in nationality block. Mirrors the .pin-form__more disclosure pattern so the two collapsibles read as siblings inside the same form. JS keeps the whole element hidden for signed-in users. */ .pin-form__anon-nationality > summary { cursor: pointer; /* M10F Stage 1 (AI-S1-M10F-007 per P-030 mobile tap target ≥ 44 px): padding 0.75rem + font 0.9rem yields computed ~46 px height, above iOS HIG 44 + Material 48 dp guideline. M10F Stage 2 (AI-S2-M10F-003 per STYLE-003/009): border alpha + radius aligned with `.pin-form__more > summary` sibling so the two disclosure togglers in the same form read as visual peers, not as different control types. Muted border `rgba(var(--accent-turquoise-rgb),0.22)` replaces full `var(--accent-turquoise)` (which "křičelo" oproti subtle modal mesh); shared `var(--radius-sm)` replaces 6px. */ padding: 0.75rem 0.85rem; border: 1px solid rgba(var(--accent-turquoise-rgb), 0.22); border-radius: var(--radius-sm); background: rgba(var(--accent-turquoise-rgb), 0.06); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; color: var(--accent-turquoise); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; transition: background 160ms ease, border-color 160ms ease; } .pin-form__anon-nationality > summary::-webkit-details-marker { display: none; } .pin-form__anon-nationality > summary::after { /* Petřin postřeh 2026-05-16 odp. — viz .pin-form__more sibling. */ content: "▾"; font-size: 1.15rem; font-weight: 700; line-height: 1; transition: transform 160ms ease; } .pin-form__anon-nationality[open] > summary::after { transform: rotate(180deg); } .pin-form__anon-nationality > summary:hover, .pin-form__anon-nationality > summary:focus-visible { background: rgba(var(--accent-turquoise-rgb), 0.14); border-color: var(--accent-turquoise); outline: none; } .pin-form__anon-nationality-body { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.7rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; border: none; position: relative; } /* fieldset.field (category segment, report reasons) keeps UA
insets (padding 0.35em/0.75em + margin 0 2px + min-inline-size: min-content) that push its content inward and misalign it from sibling .field rows. Reset so a fieldset row lines up flush with text/input rows — the segment "What kind of moment?" now shares the same left edge + breathing room as every other field (M12 Dávka-A 2026-05-25). */ fieldset.field { padding: 0; margin: 0; min-inline-size: 0; } [hidden] { display: none !important; } /* M12 Noir PR6-A — field labels follow the locked primitives spec (m12-primitives.md §2): muted, medium weight, wide tracking. The Frost-era loud teal/700 label pulled the eye to the caption instead of the input; every dialog mockup (07–14) shows the quiet muted treatment. Canonical primitive → propagates app-wide. */ .field__label { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-color); } /* Canonical SECTION LABEL — a small heading that titles a block (e.g. the popup "Where fans are talking" discussion section). GLOBAL style so labels read as one system everywhere: identical tone (--label-color) + tracking as the modal field labels above, plus the block spacing a standalone heading needs. Apply this class instead of re-styling per surface (Petřin pokyn 2026-05-27 — global style, side agent applies). */ .fm-section-label { margin: var(--space-3) 0 var(--space-1-5); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label-color); } /* M12.X-PROFILE-FIDELITY — inline note sitting next to a field label (email privacy parenthetical, social-links N/5 counter). Stays readable: does NOT inherit the label's uppercase caps + letter-spacing. */ .field__label-note { text-transform: none; letter-spacing: normal; font-weight: 400; /* Tracks the label size (--fs-xs) so the note never reads bigger than the label it annotates (label shrink 2026-06-03). */ font-size: var(--fs-xs); color: var(--text-muted); } /* A doesn't participate in the fieldset's flex gap, so it needs an explicit margin matching the within-field label→content gap (0.4rem). One rule for every fieldset legend (privacy group + social-links group) so the rhythm is uniform instead of per-dialog hand-tuning. */ fieldset.field > legend.field__label { margin-bottom: 0.4rem; } /* Social-links legend = label + capacity counter on one row. The counter sits right after the label (like the email "(not visible)" note), NOT pushed to the far right (Petřin pokyn 2026-05-27). */ .contacts-legend { display: flex; align-items: baseline; gap: 0.4rem; } /* AI-S1-M11D-002 per new P-052 — required field label MUSÍ mít visual marker, ne jen absence of "(optional)" suffix u sourozenců. The copper accent matches the destructive/attention colour family already in use (see --copper-accent in :root). */ .field__label--required::after, /* Echo composer: the LOCATION group head IS the required field label (its inner .field__label was dropped, ADR-236), so the marker rides the heading. Composer-only modifier toggled by form.js — never on the read-only chip. */ .echo-group__head--required h3::after { content: " *"; color: var(--copper-accent, var(--accent-copper)); font-weight: 700; /* Bigger than the inherited label size — the baseline-sized "*" read as titěrné (Petřin pokyn 2026-06-08). em keeps it proportional per surface; vertical-align nudge keeps the taller glyph from lifting the line box. */ font-size: 1.35em; line-height: 1; vertical-align: -0.08em; margin-left: 0.15rem; } /* AI-S1-M11D-003 per new P-050 — field-specific validation error sits adjacent to the focused field (inside the same .field label wrapper) so users on mobile keyboard reflow see the message without scrolling to the bottom shared #form-error region. Shared #form-error stays for field-agnostic errors (CAPTCHA, network). */ .field__error { font-size: 0.8rem; color: var(--danger-text); font-weight: 600; margin-top: 0.2rem; /* Stays in DOM with [hidden] toggling so layout doesn't reflow unexpectedly when the error appears. */ } /* Beta feedback 2026-06-09 — the comment counter + validation message share one row: the message takes the left and wraps if long, the counter stays pinned to the right under the textarea (its original spot), so showing the message never pushes the counter down. The counter drops its absolute placement inside here. */ .field__meta-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.25rem; } .field__meta-row .field__error { margin: 0; flex: 1 1 auto; min-width: 0; /* allow the message to wrap instead of overflowing the row */ } .field__meta-row .field__counter { position: static; /* override the global absolute bottom-right placement */ margin: 0 0 0 auto; /* keep it on the right even when the message is hidden */ flex: 0 0 auto; white-space: nowrap; } /* The counter is no longer absolute in this field, so drop the reserved strip the global rule adds for the absolute placement (higher specificity wins). */ .echo-group .field:has(.field__meta-row) { padding-bottom: 0; } /* Petřin postřeh 2026-05-16 odp. — datetime-local v Add Pin „More details" byl defaultním browser stylem (Czech locale, calendar icon bez tint). Generalize: všechny inputs uvnitř `.field` wrapper dostanou Frisson cream-sunken styling napříč aplikací (pin-form, suggest-online, admin events). Per feedback_audit_repair_app_wide_not_milestone. */ /* The Frost time/duration pickers carry their own box on the wrapper (.frost-time-picker / .frost-duration-picker__field); their inner inputs must stay borderless/transparent. Exclude them here so the global field box doesn't double up (was the "frame in frame" + outside-chevron bug). */ .field input[type="text"]:not(.frost-time-picker__input):not(.frost-duration-picker__input), .field input[type="datetime-local"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field input[type="url"], .field input[type="email"], .field input[type="password"], .field input[type="search"], .field textarea, .field select { background: var(--cream-sunken); border: 1px solid var(--border-on-light); border-radius: 10px; /* --input-pad-left: lets a wrapper (.input-affix) widen the left padding for an inline leading glyph WITHOUT fighting this rule's specificity — the literal padding-left on .input-affix > input always lost here and the text slid under the magnifier (Petřin postřeh 2026-06-07). */ padding: 0.7rem 0.9rem 0.7rem var(--input-pad-left, 0.9rem); color: var(--text-dark); font: inherit; /* M-UX-AUDIT-005 (M10 closure audit 2026-05-15) per P-033 (mobile): iOS Safari auto-zoom při focus pokud font-size < 16px. */ font-size: 1rem; width: 100%; transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; } .field textarea { resize: vertical; } /* Comment box mirrors the moment's display VOICE live (Petřin nápad 2026-05-28) so users see exactly how their text will render — not a generic system font. Short text = handwriting (Caveat); past the length threshold it flips to the calm roman serif (Lora). Same tokens + same `isHandwrittenMoment()` helper as the popup/list (textExpandable.js), so the field and the rendered moment can never diverge. form.js toggles `.is-roman` once the text crosses MOMENT_HAND_MAX_CHARS. Bonus: the roman voice (13px) fits far more text than the old flat size — so it also solves the "text too big / too little fits" ask. Tradeoff: the roman voice is < 16px → iOS Safari focus auto-zoom; accepted for this single field. */ #comment-input { font-family: var(--font-moment); font-size: var(--fs-moment-hand); line-height: var(--lh-moment-hand); font-weight: var(--fw-moment-hand); /* Stable height regardless of voice: the smaller roman font would shrink a rows="3" box, so pin a min-height to the handwriting 3-row size. The box never collapses on the voice flip; the user can still drag it taller (resize: vertical inherited from .field textarea). Petřin pokyn 2026-05-28. */ min-height: 6.5rem; } #comment-input.is-roman { font-family: var(--font-moment-long); font-size: var(--fs-moment-roman); line-height: var(--lh-moment-roman); font-weight: 400; } /* M12 (Petřin pokyn 2026-05-26) — placeholder text inside inputs used the browser default, which on the dark Noir surface is almost invisible (very low opacity) → "nejde to přečíst". 2026-06-04 placeholder audit (Petřin pokyn): ALL placeholders share this ONE rule + ONE token (--text-placeholder) — per-component placeholder colors were removed. Dimmer than typed text (--text-dark) so it still reads as a hint, but legible (~7.6:1). */ input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; } /* M12 desktop density (Petřin pokyn 2026-05-26) — the base field padding + the date-picker display are tuned for mobile (44px tap target + iOS focus-zoom guard via 1rem font). On desktop that vertical padding reads as oversized and inflates every modal/form top-to-bottom. Trim the vertical padding on wide viewports ONLY; mobile (< 768px) keeps the comfortable tap target untouched. Font stays 1rem so readability is unchanged. One shared rule → propagates to every form/modal app-wide (the systemic "puffy modals" fix, not a per-dialog patch). Location search (0.5rem) is already moderate; time/duration pulled to 0.5rem too so the whole When row + Location align. */ @media (min-width: 768px) { .field input[type="text"]:not(.frost-time-picker__input):not(.frost-duration-picker__input), .field input[type="datetime-local"], .field input[type="date"], .field input[type="time"], .field input[type="number"], .field input[type="url"], .field input[type="email"], .field input[type="password"], .field input[type="search"], .field textarea, .field select, /* Bespoke modal textareas NOT wrapped in `.field` — kept in lockstep so a modal never mixes a tall reason/description box with short `.field` rows (Petřin pokyn 2026-05-26 — density musí být globální v modálech). */ .confirm-dialog textarea, #report-form textarea, .frost-modal textarea { /* Same --input-pad-left hook as the base rule above (leading-glyph inputs). */ padding: 0.5rem 0.9rem 0.5rem var(--input-pad-left, 0.9rem); } /* All three When-row pickers share ONE box height on desktop (date display, time wrapper, duration field) so date/time/duration line up (Petřin pokyn 2026-05-26 — "každá komponenta má jinou výšku"). */ .frost-date-picker__display, .frost-time-picker, .frost-duration-picker__field { padding: 0.4rem 0.6rem 0.4rem 0.9rem; } } /* Native datetime / date / time picker icon — tint to match the teal accent so it doesn't read as foreign Chrome chrome. The filter roughly approximates --accent-turquoise (#0d7575). */ .field input[type="datetime-local"]::-webkit-calendar-picker-indicator, .field input[type="date"]::-webkit-calendar-picker-indicator, .field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(38%) sepia(72%) saturate(467%) hue-rotate(141deg) brightness(85%); cursor: pointer; opacity: 0.75; transition: opacity 200ms ease; } .field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover, .field input[type="date"]::-webkit-calendar-picker-indicator:hover, .field input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; background: var(--cream-surface); border-color: var(--accent-turquoise); /* Glowing turquoise halo around the focused field. */ box-shadow: 0 0 0 4px rgba(var(--accent-turquoise-rgb), 0.18); } .field__counter { /* Petřin postřeh 2026-05-15 večer „male odsazeni počtadla znaků a pole pod nim". Counter je absolute pod textareou ALE parent .field flex column gap 0.4rem nezarezervoval místo → next element (More details / submit) překrýval counter. Fix: counter bottom 0, positioned uvnitř field padding (= reserved space), text-align right. Plus field-level padding-bottom 1.1rem pro vyhrazení místa. */ position: absolute; right: 0.2rem; bottom: 0; font-size: 0.7rem; color: var(--text-muted); } .field:has(.field__counter) { /* Reserve room below textarea/input so absolute counter doesn't overlap next element. */ padding-bottom: 1.1rem; } /* AI-S1-M11D-004 per new P-051 — char-limited counter MUSÍ mít threshold warn state. The skok 280→500 v M11D ADR-080 = delší typing trajektorie, warn state preventuje submit fail with `commentTooLong`. */ .field__counter--warn { color: var(--accent-copper); font-weight: 600; } .field__counter--max { color: var(--danger-text); font-weight: 700; } /* AI-S1-M11D-006 — sticky footer pattern. Overrides global .form-actions margin-top: 0.6rem so the footer can sit flush at the bottom of the form, sticky against scroll. The cream-fade gradient softens the transition from scrollable body so users perceive the footer as a continuation of the surface, not a floating overlay. */ #pin-form > .form-actions { margin: 0; padding: 0.7rem 1.4rem 1.3rem; flex-shrink: 0; position: sticky; bottom: 0; background: linear-gradient( 180deg, rgba(252, 248, 240, 0) 0%, var(--cream-surface) 35% ); } /* Avatar grid — 4 columns (12 avatars = 3 rows). */ .avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .avatar-tile { appearance: none; -webkit-appearance: none; font: inherit; aspect-ratio: 1; background: var(--cream-base); border: 2px solid transparent; /* Petřin pokyn 2026-05-15 odp.: kulaté všude (konzistence s pin marker + popup nick avatar). Předchozí 14px rounded square byl outlier. */ border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); padding: 0; box-shadow: inset 0 0 0 1px var(--border-on-light); transition: transform 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } /* UX-AUDIT-009 (M10 closure audit 2026-05-15): hover guarded behind @media (hover: hover) so touch devices don't get sticky-hover state that lingers after tap. Per P-024. */ @media (hover: hover) and (pointer: fine) { .avatar-tile:hover { background: var(--cream-surface); color: var(--accent-turquoise); transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--border-on-light), 0 6px 14px rgba(var(--accent-turquoise-rgb), 0.14); } } .avatar-tile:focus { outline: none; } .avatar-tile:focus-visible { outline: none; border-color: var(--accent-turquoise); box-shadow: inset 0 0 0 2px var(--accent-turquoise), 0 0 0 4px rgba(var(--accent-turquoise-rgb), 0.20); } .avatar-tile.selected, .avatar-tile.selected:hover { border-color: var(--accent-turquoise); background: var(--accent-turquoise-tint); color: var(--accent-turquoise); /* Cyan halo — the selected avatar glows like the splash in the paintings. */ box-shadow: inset 0 0 0 2px var(--accent-turquoise), 0 0 0 4px rgba(var(--accent-turquoise-rgb), 0.18), 0 8px 24px rgba(var(--accent-turquoise-rgb), 0.25); transform: translateY(-2px); } /* Avatar icon — uses CSS mask so the SVG inherits currentColor of the parent .avatar-tile (otherwise 'd SVGs fall back to black). */ .avatar-tile-icon { width: 60%; height: 60%; background-color: currentColor; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; mask-position: center; mask-repeat: no-repeat; mask-size: contain; pointer-events: none; } /* Form footer */ .form-actions { display: flex; gap: 0.7rem; justify-content: flex-end; margin-top: 0.6rem; } /* Account-modals redesign (designer handoff 2026-06-04) — full-width balanced footer pair, EQUAL widths (Petřin pokyn 2026-06-04 večer: "mají být stejně velké"; supersedes the mockup's 1 : 1.5 ratio). Opt-in modifier; the base .form-actions stays right-aligned everywhere else. */ .form-actions--span > button { flex: 1 1 0; min-width: 0; padding-top: 0.85rem; padding-bottom: 0.85rem; } /* Hairline above the footer pair (Profile + Preferences boards) — closes the form before the actions. Sign in keeps its rule BELOW the buttons (.auth-signup-row owns it). */ .form-actions--ruled { border-top: 1px solid var(--border-on-light); padding-top: 1rem; margin-top: 0.9rem; } /* Ghost (cancel) — transparent with subtle outline. */ /* M11.X-CONTAINER-ENTITY (Petřin pokyn 2026-05-24) — the `:not([class*="frost-"])` guard keeps this generic form-button chrome (border/padding) OFF the shared Frost date/time picker's internal buttons (calendar nav arrows, day cells, time toggle/slots). Without it the picker rendered "completely different" in the pin form (empty nav boxes, wrapped date) vs the event modal, which has no #pin-form scope. */ /* :not(.rating-step) added (ADR-236) — the inline song-rating ± steppers reuse the canonical give-stars .rating-step look; this generic chrome's :not() chain carries higher specificity than any single-class override, so the exclusion has to live HERE (same pattern as .echo-location__locate). */ #pin-form button:not([class*="frost-"]):not([class*="btn-"]):not(.pin-form__close):not(.avatar-toggle):not(.echo-location__locate):not(.venue-card__map-toggle):not(.rating-step):not(.echo-grouping__card):not(.rating-country__link) { background: transparent; color: var(--text-dark); border: 1px solid var(--border-strong-light); border-radius: 10px; padding: 0.65rem 1.3rem; font: inherit; font-weight: 600; cursor: pointer; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; } @media (hover: hover) and (pointer: fine) { #pin-form button:not([class*="frost-"]):not([class*="btn-"]):not(.pin-form__close):not(.echo-location__locate):not(.venue-card__map-toggle):not(.rating-step):not(.echo-grouping__card):not(.rating-country__link):hover { background: rgba(238, 240, 250, 0.05); border-color: var(--text-dark); } } /* Submit "Add a moment" — TURQUOISE per mockup (Petřin pokyn 2026-05-24: "submit tlačítka mají být tyrkysová s mírným gradientem uvnitř"). Uses the shared .btn-primary class (teal gradient). The generic `#pin-form button` rule above excludes `[class*="btn-"]` so it no longer clobbers role-classed buttons. NOTE: supersedes ADR-078 Fix 3 (which proposed violet) — the designer mockup shows the form's primary submit as teal, not iris. */ /* M12 Noir A② (mockup 08) — "+" glyph before "Add your moment". Toggled via .has-plus (form.js applyMode) so edit mode ("Save changes") stays glyph-less. */ #pin-form-submit.has-plus::before { content: "+"; font-weight: 700; font-size: 1.15em; line-height: 0; margin-right: 0.15rem; } .form-error { color: var(--danger-text); font-size: 0.85rem; font-weight: 600; } /* Heads-up tone (not an error): the federated "tap once more" notice after an in-app-browser handoff. Gold reads as "one more step", never the red of a real failure — same element/spot, colour only. */ .form-error.is-notice { color: var(--warning); } .form-success { color: var(--success); font-size: 0.85rem; font-weight: 600; } /* Label row with a right-aligned affordance — account-modals redesign (designer handoff 2026-06-04): "Forgot password?" sits ON the PASSWORD label line instead of its own row below the field (supersedes the .auth-forgot-row + :has() pull-up from earlier the same day; that row is gone from the markup). The label inside keeps its canonical .field__label styling; baseline align so label and link share a line. */ .field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; } /* "Don't have an account? Sign up" cross-link under the Cancel/Sign in row (Petra 2026-06-04 — anonymous users used to have to close the dialog and find Sign up in the menu). Muted prefix + canonical teal .btn-link. Hairline rule + breathing room turn the row into a deliberate footer note instead of an afterthought stuck to the buttons (designer variant C, Petra 2026-06-04). */ .auth-signup-row { display: flex; justify-content: center; align-items: baseline; gap: 0.35rem; margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--border-on-light); font-size: var(--fs-sm); color: var(--text-muted); } /* "Forgot password?" = teal underlined (Petra 2026-05-27 — reverted the M12 PR6 Dávka C copper treatment back to the teal link hue). */ #auth-forgot-link { color: var(--accent-turquoise); text-decoration: underline; font-weight: 600; } #auth-forgot-link:hover, #auth-forgot-link:focus-visible { color: var(--accent-turquoise-bright); } /* ========================================================================== App footer — Privacy / Terms links over the map. ========================================================================== */ .app-footer { /* M10E sub-blok 3/4 — Frost atmospheric pill: subtle 2-corner teal+plum wash on cream-surface + halo-multi shadow (single layer). */ position: absolute; left: 50%; bottom: 0; z-index: 900; transform: translateX(-50%); margin-bottom: max(0.5rem, env(safe-area-inset-bottom)); /* No inner padding — links carry their own generous padding so the hover/tap area spans the whole chip (same pattern as events tabs). */ padding: 0; border-radius: var(--radius-pill); background: radial-gradient(circle at 0% 50%, var(--frost-wash-teal), transparent 65%), radial-gradient(circle at 100% 50%, var(--frost-wash-plum), transparent 65%), var(--cream-surface); border: 1px solid var(--border-on-light); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--halo-multi); display: flex; align-items: stretch; font-family: var(--font-body); /* Clip link chips to the pill so their hover state respects the rounded edges instead of bleeding past them. */ overflow: hidden; } .app-footer a { /* Manrope 600 CAPS 0.7rem + 0.10em tracking + teal — secondary meta weight (Petřin postřeh 2026-05-15 „nemusí být tak tučné, není hlavní věc"). Events tabs mají 800 protože jsou primary navigation; footer je secondary meta info, tlumenější weight stačí. Hover = teal-tint background change on whole chip area (padding included). */ /* M-UX-004 (Stage 1 review): padding 0.55rem 0.95rem → 0.85rem 1.1rem + min-height 44px. Footer chip height was ~28-30px → fingers miss tap target on mobile. About link is primary entry to sub-blok 3 page. */ display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; color: var(--accent-turquoise); padding: 0.85rem 1.1rem; background: transparent; transition: background 160ms ease, color 160ms ease; } @media (hover: hover) and (pointer: fine) { .app-footer a:hover { background: var(--accent-turquoise-tint); color: var(--accent-turquoise); } } .app-footer a:focus-visible { background: var(--accent-turquoise-tint); outline: 2px solid var(--accent-violet-bright); outline-offset: -2px; border-radius: 4px; } /* Hide app-footer (Privacy / Terms / About) on mobile per Petřin pokyn 2026-05-16: links už jsou v hamburger menu (#app-menu), duplicate v persistent footer není potřeba na mobile + zbytečně bere bottom real estate. Desktop-only. */ @media (max-width: 767px) { .app-footer { display: none !important; } } .app-footer__sep { /* Thin teal-tinted vertical divider — same DNA jako events-panel__rail-label (border-bottom: 1px solid var(--border-on-light-strong-brand)) per Petřin pokyn 2026-05-15 „oddělovače jako u záložek". HTML obsah glyphu skryt přes font-size 0, separator je čistě CSS vertical line. */ align-self: stretch; width: 1px; margin: 0.45rem 0; background: var(--border-on-light-strong-brand); font-size: 0; pointer-events: none; user-select: none; } /* ========================================================================== Cookie banner — bottom-of-screen info notice (GDPR-friendly). ========================================================================== */ .cookie-banner { position: fixed; left: 50%; bottom: 0; z-index: 1100; transform: translate(-50%, 110%); margin-bottom: max(0.75rem, env(safe-area-inset-bottom)); padding: 0.95rem 1.1rem; border-radius: var(--radius-md); background: var(--cream-surface); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-on-light); box-shadow: var(--shadow-modal); max-width: calc(100vw - 1.5rem); width: 460px; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 240ms ease; } .cookie-banner--visible { transform: translate(-50%, 0); } .cookie-banner__text { font-size: 0.85rem; line-height: 1.45; color: var(--text-dark); } .cookie-banner__btn { align-self: flex-end; background: linear-gradient(135deg, var(--accent-copper-bright) 0%, var(--accent-copper) 100%); color: var(--text-on-accent); border: 1px solid var(--accent-copper); border-radius: var(--radius-sm); /* M-UX-AUDIT-035 per P-036: 44px tap target — GDPR consent primary. */ padding: 0.7rem 1.2rem; min-height: 44px; font: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 3px 10px rgba(var(--accent-copper-rgb), 0.25), inset 0 1px 0 rgba(238, 240, 250, 0.18); transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .cookie-banner__btn:hover, .cookie-banner__btn:focus-visible { box-shadow: 0 6px 16px rgba(201, 139, 75, 0.35), inset 0 1px 0 rgba(238, 240, 250, 0.22); outline: none; } /* STYLE-M10-005 (M10 closure Stage 2 audit 2026-05-16): hover-media guard for transform-y lift (touch sticky-hover prevention per Atmosphere rule 8). */ @media (hover: hover) and (pointer: fine) { .cookie-banner__btn:hover { transform: translateY(-1px); } } @media (min-width: 768px) { .cookie-banner { flex-direction: row; align-items: center; } .cookie-banner__btn { align-self: auto; flex-shrink: 0; } } /* ========================================================================== Legal pages (privacy.html, terms.html) — body class "legal-page". Different layout from the map: scrollable, max-width content. ========================================================================== */ /* Legal pages need a scrollable root — base `html, body { height: 100dvh; overflow: hidden }` is for the map viewport, not for long-form text. */ html.legal-html, html.legal-html body.legal-page { height: auto; min-height: 100dvh; overflow: auto; } body.legal-page { background: var(--cream-base); color: var(--text-dark); } .legal-content { max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 4rem; line-height: 1.6; color: var(--text-dark); } .legal-content h1 { /* M12 rollout — Cormorant 600 + Aurora gradient. Center aligned + smaller size 2026-05-14 (Petřin "nadpis stránky uprostřed, ne tak velký, není to název aplikace") — Privacy/Terms je section title, ne brand. */ font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; letter-spacing: 0.03em; line-height: 1.2; text-align: center; margin: 0.5rem 0 1rem; background: linear-gradient(120deg, var(--accent-violet) 0%, var(--accent-turquoise) 50%, var(--accent-copper) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: block; } .legal-content .legal-meta { /* Center the "Last updated" line under the centered h1 */ text-align: center; } .legal-content h2 { /* M12 rollout — Cormorant 600 v turquoise (consistent s panel section heads). Bumped from 500 → 600 (Petřin pokyn 2026-05-15 „aspoň semibold pro čitelnost") — Cormorant 500 na light cream readable, ale na úzkém vidění splývalo. Same change applied to .about-section h2 below. */ font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.02em; margin: 2.2rem 0 0.6rem; color: var(--accent-turquoise); } .legal-content h3, .about-section h3 { /* M19.X-TRANSLATE (Petřin pokyn 2026-06-12) — subheadings blended into body text: they were body-coloured (--text-dark) and only a hair larger. Give them the heading teal (one size below the h2 section heads) so the 2.x subsections read clearly as headings on all three legal pages. */ font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.02em; margin: 1.6rem 0 0.4rem; color: var(--accent-turquoise); } .legal-content p, .legal-content ul, .legal-content ol { margin-bottom: 0.85rem; color: var(--text-dark); font-size: 0.95rem; } .legal-content ul, .legal-content ol { padding-left: 1.4rem; } .legal-content li { margin-bottom: 0.35rem; } .legal-content strong { color: var(--text-dark); font-weight: 600; } .legal-content a { color: var(--accent-turquoise); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .legal-content a:hover, .legal-content a:focus-visible { color: var(--accent-copper); } /* Long URLs shown as link text (GitHub feedback repo) — keep the URL in one piece: if it doesn't fit the line, the whole link drops to the next line instead of breaking mid-URL (Petřin pokyn 2026-06-07). */ .legal-repo-link { display: inline-block; } /* Back-to-map links are navigation chrome, not body-copy links — keep the admin-back teal pill treatment (no underline, no copper hover flip). */ .legal-content a.legal-back, .legal-content .legal-back--bottom a { text-decoration: none; } .legal-content a.legal-back:hover, .legal-content a.legal-back:focus-visible, .legal-content .legal-back--bottom a:hover, .legal-content .legal-back--bottom a:focus-visible { color: var(--accent-turquoise); } .legal-content code { background: var(--cream-sunken); color: var(--text-dark); padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid var(--border-on-light); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.9em; } .legal-back { /* M-UX-AUDIT-040 per P-036 (mobile): 44px tap target for back link. M10 closure Session #7 admin polish (2026-05-16) — Petřin canonical spec „na samostatných stránkách je Back to Map vždycky VLEVO" — reverted to inline-flex at start of centered .legal-content 720px container. */ display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.8rem 0.5rem 0.8rem; margin-bottom: 1.2rem; margin-left: -0.8rem; /* optical left-align: text edge stays on the container line */ /* Teal back-to-map — same pattern as .admin-header__back (Petřin pokyn 2026-06-07): teal + semibold, hover = turquoise tint pill. */ color: var(--accent-turquoise); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transition: background 160ms ease; font-size: 0.9rem; } @media (hover: hover) and (pointer: fine) { .legal-back:hover { background: var(--accent-turquoise-tint); } } .legal-back:focus-visible { background: var(--accent-turquoise-tint); outline: none; } /* UX-AUDIT-004 (M10 closure audit 2026-05-15): duplicate Back-to-map link on legal page bottoms so long-scroll users don't have to scroll all the way up to navigate out. Centered + spaced from the body copy. */ .legal-back--bottom { display: block; margin: 2.4rem 0 0; text-align: center; font-size: 0.95rem; } .legal-back--bottom a { /* Same teal treatment as the top .legal-back (admin-header__back parity). */ display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.8rem; color: var(--accent-turquoise); font-weight: 600; border-radius: var(--radius-sm); text-decoration: none; transition: background 160ms ease; } @media (hover: hover) and (pointer: fine) { .legal-back--bottom a:hover { background: var(--accent-turquoise-tint); } } .legal-back--bottom a:focus-visible { background: var(--accent-turquoise-tint); outline: none; } .legal-back--bottom a:focus-visible { color: var(--accent-turquoise); } .legal-meta { margin-top: 0.4rem; margin-bottom: 1.4rem; font-size: 0.85rem; color: var(--text-muted); } .legal-draft-banner { background: rgba(184, 134, 45, 0.10); border: 1px solid rgba(184, 134, 45, 0.35); color: var(--warning); padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.85rem; margin-bottom: 1.5rem; } /* In-flow emphasis paragraph used in legal pages to flag important anonymity/visibility caveats (Privacy Policy §2.1). Warm warning tone consistent with the draft banner. */ .legal-warning { color: var(--warning); font-weight: 600; margin-top: 0.6rem; margin-bottom: 0.4rem; } /* ========================================================================== About page (about.html) — landing-page-lite layout on legal-page base. Reuses .legal-back, .legal-meta, .legal-draft-banner from privacy/terms. Skeleton stage — final wording & visual polish in M14. ========================================================================== */ body.about-page { /* Subtle atmospheric mesh across the whole page — painted feel, 4-corner washes per M12 Frost atmosphere. PERF-002/011 (Stage 1 review): `background-attachment: fixed` removed — iOS Safari paint cliff (WebKit #155198) caused white-flash on fast scroll on long-scroll pages. Scroll-attached mesh paints once, scrolls with content; the atmospheric feel is identical for the user but GPU-cheap. */ background: radial-gradient(ellipse 55% 45% at 0% 0%, var(--frost-wash-teal) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 100% 0%, var(--frost-wash-plum) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 0% 100%, var(--frost-wash-copper) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 100% 100%, var(--frost-wash-plum) 0%, transparent 60%), var(--cream-base); } .about-content { max-width: 840px; margin: 0 auto; padding: 2rem 1.25rem 5rem; line-height: 1.7; color: var(--text-dark); } /* Hero — bigger Cormorant headline + italic tagline. Generous space below. */ .about-hero { text-align: center; padding: 1.5rem 0 1rem; } .about-hero h1 { /* Aurora gradient — same DNA as privacy/terms h1, but bigger + brand-scale. about.html is the brand landing tone, not section title. */ font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: 0.025em; line-height: 1.15; margin: 0 0 0.85rem; background: linear-gradient(120deg, var(--accent-violet) 0%, var(--accent-turquoise) 50%, var(--accent-copper) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .about-hero__tagline { /* Bumped 300 → 600 (Petřin pokyn 2026-05-15 „aspoň semibold pro čitelnost"). Barva zachována na text-muted (Petřin postřeh „fialová byla dobrá, ta navy byla mimo design") — gray-blue na warm cream čte oko jako lehce fialově-tlumenou, fits Frisson atmospheric paletě lépe než navy. */ font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: 0.015em; color: var(--text-muted); margin: 0; } /* Sections — generous vertical rhythm, no hard borders, atmospheric. */ .about-section { margin: 2.6rem 0; } .about-section h2 { /* Cormorant 600 turquoise — same as legal-content h2 (bumped 500 → 600 per Petřin pokyn 2026-05-15 „aspoň semibold pro čitelnost"). */ font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: 0.02em; color: var(--accent-turquoise); margin: 0 0 0.75rem; } .about-section p { font-family: var(--font-body); font-size: 1rem; color: var(--text-dark); margin: 0 0 0.85rem; /* Full container width — aligns the text edge with the pillar-card row (Petřin pokyn 2026-06-07; the old 64ch measure ended mid-row). */ } .about-section a { color: var(--accent-turquoise); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .about-section a:hover, .about-section a:focus-visible { color: var(--accent-copper); } .about-section code { background: var(--cream-sunken); color: var(--text-dark); padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid var(--border-on-light); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.92em; } /* 3-pillar grid — desktop 3 cols, mobile stack. M16 legal-final: cards rebuilt per designer handoff docs/handoff/frisson-about-handoff/about-how-it-works.html — duotone medallion icons, numbered steps, accent kickers. */ .about-pillars { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 1.6rem; } @media (min-width: 861px) { .about-pillars { grid-template-columns: repeat(3, 1fr); } } .about-pillar { position: relative; overflow: hidden; padding: 30px 28px; border-radius: var(--radius-lg); background: linear-gradient(168deg, var(--cream-lifted), var(--cream-surface) 70%); border: 1px solid var(--border-on-light); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); } .about-pillar::after { /* Accent aura per card — colour set by the --aura custom prop below. */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; background: radial-gradient(120% 80% at 0% 0%, var(--aura), transparent 55%); } @media (hover: hover) and (pointer: fine) { .about-pillar:hover { transform: translateY(-4px); } } /* Per-card accent (handoff: magenta · iris · teal mapped to app tokens — Echo = mine, map browsing = violet, concerts = turquoise). */ .about-pillar--echo { --accent: var(--accent-mine); --aura: rgba(var(--accent-mine-rgb), 0.10); } .about-pillar--map { --accent: var(--accent-violet); --aura: rgba(var(--accent-violet-rgb), 0.12); } .about-pillar--concerts { --accent: var(--accent-turquoise); --aura: rgba(var(--accent-turquoise-rgb), 0.10); } /* Step index — top-right "01 / 02 / 03", number in the card accent. */ .about-pillar__step { position: absolute; top: 22px; right: 24px; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--text-muted); font-variant-numeric: tabular-nums; } .about-pillar__step b { color: var(--accent); } /* Icon medallion — 74px tinted plate, duotone 42px glyph inside. */ .about-pillar__medallion { position: relative; width: 74px; height: 74px; border-radius: var(--radius-lg); display: grid; place-items: center; background: linear-gradient( 150deg, color-mix(in oklab, var(--accent) 26%, transparent), color-mix(in oklab, var(--accent) 8%, transparent) ); border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--accent) 30%, transparent), 0 12px 30px -16px color-mix(in oklab, var(--accent) 70%, transparent); } .about-pillar__medallion svg { width: 42px; height: 42px; display: block; } .about-pillar__eyebrow { margin: 22px 0 0; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-2xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); } .about-pillar__label { margin: 7px 0 0; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: var(--fs-xl); letter-spacing: -0.005em; color: var(--text-dark); } /* Two classes so the dim actually wins over `.about-section p` above (single class lost on specificity → the body stayed near-white). */ .about-pillar p.about-pillar__desc { margin: 11px 0 0; font-family: var(--font-body); /* Per designer mockup (frisson-about-handoff `.card p`): 13.5px body in --moon-muted = our --text-muted, one clear step below the Cormorant title. Nearest scale token for 13.5px is --fs-sm (13px). */ font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.62; text-wrap: pretty; } /* Section subtitle under the "How it works" heading (designer handoff). */ .about-section__sub { color: var(--text-muted); } /* Coda — final album line, sign-off treatment (italic Cormorant, centered, subtle top divider, slightly violet/turquoise emphasis on key words). */ .about-section--coda { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-on-light); text-align: center; } .about-section--coda p { /* Bumped 400 → 600 (Petřin pokyn 2026-05-15 „aspoň semibold pro čitelnost"). Italic Cormorant 600 zachová sign-off feel ale je solidně čitelný. */ max-width: 56ch; margin-inline: auto; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 1.1rem; color: var(--text-dark); } .about-section--coda em { font-style: italic; color: var(--accent-violet-bright); } .about-section--coda strong { font-weight: 600; font-style: normal; color: var(--accent-turquoise); } /* Reduced motion — fixed background can feel heavy on low-power devices; detach so the page scrolls plain. No animations to disable here. */ /* Tablet/mobile padding tweaks. */ @media (max-width: 540px) { .about-content { padding: 1.5rem 1rem 3.5rem; } .about-hero { padding: 1rem 0 0.5rem; } .about-section { margin: 2rem 0; } .about-section--coda { margin-top: 3rem; padding-top: 1.5rem; } } /* Soft variant of dialog-hint — used for the "Sign in / Register for higher limits" hint at the bottom of the anonymous pin form. Less visual weight than the regular hint so it doesn't compete with the primary action. */ .dialog-hint--soft { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin: 0.6rem 0 0; line-height: 1.5; } .dialog-hint--soft .btn-link { font-size: inherit; color: var(--accent-turquoise); } /* Spam-folder note in the verify / reset-password dialogs — styled exactly like .form-error per Petra (2026-06-07): the two alternate in the same slot (authUI.js hides the note while an error is shown), so they share one look. Compound selector so the generic `.dialog-hint` (defined later in this file) doesn't win. */ .dialog-hint.dialog-hint--spam { color: var(--danger-text); font-size: 0.85rem; font-weight: 600; } /* The generic `#pin-form button` rule (border + 0.65rem 1.3rem padding) inherits a higher specificity than `.btn-link`, so without an explicit override the Sign in / Register links inside #pin-form-auth-hint render as big bordered buttons and wrap awkwardly across two lines. Reset them back to plain text-links here. */ #pin-form .btn-link { border: none; padding: 0.2rem 0; font-weight: 600; background: transparent; border-radius: 0; } @media (hover: hover) and (pointer: fine) { #pin-form .btn-link:hover { background: transparent; border-color: transparent; transform: none; color: var(--accent-copper); } } /* Keep "Want to manage your pins later?" + the two link buttons on a single visual row when they fit, and wrap as a tight group (with the "or" sticking to the surrounding link) when they don't. flex-wrap + gap avoids the previous "Sign in or Sign up" stagger. */ #pin-form-auth-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.4rem; } /* Consent checkbox label — primary commitment line + a quieter sub-line for the withdrawal note, so the block reads as hierarchy instead of one heavy wall of text (M12.X auth review 2026-05-31, Petřin pokyn). Privacy/Terms stay reachable via the page footer + the Google consent line above. */ .consent-text { display: flex; flex-direction: column; gap: 0.15rem; } .consent-text__note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; } /* ========================================================================== Pin popup (Leaflet) — avatar + nick + optional comment. ========================================================================== */ /* Map popups (echo / concert / POI) must open ABOVE the hero pills (.hero-badges, z-index 1000) — a user-opened popup outranks the ambient "N new echoes" / chart-leader pills. Leaflet's default popupPane is 700; lift it just past the pills, still below the hero panel + dialogs. */ .leaflet-popup-pane { z-index: 1001; } /* Leaflet's own popup chrome — Frisson Frost atmospheric (M12 rollout 2026-05-14): atmospheric mesh wash + multi-color halo + copper top hairline + plum left rim. 5 barev v ko-existenci na 1 komponentě, halo glow místo solid border. */ .leaflet-popup-content-wrapper { /* M12 Noir PR5 ② — per-entity edge tone (Petřin pokyn 2026-05-25). Default = iris (moment/pin); concert + landmark wrappers override to teal / gold below. The top hairline + left rim (::before/::after) read this so the popup's colour signals which entity you're looking at. */ --popup-edge: var(--accent-violet); --popup-edge-rgb: var(--accent-violet-rgb); background: radial-gradient(at 0% 100%, rgba(var(--popup-edge-rgb), 0.10) 0%, transparent 55%), var(--cream-surface); color: var(--text-dark); border-radius: var(--radius-md); border: 1px solid var(--border-on-light); box-shadow: var(--halo-multi); position: relative; overflow: hidden; /* Override Leaflet's default 300px popup width cap. */ max-width: 520px !important; } /* Top hairline — atmospheric "spotlight kiss" in the entity tone. */ .leaflet-popup-content-wrapper::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; background: linear-gradient(90deg, transparent, var(--popup-edge) 50%, transparent); opacity: 0.95; pointer-events: none; z-index: 1; } /* Left rim — decorative accent in the entity tone. */ .leaflet-popup-content-wrapper::after { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; background: linear-gradient(180deg, transparent, var(--popup-edge) 50%, transparent); border-radius: 0 2px 2px 0; pointer-events: none; z-index: 1; } /* Same belt-and-braces on the inner content cell. */ .leaflet-popup-content { max-width: 100% !important; } .leaflet-popup-tip { background: var(--cream-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); } .leaflet-popup-content { margin: 0.85rem 1rem; font-family: inherit; font-size: 0.9rem; line-height: 1.4; color: var(--text-dark); } .leaflet-container a.leaflet-popup-close-button, .map-legend__close { /* M12 Noir PR5 ② — round close button matching the mockups (Petřin pokyn 2026-05-25): the IS the circle (no ::before, avoids the stacking/ centring fight), inset from the corner so the rounded popup edge doesn't clip it, light × centred via flex. ~32px (slightly under the 44 tap ideal — accepted to match the mockup chip size on this beta surface). PR5 ④ — the map legend's × reuses this exact chip (Petřin pokyn 2026-05-25 "použij standardní tlačítko pro popup"); it's a