/* ========================================================================= StorageSweeper marketing site styles. Design language mirrors the SwiftUI app: * capsule buttons, rounded "card" containers * category accent colors with soft glow on hover (box-shadow blur) * ultraThinMaterial -> backdrop-filter blur + semi-transparent surfaces * SF Pro typography via the macOS / iOS system font stack Light/dark theming is driven by prefers-color-scheme, with a manual override stored in localStorage that the inline boot script in applies as `data-theme="dark|light"` on before first paint. ========================================================================= */ /* ---------- Design tokens (light theme, default) ---------- */ :root { /* Base surfaces & text */ --bg: #F6F7FB; --bg-elevated: #FFFFFF; --bg-card: rgba(255, 255, 255, 0.7); --bg-card-solid: #FFFFFF; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.10); --text: #0E1015; --text-secondary: #51555F; --text-tertiary: #8A8F99; /* Accent (matches the app's brand gradient and AccentColor) */ --brand-start: #73DBFF; --brand-end: #2E66F2; --brand-mid: #3A8DFF; --link: #1E5BD8; /* Category accents, matching AppSection.accent in AppState.swift */ --c-overview: #14B5C2; /* cyan */ --c-explorer: #5856D6; /* indigo */ --c-simulators: #AF52DE; /* purple */ --c-xcode: #FF9F0A; /* orange */ --c-junk: #34C759; /* green */ --c-orphans: #E0B100; /* yellow (darker than systemYellow for contrast on light bg) */ --c-duplicates: #19C2A0; /* mint */ --c-uninstaller: #FF3B30; /* red */ /* Status colors (match the app: orange warnings, etc.) */ --warning: #FF8A00; --warning-bg: rgba(255, 138, 0, 0.10); --warning-border: rgba(255, 138, 0, 0.25); --success: #34C759; --danger: #FF3B30; /* Geometry */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Type scale */ --font: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; /* Page rhythm */ --section-pad: 96px; --container: 1320px; --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Dark theme ---------- */ :root[data-theme="dark"] { --bg: #0B0D12; --bg-elevated: #15181F; --bg-card: rgba(28, 31, 39, 0.65); --bg-card-solid: #1A1D24; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5), 0 24px 48px rgba(0, 0, 0, 0.55); --text: #F2F3F7; --text-secondary: #B4B8C2; --text-tertiary: #6E7380; --link: #6FAEFF; /* Category colors are tuned slightly brighter on dark to keep parity with how the SwiftUI accent colors render on a dark window. */ --c-overview: #34D6E5; --c-explorer: #8985FF; --c-simulators: #C977F0; --c-xcode: #FFB23F; --c-junk: #4ED56C; --c-orphans: #FFD23A; --c-duplicates: #38E0BC; --c-uninstaller: #FF5B53; --warning: #FFB23F; --warning-bg: rgba(255, 178, 63, 0.12); --warning-border: rgba(255, 178, 63, 0.30); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: var(--link); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--brand-mid); } a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-start) 70%, #fff); outline-offset: 4px; } img, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 700; } p { margin: 0 0 1em; color: var(--text-secondary); } main:focus { outline: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } section { padding: 0 0 var(--section-pad); } /* Keep anchor jumps (#features, #screens, etc.) clear of the sticky nav. */ section[id] { scroll-margin-top: 116px; } .section-anchor { position: relative; top: -116px; display: block; width: 0; height: 0; overflow: hidden; } .skip-link { position: fixed; top: 16px; left: 16px; z-index: 2000; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-weight: 700; transform: translateY(-140%); transition: transform var(--transition); } .skip-link:focus { color: var(--bg); transform: translateY(0); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Animated background blobs (mimic the app's ambient gradient feel) ---------- */ .bg-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-decor .blob { position: absolute; width: 720px; height: 720px; border-radius: 50%; filter: blur(120px); opacity: 0.35; } .bg-decor .blob.a { top: -240px; left: -160px; background: var(--brand-start); } .bg-decor .blob.b { bottom: -260px; right: -200px; background: var(--brand-end); opacity: 0.28; } :root[data-theme="dark"] .bg-decor .blob { opacity: 0.22; } :root[data-theme="dark"] .bg-decor .blob.b { opacity: 0.18; } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 50; padding: 12px 24px; /* gutter around the floating pill */ background: transparent; } /* The nav itself is transparent; the inner container is a floating pill. */ .nav .container { max-width: calc(var(--container) + 240px); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 18px 15px 26px; /* overrides the base container gutter */ background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06); transition: box-shadow var(--transition), border-color var(--transition); } .nav.scrolled .container { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); border-color: var(--border-strong); } .brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.28rem; color: var(--text); } .brand img { width: 44px; height: 44px; border-radius: 10px; } .nav-links { display: flex; align-items: center; gap: 10px; } .nav-links a { padding: 11px 17px; border-radius: var(--radius-pill); color: var(--text-secondary); font-weight: 500; font-size: 1.08rem; transition: all var(--transition); } .nav-links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } /* The Buy CTA: bigger than the text links, and white text on the gradient. */ .nav-links a.nav-cta { padding: 14px 30px; font-size: 1.1rem; color: #fff; } .nav-links a.nav-cta:hover { color: #fff; background: linear-gradient(135deg, var(--brand-start) 0%, var(--brand-end) 100%); } .theme-toggle { width: 44px; height: 44px; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all var(--transition); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .theme-toggle svg { width: 22px; height: 22px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------- Buttons (capsule, matches PrimaryButton / GhostButton in the app) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill); font-family: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: all var(--transition); line-height: 1; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--brand-start) 0%, var(--brand-end) 100%); } .btn-primary:hover { color: #fff; transform: translateY(-2px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { color: var(--text); background: transparent; border: 1px solid var(--border-strong); } .btn-ghost:hover { color: var(--text); border-color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); } .btn-lg { padding: 16px 30px; font-size: 1.05rem; } .btn-sm { padding: 8px 16px; font-size: 0.9rem; } /* ---------- Hero ---------- */ .hero { padding: 80px 0 64px; text-align: center; position: relative; } .home-hero, .download-hero { padding-top: 16px; } .download-hero { padding-bottom: var(--section-pad); } .download-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr); align-items: center; gap: 44px; max-width: 1120px; margin: 44px auto 0; padding: 40px; text-align: left; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-lg); } .download-details { display: flex; flex-direction: column; align-items: flex-start; } .download-app-icon { width: 76px; height: 76px; margin-bottom: 22px; border-radius: 18px; box-shadow: var(--shadow-soft); } .download-label { color: var(--link); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .download-details h2 { margin: 8px 0 12px; font-size: 2rem; } .download-details > div > p { margin-bottom: 22px; } .download-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .download-meta span { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-card-solid); color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; } .download-button { min-width: 250px; } .download-button svg { width: 20px; height: 20px; } .download-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.65; pointer-events: none; } .download-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--text-tertiary); } .download-preview { position: relative; min-height: 390px; } .download-shot { position: absolute; top: 50%; left: 0; width: 760px; max-width: none; border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-lg); transform: translateY(-50%); } .download-shot-dark { display: none; } :root[data-theme="dark"] .download-shot-light { display: none; } :root[data-theme="dark"] .download-shot-dark { display: block; } .download-install, .download-editions, .download-licenses { padding-bottom: var(--section-pad); } .install-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; max-width: 1050px; margin: 0 auto; padding: 0; list-style: none; text-align: left; } .install-steps li { display: flex; align-items: flex-start; gap: 16px; } .step-number { display: inline-flex; flex: 0 0 38px; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color: #fff; font-weight: 800; } .install-steps h3 { margin-bottom: 6px; } .install-steps p { margin: 0; font-size: 0.95rem; } .edition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); } .edition-column { padding: 34px; } .edition-column + .edition-column { border-left: 1px solid var(--border); } .edition-premium { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-start) 8%, transparent), color-mix(in srgb, var(--brand-end) 10%, transparent)); } .edition-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .edition-name { font-size: 1.35rem; font-weight: 750; color: var(--text); } .edition-price { font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); } .edition-column ul { list-style: none; padding: 18px 0 22px; margin: 0; } .edition-column li { position: relative; padding: 7px 0 7px 28px; color: var(--text-secondary); } .edition-column li::before { content: ""; position: absolute; top: 9px; left: 0; width: 18px; height: 18px; background: var(--success); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .edition-column .btn { width: 100%; } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 24px; } .hero .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); } .hero h1 { max-width: 900px; margin: 0 auto 20px; } .hero h1 .gradient { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero .lead { max-width: 680px; margin: 0 auto 36px; font-size: 1.2rem; color: var(--text-secondary); } .hero-actions { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero-actions + .eyebrow { margin-top: 22px; } .hero .meta { margin-top: 18px; font-size: 0.85rem; color: var(--text-tertiary); } /* Hero promo video */ .hero-video { position: relative; max-width: 1100px; margin: 40px auto 0; padding: 12px; border-radius: 22px; background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .promo-video { width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; display: block; background: var(--bg-elevated); object-fit: cover; } .promo-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; border: 1px solid color-mix(in srgb, #fff 35%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, #000 48%, transparent); color: #fff; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); transition: opacity var(--transition), transform var(--transition), background var(--transition); } .promo-play:hover { background: color-mix(in srgb, #000 58%, transparent); transform: translate(-50%, -50%) scale(1.04); } .promo-play svg { width: 30px; height: 30px; margin-left: 4px; } .hero-video.is-playing .promo-play { opacity: 0; pointer-events: none; } /* ---------- Section headers ---------- */ .section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; } .section-head .pill { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand-end) 12%, transparent); color: var(--link); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 14px; } .section-head p { font-size: 1.1rem; } /* ---------- Feature grid (the category cards, mirroring the sidebar) ---------- */ .features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .feature-card { --accent: var(--brand-end); position: relative; /* Icon sits beside the title+subtitle (row-spanning first column); the screenshot spans the full width below and bottom-aligns via the 1fr row. */ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; min-height: 100%; padding: 20px; border-radius: var(--radius); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .feature-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); /* The glow: a soft shadow tinted with the card's accent. Mirrors the SwiftUI hover treatment on category cards in Overview. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 20px 40px color-mix(in srgb, var(--accent) 22%, transparent); } .feature-card .icon { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); transition: transform var(--transition); } .feature-card:hover .icon { transform: scale(1.06) rotate(-3deg); } .feature-card .icon svg { width: 24px; height: 24px; } .feature-card h3 { grid-column: 2; grid-row: 1; align-self: center; color: var(--text); margin: 0 0 2px; } .feature-card p { grid-column: 2; grid-row: 2; align-self: start; margin: 0; color: var(--text-secondary); font-size: 0.97rem; } .feature-shot { grid-column: 1 / -1; grid-row: 3; align-self: end; margin-top: 16px; border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); box-shadow: var(--shadow-soft); background: var(--bg-elevated); transition: border-color var(--transition); } .feature-card:hover .feature-shot { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } /* Category color helpers (apply to .feature-card) */ .f-overview { --accent: var(--c-overview); } .f-explorer { --accent: var(--c-explorer); } .f-simulators { --accent: var(--c-simulators); } .f-xcode { --accent: var(--c-xcode); } .f-junk { --accent: var(--c-junk); } .f-orphans { --accent: var(--c-orphans); } .f-duplicates { --accent: var(--c-duplicates); } .f-uninstaller { --accent: var(--c-uninstaller); } /* ---------- One-click section ---------- */ .one-click { margin-top: 40px; padding: 56px 48px; border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-start) 18%, transparent), color-mix(in srgb, var(--brand-end) 22%, transparent)), var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid color-mix(in srgb, var(--brand-end) 25%, var(--border)); display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } /* Text column: icon-bubble beside the heading, with the paragraph and list spanning the full width below. Scoped to #one-click so it doesn't affect the final CTA section, which reuses the .one-click class for a centered layout. */ #one-click .one-click > div:not(.visual) { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; } #one-click .one-click > div:not(.visual) > p { grid-column: 1 / -1; margin-top: 16px; } #one-click .one-click > div:not(.visual) > ul { grid-column: 1 / -1; } .one-click .icon-bubble { grid-column: 1; width: 84px; height: 84px; border-radius: 22px; background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 12px 32px color-mix(in srgb, var(--brand-end) 35%, transparent); } .one-click .icon-bubble svg { width: 42px; height: 42px; } .one-click h2 { font-size: 1.8rem; } #one-click .one-click h2 { grid-column: 2; align-self: center; margin: 0; } /* ---------- Final CTA banner ---------- Reuses .one-click, but swapped to the full brand gradient (same one the buttons use) with bigger, bolder type. Buttons sit ON that gradient, so they invert: solid white primary, translucent outlined ghosts. */ .one-click.cta-final { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); border-color: transparent; box-shadow: 0 26px 60px color-mix(in srgb, var(--brand-end) 38%, transparent); padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px); } .one-click.cta-final h2 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; text-wrap: balance; } .one-click.cta-final p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.92); } .one-click.cta-final .btn-primary { background: #fff; color: var(--brand-end); } .one-click.cta-final .btn-primary:hover { color: var(--brand-end); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); } .one-click.cta-final .btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.55); } .one-click.cta-final .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.20); border-color: #fff; } .one-click ul { list-style: none; padding: 0; margin: 14px 0 0; } .one-click li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; color: var(--text-secondary); font-size: 0.97rem; } .one-click li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--success); } .one-click .visual { padding: 12px; cursor: zoom-in; border-radius: 18px; background: var(--bg-card-solid); border: 1px solid var(--border); box-shadow: var(--shadow-soft); } .one-click .visual img { width: 100%; border-radius: 12px; display: block; background: var(--bg); aspect-ratio: 16 / 10; object-fit: contain; } .one-click .shot-placeholder { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 0.88rem; background: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--text) 3%, transparent) 0, color-mix(in srgb, var(--text) 3%, transparent) 10px, transparent 10px, transparent 20px), var(--bg-elevated); border-radius: 12px; } /* ---------- Theme-aware screenshots ---------- */ /* Each shot ships a light and a dark image; exactly one must ever show. This is defensive: it works with no JS (falls back to the OS color scheme) and the manual toggle (:root[data-theme]) overrides it. Without the prefers-color-scheme fallback, a missing data-theme attribute would leave BOTH images visible (the "double screenshots" bug). */ .shot-dark { display: none; } /* default = light */ .shot-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot-light { display: none; } :root:not([data-theme="light"]) .shot-dark { display: block; } } :root[data-theme="light"] .shot-light { display: block; } :root[data-theme="light"] .shot-dark { display: none; } :root[data-theme="dark"] .shot-light { display: none; } :root[data-theme="dark"] .shot-dark { display: block; } /* ---------- Screenshot frames ---------- */ .shot-frame { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--bg-elevated); cursor: zoom-in; } .shot-frame:focus-visible, .one-click .visual:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-start) 70%, #fff); outline-offset: 5px; } .shot-frame img { width: 100%; height: 100%; object-fit: contain; display: block; } @media (max-width: 900px) { .features { grid-template-columns: 1fr; } } /* ---------- Lightbox (click a screenshot to enlarge) ---------- */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 4vh 4vw; background: color-mix(in srgb, #000 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; } .lightbox.open { display: flex; } .lightbox img { max-width: 100%; max-height: 92vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); cursor: default; } .lightbox-close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 25%, transparent); background: color-mix(in srgb, #000 35%, transparent); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .lightbox-close:hover { background: color-mix(in srgb, #fff 18%, transparent); } /* ---------- Back to top ---------- */ .back-to-top { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60; width: 48px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: var(--text); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { border-color: color-mix(in srgb, var(--brand-end) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 18%, transparent), 0 14px 28px color-mix(in srgb, var(--brand-end) 16%, transparent); } .back-to-top svg { width: 20px; height: 20px; } /* ---------- Safety / promise strip ---------- */ .promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 40px; } .promise .item { --accent: var(--brand-end); /* Icon beside the title; description spans the full width below. align-content:start packs the rows to the top so the icon, title, and description line up across every box regardless of description length (without it, the grid stretches the rows to fill taller boxes). */ display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; align-content: start; padding: 24px; border-radius: var(--radius); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .promise .item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 20px 40px color-mix(in srgb, var(--accent) 22%, transparent); } .promise .item .ic { grid-column: 1; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); transition: transform var(--transition); } .promise .item:hover .ic { transform: scale(1.06) rotate(-3deg); } .promise .item.shield { --accent: var(--success); } .promise .item.lock { --accent: var(--c-explorer); } .promise .item.eye { --accent: var(--c-overview); } .promise .item.bolt { --accent: var(--c-xcode); } .promise .item h3 { grid-column: 2; align-self: center; font-size: 1.05rem; margin: 0; } .promise .item p { grid-column: 1 / -1; font-size: 0.93rem; margin: 12px 0 0; } /* ---------- Pricing ---------- */ .pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1120px; margin: 0 auto; } .price-card { position: relative; padding: 36px 32px; border-radius: var(--radius-lg); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); display: flex; flex-direction: column; } .price-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand-end) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 25%, transparent), 0 20px 40px color-mix(in srgb, var(--brand-end) 22%, transparent); } .price-card.featured { border-color: color-mix(in srgb, var(--brand-end) 50%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 30%, transparent), 0 20px 40px color-mix(in srgb, var(--brand-end) 18%, transparent); } .price-card.balanced { border-color: color-mix(in srgb, var(--brand-end) 28%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand-start) 8%, transparent), color-mix(in srgb, var(--brand-end) 10%, transparent)), var(--bg-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 12%, transparent), 0 16px 32px color-mix(in srgb, var(--brand-end) 10%, transparent); } .price-card.balanced:hover { border-color: color-mix(in srgb, var(--brand-end) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 28%, transparent), 0 22px 44px color-mix(in srgb, var(--brand-end) 22%, transparent); } /* The featured card already carries a blue border + glow at rest, so a plain hover glow reads as "just lifting". On hover it gets a brighter border, a stronger outer glow, AND an inner glow so it visibly lights up. The lift itself still comes from .price-card:hover. */ .price-card.featured:hover { border-color: color-mix(in srgb, var(--brand-end) 70%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 45%, transparent), 0 26px 52px color-mix(in srgb, var(--brand-end) 32%, transparent), inset 0 0 44px color-mix(in srgb, var(--brand-end) 14%, transparent); } .price-card .badge { position: absolute; top: -12px; right: 22px; padding: 5px 12px; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .discount-badge { position: absolute; top: -12px; right: 22px; padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--success) 16%, var(--bg-card-solid)); border: 1px solid color-mix(in srgb, var(--success) 32%, var(--border)); color: color-mix(in srgb, var(--success) 82%, var(--text)); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .price-card .tier { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 10px; } .price-card h3 { font-size: 1.45rem; margin-bottom: 8px; } .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .regular-price { font-size: 1.25rem; font-weight: 700; color: var(--text-tertiary); text-decoration: line-through; text-decoration-thickness: 2px; } .price-card .price { margin: 14px 0 4px; font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-feature-settings: "tnum"; } .price-card .price .currency { font-size: 1.5rem; font-weight: 600; vertical-align: top; margin-right: 4px; color: var(--text-secondary); } .price-card .price-note { font-size: 0.88rem; color: var(--text-tertiary); margin-bottom: 22px; } .price-card ul { list-style: none; padding: 0; margin: 0 0 26px; } .price-card li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 0.97rem; color: var(--text-secondary); } .price-card li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--success); } .price-card .btn { width: 100%; margin-top: auto; } .price-card .btn-balanced { border-color: color-mix(in srgb, var(--brand-end) 38%, var(--border)); background: color-mix(in srgb, var(--brand-end) 8%, transparent); color: var(--link); } .price-card .btn-balanced:hover { border-color: color-mix(in srgb, var(--brand-end) 60%, var(--border)); background: color-mix(in srgb, var(--brand-end) 14%, transparent); color: var(--link); } .pricing-footnote { text-align: center; margin-top: 28px; font-size: 0.9rem; color: var(--text-tertiary); } /* ---------- FAQ ---------- */ .faq-grid { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { --accent: var(--brand-end); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .faq-item[open] { border-color: var(--border-strong); } .faq-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 14px 28px color-mix(in srgb, var(--accent) 14%, transparent); } .faq-item summary { cursor: pointer; list-style: none; padding: 20px 22px; font-weight: 600; color: var(--text); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; color: var(--text-tertiary); transition: transform var(--transition); line-height: 1; } .faq-item:hover summary::after { color: var(--accent); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .answer { padding: 0 22px 20px; color: var(--text-secondary); font-size: 0.97rem; } .faq-item .answer p { margin-bottom: 0.6em; } .faq-item .answer p:last-child { margin-bottom: 0; } /* ---------- Footer ---------- */ .footer { padding: 60px 0 30px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elevated) 50%, transparent); } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; } .footer-brand p { color: var(--text-tertiary); font-size: 0.92rem; max-width: 320px; margin-top: 14px; } .footer-col h4 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-bottom: 14px; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: 10px; } .footer-col a { color: var(--text-secondary); font-size: 0.95rem; transition: color var(--transition); } .footer-col a:hover { color: var(--text); } .footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--text-tertiary); font-size: 0.85rem; } /* ---------- Legal / Article pages ---------- */ .article { max-width: 760px; margin: 60px auto; padding: 0 24px; } .article .article-head { margin-bottom: 36px; } .article .meta { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--bg-card); backdrop-filter: blur(12px); border: 1px solid var(--border); font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 16px; } .article h1 { font-size: 2.4rem; } .article h2 { margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--border); font-size: 1.4rem; } .article h2:first-of-type { border-top: none; padding-top: 0; } .article h3 { margin-top: 1.6em; font-size: 1.1rem; } .article p, .article li { color: var(--text-secondary); line-height: 1.7; } .article code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); } .article ul, .article ol { padding-left: 1.4em; } .article strong { color: var(--text); } .article hr { border: none; height: 1px; background: var(--border); margin: 2em 0; } /* ---------- Misc ---------- */ .kbd { display: inline-block; padding: 2px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.85em; border: 1px solid var(--border-strong); background: var(--bg-card-solid); color: var(--text); box-shadow: 0 1px 0 var(--border-strong); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Responsive ---------- */ @media (max-width: 1040px) { .pricing { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } @media (max-width: 880px) { :root { --section-pad: 64px; } .nav-links a { display: none; } .nav-links .nav-cta { display: inline-flex; } .pricing { grid-template-columns: 1fr; } .download-panel { grid-template-columns: 1fr; gap: 32px; } .download-preview { min-height: 360px; } .download-shot { width: 100%; } .install-steps { grid-template-columns: 1fr; max-width: 620px; } .one-click { grid-template-columns: 1fr; padding: 36px 28px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 520px) { body { font-size: 16px; } section[id] { scroll-margin-top: 84px; } .section-anchor { top: -84px; } .nav { padding: 8px; } .nav .container { gap: 8px; padding: 8px 10px 8px 12px; } .brand { gap: 8px; font-size: 0.95rem; } .brand img { width: 32px; height: 32px; border-radius: 8px; } .nav-links { gap: 4px; } .nav-links a.nav-cta { padding: 9px 14px; font-size: 0.9rem; } .theme-toggle { width: 34px; height: 34px; } .theme-toggle svg { width: 17px; height: 17px; } .download-panel { margin-top: 32px; padding: 24px; } .download-details h2 { font-size: 1.65rem; } .download-button { width: 100%; min-width: 0; } .download-preview { min-height: 210px; } .edition-grid { grid-template-columns: 1fr; } .edition-column { padding: 28px 24px; } .edition-column + .edition-column { border-top: 1px solid var(--border); border-left: 0; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .back-to-top { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ---------- Scroll reveal (fade + rise as blocks enter the viewport) ---------- Only active under `.reveal-ready`, which the head boot script adds when JS is on and the user hasn't asked for reduced motion. So with JS off or reduced motion, none of this applies and everything renders normally, unhidden. The `.is-visible` rule wins on specificity (two classes vs one), so no !important is needed. Keep this selector list in sync with REVEAL_SELECTOR in js/main.js. NOTE: this animates the independent `translate` property (not `transform`) so it never collides with the `transform: translateY(-4px)` hover-lift on these same cards - the two compose instead of overriding each other. */ .reveal-ready :where( #one-click .one-click > div, .section-head, .feature-card, .price-card, .promise .item, .pricing-footnote, .faq-item ) { opacity: 0; translate: 0 24px; /* Reveal (opacity/translate) carries the per-item stagger delay; the hover-lift properties (transform/box-shadow/border) transition at the snappy --transition speed with NO delay. This rule overrides these cards' own `transition` (equal specificity, later in the file), so it must list the hover properties too - otherwise the hover lift has no transition and snaps instead of easing up like the promise boxes. */ transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s), translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0s), transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .reveal-ready .is-visible { opacity: 1; translate: none; } /* ---------- Free vs Premium comparison (collapsed by default) ---------- */ .compare-wrap { text-align: center; margin-top: 28px; } .compare-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: var(--text-secondary); font: inherit; font-size: 0.95rem; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-pill); transition: color var(--transition), background var(--transition); } .compare-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } .compare-chevron { width: 16px; height: 16px; transition: transform var(--transition); } .compare-toggle[aria-expanded="true"] .compare-chevron { transform: rotate(180deg); } .compare-panel { margin-top: 20px; text-align: left; } .compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; margin: 0 auto; } .compare-col { padding: 24px; border-radius: var(--radius); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); } .compare-col-pro { border-color: color-mix(in srgb, var(--brand-end) 45%, var(--border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-end) 22%, transparent), 0 20px 40px color-mix(in srgb, var(--brand-end) 14%, transparent); } .compare-col h3 { font-size: 1.15rem; margin-bottom: 14px; } .compare-col-pro h3 { background: linear-gradient(135deg, var(--brand-start), var(--brand-end)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .compare-col ul { list-style: none; padding: 0; margin: 0; } .compare-col li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 0.97rem; color: var(--text-secondary); } .compare-col li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; background: currentColor; color: var(--success); -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .compare-col-pro li::before { color: var(--brand-end); } @media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } } /* Respect users who ask for reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }