/* Screens: fixes for the stylised product screens from the 13 Oct 2026 seven-judge review. Published by screens_finish.py, loaded after every other stylesheet. Nothing here adds real product material: every screen stays a drawing with made-up sample content. How the selectors are weighted: ":is(#sc-a #sc-b, [data-art-scene=...])" matches the screen and carries the weight of two ids, so these rules win over the older ones (some of those are !important) without needing any id in the markup. No element has the ids sc-a or sc-b. 1. Phone: no label under 11 px. Shows less, and enlarges what is left. Phone widths only. 2. Construction and CRM: cool grey panels warmed to sit on the chalk page. All widths. 3. (The AI illustration is a 3D drawing with a picture fallback, not CSS. It is not changed here.) 4. The sleeping home Rooftop screen shows its shapes through the glass, never its text. 5. The small dot after a product name, lifted to pass on its own ground. */ /* ------------------------------------------------------------------------------------------------ 1. PHONE: 11 px FLOOR (colour contrast judge, Apple-style judge) ------------------------------------------------------------------------------------------------ */ @media (max-width: 600px) { /* Rooftop, CRM and the Steady tax view share one drawn frame. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-head > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-kicker > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-bottom > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-legend > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-bar > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-line > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-lane > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > header > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > div > span { font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-tabs > :is(b, span) { font-size: 12px !important; letter-spacing: 0 !important; } /* The second kicker only repeats what the caption under the screen already says. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-kicker > span + span { display: none !important; } /* WriteUp */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote > header > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote > header > span > b { font-size: 11px !important; letter-spacing: 0 !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-heading > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-field > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-field > strong > small, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-ready > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-ready > strong > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-costing > div > :is(span, b), :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-paper > footer > :is(span, b) { font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-paper-heading { font-size: 11px !important; letter-spacing: .04em !important; } /* The strapline under the form goes; the four fields share the height of the customer copy beside them. */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-note { display: none !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-input { display: flex !important; flex-direction: column !important; align-self: stretch !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-input > :is(.ap-quote-field, .ap-quote-pair) { flex: 1 1 auto !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-input .ap-quote-field { display: flex !important; flex-direction: column !important; justify-content: center !important; } /* A value reads larger than its label. */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-field > strong { font-size: 13px !important; line-height: 1.35 !important; } /* The small print under the price is the least needed line. */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-ready > small { display: none !important; } /* Shotgun */ :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shotgun > header > span, :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-title > span, :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-day-caption > b, :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-main > footer > div > span { font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-main > footer > div > b { font-size: 12px !important; line-height: 1.35 !important; } :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-day-caption > span { display: none !important; } /* The state name on the drawn number plate is part of the picture, far too small to read on a phone. */ :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-plate > small { display: none !important; } /* Steady */ :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-steady > header > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-cash > footer > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-attention > h3 > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-attention > div > span > small, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-forecast > div:not(.wk-plotbox) > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-forecast > footer > span { font-size: 11px !important; line-height: 1.35 !important; letter-spacing: 0 !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-attention > div > span > b { font-size: 12px !important; line-height: 1.35 !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-cash > div > small, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-forecast > footer > span + span { display: none !important; } /* Construction */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > strong > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-bottom > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-sheet dt, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > header > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > header > span::after, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > div::after, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file-list > header > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file small, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-folder-context > small { font-size: 11px !important; line-height: 1.35 !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-stage > span { font-size: 12px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > .cd-sample { display: none !important; } /* Supporting lines had grown larger than the line they support. On a phone they step back under it. */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-stage > p { font-size: 12px !important; line-height: 1.5 !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > div > small { font-size: 11px !important; line-height: 1.4 !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-department-grid small { font-size: 12px !important; line-height: 1.4 !important; } /* In the narrowest tiles the longest figure ran into the name beside it. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-department-grid .wk-fig { font-size: 14px !important; letter-spacing: -.01em; } :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > div > span { font-size: 13px !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > div > span > small { font-size: 11px !important; line-height: 1.4 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-lane > article > b { font-size: 13px !important; line-height: 1.35 !important; } /* Three screens sat in columns 96 to 234 px wide and broke one letter per line. Each takes the full row. */ :is(.sv-phones, .sv-seen) > figure[data-art-scene], .sv-seen > figure { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; } :is(#sc-a #sc-b, .wi-product-pair) > figure.wi-phone[data-art-scene] { width: 100% !important; max-width: none !important; } } /* ------------------------------------------------------------------------------------------------ 1b. TABLET AND DESKTOP: THE SAME 11 px FLOOR (colour contrast judge, round 4) Every label is enlarged in place. Its line keeps the height it had, in px, so no row, panel or screen changes size and nothing on the page around a screen moves. Most screens are drawn with a slight tilt that renders text about 1.5 percent smaller, so those labels are set to 11.5 px to land above 11; the Construction screen is flat and takes 11. ------------------------------------------------------------------------------------------------ */ @media (min-width: 600.02px) { /* The frame shared by Rooftop, the CRM and the Steady tax view. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-head > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-kicker > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-tabs > :is(b, span), :is(#sc-a #sc-b, [data-art-scene]) .ra-bottom > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-bar > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-line > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > header > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-review-row > div > span { font-size: 11.5px !important; line-height: 14.5px !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-legend > span, :is(#sc-a #sc-b, [data-art-scene]) .ra-lane > span { font-size: 11.5px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-lane > article > b { font-size: 11.5px !important; line-height: 15.95px !important; } :is(#sc-a #sc-b, [data-art-scene]) .ra-tax .ra-bottom > span { font-size: 11.5px !important; line-height: 16px !important; } /* WriteUp */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote > header > :is(span, i), :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote > header > span > b, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-field > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-ready > span, :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-costing > div > :is(span, b), :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-paper > footer > span { font-size: 11.5px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-heading > span { font-size: 11.5px !important; line-height: 14.5px !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-note { font-size: 11.5px !important; line-height: 13.5px !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-paper-heading { font-size: 11.5px !important; line-height: 11.6px !important; } /* On the inner pages an older rule already sets every small and p in a screen well above the floor. */ :is(#sc-a #sc-b, .ar-scene[data-art-scene="writeup"]) .ap-quote-field > strong > small { font-size: 11.5px !important; line-height: 12px !important; } :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-quote-paper > footer > b { font-size: 11.5px !important; line-height: 15.95px !important; } /* Shotgun */ :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shotgun > header > span, :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-main > footer > div > span { font-size: 11.5px !important; line-height: 14.5px !important; } :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-body > aside > :is(b, span), :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-day-caption > :is(b, span), :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-main > footer > div > b { font-size: 11.5px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-vehicle-list > article > div > strong { font-size: 11.5px !important; line-height: 15.95px !important; } /* The state name on the drawn number plate is part of the picture: 5 px, unreadable. It keeps its place so the plate does not change shape, and is simply not painted. */ :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-plate > small { visibility: hidden !important; } /* Steady */ :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-steady > header > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-cash > footer > span { font-size: 11.5px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-cash > div > span { font-size: 11.5px !important; line-height: 15.95px !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-attention > div > span > b { font-size: 11.5px !important; line-height: 14.5px !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-forecast > div:not(.wk-plotbox) > span, :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-forecast > footer > span { font-size: 11.5px !important; line-height: 11.6px !important; } :is(#sc-a #sc-b, .ar-scene[data-art-scene="steady"]) .ap-cash > div > small, :is(#sc-a #sc-b, .ar-scene[data-art-scene="steady"]) .ap-attention > div > span > small { font-size: 11.5px !important; line-height: 11.6px !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-attention > h3 > span { font-size: 11.5px !important; line-height: 10px !important; } /* Construction (drawn flat) */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > div > :is(b, span), :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-this-job > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-this-job em, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-job-label strong, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-title > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-sheet dt, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-stage > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > header > :is(strong, span), :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > header > span::after, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > div::after, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-folder-context > div > b { font-size: 11px !important; line-height: 14.5px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > .cd-sample, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-bottom, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-bottom :is(span, b), :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file-list > header > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file > span, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-folder-context > div > span { font-size: 11px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-job-label small, :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-rail > p, :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-file small, :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-folder-context > small { font-size: 11px !important; line-height: 13.05px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-rail li, :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-rail li > span { font-size: 11px !important; line-height: 12.15px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > strong > span { font-size: 11px !important; line-height: 10.8px !important; } :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-person > div > small { font-size: 11px !important; line-height: 13.5px !important; } :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-stage > p { font-size: 11px !important; line-height: 16px !important; } :is(#sc-a #sc-b, :is(.ar-scene, .ra-scene)[data-art-scene="construction"]) .cd-folder-context > p { font-size: 11px !important; line-height: 15.5px !important; } /* Labels that carry something else on their line: only the size changes, the line is left alone. */ :is(#sc-a #sc-b, [data-art-scene="shotgun"]) .ap-shot-title > span { font-size: 11.5px !important; } :is(#sc-a #sc-b, [data-art-scene="steady"]) .ap-cash > footer > span > b { line-height: 20.3px !important; } /* The small print under the price on the home page has no room to grow: it keeps its place and is not painted. The caption under the screen already says it. */ :is(#sc-a #sc-b, .ar-scene[data-art-scene="writeup"]) .ap-ready > small { visibility: hidden !important; } /* Headline sizes that follow the width of the frame came out as fractions (28.72, 34.22 px). Each is rounded down to a whole pixel. A browser that does not know round() keeps the old size. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-main > h3 { font-size: round(down, clamp(22px, 5.2cqw, 37px), 1px) !important; } :is(#sc-a #sc-b, .ra-scene[data-art-scene="writeup"]) .ap-ready > strong { font-size: round(down, clamp(23px, 5.5cqw, 35px), 1px) !important; } /* A frame drawn narrow on a wide page (a phone-shaped frame beside a desktop one) uses smaller lines. Each keeps its own line height here so it does not grow. */ @container (max-width: 460px) { :is(#sc-a #sc-b, [data-art-scene]) .ra-head > span { line-height: 13.05px !important; } :is(#sc-a #sc-b, .ra-scene[data-art-scene="writeup"]) .ap-ready > span, :is(#sc-a #sc-b, .ra-scene[data-art-scene="writeup"]) .ap-costing > div > :is(span, b) { line-height: 11.6px !important; } :is(#sc-a #sc-b, .ra-scene[data-art-scene="writeup"]) .ap-quote-note { line-height: 12px !important; } } @container (max-width: 500px) { :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-person > header > strong { font-size: 12px !important; line-height: 17.4px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-title > span { line-height: 15.95px !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > .cd-sample { font-size: 8px !important; line-height: 11.6px !important; visibility: hidden !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-bottom > span { font-size: 9px !important; line-height: 13.05px !important; visibility: hidden !important; } } /* The widest Construction frames have room for every folder name on one line. */ @container (min-width: 800.02px) { :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-rail li { white-space: nowrap !important; } } /* The narrowest frames (under 240 px, phone-shaped frames beside a desktop one) have no room for larger third-order labels: these keep their place and are not painted. */ @container (max-width: 240px) { :is(#sc-a #sc-b, [data-art-scene]) .ra-head > span { font-size: 9px !important; line-height: 13.05px !important; visibility: hidden !important; } :is(#sc-a #sc-b, [data-art-scene]) :is(.ra-kicker, .ra-bottom) > span { font-size: 10px !important; line-height: 14.5px !important; visibility: hidden !important; } /* The unpainted "Illustrative" tag still reports its size to a measuring tool. It reports 11 px and is drawn at ten elevenths, which lays it out exactly as before. */ :is(#sc-a #sc-b, [data-art-scene]) .ra-kicker > span + span { font-size: 11px !important; line-height: 15.95px !important; zoom: .9091; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-file > span { font-size: 9px !important; line-height: 13.05px !important; visibility: hidden !important; } } } /* ------------------------------------------------------------------------------------------------ 2. CONSTRUCTION AND CRM SIT WARM ON THE CHALK PAGE (colour theory judge). All widths. Blue-white panels and blue-grey ink are moved into the warm family. The teal accent of Construction and the slate header of the CRM stay, each a touch less blue. ------------------------------------------------------------------------------------------------ */ /* Construction. The page ground, the cards on it and the hairlines between them. */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-workspace { background: #F1EDE4 !important; color: #1F2421 !important; box-shadow: 0 22px 42px -28px rgb(40 34 24 / .36) !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) :is(.cd-select, .cd-rail, .cd-sheet, .cd-stage, .cd-person, .cd-file-list) { background-color: #FFFDF8 !important; border-color: #DDD8CC !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) :is(.cd-person > header, .cd-file-list > header) { border-color: #DDD8CC !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) :is(.cd-person > div, .cd-file) { border-color: #E5E0D5 !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-bottom { background: #E8E3D9 !important; border-color: #DDD8CC !important; color: #4E544D !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top { background: #31322F !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-top > .cd-sample { color: #E8E4DA !important; } /* Ink: the same steps of dark to mid grey, without the blue. The teal marks keep their own colour. */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-workspace :is(h3, h4) { color: #1F2421 !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-rail { color: #3C433D !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-select > button:not([aria-pressed="true"]) { color: #4E534C !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-select > button:hover { background: #EFEADF !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) :is(.cd-job-label small, .cd-rail > p, .cd-rail li > span, .cd-title > span, .cd-sheet dt, .cd-stage p, .cd-person > header > span, .cd-person small, .cd-person > div::after, .cd-task-foot, .cd-file-list > header > span, .cd-file small, .cd-file > span) { color: #535956 !important; } :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-workspace[data-cd-view="documents"] [data-cd-rail="documents"] { background: #E3EADB !important; } /* The selected folder card keeps its slow pulse, in a warmer pair of greens. */ :is(#sc-a #sc-b, [data-art-scene="construction"]) .cd-folder-context { background-color: #E3EADB; animation-name: sc-folder; } @keyframes sc-folder { 0%, 15%, 80%, 100% { background-color: #E3EADB; } 40%, 60% { background-color: #D3E2D0; } } /* CRM. The drawn frame takes its colours from four values; three are warmed, the accent stays. */ :is(#sc-a #sc-b, [data-art-scene="crm"]), :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-crm { --ra-paper: #F1EDE4 !important; --ra-ink: #222A27 !important; --ra-line: #D9D4C8 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-head { background: #2A3533 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-head > span { color: #DEDCD0 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-lane { background-color: #E6E1D6 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-lane:first-child { border-color: #A8A294 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-lane > article { border-color: #DDD8CC !important; box-shadow: 0 5px 12px -9px rgb(48 40 28 / .3) !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-lane > span { color: #525C55 !important; } /* ------------------------------------------------------------------------------------------------ 4. THE SLEEPING HOME ROOFTOP SCREEN (colour contrast judge) Under the glass the frame, tiles, rules and chart grid stay faintly visible; every piece of text is fully hidden until the wake, so no low-contrast text is ever on screen. html.wk-on is only ever set by script and only when motion is allowed, so with no script, reduced motion or paused motion the screen is simply complete. ------------------------------------------------------------------------------------------------ */ html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) :is(.ar-rail > b, .wk-brand, .wk-now, .ar-dash-title, .wk-kpi-l, .wk-chart-head, .wk-axis) { opacity: 0; } /* 4b. ASLEEP IT IS A SCREEN ABOUT TO LIGHT, NOT A GREY SLAB (colour theory judge, round 4) The panels go dark and their outlines, rules and chart frame become faint cream line-work, with a soft cream glow along the top edge. Still no text. */ html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .ar-dashboard { background-color: #111516; } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .ar-rail { background-color: #161B1C; } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .wk-kpi { background-color: rgb(245 242 236 / .035); border-color: rgb(245 242 236 / .3); } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) :is(.wk-head, .wk-depts) { border-color: rgb(245 242 236 / .24); } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .ar-rail > i { border-color: rgb(245 242 236 / .32); } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .ar-rail > .ar-navmark { background-color: rgb(245 242 236 / .32); border-color: transparent; } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .ar-online { background-color: rgb(245 242 236 / .4); } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .wk-grid { stroke: #F5F2EC; stroke-opacity: .18; } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .wk-base { stroke: #F5F2EC; stroke-opacity: .4; } html.wk-on [data-wake="full"]:not([data-wk-state="waking"], [data-wk-state="done"]) .wk-target { stroke: #F5F2EC; stroke-opacity: .3; } /* The glass is now only the glow and the lit edge; the dark comes from the panels themselves. */ body .ar-scene.wk-rooftop .wk-glass { background: radial-gradient(90% 46% at 50% 0, rgb(245 242 236 / .2), rgb(245 242 236 / 0) 72%), linear-gradient(180deg, rgb(245 242 236 / .06), rgb(245 242 236 / 0) 40%); box-shadow: inset 0 1px 0 rgb(245 242 236 / .55), inset 0 0 0 1px rgb(245 242 236 / .2); } /* Lighting up: the panels return to their own colours as the glow lifts. */ [data-wake="full"][data-wk-state="waking"] :is(.ar-dashboard, .ar-rail, .wk-kpi, .wk-head, .wk-depts, .ar-rail > i, .ar-online) { transition: background-color 300ms linear, border-color 300ms linear; } [data-wake="full"][data-wk-state="waking"] :is(.wk-grid, .wk-base, .wk-target) { transition: stroke 300ms linear, stroke-opacity 300ms linear; } /* 3. FIGURES START AT FULL INK (colour contrast judge, round 4) No text in this wake fades any more: a fading number passes through contrast as low as 2.4 to 1. Each piece stays hidden until its moment and then appears in one step, at full ink. The labels wait for the frame to be lit (300 ms); the figures keep the moments they had and still count up and still slide into place. */ [data-wake="full"][data-wk-state="waking"] :is(.ar-rail > b, .wk-brand, .wk-now, .ar-dash-title, .wk-kpi-l, .wk-chart-head, .wk-axis) { transition: opacity 0s linear 300ms; } [data-wake="full"][data-wk-state="waking"] .wk-kpi-n { transition: opacity 0s linear calc(950ms + var(--wk-n, 0) * 60ms); } [data-wake="full"][data-wk-state="waking"] .wk-tag { transition: opacity 0s linear 950ms, translate 360ms var(--wk-ease) 950ms; } [data-wake="full"][data-wk-state="waking"] .wk-kpi-s { transition: opacity 0s linear calc(1480ms + var(--wk-n, 0) * 50ms), translate 360ms var(--wk-ease) calc(1480ms + var(--wk-n, 0) * 50ms); } [data-wake="full"][data-wk-state="waking"] .wk-depts > span { transition: opacity 0s linear calc(1580ms + var(--wk-n, 0) * 50ms), translate 360ms var(--wk-ease) calc(1580ms + var(--wk-n, 0) * 50ms), background-color 300ms linear, border-color 300ms linear; } @media (prefers-reduced-motion: reduce) { [data-wake="full"] :is(.ar-rail > b, .wk-brand, .wk-now, .ar-dash-title, .wk-kpi-l, .wk-chart-head, .wk-axis, .ar-dashboard, .ar-rail, .ar-rail > i, .ar-online, .wk-kpi, .wk-head, .wk-depts, .wk-grid, .wk-base, .wk-target) { transition: none !important; } } /* ------------------------------------------------------------------------------------------------ 5. THE DOT AFTER A PRODUCT NAME (colour contrast judge). Each was 3.15 to 3.6 to 1; a darker ember on the pale grounds and a lighter ember on the CRM slate take them past 4.5 to 1. ------------------------------------------------------------------------------------------------ */ :is(#sc-a #sc-b, [data-art-scene="rooftop"]) .ra-head > strong > em { color: #B44A19 !important; } :is(#sc-a #sc-b, [data-art-scene="rooftop"]) .ar-rail > b > span { color: #A03E11 !important; } :is(#sc-a #sc-b, [data-art-scene="crm"]) .ra-head > strong > em { color: #E18A45 !important; } /* ------------------------------------------------------------------------------------------------ 6. THE CAPTION UNDER A SCREEN IS 12 px, BOX AND ALL (Apple-style judge, round 4) The caption text was already 12 px, but the caption box itself was still set to 9 px on the home page and 10 px elsewhere, which is the size a measuring tool reads. Box and text now agree at every width. ------------------------------------------------------------------------------------------------ */ :is(#sc-a #sc-b, [data-art-scene]) > figcaption { font-size: 12px !important; } :is(#sc-a #sc-b, [data-art-scene]) > figcaption > span { font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0 !important; } /* ------------------------------------------------------------------------------------------------ 7. PALE SCREENS ON THE PALE PAGE GET AN EDGE (colour theory judge, round 4) Rooftop, the CRM, Construction and Steady are pale and mostly sit straight on chalk. Each takes a 1 px warm grey edge and the one frame shadow the site uses. Drawn as shadows where there was no border, so no frame changes size. ------------------------------------------------------------------------------------------------ */ :is(#sc-a #sc-b, .ra-scene:is([data-art-scene="rooftop"], [data-art-scene="crm"], [data-art-scene="construction"], [data-art-scene="steady"])) > .ra-canvas { border-color: rgb(199 203 195 / .9) !important; box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5) !important; } :is(#sc-a #sc-b, .ar-scene[data-art-scene="steady"]) .ap-steady { box-shadow: 0 0 0 1px rgb(199 203 195 / .9), 0 24px 48px -32px rgb(11 13 14 / .5) !important; } :is(#sc-a #sc-b, .ar-scene[data-art-scene="construction"]) > .ar-canvas { border-radius: 6px !important; box-shadow: 0 0 0 1px rgb(199 203 195 / .9), 0 24px 48px -32px rgb(11 13 14 / .5) !important; } /* ------------------------------------------------------------------------------------------------ 8. ROUND 5 (colour contrast and Apple-style judges) ------------------------------------------------------------------------------------------------ */ /* The second "Illustrative" tag on the WriteUp customer copy was 7 px. It is removed outright at every width, so it is no longer tiny text; the caption under the screen says the same thing. */ :is(#sc-a #sc-b, [data-art-scene="writeup"]) .ap-paper-heading > i { display: none !important; } /* Home page captions under WriteUp, Shotgun and Steady sit on chalk where the screen shadow falls and dipped to 4.2 to 1 on the darkest pixels. They take the darker caption ink. Captions on dark ground keep their own colour. (Four ids of weight: the Steady caption is set by a rule with three.) */ :is(#sc-a #sc-b #sc-c #sc-d, .ar-scene:is([data-art-scene="writeup"], [data-art-scene="shotgun"], [data-art-scene="steady"])) > figcaption > span { color: #474A49 !important; } /* The home Rooftop headline follows the frame width and came out at 28.72 px: rounded down to a whole pixel. */ @media (min-width: 900.02px) { :is(#sc-a #sc-b, .ar-scene[data-art-scene="rooftop"]) .ar-dash-title h3 { font-size: round(down, clamp(22px, 4cqw, 32px), 1px) !important; } } /* Between phone and desktop the cents after the home WriteUp price were 10 px. */ @media (min-width: 600.02px) and (max-width: 900px) { :is(#sc-a #sc-b, .ar-scene[data-art-scene="writeup"]) .ap-ready > strong > span { font-size: 11.5px !important; } } /* 14 Oct 2026, night (Mark: "make sure all mobile demos fit in their screen and look amazing"). A phone recording that sits in a plain picture frame (Our work cards, the Keys card, the AI services evidence) gets the same dark device bezel as the Mailroom and Lori phones (#323633, as .lx-device), drawn as a shadow ring so nothing moves. The Keys app has its top row in the screen's rounded corner; a status-bar inset in its own black lets it clear the corner. */ :is(.ni-screen-image, .ns-evidence):has(> .cm-stage[class*="cm-mobile"]) { outline: 0 !important; } /* The picture frame around a phone must not clip or square off the bezel ring. */ .ni-screen-image:has(> .cm-stage[data-cm-stage="sliceco-main"]) { overflow: visible !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } @media (max-width: 700px) { :is(.ni-screen-image, .ns-evidence):has(> .cm-stage.cm-mobile-700) { overflow: visible !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } } @media (max-width: 600px) { :is(.ni-screen-image, .ns-evidence):has(> .cm-stage.cm-mobile-600) { overflow: visible !important; background: transparent !important; box-shadow: none !important; border-color: transparent !important; } } @media (max-width: 700px) { :is(.ni-screen-image, .ns-evidence) > .cm-stage.cm-mobile-700 { border-radius: 22px !important; box-shadow: 0 0 0 7px #323633, 0 24px 48px -32px rgb(11 13 14 / .5) !important; } } @media (max-width: 600px) { :is(.ni-screen-image, .ns-evidence) > .cm-stage.cm-mobile-600 { border-radius: 22px !important; box-shadow: 0 0 0 7px #323633, 0 24px 48px -32px rgb(11 13 14 / .5) !important; } } .ni-screen-image > .cm-stage[data-cm-stage="sliceco-main"] { border-radius: 22px !important; box-shadow: 0 0 0 7px #323633, 0 24px 48px -32px rgb(11 13 14 / .5) !important; } @media (max-width: 700px) { .ni-screen-image > .cm-stage[data-cm-stage="keys"] { padding-top: 14px !important; background: #080B0A !important; } } /* Laptop fit (Jordan: "100% and 90% zoom cut things off"): the phone-only recordings on Our work (SliceCo, Fuel, Gym) were 711 to 752 px tall, taller than a 1536x730 window. Above phone width each takes the width whose height fits the window under the header, from its own recording ratio, and stays centred in its column. */ @media (min-width: 701px) { .ni-screen-image > .cm-stage:is([data-cm-stage="sliceco-main"], [data-cm-stage="fuel-main"], [data-cm-stage="gym-main"]) { aspect-ratio: var(--cm-phone-ratio) !important; height: auto !important; width: min(100%, calc((100svh - 180px) * (var(--cm-phone-ratio)))) !important; margin-inline: auto !important; } }