/* ========================================================================== Proxmox-Tools site Colours: the ANSI 256 values the scripts actually use, converted to hex, so the fake terminals look like the real thing. Theme: [data-theme="dark"|"light"] is set on before first paint. ========================================================================== */ :root { /* Proxmox brand, identical in both themes */ --orange: #e57000; --orange-bright: #ff8c1a; --orange-deep: #b85a00; /* ANSI 256 colours printed by the scripts */ --ansi-orange: #d75f00; /* 166 */ --ansi-orange-dark: #af5f00; /* 130 */ --ansi-orange-soft: #ff8700; /* 208 */ --ansi-amber: #ffaf00; /* 214 */ --ansi-green: #5faf00; /* 70 */ --ansi-cyan: #5fafaf; /* 73 */ --ansi-blue: #5f87af; /* 67 */ --ansi-grey: #808080; /* 244 */ --wg-red: #ff5f5f; /* 203 */ --wg-red-dark: #d70000; /* 160 */ --wg-red-soft: #ff87af; /* 211 */ --wg-blue: #87afff; /* 111 */ --radius: 16px; --radius-sm: 10px; --maxw: 1440px; --topbar-h: 64px; /* the sticky bar adds a 1px border under it */ /* Scrollbar, same recipe as victor-root.github.io/Omnify: a thin bar with no arrow buttons, a track faintly tinted with the accent, and a gradient thumb built from the two brand oranges. */ --scroll-track: color-mix(in srgb, var(--orange) 20%, transparent); --scroll-thumb: linear-gradient(180deg, var(--orange-bright), var(--orange-deep)); --scroll-thumb-hover: linear-gradient(180deg, color-mix(in srgb, var(--orange-bright) 80%, #fff), color-mix(in srgb, var(--orange) 80%, #fff)); --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif; } /* ---------- dark theme (default) ---------- */ :root, [data-theme="dark"] { --bg: #0b0d10; --bg-soft: #101318; --panel: #14181f; --panel-2: #171c24; --line: #232935; --line-soft: #1b2029; --fg: #e8ecf2; --fg-dim: #a5b0c0; --fg-faint: #6f7c8f; --term-bg: #0a0c0f; --term-frame: #12161c; --term-line: #1d232c; --term-fg: #c9d4e2; --code-bg: #1a1f28; --shadow: 0 18px 40px -24px #000; --glow-a: rgba(229, 112, 0, 0.20); --glow-b: rgba(95, 135, 175, 0.13); } /* ---------- light theme ---------- */ [data-theme="light"] { --bg: #f7f8fa; --bg-soft: #eef1f5; --panel: #ffffff; --panel-2: #f4f6f9; --line: #d8dee7; --line-soft: #e4e9f0; --fg: #14181f; --fg-dim: #4a5666; --fg-faint: #6d7a8a; /* the terminal stays dark in both themes: that is what a terminal is */ --term-bg: #0a0c0f; --term-frame: #12161c; --term-line: #1d232c; --term-fg: #c9d4e2; --code-bg: #eef1f5; --shadow: 0 16px 34px -22px rgba(20, 30, 50, 0.35); --glow-a: rgba(229, 112, 0, 0.13); --glow-b: rgba(95, 135, 175, 0.10); } * { box-sizing: border-box; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-button { display: none; height: 0; width: 0; } ::-webkit-scrollbar-track { background: var(--scroll-track); } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--orange) var(--scroll-track); } } /* Tabler icons, drawn from the sprite at the top of the page */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } html { scroll-behavior: smooth; } /* An anchored section tucks exactly under the sticky bar, border included, so no strip of the previous section stays visible above it. A card is a panel inside a section, it keeps a bit of air instead of touching the bar. */ main[id], section[id] { scroll-margin-top: calc(var(--topbar-h) + 1px); } .card { scroll-margin-top: calc(var(--topbar-h) + 21px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .2s, color .2s; } h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.02em; } p { margin: 0; } a { color: inherit; } code { font-family: var(--mono); font-size: 0.92em; background: var(--code-bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.1em 0.4em; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--orange); color: #111; padding: 12px 18px; z-index: 100; border-radius: 0 0 8px 0; font-weight: 700; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-soft); } .topbar-inner { display: flex; align-items: center; gap: 16px; height: var(--topbar-h); } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; flex-shrink: 0; } .brand-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep)); color: #1a1206; } .brand-logo .ico { width: 21px; height: 21px; stroke-width: 2.1; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-size: 1.06rem; letter-spacing: -0.01em; white-space: nowrap; } .brand-by { font-size: 0.71rem; font-weight: 550; color: var(--fg-faint); white-space: nowrap; letter-spacing: 0.01em; } .brand-accent { color: var(--orange); } .topnav { display: flex; align-items: center; gap: 4px; margin-left: 8px; margin-right: auto; } .topnav a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--fg-dim); padding: 8px 12px; border-radius: 9px; font-size: 0.93rem; font-weight: 550; transition: color .15s, background .15s; white-space: nowrap; } .topnav .ico { width: 17px; height: 17px; opacity: .75; } .topnav a:hover .ico { opacity: 1; color: var(--orange); } .topnav a:hover { color: var(--fg); background: var(--panel-2); } .controls { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* segmented buttons, language and theme */ .seg { display: inline-flex; align-items: center; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; } .seg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .seg button { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 8px; background: transparent; border: 0; border-radius: 7px; color: var(--fg-faint); font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: background .15s, color .15s; } .seg button:hover { color: var(--fg); background: var(--panel-2); } .seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); } .seg button .ico { width: 16px; height: 16px; } .ghlink { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg-dim); background: var(--panel); transition: color .15s, border-color .15s; } .ghlink .ico { width: 18px; height: 18px; } .ghlink:hover { color: var(--fg); border-color: var(--fg-faint); } @media (max-width: 900px) { .topnav { display: none; } } @media (max-width: 560px) { .brand-name { display: none; } .controls { gap: 6px; } } /* ---------- hero ---------- */ .hero { position: relative; padding: 64px 0 54px; overflow: hidden; } .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 46px; align-items: center; } .hero-text { min-width: 0; } .hero-demo { min-width: 0; } @media (max-width: 1150px) { .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; } } .hero-glow { position: absolute; z-index: 1; top: -260px; left: 50%; transform: translateX(-50%); width: 1100px; height: 620px; pointer-events: none; background: radial-gradient(closest-side, var(--glow-a), transparent 70%), radial-gradient(closest-side at 30% 60%, var(--glow-b), transparent 70%); filter: blur(10px); } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim); border: 1px solid var(--line); background: var(--panel); padding: 6px 14px; border-radius: 999px; margin-bottom: 26px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ansi-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ansi-green) 18%, transparent); } .hero h1 { font-size: clamp(1.95rem, 2.7vw, 3rem); font-weight: 800; margin-bottom: 20px; } /* the product name wraps as one block, never "Proxmox" then "VE" alone */ .grad { background: linear-gradient(100deg, var(--orange-bright), var(--orange) 45%, #ffb066); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; } .lede { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--fg-dim); max-width: 62ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 12px; font-weight: 650; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .22s cubic-bezier(.22,1,.36,1), background .18s, border-color .18s, box-shadow .22s; } .btn .ico { width: 19px; height: 19px; } .btn:hover { transform: scale(1.045); } .btn:active { transform: scale(0.99); } .btn-primary { background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep)); color: #15181d; box-shadow: 0 8px 24px -12px rgba(229, 112, 0, 0.8); } .btn-primary:hover { box-shadow: 0 16px 34px -12px rgba(229, 112, 0, 0.95); } .btn-ghost { border-color: var(--line); color: var(--fg); background: var(--panel); } .btn-ghost:hover { border-color: var(--orange); color: var(--orange); } /* one strip under the buttons, the three numbers side by side */ .hero-facts { display: flex; flex-wrap: wrap; list-style: none; margin: 32px 0 0; padding: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; } .hero-facts li { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 16px 18px; border-left: 1px solid var(--line-soft); text-align: center; } .hero-facts li:first-child { border-left: 0; } /* icon and number read as one line, the label sits under both */ .fact-value { display: inline-flex; align-items: center; gap: 9px; } .fact-value .ico { width: 22px; height: 22px; color: var(--orange); } .hero-facts strong { font-size: 1.32rem; font-weight: 750; line-height: 1.2; } .hero-facts li > span:last-child { font-size: 0.78rem; line-height: 1.35; color: var(--fg-faint); } @media (max-width: 520px) { .hero-facts li { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--line-soft); } .hero-facts li:first-child { border-top: 0; } } /* ---------- trust strip ---------- */ .strip { padding: 8px 0 40px; } .strip-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .strip-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; } .strip-card h3 { font-size: 1rem; display: flex; align-items: center; gap: 11px; margin-bottom: 9px; } .strip-card h3 .ico { width: 21px; height: 21px; color: var(--orange); } .strip-card p { font-size: 0.92rem; color: var(--fg-dim); } /* ---------- sections ---------- */ .section { padding: 74px 0; } .section-alt { background: var(--bg-soft); border-block: 1px solid var(--line-soft); } .section-head { margin-bottom: 40px; max-width: 640px; } .section-head h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 750; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; } .head-ico { width: 1em; height: 1em; color: var(--orange); } .section-head p { color: var(--fg-dim); } /* ---------- script cards ---------- */ .cards { display: flex; flex-direction: column; gap: 28px; } .card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; transition: border-color .2s; } .card:hover { border-color: var(--line); } .card-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } @media (max-width: 940px) { .card-grid { grid-template-columns: minmax(0, 1fr); } } .card-info { padding: 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .card-title { font-size: 1.34rem; font-weight: 730; display: flex; align-items: center; gap: 12px; } .card-title .ico { width: 26px; height: 26px; color: var(--orange); } .badge { flex-shrink: 0; font-family: var(--mono); font-size: 0.72rem; color: var(--ansi-orange); background: color-mix(in srgb, var(--ansi-amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ansi-amber) 34%, transparent); padding: 5px 10px; border-radius: 999px; white-space: nowrap; } /* the description is what people actually read: give it room and contrast */ .card-tagline { color: var(--fg); font-size: 1.06rem; line-height: 1.55; font-weight: 500; padding-left: 15px; border-left: 3px solid var(--orange); } .runs-on { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 0.83rem; color: var(--fg-faint); border: 1px dashed var(--line); border-radius: 8px; padding: 5px 11px; } .runs-on b { color: var(--fg-dim); font-weight: 600; } .runs-on .ico { width: 17px; height: 17px; color: var(--fg-faint); } .points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .points li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.94rem; color: var(--fg-dim); } .points .ico { width: 21px; height: 21px; color: var(--ansi-green); margin-top: 1px; } .card-note { display: flex; gap: 11px; font-size: 0.87rem; color: var(--fg-faint); background: color-mix(in srgb, var(--ansi-blue) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ansi-blue) 22%, transparent); border-radius: var(--radius-sm); padding: 12px 14px; } .card-note .ico { width: 19px; height: 19px; color: var(--ansi-blue); margin-top: 1px; } /* folded by default: the exact paths the script writes, read before running */ .touches { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); } .touches summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 620; color: var(--fg-dim); border-radius: var(--radius-sm); transition: color .15s; } .touches summary::-webkit-details-marker { display: none; } .touches summary:hover { color: var(--fg); } .touches summary .ico { width: 18px; height: 18px; color: var(--orange); } .touch-caret { margin-left: auto; color: var(--fg-faint); transition: transform .2s; } .touches[open] .touch-caret { transform: rotate(180deg); } .touch-list { list-style: none; margin: 0; padding: 2px 14px 10px; display: flex; flex-direction: column; gap: 9px; } .touch-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; font-size: 0.82rem; } .touch-list span { color: var(--fg-faint); } .touch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; padding: 9px 14px; font-size: 0.8rem; border-top: 1px solid var(--line-soft); } .touch-meta .ico { width: 16px; height: 16px; color: var(--fg-faint); } .touch-meta b { color: var(--fg-dim); font-weight: 620; } .touches code { font-size: 0.76rem; color: var(--fg); background: var(--code-bg); border-color: var(--line-soft); word-break: break-all; } .run { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .run-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-faint); font-weight: 650; } /* one rounded block, the command flows freely inside it, icon button on the right, in the spirit of the fingerprint block on victor-root.github.io/Omnify */ .run-box { display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 15px; } .run-cmd { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.8rem; line-height: 1.75; color: var(--fg-dim); word-break: break-all; } /* no per-line box: the inner code element must stay invisible */ .run-cmd code { background: none; border: 0; padding: 0; font-size: inherit; } [data-theme="light"] .run-cmd { color: #3a4655; } [data-theme="light"] .run-cmd .c-url { color: #0f6f78; } [data-theme="light"] .run-cmd .c-cmd { color: #b85a00; } .copy { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--fg-dim); cursor: pointer; padding: 0; transition: background .18s, border-color .18s, color .18s, transform .18s; } .copy:hover { background: var(--panel-2); border-color: var(--fg-faint); color: var(--fg); } .copy:active { transform: scale(0.94); } .copy svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .copy .ico-done { display: none; } .copy.done { color: var(--ansi-green); border-color: color-mix(in srgb, var(--ansi-green) 45%, transparent); } .copy.done .ico-copy { display: none; } .copy.done .ico-done { display: block; } .card-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.87rem; } .card-links a, .card-links button { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim); text-decoration: none; border: 0; border-bottom: 1px solid transparent; background: none; padding: 0; font: inherit; cursor: pointer; transition: color .15s, border-color .15s; } .card-links a:hover, .card-links button:hover { color: var(--orange); border-color: var(--orange); } .card-links button.done { color: var(--ansi-green); border-color: transparent; } .card-links .ico { width: 17px; height: 17px; } /* ---------- fake terminal, KDE Breeze style frame ---------- */ .term-side { border-left: 1px solid var(--line-soft); display: flex; min-width: 0; } @media (max-width: 940px) { .term-side { border-left: 0; border-top: 1px solid var(--line-soft); } } .term { flex: 1; min-width: 0; background: var(--term-bg); display: flex; flex-direction: column; overflow: hidden; } /* the hero one floats instead of being flush with a card edge */ .term-hero { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* Breeze title bar: title on the left, window buttons on the right */ .term-bar { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; height: 36px; background: var(--term-frame); border-bottom: 1px solid var(--term-line); } .term-name { flex: 1; min-width: 0; font-size: 0.74rem; color: #9aa7b8; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .term-btns { display: flex; align-items: center; gap: 2px; } .term-btn { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; color: #97a3b4; transition: background .13s, color .13s; } .term-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .term:hover .term-btn { color: #b6c1d0; } .term-btn:hover { background: #2a3340; color: #e8ecf2; } .term-btn.close:hover { background: #c9342c; color: #fff; } .term-body { padding: 14px 16px 18px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--term-fg); overflow-x: auto; scrollbar-width: thin; } .term-body::-webkit-scrollbar { height: 6px; } .term-body::-webkit-scrollbar-thumb { background: #262e39; border-radius: 3px; } .term-body pre { margin: 0; font: inherit; } @media (max-width: 1100px) { .term-body { font-size: 10px; } } @media (max-width: 620px) { .term-body { font-size: 8.5px; } } /* the pasted line above the hero terminal, wrapping the way a shell does */ .t-run { margin: 0 0 10px; font: inherit; white-space: pre-wrap; word-break: break-all; } .t-user { color: var(--ansi-green); font-weight: 700; } .c-cmd { color: var(--ansi-orange-soft); } .c-url { color: var(--ansi-cyan); } .t-logo { color: var(--ansi-orange); } .t-logo.red { color: var(--wg-red); } .t-sub { color: var(--ansi-orange-soft); font-weight: 700; } .t-sub.red { color: var(--wg-red-soft); font-weight: 700; } .t-by { color: var(--ansi-grey); } .t-rule { color: var(--ansi-orange-dark); } .t-rule.red { color: var(--wg-red-dark); } .t-box { color: var(--ansi-blue); } .t-box.red { color: var(--wg-blue); } .t-num { color: var(--ansi-orange-soft); } .t-num.red { color: var(--wg-red-soft); } .t-q { color: var(--ansi-amber); } .t-cursor { display: inline-block; width: 7px; height: 1.05em; vertical-align: text-bottom; background: var(--term-fg); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* ---------- news ---------- */ .news { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; } /* the whole card is the link to its script */ .news-card { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px 22px 18px; position: relative; overflow: hidden; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s cubic-bezier(.22,1,.36,1); } /* a warm halo in the corner, so the section is not a wall of grey boxes */ .news-card::before { content: ""; position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--orange) 22%, transparent), transparent); pointer-events: none; } .news-card:hover { border-color: color-mix(in srgb, var(--orange) 45%, transparent); transform: translateY(-3px); } .news-top { display: flex; align-items: center; gap: 12px; } .news-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent); color: var(--orange); } .news-icon .ico { width: 21px; height: 21px; } .news-name { font-size: 1.05rem; font-weight: 700; line-height: 1.25; flex: 1 1 auto; min-width: 0; } .news-foot { margin-top: auto; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .news-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ansi-green); background: color-mix(in srgb, var(--ansi-green) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ansi-green) 30%, transparent); padding: 4px 10px; border-radius: 999px; } .news-badge .ico { width: 13px; height: 13px; } .news-body { color: var(--fg-dim); font-size: 0.94rem; } .news-go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--orange); opacity: .6; background: color-mix(in srgb, var(--orange) 10%, transparent); transition: opacity .2s, transform .2s, background .2s; } .news-go .ico { width: 18px; height: 18px; } .news-card:hover .news-go { opacity: 1; transform: translateX(4px); background: color-mix(in srgb, var(--orange) 18%, transparent); } /* ---------- steps ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .steps li { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 24px; } .step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--orange) 14%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 34%, transparent); color: var(--orange); font-family: var(--mono); font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; } .steps h3 { font-size: 1.02rem; margin-bottom: 7px; } .steps p { font-size: 0.9rem; color: var(--fg-dim); } .howto-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; padding: 16px 20px; background: color-mix(in srgb, var(--ansi-amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--ansi-amber) 26%, transparent); border-radius: var(--radius-sm); color: var(--fg-dim); font-size: 0.9rem; } .howto-note .ico { width: 20px; height: 20px; color: var(--ansi-amber); margin-top: 2px; } /* ---------- questions ---------- */ /* two wide columns rather than three narrow ones: the answers are sentences */ .faq { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .faq { grid-template-columns: 1fr 1fr; } } .faq-item { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; } .faq-item h3 { font-size: 1.02rem; display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; } .faq-item h3 .ico { width: 20px; height: 20px; color: var(--orange); flex: none; margin-top: 1px; } .faq-item p { font-size: 0.92rem; color: var(--fg-dim); } /* ---------- footer ---------- */ .footer { border-top: 1px solid var(--line-soft); padding: 40px 0 32px; background: var(--bg-soft); } .footer-inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .footer-brand { font-weight: 700; } .footer-by { font-size: 0.88rem; color: var(--fg-faint); margin-top: 4px; } .footer-by a { color: var(--orange); text-decoration: none; font-weight: 620; } .footer-by a:hover { text-decoration: underline; } .footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.9rem; } .footer-links a { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-dim); text-decoration: none; } .footer-links a:hover { color: var(--orange); } .footer-links .ico { width: 17px; height: 17px; } .disclaimer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; line-height: 1.7; color: var(--fg-faint); max-width: 900px; } .credits { margin-top: 10px; font-size: 0.78rem; color: var(--fg-faint); } .credits a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; } .credits a:hover { color: var(--orange); } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--panel); border: 1px solid var(--line); color: var(--fg); padding: 12px 20px; border-radius: 11px; font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; box-shadow: var(--shadow); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .toast::before { content: "✓ "; color: var(--ansi-green); }