/* ReelView — one stylesheet, no framework. Light app shell, dark video surfaces. Two scenes drove that split: uploading happens on a phone in Australian sun (forces light, high contrast); reviewing sixteen clips happens at a desk at night (forces dark around video, which is why every NLE is dark). Theme is per-surface, not global. */ /* Metric-matched fallback for Rethink Sans: the webfont loads via display=swap, and while it is in flight the system font draws the page. Segoe UI is ~6% narrower than Rethink at the same size, so text that fits one line in the brand font wraps to two lines in the fallback — the /new photo tips shift the whole page ~43px the moment the font lands (~1s after refresh on a slow link). Scaling the fallback to Rethink's advance width (measured 1.0606:1, 15px, see metrics note below) makes every line wrap identically, so the swap is invisible. The family name is distinct so the webfont (also named "Rethink Sans") wins the stack. */ @font-face { font-family: "Rethink Sans Fallback"; src: local("Segoe UI"), local("system-ui"), local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local(sans-serif); size-adjust: 106.06%; } :root { color-scheme: light; --bg: oklch(0.985 0.003 70); --surface: oklch(1 0 0); --surface-2: oklch(0.965 0.004 70); --line: oklch(0.90 0.005 70); /* 0.65, not the 0.82 this started at: --line-firm is the entire visible boundary of every quiet button, input and icon button, and at 0.82 it sat at 1.7:1 — under WCAG 1.4.11's 3:1 for perceiving a control at all. --line stays soft: a row divider is decoration, not a control, and 1.4.11 does not reach it. */ --line-firm: oklch(0.65 0.006 70); --ink: oklch(0.24 0.008 70); --ink-2: oklch(0.47 0.008 70); /* Both How-to reds moved together, Dean, 2026-09-05, and the pair is the point: this rest value only works because the hover went to pure red in the same change. The problem was the dark theme, where --bg is oklch(0.15 0.006 70). At the original 0.42 the resting body measured 2.15:1 and read as mud; lifting it to 0.47 (#a0282a) got 2.66:1, better but still under the 3:1 WCAG 1.4.11 asks. Lifting it further on its own would have closed the gap to the old #d02525 hover until the two states stopped reading as different. Dean's fix was to raise the ceiling instead. Hover went to pure #ff0000 first, which is literally YouTube's own brand red, and that freed the rest state to come up to 0.500 -- 3.04:1, over the line. But pure red read as too bright on the page, so the hover settled at #db3834, oklch(0.590 0.200 27.0). The glare was chroma rather than lightness -- pure red's 0.258 is a long way past anything else in this palette -- so the walk down went 0.258 -> 0.215 (#e63331) -> 0.200, with lightness barely moving at each step. It measures 4.34:1 on dark --bg against the old 3.72, and the rest-to-hover lightness step is 0.090 against the 0.134 the original pair had, which is the thing to watch if it goes lower: below this the hover stops announcing itself as a state change. Light theme was never the constraint and comes out fine: rest 7.09 -> 6.21, hover 5.06 -> 4.34. Knocking the red back helped here rather than hurting -- pure red had taken light theme to 3.83, the worst number anywhere in this change. Note the two themes recede in different ways -- on light the resting red is quieter because it is less saturated than the hover, on dark because it is darker -- which is why one token can serve both here but would not survive being pushed much further in either direction. */ --howto-red: oklch(0.500 0.150 24.8); /* #a83635; the How-to icon at rest, #db3834 is its hover */ --howto-play: oklch(0.80 0.004 70); /* its play triangle at rest; #f0eeec is its hover */ /* 0.54 clears 4.5:1 even on --surface-2 (hovered rows, the icon button). At the 0.62 it was, "Queued" and every hint missed AA at 0.875rem — too small for the large-text exemption. */ --ink-3: oklch(0.54 0.007 70); /* Placeholder text only, step-level quieter than the --ink-3 floor. Under 4.5:1 on purpose — Dean, 2026-08-05: "less prominent". A placeholder is a sample of what goes in the field, not the label; the label sits above it. Never use for real content. */ --ink-4: oklch(0.62 0.005 70); /* Gold, not purple. Purple-on-white is the AI-tool reflex and this product's credibility rests on restraint about what the AI did. Actions and selection only, never decoration. --accent is #fac800 exactly, the same gold every button's hover tint already used (see rgba(250,200,0,…) below) — Dean, 2026-08-03. --accent-in is a darker sibling built for the one job the literal hex can't do itself: #fac800 is only 1.5:1 on white, so it cannot be text; --accent-in measures 6.5:1. */ --accent: oklch(0.852 0.174 90.2); /* = #fac800 */ --accent-in: oklch(0.47 0.13 90.2); /* Text ON a filled --accent. Used to be near-white, because the old fill sat mid-lightness; #fac800 is L 0.85, and white text on it is 1.6:1. Dark ink instead — fixed, not var(--ink), because --accent itself does not move between themes (below) and what sits on it shouldn't either. 10.4:1 either theme. */ --on-accent: oklch(0.24 0.008 70); /* The accent when it is TEXT rather than a fill — links, .status.act, the pack tag, the role badge. --accent-in serves that job on light, --accent-ink below overrides it on dark: a fill can stay the same bright gold in both themes, but text needs to go dark on a light ground and light on a dark one, so the two obligations split into two tokens the same way --line and --line-firm do. */ --accent-ink: var(--accent-in); /* The ground behind an AGENCY's own artwork — a logo we did not draw and cannot recolour. It stays light in both themes, because the overwhelming majority of agency marks are dark ink on transparent and a dark plate would erase them. Same reasoning as the QR frame's #fff: when we do not control what sits on a surface, the surface does not get to move. The one exception is `.agency-logo` (spec HN): a flat plate cannot serve both a dark-ink mark and ReelView's own gold-on-transparent mark, so that one spot trades the flat plate for a theme-aware checkerboard (`--plate-check-a/b` below) instead of moving `--plate` itself. */ --plate: var(--surface-2); /* Checkerboard for `.agency-logo` only (spec HN) — a transparency indicator, not a flat colour, behind a mark we did not draw. HN held this pair to WCAG 1.4.11 (non-text contrast): `-a` (white) and `-b` sat far apart on purpose so every mark type cleared 3:1 against at least one of them — gold read 1.6:1 on `-a` but 3.1:1 on `-b`. SC 1.4.11 carries an explicit logotype exception ("part of a logo or brand name has no minimum contrast requirement"), and an agency's own mark on /entity is exactly that — the bar HN held was self-imposed, not required. Dean asked for the pattern softer and supplied the standard editor transparency grid (white / #ccc) as the reference (spec HS, 2026-09-04); `-b` now trades the contrast-maximised anchor for that standard, and the per-mark guarantee above no longer holds — see the dark block's comment below for its mirror. */ --plate-check-a: oklch(1 0 0); --plate-check-b: oklch(0.84 0.003 70); --ok: oklch(0.48 0.09 150); --warn: oklch(0.52 0.11 62); /* Destructive only — removing someone, and nothing else. Same lightness as --warn so it reads as part of this palette and still clears 4.5:1 on white. */ --bad: oklch(0.52 0.19 27); --skip: #a0282a; --bad-bg: oklch(0.96 0.02 27); --radius: 8px; --pad: 1rem; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Icon-swap motion, after the transitions.dev pattern of the same name: the outgoing icon scales down and blurs out while the incoming one does the reverse, both in one grid cell. Its `will-change` is deliberately not carried over — leaving that hint on an element that sits at rest on every page is the exact overuse an audit flags, and a blur on an 18px box needs no help. */ --icon-swap-dur: 250ms; --icon-swap-blur: 2px; --icon-swap-start-scale: 0.25; --icon-swap-ease: ease-in-out; } /* --- dark ---------------------------------------------------------------- ONE override block, keyed on an attribute the head script stamps before first paint. The OS preference is deliberately NOT queried here: the script resolves it and any stored choice into that same attribute, so these values live in exactly one place. A media query beside this block would be a second copy of the same list, and this stylesheet has already paid for that mistake once, with two tokens for one measure (see --measure). test_theme.py fails if one appears. With scripting off nothing is stamped and the page is light, which is what shipped before. The lightness ramp is not the light one flipped. --bg sits at 0.15 rather than mirroring 0.985, because the footage grounds are hard-coded at 0.20 and 0.22 (they are per-surface and do not move) — a page at 0.20 would swallow the review stage and the hero, and "footage sits on its own ground" would stop being visibly true. At 0.15 they still read as panels lifted off it. Every pair below was measured, not chosen. On --bg: ink 17.0, ink-2 9.8, ink-3 7.4; on the worst ground in the system (--surface-2, the hover fill) ink-3 still holds 6.2, well past the 4.6 it manages on light. Dark grounds are cheap for contrast — the constraint that actually binds here is the accent, which is why --accent-ink exists. */ :root[data-theme=dark] { color-scheme: dark; --bg: oklch(0.15 0.006 70); --surface: oklch(0.19 0.006 70); --surface-2: oklch(0.24 0.007 70); --line: oklch(0.31 0.006 70); /* 4.7:1 on --surface, against the 3:1 WCAG 1.4.11 asks of a control's boundary. Held well above the floor rather than at it: on a dark ground a hairline is the first thing lost to a phone's auto-brightness in the sun, which is the same scene that set 0.65 on light. */ --line-firm: oklch(0.60 0.008 70); --ink: oklch(0.95 0.004 70); --ink-2: oklch(0.78 0.006 70); --ink-3: oklch(0.70 0.006 70); /* Placeholder text only (pair of the light theme's --ink-4): quieter than the --ink-3 floor. */ --ink-4: oklch(0.62 0.006 70); /* --accent and --accent-in do NOT move. The gold is the one thing an agent recognises across both rooms, and --on-accent has the same job whatever is behind it — 10.4:1 either way, since it is now fixed rather than theme-linked (see the light block above). Hover still deepens rather than lifting, so "hover deepens the fill" stays literally true in both themes instead of becoming a per-theme special case. What cannot stay is --accent-in as TEXT: it is 2.9:1 on a 0.15 ground, under AA. */ --accent-ink: oklch(0.72 0.13 90.2); /* 7.9 on --bg, 6.6 on --surface-2 */ /* Lifted to clear 4.5:1 on every ground, and kept at one lightness across the three so they still read as one family — the same rule the light set follows at 0.48/0.52/0.52. */ --ok: oklch(0.74 0.14 150); --warn: oklch(0.78 0.13 62); --bad: oklch(0.68 0.17 27); --skip: oklch(0.68 0.17 27); --bad-bg: oklch(0.28 0.06 27); --plate: oklch(0.93 0.003 70); /* Dark theme's `.agency-logo` checkerboard (spec HN, softened spec HS 2026-09-04) -- see the light block's comment above for the contrast trade HN made and why the logotype exception means it no longer needs to hold. `-a` stays this theme's own identity tone (near-black, serving gold well: 11.2:1) -- Dean asked for "a darker one for dark theme" explicitly and that has not changed. `-b` is now theme-linked instead of a shared contrast anchor: each theme carries its own step from `-a` toward the standard editor grid, mirroring light's `0.55 → 0.84` with a `0.55 → 0.32` darkening here. */ --plate-check-a: oklch(0.21 0.006 70); --plate-check-b: oklch(0.32 0.006 70); } * { box-sizing: border-box; } html { /* Reserve the scrollbar gutter always. Without it a short page has no scrollbar and a long one does, so the viewport differs by its width and every centred element — wordmark, nav, footer — shifts a few pixels as you navigate. Cheaper and steadier than any JS. */ scrollbar-gutter: stable; } /* `position: sticky` on the footer only keeps it visible while scrolling PAST it — on a page short enough to never scroll (a bare login form, most legal-page loads), sticky never engages and the footer just sits wherever the content ends, floating well above the viewport's true bottom edge. Dean, 2026-08-03. The flex column is what actually locks it to the bottom on a short page; sticky still does its own job of keeping it in view on a long, scrolling one — the two are complementary, not a replacement for each other. `min-height: 100dvh` overrides the `100vh` fallback where supported, so a phone's address bar collapsing does not yank the layout taller than the screen actually is. */ body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 "Rethink Sans", "Rethink Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } /* One measure for the FRAME, whatever the content does. The masthead, the workflow bar and the footer all use --frame, so the wordmark sits in the same place on every page — with two measures they moved 140px as you navigated between a narrow page and a wide one, which reads as the whole site shifting rather than the content changing. */ :root { --frame: 1180px; } /* One width for the workflow pills and the masthead CTA. They sit one above the other in the same header, so a pill measured by its longest label and a button measured by its own text read as two unrelated controls stacked by accident. */ :root { --pill: 8.5rem; } /* width: 100%, not left to `auto` — Dean, 2026-08-03. `
` is now a flex item (the footer-lock fix, above), and a flex item's `auto` width sizes to its own content rather than filling the line the way a normal block box does — with a fit-content algorithm and nothing inside forcing 1180px, .wrap and everything in it (the account sidebar, in particular) quietly shrank to ~465px and `margin: auto` centred that smaller box instead of the real one, pulling the sidebar hundreds of pixels off the wordmark's left edge above it. Harmless everywhere .wrap is NOT a flex item (the footer's own `.wrap`, a normal block child of `.foot`): a block box already fills 100% of the line by default, so this changes nothing there. */ .wrap { width: 100%; max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* The job screens are a working surface, not a reading one: a scene row carries a grip, a thumbnail, a name, a shot description and three controls, and at 900px those crowd while the prose limits elsewhere (66ch) keep the rest of the site readable. Wider only where it earns it — the legal pages and the landing copy stay narrow. */ .wrap.wide { max-width: var(--frame); } /* --- skip link ----------------------------------------------------------- The masthead is sticky and carries the wordmark, the CTA, the balance, Account, Log out and the theme toggle; a job screen stacks five workflow stages and Cancel underneath. That is about nine stops before the first thing on the page, on every navigation, and the whole cost falls on people who move by keyboard or switch — which is why it stayed invisible until it was counted rather than looked at. WCAG 2.4.1. Parked off-screen rather than `display: none`, because a hidden element is not focusable and a skip link nobody can reach is worse than none: it satisfies an automated check while helping no one. No transition on `top` — this system animates no layout property (the render meter's waiver is scoped to its one line and must not be inherited), and an instant jump is the right behaviour for a control whose entire job is to be fast. `tabindex=-1` on
is what makes the jump actually move keyboard focus; without it some browsers scroll the fragment into view and leave focus behind in the masthead, so the next Tab returns to the nav the user just skipped. -1 keeps it out of the tab order itself. */ .skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 30; padding: 0.55rem 1.1rem; border-radius: var(--radius); background: var(--surface); color: var(--ink); border: 1px solid var(--line-firm); text-decoration: none; font-size: 0.9375rem; } .skip:focus { top: 0.75rem; } /*
is a focus TARGET, never a focus stop: it takes focus from the skip link so the next Tab lands on the page's own first control, and it must not draw a ring around the whole column when it does. Every real control keeps the global :focus-visible outline. */ #main:focus { outline: none; } /* --- masthead ------------------------------------------------------------ */ /* Sticky: the plan and review screens scroll for sixteen scenes, and the balance and the way back should never be a scroll away. Translucent + blur so footage and photo grids read as passing under it rather than colliding with it. */ .top { position: sticky; top: 0; z-index: 20; background: color-mix(in oklch, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); } /* Same measure as .steps-bar and .wrap, so the wordmark sits above the page's left edge and the nav above its right, instead of both being flung to the window edges. */ /* Grid, not space-between: the middle cell has to sit on the CENTRE of the frame, and with flex it would sit wherever the wordmark and the nav left it — drifting as the balance goes from "9 credits" to "12 credits". Equal 1fr shoulders pin it. With no CTA (a stranger) the middle column collapses to nothing and the result is what space-between drew before. */ .topline { max-width: var(--frame); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 0.5rem 1.25rem; } /* Columns named explicitly, not left to auto-placement. When there is no CTA — a stranger, a legal page — the element is absent rather than empty, and auto-placement drops the nav into the middle column and centres it. Pinning it to column 3 keeps the right edge the right edge. */ .topline .mark { grid-column: 1; justify-self: start; } /* The home page's left slot: same grid cell as the wordmark, but a button (Gallery), because that screen carries no wordmark to anchor on. See home()'s `home_mark`. */ .topline .home-mark { grid-column: 1; justify-self: start; } /* The home masthead runs shorter than every other page's (48px vs 56px, measured) — every other page's left slot is the wordmark image, 40px tall and taller than the 32px controls that govern height everywhere else in the bar; home's own left slot (Gallery) is one of those 32px controls, so nothing there reaches 40px to stretch the row. Extra vertical padding closes the gap without growing the Gallery button past the height every other masthead control shares. 2026-08-04. */ .topline:has(.home-mark) { padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Louder text, same box. .btn carries a 44px tap target, which next to a 32px Log out made the masthead look like it had swallowed something — so the height is pinned to match the controls beside it and the emphasis comes from the type instead. The tap target comes back on mobile below, where the button has its own row and thumbs are the input. */ /* `a.cta`, not `.cta`: .btn.small is the same specificity and sits further down the file, so it quietly won the font-size and the button came out at 14px regular. */ .topline a.cta { grid-column: 2; min-height: 0; height: 2rem; width: max-content; padding: 0 0.85rem; /* width: max-content, not var(--pill): the CTA's label grew to "Create Walkthrough" (2026-08-10) and 8.5rem pill clipped/ran the text to two lines. Size to the label so it never wraps, whatever the copy says (Dean, 2026-08-10). */ /* margin: 0 kills the inherited bottom margin. It is invisible but it is part of the grid item's box, so align-items centred button+margin and hung the button ~5px above the Log out beside it — while adding its whole height to the masthead. */ margin: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9375rem; font-weight: 600; /* The one action the masthead leads with — its border gets the gold accent so it reads as the conversion control in a row of quiet links (Dean, 2026-08-10). */ border-color: var(--accent); } /* The signed-out masthead CTA is mobile-only (spec EY §2a) -- the desktop hero CTA is already above the fold there (measured top=664 on 1440x900), so a masthead copy of it would be redundant and would change a masthead nobody asked to change. Keyed on href, not a new class, so the signed-in Create Walkthrough button (href=/new) -- which DOES show on desktop, unchanged -- shares every other rule with zero risk of this one catching it too. */ @media (min-width: 641px) { .topline a.cta[href="/signup"] { display: none; } } .topline nav { grid-column: 3; justify-self: end; } /* The staff masthead's page links (Admin | Status | Usage) — column 2 is the same centred slot a.cta uses above; there is no CTA on the staff shell, so nothing else wants it. */ .topline nav.tabs { grid-column: 2; justify-self: center; } /* --- workflow steps ------------------------------------------------------ Where the job is, and what is behind it. Lives in the masthead because a job is one URL whose shape changes with its phase — without this the agent can see what the current screen wants but not what is left or what a click will cost. Three states, each carrying a non-colour signal as well: done has a tick and is a link, current is filled and marked aria-current, ahead is dimmed and is not a link at all. */ /* The bar spans the full window (it lives in the masthead), but its CONTENTS have to line up with the page: same max-width and auto margins as .wrap, or "centred" means centred on the viewport while the content sits in a 1180px column, and the escape pins to the window edge rather than the content edge. That mismatch is what made it look off. Grid `1fr auto 1fr`: the steps occupy the middle column, so they stay put as the escape label changes width — with flex the whole run would shift when Cancel became Leave. */ .steps-bar { border-top: 1px solid var(--line); max-width: var(--frame); margin: 0 auto; padding: 0.4rem 1.25rem 0.55rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; } .steps-bar ol { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 0.3rem; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; } .steps-bar ol::-webkit-scrollbar { display: none; } /* Far left of the content column, directly under the wordmark — the bar shares .topline's frame and padding, so column 1 starts exactly where the mark does. Named explicitly rather than left to auto-placement: with no Cancel rendered, the steps would otherwise slide into its column. The compound selector is deliberate — `.top a` sets colour at 0-1-1 and would beat a lone `.step-back`, which is how the masthead buttons ended up with unreadable text once already. */ .step-back { grid-column: 1; justify-self: start; } /* The same metrics as Cancel in the opposite shoulder, so the two ends of the bar are a matched pair rather than two different-sized controls. NOT `.btn.small`: that is (0,2,0) and sits later in this file, so it would win the tie on font-size and padding and quietly resize this — exactly how the masthead CTA came out 44px tall. `a.step-back.btn` is (0,2,1) and does not depend on source order. nowrap because at 400px the 1fr shoulder squeezes the label to its longest word, and "‹ Reels" over two lines makes the bar taller than the steps beside it. */ a.step-back.btn { min-height: 0; padding: 0.3rem 0.7rem; font-size: 0.8125rem; min-width: 69px; white-space: nowrap; } /* Far right of the content column, and always in column 3 whether or not it is rendered. */ .step-esc { grid-column: 3; justify-self: end; margin: 0; } /* The uploader's Cancel is a GET form so it can be a real button like the plan header's; a block-level form would stretch across the grid cell, so un-box it — the button becomes the grid item, same as .team-actions form (Dean, 2026-08-16). */ .step-esc form { display: contents; } /* Same metrics AND the same width as Log out directly above it: they sit in the same corner of two stacked bars, and "Cancel" being seven pixels narrower than "Log out" read as a wobble in the right edge rather than as two different buttons. min-width, not width, so a longer label still fits. */ .step-esc button { min-height: 0; padding: 0.3rem 0.7rem; font-size: 0.8125rem; min-width: 69px; } /* The suspended Cancel during starting/curating (see _steps): the job page meta-refreshes every 3s while the walkthrough is being built, and a live confirm-then-POST Cancel would race that reload and can land on a 404. So those phases render an inert