:root{color-scheme:light;--cream:#F7F4ED;--warm:#EDE7DA;--green:#093822;--green-mid:#0E4B2C; --orange:#B5530F;--gray:#4E4335;--line:rgba(9,56,34,.14);--line-strong:rgba(9,56,34,.22); --tint-orange:rgba(181,83,15,.13);--tint-green:rgba(9,56,34,.09); --ink-soft:rgba(9,56,34,.5);--on-fill:rgba(247,244,237,.22);--raise:#ffffff; --hot:#B5530F;--hot-ink:#F7F4ED;--accent-ink:#A54A0C; --lab:#52606B;--lab-ink:#F7F4ED; --rail:#EFEAE0;--lift:rgba(9,56,34,.16); --do-lit:#11492C;--do-edge:rgba(247,244,237,.17);--do-cast:rgba(9,56,34,.26); --r:12px; --look-1:#8A4A6E;--look-1-w:#F4E9EF;--look-2:#6E3355;--look-2-w:#EFDFE8; --build-1:#9A7A2A;--build-1-w:#F3EDDC;--build-2:#6F5613;--build-2-w:#EDE4CB; --keep-1:#2E7D9E;--keep-1-w:#E6F0F5;--keep-2:#1C5E7E;--keep-2-w:#DCEAF1; --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23574B3C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#17683E;--no:#B02525;--verdict-ink:#F7F4ED;--tint-yes:rgba(23,104,62,.13); --canvas:var(--raise);--chrome:var(--rail);--sunken:var(--warm); --brand:var(--green);--on-brand:var(--cream); --action:var(--orange);--action-ink:var(--accent-ink);--on-action:var(--cream); --ink:var(--green);--ink-muted:var(--gray);--ok:var(--yes);--stop:var(--no) --ink-faint:#8C7F6C;--warn:#8A5A00; /* THE CURRENT ROW'S OWN GROUND, AND NOTHING ELSE'S (the colour pass after this one, "the colour system and the product's door") A deeper cream than --warm, one step further from --chrome than a hover ever goes, so a row standing on it does not read as merely hovered. On its own it measures 1.22 against --chrome, nowhere near the 3:1 a state carried by colour alone would need -- which is exactly why the row also keeps its own left bar and its bold weight: three channels, one of them colour. */ --deep:#DED5C2} /* The system's answer, unless a choice has overruled it. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark;--cream:#101A15;--warm:#1C2B22;--green:#EFE9DC;--green-mid:#DCD5C4; --orange:#E8873F;--gray:#BCB4A8;--line:rgba(239,233,220,.16);--line-strong:rgba(239,233,220,.24); --tint-orange:rgba(232,135,63,.18);--tint-green:rgba(239,233,220,.10); --ink-soft:rgba(239,233,220,.55);--on-fill:rgba(16,26,21,.22);--raise:#26362C; --hot:#A94A0B;--hot-ink:#EFE9DC;--accent-ink:#E8873F; /* Measured at 4.35 against --lab-ink, under the 4.5 an 11px tag needs. Darkened to clear it (5.60) without touching the ink or the name: the only consumer of either is the rail's two slate tags, so no other surface moves. */ --lab:#4E5D6A;--lab-ink:#EFE9DC; --rail:#0B1310;--lift:rgba(0,0,0,.55); --do-lit:#FBF7EE;--do-edge:rgba(255,255,255,.6);--do-cast:rgba(0,0,0,.45); --r:12px; --look-1:#D9A8C2;--look-1-w:rgba(217,168,194,.15); --look-2:#C98CAE;--look-2-w:rgba(201,140,174,.17); --build-1:#D9BC6E;--build-1-w:rgba(217,188,110,.15); --build-2:#C4A24F;--build-2-w:rgba(196,162,79,.17); --keep-1:#7FC0DC;--keep-1-w:rgba(127,192,220,.15); --keep-2:#62ADCE;--keep-2-w:rgba(98,173,206,.17); --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A2988A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#5FCF97;--no:#F58F86;--verdict-ink:#101A15;--tint-yes:rgba(95,207,151,.16); --canvas:var(--raise);--chrome:var(--rail);--sunken:var(--warm); --brand:var(--green);--on-brand:var(--cream); --action:var(--orange);--action-ink:var(--accent-ink);--on-action:var(--cream); --ink:var(--green);--ink-muted:var(--gray);--ok:var(--yes);--stop:var(--no) --ink-faint:#8B8274;--warn:#E3B24A; --deep:#26332B} } /* The choice, which wins in both directions. */ :root[data-theme="dark"]{color-scheme:dark;--cream:#101A15;--warm:#1C2B22;--green:#EFE9DC;--green-mid:#DCD5C4; --orange:#E8873F;--gray:#BCB4A8;--line:rgba(239,233,220,.16);--line-strong:rgba(239,233,220,.24); --tint-orange:rgba(232,135,63,.18);--tint-green:rgba(239,233,220,.10); --ink-soft:rgba(239,233,220,.55);--on-fill:rgba(16,26,21,.22);--raise:#26362C; --hot:#A94A0B;--hot-ink:#EFE9DC;--accent-ink:#E8873F; /* Measured at 4.35 against --lab-ink, under the 4.5 an 11px tag needs. Darkened to clear it (5.60) without touching the ink or the name: the only consumer of either is the rail's two slate tags, so no other surface moves. */ --lab:#4E5D6A;--lab-ink:#EFE9DC; --rail:#0B1310;--lift:rgba(0,0,0,.55); --do-lit:#FBF7EE;--do-edge:rgba(255,255,255,.6);--do-cast:rgba(0,0,0,.45); --r:12px; --look-1:#D9A8C2;--look-1-w:rgba(217,168,194,.15); --look-2:#C98CAE;--look-2-w:rgba(201,140,174,.17); --build-1:#D9BC6E;--build-1-w:rgba(217,188,110,.15); --build-2:#C4A24F;--build-2-w:rgba(196,162,79,.17); --keep-1:#7FC0DC;--keep-1-w:rgba(127,192,220,.15); --keep-2:#62ADCE;--keep-2-w:rgba(98,173,206,.17); --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A2988A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#5FCF97;--no:#F58F86;--verdict-ink:#101A15;--tint-yes:rgba(95,207,151,.16); --canvas:var(--raise);--chrome:var(--rail);--sunken:var(--warm); --brand:var(--green);--on-brand:var(--cream); --action:var(--orange);--action-ink:var(--accent-ink);--on-action:var(--cream); --ink:var(--green);--ink-muted:var(--gray);--ok:var(--yes);--stop:var(--no) --ink-faint:#8B8274;--warn:#E3B24A; --deep:#26332B} :root[data-theme="light"]{color-scheme:light;--cream:#F7F4ED;--warm:#EDE7DA;--green:#093822;--green-mid:#0E4B2C; --orange:#B5530F;--gray:#4E4335;--line:rgba(9,56,34,.14);--line-strong:rgba(9,56,34,.22); --tint-orange:rgba(181,83,15,.13);--tint-green:rgba(9,56,34,.09); --ink-soft:rgba(9,56,34,.5);--on-fill:rgba(247,244,237,.22);--raise:#ffffff; --hot:#B5530F;--hot-ink:#F7F4ED;--accent-ink:#A54A0C; --lab:#52606B;--lab-ink:#F7F4ED; --rail:#EFEAE0;--lift:rgba(9,56,34,.16); --do-lit:#11492C;--do-edge:rgba(247,244,237,.17);--do-cast:rgba(9,56,34,.26); --r:12px; --look-1:#8A4A6E;--look-1-w:#F4E9EF;--look-2:#6E3355;--look-2-w:#EFDFE8; --build-1:#9A7A2A;--build-1-w:#F3EDDC;--build-2:#6F5613;--build-2-w:#EDE4CB; --keep-1:#2E7D9E;--keep-1-w:#E6F0F5;--keep-2:#1C5E7E;--keep-2-w:#DCEAF1; --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23574B3C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6.4 4 4 4-4'/%3E%3C/svg%3E"); --yes:#17683E;--no:#B02525;--verdict-ink:#F7F4ED;--tint-yes:rgba(23,104,62,.13); --canvas:var(--raise);--chrome:var(--rail);--sunken:var(--warm); --brand:var(--green);--on-brand:var(--cream); --action:var(--orange);--action-ink:var(--accent-ink);--on-action:var(--cream); --ink:var(--green);--ink-muted:var(--gray);--ok:var(--yes);--stop:var(--no) --ink-faint:#8C7F6C;--warn:#8A5A00; /* THE CURRENT ROW'S OWN GROUND, AND NOTHING ELSE'S (the colour pass after this one, "the colour system and the product's door") A deeper cream than --warm, one step further from --chrome than a hover ever goes, so a row standing on it does not read as merely hovered. On its own it measures 1.22 against --chrome, nowhere near the 3:1 a state carried by colour alone would need -- which is exactly why the row also keeps its own left bar and its bold weight: three channels, one of them colour. */ --deep:#DED5C2} /* Three buttons, not a select. * * A select was the wrong control for three options that are each one word * long. It hid two of them behind a click; the list it dropped was drawn by * the browser, so it never quite matched the panel it fell out of; and a * select matches :focus-visible on a plain mouse click, which put a heavy * ring around it every single time it was opened. All three complaints * were about the popup, and a segmented control has no popup. * * Buttons only match :focus-visible from the keyboard, so the ring now * appears for the person it is for. */ .theme{display:inline-flex;align-items:center;gap:2px;padding:2px; border-radius:var(--r);border:1px solid var(--line);background:var(--cream)} .theme-b{font:inherit;font-size:11px;font-weight:700;line-height:1;padding:6px 9px; border:0;border-radius:var(--r);background:transparent;color:var(--gray);cursor:pointer; white-space:nowrap} .theme-b:hover{color:var(--green)} .theme-b[aria-pressed="true"]{background:var(--warm);color:var(--green)} /* Inset, so it draws inside the pill instead of blooming past it. */ .theme-b:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} /* The label is for whoever is not looking at the page. */ .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0}/* The same faces the site serves, from the same files. Someone who has just paid should land somewhere that looks like where he paid, and these are already on his machine if he read a page before buying. The Thai faces carry a unicode-range, so a Latin reader never fetches them. */ /* NO FACE SWAPPED UNDER HIS EYES (Mathieu, 2 October: the prices of the cards on the Home flashed on every refresh). With swap, a page painted in the fallback and redrew in the real face a moment later, and the big prices and titles showed it most. The Latin faces are optional now: a face already in the cache (every page after the first) is used from the first paint, and one that is not is left out of that page rather than swapped in halfway. They are preloaded from the head. */ @font-face{font-family:'DM Sans';src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2'); font-weight:400 700;font-display:optional} @font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-latin.woff2') format('woff2'); font-weight:400 900;font-display:optional} @font-face{font-family:'Sarabun';src:url('/assets/fonts/sarabun-thai-400.woff2') format('woff2'); font-weight:400;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC} @font-face{font-family:'Sarabun';src:url('/assets/fonts/sarabun-thai-700.woff2') format('woff2'); font-weight:700;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC} /* THE TITLES' FACE (28 September): a modern sans, not a serif. Mathieu found the serif titles did not read as a client space or a premium, current service; the product interfaces people pay for today set their titles in a grotesque at a semi-bold weight. Geist for Latin, IBM Plex Sans Thai (loopless, the same engineered cut) for Thai, both SIL OFL. One static semi-bold file each, declared for every weight: a title asks for 400 or 900 in places, and each gets the one weight drawn for it, never a synthesised bold. docs/typography.md says why these two. */ @font-face{font-family:'TGM Display';src:url('/assets/fonts/geist-latin-600.woff2') format('woff2'); font-weight:100 900;font-display:optional} @font-face{font-family:'TGM Display Thai';src:url('/assets/fonts/ibm-plex-sans-thai-600.woff2') format('woff2'); font-weight:100 900;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC} /* The palette is shared with the dashboard, both ways round, in _lib/theme.js. What is left here is what only this page has: its two faces, and the wordmark's, which stays the site's serif: it is the brand's mark, not a title. */ :root{--body:'Sarabun','DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:'TGM Display Thai','TGM Display',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --wordmark:'Fraunces',Georgia,serif} *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--cream);color:var(--green);font:16px/1.6 var(--body)} /* The window does not scroll: the two panes do. Only where the shell is drawn, so a signed-out form is still an ordinary page. */ body:has(.app){height:100dvh;overflow:hidden} /* Thai sets its own tracking and leading: the display face's negative tracking collides tone marks with the next glyph. Lifted from the site, where the same correction is already made. */ html[lang="th"] body{letter-spacing:0} html[lang="th"] h1,html[lang="th"] h2{line-height:1.22} /* The rail and the room, side by side, on one grid. 1080 is wide enough for a 212px rail and a 720px column of prose without either of them having to give: the column is what every measurement on this page was already tuned for. */ /* TWO PANES, NOT ONE PAGE The account was one long page with a rail stuck to the side of it, so every room scrolled the rail with it and a long room dragged the bottom of the rail out of reach. It is an application shell now, the shape every tool of this kind has settled on: the window itself does not scroll, the column on the left scrolls on its own from the mark at the top to the last room, and the column on the right scrolls under a header that stays. 100dvh and not 100vh: on a phone the two differ by the height of the browser's own bar, and vh is the one that is wrong while it is showing. */ /* One height for both heads, so the rule under the bar and the rule under the name of the account are the same line across the whole screen. */ .app{--head:56px;display:grid;grid-template-columns:272px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto;height:100dvh;overflow:hidden} /* FOUR ROWS NOW, TWO OF THEM STILL FIXED The mark at the top, the account at the foot, and between them the one row that scrolls. The column itself does not any more -- .side does, on its own -- which is also what lets a menu either fixed row opens escape: a panel absolutely placed inside a box that scrolls is clipped by that box, which is why the account's own used to disappear behind the column beside it. PHASE 4B, PART B: a second fixed row, sized auto, for the product block between the mark and the scrolling list -- placed by DOM order (it is the second child now, o.prod ahead of o.nav) rather than by name, since grid auto-placement already reads source order and a track added for a row that is not always there (an account with no open, road-having order sends no o.prod at all) needs no extra rule to collapse to nothing. */ /* A shade off the page beside it, and darker in both themes: the rooms are the frame and the room is the work, so the frame sits back. --chrome (Part A/C of the phase-4b brief) is that frame's own name in the semantic tier, aliased to the same --rail value: this rule's colour has not moved, only what it is allowed to mean. ITS ONE COLUMN IS ITS OWN WIDTH, NEVER ITS WIDEST LINE Without a column the grid made one as wide as its widest content, and a long sign-in address (a test account's +testrun one) pushed it past the rail: the products card and the Community block were cut at the rail's edge. minmax(0,1fr) holds it to the rail, and the address ends in an ellipsis as its own rule says. */ .col-side{display:grid;grid-template-rows:var(--head) auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr); min-height:0;overflow:hidden;border-right:1px solid var(--line);background:var(--chrome)} .col-main{min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain; background:var(--canvas)} /* THE WHOLE CONTENT COLUMN IS THE CANVAS, NOT ONLY THE CAPPED SHELL IN IT The shell carries the canvas and stops at 1440px wide and at the end of its content, so the cream behind it showed under a short page and on both sides of a wide screen. The column wears the same colour, so the inside of the page is one ground whatever its width or length. */ /* The header stays inside its own column: sticky and not fixed, so it is as wide as the column and never has to be told the rail's width. PHASE 4B: canvas, not cream, and a permanent hairline under it now that the header and the content share one colour -- the shadow-on-scroll below (.is-under) used to be enough precisely because they did not. */ .col-main > .chrome{position:sticky;top:0;z-index:30;background:var(--canvas); border-bottom:1px solid var(--line)} /* The reading measure inside the pane that scrolls. Wider than the site, because this is a place somebody works in and not a page he reads once. */ .shell{max-width:1000px;margin:0 auto;padding:0 32px} main{max-width:900px;padding:30px 0 40px} /* THE WIDE ROOM, NOW EVERY ROOM My store was the first room to break out of the shell's own 900px cap and paint its own ground under it; the setup road read the same rule next. Every room's content now reads it: the cap and the reading-measure width were a leftover of the single-column page this shell used to hold, and the rail, the header and the dock never lived inside .shell or main to begin with, so widening it touches no chrome. Scoped to .col-main so the signed-out shell (.shell.solo, a form with nothing to scroll beside it) keeps its own narrower width untouched. */ /* PHASE 4B: THE CONTENT AREA IS canvas, NOT A BESPOKE NEAR-WHITE #FDFCF8 answered to nothing in the token file: not --cream, not --raise, a third value nobody had named. --canvas is the semantic tier's own name for the same role (Part A of the phase-4b brief), aliased to --raise, so this rule now needs no dark-mode override of its own -- it already had one, which is the surest sign the literal was never load-bearing. */ /* CAPPED, NOT UNBOUNDED (PHASE 4B, PART D, the smaller correction) None read as no cap at all, and a grid row of cards stretching to the edge of an ultrawide monitor is a grid row with one column absurdly wider than the rest. 1440 is wide enough that nothing built for the old 900px column has had to change since (My store's own 3-up grid tops out well under it) and still stops well short of edge to edge; .shell's own margin:0 auto (above) still centres it once the column is wider. */ .col-main .shell{max-width:1440px;padding:0 clamp(20px,4vw,64px);background:var(--canvas)} .col-main main{max-width:1440px;padding:40px 0} /* The signed-out pages are one column and one page: they are forms, and a form has nothing to scroll beside it. Narrower, because a form as wide as a desk is a form with a hundred points of nothing beside every field. */ .shell.solo{max-width:760px;padding:0 20px} /* The rail is the bottom of its column and scrolls with it: the mark and the name above it go up out of the way when there are more rooms than fit, which is what a rail of eleven wants and what a sticky one could never do. */ .side{padding:6px 0 0} /* THE BAR ITSELF Every panel in here that can outgrow its box gets the same one: the rail, the accounts in the menu, the list a select drops. A page with three different scrollbars in it is a page assembled from three places. Thin, no track, and the thumb is the same hairline the account draws everywhere else, darkening under the pointer. It is always there rather than appearing on hover: a bar somebody has to discover is a bar nobody uses, and the whole point of this one is to say the rail has more in it. Two syntaxes because they are two engines, and neither reads the other. */ .side,.col-main,.who-list,.ls-p,.toc{scrollbar-width:thin; scrollbar-color:var(--ink-soft) transparent} .side::-webkit-scrollbar,.col-main::-webkit-scrollbar,.who-list::-webkit-scrollbar, .ls-p::-webkit-scrollbar,.toc::-webkit-scrollbar{width:14px;height:14px} .side::-webkit-scrollbar-track,.col-main::-webkit-scrollbar-track, .who-list::-webkit-scrollbar-track, .ls-p::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track{background:transparent} /* The border and the clip are what make a ten point bar carry a four point thumb: the padding is drawn in the thumb's own colour and then not painted, which is the only way to inset a scrollbar thumb in CSS. */ .side::-webkit-scrollbar-thumb,.col-main::-webkit-scrollbar-thumb, .who-list::-webkit-scrollbar-thumb, .ls-p::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb{ background:var(--ink-soft);border-radius:50px;border:4px solid transparent; background-clip:padding-box} .side::-webkit-scrollbar-thumb:hover,.col-main::-webkit-scrollbar-thumb:hover, .who-list::-webkit-scrollbar-thumb:hover, .ls-p::-webkit-scrollbar-thumb:hover,.toc::-webkit-scrollbar-thumb:hover{ background:var(--green);background-clip:padding-box} .side ul{list-style:none;margin:0;padding:0} /* A LITTLE MORE AIR, NOW THAT EVERY ROW IS ONE LINE 1px between rows was tuned for a row with a second line already giving the column rhythm; titles alone at that spacing read as one solid block rather than a list. 4px between rows, 10px inside each one, both multiples of the account's own spacing scale. */ .side li{margin:0 0 4px} .side a{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:var(--r); color:var(--gray);text-decoration:none} .side .i{flex:0 0 auto;margin-top:1px;opacity:.7} .side .s-text{flex:1 1 auto;min-width:0} .side .s-label{display:block;font-size:14px;font-weight:700;line-height:1.3; letter-spacing:-.01em} /* What the room costs, on the name of the room. A word and nothing around it: an outline here was a second box beside a box, on a row that already has a name, a line and sometimes a number. Free is the accent, and free beta is the blue: two different promises, and a colour each says so before the words are read. --accent-ink and not --orange, because these rows go warm when you hover them and the accent on warm is 4.05, under the bar; the ink token is the same orange taken down until it clears both grounds. */ /* A CAPSULE, NOT A BOX var(--r) is the one radius for everything rectangular; this is not rectangular. At 12px of corner on a box 16 to 21px tall the curve eats most of the shape and reads as neither a box nor a capsule. 999px is not a second radius any more than the 50% a circle already gets is: it is the same box-versus-shape distinction this account already draws elsewhere, applied to the two things in the rail that were never boxes. */ /* AN OUTLINED RECTANGLE, NOT A FILLED PILL (phase 4b, Part D7) A filled round pill beside a row is the same shape the count badge (.n) already owns, and that shape means "there are n things": Beta sitting in it made the badge lie twice, once about a number that was not there and once about what a pill means. A label is a rectangle with a hairline, never a capsule. */ .side .s-tag{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:4px; border:1px solid currentColor;background:none; font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; vertical-align:2px;line-height:1.35} /* action-ink, never --hot/--orange: the rail is --chrome, and plain orange text on it clears only 4.16:1 (phase 4b, Part C2, rule 1). */ .side .s-tag-tips{color:var(--action-ink)} .side .s-tag-results,.side .s-tag-marketing{color:var(--lab)} /* The same slate as the beta tag, and on purpose: to somebody deciding whether to press, "being built" and "being tried out" are one fact. */ .side .s-tag-offers{color:var(--lab)} .side .s-note{display:block;font-size:11.5px;font-weight:400;line-height:1.35; color:var(--gray);opacity:.85;margin-top:1px} .side a:hover{background:var(--warm);color:var(--green)} /* Current is a filled row, a coloured icon and a solid mark, not a colour change alone. */ .side a[aria-current="page"]{background:var(--warm);color:var(--green)} .side a[aria-current="page"] .i{opacity:1;color:var(--orange)} /* A room that sells something wears its family's colour on its mark, and wears it at full strength: the grey ones are dimmed so the names lead, but a colour dimmed to seven tenths is a colour nobody can name. It holds on the room he is in too. Orange there means "you are here", which every other row already says with a fill and a darker ink, and a product that changes colour when you open it is a product with two colours. */ .side .i.t-look-1,.side .i.t-look-2,.side .i.t-build-1, .side .i.t-build-2,.side .i.t-keep-1,.side .i.t-keep-2, .side a[aria-current="page"] .i.t-look-1,.side a[aria-current="page"] .i.t-look-2, .side a[aria-current="page"] .i.t-build-1,.side a[aria-current="page"] .i.t-build-2, .side a[aria-current="page"] .i.t-keep-1,.side a[aria-current="page"] .i.t-keep-2{ opacity:1} .side a[aria-current="page"] .s-note{color:var(--gray);opacity:1} .side a[aria-current="page"]::after{content:"";width:3px;align-self:stretch; border-radius:var(--r);background:var(--orange);margin-left:2px} /* HOVER AND THE PAGE HE IS ON, NO LONGER THE SAME LOOK Both read --warm above: a hovered row was indistinguishable from the row he is standing on. Scoped to .row, which only this account's own sideNav() ever draws, so the delivery dashboard's plain rail rows above keep reading the rules above exactly as they always have. Hover stays --warm and touches nothing else: no colour change on the row, so the icon and the label read exactly as they do at rest and the only thing that moved is the ground under the pointer. THE COLOUR PASS AFTER PHASE 4B REVERSES THIS ROW A SECOND TIME That pass put the row on a solid --brand fill, the exact card the rule below was written to replace: with the product block ALSO reading in the rail's own colour now, a solid green row made the rail read as mostly green. It stands on --deep instead -- a cream a full step darker than --warm's own hover, never a fill -- with a 3px bar in --ink down its left edge and bold weight carrying the rest: --deep measures 1.22 against --chrome, far under the 3:1 a state carried by tint alone would need, so the bar and the weight are not decoration, they are the other two channels. */ .side .row:hover{background:var(--warm)} .side .row[aria-current="page"]{background:var(--deep);font-weight:700; box-shadow:inset 3px 0 0 var(--ink)} /* THE LABEL LEADS, ALWAYS It used to be grey and turn green only when current, so the label and its own note shared one colour at rest. It is full ink whatever the row is doing now; what changes with the row is its ground, its marker and its icon, never which word is read first. */ .side .row .s-label{color:var(--green)} /* --deep IS A CREAM, NOT A FILL: NOTHING ON IT NEEDS on-brand The label, the note, the tag and the icon were all already tuned to sit on a pale ground (--raise, before; --deep now) in --green/--gray ink, and --deep is close enough in value to both that every one of them still clears its own threshold unchanged -- computed again for --deep specifically, not assumed because it once held for --raise. */ .side .row[aria-current="page"] .i{opacity:1} /* A product's own family colour is spent when its room is the one he is standing in: orange lives on the marker, look-1 through keep-2 live on the icon of a room with a family, and a row cannot wear a state colour and a product colour on the same mark without one of them losing. */ .side .row[aria-current="page"] .i.t-look-1{color:var(--look-1)} .side .row[aria-current="page"] .i.t-look-2{color:var(--look-2)} .side .row[aria-current="page"] .i.t-build-1{color:var(--build-1)} .side .row[aria-current="page"] .i.t-build-2{color:var(--build-2)} .side .row[aria-current="page"] .i.t-keep-1{color:var(--keep-1)} .side .row[aria-current="page"] .i.t-keep-2{color:var(--keep-2)} /* THE COUNT NEEDS NOTHING NEW Home's own badge is always what is waiting on him -- the account's own orange, unconditionally, never a neutral tint standing in for it just because the row he is reading it on happens to be the one he is standing in. Daily tips' own badge is already the neutral one (.n.plain, above): it does not need a second override for reading it on its own current row either. */ /* THE MARKER RETIRES: THE BAR IS INSET NOW, AND IT IS --ink, NOT --orange The colour pass folds the standalone capsule marker into the row's own box-shadow bar above -- one mark of "current" instead of two, and green rather than orange because orange is spent (the product block's own frame, the work still owed) and a second thing wearing it here read as a second kind of urgency the row was never trying to say. */ .side .row{position:relative} /* A ROW WITH NOTHING ON ITS SECOND LINE CENTRES INSTEAD OF ALIGNING TO THE TOP Every English row has a note; three Thai ones do not yet (the keys are missing, not empty), so a Thai client reads three rows whose icon sits high over empty space beside a single line of text. flex-start was right when every row had two lines; it stops being right the moment one does not. */ .side .row:not(.has-note){align-items:center} .side .row.has-note{align-items:flex-start} .side .row.has-note .i{margin-top:1px} /* What each group is, over it, in the second ink. It replaces the hairline that used to sit between groups: the space already says they are separate, and a rule drawn to repeat that is a rule saying nothing. Room above it and almost none below, so it belongs to what follows it rather than floating between two things. */ .side .s-cap{list-style:none;margin:26px 0 6px;padding:0 13px;font-size:10px; font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)} .side .s-cap:first-child{margin-top:0} /* A group with no caption still needs the space the caption would have taken, or two groups run into one another. Space and not a line: it is named for what it is now, since the line it replaced was called a gap and drew something. */ .side .s-space{height:22px;list-style:none} /* No row is a filled block. Daily tips was orange and shouting, next to a Results row that had to be as loud or lose to it, and two loud rows in a column of eleven is a column with no loud row at all. What the two of them are is said by the word on each of them and by the rule they stand behind. */ /* THE COUNT OF WHAT IS WAITING ON HIM, ON THE ROOM IT IS WAITING IN A capsule (999px, see .s-tag above) rather than var(--r)'s box, and its digits set tabular so a 1 turning into an 8 does not nudge the shape around it. The ink measured 3.52 against its own tint in daylight, under the 4.5 an 11px counter needs: a deeper orange for this one use, #8F4109, clears it at 5.06 and reads as the same colour. Not a new token: --orange already passes here in the dark palette (5.47) and keeps doing the counting there; only daylight's ink changes, so no new custom property, only the value this one small use of it needed. */ .side .n{flex:0 0 auto;margin-top:1px;min-width:21px;height:21px;padding:0 6.5px; border-radius:999px;background:var(--tint-orange);color:#8F4109;font-size:11px; font-weight:700;display:inline-flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .side .n{color:var(--orange)} } :root[data-theme="dark"] .side .n{color:var(--orange)} /* A COUNT THAT IS NOT A DEBT (THE COLOUR PASS) Daily tips moved its own count off a second line and into this badge, which everywhere else in the rail means "this is waiting on you" -- a tip is an offer, not a debt, so its own badge reads in --sunken and --ink-muted instead of the account's orange. */ .side .n.plain{background:var(--sunken);color:var(--ink-muted)} /* OPTIONAL QUESTIONS LEFT IN A ROOM (Mathieu, 1 October): a small "!" until he has opened the room once (SHELL_JS remembers it in this browser). */ .side .s-opt{flex:0 0 auto;margin-top:1px;width:19px;height:19px;border-radius:50%; background:var(--tint-orange);color:#8F4109;font-size:12px;font-weight:800; display:inline-flex;align-items:center;justify-content:center} .side .s-opt.is-seen{display:none} /* THE PRODUCT'S DOOR, ABOVE THE FIRST GROUP (THE COLOUR PASS, PART C) ------------------------------------------------------------------- Two lines, a caret, no counter and no button inside it: white fill, an orange frame. It is a door, not a dashboard, which is also why it can be this small -- the ring, the steps line and the blocker chip an earlier pass gave it were a third and fourth reading of the same number the flow panel and the Home row already carry (Part H), so they are gone rather than merely restyled. */ .prod{margin:16px 12px;border-radius:var(--r);background:var(--canvas); border:1.5px solid var(--action);overflow:hidden} /* TWO PRESSES (Mathieu, 3 October): the name opens the product's page, the caret in its own small frame opens the list. The list is the same width, padding and type as the row above it, so the open block reads as one card rather than two pieces stacked. */ /* The caret's frame sits centred in the block: as far from its right edge as from its top and bottom (10px each way on a 52px row). */ .prod-row{display:flex;align-items:center;gap:6px;padding:0 10px 0 0;min-height:52px} .prod .prod-go{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;align-self:stretch; padding:10px 6px 10px 12px;color:inherit;text-decoration:none} .prod.prod-none .prod-go{padding:10px 12px} /* A step passed since he last opened the product (productBlock, RAIL_JS). */ .prod .prod-new{flex:0 0 auto;width:9px;height:9px;margin-left:auto;border-radius:50%;background:var(--accent,#3F52A0);box-shadow:0 0 0 3px var(--deep,#E8ECFF)} .prod .prod-new[hidden]{display:none} /* The hover lights the whole row, the caret's frame included, never the name alone (Mathieu, 3 October). The empty block has no row. */ @media(hover:hover){ .prod:not(.on)>.prod-row:hover,.prod.prod-none .prod-go:hover{background:var(--sunken)} } .prod .prod-go:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .prod-cb{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .prod-tog{flex:none;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; border:1px solid var(--line-strong);border-radius:var(--r-sm,8px);background:var(--raise);cursor:pointer; color:var(--ink-muted)} @media(hover:hover){.prod-tog:hover{border-color:var(--ink-soft);color:var(--ink)}} .prod-cb:focus-visible+.prod-row .prod-tog{outline:2px solid var(--ink);outline-offset:2px} .prod-tog .prod-chev{display:block;margin:0;transition:transform .18s ease} .prod-cb:checked+.prod-row .prod-tog{background:var(--sunken);color:var(--ink)} .prod-cb:checked+.prod-row .prod-chev{transform:rotate(180deg)} .prod-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .prod-text{display:flex;flex-direction:column;min-width:0} .prod-kick{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:var(--action-ink);display:block;line-height:1.4} .prod-name{font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.2; display:block} .prod-chev{margin-left:auto;color:var(--ink-faint);flex:none} .prod-menu{display:none} .prod-cb:checked~.prod-menu{display:block} /* THE STATE THE PRODUCT'S OWN PAGES CARRY, AND ONLY THEM (PART J3) No rail row is current on these pages -- the block is the one thing saying so, which is why it needs a state of its own rather than borrowing --deep, the rail row's own ground: the two mechanisms mark different things and must never look like the same one. */ /* The orange bar runs the whole height, over the row's own fill and down the open list: drawn on top of both rather than under them (an inset shadow on the block was hidden by the row's fill, so the bar began only at the list, Mathieu, 3 October). */ .prod.on{border-width:1.5px;position:relative} .prod.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--action); z-index:1;pointer-events:none} .prod.on>.prod-row{background:#FFF3E9} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .prod.on>.prod-row{background:#2A1B12} } :root[data-theme="dark"] .prod.on>.prod-row{background:#2A1B12} /* THE SWITCHER: ONE BLOCK, AND IT DECIDES WHICH REALITY (PART C1) The one control now, for every restaurant on the account: the account block at the rail's foot stopped switching (Part J5), so a row pressed here posts to the exact route it used to, carrying the same "back" field, and reloads the rail and the content together. Nothing stays behind for two screens to disagree about. */ .prod-cb:checked~.prod-menu{border-top:1px solid var(--line);padding:4px 6px 6px} .prod-cap{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:var(--ink-faint);padding:8px 6px 4px} .prod-alt{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px; border-radius:var(--r-sm,8px);border:0;background:none;font:inherit;color:inherit; cursor:pointer;text-align:left} @media(hover:hover){.prod-alt:hover{background:var(--sunken)}} .prod-alt:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .prod-r{display:block;font-size:13px;font-weight:700;line-height:1.3} .prod-p{display:block;font-size:11.5px;color:var(--ink-muted);line-height:1.3} .prod-tick{margin-left:auto;color:var(--action);flex:none} a.prod-alt{text-decoration:none} .prod-due{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--on-action); background:var(--action);border-radius:999px;min-width:18px;height:18px;padding:0 6px; display:inline-flex;align-items:center;justify-content:center;flex:none; font-variant-numeric:tabular-nums} /* MOTION, ONLY WHERE IT IS ASKED FOR Nothing in this block animates on its own, so there is nothing here for prefers-reduced-motion to turn off. */ /* Settings: one value that cannot be edited, one that can. */ .fixed-value{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--green); word-break:break-all} .lang-form{margin:6px 0 10px} .opt-b{font:inherit;font-size:15px;font-weight:700;height:44px;display:inline-flex;align-items:center;padding:0 22px 0 36px; border-radius:var(--r); border:1px solid var(--line);background:var(--sunken);color:var(--gray);cursor:pointer} .opt-b:hover{border-color:var(--green);color:var(--green)} .opt-b.on{background:var(--green);border-color:var(--green);color:var(--cream)} /* The mark, and the way out. The account had no chrome at all: a client who had just paid landed on a page with nothing on it that said whose page it was. Inset to the content column rather than run edge to edge, because everything else on this page is. */ /* Three zones and the mark is the middle one: the name of the room on the left, the mark centred on the column, the ways out on the right. A grid rather than space-between, so the mark sits on the centre of the column however long a room's name is. */ /* NO RULE UNDER EITHER HEAD A line drawn permanently says the head is a different thing from the page; a shadow that arrives when something has gone under it says the page is moving, which is the only moment the separation is worth drawing. */ /* THE HEADER BELONGS TO THE ROOM, AND NOTHING ELSE It carried three foyers at once: the room's own name at the left, the wordmark centred as if it were a fourth room, the standing actions at the right. A head with three centres has none. The wordmark moved to the top of the rail (see .brand, below), so this is two parts now, not three: the room's own name, and what a client can always reach. */ .chrome{height:var(--head,60px);padding:0 32px;display:flex; align-items:center;gap:16px} /* A shadow and no line. A line under a head is a line: it says the head ends here whether or not anything is going under it, and it never stops saying it. This says the page is moving, softly, and stops when it is not. The rail's own head is the wordmark row now (.brand), not the account block, which moved to the rail's foot and has nothing left to scroll under it. */ .col-main > .chrome,.col-side > .brand{transition:box-shadow .2s ease} .col-main > .chrome.is-under,.col-side > .brand.is-under{ box-shadow:0 6px 14px -6px var(--lift)} /* THE NAME OF THE ROOM, IN INK Orange means one thing in this account: this is waiting on you. A room's own name is not a wait, so it reads in the same ink every label and every heading already writes in. */ .chrome-where{flex:1 1 auto;font-family:var(--display);font-weight:900;font-size:22px; line-height:1.1;letter-spacing:-.015em;color:var(--green);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ONE LINE, NOT TWO, FOR THE RESTAURANT'S OWN NAME (COLOUR PASS, PART E) On the title's own baseline, after a small dot, rather than a line of its own above it: a second line for four words is why the bar carried 64/56px of height it did not need. Shown only while a client has more than one restaurant (Part M leaves the exact threshold to Mathieu) -- one restaurant is a fact the client already knows, not a label. The title never moves: this is the flexible half of the row, truncating with an ellipsis rather than pushing the title off its own line. */ .chrome-titleline{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 auto} .chrome-titleline .chrome-where{flex:0 0 auto;overflow:visible;text-overflow:clip} .chrome-restaurant{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--gray); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative; padding-left:14px} .chrome-restaurant::before{content:"";position:absolute;left:4px;top:50%; width:3px;height:3px;border-radius:50%;background:var(--ink-faint); transform:translateY(-50%)} .chrome-right{display:flex;justify-content:flex-end;align-items:center;flex:0 0 auto} /* Signed out there is no rail, so the mark comes back to the bar, with the theme and the other language beside it. */ .chrome-solo{justify-content:space-between;padding:14px 20px; max-width:1000px;margin:0 auto} /* It goes to the overview, not to the site. A logo that navigates out of the account is a trapdoor; one that goes home is the thing everyone already tries to click. */ /* THE MARK, AT THE TOP OF THE RAIL NOW Three letters need size to be read as a mark rather than as an abbreviation somebody has to expand, which is why the site sets them at nearly twice the name's size and this bar does the same. It used to stand in the header, centred, a fourth room among the header's own three: it is the rail's own head now, on the same 60px line the header keeps, so the two rules at y=60 still meet across both columns. The name is still there for a screen reader. */ .chrome-brand{display:block;font-family:var(--wordmark);font-weight:900; font-size:24px;line-height:1;letter-spacing:-.02em;color:var(--green); white-space:nowrap} .chrome-brand:hover{color:var(--orange)} /* THE HEADER'S OWN COPY, FOR WHEN THE RAIL HAS NO TOP Hidden above 900px, where .brand on the rail already says this. Below it the rail lies down and loses its own head, so the header carries the mark again rather than a page losing it outright. */ .chrome-brand-m{display:none} /* THE RAIL'S OWN HEAD .brand sits where .who used to: the account is what you are looking at, the mark above it is whose tool this is, and a client reads a page top to bottom, so the tool comes first. */ .col-side > .brand{display:flex;align-items:center;height:var(--head); padding:0 16px;background:var(--chrome)} /* THE ACCOUNT, PINNED AT THE RAIL'S FOOT It used to head the rail, sticky, so the identity was the first thing a client read on every room. The frame reads better in the order a client actually uses it: the mark at the top says whose tool this is, the rooms between say what he can do in it, and who he is sits at the bottom, beside the door out -- the dock -- rather than above everything he came here to use. No position:sticky any more: the rail's middle row (.side) is the one that scrolls now, so a fixed-height grid row at the foot is already pinned without help. PHASE 4B: canvas, not chrome. Part C1 of that brief names this block the one exception inside the rail's own frame -- it is white, at 1.20 against the chrome around it, which is the one way this block can carry its own "is-current" state (below) without the tint the rest of the rail is forbidden from using (Part C2). */ .col-side > .who{position:relative;display:flex;align-items:center;height:var(--head); padding:0 12px;border-top:1px solid var(--line);background:var(--canvas)} .col-side .who > summary{width:100%;padding:6px 8px;border-radius:var(--r)} /* THE ACCOUNT BLOCK, MARKED CURRENT WHEN NOTHING ELSE IN THE RAIL IS Orders history, Downloads, Settings and Offers left the rail for this menu; a client reading one of them used to see a rail with no row lit at all, which reads as a page that fell out of the app. The same lift and left marker the rail's own current row wears, borrowed rather than reinvented, so the account block reads as one more room among the ones above it instead of a second kind of thing. */ .col-side > .who.is-current{background:var(--raise); box-shadow:inset 0 0 0 1px var(--line),0 1px 1px hsl(152 72% 13% / .10), 0 2px 4px hsl(152 72% 13% / .06)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .col-side > .who.is-current{ box-shadow:inset 0 0 0 1px var(--line),0 1px 1px hsl(152 40% 4% / .35), 0 2px 4px hsl(152 40% 4% / .22)} } :root[data-theme="dark"] .col-side > .who.is-current{ box-shadow:inset 0 0 0 1px var(--line),0 1px 1px hsl(152 40% 4% / .35), 0 2px 4px hsl(152 40% 4% / .22)} .col-side > .who.is-current::before{content:"";position:absolute;left:-8px;top:50%; transform:translateY(-50%);width:3px;height:20px;border-radius:999px;background:var(--orange)} /* OPENS UPWARD, BECAUSE THE ROW IT HANGS FROM IS NOW THE LAST ONE Absolute rather than fixed: the block it hangs from no longer sits inside anything that scrolls (the rail's middle row does, the head and the foot around it do not), so its place needs no pixel math borrowed from a header line above it. */ /* INSIDE THE RAIL, SQUARED WITH THE BLOCK IT OPENS FROM It hung from the rail's own edge (left 0) and was wider than the rail minus its padding, so it stuck to the left and ran past the rail's right border, where the rail's own overflow cut it and the content column, which paints its canvas now, covered what was left. The same 12px either side as the block under it, and no wider than the rail. */ .col-side .who-panel{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px); top:auto;z-index:60;width:auto;max-width:none} /* THE RAIL'S MIDDLE ROW IS WHAT SCROLLS NOW Its own scrollbar rather than the column's: the head above it and the foot below it are fixed rows of the same grid, and a bar that scrolled the whole column used to carry them both away with it. */ .side{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 12px 10px} /* The site's ornament, same proportion, same colour. */ .dot{display:inline-block;width:.42em;height:.42em;background:var(--orange); border-radius:50%;margin-left:.06em} /* THE MARK, AS AN IMAGE The wordmark file at the text's cap height, on the baseline like a letter; which colouring, the theme's tokens say (--kmark). */ .chrome-brand{display:inline-flex;align-items:baseline} .kmark{display:block;height:.72em;aspect-ratio:1614/310;background:var(--kmark,url(/assets/img/kontimo-light.png)) no-repeat center/contain} /* WHO ELSE IS ON THIS ACCOUNT A row a person, and the row is the whole card: an avatar to find him by, his name and address, what he may do and when he was last here. What can be done to him is folded away, because on a list of colleagues the two destructive buttons should not be the loudest thing on every line. */ .pp-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px} .pp{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto; gap:14px;align-items:center;padding:13px 15px;background:var(--warm); border:1px solid var(--line);border-radius:var(--r)} .pp-a{flex:0 0 auto;width:34px;height:34px;border-radius:var(--r);background:var(--green); color:var(--cream);display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800;letter-spacing:.02em} .pp-who,.pp-r{min-width:0;display:grid} .pp-n{font-size:14px;font-weight:700;color:var(--green);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pp-you{margin-left:7px;padding:1px 7px;border-radius:var(--r);background:var(--tint-green); color:var(--green);font-size:9px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;vertical-align:1px} .pp-e,.pp-seen{font-size:12px;color:var(--gray);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pp-role{font-size:13px;font-weight:700;color:var(--green)} .pp-edit{justify-self:end} .pp-edit > summary{list-style:none;cursor:pointer;padding:5px 12px;border-radius:var(--r); border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--gray)} .pp-edit > summary::-webkit-details-marker{display:none} .pp-edit > summary:hover{border-color:var(--green);color:var(--green)} .pp-edit[open]{grid-column:1/-1;justify-self:stretch} .pp-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} .pp-sel{width:auto;min-width:150px; border:1px solid var(--line);background:var(--sunken);color:var(--green)} /* Removing somebody is a word and not a red button. It is behind a fold and behind a confirm already, and a third warning is how the other two stop being read. */ .pp-x{font:inherit;font-size:12px;font-weight:700;padding:8px 4px;border:0; background:transparent;color:var(--no);cursor:pointer;text-decoration:underline} /* THE THREE ROLES, SIDE BY SIDE A name and what it means, on two lines rather than one, because what separates them is a sentence and a sentence running on after a bold word is a sentence nobody finishes. Read down the column and the difference is the only thing that changes. */ .pp-what{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px; font-size:12px;line-height:1.5;color:var(--gray)} .pp-what li{display:grid;gap:1px;padding-left:11px;border-left:2px solid var(--line)} .pp-what b{color:var(--green);font-size:13px} /* One sentence on its own reads like a page that failed to load. The glyph is the room's own, with a plus on it: what the line says and what to do about it, in the same object. */ .pp-alone{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:12px 14px; border:1px dashed var(--line);border-radius:var(--r);font-size:13px;color:var(--gray)} .pp-alone svg{flex:0 0 auto;opacity:.8} @media(max-width:640px){ .pp{grid-template-columns:auto minmax(0,1fr);row-gap:8px} .pp-r{grid-column:1/-1} .pp-edit{grid-column:1/-1;justify-self:start} } /* A grid cell is as wide as its 1fr, so without this the icons sit at the cell's left edge, which is the middle of the bar, against the mark. */ .chrome-right{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0} .chrome-out{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--gray);text-decoration:none;white-space:nowrap;margin-left:8px} .chrome-out:hover{color:var(--green)} /* THE STANDING ACTIONS, AT A TARGET WORTH PRESSING 32px is under the desktop hit-target guidance (40x40); the icon itself stays 18px inside the bigger box, which is the box growing around it and not the mark growing to fill it. */ .act{position:relative;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:var(--r);color:var(--gray);text-decoration:none} .act:hover{background:var(--warm);color:var(--green)} .act + .act{margin-left:0} .theme + .act{margin-left:8px} /* SIGN OUT IS A DIFFERENT CLASS OF ACTION Contact, help, notifications and settings are all the account read or asked; signing out ends the visit. A hairline between the two says so, at the group spacing this bar now keeps everywhere: 8px inside a group, 16px or more between two of them, and this is that gap drawn rather than left empty. */ .act-sep{width:1px;height:18px;background:var(--line);margin:0 7px;flex:0 0 auto} /* HIS GRAB ACCOUNT, AT A GLANCE A chain with a dot: grey not connected, blue being read (it breathes, because something is happening), green connected, orange when it needs a look. The words beside it go on a phone; the dot says it alone. */ .gc{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 8px; border:1px solid var(--line);border-radius:999px;color:var(--gray);text-decoration:none; font-size:12px;line-height:1;white-space:nowrap;flex:0 0 auto} .gc:hover{background:var(--warm);color:var(--green)} .gc-mark{position:relative;display:inline-flex} .gc-dot{position:absolute;right:-3px;bottom:-2px;width:8px;height:8px;border-radius:50%; background:#9a9186;box-shadow:0 0 0 2px var(--cream)} .gc-l b{font-weight:800;color:var(--green)} .gc.is-connected .gc-dot{background:var(--yes)} .gc.is-connected{border-color:color-mix(in srgb,var(--yes) 45%,transparent)} .gc.is-waiting .gc-dot{background:#2f6db0;animation:gc-breathe 1.6s ease-in-out infinite} .gc.is-waiting{border-color:rgba(47,109,176,.35)} .gc.is-problem .gc-dot{background:var(--orange)} .gc.is-problem{border-color:color-mix(in srgb,var(--orange) 45%,transparent)} @keyframes gc-breathe{50%{box-shadow:0 0 0 2px var(--cream),0 0 0 5px rgba(47,109,176,.25)}} @media(prefers-reduced-motion:reduce){.gc.is-waiting .gc-dot{animation:none}} @media(max-width:900px){.gc,.gc[class]{padding:0;width:40px;height:40px;justify-content:center;border-color:transparent} .gc-l{display:none}} @media(max-width:640px){.gc{width:30px;height:30px}} /* Only ever what is waiting on him: a bell that is always decorated stops meaning anything. */ .act-n{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px; border-radius:999px;background:var(--orange);color:var(--cream);font-size:10px; font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1; font-variant-numeric:tabular-nums} /* The tips' count: an offer, not a debt, so not the orange. */ .act-n.is-plain{background:var(--green);color:var(--cream)} .act.is-here{color:var(--green);background:var(--warm)} /* The home's line about the tips (2 October): one row, the bulb, the count. */ .h-tips{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:14px 18px;border:1px solid var(--line); border-radius:var(--r);background:var(--raise);color:var(--ink);text-decoration:none} .h-tips:hover{border-color:var(--green)} .h-tips svg{flex:0 0 auto;color:var(--green)} .h-tips b{font-weight:700;color:var(--green)} .h-tips .h-tips-go{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--green)} /* The bell opens where it stands. Reading what you have been told is a glance, and a glance should not cost the page you were on. */ .pop{position:relative} .pop > summary{list-style:none;cursor:pointer} .pop > summary::-webkit-details-marker{display:none} .pop[open] > summary{background:var(--warm);color:var(--green)} .pop-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:30; width:min(340px,calc(100vw - 32px));background:var(--canvas);border:1px solid var(--line); border-radius:var(--r);padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.16)} .pop-head{padding:8px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--gray)} .pop-asks{display:flex;flex-direction:column;gap:5px;padding:0 0 6px} .pop-ask{display:block;padding:10px 12px;border-radius:var(--r);background:var(--green); color:var(--cream);text-decoration:none} .pop-what{display:block;font-size:14px;font-weight:700;line-height:1.3} .pop-where{display:block;font-size:11px;opacity:.75} .pop-row{display:flex;gap:10px;align-items:baseline;padding:9px 12px; border-top:1px solid var(--line)} .pop-when{flex:0 0 auto;font-size:11px;color:var(--gray);font-variant-numeric:tabular-nums} .pop-subject{flex:1 1 auto;font-size:13px;line-height:1.4} .pop-failed{font-size:11px;color:var(--orange);font-weight:700} .pop-empty{margin:0;padding:4px 12px 12px;font-size:13px;line-height:1.5;color:var(--gray)} .pop-all{display:block;padding:10px 12px;border-top:1px solid var(--line);font-size:12px; font-weight:700;color:var(--gray);text-decoration:none} .pop-all:hover{color:var(--green)} /* Who this account belongs to, at the far left of the top bar. */ .who{max-width:100%} .who > summary{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r); cursor:pointer;list-style:none;max-width:100%} .who > summary::-webkit-details-marker{display:none} .who > summary:hover{background:var(--warm)} .who[open] > summary{background:var(--warm)} .ava{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r);border:1px solid var(--line); background:var(--warm);color:var(--green);font-size:12px;font-weight:700;letter-spacing:.02em; display:flex;align-items:center;justify-content:center;overflow:hidden} .who-text{flex:1 1 auto;min-width:0} .who-name{display:block;font-size:13px;font-weight:700;color:var(--green);line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who-where{display:block;font-size:11px;color:var(--gray);line-height:1.35; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .who-chevron{flex:0 0 auto;color:var(--gray);transition:transform .15s ease} .who[open] .who-chevron{transform:rotate(180deg)} /* It floats, like the bell's, and hangs from the left edge instead of the right one. */ .who-panel{left:0;right:auto;width:min(288px,calc(100vw - 32px))} .who-link{display:block;padding:10px 12px;border-radius:var(--r);font-size:13px;font-weight:700; color:var(--gray);text-decoration:none} .who-link:hover{background:var(--warm);color:var(--green)} /* Wraps rather than overflows: the three Thai words are half again as wide as the English ones, and a row that cannot fit them should stack, not push its own panel open. */ .who-row{display:flex;align-items:center;justify-content:space-between;gap:8px 10px; flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line); border-bottom:1px solid var(--line);margin:4px 0} .who-k{font-size:13px;font-weight:700;color:var(--gray)} /* WHICH ACCOUNT, AND WHICH RESTAURANT Both at the top of the menu, above his own name and his own settings: they are the widest things the menu decides, and everything under them means something different depending on the answer. Both are one row until asked. Ten restaurants listed flat pushed the profile and the way out off the bottom of a three hundred point panel, so the row says what is in force and the list is behind it. */ .who-fold{border-radius:var(--r)} .who-fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:10px;padding:7px 12px;border-radius:var(--r)} .who-fold > summary::-webkit-details-marker{display:none} .who-fold > summary:hover{background:var(--warm)} .who-fold-t{min-width:0;display:grid;gap:1px} .who-fold .who-k{font-size:10px;font-weight:700;letter-spacing:.09em; text-transform:uppercase} .who-cur{font-size:13px;font-weight:700;color:var(--green);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .who-fold-c{flex:0 0 auto;color:var(--gray);transition:transform .15s ease} .who-fold[open] > summary .who-fold-c{transform:rotate(180deg)} /* Long enough for four and scrolling after that: a list that grows with the account must not decide how tall the menu is. */ .who-list{max-height:196px;overflow:auto;margin:2px 0 0} .who-acc{display:flex;align-items:center;gap:8px;width:100%;font:inherit; text-align:left;padding:8px 12px;border:0;border-radius:var(--r);background:transparent; color:var(--gray);cursor:pointer} .who-acc:hover{background:var(--warm);color:var(--green)} .who-acc.on{color:var(--green);cursor:default} .who-acc-n{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* The tick keeps its room on every row, so what is in force is the only thing that changes down the column and nothing shifts sideways. */ .who-tick{flex:0 0 auto;opacity:0} .who-acc.on .who-tick{opacity:1;color:var(--accent-ink)} .who-rule{height:1px;margin:6px 10px;background:var(--line)} /* THE SAME LIST, AS A QUESTION One moment only: he followed a sign-in link and the address opens two accounts. Full-width targets, because this is the only thing on the page worth pressing. */ .pick{display:grid;gap:10px;margin:22px 0 0;max-width:520px} .pick-b{display:flex;align-items:center;justify-content:space-between;gap:14px; width:100%;font:inherit;text-align:left;padding:16px 18px;border-radius:var(--r); border:1px solid var(--line);background:var(--warm);color:var(--green);cursor:pointer} .pick-b:hover{border-color:var(--green)} .pick-n{font-size:16px;font-weight:800;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .pick-go{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-ink)} /* The one orange thing on the page that is not a control. Every room's title carries it, so the eye lands on where it is before it reads anything else, and the colour stops being reserved for what is urgent, which was making the account read as either alarming or grey. */ h1{font-family:var(--display);font-weight:900;font-size:30px;line-height:1.25; margin:0 0 10px;letter-spacing:-.02em;color:var(--orange)} /* What he is on this account, beside the name of the room that is about him rather than above it: they are one line of the same sentence, and two lines of heading for four words was a gap for no reason. In the house green rather than the accent, which belongs to the heading. */ /* Centred and not on the baseline. A twenty-eight point heading and an eleven point pill share a baseline by sitting the pill five points lower than the middle of the line, which reads as a pill that has slipped. */ /* THE END OF THE DECISIONS Under the last one, in the account's own green, because it is the answer to the question above it and not a fourth thing on the page. */ .fin{margin:26px 0 0;padding:18px 20px;border-radius:var(--r);background:var(--tint-green)} .fin-h{margin:0 0 4px;font-family:var(--display);font-weight:900;font-size:17px; color:var(--green)} .fin-b{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--gray)} .fin-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0} /* Beside the button and not dressed as one: the paper is a second thing he may want and never the thing to press. */ .fin-print{font-size:13px;font-weight:700;color:var(--gray)} .fin-print:hover{color:var(--green)} /* SIX MONTHS ON A fact with a button on it, not a card among three offers. It carries the accent because it is the one thing on the page that is about time having passed, and time passing is what somebody misses. */ .sr{margin:0 0 26px;padding:18px 20px;border:1px solid var(--line); border-left:3px solid var(--orange);border-radius:var(--r);background:var(--warm)} .sr-tag{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:var(--r); background:var(--hot);color:var(--hot-ink);font-size:10px;font-weight:800; letter-spacing:.09em;text-transform:uppercase} .sr-h{font-family:var(--display);font-weight:900;font-size:18px;line-height:1.2; margin:0 0 6px;color:var(--green)} .sr-b{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--gray)} .sr-go{margin:0} /* WHICH ONE, NOT HOW MANY The tabs answer how many are waiting. With six behind one of them, the one he came for is three scrolls down, so the names are a row of their own under the tabs, and pressing one leaves only that one on the page: scrolling to a card leaves the other five around it, which is the thing he was trying to get away from. It scrolls sideways rather than wrapping into four lines of chips. */ .jump{display:flex;gap:6px;margin:14px 0 0;overflow-x:auto;padding-bottom:2px; scrollbar-width:none} .jump::-webkit-scrollbar{display:none} .jump a{flex:0 0 auto;font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--r); border:1px solid var(--line);color:var(--gray);white-space:nowrap} .jump a:hover{border-color:var(--green);color:var(--green)} .jump a.on{background:var(--green);border-color:var(--green);color:var(--cream)} /* WHAT HE MAKES OF IT A tab of its own and not a postscript: it is a fourth thing to do with this page, and everything above it is us talking. Five questions, which is inside what a person will answer, and every one of them optional, which is said before the first box rather than beside each one. */ .say-n{margin:10px 0 22px;padding:11px 14px;border-radius:var(--r); background:var(--tint-green);font-size:12.5px;line-height:1.55;color:var(--green)} .say-q{display:block;margin:0 0 24px} .say-k{display:block;font-size:13px;font-weight:700;line-height:1.35; color:var(--green);margin:0 0 8px} .say-q textarea{width:100%;font:inherit;font-size:14px;line-height:1.55;padding:11px 13px; border-radius:var(--r);border:1px solid var(--line);background:var(--raise); color:var(--green);resize:vertical} .say-h{display:block;margin:7px 0 0;font-size:12px;line-height:1.5;color:var(--gray)} /* A POINT, WHICH IS A FINDING AND WHAT HE THINKS OF IT A remark about a report is almost always a remark about one finding in it, and a page that does not ask which one costs somebody here twenty minutes of looking for it. */ .say-lead{margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--gray);max-width:64ch} /* One column, three fields, in the order somebody thinks in: what kind of thing this is, which finding it is about, then the thing itself. It was a two column grid where the box for a reference had to share its width with four chips, and the placeholder was cut in half. Numbered, because a point is one of several and the number is how he refers to it when he writes to us about it. */ .pts{display:grid;gap:10px;counter-reset:pt} .pt{padding:14px 16px 16px;border-radius:var(--r);border:1px solid var(--line); background:var(--warm);counter-increment:pt} /* The number and the way out of it, on one line over the fields. A number floating beside a tall card was a card with an empty left margin, and a thing that can be added has to be removable: otherwise the only way out of a mistake is emptying three boxes by hand. */ .pt-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px} .pt-n::before{content:counter(pt)} .pt-n{display:flex;align-items:center;justify-content:center;width:20px;height:20px; border-radius:50%;background:var(--raise);color:var(--green);font-family:var(--display); font-size:10px;font-weight:900} .pt-x{font:inherit;font-size:15px;line-height:1;width:24px;height:24px;padding:0; border:0;border-radius:var(--r);background:transparent;color:var(--gray);cursor:pointer} .pt-x:hover{background:var(--raise);color:var(--orange)} .pts .pt:only-child .pt-x{visibility:hidden} .pt-c{display:block;margin:0 0 13px} .pt-c:last-child{margin-bottom:0} .pt-m{display:block;font-size:9px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--gray);margin-bottom:6px} .pt textarea,.pt .q-i{width:100%;font:inherit;font-size:14px;line-height:1.5; padding:9px 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--raise); color:var(--green);resize:vertical} /* A reference is four characters. A box the width of the page for four characters says the page expects a paragraph. */ .pt-r .ls,.pt-r .pt-sel{max-width:420px} .pt-r .ls .ls-b{width:100%} .pt .chip span{font-size:12px;padding-top:6px;padding-bottom:6px} .pts + .rw-add{margin:12px 0 30px} .say-two{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)} /* One scale, used once, so two reports can be compared. The ends are named: a five with nothing said about it is a five somebody guessed at. */ .say-mark .chip span{min-width:44px;justify-content:center;padding-left:13px} .say-mark .chip span::before{display:none} .say-ends{display:flex;justify-content:space-between;max-width:300px;margin:6px 0 0; font-size:11px;color:var(--gray)} /* Bottom right, where the thing that finishes a form belongs. */ .say-go{display:flex;justify-content:flex-end;margin:26px 0 0;padding-top:18px; border-top:1px solid var(--line)} /* WHAT HAPPENS AFTER THE THING HE IS BEING ASKED FOR Numbered, because it is a sequence. Quiet, because it is not a control: nothing here is for him to press, it is here so he can see the end of the thing he has started. */ .then{list-style:none;margin:8px 0 0;padding:0;counter-reset:then;display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px} .then li{position:relative;padding:12px 14px 12px 38px;counter-increment:then; border:0;border-radius:var(--r);background:var(--tint-green); font-size:12.5px;line-height:1.55;color:var(--gray)} .then li::before{content:counter(then);position:absolute;left:13px;top:12px;width:17px; height:17px;border-radius:50%;background:var(--raise);color:var(--green); font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center} /* Behind him: still worth reading once, not worth reading twice. */ .then li.is-done{opacity:.62} .then li.is-done::before{color:var(--yes)} /* The step that is his to take is a thing to press, not a word in a sentence: it is the last station on the road and the road is not finished until he has been here. */ .then-go{display:inline-block;margin:10px 0 0;font-size:12px;font-weight:700; padding:8px 14px;border-radius:var(--r);background:var(--green);color:var(--cream)} .then-go:hover{background:var(--green-mid)} /* THE ONE OFFER THAT ANSWERS A QUESTION HE IS ALREADY ASKING Same shape as the six month band and for the same reason: three cards is a shop and this is an answer. Green rather than orange, because this one is not about time having passed. */ .up{margin:22px 0 0;padding:18px 20px;border:1px solid var(--line); border-left:3px solid var(--green);border-radius:var(--r);background:var(--warm)} .up-tag{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:var(--r); background:var(--tint-green);color:var(--green);font-size:10px;font-weight:800; letter-spacing:.09em;text-transform:uppercase} .up-h{font-family:var(--display);font-weight:900;font-size:18px;line-height:1.2; margin:0 0 6px;color:var(--green)} .up-b{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--gray)} /* The reassurance, quieter than the offer: it answers the question under the question, which is what happens to my customers while you are in there. */ .up-when{font-size:13px;margin:0 0 14px} .up-go{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .up-price{font-family:var(--display);font-weight:900;font-size:15px;color:var(--green)} .up-price s{font-weight:700;font-size:13px;color:var(--gray);opacity:.8} /* THE ROOM FOR EVERY FILE ----------------------- A list of what we asked for, with his files in it. The empty places are the page, so an empty place has to read as a place and not as an absence: each one carries its own way to fill it. */ /* Every class the Menu and Operations rooms once drew here -- the state line, the name, the empty note, the whole calculator, the three-then-a- fourth ways of giving us a menu -- has its own name now, in menu-room-css.js and operations-room-css.js, scoped under each room's own wrapper, in My store's own palette. Two survive here: the Menu room's own outer section still wears this bare margin, and Results still shares the note class below -- both move the day the rooms that still reach for them do. */ .mn{margin:0 0 30px} .mf-note{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--gray)} /* THE OPERATIONS ROOM The same anatomy as the documents room's slot cards, because they hold the same kind of thing, and deliberately without the one part that room has and this one must never grow: the Needed tag and its orange ring. Nothing here is owed, so nothing here is marked. */ .op-room{margin:0 0 30px} .op-facts{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:7px; font-size:13px;line-height:1.6;color:var(--gray)} .op-facts b{color:var(--green);font-weight:800;margin-right:4px} .op-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .op{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r); background:var(--warm)} /* Something in it: the same quiet green tint the documents room uses for a filled slot, and nothing louder. A room that celebrates is a room that was asking. */ .op.is-in{background:var(--tint-green);border-color:var(--tint-green)} .op-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px} .op-n{font-size:15px;font-weight:800;color:var(--green)} .op-tag{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--green);opacity:.7} .op-why{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--gray)} /* What window his files cover, read off the names the portal wrote. Absent where no file says, because a period taken from the day he uploaded is a period we made up. */ .op-covers{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--gray); font-variant-numeric:tabular-nums} .op-fs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:5px} .op-fs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:13px} .op-f{color:var(--green);font-weight:600;word-break:break-word} .op-f:hover{color:var(--orange)} .op-when{font-size:12px;color:var(--gray)} /* HIS WEEK, AS A GRID Seven rows of twenty-four squares. The shading is read against his own busiest hour and against nothing else: there is no line on this scale saying what busy should be. Five steps, because a square has to be readable at a glance and a continuous ramp is a legend nobody reads. The green deepens; it never turns red, because a quiet hour is not an alarm. */ .pk{margin:20px 0 0;padding:20px;border:1px solid var(--line);border-radius:var(--r); background:var(--warm)} .pk-t{border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums} .pk-t th{font-weight:800;color:var(--gray);font-size:10px;padding:0 3px 5px; text-align:center} .pk-t tbody th{text-align:right;padding-right:8px;white-space:nowrap} .pk-t td{width:22px;height:22px;text-align:center;border-radius:var(--r); border:1px solid var(--warm);color:var(--gray)} .pk-0{background:var(--sunken)} .pk-1{background:color-mix(in srgb,var(--green) 16%,var(--cream))} .pk-2{background:color-mix(in srgb,var(--green) 34%,var(--cream))} .pk-3{background:color-mix(in srgb,var(--green) 56%,var(--cream));color:var(--cream)} .pk-4{background:var(--green);color:var(--cream)} /* A DAY THE FILE NEVER MENTIONED Not a dead day: a day nothing was said about. Hatched rather than shaded, so it cannot be read as a quiet Monday, and the note under the grid says why it is there. */ .pk-off{background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 3px, var(--warm) 3px,var(--warm) 6px)} /* HIS REVIEWS, COUNTED A distribution and not an average: an average of 4.2 hides forty one-star reviews behind three hundred fives, and the forty are the ones worth reading. The bars carry no colour that means good or bad. */ .rv{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:5px} .rv-row{display:flex;align-items:center;gap:10px;font-size:13px} .rv-k{flex:0 0 58px;color:var(--gray);font-size:12px} .rv-bar{flex:1 1 auto;height:10px;border-radius:var(--r);background:var(--sunken); overflow:hidden} .rv-bar i{display:block;height:100%;background:var(--green)} .rv-v{flex:0 0 40px;text-align:right;font-weight:800;color:var(--green); font-variant-numeric:tabular-nums} /* WHICH ROOM A ROW OF A CHECKLIST FEEDS Quiet, under the route: a checklist that says only "send this" is a list of chores, and saying where the file goes turns the same row into what the account is for. */ .dc-room{margin:6px 0 0;font-size:12px;color:var(--gray)} /* The dish photo cell and the dish-row figures moved to menu-room-css.js, under the Menu room's own wrapper: the classes they drew here are gone. This upload button stays: no markup in the account has emitted it since the photo cell moved onto the shared dropzone component, and clearing an orphaned rule this task never touched is not this pass's to do. */ .rw-ph-go{margin:0} .rw-ph-go input[type=file]{position:absolute;width:1px;height:1px;opacity:0; overflow:hidden} .rw-ph-go label{display:inline-flex;align-items:center;padding:4px 12px; border-radius:var(--r);border:1px dashed var(--line);font-size:11px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;color:var(--gray);cursor:pointer} .rw-ph-go label:hover{border-style:solid;border-color:var(--green);color:var(--green)} .rw-ph-go input:focus-visible + label{outline:2px solid var(--orange);outline-offset:2px} /* A question drawn without its own head, where the room has already said what it is. The section keeps its key and its kind so the script that saves it finds what it always found; what goes is the heading. */ .q-bare > .q-in{margin-top:0} .dc-pickr{display:flex;align-items:center;gap:10px;margin:0 0 18px} .dc-pickr-l{font-size:12px;font-weight:700;color:var(--gray)} .dc-count{margin:0 0 18px;font-size:13px;font-weight:700;color:var(--orange)} .dc-have{margin:0 0 22px;padding:12px 16px;border-radius:var(--r);background:var(--tint-green); font-size:13px;line-height:1.55;color:var(--green)} .dc-band{margin:0 0 26px} .dc-g{margin:0 0 30px} .dc-g h2{margin:0 0 4px} .dc-g .hint{margin:0 0 14px} .dc-list{list-style:none;margin:0;padding:0;display:grid;gap:12px} .dc{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r); background:var(--warm)} /* What is already in is quieter than what is not: the page is about the places that are still empty. */ .dc.is-in{background:transparent} .dc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dc-n{font-family:var(--display);font-weight:900;font-size:15px;color:var(--green)} .dc-tag{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--gray);padding:3px 8px;border-radius:var(--r);background:var(--raise); border:1px solid var(--line)} .dc-need{color:var(--orange);border-color:var(--orange);background:var(--tint-orange)} /* The middle tag: not owed, and not merely useful. Green because it is the colour this account gives to what we do with a thing rather than to what is being asked of him. */ .dc-rec{color:var(--green);border-color:var(--lift);background:var(--warm)} /* BEING COLLECTED: what the collection brings, in its own blue, on a connected listing (fill-path.js). The same blue as the rooms' sticker. */ .dc-collecting,.op-tag.is-collecting{color:#2f6db0;border-color:#2f6db0;background:rgba(47,109,176,.10)} .op-tag.is-collecting{padding:2px 7px;border:1px solid;border-radius:4px;opacity:1} /* A documents row or a Results row the collection brings: the whole frame in its blue, as in the rooms. */ .dc.is-collecting,.op.is-collecting{border-color:rgba(47,109,176,.32); background:linear-gradient(180deg,rgba(47,109,176,.07),rgba(47,109,176,.02))} :root[data-theme="dark"] .dc.is-collecting,:root[data-theme="dark"] .op.is-collecting{ border-color:rgba(143,184,230,.35);background:linear-gradient(180deg,rgba(143,184,230,.09),rgba(143,184,230,.03))} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dc.is-collecting, :root:not([data-theme="light"]) .op.is-collecting{border-color:rgba(143,184,230,.35); background:linear-gradient(180deg,rgba(143,184,230,.09),rgba(143,184,230,.03))}} .op-grab{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--gray)} :root[data-theme="dark"] .dc-collecting,:root[data-theme="dark"] .op-tag.is-collecting{ color:#8fb8e6;border-color:#8fb8e6;background:rgba(143,184,230,.12)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dc-collecting, :root:not([data-theme="light"]) .op-tag.is-collecting{color:#8fb8e6;border-color:#8fb8e6;background:rgba(143,184,230,.12)}} /* The sentence a row needs and the others do not: an empty offers file is still an answer, advertising is skippable. Quieter than the reason, and above the fold of the route. */ .dc-note{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink)} /* The three standing facts, each opening on the words that carry it. A list and not three paragraphs: they are three separate rules and reading them as prose is reading them once. */ /* Said on every step that waits on us: whether anything is expected of him was a thing he had to work out from what was not on the page. Green, because green is what this account uses for a thing that is settled. */ .quiet-now{margin:18px 0 0;font-size:14px;font-weight:800;color:var(--green)} /* A row the validate button just refused on. The mark is on the row and not in a paragraph at the foot of the page: it is where he has to act, and it goes when he sends the file, because the page redraws. */ /* The photographs, asked on the same press as the date: one question, two answers, and a day only on the second. The date box is hidden until he says he is sending some, because a box asking when nothing is coming is a box that makes him wonder whether he answered wrong. */ .pic-list{margin:0 0 10px} /* The one date we need before we can offer any. A step of its own now, so the box is always there rather than waiting on a radio button. */ .pic-when{display:flex;margin:0 0 4px;gap:6px;flex-direction:column;max-width:22ch} /* THE SECOND ANSWER TO THE SAME QUESTION A date, or "use what I already sent". The second is a way out rather than the expected answer, so it sits under the first with a rule between them and wears the quiet button, not the green one: two buttons of equal weight would read as two things to do. */ .pic-have{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)} .pic-have .win-go{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0} .pic-have .say-n{margin:0;flex:1 1 16rem;min-width:0} .dc.is-owed{border-color:var(--orange);box-shadow:0 0 0 3px var(--tint-orange)} /* And a question the validate button just refused on, marked the same way: the mark is where he has to act, not in a line at the foot of fifty questions. It goes when the page redraws, which is when he has sent. */ .q.is-owed{border-color:var(--orange);box-shadow:0 0 0 3px var(--tint-orange)} /* And a decision with no answer, when the send button refuses on it. Same mark as the other two: the page has one way of saying "this one". */ /* The two shortcuts, where the list starts. Quiet buttons: they are a way of filling the list in, not a way of finishing it, and the thing that finishes it is green and in the bar at the foot. */ .all-do{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px} .all-n{font-size:13px;color:var(--gray);max-width:46ch} .d.is-owed{border-color:var(--orange);box-shadow:0 0 0 3px var(--tint-orange)} .dc-facts{margin:12px 0 0;padding:0 0 0 18px;max-width:68ch;font-size:13px; line-height:1.6;color:var(--gray)} .dc-facts li{margin:0 0 6px} .dc-facts strong{color:var(--ink);font-weight:800} /* The two group headings on the page where he is the one exporting, and the line that closes it. */ .dc-pane .door-cap{margin:26px 0 6px} .dc-pane .dc-end{margin:18px 0 0;max-width:68ch} .dc-why{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--gray)} /* Where to find it, folded away: it is four lines of somebody else's menus and it is only wanted by the person who is about to go and look. */ .dc-where{margin:9px 0 0} .dc-where summary{font-size:12px;font-weight:700;color:var(--green);cursor:pointer} .dc-where p{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:var(--gray)} .dc-ms{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .dc-m{padding:10px 12px;border-radius:var(--r);background:var(--raise); border:1px solid var(--line)} .dc-m.is-in{background:transparent} .dc-m-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .dc-m-n{font-size:13px;font-weight:700;color:var(--green)} /* A COUNTDOWN, NOT A REMINDER Ninety days after the first of a month that month cannot be pulled by anybody, us included. Saying when it closes is the truest thing on this page and the only one that makes somebody act today. */ .dc-when{font-size:11.5px;color:var(--gray)} .dc-hot{color:var(--orange);font-weight:700} .dc-in{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--yes)} .dc-fs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px} .dc-f{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:12.5px} .dc-name{color:var(--green);font-weight:700} .dc-span{color:var(--gray);font-size:11.5px} .dc-us{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--gray)} /* HOW TO REACH US One card a channel, in the order they answer: what is fastest first, and the one that carries a whole thread last. Each says what it is for before it says what to press, because choosing between three ways to reach somebody is the question, and pressing is not. */ .ct-list{display:grid;gap:14px;margin:22px 0 26px} .ct{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r); background:var(--warm)} .ct-tag{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:var(--r); background:var(--tint-green);color:var(--green);font-size:10px;font-weight:800; letter-spacing:.09em;text-transform:uppercase} .ct:first-child .ct-tag{background:var(--hot);color:var(--hot-ink)} .ct-h{font-family:var(--display);font-weight:900;font-size:18px;line-height:1.2; margin:0 0 6px;color:var(--green)} .ct-b{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--gray)} .ct .go{margin:0} .pf-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0 0 6px} .pf-head h1{margin:0} .role-tag{display:inline-block;padding:4px 11px;border-radius:var(--r); background:var(--tint-green);color:var(--green);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;white-space:nowrap} /* THE PROFILE Three cards, each named and each saying what it is for, rather than one long column of labels with a heading dropped in every third one. Fields two to a row where two fit, which is what turns a form into a page. */ .pf{margin:18px 0 0} .pf-card{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:20px 22px 22px;margin:0 0 14px} .pf-card-h h2{font-family:var(--display);font-weight:900;font-size:17px;margin:0; letter-spacing:-.01em} .pf-card-h p{margin:3px 0 16px;font-size:13px;line-height:1.5;color:var(--gray)} .pf-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;align-items:start} @media(max-width:640px){.pf-fields{grid-template-columns:1fr}} .pf-f{min-width:0} .pf-wide{grid-column:1/-1} /* The field's own label, and not the labels of the chips inside it: this rule turned every chip into a block and left the chip's own box 26px tall with its pill overflowing it. */ .pf-f>label,.pf-lab{display:block;margin:0 0 6px;font-size:12px;font-weight:700; letter-spacing:.01em;text-transform:none;color:var(--gray)} .pf-f input{width:100%;font:inherit;padding:10px 13px;border:1px solid var(--line); border-radius:var(--r);background:var(--sunken);color:var(--green)} .pf-f input:focus-visible{outline:none;border-color:var(--green)} .pf-fixed{margin:0;padding:10px 0;font-size:15px;font-weight:700;color:var(--green); word-break:break-all} .pf-hint{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--gray)} .pf-hint.pf-no{color:var(--no)} .pf-photo-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px} .pf-ava{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--sunken)} .pf-ava.is-blank{display:inline-block} .pf-ava.is-square{border-radius:10px} .pf-tick{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gray)} .pf-show{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:6px} /* His LINE (line.js): a card of its own under the form, its own small forms. */ .pf-line-steps{margin:0 0 10px;padding-left:20px;display:grid;gap:10px;font-size:15px} .pf-line-f{margin:0} .pf-line-events{display:grid;gap:8px;margin:0 0 6px;justify-items:start} .pf-line-ok{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--yes)} .pf-line-un{min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:13px;color:var(--gray);text-decoration:underline;cursor:pointer} .pf-show legend{padding:0;margin-bottom:6px} .pf-read{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px} .pf-read dt{color:var(--gray);font-size:12px;font-weight:700;padding-top:2px} .pf-read dd{margin:0;color:var(--green);font-weight:700} .pf-actions{display:flex;justify-content:flex-end;margin:4px 0 0} /* The same weight as the rest of the page rather than the weight of a landing strip: it is the end of a form, not the point of it. */ .pf-actions .do{font-size:14px;padding:9px 20px} .pf-f textarea{resize:vertical;min-height:76px} .pf-f textarea:focus-visible{outline:none;border-color:var(--green)} /* A set to pick from, not a column of boxes. The box is over the chip and invisible rather than absent, so the keyboard still finds it. */ .chips{display:flex;flex-wrap:wrap;gap:8px} /* WHICH SOMEWHERE ELSE Under the countries and inside the same field, because it is the rest of that answer and not a new question. Set in, so it reads as belonging to the chip above it. */ .xx{margin:14px 0 0;padding:12px 14px;border-left:2px solid var(--line)} .xx[data-off]{display:none} .xx-lab{display:block;margin:0 0 8px} .xx-lines{display:grid;gap:8px;max-width:340px} .xx-add{margin-top:10px} .chip{position:relative;display:inline-flex;margin:0} .chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0; cursor:pointer} /* Small enough that seventeen of them are a set rather than a wall, and still tall enough to press: 13px on 7 and 13 comes out at 34, which is what a filter chip is everywhere else. line-height is set because as a flex item the span makes its own line box, and without it the chip came out 28 tall with the text sitting proud of it. */ .chip span{padding:7px 13px 7px 29px;line-height:1.35;border-radius:var(--r); border:1px solid var(--line);background:var(--raise);font-size:13px;font-weight:600; color:var(--green);transition:background-color .15s ease,border-color .15s ease, color .15s ease} .chip:hover span{border-color:var(--green)} /* A CHOSEN ANSWER IS THE ACCENT, EVERYWHERE A tint of the state colour and a ring drawn in it, the same two-part answer My store's own panel already gives an edited field: the row barely moves, the mark is what says picked. */ .chip input:checked+span{background:var(--tint-orange);border-color:var(--orange); color:var(--green)} .chip input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px} .chip-wide span{padding:9px 16px 9px 33px;font-size:14px} /* THE MARK ON A THING THAT IS PICKED, THE SAME RING EVERY FORM DRAWS IT WITH NOW Colour alone said it and colour alone was not enough: on a set of seventeen, filled and not filled is a difference somebody has to hold in his head while he reads the next one. A ring keeps its room whether it is filled or not, so picking one never moves the words in the ones beside it -- unfilled and outlined at rest, filled solid the moment it is picked, exactly the mark My store's own panel already draws when a card opens. */ .chip span,.opt-b,.cf-option{position:relative} .chip span::before{content:"";position:absolute;top:calc(50% - 7px);left:13px; width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line); background:var(--raise);transition:background-color .15s ease,border-color .15s ease, box-shadow .15s ease} .chip input:checked+span::before{border-color:var(--orange);background:var(--orange); box-shadow:inset 0 0 0 3px var(--raise)} .chip-wide span::before{left:16px} /* SEVERAL ANSWERS ARE BOXES, ONE ANSWER IS A RING (Mathieu, 1 October) A round mark reads as a radio button, a single choice, on a question that takes several. A checkbox chip draws a square with rounded corners, as My store's own panel already does. */ .chip:has(input[type=checkbox]) span::before{border-radius:4px} .opt-b::before,.cf-option::before{content:"";position:absolute; top:calc(50% - 6px);width:5px;height:9px;border:solid currentColor; border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0; transition:opacity .15s ease} /* The period and the tab in Results are picked the same way, so they say so the same way. */ .rs-p,.rs-tab{position:relative} .rs-p::before{left:13px} .rs-tab::before{left:14px} .rs-p::before,.rs-tab::before{content:"";position:absolute;top:calc(50% - 5px); width:4px;height:8px;border:solid currentColor;border-width:0 2px 2px 0; transform:rotate(45deg);opacity:0;transition:opacity .15s ease} .rs-p.on::before,.rs-tab.on::before{opacity:1} .opt-b::before{left:19px} .cf-option::before{left:19px;top:calc(50% - 7px)} .opt-b.on::before,.cf-option.sel::before{opacity:1} h2{font-family:var(--display);font-weight:900;font-size:19px;margin:30px 0 8px; letter-spacing:-.01em} .lede,.hint{color:var(--gray);margin:0 0 18px} .hint{font-size:14px} /* Two answers that are one line each, on one line where there is room for two. An address and a name asked one under the other is a form that looks longer than it is. */ .j-two{margin-top:18px;display:grid;gap:14px} .j-two label{margin-top:0} /* The note about one of the two answers, under that one and not under both of them. Under the pair it read as a note about the pair. */ .j-two .hint{margin:6px 0 0;font-size:12px} @media(min-width:620px){.j-two{grid-template-columns:1fr 1fr;gap:0 16px}} /* THE PATH Where he came from, in the page rather than in the bar: it grows with the depth and a bar has three zones that must not move. Quiet, because it is the way back and never the thing to press. */ .tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 16px; font-size:13px;font-weight:700} .tr-a{color:var(--gray)} .tr-a:hover{color:var(--green)} .tr-sep{color:var(--ink-soft);font-weight:400} /* The chevron is its own target, so the name stays a link to the page and the arrow beside it opens the list. One control that did both would make somebody choose between going back and looking sideways. */ .tr-pick{position:relative;display:inline-flex;margin-left:-2px} .tr-pick > summary{list-style:none;cursor:pointer;display:flex;align-items:center; padding:3px 4px;border-radius:var(--r);color:var(--gray)} .tr-pick > summary::-webkit-details-marker{display:none} .tr-pick > summary:hover{background:var(--warm);color:var(--green)} .tr-panel{position:absolute;top:calc(100% + 4px);left:-8px;z-index:50; width:max-content;min-width:180px;max-width:min(320px,calc(100vw - 32px))} .tr-panel .who-link.on{background:var(--warm);color:var(--green)} .crumb{margin:0 0 14px;font-size:13px} .crumb a,.out a{color:var(--gray)} .fixture{font-size:12px;font-weight:700;color:var(--orange);margin:0 0 14px} .warn{background:var(--warm);border-left:3px solid var(--orange);padding:10px 14px; border-radius:0 var(--r) var(--r) 0;margin:0 0 18px} .card{background:var(--warm);border-radius:var(--r);padding:20px} label{display:block;font-size:12px;font-weight:700;color:var(--gray);margin-bottom:6px} /* ONE FIELD, ONE HEIGHT Everything somebody types into or picks from is the same box: the same font, the same padding, the same corner. A form where the select is two points taller than the input beside it is a form that looks assembled rather than drawn, and it was. The ground is --raise and not --cream. A field the colour of the page it sits on needs a border to exist, and that border is what somebody called heavy; a field lifted off the page is legible with a hairline, or with none at all where the shape is already obvious. */ input[type=email],input[type=text],input[type=number],input[type=date], input[type=password],input[type=tel],input[type=url],select,textarea{ width:100%;font:inherit;font-size:14px;line-height:1.45;padding:9px 12px; border:1px solid var(--line);border-radius:var(--r);background:var(--raise); color:var(--green)} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none; border-color:var(--green);box-shadow:0 0 0 3px var(--tint-green)} /* The form somebody fills in before he is anybody. It exists twice: as the plain form, which is what he gets with no script, and as the card below, which asks the same questions one at a time and writes the answers into it. The plain one gets air between its parts rather than a card per question. */ /* The form's own field labels, which are its direct children. Not the labels inside a set of choices: those are rows in a grid, and eighteen points of top margin on some of them and none on the first of its type is what staggered two columns that were meant to line up. */ .join > label{margin-top:18px} .join > label:first-of-type{margin-top:0} .join .hint{margin:6px 0 0;font-size:13px} .join-h{font-family:var(--display);font-size:16px;margin:26px 0 0} .narrow{max-width:120px} .opt-tag{font-weight:400;text-transform:none;letter-spacing:0;color:var(--gray)} .ticks{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px} /* Two to a row where there is room for two. Eight countries in one column is a page of scrolling to answer one question; on a phone it stays one, because two 15px rows side by side there is two truncated rows. */ @media(min-width:620px){.ticks.two{grid-template-columns:1fr 1fr;gap:6px 10px}} /* A code and a number are one answer, so they sit on one line. The code takes what it needs and the number takes the rest. */ .pair,.cf-pair{display:flex;gap:8px;align-items:stretch} .pair select,.cf-pair select{flex:0 0 auto;width:auto;max-width:46%} .pair input,.cf-pair input{flex:1 1 auto;min-width:0} /* EVERY SELECT ON EVERY PAGE The native control draws its own arrow, in its own grey, at its own size, in a well shaped differently from the box beside it. appearance:none takes all of that away and this puts back one arrow, ours, from a token so it follows the theme: a data URI cannot say currentColor, so the only way it can be themed is to be part of the theme. Eleven points and set in ten: an arrow is a hint about what the box does, and at thirteen it was competing with the word it points at. The right-hand padding is its room. Without it a long option runs underneath it. */ select{padding-right:32px;cursor:pointer;appearance:none;-webkit-appearance:none; background-image:var(--sel-arrow);background-repeat:no-repeat; background-position:right 10px center;background-size:11px} select:hover,input:hover,textarea:hover{border-color:var(--ink-soft)} /* THE LIST, DRAWN RATHER THAN ASKED FOR The native popup is drawn by the operating system in its own blue with its own corners and no rule reaches it, so the script next door builds one and this is what it looks like. The real select is still there and still what posts: it is only out of sight. The wrapper carries the select's own classes, so a rule that gave the select its width still gives it to the control that replaced it. */ .ls{position:relative;width:100%} .ls-real{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px; padding:0;border:0;margin:0} /* Two classes on purpose. This is a button and it lives inside form.card, whose own rule paints a button the deep green of a submit: one class loses to one class and two elements, and the control came out looking like the thing that sends the form. */ .ls .ls-b{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;margin:0;font:inherit;font-size:14px;font-weight:400;line-height:1.45; padding:9px 12px;border:1px solid var(--line);border-radius:var(--r); background:var(--raise);color:var(--green);cursor:pointer;text-align:left} .ls .ls-b:hover{background:var(--raise);border-color:var(--ink-soft)} .ls .ls-b:focus-visible,.ls .ls-b[aria-expanded="true"]{outline:none; background:var(--raise);border-color:var(--green);box-shadow:0 0 0 3px var(--tint-green)} .ls-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The arrow turns over when the panel is down, which is the one thing the native control never told anybody. */ .ls-c{flex:0 0 auto;opacity:.7;transition:transform .15s ease} .ls-b[aria-expanded="true"] .ls-c{transform:rotate(180deg)} /* The same panel the notification and account menus drop: one shadow, one corner, one ground, so a list that falls out of a field looks like it belongs to this account and not to the machine it is read on. */ .ls-p{position:absolute;z-index:40;top:calc(100% + 5px);left:0;min-width:100%; max-height:min(280px,50vh);overflow:auto;list-style:none;margin:0;padding:5px; background:var(--raise);border:1px solid var(--line);border-radius:var(--r); box-shadow:0 14px 34px rgba(0,0,0,.16)} .ls-o{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r); font-size:14px;line-height:1.35;color:var(--green);cursor:pointer;white-space:nowrap} .ls-o:hover,.ls-o:focus{outline:none;background:var(--warm)} /* What is chosen is marked by a tick and a wash of the account's own green, not by a block of the system's blue. The tick's room is kept on every row, so choosing another one does not move the words sideways. */ .ls-o[aria-selected="true"]{font-weight:700;background:var(--tint-green)} .ls-t{flex:0 0 auto;opacity:0} .ls-o[aria-selected="true"] .ls-t{opacity:1} .pair .ls,.cf-pair .ls{flex:0 0 auto;width:auto;max-width:46%} /* The list the browser drops open is the one thing here it still draws itself. It cannot be styled, but it can be told which palette to draw in, so a dark page does not open a white list. */ select option{background:var(--raise);color:var(--green)} /* A row that is a target: the whole line takes the click, not the 13px box at the start of it. */ /* SOMETHING TO PICK, NOT SOMETHING TO TICK A bare checkbox with a word after it is the browser's own drawing with our text beside it, and it looks like exactly that. The whole row is the card instead: our ground, our corner, our line, and the picked ones fill with the account's own green so a set of eight says at a glance how many are in it. accent-color was the old way and it only ever coloured the fill: the size, the corner and the tick stayed the operating system's. This draws all four. */ .tick{display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px; font-size:14px;font-weight:400;line-height:1.4;color:var(--green); text-transform:none;letter-spacing:0;cursor:pointer;border-radius:var(--r); border:1px solid var(--line);background:var(--raise)} .tick:hover{border-color:var(--ink-soft)} /* :has is what lets the row answer for the box inside it. Where it is missing the box still fills and the row simply stays quiet, which is the old behaviour and not a broken one. */ .tick:has(input:checked){border-color:var(--green);background:var(--tint-green)} .tick:has(input:checked) span{font-weight:700} .tick input{appearance:none;-webkit-appearance:none;position:relative; width:16px;height:16px;flex:0 0 auto;margin:0;cursor:pointer; border:1.5px solid var(--ink-soft);border-radius:var(--r);background:var(--raise)} .tick input[type=radio]{border-radius:50%} .tick input:checked{background:var(--green);border-color:var(--green)} /* Drawn in borders rather than a glyph: a tick this small is two strokes, and two strokes are two borders on a rotated box, which needs no font and no file. */ .tick input[type=checkbox]:checked::after{content:"";position:absolute; left:4.2px;top:1px;width:4px;height:8px;border:solid var(--cream); border-width:0 2px 2px 0;transform:rotate(45deg)} .tick input[type=radio]:checked::after{content:"";position:absolute; left:3.5px;top:3.5px;width:6px;height:6px;border-radius:50%;background:var(--cream)} .tick input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tint-green)} .tick-wide{margin-top:22px;font-weight:700} /* ONE QUESTION AT A TIME The card the script puts in front of the plain form. The same shape as the one on the contact page, in this account's own colours: a thin bar for how far along he is, the question at heading size, the answers as full-width targets, and one way forward. */ .cf{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:28px 26px;max-width:620px} .cf-bar{height:4px;background:var(--line);border-radius:var(--r);overflow:hidden; margin-bottom:22px} .cf-bar-fill{height:100%;width:0;background:var(--orange);transition:width .3s ease} /* --accent-ink and not --orange: the accent at eleven point on the card's own warm ground is 4.05:1, which is under the bar for text this size. The token is the same orange taken down until it clears it. */ .cf-count{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px} /* Whether he has to answer this one, on the line that says which one it is rather than under the help text. Under it, it was a word nobody reached before answering, which is the one moment it is worth reading. */ .cf-tag{padding:3px 9px;border-radius:var(--r);letter-spacing:.1em;font-size:10px; background:var(--tint-green);color:var(--green)} /* Filled rather than tinted. The accent on its own tint is 4.06:1 at ten point, under the bar; the same orange as a fill with the light ink on it is 4.54:1 and 4.73:1, which is the pair the rail already uses. */ .cf-tag-req{background:var(--hot);color:var(--hot-ink)} .cf-q{font-family:var(--display);font-weight:900;font-size:23px;line-height:1.3; letter-spacing:-.01em;color:var(--green);margin:0 0 6px} .cf-help{font-size:14px;line-height:1.55;color:var(--gray);margin:0} .cf-field{margin-top:22px} .cf-options{display:flex;flex-direction:column;gap:8px} /* Same rule as the plain form: two to a row on a desk, one on a phone. */ @media(min-width:620px){.cf-options.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}} /* Left aligned, because a list of answers is read down its left edge. The nudge on hover is the only movement on this page and it is what says these are pressable rather than printed. */ .cf-option{display:block;width:100%;text-align:left;font:inherit;font-size:15px; font-weight:600;color:var(--green);background:var(--raise);border:1px solid var(--line); border-radius:var(--r);padding:14px 16px 14px 38px;cursor:pointer; transition:border-color .16s ease,background-color .16s ease,transform .16s ease} .cf-option:hover{border-color:var(--orange);color:var(--green);transform:translateX(3px)} .cf-option.sel{border-color:var(--orange);background:var(--tint-orange)} /* The one box on the card is the same box as everywhere else, one point larger: it is the only thing on the screen, so it can afford the size, and a phone that zooms a field under sixteen points is a phone that zooms this one. */ .cf-input{font-size:16px;padding:10px 13px} .cf-input:focus{border-color:var(--orange)} .cf-area{min-height:110px;line-height:1.5;resize:vertical} textarea{font:inherit} .cf-err{font-size:13px;color:var(--orange);margin:10px 0 0;min-height:18px} .cf-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px} .cf-right{display:flex;align-items:center;gap:14px} .cf-opt{font-size:12px;color:var(--gray)} .cf-back{font:inherit;font-size:14px;font-weight:700;color:var(--gray);background:none; border:0;padding:8px 0;cursor:pointer} .cf-back:hover{color:var(--orange)} .cf-back[hidden]{display:none} .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} form.card button{margin-top:14px;font:inherit;font-size:13px;font-weight:700; padding:10px 18px;border:0;border-radius:var(--r);background:var(--green);color:var(--cream);cursor:pointer} .orders,.kp-list,.d-list{list-style:none;margin:0;padding:0} .order{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:15px 0; border-top:1px solid var(--line)} .o-main{flex:1 1 220px} .o-name{font-weight:700;color:var(--green)} .o-where{display:block;font-size:12px;color:var(--gray)} .o-state{flex:0 0 auto;text-align:right;display:flex;flex-direction:column; align-items:flex-end;gap:4px} /* The state as a token rather than a line of text: on a list of four orders it is the column the eye runs down, and a sentence does not read as a column. The dot carries the same information as the colour, so the three states are still told apart without seeing colour at all. */ /* Its own face, said out loud. A pill sits beside a heading as often as inside a paragraph, and a heading is set in the display face: inherited there, twelve pixels of Fraunces made "Waiting for your answers" a thing you read twice. What a pill says is a label, and labels are body. */ .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--body); font-size:12px;font-weight:700; padding:4px 11px;border-radius:var(--r);background:var(--warm);color:var(--gray); white-space:nowrap;line-height:1.35} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor; flex:0 0 auto} /* A pill that is a fact and not a state. The dot on the others means somebody is holding this; a version number is holding nothing. */ .pill-quiet{background:transparent;border:1px solid var(--line);font-size:11px; padding:3px 9px;border-radius:var(--r)} .pill-quiet::before{display:none} /* NOBODY IS HOLDING THIS Orange means he owes us something, green means we are working on it, and both say somebody has it in hand. A renovation waiting for its check-up is neither: the work is real and paid for and it has not started. Grey, and drawn as a box. The other two carry their own wash, which is what makes them read as objects; grey on the warm the card already stands on is grey on grey, and the pill lost its edges. A hairline inside the box rather than a border around it, so it is the same size as the three it sits beside. */ .pill.idle{background:var(--warm);color:var(--gray); box-shadow:inset 0 0 0 1px var(--line)} .pill.you{background:var(--tint-orange);color:var(--orange)} .pill.us{background:var(--tint-green);color:var(--green)} /* Finished. The same shape as the other two so the three read as one set, and green because green is what finished means on every screen there is. */ .pill.done{background:var(--tint-yes);color:var(--yes)} .head-state{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 22px} .o-since,.badge{font-size:11px;color:var(--gray)} .badge{flex:0 0 auto;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:3px 9px;border-radius:var(--r);background:var(--tint-orange);color:var(--orange)} .badge.quiet{background:var(--warm);color:var(--gray)} .empty{color:var(--gray);padding:14px 0;border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .tabs{display:flex;gap:4px;margin:22px 0 0;border-bottom:1px solid var(--line)} .tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:11px 13px; font:inherit;font-weight:700;font-size:14px;color:var(--gray);cursor:pointer} .tabs button[aria-selected="true"]{color:var(--green);border-bottom-color:var(--orange)} /* ONE CARD PER LISTING The unit of this room is the page on the platform, not the restaurant and not the order, because one kitchen can sell under three brands. */ /* RESULTS His own numbers. Quiet: the page has to be readable at seven in the morning by somebody who is about to open a kitchen. */ /* WHICH PERIOD HE IS READING Seven days is what he just did, a year is what the business is. Same shape as the listing tabs above it, one size down: it is a lens on the page and not a second navigation. */ .rs-period{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0} .rs-p{font-size:12px;font-weight:700;padding:6px 13px 6px 27px;border-radius:var(--r); border:1px solid var(--line);background:var(--sunken);color:var(--gray);text-decoration:none} .rs-p:hover{border-color:var(--green);color:var(--green)} .rs-p.on{background:var(--green);border-color:var(--green);color:var(--cream)} .rs-when{font-family:var(--body);font-size:11px;font-weight:400;letter-spacing:0; text-transform:none;color:var(--gray)} .rs-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0} .rs-tab{font-size:13px;font-weight:700;padding:7px 14px 7px 28px;border-radius:var(--r); border:1px solid var(--line);background:var(--sunken);color:var(--green);text-decoration:none} .rs-tab.on{background:var(--green);border-color:var(--green);color:var(--cream)} .rs-head{margin:22px 0 0} /* WHAT HE KEPT The one number the platform never puts on a screen, so it gets the size the platform gives to sales. */ .rs-keep{background:var(--warm);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0; padding:14px 18px;margin:0 0 16px} .rs-keep-line{margin:0;font-size:17px;color:var(--green)} .rs-keep-line strong{font-size:24px;font-family:var(--display);letter-spacing:-.01em} .rs-keep-note{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--gray)} .rs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px} .rs-cell{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:12px 14px;min-width:0} .rs-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--gray)} .rs-val{display:block;margin-top:4px;font-family:var(--display);font-weight:900;font-size:22px; line-height:1.1;color:var(--green);word-break:break-word} .rs-note,.rs-hint{display:block;margin-top:4px;font-size:11px;line-height:1.5;color:var(--gray)} /* The refusals are not small print: they are the reason to believe the rest of the page. */ .rs-refuse{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--line); font-size:13px;line-height:1.55;color:var(--gray)} .rs-source{margin:8px 0 0;font-size:11px;color:var(--gray)} .rs-entry{margin:30px 0 0} .rs-block{margin:0 0 18px} .rs-screen{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-ink)} .rs-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px} .rs-field{display:block;margin:0;font-size:12px;font-weight:700;color:var(--gray); text-transform:none;letter-spacing:0} .rs-field em{font-style:normal;font-weight:400} .rs-field span{display:block;margin-bottom:5px} .rs-field input{width:100%;font:inherit;font-size:15px;padding:9px 12px; border:1px solid var(--line);border-radius:var(--r);background:var(--sunken);color:var(--green)} .rs-wide{grid-column:1/-1} .rs-up{margin:10px 0 0;font-size:13px} .rs-funnel,.rs-trend,.rs-levers{margin:30px 0 0} .rs-bars{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px} .rs-bars li{display:flex;align-items:center;gap:12px;font-size:13px} .rs-bar-lab{flex:0 0 34%;color:var(--gray);min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .rs-bar{flex:1 1 auto;height:12px;background:var(--line);border-radius:var(--r);overflow:hidden} .rs-bar span{display:block;height:100%;background:var(--green);border-radius:var(--r)} .rs-bar-n{flex:0 0 auto;font-weight:700;color:var(--green)} .rs-bar-n em{font-style:normal;font-weight:400;color:var(--gray)} /* TWELVE WEEKS A column per week. The hatched ones are the weeks that carried something, and they are hatched rather than missing: a chart somebody can tidy is a chart that agrees with him. */ .rs-cols{list-style:none;margin:14px 0 0;padding:0;display:flex;align-items:flex-end; gap:6px;height:150px} .rs-col{flex:1 1 0;min-width:0;height:100%;position:relative;display:flex; flex-direction:column;justify-content:flex-end;align-items:center} .rs-col-bar{display:block;width:100%;background:var(--green);border-radius:var(--r) var(--r) 0 0} .rs-evt .rs-col-bar{background:repeating-linear-gradient(45deg,var(--ink-soft), var(--ink-soft) 3px,transparent 3px,transparent 6px)} .rs-col-lab{margin-top:5px;font-size:10px;color:var(--gray)} /* His own change, on the week it landed. */ .rs-tick{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:7px;height:7px; border-radius:50%;background:var(--orange)} .rs-why{list-style:none;margin:10px 0 0;padding:0;font-size:12px;color:var(--gray)} .rs-season{margin:6px 0 0;font-size:12px;color:var(--gray)} .rs-lever-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px} .rs-lever{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:12px 16px} .rs-lever-what{display:block;font-weight:700;color:var(--green);font-size:14px} .rs-lever-n{display:block;margin-top:2px;font-family:var(--display);font-size:18px; color:var(--green)} .rs-lever-why{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--gray)} .rs-add{margin:30px 0 0} /* THE FIRST SCREEN An example, drawn from numbers that are nobody's and marked as nobody's: hatched, the same hatching a week with something in it wears, so the one pattern on this page always means "do not read this as a fact". */ .rs-demo{margin:22px 0 6px;max-width:520px} .rs-demo .rs-cols{height:110px;opacity:.5} .rs-demo-tag{margin:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--gray)} .rs-need{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .rs-need li{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:16px 18px} .rs-need-t{display:block;font-weight:700;color:var(--green);font-size:15px} .rs-need-h{display:block;margin-top:6px;font-size:13px;line-height:1.55;color:var(--gray)} .rs-need-w{display:block;margin-top:8px;font-size:13px;font-weight:700;color:var(--accent-ink)} /* FOLDED Six panels open at once is the page he was afraid of. Six sentences with a triangle beside them is a page, and each sentence already carries the answer he came for. */ .rs-fold{margin:12px 0 0;background:var(--warm);border:1px solid var(--line); border-radius:var(--r)} .rs-fold>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px; padding:14px 18px;cursor:pointer;list-style:none} .rs-fold>summary::-webkit-details-marker{display:none} .rs-fold>summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--gray); border-bottom:2px solid var(--gray);transform:rotate(-45deg);margin-right:4px;flex:0 0 auto; transition:transform .15s ease} .rs-fold[open]>summary::before{transform:rotate(45deg)} .rs-fold>summary:hover{color:var(--green)} .rs-fold-t{font-family:var(--display);font-weight:900;font-size:16px;color:var(--green)} .rs-fold-s{font-size:13px;color:var(--gray)} .rs-fold-b{padding:0 18px 18px} .rs-fold-b .quiet-h:first-child{margin-top:0} /* THE GUIDANCE UNDER THE BOX Under the box and not in it. Above the field it is read before the question is understood; inside the frame it reads as part of the question. Out here the frame holds the question and the answer, and this is what he looks down at. */ .cf-out{max-width:620px;margin:14px 0 0;padding:0 2px} .cf-out > :first-child{margin-top:0} .cf-under{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--gray)} .cf-eg{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--gray);font-style:italic} /* --warm and not --cream: out of the card, the block sits on the page's own cream and a cream block on cream is a border and nothing else. */ .cf-where{margin:14px 0 0;padding:14px 16px;background:var(--warm);border-radius:var(--r); border:1px solid var(--line)} .cf-where-t{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--accent-ink)} .cf-where ol{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--gray)} .cf-where li{margin:0 0 4px} /* A choice with its consequence written under it, so the two paths are compared before one is taken rather than after. */ /* On a choice that carries its consequence under it, the mark belongs on the first line and not halfway down the block. */ .cf-tall{display:block;text-align:left} .cf-tall::before{top:19px} .cf-opt-t{display:block} .cf-opt-n{display:block;margin-top:4px;font-size:12px;font-weight:400;line-height:1.5; color:var(--gray)} .cf-option.sel .cf-opt-n{color:var(--gray)} /* The files he has added, and one way to add another. */ .cf-files{padding:2px 0} .cf-flist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} .cf-flist li{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--sunken); border:1px solid var(--line);border-radius:var(--r);font-size:13px} .cf-fname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-weight:600;color:var(--green)} .cf-fsize{flex:0 0 auto;font-size:12px;color:var(--gray)} .cf-fnone{color:var(--gray);border-style:dashed;justify-content:center} .cf-add{font:inherit;font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--r); border:1px dashed var(--line);background:transparent;color:var(--green);cursor:pointer} .cf-add:hover{border-color:var(--green);border-style:solid} .cf-many{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .rs-import{margin:16px 0 0} .rs-import input[type=file]{display:block;width:100%;font-size:14px;color:var(--gray); padding:10px 0} .rs-check,.rs-spread,.rs-campaign{margin:30px 0 0} /* The one line on this page that is allowed to be good news, because it is a fact and not an interpretation. */ .rs-ok{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--yes); font-size:14px;color:var(--green)} .rs-flags{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:13px} .rs-flags li{display:flex;gap:12px;align-items:baseline} .rs-flags span{color:var(--gray)} .rs-flags em{font-style:normal;font-weight:700;color:var(--no)} .pgs{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:14px} .pg{background:var(--warm);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px} /* The name, what is waiting, and then the platform pushed to the far end: which platform this listing is on is a label on the card rather than a line under its name, where it read as a second title. */ .pg-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px} /* WHICH RUNG THE CARD IS, WHERE THE ROOM HOLDS MORE THAN ONE The platform's own sticker, in the product's own colour. Same shape, because a second shape for a second short fact is a second thing to learn. The colour is the family's, never the green: green is the brand and means finished, and a check-up in green said a check-up was over. */ /* THE WINDOWS WE CAN KEEP The account's own chip, the one the remarks and the questionnaire use: three windows are three choices, and a choice looks like this here. Wrapping rather than a row, because a window is a sentence and three of them do not fit across a phone. */ .win-list{margin:14px 0 0} .win-go{margin:16px 0 0} /* .pg-carry was the line under a road that starts half walked. The road starts at Check-up delivered now, one green station saying the check-up is in here and done, and a paragraph explaining a picture is a picture that did not work. */ .pg-lvl{padding:3px 9px;border-radius:var(--r);background:var(--warm); color:var(--gray);font-size:11px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} /* THE THREE FAMILIES ------------------ Who does the work, in a colour: plum we read it, bronze we build it, blue we keep it running. The depth is how far up the family he has gone. Written once and worn by the three things that NAME a product: the rung on a card, the mark in the rail, the line over an offer. Never by anything that carries a STATE. The road stays green, the waiting pill stays orange, the button stays the button: a colour that means "this is an Account Renovation" must not also be able to mean "this is finished" or "this needs you", or it means neither. */ .t-look-1{color:var(--look-1)} .t-look-2{color:var(--look-2)} .t-build-1{color:var(--build-1)} .t-build-2{color:var(--build-2)} .t-keep-1{color:var(--keep-1)} .t-keep-2{color:var(--keep-2)} .pg-lvl.t-look-1{background:var(--look-1-w)} .pg-lvl.t-look-2{background:var(--look-2-w)} .pg-lvl.t-build-1{background:var(--build-1-w)} .pg-lvl.t-build-2{background:var(--build-2-w)} .pg-lvl.t-keep-1{background:var(--keep-1-w)} .pg-lvl.t-keep-2{background:var(--keep-2-w)} .pg-plat{margin-left:auto;padding:3px 9px;border-radius:var(--r);background:var(--warm); color:var(--gray);font-size:11px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;white-space:nowrap} .pg-name{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.01em; color:var(--green)} .pg-where{margin:2px 0 0;font-size:13px;color:var(--gray)} .pg-past{margin:12px 0 0;font-size:12px;color:var(--gray)} .pg .do{margin:4px 0 0;font-size:14px;padding:10px 18px} /* THE ROAD Four steps along a line. In the dark theme --green is the light ink, so filling the done half with it drew a white bar across the card and the road shouted louder than the card it was on. The line is the hairline colour, the part behind him is the soft ink, and the only strong mark on it is the ring around where he is. */ /* The road needs room on both sides of it. Set tight, the name of the listing above and the doors below read as one block with a diagram in the middle of it. */ .steps{list-style:none;display:flex;margin:46px 0 26px;padding:0 0 22px} /* TWO LINES OF ROOM AND THE DATE'S OWN LINE A label that wraps used to make its card's road taller than the two beside it, so the row of cards moved as he progressed. The room is reserved on the STATION rather than on the label: held on the label, the date underneath was pinned below a second line that was usually empty, which is the gap that room was never meant to be. Twenty above the first line, two lines of twelve at 1.35, and the date. */ .st{flex:1 1 0;min-width:0;position:relative;padding-top:20px;text-align:center; font-size:12px;line-height:1.35;color:var(--gray);min-height:72px} /* Bold on every station, not only the one he is standing on. The current one is told apart by the orange dot and its halo, which says more than a weight does, and one bold label among five read as a heading over four captions rather than as five steps of one road. */ .st-name{display:block;font-weight:700} .st::before{content:"";position:absolute;top:6px;left:0;right:50%;height:1px; background:var(--line)} .st::after{content:"";position:absolute;top:6px;left:50%;right:0;height:1px; background:var(--line)} .st:first-child::before,.st:last-child::after{display:none} /* The count beside the step it is about, one size down and in the second ink: it is a detail of where he is and not a second place to be. */ /* Taken out of the flow, and the road keeps the room for it whether it is there or not. In the flow it made the one card that had a count taller than the cards beside it, so two roads that are the same road were drawn at two different heights. */ /* Under its own label rather than under the station's box. Pinned to the bottom of that box, a one-line name hung its date a whole unused line below itself: the room reserved for a second line is not a gap to put something in. In the flow, and never bold: the name is the fact, the date is when it happened. */ .st-of{display:block;margin-top:1px; font-size:11px;font-weight:400;color:var(--gray)} .st-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px; border-radius:50%;background:var(--raise);border:1.5px solid var(--line);z-index:1} /* WHERE HE IS ON THE ROAD Four dots in one grey said nothing: done, doing and not yet were the same colour, so the road was a decoration rather than an answer. Three states, and they differ in fill and not only in shade. Walked is solid ink; where he is now is the accent with a halo round it, which is the one thing on the road that moves the eye; ahead is hollow. The line into a step is walked when the step is reached, and the line out of it only when the step is done, which is what makes the road stop where he stopped. */ .st-done .st-dot{background:var(--green);border-color:var(--green)} .st-done::before,.st-done::after{background:var(--green)} .st-done{color:var(--green)} .st-now{color:var(--green)} .st-now .st-dot{width:14px;height:14px;border-width:0;background:var(--orange); box-shadow:0 0 0 4px var(--tint-orange)} /* The road into where he is has been walked. The road out of it has not. */ .st-now::before{background:var(--green)} @media(max-width:560px){ .steps{display:block} .st{padding:0 0 12px 26px;text-align:left} .st::before,.st::after{left:6px;right:auto;width:1px;height:50%} .st::before{top:0} .st::after{top:50%} .st-dot{top:2px;left:0;transform:none} .st-now .st-dot{left:-1px} } /* THREE DOORS The short version, the whole thing, and the decisions. The first is the one most people read and the only one some of them need, so it is filled and the other two are outlines. */ /* WHEN WE GO IN The most reassuring sentence on the page, so it is given the room a sentence like that needs rather than a date in the corner. Green rule at the left, which is this account's mark for something settled. */ .win{margin:14px 0 0;padding:12px 16px;background:var(--tint-green); border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0} .win-when{margin:0;font-size:15px;font-weight:700;color:var(--green)} .win-why{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--gray)} /* .win-soon was the promise that we agree a window before touching anything, written out in prose under a road that did not mention the step. The road has a station for it now. */ /* .pg-one and .pg-solo were the room with one listing in it: no box, a column 640 wide, its own name line. The room has one shape now whatever is in it, so both are gone rather than left behind as two class names nothing writes, which is how a stylesheet starts arguing with itself. */ /* WHAT OPENS THIS ROAD The one card in the account with nothing on it to press. So it is given the weight the doors usually carry: its own ground, a rule down the left in the colour of something not yet started, and room to breathe. Not a tinted panel: a tint is an accent, and an accent on the one thing that is NOT happening is the opposite of what it should say. */ .pg-wait{margin:18px 0 0;padding:16px 18px 14px;background:var(--warm); border-left:3px solid var(--lift);border-radius:0 var(--r) var(--r) 0} .pg-wait .door-cap{margin:0 0 6px} .pg-wait-h{margin:0 0 8px;font-family:var(--display);font-weight:900;font-size:17px; line-height:1.3;letter-spacing:-.01em;color:var(--green)} .pg-wait .hint{margin:0 0 8px;max-width:68ch} .pg-wait-go{margin:12px 0 0;font-size:13px;font-weight:700} .pg-wait-go a{color:var(--green);text-decoration:none; border-bottom:1px solid var(--lift)} .pg-wait-go a:hover{color:var(--accent-ink);border-bottom-color:currentColor} /* Putting a finished order away. The last thing on the card and the quietest: a rule above it to separate it from the doors, the note in the page's ordinary hint voice, and the button in the same quiet shape as every other button that commits to nothing. Once pressed it is a date, because a thing that has been done should say so. */ .pg-file{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)} .pg-file .door-cap{margin:0 0 6px} .pg-file .hint{margin:0 0 10px;max-width:68ch} .pg-file-go{margin:0} .pg-filed{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line); font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--gray)} /* THE WAYS INTO A REPORT Four solid blocks in a row was four buttons of equal weight and no hierarchy: nothing said which one to press, and three of the four are not buttons at all. They are ways into one document, and the fourth makes paper. So they are cards. A name, a line under it saying what is behind it, and a mark on the right that says what pressing does. What is recommended carries an accent rule and a word, not a fill: filling one of four is how you make one loud, and loud is not the same as first. */ /* What each group of doors is for, over it. Two things to do and one thing to read afterwards, said in two words rather than left to the order they happen to be in. */ .door-cap{margin:18px 0 8px;font-size:10px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--gray)} .doors{display:grid;gap:10px;margin:0; grid-template-columns:repeat(auto-fit,minmax(216px,1fr))} /* One card does not stretch to the width of two: a card as wide as the page is a banner. */ .doors-one{grid-template-columns:minmax(0,min(50%,340px))} /* THE OPENING IS A LIST, NOT A CHOICE Three things in an order, so they stack rather than sit side by side: a row of three cards is three options, and a column of three numbered ones is a list. */ .doors-list{grid-template-columns:minmax(0,1fr)} .door-n{display:inline-block;min-width:22px;color:var(--gray);font-weight:800} /* NOT HIS TURN YET Quieter, not disabled looking: the step is coming, it is not refused. No hover and no pointer, because it is not a link and must not look like one. */ .door-lock{opacity:.55;cursor:default} .door-lock .door-t{color:var(--gray)} /* BEHIND HIM, AND NOT A LINK Full strength, because it happened: what it loses is the hover and the pointer, since there is nothing behind it to open. */ .door-shut{cursor:default} /* WHY IT IS NOT A DOOR ANY MORE A step that goes grey answers one question and opens another, and it should not cost a second thing to notice and press on a card whose whole message is that there is nothing to press. The card answers: the pointer on it, or the keyboard, and the line is there. Kept out of the layout entirely, so a card is the same height whether it has one or not and the row does not shift as the pointer crosses it. */ .door-tip{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20; padding:11px 13px;border-radius:var(--r);border:1px solid var(--line); background:var(--canvas);color:var(--green);font-family:var(--body);font-size:12.5px; font-weight:400;line-height:1.55;letter-spacing:0;text-align:left; box-shadow:0 12px 28px rgba(0,0,0,.14); opacity:0;visibility:hidden;transform:translateY(-3px); transition:opacity .12s ease,transform .12s ease,visibility .12s} .door-shut:hover .door-tip,.door-shut:focus .door-tip, .door-lock:hover .door-tip,.door-lock:focus .door-tip{ opacity:1;visibility:visible;transform:translateY(0)} /* Hovering a card that has nothing to say must not look like hovering one that does, and neither of them is a door. */ .door-shut:focus-visible,.door-lock:focus-visible{outline:2px solid var(--orange); outline-offset:2px} /* GIVING US THE KEYS ----------------- One screen and four fields, and the whole of it turns on one string. So the steps are numbered, the address is the only thing on the page set in a monospace box, and what we can and cannot do with it is under them. */ .ac-steps{list-style:none;counter-reset:none;margin:20px 0 0;padding:0;display:grid; gap:18px} .ac-steps > li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px; align-items:start} .ac-n{grid-column:1;width:26px;height:26px;border-radius:50%;background:var(--green); color:var(--cream);font-family:var(--display);font-size:13px;font-weight:900; display:flex;align-items:center;justify-content:center;line-height:1} .ac-say{grid-column:2;font-size:14.5px;line-height:1.6;color:var(--green)} .ac-say strong{font-weight:700} /* A string he types exactly, inside a sentence. */ .ac-say code,.q-help code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em;font-weight:600;padding:1px 5px;border-radius:var(--r); background:var(--warm)} /* The address, and the one control on the page that is not a link. Set in a monospace face because it is a string to copy exactly, and the difference between an l and a 1 is the difference between an invitation we get and one nobody ever sees. */ .ac-mail{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:9px; margin:11px 0 0} .ac-addr{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px; font-weight:600;padding:10px 13px;border-radius:var(--r);border:1px solid var(--line); background:var(--raise);color:var(--green);word-break:break-all} .ac-copy{font:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em; height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r);border:0;background:var(--green); color:var(--cream);cursor:pointer} .ac-copy.is-done{background:var(--warm);color:var(--green)} .ac-mine{grid-column:2;margin:8px 0 0} /* What we will and will not do with them, which is the half of this page that decides whether he presses anything at all. */ .ac-safe{list-style:none;margin:22px 0 0;padding:16px 18px;border-radius:var(--r); background:var(--warm);display:grid;gap:10px} .ac-safe > li{font-size:13.5px;line-height:1.55;color:var(--green)} .ac-safe strong{font-weight:700} .door-go-lock{opacity:.7} .door-done .door-n{color:inherit;opacity:.55} /* What we do once his three are in. A paragraph and not a list, because it is one thing and it is ours. */ .then-us{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--gray)} /* PRINTING WHAT IS SHOWING Quiet, and quiet on purpose: the green is what says a thing leaves or closes, and a green print button makes taking a copy away the same promise as sending us his decisions. Then the green means nothing anywhere. */ .pr-go{font:inherit;font-size:13px;font-weight:700;height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--r); border:1px solid var(--line);background:var(--raise);color:var(--gray);cursor:pointer} .pr-go:hover{border-color:var(--green);color:var(--green)} /* The same button, in the bar. Below .pr-go for the reason .bar-do is below .do: a button is inline-block until something says otherwise, and the something has to be written later or the mark falls onto the baseline. On the two tabs there is nothing to commit to, this is the page's one action, so it sits where every other page's one action sits. */ .bar-pr{display:inline-flex;align-items:center;gap:7px;font-size:12px;height:36px;padding:0 13px} .bar-pr .go-i{flex:0 0 auto;opacity:.8} .bar-pr:hover .go-i{opacity:1} /* WHAT GOES ON PAPER The room and nothing around it. The two panels he is not looking at are already hidden, so what prints is the one he asked for. */ @media print{ .app{display:block;height:auto;overflow:visible} .col-side,.col-main > .chrome,.tabs,.dock,.fin,.foot{display:none} .col-main{overflow:visible} .shell{max-width:none;padding:0} main{max-width:none;padding:0} body:has(.app){height:auto;overflow:visible} a[href]::after{content:""} } .door{position:relative;display:grid;grid-template-columns:1fr auto; align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r); border:1px solid var(--line);background:var(--raise);color:var(--green); text-decoration:none;transition:border-color .15s ease} .door:hover{border-color:var(--green)} .door-t{display:block;font-family:var(--display);font-weight:900;font-size:14px; line-height:1.25;letter-spacing:-.01em} .door-s{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--gray); font-family:var(--body);font-weight:400;letter-spacing:0} /* The chevron leans in on hover rather than the card moving: the row of cards holds still and the one under the pointer answers. */ .door-go{grid-row:1/-1;grid-column:2;color:var(--gray);opacity:.7; transition:transform .15s ease,opacity .15s ease} .door:hover .door-go{opacity:1;transform:translateX(2px)} /* Recommended, said in a rule and a word. */ .door-first{border-left:3px solid var(--orange);padding-left:14px} .door-tag{display:block;margin-bottom:5px;font-size:9px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)} /* WHAT IS ALREADY BEHIND HIM It keeps its place in the row: a door that vanishes the moment it is done leaves him wondering whether he did it. Quieter than the ones still his, and the tick is green because green is finished on every screen. */ .door-done{background:transparent;border-style:dashed} .door-done .door-t{color:var(--gray)} .door-done svg{color:var(--green);opacity:1;grid-row:1/-1;grid-column:2} .door-done:hover{border-color:var(--gray)} /* Said once, over the pair: they are not a queue. */ .door-both{margin:-4px 0 9px;font-size:12px;color:var(--gray)} /* He has done it, on the page that asked him to. */ .did{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13px; font-weight:700;color:var(--green)} /* The one that makes paper is not a way in, so its mark is not a chevron. */ .door-print .door-go{transform:none} .door-print:hover .door-go{transform:none;opacity:1} .count{font-weight:400;opacity:.7} .toc{background:var(--warm);border-radius:var(--r);padding:14px 18px;margin:0 0 24px} .toc ol{margin:0;padding-left:20px;columns:2;column-gap:24px;font-size:13px} .toc li{margin:3px 0;break-inside:avoid} .toc a{color:var(--green);text-decoration:none} .sec{margin:0 0 28px;scroll-margin-top:16px} .sec h3{font-size:17px;margin:24px 0 10px} .sec h4{font-size:13px;margin:16px 0 6px;color:var(--gray);letter-spacing:.06em; text-transform:uppercase} .sec p{margin:0 0 12px} blockquote{margin:0 0 14px;padding:10px 16px;border-left:3px solid var(--orange); background:var(--warm);border-radius:0 var(--r) var(--r) 0;color:var(--gray)} .prose-list{margin:0 0 14px;padding-left:22px} .tw{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r)} .tw table{border-collapse:collapse;width:100%;font-size:13px} .tw th,.tw td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line); white-space:nowrap} .tw th{background:var(--warm);font-size:11px;letter-spacing:.05em;text-transform:uppercase; color:var(--gray)} .kp,.d{display:flex;gap:12px;align-items:flex-start;padding:12px 0; border-top:1px solid var(--line)} .kp-theme{flex:0 0 30%;font-size:12px;font-weight:700;color:var(--gray)} .kp-title,.f-title{flex:1 1 auto} .f-ref{flex:0 0 auto;min-width:34px;font-size:11px;font-weight:700;color:var(--gray); font-variant-numeric:tabular-nums;padding-top:2px} .d-text{flex:1 1 auto;display:flex;gap:12px;align-items:flex-start} /* HOW BADLY IT MATTERS, ON A FINDING It was called chip, which is what a control somebody presses is called everywhere else in this account, and this rule sits further down the sheet: on the report page every form chip was being drawn as a severity tag, uppercase and pill shaped and with its tick gone. */ .sev{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:3px 8px;border-radius:var(--r);white-space:nowrap} .sev-high{background:var(--tint-orange);color:var(--orange)} .sev-medium,.sev-low{background:var(--warm);color:var(--gray)} .yn{flex:0 0 auto;display:flex;gap:6px} .yn button{font:inherit;font-size:12px;font-weight:700;height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0 13px;border-radius:var(--r); border:1px solid var(--line);background:var(--sunken);color:var(--gray);cursor:pointer} .d[data-choice="accept"] .btn-yes{background:var(--green);border-color:var(--green);color:var(--cream)} .d[data-choice="reject"] .btn-no{background:var(--orange);border-color:var(--orange);color:var(--cream)} .opts{display:flex;flex-wrap:wrap;gap:8px} .opt{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line); border-radius:var(--r);padding:5px 12px;cursor:pointer} .opt.on{border-color:var(--green)} .g h3{font-size:15px;margin:22px 0 8px;display:flex;align-items:baseline;gap:9px} .g-code{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px; padding:0 6px;border-radius:var(--r);background:var(--warm);color:var(--gray);font-size:11px;font-weight:700} .g-src{margin-left:auto;font-size:11px;font-weight:400;color:var(--gray)} /* THE PLAN'S OWN PARAGRAPHS ABOVE ITS DECISIONS (setup) The argument reads as the report does, on the page's own background; the group's one-line ask sits under it in the green, then the lines. */ .g-plan{padding-top:8px} .g-why{margin:10px 0 14px;max-width:68ch} .g-why p{margin:0 0 12px;line-height:1.6} .g-why .tw{margin:0 0 12px} .g-more{display:inline-block;font-size:13px;font-weight:600;color:var(--green); text-decoration:underline;text-underline-offset:3px} .g-ask{margin:0 0 12px;padding:12px 14px;border-left:3px solid var(--green); background:var(--raise);border-radius:0 8px 8px 0;font-weight:600; color:var(--green-deep);max-width:68ch} .note{display:block;margin:14px 0 0} .note span{font-size:12px;font-weight:700;color:var(--gray);margin-bottom:5px;display:block} .note textarea{ border:1px solid var(--line);background:var(--sunken);color:var(--green);resize:vertical} .todo{margin:0 0 30px} .todo h2{margin:0 0 6px} /* A short ask keeps the card; the questionnaire outgrew it at twelve questions, where a tinted box stops reading as "act on this" and starts reading as "the rest of the page". */ .todo.short{background:var(--warm);border-radius:var(--r);padding:20px 22px} /* THE QUESTIONNAIRE One question, its reason, and the shape of its own answer. The question is set in the display face because it is a heading: what was here before was a bold line of body copy, which at twelve of them reads as a list of labels rather than as twelve things being asked. */ .todo-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:23px} .qs{border-top:1px solid var(--line);margin:16px 0 0} /* THE NUMBER ON A RANKED CHIP The order he pressed them in, written where he pressed. A tick would say "this one" and the whole question is "this one, and then this one": the number is the answer, so it is the loud part. */ .chip-n{display:none} .chip-on .chip-n{display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;margin-right:1px;padding:0 4px;border-radius:var(--r); background:var(--orange);color:var(--cream);font-size:11px;font-weight:800; font-variant-numeric:tabular-nums} /* WHAT A NUMBER IS IN A food cost in a bare box is a number whose currency we have to guess, and a phone number with no dialling code cannot be rung from anywhere but his own country. Written in front of the box, quiet, inside the same frame so the two read as one control rather than as a label and a field. */ .q-unit{display:flex;align-items:stretch;border:1px solid var(--line); border-radius:var(--r);background:var(--raise);overflow:hidden} .q-unit i{display:flex;align-items:center;padding:0 9px;font-style:normal; font-size:13px;font-weight:700;color:var(--gray);background:var(--warm); border-right:1px solid var(--line);white-space:nowrap} .q-unit .q-i{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:transparent} /* A month and a year, two lists side by side (intake-form.js). */ .q-monthyear{display:flex;gap:8px;max-width:420px}.q-monthyear select{flex:1 1 0;min-width:0} .q-unit:focus-within{border-color:var(--gray)} /* THE QUESTION IS THE HEADING AND THE ANSWER IS UNDER IT Never beside it. A label to the left of its field is read as a caption and costs an eye movement per question; over the field it is read as a question and the answer lands where the eye already is. The optional ones used to carry a class named opt, which is a chip elsewhere in this stylesheet: every optional question was drawn as an inline flex box with a border round it, which is where the frame came from and why the question, the reason and the fields sat in three columns. */ .q{display:block;padding:30px 0;border-bottom:1px solid var(--line)} .q-lab{margin:0;display:flex;align-items:baseline;font-family:var(--display); font-size:17px;font-weight:900; line-height:1.3;letter-spacing:-.01em;color:var(--green)} /* The label takes the room the mark and the number leave, and wraps inside it rather than pushing the mark off the line. */ .q-lab .q-name{flex:1 1 auto} .q-req .q-lab::after{content:" *";color:var(--orange)} /* THE WORD ON WHICHEVER SIDE IS RARE (SEE q.tag, fields-room.js) Plain small text, not the bold sticker .q-free already is elsewhere on this page (the drop box, a part's own tag): those mark the same fact on every one of a handful of parts, where a sticker reads as a badge. Here it says the word ONCE per field, next to a name it would otherwise repeat on every field if it fired for the common side instead of the rare one, so it reads as a note rather than a stamp. */ .q-tag{margin-left:9px;font-style:normal;font-weight:500;font-size:11px; letter-spacing:normal;text-transform:none;color:var(--gray)} /* The number in front of the question. Grey and a size down, because it is an address rather than part of the sentence: what it is for is the line at the bottom that says which question is still empty. */ .q-n{display:inline-block;min-width:26px;color:var(--gray);font-size:15px; font-weight:800} /* HIS OWN DOCUMENTS, ON THE ORDER The cards are the documents room's cards. What is here is the box that holds them where the road says it is his turn. */ .dc-pane{margin-top:6px} /* SENDING A FILE, IN ONE BOX ------------------------- It was two controls side by side, both of them saying Add a file. This is one: a box to drop into or click, the name of what was picked, the button that sends it, and the line that says it went. Nothing here is a second way of doing something the account already does; it is the one place a file enters. */ .dz{margin:12px 0 0;display:block} /* Off the page, not display:none: hidden that way it cannot be focused and the label stops being a control for anybody on a keyboard. */ .dz-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* EMPTY IS THE GROUND IT SITS ON, FULL IS PAPER A dashed outline on the card's own colour is the shape everybody has learned for "put something here", and the box going white the moment something is in it is the other half of that convention: it stops being an outline waiting to be filled and starts being a thing holding something. */ .dz-box{display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer; border:1px dashed var(--line);border-radius:var(--r);background:transparent; transition:border-color .12s ease,background .12s ease} .dz-box:hover{border-color:var(--green);background:var(--raise)} .dz-file:focus-visible + .dz-box{outline:2px solid var(--orange);outline-offset:2px} .dz.is-over .dz-box{border-color:var(--orange);border-style:solid;background:var(--raise)} .dz.is-full .dz-box{border-style:solid;border-color:var(--green);background:var(--raise)} .dz-i{flex:0 0 auto;color:var(--gray)} .dz.is-full .dz-i,.dz-box:hover .dz-i{color:var(--green)} .dz-say{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px} /* The name of a file is not ours to wrap: it goes on one line and is cut. */ .dz-t{font-size:14px;font-weight:700;color:var(--green);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* What just happened, beside the box it happened in and not at the foot of the page. Green when it went, orange when it did not: the same two meanings those colours carry everywhere else here. */ .dz-note{margin:9px 0 0;font-size:13px;font-weight:700} .dz-note.is-good{color:var(--green)} .dz-note.is-bad{color:var(--orange)} @media (max-width:520px){ .dz-box{flex-wrap:wrap} .dz-say{flex:1 0 100%;order:2} } .dc-pane .dc-list{margin-top:22px} .dc-all{margin-top:22px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline} /* OPTIONAL IS AN ANSWER TO A QUESTION HE IS ASKING Set as four grey letters beside a heading it was invisible, and a person filling in twelve questions wants to know which of them he can skip before he reads them. A sticker, like every other short fact in this account. */ .q-free{display:inline-block;font-style:normal;font-weight:800;font-size:9px; letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin-left:9px; padding:3px 8px;border-radius:var(--r);background:var(--warm);vertical-align:3px} .q-sub .q-free{vertical-align:1px;margin-left:7px} /* What is worth reading twice inside what is said once. */ .q-help strong{color:var(--green);font-weight:700} /* Why we are asking, under the question and not inside the box: it is ours to say, and his to answer. */ .q-help{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--gray);max-width:60ch} .q-in{margin-top:12px} .q-i,.q-t{width:100%;font:inherit;font-size:14px;padding:9px 11px;border-radius:var(--r); border:1px solid var(--line);background:var(--raise);color:var(--green)} .q-t{resize:vertical} .q-i:focus,.q-t:focus{outline:none;border-color:var(--green)} .q.saved .q-i,.q.saved .q-t{border-color:var(--ink-soft)} .q.failed .q-i,.q.failed .q-t{border-color:var(--orange)} .q-other{margin-top:9px} /* TWO SHORT FIELDS BELONG SIDE BY SIDE A name is half a line wide and so is the name beside it. Stacked, a group of four short answers is four rows of white space with a word in each, and the page is twice as long as what it asks for. Which parts pair is decided question by question rather than by a rule about widths: two names pair, a name and a list of twelve months do not. */ .q-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 18px;align-items:start} /* The sentence under a field goes under the field. It used to sit between the label and the box, which pushed that box below the one beside it: two fields on one line that did not line up, for a reason that had nothing to do with either of them. Under the control it also stays visible while he types, and it is where an error would appear. */ .q-part{grid-column:1/-1;min-width:0} .q-under{margin:6px 0 0;font-size:12px;line-height:1.5} .q-part.q-half{grid-column:span 1} @media (max-width:700px){ .q-parts{grid-template-columns:minmax(0,1fr)} .q-part.q-half{grid-column:1/-1} } .q-sub{display:block;font-size:13px;font-weight:700;color:var(--green);margin-bottom:7px} /* Said once over a list that takes several answers, with a mark in front of it so it reads as a note about the list rather than as a line of the question. The mark is drawn here: it is punctuation, not words. */ .q-many{display:flex;align-items:center;gap:7px;margin:0 0 8px; font-size:12.5px;color:var(--gray)} .q-many::before{content:"i";flex:none;display:inline-flex;align-items:center; justify-content:center;width:17px;height:17px;border-radius:var(--r); background:none;border:1px solid currentColor;color:inherit; font-family:var(--display);font-weight:900;font-size:11px;line-height:1} /* One class each and the last one wins, which is why the sentence under a field stayed glued to it through three attempts to move it: this rule is two classes, it outranks both, and it was written when the help sat above the control rather than under it. */ .q-part .q-under{margin:6px 0 0} /* A LINE HE ADDS TO One entry is one line, with the column names over the first of them, which is where a table puts its heads. The names are written on every line and drawn on the first: nothing is repeated in the markup, the input carries its own name for a screen reader, and on a phone, where the line becomes a stack, every name comes back. The widths are the table's and not the line's, carried on the list as --cols, so a dish gets the room a dish needs and a price gets what three digits need. */ .rows{display:grid;gap:9px} .rw{display:grid;grid-template-columns:var(--cols,minmax(0,1fr) auto); gap:10px;align-items:end} .rw-c{min-width:0} .rw-m{display:block;font-size:9px;font-weight:800;letter-spacing:.09em; text-transform:uppercase;color:var(--gray);margin-bottom:5px} .rw:not(:first-child) .rw-m{display:none} /* A control that cannot do anything is not drawn. Hidden rather than gone, so the columns still line up under their heads. */ .rw-x{align-self:end;font:inherit;font-size:17px;line-height:1;width:34px;height:36px; padding:0;border:1px solid var(--line);border-radius:var(--r);background:transparent; color:var(--gray);cursor:pointer} .rw-x:hover{border-color:var(--orange);color:var(--orange)} .rw:only-child .rw-x{visibility:hidden} /* A phone is one column, and there a line is a stack that needs its names back. */ @media (max-width:700px){ .rw{grid-template-columns:minmax(0,1fr);gap:8px} .rw .rw-m{display:block} .rw-x{justify-self:start;width:auto;padding:0 12px} } /* The room's side panel is as narrow as a phone (Mathieu, 9 October, the review: "Dishes to push or drop" squeezed its dish box to nothing beside the two choices): there too a line is a stack, its names back, a rule between lines. */ .ms-panel .rw{grid-template-columns:minmax(0,1fr);gap:8px} .ms-panel .rw .rw-m{display:block} .ms-panel .rw-x{justify-self:start;width:auto;padding:0 12px} .ms-panel .rw + .rw{padding-top:12px;border-top:1px solid var(--line)} /* THE STAR ON A LINE OF THE MENU A checkbox, because that is what it is: one tap, on or off, and the same height as the boxes beside it so the line does not bend around it. Filled when it is on, outlined when it is not, and the outline is what tells him it is something he may press rather than a mark we have put there. */ /* ACCEPTING A THEME, FROM ITS OWN HEADING Pushed to the far end of the line the group is named on, quiet, so it reads as something offered about this group rather than as a third answer competing with the two on every line under it. */ /* THE RUNG ABOVE THE ONE HE HAS, LEADING One card, the width of the room, above the shelf. The grid it sits in is the same grid: a second layout for one card would be a second way of drawing a product card, and the difference here is how much room it gets rather than what it is. */ .offers-lead{grid-template-columns:minmax(0,1fr);margin-bottom:6px} /* The sentence under it, which is the honest reason the next rung is cheap in effort. Set apart from the card and from the shelf below, quiet: it is a fact about how we work, not a second pitch. */ .of-carry{margin:0 0 26px;font-size:14px;line-height:1.6;color:var(--gray); padding-left:14px;border-left:2px solid var(--orange)} .g-all{margin-left:auto;font:inherit;font-size:13px;font-weight:700; height:36px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:var(--r); background:transparent;color:var(--gray);cursor:pointer;white-space:nowrap} .g-all:hover{border-color:var(--yes);color:var(--yes)} .g h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* WHAT THE QUESTIONNAIRE ALREADY ANSWERED, AND WHAT HE TOLD US HE HAS NOT Both are the same shape: a line saying this box is not waiting on him, set apart from the description above it so it does not read as one more sentence about the file. */ .dc-said{margin:8px 0 0;padding:9px 12px;border-radius:var(--r); background:var(--tint-green);color:var(--green);font-size:13px;line-height:1.5} .dc-none{margin:10px 0 0} /* A FILE WE COULD NOT USE The same shape as the covered line above it and the opposite colour, because it is the same kind of sentence: this row is not in the state you think it is. Orange and not red: nothing is broken and nothing is lost, there is one file to fetch again, and the account has no red. */ .dc-failed{margin:8px 0 0;padding:9px 12px;border-radius:var(--r); background:var(--tint-orange);color:var(--green);font-size:13px;line-height:1.5} .dc-failed strong{color:var(--orange)} /* And the row it is on, marked the way an owed row is marked, so a page of fourteen rows says where to look before anything is read. */ .dc.is-failed{border-color:var(--orange);box-shadow:0 0 0 3px var(--tint-orange)} /* WHEN WE ARE PAST THE DATE WE GAVE Under the sentence that no longer carries one. Quiet, and in the account's own green rather than in a warning colour: it is us saying something honest about ourselves, not an alarm about his order. */ .pg-late{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--gray); padding-left:14px;border-left:2px solid var(--orange)} .rw-star{display:flex;align-items:center;justify-content:center; width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r); color:var(--gray);cursor:pointer;background:transparent} .rw-star:hover{border-color:var(--orange);color:var(--orange)} .rw-star input{position:absolute;opacity:0;width:0;height:0} .rw-star:has(input:checked){border-color:var(--orange);color:var(--orange); background:color-mix(in srgb,var(--orange) 10%,transparent)} .rw-star:has(input:checked) svg{fill:currentColor} .rw-star:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px} @media (max-width:700px){ .rw-star{width:auto;padding:0 14px;justify-self:start} } /* Said once, under the table, the first time he goes past the cap. It is not a refusal of the questionnaire: nothing here blocks the button. */ .rw-cap{margin:8px 0 0;font-size:13px;color:var(--orange)} /* THE ROOMS' FIGURES IN RESULTS: a section title and its line above each block moved in from Menu and Operations. */ .rs-from{margin:48px 0 0} .rs-from-h{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.25; color:var(--green);margin:0 0 6px} .rs-from-sub{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--gray);max-width:70ch} /* A label given a row's height (evenLabels in intake-form.js) keeps its words at the bottom, next to its box. */ .q-part > .q-sub[style*="min-height"]{display:flex;flex-wrap:wrap;align-items:flex-end; align-content:flex-end} /* A part's small print, under its answers (the asterisk on a choice). */ .q-foot{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--gray)} .rw-add{margin:10px 0 0;font:inherit;font-size:13px;font-weight:700;padding:8px 14px; border:1px dashed var(--line);border-radius:var(--r);background:transparent; color:var(--green);cursor:pointer} .rw-add:hover{border-color:var(--green);border-style:solid} /* THE WEEK, A ROW A DAY The same line as a row of the menu table: a label, the boxes, and one control at the end. It is not a .rw, because a row of the week has a fixed three columns where a row of a table has as many as the table has and carries a head above the first one. Same gap, same heights, same border, so the two read as one family. No backticks in here, ever: this sheet is one template literal, and one in a comment ends it. That is the fifth time in this repo. */ /* ONE GRID FOR THE WHOLE TABLE The week and the line above it were seven grids and an eighth, each sizing its own columns: the pair at the top never stood over the pairs below it. One grid now, the rows are its lines, and the three columns are decided once for all of them. */ .hrs{display:grid;grid-template-columns:minmax(96px,auto) max-content max-content; gap:8px 10px;align-items:center} .hr{display:grid;grid-template-columns:subgrid;grid-column:1 / -1; gap:10px;align-items:center} @supports not (grid-template-columns: subgrid) { .hrs{display:grid;grid-template-columns:1fr;gap:8px} .hr{grid-template-columns:minmax(96px,1fr) auto auto} } /* And the line that fills the week is marked off from the days it fills: its own ground, a hairline under it, and room to breathe. */ /* The frame reaches past the table on both sides, so what is inside it stands over the days below: a box that indents its own contents puts its pair a dozen pixels off the pairs it fills. */ .hr-all{padding:12px;margin:8px -12px 14px;border-radius:var(--r); background:var(--raise);border:1px solid var(--line)} .hr-d{font-size:14px;font-weight:700} .hr-t{display:flex;align-items:center;gap:8px} /* A WIDTH THAT DOES NOT DEPEND ON THE HOUR A time box sized to its contents is one width empty and another with 04:04 in it, so every box on the table moved when he set one of them. Wide enough for the longest thing it can hold, and fixed. */ .hr-t .q-i{width:7.5em;min-width:7.5em;text-align:center} .hr-to{font-style:normal;font-size:13px;color:var(--gray)} /* Closed and not Open: the common case is a shop open every day, so the form costs that man nothing and only the exceptions need a press. A day he has shut keeps its times on the page, greyed, because he will want them back the week he opens on a Monday again. */ /* On the same line as the times, centred on them (Mathieu, 7 October: it stood three points above them, lifted by a label's own margin and the checkbox's). */ .hr-x{display:flex;align-items:center;gap:7px;margin:0;align-self:center;font-size:13px;color:var(--gray); cursor:pointer;white-space:nowrap} .hr-x input{width:16px;height:16px;margin:0;accent-color:var(--orange);cursor:pointer} .hr[data-shut] .hr-d{color:var(--gray)} .hr[data-shut] .hr-x{color:var(--orange)} .hr .q-i:disabled{opacity:.45;cursor:not-allowed} /* A phone is one column, and the day's name is the head of the stack. */ @media (max-width:560px){ .hr{grid-template-columns:minmax(0,1fr);gap:6px; padding-bottom:10px;border-bottom:1px solid var(--line)} .hr:last-child{border-bottom:0;padding-bottom:0} .hr-t .q-i{flex:1} } /* A TABLE HE PICKS LINES INTO Seven networks drawn as chips on every line is a table wider than the page, and the answer to "which one" is a list you pick from once. So the list is under the table, the line it makes says which network it is, and the only thing left on the line is the link. */ .rw-pick{display:block;margin:10px 0 0;max-width:340px} /* THE NETWORKS AS BUTTONS, AND "NONE" APART FROM THEM A row of small pills, each adding its line; the only answer under them, quieter, since it closes the question rather than adding to it. A line holding the only answer has no link to ask for. */ .rw-picks{margin:12px 0 0} .rw-picks .pf-lab{display:block;margin:0 0 8px} .rw-pick-row{display:flex;flex-wrap:wrap;gap:8px} .rw-pick-b{font:inherit;font-size:14px;font-weight:600;padding:9px 14px;border-radius:999px; border:1px solid var(--line);background:var(--raise);color:var(--green);cursor:pointer; transition:border-color .15s,background-color .15s} .rw-pick-b:hover{border-color:var(--green)} .rw-pick-only{margin-top:10px;border-style:dashed;color:var(--gray);font-weight:500} .rw-pick-only:hover{color:var(--green)} .rw:has(> .rw-c input[value="none"]) > .rw-c[data-col="link"]{visibility:hidden} .rw-pick .pf-lab{display:block;margin:0 0 5px} .rw-pick select{width:100%} /* The name of the thing, on the line it made: a label and not a control, because changing it is taking the line out and picking again. Sized and set like the boxes beside it so the row reads as one row. */ .rw-p{display:block;padding:11px 0;font-size:14px;font-weight:700;color:var(--green); white-space:nowrap} /* Nothing picked yet draws nothing: a template is not rendered, so a table holding only the line to come has no line in it. */ /* A CONTROL WITH ITS NAME BESIDE IT */ .set-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 0} .set-k{font-size:13px;font-weight:700;color:var(--green)} /* HOW TO ANSWER IT, BEFORE THE FIRST QUESTION In a box, because it is the only thing on the page that is about the whole page. Quiet, though: the box at the foot is the one that asks him to do something, and two boxes shouting is one box nobody reads. */ .q-intro{margin:14px 0 0;padding:13px 16px;border-radius:var(--r);background:var(--warm); font-size:13.5px;line-height:1.6;color:var(--green)} .q-intro strong{font-weight:700} /* And the half of it that is not an instruction, outside the box, where a sentence somebody may act on or ignore belongs. */ .q-most{display:flex;gap:9px;align-items:flex-start;margin:11px 0 0;font-size:12.5px; line-height:1.55;color:var(--gray)} .q-most .q-end-i{flex:0 0 auto;width:15px;height:15px;margin-top:1px;color:var(--gray)} /* THE ONE SENTENCE ON THE PAGE THAT IS AN INSTRUCTION Everything above it is a question. This is the thing he has to do with the answers, and set as another grey line under the last one it was the line that gets skipped by somebody who has just finished. Orange, because the account has one colour for what is his to do. */ .q-end{display:flex;gap:11px;align-items:flex-start;margin:26px 0 0;padding:14px 16px; border-radius:var(--r);border:1px solid var(--line);border-left:3px solid var(--orange); background:var(--tint-orange);font-size:13.5px;line-height:1.55;color:var(--green)} .q-end-i{flex:0 0 auto;margin-top:1px;color:var(--orange)} .miss{color:var(--orange);font-size:13px;font-weight:700} #q-count{font-weight:400} #q-count.ready{font-weight:700;color:var(--green)} /* THE PRIMARY BUTTON ------------------- inline-block, and it matters: as an anchor this is an inline box, and vertical padding on an inline box does not push the line apart. It overlapped the line above it wherever a link version of this button followed a block, which is what it does under every step rail. Three things and no more, all of them pointing the same way: lit from above by half a step of its own colour, a hairline along the top edge where the light lands, and a shadow under it in its own hue rather than in black. A flat rectangle of #093822 with a word on it is a coloured word; the same rectangle lit is something a hand expects to move. THE SHADOW IS THREE LAYERS, NEVER ONE A single 2px shadow is a smudge; a shape sitting on a surface casts a shadow that grows softer and wider the further it falls, in several bands at once, and never in plain black -- black under a green button reads as dirt, tinted green reads as a shadow. --do-l1/2/3 hold that tint at the right depth for the current theme (a near-black of the same hue at night, since the button's own fill is cream there and a black shadow under a cream shape has nowhere to sit); hover and the pressed state below both reuse them; only the theme itself changes them. It moves: hover raises the light and opens the shadow into three wider bands; pressing scales the whole shape down a fraction and puts the shadow inside, which reads as an object pushed rather than text that slid a pixel. Never transition: all -- background, box-shadow and scale are named, and nothing else on this element ever needs to animate. */ .do{--do-l1:hsl(152 72% 13% / .20);--do-l2:hsl(152 72% 13% / .14); --do-l3:hsl(152 72% 13% / .10); display:inline-block;font:inherit;font-size:13px;font-weight:600; letter-spacing:-.01em;padding:10px 20px;border:0;border-radius:var(--r); background:linear-gradient(180deg,var(--do-lit),var(--green)); color:var(--cream);cursor:pointer; box-shadow:inset 0 1px 0 var(--do-edge),0 1px 1px var(--do-l1), 0 2px 4px var(--do-l2),0 4px 8px var(--do-l3); transition:background 150ms ease,box-shadow 150ms ease,scale 200ms ease-out} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .do{--do-l1:hsl(152 40% 4% / .55); --do-l2:hsl(152 40% 4% / .42);--do-l3:hsl(152 40% 4% / .30)} } :root[data-theme="dark"] .do{--do-l1:hsl(152 40% 4% / .55); --do-l2:hsl(152 40% 4% / .42);--do-l3:hsl(152 40% 4% / .30)} /* The corner's own number never changes; the curve does, where the engine draws one. Chromium only, and nothing here says so: everywhere else keeps today's arc with no fallback message and no degraded baseline. */ @supports (corner-shape: squircle){.do{corner-shape:squircle}} .do[disabled]{opacity:.55;box-shadow:none} /* A CHEVRON BESIDE THE WORD, ON THE QUIET BUTTON ONLY .do itself stays inline-block, which every other user of it still wants; this button alone now carries an icon, so it alone needs the row that lines an SVG up with its own word. */ .do.is-quiet{display:inline-flex;align-items:center;gap:6px} /* THE PRIMARY IS MADE, NOT MERELY BIG (THE COLOUR PASS, PART G) An addition to .do rather than a replacement of it, so .pr-go's own icon-box plumbing and .bar-do's row layout survive untouched: this is the account's one primary whose job is "the work that remains" rather than its generic affirmative, so it wears --action's gradient instead of --green's, the same six layers .do already gives every other button -- fill, inner edge, top highlight, a tinted drop shadow, nothing on hover but the glow, an inner shadow on press. The gradient starts at the token and only darkens downward: lightening the top the way every source suggests puts white at 4.34 over it, under the threshold this pass measured before writing a single value here. */ .do.made{background:linear-gradient(180deg,var(--action),#A54B0B); box-shadow:inset 0 0 0 1px #7E3907,inset 0 1px 0 rgba(255,255,255,.26), 0 1px 2px hsl(24 82% 38% / .28),0 3px 10px hsl(24 82% 38% / .16)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .do.made{ background:linear-gradient(180deg,var(--action),#D2712A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.30)} } :root[data-theme="dark"] .do.made{ background:linear-gradient(180deg,var(--action),#D2712A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.30), 0 1px 2px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.30)} @media(hover:hover){ .do.made:hover{background:linear-gradient(180deg,var(--action),#A54B0B); filter:saturate(1.06) brightness(1.04)} } .do.made:active{background:#9A450A;box-shadow:inset 0 0 0 1px #7E3907, inset 0 2px 3px rgba(0,0,0,.22)} /* THE MARK'S OWN SIDE GIVES UP A LITTLE PADDING .bar-do's tick sits before the word; the side it is on reads as crowded at the same padding the wordless button uses. */ .do.bar-do{padding-left:15px} /* THE SAME BUTTON, IN THE BAR --------------------------- It is the account's own primary button and nothing else: the look lives on .do above, so the button that finishes the questionnaire and the button that buys a rebuild are the same object. What the bar adds is only what a bar needs, which is a mark beside the word and a row the two of them sit in. Below .do and not above it, and that is the whole rule rather than a tidying: .do says display:inline-block, this says display:inline-flex, both are one class, so the one written later wins. Written first, this button was never a row at all. The mark and the word fell back to sitting on a shared baseline, which puts the middle of a fifteen pixel square three pixels above the middle of the word beside it, and no amount of redrawing the mark moves it. The mark keeps to the left whatever it means. The bar is right aligned, so a mark on the right would sit against the window with the word floating off it, and the one button whose word changes as he types would jump every time the mark changed with it. */ .bar-do{display:inline-flex;align-items:center;gap:7px} .bar-do .go-i{flex:0 0 auto;opacity:.9} /* A box of its own for the mark that changes as he types, so the word beside it does not shift by a pixel when a tick becomes an arrow. */ .bar-do .go-m{display:inline-flex;align-items:center;justify-content:center; flex:0 0 auto;width:15px;height:15px;opacity:.9} .bar-do[disabled]{opacity:.5} /* THE BAR AT THE FOOT OF EVERY PAGE --------------------------------- It was a fixed green strip that only two pages carried, laid over everything including the rail: the last room in the rail could not be reached because the bar was standing on it. It is a row of the shell now, under both columns, so nothing is covered and nothing needs padding to make room for it. And it is quiet: a strip of solid green across the bottom of every page shouts at a man who is reading, and the green is worth more where it means press this. What is always in it is what somebody needs to change about the page itself: how big the words are, whether it is light or dark, and which language it is in. What the page adds sits on the right. */ /* ONE HEIGHT, NAMED ONCE It used to take its height from whatever was tallest inside it -- .do's own 41px box, mostly -- so a page with an action was ten points taller than a page without one. 56px is that same measure, said as the bar's own property instead of a side effect of what happens to be in it. */ .dock{grid-column:1/-1;position:relative;height:56px;display:flex;align-items:center; gap:16px;padding:0 18px 0 12px;padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line);background:var(--chrome);color:var(--ink-muted); font-size:12px;font-weight:700} .dock-tools{display:flex;align-items:center;gap:8px;min-width:0} /* THE WORK, ON THE RIGHT The status sentence, then the quiet button, then the loud one: the reading path ends on the primary action, which is what "at the end of the reading path" is for. Two groups (the preferences on the left, the work on the right) keep 16px or more between them; inside this one the sentence and the two buttons keep 14px, which is closer than that but still more than a group's own inner 8px, since three things reading left to right are not each other's neighbours in the same sense the preference row's icon and label are. */ .dock-acts{margin-left:auto;display:flex;align-items:center;gap:14px;min-width:0} /* HOW BIG THE WORDS ARE Two letters of the size they make. The content only: the bar and the rail stay where they are, so the button does not move out from under the finger that is pressing it. */ /* The same pill as the theme beside it, because it is the same kind of thing: one of three, and which one is showing. The three A's are the sizes they make, which is the whole label anybody needs. */ .txt-b{font-family:var(--display);font-weight:900;padding:4px 8px; display:inline-flex;align-items:center;justify-content:center;min-width:24px} .txt-0{font-size:11px} .txt-1{font-size:14px} .txt-2{font-size:17px} /* Twelve percent a step is not enough for somebody who came to this control because the page was too small: at that size the first press is almost invisible, which reads as a control that does nothing. */ html[data-text="l"] main{zoom:1.2} html[data-text="xl"] main{zoom:1.4} /* What is waiting on him, and nothing else at this weight. */ .asks{margin:0 0 30px} .asks h2{margin:0 0 10px} .waiting{display:flex;align-items:center;gap:9px} .waiting svg{flex:0 0 auto;color:var(--orange)} .ask-list{list-style:none;margin:0;padding:0} .ask{margin:0 0 8px} .ask-do{display:flex;flex-direction:column;gap:2px;padding:15px 18px;border-radius:var(--r); background:var(--green);color:var(--cream);text-decoration:none} .ask-what{font-weight:700;font-size:16px} .ask-where{font-size:12px;opacity:.75} .all-clear{color:var(--gray);background:var(--warm);padding:16px 18px;border-radius:var(--r); margin:0 0 30px} /* His own words, read back. Line breaks are his, so they are kept; the rule down the left says this half of the page is him talking and not us. */ .said{margin:0 0 24px;padding:0 0 0 14px;border-left:2px solid var(--lift); color:var(--ink);line-height:1.6;max-width:68ch} .said-on{font-weight:400;color:var(--gray);text-transform:none;letter-spacing:0} /* Our half of it, under his. The green rule is the one the account uses everywhere for us talking, so the two halves are told apart by the same colour the rest of the page already means it with. */ .said-us{border-left-color:var(--green)} /* Everything below the ask is reference, not instruction. */ .quiet-h{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--gray);margin:30px 0 2px} .section-note{color:var(--gray);font-size:13px;margin:0 0 4px} .report-card{background:var(--warm);border-radius:var(--r);padding:22px;margin:0 0 30px} .report-card h2{margin:0 0 6px} .report-card .do{display:inline-block;margin-top:6px;text-decoration:none} .whats-next{margin:36px 0 0;border-top:1px solid var(--line);padding-top:10px} /* THE HOME, AS A TASK LIST ------------------------ Three groups, one order: on him, on us, done. Every token here is one the theme already carries (--green, --gray, --orange, --line, --raise, --warm, --yes, --tint-green, --cream, var(--r)); nothing new was minted for it. The primary and secondary actions are .do and .do.is-quiet, the same two objects the dock already settled on, so a client never learns a third button shape reading this page. Scoped under .home throughout: .card, .tick and .link already mean other things elsewhere in this stylesheet. */ .home{max-width:78ch} .h-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; margin:0 0 20px} .h-lede{font-size:14px;color:var(--gray);max-width:46ch;margin:0} .prog{flex:0 0 auto;text-align:right;min-width:150px} .prog-n{display:block;font-size:12px;font-weight:700;color:var(--gray); font-variant-numeric:tabular-nums} .prog-bar{display:block;margin-top:6px;height:5px;border-radius:999px;background:var(--warm); overflow:hidden} .prog-bar i{display:block;height:100%;border-radius:999px;background:var(--green)} .tgroup{display:flex;align-items:center;gap:9px;margin:26px 0 8px;font-size:10px; font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)} .tgroup:first-child{margin-top:0} .tgroup::after{content:"";flex:1 1 auto;height:1px;background:var(--line)} .tgroup .cnt{font-variant-numeric:tabular-nums;opacity:.75;letter-spacing:.04em} .home .card{background:var(--raise);border:1px solid var(--line);border-radius:var(--r); overflow:hidden} .home .task{display:flex;align-items:center;gap:13px;padding:14px 16px} .home .task + .task{border-top:1px solid var(--line)} .home .tick{flex:0 0 18px;height:18px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center} .home .tick.you{border:2px solid var(--orange)} .home .tick.you i{width:6px;height:6px;border-radius:50%;background:var(--orange); display:block} .home .tick.us{border:2px solid var(--line)} .home .tick.ok{background:var(--yes);color:var(--raise)} .home .t-txt{flex:1 1 auto;min-width:0} .home .t-title{display:block;font-size:14.5px;font-weight:700;line-height:1.3; letter-spacing:-.01em;color:var(--green)} .home .task.done .t-title{font-weight:500;color:var(--gray)} .home .t-meta{display:block;font-size:12px;line-height:1.35;color:var(--gray);margin-top:2px} .home .t-meta b{color:var(--orange);font-weight:700} .home .t-act{flex:0 0 auto} .home .link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px; border-radius:var(--r);border:1px solid var(--line);font-size:12.5px;font-weight:600; color:var(--green);text-decoration:none} .home .link:hover{background:var(--warm)} /* THE TWO ARRIVAL SCREENS: NOTHING HAS BEEN DONE YET, OR NOTHING IS LEFT Same shape for both, because both are an arrival and neither is a list: a mark, a short title, one or two sentences, and at most two presses. */ .blank{max-width:560px;margin:0 auto;text-align:center;padding:44px 24px 40px; background:var(--raise);border:1px solid var(--line);border-radius:var(--r)} .blank img{width:132px;height:132px;object-fit:contain;margin:0 auto 6px;display:block} .blank-mark{width:52px;height:52px;border-radius:50%;background:var(--tint-green); color:var(--yes);display:flex;align-items:center;justify-content:center;margin:0 auto 14px} .blank h3{margin:0 0 7px} .blank p{font-size:14px;color:var(--gray);max-width:42ch;margin:0 auto 18px} .blank .row-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} /* Cards, because each one now carries a button. A row of text with a button at the end of it reads as a list you scan; a card reads as a thing you can take. */ /* ONE OFFER CARD, THREE PLACES ---------------------------- The card the services page settled on, brought inside the account: the picture, the line above the name, the price with what it used to be, the three points under a rule, the buttons on the floor. It is the same component in all three places that offer anything, because a shelf with handsome cards and a room with plain ones is two answers to "what does this cost". Ported rather than copied: every colour here is an account token, so it follows the theme and goes dark with the rest of the page. The site's own values would have been a second palette living inside this one. The picture is the one thing a placement chooses (.offers-art). A catalogue is browsed and wants them; three cards offered under a report he is reading are an aside and would shout with them. */ .offers{list-style:none;margin:16px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch} .offers-art{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .offer{display:flex;flex-direction:column;background:var(--raise); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease} .offer:hover{transform:translateY(-3px);border-color:var(--ink-soft); box-shadow:0 14px 32px var(--lift)} @media (prefers-reduced-motion:reduce){ .offer{transition:none}.offer:hover{transform:none} } /* Decorative beside the name under it, so it is out of the tab order and hidden from a reader: the buttons are the real targets. */ .of-art{display:block;background:var(--warm);border-bottom:1px solid var(--line)} .of-art img{display:block;width:100%;height:auto;aspect-ratio:360/200} .of-in{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px} /* What the thing is for, over what it is called. */ .of-kick{display:block;font-size:10px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px} .of-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px} .of-name{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.018em; color:var(--green);line-height:1.1} .of-why{margin:8px 0 14px;font-size:13.5px;line-height:1.55;color:var(--gray)} /* The price is the display face at its own size, the way it is on the site. Not the orange it was: orange means an accent everywhere else in here, and a price is a fact. */ .of-price{display:flex;align-items:baseline;gap:7px;margin:0 0 3px} .of-amt{font-family:var(--display);font-weight:900;font-size:31px;line-height:1; letter-spacing:-.02em;color:var(--green)} .of-price s{font-size:14px;font-weight:600;color:var(--gray); text-decoration-thickness:1.5px} .of-meta{margin:0 0 16px;font-size:12px;line-height:1.45;color:var(--gray)} /* Three points and not the contract: the rest is on the page the second button opens. */ .of-pts{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)} .of-pts li{display:flex;gap:9px;align-items:flex-start;padding:9px 0;font-size:13px; line-height:1.45;color:var(--green);border-bottom:1px solid var(--line)} .of-pts li::before{content:"\2713";flex:0 0 auto;color:var(--orange);font-weight:700; font-size:11px;line-height:1.45} /* On the floor of the card, so buttons line up across a row however uneven the copy above them is. */ .of-go{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .offer .do{text-decoration:none;padding:10px 18px;font-size:14px} .of-form{margin:0} /* Said plainly under the button: this one asks us, it does not charge you. */ .of-quoted{flex:1 0 100%;margin:-2px 0 0;font-size:11px;line-height:1.45;color:var(--gray)} .of-more{font-size:13px;font-weight:700;color:var(--gray)} .of-more:hover{color:var(--green)} .of-foot{margin:26px 0 0;font-size:13px;line-height:1.55;color:var(--gray);max-width:62ch} /* The first visit. Numbered, because it is a sequence and not a menu, and the number is the only ornament on the page. It was called steps, which is what the road across an audit card is called. Same weight, and this rule is further down the sheet, so this one won: the road was drawn with fourteen pixels above it and none below, and three goes at giving it room were edited into a rule that never applied. Two things with one name is a bug waiting for whoever touches the second one. */ .how{list-style:none;margin:14px 0 0;padding:0;counter-reset:step} .how-s{position:relative;padding:0 0 18px 40px;counter-increment:step} .how-s::before{content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px; border-radius:50%;background:var(--warm);color:var(--green);font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center} .how-t{display:block;font-weight:700;font-size:15px;color:var(--green);margin:3px 0 3px} .how-b{display:block;font-size:14px;line-height:1.6;color:var(--gray)} .go{margin:22px 0 0} .go .do{display:inline-block;text-decoration:none} /* Two tabs that are two links, so the one he is on survives a reload and a bookmark, and neither needs a script. */ .tips-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0; border-bottom:1px solid var(--line)} .tips-tab{padding:10px 14px;font-size:14px;font-weight:700;color:var(--gray); border-bottom:2px solid transparent} .tips-tab:hover{color:var(--green)} .tips-tab.on{color:var(--green);border-bottom-color:var(--orange)} /* THE RESTAURANT'S THREE TABS (Mathieu, 2 October): Store, Menu and Operations, one room. A count is answers still needed from him, the rail's own badge; the "!" is optional questions left, until the tab is opened. */ .rm-tabs{margin:0 0 22px} .rm-tab{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:15px} .rm-n,.rm-tabs .s-opt{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px; background:var(--tint-orange);color:#8F4109;font-size:11px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .rm-tabs .s-opt{padding:0;width:20px;font-weight:800} .rm-tabs .s-opt.is-seen{display:none} /* The one tab that is not part of the way through: it goes to the far end of the line, and the gap is what says so. It is also the one tab wearing a mark, a sheet with writing on it, because the gap alone says "apart" and the mark says which apart. Only the report has one, and a strip with no such tab in it is unchanged. */ .tips-tab-end{margin-left:auto;display:inline-flex;align-items:center;gap:7px} .tips-tab .tab-i{flex:0 0 auto;opacity:.65} .tips-tab:hover .tab-i,.tips-tab.on .tab-i{opacity:1} .tips{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px} /* A room somebody opens because he wants to, not because something is waiting on him, has to look like it is worth the visit. The card gets a hairline so it reads as a card, and the title takes the accent, the same one the rail row and every page heading already carry. */ .tip{background:var(--warm);border:1px solid var(--line);border-radius:var(--r); padding:20px 20px 16px} .tip-title{font-family:var(--display);font-weight:900;font-size:18px;line-height:1.25; letter-spacing:-.01em;color:var(--orange);margin:0 0 8px} /* The gap between what he read and what he is being asked is the pause before the question. It was 14px, which read as one block. */ .tip-body{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--gray)} .tip-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .tip-form{margin:0} .tip-answers{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* Pushed to the far end of the row, so the two answers and the one share are never mistaken for three of the same thing. */ .tip-right{margin-left:auto} /* Green yes, red no, a tick and a cross: the convention everybody already reads, which here is stronger than the house palette. Outlined at rest so two answers to one question look like two answers and not like a recommendation, filled on hover so pressing one is unmistakable. Written as .tip-quiet.tip-yes and not as .tip-yes: both carry .tip-quiet, whose own :hover is declared further down this stylesheet, and at equal specificity the later rule wins. That is exactly what happened once, and the word on the button disappeared. Two classes beat one, wherever they sit. */ .tip-quiet svg{width:12px;height:12px;margin-right:5px;vertical-align:-1.5px} .tip-quiet.tip-yes{border-color:var(--yes);color:var(--yes)} .tip-quiet.tip-yes:hover{background:var(--yes);border-color:var(--yes); color:var(--verdict-ink)} .tip-quiet.tip-no{border-color:var(--no);color:var(--no)} .tip-quiet.tip-no:hover{background:var(--no);border-color:var(--no); color:var(--verdict-ink)} /* The move, in an answered tab: a sentence he can press, not a verdict. Nothing around it and nothing in it, so it sits under the card's own text instead of competing with the button beside it. The padding stays, though: it is what a thumb aims at, and taking it away would make the target the height of eleven point type. Under the cursor it only darkens, which is the least a control can do and still say it is one. */ .tip-quiet.tip-move{border-color:transparent;background:transparent;color:var(--gray)} .tip-quiet.tip-move:hover{border-color:transparent;background:var(--tint-green); color:var(--green)} /* Two cards, side by side while there is room for two. One is a switch he leaves set and forgets; the other is an errand he runs now and then. They are the same shape because they are the same kind of thing: something this room does for him beyond showing him the tips. */ .tips-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;margin:18px 0 0} .tips-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding:14px 16px;background:var(--warm);border-radius:var(--r)} .tips-sub-text{flex:1 1 220px;min-width:0} .tips-sub-label{display:block;font-size:14px;font-weight:700;color:var(--green)} .tips-sub-note{display:block;font-size:12px;line-height:1.5;color:var(--gray);margin-top:2px} .tips-switch{font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:8px 18px;border-radius:var(--r);border:1px solid var(--line); background:var(--sunken);color:var(--gray);cursor:pointer} .tips-switch:hover{border-color:var(--green);color:var(--green)} .tips-switch.on{background:var(--green);border-color:var(--green);color:var(--cream)} a.tips-switch{text-decoration:none} a.tips-switch.on:hover{background:var(--green-mid);border-color:var(--green-mid); color:var(--cream)} /* An errand, not a state. The switch beside it is filled when it is on, and two filled greens in one row would say these are two of the same thing turned on. Outlined, and it fills only under the cursor. */ .tips-go{border-color:var(--green);color:var(--green);background:transparent} /* Reversed, and nothing else: what was the border becomes the fill and what was the ink becomes the card. Two colours, swapped, so there is never a third one on this control. */ .tips-go:hover,.tips-go:focus-visible{background:var(--green);border-color:var(--green); color:var(--cream)} /* The page's focus ring is orange. On a control whose whole point is that it is green it would be that third colour, so it wears its own. */ .tips-switch:focus-visible{outline-color:var(--green)} .tips-switch[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .tip-quiet[disabled]{opacity:.45;cursor:not-allowed} .tip-quiet[disabled]:hover{border-color:var(--line);color:var(--gray)} /* The reason it cannot be pressed, on the button rather than instead of it. A disabled button dispatches no events in some browsers, so the tooltip hangs off the wrapper; the same sentence is on its title attribute, for whoever is not using a mouse. */ .tip-off{position:relative;display:inline-flex} .tip-off::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:0; max-width:230px;background:var(--green);color:var(--cream);font-size:12px;line-height:1.4; font-weight:700;padding:7px 10px;border-radius:var(--r);opacity:0;pointer-events:none; transition:opacity .12s ease} .tip-off:hover::after{opacity:1} .tip-quiet{font:inherit;font-size:11px;font-weight:700;letter-spacing:.01em; padding:6px 11px;border-radius:var(--r);border:1px solid var(--line);background:var(--sunken); color:var(--gray);cursor:pointer} .tip-quiet:hover{border-color:var(--green);color:var(--green)} .tip-none{font-size:12px;color:var(--gray)} .history{margin:30px 0 0} .trail{list-style:none;margin:10px 0 0;padding:0} .trail li{display:flex;gap:14px;align-items:baseline;padding:9px 0; border-top:1px solid var(--line);font-size:14px} .trail .t-when{flex:0 0 72px;font-size:12px;color:var(--gray);font-variant-numeric:tabular-nums} .trail .t-what{flex:1 1 auto;color:var(--gray)} .trail li.now .t-what{color:var(--green);font-weight:700} .files{margin:30px 0 0;border-top:1px solid var(--line);padding-top:8px} /* SENDING FILES: the list of what is about to go, under the box it was picked in. The box itself is with the rest of the documents, because a slot card is where most of them are sent from. */ .dz .hint{margin:10px 0 6px;font-size:12px} .dz-which{display:block;margin:0 0 12px} .dz-which select{width:100%;max-width:420px} /* A word about the file, on the one zone that takes anything: in a slot it is already said by the slot it went into. */ .dz-word{display:block;width:100%;margin:0 0 12px} .dz-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px} .dz-row{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--sunken); border:1px solid var(--line);border-radius:var(--r);font-size:14px} .dz-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:var(--green);font-weight:600} .dz-size{flex:0 0 auto;font-size:12px;color:var(--gray)} .dz-state{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--gray)} /* Landed says so quietly: a tick in the one colour that means go, and nothing to press. */ .dz-ok{color:var(--green);font-size:15px} /* The one that failed says so in the one colour on this page that means stop, and the sentence beside it is the server's own words. Retry is the only control an upload row carries: not a way to take the file back, the way to send it again. */ .dz-bad{color:var(--no)} .dz-retry{flex:0 0 auto;font:inherit;font-size:12px;font-weight:700;padding:5px 12px; border-radius:var(--r);border:1px solid var(--line);background:var(--sunken); color:var(--green);cursor:pointer} .dz-retry:hover{border-color:var(--green)} .upl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 8px} .upl input[type=file]{flex:1 1 100%;font-size:14px;color:var(--gray); padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .upl input[name=note]{flex:1 1 200px;width:auto} .upl button{font:inherit;font-weight:700;padding:9px 18px;border:0;border-radius:var(--r); background:var(--green);color:var(--cream);cursor:pointer} .inline{display:inline-flex;gap:6px;margin-left:auto} .inline button{font:inherit;font-size:12px;padding:4px 12px;border-radius:var(--r); border:1px solid var(--line);background:var(--sunken);color:var(--gray);cursor:pointer} .out{margin-top:28px;font-size:13px} /* The same sentence the site and the emails end on. Quiet, because it is there to be found rather than read. */ .foot{max-width:1080px;margin:0 auto;padding:0 20px 40px} .foot p{margin:0;padding-top:16px;border-top:1px solid var(--line);font-size:11px; line-height:1.6;color:var(--gray)} [hidden]{display:none!important} /* THE BAR FOR A PAGE THAT HAS NOT ARRIVED YET Fixed at the very top, on every page the shell draws: the account had nothing to say between a press and the next page, and a slow one read as broken rather than working. Present but empty until the script marks it on, so a fast navigation (the page unloads before the script's own delay is up) never draws a pixel of it. */ .tgm-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:9999; pointer-events:none;overflow:hidden} .tgm-bar.is-on::before{content:'';position:absolute;top:0;left:0;height:100%; width:35%;background:var(--orange);border-radius:0 2px 2px 0; animation:tgm-bar-go 1.1s ease-in-out infinite} @keyframes tgm-bar-go{0%{left:-35%}60%{left:100%}100%{left:100%}} /* A BAR IS EASY TO MISS, SO THE PRESS ITSELF SAYS SO TOO The 3px line alone went unseen on a slow page. It is thicker, a small spinner stands in the top right corner with it, the pointer says the page is working, and the button that was pressed (window.tgmLoading) turns while it waits, at full strength rather than greyed out as if it had been refused. */ .tgm-bar{height:4px} /* THE SHOOTING LIST ON THE PHOTOGRAPHS STEP (shotsBlock): one line a dish, the team's note under its name, a quiet tick once a photograph is in, and the account's own drop box beside it. */ .rp-shots{margin:18px 0 22px;padding:20px 22px;border:0;border-radius:16px; background:var(--tint-green)} /* In the setup road's column, a grid with its own 24px gap that margins do not collapse into: the list hangs 16px under the question it answers, and the caption sits close over the two cards it introduces. */ .rp2-main>.rp-shots{margin:0} .rp2-main>.rp2-turn+.rp-shots{margin-top:-24px} .rp2-main>.rp-shots-then{margin:0 0 -14px} .rp-shots-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .rp-shots-h{font-size:17px;font-weight:700;color:var(--green)} .rp-shots-lede{margin:0 0 12px;font-size:14.5px;line-height:1.5;color:var(--ink);max-width:68ch} .rp-shots.is-only .rp-shot{display:block;padding:0;border-top:0} .rp-shots .rp-shot form.dz,.rp-shots .rp-shot .dz-box{width:100%;max-width:none} .rp-shots .dz-box{background:#fff} .rp-shots.is-only .dz-box{min-height:88px;justify-content:center} .rp-shots .dz-t{white-space:normal;overflow:visible;text-overflow:clip} .rp-shots-where{margin:4px 0 0;font-size:13px;color:var(--ink-muted)} .rp-shots-where a{font-weight:700;color:var(--green)} .rp-shot-others{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px} .rp-shot-others a{font-size:13px;color:var(--green);font-weight:600} .dc-files-h{margin:34px 0 6px} .rp-shots-then{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.02em; color:var(--ink-muted)} .rp-shots-head p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-muted);max-width:62ch} /* The ink is the tint's own colour, dark on its pale ground: it read cream on pale orange and beige on pale green (--hot-ink and --deep are grounds, not inks), which nobody could read (Mathieu, 30 September). */ .rp-shots-n{flex:0 0 auto;padding:4px 11px;border-radius:999px;background:var(--tint-orange); color:var(--accent-ink);font-size:13px;font-weight:700;white-space:nowrap} .rp-shots-n.is-all{background:var(--tint-green);color:var(--green)} .rp-shots .rp-cover-bar{height:6px;border-radius:999px;background:var(--sunken);margin:12px 0 4px; overflow:hidden} .rp-shots .rp-cover-bar i{display:block;height:100%;background:var(--green);border-radius:inherit} .rp-shot-list{list-style:none;margin:8px 0 0;padding:0} .rp-shot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:center; padding:12px 0;border-top:1px solid var(--line)} .rp-shot-t{display:flex;align-items:center;gap:12px;min-width:0} .rp-shot-w{display:flex;flex-direction:column;gap:3px;min-width:0} .rp-shot-img{flex:0 0 auto;display:block;width:64px;height:64px;border-radius:10px;overflow:hidden; background:var(--sunken);border:1px solid var(--line)} .rp-shot-img img{display:block;width:100%;height:100%;object-fit:cover} .rp-shot-img.is-none{border-style:dashed} .rp-shot-ok.is-grab{color:var(--ink-muted)} .rp-shots.is-locked{background:var(--sunken)} .rp-shot-t b{font-size:15px;color:var(--ink)} .rp-shot-t span{font-size:13.5px;line-height:1.45;color:var(--ink-muted)} .rp-shot-ok{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700; color:var(--green);text-decoration:none} .rp-shot-ok svg{width:14px;height:14px} .rp-shot.is-in .dz-box{opacity:.8} .rp-shot form.dz{margin:0} @media(max-width:700px){.rp-shot{grid-template-columns:1fr}} /* "Anything else", under the list in a card of its own (shotsBlock). */ .rp-shots-more{margin:14px 0 0;padding:16px 18px;border-radius:var(--r);background:var(--raise); border:1px solid var(--line);display:flex;flex-direction:column;gap:12px} .rp-shots-more-t{display:flex;flex-direction:column;gap:3px} .rp-shots-more-t b{font-size:15px;color:var(--ink)} .rp-shots-more-t span{font-size:13.5px;line-height:1.45;color:var(--ink-muted)} .rp-shots-more form.dz,.rp-shots-more .dz-box{width:100%;max-width:none} .rp-shots-more .dz-box{background:var(--sunken)} /* NONE OF THE WINDOWS SUITS (noneSuits): a quiet fold under the windows. */ .rp-none{margin:14px 0 0} .rp-none summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-muted)} .rp-none-f{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-width:520px} .rp-none-f label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink)} .rp-none-f textarea{font:inherit;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px} .rp-none-f .rp-press{align-self:flex-start} .tgm-bar.is-on::after{content:'';position:fixed;top:14px;right:16px;width:20px;height:20px; box-sizing:border-box;border:2.5px solid rgba(232,93,4,.22);border-top-color:var(--orange); border-radius:50%;animation:tgm-spin .7s linear infinite} @keyframes tgm-spin{to{transform:rotate(360deg)}} html.is-leaving,html.is-leaving *{cursor:progress!important} .is-loading.do,.do.is-loading[disabled]{opacity:1!important} .is-loading.do::after,.rp-mangocard.is-loading .rp-mcbtn::after{content:'';display:inline-block; width:14px;height:14px;margin-left:10px;vertical-align:-2px;box-sizing:border-box; border:2px solid currentColor;border-right-color:transparent;border-radius:50%; animation:tgm-spin .7s linear infinite} @media(prefers-reduced-motion:reduce){.tgm-bar.is-on::after,.is-loading.do::after, .rp-mangocard.is-loading .rp-mcbtn::after{animation-duration:2s}} /* Nothing here moved when it was touched: no hover, no pressed state, no focus ring. A page where the buttons do not answer reads as a page that is not working, and the keyboard had no way through it at all. */ /* No underlines. In here a link is almost never a word inside a sentence: it is the name of an order, a row in a list, a file. Those read as clickable from where they sit, and underlining every one of them drew a ruled page. The hover carries it instead, in orange, on everything in the page that is a link and not a button: the buttons rendered as anchors keep their own, since a filled shape that changes ink rather than fill reads as broken. .tips-switch is on that list for exactly that reason: it fills under the cursor, and orange ink arriving on a green fill was the bug this exclusion fixes, not a second opinion about it. */ a{color:inherit;text-decoration:none} /* Not the tabs either: a tab has its own hover, and the chosen one is white on dark green, where orange could not be read. */ /* AND AS WEAK AS A RULE CAN BE (Mathieu, 1 October): a list of the button classes to leave alone was always one class short (the road's presses, Mango's), and a filled press then turned its words orange on green, or orange on orange. Inside :where() the rule weighs one pseudo-class, so any press that names its own colour keeps it under the pointer, and only a plain link takes the orange. tools/journey/ui-audit.js measures it. */ :where(main a:not(.do):not(.ask-do):not(.tips-switch):not(.tips-tab)):hover{color:var(--orange)} /* .do keeps its own transition list (background, box-shadow, scale) below its base rule rather than sharing this one: none of these four properties are ones it animates any more, and a second, later declaration of the same shorthand for the same class is how the wrong one would end up winning. */ .ask-do,.bar-do,form.card button,.upl button,.yn button,.inline button,.opt,.tabs button, .dz-retry{ transition:background .15s ease,border-color .15s ease,color .15s ease, box-shadow .15s ease,transform .06s ease} .ask-do:hover,form.card button:hover,.upl button:hover{background:var(--green-mid)} .ask-do:active,form.card button:active,.upl button:active{transform:translateY(1px)} /* THE LIGHT COMES UP A STEP AND THE SHADOW OPENS Hover only from a pointer that can actually hover: a touch screen has no way to leave the button once it has pressed it, so without this guard a tapped button on a phone kept reading as hovered until something else was tapped. The mobile pill strip had exactly this bug. */ @media(hover:hover){ .do:hover{background:linear-gradient(180deg,var(--green-mid),var(--do-lit)); box-shadow:inset 0 1px 0 var(--do-edge),0 2px 2px var(--do-l1), 0 4px 8px var(--do-l2),0 8px 16px var(--do-l3)} } /* PRESSING SCALES THE SHAPE, NOT THE TEXT'S POSITION translateY(1px) read as the word sliding down the button rather than as the button itself sinking. .975 on the whole shape, with the shadow pulled inside it, reads as the object being pushed rather than redrawn a pixel lower. */ .do:active{scale:.975;box-shadow:inset 0 1px 3px var(--do-l1)} .do[disabled]:hover{background:linear-gradient(180deg,var(--do-lit),var(--green)); box-shadow:none} .yn button:hover,.inline button:hover,.opt:hover{border-color:var(--green);color:var(--green)} .d[data-choice="accept"] .btn-yes:hover{background:var(--green-mid);color:var(--cream)} .d[data-choice="reject"] .btn-no:hover{background:var(--orange);color:var(--cream)} .tabs button:hover{color:var(--green)} /* THE CHARTER'S PIECES, AND NOTHING ELSE USES THEM ------------------------------------------------ One page grammar for every room opened from a door: the banner says where he is, the required block is the one job, everything else is folded, and the bar at the foot says how far and what next. Written once here, drawn by fields-room.js, and a page that wants something new proposes an addition rather than inventing a variant. */ /* The banner. Quiet on purpose: it names the order and gets out of the way, and it had no rules at all until now, which is most of why the rooms read as a wall. */ .guide{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line); border-radius:var(--r);background:var(--sand)} /* The cross that closes the explanation for good, and the box it sits in. */ .guide{position:relative} .guide-x{position:absolute;top:8px;right:10px;border:0;background:none; color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;padding:2px 6px} .guide-x:hover{color:var(--ink)} /* HIS ANSWERS STILL FEED THE DESIGN: the note at the top of What we need, in the settled green of a thing that is going well, with its own cross. */ .edit-note{position:relative;margin:0 0 22px;padding:18px 48px 18px 20px; border:1px solid rgba(30,122,77,.28);border-radius:var(--r);background:rgba(30,122,77,.07)} .edit-note[hidden]{display:none} .edit-note-x{position:absolute;top:8px;right:10px;border:0;background:none; color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px} .edit-note-x:hover{color:var(--ink)} .edit-note-h{margin:0 0 6px;font-weight:700;font-size:16px;color:var(--green)} .edit-note-p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--green)} .edit-note-rooms{display:flex;flex-wrap:wrap;gap:10px} .edit-note-room{display:flex;align-items:center;gap:10px;padding:10px 14px; border:1px solid var(--line);border-radius:var(--r);background:var(--raise); text-decoration:none;color:var(--green)} .edit-note-room:hover{border-color:var(--green)} .edit-note-room svg{flex:0 0 auto;width:20px;height:20px} .edit-note-room > span{display:flex;flex-direction:column;line-height:1.35} .edit-note-room b{font-size:14.5px} .edit-note-room > span > span{font-size:13px;color:var(--gray)} @media(max-width:640px){.edit-note-room{flex:1 1 100%}} /* The box an answer opens under itself, and the small dialog that says the last required answer has landed. */ .q-drop{margin:10px 0 0} .lastone{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex; align-items:center;justify-content:center;padding:18px;z-index:60} /* A SOLID PANEL, LIKE EVERY OTHER DIALOG IN THIS ACCOUNT The card token is transparent in places, so the backdrop showed through it and the text sat on whatever happened to be underneath. The page's own background is the one that is always opaque. No backticks in here: this whole sheet is a template literal, and that is the fourth time. */ .lastone-in{background:var(--canvas);color:var(--green);border:1px solid var(--line); border-radius:14px;padding:20px 22px;max-width:420px; box-shadow:0 18px 50px rgba(0,0,0,.35)} .lastone-t{margin:0 0 8px;color:var(--green);font-family:var(--display);font-weight:900} .q-drop-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px} .lastone-b{margin:0 0 16px;color:var(--green);font-size:14px;line-height:1.5} .lastone-go{display:flex;gap:10px;align-items:center;margin:0;flex-wrap:wrap} .guide > p{margin:0 0 6px} .guide > p:last-child{margin-bottom:0} .guide .door-cap{margin-bottom:4px} .guide-note{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .guide-note .in{width:100%;margin-top:6px} /* THE REQUIRED BLOCK: THE ONE JOB OF THE SCREEN Under one heading that names who is asking, because a field marked needed in a room that belongs to him has to say who needs it. */ .rq{margin:0 0 6px} .rq-h{margin:0 0 2px;font-family:var(--display);font-size:15px;font-weight:900; letter-spacing:.02em;text-transform:uppercase;color:var(--green)} .rq .q:first-of-type{padding-top:14px} /* THE LIVE LINE, GLUED TO THE ACTION Said at the top of the room and again beside the press (.say wears this class too, in the dock at the foot); intakeScript's roomCount rewrites every element carrying it at once, off one rule, so the two can never say two different things. Plain and quiet at the top, where it is the first thing on the page and does not need to shout; the dock's own .say rules give it that context's tone and its mark instead. */ p.rq-live{margin:0 0 18px;font-size:14px;font-weight:600;color:var(--green)} p.rq-live:empty,.gd-visit-count:empty{display:none} /* THE BOX THAT NAMES WHAT IS MISSING Empty and hidden until a press finds something (advanceScript); an orange line the width of the page, above the form it refuses, so the press never appears to do nothing. */ .miss-box{margin:0 0 18px;padding:14px 16px;border-radius:var(--r); border:1px solid var(--orange);background:var(--tint-orange)} .miss-box:focus{outline:none} .miss-h{margin:0;font-weight:700;color:var(--green)} .miss-list{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px} .miss-list a{color:var(--orange);font-weight:600;text-decoration:underline} .miss-else{margin:8px 0 0;font-size:13px;color:var(--gray)} /* THE FOLD: everything that holds nothing up, out of the way of what does. Shut in order context and open from the rail, which is the same page asking a different question. */ .more{margin:8px 0 0;border-top:1px solid var(--line)} .more > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline; gap:8px;padding:16px 0;font-family:var(--display);font-weight:900;font-size:15px; color:var(--green)} .more > summary::-webkit-details-marker{display:none} .more > summary::after{content:"+";margin-left:auto;font-size:19px;color:var(--gray); line-height:1} .more[open] > summary::after{content:"\2212"} .more-n{font-family:var(--body);font-weight:700;font-size:13px;color:var(--gray)} .more > .hint{margin:0 0 4px} /* ONE STATE MARK, THE SAME THREE STATES EVERYWHERE A ring when it is empty, a green tick when it is saved, and the ring in the product's colour when this order needs it and has not got it. The mark sits in front of the label so a thumb scrolling down the page reads one column of marks rather than hunting each one. */ .q-mark{flex:none;display:inline-block;width:15px;height:15px;margin-right:9px; border:2px solid var(--line);border-radius:50%;vertical-align:-2px; background:transparent} .q-req .q-mark{border-color:var(--orange)} /* Answered, by the rule the door counts by. It was .q.saved as well, which is "a save landed" and not the same question: a client who pasted a map link into an address his setup needs five typed halves of got a green tick over a field the door called empty. */ .q-mark.is-said,.q.is-in .q-mark{border-color:var(--green);background:var(--green); box-shadow:inset 0 0 0 2px var(--cream)} .q.is-in .q-mark{border-color:var(--green)} .q-at{margin:8px 0 0;font-size:11px;color:var(--gray)} /* The word on a part this product cannot do without, beside the part's own label: the same orange the field's ring wears, and the same word the documents step uses for a file it cannot start without. */ /* A PART THIS PRODUCT NEEDS WEARS THE SAME RING AS A FIELD The charter's own words: the postcode's ring is coloured for a setup and plain for a check-up. So the mark is the field's mark, one size down, and the word beside it goes the moment the part holds something. */ .q-part-req > .q-sub{display:flex;align-items:baseline} .q-part-req .q-mark{flex:none;width:11px;height:11px;margin-right:7px; border-width:2px;border-color:var(--orange);vertical-align:-1px} .q-part-req .q-mark.is-said{border-color:var(--green);background:var(--green)} /* The Operations room's own override of this toggle for its three standing facts about exporting moved to operations-room-css.js, scoped under the room's own wrapper: this bare pair drew nothing there any more. The plain facts-list class alone survives, bare, for the Results room's own use of the same list. */ /* Said once over a group where any one of its parts answers it, because a mark on each would read as each being owed. */ .q-either{margin:0 0 10px;font-size:12px;font-weight:700;color:var(--orange)} .q-owed{display:inline-block;margin-left:7px;font-style:normal;font-weight:800; font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange); vertical-align:1px} /* The same mark on a document slot, because a file sent and an answer given are the same fact to the man looking at the page. */ .dc-h{display:flex;align-items:center;gap:0} .dc-h .q-mark{margin-right:9px} .q.saved .q-at::after{content:""} /* The "?" toggle: everything the old questionnaire said at length, kept and closed. A small grey circle, and the words under it when he asks. */ .q-why{margin:6px 0 0} .q-why > summary{list-style:none;cursor:pointer;display:inline-flex; align-items:center;justify-content:center;width:20px;height:20px; border:1px solid var(--line);border-radius:50%;font-size:12px;font-weight:800; color:var(--gray);background:var(--sunken)} .q-why > summary::-webkit-details-marker{display:none} .q-why[open] > summary{border-color:var(--green);color:var(--green)} .q-why > p{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--gray)} /* A GROUP IS ONE CARD OF SMALL INPUTS, NOT A RUN OF QUESTIONS The address and who runs it were reading as five questions each. */ .q[data-kind="group"] .q-parts{padding:14px;border:1px solid var(--line); border-radius:var(--r);background:var(--sunken)} /* THE STATUS SENTENCE, IN THE BAR THIS ACCOUNT ALREADY HAS The charter's bar is the dock's right-hand slot, not a second strip: the dock is already a row of the shell, already sticky at the bottom on a phone, and already where every page with something to press puts it. These are the things a room adds to it. TWO TONES, AND ONLY TWO It used to be one look regardless of what it said, which is how a sentence reporting that everything is answered ended up in the same orange as a sentence asking for three more -- orange already means one thing everywhere else in this chrome, "this is waiting on you", and a settled room is the one sentence that is never true of. Settled reads grey with a green check; waiting reads orange with a dot. A room picks the tone its own state is in; it never picks a colour. */ .say{display:inline-flex;align-items:center;gap:7px;font-size:12.5px; font-weight:500;min-width:0} .say-i{flex:0 0 auto;display:inline-flex} .say .say-tick,.say .say-dot{display:none} .say.settled{color:var(--gray)} .say.settled .say-tick{display:inline-flex;color:var(--yes)} /* action-ink, never --orange, as TEXT here: this sentence lives in the dock, which is --chrome now, and plain orange text on it clears only 4.16:1 (phase 4b, Part C2, rule 1) -- the same trap .s-tag-tips was already caught in. The dot beside it stays --orange: a status mark, not a word, and never travels without the sentence that names it (rule 3). */ .say.waiting{color:var(--action-ink);font-weight:700} .say.waiting .say-dot{display:inline-flex;color:var(--orange)} /* THE WAY OUT IS NEVER PUNISHED AND NEVER DISABLED It is quiet while something is missing and quiet when it is not: the loud one -- the plain .do beside it -- is whichever of the two carries him forward. One quiet style for the whole account rather than a room's own colour on it: .ms-dockbtn's orange and .bar-back's own name both retired into this one class, defined once. THE COLOUR PASS: A SHAPE OF ITS OWN, NOT A COLOUR OF ITS OWN (PART G) A primary and a secondary sharing one shape (a bordered pill) and differing only by fill read as a weak hierarchy -- two buttons asking to be pressed. This one stops being a pill at all: plain text, no border, no fill, --ink-muted rather than the page's own ink, so the one filled shape on the row is unmistakably the one the eye should land on. */ .do.is-quiet{background:none;border:0;padding-left:4px; color:var(--ink-muted);box-shadow:none;font-weight:600} @media(hover:hover){ .do.is-quiet:hover{background:none;color:var(--ink)} } /* ONE SIZE FOR EVERY PRESS IN THE DOCK, THE MANGO DOOR'S OWN Used to be smaller here than anywhere else in the account (a persistent bar, not a press he came here for) -- but the door up top that sends him into this bar is 40px, and a press answering it any smaller than the press that opened it reads as a step down. One size, so nothing in the dock disagrees with anything above it about how big a press is. */ .dock-acts .do{height:40px;display:inline-flex;align-items:center; font-size:14px;padding:0 18px} /* THE PREFERENCES, COLLAPSED INTO ONE QUIET CONTROL Three bordered widgets sat here permanently, under every single screen: that is a settings toolbar, not an action bar. One control instead, named for what it opens rather than for any one of the three things inside it, the same 40px tall as everything else that presses in this bar. It still opens in one press and it still never moves into account settings: these are accessibility controls, and the client who needs them most is reading this on a phone. */ .prefs{position:relative;display:flex;align-items:center} .prefs > summary{list-style:none;cursor:pointer} .prefs > summary::-webkit-details-marker{display:none} .pref-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px; border-radius:var(--r);color:var(--gray);font-size:12px;font-weight:600} .prefs[open] .pref-btn,.pref-btn:hover{background:var(--warm);color:var(--green)} .pref-btn .care{opacity:.75} /* OPENS UPWARD: THE CONTROL THAT HOLDS IT IS THE FOOT OF THE PAGE Nothing below the dock to open a panel toward. top and right reset to auto: .pop-panel above sets both (a panel that opens downward, from the header), and left unset on either edge is a panel stretched between four edges at once rather than opened from one of them. */ .prefs-pop{position:absolute;left:0;right:auto;top:auto;bottom:calc(100% + 10px);z-index:30; width:268px;max-width:calc(100vw - 24px);padding:8px;background:var(--raise); border:1px solid var(--line);border-radius:var(--r); box-shadow:0 1px 1px hsl(152 72% 13% / .08),0 4px 8px hsl(152 72% 13% / .06), 0 12px 24px hsl(152 72% 13% / .10)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .prefs-pop{box-shadow:0 1px 1px hsl(152 40% 4% / .3), 0 4px 8px hsl(152 40% 4% / .24),0 12px 24px hsl(152 40% 4% / .35)} } :root[data-theme="dark"] .prefs-pop{box-shadow:0 1px 1px hsl(152 40% 4% / .3), 0 4px 8px hsl(152 40% 4% / .24),0 12px 24px hsl(152 40% 4% / .35)} .pp-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:7px 8px} .pp-row + .pp-row{border-top:1px solid var(--line)} .pp-k{font-size:12px;font-weight:600;color:var(--gray)} /* One ring, on whatever has focus, and only from the keyboard. */ :focus-visible{outline:2px solid var(--orange);outline-offset:2px} @media(prefers-reduced-motion:reduce){*{transition:none!important}} /* Below the width where a rail and a column both fit, the rail lies down: a strip of tabs under the header, scrolling sideways when there are more than fit. No drawer, no toggle, nothing to open. Every room stays one touch away, and it works with the script disabled. */ @media(max-width:900px){ /* ONE PAGE AGAIN Two panes need two scrollbars and a window that does not move, which is a desk. On a phone there is one column, the browser's own bar comes and goes, and a fixed height fights the keyboard, so the shell unwinds into the ordinary page it used to be. */ html{scroll-padding-bottom:100px} body:has(.app){height:auto;overflow:visible} /* THE HEADER FIRST, THEN THE RAIL LYING DOWN .col-side used to be the first child of .app and read first on a phone for exactly that reason: block layout stacks in document order, and the identity block plus the pill strip sat above the header and the room itself on every single screen. Harmless while the wordmark lived in the header regardless of source order; wrong now that the header is the only place the mark and the room's own name show up on a phone at all. flex-direction:column and an explicit order per row says what a client actually reads first: the header, then the room, then the rail he came from, then the dock he presses. */ .app{display:flex;flex-direction:column;height:auto;overflow:visible} .col-main{order:1} .col-side{order:2} .dock{order:3} .col-side{display:block;overflow:visible;padding:0;border-right:0; background:transparent} .col-main{overflow:visible} .col-main > .chrome{position:static} /* THE MARK GOES BACK TO THE HEADER The rail has no top row once it lies down: .brand's whole reason to exist was to sit on the rail's own head, at the header's height, and there is no rail standing up here for it to head. The header carries a second copy of the same wordmark instead (.chrome-brand-m, hidden above this width), and this one goes quiet. */ .col-side > .brand{display:none} .col-side .who{display:inline-block} /* Lying down, the control is a small inline block at the left of the bar, so the panel hangs from its left edge: anchored to its right, a 280px panel under a 140px control ran off the left of a phone. */ .col-side .who-panel{left:0;right:auto;width:min(280px,calc(100vw - 40px))} .col-side .side{margin-top:0;border-top:0;padding-top:0} .chrome-brand{padding:0} .shell{display:block;padding:0 20px} main{max-width:none;padding:22px 0 96px} /* Lying down, it is a strip and not a column: the height it was given and the bar that came with it both go, or the strip would scroll in a direction it has no length in. */ .side{position:static;padding:14px 0 0;margin:0 -20px;max-height:none; overflow-y:visible;overflow-x:auto;overscroll-behavior:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} /* NOTHING SAID TODAY THAT THIS SCROLLS A mask rather than a gradient laid over it: the fade has to sit at the edge of what he can see whatever he has scrolled to, and a mask on the strip's own box does exactly that without a second element positioned over it and without knowing where the scroll happens to be. */ .side{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} /* THE HEADER, IN TWO ROWS The mark and the standing actions on the first, at the header's own height; the room's name below them, full width. Same three children, reordered rather than rebuilt: .chrome-where is first in the markup (the header scrapes nothing else, see roomName()) but reads last here. */ .chrome{flex-wrap:wrap;height:auto;padding:10px 16px 0;row-gap:6px} .chrome-brand-m{display:block;order:1} .chrome-right{order:2;margin-left:auto} /* .chrome-titleline, NOT .chrome-where DIRECTLY The title and the restaurant's name share one flex child of .chrome now (Part E); the row that used to reorder .chrome-where onto its own full width reorders that wrapper instead, and the two inside it fall back to stacking (chrome-titleline is not itself flex below this width) since a phone has no room to keep a dot-separated restaurant name on the title's own line either. */ .chrome-titleline{order:3;flex:1 1 100%;display:block} .chrome-where{font-size:26px;padding:0 0 4px;display:block} .chrome-restaurant{display:block;padding:0 0 8px 0} .chrome-restaurant::before{display:none} /* THE WORK GOES ABOVE THE PREFERENCES ON A PHONE Three things on a 390px bar wrapped into two rows already; this decides which one reads first. What a room is waiting on him for is the reason he opened it, and how big the words are is not. */ .dock{flex-wrap:wrap} .dock-tools{order:2;flex-basis:100%} .dock-acts{order:1;flex-basis:100%} /* The mark and the name are a bar again, side by side, above the strip. The column carries no side padding of its own: the strip under it bleeds to both edges and takes its gutter from its own list, so a padding here and a negative margin there is the pair that ends up four points apart and spilling. */ .col-side{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:8px 0 0} .dock{position:sticky;bottom:0;z-index:40;padding:8px 16px calc(8px + env(safe-area-inset-bottom)); background:var(--chrome);flex-wrap:wrap;gap:10px} /* AND THE PAGE KEEPS ROOM FOR IT A sticky bar overlays what is under it, so the last thing on every page was sitting behind the dock: on a room that is a control he has to press, and the browser refused the press because something else would receive it. It has always done this and it has always been wrong; it became worth fixing the day the rooms put the required fields on those pages. Generous rather than exact: the dock wraps to two lines on a narrow phone when a room fills its right-hand slot. */ .shell > main{padding-bottom:120px} /* HOW FAR HE IS, ON ITS OWN LINE Three things on a 390px bar is one of them ellipsed, and the one that got ellipsed was the count. It takes the line above the buttons instead, the same way the theme control does when the bar wraps. */ .dock-acts{flex-wrap:wrap;gap:8px} .say{flex-basis:100%} .chrome-brand{font-size:22px} .col-side .who{margin-left:20px;margin-right:20px} /* FULL WIDTH LESS ITS OWN GUTTER, LIKE THE ACCOUNT CARD BELOW IT Unstyled for this breakpoint it took a flex item's own shrink-to-fit width instead, the same auto-width every other .col-side child needed pinning for once the column lies down as a wrapping bar. A flat 100% plus this row's own side margins is 40px wider than the strip has, which is margin added on top of the box rather than eaten from it -- caught on the phone width render, not assumed from the desktop one. */ .col-side .prod{flex:0 0 calc(100% - 40px);margin:0 20px 12px} .col-side .side{flex:0 0 100%;order:3;margin:0;min-width:0;width:100%} .side::-webkit-scrollbar{display:none} .side ul{display:flex;gap:7px;padding:0 20px;width:max-content} .side li{margin:0} .side a{align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r); background:var(--warm);white-space:nowrap} .side .i{margin-top:0} /* The second line is what a rail has room for and a strip does not. */ .side .s-note{display:none} .side .s-label{font-size:14px} /* Lying down, the rule stands up. */ .side .s-gap{width:1px;height:auto;align-self:stretch;margin:5px 5px;flex:0 0 auto} .side a[aria-current="page"]{background:var(--deep);font-weight:700} /* NO ROOM TO STAND OUT IN A ROW OF PILLS Restated for .row rather than inherited, because the desktop rule above this media query outranks the plain .side a[aria-current="page"] it shares this breakpoint with (a class beats a bare attribute selector). The colour pass keeps the inset bar even in a strip of pills -- it costs 3px of a pill's own edge, not the height a capsule outside it needed. */ .side .row[aria-current="page"]{background:var(--deep);font-weight:700; box-shadow:inset 3px 0 0 var(--ink)} } @media(max-width:640px){.d{flex-wrap:wrap}.yn{width:100%}.yn button{flex:1 1 0} .kp{flex-wrap:wrap}.kp-theme{flex-basis:100%} /* 20px of side padding on a 360px screen is 11% of it. */ .shell{padding:0 16px}.chrome{padding:10px 12px;gap:6px}.foot{padding:0 16px 40px} /* Everything gives a little, and the three zones still fit a 360px screen. */ .chrome-brand{font-size:20px} .who > summary{padding:5px 7px;gap:6px} .ava{width:26px;height:26px;border-radius:var(--r);font-size:11px} .who-name{font-size:12px}.who-where{font-size:10px} .act{width:30px;height:30px}.act + .act{margin-left:0} .side{margin:0 -16px}.side ul{padding:0 16px} h1{font-size:26px} /* The state belongs under the order it describes once the row wraps, not pushed to the right of a name that has already run out of room. */ .o-state{align-items:flex-start;text-align:left}} /* A card that is real and not yet payable. Same shape as the button it replaces, nothing to press and nothing to tab to. */ .do.is-soon { background: rgba(14,75,44,.07); border: 1px dashed rgba(14,75,44,.32); color: var(--green-deep); cursor: default; } /* ====================================================================== THE ARRIVAL GUIDE ====================================================================== A panel over the space he has just bought, and the one place in this account that is not a room. It is built from the site's own charter and nothing else: the deep green, the cream paper, the display face for what is said and DM Sans for what is asked, terracotta at five per cent, one radius, one shadow, one easing curve. ONE SHELL, TWO COLUMNS The spine on the left is the constant: the mark, the four rooms with the one he is in lit, the dragon, the way out, and the screen's illustration behind all of it. The sheet on the right is the work, and it is the only thing that changes between screens. A message screen and a question screen are the same panel with different things on the paper, which is what makes six screens read as one walk rather than as six pages. WHAT IS NOT HERE No second radius, no gradient that is not a button, no card inside a card. Where something has to be separated from what is beside it, it is separated by space first and by a hairline second. No backticks anywhere below: this sheet is one template literal, and a pair of them closes and reopens it. */ /* THE GUIDE'S OWN VALUES The greens and the terracotta are the brand's, written out rather than taken from the theme, because the spine is deep green in daylight and deep green at night: it is the product's colour and not the page's. The paper and the ink are tokens, because the paper IS the page. */ .gd-wrap { --gd-spine: #093822; --gd-spine-lit: #0E4B2C; --gd-on: #F7F4ED; --gd-on-soft: rgba(247, 244, 237, .62); --gd-on-faint: rgba(247, 244, 237, .30); /* The row he is on, and the watermark behind the guide: tokens and not values, because on a pale spine (look v3, Mathieu, 7 October) the ground under the row is white and the watermark is dark, where on a deep one they are a light veil. */ --gd-here: color-mix(in srgb, var(--gd-on) 10%, transparent); --gd-scene-op: .14; --gd-scene-filter: grayscale(1) brightness(2.4); --gd-paper: #FBF8F1; --gd-accent: #E8701F; /* THE ACCENT, TWICE, BECAUSE IT DOES TWO JOBS --gd-accent is the terracotta as a mark: a rule, a gauge, a letter set at display size. Nothing small and nothing carrying words is drawn in it. --gd-fill is the same colour taken down far enough to carry cream text at the contrast the site's own buttons hold, and --gd-ink-accent is it as ink on the paper. The three are the charter's orange-deep, orange and orange-text, under the names this panel uses. */ --gd-fill: #B5530F; --gd-ink-accent: var(--accent-ink, #A54A0C); --gd-scrim: rgba(9, 56, 34, .52); --gd-cast: 0 4px 12px rgba(9, 56, 34, .10), 0 24px 64px rgba(9, 56, 34, .18); /* The sheet's gutter, and the one measurement everything on the paper lines up against: the heading, the boxes, the foot, the band at the top of the scroller. */ /* 4.0 and not 4.2: the spine grew by sixty points for the dragon, which took the reading column from 680 to 677, and three points is where "Choose A, B, C or D to send us your menu" stops being one line. The gutter gives them back, and 60 rather than 64 at the top so the widest windows hold the same 680 as the rest. The spine is 378 and not 380 for the last two of those points: the panel is 1180 including its hairline, so what the two columns divide is 1178. */ --gd-gut: clamp(28px, 4vw, 60px); /* The spine's own gutter, named because the dragon has to undo it: he bleeds to the spine's edges, and a drawing that stopped at the text's margin had half the column to stand in. */ --gd-spine-gut: clamp(20px, 2vw, 32px); /* HOW TALL THE DRAGON IS, WHICH IS THE ONE NUMBER HE IS DRAWN FROM Every pose is framed alike and sized by height, so this is what decides all of them at once. It answers to the width first, because the spine is what he has to stand in and the widest pose is nine parts wide to eight tall: the vw term tracks the spine's own so the widest one always clears it. Then min() against what is left DOWN the spine, which is not a share of the window: the mark, the four rooms and the way out are about 350 points whatever the window is, so on a short one the dragon is the only thing that can give. A plain 40vh looked right at every height anybody works at and pushed Continue later off the bottom at 580. The last max() is so a window too short for any of it still asks for a positive number; below that the spine's own overflow is the answer. The whole answer is then taken down a further third: he was reading as the biggest thing in the panel next to four short lines of type, and dividing the finished expression by 1.5 shrinks him at every width and height the same way rather than requiring the clamp and the two limits to be re-derived by hand. */ --gd-dragon: calc(min(clamp(220px, 23.8vw, 340px), max(120px, 92vh - 350px)) / 1.5); --gd-ease: cubic-bezier(.2, .6, .2, 1); } /* At night the paper is the page and the spine lifts a shade, or the two dark greens sit on top of each other and the panel loses its shape. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-wrap { --gd-spine: #0A3221; --gd-fill: #A94A0B; --gd-spine-lit: #125633; --gd-paper: var(--cream); --gd-scrim: rgba(0, 0, 0, .62); --gd-cast: 0 4px 12px rgba(0, 0, 0, .34), 0 24px 64px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] .gd-wrap { --gd-spine: #0A3221; --gd-fill: #A94A0B; --gd-spine-lit: #125633; --gd-paper: var(--cream); --gd-scrim: rgba(0, 0, 0, .62); --gd-cast: 0 4px 12px rgba(0, 0, 0, .34), 0 24px 64px rgba(0, 0, 0, .5); } /* WHAT HE IS LOOKING AT WHILE HE ANSWERS The real space, whole, blurred and inert: the promise made visible. Far enough back that it is a texture and not a page, or it competes with the one question the panel exists to ask. */ .gd-back { position: fixed; inset: 0; overflow: hidden; filter: blur(16px) saturate(.7); pointer-events: none; user-select: none; opacity: .5; transform: scale(1.03); } .gd-wrap { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vh, 44px) clamp(12px, 3vw, 44px); background: var(--gd-scrim); } /* There is no navigation while the gathering runs, so there is no bar. */ .is-guide .chrome, .is-guide .chrome-solo { display: none; } .is-guide .shell.solo { max-width: none; padding: 0; } /* THE PANEL One rectangle, one hairline, one shadow. It is as tall as it is allowed to be rather than as tall as its contents, so the foot does not walk up and down the screen between one question and the next. */ .gd-panel { position: relative; display: grid; grid-template-columns: clamp(248px, 27vw, 378px) minmax(0, 1fr); width: min(1180px, 100%); height: min(840px, 100%); min-height: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--gd-paper); box-shadow: var(--gd-cast); } /* ---------------------------------------------------------------- spine */ .gd-spine { position: relative; z-index: 1; display: flex; flex-direction: column; padding: clamp(24px, 3.4vh, 40px) var(--gd-spine-gut) clamp(20px, 2.6vh, 32px); background: var(--gd-spine); color: var(--gd-on); overflow: hidden; } /* HOW FAR HE IS, DOWN THE EDGE HE IS WALKING Not a ring in a corner and not a rule under a heading: the spine itself fills, from the top, as he answers. It is read where the eye already crosses from the guide to the question. */ .gd-spine::before, .gd-spine::after { content: ""; position: absolute; top: 0; right: 0; width: 3px; } .gd-spine::before { bottom: 0; background: color-mix(in srgb, var(--gd-on) 15%, transparent); } .gd-spine::after { height: var(--p, 0%); background: var(--gd-accent); border-radius: 0 0 3px 3px; transition: height .4s var(--gd-ease); } .gd-spine:not([data-gd-ring])::before, .gd-spine:not([data-gd-ring])::after { display: none; } /* THE SCREEN'S OWN PLACE, BEHIND THE GUIDE AND NEVER BEHIND THE QUESTION The illustration belonged to the whole panel and washed across the questions, which is a picture standing in front of the work. It lives in the spine now, large, cropped by the spine's edge, at the strength of a watermark: it gives the screen a place and asks for nothing. */ .gd-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .gd-scene-i { position: absolute; left: 50%; bottom: -4%; width: 168%; max-width: none; height: auto; transform: translateX(-50%); opacity: var(--gd-scene-op); filter: var(--gd-scene-filter); } .gd-spine > *:not(.gd-scene) { position: relative; z-index: 1; } .gd-brand { margin: 0; font-family: var(--wordmark); font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: -.01em; color: var(--gd-on); } .gd-brand .gd-dot { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--gd-accent); vertical-align: 2px; } /* THE FOUR ROOMS, STANDING UP A walk of four steps with names is a walk somebody can see the end of. Three states and no fourth: behind him, where he is, still to come. */ .gd-walk { list-style: none; margin: clamp(26px, 4vh, 46px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .gd-w { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border-radius: var(--r); color: var(--gd-on-soft); transition: color .2s var(--gd-ease); } .gd-w-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: var(--r); border: 1px solid var(--gd-on-faint); font-family: var(--body); font-weight: 700; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; } .gd-w-t { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; } /* Behind him: still lit, because what he has answered is worth seeing, and the box is filled rather than outlined, which is the difference between a thing done and a thing waiting. */ .gd-w.is-done { color: color-mix(in srgb, var(--gd-on) 82%, transparent); } .gd-w.is-done .gd-w-n { background: color-mix(in srgb, var(--gd-on) 16%, transparent); border-color: transparent; } /* Where he is: the one row with a ground under it, the number reversed out, and the accent standing at its edge. */ .gd-w.is-here { color: var(--gd-on); background: var(--gd-here); } .gd-w.is-here .gd-w-t { font-weight: 700; } .gd-w.is-here .gd-w-n { background: var(--gd-on); border-color: var(--gd-on); color: var(--gd-spine); } /* One accent at a time: the gauge on the spine's edge is what is orange here, so the row he is on is said by its ground and its reversed number. Two orange marks in one column is two things claiming to be the one that matters. */ /* The same fact on one line, for the width where the list cannot stand up. */ .gd-step { display: none; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--gd-on-soft); } /* A ROOM'S OWN ERRAND, NOT THE FOUR ROOMS STANDING UP His name for what this is, where the numbered list stands the rest of the walk: one room, so no list to stand up. */ .gd-visit-h { margin: clamp(26px, 4vh, 46px) 0 0; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--gd-on); } .gd-visit-sub { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; color: var(--gd-on-soft); } /* THE COUNT IS WHY HE IS STANDING HERE, SO IT LEADS Operations and Menu hand this column the same fact the fields used to open with ("N questions left before you can send"), read off the same sentence the room itself builds so the two can never disagree. Set at the weight and size the room's own name used to hold, not louder: a stat is not a shout, and the guide's one-line reason underneath it is what earns the extra clamp of room above both. */ .gd-visit-count { margin: clamp(26px, 4vh, 46px) 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.25; color: var(--gd-on); } .gd-visit-guide { margin: 8px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--gd-on-soft); } /* HE STANDS AT THE FOOT OF IT The same place on every screen and the same height: a guide who walks beside him. Never a hero, never in a report, never in a letter. SIZED BY HEIGHT, NOT BY WIDTH The pose belongs to the screen, so on My store he is holding a restaurant, which makes that drawing wider than the plain one. Sized across, the wide pose would have come out shorter than the plain one and he would have grown and shrunk as the client walked. Every pose is framed to the same proportions and this reads the one measurement they share. */ /* He has the whole column to stand in, not the part of it the words use: the drawing runs out to both edges of the spine, which is what lets him be twice the size he was without the spine growing into the paper. */ .gd-host { margin-top: auto; padding-top: 24px; margin-left: calc(-1 * var(--gd-spine-gut)); margin-right: calc(-1 * var(--gd-spine-gut)); } .gd-pic { display: block; height: var(--gd-dragon); width: auto; max-width: 100%; margin: 0; } .gd-later { align-self: flex-start; margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--gd-on-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .15s var(--gd-ease); } .gd-later:hover { color: var(--gd-on); } .gd-later-n { display: block; align-self: flex-start; margin-top: 4px; font-size: 11.5px; color: var(--gd-on-soft); } .gd-later:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } /* ---------------------------------------------------------------- sheet */ .gd-sheet { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--gd-paper); } /* THE PANEL SLIDES, IT DOES NOT NAVIGATE Two boards on one track. The questions sit on it; pressing Type it in runs the track leftward and the menu table comes in behind them. Nothing is loaded and nothing is left. */ .gd-deck { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; } .gd-body, .gd-away { flex: 0 0 100%; min-width: 0; overflow-y: auto; transition: transform .38s var(--gd-ease); } .gd-deck.is-away > .gd-body, .gd-deck.is-away > .gd-away { transform: translateX(-100%); } /* WHAT SCROLLS AND WHAT DOES NOT, SAID AT THE EDGE A question leaving the view was cut off mid-letter against the foot. One band of the paper's own colour, drawn over the scroller so nothing in the layout depends on it. Short and mostly solid: a long wash is a smudge. */ .gd-deck::before { content: ""; position: absolute; top: 0; left: 0; right: 12px; height: 20px; z-index: 4; pointer-events: none; background: linear-gradient(to bottom, var(--gd-paper) 0, var(--gd-paper) 45%, rgba(251, 248, 241, 0) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-deck::before { background: linear-gradient(to bottom, var(--gd-paper) 0, var(--gd-paper) 45%, rgba(16, 26, 21, 0) 100%); } } :root[data-theme="dark"] .gd-deck::before { background: linear-gradient(to bottom, var(--gd-paper) 0, var(--gd-paper) 45%, rgba(16, 26, 21, 0) 100%); } /* EVERY SCREEN STARTS ON THE SAME LINE The question used to be centred in whatever height it had, so a short one floated in the middle of an empty panel and the heading landed somewhere new on every press. It is anchored now: same gutter, same first baseline, six screens running. */ .gd-body { padding: clamp(34px, 6vh, 68px) var(--gd-gut) clamp(28px, 5vh, 56px); display: flex; flex-direction: column; align-items: stretch; } /* A SCREEN THAT ASKS SOMETHING STARTS AT THE TOP, A SCREEN THAT SAYS SOMETHING STANDS IN THE MIDDLE Anchoring the questions is what stops the heading landing somewhere new on every press. A message has no question under it to anchor, and pinned to the top of a tall panel it read as the top of a page nobody had finished writing. Written twice, so a browser that does not know the safe keyword keeps plain centring: what safe adds is that a message too tall for the panel starts at the top instead of having its first line cropped. */ .gd-panel.is-say .gd-body { justify-content: center; justify-content: safe center; } /* THE MEASURE, STATED ONCE AND AT THE TOP The room hands its questions over inside three wrappers of its own, and a column that lines its children up on the left lets every one of them shrink to whatever is inside it: a pair of name boxes came out at five hundred points and a list of twelve months spread across a row as wide as one month. The measure is declared on whatever the body's own child happens to be, and the wrappers under it simply fill. */ .gd-body > * { width: 100%; max-width: 680px; margin-left: 0; margin-right: 0; } .gd-body .fields, .gd-body .rq, .gd-body .q-set { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; } /* And a question is a screen here, so it carries none of the spacing that separated it from the twenty questions it sits among in a room. */ .gd-body section.q { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: none; } /* What the walk is not showing. Its own class, because the rules inside a question hide with the hidden attribute and the two must never fight. */ .gd-off { display: none !important; } /* THE DRAGON'S LINE It was a beige speech bubble with a tail, which is a chat application and not this product. It is set as the site sets a statement: the display face, large, with a short rule of the accent over it. The voice is in the typography, and the dragon is standing beside it in the spine. */ .gd-line { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.5vw, 31px); line-height: 1.32; letter-spacing: -.015em; color: var(--green); max-width: 20em; } .gd-line::before { content: ""; display: block; width: 38px; height: 2px; margin: 0 0 clamp(18px, 2.4vh, 26px); background: var(--gd-accent); } .gd-line b, .gd-line strong { font-weight: 700; color: var(--green); } .gd-line + * { margin-top: clamp(26px, 4vh, 44px); } /* Under the headline: the thing to remember, set apart, then the plain sentence that goes with it (sayBlock, guide-page.js). */ .gd-line strong { background: linear-gradient(transparent 64%, color-mix(in srgb, var(--gd-accent) 26%, transparent) 64%); padding: 0 .06em; } .gd-line + .gd-after { margin-top: clamp(20px, 3vh, 28px); } .gd-after { max-width: 34em; } .gd-after + * { margin-top: clamp(26px, 4vh, 40px); } .gd-fact { margin: 0; padding: 14px 18px; border-left: 3px solid var(--gd-accent); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--green) 6%, transparent); font-size: 17.5px; line-height: 1.5; color: var(--ink); } .gd-fact p { margin: 0; } .gd-fact strong { font-weight: 700; color: var(--green); } .gd-fact ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .gd-fact li { position: relative; padding-left: 20px; } .gd-fact li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gd-accent); } .gd-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gray); } .gd-sub strong { font-weight: 700; color: var(--ink); } .gd-fact + .gd-sub, .gd-sub + .gd-sub, .gd-sub + .gd-fact { margin-top: 14px; } .gd-after.is-armed { opacity: 0; transform: translateY(6px); } .gd-after.is-armed.is-in { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; } /* THE ONE FRAUNCES HEADING A SCREEN The question itself on a room's screen, and the guide's own title on the one screen that has no question. Nothing else on the paper is set in the display face. */ .gd-body section.q > .q-lab, .gd-body .gd-lab { display: block; margin: 0 0 4px; padding: 0; font-family: var(--display); font-weight: 700; font-size: clamp(25px, 2.9vw, 36px); line-height: 1.18; letter-spacing: -.02em; color: var(--green); } .gd-body section.q > .q-lab .q-name { font: inherit; color: inherit; } /* THE WORDS THAT CARRY A QUESTION Named by the catalogue, lifted out of the label by the walk's own script. They were printed in a peach block, which is a highlighter pen. They are the accent's ink and nothing else, which is how the site sets the words it wants read first. */ .gd-hi { background: none; color: var(--gd-ink-accent); font: inherit; } /* Why we are asking, under the question and clear of the boxes. */ .gd-body section.q > .q-help, .gd-body .gd-lede { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray); max-width: 56ch; } .gd-body .q-in { margin-top: clamp(22px, 3.2vh, 34px); } /* WHAT A STANDING QUESTION REPORTS, AND WHY THE WALK SAYS NEITHER The room draws a line under the question saying whether the menu has reached us, in one of five voices: not yet, typed, sent, linked, or "build it with me". On the walk the heading asks for one of four ways and the four ways are right there, each showing its own state already (the table has rows, the file list has files, the link box has the link, the D card has its own tick): the line says a second time what a route is already saying in front of it, so neither of the room's two voices is drawn here. */ .gd-body .q-most, .gd-body .all-clear { display: none; } /* The room's own furniture is the room's. Inside the panel the question is the heading, the numbering counts questions he is not being shown, the dot that fills as a room is answered belongs to a room, and "More you can add" is a fold in a page rather than a step in a walk. */ .gd-body .rq-h, .gd-body .rq-head, .gd-body .q-set > h2, .gd-body .fields > h2, .gd-body .q-num, .gd-body .guide-note, .gd-body .fold-h, .gd-body .q-mark, .gd-body .q-n, .gd-body details.more, .gd-body .q-at, .gd-body .q-why { display: none; } .gd-body .q-req .q-lab::after { content: none; } /* Above a room's own question, in place of the walk's numbered steps: where this one stands in the errand, quietly, the same way "Step 2 of 4" says it for the walk itself. */ .gd-qn { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray); } /* IN THE GUIDE, SHOWN MEANS NEEDED A room is a list he looks over and skips about in, so it says which of its questions are owed. A walk hands him one at a time and every one of them is asked of him, so a Needed on every screen is a word that carries no information and reads as a demand. Only what he may pass is marked, and that word is written into the empty box by the walk's own script. */ .gd-body section.q[data-required="1"] .q-name::after { content: none; } .gd-body .q-owed, .gd-body .q-free { display: none; } /* A PART IS A SMALL LABEL, AS THE DISH CARD SHOWS Uppercase DM Sans at eleven, tracked open. It is a label over a box and never a heading: there is one heading on the screen and it is above all of these. */ .gd-body .q-part > .q-sub { display: block; margin: 0 0 9px; font-family: var(--body); font-weight: 700; font-size: 11px; line-height: 1.45; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); } /* THE GROUP IS NOT A CARD HERE In a room a group of parts is boxed, because it is one question among twenty and the box is what says where it begins and ends. On a screen that shows one question the box is a frame drawn round the whole screen. Which parts pair on a line is still the room's decision; the walk only holds the column open. */ .gd-body .q-parts, .gd-body .q[data-kind="group"] .q-parts { background: none; border: 0; padding: 0; border-radius: 0; gap: clamp(20px, 2.8vh, 30px) 22px; } .gd-body .q-part.q-half { min-width: 0; } /* A BOX THAT OPENED BECAUSE OF AN ANSWER IS NOT A NEW QUESTION It belongs to the answer above it, so it is set in the text face at the weight of a sentence: at the label's tracking it read as a second question beside the one he had just answered. */ .gd-body .q-part[data-when] > .q-sub { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--green); } .gd-body .q-part[data-when] { padding-left: 16px; border-left: 2px solid var(--tint-orange); } /* ------------------------------------------------------------- controls */ /* One box, one height, one radius. A field in this account is a rectangle with a hairline and white inside it; what the walk adds is size, because the panel shows one question and can afford to. */ .gd-body .q-ctl input:not([type="checkbox"]):not([type="radio"]), .gd-body .q-ctl textarea, .gd-body .q-ctl select { width: 100%; max-width: 440px; min-height: 50px; padding: 13px 15px; font: inherit; font-size: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); color: var(--green); transition: border-color .15s var(--gd-ease), box-shadow .15s var(--gd-ease); } .gd-body .q-ctl textarea { min-height: 116px; line-height: 1.55; resize: vertical; } .gd-body .q-ctl select { max-width: 340px; appearance: none; padding-right: 40px; background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; } .gd-body .q-ctl input:hover, .gd-body .q-ctl textarea:hover, .gd-body .q-ctl select:hover { border-color: var(--ink-soft); } /* One ring, drawn rather than the browser's, and the same one on every pressable thing in the panel. */ .gd-body .q-ctl input:focus, .gd-body .q-ctl textarea:focus, .gd-body .q-ctl select:focus { outline: none; border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } /* A box with something in it says so quietly, which is the one piece of feedback a form owes somebody filling one in. */ .gd-body .q-ctl input:not(:placeholder-shown) { border-color: var(--ink-soft); } .gd-body .q-ctl input::placeholder, .gd-body .q-ctl textarea::placeholder { color: var(--gray); opacity: .62; } /* An amount is three digits and a phone number is ten: neither wants a box across the panel. */ .gd-body .q-ctl .q-unit { display: inline-flex; align-items: stretch; max-width: 300px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); overflow: hidden; } .gd-body .q-ctl .q-unit:focus-within { border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } .gd-body .q-ctl .q-unit > i, .gd-away .rw-c .q-unit > i { display: inline-flex; align-items: center; padding: 0 4px 0 13px; border: 0; background: none; font-style: normal; font-size: 15px; font-weight: 600; color: var(--gray); } .gd-away .rw-c .q-unit { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); overflow: hidden; } .gd-away .rw-c .q-unit .q-i { border: 0; background: none; padding-left: 4px; } .gd-away .rw-c .q-unit:focus-within { border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } .gd-away .rw-c .q-unit .q-i:focus { box-shadow: none; } .gd-body .q-ctl .q-unit input { border: 0; box-shadow: none; padding-left: 6px; background: transparent; max-width: 190px; } .gd-body .q-ctl .q-unit input:focus { box-shadow: none; } .gd-body .q-ctl .q-money { max-width: 190px; } /* A CHOICE LIST The account's own chip, given the room a walk can give it: the tick keeps its place whether it is showing or not, and a chosen answer takes the accent, which is what a chosen answer does everywhere in this account. */ /* A CHOICE LIST IS A COLUMN, AND TWO COLUMNS ONCE THERE ARE SIX Wrapped, a set of five answers of different lengths came out three on three lines and two side by side on the fourth, which reads as an accident rather than as a set. Every list is a grid now: one column while there are few enough to read down, two once there are six, which is the rule the rooms and the walk already share. */ .gd-body .chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; max-width: 620px; } .gd-body .chips .chip { display: block; } .gd-body .chips .chip span { display: block; padding: 13px 18px 13px 40px; font-size: 15px; font-weight: 600; line-height: 1.4; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); } /* THE SAME RING MY STORE'S OWN PANEL DRAWS, IN THE WALK'S OWN ACCENT Unfilled and outlined at rest, filled solid the moment it is picked: the ring keeps its room whether it is showing or not, so picking one never moves the words in the ones beside it, and the row it sits in barely moves at all -- a tint, not a repaint, the same two-part answer (the mark and the field around it) My store's own panel already gives an edited question. */ .gd-body .chips .chip span::before { left: 17px; top: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--raise); } .gd-body .chips .chip:hover span { border-color: var(--ink-soft); } .gd-body .chips .chip:has(input:checked):hover span { border-color: var(--gd-ink-accent); } .gd-body .chips .chip:has(input:checked) span { background: var(--tint-orange); border-color: var(--gd-fill); } .gd-body .chips .chip:has(input:checked) span::before { border-color: var(--gd-fill); background: var(--gd-fill); box-shadow: inset 0 0 0 3px var(--raise); } .gd-body .chips .chip:has(input[type=checkbox]) span::before { border-radius: 5px; } .gd-body .chips .chip input:focus-visible + span { outline: 2px solid var(--gd-accent); outline-offset: 2px; } /* SIX OR MORE STAND IN TWO COLUMNS A run of eight answers down one column is a list he scrolls; two columns is a set he reads. Plain rows of two: a chip that stands alone once used to keep the full width for the reason it stands alone, and an odd chip before or after it took the full width too so no row read as a mistake. Mathieu asked for two boxes a row, no exceptions, so the grid is just the grid now and the last row of an odd list is one box with nothing beside it. */ .gd-body .chips:has(> .chip:nth-child(6)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .gd-body .q-half .chips:has(> .chip:nth-child(6)) { grid-template-columns: 1fr; } /* The number stands where the ring would have, on the ground the chosen chip gives it. SOLID, ON ITS OWN, NOT LEANING ON THE ROW'S OWN FILL The row behind it is a tint now rather than a solid block, so the badge carries its own contrast instead of borrowing the row's: the same fill the ring itself turns, cream on top of it, wherever the row underneath sits. */ .gd-body .chip-on .chip-n { position: absolute; z-index: 1; left: 12px; top: calc(50% - 10px); min-width: 20px; height: 20px; margin: 0; padding: 0 5px; border-radius: var(--r); background: var(--gd-fill); color: var(--cream); font-size: 12px; font-weight: 800; } /* On a ranked list the number says which and in what order, so it and the ring never show together. */ .gd-body .chips[data-rank] .chip:has(input:checked) span::before { opacity: 0; } /* A CHOICE ON A TABLE LINE IS A TOGGLE BESIDE THE DISH, NOT A LIST A question's answers stand one under the other; a choice that belongs to one line of a table (sell more or drop, why a dish stays off) stands beside that line's box, side by side and a size smaller, so each line reads as one thing: this dish, this answer. */ .gd-body .rw .rw-c .chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: none; } .gd-body .rw .rw-c .chips .chip span { padding: 11px 14px 11px 36px; font-size: 14px; } .gd-body .rw .rw-c .chips .chip span::before { left: 13px; top: calc(50% - 8px); width: 16px; height: 16px; } /* A CHOICE OF THREE OR MORE ON A TABLE LINE TAKES A LINE OF ITS OWN Beside the box, four answers stood in a column taller than the line. Such a line is two lines now: the box first (the remove cross keeps its place at the end of it), then the choice's own name and its answers side by side under it. */ .gd-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-c:not(:has(.chips)){grid-column:1 / -2} .gd-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-x{grid-row:1;grid-column:-2 / -1} .gd-body .rw .rw-c:has(.chips > .chip:nth-child(3)){grid-column:1 / -1;display:flex;align-items:center; flex-wrap:wrap;gap:8px 14px} .gd-body .rw .rw-c:has(.chips > .chip:nth-child(3)) > .rw-m{display:block;margin:0} .gd-body .rw .rw-c:has(.chips > .chip:nth-child(3)) .chips{flex-wrap:wrap} @media (max-width:700px){ .gd-body .rw:has(> .rw-c .chips > .chip:nth-child(3)) > .rw-x{grid-row:auto;grid-column:auto} } .gd-body .q-many { margin: 0 0 12px; font-size: 13px; color: var(--gray); } .gd-body .q-other { margin-top: 12px; } /* THE LISTBOX IS THE FIELD The account draws its own, and inside the panel it is a box like every other box: same height, same hairline, same ring. */ /* The account's listbox carries the field's own class as well as its own, so the wrapper was drawing a box round the box. The frame belongs to the press inside it. */ .gd-body .ls.q-i, .gd-routes .gd-route-f .ls.q-i { border: 0; background: none; padding: 0; } .gd-body .ls { max-width: 440px; } .gd-body .ls .ls-b { min-height: 50px; padding: 13px 15px; font-size: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); } .gd-body .ls .ls-b:hover { border-color: var(--ink-soft); } .gd-body .ls .ls-b:focus-visible, .gd-body .ls .ls-b[aria-expanded="true"] { border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } /* THE WEEK Seven days and the line that fills them. Rules between the days rather than boxes around them: it is a table, and the quietest thing a table can be is lines. */ .gd-body .hrs { width: 100%; max-width: 560px; gap: 0 14px; } .gd-body .hr { padding: 9px 0; border-top: 1px solid var(--line); } .gd-body .hr:first-of-type { border-top: 0; } .gd-body .hr-all { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--raise); } .gd-body .hr-d { font-size: 15px; font-weight: 600; } .gd-body .hrs .q-i { min-height: 42px; padding: 9px 11px; font-size: 15px; width: 7.4em; min-width: 7.4em; max-width: 7.4em; } .gd-body .hr-x { font-size: 13.5px; color: var(--gray); } /* THE BOX HE HAS TO DROP A FILE IN IS THE POINT OF THE QUESTION In a room it sits under an answer already given and a faint outline is right. Here, handing the file over IS the step. */ .gd-body .q-drop { display: flex; flex-direction: column; max-width: 440px; } .gd-body .q-drop > .hint { order: 1; margin: 18px 0 8px; font-size: 13.5px; } .gd-body .q-drop > .dz { order: 2; } .gd-body .q-drop > .q-drop-h { order: 3; } .gd-body .dz-box { padding: 22px 20px; font-size: 15px; border-radius: var(--r); border: 1px dashed var(--ink-soft); background: var(--raise); } /* The sentence in the box wraps rather than being cut off: on a telephone it was ending in an ellipsis, which is a box that will not say what it is for. */ .gd-body .dz-t, .gd-routes .dz-t { white-space: normal; overflow: visible; text-overflow: clip; } .gd-body .dz-box:hover { border-color: var(--gd-accent); background: var(--warm); } /* A NOTE ABOUT A BOX A promise, a permission, a sentence that ends a screen. Always the same object: a hairline band with the accent standing at its left edge, as wide as its own sentence and never wider. */ .gd-note, .gd-body .q-drop > .q-drop-h, .gd-away .gd-way-note { display: block; width: fit-content; max-width: 100%; margin: 16px 0 0; padding: 2px 0 2px 15px; border: 0; border-left: 2px solid var(--gd-accent); background: none; font-size: 13.5px; line-height: 1.55; color: var(--gray); font-style: normal; } .gd-note b, .gd-note strong { font-weight: 700; color: var(--green); } /* Grab's data replaces what he entered: said in the orange a warning is. */ .gd-note.gd-warn { border-left-color: var(--orange); color: var(--green); } .gd-note.gd-warn strong { color: var(--orange); } /* ---------------------------------------------- the welcome and the breaths */ .gd-eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gd-ink-accent); } /* WHAT TO HAVE BESIDE HIM, AS A LIST AND NOT AS THREE CARDS Three boxes in a row is a price table. It is a short list of things to go and find, so it is set as one: a name, a sentence, a rule between them. */ .gd-rows { width: 100%; display: flex; flex-direction: column; } .gd-row { display: block; padding: 16px 0; border-top: 1px solid var(--line); } .gd-row:first-child { border-top: 0; padding-top: 0; } /* THE DISPLAY FACE IS THE SCREEN'S OWN TITLE, NEVER WHAT SITS UNDER IT The same rule the setup road keeps: card and row titles, option names and their markers are the body face, bold. */ /* The guide asks one thing at a time and holds Continue until it is answered, so "Needed" beside the question says nothing the screen does not. */ .gd-body .q-tag, .gd-away .q-tag { display: none; } .gd-row h3 { margin: 0 0 4px; font-family: var(--body); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--green); } .gd-row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--gray); } .gd-hand-t { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gd-ink-accent); } .gd-hand { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.7; } .gd-after { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--gray); } .gd-go { margin: 28px 0 0; } /* ------------------------------------------------------- the four routes */ /* A, B, C, D The letters are set the way the site sets the parts of the method: the display face, in the accent, large enough to be the address of the row. The rows are separated by rules and not by four boxes, because four boxes with a coloured tab each is a price table again. */ .gd-routes { width: 100%; display: flex; flex-direction: column; } .gd-routes .gd-route { position: relative; display: grid; grid-template-columns: 0 minmax(0, 1fr) auto; align-items: start; gap: 4px 0; width: 100%; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; color: var(--green); } .gd-routes .gd-route:first-child { border-top: 0; padding-top: 4px; } .gd-routes .gd-route-h { grid-column: 2; display: block; font-family: var(--body); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--green); } .gd-routes .gd-route-n { position: absolute; left: 0; top: 20px; font-family: var(--body); font-weight: 800; font-size: 24px; line-height: 1; color: var(--gd-accent); } .gd-routes .gd-route:first-child .gd-route-n { top: 2px; } .gd-routes .gd-route .gd-route-b { grid-column: 2; display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--gray); } .gd-routes .gd-route-more { margin: 12px 0 8px; font-size: 13px; color: var(--gray); } .gd-routes .gd-route-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 18px; color: var(--gd-accent); transition: transform .2s var(--gd-ease); } /* Only "Type it in" is a press, and it looks like one (Mathieu, 1 October): a filled button that names what it opens, rather than an arrow at the edge of a line of text. With the account's own corner (--r, the one Continue and every other press wear), not a pill (3 October). */ .gd-routes .gd-route-cta { margin-left: 16px; padding: 11px 18px; border-radius: var(--r); background: var(--gd-accent); color: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap; } .gd-routes button.gd-route:hover .gd-route-cta { transform: none; filter: brightness(.95); } .gd-routes button.gd-route { cursor: pointer; font: inherit; } .gd-routes button.gd-route:hover .gd-route-go { transform: translateX(5px); } .gd-routes button.gd-route:hover .gd-route-h { color: var(--gd-ink-accent); } .gd-routes button.gd-route:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } .gd-routes .gd-route .dz, .gd-routes .gd-route-f { grid-column: 2; margin-top: 14px; max-width: 460px; } .gd-routes .gd-route .dz-box { padding: 18px; font-size: 14.5px; } /* WHAT LANDED, ON THE CARD THAT BROUGHT IT The table is behind the panel, so the card says what it now holds, in the account's settled green, with the way to look at it. */ .gd-routes .gd-route-ok { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r); background: rgba(30, 122, 77, .09); font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--green); } .gd-routes .gd-route-tick { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: var(--cream); font-size: 13px; font-weight: 800; } .gd-routes .gd-route-see { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--gd-ink-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .gd-routes .gd-route-see:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } .gd-routes .gd-route-f { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; } .gd-routes .gd-route-f .q-i { min-height: 46px; padding: 12px 14px; font-size: 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); color: var(--green); } .gd-routes .gd-route-f select.q-i { flex: 0 0 auto; width: auto; min-width: 170px; appearance: none; padding-right: 38px; background-image: var(--sel-arrow); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px 16px; } .gd-routes .gd-route-f input.q-i { flex: 1 1 170px; min-width: 0; } /* The account swaps a select for its own listbox, which is a block as wide as it is allowed to be: told to be as wide as its longest name, so the address box can stand beside it rather than under it. */ .gd-routes .gd-route-f .ls { flex: 0 0 auto; width: auto; min-width: 170px; max-width: 210px; } .gd-routes .gd-route-f .q-i:focus { outline: none; border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } /* THE PRICES HE TOLD US ALREADY EXIST Not a route of its own: it stands only once a file or a link carries his menu and he has already said, on the pricing screen, that prices exist somewhere. No letter of its own, so it reads as what it is, a follow-up to the row above it rather than a peer of the four. */ /* SELF-SUFFICIENT, NOT BORROWED FROM THE ROUTE CLASS The pricing card carries the route class too, since it is never in the page unless it is standing among the other three. The one below D is always in the page so a live toggle can show and hide it without a fetch of its own, and a hidden row the smoke suite still counts as one of "the four routes" is the wrong kind of correct. So the row's own base is written here rather than leaned on. */ .gd-routes .gd-price-confirm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 4px 10px; width: 100%; margin: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; color: var(--green); } .gd-routes .gd-price-confirm .gd-route-h, .gd-routes .gd-price-confirm .gd-route-b { grid-column: 1; } .gd-price-confirm-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .gd-price-confirm-go button { min-height: 46px; padding: 12px 20px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); font: inherit; font-weight: 700; color: var(--green); cursor: pointer; } .gd-price-confirm-go button:hover { border-color: var(--gd-accent); } .gd-price-confirm-go button.is-on { background: var(--gd-fill); border-color: var(--gd-fill); color: var(--cream); } .gd-price-confirm-go button:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } .gd-price-ask { margin: 12px 0 0; font-size: 13px; font-weight: 700; color: var(--gd-ink-accent); } /* THE SAME LINE, WHERE THE TABLE IS The away panel's own version of the note above: red would say he has done something wrong, and typing a dish is never wrong here. The accent is what every other "this is what we still need" line in the panel uses. */ .gd-away .gd-price-owed { display: block; width: fit-content; max-width: 100%; margin: 12px 0 22px; padding: 2px 0 2px 15px; border-left: 2px solid var(--gd-ink-accent); background: none; font-size: 13.5px; line-height: 1.55; font-weight: 700; color: var(--gd-ink-accent); } /* ----------------------------------------------------- the Grab account */ .gd-body .ac-steps { margin: 0; padding: 0; list-style: none; max-width: 560px; } .gd-body .ac-steps > li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); } .gd-body .ac-steps > li:first-child { border-top: 0; } .gd-body .ac-n { grid-column: 1; display: inline-flex; align-items: center; font-family: var(--body); justify-content: center; width: 24px; height: 24px; border-radius: var(--r); background: var(--tint-green); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green); } .gd-body .ac-say { grid-column: 2; font-size: 15px; line-height: 1.55; } .gd-body .ac-mail, .gd-body .ac-mine, .gd-body .warn { grid-column: 2; margin: 10px 0 0; } .gd-body .ac-safe { margin: 24px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--gray); max-width: 560px; } .gd-body .ac-safe li + li { margin-top: 5px; } /* HE SAYS HE HAS DONE IT BEFORE THE BUTTON WAKES The press writes a fact we cannot see from here, so it sleeps until he says so, and the tick is the loudest thing on the screen after the instructions. */ .gd-tick { display: flex; align-items: flex-start; gap: 12px; margin: 26px 0 0; padding: 16px 18px; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r); background: var(--warm); font-size: 15px; line-height: 1.5; cursor: pointer; } .gd-tick input { margin: 3px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--gd-accent); } .gd-body input[type="checkbox"], .gd-body input[type="radio"], .gd-away input[type="checkbox"] { accent-color: var(--gd-accent); } .gd-body .hr-x input { width: 16px; height: 16px; } .gd-tick b { font-weight: 700; } .gd-go .do { font-size: 15px; padding: 14px 26px; } /* ------------------------------------------------------------- the foot */ .gd-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 2vh, 20px) var(--gd-gut); border-top: 1px solid var(--line); background: var(--gd-paper); } /* The line that says why nothing moves while a file travels: a row of its own above Back and Continue, so neither of them is pushed aside. */ .gd-foot:has(.gd-wait:not([hidden])) { flex-wrap: wrap; } .gd-wait { flex: 1 1 100%; margin: 0 0 -4px; font-size: 13.5px; line-height: 1.4; color: var(--gd-accent); font-weight: 600; } /* Back is a word and not an arrow: an arrow is a symbol he has to read as a word anyway. Quiet, because going back is never the thing being asked. */ .gd-back-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 11px 4px; border: 0; background: none; color: var(--gray); cursor: pointer; transition: color .15s var(--gd-ease); } .gd-back-btn::before { content: "\2190"; margin-right: 8px; } .gd-back-btn:hover:not(:disabled) { color: var(--green); } .gd-back-btn:disabled { opacity: .35; cursor: default; } .gd-back-btn:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } .gd-foot .do { font-size: 15px; padding: 14px 30px; letter-spacing: -.005em; } .gd-foot .do[disabled] { opacity: .45; } .gd-foot .do:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } /* Skip stands beside Continue, not opposite it: it is a second way forward on a visit from a room, not a rival action to Back. Quiet the same way Back is quiet, since nothing here is owed and pressing it is never the thing being asked either. */ .gd-foot-go { display: flex; align-items: center; gap: 16px; margin-left: auto; } /* THE PHOTOGRAPHS CAN WAIT, SAID IN A FRAME OF ITS OWN (Mathieu, 3 October) Above the boxes, so the way on without them is read before the boxes. */ .gd-photos-later { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--orange); background: var(--tint-orange); } .gd-photos-later b { display: block; font-size: 15.5px; color: var(--ink); } .gd-photos-later p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .gd-photos .rp-shots { margin-top: 16px; } .gd-skip-btn { font: inherit; font-size: 14px; font-weight: 700; padding: 11px 4px; border: 0; background: none; color: var(--gray); cursor: pointer; transition: color .15s var(--gd-ease); } .gd-skip-btn:hover { color: var(--green); } .gd-skip-btn:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } /* Invisible, not gone: removing either button would pull Continue back across the foot on the one slide (the intro) that has nothing to its left, and forward again the moment a real question restored it. Kept in place and unseen instead, so Continue never moves. */ .gd-back-btn.is-off, .gd-skip-btn.is-off { visibility: hidden; } /* TWO BLINKS WHEN THE LAST OWED ANSWER LANDS It is the only thing on the panel that changed, and he is looking at the box he has just filled, not at the foot of the page. A sheen crosses it once and what is left is an ordinary lit button. */ .do.gd-wake { position: relative; overflow: hidden; } .do.gd-wake::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%); transform: translateX(-100%); animation: gd-wake .72s var(--gd-ease) 1; } @keyframes gd-wake { to { transform: translateX(100%); } } /* ------------------------------------------------------ the help bubble */ /* ONE MARK PER QUESTION, AND THE GUIDE'S IS THE ONLY ONE The room draws a details of its own holding the same words; the walk removes it and puts a real button on the label, so the bubble answers to one thing. */ .gd-q { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; vertical-align: 1px; border: 1px solid var(--line); border-radius: 50%; background: var(--raise); font: inherit; font-size: 10px; font-weight: 700; line-height: 1; color: var(--gray); cursor: pointer; transition: border-color .15s var(--gd-ease), color .15s var(--gd-ease); } .gd-q:hover, .gd-q[aria-expanded="true"] { border-color: var(--gd-accent); color: var(--gd-ink-accent); } .gd-q:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 2px; } .gd-body .q-part { position: relative; } /* HIDDEN BY SIGHT AND NOT BY DISPLAY The script places it by measuring it: it reads the bubble's own width and slides it left by exactly as much as it would otherwise have overrun the panel. A bubble that is display:none measures nought, so the clamp had nothing to clamp and every bubble near the right edge opened straight off the paper. Laid out and simply not shown, it has a width to be measured before it appears. */ .gd-body .q-part > .q-help.q-under { position: absolute; z-index: 20; visibility: hidden; opacity: 0; pointer-events: none; width: max-content; max-width: 320px; margin: 0; padding: 12px 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); box-shadow: var(--shadow-card, 0 8px 24px rgba(9,56,34,.12)); font-size: 13.5px; line-height: 1.55; color: var(--green); transition: opacity .15s var(--gd-ease); } .gd-body .q-part.is-said > .q-help.q-under { visibility: visible; opacity: 1; pointer-events: auto; } /* ---------------------------------------------------------- the scroller */ /* THE PANEL DRAWS ITS OWN BAR On an overlay platform the browser's is a thread nobody can see, and what it paints is not ours to decide. This one is drawn from the numbers the scroller already holds, so it looks the same everywhere and is there for exactly as long as there is more to read. */ .gd-body, .gd-away { scrollbar-width: none; } .gd-body::-webkit-scrollbar, .gd-away::-webkit-scrollbar { width: 0; height: 0; } .gd-rail { position: absolute; top: 14px; right: 6px; bottom: 14px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 14px; } .gd-rail-t { position: relative; flex: 1 1 auto; width: 5px; border-radius: 5px; background: var(--line); cursor: pointer; } .gd-rail-g { position: absolute; left: 0; right: 0; top: 0; border-radius: 5px; background: var(--ink-soft); opacity: .75; cursor: grab; transition: opacity .15s var(--gd-ease); } .gd-rail-g:hover, .gd-rail-g:active { opacity: 1; } .gd-rail-g:active { cursor: grabbing; } .gd-rail-go { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border: 0; background: none; color: var(--ink-soft); cursor: pointer; } .gd-rail-go:hover { color: var(--green); } .gd-rail-go svg { width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ------------------------------------------------------- the menu table */ .gd-away { padding: clamp(24px, 4vh, 44px) var(--gd-gut) clamp(28px, 5vh, 56px); display: block; text-align: left; } .gd-away > * { margin-left: 0; margin-right: 0; } .gd-away-back { margin: 0 0 20px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--gray); cursor: pointer; } .gd-away-back:hover { color: var(--green); } /* The room's furniture stays in the room: its heading, the line about where the menu stands, the empty state and the link form are answers to a page he is not on. The table is what he came across for. THE STATE LINE, THE NAME AND THE EMPTY NOTE CARRY THE ROOM'S OWN NAMES NOW, since menu-room-css.js gave them one of their own: this still has to name them, because a class this rule does not know is a class it cannot hide. */ .gd-away .mr-name, .gd-away .mr-state, .gd-away .mr-empty, .gd-away .mn-link, .gd-away .mn-said, .gd-away .mn-sugg, .gd-away .dc-pickr, .gd-away h1, .gd-away .lede, .gd-away hr, .gd-away .rw-cap, .gd-away .rq-h, .gd-away .rw-head, .gd-away .mn-way + .mn-way, .gd-away .q-most, .gd-away .mn-ph-here, .gd-away .mn-ph-note, .gd-away .mn-have-h, .gd-away .mn-have, .gd-away [data-menu-figures], .gd-away .hint { display: none; } /* And no frame around any of it. In the room the rules separate the table from the two other ways in and from the calculator; here it is the only thing on the board, so every one of them is a line drawn round everything. NAMED THROUGH THE ROOM'S OWN WRAPPER NOW, NOT BY .gd-away ALONE The fold and its label wear real card chrome of their own since the redesign, scoped under that same wrapper, at the same specificity this reset used to win on by sitting later in the sheet alone. Naming the wrapper here as well, on every selector card chrome actually reaches, is a true extra class, so this reset wins on specificity and not on load order any more. */ .gd-away .mn-room .mn-ways, .gd-away .mn-room .mn-way, .gd-away .mn-room .mn-way .qs, .gd-away .mn-room .mn-way > summary, .gd-away .q-set, .gd-away .rq, .gd-away [data-rows], .gd-away .qs > *, .gd-away section, .gd-away .q-in, .gd-away details, .gd-away .mn-room .mn { background: transparent; border: 0; padding: 0; margin: 0; box-shadow: none; } .gd-away .mn-room .mn-way > summary { margin-bottom: 8px; cursor: default; list-style: none; } .gd-away .mn-way > summary::-webkit-details-marker { display: none; } .gd-away .mn-room .mn-way > summary:hover, .gd-away .mn-room .mn-way > summary:focus, .gd-away .mn-room .mn-way[open] > summary { background: transparent; color: inherit; border-color: transparent; text-decoration: none; box-shadow: none; } .gd-away .mn-room .mn-way > summary:hover .mn-way-h { color: inherit; } .gd-away .mn-room .mn-way-h { font-family: var(--body); font-weight: 700; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--green); } .gd-away .gd-way-note { margin: 12px 0 22px; } /* ONE DISH IS ONE LINE, AND THE ONE HE IS TYPING IS A CARD Eight boxes a dish, four dishes down a panel, and he has lost the thread. The dishes he has done are a list he wants to read back; the one he is on is the only one drawn as a form. Two densities of one component, not two components. */ .gd-away [data-rows] > [data-row] { position: relative; padding: 12px 14px; border-radius: var(--r); border: 1px solid transparent; background: transparent; cursor: pointer; transition: background-color .15s var(--gd-ease), border-color .15s var(--gd-ease); } .gd-away [data-rows] > [data-row] + [data-row] { margin-top: 2px; } .gd-away [data-rows] > [data-row]:not(.is-open) { display: flex; align-items: center; gap: 16px; padding-top: 11px; padding-bottom: 11px; border-top: 1px solid var(--line); border-radius: 0; } .gd-away [data-rows] > [data-row]:not(.is-open):hover { background: var(--warm); } .gd-away [data-row].is-open { padding: 22px 22px 18px; margin: 10px 0; border-color: var(--line); background: var(--raise); cursor: default; box-shadow: var(--shadow-card, 0 8px 24px rgba(9, 56, 34, .07)); } .gd-away [data-row].is-open::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; background: var(--gd-accent); } /* Folded, the words are what he typed and not boxes to type in: a box invites a press, and the press he wants there is the one that opens the dish. */ .gd-away [data-row]:not(.is-open) > .rw-c { display: none; } .gd-away [data-row]:not(.is-open) > .rw-c[data-col="dish"], .gd-away [data-row]:not(.is-open) > .rw-c[data-col="cat"] { display: flex; } .gd-away [data-row]:not(.is-open) > .rw-c[data-col="dish"] { flex: 2 1 0; min-width: 0; } .gd-away [data-row]:not(.is-open) > .rw-c[data-col="cat"] { flex: 1 1 0; min-width: 0; margin-right: auto; } .gd-away [data-row]:not(.is-open) .q-i { pointer-events: none; border: 0; background: transparent; padding: 0; min-height: 0; font-size: 15.5px; font-weight: 600; color: var(--green); } .gd-away [data-row]:not(.is-open) .rw-m { margin-bottom: 1px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); } .gd-away [data-row]:not(.is-open) .rw-ph { display: none; } .gd-away [data-row]:not(.is-open) > .rw-x { flex: 0 0 auto; align-self: center; margin: 0 0 0 14px; } .gd-away .rw { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 20px 16px; align-items: start; } .gd-away .rw-c { display: flex; flex-direction: column; min-width: 0; } .gd-away .rw-c > .rw-m { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); } .gd-away .rw-c[data-col="dish"] > .rw-m, .gd-away .rw-c[data-col="price"] > .rw-m { color: var(--green); } .gd-away .rw-c .q-i, .gd-away .rw-c .q-unit, .gd-away .rw-c .rw-star { min-height: 42px; } .gd-away .rw-c .q-i { padding: 10px 12px; font-size: 15px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raise); color: var(--green); } .gd-away .rw-c .q-i:focus { outline: none; border-color: var(--gd-accent); box-shadow: 0 0 0 3px rgba(232, 112, 31, .15); } .gd-away .rw-c .rw-star { display: inline-flex; align-items: center; justify-content: center; width: 44px; } .gd-away .rw-c[data-col="desc"] { grid-column: 1 / -1; } /* A WORD, NOT A CROSS A way out of something should look like a way out: a quiet underlined word at the end of the row. The room keeps its cross, which is right in a table of twenty lines. */ .gd-away .rw-x, .rw-twin { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--gray); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .gd-away .rw-x { font-size: 0; } .gd-away .rw-x::before { content: var(--gd-kill, "Suppress"); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; } .gd-away .rw-x:hover::before, .rw-twin:hover { color: var(--green); } .gd-away .rw-acts { display: flex; align-items: center; justify-content: flex-end; gap: 18px; grid-column: 1 / -1; margin-top: 4px; } .gd-away [data-row]:not(.is-open) > .rw-acts { flex: 0 0 auto; margin: 0 0 0 12px; } /* The per-dish photograph, drawn like every other upload in the account. */ .gd-away .rw-ph { display: flex; flex-direction: column; } .gd-away .rw-ph .dz { display: flex; flex-direction: column; gap: 8px; } .gd-away .rw-ph .dz-box { display: inline-flex; width: auto; margin: 0; gap: 9px; padding: 11px 15px; border: 1px dashed var(--ink-soft); border-radius: var(--r); background: transparent; } .gd-away .rw-ph .dz-box:hover { border-color: var(--gd-accent); } .gd-away .rw-ph .dz-i { width: 16px; height: 16px; } .gd-away .rw-ph .dz-t { font-size: 13.5px; font-weight: 500; color: var(--green); } .gd-away .rw-ph .dz-list:empty { display: none; } .gd-away .rw-ph .gd-note { width: 100%; margin: 6px 0 0; font-size: 12px; } /* Adding a dish is the one thing on this board he does over and over. */ .gd-away .rw-add { margin-top: 18px; height: 44px; padding: 0 22px; border: 0; border-radius: var(--r); background: var(--gd-fill); color: var(--cream); font-weight: 700; font-size: 14px; cursor: pointer; } .gd-away .rw-add:hover { background: var(--gd-ink-accent); } .gd-away .rw-add:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; } /* --------------------------------------------------------- the last screen */ .gd-panel.is-end .gd-foot { justify-content: flex-end; } /* ------------------------------------------------------------- movement */ /* THE DRAGON'S LINE WRITES ITSELF Letter after letter along the thread of the sentence, at the speed of somebody talking. It is a character speaking, so the line behaves like speech and not like text that was already on the page. */ @media (prefers-reduced-motion: no-preference) { .gd-said .gd-c { animation: gd-ink .01s linear both; animation-delay: var(--d, 0ms); } .gd-hands.is-armed .gd-row, .gd-hands.is-armed .gd-note, .gd-hands.is-armed .gd-eyebrow { opacity: 0; } .gd-hands.is-armed.is-in .gd-eyebrow, .gd-hands.is-armed.is-in .gd-row, .gd-hands.is-armed.is-in .gd-note { animation: gd-rise .42s var(--gd-ease) both; animation-delay: calc(var(--i, 0) * 70ms); } } .gd-word { display: inline-block; white-space: nowrap; } .gd-c { opacity: 1; } .gd-said .gd-c { opacity: 0; } @keyframes gd-ink { to { opacity: 1; } } @keyframes gd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .gd-body, .gd-away, .gd-spine::after, .gd-routes .gd-route-go { transition: none; } } /* ----------------------------------------------------------------- Thai */ /* Thai has no case and no room for Latin tracking: an uppercase label with a seventh of an em between its letters breaks the tone marks off the glyphs they belong to. The label keeps its job by being small and grey. */ :lang(th) .gd-body .q-part > .q-sub, :lang(th) .gd-eyebrow, :lang(th) .gd-hand-t, :lang(th) .gd-away .rw-c > .rw-m, :lang(th) .gd-away [data-row]:not(.is-open) .rw-m { text-transform: none; letter-spacing: 0; font-size: 13.5px; } :lang(th) .gd-line, :lang(th) .gd-body section.q > .q-lab, :lang(th) .gd-body .gd-lab, :lang(th) .gd-away .mn-way-h, :lang(th) .gd-routes .gd-route-h, :lang(th) .gd-row h3 { letter-spacing: 0; line-height: 1.4; } :lang(th) .gd-w-t { font-size: 13px; } /* ----------------------------------------------------------- narrow */ /* THE SPINE LIES DOWN Below the width where a column and a question both fit, the spine becomes a band across the top: the mark, where he is on one line, and the way out. The list of rooms cannot stand up in a band, so the line says the same thing, and the fill runs along the band's own bottom edge. */ @media (max-width: 900px) { .gd-wrap { padding: 0; } .gd-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; border-radius: 0; box-shadow: none; } .gd-spine { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; } .gd-spine::after { top: auto; bottom: 0; right: auto; left: 0; width: var(--p, 0%); height: 2px; transition: width .4s var(--gd-ease); } .gd-walk { display: none; } .gd-step { display: block; margin-left: auto; text-align: right; } .gd-visit-h { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 600; text-align: right; } .gd-visit-sub { display: none; } .gd-visit-count { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 700; text-align: right; } .gd-visit-guide { display: none; } .gd-scene { display: none; } .gd-host { margin: 0 0 0 auto; padding: 0; order: 3; } .gd-pic { height: 27px; margin: 0; } .gd-later { order: 4; align-self: center; margin: 0 0 0 4px; font-size: 12px; } .gd-brand { font-size: 18px; } .gd-line { font-size: clamp(21px, 5.6vw, 26px); } .gd-fact { font-size: 16px; padding: 12px 14px; } .gd-sub { font-size: 15px; } .gd-body section.q > .q-lab, .gd-body .gd-lab { font-size: clamp(23px, 6vw, 29px); } } /* At the width of a telephone the band gives up its two smallest parts: the dragon is a picture of twenty-seven pixels and the way out is a word competing with where he is. The way out goes to the foot, beside Back, because at this width the foot is the only bar he can reach with a thumb. */ @media (max-width: 620px) { .gd-spine { gap: 10px; padding: 11px 14px; } .gd-host { display: none; } /* A screen with no step to show has room for him in the band, and the two screens that have none are the two he is the whole of: the way out and the thank-you. */ .gd-spine:not([data-gd-ring]) .gd-host { display: block; margin-left: auto; } .gd-spine:not([data-gd-ring]) .gd-pic { height: 27px; align-self: center; } .gd-step { font-size: 12px; } .gd-body { padding: 26px 18px 34px; } .gd-away { padding: 22px 18px 34px; } .gd-foot { padding: 12px 18px; gap: 10px; } .gd-foot .do { padding: 13px 22px; font-size: 14.5px; } .gd-back-btn { font-size: 13.5px; } .gd-body .q-ctl input:not([type="checkbox"]):not([type="radio"]), .gd-body .q-ctl textarea, .gd-body .q-ctl select, .gd-body .ls { max-width: none; } .gd-body .chips:has(> .chip:nth-child(6)) { grid-template-columns: 1fr; } .gd-body .q-parts:has(> .q-part.q-half) { grid-template-columns: 1fr; } /* THE WEEK, ON A TELEPHONE Three columns do not fit across 354 points, and the one that gave way was Closed, which came down onto a line of its own under a day name with nothing beside it. The day gets its own line and the three things he sets share the one below it. */ .gd-body .hrs { display: block; } .gd-body .hr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px 0; } .gd-body .hr-d { flex: 1 0 100%; } .gd-body .hr-t { flex: 1 1 auto; gap: 6px; } .gd-body .hr-x { flex: 0 0 auto; margin-left: auto; } .gd-body .hrs .q-i { width: 6.5em; min-width: 0; max-width: none; flex: 1 1 0; } .gd-body .hr-all { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; } .gd-body .hr-all .hr-d { flex: 1 0 100%; } .gd-body .hr-all .do, .gd-body .hr-all button { flex: 0 0 auto; margin-left: auto; } .gd-routes .gd-route { grid-template-columns: 34px minmax(0, 1fr) auto; } .gd-routes .gd-route-n { font-size: 24px; } .gd-rail { display: none !important; } } .side .s-grp{list-style:none;margin:0} .side .s-grp > ul{list-style:none;margin:0;padding:0} .side button.s-cap{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; background:none;border:0;border-radius:6px;font-family:inherit;text-align:left;cursor:pointer;line-height:inherit} .side button.s-cap:hover{color:var(--ink-muted,var(--gray))} .side button.s-cap:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:2px} .side .s-chev{flex:none;opacity:.7;transition:transform .15s ease} /* Folded, the group says on its caption how many things in it are new to him: the counts it hides would otherwise be gone with it. */ .side .s-fresh{display:none;margin-left:auto;padding:1px 7px;border-radius:999px;font-size:10px;letter-spacing:.04em; background:var(--canvas,#fff);color:var(--zone-ink,var(--ink-muted))} @media(min-width:901px){ html[data-fold~="community"] .side .s-grp[data-grp="community"]:not(.is-open) > ul{display:none} html[data-fold~="community"] .side .s-grp[data-grp="community"]:not(.is-open) .s-chev{transform:rotate(-90deg)} html[data-fold~="community"] .side .s-grp[data-grp="community"]:not(.is-open) .s-fresh{display:inline-block} } @media(max-width:900px){ .side .s-grp,.side .s-grp > ul{display:contents} .side button.s-cap{display:list-item;width:auto;cursor:default;pointer-events:none} .side .s-chev{display:none} } @media(prefers-reduced-motion:reduce){.side .s-chev{transition:none}}