/* ============================================================ Horus marketing site — styles Vanilla rebuild of the approved prototype. Three themes (blue / red / teal) switched via [data-theme] on . ============================================================ */ /* ---------- Themes / tokens ---------- */ :root, :root[data-theme="blue"] { --primary: #2f7bff; --primary-2: #7c4dff; --accent: #22d3ee; --bg-deep: #07080f; --panel: #0d0e1a; --elev: #14162a; --border: #26305a; --text: #e8eaf6; --muted: #8b93bd; --on-accent: #ffffff; --fog: #5a4bff; } :root[data-theme="red"] { --primary: #f43f5e; --primary-2: #ff7a45; --accent: #ffb199; --bg-deep: #0a0506; --panel: #140a0b; --elev: #1e0e10; --border: #5a2630; --text: #f6e6e8; --muted: #b07d84; --on-accent: #ffffff; --fog: #ff5a5f; } :root[data-theme="teal"] { --primary: #2dd4bf; --primary-2: #34d399; --accent: #67e8f9; --bg-deep: #04100e; --panel: #071612; --elev: #0d221c; --border: #164a3f; --text: #d8fbf1; --muted: #6fae9f; --on-accent: #04100e; --fog: #2dd4bf; } /* fixed (non-theme) */ :root { --success: #34d399; --warning: #fbbf24; --danger: #f43f5e; --off: #565f8a; --page: #05060c; --maxw: 1180px; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--page); color: var(--text); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; overflow-x: hidden; min-height: 100vh; position: relative; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: var(--primary); color: #fff; } img { max-width: 100%; display: block; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* themed transition helper */ .themed { transition: background-color .7s ease, border-color .7s ease, color .7s ease, box-shadow .7s ease; } /* focus ring — accessibility */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, .faq-q:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--elev); color: var(--text); padding: 12px 18px; border-radius: 0 0 10px 0; font-weight: 700; } .skip-link:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Keyframes ---------- */ @keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-26px) scale(1.2); } 100% { transform: translate(0,0) scale(1); } } @keyframes drift2 { 0% { transform: translate(0,0) scale(1.15); } 50% { transform: translate(-34px,22px) scale(1); } 100% { transform: translate(0,0) scale(1.15); } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes barPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } } /* ---------- Ambient background ---------- */ .bg-fixed { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 700px at 50% -8%, var(--bg-deep), #05060c 72%); } .blob { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; } .blob-a { left: -140px; top: -80px; width: 560px; height: 560px; background: radial-gradient(circle, var(--fog), transparent 66%); filter: blur(60px); opacity: .28; animation: drift 20s ease-in-out infinite; } .blob-b { right: -160px; top: 36%; width: 520px; height: 520px; background: radial-gradient(circle, var(--primary), transparent 70%); filter: blur(70px); opacity: .16; animation: drift2 26s ease-in-out infinite; } .page-wrap { position: relative; z-index: 1; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(12px); background: #07080fcc; border-bottom: 1px solid var(--border); } .nav-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 13px 26px; } .brand { display: flex; align-items: center; gap: 11px; color: inherit; } .brand:hover { color: inherit; } .brand .mark { color: var(--primary); filter: drop-shadow(0 0 8px var(--primary)); display: flex; } .brand .name { font: 800 20px/1 'Baloo 2', sans-serif; letter-spacing: .5px; } .nav-links { margin-left: 14px; display: flex; gap: 20px; font-size: 14px; font-weight: 600; color: var(--muted); } .nav-links a { color: inherit; } .nav-links a:hover { color: var(--text); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* theme picker */ .theme-picker { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 999px; background: var(--elev); border: 1px solid var(--border); } .theme-auto { font: 700 10px/1 'Baloo 2', sans-serif; letter-spacing: 1px; padding: 5px 9px; border-radius: 999px; border: none; cursor: pointer; background: transparent; color: var(--muted); } .theme-auto.active { background: var(--primary); color: var(--on-accent); } .swatch { position: relative; width: 16px; height: 16px; border-radius: 50%; border: none; cursor: pointer; padding: 0; } .swatch[data-theme="blue"] { background: #2f7bff; } .swatch[data-theme="red"] { background: #f43f5e; } .swatch[data-theme="teal"] { background: #2dd4bf; } .swatch.active::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #fff; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 800 14px/1 'Baloo 2', sans-serif; border-radius: 12px; cursor: pointer; border: 1px solid transparent; min-height: 44px; padding: 0 18px; text-align: center; } .btn-primary { color: var(--on-accent); background: linear-gradient(180deg, var(--primary-2), var(--primary)); box-shadow: 0 8px 20px -8px var(--primary); } .btn-primary:hover { color: var(--on-accent); filter: brightness(1.08); } .btn-ghost { color: #c7cdf0; background: transparent; border: 1px solid var(--border); } .btn-ghost:hover { color: var(--text); background: var(--elev); } .btn-elev { color: var(--text); background: var(--elev); border: 1px solid var(--border); } .btn-elev:hover { color: var(--text); filter: brightness(1.12); } .btn-discord { color: #fff; background: #5865f2; border: 1px solid transparent; box-shadow: 0 8px 20px -8px #5865f2; } .btn-discord:hover { color: #fff; filter: brightness(1.08); } .btn-discord svg { width: 18px; height: 18px; } .btn-lg { font-size: 17px; min-height: 56px; padding: 0 26px; border-radius: 13px; } /* mobile nav toggle */ .nav-toggle { display: none; margin-left: auto; background: var(--elev); border: 1px solid var(--border); color: var(--text); border-radius: 10px; width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center; } .nav-toggle svg { width: 22px; height: 22px; } /* ---------- Layout helpers ---------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: 50px 26px; } .section-narrow { max-width: 1020px; } .section-center { text-align: center; } .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--primary-2); } .h2 { font: 800 40px/1.1 'Baloo 2', sans-serif; margin: 12px 0 0; } .lead { color: #a8b0d8; font-size: 16px; line-height: 1.6; } .head-block { text-align: center; margin-bottom: 38px; } /* ---------- Hero ---------- */ .hero { max-width: var(--maxw); margin: 0 auto; padding: 76px 26px 30px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--elev); border: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--primary-2); text-transform: uppercase; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); } .hero h1 { font: 800 62px/1.02 'Baloo 2', sans-serif; letter-spacing: -.5px; margin: 20px 0 0; } .hero h1 .accent { color: var(--primary); } .hero p { font-size: 18px; line-height: 1.6; color: #a8b0d8; margin: 22px 0 0; max-width: 520px; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .ticks { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 13px; color: var(--muted); } /* hero app mock */ .mock { position: relative; animation: floaty 7s ease-in-out infinite; } .mock-glow { position: absolute; inset: -30px; border-radius: 30px; background: radial-gradient(circle, var(--primary), transparent 68%); filter: blur(40px); opacity: .32; } .mock-win { position: relative; border-radius: 16px; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border); box-shadow: 0 40px 90px -30px #000; } .mock-title { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); } .mock-title .chip { width: 15px; height: 15px; border-radius: 5px; background: linear-gradient(150deg, var(--primary-2), var(--accent)); } .mock-bar { height: 3px; background: linear-gradient(90deg, var(--primary-2), var(--primary), var(--accent)); animation: barPulse 3.5s ease-in-out infinite; } .mock-body { padding: 18px; } .mock-head { display: flex; align-items: center; gap: 12px; } .mock-head .logo { color: var(--primary); filter: drop-shadow(0 0 10px var(--primary)); display: flex; } .mock-head .ttl { font: 800 20px/1 'Baloo 2', sans-serif; } .mock-head .sub { font-size: 9px; letter-spacing: 2px; color: var(--primary-2); font-weight: 700; margin-top: 3px; } .mock-badge { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: linear-gradient(180deg, var(--primary-2), var(--primary)); font-size: 10px; font-weight: 800; color: var(--on-accent); } .mock-tabs { display: flex; gap: 6px; margin-top: 15px; padding: 5px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); } .mock-tab { flex: 1; text-align: center; padding: 10px 0; border-radius: 9px; font: 800 13px/1 'Baloo 2', sans-serif; } .mock-tab.on { color: var(--on-accent); background: linear-gradient(180deg, var(--primary-2), var(--primary)); } .mock-tab.off { color: var(--muted); border: 1px solid var(--border); } .mock-select { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 13px; border-radius: 10px; background: var(--elev); border: 1px solid var(--border); font-size: 13px; color: var(--text); } .mock-select .caret { margin-left: auto; color: var(--muted); } .mock-start { margin-top: 11px; height: 50px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 17px/1 'Baloo 2', sans-serif; color: var(--on-accent); background: linear-gradient(180deg, var(--primary-2), var(--primary)); box-shadow: 0 10px 24px -8px var(--primary); } .mock-start .key { font-size: 10px; padding: 3px 7px; border-radius: 5px; background: #0000002e; } .mock-log { margin-top: 12px; font-family: 'Cascadia Code', monospace; font-size: 11px; line-height: 1.8; background: #00000055; border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; } .mock-log .ok { color: var(--success); } .mock-log .act { color: var(--primary); } .mock-log .dim { color: var(--muted); } /* ---------- Trust strip ---------- */ .trust { max-width: var(--maxw); margin: 0 auto; padding: 14px 26px 40px; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .trust-cell { background: var(--panel); padding: 20px 22px; } .trust-cell h3 { font: 800 16px/1.2 'Baloo 2', sans-serif; color: var(--text); margin: 0; } .trust-cell p { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; } /* ---------- Demo ---------- */ .demo-slot { position: relative; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: var(--panel); border: 1px solid var(--border); box-shadow: 0 40px 90px -40px #000; } .demo-slot .hatch { position: absolute; inset: 0; opacity: .05; background: repeating-linear-gradient(135deg, #ffffff 0 1px, transparent 1px 16px); } .demo-slot .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .play-btn { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(180deg, var(--primary-2), var(--primary)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px var(--primary); color: var(--on-accent); font-size: 26px; padding-left: 5px; } .demo-slot .note { font-family: 'Cascadia Code', monospace; font-size: 12px; letter-spacing: 1px; color: var(--muted); } /* ---------- Cards / grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 26px 24px; overflow: hidden; } .card .num { font: 800 60px/1 'Baloo 2', sans-serif; color: var(--primary); opacity: .16; } .card h3 { font: 800 20px/1.2 'Baloo 2', sans-serif; margin: 8px 0 0; } .card p { font-size: 14px; color: #a8b0d8; margin: 8px 0 0; line-height: 1.6; } .card .icon { width: 42px; height: 42px; border-radius: 11px; background: var(--elev); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--primary); } .card .icon + h3 { margin-top: 16px; } .feature h3 { font-size: 18px; } .feature { padding: 24px; } /* ---------- Pricing ---------- */ .pricing { max-width: 960px; } .plan-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .plan-cell { background: var(--panel); } .plan-head-label { background: var(--bg-deep); padding: 26px 22px; display: flex; align-items: flex-end; font-size: 13px; color: var(--muted); } .plan-head { background: var(--panel); padding: 24px 22px; text-align: center; position: relative; } .plan-head.popular { box-shadow: inset 0 0 0 1px var(--primary); } .plan-head .tier { font: 800 20px/1 'Baloo 2', sans-serif; } .plan-head .tier.pro { color: var(--primary); } .plan-head .price { font: 800 34px/1 'Baloo 2', sans-serif; margin: 10px 0 2px; } .plan-head .small { font-size: 12px; color: var(--muted); } .plan-head .btn { display: flex; width: 100%; margin-top: 16px; } .popular-tab { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font: 800 10px/1 'Baloo 2', sans-serif; letter-spacing: 1px; color: var(--on-accent); background: linear-gradient(180deg, var(--primary-2), var(--primary)); padding: 4px 12px; border-radius: 0 0 8px 8px; } .plan-row-label { background: var(--bg-deep); padding: 15px 22px; font-size: 14px; color: #c7cdf0; display: flex; align-items: center; } .plan-row-val { background: var(--panel); padding: 15px 22px; text-align: center; font-size: 15px; } .plan-row-val.yes { color: var(--success); } .plan-row-val.no { color: var(--off); } .pricing-note { text-align: center; font-size: 13px; color: var(--off); margin: 18px 0 0; } /* ---------- FAQ ---------- */ .faq { max-width: 820px; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; } .faq-q { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; width: 100%; background: none; border: none; color: inherit; text-align: left; } .faq-q .q-text { font: 800 16px/1.3 'Baloo 2', sans-serif; flex: 1; } .faq-q .sign { color: var(--primary); font-size: 20px; font-weight: 700; } .faq-a { padding: 0 20px 18px; font-size: 15px; color: #a8b0d8; line-height: 1.65; } .faq-item[hidden] { display: block; } .faq-a[hidden] { display: none; } /* ---------- Final CTA ---------- */ .final-cta { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--border); background: var(--panel); padding: 56px 40px; text-align: center; } .final-cta .blob { position: absolute; } .final-cta .blob-1 { left: -80px; top: -60px; width: 340px; height: 340px; background: radial-gradient(circle, var(--fog), transparent 66%); filter: blur(50px); opacity: .4; animation: drift 18s ease-in-out infinite; } .final-cta .blob-2 { right: -70px; bottom: -80px; width: 320px; height: 320px; background: radial-gradient(circle, var(--primary), transparent 70%); filter: blur(56px); opacity: .24; animation: drift2 22s ease-in-out infinite; } .final-cta .inner { position: relative; } .final-cta h2 { font: 800 44px/1.05 'Baloo 2', sans-serif; margin: 0; } .final-cta p { color: #a8b0d8; font-size: 17px; margin: 16px auto 0; max-width: 540px; line-height: 1.6; } .final-cta .cta-row { justify-content: center; } /* ---------- Sub-pages ---------- */ .subpage { max-width: 820px; margin: 0 auto; padding: 64px 26px 80px; } .subpage-narrow { max-width: 760px; } .back-link { font-size: 14px; font-weight: 700; color: var(--muted); } .subpage h1 { font: 800 46px/1.05 'Baloo 2', sans-serif; margin: 18px 0 0; } .subpage > p.lead { color: #a8b0d8; font-size: 17px; margin: 14px 0 0; line-height: 1.6; } .step-list { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; } .step { display: flex; gap: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; } .step .n { flex: none; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(180deg, var(--primary-2), var(--primary)); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font: 800 18px/1 'Baloo 2', sans-serif; } .step h3 { font: 800 19px/1.2 'Baloo 2', sans-serif; margin: 0; } .step p { font-size: 15px; color: #a8b0d8; margin: 7px 0 0; line-height: 1.65; } .callout { margin-top: 26px; background: var(--elev); border: 1px solid var(--border); border-radius: 13px; padding: 20px 22px; font-size: 14px; color: #a8b0d8; line-height: 1.65; } .callout strong { color: var(--text); } .timeline { margin-top: 36px; border-left: 2px solid var(--border); } .tl-entry { position: relative; padding: 0 0 30px 28px; } .tl-dot { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); border: 2px solid #05060c; } .tl-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tl-v { font: 800 15px/1 'Baloo 2', sans-serif; color: var(--primary); } .tl-date { font-size: 12px; color: var(--off); } .tl-latest { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--on-accent); background: linear-gradient(180deg, var(--primary-2), var(--primary)); padding: 3px 8px; border-radius: 6px; } .tl-title { font: 800 18px/1.3 'Baloo 2', sans-serif; margin-top: 8px; } .tl-entry ul { margin: 10px 0 0; padding-left: 18px; color: #a8b0d8; font-size: 14px; line-height: 1.7; } /* ---------- Footer ---------- */ .footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: #07080f; } .footer-top { max-width: var(--maxw); margin: 0 auto; padding: 40px 26px; display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; justify-content: space-between; } .footer-brand { max-width: 420px; } .footer-brand .row { display: flex; align-items: center; gap: 10px; } .footer-brand .mark { color: var(--primary); display: flex; } .footer-brand .name { font: 800 18px/1 'Baloo 2', sans-serif; } .footer-brand p { font-size: 13px; color: var(--off); line-height: 1.6; margin: 14px 0 0; } .footer-cols { display: flex; gap: 56px; } .footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted); } .footer-col a, .footer-col span[role="link"] { color: inherit; cursor: pointer; } .footer-col a:hover { color: var(--text); } .footer-col .label { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--off); text-transform: uppercase; } .footer-bottom { border-top: 1px solid var(--border); } .footer-bottom-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 26px; font-size: 12px; color: var(--off); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 54px; } .hero h1 { font-size: 44px; } .mock { max-width: 460px; margin: 0 auto; width: 100%; } .grid-3 { grid-template-columns: 1fr 1fr; } .h2, .final-cta h2 { font-size: 32px; } .plan-grid { font-size: 14px; } .nav-links, .nav-right .btn, .theme-picker { display: none; } .nav-toggle { display: flex; } /* mobile menu panel */ .mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 10px 26px 18px; border-bottom: 1px solid var(--border); background: #07080fee; backdrop-filter: blur(12px); } .mobile-menu.open { display: flex; } .mobile-menu a, .mobile-menu button { text-align: left; background: none; border: none; color: var(--text); font: 700 16px/1 'Baloo 2', sans-serif; padding: 12px 4px; cursor: pointer; min-height: 44px; display: flex; align-items: center; } .mobile-menu .divider { height: 1px; background: var(--border); margin: 6px 0; } .mobile-menu .theme-picker-mobile { display: flex; align-items: center; gap: 9px; padding: 12px 4px; } .mobile-menu .btn { display: inline-flex; margin-top: 6px; } } @media (min-width: 961px) { .mobile-menu { display: none !important; } } @media (max-width: 540px) { .hero h1 { font-size: 32px; } .h2, .final-cta h2 { font-size: 26px; } .subpage h1 { font-size: 34px; } .grid-3 { grid-template-columns: 1fr; } .trust-grid { grid-template-columns: 1fr; } .plan-grid { grid-template-columns: 1fr; } /* on tiny screens, stack pricing: hide the compare-label column visually by letting each label row span; keep it readable */ .plan-head-label { display: none; } .final-cta { padding: 40px 22px; } .section { padding: 40px 20px; } .hero { padding: 40px 20px 20px; } .nav-inner { padding: 12px 18px; } .footer-cols { gap: 34px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blob, .blob-a, .blob-b, .mock, .mock-bar, .final-cta .blob-1, .final-cta .blob-2 { animation: none !important; } .themed { transition: none !important; } }