/* =========================================================== SnapSave website — design tokens Mirrors the extension's own UI: system font stack, #0066cc accent, light/dark themes toggled via [data-theme] on . =========================================================== */ :root{ --bg:#f9f9f9; --bg-elevated:#ffffff; --bg-subtle:#f2f2f3; --border:#eaeaea; --ink:#111111; --ink-dim:#5b5b5d; --ink-faint:#9a9a9a; --accent:#0066cc; --accent-bright:#3399ff; --accent-ink:#ffffff; --success:#22c55e; --radius-sm:6px; --radius-md:10px; --radius-lg:20px; --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); --shadow-pop:0 8px 24px rgba(0,0,0,.18); --glass-bg:rgba(255,255,255,.78); --glass-border:rgba(0,0,0,.08); --glass-menu-bg:rgba(255,255,255,.94); --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --nav-h:64px; --ease:cubic-bezier(.2,.7,.2,1); } html[data-theme="dark"]{ --bg:#0e0e10; --bg-elevated:#18181a; --bg-subtle:#1e1e21; --border:#2a2a2d; --ink:#f2f2f2; --ink-dim:#a4a4a7; --ink-faint:#6f6f72; --accent:#4da3ff; --accent-bright:#66b3ff; --accent-ink:#0a0a0b; --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35); --shadow-pop:0 8px 28px rgba(0,0,0,.55); --glass-bg:rgba(24,24,26,.6); --glass-border:rgba(255,255,255,.16); --glass-menu-bg:rgba(28,28,30,.92); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } body{ margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; transition:background .15s var(--ease),color .15s var(--ease); } img{max-width:100%;display:block} a{color:inherit} ul{margin:0} button{font-family:inherit} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ---------- Typography ---------- */ h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;color:var(--ink)} h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.06} h2{font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.15} h3{font-size:1.05rem;font-weight:600} p{margin:0;line-height:1.65;color:var(--ink-dim)} .eyebrow{ display:inline-flex;align-items:center;gap:6px; font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--accent); } .lede{font-size:1.08rem;color:var(--ink-dim);max-width:52ch} code,.mono{font-family:var(--font-mono)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 20px;border-radius:var(--radius-sm); font-size:.92rem;font-weight:600;text-decoration:none; border:1px solid transparent;cursor:pointer;white-space:nowrap; transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease); } .btn:active{transform:scale(.97);} .btn svg{flex-shrink:0} .btn-primary{background:var(--ink);color:var(--bg);} html[data-theme="dark"] .btn-primary{background:#ffffff;color:#111111} .btn-primary:hover{box-shadow:var(--shadow-pop);transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)} .btn-ghost:hover{background:var(--bg-subtle)} .btn-accent{background:linear-gradient(135deg,var(--accent-bright),var(--accent));color:#fff} .btn-accent:hover{box-shadow:0 8px 20px rgba(0,102,204,.35);transform:translateY(-1px)} .btn-sm{padding:8px 14px;font-size:.82rem} .hover-box { border-color: rgba(255, 255, 255, 0.25); color: #fff; border-style: solid; border-width: 1px; } .hover-box:hover { color: #000; } /* ---------- Navbar ---------- */ .nav{ position:sticky;top:0;z-index:100; height:var(--nav-h); display:flex;align-items:center; background:var(--glass-bg); backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); border-bottom:1px solid var(--glass-border); } .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%} .brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:1.02rem;color:var(--ink)} .brand img{width:26px;height:26px;border-radius:7px} .nav-links{display:flex;align-items:center;gap:28px;list-style:none;padding:0;margin:0} .nav-links a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--ink-dim);transition:color .15s} .nav-links a:hover{color:var(--ink)} .nav-actions{display:flex;align-items:center;gap:10px} .icon-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:var(--radius-sm); background:transparent;border:1px solid var(--border);color:var(--ink-dim);cursor:pointer; transition:background .15s,color .15s,border-color .15s; } .icon-btn:hover{background:var(--bg-subtle);color:var(--ink)} .icon-btn svg{width:17px;height:17px} .icon-sun{display:none} html[data-theme="dark"] .icon-sun{display:block} html[data-theme="dark"] .icon-moon{display:none} .nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:4px} .nav-toggle svg{width:24px;height:24px} /* ---------- Sections ---------- */ section{padding:88px 0} .section-head{max-width:640px;margin:0 auto 48px} .section-head.center{text-align:center;margin-left:auto;margin-right:auto} .section-head h2{margin-top:10px} .section-head p{margin-top:12px} .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.is-visible{opacity:1;transform:none} /* ---------- Hero ---------- */ .hero{padding:64px 0 40px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero-copy .eyebrow{margin-bottom:16px} .hero-copy h1{margin-bottom:18px} .hero-copy .lede{margin-bottom:30px} .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px} .hero-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;color:var(--ink-faint)} .hero-meta span{display:inline-flex;align-items:center;gap:6px} .hero-meta svg{width:14px;height:14px;color:var(--success)} /* ---------- Hero demo card (signature element) ---------- */ .demo-stage{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3.1; background: linear-gradient(135deg,#ffe1cf,#ffd7ec 38%,#cfe4ff 72%,#c9f3e0); box-shadow:var(--shadow-card); border:1px solid var(--border); } html[data-theme="dark"] .demo-stage{ background:linear-gradient(135deg,#3a2a20,#3a2434 38%,#1f2c40 72%,#1c3329); } .demo-caption{ position:absolute;top:16px;left:16px; font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(0,0,0,.28); padding:5px 10px;border-radius:20px; backdrop-filter:blur(6px); } /* Replica of the extension's real hover overlay (content.css) */ .glass-overlay-demo{ position:absolute; display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:10px; background:var(--glass-bg); backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); border:1px solid var(--glass-border); box-shadow:0 4px 20px rgba(0,0,0,.14); bottom:16px;right:16px; opacity:0;transform:translateY(6px) scale(.98); animation:demoAppear 5s var(--ease) infinite; } .glass-dropdown-demo{position:relative} .glass-trigger-demo{ display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:6px; background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.08); font-size:11px;font-weight:600;color:#111; } html[data-theme="dark"] .glass-trigger-demo{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:#fff} .glass-menu-demo{ position:absolute;bottom:calc(100% + 6px);left:0;min-width:96px; background:var(--glass-menu-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18); padding:4px 0;opacity:0;transform:translateY(4px); animation:demoMenu 5s var(--ease) infinite; } .glass-menu-demo div{padding:6px 12px;font-size:11px;font-weight:500;color:var(--ink-dim);white-space:nowrap;display:flex;justify-content:space-between;gap:10px} .glass-menu-demo div.picked{color:var(--accent);font-weight:700} .glass-btn-demo{ display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px; background:#111;color:#fff;flex-shrink:0; } html[data-theme="dark"] .glass-btn-demo{background:#fff;color:#111} .glass-btn-demo svg{width:13px;height:13px} .glass-btn-demo.success{background:var(--success);color:#fff;animation:none} @keyframes demoAppear{ 0%,8%{opacity:0;transform:translateY(6px) scale(.98)} 16%,78%{opacity:1;transform:translateY(0) scale(1)} 92%,100%{opacity:0;transform:translateY(6px) scale(.98)} } @keyframes demoMenu{ 0%,20%{opacity:0;transform:translateY(4px)} 28%,55%{opacity:1;transform:translateY(0)} 63%,100%{opacity:0;transform:translateY(4px)} } @media (prefers-reduced-motion:reduce){ .glass-overlay-demo,.glass-menu-demo{animation:none;opacity:1;transform:none} } /* ---------- Logo strip ---------- */ .logo-strip{padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .logo-strip .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--ink-faint);font-size:.85rem} .logo-strip strong{color:var(--ink-dim);font-weight:600} .badge-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .store-badge{ display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--bg-elevated);font-size:.82rem;font-weight:600;text-decoration:none;color:var(--ink); transition:border-color .15s,transform .15s; } .store-badge:hover{border-color:var(--accent);transform:translateY(-1px)} .store-badge svg{width:16px;height:16px} /* ---------- Feature grid ---------- */ .grid{display:grid;gap:20px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .card{ background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md); padding:26px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s; } .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--border)} .card .icon-wrap{ width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--accent-bright),var(--accent));color:#fff;margin-bottom:16px; } .card .icon-wrap svg{width:19px;height:19px} .card h3{margin-bottom:8px} .card p{font-size:.92rem} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step} .step{position:relative;padding-top:6px} .step-num{ font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--accent); display:block;margin-bottom:10px; } .step h3{margin-bottom:8px} .step p{font-size:.92rem} .steps-rule{display:none} /* ---------- Format pills ---------- */ .pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .pill{ font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.02em; padding:7px 12px;border-radius:20px;background:var(--bg-subtle);border:1px solid var(--border);color:var(--ink-dim); } /* ---------- Showcase / screenshot ---------- */ .showcase{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center} .showcase-frame{ border-radius:var(--radius-lg);border:1px solid var(--border);overflow:hidden;box-shadow:var(--shadow-card); background:var(--bg-elevated); } .showcase-frame img{width:100%} .check-list{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:14px} .check-list li{display:flex;gap:10px;font-size:.94rem;color:var(--ink-dim)} .check-list svg{width:18px;height:18px;color:var(--success);flex-shrink:0;margin-top:2px} /* ---------- CTA banner ---------- */ .cta-banner{ border-radius:24px;padding:64px 48px;text-align:center; background:linear-gradient(135deg,#101012,#242428); color:#fff;position:relative;overflow:hidden; } .cta-banner::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 20% 20%,rgba(51,153,255,.35),transparent 45%),radial-gradient(circle at 85% 75%,rgba(0,102,204,.3),transparent 50%); } .cta-banner>*{position:relative} .cta-banner h2{color:#fff} .cta-banner p{color:rgba(255,255,255,.68);max-width:46ch;margin:14px auto 30px} .cta-banner .hero-ctas{justify-content:center} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--border);padding:56px 0 32px;background:var(--bg-subtle)} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px} .footer-brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;color:var(--ink);margin-bottom:12px} .footer-brand img{width:24px;height:24px;border-radius:6px} .footer p{font-size:.86rem;max-width:32ch} .footer h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:14px} .footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px} .footer-links a{font-size:.88rem;text-decoration:none;color:var(--ink-dim);transition:color .15s} .footer-links a:hover{color:var(--accent)} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; padding-top:24px;border-top:1px solid var(--border);font-size:.8rem;color:var(--ink-faint); } .footer-bottom a{color:var(--ink-faint);text-decoration:none} .footer-bottom a:hover{color:var(--accent)} .footer-social{display:flex;gap:10px} /* ---------- Legal pages ---------- */ .legal{padding:56px 0 96px} .legal-inner{max-width:720px;margin:0 auto} .legal-header{border-bottom:1px solid var(--border);padding-bottom:20px;margin-bottom:32px} .legal-header .eyebrow{margin-bottom:10px} .legal-meta{font-size:.82rem;color:var(--ink-faint);margin-top:8px} .legal-inner h3{margin-top:32px;margin-bottom:10px;font-size:1.05rem} .legal-inner p{margin-bottom:6px} .legal-inner ul{padding-left:20px;margin:12px 0;color:var(--ink-dim)} .legal-inner li{margin-bottom:8px;line-height:1.6} .legal-inner a{color:var(--accent);text-decoration:none;font-weight:500} .legal-inner a:hover{text-decoration:underline} .back-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:var(--accent);text-decoration:none;margin-bottom:20px} .back-link svg{width:15px;height:15px} /* ---------- Responsive ---------- */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:40px} .showcase{grid-template-columns:1fr} .showcase-frame{order:-1} .footer-grid{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} } @media (max-width:720px){ .nav-links,.nav-actions .btn{display:none} .nav-toggle{display:inline-flex} .grid-3,.grid-2{grid-template-columns:1fr} section{padding:64px 0} .cta-banner{padding:48px 24px} .footer-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .footer-grid{grid-template-columns:1fr} .hero-ctas .btn{flex:1} .wrap{padding:0 18px} } /* Mobile nav drawer */ .mobile-nav{ position:fixed;inset:var(--nav-h) 0 0 0;z-index:99; background:var(--bg); transform:translateY(-8px);opacity:0;pointer-events:none; transition:transform .2s var(--ease),opacity .2s var(--ease); display:none; } .mobile-nav.is-open{opacity:1;transform:none;pointer-events:auto} @media (max-width:720px){.mobile-nav{display:block}} .mobile-nav .wrap{padding-top:28px;display:flex;flex-direction:column;gap:4px} .mobile-nav a{ padding:14px 4px;font-size:1.05rem;font-weight:600;text-decoration:none;color:var(--ink); border-bottom:1px solid var(--border); } .mobile-nav .hero-ctas{margin-top:20px}