/* ARFOM shared polish (2026-09-26, front-end pass 02). Loaded LAST on every ARFOM page (static /arfom pages via their , PHP pages via arfom_head_meta()). Only rules every Room page shares: 1. one scrollbar treatment: near-black track, charcoal thumb, red on hover/drag, 7px where the browser lets us set a width; 2. one focus ring: the site red, 3px off the element; 3. media interaction that never dims the picture: a red edge and an arrow shift say "this responds", the image stays as delivered. Element-level selectors only, so any page rule written at class level still wins. Nothing here reaches into a provider's iframe. */ :root { --arfom-polish-red: #e6382c; --arfom-sb-track: #0b0b0b; --arfom-sb-thumb: #3b3b3b; --arfom-sb-thumb-active: #e6382c; --arfom-sb-size: 7px; } /* --- 1. scrollbars ------------------------------------------------------ */ /* Standard properties first (Firefox, Chromium 121+, Safari 18.2+ for width). Chromium ignores ::-webkit-scrollbar once scrollbar-color is set, so the pseudo-elements below only reach older WebKit/Blink. Pages that hide a strip's scrollbar do it at class level, which beats these element rules. */ html, body, .queue-list, .room-aside, .personal-sidebar, .viewer-thumbnails, .release-rail, .artist-rail, .scene-filmstrip, dialog, [role="dialog"], .arfom-note-scroll, .file-body, .file-panel, .crew-file, .room-menu, .menu-scroll, .messages-thread, .thread-list, textarea { scrollbar-width: thin; scrollbar-color: var(--arfom-sb-thumb) var(--arfom-sb-track); } html::-webkit-scrollbar, body::-webkit-scrollbar, .queue-list::-webkit-scrollbar, .room-aside::-webkit-scrollbar, .personal-sidebar::-webkit-scrollbar, .viewer-thumbnails::-webkit-scrollbar, .release-rail::-webkit-scrollbar, .artist-rail::-webkit-scrollbar, .scene-filmstrip::-webkit-scrollbar, dialog::-webkit-scrollbar, [role="dialog"]::-webkit-scrollbar, .arfom-note-scroll::-webkit-scrollbar, .file-body::-webkit-scrollbar, .file-panel::-webkit-scrollbar, .crew-file::-webkit-scrollbar, .messages-thread::-webkit-scrollbar, .thread-list::-webkit-scrollbar, textarea::-webkit-scrollbar { width: var(--arfom-sb-size); height: var(--arfom-sb-size); } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .queue-list::-webkit-scrollbar-track, .room-aside::-webkit-scrollbar-track, .personal-sidebar::-webkit-scrollbar-track, .viewer-thumbnails::-webkit-scrollbar-track, .release-rail::-webkit-scrollbar-track, .artist-rail::-webkit-scrollbar-track, .scene-filmstrip::-webkit-scrollbar-track, dialog::-webkit-scrollbar-track, [role="dialog"]::-webkit-scrollbar-track, .arfom-note-scroll::-webkit-scrollbar-track, .file-body::-webkit-scrollbar-track, .file-panel::-webkit-scrollbar-track, .crew-file::-webkit-scrollbar-track, .messages-thread::-webkit-scrollbar-track, .thread-list::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track { background: var(--arfom-sb-track); border-radius: 4px; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .queue-list::-webkit-scrollbar-thumb, .room-aside::-webkit-scrollbar-thumb, .personal-sidebar::-webkit-scrollbar-thumb, .viewer-thumbnails::-webkit-scrollbar-thumb, .release-rail::-webkit-scrollbar-thumb, .artist-rail::-webkit-scrollbar-thumb, .scene-filmstrip::-webkit-scrollbar-thumb, dialog::-webkit-scrollbar-thumb, [role="dialog"]::-webkit-scrollbar-thumb, .arfom-note-scroll::-webkit-scrollbar-thumb, .file-body::-webkit-scrollbar-thumb, .file-panel::-webkit-scrollbar-thumb, .crew-file::-webkit-scrollbar-thumb, .messages-thread::-webkit-scrollbar-thumb, .thread-list::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb { background: var(--arfom-sb-thumb); border-radius: 4px; border: 1px solid var(--arfom-sb-track); } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .queue-list::-webkit-scrollbar-thumb:hover, .room-aside::-webkit-scrollbar-thumb:hover, .personal-sidebar::-webkit-scrollbar-thumb:hover, .viewer-thumbnails::-webkit-scrollbar-thumb:hover, .release-rail::-webkit-scrollbar-thumb:hover, .artist-rail::-webkit-scrollbar-thumb:hover, .scene-filmstrip::-webkit-scrollbar-thumb:hover, dialog::-webkit-scrollbar-thumb:hover, [role="dialog"]::-webkit-scrollbar-thumb:hover, .arfom-note-scroll::-webkit-scrollbar-thumb:hover, .file-body::-webkit-scrollbar-thumb:hover, .file-panel::-webkit-scrollbar-thumb:hover, .crew-file::-webkit-scrollbar-thumb:hover, .messages-thread::-webkit-scrollbar-thumb:hover, .thread-list::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active, .queue-list::-webkit-scrollbar-thumb:active, .room-aside::-webkit-scrollbar-thumb:active, .personal-sidebar::-webkit-scrollbar-thumb:active, .viewer-thumbnails::-webkit-scrollbar-thumb:active, dialog::-webkit-scrollbar-thumb:active, .arfom-note-scroll::-webkit-scrollbar-thumb:active { background: var(--arfom-sb-thumb-active); } html::-webkit-scrollbar-corner, .queue-list::-webkit-scrollbar-corner, dialog::-webkit-scrollbar-corner { background: var(--arfom-sb-track); } /* Firefox has no hover colour for the thumb; a scrolling inner area lights up as a whole instead. */ @supports not selector(::-webkit-scrollbar) { .queue-list:hover, .room-aside:hover, .personal-sidebar:hover, .viewer-thumbnails:hover, .release-rail:hover, .artist-rail:hover, .scene-filmstrip:hover { scrollbar-color: var(--arfom-sb-thumb-active) var(--arfom-sb-track); } } /* --- 2. focus ----------------------------------------------------------- */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--arfom-polish-red); outline-offset: 3px; } /* --- 3. media never waits for a hover ----------------------------------- */ /* The rules that dimmed or desaturated previews at rest were removed from each page's own stylesheet (film, menu, scenes, room, listen, gallery, punch, creative-reel). This guards the principle at element level for anything a page adds later: pictures and video start at full strength. */ img, video { transition-property: transform, opacity, filter, border-color, box-shadow; } @media (prefers-reduced-motion: reduce) { img, video, a, button { transition: none !important; } } /* --- 4. one page title (2026-09-27) ---------------------------------------- */ /* Film and Music are the standard. Artists, Scenes and Gallery draw the same title: Oswald 500, the same clamp, the same tracking, off-white with a red full stop in a . Class+element selectors at (0,1,1), loaded last, so each page's own rule yields without !important. */ .film-heading h1, .listen-heading h1, .crew-heading h1, .gallery-masthead h1, .scenes-masthead h1 { font: 500 clamp(56px, 6.5vw, 100px)/1 Oswald, 'Arial Narrow', sans-serif; letter-spacing: -.035em; text-transform: uppercase; color: #eeeae3; margin: 0; } .film-heading h1 > span, .listen-heading h1 > span, .crew-heading h1 > span, .gallery-masthead h1 > span, .scenes-masthead h1 > span { color: #e6382c; font-style: normal; } .film-heading h1 br, .gallery-masthead h1 br, .scenes-masthead h1 br { display: none; } @media (max-width: 1100px) { .film-heading h1, .listen-heading h1, .crew-heading h1, .gallery-masthead h1, .scenes-masthead h1 { font-size: clamp(50px, 8.5vw, 72px); } } @media (max-width: 520px) { .film-heading h1, .listen-heading h1, .crew-heading h1, .gallery-masthead h1, .scenes-masthead h1 { font-size: clamp(42px, 11vw, 50px); } } /* the title row itself: same clearance under the header on every page */ .film-heading, .listen-heading, .crew-heading, .gallery-masthead, .scenes-masthead { padding-top: 34px; padding-bottom: 28px; } @media (max-width: 1100px) { .film-heading, .listen-heading, .crew-heading, .gallery-masthead, .scenes-masthead { padding-top: 26px; padding-bottom: 22px; } } @media (max-width: 520px) { .film-heading, .listen-heading, .crew-heading, .gallery-masthead, .scenes-masthead { padding-top: 20px; padding-bottom: 18px; } }