@import url("https://fonts.googleapis.com/css2?family=Geist:[email protected]&display=swap"); @import url("https://unpkg.com/normalize.css") layer(normalize); @layer normalize, base, demo, stick, effect, srollbar; @layer scrollbar { @property --scroller { initial-value: 0; syntax: ""; inherits: true; } @property --chroma { initial-value: 0; syntax: ""; inherits: true; } [data-sync-scrollbar="false"] { scrollbar-color: light-dark(black, white) #0000; } [data-sync-scrollbar="true"] { scrollbar-color: oklch(var(--lightness) var(--chroma) var(--scroller)) #0000; } @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) { [data-sync-scrollbar="true"] { timeline-scope: --list; scrollbar-color: oklch(var(--lightness) var(--chroma, 0) var(--scroller)) #0000; animation-name: change, chroma-on, chroma-off; animation-fill-mode: both; animation-timing-function: linear; /* animation-timeline: scroll(root); */ animation-range: entry 50% exit 50%, entry 40% entry 50%, exit 30% exit 40%; animation-timeline: --list; ul { view-timeline: --list; } } } @keyframes change { to { --scroller: var(--end); } } @keyframes chroma-on { to { --chroma: 0.3; } } @keyframes chroma-off { to { --chroma: 0; } } } @layer effect { :root { --start: 0; --end: 360; --lightness: 65%; --base-chroma: 0.3; } [data-theme="dark"] { --lightness: 75%; } [data-theme="light"] { --lightness: 65%; } @media (prefers-color-scheme: dark) { --lightness: 75%; } ul { --step: calc((var(--end) - var(--start)) / (var(--count) - 1)); } li:not(:last-of-type) { color: oklch( var(--lightness) var(--base-chroma) calc(var(--start) + (var(--step) * var(--i))) ); } @supports (animation-timeline: scroll()) and (animation-range: 0% 100%) { li { opacity: 0.2; animation-name: brighten; &:first-of-type { opacity: 1; animation-name: dim; } &:last-of-type { opacity: 0.2; animation-name: bright; } animation-fill-mode: both; animation-timing-function: linear; animation-range: cover calc(50% - 1lh) calc(50% + 1lh); animation-timeline: view(); } @keyframes dim { 0%, 50% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes bright { 0% { opacity: 0.2; } 50%, 100% { opacity: 1; } } @keyframes brighten { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; filter: brightness(1.2); } } } } @layer stick { section:first-of-type { --font-level: 6; --font-size-min: 20; display: flex; line-height: 1.25; width: 100%; padding-left: 2rem; @media (min-width: 768px) { padding-left: 5rem; } } section:last-of-type { min-height: 100svh; display: flex; place-items: center; width: 100%; justify-content: center; h2 { --font-level: 6; --font-size-min: 20; } } main { width: 100%; } section:first-of-type h2 { position: sticky; top: calc(50% - 0.5lh); font-size: inherit; margin: 0; display: inline-block; height: fit-content; font-weight: 600; } ul { font-weight: 600; padding-inline: 0; margin: 0; list-style-type: none; } html { scroll-snap-type: y proximity; } li { scroll-snap-align: center; } h2, li:last-of-type { background: linear-gradient( canvasText 50%, color-mix(in oklch, canvas, canvasText 25%) ); background-clip: text; color: #0000; } } @layer demo { header { min-height: 100svh; display: flex; place-items: center; width: 100%; padding-inline: 2rem; @media (min-width: 768px) { padding-inine: 5rem; } } footer { padding-block: 2rem; opacity: 0.5; } h1 { --font-size-min: 24; --font-level: 8; text-wrap: pretty; line-height: 0.8; margin: 0; background: linear-gradient( canvasText 60%, color-mix(in oklch, canvas, canvasText) ); background-clip: text; color: #0000; } } @layer base { :root { --font-size-min: 14; --font-size-max: 20; --font-ratio-min: 1.1; --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 { display: grid; place-items: center; background: light-dark(white, black); min-height: 100svh; font-family: "Geist", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui; } body::before { --size: 45px; --line: color-mix(in hsl, canvasText, transparent 70%); content: ""; height: 100svh; 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; } } div.tp-dfwv { position: fixed; }