/* ------------------------------------------------------------------ --ink IS TWO DIFFERENT THINGS AND THIS FILE IS LOADED BY BOTH. tl-system.css defines it as a bare RGB triplet, `--ink: 246,243,236`, for use inside rgb() and rgba(). crm.css and shell.css define it as a colour, `--ink: #f3f2f0`. This stylesheet is loaded by every site, so a rule here that asks for --ink first and --text only as a fallback resolved to a colour on Shell and to the string "246,243,236" everywhere else, which is invalid. It was invisible for as long as it only touched `color`, because an invalid colour makes the property inherit and the inherited value is the page's text colour, which is what was wanted anyway. It became visible the moment one of them set a `background`: background does not inherit, so the currency toggle's chosen option lost its fill and both sides of a two-way control looked the same. The order is therefore always --text first with --ink as the fallback: --text where it exists, and --ink only on Shell and CRM, where it is a colour. Twenty three rules were the wrong way round on 29 September, and verify/checks/components.js now holds the order. ------------------------------------------------------------------ */ /* ========================================================================== Turtle Labs components. One definition per thing, used by all seven sites. A surface supplies colour and nothing else. This exists because the same handful of components had been written eight and nine times over. A text input was styled independently as `form input`, `.referform input`, `.sheet-form input`, `.audit-form input`, `.reaudit input`, `.field input`, `.signin-form input` and `.inline-form input`; the selectable choice card as `.pf-opt`, `.q-scale`, `.q-opts` and `.g-opt`. Every correction then had to be made eight times, and the ones that were missed are what a design review keeps finding. The rule for adding to this file: a component goes here the second time it is needed. The rule for using it: a site may set tokens, and may not redefine padding, radius, border or type. checks/components.js enforces the second half. Tokens a surface is expected to provide, all with fallbacks here so a component still renders if one is missing: --bg --bg2 --surface --text --muted --faint --line --line2 --cta --cta-ink --cta-text --accent-soft --r-sm --r-md --r-lg --r-pill The accent is the one that bites. Three surfaces name it --cta, three name it --accent, and tl-system named it --green and nothing else, so every filled component on the group, Useful Store and BrandOS surfaces resolved its ink to the literal #fff and rendered white text on a white card in the light theme. Each surface now declares --cta and --cta-ink, and the fallbacks below chain through all three names so a new surface that forgets is merely wrong rather than invisible. checks/tokens.js asserts the declaration. ========================================================================== */ /* ---- prose keeps a measure, on every site -------------------------------- The rule lived in tl-system.css, and Shell and WebOS do not load that file, so their paragraphs had no measure at all: 120 and 143 characters a line on pages that are otherwise careful. This file is the one thing all eight sites load, which makes it the only place a rule like this can be true everywhere. :where() so it carries no specificity. Anything that has deliberately set its own width still wins, and this only reaches the paragraphs nobody had thought about, which are the ones that were wrong. ------------------------------------------------------------------------ */ :where(p, li, dd, blockquote) { max-width: var(--measure, 68ch); } /* ---- rhythm -------------------------------------------------------------- Two primitives instead of a margin on every element. Stacks own the space between their children, so a component dropped into one is spaced without knowing where it is. ------------------------------------------------------------------------ */ .tl-stack { display: flex; flex-direction: column; gap: var(--tl-gap, 18px); } .tl-stack-sm { --tl-gap: 10px; } .tl-stack-lg { --tl-gap: 28px; } .tl-row { display: flex; flex-wrap: wrap; gap: var(--tl-gap, 14px); align-items: center; } .tl-row-tight { --tl-gap: 8px; } /* A heading in a row is one of the row's items, not a paragraph: its bottom margin pushed the text up off the icon's centre line. Only direct children of a card had the margin cleared, and these sit inside .tl-row. */ .tl-row > :is(h2, h3, h4) { margin: 0; } /* ---- section heading ----------------------------------------------------- Eyebrow, heading, lede. Written out per section across four sites, with the gaps between the three parts different every time. ------------------------------------------------------------------------ */ .tl-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .tl-head .tl-eyebrow { margin: 0; } .tl-head h2, .tl-head h3 { margin: 0; } .tl-head p { margin: 0; color: var(--muted); font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.6; max-width: 62ch; } .tl-head.is-centred { align-items: center; text-align: center; } .tl-head.is-centred p { margin-inline: auto; } .tl-eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--cta-text, var(--cta, var(--accent, var(--muted)))); display: inline-flex; align-items: center; gap: 10px; } .tl-eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; } /* ---- surfaces ------------------------------------------------------------ One card. Variants change colour and weight, never the geometry, which is why a corner or a padding can be corrected in one place. ------------------------------------------------------------------------ */ .tl-card { background: var(--surface, var(--bg2)); border: 1px solid var(--line2, var(--line)); border-radius: var(--r-lg, 18px); padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 14px; } .tl-card.is-quiet { background: transparent; } .tl-card.is-raised { background: var(--bg2, var(--surface)); } .tl-card.is-accent { border-color: var(--cta, var(--accent, var(--green))); } /* The one a reader is meant to take: filled, not outlined. */ .tl-card.is-chosen { background: var(--cta, var(--accent, var(--green))); border-color: var(--cta, var(--accent, var(--green))); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); position: relative; } /* Opacity, on text, on a filled card, is how a deliberate ink becomes an accidental one: .82 of white on the WebOS blue is 4.27 and fails. A secondary voice on a filled card is a different colour, not the same colour worn thin, and here that colour is the card's own ink. */ .tl-card.is-chosen :is(p, li, span):not(.tl-badge) { color: inherit; opacity: 1; } .tl-card.is-chosen :is(h2, h3, h4, strong) { color: inherit; opacity: 1; } .tl-card > :is(h2, h3, h4) { margin: 0; } .tl-card > p:not([class]) { margin: 0; color: var(--muted); line-height: 1.6; } .tl-card > p { margin: 0; line-height: 1.6; } /* Equal-width card grids, one definition. */ .tl-cards { display: grid; gap: clamp(12px, 1.4vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tl-col, 260px)), 1fr)); } .tl-cards.is-wide { --tl-col: 320px; } .tl-cards.is-narrow { --tl-col: 200px; } /* ---- badge --------------------------------------------------------------- The pill. Takes its colour from --tone, so one rule covers a status, a category and a price label. ------------------------------------------------------------------------ */ .tl-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill, 999px); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in srgb, var(--tone, var(--cta, #888)) 14%, transparent); /* --cta-text before --cta. A badge is eleven-point uppercase text on a 14% wash of its own hue, so it needs the ink value of that hue and not the fill: on the light theme the BrandOS #00884B is the button green and reads 3.39 against the card it sits on. Standing rule 4, reaching a label through a fallback chain that named the fill. */ color: var(--tone-ink, var(--tone, var(--cta-text, var(--cta, var(--accent, var(--green)))))); border: 1px solid color-mix(in srgb, var(--tone, var(--cta, #888)) 34%, transparent); white-space: nowrap; } .tl-badge.is-solid { background: var(--tone, var(--cta, var(--accent, var(--green)))); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); border-color: transparent; } /* Sitting on the lip of a card, which is where "most chosen" goes. */ .tl-badge.is-pinned { position: absolute; top: -11px; left: 22px; } .tl-card:has(> .tl-badge.is-pinned) { padding-top: clamp(26px, 2.6vw, 34px); } @supports not selector(:has(*)) { .tl-card > .tl-badge.is-pinned + * { margin-top: 8px; } } /* A badge pinned to a filled card takes the card's ink, not the spectrum hue its position happens to give it: a crimson tag on a green card reads as a warning rather than as a recommendation. */ .tl-card.is-chosen > .tl-badge.is-solid { background: var(--cta-ink, var(--accent-ink, #fff)); color: var(--cta, var(--accent, var(--green))); } /* A pinned pill hangs half off the card, so half of it is over the PAGE and half over the card, and it needs an edge on the half that has left. Measured 26 September: on WebOS dark the pill was 1.05:1 against the page, and once that was fixed the light theme showed the same fault the other way round, a white pill at 1.04:1 on a near-white page. Reported as "the labels read as not placed right", which is what an invisible outline looks like. The ring is the card's own fill, so it disappears against the card and draws the silhouette exactly where the pill leaves it. */ .tl-card.is-chosen > .tl-badge.is-pinned { box-shadow: 0 0 0 2px var(--cta, var(--accent, var(--green))); } /* And a button on one. The secondary weight is accent-tinted, which is accent-on-accent once the card is filled with the accent: measured at 1:1, which is not low contrast, it is no contrast. On a filled card the button inverts, the way the plan cards already do it by hand. */ .tl-card.is-chosen .btn, .tl-card.is-chosen .btn.primary { background: var(--cta-ink, var(--accent-ink, #fff)); border-color: var(--cta-ink, var(--accent-ink, #fff)); color: var(--cta, var(--accent, var(--green))); } @media (hover: hover) { .tl-card.is-chosen .btn:hover, .tl-card.is-chosen .btn.primary:hover { filter: brightness(1.08); background: var(--cta-ink, var(--accent-ink, #fff)); color: var(--cta, var(--accent, var(--green))); } } /* ---- form ---------------------------------------------------------------- A field is a label and a control. The label is always present and always above: a placeholder is not a label, it disappears the moment somebody starts typing, and that is when they most need to know what the box is. ------------------------------------------------------------------------ */ .tl-form { display: flex; flex-direction: column; gap: 16px; } /* ---- ONE FIELD AND ITS BUTTON -------------------------------------------- Reported 28 September: "button and email input field is too wide, unnecessary, keep them in one line make it half each." He is right and the reason is worth writing down. A form inherits the width of the section it sits in, and a section here is the full measure of the page. That is correct for prose and wrong for a control: an input thirteen hundred pixels wide is asking for an email address in a box that would hold a paragraph, so it reads as a much bigger commitment than typing one word. The field is sized to what goes in it. The consent line and the note below it keep the full width of the form, because those are prose and prose wants the measure. */ .tl-form.is-inline { display: grid; max-width: 620px; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; align-items: end; } .tl-form.is-inline > .field, .tl-form.is-inline > .tl-field { grid-column: 1; margin: 0; } .tl-form.is-inline > button { grid-column: 2; grid-row: 1; white-space: nowrap; } .tl-form.is-inline > .agree, .tl-form.is-inline > p { grid-column: 1 / -1; } @media (max-width: 620px) { /* One below the other, and still not the width of the page. */ .tl-form.is-inline { grid-template-columns: minmax(0, 1fr); } .tl-form.is-inline > button { grid-column: 1; grid-row: auto; } } /* Two fields to a row on anything wider than a phone: a six-field form in one column reads as a much longer form than it is. */ .tl-form-grid { display: grid; gap: 14px 16px; grid-template-columns: 1fr; } @media (min-width: 620px) { .tl-form-grid { grid-template-columns: 1fr 1fr; } } .tl-form-grid .tl-field.is-full { grid-column: 1 / -1; } .tl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .tl-field > label, .tl-label { font-size: 12.5px; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 7px; } .tl-label .tl-opt { font-weight: 400; color: var(--faint); font-size: 11.5px; } .tl-field :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=date], input:not([type]), textarea, select), .tl-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); background: var(--bg, transparent); border: 1px solid var(--line, rgba(128,128,128,.3)); /* --r-md, not --r-sm. Standing rule 7 says a control's corner is --r-md and nothing else, and this said --r-sm, so the same control rendered two different corners depending on whether it happened to sit inside a form: 10px on its own, 16px when the generic control rule also matched. The help panel's search box is the one outside a form, so it was the one that looked wrong. Found 21 September. */ border-radius: var(--r-md, 14px); transition: border-color .18s ease, box-shadow .18s ease; } .tl-field textarea { resize: vertical; min-height: 92px; } /* The arrow was here and was five pixels of filled triangle, which at a normal viewing distance is not an arrow, it is a speck. Reported 24 September as the control having no arrow at all, which is what it amounts to. Drawn below as a 13px stroked chevron instead. */ .tl-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .tl-field :is(input, textarea, select):focus-visible { outline: none; border-color: var(--cta, var(--accent, var(--green))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta, var(--accent, var(--green))) 22%, transparent); } .tl-field :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--invalid, #E4553F); } .tl-field .tl-note { font-size: 14.5px; color: var(--faint); } .tl-field .tl-note.is-error { color: var(--invalid, #E4553F); } /* A checkbox with its sentence, which is always a consent line here. */ .tl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .tl-check input { margin: 2px 0 0; flex: none; accent-color: var(--cta, var(--accent, var(--green))); } /* ---- button -------------------------------------------------------------- The second full copy of a component, found by the gallery rather than by reading: tl-system.css and webos.css each defined the whole .btn family, with different padding (28px against 20px) and opposite secondary styling, and the tracker loaded neither, so its buttons were the browser's. The secondary weight is accent-tinted rather than a hairline outline. Most buttons on these sites are the secondary one, and as a transparent pill it read as a disabled control next to body text. ------------------------------------------------------------------------ */ /* Every chain here ends in a literal, added 27 September. .btn reached for --cta, then --accent, then --green, and defined none of them: this file is the component layer and the tokens live in the site stylesheets. A page that loads tl-components.css and nothing else therefore got `background: ` (transparent) and `color: <#fff>`, because the ink chain alone had a literal at the end. A white label on a transparent ground, which on the panel's white card was an invisible Sign in button: the control was there, 48px tall and clickable, and could not be seen. Reported 27 September as "/studio is completely white". A literal at the end of every chain cannot be overridden by accident, since any site that defines --cta still wins the var() lookup first. */ .btn, .tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px clamp(20px, 2vw, 28px); font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; border-radius: var(--r-pill, 999px); border: 1px solid var(--cta, var(--accent, var(--green, #34C759))); color: var(--cta-text, var(--cta, var(--accent, var(--green, #34C759)))); background: var(--accent-soft, color-mix(in srgb, var(--cta, var(--accent, var(--green, #34C759))) 10%, transparent)); transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .3s ease; } @media (hover: hover) { .btn:hover, .tl-btn:hover { background: var(--cta, var(--accent, var(--green, #34C759))); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); border-color: var(--cta, var(--accent, var(--green, #34C759))); transform: translateY(-2px); } } .btn.primary, .tl-btn.primary { background: var(--cta, var(--accent, var(--green, #34C759))); border-color: var(--cta, var(--accent, var(--green, #34C759))); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); } @media (hover: hover) { .btn.primary:hover, .tl-btn.primary:hover { filter: brightness(1.08); transform: translateY(-2px); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); box-shadow: 0 10px 24px rgba(0,0,0,.18); } } /* A third weight, for the times a button genuinely should recede: a back link, a cancel. Opt in by name rather than by being the default. `.ghost` is the name the CRM and Find Your Passion had already given it. */ .btn.quiet, .btn.ghost, .tl-btn.quiet { background: transparent; border-color: var(--line); color: var(--text); } @media (hover: hover) { .btn.quiet:hover, .btn.ghost:hover, .tl-btn.quiet:hover { background: var(--bg2, var(--surface)); border-color: var(--text); color: var(--text); } } .btn:disabled, .tl-btn:disabled { opacity: .45; cursor: default; transform: none; } .btn.wide, .tl-btn.wide { width: 100%; } .btn:focus-visible, .tl-btn:focus-visible { outline: 2px solid var(--cta, var(--accent, var(--green, #34C759))); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn.primary:hover, .tl-btn, .tl-btn:hover { transform: none; } } /* ---- choice -------------------------------------------------------------- The selectable card: a radio drawn as a target big enough to hit. Written four times over as .pf-opt, .q-scale, .q-opts and .g-opt, each with its own hit area and its own idea of what "selected" looks like. ------------------------------------------------------------------------ */ .tl-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .tl-choices.is-stacked { grid-template-columns: 1fr; } .tl-choice { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 15px 44px 15px 17px; cursor: pointer; background: var(--surface, var(--bg2)); color: var(--text); border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: var(--r-md, 14px); transition: border-color .18s ease, background-color .18s ease, transform .18s ease; } .tl-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .tl-choice .tl-choice-t { font-weight: 700; font-size: 15px; } .tl-choice .tl-choice-d { font-size: 14.5px; color: var(--muted); line-height: 1.5; } /* The ring, always drawn, so the control reads as choosable before it is hot. */ .tl-choice::after { content: ''; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line, rgba(128,128,128,.4)); transition: border-color .18s ease, box-shadow .18s ease; } @media (hover: hover) { .tl-choice:hover { border-color: var(--cta, var(--accent, var(--green))); transform: translateY(-1px); } .tl-choice:hover::after { border-color: var(--cta, var(--accent, var(--green))); } } .tl-choice:has(input:checked) { border-color: var(--cta, var(--accent, var(--green))); background: var(--accent-soft, color-mix(in srgb, var(--cta, #888) 10%, transparent)); } .tl-choice:has(input:checked)::after { border-color: var(--cta, var(--accent, var(--green))); box-shadow: inset 0 0 0 4px var(--cta, var(--accent, var(--green))); } .tl-choice:has(input:focus-visible) { outline: 2px solid var(--cta, var(--accent, var(--green))); outline-offset: 2px; } /* Without :has, the selected state still has to be visible. */ @supports not selector(:has(*)) { .tl-choice input:checked ~ .tl-choice-t { text-decoration: underline; } } @media (prefers-reduced-motion: reduce) { .tl-choice, .tl-choice:hover { transform: none; } } /* ---- progress ------------------------------------------------------------ A stepped form that does not say how long it is asks somebody to commit to an unknown number of questions. ------------------------------------------------------------------------ */ .tl-progress { display: flex; flex-direction: column; gap: 8px; } .tl-progress-bar { height: 5px; border-radius: var(--r-pill, 999px); background: var(--line2, rgba(128,128,128,.18)); overflow: hidden; } .tl-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--cta, var(--accent, var(--green))); transition: width .35s cubic-bezier(.22,.61,.36,1); } .tl-progress-text { font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .04em; } /* ---- figures ------------------------------------------------------------- Numbers presented as numbers. A result read as a sentence is a result nobody remembers. ------------------------------------------------------------------------ */ .tl-figures { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); } .tl-figure { display: flex; flex-direction: column; gap: 4px; padding: clamp(16px, 1.8vw, 22px); background: var(--surface, var(--bg2)); border: 1px solid var(--line2, var(--line)); border-radius: var(--r-md, 14px); border-top: 3px solid var(--tone, var(--cta, var(--accent, var(--green)))); } .tl-figure-n { font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: clamp(26px, 3vw, 36px); line-height: 1; color: var(--tone-ink, var(--tone, var(--cta, var(--accent, var(--green))))); letter-spacing: -.02em; } .tl-figure-l { font-size: 14.5px; font-weight: 700; color: var(--text); } .tl-figure-s { font-size: 14.5px; color: var(--faint); line-height: 1.5; } /* ---- disclosure ---------------------------------------------------------- Used by the Commons and wanted in several other places, so it lives here. ------------------------------------------------------------------------ */ .tl-fold { border-top: 1px solid var(--line2, var(--line)); } .tl-fold:last-of-type { border-bottom: 1px solid var(--line2, var(--line)); } .tl-fold > summary { cursor: pointer; padding: 15px 2px; font-weight: 700; font-size: 15.5px; list-style: none; display: flex; align-items: center; gap: 10px; } .tl-fold > summary::-webkit-details-marker { display: none; } .tl-fold > summary::before { content: '+'; width: 18px; flex: none; font-weight: 400; font-size: 18px; color: var(--muted); } .tl-fold[open] > summary::before { content: '\2212'; } .tl-fold > summary:hover { color: var(--cta-text, var(--cta)); } .tl-fold-body { padding: 0 2px 20px 28px; } .tl-fold-body > * { margin-top: 0; } @media (max-width: 620px) { .tl-fold-body { padding-left: 4px; } } /* ---- side note ----------------------------------------------------------- Guidance that belongs beside the thing it is about rather than under it. ------------------------------------------------------------------------ */ .tl-aside { display: grid; gap: clamp(18px, 2.4vw, 34px); align-items: start; grid-template-columns: 1fr; } @media (min-width: 900px) { .tl-aside { grid-template-columns: 1.35fr .85fr; } } .tl-aside-note { display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 24px); background: var(--bg2, var(--surface)); border: 1px solid var(--line2, var(--line)); border-radius: var(--r-md, 14px); } .tl-aside-note h3 { margin: 0; font-size: 15px; } .tl-aside-note ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; } .tl-aside-note li { font-size: 14.5px; line-height: 1.55; color: var(--muted); } .tl-aside-note li::marker { color: var(--cta, var(--accent, var(--green))); } /* ---- names the components answer to -------------------------------------- Four surfaces had already invented a field: `.field` on BrandOS and Shell, `.referform` and `.sheet-form` on Find Your Passion. Rather than rewrite every form's markup in one go, those names point at the component here and their local rules are deleted, so there is one definition either way. This list is expected to shrink. A form moves to .tl-field markup when it is next touched, and its name comes out of here. ------------------------------------------------------------------------ */ .field, .referform label, .sheet-form label, .day-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; } .field > span, .referform label > span, .sheet-form label > span { font-size: 12.5px; font-weight: 700; color: var(--text); } .field :is(input, textarea, select), .referform :is(input, textarea, select), .sheet-form :is(input, textarea, select), .day-form :is(input, textarea) { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--text); background: var(--bg, transparent); border: 1px solid var(--line, rgba(128,128,128,.3)); border-radius: var(--r-sm, 10px); transition: border-color .18s ease, box-shadow .18s ease; } .field textarea, .referform textarea, .sheet-form textarea, .day-form textarea { resize: vertical; min-height: 92px; } /* ---- a select has to look like a select ---------------------------------- Reported 24 September against the Studio contact form: "Choose one should have a dropdown arrow to show that it is a dropdown." The native arrow is drawn by the platform and is the first thing appearance:none removes, which is why the control read as an empty text box with a word in it. tl-system.css draws one for its own forms; the .field component, which is what every server-rendered form on the estate actually uses, drew none. So it is here, once, for all of them. A stroked chevron rather than a filled triangle, because the triangle is what a 2006 form control looks like, and drawn with a mask so it takes currentColor and is therefore right in both themes by construction rather than by a second declaration somebody has to remember. */ .field:has(> select), .tl-field:has(> select), .referform :is(label):has(> select), .sheet-form :is(label):has(> select) { position: relative; } .field:has(> select) select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .field:has(> select)::after, .tl-field:has(> select)::after { content: ''; position: absolute; right: 15px; bottom: 17px; width: 13px; height: 13px; pointer-events: none; background-color: var(--muted, currentColor); -webkit-mask: var(--chev) center / 13px 13px no-repeat; mask: var(--chev) center / 13px 13px no-repeat; } :root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); } /* Without :has, the chevron goes on the control itself. Two gradients rather than a mask, because the fallback should not need a second modern feature. */ @supports not selector(:has(*)) { .field select, .tl-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 21px) 54%, calc(100% - 15px) 54%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } } .field :is(input, textarea, select):focus-visible, .referform :is(input, textarea, select):focus-visible, .sheet-form :is(input, textarea, select):focus-visible, .day-form :is(input, textarea):focus-visible { outline: none; border-color: var(--cta, var(--accent, var(--green))); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta, var(--accent, var(--green))) 22%, transparent); } .referform, .sheet-form { display: flex; flex-direction: column; gap: 16px; } .referform .row { display: grid; gap: 14px 16px; grid-template-columns: 1fr; } @media (min-width: 620px) { .referform .row { grid-template-columns: 1fr 1fr; } } /* ========================================================================== Infographic components. Every design review so far has produced the same sentence about a different page: text-heavy, plain, dull, needs icons, needs colour, make it an infographic. That kept recurring because each page was composed by hand, so richness depended on whoever wrote it remembering to add it. These are the pieces that sentence is asking for. lib/page-kit.js renders them from data, so a section built through the kit cannot come out plain: it has a slot for the number, the icon and the hue whether or not anyone thought about them. ========================================================================== */ /* ---- the spectrum --------------------------------------------------------- Hand a list of anything this class and its children take the brand spectrum in order, looping after nine. Every component below reads --tone, so one class colours a whole section without a per-item decision. The ink tones, not the display tones: these land on text and on small marks, which WCAG asks 4.5:1 of. No literal fallbacks, deliberately: the first version of this carried the dark-theme values as fallbacks, and on a surface that had not declared the palette every one of them was used on a light page at 3.4:1. A missing token should be visibly missing, not quietly wrong. tl-system.css and webos.css both declare the set, per theme, which between them covers every surface. ------------------------------------------------------------------------ */ .tl-spectrum > *:nth-child(9n+1) { --tone: var(--tl-crimson-ink); } .tl-spectrum > *:nth-child(9n+2) { --tone: var(--tl-red-ink); } .tl-spectrum > *:nth-child(9n+3) { --tone: var(--tl-amber-ink); } .tl-spectrum > *:nth-child(9n+4) { --tone: var(--tl-green-ink); } .tl-spectrum > *:nth-child(9n+5) { --tone: var(--tl-teal-ink); } .tl-spectrum > *:nth-child(9n+6) { --tone: var(--tl-cyan-ink); } .tl-spectrum > *:nth-child(9n+7) { --tone: var(--tl-blue-ink); } .tl-spectrum > *:nth-child(9n+8) { --tone: var(--tl-indigo-ink); } .tl-spectrum > *:nth-child(9n+9) { --tone: var(--tl-violet-ink); } /* ---- edged card ----------------------------------------------------------- A card with its hue down the leading edge. Asked for by name: "gradient borders on left of the container". The edge is a gradient from the hue to transparent rather than a flat rule, so a column of them reads as a set rather than as a row of tabs. ------------------------------------------------------------------------ */ .tl-card.is-edged { position: relative; overflow: hidden; padding-left: clamp(20px, 2.2vw, 30px); } .tl-card.is-edged::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--tone, var(--cta, var(--accent))) 0%, color-mix(in srgb, var(--tone, var(--cta, var(--accent))) 30%, transparent) 100%); } /* Topped instead, for a grid where a left edge would read as a margin. */ .tl-card.is-topped { position: relative; overflow: hidden; } .tl-card.is-topped::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tone, var(--cta, var(--accent))) 0%, color-mix(in srgb, var(--tone, var(--cta, var(--accent))) 25%, transparent) 100%); } /* ---- icon chip ------------------------------------------------------------ A square plate carrying an emoji, an SVG or two letters, tinted with the item's hue. Text-based on purpose: an icon font is another network request and another thing to go wrong, and two letters read at any size. ------------------------------------------------------------------------ */ .tl-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-sm, 10px); font-size: 17px; line-height: 1; font-weight: 800; letter-spacing: .01em; background: color-mix(in srgb, var(--tone, var(--cta, var(--accent))) 15%, transparent); color: var(--tone, var(--cta, var(--accent))); } .tl-icon.is-sm { width: 30px; height: 30px; font-size: 13.5px; border-radius: var(--r-xs, 8px); } .tl-icon.is-lg { width: 48px; height: 48px; font-size: 22px; border-radius: var(--r-md, 14px); } .tl-icon.is-solid { background: var(--tone, var(--cta, var(--accent))); color: var(--cta-ink, var(--accent-ink, var(--green-ink, #fff))); } .tl-icon.is-round { border-radius: var(--r-pill, 999px); } /* An emoji must not be recoloured, and must not inherit the plate's weight. */ .tl-icon .emo { font-weight: 400; font-style: normal; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; } /* ---- steps ---------------------------------------------------------------- A numbered sequence: the six fortnights, the five days, the path. The number is the ornament, in the item's hue, and the rule between items is what makes it read as an order rather than as a list of cards. ------------------------------------------------------------------------ */ .tl-steps { display: grid; gap: clamp(12px, 1.4vw, 18px); grid-template-columns: repeat(auto-fit, minmax(var(--tl-col, 250px), 1fr)); } .tl-steps.is-stacked { grid-template-columns: 1fr; gap: 0; } .tl-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2vw, 24px); background: var(--surface, var(--bg2)); border: 1px solid var(--line); border-radius: var(--r-md, 14px); } .tl-steps.is-stacked .tl-step { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 16px; align-items: start; } .tl-steps.is-stacked .tl-step:last-child { border-bottom: 1px solid var(--line); } .tl-step-n { font-family: 'Outfit', system-ui, sans-serif; font-weight: 900; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; color: var(--tone, var(--cta, var(--accent))); } /* Two children and two columns: the number, and everything else in one body. The number column is a fixed width, so every row's text starts at the same place. It used to be auto, sized to each row's own number, so headings started at 59, 63 and 64 pixels down the same list; and before that the text was loose children of the grid, so a fourth child or a spanning rule put a heading underneath the number instead of beside it. */ .tl-steps.is-stacked .tl-step-n { font-size: clamp(24px, 3vw, 36px); } .tl-step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .tl-steps.is-stacked .tl-step-body { gap: 4px; } /* A price list (the products page). One row per item: the name and what it is on the left, the price on the right, and a retainer note across the bottom. Stacked one under another, as plain stacked steps are, each app took four lines and left the right half of the row empty. */ /* The number sits with the name it belongs to, not in the middle of the row: centred, it drifted below the name on any item with a note. A narrower column and a matched line box put the two on one line. */ .tl-steps.is-priced .tl-step { padding-block: 18px; align-items: start; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; } .tl-steps.is-priced .tl-step-n { font-size: 26px; line-height: 1.32; } .tl-steps.is-priced .tl-step-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 2px; align-items: baseline; } .tl-steps.is-priced .tl-step-body > h3 { grid-column: 1; grid-row: 1; font-size: 17px; } .tl-steps.is-priced .tl-step-body > p { grid-column: 1; } .tl-steps.is-priced .tl-step-when { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--text, var(--ink)); } /* The retainer note reads as another line of the same item, so it starts where the name and the description start. The shared style indents it behind a grey rule, which at this size looked like a layout fault rather than an aside, and cost it a line of width. */ .tl-steps.is-priced .tl-step-body > .tl-step-note { grid-column: 1 / -1; margin-top: 6px; border-left: 0; padding-left: 0; color: var(--muted); } @media (max-width: 560px) { .tl-steps.is-priced .tl-step-when { grid-row: 1; align-self: baseline; font-size: 14px; } } .tl-step-when { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .tl-step h3, .tl-step h4 { margin: 0; font-size: 16px; } .tl-step p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .tl-step .tl-step-out { font-size: 14.5px; line-height: 1.55; color: var(--muted); padding-top: 8px; border-top: 1px dashed var(--line2, var(--line)); } .tl-step .tl-step-out strong { color: var(--tone, var(--text)); } /* A standing note on a step: why a per-month price repeats, on the four BrandOS apps that are retainers. Left rule rather than the dashed top rule of tl-step-out, because it is an aside about the step rather than its conclusion, and the two must not read as the same kind of thing. */ .tl-step .tl-step-note { font-size: 14.5px; line-height: 1.55; color: var(--muted); border-left: 2px solid var(--line2, var(--line)); padding-left: 10px; } /* A consent row: a checkbox, and the sentence it is consenting to. This lived in crm.css alone, so the same markup on BrandOS had no spacing and the checkbox sat against its own label. Shared markup, shared rule. */ .agree { display: flex; gap: 9px; align-items: flex-start; margin: 4px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--muted); } .agree input { margin-top: 3px; flex: none; } .agree a { color: var(--cta-text, var(--cta)); } /* Room between the fields of a form, and before the button under them. */ .tl-form .field + .field { margin-top: 14px; } .tl-form .field + .agree { margin-top: 16px; } .tl-form .btn { margin-top: 4px; } /* ---- who / what / why ----------------------------------------------------- Three short answers instead of three paragraphs. The heading is the question, so the copy underneath does not have to restate it. ------------------------------------------------------------------------ */ .tl-qa { display: grid; gap: clamp(12px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .tl-qa-item { display: flex; flex-direction: column; gap: 9px; } .tl-qa-item > h3 { margin: 0; font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tone, var(--cta-text, var(--cta))); } .tl-qa-item > p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); } /* ---- highlights ----------------------------------------------------------- The band directly under a hero: what this is, in four or five marks, before anyone has to read a paragraph. ------------------------------------------------------------------------ */ .tl-highlights { display: grid; gap: clamp(10px, 1.2vw, 16px); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .tl-highlight { display: flex; gap: 13px; align-items: flex-start; padding: clamp(14px, 1.5vw, 18px); border: 1px solid var(--line); border-radius: var(--r-md, 14px); background: color-mix(in srgb, var(--tone, var(--cta)) 6%, transparent); } .tl-highlight-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tl-highlight-t { font-size: 14.5px; font-weight: 700; line-height: 1.35; } .tl-highlight-d { font-size: 14.5px; line-height: 1.5; color: var(--muted); } /* ---- inclusions ----------------------------------------------------------- What a package contains, as rows rather than prose. Three columns: the mark, what it is, and the one word for what it does. ------------------------------------------------------------------------ */ /* Pills: a centred, wrapping row of short names. Matches the sectors on the BrandOS home page, which were a vertical list on the website audit page. */ .tl-pills { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .tl-pill { padding: 11px 22px; border-radius: 999px; background: var(--bg2, var(--surface)); border: 1px solid var(--line); color: var(--text, var(--ink)); font-size: 15px; line-height: 1.3; } .tl-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .tl-include { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line2, var(--line)); } .tl-include:last-child { border-bottom: 0; } .tl-include-n { font-size: 14.5px; font-weight: 700; min-width: 0; } .tl-include-d { font-size: 14.5px; color: var(--muted); display: block; font-weight: 400; } .tl-include-v { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--tone, var(--faint)); white-space: nowrap; } .tl-includes { container-type: inline-size; } @container (max-width: 330px) { .tl-include { grid-template-columns: auto 1fr; } .tl-include-v { grid-column: 2; } } @supports not (container-type: inline-size) { @media (max-width: 560px) { .tl-include { grid-template-columns: auto 1fr; } .tl-include-v { grid-column: 2; } } } /* A choice used as a scale point: five across a row, so the label is the whole target and the row reads as a scale rather than as five cards. */ .tl-choice.is-compact { padding: 13px 14px; text-align: center; align-items: center; } .tl-choice.is-compact::after { display: none; } .tl-choice.is-compact .tl-choice-t { font-size: 13.5px; font-weight: 600; } .tl-choice.is-compact:has(input:checked) .tl-choice-t { font-weight: 800; } .tl-choices.is-scale { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } /* ---- phone ---------------------------------------------------------------- A country code and a number, drawn as one control. The two sit in a single bordered box with the rule between them, because they are one answer: a select beside an input, each with its own border, reads as two unrelated questions. The code is a real