/* ── Design tokens ───────────────────────────────────────────── Lifted from @snapplify/ui's snapp-base.css (snappgraph.js) so the namespace aligns with the framework today. When the framework is wired as a submodule (post-cleanup-track per ADR 0005), this block is replaced by an `@import` of snapp-base.css and these definitions go away. ──────────────────────────────────────────────────────────── */ :root { --sg-brand-green: #b7cf3b; --sg-brand-green-dark: #6c943e; --sg-brand-green-light: #e8f0c8; --sg-brand-green-bg: #f5f8e8; --sg-brand-accent: #b7cf3b; --sg-surface-bg-body: #f8f9fa; --sg-surface-bg-card: #ffffff; --sg-surface-border: #e9ecef; --sg-surface-border-light: #f1f3f5; --sg-text-primary: #212529; --sg-text-secondary: #495057; --sg-text-muted: #6b7280; --sg-text-link: #3f6c98; --sg-radius-sm: 6px; --sg-radius-md: 10px; --sg-radius-lg: 16px; --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --sg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --sg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --sg-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14); --sg-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sg-font-family-display: var(--sg-font-family); --sg-font-size-sm: 0.8125rem; --sg-font-size-md: 0.9375rem; --sg-font-size-lg: 1.0625rem; --sg-font-size-xl: 1.25rem; --sg-font-size-2xl: 1.5rem; --sg-font-size-3xl: 1.875rem; --sg-font-weight-light: 300; --sg-font-weight-regular: 400; --sg-font-weight-medium: 500; --sg-font-weight-semibold: 600; --sg-font-line-height: 1.5; --sg-font-line-height-tight: 1.25; --sg-space-xs: 4px; --sg-space-sm: 8px; --sg-space-md: 12px; --sg-space-lg: 16px; --sg-space-xl: 24px; --sg-space-xxl: 32px; --sg-motion-fast: 120ms; --sg-motion-base: 200ms; --sg-motion-slow: 400ms; --sg-focus-ring: 0 0 0 3px rgba(183, 207, 59, 0.35); --sg-focus-color: var(--sg-brand-green); /* Back-compat alias kept so any inline references that crept in during v0.1.4–v0.4.0 still resolve. Remove on the next refactor. */ --brand-primary: var(--sg-brand-green); } /* Dark mode — opt in via `` OR honour the user's OS preference automatically via prefers-color-scheme. */ [data-sg-theme="dark"], [data-bs-theme="dark"] { --sg-surface-bg-body: #1a1a1a; --sg-surface-bg-card: #242424; --sg-surface-border: #3a3a3a; --sg-surface-border-light: #2e2e2e; --sg-text-primary: #e5e7eb; --sg-text-secondary: #b4bac0; --sg-text-muted: #868c92; --sg-text-link: #76b7b2; --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --sg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --sg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --sg-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); --sg-brand-green-light: #2a3518; --sg-brand-green-bg: #1a2210; } @media (prefers-color-scheme: dark) { :root:not([data-sg-theme="light"]) { --sg-surface-bg-body: #1a1a1a; --sg-surface-bg-card: #242424; --sg-surface-border: #3a3a3a; --sg-surface-border-light: #2e2e2e; --sg-text-primary: #e5e7eb; --sg-text-secondary: #b4bac0; --sg-text-muted: #868c92; --sg-text-link: #76b7b2; --sg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --sg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --sg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --sg-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); --sg-brand-green-light: #2a3518; --sg-brand-green-bg: #1a2210; } } /* High-contrast — opt in via ``. */ [data-sg-contrast="high"] { --sg-surface-border: #000000; --sg-surface-border-light: #000000; --sg-text-primary: #000000; --sg-text-secondary: #1a1a1a; --sg-text-muted: #444444; } /* ── Base ─────────────────────────────────────────────────────── */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; font-family: var(--sg-font-family); font-size: var(--sg-font-size-md); line-height: var(--sg-font-line-height); color: var(--sg-text-primary); background: var(--sg-surface-bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :focus-visible { outline: none; box-shadow: var(--sg-focus-ring); border-radius: var(--sg-radius-sm); } /* ── Layout shell ─────────────────────────────────────────────── */ .App { min-height: 100vh; display: flex; flex-direction: column; } .main-container { padding: var(--sg-space-xxl) 0; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; /* clip the parallax layer so it never paints outside */ isolation: isolate; /* keep the bg layer's z-index local */ } /* Background layer — slow right-to-left pan via CSS animation. Lives behind the content card via z-index. The layer is wider than the container (-10% / -10%) so the horizontal translate has room to move within without revealing edges. Loops back-and-forth at 90s. Intentional CDN-version outlier: everything else on the site pins 1.0.29, but city_bg.png at 1.0.29 is the older/smaller (901 KB) version. The 2.0.29 asset (1.45 MB) is the deliberately-upgraded background we want to keep. */ @keyframes parallax-pan { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-6%, 0, 0); } } .main-container__bg { position: absolute; inset: 0 -10% 0 -10%; background: url("https://cdn.snapplify.com/2.0.29/img/city_bg.png") no-repeat center 35%; background-size: cover; will-change: transform; z-index: -1; pointer-events: none; animation: parallax-pan 90s linear infinite alternate; } @media (prefers-reduced-motion: reduce) { .main-container__bg { animation: none; transform: none; } } .container { padding-right: var(--sg-space-lg); padding-left: var(--sg-space-lg); margin-right: auto; margin-left: auto; } .main-content-box { margin: var(--sg-space-xxl) auto; box-shadow: var(--sg-shadow-lg); background: var(--sg-surface-bg-card); padding: var(--sg-space-xxl) var(--sg-space-xxl); border-radius: var(--sg-radius-lg); border: 1px solid var(--sg-surface-border-light); } @media (min-width: 768px) { .main-content-box { padding: 48px; } } ul { display: flex; flex-direction: row; padding: 0; margin: var(--sg-space-sm) 0; } li { list-style-type: none; } a { color: var(--sg-text-link); cursor: pointer; font-weight: var(--sg-font-weight-medium); text-decoration: none; transition: color var(--sg-motion-fast) ease; } a:hover { color: var(--sg-brand-green-dark); text-decoration: none; } /* Underlines are opt-in. Only the footer legal links want one on hover — everything else (logos, OS tile buttons, the Book Buddy promo row, social icons) stays clean. */ .copyright_bar ul a:hover { text-decoration: underline; } /* ── Section headings ─────────────────────────────────────────── */ .section_heading { text-align: center; font-weight: var(--sg-font-weight-light); color: var(--sg-text-primary); margin: 0 0 var(--sg-space-xl); } .section_heading h1 { font-family: var(--sg-font-family-display); font-size: var(--sg-font-size-2xl); font-weight: var(--sg-font-weight-light); line-height: var(--sg-font-line-height-tight); letter-spacing: -0.01em; margin: 0; color: var(--sg-text-primary); } @media (min-width: 768px) { .section_heading h1 { font-size: var(--sg-font-size-3xl); } } .section_heading h1 strong { color: var(--sg-brand-green-dark); font-weight: var(--sg-font-weight-semibold); } .section_text { margin: var(--sg-space-xl) auto; font-weight: var(--sg-font-weight-regular); color: var(--sg-text-secondary); text-align: center; font-size: var(--sg-font-size-md); max-width: 36ch; } /* ── Reader-active row (icon + copy side-by-side) ─────────────── */ .reader-active { display: flex; align-items: center; gap: var(--sg-space-xl); margin: 0 0 var(--sg-space-xl); } .reader-active__link { flex: 0 0 auto; display: inline-block; line-height: 0; /* drop any baseline gap from the inline anchor */ } .reader-active__copy { flex: 1 1 auto; min-width: 0; text-align: left; } .reader-active__hello { margin: 0 0 var(--sg-space-xs); font-size: var(--sg-font-size-md); font-weight: var(--sg-font-weight-medium); color: var(--sg-text-muted); letter-spacing: 0.04em; text-transform: uppercase; } .reader-active__pitch { margin: 0; font-family: var(--sg-font-family-display); font-size: var(--sg-font-size-xl); font-weight: var(--sg-font-weight-light); line-height: var(--sg-font-line-height-tight); color: var(--sg-text-primary); } .reader-active__pitch strong { color: var(--sg-brand-green-dark); font-weight: var(--sg-font-weight-semibold); } @media (min-width: 992px) { .reader-active__pitch { font-size: var(--sg-font-size-2xl); } } @media (max-width: 768px) { .reader-active { flex-direction: column; text-align: center; gap: var(--sg-space-md); } .reader-active__copy { text-align: center; } } /* ── OS picker buttons ────────────────────────────────────────── */ .os-primary { display: block; margin: 0; width: 140px; height: 140px; padding: var(--sg-space-lg); background: var(--sg-surface-bg-card); border: 3px solid var(--sg-brand-green); border-radius: var(--sg-radius-lg); box-shadow: var(--sg-shadow-md); transition: transform var(--sg-motion-base) ease, box-shadow var(--sg-motion-base) ease; } .os-primary:hover, a:has(.os-primary):hover .os-primary, a:hover > .os-primary { transform: translateY(-2px); box-shadow: var(--sg-shadow-lg); } a:has(.os-primary):focus-visible { outline: none; border-radius: var(--sg-radius-lg); box-shadow: var(--sg-focus-ring), var(--sg-shadow-md); } .os-secondary { display: inline-block; background: var(--sg-surface-bg-card); margin: var(--sg-space-sm); width: 96px; height: 96px; padding: var(--sg-space-md); border: 2px solid var(--sg-surface-border); border-radius: var(--sg-radius-md); transition: border-color var(--sg-motion-fast) ease, transform var(--sg-motion-fast) ease, box-shadow var(--sg-motion-fast) ease; } .os-secondary:hover { border-color: var(--sg-brand-green); transform: translateY(-1px); box-shadow: var(--sg-shadow-sm); } a:has(.os-secondary):focus-visible { outline: none; border-radius: var(--sg-radius-md); box-shadow: var(--sg-focus-ring); } .img-sm { width: auto; border-color: var(--sg-text-primary); } /* ── Snappbot ─────────────────────────────────────────────────── */ .robot { height: 380px; max-width: 100%; width: auto; margin: 0; display: block; } /* Snappbot's column — pad the right edge so the mascot's outstretched hand can't crowd the icon next to it. */ .col-md-2:has(> .robot), .col-lg-2:has(> .robot) { padding-right: var(--sg-space-xl) !important; } @media (max-width: 1200px) { .robot { display: none; } .section_heading { margin-top: var(--sg-space-xl); } } /* ── Product promo (lifted from @snapplify/ui's product-promo) ──── */ .sg-promo { margin-top: var(--sg-space-xxl); padding-top: var(--sg-space-xl); border-top: 1px solid var(--sg-surface-border-light); } .sg-promo-title { margin: 0 0 var(--sg-space-md); font-size: var(--sg-font-size-sm); font-weight: var(--sg-font-weight-semibold); color: var(--sg-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .sg-promo-list { display: flex; flex-direction: column; gap: var(--sg-space-sm); } .sg-promo-row { display: flex; align-items: center; gap: var(--sg-space-md); padding: var(--sg-space-md); border: 1px solid var(--sg-surface-border-light); border-radius: var(--sg-radius-md); background: var(--sg-surface-bg-card); color: var(--sg-text-primary); text-decoration: none; transition: border-color var(--sg-motion-fast) ease, box-shadow var(--sg-motion-fast) ease, transform var(--sg-motion-fast) ease; } a.sg-promo-row:hover { border-color: var(--sg-promo-accent, var(--sg-brand-accent)); box-shadow: var(--sg-shadow-sm); transform: translateY(-1px); color: var(--sg-text-primary); text-decoration: none; /* override the global a:hover underline */ } .sg-promo-icon { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--sg-brand-green-bg); color: var(--sg-promo-accent, var(--sg-brand-green-dark)); border-radius: var(--sg-radius-md); } .sg-promo-icon-glyph { width: 22px; height: 22px; } .sg-promo-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sg-promo-name { font-weight: var(--sg-font-weight-semibold); font-size: var(--sg-font-size-md); color: var(--sg-text-primary); } .sg-promo-desc { font-size: var(--sg-font-size-sm); color: var(--sg-text-muted); line-height: var(--sg-font-line-height); } .sg-promo-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: var(--sg-space-xs) var(--sg-space-sm); font-size: var(--sg-font-size-sm); font-weight: var(--sg-font-weight-semibold); color: var(--sg-promo-accent, var(--sg-brand-green-dark)); white-space: nowrap; } .sg-promo-arrow { width: 14px; height: 14px; } /* ── Footer override ────────────────────────────────────────────── The vendor.css from cdn.snapplify.com paints `.copyright_bar` dark and uses legacy float-based column rules that overlap with content. We replace the layout entirely with explicit flex — the original Bootstrap column classes inside the markup are just structural hooks here; their dimensions come from the rules below. */ .copyright_bar { background: var(--sg-surface-bg-body) !important; color: var(--sg-text-secondary) !important; border-top: 1px solid var(--sg-surface-border) !important; padding: var(--sg-space-xl) 0 !important; } .copyright_bar > .container { max-width: 1200px; padding: 0 var(--sg-space-lg); } .copyright_bar .row { display: flex !important; flex-wrap: wrap; align-items: center; gap: var(--sg-space-lg); margin: 0 !important; } .copyright_bar .col-info { flex: 1 1 320px; min-width: 0; padding: 0 !important; /* Vendor.css puts .col-info children inline. Force a clean column so logo / copyright / legal links each get their own row. */ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: var(--sg-space-xs); } .copyright_bar .col-info > * { margin: 0 !important; width: auto; } .copyright_bar .social_icons { flex: 0 0 auto; padding: 0 !important; margin-left: auto; text-align: right; } .copyright_bar * { color: inherit; } .copyright_bar .footer_logo { height: 32px; margin-bottom: var(--sg-space-md); } .copyright_bar p { margin: 0 0 var(--sg-space-sm); font-size: var(--sg-font-size-sm); color: var(--sg-text-muted); } .copyright_bar ul { display: flex; flex-wrap: wrap; gap: var(--sg-space-xs) var(--sg-space-sm); margin: 0; padding: 0; } .copyright_bar ul li { display: inline-flex; align-items: center; } .copyright_bar ul a { color: var(--sg-text-link); font-size: var(--sg-font-size-sm); font-weight: var(--sg-font-weight-medium); } .copyright_bar ul a:hover { color: var(--sg-brand-green-dark); } .copyright_bar .social_icon { display: inline-flex; align-items: center; justify-content: center; margin-right: var(--sg-space-sm); transition: transform var(--sg-motion-fast) ease, opacity var(--sg-motion-fast) ease; opacity: 0.85; } .copyright_bar .social_icon:hover { transform: translateY(-2px); opacity: 1; } .copyright_bar .social_icon img { width: 22px; height: 22px; border-radius: 4px; /* Icons are already brand-styled (green-on-white squares) — no filter. */ } /* ── Mobile tightening ────────────────────────────────────────── */ @media (max-width: 768px) { .main-content-box { margin: var(--sg-space-lg) var(--sg-space-md); padding: var(--sg-space-xl) var(--sg-space-lg); } .os-primary { width: 140px; height: 140px; padding: var(--sg-space-lg); } .os-secondary { width: 80px; height: 80px; } .sg-promo-row { flex-wrap: wrap; } .sg-promo-cta { margin-left: auto; } .copyright_bar .social_icons { margin-left: 0; text-align: left; } } /*# sourceMappingURL=main.996ac202.css.map*/