/* DocHelp clinic builder, outside: on top of ../v3/css/app.css (tokens, top bar, segments, cards, panel) (J1, the join's stage 2) every rule is scoped to the outside builder: :where(#app[data-side="outside"]) (index.html sets the attribute; :where adds no weight, so each rule wins and loses as before); :root tokens and @keyframes stay global. Scoped by "_working files - ignore/j1-scope-css.mjs" (run it again on new rules, or write them scoped). */ :root { --panel-w: 380px; } @media (min-width: 1280px) { :root { --panel-w: 400px; } } /* the view and the panel are one block: the 3D view fills the space left of the panel, under the top bar */ :where(#app[data-side="outside"]).out .stage { top: var(--topbar); right: var(--panel-w); bottom: 0; left: 0; background: #DCE5EC; } :where(#app[data-side="outside"]).out .loader { left: 50%; top: 50%; } :where(#app[data-side="outside"]).out .photo { margin-left: 0; } :where(#app[data-side="outside"]).out.booting .stage::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, #CFDDEA 0%, #E6ECEF 58%, #D9D8CF 100%); } :where(#app[data-side="outside"]).out .loader { z-index: 6; } /* (O2 polish) the DocHelp mark in the corner of the view: light on the dark road at dusk and at night */ :where(#app[data-side="outside"]).out[data-time="dusk"] .mark, :where(#app[data-side="outside"]).out[data-time="night"] .mark { color: #F8F5F0; opacity: 0.5; } /* (O3, agent G; design-critic nitpick: the mark sat over the house's front fence) the mark in the top left corner, over the sky in every street view, clear of fences, cars and the road; off while comparing (a side's button is there) */ :where(#app[data-side="outside"]).out .mark { top: 16px; bottom: auto; left: 18px; } :where(#app[data-side="outside"]).out.comparing .mark { display: none; } /* top bar */ :where(#app[data-side="outside"]) .out-topbar .tb-left { display: flex; align-items: center; min-width: 0; } :where(#app[data-side="outside"]) .out-topbar .tb-mid { display: flex; align-items: center; gap: 10px; } :where(#app[data-side="outside"]) .out-topbar .tb-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; } :where(#app[data-side="outside"]).out .seg button { min-width: 88px; padding: 0 14px; white-space: nowrap; } :where(#app[data-side="outside"]).out .chip { white-space: nowrap; } :where(#app[data-side="outside"]).out .seg[data-on="1"] .seg-ind { transform: translateX(100%); } :where(#app[data-side="outside"]).out .seg.three { grid-template-columns: 1fr 1fr 1fr; } :where(#app[data-side="outside"]).out .seg.three button { min-width: 68px; padding: 0 12px; } :where(#app[data-side="outside"]).out .seg.three .seg-ind { width: calc((100% - 8px) / 3); } :where(#app[data-side="outside"]).out .seg.three[data-on="2"] .seg-ind { transform: translateX(200%); } :where(#app[data-side="outside"]).out .seg[data-on="0"] .seg-ind { transform: none; } :where(#app[data-side="outside"]).out .chip[aria-busy="true"] { color: var(--slate); } /* panel */ :where(#app[data-side="outside"]) .out-panel .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 1; } /* (O2 polish, design-critic nitpick: the list scrolled under the head with a hard edge) a 16 px fade under the head */ :where(#app[data-side="outside"]) .out-panel .panel-head::after { content: ''; position: absolute; left: 0; right: 10px; top: 100%; height: 16px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); pointer-events: none; } :where(#app[data-side="outside"]) .out-panel .ph-quick { display: none; } :where(#app[data-side="outside"]).out .cards .card-vis { height: 104px; background: #E3E7E9; } /* O1d (agent C): twenty design cards in two groups, a little shorter so the list stays easy to scan */ :where(#app[data-side="outside"]).out .out-designs .card-vis { height: 88px; } :where(#app[data-side="outside"]).out .out-designs .card-text { padding: 7px 10px 8px; } :where(#app[data-side="outside"]).out .out-designs .card-label { font-size: 13px; line-height: 1.25; } :where(#app[data-side="outside"]).out .cards-group { grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); } :where(#app[data-side="outside"]).out .cards-group:first-child { margin-top: 0; } /* the level switch: three choices, each as wide as its label (Overseas-sourced is long), the chosen one on white; the top bar's right side takes the width it needs and the views sit in the middle of what is left */ :where(#app[data-side="outside"]).out .seg.seg-level { grid-template-columns: auto auto auto; } :where(#app[data-side="outside"]).out .seg.seg-level .seg-ind { display: none; } :where(#app[data-side="outside"]).out .seg.seg-level button { min-width: 0; padding: 0 12px; transition: color 240ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease); } :where(#app[data-side="outside"]).out .seg.seg-level button[aria-checked="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(26, 15, 46, 0.08); } @media (min-width: 821px) { :where(#app[data-side="outside"]) .out-topbar { grid-template-columns: auto 1fr auto; } :where(#app[data-side="outside"]) .out-topbar .tb-mid { justify-content: center; min-width: 0; } :where(#app[data-side="outside"]).out .tb-right .seg.three:not(.seg-level) button { min-width: 0; padding: 0 12px; } } /* (O5, agent J: from 1601 to 1760 px the two named buttons pushed the view tabs under the sides) icons up to 1760 px. (O6, agent R: the top bar's spare room measured every few px from 821 to 1920 px with the longest way in, "Fit out a space"; captures/O6 dev reports) each keeps its word from the widest width it fits: Compare from 1680 px, Realistic picture from 1800 px; narrower, the icon alone (its name spoken and shown on hover) */ @media (max-width: 1679px) and (min-width: 821px) { :where(#app[data-side="outside"]).out .tb-right #compareBtn span { display: none; } :where(#app[data-side="outside"]).out .tb-right #compareBtn { width: 44px; padding: 0; justify-content: center; } } @media (max-width: 1799px) and (min-width: 821px) { :where(#app[data-side="outside"]).out .tb-right #photoBtn span { display: none; } :where(#app[data-side="outside"]).out .tb-right #photoBtn { width: 44px; padding: 0; justify-content: center; } } :where(#app[data-side="outside"]).out .card-vis canvas { width: 100%; height: 100%; object-fit: cover; } :where(#app[data-side="outside"]) .swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } :where(#app[data-side="outside"]) .swatches[hidden] { display: none; } :where(#app[data-side="outside"]) .swatch { width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer; position: relative; background: var(--sw); border: 1px solid rgba(10, 10, 15, 0.16); box-shadow: inset 0 0 0 3px #fff; transition: box-shadow 200ms var(--ease), transform 200ms var(--ease); } :where(#app[data-side="outside"]) .swatch:hover { transform: scale(1.04); } :where(#app[data-side="outside"]) .swatch:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .swatch[aria-checked="true"] { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--aubergine); } :where(#app[data-side="outside"]) .swatch-name { font-weight: 600; color: var(--slate); margin-left: 4px; } :where(#app[data-side="outside"]) label.sec-title { display: block; } :where(#app[data-side="outside"]) .name-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase; } :where(#app[data-side="outside"]) .name-input::placeholder { text-transform: none; font-weight: 500; color: #8f8b84; letter-spacing: 0; } :where(#app[data-side="outside"]) .name-input:focus { outline: 2px solid var(--orchid); outline-offset: 1px; border-color: transparent; } :where(#app[data-side="outside"]) .name-count { display: block; margin: 6px 0 14px; font-size: 12px; color: var(--slate); } :where(#app[data-side="outside"]) .inc-list { margin: 0 0 12px; padding: 0; list-style: none; } :where(#app[data-side="outside"]) .inc-list li { position: relative; padding: 7px 0 7px 22px; font-size: 14px; line-height: 1.35; border-bottom: 1px solid var(--line); } :where(#app[data-side="outside"]) .inc-list li:last-child { border-bottom: 0; } :where(#app[data-side="outside"]) .inc-list li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); } /* the parts of the front (O1b): option buttons, material tiles, notes, the changed mark */ :where(#app[data-side="outside"]).out .sec-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } :where(#app[data-side="outside"]) .linkish { margin-left: auto; border: 0; background: none; padding: 2px 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--royal); text-decoration: underline; text-underline-offset: 3px; } :where(#app[data-side="outside"]) .linkish:hover { color: var(--aubergine); } :where(#app[data-side="outside"]) .linkish:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; border-radius: 4px; } :where(#app[data-side="outside"]) .card-changed { display: none; } :where(#app[data-side="outside"]) .card.is-changed .card-changed { display: block; color: var(--royal); font-weight: 600; } :where(#app[data-side="outside"]) .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; } :where(#app[data-side="outside"]) .opts.two { grid-template-columns: 1fr 1fr; } :where(#app[data-side="outside"]) .opt { min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); cursor: pointer; text-align: center; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); } :where(#app[data-side="outside"]) .opt:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .opt:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .opt[aria-checked="true"] { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); background: var(--lilac-wash); color: var(--aubergine); } :where(#app[data-side="outside"]) .opt[hidden] { display: none; } :where(#app[data-side="outside"]) .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; } :where(#app[data-side="outside"]) .tile { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; text-align: left; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); font: inherit; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } :where(#app[data-side="outside"]) .tile:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .tile:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .tile[aria-checked="true"] { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); } :where(#app[data-side="outside"]) .tile[aria-checked="true"] .card-tick { opacity: 1; transform: scale(1); } :where(#app[data-side="outside"]) .tile .card-tick { top: 5px; right: 5px; width: 18px; height: 18px; } :where(#app[data-side="outside"]) .tile .card-tick svg { width: 11px; height: 11px; } :where(#app[data-side="outside"]) .tile-vis { display: block; height: 52px; background-color: var(--cream-dim); background-size: 160% auto; background-position: center; position: relative; } :where(#app[data-side="outside"]) .tile-label { display: block; padding: 6px 7px 7px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--ink); } :where(#app[data-side="outside"]) .tile-vis.look-panels::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(60, 60, 62, 0.55) 1px, transparent 1px), linear-gradient(0deg, rgba(60, 60, 62, 0.55) 1px, transparent 1px); background-size: 22px 44px; background-position: 10px 18px; } :where(#app[data-side="outside"]) .tile-vis.look-ribs::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 3px, rgba(0, 0, 0, 0.16) 3px 5px, transparent 5px 7px); } :where(#app[data-side="outside"]) .tile-vis.look-dark { filter: grayscale(0.6) brightness(0.42); } :where(#app[data-side="outside"]) .tile-vis.look-pale { filter: saturate(0.55) brightness(1.12); } :where(#app[data-side="outside"]) .tile-vis.look-battens::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(20, 20, 22, 0.75) 6px 9px); } :where(#app[data-side="outside"]) .tile[data-v="none"] .tile-vis { background: repeating-linear-gradient(135deg, #EFEAE2 0 8px, #E6E0D6 8px 16px); } :where(#app[data-side="outside"]) .sec-note { margin: -4px 0 12px; font-size: 14px; line-height: 1.45; color: #57544F; } /* (O2) a fit out: what is the landlord's (or the council's) on this site, in one block after the live controls */ :where(#app[data-side="outside"]) .fixed-list { margin: 0; padding: 0; list-style: none; } :where(#app[data-side="outside"]) .fixed-list li { position: relative; padding: 4px 0 4px 16px; font-size: 13px; line-height: 1.45; color: #57544F; } :where(#app[data-side="outside"]) .fixed-list li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong, #CFC9C0); } :where(#app[data-side="outside"]) .sec-note:empty { display: none; } :where(#app[data-side="outside"]) .swatches .swatch[hidden] { display: none; } /* narrow screens and phones: the panel is a bottom sheet; the time and level switches move into its head */ @media (max-width: 1100px) and (min-width: 821px) { :where(#app[data-side="outside"]).out .seg button { min-width: 0; padding: 0 12px; } :where(#app[data-side="outside"]).out .chip span { display: none; } :where(#app[data-side="outside"]).out .chip { width: 44px; padding: 0; justify-content: center; } } @media (max-width: 820px) { :where(#app[data-side="outside"]).out .stage { right: 0; bottom: 36vh; } :where(#app[data-side="outside"]) .out-panel { height: 36vh; } :where(#app[data-side="outside"]) .out-topbar { grid-template-columns: auto 1fr; } :where(#app[data-side="outside"]) .out-topbar .tb-right { display: none; } :where(#app[data-side="outside"]) .out-topbar .tb-mid { justify-content: flex-end; } :where(#app[data-side="outside"]) .out-panel .panel-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 16px 10px; } :where(#app[data-side="outside"]) .out-panel .ph-text { display: none; } :where(#app[data-side="outside"]) .out-panel .ph-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } :where(#app[data-side="outside"]) .out-panel .ph-quick .seg { display: grid; width: 100%; } :where(#app[data-side="outside"]) .out-panel .ph-quick .seg button { min-width: 0; height: 40px; padding: 0 8px; } :where(#app[data-side="outside"]).out .cards .card-vis { height: 84px; } :where(#app[data-side="outside"]) .tiles { grid-template-columns: repeat(4, 1fr); } :where(#app[data-side="outside"]) .swatch { width: 44px; height: 44px; } :where(#app[data-side="outside"]).out .mark { display: none; } } /* O1c: weatherboards (horizontal lap lines) */ :where(#app[data-side="outside"]) .tile-vis.look-boards::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(60, 60, 62, 0.45) 0 1px, transparent 1px 8px); } /* O1d (agent B): the parts of the building (zones) with material cards and Any colour; the sign's letter options */ :where(#app[data-side="outside"]) .zones { display: grid; gap: 8px; margin: 0 0 14px; } :where(#app[data-side="outside"]) .zone { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); } :where(#app[data-side="outside"]) .zone[hidden] { display: none; } :where(#app[data-side="outside"]) .zone > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; border-radius: 12px; } :where(#app[data-side="outside"]) .zone > summary::-webkit-details-marker { display: none; } :where(#app[data-side="outside"]) .zone > summary:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .zone > summary::after { content: ''; flex: none; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease); } :where(#app[data-side="outside"]) .zone[open] > summary::after { transform: rotate(225deg) translateY(-2px); } :where(#app[data-side="outside"]) .zone-name { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); } :where(#app[data-side="outside"]) .zone-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--slate); } :where(#app[data-side="outside"]) .zone-dot { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--royal); } :where(#app[data-side="outside"]) .zone.is-changed .zone-dot { display: inline-block; } :where(#app[data-side="outside"]) .zone-body { padding: 2px 12px 12px; } :where(#app[data-side="outside"]) .fin-has { margin: -2px 0 10px; } :where(#app[data-side="outside"]) .fin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin: 0 0 10px; } :where(#app[data-side="outside"]) .fin-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); } :where(#app[data-side="outside"]) .fin-card:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .fin-card:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .fin-card[aria-checked="true"] { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); } :where(#app[data-side="outside"]) .fin-vis-wrap { display: block; aspect-ratio: 4 / 3; background: #DADBD8; } :where(#app[data-side="outside"]) .fin-vis { display: block; width: 100%; height: 100%; } :where(#app[data-side="outside"]) .fin-plain-none, :where(#app[data-side="outside"]) .fin-plain- { background: repeating-linear-gradient(135deg, #EFEAE2 0 7px, #E4DED4 7px 14px); } :where(#app[data-side="outside"]) .fin-plain-none .fin-vis, :where(#app[data-side="outside"]) .fin-plain- .fin-vis { display: none; } :where(#app[data-side="outside"]) .fin-label { display: block; padding: 4px 5px 5px; font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--ink); overflow-wrap: break-word; hyphens: manual; } :where(#app[data-side="outside"]) .fin-colour-name { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--slate); } :where(#app[data-side="outside"]) .fin-swatches { margin-bottom: 10px; align-items: center; } :where(#app[data-side="outside"]) .swatch-reset { background: repeating-linear-gradient(135deg, #EFEAE2 0 5px, #D9D2C6 5px 10px); } :where(#app[data-side="outside"]) .any-colour { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 700; color: var(--ink); } :where(#app[data-side="outside"]) .any-colour:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .any-colour:focus-within { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .any-colour.is-on { border-color: var(--aubergine); box-shadow: 0 0 0 1px var(--aubergine); } :where(#app[data-side="outside"]) .any-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(10, 10, 15, 0.16); background: conic-gradient(#C8242B, #C9922E, #3E8E4F, #1F7A78, #1F5FAE, #6F4E9A, #C8242B); } :where(#app[data-side="outside"]) .any-colour.is-on .any-dot { background: var(--sw); box-shadow: inset 0 0 0 3px #fff; } :where(#app[data-side="outside"]) .any-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } :where(#app[data-side="outside"]) .fin-sub-title { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 6px; font-size: 12px; font-weight: 700; color: var(--slate); } :where(#app[data-side="outside"]) .fin-sub-title[hidden] { display: none; } :where(#app[data-side="outside"]) .fin-accent-title { font-size: 14px; color: var(--ink); margin-top: 6px; } :where(#app[data-side="outside"]) .fin-panel-opts[hidden], :where(#app[data-side="outside"]) .sign-letters[hidden], :where(#app[data-side="outside"]) .opts[hidden], :where(#app[data-side="outside"]) .fin-swatches[hidden] { display: none; } :where(#app[data-side="outside"]) .opts.three { grid-template-columns: repeat(3, 1fr); } :where(#app[data-side="outside"]) .fin-styles .opt { font-size: 14px; letter-spacing: 0.02em; } :where(#app[data-side="outside"]) .fin-fit, :where(#app[data-side="outside"]) .fin-permit { color: var(--aubergine); font-weight: 600; } @media (max-width: 820px) { :where(#app[data-side="outside"]) .fin-cards { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); } :where(#app[data-side="outside"]) .any-colour { min-height: 44px; } } /* O1d (agent C): on phones the time and the three levels stack in the sheet's head (Overseas-sourced is long) */ @media (max-width: 820px) { :where(#app[data-side="outside"]) .out-panel .ph-quick { grid-template-columns: 1fr; } } /* (O3, agent G) a price line in its option's section: the typical range, and "Typical range. Not a quote." under it (named cost, not price: ../v3/css/app.css has its own .price) */ :where(#app[data-side="outside"]) .cost { margin: 2px 0 12px; padding: 9px 12px 8px; border-radius: 10px; background: #F6F3EE; border: 1px solid var(--line); } :where(#app[data-side="outside"]) .cost[hidden] { display: none; } :where(#app[data-side="outside"]) .cost-line { margin: 0 0 3px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: pretty; } :where(#app[data-side="outside"]) .cost-note { margin: 0; font-size: 12px; line-height: 1.4; color: #57544F; } :where(#app[data-side="outside"]) .cost-end { margin: 6px 0 0; } :where(#app[data-side="outside"]) .cost-end + .cost-end { margin-top: 2px; } /* (O3, agent G) Compare: the divider over the view (in the stage), one level each side; the side buttons switch a side to Overseas-sourced; the round handle drags (or arrow keys) */ :where(#app[data-side="outside"]).out .compare { inset: 0; z-index: 4; } :where(#app[data-side="outside"]).out .compare[hidden] { display: none; } :where(#app[data-side="outside"]).out .cmp-handle:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; } :where(#app[data-side="outside"]) .cmp-side { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--aubergine); box-shadow: var(--shadow-soft); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; pointer-events: auto; } :where(#app[data-side="outside"]) .cmp-side svg { width: 16px; height: 16px; flex: none; opacity: 0.75; } :where(#app[data-side="outside"]) .cmp-side:hover { background: #fff; } :where(#app[data-side="outside"]) .cmp-side:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } :where(#app[data-side="outside"]) .cmp-side-left { left: 12px; } :where(#app[data-side="outside"]) .cmp-side-right { right: 12px; } :where(#app[data-side="outside"]) .cmp-busy { position: absolute; top: calc(50% + 30px); left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--aubergine); font-size: 12px; font-weight: 700; white-space: nowrap; } :where(#app[data-side="outside"]) .cmp-busy[hidden] { display: none; } :where(#app[data-side="outside"]) #compareBtn[aria-pressed="true"] { background: var(--lilac-wash); border-color: var(--orchid); color: var(--aubergine); } @media (max-width: 820px) { :where(#app[data-side="outside"]) .cmp-side { height: 44px; top: 8px; font-size: 12.5px; padding: 0 10px 0 12px; } :where(#app[data-side="outside"]) .cmp-side-left { left: 8px; } :where(#app[data-side="outside"]) .cmp-side-right { right: 8px; } /* on a phone the Compare switch sits in the sheet's head, with its word (O6: Day, Dusk, Night went up to the top row, so it has the room); the levels below across the width */ :where(#app[data-side="outside"]) .out-panel .ph-quick #compareBtn { grid-column: 3; grid-row: 1; width: auto; height: 44px; padding: 0 16px 0 13px; gap: 7px; } :where(#app[data-side="outside"]) .out-panel .ph-quick #compareBtn span { display: inline; } :where(#app[data-side="outside"]) .out-panel .ph-quick #levelSeg { grid-column: 1 / -1; grid-row: 2; } } /* ---------- (O5, agent H) undo and redo, the plain note, the bottom bar of parts (phone: tabs at the top of the sheet) */ :root { --partbar: 60px; } :where(#app[data-side="outside"]).out .stage { bottom: var(--partbar); } /* (O6, agent R; O5 review Later: 8 px from the way in, it read as part of that group) 16 px off the way in, 2 to 4 px between the pair: a group of its own (a divider like the brand's read clearer but took 17 px the views need at 1440) */ :where(#app[data-side="outside"]) .tb-history { display: flex; align-items: center; gap: 4px; margin-left: 16px; flex: none; } :where(#app[data-side="outside"]) .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); transition: background 200ms var(--ease), border-color 200ms var(--ease), opacity 200ms var(--ease), transform 160ms var(--ease); } :where(#app[data-side="outside"]) .icon-btn svg { width: 19px; height: 19px; } :where(#app[data-side="outside"]) .icon-btn:hover:not(:disabled) { border-color: var(--lilac); } :where(#app[data-side="outside"]) .icon-btn:active:not(:disabled) { transform: scale(0.95); } :where(#app[data-side="outside"]) .icon-btn:disabled { opacity: 0.38; cursor: default; } :where(#app[data-side="outside"]) .icon-btn:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } @media (max-width: 1439px) and (min-width: 821px) { :where(#app[data-side="outside"]) .tb-history { gap: 2px; } :where(#app[data-side="outside"]) .tb-history .icon-btn { width: 36px; height: 36px; } :where(#app[data-side="outside"]) .tb-history .icon-btn svg { width: 17px; height: 17px; } } /* (O7, agent W2; W's browser runs 1 and 2: from 1440 px the brand's words are back, and with "Equip or refresh" the view tabs had 6 px each side at 1440 to 1443) the longer ways in keep the smaller undo and redo buttons to 1449 px */ @media (max-width: 1449px) and (min-width: 1440px) { :where(#app[data-side="outside"]) .out-topbar:has(.way-chip.way-long) .tb-history { gap: 2px; } :where(#app[data-side="outside"]) .out-topbar:has(.way-chip.way-long) .tb-history .icon-btn { width: 36px; height: 36px; } :where(#app[data-side="outside"]) .out-topbar:has(.way-chip.way-long) .tb-history .icon-btn svg { width: 17px; height: 17px; } } /* the note after an undo or a redo, at the foot of the view */ :where(#app[data-side="outside"]) .out-note { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 7; max-width: min(520px, calc(100% - 32px)); padding: 9px 16px; border-radius: 12px; background: var(--aubergine); color: var(--cream); font-weight: 600; font-size: 13.5px; line-height: 1.35; box-shadow: 0 10px 30px rgba(26, 15, 46, 0.25); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms cubic-bezier(0.23, 1, 0.32, 1); } :where(#app[data-side="outside"]) .out-note[hidden] { display: none; } :where(#app[data-side="outside"]) .out-note.out { opacity: 0; transform: translate(-50%, 8px); transition-duration: 140ms; transition-timing-function: ease-out; } /* the bar at the foot of the view, like the inside's room bar */ :where(#app[data-side="outside"]) .part-bar { position: absolute; left: 0; right: var(--panel-w); bottom: 0; height: var(--partbar); z-index: 8; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #F8F5F0; border-top: 1px solid var(--line); } :where(#app[data-side="outside"]).out.booting .part-bar { visibility: hidden; } :where(#app[data-side="outside"]) .pb-arrow { flex: none; } :where(#app[data-side="outside"]) .pb-list { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; } /* (O6, agent R; O5 review Later: at 1280 the chips ended 100 px before the Next arrow) the chips centred between the arrows when they fit, scrolling from the left when they do not */ :where(#app[data-side="outside"]) .pb-list { justify-content: safe center; } :where(#app[data-side="outside"]) .pb-list::-webkit-scrollbar { display: none; } :where(#app[data-side="outside"]) .pb-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 13.5px; white-space: nowrap; cursor: pointer; transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 160ms var(--ease); } :where(#app[data-side="outside"]) .pb-chip.whole { margin-right: 4px; } /* a part's phone label (one word under its icon), shown only in the phone's tab row */ :where(#app[data-side="outside"]) .pb-chip .pb-short { display: none; } :where(#app[data-side="outside"]) .pb-icon { display: inline-flex; flex: none; } :where(#app[data-side="outside"]) .pb-icon svg { width: 17px; height: 17px; display: block; } :where(#app[data-side="outside"]) .pb-chip:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .pb-chip:active { transform: scale(0.97); } :where(#app[data-side="outside"]) .pb-chip[aria-current="true"] { background: var(--aubergine); border-color: var(--aubergine); color: var(--cream); } :where(#app[data-side="outside"]) .pb-chip:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } /* (browser run 1: at 1280 px the last chip ran past the bar) under 1440 px the parts show their names only; Whole clinic keeps its house mark */ @media (max-width: 1439px) and (min-width: 821px) { :where(#app[data-side="outside"]) .pb-chip:not(.whole) .pb-icon { display: none; } :where(#app[data-side="outside"]) .pb-chip:not(.whole) { padding: 0 14px; } } @media (max-width: 1180px) and (min-width: 821px) { :where(#app[data-side="outside"]) .pb-list { gap: 4px; } :where(#app[data-side="outside"]) .pb-chip { font-size: 13px; } :where(#app[data-side="outside"]) .pb-chip:not(.whole) { padding: 0 10px; } } /* the part's section in the panel: a short highlight when a chip opens it */ :where(#app[data-side="outside"]) .out-panel .sec { border-radius: 10px; } :where(#app[data-side="outside"]) .out-panel .sec.sec-lit { animation: sec-lit 1500ms var(--ease); } @keyframes sec-lit { 0%, 35% { background: var(--lilac-wash); box-shadow: 0 0 0 10px var(--lilac-wash); } 100% { background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } } @media (prefers-reduced-motion: reduce) { :where(#app[data-side="outside"]) .out-panel .sec.sec-lit { animation: none; background: var(--lilac-wash); box-shadow: 0 0 0 10px var(--lilac-wash); } } /* phones: the bar is a row of tabs at the top of the sheet (icon over its name, every part in one row at 390 px, 44 px tall at least); undo and redo in the sheet's head beside Day, Dusk, Night and Compare */ @media (max-width: 820px) { :root { --partbar: 0px; } :where(#app[data-side="outside"]).out .stage { bottom: 36vh; } :where(#app[data-side="outside"]) .part-bar { position: static; height: auto; padding: 4px 8px 2px; gap: 0; background: none; border: 0; } :where(#app[data-side="outside"]) .part-bar .pb-arrow { display: none; } /* (O5 fix, browser run 1: at 11 px "Car park" took two lines in a 45 px tab) every label on one line: a tab is at least as wide as its label and the rest of the row is shared out (all 8 about 46 px at 390 px) */ :where(#app[data-side="outside"]) .part-bar { padding-left: 4px; padding-right: 4px; } :where(#app[data-side="outside"]) .pb-list { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(min-content, 1fr)); align-items: stretch; gap: 1px; overflow: visible; padding: 0; } :where(#app[data-side="outside"]) .pb-chip { flex-direction: column; justify-content: center; gap: 3px; height: auto; min-height: 48px; min-width: 0; padding: 4px 0; border: 0; border-radius: 10px; background: none; color: var(--slate); font-size: 11px; font-weight: 700; line-height: 1.1; white-space: nowrap; text-align: center; } /* (O5 fix, design-critic 9 Oct: "Whole clinic" was the only label on two lines) the phone's own one word label */ :where(#app[data-side="outside"]) .pb-chip .pb-long { display: none; } :where(#app[data-side="outside"]) .pb-chip .pb-short { display: inline; } :where(#app[data-side="outside"]) .pb-chip.whole { margin-right: 0; } :where(#app[data-side="outside"]) .pb-chip .pb-icon svg { width: 20px; height: 20px; } :where(#app[data-side="outside"]) .pb-chip[aria-current="true"] { background: var(--lilac-wash); color: var(--aubergine); } :where(#app[data-side="outside"]) .pb-chip:active { transform: none; background: var(--lilac-wash); } /* (O6, agent R; Jamal's pick 9 Oct) the sheet's head in two rows, each with air: undo and redo at the left and Compare at the right on one 44 px row, the level switch across the width on the next (Day, Dusk, Night are in the top row) */ :where(#app[data-side="outside"]) .out-panel .ph-quick { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 8px; } /* the level buttons are 40 px inside the switch's 2 px rim: their touch area the full 44 px (run 1 measured 41) */ :where(#app[data-side="outside"]) .out-panel .ph-quick .seg button { position: relative; } :where(#app[data-side="outside"]) .out-panel .ph-quick .seg button::after { content: ''; position: absolute; inset: -2px 0; } :where(#app[data-side="outside"]) .out-panel .ph-quick #tbHistory { grid-column: 1; grid-row: 1; margin-left: 0; gap: 6px; } :where(#app[data-side="outside"]) .out-panel .ph-quick #tbHistory .icon-btn { width: 44px; height: 44px; } :where(#app[data-side="outside"]) .out-panel .ph-quick #levelSeg { grid-column: 1 / -1; grid-row: 2; } :where(#app[data-side="outside"]) .out-note { bottom: 10px; } } /* (O6, agent R) a tablet with the bottom sheet (600 to 820 px) has the width for one row: undo and redo, the level switch in the middle, Compare */ @media (min-width: 600px) and (max-width: 820px) { :where(#app[data-side="outside"]) .out-panel .ph-quick #levelSeg { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: 440px; } } /* ---------- (O5, agent J) picture cards for the parts: three across, the picture (drawn from the real scene by src/ui/thumbs.js, a soft sweep until then) over its name; 44 px and more to touch */ :where(#app[data-side="outside"]).out .pcards { gap: 8px; margin: 0 0 12px; } :where(#app[data-side="outside"]).out .pcards[hidden], :where(#app[data-side="outside"]).out .pcard[hidden] { display: none; } :where(#app[data-side="outside"]).out .pcards .card-vis { height: 72px; background: #E3E7E9; } :where(#app[data-side="outside"]).out .pcards .card-text { padding: 6px 8px 7px; } :where(#app[data-side="outside"]).out .pcards .card-label { font-size: 12px; line-height: 1.25; } :where(#app[data-side="outside"]).out .pcards .card-tick { top: 5px; right: 5px; width: 18px; height: 18px; } :where(#app[data-side="outside"]).out .pcards .card-tick svg { width: 11px; height: 11px; } @media (max-width: 820px) { :where(#app[data-side="outside"]).out .pcards .card-vis { height: 76px; } } /* (O3 review, Later: 12 and 14 Compare) the level switch is dimmed while Compare is on (its two sides own the levels) */ :where(#app[data-side="outside"]).out .seg.seg-level[aria-disabled="true"] { opacity: 0.45; } :where(#app[data-side="outside"]).out .seg.seg-level[aria-disabled="true"] button { cursor: default; } /* (O3 review, Later: 03 to 05 the DocHelp mark lost over a dark tree crown) a soft light rim keeps it readable over leaves */ :where(#app[data-side="outside"]).out .mark { filter: drop-shadow(0 0 3px rgba(248, 245, 240, 0.9)) drop-shadow(0 0 8px rgba(248, 245, 240, 0.6)); } :where(#app[data-side="outside"]).out[data-time="dusk"] .mark, :where(#app[data-side="outside"]).out[data-time="night"] .mark { filter: drop-shadow(0 0 4px rgba(26, 15, 46, 0.6)); } /* (O5 fix, design-critic 9 Oct: on a close view that corner is glass, mullions or sky, and the mark read as a fault) the mark fades out while a part's close view is shown (main.js sets .part-view); a top bar view or Whole clinic brings it back. A fade, not a move, so nothing travels across the view */ :where(#app[data-side="outside"]).out .mark { transition: opacity 200ms var(--ease), visibility 0s linear 0s; } :where(#app[data-side="outside"]).out.part-view .mark { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 0s linear 200ms; } /* (O5, agent J; H's open item: the options area was 119 px tall under the tabs and the head) a part tab grows the sheet to about 60% of the screen; a drag on the view puts it back */ @media (max-width: 820px) { :where(#app[data-side="outside"]).out.sheet-tall .out-panel { height: 60vh; } :where(#app[data-side="outside"]).out.sheet-tall .stage { bottom: 60vh; } } /* (O5, agent J) up to 1199 px the time and level switches a little narrower, so the view tabs fit between the sides (O6, agent R: up to 1299 px; from 1200 the view tabs ran under the sides until about 1240, more with "Fit out a space") (O7, agent W; O6 review Fix first 3: up to 1279 px, where the overlap really ends; 1280 keeps the full size) */ @media (max-width: 1279px) and (min-width: 821px) { :where(#app[data-side="outside"]).out .tb-right .seg.three:not(.seg-level) button { padding: 0 9px; } :where(#app[data-side="outside"]).out .tb-right .seg.seg-level button { padding: 0 9px; } } /* (O7, agent W) a choice above the level shown: its picture slightly greyed, its level's name on it ("High-end", "Overseas-sourced"); it stays a live button (choosing it asks to switch up). The label keeps its full colour. Dense rows (the material cards, the colour dots) show each higher level's name once above its group (.lvl-cap) */ :where(#app[data-side="outside"]) .lvl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :where(#app[data-side="outside"]) .lvl-tag { position: relative; display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--aubergine); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(45, 27, 78, 0.22); border-radius: 999px; padding: 2px 6px; white-space: nowrap; } :where(#app[data-side="outside"]) .lvl-tag.lvl-sr { position: absolute; } :where(#app[data-side="outside"]).out .card.lvl-above .card-vis canvas, :where(#app[data-side="outside"]) .fin-card.lvl-above .fin-vis-wrap { filter: saturate(0.35) brightness(1.06); opacity: 0.62; } :where(#app[data-side="outside"]).out .card.lvl-above .card-vis { background: #EEEFEF; } :where(#app[data-side="outside"]).out .card.lvl-above > .lvl-tag { position: absolute; top: 5px; left: 5px; z-index: 1; } :where(#app[data-side="outside"]) .opt.lvl-above { background: #F6F5F2; border-color: rgba(10, 10, 15, 0.12); color: #3F3C39; } :where(#app[data-side="outside"]) .opt.lvl-above > .lvl-tag { display: block; width: max-content; margin: 3px auto 0; padding: 1px 6px; } :where(#app[data-side="outside"]) .swatch.lvl-above { opacity: 0.6; } :where(#app[data-side="outside"]) .any-colour.lvl-above { background: #F6F5F2; } :where(#app[data-side="outside"]) .any-colour.lvl-above .any-dot { opacity: 0.6; } :where(#app[data-side="outside"]) .any-colour > .lvl-tag { margin-left: 2px; } /* (O8d; O7 review Fix later) the caption is a heading for its group: 12 px, the floor of the type scale (tags stay 10 px: a 64 px card cannot hold "Overseas-sourced" larger) */ :where(#app[data-side="outside"]) .lvl-cap { margin: 4px 0 -2px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--royal); } :where(#app[data-side="outside"]) .lvl-cap[hidden] { display: none; } :where(#app[data-side="outside"]) .swatches .lvl-cap { flex-basis: 100%; } /* (O7 fix, review Fix first 5) Any colour on its own line under the level groups (the row's 8 px gap each side of the empty break line gives it 16 px clear of the dots: no extra margin) */ :where(#app[data-side="outside"]) .swatches .lvl-break { flex-basis: 100%; height: 0; } :where(#app[data-side="outside"]) .fin-cards .lvl-cap { grid-column: 1 / -1; } /* the question under the row: "Switch to High-end?" with Switch and Keep Standard (in the panel, never a browser dialog); 44 px buttons, wraps on a narrow phone */ :where(#app[data-side="outside"]) .lvl-ask { margin: 2px 0 14px; padding: 12px 12px 12px; border-radius: 12px; border: 1px solid rgba(45, 27, 78, 0.2); background: var(--lilac-wash); } :where(#app[data-side="outside"]) .lvl-ask-q { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--aubergine); } :where(#app[data-side="outside"]) .lvl-ask-note { margin: 0 0 10px; font-size: 13px; line-height: 1.4; color: #57544F; } :where(#app[data-side="outside"]) .lvl-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; } :where(#app[data-side="outside"]) .lvl-ask-btns button { flex: 1 1 120px; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } :where(#app[data-side="outside"]) .lvl-yes { border: 1px solid var(--aubergine); background: var(--aubergine); color: #fff; } :where(#app[data-side="outside"]) .lvl-yes:hover { background: var(--royal); border-color: var(--royal); } :where(#app[data-side="outside"]) .lvl-no { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); } :where(#app[data-side="outside"]) .lvl-no:hover { border-color: var(--lilac); } :where(#app[data-side="outside"]) .lvl-ask-btns button:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; } /* (O8d; the inside's design review fixes, v3/css/clinic.css "greyed everywhere, design review fixes", so both sides match) 1. the question sits in its row of cards, dots or buttons (level-gate.js place), across the whole width, right after the tapped choice's line; the choice asked about stays outlined while it is open */ :where(#app[data-side="outside"]) .lvl-ask.lvl-ask-in { grid-column: 1 / -1; flex: 0 0 100%; min-width: 0; box-sizing: border-box; margin: 0 0 4px; } /* (O8e, the critic: "being asked" never looks like "chosen") the choice asked about: a 2 px ring in the question box's lilac (chosen is the aubergine outline) */ :where(#app[data-side="outside"]).out .card.lvl-asking, :where(#app[data-side="outside"]) .fin-card.lvl-asking, :where(#app[data-side="outside"]) .opt.lvl-asking, :where(#app[data-side="outside"]) .any-colour.lvl-asking { border-color: var(--lilac); box-shadow: 0 0 0 1px var(--lilac); } :where(#app[data-side="outside"]) .swatch.lvl-asking { box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--lilac); } /* (O7 review Fix later) it fades in rather than popping under the row: 150 ms, none with reduced motion (below) */ :where(#app[data-side="outside"]) .lvl-ask { animation: lvl-ask-in 150ms cubic-bezier(0.23, 1, 0.32, 1); } @keyframes lvl-ask-in { from { opacity: 0; } to { opacity: 1; } } /* 4. the resting look stays faded; pointing at a greyed choice or reaching it by keyboard shows its picture in full */ @media (hover: hover) { :where(#app[data-side="outside"]).out .card.lvl-above:hover .card-vis canvas, :where(#app[data-side="outside"]) .fin-card.lvl-above:hover .fin-vis-wrap, :where(#app[data-side="outside"]) .swatch.lvl-above:hover, :where(#app[data-side="outside"]) .any-colour.lvl-above:hover .any-dot { filter: none; opacity: 1; } } :where(#app[data-side="outside"]).out .card.lvl-above:focus-visible .card-vis canvas, :where(#app[data-side="outside"]) .fin-card.lvl-above:focus-visible .fin-vis-wrap, :where(#app[data-side="outside"]) .swatch.lvl-above:focus-visible, :where(#app[data-side="outside"]) .any-colour.lvl-above:focus-within .any-dot { filter: none; opacity: 1; } :where(#app[data-side="outside"]).out .card.lvl-above .card-vis canvas, :where(#app[data-side="outside"]) .fin-card.lvl-above .fin-vis-wrap, :where(#app[data-side="outside"]) .any-colour.lvl-above .any-dot { transition: filter 200ms var(--ease), opacity 200ms var(--ease); } :where(#app[data-side="outside"]) .swatch.lvl-above { transition: box-shadow 200ms var(--ease), transform 200ms var(--ease), opacity 200ms var(--ease); } /* Switch and Keep: the chips' 200 ms and press (as the inside's) */ :where(#app[data-side="outside"]) .lvl-ask-btns button { transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms, transform 200ms var(--ease); } :where(#app[data-side="outside"]) .lvl-ask-btns button:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { :where(#app[data-side="outside"]) .lvl-ask { animation: none; } :where(#app[data-side="outside"]) .lvl-ask-btns button, :where(#app[data-side="outside"]).out .card.lvl-above .card-vis canvas, :where(#app[data-side="outside"]) .fin-card.lvl-above .fin-vis-wrap, :where(#app[data-side="outside"]) .swatch.lvl-above, :where(#app[data-side="outside"]) .any-colour.lvl-above .any-dot { transition: none; } :where(#app[data-side="outside"]) .lvl-ask-btns button:active { transform: none; } } /* 2. a narrow phone: the tag on a three across card wraps at its hyphen rather than clip at the card's edge ("Overseas-sourced" at 360 px) */ @media (max-width: 400px) { :where(#app[data-side="outside"]).out .cards.three .card.lvl-above > .lvl-tag { white-space: normal; max-width: calc(100% - 10px); } } /* (O7, agent X) the feature kind cards in the Feature row: a picture of the real front (3 by 2) in the 4 by 3 card */ :where(#app[data-side="outside"]) .fin-vis.fin-scene { object-fit: cover; } /* (J2, the join; on only with mountOutside({ inside: true }): the standalone page has none) (speed and walk-in fixes, 24 Oct 2026; Jamal: "it should had a big walk in button") ONE big "Walk in" button at the foot of the view, in the middle: the inside's own big Enter button's look (../v3/css/clinic.css .enter-btn). One press walks you from the view to the front doors and through into the walk inside. Hidden while the start screen, Compare or the realistic picture is up, in a part's close view and while the walk runs (src/outside.js syncDoor); the undo note goes up over it */ :where(#app[data-side="outside"]) .out-door { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 6; } :where(#app[data-side="outside"]) .out-door[hidden] { display: none; } :where(#app[data-side="outside"]) .out-walk { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 30px 0 24px; border: 0; border-radius: 999px; background: var(--aubergine); color: #fff; font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(26, 15, 46, 0.3), 0 10px 26px rgba(45, 27, 78, 0.32); transition: background 200ms, transform 160ms cubic-bezier(0.23, 1, 0.32, 1); } :where(#app[data-side="outside"]) .out-walk:hover { background: var(--royal); } :where(#app[data-side="outside"]) .out-walk:active { transform: scale(0.97); } :where(#app[data-side="outside"]) .out-walk:focus-visible { outline: 3px solid var(--orchid); outline-offset: 3px; } :where(#app[data-side="outside"]) .out-walk svg { width: 22px; height: 22px; } :where(#app[data-side="outside"]).out.booting .out-door { visibility: hidden; } :where(#app[data-side="outside"]).walk-shown .out-note { bottom: 92px; } @media (max-width: 820px) { /* (design check, 25 Oct 2026) the phone's Walk out's size: 52 px, 17 px words (was 50 and 16) */ :where(#app[data-side="outside"]) .out-door { bottom: 14px; } :where(#app[data-side="outside"]) .out-walk { height: 52px; padding: 0 24px 0 20px; font-size: 17px; } :where(#app[data-side="outside"]).walk-shown .out-note { bottom: 74px; } }