/* ========================================================================== AM GLASS — Apple-style "liquid glass" for .portfolio_item_hover ========================================================================== Load this AFTER style.css and demo-2.css. Every selector here is prefixed with `body` so it outranks the originals no matter what order the stylesheets end up in. WHAT WAS MAKING IT LOOK DATED ----------------------------- 1. demo-2.css: backdrop-filter: blur(30px) with NO saturate(). Blur alone averages the pixels behind it toward grey. Apple's glass is blur + a big saturation boost — that is the whole trick. It keeps the colour underneath vivid so the panel reads as translucent glass instead of frosted mud. Your Google Cloud shot has strong yellows and reds that are currently being flattened to grey. 2. background-color: rgba(51,51,51,0.5) — a flat 50% grey wash. Real glass is a LOW-alpha tint plus a gradient, because light enters the top edge and falls off toward the bottom. 3. .portfolio-border: border: 2px outset rgba(255,255,255,.9) `outset` is the old 3D bevel border style — it renders as a chiselled grey frame. That is the hard rectangle around your tile. Replaced with a proper 1px specular hairline. 4. No specular edge, no inner glow, 10px radius (too tight for glass), and a 0.2s ease-in-out that snaps rather than settles. WHAT THIS DOES INSTEAD ---------------------- blur(20px) saturate(185%) brightness(1.06) · low-alpha tint · top-lit gradient · 1px white hairline · inset specular highlights · 22px radius · soft ambient shadow · a slow diagonal sheen that sweeps across on hover · glass pill for the category chip. The reveal interaction is unchanged — it still wipes down from the top, just with a settling ease instead of a snap. ========================================================================== */ /* ---- The glass panel --------------------------------------------------- */ body .portfolio_item .portfolio_item_hover, body .portfolio-style-2 .portfolio_item .portfolio_item_hover { /* geometry: slightly tighter inset, much rounder */ inset: 8px; top: 8px; left: 8px; width: auto; height: auto; border-radius: 22px; overflow: hidden; /* keeps the sheen inside the corners */ /* a 1px hairline, not a bevel */ border: 1px solid rgba(255, 255, 255, 0.16); /* Low-alpha tint + top-lit gradient, instead of a flat 50% grey. 0.34 is the legibility floor I landed on after testing against your lightest thumbnails (Official Payments, J.P. Plastics) — white text goes mushy below about 0.30. Raise it toward 0.45 if you want the titles to punch harder; drop it toward 0.24 for more transparency. */ background-color: rgba(22, 22, 24, 0.34); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.00) 50%), linear-gradient(to top, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 55%); /* THE key line — saturate() is what makes it read as glass */ -webkit-backdrop-filter: blur(20px) saturate(185%) brightness(1.06); backdrop-filter: blur(20px) saturate(185%) brightness(1.06); /* specular top edge, faint bottom bounce, inner glow, ambient shadow */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0 24px rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.22); transition: opacity 520ms cubic-bezier(.22, 1, .36, 1), transform 620ms cubic-bezier(.22, 1, .36, 1); } /* ---- Diagonal sheen that sweeps across on hover ------------------------ */ body .portfolio_item .portfolio_item_hover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.16) 44%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.16) 56%, rgba(255, 255, 255, 0) 70%); transform: translateX(-125%); transition: transform 1100ms cubic-bezier(.22, 1, .36, 1) 120ms; } body .portfolio_item:hover .portfolio_item_hover::after { transform: translateX(125%); } /* ---- Inner ring: was the `outset` bevel -------------------------------- */ body .portfolio-style-2 .portfolio-border, body .portfolio_item .portfolio-border { inset: 7px; top: 7px; left: 7px; width: auto; height: auto; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); pointer-events: none; } /* Prefer a single clean edge? Uncomment to drop the inner ring entirely. body .portfolio_item .portfolio-border { display: none; } */ /* ---- Title ------------------------------------------------------------- */ body .portfolio-style-2 .portfolio_item .portfolio_item_hover .item_info span { color: #fff; font-size: 19px; letter-spacing: 0.01em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.38); box-shadow: none; /* style.css put a drop shadow on the TEXT node */ transition: opacity 480ms cubic-bezier(.22, 1, .36, 1) 140ms, transform 560ms cubic-bezier(.22, 1, .36, 1) 140ms; } /* ---- Category chip: flat white box → glass pill ------------------------ */ body .portfolio-style-2 .portfolio_item .portfolio_item_hover .item_info em { display: inline-block; margin-top: 14px; padding: 7px 16px; border-radius: 999px; background-color: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.24); /* White reads cleanest on dark glass. For your gold accent instead, change this one line to: color: #e0be92; */ color: #fff; font-size: 10px; font-weight: 500; letter-spacing: 2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 4px 14px rgba(0, 0, 0, 0.20); transition: opacity 440ms cubic-bezier(.22, 1, .36, 1) 200ms, transform 520ms cubic-bezier(.22, 1, .36, 1) 200ms; } /* ---- Fallbacks --------------------------------------------------------- */ /* No backdrop-filter support (old Firefox): fall back to a solid-ish tint so the title stays legible rather than sitting on a transparent panel. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body .portfolio_item .portfolio_item_hover, body .portfolio-style-2 .portfolio_item .portfolio_item_hover { background-color: rgba(28, 28, 30, 0.84); } } /* Respect the OS "reduce transparency" setting. */ @media (prefers-reduced-transparency: reduce) { body .portfolio_item .portfolio_item_hover, body .portfolio-style-2 .portfolio_item .portfolio_item_hover { background-color: rgba(28, 28, 30, 0.88); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { body .portfolio_item .portfolio_item_hover::after { display: none; } body .portfolio_item .portfolio_item_hover, body .portfolio-style-2 .portfolio_item .portfolio_item_hover .item_info span, body .portfolio-style-2 .portfolio_item .portfolio_item_hover .item_info em { transition-duration: 1ms; } }