/* TickAhead site — shared styles for the secondary pages (welcome, blog, 404). Matches the homepage design system in index.html (dark canvas, Clash Display + Satoshi, cobalt accent). Fonts are pulled here via @import so these pages need no font links. */ @import url("https://api.fontshare.com/v2/css?f[]=clash-display@600&f[]=satoshi@400,500,700&f[]=cabinet-grotesk@700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600&display=swap"); :root { --bg: #141420; --surface: #1c1c2b; --surface-2: #232338; --border: #2c2c40; --ink: #eef0f6; --ink-soft: #a9abbd; --ink-faint: #75778c; --teal: #2fbfa8; --teal-soft: rgba(47, 191, 168, 0.12); --coral: #ef6a63; --amber: #f9c241; --accent: #5b73ff; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --display: "Clash Display", "Satoshi", system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden; } /* ambient aurora glow, no markup needed */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(540px 540px at 6% -6%, rgba(63, 79, 219, 0.22), transparent 68%), radial-gradient(460px 460px at 98% 8%, rgba(106, 79, 208, 0.18), transparent 70%); } .wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; outline: none; } /* ---------- header ---------- */ header.site { display: flex; align-items: center; gap: 9px; padding: 22px 0; } header.site img { width: 30px; height: 30px; object-fit: contain; display: block; } header.site .name { font-family: "Cabinet Grotesk", var(--sans); font-weight: 700; font-size: 20px; letter-spacing: -0.03em; } header.site .name b { color: #7488ff; font-weight: 700; } header.site nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; } header.site nav a { color: var(--ink-soft); } header.site nav a:hover { color: var(--ink); text-decoration: none; } /* ---------- hero ---------- */ .hero { padding: 56px 0 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } @media (max-width: 800px) { .hero { grid-template-columns: 1fr; } } .hero h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 46px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 16px; font-weight: 600; text-wrap: balance; } .hero h1 em { color: var(--accent); font-style: normal; } .hero .sub { color: var(--ink-soft); font-size: 18px; margin: 0 0 26px; max-width: 46ch; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .cta { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; padding: 12px 22px; border-radius: 40px; border: 1px solid rgba(91, 115, 255, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .cta:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(91, 115, 255, 0.4); filter: brightness(1.08); } .cta-note { font-size: 13px; color: var(--ink-faint); } /* hero flow — the four steps */ .flow { display: flex; flex-direction: column; } .flow-step { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .flow-badge { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; font: 700 14px/30px var(--mono); text-align: center; } .flow-step h4 { margin: 0 0 3px; font-size: 16px; } .flow-step p { margin: 0; font-size: 14px; color: var(--ink-soft); } .flow-arrow { align-self: center; color: var(--ink-faint); font-size: 18px; line-height: 1; padding: 7px 0; } /* ---------- sections ---------- */ section { padding: 44px 0; position: relative; z-index: 1; } section h2 { font-family: var(--display); font-size: 28px; letter-spacing: -0.015em; margin: 0 0 8px; font-weight: 600; text-wrap: balance; } section .lead { color: var(--ink-soft); margin: 0 0 28px; max-width: 62ch; } .section-center { text-align: center; } .section-center .lead { margin-left: auto; margin-right: auto; } /* ---------- pricing tiers ---------- */ .pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; text-align: left; } @media (max-width: 640px) { .pricing { grid-template-columns: 1fr; } } .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; } .price-card.featured { border-color: var(--accent); box-shadow: 0 14px 40px rgba(91, 115, 255, 0.14); } .price-name { font: 600 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .price-card.featured .price-name { color: var(--accent); } .price-amount { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; } .price-amount small { font-size: 14px; font-weight: 500; color: var(--ink-soft); } .price-was { text-decoration: line-through; color: var(--ink-faint); font-weight: 500; font-size: 20px; margin-right: 7px; } .price-sub { font-size: 13px; color: var(--ink-faint); margin: 0; } .price-alt { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; } .claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 800px) { .claims { grid-template-columns: 1fr; } } .claim { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .claim h3 { margin: 0 0 8px; font-size: 16.5px; } .claim p { margin: 0; color: var(--ink-soft); font-size: 14.5px; } .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 800px) { .pillars { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .pillars { grid-template-columns: 1fr; } } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 800px) { .features { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .features { grid-template-columns: 1fr; } } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 16px; cursor: default; text-align: center; transition: border-color 0.2s ease, background 0.2s ease; } .feature:hover, .feature:focus-within { border-color: var(--accent); outline: none; } .feature svg { width: 38px; height: 38px; color: var(--accent); margin: 0 auto 12px; display: block; } .feature h4 { margin: 0; font-size: 15.5px; } .feature p { margin: 0; font-size: 13.5px; color: var(--ink-soft); text-align: justify; hyphens: auto; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease; } .feature:hover p, .feature:focus-within p { max-height: 240px; opacity: 1; margin-top: 8px; } @media (hover: none) { .feature p { max-height: 240px; opacity: 1; margin-top: 8px; } } .honesty-strip { background: linear-gradient(180deg, rgba(91, 115, 255, 0.08), transparent); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .honesty-strip p { margin: 0; max-width: 58ch; } /* ---------- long-form doc / blog ---------- */ article.doc { max-width: 72ch; padding: 24px 0 60px; } article.doc h1 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.5vw, 44px); line-height: 1.06; letter-spacing: -0.02em; margin: 16px 0 8px; } article.doc h2 { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 36px 0 10px; } article.doc h3 { font-size: 18px; margin: 26px 0 8px; } article.doc p, article.doc li { color: var(--ink-soft); } article.doc li { margin-bottom: 6px; } article.doc strong { color: var(--ink); } article.doc code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font: 500 13px var(--mono); color: var(--ink); } .post-meta { color: var(--ink-faint); font: 600 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0; } th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; } th { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); } /* ---------- footer ---------- */ footer.site { border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0 48px; font-size: 13.5px; color: var(--ink-faint); display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; } footer.site a { color: var(--ink-faint); } footer.site a:hover { color: var(--ink); text-decoration: none; } footer.site .spacer { flex: 1; } .ref-banner { display: none; background: rgba(91, 115, 255, 0.12); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin: 6px 0 0; font-size: 14px; }