/* ============================================================ Min for Business ------------------------------------------------------------ The business questionnaire, in the landing page's world: cave light, drifting fog, cast-glass wordmark, and the questions themselves carried on slabs of optical resin. This file loads *after* landing.css and re-invents nothing. The environment, the wordmark, Min, .btn, .resin and the .rise reveal recipe all come from there — what's added here is the one thing the landing page has never needed: form controls. Because .resin flips --ink to graphite, everything inside a card reads from --ink / --ink-soft / --ink-faint and lands the right way round without a second palette. Depends on tokens.css + landing.css. ============================================================ */ /* ---- page -------------------------------------------------- A scrolling document, not the landing page's scrubbed sequence: the palette stays at cave throughout, so there is no daybreak ramp and nothing here fights the form for attention. */ /* landing.css opens --bg at cave for its sunrise. This page has no sunrise (see "daylight" in business.js), so it starts lit — set here too, not only in JS, so the first paint is never a dark flash. */ .biz { --bg: #F0EBE2; --ink: #23211E; } .biz main { position: relative; z-index: 1; } /* The dock is always up on this page (no hero-gated surfacing), so the foot of the document keeps a lane clear for it. */ .biz .footer { padding-bottom: calc(var(--space-10) + var(--dock-clear)); } /* ---- reveal fail-safe -------------------------------------- landing.css hides .rise until an observer adds .in. On a page that is mostly *form*, a module that fails to load would leave questions nobody can read — so here the hidden state is opt-in: it applies only once the inline script in has armed it, which it does before first paint. No script, no hiding. */ .biz .rise { opacity: 1; transform: none; filter: none; } html.reveal-armed .biz .rise { opacity: 0; transform: translateY(8px) scale(1.06); filter: blur(5px); } html.reveal-armed .biz .in .rise, html.reveal-armed .biz .rise.in { opacity: 1; transform: none; filter: none; } /* ---- no-module fallbacks ----------------------------------- business.js stamps .js-ready on . Without it the sunrise never runs, so the page is stuck at cave — and .resin over cave is a pale wash on a dark floor, which is murk, not a lit object. The cards therefore carry their own opaque material until the ramp is there to light them. Same idea for the i-dot: Min is drawn by the module, so the flat dot stands in when he can't be. */ html:not(.js-ready) .biz-card, html:not(.js-ready) .biz-success { background: linear-gradient(168deg, rgba(252, 250, 246, 0.96), rgba(244, 240, 233, 0.93)); backdrop-filter: blur(10px) saturate(120%); } html:not(.js-ready) .concept { background: linear-gradient(168deg, color-mix(in srgb, var(--color-accent-soft) 26%, rgba(255, 255, 255, 0.7)), rgba(255, 255, 255, 0.6)); } .wordmark--hero .wordmark__dot { display: none; } html:not(.js-ready) .wordmark--hero .wordmark__dot { display: block; } /* ---- masthead ---------------------------------------------- There is no hero. This page is the questionnaire, so the brand gets one quiet band at the top and the first card follows immediately — no full screen to scroll past before question one. */ .biz-masthead { display: grid; justify-items: center; padding-top: clamp(40px, 7vh, 72px); padding-bottom: clamp(var(--space-6), 3.4vh, var(--space-8)); text-align: center; } .biz-masthead .wordmark--hero { width: min(148px, 34vw); margin-bottom: var(--space-5); } /* The one line that says whose page this is. Small, spaced, quiet — the wordmark above it is already the brand. */ .biz-eyebrow { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } /* ---- the form ---------------------------------------------- */ .biz-form { width: min(660px, 100% - 2 * var(--space-5)); margin-inline: auto; display: grid; gap: clamp(var(--space-6), 2.4vw, var(--space-8)); padding-bottom: clamp(76px, 9.5vh, 124px); } /* Each thematic group of questions is one object floating in the fog, on the landing page's card radius rather than the tighter form radius — these are pebbles, not panels. */ .biz-card { padding: clamp(var(--space-7), 4.2vw, var(--space-10)); display: grid; gap: var(--space-6); } .biz-card__head { display: grid; gap: var(--space-2); } .biz-card h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); letter-spacing: -0.025em; line-height: 1.15; } .biz-card__note { font-size: var(--text-base); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; } /* The step marker — the flow__step numeral idea, at card scale. */ .biz-card__step { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } .biz-card__step::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: 0.6; } /* ---- fields ------------------------------------------------ */ /* The dock is fixed over the foot of the viewport, so anything the browser scrolls to on focus — or that the script jumps back to on a validation error — has to stop short of it. */ .field, .fieldset { scroll-margin-top: var(--space-8); scroll-margin-bottom: calc(var(--dock-clear) + var(--space-6)); } .field { display: grid; } .field > label, .fieldset > legend { display: block; font-size: var(--text-base); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); margin-bottom: var(--space-3); padding: 0; } /* "(optional)" and friends — present, never competing with the question */ .opt { font-weight: var(--font-weight-normal); color: var(--ink-faint); } /* A line of context between a question and its answers — for when the question needs a caveat the label itself shouldn't carry. */ .q-note { margin: calc(var(--space-1) * -1) 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; } /* A follow-up that only exists once a particular answer is chosen (the "Something else" write-in). Same offset as the contact field, which also hangs off the control above it. */ .field--conditional { margin-top: var(--space-3); } .fieldset { border: none; padding: 0; margin: 0; min-width: 0; /* fieldsets refuse to shrink below their content otherwise */ } /* An inset well in the resin, not a bordered box: the light comes from above, so the top edge is the shadow and the bottom edge catches the highlight — the inverse of the objects that sit on top of the material. */ .input, .select, .textarea { width: 100%; appearance: none; -webkit-appearance: none; padding: 14px 16px; border: 1px solid rgba(35, 33, 30, 0.08); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 2px 4px rgba(15, 13, 20, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.7); color: var(--ink); font-family: inherit; font-size: var(--text-md); line-height: 1.45; outline: none; transition: box-shadow var(--duration-quick) ease, background var(--duration-quick) ease, border-color var(--duration-quick) ease; } .input::placeholder, .textarea::placeholder { color: var(--ink-faint); } .input:focus, .select:focus, .textarea:focus { background: rgba(255, 255, 255, 0.6); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); box-shadow: inset 0 2px 4px rgba(15, 13, 20, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); } /* Chrome paints autofilled fields a flat yellow, which would punch a hole straight through the material. */ .input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.55); caret-color: var(--ink); } .textarea { min-height: 96px; resize: vertical; } /* The native chevron doesn't inherit colour, so it's drawn here in the resin's graphite ink instead of the system's. */ .select { padding-right: var(--space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%2355505f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-5) center; cursor: pointer; } .select.is-placeholder { color: var(--ink-faint); } .select option { color: #23211E; } .field-error { min-height: 18px; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-error); } /* ---- ranking list -------------------------------------------- Click-to-rank rather than drag-to-reorder: dragging is a poor fit for a phone held one-handed outside a bar, and a numbered tap order says the same thing. Tap order is the answer, so the badge carries the number and the list itself never reflows — items staying put is what makes a second and third tap cheap. */ .rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .rank-option { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: 13px 16px; font: inherit; text-align: left; color: var(--ink); border: 1px solid rgba(35, 33, 30, 0.07); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background var(--duration-quick) ease, border-color var(--duration-quick) ease; } .rank-option:hover { background: rgba(255, 255, 255, 0.46); } .rank-option[aria-pressed="true"] { background: rgba(255, 255, 255, 0.62); border-color: rgba(35, 33, 30, 0.14); } .rank-option:focus-visible { outline: 2px solid var(--violet-ink); outline-offset: 2px; } /* The badge holds the rank. Empty and hollow until picked, so an unranked row reads as an empty slot waiting for a number rather than as an unchecked box. */ .rank-option__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(35, 33, 30, 0.16); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; color: transparent; transition: background var(--duration-quick) ease, color var(--duration-quick) ease, border-color var(--duration-quick) ease; } .rank-option[aria-pressed="true"] .rank-option__num { background: var(--violet-ink); border-color: var(--violet-ink); color: #fff; } .rank-option__label { flex: 1; } .rank-none { margin-top: var(--space-3); } /* ---- options ------------------------------------------------ Checkboxes and radios as their own small wells, so a questionnaire reads as one family with the text fields rather than as browser chrome dropped onto the resin. */ .option-group { display: grid; gap: var(--space-2); } .option { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 13px 16px; border: 1px solid rgba(35, 33, 30, 0.07); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 2px rgba(15, 13, 20, 0.06); cursor: pointer; transition: background var(--duration-quick) ease, border-color var(--duration-quick) ease, box-shadow var(--duration-quick) ease; } .option:hover { background: rgba(255, 255, 255, 0.46); } .option:has(input:checked) { background: rgba(255, 255, 255, 0.62); border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); box-shadow: inset 0 1px 2px rgba(15, 13, 20, 0.05), 0 0 0 2px color-mix(in srgb, var(--color-accent) 16%, transparent); } .option:has(input:focus-visible) { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); } .option input { appearance: none; -webkit-appearance: none; flex: none; width: 19px; height: 19px; margin: 0; border: 1.5px solid rgba(35, 33, 30, 0.28); background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 2px rgba(15, 13, 20, 0.12); outline: none; cursor: pointer; transition: background var(--duration-quick) ease, border-color var(--duration-quick) ease; } .option input[type="checkbox"] { border-radius: 6px; } .option input[type="radio"] { border-radius: 50%; } /* the checked fill is the INK level, not the light one — a white check on --violet is unreadable, and the control is the one place the accent has to carry a glyph */ .option input:checked { background-color: var(--violet-ink); border-color: var(--violet-ink); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-accent) 35%, transparent); } .option input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.6l3.1 3.1L11 1' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .option input[type="radio"]:checked { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.92), 0 0 8px 1px color-mix(in srgb, var(--color-accent) 35%, transparent); } .option span { font-size: var(--text-md); line-height: 1.4; color: var(--ink); } /* ---- the concept panel ------------------------------------- The "imagine this" paragraph the reaction question hangs off. A lit recess in the card: the accent arrives as light through the material, never as a filled swatch. */ .concept { position: relative; padding: var(--space-6); border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, 0.55); background: radial-gradient(90% 120% at 8% -10%, rgba(255, 255, 255, 0.55), transparent 60%), linear-gradient(168deg, color-mix(in srgb, var(--color-accent-soft) 22%, transparent), rgba(255, 255, 255, 0.3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); font-size: var(--text-md); line-height: 1.6; color: var(--ink); } .concept b { font-weight: var(--font-weight-semibold); } /* ---- contact toggle ---------------------------------------- A sunken track in the resin with one lit pebble sliding along it. The outer element owns the Email<->Phone slide, its ::after owns the squash/opacity "jelly" launch, so the two motions don't fight over one transform property. */ .segmented { position: relative; display: flex; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius-xl); background: rgba(35, 33, 30, 0.06); box-shadow: inset 0 2px 4px rgba(15, 13, 20, 0.1); } .segmented button { position: relative; z-index: 1; flex: 1; padding: 10px 0; border: none; border-radius: 999px; background: transparent; color: var(--ink-soft); font-family: inherit; font-size: var(--text-base); font-weight: var(--font-weight-semibold); cursor: pointer; transition: color 250ms ease-out; } .segmented button.active { color: var(--ink); } .segmented__pill { position: absolute; top: var(--space-1); left: var(--space-1); z-index: 0; width: calc((100% - var(--space-1) * 2 - var(--space-2)) / 2); height: calc(100% - var(--space-1) * 2); transition: transform 400ms cubic-bezier(0.25, 0.1, 0, 1); } .segmented.is-phone .segmented__pill { transform: translateX(calc(100% + var(--space-2))); } .segmented__pill::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(168deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(15, 13, 20, 0.12), 0 6px 14px -6px rgba(15, 13, 20, 0.3); border: 0 solid rgba(255, 255, 255, 0.6); } .segmented__pill.is-launching::after { animation: segmented-pill-launch 400ms cubic-bezier(0.25, 0.1, 0, 1); } @keyframes segmented-pill-launch { 0% { transform: scale(1, 1); opacity: 1; border-width: 0; } 62% { transform: scale(0.97, 0.92); opacity: 0.18; border-width: 1px; } 100% { transform: scale(1, 1); opacity: 1; border-width: 0; } } /* the contact input has no label of its own — the pill above is the only indicator of which field is showing, so it needs a beat of separation */ .field--contact { margin-top: var(--space-4); } /* ---- submit ------------------------------------------------ Out in the open air, not on a card: the closing action of the page, the same way the landing page's closer carries only its button. */ .biz-submit { display: grid; justify-items: center; gap: var(--space-5); padding-top: var(--space-2); } .biz-submit .btn { width: min(340px, 100%); justify-content: center; } .biz-submit .btn:disabled { opacity: 0.6; cursor: default; transform: none; } .consent { text-align: center; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-faint); max-width: 44ch; } .consent a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 2px; } .consent a:hover { color: var(--ink); } .status { min-height: 20px; text-align: center; font-size: var(--text-base); color: var(--ink-soft); } /* The submit sits in full daylight by the time you reach it, so the cream-tuned error red is the right one here. */ .status.error { color: var(--color-error); } /* ---- success ----------------------------------------------- The form is replaced, not appended to: one object left floating where the questions were. */ .biz-success { display: none; width: min(560px, 100% - 2 * var(--space-5)); margin: 0 auto clamp(76px, 9.5vh, 124px); padding: clamp(var(--space-9), 5vw, var(--space-12)); text-align: center; } .biz-success .min { width: clamp(96px, 16vw, 132px); height: clamp(96px, 16vw, 132px); margin: 0 auto var(--space-6); animation: float 8s ease-in-out infinite; } .biz-success h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin-bottom: var(--space-4); } .biz-success p { font-size: var(--text-md); line-height: 1.6; color: var(--ink-soft); max-width: 38ch; margin-inline: auto; } /* ---- small screens ----------------------------------------- */ @media (max-width: 760px) { .biz-masthead .wordmark--hero { width: min(132px, 40vw); } .biz-card { border-radius: var(--radius-2xl); } .biz-success { border-radius: var(--radius-2xl); } } @media (prefers-reduced-motion: reduce) { .segmented__pill { transition: none; } .segmented__pill.is-launching::after { animation: none; } .biz-success .min { animation: none; } }