/* ───────────────────────────────────────── zodiac.css — Zodiac app landing page Depends on: variables.css (tokens) + common.css (header/footer) Mobile-first; non-mobile breakpoints gated on (min-height: 600px), matching the rest of the site. ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --font: 'Inter', system-ui, sans-serif; --font-alt: 'Montserrat Alternates', sans-serif; --font-serif: 'Cormorant', Georgia, 'Times New Roman', serif; } html { scroll-behavior: smooth; background-color: var(--bg); overflow-x: clip; } body { font-family: var(--font); /* No opaque background here: the fixed .zo-bg layer (z-index:-1) holds the base colour + starfield. A body background would paint over it and hide the stars. The base colour lives on . */ background: transparent; color: var(--white); overflow-x: hidden; } /* ── Page width cap ── Content never exceeds the 1440 design width; on wider screens the sections centre and the side gutters grow. The mobile-first side padding inside each section handles everything below 1440. */ #zo-hero, #zo-highlights, #features, #signs, #trust, #faq, #cta, body > footer { max-width: var(--container-width); margin-left: auto; margin-right: auto; } /* ── Starfield background (fixed) ── */ .zo-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); } .zo-stars { position: absolute; inset: 0; opacity: 0.9; animation: zo-stars-in 1s ease-out both; /* whole field fades in over ~1s */ } @keyframes zo-stars-in { from { opacity: 0; } to { opacity: 0.9; } } /* Each star fades out and back in; --o (peak opacity), --d (duration) and a negative animation-delay are set per-star in js/zodiac.js so they twinkle independently at random places. */ .zo-star { position: absolute; border-radius: 50%; background: #ffffff; opacity: var(--o, .5); will-change: opacity; animation: zo-twinkle var(--d, 5s) ease-in-out infinite; } @keyframes zo-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: var(--o, .5); } } /* ── Shared section helpers ── */ .zo-section-head { text-align: center; max-width: 680px; margin: 0 auto; } .zo-eyebrow { font-size: 13px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-secondary); margin-bottom: 20px; } .zo-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 7vw, 54px); line-height: 1.05; letter-spacing: -0.01em; color: var(--color-heading); } .zo-lead { margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--color-text-secondary); } /* ── Buttons ── */ .zo-btn { position: relative; --spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23ffffff'%20d='M12%200C12.6%208%2016%2011.4%2024%2012C16%2012.6%2012.6%2016%2012%2024C11.4%2016%208%2012.6%200%2012C8%2011.4%2011.4%208%2012%200Z'/%3E%3C/svg%3E"); display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: 100px; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; border: 1px solid transparent; transition: background .3s ease, color .3s ease, border-color .3s ease; } /* Three sparkles that softly fade in around the button on hover / press: large top-right, small mid-right, medium bottom-left. */ .zo-btn::after { content: ""; position: absolute; inset: -7px -4px; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s ease; background-image: var(--spark), var(--spark), var(--spark); background-repeat: no-repeat; background-position: right 26px top 0, right 0 top 54%, left 22px bottom 0; background-size: 18px 18px, 11px 11px, 14px 14px; } .zo-btn:hover::after, .zo-btn:focus-visible::after { opacity: 1; transform: scale(1); } /* Primary (light) button: nudge sparkles a touch outward and larger so the white sparkles read against the dark page rather than the light button. */ .zo-btn-primary::after { inset: -10px -7px; background-size: 20px 20px, 13px 13px, 16px 16px; } /* Secondary button uses a different sparkle layout: large top-left, medium bottom-left, medium bottom-right. */ .zo-btn-ghost::after { background-position: left 24px top 0, left 16px bottom 0, right 24px bottom 0; background-size: 18px 18px, 13px 13px, 14px 14px; } /* Primary: light → lavender (hover) → periwinkle (pressed) */ .zo-btn-primary { background: #E8EAF3; color: var(--color-surface); } .zo-btn-primary:hover { background: #C6CBE6; } .zo-btn-primary:active { background: var(--color-brand-secondary); } /* Secondary: outlined → slate (hover) → navy (pressed) */ .zo-btn-ghost { background: transparent; color: var(--color-brand-secondary); border-color: rgba(155,180,255,.2); } .zo-btn-ghost:hover { background: #2E3448; border-color: transparent; } .zo-btn-ghost:active { background: var(--color-surface-brand); border-color: transparent; } /* ═════════════════════════════════════════ 1. HERO ═════════════════════════════════════════ */ #zo-hero { text-align: center; padding: 150px 24px 60px; position: relative; overflow: hidden; } .zo-hero-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .zo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; border: 1px solid rgba(155,180,255,.14); background: rgba(123,155,240,.1); font-size: 16px; font-weight: 400; letter-spacing: 0.02em; color: var(--color-brand-secondary); } .zo-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--aqua)); flex-shrink: 0; } .zo-hero-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 10vw, 80px); line-height: 1.05; letter-spacing: -0.01em; color: var(--color-heading); } .zo-hero-sub { font-size: 18px; line-height: 1.6; color: var(--white); max-width: 576px; } .zo-hero-actions { margin-top: 20px; /* +20px inner gap = 40px below the text (pt-40) */ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* Device cluster (decorative — must not intercept clicks on the buttons, since its glow overlaps the actions area above it) */ .zo-hero-devices { margin-top: 48px; position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none; } .zo-hero-devices::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 115%; max-width: 720px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(118,165,255,.22) 0%, rgba(118,165,255,.07) 40%, transparent 70%); z-index: 0; } .zo-hero-img { position: relative; z-index: 1; display: block; width: 100%; max-width: 600px; height: auto; } @media (min-width: 640px) and (min-height: 600px) { #zo-hero { padding: 170px 48px 80px; } .zo-hero-devices { margin-top: 40px; } .zo-hero-img { max-width: 780px; } } @media (min-width: 1024px) and (min-height: 600px) { #zo-hero { padding: 200px 120px 120px; } .zo-hero-img { max-width: 990px; } } /* ═════════════════════════════════════════ 2. HIGHLIGHTS ═════════════════════════════════════════ */ #zo-highlights { padding: 20px 24px 40px; } .zo-highlights-grid { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; text-align: center; } .zo-highlight { display: flex; flex-direction: column; align-items: center; gap: 16px; } .zo-hl-icon { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(155,180,255,.14); } .zo-hl-icon img { width: 60px; height: 60px; object-fit: contain; display: block; } .zo-hl-text { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); max-width: 200px; } @media (min-width: 640px) and (min-height: 600px) { #zo-highlights { padding: 30px 48px 50px; } .zo-highlights-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } } @media (min-width: 1024px) and (min-height: 600px) { #zo-highlights { padding: 40px 120px 70px; } } /* ═════════════════════════════════════════ 3. MAIN FEATURES ═════════════════════════════════════════ */ #features { padding: 64px 24px; } .zo-feature-grid { margin: 48px auto 0; display: grid; grid-template-columns: 1fr; gap: 20px; } /* The whole card is one bordered container: image on top, text inside below */ /* The whole card is one bordered container: image on top, text inside below */ .zo-feature { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; border-radius: 24px; background: linear-gradient(to top, rgba(123,155,240,.06) 0%, rgba(123,155,240,.02) 100%); border: 1px solid rgba(155,180,255,.2); } .zo-feature-media { display: flex; align-items: flex-start; justify-content: center; width: 100%; min-height: 374px; /* keeps the empty center card the same height */ margin-bottom: 32px; } .zo-feature-img { display: block; width: auto; max-width: 100%; max-height: 374px; height: auto; /* Bottom of the image dissolves to fully transparent at the very bottom edge */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 100%); } .zo-feature-title { font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--color-heading); margin-bottom: 8px; } .zo-feature-desc { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } @media (min-width: 640px) and (min-height: 600px) { #features { padding: 80px 48px; } } @media (min-width: 768px) and (min-height: 600px) { .zo-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1024px) and (min-height: 600px) { #features { padding: 120px 120px; } .zo-feature-grid { margin-top: 64px; gap: 48px; } } /* ═════════════════════════════════════════ 4. TWELVE SIGNS ═════════════════════════════════════════ */ #signs { position: relative; padding: 64px 24px; overflow: hidden; } /* Decorative orbits: two faint rings with small dots that slowly revolve */ .zo-signs-orbits { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(115%, 520px); height: auto; aspect-ratio: 1; opacity: 0.8; pointer-events: none; z-index: 0; overflow: visible; /* don't clip the orbiting dot at the viewBox edges */ } .zo-orbit-ring { stroke: rgba(143,179,255,.14); stroke-width: 1; } .zo-orbit-dot { fill: rgba(184,194,214,.45); } .zo-orbit-dot--blue { fill: var(--blue); } .zo-orbit-grp { transform-box: view-box; /* rotate around the exact viewBox centre */ transform-origin: center; } .zo-orbit-grp--outer { animation: zo-orbit-spin 90s linear infinite; } .zo-orbit-grp--inner { animation: zo-orbit-spin 60s linear infinite reverse; } @keyframes zo-orbit-spin { to { transform: rotate(360deg); } } #signs > .zo-section-head, #signs > .zo-signs-grid { position: relative; z-index: 1; } .zo-signs-grid { list-style: none; margin: 44px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* Sign cards are static (not interactive / not clickable) */ .zo-sign { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(155,180,255,.14); } .zo-sign-glyph { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .zo-sign-glyph img { width: 100%; height: 100%; object-fit: contain; display: block; } .zo-sign-name { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } @media (min-width: 640px) and (min-height: 600px) { #signs { padding: 80px 48px; } .zo-signs-orbits { width: 620px; } .zo-signs-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } } @media (min-width: 1024px) and (min-height: 600px) { #signs { padding: 120px 120px; } .zo-signs-orbits { width: 720px; } .zo-signs-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 64px; } .zo-sign-glyph { width: 60px; height: 60px; } } /* ═════════════════════════════════════════ 5. TRUSTED BY USERS ═════════════════════════════════════════ */ #trust { padding: 64px 24px; } .zo-stats-grid { margin: 44px auto 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .zo-stat-card { padding: 40px 24px; border-radius: 24px; background: linear-gradient(to top, rgba(123,155,240,.06) 0%, rgba(123,155,240,.02) 100%); border: 1px solid rgba(155,180,255,.2); text-align: center; } .zo-stat-num { font-family: var(--font-serif); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--color-heading); margin-bottom: 8px; } .zo-stat-desc { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } @media (min-width: 640px) and (min-height: 600px) { #trust { padding: 80px 48px; } .zo-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1024px) and (min-height: 600px) { #trust { padding: 120px 120px; } .zo-stats-grid { gap: 48px; margin-top: 64px; } } /* ═════════════════════════════════════════ 6. FAQ ═════════════════════════════════════════ */ #faq { padding: 64px 24px; } .zo-faq-list { margin: 44px auto 0; max-width: 800px; display: flex; flex-direction: column; gap: 16px; } .zo-faq-item { border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(155,180,255,.14); overflow: hidden; transition: border-color .35s ease; } /* Expanded: brighter brand-blue outline (background is unchanged) */ .zo-faq-item[open] { border-color: rgba(155,180,255,.45); } /* While closing, fade the outline back so it animates with the collapse */ .zo-faq-item.is-closing { border-color: rgba(155,180,255,.14); } .zo-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.15; color: var(--color-heading); } .zo-faq-item summary::-webkit-details-marker { display: none; } /* Plus / minus toggle icons (crossfade between the two) */ .zo-faq-mark { position: relative; width: 32px; height: 32px; flex-shrink: 0; } .zo-faq-mark::before, .zo-faq-mark::after { content: ''; position: absolute; inset: 0; background: center / contain no-repeat; transition: opacity .3s ease; } .zo-faq-mark::before { background-image: url("../assets/icons/icon_plus_circle.svg"); opacity: 1; } .zo-faq-mark::after { background-image: url("../assets/icons/icon_minus_circle.svg"); opacity: 0; } /* Open → show minus */ .zo-faq-item[open] .zo-faq-mark::before { opacity: 0; } .zo-faq-item[open] .zo-faq-mark::after { opacity: 1; } /* While closing, flip back to plus right away */ .zo-faq-item.is-closing .zo-faq-mark::before { opacity: 1; } .zo-faq-item.is-closing .zo-faq-mark::after { opacity: 0; } /* Animated open/close: collapse the body row from 1fr → 0fr. .zo-faq-inner clips the content so it slides smoothly. */ .zo-faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(0.16, 1, 0.3, 1); } .zo-faq-item[open] .zo-faq-body { grid-template-rows: 1fr; } .zo-faq-item.is-closing .zo-faq-body { grid-template-rows: 0fr; } .zo-faq-inner { overflow: hidden; } .zo-faq-body p { padding: 0 24px 24px; font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); } @media (min-width: 640px) and (min-height: 600px) { #faq { padding: 80px 48px; } } @media (min-width: 1024px) and (min-height: 600px) { #faq { padding: 120px 120px; } } /* ═════════════════════════════════════════ 7. CTA ═════════════════════════════════════════ */ #cta { padding: 20px 24px 80px; } .zo-cta-card { position: relative; overflow: hidden; border-radius: 32px; padding: 44px 28px 0; /* no bottom padding: image hugs the card bottom */ background: radial-gradient(90% 120% at 12% 0%, rgba(118,165,255,.20) 0%, transparent 55%), linear-gradient(155deg, #25325a 0%, var(--color-surface-brand) 52%, #101830 100%); border: 1px solid rgba(143,179,255,.10); display: flex; flex-direction: column; gap: 36px; } .zo-cta-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; } .zo-cta-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px, 7vw, 54px); line-height: 1.05; letter-spacing: -0.01em; color: var(--color-heading); } .zo-cta-sub { font-size: 16px; line-height: 1.6; color: var(--color-text-secondary); max-width: 420px; } .zo-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .zo-cta-note { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-brand-secondary); } .zo-cta-media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .zo-cta-img { display: block; width: 100%; max-width: 460px; height: auto; } @media (min-width: 640px) and (min-height: 600px) { #cta { padding: 30px 48px 100px; } .zo-cta-card { padding: 56px 48px 0; } } @media (min-width: 1024px) and (min-height: 600px) { #cta { padding: 40px 120px 140px; } .zo-cta-card { flex-direction: row; align-items: stretch; padding: 0 0 0 64px; /* left only — image hugs bottom-right corner */ gap: 24px; min-height: 460px; } .zo-cta-copy { flex: 0 0 42%; max-width: 420px; align-self: center; padding: 48px 0; } .zo-cta-media { flex: 1 1 auto; align-items: flex-end; /* pin image to the bottom */ justify-content: flex-end; /* pin image to the right */ } .zo-cta-img { max-width: 620px; } /* Keep the note beside the button (wrapping to 2 lines), not below it */ .zo-cta-actions { flex-wrap: nowrap; } .zo-cta-actions .zo-btn { flex-shrink: 0; } .zo-cta-note { flex: 1 1 auto; min-width: 0; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } .zo-btn, .zo-sign, .zo-faq-body, .zo-faq-mark::before, .zo-faq-mark::after { transition: none; } .zo-orbit-grp--outer, .zo-orbit-grp--inner { animation: none; } .zo-stars { animation: none; } .zo-star { animation: none; opacity: var(--o); } }