/* Seenfold, the campaign builder: /build/1 .. /build/4. * * THIS IS THE OLD "START A CAMPAIGN" WIZARD'S STYLESHEET, PORTED. * * The wizard that is live at /start-campaign (content/start-campaign.html) is the * checkout this flow replaces, and a buyer who has seen one and then the other * must not be able to tell that anything under them changed. So the class * vocabulary here is that page's vocabulary, rule for rule: `.obh` for the * wordmark bar, `.obsteps` for the step rail, `.obgrid` for the two columns, * `.wiz` for the card, `.obside` / `.obprev` for the order summary, `.plats`, * `.seg`, `.field`, `.hint` for the controls inside it. * * That is not only a look. app.css already knows these names: it paints `.wiz` in * the dark theme, sets the placeholder colour on `.wiz .field`, and gives * `.pv-row .k`, `.pv-total .k`, `.pv-total-sub` and `.vhint` their weight. * Renaming the parts would have quietly dropped all of it. * * WHAT IS NOT PORTED, because the product no longer has it: the reach `.plan` * rows (a stepper sells reach now), the footage link rows, the hours field, the * logo uploader and the delivery-window segment. What is added in their place is * `.numstep` (the views stepper), `.plat-sub` (the rate under a term chip) and * `.chipx` (removing a Never chip the buyer typed), all written in the same house * style as the controls they sit beside. * * Loaded by app/build/layout.tsx and by nothing else. Every colour is an app.css * token, so the dark theme costs nothing. */ /* ------------------------------------------------------------------ shell */ /* The site nav is rendered by the root layout, which this lane does not own. A checkout has its own one-line masthead, so the site's is suppressed for as long as a builder root is on the page. Keyed on `.obpage` rather than written unconditionally because React keeps a hoisted stylesheet in the document after the route that asked for it unmounts: an unconditional rule would go on hiding the nav on whatever page the buyer navigates to next. Same shape, and the same reasoning, as campaign.css's `body:has(.sfc)`. */ body:has(.obpage) .masthead, body:has(.obpage) .sfoot { display: none !important; } /* Nothing in the builder scrolls sideways, at any width. */ body:has(.obpage) { overflow-x: hidden; } .obpage { background: var(--bg); color: var(--ink); font-family: var(--sans); /* Named once and subtracted from .obmain below, so the first screen still fits without growing a scrollbar. */ --ob-support-h: 34px; } /* The bar keeps app.css's nav chrome (white, hairline) and only states what is different here: the wordmark alone, centred, and NOT sticky. Pinning the wordmark while the step rail directly under it scrolled away pulled the two halves of one masthead apart the moment you moved. `top` has to go with `position` or the offset stays on an element that no longer uses it. */ /* No rule under the wordmark: the support line sits right beneath it and the two read as one header, so a line between them cut the header in half. !important, deliberately: app.css draws that rule on the site nav from half a dozen rules keyed on theme, scroll state and card mode, and this header is the one place on the site where none of them should win. */ .obh { border-bottom: 0 !important; } /* The header scrolls away with the page. app.css makes every .appnav sticky at top 0, and that rule loads after this sheet, so a bare .obh loses to it: the header then pinned itself over the top of the sticky order summary and cut its title off. The full class chain outranks it. */ header.appnav.mktnav.obh { background: var(--white); box-shadow: none; position: static; top: auto; } .obh-in { justify-content: center; position: relative; } /* Under the bar rather than in it. The bar is one row built to hold one centred wordmark; a second line inside it would sit beside the mark as a competing link in a checkout. New tab on purpose: a same-tab booking page would take the buyer off a part-filled form. */ .obsupport { height: var(--ob-support-h); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--ink-3); padding: 0 16px; text-align: center; } .obsupport a { color: var(--brand); font-weight: 600; border-bottom: 1px solid var(--brand-line); } .obsupport a:hover { border-bottom-color: var(--brand); } /* Top-aligned, not centred: the card's height changes with the step, and centring moved the whole page up and down every time you pressed Continue. 55px is the bar above, 54px of row plus its hairline. min-height rather than height, so a step taller than the viewport grows the page instead of being clipped. */ .obmain { min-height: calc(100vh - 55px - var(--ob-support-h)); display: flex; align-items: flex-start; } .obmain > .wrap { width: 100%; padding-top: clamp(18px, 2.2vh, 28px); padding-bottom: clamp(24px, 4vh, 48px); } .obinner { max-width: 980px; margin: 0 auto; } /* ------------------------------------------------------------- the step rail */ .obsteps { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: clamp(18px, 2.4vh, 32px); border-bottom: 1px solid var(--line); } .obstep { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; flex: 0 0 auto; transition: color .25s ease; } .obconn { flex: 1 1 auto; min-width: 16px; height: 2px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; } /* The rail fills in the brand purple: progress is a selected state, and on this site a selected state is purple. */ /* --obfill is how much of the connector after the ACTIVE dot is filled, set inline by the rail for a step that has a sequence inside it (Start's five questions fill it a fifth at a time). Unset, it is 0. */ .obconn::after { content: ""; position: absolute; inset: 0; background: var(--action); transform: scaleX(var(--obfill, 0)); transform-origin: left center; } .obconn.done::after { transform: scaleX(1); } .obstep .n { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; transition: border-color .28s ease, background .28s ease, color .28s ease; } /* obnn / obck / oblb rather than nn / ck / lb: app.css already owns a .ck and a .lb, and the bare names inherit padding and a stray bordered pill. */ .obstep .n i { font-style: normal; position: absolute; inset: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .obstep .n .obck { opacity: 0; transform: scale(0.4); } .obstep.done .n .obnn { opacity: 0; transform: scale(0.6); } .obstep.done .n .obck { opacity: 1; transform: scale(1); } .obstep .oblb { border: 0; border-radius: 0; overflow: visible; display: inline; } .obstep.active { color: var(--ink); font-weight: 600; } /* --action-ink, not --white: --white is the card surface token and flips to a dark grey in the dark theme, which would put dark type on the purple dot. */ .obstep.active .n { border-color: var(--action); background: var(--action); color: var(--action-ink); } .obstep.done { color: var(--ink); } .obstep.done .n { border-color: var(--action); background: var(--action); color: var(--action-ink); } .obstep.done:hover .n { opacity: 0.8; } /* A completed step is a way back, so it is a real link rather than a div with a click handler on it. It carries none of a link's chrome. */ .obsteplink { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } .obsteplink:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 6px; } /* --------------------------------------------------------------- the layout */ .obgrid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; } /* minmax(0,...) not 1fr: a plain 1fr floors at the column's min-content width, and the steps min out near 468px, which pushed the whole page sideways on a phone. */ @media (max-width: 860px) { .obgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; } } /* 20px of ground under the top of the viewport. Nothing is pinned above it. */ .obside { position: sticky; top: 20px; } .obform { min-width: 0; } .pv-peek { display: none; } /* Back sits above the card rather than inside it, so every step opens on its own question. It goes invisible on step 1 and keeps its space, or the card jumps. */ .obback { min-height: 26px; display: flex; align-items: center; gap: 12px; margin: 0 0 10px; } .wiz-back { display: inline-flex; align-items: center; background: none; border: none; color: var(--ink-3); font-family: var(--sans); font-size: 14px; cursor: pointer; padding: 2px 0; margin: 0; text-decoration: none; } .wiz-back:hover { color: var(--ink); } .obcount { margin-left: auto; font-size: 12.5px; color: var(--ink-3); } /* ---- phones: the order summary is a sheet, not a footer --------------------- The price moves every time you answer something, so it is the one number that must never require a scroll. The total is always on screen and the breakdown is one tap away. No duplicate total: the real .pv-money block is re-ordered up beside the handle rather than a second copy being mirrored into it, so there is nothing that can drift out of sync with the figure being charged. */ @media (max-width: 860px) { /* The SURFACE is .obside, not .obprev: the payment marks and the guarantee line are its siblings, and painting only .obprev left them floating transparently over the form. top: auto is load-bearing -- the desktop rule is `sticky; top: 20px`, and top survives the switch to fixed, so with bottom: 0 also set the sheet was anchored at both edges and stretched to the full height of the screen. */ .obside { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 45; margin: 0; background: var(--white); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px -18px rgba(0,0,0,.55); max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px max(14px, env(safe-area-inset-bottom)); } /* .obside .obprev, not .obprev: the base rule is declared further down this file, so a bare class here loses to it on source order alone. */ .obside .obprev { display: flex; flex-direction: column; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; max-height: none; } .obside .payrow, .obside .bh-guar { margin-top: 14px; } .pv-peek { display: flex; align-items: center; justify-content: space-between; gap: 12px; order: -2; width: 100%; min-height: 44px; padding: 0 0 6px; margin: 0; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .pv-chev { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .2s; } .obside.is-open .pv-chev { transform: rotate(180deg); } /* the money block rides up next to the handle so it is what stays on screen */ .obside .obprev > .pv-money { order: -1; margin: 0; } /* .pv-total's top margin is the gap to the itemised rows above it in the desktop card. Collapsed, those rows are display:none, so it would be a fifth of a phone screen of nothing at the top of a bar that only shows a total. */ .obside .obprev > .pv-money .pv-total { margin-top: 0; } .obside.is-open .obprev > .pv-money .pv-total { margin-top: 22px; } .obside .obprev > .pv-money .pv-views { margin-top: 0; } /* Collapsed, the bar shows one figure and it stays the total. */ .obside:not(.is-open) .pv-views { display: none; } /* Before a reach is picked there is no total, and the block holds the rate instead. Collapsed, that rate is the bar's figure, set as a line rather than the purple block, or the bar would show nothing but its handle. */ .obside:not(.is-open) .pv-money:not(:has(.pv-total)) .pv-views { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 0; background: none; border-radius: 0; } .obside:not(.is-open) .pv-money:not(:has(.pv-total)) .pv-views-n { font-size: 22px; color: var(--ink); line-height: 1.1; } .obside:not(.is-open) .pv-money:not(:has(.pv-total)) .pv-total-sub { display: block; margin: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 500; } .obside:not(.is-open) .pv-money:not(:has(.pv-total)) .pv-subplats { display: none; } /* The card's own "Order summary" heading goes: the handle above it already says that, so opening the sheet printed it twice. */ .obside .obprev > h4 { display: none; } /* Collapsed, the sub-line under the total goes and the rate takes the corner: that is the number that answers "is this a good deal" while you are still choosing. Stripped of the panel it wears in the open sheet. */ .obside:not(.is-open) .pv-total-sub { display: none; } .obside:not(.is-open) .pv-cpm-val { display: flex; order: 0; margin: 2px 0 0; background: none; border: 0; border-radius: 0; padding: 0; font-size: 14px; font-weight: 600; } .obside:not(.is-open) .pv-cpm-val .pv-unit { font-size: 12px; } .pv-total-sub { text-align: right; } .obside:not(.is-open) { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); } /* Collapsed: the handle, the total, the pay button when it is offered, and the two lines that belong to that button. A disabled Fund & Start with its reason folded away inside the sheet, or a failed charge whose message is one tap out of sight, is the one thing this bar must not do. */ .obside:not(.is-open) .obprev > :not(.pv-peek):not(.pv-money):not(.pv-cpm-val):not(.side-fund):not(.pv-reason):not(.bld-err) { display: none; } .obside:not(.is-open) .payrow, .obside:not(.is-open) .bh-guar { display: none; } /* The sheet covers the foot of the page, so the flow needs room to clear it. --sheet-h is measured and written by BuildShell, so the reserve tracks whatever the sheet actually is, open or shut, on any step. */ .obmain { padding-bottom: calc(var(--sheet-h, 133px) + 28px); } } /* ------------------------------------------------------------ order summary */ .obprev { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 24px; } /* Full strength, not the grey the other small-caps labels use: it is the card's title rather than a label inside it. */ .obprev h4 { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; } /* The rate build-up. Every add-on that moves the CPM gets its own line, so the headline below is never a number that appeared from nowhere. Space, not rules: three hairlines inside one small card read as more structure than a five-line summary has. */ .pv-build { margin: 0 0 22px; } .pv-build:empty { display: none; } .pv-bline { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; color: var(--ink-3); padding: 3px 0; } .pv-bline b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; } /* The base rate is a fact; the perks are things you chose, so they carry the accent. Purple here is what ties a "+$0.40" to the toggle that put it there. */ .pv-bline.perk b { color: var(--action); } /* The rate is a unit price, a thing you check, while the reach is the thing being bought: a card gets one highlight and the views block below holds it. */ .pv-cpm-val { font-size: 23px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); line-height: 1; display: flex; align-items: baseline; gap: 7px; } .pv-cpm-val .pv-unit { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); } .pv-num { display: inline-block; font-variant-numeric: tabular-nums; } .pv-rows { margin-top: 22px; } .pv-rows:empty { margin-top: 0; } .pv-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; line-height: 1.5; padding: 6px 0; } .pv-row .k { color: var(--ink-3); flex: 0 0 auto; } /* The campaign name is whatever the buyer typed, in a column about 30 characters wide. One line, clipped, rather than a wrap that pushes the total off the card. */ .pv-row .v { color: var(--ink); font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The value sits in its own block so it can move on its own; it carries the clip so a long campaign name still ends in an ellipsis rather than a cut. */ .pv-set { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Solid --action, and --action flat: #9873F0, the one purple the site fills with. A filled block outranks a tinted one, which is the right order for the number the card is selling. Every .btn-primary already puts white on this exact purple; a bespoke purple in the one place the eye lands is the worse failure. The 44px figure clears the 3:1 large-text floor on it. */ .pv-views { margin-top: 30px; background: var(--action); border-radius: 14px; padding: 15px 16px 13px; } .pv-views-n { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; color: #fff; } /* Stepped by digit count, because this number grows by orders of magnitude and the column does not. The steps land all three near the same MEASURED width. */ .pv-views-n.len-10 { font-size: 40px; } .pv-views-n.len-11 { font-size: 35px; } /* White, no alpha, and a nudge in size and weight: on #9873F0 this line measures 3.47:1, under the AA floor for text this size, and the brand colour is fixed, so size and weight are the only levers left. */ .pv-views .pv-total-sub { color: #fff; font-size: 13px; font-weight: 600; } .pv-views .pv-subplats { color: #fff; } /* The old page's `.is-est` pair is not ported. It swapped the reach figure for the rate during the stretch before a package had been picked, and this builder has no such stretch: the reach is carried in from the onboarding answers and is a real number from the first frame. */ .pv-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; } .pv-total .k { font-size: 13.5px; color: var(--ink-3); } .pv-total .v { font-size: 23px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); } /* Left on the rail: it is a sentence, not a value, and every label in the rows above begins at the left margin. The sheet keeps it right, where it sits directly under the total in a collapsed two-line block. */ .pv-total-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.45; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* PADDING, not margin: .obprev is display:block, so a bottom margin collapses against the note's own top margin and the larger of the two wins. */ .pv-money { padding-bottom: 8px; } /* The marks hang on the card's right edge rather than trailing the sentence, and they draw in currentColor so the white line makes them white with it. */ .pv-subplats { display: inline-flex; align-items: center; gap: 9px; margin-left: 0; flex: 0 0 auto; align-self: center; } .pv-subplats svg { width: 1.15em; height: 1.15em; display: block; flex: 0 0 auto; } /* The note under the rail on step 1: the plan came from the answers, and the next screen is where it changes. */ .pv-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; } .side-fund { width: 100%; margin-top: 20px; } /* The line under Fund & Start is centred under the button it belongs to. */ .pv-foot { text-align: center; } .side-fund[hidden] { display: none; } /* A quote in flight softens the numbers by a hair. It does not replace them with a spinner: somebody pressing plus four times should read four prices. */ .is-pending { opacity: 0.55; transition: opacity .12s; } /* Payment-method badges: the official card and wallet marks. They keep their brand colours in both themes, which is the point. Seven marks have to clear the rail in one row or the last one wraps alone, so it is a seven-column grid rather than a wrapping flex row: all seven scale together as the column narrows instead of dropping Afterpay onto a second row on its own. */ .payrow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: center; max-width: 296px; margin: 22px auto 0; } .payrow img { width: 100%; height: auto; display: block; border-radius: 4px; } /* Three things stacked under the order card, so each step down needs its own air: card to marks, marks to the promise, promise to the Stripe line. */ .bh-guar { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.5; } .bh-guar b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; } .bh-guar span { display: block; margin-top: 6px; } /* ------------------------------------------------- Start: one question at a time */ /* The Start step has no order rail: nothing is priced yet. Its card takes the whole width of the step instead. */ .obgrid-solo { grid-template-columns: minmax(0, 1fr); } /* The card hugs its one question. The checkout's floor on .wiz-body is there so four forms of different length share a height; one question in a row of cards does not need it, and the floor only left a band of nothing under the cards. */ .obgrid-solo .wiz-body { min-height: 0; } /* The options as a block, not a strip: two columns for a four-answer question (a 2 x 2), three for the five-answer one (3 + 2). Each is the two-line chip given real room: the answer on top, what it means underneath, in a card tall enough that the panel reads as a place to choose rather than a row of tags. */ .sfq-opts { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; } /* Five cards: the same two-by-two block as a four-answer question, and the fifth across the full width beneath it. The first four keep the widths every other question has, and the last reads as one more row rather than a row with a hole in it. */ .sfq-opts.sfq-5 .plat:nth-child(5) { grid-column: 1 / -1; } /* `.wiz .sfq-opts .plat`, three classes deep, because `.wiz .plat-2l` further down sets the ordinary two-line chip to 14px and would otherwise win here. The answer is the card's headline, so it is bold whether or not it is chosen; the chip rule's weight change on check is for a row of tags, not a card. */ .wiz .sfq-opts .plat { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 22px 24px; min-height: 118px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; border-radius: 14px; } .wiz .sfq-opts .plat-sub { white-space: normal; margin-top: 6px; font-size: 14.5px; font-weight: 400; line-height: 1.45; } /* A platform's mark sits on the line with its name, all three at one size. */ .sfq-plat { display: inline-flex; align-items: center; gap: 9px; } .wiz .sfq-opts .plat .sfq-plat svg { width: 22px; height: 22px; flex: 0 0 auto; display: block; } /* THE BRAND AT REST. A page that is purple only after a click is grey until then. So every card carries a mark in the brand's soft line colour before it is chosen: a ring for a single choice, a rounded square for a multiple one. Chosen, the mark fills with the brand and the card tints, as before. Hover brings the card's own edge up to the soft line colour. That is the whole budget: a mark and an edge, never a wash. */ /* The ring is drawn at --sfq-ring, the brand at just over half strength: the soft line colour (26%) read as grey at 2px, and full strength on five unchosen cards read as five things already chosen. */ /* ONE MARK EVERYWHERE. Every choice on the checkout, single or multiple, on a Start card or a plan row, is the same rounded square: the brand ring at rest, filled with a tick when chosen. A ring-and-dot radio next to a square tick was two languages for one act. */ .sfq-mark { --sfq-ring: color-mix(in srgb, var(--brand) 55%, transparent); flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--sfq-ring); background: var(--white); position: relative; transition: border-color .15s, background .15s; } .wiz .sfq-opts .plat:hover { border-color: var(--brand-line); } .wiz .sfq-opts .plat:hover .sfq-mark { border-color: var(--action); } .wiz .sfq-opts .plat:has(input:checked) .sfq-mark { border-color: var(--action); background: var(--action); } .sfq-mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--white); transform: scale(0); } .sfq-mark.is-check::after { inset: auto; left: 6px; top: 2px; width: 5px; height: 10px; border-radius: 0; background: none; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); } .wiz .sfq-opts .plat:has(input:checked) .sfq-mark::after { transform: scale(1); } .wiz .sfq-opts .plat:has(input:checked) .sfq-mark.is-check::after { transform: rotate(45deg) scale(1); } @media (max-width: 560px) { .sfq-opts, .sfq-opts.sfq-5 { grid-template-columns: minmax(0, 1fr); gap: 8px; } .sfq-opts.sfq-5 .plat:nth-child(5) { grid-column: auto; } /* One row shape for every question on a phone: the mark, the answer, and what it means under it. Compact enough that four answers fit on one screen. */ /* `.obpage` in front because app.css, which loads after this sheet, lays the five-answer question out as inline rows at the same specificity. */ .obpage .wiz .sfq-opts .plat { min-height: 0; padding: 13px 16px; gap: 14px; font-size: 16px; } .obpage .wiz .sfq-opts .plat-sub { display: block; margin: 2px 0 0; font-size: 13.5px; } } /* ---------------------------------------------- the wizard card (the buy box) */ .wiz { border: 1px solid var(--line); border-radius: 18px; background: var(--white); padding: 24px 26px 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } @media (max-width: 560px) { .wiz { padding: 22px 18px; border-radius: 16px; } } .wiz-body { min-height: 268px; } /* A crisp edge, not a halo. app.css focuses a field with a 3px spread of --focus, which around a 54px field is a soft band wider than the field's own border. This is 1px of solid --action outside a 1px --action border: 2px of one colour, the same on every side of every field here. */ .wiz .field input:focus, .wiz .field textarea:focus { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); } /* Continue and Fund keep the brand colour even before the step is valid: grey reads as "this cannot be paid for", which is not what an unfilled field means. The cursor is the tell. */ .wiz-next[disabled], .side-fund[disabled] { background: var(--action); color: var(--action-ink); cursor: not-allowed; } .wiz-q { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 6px; color: var(--ink); } /* A heading with no sub-line under it needs its own gap to the first field, or the label reads as a sub-line of the title rather than as the field's name. */ .wiz-step > .wiz-q:not(:has(+ .wiz-sub)) { margin-bottom: 20px; } .wiz-sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 16px; } /* A section heading is 12px above the control it names, so the pair read as one object; sections are 30px apart, which is what makes the break visible. The old page's headings were loose divs and the 30px lived on `.brand-q ~ .brand-q`. Here each section is a real
so the heading can be its and actually name the group, which means the gap belongs to the section rather than to the heading. Same distance either way. */ /* display:block because the stepper's heading is a