/* PhrasePilot — surface layer. Split out of app.css at the 500-line cap. One responsibility: the design tokens, and the screen-vs-glasses overrides that decide what they mean. Loaded BEFORE app.css, which consumes these tokens. */ /* `hidden` means hidden, everywhere. It is only display:none in the UA stylesheet, so any author `display` declaration - a flex chip, a grid row - silently outranks it and the element stays on screen while every script in the app believes it is gone. This has bitten once (the scene chip); making it a rule rather than a per-element patch means it cannot bite twice. Elements that deliberately animate themselves out opt back in with their own rule. */ [hidden] { display: none !important; } /* ── Meta Ray-Ban Display spec ──────────────────────────────────────────────── 600x600, monocular, ADDITIVE display: black renders as TRANSPARENT, so the design is dark-first with bright high-contrast foreground. No cursor, no touch — navigation is D-pad (arrow keys + Enter) from the Neural Band. Source: wearables.developer.meta.com/docs/develop/webapps ─────────────────────────────────────────────────────────────────────────── */ /* Baseline = a SCREEN (phone, laptop). An emissive panel paints its own black, so a surface can be a surface and text does not have to be pure white to survive. The glasses overrides live in the [data-host="glasses"] block below — see the note there for why the two differ. */ :root { --ink: #07090c; /* a real dark surface; true black is glasses-only */ --surface: rgba(255,255,255,.045); /* card fill — nothing to fear on an LCD */ --text: #f2f4f8; /* primary. Not #fff: no reason to hit 21:1 on glass */ --dim: #9aa3b2; /* secondary — supporting info only */ --accent: #7cf5c0; /* one accent: yours to act on */ --hot: #ff6b6b; --focus: #ffffff; --spine: #526478; /* unfocused card spine */ --glow: none; /* text halo — earns its place only on additive glass */ --live: #ff5a5a; /* listening. The one colour that is never decoration. */ /* The meter is the only surface that carries red, so this is the only red derivative the palette needs. Washes and edges for a red BUTTON existed here for one pass and are gone: filling the button too made three elements shout the same word, and the control does not need a hue when its label already says "Stop". A canvas cannot read var(), so js/11-scene.js pulls this token rather than hardcoding the colour. */ --live-bar: rgba(255,90,90,.92); /* waveform bars above the speech gate */ /* Working — the round-trip after you stop. Not green (that is "act on this"), not red (that is "the mic is open"). Amber is the third state the palette was missing, and the reason a busy modal looked like a recording one. Carried by the sweeping bar and the dot, nothing else. */ --work: #ffc46b; /* Optimistic Display is Meta's, unlicensed. Bricolage Grotesque carries the phonetic line: optical sizing means the 34px cut is drawn for display use, not a 16px face scaled up. Geist runs the UI text. */ --ui: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif; --stage: 600px; /* the display is fixed; the stage always matches */ /* Meta minimum is 14px for legibility, 18px+ preferred. Nothing here goes below 14 except the all-caps intent label, which is tracked out. */ --fs-phonetic: 26px; --fs-theirs: 14px; --fs-mine: 15px; --fs-intent: 12px; --fs-gloss: 22px; } /* ── The glasses, and only the glasses ────────────────────────────────────── Set by refreshHost() (js/01-core.js) from detectGlasses() — a ~600x600 viewport, ?glasses=1, or the localStorage latch. Recomputed on resize because the glasses size their frame after load, so a value read once at boot is wrong on the one device this block is for. Everything here is a compensation for an ADDITIVE display, and every one of them is a downgrade on a screen: - true black, because black is not drawn at all — it is the real world - the FAINTEST card fill that is still visible: a lit panel does throw light into your eye and veil the street, but a dark one is not an option here — black is transparent at any opacity on an additive projector, so an unlit card is simply not drawn - a dark halo instead of a drop shadow: a shadow reads as dirt on the lens, and the halo is what keeps light text legible when what is behind it is a white wall rather than a dark street - #e6e6e6 rather than #fff: pure white ghosts against the real world on LCoS. 16.1:1 on black, still far past WCAG AA. Source: wearables.developer.meta.com/docs/develop/webapps, plus the Ray-Ban Display field notes at ravipalwe.medium.com (LCoS ghosting, halo). ─────────────────────────────────────────────────────────────────────────── */ [data-host="glasses"] { --ink: #000; /* A LIGHT fill, because on this display that is the only kind there is. This was rgba(0,0,0,.55) for one commit, on the reasoning that black costs zero added light. The reasoning was right and the conclusion was useless: an additive projector DRAWS light, it cannot subtract any, so a black pixel is transparent at every opacity. 55% of nothing is nothing. On the harness it composited over a scene photo and looked like a dark card; on the actual glasses it was invisible, which is what Roy saw. There is no dark card on additive glass. A visible panel has to emit, so the only question is how much. .10 is the smallest wash that still draws an edge — enough that three replies read as three things you are choosing between rather than loose lines over a moving street, and faint enough that the street behind it is veiled, not erased. That veil is the real cost and it is deliberate; --ink stays #000 so everything outside a card is still fully the world. */ --surface: rgba(255,255,255,.10); --text: #e6e6e6; --glow: 0 0 6px rgba(0,0,0,.9); /* Both state colours lighten on glass. A saturated mid red loses against a sunlit street; a lighter one still reads as red. The bar goes fully opaque for the same reason the card fill goes up — a translucent mark on an additive projector is a fraction of the only light there is. */ --live: #ff8080; --live-bar: rgba(255,128,128,1); --work: #ffd08a; } /* The 600 square cannot scroll, so padding is space the third card loses. Enough to let the fill read as an edge, and not one pixel more. */ [data-host="glasses"] .card { padding: 5px 10px 5px 12px; border-radius: 0 6px 6px 0; } /* Cards are sized to their content (`flex: none`, app.css), which was right when the fill was transparent — there was no edge to be ragged. With a visible fill, three different right edges read as three sizes of thing rather than three equal choices, so on-glass they stretch to one edge. */ [data-host="glasses"] .card { align-self: stretch; } /* The card you already said, ON GLASS ONLY. On a phone this is carried by a dim spine plus the ✓ SAID mark (app.css). Additive glass has no dark: a spine dropped to --spine is a few photons and reads as nothing, so the width cue that app.css dropped is kept here, where it is the only thing that survives. Still not mint - the hue stays the focus channel, so a matched card and a focused card remain two different marks. */ [data-host="glasses"] .card.matched { border-left-width: 8px; padding-left: 7px; /* 12 - 5, so the text does not shift right */ } /* The gloss is the other thing you read, so it gets the same knocked-back ground the replies get. Without it, `THEY SAID` floats on bare street while everything under the rule sits on a card — two treatments, one screen. */ [data-host="glasses"] .said { background: var(--surface); padding: 6px 10px; border-radius: 6px; }