/* ============================================================ JBSoftware — product.css App product pages (Bucketlist, PDF Tools, Choosy). Accent comes from the .app-* class on . Loaded after base.css. ============================================================ */ /* ---------- app hero ---------- */ .app-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); } .app-hero .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 340px at 50% -6%, color-mix(in oklab, var(--acc) 18%, transparent), transparent 70%), radial-gradient(360px 260px at 16% 18%, color-mix(in oklab, var(--acc) 9%, transparent), transparent 72%); filter: saturate(1.1); } .app-hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 66px 28px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; } .app-mark { width: 88px; height: 88px; border-radius: 22px; object-fit: cover; border: 1px solid var(--hairline-2); box-shadow: 0 14px 34px -16px color-mix(in oklab, var(--acc) 60%, transparent), 0 4px 12px -8px rgba(20,23,30,.2); } .app-hero-inner .status { margin-bottom: 22px; } .app-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; margin: 22px 0 0; } .app-hero .tagline { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--ink-soft); max-width: 520px; margin: 14px auto 0; text-wrap: pretty; } .app-hero .cta { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .play-badge { transition: transform .2s ease, filter .2s ease; } .play-badge img { height: 56px; display: block; } .play-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 16px rgba(20,23,30,.18)); } .cta-note { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); letter-spacing: 0.03em; white-space: nowrap; } /* ---------- content sections ---------- */ .app-main { padding: 52px 0 20px; } .app-section { margin-bottom: 46px; } .app-section .lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 760px; margin: 0 0 30px; text-wrap: pretty; line-height: 1.6; } /* feature grid */ .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .feature { display: flex; gap: 15px; align-items: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 18px 20px; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .feature:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--acc) 30%, var(--hairline)); box-shadow: 0 12px 26px -18px color-mix(in oklab, var(--acc) 60%, transparent); } .feature .ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: var(--acc-fill); display: grid; place-items: center; font-size: 21px; } .feature p { margin: 0; font-size: 0.96rem; color: var(--ink); line-height: 1.5; align-self: center; } .feature p strong { font-weight: 600; } /* simple "why" list */ .why-list { display: grid; gap: 10px; max-width: 760px; } .why-item { display: flex; gap: 13px; align-items: baseline; font-size: 1.02rem; color: var(--ink); } .why-item .idx { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--acc); flex-shrink: 0; padding-top: 2px; } /* closing / get-started band */ .closing { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 40px 36px; text-align: center; margin-top: 8px; } .closing::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 200px at 50% 0%, color-mix(in oklab, var(--acc) 10%, transparent), transparent 70%); } .closing h3 { position: relative; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .closing p { position: relative; color: var(--ink-soft); max-width: 520px; margin: 12px auto 0; text-wrap: pretty; } .closing .cta { position: relative; margin-top: 24px; display: flex; justify-content: center; } /* ---------- responsive ---------- */ @media (max-width: 760px) { .features { grid-template-columns: 1fr; } .app-hero-inner { padding: 52px 24px 46px; } }