/* The kit: A · Porcelain glass (plan/blueprint/g1-directions.md, "The picked look"), shared by every group's page (g2–g7). plan/blueprint/kit/build.mjs puts this file, the fonts and the photos inside each group's page. Parts and names: plan/blueprint/kit/README.md. Two layers: the page around the phone (quiet, General Sans, light and dark), and the phone itself, always in the app's own light look (Switzer, porcelain and cobalt). */ @font-face { font-family: "Switzer"; src: url(fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Switzer"; src: url(fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Switzer"; src: url(fonts/switzer-600.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "General Sans"; src: url(fonts/general-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "General Sans"; src: url(fonts/general-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "General Sans"; src: url(fonts/general-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; } /* ---------- The page around the phone (its values: tokens.css, --page-; the phone's: tokens.css, --color- and the rest) ---------- */ [hidden] { display: none !important; } body { margin: 0; background: var(--page-bg); color: var(--page-fg); font: 400 16px/1.55 var(--page-font); -webkit-font-smoothing: antialiased; } .wrap { max-width: 1180px; margin: 0 auto; padding-block: 28px 72px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .intro h1 { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; text-wrap: balance; } .intro p { margin: 0 0 8px; max-width: 66ch; } .intro .what { font-weight: 600; } .muted { color: var(--page-muted); } .controls { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .screens { display: flex; flex-wrap: wrap; gap: var(--gap-tap); } .screens button, button.plain { min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--page-line); background: var(--page-surface); color: var(--page-fg); font: 500 16px/1.2 var(--page-font); cursor: pointer; } .screens button[aria-pressed="true"] { border-color: var(--page-accent); color: var(--page-accent); box-shadow: inset 0 0 0 1px var(--page-accent); } .screens button:focus-visible, button.plain:focus-visible, .statepick select:focus-visible, .other button:focus-visible { outline: 3px solid var(--page-accent); outline-offset: 2px; } .ctlrow { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; } .statepick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .statepick label { font-weight: 500; } .statepick select { min-height: 44px; min-width: 0; max-width: 100%; text-overflow: ellipsis; padding: 0 12px; border-radius: var(--radius-4); border: 1px solid var(--page-line); background: var(--page-surface); color: var(--page-fg); font: 400 16px/1.2 var(--page-font); } button.plain[aria-pressed="true"] { border-color: var(--page-accent); color: var(--page-accent); } .stagewrap { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 24px; } .device { width: 410px; height: 864px; padding: 10px; border-radius: var(--page-device-radius); background: var(--page-frame); box-shadow: 0 0 0 var(--line-1) var(--page-frame-edge), var(--page-frame-shadow); position: sticky; top: 16px; } .device .phone { border-radius: var(--page-screen-radius); } .about { min-width: 0; } .about h2 { font-size: 26px; line-height: 1.2; font-weight: 600; margin: 0 0 4px; } .about h3 { font-size: 18px; font-weight: 600; margin: 20px 0 6px; } .about p, .about li { max-width: 64ch; } .about ul { margin: 0; padding-left: 20px; } .about li + li { margin-top: 3px; } .about .jobs { color: var(--page-muted); margin: 0; } .about .pick { background: var(--page-mark); color: var(--page-mark-ink); border-radius: var(--radius-2); padding: 0 4px; } .other { margin-top: 18px; padding: 14px 16px; border: 1px dashed var(--page-line); border-radius: var(--radius-6); } .other h3 { margin-top: 0; } .other .btns { display: flex; flex-wrap: wrap; gap: var(--gap-tap); } .other button { min-height: 44px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid var(--page-line); background: var(--page-soft); color: var(--page-fg); font: 500 16px/1.2 var(--page-font); cursor: pointer; } .q { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--page-line); } .q h2 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 12px; } .q h3, .q p strong:first-child { font-size: 18px; } .q p, .q li { max-width: 72ch; } .q ul { padding-left: 22px; } .q .qa { margin-top: 22px; } .notes { margin-top: 40px; } .notes h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; } @media (max-width: 920px) { .stagewrap { grid-template-columns: minmax(0, 1fr); gap: 28px; } .device { margin: 0 auto; position: relative; top: 0; } } @media (max-width: 520px) { .device { width: auto; height: min(844px, calc(100svh - 24px)); padding: 0; border-radius: 0; background: none; box-shadow: none; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); } .device .phone { border-radius: 0; } } /* A laptop screen in place of the phone (g7's panel):
(not ".laptop": g5, g6 and g7 use that name for their own). #phone keeps its id, so the page contract and check.mjs are unchanged (check.mjs then takes a 1280 px picture of every state). Under 900 px the screen fills the window. On a wide screen a sheet is a dialog in the middle (below, "sheets"). */ .wrap:has(.laptopframe) { max-width: 1320px; } .laptopframe { margin-top: 24px; padding: 12px; border-radius: var(--radius-8) var(--radius-8) var(--radius-3) var(--radius-3); background: var(--page-frame); box-shadow: 0 0 0 var(--line-1) var(--page-frame-edge), var(--page-laptop-shadow); container: laptopframe / inline-size; } .laptopframe .phone { height: 780px; border-radius: var(--radius-3); } .laptopframe-base { height: 14px; margin: 0 -8px; border-radius: 0 0 var(--radius-6) var(--radius-6); background: var(--page-frame-edge); } @media (max-width: 899px) { .laptopframe { padding: 0; border-radius: 0; background: none; box-shadow: none; margin-top: 18px; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); } .laptopframe .phone { height: min(844px, calc(100svh - 24px)); border-radius: 0; } .laptopframe-base { display: none; } } /* ---------- The phone: A · Porcelain glass ---------- */ .phone { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: var(--color-bg); color: var(--color-text); font: var(--font-weight-regular) var(--font-size-0)/var(--leading-6) var(--font-sans); -webkit-font-smoothing: antialiased; } :where(.phone) * { box-sizing: border-box; } :where(.phone) button, :where(.phone) input { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :where(.phone) :is(h2, h3, h4, p, ul, ol) { margin: 0; } :where(.phone) ul, :where(.phone) ol { list-style: none; padding: 0; } .phone p, .phone li { text-wrap: pretty; } /* views: one screen at a time, stacked while one moves over another */ .view { position: absolute; inset: 0; background: var(--color-bg); } .view.cam { background: var(--color-cam); color: var(--color-on-cam); } .scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: var(--space-14); } .scroller::-webkit-scrollbar { display: none; } /* the room under a bottom bar or dock: at least these, and more when the bar grows (a message in it, three lines at 320 px): kit.js sets --bar-room on the view from the bar's real height (session 38, g5's check: a grown bar hid the last lines) */ .has-dock .scroller { padding-bottom: max(168px, var(--bar-room, 0px)); } .has-bar .scroller { padding-bottom: max(120px, var(--bar-room, 0px)); } /* keyboard focus is scrolled clear of the glass top bar and of the tray or bottom bar, never left under them */ .scroller { scroll-padding-top: 76px; } .has-dock .scroller { scroll-padding-bottom: max(168px, var(--bar-room, 0px)); } .has-bar .scroller { scroll-padding-bottom: max(120px, var(--bar-room, 0px)); } /* glass: only the top bar, the bottom bar, the dock over a look, and sheets (Apple's rule) */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .cam .glass { background: var(--glass-cam-bg); } .phone.solid .glass { background: var(--color-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .phone.solid .cam .glass { background: var(--color-cam); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--color-solid); } .cam .glass { background: var(--color-cam); } } @media (prefers-reduced-transparency: reduce) { .glass { background: var(--color-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .cam .glass { background: var(--color-cam); } } /* the words on glass are step 12: at the end of this file ("Words on glass") */ .topbar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--space-5); min-height: var(--size-row); padding: var(--space-5) var(--space-7); } .topbar .title { flex: 1; min-width: 0; font-weight: var(--font-weight-semibold); font-size: var(--font-size-1); line-height: var(--leading-3); } .topbar .who { flex: 1; min-width: 0; line-height: var(--leading-4); } .who .t1 { font-weight: var(--font-weight-semibold); } .who .t2 { color: var(--color-text-muted); } .cam .who .t2 { color: var(--color-on-cam-muted); } .avatar { width: var(--size-avatar); height: var(--size-avatar); border-radius: var(--radius-round); object-fit: cover; flex: none; } .avbtn { width: var(--size-tap); height: var(--size-tap); padding: var(--space-1); border-radius: var(--radius-round); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); cursor: pointer; flex: none; } .avbtn img { width: 100%; height: 100%; border-radius: var(--radius-round); object-fit: cover; display: block; } .bottombar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-tap) var(--space-5); padding: var(--space-6) var(--space-7) var(--space-8); } .bottombar .grow { flex: 1; min-width: 0; } .bottombar .acts { display: flex; flex-wrap: wrap; gap: var(--gap-tap) var(--space-5); margin-left: auto; } .bottombar .used { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex: 1 0 auto; } /* buttons */ .btn { min-height: var(--size-tap); padding: 0 var(--space-9); border-radius: var(--radius-full); border: var(--line-1) solid var(--color-btn-line); background: var(--color-btn-bg); font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); cursor: pointer; text-align: center; line-height: var(--leading-2); } .btn.primary { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; font-weight: var(--font-weight-semibold); } .btn.danger { color: var(--color-warn); border-color: var(--color-warn-line); background: var(--color-surface); } .btn.sm { min-height: var(--size-tap-sm); padding: 0 var(--space-7); } .btn.wide { width: 100%; } .btn.big { min-height: var(--size-tap-big); font-size: var(--font-size-1); } .btn.icon { width: var(--size-tap); padding: 0; } .cam .btn:not(.primary) { background: var(--color-cam-btn-bg); border-color: var(--color-cam-btn-line); color: var(--color-on-cam); } .btn[aria-disabled="true"] { opacity: var(--opacity-off); pointer-events: none; } /* the second tap (Kit.arm): the button says what will happen, in g2's look (question 32) */ .btn.primary[data-kit-armed] { background: var(--color-text); color: var(--color-on-accent); border-color: transparent; } .btn[data-kit-armed]:not(.primary) { background: var(--color-tint); color: var(--color-text); border: var(--line-2) solid var(--color-text); } .btn:focus-visible, .tile:focus-visible, .link:focus-visible, .chip:focus-visible, .rowbtn:focus-visible, .field input:focus-visible, .slot .x:focus-visible, .shutter:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } .cam .btn:focus-visible, .cam .link:focus-visible, .shutter:focus-visible { outline-color: var(--color-on-cam); } .link { min-height: var(--size-tap-sm); padding: 0; border: 0; background: none; cursor: pointer; color: var(--color-link); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; display: inline-flex; align-items: center; } .cam .link { color: var(--color-on-cam); } .link.quiet { color: var(--color-text); } .ico { width: var(--size-icon); height: var(--size-icon); flex: none; } .ico.sm { width: var(--size-icon-sm); height: var(--size-icon-sm); } /* blocks of a screen */ .pad { padding: var(--space-4) var(--space-7) 0; } .stack { display: flex; flex-direction: column; gap: var(--space-5); } .h1 { font-size: var(--font-size-4); line-height: var(--leading-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-title); text-wrap: balance; } .h2 { font-size: var(--font-size-1); line-height: var(--leading-4); font-weight: var(--font-weight-semibold); } .lead { font-size: var(--font-size-1); line-height: var(--leading-5); } .sub { color: var(--color-text-muted); } .cam .sub { color: var(--color-on-cam-muted); } .num { font-variant-numeric: tabular-nums; } .sec { padding: var(--space-11) var(--space-7) 0; } .sec > .h2 { margin-bottom: var(--space-5); } .sec-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); } .card { border-radius: var(--radius-8); padding: var(--space-8); background: var(--color-surface); border: var(--line-1) solid var(--color-line); } .card.tint { background: var(--color-tint); border-color: var(--color-track); } .card.warn { border-color: var(--color-warn-line); background: var(--color-warn-bg-soft); } .card .acts { display: flex; flex-wrap: wrap; gap: var(--gap-tap); margin-top: var(--space-6); } .note { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6) var(--space-7); border-radius: var(--radius-6); background: var(--color-tint); } .note.warn { background: var(--color-warn-bg); color: var(--color-warn-text); } .note.plain { background: var(--color-surface); border: var(--line-1) solid var(--color-line); } .note .ico { margin-top: 1px; } .banner { margin: var(--space-4) var(--space-7) 0; } .bar { height: 6px; border-radius: var(--radius-1); background: var(--color-track); overflow: hidden; } .bar i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-1); } .bar.full i { background: var(--color-warn); } .tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-5); border-radius: var(--radius-3); background: var(--color-tint); color: var(--color-text); font-weight: var(--font-weight-medium); } .tag.ai { background: var(--color-photo-tag); } .mark { background: var(--page-mark); color: var(--page-mark-ink); border-radius: var(--radius-2); padding: 0 var(--space-3); font-weight: var(--font-weight-medium); } /* rows: open customers, a round's looks, settings lines */ .rows { background: var(--color-surface); border-radius: var(--radius-8); border: var(--line-1) solid var(--color-line); padding: 0 var(--space-7); } .rows > li + li { border-top: var(--line-1) solid var(--color-tint); } .row { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-5) 0; min-height: var(--size-row); } .rowbtn { display: flex; align-items: center; gap: var(--space-6); width: 100%; padding: var(--space-5) 0; min-height: var(--size-row); border: 0; background: none; cursor: pointer; text-align: left; } .rtext { flex: 1; min-width: 0; } .rname { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; } .rsub { color: var(--color-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .thumb { width: 56px; height: 72px; object-fit: cover; flex: none; border-radius: var(--radius-4); background: var(--color-making); } .thumb.sq { width: 48px; height: 48px; border-radius: var(--radius-round); } .chev { color: var(--color-text-muted); } .heart { display: inline-flex; color: var(--color-heart); } .spin { width: 16px; height: 16px; border-radius: var(--radius-round); border: var(--line-2) solid var(--color-track); border-top-color: var(--color-accent); animation: kspin var(--motion-spin) linear infinite; flex: none; } @keyframes kspin { to { transform: rotate(360deg); } } .run { width: 46%; height: 6px; border-radius: var(--radius-1); background: var(--color-track); overflow: hidden; position: relative; } .run::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: var(--radius-1); background: var(--color-accent); animation: krun var(--motion-run) ease-in-out infinite; } @keyframes krun { from { transform: translateX(-100%); } to { transform: translateX(250%); } } /* with "reduce motion" the spinner and the running bar stand still (the picked look: fades only); the words beside them ("is being made", "Taking longer than usual") say what is happening. Session 39, 19 Oct */ @media (prefers-reduced-motion: reduce) { .spin, .run::after { animation: none; } } /* tiles: choices in a grid (categories, types, colours). Two across; at large text one, so a long word ("Kanjeevaram") fits on a 320 px phone at 130% (2.10, plan/design-system.md:522: a minimum width in em; the fresh check's F12, 6.6g, 23 Oct). auto-fill, not auto-fit: a tile alone in its row keeps its column's width */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(7em, 40%), 1fr)); gap: var(--space-4); } .tile { min-height: 56px; padding: var(--space-5) var(--space-7); border-radius: var(--radius-7); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); cursor: pointer; text-align: left; font-weight: var(--font-weight-medium); display: flex; align-items: center; gap: var(--space-5); line-height: var(--leading-3); } .tile[aria-pressed="true"] { border: var(--line-2) solid var(--color-accent); background: var(--color-tint); } .tile .sub { font-weight: var(--font-weight-regular); } .tile.more { border-style: dashed; } .choice { display: flex; align-items: center; gap: var(--space-7); width: 100%; min-height: 76px; padding: var(--space-7) var(--space-8); border-radius: var(--radius-8); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); cursor: pointer; text-align: left; } .choice .ctext { flex: 1; min-width: 0; } .choice .cname { font-weight: var(--font-weight-semibold); font-size: var(--font-size-1); } .choice .ico { width: 28px; height: 28px; color: var(--color-accent); } /* the colour tiles: four across at normal text, a column fewer when the phone's text is large (P4, 130%: plan/design-system.md 2.10, Claude's pick; plan/design-system/measures.md:113; 6.3b, 23 Oct): a minimum width in em grows with the words */ .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8em, 1fr)); gap: var(--space-4); } .sw { min-height: 72px; padding: var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-6); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font-size: var(--font-size-0); line-height: var(--leading-1); text-align: center; } .sw i { width: 30px; height: 30px; border-radius: var(--radius-round); box-shadow: inset 0 0 0 var(--line-1) var(--color-swatch-edge); flex: none; } .sw[aria-pressed="true"] { border: var(--line-2) solid var(--color-accent); background: var(--color-tint); } /* dress cards in the picker */ .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } .dcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-7); overflow: hidden; border: var(--line-1) solid var(--color-line); background: var(--color-surface); cursor: pointer; text-align: left; padding: 0; } .dcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--color-making); } .dcard .dt { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); } .dcard .dn { font-weight: var(--font-weight-medium); line-height: var(--leading-3); overflow-wrap: anywhere; } .dcard .dm { color: var(--color-text-muted); } .dcard.out img { filter: grayscale(1); opacity: var(--opacity-out); } .dcard.out .dm { color: var(--color-warn); } .dcard.inTray { border: var(--line-2) solid var(--color-accent); } .dcard .check { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; } /* the tray: four slots, always visible */ .dock { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7; padding: var(--space-6); border-radius: var(--radius-9); border: var(--glass-edge); } .slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); } .slot { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-4); border: var(--line-dashed) dashed var(--color-btn-line); background: var(--color-slot-empty); overflow: hidden; } .slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .slot .code { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1) var(--space-2); background: var(--color-slot-code-bg); font-weight: var(--font-weight-semibold); text-align: center; font-variant-numeric: tabular-nums; } .slot .x { position: absolute; top: 0; right: 0; width: var(--size-tap-sm); height: var(--size-tap-sm); border: 0; background: none; cursor: pointer; display: grid; place-items: start end; padding: var(--space-2); } .slot .x span { width: 26px; height: 26px; border-radius: var(--radius-round); background: var(--color-text); color: var(--color-on-accent); display: grid; place-items: center; } .slot.filled { border: var(--line-1) solid var(--color-line); } .dockrow { display: flex; align-items: center; gap: var(--space-5); } .dockrow .count { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; } .dockrow .btn { flex: 1; } /* fields */ .field { display: flex; flex-direction: column; gap: var(--space-3); } .field label { font-weight: var(--font-weight-medium); } .field .hint { color: var(--color-text-muted); } .inrow { display: flex; gap: var(--space-4); } .field input { min-height: var(--size-field); width: 100%; min-width: 0; padding: 0 var(--space-7); border-radius: var(--radius-5); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); font-size: var(--font-size-1); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-code); text-transform: uppercase; } .field input::placeholder { color: var(--color-text-muted); text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-regular); } /* inside glass a hint stays grey step 11, so it never looks like typed words (glass turns --color-text-muted step 12, the end of this file); on the field's white, 5.94 : 1 (6.7, Claude's pick, 24 Oct) */ :where(.glass:not(.cam *)) .field input::placeholder { color: var(--color-neutral-11); } .field .err { color: var(--color-warn); font-weight: var(--font-weight-medium); } .trail { display: flex; flex-wrap: wrap; gap: var(--gap-tap); padding: var(--space-2) var(--space-7) 0; } .trail .chip { min-height: var(--size-tap-sm); } .chip { min-height: var(--size-tap-sm); padding: 0 var(--space-7); border-radius: var(--radius-full); border: var(--line-1) solid var(--color-btn-line); background: var(--color-btn-bg); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3); } .chip[aria-checked="true"], .chip[aria-pressed="true"] { border: var(--line-2) solid var(--color-accent); font-weight: var(--font-weight-semibold); background: var(--color-tint); } .chips { display: flex; flex-wrap: wrap; gap: var(--gap-tap); } /* a chip that is a button is at least 44 px wide too ("S", "L" were 40: library/methods/ux-quality-floor.md:10; the fresh check's N14, 6.6g, 23 Oct) */ button.chip, a.chip, .chip:is([role=radio], [role=checkbox], [role=button], [role=option]) { min-width: var(--size-tap-sm); justify-content: center; } .tick { display: flex; align-items: center; gap: var(--space-6); min-height: var(--size-field); padding: 0 var(--space-7); border-radius: var(--radius-6); border: var(--line-1) solid var(--color-btn-line); background: var(--color-surface); cursor: pointer; width: 100%; text-align: left; } .tick .box { width: 26px; height: 26px; border-radius: var(--radius-3); border: var(--line-2) solid var(--color-btn-line); display: grid; place-items: center; flex: none; color: var(--color-on-accent); } .tick[aria-checked="true"] .box { background: var(--color-accent); border-color: var(--color-accent); } .stepper { display: flex; align-items: center; gap: var(--space-7); } .stepper output { min-width: 2ch; text-align: center; font-size: var(--font-size-4); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } .stepper .btn { width: 52px; padding: 0; font-size: var(--font-size-3); } /* the camera, the photo and the QR */ .camfeed { position: absolute; inset: 0; overflow: hidden; } .camfeed img { width: 100%; height: 100%; object-fit: cover; display: block; } .camfeed.dim img { filter: brightness(.82); } .oval { position: absolute; left: 50%; top: 40%; width: 58%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: var(--radius-round); box-shadow: 0 0 0 9999px var(--color-cam-mask); border: var(--line-3) solid var(--color-cam-guide); } .square { position: absolute; left: 50%; top: 42%; width: 64%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--radius-9); box-shadow: 0 0 0 9999px var(--color-cam-mask-strong); border: var(--line-3) solid var(--color-cam-guide); } .camtext { position: absolute; left: 14px; right: 14px; text-align: center; font-weight: var(--font-weight-medium); font-size: var(--font-size-1); color: var(--color-on-cam); text-shadow: var(--shadow-cam-text); } .shutterbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: var(--space-8) var(--space-7) var(--space-11); display: flex; justify-content: center; } .shutter { width: 76px; height: 76px; border-radius: var(--radius-round); border: var(--line-4) solid var(--color-on-cam); background: var(--color-shutter-bg); cursor: pointer; display: grid; place-items: center; } .shutter span { width: 58px; height: 58px; border-radius: var(--radius-round); background: var(--color-on-cam); display: block; } .photo-check { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; padding: var(--space-8); border-radius: var(--radius-9); border: var(--line-1) solid var(--color-photo-check-line); color: var(--color-on-cam); } .photo-check .lead { margin-bottom: var(--space-6); font-weight: var(--font-weight-medium); } .qrcard { margin: var(--space-9) auto 0; width: min(300px, 84%); padding: var(--space-9); border-radius: var(--radius-9); background: var(--color-surface); border: var(--line-1) solid var(--color-line); text-align: center; } .qrcard svg { width: 100%; height: auto; display: block; } .qrcard p { margin-top: var(--space-6); } /* the look, edge to edge, and its glass dock (the bold moment) */ .stage { position: relative; } .photo { position: relative; overflow: hidden; background: var(--color-making); aspect-ratio: 3 / 4; width: 100%; } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: var(--dim-photo); } .making { position: absolute; inset: 0; display: grid; place-items: center; } .making-in { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); width: 100%; text-align: center; padding: 0 var(--space-10); } /* over a look with its dock (the failed look's words): the message stays in the middle where there is room, and otherwise ends 12 px above the dock, so large text never runs under it (P4, 130%: plan/design-system.md 2.10; measures.md:114; 6.3b, 23 Oct). kit.js sets the stage's --bar-room from the dock: its height, its 12 px from the bottom, and 24 */ .photo:has(~ .lookdock) .making { grid-template-rows: 1fr auto minmax(calc(var(--bar-room, 24px) - 12px), 1fr); } .photo:has(~ .lookdock) .making-in { grid-row: 2; } .lookdock { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: var(--space-7); border-radius: var(--radius-9); border: var(--glass-edge); } .lookname { font-weight: var(--font-weight-semibold); font-size: var(--font-size-1); line-height: var(--leading-4); } .lookname .code { font-variant-numeric: tabular-nums; white-space: nowrap; } .lookacts { display: grid; grid-template-columns: 2fr 3fr; gap: var(--space-4); margin-top: var(--space-5); } .lookacts .btn:not(.primary) { padding: 0 var(--space-5); } .lookacts .approve { grid-column: 1 / -1; } .aitag { position: absolute; top: 12px; left: 12px; z-index: 2; } .versions { display: flex; gap: var(--space-4); margin-top: var(--space-5); } .versions .chip { flex: 1; justify-content: center; } /* sheets, messages and the stand-ins for other apps */ .overlay { position: absolute; inset: 0; z-index: 20; } .scrim { position: absolute; inset: 0; background: var(--color-scrim); } .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; padding: var(--space-5) var(--space-9) var(--space-11); border-radius: var(--radius-9) var(--radius-9) 0 0; border-top: var(--glass-edge); color: var(--color-text); } .grab { width: 40px; height: 5px; border-radius: var(--radius-1); background: var(--color-track); margin: 0 auto var(--space-7); } .sheet h3 { font-size: var(--font-size-2); line-height: var(--leading-4); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-6); text-wrap: balance; } .sheet .q-l { font-weight: var(--font-weight-medium); margin: var(--space-3) 0 var(--space-4); } .sheet .stack { margin-top: var(--space-7); } .sheet:focus { outline: none; } /* Kit.sheet focuses the sheet itself only when it has no button */ .toast { position: absolute; left: 14px; right: 14px; bottom: 88px; z-index: 30; padding: var(--space-6) var(--space-8); border-radius: var(--radius-6); background: var(--color-toast); color: var(--color-on-toast); font-weight: var(--font-weight-medium); pointer-events: none; opacity: 0; } .standin { border-radius: var(--radius-7); border: var(--line-1) dashed var(--standin-line); padding: var(--space-7); background: var(--standin-bg); color: var(--standin-text); } .standin .who { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); } .bubble { margin-top: var(--space-3); padding: var(--space-6) var(--space-7); border-radius: var(--standin-bubble-radius); background: var(--standin-bubble); border: var(--line-1) solid var(--standin-bubble-line); white-space: pre-wrap; overflow-wrap: anywhere; } .offline { position: absolute; left: 10px; right: 10px; top: 72px; z-index: 8; } /* on a wide laptop screen (.laptopframe): the sheet is a small dialog in the middle, and messages sit centred (g7's own rule, now the kit's) */ @container laptopframe (min-width: 760px) { .sheet { left: calc(50% - 290px); right: auto; width: 580px; top: 64px; bottom: auto; max-height: calc(100% - 104px); border-radius: var(--radius-8); border: var(--glass-edge); padding: var(--space-9) var(--space-12) var(--space-11); } .sheet .grab { display: none; } .toast { left: calc(50% - 240px); right: auto; width: 480px; } } /* "Claude's pick": one rule for every group, so the tag never covers words, a button or a face. - A box with its own padding (.card, .note, .rows, a sheet's block): .marked, the tag on its top edge, inside the padding. - Anything else (a button, a field, a pill, a line, a photo): .marked.above, the tag wholly above it, in 30 px it keeps clear. For a button in a row of buttons, mark the row (.acts.marked.above), not the button. - In a sentence, a heading or a row's words: the inline tag, Claude's pick. Never on a photo's face, never inside a button's own words. */ .marked { position: relative; } .marked::before { content: "Claude's pick"; position: absolute; right: 8px; top: -11px; padding: 0 var(--space-4); border-radius: var(--radius-2); background: var(--page-mark); color: var(--page-mark-ink); font-size: var(--font-size-0); font-weight: var(--font-weight-medium); line-height: 22px; } .marked.above { margin-top: var(--space-14); } .marked.above::before { top: -30px; right: 0; white-space: nowrap; pointer-events: none; } /* tables that turn into cards (g7): a table on a laptop, one card per row on a phone (when the box is under 640 px).
StoreCoins
Meera Fashions420
data-l is the label a cell shows in its card; .lead is the row's name (the card's title); .wide is long text set under its label; tr.sel (or aria-selected="true") marks the chosen row. */ .tablebox { container: tablebox / inline-size; border: var(--line-1) solid var(--color-line); border-radius: var(--radius-6); background: var(--color-surface); overflow-x: auto; } .cardtable { width: 100%; border-collapse: separate; border-spacing: 0; } .cardtable caption { text-align: left; font-weight: var(--font-weight-semibold); padding: var(--space-6) var(--space-6) var(--space-2); } .cardtable th { text-align: left; font-weight: var(--font-weight-medium); color: var(--color-text-muted); padding: var(--space-5) var(--space-6); border-bottom: var(--line-1) solid var(--color-line); white-space: nowrap; } .cardtable td { padding: var(--space-3) var(--space-6); height: var(--size-field); border-bottom: var(--line-1) solid var(--color-tint); vertical-align: middle; overflow-wrap: anywhere; } .cardtable tr:last-child td { border-bottom: 0; } .cardtable .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .cardtable td.lead { font-weight: var(--font-weight-semibold); } .cardtable tr.sel td, .cardtable tr[aria-selected="true"] td { background: var(--color-tint); } @container tablebox (max-width: 640px) { .cardtable thead { display: none; } .cardtable, .cardtable tbody { display: block; width: 100%; } .cardtable tr { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) var(--space-7); border-bottom: var(--line-1) solid var(--color-line); } .cardtable tr:last-child { border-bottom: 0; } .cardtable td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); height: auto; padding: var(--space-1) 0; border: 0; text-align: right; } .cardtable td[data-l]::before { content: attr(data-l); color: var(--color-text-muted); text-align: left; flex: none; max-width: 48%; } .cardtable td.lead { display: block; text-align: left; font-size: var(--font-size-1); } .cardtable td.wide { display: block; text-align: left; } .cardtable td.wide[data-l]::before { display: block; max-width: none; } .cardtable tr.sel, .cardtable tr[aria-selected="true"] { background: var(--color-tint); } .cardtable tr.sel td, .cardtable tr[aria-selected="true"] td { background: none; } } /* a segmented choice: two or three capsules, one chosen (Approvals | Test pictures, Women's | Men's). Buttons with role="tab" and aria-selected inside role="tablist", or plain buttons with aria-pressed. */ .segmented { display: flex; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-full); background: var(--color-tint); } .segmented button { flex: 1; min-width: 0; min-height: var(--size-tap-sm); padding: 0 var(--space-5); border: var(--line-1) solid transparent; border-radius: var(--radius-full); background: none; cursor: pointer; font-weight: var(--font-weight-medium); color: var(--color-text); line-height: var(--leading-2); } .segmented button[aria-selected="true"], .segmented button[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-btn-line); font-weight: var(--font-weight-semibold); color: var(--color-link); } .segmented button:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } /* an on/off switch for a whole line: */ .onoff { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); width: 100%; min-height: var(--size-field); padding: var(--space-3) 0; border: 0; background: none; cursor: pointer; text-align: left; } .onoff .otext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); font-weight: var(--font-weight-medium); } .onoff .otext .sub { font-weight: var(--font-weight-regular); } .onoff .track { position: relative; width: 52px; height: 32px; border-radius: var(--radius-6); background: var(--color-off); flex: none; transition: background-color var(--motion-switch); } .onoff .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: var(--radius-round); background: var(--color-surface); transition: transform var(--motion-switch); } .onoff[aria-checked="true"] .track { background: var(--color-accent); } .onoff[aria-checked="true"] .track::after { transform: translateX(20px); } .onoff:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } @media (prefers-reduced-motion: reduce) { .onoff .track, .onoff .track::after { transition: none; } } /* money lines: a line's words left, its coins or rupees right (Wallet history, our Money tab). ; .amt.nc for "Not charged"; .lacts for a line's buttons */ .mlines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-6); padding: var(--space-6) 0; align-items: start; } .mlines > li + li { border-top: var(--line-1) solid var(--color-tint); } .mlines .amt { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .mlines .amt.plus { color: var(--color-done); } .mlines .amt.nc { color: var(--color-text-muted); font-weight: var(--font-weight-medium); } .mlines .lacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--gap-tap); } /* a screen that only holds a stand-in in its middle (Google's own sign-in):
… */ .stub { min-height: 100%; display: grid; place-items: center; padding: 30px var(--space-11); } /* another group's page shown inside this one (g5 shows g6's pages, g7 shows g4's): a dashed frame, its "drawn in" line first.

Drawn in full in g6, the Store Website Pages page. Here: one sample.

…
*/ .otherpage { display: grid; gap: var(--space-6); padding: var(--space-6); border: var(--line-2) dashed var(--color-btn-line); border-radius: var(--radius-8); } .otherpage > .from { display: flex; gap: var(--space-4); align-items: flex-start; color: var(--color-text-muted); font-weight: var(--font-weight-medium); } /* the phone's own browser strip (not ours), above the views (Kit.browserbar fills it) */ .browserbar { position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 9; display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-6); background: var(--standin-browser-bg); color: var(--standin-browser-text); border-bottom: var(--line-1) solid var(--standin-browser-line); font: 400 16px/1.2 var(--standin-browser-font); } .browserbar .ico { width: 20px; height: 20px; color: var(--standin-browser-icon); } .browserbar .bb-url { flex: 1; min-width: 0; white-space: nowrap; } .browserbar .bb-app { padding: var(--space-1) var(--space-4); border-radius: var(--radius-2); background: var(--standin-browser-app); font-weight: var(--font-weight-semibold); white-space: nowrap; } .phone:has(> .browserbar:not([hidden])) > .view { top: 44px; } /* Words on glass: step 12 (plan/design-system.md 2.10, the text-on-glass row: "on glass, text is step 12"; 2.1's three on-glass rows; the user's answer 2 of 24 Oct, "A · Step 12 on glass"; 6.7). Inside every glass surface (the bars, the tray, the dock over a look, sheets) but the camera's, whose words are white (--color-on-cam): second lines and links turn step 12 wherever they use the two tokens, and the kit's warning words turn ruby 12. Words only: a wrong field's red edge and every other red edge or fill on glass stay --color-warn (2.10; records/6.6.md, "For 6.7"). The same in the solid fallback, where step 12 passes too. Last in the file, so each warning line wins over its part's own colour at the same weight; a page's own rule after the kit still wins. */ .glass:not(.cam *) { --color-text-muted: var(--color-text-muted-on-glass); --color-link: var(--color-link-on-glass); } :where(.glass:not(.cam *)) .field .err, :where(.glass:not(.cam *)) .btn.danger, :where(.glass:not(.cam *)) .dcard.out .dm { color: var(--color-warn-on-glass); }