/* Idea landing page — single hand-written stylesheet, no build step. Theme hangs off --accent, set inline on from config/idea.php. */ :root { --bg: #09090b; --text: #f4f4f5; --muted: #a1a1aa; --faint: #71717a; --footer: #52525b; --card-bg: rgba(24, 24, 27, 0.5); --card-border: #27272a; --input-bg: #18181b; --input-border: #3f3f46; } * { box-sizing: border-box; margin: 0; } body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; } ::selection { background: var(--accent); color: #fff; } /* Accent glow at top of page */ .glow { position: absolute; inset: 0 0 auto 0; height: 32rem; pointer-events: none; opacity: 0.2; background: radial-gradient(50rem 20rem at 50% -5rem, var(--accent), transparent 70%); } .container { position: relative; max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; } /* Nav */ .nav { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 0; } .brand { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.025em; } .dot { color: var(--accent); } .nav-cta { border: 1px solid var(--input-border); border-radius: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: border-color 0.15s, color 0.15s; } .nav-cta:hover { border-color: var(--accent); color: #fff; } /* Hero */ .hero { padding: 5rem 0; text-align: center; } @media (min-width: 640px) { .hero { padding: 7rem 0; } } .eyebrow { margin-bottom: 1rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .hero h1 { max-width: 48rem; margin: 0 auto; font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; line-height: 1.1; } @media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } } .subhead { max-width: 36rem; margin: 1.5rem auto 0; font-size: 1.125rem; color: var(--muted); text-wrap: pretty; line-height: 1.6; } .no-spam { margin-top: 0.75rem; font-size: 0.75rem; color: var(--faint); } /* Signup form */ .form-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 2.5rem; scroll-margin-top: 6rem; } .signup { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 28rem; } @media (min-width: 640px) { .signup { flex-direction: row; } } .signup input[type="email"] { flex: 1; width: 100%; border: 1px solid var(--input-border); border-radius: 0.5rem; background: var(--input-bg); color: var(--text); padding: 0.75rem 1rem; font-size: 1rem; outline: none; transition: border-color 0.15s; } .signup input[type="email"]::placeholder { color: var(--faint); } .signup input[type="email"]:focus { border-color: var(--accent); } .signup button { border: 0; border-radius: 0.5rem; background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; padding: 0.75rem 1.5rem; cursor: pointer; transition: filter 0.15s; } .signup button:hover { filter: brightness(1.1); } .signup button:active { filter: brightness(0.9); } .signup button:disabled { opacity: 0.6; cursor: default; } .hp { display: none; } .status { margin-top: 0.75rem; font-size: 0.875rem; min-height: 1.25rem; } .status:empty { display: none; } .status.ok { color: var(--accent); } .status.err { color: #f87171; } /* Replaces the form after a successful signup */ .signup-done { color: var(--accent); font-size: 1.125rem; font-weight: 600; padding: 0.75rem 0; } /* Features */ .features { display: grid; gap: 1.5rem; padding-bottom: 5rem; } @media (min-width: 640px) { .features { grid-template-columns: repeat(3, 1fr); } } .card { border: 1px solid var(--card-border); border-radius: 0.75rem; background: var(--card-bg); padding: 1.5rem; } .card h3 { font-weight: 600; color: var(--accent); } .card p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted); } /* Optional body copy */ .body-copy { max-width: 42rem; margin: 0 auto; padding-bottom: 5rem; line-height: 1.7; color: var(--muted); } .body-copy h2 { color: var(--text); font-size: 1.5rem; letter-spacing: -0.025em; margin: 2rem 0 0.75rem; } .body-copy h2:first-child { margin-top: 0; } .body-copy p { margin: 0.75rem 0; } .body-copy ol, .body-copy ul { padding-left: 1.5rem; margin: 0.75rem 0; } .body-copy li { margin: 0.5rem 0; } .body-copy a { color: var(--accent); } .body-copy strong { color: var(--text); } /* Bottom CTA */ .bottom-cta { margin-bottom: 5rem; border: 1px solid var(--card-border); border-radius: 1rem; background: var(--card-bg); padding: 3.5rem 1.5rem; text-align: center; } .bottom-cta h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } @media (min-width: 640px) { .bottom-cta h2 { font-size: 1.875rem; } } .bottom-cta > p { max-width: 28rem; margin: 0.75rem auto 0; color: var(--muted); } .bottom-cta .form-wrap { margin-top: 2rem; } /* Footer */ footer { border-top: 1px solid var(--input-bg); padding: 2rem 0; text-align: center; font-size: 0.75rem; color: var(--footer); } footer .fine-print { margin-bottom: 0.5rem; }