/* ============================================================ AELITHON — PREMIUM MATERIAL (glass cards + buttons) ------------------------------------------------------------ Loaded on the MAIN SITE only (not the wiki). Layers a single "polished architectural glass" material over every card, panel and button so each component reads as a physical, layered object rather than a flat rectangle: - a frosted translucent shell (backdrop blur) that hints at whatever sits behind it, - a soft overhead sheen that fades downward, - a thin illuminated light line embedded just inside the top edge, fading out at both ends, - edge lighting that is brightest on top and near-invisible on the bottom to fake real glass thickness, - a gentle center-bright / corner-dark vignette for volume, - a large, very soft diffused drop shadow so it floats, - a faint inner shadow to define the glass boundary. Everything is driven by the tokens below so light + dark themes both stay tasteful. This file only ADDS material; the layout, colours and content all come from the existing stylesheets. ============================================================ */ /* ---- Material tokens (dark is the primary mood) ------------ */ :root, [data-theme="dark"] { --glass-fill: color-mix(in oklab, var(--bg-elev) 60%, transparent); --glass-sheen: rgba(255, 255, 255, 0.10); --glass-core: rgba(255, 255, 255, 0.05); --glass-vignette: rgba(0, 0, 0, 0.30); --glass-line: rgba(255, 255, 255, 0.55); --glass-edge: rgba(255, 255, 255, 0.10); --glass-top-rim: rgba(255, 255, 255, 0.16); --glass-inner-rim: rgba(255, 255, 255, 0.04); --glass-inner-shade: rgba(0, 0, 0, 0.50); --glass-drop: rgba(0, 0, 0, 0.55); --btn-gloss: rgba(255, 255, 255, 0.32); --btn-top-rim: rgba(255, 255, 255, 0.42); --btn-inner-shade: rgba(0, 0, 0, 0.55); } [data-theme="light"] { --glass-fill: color-mix(in oklab, var(--bg-elev) 66%, transparent); --glass-sheen: rgba(255, 255, 255, 0.60); --glass-core: rgba(255, 255, 255, 0.35); --glass-vignette: rgba(24, 19, 31, 0.10); --glass-line: rgba(255, 255, 255, 0.90); --glass-edge: rgba(24, 19, 31, 0.08); --glass-top-rim: rgba(255, 255, 255, 0.85); --glass-inner-rim: rgba(24, 19, 31, 0.03); --glass-inner-shade: rgba(24, 19, 31, 0.12); --glass-drop: rgba(24, 19, 31, 0.16); --btn-gloss: rgba(255, 255, 255, 0.55); --btn-top-rim: rgba(255, 255, 255, 0.70); --btn-inner-shade: rgba(24, 19, 31, 0.22); } /* ============================================================ CARDS / PANELS / BOXES — one sculpted piece of glass ============================================================ */ .bento-tile, .mini-card, .journal-card, .showcase, .metrics, .contact-panel { position: relative; border-radius: clamp(20px, 1.5vw, 28px); border: 1px solid var(--glass-edge); /* Layered surface, painted top-to-bottom in this order: 1) the thin embedded top light line (fades at both ends), 2) the overhead sheen that fades downward, 3) a soft brighter core near the top, 4) a corner-darkening vignette for volume, 5) the frosted translucent base fill. */ background: linear-gradient(90deg, transparent 6%, var(--glass-line) 50%, transparent 94%) no-repeat 50% 2px / 100% 1px, linear-gradient(180deg, var(--glass-sheen) 0%, transparent 42%), radial-gradient(130% 100% at 50% -12%, var(--glass-core) 0%, transparent 55%), radial-gradient(120% 130% at 50% 50%, transparent 58%, var(--glass-vignette) 130%), var(--glass-fill); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 34px 60px -28px var(--glass-drop), /* big soft float shadow */ 0 12px 24px -18px var(--glass-drop), /* closer contact shadow */ inset 0 1px 0 var(--glass-top-rim), /* bright top edge */ inset 0 0 0 1px var(--glass-inner-rim), /* faint full rim = depth */ inset 0 -26px 44px -34px var(--glass-inner-shade); /* inner volume shade */ transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease); } /* On hover the glass lifts a touch more and the embedded light glows marginally stronger — elegant, not energetic. (The translateY lift still comes from the existing component rules / JS tilt.) */ .bento-tile:hover, .mini-card:hover, .journal-card:hover, .showcase:hover, .metrics:hover, .contact-panel:hover { border-color: var(--border-strong); box-shadow: 0 48px 82px -30px var(--glass-drop), 0 18px 34px -20px var(--glass-drop), inset 0 1px 0 var(--glass-top-rim), inset 0 0 0 1px var(--glass-inner-rim), inset 0 -26px 44px -34px var(--glass-inner-shade), 0 26px 64px -26px var(--glow); /* soft ambient accent glow */ } /* Where a browser cannot blur what is behind the card, make the fill a little more opaque so text stays crisp. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .bento-tile, .mini-card, .journal-card, .showcase, .metrics, .contact-panel { --glass-fill: color-mix(in oklab, var(--bg-elev) 92%, transparent); } } /* ============================================================ BUTTONS — precision-machined polished glass ============================================================ */ .btn { position: relative; isolation: isolate; overflow: hidden; /* clips the gloss to the pill shape */ transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), background-color 0.32s var(--ease), border-color 0.32s var(--ease), color 0.32s var(--ease); } /* the curved glossy reflection across the upper half of the surface */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; /* behind the label, above the fill */ border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, var(--btn-gloss) 0%, rgba(255, 255, 255, 0.06) 44%, transparent 62% ); opacity: 0.9; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); } /* Primary: solid gradient object with a lit top rim, an inner base shade for curvature, an ambient colour glow, and a soft drop. */ .btn-primary { box-shadow: inset 0 1px 0 var(--btn-top-rim), inset 0 -10px 18px -14px var(--btn-inner-shade), 0 8px 22px -8px var(--glow), 0 4px 12px -6px rgba(0, 0, 0, 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--btn-top-rim), inset 0 -10px 18px -14px var(--btn-inner-shade), 0 16px 40px -10px var(--glow), 0 10px 24px -10px rgba(0, 0, 0, 0.45); } .btn-primary:hover::before { opacity: 1; } .btn-primary:active { transform: translateY(1px) scale(0.99); box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 4px 14px -8px var(--glow); } .btn-primary:active::before { opacity: 0.7; transform: translateY(1px); } /* Ghost: frosted glass chip with the same lit top rim + soft float. */ .btn-ghost { background: var(--bg-glass); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-top-rim), 0 6px 20px -12px rgba(0, 0, 0, 0.4); } .btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 1px 0 var(--glass-top-rim), 0 14px 34px -14px var(--glow); } .btn-ghost:hover::before { opacity: 1; } .btn-ghost:active { transform: translateY(1px) scale(0.99); box-shadow: inset 0 2px 6px -2px rgba(0, 0, 0, 0.35), 0 4px 12px -8px rgba(0, 0, 0, 0.3); } /* Respect reduced-motion: keep the material, drop the movement. */ @media (prefers-reduced-motion: reduce) { .bento-tile, .mini-card, .journal-card, .showcase, .metrics, .contact-panel, .btn, .btn::before { transition: none; } .btn-primary:hover, .btn-ghost:hover { transform: none; } }