diff --git a/assets/focustrack-icon.png b/assets/focustrack-icon.png new file mode 100644 index 0000000..ce632e4 Binary files /dev/null and b/assets/focustrack-icon.png differ diff --git a/website/WEBSITE_README.md b/website/WEBSITE_README.md new file mode 100644 index 0000000..b1aba7d --- /dev/null +++ b/website/WEBSITE_README.md @@ -0,0 +1,28 @@ +# FocusTrack Website + +Static promotional website for the FocusTrack public repository. + +## Structure + +- `index.html` — website markup +- `style.css` — responsive styling +- `script.js` — navigation, scroll effects, and reveal animations +- `screenshots/` — application screenshots + +## Screenshots + +Rename/copy the FocusTrack screenshots into `screenshots/` using these filenames: + +- `home.png` +- `dashboard.png` +- `app-details.png` +- `app-open-count.png` +- `dashboard-weekly.png` +- `dashboard-category.png` +- `app-limits.png` +- `todo-list.png` +- `settings.png` + +## Deploy + +The site is plain HTML/CSS/JavaScript, so it can be deployed directly with GitHub Pages, Netlify, Vercel, or any static web host. diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..fb69f4c --- /dev/null +++ b/website/index.html @@ -0,0 +1,990 @@ + + + + + + + + + + + + + FocusTrack — Productivity & Time Tracking + + + + + + + + + + + + + + + +
+ +
+ + + + + + + FocusTrack + + + + + + + + + + +
+ +
+ + + +
+ + + +
+ +
+ +
+ +
+ + Windows Productivity App +
+ + +

+ Understand your time. + Improve your focus. +

+ + +

+ FocusTrack helps you manage tasks, track application usage, + set limits, and understand how you spend your time on Windows. +

+ + +
+ + + Get FocusTrack + ↗ + + + + + Explore the app + ↓ + + +
+ + + +
+ +
+ + +
+ +
+ Windows + Desktop application +
+ +
+ +
+ Productivity + Time tracking & analytics +
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ + + + + FocusTrack + + +
+ + + + +
+ + +
+ + FocusTrack Home Page + +
+ +
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ FEATURES +
+ +

+ Everything you need + to stay productive. +

+ +

+ FocusTrack brings time tracking, task management, + application insights, and productivity analytics + together in one Windows application. +

+ +
+ + +
+ + +
+ +
+ 01 +
+ +
+ ◷ +
+ +

+ Application Usage Tracking +

+ +

+ Track how much time you spend using applications + and understand where your time goes throughout + the day. +

+ +
+ + + +
+ +
+ 02 +
+ +
+ ✓ +
+ +

+ Tasks & Subtasks +

+ +

+ Organize your work with tasks, subtasks, + priorities, projects, and completion tracking. +

+ +
+ + + +
+ +
+ 03 +
+ +
+ ◉ +
+ +

+ Reminders & Notifications +

+ +

+ Set reminders for important tasks and receive + notifications so deadlines and planned activities + don't get overlooked. +

+ +
+ + + +
+ +
+ 04 +
+ +
+ ↗ +
+ +

+ Productivity Analytics +

+ +

+ Explore usage trends and productivity statistics + through dashboards and visual reports. +

+ +
+ + + +
+ +
+ 05 +
+ +
+ ◫ +
+ +

+ Usage History +

+ +

+ Review historical application activity and + analyze your usage over different time periods. +

+ +
+ + + +
+ +
+ 06 +
+ +
+ ◐ +
+ +

+ Dark & Light Themes +

+ +

+ Choose the appearance that works best for you + with support for both dark and light themes. +

+ +
+ + +
+ +
+ +
+ + + + + +
+ +
+ +
+
+ THE APP +

See FocusTrack in action.

+

+ Explore the interface designed to help you understand your time, + manage tasks, and stay focused. +

+
+ +
+ +
+
+ FocusTrack Home Page +
+ +
+

Home

+

Your productivity overview at a glance.

+
+
+ +
+
+ FocusTrack Dashboard +
+
+

Dashboard

+

Analyze application usage and productivity trends.

+
+
+ +
+
+ FocusTrack Application Details +
+
+

Application Details

+

Review detailed information about application usage.

+
+
+ +
+
+ FocusTrack Application Open Count +
+
+

Application Open Count

+

Understand how frequently applications are opened.

+
+
+ +
+
+ FocusTrack Weekly Usage +
+
+

Weekly Usage

+

Compare your usage patterns across the week.

+
+
+ +
+
+ FocusTrack Usage Analytics +
+
+

Usage Analytics

+

Explore your productivity data from different perspectives.

+
+
+ +
+
+ FocusTrack App Limits +
+
+

App Limits

+

Set limits for applications and stay focused.

+
+
+ +
+
+ FocusTrack To-Do List +
+
+

To-Do List

+

Organize tasks, subtasks, priorities, and reminders.

+
+
+ +
+
+ FocusTrack Settings +
+
+

Settings

+

Customize FocusTrack to match your preferences.

+
+
+ +
+
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ TECHNOLOGY +
+ +

+ Built for the + Windows desktop. +

+ +

+ FocusTrack is designed as a native Windows desktop + productivity application, combining a modern interface + with local usage tracking and productivity analytics. +

+ + +
+ + + C# + + + + .NET + + + + WPF + + + + SQLite + + + + Windows + + +
+ +
+ + + +
+ +
+ + + FocusTrack + + + + ● + + +
+ + +
+ + + Platform + + + + Windows + + +
+ + +
+ + + Application + + + + Desktop + + +
+ + +
+ + + Framework + + + + .NET / WPF + + +
+ + +
+ + + Database + + + + SQLite + + +
+ + +
+ + + Distribution + + + + Microsoft Store + + +
+ +
+ +
+ +
+ + + + + +
+ +
+ +
+ +
+ +
+ GET STARTED +
+ +

+ Take control of + your time. +

+ +

+ Start tracking your activity, organizing your tasks, + and understanding your productivity with FocusTrack. +

+ + + Get FocusTrack + ↗ + + +
+ +
+ +
+ +
+ + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/script.js b/website/script.js new file mode 100644 index 0000000..4add2f4 --- /dev/null +++ b/website/script.js @@ -0,0 +1,236 @@ +const header = document.querySelector('.site-header'); +const backTop = document.querySelector('.back-top'); +const navToggle = document.querySelector('.nav-toggle'); +const navLinks = document.querySelector('.nav-links'); + + +/* ========================================================= + HEADER / SCROLL +========================================================= */ + +function updateScrollUI() { + const scrolled = window.scrollY > 20; + + if (header) { + header.classList.toggle('scrolled', scrolled); + } + + if (backTop) { + backTop.classList.toggle('visible', window.scrollY > 500); + } +} + +window.addEventListener('scroll', updateScrollUI, { + passive: true +}); + +updateScrollUI(); + + +/* ========================================================= + BACK TO TOP +========================================================= */ + +if (backTop) { + backTop.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); +} + + +/* ========================================================= + MOBILE NAVIGATION +========================================================= */ + +if (navToggle && navLinks) { + + navToggle.addEventListener('click', () => { + + const open = navLinks.classList.toggle('open'); + + navToggle.setAttribute( + 'aria-expanded', + String(open) + ); + + }); + + + navLinks.querySelectorAll('a').forEach(link => { + + link.addEventListener('click', () => { + + navLinks.classList.remove('open'); + + navToggle.setAttribute( + 'aria-expanded', + 'false' + ); + + }); + + }); + +} + + +/* ========================================================= + REVEAL ANIMATION +========================================================= */ + +const revealItems = document.querySelectorAll('.reveal'); + +const revealObserver = new IntersectionObserver( + (entries) => { + + entries.forEach((entry) => { + + if (entry.isIntersecting) { + + entry.target.classList.add('visible'); + + revealObserver.unobserve(entry.target); + + } + + }); + + }, + { + threshold: 0.12 + } +); + + +revealItems.forEach((item, index) => { + + item.style.transitionDelay = + `${Math.min(index * 35, 180)}ms`; + + revealObserver.observe(item); + +}); + + +/* ========================================================= + IMAGE LIGHTBOX +========================================================= */ + +const lightbox = + document.getElementById('imageLightbox'); + +const lightboxImage = + document.getElementById('lightboxImage'); + + +/* Open */ + +window.openLightbox = function (image) { + + if (!lightbox || !lightboxImage) { + + console.error( + 'Lightbox elements not found.' + ); + + return; + } + + + lightboxImage.src = image.src; + + lightboxImage.alt = + image.alt || 'FocusTrack screenshot'; + + + lightbox.classList.add('active'); + + lightbox.setAttribute( + 'aria-hidden', + 'false' + ); + + + document.body.style.overflow = 'hidden'; + +}; + + +/* Close */ + +window.closeLightbox = function () { + + if (!lightbox || !lightboxImage) { + return; + } + + + lightbox.classList.remove('active'); + + lightbox.setAttribute( + 'aria-hidden', + 'true' + ); + + + document.body.style.overflow = ''; + + + setTimeout(() => { + + if (!lightbox.classList.contains('active')) { + + lightboxImage.src = ''; + + } + + }, 250); + +}; + + +/* ========================================================= + CLOSE WHEN CLICKING BACKGROUND +========================================================= */ + +if (lightbox) { + + lightbox.addEventListener( + 'click', + (event) => { + + if (event.target === lightbox) { + + closeLightbox(); + + } + + } + ); + +} + + +/* ========================================================= + CLOSE WITH ESCAPE +========================================================= */ + +document.addEventListener( + 'keydown', + (event) => { + + if ( + event.key === 'Escape' && + lightbox && + lightbox.classList.contains('active') + ) { + + closeLightbox(); + + } + + } +); \ No newline at end of file diff --git a/website/style.css b/website/style.css new file mode 100644 index 0000000..b62fd68 --- /dev/null +++ b/website/style.css @@ -0,0 +1,2490 @@ +/* ========================================================= + FOCUS TRACK + Professional Website Styles +========================================================= */ + + +/* ========================================================= + RESET +========================================================= */ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + +html { + scroll-behavior: smooth; +} + + +body { + font-family: "Inter", sans-serif; + background: #0d0d0f; + color: #ffffff; + line-height: 1.6; + overflow-x: hidden; +} + + +img { + max-width: 100%; +} + + +a { + color: inherit; + text-decoration: none; +} + + +button, +a { + -webkit-tap-highlight-color: transparent; +} + + +/* ========================================================= + VARIABLES +========================================================= */ + +:root { + + --background: #0d0d0f; + + --background-soft: #111113; + + --surface: #151517; + + --surface-light: #1b1b1e; + + --surface-hover: #202023; + + --border: rgba(255, 255, 255, 0.09); + + --border-light: rgba(255, 255, 255, 0.14); + + --text-primary: #ffffff; + + --text-secondary: #b4b4ba; + + --text-muted: #77777f; + + --accent: #1e90ff; + + --accent-light: #3ba0ff; + + --accent-dark: #0d7ae8; + + --max-width: 1180px; + +} + + +/* ========================================================= + GLOBAL +========================================================= */ + +body::before { + + content: ""; + + position: fixed; + + inset: 0; + + pointer-events: none; + + background: + radial-gradient(circle at 15% 10%, + rgba(30, 144, 255, 0.08), + transparent 30%), + radial-gradient(circle at 85% 20%, + rgba(30, 144, 255, 0.045), + transparent 28%); + + z-index: -1; + +} + + +.container { + + width: min(calc(100% - 48px), + var(--max-width)); + + margin: 0 auto; + +} + + +.section { + + padding: 120px 0; + +} + + +.section-heading { + + max-width: 720px; + + margin-bottom: 60px; + +} + + +.section-label { + + display: inline-flex; + + align-items: center; + + gap: 8px; + + margin-bottom: 18px; + + color: var(--accent-light); + + font-size: 12px; + + font-weight: 700; + + letter-spacing: 0.16em; + +} + + +.section-heading h2 { + + font-size: clamp(36px, + 5vw, + 58px); + + line-height: 1.05; + + letter-spacing: -0.045em; + + margin-bottom: 22px; + +} + + +.section-heading p { + + color: var(--text-secondary); + + font-size: 17px; + + line-height: 1.75; + +} + + +/* ========================================================= + HEADER +========================================================= */ + +.site-header { + + position: sticky; + + top: 0; + + z-index: 1000; + + background: rgba(13, + 13, + 15, + 0.78); + + border-bottom: 1px solid var(--border); + + backdrop-filter: blur(20px); + + -webkit-backdrop-filter: blur(20px); + +} + + +.nav-container { + + min-height: 76px; + + display: flex; + + align-items: center; + + justify-content: space-between; + +} + + +.brand { + + display: inline-flex; + + align-items: center; + + gap: 11px; + + font-weight: 700; + + font-size: 17px; + +} + + +.brand-logo { + + width: 36px; + + height: 36px; + + object-fit: cover; + + border-radius: 9px; + + box-shadow: + 0 4px 16px rgba(0, + 0, + 0, + 0.35); + +} + + +.brand-name { + + letter-spacing: -0.02em; + +} + + +.main-nav { + + display: flex; + + align-items: center; + + gap: 30px; + +} + + +.main-nav>a { + + color: #aaaab0; + + font-size: 14px; + + font-weight: 500; + + transition: + color 0.2s ease, + transform 0.2s ease; + +} + + +.main-nav>a:hover { + + color: #ffffff; + +} + + +.main-nav .nav-download { + + color: #111111; + + background: #ffffff; + + padding: 12px 19px; + + border-radius: 10px; + + font-weight: 700; + + margin-left: 8px; + +} + + +.main-nav .nav-download:hover { + + color: #111111; + + transform: translateY(-1px); + +} + + +.mobile-menu { + + display: none; + + width: 42px; + + height: 42px; + + border: 1px solid var(--border); + + background: var(--surface); + + border-radius: 10px; + + cursor: pointer; + + padding: 10px; + +} + + +.mobile-menu span { + + display: block; + + width: 100%; + + height: 2px; + + background: #ffffff; + + margin: 4px 0; + + border-radius: 10px; + +} + + +/* ========================================================= + HERO +========================================================= */ + +.hero { + padding: 55px 0 65px; +} + +.hero-container { + display: grid; + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); + align-items: center; + gap: 48px; +} + +/* ========================================================= + HERO CONTENT +========================================================= */ + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 8px; + + padding: 6px 11px; + + border: 1px solid var(--border); + background: rgba(255, 255, 255, 0.025); + border-radius: 100px; + + color: var(--text-secondary); + + font-size: 11px; + font-weight: 600; + + margin-bottom: 20px; +} + +.eyebrow-dot { + width: 6px; + height: 6px; + border-radius: 50%; + + background: var(--accent); + + box-shadow: 0 0 10px rgba(30, 144, 255, 0.75); +} + +.hero h1 { + max-width: 560px; + + font-size: clamp(42px, 4.5vw, 64px); + line-height: 1; + letter-spacing: -0.055em; + font-weight: 800; + + margin: 0; +} + +.hero h1 span { + display: block; + color: var(--accent-light); +} + +.hero-description { + max-width: 500px; + + margin-top: 22px; + + color: var(--text-secondary); + + font-size: 15px; + line-height: 1.7; +} + +/* ========================================================= + HERO ACTIONS +========================================================= */ + +.hero-actions { + display: flex; + align-items: center; + gap: 10px; + + margin-top: 27px; + + flex-wrap: wrap; +} + +.button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 9px; + + min-height: 44px; + + padding: 0 17px; + + border-radius: 9px; + + font-size: 13px; + font-weight: 700; + + transition: + transform 0.2s ease, + background 0.2s ease, + border-color 0.2s ease; +} + +.button:hover { + transform: translateY(-2px); +} + +.button-primary { + background: var(--accent); + color: #ffffff; + + box-shadow: + 0 10px 25px rgba(30, 144, 255, 0.18); +} + +.button-primary:hover { + background: var(--accent-light); +} + +.button-secondary { + border: 1px solid var(--border-light); + + background: rgba(255, 255, 255, 0.025); + + color: #ffffff; +} + +.button-secondary:hover { + background: rgba(255, 255, 255, 0.06); +} + +/* ========================================================= + MICROSOFT STORE BADGE +========================================================= */ + +.store-badge { + margin-top: 13px; + width: 100%; +} + +/* ========================================================= + HERO META +========================================================= */ + +.hero-meta { + display: flex; + align-items: center; + gap: 18px; + + margin-top: 30px; +} + +.meta-item { + display: flex; + flex-direction: column; + gap: 3px; +} + +.meta-item strong { + font-size: 12px; +} + +.meta-item span { + color: var(--text-muted); + font-size: 10px; +} + +.meta-divider { + width: 1px; + height: 28px; + + background: var(--border); +} + + +/* ========================================================= + HERO SCREENSHOT +========================================================= */ + +.hero-preview { + min-width: 0; + + display: flex; + justify-content: center; +} + +.window-frame { + width: 100%; + max-width: 680px; + + overflow: hidden; + + border: 1px solid var(--border-light); + border-radius: 15px; + + background: #111111; + + box-shadow: + 0 30px 70px rgba(0, 0, 0, 0.42), + 0 10px 25px rgba(0, 0, 0, 0.22); + + transform: + perspective(1400px) + rotateY(-1.5deg) + rotateX(0.7deg); + + transition: + transform 0.5s ease, + box-shadow 0.5s ease; +} + +.window-frame:hover { + transform: + perspective(1400px) + rotateY(0) + rotateX(0) + translateY(-3px); + + box-shadow: + 0 40px 85px rgba(0, 0, 0, 0.48), + 0 12px 30px rgba(0, 0, 0, 0.26); +} + +/* ========================================================= + WINDOW BAR +========================================================= */ + +.window-bar { + height: 43px; + + display: flex; + align-items: center; + justify-content: space-between; + + padding: 0 13px; + + background: #171719; + + border-bottom: 1px solid var(--border); +} + +.window-brand { + display: flex; + align-items: center; + gap: 8px; + + color: #ffffff; + + font-size: 12px; + font-weight: 600; +} + +.window-logo { + width: 25px; + height: 25px; + + object-fit: cover; + + border-radius: 7px; +} + +.window-controls { + display: flex; + align-items: center; + gap: 6px; +} + +.window-controls i { + display: block; + + width: 7px; + height: 7px; + + border-radius: 50%; + + background: #4b4b4f; +} + +/* ========================================================= + REAL SCREENSHOT +========================================================= */ + +.preview-image-wrapper { + width: 100%; + + background: #111111; + + overflow: hidden; +} + +.preview-image { + display: block; + + width: 100%; + height: auto; +} + +/* ========================================================= + RESPONSIVE HERO +========================================================= */ + +@media (max-width: 1000px) { + + .hero { + padding: 45px 0 55px; + } + + .hero-container { + grid-template-columns: 1fr; + gap: 45px; + } + + .hero-content { + max-width: 650px; + } + + .hero h1 { + max-width: 650px; + font-size: clamp(42px, 7vw, 60px); + } + + .hero-description { + max-width: 580px; + } + + .hero-preview { + width: 100%; + } + + .window-frame { + max-width: 760px; + } +} + + +@media (max-width: 600px) { + + .hero { + padding: 35px 0 45px; + } + + .hero-container { + gap: 32px; + } + + .eyebrow { + margin-bottom: 16px; + } + + .hero h1 { + font-size: 42px; + line-height: 1.02; + } + + .hero-description { + margin-top: 18px; + + font-size: 14px; + line-height: 1.65; + } + + .hero-actions { + margin-top: 22px; + } + + .button { + min-height: 42px; + padding: 0 15px; + font-size: 12px; + } + + .hero-meta { + margin-top: 25px; + gap: 14px; + } + + .meta-item strong { + font-size: 11px; + } + + .meta-item span { + font-size: 9px; + } + + .window-frame { + border-radius: 11px; + } + + .window-bar { + height: 36px; + padding: 0 10px; + } + + .window-logo { + width: 21px; + height: 21px; + } + + .window-brand { + font-size: 10px; + } + + .window-controls { + gap: 5px; + } + + .window-controls i { + width: 6px; + height: 6px; + } +} + +/* ========================================================= + FEATURES +========================================================= */ + +.features-section { + + background: + linear-gradient(180deg, + transparent, + rgba(255, + 255, + 255, + 0.012), + transparent); + +} + + +.feature-grid { + + display: grid; + + grid-template-columns: + repeat(3, 1fr); + + gap: 15px; + +} + + +.feature-card { + + position: relative; + + min-height: 270px; + + padding: 29px; + + border: 1px solid var(--border); + + background: + linear-gradient(145deg, + rgba(255, + 255, + 255, + 0.035), + rgba(255, + 255, + 255, + 0.012)); + + border-radius: 16px; + + overflow: hidden; + + transition: + transform 0.25s ease, + border-color 0.25s ease, + background 0.25s ease; + +} + + +.feature-card::before { + + content: ""; + + position: absolute; + + width: 150px; + + height: 150px; + + top: -80px; + + right: -80px; + + border-radius: 50%; + + background: rgba(30, + 144, + 255, + 0.08); + + filter: blur(10px); + +} + + +.feature-card:hover { + + transform: translateY(-5px); + + border-color: rgba(30, + 144, + 255, + 0.3); + + background: + linear-gradient(145deg, + rgba(255, + 255, + 255, + 0.05), + rgba(255, + 255, + 255, + 0.015)); + +} + + +.feature-number { + + position: absolute; + + top: 22px; + + right: 24px; + + color: #45454a; + + font-size: 12px; + + font-weight: 700; + +} + + +.feature-icon { + + width: 46px; + + height: 46px; + + display: flex; + + align-items: center; + + justify-content: center; + + border: 1px solid rgba(30, + 144, + 255, + 0.2); + + background: rgba(30, + 144, + 255, + 0.08); + + border-radius: 12px; + + color: var(--accent-light); + + font-size: 21px; + + margin-bottom: 28px; + +} + + +.feature-card h3 { + + font-size: 18px; + + letter-spacing: -0.02em; + + margin-bottom: 10px; + +} + + +.feature-card p { + + color: var(--text-secondary); + + font-size: 13px; + + line-height: 1.75; + +} + + +/* ========================================================= + SCREENSHOTS +========================================================= */ + +.screenshots-section { + padding: 50px 0 110px; + scroll-margin-top: 90px; +} + +.section-heading { + max-width: 700px; + margin: 0 auto 55px; + text-align: center; +} + +.section-label { + display: inline-block; + margin-bottom: 14px; + + font-size: 12px; + font-weight: 700; + letter-spacing: 0.14em; + text-transform: uppercase; + + color: #1e90ff; +} + +.section-heading h2 { + margin: 0 0 16px; + + font-size: clamp(32px, 4vw, 48px); + line-height: 1.08; + letter-spacing: -0.035em; + + color: #ffffff; +} + +.section-heading p { + margin: 0; + + color: #8f8f8f; + font-size: 16px; + line-height: 1.7; +} + + +/* ================================ + GRID +================================ */ + +.screenshot-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 58px 28px; + + width: 100%; +} + + +/* ================================ + SCREENSHOT CARD +================================ */ + +.shot { + margin: 0; + min-width: 0; +} + +.shot-image { + position: relative; + + width: 100%; + aspect-ratio: 16 / 9; + + overflow: hidden; + + background: #171717; + border: 1px solid #2b2b2b; + border-radius: 16px; + + box-shadow: + 0 20px 50px rgba(0, 0, 0, 0.25); + + transition: + transform 0.3s ease, + border-color 0.3s ease, + box-shadow 0.3s ease; +} + +.shot-image::after { + content: ""; + + position: absolute; + inset: 0; + + background: linear-gradient( + 180deg, + rgba(255,255,255,0.04), + transparent 30% + ); + + pointer-events: none; +} + +.shot-image img { + display: block; + + width: 100%; + height: 100%; + + object-fit: cover; + + transition: transform 0.5s ease; +} + + +/* Hover */ + +.shot:hover .shot-image { + transform: translateY(-5px); + + border-color: #3a3a3a; + + box-shadow: + 0 28px 60px rgba(0, 0, 0, 0.35); +} + +.shot:hover .shot-image img { + transform: scale(1.025); +} + + +/* ================================ + CAPTION +================================ */ + +.shot figcaption { + padding: 18px 4px 0; +} + +.shot figcaption h3 { + margin: 0 0 6px; + + color: #ffffff; + + font-size: 18px; + font-weight: 650; + line-height: 1.3; +} + +.shot figcaption p { + margin: 0; + + color: #858585; + + font-size: 14px; + line-height: 1.6; +} + + +/* ================================ + REMOVE OLD MASONRY BEHAVIOR +================================ */ + +.shot-large { + grid-column: auto; +} + +.shot-large .shot-image { + aspect-ratio: 16 / 9; +} + + +/* ================================ + RESPONSIVE +================================ */ + +@media (max-width: 800px) { + + .screenshots-section { + padding: 70px 0 80px; + } + + .section-heading { + margin-bottom: 40px; + } + + .screenshot-grid { + grid-template-columns: 1fr; + gap: 42px; + } + + .shot-image { + border-radius: 14px; + } +} + + +@media (max-width: 500px) { + + .screenshots-section { + padding: 55px 0 65px; + } + + .section-heading h2 { + font-size: 32px; + } + + .section-heading p { + font-size: 15px; + } + + .shot figcaption { + padding-top: 14px; + } + + .shot figcaption h3 { + font-size: 17px; + } + + .shot figcaption p { + font-size: 13px; + } +} + +/* ========================================================= + IMAGE LIGHTBOX +========================================================= */ + +.lightbox { + position: fixed; + inset: 0; + z-index: 9999; + + display: flex; + align-items: center; + justify-content: center; + + padding: 40px; + + background: rgba(0, 0, 0, 0.88); + + opacity: 0; + visibility: hidden; + + transition: + opacity 0.25s ease, + visibility 0.25s ease; + + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + + +/* Open state */ + +.lightbox.active { + opacity: 1; + visibility: visible; +} + + +/* ========================================================= + LIGHTBOX CONTENT +========================================================= */ + +.lightbox-content { + position: relative; + + max-width: 92vw; + max-height: 90vh; + + display: flex; + align-items: center; + justify-content: center; + + transform: scale(0.96); + + transition: transform 0.25s ease; +} + +.lightbox.active .lightbox-content { + transform: scale(1); +} + + +/* ========================================================= + FULL IMAGE +========================================================= */ + +.lightbox-content img { + display: block; + + max-width: 92vw; + max-height: 88vh; + + width: auto; + height: auto; + + object-fit: contain; + + border-radius: 10px; + + box-shadow: + 0 30px 80px rgba(0, 0, 0, 0.65); + + user-select: none; +} + + +/* ========================================================= + CLOSE BUTTON +========================================================= */ + +.lightbox-close { + position: fixed; + + top: 22px; + right: 26px; + + z-index: 10000; + + width: 42px; + height: 42px; + + display: flex; + align-items: center; + justify-content: center; + + padding: 0; + + border: 1px solid rgba(255, 255, 255, 0.15); + + border-radius: 50%; + + background: rgba(255, 255, 255, 0.08); + + color: #ffffff; + + font-size: 28px; + font-weight: 300; + + line-height: 1; + + cursor: pointer; + + transition: + background 0.2s ease, + transform 0.2s ease, + border-color 0.2s ease; +} + +.lightbox-close:hover { + background: rgba(255, 255, 255, 0.16); + + border-color: rgba(255, 255, 255, 0.25); + + transform: rotate(90deg); +} + + +/* ========================================================= + CLICKABLE SCREENSHOTS +========================================================= */ + +.shot-image { + cursor: zoom-in; +} + +.shot-image img { + cursor: zoom-in; +} + + +/* ========================================================= + MOBILE +========================================================= */ + +@media (max-width: 600px) { + + .lightbox { + padding: 20px; + } + + .lightbox-content { + max-width: 96vw; + max-height: 86vh; + } + + .lightbox-content img { + max-width: 96vw; + max-height: 84vh; + + border-radius: 7px; + } + + .lightbox-close { + top: 15px; + right: 15px; + + width: 38px; + height: 38px; + + font-size: 25px; + } +} + +/* ========================================================= + TECHNOLOGY +========================================================= */ + +.technology-section { + + border-top: 1px solid var(--border); + + border-bottom: 1px solid var(--border); + +} + + +.technology-container { + + display: grid; + + grid-template-columns: + 1fr 0.8fr; + + gap: 90px; + + align-items: center; + +} + + +.technology-content { + + max-width: 620px; + +} + + +.technology-content h2 { + + font-size: clamp(38px, + 5vw, + 60px); + + line-height: 1.04; + + letter-spacing: -0.05em; + + margin-bottom: 22px; + +} + + +.technology-content>p { + + color: var(--text-secondary); + + font-size: 16px; + + line-height: 1.8; + +} + + +.technology-tags { + + display: flex; + + flex-wrap: wrap; + + gap: 8px; + + margin-top: 30px; + +} + + +.technology-tags span { + + padding: 8px 12px; + + border: 1px solid var(--border); + + border-radius: 8px; + + background: rgba(255, + 255, + 255, + 0.025); + + color: #d4d4d8; + + font-size: 12px; + + font-weight: 600; + +} + + +.technology-panel { + + padding: 8px 25px; + + border: 1px solid var(--border); + + border-radius: 16px; + + background: var(--surface); + +} + + +.tech-panel-header { + + display: flex; + + justify-content: space-between; + + align-items: center; + + padding: 20px 0; + + border-bottom: 1px solid var(--border); + + font-size: 13px; + + font-weight: 700; + +} + + +.status-dot { + + color: var(--accent); + + font-size: 10px; + +} + + +.tech-row { + + display: flex; + + justify-content: space-between; + + gap: 20px; + + padding: 17px 0; + + border-bottom: 1px solid var(--border); + +} + + +.tech-row:last-child { + + border-bottom: none; + +} + + +.tech-row span { + + color: var(--text-muted); + + font-size: 12px; + +} + + +.tech-row strong { + + color: #dddddf; + + font-size: 12px; + + text-align: right; + +} + + +/* ========================================================= + CTA +========================================================= */ + +.cta-section { + + padding: 110px 0; + +} + + +.cta-card { + + position: relative; + + overflow: hidden; + + padding: 75px; + + border-radius: 22px; + + background: + linear-gradient(120deg, + #151a20, + #111417); + + border: 1px solid rgba(30, + 144, + 255, + 0.25); + +} + + +.cta-card::before { + + content: ""; + + position: absolute; + + width: 450px; + + height: 450px; + + right: -150px; + + top: -230px; + + border-radius: 50%; + + background: rgba(30, + 144, + 255, + 0.11); + + filter: blur(30px); + +} + + +.cta-content { + + position: relative; + + z-index: 1; + + max-width: 680px; + +} + + +.cta-content h2 { + + font-size: clamp(42px, + 5vw, + 65px); + + line-height: 1; + + letter-spacing: -0.055em; + + margin-bottom: 20px; + +} + + +.cta-content p { + + max-width: 570px; + + color: var(--text-secondary); + + font-size: 16px; + + line-height: 1.75; + + margin-bottom: 30px; + +} + + +.button-light { + + background: #ffffff; + + color: #101010; + +} + + +.button-light:hover { + + background: #e9e9e9; + +} + + +/* ========================================================= + LEGAL +========================================================= */ + +.legal-section { + + padding-top: 40px; + +} + + +.legal-grid { + + display: grid; + + grid-template-columns: + repeat(2, 1fr); + + gap: 15px; + +} + + +.legal-card { + + display: grid; + + grid-template-columns: + auto 1fr auto; + + align-items: center; + + gap: 18px; + + padding: 25px; + + border: 1px solid var(--border); + + border-radius: 14px; + + background: var(--surface); + + transition: + transform 0.2s ease, + border-color 0.2s ease; + +} + + +.legal-card:hover { + + transform: translateY(-3px); + + border-color: rgba(30, + 144, + 255, + 0.28); + +} + + +.legal-icon { + + width: 42px; + + height: 42px; + + display: flex; + + align-items: center; + + justify-content: center; + + border-radius: 10px; + + background: rgba(30, + 144, + 255, + 0.08); + + border: 1px solid rgba(30, + 144, + 255, + 0.18); + + color: var(--accent-light); + +} + + +.legal-card h3 { + + font-size: 15px; + + margin-bottom: 3px; + +} + + +.legal-card p { + + color: var(--text-muted); + + font-size: 12px; + +} + + +.legal-arrow { + + color: #77777d; + + font-size: 18px; + +} + + +/* ========================================================= + FOOTER +========================================================= */ + +.site-footer { + + margin-top: 60px; + + border-top: 1px solid var(--border); + + background: #0a0a0b; + +} + + +.footer-container { + + display: grid; + + grid-template-columns: + 1fr auto; + + gap: 70px; + + padding: 65px 0; + +} + + +.footer-brand { + + max-width: 300px; + +} + + +.footer-brand p { + + color: var(--text-muted); + + font-size: 12px; + + margin-top: 14px; + + line-height: 1.7; + +} + + +.footer-links { + + display: flex; + + gap: 75px; + +} + + +.footer-column { + + display: flex; + + flex-direction: column; + + gap: 10px; + +} + + +.footer-column h4 { + + color: #ffffff; + + font-size: 12px; + + margin-bottom: 5px; + +} + + +.footer-column a { + + color: var(--text-muted); + + font-size: 12px; + + transition: color 0.2s ease; + +} + + +.footer-column a:hover { + + color: #ffffff; + +} + + +.footer-bottom { + + display: flex; + + justify-content: space-between; + + align-items: center; + + padding: 20px 0; + + border-top: 1px solid var(--border); + + color: #5f5f65; + + font-size: 11px; + +} + + +.footer-bottom a { + + color: #8b8b91; + +} + + +.footer-bottom a:hover { + + color: #ffffff; + +} + + +/* ========================================================= + REVEAL ANIMATION +========================================================= */ + +.reveal { + + opacity: 0; + + transform: translateY(24px); + + transition: + opacity 0.7s ease, + transform 0.7s ease; + +} + + +.reveal.revealed { + + opacity: 1; + + transform: translateY(0); + +} + + +/* ========================================================= + SELECTION +========================================================= */ + +::selection { + + background: rgba(30, + 144, + 255, + 0.35); + + color: #ffffff; + +} + + +/* ========================================================= + SCROLLBAR +========================================================= */ + +::-webkit-scrollbar { + + width: 9px; + +} + + +::-webkit-scrollbar-track { + + background: #0b0b0c; + +} + + +::-webkit-scrollbar-thumb { + + background: #303034; + + border-radius: 10px; + +} + + +::-webkit-scrollbar-thumb:hover { + + background: #414146; + +} + + +/* ========================================================= + RESPONSIVE — TABLET +========================================================= */ + +@media (max-width: 1000px) { + + .hero-container { + + grid-template-columns: 1fr; + + gap: 60px; + + } + + + .hero-content { + + max-width: 800px; + + } + + + .hero-preview { + + max-width: 900px; + + margin: 0 auto; + + width: 100%; + + } + + + .feature-grid { + + grid-template-columns: + repeat(2, 1fr); + + } + + + .technology-container { + + grid-template-columns: 1fr; + + gap: 50px; + + } + + + .technology-content { + + max-width: 800px; + + } + + + .footer-container { + + grid-template-columns: 1fr; + + gap: 45px; + + } + +} + + +/* ========================================================= + RESPONSIVE — MOBILE +========================================================= */ + +@media (max-width: 720px) { + + .container { + + width: min(calc(100% - 30px), + var(--max-width)); + + } + + + .section { + + padding: 80px 0; + + } + + + /* Header */ + + .nav-container { + + min-height: 68px; + + } + + + .mobile-menu { + + display: block; + + } + + + .main-nav { + + position: absolute; + + top: 68px; + + left: 15px; + + right: 15px; + + display: none; + + flex-direction: column; + + align-items: stretch; + + gap: 0; + + padding: 10px; + + background: rgba(18, + 18, + 20, + 0.97); + + border: 1px solid var(--border); + + border-radius: 14px; + + box-shadow: + 0 20px 50px rgba(0, + 0, + 0, + 0.4); + + } + + + .main-nav.mobile-open { + + display: flex; + + } + + + .main-nav>a { + + padding: 13px 14px; + + border-radius: 8px; + + } + + + .main-nav>a:hover { + + background: rgba(255, + 255, + 255, + 0.05); + + } + + + .main-nav .nav-download { + + margin: 8px 0 0; + + text-align: center; + + } + + + /* Hero */ + + .hero { + + padding: + 75px 0 70px; + + } + + + .hero-container { + + gap: 45px; + + } + + + .hero h1 { + + font-size: clamp(43px, + 13vw, + 62px); + + } + + + .hero-description { + + font-size: 15px; + + } + + + .hero-actions { + + flex-direction: column; + + align-items: stretch; + + } + + + .button { + + width: 100%; + + } + + + .hero-meta { + + gap: 14px; + + margin-top: 35px; + + } + + + .window-frame { + + border-radius: 12px; + + transform: none; + + } + + + .window-frame:hover { + + transform: none; + + } + + + .window-bar { + + height: 48px; + + } + + + .window-logo { + + width: 26px; + + height: 26px; + + } + + + /* Section */ + + .section-heading { + + margin-bottom: 40px; + + } + + + .section-heading h2 { + + font-size: 39px; + + } + + + .section-heading p { + + font-size: 15px; + + } + + + /* Features */ + + .feature-grid { + + grid-template-columns: 1fr; + + } + + + .feature-card { + + min-height: auto; + + } + + + /* Screenshots */ + + .screenshot-grid { + + grid-template-columns: 1fr; + + gap: 28px; + + } + + + .shot-large { + + grid-column: span 1; + + } + + + /* Technology */ + + .technology-content h2 { + + font-size: 42px; + + } + + + .technology-panel { + + padding: 5px 18px; + + } + + + /* CTA */ + + .cta-section { + + padding: 75px 0; + + } + + + .cta-card { + + padding: 42px 25px; + + border-radius: 17px; + + } + + + .cta-content h2 { + + font-size: 44px; + + } + + + /* Legal */ + + .legal-grid { + + grid-template-columns: 1fr; + + } + + + .legal-card { + + grid-template-columns: + auto 1fr auto; + + padding: 20px; + + } + + + /* Footer */ + + .footer-links { + + display: grid; + + grid-template-columns: + repeat(2, 1fr); + + gap: 35px; + + } + + + .footer-bottom { + + flex-direction: column; + + align-items: flex-start; + + gap: 10px; + + } + +} + + +/* ========================================================= + RESPONSIVE — SMALL MOBILE +========================================================= */ + +@media (max-width: 430px) { + + .brand-name { + + font-size: 15px; + + } + + + .brand-logo { + + width: 32px; + + height: 32px; + + } + + + .hero { + + padding-top: 55px; + + } + + + .hero h1 { + + font-size: 42px; + + } + + + .hero-meta { + + flex-wrap: wrap; + + } + + + .meta-divider { + + display: none; + + } + + + .window-bar { + + padding: 0 12px; + + } + + + .window-brand { + + font-size: 12px; + + } + + + .feature-card { + + padding: 24px; + + } + + + .technology-content h2 { + + font-size: 37px; + + } + + + .footer-links { + + grid-template-columns: 1fr 1fr; + + gap: 25px; + + } + +} \ No newline at end of file