/* ═══════════════════════════════════════════════════════════════ feature-page.css — shared layout for per-feature marketing pages Pairs with site.css (nav/footer/buttons/tokens). De-templated: bare accent glyphs, product-color keyline, sequential flow, no 3-blob aurora, no gradient text. Per-page accent: set (default blue). ═══════════════════════════════════════════════════════════════ */ .fp-hero { padding: 128px 2rem 40px; text-align: center; position: relative; overflow: hidden; } .fp-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 55% 45% at 50% -5%, color-mix(in srgb, var(--fp-accent, var(--accent)) 12%, transparent) 0%, transparent 60%); } .fp-hero > * { position: relative; } .fp-eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sub); margin-bottom:1.1rem; } .fp-eyebrow .dot { width:7px; height:7px; border-radius:50%; background:var(--fp-accent, var(--accent)); } .fp-eyebrow a { color:var(--sub); } .fp-hero h1 { font-size:clamp(2rem,4.4vw,3rem); line-height:1.1; letter-spacing:-.025em; font-weight:600; max-width:18ch; margin:0 auto 1.1rem; text-wrap:balance; } .fp-hero .lede { max-width:58ch; margin:0 auto 1.9rem; color:var(--sub); font-size:1.08rem; line-height:1.6; } .fp-actions { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; } /* screenshot slot — framed like an app window; drop a real in .shot-body */ .shot-wrap { max-width:1000px; margin:2.5rem auto 0; padding:0 2rem; } .shot { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#0e1421; box-shadow:0 24px 70px rgba(0,0,0,.45); } .shot-bar { display:flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); } .shot-bar .b { width:11px; height:11px; border-radius:50%; background:var(--border2); } .shot-bar .url { margin-left:.6rem; font-size:.72rem; color:var(--sub); font-family:var(--mono); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 12px; } .shot-body { aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background: radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--fp-accent, var(--accent)) 7%, transparent), transparent 70%), #0b1018; } .shot-body img { width:100%; height:100%; object-fit:cover; display:block; } .shot-body .cap { font-size:.82rem; color:var(--sub); } .shot-body .tag { font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fp-accent, var(--accent)); border:1px dashed color-mix(in srgb, var(--fp-accent, var(--accent)) 45%, transparent); border-radius:999px; padding:4px 12px; } /* sections */ .fp-sec { padding:5rem 2rem; } .fp-sec.alt { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .fp-in { max-width:1080px; margin:0 auto; } .fp-lead { max-width:900px; margin:0 auto; } .fp-lead .kick { font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--fp-accent, var(--accent)); margin-bottom:.9rem; } .fp-lead h2 { font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.02em; line-height:1.15; margin-bottom:1rem; text-wrap:balance; } .fp-lead p { color:var(--sub); font-size:1.02rem; line-height:1.65; max-width:62ch; } /* keyline capability cards */ .cap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:2.4rem; } .cap-card { position:relative; background:#0e1421; border:1px solid var(--border); border-radius:11px; padding:1.7rem 1.6rem; overflow:hidden; } .cap-card::before { content:''; position:absolute; top:0; left:0; width:44px; height:2px; background:var(--fp-accent, var(--accent)); } .cap-card .hd { display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; } .cap-card .hd svg { width:20px; height:20px; stroke:var(--fp-accent, var(--accent)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .cap-card h3 { font-size:1.06rem; font-weight:700; letter-spacing:-.01em; } .cap-card p { color:var(--sub); font-size:.88rem; line-height:1.6; margin:0; } /* sequential how-it-works (numbered — it IS an ordered flow) */ .flow { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.4rem; counter-reset:step; } .flow .step { position:relative; padding:1.5rem 1.4rem; border:1px solid var(--border); border-radius:11px; background:var(--bg); } .flow .step::before { counter-increment:step; content:counter(step); display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:color-mix(in srgb, var(--fp-accent, var(--accent)) 14%, transparent); color:var(--fp-accent, var(--accent)); font-weight:700; font-size:.9rem; margin-bottom:.9rem; } .flow .step h4 { font-size:1rem; margin-bottom:.4rem; } .flow .step p { color:var(--sub); font-size:.86rem; line-height:1.55; margin:0; } /* help-doc handoff */ .handoff { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; max-width:1000px; margin:0 auto; padding:1.8rem 2rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); } .handoff .t { flex:1; min-width:280px; } .handoff h3 { font-size:1.12rem; margin-bottom:.35rem; } .handoff p { color:var(--sub); font-size:.9rem; line-height:1.55; margin:0; } .fp-cta { padding:5.5rem 2rem; text-align:center; } .fp-cta h2 { font-size:clamp(1.6rem,3.2vw,2.2rem); letter-spacing:-.02em; margin-bottom:.9rem; } .fp-cta p { color:var(--sub); font-size:1.02rem; max-width:60ch; margin:0 auto 2rem; line-height:1.6; } @media (max-width:820px){ .cap-grid,.flow{grid-template-columns:1fr} } /* use-case vignettes ("In practice") */ .uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.4rem; } .uc-card { background: var(--bg); border: 1px solid var(--border); border-radius: 11px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; } .uc-card .who { font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--fp-accent, var(--accent)); margin-bottom: .75rem; } .uc-card .scene { color: var(--text); font-size: .95rem; line-height: 1.6; margin: 0 0 .9rem; } .uc-card .payoff { color: var(--sub); font-size: .86rem; line-height: 1.6; margin: auto 0 0; border-top: 1px dashed var(--border); padding-top: .85rem; } @media (max-width: 820px) { .uc-grid { grid-template-columns: 1fr; } }