/* ========================================================= Astro — Solar Hour · Landing site Visual language ported from DESIGN.md System UI only · no icons · no decoration · type as servant of image ========================================================= */ :root { --sky-top: #241a05; --sky-mid: #3a2a08; --sky-bot: #52400f; --sun: #ffe08a; --fog: #46350f; --text: rgba(255, 255, 255, 0.95); --muted: rgba(255, 255, 255, 0.55); --hair: rgba(255, 255, 255, 0.10); --glass-bg: rgba(0, 0, 0, 0.22); --glass-border: rgba(255, 255, 255, 0.12); --live: #5dffa0; --golden: rgb(255, 184, 51); --blue: rgb(102, 153, 255); --maxw: 1080px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* light-sky text flip — toggled by JS via .bright on */ body.bright { --text: rgba(20, 20, 35, 0.92); --muted: rgba(20, 20, 35, 0.50); --hair: rgba(20, 20, 35, 0.12); --glass-bg: rgba(255, 255, 255, 0.25); --glass-border: rgba(255, 255, 255, 0.60); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; color: var(--text); background: var(--sky-top); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: color 1.5s var(--ease); } /* ---------- live sky ---------- */ .sky { position: fixed; inset: 0; z-index: -2; background: linear-gradient( 180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bot) 100% ); transition: background 2s var(--ease); } /* the sun — a soft radial glow that rides the arc */ .sun { position: fixed; z-index: -1; width: 46vmin; height: 46vmin; border-radius: 50%; background: radial-gradient( circle, var(--sun) 0%, color-mix(in srgb, var(--sun) 45%, transparent) 30%, transparent 68% ); filter: blur(6px); transform: translate(-50%, -50%); transition: background 2s var(--ease); pointer-events: none; will-change: left, top; } /* the plains landscape — the app's real 4-plane SVG, painted with palette colours */ .plains { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; line-height: 0; } .plains svg { display: block; width: 100%; height: auto; aspect-ratio: 3063 / 1160; } .plains svg path { transition: fill 2s var(--ease); will-change: transform; } /* ---------- layout shell ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .label { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); } /* ---------- top bar ---------- */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; backdrop-filter: blur(0px); } .brand { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text); } .nav { display: flex; gap: 26px; align-items: center; } .nav a { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.4s var(--ease); } .nav a:hover { color: var(--text); } /* live badge */ .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 100px; background: var(--glass-bg); border: 0.5px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); animation: pulse 1s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* ---------- hero ---------- */ .hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 28px 80px; } .hero .phase { margin-bottom: 26px; opacity: 0; animation: rise 1.2s var(--ease) 0.1s forwards; } .clock { font-size: clamp(72px, 16vw, 184px); font-weight: 100; line-height: 0.92; letter-spacing: -4px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; justify-content: center; opacity: 0; animation: rise 1.2s var(--ease) 0.22s forwards; } .clock .colon { font-size: 0.62em; margin: 0 0.04em; opacity: 0.7; } .tagline { margin-top: 34px; max-width: 540px; font-size: clamp(18px, 2.4vw, 23px); font-weight: 300; line-height: 1.5; color: var(--text); opacity: 0; animation: rise 1.2s var(--ease) 0.34s forwards; } .sub { margin-top: 16px; max-width: 480px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--muted); opacity: 0; animation: rise 1.2s var(--ease) 0.46s forwards; } .cta-row { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; opacity: 0; animation: rise 1.2s var(--ease) 0.58s forwards; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 100px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease); } .btn-primary { background: var(--text); color: var(--sky-top); } .btn-primary:hover { transform: translateY(-2px); } .btn-ghost { background: var(--glass-bg); border: 0.5px solid var(--glass-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--text); } .btn-ghost:hover { transform: translateY(-2px); } .scroll-hint { margin-top: 64px; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); opacity: 0; animation: rise 1.2s var(--ease) 0.8s forwards, float 2.4s var(--ease) 2s infinite; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ---------- sections ---------- */ section { position: relative; } .section-head { text-align: center; margin-bottom: 64px; } .section-head h2 { margin-top: 16px; font-size: clamp(30px, 5vw, 52px); font-weight: 200; letter-spacing: -1px; line-height: 1.08; } .section-head p { margin: 18px auto 0; max-width: 540px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--muted); } .features { padding: 120px 0; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .card { padding: 30px 26px; border-radius: 22px; background: var(--glass-bg); border: 0.5px solid var(--glass-border); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: transform 0.5s var(--ease), background 2s var(--ease), border-color 2s var(--ease); } .card:hover { transform: translateY(-4px); } .card .num { font-size: 13px; font-weight: 100; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 1px; } .card h3 { margin: 18px 0 10px; font-size: 19px; font-weight: 400; letter-spacing: -0.3px; } .card p { font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--muted); } .card .bar { width: 28px; height: 2px; border-radius: 2px; margin-bottom: 22px; } /* ---------- palette strip ---------- */ .palette { padding: 40px 0 120px; } .swatches { display: flex; height: 220px; border-radius: 22px; overflow: hidden; border: 0.5px solid var(--glass-border); } .swatches span { flex: 1; position: relative; transition: flex 0.5s var(--ease); } .swatches span:hover { flex: 2.4; } .swatches span small { position: absolute; left: 10px; bottom: 12px; font-size: 9px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,0.9); opacity: 0; transition: opacity 0.4s var(--ease); text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .swatches span:hover small { opacity: 1; } /* ---------- stats ---------- */ .stats { padding: 60px 0 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; } .stat .v { font-size: clamp(40px, 7vw, 64px); font-weight: 100; letter-spacing: -2px; font-variant-numeric: tabular-nums; line-height: 1; } .stat .k { margin-top: 12px; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); } /* ---------- closing cta ---------- */ .closing { padding: 140px 0; text-align: center; } .closing h2 { font-size: clamp(34px, 6vw, 68px); font-weight: 100; letter-spacing: -2px; line-height: 1.05; } .closing p { margin: 22px auto 40px; max-width: 440px; font-size: 16px; font-weight: 300; color: var(--muted); line-height: 1.6; } /* ---------- footer ---------- */ footer { border-top: 0.5px solid var(--hair); padding: 40px 0 60px; } .foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; } .foot .links { display: flex; gap: 24px; } .foot a { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: color 0.4s var(--ease); } .foot a:hover { color: var(--text); } .foot small { font-size: 11px; font-weight: 400; letter-spacing: 0.5px; color: var(--muted); } /* ---------- reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .reveal.in { opacity: 1; transform: translateY(0); } /* ---------- legal page ---------- */ .legal { max-width: 720px; margin: 0 auto; padding: 160px 28px 120px; } .legal h1 { font-size: clamp(40px, 8vw, 72px); font-weight: 100; letter-spacing: -3px; line-height: 1; } .legal .updated { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .legal .lede { margin-top: 34px; font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--text); } .legal h2 { margin: 56px 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .legal p { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--text); margin-bottom: 16px; } .legal ul { margin: 4px 0 16px; padding-left: 0; list-style: none; } .legal li { position: relative; padding-left: 22px; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--text); margin-bottom: 10px; } .legal li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--muted); } .legal a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .legal .back { display: inline-block; margin-top: 60px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-decoration: none; } .legal .back:hover { color: var(--text); } /* ---------- responsive ---------- */ @media (max-width: 820px) { .grid { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } .nav .navlink { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }