/* ============================================================================= ALXEVT one-page sales site - single stylesheet, seven variant axes. Nothing here is inline: style-src is 'self', so every visual decision must be expressible as a custom property switched by a data-* attribute on . ============================================================================= */ /* ---- tokens: defaults, overridden by the axis blocks below ---------------- */ :root { --ground: #ffffff; --ink: #101014; --ink-soft: #4a4a55; --accent: #2f4bff; --accent-ink: #ffffff; --panel: #f5f5f7; --line: #dcdce3; --ff-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* --ff-sub is the face for h3, the brand mark and other SMALL display contexts. It defaults to the display face but any axis whose display face is only legible at poster size MUST override it. A face chosen for a 4.6rem lead is not automatically a face for a 1.15rem card heading. */ --ff-sub: var(--ff-display); --ff-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-label: ui-monospace, SFMono-Regular, Menlo, monospace; --fw-display: 700; --stretch-display: normal; --tr-display: -0.02em; --tr-label: 0.08em; --lh-display: 1.05; --r-panel: 12px; --r-btn: 10px; --border: 1px solid var(--line); --shadow: none; --panel-cut: 0; --dur: 620ms; --ease: cubic-bezier(.22,.61,.36,1); --measure: 68ch; --pad-x: clamp(1.25rem, 5vw, 5rem); --gap-s: clamp(3.5rem, 9vw, 8rem); --surface: none; --surface-size: auto; --tx: 0px; --ty: 0px; } /* ---- axis 3: palette ------------------------------------------------------ */ [data-palette="ink-on-paper"] { --ground:#faf8f4; --ink:#14130f; --ink-soft:#55524a; --accent:#c0341a; --accent-ink:#fff; --panel:#f2efe8; --line:#ddd8cd; } [data-palette="night-neon"] { --ground:#0b0d12; --ink:#eef1f7; --ink-soft:#9aa3b5; --accent:#8ef04a; --accent-ink:#0b0d12; --panel:#151923; --line:#252b39; } [data-palette="warm-earth"] { --ground:#efe6d9; --ink:#33251a; --ink-soft:#6b5748; --accent:#a4522c; --accent-ink:#fff; --panel:#e4d6c3; --line:#cfbda6; } [data-palette="cold-steel"] { --ground:#151a20; --ink:#f2f6fa; --ink-soft:#9fb0c0; --accent:#3ad4e6; --accent-ink:#0d1116; --panel:#1e252e; --line:#2f3a46; } [data-palette="duotone-split"] { --ground:#141034; --ink:#f6f2ff; --ink-soft:#c2b9e4; --accent:#ffbe3d; --accent-ink:#241a00; --panel:#1e1849; --line:#3b3178; } [data-palette="high-key-pastel"]{ --ground:#fdfdff; --ink:#1b1b2a; --ink-soft:#5c5c75; --accent:#5b3df5; --accent-ink:#fff; --panel:#eef0ff; --line:#dcdff5; } [data-palette="mono-accent"] { --ground:#ffffff; --ink:#0a0a0a; --ink-soft:#5a5a5a; --accent:#ff3b1f; --accent-ink:#fff; --panel:#f0f0f0; --line:#d6d6d6; } /* ---- axis 2: typography --------------------------------------------------- Every block that sets a poster-only display face also sets --ff-sub back to something readable at 1.15rem. Impact and Haettenschweiler are deliberately absent from every stack: they were the cause of an unreadable card heading in production, and no fallback chain rescues a face that is illegible at the size it is actually used. */ [data-type="grotesk-mono"] { --ff-display:"Helvetica Neue",Inter,ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-monospace,Menlo,monospace; --fw-display:800; --tr-display:-.035em; } [data-type="serif-sans"] { --ff-display:"Iowan Old Style",Georgia,"Times New Roman",serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,system-ui,sans-serif; --fw-display:700; --tr-display:-.01em; --lh-display:1.1; } [data-type="condensed-lead"]{ --ff-display:"Arial Narrow","Helvetica Neue",system-ui,sans-serif; --ff-sub:ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-monospace,Menlo,monospace; --fw-display:700; --stretch-display:condensed; --tr-display:-.015em; --lh-display:1 } [data-type="slab-geometric"]{ --ff-display:Rockwell,"Roboto Slab",Georgia,serif; --ff-body:Futura,"Century Gothic",ui-sans-serif,sans-serif; --ff-label:ui-monospace,monospace; --fw-display:700; } [data-type="system-neutral"]{ --ff-display:system-ui,sans-serif; --ff-body:system-ui,sans-serif; --ff-label:system-ui,sans-serif; --fw-display:800; --tr-display:-.03em; } [data-type="display-narrow"]{ --ff-display:"Avenir Next Condensed","Arial Narrow",sans-serif; --ff-sub:ui-sans-serif,system-ui,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,sans-serif; --fw-display:700; --stretch-display:condensed; --tr-label:.22em; } [data-type="mono-only"] { --ff-display:ui-monospace,SFMono-Regular,Menlo,monospace; --ff-body:ui-monospace,SFMono-Regular,Menlo,monospace; --ff-label:ui-monospace,monospace; --fw-display:700; --tr-display:-.02em; --measure:62ch; } /* ---- axis 4: shape -------------------------------------------------------- */ [data-shape="sharp-0"] { --r-panel:0; --r-btn:0; } [data-shape="soft-24"] { --r-panel:24px; --r-btn:16px; } [data-shape="pill-999"] { --r-panel:4px; --r-btn:999px; } [data-shape="mixed-cut"] { --r-panel:0; --r-btn:0; --panel-cut:22px; } [data-shape="hairline-frame"]{ --r-panel:2px; --r-btn:2px; --panel:transparent; --border:1px solid var(--line); } [data-shape="blocky-shadow"] { --r-panel:0; --r-btn:0; --shadow:6px 6px 0 var(--ink); } [data-shape="mixed-cut"] .bento > *, [data-shape="mixed-cut"] .benefits > *, [data-shape="mixed-cut"] .tiers > * { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--panel-cut)), calc(100% - var(--panel-cut)) 100%, 0 100%); } /* ---- axis 6: texture ------------------------------------------------------ */ [data-texture="grid-lines"] body { --surface: repeating-linear-gradient(0deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 72px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 0 1px, transparent 1px 72px); } [data-texture="dot-matrix"] body { --surface: radial-gradient(color-mix(in srgb, var(--line) 90%, transparent) 1px, transparent 1.2px); --surface-size: 22px 22px; } [data-texture="gradient-mesh"] body{ --surface: radial-gradient(60vw 60vw at 12% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(50vw 50vw at 95% 30%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%); } [data-texture="grain-noise"] body { --surface: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); } [data-texture="glass-blur"] .bento > *, [data-texture="glass-blur"] .benefits > *, [data-texture="glass-blur"] .nav__in { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--panel) 62%, transparent); } /* ---- axis 5: motion ------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .reveal { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), clip-path var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 55ms); } [data-motion="fade-rise"] .reveal { opacity:0; transform: translateY(16px); } [data-motion="scale-settle"] .reveal { opacity:0; transform: scale(.965); } [data-motion="slide-lateral"] .reveal { opacity:0; transform: translateX(-28px); } [data-motion="slide-lateral"] .s:nth-of-type(even) .reveal, [data-motion="slide-lateral"] .bento > :nth-child(even) { transform: translateX(28px); } [data-motion="mask-wipe"] .reveal { opacity:0; clip-path: inset(0 0 100% 0); } .reveal.is-in { opacity:1; transform:none; clip-path: inset(0 0 0 0); } } [data-motion="none-static"] .reveal { opacity:1 !important; transform:none !important; clip-path:none !important; } /* ---- axis 7: rhythm (section order) --------------------------------------- */ main { display:flex; flex-direction:column; } #hero { order:0 } #cta-final { order:90 } [data-rhythm="classic"] #problem{order:10} [data-rhythm="classic"] #solution{order:20} [data-rhythm="classic"] #features{order:30} [data-rhythm="classic"] #proof{order:40} [data-rhythm="classic"] #offer{order:50} [data-rhythm="classic"] #faq{order:60} [data-rhythm="proof-early"] #proof{order:10} [data-rhythm="proof-early"] #problem{order:20} [data-rhythm="proof-early"] #solution{order:30} [data-rhythm="proof-early"] #features{order:40} [data-rhythm="proof-early"] #offer{order:50} [data-rhythm="proof-early"] #faq{order:60} [data-rhythm="offer-early"] #solution{order:10}[data-rhythm="offer-early"] #offer{order:20} [data-rhythm="offer-early"] #problem{order:30} [data-rhythm="offer-early"] #features{order:40} [data-rhythm="offer-early"] #proof{order:50} [data-rhythm="offer-early"] #faq{order:60} /* ---- base ----------------------------------------------------------------- */ *,*::before,*::after { box-sizing:border-box } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } } body { margin:0; background-color:var(--ground); background-image:var(--surface); background-size:var(--surface-size); background-attachment:fixed; color:var(--ink); font-family:var(--ff-body); font-size:clamp(1rem,.55vw + .9rem,1.125rem); line-height:1.6; text-rendering:optimizeLegibility; } h1,h2 { font-family:var(--ff-display); font-weight:var(--fw-display); font-stretch:var(--stretch-display); letter-spacing:var(--tr-display); line-height:var(--lh-display); margin:0 0 .5em } h1 { font-size:clamp(2.6rem,6.6vw,5rem) } h2 { font-size:clamp(1.7rem,3.4vw,2.7rem) } h3 { font-family:var(--ff-sub); font-weight:700; font-size:1.1rem; letter-spacing:0; line-height:1.3; margin:.1rem 0 .5rem } p { margin:0 0 1em; max-width:var(--measure) } a { color:inherit } .eyebrow,.trust,.sticky__txt { font-family:var(--ff-label); font-size:.78rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft) } .lede { font-size:1.15em; color:var(--ink-soft) } .skip { position:absolute; left:-9999px } .skip:focus { left:1rem; top:1rem; z-index:99; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem } :focus-visible { outline:3px solid var(--accent); outline-offset:3px } .s { padding:var(--gap-s) var(--pad-x); scroll-margin-top:5rem } .s--hero { padding-top:clamp(5rem,12vh,8rem); padding-bottom:clamp(4rem,10vw,7rem) } /* ---- nav ------------------------------------------------------------------ */ .nav { position:sticky; top:0; z-index:40 } .nav__in { display:flex; align-items:center; gap:1.25rem; padding:.7rem var(--pad-x); background:color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter:blur(10px); border-bottom:var(--border) } .brand { display:flex; align-items:center; gap:.55rem; font-family:var(--ff-sub); font-weight:700; font-size:1rem; letter-spacing:0; text-decoration:none } .brand__mark { display:grid; place-items:center; width:1.7em; height:1.7em; border-radius:var(--r-btn); background:var(--accent); color:var(--accent-ink); font-family:var(--ff-label); font-size:.85em } .nav__links { display:none; gap:1.25rem; margin-left:auto; font-size:.95rem } .nav__links a { text-decoration:none; color:var(--ink-soft) } .nav__links a:hover { color:var(--ink) } .nav .btn--sm { margin-left:auto } @media (min-width:52rem){ .nav__links{display:flex} .nav .btn--sm{margin-left:0} } /* ---- buttons -------------------------------------------------------------- */ .btn { display:inline-block; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:600; border-radius:var(--r-btn); box-shadow:var(--shadow); padding:.7rem 1.15rem; translate:var(--tx) var(--ty); transition:translate 180ms var(--ease), filter 180ms } .btn--lg { padding:1rem 1.9rem; font-size:1.05rem } .btn--sm { padding:.5rem .95rem; font-size:.9rem } .btn:hover { filter:brightness(1.08) } @media (prefers-reduced-motion: reduce){ .btn{ translate:0 0 !important; transition:none } } .cta-row { margin:1.6rem 0 .8rem } /* ---- panels: bento, benefits, tiers, proof -------------------------------- */ .bento,.benefits,.tiers { display:grid; gap:clamp(.75rem,1.6vw,1.25rem); margin-top:2rem } .benefits,.tiers { grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)) } .bento { grid-template-columns:repeat(2,1fr) } @media (min-width:56rem){ .bento{ grid-template-columns:repeat(4,1fr) } .bento > :nth-child(1){ grid-column:span 2; grid-row:span 2 } .bento > :nth-child(4){ grid-column:span 2 } } .bento > *,.benefits > *,.tiers > *,.proof blockquote { position:relative; overflow:hidden; padding:1.4rem; background:var(--panel); border:var(--border); border-radius:var(--r-panel); box-shadow:var(--shadow) } /* Pointer spotlight. Bound to EVERY panel: an affordance present on the feature grid and missing on proof and pricing reads as broken, which is how it was reported. JS writes only --mx/--my; the gradient lives here because style-src 'self' forbids injecting style text from script. */ .bento > *::after,.benefits > *::after,.tiers > *::after,.proof blockquote::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 220ms; background:radial-gradient(14rem 14rem at var(--mx) var(--my), color-mix(in srgb,var(--accent) 24%,transparent), transparent 70%) } @media (hover:hover) and (pointer:fine){ .bento > *:hover::after,.benefits > *:hover::after, .tiers > *:hover::after,.proof blockquote:hover::after { opacity:1 } } .tiers > .is-recommended { border-color:var(--accent); border-width:2px } /* ---- pains, proof, faq, offer --------------------------------------------- */ .pains { list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) } .pains li { padding-left:1.6rem; position:relative; color:var(--ink-soft) } .pains li::before { content:"\2014"; position:absolute; left:0; color:var(--accent) } .proof { margin-top:2rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)) } .proof blockquote { margin:0 } .proof blockquote p { margin:0 } .proof cite { display:block; margin-top:.7rem; font-style:normal; font-family:var(--ff-label); font-size:.75rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent) } .faq { margin-top:2rem; max-width:var(--measure); border-top:var(--border) } .faq details { border-bottom:var(--border) } .faq summary { cursor:pointer; padding:1rem 0; font-weight:600; list-style:none } .faq summary::-webkit-details-marker { display:none } .faq summary::after { content:"+"; float:right; color:var(--accent) } .faq details[open] summary::after { content:"\2013" } .faq details > p { padding-bottom:1rem; color:var(--ink-soft) } .guarantee { margin-top:1.5rem; font-size:.95rem; color:var(--ink-soft) } /* ---- hero art, caption, footer, sticky ------------------------------------ */ .hero__art { margin-top:2.5rem; max-width:100% } .hero__art svg { width:100%; height:auto; display:block } .figcap { margin-top:.9rem; font-family:var(--ff-label); font-size:.75rem; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--ink-soft); max-width:none } .foot { padding:2.5rem var(--pad-x) 7rem; border-top:var(--border); font-size:.9rem; color:var(--ink-soft) } .foot__links { display:flex; gap:1.25rem; flex-wrap:wrap } .sticky { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem var(--pad-x); background:color-mix(in srgb,var(--ground) 92%,transparent); backdrop-filter:blur(12px); border-top:var(--border); transform:translateY(110%); transition:transform 260ms var(--ease); padding-bottom:calc(.7rem + env(safe-area-inset-bottom)) } .sticky.is-on { transform:translateY(0) } .sticky[hidden] { display:none } @media (prefers-reduced-motion: reduce){ .sticky{ transition:none } } /* ---- axis 1: layout ------------------------------------------------------- */ [data-layout="stack-center"] .s { max-width:64rem; margin-inline:auto; text-align:center } [data-layout="stack-center"] p,[data-layout="stack-center"] .pains { margin-inline:auto } [data-layout="stack-center"] .cta-row { display:flex; justify-content:center } [data-layout="split-asym"] .s--hero { display:grid; gap:2.5rem; align-items:center } @media (min-width:60rem){ [data-layout="split-asym"] .s--hero{ grid-template-columns:1.5fr 1fr } [data-layout="split-asym"] .hero__art{ grid-row:1/6; grid-column:2; margin-top:0 } } [data-layout="editorial-rail"] .s { max-width:78rem; margin-inline:auto; display:grid; gap:1.5rem } @media (min-width:64rem){ [data-layout="editorial-rail"] .s{ grid-template-columns:12rem minmax(0,1fr) } [data-layout="editorial-rail"] .s > h2{ grid-column:1; font-size:1rem; position:sticky; top:5rem; align-self:start; font-family:var(--ff-label); font-weight:600; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--accent); font-stretch:normal } [data-layout="editorial-rail"] .s > :not(h2){ grid-column:2 } /* The hero has no h2, so with the rail rule alone its rail sits empty and the whole block reads as an indented paragraph rather than an opening. It spans both columns instead. */ [data-layout="editorial-rail"] .s--hero{ grid-template-columns:minmax(0,1fr) } [data-layout="editorial-rail"] .s--hero > *{ grid-column:1 } [data-layout="editorial-rail"] .s--hero .lede{ max-width:34ch; font-size:1.3em } } [data-layout="panel-mosaic"] .s:nth-of-type(odd) { background:var(--panel) } [data-layout="panel-mosaic"] .s > * { max-width:72rem; margin-inline:auto } [data-layout="wide-band"] .s { max-width:96rem; margin-inline:auto } [data-layout="wide-band"] .lede,[data-layout="wide-band"] .s > p { max-width:46ch } @media (min-width:70rem){ [data-layout="wide-band"] .s--problem .pains{ grid-template-columns:repeat(3,1fr) } } [data-layout="sidebar-index"] .s { max-width:80rem; margin-inline:auto; position:relative } @media (min-width:68rem){ [data-layout="sidebar-index"] .s{ padding-left:7rem } [data-layout="sidebar-index"] .s > h2::before{ content:counter(sec,decimal-leading-zero); counter-increment:sec; position:absolute; left:var(--pad-x); font-family:var(--ff-label); font-size:.8rem; color:var(--accent) } [data-layout="sidebar-index"] main{ counter-reset:sec } } /* ---- hero emphasis: the opening must not read as another content block ----- */ .s--hero .eyebrow { color:var(--accent) } .s--hero::after { content:""; display:block; height:1px; margin-top:clamp(3rem,7vw,5rem); background:linear-gradient(90deg, var(--accent), transparent 60%) } /* ---- print ---------------------------------------------------------------- */ @media print { .nav,.sticky,.hero__art{display:none} body{background:#fff;color:#000} }