/* HIT Intake Engine — Onyx/Turquoise "Velvet Rope" luxury design system. Tokens mirror master_website: onyx black (zinc-950), crisp white, turquoise #2BC7B5 as the single accent. No frameworks, no CDNs, no external fonts. THE BRAND FACES, FROM THIS HOST (2026-10-21, "the public look"). Until then the application set its headings in Palatino and its words in the device's own sans, so the lettering changed the moment a man pressed "Book your free call" on the site. Cormorant Garamond and Inter, the site's and the CRM's (the CRM's files, OFL licences beside them in fonts/), resolved RELATIVE to this sheet, so they load wherever the page is served: /static/ on the apply host, /apply/static/ through the site (the Worker forwards exactly these five files). A font that cannot load falls back to the old stack. */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/cormorant-garamond.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-600.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-700.woff2) format("woff2"); } :root { --onyx-0: #09090b; /* zinc-950 — page ground */ --onyx-1: #101012; /* raised surface */ --onyx-2: #17171a; /* card surface */ --line: #27272a; /* zinc-800 hairlines */ --turquoise: #2BC7B5; /* THE accent. The only accent. */ --turquoise-hi:#56E0D0; /* hover — contrast-tuned, mirrors master_website */ --white: #FAFAFA; --muted: #A1A1AA; /* zinc-400 */ --soft: #D4D4D8; /* zinc-300 — quieter than white, louder than muted */ --error: #d97066; --serif: "Cormorant Garamond", "Palatino", "Palatino Linotype", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* The CRM's depth (data_center/static/css/tokens.css), 2026-10-21: the stronger hairline under a pointer, and elevation as a hairline of light on the top edge plus a deep soft shadow — never glass. */ --line-strong: #3f3f46; --line-hover: #52525b; --e1: inset 0 1px 0 rgb(250 250 250 / .03), 0 1px 2px rgb(0 0 0 / .4); --e2: inset 0 1px 0 rgb(250 250 250 / .04), 0 12px 32px -12px rgb(0 0 0 / .7); --e3: inset 0 1px 0 rgb(250 250 250 / .05), 0 32px 80px -24px rgb(0 0 0 / .85); --ease: cubic-bezier(.22, 1, .36, 1); } * { box-sizing: border-box; } html { color-scheme: dark; scroll-behavior: smooth; } body { margin: 0; background: var(--onyx-0); color: var(--white); font: 16px/1.7 var(--sans); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px 120px; } /* Header / footer — quiet, spacious, exact */ .site-header { text-align: center; padding: 56px 24px 10px; } .wordmark { font-weight: 700; letter-spacing: .34em; font-size: 13px; color: var(--white); text-decoration: none; text-transform: uppercase; } .wordmark span { color: var(--turquoise); } .tagline { color: var(--muted); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; margin-top: 10px; } .site-footer { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: center; padding: 36px 24px; font-size: 12px; color: var(--muted); letter-spacing: .06em; } /* Each item stays whole: at 375px "© Opulence 99, LLC" was squeezed onto three lines beside the two links. The row wraps instead. */ .site-footer > * { white-space: nowrap; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--turquoise); } /* Hero — cinematic type, generous air */ .hero { padding: 96px 0 40px; } .hero.narrow { max-width: 600px; margin: 0 auto; } /* The private pay pages (pay in full, the payment plan, the welcome), on the header's centre line like the application (owner, 2026-09-25: "not some in the center and some to the left ... more premium"). */ .hero.centered { text-align: center; } .hero.centered .lede, .hero.centered .submit-note { margin-left: auto; margin-right: auto; } .hero.centered .form-alert { text-align: center; } .hero.centered .lede strong { color: var(--white); } .kicker { color: var(--turquoise); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 24px; } /* Cormorant sits smaller on its body than Palatino did: the same visual size needs ~12% more (2026-10-21). */ h1 { font-family: var(--serif); font-size: clamp(36px, 6vw, 54px); line-height: 1.08; margin: 0 0 26px; font-weight: 600; letter-spacing: -.01em; } h2 { font-family: var(--serif); font-size: 27px; font-weight: 600; margin: 0 0 12px; } .lede { color: var(--muted); font-size: 17px; max-width: 58ch; } a { color: var(--turquoise-hi); text-decoration-color: rgba(43, 199, 181, .4); } /* Landing doors */ .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } @media (max-width: 680px) { .doors { grid-template-columns: 1fr; } } .door { display: block; background: var(--onyx-1); border: 1px solid var(--line); border-radius: 2px; padding: 40px 32px; text-decoration: none; color: var(--white); transition: border-color .25s ease, transform .25s ease; } .door:hover { border-color: var(--turquoise); transform: translateY(-3px); } .door p { color: var(--muted); font-size: 15px; } .door-kicker { color: var(--turquoise); font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } .door-cta { color: var(--turquoise); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } /* Form */ .application { margin-top: 16px; } .form-hero { padding-bottom: 16px; } /* The spec's "bonus" note under the h1: what comes with the call, said once, quietly. A hairline card with one turquoise edge — no badge-shouting, no second accent colour. */ .bonus-note { display: flex; flex-direction: column; gap: 8px; /* 58ch at the lede's own 17px, so the card squares with the paragraphs under it (the children set their own sizes). */ font-size: 17px; max-width: 58ch; margin: 0 0 30px; padding: 18px 22px; background: var(--onyx-1); border: 1px solid var(--line); border-left: 2px solid var(--turquoise); border-radius: 2px; } .bonus-tag { color: var(--turquoise); font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; } .bonus-text { color: var(--white); font-family: var(--serif); font-size: 17.5px; line-height: 1.5; } /* ── The one-page application: compact and centred (owner, 2026-09-25) ─── Afternoon: "I want it to appear as a short application that they can scroll and easily see isn't long." On a 375px phone the page was 5.7 screens and the first box to type in sat at 1,092px; five heavy cards read as five pages. Evening: "Make the text aligned center format, not some in the center and some to the left. I want this application to look more premium not cheaply made. Remember, people are about to pay 10-12k, if not 100k." The header was centred and everything under it hung left, so the page had two axes. Now it has one: kicker, h1, the glance line, the bonus, every section label, question, answer and line of fine print, and the button all sit on the header's centre line. Answers are tap-cards (the radio circles go, the chosen card lights turquoise) wherever the browser can style a checked card — elsewhere the circles stay, so a choice is never invisible. Scoped to the single-page layout (body.page-compact, .form-hero.compact, form[data-layout="single"]): every stepper, survey and the check-in look exactly as before. */ .page-compact .site-header { padding: 30px 24px 0; } .page-compact .tagline { margin-top: 8px; } .page-compact main { padding-bottom: 72px; } @media (max-width: 560px) { .page-compact main { padding-left: 16px; padding-right: 16px; } } .page-compact .form-alert { text-align: center; } .form-hero.compact { padding: 36px 0 18px; text-align: center; } .form-hero.compact .kicker { margin-bottom: 14px; text-wrap: balance; } .form-hero.compact h1 { font-size: clamp(28px, 4.6vw, 40px); margin: 0 0 12px; text-wrap: balance; } .form-hero.compact .bonus-note { align-items: center; text-align: center; gap: 6px; max-width: 470px; margin: 0 auto 16px; padding: 16px 24px 18px; background: rgba(43, 199, 181, .05); border: 1px solid rgba(43, 199, 181, .38); border-radius: 2px; } .form-hero.compact .bonus-text { font-size: 16px; line-height: 1.5; } /* The glance: one plain sentence (his ruling: no check marks). */ .glance { margin: 0 0 22px; color: var(--soft); font-size: 14.5px; letter-spacing: .03em; line-height: 1.5; } /* His intro, one tap away. */ .intro-more { max-width: 58ch; margin: 0 auto; } .intro-more summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font-size: 13.5px; letter-spacing: .04em; list-style: none; } .intro-more summary::-webkit-details-marker { display: none; } .intro-more summary::after { content: "+"; color: var(--turquoise); font-size: 16px; line-height: 1; } .intro-more[open] summary::after { content: "\2212"; } .intro-more summary:hover { color: var(--turquoise); } .intro-more .lede { font-size: 14.5px; line-height: 1.6; margin: 10px auto 0; } /* One card; the sections are hairline-divided parts of it, not pages. */ form[data-layout="single"] { margin-top: 8px; padding: 6px 36px 32px; text-align: center; background: var(--onyx-1); border: 1px solid var(--line); border-radius: 2px; } @media (max-width: 560px) { form[data-layout="single"] { padding: 4px 18px 22px; } } form[data-layout="single"] .step { background: none; border: 0; border-radius: 0; margin: 0; padding: 22px 0 8px; } form[data-layout="single"] .step + .step { border-top: 1px solid var(--line); } /* A grid, so two short answers can share a row. Grid margins do not collapse, so the spacing is the gap and the children carry none. */ form[data-layout="single"] .step:not(.hidden) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; align-items: start; } form[data-layout="single"] .step > * { grid-column: 1 / -1; margin-top: 0; margin-bottom: 0; } @media (min-width: 520px) { form[data-layout="single"] .step > .q-full_name, form[data-layout="single"] .step > .q-email, form[data-layout="single"] .step > .q-phone, form[data-layout="single"] .step > .q-number { grid-column: auto; } } form[data-layout="single"] .step h2 { display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); } form[data-layout="single"] .step-letter { width: auto; height: auto; margin-right: 10px; border: 0; font: inherit; color: var(--turquoise); } form[data-layout="single"] .section-intro { max-width: 52ch; margin: -8px auto 0; font-size: 14px; line-height: 1.55; } form[data-layout="single"] .q-label { font-size: 15px; line-height: 1.45; margin-bottom: 7px; } /* Help sits UNDER its box here, so a question with help (Phone) and one without (Age) start their labels and boxes on the same line when they share a row. */ /* :not(.hidden), like .step above: without it this rule (0,2,1) outranks `.question.hidden { display: none }` (0,2,0) and a conditional question — the messy answer's describe-it box, 2026-09-26 — is drawn while hidden. Held by test_dom.js SINGLE 9b, on the computed style. */ form[data-layout="single"] .question:not(.hidden) { display: flex; flex-direction: column; } form[data-layout="single"] .q-help { order: 1; font-size: 12.5px; line-height: 1.5; margin: 7px 0 0; } form[data-layout="single"] .field-error { order: 2; } form[data-layout="single"] input[type="text"], form[data-layout="single"] input[type="email"], form[data-layout="single"] input[type="number"], form[data-layout="single"] textarea { padding: 11px 14px; line-height: 1.45; text-align: center; } /* "One or two sentences" gets a box that size: three lines, still stretchable. */ form[data-layout="single"] textarea { min-height: 0; height: 96px; } form[data-layout="single"] .choices { gap: 8px; } form[data-layout="single"] .choice { align-items: center; justify-content: center; text-align: center; padding: 12px 16px; font-size: 14.5px; line-height: 1.45; } form[data-layout="single"] .choice input { margin-top: 0; } /* The consent boxes: the box above its sentence, both on the centre line. */ form[data-layout="single"] .consents .choice { flex-direction: column; gap: 8px; padding: 14px 18px; font-size: 13px; line-height: 1.55; } form[data-layout="single"] .consents .choice input { margin: 0; } /* A two-answer question (Yes / No) is two taps side by side. A browser without :has() keeps them stacked, which is only taller. */ form[data-layout="single"] .choices[role="radiogroup"]:not(:has(> label:nth-of-type(3))) { flex-direction: row; } form[data-layout="single"] .choices[role="radiogroup"]:not(:has(> label:nth-of-type(3))) > .choice { flex: 1 1 0; } /* Three or more answers sit two to a row on a wide screen; an odd last one (here: "Other") takes the full row so nothing hangs off-centre, and the "Other" line takes the full width under them. */ @media (min-width: 520px) { form[data-layout="single"] .choices[role="radiogroup"]:has(> label:nth-of-type(3)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } form[data-layout="single"] .choices[role="radiogroup"] > label:last-of-type:nth-of-type(odd), form[data-layout="single"] .choices[role="radiogroup"] > .other-wrap { grid-column: 1 / -1; } } /* Tap-cards. ONLY where :has() can light the chosen card — the circle is the only other sign of a choice, and it must not vanish without one. The input stays in the page (opacity, not display:none), so keyboard, screen readers and form.js see exactly what they saw before. */ @supports selector(:has(*)) { form[data-layout="single"] .choices[role="radiogroup"] .choice { position: relative; } form[data-layout="single"] .choices[role="radiogroup"] .choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } form[data-layout="single"] .choice:has(input:checked) { border-color: var(--turquoise); background: rgba(43, 199, 181, .08); } form[data-layout="single"] .choice:has(input:focus-visible) { outline: 1px solid var(--turquoise-hi); outline-offset: 2px; } } form[data-layout="single"] .cta-row { justify-content: center; margin-top: 8px; } @media (max-width: 560px) { form[data-layout="single"] .btn.submit { width: 100%; } } /* ── The plain look (owner, 2026-10-05) ───────────────────────────────────── His words, sending badmarketing.com/work-with-bad-marketing: "I like how simple their application looks … apply everything else then deploy it". What made theirs read as simple was measured at 375px: the first box 402px down (ours 648px), one label and one box per row, every field the same width, answers as full-width bars, no section chrome. So: one column on a centred 680px measure, everything in it on ONE left edge (the header too, so the page keeps one axis), labels above tall boxes, answers stacked full-width, the section letters, titles, panel and dividers gone, the section intros as small print, the consents as plain checkbox lines. Scoped to body.page-plain / form[data-look="plain"] (spec "look": "plain"): every other form, survey and the check-in look as before. */ /* 1040px since 2026-10-21: the form keeps its 640px column and, on a desk, a card beside it says who the call is with (.plain-layout below). */ .page-plain main { max-width: 1040px; } /* width:100% as well as max-width: the header is a flex item of the body column, and a flex item with auto side margins shrinks to its content — it would sit narrower than main and start right of its edge. */ .page-plain .site-header { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 24px 0; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; } .page-plain .site-header .tagline { flex-basis: 100%; order: 3; } @media (max-width: 560px) { .page-plain .site-header { padding: 22px 16px 0; } } .page-plain .form-alert { text-align: left; } .form-hero.compact.plain { padding: 30px 0 4px; text-align: left; } .form-hero.compact.plain h1 { font-size: clamp(38px, 7vw, 54px); margin: 0 0 14px; text-wrap: balance; } .form-hero.plain .glance { margin: 0 0 6px; color: var(--soft); font-size: 16px; letter-spacing: 0; } .form-hero.plain .bonus-line { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 56ch; } form[data-layout="single"][data-look="plain"] { margin-top: 22px; padding: 0; text-align: left; background: none; border: 0; border-radius: 0; } form[data-layout="single"][data-look="plain"] .step:not(.hidden) { display: block; padding: 0; } form[data-layout="single"][data-look="plain"] .step + .step { border-top: 0; margin-top: 6px; } form[data-layout="single"][data-look="plain"] .question:not(.hidden) { margin: 0 0 22px; } form[data-layout="single"][data-look="plain"] .fine-print { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; } form[data-layout="single"][data-look="plain"] .q-label { font-size: 16px; line-height: 1.4; margin-bottom: 8px; color: var(--white); } form[data-layout="single"][data-look="plain"] .q-help { font-size: 13px; color: var(--muted); } form[data-layout="single"][data-look="plain"] input[type="text"], form[data-layout="single"][data-look="plain"] input[type="email"], form[data-layout="single"][data-look="plain"] input[type="number"], form[data-layout="single"][data-look="plain"] textarea { min-height: 56px; padding: 14px 16px; font-size: 17px; line-height: 1.45; text-align: left; background: var(--onyx-1); border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } form[data-layout="single"][data-look="plain"] input[type="text"]:hover, form[data-layout="single"][data-look="plain"] input[type="email"]:hover, form[data-layout="single"][data-look="plain"] input[type="number"]:hover, form[data-layout="single"][data-look="plain"] textarea:hover { border-color: var(--line-hover); } form[data-layout="single"][data-look="plain"] textarea { height: 120px; } form[data-layout="single"][data-look="plain"] input:focus, form[data-layout="single"][data-look="plain"] textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(43, 199, 181, .12); } /* First name and Last name: two labelled boxes, one per row like every other field. */ form[data-look="plain"] .name-split { display: flex; flex-direction: column; gap: 22px; } form[data-look="plain"] .name-part { display: flex; flex-direction: column; } /* Answers: full-width bars, one per row, whatever their count. These two selectors restate the single-page rules they replace (the Yes/No row and the two-column grid) with [data-look] added, so they outrank them. */ form[data-layout="single"][data-look="plain"] .choices[role="radiogroup"]:not(:has(> label:nth-of-type(3))), form[data-layout="single"][data-look="plain"] .choices[role="radiogroup"]:has(> label:nth-of-type(3)) { display: flex; flex-direction: column; gap: 10px; } form[data-layout="single"][data-look="plain"] .choices { gap: 10px; } form[data-layout="single"][data-look="plain"] .choices[role="radiogroup"] > .choice { flex: none; } /* An answer is a tile (2026-10-21, the CRM's): the words at the left behind a small square that fills turquoise with a check when it is his; the tile lifts a hair toward the cursor, and the chosen one carries the accent edge. The square is drawn only where :has() can light it (the @supports block below); elsewhere the browser's own radio stays, so a choice is never invisible. */ form[data-layout="single"][data-look="plain"] .choice { min-height: 56px; padding: 14px 18px; font-size: 16px; line-height: 1.4; justify-content: flex-start; align-items: center; gap: 14px; text-align: left; background: var(--onyx-1); border: 1px solid var(--line-strong); border-radius: 2px; transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } form[data-layout="single"][data-look="plain"] .choice:hover { border-color: var(--line-hover); box-shadow: var(--e2); transform: translateY(-1px); } @supports selector(:has(*)) { form[data-layout="single"][data-look="plain"] .choices[role="radiogroup"] .choice::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 2px; border: 1px solid var(--line-hover); background: var(--onyx-0) center / 14px no-repeat; transition: background-color .25s var(--ease), border-color .25s var(--ease); } form[data-layout="single"][data-look="plain"] .choice:has(input:checked) { border-color: var(--turquoise); background: rgba(43, 199, 181, .08); box-shadow: inset 0 0 0 1px var(--turquoise); } form[data-layout="single"][data-look="plain"] .choices[role="radiogroup"] .choice:has(input:checked)::before { background-color: var(--turquoise); border-color: var(--turquoise); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } } @media (prefers-reduced-motion: reduce) { form[data-layout="single"][data-look="plain"] .choice:hover { transform: none; } } /* The consents: a checkbox and its sentence on one line, no card. */ form[data-layout="single"][data-look="plain"] .consents .choice { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 12px; min-height: 0; padding: 0; text-align: left; background: none; border: 0; border-radius: 0; font-size: 14px; line-height: 1.55; color: var(--soft); } form[data-layout="single"][data-look="plain"] .consents .choice input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; -webkit-appearance: none; appearance: none; cursor: pointer; border: 1px solid var(--line-hover); border-radius: 2px; background: var(--onyx-1) center / 14px no-repeat; transition: background-color .25s var(--ease), border-color .25s var(--ease); } form[data-layout="single"][data-look="plain"] .consents .choice:hover { box-shadow: none; transform: none; } form[data-layout="single"][data-look="plain"] .consents .choice input:checked { background-color: var(--turquoise); border-color: var(--turquoise); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } form[data-layout="single"][data-look="plain"] .consents .choice input:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; } form[data-layout="single"][data-look="plain"] .consents { gap: 14px; } form[data-layout="single"][data-look="plain"] .cta-row { display: block; margin-top: 4px; } form[data-layout="single"][data-look="plain"] .btn.submit { width: 100%; min-height: 60px; margin-top: 8px; border-radius: 2px; font-size: 13.5px; box-shadow: 0 14px 34px -14px rgba(43, 199, 181, .55), inset 0 1px 0 rgba(255, 255, 255, .25); } form[data-layout="single"][data-look="plain"] .field-error, form[data-layout="single"][data-look="plain"] .step-error { text-align: left; } .intro-more.after-form { max-width: none; margin: 30px 0 0; text-align: left; } /* ── Beside the plain form: who the call is with (2026-10-21) ────────────── From the mockups he approved ("I think everything else looks good. Lets do it."): the form keeps its one 640px column, and on a desk a card at its right holds his photograph and what the call is; on a phone the same two lines ride a slim strip UNDER the form (above it, it cost the first box 153px of a 375px screen). Nothing in either is a field or a button: the plain look's one column of questions is untouched. */ .plain-layout { display: grid; grid-template-columns: minmax(0, 640px) 300px; gap: 72px; justify-content: space-between; align-items: start; } .plain-aside { position: sticky; top: 36px; margin-top: 30px; } .call-card { background: var(--onyx-1); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--e2); overflow: hidden; } .call-card .photo { aspect-ratio: 4 / 4.4; overflow: hidden; background: var(--onyx-2); } .call-card .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.8) brightness(.86); } .call-card .in { padding: 22px 22px 24px; } .call-card-label { margin: 0 0 10px; color: var(--turquoise); font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; } .call-card h2 { font-size: 25px; line-height: 1.2; margin: 0; } .call-card ul { list-style: none; margin: 16px 0 0; padding: 0; } .call-card li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.5; } .call-card li svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--turquoise); stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .call-strip { display: none; } @media (max-width: 920px) { .plain-layout { grid-template-columns: 1fr; gap: 0; } .plain-aside { display: none; } .call-strip { display: flex; gap: 14px; align-items: center; margin: 30px 0 0; padding: 12px; background: var(--onyx-1); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--e1); } .call-strip .face { width: 56px; height: 56px; flex: none; overflow: hidden; border-radius: 2px; background: var(--onyx-2); } .call-strip .face img { display: block; width: 180px; max-width: none; height: auto; margin: -87px 0 0 -23px; filter: saturate(.85) brightness(.92); } .call-strip p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; } .call-strip p b { display: block; color: var(--white); font-weight: 500; } } /* The hairline across the very top fills as he answers, and the header says how many of how many (form.js, the plain look only). Hidden until the script runs, so a page without it shows nothing half-made. */ .answer-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; background: var(--line); } .answer-progress i { display: block; height: 100%; width: 0; background: var(--turquoise); box-shadow: 0 0 12px rgba(43, 199, 181, .4); transition: width .4s var(--ease); } .answer-count { color: var(--muted); font-size: 12px; letter-spacing: .04em; white-space: nowrap; } .answer-count b { color: var(--white); font-weight: 600; } .intro-more.after-form .lede { margin: 10px 0 0; max-width: 60ch; } .form-alert { background: rgba(217, 112, 102, .08); border: 1px solid var(--error); color: var(--white); border-radius: 2px; padding: 14px 18px; margin: 20px 0; font-size: 14.5px; } .progress { margin: 28px 0 36px; } #progress-label { font-size: 10px; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; } .bar { height: 1px; background: var(--line); margin-top: 12px; } .bar i { display: block; height: 100%; width: 0; background: var(--turquoise); transition: width .4s cubic-bezier(.22,1,.36,1); } .step { background: var(--onyx-1); border: 1px solid var(--line); border-radius: 2px; padding: 44px 40px; margin-bottom: 28px; } @media (max-width: 560px) { .step { padding: 32px 22px; } } .step.hidden { display: none; } .step-letter { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 12px; border: 1px solid var(--turquoise); color: var(--turquoise); font-family: var(--serif); font-size: 15px; font-weight: 600; } .section-intro { color: var(--turquoise-hi); font-family: var(--serif); font-size: 15.5px; font-style: italic; margin-top: 2px; } .question { margin: 34px 0; } .question.hidden { display: none; } .q-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 15.5px; } .optional { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 10px; text-transform: uppercase; letter-spacing: .2em; } .q-help { color: var(--muted); font-size: 13.5px; margin: -2px 0 12px; } input[type="text"], input[type="email"], input[type="date"], input[type="number"], textarea { width: 100%; background: var(--onyx-0); color: var(--white); border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; font: inherit; transition: border-color .2s ease; } textarea { resize: vertical; min-height: 120px; } input:focus, textarea:focus { outline: none; border-color: var(--turquoise); } .choices { display: flex; flex-direction: column; gap: 10px; } .choice { display: flex; gap: 14px; align-items: flex-start; background: var(--onyx-0); border: 1px solid var(--line); border-radius: 2px; padding: 14px 16px; cursor: pointer; font-size: 15px; transition: border-color .2s ease; } .choice:hover { border-color: var(--turquoise); } .choice input { accent-color: var(--turquoise); margin-top: 4px; flex: none; } .consents .choice { font-size: 13.5px; color: var(--muted); } .other-line { margin-top: 2px; } /* ── Rank cards (tap in order; first tap = 1) ────────────────────────────── Buttons wearing the .choice card look — buttons inherit nothing, so font, width and color are restated. The badge is the empty circle that fills with the pick number; order lives in hidden inputs, not the DOM here. */ .rank-card { width: 100%; text-align: left; font: inherit; color: var(--white); align-items: center; -webkit-appearance: none; appearance: none; } .rank-badge { flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line); color: var(--onyx-0); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; transition: border-color .2s ease; } .rank-card:hover .rank-badge { border-color: var(--turquoise); } .rank-card.ranked { border-color: var(--turquoise); background: rgba(43, 199, 181, .08); } .rank-card.ranked .rank-badge { background: var(--turquoise); border-color: var(--turquoise); } .field-error, .step-error { color: var(--error); font-size: 13.5px; margin-top: 10px; font-weight: 600; } .btn { display: inline-block; background: var(--turquoise); color: var(--onyx-0); font-weight: 700; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; border: none; border-radius: 2px; padding: 17px 34px; cursor: pointer; margin-top: 14px; text-decoration: none; /* An gets none of a