/* Packtray — the install pages (install/mac.html and install/windows.html).
A Download button on the landing page opens one of them. The page thanks the visitor,
starts the file (install.js) and shows the three steps to a running app, each with a
picture of the thing they are about to see.
Loaded after styles.css, and built from its parts: the tokens, the nav, the eyebrow, the
"How it works" cards and their keys, the footer.
The pictures follow the feature tiles' rule: what isn't the point is a grey bar, and only
the words to look for are real. They show macOS's and Windows' own furniture (a Finder
window, the disk image, the blue panel Windows puts up), so they carry those colours and
none of the page's.
Sections, in order:
1 The top 4 The Mac's pictures 7 Good to know
2 The steps 5 Windows' pictures 8 Responsive + motion
3 Shared picture parts 6 The first pack */
/* ─────────────────────────────────────────────────────────── 1. The top ───── */
@keyframes install-rise {
from { opacity: 0; transform: translateY(14px); }
}
.install { padding-bottom: clamp(30px, 5vw, 60px); }
.install-top {
padding: clamp(18px, 3.2vw, 40px) 0 clamp(28px, 3.2vw, 38px);
text-align: center;
}
.install-top > * { animation: install-rise 0.8s var(--ease) both; }
.install-top .eyebrow { justify-content: center; }
.install-top h1 { font-size: clamp(36px, 5vw, 58px); animation-delay: 0.05s; }
.install-sub {
max-width: 600px;
margin: 16px auto 0;
font-size: 17px;
color: var(--ink-2);
text-wrap: balance;
animation-delay: 0.1s;
}
.install-meta { margin-top: 11px; font-size: 13px; color: var(--ink-3); text-wrap: balance; animation-delay: 0.14s; }
/* Links in running text: the hero's small-print link, on this page's lines. */
.install-sub a, .notes a {
color: var(--ink);
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.3);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s;
}
.install-sub a:hover, .notes a:hover { text-decoration-color: currentColor; }
.install-sub a:focus-visible, .notes a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; border-radius: 3px; }
/* A shortcut, a key or a file's name inside a sentence stays on one line, and the second
sentence under the heading moves down whole rather than breaking in the middle. */
.nb { white-space: nowrap; }
.install-sub .line { display: inline-block; }
/* ───────────────────────────────────────────────────────── 2. The steps ───── */
/* The landing page's "How it works" cards, each with a picture on top. The arrows between
them, and the stacking below 980px, are styles.css's. */
.install > section.install-steps { padding: 0; }
.step {
padding: 14px 14px 26px;
animation: install-rise 0.8s var(--ease) 0.2s both;
}
.step:nth-child(2) { animation-delay: 0.27s; }
.step:nth-child(3) { animation-delay: 0.34s; }
.step .how-top { margin: 20px 10px 16px; }
.step h3, .step > p { margin-inline: 10px; }
.step > p b { font-weight: 600; color: var(--ink); }
/* ──────────────────────────────────────────────── 3. Shared picture parts ───── */
/* The stage each picture sits on: the feature tiles' stage, smaller. */
.pic {
position: relative;
height: 180px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
background: radial-gradient(120% 90% at 50% 0%, #1a1a20, #111115 70%);
font-size: 11px;
line-height: 1.3;
color: var(--ink-2);
-webkit-user-select: none;
user-select: none;
}
.pic p { margin: 0; }
.pic ul { margin: 0; padding: 0; list-style: none; }
.pic .bar { display: block; flex: none; width: var(--w, 50%); height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
/* A window, running off the bottom of the picture. */
.pwin {
position: absolute;
inset: 22px 24px -1px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.11);
border-bottom: 0;
border-radius: 10px 10px 0 0;
background: #121215;
box-shadow: 0 20px 44px -18px #000;
}
.pwin-bar {
display: flex;
align-items: center;
gap: 10px;
height: 27px;
padding: 0 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.045);
}
.pwin-bar .lights { gap: 4.5px; }
.pwin-bar .lights i { width: 8.5px; height: 8.5px; }
.pwin-name { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 560; color: var(--ink-2); }
/* Windows' three window buttons, where macOS has its lights. */
.win-ctl { display: flex; gap: 11px; margin-left: auto; }
.win-ctl svg { width: 9px; height: 9px; fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.1; stroke-linecap: round; }
/* A list of files; the one to open is selected, as the system would show it. */
.prows { display: grid; gap: 2px; padding: 6px !important; }
.prow { display: flex; align-items: center; gap: 9px; height: 29px; padding: 0 9px; border-radius: 6px; }
.prow.on { background: rgba(86, 168, 255, 0.24); box-shadow: inset 0 0 0 1px rgba(86, 168, 255, 0.34); color: var(--ink); }
.prow b { overflow: hidden; font-weight: 520; white-space: nowrap; text-overflow: ellipsis; }
.prow em { margin-left: auto; padding-left: 8px; font-style: normal; font-size: 10px; white-space: nowrap; color: rgba(255, 255, 255, 0.55); }
.ic-dmg { flex: none; width: 17px; height: 21px; }
.ic-exe { flex: none; width: 18px; height: 18px; }
/* Some other file. */
.pdoc { flex: none; width: 15px; height: 19px; margin: 0 1px; border-radius: 2.5px; background: rgba(255, 255, 255, 0.13); }
/* The pointer. */
.pcur {
position: absolute;
z-index: 5;
width: 19px;
height: 19px;
fill: #fff;
stroke: rgba(0, 0, 0, 0.6);
stroke-width: 1.1;
stroke-linejoin: round;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
transform-origin: 4px 3px;
}
/* Under the file's name, double-clicking it now and then. */
@keyframes pic-open {
0%, 70%, 100% { transform: none; }
74%, 84% { transform: scale(0.84); }
79%, 89% { transform: none; }
}
.pcur-open { left: 36%; top: 77px; animation: pic-open 3.6s ease-in-out 1.2s infinite; }
/* The app's own window, as far as a picture this size can show it: three things in the
tray, the box for the request and the button that makes the pack. */
.papp { z-index: 1; }
.papp-body { display: grid; gap: 9px; padding: 10px; }
.papp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.papp-tiles i { height: 40px; border-radius: 6px; background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.papp-ask { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 7px 0 9px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.papp-ask b { width: 44px; height: 16px; border-radius: 5px; background: #7b7bff; }
/* The icon's menu: the same four lines on both systems. */
.pmenu {
position: absolute;
z-index: 3;
padding: 4px !important;
border-radius: 8px;
background: #29292f;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 14px 30px -10px #000;
font-size: 10.5px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.9);
}
.pmenu li { padding: 3.5px 10px 3.5px 22px; border-radius: 5px; }
.pmenu .tick { background: no-repeat 8px 50% / 9px 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m1.6 5.3 2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-opacity='.9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pmenu .rule { height: 1px; margin: 4px 8px; padding: 0; border-radius: 0; background: rgba(255, 255, 255, 0.13); }
/* ───────────────────────────────────────────── 4. The Mac's pictures ───── */
.pic-files .ic-folder { width: 14px; height: 12px; }
/* The disk image's window, as make_dmg_art.swift paints it: graphite with a hint of
indigo, a glow behind the two slots, the heading over them and the arrow between. */
.pic-dmg .pwin { inset: 16px 20px -1px; background: linear-gradient(#24243a, #16161f); }
.dmg-body {
height: 100%;
padding-top: 11px;
background: radial-gradient(64% 46% at 50% 50%, rgba(91, 91, 240, 0.3), transparent 72%);
text-align: center;
}
.dmg-title { font-size: 10.5px; font-weight: 620; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.95); }
.dmg-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.dmg-plate {
position: relative;
display: grid;
justify-items: center;
align-content: center;
gap: 5px;
width: 76px;
height: 80px;
border-radius: 13px;
background: linear-gradient(#7e7eac, #6f6f9b);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.38);
}
.dmg-plate img, .dmg-folder { width: 38px; height: 38px; }
.dmg-plate em { font-style: normal; font-size: 9px; font-weight: 500; line-height: 1; color: #fff; }
.dmg-arrow { flex: none; width: 36px; height: 16px; }
/* The copy in the pointer's hand. It starts on the app's icon and lands one slot over:
two slots are 76px wide and 8 + 36 + 8 apart. */
@keyframes dmg-drag {
0%, 12% { opacity: 0; transform: none; }
20% { opacity: 1; transform: scale(1.06); }
58% { opacity: 1; transform: translateX(128px) scale(1.06); }
66% { opacity: 1; transform: translateX(128px) scale(0.9); }
74%, 100% { opacity: 0; transform: translateX(128px) scale(0.9); }
}
.dmg-drag {
position: absolute;
left: 19px;
top: 13px;
z-index: 4;
width: 38px;
height: 38px;
animation: dmg-drag 4.8s var(--ease) 0.9s infinite both;
}
.dmg-drag img { display: block; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.5)); }
.dmg-drag .pcur { left: 22px; top: 22px; }
/* A desk: wallpaper, with the system's bar along one edge. The Mac's is the drop spot
scene's (styles.css, .mac), in small. */
.pic-mac {
background:
radial-gradient(88% 70% at 18% -12%, rgba(123, 123, 255, 0.34), transparent 62%),
radial-gradient(76% 62% at 90% 110%, rgba(52, 211, 153, 0.2), transparent 60%),
linear-gradient(158deg, #1b1934 0%, #101019 56%, #151522 100%);
}
.mbar {
position: absolute;
inset: 0 0 auto 0;
z-index: 2;
display: flex;
align-items: center;
gap: 11px;
height: 23px;
padding: 0 10px 0 11px;
background: rgba(255, 255, 255, 0.08);
font-size: 10.5px;
color: rgba(255, 255, 255, 0.62);
}
.mbar .mac-logo { width: 10px; height: 12px; }
.mbar b { font-weight: 620; color: rgba(255, 255, 255, 0.9); }
/* The icon, pressed: its menu is open under it. */
.mbar-tray {
display: grid;
place-items: center;
width: 27px;
height: 19px;
margin-left: auto;
border-radius: 5px;
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
.mbar-clock { font-variant-numeric: tabular-nums; }
.pic-mac .pmenu { top: 27px; right: 8px; }
.pic-mac .papp { inset: 110px 24px -1px; }
/* ───────────────────────────────────────────── 5. Windows' pictures ───── */
.pic-win .ic-folder { fill: #f2c14e; }
.pic-win .pwin { border-radius: 8px 8px 0 0; }
.pic-win .prow { border-radius: 4px; }
/* The panel Windows puts up before it runs an installer it doesn't know. Its blue is the
thing to recognise, so it's the one block of colour on the page. */
.pic-smart {
padding: 17px 16px 0 18px;
border-color: rgba(255, 255, 255, 0.16);
background: #0a5cad;
color: #fff;
}
.smart-title { margin-bottom: 11px !important; font-size: 15.5px; font-weight: 300; letter-spacing: -0.005em; line-height: 1.15; }
.pic-smart .bar { height: 5px; margin-bottom: 6px; background: rgba(255, 255, 255, 0.4); }
/* One 9s turn: the pointer finds "More info" and presses it, the app's name and "Run
anyway" take its place, and the pointer presses that. The turn ends on the panel as it
stands before the last click, which is also what shows when motion is turned off. */
@keyframes smart-more {
0%, 17% { opacity: 1; }
19% { opacity: 0.55; }
23%, 100% { opacity: 0; }
}
@keyframes smart-in {
0%, 23% { opacity: 0; }
29%, 100% { opacity: 1; }
}
@keyframes smart-run {
0%, 23% { opacity: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
29%, 54% { opacity: 1; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
58% { opacity: 1; background: rgba(255, 255, 255, 0.42); box-shadow: 0 0 0 1.5px #fff; }
64%, 100% { opacity: 1; background: rgba(255, 255, 255, 0.26); box-shadow: 0 0 0 1.5px #fff; }
}
/* "More info" hangs from the top of the panel and the buttons stand on its bottom edge, so
the pointer's two stops are measured from those edges: the picture is taller when the
cards stack. Each stop is just past the words, so the pointer doesn't cover them. */
@keyframes smart-cur {
0% { left: 58%; top: 128px; transform: none; }
13%, 17% { left: 63px; top: 91px; transform: none; }
19% { left: 63px; top: 91px; transform: scale(0.84); }
22%, 36% { left: 63px; top: 91px; transform: none; }
52%, 55% { left: calc(100% - 100px); top: calc(100% - 22px); transform: none; }
58% { left: calc(100% - 100px); top: calc(100% - 22px); transform: scale(0.84); }
62%, 100% { left: calc(100% - 100px); top: calc(100% - 22px); transform: none; }
}
.smart-more {
position: absolute;
left: 18px;
top: 82px;
font-size: 11.5px;
text-decoration: underline;
text-underline-offset: 2px;
animation: smart-more 9s linear 1s infinite both;
}
.smart-app {
position: absolute;
left: 18px;
top: 79px;
font-size: 10.5px;
line-height: 1.6;
white-space: nowrap;
animation: smart-in 9s linear 1s infinite both;
}
.smart-app span { display: inline-block; min-width: 60px; }
.smart-btns { position: absolute; right: 13px; bottom: 13px; display: flex; gap: 7px; }
.smart-btns b {
padding: 6px 12px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
font-size: 10.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
.smart-run { animation: smart-run 9s linear 1s infinite both; }
.pcur-smart { animation: smart-cur 9s cubic-bezier(0.45, 0, 0.25, 1) 1s infinite both; }
/* Windows' desk: the taskbar along the bottom, the icon in its corner. */
.pic-pc {
background:
radial-gradient(90% 80% at 70% 118%, rgba(64, 148, 255, 0.42), transparent 62%),
radial-gradient(70% 60% at 10% -10%, rgba(94, 110, 255, 0.2), transparent 64%),
linear-gradient(170deg, #121a2e, #0c1220);
}
.tbar {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
height: 27px;
padding: 0 11px;
background: rgba(22, 24, 32, 0.9);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
font-size: 10.5px;
color: rgba(255, 255, 255, 0.82);
}
.tbar svg { flex: none; fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tbar-chev { width: 11px; height: 11px; }
.tbar-ic { width: 13px; height: 13px; }
.tbar-tray { display: grid; place-items: center; width: 23px; height: 21px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.tbar-tray img { width: 14px; height: 14px; }
.tbar-clock { font-variant-numeric: tabular-nums; }
.pic-pc .pmenu { right: 8px; bottom: 32px; border-radius: 7px; }
.pic-pc .papp { inset: 18px 24px 26px; border-radius: 8px 8px 0 0; }
/* ───────────────────────────────────────────────── 6. The first pack ───── */
.install > section.first { padding: clamp(40px, 5vw, 64px) 0 0; }
.first-panel {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 3fr);
align-items: center;
gap: clamp(22px, 3.4vw, 46px);
padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 38px);
border-radius: 26px;
background:
radial-gradient(520px 300px at 0% 0%, rgba(123, 123, 255, 0.1), transparent 70%),
linear-gradient(168deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
animation: install-rise 0.8s var(--ease) 0.42s both;
}
.first-head .eyebrow { margin-bottom: 11px; }
.first-head h2 { font-size: clamp(25px, 2.6vw, 31px); }
.first-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.first-steps li { padding: 2px 0 2px clamp(16px, 2vw, 26px); border-left: 1px solid var(--line); }
.first-steps li + li { margin-left: clamp(16px, 2vw, 26px); }
.first-top { display: flex; align-items: center; gap: 10px; min-height: 26px; margin-bottom: 11px; }
.first-top .how-word { color: var(--ink); }
.first-steps p { font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
/* ──────────────────────────────────────────────────── 7. Good to know ───── */
.install > section.notes { padding: clamp(34px, 4.4vw, 54px) 0 0; }
.notes-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px clamp(24px, 4vw, 56px);
padding: 0;
list-style: none;
animation: install-rise 0.8s var(--ease) 0.5s both;
}
.notes-list h3 { margin-bottom: 6px; font-size: 15px; letter-spacing: -0.012em; }
.notes-list p { font-size: 14px; line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.notes-more {
display: flex;
flex-wrap: wrap;
gap: 8px 30px;
margin-top: clamp(30px, 4vw, 46px);
padding-top: 20px;
border-top: 1px solid var(--line-soft);
font-size: 13.5px;
color: var(--ink-3);
animation: install-rise 0.8s var(--ease) 0.56s both;
}
.notes-more a { color: var(--ink-2); }
.notes-more a:hover { color: var(--ink); }
/* ───────────────────────────────────────────── 8. Responsive + motion ───── */
@media (max-width: 980px) {
/* The cards stack in one column, 560px at most (styles.css), and everything under them
keeps to that column. Each picture gets room to be a little taller. */
.pic { height: 190px; }
.first-panel, .notes-list, .notes-more { max-width: 560px; }
.first-panel { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
.first-head h2 br { display: none; }
.first-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.first-steps li, .first-steps li + li { margin-left: 0; padding-left: 16px; }
.notes-list { grid-template-columns: minmax(0, 1fr); }
.notes-more { flex-direction: column; }
}
@media (max-width: 640px) {
.install-sub { font-size: 16px; }
.pwin { inset: 22px 16px -1px; }
.pic-dmg .pwin { inset: 16px 12px -1px; }
}
/* styles.css stops every animation at its last frame when motion is turned off. The
pictures' last frames are the ones worth reading: the slots and the arrow, and the blue
panel with "Run anyway" in it. */
@media (prefers-reduced-motion: reduce) {
.pcur-open { animation: none; }
}