diff --git a/.github/workflows/deploy-site.yml b/.github/workflows/deploy-site.yml new file mode 100644 index 0000000..cd99435 --- /dev/null +++ b/.github/workflows/deploy-site.yml @@ -0,0 +1,87 @@ +# ============================================================ +# Win11 Gaming Toolkit — landing site +# ============================================================ +# Publishes site/ to the Cloudflare Pages project `tweakeazy`. +# +# Separate from ci.yml on purpose: that gate is PowerShell +# (PSScriptAnalyzer + Pester) and has nothing to say about HTML. This +# one only runs when site/ actually changed, so toolkit commits do not +# redeploy the page. +# +# There is no build step. site/ is hand-written HTML/CSS/JS and is +# uploaded as-is, which is also why site/_headers sits at the root of +# that folder — Pages reads _headers from the top of whatever directory +# it is handed. +# ============================================================ +name: deploy-site + +on: + push: + branches: [main] + paths: ['site/**', '.github/workflows/deploy-site.yml'] + pull_request: + paths: ['site/**', '.github/workflows/deploy-site.yml'] + workflow_dispatch: + +jobs: + site: + runs-on: ubuntu-latest + # Job level so the deploy step can branch on whether the token + # exists: the `secrets` context is not usable in a step `if:`, but + # `env` is. + env: + CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }} + CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} + steps: + - uses: actions/checkout@v4 + + # Nothing compiles here, so the only thing worth proving before a + # deploy is that the files the page asks for are actually present. + # A missing stylesheet is a silent 404 in production, not a build + # error. + - name: Check every local asset the page references exists + run: | + missing=0 + # Read line by line rather than looping over an unquoted + # expansion: word splitting is a bash-ism, and this should + # behave the same when a dev runs it in zsh locally. + while IFS= read -r r; do + [ -n "$r" ] || continue + path="site/${r%%\?*}" + if [ -f "$path" ]; then + echo " ok $r" + else + echo "::error::index.html references $r but $path does not exist" + missing=1 + fi + done < + + + WG + diff --git a/site/assets/hero-workstation.png b/site/assets/hero-workstation.png new file mode 100644 index 0000000..d375679 Binary files /dev/null and b/site/assets/hero-workstation.png differ diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..0cef089 --- /dev/null +++ b/site/index.html @@ -0,0 +1,326 @@ + + + + + + + Win11 Gaming Toolkit + + + + +
+ + + + Win11 Gaming Toolkit + reversible PC tweaks + + + + + + Read guide +
+ +
+
+ Dark gaming workstation with performance dashboards and a desktop PC + + +
+
+ + Manifest-tracked Windows 11 tuning +
+

Tune your gaming PC without losing the undo button.

+

+ A source-cited toolkit for Windows 11 performance tweaks, gaming latency checks, + clean driver paths, and aggressive opt-ins with a clear revert contract. +

+ +
+ + Choose a path +
+ +
+ Admin PowerShell + cd "<path-to-repo>"; .\launcher.ps1 +
+
+ + +
+ +
+
+ 01 + Launcher first +

Run one guided menu instead of guessing which script to start with.

+
+
+ 02 + Tracked rollback +

Advanced changes capture pre-toolkit state before they mutate Windows.

+
+
+ 03 + Trade-offs visible +

Anti-cheat, reboot, disk, and security impact are called out before you run.

+
+
+ +
+
Runbook
+
+
+

Pick the path that matches your risk tolerance.

+

+ Start with the launcher unless you already know the exact phase you want. + The aggressive full-stack apply exists, but it is not the default recommendation. +

+
+ Release checklist +
+ +
+
+ + + + +
+ +
+
+

Recommended first run

+

Open the launcher from elevated PowerShell.

+

+ The launcher checks admin state, shows the current manifest status, and lets you + run backup, verify, apply, revert, or individual tweak categories. +

+
    +
  1. Clone or download this repo to a local folder.
    2. +
  2. Right-click PowerShell and choose Run as Administrator.
    3. +
  3. Run the command, then use [V] verify before applying anything.
    4. +
+
+ +
+
+ Command + +
+ 
cd "<path-to-repo>"
+.\launcher.ps1
+
+
+
+
+ +
+
Tweak catalog
+
+

Everything is grouped by intent, not mystery switches.

+

+ Filter by risk tier and use the paired restore scripts when you are testing one + change at a time. +

+
+ +
+ + + + +
+ +
+
+
Safe
+

Backup and restore point

+

Create a Windows restore point and export key registry areas before tuning.

+ 1 backup\create-backup.ps1 +
+ +
+
Safe
+

Hardware audits

+

Read-only checks for pagefile, DirectStorage, polling rate, MSI mode, RAM, CPU, and GPU.

+ 12 hardware\check-*.ps1 +
+ +
+
Advanced
+

Power and services

+

Performance power plan, service trimming, startup delay, and background task cleanup.

+ 2 power plan\configure-power.ps1 +
+ +
+
Advanced
+

GPU path

+

Driver install helpers, MSI mode, ReBAR checks, NVIDIA P0, and AMD ULPS opt-ins.

+ 6 gpu\install-gpu-driver.ps1 +
+ +
+
Advanced
+

Network latency

+

Adapter power settings, RSS tuning, RSC, interrupt moderation, DNS, and Nagle-related flags.

+ 7 network\optimize-network.ps1 +
+ +
+
Trade-off
+

Security vs performance

+

Opt-in scripts for VBS, HVCI, LSA protection, DEP, Defender, and Spectre/Meltdown toggles.

+ 8 security vs performance\configure-vbs.ps1 +
+
+
+ +
+
Safety model
+
+
+

Aggressive tuning, but with guardrails you can audit.

+

+ The toolkit is built for people who want performance knobs without black-box behavior. + Every meaningful mutation is paired with a restore path, source context, and risk label. +

+ +
+ Toolkit README + BIOS checklist +
+
+ +
+
+ Before + Create backup and read GUIDE.md. +

Do not start with Apply Everything on a school, work-managed, or mission-critical PC.

+
+
+ During + Apply one category at a time if you are troubleshooting. +

Gaming laptops, hybrid GPUs, and anti-cheat-heavy setups deserve slower changes.

+
+
+ After + Run verify and reboot when the script says so. +

If a change hurts stability, use the paired restore script or REVERT-EVERYTHING.ps1.

+
+
+
+
+ +
+
What makes it different
+

Built more like a release artifact than a random optimizer zip.

+ +
+
+ Manifest rollback +

Tracked registry and service writes are captured under ProgramData before mutation.

+
+
+ Source-cited scripts +

Headers point to Microsoft Learn, vendor docs, or upstream project context.

+
+
+ No hidden binaries +

Third-party tools are downloaded at runtime and verified by SHA-256.

+
+
+ Trade-off labels +

Security and anti-cheat implications are visible before you run the risky path.

+
+
+
+ +
+
FAQ
+

Run it like a tool, not a superstition.

+ +
+
+ What should I run first? +

Run .\launcher.ps1 from Administrator PowerShell, then use [V] verify and the backup path before applying changes.

+
+
+ Is Apply Everything safe? +

It is aggressive by design. Use it only after reading the guide and understanding the Security Trade-off scripts.

+
+
+ Can I undo changes? +

Use paired restore scripts for individual tweaks or .\REVERT-EVERYTHING.ps1 for the manifest-driven rollback path.

+
+
+ Can I test this from macOS? +

No. The toolkit is developed here, but runtime testing must happen on Windows 11 with the manual checklist.

+
+
+
+
+ + + +
+ + + diff --git a/site/script.js b/site/script.js new file mode 100644 index 0000000..ce30a6c --- /dev/null +++ b/site/script.js @@ -0,0 +1,156 @@ +const pathData = { + guided: { + label: "Recommended first run", + title: "Open the launcher from elevated PowerShell.", + description: + "The launcher checks admin state, shows the current manifest status, and lets you run backup, verify, apply, revert, or individual tweak categories.", + command: 'cd ""\n.\\launcher.ps1', + steps: [ + "Clone or download this repo to a local folder.", + "Right-click PowerShell and choose Run as Administrator.", + "Run the command, then use [V] verify before applying anything.", + ], + }, + verify: { + label: "Read-only confidence check", + title: "Inspect the current state before changing the machine.", + description: + "Verification reports applied, drifted, and already-present states without mutating Windows.", + command: 'cd ""\n.\\10 verify\\verify-tweaks.ps1', + steps: [ + "Open Administrator PowerShell.", + "Run the verify script from the repo root.", + "Use the results to decide whether you need a specific phase or a rollback.", + ], + }, + aggressive: { + label: "Maximum scripted tuning", + title: "Apply the full stack only after reading the warnings.", + description: + "Apply Everything combines power, services, registry, GPU, network, cleanup, and Security Trade-off phases.", + command: 'cd ""\n.\\APPLY-EVERYTHING.ps1', + steps: [ + "Create the backup and restore point first.", + "Read GUIDE.md and the Security Trade-off section.", + "Run verify after apply, then reboot when prompted.", + ], + }, + rollback: { + label: "Undo path", + title: "Restore tracked settings from the manifest.", + description: + "The rollback script restores captured state first, then falls back to documented defaults where no manifest state exists.", + command: 'cd ""\n.\\REVERT-EVERYTHING.ps1', + steps: [ + "Run from Administrator PowerShell.", + "Let the manifest-driven rollback finish before rebooting.", + "Run verify again and inspect anything still marked drifted.", + ], + }, +}; + +const header = document.querySelector(".site-header"); +const toast = document.querySelector(".toast"); +const pathTabs = Array.from(document.querySelectorAll(".path-tab")); +const filterButtons = Array.from(document.querySelectorAll(".filter-button")); +const tweakCards = Array.from(document.querySelectorAll(".tweak-card")); + +const showToast = (message) => { + toast.textContent = message; + toast.classList.add("is-visible"); + window.clearTimeout(showToast.timeout); + showToast.timeout = window.setTimeout(() => { + toast.classList.remove("is-visible"); + }, 1900); +}; + +const copyText = async (id) => { + const target = document.getElementById(id); + if (!target) { + return; + } + + const text = target.textContent.trim(); + + try { + await navigator.clipboard.writeText(text); + showToast("Copied command."); + } catch { + const field = document.createElement("textarea"); + field.value = text; + field.setAttribute("readonly", ""); + field.style.position = "fixed"; + field.style.left = "-999px"; + document.body.append(field); + field.select(); + + const copied = document.execCommand("copy"); + field.remove(); + showToast(copied ? "Copied command." : "Copy failed. Select the command manually."); + } +}; + +const renderPath = (key) => { + const data = pathData[key]; + if (!data) { + return; + } + + document.getElementById("path-label").textContent = data.label; + document.getElementById("path-title").textContent = data.title; + document.getElementById("path-description").textContent = data.description; + document.getElementById("path-command").textContent = data.command; + + const steps = document.getElementById("path-steps"); + steps.replaceChildren( + ...data.steps.map((step) => { + const item = document.createElement("li"); + item.textContent = step; + return item; + }), + ); + + pathTabs.forEach((tab) => { + const active = tab.dataset.path === key; + tab.classList.toggle("is-active", active); + tab.setAttribute("aria-selected", String(active)); + }); +}; + +const filterTweaks = (filter) => { + tweakCards.forEach((card) => { + const visible = filter === "all" || card.dataset.tier === filter; + card.classList.toggle("is-hidden", !visible); + }); + + filterButtons.forEach((button) => { + const active = button.dataset.filter === filter; + button.classList.toggle("is-active", active); + }); +}; + +document.addEventListener("click", (event) => { + const copyButton = event.target.closest("[data-copy]"); + if (copyButton) { + copyText(copyButton.dataset.copy); + return; + } + + const tab = event.target.closest("[data-path]"); + if (tab) { + renderPath(tab.dataset.path); + return; + } + + const filter = event.target.closest("[data-filter]"); + if (filter) { + filterTweaks(filter.dataset.filter); + } +}); + +const syncHeader = () => { + header.dataset.elevated = String(window.scrollY > 12); +}; + +window.addEventListener("scroll", syncHeader, { passive: true }); +syncHeader(); diff --git a/site/styles.css b/site/styles.css new file mode 100644 index 0000000..743a7be --- /dev/null +++ b/site/styles.css @@ -0,0 +1,4 @@ +@import url("styles/base.css"); +@import url("styles/layout.css"); +@import url("styles/sections.css"); +@import url("styles/responsive.css"); diff --git a/site/styles/base.css b/site/styles/base.css new file mode 100644 index 0000000..0ebe574 --- /dev/null +++ b/site/styles/base.css @@ -0,0 +1,347 @@ +:root { + color-scheme: dark; + --bg: #070908; + --bg-2: #0d1210; + --panel: rgba(12, 18, 16, 0.74); + --panel-solid: #101713; + --panel-strong: #151d18; + --line: rgba(210, 255, 218, 0.15); + --line-strong: rgba(210, 255, 218, 0.3); + --text: #eff8f0; + --muted: #a8b7ac; + --soft: #748177; + --accent: #7cff55; + --accent-2: #caff6a; + --amber: #ffc44d; + --red: #ff6868; + --shadow: rgba(0, 0, 0, 0.45); + --max: 1180px; + --radius: 16px; + --radius-sm: 10px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + min-width: 320px; + background: + radial-gradient(circle at 18% 12%, rgba(124, 255, 85, 0.12), transparent 28rem), + linear-gradient(180deg, #050605 0%, var(--bg) 44%, #0b0f0c 100%); + color: var(--text); + font-family: + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + sans-serif; + line-height: 1.5; +} + +body::before { + position: fixed; + inset: 0; + z-index: -2; + pointer-events: none; + content: ""; + background-image: + linear-gradient(rgba(210, 255, 218, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(210, 255, 218, 0.035) 1px, transparent 1px); + background-size: 42px 42px; + mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%); +} + +img { + display: block; + max-width: 100%; +} + +a { + color: inherit; + text-decoration: none; +} + +button, +a { + -webkit-tap-highlight-color: transparent; +} + +button { + font: inherit; +} + +code, +pre { + font-family: + "SFMono-Regular", + Consolas, + "Liberation Mono", + Menlo, + monospace; +} + +.site-header { + position: sticky; + top: 0; + z-index: 20; + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 24px; + min-height: 72px; + padding: 14px clamp(18px, 4vw, 44px); + border-bottom: 1px solid transparent; + background: rgba(7, 9, 8, 0.52); + backdrop-filter: blur(18px); +} + +.site-header[data-elevated="true"] { + border-bottom-color: var(--line); + background: rgba(7, 9, 8, 0.86); +} + +.brand { + display: inline-flex; + align-items: center; + gap: 12px; + min-width: 0; +} + +.brand-mark { + display: grid; + width: 42px; + height: 42px; + place-items: center; + border: 1px solid rgba(124, 255, 85, 0.46); + border-radius: var(--radius-sm); + color: var(--accent); + background: + linear-gradient(135deg, rgba(124, 255, 85, 0.18), rgba(12, 18, 16, 0.9)), + #0b100d; + font-size: 0.78rem; + font-weight: 800; + letter-spacing: 0.08em; + box-shadow: 0 0 34px rgba(124, 255, 85, 0.12); +} + +.brand strong, +.brand small { + display: block; +} + +.brand strong { + font-size: 0.95rem; + letter-spacing: 0.01em; +} + +.brand small { + color: var(--muted); + font-size: 0.74rem; +} + +.nav-links { + display: flex; + align-items: center; + justify-content: center; + gap: clamp(14px, 3vw, 32px); + color: var(--muted); + font-size: 0.88rem; +} + +.nav-links a, +.text-link, +.site-footer a { + transition: + color 180ms ease, + border-color 180ms ease; +} + +.nav-links a:hover, +.text-link:hover, +.site-footer a:hover { + color: var(--accent); +} + +.header-action { + justify-self: end; + padding: 10px 16px; + border: 1px solid var(--line); + border-radius: 999px; + color: var(--text); + background: rgba(210, 255, 218, 0.06); + font-size: 0.86rem; + font-weight: 700; +} + +.hero { + position: relative; + display: grid; + min-height: min(82dvh, 800px); + overflow: hidden; + padding: clamp(58px, 8vh, 104px) clamp(18px, 5vw, 72px) clamp(42px, 7vh, 76px); + border-bottom: 1px solid var(--line); +} + +.hero-image, +.hero-shade { + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +.hero-image { + z-index: -3; + object-fit: cover; + object-position: 64% center; +} + +.hero-shade { + z-index: -2; + background: + linear-gradient(90deg, rgba(7, 9, 8, 0.98) 0%, rgba(7, 9, 8, 0.86) 36%, rgba(7, 9, 8, 0.34) 70%, rgba(7, 9, 8, 0.62) 100%), + linear-gradient(180deg, rgba(7, 9, 8, 0.1) 0%, rgba(7, 9, 8, 0.7) 100%); +} + +.hero-content { + width: min(100%, 760px); + align-self: center; +} + +.eyebrow, +.section-kicker, +.path-label, +.tier, +.command-card-top, +.panel-header, +.rail-item span { + color: var(--accent); + font-size: 0.78rem; + font-weight: 800; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + margin-bottom: 20px; +} + +.signal-dot { + width: 10px; + height: 10px; + border-radius: 999px; + background: var(--accent); + box-shadow: 0 0 22px rgba(124, 255, 85, 0.82); +} + +h1, +h2, +h3, +p { + margin-top: 0; +} + +h1 { + max-width: 11ch; + margin-bottom: 24px; + font-size: clamp(3.1rem, 7.4vw, 6rem); + line-height: 0.92; + letter-spacing: 0; +} + +.hero-copy { + max-width: 62ch; + margin-bottom: 32px; + color: #d7e4da; + font-size: clamp(1.05rem, 1.8vw, 1.25rem); +} + +.hero-actions, +.safety-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-items: center; +} + +.button, +.copy-button, +.path-tab, +.filter-button { + display: inline-flex; + min-height: 44px; + align-items: center; + justify-content: center; + border: 1px solid transparent; + border-radius: 999px; + cursor: pointer; + transition: + transform 180ms ease, + border-color 180ms ease, + background 180ms ease, + color 180ms ease; +} + +.button { + padding: 0 20px; + font-weight: 800; +} + +.button:hover, +.copy-button:hover, +.path-tab:hover, +.filter-button:hover { + transform: translateY(-1px); +} + +.button.primary { + color: #061007; + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + box-shadow: 0 16px 50px rgba(124, 255, 85, 0.18); +} + +.button.secondary { + border-color: var(--line-strong); + color: var(--text); + background: rgba(210, 255, 218, 0.07); +} + +.command-line { + display: grid; + width: min(100%, 620px); + grid-template-columns: auto minmax(0, 1fr); + gap: 12px; + align-items: center; + margin-top: 28px; + padding: 13px 14px; + border: 1px solid var(--line); + border-radius: var(--radius-sm); + background: rgba(3, 5, 4, 0.72); + box-shadow: 0 20px 70px var(--shadow); +} + +.command-line span { + color: var(--soft); + font-size: 0.78rem; + font-weight: 800; + text-transform: uppercase; +} + +.command-line code { + min-width: 0; + overflow: hidden; + color: var(--accent); + font-size: 0.88rem; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/site/styles/layout.css b/site/styles/layout.css new file mode 100644 index 0000000..4e6a180 --- /dev/null +++ b/site/styles/layout.css @@ -0,0 +1,382 @@ +.hero-panel { + position: absolute; + right: clamp(18px, 5vw, 72px); + bottom: clamp(22px, 5vh, 56px); + width: min(410px, calc(100% - 36px)); + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(8, 12, 10, 0.7); + backdrop-filter: blur(16px); + box-shadow: 0 22px 90px var(--shadow); +} + +.panel-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 16px 18px; + border-bottom: 1px solid var(--line); +} + +.panel-header strong { + color: var(--text); + letter-spacing: 0; + text-transform: none; +} + +.metric-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.metric-grid div { + min-height: 96px; + padding: 18px; + border-right: 1px solid var(--line); + border-bottom: 1px solid var(--line); +} + +.metric-grid div:nth-child(2n) { + border-right: 0; +} + +.metric-grid div:nth-last-child(-n + 2) { + border-bottom: 0; +} + +.metric-grid strong { + display: block; + color: var(--text); + font-size: 1.75rem; + line-height: 1; +} + +.metric-grid span { + color: var(--muted); + font-size: 0.86rem; +} + +.intro-band { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + border-bottom: 1px solid var(--line); + background: rgba(13, 18, 16, 0.9); +} + +.promise { + min-height: 176px; + padding: clamp(24px, 4vw, 40px); + border-right: 1px solid var(--line); +} + +.promise:last-child { + border-right: 0; +} + +.promise span { + display: block; + margin-bottom: 26px; + color: var(--accent); + font-size: 0.8rem; + font-weight: 900; + letter-spacing: 0.12em; +} + +.promise strong { + display: block; + margin-bottom: 10px; + font-size: 1.05rem; +} + +.promise p { + margin-bottom: 0; + color: var(--muted); +} + +.section { + width: min(var(--max), calc(100% - 36px)); + margin: 0 auto; + padding: clamp(72px, 12vw, 132px) 0; +} + +.section-head { + max-width: 760px; + margin-bottom: 34px; +} + +.section-head.split { + display: grid; + max-width: none; + grid-template-columns: minmax(0, 760px) auto; + gap: 30px; + align-items: end; +} + +h2 { + margin-bottom: 18px; + font-size: clamp(2.2rem, 5vw, 4.8rem); + line-height: 0.98; + letter-spacing: 0; +} + +h3 { + margin-bottom: 12px; + font-size: 1.25rem; + line-height: 1.16; +} + +.section p { + color: var(--muted); + font-size: 1rem; +} + +.text-link { + justify-self: end; + padding-bottom: 3px; + border-bottom: 1px solid var(--line-strong); + color: var(--text); + font-weight: 800; +} + +.path-shell, +.safety-rail, +.faq-list { + border: 1px solid var(--line); + border-radius: var(--radius); + background: linear-gradient(180deg, rgba(16, 23, 19, 0.86), rgba(8, 12, 10, 0.92)); + box-shadow: 0 30px 90px rgba(0, 0, 0, 0.24); +} + +.path-tabs { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 8px; + padding: 10px; + border-bottom: 1px solid var(--line); +} + +.path-tab, +.filter-button, +.copy-button { + color: var(--muted); + background: transparent; +} + +.path-tab { + min-width: 0; + padding: 0 12px; + font-weight: 800; +} + +.path-tab.is-active, +.filter-button.is-active { + color: #061007; + background: var(--accent); +} + +.path-content { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr); + gap: clamp(22px, 4vw, 46px); + padding: clamp(22px, 4vw, 42px); +} + +.path-label { + margin-bottom: 12px; +} + +.step-list { + display: grid; + gap: 12px; + margin: 26px 0 0; + padding: 0; + list-style: none; + counter-reset: steps; +} + +.step-list li { + position: relative; + min-height: 46px; + padding-left: 56px; + color: #d9e4dc; +} + +.step-list li::before { + position: absolute; + left: 0; + top: 0; + display: grid; + width: 34px; + height: 34px; + place-items: center; + border: 1px solid var(--line-strong); + border-radius: 999px; + color: var(--accent); + content: counter(steps, decimal-leading-zero); + counter-increment: steps; + font-size: 0.72rem; + font-weight: 900; +} + +.command-card { + align-self: stretch; + overflow: hidden; + border: 1px solid rgba(124, 255, 85, 0.28); + border-radius: var(--radius-sm); + background: + linear-gradient(180deg, rgba(124, 255, 85, 0.08), rgba(124, 255, 85, 0)), + #050706; +} + +.command-card-top { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 14px 16px; + border-bottom: 1px solid var(--line); +} + +.copy-button { + min-height: 34px; + padding: 0 12px; + border-color: var(--line); + font-size: 0.78rem; + font-weight: 900; +} + +.copy-button:hover { + color: var(--text); + border-color: var(--accent); +} + +pre { + margin: 0; + padding: 18px; + overflow-x: auto; + color: var(--accent); + font-size: 0.94rem; + line-height: 1.7; +} + +.filter-bar { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 22px; +} + +.filter-button { + min-height: 40px; + padding: 0 16px; + border-color: var(--line); + font-weight: 900; +} + +.tweak-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; +} + +.tweak-card { + display: flex; + min-height: 250px; + flex-direction: column; + padding: 22px; + border: 1px solid var(--line); + border-radius: var(--radius); + background: rgba(16, 23, 19, 0.72); + transition: + transform 180ms ease, + border-color 180ms ease, + opacity 180ms ease; +} + +.tweak-card:hover { + transform: translateY(-3px); + border-color: var(--line-strong); +} + +.tweak-card.is-hidden { + display: none; +} + +.tier { + align-self: flex-start; + margin-bottom: 28px; + padding: 6px 10px; + border: 1px solid currentColor; + border-radius: 999px; + letter-spacing: 0.08em; +} + +.tier.safe { + color: var(--accent); +} + +.tier.advanced { + color: var(--amber); +} + +.tier.tradeoff { + color: var(--red); +} + +.tweak-card p { + flex: 1; +} + +.tweak-card code { + display: block; + min-height: 44px; + overflow-wrap: anywhere; + color: #dce8df; + font-size: 0.78rem; +} + +.safety-layout { + display: grid; + grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1fr); + gap: clamp(26px, 6vw, 86px); + align-items: start; +} + +.safety-layout h2 { + max-width: 9.5ch; +} + +.safety-actions { + margin-top: 28px; +} + +.safety-rail { + display: grid; + overflow: hidden; +} + +.rail-item { + display: grid; + grid-template-columns: 96px minmax(0, 1fr); + gap: 8px 20px; + padding: 24px; + border-bottom: 1px solid var(--line); +} + +.rail-item:last-child { + border-bottom: 0; +} + +.rail-item span { + grid-row: span 2; +} + +.rail-item strong { + font-size: 1.04rem; +} + +.rail-item p { + margin-bottom: 0; +} + diff --git a/site/styles/responsive.css b/site/styles/responsive.css new file mode 100644 index 0000000..7b1e41c --- /dev/null +++ b/site/styles/responsive.css @@ -0,0 +1,169 @@ +@media (max-width: 1020px) { + .site-header { + grid-template-columns: 1fr auto; + } + + .nav-links { + display: none; + } + + .hero { + min-height: auto; + padding-bottom: 360px; + } + + .hero-panel { + left: 18px; + right: 18px; + bottom: 26px; + width: auto; + } + + .intro-band, + .tweak-grid, + .proof-grid { + grid-template-columns: 1fr 1fr; + } + + .promise:nth-child(2) { + border-right: 0; + } + + .promise:last-child { + grid-column: 1 / -1; + border-top: 1px solid var(--line); + } + + .path-content, + .safety-layout { + grid-template-columns: 1fr; + } + + .safety-layout h2, + .proof > h2, + .faq h2 { + max-width: 14ch; + } +} + +@media (max-width: 720px) { + .site-header { + min-height: 64px; + gap: 12px; + } + + .brand small { + display: none; + } + + .brand-mark { + width: 38px; + height: 38px; + } + + .header-action { + padding: 9px 12px; + font-size: 0.78rem; + } + + .hero { + padding-top: 62px; + padding-bottom: 44px; + } + + .hero-image { + object-position: 70% center; + } + + .hero-shade { + background: + linear-gradient(90deg, rgba(7, 9, 8, 0.98), rgba(7, 9, 8, 0.72)), + linear-gradient(180deg, rgba(7, 9, 8, 0.12), rgba(7, 9, 8, 0.78)); + } + + .hero-panel { + display: none; + } + + h1 { + max-width: 9ch; + } + + .command-line { + grid-template-columns: 1fr; + } + + .command-line code { + white-space: normal; + } + + .metric-grid div { + min-height: 82px; + padding: 14px; + } + + .metric-grid strong { + font-size: 1.42rem; + } + + .intro-band, + .tweak-grid, + .proof-grid { + grid-template-columns: 1fr; + } + + .promise, + .promise:nth-child(2) { + border-right: 0; + border-bottom: 1px solid var(--line); + } + + .promise:last-child { + border-bottom: 0; + } + + .section-head.split { + grid-template-columns: 1fr; + gap: 14px; + } + + .text-link { + justify-self: start; + } + + .path-tabs { + grid-template-columns: 1fr 1fr; + } + + .path-content { + padding: 20px; + } + + .command-card { + min-width: 0; + } + + .tweak-card { + min-height: 220px; + } + + .rail-item { + grid-template-columns: 1fr; + } + + .rail-item span { + grid-row: auto; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + } +} + diff --git a/site/styles/sections.css b/site/styles/sections.css new file mode 100644 index 0000000..c6e6eec --- /dev/null +++ b/site/styles/sections.css @@ -0,0 +1,123 @@ +.proof { + padding-top: 0; +} + +.proof > h2 { + max-width: 12ch; +} + +.proof-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 1px; + margin-top: 34px; + overflow: hidden; + border: 1px solid var(--line); + border-radius: var(--radius); + background: var(--line); +} + +.proof-grid div { + min-height: 220px; + padding: 24px; + background: var(--panel-solid); +} + +.proof-grid strong { + display: block; + margin-bottom: 16px; + color: var(--text); + font-size: 1.1rem; +} + +.proof-grid p { + margin-bottom: 0; +} + +.faq { + padding-top: 0; +} + +.faq h2 { + max-width: 11ch; +} + +.faq-list { + margin-top: 32px; + overflow: hidden; +} + +details { + border-bottom: 1px solid var(--line); +} + +details:last-child { + border-bottom: 0; +} + +summary { + cursor: pointer; + padding: 22px 24px; + color: var(--text); + font-size: 1.05rem; + font-weight: 900; +} + +summary::marker { + color: var(--accent); +} + +details p { + max-width: 78ch; + margin: 0; + padding: 0 24px 24px; +} + +.site-footer { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 34px clamp(18px, 5vw, 72px); + border-top: 1px solid var(--line); + color: var(--muted); + background: #050605; +} + +.site-footer p { + margin: 0; +} + +.site-footer div { + display: flex; + flex-wrap: wrap; + gap: 18px; + font-size: 0.9rem; +} + +.toast { + position: fixed; + right: 18px; + bottom: 18px; + z-index: 30; + max-width: min(360px, calc(100vw - 36px)); + padding: 12px 16px; + border: 1px solid rgba(124, 255, 85, 0.4); + border-radius: var(--radius-sm); + color: var(--text); + background: rgba(8, 12, 10, 0.94); + box-shadow: 0 18px 60px var(--shadow); + opacity: 0; + pointer-events: none; + transform: translateY(10px); + transition: + opacity 180ms ease, + transform 180ms ease; +} + +.toast.is-visible { + opacity: 1; + transform: translateY(0); +} +