@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://unpkg.com/normalize.css') layer(normalize);
@layer normalize, base, demo;
@layer demo {
[aria-hidden] li,
.nav li {
width: 32px;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
}
:root {
--bg: color-mix(in hsl, canvasText 8%, canvas);
--color: color-mix(in hsl, canvasText 92%, canvas);
}
.nav button {
padding: 0;
width: 100%;
}
.nav {
color: var(--color);
box-shadow: 0 4px 8px 0 hsl(0 0% 0% / 0.2);
position: fixed;
bottom: 3rem;
left: 50%;
translate: -50% 0;
padding: 4px;
border-radius: 100px;
background: linear-gradient(var(--bg), var(--bg)) padding-box,
linear-gradient(hsl(0 0% 90% / 0.5), hsl(0 0% 10% / 0.25)) border-box;
border: 1px solid transparent;
transition: opacity 0s var(--transition);
}
body:has(:popover-open) .nav {
opacity: 0;
transition-delay: 0s;
}
[popover] [aria-hidden] :where(a),
.nav :where(a, button) {
width: 100%;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-items: center;
text-decoration: none;
border: 0;
cursor: pointer;
font-weight: 500;
color: inherit;
background: transparent;
&:is(:focus-visible) {
outline-color: transparent;
outline-width: 0px;
background: color-mix(in hsl, canvasText, canvas 75%);
}
}
[popover] [aria-hidden],
.nav ul {
display: flex;
gap: 4px;
padding: 0;
margin: 0;
list-style-type: none;
}
[popover] [aria-hidden] {
position: absolute;
bottom: 4px;
left: 50%;
translate: -50% 0;
}
.nav {
anchor-name: --nav;
}
.theme-icon path {
display: none;
}
[data-theme='system'] .theme-icon path:nth-of-type(1),
[data-theme='light'] .theme-icon path:nth-of-type(2),
[data-theme='dark'] .theme-icon path:nth-of-type(3) {
display: block;
}
[popover] .content__content {
top: 0;
left: 0;
width: min(var(--width), 100vw - 2rem);
height: min(var(--height), 80vh);
padding: 4px;
}
[popover] {
color: var(--color);
position-anchor: --nav;
margin: 0;
inset: unset;
background: linear-gradient(var(--bg), var(--bg)) padding-box,
linear-gradient(hsl(0 0% 90% / 0.5), hsl(0 0% 10% / 0.25)) border-box;
border: 1px solid transparent;
}
/* Animation */
:root {
--width: 640px;
--height: 580px;
--power-in: linear(
0 0%,
0.0039 6.25%,
0.0156 12.5%,
0.0352 18.75%,
0.0625 25%,
0.0977 31.25%,
0.1407 37.5%,
0.1914 43.74%,
0.2499 49.99%,
0.3164 56.25%,
0.3906 62.5%,
0.5625 75%,
0.7656 87.5%,
1 100%
);
--power-in-out: linear(
0 0%,
0.0012 14.95%,
0.0089 22.36%,
0.0297 28.43%,
0.0668 33.43%,
0.0979 36.08%,
0.1363 38.55%,
0.2373 43.07%,
0.3675 47.01%,
0.5984 52.15%,
0.7121 55.23%,
0.8192 59.21%,
0.898 63.62%,
0.9297 66.23%,
0.9546 69.06%,
0.9733 72.17%,
0.9864 75.67%,
0.9982 83.73%,
1 100%
);
--power-out: linear(
0 0%,
0.2342 12.49%,
0.4374 24.99%,
0.6093 37.49%,
0.6835 43.74%,
0.7499 49.99%,
0.8086 56.25%,
0.8593 62.5%,
0.9023 68.75%,
0.9375 75%,
0.9648 81.25%,
0.9844 87.5%,
0.9961 93.75%,
1 100%
);
--transition: calc(var(--speed, 0.35) * 1s);
--ease: linear(
0 0%,
0.0027 3.64%,
0.0106 7.29%,
0.0425 14.58%,
0.0957 21.87%,
0.1701 29.16%,
0.2477 35.19%,
0.3401 41.23%,
0.5982 55.18%,
0.7044 61.56%,
0.7987 68.28%,
0.875 75%,
0.9297 81.25%,
0.9687 87.5%,
0.9922 93.75%,
1 100%
);
}
li svg {
width: 24px;
}
[popover] {
transition-property: display, overlay, width, height, border-radius;
transition-duration: var(--transition);
transition-behavior: allow-discrete;
transition-timing-function: var(--ease);
translate: -50% 0;
padding: 0;
/* clip-path: inset(0 0 0 0 round 21px); */
box-shadow: 0 4px 8px 0 hsl(0 0% 0% / 0.2);
bottom: anchor(bottom);
left: anchor(left);
width: anchor-size(width);
height: anchor-size(height);
border-radius: 21px;
@starting-style {
width: min(var(--width), 100vw - 2rem);
height: min(var(--height), 80vh);
}
}
[popover] .content__content {
transition-property: display, opacity, filter;
transition-duration: calc(var(--transition) * 0.5);
transition-behavior: allow-discrete;
transition-timing-function: var(--power-out);
opacity: 0;
filter: blur(4px);
display: flex;
flex-direction: column;
.links {
position: relative;
flex: 1;
nav {
padding-block: 12px;
overflow: auto;
position: absolute;
inset: 0;
scrollbar-color: canvasText transparent;
scrollbar-width: thin;
}
&:after {
content: '';
pointer-events: none;
position: absolute;
inset: 0;
background: var(--bg);
mask: linear-gradient(0deg, #000, #0000 12px calc(100% - 12px), #000);
}
}
}
.content__content h3 {
font-size: 0.875rem;
margin: 0;
opacity: 0.675;
font-weight: 400;
padding: 0 12px;
margin-block: 6px;
}
.content__content li a svg {
width: 16px;
}
.content__content li a {
font-weight: 300;
display: flex;
color: var(--color);
align-items: center;
height: 40px;
gap: 12px;
text-decoration: none;
padding: 6px 12px;
border-radius: 6px;
&:is(:hover, :focus-visible) {
outline-color: transparent;
outline-width: 0px;
background: color-mix(in hsl, canvas, canvasText 15%);
}
}
.content__content ul {
margin: 0;
padding: 0;
padding-inline: 4px;
list-style-type: none;
}
.content {
position: absolute;
inset: 0;
overflow: hidden;
}
.heading {
padding-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.pill {
--color: color-mix(in hsl, canvasText 85%, canvas);
font-size: 0.75rem;
text-decoration: none;
border: 1px solid color-mix(in hsl, currentColor, #0000 75%);
color: inherit;
background: color-mix(in hsl, canvas 85%, canvasText);
color: var(--color);
padding: 2px;
border-radius: 4px;
margin-left: 0.75rem;
&:is(:hover, :focus-visible) {
--color: canvasText;
outline-color: transparent;
outline-width: 0px;
}
}
hr {
opacity: 0.25;
margin: 12px 0;
}
[popover] {
overflow: hidden;
}
[type='search'] {
width: 100%;
padding: 0.75rem;
background: transparent;
border: 0;
color: var(--color);
border-radius: calc(21px - 4px);
transition: background-color 0.2s;
scroll-margin-top: 100px;
&:focus-visible {
/* background: color-mix(in hsl, canvasText, canvas 12%); */
outline-color: #0000;
outline-width: 0;
}
}
[popover]:popover-open .content__content {
opacity: 1;
filter: blur(0);
transition-delay: calc(var(--transition) * 0.5);
transition-timing-function: var(--power-in);
@starting-style {
opacity: 0;
filter: blur(4px);
}
}
[popover]:popover-open {
width: min(var(--width), 100vw - 2rem);
height: min(var(--height), 80vh);
border-radius: 21px;
@starting-style {
width: anchor-size(width);
height: anchor-size(height);
border-radius: 21px;
}
}
[popover] [aria-hidden] li {
/* let's say the speed is 20% and has to be done by 75% */
/* Your delay window is 55% which you can split using sin() for a curve */
--speed: calc(var(--transition) * 0.7);
--delay: calc(sin((var(--i) / 6) * 45deg) * (var(--speed) * 1));
transition-property: opacity, translate, filter;
transition-duration: var(--speed);
transition-delay: var(--delay);
}
[popover]:popover-open [aria-hidden] li {
translate: 0 100%;
opacity: 0;
filter: blur(4px);
@starting-style {
translate: 0 0;
opacity: 1;
filter: blur(0);
}
}
.arrow {
position-anchor: --nav;
width: clamp(80px, 10vmin, 200px);
container-type: inline-size;
position: absolute;
bottom: anchor(top);
left: anchor(center);
color: color-mix(in hsl, canvasText, #0000 40%);
}
.arrow svg {
width: 100%;
scale: -1 -1;
}
.arrow label {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
left: 80%;
bottom: 25%;
rotate: 8deg;
font-size: 20cqi;
white-space: nowrap;
}
}
@layer base {
:root {
--font-size-min: 16;
--font-size-max: 20;
--font-ratio-min: 1.2;
--font-ratio-max: 1.33;
--font-width-min: 375;
--font-width-max: 1500;
}
html {
color-scheme: light dark;
}
[data-theme='light'] {
color-scheme: light only;
}
[data-theme='dark'] {
color-scheme: dark only;
}
:where(.fluid) {
--fluid-min: calc(
var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
);
--fluid-max: calc(
var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
);
--fluid-preferred: calc(
(var(--fluid-max) - var(--fluid-min)) /
(var(--font-width-max) - var(--font-width-min))
);
--fluid-type: clamp(
(var(--fluid-min) / 16) * 1rem,
((var(--fluid-min) / 16) * 1rem) -
(((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
(var(--fluid-preferred) * var(--variable-unit, 100vi)),
(var(--fluid-max) / 16) * 1rem
);
font-size: var(--fluid-type);
}
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: light-dark(#fff, #000);
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
Helvetica, Arial, sans-serif, system-ui;
}
body::before {
--size: 45px;
--line: color-mix(in lch, canvasText, transparent 70%);
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background: linear-gradient(
90deg,
var(--line) 1px,
transparent 1px var(--size)
)
50% 50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
mask: linear-gradient(-20deg, transparent 50%, white);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}
.bear-link {
color: canvasText;
position: fixed;
top: 1rem;
left: 1rem;
width: 48px;
aspect-ratio: 1;
display: grid;
place-items: center;
opacity: 0.8;
}
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
opacity: 1;
}
.bear-link svg {
width: 75%;
}
/* Utilities */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
}
@property --pos {
inherits: true;
initial-value: 100%;
syntax: '<percentage>';
}
::placeholder {
color: canvasText;
mask: linear-gradient(
-75deg,
#0009 calc(50% - 4ch),
#000,
#0009 calc(50% + 4ch)
)
0% 50% / 300% 100%;
mask-position: var(--pos) 50%;
}
[popover]:popover-open [type='search'] {
animation: shimmer 8s calc(var(--speed, 0.35) * 1s);
}
@keyframes shimmer {
0% {
--pos: 100%;
}
50%,
100% {
--pos: 0%;
}
}
[data-backdrop='true'] [popover]::backdrop {
transition-property: overlay, display, opacity;
transition-duration: calc(var(--speed, 0.35) * 1s);
transition-behavior: allow-discrete;
background: hsl(0 0% 0% / 0.25);
backdrop-filter: blur(4px);
opacity: 0;
}
[data-backdrop='true'] [popover]:popover-open::backdrop {
opacity: 1;
}
@starting-style {
[data-backdrop='true'] [popover]:popover-open::backdrop {
opacity: 0;
}
}
!
