/* * styles.css — the page's one stylesheet: the mockup's classes, translated to logical properties. * * Where it comes from: every rule below is the corresponding rule of `gen_mocks.py`'s `CSS` block * (the file the approved shots were rendered from), with three deliberate changes: * * 1. **Logical properties.** `left/right` became `inset-inline-start/end`, `margin-left` became * `margin-inline-start`, `text-align: left` became `text-align: start`. Arabic is a first-class * interface language: `dir="rtl"` on `` must mirror the whole page without a second * stylesheet and without a single `[dir="rtl"]` override in a component (spec section 5). * 2. **Self-hosted fonts.** The mockup imported Google Fonts; the CSP here is `default-src 'self'` * with no CDN, so the three families load from `assets/fonts/` below. They are variable fonts, * hence the weight RANGES. * 3. **Tokens.** Colours, radii, spaces and type sizes come from `tokens.css`. No colour is written * out in this file, so the silver theme is one attribute away. * * There is no shadow DOM. The components are light-DOM custom elements and share this stylesheet, * which is what lets a later task restyle the whole page from `tokens.css` without touching nine * component files — the "design evolves without a rebuild" the spec asks for. The cost is that class * names are global, so every one of them is prefixed by its screen (`.jobs-*`, `.login-*`) unless it * is one of the shared primitives the mockup already named (`.panel`, `.pill`, `.btn`, `.lbl`, …). */ /* ---- fonts (self-hosted, variable) ------------------------------------------------------------ */ @font-face { font-family: "Sora"; src: url("assets/fonts/Sora.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("assets/fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Cairo"; src: url("assets/fonts/Cairo.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; font-display: swap; } /* ---- ground ----------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: dark; } body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%) no-repeat, var(--bg1); color: var(--text); font-family: var(--stack-body); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } body::before { /* the mockup's top sheen */ content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--sheen); z-index: 0; } me-app, me-topbar { display: block; } me-app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* A screen fills what the top bar leaves. Every screen element behaves the same way, so a component * never has to know whether it is mounted at the top level or inside another one. */ me-login, me-jobs { display: flex; flex-direction: column; flex: 1; min-height: 0; } a { color: var(--accent); } a:hover { color: var(--accent2); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--glow); } /* `hidden` must actually hide. Every `display` in this file is an AUTHOR rule and therefore beats * the UA stylesheet's `[hidden] { display: none }` — so `.btn[hidden]` stayed visible, which is * exactly how a "hidden" control becomes a control nobody meant to offer. */ [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- type helpers ----------------------------------------------------------------------------- */ .sora { font-family: var(--stack-head); } .ar { font-family: var(--stack-ar); direction: rtl; unicode-bidi: isolate; } .muted { color: var(--dim); } .faint { color: var(--faint); } .mono-time { font-family: var(--stack-head); font-variant-numeric: tabular-nums; } /* A file name, an id, a timecode: an IDENTIFIER, wrapped in `bdi(dir="ltr")` by `dom.js` so it * reads as it was typed on every screen, in every interface language. There is no `plaintext` rule * here any more — ordering a file name "by its own direction" is correct Unicode and unreadable as * a name (Task 16 review, round 2). */ .lbl { font-family: var(--stack-head); font-size: var(--t-s); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); margin-block-end: var(--s2); } .row { display: flex; align-items: center; gap: var(--s4); } .spacer { flex: 1; } /* ---- primitives (mockup classes) -------------------------------------------------------------- */ .panel { background: var(--panel); border: var(--hairline) solid var(--hairsoft); border-radius: var(--radius); } .pill { display: inline-flex; align-items: center; gap: var(--s2); border: var(--hairline) solid var(--hairsoft); border-radius: var(--radius-pill); padding: 5px 11px; color: var(--dim); font-size: var(--t-sm); background: var(--sunk-soft); white-space: nowrap; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; } .pill.on { border-color: var(--accent); color: var(--text); } .tag { font-family: var(--stack-head); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: var(--hairline) solid var(--hair); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); border-radius: var(--radius-pill); padding: 9px 16px; font-family: var(--stack-body); font-weight: 600; font-size: var(--t-base); border: var(--hairline) solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; /* the Open control is a real link, not a link-looking one */ background: none; color: inherit; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .btn.primary { background: var(--accent); color: var(--onaccent); font-weight: 700; } .btn.primary:hover:not(:disabled) { background: var(--accent2); } .btn.ghost, a.btn.ghost { border-color: var(--hair); color: var(--text); background: var(--sunk-faint); } .btn.ghost:hover:not(:disabled) { border-color: var(--accent); } .btn.quiet { border-color: var(--hairsoft); color: var(--dim); background: none; } .btn.quiet:hover:not(:disabled) { color: var(--text); border-color: var(--hair); } .btn.danger { border-color: var(--capred); color: var(--text); background: var(--sunk-faint); } .btn.danger:hover:not(:disabled) { background: var(--capred); } .btn.small { padding: 6px 11px; font-size: var(--t-sm); } .btn:disabled { opacity: .5; cursor: default; } .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; font-size: var(--t-s); font-family: var(--stack-head); color: var(--dim); flex: none; } .dot.done { background: var(--accent); border-color: var(--accent); color: var(--onaccent); } /* `background` is reset here as well as set in `.dot.done`: the two classes are mutually exclusive * by construction (`me-rail.js` says why), and this is what makes the combination safe anyway rather * than drawing an accent glyph on an accent fill. */ .dot.cur { border-color: var(--accent); background: transparent; box-shadow: 0 0 0 4px var(--glow); color: var(--accent); } .link { flex: 1; height: 1px; background: var(--hairsoft); min-width: 18px; } .link.done { background: var(--accent); opacity: .7; } .tile { border: var(--hairline) solid var(--hairsoft); border-radius: var(--radius-md); padding: 9px var(--s4); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); background: var(--sunk-soft); } .tile.on { border-color: var(--accent); background: var(--glow); } .check { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; flex: none; color: var(--onaccent); } .tile.on .check { background: var(--accent); border-color: var(--accent); } .radio { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); } .radio .r { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--hair); display: grid; place-items: center; flex: none; } .radio.on { color: var(--text); } .radio.on .r::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .note { border: var(--hairline) dashed var(--hairsoft); border-radius: var(--radius-md); padding: var(--s4) var(--s5); color: var(--faint); font-size: var(--t-sm); } .io { font-family: var(--stack-head); font-size: var(--t-s); color: var(--onaccent); background: var(--accent); border-radius: var(--radius-sm); padding: 3px 7px; white-space: nowrap; } /* ---- form controls ---------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--s2); } .field > label { font-family: var(--stack-head); font-size: var(--t-s); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--faint); } .input { font: inherit; font-size: var(--t-md); color: var(--text); background: var(--sunk-soft); border: var(--hairline) solid var(--hairsoft); border-radius: var(--radius-md); padding: var(--s4) var(--s5); width: 100%; text-align: start; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } .input::placeholder { color: var(--faint); } .input:hover { border-color: var(--hair); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); } .input[aria-invalid="true"] { border-color: var(--capred); } .form-error { color: var(--text); background: color-mix(in srgb, var(--capred) 26%, transparent); border: var(--hairline) solid var(--capred); border-radius: var(--radius-md); padding: var(--s3) var(--s5); font-size: var(--t-sm); } /* ---- top bar ---------------------------------------------------------------------------------- */ .topbar { min-height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: var(--s6); padding-inline: var(--s8); padding-block: var(--s2); flex-wrap: wrap; border-block-end: var(--hairline) solid var(--hairsoft); background: var(--sunk); position: relative; z-index: 2; } .brand { display: flex; align-items: center; gap: var(--s4); } .brand img { width: 26px; height: 26px; object-fit: contain; } .wordmark { font-family: var(--stack-head); font-weight: 600; font-size: var(--t-lg); letter-spacing: -.01em; background: var(--wordmark-sheen); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } .pill.langs { gap: 2px; padding: 3px 6px; } .lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; line-height: 1; font: inherit; font-family: var(--stack-head); font-size: var(--t-sm); color: var(--faint); background: none; border: 0; border-radius: var(--radius-pill); padding: 0 6px; cursor: pointer; } .lang-btn:hover { color: var(--text); } .lang-btn[aria-pressed="true"] { color: var(--text); background: var(--glow); } /* Cairo carries a deep descender, so ع sitting in its own line box reads as BELOW the Latin caps * beside it. Two decisions, both measured on the delivered page at 1440x940 (the mockup's own * artboard), by cropping each button's client rect out of the screenshot and finding the ink rows: * size: the glyph inherits the pill's 12 px, as in the mockup (`gen_mocks.py` topbar), where it * is one 12 px `.pill` for all three. At 15 px it was 12 ink rows against the mockup's 9. * nudge: EN and DE ink rows 22-30, centre 26.0. ع with no nudge: rows 25-34, centre 29.5 — 3.5 px * low. At -3px: rows 22-31, centre 26.5, half a pixel from the Latin line and on the safe * side of it. The transform is on the GLYPH, not the button, so the lit pill stays centred. * Re-measure (do not re-guess) if the size, the family or the bar's height changes. */ .lang-btn.ar { font-family: var(--stack-ar); } .lang-btn.ar .lang-glyph { display: block; transform: translateY(-3px); } .lang-sep { color: var(--faint); opacity: .6; } .user-chip .who { color: var(--text); } .user-chip .lane { color: var(--faint); } .user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } /* ---- page frame ------------------------------------------------------------------------------- */ .page { flex: 1; width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--s7) var(--s8) var(--s9); display: flex; flex-direction: column; gap: var(--s6); min-height: 0; } .page-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; } .page-title { font-family: var(--stack-head); font-size: var(--t-xl); font-weight: 600; margin: 0; margin-inline-end: var(--s3); } /* ---- login ------------------------------------------------------------------------------------ */ .login-wrap { flex: 1; display: grid; place-items: center; padding: var(--s9) var(--s8); } .login-card { width: min(420px, 100%); padding: var(--s9) var(--s9) var(--s8); display: flex; flex-direction: column; gap: var(--s6); } .login-heading { display: flex; flex-direction: column; gap: var(--s2); } .login-brand { display: flex; align-items: center; gap: var(--s4); } .login-brand img { width: 34px; height: 34px; object-fit: contain; } .login-title { font-family: var(--stack-head); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.01em; margin: 0; } .login-sub { color: var(--dim); font-size: var(--t-sm); margin: 0; } .login-form { display: flex; flex-direction: column; gap: var(--s5); } .login-actions { display: flex; align-items: center; gap: var(--s4); margin-block-start: var(--s1); } .login-actions .btn { flex: 1; } /* ---- jobs list -------------------------------------------------------------------------------- */ .jobs-list { display: flex; flex-direction: column; gap: var(--s4); margin: 0; padding: 0; list-style: none; } .job-card { padding: var(--s6) var(--s7); display: flex; align-items: flex-start; gap: var(--s6); transition: border-color var(--fast) var(--ease); } .job-card:hover { border-color: var(--hair); } .job-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); } .job-title { font-family: var(--stack-head); font-size: var(--t-md); font-weight: 600; margin: 0; overflow-wrap: anywhere; } .job-facts { display: flex; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; color: var(--dim); font-size: var(--t-sm); } .job-facts .sep { color: var(--faint); opacity: .5; } .job-actions { display: flex; align-items: center; gap: var(--s3); flex: none; } .job-confirm { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .job-confirm .q { color: var(--text); font-size: var(--t-sm); } .chip { display: inline-flex; align-items: center; gap: var(--s2); border: var(--hairline) solid var(--hairsoft); border-radius: var(--radius-pill); padding: 3px 10px; font-family: var(--stack-head); font-size: var(--t-s); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; flex: none; } .chip .bulb { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .chip[data-state="idle"] { color: var(--state-idle); } .chip[data-state="live"] { color: var(--state-live); border-color: var(--hair); background: var(--glow); } .chip[data-state="live"] .bulb { animation: me-pulse 1.6s var(--ease) infinite; } .chip[data-state="done"] { color: var(--onaccent); background: var(--state-done); border-color: var(--accent); } .chip[data-state="bad"] { color: var(--text); border-color: var(--state-bad); background: color-mix(in srgb, var(--capred) 30%, transparent); } @keyframes me-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .chip[data-state="live"] .bulb { animation: none; } * { transition-duration: 1ms !important; } } .jobs-empty { padding: var(--s9) var(--s8); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; } .jobs-empty h3 { font-family: var(--stack-head); font-size: var(--t-md); font-weight: 600; margin: 0; } .jobs-empty p { margin: 0; color: var(--dim); font-size: var(--t-sm); max-width: 52ch; } .jobs-status { color: var(--dim); font-size: var(--t-sm); margin: 0; } .action-error { display: flex; align-items: center; gap: var(--s4); } /* ---- the placeholder a route without a screen shows (Task 19 replaces it) ---------------------- */ .stub { padding: var(--s8); display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; } .stub h2 { font-family: var(--stack-head); font-size: var(--t-xl); font-weight: 600; margin: 0; } .stub p { margin: 0; color: var(--dim); font-size: var(--t-sm); } /* ---- the timeline (Task 17) -------------------------------------------------------------------- * * Lifted from the approved mockup's `.tl-*`, `.handle`, `.section` and `.playhead` rules * (`docs/plans/2026-09-09-mosaic-edit-mockups/gen_mocks.py`), with the colours moved into * tokens.css and three things the mockup did not have to solve because it was a picture: * * 1. **`direction: ltr`, always.** A timeline is a TIME AXIS: t=0 on the left, later to the right, * in English, German and Arabic alike. The page mirrors around it (`dir="rtl"` on ) and * this one widget does not, because mirroring it would claim that time runs backwards — no * editing tool anywhere makes that claim. The words inside it still read in their own direction; * that is per chip, and it is ``'s job, not this rule's. * Everything positioned here therefore uses `left`/`right` rather than logical properties, on * purpose: inside a fixed-direction box the physical properties ARE the honest ones. * 2. **The overlay's offset**, which the mockup hard-coded as `left: 106px`, is the label column * plus the row gap. Both are variables here so the two can never drift apart. * 3. **A hit target.** A 10 px handle and a 20 px ruler are fine to look at and unusable to grab, so * the handle carries an invisible ±7 px `::before` and the seek rows say so with a cursor. */ me-timeline { display: block; flex: none; direction: ltr; /* see (1) — the one rule this component cannot do without */ } .tl { --tl-label-w: 96px; --tl-gap: var(--s4); padding: var(--s4) var(--s8) var(--s5); position: relative; } .tl-rows { display: flex; flex-direction: column; gap: 5px; position: relative; } .tl-row { display: flex; align-items: stretch; gap: var(--tl-gap); } .tl-label { flex-direction: column; justify-content: center; gap: 2px; width: var(--tl-label-w); flex: none; font-family: var(--stack-head); font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; display: flex; /* Two lines on the Words row, one on every other: `flex-start` keeps them both against the start of the label column, and `justify-content: center` above keeps the pair vertically centred. */ align-items: flex-start; } .tl-track { flex: 1; position: relative; background: var(--track); border-radius: var(--radius-sm); overflow: hidden; border: var(--hairline) solid var(--hairsoft); /* the token, not the mockup's literal — the only colour literal in this stylesheet was here, and Tasks 18-21 copy this block */ min-width: 0; } /* The rows a click means "go there" on. The Words track is deliberately not one: a click there * is a word, and the two gestures must not share a surface. */ .tl-seek { cursor: pointer; } /* The one track that has to say what tapping it does, in ink rather than in a tooltip — a tooltip * does not exist on a touch screen, and this track shows the same chips as the transcript reader, * where a tap marks the section instead of seeking (review round 2). */ .tl-sub { text-transform: none; letter-spacing: 0; font-size: 9.5px; opacity: .75; } .ruler { height: 20px; position: relative; flex: 1; min-width: 0; } .tick { position: absolute; top: 6px; bottom: 0; border-left: var(--hairline) solid var(--hairsoft); } .tick > bdi { position: absolute; top: -6px; left: 5px; font-family: var(--stack-head); font-size: var(--t-xs); color: var(--faint); white-space: nowrap; } .film { height: 54px; } .film-canvas { display: block; width: 100%; height: 100%; opacity: .88; filter: saturate(.85); } .wave { height: 40px; color: var(--dim); } .wave svg { display: block; width: 100%; height: 100%; opacity: .75; } .words { height: 68px; } .track-pending { position: absolute; left: var(--s5); top: 50%; transform: translateY(-50%); font-size: var(--t-s); color: var(--faint); opacity: .7; } /* A word chip. It is a real