From 191c9b08e0806e2c6c6bfc9fb9f9cd2ad8aa442a Mon Sep 17 00:00:00 2001 From: Trey t Date: Wed, 6 May 2026 13:34:32 -0500 Subject: [PATCH] feat(static): rebuild landing page on amber-on-midnight brand system MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the off-brand "VIBRANT EDITION" CSS (generic SaaS blue/purple/ teal/pink) with a strict palette derived from icon.png and style_guide.md: --gold #FCCE38, --amber #F5A623, --pollen #FFE082, --sun-bloom #F9BB2F --midnight #181E37, --deep #162140, --comb-line #232230 --cream #FFF1D0 Spacing/radius scale mirrors iOS DesignSystem.swift (AppSpacing 4/8/12/ 16/24/32/48/64; AppRadius 4/8/12/16/20/24) so the web feels native to the same brand system. 56px button height, 16px card radius, identical elevation language. Page architecture: - Sticky translucent nav with hex brand mark (1+6 cluster) - Hero with iPhone frame mock showing real kanban view (overdue/due soon/in progress/done with priority dots and meta chips) - Cream "What's due, what's done, what's yours" pillars - Four feature deep-dives (residences, tasks/kanban, contractors, documents/warranties) with product UI mocks built from real app concepts - "Each cell, a task" comb section with JS-generated 8x10 honeycomb completion grid that fills more densely toward the top - iOS polish section: Home Screen widget mock with quick-complete, push notification with inline actions, Face ID lock, 11 themes - Sharing section with share-card mock (HIVE-7K2D-Q9 code + 3 keepers) - Free vs Pro pricing with "Most chosen" tag - Final CTA with brand mark + golden glow Honeycomb motif: - Brand mark uses gold-on-navy with a radial halo (no currentColor dependency — renders identically everywhere) - Hex grid background uses a properly tessellating flat-top tile (3 hexes per 126x73 unit, sharing full edges, no seams) - Hex bullets, hex pills, completion grid all flat-top per style guide Copy follows style_guide.md voice — calm, specific, no banned words (chore, simplified, seamless), sentence case throughout. Canonical tagline "A home is a hive. We'll help you keep it." used verbatim in the hero and footer. JS: mobile nav toggle, scroll-state nav, IntersectionObserver reveal, deterministic comb-grid generator. Respects prefers-reduced-motion. Co-Authored-By: Claude Opus 4.7 (1M context) --- static/css/style.css | 2000 ++++++++++++++++++++++++------------------ static/index.html | 748 +++++++++++----- static/js/main.js | 190 ++-- 3 files changed, 1770 insertions(+), 1168 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 1d0837d..89ebf8f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,403 +1,405 @@ -/* =================================== - honeyDue Landing Page Styles - VIBRANT EDITION - =================================== */ +/* =================================================================== + honeyDue — Landing styles + Amber on midnight. Cream as daylight. Hex as structure. + Tokens mirror iOS DesignSystem.swift (AppSpacing / AppRadius). + =================================================================== */ -/* CSS Variables */ +/* -------------------- Tokens -------------------- */ :root { - /* Brand Colors */ - --color-primary: #0079FF; - --color-primary-dark: #0055CC; - --color-primary-light: #4DA3FF; + /* Brand color */ + --gold: #FCCE38; + --amber: #F5A623; + --pollen: #FFE082; + --sun-bloom: #F9BB2F; - --color-secondary: #5AC7F9; - --color-secondary-dark: #3AB8F5; + --midnight: #181E37; + --deep: #162140; + --comb-line: #232230; - --color-accent: #FF9400; - --color-accent-light: #FFB347; - --color-accent-dark: #E68600; + --cream: #FFF1D0; + --cream-elev: #FFF7E1; + --white: #FFFFFF; - --color-purple: #8B5CF6; - --color-pink: #EC4899; - --color-teal: #14B8A6; - --color-green: #22C55E; + /* Semantic text */ + --text-on-dark: #F5F2EA; + --text-muted-on-dark: rgba(245, 242, 234, 0.62); + --text-faint-on-dark: rgba(245, 242, 234, 0.38); - /* Text */ - --color-text-primary: #1a1a1a; - --color-text-secondary: #4B5563; - --color-text-muted: #9CA3AF; - --color-text-light: rgba(255, 255, 255, 0.9); + --text-on-light: #1A1A22; + --text-muted-on-light: rgba(26, 26, 34, 0.65); + --text-faint-on-light: rgba(26, 26, 34, 0.38); - /* Backgrounds */ - --color-bg-primary: #FFFFFF; - --color-bg-secondary: #F8FAFC; - --color-bg-dark: #0F172A; - --color-bg-darker: #020617; + /* Borders */ + --border-on-dark: rgba(245, 242, 234, 0.10); + --border-on-dark-strong: rgba(245, 242, 234, 0.18); + --border-on-light: rgba(26, 26, 34, 0.08); + --border-on-light-strong: rgba(26, 26, 34, 0.16); - /* Gradients */ - --gradient-hero: linear-gradient(135deg, #0079FF 0%, #5AC7F9 50%, #14B8A6 100%); - --gradient-cta: linear-gradient(135deg, #0079FF 0%, #8B5CF6 100%); - --gradient-accent: linear-gradient(135deg, #FF9400 0%, #EC4899 100%); - --gradient-dark: linear-gradient(180deg, #0F172A 0%, #1E293B 100%); - --gradient-mesh: radial-gradient(at 40% 20%, rgba(0, 121, 255, 0.3) 0px, transparent 50%), - radial-gradient(at 80% 0%, rgba(90, 199, 249, 0.3) 0px, transparent 50%), - radial-gradient(at 0% 50%, rgba(139, 92, 246, 0.2) 0px, transparent 50%), - radial-gradient(at 80% 50%, rgba(20, 184, 166, 0.2) 0px, transparent 50%), - radial-gradient(at 0% 100%, rgba(255, 148, 0, 0.2) 0px, transparent 50%); + /* Status */ + --error: #DD1C1A; - /* Typography */ - --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + /* Type */ + --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; - --text-hero: clamp(2.5rem, 5vw, 4rem); - --text-h1: clamp(2rem, 4vw, 3rem); - --text-h2: clamp(1.75rem, 3vw, 2.25rem); - --text-h3: 1.25rem; - --text-body: 1.125rem; - --text-small: 0.875rem; + --t-display: clamp(2.5rem, 5.6vw, 4.25rem); + --t-h2: clamp(1.85rem, 3.6vw, 2.75rem); + --t-h3: clamp(1.25rem, 1.8vw, 1.625rem); + --t-lead: clamp(1.0625rem, 1.3vw, 1.25rem); + --t-body: 1rem; + --t-sm: 0.9375rem; + --t-xs: 0.8125rem; - /* Spacing */ - --space-xs: 0.5rem; - --space-sm: 1rem; - --space-md: 1.5rem; - --space-lg: 2rem; - --space-xl: 3rem; - --space-2xl: 4rem; - --space-3xl: 6rem; - --space-4xl: 8rem; + /* Spacing — mirrors AppSpacing (4/8/12/16/24/32/48/64) */ + --s-1: 4px; + --s-2: 8px; + --s-3: 12px; + --s-4: 16px; + --s-5: 24px; + --s-6: 32px; + --s-7: 48px; + --s-8: 64px; + --s-9: 96px; + --s-10: 128px; - /* Other */ - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-2xl: 32px; + /* Radius — mirrors AppRadius (4/8/12/16/20/24) */ + --r-1: 4px; + --r-2: 8px; + --r-3: 12px; + --r-4: 16px; + --r-5: 20px; + --r-6: 24px; + --r-pill: 9999px; - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); - --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); - --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); - --shadow-glow: 0 0 60px rgba(0, 121, 255, 0.3); - --shadow-glow-accent: 0 0 60px rgba(255, 148, 0, 0.3); + /* Shadows — calibrated for amber on midnight */ + --shadow-soft: 0 8px 32px rgba(11, 17, 36, 0.35); + --shadow-deep: 0 24px 64px rgba(11, 17, 36, 0.55); + --shadow-glow: 0 0 96px rgba(252, 206, 56, 0.32); + --shadow-light: 0 12px 32px rgba(56, 38, 18, 0.10); - --transition: 0.3s ease; - --transition-slow: 0.5s ease; + /* Layout */ + --container-max: 1180px; + --nav-height: 64px; + + /* Faint hex grid as a data-URI background. + Flat-top honeycomb tessellation: tile 126×73, 3 hexes per tile (one + full + two straddling top/bottom edges). Side length s=42, height + h≈73. Hex A center (21,36), B (84,0), C (84,73). Adjacent hexes + share full edges so the tile repeats with no seams or gaps. */ + --hex-grid-dark: url("data:image/svg+xml;utf8,"); } -/* Reset */ -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} +/* -------------------- Reset / base -------------------- */ +* { box-sizing: border-box; margin: 0; padding: 0; } -html { - scroll-behavior: smooth; -} +html { scroll-behavior: smooth; } body { - font-family: var(--font-primary); - font-size: var(--text-body); + font-family: var(--font-sans); + font-size: var(--t-body); line-height: 1.6; - color: var(--color-text-primary); - background-color: var(--color-bg-primary); + color: var(--text-on-dark); + background: var(--midnight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; overflow-x: hidden; } -img { - max-width: 100%; - height: auto; -} +img, svg { display: block; max-width: 100%; } +a { color: inherit; text-decoration: none; } +button { font-family: inherit; cursor: pointer; } +ul { list-style: none; } +em { font-style: italic; color: var(--gold); font-weight: 500; } -a { - color: inherit; - text-decoration: none; -} +::selection { background: var(--gold); color: var(--midnight); } -/* Container */ +/* -------------------- Layout primitives -------------------- */ .container { width: 100%; - max-width: 1200px; - margin: 0 auto; - padding: 0 var(--space-md); + max-width: var(--container-max); + margin-inline: auto; + padding-inline: var(--s-5); } -/* =================================== - Navigation - =================================== */ -.nav { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - background: rgba(15, 23, 42, 0.9); - backdrop-filter: blur(20px); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - transition: var(--transition); -} - -.nav-container { - display: flex; +.eyebrow { + display: inline-flex; align-items: center; - justify-content: space-between; - max-width: 1200px; - margin: 0 auto; - padding: var(--space-sm) var(--space-md); + gap: var(--s-2); + font-size: var(--t-xs); + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-muted-on-dark); + margin-bottom: var(--s-4); +} +.eyebrow--gold { color: var(--gold); } +.eyebrow--center { display: flex; justify-content: center; } +.eyebrow-mark { width: 8px; height: 8px; color: var(--gold); } + +.section-title { + font-size: var(--t-h2); + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.02em; + margin-bottom: var(--s-4); + color: var(--text-on-dark); +} +.section-title--light { color: var(--text-on-light); } + +.section-sub { + font-size: var(--t-lead); + line-height: 1.55; + color: var(--text-muted-on-dark); + max-width: 60ch; + margin-bottom: var(--s-7); +} +.section-sub--light { color: var(--text-muted-on-light); } + +/* Reveal-on-scroll — JS toggles .is-visible */ +.reveal { + opacity: 0; + transform: translateY(16px); + transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); + will-change: opacity, transform; +} +.reveal.is-visible { + opacity: 1; + transform: none; } -.nav-logo { - display: flex; - align-items: center; - gap: var(--space-xs); -} - -.logo-text { - font-size: 1.5rem; - font-weight: 800; - background: linear-gradient(135deg, #fff 0%, var(--color-secondary) 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.nav-links { - display: flex; - align-items: center; - gap: var(--space-lg); -} - -.nav-link { - font-size: var(--text-small); - font-weight: 500; - color: rgba(255, 255, 255, 0.7); - transition: var(--transition); -} - -.nav-link:hover { - color: #fff; -} - -.nav-cta { - display: flex; - align-items: center; - gap: var(--space-sm); -} - -.nav-toggle { - display: none; - flex-direction: column; - gap: 5px; - background: none; - border: none; - cursor: pointer; - padding: var(--space-xs); -} - -.nav-toggle span { - display: block; - width: 24px; - height: 2px; - background: #fff; - transition: var(--transition); -} - -/* =================================== - Buttons - =================================== */ +/* -------------------- Buttons -------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; - gap: var(--space-xs); - font-family: var(--font-primary); + gap: var(--s-2); + height: 56px; + padding: 0 var(--s-6); + border-radius: var(--r-3); font-weight: 600; - text-align: center; - border: none; - border-radius: var(--radius-lg); - cursor: pointer; - transition: var(--transition); - position: relative; - overflow: hidden; + font-size: var(--t-body); + line-height: 1; + transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; + white-space: nowrap; + border: 1px solid transparent; + user-select: none; } - -.btn::before { - content: ''; - position: absolute; - inset: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); - opacity: 0; - transition: var(--transition); -} - -.btn:hover::before { - opacity: 1; -} - -.btn-icon { - width: 20px; - height: 20px; -} - -.btn-sm { - padding: var(--space-xs) var(--space-sm); - font-size: var(--text-small); -} - -.btn-lg { - padding: var(--space-sm) var(--space-lg); - font-size: 1rem; +.btn:hover { transform: translateY(-1px); } +.btn:active { transform: translateY(0); } +.btn:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 3px; } .btn-primary { - background: var(--gradient-hero); - color: white; - box-shadow: 0 4px 15px rgba(0, 121, 255, 0.4); + background: var(--gold); + color: var(--midnight); + box-shadow: 0 8px 24px rgba(252, 206, 56, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4); } - .btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(0, 121, 255, 0.5); + background: var(--pollen); + box-shadow: 0 12px 32px rgba(252, 206, 56, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5); } -.btn-secondary { - background: rgba(255, 255, 255, 0.1); - color: white; - border: 1px solid rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); -} - -.btn-secondary:hover { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); -} - -.btn-white { - background: white; - color: var(--color-primary); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); -} - -.btn-white:hover { - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); -} - -.btn-outline-white { +.btn-ghost { background: transparent; - color: white; - border: 2px solid rgba(255, 255, 255, 0.5); + color: var(--text-on-dark); + border-color: var(--border-on-dark-strong); +} +.btn-ghost:hover { + background: rgba(245, 242, 234, 0.06); + border-color: rgba(245, 242, 234, 0.32); } -.btn-outline-white:hover { - background: rgba(255, 255, 255, 0.1); - border-color: white; +.btn-block { width: 100%; } +.btn-sm { height: 40px; padding: 0 var(--s-4); font-size: var(--t-sm); } +.btn-lg { height: 56px; padding: 0 var(--s-6); } + +.btn-icon { width: 18px; height: 18px; } + +/* -------------------- Navigation -------------------- */ +.nav { + position: sticky; + top: 0; + z-index: 50; + height: var(--nav-height); + background: rgba(24, 30, 55, 0.72); + backdrop-filter: saturate(140%) blur(18px); + -webkit-backdrop-filter: saturate(140%) blur(18px); + border-bottom: 1px solid transparent; + transition: border-color 0.2s ease, background 0.2s ease; +} +.nav.is-scrolled { + border-bottom-color: var(--border-on-dark); + background: rgba(22, 28, 50, 0.88); } -/* =================================== - Hero Section - =================================== */ -.hero { - position: relative; - padding: calc(80px + var(--space-4xl)) 0 var(--space-4xl); - background: var(--gradient-dark); - overflow: hidden; +.nav-container { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--s-5); } -.hero::before { - content: ''; +.nav-brand { + display: inline-flex; + align-items: center; + gap: 0; + color: var(--text-on-dark); +} + +.brand-wordmark { + font-weight: 700; + font-size: 1.0625rem; + letter-spacing: -0.02em; + color: var(--text-on-dark); +} +.brand-wordmark-strong { color: var(--gold); } + +.nav-links { + display: none; + align-items: center; + gap: var(--s-6); +} +.nav-link { + font-size: var(--t-sm); + color: var(--text-muted-on-dark); + font-weight: 500; + transition: color 0.15s ease; +} +.nav-link:hover { color: var(--text-on-dark); } + +.nav-cta { display: none; } + +.nav-toggle { + background: none; + border: 0; + width: 36px; + height: 36px; + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; + color: var(--text-on-dark); +} +.nav-toggle span { + display: block; + width: 22px; + height: 1.75px; + background: currentColor; + transition: transform 0.2s ease, opacity 0.2s ease; +} +.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } +.nav-toggle.is-active span:nth-child(2) { opacity: 0; } +.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } + +@media (min-width: 768px) { + .nav-links { display: flex; } + .nav-cta { display: inline-flex; } + .nav-toggle { display: none; } +} + +/* Mobile menu open */ +.nav-links.is-open { + display: flex; position: absolute; - inset: 0; - background: var(--gradient-mesh); - opacity: 1; -} - -.hero::after { - content: ''; - position: absolute; - bottom: 0; + top: var(--nav-height); left: 0; right: 0; - height: 200px; - background: linear-gradient(to top, var(--color-bg-primary), transparent); + flex-direction: column; + gap: 0; + background: var(--midnight); + border-bottom: 1px solid var(--border-on-dark); + padding: var(--s-3) 0; +} +.nav-links.is-open .nav-link { + padding: var(--s-3) var(--s-5); + width: 100%; +} + +/* -------------------- Hex field background -------------------- */ +.hex-field { + position: absolute; + inset: 0; + background-image: var(--hex-grid-dark); + background-size: 126px 73px; + background-position: center; + pointer-events: none; + mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); + -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); + opacity: 0.85; +} +.hex-field--soft { + mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); + -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); + opacity: 0.5; +} + +/* -------------------- Hero -------------------- */ +.hero { + position: relative; + overflow: hidden; + background: radial-gradient(ellipse 90% 60% at 30% 0%, #1B2547 0%, var(--midnight) 50%, var(--deep) 100%); + padding: var(--s-9) 0; +} +.hero-glow { + position: absolute; + top: -120px; + right: -160px; + width: 640px; + height: 640px; + border-radius: 50%; + background: radial-gradient(circle, rgba(252, 206, 56, 0.32) 0%, rgba(252, 206, 56, 0.08) 35%, transparent 65%); + filter: blur(20px); + pointer-events: none; } .hero-container { position: relative; - z-index: 1; display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-2xl); + grid-template-columns: 1fr; + gap: var(--s-8); align-items: center; } -.hero-content { - max-width: 560px; -} - -.hero-badge { - display: inline-flex; - align-items: center; - gap: var(--space-xs); - padding: var(--space-xs) var(--space-sm); - background: linear-gradient(135deg, rgba(255, 148, 0, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%); - border: 1px solid rgba(255, 148, 0, 0.3); - color: var(--color-accent-light); - font-size: var(--text-small); - font-weight: 600; - border-radius: var(--radius-xl); - margin-bottom: var(--space-md); -} - -.hero-badge::before { - content: ''; - width: 8px; - height: 8px; - background: var(--color-accent); - border-radius: 50%; - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(1.2); } -} - +.hero-content { max-width: 36rem; } .hero-title { - font-size: var(--text-hero); + font-size: var(--t-display); font-weight: 800; - line-height: 1.1; - margin-bottom: var(--space-md); - color: #fff; + line-height: 1.02; + letter-spacing: -0.035em; + margin-bottom: var(--s-5); + color: var(--text-on-dark); +} +.hero-title em { + font-style: italic; + font-weight: 700; + color: var(--gold); } -.hero-title-highlight { - background: var(--gradient-hero); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.hero-subtitle { - font-size: var(--text-body); - color: rgba(255, 255, 255, 0.7); - margin-bottom: var(--space-lg); - line-height: 1.8; +.hero-sub { + font-size: var(--t-lead); + line-height: 1.55; + color: var(--text-muted-on-dark); + margin-bottom: var(--s-6); + max-width: 32rem; } .hero-cta { display: flex; flex-wrap: wrap; - gap: var(--space-sm); - margin-bottom: var(--space-md); + gap: var(--s-3); + margin-bottom: var(--s-5); } .hero-trust { - font-size: var(--text-small); - color: rgba(255, 255, 255, 0.5); + font-size: var(--t-sm); + color: var(--text-faint-on-dark); } +/* iPhone mock */ .hero-visual { display: flex; justify-content: center; @@ -405,678 +407,950 @@ a { position: relative; } -/* Glowing orbs behind phone */ -.hero-visual::before { - content: ''; - position: absolute; +.iphone { + position: relative; width: 300px; - height: 300px; - background: var(--color-primary); - border-radius: 50%; - filter: blur(80px); - opacity: 0.4; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + max-width: 100%; + animation: heroFloat 8s ease-in-out infinite; +} +@keyframes heroFloat { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-8px); } } -.hero-visual::after { - content: ''; - position: absolute; - width: 200px; - height: 200px; - background: var(--color-accent); - border-radius: 50%; - filter: blur(60px); - opacity: 0.3; - top: 30%; - right: 10%; -} - -/* Phone Mockup */ -.phone-mockup { +.iphone-frame { position: relative; - z-index: 1; -} - -.phone-frame { - position: relative; - width: 280px; - height: 580px; - background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%); + aspect-ratio: 9 / 19.5; + background: #0A0E20; border-radius: 44px; - padding: 12px; + padding: 8px; box-shadow: - 0 50px 100px -20px rgba(0, 0, 0, 0.5), - 0 0 0 1px rgba(255, 255, 255, 0.1), - inset 0 0 0 1px rgba(255, 255, 255, 0.05); + 0 0 0 1.5px rgba(245, 242, 234, 0.08), + 0 60px 120px -30px rgba(11, 17, 36, 0.85), + 0 24px 48px -12px rgba(11, 17, 36, 0.5), + 0 0 80px rgba(252, 206, 56, 0.18); } -.phone-frame::before { - content: ''; +.iphone-notch { position: absolute; - top: 16px; + top: 14px; left: 50%; transform: translateX(-50%); - width: 100px; - height: 28px; - background: #1a1a1a; - border-radius: 20px; - z-index: 10; + width: 96px; + height: 26px; + background: #000; + border-radius: 16px; + z-index: 2; } -.phone-screen { +.iphone-screen { width: 100%; height: 100%; - background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%); + background: linear-gradient(180deg, #11172F 0%, #181E37 60%, #1A2240 100%); border-radius: 36px; overflow: hidden; - position: relative; -} - -.placeholder-content { - width: 100%; - height: 100%; display: flex; flex-direction: column; + position: relative; +} + +.iphone-statusbar { + display: flex; + justify-content: space-between; align-items: center; - justify-content: center; - background: linear-gradient(135deg, - rgba(0, 121, 255, 0.1) 0%, - rgba(139, 92, 246, 0.1) 50%, - rgba(20, 184, 166, 0.1) 100%); - color: rgba(255, 255, 255, 0.4); - font-size: var(--text-small); + padding: 14px 22px 6px; + font-size: 12px; + font-weight: 600; + color: var(--text-on-dark); +} +.iphone-statusbar-right { display: inline-flex; gap: 3px; } +.sb-dot { + width: 4px; height: 4px; border-radius: 50%; + background: var(--text-on-dark); +} +.sb-dot--off { background: var(--text-faint-on-dark); } + +.iphone-titlebar { + padding: 18px 18px 10px; +} +.iphone-title { + display: block; + font-size: 22px; + font-weight: 700; + letter-spacing: -0.02em; + color: var(--text-on-dark); +} +.iphone-subtitle { + display: block; + font-size: 12px; + color: var(--text-muted-on-dark); + margin-top: 2px; +} + +.iphone-tabs { + display: flex; + gap: 6px; + padding: 4px 18px 12px; + overflow-x: auto; + scrollbar-width: none; +} +.iphone-tabs::-webkit-scrollbar { display: none; } +.iphone-tab { + flex: 0 0 auto; + padding: 6px 10px; + font-size: 11px; font-weight: 500; - gap: var(--space-sm); + color: var(--text-muted-on-dark); + background: rgba(245, 242, 234, 0.06); + border-radius: var(--r-pill); + white-space: nowrap; +} +.iphone-tab--active { + color: var(--midnight); + background: var(--gold); } -.placeholder-content::before { - content: ''; - width: 60px; - height: 60px; - border: 2px dashed rgba(255, 255, 255, 0.2); - border-radius: var(--radius-md); -} - -/* =================================== - Feature Highlights - =================================== */ -.highlights { - padding: var(--space-4xl) 0; - background: var(--color-bg-primary); - position: relative; -} - -.highlights-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-lg); -} - -.highlight-card { - text-align: center; - padding: var(--space-xl); - background: white; - border-radius: var(--radius-xl); - border: 1px solid rgba(0, 0, 0, 0.05); - transition: var(--transition); - position: relative; +.iphone-cards { + flex: 1; + padding: 0 14px; + display: flex; + flex-direction: column; + gap: 8px; overflow: hidden; } -.highlight-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: var(--gradient-hero); - transform: scaleX(0); - transition: var(--transition); +.task-card { + background: rgba(245, 242, 234, 0.04); + border: 1px solid var(--border-on-dark); + border-radius: var(--r-3); + padding: 10px 12px; + display: flex; + flex-direction: column; + gap: 6px; +} +.task-card--overdue { + border-color: rgba(221, 28, 26, 0.35); + background: linear-gradient(180deg, rgba(221, 28, 26, 0.10), rgba(221, 28, 26, 0.04)); +} +.task-card--done { + background: linear-gradient(180deg, rgba(252, 206, 56, 0.14), rgba(252, 206, 56, 0.04)); + border-color: rgba(252, 206, 56, 0.35); +} +.task-card-row { + display: flex; + align-items: center; + gap: 8px; + font-size: 12.5px; + font-weight: 600; + color: var(--text-on-dark); +} +.task-title { flex: 1; } +.task-card-meta { + display: flex; + gap: 6px; + flex-wrap: wrap; +} +.meta-chip { + font-size: 10px; + font-weight: 500; + padding: 3px 7px; + border-radius: var(--r-pill); + background: rgba(245, 242, 234, 0.08); + color: var(--text-muted-on-dark); +} +.meta-chip--overdue { background: rgba(221, 28, 26, 0.18); color: #FFB8B6; } +.meta-chip--done { background: rgba(252, 206, 56, 0.22); color: var(--midnight); font-weight: 600; } + +.prio-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} +.prio-dot--high { background: var(--error); } +.prio-dot--med { background: var(--gold); } +.prio-dot--low { background: rgba(245, 242, 234, 0.35); } + +.task-done { + width: 14px; + height: 14px; + color: var(--gold); + flex-shrink: 0; +} +.task-done--sm { width: 12px; height: 12px; } + +.iphone-tabbar { + margin-top: auto; + display: flex; + justify-content: space-around; + align-items: center; + padding: 10px 16px 18px; + border-top: 1px solid var(--border-on-dark); + background: rgba(11, 17, 36, 0.5); +} +.iphone-tabbar-item { + font-size: 10px; + color: var(--text-faint-on-dark); + display: inline-flex; + flex-direction: column; + align-items: center; + gap: 3px; +} +.iphone-tabbar-item svg { + width: 14px; + height: 14px; +} +.iphone-tabbar-item--active { color: var(--gold); } + +@media (min-width: 1024px) { + .hero { padding: var(--s-10) 0; } + .hero-container { + grid-template-columns: 1.05fr 1fr; + gap: var(--s-8); + } + .iphone { width: 340px; } } -.highlight-card:hover { - transform: translateY(-8px); - box-shadow: var(--shadow-xl), var(--shadow-glow); +/* -------------------- Trust strip -------------------- */ +.trust { + background: var(--deep); + border-top: 1px solid var(--border-on-dark); + border-bottom: 1px solid var(--border-on-dark); + padding: var(--s-5) 0; } - -.highlight-card:hover::before { - transform: scaleX(1); +.trust-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + gap: var(--s-3) var(--s-7); } - -.highlight-card:nth-child(1) .highlight-icon { - background: linear-gradient(135deg, rgba(0, 121, 255, 0.15) 0%, rgba(90, 199, 249, 0.15) 100%); - color: var(--color-primary); -} - -.highlight-card:nth-child(2) .highlight-icon { - background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%); - color: var(--color-purple); -} - -.highlight-card:nth-child(3) .highlight-icon { - background: linear-gradient(135deg, rgba(255, 148, 0, 0.15) 0%, rgba(34, 197, 94, 0.15) 100%); - color: var(--color-accent); -} - -.highlight-icon { +.trust-item { display: inline-flex; align-items: center; - justify-content: center; - width: 72px; - height: 72px; - border-radius: var(--radius-lg); - margin-bottom: var(--space-md); + gap: var(--s-2); + font-size: var(--t-sm); + font-weight: 500; + color: var(--text-muted-on-dark); +} +.trust-mark { + width: 8px; height: 8px; + color: var(--gold); } -.highlight-icon svg { - width: 32px; - height: 32px; +/* -------------------- Pillars -------------------- */ +.pillars { + background: var(--cream); + color: var(--text-on-light); + padding: var(--s-9) 0; + text-align: center; + position: relative; +} +.pillars .section-title { color: var(--text-on-light); } +.pillars .section-sub { color: var(--text-muted-on-light); margin-inline: auto; margin-bottom: var(--s-8); } +.pillars .eyebrow { color: var(--amber); } + +.pillars-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--s-6); + text-align: left; } -.highlight-title { - font-size: var(--text-h3); +.pillar { + background: var(--cream-elev); + border: 1px solid var(--border-on-light); + border-radius: var(--r-5); + padding: var(--s-6); + box-shadow: var(--shadow-light); + transition: transform 0.25s ease, box-shadow 0.25s ease; +} +.pillar:hover { + transform: translateY(-3px); + box-shadow: 0 20px 40px rgba(56, 38, 18, 0.14); +} +.pillar-kicker { + display: inline-flex; + align-items: center; + min-height: 32px; + padding: 0 12px; + margin-bottom: var(--s-4); + border-radius: var(--r-pill); + background: rgba(245, 166, 35, 0.12); + border: 1px solid rgba(245, 166, 35, 0.24); + font-size: var(--t-xs); font-weight: 700; - margin-bottom: var(--space-xs); - color: var(--color-text-primary); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--amber); } -.highlight-desc { - font-size: var(--text-small); - color: var(--color-text-secondary); +.pillar-title { + font-size: var(--t-h3); + font-weight: 700; + letter-spacing: -0.015em; + margin-bottom: var(--s-3); + color: var(--text-on-light); +} +.pillar-desc { + font-size: var(--t-body); + line-height: 1.6; + color: var(--text-muted-on-light); +} +.pillar-desc em { color: var(--midnight); font-style: italic; font-weight: 600; } + +@media (min-width: 768px) { + .pillars-grid { grid-template-columns: repeat(3, 1fr); } } -/* =================================== - Features Section - =================================== */ +/* -------------------- Features -------------------- */ .features { - padding: var(--space-4xl) 0; - background: var(--color-bg-secondary); + background: var(--midnight); + padding: var(--s-9) 0; position: relative; } .feature { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-3xl); + grid-template-columns: 1fr; + gap: var(--s-7); align-items: center; - margin-bottom: var(--space-4xl); -} - -.feature:last-child { - margin-bottom: 0; -} - -.feature-right .feature-content { - order: 1; -} - -.feature-right .feature-visual { - order: 0; -} - -.feature-content { - max-width: 480px; -} - -.feature-label { - display: inline-block; - padding: var(--space-xs) var(--space-sm); - background: var(--gradient-hero); - color: white; - font-size: 0.75rem; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - border-radius: var(--radius-sm); - margin-bottom: var(--space-sm); + padding: var(--s-7) 0; } +.feature + .feature { border-top: 1px solid var(--border-on-dark); } +.feature-content { max-width: 36rem; } .feature-title { - font-size: var(--text-h2); + font-size: var(--t-h2); font-weight: 700; - margin-bottom: var(--space-md); - line-height: 1.2; - color: var(--color-text-primary); + line-height: 1.1; + letter-spacing: -0.02em; + margin-bottom: var(--s-4); + color: var(--text-on-dark); } - .feature-desc { - font-size: var(--text-body); - color: var(--color-text-secondary); - line-height: 1.8; + font-size: var(--t-lead); + line-height: 1.6; + color: var(--text-muted-on-dark); + margin-bottom: var(--s-5); } +.feature-desc em { color: var(--gold); font-style: italic; font-weight: 500; } + +.feature-list { + display: flex; + flex-direction: column; + gap: var(--s-3); +} +.feature-list li { + display: flex; + align-items: flex-start; + gap: var(--s-3); + font-size: var(--t-body); + color: var(--text-on-dark); +} +.feature-list--light li { color: var(--text-on-light); } + +.li-mark { + width: 12px; + height: 12px; + color: var(--gold); + flex-shrink: 0; + margin-top: 7px; +} +.li-mark--dim { color: var(--text-faint-on-light); } .feature-visual { display: flex; justify-content: center; - position: relative; + align-items: center; } -/* Colored backgrounds behind feature phones */ -.feature:nth-child(1) .feature-visual::before { - content: ''; - position: absolute; - width: 250px; - height: 250px; - background: var(--color-primary); - border-radius: 50%; - filter: blur(80px); - opacity: 0.2; +@media (min-width: 1024px) { + .feature { + grid-template-columns: 1fr 1fr; + gap: var(--s-8); + padding: var(--s-8) 0; + } + .feature--right .feature-content { order: 2; } + .feature--right .feature-visual { order: 1; } } -.feature:nth-child(2) .feature-visual::before { - content: ''; - position: absolute; - width: 250px; - height: 250px; - background: var(--color-purple); - border-radius: 50%; - filter: blur(80px); - opacity: 0.2; +/* UI mock card (residences / contractors / docs panels) */ +.ui-card { + width: 100%; + max-width: 460px; + background: linear-gradient(180deg, rgba(245, 242, 234, 0.04), rgba(245, 242, 234, 0.01)); + border: 1px solid var(--border-on-dark); + border-radius: var(--r-5); + padding: var(--s-5); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} +.ui-card-head { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--s-4); +} +.ui-card-eyebrow { + font-size: var(--t-xs); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-muted-on-dark); +} +.ui-card-tag { + font-size: var(--t-xs); + font-weight: 600; + color: var(--gold); + background: rgba(252, 206, 56, 0.14); + padding: 2px 10px; + border-radius: var(--r-pill); } -.feature:nth-child(3) .feature-visual::before { - content: ''; - position: absolute; - width: 250px; - height: 250px; - background: var(--color-teal); - border-radius: 50%; - filter: blur(80px); - opacity: 0.2; +.ui-row { + display: flex; + align-items: center; + gap: var(--s-3); + padding: var(--s-3) 0; + border-top: 1px solid var(--border-on-dark); +} +.ui-row:first-of-type { border-top: 0; } +.ui-row-body { flex: 1; min-width: 0; } +.ui-row-body strong { + display: block; + font-size: var(--t-sm); + font-weight: 600; + color: var(--text-on-dark); + margin-bottom: 2px; +} +.ui-row-body small { + display: block; + font-size: 0.8125rem; + color: var(--text-muted-on-dark); } -.feature:nth-child(4) .feature-visual::before { - content: ''; - position: absolute; - width: 250px; - height: 250px; - background: var(--color-accent); - border-radius: 50%; - filter: blur(80px); - opacity: 0.2; +.ui-row-hex { + width: 30px; + height: 26px; + flex-shrink: 0; + color: rgba(252, 206, 56, 0.46); +} +.ui-row-hex--filled { + color: var(--gold); + filter: drop-shadow(0 6px 10px rgba(252, 206, 56, 0.14)); } -.feature-visual .phone-frame { - width: 260px; - height: 540px; - border-radius: 40px; +.ui-row-pill { + font-size: var(--t-xs); + font-weight: 600; + padding: 4px 10px; + border-radius: var(--r-pill); + background: rgba(245, 242, 234, 0.08); + color: var(--text-muted-on-dark); +} +.ui-row-pill--warn { background: rgba(245, 166, 35, 0.18); color: var(--gold); } +.ui-row-pill--ok { background: rgba(252, 206, 56, 0.16); color: var(--gold); } + +.fav { color: var(--gold); margin-left: 4px; } + +/* Warranty badges */ +.warranty-badge { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 50px; + height: 28px; + border-radius: var(--r-2); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.04em; + text-transform: uppercase; +} +.warranty-badge--active { background: rgba(252, 206, 56, 0.16); color: var(--gold); } +.warranty-badge--soon { background: rgba(245, 166, 35, 0.22); color: #FFC97A; } +.warranty-badge--doc { background: rgba(245, 242, 234, 0.10); color: var(--text-on-dark); } + +/* Kanban mock */ +.kanban { + display: grid; + grid-template-columns: repeat(5, minmax(140px, 1fr)); + gap: var(--s-3); + width: 100%; + overflow-x: auto; + padding-bottom: var(--s-3); + scrollbar-width: thin; +} +.kanban-col { + background: rgba(245, 242, 234, 0.03); + border: 1px solid var(--border-on-dark); + border-radius: var(--r-4); + padding: var(--s-3); + display: flex; + flex-direction: column; + gap: var(--s-2); + min-width: 140px; +} +.kanban-col-label { + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted-on-dark); + padding-bottom: var(--s-2); +} +.kanban-col-label--overdue { color: #FF8584; } +.kanban-col-label--inprogress { color: var(--gold); } +.kanban-col-label--done { color: var(--gold); } + +.kanban-card { + background: var(--midnight); + border: 1px solid var(--border-on-dark); + border-radius: var(--r-3); + padding: var(--s-3); + font-size: 0.8125rem; + font-weight: 500; + color: var(--text-on-dark); + display: flex; + align-items: center; + gap: var(--s-2); + line-height: 1.3; +} +.kanban-card--inprogress { border-color: rgba(252, 206, 56, 0.35); } +.kanban-card--done { + background: linear-gradient(180deg, rgba(252, 206, 56, 0.16), rgba(252, 206, 56, 0.04)); + border-color: rgba(252, 206, 56, 0.32); + color: var(--pollen); } -.feature-visual .phone-frame::before { - width: 90px; - height: 24px; -} - -.feature-visual .phone-screen { - border-radius: 32px; -} - -/* =================================== - Platforms Section - =================================== */ -.platforms { - padding: var(--space-4xl) 0; - background: var(--gradient-dark); - position: relative; +/* -------------------- Comb (completion grid) -------------------- */ +.comb { + background: var(--cream); + color: var(--text-on-light); + padding: var(--s-9) 0; overflow: hidden; } +.comb-container { + display: grid; + grid-template-columns: 1fr; + gap: var(--s-7); + align-items: center; +} +.comb-copy .eyebrow { color: var(--amber); } -.platforms::before { - content: ''; - position: absolute; - inset: 0; - background: var(--gradient-mesh); - opacity: 0.5; +.comb-stats { + display: flex; + gap: var(--s-7); + margin-top: var(--s-5); + flex-wrap: wrap; +} +.comb-stat-num { + display: block; + font-size: clamp(1.75rem, 3vw, 2.5rem); + font-weight: 800; + letter-spacing: -0.02em; + color: var(--midnight); +} +.comb-stat-label { + display: block; + font-size: var(--t-sm); + color: var(--text-muted-on-light); } -.platforms-content { - position: relative; - z-index: 1; - text-align: center; - max-width: 600px; - margin: 0 auto var(--space-3xl); -} - -.section-title { - font-size: var(--text-h1); - font-weight: 700; - margin-bottom: var(--space-sm); - color: #fff; -} - -.section-subtitle { - font-size: var(--text-body); - color: rgba(255, 255, 255, 0.7); -} - -.platforms-visual { - position: relative; - z-index: 1; -} - -.device-showcase { +.comb-visual { display: flex; justify-content: center; - align-items: flex-end; - gap: var(--space-3xl); + align-items: center; +} +.comb-grid { + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 6px; + max-width: 480px; + width: 100%; +} +.comb-cell { + aspect-ratio: 1 / 0.866; + clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); + background: rgba(26, 26, 34, 0.08); + transition: background 0.4s ease; +} +.comb-cell.is-filled { background: var(--gold); } +.comb-cell.is-faint { background: rgba(252, 206, 56, 0.32); } + +@media (min-width: 1024px) { + .comb-container { grid-template-columns: 1fr 1fr; gap: var(--s-9); } } -.device-showcase .phone-mockup { - text-align: center; +/* -------------------- Sharing -------------------- */ +.sharing { + background: var(--cream); + color: var(--text-on-light); + padding: var(--s-9) 0; + overflow: hidden; } - -.device-showcase .phone-frame { - width: 240px; - height: 500px; - border-radius: 36px; +.sharing .eyebrow { color: var(--amber); } +.sharing-container { + display: grid; + grid-template-columns: 1fr; + gap: var(--s-7); + align-items: center; } +.sharing-visual { display: flex; justify-content: center; } -.device-showcase .phone-frame::before { - width: 80px; - height: 22px; -} - -.device-showcase .phone-screen { - border-radius: 30px; -} - -.device-label { - display: inline-block; - margin-top: var(--space-md); - padding: var(--space-xs) var(--space-sm); - background: rgba(255, 255, 255, 0.1); - border-radius: var(--radius-xl); - font-size: var(--text-small); - font-weight: 600; - color: rgba(255, 255, 255, 0.9); -} - -/* =================================== - CTA Section - =================================== */ -.cta { - padding: var(--space-4xl) 0; - background: var(--gradient-cta); - text-align: center; +.share-card { + width: 100%; + max-width: 380px; + background: var(--midnight); + color: var(--text-on-dark); + border-radius: var(--r-5); + padding: var(--s-6); + box-shadow: var(--shadow-deep); + border: 1px solid var(--border-on-dark-strong); position: relative; overflow: hidden; } - -.cta::before { - content: ''; +.share-card::before { + content: ""; position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 50%); - animation: rotate 20s linear infinite; + top: -40px; + right: -40px; + width: 180px; + height: 180px; + border-radius: 50%; + background: radial-gradient(circle, rgba(252, 206, 56, 0.22) 0%, transparent 70%); } - -@keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.cta-content { +.share-card-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--s-4); + margin-bottom: var(--s-5); position: relative; - z-index: 1; - max-width: 600px; - margin: 0 auto; +} +.share-card-head strong { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--text-on-dark); } +.share-card-head small { display: block; font-size: var(--t-sm); color: var(--text-muted-on-dark); } +.share-card-tag { + flex-shrink: 0; + display: inline-flex; + align-items: center; + min-height: 28px; + padding: 0 10px; + border-radius: var(--r-pill); + background: rgba(252, 206, 56, 0.14); + border: 1px solid rgba(252, 206, 56, 0.24); + font-size: var(--t-xs); + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gold); } +.share-code { + display: flex; + flex-direction: column; + gap: 4px; + padding: var(--s-4); + margin-bottom: var(--s-4); + background: rgba(252, 206, 56, 0.1); + border: 1px dashed rgba(252, 206, 56, 0.4); + border-radius: var(--r-3); + position: relative; +} +.share-code-label { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--gold); +} +.share-code-value { + font-size: 1.5rem; + font-weight: 700; + letter-spacing: 0.08em; + color: var(--text-on-dark); + font-feature-settings: "tnum"; +} + +.share-people { + display: flex; + flex-direction: column; + gap: var(--s-3); +} +.share-person { + display: flex; + align-items: center; + gap: var(--s-3); + font-size: var(--t-sm); + color: var(--text-on-dark); +} +.share-avatar { + width: 32px; + height: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + font-size: 0.8125rem; + font-weight: 700; + color: var(--midnight); + flex-shrink: 0; +} +.share-avatar--a { background: var(--gold); } +.share-avatar--b { background: var(--pollen); } +.share-avatar--c { background: #E8A765; } + +@media (min-width: 1024px) { + .sharing-container { grid-template-columns: 1fr 1fr; gap: var(--s-9); } + .sharing-visual { justify-content: flex-end; } +} + +/* -------------------- Pricing -------------------- */ +.pricing { + background: var(--midnight); + padding: var(--s-9) 0; + text-align: center; + position: relative; +} +.pricing .section-title { color: var(--text-on-dark); } +.pricing .section-sub { color: var(--text-muted-on-dark); margin-inline: auto; margin-bottom: var(--s-8); } +.pricing .eyebrow { color: var(--gold); } + +.pricing-grid { + display: grid; + grid-template-columns: 1fr; + gap: var(--s-5); + max-width: 920px; + margin-inline: auto; + text-align: left; +} + +.price-card { + background: linear-gradient(180deg, rgba(245, 242, 234, 0.04), rgba(245, 242, 234, 0.01)); + border: 1px solid var(--border-on-dark); + border-radius: var(--r-5); + padding: var(--s-7); + display: flex; + flex-direction: column; + gap: var(--s-5); + position: relative; +} +.price-card--pro { + background: linear-gradient(180deg, rgba(252, 206, 56, 0.10), rgba(252, 206, 56, 0.02)); + border-color: rgba(252, 206, 56, 0.4); + box-shadow: 0 32px 64px rgba(252, 206, 56, 0.10); +} + +.price-card-tag { + position: absolute; + top: -12px; + right: var(--s-5); + background: var(--gold); + color: var(--midnight); + font-size: var(--t-xs); + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + padding: 4px 10px; + border-radius: var(--r-pill); +} + +.price-card-header { + display: flex; + flex-direction: column; + gap: var(--s-2); + padding-bottom: var(--s-4); + border-bottom: 1px solid var(--border-on-dark); +} +.price-card-name { + font-size: 1rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--gold); +} +.price-card-price { + font-size: clamp(1.375rem, 2.4vw, 1.875rem); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.1; + color: var(--text-on-dark); +} +.price-card-line { + font-size: var(--t-sm); + color: var(--text-muted-on-dark); +} + +.price-card-list { + display: flex; + flex-direction: column; + gap: var(--s-3); +} +.price-card-list li { + display: flex; + align-items: flex-start; + gap: var(--s-3); + font-size: var(--t-body); + color: var(--text-on-dark); + line-height: 1.5; +} + +@media (min-width: 768px) { + .pricing-grid { grid-template-columns: 1fr 1fr; } +} + +/* -------------------- Final CTA -------------------- */ +.cta-final { + position: relative; + background: linear-gradient(180deg, var(--midnight) 0%, var(--deep) 100%); + padding: var(--s-10) 0; + overflow: hidden; + text-align: center; +} +.cta-glow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 720px; + height: 720px; + border-radius: 50%; + background: radial-gradient(circle, rgba(252, 206, 56, 0.20) 0%, transparent 60%); + pointer-events: none; +} + +.cta-container { + position: relative; + max-width: 640px; + margin-inline: auto; +} +.cta-container .eyebrow { color: var(--gold); } .cta-title { - font-size: var(--text-h1); + font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 800; - color: white; - margin-bottom: var(--space-sm); + line-height: 1.1; + letter-spacing: -0.025em; + margin-bottom: var(--s-4); + color: var(--text-on-dark); } - -.cta-subtitle { - font-size: var(--text-body); - color: rgba(255, 255, 255, 0.85); - margin-bottom: var(--space-xl); +.cta-sub { + font-size: var(--t-lead); + color: var(--text-muted-on-dark); + margin-bottom: var(--s-6); } - .cta-buttons { display: flex; flex-wrap: wrap; + gap: var(--s-3); justify-content: center; - gap: var(--space-sm); - margin-bottom: var(--space-lg); + margin-bottom: var(--s-4); } - .cta-trust { - font-size: var(--text-small); - color: rgba(255, 255, 255, 0.6); + font-size: var(--t-sm); + color: var(--text-faint-on-dark); } -/* =================================== - Footer - =================================== */ +/* -------------------- Footer -------------------- */ .footer { - padding: var(--space-3xl) 0 var(--space-lg); - background: var(--color-bg-darker); - color: rgba(255, 255, 255, 0.7); + background: var(--deep); + color: var(--text-muted-on-dark); + padding: var(--s-8) 0 var(--s-5); + border-top: 1px solid var(--border-on-dark); } - -.footer-content { +.footer-container { display: grid; - grid-template-columns: 1fr 2fr; - gap: var(--space-3xl); - margin-bottom: var(--space-2xl); + grid-template-columns: 1fr; + gap: var(--s-7); + margin-bottom: var(--s-7); } - -.footer-brand .logo-text { - font-size: 1.5rem; - margin-bottom: var(--space-xs); - display: block; +.footer-brand-row { + display: inline-flex; + align-items: center; + gap: var(--s-2); + margin-bottom: var(--s-3); } - .footer-tagline { - font-size: var(--text-small); - color: rgba(255, 255, 255, 0.5); + font-size: var(--t-sm); + color: var(--text-muted-on-dark); + max-width: 28ch; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); - gap: var(--space-lg); + gap: var(--s-5); } - -.footer-column h4 { - font-size: var(--text-small); - font-weight: 600; - margin-bottom: var(--space-sm); - color: #fff; +.footer-col h4 { + font-size: var(--t-xs); + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--text-on-dark); + margin-bottom: var(--s-3); } - -.footer-column a { +.footer-col a { display: block; - font-size: var(--text-small); - color: rgba(255, 255, 255, 0.5); - margin-bottom: var(--space-xs); - transition: var(--transition); + font-size: var(--t-sm); + color: var(--text-muted-on-dark); + padding: var(--s-1) 0; + transition: color 0.15s ease; } - -.footer-column a:hover { - color: var(--color-primary-light); +.footer-col a:hover { color: var(--gold); } +.footer-static { + display: block; + font-size: var(--t-sm); + color: var(--text-faint-on-dark); + padding: var(--s-1) 0; } .footer-bottom { display: flex; - justify-content: space-between; + flex-direction: column; + gap: var(--s-2); + padding-top: var(--s-5); + border-top: 1px solid var(--border-on-dark); + font-size: var(--t-xs); + color: var(--text-faint-on-dark); +} +.brand-line { + display: inline-flex; align-items: center; - padding-top: var(--space-lg); - border-top: 1px solid rgba(255, 255, 255, 0.1); + gap: var(--s-2); +} +.brand-line-hex { + width: 8px; + height: 8px; + color: var(--gold); } -.copyright, .made-by { - font-size: var(--text-small); - color: rgba(255, 255, 255, 0.4); -} - -/* =================================== - Animations - =================================== */ -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(30px); +@media (min-width: 768px) { + .footer-container { + grid-template-columns: 1.4fr 2fr; + gap: var(--s-8); } - to { - opacity: 1; - transform: translateY(0); - } -} - -.animate-in { - animation: fadeInUp 0.8s ease forwards; -} - -/* =================================== - Responsive Styles - =================================== */ -@media (max-width: 1024px) { - .hero-container { - grid-template-columns: 1fr; - text-align: center; - } - - .hero-content { - max-width: 100%; - } - - .hero-cta { - justify-content: center; - } - - .hero-visual { - order: -1; - margin-bottom: var(--space-lg); - } - - .phone-frame { - width: 240px; - height: 500px; - } - - .feature { - grid-template-columns: 1fr; - text-align: center; - gap: var(--space-xl); - } - - .feature-content { - max-width: 100%; - } - - .feature-right .feature-content, - .feature-right .feature-visual { - order: unset; - } - - .highlights-grid { - grid-template-columns: 1fr; - max-width: 400px; - margin: 0 auto; - } - - .footer-content { - grid-template-columns: 1fr; - text-align: center; - } - - .footer-links { - grid-template-columns: repeat(3, 1fr); - text-align: left; - } - .footer-bottom { - flex-direction: column; - gap: var(--space-xs); - } -} - -@media (max-width: 768px) { - .nav-links { - display: none; - position: absolute; - top: 100%; - left: 0; - right: 0; - flex-direction: column; - background: var(--color-bg-dark); - padding: var(--space-md); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - gap: var(--space-sm); - } - - .nav-links.active { - display: flex; - } - - .nav-cta { - display: none; - } - - .nav-toggle { - display: flex; - } - - .hero { - padding: calc(70px + var(--space-2xl)) 0 var(--space-2xl); - } - - .hero-cta { - flex-direction: column; - } - - .hero-cta .btn { - width: 100%; - } - - .device-showcase { - flex-direction: column; + flex-direction: row; + justify-content: space-between; align-items: center; - gap: var(--space-xl); - } - - .footer-links { - grid-template-columns: 1fr; - text-align: center; - } - - .cta-buttons { - flex-direction: column; - } - - .cta-buttons .btn { - width: 100%; } } -@media (max-width: 480px) { - .phone-frame { - width: 220px; - height: 460px; - border-radius: 36px; - } - - .phone-frame::before { - width: 70px; - height: 20px; - } - - .phone-screen { - border-radius: 28px; - } - - .device-showcase .phone-frame { - width: 200px; - height: 420px; +/* -------------------- Reduced motion -------------------- */ +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + .reveal { opacity: 1; transform: none; transition: none; } + .iphone { animation: none; } + *, *::before, *::after { + animation-duration: 0.01ms !important; + transition-duration: 0.01ms !important; } } + +/* -------------------- Focus visibility -------------------- */ +a:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 2px; + border-radius: 2px; +} diff --git a/static/index.html b/static/index.html index cca0394..65d5f4c 100644 --- a/static/index.html +++ b/static/index.html @@ -3,19 +3,23 @@ - honeyDue - Home Maintenance & Property Management App - + honeyDue — Home maintenance, organized. + + + - - - + + + + - - + + + @@ -26,338 +30,596 @@ - + + - -