/* vs.css — shared styles for hiignite competitor-comparison pages (/vs/{slug}/). Design tokens mirror index.html :root + html.t-light — index.html is canonical, keep in sync. Light is the default theme (applied pre-paint by each page's no-flash theme script). */ :root { --bg: #0b0b0d; --bg-2: #121215; --bg-3: #1a1a1f; --line: #26262d; --line-2: #33333c; --text: #f5f5f6; --text-2: #a6a6af; --muted: #6e6e78; --accent-rgb: 255,106,26; --accent: rgb(var(--accent-rgb)); --accent-2: #ff8c4d; --accent-deep: #e0560d; --accent-soft: rgba(var(--accent-rgb),.12); --accent-line: rgba(var(--accent-rgb),.34); --display: "Space Grotesk", sans-serif; --body: "Hanken Grotesk", sans-serif; --mono: "JetBrains Mono", monospace; --maxw: 1100px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; } .mono { font-family: var(--mono); } .grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); display: inline-flex; align-items: center; gap: 9px; } .kicker::before { content: ""; width: 18px; height: 1px; background: var(--accent); } /* wordmark (matches index.html) */ .logo { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.03em; color: var(--text); display: inline-flex; align-items: baseline; } .logo .logo-mark { height: .68em; width: auto; margin: 0 .05em; fill: var(--accent); align-self: baseline; } /* buttons */ .btn { font-family: var(--body); font-weight: 600; font-size: 15px; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .16s var(--ease-out), background .18s, border-color .18s, box-shadow .18s; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .btn:active { transform: scale(0.97); } .btn-accent { background: var(--accent); color: #11100e; font-weight: 700; box-shadow: 0 8px 26px -10px rgba(var(--accent-rgb),.7); } .btn-accent:hover { background: var(--accent-2); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--accent-line); color: #fff; } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .btn-accent:disabled:hover { background: var(--accent); } /* nav */ header.nav { position: sticky; top: 0; z-index: 50; background: rgba(11,11,13,.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; } .nav-cta { display: flex; gap: 12px; align-items: center; } /* waitlist + ALTCHA (matches index.html) */ .waitlist-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 460px; } .waitlist-form input { flex: 1; min-width: 0; font-family: var(--body); font-size: 15px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s; } .waitlist-form input::placeholder { color: var(--muted); } .waitlist-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .waitlist-form altcha-widget { flex: 0 0 100%; max-width: 100%; font-family: var(--body); font-size: 13px; --altcha-border-width: 1px; --altcha-border-radius: 10px; --altcha-max-width: 100%; --altcha-color-base: var(--bg-2); --altcha-color-border: var(--line-2); --altcha-color-border-focus: var(--accent); --altcha-color-text: var(--text); --altcha-color-footer-bg: var(--bg-2); --altcha-color-error-text: #e5484d; } .waitlist-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 15px; letter-spacing: .02em; } .waitlist-note.is-ok { color: var(--accent-2); } .waitlist-note.is-err { color: #e5484d; } /* sections */ section.blk { padding: 84px 0; position: relative; } .sec-head { margin-bottom: 40px; max-width: 760px; } .sec-head.center { text-align: center; margin-left: auto; margin-right: auto; } .sec-head h2 { font-size: clamp(30px, 4vw, 46px); margin: 14px 0 14px; letter-spacing: -0.025em; } .sec-head h2 .accent { color: var(--accent); } .sec-head p { font-size: 17px; color: var(--text-2); max-width: 64ch; line-height: 1.6; } .sec-head.center p { margin: 0 auto; } /* breadcrumb */ .crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-bottom: 22px; } .crumb a:hover { color: var(--accent-2); } .crumb span { color: var(--text-2); } /* hero / intro */ .vs-hero { padding: 60px 0 30px; position: relative; overflow: hidden; } .vs-hero::before { content: ""; position: absolute; top: -260px; right: -180px; width: 720px; height: 720px; background: radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 62%); pointer-events: none; } .vs-hero h1 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -0.035em; max-width: 18ch; } .vs-hero h1 .accent { color: var(--accent); } .vs-hero .lead { font-size: 19px; color: var(--text-2); margin: 22px 0 0; max-width: 64ch; line-height: 1.6; } .vs-hero .cta-row { margin-top: 30px; } .vs-hero .waitlist-form { margin: 0; } /* comparison table */ .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); } table.cmp { width: 100%; border-collapse: collapse; min-width: 580px; font-size: 15px; } .cmp th, .cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; } .cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: none; } .cmp thead th { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--bg-3); } .cmp tbody th { font-weight: 600; color: var(--text); width: 30%; } .cmp td { color: var(--text-2); } .cmp .col-hi { background: var(--accent-soft); color: var(--text); font-weight: 600; border-left: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); } .cmp thead .col-hi { color: var(--accent-2); } /* why switch */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .why-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 24px; } .why-card h3 { font-size: 19px; margin-bottom: 10px; letter-spacing: -0.01em; } .why-card p { font-size: 15px; color: var(--text-2); line-height: 1.55; } @media (max-width: 820px) { .why-grid { grid-template-columns: 1fr; } } /* honest callout — where the competitor still wins */ .callout { background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: 12px; padding: 24px 26px; } .callout h3 { font-size: 18px; margin-bottom: 14px; letter-spacing: -0.01em; } .callout ul { list-style: none; display: grid; gap: 11px; } .callout li { font-size: 15px; color: var(--text-2); padding-left: 22px; position: relative; line-height: 1.5; } .callout li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); } /* pricing comparison */ .price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; } .price-card { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--bg-2); } .price-card.hi { border-color: var(--accent-line); box-shadow: 0 16px 36px -22px rgba(var(--accent-rgb),.45); } .price-card .name { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .price-card .amt { font-family: var(--display); font-weight: 600; font-size: 28px; margin: 10px 0 6px; letter-spacing: -0.02em; } .price-card.hi .amt { color: var(--accent); } .price-card .sub { font-size: 14px; color: var(--text-2); line-height: 1.55; } .price-prose { font-size: 16px; color: var(--text-2); line-height: 1.7; max-width: 78ch; } @media (max-width: 680px) { .price-grid { grid-template-columns: 1fr; } } /* faq (matches index.html) */ .faq-wrap { max-width: 840px; margin: 0 auto; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: clamp(18px,2vw,23px); letter-spacing: -0.01em; color: var(--text); text-align: left; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 18px; transition: color .16s; } .faq-q:hover { color: var(--accent-2); } .faq-q .ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 8px; color: var(--accent-2); transition: transform .25s var(--ease-out), background .16s, border-color .16s; } .faq-item.open .faq-q .ic { transform: rotate(45deg); background: var(--accent); color: #11100e; border-color: var(--accent); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); } .faq-a p { font-size: 16px; color: var(--text-2); padding-bottom: 24px; max-width: 70ch; line-height: 1.6; } /* cta */ .cta .waitlist-form { margin: 0 auto; } .cta .waitlist-note { color: var(--text-2); text-align: center; } .cta .waitlist-form altcha-widget { text-align: left; } /* fine print */ .note-fine { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 20px; letter-spacing: .02em; line-height: 1.6; max-width: 80ch; } /* footer (matches index.html) */ footer { border-top: 1px solid var(--line); padding: 60px 0 40px; margin-top: 40px; } .foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .foot-grid p { font-size: 14px; color: var(--muted); max-width: 30ch; margin-top: 14px; } .foot-links { display: flex; gap: 56px; flex-wrap: wrap; } .foot-col h4 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; } .foot-col a { display: block; font-size: 15px; color: var(--text-2); margin-bottom: 10px; transition: color .15s; } .foot-col a:hover { color: var(--accent-2); } .foot-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 12px; } /* entrance: content is ALWAYS visible at rest; animate in only as enhancement */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .reveal.in { animation: revIn .6s var(--ease-out) both; } } @keyframes revIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } /* ---- LIGHT THEME (default) ---- */ html.t-light { --bg: #f5f5f7; --bg-2: #ffffff; --bg-3: #ececed; --line: #e6e6ea; --line-2: #d8d8de; --text: #16161b; --text-2: #54545d; --muted: #8a8a93; } html.t-light header.nav { background: rgba(245,245,247,.74); } html.t-light .grain { opacity: .02; } html.t-light .why-card, html.t-light .price-card, html.t-light .callout, html.t-light .cmp-wrap { box-shadow: 0 12px 30px -18px rgba(20,20,30,.14); } /* ---- blog article ---- */ .article-hero { padding: 56px 0 4px; position: relative; overflow: hidden; } .article-hero::before { content: ""; position: absolute; top: -260px; right: -180px; width: 700px; height: 700px; background: radial-gradient(circle, rgba(var(--accent-rgb),.14), transparent 62%); pointer-events: none; } .article-hero h1 { font-size: clamp(32px, 4.6vw, 50px); letter-spacing: -0.03em; max-width: 21ch; } .article-hero h1 .accent { color: var(--accent); } .article-hero .dek { font-size: 19px; color: var(--text-2); margin-top: 18px; max-width: 62ch; line-height: 1.55; } .article-meta { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: 16px; text-transform: uppercase; } .article { max-width: 720px; } .article > * + * { margin-top: 20px; } .article h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; margin-top: 42px; } .article h3 { font-size: 20px; margin-top: 28px; } .article p { font-size: 17px; color: var(--text-2); line-height: 1.7; } .article ul, .article ol { color: var(--text-2); font-size: 17px; line-height: 1.7; padding-left: 22px; display: grid; gap: 9px; } .article a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); transition: color .15s; } .article a:hover { color: var(--accent); } .article strong { color: var(--text); font-weight: 700; } .article blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 22px; font-size: 19px; color: var(--text); font-style: italic; }