/* Color themes and variables */ /* The Wyldcards palette. missing.css ships a warm grey scale and a navy accent, while this sheet, the landing page and the app icon were all drawn in slate and a brighter blue — so borders read blue-grey on beige-grey grounds and the two blues never matched. Re-tuning the scales missing.css builds every semantic token from brings its own rules along, and the semantic tokens below fix the hierarchy: muted text was nearly as dark as body text in light mode and nearly as bright in dark mode, and dark boxes jumped straight from near-black to mid-grey. gray-12 is the icon's ink. */ :root { --gray-0: #f8fafc; --gray-1: #f1f4f8; --gray-2: #e8edf3; --gray-3: #dde3ea; --gray-4: #cfd6df; --gray-5: #b3bcc8; --gray-6: #94a0ae; --gray-7: #7a8594; --gray-8: #5f6b7a; --gray-9: #4a5563; --gray-10: #343d4a; --gray-11: #1d2430; --gray-12: #0f1420; --blue-0: #eef5ff; --blue-1: #dce9ff; --blue-2: #bcd6ff; --blue-3: #93bcff; --blue-4: #6aa2fb; --blue-5: #4a8af2; --blue-6: #3474e0; --blue-7: #2968cf; --blue-8: #215bb8; --blue-9: #1d4f9f; --blue-10: #1a4586; --blue-11: #163a70; --blue-12: #112d56; --fg: var(--gray-12); --muted-fg: #56606e; --faded-fg: var(--gray-6); --bg: var(--gray-0); --plain-bg: var(--gray-1); --box-bg: var(--plain-bg); --interactive-bg: var(--gray-3); --accent: var(--blue-8); --muted-accent: var(--blue-5); } :root.-dark-theme { --fg: #e9eef4; --muted-fg: #a3aebb; --faded-fg: var(--gray-8); --bg: var(--gray-12); --plain-bg: #171d28; --box-bg: #1f2632; --interactive-bg: #2e3744; --plain-fg: var(--blue-3); --info-fg: var(--blue-3); --accent: #7cb3ff; --muted-accent: var(--blue-5); } @media (prefers-color-scheme: dark) { :root:not(.-no-dark-theme) { --fg: #e9eef4; --muted-fg: #a3aebb; --faded-fg: var(--gray-8); --bg: var(--gray-12); --plain-bg: #171d28; --box-bg: #1f2632; --interactive-bg: #2e3744; --plain-fg: var(--blue-3); --info-fg: var(--blue-3); --accent: #7cb3ff; --muted-accent: var(--blue-5); } } :root { --border: #cbd5e1; --accent-bg: rgba(0, 0, 0, 0.05); --text: var(--fg); --muted: var(--muted-fg); /* Screenplay text zoom (A−/A+); 1 = 12pt industry default. text-size.js writes the base value; --wyldcards-text-scale is what every rule actually reads, so page view can fold the canvas zoom into it without touching those rules. */ --wyldcards-base-text-scale: 1; --wyldcards-text-scale: var(--wyldcards-base-text-scale, 1); /* Page canvas zoom; page-zoom.js overwrites this on . */ --wyldcards-page-zoom: 1; /* Tint for selected blocks; see the block-selection rules at the end. */ --block-selection-tint: color-mix(in srgb, var(--accent, #2563eb) 16%, transparent); /* Block highlight tints; kept light enough for body text to stay readable. */ --block-highlight-yellow: #fdf3d3; --block-highlight-green: #dff2e3; --block-highlight-blue: #dbe9f8; --block-highlight-red: #fbe0dd; --block-highlight-gray: #e9ecef; color-scheme: light; } /* Cross-document transitions complement HTMX's same-document swaps. Browsers that do not implement the API continue with ordinary navigation. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root) { animation: 120ms ease-out both wyldcards-page-exit; } ::view-transition-new(root) { animation: 180ms ease-out both wyldcards-page-enter; } } @keyframes wyldcards-page-exit { to { opacity: 0; } } @keyframes wyldcards-page-enter { from { opacity: 0; } } /* Comments live in the workbench's right panel. Closed, they are one slim line; the toolbar's Comments button opens them too. */ .wyldcards-card-comments { box-sizing: border-box; width: 100%; margin: 1rem 0 0; } .wyldcards-side > .wyldcards-card-comments:first-child { margin-top: 0; } .wyldcards-card-comments-details { position: relative; margin: 0; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 0.65rem; /* --gray-0 is white in both themes; the box ground follows the theme. */ background: var(--box-bg, #fff); overflow: visible; } /* Open, it scrolls inside a capped height rather than squeezing the card above it out of the fixed-height page. */ .wyldcards-card-comments-details[open] { max-height: min(40vh, 22rem); padding-bottom: 0.75rem; overflow-y: auto; overscroll-behavior: contain; } .wyldcards-comment-form textarea::placeholder { text-align: start; } .wyldcards-transfer-tools input[type="search"]::placeholder { text-align: start; } /* Doubled class: missing.css's `details > summary:first-of-type` would otherwise make this a list item, adding its own ▶ beside ours. */ .wyldcards-card-comments-details > .wyldcards-card-comments-header { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; padding: 0.1rem 0; list-style: none; cursor: pointer; } .wyldcards-card-comments-header h2 { font-size: 0.95rem; line-height: 1.4; } .wyldcards-card-comments-header .muted { font-size: 0.85rem; white-space: nowrap; } .wyldcards-card-comments-header::-webkit-details-marker { display: none; } .wyldcards-comments-close { display: none; } .wyldcards-card-comments-details[open] > .wyldcards-comments-close { display: inline-flex; position: absolute; top: 0.4rem; right: 0.75rem; min-height: 0; padding: 0.2rem 0.45rem; font-size: 0.8rem; text-align: start; } .wyldcards-card-comments-header::before { content: "▸"; font-size: 0.8rem; } .wyldcards-card-comments-details[open] > .wyldcards-card-comments-header { margin-bottom: 0.6rem; padding-right: 4.5rem; } .wyldcards-card-comments-details[open] > .wyldcards-card-comments-header::before { content: "▾"; } .wyldcards-comment > header { display: flex; align-items: baseline; gap: 0.6rem; } .wyldcards-card-comments-header h2, .wyldcards-comment p { margin: 0; } .wyldcards-comment-list { display: grid; gap: 0.5rem; padding: 0; margin: 0.6rem 0; max-block-size: min(14rem, 28vh); overflow-y: auto; list-style: none; } .wyldcards-comment { padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .wyldcards-comment time { color: var(--muted); font-size: 0.85rem; } .wyldcards-comment-delete { margin-left: auto; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 0.8rem; text-decoration: underline; } .wyldcards-comment-form { display: grid; gap: 0.35rem; } .wyldcards-comment-form textarea { width: 100%; resize: vertical; } .wyldcards-comment-form button { justify-self: start; } .wyldcards-comment-notice { color: var(--error, #b91c1c); } .wyldcards-compare-page { max-width: none; padding: 1rem; } .wyldcards-compare-header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; } .wyldcards-compare-header h1, .wyldcards-compare-pane h2 { margin: 0; } .wyldcards-compare-picker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .wyldcards-compare-picker label { font-weight: 600; } .wyldcards-compare-options { display: grid; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: 0.35rem 0.75rem; margin: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; } .wyldcards-compare-options legend { padding: 0 0.25rem; font-weight: 600; } .wyldcards-compare-option { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; } .wyldcards-compare-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wyldcards-compare-selection { flex-basis: 100%; margin: 0; } .wyldcards-compare-empty { padding: 2rem; text-align: center; border: 1px dashed var(--border); border-radius: 0.5rem; } .wyldcards-compare-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1rem; } .wyldcards-compare-pane { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 0.65rem; background: var(--gray-0, #fff); box-shadow: 0 0.4rem 1.25rem rgb(15 23 42 / 0.12); } .wyldcards-compare-titlebar { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--accent-bg); } .wyldcards-compare-open { margin-left: auto; font-size: 0.875rem; } .wyldcards-compare-window-dot { width: 0.7rem; height: 0.7rem; flex: 0 0 auto; border-radius: 50%; background: var(--accent, #2563eb); } .wyldcards-compare-frame { width: 100%; height: calc(100vh - 15rem); min-height: 38rem; border: 0; } @media (max-width: 800px) { .wyldcards-compare-header { align-items: start; flex-direction: column; } .wyldcards-compare-panes { grid-template-columns: 1fr; } .wyldcards-compare-options { grid-template-columns: 1fr; width: 100%; } .wyldcards-compare-frame { height: 42rem; } } :root.-dark-theme { --border: #3a4453; --accent-bg: rgba(255, 255, 255, 0.08); /* The dark accent is a pale blue: ink on it is the dark ground, not white. */ --accent-contrast: var(--bg, #121210); --block-highlight-yellow: #4b3c14; --block-highlight-green: #1f4029; --block-highlight-blue: #1c3a55; --block-highlight-red: #4d2724; --block-highlight-gray: #3a4250; color-scheme: dark; } nav[aria-label="Breadcrumb"] { font-size: 1.05rem; } nav[aria-label="Breadcrumb"] ol { list-style: none; margin: 0; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; } nav[aria-label="Breadcrumb"] ol > li { display: inline-flex; align-items: center; min-width: 0; } nav[aria-label="Breadcrumb"] ol > li + li::before { content: '›'; margin-right: 0.5rem; color: var(--muted-fg, #64748b); } nav[aria-label="Breadcrumb"] ol > li:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-color-scheme: dark) { :root:not(.-no-dark-theme) { --border: #3a4453; --accent-bg: rgba(255, 255, 255, 0.08); --accent-contrast: var(--bg, #121210); --block-highlight-yellow: #4b3c14; --block-highlight-green: #1f4029; --block-highlight-blue: #1c3a55; --block-highlight-red: #4d2724; --block-highlight-gray: #3a4250; color-scheme: dark; } } /* Global transitions for a premium dark mode toggle feel */ body, main, header, nav, footer, table, tr, td, th, input, textarea, button, select, .help-card{ transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* Named action classes below cover the main screens. These fallback rules keep older and inline form actions in the same visual system rather than letting missing.css choose a different button treatment. */ button:not([class]), a[role="button"]:not([class]) { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; padding: 0.4rem 0.7rem; border: 1px solid var(--border, #cbd5e1); border-radius: 7px; background: var(--box-bg, #ffffff); color: var(--fg, inherit); font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, opacity 0.15s ease; } button:not([class]):hover, a[role="button"]:not([class]):hover { border-color: var(--accent, #475569); background: var(--accent-bg, rgba(0, 0, 0, 0.03)); color: var(--accent, #475569); } button:not([class]):focus-visible, a[role="button"]:not([class]):focus-visible { border-color: var(--accent, #475569); outline: 2px solid color-mix(in srgb, var(--accent, #475569) 40%, transparent); outline-offset: 2px; } button:not([class]):disabled { opacity: 0.45; cursor: not-allowed; } button.bad:not(.wyldcards-list-action-btn):not(.user-form-delete), a.bad[role="button"]:not(.wyldcards-list-action-btn):not(.user-form-delete) { border-color: rgba(211, 47, 47, 0.35); background: rgba(211, 47, 47, 0.08); color: var(--bad-fg, #d32f2f); font-weight: 600; } button.bad:not(.wyldcards-list-action-btn):not(.user-form-delete):hover, button.bad:not(.wyldcards-list-action-btn):not(.user-form-delete):focus-visible, a.bad[role="button"]:not(.wyldcards-list-action-btn):not(.user-form-delete):hover, a.bad[role="button"]:not(.wyldcards-list-action-btn):not(.user-form-delete):focus-visible { border-color: var(--bad-fg, #d32f2f); background: rgba(211, 47, 47, 0.14); color: var(--bad-fg, #d32f2f); } /* Header action buttons (help, settings, user) */ .header-actions { position: absolute; top: 0.35rem; right: 0.5rem; display: flex; align-items: center; z-index: 1001; } .header-actions-group { display: inline-flex; align-items: center; gap: 0.15rem; height: 2.25rem; padding: 0 0.2rem; box-sizing: border-box; background: var(--interactive-bg); border: 1px solid var(--muted-fg); border-radius: var(--border-radius); } .header-actions .help-dropdown, .header-actions .settings-dropdown, .header-actions .user-dropdown-container { position: relative; } /* User dropdown in header */ .user-dropdown-container { z-index: 1001; } .user-dropdown-container .user-toggle-btn { background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease; width: 36px; height: 36px; font: inherit; text-decoration: none; } .user-dropdown-container .user-toggle-btn:hover, .user-dropdown-container .user-toggle-btn:focus { background-color: var(--accent-bg); transform: scale(1.1); color: var(--accent); outline: none; } .user-dropdown-container .user-icon { flex-shrink: 0; } .user-dropdown-container .nav-dropdown-item.active, .user-dropdown-container .theme-option.active, html[data-theme-setting="light"] .user-dropdown-container .theme-option[data-theme="light"], html[data-theme-setting="dark"] .user-dropdown-container .theme-option[data-theme="dark"], html[data-theme-setting="system"] .user-dropdown-container .theme-option[data-theme="system"] { background-color: var(--accent-bg); color: var(--accent); font-weight: 600; } .user-menu-label { padding: 0.35rem 0.65rem 0.15rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #888); user-select: none; } .user-dropdown-container .theme-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; } .user-dropdown-container .theme-option svg { flex-shrink: 0; margin-right: 0 !important; } .user-dropdown-container .theme-option::after { content: ''; margin-left: auto; width: 1rem; text-align: center; flex-shrink: 0; } html[data-theme-setting="light"] .user-dropdown-container .theme-option[data-theme="light"]::after, html[data-theme-setting="dark"] .user-dropdown-container .theme-option[data-theme="dark"]::after, html[data-theme-setting="system"] .user-dropdown-container .theme-option[data-theme="system"]::after { content: '✓'; color: var(--accent); font-weight: 700; } /* Help, settings, and user icon dropdowns */ .help-dropdown, .settings-dropdown, .user-dropdown-container { display: inline-flex; align-items: center; } .help-dropdown .help-toggle-btn{ background: none; border: none; cursor: pointer; padding: 0.5rem; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease; width: 36px; height: 36px; font: inherit; text-decoration: none; } .help-dropdown .help-toggle-btn:hover, .help-dropdown .help-toggle-btn:focus{ background-color: var(--accent-bg); transform: scale(1.1); color: var(--accent); outline: none; } .help-dropdown .help-icon{ flex-shrink: 0; } .header-actions .help-toggle-label { display: none; } .help-dropdown .nav-dropdown-item.active { background-color: var(--accent-bg); color: var(--accent); font-weight: 600; } .help-dropdown .nav-dropdown-menu.help-dropdown-menu { min-width: 16.5rem; max-width: min(20rem, calc(100vw - 1.5rem)); } .help-feature-search { padding: 0.2rem 0.2rem 0.15rem; } .help-feature-search-input { width: 100%; box-sizing: border-box; padding: 0.45rem 0.65rem; border: 1px solid var(--border, #e0e0e0); border-radius: 0.45rem; background: var(--bg, #ffffff); color: var(--fg, #333333); font: inherit; font-size: 0.875rem; line-height: 1.35; } .help-feature-search-input:focus { outline: none; border-color: var(--accent, #475569); box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.15); } .help-feature-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .help-feature-search-results { display: flex; flex-direction: column; gap: 0.1rem; max-height: 14rem; overflow-y: auto; margin-top: 0.35rem; } .help-feature-search-results .nav-dropdown-item { white-space: normal; } .help-feature-search-empty { margin: 0.45rem 0.65rem 0.15rem; font-size: 0.8rem; text-align: left; } .help-feature-search-no-match { margin-top: 0.2rem; } .help-feature-group-label { margin: 0.5rem 0.65rem 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-fg, #6b7280); } .help-feature-search-results .help-feature-result { flex-direction: column; align-items: flex-start; gap: 0.1rem; padding-top: 0.4rem; padding-bottom: 0.4rem; } .help-feature-result-title { font-weight: 600; font-size: 0.875rem; line-height: 1.3; } .help-feature-result-desc { font-size: 0.75rem; line-height: 1.3; color: var(--muted-fg, #6b7280); } .help-feature-result:hover .help-feature-result-desc, .help-feature-result:focus-visible .help-feature-result-desc { color: inherit; opacity: 0.85; } .help-feature-match { padding: 0; background: transparent; color: var(--accent, inherit); font-weight: 700; } .help-feature-search-more { font-size: 0.8rem; white-space: normal; } .header-actions-group .help-toggle-btn, .header-actions-group .user-toggle-btn { width: auto; height: auto; min-width: 2rem; min-height: 2rem; padding: 0.15em 0.35em; border-radius: calc(var(--border-radius) - 2px); } .header-actions-group .help-toggle-btn:hover, .header-actions-group .help-toggle-btn:focus, .header-actions-group .user-toggle-btn:hover, .header-actions-group .user-toggle-btn:focus { transform: none; filter: brightness(1.1); } .header-actions-group .help-icon, .header-actions-group .user-icon { width: 20px; height: 20px; } /* Spellcheck Icon States */ html[data-spellcheck="false"] .spellcheck-toggle-btn .spellcheck-slash { display: block; } html[data-spellcheck="false"] .spellcheck-toggle-btn .spellcheck-check { opacity: 0.3; } html[data-spellcheck="false"] .spellcheck-toggle-btn:not(.nav-dropdown-item) { opacity: 0.5; } html[data-spellcheck="true"] .spellcheck-toggle-btn .spellcheck-slash { display: none; } html[data-spellcheck="true"] .spellcheck-toggle-btn .spellcheck-check { stroke: var(--good-fg-color, #22c55e); } header { position: relative; /* Set relative positioning so absolute theme toggle aligns to it */ border-bottom: none; padding: 0.4rem 1.5rem 0.4rem 0.5rem; } header nav { gap: 1.5rem; padding-right: 9rem; /* Leave room for header action buttons on the right */ padding-left: 0; } /* The site header on every ordinary page. missing.css centres it on its ~40rem line length and leaves a ~45px margin under it, while `.header-actions` is pinned to the window edge a line higher than the brand — so the brand floated inward of wide pages, the account buttons sat apart from it, and each page put the brand somewhere different. Give the header one 1100px column (the home screen's), with the actions centred on the brand's line; the wider workspaces set --page-header-gutter to their own content edge. The card editor, the song/notes pages, sign-in and the landing page draw their own header, and the phone app shell collapses it. */ html:not(.app-shell) body:not(.has-toolbar-brand):not(.login-body):not(.landing-body):not(:has(main.text-documents-page)) > header.sidebar.menu { margin-bottom: 0; padding-inline: var(--page-header-gutter, max(1rem, calc((100% - 1100px) / 2 + 1rem))); } html:not(.app-shell) body:not(.has-toolbar-brand):not(.login-body):not(.landing-body):not(:has(main.text-documents-page)) > header.sidebar.menu .header-actions { top: calc(var(--rhythm, 1.4rem) - 0.5rem); right: var(--page-header-gutter, max(1rem, calc((100% - 1100px) / 2 + 1rem))); } body:has(main.wyldcards-storyboard-page, main.wyldcards-link-map-page) > header.sidebar.menu { --page-header-gutter: max(1.5rem, calc((100% - 76rem) / 2 + 1.5rem)); } body:has(main.wyldcards-canvas-page) > header.sidebar.menu { --page-header-gutter: clamp(0.85rem, 2vw, 1.5rem); } main.home { text-align: center; } /* Landing page (signed out) */ body.landing-body { --landing-ink: #0c1222; --landing-glow: rgba(56, 120, 168, 0.22); background: radial-gradient(ellipse 70% 45% at 70% 18%, var(--landing-glow) 0%, transparent 68%), radial-gradient(ellipse 50% 40% at 12% 8%, rgba(15, 23, 42, 0.06) 0%, transparent 60%), linear-gradient(180deg, #f3f6fa 0%, var(--bg, #f8fafc) 42%, var(--bg, #f8fafc) 100%); overflow-x: hidden; } body.landing-body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); background-size: 180px 180px; /* missing.css sets `*, :before, :after { background-repeat: no-repeat }`, which left this 180px grain tile sitting alone in the top-left corner. */ background-repeat: repeat; mix-blend-mode: multiply; } body.landing-body header, body.landing-body main.landing-page { position: relative; z-index: 1; } body.landing-body header { background: transparent; border-bottom: none; /* The landing content follows the header and otherwise covers its menus. */ z-index: 2; } body.landing-body main.landing-page { /* Override Missing.css main { max-inline-size: var(--eff-line-length) } */ max-inline-size: none; inline-size: 100%; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; padding: 0 0 1.5rem; text-align: left; } .landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; width: 100%; max-width: 82rem; margin: 0 auto; min-height: auto; padding: clamp(1rem, 2.5vh, 1.75rem) clamp(1rem, 3vw, 2.5rem) 1.5rem; box-sizing: border-box; } .landing-hero-copy { max-width: 34rem; min-width: 0; animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .landing-brand { margin: 0; font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; /* Sized to fit the copy column at both ends: Syne 800 sets "Wyldcards" at roughly 7.7em wide, so anything larger than this is a word that cannot break pushing the hero off the right edge on a phone and breaking itself mid-word inside the 28rem column on a desktop. */ font-size: clamp(2.1rem, 10.5vw, 3.5rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.055em; color: var(--landing-ink); } .landing-title { margin: 1.15rem 0 0; font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--fg, #0f172a); } .landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem; margin-top: 1.85rem; } .landing-cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.82rem 1.4rem; border: 1px solid var(--landing-ink); border-radius: var(--border-radius); background: var(--landing-ink); color: #f8fafc; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease, gap 0.2s ease, background 0.2s ease; } .landing-cta-primary:hover, .landing-cta-primary:focus-visible { background: #162033; box-shadow: 0 14px 32px -16px rgba(12, 18, 34, 0.65); gap: 0.7rem; color: #f8fafc; outline: none; } .landing-cta-primary:active { transform: translateY(1px); } .landing-cta-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: 0.72rem 1.25rem; border: 1px solid color-mix(in srgb, var(--landing-ink) 32%, transparent); border-radius: var(--border-radius); background: color-mix(in srgb, var(--bg, #f8fafc) 65%, transparent); color: var(--landing-ink); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .landing-cta-secondary:hover, .landing-cta-secondary:focus-visible { border-color: var(--landing-ink); background: color-mix(in srgb, var(--landing-ink) 7%, var(--bg, #f8fafc)); box-shadow: 0 10px 24px -20px rgba(12, 18, 34, 0.75); outline: none; } .landing-features { width: min(100% - 2.5rem, 66rem); margin: 0 auto; padding: clamp(1.5rem, 4vh, 2.5rem) 0 0; animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; } .landing-features-heading { margin: 0; font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--landing-ink); } .landing-feature-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); } .landing-feature { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.35rem 1.25rem; border: none; border-right: 1px solid var(--border); background: transparent; box-shadow: none; transition: none; } .landing-feature:last-child { border-right: none; padding-right: 0; } .landing-feature:first-child { padding-left: 0; } .landing-feature:hover { border-color: var(--border); box-shadow: none; } .landing-feature-index { font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted-fg, #64748b); } .landing-feature-body h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.015em; color: var(--fg, #0f172a); } .landing-feature-body p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--muted-fg, #64748b); } .landing-footer { display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin-top: auto; padding: 1.75rem 1.25rem 0; animation: landing-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; } .landing-footer-link { font-size: 0.84rem; font-weight: 500; color: var(--muted-fg, #64748b); text-decoration: none; transition: color 0.2s ease; } .landing-footer-link:hover, .landing-footer-link:focus-visible { color: var(--landing-ink); outline: none; } .landing-footer-sep { color: var(--border, #cbd5e1); user-select: none; } .landing-headline { margin: 0; font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; font-size: clamp(1.75rem, 3.25vw, 2.75rem); font-weight: 800; letter-spacing: -0.055em; line-height: 1.06; color: var(--landing-ink); } .landing-headline > span { color: color-mix(in srgb, var(--landing-ink) 70%, #4689c0); } .landing-preview { position: relative; width: 100%; max-width: 32rem; justify-self: center; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: 1.25rem; background: color-mix(in srgb, var(--bg, #f8fafc) 90%, #8baac6); box-shadow: 0 30px 80px -35px rgba(12, 18, 34, 0.4); text-align: left; } .landing-preview-bar, .landing-preview-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.75rem; } .landing-preview-bar { padding: 0.25rem 0.25rem 1rem; color: var(--landing-ink); font-weight: 600; } .landing-preview-workspace { position: relative; display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); overflow: hidden; border: 1px solid #d6e0e7; border-radius: 0.75rem; background: #edf3f7; } .landing-preview-rail { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.9rem 0.55rem; border-right: 1px solid #d6e0e7; background: #e4edf3; } .landing-preview-rail-label { margin-bottom: 0.15rem; color: #718195; font-size: 0.59rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .landing-preview-thumb, .landing-preview-add { display: grid; place-items: center; width: 2.15rem; height: 1.7rem; border: 1px solid #cbd8e2; border-radius: 0.3rem; color: #718195; background: #f8fafc; font-size: 0.62rem; font-weight: 700; } .landing-preview-count { color: #718195; font-weight: 500; } /* The rail's cards and the demo's buttons are labels, and missing.css makes every label a padded block; these put them back to the shapes drawn. */ .landing-preview .landing-preview-thumb { display: grid; padding: 0; line-height: 1; margin: 0; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .landing-preview-thumb:hover { border-color: #729fc0; color: #235f88; } #landing-card-1:checked ~ .landing-preview-rail [for="landing-card-1"], #landing-card-2:checked ~ .landing-preview-rail [for="landing-card-2"], #landing-card-3:checked ~ .landing-preview-rail [for="landing-card-3"] { border-color: #729fc0; color: #235f88; background: #d9ebf6; box-shadow: 0 0 0 2px rgba(114, 159, 192, 0.18); } #landing-card-1:focus-visible ~ .landing-preview-rail [for="landing-card-1"], #landing-card-2:focus-visible ~ .landing-preview-rail [for="landing-card-2"], #landing-card-3:focus-visible ~ .landing-preview-rail [for="landing-card-3"] { outline: 2px solid #235f88; outline-offset: 2px; } .landing-preview-add { height: 1.25rem; border-style: dashed; background: transparent; font-size: 0.9rem; font-weight: 400; } /* Every card shares one grid cell, so the stack is as tall as its tallest card and switching never moves the page. */ .landing-preview-cards { display: grid; min-width: 0; background: #f8fafc; } .landing-preview-card { grid-area: 1 / 1; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); color: #1a2333; opacity: 0; visibility: hidden; transform: translateX(0.75rem); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s; } #landing-card-1:checked ~ .landing-preview-cards .landing-preview-card--1, #landing-card-2:checked ~ .landing-preview-cards .landing-preview-card--2, #landing-card-3:checked ~ .landing-preview-cards .landing-preview-card--3 { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .landing-preview-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .landing-preview-card-header > span { color: #8492a2; font-size: 0.65rem; } .landing-preview-meta { margin: 0; color: #52647a; line-height: 1.5; } .landing-preview-card h2 { margin: 1.75rem 0 0.65rem; font-family: Syne, "Avenir Next", "Segoe UI", sans-serif; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.04em; color: #1a2333; } .landing-preview-card > p { margin: 0; color: #52647a; font-size: 0.85rem; } .landing-preview-field { margin: 1.5rem 0; padding: 1rem; border: 1px solid #d6e0e7; border-radius: 0.5rem; background: #fff; } .landing-preview-field > span { color: #52647a; font-size: 0.7rem; font-weight: 600; } .landing-preview-field p { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.7; } .landing-preview-card-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; } .landing-preview .landing-preview-button { display: inline-block; line-height: 1.2; margin: 0; padding: 0.4rem 0.65rem; border: 1px solid #cddbe5; border-radius: 0.3rem; color: #3e5c72; background: #f3f7fa; font-size: 0.72rem; font-weight: 600; cursor: pointer; user-select: none; transition: border-color 0.15s ease, background 0.15s ease; } .landing-preview .landing-preview-button:hover { border-color: #729fc0; background: #e6f0f7; } .landing-preview .landing-preview-button--primary { border-color: #1a2333; color: #f8fafc; background: #1a2333; } .landing-preview .landing-preview-button--primary:hover { border-color: #2b3a52; background: #2b3a52; } .landing-preview-card h2 small { color: #718195; font-size: 0.45em; letter-spacing: 0; } .landing-preview-checklist { margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; } .landing-preview-checklist li { margin: 0; padding: 0; border-bottom: 1px solid #e2e9ef; } .landing-preview-checklist label { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.7rem 0.1rem; font-size: 0.92rem; font-weight: 500; color: #1a2333; cursor: pointer; } .landing-preview-checklist input { flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin: 0; accent-color: #235f88; } .landing-preview-checklist label:has(input:checked) { color: #8492a2; text-decoration: line-through; } .landing-metronome { display: flex; gap: 0.6rem; margin: 1.25rem 0 1.5rem; } .landing-metronome span { flex: 1; height: 2.6rem; border: 1px solid #d6e0e7; border-radius: 0.5rem; background: #fff; } .landing-metronome span:first-child { border-color: #b9cddb; } /* 92 bpm: four beats to a 2.6s bar, each box lit for its own quarter. */ .landing-metronome-toggle:checked + .landing-metronome span { animation: landing-beat 2.608s steps(1) infinite; } .landing-metronome-toggle:checked + .landing-metronome span:nth-child(2) { animation-delay: 0.652s; } .landing-metronome-toggle:checked + .landing-metronome span:nth-child(3) { animation-delay: 1.304s; } .landing-metronome-toggle:checked + .landing-metronome span:nth-child(4) { animation-delay: 1.956s; } .landing-metronome-stop, .landing-metronome-toggle:checked ~ .landing-preview-card-actions .landing-metronome-start { display: none; } .landing-metronome-toggle:checked ~ .landing-preview-card-actions .landing-metronome-stop { display: inline; } .landing-metronome-toggle:focus-visible ~ .landing-preview-card-actions .landing-preview-button--primary { outline: 2px solid #235f88; outline-offset: 2px; } @keyframes landing-beat { 0%, 24.9% { border-color: #235f88; background: #9cc6e2; } 25%, 100% { border-color: #d6e0e7; background: #fff; } } .landing-preview-script { display: block; margin-top: 1rem; padding: 0.55rem 0.7rem; border-radius: 0.4rem; background: #1a2333; color: #d7e3ee; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.74rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-preview-script span { color: #8fc3e8; } /* Small drawings in the use-case and how-it-works tiles: they show what the headings name, so the page does not need paragraphs to say it. */ .landing-use-art { margin-top: 1.1rem; height: 4.5rem; border-radius: 0.5rem; overflow: hidden; } .landing-use-art--script { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.6rem 0.8rem; background: rgba(255, 255, 255, 0.72); color: #1a2333; font-family: "Courier New", Courier, monospace; font-size: 0.72rem; line-height: 1.3; } .landing-art-scene { font-weight: 700; } .landing-art-character, .landing-art-line { align-self: center; } .landing-art-character { margin-top: 0.15rem; font-weight: 700; letter-spacing: 0.06em; } .landing-use-art--keys { position: relative; display: flex; background: #1a2333; padding: 0 1px 1px; } .landing-use-art--keys span { flex: 1; margin-right: 1px; border-radius: 0 0 0.2rem 0.2rem; background: #fbfbf8; } .landing-use-art--keys span:last-child { margin-right: 0; } /* Black keys sit over the gap between two white ones. */ .landing-use-art--keys span.is-black { flex: 0 0 auto; position: relative; z-index: 1; width: 5%; height: 60%; margin: 0 -2.5%; background: #1a2333; } .landing-use-art--list { display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; padding: 0 0.8rem; background: rgba(255, 255, 255, 0.72); } .landing-use-art--list span { display: flex; align-items: center; gap: 0.5rem; } .landing-use-art--list span::before { content: ""; flex-shrink: 0; width: 0.8rem; height: 0.8rem; border: 1.5px solid #8a7462; border-radius: 0.2rem; } .landing-use-art--list span::after { content: ""; height: 0.4rem; width: 70%; border-radius: 999px; background: #d9c8ba; } .landing-use-art--list span:nth-child(2)::after { width: 52%; } .landing-use-art--list span:nth-child(3)::after { width: 62%; } .landing-use-art--list span.is-done::before { border-color: #8a7462; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat, #8a7462; } .landing-use-art--list span.is-done::after { opacity: 0.55; } .landing-step-art { margin-top: 0.9rem; } .landing-step-art--stack { position: relative; width: 5.5rem; height: 3.6rem; } .landing-step-art--stack span { position: absolute; inset: 0 auto auto 0; width: 4.6rem; height: 3.1rem; border: 1px solid var(--border, #cbd5e1); border-radius: 0.35rem; background: var(--bg, #f8fafc); box-shadow: 0 6px 14px -10px rgba(12, 18, 34, 0.45); } .landing-step-art--stack span:nth-child(1) { transform: translate(0.9rem, 0.5rem) rotate(6deg); } .landing-step-art--stack span:nth-child(2) { transform: translate(0.45rem, 0.25rem) rotate(3deg); } .landing-step-art--parts { display: flex; align-items: center; gap: 0.5rem; height: 3.6rem; } .landing-step-field, .landing-step-button { font-size: 0.72rem; font-weight: 600; color: var(--muted-fg, #64748b); } .landing-step-field { flex: 0 0 6rem; padding: 0.45rem 0.6rem; border: 1px dashed color-mix(in srgb, var(--muted-fg, #64748b) 55%, transparent); border-radius: 0.35rem; } .landing-step-button { padding: 0.45rem 0.7rem; border: 1px solid var(--border, #cbd5e1); border-radius: 999px; background: var(--bg, #f8fafc); } .landing-feature .landing-preview-script { display: inline-block; max-width: 100%; box-sizing: border-box; } .landing-possibilities, .landing-invitation { width: min(100% - 2.5rem, 66rem); margin: 1.75rem auto 0; } .landing-possibilities { padding-top: 1.5rem; border-top: 1px solid var(--border); } .landing-use-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; } .landing-use-cases article { padding: 1rem; border: 1px solid var(--border); border-radius: 0.85rem; background: color-mix(in srgb, var(--bg, #f8fafc) 85%, #99b9cf); } .landing-use-cases article:nth-child(2) { background: color-mix(in srgb, var(--bg, #f8fafc) 85%, #b3b89b); } .landing-use-cases article:nth-child(3) { background: color-mix(in srgb, var(--bg, #f8fafc) 85%, #cfb09b); } .landing-use-icon { font-size: 0.75rem; font-weight: 600; color: var(--muted-fg, #64748b); } .landing-use-cases h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; color: var(--landing-ink); } .landing-use-cases p, .landing-invitation p { margin: 0; color: var(--muted-fg, #64748b); font-size: 0.9rem; line-height: 1.65; } .landing-invitation { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; } .landing-invitation p { max-width: 34rem; margin-top: 0.75rem; } .landing-invitation .landing-cta-primary { flex-shrink: 0; } .landing-page a:focus-visible { outline: 2px solid var(--landing-ink); outline-offset: 4px; } @media (max-width: 600px) { .landing-use-cases { grid-template-columns: minmax(0, 1fr); } .landing-use-cases h3 { margin-top: 0.75rem; } .landing-invitation { flex-direction: column; align-items: stretch; padding: 1rem; } } @keyframes landing-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } :root.-dark-theme body.landing-body { --landing-ink: #f1f5f9; --landing-glow: rgba(96, 165, 250, 0.16); background: radial-gradient(ellipse 70% 45% at 72% 16%, var(--landing-glow) 0%, transparent 68%), radial-gradient(ellipse 45% 35% at 8% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 55%), linear-gradient(180deg, #0b1220 0%, var(--bg, #0f172a) 48%, var(--bg, #0f172a) 100%); } :root.-dark-theme body.landing-body::before { opacity: 0.18; mix-blend-mode: soft-light; } /* The drawings are paper, like the preview's cards; a translucent white over the dark tiles only turns them grey. */ :root.-dark-theme .landing-use-art--script, :root.-dark-theme .landing-use-art--list { background: #eef2f7; } :root.-dark-theme .landing-cta-primary { background: #e2e8f0; border-color: #e2e8f0; color: #0c1222; } :root.-dark-theme .landing-cta-primary:hover, :root.-dark-theme .landing-cta-primary:focus-visible { background: #f8fafc; color: #0c1222; box-shadow: 0 14px 32px -16px rgba(226, 232, 240, 0.45); } :root.-dark-theme .landing-cta-secondary:hover, :root.-dark-theme .landing-cta-secondary:focus-visible, :root.-dark-theme .landing-footer-link:hover, :root.-dark-theme .landing-footer-link:focus-visible { color: #e2e8f0; } @media (prefers-color-scheme: dark) { :root:not(.-no-dark-theme) body.landing-body { --landing-ink: #f1f5f9; --landing-glow: rgba(96, 165, 250, 0.16); background: radial-gradient(ellipse 70% 45% at 72% 16%, var(--landing-glow) 0%, transparent 68%), radial-gradient(ellipse 45% 35% at 8% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 55%), linear-gradient(180deg, #0b1220 0%, var(--bg, #0f172a) 48%, var(--bg, #0f172a) 100%); } :root:not(.-no-dark-theme) body.landing-body::before { opacity: 0.18; mix-blend-mode: soft-light; } :root:not(.-no-dark-theme) .landing-use-art--script, :root:not(.-no-dark-theme) .landing-use-art--list { background: #eef2f7; } :root:not(.-no-dark-theme) .landing-cta-primary { background: #e2e8f0; border-color: #e2e8f0; color: #0c1222; } :root:not(.-no-dark-theme) .landing-cta-primary:hover, :root:not(.-no-dark-theme) .landing-cta-primary:focus-visible { background: #f8fafc; color: #0c1222; box-shadow: 0 14px 32px -16px rgba(226, 232, 240, 0.45); } :root:not(.-no-dark-theme) .landing-cta-secondary:hover, :root:not(.-no-dark-theme) .landing-cta-secondary:focus-visible, :root:not(.-no-dark-theme) .landing-footer-link:hover, :root:not(.-no-dark-theme) .landing-footer-link:focus-visible { color: #e2e8f0; } } @media (max-width: 900px) { .landing-hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 1.5rem; padding-top: 1rem; text-align: center; } .landing-hero-copy { max-width: 34rem; margin: 0 auto; } .landing-actions { justify-content: center; } .landing-features { text-align: center; } .landing-feature-list { grid-template-columns: 1fr; text-align: left; } .landing-feature { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1.2rem 0; border-right: none; border-bottom: 1px solid var(--border); } .landing-feature:last-child { border-bottom: none; } } @media (max-width: 480px) { .landing-actions { flex-direction: column; width: 100%; } .landing-cta-primary, .landing-cta-secondary { width: 100%; } .landing-preview-workspace { grid-template-columns: 3.25rem minmax(0, 1fr); } .landing-preview-rail { padding-inline: 0.35rem; } } @media (prefers-reduced-motion: reduce) { .landing-hero-copy, .landing-features, .landing-footer { animation: none !important; opacity: 1 !important; transform: none !important; } .landing-preview-card { transform: none; transition: none; } /* A still bar with the downbeat marked, rather than a flashing one. */ .landing-metronome-toggle:checked + .landing-metronome span { animation: none; } .landing-metronome-toggle:checked + .landing-metronome span:first-child { border-color: #235f88; background: #9cc6e2; } } /* Sign-in / recovery pages */ body.login-body { --login-ink: #0c1222; --login-paper: #eef2f7; --login-glow: rgba(56, 120, 168, 0.26); --login-glow-2: rgba(99, 102, 241, 0.14); --login-focus: var(--accent, #2563eb); --login-surface: rgba(255, 255, 255, 0.78); --login-surface-border: rgba(15, 23, 42, 0.08); background: radial-gradient(ellipse 55% 50% at 50% 32%, var(--login-glow) 0%, transparent 70%), radial-gradient(ellipse 45% 40% at 85% 90%, var(--login-glow-2) 0%, transparent 70%), radial-gradient(ellipse 40% 35% at 8% 85%, rgba(20, 184, 166, 0.08) 0%, transparent 70%), linear-gradient(180deg, #eef3f9 0%, var(--bg, #f8fafc) 55%, var(--bg, #f8fafc) 100%); overflow-x: hidden; } /* The illustrated stage that once filled the second column is gone, and the empty column left the form pinned to the left edge. Centre the one panel and give it a surface of its own, so the fields sit on something rather than straight on the grain. */ body.login-body .login-shell:not(:has(.login-stage)) { grid-template-columns: minmax(0, 26rem); justify-content: center; } body.login-body .login-panel { width: 100%; box-sizing: border-box; padding: 2rem 1.75rem 1.5rem; border: 1px solid var(--login-surface-border); border-radius: 18px; background: var(--login-surface); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 30px 60px -32px rgba(15, 23, 42, 0.35); } /* The wordmark doesn't wrap, and at the stage-less layout's full 2.75rem it ran past the card's padding. */ body.login-body .login-panel .login-brand { font-size: clamp(2rem, 8.5vw, 2.4rem); } /* missing.css pads and spaces every
and