/* * glass.css - "living glass": every page's content (.main-content > .container - About, Contact, Notes, Portfolio, * More stuff, custom pages; or anything with .reading-surface) sits on a pane of frosted glass that belongs to the * weather behind it. * * - Tint: from the sky - blue-cyan by day, coral to violet at dusk, peach at dawn, deep teal at night; steel when * it's overcast, ice in snow, milk in fog. Without a scene, a quiet warm glass in the site's orange. * - Rim: an edge lit in the sky's colour and the site's orange, with streaks of light gliding along the top and * bottom; a halo round the pane in the sky's colour. * - Season: a soft glow along the bottom - amber in fall, ice in winter, green in spring, gold in summer. * - On the glass (assets/js/glass.js): raindrops beading and sliding in rain (heavier in storms), snow built up * along the top with flakes settled on the frame, frost in the corners in snow and fog, condensation in fog, * a gleam sweeping across it on sunny days (warm at dawn and dusk), star glints on clear nights, and the rim * flashing with the lightning. * - Light: on a desktop, a soft highlight follows the pointer across the pane. * * Performance: everything that moves (streaks, gleam, drops, the pointer's light) moves by transform or opacity * on its own small layer, so nothing repaints the pane or its blur while it animates or the page scrolls. * * The scene's classes (scene-time-*, scene-weather-*, scene-season-*, scene-overcast) are on as well as the * scene layer (head.php), so everything here follows the real weather. The text area stays calm: drops, stars and * frost keep to the frame. No motion for visitors who ask for less; a solid pane where blur isn't available. */ :root { --g-base: rgba(12, 14, 20, 0.5); /* the glass itself - keeps text readable whatever is behind */ --g-tint-1: rgba(255, 106, 0, 0.07); /* the colour washed across it, top left to bottom right */ --g-tint-2: rgba(70, 80, 105, 0.1); --g-rim: rgba(255, 255, 255, 0.4); /* the travelling light on the edge */ --g-halo: rgba(255, 106, 0, 0.18); /* the soft coloured light around the pane */ --g-accent: #ff6a00; /* ...and its second colour */ --g-season: transparent; /* the glow along the bottom */ --g-edge: rgba(255, 255, 255, 0.12); /* the fixed hairline edge */ --g-solid: rgba(20, 22, 28, 0.95); /* no blur available / less transparency asked for */ --g-blur: 20px; --g-radius: 18px; --g-card: rgba(255, 255, 255, 0.04); /* cards and boxes on the glass */ --g-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- the sky's colour ---- */ .scene-time-day { --g-tint-1: rgba(79, 172, 254, 0.2); --g-tint-2: rgba(0, 242, 254, 0.07); --g-rim: rgba(130, 205, 255, 0.9); --g-halo: rgba(79, 172, 254, 0.28); } .scene-time-dawn { --g-tint-1: rgba(251, 194, 169, 0.16); --g-tint-2: rgba(58, 78, 128, 0.14); --g-rim: rgba(253, 227, 167, 0.9); --g-halo: rgba(251, 194, 169, 0.3); } .scene-time-dusk { --g-tint-1: rgba(255, 126, 95, 0.18); --g-tint-2: rgba(106, 48, 147, 0.18); --g-rim: rgba(254, 180, 123, 0.95); --g-halo: rgba(255, 126, 95, 0.32); } .scene-time-night { --g-tint-1: rgba(15, 70, 92, 0.3); --g-tint-2: rgba(40, 24, 90, 0.22); --g-rim: rgba(125, 185, 255, 0.7); --g-halo: rgba(60, 120, 220, 0.25); } .scene-overcast { --g-tint-1: rgba(110, 150, 210, 0.2); --g-tint-2: rgba(40, 60, 100, 0.2); --g-rim: rgba(170, 205, 245, 0.8); --g-halo: rgba(90, 140, 210, 0.26); } .scene-overcast.scene-time-night { --g-tint-1: rgba(60, 75, 100, 0.2); --g-tint-2: rgba(20, 25, 40, 0.2); } .scene-weather-storm { --g-tint-1: rgba(110, 110, 220, 0.2); --g-tint-2: rgba(70, 40, 130, 0.26); --g-rim: rgba(170, 170, 255, 0.85); --g-halo: rgba(120, 100, 255, 0.3); } .scene-weather-snow { --g-tint-1: rgba(180, 222, 255, 0.22); --g-tint-2: rgba(110, 160, 220, 0.14); --g-rim: rgba(230, 245, 255, 0.95); --g-halo: rgba(200, 230, 255, 0.28); } .scene-weather-fog { --g-tint-1: rgba(215, 220, 230, 0.13); --g-tint-2: rgba(150, 160, 175, 0.1); --g-rim: rgba(220, 225, 235, 0.7); --g-halo: rgba(210, 215, 230, 0.2); } /* ---- the season's glow ---- */ .scene-season-fall, .scene-season-fall-first-day { --g-season: rgba(255, 106, 0, 0.24); } .scene-season-winter { --g-season: rgba(170, 210, 255, 0.2); } .scene-season-spring { --g-season: rgba(120, 220, 150, 0.18); } .scene-season-summer { --g-season: rgba(255, 200, 60, 0.18); } /* ---- the light skin: white glass ---- */ body.light { --g-base: rgba(255, 255, 255, 0.6); --g-edge: rgba(255, 255, 255, 0.8); --g-solid: rgba(255, 255, 255, 0.96); --g-card: rgba(255, 255, 255, 0.4); --g-grain: none; } /* ---- the pane ---- The container itself is only the frame (edge, halo, spacing). The glass - tint, texture, blur - is its ::before, a layer behind the content: a blur or transform on the container would turn it into the frame for any full-screen overlay inside it (the portfolio slideshow), shrinking that overlay to the pane. */ .main-content > .container, .reading-surface { position: relative; isolation: isolate; /* its own layer: the glass, drops and frost sit behind the text */ padding: 44px 48px; border: 1px solid var(--g-edge); border-radius: var(--g-radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 90px -20px var(--g-halo), 0 30px 70px rgba(0, 0, 0, 0.3); } /* The glass */ .main-content > .container::before, .reading-surface::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; background: var(--g-grain), radial-gradient(120% 55% at 50% 115%, var(--g-season), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%), linear-gradient(155deg, var(--g-tint-1), var(--g-tint-2)), var(--g-base); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.5); backdrop-filter: blur(var(--g-blur)) saturate(1.5); transform: translateZ(0); /* its own layer, so the blur isn't re-sampled as the page scrolls (Safari flickered) */ } /* A full-screen overlay opening inside a pane (the portfolio slideshow) has to rise above the site's own menu, so the pane lets go of its layer while it's open */ .main-content > .container.slideshow-open, .reading-surface.slideshow-open { isolation: auto; } /* The lit rim: a still gradient on the 1.5px edge (the moving light is the streaks, further down) */ .main-content > .container::after, .reading-surface::after { content: ""; position: absolute; inset: -1px; z-index: 0; padding: 1.5px; border-radius: inherit; background: linear-gradient(135deg, var(--g-rim) 0%, transparent 30%, transparent 62%, var(--g-accent) 100%); -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); opacity: 0.9; pointer-events: none; transition: opacity 0.1s ease, filter 0.1s ease; } /* Lightning (scene.js) lights up the whole rim for a moment */ html.scene-flash-on .main-content > .container::after, html.scene-flash-on .reading-surface::after { background: rgba(230, 235, 255, 0.95); opacity: 1; filter: drop-shadow(0 0 10px rgba(200, 210, 255, 0.9)); } /* Frost creeping in from the corners in snow and fog (glass.js adds it) */ .g-frost { position: absolute; inset: 0; background: radial-gradient(160px 130px at 0 0, rgba(235, 245, 255, 0.22), transparent 70%), radial-gradient(160px 130px at 100% 0, rgba(235, 245, 255, 0.16), transparent 70%), radial-gradient(200px 150px at 0 100%, rgba(235, 245, 255, 0.2), transparent 70%), radial-gradient(200px 150px at 100% 100%, rgba(235, 245, 255, 0.24), transparent 70%); } .scene-weather-fog .g-frost { opacity: 0.7; } /* Things on the glass (glass.js): a layer clipped to the pane, behind the text, in front of the tint */ .g-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } /* Streaks of light gliding along the top and bottom edges */ .g-streak { position: absolute; left: 0; width: 28%; height: 2px; background: linear-gradient(90deg, transparent, var(--g-rim), transparent); filter: blur(0.5px); transform: translateX(-110%); animation: g-streak 11s cubic-bezier(0.45, 0, 0.55, 1) infinite; } .g-streak.is-top { top: 0; } .g-streak.is-bottom { bottom: 0; background: linear-gradient(90deg, transparent, var(--g-accent), transparent); animation-duration: 15s; animation-delay: -6s; animation-direction: reverse; } @keyframes g-streak { 0% { transform: translateX(-110%); opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; } 70%, 100% { transform: translateX(380%); opacity: 0; } } /* The pointer's light: a soft glow that slides under the cursor */ .g-light { position: absolute; top: 0; left: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 60%); opacity: 0; transition: opacity 0.4s ease; will-change: transform; } .g-light.is-on { opacity: 1; } /* Sun: a gleam sweeping across the glass now and then, and warm light in the top corner */ .g-gleam { position: absolute; top: -20%; left: 0; width: 22%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.1) 60%, transparent); transform: translateX(-150%) skewX(-18deg); animation: g-gleam 12s ease-in-out infinite; } .scene-time-dawn .g-gleam, .scene-time-dusk .g-gleam { background: linear-gradient(90deg, transparent, rgba(255, 190, 130, 0.1) 40%, rgba(255, 210, 160, 0.2) 50%, rgba(255, 190, 130, 0.1) 60%, transparent); } .scene-weather-partly .g-gleam { opacity: 0.55; } @keyframes g-gleam { 0%, 55% { transform: translateX(-150%) skewX(-18deg); } 85%, 100% { transform: translateX(560%) skewX(-18deg); } } .g-sun { position: absolute; top: -180px; right: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 190, 0.18), rgba(255, 200, 120, 0.06) 40%, transparent 68%); } .scene-time-dawn .g-sun, .scene-time-dusk .g-sun { background: radial-gradient(circle, rgba(255, 170, 120, 0.22), rgba(255, 120, 90, 0.07) 40%, transparent 68%); } /* Snow built up along the top edge: a lumpy white ridge sitting on the glass */ .g-snowcap { position: absolute; top: -15px; left: 10px; right: 10px; z-index: 1; height: 24px; pointer-events: none; /* drifts of different sizes on a settled base */ background: radial-gradient(60px 20px at 7% 100%, #f5faff 62%, transparent 64%), radial-gradient(90px 26px at 20% 100%, #eef6ff 62%, transparent 64%), radial-gradient(56px 18px at 34% 100%, #f7fbff 62%, transparent 64%), radial-gradient(110px 30px at 50% 100%, #eef6ff 62%, transparent 64%), radial-gradient(64px 20px at 66% 100%, #f5faff 62%, transparent 64%), radial-gradient(96px 26px at 81% 100%, #eef6ff 62%, transparent 64%), radial-gradient(52px 18px at 94% 100%, #f7fbff 62%, transparent 64%), linear-gradient(#f2f8ff, #f2f8ff) left bottom / 100% 8px no-repeat; border-radius: 10px 10px 4px 4px; filter: drop-shadow(0 3px 4px rgba(0, 20, 60, 0.4)); opacity: 0.95; } .g-flake { position: absolute; width: var(--d, 4px); height: var(--d, 4px); border-radius: 50%; background: rgba(245, 250, 255, 0.9); box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); } /* Fog: fine condensation on the frame */ .g-mist { position: absolute; width: var(--d, 2px); height: var(--d, 2px); border-radius: 50%; background: rgba(235, 240, 250, 0.45); } /* A raindrop: a bead of light with a darker rim, some sliding down with a faint trail */ .g-drop { position: absolute; width: var(--d, 8px); height: calc(var(--d, 8px) * 1.2); border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; /* a lens: a bright catch-light top left, clear body, a dark refracted rim at the bottom */ background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 12%, transparent 22%), radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.1) 0 35%, rgba(10, 20, 40, 0.35) 70%, transparent 74%); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), inset 0 -2px 3px rgba(255, 255, 255, 0.18); opacity: 0.9; } .g-drop.is-sliding { animation: g-slide var(--t, 9s) cubic-bezier(0.55, 0, 0.8, 0.6) var(--delay, 0s) infinite; } .g-drop.is-sliding::after { content: ""; position: absolute; left: 50%; bottom: 70%; width: 1px; height: 36px; transform: translateX(-50%); background: linear-gradient(to top, rgba(255, 255, 255, 0.28), transparent); } @keyframes g-slide { 0%, 35% { transform: translate(0, 0); opacity: 0; } 40% { opacity: 0.85; } 85% { opacity: 0.85; } 100% { transform: translate(var(--drift, 0px), var(--fall, 260px)); opacity: 0; } /* leaning downwind (glass.js) */ } /* A star glint on a clear night */ .g-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(190, 220, 255, 0.7); opacity: 0; animation: g-twinkle var(--t, 5s) ease-in-out var(--delay, 0s) infinite; } @keyframes g-twinkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.9; transform: scale(1); } } /* Cards and boxes on the glass keep a faint fill of their own, so they still read as cards */ .main-content .note-card, .main-content .box-stats { background: var(--g-card); } /* The home page: the text beside the picture is a pane too - wide enough that the glass's padding doesn't squeeze the heading, and kept as a floating pane on phones (the page already has its own margin there) */ .home .home-details > .reading-surface { max-width: 660px; padding: 40px 48px 44px; } @media (min-width: 1600px) { .home .home-details > .reading-surface { max-width: 720px; } } @media (max-width: 1100px) and (min-width: 992px) { .home .home-details > .reading-surface { max-width: 540px; padding: 36px 36px 40px; } } /* ---- fallbacks and small screens ---- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .main-content > .container::before, .reading-surface::before { background-color: var(--g-solid); } } @media (prefers-reduced-transparency: reduce) { .main-content > .container::before, .reading-surface::before { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .g-streak, .g-gleam, .g-light { display: none; } .g-drop.is-sliding, .g-star { animation: none; } .g-star { opacity: 0.6; } } @media (max-width: 991px) { .main-content > .container, .reading-surface { padding: 36px 32px; } } /* Phones: edge to edge, so no reading width is lost */ @media (max-width: 767px) { .main-content > .container, .reading-surface { border-radius: 0; border-left: 0; border-right: 0; padding: 28px 20px; } .home .home-details > .reading-surface { border-radius: var(--g-radius); border-left: 1px solid var(--g-edge); border-right: 1px solid var(--g-edge); padding: 28px 20px 32px; } }