save
This commit is contained in:
Lars Nolden
@@ -56,6 +56,18 @@
|
||||
--brand-900: #06474e;
|
||||
--navy: #071a3f;
|
||||
|
||||
/* glass — sampled off the cube renders (glass-cubes-stack, brand-cube) */
|
||||
--glass-spec: #dffcfc; /* specular top face */
|
||||
--glass-edge: #97f1f4; /* light piped along the lit edge */
|
||||
--glass-deep: #176163; /* shaded face, and the bloom it casts */
|
||||
|
||||
/* per-surface slots, retuned by the glass-* utilities below */
|
||||
--glass-rim: color-mix(in srgb, var(--glass-spec) 55%, transparent);
|
||||
--glass-ring: rgb(255 255 255 / 0.2);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.35);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 50%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--glass-deep) 38%, transparent);
|
||||
|
||||
--radius: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -112,6 +124,21 @@
|
||||
0 2px 4px rgb(19 41 60 / 0.04), 0 16px 48px rgb(19 41 60 / 0.1);
|
||||
--shadow-band: 0 16px 40px rgb(10 100 89 / 0.28);
|
||||
--shadow-pill: 0 1px 2px rgb(19 41 60 / 0.06);
|
||||
|
||||
/* glass: lit top edge, piped rim, caustic pooling at the base */
|
||||
--inset-shadow-glass:
|
||||
inset 0 1px 0 0 var(--glass-rim), inset 0 0 0 1px var(--glass-ring),
|
||||
inset 0 -9px 12px -9px var(--glass-caustic);
|
||||
--shadow-glass:
|
||||
0 1px 2px rgb(19 41 60 / 0.05), 0 10px 22px -10px var(--glass-bloom);
|
||||
--shadow-glass-lg:
|
||||
0 2px 4px rgb(19 41 60 / 0.06), 0 18px 34px -12px var(--glass-bloom);
|
||||
/* the same optics at slab scale, for surfaces the size of the footer */
|
||||
--inset-shadow-glass-slab:
|
||||
inset 0 2px 0 0 var(--glass-rim), inset 0 0 0 1px var(--glass-ring),
|
||||
inset 0 -30px 44px -30px var(--glass-caustic);
|
||||
--shadow-glass-slab:
|
||||
0 2px 6px rgb(19 41 60 / 0.05), 0 30px 60px -24px var(--glass-bloom);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -167,3 +194,165 @@
|
||||
border-color: var(--brand-300);
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Glass surfaces */
|
||||
/* Read off the cube renders: light falls in from the top left, the */
|
||||
/* body deepens towards the base, the edge pipes light around the */
|
||||
/* silhouette and pools into a caustic underneath. */
|
||||
/* Same colour space as the tokens above – the bodies are brand */
|
||||
/* tokens thinned `in srgb`, and hand-written gradients interpolate */
|
||||
/* in srgb too (Tailwind's own gradient utilities would go oklab). */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/* primary actions: teal glass, lit face → shaded base */
|
||||
@utility glass-teal {
|
||||
--glass-rim: color-mix(in srgb, var(--glass-spec) 45%, transparent);
|
||||
--glass-ring: rgb(255 255 255 / 0.2);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.38);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 55%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--brand-800) 45%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--glass-spec) 20%, transparent) 0%,
|
||||
color-mix(in srgb, var(--glass-spec) 5%, transparent) 32%,
|
||||
transparent 58%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--brand-600) 96%, transparent) 0%,
|
||||
color-mix(in srgb, var(--brand-700) 98%, transparent) 52%,
|
||||
var(--brand-800) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* secondary actions: thin mint glass over light surfaces */
|
||||
@utility glass-mint {
|
||||
--glass-rim: rgb(255 255 255 / 0.85);
|
||||
--glass-ring: rgb(255 255 255 / 0.7);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.9);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 40%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--glass-deep) 22%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / 0.55) 0%,
|
||||
rgb(255 255 255 / 0.15) 40%,
|
||||
transparent 66%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--brand-100) 82%, transparent) 0%,
|
||||
color-mix(in srgb, var(--brand-200) 74%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* quiet actions: clear glass, only the edge and a teal cast give it away */
|
||||
@utility glass-clear {
|
||||
--glass-rim: rgb(255 255 255 / 0.9);
|
||||
--glass-ring: var(--input);
|
||||
--glass-ring-lit: color-mix(in srgb, var(--brand-300) 80%, transparent);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 35%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--glass-deep) 16%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / 0.7) 0%,
|
||||
rgb(255 255 255 / 0.3) 42%,
|
||||
transparent 68%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.72) 0%,
|
||||
color-mix(in srgb, var(--brand-50) 66%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* frosted white glass for the teal gradient bands */
|
||||
@utility glass-frost {
|
||||
--glass-rim: rgb(255 255 255 / 0.95);
|
||||
--glass-ring: rgb(255 255 255 / 0.8);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.95);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 45%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--brand-900) 45%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / 0.4) 0%,
|
||||
rgb(255 255 255 / 0.1) 42%,
|
||||
transparent 66%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgb(255 255 255 / 0.94) 0%,
|
||||
color-mix(in srgb, var(--brand-50) 88%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* the same band, second action: glass with the band still showing through */
|
||||
@utility glass-veil {
|
||||
--glass-rim: rgb(255 255 255 / 0.55);
|
||||
--glass-ring: rgb(255 255 255 / 0.45);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.7);
|
||||
--glass-caustic: rgb(255 255 255 / 0.3);
|
||||
--glass-bloom: color-mix(in srgb, var(--brand-900) 35%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / 0.22) 0%,
|
||||
rgb(255 255 255 / 0.06) 40%,
|
||||
transparent 64%
|
||||
),
|
||||
linear-gradient(180deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0.07) 100%);
|
||||
}
|
||||
|
||||
/* cast navy glass, thick enough to read as a slab (footer) */
|
||||
@utility glass-navy {
|
||||
--glass-rim: color-mix(in srgb, var(--glass-edge) 42%, transparent);
|
||||
--glass-ring: rgb(255 255 255 / 0.12);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.2);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 34%, transparent);
|
||||
--glass-bloom: color-mix(in srgb, var(--navy) 32%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--glass-spec) 13%, transparent) 0%,
|
||||
color-mix(in srgb, var(--glass-spec) 3%, transparent) 26%,
|
||||
transparent 52%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--navy) 88%, transparent) 0%,
|
||||
color-mix(in srgb, var(--navy) 96%, transparent) 72%,
|
||||
color-mix(in srgb, var(--navy) 98%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@utility glass-danger {
|
||||
--glass-rim: rgb(255 255 255 / 0.4);
|
||||
--glass-ring: rgb(255 255 255 / 0.25);
|
||||
--glass-ring-lit: rgb(255 255 255 / 0.42);
|
||||
--glass-caustic: rgb(255 215 216 / 0.45);
|
||||
--glass-bloom: color-mix(in srgb, var(--destructive) 45%, transparent);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgb(255 255 255 / 0.28) 0%,
|
||||
rgb(255 255 255 / 0.06) 34%,
|
||||
transparent 62%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--destructive) 94%, transparent) 0%,
|
||||
color-mix(in srgb, var(--destructive) 99%, transparent) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* hover/active: the face turns further into the light */
|
||||
@utility glass-lit {
|
||||
--glass-rim: color-mix(in srgb, var(--glass-spec) 90%, transparent);
|
||||
--glass-ring: var(--glass-ring-lit);
|
||||
--glass-caustic: color-mix(in srgb, var(--glass-edge) 92%, transparent);
|
||||
background-color: color-mix(in srgb, var(--glass-spec) 16%, transparent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user