/* The two boot cards. Deliberately quiet: the mountain is the product. PROMOTED to bench source by specs/0003 (was tools/export-red-dog/templates/). It is ordinary player CSS now: edit it HERE, commit, bump the exporter pin. */ /* While the intro owns the screen, NOTHING else is on it: not the legacy pause panel (the desktop game boots paused, so that panel is up by default and it z-fights straight through the card), and not the instrument HUD either. The first impression is the mountain and four keys. `intro-up` is set in the static markup so there is no frame where any of it can flash, and intro.js clears it when you drop in. This is deliberately STRUCTURAL rather than a list of class names. The first attempt hid `.ppause` and `.phud` and still left `T · fast travel` (the marker prompt, a hidden feature, advertising itself) on the boot screen. The rule below says what is actually meant — during the intro the screen is the mountain and the card, full stop — so anything a later re-bake adds to the page is covered without anyone remembering to come back here. */ body.intro-up > *:not(canvas):not(.intro):not(.pboot) { display: none !important; } /* ------------------------------------------------- clean-frame mode (js/play/clean.js) The secret H key: every overlay off, so the mountain can be recorded. STRUCTURAL, and for the same reason the rule above it is. The first instinct is a list — `.phud, .pspeedo, .pmk, .gd` — and a list is exactly what left `T · fast travel` on the boot screen when this file's other rule was a list. What is meant is "during a clean frame the screen is the mountain, full stop", so that is what is written, and anything a later re-bake adds to the page is covered without anyone remembering to come back here. `.pfail` and `.pboot` are the two carve-outs and they are not negotiable: an INVISIBLE toggle must never be able to hide the card that says why the game did not start. A player who cannot see the error and cannot see the key that caused it has a broken game, not a clean frame. The second rule is the belt to that brace. Every overlay this build ships is a direct child of today, but `.pmk-aim` is already built-and-detached and a future re-bake could just as easily nest one of these inside another element — at which point the child combinator would quietly stop covering it and H would leave a card on Greg's video. Naming them again, unscoped, costs one rule and removes that whole class of silent miss. */ body.clean-frame > *:not(canvas):not(.pfail):not(.pboot) { display: none !important; } body.clean-frame .phud, body.clean-frame .pspeedo, body.clean-frame .pidle, body.clean-frame .gd, body.clean-frame .pmk, body.clean-frame .pmk-aim, body.clean-frame .pmk-flash { display: none !important; } .intro { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); /* The card is light text over a SNOW FIELD — the brightest possible ground. A gentle vignette is not enough: measured against the spawn frame, the controls rows and the attribution line both washed out. Two layers, so the text sits on a soft plate without the card ever growing a visible edge. */ background: radial-gradient(38% 30% at 50% 46%, rgba(10, 12, 16, 0.52) 0%, rgba(10, 12, 16, 0) 100%), radial-gradient(120% 90% at 50% 42%, rgba(12, 14, 18, 0.26) 0%, rgba(12, 14, 18, 0.6) 100%); opacity: 0; transition: opacity 620ms ease; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; } .intro.is-in { opacity: 1; } .intro.is-out { opacity: 0; transition-duration: 300ms; } .intro__card { max-width: 30rem; text-align: center; color: #f4f6f8; text-shadow: 0 1px 22px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8); animation: intro-rise 640ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes intro-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .intro__h1 { margin: 0; font: 700 clamp(1.9rem, 7vw, 3.1rem) / 1.02 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.14em; text-indent: 0.14em; } .intro__h2 { margin: 0 0 1.1rem; font: 600 0.78rem / 1 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.34em; text-indent: 0.34em; opacity: 0.72; } .intro__sub { margin: 0.85rem 0 0; font: 400 clamp(0.86rem, 2.6vw, 1rem) / 1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.05em; opacity: 0.92; } .intro__keys { display: grid; grid-template-columns: auto auto; gap: 0.5rem 1.1rem; justify-content: center; align-items: baseline; margin: 0 auto; } .intro__cap { justify-self: end; font: 600 0.82rem / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; color: #ffd9c4; } .intro__what { justify-self: start; font: 400 0.82rem / 1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.03em; opacity: 0.95; } .intro__go { margin: 1.5rem 0 0; font: 500 0.74rem / 1 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.22em; text-indent: 0.22em; color: #ff8d4d; animation: intro-pulse 2.2s ease-in-out infinite; } @keyframes intro-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } .intro__credit { margin: 1.6rem 0 0; font: 400 0.63rem / 1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.045em; opacity: 0.78; } /* the pause panel carries the same line (ODbL travels with the artifact) */ .ppause__credit { margin-top: 0.9rem; font-size: 0.66rem; letter-spacing: 0.04em; opacity: 0.62; } /* ---------------------------------------------------------------- the idle nudge (idle.js). Stop moving for seven seconds and the game offers R. Deliberately the SAME OBJECT as the rest of the key language on this screen: a `.pkey` chip's plate, a `.pkey b` cap for the letter, `.phud__prompt`'s accent border and centre column. It is one notch quieter than the boarding prompt — smaller, lower, no accent fill on the cap — because the boarding prompt announces something you can do RIGHT HERE and this only says the key you already have is still there. It sits low-centre: above the legend strip's row, below the crosshair and well clear of `.phud__prompt` (which lives 26 px BELOW screen centre), so the two can never overlap even if a player manages to be idle on a boarding circle — which idle.js suppresses anyway. */ .pidle { position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%); z-index: 30; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; pointer-events: none; background: rgba(23, 22, 20, 0.82); border: 1px solid rgba(255, 77, 0, 0.55); border-radius: 4px; padding: 6px 11px; color: #f4f1ea; font: 700 10px / 1.5 ui-monospace, "Cascadia Mono", Consolas, "Segoe UI Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity 420ms ease; } /* `display: inline-flex` above outranks the UA's [hidden] rule — the same trap `.phud__ref` and `.phud__prompt` already carry a note about in play.css — and here it would be worse than a cosmetic bug: `hidden` is what keeps this line out of document.body.innerText, so a banner that ignored it would read as "on the screen" forever. */ .pidle[hidden] { display: none; } .pidle.is-on { opacity: 1; } .pidle b { color: #f4f1ea; background: rgba(244, 241, 234, 0.13); border-radius: 2px; padding: 1px 5px; letter-spacing: 0.06em; } /* D16.2 — the respawn fence fades the screen out and back */ .fence-fade { position: fixed; inset: 0; z-index: 35; background: #f7fbff; opacity: 0; pointer-events: none; transition: opacity 260ms linear; } .fence-fade.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .intro, .intro__card, .intro__go, .fence-fade, .pidle { animation: none !important; transition-duration: 1ms !important; } }