/* ══════════════════════════════════════════════════════════════════════ THE WIDGETS PAGE — its own stylesheet Everything below used to sit at the foot of nowssb-nm.css, which is 360KB the whole app waits on. This page is one screen most readers open rarely; its rules are here so they are fetched, parsed and cached on their own, and so this file can be worked on without touching the one every screen depends on. Load order matters and is preserved: index.html links this straight after nowssb-nm.css, which is exactly where these rules were, so no cascade changes hands. The paths are ../assets/, not ./assets/. A url() in a stylesheet is resolved against THE STYLESHEET, not the page — this file sits in app/, one level down from where nowssb-nm.css sits, so every frame these rules draw would have 404'd at app/assets/… had they come across unchanged. ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ SETTINGS → WIDGETS (markup shell in index.html, body in part082.js) Three rails that scroll sideways. A rail rather than a grid because a grid of twelve shortcuts is a wall to read; a rail says "there is more this way" and costs one gesture. ══════════════════════════════════════════════════════════════════════ */ /* ── Above the Settings screen ── Every .sub-screen shares z-index 600, so among open ones the LAST in the document paints on top. The Widgets page is written before the Settings screen, so opening it from Settings put it underneath — it was opening, you just could not see it. */ #sub-settings.open { z-index: 900; } /* ── The page's backdrop ── #stBg is the layer, .st-page is what sits on it. The page's own opaque fill has to go, or there is nothing to see — but only its fill: the scrim below is what keeps the type legible, and it is part of the PAGE, never a lid laid over it. */ #sub-settings .st-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-color: #05070e; pointer-events: none; overflow: hidden; } #sub-settings .st-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: translateZ(0); backface-visibility: hidden; } #sub-settings .st-page { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; overflow: hidden; /* A scrim, not a lid. Dark enough for 11px type between the cards, open enough that the picture behind is plainly a picture. No backdrop-filter — a full-screen blur every frame is the one thing this page cannot afford. */ background: linear-gradient(180deg, rgba(5,7,14,0.62) 0%, rgba(5,7,14,0.5) 46%, rgba(5,7,14,0.7) 100%); } #sub-settings .st-header { display: flex; align-items: center; gap: 14px; flex-shrink: 0; padding: calc(env(safe-area-inset-top, 14px) + 12px) 18px 14px; } /* .sub-back is position:absolute in the app's own sub-header pattern, which took it out of this flex row — the disc landed on top of the title and the header collapsed to the height of the text. */ #sub-settings .st-header .sub-back { position: static !important; top: auto !important; left: auto !important; } #sub-settings .st-title { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 800; letter-spacing: .2px; color: #fff; } #sub-settings .st-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 calc(env(safe-area-inset-bottom, 24px) + 40px); } .stw-intro { padding: 4px 20px 20px; } .stw-intro-t { font-family: 'DM Sans', sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.6px; color: #fff; line-height: 1.1; } .stw-intro-s { margin-top: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.6); } .stw-rail { margin-bottom: 26px; } .stw-head { display: flex; align-items: flex-end; gap: 12px; padding: 0 20px 12px; } .stw-head-txt { flex: 1; min-width: 0; } .stw-title { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .2px; color: #fff; } .stw-sub { margin-top: 3px; font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.5); } .stw-sub:empty { display: none; } /* the rail itself — padding on the scroller, not the cards, so the first and last card sit against the page's own margin */ .stw-scroll { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 4px 20px 6px; /* Snap has to know about the page inset, or it pulls the first card flush to the edge and eats the padding-left. */ scroll-snap-type: x proximity; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; } .stw-scroll::-webkit-scrollbar { display: none; } .stw-card { flex: 0 0 auto; scroll-snap-align: start; width: 148px; min-height: 0 !important; display: flex; flex-direction: column; align-items: flex-start; padding: 14px; cursor: pointer; text-align: left; border-radius: 18px !important; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.11); box-shadow: 0 10px 26px rgba(0,0,0,0.34); color: #fff; } .stw-card:active { transform: scale(.97); } .stw-t { font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: .1px; color: #fff; line-height: 1.25; } .stw-s { margin-top: 4px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 400; line-height: 1.4; color: rgba(255,255,255,0.52); } /* ── a shortcut card ── */ .stw-go .stw-ico { width: 40px; height: 40px; margin-bottom: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px !important; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: #fff; } .stw-go .stw-ico svg { width: 21px; height: 21px; display: block; } /* ── a section card ── The card IS the section: a clone of the real thing, scaled to fit and frozen against touch. .stw-prev is the window, .stw-prev-stage is the section at its real 358px width with a transform bringing it down. */ .stw-wcard { flex: 0 0 auto; scroll-snap-align: start; /* 214px showed a section at 0.6 scale through a 190px window, which cut most of them in half — you were choosing between the top thirds of things. The card is most of the screen wide now and the whole section is scaled to fit inside it, never cropped. */ width: min(80vw, 306px); border-radius: 18px !important; overflow: hidden; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 26px rgba(0,0,0,0.34); transition: opacity .22s ease, border-color .22s ease; } /* A section card that is switched off is dimmed to say so. A HERO card is not a switch — the three of them are three choices, and dimming the two you are not on made the whole row look disabled and unreadable. */ .stw-wcard:not(.on):not(.stw-hero) { opacity: .42; } .stw-wcard.on { border-color: rgba(232,213,163,0.42); } .stw-wcard.fixed { opacity: .8; } /* ── the wrapper round a preview ── The same glass card the Fashion home wraps its own sections in, with the same 12px on all four sides, so the television is never flush against the edge of the card it sits in. */ /* ── One wrapper, not four ── A card was: this glass box, then the preview's own border, then the section's glass wrapper inside the clone, then whatever frame the section itself wears. Four boxes around one thing. The card's own chrome is gone — it is padding and nothing else — so what you see is the section wearing what the section wears. */ .stw-wrap { margin: 12px 12px 0; padding: 12px; box-sizing: border-box; background: none; border: none; border-radius: 0 !important; /* No backdrop-filter. Twelve cards each blurring what is behind them is twelve full-size blurs a frame, and this row scrolls — it was the difference between a rail that slides and one that stutters. The flat translucent fill reads the same over the page's own dark. */ box-shadow: 0 16px 40px rgba(0,0,0,0.34); } .stw-prev { position: relative; width: 100%; height: 300px; display: flex; overflow: hidden; background: #070a12; } /* ── a plain preview ── No device around it: this shape is used only for the blocks that arrive with a frame of their own — a tablet, a laptop, a set — and for the rows of buttons, which are not sections and have never been on anything. The screen's height is set per card by the script, so the card is exactly as tall as what is in it. */ .stw-prev.stw-plain { height: auto; border-radius: 14px !important; border: none; } .stw-prev.stw-plain .stw-screen { border-radius: 13px !important; } /* the screen: one flex child, so it fills the content box in both directions without a percentage height to resolve */ .stw-screen { flex: 1 1 auto; min-width: 0; align-self: stretch; position: relative; overflow: hidden; background: #060c18; } /* Cards in these two rails no longer have to agree on a height — each set is as tall as the section it is showing. The shortcut rails are left stretching, because those cards are a grid of equals. */ #stwBlocks, #stwTabs { align-items: flex-start; } .stw-prev-stage { position: absolute; top: 0; left: 0; width: 358px; /* the width a section is laid out at */ transform-origin: top left; /* replaced the moment the clone is measured: the scale that fits the WHOLE section in the window, and a translate that centres it */ transform: scale(0.6); pointer-events: none; /* nothing in a preview is pressable */ } .stw-prev-stage.empty::after { content: 'Nothing to show yet'; position: absolute; left: 14px; top: 14px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); } /* a section inside a preview must not carry its page margins */ .stw-prev-stage > * { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } .stw-wfoot { display: flex; align-items: center; gap: 10px; padding: 12px 12px 13px; } .stw-wtxt { flex: 1; min-width: 0; } .stw-wfoot .stw-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stw-wfoot .stw-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the switch — a real one, because a dot is not obviously pressable */ .stw-pill { flex-shrink: 0; width: 42px !important; height: 25px !important; min-width: 42px !important; min-height: 25px !important; padding: 0 !important; cursor: pointer; position: relative; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 999px !important; background: rgba(255,255,255,0.09) !important; transition: background .2s ease, border-color .2s ease; } .stw-knob { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50% !important; background: rgba(255,255,255,0.55); transition: transform .22s cubic-bezier(.2,1,.3,1), background .2s ease; } .stw-wcard.on .stw-pill { background: rgba(232,213,163,0.24) !important; border-color: rgba(232,213,163,0.6) !important; } .stw-wcard.on .stw-knob { transform: translateX(17px); background: #e8d5a3; } .stw-pill.fixed { width: auto !important; min-width: 0 !important; padding: 5px 10px !important; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.5); display: flex; align-items: center; } .stw-empty { padding: 0 20px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.5); } /* A mode card in Customize shows a switch; when it also has a page behind it, the way in sits beside the switch instead of being unreachable. */ .cu-mode-row { display: flex; align-items: center; gap: 8px; } .cu-card-in { padding: 5px 11px; cursor: pointer; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; background: rgba(255,255,255,0.08) !important; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; min-height: 0 !important; } .cu-card-in:active { transform: scale(.94); } /* The hero previews are taller — a hero is a tall thing, and at the section cards' height you would see only its top bezel. */ /* ══════════════════════════════════════════════════════════════════════ THE DECK — one device, and the sections passing through it Every card used to carry its own television. That was wrong twice: a set drawn around a block that already has a tablet inside it is a device in a device, and twenty-six sets is twenty-six bezels to look past. There is one set now. It stands still in the middle and does not move at all; the sections swing through it, the one in the middle landing on the screen and the ones either side standing back at an angle, half behind its edge. The footer carousel has worked this way for a while — this is that shape, with the app's own furniture in it. The device carries its bezel as PADDING, so its content box IS the aperture. The script measures that one box and every slide is placed from it, which means the numbers here can never drift out of step with where the slides land. ══════════════════════════════════════════════════════════════════════ */ .stw-deck { --dw: min(82vw, 312px); /* how wide the device stands */ --ah: 420px; /* and how tall its screen is, where free */ position: relative; } /* The tablet cannot choose its own height — it is one render, so it keeps its shape — and the only way to a screen worth reading is to stand it wider. */ .stw-deck-tab { --dw: min(94vw, 358px); } .stw-dstage { position: relative; width: 100%; overflow: hidden; /* the angle the slides either side are seen at */ perspective: 1100px; perspective-origin: 50% 50%; } /* The television's screen height is ours to choose — the render is a top bezel, a bottom bezel and side rails that tile, so the set stretches to whatever it is given without any of it distorting. 10.95% is the two bezels (2.410 + 8.540) as a fraction of the width. */ .stw-deck-tv .stw-dstage { height: calc(var(--ah) + var(--dw) * 0.1095); } /* The tablet is one image, so it keeps its own shape: 1339x875. */ .stw-deck-tab .stw-dstage { height: calc(var(--dw) * 875 / 1339); } .stw-dev { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--dw); height: 100%; box-sizing: border-box; z-index: 5; /* over the slides: they pass BEHIND its edge */ pointer-events: none; } .stw-dev-tv { /* calc off --dw, NOT percentages. Percentage padding resolves against the containing block's width — the stage, 390 wide — while the slices are sized to the device's own width, 312. The bezel and the artwork drawn in it would sit at different scales, so the aperture would not be where the screen is. */ padding: calc(var(--dw) * 0.02410) calc(var(--dw) * 0.01791) calc(var(--dw) * 0.08540) calc(var(--dw) * 0.01928); background: url('.assets/media/image/tv-l-top-ebc3578b.webp') top center / 100% auto no-repeat, url('.assets/media/image/tv-l-bottom-c847689d.webp') bottom center / 100% auto no-repeat; } /* The rails, tiled — and STOPPED at the top of the bottom bezel. Run to the foot of the box and they carry on down either side of the stand and close a rectangle around its feet, which is the white line that was showing under every set. The stop is a fraction of the WIDTH, because that is what the slice's rendered height is, and `bottom` resolves against height — so it is written as a calc off --dw rather than a percentage. */ .stw-dev-tv::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--dw) * 0.0854); background: url('.assets/media/image/tv-l-mid-9b5cea85.webp') top center / 100% 8px repeat-y; } .stw-dev-tab { padding: calc(var(--dw) * 0.04854) calc(var(--dw) * 0.03510) calc(var(--dw) * 0.03734); background: url('.assets/media/image/tab-landscape-221ff371.webp') center / 100% 100% no-repeat; } /* The aperture must stay EMPTY. The device is drawn over the slides — that is what lets them pass behind its edge — so anything painted in its content box would cover the very thing it is framing. Both renders are transparent through the screen, and the dark behind the slides is a layer of the stage, under them, instead. */ .stw-dstage::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--dw); background: #05070d; z-index: 0; } .stw-slide { position: absolute; overflow: hidden; box-sizing: border-box; /* The section stands off the screen's edge on all four sides rather than running into the bezel. The script reads this padding and fits the clone to what is left, so the inset is real space, not a crop. */ padding: 12px; background: #060c18; transform-origin: 50% 50%; transition: transform .30s cubic-bezier(.22,1,.3,1), opacity .20s ease; cursor: pointer; box-shadow: 0 18px 40px rgba(0,0,0,0.5); } .stw-slide.on { cursor: default; box-shadow: none; } .stw-slide.off { filter: grayscale(1) brightness(.55); } /* the bar under the deck: which one you are on, and its switch */ .stw-dbar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 0; } .stw-dnav { flex-shrink: 0; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.07) !important; color: #fff; } .stw-dnav:active { transform: scale(.92); } .stw-dnav svg { width: 17px; height: 17px; display: block; } .stw-dtxt { flex: 1; min-width: 0; text-align: center; } .stw-dtxt .stw-t, .stw-dtxt .stw-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stw-dsw { flex-shrink: 0; display: flex; align-items: center; } .stw-pill.on { background: rgba(232,213,163,0.24) !important; border-color: rgba(232,213,163,0.6) !important; } .stw-pill.on .stw-knob { transform: translateX(17px); background: #e8d5a3; } .stw-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; } .stw-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.22); transition: background .2s ease, width .2s ease; } .stw-dots i.on { width: 18px; border-radius: 3px; background: #e8d5a3; } .stw-dots i.off { background: rgba(255,255,255,0.1); } /* ── Fashion Plus reaches this page too ── The mode's film is one fixed clip behind everything (#fpBgVideo); a sub-screen is opaque and z-index 600, so it covers it. The pages that let it through are the ones tagged for carrying a photograph of their own — this one carries none, so it is named here instead. Only while Page backgrounds is on, which is the mode's own part switch. */ /* The clip inside #stBg. Everything about where it sits is on .st-bg above; this is only the reduce-motion answer, which the script already agrees with — it never builds the video at all in that case. */ @media (prefers-reduced-motion: reduce) { #sub-settings .stw-film { display: none; } } /* The hero cards keep a plain screen rather than a television — one of the three things they are offering IS the television, and a set inside a set says nothing. */ .stw-prev-tall { height: 380px; } /* ── A hero card you can actually see ── These three are not switches — they are three pictures of the same screen, and the whole decision is made by looking at them. Built on the rail's own 4.5%-white fill they were three dark rectangles on a dark page: the card was invisible, and the preview inside it lost its edges against the page it was sitting on. So the hero cards leave the rail's palette. A pale surface, a white border and a lit rim, with the preview window given its own dark so the screen inside reads as a screen. Nothing here is translucent and nothing blurs — three cards, three frames, no cost. */ .stw-wcard.stw-hero { background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 16px 38px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.5); opacity: 1; } /* the one in use is named by its own edge, not by dimming the other two */ .stw-wcard.stw-hero.on { background: rgba(255,255,255,0.38); border-color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px rgba(255,255,255,0.35); } /* the window round a hero preview: a hard dark screen so the look inside it is judged against black, the way it will be on the page */ .stw-wcard.stw-hero .stw-prev, .stw-wcard.stw-hero .stw-screen { background: #05070e; } .stw-wcard.stw-hero .stw-prev { border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); } /* the foot reads on the pale card */ .stw-wcard.stw-hero .stw-t { color: #fff; } .stw-wcard.stw-hero .stw-s { color: rgba(255,255,255,0.78); } .stw-wcard.stw-hero .stw-pill.fixed, .stw-wcard.stw-hero .stw-pill.fixed.on { color: #060c18; background: rgba(255,255,255,0.86) !important; border-color: rgba(255,255,255,0.9) !important; padding: 8px 13px !important; border-radius: 999px !important; } /* ── what a hero preview has to survive ── The clone is not on the home page, so anything the hero does relative to the page has to be undone: it must not push itself down past a fixed header that is not there, and it must not cap its own width against a viewport it is not filling. The plain and television looks then differ inside the window exactly as they will on the page — which is the whole point of showing them side by side. */ .stw-prev-stage .hero-section { margin: 0 !important; box-shadow: none !important; } .stw-prev-stage .hero-section.hero-tv, .stw-prev-stage .hero-section.hero-simple { width: 100% !important; } /* the full-screen look is a screenful; dvh is the settings screen's height here, which is the same thing, but pin it so the card is deterministic */ .stw-prev-stage .hero-section:not(.hero-tv):not(.hero-simple) { height: 680px !important; } .stw-prev-stage .hero-section:not(.hero-tv) .hero-content { padding-bottom: 34px !important; } /* Apply now — solid white. A gold tint at 16% over a dark card is a hint, not a button; this is the one thing on the card you are meant to press, so it is the one thing that is filled in. */ .stw-use { flex-shrink: 0; padding: 8px 15px; cursor: pointer; border: 1px solid #fff !important; border-radius: 999px !important; background: #fff !important; color: #060c18 !important; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; min-height: 0 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.4); } .stw-use:active { transform: scale(.94); background: #eef1f7 !important; } .stw-pill.fixed.on { color: #e8d5a3; } /* ══════════════════════════════════════════════════════════════════════ WHAT A PREVIEW IS ALLOWED TO COST A preview is a photograph of a section, not the section. It never gets pressed, it never gets read by a screen reader, and nothing in it has to keep moving. Left as an exact copy it brought the whole section's running cost with it — every glass panel blurring what is behind it, every marquee and shimmer still animating, every clip still decoding — and twenty-six of those is what made this page hang. So a clone is frozen: no animation, no transition, no blur, no filter and no shadow it does not need. The clips are handled in the script, which plays only the one on the screen you are looking at. ══════════════════════════════════════════════════════════════════════ */ .stw-prev-stage, .stw-prev-stage * { animation: none !important; transition: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; } /* The rails are long and mostly off-screen. This lets the browser skip laying out and painting a row until it is scrolled near, and the size hint keeps the scrollbar from jumping when it does. */ .stw-rail { content-visibility: auto; contain-intrinsic-size: auto 420px; } /* A card paints inside itself and nowhere else, so a change in one never asks the page to repaint the rest of the row. */ .stw-wcard, .stw-slide { contain: layout paint style; } /* ── A clip in a preview is a still ── .stw-still stands in for a