/* ============================================================================= 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-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-label: ui-monospace, SFMono-Regular, Menlo, monospace; --fw-display: 700; --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:#b3a9d8; --accent:#ffbe3d; --accent-ink:#241a00; --panel:#1e1849; --line:#332a68; } [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 --------------------------------------------------- */ [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:"Haettenschweiler","Arial Narrow",Impact,sans-serif; --ff-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,sans-serif; --fw-display:400; --tr-display:0; --lh-display:.98; } [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-body:ui-sans-serif,system-ui,sans-serif; --ff-label:ui-sans-serif,sans-serif; --fw-display:700; --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) 22%, transparent), transparent 70%), radial-gradient(50vw 50vw at 95% 30%, color-mix(in srgb, var(--accent) 14%, 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); letter-spacing:var(--tr-display); line-height:var(--lh-display); margin:0 0 .5em } h1 { font-size:clamp(2.4rem,6.2vw,4.6rem) } h2 { font-size:clamp(1.7rem,3.4vw,2.7rem) } 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(6rem,14vh,10rem) } /* ---- 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:.5rem; font-family:var(--ff-display); font-weight:var(--fw-display); 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) } .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 --------------------------------------- */ .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 > * { position:relative; overflow:hidden; padding:1.4rem; background:var(--panel); border:var(--border); border-radius:var(--r-panel); box-shadow:var(--shadow) } .bento > h3,.benefits h3,.tiers h3 { font-family:var(--ff-display); margin:.1rem 0 .4rem; font-size:1.15rem } /* pointer spotlight: JS writes only --mx/--my, the gradient itself lives here */ .bento > *::after,.benefits > *::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{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; padding:1.4rem; background:var(--panel); border:var(--border); border-radius:var(--r-panel) } .proof cite { display:block; margin-top:.7rem; font-style:normal; font-size:.9rem; color:var(--ink-soft) } .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, footer, sticky --------------------------------------------- */ .hero__art { margin-top:2.5rem; max-width:100% } .hero__art svg { width:100%; height:auto; display:block } .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:1.15rem; position:sticky; top:5rem; align-self:start } [data-layout="editorial-rail"] .s > :not(h2){ grid-column:2 } } [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 } } /* ---- print ---------------------------------------------------------------- */ @media print { .nav,.sticky,.hero__art{display:none} body{background:#fff;color:#000} }