/** * hub.css — Styling for the Skald landing page. * * Self-contained rather than importing an app's css/themes.css: the hub sits * one level above the apps and must render before any of them is chosen, so it * cannot depend on a particular app's folder still being there. The palette is * deliberately the same terracotta-on-cream family the apps use, so the hub * reads as the same product. * * The apps carry several named themes and a picker; the hub has exactly two * looks. Anything more is a second theming system to keep in sync for a page a * learner spends ten seconds on. */ /* * ── LIGHT AND DARK ───────────────────────────────────────────────────────── * * Two palettes, each declared exactly once, chosen by `data-theme` on . * * The default is still whatever the OS asks for. That gets resolved into a * concrete `data-theme` before the first paint, by the inline script in * — and doing it there rather than in a `prefers-color-scheme` media * query is precisely what keeps this to one dark palette. A media query cannot * also match an explicit choice, so a toggle built that way needs the same * twenty variables written twice, and the two copies drift. * * A browser with scripting off therefore gets light. That is not worth solving * here: the app table, the connection form and the key test are all * JavaScript, so such a browser has no page to read the palette of. * * `color-scheme` is not decoration — it is what makes the native controls * (text inputs, the provider ` since 2026-09-09 — four buttons in * one row measured 372 px against 350 available on a 390 px phone, and the * founder chose a dropdown labelled «Languages» over shortened labels. */ :root[data-lang] .lang-switch [lang] { display: revert; } body { margin: 0; padding: 0 1.25rem 3rem; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } main, .hub-header, .hub-footer { max-width: 46rem; margin: 0 auto; } /* ── Header ──────────────────────────────────────────────── */ .hub-header { padding: 1.25rem 0 2rem; text-align: center; } /* Which language I read this in and which palette I read it on are the same kind of choice — how the page is presented to me — so they share one right-aligned row instead of being hunted for in two different corners. */ .header-controls { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; margin-bottom: 1.5rem; } .lang-switch { display: flex; gap: 0.4rem; } /* One pill, defined once for both controls. They sit next to each other, so any difference between them would read as a mistake rather than a meaning. */ .lang-btn, .theme-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; font-size: 0.875rem; color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: 999px; } .lang-btn:hover, .theme-btn:hover { color: var(--text); background: var(--bg-subtle); } /* aria-pressed is the state, so it drives the styling too — they cannot disagree the way a separate .active class eventually would. */ .lang-btn[aria-pressed="true"] { color: var(--text); background: var(--bg-elevated); border-color: var(--border); font-weight: 600; } /* The theme button never gets that selected look — it is an action, not one of two options on offer. The faint outline stops it reading as disabled beside the language pill that IS selected. */ .theme-btn { border-color: var(--border-subtle); } /* Exactly one label is in the flow: the one naming where pressing would take you. The language rule further up then hides one of the two inside it. No script in either step, which is why the button is right on the first frame. */ .theme-label { display: inline-flex; align-items: center; gap: 0.4rem; } :root[data-theme="dark"] .theme-to-dark { display: none; } :root:not([data-theme="dark"]) .theme-to-light { display: none; } .lang-flag, .theme-icon { font-size: 1.05rem; line-height: 1; } .wordmark { margin: 0; font-size: clamp(2.25rem, 7vw, 3rem); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); } .tagline { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 1.05rem; } /* Smaller than the line above it, and deliberately not a warning box. This is a standing property of generated content rather than an alert about something that just went wrong, and a box with a dismiss affordance would teach the reader to stop seeing it — which is the opposite of what it is for. */ .tagline.caution { margin-top: 0.4rem; font-size: 0.9rem; } /* ── Cards & sections ────────────────────────────────────── */ .card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; } h2 { margin: 0 0 0.35rem; font-size: 1.15rem; letter-spacing: -0.01em; } /* * The collapsed connection form. Borrows the chevron from .faq below rather * than inventing a second disclosure control - two ways of saying "this opens" * on one page is one too many. */ .panel > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; font-weight: 600; cursor: pointer; list-style: none; } .panel > summary::-webkit-details-marker { display: none; } .panel > summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform 0.15s ease; } .panel[open] > summary::before { transform: rotate(45deg); } .panel > summary:hover { color: var(--accent-text); } /* The state, so the summary says something worth reading while closed. */ .panel-status { font-weight: 400; font-size: 0.9rem; color: var(--text-muted); /* A long model name must not push the chevron off a phone screen. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-intro { margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.925rem; } section#apps, section#faq { margin-top: 2.5rem; } a { color: var(--accent-text); } /* ── Form ────────────────────────────────────────────────── */ .field { margin-bottom: 1.1rem; flex: 1 1 12rem; } .field-row { display: flex; flex-wrap: wrap; gap: 1rem; } label { display: block; margin-bottom: 0.35rem; font-size: 0.875rem; font-weight: 600; } .optional { font-weight: 400; color: var(--text-muted); } input[type="text"], input[type="password"], select { width: 100%; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 9px; } input:focus-visible, select:focus-visible, button:focus-visible, .app-link:focus-visible, .skip-link:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .key-row { display: flex; gap: 0.5rem; } /* The button beside a field in a .key-row keeps its words on one line. "Vis" never needed this; "Lås opp" and "Unlock" do, and a two-word button broken across two lines beside a single-line input reads as a rendering fault. */ .key-row > .btn, .key-row > .btn-ghost, .key-row > .btn-secondary { white-space: nowrap; } /* The two boxes when a password is being chosen — side by side on a desktop, stacked on a phone, because two half-width password fields at 360px are two fields nobody can read the placeholder of. */ #passcode-form .key-row { flex-wrap: wrap; } #passcode-form .key-row > input { flex: 1 1 12rem; } /* Shown only when the chosen provider takes no key. The field itself always stays — some local servers are started with one, and hiding the box would make that setup impossible with nothing on screen to explain why. */ .if-key-optional { display: none; } #connection-form.key-optional .if-key-optional { display: inline; } /* The mixed-content notice. It explains rather than blocks: the local option stays selectable, because reading this is how most people find out the local path exists at all. */ .warn { margin: 0 0 1.1rem; padding: 0.7rem 0.85rem; font-size: 0.85rem; line-height: 1.5; color: var(--warn); background: var(--warn-bg); border-radius: 9px; } .warn a { color: inherit; } /* The provider table has four columns and cannot fit a phone. It scrolls inside its own box so the PAGE never scrolls sideways — a body that slides left and right makes the whole site feel broken, and the reader loses their place in text that has nothing to do with the table. `tabindex` because a scrollable region has to be reachable by keyboard, not only by swiping. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hint { margin: 0.4rem 0 0; font-size: 0.825rem; color: var(--text-muted); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } button { font: inherit; font-size: 0.925rem; border-radius: 9px; cursor: pointer; } .btn, .btn-secondary, .btn-ghost { padding: 0.55rem 1.1rem; border: 1px solid transparent; } /* A download is a link, not a