Compare commits
4 commits
5dca7b2ac1
...
e2c343c49d
| Author | SHA1 | Date | |
|---|---|---|---|
| e2c343c49d | |||
| b22976bf85 | |||
| 63a3fda67c | |||
| 44c4df7364 |
3 changed files with 653 additions and 53 deletions
BIN
www/banner.png
Normal file
BIN
www/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
436
www/index.html
436
www/index.html
|
|
@ -1,17 +1,427 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WA2000</title>
|
||||
<link type="text/css" rel="stylesheet" href="./style.css">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WA2000</title>
|
||||
<link type="text/css" rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>waff waff!</h1>
|
||||
<div class="divider"></div>
|
||||
<p>tiny text!!!</p>
|
||||
<p>wuff</p>
|
||||
<div class="banner">
|
||||
<img src="banner.png" alt="banner" />
|
||||
</div>
|
||||
|
||||
<div class="nav-wrap">
|
||||
<div class="nav-pill" id="nav-pill">
|
||||
<div class="nav-pill-bar" id="nav-pill-bar">
|
||||
<span class="nav-logo">WA2000</span>
|
||||
<svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="nav-dropdown" id="nav-dropdown">
|
||||
<div class="nav-divider"></div>
|
||||
<a href="#" class="nav-link">Home</a>
|
||||
<a href="#" class="nav-link">About</a>
|
||||
<a href="#" class="nav-link">Gallery</a>
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
<div class="nav-placeholder" id="nav-placeholder"></div>
|
||||
|
||||
<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
|
||||
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
|
||||
<defs>
|
||||
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feImage id="nav-disp-img" result="disp_map" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
|
||||
<feImage id="nav-spec-img" result="spec_map" />
|
||||
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
|
||||
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
|
||||
</filter>
|
||||
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feImage id="displacement-map-img" result="disp_map" />
|
||||
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
|
||||
<feImage id="specular-map-img" result="spec_map" />
|
||||
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
|
||||
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<div class="card" id="card">
|
||||
<h1>waff waff!</h1>
|
||||
<div class="divider"></div>
|
||||
<p>tiny text!!!</p>
|
||||
<p>wuff</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="card" id="card">
|
||||
<h1>waff waff!</h1>
|
||||
<div class="divider"></div>
|
||||
<p>tiny text!!!</p>
|
||||
<p>wuff</p>
|
||||
</div>
|
||||
<div class="card" id="card">
|
||||
<h1>waff waff!</h1>
|
||||
<div class="divider"></div>
|
||||
<p>tiny text!!!</p>
|
||||
<p>wuff</p>
|
||||
</div>
|
||||
<script>
|
||||
// ─── Configuration ────────────────────────────────────────────────────────────
|
||||
const CONFIG = {
|
||||
bezelWidth: 0.18,
|
||||
glassThickness: 2.0,
|
||||
ior: 1.65,
|
||||
scaleRatio: 1.6,
|
||||
specularAngle: -55,
|
||||
specularOpacity: 0.9,
|
||||
specularSaturation: 6,
|
||||
borderRadius: 50,
|
||||
};
|
||||
|
||||
// ─── Maths helpers ────────────────────────────────────────────────────────────
|
||||
|
||||
function surfaceHeight(t) {
|
||||
return Math.pow(1 - Math.pow(1 - t, 4), 0.25);
|
||||
}
|
||||
|
||||
function surfaceNormal(t) {
|
||||
const d = 0.001;
|
||||
const y1 = surfaceHeight(Math.max(0, t - d));
|
||||
const y2 = surfaceHeight(Math.min(1, t + d));
|
||||
const derivative = (y2 - y1) / (2 * d);
|
||||
return { x: -derivative, y: 1 };
|
||||
}
|
||||
|
||||
function refract(incidentDir, normal, n1, n2) {
|
||||
const nLen = Math.hypot(normal.x, normal.y);
|
||||
const nx = normal.x / nLen;
|
||||
const ny = normal.y / nLen;
|
||||
const ratio = n1 / n2;
|
||||
const cosI = -(incidentDir.x * nx + incidentDir.y * ny);
|
||||
const sinT2 = ratio * ratio * (1 - cosI * cosI);
|
||||
if (sinT2 > 1) return null;
|
||||
const cosT = Math.sqrt(1 - sinT2);
|
||||
return {
|
||||
x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx,
|
||||
y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Rounded rect helper ──────────────────────────────────────────────────────
|
||||
|
||||
function roundedRectInfo(px, py, width, height, r) {
|
||||
const radius = Math.min(r, width / 2, height / 2);
|
||||
|
||||
const inCornerZone =
|
||||
(px < radius || px > width - radius) &&
|
||||
(py < radius || py > height - radius);
|
||||
|
||||
let dist, nx, ny;
|
||||
|
||||
if (inCornerZone) {
|
||||
const corners = [
|
||||
{ cx: radius, cy: radius },
|
||||
{ cx: width - radius, cy: radius },
|
||||
{ cx: radius, cy: height - radius },
|
||||
{ cx: width - radius, cy: height - radius },
|
||||
];
|
||||
let best = corners[0], bestD = Math.hypot(px - corners[0].cx, py - corners[0].cy);
|
||||
for (let i = 1; i < corners.length; i++) {
|
||||
const d = Math.hypot(px - corners[i].cx, py - corners[i].cy);
|
||||
if (d < bestD) { bestD = d; best = corners[i]; }
|
||||
}
|
||||
dist = radius - bestD;
|
||||
const len = bestD || 1;
|
||||
nx = (best.cx - px) / len;
|
||||
ny = (best.cy - py) / len;
|
||||
} else {
|
||||
const dLeft = px;
|
||||
const dRight = width - 1 - px;
|
||||
const dTop = py;
|
||||
const dBottom = height - 1 - py;
|
||||
const minD = Math.min(dLeft, dRight, dTop, dBottom);
|
||||
dist = minD;
|
||||
if (minD === dLeft) { nx = 1; ny = 0; }
|
||||
else if (minD === dRight) { nx = -1; ny = 0; }
|
||||
else if (minD === dTop) { nx = 0; ny = 1; }
|
||||
else { nx = 0; ny = -1; }
|
||||
}
|
||||
|
||||
return { dist, nx, ny };
|
||||
}
|
||||
|
||||
// ─── Displacement map generation ─────────────────────────────────────────────
|
||||
|
||||
function buildDisplacementMap(width, height) {
|
||||
const bezel = CONFIG.bezelWidth * Math.min(width, height);
|
||||
const samples = 128;
|
||||
|
||||
const magnitudes = new Float32Array(samples);
|
||||
const incident = { x: 0, y: 1 };
|
||||
|
||||
for (let i = 0; i < samples; i++) {
|
||||
const t = i / (samples - 1);
|
||||
const normal = surfaceNormal(t);
|
||||
const refracted = refract(incident, normal, 1.0, CONFIG.ior);
|
||||
magnitudes[i] = refracted
|
||||
? (refracted.x - incident.x) * CONFIG.glassThickness * bezel
|
||||
: 0;
|
||||
}
|
||||
|
||||
const maxDisp = Math.max(...magnitudes) || 1;
|
||||
const data = new Uint8ClampedArray(width * height * 4);
|
||||
|
||||
for (let py = 0; py < height; py++) {
|
||||
for (let px = 0; px < width; px++) {
|
||||
const idx = (py * width + px) * 4;
|
||||
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
|
||||
|
||||
let dispX = 0, dispY = 0;
|
||||
|
||||
if (dist >= 0 && dist < bezel) {
|
||||
const t = dist / bezel;
|
||||
const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1)));
|
||||
const rawMag = magnitudes[sampleIdx] / maxDisp;
|
||||
const smooth = t * t * (3 - 2 * t);
|
||||
const mag = rawMag * (1 - smooth);
|
||||
dispX = nx * mag;
|
||||
dispY = ny * mag;
|
||||
}
|
||||
|
||||
data[idx] = Math.round(128 + dispX * 127);
|
||||
data[idx + 1] = Math.round(128 + dispY * 127);
|
||||
data[idx + 2] = 128;
|
||||
data[idx + 3] = 255;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
imageData: new ImageData(data, width, height),
|
||||
maxDisplacement: maxDisp * CONFIG.scaleRatio,
|
||||
};
|
||||
}
|
||||
|
||||
// ─── Specular highlight map generation ───────────────────────────────────────
|
||||
|
||||
function buildSpecularMap(width, height) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const bezel = CONFIG.bezelWidth * Math.min(width, height);
|
||||
const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180;
|
||||
const lightDir = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
|
||||
|
||||
const imageData = ctx.createImageData(width, height);
|
||||
const data = imageData.data;
|
||||
|
||||
for (let py = 0; py < height; py++) {
|
||||
for (let px = 0; px < width; px++) {
|
||||
const idx = (py * width + px) * 4;
|
||||
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
|
||||
|
||||
let intensity = 0;
|
||||
|
||||
if (dist >= 0 && dist < bezel) {
|
||||
const t = dist / bezel;
|
||||
const dot = nx * lightDir.x + ny * lightDir.y;
|
||||
const rim = Math.max(0, dot);
|
||||
const slope = Math.abs(surfaceNormal(t).x);
|
||||
const smooth = t * t * (3 - 2 * t);
|
||||
const raw = rim * slope * (1 - smooth);
|
||||
intensity = Math.pow(raw, 0.5);
|
||||
}
|
||||
|
||||
data[idx] = Math.round(235 * intensity);
|
||||
data[idx + 1] = Math.round(245 * intensity);
|
||||
data[idx + 2] = Math.round(255 * intensity);
|
||||
data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
// ─── ImageData → data URL ─────────────────────────────────────────────────────
|
||||
|
||||
function imageDataToDataURL(imageData) {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = imageData.width;
|
||||
canvas.height = imageData.height;
|
||||
canvas.getContext('2d').putImageData(imageData, 0, 0);
|
||||
return canvas.toDataURL();
|
||||
}
|
||||
|
||||
// ─── Apply filter to card ─────────────────────────────────────────────────────
|
||||
|
||||
function applyLiquidGlass() {
|
||||
const card = document.getElementById('card');
|
||||
const w = card.offsetWidth;
|
||||
const h = card.offsetHeight;
|
||||
if (w === 0 || h === 0) return;
|
||||
|
||||
const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
|
||||
const dispDataURL = imageDataToDataURL(imageData);
|
||||
const specularDataURL = buildSpecularMap(w, h);
|
||||
|
||||
const dispImg = document.getElementById('displacement-map-img');
|
||||
const specImg = document.getElementById('specular-map-img');
|
||||
const dispFilter = document.getElementById('displacement-map-filter');
|
||||
|
||||
dispImg.setAttribute('href', dispDataURL);
|
||||
dispImg.setAttribute('width', w);
|
||||
dispImg.setAttribute('height', h);
|
||||
specImg.setAttribute('href', specularDataURL);
|
||||
specImg.setAttribute('width', w);
|
||||
specImg.setAttribute('height', h);
|
||||
dispFilter.setAttribute('scale', maxDisplacement);
|
||||
|
||||
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
|
||||
if (isChrome) {
|
||||
card.style.backdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
|
||||
card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Nav glass ────────────────────────────────────────────────────────────────
|
||||
|
||||
// Phase durations in ms — keep in sync with CSS transitions
|
||||
const OPEN_WIDTH_MS = 250; // width/radius expand duration
|
||||
const OPEN_DROPDOWN_MS = 300; // dropdown slide-down duration
|
||||
const OPEN_DROPDOWN_DELAY = 220; // CSS delay before dropdown opens
|
||||
const CLOSE_DROPDOWN_MS = 200; // dropdown collapse duration (no CSS delay)
|
||||
const CLOSE_WIDTH_MS = 250; // width/radius collapse duration
|
||||
const CLOSE_WIDTH_DELAY = 200; // wait for dropdown to finish before collapsing width
|
||||
|
||||
// Build and apply nav glass maps at a specific border-radius
|
||||
function applyNavGlassAt(radius) {
|
||||
const pill = document.getElementById('nav-pill');
|
||||
const w = pill.offsetWidth;
|
||||
const h = pill.offsetHeight;
|
||||
if (w === 0 || h === 0) return;
|
||||
|
||||
const savedBezel = CONFIG.bezelWidth;
|
||||
const savedScale = CONFIG.scaleRatio;
|
||||
const savedRadius = CONFIG.borderRadius;
|
||||
CONFIG.bezelWidth = 0.35;
|
||||
CONFIG.scaleRatio = 1.6;
|
||||
CONFIG.borderRadius = Math.min(radius, w / 2, h / 2);
|
||||
|
||||
const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
|
||||
const dispDataURL = imageDataToDataURL(imageData);
|
||||
const specularDataURL = buildSpecularMap(w, h);
|
||||
|
||||
CONFIG.bezelWidth = savedBezel;
|
||||
CONFIG.scaleRatio = savedScale;
|
||||
CONFIG.borderRadius = savedRadius;
|
||||
|
||||
document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
|
||||
document.getElementById('nav-disp-img').setAttribute('width', w);
|
||||
document.getElementById('nav-disp-img').setAttribute('height', h);
|
||||
document.getElementById('nav-spec-img').setAttribute('href', specularDataURL);
|
||||
document.getElementById('nav-spec-img').setAttribute('width', w);
|
||||
document.getElementById('nav-spec-img').setAttribute('height', h);
|
||||
document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
|
||||
|
||||
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
|
||||
if (isChrome) {
|
||||
pill.style.backdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
|
||||
pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
|
||||
}
|
||||
}
|
||||
|
||||
// Animate refraction maps across a time window
|
||||
function scheduleNavGlassFrames(startRadius, targetRadius, delayMs, durationMs, steps = 14) {
|
||||
for (let i = 1; i <= steps; i++) {
|
||||
const t = i / steps;
|
||||
const eased = 1 - Math.pow(1 - t, 3);
|
||||
const radius = startRadius + (targetRadius - startRadius) * eased;
|
||||
setTimeout(() => applyNavGlassAt(radius), delayMs + t * durationMs);
|
||||
}
|
||||
}
|
||||
|
||||
function applyNavGlass() {
|
||||
const pill = document.getElementById('nav-pill');
|
||||
const radius = parseFloat(getComputedStyle(pill).borderRadius) || 999;
|
||||
applyNavGlassAt(radius);
|
||||
}
|
||||
|
||||
// ─── Event listeners ──────────────────────────────────────────────────────────
|
||||
|
||||
window.addEventListener('load', () => { applyLiquidGlass(); applyNavGlass(); });
|
||||
window.addEventListener('resize', () => { applyLiquidGlass(); applyNavGlass(); });
|
||||
|
||||
let lastDPR = window.devicePixelRatio;
|
||||
setInterval(() => {
|
||||
if (window.devicePixelRatio !== lastDPR) {
|
||||
lastDPR = window.devicePixelRatio;
|
||||
applyLiquidGlass();
|
||||
applyNavGlass();
|
||||
}
|
||||
}, 250);
|
||||
|
||||
// ─── Nav pill interactions ────────────────────────────────────────────────────
|
||||
|
||||
const navPill = document.getElementById('nav-pill');
|
||||
const navBar = document.getElementById('nav-pill-bar');
|
||||
|
||||
navBar.addEventListener('click', () => {
|
||||
const opening = !navPill.classList.contains('open');
|
||||
navPill.classList.toggle('open');
|
||||
|
||||
if (opening) {
|
||||
// Phase 1: width expands (0 → OPEN_WIDTH_MS)
|
||||
scheduleNavGlassFrames(999, 25, 0, OPEN_WIDTH_MS);
|
||||
// Phase 2: dropdown falls (OPEN_DROPDOWN_DELAY → +OPEN_DROPDOWN_MS)
|
||||
// refraction height grows as the pill gets taller — track it live
|
||||
scheduleNavGlassFrames(25, 25, OPEN_DROPDOWN_DELAY, OPEN_DROPDOWN_MS);
|
||||
// Final settle
|
||||
setTimeout(applyNavGlass, OPEN_DROPDOWN_DELAY + OPEN_DROPDOWN_MS + 50);
|
||||
} else {
|
||||
// Phase 1: dropdown collapses (0 → CLOSE_DROPDOWN_MS)
|
||||
scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS);
|
||||
// Phase 2: width shrinks after dropdown finishes
|
||||
scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS);
|
||||
// Final settle
|
||||
setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!navPill.contains(e.target) && navPill.classList.contains('open')) {
|
||||
navPill.classList.remove('open');
|
||||
scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS);
|
||||
scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS);
|
||||
setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
|
||||
}
|
||||
});
|
||||
|
||||
// ─── Nav pin on scroll ────────────────────────────────────────────────────────
|
||||
|
||||
const navWrap = document.querySelector('.nav-wrap');
|
||||
const navPlaceholder = document.getElementById('nav-placeholder');
|
||||
|
||||
function updateNavPin() {
|
||||
navWrap.classList.remove('pinned');
|
||||
navPlaceholder.classList.remove('visible');
|
||||
const offsetTop = navWrap.offsetTop;
|
||||
if (window.scrollY > offsetTop) {
|
||||
navWrap.classList.add('pinned');
|
||||
navPlaceholder.classList.add('visible');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', updateNavPin);
|
||||
window.addEventListener('load', updateNavPin);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
270
www/style.css
270
www/style.css
|
|
@ -1,47 +1,237 @@
|
|||
* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background: #0a0e1a url('background.png') center/cover no-repeat;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0a0e1a url('background.png') center/cover no-repeat;
|
||||
}
|
||||
.banner {
|
||||
width: 99%;
|
||||
max-height: 280px;
|
||||
overflow: hidden;
|
||||
margin: 5px 5px 10px 5px; /* 5px on top/left/right, 10px on bottom */
|
||||
border-radius: 35px; /* Rounded corners */
|
||||
}
|
||||
|
||||
.card {
|
||||
width: min(520px, 88%);
|
||||
padding: 52px;
|
||||
border-radius: 24px;
|
||||
text-align: center;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
backdrop-filter: blur(32px) saturate(1.4);
|
||||
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.banner img {
|
||||
width: 100%; /* Stretch image to fill the banner width */
|
||||
height: 100%; /* Fill the banner height */
|
||||
object-fit: cover; /* Crop and center the image rather than squishing it */
|
||||
object-position: center top; /* Anchor to the top so the most important part of the image stays visible */
|
||||
display: block; /* Remove the default inline gap below images */
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(36px, 6vw, 52px);
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
.card {
|
||||
width: min(880px, 88%); /* Cap width at 880px, but shrink to 88% of viewport on small screens */
|
||||
height: 540px; /* Fixed height */
|
||||
padding: 40px; /* Inner spacing on all sides */
|
||||
border-radius: 50px; /* Rounded corners */
|
||||
text-align: center; /* Center all text content */
|
||||
background: rgba(255, 255, 255, 0.08); /* Very subtle white tint — more transparent than before so the background breathes through */
|
||||
border: 2px solid rgba(255, 255, 255, 1); /* Slightly brighter border for a crisper glass edge */
|
||||
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Firefox fallback — blur, colour boost, and slight brightness lift; Chrome overrides this via JS with the SVG refraction filter */
|
||||
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05); /* Webkit prefix for Safari compatibility */
|
||||
box-shadow:
|
||||
0 24px 60px rgba(0, 0, 0, 0.35), /* Large soft drop shadow for depth/lift */
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08); /* Hairline outer glow ring */
|
||||
position: relative; /* Required so ::before/::after pseudo-elements position relative to the card */
|
||||
overflow: hidden; /* Clip pseudo-elements to the card's rounded corners */
|
||||
}
|
||||
|
||||
h1 em {
|
||||
font-style: italic;
|
||||
color: rgba(180, 210, 255, 0.85);
|
||||
}
|
||||
/* ── Main specular: top-left corner catch ── */
|
||||
.card::before {
|
||||
content: ''; /* Required to render a pseudo-element with no text */
|
||||
position: absolute; /* Layer it on top of the card without affecting layout */
|
||||
inset: 0; /* Stretch to fill all four edges of the card */
|
||||
border-radius: inherit; /* Match the card's rounded corners */
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse 60% 30% at 10% -5%, /* Tighter ellipse originating just above the top-left corner */
|
||||
rgba(255, 255, 255, 0.28) 0%, /* Bright white at the light source center */
|
||||
transparent 55% /* Fade out before reaching the middle of the card */
|
||||
),
|
||||
linear-gradient(
|
||||
128deg, /* Diagonal direction: top-left → bottom-right */
|
||||
rgba(255, 255, 255, 0.13) 0%, /* Broad glancing sheen starting at the top-left corner */
|
||||
rgba(255, 255, 255, 0.04) 30%, /* Dim mid-point to keep the fade gradual */
|
||||
transparent 55% /* Fades out before the center */
|
||||
);
|
||||
pointer-events: none; /* Prevent this overlay from blocking mouse interaction */
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 40px;
|
||||
height: 0.5px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin: 22px auto;
|
||||
}
|
||||
/* ── Glass rim: inset edge highlights ── */
|
||||
.card::after {
|
||||
content: ''; /* Required to render the pseudo-element */
|
||||
position: absolute; /* Layer over the card without shifting layout */
|
||||
inset: 0; /* Fill the card edge to edge */
|
||||
border-radius: inherit; /* Match card rounding */
|
||||
background: transparent; /* No fill — only the inset shadow matters here */
|
||||
border: 1px solid transparent; /* Placeholder border so box-shadow inset renders correctly on all sides */
|
||||
border-image: none; /* Ensure no gradient border overrides the transparent border */
|
||||
box-shadow:
|
||||
inset 1px 1px 0 rgba(218, 218, 218, 0.55), /* Bright top and left inner edge — simulates light hitting the glass rim */
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.12); /* Darker bottom and right inner edge — simulates shadow on the far side */
|
||||
pointer-events: none; /* Let clicks pass through to card content */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.75;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
}
|
||||
h1 {
|
||||
font-size: clamp(36px, 6vw, 52px); /* Fluid size: min 36px, scales with viewport, max 52px */
|
||||
font-weight: 300; /* Light weight for an elegant look */
|
||||
line-height: 1.1; /* Tight leading for large display text */
|
||||
color: rgba(255, 255, 255, 0.92); /* Near-white, slightly transparent */
|
||||
}
|
||||
|
||||
h1 em {
|
||||
font-style: italic; /* Standard italic for emphasis */
|
||||
color: rgba(180, 210, 255, 0.85); /* Cool blue tint for italicised words */
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 40px; /* Short horizontal rule */
|
||||
height: 0.5px; /* Hairline thickness */
|
||||
background: rgba(255, 255, 255, 0.2); /* Faint white line */
|
||||
margin: 22px auto; /* Vertical spacing + horizontal centering */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 300; /* Light weight to match the heading style */
|
||||
line-height: 1.75; /* Generous leading for readability */
|
||||
color: rgba(255, 255, 255, 0.52); /* Dimmed white — secondary text hierarchy */
|
||||
}
|
||||
|
||||
/* ── Nav pill wrapper — sits below banner, pins to top on scroll ── */
|
||||
.nav-wrap {
|
||||
align-self: stretch; /* Override body align-items:center — makes this child full width */
|
||||
display: flex;
|
||||
justify-content: center; /* Centre the pill inside the full-width container */
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.nav-wrap.pinned {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
display: none;
|
||||
align-self: stretch;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.nav-placeholder.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── The pill itself ── */
|
||||
.nav-pill {
|
||||
width: 160px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.30);
|
||||
backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(1.8) brightness(1.05);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.25),
|
||||
inset 1px 1px 0 rgba(255, 255, 255, 0.45),
|
||||
inset -1px -1px 0 rgba(0, 0, 0, 0.10);
|
||||
overflow: hidden;
|
||||
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ── Pill expands and corners soften when open ── */
|
||||
.nav-pill.open {
|
||||
border-radius: 22px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* ── The always-visible top bar: logo + chevron ── */
|
||||
.nav-pill-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
padding: 0 18px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ── Chevron rotates 180° when open ── */
|
||||
.nav-chevron {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-pill.open .nav-chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* ── Dropdown — hidden by default, slides down when open ── */
|
||||
.nav-dropdown {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
/* Opening: wait for width to finish first, then drop down */
|
||||
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
|
||||
opacity 0.25s ease 0.22s;
|
||||
}
|
||||
|
||||
.nav-pill.open .nav-dropdown {
|
||||
max-height: 300px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Closing: dropdown collapses immediately (no delay), width waits after */
|
||||
.nav-pill:not(.open) .nav-dropdown {
|
||||
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 0.15s ease;
|
||||
}
|
||||
|
||||
/* Width/radius collapse waits for dropdown to finish */
|
||||
.nav-pill:not(.open) {
|
||||
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
|
||||
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
|
||||
}
|
||||
|
||||
.nav-divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 11px 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.70);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue