/* Afterward — "Linen & Ink" design system (Warm & Humanist) * Calm, warm, highly readable. No SaaS blue, no pure black, no alarm red. * Caution is communicated in warm terracotta, never red. * * Usage: * Light is the default (:root). * activates dark mode. * (Optional) + the prefers-color-scheme block below * to follow the OS, while still allowing an explicit override. */ :root { /* ---- Surfaces ---- */ --paper: #FBF9F4; /* app background */ --surface: #F4EFE6; /* cards / containers */ --surface-2: #EAE2D5; /* selected states / inputs */ --line-border: #D1C7B7; /* dividers / hairlines */ /* ---- Text (ink) ---- */ --ink: #2C2621; /* primary text */ --ink-soft: #5C534A; /* secondary text */ --ink-faint: #6F665B; /* secondary / placeholder (AA: 5.35:1 on --paper) */ /* ---- Brand / interactive (calm sage, never SaaS blue) ---- */ --accent: #5F6F65; /* interactive / brand */ --accent-deep: #3F4E45; /* active / pressed */ --accent-soft: #E2E8E4; /* pills / soft containers */ --on-accent: #FBF9F4; /* text/icon on --accent */ /* ---- Semantic (gentle, never red) ---- */ --sage-done: #4A6B52; /* success / completed */ --terra-caution:#C68B59; /* warning / scam alerts */ --gold-highlight:#EAD0A8; /* context highlights */ --on-caution: #2C2621; /* text on caution surfaces */ /* ---- Shape ---- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; /* ---- Elevation (soft, low) ---- */ --elevation-soft: 0 4px 20px rgba(44, 38, 33, 0.04); /* ---- Typography ---- * No web fonts are loaded (offline / no-CDN), so these point at the same * system stacks styles.css uses, matching what actually renders. */ --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* "Paper & Tide" dark mode — keyed to the cornflower-blue paper-boat logo, not warm brown. Deep navy-ink neutrals, light boat-blue accent, cool near-white text. Sage / terracotta / gold survive as semantic pops. */ [data-theme="dark"] { --paper: #101820; /* deep navy ink, never pure black */ --surface: #18222E; --surface-2: #22303F; --line-border: #33424F; --ink: #EEF3F8; /* cool near-white */ --ink-soft: #C1CCD8; --ink-faint: #8B98A5; --accent: #8FB8E0; /* light paper-boat blue */ --accent-deep: #B4D3F0; --accent-soft: #1D2D3D; /* blue-tinted container */ --on-accent: #101820; /* navy ink on the lighter dark-mode accent */ --sage-done: #7EB0A0; --terra-caution:#E0A87C; --gold-highlight:#2C3A36; --on-caution: #EEF3F8; --elevation-soft: 0 4px 24px rgba(0, 0, 0, 0.45); } /* Optional: follow OS preference when data-theme="auto" is set on . Keeps an explicit data-theme="light"/"dark" override winning. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --paper: #101820; --surface: #18222E; --surface-2: #22303F; --line-border: #33424F; --ink: #EEF3F8; --ink-soft: #C1CCD8; --ink-faint: #8B98A5; --accent: #8FB8E0; --accent-deep: #B4D3F0; --accent-soft: #1D2D3D; --on-accent: #101820; --sage-done: #7EB0A0; --terra-caution:#E0A87C; --gold-highlight:#2C3A36; --on-caution: #EEF3F8; --elevation-soft: 0 4px 24px rgba(0, 0, 0, 0.45); } } /* --------------------------------------------------------------------------- * Base * ------------------------------------------------------------------------- */ html { color-scheme: light dark; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* --------------------------------------------------------------------------- * Typographic scale * ------------------------------------------------------------------------- */ .text-h1 { font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .text-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 0; } /* Body Large — used for task titles and primary reading text. */ .text-body-task { font-family: var(--font-body); font-weight: 400; font-size: 18px; line-height: 1.6; letter-spacing: 0; color: var(--ink); } .text-body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--ink); } .text-body-small { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: 0.01em; color: var(--ink-soft); } /* --------------------------------------------------------------------------- * Core components (theme-driven; restyle freely) * ------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line-border); border-radius: var(--radius-md); box-shadow: var(--elevation-soft); padding: 20px; } .btn { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer; border-radius: 999px; border: 1px solid transparent; padding: 14px 24px; /* keeps tap target >= 44px tall */ min-height: 44px; transition: background-color .15s ease, border-color .15s ease; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-deep); } .btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--line-border); } .btn-ghost:hover, .btn-ghost:focus-visible { background: var(--accent-soft); border-color: var(--accent-soft); } .option { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--line-border); border-radius: var(--radius-sm); padding: 14px 16px; min-height: 44px; color: var(--ink); transition: background-color .15s ease, border-color .15s ease; } .option:hover, .option:focus-visible { border-color: var(--accent); background: var(--surface-2); } .option[aria-pressed="true"], .option.selected { border-color: var(--accent); background: var(--surface-2); } .progressbar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .progressbar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s ease; } .task--done .text-body-task { color: var(--ink-faint); text-decoration: line-through; } .badge-done { color: var(--sage-done); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; font-size: 14px; font-weight: 600; } /* Gentle caution — scam alerts / warnings. Warm, calm; never alarm-red. */ .callout-caution { background: color-mix(in srgb, var(--terra-caution) 14%, var(--surface)); border: 1px solid var(--terra-caution); border-left-width: 4px; border-radius: var(--radius-sm); padding: 16px; color: var(--ink); } .callout-caution .callout-title { color: var(--terra-caution); font-weight: 700; } .highlight { background: var(--gold-highlight); border-radius: 4px; padding: 0 .2em; } /* Respect reduced-motion preferences. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --------------------------------------------------------------------------- * App bar theme toggle * ------------------------------------------------------------------------- */ .theme-toggle { margin-left: .6rem; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line-border); background: var(--surface); color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--surface-2); border-color: var(--accent); color: var(--accent-deep); } @media (max-width: 480px) { .theme-toggle { margin-left: auto; } /* .tag is hidden on phones; keep toggle right-aligned */ } /* --------------------------------------------------------------------------- * Legacy variable bridge. * The existing app (assets/styles.css) consumes the original flat token names. * Re-point them at the Linen & Ink tokens so the whole app re-themes — and, * crucially, follows dark mode. (themes.css must load AFTER styles.css so these * win.) Tokens that simply alias a new one use var() so they track dark mode * automatically; the rest are defined per-mode below. * ------------------------------------------------------------------------- */ :root { --line: var(--line-border); --sage: var(--sage-done); --terra: var(--terra-caution); --line-soft: #E3DBCD; --gold: #A67C45; /* readable mid-gold for small foreground dots/text */ --gold-soft: #F6ECD8; --sage-soft: #DCE6DD; --terra-soft: #F4E3D5; } [data-theme="dark"] { --line-soft: #2A3742; --gold: #D9B57A; --gold-soft: #2C3A36; --sage-soft: #1E2E2B; --terra-soft: #33271E; /* styles.css defines --shadow/--shadow-soft for light; deepen them for dark. */ --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.45); --shadow-soft: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.30); } /* Dark-mode fixes for colors hardcoded in styles.css (badges / notes). */ [data-theme="dark"] .ts-banner { border-color: #33424F; } [data-theme="dark"] .jur-note { border-color: #33424F; color: #E0CDA6; } [data-theme="dark"] .prepare-warn { border-color: #33424F; color: #E0CDA6; } [data-theme="dark"] .badge.verify { color: #E8C98F; } [data-theme="dark"] .badge.cat-wellbeing { color: #9FC7B5; } [data-theme="dark"] .badge.cat-financial { background: #232A40; color: #BFC8EC; } /* --------------------------------------------------------------------------- * Language switcher (app bar) + machine-assisted translation notice + RTL * ------------------------------------------------------------------------- */ .lang-select { margin-left: .4rem; font: inherit; font-size: .85rem; padding: .35rem 1.6rem .35rem .7rem; border-radius: 999px; border: 1px solid var(--line-border); background: var(--surface); color: var(--ink-soft); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* simple caret */ background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right .85rem center, right .6rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .lang-select:hover, .lang-select:focus-visible { border-color: var(--accent); color: var(--ink); } /* Country switcher (app bar) — same pill as the language switcher, shown only once a plan exists so the active jurisdiction is changeable from any screen. */ .country-select { margin-left: .4rem; font: inherit; font-size: .85rem; font-weight: 600; padding: .35rem 1.6rem .35rem .7rem; border-radius: 999px; border: 1px solid var(--line-border); background: var(--surface); color: var(--ink-soft); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right .85rem center, right .6rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .country-select:hover, .country-select:focus-visible { border-color: var(--accent); color: var(--ink); } /* "machine-assisted translation, pending review" — honest, calm, dismissable by ignoring. */ .ml-notice { max-width: 760px; margin: 0 auto; padding: .55rem clamp(1rem, 4vw, 1.6rem); font-size: .82rem; color: var(--ink-faint); background: var(--surface-2); border-bottom: 1px solid var(--line-soft); text-align: center; } /* ---- right-to-left (Arabic) ---- */ [dir="rtl"] body { direction: rtl; } [dir="rtl"] .appbar .tag { margin-left: 0; margin-right: auto; } [dir="rtl"] .lang-select, [dir="rtl"] .country-select { margin-left: 0; margin-right: .4rem; padding: .35rem .7rem .35rem 1.6rem; background-position: left .85rem center, left .6rem center; } [dir="rtl"] .theme-toggle { margin-left: 0; margin-right: .6rem; } [dir="rtl"] .option:hover { transform: translateX(-2px); } [dir="rtl"] .how, [dir="rtl"] .protect, [dir="rtl"] .dest-universal ul { padding-left: 0; padding-right: 1.2rem; } [dir="rtl"] .risk-tag { margin-left: 0; margin-right: auto; } [dir="rtl"] .dest-row { grid-template-columns: 1fr 170px; } [dir="rtl"] .callout-caution { border-left-width: 1px; border-right-width: 4px; } @media (max-width: 480px) { /* On phones the tag is hidden, so the switcher anchors the right group; the toggle then keeps a fixed gap (not a second auto margin). */ /* First visible right-side control anchors the group: when the country switcher is shown it takes the auto margin; the lang-select's auto then collapses (no free space left) and sits beside it. When country is hidden, lang-select anchors instead. */ .country-select { margin-left: auto; } .lang-select { margin-left: auto; } .theme-toggle { margin-left: .6rem; } [dir="rtl"] .country-select { margin-left: 0; margin-right: auto; } [dir="rtl"] .lang-select { margin-left: 0; margin-right: auto; } [dir="rtl"] .theme-toggle { margin-left: 0; margin-right: .6rem; } [dir="rtl"] .dest-row { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * Accessibility & contrast (loaded last so these win) * ------------------------------------------------------------------------- */ /* Visible focus ring on every keyboard-focusable element. Nothing in the app sets `outline: none`, so this is not overridden. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } /* Light-mode caution chips: the warm terra (--terra-caution #C68B59) fails AA as text on its soft background. Darken the FOREGROUND text/border for chips only (the soft fill and dark-theme colours are untouched). New ratio ≈ 4.74:1 for #9A4F33 on the light --terra-soft (#F4E3D5). */ .badge.ts { color: #9A4F33; } .scam-chip { color: #9A4F33; } [data-theme="dark"] .badge.ts { color: var(--terra); } [data-theme="dark"] .scam-chip { color: var(--terra); } /* --------------------------------------------------------------------------- * Touch tap targets (>= 44px). The visible glyph stays small; the hit area * grows on coarse pointers / small screens so it doesn't disturb desktop. * ------------------------------------------------------------------------- */ @media (pointer: coarse), (max-width: 480px) { .check { min-width: 44px; min-height: 44px; } .expand { min-width: 44px; min-height: 44px; } .btn.small, .btn.tiny { min-height: 44px; } }