/* Theme Name: Marilyn Description: Glass / frosted-blur theme with a translucent top bar, slide-out side menu, bordered post cards, hero featured images and a share popup. Version: 2.1 Text Domain: marilyn */ /* ===== TWEAK THESE ===== */ :root{ --blur: 5px; /* how blurry the glass is */ --smoke: rgba(0,0,0,.45); /* darkness of the glass (raise last number = darker) */ --blur-touch: 5px; /* phones & tablets use this INSTEAD of --blur (the frosted glass often looks blurrier on iPhone) */ --smoke-touch: rgba(0,0,0,.35); /* phones & tablets use this INSTEAD of --smoke (darkness of the post cards' glass) */ --edge: rgba(255,255,255,.28); /* 1px border colour */ --glow: rgba(255,255,255,.10); /* soft glow around cards */ --radius: 24px; /* corner rounding of cards and glass panels */ --bar-h: 70px; /* height of the top bar (on an iPhone web app the bar grows by the status bar / Dynamic Island height on top of this) */ --bar-full: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); --side-w: 300px; /* width of the side menu (it never goes wider than 88% of the screen) */ --bg: #05050a; /* page background colour (behind the orbs) */ --text: #f2f2f5; /* main text colour */ --muted: #9a9aa6; /* dimmer text colour (dates, captions, placeholders) */ --footer-link-opacity: .55; /* Privacy Policy link under the copyright: how faint it is compared with the copyright text (1 = same) */ --link: #8ff0d0; /* link colour */ --link-hover: #ff4fd8; /* link colour while hovered (neon pink) */ --link-glow: rgba(255,79,216,.55); /* glow around a hovered link in a post or page (transparent = no glow) */ --link-glow-size: 8px; /* how far that glow spreads */ --link-fade: .3s; /* how long a link takes to fade to / from its hover colour */ --link-underline: 75%; /* how visible a link's underline is compared with the link text (100% = same as the text, 0% = no underline) */ --underglow: rgba(255,255,255,.18); /* glow under the top bar + beside the side menu */ --title-opacity: .85; /* post title fill opacity, 0-1 */ --share-fade: 500ms; /* share popup: page blur + window fade in/out (try 500ms-1000ms) */ --share-blur: 8px; /* how blurry the page gets behind the share popup */ --menu-page-blur: 3px; /* page blur while the side menu is open */ --glow-speed: .8s; /* speed of hover glows (burger, menu links) */ --post-gap: 36px; /* space between posts in the list */ --wrap-wide: 1300px; /* list width when it switches to 2 columns (very wide windows) */ --menu-speed: .3s; /* side menu slide + page blur/darken speed */ --burger-speed: 650ms; /* menu button: how long the lines take to curl around into the arrow (and back) */ --rel-zoom: 5px; /* related posts: how far the image zooms on hover (px per side) */ --rel-dim: .15; /* related posts: resting black overlay, 0-1 (fades away on hover = brightens) */ --rel-speed: 300ms; /* related posts: hover animation time (250-350ms feels snappy) */ --hero-zoom: 5px; /* post page: featured image zoom on hover (px per side) */ --hero-speed: 1000ms; /* post page: featured image zoom time */ --card-zoom: 5px; /* posts list: thumbnail zoom on hover (px per side) */ --card-speed: 500ms; /* posts list: thumbnail zoom time */ --post-gap-x: 66px; /* horizontal space between posts when the list is 2 columns */ --post-sheen: .03; /* opacity of the light gradient at the top of post/page bodies, 0-1 */ --post-sheen-height: 240px; /* how far down that gradient travels before fading out */ --bar-smoke: rgba(6,6,12,.7); /* top bar + side menu tint. Raise the alpha for a more uniform bar */ --bar-brightness: .8; /* dims whatever is behind the top bar / side menu (1 = no dimming) */ --curve: 22px; /* side menu: radius of the curve where the bar's line turns down into the menu */ --glow-size: 22px; /* length of the underglow around the bar + menu (keep <= --curve) */ --nav-out: 450ms; /* page change: how long the old page takes to zoom/fade away */ --nav-in: 600ms; /* page change: how long the new page takes to zoom/fade in */ --nav-zoom-out: 1.35; /* page change: how far the old page zooms toward you (1 = none) */ --nav-zoom-in-from: .75; /* page change: size the new page starts at (.75 = 75%) */ --nav-orb-boost: 40; /* page change: how many times faster the orbs travel (1 = no speed-up) */ --card-shift: 5px; /* posts list: how far the thumbnail slides opposite the mouse (keep <= --card-zoom or edges show) */ --logo-max-offset: 10px; /* logo: furthest the colour layers drift toward the mouse */ --logo-follow-delay: 450ms; /* logo: wait this long after hover (while it collapses) before following the mouse */ --logo-lag: 70ms; /* logo: how far the layers trail the mouse (bigger = more lag; lower layers trail more) */ --logo-restore: 140ms; /* logo: how fast the layers settle back to their offsets when you leave */ --lb-speed: 450ms; /* image lightbox: grow / shrink time */ --lb-blur: 10px; /* image lightbox: page blur while open */ --lb-dim: .5; /* image lightbox: how dark the page gets behind it, 0-1 */ --lb-radius: 15px; /* image lightbox: corner rounding */ --lb-glow-size: 15px; /* image lightbox: size of the soft glow around the picture */ --lb-glow: rgba(255,255,255,.10); /* image lightbox: glow colour/opacity (fades in on open, out on close) */ --lb-hint-rest: .5; /* lightbox badge: opacity it settles at after each animation (1 = stay fully visible) */ --lb-hint-bounce-every: 3500ms; /* lightbox badge: while you keep hovering, it springs open again this often (and returns to full opacity while it does) */ --lb-hint-inset: 10px; /* lightbox badge: distance of the brackets from the picture's top and right edge (bigger = further in) */ --lb-hint-threshold: 150; /* lightbox badge: picture brightness (0-255) above which the badge turns dark so it stays visible */ --lb-nav-size: 44px; /* gallery lightbox: size of the round < and > buttons beside the picture */ --lb-nav-gap: 16px; /* gallery lightbox: space on each side of the < and > buttons (the picture keeps clear of them) */ --lb-nav-fade: 300ms; /* gallery lightbox: cross-fade time when stepping to the next picture */ --lb-nav-bg: rgba(0,0,0,.4); /* gallery lightbox: background of the < and > buttons */ --lb-count-room: 40px; /* gallery lightbox: room kept free under the picture for the "2 / 6" counter */ --lb-swipe-commit: .2; /* phones: how far (share of the screen width) you drag a gallery picture before letting go moves to the next one (a quick flick always does) */ --lb-zoom-max: 4; /* phones: how far you can pinch-zoom an open picture (times its size on screen) */ --logo-c1: #e7303a; /* logo layer 1 (top): red. The five colours blend ("lighten") into a near-white logo when they line up */ --logo-c2: #eaca36; /* logo layer 2: yellow */ --logo-c3: #01eb7a; /* logo layer 3: green */ --logo-c4: #b17cea; /* logo layer 4: purple */ --logo-c5: #3e4adb; /* logo layer 5 (bottom): blue */ --logo-smooth: 1; /* logo: 1 = draw the layers with extra-smooth edges (canvas, see smoothLogo in theme.js); 0 = keep the plain SVGs */ --logo-deadband: 6px; /* logo: the pointer must travel this far before the colour layers start to move */ --logo-sensitivity: 1; /* logo: px of layer shift per px of pointer travel beyond the deadband (up to --logo-max-offset) */ --logo-pad-x: 50px; /* logo: extra hover area to the left AND right of the logo (so the effect doesn't cut off) */ --logo-pad-y: 0px; /* logo: extra hover area above AND below the logo */ --shine-opacity: .06; /* appearing shine: brightness of the light band inside each post/page block, 0-1 (0 = off) */ --shine-delay: 80ms; /* appearing shine: starts this long after the zoom-in begins (lower = sooner) */ --shine-duration: 700ms; /* appearing shine: how long the sweep takes */ --shine-width: .45; /* appearing shine: band width as a fraction of the block's shorter side */ --shine-ref: 540px; /* appearing shine: how far the band travels (px) in exactly --shine-duration. Longer/bigger blocks take proportionally longer, so it never races across them (blocks smaller than this keep --shine-duration) */ --shine-scaling: .75; /* appearing shine on long blocks: 1 = same band speed everywhere (long posts take longest), 0 = every block takes --shine-duration. Lower = faster on long posts */ --shine-max: 4000ms; /* appearing shine: the longest it may take, however big the block is */ --social-shine-delay: 1000ms; /* social icons: pause before their one-off shine, after the menu opens and after the footer icons scroll into view (so it isn't missed) */ --menu-here-opacity: .4; /* side menu: how faded the link to the page you're on is (it can't be clicked) */ /* derived, no need to edit: */ --menu-w: min(var(--side-w),88vw); --menu-off: calc(var(--curve) + 24px); --menu-slide: calc(var(--menu-w) + var(--menu-off)); /* how far the menu (and its outline) travel when it slides in */ --code-max-height: 350px; /* code blocks: height before they scroll (full view opens with "Show more…") */ --text-size: 17px; /* the site's regular text size (body text AND code blocks follow it) */ --code-scale: 1.05; /* code blocks: monospace text looks smaller than regular text at the same size, so it is scaled up by this much */ --code-color: #b4b8c4; /* code blocks: text colour, dimmer than regular text so code stands apart (was #cdd0d9) */ --code-font-size: calc(var(--text-size) * var(--code-scale, 1.05)); /* code blocks: text size (same in the post and in the full-size view, so nothing snaps) */ --cursor-blink: 1.06s; /* code block 'Show more' cursor: one full blink cycle */ --type-speed: 75ms; /* code block 'Show more': time per typed letter */ --type-delay: 250ms; /* ...and the pause after you hover before typing starts */ --cursor-width: 1.1ch; /* ...and how wide it is (1ch = one character; try 1.1ch-2ch) */ --copy-label-time: 1500ms; /* code viewer: how long the copy button stays expanded showing 'Copied!' */ --copy-grow: .38s; /* ...and how long it takes to expand / shrink back */ --code-scroll-thumb: rgba(255,255,255,.26); /* code block scrollbar handle (hover: brighter) */ --share-return-delay: 500ms; /* share popup closing: the plane waits this long (after the click) before flying back in */ --share-fly-delay: 1500ms; /* share button: the paper plane flies once this long after a post appears */ --code-line-height: 1.6; /* code blocks: line spacing (same in both, same as regular text) */ --lb-bg: rgba(0,0,0,.72); /* image lightbox: backing darkness while open (fades in on open, out on close) */ --lb-code-bg: rgba(0,0,0,.82); /* code lightbox: backing darkness while open (fades in on open, out on close) */ --code-bg: rgba(0,0,0,.5); /* code blocks: background (the full-size view uses the same, so it doesn't change shade when it opens/closes) */ --code-pad: 1.1rem 1.3rem; /* code blocks: inner padding (same in both) */ --code-glow: rgba(255,255,255,.22); /* code blocks: the white glow under the bottom edge on hover */ --nav-orb-hold: 1500ms; /* clicking a page: the orbs stay fast for at least this long (counted from the click), even if the page loads sooner */ --nav-orb-settle: 1000ms; /* ...then take this long to slow back down */ --orbs-small-screen: 100; /* % of the background orbs kept on the smallest screens (a phone); bigger screens keep proportionally more and a full-HD desktop keeps them all. 100 = the same number everywhere, 40 = a phone shows about half */ --orbs-still-touch: 1; /* phones & tablets: 1 = the orbs glide to a stop once a page has settled and only move during page changes (saves graphics work, memory and battery), 0 = always drifting */ --orbs-still-after: 2000ms; /* phones & tablets: how long the orbs keep drifting at normal speed before they start to slow down */ --orbs-still-fade: 6000ms; /* phones & tablets: how long the slow-down to a stop takes (longer = harder to notice) */ --glass-touch: rgba(0,0,10,.35); /* phones & tablets: tint of the post cards (matched to the blurred glass it replaces). They have no frosted blur there (a blur layer the size of a long post costs iPhones a lot of memory when zoomed); the top bar keeps its blur */ --safe-start-hold: 800ms; /* phones & tablets, after a refresh or back/forward: the orbs and blur return once the page has loaded and stayed at normal zoom this long (iPhones restore the old zoom on reload) */ --crash-safe-hold: 10000ms; /* phones & tablets, when the previous page in this tab crashed: how long the page must stay up at normal zoom before the orbs and blur return */ --zoom-orb-out: 350ms; /* phones & tablets: how long the orbs take to fade away when you start pinch-zooming (they are hidden while zoomed in, to save memory) */ --zoom-orb-in: 900ms; /* ...and how long they take to fade back in once you are back at normal size */ --card-img-hover-edge: rgba(255,255,255,.39); /* home page: border colour of a post's picture while you hover the preview (resting = --edge; the card's own border goes to .5) */ --aura-reach: 40px; /* post previews: MINIMUM room around a card for the colour glow (px). It grows by itself if --aura-blur needs more (6x the blur), so the glow never gets a hard cut-off */ --aura-blur: 9px; /* post previews: softness of the settled glow (bigger = softer, wider; the burst is 1.8x this) */ --aura-opacity: .65; /* post previews: brightness of the SETTLED colour glow, 0-1 (0 = glow off) */ --aura-burst: 1; /* post previews: brightness of the burst when the mouse first touches the edge, 0-1 (0 = no burst) */ --aura-wave: .6; /* post previews: how much the settled glow waves bright/dim as it rotates (0 = even all round, .4 = gentle) */ --aura-edge: rgba(255,255,255,.5); /* post previews: the card's border colour once the glow has reached that part of it */ --aura-spread: 1200ms; /* post previews: time for the wave to travel from the touch point round to the other side */ --aura-fade: 900ms; /* post previews: time for the glow to dissolve away from the spot where the mouse left */ --aura-spin: 16s; /* post previews: time for the colours (and the waves) to rotate once around the card (bigger = slower) */ --home-orb-boost: 40; /* home page, first load / refresh only: how many times faster the orbs start (1 = no speed-up) */ --home-orb-settle: 2500ms; /* ...and how long they take to slow down to normal (not used when you come back to the home page from another page) */ --idle-delay: 120000ms; /* home page: no mouse / touch / key activity for this long and the posts fade away (120000ms = 2 min; 0 = off) */ --idle-touch: 0; /* phones & tablets: 1 = the idle "screensaver" also runs there, 0 = desktop only */ --idle-out: 1600ms; /* idle: how long the posts take to fade / zoom toward you */ --idle-orb-boost: 6; /* idle: the speed (times normal) the orbs settle at while the posts are gone */ --idle-lead: 500ms; /* idle: how long the orbs speed up BEFORE the posts start to vanish */ --idle-surge: 40; /* idle: how many times faster the orbs travel at the peak, while the posts zoom / fade away */ --idle-surge-settle: 2500ms; /* idle: after the posts have gone, how long the orbs take to slow down to --idle-orb-boost */ --idle-wake-surge: 40; /* idle: when you move the mouse, how many times faster the orbs travel as the posts reappear */ --idle-wake-hold: 600ms; /* idle: how long they stay at that speed before slowing down */ --idle-wake-settle: 2500ms; /* idle: how long they then take to slow down to normal */ --idle-gather-delay: 0ms; /* idle: after the posts start to fade, how long until normal orbs start turning into logo orbs (0 = straight away; it builds up slowly either way) */ --idle-extra-orbs: 320; /* idle: the most orbs that can be circling the logo at once (they replace normal orbs as those are reborn, then stay much longer, so the logo slowly builds up to this) */ --idle-ignore: .25; /* idle: share of normal orbs that carry on as normal instead of becoming logo orbs (0 = every one becomes a logo orb, 1 = none) */ --idle-orbit-time: 45000ms; /* idle: average time a logo orb circles before it splits off and heads outward (each one differs a lot). Longer = the logo builds up to a fuller shape */ --idle-orbit-speed: 1; /* idle: how fast orbs travel around the logo outline (2 = twice as fast) */ --idle-logo-size: 65; /* idle: size of the logo outline, as % of the screen (it fits inside this % of the width AND height, so it scales with the window) */ --idle-orb-size: 1; /* idle: size of the logo orbs (1 = the same as normal orbs) */ --idle-drift: 1; /* idle: how loosely the orbs follow the outline - how far they wander off the line (0 = tight on the line, 2 = a wide band) */ --idle-fade-min: .35; /* idle: how dim a circling orb gets at the bottom of its fade in/out (0 = vanishes completely, 1 = no fading) */ --idle-twinkle: 6000ms; /* idle: average time for a circling orb to fade out and back in (each one differs) */ --idle-return: 2500ms; /* idle: when you move the mouse, how long the circling orbs take to let go of the logo and head outward again (bigger = gentler) */ --idle-bar-hide: 1000ms; /* idle: how long the top bar takes to slide up out of view (and back down when you move the mouse) */ --idle-min-fps: 24; /* idle: if the screen can't keep this many frames per second while the logo builds, the logo orbs are thinned out and, if it stays slow, switched off (0 = never) */ --idle-extra-orbs-touch: 150; /* idle: on phones / tablets the most logo orbs at once (they have less memory; the iPhone web app reloads itself if a page uses too much) */ --idle-low-end: 1; /* idle: 1 = skip the logo orbs entirely on very weak devices (2 or fewer CPU cores, 2 GB or less memory, Data Saver on); 0 = always run them */ --slide-interval: 5000ms; /* post previews (home page): time each picture stays before the next one (the dot clock-wipes over this time) */ --slide-stagger: 1800ms; /* home previews: when several are on screen they change picture one at a time, top to bottom (left to right on wide screens); this is the least time between one changing and the next (keep it above --slide-speed) */ --slide-speed: 1400ms; /* post previews: zoom + fade time to the next picture (slow = smooth) */ --slide-zoom-from: 1.08; /* post previews: size the next picture starts at before it settles at full size (above 1 = starts zoomed in and zooms out, below 1 = zooms in, 1 = just fade) */ --slide-hover-fade: 350ms; /* post previews: fade time when you hover a dot to pick a picture */ --slide-min-width: 700; /* slideshows: only post pictures at least this wide (px) are used */ --slide-min-height: 450; /* slideshows: ...and at least this tall (px) */ --slide-max: 6; /* slideshows: most pictures per post (the featured image counts as the first) */ --dot-size: 9px; /* slideshow dots: size */ --dot-gap: 8px; /* slideshow dots: space between them */ --dot-color: rgba(255,255,255,.28); /* slideshow dots: resting colour (the empty part of the clock) */ --dot-fill: rgba(255,255,255,.72); /* slideshow dots: the colour that wipes around as the next picture approaches */ --depth-opacity: .6; /* post previews: darkness of the inner shadow (depth) that fades in on hover, 0-1 (0 = off) */ --depth-size: 48px; /* post previews: how far in from the sides / bottom the inner shadow reaches */ --hero-slide-every: 5000ms; /* post page: time each big picture stays before fading to the next one */ --hero-slide-fade: 1800ms; /* post page: how long the fade to the next picture takes (slow = gradual) */ --hero-slide-touch: 1; /* phones & tablets: 1 = the post page's big picture changes like on desktop, 0 = it shows only the featured image (saves memory on iPhone) */ --thanks-orb-boost: 50; /* contact form sent: how many times faster the orbs travel */ --thanks-orb-hold: 2000ms; /* contact form sent: how long the orbs stay fast */ --thanks-orb-settle: 2200ms; /* contact form sent: how long they then take to slow back to normal */ --ug0: color-mix(in srgb,var(--underglow) 44%,transparent); /* soft glow falloff, matches the old box-shadow */ --ug1: color-mix(in srgb,var(--underglow) 31%,transparent); --ug2: color-mix(in srgb,var(--underglow) 20%,transparent); --ug3: color-mix(in srgb,var(--underglow) 10%,transparent); } /* ======================= */ *{box-sizing:border-box} body{padding-bottom:env(safe-area-inset-bottom, 0px)} /* iPhone web app: keep the footer clear of the home indicator (the top is handled by .topbar) */ html{scroll-behavior:smooth} body{ margin:0;color:var(--text); font:var(--text-size, 17px)/1.6 Ubuntu,system-ui,-apple-system,"Segoe UI",sans-serif; background-color:var(--bg); } /* Default background: soft purple / deep-blue nebula, no stars. It is drawn on a FIXED layer the size of the screen instead of with background-attachment:fixed, which Safari on iPhone ignores (it then stretched the glow over the whole length of the page, so each screen was nearly black). Same look on desktop. Sits under the orbs (z-index -1). */ body::before{ content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-2;pointer-events:none; background-image: radial-gradient(ellipse 60% 50% at 15% 60%,rgba(90,40,160,.28),transparent 70%), radial-gradient(ellipse 55% 45% at 85% 25%,rgba(40,70,170,.22),transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%,rgba(60,30,120,.18),transparent 70%), radial-gradient(ellipse 50% 40% at 72% 75%,rgba(30,50,130,.12),transparent 70%); } a{color:var(--link);text-decoration-color:color-mix(in srgb, currentColor var(--link-underline, 75%), transparent);transition:color var(--link-fade, .3s) ease,text-decoration-color var(--link-fade, .3s) ease,text-shadow var(--link-fade, .3s) ease} a:hover,a:focus-visible{color:var(--link-hover, #ff4fd8)} img{max-width:100%;height:auto} svg.i{width:1.25em;height:1.25em;display:block} /* ---------- glass ---------- */ .glass,.topbar,.share{ background:var(--smoke); -webkit-backdrop-filter:blur(var(--blur)) saturate(140%); backdrop-filter:blur(var(--blur)) saturate(140%); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass,.topbar,.share{background:rgba(10,10,14,.94)} } .glass{border:1px solid var(--edge);box-shadow:0 0 24px var(--glow)} /* ---------- top bar ---------- */ .topbar{ position:fixed;top:var(--adminbar-h, 0px);left:0;width:100vw;height:var(--bar-full);z-index:60; /* 100vw = same centre with or without a scrollbar */ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); transition:transform var(--idle-bar-hide,1000ms) cubic-bezier(.55,0,.25,1); } /* idle mode (home page): the bar rolls up out of sight, glow included, and comes back down on the first movement */ html.idle .topbar{transform:translateY(calc(-100% - var(--adminbar-h,0px) - var(--glow-size,26px) - 8px))} .brand{justify-self:center;display:flex;align-items:center} .brand a{display:flex;align-items:center;text-decoration:none} .custom-logo{height:52px;width:auto;display:block} /* Logo slot (used when no logo is set in the Customizer). Give it an image with: .logo-slot{--logo-url:url(images/logo.png)} or replace the span in header.php with an . */ .logo-slot{display:block;width:140px;height:52px;background:var(--logo-url,none) center/contain no-repeat} .icon-btn{ background:none;border:0;color:#fff;cursor:pointer;width:44px;height:44px; display:grid;place-items:center;border-radius:50%;padding:0; } .icon-btn svg{width:26px;height:26px} /* ---------- side menu: slides out UNDER the top bar and becomes part of it ---------- */ /* The bar's 1px bottom line, its underglow and the menu's edge are one continuous outline: the line runs along the bar, curves down (--curve) and continues down the menu's right edge. */ /* The page blur layer, the menu's outline and the bar's underglow all slide with TRANSFORM (the same GPU-driven property the menu itself uses). They used to animate `left`, which runs on the main thread and visibly lagged behind the menu on phones. */ .scrim{ position:fixed;top:calc(var(--bar-full) + var(--adminbar-h, 0px));bottom:0;left:var(--menu-w);right:calc(var(--menu-slide) * -1);z-index:50; background:rgba(0,0,0,.25);-webkit-backdrop-filter:blur(var(--menu-page-blur));backdrop-filter:blur(var(--menu-page-blur)); opacity:0;pointer-events:none;transform:translateX(calc(var(--menu-slide) * -1)); visibility:hidden; /* closed = not drawn at all (an invisible blur layer still costs the phone a full-screen re-blur every frame) */ transition:opacity var(--menu-speed) ease,transform var(--menu-speed) cubic-bezier(.3,.8,.3,1),visibility 0s linear var(--menu-speed); } .side-menu{ position:fixed;top:calc(var(--bar-full) + var(--adminbar-h, 0px));bottom:0;left:0;width:var(--menu-w);z-index:55;text-align:center; transform:translateX(calc(-100% - var(--menu-off)));visibility:hidden; transition:transform var(--menu-speed) cubic-bezier(.3,.8,.3,1),visibility 0s linear var(--menu-speed); } body.menu-open .side-menu{transform:none;visibility:visible;transition-delay:0s} body.menu-open .scrim{opacity:1;pointer-events:auto;transform:none;visibility:visible;transition-delay:0s} .side-glass{position:absolute;inset:0;background:var(--bar-smoke);-webkit-backdrop-filter:blur(var(--blur)) brightness(var(--bar-brightness));backdrop-filter:blur(var(--blur)) brightness(var(--bar-brightness))} .side-inner{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 24px} .menu-edge{position:absolute;left:100%;top:var(--curve);bottom:0;width:var(--glow-size);pointer-events:none;background:linear-gradient(to right,var(--ug0),var(--ug1) 20%,var(--ug2) 40%,var(--ug3) 65%,transparent)} /* glow along the edge */ /* the curved corner where the bar's line turns down into the menu edge. .menu-corner = glass fill + inner glow (circle + box-shadow, no masks). The 1px outline itself is .menu-outline below: one bordered shape, so no lines overlap. */ .menu-corner{position:absolute;overflow:hidden;pointer-events:none} .menu-corner{ left:100%;top:0;width:var(--curve);height:var(--curve); background:radial-gradient(circle at 100% 100%,transparent calc(var(--curve) - var(--glow-size)),var(--ug3) calc(var(--curve) - var(--glow-size) * .65),var(--ug2) calc(var(--curve) - var(--glow-size) * .4),var(--ug1) calc(var(--curve) - var(--glow-size) * .2),var(--ug0) var(--curve),transparent calc(var(--curve) + .5px)); } .menu-corner::before{ /* the circle is empty; its shadow fills everything outside the curve with glass */ content:"";position:absolute;left:0;top:0;width:calc(var(--curve) * 2);height:calc(var(--curve) * 2);border-radius:50%; box-shadow:0 0 0 var(--curve) var(--bar-smoke); } /* ONE element draws the whole 1px outline: along the bar, around the curve, down the menu edge. It lives inside .topbar (above the bar's glass). Closed, it sits off-screen to the left, so its top border is simply the bar's normal bottom line. It slides with the menu using the same timing. */ .menu-outline{ position:absolute;pointer-events:none; left:calc(var(--menu-w) - 1px);right:calc(var(--menu-slide) * -1);top:calc(100% - 1px);height:100vh; /* drawn at its OPEN position... */ border-top:1px solid var(--edge);border-left:1px solid var(--edge); border-top-left-radius:calc(var(--curve) + 1px); transform:translateX(calc(var(--menu-slide) * -1)); /* ...and slid off to the left when closed */ transition:transform var(--menu-speed) cubic-bezier(.3,.8,.3,1),height 0s linear var(--menu-speed); } /* Closed, only its top border (the bar's bottom line) is on screen; the curve and the side line are off to the left. So it is only a strip then (100vh tall again the moment the menu opens, and only after the close has finished sliding): a full-screen layer, even a nearly empty one, is what costs iPhones memory when pinch-zoomed. It gets will-change only while it slides (theme.js sets body.menu-moving). */ body:not(.menu-open) .menu-outline{height:calc(var(--curve) + 2px)} body.menu-open .menu-outline{transform:none;transition-delay:0s} body.menu-moving .menu-outline{will-change:transform} /* top bar underglow: stops where the menu begins (moves in sync with the menu) */ .topbar::before{ content:"";position:absolute;left:calc(var(--menu-w) + var(--curve));right:calc(var(--menu-slide) * -1);top:100%;height:var(--glow-size);pointer-events:none; background:linear-gradient(to bottom,var(--ug0),var(--ug1) 20%,var(--ug2) 40%,var(--ug3) 65%,transparent); transform:translateX(calc(var(--menu-slide) * -1)); transition:transform var(--menu-speed) cubic-bezier(.3,.8,.3,1); } body.menu-open .topbar::before{transform:none} .search{display:flex;align-items:center;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.15);padding:0 4px .6rem;margin-bottom:1rem} .search svg{width:20px;height:20px;flex:none} .search input{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;min-width:0} .search input::placeholder{color:var(--muted)} .side-menu ul{list-style:none;margin:0;padding:0} .side-menu .menu a{display:block;padding:.65rem .5rem;color:#fff;text-decoration:none;transition:text-shadow var(--glow-speed) ease} .side-menu .menu a:hover,.side-menu .menu a:focus-visible{text-shadow:0 0 10px rgba(255,255,255,.75),0 0 22px rgba(255,255,255,.35)} .side-menu .menu .is-here>a{opacity:var(--menu-here-opacity,.4);cursor:default;pointer-events:none;text-shadow:none} /* the page you're on: greyed out, no link, no hover glow (functions.php drops its href) */ .side-menu .sub-menu{display:none;font-size:.95rem;opacity:.9} .side-menu li.open>.sub-menu{display:block} .side-menu li.menu-item-has-children>a::after{content:" ▾";opacity:.6} .side-menu hr{border:0;border-top:1px solid rgba(255,255,255,.15);margin:1.25rem 0} /* social icons */ .social{display:flex;justify-content:center;gap:1.25rem;list-style:none;margin:0;padding:0} .social li{list-style:none} .social a{color:var(--muted);display:grid;place-items:center} /* same grey-white as the copyright line */ .social svg{width:22px;height:22px} /* ---------- layout ---------- */ .wrap{max-width:800px;margin:0 auto;padding:calc(var(--bar-full) + 32px) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px))} .hero + .wrap{padding-top:24px;max-width:900px} .archive-title{text-align:center;margin:0 0 1.5rem;font-size:1.6rem} /* ---------- cards ---------- */ .card{position:relative;border-radius:var(--radius);padding:8px;margin-bottom:var(--post-gap);transition:border-color .2s,box-shadow .2s} .card:not(.post-body):hover{border-color:rgba(255,255,255,.5);box-shadow:0 0 32px rgba(255,255,255,.15)} .card-img{position:relative;display:block;height:360px;overflow:hidden;border-radius:16px;border:1px solid var(--edge);transition:border-color .2s} .card:not(.post-body):hover .card-img{border-color:var(--card-img-hover-edge,rgba(255,255,255,.39))} /* brightens only half as much as the card border (--edge .28 -> .5) */ .card-img img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block; transform:translate(calc(var(--mx,0) * var(--card-shift, 5px) * -1),calc(var(--my,0) * var(--card-shift, 5px) * -1)); transition:left var(--card-speed, 500ms) ease,top var(--card-speed, 500ms) ease,width var(--card-speed, 500ms) ease,height var(--card-speed, 500ms) ease,transform .2s ease-out} .card:hover .card-img img{ left:calc(var(--card-zoom, 5px) * -1);top:calc(var(--card-zoom, 5px) * -1); width:calc(100% + var(--card-zoom, 5px) * 2);height:calc(100% + var(--card-zoom, 5px) * 2)} .card-title{font-size:1.25rem;line-height:1.3;margin:.9rem .6rem .4rem} .card-title a{color:inherit;text-decoration:none} .card-excerpt{margin:0 .6rem;font-size:.95rem;line-height:1.5} .card-excerpt p{margin:0} .card-meta{display:flex;justify-content:flex-end;align-items:center;gap:.35rem;color:var(--muted);font-size:.7rem;padding:.6rem .8rem .3rem} .card-meta .when,.card-meta .cats{opacity:.6;transition:opacity .2s ease} .card-meta .when{display:inline-flex;align-items:center;gap:.35rem;cursor:default} .card-meta svg{width:12px;height:12px} /* clock hands sweep once when the date is hovered */ .hand-min,.hand-hour{transform-box:view-box;transform-origin:12px 12px} .when:hover .hand-min{animation:hand-spin .9s cubic-bezier(.5,0,.25,1)} .when:hover .hand-hour{animation:hand-nudge .9s cubic-bezier(.5,0,.25,1)} @keyframes hand-spin{to{transform:rotate(360deg)}} @keyframes hand-nudge{50%{transform:rotate(30deg)}} .card-meta .cats{margin-right:auto} .card-meta .cats a{color:var(--muted);transition:color .2s ease} .card-meta .cats:hover{opacity:1} .card-meta .cats a:hover,.card-meta .cats a:focus-visible{color:#fff} .nav-links{display:flex;justify-content:center;gap:.5rem;margin:1rem 0;flex-wrap:wrap} .nav-links .page-numbers{color:#fff;text-decoration:none;padding:.4rem .9rem;border:1px solid var(--edge);border-radius:999px;background:var(--smoke)} .nav-links .current{background:rgba(255,255,255,.2)} /* ---------- single post ---------- */ .hero{position:relative;height:min(52vh,460px);min-height:320px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center} .hero-img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover; transition:left var(--hero-speed, 1000ms) ease,top var(--hero-speed, 1000ms) ease,width var(--hero-speed, 1000ms) ease,height var(--hero-speed, 1000ms) ease} .hero:hover .hero-img{ left:calc(var(--hero-zoom, 5px) * -1);top:calc(var(--hero-zoom, 5px) * -1); width:calc(100% + var(--hero-zoom, 5px) * 2);height:calc(100% + var(--hero-zoom, 5px) * 2)} .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.3) 35%,var(--bg))} .hero-title{position:relative;z-index:2;margin:0;padding:0 1rem 2rem;max-width:900px;text-align:center;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.2} .hero.no-img{height:auto;min-height:0;padding-top:calc(var(--bar-full) + 40px)} .post-body{padding:8px} .entry{padding:3.4rem 1.25rem .5rem;overflow-wrap:anywhere} .entry.is-page{padding-top:1rem} .entry a{color:var(--link)} .entry a:not(.wp-block-button__link):not(.wp-element-button):hover,.entry a:not(.wp-block-button__link):not(.wp-element-button):focus-visible{color:var(--link-hover, #ff4fd8);text-shadow:0 0 var(--link-glow-size, 8px) var(--link-glow, rgba(255,79,216,.55))} .entry img{border-radius:var(--lb-radius, 15px);max-width:100%;height:auto!important} /* height:auto!important beats old inline "width:677px;height:369px" from the visual editor, so images scale proportionally on phones */ .entry figure,.entry .wp-caption{max-width:100%} .entry .wp-caption{width:auto!important} /* classic-editor captions carry an inline pixel width too */ .entry pre{background:var(--code-bg, rgba(0,0,0,.5));border:1px solid var(--edge);border-radius:var(--lb-radius, 15px);padding:var(--code-pad, 1.1rem 1.3rem);overflow:auto;color:var(--code-color, #b4b8c4);font-size:var(--code-font-size, 19px);line-height:var(--code-line-height, 1.6);max-height:var(--code-max-height, 350px);overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-width:thin;scrollbar-color:var(--code-scroll-thumb) transparent} /* y:auto = the page keeps scrolling when the block is small or you reach its end */ .entry pre code{font-size:inherit;line-height:inherit;color:inherit} /* (the inline-code size rule below must not shrink code inside a block) */ .entry code{font-size:.9em} .entry blockquote{margin:1rem 0;padding:.25rem 1rem;border-left:3px solid var(--edge);color:#ddd} .entry hr{border:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);margin:1.5rem 0} .entry figure{margin:1rem 0} .entry figcaption{color:var(--muted);font-size:.85rem;text-align:center} .share-btn{ position:absolute;top:14px;right:14px;width:58px;height:34px;border-radius:999px; border:1px solid var(--edge);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center; } .share-btn{transition:border-color .3s ease,box-shadow .3s ease} .share-btn:focus-visible{border-color:rgba(255,255,255,.75);box-shadow:0 0 10px rgba(255,255,255,.35),inset 0 0 8px rgba(255,255,255,.18)} @media (hover:hover){.share-btn:hover{border-color:rgba(255,255,255,.75);box-shadow:0 0 10px rgba(255,255,255,.35),inset 0 0 8px rgba(255,255,255,.18)}} .share-btn svg{width:18px;height:18px} .related h2{text-align:center;font-size:1.8rem;margin:2.5rem 0 1.25rem} .rel-item{position:relative;--radius:20px} /* holds the hover colour glow (the card itself clips its picture, so the glow can't live inside it); --radius = the card's 20px corners */ .related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .rel-card{position:relative;display:block;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--edge);text-decoration:none;background:#000} .rel-card{box-shadow:0 0 24px var(--glow);transition:border-color var(--rel-speed, 300ms) ease,box-shadow var(--rel-speed, 300ms) ease} .rel-card:hover{border-color:rgba(255,255,255,.5);box-shadow:0 0 32px rgba(255,255,255,.15)} .rel-card img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block; transition:left var(--rel-speed, 300ms) ease,top var(--rel-speed, 300ms) ease,width var(--rel-speed, 300ms) ease,height var(--rel-speed, 300ms) ease} .rel-card:hover img,.rel-card:focus-visible img{ left:calc(var(--rel-zoom, 5px) * -1);top:calc(var(--rel-zoom, 5px) * -1); width:calc(100% + var(--rel-zoom, 5px) * 2);height:calc(100% + var(--rel-zoom, 5px) * 2)} .rel-card::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,var(--rel-dim));transition:opacity var(--rel-speed, 300ms) ease} .rel-card:hover::before,.rel-card:focus-visible::before{opacity:0} .rel-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 60%)} .rel-card span{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;font-weight:500;line-height:1.3} /* ---------- share popup ---------- */ .share{border:1px solid var(--edge);border-radius:var(--radius);color:#fff;padding:2rem 1.5rem 1.5rem;width:min(420px,92vw);text-align:center;box-shadow:0 0 40px var(--glow)} .share::backdrop{background:transparent} .share-close{position:absolute;top:8px;right:8px;width:40px;height:40px} .share-close svg{width:20px;height:20px} .share-thumb{width:150px;height:auto;border-radius:12px;border:1px solid var(--edge);display:block;margin:0 auto 1.25rem} .share-btns{display:flex;justify-content:center;gap:16px;margin-bottom:1.25rem} .share-btns a{width:72px;height:72px;border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;color:#fff;text-decoration:none;transition:background .2s,transform .2s} .share-btns a svg{width:28px;height:28px} .share-btns a:hover{transform:scale(1.06)} .share-btns .sh-facebook{color:#4267b2} .share-btns .sh-facebook:hover{background:#4267b2;color:#fff} .share-btns .sh-x:hover{background:#1d9bf0} .share-btns .sh-mail{color:#8ff0d0} .share-btns .sh-mail:hover{background:#8ff0d0;color:#000} .share-url{width:100%;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--edge);color:#fff;padding:.7rem 1.1rem;font:inherit;font-size:.9rem;outline:0} .share-url:focus{border-color:#fff} /* ---------- footer ---------- */ .site-footer{text-align:center;padding:2rem 1rem 2.5rem;color:var(--muted);font-size:.85rem} .site-footer .social{margin-bottom:2rem} .site-footer .social svg{width:28px;height:28px} .site-footer p{margin:0} .site-footer .footer-links{margin-top:.4rem} .site-footer .footer-links a{color:inherit;text-decoration:none;opacity:var(--footer-link-opacity,.55);transition:opacity .2s ease} .site-footer .footer-links a:hover,.site-footer .footer-links a:focus-visible{opacity:1} @media(max-width:600px){ .card-img{height:240px} .entry{padding-left:.75rem;padding-right:.75rem} } @media(prefers-reduced-motion:reduce){ *{transition:none!important} .orbs{display:none} .when:hover .hand-min,.when:hover .hand-hour{animation:none} .share-btn:hover svg,.share-btn:focus-visible svg{animation:none} .social a:hover .shine,.social a:focus-visible .shine,.social a.shine-now .shine{animation:none} } /* ---------- burger: glows on hover, turns into a "<-" arrow while the menu is open ---------- An inline SVG (header.php). The top and bottom lines are "wet noodles": each is a dash sliding along its own path. The path starts with the line itself, then loops around the right end of the middle line and finishes as one half of the arrow point. Opening: the bottom line's right end leads, is dragged up and around the middle line and arrives at the tip as the UPPER half of the point; the top line does the mirror image and becomes the LOWER half. The body follows the curve behind its leading end and shortens from 21 to 10 units on the way. Closing slides them back the same way. Speed: --burger-speed. The numbers below belong to the paths in header.php. Each path has pathLength="73.17" (its real length), so every browser scales the dash units to its OWN measurement of the curve (Safari and Chrome measure curves slightly differently, and an exact fit showed a sliver of the curve as a little hook on iPhone). The straight start (23) and the straight arrow half (12) are each 2 units longer than the visible part (21 at rest, 10 as an arrow half), so the dash ends never touch a curve. Arrow offset = 10 - 73.17 = -63.17. Change the paths and re-measure with getTotalLength(). */ .menu-toggle .burger{display:block;width:24px;height:20px;overflow:visible;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round; transition:filter var(--glow-speed) ease} .burger .b-top,.burger .b-bot{ stroke-dasharray:21 120;stroke-dashoffset:0; transition:stroke-dashoffset var(--burger-speed, 650ms) cubic-bezier(.55,0,.25,1),stroke-dasharray var(--burger-speed, 650ms) cubic-bezier(.55,0,.25,1); } body.menu-open .burger .b-top,body.menu-open .burger .b-bot{stroke-dasharray:10 120;stroke-dashoffset:-63.17} .menu-toggle:hover .burger,.menu-toggle:focus-visible .burger{filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,255,255,.45))} /* ---------- drifting orbs (count/size/speed/colour are set in functions.php: ss_orb_settings) ---------- */ .orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} /* Each orb is ONE soft gradient: the bright core plus the faint glow around it (measured from the old blurred box-shadow, which looked the same but had to be blurred on every redraw). The element covers the whole glow (8.2 x --s) and is drawn at its LARGEST size (x1.8) and scaled down while it flies, so the graphics layer is drawn once and never re-rendered bigger. The idle logo orbs in theme.js use the same 1.8 (ORB_DRAW). */ .orbs i{ --hs:var(--h),var(--sat,90%); position:absolute;left:50%;top:50%;width:calc(var(--s)*14.76);height:calc(var(--s)*14.76);opacity:0; background:radial-gradient(circle closest-side, hsla(var(--hs),88%,.95) 0%, hsla(var(--hs),70%,.35) 7.76%, hsla(var(--hs),70%,.017) 12.2%, hsla(var(--hs),70%,.067) 12.2%, hsla(var(--hs),70%,.062) 19.5%, hsla(var(--hs),70%,.056) 26.8%, hsla(var(--hs),70%,.046) 36.6%, hsla(var(--hs),70%,.035) 46.3%, hsla(var(--hs),70%,.023) 58.5%, hsla(var(--hs),70%,.0137) 70.7%, hsla(var(--hs),70%,.0074) 82.9%, hsla(var(--hs),70%,.0042) 92.7%, hsla(var(--hs),70%,0) 100%); animation:orb-drift var(--dur) linear var(--delay) infinite;will-change:transform,opacity; } /* orbs left out on small screens (--orbs-small-screen): not drawn at all, so they cost nothing */ .orbs i.off{display:none} /* phones & tablets, page settled (--orbs-still-touch): theme.js copies each orb's current position/opacity into its inline style and the animation is switched off, so the orbs are painted once into the single .orbs layer instead of ~200 GPU layers (a paused animation still keeps its own layer). Any speed-up switches the animations back on and continues them from the same moment. */ html.orbs-still .orbs i{will-change:auto} html.orbs-still .orbs i:not(.x){animation:none} /* extra orbs made by theme.js while the site is idle (JS moves them, so no CSS drift) */ .orbs i.x{animation:none;opacity:0} @keyframes orb-drift{ 0%{transform:translate(-50%,-50%) scale(.1667);opacity:0} /* = the old .3 and 1.8, divided by the 1.8 the orb is drawn at */ 12%{opacity:var(--o,.7)} 70%{opacity:calc(var(--o,.7)*.65)} 100%{transform:translate(calc(-50% + var(--dx)*1vw),calc(-50% + var(--dy)*1vh)) scale(1);opacity:0} } /* ---------- share: copied confirmation ---------- */ .share-url-wrap{position:relative} .copied{ position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,6px); background:rgba(255,255,255,.95);color:#000;font-size:.8rem;font-weight:500; padding:.25rem .75rem;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s; } .copied.show{opacity:1;transform:translate(-50%,0)} .share-url{cursor:copy} /* ---------- post titles ---------- */ .card-title,.hero-title{color:rgba(255,255,255,var(--title-opacity))} /* ---------- share button: paper plane shoots out and returns ---------- */ .share-btn{overflow:hidden} .share-btn:focus-visible svg{animation:plane-fly .8s 1} @media (hover:hover){.share-btn:hover svg{animation:plane-fly .8s 1}} /* mouse only: on a phone a tap leaves a sticky :hover that re-ran this when the popup closed */ @keyframes plane-fly{ 0%{transform:translate(0,0);opacity:1;animation-timing-function:ease-in} 40%{transform:translate(30px,-30px);opacity:0} 41%{transform:translate(-30px,30px);opacity:0;animation-timing-function:ease-out} 100%{transform:translate(0,0);opacity:1} } /* Click: the plane flies off the way it faces and stays away while the popup is open; closing brings it back into the icon. */ .share-btn svg{transition:transform .45s cubic-bezier(.5,0,.9,.4),opacity .35s ease} .share-btn.sent svg,.share-btn.sent:hover svg,.share-btn.sent:focus-visible svg{transform:translate(30px,-30px);opacity:0;animation:none} .share-btn.fly svg{animation:plane-fly .8s 1} /* one flight shortly after a post appears (theme.js) */ .share-btn.returning svg,.share-btn.returning:hover svg{animation:plane-return .55s cubic-bezier(.2,.8,.3,1) both} @keyframes plane-return{from{transform:translate(-30px,30px);opacity:0}to{transform:none;opacity:1}} /* touch screens: the plane never disappears on tap (theme.js doesn't add these classes there either; this is the safety net) */ @media (hover:none){.share-btn.sent svg,.share-btn.sent:hover svg,.share-btn.sent:focus-visible svg,.share-btn.returning svg,.share-btn.returning:hover svg{transform:none;opacity:1;animation:none}} /* ---------- top bar: same tint on every page ---------- */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* The frosted glass is drawn by .topbar::after so it can start BELOW the iPhone status bar / Dynamic Island area (--bar-status-blur: 0) and leave that strip crisp; the strip itself just gets the same tint. On every other device the strip is 0px tall and nothing changes. */ .topbar{background:linear-gradient(var(--bar-smoke),var(--bar-smoke)) 0 0 / 100% calc(env(safe-area-inset-top, 0px) * (1 - var(--bar-status-blur, 0))) no-repeat; -webkit-backdrop-filter:none;backdrop-filter:none} .topbar::after{ content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top, 0px) * (1 - var(--bar-status-blur, 0)));pointer-events:none; background:var(--bar-smoke); -webkit-backdrop-filter:blur(var(--blur)) brightness(var(--bar-brightness)); backdrop-filter:blur(var(--blur)) brightness(var(--bar-brightness)); } /* The glass is z-index 0 (NOT -1: a backdrop-filter on a negative z-index layer only sees the bar's own background, so the page behind showed through sharp, with no blur). Everything else in the bar is lifted above it. */ .topbar>.menu-toggle,.topbar>.brand{position:relative;z-index:1} .topbar>.menu-outline,.topbar::before{z-index:1} } /* ---------- share popup: fade in/out with page blur ---------- */ .share-scrim{ position:fixed;inset:0;z-index:90;pointer-events:none; background:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px); visibility:hidden; /* not drawn while the popup is closed (it sits on every page) */ transition:background-color var(--share-fade) ease,backdrop-filter var(--share-fade) ease,-webkit-backdrop-filter var(--share-fade) ease,visibility 0s linear var(--share-fade); } body.share-open .share-scrim{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(var(--share-blur));backdrop-filter:blur(var(--share-blur));visibility:visible;transition-delay:0s} .share{opacity:0;transform:scale(.94);transition:opacity var(--share-fade) ease,transform var(--share-fade) cubic-bezier(.2,.8,.3,1)} .share.is-open{opacity:1;transform:none;transition-delay:calc(var(--share-fade)*.3)} /* window appears once the blur has started */ /* ---------- social icons: plain brand-coloured SVGs with a diagonal shine on hover ---------- */ /* Icons are brand-coloured by default; a white shine band sweeps across at 45 degrees on hover. */ .shine{transform:translateX(-26px)} .social a:hover .shine,.social a:focus-visible .shine{animation:shine .75s cubic-bezier(.25,.55,.35,1)} /* no slow start: the band is visible on the very first frame */ @keyframes shine{from{transform:translateX(-15px)}to{transform:translateX(26px)}} .social a.shine-now .shine{animation:shine .75s cubic-bezier(.25,.55,.35,1)} /* the one-off shine (footer icons when they first scroll into view, menu icons on the first open): theme.js adds/removes the class */ /* ---------- wide windows: 2 columns on the posts list ---------- */ /* Triggered by the window's ASPECT RATIO (width / height of the page area), not by pixel width. Careful: the page area is shorter than the monitor because of browser tabs/toolbars, so a maximised window on a 16:9 monitor measures about 2:1, not 16:9. That is why the old 16/9 trigger always matched. Reference points: 16/9 = 1.78 | maximised on a 16:9 screen ~ 2.0 | 11/5 = 2.2 (current) | 21/9 = 2.33 Raise the ratio to need a wider window, lower it to switch sooner. The min-width stops tiny windows from matching. */ @media (min-aspect-ratio:11/5) and (min-width:1000px){ .wrap-list{max-width:var(--wrap-wide)} .posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--post-gap-x)} .posts .card{display:flex;flex-direction:column} .posts .card-meta{margin-top:auto} } /* ---------- subtle light gradient at the top of post + page bodies ---------- */ .post-body::before{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(to bottom,rgba(255,255,255,var(--post-sheen)),transparent var(--post-sheen-height)); } /* ---------- mobile: keep the featured image stable while the browser's address bar shows/hides ---------- */ /* svh = the "small" viewport height, which does NOT change when the address bar collapses (vh can) */ @supports (height:1svh){ .hero{height:min(52svh,460px)} } /* touch screens have no real hover: don't let taps/scrolls trigger the zoom effects */ @media (hover:none){ .hero:hover .hero-img,.card:hover .card-img img,.rel-card:hover img,.rel-card:focus-visible img{left:0;top:0;width:100%;height:100%} .rel-card:hover::before,.rel-card:focus-visible::before{opacity:1} } /* ---------- page transitions (see js/theme.js) ---------- */ /* #swap holds everything that changes between pages; the top bar, side menu, orbs and logo live outside it. overflow:clip stops the zooming page from adding scrollbars while it scales. */ #swap-clip{overflow:clip;overflow-clip-margin:max(40px,var(--aura-reach,40px),calc(var(--aura-blur,9px) * 6))} /* wide enough that the hover glow is never cut off */ #swap:focus{outline:none} html.navigating #swap{pointer-events:none} /* Page loaded for real after a transition: hidden until theme.js starts the zoom-in (the animation reveals it). The 2.5s failsafe shows the page anyway if scripts are blocked. */ html.arriving #swap{opacity:0;animation:arrive-failsafe .01s 2.5s forwards} @keyframes arrive-failsafe{to{opacity:1}} .card:not(.post-body){cursor:pointer} /* ================================================================== */ /* Custom additions (logo, image borders, About page lightbox). */ /* These came from custom-styles.css and are now part of the theme. */ /* ================================================================== */ /* LOGO LOGO LOGO LOGO LOGO*/ /* LOGO LOGO LOGO LOGO LOGO*/ /* LOGO LOGO LOGO LOGO LOGO*/ /* Container sizing & positioning */ .roygbiv { position: relative; width: 140px; height: 52px; display: block; } /* Base styles for all logo images */ .roygbiv .logo-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: lighten; /* Smooth transition for hover on/off */ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } /* The logo is five inline SVGs that all reuse one shape (see marilyn_logo_svg_layers() in functions.php); each gets one colour from :root. */ .logo-defs{position:absolute;width:0;height:0;overflow:hidden} .roygbiv svg.logo-img,.roygbiv canvas.logo-img{display:block} /* canvas: theme.js swaps the SVGs for canvases with smoother edges; it reads each layer's colour from `color` */ .roygbiv .logo-img-1{fill:var(--logo-c1);color:var(--logo-c1)} .roygbiv .logo-img-2{fill:var(--logo-c2);color:var(--logo-c2)} .roygbiv .logo-img-3{fill:var(--logo-c3);color:var(--logo-c3)} .roygbiv .logo-img-4{fill:var(--logo-c4);color:var(--logo-c4)} .roygbiv .logo-img-5{fill:var(--logo-c5);color:var(--logo-c5)} /* Base keyframe animation template */ @keyframes logoSwirlAndDisperse { 0%, 30% { transform: translate(0, 0) rotate(0deg); } 50% { transform: rotate(180deg) translate(0, var(--orbit-radius)) rotate(-180deg); } 75% { transform: rotate(360deg) translate(0, var(--orbit-radius)) rotate(-360deg); } 100% { transform: translate(0, var(--final-y)); } } /* Apply animation on page load with perfectly matched swirl and final offsets */ .roygbiv.is-animating .logo-img-1 { --orbit-radius: var(--y1); --final-y: var(--y1); animation: logoSwirlAndDisperse 3.5s ease-in-out forwards; } .roygbiv.is-animating .logo-img-2 { --orbit-radius: var(--y2); --final-y: var(--y2); animation: logoSwirlAndDisperse 3.5s ease-in-out forwards; } .roygbiv.is-animating .logo-img-3 { --orbit-radius: var(--y3); --final-y: var(--y3); animation: logoSwirlAndDisperse 3.5s ease-in-out forwards; } .roygbiv.is-animating .logo-img-4 { --orbit-radius: var(--y4); --final-y: var(--y4); animation: logoSwirlAndDisperse 3.5s ease-in-out forwards; } .roygbiv.is-animating .logo-img-5 { --orbit-radius: var(--y5); --final-y: var(--y5); animation: logoSwirlAndDisperse 3.5s ease-in-out forwards; } /* Resting position (Dispersed) after animation completes */ .roygbiv:not(.is-animating) .logo-img-1 { transform: translate(0, var(--y1)); } .roygbiv:not(.is-animating) .logo-img-2 { transform: translate(0, var(--y2)); } .roygbiv:not(.is-animating) .logo-img-3 { transform: translate(0, var(--y3)); } .roygbiv:not(.is-animating) .logo-img-4 { transform: translate(0, var(--y4)); } .roygbiv:not(.is-animating) .logo-img-5 { transform: translate(0, var(--y5)); } /* Hover state: Perfectly smooth align transition */ .roygbiv:not(.is-animating):hover .logo-img { transform: translate(0, 0); } /* LOGO LOGO LOGO LOGO LOGO*/ /* LOGO LOGO LOGO LOGO LOGO*/ /* LOGO LOGO LOGO LOGO LOGO*/ /* ALL IMAGES HAVE BORDERS NOW */ .entry img { border: 1px solid rgba(255,255,255,.25); } /* About Me page image (the click-to-enlarge popup is now the theme lightbox, see "image lightbox" below) */ .wp-image-534 { box-shadow: 0 0 15px 0px rgba(255, 255, 255, 0.10); border-radius: 15px; } @media (min-width: 782px) { .wp-image-534 { margin-left: 1rem !important; /* Adjust this value (e.g., 1.5rem, 30px) for more or less space */ } } @media (max-width: 781px) { /* 1. Reset and center the parent figure wrapper */ figure.wp-block-image:has(.wp-image-534), figure.alignright:has(.wp-image-534) { float: none !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; width: 100% !important; max-width: 100% !important; } /* 2. Center the image itself and prevent desktop float/width inheritance */ img.wp-image-534 { display: block !important; float: none !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 318px !important; /* Keeps your image at a neat size on mobile */ } } .bump-me{ margin-top: -20px !important; } /* ---------- logo: the JS drives the colour layers while hovering (see initLogoFx in theme.js) ---------- */ .roygbiv.logo-driven .logo-img{transition:none} /* only while the JS loop is moving the layers; otherwise CSS transitions handle the hover */ /* ---------- image lightbox (js/theme.js + inc/lightbox.php) ---------- */ /* Same look as posts: 1px border, soft glow. The picture grows from its thumbnail while the page behind blurs. */ /* Images that open in the lightbox: plain pointer (no magnifier), border brightens on hover, and a small "fullscreen" badge fades in at the picture's top-right corner (drawn by theme.js as .lb-hint). No glow. */ [data-marilyn-lightbox] img,[data-marilyn-lightbox] img:hover{cursor:pointer!important} /* !important: WordPress' own lightbox CSS asks for a magnifier */ /* Fullscreen badge: just four corner brackets in the top-right corner of the picture. They open a little while you hover and close again before the badge fades away. Dark brackets on light pictures, light brackets on dark ones (picked by theme.js). */ .lb-hint{ position:absolute;z-index:42;width:24px;height:24px;pointer-events:none;color:#fff;--under:rgba(0,0,0,.4); opacity:0;transform:scale(.8);transition:opacity .26s ease,transform .26s ease; /* leaving: shrinks and fades at the same moment the brackets close */ } .lb-hint.on{opacity:1;transform:none} .lb-hint.on.rest{opacity:var(--lb-hint-rest, .5);transition:opacity 1.3s ease,transform .2s ease} /* after each animation it eases back (slowly), so it covers less of the picture */ .lb-hint.instant{transition:none!important;opacity:0!important} /* used when the lightbox opens: gone at once, never visible on top of the blur */ .lb-hint.on-light{color:#111;--under:rgba(255,255,255,.55)} .lb-hint svg{width:100%;height:100%;display:block;overflow:visible} .lb-hint .m{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .lb-hint .u{fill:none;stroke:var(--under);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round} .lb-hint .b{transition:transform .26s ease} .lb-hint .tl{--dx:-1;--dy:-1} .lb-hint .br{--dx:1;--dy:1} /* Resting state = the small, closed version. Appearing (intro) and every --lb-hint-bounce-every while you keep hovering (bounce): the two brackets spring open a little, bounce back, then settle into the small version again. Bounce also brings the badge back to full opacity while it plays, then it fades to the rest opacity. */ .lb-hint.intro .b,.lb-hint.bounce .b{animation:hint-bounce .75s ease-in-out} .lb-hint.bounce{animation:hint-flash 2s ease} @keyframes hint-flash{0%{opacity:var(--lb-hint-rest, .5)}12%{opacity:1}42%{opacity:1}100%{opacity:var(--lb-hint-rest, .5)}} /* up to full, hold while it opens and closes, then a slow fade back */ @keyframes hint-bounce{ /* a single open, then close */ 0%{transform:translate(0,0)} 45%{transform:translate(calc(var(--dx) * 1.6px),calc(var(--dy) * 1.6px))} 100%{transform:translate(0,0)} } .lb-scrim{ position:fixed;inset:0;z-index:43;cursor:pointer; /* under the top bar (60) and menu, over the page */ background:rgba(0,0,0,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px); transition:background-color var(--lb-speed) ease,backdrop-filter var(--lb-speed) ease,-webkit-backdrop-filter var(--lb-speed) ease; } .lb-scrim.on{background:rgba(0,0,0,var(--lb-dim));-webkit-backdrop-filter:blur(var(--lb-blur));backdrop-filter:blur(var(--lb-blur))} .lb-box{ position:fixed;z-index:44;overflow:hidden;cursor:pointer;outline:none;background-color:rgba(0,0,0,0); /* under the top bar, so closing never flashes over it. See-through at first / when closed so PNGs look exactly as in the post */ border:1px solid var(--edge);border-radius:var(--lb-radius); box-shadow:0 0 var(--lb-glow-size, 15px) rgba(255,255,255,0); /* invisible until .on, so the glow can fade in and out */ transition:left var(--lb-speed) cubic-bezier(.2,.8,.2,1),top var(--lb-speed) cubic-bezier(.2,.8,.2,1),width var(--lb-speed) cubic-bezier(.2,.8,.2,1),height var(--lb-speed) cubic-bezier(.2,.8,.2,1),opacity var(--lb-speed) ease,box-shadow var(--lb-speed) ease,background-color var(--lb-speed) ease,border-color var(--lb-speed) ease; } .lb-box.on{box-shadow:0 0 var(--lb-glow-size, 15px) var(--lb-glow, rgba(255,255,255,.10));background-color:var(--lb-bg, rgba(0,0,0,.72))} /* a dark backing, fading in while it opens... */ .lb-box.closing{background-color:rgba(0,0,0,0)} /* ...and it fades away while the box shrinks back, so landing on the post's own darkness never doubles it */ .lb-box.fade{opacity:0} .lb-scrim,.lb-box{touch-action:manipulation} /* pinch-zoom and panning still work; no double-tap-zoom delay */ /* While you pinch-zoom the open picture the page behind is not drawn at all and the blurs become plain dark: re-blurring full-screen layers at 5x zoom (plus the animated orbs) is what can make a phone browser run out of memory and reload the page. theme.js sets html.lb-zoomed. */ html.lb-zoomed .orbs{visibility:hidden} html.lb-zoomed #swap-clip{visibility:hidden} html.lb-zoomed .lb-scrim{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:none} html.lb-zoomed .topbar,html.lb-zoomed .topbar::after,html.lb-zoomed .side-glass{-webkit-backdrop-filter:none;backdrop-filter:none} /* Pinch-zoomed PAGE (any page, theme.js sets html.zoomed while the page is zoomed in): phones re-draw every layer at the zoomed size, so the 200 orb layers and the frosted-glass blurs grow with the square of the zoom and the browser runs out of memory and reloads the tab. While zoomed: no orbs (the nebula stays) and no blur anywhere; glass becomes plain dark tint. Everything returns when zoomed back out. theme.js turns it on as soon as two fingers touch (before the zoom changes) and off once the pinch is over and the page is back at 1x. html.safe-start (set before first paint by the head script in functions.php) is the same mode right after a refresh / back-forward on a phone (iPhones restore the old zoom while the page loads) or after the tab crashed; theme.js lifts it once the page is confirmed at 1x. */ html.zoomed .orbs,html.safe-start .orbs{visibility:hidden} /* phones & tablets: the orbs FADE out when a pinch starts (--zoom-orb-out; zoom-safe mode starts with the first two-finger touch, while the zoom is still small, so the short fade costs little) and fade back in at normal size (--zoom-orb-in). Desktop keeps the instant switch. */ @media (hover:none){ .orbs{transition:opacity var(--zoom-orb-in, 900ms) ease} html.zoomed .orbs,html.safe-start .orbs{opacity:0;transition:opacity var(--zoom-orb-out, 350ms) ease,visibility 0s linear var(--zoom-orb-out, 350ms)} } html.zoomed *,html.zoomed *::before,html.zoomed *::after, html.safe-start *,html.safe-start *::before,html.safe-start *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.zoomed .glass,html.zoomed .share,html.safe-start .glass,html.safe-start .share{background:rgba(10,10,14,.9)} html.zoomed .topbar::after,html.zoomed .side-glass,html.safe-start .topbar::after,html.safe-start .side-glass{background:rgba(6,6,12,.95)} /* iPhones only tile a layer (draw it in small pieces) when its CSS size x zoom is over ~2000px; a smaller layer is drawn as ONE image whose memory grows with the square of the zoom. A phone is ~390px wide, so a full-width layer stays one big image all the way to 5x. So while zoomed, as few full-screen / full-width layers as possible: - the nebula stops being a fixed layer and is pinned into the page where it was (theme.js sets --zoom-top); it then scrolls with the page. (An earlier "make it taller than 2000px" trick was dropped: on iPhone a fixed layer taller than the screen can be panned to when zoomed, which flung the view to an empty area.) - the lightbox's dark layer is see-through (no image to draw at all) and the page background turns black instead (same look); - code blocks don't scroll (a scroll box is its own layer on iPhone) and the "Show more" cursor stops blinking. */ html.zoomed body::before,html.safe-start body::before{position:absolute;top:var(--zoom-top, 0px)} html.lb-zoomed body::before{visibility:hidden} html.lb-zoomed body{background-color:#000} html.zoomed .entry pre{overflow:hidden} html.zoomed .code-cursor,html.zoomed .code-more *{animation:none!important} html.safe-fade .orbs{animation:safe-orbs-in .9s ease both} /* the orbs fade back in when the safe start ends */ @keyframes safe-orbs-in{from{opacity:0}to{opacity:1}} .lb-img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border:0;border-radius:0;transition:opacity var(--lb-nav-fade, 300ms) ease} .lb-img.lb-enter,.lb-img.lb-leave{opacity:0} /* galleries: the next picture fades in over the last one */ /* Gallery lightbox: < and > in lanes beside the picture (js/theme.js keeps the picture clear of them and sets --lb-nav-y = middle of the picture area), so they stay in one spot whatever the shape of the picture. Fade in and out with the page blur. */ .lb-nav{position:fixed;inset:0 0 auto 0;height:0;z-index:45;pointer-events:none;opacity:0;transition:opacity var(--lb-speed) ease} /* over the box (44), under the top bar (60). A 0-tall strip at the top (the arrows hang below it), so its layer is only as big as the arrows, not the whole screen */ .lb-nav.on{opacity:1} /* "2 / 6" under the picture (galleries); fades with the arrows. The picture is fitted above it (--lb-count-room). */ .lb-count{position:fixed;left:50%;bottom:calc(var(--lb-count-room, 40px) / 2 - 2px + env(safe-area-inset-bottom, 0px));transform:translate(-50%,50%); padding:3px 11px;border:1px solid var(--edge);border-radius:999px;background:var(--lb-nav-bg, rgba(0,0,0,.4));color:#fff; font-size:.8rem;line-height:1.4;letter-spacing:.06em;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:.85} /* phones: zoomed into a picture (theme.js) - it may grow past its frame, and the arrows + counter step aside */ .lb-nav.lb-hide{opacity:0} .lb-nav.lb-hide .lb-arrow{pointer-events:none} .lb-box.lb-zoomin{overflow:visible} .lb-box.lb-zoomin .lb-img{border-radius:inherit} .lb-peek{pointer-events:none} /* the neighbouring picture while you slide (theme.js) */ @media (hover:none){.lb-arrow{touch-action:none}} /* phones: a pinch or slide starting on an arrow is the lightbox's too, never a page zoom */ .lb-arrow{ position:absolute;top:var(--lb-nav-y, 50%);transform:translateY(-50%);width:var(--lb-nav-size, 44px);height:var(--lb-nav-size, 44px); display:grid;place-items:center;padding:0;margin:0;border:1px solid var(--edge);border-radius:50%;background:var(--lb-nav-bg, rgba(0,0,0,.4)); color:#fff;opacity:.8;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation; transition:opacity .2s ease,box-shadow .2s ease,border-color .2s ease; } .lb-nav.on .lb-arrow{pointer-events:auto} .lb-arrow svg{width:55%;height:55%;display:block} .lb-prev{left:var(--lb-nav-gap, 16px)} .lb-next{right:var(--lb-nav-gap, 16px)} .lb-next svg{transform:scaleX(-1)} .lb-arrow:focus{outline:none} .lb-arrow:focus-visible{opacity:1;box-shadow:0 0 0 2px rgba(255,255,255,.55)} @media (hover:hover){.lb-arrow:hover{opacity:1;border-color:rgba(255,255,255,.45);box-shadow:0 0 var(--lb-glow-size, 15px) var(--lb-glow, rgba(255,255,255,.10))}} @media (max-width:600px){:root{--lb-nav-size:34px;--lb-nav-gap:4px}} /* phones: smaller buttons in narrower lanes, so the picture keeps most of the width */ /* ---------- logo: wider hover area (the effect keeps following the mouse a bit beyond the artwork) ---------- */ .roygbiv::before{ content:"";position:absolute; left:calc(var(--logo-pad-x) * -1);right:calc(var(--logo-pad-x) * -1); top:calc(var(--logo-pad-y) * -1);bottom:calc(var(--logo-pad-y) * -1); } /* ---------- page change: smoother zoom + glassy shine ---------- */ html.navigating #swap{will-change:transform} /* render the page once and just move it, instead of repainting every frame */ .block-shine{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:5} /* inside each block, clipped to its edges */ .block-shine i{ position:absolute;left:50%;top:50%; background:linear-gradient(90deg,transparent,rgba(255,255,255,var(--shine-opacity)) 50%,transparent); } /* ---------- logo resting offsets (vertical fan of the colour layers). JS reads these too. ---------- */ .entry pre,.lb-code pre{color-scheme:dark} /* dark native scrollbar everywhere */ /* Safari / older browsers that ignore scrollbar-color: slim dark bar */ .entry pre::-webkit-scrollbar,.lb-code pre::-webkit-scrollbar{width:10px;height:10px} .entry pre::-webkit-scrollbar-track,.lb-code pre::-webkit-scrollbar-track,.entry pre::-webkit-scrollbar-corner,.lb-code pre::-webkit-scrollbar-corner{background:transparent} .entry pre::-webkit-scrollbar-thumb,.lb-code pre::-webkit-scrollbar-thumb{background:var(--code-scroll-thumb);border-radius:10px;border:2px solid transparent;background-clip:content-box} .entry pre::-webkit-scrollbar-thumb:hover,.lb-code pre::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45);background-clip:content-box} .roygbiv{--y1:-5.5px;--y2:-3px;--y3:0px;--y4:3px;--y5:6px} /* ---------- code blocks: fixed height, "Show more…" glow, full view ---------- */ .code-wrap{position:relative;margin:1em 0} .code-wrap pre{margin:0} .code-more{ position:absolute;left:1px;right:calc(1px + var(--code-sb, 0px));bottom:1px;height:84px;padding:0 0 10px;border:0;border-radius:0 0 0 calc(var(--lb-radius, 15px) - 1px); display:flex;align-items:flex-end;justify-content:center; background:radial-gradient(ellipse 62% 100% at 50% 100%,var(--code-glow, rgba(255,255,255,.22)) 0%,rgba(255,255,255,.07) 55%,transparent 100%); color:#fff;font:inherit;font-size:.85rem;letter-spacing:.02em;cursor:pointer; opacity:0;pointer-events:none;transition:opacity .25s ease; } .code-wrap.is-long:hover .code-more,.code-wrap.is-long .code-more:focus-visible{opacity:1;pointer-events:auto} .code-label{position:relative;display:inline-block} .code-sizer{visibility:hidden;white-space:nowrap} /* holds the final width so the text doesn't shift while it types */ .code-typed{position:absolute;left:0;top:0;white-space:nowrap} .code-typed .tl{display:inline-block;max-width:1.5em;overflow:hidden;vertical-align:top} .code-typed .code-cursor{margin-left:.12em} .code-sizer .code-cursor{animation:none} /* typed out while it fades in on hover (touch screens: once, when the page appears). The cursor stays solid while typing, then blinks. */ .code-wrap.is-long:hover .code-typed .tl,.code-wrap.is-long .code-more:focus-visible .code-typed .tl{animation:type-letter 1ms steps(1,end) backwards;animation-delay:calc(var(--type-delay,250ms) + var(--i) * var(--type-speed,75ms))} .code-wrap.is-long:hover .code-typed .code-cursor,.code-wrap.is-long .code-more:focus-visible .code-typed .code-cursor{animation-name:cursor-blink-typed;animation-delay:calc(var(--type-delay,250ms) + 9 * var(--type-speed,75ms))} @keyframes cursor-blink-typed{0%,55%{opacity:1}56%,100%{opacity:0}} /* same blink, separate name so it restarts (after the typing) every time you hover */ @keyframes type-letter{from{max-width:0;opacity:0}to{max-width:1.5em;opacity:1}} @media (hover:none){.code-wrap.is-long .code-typed .code-cursor{animation-name:cursor-blink-typed;animation-delay:calc(var(--type-delay,250ms) + 9 * var(--type-speed,75ms))}.code-wrap.is-long .code-typed .tl{animation:type-letter 1ms steps(1,end) backwards;animation-delay:calc(var(--type-delay,250ms) + var(--i) * var(--type-speed,75ms))}} @media (prefers-reduced-motion:reduce){.code-typed .tl{animation:none!important}} .code-cursor{display:inline-block;width:var(--cursor-width,1.1ch);height:1.05em;margin-left:.35em;background:currentColor;vertical-align:text-bottom;animation:cursor-blink var(--cursor-blink,1.06s) steps(1,end) infinite} @keyframes cursor-blink{0%,55%{opacity:1}56%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.code-cursor{animation:none}} @media (hover:none){.code-wrap.is-long .code-more{opacity:.85;pointer-events:auto}} /* touch: no hover, so always show it */ .lb-box.lb-code{cursor:auto;background-color:var(--code-bg, rgba(0,0,0,.5));color:var(--text)} /* starts with the code block's own background so the first frame is identical... */ .lb-box.lb-code.on{background-color:var(--lb-code-bg, rgba(0,0,0,.82))} /* ...then darkens (fades) while it opens */ .lb-box.lb-code{transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color;transition-duration:var(--lb-speed),var(--lb-speed),var(--lb-speed),var(--lb-speed),var(--lb-speed),var(--lb-speed),var(--lb-speed),calc(var(--lb-speed) * .4);transition-delay:0s,0s,0s,0s,0s,0s,0s,calc(var(--lb-speed) * .6);transition-timing-function:cubic-bezier(.2,.8,.2,1),cubic-bezier(.2,.8,.2,1),cubic-bezier(.2,.8,.2,1),cubic-bezier(.2,.8,.2,1),ease,ease,ease,linear} .lb-box.lb-code.closing{border-color:transparent} /* its 1px edge fades out in step with the real block's edge fading in (the last 40% of the shrink), so the two never add up to a brighter line */ .lb-box.lb-code.closing{background-color:rgba(0,0,0,0)} /* the block in the post fades back in underneath (theme.js) while this fades out */ .lb-code pre{margin:0;height:100%;max-height:none;padding:var(--code-pad, 1.1rem 1.3rem);overflow:auto;font-size:var(--code-font-size, 19px);line-height:var(--code-line-height, 1.6);background:transparent;border:0;border-radius:0;color:var(--code-color, #b4b8c4);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--code-scroll-thumb) transparent} /* same size, spacing and padding as the post's block */ .lb-code pre code{font-size:inherit;line-height:inherit} .lb-x{ position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;padding:0;display:grid;place-items:center; border-radius:50%;border:1px solid var(--edge);background:rgba(0,0,0,.45);color:#fff;cursor:pointer; opacity:0;transition:opacity .2s ease,border-color .2s ease; } .lb-box.on .lb-x{opacity:1;transition:opacity .3s ease .12s,border-color .2s ease} .lb-x:hover,.lb-x:focus-visible{border-color:rgba(255,255,255,.75)} .lb-x svg{width:16px;height:16px} .lb-copy{ position:absolute;top:10px;right:52px;z-index:3;width:34px;height:34px;padding:0 8px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:0;overflow:hidden; border-radius:17px;border:1px solid var(--edge);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;font:inherit;font-size:.85rem;white-space:nowrap; opacity:0;transition:opacity .2s ease,border-color .2s ease,width var(--copy-grow,.38s) cubic-bezier(.2,.8,.2,1); } .lb-box.on .lb-copy{opacity:1;transition:opacity .3s ease .12s,border-color .2s ease,width var(--copy-grow,.38s) cubic-bezier(.2,.8,.2,1)} .lb-copy:hover,.lb-copy:focus-visible{border-color:rgba(255,255,255,.75)} .lb-copy svg{width:16px;height:16px;flex:none} .lb-copy .lb-copy-label{max-width:0;opacity:0;overflow:hidden;transition:max-width var(--copy-grow,.38s) cubic-bezier(.2,.8,.2,1),opacity calc(var(--copy-grow,.38s) * .8) ease,margin var(--copy-grow,.38s) ease} .lb-copy.is-copied{width:var(--copy-w,104px)} .lb-copy.is-copied .lb-copy-label{max-width:80px;opacity:1;margin-right:8px} @media (prefers-reduced-motion:reduce){.lb-copy,.lb-copy .lb-copy-label{transition-duration:.01s!important}} /* ---------- slideshows: home-page post previews (.card-img) and the post page's big picture (.hero) ---------- */ @property --p{syntax:"";inherits:false;initial-value:0deg} .slide-set > img{opacity:0} .slide-set > img.on{opacity:1} .slide-set > img.slide-img{pointer-events:none} .card-img.slide-set{isolation:isolate} .slide-dots{display:flex;justify-content:center;align-items:center;gap:var(--dot-gap,9px);margin:.7rem 0 -.1rem;min-height:var(--dot-size,9px)} .slide-dot{all:unset;box-sizing:border-box;position:relative;width:var(--dot-size,9px);height:var(--dot-size,9px);border-radius:50%;cursor:pointer; background:var(--dot-color,rgba(255,255,255,.28));transition:transform .2s ease,box-shadow .2s ease} .slide-dot:hover{transform:scale(1.25)} .slide-dot:focus-visible{outline:2px solid #fff;outline-offset:3px} .slide-dot::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0} /* the clock face */ .slide-dot.is-active{box-shadow:0 0 8px rgba(255,255,255,.25)} .slide-dot.is-active::before{opacity:1;background:conic-gradient(var(--dot-fill,rgba(255,255,255,.72)) var(--p),transparent 0)} .slide-dot.is-active.run::before{animation:dot-wipe var(--slide-interval,5000ms) linear forwards} .slide-dot.is-active.paused::before{animation-play-state:paused} .slide-dot.is-active.held::before,.slide-dot.is-active.still::before{animation:none;background:var(--dot-fill,rgba(255,255,255,.72))} /* picked by hand / reduced motion: solid */ @keyframes dot-wipe{from{--p:0deg}to{--p:360deg}} /* depth: an inner shadow along the sides and bottom of the picture frame, fading in when you hover the preview */ .card-img.slide-set::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0; transition:opacity var(--card-speed,500ms) ease; box-shadow:inset 0 calc(var(--depth-size,48px) * -1) var(--depth-size,48px) calc(var(--depth-size,48px) * -.45) rgba(0,0,0,var(--depth-opacity,.6)), inset 0 0 calc(var(--depth-size,48px) * .8) 0 rgba(0,0,0,calc(var(--depth-opacity,.6) * .75))} .card:hover .card-img.slide-set::after{opacity:1} @media (hover:none){.card-img.slide-set::after{display:none}} @media (prefers-reduced-motion:reduce){.slide-dot,.card-img.slide-set::after{transition:none}} /* ---------- post-preview aura: a soft, slowly rotating colour glow around the outside of a hovered card ---------- theme.js adds the .aura markup on first hover and picks the colours from the orbs. Everything is measured as an ANGLE around the card's centre, so it can start exactly where the mouse touched the edge (--aura-sa) and travel both ways around until the two ends meet: .aura-edge the card's border brightening (revealed by the wave, so the border lights up only where the colour has reached) .aura-blur the settled colour glow, revealed by the wave, with a slow brightness "wave" that rotates WITH the colours .aura-pulse the brighter burst: a hot spot at the touch point that rides the front of the wave and is gone when the ends meet .aura-fx when the mouse leaves, an eraser grows from the exit point (--aura-xa) and dissolves everything. .aura clips it all to the OUTSIDE of the card. */ @property --aura-rot{syntax:"";inherits:true;initial-value:0deg} @property --aura-h{syntax:"";inherits:true;initial-value:0deg} @property --aura-dd{syntax:"";inherits:true;initial-value:0deg} @property --aura-p{syntax:"";inherits:true;initial-value:1} /* 1 while the burst travels, 0 once the two fronts have met */ .aura{--ar:max(var(--aura-reach,40px),calc(var(--aura-blur,9px) * 6));--aura-soft:34deg;--aura-trail:70deg;--aura-front:22deg;--aura-erase-soft:46deg; position:absolute;inset:calc(var(--ar) * -1);padding:var(--ar);border-radius:calc(var(--radius) + var(--ar)); pointer-events:none;z-index:-1;opacity:0; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .aura.on{opacity:1;animation:aura-spin var(--aura-spin,16s) linear infinite} @keyframes aura-spin{to{--aura-rot:360deg}} .aura-fx,.aura-blur,.aura-pulse,.aura-edge{position:absolute;inset:0} /* leaving: an eraser (transparent wedge) grows from the exit point */ .aura-fx.leaving{ -webkit-mask-image:conic-gradient(from calc(var(--aura-xa,0deg) + var(--aura-dd)),transparent 0deg,#000 var(--aura-erase-soft),#000 calc(360deg - var(--aura-dd) * 2 - var(--aura-erase-soft)),transparent calc(360deg - var(--aura-dd) * 2)); mask-image:conic-gradient(from calc(var(--aura-xa,0deg) + var(--aura-dd)),transparent 0deg,#000 var(--aura-erase-soft),#000 calc(360deg - var(--aura-dd) * 2 - var(--aura-erase-soft)),transparent calc(360deg - var(--aura-dd) * 2))} /* the wave front: visible from the seed out to --aura-h on both sides (two conic masks added together) */ .aura-blur,.aura-edge{ -webkit-mask-image:conic-gradient(from var(--aura-sa,0deg),#000 0deg,#000 var(--aura-h),transparent calc(var(--aura-h) + var(--aura-soft))), conic-gradient(from calc(var(--aura-sa,0deg) - var(--aura-h) - var(--aura-soft)),transparent 0deg,#000 var(--aura-soft),#000 calc(var(--aura-h) + var(--aura-soft)),transparent calc(var(--aura-h) + var(--aura-soft))); mask-image:conic-gradient(from var(--aura-sa,0deg),#000 0deg,#000 var(--aura-h),transparent calc(var(--aura-h) + var(--aura-soft))), conic-gradient(from calc(var(--aura-sa,0deg) - var(--aura-h) - var(--aura-soft)),transparent 0deg,#000 var(--aura-soft),#000 calc(var(--aura-h) + var(--aura-soft)),transparent calc(var(--aura-h) + var(--aura-soft)))} /* the burst: only a band riding the front of the wave (a hot spot at the touch point, then it travels and the two ends meet) */ .aura-pulse{ -webkit-mask-image:conic-gradient(from var(--aura-sa,0deg),transparent 0deg,transparent calc(var(--aura-h) - var(--aura-trail)),#000 var(--aura-h),transparent calc(var(--aura-h) + var(--aura-front))), conic-gradient(from calc(var(--aura-sa,0deg) - var(--aura-h) - var(--aura-front)),transparent 0deg,#000 var(--aura-front),transparent calc(var(--aura-front) + var(--aura-trail)),transparent 360deg); mask-image:conic-gradient(from var(--aura-sa,0deg),transparent 0deg,transparent calc(var(--aura-h) - var(--aura-trail)),#000 var(--aura-h),transparent calc(var(--aura-h) + var(--aura-front))), conic-gradient(from calc(var(--aura-sa,0deg) - var(--aura-h) - var(--aura-front)),transparent 0deg,#000 var(--aura-front),transparent calc(var(--aura-front) + var(--aura-trail)),transparent 360deg); opacity:calc(var(--aura-burst,1) * var(--aura-p));filter:blur(calc(var(--aura-blur,9px) * 1.8))} .aura-blur{opacity:var(--aura-opacity,.65);filter:blur(var(--aura-blur,9px))} .aura-blur i,.aura-pulse i{position:absolute;inset:calc(var(--ar) + 3px);border-radius:calc(var(--radius) - 3px); background:conic-gradient(from var(--aura-rot),var(--aura-stops,#b17cea,#4dd0e1,#f78fb3,#ffd166,#b17cea))} /* the settled glow breathes: three soft bright/dim lobes that turn with the colours (same --aura-rot) */ .aura-blur i{-webkit-mask-image:conic-gradient(from var(--aura-rot),#000 0deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 60deg,#000 120deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 180deg,#000 240deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 300deg,#000 360deg); mask-image:conic-gradient(from var(--aura-rot),#000 0deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 60deg,#000 120deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 180deg,#000 240deg,rgba(0,0,0,calc(1 - var(--aura-wave,.6))) 300deg,#000 360deg)} .aura-pulse i{filter:saturate(1.3) brightness(1.7)} .aura-edge{inset:calc(var(--ar) - 1px);border:1px solid var(--aura-edge,rgba(255,255,255,.5));border-radius:var(--radius);box-sizing:border-box} /* on aura cards the border does NOT brighten all at once (the wave does it); the picture's border follows more slowly */ .card.aura-ready:not(.post-body):hover{border-color:var(--edge);box-shadow:0 0 24px var(--glow)} .card.aura-ready:not(.post-body) .card-img{transition:border-color var(--aura-fade,900ms) ease} .card.aura-ready:not(.post-body):hover .card-img{transition:border-color var(--aura-spread,1200ms) ease .1s} /* related posts: as on the home page, the border lights up with the glow instead of all at once */ .rel-item.aura-ready:hover .rel-card{border-color:var(--edge);box-shadow:0 0 24px var(--glow)} @media (hover:none){.aura{display:none}} /* ---------- contact form sent: the page's content is replaced by the message ---------- */ .thanks-card .entry{padding-top:1.4rem;padding-bottom:1.4rem;text-align:center} .thanks-card .scf-thanks{font-size:1.5em;margin:.4em 0} /* Logo: once theme.js has taken over (class logo-js) it animates the hover itself, so the CSS hover rule above must not snap the layers into line first. Without JS (or if it fails) that CSS rule still does the hover. */ .roygbiv.logo-js:not(.is-animating):hover .logo-img-1{transform:translate(0,var(--y1))} .roygbiv.logo-js:not(.is-animating):hover .logo-img-2{transform:translate(0,var(--y2))} .roygbiv.logo-js:not(.is-animating):hover .logo-img-3{transform:translate(0,var(--y3))} .roygbiv.logo-js:not(.is-animating):hover .logo-img-4{transform:translate(0,var(--y4))} .roygbiv.logo-js:not(.is-animating):hover .logo-img-5{transform:translate(0,var(--y5))} /* While the code box shrinks back, the real block fades in under it (background and border only); its text stays hidden until the box has landed */ .code-wrap.ghost pre{-webkit-text-fill-color:transparent;text-shadow:none} .code-wrap.ghost .code-more{opacity:0!important;pointer-events:none!important} .lb-code pre{touch-action:manipulation} /* no double-tap zoom delay while selecting text on a phone */ /* A lone last result (1 or 3 results...) in the two-column list sits in the middle, like the full rows above it. This is what the search page showed. */ @media (min-aspect-ratio:11/5) and (min-width:1000px){ .posts > .card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - var(--post-gap-x)) / 2)} } /* ---------- WordPress admin bar (only when you are logged in): the site's bar sits BELOW it instead of underneath ---------- */ /* --adminbar-h is kept up to date by theme.js (it follows the admin bar if it scrolls away on small screens); these are the no-JS fallbacks. */ body.admin-bar:has(#wpadminbar){--adminbar-h:32px} @media (max-width:782px){body.admin-bar:has(#wpadminbar){--adminbar-h:46px}} /* ---------- videos in posts: same look as images; looping clips (made by the video plugin) autoplay muted like a GIF ---------- */ .entry video{display:block;max-width:100%;height:auto!important;border:1px solid rgba(255,255,255,.25);border-radius:var(--lb-radius, 15px);background:#000} .entry .wp-video{max-width:100%;width:auto!important} /* WordPress' own player wrapper carries an inline pixel width, like old images did */ .entry .wp-video .mejs-container,.entry .wp-video video{max-width:100%!important;height:auto!important} /* ---------- test switches (?test=orbs / blur / slides / lite, see functions.php) ---------- */ html.test-orbs .orbs{display:none!important} html.test-blur *,html.test-blur *::before,html.test-blur *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .test-badge{position:fixed;left:8px;bottom:8px;z-index:9999;pointer-events:none;font:600 11px/1.3 system-ui,sans-serif;color:#000;background:#ffd34d;padding:4px 7px;border-radius:6px;opacity:.9} /* ---------- phones & tablets: their own glass blur and darkness (--blur-touch, --smoke-touch) ---------- html:root is a little more specific than :root, so this also wins over values saved in Marilyn Settings for --blur / --smoke. */ @media (hover:none){ html:root{--blur:var(--blur-touch);--smoke:var(--smoke-touch)} /* Post cards and the post/page body: plain tint, no frosted blur (--glass-touch). A blur layer as tall as a post is one of the biggest graphics-memory costs on an iPhone when zooming; the top bar, side menu and share popup keep theirs. */ .card.glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-touch, rgba(0,0,10,.35))} } /* visually hidden but read by screen readers and search engines (e.g. the home page's main heading) */ .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}