style.css

/* Shred — companion site
 *
 * Three colours and one accent. The accent is the app's own copper, taken from the exact values in
 * Design/Theme.swift, so someone arriving from the App Store listing recognises the thing they are
 * about to install; everything else is a neutral warmed very slightly toward it, because a pure
 * grey beside copper reads as blue.
 *
 * Set in system-ui on purpose. On an iPhone that resolves to SF, which is the face the app itself
 * is set in — a webfont would make the page look less like the product, not more, and would cost a
 * network round trip on a page whose job is partly to be readable on a bad connection.
 *
 * The screenshots are dark in both themes. The app is a dark product, they read well on either
 * ground, and carrying a light set would double the assets to serve a case nobody asked for.
 */

:root {
  color-scheme: light dark;

  --bg: #FBFAF8;
  --surface: #F2EFEB;
  --fg: #16150F;
  --fg-2: #6B665E;
  --accent: #A85A22;
  --line: rgba(0, 0, 0, 0.08);
  --shot-shadow: rgba(20, 16, 10, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08080C;
    --surface: #121218;
    --fg: #ECE8E2;
    --fg-2: #948F88;
    --accent: #E08A4A;
    --line: rgba(255, 255, 255, 0.09);
    --shot-shadow: rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* `padding-inline`, not the `padding` shorthand, and every block that also carries `.wrap` sets
   only `padding-block`. Both halves matter. `.hero`, `.gallery` and `.doc` are applied to the same
   elements as this rule, at the same specificity, later in the file - so while they set padding
   with the shorthand they were resetting the horizontal value here to zero, and the landing page,
   the policy and the support page all ran their text and screenshots flush into the edge of a
   phone. On a wide window nothing showed, because `max-width` and `auto` margins were doing the
   insetting instead. */
.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  /* Grows with the viewport rather than sitting at a fixed 24px, so a small phone keeps a real
     margin instead of the minimum one. */
  padding-inline: clamp(22px, 6vw, 32px);
}
.narrow { max-width: 42rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Header ---------------------------------------------------------- */

.site-head { border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; height: 68px; gap: 24px; }

.wordmark {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3em;
  color: var(--fg);
  text-decoration: none;
}
.site-head nav { margin-left: auto; display: flex; gap: 22px; }
.site-head nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}
.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--fg); }

/* ---- Hero ------------------------------------------------------------ */

.hero { padding-block: 92px 24px; }
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1fr 340px; gap: 72px; }
}
/* Grid items default to `min-width: auto`, which lets a long unbreakable word or an oversized
   child push the track wider than the page. */
.hero-grid > * { min-width: 0; }

.hero h1 {
  /* The lower bound is what a 390px phone actually gets, and 2.5rem was wider than that column
     for this headline - the first line overflowed the viewport and took the page's horizontal
     scroll with it. */
  font-size: clamp(2.1rem, 8vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hero .lede {
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  line-height: 1.5;
  color: var(--fg-2);
  margin: 0 0 34px;
  max-width: 32rem;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--accent);
  margin: 0 0 20px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
}
.status .dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* One soft ring every few seconds, like a status light rather than an alarm. CSS, not GSAP, on
   purpose: it needs no scroll logic, it runs without JS, and the reduced-motion block above
   already knows how to kill a CSS animation. */
.status .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-ping 3.6s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite;
}
@keyframes dot-ping {
  0% { transform: scale(1); opacity: 0.7; }
  24% { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* The drawn underline in the headline. Static by default — a page with no JS keeps the complete
   stroke — and js/site.js draws it in on arrival by scaling the svg out from the left.
   `non-scaling-stroke` keeps the line's weight constant while the viewBox stretches to whatever
   width the word happens to be. */
.uline { position: relative; white-space: nowrap; }
.uline svg {
  position: absolute;
  left: -1%;
  bottom: -0.1em;
  width: 102%;
  height: 0.16em;
  overflow: visible;
}
.uline path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}

/* ---- Screenshots ----------------------------------------------------- */

/* A rounded frame and a shadow, and nothing else. Used where a capture stands on its own, in the
   gallery, where three drawn bezels in a row would be chrome around chrome. The hero and the watch
   row get real devices instead — see below. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -24px var(--shot-shadow);
}

/* ---- Devices ---------------------------------------------------------- */

/* Drawn rather than photographed. A tilted render is a 300 KB image that fits one page width and
 * one theme; these reflow, stay sharp at any density, and the screenshot inside is the app's own
 * pixels at 2x, untouched.
 *
 * Every proportion is the iPhone 17 Pro Max's, the device the captures came from. Across its
 * width: a thin titanium rail, then black glass, then the display. The corner is anchored on the
 * display, whose radius is near enough a seventh of its width; the layers outside add their own
 * thickness to it. Getting that black border and that radius right is most of what makes this read
 * as a phone rather than as a rounded rectangle.
 */
.phone {
  --ry: 0deg;                   /* turn */
  --rx: 0deg;                   /* tip back */
  --rz: 0deg;                   /* the hand is never quite level */
  --depth: 0px;
  --edge: none;                 /* the side wall only exists once it turns */
  position: relative;
  width: 100%;
  max-width: 340px;
  /* Long, like a product shot on a 100mm lens. A short perspective splays the near edge and reads
     as a video game asset. */
  perspective: 2400px;
  perspective-origin: 50% 42%;
}
.phone.near-left { --ry: -15deg; --rx: 4deg; --rz: 1.2deg; --depth: 15px; --edge: block; }

.phone-body {
  position: relative;
  padding: 1.29%;
  border-radius: 16.2% / 7.77%;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
  background:
    /* The two antenna splits, on the rail and covered by the glass across the middle, which is
       where they are on the real thing. */
    linear-gradient(180deg, transparent 12.2%, rgba(255, 255, 255, 0.5) 12.2% 12.42%, transparent 12.42%),
    linear-gradient(180deg, transparent 87.4%, rgba(255, 255, 255, 0.5) 87.4% 87.62%, transparent 87.62%),
    /* Brushed titanium. Enough stops for two specular bands and a dark side; a three-stop gradient
       looks like plastic. */
    linear-gradient(147deg,
      #F4F1EC 0%, #BCB8B0 7%, #8B877F 16%, #E2DED7 26%, #A5A19A 36%,
      #6E6A64 48%, #CFCBC4 60%, #969289 71%, #E8E4DD 83%, #A9A59D 93%, #7A766E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),      /* the chamfer catching light */
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.10),          /* and turning away again */
    0 1px 2px rgba(0, 0, 0, 0.24),
    0 34px 56px -30px var(--shot-shadow),
    0 80px 90px -56px var(--shot-shadow);
}

/* An iPhone corner is a superellipse, not a circular arc, and the difference shows up as the black
   border looking fatter at 45 degrees than along the edges. Browsers that can draw one get the
   real shape; the rest keep the arc, which nobody who has not measured it will notice. */
@supports (corner-shape: squircle) {
  .phone-body,
  .phone-edge,
  .phone-glass,
  .phone-screen { corner-shape: squircle; }
}

/* Plates stacked behind the front face give the body a side wall when it turns. One plate alone
   leaves a hollow you can see through. They switch off on a phone facing you, which has no visible
   side: left on, they land in the front face's plane and, being later in the DOM, paint over the
   rail. */
.phone-edge {
  display: var(--edge);
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateZ(calc(var(--depth) * var(--z) * -1));
  background: linear-gradient(90deg, #A29E95, #625F57 38%, #55524B 62%, #918D84);
}

/* The black border between the rail and the display. Leaving this out is the single thing that
   makes a CSS phone look like a screenshot with rounded corners. */
.phone-glass {
  position: relative;
  padding: 1.98%;
  border-radius: 15.5% / 7.3%;
  background: #06070B;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.16),
              inset 0 1px 1px rgba(255, 255, 255, 0.10);
}

.phone-screen {
  position: relative;
  overflow: hidden;
  border-radius: 14.1% / 6.5%;
  background: #000;
}
.phone-screen img { display: block; width: 100%; height: auto; }

.phone-island {
  position: absolute;
  top: 1.15%;
  left: 50%;
  width: 28.4%;
  aspect-ratio: 125 / 36;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
}

/* One soft band across the glass at the angle the body is turned. Kept low: a convincing
   reflection is one you have to look for. */
.phone-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255, 255, 255, 0.26) 0%,
    rgba(255, 255, 255, 0.08) 14%,
    rgba(255, 255, 255, 0) 29%,
    rgba(255, 255, 255, 0) 64%,
    rgba(255, 255, 255, 0.10) 77%,
    rgba(255, 255, 255, 0) 91%);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.22);
}

/* Both key clusters are one element each, carved into buttons by hard gradient stops. */
.phone-keys,
.phone-power {
  position: absolute;
  width: 1.5%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.28);
}
.phone-keys {
  left: -0.72%;
  top: 19.6%;
  height: 18.6%;
  background: linear-gradient(180deg,
    #A6A29A 0 18.3%, transparent 18.3% 32.3%,
    #A6A29A 32.3% 62.4%, transparent 62.4% 69.9%,
    #A6A29A 69.9% 100%);
}
.phone-power {
  right: -0.72%;
  top: 25.5%;
  height: 19.1%;
  background: linear-gradient(180deg,
    #A6A29A 0 43.5%, transparent 43.5% 81.2%,
    #C2BEB6 81.2% 100%);
}

/* The tilt is a flourish, and a flourish that costs legibility on a 390px screen is not worth
   keeping, so toward the narrow end the phone straightens up. */
@media (max-width: 899px) {
  .phone { margin: 0 auto; }
  .phone.near-left { --ry: -8deg; --rx: 3deg; --rz: 0.7deg; --depth: 10px; }
}
@media (max-width: 560px) {
  .phone { max-width: 292px; }
  .phone.near-left { --ry: -5deg; --rx: 2deg; --rz: 0.4deg; --depth: 7px; }
}

/* The watch. Series 11 46mm, which is what `watch-screenshots.sh` captures.
 *
 * Same construction as the phone and deliberately so - one rail, one black border, one display -
 * because the two sit on the same page and a watch drawn to a different recipe reads as a sticker
 * beside a photograph. What changes is the proportion: the case is far rounder than a phone, the
 * bezel is much thicker relative to the screen, and the crown and side button are on the right.
 *
 * The 46mm case is 39mm across and 46mm tall with a 416 x 496 display, which is where the 7%
 * padding and the flattened radius below come from.
 */
.watch {
  position: relative;
  width: 100%;
  max-width: 208px;
  margin: 0 auto;
}

.watch-body {
  position: relative;
  padding: 7.2% 6.8%;
  border-radius: 32% / 27%;
  background: linear-gradient(150deg,
    #E9E5DF 0%, #B4B0A8 9%, #83807A 19%, #DAD6CF 30%, #9C9992 41%,
    #67645F 53%, #C7C3BC 65%, #8E8B84 76%, #E0DCD5 87%, #A19E97 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 0 0 2.5px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 22px 40px -22px var(--shot-shadow);
}

@supports (corner-shape: squircle) {
  .watch-body,
  .watch-screen { corner-shape: squircle; }
}

/* Rounder than the case, as it is on the watch, and black so the display's own dark ground runs
   into the bezel with no seam. */
.watch-screen {
  position: relative;
  overflow: hidden;
  border-radius: 24% / 20%;
  background: #000;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
.watch-screen img { display: block; width: 100%; height: auto; }

.watch-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Lower than the phone's. A watch screen is a fifth of the area, so the same band covers a
     quarter of the page it is sitting on and stops reading as a reflection. */
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 14%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.05) 84%,
    rgba(255, 255, 255, 0) 95%);
}

/* The crown is a stack of hard stops rather than a drawn groove: at this size the ridges are two
   pixels each and a gradient is the only thing that stays honest when the page is zoomed. */
.watch-crown,
.watch-button {
  position: absolute;
  right: -1.6%;
  width: 3.4%;
  border-radius: 2px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.3);
}
.watch-crown {
  top: 30%;
  height: 13%;
  background: linear-gradient(180deg,
    #6E6B65 0 12%, #CFCBC4 12% 24%, #7A776F 24% 36%, #D6D2CB 36% 48%,
    #7A776F 48% 60%, #D6D2CB 60% 72%, #7A776F 72% 84%, #B4B0A8 84% 100%);
}
.watch-button {
  top: 50%;
  height: 11%;
  background: linear-gradient(180deg, #B0ACA4, #85827B);
}

/* Three across on a wide page, stacked on a narrow one. */
.wrist { padding-block: 24px 8px; }
.wrist-grid {
  display: grid;
  gap: 44px 28px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 720px) { .wrist-grid { grid-template-columns: repeat(3, 1fr); } }
.wrist figure { margin: 0; }
.wrist figcaption {
  margin-top: 22px;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.5;
  text-align: center;
}
.wrist figcaption b { display: block; color: var(--fg); font-weight: 650; margin-bottom: 2px; }

.gallery { padding-block: 88px 32px; }
.gallery-grid {
  display: grid;
  gap: 44px 32px;
  grid-template-columns: 1fr;
  margin-top: 44px;
}
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery figure { margin: 0; }
.gallery figcaption {
  margin-top: 18px;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.5;
}
.gallery figcaption b {
  display: block;
  color: var(--fg);
  font-weight: 650;
  margin-bottom: 2px;
}

/* ---- Prose ----------------------------------------------------------- */

section { padding: 40px 0; }

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 18px;
  text-wrap: balance;
}
h3 { font-size: 1.02rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -0.012em; }
p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.muted { color: var(--fg-2); }

.points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 30px; }
@media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.points p { font-size: 15.5px; color: var(--fg-2); margin: 0; }

/* ---- Document pages -------------------------------------------------- */

.doc { padding-block: 72px 24px; }
.doc h1 {
  font-size: clamp(2.1rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
}
.doc .lede { color: var(--fg-2); font-size: 1.1rem; margin: 0 0 38px; }
.doc h2 { font-size: 1.2rem; font-weight: 700; margin: 44px 0 12px; letter-spacing: -0.015em; }
.doc p { color: var(--fg); }

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px 28px;
  margin: 0 0 40px;
}
.summary h2 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.summary ul { margin: 0; padding-left: 1.2rem; }
.summary li { margin: 0.6rem 0; color: var(--fg-2); }

.updated { font-size: 14px; color: var(--fg-2); margin: 0 0 38px; }

/* ---- Footer ---------------------------------------------------------- */

.site-foot {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  padding: 32px 0 72px;
  font-size: 15px;
  color: var(--fg-2);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.site-foot nav { margin-left: auto; display: flex; gap: 20px; }
.site-foot a { color: var(--fg-2); text-decoration: none; }
.site-foot a:hover { color: var(--fg); }