/* * Swatch Fan on gen-z-theme-pack · bubblepop (--tp-h: 336 on ). * Every color, font, radius, shadow and duration is a var(--tp-*): the theme * supplies them. The only literal colors on the page are the swatches * themselves, passed in as --c: they are the product's data, like a photo. * Desktop first, a website: nav, sections, a dashboard grid. Stacks at 900px. */ * { box-sizing: border-box; } html { background: var(--tp-bg); } body { margin: 0; background: var(--tp-canvas); color: var(--tp-ink); font-family: var(--tp-font-body); font-size: 16px; line-height: 1.55; min-height: 100vh; } [hidden] { display: none !important; } a { color: var(--tp-ink); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; background: var(--tp-surf); padding: 10px 16px; border-radius: var(--tp-r-sm); z-index: 50; } :focus-visible { outline: 3px solid var(--tp-acc); outline-offset: 3px; } .wrap { width: min(1200px, 100% - 48px); margin-inline: auto; } /* ---------------------------------------------------------------- type */ .display, .display-sm, .h2, .h3, h1, h2, h3, .brand { 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.02; } .display { font-size: clamp(44px, 6vw, var(--tp-hero)); line-height: 1.14; } .display em { font-style: normal; background: var(--tp-grad); color: var(--tp-acc-ink); border-radius: var(--tp-r-btn); padding: 0 .28em; } .display-sm { font-size: clamp(32px, 4vw, 48px); } .h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 18px; } .h3 { font-size: 26px; margin-bottom: 12px; } .eyebrow { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-ink); margin: 0 0 10px; } .lede { font-size: 19px; color: var(--tp-ink); max-width: 56ch; margin: 18px 0 0; } .fine { font-size: 14px; color: var(--tp-mute); margin: 10px 0 0; } .empty { color: var(--tp-mute); } /* ------------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-btn); background: var(--tp-acc); color: var(--tp-acc-ink); font-family: var(--tp-font-body); font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: var(--tp-sh-sm); cursor: pointer; transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--tp-sh); } .btn:active { transform: scale(var(--tp-press)); } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } .btn-lg { min-height: 58px; padding: 16px 34px; font-size: 18px; } .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; } .btn-ghost { background: var(--tp-surf); color: var(--tp-ink); } .btn-block { width: 100%; } .link { font-weight: 600; } /* ----------------------------------------------------------------- nav */ .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px max(24px, calc((100vw - 1200px) / 2)); background: var(--tp-surf); box-shadow: var(--tp-sh-sm); } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; text-decoration: none; color: var(--tp-ink); } .brand-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--tp-grad); box-shadow: var(--tp-sh-sm); } .nav-links { display: flex; gap: 28px; } .nav-links a { font-weight: 600; text-decoration: none; } .nav-links a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; } body:not([data-screen="landing"]) [data-when="landing"], body:not([data-screen="app"]) [data-when="app"] { display: none !important; } /* --------------------------------------------------------------- cards */ .card { background: var(--tp-surf); border-radius: var(--tp-r); box-shadow: var(--tp-sh); padding: 28px; border: var(--tp-bw) solid var(--tp-line); } /* ------------------------------------------------------------- landing */ .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; padding: 72px 0 48px; } .cta-row { display: flex; gap: 20px; align-items: center; margin-top: 30px; flex-wrap: wrap; } .hero-demo { margin: 0; padding: 18px; animation: tp-float calc(var(--tp-dur) * 24) var(--tp-ease) infinite; } .demo-shot { position: relative; aspect-ratio: var(--tp-img-ar); border-radius: var(--tp-img-r); background: var(--c); box-shadow: var(--tp-img-sh); filter: var(--tp-img-filter); } .demo-tap { position: absolute; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; border: 4px solid var(--tp-surf); box-shadow: var(--tp-sh); } .verdict { display: flex; gap: 14px; align-items: center; margin: 16px 0 0; padding: 14px 16px; border-radius: var(--tp-r-sm); background: var(--tp-surf-2); color: var(--tp-ink); font-size: 16px; } .verdict-chip { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: var(--tp-sh-sm); } .proof { list-style: none; padding: 0; margin: 24px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .proof li { background: var(--tp-surf); border-radius: var(--tp-r-sm); box-shadow: var(--tp-sh-sm); padding: 18px 20px; display: flex; flex-direction: column; } .proof b { font-family: var(--tp-font-display); font-size: 30px; line-height: 1; } .proof span { color: var(--tp-mute); font-size: 15px; } .block { padding: 88px 0; } .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 18px; } .bento-big { grid-row: span 2; background: var(--tp-grad); color: var(--tp-acc-ink); } .bento-big p { color: var(--tp-acc-ink); } .bento h3 { font-size: 26px; margin: 12px 0 8px; } .bento p { margin: 0; } .bento-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tp-surf-2); color: var(--tp-ink); font-weight: 700; } .band { background: var(--tp-surf-2); } .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .demo-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .demo-pick .verdict { grid-column: 1 / -1; } .demo-item { aspect-ratio: 4 / 5; border: 0; border-radius: var(--tp-r); background: var(--c); box-shadow: var(--tp-sh); cursor: pointer; display: flex; align-items: flex-end; padding: 12px; transition: transform var(--tp-dur) var(--tp-ease); font-family: var(--tp-font-body); } .demo-item:hover, .demo-item[aria-pressed="true"] { transform: translateY(-4px) scale(1.02); } .demo-item span { background: var(--tp-surf); color: var(--tp-ink); border-radius: var(--tp-r-btn); padding: 4px 12px; font-weight: 700; font-size: 14px; } .faq details { background: var(--tp-surf); border-radius: var(--tp-r-sm); box-shadow: var(--tp-sh-sm); padding: 18px 22px; margin-bottom: 12px; } .faq summary { cursor: pointer; font-weight: 700; font-size: 18px; } .faq p { margin: 10px 0 0; max-width: 70ch; } .closing { text-align: center; } .closing .h2 { margin-bottom: 26px; } .footer { background: var(--tp-surf); padding: 34px 0; } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .footer nav { display: flex; gap: 22px; } .sticky-cta { display: none; } /* ---------------------------------------------------------- onboarding */ .flow { min-height: calc(100vh - 76px); display: grid; place-items: start center; padding: 48px 24px 96px; } .flow-wrap { width: min(760px, 100%); animation: tp-up var(--tp-dur) var(--tp-ease); } .flow-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; } .flow-kicker { font-weight: 700; white-space: nowrap; } .bar { flex: 1; height: 12px; border-radius: var(--tp-r-btn); background: var(--tp-surf-2); overflow: hidden; } .bar i { display: block; height: 100%; width: 0; border-radius: var(--tp-r-btn); background: var(--tp-grad); transition: width var(--tp-dur) var(--tp-ease); } .flow-q { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 8px; } .flow-hint { color: var(--tp-mute); margin: 0 0 22px; } .options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 18px; border: var(--tp-bw) solid var(--tp-line); border-radius: var(--tp-r-sm); background: var(--tp-surf); color: var(--tp-ink); box-shadow: var(--tp-sh-sm); cursor: pointer; text-align: left; font: 600 17px var(--tp-font-body); transition: transform var(--tp-dur) var(--tp-ease), background var(--tp-dur) var(--tp-ease); } .opt::before { content: ""; flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--tp-surf-2); } .opt[aria-pressed="true"] { background: var(--tp-acc); color: var(--tp-acc-ink); animation: tp-pop var(--tp-dur) var(--tp-ease); } .opt[aria-pressed="true"]::before { background: var(--tp-surf); } .flow-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; } .result .flow-actions { justify-content: flex-start; } .yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } .yesno .btn { min-height: 88px; font-size: 24px; } .echo { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; } .echo li { background: var(--tp-surf); border-radius: var(--tp-r-sm); box-shadow: var(--tp-sh-sm); padding: 14px 18px; font-weight: 600; animation: tp-up var(--tp-dur) var(--tp-ease) both; } .meters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; } .meter { background: var(--tp-surf); border-radius: var(--tp-r); box-shadow: var(--tp-sh); padding: 20px; display: grid; gap: 8px; } .meter span { color: var(--tp-mute); font-weight: 600; } .meter b { font-family: var(--tp-font-display); font-size: 28px; } .hope { display: grid; gap: 16px; } .hope-screen { background: var(--tp-surf); border-radius: var(--tp-r-lg); box-shadow: var(--tp-sh); padding: 36px; animation: tp-up var(--tp-dur) var(--tp-ease); } .hope-screen .display-sm { margin-bottom: 14px; } .hope-art { height: 120px; border-radius: var(--tp-r); background: var(--tp-grad); margin-bottom: 22px; display: flex; gap: 10px; align-items: flex-end; padding: 14px; } .hope-art i { flex: 1; height: 60%; border-radius: var(--tp-r-sm); background: var(--c); box-shadow: var(--tp-sh-sm); } .signin-buttons { display: grid; gap: 12px; margin-top: 28px; max-width: 420px; } /* ------------------------------------------------------------- paywall */ .paywall { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 48px; align-items: start; padding-top: 24px; } .ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; } .ticks li { background: var(--tp-surf); border-radius: var(--tp-r-sm); box-shadow: var(--tp-sh-sm); padding: 14px 18px 14px 50px; position: relative; } .ticks li::before { content: "✓"; position: absolute; left: 16px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--tp-acc); color: var(--tp-acc-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; } .pay-card { position: sticky; top: 96px; text-align: center; } .pay-price { font-family: var(--tp-font-display); font-size: 26px; margin: 0; } .pay-price b { font-size: 64px; display: block; line-height: 1; } .pay-card .btn { margin-top: 18px; } .spinner { display: block; width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--tp-surf-2); border-top-color: var(--tp-acc); animation: tp-spin calc(var(--tp-dur) * 4) linear infinite; margin-bottom: 20px; } /* ----------------------------------------------------------------- app */ .app { padding: 32px 0 80px; } .app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .check { grid-column: 1 / -1; } .check-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .check-head .h2 { margin: 0; } .check-buttons { display: flex; gap: 12px; flex-wrap: wrap; } .stage { position: relative; margin-top: 22px; min-height: 380px; border-radius: var(--tp-img-r); background: var(--tp-surf-2); overflow: hidden; display: grid; place-items: center; } .stage video, .stage canvas { width: 100%; max-height: 520px; object-fit: contain; display: block; cursor: crosshair; } .stage-empty { text-align: center; max-width: 46ch; padding: 32px; color: var(--tp-ink); } .stage-float { display: block; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--tp-grad); animation: tp-float calc(var(--tp-dur) * 16) var(--tp-ease) infinite; } #cam-snap { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); } .tap-ring { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 4px solid var(--tp-surf); box-shadow: var(--tp-sh); pointer-events: none; animation: tp-pop var(--tp-dur) var(--tp-ease); } .verdict.big { font-size: 18px; padding: 18px 20px; animation: tp-pop var(--tp-dur) var(--tp-ease); } .verdict.big .verdict-chip { flex-basis: 56px; height: 56px; } .verdict-yes { background: var(--tp-acc-2); color: var(--tp-acc-ink); } .verdict-close { background: var(--tp-surf-2); } .verdict-skip { background: var(--tp-surf-2); } .check-after { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; } .combo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .combo i { aspect-ratio: 3 / 4; border-radius: var(--tp-r-sm); background: var(--c); box-shadow: var(--tp-sh-sm); display: flex; align-items: flex-end; padding: 8px; font-style: normal; } .swatches { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .swatches li, .combo i b { font-size: 12px; } .swatches li { aspect-ratio: 1; border-radius: var(--tp-r-sm); background: var(--c); box-shadow: var(--tp-sh-sm); display: flex; align-items: flex-end; padding: 6px; } .swatches li b, .combo i b, .closet b { background: var(--tp-surf); color: var(--tp-ink); border-radius: var(--tp-r-btn); padding: 2px 8px; font-weight: 700; line-height: 1.3; } .closet { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; max-height: 360px; overflow: auto; } .closet li { display: flex; gap: 12px; align-items: center; background: var(--tp-surf-2); border-radius: var(--tp-r-sm); padding: 8px; } .closet img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--tp-r-sm); } .closet .verdict-chip { flex-basis: 36px; height: 36px; } .shop { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; } .shop a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--tp-r-sm); background: var(--tp-surf-2); text-decoration: none; font-weight: 600; min-height: 44px; } .shop .verdict-chip { flex-basis: 28px; height: 28px; } .settings { display: grid; gap: 10px; } .row { display: flex; gap: 8px; } .row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* -------------------------------------------------------------- mobile */ @media (max-width: 900px) { .nav-links { display: none; } .hero, .demo-grid, .paywall { grid-template-columns: 1fr; gap: 32px; } .hero { padding: 36px 0 24px; } .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento { grid-template-columns: 1fr; } .bento-big { grid-row: auto; } .block { padding: 56px 0; } .options, .meters { grid-template-columns: 1fr; } .app-grid { grid-template-columns: 1fr; } .pay-card { position: static; } .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px; background: var(--tp-surf); box-shadow: var(--tp-sh); z-index: 30; } body[data-screen="landing"] .footer { padding-bottom: 96px; } .flow { padding: 28px 16px 120px; } .flow-actions { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 16px; background: var(--tp-surf); box-shadow: var(--tp-sh); z-index: 30; } .result .flow-actions { justify-content: stretch; } .result .flow-actions .btn { flex: 1; } } /* Palette header: the heading takes the row, the actions sit under it. */ #palette .row-between { flex-direction: column; } /* A swatch as light as the card still shows its edge. */ .swatches li, .combo i { box-shadow: var(--tp-sh-sm), inset 0 0 0 var(--tp-bw) var(--tp-line); } /* Paywall trust row and real testimonials (Zach). */ .trust-row { font-family: var(--tp-font-mono); font-size: 13px; margin: 14px 0 0; color: var(--tp-ink); } .pay-quotes { display: grid; gap: 12px; margin-top: 16px; } .pay-quotes figure { margin: 0; } .pay-quotes blockquote { margin: 0 0 4px; } .pay-quotes figcaption { color: var(--tp-mute); font-size: 13px; } /* Consistency promise, and the smaller lipstick and hair swatch lists. */ .consistency { font-family: var(--tp-font-mono); font-size: 14px; margin: 12px 0 0; } .swatches-sm { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } .h4 { font-family: var(--tp-font-display); font-weight: var(--tp-w-display); font-size: 18px; margin: 20px 0 10px; } /* Landing sections: problem, features, seasons, comparison, no-catch. */ .grid3, .grid4 { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 18px; } .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid3 h3, .grid4 h3 { margin: 0 0 8px; } .grid3 p, .grid4 p { margin: 0; color: var(--tp-mute); } .seasons-grid a { color: inherit; } .compare { padding: 0; overflow: hidden; } .compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 24px; border-top: var(--tp-bw) solid var(--tp-surf-2); } .compare-row span:first-child { color: var(--tp-mute); } .compare-head { font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; background: var(--tp-surf-2); border-top: 0; } .compare-head span:first-child { color: var(--tp-ink); } @media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Rate step (owner): stars in the theme. */ .stars { display: flex; justify-content: flex-start; gap: 10px; margin: 18px 0; } .star { min-width: 56px; min-height: 56px; font-size: 32px; line-height: 1; border-radius: var(--tp-r-btn); border: var(--tp-bw) solid var(--tp-line); background: var(--tp-surf); color: var(--tp-mute); box-shadow: var(--tp-sh-sm); cursor: pointer; transition: transform var(--tp-dur) var(--tp-ease), background var(--tp-dur) var(--tp-ease); } .star:active { transform: scale(var(--tp-press)); } .star.is-on { background: var(--tp-acc); color: var(--tp-acc-ink); }