/* ========================================================================= GLASS KIT (advanced glassmorphism) · added 2026-10-01 Opt-in only: nothing on the site uses these classes until an element gets class="glass" and a page links this file after site.css: Layers: tinted translucent fill + backdrop blur/saturate, specular top edge, soft inner rim, faint grain, optional moving sheen on hover. Follows the four "View as" looks via html[data-skin], and falls back to a solid panel when backdrop-filter is unsupported or the visitor asks for reduced transparency. Sheen is off under reduced motion. ========================================================================= */ :root{ --glass-tint:255,255,255; /* rgb triplet for the fill */ --glass-fill:.08; /* fill opacity */ --glass-blur:16px; --glass-sat:1.4; --glass-edge:.22; /* border + specular strength */ --glass-radius:16px; --glass-shadow:0 18px 48px -18px rgba(0,0,0,.55); --glass-solid:rgba(16,18,22,.94); /* fallback fill */ } /* Per-look tints (skins set in site.js) */ html[data-skin="bbg"]{--glass-tint:255,176,0;--glass-fill:.06;--glass-edge:.26} /* Live Terminal: amber */ html[data-skin="latex"]{--glass-tint:255,255,255;--glass-fill:.07} /* Monochrome */ html[data-skin="matrix"]{--glass-tint:0,255,65;--glass-fill:.05;--glass-edge:.24} /* Digital Rain: green */ html[data-skin="ide"]{--glass-tint:120,170,255;--glass-fill:.07} /* Code Editor: blue */ .glass{ position:relative; isolation:isolate; border-radius:var(--glass-radius); border:1px solid rgba(var(--glass-tint),var(--glass-edge)); background: linear-gradient(150deg, rgba(var(--glass-tint),calc(var(--glass-fill) * 1.8)) 0%, rgba(var(--glass-tint),var(--glass-fill)) 45%, rgba(var(--glass-tint),calc(var(--glass-fill) * .5)) 100%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)); box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--glass-edge) * 1.1)), /* specular top edge */ inset 0 0 0 1px rgba(255,255,255,.03), /* inner rim */ inset 0 -14px 28px -20px rgba(var(--glass-tint),.35), /* bottom glow */ var(--glass-shadow); overflow:hidden; } /* Grain: breaks up banding in the blur, very faint */ .glass::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Light source: soft highlight in the top-left corner */ .glass::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit; background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),transparent 55%); } /* Variants */ .glass--subtle{--glass-blur:8px;--glass-fill:.04;--glass-edge:.14} .glass--strong{--glass-blur:26px;--glass-fill:.12;--glass-sat:1.6;--glass-edge:.3} .glass--pill{--glass-radius:999px} /* Optional moving sheen on hover/focus: add class="glass glass--sheen" */ .glass--sheen::after{transition:background-position .9s ease} .glass--sheen::after{ background: radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.14),transparent 55%), linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%) no-repeat; background-size:100% 100%,250% 100%; background-position:0 0,150% 0; } .glass--sheen:hover::after, .glass--sheen:focus-within::after{background-position:0 0,-50% 0} /* Keyboard focus stays clearly visible on glass */ .glass:focus-visible,.glass :focus-visible{outline:2px solid rgba(var(--glass-tint),.9);outline-offset:2px} /* Fallbacks */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--glass-solid)} } @media (prefers-reduced-transparency:reduce){ .glass{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none} .glass::before{display:none} } @media (prefers-reduced-motion:reduce){ .glass--sheen::after{transition:none} .glass--sheen:hover::after,.glass--sheen:focus-within::after{background-position:0 0,150% 0} } /* Phones: lighter blur keeps scrolling smooth */ @media (max-width:640px){ .glass{--glass-blur:10px} .glass--strong{--glass-blur:14px} } /* ========================================================================= CARDS · added 2026-10-12 (user: glass on "just the cards") Applies the glass layers to the site's content cards only (not nav, panels or controls): Journey .k-card + .proof-card, Expertise .dd-card, Lab .lab-card, Ideas .it-card. Uses background + box-shadow only, so the cards' own ::before/::after effects (shimmer, rotating borders) keep working. Only Digital Rain (matrix) and Code Editor (ide): user chose 2026-10-12 to keep Live Terminal flat and Monochrome is a paper look. Borders, corner shapes and open/active rings still come from site.css. ========================================================================= */ html:is([data-skin="matrix"],[data-skin="ide"]) :is(.k-card,.proof-card,.dd-card,.lab-card,.it-card){ background: linear-gradient(150deg, rgba(var(--glass-tint),calc(var(--glass-fill) * 1.6)) 0%, rgba(var(--glass-tint),calc(var(--glass-fill) * .7)) 45%, rgba(var(--glass-tint),calc(var(--glass-fill) * .35)) 100%), radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.07),transparent 55%), var(--card-base,rgba(10,12,16,.42))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,calc(var(--glass-edge) * .8)), inset 0 -14px 28px -22px rgba(var(--glass-tint),.4), 0 16px 40px -20px rgba(0,0,0,.6); } /* Hover / selected: a touch brighter so the state still reads */ html:is([data-skin="matrix"],[data-skin="ide"]) :is(.k-card,.proof-card,.dd-card,.lab-card):is(:hover,.active,.on,.open), html:is([data-skin="matrix"],[data-skin="ide"]) .it-leaf:is(:hover,.open) .it-card{ background: linear-gradient(150deg, rgba(var(--glass-tint),calc(var(--glass-fill) * 2.6)) 0%, rgba(var(--glass-tint),var(--glass-fill)) 50%, rgba(var(--glass-tint),calc(var(--glass-fill) * .5)) 100%), radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.1),transparent 55%), var(--card-base-hi,rgba(10,12,16,.5))!important; } /* PERF 2026-10-12: no live backdrop blur on the cards. Re-blurring the moving rain behind ten-plus cards on every frame made scrolling choppy. In Digital Rain a denser smoked fill gives the same soft, dimmed rain behind each card. */ html[data-skin="matrix"]{--card-base:rgba(6,10,8,.7);--card-base-hi:rgba(6,10,8,.74)} /* Code Editor: blue-grey glass that sits on the editor background */ /* No blur support, or visitor asks for less transparency: solid cards */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html:is([data-skin="matrix"],[data-skin="ide"]) :is(.k-card,.proof-card,.dd-card,.lab-card,.it-card){background:var(--panel)!important} } @media (prefers-reduced-transparency:reduce){ html:is([data-skin="matrix"],[data-skin="ide"]) :is(.k-card,.proof-card,.dd-card,.lab-card,.it-card){background:var(--panel)!important;-webkit-backdrop-filter:none;backdrop-filter:none} }