). */ main { flex: 1 0 auto; } a { color: var(--landing-accent, #c8962e); text-decoration: none; } :root { /* Body font — WA's native.css used to set this on . */ --landing-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ── Web Awesome design-token shim ─────────────────────────────────────── Flat resolved values for the --wa-* tokens the ported CSS references. Default WA theme: space / radius / border / font-size scale all = 1; brand ramp = warm gold (wa-brand-yellow); neutral text = dark-theme heading. */ --wa-space-3xs: 0.125rem; --wa-space-2xs: 0.25rem; --wa-space-xs: 0.5rem; --wa-space-s: 0.75rem; --wa-space-m: 1rem; --wa-space-l: 1.5rem; --wa-space-xl: 2rem; --wa-space-2xl: 2.5rem; --wa-space-3xl: 3rem; --wa-space-4xl: 4rem; --wa-border-radius-m: 0.375rem; --wa-border-radius-l: 0.75rem; --wa-border-width-s: 1px; --wa-font-size-xs: 0.75rem; --wa-font-size-s: 0.875rem; --wa-font-size-xl: 1.5625rem; --wa-font-size-2xl: 2rem; --wa-font-weight-semibold: 600; --wa-font-weight-bold: 700; --wa-font-family-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --wa-color-neutral-text-normal: #fafaf9; --wa-color-brand-600: #c8962e; --wa-color-brand-border-normal: rgba(200, 150, 46, 0.35); --wa-color-brand-fill-quiet: rgba(200, 150, 46, 0.1); /* ── Admin-dashboard tokens (dark values) ──────────────────────────────── Only referenced by dead admin-only utility/panel rules carried over with the shared Rails stylesheet; defined so they resolve cleanly if rendered. */ --admin-bg-page: #0c0a09; --admin-bg-surface: #1a1614; --admin-bg-surface-raised: #231f1c; --admin-bg-surface-muted: #2e2926; --admin-bg-header: rgba(12, 10, 9, 0.85); --admin-border: #3d3632; --admin-border-subtle: #2e2926; --admin-border-strong: #524a44; --admin-text-heading: #fafaf9; --admin-text-body: #d6d3d1; --admin-text-subtle: #a8a29e; --admin-text-muted: #78716c; --admin-accent: #c8962e; --admin-accent-gradient: linear-gradient(135deg, #c8962e, #b87333); --admin-accent-glow: rgba(200, 150, 46, 0.15); --admin-accent-quiet: rgba(200, 150, 46, 0.1); --admin-font-display: "Plus Jakarta Sans", sans-serif; --admin-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15); --admin-shadow-m: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Buttons — replaces ───────────────────────────────────────── variant="warning" → .btn-primary (gold gradient) appearance="outlined"/neutral → .btn-outline size small/medium/large → .btn-sm / (default) / .btn-lg All marketing CTAs ship disabled until login launches (see cta-button.njk). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--landing-font-display, inherit); font-weight: 700; line-height: 1; padding: 0.7rem 1.3rem; font-size: 0.95rem; border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn.pill { border-radius: 999px; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 0.95rem 1.8rem; font-size: 1.05rem; } .btn-primary { background: var(--landing-accent-gradient, linear-gradient(135deg, #c8962e, #b87333)); color: #1a1208; } .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.07); transform: translateY(-1px); } .btn-outline { background: transparent; border-color: var(--landing-border-strong, #524a44); color: var(--landing-text-body, #d6d3d1); } .btn-outline:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--landing-text-subtle, #a8a29e); color: var(--landing-text-heading, #fafaf9); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; box-shadow: none; animation: none; } /* CTA glow — only animates while enabled (all CTAs ship disabled for now). */ .btn.cta-glow:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 0 20px rgba(200, 150, 46, 0.15); animation: glowPulse 3s ease-in-out infinite; } /* ── Hero badge — replaces ──────────────── */ .hero-tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(200, 150, 46, 0.12); border: 1px solid rgba(200, 150, 46, 0.35); color: var(--landing-accent, #c8962e); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } /* ── Native

locale switcher (replaces wa-popover trigger) ───────── The grouped grid inside reuses the ported .locale-group / .locale-card. */ .locale-switcher { position: relative; } .locale-switcher > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border-radius: 999px; color: var(--landing-text-subtle, #a8a29e); font-size: 0.8125rem; white-space: nowrap; } .locale-switcher > summary::-webkit-details-marker { display: none; } .locale-switcher > summary:hover { color: var(--landing-text-heading, #fafaf9); } .locale-switcher .chevron { font-size: 0.7rem; transition: transform 0.2s ease; } .locale-switcher[open] .chevron { transform: rotate(180deg); } .locale-panel { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 40; padding: var(--wa-space-s) var(--wa-space-m) var(--wa-space-m); width: 27rem; max-width: 86vw; max-height: 70vh; overflow-y: auto; background: var(--landing-bg-raised, #231f1c); border: 1px solid var(--landing-border, #3d3632); border-radius: 0.85rem; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); color: var(--landing-text-body, #d6d3d1); } /* ── Self-hosted display font — replaces the Google Fonts ───────────── One latin+latin-ext variable woff2 (wght 200–800) at /assets/fonts/, also reused by the OG image generator. latin-ext coverage is required for correct pl/lv/lt rendering (ą ł ż / ā ē ī / ė į ų). Preloaded in base.njk. */ @font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-display: swap; src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2"); } /* ── Inline icons — replaces the Font Awesome kit