/* Receipt Ripper — shared styles for static info pages. * * Every page under public/{about,contact,faq,privacy,terms}.html and * the per-language `/{lang}/{page}.html` shells emitted by * scripts/gen-static-pages.mjs link to this file. The goal is visual * parity with the React landing page: same indigo brand bar, same * slate palette, same width (matches Tailwind's `max-w-4xl` / * `mx-auto px-4 py-8`), same card-style section blocks, same footer. * * No build step — this is plain CSS so the pages stay viewable * without JavaScript or the Vite bundle. */ /* * Theming model: class-based, manual override. * * The FOUC-prevention script in each reads localStorage * `rr-theme` (or system preference if absent) and adds `dark` to * before paint. The class is the single switch — once * present, the dark variables below override the light ones above. * * `color-scheme: light dark` lets browser UI (scrollbars, form * controls, the autofill highlight) follow the theme without needing * separate rules for each. */ :root { color-scheme: light; --bg-from: #f8fafc; /* slate-50 */ --bg-to: #f1f5f9; /* slate-100 */ --fg: #0f172a; /* slate-900 */ --fg-soft: #334155; /* slate-700 */ --muted: #64748b; /* slate-500 */ --muted-strong: #475569; /* slate-600 */ --rule: #e2e8f0; /* slate-200 */ --rule-strong: #cbd5e1; /* slate-300 */ --card-bg: #ffffff; --link: #4338ca; /* indigo-700 */ --link-strong: #3730a3; /* indigo-800 */ --accent: #4f46e5; /* indigo-600 */ --accent-soft: rgba(79, 70, 229, 0.08); --brand-from: #6366f1; /* indigo-500 */ --brand-to: #4338ca; /* indigo-700 */ } :root.dark { color-scheme: dark; --bg-from: #020617; /* slate-950 */ --bg-to: #0f172a; /* slate-900 */ --fg: #f1f5f9; /* slate-100 */ --fg-soft: #cbd5e1; /* slate-300 */ --muted: #94a3b8; /* slate-400 */ --muted-strong: #cbd5e1; /* slate-300 */ --rule: #1e293b; /* slate-800 */ --rule-strong: #334155; /* slate-700 */ --card-bg: #0f172a; /* slate-900 */ --link: #a5b4fc; /* indigo-300 */ --link-strong: #c7d2fe; /* indigo-200 */ --accent: #818cf8; /* indigo-400 */ --accent-soft: rgba(129, 140, 248, 0.12); } * { box-sizing: border-box; } /* * Always-visible vertical scrollbar. Reserves the gutter * unconditionally so navigating between a short page (e.g. * /privacy.html) and a long one (e.g. /faq.html) doesn't shift the * page width — every centred element would otherwise jump by the * scrollbar's width. Mirrors the rules in src/index.css for the * React app. */ html { -webkit-text-size-adjust: 100%; overflow-y: scroll; scrollbar-color: #cbd5e1 #f1f5f9; /* slate-300 thumb, slate-100 track */ scrollbar-width: auto; } :root.dark html, html.dark { scrollbar-color: #334155 #0f172a; /* slate-700 thumb, slate-900 track */ } /* WebKit (Chrome / Safari / Edge). 14px gutter with a 4px transparent inset gives the thumb a 6px visible body that matches the soft slate palette. */ ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border: 4px solid #f1f5f9; border-radius: 7px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } ::-webkit-scrollbar-corner { background: #f1f5f9; } html.dark ::-webkit-scrollbar-track { background: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background: #334155; border-color: #0f172a; } html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; } html.dark ::-webkit-scrollbar-corner { background: #0f172a; } /* Body chrome (font-family, line-height, smoothing) — background and text colour come from the Tailwind utilities on the element itself, so this rule only contributes typography defaults. */ body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-underline-offset: 3px; } a:hover { color: var(--link-strong); } /* Header chrome — brand bar, top nav, theme toggle, brand icon, brand name, tagline — all use Tailwind utility classes in the markup itself (see renderLandingHeader in scripts/render-shared.mjs). The utilities resolve via the React CSS bundle that every static page links. Only the sun/moon visibility swap stays here as plain CSS because Tailwind doesn't have a direct utility for "show child if ancestor.dark". */ .theme-sun { display: none; } .theme-moon { display: inline-block; } :root.dark .theme-sun { display: inline-block; } :root.dark .theme-moon { display: none; } /* ----- Hero (H1 + subhead) ----- */ .hero { display: flex; flex-direction: column; gap: 0.375rem; } h1 { margin: 0; font-size: 1.875rem; letter-spacing: -0.025em; font-weight: 700; color: var(--fg); } @media (min-width: 640px) { h1 { font-size: 2.25rem; } } .subhead { margin: 0; color: var(--muted-strong); font-size: 1rem; } @media (min-width: 640px) { .subhead { font-size: 1.125rem; } } /* ----- Section cards ----- */ .card { border: 1px solid var(--rule); background: var(--card-bg); border-radius: 0.75rem; padding: 1.25rem; } @media (min-width: 640px) { .card { padding: 1.5rem; } } .section { display: flex; flex-direction: column; gap: 0.75rem; } .section h2 { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 700; color: var(--fg); letter-spacing: -0.01em; scroll-margin-top: 1rem; } @media (min-width: 640px) { .section h2 { font-size: 1.375rem; } } .section .icon-h { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .section .icon-h svg { width: 1.125rem; height: 1.125rem; } .section h3 { margin: 1rem 0 0.25rem; font-size: 1rem; font-weight: 600; color: var(--fg); } .section p, .section li { margin: 0; color: var(--fg-soft); font-size: 0.9375rem; } .section p + p { margin-top: 0.75rem; } .section ul { padding-left: 1.25rem; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.375rem; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; background: rgba(148, 163, 184, 0.15); padding: 0.1em 0.35em; border-radius: 3px; } /* ----- Email CTA button (contact page) ----- */ .email-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; padding: 0.625rem 1rem; background: var(--accent-soft); border: 1px solid rgba(79, 70, 229, 0.25); border-radius: 0.625rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9375rem; font-weight: 500; color: var(--link); text-decoration: none; } .email-cta:hover { text-decoration: underline; } .email-cta svg { width: 1rem; height: 1rem; } /* ----- TOC (FAQ page) ----- */ .toc { padding: 1rem 1.25rem; background: rgba(148, 163, 184, 0.08); border: 1px solid var(--rule); border-radius: 0.75rem; } .toc-label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .toc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.25rem 1rem; } @media (min-width: 640px) { .toc ul { grid-template-columns: 1fr 1fr; } } .toc li { font-size: 0.9375rem; } .toc a { text-decoration: none; } .toc a:hover { text-decoration: underline; } /* ----- Meta line (the small italic "last updated" / lead-in) ----- */ .meta { margin: 0; color: var(--muted); font-size: 0.875rem; } /* ----- Guide-specific bits ----- */ .guide-breadcrumb { margin: 0 0 -0.25rem; font-size: 0.875rem; } .guide-breadcrumb a { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); text-decoration: none; } .guide-breadcrumb a:hover { color: var(--fg-soft); } .guide-breadcrumb svg { width: 1rem; height: 1rem; } .guide-meta { margin: 0.25rem 0 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--muted); } .guide-meta > span { display: inline-flex; align-items: center; gap: 0.25rem; } .guide-meta svg { width: 0.875rem; height: 0.875rem; } .guide-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 640px) { .guide-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } } .guide-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.25rem; background: var(--card-bg); border: 1px solid var(--rule); border-radius: 0.75rem; text-decoration: none; color: inherit; transition: border-color 120ms ease, transform 120ms ease; } .guide-card:hover { border-color: var(--accent); color: inherit; transform: translateY(-1px); } .guide-card .icon-h { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; } .guide-card .icon-h svg { width: 1.25rem; height: 1.25rem; } .guide-card h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } .guide-card-desc { margin: 0; color: var(--fg-soft); font-size: 0.875rem; line-height: 1.5; } .guide-card-meta { margin: 0.5rem 0 0; display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); font-size: 0.75rem; } .related { display: flex; flex-direction: column; gap: 0.75rem; } .related h2 { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--fg); } /* ----- Footer (mirrors App.tsx footer) ----- */ .footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 0.75rem; row-gap: 0.25rem; padding: 1rem 0 1.5rem; text-align: center; font-size: 0.75rem; color: var(--muted); } .footer a, .footer button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: none; cursor: pointer; text-underline-offset: 3px; } .footer a:hover, .footer button:hover { color: var(--fg-soft); text-decoration: underline; } .footer .sep { user-select: none; }