/* ───────────────────────────────────────────────────────────────────────────── presentation.css — what a URL parameter is allowed to take away Loaded by BOTH pages, and every rule here is driven by a `ui-no-*` class that js/presentation.js puts on from the query string. Nothing in here is ever on by default: with no parameters the file does nothing at all. One stylesheet rather than a block in each page's own, because the flags are one contract and reading it in one place is how it stays honest — a `sidebar` flag that hid the rail on the configurator and forgot the gear on the try-on would be a parameter that means two things. LOADED LAST, on purpose. These rules override layout, so they have to come after configurator.css / layout.css rather than fight them on specificity. The elements stay in the DOM. Hiding is a presentation decision and the modules that wire buttons should not have to know it was made — a hidden "Try it on" is still wired, still carries the design, and comes back the moment the flag does. ───────────────────────────────────────────────────────────────────────────── */ /* ── The header ───────────────────────────────────────────────────────────── Wordmark, status readout and gear on the try-on; wordmark and try-on link on the configurator. Nothing below it is positioned against it — both pages give the rest of the window to a flex child — so removing it simply gives that child the height. */ .ui-no-header .app-header { display: none; } /* ── The summary line ─────────────────────────────────────────────────────── The ring in words, in the configurator's rail footer and over the try-on's video. Worth keeping in almost every embed; gone in `viewer`, where the whole point is the picture with nothing written on it. */ .ui-no-summary .summary { display: none; } /* ═══ Configurator (index.html) ══════════════════════════════════════════ */ /* ── The options rail ─────────────────────────────────────────────────────── Hiding it is a layout change as much as a visibility one: the grid is `1fr var(--rail-width)`, so the column has to go as well or the stage keeps rendering into a viewport with an empty strip beside it. The viewer's ResizeObserver is watching .stage, so the canvas re-fits and the ring re-frames on its own — the same path a phone's collapsing sheet takes. */ .ui-no-sidebar .rail { display: none; } .ui-no-sidebar .configurator { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); } /* ── The way to the try-on ────────────────────────────────────────────────── Both routes, not just the button. The header link is the other one, and a configurator that hid the button while leaving a link labelled "Try-on" in the corner would still be handing the customer the page it was asked to keep them out of. */ .ui-no-tryon #try-on, .ui-no-tryon #try-on-note, .ui-no-tryon #try-on-link { display: none; } /* With nothing but empty padding left in it, the footer is a rule across the bottom of the rail and nothing else. */ .ui-no-tryon.ui-no-summary .rail-footer { display: none; } /* ═══ Try-on (tryon.html) ════════════════════════════════════════════════ */ /* ── The settings ─────────────────────────────────────────────────────────── The drawer is calibration and diagnostics, and `sidebar` is the flag that answers for it — the same word as the configurator's rail, because to whoever writes the link they are the same thing: the panel of controls beside the picture. The drawer itself is hidden too, not merely its gear. It can be opened from the console and it is already open if the flag is somehow applied late, and in both cases a panel the link asked not to exist should not be able to slide over the hand. */ .ui-no-sidebar #settings-toggle, .ui-no-sidebar .drawer, .ui-no-sidebar .scrim { display: none; } /* ── The way back to the configurator ───────────────────────────────────── */ .ui-no-back #back-to-design { display: none; } /* Nothing left in the bar: no caption and no button. Hidden as a whole rather than left as a gradient over the bottom of the video. */ .ui-no-back.ui-no-summary .tryon-bar { display: none; } /* ── The calibration drawer (?tune=1) ─────────────────────────────────────── THE ONE RULE HERE THAT HIDES BY DEFAULT. Everything above subtracts from a complete page when a flag says to. This adds: the drawer, its scrim and the gear that opens it are absent unless the link asks for them, on BOTH pages. Behind it are the ring-fit calibration, the tracking diagnostics and the gem shader's own optics — an audience of one, and not the customer. The try-on's drawer used to ship visible, so this is a deliberate change to that page and not a new panel getting the same treatment as an old one. Written as :not(.ui-tune) rather than as a .ui-tune override, because the default has to hold when NOTHING has applied a class at all — a page whose script failed, or a first paint before applyPresentation() runs. The gear would otherwise be on screen for that moment, and a customer who pressed it would be inside the panel before the class arrived. */ body:not(.ui-tune) #settings-toggle, body:not(.ui-tune) .drawer, body:not(.ui-tune) .scrim, body:not(.ui-tune) .fps-meter { display: none; } /* The configurator's "Copy link" button, on the same terms: a tool for the person building product links, absent unless ?share=1 asks for it, and written as :not() so it is off before any class has been applied. */ body:not(.ui-share) #copy-link { display: none; }