/* ---- Theme: "safe" (default, Amazon-ish butter+cream) --------------------- Theme is selected server-side via the THEME env var and applied as . Components read these variables, so the bold override block below is all that differs between themes. */ :root { --ink: #1c1a17; --muted: #6b6358; --butter: #f5b942; --butter-deep: #e09e1e; --bg: #fbf8f3; --card: #ffffff; --line: #eadfce; --good: #2f9e44; --mid: #e8920c; --low: #d6336c; /* semantic surfaces (overridden per theme) */ --header-bg: #1c1a17; --header-text: #ffffff; --header-tag: #cbc3b6; --pill-bg: #f3ecdd; --soft: #efe7d8; /* code chips, subtle fills */ --on-accent: #1c1a17; /* text on butter buttons */ --sample-bg: #fbf3df; --cta-grad: linear-gradient(180deg, #fff, #fdf6e8); --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --head-caps: none; /* heading transform (bold theme uppercases) */ --head-spacing: normal; --radius: 12px; } /* ---- Theme: "bold" (Hot Butter brand — black canvas, butter accent) ------- */ [data-theme="bold"] { --ink: #f6f1e6; --muted: #a59b8a; --butter: #ffc01e; --butter-deep: #ffae00; --bg: #100f0d; --card: #1a1714; --line: #2c2822; /* good/mid/low kept saturated (not brightened) — they back white-text badges and tags, so they must stay legible on both light and dark surfaces. */ --header-bg: #000000; --header-text: #ffffff; --header-tag: #ffc01e; --pill-bg: #262019; --soft: #241f18; --on-accent: #100f0d; --sample-bg: #241d12; --cta-grad: linear-gradient(180deg, #1f1a12, #161310); --head-caps: uppercase; --head-spacing: -0.01em; --radius: 10px; } * { box-sizing: border-box; } body { margin: 0; font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); } .wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; } .topbar { background: var(--header-bg); color: var(--header-text); padding: 14px 0; } .topbar .wrap { display: flex; align-items: baseline; gap: 12px; } .logo { font-weight: 800; color: var(--butter); letter-spacing: .3px; text-transform: var(--head-caps); } .tag { font-size: 13px; color: var(--header-tag); text-transform: var(--head-caps); letter-spacing: .4px; } .hero { padding: 56px 0 40px; } .hero h1 { font-size: 34px; line-height: 1.1; margin: 0 0 12px; text-transform: var(--head-caps); letter-spacing: var(--head-spacing); } .sub { color: var(--muted); font-size: 18px; max-width: 60ch; } .asin-form { display: flex; gap: 10px; margin: 24px 0 8px; flex-wrap: wrap; } .asin-form input { flex: 1 1 240px; padding: 14px 16px; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; border: 2px solid var(--line); border-radius: 10px; background: #fff; } .asin-form input { background: var(--card); color: var(--ink); } .asin-form input:focus { outline: none; border-color: var(--butter-deep); } button { padding: 14px 22px; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--on-accent); background: var(--butter); border: 0; border-radius: 10px; text-transform: var(--head-caps); letter-spacing: .2px; } button:hover { background: var(--butter-deep); } button:disabled { opacity: .5; cursor: default; } .hint { color: var(--muted); font-size: 14px; } .hint code { background: var(--soft); padding: 1px 5px; border-radius: 4px; } .form-msg { padding: 12px 14px; border-radius: 8px; margin: 14px 0; } .form-msg.error { background: #fdeaf0; color: var(--low); } .form-msg.ok { background: #e8f6ec; color: var(--good); } .back { display: inline-block; margin: 24px 0 8px; color: var(--butter-deep); text-decoration: none; font-weight: 600; } .report-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 12px 0 24px; } .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--butter-deep); margin: 0 0 4px; } .head-meta h1 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; } .meta { color: var(--muted); font-size: 14px; margin: 2px 0; } .thumb { width: 84px; height: 84px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .scores { display: flex; gap: 10px; margin: 10px 0 0; flex-wrap: wrap; } .scores span { font-size: 13px; color: var(--muted); background: var(--pill-bg); padding: 4px 10px; border-radius: 999px; } .scores strong { color: var(--ink); } .benchmark { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; } .score-badge { width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .score-badge.score-good { background: var(--good); } .score-badge.score-mid { background: var(--mid); } .score-badge.score-low { background: var(--low); } .score-num { font-size: 34px; font-weight: 800; line-height: 1; } .score-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; opacity: .9; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 16px 0; } .card h2 { margin: 0 0 14px; font-size: 18px; text-transform: var(--head-caps); letter-spacing: var(--head-spacing); } .section-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--butter-deep); margin: 0 0 4px; } .findings { list-style: none; margin: 0; padding: 0; } .findings li { padding: 12px 0; border-top: 1px solid var(--line); } .findings li:first-child { border-top: 0; } .sev-tag { font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-right: 8px; color: #fff; } .sev-high .sev-tag { background: var(--low); } .sev-medium .sev-tag { background: var(--mid); } .sev-low .sev-tag { background: #868179; } .issue { font-weight: 700; } .findings p { margin: 6px 0 0; color: var(--muted); font-size: 15px; } .sub-h { font-size: 14px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 14px 0 8px; } .qlist { list-style: none; margin: 0; padding: 0; } .qlist li { padding: 11px 0; border-top: 1px solid var(--line); } .qlist li:first-child { border-top: 0; } .qlist p { margin: 5px 0 0; color: var(--muted); font-size: 14px; } .imp-high .sev-tag { background: var(--low); } .imp-medium .sev-tag { background: var(--mid); } .imp-low .sev-tag { background: #868179; } .constraint-tag { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600; color: #8a6d00; background: #fff3d4; border: 1px solid #f0d894; padding: 1px 8px; border-radius: 999px; } .curation-tag { display: inline-block; font-size: 11px; color: var(--muted); background: #efe7d8; padding: 1px 8px; border-radius: 999px; } .cosmo-list { list-style: none; margin: 0; padding: 0; } .cosmo-list li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px 10px; padding: 9px 0; border-top: 1px solid var(--line); } .cosmo-list li:first-child { border-top: 0; } .cosmo-list p { grid-column: 2 / 4; margin: 2px 0 0; color: var(--muted); font-size: 14px; } .cs-dot { width: 10px; height: 10px; border-radius: 50%; } .cs-name { font-weight: 600; } .cs-status { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); } .cs-present .cs-dot { background: var(--good); } .cs-partial .cs-dot { background: var(--mid); } .cs-missing .cs-dot { background: var(--low); } /* Structure checklist — every area shown, pass or not. */ .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { display: grid; grid-template-columns: 22px minmax(80px, auto) 1fr; align-items: baseline; gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--line); } .checklist li:first-child { border-top: 0; } .checklist p { grid-column: 2 / 4; margin: 4px 0 0; color: var(--muted); font-size: 14px; } .ck-icon { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } .ck-area { font-weight: 700; } .ck-value { color: var(--muted); font-size: 14.5px; } .ck-pass .ck-icon { background: var(--good); } .ck-warn .ck-icon { background: var(--mid); } .ck-fail .ck-icon { background: var(--low); } .ck-pass .ck-value { color: var(--ink); } .answered-block { margin-top: 16px; } .answered-block summary { cursor: pointer; color: var(--good); font-weight: 600; font-size: 14px; } .qlist.ok li .issue { color: var(--muted); font-weight: 400; } .sample blockquote { margin: 0; padding: 14px 16px; background: var(--sample-bg); border-left: 4px solid var(--butter); border-radius: 6px; font-size: 16px; } .rationale { color: var(--muted); font-size: 14px; margin: 10px 0 0; } .ai-tag, .cta .ai-tag { font-size: 11px; background: var(--butter); color: var(--on-accent); font-weight: 700; padding: 2px 7px; border-radius: 6px; vertical-align: middle; } .cta { background: var(--cta-grad); border-color: var(--butter); } .soon-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: var(--butter); color: var(--on-accent); padding: 2px 8px; border-radius: 6px; vertical-align: middle; } .email-form { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .email-form input { flex: 1 1 240px; padding: 12px 14px; font-size: 16px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); } .email-form input:focus { outline: none; border-color: var(--butter-deep); } .caveats { color: var(--muted); font-size: 13px; margin: 20px 0; } .caveats h3 { font-size: 14px; margin: 0 0 6px; } .caveats ul { margin: 0; padding-left: 18px; } .foot { color: var(--muted); font-size: 13px; padding: 30px 20px 50px; } /* Loading overlay (shown while /assess is fetching) */ .loading-overlay[hidden] { display: none; } /* beats the class rule below */ .loading-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(28, 26, 23, 0.55); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .loader { background: var(--card); border-radius: 14px; padding: 32px 36px; text-align: center; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.25); } .spinner { width: 44px; height: 44px; margin: 0 auto 18px; border: 4px solid var(--line); border-top-color: var(--butter-deep); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loader-text { font-weight: 700; margin: 0 0 6px; } .loader-sub { color: var(--muted); font-size: 14px; margin: 0; } @media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }