diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css index bebf0c1..d9997e7 100644 --- a/frontend/src/pages/LandingPage.css +++ b/frontend/src/pages/LandingPage.css @@ -1,16 +1,16 @@ /* ── Base ──────────────────────────────────────────────── */ :root { --accent: #007acc; - --accent-glow: rgba(0, 122, 204, 0.35); - --accent2: #00c896; - --bg: #0d0d0f; - --bg-card: #131318; - --bg-alt: #0a0a0d; - --border: #1e1e2a; - --text: #e2e2e8; - --text-muted: #7a7a8c; + --bg: #09090b; + --bg-card: #0f0f12; + --bg-alt: #07070a; + --border: #18181f; + --border-hi: #252530; + --text: #d8d8e0; + --text-muted: #72727e; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; + --radius: 3px; } .landing { @@ -30,9 +30,9 @@ align-items: center; justify-content: space-between; padding: 0 40px; - height: 56px; - background: rgba(13, 13, 15, 0.88); - backdrop-filter: blur(12px); + height: 52px; + background: rgba(9, 9, 11, 0.92); + backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } @@ -40,22 +40,23 @@ display: flex; align-items: center; gap: 10px; - font-size: 18px; + font-size: 17px; font-weight: 700; color: var(--text); - letter-spacing: -0.3px; + letter-spacing: -0.2px; + font-family: var(--mono); } .landing-nav-brand svg { - width: 22px; - height: 22px; + width: 20px; + height: 20px; color: var(--accent); } .landing-nav-links { display: flex; align-items: center; - gap: 8px; + gap: 4px; } .nav-link { @@ -65,135 +66,131 @@ padding: 5px 12px; color: var(--text-muted); text-decoration: none; - font-size: 13.5px; - border-radius: 6px; + font-size: 13px; + border-radius: var(--radius); transition: color 0.15s, background 0.15s; } .nav-link svg { - width: 16px; - height: 16px; + width: 15px; + height: 15px; } .nav-link:hover { color: var(--text); - background: rgba(255,255,255,0.06); + background: rgba(255, 255, 255, 0.05); } .nav-btn-primary { - padding: 6px 16px; + padding: 5px 14px; background: var(--accent); color: #fff; text-decoration: none; - font-size: 13.5px; + font-size: 13px; font-weight: 600; - border-radius: 6px; - transition: background 0.15s, box-shadow 0.15s; + border-radius: var(--radius); + transition: background 0.15s; + border: 1px solid rgba(255,255,255,0.1); } .nav-btn-primary:hover { - background: #0990e0; - box-shadow: 0 0 12px var(--accent-glow); + background: #1a8fd1; } /* ── Hero ─────────────────────────────────────────────── */ .landing-hero { - position: relative; - min-height: 88vh; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 48px; + padding: 80px 80px 80px 80px; + max-width: 1200px; + margin: 0 auto; + min-height: 80vh; +} + +.hero-left { + display: flex; + flex-direction: column; + gap: 0; +} + +.hero-eyebrow { display: flex; align-items: center; - justify-content: center; - padding: 80px 40px 60px; - overflow: hidden; + gap: 8px; + margin-bottom: 20px; } -.hero-glow { - position: absolute; - top: -120px; - left: 50%; - transform: translateX(-50%); - width: 700px; - height: 700px; - background: radial-gradient(ellipse, rgba(0,122,204,0.14) 0%, transparent 70%); - pointer-events: none; -} - -.hero-content { - position: relative; - z-index: 2; - max-width: 720px; - text-align: center; -} - -.hero-badge { - display: inline-block; - margin-bottom: 24px; - padding: 4px 14px; - background: rgba(0, 122, 204, 0.12); - border: 1px solid rgba(0, 122, 204, 0.3); - border-radius: 20px; - font-size: 12px; +.eyebrow-tag { + font-family: var(--mono); + font-size: 10px; font-weight: 600; + letter-spacing: 1.2px; color: var(--accent); - letter-spacing: 0.5px; - text-transform: uppercase; + border: 1px solid rgba(0, 122, 204, 0.3); + padding: 2px 7px; + border-radius: 2px; +} + +.eyebrow-dot { + width: 3px; + height: 3px; + background: var(--border-hi); + border-radius: 50%; } .hero-title { - margin: 0 0 20px; - font-size: clamp(36px, 6vw, 64px); + margin: 0 0 16px; + font-size: clamp(32px, 4.5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; - color: #fff; + color: #e8e8f0; } .hero-accent { - background: linear-gradient(90deg, var(--accent), var(--accent2)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--accent); + font-weight: 800; } .hero-subtitle { - margin: 0 0 40px; - font-size: 17px; + margin: 0 0 32px; + font-size: 15.5px; line-height: 1.7; color: var(--text-muted); - max-width: 560px; - margin-left: auto; - margin-right: auto; + max-width: 480px; } .hero-ctas { display: flex; - gap: 14px; - justify-content: center; + gap: 12px; flex-wrap: wrap; + margin-bottom: 28px; } .cta-primary { display: flex; align-items: center; gap: 8px; - padding: 13px 28px; + padding: 11px 24px; background: var(--accent); color: #fff; text-decoration: none; - font-size: 15px; + font-size: 14px; font-weight: 700; - border-radius: 8px; - transition: background 0.15s, box-shadow 0.2s, transform 0.15s; + border-radius: var(--radius); + transition: background 0.15s, transform 0.1s; + border: 1px solid rgba(255,255,255,0.1); } .cta-primary svg { - width: 18px; - height: 18px; + width: 16px; + height: 16px; } .cta-primary:hover { - background: #0990e0; - box-shadow: 0 0 24px var(--accent-glow); + background: #1a8fd1; transform: translateY(-1px); } @@ -201,65 +198,73 @@ display: flex; align-items: center; gap: 8px; - padding: 13px 28px; - background: rgba(255,255,255,0.05); - border: 1px solid var(--border); + padding: 11px 24px; + background: transparent; + border: 1px solid var(--border-hi); color: var(--text); text-decoration: none; - font-size: 15px; + font-size: 14px; font-weight: 600; - border-radius: 8px; - transition: background 0.15s, border-color 0.15s, transform 0.15s; + border-radius: var(--radius); + transition: border-color 0.15s, background 0.15s, transform 0.1s; } .cta-secondary svg { - width: 18px; - height: 18px; + width: 16px; + height: 16px; } .cta-secondary:hover { - background: rgba(255,255,255,0.09); - border-color: #444; + background: rgba(255, 255, 255, 0.04); + border-color: #333; transform: translateY(-1px); } -/* ── Hero decoration (floating chips) ─────────────────── */ -.hero-decoration { - position: absolute; - inset: 0; - pointer-events: none; - z-index: 1; +/* Specs strip */ +.hero-specs { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; } -.deco-chip { - position: absolute; - opacity: 0.04; - animation: floatChip 8s ease-in-out infinite; +.spec-pill { + font-family: var(--mono); + font-size: 11.5px; + color: var(--text-muted); + background: var(--bg-card); + border: 1px solid var(--border); + padding: 3px 8px; + border-radius: 2px; } -.deco-chip:nth-child(1) { top: 8%; left: 5%; width: 64px; } -.deco-chip:nth-child(2) { top: 15%; left: 85%; width: 40px; } -.deco-chip:nth-child(3) { top: 55%; left: 4%; width: 48px; } -.deco-chip:nth-child(4) { top: 70%; left: 88%; width: 56px; } -.deco-chip:nth-child(5) { top: 35%; left: 92%; width: 36px; } -.deco-chip:nth-child(6) { top: 80%; left: 10%; width: 44px; } -.deco-chip:nth-child(7) { top: 25%; left: 2%; width: 32px; } -.deco-chip:nth-child(8) { top: 90%; left: 75%; width: 38px; } -.deco-chip:nth-child(9) { top: 5%; left: 50%; width: 30px; } -.deco-chip:nth-child(10) { top: 60%; left: 95%; width: 42px; } -.deco-chip:nth-child(11) { top: 88%; left: 40%; width: 36px; } -.deco-chip:nth-child(12) { top: 45%; left: 0%; width: 50px; } +.spec-sep { + color: var(--border-hi); + font-size: 11px; +} -@keyframes floatChip { - 0%, 100% { transform: translateY(0) rotate(0deg); } - 50% { transform: translateY(-14px) rotate(8deg); } +/* Hero right — schematic */ +.hero-right { + display: flex; + align-items: center; + justify-content: center; +} + +.schematic-svg { + width: 100%; + max-width: 440px; + height: auto; + border: 1px solid var(--border); + border-radius: 4px; + filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.6)); } /* ── Sections ─────────────────────────────────────────── */ .landing-section { - padding: 80px 40px; - max-width: 1100px; + padding: 80px 80px; + max-width: 1200px; margin: 0 auto; + border-top: 1px solid var(--border); } .landing-section-alt { @@ -270,236 +275,276 @@ padding: 80px 0; } -.landing-section-alt > * { - max-width: 1100px; +.landing-section-alt .section-header, +.landing-section-alt .features-grid { + max-width: 1200px; margin-left: auto; margin-right: auto; - padding-left: 40px; - padding-right: 40px; + padding-left: 80px; + padding-right: 80px; +} + +.section-header { + margin-bottom: 40px; +} + +.section-label { + display: block; + font-family: var(--mono); + font-size: 11px; + color: var(--accent); + letter-spacing: 0.5px; + margin-bottom: 10px; + opacity: 0.7; } .section-title { - margin: 0 0 10px; - font-size: clamp(24px, 4vw, 36px); + margin: 0 0 8px; + font-size: clamp(22px, 3vw, 30px); font-weight: 800; - letter-spacing: -0.8px; - text-align: center; - color: #fff; + letter-spacing: -0.6px; + color: #e8e8f0; } .section-sub { - margin: 0 0 48px; - font-size: 16px; + margin: 0; + font-size: 14.5px; color: var(--text-muted); - text-align: center; + max-width: 480px; + line-height: 1.65; } -/* ── Boards grid ──────────────────────────────────────── */ +/* ── Boards ───────────────────────────────────────────── */ .boards-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); + gap: 16px; } .board-card { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 12px; - padding: 28px 20px 20px; + border-radius: var(--radius); + padding: 24px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 16px; - transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; + transition: border-color 0.2s; + position: relative; +} + +.board-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: var(--accent); + opacity: 0; + transition: opacity 0.2s; + border-radius: var(--radius) var(--radius) 0 0; } .board-card:hover { - border-color: rgba(0, 122, 204, 0.4); - box-shadow: 0 4px 24px rgba(0, 122, 204, 0.1); - transform: translateY(-3px); + border-color: var(--border-hi); +} + +.board-card:hover::before { + opacity: 1; } .board-svg { width: 100%; - max-width: 220px; + max-width: 210px; height: auto; - filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); + filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)); } .board-info { display: flex; flex-direction: column; align-items: center; - gap: 4px; + gap: 5px; + width: 100%; + border-top: 1px solid var(--border); + padding-top: 14px; } .board-name { - font-size: 15px; + font-size: 13.5px; font-weight: 700; color: var(--text); } .board-chip { - font-size: 12px; + font-size: 11px; font-family: var(--mono); color: var(--text-muted); - background: rgba(255,255,255,0.05); - padding: 2px 8px; - border-radius: 4px; } -/* ── Features grid ────────────────────────────────────── */ +/* ── Features ─────────────────────────────────────────── */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 20px; + gap: 1px; + background: var(--border); + border: 1px solid var(--border); + border-radius: var(--radius); + overflow: hidden; } .feature-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: 12px; + background: var(--bg-alt); padding: 28px 24px; - transition: border-color 0.2s, transform 0.2s; + transition: background 0.15s; + border-radius: 0; } .feature-card:hover { - border-color: rgba(0, 122, 204, 0.35); - transform: translateY(-2px); + background: var(--bg-card); } .feature-icon { - width: 44px; - height: 44px; - background: rgba(0, 122, 204, 0.1); - border-radius: 10px; + width: 36px; + height: 36px; display: flex; align-items: center; justify-content: center; - margin-bottom: 16px; + margin-bottom: 14px; color: var(--accent); + border: 1px solid rgba(0, 122, 204, 0.25); + border-radius: 2px; + background: rgba(0, 122, 204, 0.06); } .feature-icon svg { - width: 22px; - height: 22px; + width: 18px; + height: 18px; } .feature-title { - margin: 0 0 8px; - font-size: 15px; + margin: 0 0 7px; + font-size: 14px; font-weight: 700; - color: #fff; + color: #e8e8f0; } .feature-desc { margin: 0; - font-size: 13.5px; + font-size: 13px; line-height: 1.65; color: var(--text-muted); } /* ── Support ──────────────────────────────────────────── */ .landing-support { - background: linear-gradient(135deg, #0d0d0f 0%, #0a1520 100%); + background: var(--bg-alt); border-top: 1px solid var(--border); - text-align: center; - padding: 80px 40px; - max-width: 100%; + padding: 72px 40px; } .support-content { - max-width: 560px; + max-width: 520px; margin: 0 auto; + text-align: center; } .support-icon { display: flex; justify-content: center; - margin-bottom: 20px; - color: #e85d75; - font-size: 0; + margin-bottom: 18px; + color: var(--accent); } .support-icon svg { - width: 44px; - height: 44px; - filter: drop-shadow(0 0 12px rgba(232, 93, 117, 0.5)); + width: 36px; + height: 36px; +} + +.support-title { + margin: 0 0 10px; + font-size: clamp(20px, 2.5vw, 26px); + font-weight: 800; + letter-spacing: -0.5px; + color: #e8e8f0; +} + +.support-sub { + margin: 0 0 28px; + font-size: 14px; + line-height: 1.7; + color: var(--text-muted); } .support-btns { display: flex; - gap: 14px; + gap: 12px; justify-content: center; flex-wrap: wrap; - margin-top: 8px; } .support-btn { display: flex; align-items: center; gap: 8px; - padding: 12px 24px; - font-size: 14px; + padding: 10px 20px; + font-size: 13.5px; font-weight: 600; - border-radius: 8px; + border-radius: var(--radius); text-decoration: none; - transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s; + transition: opacity 0.15s, transform 0.1s; } .support-btn:hover { - opacity: 0.88; + opacity: 0.85; transform: translateY(-1px); } .support-btn-gh { - background: #24292e; - color: #fff; - border: 1px solid #444; -} - -.support-btn-gh:hover { - box-shadow: 0 4px 16px rgba(0,0,0,0.4); + background: #1c2128; + color: #e6edf3; + border: 1px solid #30363d; } .support-btn-pp { - background: #0070ba; + background: #003087; color: #fff; -} - -.support-btn-pp:hover { - box-shadow: 0 4px 16px rgba(0, 112, 186, 0.4); + border: 1px solid rgba(255,255,255,0.1); } .support-btn svg { - width: 18px; - height: 18px; + width: 16px; + height: 16px; flex-shrink: 0; } /* ── Footer ───────────────────────────────────────────── */ .landing-footer { - padding: 32px 40px; + padding: 28px 40px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; + background: var(--bg); } .footer-brand { display: flex; align-items: center; gap: 8px; - font-size: 15px; + font-family: var(--mono); + font-size: 14px; font-weight: 700; color: var(--text-muted); } .footer-brand svg { - width: 18px; - height: 18px; + width: 16px; + height: 16px; color: var(--accent); } @@ -520,15 +565,16 @@ } .footer-copy { - font-size: 12px; - color: #444; + font-size: 11.5px; + color: #333; margin: 0; width: 100%; text-align: center; + font-family: var(--mono); } .footer-copy a { - color: #555; + color: #3a3a3a; text-decoration: none; transition: color 0.15s; } @@ -538,7 +584,39 @@ } /* ── Responsive ───────────────────────────────────────── */ -@media (max-width: 768px) { +@media (max-width: 900px) { + .landing-hero { + grid-template-columns: 1fr; + padding: 60px 32px; + min-height: auto; + gap: 40px; + } + + .hero-right { + order: -1; + } + + .schematic-svg { + max-width: 360px; + } + + .hero-title { + font-size: 36px; + } + + .landing-section, + .landing-support { + padding: 60px 32px; + } + + .landing-section-alt .section-header, + .landing-section-alt .features-grid { + padding-left: 32px; + padding-right: 32px; + } +} + +@media (max-width: 600px) { .landing-nav { padding: 0 20px; } @@ -548,21 +626,26 @@ } .landing-hero { - padding: 60px 20px 40px; - min-height: 70vh; - } - - .hero-title { - font-size: 32px; - } - - .hero-subtitle { - font-size: 15px; + padding: 48px 20px; } .landing-section, .landing-support { - padding: 60px 20px; + padding: 48px 20px; + } + + .landing-section-alt .section-header, + .landing-section-alt .features-grid { + padding-left: 20px; + padding-right: 20px; + } + + .hero-title { + font-size: 30px; + } + + .features-grid { + grid-template-columns: 1fr; } .landing-footer { @@ -570,8 +653,4 @@ flex-direction: column; align-items: flex-start; } - - .footer-links { - gap: 16px; - } }