| author |  Theo Browne <me@t3.gg> 2026-09-05 21:47:54-07:00 |
| committer |  GitHub <noreply@github.com> 2026-09-05 21:47:54-07:00 |
| log | b2e15185aee22bfdee78806f2734b0a4de9c2c77 |
| tree | 0414bd9c03cab9393a23501079dcbeb6147fe0a7 |
| parent | 84aebb72f306f17bed680e1241dab9ab8e8df741 |
| signature | Signed by PGP key B5690EEEBB952194 |
feat(marketing): add a Windows 95 landing page (#10286)
36 files changed, 1678 insertions(+), 0 deletions(-)
apps
marketing
public
95
providers
t3-code-concepts
- t3-code-chrome.webp
- t3-code-desktop.webp
- t3-code-lime-320.webp
- t3-code-lime-640.webp
- t3-code-lime.webp
- t3-code-nightly-clouds-320.webp
- t3-code-nightly-clouds-640.webp
- t3-code-nightly-clouds.webp
- t3-code-nightly-foil-320.webp
- t3-code-nightly-foil-640.webp
- t3-code-nightly-foil.webp
- t3-code-nightly-lavender-320.webp
- t3-code-nightly-lavender-640.webp
- t3-code-nightly-lavender.webp
src
components
pages
styles
apps/marketing/public/95/providers/antigravity-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-320.webp differ | |||
apps/marketing/public/95/providers/antigravity-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-640.webp differ | |||
apps/marketing/public/95/providers/antigravity-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/antigravity-960.webp differ | |||
apps/marketing/public/95/providers/claude-code-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-320.webp differ | |||
apps/marketing/public/95/providers/claude-code-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-640.webp differ | |||
apps/marketing/public/95/providers/claude-code-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/claude-code-960.webp differ | |||
apps/marketing/public/95/providers/codex-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/codex-320.webp differ | |||
apps/marketing/public/95/providers/codex-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/codex-640.webp differ | |||
apps/marketing/public/95/providers/codex-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/codex-960.webp differ | |||
apps/marketing/public/95/providers/cursor-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-320.webp differ | |||
apps/marketing/public/95/providers/cursor-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-640.webp differ | |||
apps/marketing/public/95/providers/cursor-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/cursor-960.webp differ | |||
apps/marketing/public/95/providers/grok-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/grok-320.webp differ | |||
apps/marketing/public/95/providers/grok-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/grok-640.webp differ | |||
apps/marketing/public/95/providers/grok-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/grok-960.webp differ | |||
apps/marketing/public/95/providers/opencode-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-320.webp differ | |||
apps/marketing/public/95/providers/opencode-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-640.webp differ | |||
apps/marketing/public/95/providers/opencode-960.webp created
| Binary files /dev/null and b/apps/marketing/public/95/providers/opencode-960.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-chrome.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-chrome.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-desktop.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-desktop.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-lime-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime-320.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-lime-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime-640.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-lime.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-lime.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-320.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds-640.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-clouds.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-320.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil-640.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-foil.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-320.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-320.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-640.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender-640.webp differ | |||
apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender.webp created
| Binary files /dev/null and b/apps/marketing/public/95/t3-code-concepts/t3-code-nightly-lavender.webp differ | |||
apps/marketing/src/components/RetroBox.astro created+23
| ... | @@ -0,0 +1,23 @@ | ||
| 1 | --- | ||
| 2 | interface Props { | ||
| 3 | image: string; | ||
| 4 | alt: string; | ||
| 5 | sizes: string; | ||
| 6 | eager?: boolean; | ||
| 7 | } | ||
| 8 | |||
| 9 | const { image, alt, sizes, eager = false } = Astro.props; | ||
| 10 | const base = `/95/t3-code-concepts/${image}`; | ||
| 11 | --- | ||
| 12 | |||
| 13 | <img | ||
| 14 | src={`${base}-640.webp`} | ||
| 15 | srcset={`${base}-320.webp 320w, ${base}-640.webp 640w, ${base}.webp 960w`} | ||
| 16 | {sizes} | ||
| 17 | {alt} | ||
| 18 | width="960" | ||
| 19 | height="1200" | ||
| 20 | loading={eager ? "eager" : "lazy"} | ||
| 21 | fetchpriority={eager ? "high" : "auto"} | ||
| 22 | decoding="async" | ||
| 23 | /> | ||
apps/marketing/src/components/RetroIcon.astro created+57
| ... | @@ -0,0 +1,57 @@ | ||
| 1 | --- | ||
| 2 | interface Props { | ||
| 3 | name: "computer" | "disk" | "globe" | "bin" | "folder" | "cursor"; | ||
| 4 | size?: number; | ||
| 5 | } | ||
| 6 | |||
| 7 | const { name, size = 32 } = Astro.props; | ||
| 8 | --- | ||
| 9 | |||
| 10 | <svg width={size} height={size} viewBox="0 0 32 32" fill="none" shape-rendering="crispEdges" aria-hidden="true"> | ||
| 11 | {name === "computer" && <> | ||
| 12 | <path fill="#000" d="M3 2h25v22H3zM10 24h11v3h7v4H3v-4h7z" /> | ||
| 13 | <path fill="#c0c0c0" d="M3 2h23v20H3zM12 22h7v5h7v2H4v-2h8z" /> | ||
| 14 | <path fill="#fff" d="M3 2h23v2H5v18H3zM4 27h22v1H4z" /> | ||
| 15 | <path fill="#808080" d="M6 5h17v14H6zM5 20h20v2H5z" /> | ||
| 16 | <path fill="#000080" d="M8 7h15v10H8z" /> | ||
| 17 | <path fill="#51e5cf" d="M9 8h13v2H9zM9 11h5v4H9z" /> | ||
| 18 | <path fill="#fff" d="M16 11h5v1h-5zM16 14h4v1h-4z" /> | ||
| 19 | <path fill="#baff00" d="M21 20h2v1h-2z" /> | ||
| 20 | </>} | ||
| 21 | {name === "disk" && <> | ||
| 22 | <path fill="#000" d="M3 2h23l4 4v24H3z" /> | ||
| 23 | <path fill="#4747b8" d="M3 2h22l3 3v23H3z" /> | ||
| 24 | <path fill="#9c9cff" d="M3 2h2v26H3zM5 2h20v2H5z" /> | ||
| 25 | <path fill="#c0c0c0" d="M8 3h14v9H8z" /> | ||
| 26 | <path fill="#fff" d="M8 3h2v9H8z" /> | ||
| 27 | <path fill="#000" d="M17 4h4v6h-4z" /> | ||
| 28 | <path fill="#fff" d="M7 16h17v12H7z" /> | ||
| 29 | <path fill="#ff65b3" d="M7 16h17v3H7z" /> | ||
| 30 | <path fill="#808080" d="M10 21h11v1H10zM10 24h8v1h-8z" /> | ||
| 31 | </>} | ||
| 32 | {name === "globe" && <> | ||
| 33 | <path fill="#000" d="M11 1h10v2h5v5h3v16h-4v5h-5v2H10v-3H5v-5H2V10h3V5h6z" /> | ||
| 34 | <path fill="#5353dd" d="M11 2h9v2h5v5h3v13h-4v5h-5v3h-8v-3H6v-5H3V11h3V6h5z" /> | ||
| 35 | <path fill="#80ffff" d="M11 3h8v2h-7v3H8v5H5v-3h2V6h4z" /> | ||
| 36 | <path fill="#00ba80" d="M14 5h7v4h4v5h-6v-3h-5zM7 13h7v3h6v4h-4v6h-5v-5H7zM23 21h3v3h-3z" /> | ||
| 37 | <path fill="#baff00" d="M14 5h6v2h-6zM7 13h6v2H7z" /> | ||
| 38 | </>} | ||
| 39 | {name === "bin" && <> | ||
| 40 | <path fill="#000" d="M6 8h21v3h-2v18H8V11H6zM10 3h12v3h5v3H5V6h5z" /> | ||
| 41 | <path fill="#c0c0c0" d="M7 10h17v18H9V13H7zM7 6h17v3H7zM12 3h7v3h-7z" /> | ||
| 42 | <path fill="#fff" d="M9 11h2v15H9zM7 6h17v1H7zM13 12h2v13h-2zM18 12h2v13h-2z" /> | ||
| 43 | <path fill="#808080" d="M15 12h2v13h-2zM20 12h2v13h-2zM11 27h13v2H11z" /> | ||
| 44 | <path fill="#2f986b" d="M13 15h7v2h-4v2h-3zM12 20h3v2h5v2h-8zM20 18h2v4h-2z" /> | ||
| 45 | </>} | ||
| 46 | {name === "folder" && <> | ||
| 47 | <path fill="#000" d="M2 6h12v3h15v20H2z" /> | ||
| 48 | <path fill="#e3ba3f" d="M2 6h11v3h14v18H2z" /> | ||
| 49 | <path fill="#fff4a0" d="M2 6h11v2H4v18H2z" /> | ||
| 50 | <path fill="#fff4a0" d="M5 13h25v3h-2v6h-2v5H3v-8h2z" /> | ||
| 51 | <path fill="#e3ba3f" d="M6 15h23v1h-2v6h-2v4H5v-7h1z" /> | ||
| 52 | </>} | ||
| 53 | {name === "cursor" && <> | ||
| 54 | <path fill="#000" d="M5 1h3v3h3v3h3v3h3v3h3v3h3v3h3v4H16l5 8h-7l-5-9-4 4z" /> | ||
| 55 | <path fill="#fff" d="M7 5v16l4-4 6 12h2l-6-12h10z" /> | ||
| 56 | </>} | ||
| 57 | </svg> | ||
apps/marketing/src/pages/95.astro created+354
| ... | @@ -0,0 +1,354 @@ | ||
| 1 | --- | ||
| 2 | import RetroIcon from "../components/RetroIcon.astro"; | ||
| 3 | import RetroBox from "../components/RetroBox.astro"; | ||
| 4 | import { GITHUB_REPOSITORY_URL, MARKETING_STATS } from "../lib/site"; | ||
| 5 | import "../styles/retro.css"; | ||
| 6 | |||
| 7 | const agents = [ | ||
| 8 | { | ||
| 9 | name: "Claude Code", | ||
| 10 | slug: "claude-code", | ||
| 11 | caption: "Now with manners.", | ||
| 12 | artwork: "Cream and orange software box with a bow-tied desktop computer and a gold PLEASE sticker.", | ||
| 13 | }, | ||
| 14 | { | ||
| 15 | name: "Codex", | ||
| 16 | slug: "codex", | ||
| 17 | caption: "Some assembly automated.", | ||
| 18 | artwork: "Silver and green software box with a robot hand stacking glowing code blocks.", | ||
| 19 | }, | ||
| 20 | { | ||
| 21 | name: "Cursor", | ||
| 22 | slug: "cursor", | ||
| 23 | caption: "Point. Click. Question everything.", | ||
| 24 | artwork: "Black and chrome software box with an enormous silver arrow and lightning bolts.", | ||
| 25 | }, | ||
| 26 | { | ||
| 27 | name: "Grok", | ||
| 28 | slug: "grok", | ||
| 29 | caption: "Adult supervision sold separately.", | ||
| 30 | artwork: "Black and red software box with a spacecraft and an UH OH sticker.", | ||
| 31 | }, | ||
| 32 | { | ||
| 33 | name: "OpenCode", | ||
| 34 | slug: "opencode", | ||
| 35 | caption: "Please copy this floppy.", | ||
| 36 | artwork: "Purple shareware box with floppy disks spilling from an open carton.", | ||
| 37 | }, | ||
| 38 | { | ||
| 39 | name: "Antigravity", | ||
| 40 | slug: "antigravity", | ||
| 41 | caption: "System requirement: no gravity.", | ||
| 42 | artwork: "Blue and violet software box with a floating chrome triangle and metallic spheres.", | ||
| 43 | }, | ||
| 44 | ]; | ||
| 45 | const userDigits = MARKETING_STATS.users.replaceAll(",", "").padStart(7, "0").split(""); | ||
| 46 | --- | ||
| 47 | |||
| 48 | <!doctype html> | ||
| 49 | <html lang="en"> | ||
| 50 | <head> | ||
| 51 | <meta charset="UTF-8" /> | ||
| 52 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| 53 | <meta name="description" content="Introducing T3 Code. All your coding agents in one happy little window. Free, open source, and available without six CD-ROMs." /> | ||
| 54 | <meta name="theme-color" content="#000000" /> | ||
| 55 | <link rel="icon" href="/favicon.ico" sizes="48x48" /> | ||
| 56 | <title>T3 Code '95 | The future is now. Like, right now.</title> | ||
| 57 | </head> | ||
| 58 | <body> | ||
| 59 | <a class="skip-link retro-button" href="#main-content">Skip to the sales pitch</a> | ||
| 60 | |||
| 61 | <nav class="desktop-icons" aria-label="Desktop shortcuts"> | ||
| 62 | <a href="/" class="desktop-icon"><RetroIcon name="computer" /><span>My Computer</span></a> | ||
| 63 | <a href="/download" class="desktop-icon"><RetroIcon name="disk" /><span>Install T3 Code</span></a> | ||
| 64 | <a href={GITHUB_REPOSITORY_URL} class="desktop-icon"><RetroIcon name="globe" /><span>Network<br />Neighborhood</span></a> | ||
| 65 | <button type="button" class="desktop-icon" data-dialog="recycle"><RetroIcon name="bin" /><span>Bad Ideas</span></button> | ||
| 66 | </nav> | ||
| 67 | |||
| 68 | <div class="desktop"> | ||
| 69 | <div class="browser-window raised" id="sales-window"> | ||
| 70 | <header class="window-title" id="window-title" tabindex="0" aria-label="Move browser window. Drag or use arrow keys. Double-click to maximize."> | ||
| 71 | <span class="window-name"><RetroIcon name="globe" size={18} /><span>T3 Code '95 - Internet Explorer</span></span> | ||
| 72 | <div class="window-controls"> | ||
| 73 | <button class="retro-button window-control" type="button" id="minimize" aria-label="Minimize window"><span aria-hidden="true">_</span></button> | ||
| 74 | <button class="retro-button window-control" type="button" id="maximize" aria-label="Maximize window" aria-pressed="false"><span class="maximize-icon" aria-hidden="true"></span></button> | ||
| 75 | <button class="retro-button window-control" type="button" data-dialog="close" aria-label="Close window"><span aria-hidden="true">×</span></button> | ||
| 76 | </div> | ||
| 77 | </header> | ||
| 78 | |||
| 79 | <nav class="browser-menu" aria-label="Page navigation"> | ||
| 80 | <a href="#nightly"><u>N</u>ightly</a> | ||
| 81 | <a href="#features"><u>F</u>eatures</a> | ||
| 82 | <a href="#agents"><u>A</u>gents</a> | ||
| 83 | <a href="#order"><u>O</u>rder now</a> | ||
| 84 | <a href={GITHUB_REPOSITORY_URL}><u>S</u>ource</a> | ||
| 85 | <button type="button" data-dialog="help"><u>H</u>elp</button> | ||
| 86 | </nav> | ||
| 87 | |||
| 88 | <div class="address-bar"> | ||
| 89 | <span>Address</span> | ||
| 90 | <div class="address-field sunken"><RetroIcon name="globe" size={16} /><span>https://t3.codes/95</span></div> | ||
| 91 | <a class="retro-button address-go" href="/">Go <span aria-hidden="true">↗</span></a> | ||
| 92 | </div> | ||
| 93 | |||
| 94 | <main id="main-content" tabindex="0"> | ||
| 95 | <section class="hero" aria-labelledby="hero-title"> | ||
| 96 | <div class="hero-copy"> | ||
| 97 | <h1 id="hero-title">All your agents.<br />One happy<br /><span>little window.</span></h1> | ||
| 98 | <p class="hero-explanation">Your coding agents in one free, open-source app.<br />You bring the subscriptions. We bring the buttons.</p> | ||
| 99 | <div class="platform-line"><span>AVAILABLE FOR</span><strong>Windows</strong><b>·</b><strong>macOS</strong><b>·</b><strong>Linux</strong></div> | ||
| 100 | </div> | ||
| 101 | |||
| 102 | <div class="edition-packages" aria-label="Choose Stable or Nightly"> | ||
| 103 | <a class="hero-package" href="/download" aria-label="Download T3 Code stable"> | ||
| 104 | <RetroBox image="t3-code-lime" alt="T3 Code in a lime and teal software box." sizes="(max-width: 620px) 38vw, 170px" eager /> | ||
| 105 | <span class="retro-button edition-download">Get Stable <span aria-hidden="true">↗</span></span> | ||
| 106 | </a> | ||
| 107 | <a class="hero-package nightly-package" id="nightly" href={`${GITHUB_REPOSITORY_URL}/releases?q=nightly&expanded=true`} aria-label="Download T3 Code Nightly preview builds"> | ||
| 108 | <RetroBox image="t3-code-nightly-clouds" alt="T3 Code Nightly in a navy box with violet clouds." sizes="(max-width: 620px) 38vw, 170px" eager /> | ||
| 109 | <span class="retro-button edition-download">Get Nightly <span aria-hidden="true">↗</span></span> | ||
| 110 | </a> | ||
| 111 | </div> | ||
| 112 | </section> | ||
| 113 | |||
| 114 | <section class="agents-section" id="agents" aria-labelledby="agents-title"> | ||
| 115 | <div class="section-heading"><h2 id="agents-title">Bring your favorite agents.</h2></div> | ||
| 116 | <div class="agent-list"> | ||
| 117 | {agents.map((agent, index) => ( | ||
| 118 | <figure class="agent"> | ||
| 119 | <img | ||
| 120 | class="agent-box" | ||
| 121 | src={`/95/providers/${agent.slug}-640.webp`} | ||
| 122 | srcset={[320, 640, 960].map((width) => `/95/providers/${agent.slug}-${width}.webp ${width}w`).join(", ")} | ||
| 123 | sizes="auto, (max-width: 620px) 43vw, (max-width: 1100px) 27vw, 280px" | ||
| 124 | alt={agent.artwork} | ||
| 125 | width="640" | ||
| 126 | height="800" | ||
| 127 | loading={index < 3 ? "eager" : "lazy"} | ||
| 128 | decoding="async" | ||
| 129 | /> | ||
| 130 | <figcaption> | ||
| 131 | <h3>{agent.name}</h3> | ||
| 132 | <p>{agent.caption}</p> | ||
| 133 | </figcaption> | ||
| 134 | </figure> | ||
| 135 | ))} | ||
| 136 | </div> | ||
| 137 | <p class="agents-note">Use the providers and subscriptions you already have. Provider charges still apply.</p> | ||
| 138 | <p class="agents-note">Parody packaging. No actual boxes for sale.</p> | ||
| 139 | </section> | ||
| 140 | |||
| 141 | <section class="features-section" id="features" aria-labelledby="features-title"> | ||
| 142 | <div class="section-heading"><h2 id="features-title">Inside every copy.</h2></div> | ||
| 143 | <div class="feature-grid"> | ||
| 144 | <article class="feature-window raised"> | ||
| 145 | <div class="feature-titlebar"><span>01_multitasking.exe</span><span aria-hidden="true">■</span></div> | ||
| 146 | <div class="feature-body"><RetroIcon name="computer" size={38} /><h3>More agents.<br />Less window aerobics.</h3><p>Run agents side by side. Keep your threads, terminals, and diffs together. Reclaim your Alt-Tab finger.</p></div> | ||
| 147 | </article> | ||
| 148 | <article class="feature-window raised"> | ||
| 149 | <div class="feature-titlebar"><span>02_remote_access.exe</span><span aria-hidden="true">■</span></div> | ||
| 150 | <div class="feature-body"><RetroIcon name="globe" size={38} /><h3>Your computer.<br />Now over there.</h3><p>Connect from the web, desktop, or mobile. Your agents keep working on your machine. You may approach the couch.</p></div> | ||
| 151 | </article> | ||
| 152 | <article class="feature-window raised"> | ||
| 153 | <div class="feature-titlebar"><span>03_source_code.txt</span><span aria-hidden="true">■</span></div> | ||
| 154 | <div class="feature-body"><RetroIcon name="folder" size={38} /><h3>We left the<br />source code in.</h3><p>Read it. Change it. Fork the whole thing. It's MIT licensed, because your tools should actually be yours.</p><a class="feature-tag" href={GITHUB_REPOSITORY_URL}>View source <span aria-hidden="true">↗</span></a></div> | ||
| 155 | </article> | ||
| 156 | <article class="feature-window raised"> | ||
| 157 | <div class="feature-titlebar"><span>04_terminal.exe</span><span aria-hidden="true">■</span></div> | ||
| 158 | <div class="feature-body"><RetroIcon name="computer" size={38} /><h3>A terminal.<br />Right where you work.</h3><p>Run commands alongside your agents. Keep the output with the project.</p></div> | ||
| 159 | </article> | ||
| 160 | <article class="feature-window raised"> | ||
| 161 | <div class="feature-titlebar"><span>05_changes.diff</span><span aria-hidden="true">■</span></div> | ||
| 162 | <div class="feature-body"><RetroIcon name="folder" size={38} /><h3>See what<br />actually changed.</h3><p>Inspect file diffs and review the work before you ship it.</p></div> | ||
| 163 | </article> | ||
| 164 | <article class="feature-window raised"> | ||
| 165 | <div class="feature-titlebar"><span>06_checkpoint.bak</span><span aria-hidden="true">■</span></div> | ||
| 166 | <div class="feature-body"><RetroIcon name="disk" size={38} /><h3>A way<br />back.</h3><p>Use turn checkpoints to inspect changes and restore earlier work.</p></div> | ||
| 167 | </article> | ||
| 168 | </div> | ||
| 169 | </section> | ||
| 170 | |||
| 171 | <section class="order-section" id="order" aria-labelledby="order-title"> | ||
| 172 | <div class="order-pitch"><h2 id="order-title">For just <span>0 easy payments</span><br />of absolutely nothing.</h2><p>Get the app. Keep your subscriptions.</p><a class="retro-button primary-cta" href="/download"><RetroIcon name="disk" size={25} /><span>GET T3 CODE. IT'S FREE.</span><span aria-hidden="true">→</span></a><p class="offer-note">T3 Code is free. Your AI provider may charge for use.</p></div> | ||
| 173 | <div class="run-window raised"><div class="window-title"><span>Run</span><RetroIcon name="computer" size={18} /></div><div class="run-body"><p>Too cool for an installer?</p><label for="run-command">Type this in your terminal.</label><div class="command-row"><input id="run-command" class="sunken" value="npx t3" readonly spellcheck="false" aria-label="Terminal command" /><button type="button" class="retro-button" id="copy-command">Copy</button></div><p class="command-feedback" id="command-feedback" role="status">Node.js required. Modem optional.</p><div class="run-divider"></div><b>System requirements</b><ul><li>A modern computer</li><li>A supported coding agent</li><li>A dream, ideally a small one</li></ul><p class="requirements-note">Does not actually run on Windows 95.</p></div></div> | ||
| 174 | </section> | ||
| 175 | |||
| 176 | <section class="faq-section" aria-labelledby="faq-title"> | ||
| 177 | <h2 id="faq-title">Questions</h2> | ||
| 178 | <details><summary>Wait. Is this a real product?</summary><p>Yes. T3 Code is a real, free, open-source app used by {MARKETING_STATS.users} developers. The packaging is a joke. The app is not. <a href="/">Visit the regular website.</a></p></details> | ||
| 179 | <details><summary>Does this replace my Claude or Codex subscription?</summary><p>No. T3 Code connects to the coding agents you already use. Keep your provider accounts and subscriptions. T3 Code gives you one app to work with them.</p></details> | ||
| 180 | <details><summary>Will it run on Windows 95?</summary><p>Absolutely not. We brought back the look, not the driver problems. <a href="/download">Get a build for a current version of Windows, macOS, or Linux.</a></p></details> | ||
| 181 | <details><summary>Where do I mail my check?</summary><p>Please do not mail us a check for zero dollars. Just download the app. The entire accounts department is a download button.</p></details> | ||
| 182 | </section> | ||
| 183 | |||
| 184 | <footer class="site-footer"> | ||
| 185 | <div class="visitor-counter"><div class="counter-digits" aria-label={`${MARKETING_STATS.users} users`}>{userDigits.map((digit) => <span aria-hidden="true">{digit}</span>)}</div><span>developers use T3 Code.</span></div> | ||
| 186 | <p>© {new Date().getFullYear()} T3 Tools Inc.</p> | ||
| 187 | <nav aria-label="Footer"><a href="/">Back to the present</a><a href={GITHUB_REPOSITORY_URL}>GitHub</a><a href="/privacy-policy">Privacy</a><a href="/terms-of-service">Terms</a></nav> | ||
| 188 | </footer> | ||
| 189 | </main> | ||
| 190 | |||
| 191 | <div class="browser-status"><span class="sunken">Done.</span><span class="sunken"><RetroIcon name="globe" size={14} /> Internet</span><span class="resize-grip" aria-hidden="true"></span></div> | ||
| 192 | </div> | ||
| 193 | |||
| 194 | <div class="minimized-message" id="minimized-message" hidden><RetroIcon name="computer" size={64} /><h1>The future is minimized.</h1><p>Your productivity is one click away.</p><button type="button" class="retro-button" data-restore>Restore T3 Code '95</button></div> | ||
| 195 | </div> | ||
| 196 | |||
| 197 | <div class="taskbar raised"> | ||
| 198 | <details class="start-menu" id="start-menu"><summary class="retro-button start-button"><span class="start-mark" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Start</summary><nav class="start-panel raised" aria-label="Start menu"><div class="start-brand">T3 CODE <b>95</b></div><div><a href="/download"><RetroIcon name="disk" size={24} />Install T3 Code</a><button type="button" data-restore><RetroIcon name="computer" size={24} />Restore the future</button><a href={GITHUB_REPOSITORY_URL}><RetroIcon name="folder" size={24} />Explore source code</a><a href="/"><RetroIcon name="globe" size={24} />Return to the present</a></div></nav></details> | ||
| 199 | <span class="taskbar-divider" aria-hidden="true"></span> | ||
| 200 | <button class="task-button sunken" type="button" data-restore><RetroIcon name="globe" size={20} /><span>T3 Code '95</span></button> | ||
| 201 | <div class="taskbar-clock sunken"><span aria-hidden="true">◷</span><span>4:04 PM</span></div> | ||
| 202 | </div> | ||
| 203 | |||
| 204 | <dialog class="retro-dialog raised" id="sales-dialog" aria-labelledby="dialog-title" aria-describedby="dialog-message"><div class="window-title"><span id="dialog-title">T3 Code '95</span><button type="button" class="retro-button window-control" data-dismiss aria-label="Close dialog">×</button></div><div class="dialog-content"><RetroIcon name="computer" size={42} /><p id="dialog-message"></p></div><div class="dialog-actions"><button class="retro-button" type="button" data-dismiss autofocus>OK, fine.</button><a class="retro-button" href="/download">Get T3 Code</a></div></dialog> | ||
| 205 | |||
| 206 | <script> | ||
| 207 | const salesWindow = document.querySelector<HTMLElement>("#sales-window"); | ||
| 208 | const minimizedMessage = document.querySelector<HTMLElement>("#minimized-message"); | ||
| 209 | const minimizeButton = document.querySelector<HTMLButtonElement>("#minimize"); | ||
| 210 | const maximizeButton = document.querySelector<HTMLButtonElement>("#maximize"); | ||
| 211 | const startMenu = document.querySelector<HTMLDetailsElement>("#start-menu"); | ||
| 212 | const taskButton = document.querySelector<HTMLButtonElement>(".task-button"); | ||
| 213 | const titleBar = document.querySelector<HTMLElement>("#window-title"); | ||
| 214 | const taskbar = document.querySelector<HTMLElement>(".taskbar"); | ||
| 215 | let windowX = 0; | ||
| 216 | let windowY = 0; | ||
| 217 | |||
| 218 | // Keep the entire window above the taskbar, including after a viewport resize. | ||
| 219 | function moveWindow(x: number, y: number) { | ||
| 220 | if (!salesWindow || document.body.classList.contains("maximized")) return; | ||
| 221 | const rect = salesWindow.getBoundingClientRect(); | ||
| 222 | const originX = rect.left - windowX; | ||
| 223 | const originY = rect.top - windowY; | ||
| 224 | const bottom = taskbar?.getBoundingClientRect().top ?? window.innerHeight; | ||
| 225 | windowX = Math.max(-originX, Math.min(x, window.innerWidth - rect.width - originX)); | ||
| 226 | windowY = Math.max(-originY, Math.min(y, bottom - rect.height - originY)); | ||
| 227 | salesWindow.style.setProperty("--window-x", `${windowX}px`); | ||
| 228 | salesWindow.style.setProperty("--window-y", `${windowY}px`); | ||
| 229 | } | ||
| 230 | |||
| 231 | function toggleMaximize() { | ||
| 232 | if (!maximizeButton) return; | ||
| 233 | const maximized = document.body.classList.toggle("maximized"); | ||
| 234 | maximizeButton.setAttribute("aria-pressed", String(maximized)); | ||
| 235 | maximizeButton.setAttribute("aria-label", maximized ? "Restore window size" : "Maximize window"); | ||
| 236 | if (!maximized) moveWindow(windowX, windowY); | ||
| 237 | } | ||
| 238 | |||
| 239 | if (titleBar && salesWindow) { | ||
| 240 | let drag: { pointerId: number; startX: number; startY: number; x: number; y: number } | undefined; | ||
| 241 | |||
| 242 | titleBar.addEventListener("pointerdown", (event) => { | ||
| 243 | if (!event.isPrimary || event.button !== 0 || document.body.classList.contains("maximized")) return; | ||
| 244 | if (event.target instanceof Element && event.target.closest("button")) return; | ||
| 245 | drag = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, x: windowX, y: windowY }; | ||
| 246 | titleBar.focus({ preventScroll: true }); | ||
| 247 | titleBar.setPointerCapture(event.pointerId); | ||
| 248 | titleBar.classList.add("dragging"); | ||
| 249 | }); | ||
| 250 | titleBar.addEventListener("pointermove", (event) => { | ||
| 251 | if (!drag || event.pointerId !== drag.pointerId) return; | ||
| 252 | moveWindow(drag.x + event.clientX - drag.startX, drag.y + event.clientY - drag.startY); | ||
| 253 | }); | ||
| 254 | const stopDrag = () => { | ||
| 255 | drag = undefined; | ||
| 256 | titleBar.classList.remove("dragging"); | ||
| 257 | }; | ||
| 258 | titleBar.addEventListener("pointerup", stopDrag); | ||
| 259 | titleBar.addEventListener("pointercancel", stopDrag); | ||
| 260 | titleBar.addEventListener("lostpointercapture", stopDrag); | ||
| 261 | titleBar.addEventListener("dblclick", (event) => { | ||
| 262 | if (event.target instanceof Element && event.target.closest("button")) return; | ||
| 263 | toggleMaximize(); | ||
| 264 | }); | ||
| 265 | titleBar.addEventListener("keydown", (event) => { | ||
| 266 | if (event.target !== titleBar || event.altKey || event.ctrlKey || event.metaKey) return; | ||
| 267 | const step = event.shiftKey ? 1 : 10; | ||
| 268 | switch (event.key) { | ||
| 269 | case "ArrowLeft": moveWindow(windowX - step, windowY); break; | ||
| 270 | case "ArrowRight": moveWindow(windowX + step, windowY); break; | ||
| 271 | case "ArrowUp": moveWindow(windowX, windowY - step); break; | ||
| 272 | case "ArrowDown": moveWindow(windowX, windowY + step); break; | ||
| 273 | default: return; | ||
| 274 | } | ||
| 275 | event.preventDefault(); | ||
| 276 | }); | ||
| 277 | } | ||
| 278 | |||
| 279 | window.addEventListener("resize", () => { | ||
| 280 | if (!salesWindow?.hidden) moveWindow(windowX, windowY); | ||
| 281 | }); | ||
| 282 | |||
| 283 | minimizeButton?.addEventListener("click", () => { | ||
| 284 | if (!salesWindow || !minimizedMessage) return; | ||
| 285 | salesWindow.hidden = true; | ||
| 286 | minimizedMessage.hidden = false; | ||
| 287 | taskButton?.focus(); | ||
| 288 | }); | ||
| 289 | |||
| 290 | document.querySelectorAll<HTMLButtonElement>("[data-restore]").forEach((button) => { | ||
| 291 | button.addEventListener("click", () => { | ||
| 292 | if (!salesWindow || !minimizedMessage) return; | ||
| 293 | salesWindow.hidden = false; | ||
| 294 | minimizedMessage.hidden = true; | ||
| 295 | if (startMenu) startMenu.open = false; | ||
| 296 | moveWindow(windowX, windowY); | ||
| 297 | minimizeButton?.focus({ preventScroll: true }); | ||
| 298 | }); | ||
| 299 | }); | ||
| 300 | |||
| 301 | maximizeButton?.addEventListener("click", toggleMaximize); | ||
| 302 | |||
| 303 | const messages = { | ||
| 304 | recycle: { title: "Recycle Bin", message: "Contents: 47 abandoned side projects, 12 startup ideas, and one very ambitious TODO comment. T3 Code cannot fix your commitment issues. But it can help you ship." }, | ||
| 305 | close: { title: "Close the future?", message: "You are about to return to a world with too many terminal windows. Are you sure? Our sales department would prefer that you download T3 Code." }, | ||
| 306 | help: { title: "Windows Help", message: "It looks like you're trying to ship software. Have you tried putting all your coding agents in one app? Click Get T3 Code. No paperclip will follow you home." }, | ||
| 307 | }; | ||
| 308 | const dialog = document.querySelector<HTMLDialogElement>("#sales-dialog"); | ||
| 309 | const dialogTitle = document.querySelector<HTMLElement>("#dialog-title"); | ||
| 310 | const dialogMessage = document.querySelector<HTMLElement>("#dialog-message"); | ||
| 311 | |||
| 312 | document.querySelectorAll<HTMLButtonElement>("[data-dialog]").forEach((button) => { | ||
| 313 | button.addEventListener("click", () => { | ||
| 314 | const kind = button.dataset.dialog; | ||
| 315 | if (!dialog || !dialogTitle || !dialogMessage) return; | ||
| 316 | if (kind !== "recycle" && kind !== "close" && kind !== "help") return; | ||
| 317 | dialogTitle.textContent = messages[kind].title; | ||
| 318 | dialogMessage.textContent = messages[kind].message; | ||
| 319 | dialog.showModal(); | ||
| 320 | }); | ||
| 321 | }); | ||
| 322 | document.querySelectorAll<HTMLButtonElement>("[data-dismiss]").forEach((button) => { | ||
| 323 | button.addEventListener("click", () => dialog?.close()); | ||
| 324 | }); | ||
| 325 | |||
| 326 | document.addEventListener("keydown", (event) => { | ||
| 327 | if (event.key === "Escape" && startMenu?.open) { | ||
| 328 | startMenu.open = false; | ||
| 329 | startMenu.querySelector("summary")?.focus(); | ||
| 330 | } | ||
| 331 | }); | ||
| 332 | document.addEventListener("click", (event) => { | ||
| 333 | if (startMenu?.open && event.target instanceof Node && !startMenu.contains(event.target)) { | ||
| 334 | startMenu.open = false; | ||
| 335 | } | ||
| 336 | }); | ||
| 337 | |||
| 338 | const copyButton = document.querySelector<HTMLButtonElement>("#copy-command"); | ||
| 339 | const command = document.querySelector<HTMLInputElement>("#run-command"); | ||
| 340 | const feedback = document.querySelector<HTMLElement>("#command-feedback"); | ||
| 341 | copyButton?.addEventListener("click", async () => { | ||
| 342 | if (!command || !feedback) return; | ||
| 343 | try { | ||
| 344 | await navigator.clipboard.writeText(command.value); | ||
| 345 | feedback.textContent = "Copied! Paste it in your terminal. Welcome to the future."; | ||
| 346 | } catch { | ||
| 347 | command.focus(); | ||
| 348 | command.select(); | ||
| 349 | feedback.textContent = "Select and copy the command, then paste it in your terminal."; | ||
| 350 | } | ||
| 351 | }); | ||
| 352 | </script> | ||
| 353 | </body> | ||
| 354 | </html> | ||
apps/marketing/src/styles/retro.css created+1244
| ... | @@ -0,0 +1,1244 @@ | ||
| 1 | /* This page has its own document so the retro styles do not affect other pages. */ | ||
| 2 | :root { | ||
| 3 | color-scheme: dark; | ||
| 4 | font-family: Tahoma, Verdana, Arial, sans-serif; | ||
| 5 | color: #fff; | ||
| 6 | background: #000; | ||
| 7 | --silver: #c0c0c0; | ||
| 8 | --yellow: #eaff00; | ||
| 9 | --pink: #ff79bd; | ||
| 10 | --navy: #000080; | ||
| 11 | } | ||
| 12 | |||
| 13 | * { | ||
| 14 | box-sizing: border-box; | ||
| 15 | } | ||
| 16 | body { | ||
| 17 | margin: 0; | ||
| 18 | min-width: 320px; | ||
| 19 | height: 100dvh; | ||
| 20 | overflow: hidden; | ||
| 21 | } | ||
| 22 | button, | ||
| 23 | input { | ||
| 24 | font: inherit; | ||
| 25 | } | ||
| 26 | button, | ||
| 27 | a, | ||
| 28 | summary { | ||
| 29 | -webkit-tap-highlight-color: transparent; | ||
| 30 | } | ||
| 31 | button, | ||
| 32 | summary { | ||
| 33 | cursor: pointer; | ||
| 34 | } | ||
| 35 | button { | ||
| 36 | color: inherit; | ||
| 37 | } | ||
| 38 | a { | ||
| 39 | color: inherit; | ||
| 40 | } | ||
| 41 | button { | ||
| 42 | border-radius: 0; | ||
| 43 | } | ||
| 44 | svg { | ||
| 45 | flex-shrink: 0; | ||
| 46 | } | ||
| 47 | [hidden] { | ||
| 48 | display: none !important; | ||
| 49 | } | ||
| 50 | :focus-visible { | ||
| 51 | outline: 2px dashed var(--pink); | ||
| 52 | outline-offset: 4px; | ||
| 53 | } | ||
| 54 | section { | ||
| 55 | scroll-margin-top: 24px; | ||
| 56 | } | ||
| 57 | .skip-link { | ||
| 58 | position: fixed; | ||
| 59 | top: -80px; | ||
| 60 | left: 12px; | ||
| 61 | z-index: 100; | ||
| 62 | } | ||
| 63 | .skip-link:focus { | ||
| 64 | top: 12px; | ||
| 65 | } | ||
| 66 | .raised { | ||
| 67 | border: 2px solid; | ||
| 68 | border-color: #fff #333 #333 #fff; | ||
| 69 | box-shadow: | ||
| 70 | inset -1px -1px #808080, | ||
| 71 | inset 1px 1px #dfdfdf; | ||
| 72 | } | ||
| 73 | .sunken { | ||
| 74 | border: 2px solid; | ||
| 75 | border-color: #808080 #fff #fff #808080; | ||
| 76 | box-shadow: inset 1px 1px #000; | ||
| 77 | } | ||
| 78 | .retro-button { | ||
| 79 | display: inline-flex; | ||
| 80 | align-items: center; | ||
| 81 | justify-content: center; | ||
| 82 | gap: 9px; | ||
| 83 | border: 2px solid; | ||
| 84 | border-color: #fff #000 #000 #fff; | ||
| 85 | box-shadow: | ||
| 86 | inset -1px -1px #808080, | ||
| 87 | inset 1px 1px #dfdfdf; | ||
| 88 | padding: 8px 16px; | ||
| 89 | background: var(--silver); | ||
| 90 | color: #000; | ||
| 91 | text-decoration: none; | ||
| 92 | font-size: 12px; | ||
| 93 | font-weight: 700; | ||
| 94 | } | ||
| 95 | .retro-button:active { | ||
| 96 | border-color: #000 #fff #fff #000; | ||
| 97 | box-shadow: inset 1px 1px #808080; | ||
| 98 | } | ||
| 99 | .retro-button:hover { | ||
| 100 | background: #d7d7d7; | ||
| 101 | } | ||
| 102 | .desktop { | ||
| 103 | position: fixed; | ||
| 104 | inset: 0 0 42px; | ||
| 105 | z-index: 1; | ||
| 106 | max-width: 1280px; | ||
| 107 | margin: 0 auto; | ||
| 108 | padding: 28px 30px 40px 112px; | ||
| 109 | pointer-events: none; | ||
| 110 | } | ||
| 111 | .desktop-icons { | ||
| 112 | position: absolute; | ||
| 113 | top: 37px; | ||
| 114 | left: max(10px, calc((100vw - 1280px) / 2 + 10px)); | ||
| 115 | width: 83px; | ||
| 116 | display: grid; | ||
| 117 | gap: 29px; | ||
| 118 | } | ||
| 119 | .desktop-icon { | ||
| 120 | display: flex; | ||
| 121 | flex-direction: column; | ||
| 122 | align-items: center; | ||
| 123 | gap: 7px; | ||
| 124 | border: 0; | ||
| 125 | background: none; | ||
| 126 | color: #fff; | ||
| 127 | text-align: center; | ||
| 128 | text-decoration: none; | ||
| 129 | font-size: 11px; | ||
| 130 | line-height: 1.4; | ||
| 131 | padding: 3px 0; | ||
| 132 | } | ||
| 133 | .desktop-icon:hover span, | ||
| 134 | .desktop-icon:focus-visible span { | ||
| 135 | background: var(--navy); | ||
| 136 | } | ||
| 137 | .browser-window { | ||
| 138 | display: flex; | ||
| 139 | flex-direction: column; | ||
| 140 | height: 100%; | ||
| 141 | min-height: 0; | ||
| 142 | padding: 3px; | ||
| 143 | background: var(--silver); | ||
| 144 | pointer-events: auto; | ||
| 145 | transform: translate(var(--window-x, 0px), var(--window-y, 0px)); | ||
| 146 | } | ||
| 147 | .browser-window > :not(main) { | ||
| 148 | flex-shrink: 0; | ||
| 149 | } | ||
| 150 | #window-title { | ||
| 151 | cursor: grab; | ||
| 152 | touch-action: none; | ||
| 153 | user-select: none; | ||
| 154 | } | ||
| 155 | #window-title.dragging { | ||
| 156 | cursor: grabbing; | ||
| 157 | } | ||
| 158 | #window-title:focus-visible { | ||
| 159 | outline-offset: -2px; | ||
| 160 | } | ||
| 161 | .window-title { | ||
| 162 | display: flex; | ||
| 163 | align-items: center; | ||
| 164 | justify-content: space-between; | ||
| 165 | gap: 12px; | ||
| 166 | min-height: 27px; | ||
| 167 | padding: 3px 4px 3px 6px; | ||
| 168 | background: linear-gradient(90deg, #000080, #2253a4); | ||
| 169 | color: #fff; | ||
| 170 | font-size: 12px; | ||
| 171 | font-weight: 700; | ||
| 172 | } | ||
| 173 | .window-name { | ||
| 174 | min-width: 0; | ||
| 175 | display: flex; | ||
| 176 | align-items: center; | ||
| 177 | gap: 7px; | ||
| 178 | } | ||
| 179 | .window-name > span { | ||
| 180 | overflow: hidden; | ||
| 181 | white-space: nowrap; | ||
| 182 | text-overflow: ellipsis; | ||
| 183 | } | ||
| 184 | .window-controls { | ||
| 185 | display: flex; | ||
| 186 | gap: 3px; | ||
| 187 | } | ||
| 188 | .window-control { | ||
| 189 | width: 20px; | ||
| 190 | height: 20px; | ||
| 191 | min-width: 20px; | ||
| 192 | padding: 0; | ||
| 193 | font: | ||
| 194 | 700 18px Arial, | ||
| 195 | sans-serif; | ||
| 196 | } | ||
| 197 | .window-control:first-child { | ||
| 198 | font-size: 17px; | ||
| 199 | } | ||
| 200 | .maximize-icon { | ||
| 201 | width: 10px; | ||
| 202 | height: 10px; | ||
| 203 | border: 1px solid #000; | ||
| 204 | border-top-width: 3px; | ||
| 205 | } | ||
| 206 | .browser-menu { | ||
| 207 | display: flex; | ||
| 208 | align-items: center; | ||
| 209 | gap: 2px; | ||
| 210 | padding: 3px 4px; | ||
| 211 | color: #000; | ||
| 212 | } | ||
| 213 | .browser-menu > a, | ||
| 214 | .browser-menu > button { | ||
| 215 | padding: 5px 8px; | ||
| 216 | border: 0; | ||
| 217 | background: none; | ||
| 218 | text-decoration: none; | ||
| 219 | font-size: 11px; | ||
| 220 | } | ||
| 221 | .browser-menu > a:hover, | ||
| 222 | .browser-menu > button:hover { | ||
| 223 | color: #fff; | ||
| 224 | background: var(--navy); | ||
| 225 | } | ||
| 226 | .address-bar { | ||
| 227 | display: flex; | ||
| 228 | align-items: center; | ||
| 229 | gap: 9px; | ||
| 230 | padding: 4px 7px 9px; | ||
| 231 | color: #000; | ||
| 232 | font-size: 11px; | ||
| 233 | } | ||
| 234 | .address-field { | ||
| 235 | display: flex; | ||
| 236 | align-items: center; | ||
| 237 | gap: 7px; | ||
| 238 | flex: 1; | ||
| 239 | padding: 4px 6px; | ||
| 240 | background: #fff; | ||
| 241 | min-width: 0; | ||
| 242 | } | ||
| 243 | .address-field > span { | ||
| 244 | overflow: hidden; | ||
| 245 | text-overflow: ellipsis; | ||
| 246 | white-space: nowrap; | ||
| 247 | } | ||
| 248 | .address-go { | ||
| 249 | align-self: stretch; | ||
| 250 | padding: 2px 9px; | ||
| 251 | font-weight: 400; | ||
| 252 | } | ||
| 253 | main { | ||
| 254 | flex: 1; | ||
| 255 | min-height: 0; | ||
| 256 | overflow: auto; | ||
| 257 | overscroll-behavior: contain; | ||
| 258 | border: 2px solid; | ||
| 259 | border-color: #555 #fff #fff #555; | ||
| 260 | background: #000; | ||
| 261 | } | ||
| 262 | main::-webkit-scrollbar { | ||
| 263 | width: 16px; | ||
| 264 | height: 16px; | ||
| 265 | } | ||
| 266 | main::-webkit-scrollbar-track, | ||
| 267 | main::-webkit-scrollbar-corner { | ||
| 268 | background: #dfdfdf; | ||
| 269 | } | ||
| 270 | main::-webkit-scrollbar-thumb { | ||
| 271 | border: 2px solid; | ||
| 272 | border-color: #fff #333 #333 #fff; | ||
| 273 | background: var(--silver); | ||
| 274 | box-shadow: inset -1px -1px #808080; | ||
| 275 | } | ||
| 276 | .hero { | ||
| 277 | display: grid; | ||
| 278 | grid-template-columns: 1.1fr 1fr; | ||
| 279 | align-items: center; | ||
| 280 | padding: 16px 35px 20px; | ||
| 281 | gap: 8px; | ||
| 282 | } | ||
| 283 | .hero h1 { | ||
| 284 | font-size: clamp(36px, 3.4vw, 48px); | ||
| 285 | letter-spacing: -2px; | ||
| 286 | } | ||
| 287 | .hero .hero-explanation { | ||
| 288 | margin: 14px 0 0; | ||
| 289 | } | ||
| 290 | .edition-packages { | ||
| 291 | display: grid; | ||
| 292 | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| 293 | gap: 16px; | ||
| 294 | align-items: end; | ||
| 295 | } | ||
| 296 | .hero-package { | ||
| 297 | display: block; | ||
| 298 | width: min(100%, 170px); | ||
| 299 | margin: 0 auto; | ||
| 300 | text-decoration: none; | ||
| 301 | } | ||
| 302 | .hero-package > img { | ||
| 303 | display: block; | ||
| 304 | width: 100%; | ||
| 305 | height: auto; | ||
| 306 | } | ||
| 307 | .hero-package > .edition-download { | ||
| 308 | display: flex; | ||
| 309 | justify-content: center; | ||
| 310 | padding: 6px 8px; | ||
| 311 | margin-top: 4px; | ||
| 312 | font-size: 11px; | ||
| 313 | background: var(--yellow); | ||
| 314 | } | ||
| 315 | .nightly-package > .edition-download { | ||
| 316 | background: #c9bdff; | ||
| 317 | } | ||
| 318 | h1 { | ||
| 319 | margin: 0; | ||
| 320 | font: | ||
| 321 | 900 clamp(40px, 4.7vw, 62px)/0.99 Arial, | ||
| 322 | Helvetica, | ||
| 323 | sans-serif; | ||
| 324 | letter-spacing: -3.3px; | ||
| 325 | } | ||
| 326 | h1 > span { | ||
| 327 | color: var(--yellow); | ||
| 328 | } | ||
| 329 | .hero-explanation { | ||
| 330 | max-width: 360px; | ||
| 331 | margin: 0 0 23px; | ||
| 332 | font-size: 12px; | ||
| 333 | line-height: 1.7; | ||
| 334 | color: #c0c0c0; | ||
| 335 | } | ||
| 336 | .primary-cta { | ||
| 337 | padding: 13px 17px; | ||
| 338 | gap: 12px; | ||
| 339 | background: var(--yellow); | ||
| 340 | border-color: #ffffd1 #737c00 #737c00 #ffffd1; | ||
| 341 | box-shadow: | ||
| 342 | inset -1px -1px #a3b000, | ||
| 343 | inset 1px 1px #ffffbd; | ||
| 344 | font: | ||
| 345 | 900 13px Arial, | ||
| 346 | sans-serif; | ||
| 347 | letter-spacing: 0.3px; | ||
| 348 | } | ||
| 349 | .primary-cta > span:last-child { | ||
| 350 | font-size: 22px; | ||
| 351 | margin-left: 8px; | ||
| 352 | } | ||
| 353 | .primary-cta:hover { | ||
| 354 | background: #f2ff73; | ||
| 355 | } | ||
| 356 | .platform-line { | ||
| 357 | display: flex; | ||
| 358 | margin-top: 16px; | ||
| 359 | flex-wrap: wrap; | ||
| 360 | align-items: center; | ||
| 361 | gap: 11px; | ||
| 362 | font-size: 10px; | ||
| 363 | } | ||
| 364 | .platform-line > span { | ||
| 365 | font: | ||
| 366 | 8px "Courier New", | ||
| 367 | monospace; | ||
| 368 | color: #ababab; | ||
| 369 | letter-spacing: 0.5px; | ||
| 370 | } | ||
| 371 | .platform-line > strong { | ||
| 372 | font-weight: 400; | ||
| 373 | } | ||
| 374 | .platform-line > b { | ||
| 375 | color: #656565; | ||
| 376 | } | ||
| 377 | .box-95 { | ||
| 378 | position: absolute; | ||
| 379 | right: 9px; | ||
| 380 | bottom: -6px; | ||
| 381 | font: | ||
| 382 | italic 900 75px Arial, | ||
| 383 | sans-serif; | ||
| 384 | color: var(--yellow); | ||
| 385 | letter-spacing: -6px; | ||
| 386 | } | ||
| 387 | .agents-section { | ||
| 388 | padding: 14px 35px 24px; | ||
| 389 | border-top: 1px solid #363636; | ||
| 390 | border-bottom: 1px solid #363636; | ||
| 391 | } | ||
| 392 | .agent-list { | ||
| 393 | display: grid; | ||
| 394 | grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
| 395 | gap: 26px 20px; | ||
| 396 | margin: 10px 0 24px; | ||
| 397 | } | ||
| 398 | .agent { | ||
| 399 | min-width: 0; | ||
| 400 | margin: 0; | ||
| 401 | text-align: center; | ||
| 402 | } | ||
| 403 | .agent-box { | ||
| 404 | display: block; | ||
| 405 | width: 100%; | ||
| 406 | max-width: 200px; | ||
| 407 | height: auto; | ||
| 408 | margin: 0 auto; | ||
| 409 | object-fit: contain; | ||
| 410 | } | ||
| 411 | .agents-section > .section-heading { | ||
| 412 | margin-bottom: 0; | ||
| 413 | } | ||
| 414 | .agent > figcaption { | ||
| 415 | padding: 12px 4px 0; | ||
| 416 | border-top: 3px ridge #777; | ||
| 417 | } | ||
| 418 | .agent h3 { | ||
| 419 | margin: 0 0 6px; | ||
| 420 | font-size: 14px; | ||
| 421 | } | ||
| 422 | .agent p { | ||
| 423 | max-width: 27ch; | ||
| 424 | margin: 0 auto; | ||
| 425 | color: var(--yellow); | ||
| 426 | font: | ||
| 427 | 11px/1.5 "Courier New", | ||
| 428 | monospace; | ||
| 429 | } | ||
| 430 | .agents-note { | ||
| 431 | margin: 0; | ||
| 432 | color: #aaa; | ||
| 433 | font: | ||
| 434 | 9px/1.5 "Courier New", | ||
| 435 | monospace; | ||
| 436 | } | ||
| 437 | .features-section { | ||
| 438 | padding: 33px 35px 38px; | ||
| 439 | } | ||
| 440 | .section-heading { | ||
| 441 | display: flex; | ||
| 442 | justify-content: space-between; | ||
| 443 | align-items: baseline; | ||
| 444 | gap: 20px; | ||
| 445 | margin-bottom: 21px; | ||
| 446 | } | ||
| 447 | .section-heading h2 { | ||
| 448 | font: | ||
| 449 | 900 20px/1.2 Arial, | ||
| 450 | sans-serif; | ||
| 451 | letter-spacing: -0.6px; | ||
| 452 | margin: 0; | ||
| 453 | } | ||
| 454 | .section-heading h2 > span { | ||
| 455 | color: var(--yellow); | ||
| 456 | } | ||
| 457 | .section-heading > span { | ||
| 458 | font: | ||
| 459 | 8px/1.5 "Courier New", | ||
| 460 | monospace; | ||
| 461 | color: #aaa; | ||
| 462 | text-align: right; | ||
| 463 | } | ||
| 464 | .feature-grid { | ||
| 465 | display: grid; | ||
| 466 | grid-template-columns: repeat(3, 1fr); | ||
| 467 | gap: 15px; | ||
| 468 | } | ||
| 469 | .feature-window { | ||
| 470 | min-width: 0; | ||
| 471 | padding: 3px; | ||
| 472 | background: var(--silver); | ||
| 473 | } | ||
| 474 | .feature-titlebar { | ||
| 475 | display: flex; | ||
| 476 | justify-content: space-between; | ||
| 477 | gap: 5px; | ||
| 478 | padding: 5px 6px; | ||
| 479 | background: #393939; | ||
| 480 | font: | ||
| 481 | 9px "Courier New", | ||
| 482 | monospace; | ||
| 483 | } | ||
| 484 | .feature-body { | ||
| 485 | background: #0b0b0b; | ||
| 486 | padding: 18px 15px 17px; | ||
| 487 | display: flex; | ||
| 488 | flex-direction: column; | ||
| 489 | align-items: flex-start; | ||
| 490 | height: calc(100% - 21px); | ||
| 491 | } | ||
| 492 | .feature-body h3 { | ||
| 493 | font: | ||
| 494 | 700 18px/1.15 Arial, | ||
| 495 | sans-serif; | ||
| 496 | margin: 16px 0 12px; | ||
| 497 | letter-spacing: -0.3px; | ||
| 498 | } | ||
| 499 | .feature-body p { | ||
| 500 | margin: 0 0 22px; | ||
| 501 | color: #c0c0c0; | ||
| 502 | font-size: 11px; | ||
| 503 | line-height: 1.7; | ||
| 504 | } | ||
| 505 | .feature-tag { | ||
| 506 | display: block; | ||
| 507 | margin-top: auto; | ||
| 508 | color: var(--yellow); | ||
| 509 | font: | ||
| 510 | 700 8px/1.6 "Courier New", | ||
| 511 | monospace; | ||
| 512 | letter-spacing: 0.3px; | ||
| 513 | text-decoration: none; | ||
| 514 | } | ||
| 515 | a.feature-tag { | ||
| 516 | text-decoration: underline; | ||
| 517 | text-underline-offset: 3px; | ||
| 518 | } | ||
| 519 | .order-section { | ||
| 520 | position: relative; | ||
| 521 | display: grid; | ||
| 522 | grid-template-columns: 1.35fr 1fr; | ||
| 523 | gap: 45px; | ||
| 524 | padding: 32px 35px; | ||
| 525 | border-top: 1px solid #546124; | ||
| 526 | border-bottom: 1px solid #546124; | ||
| 527 | background: #121707; | ||
| 528 | align-items: center; | ||
| 529 | } | ||
| 530 | .order-pitch h2 { | ||
| 531 | font: | ||
| 532 | 900 30px/1.1 Arial, | ||
| 533 | sans-serif; | ||
| 534 | letter-spacing: -1px; | ||
| 535 | margin: 15px 0 12px; | ||
| 536 | } | ||
| 537 | .order-pitch h2 > span { | ||
| 538 | color: var(--yellow); | ||
| 539 | } | ||
| 540 | .order-pitch > p { | ||
| 541 | font-size: 11px; | ||
| 542 | line-height: 1.6; | ||
| 543 | margin: 0 0 23px; | ||
| 544 | } | ||
| 545 | .order-pitch .offer-note { | ||
| 546 | color: #b9bea9; | ||
| 547 | font: | ||
| 548 | 9px/1.7 "Courier New", | ||
| 549 | monospace; | ||
| 550 | margin: 13px 0 0; | ||
| 551 | } | ||
| 552 | .run-window { | ||
| 553 | padding: 3px; | ||
| 554 | background: var(--silver); | ||
| 555 | color: #000; | ||
| 556 | } | ||
| 557 | .run-window .window-title { | ||
| 558 | min-height: 23px; | ||
| 559 | font-size: 11px; | ||
| 560 | } | ||
| 561 | .run-body { | ||
| 562 | padding: 14px 13px; | ||
| 563 | font-size: 11px; | ||
| 564 | } | ||
| 565 | .run-body > p:first-child { | ||
| 566 | margin: 0 0 14px; | ||
| 567 | font-weight: 700; | ||
| 568 | } | ||
| 569 | .run-body label { | ||
| 570 | font-size: 10px; | ||
| 571 | } | ||
| 572 | .command-row { | ||
| 573 | display: flex; | ||
| 574 | gap: 7px; | ||
| 575 | margin-top: 7px; | ||
| 576 | } | ||
| 577 | .command-row input { | ||
| 578 | width: 0; | ||
| 579 | min-width: 0; | ||
| 580 | flex: 1; | ||
| 581 | border-radius: 0; | ||
| 582 | padding: 7px 8px; | ||
| 583 | background: #fff; | ||
| 584 | color: #000; | ||
| 585 | font: | ||
| 586 | 700 15px "Courier New", | ||
| 587 | monospace; | ||
| 588 | } | ||
| 589 | .command-row button { | ||
| 590 | padding: 5px 12px; | ||
| 591 | } | ||
| 592 | .command-feedback { | ||
| 593 | min-height: 27px; | ||
| 594 | margin: 8px 0 10px; | ||
| 595 | font: | ||
| 596 | 9px/1.5 "Courier New", | ||
| 597 | monospace; | ||
| 598 | } | ||
| 599 | .run-divider { | ||
| 600 | border-top: 1px solid #808080; | ||
| 601 | border-bottom: 1px solid #fff; | ||
| 602 | margin: 0 0 13px; | ||
| 603 | } | ||
| 604 | .run-body > b { | ||
| 605 | font-size: 10px; | ||
| 606 | } | ||
| 607 | .run-body ul { | ||
| 608 | padding-left: 17px; | ||
| 609 | margin: 7px 0 10px; | ||
| 610 | font-size: 10px; | ||
| 611 | line-height: 1.8; | ||
| 612 | } | ||
| 613 | .requirements-note { | ||
| 614 | font: | ||
| 615 | 8px "Courier New", | ||
| 616 | monospace; | ||
| 617 | margin-bottom: 0; | ||
| 618 | } | ||
| 619 | .faq-section { | ||
| 620 | padding: 34px 35px; | ||
| 621 | } | ||
| 622 | .faq-section > h2 { | ||
| 623 | margin: 0 0 20px; | ||
| 624 | color: var(--pink); | ||
| 625 | font: | ||
| 626 | 700 11px "Courier New", | ||
| 627 | monospace; | ||
| 628 | } | ||
| 629 | .faq-section > details { | ||
| 630 | border-top: 1px dotted #626262; | ||
| 631 | } | ||
| 632 | .faq-section > details:last-child { | ||
| 633 | border-bottom: 1px dotted #626262; | ||
| 634 | } | ||
| 635 | .faq-section summary { | ||
| 636 | padding: 13px 2px; | ||
| 637 | font-size: 12px; | ||
| 638 | } | ||
| 639 | .faq-section summary::marker { | ||
| 640 | color: var(--yellow); | ||
| 641 | } | ||
| 642 | .faq-section details p { | ||
| 643 | margin: 0; | ||
| 644 | padding: 0 20px 16px; | ||
| 645 | color: #c0c0c0; | ||
| 646 | font-size: 11px; | ||
| 647 | line-height: 1.7; | ||
| 648 | max-width: 740px; | ||
| 649 | } | ||
| 650 | .faq-section a { | ||
| 651 | color: var(--yellow); | ||
| 652 | text-underline-offset: 3px; | ||
| 653 | } | ||
| 654 | .site-footer { | ||
| 655 | margin: 0 35px; | ||
| 656 | padding: 25px 0 27px; | ||
| 657 | text-align: center; | ||
| 658 | border-top: 1px solid #363636; | ||
| 659 | } | ||
| 660 | .visitor-counter { | ||
| 661 | display: flex; | ||
| 662 | align-items: center; | ||
| 663 | justify-content: center; | ||
| 664 | flex-wrap: wrap; | ||
| 665 | gap: 12px; | ||
| 666 | font: | ||
| 667 | 9px "Courier New", | ||
| 668 | monospace; | ||
| 669 | color: #c0c0c0; | ||
| 670 | } | ||
| 671 | .counter-digits { | ||
| 672 | display: inline-flex; | ||
| 673 | gap: 2px; | ||
| 674 | padding: 3px; | ||
| 675 | border: 2px inset #666; | ||
| 676 | background: #141414; | ||
| 677 | } | ||
| 678 | .counter-digits > span { | ||
| 679 | display: block; | ||
| 680 | padding: 2px 4px; | ||
| 681 | background: #252b1a; | ||
| 682 | color: var(--yellow); | ||
| 683 | font: | ||
| 684 | 700 15px "Courier New", | ||
| 685 | monospace; | ||
| 686 | } | ||
| 687 | .site-footer > p { | ||
| 688 | color: #b0b0b0; | ||
| 689 | font: | ||
| 690 | 9px/1.6 "Courier New", | ||
| 691 | monospace; | ||
| 692 | margin: 0 0 10px; | ||
| 693 | } | ||
| 694 | .site-footer nav { | ||
| 695 | display: flex; | ||
| 696 | flex-wrap: wrap; | ||
| 697 | gap: 18px; | ||
| 698 | justify-content: center; | ||
| 699 | font: | ||
| 700 | 9px "Courier New", | ||
| 701 | monospace; | ||
| 702 | } | ||
| 703 | .site-footer nav a { | ||
| 704 | color: var(--pink); | ||
| 705 | text-underline-offset: 3px; | ||
| 706 | } | ||
| 707 | .browser-status { | ||
| 708 | display: flex; | ||
| 709 | align-items: stretch; | ||
| 710 | gap: 4px; | ||
| 711 | height: 24px; | ||
| 712 | padding-top: 4px; | ||
| 713 | color: #000; | ||
| 714 | font-size: 10px; | ||
| 715 | } | ||
| 716 | .browser-status > span { | ||
| 717 | display: flex; | ||
| 718 | align-items: center; | ||
| 719 | gap: 4px; | ||
| 720 | padding: 2px 4px; | ||
| 721 | } | ||
| 722 | .browser-status > span:first-child { | ||
| 723 | flex: 1; | ||
| 724 | } | ||
| 725 | .browser-status > span:nth-child(2) { | ||
| 726 | min-width: 120px; | ||
| 727 | } | ||
| 728 | .resize-grip { | ||
| 729 | width: 13px; | ||
| 730 | background: repeating-linear-gradient(135deg, transparent 0 2px, #808080 2px 3px, #fff 3px 4px); | ||
| 731 | clip-path: polygon(100% 0, 100% 100%, 0 100%); | ||
| 732 | } | ||
| 733 | .taskbar { | ||
| 734 | position: fixed; | ||
| 735 | z-index: 10; | ||
| 736 | left: 0; | ||
| 737 | right: 0; | ||
| 738 | bottom: 0; | ||
| 739 | min-height: 40px; | ||
| 740 | padding: 3px 5px; | ||
| 741 | background: var(--silver); | ||
| 742 | color: #000; | ||
| 743 | display: flex; | ||
| 744 | align-items: center; | ||
| 745 | gap: 8px; | ||
| 746 | } | ||
| 747 | .start-menu { | ||
| 748 | position: relative; | ||
| 749 | } | ||
| 750 | .start-button { | ||
| 751 | gap: 7px; | ||
| 752 | padding: 4px 8px; | ||
| 753 | min-height: 30px; | ||
| 754 | font-size: 14px; | ||
| 755 | list-style: none; | ||
| 756 | } | ||
| 757 | .start-button::-webkit-details-marker { | ||
| 758 | display: none; | ||
| 759 | } | ||
| 760 | .start-mark { | ||
| 761 | display: grid; | ||
| 762 | grid-template-columns: 8px 8px; | ||
| 763 | gap: 2px; | ||
| 764 | transform: skewY(-8deg); | ||
| 765 | } | ||
| 766 | .start-mark i { | ||
| 767 | width: 8px; | ||
| 768 | height: 8px; | ||
| 769 | background: #f3433c; | ||
| 770 | } | ||
| 771 | .start-mark i:nth-child(2) { | ||
| 772 | background: #75b53c; | ||
| 773 | } | ||
| 774 | .start-mark i:nth-child(3) { | ||
| 775 | background: #347be3; | ||
| 776 | } | ||
| 777 | .start-mark i:nth-child(4) { | ||
| 778 | background: #ffe348; | ||
| 779 | } | ||
| 780 | .start-panel { | ||
| 781 | position: absolute; | ||
| 782 | bottom: calc(100% + 5px); | ||
| 783 | left: -1px; | ||
| 784 | display: flex; | ||
| 785 | width: 253px; | ||
| 786 | padding: 3px; | ||
| 787 | background: var(--silver); | ||
| 788 | } | ||
| 789 | .start-brand { | ||
| 790 | writing-mode: vertical-rl; | ||
| 791 | transform: rotate(180deg); | ||
| 792 | background: #808080; | ||
| 793 | color: #dedede; | ||
| 794 | padding: 12px 8px; | ||
| 795 | font: | ||
| 796 | 900 18px Arial, | ||
| 797 | sans-serif; | ||
| 798 | white-space: nowrap; | ||
| 799 | } | ||
| 800 | .start-brand b { | ||
| 801 | color: #fff; | ||
| 802 | } | ||
| 803 | .start-panel > div:last-child { | ||
| 804 | flex: 1; | ||
| 805 | } | ||
| 806 | .start-panel a, | ||
| 807 | .start-panel button { | ||
| 808 | display: flex; | ||
| 809 | align-items: center; | ||
| 810 | gap: 10px; | ||
| 811 | padding: 12px 10px; | ||
| 812 | width: 100%; | ||
| 813 | background: none; | ||
| 814 | border: 0; | ||
| 815 | color: #000; | ||
| 816 | text-decoration: none; | ||
| 817 | font-size: 11px; | ||
| 818 | text-align: left; | ||
| 819 | } | ||
| 820 | .start-panel a:hover, | ||
| 821 | .start-panel button:hover { | ||
| 822 | background: var(--navy); | ||
| 823 | color: #fff; | ||
| 824 | } | ||
| 825 | .taskbar-divider { | ||
| 826 | align-self: stretch; | ||
| 827 | border-left: 1px solid #808080; | ||
| 828 | border-right: 1px solid #fff; | ||
| 829 | } | ||
| 830 | .task-button { | ||
| 831 | display: flex; | ||
| 832 | align-items: center; | ||
| 833 | gap: 8px; | ||
| 834 | background: #d7d7d7; | ||
| 835 | color: #000; | ||
| 836 | padding: 3px 8px; | ||
| 837 | min-height: 29px; | ||
| 838 | min-width: 170px; | ||
| 839 | font-size: 11px; | ||
| 840 | font-weight: 700; | ||
| 841 | text-align: left; | ||
| 842 | } | ||
| 843 | .taskbar-clock { | ||
| 844 | margin-left: auto; | ||
| 845 | display: flex; | ||
| 846 | align-items: center; | ||
| 847 | justify-content: center; | ||
| 848 | gap: 9px; | ||
| 849 | padding: 4px 10px; | ||
| 850 | min-height: 29px; | ||
| 851 | font-size: 11px; | ||
| 852 | white-space: nowrap; | ||
| 853 | } | ||
| 854 | .taskbar-clock > span:first-child { | ||
| 855 | font-size: 16px; | ||
| 856 | } | ||
| 857 | .maximized .desktop { | ||
| 858 | max-width: none; | ||
| 859 | padding: 0; | ||
| 860 | } | ||
| 861 | .maximized .browser-window { | ||
| 862 | transform: none; | ||
| 863 | } | ||
| 864 | .maximized #window-title { | ||
| 865 | cursor: default; | ||
| 866 | } | ||
| 867 | .minimized-message { | ||
| 868 | height: 100%; | ||
| 869 | pointer-events: auto; | ||
| 870 | display: flex; | ||
| 871 | flex-direction: column; | ||
| 872 | align-items: center; | ||
| 873 | justify-content: center; | ||
| 874 | gap: 15px; | ||
| 875 | text-align: center; | ||
| 876 | } | ||
| 877 | .minimized-message h1 { | ||
| 878 | font: | ||
| 879 | 700 25px Arial, | ||
| 880 | sans-serif; | ||
| 881 | letter-spacing: -0.5px; | ||
| 882 | } | ||
| 883 | .minimized-message p { | ||
| 884 | font: | ||
| 885 | 12px "Courier New", | ||
| 886 | monospace; | ||
| 887 | margin: 0 0 10px; | ||
| 888 | } | ||
| 889 | .retro-dialog { | ||
| 890 | width: min(440px, calc(100vw - 32px)); | ||
| 891 | padding: 3px; | ||
| 892 | background: var(--silver); | ||
| 893 | color: #000; | ||
| 894 | } | ||
| 895 | .retro-dialog::backdrop { | ||
| 896 | background: #000b; | ||
| 897 | } | ||
| 898 | .dialog-content { | ||
| 899 | display: flex; | ||
| 900 | align-items: center; | ||
| 901 | gap: 20px; | ||
| 902 | padding: 22px 20px 13px; | ||
| 903 | } | ||
| 904 | .dialog-content > p { | ||
| 905 | font-size: 12px; | ||
| 906 | line-height: 1.7; | ||
| 907 | margin: 0; | ||
| 908 | } | ||
| 909 | .dialog-actions { | ||
| 910 | display: flex; | ||
| 911 | justify-content: flex-end; | ||
| 912 | gap: 8px; | ||
| 913 | padding: 8px 16px 17px; | ||
| 914 | } | ||
| 915 | |||
| 916 | @media (min-width: 1450px) { | ||
| 917 | .maximized .hero { | ||
| 918 | grid-template-columns: 1fr 1fr; | ||
| 919 | padding-left: 65px; | ||
| 920 | padding-right: 65px; | ||
| 921 | } | ||
| 922 | .maximized h1 { | ||
| 923 | font-size: 76px; | ||
| 924 | } | ||
| 925 | } | ||
| 926 | |||
| 927 | @media (max-width: 1100px) { | ||
| 928 | .desktop { | ||
| 929 | padding-left: 98px; | ||
| 930 | padding-right: 15px; | ||
| 931 | } | ||
| 932 | .hero { | ||
| 933 | padding-left: 25px; | ||
| 934 | padding-right: 25px; | ||
| 935 | } | ||
| 936 | h1 { | ||
| 937 | font-size: 47px; | ||
| 938 | letter-spacing: -2.6px; | ||
| 939 | } | ||
| 940 | .order-section { | ||
| 941 | gap: 23px; | ||
| 942 | } | ||
| 943 | .order-pitch h2 { | ||
| 944 | font-size: 27px; | ||
| 945 | } | ||
| 946 | .feature-grid { | ||
| 947 | gap: 10px; | ||
| 948 | } | ||
| 949 | .feature-body { | ||
| 950 | padding: 15px 11px; | ||
| 951 | } | ||
| 952 | } | ||
| 953 | |||
| 954 | @media (max-width: 820px) { | ||
| 955 | .desktop { | ||
| 956 | padding: 14px 12px; | ||
| 957 | } | ||
| 958 | .desktop-icons { | ||
| 959 | display: none; | ||
| 960 | } | ||
| 961 | .hero { | ||
| 962 | grid-template-columns: 1.1fr 0.9fr; | ||
| 963 | gap: 0; | ||
| 964 | padding-top: 29px; | ||
| 965 | } | ||
| 966 | h1 { | ||
| 967 | font-size: 44px; | ||
| 968 | } | ||
| 969 | .hero-explanation { | ||
| 970 | max-width: 295px; | ||
| 971 | } | ||
| 972 | .primary-cta { | ||
| 973 | font-size: 11px; | ||
| 974 | gap: 7px; | ||
| 975 | padding: 12px; | ||
| 976 | } | ||
| 977 | .primary-cta > span:last-child { | ||
| 978 | margin-left: 3px; | ||
| 979 | } | ||
| 980 | .section-heading { | ||
| 981 | display: block; | ||
| 982 | } | ||
| 983 | .section-heading > span { | ||
| 984 | display: block; | ||
| 985 | text-align: left; | ||
| 986 | margin-top: 8px; | ||
| 987 | } | ||
| 988 | .agents-section, | ||
| 989 | .features-section, | ||
| 990 | .order-section, | ||
| 991 | .faq-section { | ||
| 992 | padding-left: 25px; | ||
| 993 | padding-right: 25px; | ||
| 994 | } | ||
| 995 | .site-footer { | ||
| 996 | margin-left: 25px; | ||
| 997 | margin-right: 25px; | ||
| 998 | } | ||
| 999 | .feature-body h3 { | ||
| 1000 | font-size: 16px; | ||
| 1001 | } | ||
| 1002 | .taskbar-clock { | ||
| 1003 | margin-left: auto; | ||
| 1004 | } | ||
| 1005 | } | ||
| 1006 | |||
| 1007 | @media (max-width: 620px) { | ||
| 1008 | .browser-menu { | ||
| 1009 | flex-wrap: wrap; | ||
| 1010 | } | ||
| 1011 | .hero-package { | ||
| 1012 | width: min(100%, 160px); | ||
| 1013 | } | ||
| 1014 | .edition-packages { | ||
| 1015 | width: 100%; | ||
| 1016 | margin-top: 12px; | ||
| 1017 | } | ||
| 1018 | .desktop { | ||
| 1019 | padding: 9px 7px; | ||
| 1020 | } | ||
| 1021 | .window-name { | ||
| 1022 | font-size: 10px; | ||
| 1023 | } | ||
| 1024 | .window-controls { | ||
| 1025 | gap: 2px; | ||
| 1026 | } | ||
| 1027 | .browser-menu { | ||
| 1028 | gap: 0; | ||
| 1029 | } | ||
| 1030 | .browser-menu > a, | ||
| 1031 | .browser-menu > button { | ||
| 1032 | padding: 6px 7px; | ||
| 1033 | font-size: 10px; | ||
| 1034 | } | ||
| 1035 | .address-bar { | ||
| 1036 | padding: 3px 4px 7px; | ||
| 1037 | gap: 6px; | ||
| 1038 | font-size: 10px; | ||
| 1039 | } | ||
| 1040 | .address-go { | ||
| 1041 | font-size: 10px; | ||
| 1042 | } | ||
| 1043 | .hero { | ||
| 1044 | display: flex; | ||
| 1045 | flex-direction: column; | ||
| 1046 | align-items: stretch; | ||
| 1047 | padding: 29px 20px 15px; | ||
| 1048 | } | ||
| 1049 | h1 { | ||
| 1050 | font-size: clamp(41px, 10.5vw, 63px); | ||
| 1051 | letter-spacing: -2.5px; | ||
| 1052 | } | ||
| 1053 | .hero-explanation { | ||
| 1054 | max-width: 420px; | ||
| 1055 | font-size: 11px; | ||
| 1056 | } | ||
| 1057 | .primary-cta { | ||
| 1058 | font-size: 12px; | ||
| 1059 | padding: 12px 15px; | ||
| 1060 | gap: 10px; | ||
| 1061 | } | ||
| 1062 | .platform-line { | ||
| 1063 | font-size: 9px; | ||
| 1064 | gap: 9px; | ||
| 1065 | } | ||
| 1066 | .agents-section, | ||
| 1067 | .features-section, | ||
| 1068 | .order-section, | ||
| 1069 | .faq-section { | ||
| 1070 | padding: 25px 20px; | ||
| 1071 | } | ||
| 1072 | .agent-list { | ||
| 1073 | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| 1074 | gap: 22px 12px; | ||
| 1075 | margin-top: 20px; | ||
| 1076 | } | ||
| 1077 | .agent h3 { | ||
| 1078 | font-size: 13px; | ||
| 1079 | } | ||
| 1080 | .agent p { | ||
| 1081 | font-size: 10px; | ||
| 1082 | } | ||
| 1083 | .agents-note { | ||
| 1084 | font-size: 8px; | ||
| 1085 | } | ||
| 1086 | .section-heading h2 { | ||
| 1087 | font-size: 20px; | ||
| 1088 | } | ||
| 1089 | .section-heading h2 > span { | ||
| 1090 | display: block; | ||
| 1091 | } | ||
| 1092 | .feature-grid { | ||
| 1093 | grid-template-columns: 1fr; | ||
| 1094 | gap: 17px; | ||
| 1095 | } | ||
| 1096 | .feature-body { | ||
| 1097 | padding: 17px; | ||
| 1098 | height: auto; | ||
| 1099 | } | ||
| 1100 | .feature-body h3 { | ||
| 1101 | font-size: 21px; | ||
| 1102 | margin-top: 13px; | ||
| 1103 | } | ||
| 1104 | .feature-body p { | ||
| 1105 | font-size: 12px; | ||
| 1106 | margin-bottom: 18px; | ||
| 1107 | } | ||
| 1108 | .feature-tag { | ||
| 1109 | font-size: 9px; | ||
| 1110 | } | ||
| 1111 | .feature-titlebar { | ||
| 1112 | font-size: 10px; | ||
| 1113 | } | ||
| 1114 | .order-section { | ||
| 1115 | grid-template-columns: 1fr; | ||
| 1116 | gap: 25px; | ||
| 1117 | } | ||
| 1118 | .order-pitch h2 { | ||
| 1119 | font-size: 29px; | ||
| 1120 | } | ||
| 1121 | .order-pitch > p { | ||
| 1122 | font-size: 11px; | ||
| 1123 | } | ||
| 1124 | .run-body { | ||
| 1125 | padding: 16px; | ||
| 1126 | } | ||
| 1127 | .command-feedback { | ||
| 1128 | min-height: 15px; | ||
| 1129 | } | ||
| 1130 | .faq-section h2 { | ||
| 1131 | font-size: 10px; | ||
| 1132 | line-height: 1.5; | ||
| 1133 | } | ||
| 1134 | .faq-section summary { | ||
| 1135 | font-size: 11px; | ||
| 1136 | line-height: 1.5; | ||
| 1137 | } | ||
| 1138 | .site-footer { | ||
| 1139 | margin-left: 20px; | ||
| 1140 | margin-right: 20px; | ||
| 1141 | } | ||
| 1142 | .visitor-counter { | ||
| 1143 | font-size: 8px; | ||
| 1144 | } | ||
| 1145 | .site-footer > p { | ||
| 1146 | font-size: 8px; | ||
| 1147 | } | ||
| 1148 | .site-footer nav { | ||
| 1149 | font-size: 8px; | ||
| 1150 | gap: 15px; | ||
| 1151 | } | ||
| 1152 | .browser-status { | ||
| 1153 | font-size: 8px; | ||
| 1154 | height: 26px; | ||
| 1155 | } | ||
| 1156 | .browser-status > span:nth-child(2) { | ||
| 1157 | min-width: 67px; | ||
| 1158 | } | ||
| 1159 | .browser-status > span:first-child { | ||
| 1160 | white-space: nowrap; | ||
| 1161 | overflow: hidden; | ||
| 1162 | } | ||
| 1163 | .resize-grip { | ||
| 1164 | display: none !important; | ||
| 1165 | } | ||
| 1166 | .taskbar { | ||
| 1167 | gap: 6px; | ||
| 1168 | } | ||
| 1169 | .task-button { | ||
| 1170 | min-width: 0; | ||
| 1171 | flex: 1; | ||
| 1172 | max-width: 170px; | ||
| 1173 | } | ||
| 1174 | .taskbar-clock { | ||
| 1175 | padding: 4px 7px; | ||
| 1176 | gap: 5px; | ||
| 1177 | font-size: 10px; | ||
| 1178 | } | ||
| 1179 | .dialog-content { | ||
| 1180 | padding: 19px 13px 10px; | ||
| 1181 | gap: 12px; | ||
| 1182 | } | ||
| 1183 | } | ||
| 1184 | |||
| 1185 | @media (max-width: 620px) { | ||
| 1186 | .hero { | ||
| 1187 | padding-top: 14px; | ||
| 1188 | padding-bottom: 14px; | ||
| 1189 | } | ||
| 1190 | .hero h1 { | ||
| 1191 | font-size: 30px; | ||
| 1192 | } | ||
| 1193 | .hero-package { | ||
| 1194 | max-width: 120px; | ||
| 1195 | } | ||
| 1196 | .hero .platform-line { | ||
| 1197 | display: none; | ||
| 1198 | } | ||
| 1199 | .agents-section { | ||
| 1200 | padding-top: 14px; | ||
| 1201 | } | ||
| 1202 | .agents-section .agent-list { | ||
| 1203 | margin-top: 8px; | ||
| 1204 | } | ||
| 1205 | } | ||
| 1206 | |||
| 1207 | @media (min-width: 821px) and (max-height: 820px) { | ||
| 1208 | .hero { | ||
| 1209 | padding-top: 10px; | ||
| 1210 | padding-bottom: 12px; | ||
| 1211 | } | ||
| 1212 | .hero h1 { | ||
| 1213 | font-size: 40px; | ||
| 1214 | } | ||
| 1215 | .hero-package { | ||
| 1216 | max-width: 140px; | ||
| 1217 | } | ||
| 1218 | .agent-box { | ||
| 1219 | max-width: 180px; | ||
| 1220 | } | ||
| 1221 | .agents-section { | ||
| 1222 | padding-top: 8px; | ||
| 1223 | } | ||
| 1224 | } | ||
| 1225 | |||
| 1226 | @media (max-width: 360px) { | ||
| 1227 | .hero-package { | ||
| 1228 | max-width: 110px; | ||
| 1229 | } | ||
| 1230 | .hero, | ||
| 1231 | .agents-section, | ||
| 1232 | .features-section, | ||
| 1233 | .order-section, | ||
| 1234 | .faq-section { | ||
| 1235 | padding-left: 14px; | ||
| 1236 | padding-right: 14px; | ||
| 1237 | } | ||
| 1238 | .primary-cta { | ||
| 1239 | font-size: 10px; | ||
| 1240 | } | ||
| 1241 | .taskbar-clock > span:first-child { | ||
| 1242 | display: none; | ||
| 1243 | } | ||
| 1244 | } | ||