/* Work-safe mode — see js/sfw.js for what it is and is not. * * Everything here hangs off one attribute on , set once at boot. No * runtime repaint path exists because the toggle reloads, so a rule can be * written as if the mode never changes. * * Two jobs. The palette is the visible one: gold on near-black, with colour * removed everywhere else. The functional one is that removing colour IS most * of the safety — a doll photograph at card size stops reading as skin the * moment its tones go, and reads as a shop mannequin instead. The blur on top * is belt and braces for the photographs that are still obvious in monochrome. */ :root[data-sfw="1"] { --color-bg: #0b0b0c; --color-bg-elevated: #141416; --color-bg-card: #161618; --color-bg-header: #101011; --color-bg-warm: #f4f2ec; --color-surface: #202023; --color-text-primary: #ece9e2; --color-text-secondary: #a3a099; --color-text-muted: #7c7a74; --color-border: #2b2b2f; --color-border-light: #1d1d20; --color-accent: #c9a227; --color-accent-hover: #dcb437; --color-accent-light: rgba(201, 162, 39, 0.14); } /* Every image is treated as a photograph unless it is named safe below. * * The first version was the other way round — a hand-written list of photo * classes — and it was incomplete the moment it was written: it missed * `.collection-card-cover` and `.sc-art`, so the collections directory and the * scratch card came through untouched. An allowlist of surfaces has to be * maintained by whoever adds the next one; a denylist of the handful that are * genuinely safe does not, and a surface written next month is covered without * anyone reading this file. * * Inline icons are unaffected either way: they are not . */ :root[data-sfw="1"] img { filter: grayscale(1) contrast(0.85) blur(10px); /* The blur samples past the edge and leaves a pale halo; overscanning hides it without changing the box the layout already reserved. */ transform: scale(1.08); } /* Brand marks: colour off, nothing else. A wordmark is the one image on a card that was already safe, and keeping it legible is what lets someone tell the brands apart while browsing — which is the entire point of the mode. */ :root[data-sfw="1"] .company-logo, :root[data-sfw="1"] .detail-logo, :root[data-sfw="1"] .product-company-logo, :root[data-sfw="1"] .ab-crest img, :root[data-sfw="1"] .site-logo img, :root[data-sfw="1"] img[src$=".svg"] { filter: grayscale(1); transform: none; } /* Photographs sit in boxes sized for them, so the overscan above would spill past a rounded corner without this. */ :root[data-sfw="1"] .card-hero, :root[data-sfw="1"] .detail-hero-banner, :root[data-sfw="1"] .ab-art, :root[data-sfw="1"] .sc-art, :root[data-sfw="1"] .collection-card-cover, :root[data-sfw="1"] .discovery-hero-preview { overflow: hidden; } /* The mascot keeps her own colours. She is drawn art in a habit, she is the one thing on the page that is unambiguously safe, and draining her would make the mode look broken rather than deliberate. */ :root[data-sfw="1"] .mascot img { filter: none; transform: none; } /* The header toggle. Reads as on/off rather than as a link, because it is the only control on the page that changes what everything else looks like. */ .sfw-toggle-state { margin-left: auto; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; color: var(--color-text-muted); } :root[data-sfw="1"] .sfw-toggle-state { color: var(--color-accent); } /* A quiet standing reminder that what is on screen is not what is in the data. Without it the blur reads as broken images. */ :root[data-sfw="1"] body::after { content: "Work-safe view"; position: fixed; right: 0.75rem; bottom: 0.75rem; z-index: 60; padding: 0.3rem 0.6rem; border: 1px solid var(--color-accent); border-radius: var(--border-radius-sm); background: var(--color-bg-elevated); color: var(--color-accent); font-size: var(--font-size-xs); letter-spacing: 0.05em; pointer-events: none; opacity: 0.85; } @media (max-width: 640px) { :root[data-sfw="1"] body::after { display: none; } }