/* batchlook public site. Same tokens as the app (design/archive/light-theme-handoff-2026-09-08/README.md). */ /* The marketing site defaults to light regardless of the OS: a first-time visitor should meet the brand in its primary form, and the photography was graded against a white ground. There is no prefers-color-scheme rule here on purpose — only an explicit choice on turns it dark. */ :root { --bg:#FFFFFF; --surface:#F5F5F5; --card:#FFFFFF; --divider:#E1E1E1; --track:#EBEBEB; --border:#D5D5D5; --text:#2C2C2C; --text2:#505050; --muted:#6D6D6D; --faint:#B3B3B3; --accent:#1473E6; --accent-hover:#0D66D0; --accent-press:#0A58B5; --accent-tint:#EAF2FD; --accent-tag:#D6E6FB; --danger:#D70015; --on-accent:#FFFFFF; --warn-fg:#9A5B00; --warn-bg:#FFF4E0; --band:linear-gradient(135deg, #EAF2FD, #F5F5F5 60%); --r-pill:980px; --r-sm:6px; --r-md:8px; --r-input:12px; --r-lg:14px; --r-card:20px; --r-band:28px; --sh-md:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10); --ease:cubic-bezier(.2,.8,.2,1); } :root[data-theme="dark"] { color-scheme:dark; --bg:#14171D; --surface:#1C1F26; --card:#1C1F26; --divider:#2A2F38; --track:#262B35; --border:#3A4150; --text:#E8EAF0; --text2:#C3C9D6; --muted:#8C93A3; --faint:#6B7383; --accent:#3B8EF0; --accent-hover:#5AA2F5; --accent-press:#2C7BDC; --accent-tint:#17283D; --accent-tag:#1D3350; --danger:#FF8A93; --warn-fg:#E0AC5B; --warn-bg:#33260F; --band:linear-gradient(135deg, #17283D, #1C1F26 60%); --sh-md:0 1px 2px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.50); } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; } a { color:var(--accent); text-decoration:none; } a:hover { color:var(--accent-hover); } h1,h2,h3,h4,h5 { margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.15; } p { margin:0; } button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; } ::selection { background:color-mix(in srgb, var(--accent) 30%, transparent); } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .muted { color:var(--muted); } .hint { font-size:12px; color:var(--muted); } .num { font-variant-numeric:tabular-nums; } .wrap { max-width:1312px; margin:0 auto; padding:0 64px; } .wrap.narrow { max-width:820px; } .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:var(--r-pill); border:2px solid transparent; font-weight:700; font-size:14px; line-height:1; transition:background 120ms, color 120ms, transform 120ms; white-space:nowrap; } .btn:active { transform:scale(.97); } .btn-primary { background:var(--accent); color:var(--on-accent); } .btn-primary:hover { background:var(--accent-hover); color:var(--on-accent); } .btn-secondary { border-color:var(--text); color:var(--text); } .btn-secondary:hover { background:var(--text); color:var(--on-accent); } .h36 { height:36px; } .h44 { height:44px; padding:0 20px; font-size:16px; } .h48 { height:48px; padding:0 24px; font-size:16px; } .tag { display:inline-flex; align-items:center; padding:1px 7px; border-radius:var(--r-sm); font-size:11px; font-weight:600; background:var(--accent-tag); color:var(--accent); } .input { min-height:44px; padding:0 14px; border-radius:var(--r-input); border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; width:100%; } .input:focus { border-color:var(--accent); outline:none; } .input:hover { border-color:color-mix(in srgb, var(--text) 45%, transparent); } .input:focus-visible { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:0; } /* nav */ .nav { height:64px; box-shadow:inset 0 -1px 0 var(--divider); background:var(--bg); position:sticky; top:0; z-index:20; } .navrow { height:64px; display:flex; align-items:center; gap:28px; } .brand { display:flex; align-items:center; margin-right:auto; } /* Lock-up is 4.193:1. Set the height and let the width follow, or the aperture closes up. */ .brand img { height:30px; width:auto; display:block; } @media (max-width:640px) { .brand img { height:26px; } } .brand:hover { color:var(--text); } .links { display:flex; gap:24px; font-size:14px; font-weight:500; } .links a { color:var(--text2); } .links a:hover, .links a.on { color:var(--accent); } .nav .menu { display:none; color:var(--text); } /* hero */ .hero { display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; padding-top:56px; padding-bottom:48px; } .hero .copy { display:flex; flex-direction:column; gap:22px; animation:bl-rise 600ms var(--ease) both; } .hero h1 { font-size:68px; line-height:1.02; } .hero h1 em { font-style:normal; color:var(--accent); } .hero .lead { font-size:18px; color:var(--text2); max-width:440px; text-wrap:pretty; } .hero .cta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .hero .cta span { font-size:14px; color:var(--muted); } .slider { position:relative; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--sh-md); cursor:ew-resize; user-select:none; touch-action:none; animation:bl-fade 800ms 200ms both; --pos:46%; } .slider img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; } .slider img.after { clip-path:inset(0 0 0 var(--pos)); } .slider .line { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--card); transform:translateX(-1px); box-shadow:0 0 12px rgba(0,0,0,.6); } .slider .knob { position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.5); } .slider .cap { position:absolute; bottom:14px; font-size:12px; padding:3px 9px; border-radius:var(--r-sm); background:rgba(0,0,0,.7); color:var(--on-accent); } .slider .cap.l { left:14px; } .slider .cap.r { right:14px; } .slider .drag { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:12px; padding:3px 9px; border-radius:var(--r-sm); background:rgba(0,0,0,.6); color:var(--on-accent); animation:bl-fade 400ms 1200ms both; transition:opacity 300ms; } .slider.moved .drag { opacity:0; } /* sections */ .section { padding-top:56px; padding-bottom:56px; background:linear-gradient(to right, transparent, var(--divider) 48px, var(--divider) calc(100% - 48px), transparent) no-repeat top / 100% 1px; } .section h2 { font-size:32px; margin-bottom:32px; } .section h2.small { font-size:24px; margin-bottom:18px; } .rowhead { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:18px; flex-wrap:wrap; } .rowhead h2 { margin:0; } .rowhead span { font-size:14px; color:var(--muted); } .steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px; } .step { display:flex; flex-direction:column; gap:14px; opacity:0; transform:translateY(18px); transition:opacity 600ms var(--ease), transform 600ms var(--ease); } .step:nth-child(2) { transition-delay:120ms; } .step:nth-child(3) { transition-delay:240ms; } .in .step { opacity:1; transform:none; } .vis { position:relative; aspect-ratio:3/2; border-radius:var(--r-md); overflow:hidden; background:#000; } .vis img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .vis .cap { position:absolute; left:10px; bottom:10px; font-size:12px; padding:3px 9px; border-radius:var(--r-sm); background:rgba(0,0,0,.7); color:var(--on-accent); } .in .vis .edit { animation:bl-loop-edit 6s var(--ease) infinite; } .vis .spin { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); opacity:0; } .in .vis .spin { animation:bl-loop-spin 6s linear infinite; } .vis .spin i { width:30px; height:30px; background:url(/loader-white.svg) center / contain no-repeat; border:0; animation:bl-spin 1.2s linear infinite; } @media (prefers-reduced-motion: reduce) { .vis .spin i { animation:none !important; } } .vis .ring { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .vis .ring b { width:64px; height:64px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 30px rgba(0,0,0,.5); transform:scale(.6); opacity:0; } .in .vis .ring b { animation:bl-loop-ring 6s var(--ease) infinite; } .vis .ring path { stroke-dasharray:24; stroke-dashoffset:24; } .in .vis .ring path { animation:bl-loop-check 6s var(--ease) infinite; } .vis.grid4 { background:var(--surface); display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; } .vis.grid4 img { position:static; border-radius:3px; } .in .vis.grid4 img { animation:bl-loop-tile 6s var(--ease) infinite; } .in .vis.grid4 img:nth-child(2) { animation-delay:.35s; } .in .vis.grid4 img:nth-child(3) { animation-delay:.7s; } .in .vis.grid4 img:nth-child(4) { animation-delay:1.05s; } .step .t { display:flex; gap:12px; align-items:flex-start; } .step .n { width:28px; height:28px; flex:none; border-radius:50%; border:1px solid var(--accent); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; } .step h4 { font-size:20px; margin-bottom:4px; } .step p { color:var(--text2); font-size:14px; } .samples { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } .sample { border-radius:var(--r-card); overflow:hidden; background:var(--surface); transition:transform 240ms var(--ease), box-shadow 240ms; } .sample:hover { transform:translateY(-3px); box-shadow:var(--sh-md); } .sample .pair { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--track); } .sample .ph { position:relative; aspect-ratio:3/2; overflow:hidden; background:#000; } .sample .ph img { width:100%; height:100%; object-fit:cover; display:block; } .sample .ph span { position:absolute; left:8px; bottom:8px; font-size:11px; padding:2px 8px; border-radius:var(--r-sm); background:rgba(0,0,0,.7); color:var(--on-accent); } .sample .cap { padding:10px 12px; font-size:14px; } .two { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .two h2 { margin-bottom:10px; } .two .lead { color:var(--text2); max-width:460px; } .block { border-radius:var(--r-card); background:var(--surface); padding:12px 12px 8px; } table.table { width:100%; border-collapse:collapse; font-size:14px; } .table th { text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid transparent; } .table td { padding:12px; border-bottom:1px solid transparent; } /* keeps the layout; the row paints the rule */ /* Rules are drawn on the row, not the cells, so they can fade out over 48px at each end instead of stopping dead at the table edge. A per-cell border cannot fade across a row. The hover tint is layered on top of the same gradient, so the rule keeps painting underneath it. */ .table thead tr { background:linear-gradient(to right, transparent, var(--divider) 48px, var(--divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr { background:linear-gradient(to right, transparent, color-mix(in srgb, var(--text) 8%, transparent) 48px, color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; transition:background-color 120ms; } .table tbody tr:last-child { background-image:none; } .table tbody tr:hover { background: linear-gradient(color-mix(in srgb, var(--text) 4%, transparent), color-mix(in srgb, var(--text) 4%, transparent)) no-repeat 0 0 / 100% 100%, linear-gradient(to right, transparent, color-mix(in srgb, var(--text) 8%, transparent) 48px, color-mix(in srgb, var(--text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr:last-child:hover { background:linear-gradient(color-mix(in srgb, var(--text) 4%, transparent), color-mix(in srgb, var(--text) 4%, transparent)) no-repeat 0 0 / 100% 100%; } .table td.r, .table th.r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } /* a price or its heading never wraps */ .table td.m { color:var(--muted); } .block .note { padding:10px 6px 6px; font-size:12px; color:var(--muted); } .faq { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 48px; } .faq h5 { font-size:16px; margin-bottom:4px; } .faq p { color:var(--text2); font-size:14px; } .band { margin:0 0 40px; padding:64px; border-radius:var(--r-band); background:var(--band); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; } .band h2 { font-size:40px; margin-bottom:6px; } .band p { color:var(--muted); } .foot { display:flex; justify-content:space-between; padding:24px 64px; font-size:14px; color:var(--muted); flex-wrap:wrap; gap:12px; } .foot nav { display:flex; gap:20px; } .foot a { color:inherit; } .foot a:hover { color:var(--accent); } /* pricing */ .packs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } .pack { padding:22px; border-radius:var(--r-card); background:var(--surface); display:flex; flex-direction:column; gap:4px; } .pack .k { font-weight:700; font-size:20px; } .pack .s { font-size:13px; color:var(--muted); } .pack .p { font-size:32px; font-weight:700; margin:10px 0 2px; } .kpis { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-top:24px; } .kpi { padding:18px 20px; border-radius:var(--r-card); background:var(--surface); } .kpi b { display:block; font-size:24px; } .kpi span { font-size:13px; color:var(--muted); } /* prose pages */ .page { padding-top:56px; padding-bottom:24px; } .page h1 { font-size:44px; margin-bottom:10px; } .page .lead { font-size:18px; color:var(--text2); max-width:640px; } .prose { padding-bottom:56px; } .prose h2 { font-size:22px; margin:36px 0 10px; } .prose h3 { font-size:17px; margin:22px 0 6px; } .prose p, .prose li { color:var(--text2); } .prose p { margin:0 0 12px; } .prose ul, .prose ol { margin:0 0 12px; padding-left:22px; } .prose li { margin-bottom:6px; } .prose .callout { padding:14px 16px; border-radius:var(--r-md); background:var(--accent-tint); color:var(--text); font-size:14px; margin:16px 0; } .prose .draft { padding:12px 16px; border-radius:var(--r-md); background:var(--warn-bg); color:var(--warn-fg); font-size:13px; margin:0 0 24px; } .prose kbd { display:inline-block; min-width:18px; padding:1px 6px; border-radius:4px; background:var(--surface); border:1px solid var(--border); font:12px/1.4 ui-monospace, Menlo, monospace; color:var(--text); } .toc { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; margin:18px 0 8px; } .card { max-width:420px; margin:72px auto; padding:32px; border-radius:var(--r-card); background:var(--surface); display:flex; flex-direction:column; gap:14px; } .card h1 { font-size:24px; } .card label { font-size:12px; color:var(--muted); font-weight:500; display:block; } .card label .input { margin-top:4px; } .err { color:var(--danger); font-size:13px; min-height:1em; } /* motion */ @keyframes bl-spin { to { transform:rotate(360deg); } } @keyframes bl-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } @keyframes bl-fade { from { opacity:0; } to { opacity:1; } } @keyframes bl-loop-edit { 0%, 12% { opacity:0; filter:blur(10px); transform:scale(1.04); } 30%, 80% { opacity:1; filter:blur(0); transform:none; } 92%, 100% { opacity:0; filter:blur(10px); transform:scale(1.04); } } @keyframes bl-loop-spin { 0%, 25% { opacity:1; } 32%, 100% { opacity:0; } } @keyframes bl-loop-check { 0%, 30% { stroke-dashoffset:24; } 45%, 100% { stroke-dashoffset:0; } } @keyframes bl-loop-ring { 0%, 28% { transform:scale(.6); opacity:0; } 42% { transform:scale(1.1); opacity:1; } 50%, 100% { transform:scale(1); opacity:1; } } @keyframes bl-loop-tile { 0%, 20% { opacity:.15; filter:blur(6px) grayscale(1); } 40%, 85% { opacity:1; filter:none; } 95%, 100% { opacity:.15; filter:blur(6px) grayscale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:1ms !important; transition-duration:1ms !important; } } /* responsive */ @media (max-width:1000px) { .wrap, .foot { padding-left:28px; padding-right:28px; } .hero { grid-template-columns:1fr; gap:32px; padding-top:40px; padding-bottom:32px; } .hero h1 { font-size:52px; } .steps, .samples, .packs, .kpis { grid-template-columns:1fr 1fr; } .two { grid-template-columns:1fr; gap:24px; } .band { padding:40px 32px; } .band h2 { font-size:32px; } } @media (max-width:640px) { .wrap, .foot { padding-left:18px; padding-right:18px; } .navrow { gap:14px; } .links { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); box-shadow:inset 0 -1px 0 var(--divider), var(--sh-md); padding:8px 18px 14px; } .links.open { display:flex; } .links a { padding:12px 0; border-bottom:1px solid var(--track); } .links a:last-child { border-bottom:0; } .nav .menu { display:inline-flex; } .nav .btn { display:none; } .hero h1 { font-size:40px; } .hero .lead { font-size:16px; } .section { padding-top:36px; padding-bottom:36px; } .section h2 { font-size:26px; margin-bottom:22px; } .steps, .samples, .packs, .kpis, .faq { grid-template-columns:1fr; } .band { padding:28px 22px; border-radius:20px; } .band h2 { font-size:26px; } .page h1 { font-size:32px; } } /* Appearance toggle, right of the nav. The site opens light whatever the OS says; this is the way out. */ .themetog { width:34px; height:34px; border-radius:var(--r-pill); display:grid; place-items:center; color:var(--muted); flex:none; } .themetog:hover { background:var(--surface); color:var(--text); } .themetog svg { display:block; } /* Vendor marks in the model table. The two are not set at the same pixel size: Gemini fills its viewBox corner to corner, the OpenAI blossom sits inside padding of its own, so at a matched 20px box it reads noticeably smaller. OpenAI is 23px with a -1.5px margin, which cancels the extra box and leaves the two optically equal without shifting the row. The OpenAI mark is monochrome and swaps with the theme; the Gemini gradient holds on both. */ .modelname { display:flex; align-items:center; gap:9px; white-space:nowrap; font-weight:500; } .vendor { display:block; flex:none; } .vendor.openai { margin:-1.5px; } :root[data-theme="dark"] .vendor.openai { content:url(/vendor/openai-white.svg); } .table td.b { font-weight:500; } /* ---- examples: a preset gallery with one comparison per card, and a detail with the only draggable slider ---- */ .ex-head { padding-bottom:8px; } .chips { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 22px; } .chip { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 13px; border-radius:999px; border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; font-size:14px; font-weight:500; cursor:pointer; } .chip .n { font-size:12px; color:var(--muted); } .chip:hover { border-color:var(--text); } .chip.on { background:var(--text); color:var(--bg); border-color:var(--text); } .chip.on .n { color:inherit; opacity:.7; } .ex-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } .ex-card { display:flex; flex-direction:column; gap:10px; border-radius:var(--r-card); overflow:hidden; background:var(--surface); padding-bottom:12px; } .ex-card[hidden] { display:none; } .ex-card .ph { position:relative; display:block; background:#000; overflow:hidden; } .ex-card .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity 200ms; } .ex-card .ph img.after { opacity:0; } .ex-card .ph img.after.on { opacity:1; } .ex-card .ph .state { position:absolute; left:10px; bottom:10px; font-size:12px; padding:3px 9px; border-radius:var(--r-sm); background:rgba(0,0,0,.7); color:var(--on-accent); } .ex-card .row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 14px; } .ex-card .t { display:flex; flex-direction:column; min-width:0; } .ex-card .t a { color:var(--text); font-weight:600; font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ex-card .preset { font-size:13px; color:var(--muted); } .ex-card .more { padding:0 14px; font-size:14px; } .toggle { display:inline-flex; flex:none; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--card); } .toggle .tb { min-height:30px; padding:0 12px; border:0; background:transparent; color:var(--text); font:inherit; font-size:13px; font-weight:500; cursor:pointer; } .toggle .tb.on { background:var(--text); color:var(--bg); } .toggle .tb:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; } .ex-note { margin-top:28px; max-width:720px; } /* detail */ .detail-head .crumbs { font-size:14px; color:var(--muted); margin-bottom:10px; } .detail-head .crumbs span { margin:0 6px; } .ex-detail { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:32px; padding-bottom:64px; align-items:start; } .ex-detail .stage { display:flex; flex-direction:column; gap:12px; } .compare { position:relative; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--sh-md); user-select:none; touch-action:pan-y; cursor:ew-resize; } .compare img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; } .compare img.after { clip-path:inset(0 0 0 var(--pos)); } .compare .line { position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--card); transform:translateX(-1px); box-shadow:0 0 12px rgba(0,0,0,.6); } .compare .knob { position:absolute; top:50%; left:var(--pos); transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.5); cursor:ew-resize; } .compare .knob:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .compare .cap { position:absolute; bottom:14px; font-size:12px; padding:3px 9px; border-radius:var(--r-sm); background:rgba(0,0,0,.7); color:var(--on-accent); } .compare .cap.l { left:14px; } .compare .cap.r { right:14px; } .compare.hold-before img.after { clip-path:inset(0 0 0 100%); } .compare.hold-before .line, .compare.hold-before .knob { left:100%; } .compare.show-before img.after { clip-path:inset(0 0 0 100%); } .compare.show-after img.after { clip-path:inset(0); } .compare.show-before .line, .compare.show-before .knob, .compare.show-after .line, .compare.show-after .knob, .compare.show-before .cap.r, .compare.show-after .cap.l { display:none; } .ex-detail .stage .toggle { display:none; align-self:center; } .ex-detail .side { display:flex; flex-direction:column; gap:16px; } .ex-detail .block { border-radius:var(--r-card); background:var(--surface); padding:18px 20px; display:flex; flex-direction:column; gap:10px; } .ex-detail .block h5 { font-size:15px; } .ex-detail .block p { color:var(--text2); font-size:14px; margin:0; } .ex-detail .block .btn { align-self:flex-start; } .ex-detail dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:14px; } .ex-detail dt { color:var(--muted); } .ex-detail dd { margin:0; color:var(--text); } .strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .angle { position:relative; display:flex; flex-direction:column; gap:4px; padding:0; border:2px solid transparent; border-radius:var(--r-md); background:transparent; cursor:pointer; font:inherit; color:var(--text2); font-size:12px; text-align:left; } .angle img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:calc(var(--r-md) - 2px); display:block; } .angle.on { border-color:var(--accent); color:var(--text); } .angle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } @media (max-width:900px) { .ex-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } .ex-detail { grid-template-columns:1fr; gap:20px; } } @media (max-width:640px) { .ex-grid { grid-template-columns:1fr; } /* Phones: no dragging, a slider fights the scroll. The toggle drives the comparison instead. */ .compare { cursor:default; } .compare .knob, .compare .line { display:none; } .compare img.after { clip-path:inset(0); } .compare:not(.show-before) .cap.l { display:none; } .compare.show-before img.after { clip-path:inset(0 0 0 100%); } .compare.show-before .cap.r { display:none; } .ex-detail .stage .toggle { display:inline-flex; } .ex-detail .stage .hint { display:none; } }