/* ============================================================ cambrian — black-layer / edge-emergence treatment. default behaviour: images and most text appear as if absorbed by a black layer — only edges and stroked contours read. on hover (where it makes sense) they recover normal b/w. the script detects each page's background brightness and tags with .tint-dark or .tint-light, then selects the appropriate SVG filter and stroke colour. ============================================================ */ :root { --tint-fg-dark: 230, 227, 218; /* foreground on dark pages */ --tint-fg-light: 0, 0, 0; /* foreground on light pages */ --tint-stroke-w: 0.6px; --tint-stroke-w-small: 0.5px; --tint-ms: 500ms; --tint-ease: cubic-bezier(.2,.7,.2,1); } /* ---- IMAGES ---------------------------------------------- */ img, video, iframe { transition: filter var(--tint-ms) var(--tint-ease); } body.tint-dark img, body.tint-dark video, body.tint-dark iframe { filter: url(#cambrian-edge-light); } body.tint-light img, body.tint-light video, body.tint-light iframe { filter: url(#cambrian-edge-dark); } /* hovering a single image (in the hero or in prose) restores plain b/w. gallery scrollers explicitly excluded — see below. */ body.tint-dark img:hover, body.tint-dark video:hover { filter: grayscale(1); } body.tint-light img:hover, body.tint-light video:hover { filter: grayscale(1); } /* gallery scrollers: NO hover reveal. one image hover would lift the whole row (they overlap), and that reads badly. leave them tinted, full stop. */ body.tint-dark .gallery .scroller img, body.tint-dark .gallery .scroller img:hover, body.tint-dark .scroller img, body.tint-dark .scroller img:hover { filter: url(#cambrian-edge-light) !important; } body.tint-light .gallery .scroller img, body.tint-light .gallery .scroller img:hover, body.tint-light .scroller img, body.tint-light .scroller img:hover { filter: url(#cambrian-edge-dark) !important; } /* logos and chrome bypass the edge pass — already line-art */ .logo-drawing img, .news-head img, footer img { filter: grayscale(1) brightness(0.45) !important; } .logo-drawing img:hover, .news-head img:hover, footer img:hover { filter: grayscale(1) brightness(1) !important; } /* ---- TEXT ------------------------------------------------ */ /* tinted text targets — body copy, headings, captions. the menu, the haiku fragments and a few other UI elements are explicitly excluded further down. */ body.tint-dark p, body.tint-dark h1, body.tint-dark h2, body.tint-dark h3, body.tint-dark h4, body.tint-dark h5, body.tint-dark h6, body.tint-dark li, body.tint-dark dt, body.tint-dark dd, body.tint-dark blockquote, body.tint-dark td, body.tint-dark th, body.tint-dark .stream p, body.tint-dark .stream > p, body.tint-dark .news-item, body.tint-dark .news-date, body.tint-dark .out-now, body.tint-dark .gallery .ghead b, body.tint-dark .caption, body.tint-dark .post .text, body.tint-dark .post .date, body.tint-dark .subtitle, body.tint-dark .separator { color: transparent; -webkit-text-stroke: var(--tint-stroke-w) rgba(var(--tint-fg-dark), 0.55); text-shadow: 0 1px 0 rgba(255,255,255,0.04); transition: color var(--tint-ms) var(--tint-ease), -webkit-text-stroke-width var(--tint-ms) var(--tint-ease), -webkit-text-stroke-color var(--tint-ms) var(--tint-ease), text-shadow var(--tint-ms) var(--tint-ease); } body.tint-dark .news-time, body.tint-dark .gallery .ghead span, body.tint-dark .out-now small, body.tint-dark small { color: transparent; -webkit-text-stroke: var(--tint-stroke-w-small) rgba(var(--tint-fg-dark), 0.65); text-shadow: 0 1px 0 rgba(255,255,255,0.04); transition: color var(--tint-ms) var(--tint-ease), -webkit-text-stroke-width var(--tint-ms) var(--tint-ease), -webkit-text-stroke-color var(--tint-ms) var(--tint-ease); } /* same set on light-bg pages, with dark stroke */ body.tint-light p, body.tint-light h1, body.tint-light h2, body.tint-light h3, body.tint-light h4, body.tint-light h5, body.tint-light h6, body.tint-light li, body.tint-light dt, body.tint-light dd, body.tint-light blockquote, body.tint-light td, body.tint-light th, body.tint-light .stream p, body.tint-light .stream > p, body.tint-light .news-item, body.tint-light .news-date, body.tint-light .out-now, body.tint-light .gallery .ghead b, body.tint-light .caption, body.tint-light .post .text, body.tint-light .post .date, body.tint-light .subtitle, body.tint-light .separator { color: transparent; -webkit-text-stroke: var(--tint-stroke-w) rgba(var(--tint-fg-light), 0.55); text-shadow: 0 1px 0 rgba(0,0,0,0.04); transition: color var(--tint-ms) var(--tint-ease), -webkit-text-stroke-width var(--tint-ms) var(--tint-ease), -webkit-text-stroke-color var(--tint-ms) var(--tint-ease), text-shadow var(--tint-ms) var(--tint-ease); } body.tint-light .news-time, body.tint-light .gallery .ghead span, body.tint-light .out-now small, body.tint-light small { color: transparent; -webkit-text-stroke: var(--tint-stroke-w-small) rgba(var(--tint-fg-light), 0.65); } /* hover restore — same on both themes */ body.tint-dark p:hover, body.tint-dark h1:hover, body.tint-dark h2:hover, body.tint-dark h3:hover, body.tint-dark h4:hover, body.tint-dark h5:hover, body.tint-dark h6:hover, body.tint-dark li:hover, body.tint-dark blockquote:hover, body.tint-dark .stream p:hover, body.tint-dark .stream > p:hover, body.tint-dark .news-item:hover, body.tint-dark .out-now:hover, body.tint-dark .gallery .ghead:hover, body.tint-dark .caption:hover, body.tint-dark .post:hover .text, body.tint-dark .post:hover .date, body.tint-dark .news-time:hover { color: rgba(var(--tint-fg-dark), 1); -webkit-text-stroke-width: 0; text-shadow: none; } body.tint-light p:hover, body.tint-light h1:hover, body.tint-light h2:hover, body.tint-light h3:hover, body.tint-light h4:hover, body.tint-light h5:hover, body.tint-light h6:hover, body.tint-light li:hover, body.tint-light blockquote:hover, body.tint-light .stream p:hover, body.tint-light .stream > p:hover, body.tint-light .news-item:hover, body.tint-light .out-now:hover, body.tint-light .gallery .ghead:hover, body.tint-light .caption:hover, body.tint-light .post:hover .text, body.tint-light .post:hover .date, body.tint-light .news-time:hover { color: rgba(var(--tint-fg-light), 1); -webkit-text-stroke-width: 0; text-shadow: none; } /* ---- LINKS — but NOT the sidebar menu -------------------- */ body.tint-dark .stream a, body.tint-dark .news-item a, body.tint-dark .out-now a, body.tint-dark .post a, body.tint-dark .fragments a { color: transparent; -webkit-text-stroke: var(--tint-stroke-w) rgba(var(--tint-fg-dark), 0.55); text-shadow: 0 1px 0 rgba(255,255,255,0.04); text-decoration-color: rgba(var(--tint-fg-dark), 0.10); transition: color var(--tint-ms) var(--tint-ease), -webkit-text-stroke-width var(--tint-ms) var(--tint-ease), text-decoration-color var(--tint-ms) var(--tint-ease); } body.tint-dark .stream a:hover, body.tint-dark .news-item:hover a, body.tint-dark .out-now a:hover, body.tint-dark .post a:hover, body.tint-dark p:hover a { color: rgba(var(--tint-fg-dark), 1); -webkit-text-stroke-width: 0; text-shadow: none; text-decoration-color: rgba(var(--tint-fg-dark), 0.55); } body.tint-light .stream a, body.tint-light .news-item a, body.tint-light .out-now a, body.tint-light .post a { color: transparent; -webkit-text-stroke: var(--tint-stroke-w) rgba(var(--tint-fg-light), 0.55); text-decoration-color: rgba(var(--tint-fg-light), 0.10); transition: color var(--tint-ms) var(--tint-ease), -webkit-text-stroke-width var(--tint-ms) var(--tint-ease), text-decoration-color var(--tint-ms) var(--tint-ease); } body.tint-light .stream a:hover, body.tint-light .news-item:hover a, body.tint-light .out-now a:hover, body.tint-light .post a:hover, body.tint-light p:hover a { color: rgba(var(--tint-fg-light), 1); -webkit-text-stroke-width: 0; text-decoration-color: rgba(var(--tint-fg-light), 0.55); } /* ---- EXEMPTIONS — keep readable, no edge treatment ------ */ /* sidebar menu (cambrian's nav) reads plainly. */ .sidebar, .sidebar p, .sidebar a, .sidebar .group, .sidebar .group b, .sidebar .group a, .sidebar .file-list, .sidebar .file-list a, .sidebar .contact, .sidebar .contact a, .sidebar .ascii-divider, .file-list, .file-list a, .file-list b { color: inherit !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } /* but the contact link should still feel like a link */ .sidebar a, .sidebar .group a, .sidebar .file-list a, .sidebar .contact a { color: var(--link, #c9c2ad) !important; } .sidebar a:hover, .sidebar .group a:hover, .sidebar .file-list a:hover, .sidebar .contact a:hover { color: #fff !important; } /* japanese fragments / haiku stay readable as poetry. */ .fragments .jp, p.jp { color: rgba(var(--tint-fg-dark), 0.85) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; } body.tint-light .fragments .jp, body.tint-light p.jp { color: rgba(var(--tint-fg-light), 0.85) !important; } /* ---- MODAL ----------------------------------------------- */ .modal, .modal *, .modal-backdrop .modal, .modal-backdrop .modal * { text-shadow: none !important; } .modal-backdrop.open .modal *:not(img):not(video):not(iframe) { color: rgba(var(--tint-fg-dark), 1) !important; -webkit-text-stroke-width: 0 !important; } .modal-backdrop.open .modal img, .modal-backdrop.open .modal video, .modal-backdrop.open .modal iframe { filter: none !important; } .hero .play-overlay::after { text-shadow: none !important; color: #fff !important; -webkit-text-stroke-width: 0 !important; } .hero.hero-pair .nina-tile::after { text-shadow: none !important; color: #fff !important; -webkit-text-stroke-width: 0 !important; } /* ---- GUESTBOOK IFRAME ----------------------------------- */ /* the guestbook iframe is cross-origin so we can't style its inner DOM, but we CAN apply a CSS filter to the iframe as a whole — the whole panel renders through the edge filter like any other image. on hover it returns to grayscale. */ .gbook-wrap iframe, iframe[src*="atabook"], iframe[title="guestbook"] { /* filter is set by the body.tint-* rules above */ transition: filter var(--tint-ms) var(--tint-ease); } .gbook-wrap iframe:hover, iframe[src*="atabook"]:hover, iframe[title="guestbook"]:hover { filter: grayscale(1) !important; } /* ---- FALLBACK for browsers without text-stroke ---------- */ @supports not (-webkit-text-stroke: 1px black) { body.tint-dark p, body.tint-dark h1, body.tint-dark h2, body.tint-dark h3, body.tint-dark .stream p, body.tint-dark .news-item, body.tint-dark .post .text, body.tint-dark .out-now, body.tint-dark .stream a { color: rgba(var(--tint-fg-dark), 0.18) !important; } body.tint-light p, body.tint-light h1, body.tint-light h2, body.tint-light h3, body.tint-light .stream p, body.tint-light .news-item, body.tint-light .post .text, body.tint-light .out-now, body.tint-light .stream a { color: rgba(var(--tint-fg-light), 0.18) !important; } }