/* =========================================================== locwinn — public site styles. Deliberately plain: one narrow column of readable text, default-ish links and buttons, no animation, no web fonts. The site should feel hand-made by one person, because it is. =========================================================== */ :root { /* task18 retheme: the installer's own palette — cream paper, sage family — so the site, installer, and dashboard read as one maker's hand (ADR-010). */ --bg: #f7f5ec; /* the installer's cream */ --ink: #26281f; --soft: #6d7062; --line: #e2dfd2; --link: #4e5c42; /* sage-deep — links match the product family */ --mark: #5c6b4e; --sage-deep: #4e5c42; } * { box-sizing: border-box; } /* author display rules must not defeat the hidden attribute */ [hidden] { display: none !important; } body { max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; background: var(--bg); color: var(--ink); font: 17px/1.65 Georgia, "Times New Roman", serif; } a { color: var(--link); } a:hover { color: #3a4632; } :focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; } h1, h2, h3 { line-height: 1.25; font-weight: bold; margin: 1.6em 0 0.4em; scroll-margin-top: 3.6rem; /* anchor jumps must clear the sticky topbar */ } h1 { font-size: 1.65rem; margin-top: 0.8em; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } p, ul, ol { margin: 0.7em 0; } ul, ol { padding-left: 1.4em; } li { margin: 0.25em 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; } code, kbd { font-family: Consolas, Menlo, monospace; font-size: 0.92em; background: #f1efe6; padding: 0.08em 0.3em; border-radius: 3px; } /* ---------- sticky header ---------- */ html { background: var(--bg); } /* when a dev/test banner is prepended to , the topbar must not pull itself up over it (its negative top margin exists to cancel the body padding) */ body.has-banner .topbar { margin-top: 0; } .topbar { position: sticky; top: 0; z-index: 20; background: rgba(247, 245, 236, 0.96); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin: -1.4rem -1.2rem 1.4rem; padding: 0.5rem 1.2rem 0.45rem; } /* the full-logo lockup: meditation mark + serif wordmark (matches the brand asset) */ .brand { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .brand img { width: 26px; height: 26px; display: block; align-self: center; } .brand-word { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: normal; letter-spacing: 0.015em; line-height: 1; } .topnav { font-size: 0.92rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.2em 0.9em; } .topnav a { white-space: nowrap; } .nav-auth { font-size: 0.85rem; padding: 0.2em 0.85em; } /* the bordered sign-in / buy button */ .lede { font-size: 1.05rem; } /* ---------- product shots carousel (scroll-snap; arrows are a tiny script) ---------- */ .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; margin: 1.1rem 0 0.3rem; scrollbar-width: none; /* one clean frame — the arrows + counter are the controls */ } .shots::-webkit-scrollbar { display: none; } .shots figure { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; margin: 0; } .shots img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 5px rgba(44, 42, 36, 0.08); } /* the caption IS the slide's selling point (task21): bold claim + quiet sub-line */ .shots figcaption { font-size: 0.95rem; color: var(--ink); text-align: center; margin-top: 0.5rem; } .shots figcaption b { display: block; } .shots figcaption .point-sub { font-size: 0.85rem; } .shots-nav { text-align: center; font-size: 0.9rem; color: var(--soft); margin: 0.1rem 0 0; } .shots-nav button { font-size: 0.85rem; padding: 0.15em 0.7em; margin: 0 0.35em; } .shots-nav span { display: inline-block; min-width: 3.2em; /* keep the arrows from shifting as the counter changes */ font-variant-numeric: tabular-nums; } /* ---------- point sub-lines (used inside the carousel captions) ---------- */ .point-sub { display: block; color: var(--soft); font-size: 0.9rem; } .point-sub a { color: var(--soft); } /* ---------- the step-by-step install guide (written for patient reading) ---------- */ .guide { font-size: 18px; } .guide h2 { margin-top: 1.9em; } .guide-shot { margin: 0.8rem 0 0.4rem; } .guide-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 5px rgba(44, 42, 36, 0.08); } .guide-shot figcaption { margin-top: 0.4rem; font-size: 0.88rem; color: var(--soft); font-style: italic; } /* ---------- pricing ---------- */ .plan-box { border: 1px solid var(--line); background: #fffef8; border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0.9rem 0; } .plan-box h3 { margin: 0 0 0.2em; } .plan-badge { font-size: 0.68rem; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--sage-deep); border-radius: 999px; padding: 0.12em 0.6em; vertical-align: 0.15em; margin-left: 0.35em; } .plan-price { font-size: 1.05rem; } .plan-sub { color: var(--soft); font-size: 0.92rem; margin: 0.2em 0 0.6em; } /* installer-style pill controls (matches the setup UI and the dashboard) */ button, .btn { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.92rem; color: var(--ink); background: #fffef8; border: 1px solid #bcb9a8; border-radius: 999px; padding: 0.5em 1.3em; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .btn:hover { background: #f1efe3; color: var(--ink); } button:disabled { opacity: 0.6; cursor: default; } /* the committed actions — buy buttons, the auth CTA — get the sage fill */ .plan-box button, .nav-auth { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; } .plan-box button:hover, .nav-auth:hover { background: #42503a; color: #fff; } select, textarea { /* controls stay sans even though the body voice is serif — same rule the dashboard uses, so the support form's inputs match the account page's inputs. */ font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 0.95rem; color: var(--ink); background: #fffef9; border: 1px solid #b9b5a7; border-radius: 4px; padding: 0.35em 0.6em; max-width: 100%; } textarea { width: 100%; resize: vertical; } /* ---------- FAQ (native

, works without JS) ---------- */ details { margin: 0.55em 0; background: #fffef8; border: 1px solid var(--line); border-radius: 10px; padding: 0.5em 0.9em; } summary { cursor: pointer; font-weight: bold; } details p { margin: 0.5em 0 0.4em 0.1em; } /* ---------- misc ---------- */ .note { color: var(--soft); font-size: 0.9rem; } .checkout-note { color: #8a3030; margin-top: 0.5rem; } /* checkout errors read as errors */ .error-note { color: #8a3030; font-size: 0.95rem; } .site-foot { margin-top: 3rem; color: var(--soft); font-size: 0.88rem; } .site-foot a { color: var(--soft); } @media (max-width: 480px) { body { font-size: 16px; padding: 1rem 0.9rem 3rem; } }