/* Self-hosted Fraunces + Inter (GDPR: no CDN) */ @import url('/fonts/fonts.css'); /* ============================================================ Mr. Polaris ยท Design System (redesign) Light-first. Dark via [data-theme="dark"] on . Self-hosted woff2 fonts via /fonts/fonts.css (Fraunces + Inter). No em dash anywhere (brand rule). ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Brand */ --primary: #4B49C9; /* Polaris Indigo */ --primary-700: #3A38B0; --primary-100: #ECEBFB; --gold: #8a6410; /* Stardust Gold (AA-compliant; 4.62:1 on warm-paper) */ --gold-100: #F6EFDC; --studio: #161B3A; /* B2B "studio" navy */ /* Light surfaces */ --bg: #FBFAF6; /* warm paper */ --surface: #FFFFFF; --surface-2: #F4F2EA; --ink: #14172B; /* primary text */ --ink-soft: #54586F; /* secondary text */ --ink-faint: #8A8DA1; --line: #E7E3D8; --line-strong: #D8D3C5; --shadow: 0 1px 2px rgba(20,23,43,.05), 0 12px 32px -12px rgba(20,23,43,.16); --shadow-sm: 0 1px 2px rgba(20,23,43,.06), 0 6px 18px -10px rgba(20,23,43,.14); /* Type */ --font-display: "Fraunces", "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Geometry */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --maxw: 1180px; --pad: clamp(20px, 5vw, 40px); color-scheme: light; } [data-theme="dark"] { --primary: #8E8AFF; --primary-700: #A7A4FF; --primary-100: rgba(142,138,255,.14); --gold: #D9B765; --gold-100: rgba(217,183,101,.14); --studio: #0E1230; --bg: #0B0E20; --surface: #121634; --surface-2: #1A1F40; --ink: #ECEAF6; --ink-soft: #A8ABC6; --ink-faint: #757898; --line: #262B4C; --line-strong: #323864; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 20px 48px -18px rgba(0,0,0,.7); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6); color-scheme: dark; } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 16px; letter-spacing: .002em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s ease, color .3s ease; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--primary-100); color: var(--ink); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); } [data-theme="dark"] .eyebrow { color: var(--primary-700); } .muted { color: var(--ink-soft); } .center { text-align: center; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; letter-spacing: .01em; transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 22px -10px var(--primary); } .btn-primary:hover { background: var(--primary-700); } [data-theme="dark"] .btn-primary { color: #0B0E20; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--ink-soft); background: var(--surface-2); } .btn-studio { background: var(--studio); color: #F2EFE6; } .btn-studio:hover { filter: brightness(1.12); } .btn-lg { padding: 16px 28px; font-size: 16px; } .btn-sm { padding: 9px 15px; font-size: 13.5px; } .btn-link { color: var(--primary); font-weight: 600; } .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* Same-page anchors clear the sticky header (e.g. for-astrologers #pricing). */ :target { scroll-margin-top: 84px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; gap: 18px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); } .brand .mark { width: 30px; height: 30px; color: var(--ink); --mark-accent: var(--gold); } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; } .brand-name b { color: var(--gold); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: 26px; margin-inline: auto; white-space: nowrap; } .nav-links a { font-size: 14.5px; color: var(--ink-soft); font-weight: 550; transition: color .15s; white-space: nowrap; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; transition: .15s; } .icon-btn:hover { color: var(--ink); border-color: var(--ink-soft); } .lang-select { appearance: none; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: 999px; padding: 8px 30px 8px 14px; font-size: 13.5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2354586F' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 78% 8%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%), radial-gradient(45% 40% at 12% 92%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .hero h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.022em; } .hero h1 .accent { color: var(--primary); } .hero p.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); margin-top: 20px; max-width: 30em; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; } .hero-media { position: relative; } .hero-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; margin-bottom: 14px; } .hero-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--gold); background: var(--surface-2); backdrop-filter: blur(8px) saturate(140%); text-decoration: none; transition: background .18s, box-shadow .18s; white-space: nowrap; } .hero-pill:hover { background: color-mix(in srgb, var(--gold) 16%, var(--surface-2)); box-shadow: 0 0 0 1px var(--gold); } /* ---------- Audience split ---------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: clamp(40px, 6vw, 64px); } .door { position: relative; border-radius: var(--r-lg); padding: 32px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .door:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); } .door .tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .door h3 { font-size: 26px; margin-top: 12px; } .door p { color: var(--ink-soft); margin-top: 10px; font-size: 15.5px; } .door .door-cta { margin-top: 22px; display: flex; gap: 10px; align-items: center; } .door-consumer .tag { color: var(--primary); } .door-studio { background: var(--studio); color: #EFece1; border-color: transparent; } .door-studio::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(40% 60% at 85% 10%, rgba(182,138,51,.22), transparent 70%); } .door-studio > * { position: relative; z-index: 1; } .door-studio .tag { color: var(--gold); } .door-studio p { color: #C7C9DC; } /* ---------- Sections ---------- */ section.band { padding: clamp(56px, 8vw, 96px) 0; } section.band.alt { background: var(--surface-2); border-block: 1px solid var(--line); } .section-head { max-width: 38em; margin-bottom: 40px; } .section-head h2 { font-size: clamp(28px, 3.6vw, 40px); } .section-head p { color: var(--ink-soft); margin-top: 14px; font-size: 17px; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s; } .feature:hover { transform: translateY(-3px); border-color: var(--line-strong); } .feature .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-100); color: var(--primary); margin-bottom: 16px; } .feature h3 { font-size: 19px; } .feature p { color: var(--ink-soft); margin-top: 8px; font-size: 14.5px; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; } .step { padding: 24px; border-radius: var(--r); border: 1px dashed var(--line-strong); } .step .n { width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; font-family: var(--font-display); } .step h4 { font-size: 17px; } .step p { color: var(--ink-soft); font-size: 14px; margin-top: 6px; } /* ---------- Pricing ---------- */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } .plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .plan.featured { border-color: var(--primary); box-shadow: 0 18px 50px -22px var(--primary); } .plan .pill { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); background: var(--primary-100); padding: 5px 11px; border-radius: 999px; } .plan h3 { font-size: 22px; margin-top: 8px; } .plan .price { font-family: var(--font-display); font-size: 44px; margin: 14px 0 4px; letter-spacing: -.02em; } .plan .price small { font-size: 15px; color: var(--ink-faint); font-family: var(--font-sans); font-weight: 500; } .plan ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 11px; } .plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); } .plan li svg { flex: none; color: var(--primary); margin-top: 3px; } /* Not-included items (free plan): muted, struck through, with an x mark instead of a check. */ .plan li.no { color: var(--ink-faint); } .plan li.no span { text-decoration: line-through; } .plan li.no svg { color: var(--ink-faint); opacity: .65; } /* Small label that introduces the not-included list. */ .plan li.no-h { color: var(--ink-faint); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-top: 7px; } .plan .btn { margin-top: auto; width: 100%; } /* ---------- Auth / gate pages ---------- */ .auth-page { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; } .auth-aside { background: var(--studio); color: #ECE9DE; padding: clamp(32px, 5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-aside.consumer { background: linear-gradient(160deg, #1B1E47, #2C2A78 70%); } .auth-aside::after { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 80% 15%, rgba(182,138,51,.22), transparent 70%); pointer-events: none; } .auth-aside > * { position: relative; z-index: 1; } .auth-aside .brand .mark, .auth-aside .brand-name { color: #fff; } .auth-aside .brand-name b { color: var(--gold); } .auth-aside blockquote { font-family: var(--font-display); font-size: clamp(22px, 3vw, 32px); line-height: 1.28; } .auth-aside .who { color: #C7C9DC; margin-top: 16px; font-size: 14.5px; } .auth-main { display: grid; place-items: center; padding: clamp(28px, 5vw, 56px); background: var(--bg); } .auth-card { width: 100%; max-width: 400px; } .auth-card h1 { font-size: 30px; } .auth-card .sub { color: var(--ink-soft); margin-top: 10px; } .field { margin-top: 18px; } .field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; } .input { width: 100%; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; transition: border-color .15s, box-shadow .15s; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); } .divider { display: flex; align-items: center; gap: 14px; color: var(--ink-faint); font-size: 13px; margin: 22px 0; } .divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; } .cross-link { margin-top: 26px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------- Demo card preview ---------- */ .preview-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 22px; transform: rotate(.4deg); } .preview-card .pc-head { display: flex; align-items: center; justify-content: space-between; } .preview-card .date-badge { font-family: var(--font-display); background: var(--ink); color: var(--bg); border-radius: 12px; padding: 8px 12px; text-align: center; line-height: 1; } .preview-card .date-badge .d { font-size: 22px; font-weight: 700; } .preview-card .date-badge .m { font-size: 11px; opacity: .8; } .chip { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-100); padding: 5px 10px; border-radius: 999px; } .preview-card h4 { font-size: 19px; margin: 16px 0 6px; } .preview-card .body { color: var(--ink-soft); font-size: 14px; } .meter { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 16px; } .meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); } .preview-tabs { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; } .preview-tabs span { font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); } .preview-tabs span.on { background: var(--ink); color: var(--bg); } /* ---------- Trust strip ---------- */ .trust { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: center; } .trust .t { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 14px; font-weight: 550; } .trust .t svg { color: var(--primary); } /* ---------- CTA band ---------- */ .cta-band { background: var(--studio); color: #F1EEE4; border-radius: var(--r-lg); padding: clamp(36px, 6vw, 64px); text-align: center; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 70% at 50% -10%, rgba(182,138,51,.28), transparent 60%); pointer-events: none; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(28px, 4vw, 42px); } .cta-band p { color: #C9CBDD; margin: 14px auto 0; max-width: 34em; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 56px 0 36px; margin-top: 0; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; } .foot-grid h5 { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .foot-grid a { display: block; color: var(--ink-soft); font-size: 14px; padding: 5px 0; } .foot-grid a:hover { color: var(--ink); } .foot-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); font-size: 13px; } /* ---------- Utilities ---------- */ .stack-lg > * + * { margin-top: 18px; } .badge-soft { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; } .hide-mobile { } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-media { order: -1; } .hero-pills { gap: 5px; justify-content: flex-end; } .hero-pill { font-size: 11.5px; padding: 5px 10px; } .split { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .pricing { grid-template-columns: 1fr; } .auth-page { grid-template-columns: 1fr; } .auth-aside { display: none; } .foot-grid { grid-template-columns: 1fr 1fr; } .nav-links { display: none; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr; } .hero-pills { flex-direction: column; align-items: flex-end; gap: 4px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto; } }