/* WITAL articles — standalone static pages served outside the Vue/Vuetify bundle. Tokens mirror the theme defined in src/main.ts (light = FT Paper + FT Teal; dark = pure black + Material blue) so articles feel like a continuation of the PWA, not a separate site. */ :root { --wa-bg: #fff1e5; /* FT Paper — central column */ --wa-gutter: #eadfce; /* Darker cream — outside gutter */ --wa-text: #33302e; /* FT black-80 */ --wa-text-soft: rgba(51, 48, 46, 0.78); --wa-text-muted: rgba(51, 48, 46, 0.6); --wa-primary: #0d7680; /* FT Teal */ --wa-rule: rgba(51, 48, 46, 0.12); --wa-surface-tint: rgba(51, 48, 46, 0.05); --wa-surface-hover: rgba(51, 48, 46, 0.06); --wa-surface-active: rgba(51, 48, 46, 0.1); --wa-code-bg: rgba(51, 48, 46, 0.05); /* Matches --app-column-max-width in src/App.vue so the article column lines up with the PWA column on wide viewports. */ --wa-column-max-width: 640px; } /* Dark theme applies when is set by the inline bootstrap script in the page head — which reads the same localStorage.appTheme key the PWA writes, so articles track the user's in-app choice rather than the OS setting. */ :root[data-theme="dark"] { --wa-bg: #000000; --wa-gutter: #1a1a1a; /* Matches --bg-gutter in src/styles/global.css */ --wa-text: rgba(255, 255, 255, 0.87); --wa-text-soft: rgba(255, 255, 255, 0.78); --wa-text-muted: rgba(255, 255, 255, 0.6); --wa-primary: #2196F3; /* Material blue, matches PWA dark theme */ --wa-rule: rgba(255, 255, 255, 0.12); --wa-surface-tint: rgba(255, 255, 255, 0.05); --wa-surface-hover: rgba(255, 255, 255, 0.08); --wa-surface-active: rgba(255, 255, 255, 0.12); --wa-code-bg: rgba(255, 255, 255, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* Gutter colour fills the viewport on wide screens; the article column sits centred inside it, same pattern as the PWA. */ background: var(--wa-gutter); color: var(--wa-text); /* Same stack the PWA resolves to from Vuetify/system defaults. */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The central stripe. Matches .content-wrapper in src/App.vue — same width token, same surface colour, same soft halo shadow so the article column reads as the same UI element as the PWA column. */ .wa-page { max-width: var(--wa-column-max-width); margin: 0 auto; min-height: 100vh; background: var(--wa-bg); box-shadow: 0 0 16px rgba(0, 0, 0, 0.35); } a { color: var(--wa-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Header (mirrors AppHeader.vue) ---------- */ .wa-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); /* Same slight tint + soft shadow as the PWA header — reads as a distinct zone without a hard border line. */ background: color-mix(in srgb, var(--wa-text) 5%, var(--wa-bg)); color: var(--wa-text); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); position: sticky; top: 0; z-index: 10; } .wa-brand { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; min-height: 44px; color: var(--wa-text); border-radius: 8px; } .wa-brand:hover { text-decoration: none; } .wa-brand-icon { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; } .wa-wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 1.4rem; font-weight: 700; line-height: 1; letter-spacing: 0.03em; color: var(--wa-primary); } .wa-nav { display: flex; align-items: center; gap: 8px; } .wa-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--wa-text-soft); cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .wa-icon-btn:hover { background: var(--wa-surface-hover); color: var(--wa-text); text-decoration: none; } .wa-icon-btn--active { background: var(--wa-surface-active); color: var(--wa-text); } .wa-icon-btn svg { width: 22px; height: 22px; display: block; /* Fill/stroke colour comes from the inline SVG attributes via currentColor, so both fill-based MDI icons and the stroke-based globe render correctly. */ } /* ---------- Article body ---------- */ main { padding: 0 20px; } .wa-article__head { padding: 40px 0 20px; border-bottom: 1px solid var(--wa-rule); margin-bottom: 28px; } .wa-article__title { font-size: 2rem; line-height: 1.2; margin: 0 0 14px; letter-spacing: -0.01em; color: var(--wa-text); } .wa-article__meta { font-size: 0.9rem; color: var(--wa-text-muted); margin: 0; } .wa-article__meta-sep { margin: 0 8px; } .wa-article__body { font-size: 1.05rem; line-height: 1.7; } .wa-article__body h2 { font-size: 1.45rem; line-height: 1.25; margin: 2em 0 0.5em; letter-spacing: -0.005em; } .wa-article__body h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.6em 0 0.4em; } .wa-article__body h2 a.anchor, .wa-article__body h3 a.anchor { color: var(--wa-text-muted); text-decoration: none; margin-left: 8px; opacity: 0; transition: opacity 120ms ease; font-weight: 400; } .wa-article__body h2:hover a.anchor, .wa-article__body h3:hover a.anchor { opacity: 1; } .wa-article__body p { margin: 0 0 1em; } .wa-article__body ul, .wa-article__body ol { padding-left: 1.4em; margin: 0 0 1em; } .wa-article__body li { margin-bottom: 0.35em; } .wa-article__body strong { font-weight: 600; } .wa-article__body blockquote { margin: 1.2em 0; padding: 4px 18px; border-left: 3px solid var(--wa-primary); color: var(--wa-text-muted); font-style: italic; } .wa-article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: var(--wa-code-bg); padding: 2px 6px; border-radius: 4px; } .wa-article__body pre { background: var(--wa-code-bg); border: 1px solid var(--wa-rule); border-radius: 6px; padding: 14px 16px; overflow-x: auto; font-size: 0.9rem; } .wa-article__body pre code { background: transparent; padding: 0; } .wa-article__body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.95rem; } .wa-article__body th, .wa-article__body td { border: 1px solid var(--wa-rule); padding: 10px 12px; text-align: left; vertical-align: top; } .wa-article__body th { background: var(--wa-surface-tint); font-weight: 600; } .wa-article__body img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.4em 0; } .wa-article__body hr { border: 0; border-top: 1px solid var(--wa-rule); margin: 2.4em 0; } .wa-article__foot { margin-top: 40px; padding: 20px 22px; background: var(--wa-surface-tint); border-radius: 10px; font-size: 1rem; line-height: 1.55; color: var(--wa-text); } .wa-article__foot p { margin: 0; } /* ---------- Index ---------- */ .wa-index__head { padding: 40px 0 20px; border-bottom: 1px solid var(--wa-rule); margin-bottom: 20px; } .wa-index__head h1 { font-size: 2rem; margin: 0 0 10px; letter-spacing: -0.01em; } .wa-index__lede { font-size: 1.05rem; color: var(--wa-text-muted); margin: 0; } .wa-index__list { list-style: none; padding: 0; margin: 0; } .wa-index__item { padding: 20px 0; border-bottom: 1px solid var(--wa-rule); } .wa-index__item:last-child { border-bottom: 0; } .wa-index__item a { color: var(--wa-text); } .wa-index__item a:hover { text-decoration: none; } .wa-index__item a:hover h2 { color: var(--wa-primary); } .wa-index__item h2 { font-size: 1.3rem; line-height: 1.3; margin: 0 0 6px; transition: color 120ms ease; } .wa-index__item-desc { color: var(--wa-text-muted); margin: 0 0 6px; font-size: 0.98rem; line-height: 1.55; } .wa-index__item-meta { font-size: 0.82rem; color: var(--wa-text-muted); } /* ---------- Footer ---------- */ .wa-footer { margin-top: 56px; padding: 22px 20px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--wa-rule); font-size: 0.88rem; color: var(--wa-text-muted); } .wa-footer nav { display: flex; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; } .wa-footer nav a { color: var(--wa-text-muted); } .wa-footer__copy { margin: 0; } /* ---------- Small screens (match AppHeader's ≤420px behaviour) ---------- */ @media (max-width: 420px) { .wa-brand-icon { display: none; } .wa-header { padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); } .wa-icon-btn { min-width: 40px; padding: 6px; } .wa-nav { gap: 4px; } main { padding: 0 16px; } .wa-article__head { padding-top: 24px; } .wa-article__title { font-size: 1.6rem; } .wa-article__body { font-size: 1rem; } .wa-article__body h2 { font-size: 1.25rem; } .wa-article__body h3 { font-size: 1.05rem; } .wa-index__head h1 { font-size: 1.6rem; } .wa-index__lede { font-size: 0.98rem; } }