stops being a page and becomes the DESKTOP: a fixed, dithered surface below the menu bar. Each section of the site is moved into its own .mac-window, absolutely positioned inside it. Anything on the desktop that isn't a window or the icon layer is hidden, so a section that hasn't been opened yet simply waits out of sight. THE ANCHOR RULE — all *content* styling hangs off .mac-win-body, NOT off main. That matters: the blanket reset below strips colour, radius and shadow from everything it covers, and anchoring it to the window body is what keeps it away from the window chrome. Move a content rule back onto `main` and it will either do nothing or repaint the desktop. TYPEFACE — a deliberate departure from strict authenticity: The chrome originally used a pixel revival of Susan Kare's Chicago. It was accurate but hard to read on modern displays at UI sizes, so the whole skin now runs on Verdana — Matthew Carter, 1996, the same year as 7.5.3, drawn specifically for on-screen legibility. Chrome is bold Verdana, content is regular Verdana. No webfont is downloaded: this costs zero bytes and reads cleanly at every size. COLOUR — 8-bit era. Windows and their content are black on white, exactly like a real Finder/document window. Colour lives where the Mac put it: the desktop pattern, the icons, the Apple logo, and selection highlights. Blended shades are faked with ordered DITHER (2px checkerboards) rather than smooth gradients. ========================================================================== */ /* ---- [TOKENS] ------------------------------------------------------------ */ html.mac-os, html.mac-os-pending { /* One family for the whole skin; weight separates chrome from content. */ --mac-geneva: 'Verdana', 'Geneva', 'Tahoma', 'DejaVu Sans', sans-serif; --mac-ui: 'Verdana', 'Geneva', 'Tahoma', 'DejaVu Sans', sans-serif; --mac-ui-size: 12px; --mac-black: #000000; --mac-white: #ffffff; --mac-face: #cccccc; --mac-face-hi: #eeeeee; --mac-desk-a: #8fa3a3; /* desktop dither pair — muted teal-grey */ --mac-desk-b: #6f8888; --mac-hi: #b7c9ef; /* selection highlight */ --mac-target: 44px; /* accessible hit area around the 11px-era glyphs */ } /* ---- [PRE-PAINT RESTORE] ------------------------------------------------- The head bootstrap applies this temporary state while the full runtime at the end of is still loading. Show only the desktop pattern so the ordinary site cannot flash between same-origin page navigations. */ html.mac-os-pending, html.mac-os-pending body { height: 100%; overflow: hidden; background-color: var(--mac-desk-a); background-image: linear-gradient(45deg, var(--mac-desk-b) 25%, transparent 25% 75%, var(--mac-desk-b) 75%), linear-gradient(45deg, var(--mac-desk-b) 25%, transparent 25% 75%, var(--mac-desk-b) 75%); background-size: 2px 2px; background-position: 0 0, 1px 1px; } html.mac-os-pending #app { visibility: hidden; } /* Chrome type: menu bar, window titles, menus, buttons. */ html.mac-os .mac-ui { font-family: var(--mac-ui); font-size: var(--mac-ui-size); font-weight: 700; line-height: 1; } /* ---- [DESKTOP] ----------------------------------------------------------- */ html.mac-os, html.mac-os body { height: 100%; overflow: hidden; /* windows scroll, the page never does */ background-color: var(--mac-desk-a); background-image: linear-gradient(45deg, var(--mac-desk-b) 25%, transparent 25% 75%, var(--mac-desk-b) 75%), linear-gradient(45deg, var(--mac-desk-b) 25%, transparent 25% 75%, var(--mac-desk-b) 75%); background-size: 2px 2px; background-position: 0 0, 1px 1px; font-family: var(--mac-geneva); } html.mac-os #app { display: block; min-height: 0; } /* Only the PAGE's own header and footer, never a