/* ── Palette ────────────────────────────────────────────────────────── To try a new palette: edit the six --p-* tokens below, OR add a `:root[data-palette="..."]` block and set ``. Every other token (--ink, --brand, --paper, ...) is derived from these six, so palette swaps cascade across the entire site (marketing, blog, docs, forum, identity, and product apps). */ :root { /* Default palette: slate (royal blue on cool grey). */ --p-accent: #4361ee; /* CTA / primary action */ --p-secondary: #3a506b; /* deep slate / headings, secondary surfaces */ --p-bg: #f5f7fa; /* cool grey / page background */ --p-soft: #dbe4ee; /* pale slate / hover wash, soft panels */ --p-ink: #0f1c2e; /* near-black / text */ --p-paper: #ffffff; /* clean card surface */ } :root[data-palette="cyan"] { /* Cool cyan / ocean teal. */ --p-accent: #0e9aa7; --p-secondary: #086572; --p-bg: #f4fbfc; --p-soft: #e6f6f8; --p-ink: #102a2c; --p-paper: #ffffff; } :root[data-palette="rust"] { /* Coastal lighthouse + rust beacon. Warm, bold. */ --p-accent: #f74c00; --p-secondary: #2d6f73; --p-bg: #faf3dd; --p-soft: #c8d5b9; --p-ink: #0c0f0a; --p-paper: #ffffff; } :root[data-palette="terracotta"] { /* Muted clay rust on warm cream. Softest of the rust family. */ --p-accent: #c14d2e; --p-secondary: #5a3a2a; --p-bg: #fbf6ee; --p-soft: #ecddc8; --p-ink: #2a1a10; --p-paper: #ffffff; } :root[data-palette="copper"] { /* Desaturated copper-orange + slate-blue. Refined, technical. */ --p-accent: #b8623d; --p-secondary: #3a4a5e; --p-bg: #f6f4f1; --p-soft: #e2d8cc; --p-ink: #1a1815; --p-paper: #ffffff; } :root[data-palette="ember"] { /* Warm orange-rust on dusky charcoal-grey. Quietly bold. */ --p-accent: #c9531f; --p-secondary: #46423d; --p-bg: #f7f4f0; --p-soft: #e8e0d4; --p-ink: #1f1a14; --p-paper: #ffffff; } :root[data-palette="patina"] { /* Aged copper rust + verdigris teal. The rust + the oxide. */ --p-accent: #c25a30; --p-secondary: #4a8a85; --p-bg: #f4f6f3; --p-soft: #d8e6e2; --p-ink: #1c2624; --p-paper: #ffffff; } :root[data-palette="forest"] { /* Original Feroxide green. Calm, natural. */ --p-accent: #e63946; --p-secondary: #0e7c6e; --p-bg: #f4f8f5; --p-soft: #e0f2ea; --p-ink: #0d1f12; --p-paper: #ffffff; } :root[data-palette="plum"] { /* Magenta on deep plum. Vibrant, modern. */ --p-accent: #9b2d6f; --p-secondary: #4a2c5e; --p-bg: #faf5fa; --p-soft: #ecdce8; --p-ink: #1c0e1a; --p-paper: #ffffff; } :root[data-palette="amber"] { /* Dusk: amber on warm brown. */ --p-accent: #d97706; --p-secondary: #7c3a0a; --p-bg: #fdf8f0; --p-soft: #f4e0c4; --p-ink: #2a1a08; --p-paper: #ffffff; } :root[data-palette="mono"] { /* Pure grayscale + a single sharp accent. Minimal. */ --p-accent: #1d4ed8; --p-secondary: #1f2937; --p-bg: #fafafa; --p-soft: #e5e7eb; --p-ink: #0a0a0a; --p-paper: #ffffff; } :root[data-palette="midnight"] { /* Dark mode: sky-blue accent on deep navy. */ --p-accent: #38bdf8; --p-secondary: #94a3b8; --p-bg: #0f172a; --p-soft: #1e293b; --p-ink: #e2e8f0; --p-paper: #1e293b; } /* ── Derived tokens (auto-flow from palette; usually no need to edit) ─ */ :root { --ink: var(--p-ink); --ink-soft: color-mix(in srgb, var(--p-ink) 55%, var(--p-bg)); --paper: var(--p-paper); --surface: color-mix(in srgb, var(--p-soft) 35%, var(--p-paper)); --line: color-mix(in srgb, var(--p-secondary) 22%, var(--p-bg)); --brand: var(--p-accent); --brand-dark: color-mix(in srgb, var(--p-accent) 78%, var(--p-ink)); --accent: var(--p-accent); /* Marketing-site dark nav strip: uses the night-sky ink as base with the soft seafoam as the readable text overlay. */ --nav-bg: var(--p-ink); --nav-text: color-mix(in srgb, var(--p-soft) 70%, var(--p-bg)); --nav-hover: color-mix(in srgb, var(--p-soft) 55%, var(--p-paper)); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { min-height: 100vh; color: var(--ink); background: var(--p-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.6; } fx-reply-composer { display: block; } .composer-shell { margin-top: 0.35rem; border: 1px solid #d0d7de; border-radius: 8px; overflow: hidden; background: #fff; } .composer-tabs { display: flex; gap: 0.25rem; padding: 0.4rem 0.4rem 0; border-bottom: 1px solid #d0d7de; background: #f6f8fa; } .composer-tab { appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; padding: 0.24rem 0.7rem; cursor: pointer; font-size: 0.8rem; color: #57606a; } .composer-tab.active { background: #fff; border-color: #d0d7de; color: #24292f; font-weight: 600; margin-bottom: -1px; } .composer-toolbar { display: flex; align-items: center; gap: 0.2rem; margin: 0; padding: 0.45rem; border-bottom: 1px solid #d0d7de; background: #fff; } .composer-tool { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: #fff; padding: 0; cursor: pointer; color: #57606a; } .composer-tool:hover, .composer-tool:focus-visible { border-color: #d0d7de; background: #f6f8fa; } .composer-sep { width: 1px; height: 24px; background: #d0d7de; margin: 0 0.2rem; } .composer-shell textarea { width: 100%; box-sizing: border-box; min-height: 120px; padding: 0.7rem 0.9rem; border: 0; font-family: inherit; font-size: 0.95rem; resize: vertical; } .composer-shell textarea:focus { outline: none; } .composer-preview { display: none; padding: 1rem; min-height: 120px; background: #fff; } .composer-preview.open { display: block; } .composer-tools, .composer-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.55rem; flex-wrap: wrap; } .composer-tools { color: #6b7280; font-size: 0.82rem; } .composer-upload-status, .composer-counter, .composer-status { font-size: 0.82rem; } .composer-upload-status, .composer-counter { margin-left: auto; } .composer-status { color: #6b7280; } .composer-upload-status.error, .composer-status.error, .composer-counter.over { color: #dc2626; } .composer-counter.over { font-weight: 600; } .composer-submit { border: none; background: #2d6a4f; color: #fff; padding: 0.5rem 0.95rem; border-radius: 8px; cursor: pointer; font-weight: 600; } .composer-submit:disabled, .composer-tool:disabled, .composer-tab:disabled { opacity: 0.6; cursor: not-allowed; } .composer-preview img, .composer-preview video { max-width: 100%; height: auto; border-radius: 6px; } .composer-preview blockquote { border-left: 3px solid #2d6a4f; margin: 0; padding: 0.25rem 0 0.25rem 1rem; color: #6b7280; } .composer-preview pre { background: #1e1e2e; color: #cdd6f4; padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; font-size: 0.87rem; } .composer-preview code { font-family: ui-monospace, monospace; font-size: 0.87em; background: #f3f4f6; padding: 0.1em 0.3em; border-radius: 3px; } .composer-preview pre code { background: none; padding: 0; } .icon-img { width: 16px; height: 16px; display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── TOP BAR ────────────────────────────────── */ .site-header { background: var(--nav-bg); border-bottom: 1px solid #1e3a5f; position: sticky; top: 0; z-index: 100; } .header-inner { width: min(1200px, 96vw); margin-inline: auto; display: flex; align-items: stretch; height: 52px; position: relative; } .brand { text-decoration: none; color: #ffffff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.7rem; padding-right: 2rem; white-space: nowrap; } .brand-logo { /* Lighthouse mark sits straight on the dark nav , no white wrap. */ width: 38px; height: 38px; display: block; } .brand-text { line-height: 1; } /* ── DROPDOWN NAV ────────────────────────────── */ nav { display: flex; flex: 1; } .header-menu-toggle { display: none; align-items: center; justify-content: center; height: 100%; margin-left: auto; padding: 0 1rem; color: #ffffff; background: none; border: none; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .header-menu-toggle:hover { background: rgba(255,255,255,0.06); } .header-menu-toggle-label { display: inline-flex; align-items: center; gap: 0.5rem; } .header-menu-toggle-label::before { content: ""; width: 16px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; } .nav-item { position: relative; } .nav-item > a, .nav-item > button { display: flex; align-items: center; gap: 0.3rem; height: 100%; padding: 0 1rem; color: var(--nav-text); text-decoration: none; font-size: 0.875rem; font-weight: 500; background: none; border: none; cursor: pointer; white-space: nowrap; } .nav-item > a:hover, .nav-item > button:hover, .nav-item:hover > a, .nav-item:hover > button { color: var(--nav-hover); background: rgba(255,255,255,0.06); } .nav-item > button::after { content: "▾"; font-size: 0.7rem; opacity: 0.7; } .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--paper); border: 1px solid var(--line); min-width: 220px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-radius: 0 0 4px 4px; z-index: 200; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 0.6rem 1.1rem; font-size: 0.875rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .dropdown a:last-child { border-bottom: none; } .dropdown a:hover { background: var(--surface); color: var(--brand); } .nav-spacer { flex: 1; } .nav-cta { display: flex; align-items: center; gap: 0.55rem; padding: 0 1rem; } .nav-cta a { display: inline-flex; align-items: center; padding: 0.4rem 0.9rem; background: transparent; color: var(--nav-text); font-size: 0.8rem; font-weight: 600; text-decoration: none; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); } .nav-cta a:hover { color: #fff; border-color: rgba(255,255,255,0.6); } .nav-cta a.nav-signin { background: var(--brand); color: #fff; border-color: var(--brand); } .nav-cta a.nav-signin:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .nav-cta .nav-account-link { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; } .nav-cta .nav-account-link:hover { border: none; background: transparent; } .nav-avatar { width: 32px; height: 32px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.45); object-fit: cover; display: block; } .nav-account-link:hover .nav-avatar { border-color: #ffffff; } /* ── themable layer ────────────────────────────────────── * Default styles for the shared account-switcher when used *outside* * the marketing dark nav (i.e. on standalone product pages like Beam, * CertLens, etc.). Consumers theme by setting CSS variables on a * parent element , no need to pierce internal class names: * * .my-topbar fx-nav-auth { * --fx-nav-fg: #1a1a1a; * --fx-nav-border: #d6e8eb; * --fx-nav-radius: 999px; * --fx-nav-font: var(--my-mono); * --fx-nav-hover-fg: #086572; * --fx-nav-hover-border: #0e9aa7; * --fx-nav-hover-bg: #fff; * } * * The defaults below are deliberately neutral so the chip looks at * home on any light surface. */ fx-nav-auth { --fx-nav-fg: var(--ink, #1a1a1a); --fx-nav-bg: #ffffff; --fx-nav-border: #d0d6db; --fx-nav-radius: 999px; --fx-nav-font: inherit; --fx-nav-hover-fg: var(--fx-nav-fg); --fx-nav-hover-bg: var(--fx-nav-bg); --fx-nav-hover-border: var(--fx-nav-fg); --fx-nav-padding: 0.4rem 0.85rem; } /* The marketing-nav variant lives inside a `.nav-cta` parent, which * has its own dark-nav styles further up. We skip the themable * defaults there so the existing rules win. */ fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-signin, .bs-nav-themable fx-nav-auth .nav-signin { display: inline-block; font-family: var(--fx-nav-font); font-size: 0.88rem; text-decoration: none; color: var(--fx-nav-fg); background: var(--fx-nav-bg); border: 1px solid var(--fx-nav-border); border-radius: var(--fx-nav-radius); padding: var(--fx-nav-padding); transition: background 0.15s, border-color 0.15s, color 0.15s; } fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-signin:hover, .bs-nav-themable fx-nav-auth .nav-signin:hover { color: var(--fx-nav-hover-fg); background: var(--fx-nav-hover-bg); border-color: var(--fx-nav-hover-border); } fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-account-trigger, .bs-nav-themable fx-nav-auth .nav-account-trigger { background: var(--fx-nav-bg); border: 1px solid var(--fx-nav-border); color: var(--fx-nav-fg); border-radius: var(--fx-nav-radius); padding: 0.2rem 0.5rem 0.2rem 0.2rem; font-family: var(--fx-nav-font); } fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-account-trigger:hover, .bs-nav-themable fx-nav-auth .nav-account-trigger:hover { background: var(--fx-nav-hover-bg); border-color: var(--fx-nav-hover-border); } fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-account-name, .bs-nav-themable fx-nav-auth .nav-account-name { color: var(--fx-nav-fg); font-family: var(--fx-nav-font); } fx-nav-auth:not(.nav-cta fx-nav-auth) .nav-account-sub, .bs-nav-themable fx-nav-auth .nav-account-sub { color: var(--ink-soft); } .nav-account-wrap { position: relative; } .nav-account-trigger { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; border-radius: 999px; padding: 0.2rem 0.5rem 0.2rem 0.2rem; cursor: pointer; } .nav-account-trigger:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.1); } .nav-account-meta { display: grid; text-align: left; line-height: 1.05; } .nav-account-name { font-size: 0.74rem; color: #ffffff; font-weight: 700; } .nav-account-sub { font-size: 0.68rem; color: var(--nav-text); } .nav-account-menu { display: none; position: absolute; top: calc(100% + 0.35rem); right: 0; min-width: 190px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); z-index: 300; } .nav-account-wrap.open .nav-account-menu { display: block; } .nav-account-menu a, .nav-account-menu button { display: block; width: 100%; text-align: left; padding: 0.65rem 0.85rem; background: #fff; border: none; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 0.85rem; cursor: pointer; } .nav-account-menu button:last-child, .nav-account-menu a:last-child { border-bottom: none; } .nav-account-menu a:hover, .nav-account-menu button:hover { background: var(--surface); color: var(--brand-dark); } /* Other-accounts switcher inside the avatar dropdown */ .nav-account-switch-heading { padding: 0.45rem 0.85rem 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .nav-account-switch-item { display: flex !important; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.55rem 0.85rem !important; } .nav-avatar-small { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 600; font-size: 0.78rem; flex-shrink: 0; } .nav-account-switch-meta { display: flex; flex-direction: column; min-width: 0; } .nav-account-switch-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-account-switch-email { font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-account-switch-divider { border-top: 1px solid var(--line); margin: 0.25rem 0; } /* ── PAGE BODY ───────────────────────────────── */ .page-body { width: min(1200px, 96vw); margin-inline: auto; padding: 2rem 1.5rem 3rem; } /* ── HERO ────────────────────────────────────── */ .hero { background: var(--nav-bg); color: #fff; padding: 3rem 0; } .hero-inner { width: min(1200px, 96vw); margin-inline: auto; padding: 0 1.5rem; display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 2.5rem; align-items: center; } .hero-mark { /* Brand lighthouse mark , prominent on the hero so the wordmark in the topbar isn't carrying brand recognition alone. Inlined SVG so CSS can recolor the silhouette against the dark hero band. */ width: 100%; max-width: 260px; height: auto; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); justify-self: center; } /* Recolor the inlined hero SVG for the dark hero context: ink shapes flip to foam-light, the slate hex fragments stay slate but a touch lighter for contrast, the rust beam + lantern dot keep their full pop. */ .hero-copy { min-width: 0; } @media (max-width: 720px) { .hero-inner { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; } .hero-mark { max-width: 140px; } .hero p { margin-inline: auto; } .hero-actions { justify-content: center; } } .kicker { margin: 0 0 0.5rem; color: #7eb8f7; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; margin: 0 0 1rem; line-height: 1.15; color: var(--ink); } .hero h1 { color: #ffffff; } .hero p { max-width: 60ch; margin: 0 0 1.5rem; color: #b0c4d8; font-size: 1rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .btn { display: inline-flex; align-items: center; text-decoration: none; font-size: 0.875rem; font-weight: 700; padding: 0.6rem 1.2rem; border: 1px solid transparent; border-radius: 4px; } .btn.solid { background: var(--brand); color: #fff; border-color: var(--brand); } .btn.solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); } .btn.ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); } /* ── STATS BAR ───────────────────────────────── */ .stats-bar { display: flex; gap: 2rem; padding: 1.25rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 0; margin-bottom: 2.5rem; flex-wrap: wrap; } .stat strong { display: block; font-size: 1.6rem; font-weight: 700; color: var(--brand); } .stat span { font-size: 0.82rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; } /* ── SECTION TITLE ───────────────────────────── */ .section-eyebrow { margin: 0 0 0.3rem; color: var(--brand); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--ink); } h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--ink); } /* ── SPOTLIGHT (2-col) ───────────────────────── */ .spotlight { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; } .spotlight-copy { border: 1px solid var(--line); background: var(--paper); padding: 1.5rem; } .spotlight-copy p { color: var(--ink-soft); margin: 0 0 0.75rem; } .spotlight-copy ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); } .spotlight-panel { background: var(--nav-bg); color: #fff; padding: 1.5rem; } .metric { margin: 0; font-size: 2rem; font-weight: 700; color: #7eb8f7; } .label { margin: 0.2rem 0 1rem; color: #b0c4d8; font-size: 0.875rem; } /* ── CARDS ───────────────────────────────────── */ .cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 2.5rem; } .cards article { background: var(--paper); padding: 1.5rem; border-radius: 4px; } .cards p { color: var(--ink-soft); margin: 0 0 0.75rem; } .cards .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); padding: 0.15rem 0.5rem; } .cards .card-link { display: inline-block; font-weight: 600; color: var(--brand); text-decoration: none; margin-top: 0.25rem; } .cards .card-link:hover { text-decoration: underline; } /* ── FOOTER ──────────────────────────────────── */ .site-footer { background: var(--nav-bg); color: #7a94b0; font-size: 0.82rem; padding: 2rem 0; margin-top: 2rem; } .footer-inner { width: min(1200px, 96vw); margin-inline: auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; } .footer-inner a { color: #7a94b0; text-decoration: none; } .footer-inner a:hover { color: #fff; } .footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* ── RESPONSIVE ──────────────────────────────── */ @media (min-width: 760px) { .spotlight { grid-template-columns: 1.5fr 1fr; align-items: stretch; } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 759px) { .header-inner { min-height: 52px; height: auto; align-items: center; flex-wrap: wrap; } .brand { min-height: 52px; padding-right: 0.75rem; } .header-menu-toggle { display: inline-flex; } nav { display: none; /* Force a full-width flex line so the drawer drops *below* the brand+toggle row instead of squeezing in beside the toggle. */ flex: 0 0 100%; flex-direction: column; background: var(--nav-bg); border-top: 1px solid rgba(255,255,255,0.08); padding: 0.35rem 0 0.85rem; } .site-header.is-open nav { display: flex; } .nav-item { width: 100%; } .nav-item > a, .nav-item > button { width: 100%; justify-content: space-between; min-height: 48px; padding: 0 1rem; } .nav-item > button::after { font-size: 0.82rem; } /* Sub-items render as a compact overlay anchored to the parent nav-item, instead of expanding inline and pushing the rest of the menu down. Single level only , keeps the drawer scrollable. */ .nav-item { position: relative; } .dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 0 0 4px 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 250; } .nav-item:hover .dropdown { display: none; } .nav-item.open .dropdown { display: block; } .dropdown a { padding: 0.65rem 1rem; min-height: 0; width: auto; justify-content: flex-start; } .nav-spacer { display: none; } .nav-cta { width: 100%; padding: 0.75rem 1rem 0; justify-content: stretch; } .nav-cta a, .nav-cta .nav-account-wrap, .nav-cta fx-nav-auth { width: 100%; } .nav-account-trigger { width: 100%; justify-content: space-between; border-radius: 12px; } .nav-account-menu { position: static; margin-top: 0.45rem; } .site-footer { padding: 1.6rem 0; } .footer-inner { align-items: flex-start; } } /* ── bs-post-card ──────────────────────────────────────────────────── */ bs-post-card { display: block; } bs-post-card .post-card { position: relative; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; background: #fff; } bs-post-card .post-card-meta { font-size: 0.82rem; color: #6b7280; margin-bottom: 0.6rem; } bs-post-card .post-card-author { font-weight: 600; color: #111827; } bs-post-card .post-card-body { line-height: 1.8; font-size: 0.97rem; } bs-post-card .post-card-body img, bs-post-card .post-card-body video { max-width: 100%; height: auto; border-radius: 6px; } bs-post-card .post-card-body video { display: block; margin-top: 0.4rem; } bs-post-card .post-card-body pre { background: #1e1e2e; color: #cdd6f4; padding: 1rem 1.25rem; border-radius: 6px; overflow-x: auto; font-size: 0.87rem; } bs-post-card .post-card-body code { font-family: ui-monospace, monospace; font-size: 0.87em; background: #f3f4f6; padding: 0.1em 0.3em; border-radius: 3px; } bs-post-card .post-card-body pre code { background: none; padding: 0; } bs-post-card .post-card-body blockquote { border-left: 3px solid #2d6a4f; margin: 0; padding: 0.25rem 0 0.25rem 1rem; color: #6b7280; } bs-post-card .post-card-body a { color: #2d6a4f; } bs-post-card .post-card-menu { position: absolute; top: 0.6rem; right: 0.7rem; } bs-post-card .post-card-menu-btn { background: transparent; border: none; color: #9ca3af; cursor: pointer; font-size: 1.1rem; padding: 0.15rem 0.45rem; border-radius: 4px; line-height: 1; } bs-post-card .post-card-menu-btn:hover { background: #f3f4f6; color: #374151; } bs-post-card .post-card-menu-panel { position: absolute; top: calc(100% + 0.2rem); right: 0; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 6px; min-width: 120px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); z-index: 20; padding: 0.25rem 0; display: none; } bs-post-card .post-card-menu-panel.open { display: block; } bs-post-card .post-card-menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; color: #111827; padding: 0.45rem 1rem; font-size: 0.88rem; cursor: pointer; } bs-post-card .post-card-menu-item:hover { background: #f3f4f6; } bs-post-card .post-card-menu-item.danger { color: #b91c1c; } bs-post-card .post-card-menu-item.danger:hover { background: #fef2f2; } .inline-editor { margin-top: 0.75rem; } .inline-cancel-btn { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; padding: 0.5rem 0.95rem; cursor: pointer; } .inline-cancel-btn:hover { background: #e5e7eb; } .inline-cancel-btn[disabled] { opacity: 0.6; cursor: default; } .inline-editor .composer-counter { margin-left: 0; margin-right: auto; order: -2; } .inline-editor .composer-status { order: -1; } .inline-editor .inline-cancel-btn { order: 1; margin-top: 0; } .inline-editor .composer-submit { order: 2; } /* ── Shared form / status / back-link primitives ────────────────────── Used by login.html, account.html, blog/forum back-links, etc. Keep page-specific overrides in the page itself; this is the baseline. */ .field { display: grid; gap: 0.3rem; margin-bottom: 1rem; } .field:last-child { margin-bottom: 0; } .field label { font-size: 0.82rem; font-weight: 600; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); padding: 0.6rem 0.75rem; font-size: 0.9rem; font-family: inherit; border-radius: 4px; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; } .field input:disabled { background: var(--surface); color: var(--ink-soft); cursor: not-allowed; } .submit-btn { width: 100%; background: var(--brand); color: #fff; border: none; padding: 0.7rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; border-radius: 4px; margin-top: 0.25rem; } .submit-btn:hover { background: var(--brand-dark); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .msg { min-height: 1.2rem; margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--accent); } .back-link { display: inline-block; color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; } .back-link:hover { color: var(--brand); text-decoration: underline; } /* `.back-link.center` for the auth pages where it sits standalone below a card. */ .back-link.center { display: block; text-align: center; margin-top: 1.25rem; font-size: 0.82rem; } .subtitle { margin: 0; color: var(--ink-soft); font-size: 0.92rem; } /* `.panel` , the bordered card section used on account.html and similar settings pages. */ .panel { background: var(--paper); border: 1px solid var(--line); padding: 1.2rem; border-radius: 6px; } /* `` , thumbs-up / thumbs-down "was this useful?" widget. */ .fx-rating { margin: 2rem 0 1rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; } .fx-rating-q { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.95rem; } .fx-rating-buttons { display: flex; gap: 0.5rem; } .fx-rating-buttons button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; font-size: 0.85rem; color: var(--ink); cursor: pointer; } .fx-rating-buttons button:hover:not([disabled]) { border-color: var(--brand); color: var(--brand); } .fx-rating-buttons button.active { border-color: var(--brand); background: var(--brand); color: #fff; } .fx-rating-buttons button[disabled] { opacity: 0.6; cursor: not-allowed; } .fx-rating-icon { font-size: 1rem; } .fx-rating-hint { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--ink-soft); } .fx-rating-hint a { color: var(--brand); }