/* ============================================================================ THE FORM CARD — copied from ODNDR's /contact, measured not eyeballed ---------------------------------------------------------------------------- Jayden 2026-09-25: the DAS contact and quote pages "need to follow this exact design" — https://offdutynotdrivingrewards.com/contact — and "lets keep them the same across website just diff info and diff booking link". An earlier pass built these on Retention Opportunity's intake surface with a stepped flow. Wrong target, and it is reverted. ODNDR's form is single-page: twelve controls visible at once, one button. The only thing named "step" on that page is a CSS-module class, `stripe-demo-module__step`, which is also the clue to the whole aesthetic — it is Stripe's. EVERY NUMBER BELOW WAS READ OFF THE LIVE ODNDR PAGE with getComputedStyle, not matched by eye: row display:grid · grid-template-columns:170px 322px · gap:16px align-items:start <- label LEFT of the field, not above card padding 14px 16px 20px · radius 8px · white shadow rgba(50,50,93,.25) 0 50px 100px -20px eyebrow 12.5px / 400 / #6B7688 headline 22px / 26.4px / 600 / #0A2540 sub 14px / #425466 label 15px / 500 / #0A2540 / no transform field 36px tall · 15px · NO BORDER · radius 4px · bg #F6F9FC button 34px · pill (radius 999px) · #215387 · 15px / 600 The borderless #F6F9FC field on white is the signature of this design. Do not give it a border to "fix" it — that is the look. ========================================================================== */ .ix { --ix-ink: #0A2540; /* Stripe navy — headings, labels, typed text */ --ix-body: #425466; /* secondary copy */ --ix-muted: #6B7688; /* eyebrow, hints */ --ix-field: #F6F9FC; /* the field itself */ --ix-field-hover: #EEF3F9; --ix-accent: #215387; /* DAS navy — the button, the focus ring */ --ix-line: #E6EBF1; --ix-danger: #B42318; } /* ── the row: label left, field right ──────────────────────────────────── This is the part that makes it read as ODNDR rather than a generic form. Below 640 it stacks, because 170px of label beside a field does not fit a phone. */ .ix .cf-row, .ix .cf-row-full { display: block; margin: 0; } .ix .cf-group { /* gap and columns carry !important because the pages themselves hold `#contact-form .cf-group { gap:0 }` — an ID selector, which outranks any class. Theirs is not !important, so this wins on weight rather than by escalating the selector war. */ /* ODNDR's label column is a fixed 170px in a 508px row — 34%. DAS's card is narrower (about 403px), so a hard 170px leaves the field at 217px against ODNDR's 322px and the row reads cramped. The clamp reproduces 170px exactly at ODNDR's width and gives the field room back on a narrower card, which is matching the design rather than the pixel. */ display: grid !important; grid-template-columns: clamp(120px, 34%, 170px) minmax(0, 1fr) !important; gap: 16px !important; align-items: start; padding: 7px 0; } @media (max-width: 640px) { .ix .cf-group { grid-template-columns: 1fr !important; gap: 6px !important; padding: 8px 0; } } .ix .cf-label { margin: 0; padding-top: 8px; font-size: 15px !important; font-weight: 500 !important; line-height: 1.3; color: var(--ix-ink) !important; text-transform: none; letter-spacing: normal; } @media (max-width: 640px) { .ix .cf-label { padding-top: 0; } } .ix .cf-req { color: var(--ix-muted) !important; font-weight: 500 !important; } /* WHY !important BELOW. das-contact.css styles .cf-input, .cf-label and .cf-submit with !important on every property — border, radius, shadow, background, colour, size, padding. That file is the DAS look this brief replaces. Specificity decides between two !important rules, and `.ix .cf-*` (0,2,0) beats `.cf-*` (0,1,0), so these win without touching that file — the same trade das-forms.css already documents a few lines into itself. */ /* ── fields ─────────────────────────────────────────────────────────────── Borderless on a tinted ground, exactly as ODNDR has them. 36px on desktop; 16px type and 44px height on a phone, because below 16px iOS Safari zooms on focus and never zooms back, and 36px is under the touch-target minimum. */ .ix .cf-input, .ix .cf-select, .ix .cf-textarea { width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 12px !important; font: 400 15px/34px inherit; font-size: 15px !important; color: var(--ix-ink) !important; background: var(--ix-field) !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; appearance: none; -webkit-appearance: none; transition: background .12s, box-shadow .12s !important; } .ix .cf-textarea { padding: 10px 12px !important; line-height: 1.5; min-height: 64px; resize: vertical; } .ix .cf-input::placeholder, .ix .cf-textarea::placeholder { color: #8792A2; } .ix .cf-input:hover, .ix .cf-select:hover, .ix .cf-textarea:hover { background: var(--ix-field-hover) !important; box-shadow: none !important; } .ix .cf-input:focus, .ix .cf-select:focus, .ix .cf-textarea:focus { outline: none !important; background: #fff !important; box-shadow: 0 0 0 1px var(--ix-accent), 0 0 0 4px rgba(33,83,135,.12) !important; } @media (max-width: 640px) { .ix .cf-input, .ix .cf-select, .ix .cf-textarea { min-height: 44px; font-size: 16px !important; line-height: 42px; } .ix .cf-textarea { line-height: 1.5; } } .ix .cf-select-wrap { position: relative; } .ix .cf-select-wrap::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ix-muted); border-bottom: 1.5px solid var(--ix-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .ix .cf-select { padding-right: 32px; } /* ── the card's own header ───────────────────────────────────────────────── */ .ix .ix-eyebrow { margin: 0 0 4px; font-size: 12.5px; font-weight: 400; color: var(--ix-muted); letter-spacing: normal; text-transform: none; } .ix .ix-head { margin: 0 0 4px; font-size: 22px; line-height: 26.4px; font-weight: 600; color: var(--ix-ink); } .ix .ix-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ix-body); } /* ── the submit: a pill, full width on the card ─────────────────────────── */ .ix .cf-submit { min-height: 40px; padding: 0 22px; width: 100%; background: var(--ix-accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: normal; text-transform: none; cursor: pointer; transition: background .15s; } .ix .cf-submit:hover { background: #1A4470 !important; } .ix .cf-submit:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 3px; } @media (max-width: 640px) { .ix .cf-submit { min-height: 48px; } } /* A field the page's own validation flagged. */ .ix .is-invalid { box-shadow: 0 0 0 1px var(--ix-danger), 0 0 0 4px rgba(180,35,24,.10); background: #fff; } .ix-err { margin: 6px 0 0; font-size: 12.5px; line-height: 18px; color: var(--ix-danger); } /* ── RESTORE THE LABELS ─────────────────────────────────────────────────── Both pages carried a rule visually hiding every .cf-label, commented "ODNDR parity: placeholders carry the field names on this form". That was a wrong reading of ODNDR. Measured on the live page, its labels are VISIBLE — 15px / 500 / #0A2540, sitting in a 170px column to the LEFT of the field — and that label-left geometry is most of why the form reads the way it does. Placeholders there hold example values ("Jane", "jane@fleet.com"), not the field's name. The hiding rule is `#contact-form .cf-label:not(.cf-label-show)` — an ID selector, but not !important, so this wins on weight. */ .ix .cf-label:not(.cf-label-show) { position: static !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 8px 0 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; border: 0 !important; } @media (max-width: 640px) { .ix .cf-label:not(.cf-label-show) { padding-top: 0 !important; } } /* ============================================================================ THE TYPEFACE — THE PART THAT WAS MISSING ---------------------------------------------------------------------------- Jayden 2026-09-25: "They're not both live because it's not the same font as the OffDutyNotDriving one. It's not the exact same, so I'm confused." He was right. The pass above ported ODNDR's GEOMETRY and COLOUR — row grid, borderless #F6F9FC field, the pill, the navy — and never touched the type. So the two pages carried ODNDR's measurements in DAS's brand faces: Anton for the headline, Oswald for the card head, labels and button, Chivo for the eyebrow. Same layout, completely different voice. ODNDR's contact page sets ONE face for the whole page. Source, not guessed — odndr-web/app/(public)/contact/stripe-demo.module.css: .page { font-family: var(--font-hanken), -apple-system, 'Segoe UI', sans-serif } Everything on that page — 52px headline, bullets, card head, labels, typed text, submit — inherits from it. Hanken Grotesk, nothing else. That single inheritance is most of why it reads as one calm surface, and it is exactly what these two pages did not have. CORRECTIONS IN THE SAME PASS. Reading the module CSS also caught three values the earlier live measurement got wrong — getComputedStyle was pointed at the wrong elements (the eyebrow it found was the site nav's, not the card's): card eyebrow measured 12.5px / 400 / #6B7688 / sentence case ACTUALLY 12px / 600 / .08em / UPPERCASE / #215387 card head no rule found ACTUALLY border-bottom 1px #E3E8EE, padding 10px 0 12px row padding 7px 0 ACTUALLY 6px 0 label l-height 1.3 ACTUALLY 1.35 focus ring rgba(33,83,135,.12) ACTUALLY .2 textarea min-height 64px / 10px 12px ACTUALLY 64px / 8px 12px ONE DELIBERATE DEPARTURE, stated rather than hidden. ODNDR's submit is a 34px pill, auto width, right-aligned in a footer row. On DAS these two pages ARE the conversion — "Book My Strategy Call" is the only thing on the page that earns money — so the button keeps its full width and 40/48px height and takes only ODNDR's radius, colour, weight and now its face. Matching the 34px right-aligned pill would be a truer trace and a worse page; say the word and it flips in one line. ========================================================================== */ /* The stack is ODNDR's own fallback chain, copied. Hanken Grotesk is loaded from the same Google Fonts host the rest of this site already uses — a second font host on two pages would cost a connection to save nothing. */ .dc, .ix { --ix-face: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif; font-family: var(--ix-face); /* THE TOKENS ARE REDECLARED HERE ON PURPOSE. The block at the top of this file puts them on `.ix`, which is the
. But the card head and the hero are OUTSIDE the form, so `var(--ix-ink)` there resolved to nothing — and an unresolved var is invalid at computed-value time, which drops the entire declaration rather than falling back. Symptom: the card head had no hairline and its headline stayed slate. Declaring them on `.dc` too means every element this brief touches can see them. */ --ix-ink: #0A2540; --ix-body: #425466; --ix-muted: #6B7688; --ix-line: #E3E8EE; --ix-accent: #215387; } /* Everything on these pages that named a face of its own. Each of these is a class rule elsewhere, so one descendant selector outranks it — no !important, nothing else on the site touched. */ .dc .ch-eyebrow, /* was Chivo */ .dc .ch-subtitle, .dc .dc-direct dt, .dc .dc-direct dd, .dc .form-eyebrow, /* was Oswald */ .dc .form-section-title, .dc .form-section-sub, .dc .cf-label, .dc .cr-success-eyebrow, .dc .cr-success-title, .dc .cf-fu b, .dc .cf-fu-badge, .dc .dc-dir-head, .dc .dc-tbl-k, .ix .cf-submit, .ix .cf-input, .ix .cf-select, .ix .cf-textarea { font-family: var(--ix-face); } /* THE HEADLINE. Anton is ultra-condensed; Hanken Grotesk is normal width, so the same size and tracking would jam the caps and run the line wide. DAS keeps uppercase headlines site-wide — that is the brand, and changing it on two pages only would break the rest — so the size comes down and the tracking comes back toward 0, which is what uppercase in a normal-width grotesque needs. */ .dc .ch-title { font-family: var(--ix-face) !important; font-size: clamp(2rem, 3.9vw, 2.875rem) !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: -.012em !important; max-width: 17ch; } /* THE CARD EYEBROW — the corrected values, from the module CSS. */ .dc .form-eyebrow { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase; color: #215387 !important; margin-bottom: 0 !important; } /* THE CARD HEADLINE — 22px sentence case, not 26px uppercase. */ .dc .form-section-title { font-size: 22px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ix-ink) !important; margin: 4px 0 0 !important; } .dc .form-section-sub { font-size: 14px !important; line-height: 1.5; color: var(--ix-body) !important; margin: 4px 0 0 !important; } /* The hairline under the card head — ODNDR's `.head`. */ .dc .form-section-head { padding: 10px 0 12px; border-bottom: 1px solid var(--ix-line); margin-bottom: 12px !important; } /* The corrected row and label metrics. */ .ix .cf-group { padding: 6px 0; } .ix .cf-label { line-height: 1.35; } .ix .cf-input:focus, .ix .cf-select:focus, .ix .cf-textarea:focus { box-shadow: 0 0 0 1px var(--ix-accent), 0 0 0 4px rgba(33, 83, 135, .2) !important; } .ix .cf-textarea { padding: 8px 12px !important; min-height: 64px; line-height: 1.45; } /* The submit keeps its size; it takes the face, and drops the Oswald caps and tracking that came with it. */ .ix .cf-submit { text-transform: none !important; letter-spacing: normal !important; }