/* The legal pages — a document, opened in the August OS. * * The references for this were a footer link column and a two-column FAQ * accordion. What makes those work is not the layout: it is that a long, * boring, obligatory document is made SCANNABLE. You can see the whole shape * before you read a word, jump to the part you came for, and always know * where you are. * * Copying either layout would have been wrong here. An accordion hides legal * text behind a click, which is the opposite of what a legal page owes the * reader — and a page whose terms are collapsed by default reads as though it * would rather you did not. So the principle is borrowed and the form is not: * * discoverability -> a contents rail, always visible, always current * scannability -> numbered sections, generous space, short measure * density -> two columns of contents on a wide screen, one on a * phone, and the text never wider than it should be * rhythm -> every section the same shape, so the eye stops * reading the furniture after the first one * * The rail is a Finder sidebar, because that is what this operating system * would do with a table of contents. It highlights the section you are in. * On a phone it becomes a collapsed summary at the top, which is the one * place a disclosure IS right: the contents are navigation, not terms. */ /* ------------------------------------------------------------- the head */ /* Top and bottom ONLY. The shorthand here set left and right to zero and silently canceled .shell's horizontal padding, putting the title hard against the window edge while the section below it stayed inset. */ .legal-head { padding-top: clamp(3.5rem, 9vh, 6rem); padding-bottom: clamp(1.6rem, 4vh, 2.6rem); } .legal-title { font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1.02; letter-spacing: -.03em; margin: .8rem 0 1rem; } .legal-lede { font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--text-muted); line-height: 1.62; max-width: 46ch; margin: 0 0 1.6rem; } /* The version pill. A legal page that does not say when it started applying is not much use to anyone arguing about a purchase made in March. */ .legal-stamp { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: .68rem; letter-spacing: .04em; color: var(--text-muted); } .legal-stamp b { color: var(--text); font-weight: 650; } .legal-stamp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* --------------------------------------------------------- the document */ .legal-doc { padding-bottom: clamp(4rem, 10vh, 7rem); } .legal-grid { display: grid; gap: clamp(1.6rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .legal-grid { grid-template-columns: 232px minmax(0, 1fr); } } /* ------------------------------------------------------------- the rail */ .legal-rail { position: sticky; top: 88px; } .legal-rail-title { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .7rem .7rem; } .legal-nav { display: flex; flex-direction: column; gap: 1px; } .legal-nav a { display: flex; gap: .6rem; align-items: baseline; padding: .46rem .7rem; border-radius: 9px; font-size: .82rem; line-height: 1.35; color: var(--text-muted); text-decoration: none; transition: background-color .16s ease, color .16s ease; } .legal-nav a:hover { background: var(--surface-2); color: var(--text); } /* .here is set by legal.js as you scroll — "where am I" is the one thing a long document must never make you guess. */ .legal-nav a.here { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .legal-nav .n { flex: none; width: 1.4rem; font-size: .66rem; color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .legal-nav a.here .n { color: var(--accent); } /* On a phone the rail becomes a disclosure. Contents are navigation, so collapsing them is a kindness; collapsing the terms themselves would not be. */ .legal-rail-mobile { margin-bottom: 1.4rem; } .legal-rail-mobile > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); font-size: .84rem; font-weight: 600; } .legal-rail-mobile > summary::-webkit-details-marker { display: none; } .legal-rail-mobile > summary::after { content: "+"; font-size: 1.1rem; color: var(--text-faint); line-height: 1; } .legal-rail-mobile[open] > summary::after { content: "\2212"; } .legal-rail-mobile[open] > summary { border-radius: 13px 13px 0 0; } .legal-rail-mobile .legal-nav { padding: .5rem; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 13px 13px; background: var(--surface); } @media (min-width: 900px) { .legal-rail-mobile { display: none; } } @media (max-width: 899px) { .legal-rail { display: none; } } /* ------------------------------------------------------------- the body */ .legal-body { min-width: 0; } /* One window per group of sections, the same furniture as everything else in August. The window title is the filename it would have on disk. */ .legal-win + .legal-win { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); } .legal-win-body { padding: clamp(1.4rem, 3vw, 2.4rem); } .legal-s + .legal-s { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--border); } /* Anchor landings clear the sticky menu bar. Without this, jumping to a section puts its heading underneath the header, which reads as the link having gone to the wrong place. */ .legal-s { scroll-margin-top: 92px; } .legal-h { display: flex; gap: .8rem; align-items: baseline; font-size: clamp(1.12rem, 2vw, 1.34rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 .9rem; } .legal-h .n { flex: none; font-size: .72rem; font-weight: 700; color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding-top: .22rem; } /* 68 characters. Long enough not to feel like a receipt, short enough that the eye finds the next line without hunting — which is the whole reason anybody finishes a page like this. */ .legal-s p, .legal-s ul, .legal-s ol { max-width: 68ch; } .legal-s p { margin: 0 0 .9rem; line-height: 1.68; color: var(--text-muted); font-size: .95rem; } .legal-s p:last-child, .legal-s ul:last-child { margin-bottom: 0; } .legal-s strong { color: var(--text); font-weight: 620; } .legal-s a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-ring); } .legal-s a:hover { border-bottom-color: var(--accent); } .legal-s ul { margin: 0 0 .9rem; padding: 0; list-style: none; } .legal-s li { position: relative; padding-left: 1.1rem; margin-bottom: .5rem; line-height: 1.62; color: var(--text-muted); font-size: .95rem; } .legal-s li::before { content: ""; position: absolute; left: .1rem; top: .62rem; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); } /* The one thing on the page a reader must not miss, whatever else they skim. */ .legal-key { margin: 1.1rem 0; padding: .95rem 1.1rem; border-radius: 12px; border: 1px solid var(--accent-ring); background: var(--accent-soft); max-width: 68ch; } .legal-key p { color: var(--text); margin: 0; font-size: .92rem; } .legal-key p + p { margin-top: .55rem; } /* Plain facts — who, where, which company — set as a definition list rather than prose, because they are looked UP, not read. */ .legal-facts { display: grid; gap: .1rem; margin: 1.1rem 0 0; max-width: 68ch; } .legal-fact { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; } .legal-fact:last-child { border-bottom: 0; } .legal-fact dt { color: var(--text-faint); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; padding-top: .18rem; } .legal-fact dd { margin: 0; color: var(--text); } @media (max-width: 520px) { .legal-fact { grid-template-columns: minmax(0, 1fr); gap: .15rem; } } /* The closing card: where to write, and the honest note about what this document is. */ .legal-foot-card { margin-top: clamp(1.2rem, 2.4vw, 1.9rem); padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 22px; border: 1px solid var(--border); background: var(--surface-2); } .legal-foot-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; letter-spacing: -.01em; } .legal-foot-card p { margin: 0 0 1rem; color: var(--text-muted); font-size: .92rem; line-height: 1.6; max-width: 58ch; } /* --------------------------------------------- the footer's link columns */ /* The footer is the last thing anyone sees, so it should close the page * rather than pad it. Three things were wrong with the old one, and none of * them was the content: * * the measure the columns ran the full 1480px shell while the copyright * line below them sat in 1060px, so the two halves of the same * footer were not aligned with each other. On a wide screen * that reads as a template stretched to fit. * the weight three identical columns in identical type give the eye no * reason to start anywhere. Library is what people came for. * It can say so without a heading shouting it. * the height padding stacked on margin stacked on padding, so the page * ended in an empty block rather than an ending. * * So: same links, same three groups, rearranged. The heading is the quietest * thing in the column and the links are the loudest, which is the right way * round for something people scan rather than read. */ .foot-cols { position: relative; max-width: 1060px; margin: 0 auto; /* the measure the line below uses */ display: grid; gap: clamp(1.8rem, 4vw, 2.6rem) clamp(1.6rem, 5vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: clamp(2rem, 5vh, 2.7rem) 0 clamp(1.25rem, 2.8vh, 1.65rem); } /* Columns sized to their CONTENT and packed to the left, not stretched to fill the measure. Three equal columns spread across a wide page put a canyon between "VND TypeKit" and "Terms of Service" and make the eye travel for no reason — which is precisely what a template footer looks like. Packed left, the three groups read as one block, and the whitespace collects on the right where it looks deliberate. It also balances: links top-left, social glyphs bottom-right, and the eye crosses once instead of scanning four times. */ @media (min-width: 720px) { .foot-cols { grid-template-columns: repeat(3, max-content); justify-content: start; column-gap: clamp(3rem, 7vw, 6.5rem); } } /* A rule that fades out instead of stopping. A 1px line straight across is the single most template-looking thing a footer can do; letting it dissolve toward the edge closes the section without boxing it in. */ .foot-cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--border-strong) 0%, var(--border) 58%, transparent 100%); } .foot-col-title { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 1.05rem; } .foot-col ul { list-style: none; margin: 0; padding: 0; } .foot-col li { margin-bottom: .5rem; } .foot-col li:last-child { margin-bottom: 0; } .foot-col a { position: relative; display: inline-block; font-size: .875rem; line-height: 1.45; color: var(--text-muted); transition: color .18s ease; } /* The Finder-sidebar tell: a marker that arrives rather than appears, and it HANGS IN THE MARGIN rather than indenting the text. Indenting cost 13.6px, which does not sound like much until you notice that the page above ends in a 1060px window whose left edge the footer is supposed to continue. Text at 204 under a window at 190 is the kind of almost-alignment the eye reads as sloppiness without being able to name it. Hanging the marker outside the text box fixes it and is the older, better typographic answer anyway. */ .foot-col a::before { content: ""; position: absolute; left: -.85rem; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; transform: translateX(-3px); transition: opacity .18s ease, transform .18s ease; } .foot-col a:hover { color: var(--text); } .foot-col a:hover::before { opacity: 1; transform: none; } /* Library reads a half-step louder than the other two. Not a different style — the same style, slightly more present, which is all the hierarchy this needs. */ .foot-col:first-child a { font-size: .92rem; font-weight: 500; } /* ------------------------------------------- the closing line, refined */ /* These override august.css rather than editing it. august.css is frozen against the Gumroad reference and the build diffs every rule in it — which is exactly how the first attempt at this footer got caught. New work goes in a new stylesheet; the check stays meaningful. :not(.queue-foot) because the installation-queue dialog uses