/** * Solvid SEO Tools — shared frontend styles. * * Design language: clean SaaS-dashboard minimalism (white cards, cool grey * borders, generous whitespace) in Solvid's palette — violet #624ede as the * primary action colour, slate #505c7c for secondary text, teal #38e1d0 as * a supporting accent. Scoped under .svt-wrap to avoid theme conflicts. */ /* Design tokens — declared on the wrap AND the modal overlay, because the unlock modal is appended to , outside any .svt-wrap. */ .svt-wrap, .svt-modal-overlay { --svt-primary: #624ede; --svt-primary-hover: #4f3dc7; --svt-primary-soft: rgba(98, 78, 222, 0.08); --svt-slate: #505c7c; --svt-teal: #38e1d0; --svt-text: #1c2340; --svt-muted: #505c7c; --svt-border: #e5e7ef; --svt-border-strong: #d6d9e4; --svt-bg: #ffffff; --svt-tile: #f7f8fb; --svt-success: #22c55e; --svt-warning: #f5b40a; --svt-danger: #ef4444; --svt-radius: 16px; --svt-radius-sm: 12px; --svt-shadow: 0 1px 2px rgba(28, 35, 64, 0.04), 0 10px 34px rgba(28, 35, 64, 0.06); --svt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; } .svt-wrap { font-family: var(--svt-font); color: var(--svt-text); background: var(--svt-bg); border: 2px solid var(--svt-border); border-radius: var(--svt-radius); box-shadow: var(--svt-shadow); padding: 32px; margin: 28px auto; /* auto centres the card when the theme container is wider than the max-width */ max-width: 760px; box-sizing: border-box; -webkit-font-smoothing: antialiased; } .svt-wrap *, .svt-wrap *::before, .svt-wrap *::after { box-sizing: inherit; } /* The unlock modal is appended to , OUTSIDE .svt-wrap — without its own border-box rule, width:100% inputs overflow the modal padding. */ .svt-modal-overlay, .svt-modal-overlay *, .svt-modal-overlay *::before, .svt-modal-overlay *::after { box-sizing: border-box; } .svt-wrap h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 8px; color: var(--svt-text); } .svt-wrap h3 { margin: 0 0 8px; font-weight: 600; line-height: 1.3; color: var(--svt-text); } .svt-intro { margin: 0 0 22px; color: var(--svt-muted); font-size: 15px; line-height: 1.6; max-width: 58ch; } /* ---------- Form ---------- */ .svt-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .svt-field { flex: 1 1 260px; display: flex; flex-direction: column; gap: 7px; } .svt-field--full { flex-basis: 100%; } .svt-field label { font-size: 13.5px; font-weight: 600; color: var(--svt-text); } /* Required-field star (append inside the label). */ .svt-required { color: var(--svt-primary); } .svt-input { appearance: none; width: 100%; border: 2px solid var(--svt-border-strong); border-radius: var(--svt-radius-sm); background: var(--svt-bg); color: var(--svt-text); font: inherit; font-size: 15px; padding: 12px 15px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .svt-input::placeholder { color: #9aa1b5; } /* No scroll-margin on form fields — text inputs match :focus-visible even on mouse click (spec behaviour for editable elements), so ANY scroll-margin here makes browsers nudge the page on plain clicks. */ .svt-input:hover { border-color: #b9bfd2; } .svt-input:focus { outline: none; border-color: var(--svt-primary); box-shadow: 0 0 0 3px var(--svt-primary-soft); } /* Neutralise Chrome's yellow/blue autofill tint so filled fields keep the design (the inner shadow paints over the UA's forced background). */ .svt-input:-webkit-autofill, .svt-input:-webkit-autofill:hover, .svt-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--svt-text); caret-color: var(--svt-text); transition: background-color 9999s ease-out 0s; } /* Larger hero input (e.g. the main keyword field). */ .svt-input--lg { font-size: 17px; padding: 16px 18px; } .svt-button { appearance: none; border: 0; cursor: pointer; background: var(--svt-primary); color: #fff; font: inherit; font-size: 15px; font-weight: 600; padding: 13px 28px; border-radius: var(--svt-radius-sm); transition: background 0.15s ease, transform 0.1s ease; white-space: nowrap; } .svt-button:hover, .svt-button:focus-visible { background: var(--svt-primary-hover); } /* Submit gated behind the security check. */ .svt-button--waiting, .svt-button:disabled { opacity: 0.55; cursor: not-allowed; } .svt-button:active { transform: translateY(1px); } .svt-button:focus-visible { outline: 2px solid var(--svt-primary); outline-offset: 2px; } .svt-button[disabled] { opacity: 0.55; cursor: not-allowed; } .svt-button--secondary { background: var(--svt-bg); color: var(--svt-text); border: 2px solid var(--svt-border-strong); } .svt-button--secondary:hover, .svt-button--secondary:focus-visible { background: var(--svt-tile); border-color: #aab1c7; } /* Honeypot — visually removed, still in the DOM for bots. */ .svt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .svt-turnstile { flex-basis: 100%; margin-top: 6px; } /* ---------- States ---------- */ .svt-noscript { background: var(--svt-tile); border: 2px solid var(--svt-border); border-radius: var(--svt-radius-sm); padding: 13px 16px; color: var(--svt-muted); } .svt-loading { display: flex; align-items: center; gap: 10px; color: var(--svt-muted); font-size: 15px; padding: 20px 0 4px; } .svt-spinner { width: 18px; height: 18px; border: 2px solid var(--svt-border); border-top-color: var(--svt-primary); border-radius: 50%; animation: svt-spin 0.7s linear infinite; } @keyframes svt-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .svt-spinner { animation-duration: 1.6s; } } .svt-results { margin-top: 26px; } .svt-error { margin-top: 18px; background: #fef2f2; border: 2px solid #fecaca; color: #991b1b; border-radius: var(--svt-radius-sm); padding: 13px 16px; font-size: 14.5px; line-height: 1.5; } .svt-notice { margin: 0 0 16px; background: #fffbeb; border: 2px solid #fde68a; color: #92400e; border-radius: var(--svt-radius-sm); padding: 12px 16px; font-size: 14px; } /* ---------- Generic result presentation (hello module etc.) ---------- */ .svt-result-card { border: 2px solid var(--svt-border); border-radius: var(--svt-radius-sm); background: var(--svt-tile); padding: 20px 22px; } .svt-kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; } .svt-kv dt { color: var(--svt-muted); font-size: 14px; } .svt-kv dd { margin: 0; font-weight: 600; font-size: 14px; text-align: right; } .svt-badge { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(56, 225, 208, 0.15); color: #0d7d71; } .svt-badge--warn { background: rgba(245, 180, 10, 0.14); color: #92600e; } .svt-badge--danger { background: rgba(239, 68, 68, 0.12); color: #991b1b; } /* ---------- Unlock modal ---------- */ .svt-modal-overlay { position: fixed; inset: 0; background: rgba(28, 35, 64, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; } .svt-modal { font-family: var(--svt-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); background: #fff; color: var(--svt-text, #1c2340); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); max-width: 430px; width: 100%; padding: 32px; position: relative; } .svt-modal h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .svt-modal p { margin: 0 0 20px; color: var(--svt-muted, #505c7c); font-size: 14.5px; line-height: 1.6; } .svt-modal .svt-field { margin-bottom: 16px; } .svt-modal .svt-button { width: 100%; margin-top: 4px; } .svt-modal-error { margin: 0 0 14px; background: #fef2f2; border: 2px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; } .svt-modal-close { position: absolute; top: 14px; right: 14px; appearance: none; background: none; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--svt-muted, #505c7c); padding: 6px; border-radius: 8px; } .svt-modal-close:hover, .svt-modal-close:focus-visible { color: var(--svt-text, #1c2340); background: var(--svt-tile, #f7f8fb); } /* ---------- Shared data-table & metric components ---------- Used by the bulk DA and DR checkers (and future table tools). */ .svt-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .svt-counter { font-size: 12.5px; font-weight: 700; color: var(--svt-slate); white-space: nowrap; } .svt-counter.is-over { color: #a06a10; } .svt-field-error { margin: 2px 0 0; color: #991b1b; font-size: 13.5px; } /* Selects get an explicit chevron so they read as dropdowns, not text fields. */ select.svt-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23505c7c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 42px; cursor: pointer; } /* ---------- Mode toggle (segmented pills — used by link-quality + schema) ---------- */ .svt-mode { display: inline-flex; gap: 4px; padding: 4px; border: 2px solid var(--svt-border); border-radius: 999px; background: var(--svt-tile); } .svt-mode-btn { appearance: none; border: 0; background: none; padding: 8px 18px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--svt-slate); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .svt-mode-btn:hover { color: var(--svt-text); } .svt-mode-btn.is-active { background: var(--svt-primary); color: #fff; } .svt-mode-btn:focus { outline: none; } .svt-mode-btn:focus-visible { outline: 2px solid var(--svt-primary); outline-offset: 2px; } .svt-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; } .svt-export { display: inline-flex; align-items: center; gap: 8px; } .svt-tbl-scroll { overflow-x: auto; border: 2px solid var(--svt-border); border-radius: var(--svt-radius-sm); } .svt-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; } .svt-tbl th { background: var(--svt-tile); border-bottom: 2px solid var(--svt-border); padding: 0; text-align: left; white-space: nowrap; } .svt-sortbtn { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--svt-slate); padding: 12px 14px; width: 100%; text-align: left; display: inline-flex; align-items: center; gap: 6px; } .svt-sortbtn:hover, .svt-sortbtn:focus-visible { color: var(--svt-primary); } .svt-sortbtn:focus-visible { outline: 2px solid var(--svt-primary); outline-offset: -2px; } .svt-arrow { font-size: 9px; } .svt-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--svt-border); color: var(--svt-text); white-space: nowrap; } .svt-tbl tbody tr:last-child td { border-bottom: 0; } .svt-tbl tbody tr:hover td { background: rgba(98, 78, 222, 0.03); } .svt-cell-domain { font-weight: 600; overflow-wrap: anywhere; white-space: normal; } .svt-errcell { color: var(--svt-muted); font-style: italic; } /* Bordered icon button (per-row retry etc.). */ .svt-iconbtn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 6px; color: var(--svt-slate); background: transparent; border: 2px solid var(--svt-border); border-radius: 8px; padding: 0; vertical-align: middle; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .svt-iconbtn:hover, .svt-iconbtn:focus-visible { color: var(--svt-primary); border-color: var(--svt-primary); background: var(--svt-primary-soft); } .svt-iconbtn[disabled] { opacity: 0.5; cursor: wait; } /* KD-style meters: small track + fill + number. */ .svt-kd { display: inline-flex; align-items: center; gap: 9px; } .svt-kdbar { width: 44px; height: 8px; border-radius: 999px; background: #eef0f5; overflow: hidden; flex-shrink: 0; } .svt-kdfill { display: block; height: 100%; border-radius: inherit; } .svt-kdfill.is-low { background: var(--svt-danger); } .svt-kdfill.is-mid { background: var(--svt-warning); } .svt-kdfill.is-good { background: #4ade80; } .svt-kdfill.is-great { background: #16a34a; } .svt-kdnum { font-weight: 600; font-variant-numeric: tabular-nums; } .svt-kdnum--none { color: var(--svt-muted); } /* Colour-banded pills (percent metrics like spam score). */ .svt-pill { display: inline-block; min-width: 42px; text-align: center; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; } .svt-pill.is-low { background: rgba(239, 68, 68, 0.12); color: #991b1b; } .svt-pill.is-mid { background: rgba(245, 180, 10, 0.16); color: #92600e; } .svt-pill.is-good { background: rgba(74, 222, 128, 0.18); color: #15803d; } .svt-pill.is-great { background: rgba(22, 163, 74, 0.16); color: #166534; } .svt-attribution { margin-top: 10px; font-size: 12.5px; color: #9aa1b5; } /* Cross-sell link row under results. */ .svt-crosssell { margin-top: 14px; font-size: 14px; } .svt-crosssell a { color: var(--svt-primary); font-weight: 600; text-decoration: none; } .svt-crosssell a:hover, .svt-crosssell a:focus-visible { text-decoration: underline; } /* CTA banner under results. */ .svt-cta-banner { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--svt-primary-soft); border: 2px solid rgba(98, 78, 222, 0.25); border-radius: var(--svt-radius-sm); padding: 18px 22px; } .svt-cta-banner p { margin: 0; font-size: 15px; font-weight: 600; color: var(--svt-text); flex: 1 1 280px; } .svt-cta-banner .svt-button { flex: 0 0 auto; text-decoration: none; display: inline-block; } /* ---------- Focus rings: keyboard yes, mouse no (suite-wide) ---------- Themes paint their own (often black) outline on ANY focus, including plain mouse clicks. Inside plugin UI, mouse/touch focus never shows a ring; keyboard focus always shows a brand-coloured one. Applies to all current and future modules automatically. */ .svt-wrap :is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible), .svt-modal-overlay :is(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) { outline: none; } .svt-wrap :is(a, button, input[type="checkbox"], input[type="radio"], summary, [tabindex]):focus-visible, .svt-modal-overlay :is(a, button, input[type="checkbox"], input[type="radio"], summary, [tabindex]):focus-visible { outline: 2px solid var(--svt-primary); outline-offset: 2px; border-radius: 4px; } /* ---------- Info tooltip (instant, hover + keyboard/tap focus) ---------- Markup: ICON Native title attributes are too slow and never fire on touch. */ .svt-tip { position: relative; display: inline-block; cursor: help; outline: none; } .svt-tip:focus-visible { outline: 2px solid var(--svt-primary); outline-offset: 2px; border-radius: 4px; } .svt-tipbubble { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 230px; background: var(--svt-text); color: var(--svt-bg); font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal; padding: 8px 12px; border-radius: 8px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0.15s ease; pointer-events: none; z-index: 40; } .svt-tipbubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--svt-text); } .svt-tip:hover .svt-tipbubble, .svt-tip:focus .svt-tipbubble { opacity: 1; visibility: visible; } /* ---------- Small screens ---------- */ @media (max-width: 560px) { .svt-wrap { padding: 20px; } .svt-form { flex-direction: column; align-items: stretch; } /* Safety net for every module: in the column, any desktop flex-basis (percent or px) on a direct form child becomes HEIGHT — crushing buttons and fields. !important on purpose: module row-layout rules have higher specificity and load later, and none of them are meant to size the column axis. */ .svt-form > * { flex: 0 0 auto !important; } .svt-button { width: 100%; } } @media (max-width: 640px) { .svt-export { width: 100%; justify-content: center; } .svt-cta-banner { flex-direction: column; text-align: center; } /* In a column, the desktop flex-basis (280px) would become HEIGHT — a huge gap between the text and the button. */ .svt-cta-banner p { flex: 0 0 auto; } .svt-cta-banner .svt-button { width: 100%; } }