/* Optara Labs — main stylesheet. Consumes styles/tokens.css (load tokens.css first). Class inventory for markup authors: .skip-link first element in , targets #main .container centered column, max-width var(--container) .site-header fixed header; add .scrolled via JS on scroll .wordmark live-text logo lockup in header .btn .btn-primary white bg / black text .btn .btn-secondary 1px border, transparent .pricing-grid 3-up card grid inside #pricing .tier / .tier.featured pricing card; featured = 1px solid white border only .badge small label on featured tier .price / .price-unit tier price line .honesty-list list inside #honesty .site-footer single-row footer .reveal scroll-in motion (progressive enhancement, JS adds .is-visible) .lede secondary-color supporting paragraph */ /* ---------- Fonts ---------- */ @font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/space-grotesk-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/space-grotesk-var-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0332, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--step-0); font-weight: 400; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } p a, li a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-2); } ul[class], ol[class] { list-style: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ---------- Type ---------- */ h1, h2, h3 { font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; } h1 { font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.02em; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); } p, li { max-width: 70ch; } small, .small { font-size: var(--step--1); } .lede { color: var(--text-2); font-size: var(--step-1); font-weight: 300; line-height: 1.5; } ::selection { background: var(--text); color: var(--bg); } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s3); } section { padding-block: clamp(80px, 10vw, 140px); } section > .container > h2 { margin-bottom: var(--s4); } /* ---------- Accessibility ---------- */ .skip-link { position: absolute; top: -100%; left: var(--s2); z-index: 100; padding: var(--s1) var(--s2); background: var(--accent); color: var(--bg); font-size: var(--step--1); } .skip-link:focus { top: var(--s2); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 1px solid transparent; transition: background-color 200ms ease-out, border-color 200ms ease-out; } .site-header.scrolled { background: var(--bg); border-bottom-color: var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .wordmark { display: flex; align-items: center; gap: var(--s2); font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; } .site-header nav { display: flex; align-items: center; gap: var(--s3); } .site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step--1); color: var(--text-2); transition: color 150ms ease-out; } .site-header nav a:hover { color: var(--text); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s3); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; border-radius: var(--radius); transition: opacity 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; } .btn-primary { background: var(--accent); color: var(--bg); } .btn-primary:hover { opacity: 0.85; } .site-header nav a.btn-primary { color: var(--bg); } .site-header nav a.btn-primary:hover { color: var(--bg); } .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--text-2); } /* ---------- Hero ---------- */ #hero { padding-top: clamp(140px, 22vh, 220px); } #hero .lede { margin-top: var(--s3); } #hero .btn, .cta-row .btn { margin-top: var(--s4); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); } /* ---------- Proof / steps ---------- */ #proof ol, .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); counter-reset: step; } #proof ol > li, .steps > li { counter-increment: step; max-width: none; } #proof ol > li::before, .steps > li::before { content: "0" counter(step); display: block; margin-bottom: var(--s2); font-size: var(--step--1); color: var(--text-2); letter-spacing: 0.1em; } #proof h3 { margin-bottom: var(--s1); } #proof p { color: var(--text-2); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: stretch; } .tier { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .tier.featured { border: 1px solid var(--accent); } .tier h3 { font-size: var(--step-0); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .badge { align-self: flex-start; padding: 2px var(--s1); font-size: var(--step--1); color: var(--bg); background: var(--accent); border-radius: var(--radius); } .price { font-size: var(--step-3); font-weight: 500; line-height: 1; } .price-unit { font-size: var(--step--1); color: var(--text-2); } .tier ul { display: grid; gap: var(--s1); flex-grow: 1; } .tier ul li { padding-left: var(--s3); position: relative; font-size: var(--step--1); color: var(--text-2); } .tier ul li::before { content: "—"; position: absolute; left: 0; color: var(--text-2); } .tier .btn { width: 100%; } /* ---------- Honesty ---------- */ #honesty { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .honesty-list { display: grid; gap: var(--s2); } .honesty-list li { padding-top: var(--s2); border-top: 1px solid var(--border); color: var(--text-2); } .honesty-list li:first-child { border-top: none; padding-top: 0; } /* ---------- About / Book ---------- */ #about p { color: var(--text-2); } #book { text-align: left; } #book .btn { margin-top: var(--s3); } #book p { color: var(--text-2); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding-block: var(--s4); } .site-footer .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--step--1); color: var(--text-2); } .site-footer svg { width: 20px; height: 20px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s3); margin-left: auto; } .site-footer a { display: inline-flex; align-items: center; min-height: 44px; transition: color 150ms ease-out; } .site-footer a:hover { color: var(--text); } /* ---------- Motion (single pattern, fully inert under reduced motion) ---------- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(8px); transition: opacity 250ms ease-out, transform 250ms ease-out; } .reveal.is-visible { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { #proof ol, .steps, .pricing-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .site-header nav { gap: var(--s2); } .cta-row .btn { width: 100%; } .site-footer nav { margin-left: 0; } } /* ---------- Print ---------- */ @media print { body { background: #fff; color: #000; } .site-header, .skip-link, .btn { display: none; } section { padding-block: 24px; } #honesty { background: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; } } /* tier-note: small secondary link under a pricing CTA */ .tier-note { margin-top: var(--s2); font-size: var(--step--1); text-align: center; } .tier-note a { color: var(--text-2); text-underline-offset: 3px; }