/* * The Map: layout on the Gen Z theme pack (theme: linen, --tp-h 40 set on ). * Every colour, font, radius, shadow and duration is a var(--tp-*); spacing is * this file's own. Desktop-first website that stacks at 900px and 520px. */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--tp-bg); } body { margin: 0; min-height: 100vh; background: var(--tp-canvas); color: var(--tp-ink); font: 400 16px/1.55 var(--tp-font-body); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3 { font-family: var(--tp-font-display); font-weight: var(--tp-w-display); letter-spacing: var(--tp-track-display); text-transform: var(--tp-case-display); margin: 0; line-height: 1.05; } p { margin: 0; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid var(--tp-acc); outline-offset: 3px; } [tabindex="-1"]:focus { outline: none; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: min(1160px, 100% - 48px); margin-inline: auto; } .mute { color: var(--tp-mute); } .mono { font-family: var(--tp-font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } /* buttons: 44px targets, press scale from the theme */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: var(--tp-bw) solid transparent; border-radius: var(--tp-r-btn); background: var(--tp-acc); color: var(--tp-acc-ink); font: 700 16px/1 var(--tp-font-body); text-decoration: none; cursor: pointer; box-shadow: var(--tp-sh-sm); transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease); } .btn:active { transform: scale(var(--tp-press)); } .btn.big { min-height: 56px; padding: 0 30px; font-size: 17px; } .btn.ghost { background: var(--tp-surf); color: var(--tp-ink); border-color: var(--tp-line); box-shadow: none; } .btn.wide { width: 100%; } .btn:disabled { opacity: .5; cursor: default; } .link { background: none; border: 0; color: var(--tp-ink); font: 600 15px var(--tp-font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; padding: 0 4px; } .card { background: var(--tp-surf); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r); box-shadow: var(--tp-sh); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--tp-r-btn); background: var(--tp-surf-2); color: var(--tp-ink); font: 600 13px var(--tp-font-body); } /* ----------------------------------------------------------------- nav */ .nav { position: sticky; top: 0; z-index: 20; background: var(--tp-bg); border-bottom: var(--tp-bw) solid var(--tp-line); } .nav .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font: var(--tp-w-display) 20px var(--tp-font-display); letter-spacing: var(--tp-track-display); text-decoration: none; } .brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tp-acc); outline: 4px solid var(--tp-surf-2); } .nav-links { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; } .nav-links a { text-decoration: none; color: var(--tp-mute); } .nav-links a:hover { color: var(--tp-ink); } /* --------------------------------------------------------------- the map */ .map { position: relative; aspect-ratio: 1; width: 100%; border-radius: var(--tp-r-lg); overflow: hidden; background: var(--tp-surf); border: var(--tp-bw) solid var(--tp-line); box-shadow: var(--tp-sh); } .map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .map .q-fog { fill: var(--tp-surf-2); } .map .q-lookout { fill: var(--tp-surf); } .map .q-water { fill: var(--tp-surf); } .map .q-home { fill: var(--tp-surf-2); } .map .cont { fill: none; stroke: var(--tp-line); stroke-width: 1.2; } .map .axis { stroke: var(--tp-mute); stroke-width: 1; stroke-dasharray: 4 5; } .map .reg { position: absolute; font: 700 12px var(--tp-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tp-mute); pointer-events: none; } .map .reg.tl { left: 6%; top: 5%; } .map .reg.tr { right: 6%; top: 5%; } .map .reg.bl { left: 6%; bottom: 5%; } .map .reg.br { right: 6%; bottom: 5%; } .dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--tp-acc); outline: 8px solid var(--tp-surf-2); box-shadow: var(--tp-sh-sm); transition: left var(--tp-dur) var(--tp-ease), top var(--tp-dur) var(--tp-ease); } .dot.idle { animation: tp-breathe calc(var(--tp-dur) * 13) var(--tp-ease) infinite; } .trail { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--tp-acc-2); opacity: 1; } /* -------------------------------------------------------------- landing */ .hero { padding: 64px 0 56px; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } .hero h1 { font-size: var(--tp-hero); max-width: 12ch; } .hero .lede { font-size: 20px; color: var(--tp-mute); margin: 22px 0 30px; max-width: 34ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-visual { position: relative; } .hero-card { position: absolute; left: -28px; bottom: -26px; width: min(300px, 80%); padding: 18px 20px; } .hero-card .mono { color: var(--tp-mute); } .hero-card p.card-text { font: 700 17px/1.35 var(--tp-font-display); margin-top: 8px; } .proof { border-block: var(--tp-bw) solid var(--tp-line); background: var(--tp-surf); } .proof .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .proof div { padding: 22px 18px; border-left: var(--tp-bw) solid var(--tp-line); } .proof div:first-child { border-left: 0; } .proof b { display: block; font: var(--tp-w-display) 28px var(--tp-font-display); letter-spacing: var(--tp-track-display); } .block { padding: 88px 0; } .block.alt { background: var(--tp-surf-2); } .block h2 { font-size: 44px; max-width: 22ch; } .block .sub { font-size: 18px; color: var(--tp-mute); margin: 14px 0 36px; max-width: 56ch; } .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; } .bento .card { padding: 26px; } .bento .b1 { grid-column: span 4; background: var(--tp-grad); color: var(--tp-acc-ink); border: 0; } .bento .b2 { grid-column: span 2; } .bento .b3 { grid-column: span 2; } .bento .b4 { grid-column: span 2; } .bento .b5 { grid-column: span 2; } .bento h3 { font-size: 22px; margin-bottom: 8px; } .bento .b1 h3 { font-size: 30px; max-width: 16ch; } .bento .b1 .sample { margin-top: 22px; background: var(--tp-surf); color: var(--tp-ink); border-radius: var(--tp-r); padding: 18px 20px; max-width: 460px; } .bento .b1 .sample p { font: 700 18px/1.35 var(--tp-font-display); margin-top: 6px; } .band { padding: 72px 0; background: var(--tp-surf); border-block: var(--tp-bw) solid var(--tp-line); } .band .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .band .step b { font: var(--tp-w-display) 44px var(--tp-font-display); color: var(--tp-acc); } .band .step h3 { font-size: 22px; margin: 6px 0 8px; } .faq details { border-top: var(--tp-bw) solid var(--tp-line); padding: 20px 0; } .faq details:last-child { border-bottom: var(--tp-bw) solid var(--tp-line); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; font: 700 20px var(--tp-font-display); min-height: 44px; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--tp-acc); font-size: 26px; } .faq details[open] summary::after { content: "–"; } .faq details p { color: var(--tp-mute); margin-top: 8px; max-width: 66ch; } .faq .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } .closing { padding: 96px 0; text-align: center; background: var(--tp-grad); color: var(--tp-acc-ink); } .closing h2 { font-size: 48px; max-width: 20ch; margin: 0 auto 26px; } .closing .btn { background: var(--tp-surf); color: var(--tp-ink); } .foot { padding: 30px 0 90px; color: var(--tp-mute); font-size: 14px; } .foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; } .foot nav { display: flex; gap: 18px; } .sticky-cta { display: none; } /* ---------------------------------------------------------- onboarding */ .flow { min-height: calc(100vh - 69px); display: grid; place-items: center; padding: 40px 0 60px; } .flow .wrap { max-width: 760px; } .stage { width: 100%; } .sec-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; } .bar { height: 6px; border-radius: var(--tp-r-btn); background: var(--tp-surf-2); overflow: hidden; margin-bottom: 34px; } .bar i { display: block; height: 100%; width: 0; background: var(--tp-acc); border-radius: var(--tp-r-btn); transition: width var(--tp-dur) var(--tp-ease); } .qtext { font-size: 38px; max-width: 22ch; margin-bottom: 8px; } .qhint { color: var(--tp-mute); margin-bottom: 26px; } .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; } .opt { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; text-align: left; cursor: pointer; background: var(--tp-surf); color: var(--tp-ink); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r); box-shadow: var(--tp-sh-sm); font: 600 16px/1.3 var(--tp-font-body); transition: transform var(--tp-dur) var(--tp-ease), background var(--tp-dur) var(--tp-ease); } .opt:active { transform: scale(var(--tp-press)); } .opt .tick { flex: none; width: 24px; height: 24px; border-radius: var(--tp-r-sm); border: 2px solid var(--tp-line); display: grid; place-items: center; } .opt[aria-pressed="true"] { background: var(--tp-surf-2); border-color: var(--tp-acc); } .opt[aria-pressed="true"] .tick { background: var(--tp-acc); border-color: var(--tp-acc); } .opt[aria-pressed="true"] .tick::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--tp-acc-ink); border-bottom: 2px solid var(--tp-acc-ink); transform: rotate(-45deg) translate(1px, -1px); } .yn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; } .yn .opt { justify-content: center; font-size: 18px; min-height: 72px; } .actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; } .result { text-align: left; animation: tp-up var(--tp-dur) var(--tp-ease) both; } .result h2 { font-size: 44px; max-width: 18ch; margin: 10px 0 18px; } .result .lede { font-size: 19px; color: var(--tp-mute); max-width: 52ch; margin-bottom: 26px; } .echo { display: grid; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; } .echo li { padding: 14px 18px; border-left: 3px solid var(--tp-acc); background: var(--tp-surf); border-radius: var(--tp-r-sm); font-weight: 600; } .rank-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-bottom: 28px; } .rank-num { font: var(--tp-w-display) 72px/1 var(--tp-font-display); letter-spacing: var(--tp-track-display); color: var(--tp-acc); } .hope { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; } .hope .card { padding: 26px; } .dots-nav { display: flex; gap: 6px; } .dots-nav i { width: 8px; height: 8px; border-radius: 50%; background: var(--tp-line); } .dots-nav i.on { background: var(--tp-acc); } /* --------------------------------------------------------- responsive */ @media (max-width: 900px) { .nav-links { display: none; } .hero .wrap, .faq .wrap, .rank-grid, .hope { grid-template-columns: minmax(0, 1fr); gap: 34px; } .hero h1 { font-size: 46px; } .hero-card { left: 12px; bottom: -20px; } .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof div:nth-child(3) { border-left: 0; } .bento .b1, .bento .b2, .bento .b3, .bento .b4, .bento .b5 { grid-column: span 6; } .band .wrap { grid-template-columns: minmax(0, 1fr); } .block h2, .closing h2 { font-size: 34px; } .qtext, .result h2 { font-size: 30px; } .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px; background: var(--tp-bg); border-top: var(--tp-bw) solid var(--tp-line); } } @media (max-width: 520px) { .wrap { width: min(1160px, 100% - 32px); } .opts { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: 36px; } .hero h1 { font-size: 40px; } .rank-num { font-size: 56px; } } @media (prefers-reduced-motion: reduce) { .dot.idle { animation: none; } } /* ------------------------------------------------------ sign-in, paywall */ .signin { max-width: 520px; margin: 0 auto; padding: 40px 36px; display: grid; gap: 18px; } .signin h1 { font-size: 36px; } .signin .lede { color: var(--tp-mute); font-size: 18px; } .signin-buttons { display: grid; gap: 12px; margin-top: 6px; } .small { font-size: 14px; } .paywall { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; width: 100%; } .paywall h1 { font-size: 44px; margin: 14px 0 22px; } .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .ticks li { padding-left: 32px; position: relative; color: var(--tp-mute); } .ticks li b { color: var(--tp-ink); } .ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--tp-surf-2); outline: 2px solid var(--tp-acc); outline-offset: -2px; } .pay-card { padding: 28px; display: grid; gap: 16px; } .plans { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; } .plan input { position: absolute; opacity: 0; } .plan span { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 18px 20px; border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r); cursor: pointer; background: var(--tp-surf); position: relative; } .plan b { font: var(--tp-w-display) 18px var(--tp-font-display); } .plan .price { font: var(--tp-w-display) 22px var(--tp-font-display); font-style: normal; text-align: right; } .plan .price small { font: 400 14px var(--tp-font-body); color: var(--tp-mute); } .plan span > small { grid-column: 1 / -1; color: var(--tp-mute); font-size: 14px; } .plan .best { position: absolute; top: -12px; right: 16px; min-height: 24px; font-style: normal; background: var(--tp-acc); color: var(--tp-acc-ink); } .plan input:checked + span { border-color: var(--tp-acc); outline: 2px solid var(--tp-acc); outline-offset: -2px; background: var(--tp-surf-2); } .plan input:focus-visible + span { outline: 3px solid var(--tp-acc); outline-offset: 3px; } @media (max-width: 900px) { .paywall { grid-template-columns: minmax(0, 1fr); } .paywall h1 { font-size: 32px; } } /* ----------------------------------------------------------- dashboard */ .app-links { margin-left: auto; } .dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; padding: 36px 0 60px; align-items: start; } .dash > .card.pad:not(.remap) { grid-column: 1 / -1; } .pad { padding: 26px; display: grid; gap: 12px; } .pad h2 { font-size: 24px; } .tonight { padding: 36px; display: grid; gap: 22px; background: var(--tp-surf); min-height: 360px; align-content: start; } .tonight-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; } .tonight-text { font: var(--tp-w-display) 40px/1.2 var(--tp-font-display); letter-spacing: var(--tp-track-display); max-width: 24ch; } #card-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .checkin { display: grid; gap: 10px; } .checkin label { font-weight: 700; } .checkin-row { display: flex; gap: 10px; } .checkin input, .setting select { flex: 1; min-height: 48px; padding: 0 14px; border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-sm); background: var(--tp-surf); color: var(--tp-ink); font: 400 16px var(--tp-font-body); } .done-note { font: 700 18px/1.4 var(--tp-font-display); color: var(--tp-ink); background: var(--tp-surf-2); padding: 16px 18px; border-radius: var(--tp-r-sm); } .side { display: grid; gap: 24px; } .remap { grid-column: 1 / -1; } .remap-text { font: 700 22px/1.3 var(--tp-font-display); } .journal, .library { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .journal li { border-left: 3px solid var(--tp-acc); padding: 6px 0 6px 14px; display: grid; gap: 4px; } .j-card { font-weight: 700; } .library li { padding: 12px 14px; border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-sm); } .library li.is-done { background: var(--tp-surf-2); } .library li.is-done::before { content: "Done · "; font-weight: 700; } .setting { display: grid; gap: 8px; font-weight: 700; max-width: 360px; } @media (max-width: 900px) { .dash { grid-template-columns: minmax(0, 1fr); } .tonight-text { font-size: 30px; } .app-links { display: flex; gap: 14px; font-size: 14px; } } .legal { max-width: 720px; display: grid; gap: 14px; } .legal h1 { font-size: 44px; } .legal h2 { font-size: 22px; margin-top: 12px; } .legal p { color: var(--tp-mute); } /* ------------------------------------------------ extra landing sections */ .pains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 8px; } .pains .slab { padding: 22px; } .pains p { margin: 0; font-weight: 600; } .pains-close { margin: 24px 0 0; font-size: 19px; max-width: 60ch; } .compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; } .compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: var(--tp-bw) solid var(--tp-line); } .compare thead th { font-family: var(--tp-font-display); } .compare td:nth-child(2), .compare th:nth-child(2) { background: var(--tp-surf); font-weight: 600; } .compare-wrap { overflow-x: auto; } .example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } .example .label { display: inline-block; margin-bottom: 12px; } .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .quote blockquote { margin: 0 0 12px; font-size: 18px; } .quote figcaption { color: var(--tp-mute); } .quote figcaption b { color: var(--tp-ink); } .guarantee { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .guarantee .slab { padding: 22px; } .guarantee h3 { margin-bottom: 6px; } @media (max-width: 960px) { .pains, .quotes, .guarantee { grid-template-columns: 1fr 1fr; } .example { grid-template-columns: 1fr; } } @media (max-width: 560px) { .pains, .quotes, .guarantee { grid-template-columns: 1fr; } } .pains .card, .guarantee .card, .regions .card { padding: 22px; } .regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .regions h3 { margin: 0 0 8px; } .week { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .week li { padding: 16px 18px; border-radius: var(--tp-r); background: var(--tp-surf); border: var(--tp-bw) solid var(--tp-line); } .week .mono { display: block; margin-bottom: 4px; } @media (max-width: 960px) { .regions { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .regions { grid-template-columns: 1fr; } } /* ================================================ theme pack v1.2.0 landing (SPEC-CHECKLIST) */ /* The treated figure from the handoff: every image sits in one. */ .tp-figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--tp-img-ar); border-radius: var(--tp-img-r); border: var(--tp-img-frame); box-shadow: var(--tp-img-sh); filter: var(--tp-img-filter); transform: rotate(var(--tp-img-tilt)); } .tp-figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .tp-overlay { position: absolute; inset: 0; background: var(--tp-grad); opacity: var(--tp-img-overlay-op); mix-blend-mode: var(--tp-img-blend); pointer-events: none; } .photo::after { content: none; } /* Hero: headline lines rise one stagger step apart (the reveal recipe); image, not a screenshot. */ .hero:has(.hero-photo) .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .hero-copy .chip { margin-bottom: 18px; } .lines { display: grid; } .lines .line { display: block; overflow: hidden; } .lines .line > span { display: block; } .hero:has(.hero-photo) .cta-row { margin-top: 4px; } .hero-proof { margin-top: 18px; } .hero-photo { aspect-ratio: 4 / 5; width: 100%; max-width: 480px; margin-left: auto; } .hero-photo img { object-position: 50% 30%; } /* Bento: four cells, one image-led, one number-led, two typographic. */ .bento.four { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; } .bento.four .cell-image { grid-row: span 2; aspect-ratio: auto; min-height: 420px; } .bento.four .cell-number { grid-column: span 2; } .big-number { font-family: var(--tp-font-display); font-weight: var(--tp-w-display); font-size: 64px; line-height: 1; margin: 14px 0 6px; } /* Numbers reveal: bars draw from the left. */ .meter i[data-reveal] { transform-origin: left center; } /* Testimonial band: full-bleed image, one plate. Text never sits on bare photography. */ .tband { position: relative; padding: 110px 0; margin-top: 80px; overflow: hidden; } .tband .band-bg, .closing-cta .closing-bg { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; transform: none; } .tband .wrap, .closing-cta .wrap { position: relative; } .band-plate { max-width: 620px; } .band-text { font-family: var(--tp-font-display); font-weight: var(--tp-w-display); font-size: 30px; line-height: 1.2; margin: 8px 0 0; } /* Pricing = the paywall block verbatim. */ .pay-headline { font-size: 48px; margin: 0 0 8px; } .pay-timeline { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; } .pay-timeline li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; } .pay-timeline b { font-family: var(--tp-font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-acc); } .pay-legal { margin: 14px 0 0; } .pay-legal a { color: var(--tp-ink); } /* Closing CTA: image background, plate, the hero CTA word for word. */ .closing-cta { position: relative; padding: 120px 0; margin-top: 80px; overflow: hidden; } .closing-plate { max-width: 640px; } .closing-plate h2 { margin-bottom: 20px; } @media (max-width: 960px) { .hero:has(.hero-photo) .wrap { grid-template-columns: minmax(0, 1fr); } .bento.four { grid-template-columns: minmax(0, 1fr); } .bento.four .cell-image, .bento.four .cell-number { grid-row: auto; grid-column: auto; min-height: 0; aspect-ratio: 4 / 3; } .bento.four .cell-number { aspect-ratio: auto; } } /* Mobile landing (spec): hero image caps at 190px, the headline overlaps it by 34px on a scrim, sticky CTA bar. */ @media (max-width: 560px) { .hero:has(.hero-photo) { padding-top: 0; } .hero:has(.hero-photo) .wrap { display: flex; flex-direction: column; } .hero-photo { order: -1; max-width: none; width: calc(100% + 48px); margin: 0 -24px; height: 190px; aspect-ratio: auto; border-radius: 0; border: 0; } .hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 40%, var(--tp-bg)); } .hero-copy { position: relative; z-index: 2; margin-top: -34px; } .tband, .closing-cta { padding: 64px 0; } .band-text { font-size: 24px; } .pay-headline { font-size: 36px; } } /* Score reveal: the one screen that spends everything. One idle animation: the blurred accent drift. */ .reveal-card { position: relative; overflow: hidden; } .reveal-card > :not(.reveal-drift) { position: relative; } .reveal-drift { position: absolute; inset: -30%; background: var(--tp-grad); filter: blur(60px); opacity: .35; animation: tp-drift calc(var(--tp-dur-slow) * 14) var(--tp-ease) infinite; pointer-events: none; } .result .meter i { transform-origin: left center; } .stars { display: flex; gap: 6px; margin: 10px 0 12px; } .stars button { min-width: 44px; min-height: 44px; font-size: 26px; background: var(--tp-surf); color: var(--tp-mute); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-sm); cursor: pointer; } .stars button.on { color: var(--tp-acc-ink); background: var(--tp-acc); } .review-line { margin: 12px 0 0; } @media (max-width: 560px) { .hero:has(.hero-photo) .wrap { gap: 0; } .hero-copy > .chip { display: none; } .hero-photo img { object-position: 50% 22%; } .hero:has(.hero-photo) h1 { font-size: 38px; } .hero-copy { margin-top: -34px; } } .stars.big button { min-width: 56px; min-height: 56px; font-size: 32px; } .field { width: 100%; min-height: 52px; padding: 12px 16px; margin: 14px 0 4px; font: inherit; color: var(--tp-ink); background: var(--tp-surf); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r); } .stars button.on { background: var(--tp-grad); border-color: transparent; } .card.pad { padding: 28px; } .reveal-card { position: relative; overflow: hidden; } .reveal-card > :not(.reveal-drift) { position: relative; } .reveal-drift { position: absolute; inset: -30%; background: var(--tp-grad); filter: blur(60px); opacity: .25; animation: tp-drift calc(var(--tp-dur-slow) * 14) var(--tp-ease) infinite; pointer-events: none; } .stars { display: flex; gap: 8px; margin: 14px 0 12px; } .stars button { min-width: 52px; min-height: 52px; font-size: 26px; background: var(--tp-surf); color: var(--tp-mute); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-btn); cursor: pointer; transition: background var(--tp-dur) var(--tp-ease), color var(--tp-dur) var(--tp-ease); } .stars button.on { background: var(--tp-acc); color: var(--tp-acc-ink); border-color: transparent; } .field { width: 100%; min-height: 52px; padding: 12px 16px; margin: 10px 0 4px; font: inherit; color: var(--tp-ink); background: var(--tp-surf); border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r); } .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--tp-mute); margin: 12px 0 18px; } .review-line { margin: 12px 0 0; } .pay-head { margin-bottom: 18px; } .lines .sub-line { font-size: .5em; margin-top: 10px; } /* The five questions that stop a card, answered where the card is asked for. */ .pay-faq { margin-top: 18px; gap: 0; } .pay-faq details { border-top: 1px solid var(--tp-line); padding: 0; } .pay-faq summary { padding: 12px 0; font-size: 15px; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; } .pay-faq p { margin: 0 0 12px; font-size: 14px; color: var(--tp-mute); } .pay-faq summary::after { content: "+"; color: var(--tp-acc); float: none; } .pay-faq details[open] summary::after { content: "\2013"; } /* Their dot on your map: the same dot as yours, in the second accent. */ .dot.dot-partner { background: var(--tp-acc-2); } /* The other eleven sites: a crawler landing here can reach the rest. */ .more-from-us { flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tp-line); font-size: 13px; text-transform: none; font-weight: 500; } .more-from-us a:not(.btn) { display: inline-flex; min-height: 0; } /* The guide pages: an answer first, then the written sections, then real cards. */ .answer { margin-top: 20px; border-color: var(--tp-acc); } .long-copy { margin-top: 26px; max-width: 68ch; } .long-copy h2 { margin: 30px 0 8px; font-size: 24px; } .long-copy p { margin: 0 0 12px; } .long-copy ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; } .long-copy li { list-style: disc; } .guide-cards li { list-style: none; padding: 12px 14px; border: 1px solid var(--tp-line); border-radius: var(--tp-r-sm); background: var(--tp-surf-2); } .guide-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .guide-grid .card { display: grid; gap: 6px; text-decoration: none; } .wiki-links { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; } .wiki-links li { list-style: none; }