/* Halcyon homepage — design tokens and layout. */ :root { --bg: #0f1115; --bg-elev: #12151c; --panel: #161a22; --panel-2: #1c2230; --border: #232936; --border-strong: #2e3647; --text: #e6e9ef; --muted: #9aa3b2; --accent: #7aa7ff; --accent-strong: #98bcff; --good: #6cd28d; --bad: #ff8a8a; --neutral: #d6c46c; --shadow: 0 12px 32px rgba(0, 0, 0, 0.35); --radius: 12px; --radius-lg: 18px; --maxw: 1120px; } @media (prefers-color-scheme: light) { :root { --bg: #fafbfc; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f4f6fa; --border: #e3e6eb; --border-strong: #ced3dc; --text: #1a1d22; --muted: #5c6470; --accent: #2a64d8; --accent-strong: #1d4fb8; --good: #1f8a4a; --bad: #c0392b; --neutral: #a07e0a; --shadow: 0 8px 24px rgba(20, 30, 60, 0.08); } } /* Manual override (set on ) */ html[data-theme="dark"] { --bg: #0f1115; --bg-elev: #12151c; --panel: #161a22; --panel-2: #1c2230; --border: #232936; --border-strong: #2e3647; --text: #e6e9ef; --muted: #9aa3b2; --accent: #7aa7ff; --accent-strong: #98bcff; --good: #6cd28d; --bad: #ff8a8a; --neutral: #d6c46c; --shadow: 0 12px 32px rgba(0, 0, 0, 0.35); } html[data-theme="light"] { --bg: #fafbfc; --bg-elev: #ffffff; --panel: #ffffff; --panel-2: #f4f6fa; --border: #e3e6eb; --border-strong: #ced3dc; --text: #1a1d22; --muted: #5c6470; --accent: #2a64d8; --accent-strong: #1d4fb8; --good: #1f8a4a; --bad: #c0392b; --neutral: #a07e0a; --shadow: 0 8px 24px rgba(20, 30, 60, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } body { font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } img, svg { max-width: 100%; display: block; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } code { font-size: 0.9em; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } pre { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.55; margin: 0; } /* Skip link */ .skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 100; } .skip:focus { left: 8px; } /* Container */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ============== NAV ============== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 20px; height: 60px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); font-size: 17px; } .brand:hover { text-decoration: none; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; } .nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; } .nav-links a { color: var(--muted); padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; } .nav-links a:hover { color: var(--text); background: var(--panel); text-decoration: none; } .icon-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); width: 36px; height: 36px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; } .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } .icon-btn svg { width: 18px; height: 18px; } .theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: block; } html[data-theme="dark"] .theme-toggle .moon { display: none; } html[data-theme="light"] .theme-toggle .moon { display: block; } html[data-theme="light"] .theme-toggle .sun { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme]) .theme-toggle .sun { display: block; } html:not([data-theme]) .theme-toggle .moon { display: none; } } .menu-btn { display: none; } @media (max-width: 760px) { .nav-links a { display: none; } .nav-links.open { display: flex; } .nav-links { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 10px 18px 16px; gap: 2px; margin-left: 0; } .nav-links.open a { display: block; padding: 12px 10px; } .nav-links .icon-btn { align-self: flex-start; margin-top: 6px; } .menu-btn { display: inline-grid; margin-left: auto; } } /* ============== BUTTONS ============== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-strong); color: #fff; } .btn-secondary { background: var(--panel); color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--border-strong); background: var(--panel-2); color: var(--text); } .btn svg { width: 18px; height: 18px; } /* ============== HERO ============== */ .hero { padding: 72px 0 64px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -200px 30% auto auto; width: 700px; height: 700px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); pointer-events: none; z-index: 0; } .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } @media (max-width: 880px) { .hero { padding: 48px 0 40px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 5px 11px; border-radius: 999px; margin-bottom: 18px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); } h1.hero-title { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; font-weight: 800; } .hero-title .grad { background: linear-gradient(120deg, var(--accent), var(--accent-strong) 60%, var(--text)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: 18px; color: var(--muted); max-width: 560px; margin: 0 0 28px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 18px 22px; color: var(--muted); font-size: 13.5px; } .hero-meta strong { color: var(--text); font-weight: 600; } /* ============== PHONE MOCKUP ============== */ .phone { --w: 280px; width: var(--w); aspect-ratio: 9 / 19; margin: 0 auto; background: linear-gradient(180deg, #0a0c11, #1a1f2b); border-radius: 38px; border: 1px solid var(--border-strong); padding: 12px; box-shadow: var(--shadow), inset 0 0 0 2px #2a3142; position: relative; } .phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 90px; height: 22px; background: #07090d; border-radius: 14px; z-index: 2; } .phone-screen { width: 100%; height: 100%; border-radius: 28px; background: linear-gradient(180deg, #0f1320 0%, #161c2c 100%); overflow: hidden; position: relative; display: flex; flex-direction: column; color: #e6e9ef; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .phone-status { display: flex; justify-content: space-between; padding: 14px 22px 0; font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 600; } .phone-header { padding: 38px 18px 14px; text-align: center; } .phone-header .label { font-size: 12px; color: rgba(255,255,255,0.55); letter-spacing: 0.06em; text-transform: uppercase; } .phone-header .number { font-size: 22px; font-weight: 600; margin-top: 6px; letter-spacing: 0.5px; } .phone-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 24px 14px; flex: 1; } .phone-key { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 999px; aspect-ratio: 1 / 1; font-size: 19px; font-weight: 500; } .phone-key small { font-size: 8.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.45); margin-top: 2px; } .phone-call { margin: 0 auto 22px; width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(135deg, #6cd28d, #2faa5a); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(47, 170, 90, 0.45); } .phone-call svg { width: 24px; height: 24px; color: #fff; } /* ============== SECTIONS ============== */ section { padding: 64px 0; } section.alt { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-head { max-width: 720px; margin: 0 auto 40px; text-align: center; } .section-head .eyebrow { margin-bottom: 14px; } .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 700; } .section-head p { color: var(--muted); font-size: 17px; margin: 0; } /* ============== FEATURES ============== */ .feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; transition: border-color 0.15s ease, transform 0.15s ease; } .feature:hover { border-color: var(--border-strong); transform: translateY(-2px); } .feature-icon { width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; } .feature-icon svg { width: 20px; height: 20px; } .feature h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; } .feature p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; } /* ============== STEPS ============== */ .steps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; position: relative; } .step-num { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; } .step h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.005em; } .step p { margin: 0; color: var(--muted); font-size: 15px; } .step code { font-size: 0.85em; } /* ============== COMPARE TEASER ============== */ .compare { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 36px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; } @media (max-width: 760px) { .compare { grid-template-columns: 1fr; padding: 28px 22px; } } .compare h2 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.015em; } .compare p { color: var(--muted); margin: 0 0 16px; } /* ============== DOWNLOAD ============== */ .download-grid { display: grid; gap: 20px; grid-template-columns: 1.1fr 0.9fr; } @media (max-width: 880px) { .download-grid { grid-template-columns: 1fr; } } .download-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; } .download-card h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -0.01em; } .download-card p { color: var(--muted); margin: 0 0 18px; font-size: 15px; } .download-card pre { background: var(--panel-2); } .download-card .actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ============== FAQ ============== */ .faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; } .faq details { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 20px; transition: border-color 0.15s ease; } .faq details[open] { border-color: var(--border-strong); } .faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s ease; flex: 0 0 auto; margin-right: 4px; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq .faq-body { color: var(--muted); padding: 0 0 18px; font-size: 15px; } .faq .faq-body p { margin: 0 0 8px; } .faq .faq-body p:last-child { margin-bottom: 0; } /* ============== FOOTER ============== */ footer.site { border-top: 1px solid var(--border); padding: 36px 0 44px; color: var(--muted); font-size: 14px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .footer-links { display: flex; gap: 18px; flex-wrap: wrap; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--text); }