/* ========================================================================== CVYSM — glass.css Frosted-glass surface system, in two registers: .glass frosted white — reads as a pane on the paper ground .glass--ink smoked black — for the solid black bars and the drawer Three layers make a plain box read as a physical pane: 1. the pane — translucent fill + backdrop blur/saturation 2. the rim — a masked 1px gradient ring whose hot spot tracks the pointer angle, so light appears to travel the edge 3. the sheen — a soft radial specular that follows the pointer Optional film grain (see .grain) unifies the whole composition. On white, contrast comes from the rim and the shadow rather than tint — a frosted pane over paper is nearly invisible without them. ========================================================================== */ @property --gx{ syntax:""; inherits:false; initial-value:50% } @property --gy{ syntax:""; inherits:false; initial-value:0% } @property --ga{ syntax:""; inherits:false; initial-value:180deg } @property --glow{ syntax:""; inherits:false; initial-value:0 } /* ---------- the pane ---------- */ .glass{ position:relative; isolation:isolate; border-radius:var(--r); border:1px solid var(--glass-brd); background:linear-gradient(168deg,var(--glass-fill) 0%,var(--glass-fill-2) 100%); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.9), inset 0 -1px 0 0 rgba(10,10,10,.04), 0 1px 2px -1px rgba(10,10,10,.10), 0 18px 40px -26px rgba(10,10,10,.28); } /* ---------- the rim: masked gradient ring, hot spot follows pointer ---------- */ .glass::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1px; background: conic-gradient(from var(--ga), rgba(255,255,255,1) 0deg, rgba(10,10,10,.10) 46deg, rgba(10,10,10,.03) 96deg, rgba(10,10,10,.02) 200deg, rgba(10,10,10,.10) 288deg, rgba(255,255,255,1) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:calc(.6 + var(--glow) * .4); transition:opacity var(--t) ease; pointer-events:none; } /* ---------- the sheen: pointer-tracked specular ---------- */ .glass::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.9) 0%, rgba(255,255,255,.4) 26%, rgba(255,255,255,0) 64%); opacity:calc(.18 + var(--glow) * .5); transition:opacity var(--t) ease; } /* keep real content above the decorative layers */ .glass > *{position:relative;z-index:2} /* ---------- variants ---------- */ .glass--panel{--glass-blur:26px;border-radius:var(--r-lg);padding:clamp(24px,3.4vw,44px)} .glass--card{--glass-blur:18px;padding:clamp(20px,2.2vw,30px)} /* ---------- smoked black register: the bars ---------- */ .glass--ink{ --glass-blur:22px; border-color:var(--glass-ink-brd); background:linear-gradient(168deg,rgba(20,20,20,.92),var(--glass-ink-fill)); color:var(--on-ink); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.10), 0 18px 40px -28px rgba(0,0,0,.6); } .glass--ink h1,.glass--ink h2,.glass--ink h3,.glass--ink h4{color:var(--on-ink)} .glass--ink::before{ background: conic-gradient(from var(--ga), rgba(255,255,255,.55) 0deg, rgba(255,255,255,.10) 46deg, rgba(255,255,255,.03) 96deg, rgba(255,255,255,.02) 200deg, rgba(255,255,255,.10) 288deg, rgba(255,255,255,.55) 360deg); } .glass--ink::after{ background: radial-gradient(420px circle at var(--gx) var(--gy), rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 62%); } /* ---------- lift on hover (pointer:fine only) ---------- */ @media (hover:hover) and (pointer:fine){ .lift{transition:transform var(--t) var(--e-out),box-shadow var(--t) var(--e-out),border-color var(--t) ease} .lift:hover{ transform:translateY(-3px);border-color:rgba(10,10,10,.26); box-shadow:0 1px 2px -1px rgba(10,10,10,.12),0 28px 56px -30px rgba(10,10,10,.4); } .lift:hover::before{opacity:1} } /* ---------- cursor spotlight ---------- */ .spot{ position:fixed;top:0;left:0;z-index:0;width:640px;height:640px;margin:-320px 0 0 -320px; pointer-events:none;opacity:0;will-change:transform,opacity; background:radial-gradient(circle,rgba(10,10,10,.045) 0%,rgba(10,10,10,.018) 36%,transparent 70%); transition:opacity .6s ease; } .spot.on{opacity:1} /* ---------- film grain ---------- */ .grain{ position:fixed;inset:-50%;z-index:100;pointer-events:none; opacity:.022;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainshift 8s steps(6) infinite; } @keyframes grainshift{ 0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-3%,2%,0)} 40%{transform:translate3d(2%,-3%,0)} 60%{transform:translate3d(-2%,-2%,0)} 80%{transform:translate3d(3%,1%,0)} 100%{transform:translate3d(0,0,0)} } /* ---------- logo ---------- Deliberately plain : CSS mask-image requests are issued in CORS mode, which browsers refuse for file:// documents, so a masked logo would vanish the moment someone previewed the site straight off disk. An renders from file:// and from a server alike. Defaults only — every usage sets its own width in site.css. */ .logo{display:block;height:auto;max-width:100%} .logo--mono{width:24px} .logo--word{width:240px} .logo--rooted{width:184px} /* ---------- graceful degradation: no backdrop-filter (old Firefox, some GPUs) ---------- */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:rgba(255,255,255,.94)} .glass--ink{background:#141414} .glass::after{display:none} .spot{display:none} }