diff --git a/docs/index.html b/docs/index.html index 7030280..184463d 100755 --- a/docs/index.html +++ b/docs/index.html @@ -42,33 +42,33 @@ } [data-theme="dark"] { - --bg: #111015; - --bg-alt: #1A1920; - --surface: #222130; - --border: #33323E; - --text-1: #F0EFF5; - --text-2: #A09FB0; - --text-3: #706F80; - --accent: #A78BFA; - --accent-hover: #8B5CF6; - --accent-soft: #2D2250; - --accent-glow: rgba(167, 139, 250, 0.15); - --code-bg: #0D0C12; - --code-text: #C8C7D3; - --shadow-card: 0 1px 3px rgba(0,0,0,0.2); - --shadow-lg: 0 8px 32px rgba(0,0,0,0.35); - --shadow-hero: 0 20px 60px rgba(0,0,0,0.4); + --bg: #1A1A18; + --bg-alt: #141413; + --surface: #222220; + --border: #2A2A28; + --text-1: #F5F4F1; + --text-2: #AEADB0; + --text-3: #8E8D89; + --accent: #818CF8; + --accent-hover: #6366F1; + --accent-soft: #2E2D5B; + --accent-glow: rgba(129, 140, 248, 0.15); + --code-bg: #141413; + --code-text: #E2E1DC; + --shadow-card: 0 1px 3px rgba(0,0,0,0.25); + --shadow-lg: 0 8px 24px rgba(0,0,0,0.45); + --shadow-hero: 0 20px 60px rgba(0,0,0,0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --bg: #111015; --bg-alt: #1A1920; --surface: #222130; --border: #33323E; - --text-1: #F0EFF5; --text-2: #A09FB0; --text-3: #706F80; - --accent: #A78BFA; --accent-hover: #8B5CF6; --accent-soft: #2D2250; - --accent-glow: rgba(167, 139, 250, 0.15); - --code-bg: #0D0C12; --code-text: #C8C7D3; - --shadow-card: 0 1px 3px rgba(0,0,0,0.2); --shadow-lg: 0 8px 32px rgba(0,0,0,0.35); - --shadow-hero: 0 20px 60px rgba(0,0,0,0.4); + --bg: #1A1A18; --bg-alt: #141413; --surface: #222220; --border: #2A2A28; + --text-1: #F5F4F1; --text-2: #AEADB0; --text-3: #8E8D89; + --accent: #818CF8; --accent-hover: #6366F1; --accent-soft: #2E2D5B; + --accent-glow: rgba(129, 140, 248, 0.15); + --code-bg: #141413; --code-text: #E2E1DC; + --shadow-card: 0 1px 3px rgba(0,0,0,0.25); --shadow-lg: 0 8px 24px rgba(0,0,0,0.45); + --shadow-hero: 0 20px 60px rgba(0,0,0,0.55); } } @@ -113,8 +113,7 @@ /* ===== HERO ===== */ .hero { - padding: 140px 0 100px; - text-align: center; + padding: 140px 0 80px; position: relative; } .hero::before { @@ -124,21 +123,23 @@ pointer-events: none; } .hero > * { position: relative; } + .hero .wrap { display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: center; } + .hero-content { text-align: left; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; background: var(--accent-soft); color: var(--accent); margin-bottom: 24px; } .hero h1 { - font-family: var(--ff-display); font-size: clamp(2.8rem, 7vw, 4.5rem); - font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 20px; + font-family: var(--ff-display); font-size: clamp(2.5rem, 5vw, 3.8rem); + font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; } .hero h1 em { font-style: italic; color: var(--accent); } .hero-sub { - font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--text-2); - max-width: 540px; margin: 0 auto 36px; line-height: 1.7; + font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--text-2); + max-width: 520px; margin: 0 0 36px; line-height: 1.7; } - .hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } + .hero-actions { display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 14px 28px; @@ -155,7 +156,7 @@ .btn-secondary:hover { border-color: var(--text-3); transform: translateY(-1px); } .btn-primary svg, .btn-secondary svg { width: 18px; height: 18px; } .hero-tags { - display: flex; justify-content: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; + display: flex; justify-content: flex-start; gap: 8px; margin-top: 20px; flex-wrap: wrap; } .tag { padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 500; @@ -164,26 +165,16 @@ /* ===== HERO MOCKUP ===== */ .hero-mockup { - margin-top: 72px; position: relative; display: flex; justify-content: center; align-items: flex-end; - gap: 32px; perspective: 1200px; + position: relative; perspective: 1200px; } - .mockup-desktop { - width: 720px; border-radius: 12px; overflow: hidden; + .mockup-tablet { + width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-hero); border: 1px solid var(--border); - transform: rotateY(-2deg) rotateX(2deg); + transform: rotateY(2deg) rotateX(2deg); transition: transform 0.4s ease; } - .mockup-desktop:hover { transform: rotateY(0) rotateX(0); } - .mockup-desktop img { width: 100%; display: block; } - .mockup-phone { - width: 200px; border-radius: 24px; overflow: hidden; - box-shadow: var(--shadow-hero); border: 4px solid var(--text-1); - position: relative; z-index: 2; - transform: rotateY(3deg) rotateX(1deg) translateY(-20px); - transition: transform 0.4s ease; - } - .mockup-phone:hover { transform: rotateY(0) rotateX(0) translateY(-20px); } - .mockup-phone img { width: 100%; display: block; } + .mockup-tablet:hover { transform: rotateY(0) rotateX(0); } + .mockup-tablet img { width: 100%; display: block; } /* ===== FEATURES SHOWCASE ===== */ .showcase { padding: 100px 0; } @@ -313,19 +304,22 @@ .reveal-d3 { transition-delay: 0.3s; } /* ===== RESPONSIVE ===== */ + @media (max-width: 1024px) { + .hero .wrap { grid-template-columns: 1fr; gap: 48px; } + .hero-content { text-align: center; } + .hero-sub { margin: 0 auto 36px; } + .hero-actions { justify-content: center; } + .hero-tags { justify-content: center; } + .mockup-tablet { max-width: 640px; margin: 0 auto; } + } @media (max-width: 900px) { .feat-row { grid-template-columns: 1fr; gap: 32px; } .feat-row.reverse .feat-visual { order: 0; } .feat-mobile-img { width: 120px !important; bottom: -16px; right: -8px; } - .hero-mockup { flex-direction: column; align-items: center; gap: 24px; } - .mockup-desktop { width: 100%; max-width: 560px; transform: none; } - .mockup-phone { width: 160px; transform: none; position: absolute; bottom: -30px; right: 10%; } .phil-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hero { padding: 110px 0 60px; } - .hero-mockup { margin-top: 48px; } - .mockup-phone { width: 130px; right: 4%; } .carousel-item img { height: 360px; } .feat-grid { grid-template-columns: 1fr; } .cta-box { padding: 40px 24px; } @@ -352,37 +346,78 @@
-
Open Source · Self-Hosted · Private
-

Your household,
organized together.

-

Tasks, shopping, meals, calendar, budget — everything your family needs in one place. Self-hosted on your own server. No cloud, no tracking, no subscriptions.

- -
- MIT License - Docker - PWA - No Cloud Required +
+
Open Source · Self-Hosted · Private
+

Your household,
organized together.

+

Tasks, shopping, meals, calendar, budget — everything your family needs in one place. Self-hosted on your own server. No cloud, no tracking, no subscriptions.

+ +
+ MIT License + Docker + PWA + No Cloud Required +
-
- Oikos Dashboard – Desktop -
-
- Oikos Dashboard – Mobile +
+ Oikos Dashboard
+ +
+
+
+ +

Built for real family life

+
+
+
+
+

Shopping Lists

+

Collaborative lists with aisle categories. Import ingredients directly from your meal plans.

+
+
+
+

Budget Tracking

+

Track income and expenses with 13 currency options, recurring entries, monthly trends, and CSV export.

+
+
+
+

Notes

+

Colored sticky notes with Markdown. Perfect for recipes, family memos, and quick reminders.

+
+
+
+

Contacts

+

Shared family contact directory with vCard import and export.

+
+
+
+

Works Everywhere

+

Installable PWA on any device. Offline support, dark mode, fully responsive from phone to desktop.

+
+
+
+

Kanban Board

+

Visual board view for tasks and projects. Drag cards between columns to track progress.

+
+
+
+
+
@@ -427,48 +462,6 @@
- -
-
-
- -

Built for real family life

-
-
-
-
-

Shopping Lists

-

Collaborative lists with aisle categories. Import ingredients directly from your meal plans.

-
-
-
-

Budget Tracking

-

Track income and expenses with 13 currency options, recurring entries, monthly trends, and CSV export.

-
-
-
-

Notes

-

Colored sticky notes with Markdown. Perfect for recipes, family memos, and quick reminders.

-
-
-
-

Contacts

-

Shared family contact directory with vCard import and export.

-
-
-
-

Works Everywhere

-

Installable PWA on any device. Offline support, dark mode, fully responsive from phone to desktop.

-
-
-
-

Kanban Board

-

Visual board view for tasks and projects. Drag cards between columns to track progress.

-
-
-
-
-