diff --git a/website/README.md b/website/README.md deleted file mode 100644 index 3d98088..0000000 --- a/website/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# Noo website - -The product site for Noo, meant to be deployed at `noo.ayushya.dev`. - -Static HTML/CSS/vanilla JS, no build step and no dependencies beyond the -two Google Fonts already used by the app (Schibsted Grotesk, Instrument -Sans). Colors, radii, type scale and motion timing are copied from -`lib/theme/design_tokens.dart` so the site and the app read as the same -product. - -## Files - -- `index.html` — the whole page (hero, features, customize, privacy, CTA). -- `styles.css` — all styling, incl. the design tokens as CSS custom - properties and a dark-mode variant (`prefers-color-scheme` and an - explicit `data-theme` override for a future toggle). -- `script.js` — mobile nav, the hero's exploded-layer parallax - (scroll + pointer), the two interactive Customize demos (accent color, - bottom bar style), and scroll-reveal. -- `favicon.svg`. - -## Local preview - -Any static file server works, e.g.: - -```bash -cd website -python3 -m http.server 8000 -``` - -Then open `http://localhost:8000`. - -## Deploying - -Point any static host (Cloudflare Pages, Netlify, GitHub Pages, or a -plain nginx `root`) at this folder - there's nothing to build. Update the -`https://github.com` placeholder links and the two "Download for..." -buttons in `index.html` once real release links exist. diff --git a/website/favicon.svg b/website/favicon.svg deleted file mode 100644 index 93211a9..0000000 --- a/website/favicon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/website/index.html b/website/index.html deleted file mode 100644 index 81baef7..0000000 --- a/website/index.html +++ /dev/null @@ -1,307 +0,0 @@ - - - - - -Noo — a Nextcloud client that feels like it belongs on your phone - - - - - - - - - - - - - - - - -
-
- - - noo - - - Get Noo - -
- -
- -
- - -
-
-
-

For Nextcloud, unofficial

-

Your cloud.
Looking like yours.

-

- Noo is a fast, private Nextcloud client that browses files and - photos the way a native app should — and lets you rebuild its - whole shell around how you actually use your phone. -

-
- Get Noo - View source -
-
    -
  • No password stored — Login Flow v2
    • -
  • Offline device sync
    • -
  • Open source
    • -
-
- - -
-
- - -
-
-

Features

-

Everything your Nextcloud does. Nothing it doesn't.

-

- Files, photos, sharing and sync — built as a real mobile app, not a - browser tab pinned to your home screen. -

- -
-
- -

Files, browsed properly

-

Grid or list, sorted your way, with the same filters and - controls whether you're picking a file, uploading, or moving - one into place.

-
-
- -

Photos, grouped by month

-

Every image and video across your account in one gallery — - filter to just photos, just videos, or just favorites.

-
-
- -

Offline, for real

-

Pick folders to mirror locally and keep browsing — reading, - opening, previewing — with no connection at all.

-
-
- -

Sharing, without the detour

-

Share with people or a public link, see who has access, and - copy that link — all from one sheet, not three menus.

-
-
- -

Activity & recent

-

What changed, and where — grouped into today, yesterday and - this week, so catching up takes seconds.

-
-
- -

Multiple accounts

-

Switch between personal and work Nextcloud instances with a - swipe — each with its own sync, cache and lock.

-
-
-
-
- - -
-
-

Customize

-

Shape it around your thumb, not the other way round.

-

- Every screen bends to a handful of real settings — try a few - right here. -

- -
- -
-
-
- - -
-
Active tab
-
-
-
-
-

Pick your accent

-

Six built-in colors, or match your wallpaper with dynamic - color on Android.

-
- - - - - - -
-
-
- -
-
-
-
- - - - -
-
-
-

Floating or attached

-

The bottom bar can sit flush with the edge, or float free - with rounded corners — your call.

-
- - -
-
-
- -
-

And the rest

-
    -
  • Reorder tabs, hide the ones you never open
    • -
  • Move Search into the bottom bar
    • -
  • Light, dark, or match the system
    • -
  • Pure black backgrounds in dark mode
    • -
  • Choose what swiping a file left or right does
    • -
  • Reorder the bulk-action bar for multi-select
    • -
-
- -
-
-
- - -
-
-
-

Privacy

-

It's your server. Noo just visits.

-

- Noo never asks for your password. Signing in hands off to your - Nextcloud server's own login page (Login Flow v2), which returns - a revocable app token — not your credentials. Nothing but that - token, and whatever you choose to sync, ever leaves your device. -

-
-
    -
  • No password stored on device
    • -
  • Talks only to your own server
    • -
  • Open source, auditable
    • -
  • No analytics, no trackers
    • -
-
-
- - -
-
-

Bring your Nextcloud with you.

-

Free and open source. Point it at your server and go.

-
- Download for Android - Download for iOS -
-

Or build it from source — it's just Flutter.

-
-
- -
- - - - - - diff --git a/website/script.js b/website/script.js deleted file mode 100644 index 337149e..0000000 --- a/website/script.js +++ /dev/null @@ -1,141 +0,0 @@ -(() => { - "use strict"; - - /* ---------- mobile nav ---------- */ - - const navToggle = document.getElementById("navToggle"); - const mobileNav = document.getElementById("mobileNav"); - if (navToggle && mobileNav) { - navToggle.addEventListener("click", () => { - const open = mobileNav.classList.toggle("is-open"); - navToggle.setAttribute("aria-expanded", String(open)); - navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu"); - }); - mobileNav.querySelectorAll("a").forEach((a) => - a.addEventListener("click", () => { - mobileNav.classList.remove("is-open"); - navToggle.setAttribute("aria-expanded", "false"); - }) - ); - } - - /* ---------- exploded hero parallax ---------- */ - /* Each [data-depth] layer drifts at its own rate on scroll, and tilts - gently toward the pointer - the "exploded" pieces read as separate - depths rather than a flat collage. Skipped entirely under - prefers-reduced-motion. */ - - const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; - const heroVisual = document.getElementById("heroVisual"); - - if (heroVisual && !reduceMotion) { - const layers = Array.from(heroVisual.querySelectorAll("[data-depth]")).map((el) => ({ - el, - depth: parseFloat(el.dataset.depth) || 0.3, - })); - - let scrollOffset = 0; - let pointer = { x: 0, y: 0 }; // -1..1 - let ticking = false; - - const apply = () => { - const rect = heroVisual.getBoundingClientRect(); - const inView = rect.bottom > 0 && rect.top < window.innerHeight; - if (inView) { - for (const layer of layers) { - const scrollShift = scrollOffset * layer.depth * 40; - const px = pointer.x * layer.depth * 14; - const py = pointer.y * layer.depth * 14; - layer.el.style.transform = - `translate3d(${px}px, ${scrollShift + py}px, 0)`; - } - } - ticking = false; - }; - - const requestTick = () => { - if (!ticking) { - ticking = true; - requestAnimationFrame(apply); - } - }; - - const onScroll = () => { - const rect = heroVisual.getBoundingClientRect(); - // -1 (scrolled well past) .. 1 (below viewport) - 0 while centered. - scrollOffset = (window.innerHeight / 2 - (rect.top + rect.height / 2)) / window.innerHeight; - requestTick(); - }; - - const onPointerMove = (e) => { - const rect = heroVisual.getBoundingClientRect(); - pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; - pointer.y = ((e.clientY - rect.top) / rect.height) * 2 - 1; - requestTick(); - }; - - const onPointerLeave = () => { - pointer = { x: 0, y: 0 }; - requestTick(); - }; - - window.addEventListener("scroll", onScroll, { passive: true }); - heroVisual.addEventListener("pointermove", onPointerMove); - heroVisual.addEventListener("pointerleave", onPointerLeave); - onScroll(); - } - - /* ---------- accent color demo ---------- */ - - const accentDemo = document.getElementById("accentDemo"); - if (accentDemo) { - const buttons = accentDemo.querySelectorAll(".swatch-btn"); - buttons.forEach((btn) => { - btn.addEventListener("click", () => { - buttons.forEach((b) => b.classList.remove("is-active")); - btn.classList.add("is-active"); - const color = btn.dataset.accent; - accentDemo.style.setProperty("--demo-accent", color); - }); - }); - } - - /* ---------- bottom bar style demo ---------- */ - - const barDemo = document.getElementById("barDemo"); - const demoBar = document.getElementById("demoBar"); - if (barDemo && demoBar) { - const buttons = barDemo.querySelectorAll(".segmented-btn"); - buttons.forEach((btn) => { - btn.addEventListener("click", () => { - buttons.forEach((b) => b.classList.remove("is-active")); - btn.classList.add("is-active"); - demoBar.classList.toggle("is-attached", btn.dataset.bar === "attached"); - }); - }); - } - - /* ---------- scroll reveal ---------- */ - - const revealTargets = document.querySelectorAll( - ".card, .customize-demo, .customize-list, .privacy-points li" - ); - revealTargets.forEach((el) => el.classList.add("reveal")); - - if ("IntersectionObserver" in window && !reduceMotion) { - const io = new IntersectionObserver( - (entries) => { - for (const entry of entries) { - if (entry.isIntersecting) { - entry.target.classList.add("is-visible"); - io.unobserve(entry.target); - } - } - }, - { threshold: 0.15, rootMargin: "0px 0px -40px 0px" } - ); - revealTargets.forEach((el) => io.observe(el)); - } else { - revealTargets.forEach((el) => el.classList.add("is-visible")); - } -})(); diff --git a/website/styles.css b/website/styles.css deleted file mode 100644 index f6c1bbd..0000000 --- a/website/styles.css +++ /dev/null @@ -1,758 +0,0 @@ -/* Noo marketing site — tokens mirror lib/theme/design_tokens.dart exactly, - so this reads as the same product, not a separate marketing skin. */ - -:root { - --bg: #F3EFE6; - --surface: #FFFFFF; - --surface2: #F6F5F2; - --surface3: #EAE8E2; - --line: #EAE8E2; - --fg1: #0E0D0B; - --fg2: #5A5852; - --fg3: #7C7A72; - --accent: #8D0DE3; - --accent-text: #8D0DE3; - --accent-soft: #ECDFFF; - --danger: #A8202A; - - --demo-accent: #8D0DE3; - - --font-display: 'Schibsted Grotesk', system-ui, sans-serif; - --font-body: 'Instrument Sans', system-ui, sans-serif; - - --ease: cubic-bezier(0.7, 0, 0.15, 1); - --motion-fast: 180ms; - --motion-base: 280ms; - - --radius-pill: 999px; - --radius-card: 20px; - --radius-input: 14px; - --radius-panel: 28px; - - --gutter: clamp(20px, 5vw, 64px); - --content-max: 1120px; - - color-scheme: light; -} - -@media (prefers-color-scheme: dark) { - :root:not([data-theme="light"]) { - --bg: #0E0D0B; - --surface: #25241F; - --surface2: #3D3C38; - --surface3: #5A5852; - --line: #3D3C38; - --fg1: #F3EFE6; - --fg2: #BDBAB1; - --fg3: #9E9B92; - --accent: #8D0DE3; - --accent-text: #CBA5FD; - --accent-soft: #2F0454; - --danger: #F49E9E; - color-scheme: dark; - } -} - -:root[data-theme="dark"] { - --bg: #0E0D0B; - --surface: #25241F; - --surface2: #3D3C38; - --surface3: #5A5852; - --line: #3D3C38; - --fg1: #F3EFE6; - --fg2: #BDBAB1; - --fg3: #9E9B92; - --accent: #8D0DE3; - --accent-text: #CBA5FD; - --accent-soft: #2F0454; - --danger: #F49E9E; - color-scheme: dark; -} - -* { box-sizing: border-box; } - -html { scroll-behavior: smooth; } - -body { - margin: 0; - background: var(--bg); - color: var(--fg1); - font-family: var(--font-body); - font-size: 16px; - line-height: 1.5; - -webkit-font-smoothing: antialiased; -} - -img, svg { display: block; max-width: 100%; } - -a { color: inherit; } - -h1, h2, h3 { - font-family: var(--font-display); - font-weight: 600; - margin: 0; - letter-spacing: -0.02em; -} - -.wrap { - max-width: var(--content-max); - margin: 0 auto; - padding-inline: var(--gutter); -} - -.skip-link { - position: absolute; - left: -9999px; - top: 0; - background: var(--accent); - color: #fff; - padding: 10px 16px; - border-radius: var(--radius-input); - z-index: 100; -} -.skip-link:focus { left: 16px; top: 16px; } - -.eyebrow { - font-family: var(--font-body); - font-size: 13px; - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--accent-text); - margin: 0 0 12px; -} - -/* ---------- buttons ---------- */ - -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - font-family: var(--font-body); - font-weight: 600; - text-decoration: none; - border-radius: var(--radius-pill); - border: 1px solid transparent; - cursor: pointer; - transition: transform var(--motion-fast) var(--ease), opacity var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); - white-space: nowrap; -} -.btn:active { transform: scale(0.98); } - -.btn-primary { background: var(--accent); color: #fff; } -.btn-primary:hover { opacity: 0.92; } - -.btn-outline { background: transparent; color: var(--fg1); border-color: var(--line); } -.btn-outline:hover { background: var(--surface2); } - -.btn-lg { padding: 14px 26px; font-size: 16px; } -.btn-sm { padding: 9px 18px; font-size: 14px; } - -/* ---------- header ---------- */ - -.site-header { - position: sticky; - top: 0; - z-index: 40; - background: var(--bg); - border-bottom: 1px solid var(--line); -} - -.header-row { - display: flex; - align-items: center; - gap: 24px; - height: 72px; -} - -.wordmark { - display: flex; - align-items: center; - gap: 10px; - font-family: var(--font-display); - font-weight: 700; - font-size: 20px; - text-decoration: none; - color: var(--fg1); - margin-right: auto; -} -.wordmark-sm { font-size: 17px; } - -.wordmark-mark { - width: 26px; - height: 26px; - border-radius: 8px; - background: var(--accent); - position: relative; - flex: none; -} -.wordmark-mark::after { - content: ""; - position: absolute; - inset: 7px; - border-radius: 4px; - background: #fff; - opacity: 0.92; -} - -.site-nav { - display: flex; - gap: 28px; -} -.site-nav a { - font-size: 15px; - font-weight: 500; - text-decoration: none; - color: var(--fg2); - transition: color var(--motion-fast) var(--ease); -} -.site-nav a:hover { color: var(--fg1); } - -.nav-toggle { - display: none; - flex-direction: column; - justify-content: center; - gap: 4px; - width: 40px; - height: 40px; - border: none; - background: none; - cursor: pointer; - margin-left: -6px; -} -.nav-toggle span { - display: block; - height: 2px; - border-radius: 2px; - background: var(--fg1); - transition: transform var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease); -} -.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } -.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } -.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } - -.mobile-nav { - display: none; - flex-direction: column; - gap: 4px; - padding: 8px var(--gutter) 20px; - border-top: 1px solid var(--line); -} -.mobile-nav a { - padding: 12px 4px; - text-decoration: none; - color: var(--fg1); - font-weight: 500; - border-bottom: 1px solid var(--line); -} -.mobile-nav a:last-child { border-bottom: none; margin-top: 8px; text-align: center; } -.mobile-nav.is-open { display: flex; } - -@media (max-width: 760px) { - .site-nav, .header-row > .btn { display: none; } - .nav-toggle { display: flex; } -} - -/* ---------- hero ---------- */ - -.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); overflow: clip; } - -.hero-grid { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: clamp(32px, 6vw, 64px); - align-items: center; -} - -.hero-copy h1 { - font-size: clamp(38px, 5.2vw, 60px); - line-height: 1.02; - margin-bottom: 20px; -} -.hero-copy h1 em { - font-style: normal; - color: var(--accent-text); -} - -.hero-sub { - font-size: clamp(16px, 1.6vw, 18px); - color: var(--fg2); - max-width: 46ch; - margin: 0 0 28px; -} - -.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } - -.hero-proof { - list-style: none; - margin: 28px 0 0; - padding: 0; - display: flex; - gap: 20px; - flex-wrap: wrap; - font-size: 13px; - color: var(--fg3); -} -.hero-proof li { display: flex; align-items: center; gap: 7px; } -.hero-proof li::before { - content: ""; - width: 6px; height: 6px; - border-radius: 50%; - background: var(--accent); -} - -/* ---------- hero exploded visual ---------- */ - -.hero-visual { - position: relative; - height: clamp(360px, 46vw, 520px); - display: flex; - align-items: center; - justify-content: center; -} - -.glow { - position: absolute; - inset: -10%; - background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); - pointer-events: none; -} - -.phone { - position: relative; - width: clamp(180px, 19vw, 220px); - aspect-ratio: 9 / 18.5; - background: var(--fg1); - border-radius: 34px; - padding: 10px; - will-change: transform; -} - -.phone-notch { - position: absolute; - top: 10px; left: 50%; - transform: translateX(-50%); - width: 34%; height: 16px; - background: var(--fg1); - border-radius: 0 0 12px 12px; - z-index: 2; -} - -.phone-screen { - position: relative; - height: 100%; - background: var(--bg); - border-radius: 24px; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.mini-topbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 22px 14px 8px; -} -.mini-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg1); } -.mini-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--surface2); } - -.mini-list { flex: 1; padding: 4px 10px; display: flex; flex-direction: column; gap: 6px; } -.mini-row { - display: flex; - align-items: center; - gap: 8px; - background: var(--surface); - border-radius: 10px; - padding: 7px 8px; -} -.mini-row-active { background: var(--accent-soft); } - -.mini-ic { width: 16px; height: 16px; border-radius: 5px; flex: none; } -.ic-folder { background: var(--accent); opacity: 0.85; } -.ic-image { background: #2940A8; opacity: 0.8; } -.ic-file { background: var(--fg2); opacity: 0.6; } -.ic-share { background: #3E7A23; opacity: 0.85; } -.ic-lock { background: var(--fg1); opacity: 0.9; } - -.mini-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } -.mini-lines b, .mini-lines i { - display: block; - height: 5px; - border-radius: 3px; - background: var(--fg2); - opacity: 0.35; - font-style: normal; -} -.mini-lines b { width: 70%; opacity: 0.55; } -.mini-lines i { width: 40%; } - -.mini-bar { - display: flex; - align-items: center; - justify-content: space-around; - padding: 10px 8px; - border-top: 1px solid var(--line); - position: relative; -} -.mini-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); opacity: 0.4; } -.mini-bar-pill { - position: absolute; - left: 10px; - width: 20px; height: 10px; - border-radius: var(--radius-pill); - background: var(--accent-soft); -} - -.chip { - position: absolute; - background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--radius-card); - will-change: transform; -} - -.chip-photo { - top: 6%; right: 2%; - width: 92px; height: 92px; - padding: 8px; - transform: rotate(-6deg); -} -.chip-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; } -.chip-photo-grid span:nth-child(1) { background: #8DCDE2; border-radius: 8px; } -.chip-photo-grid span:nth-child(2) { background: #E5D8BD; border-radius: 8px; } -.chip-photo-grid span:nth-child(3) { background: #DA9AC7; border-radius: 8px; } -.chip-photo-grid span:nth-child(4) { background: #A7D296; border-radius: 8px; } - -.chip-row { - bottom: 20%; right: -2%; - display: flex; align-items: center; gap: 10px; - padding: 12px 16px; - transform: rotate(4deg); - width: 160px; -} - -.chip-swatches { - bottom: 6%; left: 4%; - display: flex; gap: 8px; - padding: 12px; - transform: rotate(-4deg); -} -.chip-swatches .swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--c); } - -.chip-toggle { - top: 16%; left: -4%; - display: flex; align-items: center; gap: 14px; - padding: 12px 14px; - width: 150px; - transform: rotate(3deg); -} -.mini-lines-toggle { flex: 1; } -.mini-toggle { width: 30px; height: 18px; border-radius: var(--radius-pill); background: var(--surface3); position: relative; flex: none; } -.mini-toggle i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--fg1); opacity: 0.3; } -.mini-toggle-on { background: var(--accent); } -.mini-toggle-on i { left: 14px; background: #fff; opacity: 1; } - -.chip-badge { - bottom: -2%; left: 30%; - display: flex; align-items: center; gap: 8px; - padding: 9px 14px; - font-size: 13px; - font-weight: 500; - border-radius: var(--radius-pill); - transform: rotate(-2deg); -} -.chip-badge .mini-ic { width: 14px; height: 14px; } - -@media (max-width: 980px) { - .hero-grid { grid-template-columns: 1fr; text-align: center; } - .hero-copy { order: 2; } - .hero-copy .hero-sub { margin-inline: auto; } - .hero-actions, .hero-proof { justify-content: center; } - .hero-visual { order: 1; } -} - -/* ---------- sections ---------- */ - -.section { padding: clamp(56px, 8vw, 104px) 0; } -.section-alt { background: var(--surface); } - -.section h2 { - font-size: clamp(28px, 3.4vw, 42px); - line-height: 1.08; - max-width: 20ch; -} -.section-sub { - font-size: clamp(15px, 1.4vw, 17px); - color: var(--fg2); - max-width: 56ch; - margin: 16px 0 0; -} - -.grid { display: grid; gap: 20px; margin-top: 44px; } -.grid-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } - -.card { - background: var(--surface); - border-radius: var(--radius-card); - padding: 28px; -} -.section-alt .card { background: var(--bg); } - -.card h3 { - font-size: 19px; - margin: 16px 0 8px; -} -.card p { margin: 0; color: var(--fg2); font-size: 15px; } - -.card-ic, .pt-ic { - display: inline-flex; - align-items: center; - justify-content: center; - width: 44px; height: 44px; - border-radius: var(--radius-input); - background: var(--accent-soft); - position: relative; -} -.card-ic::after, .pt-ic::after { - content: ""; - width: 20px; height: 20px; - background: var(--accent-text); - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; -} - -/* Minimal inline icon set (stroke-style, Lucide-ish) via CSS mask so the - whole page stays dependency-free - no icon font, no SVG sprite fetch. */ -.ic-folder-lg::after { -webkit-mask-image: var(--i-folder); mask-image: var(--i-folder); } -.ic-image-lg::after { -webkit-mask-image: var(--i-image); mask-image: var(--i-image); } -.ic-download-lg::after { -webkit-mask-image: var(--i-download); mask-image: var(--i-download); } -.ic-share-lg::after { -webkit-mask-image: var(--i-share); mask-image: var(--i-share); } -.ic-clock-lg::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); } -.ic-users-lg::after { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); } -.pt-ic.ic-lock::after { -webkit-mask-image: var(--i-lock); mask-image: var(--i-lock); } -.pt-ic.ic-server::after { -webkit-mask-image: var(--i-server); mask-image: var(--i-server); } -.pt-ic.ic-code::after { -webkit-mask-image: var(--i-code); mask-image: var(--i-code); } -.pt-ic.ic-off::after { -webkit-mask-image: var(--i-off); mask-image: var(--i-off); } - -:root { - --i-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E"); - --i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E"); - --i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E"); - --i-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.5' x2='15.4' y2='6.5'/%3E%3Cline x1='8.6' y1='13.5' x2='15.4' y2='17.5'/%3E%3C/svg%3E"); - --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14.5'/%3E%3C/svg%3E"); - --i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); - --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); - --i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='7' rx='1.5'/%3E%3Crect x='2' y='14' width='20' height='7' rx='1.5'/%3E%3Cline x1='6' y1='6.5' x2='6.01' y2='6.5'/%3E%3Cline x1='6' y1='17.5' x2='6.01' y2='17.5'/%3E%3C/svg%3E"); - --i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E"); - --i-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3Cpath d='M16.9 16.9A9 9 0 0 1 4 12a9 9 0 0 1 2.6-6.3'/%3E%3Cpath d='M9.9 4.24A9 9 0 0 1 20 12a9 9 0 0 1-.8 3.7'/%3E%3C/svg%3E"); -} - -@media (max-width: 900px) { .grid-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } -@media (max-width: 600px) { .grid-features { grid-template-columns: 1fr; } } - -/* ---------- customize ---------- */ - -.customize-grid { - margin-top: 44px; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 20px; -} - -.customize-demo { - background: var(--bg); - border-radius: var(--radius-card); - padding: 24px; - display: flex; - flex-direction: column; - gap: 22px; -} - -.customize-demo h3 { font-size: 18px; margin: 0 0 8px; } -.customize-demo p { margin: 0; color: var(--fg2); font-size: 14px; } - -.demo-preview { - background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--radius-input); - padding: 16px; - display: flex; - flex-direction: column; - gap: 10px; -} -.demo-topbar { display: flex; align-items: center; gap: 10px; } -.demo-dot { width: 12px; height: 12px; border-radius: 50%; transition: background var(--motion-base) var(--ease); } -.demo-line { display: block; height: 8px; border-radius: 4px; background: var(--surface3); } -.demo-pill { - align-self: flex-start; - padding: 6px 14px; - border-radius: var(--radius-pill); - font-size: 13px; - font-weight: 600; - transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease); -} -.demo-row { padding: 6px 0; } - -.swatch-row { display: flex; gap: 10px; } -.swatch-btn { - width: 32px; height: 32px; - border-radius: 50%; - border: 2px solid transparent; - background: var(--c); - cursor: pointer; - padding: 0; - transition: transform var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); -} -.swatch-btn:last-child { - background: linear-gradient(135deg, #8DCDE2, #DA9AC7 50%, #E5D8BD); -} -.swatch-btn.is-active { border-color: var(--fg1); transform: scale(1.08); } -.swatch-btn:hover { transform: scale(1.08); } - -.demo-preview-bar { position: relative; height: 128px; padding: 0; overflow: hidden; } -.demo-screen-fill { - position: absolute; inset: 0; - background: repeating-linear-gradient(180deg, var(--surface2) 0 34px, var(--surface) 34px 68px); - opacity: 0.6; -} -.demo-bar { - position: absolute; - left: 12px; right: 12px; bottom: 12px; - height: 44px; - background: var(--surface); - border: 1px solid var(--line); - border-radius: var(--radius-pill); - display: flex; - align-items: center; - justify-content: space-around; - transition: left var(--motion-base) var(--ease), right var(--motion-base) var(--ease), bottom var(--motion-base) var(--ease), border-radius var(--motion-base) var(--ease); -} -.demo-bar.is-attached { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0; } -.demo-bar-item { width: 18px; height: 18px; border-radius: 6px; background: var(--surface3); transition: background var(--motion-fast) var(--ease); } -.demo-bar-item.is-on { background: var(--accent); } - -.segmented { - display: inline-flex; - padding: 3px; - background: var(--surface); - border-radius: var(--radius-pill); - gap: 2px; - align-self: flex-start; -} -.segmented-btn { - border: none; - background: transparent; - padding: 8px 16px; - border-radius: var(--radius-pill); - font-family: var(--font-body); - font-size: 13px; - font-weight: 600; - color: var(--fg2); - cursor: pointer; - transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); -} -.segmented-btn.is-active { background: var(--accent-soft); color: var(--accent-text); } - -.customize-list { - grid-column: 1 / -1; - background: var(--bg); - border-radius: var(--radius-card); - padding: 28px 32px; -} -.customize-list h3 { font-size: 18px; margin: 0 0 16px; } -.feature-list { - margin: 0; - padding: 0; - list-style: none; - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 10px 32px; - color: var(--fg2); - font-size: 15px; -} -.feature-list li { display: flex; align-items: center; gap: 10px; } -.feature-list li::before { - content: ""; - width: 6px; height: 6px; - border-radius: 50%; - background: var(--accent); - flex: none; -} - -@media (max-width: 760px) { - .customize-grid { grid-template-columns: 1fr; } - .feature-list { grid-template-columns: 1fr; } -} - -/* ---------- privacy ---------- */ - -.privacy-grid { - display: grid; - grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); - gap: clamp(32px, 6vw, 64px); - align-items: center; -} - -.privacy-points { - list-style: none; - margin: 0; - padding: 0; - display: grid; - gap: 14px; -} -.privacy-points li { - display: flex; - align-items: center; - gap: 14px; - background: var(--surface); - border-radius: var(--radius-input); - padding: 16px 18px; - font-weight: 500; -} - -@media (max-width: 820px) { - .privacy-grid { grid-template-columns: 1fr; } -} - -/* ---------- cta ---------- */ - -.section-cta { text-align: center; background: var(--surface); } -.cta-inner { display: flex; flex-direction: column; align-items: center; } -.cta-inner .section-sub { margin-bottom: 32px; } -.cta-actions { justify-content: center; } -.cta-fine { margin-top: 20px; font-size: 14px; color: var(--fg3); } -.cta-fine a { color: var(--accent-text); font-weight: 600; text-decoration: none; } - -/* ---------- footer ---------- */ - -.site-footer { border-top: 1px solid var(--line); padding: 32px 0; } -.footer-row { - display: flex; - align-items: center; - gap: 24px; - flex-wrap: wrap; -} -.footer-note { color: var(--fg3); font-size: 13px; margin: 0; flex: 1; min-width: 200px; } -.footer-links { display: flex; gap: 20px; } -.footer-links a { font-size: 14px; text-decoration: none; color: var(--fg2); } -.footer-links a:hover { color: var(--fg1); } - -/* ---------- motion ---------- */ - -@media (prefers-reduced-motion: reduce) { - html { scroll-behavior: auto; } - .phone, .chip, .btn { transition: none !important; } -} - -.reveal { - opacity: 0; - transform: translateY(16px); - transition: opacity 600ms var(--ease), transform 600ms var(--ease); -} -.reveal.is-visible { opacity: 1; transform: none; }