/* Mundo — styles per design_tokens.md (authoritative; values verbatim). Tailwind (CDN) is available for layout utilities; everything with an exact token value lives here so nothing gets rounded to Tailwind steps. */ /* Theme tokens. "Paper" (light) is the default set below; "Midnight" (dark) overrides them under body[data-mode="dark"]. Author-chosen per profile and server-rendered onto , so a page renders in one theme for everyone. Token vocabulary is Claude Design's (MIDNIGHT-THEME.md) — kept verbatim so future design handoffs paste in without translation. Cover art is content, not chrome: cover tiles keep their own gradients in both themes. */ :root { /* PAPER (light) */ color-scheme: light; --bg:#f6f3ec; --panel:#ffffff; --panel-2:#faf8f3; --nav-bg:rgba(250,248,243,.86); --ink:#211d18; --ink-inv:#f6f3ec; --text-2:#6f685d; --text-3:#8a8275; --mono:#a79f92; --mono-2:#bdb5a8; --faint:#c2bbac; --hair:rgba(0,0,0,.08); --hair-soft:rgba(0,0,0,.055); --hair-strong:rgba(0,0,0,.13); --chip:rgba(0,0,0,.05); --scroll:rgba(0,0,0,.13); --avatar-text:#5b5142; --av1:#e8dfcf; --av2:#cebfa4; --dot:#e4ddd0; --tile:#f1ede4; --overlay:rgba(33,29,24,.32); --glow:rgba(206,191,164,.4); /* message banners (not in the design palette — added for the editor) */ --ok-bg:#e8efe4; --ok-text:#3a4a30; --err-bg:#f3e2de; --err-text:#8c3b2e; } body[data-mode="dark"] { /* MIDNIGHT (dark) — verbatim from MIDNIGHT-THEME.md */ color-scheme: dark; --bg:#0f131a; --panel:#171b23; --panel-2:#141821; --nav-bg:rgba(20,24,33,.82); --ink:#e9edf4; --ink-inv:#0f131a; --text-2:#97a1b1; --text-3:#808b9c; --mono:#7986a0; --mono-2:#6b7688; --faint:#565f70; --hair:rgba(255,255,255,.08); --hair-soft:rgba(255,255,255,.06); --hair-strong:rgba(255,255,255,.15); --chip:rgba(255,255,255,.06); --scroll:rgba(255,255,255,.16); --avatar-text:#dfe6f2; --av1:#3a4763; --av2:#5b6b8a; --dot:rgba(255,255,255,.14); --tile:rgba(255,255,255,.06); --overlay:rgba(0,0,0,.55); --glow:rgba(96,116,150,.32); /* readable dark variants of the banner colors */ --ok-bg:#1c2a1a; --ok-text:#a9c99b; --err-bg:#2e1a16; --err-text:#e6a99e; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background .3s ease, color .3s ease; } ::selection { background: var(--ink); color: var(--ink-inv); } a { color: inherit; } /* ---------- Profile page ---------- */ .profile-container { max-width: 880px; /* design_handoff_mundo: widened from 684 for hero + paired rows */ margin: 0 auto; padding: 52px 28px 140px; } .url-badge { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--mono); margin-bottom: 44px; } /* URL row becomes a space-between flex when the owner is viewing: URL left, owner cluster right. The row owns the 44px rhythm; the badge's own margin is reset inside the row (scoped, so the standalone .url-badge rule is untouched). flex-wrap lets the cluster drop below the URL on narrow screens. */ .url-badge-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 44px; } .url-badge-row .url-badge { margin-bottom: 0; } .owner-cluster { display: inline-flex; align-items: center; gap: 10px; } .owner-you { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--mono-2); } /* Status green, theme-independent. Hex fallback first for browsers without oklch (Safari < 15.4), then oklch where supported. */ .owner-you-dot { width: 5px; height: 5px; border-radius: 50%; background: #4fae6d; background: oklch(0.72 0.13 155); } .edit-page-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair-strong); background: var(--panel); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 12.5px; padding: 9px 15px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: background .15s, border-color .15s, color .15s; text-decoration: none; cursor: pointer; } .edit-page-btn:hover { background: var(--chip); } .profile-header { margin-bottom: 54px; } .profile-header .avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .avatar--initial { background: linear-gradient(150deg, var(--av1), var(--av2)); display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-weight: 500; font-size: 25px; color: var(--avatar-text); } .profile-header h1 { margin: 0; font-family: 'Newsreader', serif; font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -.022em; } .tagline { margin: 0; font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 30em; } .page-section { margin-bottom: 50px; } /* Title row + optional description; margin-bottom varies by style */ .section-top--covers { margin-bottom: 18px; } .section-top--list { margin-bottom: 8px; } .section-top--compact { margin-bottom: 6px; } .section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .section-title-row h2 { margin: 0; font-family: 'Newsreader', serif; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; } .source-tag { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; line-height: 1; letter-spacing: .07em; text-transform: uppercase; color: var(--mono-2); text-decoration: none; white-space: nowrap; } a.source-tag { color: var(--mono); } .section-desc { margin: 14px 0 0; font-family: 'Newsreader', serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 34em; } /* --- Covers style --- */ .covers-row { display: flex; gap: 13px; overflow-x: auto; padding: 1px 0 8px; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } .covers-row::-webkit-scrollbar { height: 7px; } .covers-row::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 99px; } .cover { flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; overflow: hidden; box-shadow: 0 2px 7px rgba(0,0,0,.15); /* --cover-color set inline per item (deterministic palette pick) */ background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.3)), var(--cover-color, #36424a); text-decoration: none; } .cover--image { background-size: cover; background-position: center; } .cover--film { width: 112px; aspect-ratio: 2/3; border-radius: 5px; } .cover--game { width: 104px; aspect-ratio: 3/4; border-radius: 5px; } .cover--book { width: 104px; aspect-ratio: 2/3; border-radius: 4px; } .cover--music { width: 122px; aspect-ratio: 1/1; border-radius: 4px; } .cover-title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 15px; line-height: 1.16; color: rgba(255,255,255,.96); text-wrap: balance; } .cover--game .cover-title, .cover--book .cover-title, .cover--music .cover-title { font-size: 14px; line-height: 1.18; } .cover-sub { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 9px; line-height: 1.2; letter-spacing: .04em; color: rgba(255,255,255,.5); margin-top: 4px; } /* --- Layout roles (design_handoff_mundo): hero + half/paired sections --- */ /* h2-qualified to outrank `.section-title-row h2` (equal specificity, later wins) */ h2.section-title--hero { font-family: 'Newsreader', serif; font-weight: 500; font-size: 27px; line-height: 1.15; letter-spacing: -.014em; margin: 0; } .section-desc--hero { font-size: 15.5px; color: var(--text-3); } .covers-row--hero { gap: 16px; } .cover.cover-hero { width: 150px; border-radius: 6px; padding: 15px; box-shadow: 0 3px 12px rgba(0,0,0,.17); } .cover.cover-hero .cover-title { font-size: 18px; line-height: 1.14; } .cover.cover-hero .cover-sub { font-size: 9.5px; margin-top: 5px; } .page-section--hero { margin-bottom: 0; } .hero-divider { height: 1px; background: var(--hair); margin: 34px 0 32px; } /* Two adjacent "half" sections pair into this grid; a lone half sits in the left cell. align-items:start so a short column never stretches to match the taller one (tile heights match, row containers need not). */ .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 50px; } .twocol .page-section--half { margin-bottom: 0; min-width: 0; } h2.section-title--half { font-family: 'Newsreader', serif; font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; margin: 0; } .section-desc--half { font-size: 14.5px; color: var(--text-3); margin-top: 8px; } .covers-row--half { gap: 12px; } /* C "image rows": tiles are HEIGHT-matched at 128px; width varies by cover kind so shapes stay honest (match height, not width — per the handoff). */ .cover.cover-half { height: 128px; border-radius: 5px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.16); } .cover-half.cover--music { width: 128px; } .cover-half.cover--game { width: 96px; padding: 11px; } .cover-half.cover--film, .cover-half.cover--book { width: 85px; } .cover.cover-half .cover-title { font-size: 14px; line-height: 1.16; } .cover.cover-half .cover-sub { font-size: 9px; margin-top: 3px; letter-spacing: .03em; } @media (max-width: 640px) { .twocol { grid-template-columns: 1fr; gap: 34px; } } /* --- List style --- */ .list-row { display: flex; gap: 15px; padding: 14px 0; border-top: 1px solid var(--hair); } .list-num { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; line-height: 1.6; color: var(--faint); width: 16px; flex-shrink: 0; } .list-name { font-weight: 600; font-size: 15.5px; line-height: 1.4; } .list-name a { text-decoration: none; } .list-name a:hover { text-decoration: underline; } .list-note { font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin-top: 1px; } /* --- Compact style --- */ .compact-row { padding: 11px 0; border-top: 1px solid var(--hair-soft); font-size: 15.5px; line-height: 1.55; } .compact-name { font-weight: 600; color: var(--ink); } .compact-dash { color: var(--mono-2); } .compact-note { font-weight: 400; color: var(--text-2); } /* --- Section + page footers --- */ .section-updated { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--mono); } .page-footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; } .page-footer .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); } .page-footer .stamp { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: .04em; color: var(--mono); } .page-footer .stamp--attr { margin-left: auto; font-size: 9px; color: var(--mono-2); } .page-footer .stamp--attr a { color: inherit; } /* Overflow hardening (all widths). Long unbroken strings — a URL pasted as an item name/note — must wrap, never scroll the page. Targeted, not container-wide: mono metadata (url-badge, source-tag, stamps) must not break mid-token. `anywhere` (not break-word) because it lowers min-content — the only value that lets flex children actually shrink. .cover-title is bounded either way (.cover is overflow:hidden + fixed aspect-ratio) — wrapping just shows more of a long title before the clip. */ .list-row > div { min-width: 0; } .profile-header h1, .tagline, .section-title-row h2, .section-desc, .list-name, .list-note, .compact-row, .cover-title { overflow-wrap: anywhere; } /* Long title + nowrap source tag: the tag drops to its own line instead of overflowing (space-between row — wrap only fires where overflow would have). Footer: the attribution wraps below the timestamp and keeps its margin-left:auto right-alignment. */ .section-title-row { flex-wrap: wrap; gap: 6px 12px; } .page-footer { flex-wrap: wrap; row-gap: 10px; } /* Profile mobile pass — the public page's first/only breakpoint. 390px is the design width; 480 covers large phones (matches the editor MQ). Tile sizes are untouched at every width — the shelf scrolls full-bleed instead. No design doc specs public-page mobile; this block IS the spec. Placed last in the profile styles so equal-specificity overrides win by order. */ @media (max-width: 480px) { /* Sides 20 / bottom 100 copy the editor's mobile values; top 36 keeps ~0.7 of the editorial 52px (the profile is a page, not a tool). */ .profile-container { padding: 36px 20px 100px; } /* Vertical rhythm: ~0.75-0.8 compression of the biggest gaps. */ .url-badge, .url-badge-row { margin-bottom: 32px; } .profile-header { margin-bottom: 42px; } .page-section, .twocol { margin-bottom: 42px; } .hero-divider { margin: 28px 0 26px; } .page-footer { margin-top: 44px; } /* Name 40→32 (the landing carousel already renders this element at 32px Newsreader); avatar 54→46 keeps the desktop ratio; tagline steps down one vocabulary size. */ .profile-header h1 { font-size: 32px; line-height: 1.05; } .avatar { width: 46px; height: 46px; } .avatar--initial { font-size: 21px; } .tagline { font-size: 17px; } /* Standard h2 adopts the existing half-title size (at one column the roles converge); hero compresses 27→24. ORDER MATTERS: the hero rule must follow the generic one (equal specificity). */ .section-title-row h2 { font-size: 21px; } h2.section-title--hero { font-size: 24px; } /* Covers shelves go full-bleed: tiles slide under the viewport edge and the partial tile at the edge is the scroll affordance (peek). Padding keeps the resting position aligned to the 20px inset. Snap is proximity-only so flicks stay free; the thin scrollbar is desktop chrome, hidden here. */ .covers-row { margin: 0 -20px; padding: 1px 20px 8px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 20px; } .covers-row::-webkit-scrollbar { display: none; } .cover { scroll-snap-align: start; } } /* ---------- Landing page ---------- */ .landing-nav { max-width: 1080px; margin: 0 auto; padding: 26px 32px 0; display: flex; align-items: center; justify-content: space-between; } .wordmark { font-family: 'Newsreader', serif; font-weight: 600; font-size: 18px; letter-spacing: -.01em; text-decoration: none; } .nav-signin { font-weight: 600; font-size: 13px; color: var(--text-2); text-decoration: none; } .hero { max-width: 1200px; margin: 0 auto; padding: 64px 32px 80px; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: 48px; align-items: center; /* clip (not hidden) so the rotated card peek + enlarged glow can't push a horizontal scrollbar, while the card's vertical drop-shadow stays visible. */ overflow-x: clip; } .hero h1 { margin: 0; font-family: 'Newsreader', serif; font-weight: 500; font-size: 58px; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; } .hero-sub { font-weight: 400; font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 25em; margin: 24px 0 0; } .signup-pill { margin-top: 36px; display: flex; align-items: center; background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 11px; padding: 4px 4px 4px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); max-width: 430px; } .signup-pill .prefix { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 15px; color: var(--mono); white-space: nowrap; } .signup-pill input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 15px; color: var(--ink); padding: 10px 6px; } .signup-pill button, .pill-btn { display: inline-block; border: 0; cursor: pointer; background: var(--ink); color: var(--ink-inv); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 14px; padding: 13px 20px; border-radius: 8px; white-space: nowrap; text-decoration: none; } .fine-print { font-weight: 400; font-size: 13.5px; line-height: 1.5; color: var(--mono); margin-top: 16px; } /* Preview card (right column) */ .preview-wrap { position: relative; } .preview-glow { position: absolute; inset: -45px; background: radial-gradient(120% 90% at 70% 10%, var(--glow), transparent 70%); filter: blur(8px); } .carousel .preview-card { transform: none; } .preview-card { position: relative; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; transform: rotate(1.2deg); box-shadow: 0 34px 84px -26px rgba(0,0,0,.28), 0 6px 20px rgba(0,0,0,.06); overflow: hidden; } .preview-chrome { display: flex; align-items: center; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--hair-soft); } .preview-chrome .dot9 { width: 12px; height: 12px; border-radius: 50%; background: var(--dot); } .preview-chrome .mini-url { margin-left: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; letter-spacing: .04em; color: var(--mono); } .preview-body { background: var(--bg); padding: 34px 34px 40px; text-decoration: none; display: block; } .mini-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(150deg, var(--av1), var(--av2)); display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-weight: 500; font-size: 23px; color: var(--avatar-text); margin-bottom: 14px; } .mini-name { font-family: 'Newsreader', serif; font-weight: 500; font-size: 32px; letter-spacing: -.02em; } .mini-tagline { font-family: 'Newsreader', serif; font-style: italic; font-size: 17.5px; line-height: 1.45; color: var(--text-2); margin-top: 7px; max-width: 24em; } .mini-h2 { font-family: 'Newsreader', serif; font-weight: 500; font-size: 18px; margin: 25px 0 11px; } .mini-covers { display: flex; gap: 10px; overflow: hidden; } .mini-cover { position: relative; overflow: hidden; width: 76px; aspect-ratio: 2/3; border-radius: 4px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.3)), var(--cover-color, #36424a); box-shadow: 0 1px 4px rgba(0,0,0,.15); } /* Real cover art fills the tile; the --cover-color background shows only if the image fails to load. The ::after keeps the subtle tile gradient over the art. */ .mini-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mini-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.28)); pointer-events: none; } .mini-cover span { font-family: 'Newsreader', serif; font-weight: 500; font-size: 7.5px; line-height: 1.15; color: rgba(255,255,255,.96); } .mini-list-row { padding: 10px 0; border-top: 1px solid var(--hair-soft); font-size: 15px; line-height: 1.5; } .mini-list-row b { font-weight: 600; } .mini-list-row span { color: var(--text-2); } .mini-list-row .mdash { color: var(--mono-2); } /* Mini-cover shape variants */ .mini-cover--wide { aspect-ratio: 3/2; width: 92px; } .mini-cover--square { aspect-ratio: 1/1; width: 76px; } /* Style previews: tiny CSS mockups of the three display styles, shown under the kind/style selects in the editor. Display-only; the is-active card tracks the select via mundoStylePreview. Borrows the mini-cover gradient recipe at a smaller scale (the literal .mini-cover doesn't shrink). */ .style-preview { display: flex; gap: 8px; margin: 2px 0 12px; } .style-preview-card { flex: 1; max-width: 128px; border: 1px solid var(--hair); border-radius: 8px; padding: 8px 9px; background: var(--panel-2); opacity: .55; } .style-preview-card.is-active { border-color: var(--ink); opacity: 1; } .style-preview-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 7px; } .style-preview-covers { display: flex; gap: 4px; } .style-preview-covers i { width: 22px; aspect-ratio: 2/3; border-radius: 2px; background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.3)), var(--cover-color, #36424a); } .style-preview-row { padding: 3px 0; border-top: 1px solid var(--hair-soft); font-size: 8.5px; line-height: 1.4; color: var(--text-2); white-space: nowrap; overflow: hidden; } .style-preview-row:first-child { border-top: 0; } .style-preview-row b { font-weight: 600; color: var(--ink); } .style-preview-rows--compact .style-preview-row { padding: 2px 0; font-size: 8px; } /* The composer (type-first creation, mockups 1b-1d/1g): the pill input, federated results panel, confirm line, naming moment. */ .composer { margin-top: 4px; } .composer-pill { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 11px; padding: 15px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.05); } .composer-plus { font: 500 15px 'JetBrains Mono', monospace; color: var(--text-2); opacity: .6; } .composer-pill input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 16px 'Hanken Grotesk', system-ui, sans-serif; color: var(--ink); } .composer-pill input::placeholder { font: italic 400 16.5px 'Newsreader', serif; color: var(--text-2); opacity: .75; } .composer-enter { font: 500 9.5px 'JetBrains Mono', monospace; letter-spacing: .06em; color: var(--text-2); opacity: .6; white-space: nowrap; } .composer-results:not(:empty) { margin-top: 8px; background: var(--panel); border: 1px solid var(--hair); border-radius: 11px; box-shadow: 0 12px 32px -14px rgba(0,0,0,.16); overflow: hidden; } .composer-row { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 11px 16px; border: 0; border-top: 1px solid var(--hair-soft); background: transparent; cursor: pointer; font-family: 'Hanken Grotesk', system-ui, sans-serif; } .composer-row:first-child { border-top: 0; } .composer-row:hover { background: rgba(0,0,0,.03); } .composer-row:focus-visible, .composer-retry:focus-visible { background: rgba(0,0,0,.03); outline: 2px solid var(--ink); outline-offset: -2px; } .composer-row[disabled] { opacity: .5; cursor: default; } .composer-row--note { border-top-style: dashed; border-top-color: var(--hair-strong); } .composer-thumb { flex: none; width: 32px; height: 48px; border-radius: 3px; overflow: hidden; background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.3)), var(--cover-color, #36424a); box-shadow: 0 1px 3px rgba(0,0,0,.18); } .composer-thumb img { width: 100%; height: 100%; object-fit: cover; } .composer-note-mark { flex: none; width: 32px; text-align: center; color: var(--text-2); } .composer-row-text { flex: 1; min-width: 0; } .composer-row-title { display: block; font-weight: 600; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .composer-row-meta { display: block; margin-top: 3px; font: 500 9.5px 'JetBrains Mono', monospace; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .composer-row-meta--plain { font: 400 12.5px 'Hanken Grotesk', system-ui, sans-serif; text-transform: none; letter-spacing: 0; } .composer-chip { flex: none; font: 500 9.5px 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--hair-soft); border-radius: 5px; padding: 4px 8px; } .composer-zero { padding: 12px 16px 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); } .composer-retry { display: block; width: 100%; text-align: left; padding: 10px 16px; border: 0; border-top: 1px dashed var(--hair-strong); background: transparent; cursor: pointer; font: 400 12.5px 'Hanken Grotesk', system-ui, sans-serif; color: var(--text-2); } .composer-retry:hover { color: var(--ink); } .composer-door { margin: 9px 2px 26px; } .composer-door-link { border: 0; background: transparent; padding: 0; cursor: pointer; font: 400 13px 'Hanken Grotesk', system-ui, sans-serif; color: var(--text-2); } .composer-door-link:hover { color: var(--ink); text-decoration: underline; } .composer-confirm { margin: 9px 2px 0; font-size: 13px; color: var(--text-2); } .composer-confirm b { font-weight: 600; color: var(--ink); } .composer-confirm-check { color: #4a7c59; } .composer-confirm-sep { margin: 0 6px; color: var(--text-2); } .composer-confirm-link { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: var(--text-2); border-bottom: 1px solid var(--hair-strong); } .composer-confirm-link:hover { color: var(--ink); } /* First-run empty state (handoff §7, mockup 1a): the composer as the centerpiece. The lede and chip block only exist inside the --centered modifier; stripping that one class (X-Section-Created handler in base.html) collapses the empty-state chrome without a reload. */ .composer-lede, .composer-first-ideas { display: none; } .composer-zone--centered { max-width: 560px; margin: 52px auto 0; display: flex; flex-direction: column; gap: 14px; } .composer-zone--centered .composer { margin-top: 0; } .composer-zone--centered .composer-lede { display: block; margin: 0; text-align: center; font: italic 400 18px/1.5 'Newsreader', serif; color: var(--text-2); } .composer-zone--centered .composer-door { margin: 14px 2px 0; text-align: center; } .composer-zone--centered .composer-first-ideas { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 26px; /* mockup 1a: in ADDITION to the wrapper's 14px gap */ } .composer-ideas-kicker { font: 500 10px 'JetBrains Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--mono); } .composer-ideas-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .composer-first-ideas .editor-nudge-chip { padding: 8px 14px; font-weight: 500; font-size: 13px; } .composer-note-form { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; } .composer-note-form input { flex: 1; min-width: 140px; border: 1px solid var(--hair-strong); border-radius: 8px; padding: 8px 11px; background: var(--panel); color: var(--ink); font: 400 14px 'Hanken Grotesk', system-ui, sans-serif; } /* Swap panel (mockup 1f): a padded white card replacing the results list. Tile backgrounds mirror the public covers — gradient over real art, or the placeholder color with the name overlaid. */ .composer-results--swap:not(:empty) { border-radius: 12px; border-color: var(--hair); box-shadow: 0 1px 3px rgba(0,0,0,.05); padding: 22px 24px; overflow: visible; } .composer-swap-head { margin: 0; font: 500 18px 'Newsreader', serif; letter-spacing: -.01em; color: var(--ink); } .composer-swap-sub { margin: 6px 0 0; font: 400 13.5px/1.5 'Hanken Grotesk', system-ui, sans-serif; color: var(--text-2); } .composer-swap-sub b { font-weight: 600; color: var(--ink); } .composer-swap-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .composer-swap-tile { width: 76px; aspect-ratio: 2/3; border: 0; border-radius: 5px; padding: 9px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(0,0,0,.3)), var(--cover-color, #36424a); background-size: cover; background-position: center; box-shadow: 0 2px 7px rgba(0,0,0,.15); cursor: pointer; overflow: hidden; } .composer-swap-tile:hover, .composer-swap-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .composer-swap-name { font: 500 11px/1.16 'Newsreader', serif; color: rgba(255,255,255,.96); text-align: left; } .composer-swap-cancel { margin-top: 16px; border: 0; background: transparent; padding: 0; cursor: pointer; font: 400 13px 'Hanken Grotesk', system-ui, sans-serif; color: var(--text-2); border-bottom: 1px solid var(--hair-strong); } .composer-swap-cancel:hover { color: var(--ink); } /* Naming moment (mockup 1c): the new section card with the title as input. */ .editor-section--naming { border-color: var(--hair-strong); } .naming-head { display: flex; align-items: center; gap: 12px; } .naming-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; border-bottom: 1.5px solid var(--ink); font: 500 21px 'Newsreader', serif; letter-spacing: -.01em; color: var(--ink); padding: 2px 0; } .naming-hint { margin: 10px 0 14px; font: 400 13px/1.55 'Hanken Grotesk', system-ui, sans-serif; color: var(--text-2); } /* "Press Enter…" reads wrong on touch keyboards — the ≤480px media query at the end of this file swaps the spans (mockup 1j). */ .naming-hint-short { display: none; } .naming-slug { font: 500 10.5px 'JetBrains Mono', monospace; letter-spacing: .04em; color: var(--text-2); opacity: .8; } /* Input mode (section Settings): the cards ARE the Style control — each is a