/* =========================================================================== THE WORDMARK, AND THE TWO COLOURS IT IS MADE OF =========================================================================== Gold and royal purple, on Josh's instruction. This file exists because the mark is on seven pages and a colour with seven copies is a colour that will disagree with itself the first time one of them is adjusted — the same argument the 12 m grid gets in CLAUDE.md, at a smaller stake. One definition, linked, and scripts/verify.py reads linked stylesheets when it checks that every var() resolves, so a page that uses the mark without loading this file fails loudly instead of rendering a colourless heading. --royal is violet-400 rather than a true royal purple. Measured against this app's near-black ground, the deep tone renders as a dark smudge at 10px and disappears entirely inside the wordmark's gradient. The deep one is kept for rules, glows and edges, where there is a lit surface behind it and it reads as purple rather than as absence. THE MARK IS ALWAYS THE WAY HOME. index.html calls openIntro() on every load, so any href to it lands on the overlay — which is what makes an ordinary link enough here, and why this is an on the sibling pages and a click handler only on the map, where there is no page to navigate to. =========================================================================== */ :root { --gold:#e9c46a; --gold-hi:#ffe9b5; --royal:#a78bfa; --royal-deep:#6d28d9; } /* The sibling pages' copy: a link, sized to sit in the kicker line above the page's own title rather than competing with it. index.html styles its two with #title .wm and #intro h1, because there the mark carries the app's glyph beside it and is the largest thing on the screen. */ .wordmark { display:inline-block; margin-right:.7em; font-weight:500; letter-spacing:.34em; text-transform:uppercase; text-decoration:none; color:var(--gold); background:linear-gradient(100deg, var(--gold) 0%, var(--gold-hi) 24%, var(--royal) 78%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; border-bottom:1px solid var(--royal-deep); padding-bottom:2px; } @media (hover:hover) { .wordmark:hover { border-bottom-color:var(--gold); } } /* =========================================================================== THE GOLD EDGE =========================================================================== Josh: "one more shiny gold line around the peremiter of the iphone screen." On body::after rather than as an element, because it belongs to every page that wears the mark and adding a
to seven files is seven chances to forget one. A pseudo-element on the element every page already has cannot be forgotten, and it arrives with the stylesheet that defines the colour it is drawn in. THE GRADIENT IS A MASK, NOT A BORDER. `border: 2px solid` takes one colour, and a metal edge is the same colour catching the light differently along its length — gold at the top, deepening to royal at the bottom right, back to the pale gold. So the element is filled with the gradient and then masked to its own 2 px rim: paint the whole box, subtract the middle, and what is left is the frame. mask-composite is the standard way and Safari has had the -webkit- form since 15. inset: env(safe-area-inset-*) because an iPhone's screen is not a rectangle. Drawn at inset:0 the line runs under the notch and is sliced off by the corner radius; drawn inside the safe area it sits where the glass actually is. The 14 px radius is the corner it is sitting inside. pointer-events:none, and that is not decoration either — this covers the entire viewport at z-index 500, above the plate and the door and the nav. Without it, it is a sheet of glass over the whole app. =========================================================================== */ body::after { content: ''; position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); z-index: 500; pointer-events: none; border-radius: 14px; /* THE FLOOR, AND IT IS DRAWN FIRST ON PURPOSE. A plain gold line, from a property every engine has had for twenty years. The gradient version below replaces it where the mask is supported; if it is not, or if it ever breaks again, what is left is still a gold line rather than nothing — which is what the first attempt at this shipped: the two mask shorthands reset each other's composite and the whole frame vanished. */ border: 2px solid var(--gold); /* The shine: a soft gold bloom just inside the line, so the edge reads as lit rather than as a 2 px rectangle drawn on top of the app. */ box-shadow: inset 0 0 14px -4px rgba(233, 196, 106, .55); } /* THE GRADIENT IS A MASK, NOT A BORDER. `border` takes one colour, and a metal edge is one colour catching the light differently along its length — pale gold at the top, deepening through royal, back to gold. So the box is filled with the gradient and then masked to its own 2 px rim: paint the whole box, subtract the middle, keep the frame. Both shorthands are set before either composite. Written the other way — one shorthand, its composite, then the second shorthand — the second shorthand resets the composite that was just set, the mask falls back to `add`, the two layers cover the whole element and everything is subtracted. Measured on iOS 26: no frame at all. */ @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { body::after { border: 0; padding: 2px; background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 22%, var(--royal) 52%, var(--gold) 78%, var(--gold-hi) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } }