/* Slicora Web — shared chrome. * * The palette is the iOS app's, by way of the Wi-Fi Upload page: near-black * canvas, one accent blue, muted secondary text. The viewer ships its own * stylesheet; this covers everything around it. */ /* The palette is now published by system.css as `--s-*` and selected by * `data-system` on . Each fallback below is the pre-brand value, so a * page that somehow loads without system.css renders as it always did rather * than as nothing. */ :root { color-scheme: dark; --bg: var(--s-bg, #0b0d10); --panel: var(--s-panel, #141619); --line: var(--s-line, #202124); --line-soft: var(--s-line-soft, #1a1c1f); --text: var(--s-text, #e8eaed); --muted: var(--s-muted, #9aa0a6); --dim: var(--s-dim, #5f6368); --accent: var(--s-accent, #5b9dff); --accent-ink: var(--s-accent-ink, #06121f); --accent-soft: var(--s-accent-soft, rgba(91, 157, 255, 0.12)); --accent-line: var(--s-accent-line, rgba(91, 157, 255, 0.42)); --good: var(--s-good, #34c759); --bad: var(--s-bad, #ff6b6b); --warn: var(--s-warn, #ffb340); --cyan: var(--s-cyan, #4dd0e1); /* volumetric / 3D, app-wide */ --radius: var(--s-radius, 12px); --font-display: var(--s-font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --font-ui: var(--s-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --display-track: var(--s-display-track, -0.3px); --display-weight: var(--s-display-weight, 600); --display-stretch: var(--s-display-stretch, 100%); } * { box-sizing: border-box; } /* Headings carry the display face — the part of a system a reader notices * before they notice the palette. Weight and tracking come from the system * too: Cinema is a tight semibold grotesque, Silver a light high-contrast * serif, and a shared hardcoded weight would flatten the difference the test * exists to show. */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); /* Silver's Bodoni is optically sized; a Didone set at a text optical size and scaled up loses the hairlines that make it a Didone. */ font-optical-sizing: auto; } body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; min-height: 100vh; } /* A "hidden" control still on screen is worse than one never hidden: the UA * rule for [hidden] loses to any class that sets a display. Same reason the * viewer's stylesheet carries this. */ [hidden] { display: none !important; } /* Silver's accent is brightness rather than hue, so a link there cannot be * distinguished by colour and carries an underline instead. */ a { color: var(--accent); text-decoration: var(--s-link-decoration, underline); } /* ── centred single-column pages (sign-in, confirm, sent) ───────────────── */ .centred { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px; } .card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; } .wordmark { font-family: var(--font-display); font-size: 26px; font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); margin: 0 0 6px; } /* The mark, set in em so one rule serves the 20px nav brand and the 26px * sign-in wordmark, and swapped with the system by --s-glyph. Decorative: the * word beside it already says Slicora, so it stays out of the accessibility * tree rather than repeating the name to a screen reader. */ .brand::before, .wordmark::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .42em; vertical-align: -0.14em; background: var(--s-glyph) center / contain no-repeat; } .wordmark span { color: var(--accent); } /* The wordmark is the way back out of the sign-in corridor — a plain link home, styled as the wordmark it always was. */ .wordmark a { color: inherit; text-decoration: none; } /* SLICEFIELD's wordmark (brand doc: the Legora study). Spaced caps in the * display serif — the brass-plate register — with a thin amber slice through * the final l, drawn in em so one rule serves every size the mark is set at. * Only the blade is drawn, no background-coloured "gap": the masthead sits on * photography, where a --bg bar would print as a smudge. The two-colour span * device is Slicora's, so the accent-span rule is returned to inherit here — * the .cut letter is text-coloured; the amber is the line through it. */ :root[data-system="slicefield"] .brand, :root[data-system="slicefield"] .wordmark { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: 0.2em; text-transform: uppercase; } :root[data-system="slicefield"] .brand span, :root[data-system="slicefield"] .wordmark span { color: inherit; } :root[data-system="slicefield"] .cut { position: relative; display: inline-block; } :root[data-system="slicefield"] .cut::before { content: ""; position: absolute; left: -0.10em; right: -0.02em; top: 47%; height: 0.05em; background: var(--accent); transform: rotate(-20deg); } /* The glyph square is the other systems' device; Slicefield's mark is the * word itself. Suppressing the pseudo-element (not just its image) also * removes the 1em spacer a missing background would silently leave. */ :root[data-system="slicefield"] .brand::before, :root[data-system="slicefield"] .wordmark::before { content: none; } .lede { margin: 0 0 24px; color: var(--muted); font-size: 14px; } label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; } input[type="email"], input[type="text"] { width: 100%; background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; padding: 11px 13px; } input[type="email"]:focus, input[type="text"]:focus { outline: none; border-color: var(--accent); } /* A flat accent fill reads as a sticker on a dark ground. The fill is lit * instead — top light, machined inner edge, a restrained accent halo — and * every value derives from --accent so each system keeps its own colour: * Cinema's ember, Silver's specular white, Clinical's blue. The plain * `background: var(--accent)` stays first as the pre-color-mix fallback. * Variants that repaint the surface (ghost, linklike, menus, brandswitch) * must also reset box-shadow, or the halo outlives the fill. */ button, .button { display: inline-block; background: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, #fff 12%, var(--accent)) 0%, var(--accent) 55%, color-mix(in srgb, #000 10%, var(--accent)) 100%); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, var(--accent)), 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px -8px color-mix(in srgb, var(--accent) 55%, transparent); transition: filter .15s ease, box-shadow .15s ease; } button:hover:not(:disabled), .button:hover { filter: brightness(1.06); } button:active:not(:disabled), .button:active { filter: brightness(0.96); } button:focus-visible, .button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button.wide, .button.wide { width: 100%; } button.ghost, .button.ghost { background: var(--line); color: var(--text); box-shadow: none; } button:disabled { opacity: .45; cursor: default; box-shadow: none; } .divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; margin: 22px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--line); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; font-weight: 600; margin-bottom: 10px; cursor: pointer; text-decoration: none; } .provider svg { width: 18px; height: 18px; } /* * The default door. Google's identity guidelines do not allow recolouring * their button to an app's accent, so prominence is bought with contrast and * weight instead — a lighter surface, a brighter border, a slightly taller * target — while the mark itself is untouched. */ .provider.primary { background: #2b2d30; border-color: #4a4d52; padding: 14px 16px; font-size: 16px; } .provider.primary:hover { background: #34363a; } /* * A six-digit code is read off another screen and typed once. Wide tracking * and tabular figures make it checkable at a glance; centring it stops the * field looking like the email box directly above it on the previous page. */ .code-input { font: 600 24px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; } /* ── signed-in chrome — the one top bar (see views/_nav.php) ────────────── */ .chrome { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .chrome-inner { max-width: 1240px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .brand { font-family: var(--font-display); font-size: 20px; font-weight: var(--display-weight); font-stretch: var(--display-stretch); letter-spacing: var(--display-track); color: var(--text); text-decoration: none; white-space: nowrap; } .brand span { color: var(--accent); } .spacer { flex: 1; } .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--line); /* Wayfinding, not a call to action: no lit-fill treatment here, even when .active paints the accent. */ box-shadow: none; border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; } .pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .pill.icon { padding: 7px 10px; } .nav-pills { display: flex; align-items: center; gap: 12px; } .search { flex: 1; min-width: 160px; max-width: 340px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font: inherit; font-size: 14px; padding: 8px 14px; } .search:focus { outline: none; border-color: var(--accent); } .note { font-size: 13px; color: var(--muted); margin: 18px 0 0; } .note.error { color: var(--bad); } .note.ok { color: var(--good); } .footnote { color: var(--dim); font-size: 12px; margin-top: 26px; text-align: center; max-width: 420px; } /* ── account ────────────────────────────────────────────────────────────── */ body.account { display: block; } .account-wrap { max-width: 464px; margin: 0 auto; padding: 28px 20px 40px; } .account-wrap .card { width: 100%; } .card-title { font-size: 20px; font-weight: 600; margin: 0 0 18px; } .centred .card + .card, .account-wrap .card + .card { margin-top: 18px; } .account-wrap .card form:last-child { margin-top: 22px; } dl.facts { margin: 0 0 22px; font-size: 14px; } dl.facts dt { color: var(--muted); font-size: 12px; margin-top: 14px; } dl.facts dt:first-child { margin-top: 0; } dl.facts dd { margin: 2px 0 0; } .card.danger { border-color: rgba(255, 107, 107, .35); } .danger-title { font-size: 16px; margin: 0 0 10px; color: var(--bad); } button.danger-button { background: var(--bad); color: var(--accent-ink); } .dev-link { margin-top: 18px; padding: 12px; border: 1px dashed var(--warn); border-radius: 10px; font-size: 12px; word-break: break-all; color: var(--warn); } /* Site footer. Shared by every view via _foot.php — including the sign-in page, which is as far as an unauthenticated visitor (or a payment provider reviewing this domain) can get. The legal pages and the price have to be reachable from there, not only from the landing page. */ .foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 56px 24px 20px; font-size: 14px; } .foot a { color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--text); } .foot-legal { padding: 0 24px 40px; text-align: center; font-size: 12px; line-height: 1.6; color: var(--muted); }