/* * FameUp Onboarding v2 — Austin launch theme. * * Layered on top of onboarding_v2.css, scoped to `.ob2-austin` (set on * for the `us` locale on the v2 path). Loaded only for that variant. * * Design references: docs/barters/austin_templates/. Teal accent, cream left * card, navy headings. On mobile the hero shows the cafe+skyline photo with the * metric cards floating on it; on desktop (>=900px) the right panel is the proof * surface (skyline, white metric cards, testimonial card, two creator cards, * trust row). Per the brief only the hero + business screens change on mobile. */ .ob2-austin { --au-teal: #1aa091; --au-teal-dark: #137a6e; --au-teal-soft: #d9f0ec; --au-ink: #14233a; --au-cream: #f7f5f0; --au-panel-1: #57c3b6; --au-panel-2: #2e9b8e; } /* Desktop: apply the Austin teal accent across every step. Mobile keeps the base teal except the hero/business screens, which theme themselves. */ @media (min-width: 900px) { .ob2-austin { --ob2-primary: var(--au-teal); --ob2-primary-hover: var(--au-teal-dark); --ob2-primary-rgb: 26, 160, 145; --ob2-shadow-cta: 0 4px 14px rgba(26, 160, 145, 0.22); } } .ob2-austin .ob2-stage { background: radial-gradient(1100px 520px at 50% -8%, var(--au-teal-soft), transparent 70%), var(--ob2-stage); } /* Cream left card to match the reference. */ .ob2-austin .ob2-phone { background: var(--au-cream); } /* The sticky CTA footer defaults to white (surface); match the cream card so it doesn't read as a separate white band under the form. */ .ob2-austin .ob2-bottom-cta { background: var(--au-cream); } /* Desktop split: the .ob2-left wrapper is white and the cream card is narrower than its 50% half, so white shows on both sides of the card. Make the whole left column cream so the left half reads as one seamless cream panel. */ .ob2-austin .ob2-left { background: var(--au-cream); } /* Full-card white overlays that appear mid-flow — the AI discovery scanner, the "search again" screen, and the review-brief preloader — all default to a white surface; match the cream card so they don't flash white. */ .ob2-austin .ob2-bp-scan, .ob2-austin .ob2-search-screen, .ob2-austin .ob2-page-gate { background: var(--au-cream); } /* The live step's download footer is a white band with a light divider. */ .ob2-austin .ob2-live-bottom { background: var(--au-cream); border-top-color: rgba(20, 35, 58, 0.06); } /* The base centres step content vertically on desktop, which leaves dead cream space above the heading. Top-align it for the Austin variant. */ @media (min-width: 900px) { .ob2-austin .ob2-screen { justify-content: flex-start; } } /* ------------------------------------------------------------------ Hero --- */ .au-hero-wrap { padding: 0 1.25rem; } .au-hero-body { padding: 1.25rem 0 1rem; display: flex; flex-direction: column; gap: 1rem; } .au-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--au-teal-soft); color: var(--au-teal-dark); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--ob2-radius-pill); } .au-biz-pill { margin-bottom: 16px; } /* Mobile pill is uppercase (ref); desktop pill is title-case (ref). */ @media (min-width: 900px) { .au-pill { text-transform: none; letter-spacing: 0.01em; } } @media (max-width: 768px) { .au-pill {display: none;} .au-reassure {display: none;} .au-hero-body {gap: .5rem; padding: 0} /** Pricing page */ .price-sub {margin:0;} .plan-feat-title {margin: .25rem 0; text-align: center;} .feat-compact {margin: 0;} .ob2-scroll-with-cta .ob2-pad } .au-h1 { margin: 0; font-size: clamp(30px, 8vw, 42px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--au-ink); } .au-h1 .au-hl, .ob2-austin .au-hl { color: var(--au-teal); } .au-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ob2-ink-soft); max-width: 42ch; } .au-sub strong { color: var(--au-teal); font-weight: 700; } /* Media block: cafe photo + floating metric cards (mobile only — on desktop the right panel carries the imagery and metrics). */ .au-media { position: relative; margin: 0.35rem 0 2.5rem; } .au-media-photo { aspect-ratio: 16 / 10; border-radius: var(--ob2-radius-lg); background: #cfd8d6 url('../images/austin_cafe.png') center / cover no-repeat; box-shadow: 0 10px 30px rgba(20, 35, 58, 0.12); } .au-metrics { position: absolute; left: 14px; right: 14px; bottom: -28px; display: flex; gap: 12px; } .au-metric { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(20, 35, 58, 0.05); border-radius: var(--ob2-radius-md); padding: 11px 13px; box-shadow: 0 10px 26px rgba(20, 35, 58, 0.14); } .au-metric-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--au-teal-soft); border-radius: 50%; font-size: 15px; color: var(--au-teal); } .au-metric-n { font-weight: 800; font-size: 18px; color: var(--au-ink); line-height: 1; } .au-metric-l { font-size: 12px; color: var(--ob2-muted); margin-top: 2px; } @media (min-width: 900px) { /* Desktop hero: no inline media — the panel shows imagery + metrics. */ .au-media { display: none; } } .au-bullets { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.25rem; } .au-bullet { display: flex; gap: 12px; align-items: flex-start; } .au-bullet-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: var(--au-teal-soft); border-radius: 10px; font-size: 16px; } .au-bullet-t { font-weight: 700; font-size: 14px; color: var(--au-ink); } .au-bullet-d { font-size: 13px; color: var(--ob2-muted); margin-top: 1px; } .au-bottom-cta { display: flex; flex-direction: column; gap: 9px; } .au-reassure { text-align: center; font-size: 12px; color: var(--ob2-muted); } /* Hero + business buttons stay Austin teal at every width. */ .au-btn { background: var(--au-teal); box-shadow: 0 8px 20px rgba(26, 160, 145, 0.25); } .au-btn:hover { background: var(--au-teal-dark); } /* -------------------------------------------------------------- Business --- */ .au-q-h1 { font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--au-ink); } .au-q-sub { color: var(--ob2-ink-soft); } .au-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: var(--ob2-muted); font-weight: 700; } .au-badge { display: inline-block; margin-left: 6px; vertical-align: middle; background: var(--au-teal-soft); color: var(--au-teal-dark); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--ob2-radius-pill); } .au-biz-screen .ob2-biz-input:focus { border-color: var(--au-teal); box-shadow: 0 0 0 3px rgba(26, 160, 145, 0.12); } /* ----------------------------------------------------------------- Panel --- */ .ob2-bp-austin { background: linear-gradient(180deg, var(--au-panel-1) 0%, var(--au-panel-2) 72%); color: #fff; position: relative; overflow: hidden; } /* Real Austin skyline across the top, fading into the teal. */ .ob2-bp-austin::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46%; background: url('../images/austin_skyline.jpg') center top / cover no-repeat; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); } .ob2-bp-austin .ob2-bp-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; height: 100%; } .au-bp-metrics { display: flex; gap: 10px; margin-top: 96px; } .au-bp-metric { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--au-ink); border-radius: var(--ob2-radius-md); padding: 12px 14px; box-shadow: 0 10px 26px rgba(14, 35, 58, 0.18); } .au-bp-metric-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--au-teal-soft); border-radius: 50%; font-size: 15px; color: var(--au-teal); } .au-bp-metric-n { font-weight: 800; font-size: 19px; line-height: 1; } .au-bp-metric-l { font-size: 12px; color: var(--ob2-muted); margin-top: 2px; } /* Testimonial — white card with a teal quote mark. */ .au-bp-quote { position: relative; margin: 0; background: #fff; color: var(--au-ink); border-radius: var(--ob2-radius-lg); padding: 30px 16px 16px; font-size: 15px; line-height: 1.45; font-weight: 700; box-shadow: 0 10px 26px rgba(14, 35, 58, 0.14); } .au-bp-quote::before { content: "\201C"; position: absolute; top: 22px; left: 14px; font-family: Georgia, "Times New Roman", serif; font-size: 46px; line-height: 0; color: var(--au-teal); } .au-bp-cite { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--ob2-muted); font-style: normal; } /* Two creator cards. */ .au-bp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .au-bp-card { position: relative; aspect-ratio: 3 / 4; border-radius: var(--ob2-radius-md); overflow: hidden; background: var(--au-panel-2) center / cover no-repeat; display: flex; flex-direction: column; justify-content: space-between; padding: 9px; } .au-bp-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.55)); } .au-bp-badge, .au-bp-loc { position: relative; z-index: 1; align-self: flex-start; } .au-bp-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--ob2-radius-pill); backdrop-filter: blur(2px); } .au-bp-badge svg { width: 12px; height: 12px; } .au-bp-loc { display: inline-flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: var(--ob2-radius-pill); backdrop-filter: blur(2px); } /* Trust row — icon + label, split by vertical dividers. */ .au-bp-trust { display: flex; margin-top: auto; padding-top: 4px; } .au-bp-trust-item { flex: 1; display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.3; padding: 0 12px; position: relative; } .au-bp-trust-item:first-child { padding-left: 0; } .au-bp-trust-item + .au-bp-trust-item::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 1px; background: rgba(255, 255, 255, 0.28); } .au-bp-trust-ic { flex: none; opacity: 0.95; display: inline-flex; margin-top: 1px; } .au-bp-trust-ic svg { width: 18px; height: 18px; display: block; }