/* Route announcer */
.astro-route-announcer {
position: absolute;
left: 0;
top: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
width: 1px;
height: 1px;
}@layer openprops, normalize, global, utils, theme, blocks, compositions, components.base, components.has-deps;
/*
* Open Props
* Import as many props as you need here.
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
*/
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
@custom-media --useDataOK (prefers-reduced-data: no-preference);
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --highContrast (prefers-contrast: more);
@custom-media --lowContrast (prefers-contrast: less);
@custom-media --portrait (orientation: portrait);
@custom-media --landscape (orientation: landscape);
@custom-media --HDcolor (dynamic-range: high);
@custom-media --touch (hover: none) and (pointer: coarse);
@custom-media --stylus (hover: none) and (pointer: fine);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-only (0px <= width <= 240px);
@custom-media --xxs-n-above (width >= 240px);
@custom-media --xxs-n-below (width < 240px);
@custom-media --xxs-phone (--xxs-only) and (--portrait);
@custom-media --xs-only (240px <= width <= 360px);
@custom-media --xs-n-above (width >= 360px);
@custom-media --xs-n-below (width < 360px);
@custom-media --xs-phone (--xs-only) and (--portrait);
@custom-media --sm-only (360px <= width <= 480px);
@custom-media --sm-n-above (width >= 480px);
@custom-media --sm-n-below (width < 480px);
@custom-media --sm-phone (--sm-only) and (--portrait);
@custom-media --md-only (480px <= width <= 768px);
@custom-media --md-n-above (width >= 768px);
@custom-media --md-n-below (width < 768px);
@custom-media --md-phone (--md-only) and (--portrait);
@custom-media --lg-only (768px <= width <= 1024px);
@custom-media --lg-n-above (width >= 1024px);
@custom-media --lg-n-below (width < 1024px);
@custom-media --lg-phone (--lg-only) and (--portrait);
@custom-media --xl-only (1024px <= width <= 1440px);
@custom-media --xl-n-above (width >= 1440px);
@custom-media --xl-n-below (width < 1440px);
@custom-media --xxl-only (1440px <= width <= 1920px);
@custom-media --xxl-n-above (width >= 1920px);
@custom-media --xxl-n-below (width < 1920px);
@layer openprops{
:where(:root){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-bottom:var(--layer-1);--layer-top:var(--layer-5);--layer-important:2147480000;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:100000px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%)*100000,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%)*100000,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%)*100000,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%)*100000,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%)*100000,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%)*100000,var(--radius-6))}*{--shadow-strength:1%;--shadow-chroma:3%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 #0001;--shadow-1:0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight)}@media (prefers-color-scheme:dark){*{--shadow-strength:25%;--shadow-chroma:10%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff1,inset 0 .5px 0 0 #0007}}:where(:root){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-.5,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-spring-1:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);--ease-spring-3:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--ease-spring-5:linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);--ease-bounce-2:linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);--ease-bounce-3:linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);--ease-bounce-4:linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);--ease-bounce-5:linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)}:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}}
@layer openprops{
:where(:root) {
--size-xxs: 240px;
--size-xs: 360px;
--size-sm: 480px;
--size-md: 768px;
--size-lg: 1024px;
--size-xl: 1440px;
--size-xxl: 1920px;
}}
@layer openprops{
:where(:root) {
--font-lineheight-00: 0.95;
--font-lineheight-0: 1.1;
--font-lineheight-1: 1.25;
--font-lineheight-2: 1.375;
--font-lineheight-3: 1.5;
--font-lineheight-4: 1.75;
--font-lineheight-5: 2;
}}
@layer openprops{
:where(:root) {
--oklch-red: 25;
--oklch-pink: 350;
--oklch-purple: 310;
--oklch-violet: 290;
--oklch-indigo: 270;
--oklch-blue: 240;
--oklch-cyan: 210;
--oklch-teal: 185;
--oklch-green: 145;
--oklch-lime: 125;
--oklch-yellow: 100;
--oklch-orange: 75;
}}
@layer openprops{
:where(:root) {
--space:;
@supports (background: linear-gradient(in oklab, red, lime)) {
--space: in oklab;
}
--gradient-1: linear-gradient(
to bottom right var(--space),
#1f005c,
#5b0060,
#870160,
#ac255e,
#ca485c,
#e16b5c,
#f39060,
#ffb56b
);
--gradient-2: linear-gradient(
to bottom right var(--space),
#48005c,
#8300e2,
#a269ff
);
--gradient-3: radial-gradient(
circle at top right var(--space),
hsl(180 100% 50%),
hsl(180 100% 50% / 0%)
),
radial-gradient(
circle at bottom left,
hsl(328 100% 54%),
hsl(328 100% 54% / 0%)
);
--gradient-4: linear-gradient(to bottom right var(--space), #00f5a0, #00d9f5);
--gradient-5: conic-gradient(
from -270deg at 75% 110% var(--space),
fuchsia,
floralwhite
);
--gradient-6: conic-gradient(
from -90deg at top left var(--space),
black,
white
);
--gradient-7: linear-gradient(to bottom right var(--space), #72c6ef, #004e8f);
--gradient-8: conic-gradient(
from 90deg at 50% 0% var(--space),
#111,
50%,
#222,
#111
);
--gradient-9: conic-gradient(
from 0.5turn at bottom center var(--space),
lightblue,
white
);
--gradient-10: conic-gradient(
from 90deg at 40% -25%,
#ffd700,
#f79d03,
#ee6907,
#e6390a,
#de0d0d,
#d61039,
#cf1261,
#c71585,
#cf1261,
#d61039,
#de0d0d,
#ee6907,
#f79d03,
#ffd700,
#ffd700,
#ffd700
);
--gradient-11: conic-gradient(at bottom left var(--space), deeppink, cyan);
--gradient-12: conic-gradient(
from 90deg at 25% -10% var(--space),
#ff4500,
#d3f340,
#7bee85,
#afeeee,
#7bee85
);
--gradient-13: radial-gradient(
circle at 50% 200% var(--space),
#000142,
#3b0083,
#b300c3,
#ff059f,
#ff4661,
#ffad86,
#fff3c7
);
--gradient-14: conic-gradient(at top right var(--space), lime, cyan);
--gradient-15: linear-gradient(
to bottom right var(--space),
#c7d2fe,
#fecaca,
#fef3c7
);
--gradient-16: radial-gradient(
circle at 50% -250% var(--space),
#374151,
#111827,
#000
);
--gradient-17: conic-gradient(
from -90deg at 50% -25% var(--space),
blue,
blueviolet
);
--gradient-18: linear-gradient(
0deg var(--space),
hsla(0 100% 50% / 80%),
hsla(0 100% 50% / 0) 75%
),
linear-gradient(
60deg var(--space),
hsla(60 100% 50% / 80%),
hsla(60 100% 50% / 0) 75%
),
linear-gradient(
120deg var(--space),
hsla(120 100% 50% / 80%),
hsla(120 100% 50% / 0) 75%
),
linear-gradient(
180deg var(--space),
hsla(180 100% 50% / 80%),
hsla(180 100% 50% / 0) 75%
),
linear-gradient(
240deg var(--space),
hsla(240 100% 50% / 80%),
hsla(240 100% 50% / 0) 75%
),
linear-gradient(
300deg var(--space),
hsla(300 100% 50% / 80%),
hsla(300 100% 50% / 0) 75%
);
--gradient-19: linear-gradient(
to bottom right var(--space),
#ffe259,
#ffa751
);
--gradient-20: conic-gradient(
from -135deg at -10% center var(--space),
#ffa500,
#ff7715,
#ff522a,
#ff3f47,
#ff5482,
#ff69b4
);
--gradient-21: conic-gradient(
from -90deg at 25% 115% var(--space),
#ff0000,
#ff0066,
#ff00cc,
#cc00ff,
#6600ff,
#0000ff,
#0000ff,
#0000ff,
#0000ff
);
--gradient-22: linear-gradient(
to bottom right var(--space),
#acb6e5,
#86fde8
);
--gradient-23: linear-gradient(
to bottom right var(--space),
#536976,
#292e49
);
--gradient-24: conic-gradient(
from 0.5turn at 0% 0% var(--space),
#00c476,
10%,
#82b0ff,
90%,
#00c476
);
--gradient-25: conic-gradient(
at 125% 50% var(--space),
#b78cf7,
#ff7c94,
#ffcf0d,
#ff7c94,
#b78cf7
);
--gradient-26: linear-gradient(
to bottom right var(--space),
#9796f0,
#fbc7d4
);
--gradient-27: conic-gradient(
from 0.5turn at bottom left var(--space),
deeppink,
rebeccapurple
);
--gradient-28: conic-gradient(
from -90deg at 50% 105% var(--space),
white,
orchid
);
--gradient-29: radial-gradient(
circle at top right var(--space),
hsl(250 100% 85%),
hsl(250 100% 85% / 0%)
),
radial-gradient(
circle at bottom left var(--space),
hsl(220 90% 75%),
hsl(220 90% 75% / 0%)
);
--gradient-30: radial-gradient(
circle at top right var(--space),
hsl(150 100% 50%),
hsl(150 100% 50% / 0%)
),
radial-gradient(
circle at bottom left var(--space),
hsl(150 100% 84%),
hsl(150 100% 84% / 0%)
);
}}
/* Normalize */
@layer normalize {
/* --- Core Resets & Global Rules --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Apply a default scrollbar width and text decoration style to all elements. */
* {
scrollbar-width: thin;
text-decoration-color: var(--md-secondary);
text-decoration-thickness: 0.2ex;
}
/* A more robust, zero-specificity margin reset. */
:where(:not(dialog, popover)) {
margin: 0;
}
/* Reset backgrounds and borders on most elements. */
:where(:not(fieldset, progress, meter)) {
background-origin: border-box;
background-repeat: no-repeat;
border-style: solid;
border-width: 0;
}
/* --- Root & Body Styles --- */
:where(html) {
/* Define a variable for the page background for easier reference, e.g., in focus styles. */
--_page-bg-color: var(--md-surface, white);
block-size: 100%;
background-color: var(--_page-bg-color);
/* Apply the canvas color */
overflow-x: hidden;
/* Prevent horizontal scroll */
/* Set global accent colors */
accent-color: var(--md-primary);
caret-color: var(--md-primary);
/* Prevent unwanted text scaling on mobile devices. https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
/* Browser performance hint */
interpolate-size: allow-keywords;
}
:where(body) {
min-block-size: 100%;
inline-size: 100%;
min-inline-size: 320px;
position: relative;
/* Establishes a positioning context */
container-type: inline-size;
/* Enables container queries */
/* Base typography settings */
color: var(--md-on-surface);
font-family: var(--font-family-sans);
font-size: var(--step-0);
font-weight: 400;
line-height: var(--line-height-standard);
letter-spacing: var(--tracking-normal);
text-wrap: pretty;
font-synthesis: style;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Sticky footer layout */
display: grid;
grid-template-rows: auto 1fr auto;
}
/* --- Lists --- */
/* Remove default list styles and padding */
:where(menu, ul, ol) {
list-style: none;
padding: 0;
}
/* --- Typography --- */
:where(h1, h2, h3) {
font-weight: var(--font-weight-bold);
letter-spacing: var(--tracking-dense);
line-height: 1.05;
max-width: 30ch;
text-wrap: balance;
}
:where(h1) {
font-size: var(--step-6);
line-height: 1;
}
:where(h2) {
font-size: var(--step-5);
}
:where(h3) {
font-size: var(--step-4);
}
:where(h4) {
font-size: var(--step-3);
}
:where(h5) {
font-size: var(--step-2);
}
:where(p, li, blockquote:not([class])) {
max-width: 50ch;
text-wrap: pretty;
}
:where(blockquote:not([class])) {
font-family: var(--font-family-serif);
font-size: var(--step-4);
}
:where(blockquote:not([class]) p:last-of-type) {
font-family: var(--font-family-sans);
font-size: var(--step-1);
font-weight: var(--font-weight-normal);
}
:where(dt:not(:first-of-type)) {
margin-block-start: var(--size-5);
}
/* --- Media & Embeds --- */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
display: block;
}
:where(img, svg, video, picture) {
max-inline-size: 100%;
block-size: auto;
}
/* Provide a sensible default size for SVGs without explicit dimensions. */
:where(svg:not([width])) {
inline-size: var(--size-7, 2rem);
}
:where(iframe) {
max-width: 100%;
display: block;
pointer-events: none;
}
:where(figure) {
display: grid;
gap: var(--size-2);
place-items: center;
}
:where(figcaption) {
font-size: 0.8em;
padding-block-start: 0.5em;
padding-inline: var(--space-s);
text-align: center;
}
:where(hr) {
border: none;
border-top: 1px solid var(--md-outline);
margin: var(--space-l-xl) 0 !important;
transform: translateY(-1px);
}
/* --- Interactive Elements & Forms --- */
:where(a[href],
area,
button,
[role="button"],
input:not([type="text"],
[type="email"],
[type="number"],
[type="password"],
[type=""],
[type="tel"],
[type="url"]),
label[for],
select,
summary,
textarea) {
cursor: pointer;
}
:where(a) {
color: currentcolor;
text-decoration-color: var(--md-primary);
text-decoration-thickness: 2px;
text-underline-offset: 0.2ex;
}
:where(a:hover) {
text-underline-offset: 0.3ex;
}
:where(a:not([class])) {
text-decoration-skip-ink: auto;
}
:where(a[href*="mailto:"]) {
text-decoration: none;
font-weight: var(--font-weight-bold);
color: var(--md-primary);
}
@media (hover: hover) {
:where(a[href*="mailto:"]:is(:hover, :focus-within)) {
text-decoration: underline;
text-decoration-thickness: 0.3ex;
text-decoration-color: currentColor;
text-underline-offset: 0.2ex;
}
}
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
font: inherit;
letter-spacing: inherit;
color: inherit;
}
/* Style for autofilled inputs */
:where(input, textarea, select):-webkit-autofill,
:where(input, textarea, select):-webkit-autofill:hover,
:where(input, textarea, select):-webkit-autofill:focus,
:where(input, textarea, select):autofill,
:where(input, textarea, select):autofill:hover,
:where(input, textarea, select):autofill:focus {
-webkit-text-fill-color: var(--text-color-2);
-webkit-box-shadow: 0 0 0px 1e5px var(--well-1) inset;
transition: background-color 5000s ease-in-out 0s;
}
::placeholder {
color: var(--text-color-2);
}
::-moz-placeholder {
opacity: 1;
}
:where(fieldset) {
border: var(--field-border-width, 1px) solid var(--field-border-color, inherit);
border-radius: var(--field-border-radius, 0px);
padding: var(--size-3);
display: grid;
gap: var(--size-3);
}
:where(summary) {
align-items: baseline;
display: flex;
gap: 0 2ch;
font-weight: 700;
line-height: 1.2;
list-style: none;
}
:where(summary:is(:hover, :focus-visible)) {
color: var(--md-on-primary);
}
summary::before {
color: var(--md-tertiary);
content: "+";
display: block;
font-family: monospace;
line-height: 0.5;
transform: scale(1.4);
transform-origin: left center;
}
@media (min-width: 50em) {
summary::before {
position: relative;
top: -.2ex;
}
}
details[open] summary::before {
content: "—";
}
summary::-webkit-details-marker,
summary::marker {
content: "";
display: none;
}
summary:focus-visible,
summary:hover {
color: var(--md-tertiary);
}
:where(details[open]) > summary {
color: var(--md-tertiary);
}
/* --- Accessibility, State & User Preferences --- */
/* Remove tap highlight on mobile for interactive elements. */
:where(a[href], area, button, [role="button"], input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Style for keyboard-focused elements, with an inverted color outline. */
:focus-visible {
--_focus-outline-color: var(--md-inverse-surface);
border-radius: var(--border-radius, 2px);
outline: 2px solid var(--_focus-outline-color);
outline-offset: 2px;
}
:where(:not(:active):focus-visible) {
outline-offset: var(--outline-offset, 2px);
}
:where([tabindex="-1"]:focus-within) {
outline: none;
}
/* Style for selected text. */
::selection {
background: var(--md-inverse-primary);
color: var(--md-primary);
}
/* Add scroll margin to targeted elements and headings to prevent them from being obscured by fixed headers. */
:where(:target) {
scroll-margin-block-start: 2rem;
}
:where(h1, h2, h3, p[class*="text-"], p > span[class*="text-"]) {
scroll-margin-top: 10ex;
}
/* Style for elements with the 'inert' attribute. */
[inert],
[inert] * {
transition: opacity 350ms;
opacity: 0.75;
pointer-events: none;
cursor: default;
user-select: none;
}
/* Handle user motion preferences */
@media (prefers-reduced-motion: no-preference) {
:where(html:focus-within) {
scroll-behavior: smooth;
}
:where(:focus-visible) {
transition: outline-offset 145ms var(--ease-2);
}
:where(:not(:active):focus-visible) {
transition-duration: 0.15s;
}
}
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
/* Global */
@layer global{
/* == TYPE == */
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,9,3,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l|s-xl|3xs-s|m-xl|l-2xl|xs-xl&g=s,l,xl,12 */
:root {
/* Step -3: 10.4167px → 10.24px */
--step--3: clamp(0.64rem, 0.6549rem + -0.0192vw, 0.651rem);
/* Step -2: 12.5px → 12.8px */
--step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
/* Step -1: 15px → 16px */
--step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
/* Step 0: 18px → 20px */
--step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
/* Step 1: 21.6px → 25px */
--step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
/* Step 2: 25.92px → 31.25px */
--step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
/* Step 3: 31.104px → 39.0625px */
--step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
/* Step 4: 37.3248px → 48.8281px */
--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
/* Step 5: 44.7898px → 61.0352px */
--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
/* Step 6: 53.7477px → 76.2939px */
--step-6: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
/* Step 7: 64.4973px → 95.3674px */
--step-7: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
/* Step 8: 77.3967px → 119.2093px */
--step-8: clamp(4.8373rem, 3.9283rem + 4.5448vw, 7.4506rem);
/* Step 9: 92.876px → 149.0116px */
--step-9: clamp(5.8048rem, 4.5844rem + 6.1017vw, 9.3132rem);
}
/* == SPACING == */
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l|s-xl|3xs-s|m-xl|l-2xl|xs-xl|2xs-m&g=s,l,xl,12 */
:root {
/* Space 3xs: 5px → 5px */
--space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
/* Space 2xs: 9px → 10px */
--space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
/* Space xs: 14px → 15px */
--space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
/* Space s: 18px → 20px */
--space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
/* Space m: 27px → 30px */
--space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
/* Space l: 36px → 40px */
--space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
/* Space xl: 54px → 60px */
--space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
/* Space 2xl: 72px → 80px */
--space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
/* Space 3xl: 108px → 120px */
--space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
/* Space 4xl: 126px → 140px */
--space-4xl: clamp(7.875rem, 7.5707rem + 1.5217vw, 8.75rem);
/* One-up pairs */
/* Space 3xs-2xs: 5px → 10px */
--space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vw, 0.625rem);
/* Space 2xs-xs: 9px → 15px */
--space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vw, 0.9375rem);
/* Space xs-s: 14px → 20px */
--space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
/* Space s-m: 18px → 30px */
--space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
/* Space m-l: 27px → 40px */
--space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
/* Space l-xl: 36px → 60px */
--space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
/* Space xl-2xl: 54px → 80px */
--space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
/* Space 2xl-3xl: 72px → 120px */
--space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
/* Space 3xl-4xl: 108px → 140px */
--space-3xl-4xl: clamp(6.75rem, 6.0543rem + 3.4783vw, 8.75rem);
/* Custom pairs */
/* Space s-l: 18px → 40px */
--space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
/* Space s-xl: 18px → 60px */
--space-s-xl: clamp(1.125rem, 0.212rem + 4.5652vw, 3.75rem);
/* Space 3xs-s: 5px → 20px */
--space-3xs-s: clamp(0.3125rem, -0.0136rem + 1.6304vw, 1.25rem);
/* Space m-xl: 27px → 60px */
--space-m-xl: clamp(1.6875rem, 0.9701rem + 3.587vw, 3.75rem);
/* Space l-2xl: 36px → 80px */
--space-l-2xl: clamp(2.25rem, 1.2935rem + 4.7826vw, 5rem);
/* Space xs-xl: 14px → 60px */
--space-xs-xl: clamp(0.875rem, -0.125rem + 5vw, 3.75rem);
/* Space 2xs-m: 9px → 30px */
--space-2xs-m: clamp(0.5625rem, 0.106rem + 2.2826vw, 1.875rem);
}
/* == GRID == */
/* @link https://utopia.fyi/grid/calculator?c=320,18,1.2,1240,20,1.25,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|s-xl|3xs-s|m-xl|l-2xl&g=s,l,xl,12 */
:root {
--grid-max-width: 77.50rem;
--grid-gutter: var(--space-s-l, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem));
--grid-columns: 12;
}
.u-container {
max-width: var(--grid-max-width);
padding-inline: var(--grid-gutter);
margin-inline: auto;
}
.u-grid {
display: grid;
gap: var(--grid-gutter);
}
/* == CLAMP == */
/* @link https://utopia.fyi/clamp/calculator?a=320,1240,16—48 */
:root {
--fluid-16-48: clamp(1rem, 0.3043rem + 3.4783vw, 3rem);
}}
@layer global{
/* ======================================================= */
/* == MATERIAL DESIGN COLOR SYSTEM == */
/* ======================================================= */
/*
* HOW THIS WORKS:
*
* 1. light.css defines --md-sys-color-* variables with RGB values for light theme
* 2. dark.css defines --md-sys-color-* variables with RGB values for dark theme (on :root.dark)
* 3. This file converts those RGB values to modern OKLCH color space using CSS relative color syntax
* 4. ThemeToggle.astro toggles the .dark class on :root to switch themes
*
* BENEFITS:
* - Modern OKLCH color space (perceptually uniform, wider gamut)
* - Automatic RGB → OKLCH conversion (no manual calculations)
* - Easy maintenance: just paste new colors from Material Theme Builder into light.css/dark.css
* - Single source of truth for color values
*
* USAGE:
* Use the --md-* variables throughout your CSS:
* background-color: var(--md-primary);
* color: var(--md-on-primary);
*
* Or use the data attributes for quick color combos:
* Content
*/}
@layer global{
/* ======================================================= */
/* == LIGHT THEME (Material Design) == */
/* ======================================================= */
/*
* INSTRUCTIONS FOR UPDATING:
* 1. Go to https://material-foundation.github.io/material-theme-builder/
* 2. Generate your theme colors
* 3. Copy the CSS output for the LIGHT theme
* 4. Paste it below, replacing lines 19-87
* 5. That's it! The conversion to OKLCH happens automatically in colors.css
*
* NOTE: Do NOT modify this file beyond pasting new colors from Material Theme Builder.
* The --md-sys-color-* and --md-extended-color-* variables are the source RGB values.
* They get converted to OKLCH in colors.css via relative color syntax.
*/
:root {
--md-sys-color-primary: rgb(114 92 12);
--md-sys-color-surface-tint: rgb(114 92 12);
--md-sys-color-on-primary: rgb(255 255 255);
--md-sys-color-primary-container: rgb(255 224 136);
--md-sys-color-on-primary-container: rgb(87 69 0);
--md-sys-color-secondary: rgb(105 93 63);
--md-sys-color-on-secondary: rgb(255 255 255);
--md-sys-color-secondary-container: rgb(241 225 187);
--md-sys-color-on-secondary-container: rgb(80 70 42);
--md-sys-color-tertiary: rgb(70 102 75);
--md-sys-color-on-tertiary: rgb(255 255 255);
--md-sys-color-tertiary-container: rgb(200 236 201);
--md-sys-color-on-tertiary-container: rgb(47 78 52);
--md-sys-color-error: rgb(186 26 26);
--md-sys-color-on-error: rgb(255 255 255);
--md-sys-color-error-container: rgb(255 218 214);
--md-sys-color-on-error-container: rgb(147 0 10);
--md-sys-color-background: rgb(255 248 240);
--md-sys-color-on-background: rgb(31 27 19);
--md-sys-color-surface: rgb(255 248 240);
--md-sys-color-on-surface: rgb(31 27 19);
--md-sys-color-surface-variant: rgb(235 225 207);
--md-sys-color-on-surface-variant: rgb(76 70 57);
--md-sys-color-outline: rgb(125 118 103);
--md-sys-color-outline-variant: rgb(207 198 180);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(52 48 39);
--md-sys-color-inverse-on-surface: rgb(248 240 226);
--md-sys-color-inverse-primary: rgb(226 196 109);
--md-sys-color-primary-fixed: rgb(255 224 136);
--md-sys-color-on-primary-fixed: rgb(36 26 0);
--md-sys-color-primary-fixed-dim: rgb(226 196 109);
--md-sys-color-on-primary-fixed-variant: rgb(87 69 0);
--md-sys-color-secondary-fixed: rgb(241 225 187);
--md-sys-color-on-secondary-fixed: rgb(34 27 4);
--md-sys-color-secondary-fixed-dim: rgb(212 197 161);
--md-sys-color-on-secondary-fixed-variant: rgb(80 70 42);
--md-sys-color-tertiary-fixed: rgb(200 236 201);
--md-sys-color-on-tertiary-fixed: rgb(3 33 12);
--md-sys-color-tertiary-fixed-dim: rgb(172 207 174);
--md-sys-color-on-tertiary-fixed-variant: rgb(47 78 52);
--md-sys-color-surface-dim: rgb(225 217 204);
--md-sys-color-surface-bright: rgb(255 248 240);
--md-sys-color-surface-container-lowest: rgb(255 255 255);
--md-sys-color-surface-container-low: rgb(251 243 229);
--md-sys-color-surface-container: rgb(245 237 223);
--md-sys-color-surface-container-high: rgb(239 231 217);
--md-sys-color-surface-container-highest: rgb(234 225 212);
--md-extended-color-custom-color2-color: rgb(142 73 89);
--md-extended-color-custom-color2-on-color: rgb(255 255 255);
--md-extended-color-custom-color2-color-container: rgb(255 217 223);
--md-extended-color-custom-color2-on-color-container: rgb(113 51 65);
--md-extended-color-custom-color3-color: rgb(0 105 109);
--md-extended-color-custom-color3-on-color: rgb(255 255 255);
--md-extended-color-custom-color3-color-container: rgb(156 241 244);
--md-extended-color-custom-color3-on-color-container: rgb(0 79 82);
--md-extended-color-custom-color4-color: rgb(130 76 118);
--md-extended-color-custom-color4-on-color: rgb(255 255 255);
--md-extended-color-custom-color4-color-container: rgb(255 215 241);
--md-extended-color-custom-color4-on-color-container: rgb(103 53 93);
--md-extended-color-custom-color1-color: rgb(53 97 142);
--md-extended-color-custom-color1-on-color: rgb(255 255 255);
--md-extended-color-custom-color1-color-container: rgb(209 228 255);
--md-extended-color-custom-color1-on-color-container: rgb(23 73 116);
--md-extended-color-custom-color5-color: rgb(85 90 146);
--md-extended-color-custom-color5-on-color: rgb(255 255 255);
--md-extended-color-custom-color5-color-container: rgb(224 224 255);
--md-extended-color-custom-color5-on-color-container: rgb(61 66 120);
}}
@layer global{
/* ======================================================= */
/* == DARK THEME (Material Design) == */
/* ======================================================= */
/*
* INSTRUCTIONS FOR UPDATING:
* 1. Go to https://material-foundation.github.io/material-theme-builder/
* 2. Generate your theme colors
* 3. Copy the CSS output for the DARK theme
* 4. Paste it below, replacing lines 19-87
* 5. That's it! The conversion to OKLCH happens automatically in colors.css
*
* NOTE: Do NOT modify this file beyond pasting new colors from Material Theme Builder.
* The --md-sys-color-* and --md-extended-color-* variables are the source RGB values.
* They get converted to OKLCH in colors.css via relative color syntax.
*/
:root.dark {
--md-sys-color-primary: rgb(226 196 109);
--md-sys-color-surface-tint: rgb(226 196 109);
--md-sys-color-on-primary: rgb(60 47 0);
--md-sys-color-primary-container: rgb(87 69 0);
--md-sys-color-on-primary-container: rgb(255 224 136);
--md-sys-color-secondary: rgb(212 197 161);
--md-sys-color-on-secondary: rgb(57 48 22);
--md-sys-color-secondary-container: rgb(80 70 42);
--md-sys-color-on-secondary-container: rgb(241 225 187);
--md-sys-color-tertiary: rgb(172 207 174);
--md-sys-color-on-tertiary: rgb(25 55 31);
--md-sys-color-tertiary-container: rgb(47 78 52);
--md-sys-color-on-tertiary-container: rgb(200 236 201);
--md-sys-color-error: rgb(255 180 171);
--md-sys-color-on-error: rgb(105 0 5);
--md-sys-color-error-container: rgb(147 0 10);
--md-sys-color-on-error-container: rgb(255 218 214);
--md-sys-color-background: rgb(22 19 11);
--md-sys-color-on-background: rgb(234 225 212);
--md-sys-color-surface: rgb(22 19 11);
--md-sys-color-on-surface: rgb(234 225 212);
--md-sys-color-surface-variant: rgb(76 70 57);
--md-sys-color-on-surface-variant: rgb(207 198 180);
--md-sys-color-outline: rgb(152 144 128);
--md-sys-color-outline-variant: rgb(76 70 57);
--md-sys-color-shadow: rgb(0 0 0);
--md-sys-color-scrim: rgb(0 0 0);
--md-sys-color-inverse-surface: rgb(234 225 212);
--md-sys-color-inverse-on-surface: rgb(52 48 39);
--md-sys-color-inverse-primary: rgb(114 92 12);
--md-sys-color-primary-fixed: rgb(255 224 136);
--md-sys-color-on-primary-fixed: rgb(36 26 0);
--md-sys-color-primary-fixed-dim: rgb(226 196 109);
--md-sys-color-on-primary-fixed-variant: rgb(87 69 0);
--md-sys-color-secondary-fixed: rgb(241 225 187);
--md-sys-color-on-secondary-fixed: rgb(34 27 4);
--md-sys-color-secondary-fixed-dim: rgb(212 197 161);
--md-sys-color-on-secondary-fixed-variant: rgb(80 70 42);
--md-sys-color-tertiary-fixed: rgb(200 236 201);
--md-sys-color-on-tertiary-fixed: rgb(3 33 12);
--md-sys-color-tertiary-fixed-dim: rgb(172 207 174);
--md-sys-color-on-tertiary-fixed-variant: rgb(47 78 52);
--md-sys-color-surface-dim: rgb(22 19 11);
--md-sys-color-surface-bright: rgb(61 57 47);
--md-sys-color-surface-container-lowest: rgb(17 14 7);
--md-sys-color-surface-container-low: rgb(31 27 19);
--md-sys-color-surface-container: rgb(35 31 23);
--md-sys-color-surface-container-high: rgb(45 42 33);
--md-sys-color-surface-container-highest: rgb(56 52 43);
--md-extended-color-custom-color2-color: rgb(255 177 192);
--md-extended-color-custom-color2-on-color: rgb(85 29 43);
--md-extended-color-custom-color2-color-container: rgb(113 51 65);
--md-extended-color-custom-color2-on-color-container: rgb(255 217 223);
--md-extended-color-custom-color3-color: rgb(128 212 216);
--md-extended-color-custom-color3-on-color: rgb(0 55 57);
--md-extended-color-custom-color3-color-container: rgb(0 79 82);
--md-extended-color-custom-color3-on-color-container: rgb(156 241 244);
--md-extended-color-custom-color4-color: rgb(244 178 226);
--md-extended-color-custom-color4-on-color: rgb(78 30 70);
--md-extended-color-custom-color4-color-container: rgb(103 53 93);
--md-extended-color-custom-color4-on-color-container: rgb(255 215 241);
--md-extended-color-custom-color1-color: rgb(159 202 252);
--md-extended-color-custom-color1-on-color: rgb(0 50 87);
--md-extended-color-custom-color1-color-container: rgb(23 73 116);
--md-extended-color-custom-color1-on-color-container: rgb(209 228 255);
--md-extended-color-custom-color5-color: rgb(190 194 255);
--md-extended-color-custom-color5-on-color: rgb(39 43 96);
--md-extended-color-custom-color5-color-container: rgb(61 66 120);
--md-extended-color-custom-color5-on-color-container: rgb(224 224 255);
}}
@layer global{
/* ======================================================= */
/* == RGB → OKLCH Conversion Layer == */
/* ======================================================= */
/*
* NOTE: This single selector works for both light and dark themes because:
* - :root has light theme --md-sys-color-* values (from light.css)
* - :root.dark has dark theme --md-sys-color-* values (from dark.css)
* - Both apply the same transformation: convert whatever is in scope to OKLCH
*/
:root,
:root.dark {
--md-primary: oklch(from var(--md-sys-color-primary) l c h);
--md-surface-tint: oklch(from var(--md-sys-color-surface-tint) l c h);
--md-on-primary: oklch(from var(--md-sys-color-on-primary) l c h);
--md-primary-container: oklch(from var(--md-sys-color-primary-container) l c h);
--md-on-primary-container: oklch(from var(--md-sys-color-on-primary-container) l c h);
--md-secondary: oklch(from var(--md-sys-color-secondary) l c h);
--md-on-secondary: oklch(from var(--md-sys-color-on-secondary) l c h);
--md-secondary-container: oklch(from var(--md-sys-color-secondary-container) l c h);
--md-on-secondary-container: oklch(from var(--md-sys-color-on-secondary-container) l c h);
--md-tertiary: oklch(from var(--md-sys-color-tertiary) l c h);
--md-on-tertiary: oklch(from var(--md-sys-color-on-tertiary) l c h);
--md-tertiary-container: oklch(from var(--md-sys-color-tertiary-container) l c h);
--md-on-tertiary-container: oklch(from var(--md-sys-color-on-tertiary-container) l c h);
--md-error: oklch(from var(--md-sys-color-error) l c h);
--md-on-error: oklch(from var(--md-sys-color-on-error) l c h);
--md-error-container: oklch(from var(--md-sys-color-error-container) l c h);
--md-on-error-container: oklch(from var(--md-sys-color-on-error-container) l c h);
--md-background: oklch(from var(--md-sys-color-background) l c h);
--md-on-background: oklch(from var(--md-sys-color-on-background) l c h);
--md-surface: oklch(from var(--md-sys-color-surface) l c h);
--md-on-surface: oklch(from var(--md-sys-color-on-surface) l c h);
--md-surface-variant: oklch(from var(--md-sys-color-surface-variant) l c h);
--md-on-surface-variant: oklch(from var(--md-sys-color-on-surface-variant) l c h);
--md-outline: oklch(from var(--md-sys-color-outline) l c h);
--md-outline-variant: oklch(from var(--md-sys-color-outline-variant) l c h);
--md-shadow: oklch(from var(--md-sys-color-shadow) l c h);
--md-scrim: oklch(from var(--md-sys-color-scrim) l c h);
--md-inverse-surface: oklch(from var(--md-sys-color-inverse-surface) l c h);
--md-inverse-on-surface: oklch(from var(--md-sys-color-inverse-on-surface) l c h);
--md-inverse-primary: oklch(from var(--md-sys-color-inverse-primary) l c h);
--md-primary-fixed: oklch(from var(--md-sys-color-primary-fixed) l c h);
--md-on-primary-fixed: oklch(from var(--md-sys-color-on-primary-fixed) l c h);
--md-primary-fixed-dim: oklch(from var(--md-sys-color-primary-fixed-dim) l c h);
--md-on-primary-fixed-variant: oklch(from var(--md-sys-color-on-primary-fixed-variant) l c h);
--md-secondary-fixed: oklch(from var(--md-sys-color-secondary-fixed) l c h);
--md-on-secondary-fixed: oklch(from var(--md-sys-color-on-secondary-fixed) l c h);
--md-secondary-fixed-dim: oklch(from var(--md-sys-color-secondary-fixed-dim) l c h);
--md-on-secondary-fixed-variant: oklch(from var(--md-sys-color-on-secondary-fixed-variant) l c h);
--md-tertiary-fixed: oklch(from var(--md-sys-color-tertiary-fixed) l c h);
--md-on-tertiary-fixed: oklch(from var(--md-sys-color-on-tertiary-fixed) l c h);
--md-tertiary-fixed-dim: oklch(from var(--md-sys-color-tertiary-fixed-dim) l c h);
--md-on-tertiary-fixed-variant: oklch(from var(--md-sys-color-on-tertiary-fixed-variant) l c h);
--md-surface-dim: oklch(from var(--md-sys-color-surface-dim) l c h);
--md-surface-bright: oklch(from var(--md-sys-color-surface-bright) l c h);
--md-surface-container-lowest: oklch(from var(--md-sys-color-surface-container-lowest) l c h);
--md-surface-container-low: oklch(from var(--md-sys-color-surface-container-low) l c h);
--md-surface-container: oklch(from var(--md-sys-color-surface-container) l c h);
--md-surface-container-high: oklch(from var(--md-sys-color-surface-container-high) l c h);
--md-surface-container-highest: oklch(from var(--md-sys-color-surface-container-highest) l c h);
--md-color1: oklch(from var(--md-extended-color-custom-color1-color) l c h);
--md-on-color1: oklch(from var(--md-extended-color-custom-color1-on-color) l c h);
--md-color1-container: oklch(from var(--md-extended-color-custom-color1-color-container) l c h);
--md-on-color1-container: oklch(from var(--md-extended-color-custom-color1-on-color-container) l c h);
--md-color2: oklch(from var(--md-extended-color-custom-color2-color) l c h);
--md-on-color2: oklch(from var(--md-extended-color-custom-color2-on-color) l c h);
--md-color2-container: oklch(from var(--md-extended-color-custom-color2-color-container) l c h);
--md-on-color2-container: oklch(from var(--md-extended-color-custom-color2-on-color-container) l c h);
--md-color3: oklch(from var(--md-extended-color-custom-color3-color) l c h);
--md-on-color3: oklch(from var(--md-extended-color-custom-color3-on-color) l c h);
--md-color3-container: oklch(from var(--md-extended-color-custom-color3-color-container) l c h);
--md-on-color3-container: oklch(from var(--md-extended-color-custom-color3-on-color-container) l c h);
--md-color4: oklch(from var(--md-extended-color-custom-color4-color) l c h);
--md-on-color4: oklch(from var(--md-extended-color-custom-color4-on-color) l c h);
--md-color4-container: oklch(from var(--md-extended-color-custom-color4-color-container) l c h);
--md-on-color4-container: oklch(from var(--md-extended-color-custom-color4-on-color-container) l c h);
--md-color5: oklch(from var(--md-extended-color-custom-color5-color) l c h);
--md-on-color5: oklch(from var(--md-extended-color-custom-color5-on-color) l c h);
--md-color5-container: oklch(from var(--md-extended-color-custom-color5-color-container) l c h);
--md-on-color5-container: oklch(from var(--md-extended-color-custom-color5-on-color-container) l c h);
}
/* ======================================================= */
/* == Data Attribute Selectors == */
/* ======================================================= */
/* --- COLOR COMBOS --- */
[data-color-combo='primary'],
[data-color-combo='surface-tint'] {
background-color: var(--md-primary);
color: var(--md-on-primary);
}
[data-color-combo='primary-container'] {
background-color: var(--md-primary-container);
color: var(--md-on-primary-container);
}
[data-color-combo='secondary'] {
background-color: var(--md-secondary);
color: var(--md-on-secondary);
}
[data-color-combo='secondary-container'] {
background-color: var(--md-secondary-container);
color: var(--md-on-secondary-container);
}
[data-color-combo='tertiary'] {
background-color: var(--md-tertiary);
color: var(--md-on-tertiary);
}
[data-color-combo='tertiary-container'] {
background-color: var(--md-tertiary-container);
color: var(--md-on-tertiary-container);
}
/* --- Surface and Background Roles --- */
[data-color-combo='surface'],
[data-color-combo='background'] {
background-color: var(--md-surface);
color: var(--md-on-surface);
}
[data-color-combo='surface-variant'] {
background-color: var(--md-surface-variant);
color: var(--md-on-surface-variant);
}
[data-color-combo='surface-dim'] {
background-color: var(--md-surface-dim);
color: var(--md-on-surface);
}
[data-color-combo='surface-bright'] {
background-color: var(--md-surface-bright);
color: var(--md-on-surface);
}
[data-color-combo='surface-container-lowest'] {
background-color: var(--md-surface-container-lowest);
color: var(--md-on-surface);
}
[data-color-combo='surface-container-low'] {
background-color: var(--md-surface-container-low);
color: var(--md-on-surface);
}
[data-color-combo='surface-container'] {
background-color: var(--md-surface-container);
color: var(--md-on-surface);
}
[data-color-combo='surface-container-high'] {
background-color: var(--md-surface-container-high);
color: var(--md-on-surface);
}
[data-color-combo='surface-container-highest'] {
background-color: var(--md-surface-container-highest);
color: var(--md-on-surface);
}
/* --- Inverse Roles --- */
[data-color-combo='inverse-surface'] {
background-color: var(--md-inverse-surface);
color: var(--md-inverse-on-surface);
}
[data-color-combo='inverse-primary'] {
background-color: var(--md-inverse-primary);
color: var(--md-primary);
}
/* --- Fixed Roles --- */
[data-color-combo='primary-fixed'] {
background-color: var(--md-primary-fixed);
color: var(--md-on-primary-fixed);
}
[data-color-combo='primary-fixed-dim'] {
background-color: var(--md-primary-fixed-dim);
color: var(--md-on-primary-fixed-variant);
}
[data-color-combo='secondary-fixed'] {
background-color: var(--md-secondary-fixed);
color: var(--md-on-secondary-fixed);
}
[data-color-combo='secondary-fixed-dim'] {
background-color: var(--md-secondary-fixed-dim);
color: var(--md-on-secondary-fixed-variant);
}
[data-color-combo='tertiary-fixed'] {
background-color: var(--md-tertiary-fixed);
color: var(--md-on-tertiary-fixed);
}
[data-color-combo='tertiary-fixed-dim'] {
background-color: var(--md-tertiary-fixed-dim);
color: var(--md-on-tertiary-fixed-variant);
}
/* --- Custom Color Roles --- */
[data-color-combo='color1'] {
background-color: var(--md-color1);
color: var(--md-on-color1);
}
[data-color-combo='color1-container'] {
background-color: var(--md-color1-container);
color: var(--md-on-color1-container);
}
[data-color-combo='color2'] {
background-color: var(--md-color2);
color: var(--md-on-color2);
}
[data-color-combo='color2-container'] {
background-color: var(--md-color2-container);
color: var(--md-on-color2-container);
}
[data-color-combo='color3'] {
background-color: var(--md-color3);
color: var(--md-on-color3);
}
[data-color-combo='color3-container'] {
background-color: var(--md-color3-container);
color: var(--md-on-color3-container);
}
[data-color-combo='color4'] {
background-color: var(--md-color4);
color: var(--md-on-color4);
}
[data-color-combo='color4-container'] {
background-color: var(--md-color4-container);
color: var(--md-on-color4-container);
}
[data-color-combo='color5'] {
background-color: var(--md-color5);
color: var(--md-on-color5);
}
[data-color-combo='color5-container'] {
background-color: var(--md-color5-container);
color: var(--md-on-color5-container);
}
[data-color-combo='error'] {
background-color: var(--md-error);
color: var(--md-on-error);
}
[data-color-combo='error-container'] {
background-color: var(--md-error-container);
color: var(--md-on-error-container);
}
/* ======================================================= */
/* == Complete List of Background Colors == */
/* ======================================================= */
[data-color-bg="primary"] {
background-color: var(--md-primary);
}
[data-color-bg="surface-tint"] {
background-color: var(--md-surface-tint);
}
[data-color-bg="primary-container"] {
background-color: var(--md-primary-container);
}
[data-color-bg="secondary"] {
background-color: var(--md-secondary);
}
[data-color-bg="secondary-container"] {
background-color: var(--md-secondary-container);
}
[data-color-bg="tertiary"] {
background-color: var(--md-tertiary);
}
[data-color-bg="tertiary-container"] {
background-color: var(--md-tertiary-container);
}
[data-color-bg="error"] {
background-color: var(--md-error);
}
[data-color-bg="error-container"] {
background-color: var(--md-error-container);
}
[data-color-bg="background"] {
background-color: var(--md-background);
}
[data-color-bg="surface"] {
background-color: var(--md-surface);
}
[data-color-bg="surface-variant"] {
background-color: var(--md-surface-variant);
}
[data-color-bg="inverse-surface"] {
background-color: var(--md-inverse-surface);
}
[data-color-bg="inverse-primary"] {
background-color: var(--md-inverse-primary);
}
[data-color-bg="primary-fixed"] {
background-color: var(--md-primary-fixed);
}
[data-color-bg="primary-fixed-dim"] {
background-color: var(--md-primary-fixed-dim);
}
[data-color-bg="secondary-fixed"] {
background-color: var(--md-secondary-fixed);
}
[data-color-bg="secondary-fixed-dim"] {
background-color: var(--md-secondary-fixed-dim);
}
[data-color-bg="tertiary-fixed"] {
background-color: var(--md-tertiary-fixed);
}
[data-color-bg="tertiary-fixed-dim"] {
background-color: var(--md-tertiary-fixed-dim);
}
[data-color-bg="surface-dim"] {
background-color: var(--md-surface-dim);
}
[data-color-bg="surface-bright"] {
background-color: var(--md-surface-bright);
}
[data-color-bg="surface-container-lowest"] {
background-color: var(--md-surface-container-lowest);
}
[data-color-bg="surface-container-low"] {
background-color: var(--md-surface-container-low);
}
[data-color-bg="surface-container"] {
background-color: var(--md-surface-container);
}
[data-color-bg="surface-container-high"] {
background-color: var(--md-surface-container-high);
}
[data-color-bg="surface-container-highest"] {
background-color: var(--md-surface-container-highest);
}
[data-color-bg="color1"] {
background-color: var(--md-color1);
}
[data-color-bg="color1-container"] {
background-color: var(--md-color1-container);
}
[data-color-bg="color2"] {
background-color: var(--md-color2);
}
[data-color-bg="color2-container"] {
background-color: var(--md-color2-container);
}
[data-color-bg="color3"] {
background-color: var(--md-color3);
}
[data-color-bg="color3-container"] {
background-color: var(--md-color3-container);
}
[data-color-bg="color4"] {
background-color: var(--md-color4);
}
[data-color-bg="color4-container"] {
background-color: var(--md-color4-container);
}
[data-color-bg="color5"] {
background-color: var(--md-color5);
}
[data-color-bg="color5-container"] {
background-color: var(--md-color5-container);
}
/* ======================================================= */
/* == Complete List of Text Colors == */
/* ======================================================= */
[data-color-text="on-primary"] {
color: var(--md-on-primary);
}
[data-color-text="on-primary-container"] {
color: var(--md-on-primary-container);
}
[data-color-text="on-secondary"] {
color: var(--md-on-secondary);
}
[data-color-text="on-secondary-container"] {
color: var(--md-on-secondary-container);
}
[data-color-text="on-tertiary"] {
color: var(--md-on-tertiary);
}
[data-color-text="on-tertiary-container"] {
color: var(--md-on-tertiary-container);
}
[data-color-text="on-error"] {
color: var(--md-on-error);
}
[data-color-text="on-error-container"] {
color: var(--md-on-error-container);
}
[data-color-text="on-background"] {
color: var(--md-on-background);
}
[data-color-text="on-surface"] {
color: var(--md-on-surface);
}
[data-color-text="on-surface-variant"] {
color: var(--md-on-surface-variant);
}
[data-color-text="outline"] {
color: var(--md-outline);
}
[data-color-text="outline-variant"] {
color: var(--md-outline-variant);
}
[data-color-text="inverse-on-surface"] {
color: var(--md-inverse-on-surface);
}
[data-color-text="on-primary-fixed"] {
color: var(--md-on-primary-fixed);
}
[data-color-text="on-primary-fixed-variant"] {
color: var(--md-on-primary-fixed-variant);
}
[data-color-text="on-secondary-fixed"] {
color: var(--md-on-secondary-fixed);
}
[data-color-text="on-secondary-fixed-variant"] {
color: var(--md-on-secondary-fixed-variant);
}
[data-color-text="on-tertiary-fixed"] {
color: var(--md-on-tertiary-fixed);
}
[data-color-text="on-tertiary-fixed-variant"] {
color: var(--md-on-tertiary-fixed-variant);
}
[data-color-text="on-color1"] {
color: var(--md-on-color-color1);
}
[data-color-text="on-color1-container"] {
color: var(--md-on-color1-container);
}
[data-color-text="on-color2"] {
color: var(--md-on-color2);
}
[data-color-text="on-color2-container"] {
color: var(--md-on-color2-container);
}
[data-color-text="on-color3"] {
color: var(--md-on-color3);
}
[data-color-text="on-color3-container"] {
color: var(--md-on-color3-container);
}
[data-color-text="on-color4"] {
color: var(--md-on-color4);
}
[data-color-text="on-color4-container"] {
color: var(--md-on-color4-container);
}
[data-color-text="on-color5"] {
color: var(--md-on-color5);
}
[data-color-text="on-color5-container"] {
color: var(--md-on-color5-container);
}}
@layer global{
/*
FUN FACT:
"typeface" and "typescale" can be confusing. "face" refers to font-family and font-weight.
"scale" refers to a group of font-family, font-size, line-height, and font-weight tokens.
- https://material-web.dev/theming/typography/#typeface
*/
:root {
/* ==========================================================================
LETTER SPACING
========================================================================== */
--tracking-s: -0.075ch;
--tracking: -0.05ch;
--tracking-denser: -0.03ch;
--tracking-dense: -0.02ch;
--tracking-normal: normal;
--tracking-loose: 0.075ch;
--tracking-looser: 0.15ch;
/* ==========================================================================
LINE HEIGHT
========================================================================== */
--line-height-flat: 1;
--line-height-fine: 1.15;
--line-height-standard: 1.5;
--line-height-loose: 1.7;
/* ==========================================================================
FONT FAMILY
========================================================================== */
--font-family-sans: system-ui,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Open Sans',
'Helvetica Neue',
Arial,
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol';
--font-family-serif: Georgia,
'Times New Roman',
serif;
--font-family-mono: SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace;
/* ==========================================================================
FONT WEIGHT
========================================================================== */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-bold: 700;
}}
@layer global{
/* Global variables */
:root {
--gutter: var(--space-s-m);
--border-radius: var(--size-step-1);
--transition-base: 250ms ease;
--transition-movement: 200ms linear;
--transition-fade: 200ms ease;
--transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
}}
/* Utils */
@layer utils {
/*
Skip link
Allows keyboard users to skip to main content
*/
.skip-link {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
background: var(--md-primary);
color: var(--md-on-primary);
padding: var(--size-2) var(--size-4);
text-decoration: none;
border-radius: 0 0 var(--radius-2) 0;
z-index: 10000;
font-weight: var(--font-weight-6);
&:focus {
transform: translateY(0);
outline: 2px solid var(--md-on-primary);
outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
transition: transform 0.2s var(--ease-out-3);
}
}
/*
Screen-reader only
When you visibly want to hide an element but make it accessible for screen readers.
*/
.sr-only,
.visually-hidden {
block-size: 1px;
clip-path: inset(50%);
inline-size: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
/* Hover and active effect for checkbox, radio and icon buttons */
:where(.checkbox input, .radio input, .icon-button) {
--isLTR: 1;
--isRTL: -1;
position: relative;
transform-style: preserve-3d;
&:dir(rtl) {
--isLTR: -1;
--isRTL: 1;
}
&:where(:not([disabled])) {
&:hover:before {
--thumb-scale: 1;
}
&:active:before {
--thumb-scale: 1.1;
}
&::before {
--thumb-scale: 0.01;
--highlight-size: 150%;
background-color: oklch(0.6 0 0 / 0.2);
block-size: var(--highlight-size);
clip-path: circle(50%);
content: "";
inline-size: var(--highlight-size);
inset-block-start: 50%;
inset-inline-start: 50%;
position: absolute;
transform-origin: center center;
transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
will-change: transform;
@media (prefers-reduced-motion: no-preference) {
transition: transform 0.2s ease;
}
}
}
}
}
@layer utils{
:root {
/* 1: surface-container-low */
--box-shadow-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
/* 2: surface-container */
--box-shadow-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
/* 3: surface-container-high */
--box-shadow-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);
/* 4: surface-container-high (Note: same comment as 3) */
--box-shadow-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.30);
/* 5: surface-container-highest */
--box-shadow-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
}
/* TODO: add dark-theme shadows */}
@layer utils{
.mx-auto {
margin-inline: auto;
}
.centered {
display: grid;
place-items: center;
}
.text-centered {
text-align: center;
}
.shift-up {
transform: translateY(calc(var(--space-l-2xl) * -1));
}
.push-right {
margin-inline-start: auto;
}
.balance {
text-wrap: balance;
}
.pretty {
text-wrap: pretty;
}
.no-wrap {
white-space: nowrap;
}
.first-letter {
&::first-letter {
/* color: clr('inverse-on-surface'); */
/* background-color: clr('inverse-surface'); */
/* border-radius: 2px; */
/* box-shadow: 3px 3px 0 clr('md-inverse-primary'); */
/* vertical-align: top; */
/* font-size: 250%; */
/* padding: 6px 3px; */
/* margin-right: 6px; */
/* float: left; */
/* font-family: ff('serif'); */
font-size: var(--step-3);
font-weight: var(--font-weight-bold);
color: var(--md-inverse-surface);
text-shadow: 3px 3px 0px var(--md-inverse-primary);
margin-inline-end: 2px;
}
}
.first-line {
&::first-line {
font-size: 1.2rem;
font-weight: var(--font-weight-bold);
text-decoration: underline;
}
}
.nav-background {
position: relative;
border-radius: 50vw;
border: 0;
padding: var(--space-xs-s) var(--space-xs-s);
background: radial-gradient(var(--md-surface-bright), var(--md-surface-dim));
box-shadow: var(--box-shadow-3);
&::before {
position: absolute;
inset: -1px;
content: '';
background: linear-gradient(180deg,
var(--md-primary-container),
var(--md-surface));
border-radius: 50vw;
z-index: -1;
}
}
[data-confetti] {
border: none;
background-color: transparent;
transition: transform 250ms;
&:is(:hover, :focus-within) {
transform: scale(0.95);
}
&:is(:active) {
transform: scale(0.65);
}
& > span {
font-size: var(--step-7);
}
}
.text-shadow {
text-shadow: var(--md-inverse-primary) 1px 0 .65em;
/* text-shadow: var(--md-inverse-primary) 1px 0 10px; */
}
:root {
--noise-1: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--noise-2: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--noise-3: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--noise-4: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--noise-5: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
--noise-filter-1: contrast(300%) brightness(100%);
--noise-filter-2: contrast(200%) brightness(150%);
--noise-filter-3: contrast(200%) brightness(250%);
--noise-filter-4: contrast(200%) brightness(500%);
--noise-filter-5: contrast(200%) brightness(1000%);
}
:where(:root) {
--border-size-1: 1px;
--border-size-2: 2px;
--border-size-3: 5px;
--border-size-4: 10px;
--border-size-5: 25px;
--radius-1: 2px;
--radius-2: 5px;
--radius-3: 1rem;
--radius-4: 2rem;
--radius-5: 4rem;
--radius-6: 8rem;
--radius-round: 1e5px;
--radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
--radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
--radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
--radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
--radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
--radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
--radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
--radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
--radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
--radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
--radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}}
/* Theme */
@layer theme {
:where(html) {
color-scheme: var(--color-scheme, light dark);
/* ======================================================= */
/* == PRIMARY COLOR CONFIGURATION == */
/* ======================================================= */
/*
* INSTRUCTIONS FOR UPDATING PRIMARY COLOR:
*
* 1. Update Material Design colors in light.css and dark.css
* (see documentation in those files)
*
* 2. Update Open Props palette values here:
* a. Go to https://oklch.com/
* b. Paste your Material primary color (e.g., rgb(226 196 109))
* c. Copy the OKLCH values:
* - Lightness → --primary-lightness
* - Chroma → --primary-chroma (divide by 0.21 for palette scaling)
* - Hue → --primary-hue
*
* NOTE: These values derive from Open Props' --color-8 but adjusted for your brand color.
* Primary HEX Color for Material Source: #D4AF37
*/
--primary-lightness: .4822;
--primary-chroma: 0.4476190476; /* Calculated: (chroma from oklch.com) / 0.21 */
--primary-hue: 89.77;
--palette-hue: var(--primary-hue);
--palette-hue-rotate-by: 0;
--palette-chroma: var(--primary-chroma);
/* Primary */
--primary: var(--md-primary); /* --md-primary variable is defined in colors.css */
--primary-light: oklch(from var(--md-primary) calc(l * 1.25) c h);
--primary-dark: oklch(from var(--md-primary) calc(l * 0.75) c h);
--primary-contrast: var(--gray-1);
/* Text */
--text-color-1: light-dark(var(--gray-15), var(--gray-1));
--text-color-1-contrast: light-dark(var(--gray-2), var(--gray-15));
--text-color-2: light-dark(var(--gray-13), var(--gray-4));
--text-color-2-contrast: light-dark(var(--gray-4), var(--gray-13));
/* Surface */
--surface-default: light-dark(var(--gray-1), var(--gray-13));
--surface-filled: light-dark(var(--gray-3), var(--gray-15));
--surface-tonal: light-dark(var(--gray-3), var(--gray-12));
--surface-elevated: light-dark(var(--gray-1), var(--gray-12));
/* Shadows */
--shadow-color: light-dark(220 3% 15%, 220 40% 2%);
--shadow-strength: light-dark(1%, 10%);
--inner-shadow-highlight: light-dark(inset 0 -0.5px 0 0 #fff,
inset 0 0.5px 0 0 #0001,
inset 0 -0.5px 0 0 #fff1,
inset 0 0.5px 0 0 #0007);
/* Typography */
--font-size-h1: var(--font-size-fluid-3, 3.5rem);
--font-size-h2: var(--font-size-fluid-2, 2rem);
--font-size-h3: var(--font-size-fluid-1, 1.5rem);
--font-size-h4: var(--font-size-3, 1.25rem);
--font-size-h5: var(--font-size-2, 1.1rem);
--font-size-h6: var(--font-size-fluid-0, 1rem);
--font-size-lg: var(--font-size-3, 1.25rem);
--font-size-md: var(--font-size-fluid-0, 1rem);
--font-size-sm: 0.875rem;
--font-size-xs: var(--font-size-0, 0.75rem);
/* Borders */
--border-color: light-dark(var(--gray-4), var(--gray-12));
--border-radius: var(--size-1);
--border-width: 1px;
/* Input Field */
--field-border-color: var(--border-color);
--field-border-radius: var(--size-1);
--field-border-width: 1px;
--field-size: 2.3lh;
--field-size-small: 1.9lh;
/* Button */
--button-border-radius: var(--radius-round);
/* Ripple effect */
@media (prefers-reduced-motion: no-preference) {
--button-ripple-size: 100%;
--button-ripple-duration: 0.5s;
}
}
:where(html:not(.dark)) {
color-scheme: light;
}
:where(html.dark) {
color-scheme: dark;
}
/* Highlight colors */
:where(.red, .error, del) {
--palette-hue: var(--oklch-red, 25);
--palette-chroma: 1;
--palette-hue-rotate-by: 1;
}
:where(.blue, .ok, abbr, dfn) {
--palette-hue: var(--oklch-blue, 210);
--palette-chroma: 1;
--palette-hue-rotate-by: 1;
}
:where(.green, .good, ins) {
--palette-hue: var(--oklch-green, 145);
--palette-chroma: 1;
--palette-hue-rotate-by: 1;
}
:where(.orange, .warning) {
--palette-hue: var(--oklch-orange, 75);
--palette-chroma: 1;
--palette-hue-rotate-by: 1;
}
:where(html) {
--red: oklch(from var(--color-9) l 0.2 25);
--blue: oklch(from var(--color-9) l 0.2 210);
--green: oklch(from var(--color-9) l 0.2 145);
--orange: oklch(from var(--color-7) l 0.2 75);
}
/* Gray palette */
:where(html) {
--gray-chroma: 0.01;
--gray-lightness: var(--palette-hue);
--gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-lightness));
--gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-lightness));
--gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-lightness));
--gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-lightness));
--gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-lightness));
--gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-lightness));
--gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-lightness));
--gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-lightness));
--gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-lightness));
--gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-lightness));
--gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-lightness));
--gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-lightness));
--gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-lightness));
--gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-lightness));
--gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-lightness));
--gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-lightness));
}
}
/* Blocks */
@layer blocks{
.curve {
/* --spot-color: #{clr('red')}; */
display: block;
height: 4rem;
width: 100%;
fill: var(--spot-color, var(--md-primary));
#blockquote & {
fill: var(--md-tertiary);
}
}}
@layer blocks{
.features {
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 33%, 20rem);
--gutter: var(--space-l-xl);
--flow-space: var(--space-s);
text-align: center;
}
.features svg {
display: block;
margin-inline: auto;
height: 4em;
}
.features a {
text-decoration: none;
}
.features a:hover {
text-decoration: underline;
text-decoration-thickness: 0.08ex;
text-underline-offset: 0.2ex;
}}
@layer blocks{
.prose {
--flow-space: var(--space-l-xl);
--wrapper-max-width: 55rem;
}
.prose :is(h2, h3, h4) + * {
--flow-space: var(--space-s-m);
}
.prose blockquote {
border-inline-start: 10px solid var(--md-secondary);
padding: var(--space-m-l);
font-family: var(--font-family-serif);
font-style: italic;
font-size: var(--step-2);
}
.prose blockquote > * + * {
margin-top: var(--space-m-l);
}
.prose blockquote :last-child {
font-family: var(--font-family-sans);
font-style: normal;
font-size: var(--step-1);
}}
@layer blocks{
.section > .curve {
/* --spot-color: #{clr('red')}; */
transform: translateY(-1px);
&:first-child {
transform: rotate(180deg) translateY(-1px);
}
}
.section__inner {
background: var(--spot-color, var(--md-primary));
color: var(--md-on-primary);
#blockquote & {
background: var(--md-tertiary);
color: var(--md-on-tertiary);
}
}
.section {
blockquote {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-flat);
font-size: var(--step-5);
letter-spacing: var(--tracking-dense);
}
}
.section :is(h1, h2, h3, blockquote) {
opacity: 95%;
}}
@layer blocks{
.signoff h2 {
font-weight: 400;
font-size: var(--step-1);
max-width: 30ch;
letter-spacing: var(--tracking);
}
.signoff p {
font-size: var(--step-6);
font-weight: 700;
letter-spacing: var(--tracking-s);
line-height: 1;
color: var(--md-primary);
}}
@layer blocks{
.site-foot {
padding: var(--space-s-m);
background: var(--md-inverse-surface);
color: var(--md-inverse-on-surface);
}
.site-foot__inner {
display: flex;
gap: var(--space-s-m);
align-items: center;
}
.site-foot svg {
width: 3em;
height: 3em;
}}
@layer blocks{
.glow {
width: 100%;
height: 100%;
position: absolute;
z-index: -10;
top: 0;
left: 0;
overflow: hidden;
&:after {
content: '';
display: block;
position: absolute;
top: -120px;
left: calc(50% - 360px);
width: 720px;
height: 240px;
background: radial-gradient(50% 50% at 50% 50%, clr('--md-secondary-container') 0%, var(--md-surface) 100%);
/* @media (prefers-color-scheme: dark) {
background: radial-gradient(50% 50% at 50% 50%,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 100%);
} */
}
}
/* landing */
/* :root {
--purple-hsl: 255, 60%, 60%;
--overlay-blurple: hsla(var(--purple-hsl), 0.2);
}
:root[data-theme='light'] {
--purple-hsl: 255, 85%, 65%;
}
[data-has-hero] .page {
background:
linear-gradient(215deg, var(--overlay-blurple), transparent 40%),
radial-gradient(var(--overlay-blurple), transparent 40%) no-repeat -60vw -40vh / 105vw 200vh,
radial-gradient(var(--overlay-blurple), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
}
[data-has-hero] header {
border-bottom: 1px solid transparent;
background-color: transparent;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
[data-has-hero] .hero > img {
filter: drop-shadow(0 0 3rem var(--overlay-blurple));
} */}
@layer blocks{
.diagonal {
--skew-angle: -5deg;
--background: linear-gradient(to bottom, var(--bgClr1, #12c2e9), var(--bgClr2, #c471ed), var(--bgClr3, #f64f59));
position: relative;
isolation: isolate;
background: var(--bgClr, steelblue);
&::after {
content: '';
background: var(--background);
position: absolute;
z-index: -1;
inset: 0;
transform: skewY(var(--skew-angle));
}
}
.spikes {
--spike-width: 5px;
--spike-height: 50px;
--background: linear-gradient(to right, var(--bgClr1, #fdc830) 50%, var(--bgClr2, #f37335));
position: relative;
background: var(--background);
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: var(--spike-height);
background: var(--md-surface);
mask-image: url(/svgs/triangle.svg);
mask-size: var(--spike-width) var(--spike-height);
/* mask-repeat: repeat -x; */
}
&::before {
top: 0;
/* transform: translateY(-1px); */
}
&::after {
bottom: 0;
transform: rotate(.5turn);
}
}
.wavy {
/* mask created with: https: //css-generators.com/wavy-shapes/ */
--background: linear-gradient(to right, var(--bgClr1, #00f260), var(--bgClr2, #0575e6));
background: var(--background);
--mask:
radial-gradient(55.9px at 50% 75px, #000 99%, #0000 101%) calc(50% - 50px) 0/100px 51% repeat-x,
radial-gradient(55.9px at 50% -50px, #0000 99%, #000 101%) 50% 25px/100px calc(51% - 25px) repeat-x,
radial-gradient(55.9px at 50% calc(100% - 75px), #000 99%, #0000 101%) calc(50% - 50px) 100%/100px 51% repeat-x,
radial-gradient(55.9px at 50% calc(100% + 50px), #0000 99%, #000 101%) 50% calc(100% - 25px)/100px calc(51% - 25px) repeat-x;
mask: var(--mask);
}}
/* Compositions */
@layer compositions{
/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consistent
spacing, regardless of their size
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.
--cluster-justify-content (flex-start) How items should align
horizontally. Can be any acceptable flexbox alignment value.
--cluster-align-items How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.cluster {
display: flex;
flex-wrap: wrap;
flex-direction: var(--cluster-direction, row);
gap: var(--gutter, var(--space-s-xl));
justify-content: var(--cluster-justify-content, flex-start);
align-items: var(--cluster-align-items, center);
}
.cluster[data-nowrap] {
flex-wrap: nowrap;
}}
@layer compositions{
/*
FLOW COMPOSITION
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/
/* .flow > * + * {
margin-top: var(--flow-space, 1em);
} */
.flow > *:where(:not(:first-child)) {
margin-block-start: var(--flow-space, var(--space-s-l));
}}
@layer compositions{
/* AUTO GRID */
/* Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.
--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.
--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled
*/
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-placement, auto-fill),
minmax(var(--grid-min-item-size, 16rem), 1fr));
gap: var(--gutter, var(--space-s-l));
}
.grid[data-rows='masonry'] {
grid-template-rows: masonry;
align-items: start;
}
.grid[data-layout='50-50'] {
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 50vw, 26rem);
/* --grid-min-item-size: clamp(16rem, 50vw, 33rem); */
}
.grid[data-layout='thirds'] {
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 33%, 20rem);
}
.grid[data-layout='twelfths'] {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.grid[data-layout="masonryThirds"] {
grid-template-rows: masonry;
align-items: start;
--grid-placement: auto-fit;
--grid-min-item-size: clamp(16rem, 33%, 20rem);
}
.grid[data-layout="gallery"] {
--gutter: var(--space-xs);
--grid-placement: auto-fit;
--grid-min-item-size: calc(var(--step-7) * 2);
grid-auto-flow: dense;
grid-auto-rows: 1fr min-content;
margin-inline: auto;
}
/* Special layout for larger devices. Used on home page intro */
/* .grid[data-layout='lg:10/2'] {
grid-template-columns: 100%;
} */
/* @media screen(md) {
.grid[data-layout='lg:10/2'] {
grid-template-columns: clamp(40rem, 80vw, 60rem);
}
} */
/* @media screen(lg) {
.grid[data-layout='lg:10/2'] {
grid-template-columns: 10fr 2fr;
}
} */}
@layer compositions{
/**
* REGION
* Add consistent vertical padding to create regions of content
* Can either be configured by setting --region-space or use a default from the space scale
*/
.region {
padding-block-start: var(--region-space-start, var(--space-l-2xl));
padding-block-end: var(--region-space-end, var(--space-l-2xl));
}}
@layer compositions{
/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.
--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.repel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: var(--repel-vertical-alignment, center);
gap: var(--gutter, var(--space-s-m));
}
.repel[data-nowrap] {
flex-wrap: nowrap;
}}
@layer compositions{
/*
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.
--sidebar-target-width (20rem): How large the sidebar should be
--sidebar-content-min-width(50%): The minimum size of the main content area
EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right
*/
.sidebar {
display: flex;
flex-wrap: wrap;
gap: var(--gutter, var(--space-s-l));
}
.sidebar > :first-child {
flex-basis: var(--sidebar-target-width, 20rem);
flex-grow: 1;
}
.sidebar > :last-child {
flex-basis: 0;
flex-grow: 999;
min-width: var(--sidebar-content-min-width, 50%);
}
/*
A flipped version where the sidebar is on the right
*/
.sidebar[data-direction='rtl'] {
flex-direction: row-reverse;
}}
@layer compositions{
/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.
CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item
--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other
--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.switcher {
display: flex;
flex-wrap: wrap;
gap: var(--gutter, clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem));
align-items: var(--switcher-vertical-alignment, flex-start);
}
.switcher > * {
flex-grow: 1;
flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}
/* Max 2 items, so anything greater than 2 is full width */
.switcher > :nth-child(n + 3) {
flex-basis: 100%;
}}
@layer compositions{
/*
WRAPPER
Sets a max width,
adds a consistent gutter, and
horizontally centers the contents
Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
*/
/* TODO: figure out why full-bleed isn't working */
.wrapper {
margin-inline: var(--wrapper-margin-inline, auto);
max-width: var(--wrapper-max-width, 77.5rem);
padding-inline: var(--wrapper-pad-inline, var(--space-s-l));
position: relative;
&[data-width='full-bleed'] {
--wrapper-pad-inline: 0;
--wrapper-max-width: 100%;
}
&[data-width='95'] {
--wrapper-pad-inline: 0;
--wrapper-max-width: 95vw;
}
}}
/*
* Components
* Components are divided into two categories - if they are stand-alone (base) or if they have dependencies (has-deps).
*/
/*** Base components (no dependencies) */
@layer components.base {
:where(.button) {
--_bg-color: transparent;
--_border-color: transparent;
--_border-radius: var(--button-border-radius);
--_font-size: initial;
--_min-height: 2.375rem;
--_text-color: var(--md-primary);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
align-items: center;
background: var(--_bg-color) var(--ripple, none);
border-radius: var(--_border-radius);
border: var(--border-size-1) solid var(--_border-color);
color: var(--_text-color);
display: inline-flex;
font-size: var(--_font-size);
font-weight: 700;
gap: var(--size-2);
justify-content: center;
min-block-size: var(--_min-height);
padding-block: 0.5ex;
padding-inline: 1.5ex;
text-align: center;
text-decoration: none;
user-select: none;
&:where([disabled]) {
cursor: not-allowed;
opacity: 0.64;
}
@media (prefers-reduced-motion: no-preference) {
transition:
background-color 0.2s var(--ease-out-3),
box-shadow 0.2s var(--ease-out-3),
border-color 0.2s var(--ease-out-3),
color 0.2s var(--ease-out-3),
outline-offset 0.05s var(--ease-1);
/* Ripple effect */
background-position: center;
&:where(:not([disabled])) {
&:where(:not(:active):hover) {
--ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
transition: background var(--button-ripple-duration);
}
&:where(:hover:active) {
background-size: var(--button-ripple-size);
transition: background 0s;
}
}
}
/* Element states */
&:where(:not([disabled])) {
&:where(:not(:active):hover, :focus-visible) {
--_bg-color: light-dark(oklch(from var(--md-primary) l 0.01 h / 20%),
oklch(from var(--md-primary) l 0.01 h / 40%));
}
&:where(:active) {
--_bg-color: light-dark(oklch(from var(--md-primary) l 0.06 h / 30%),
oklch(from var(--md-primary) l 0.06 h / 40%));
}
}
/* Disabled */
&:where([disabled]) {
--_bg-color: rgb(from var(--md-on-surface) r g b / 10%);
--_text-color: rgb(from var(--md-on-surface) r g b / 38%);
/* --_text-color: color-mix(in oklch, var(--text-color-2) 50%, var(--md-surface-default)); */
}
/* Icon */
&:where(:has(svg), &.icon-only) {
gap: 1ex;
svg {
max-block-size: 0.7lh;
color: currentColor;
}
}
/* Sizes */
&.small {
--_min-height: 1.875rem;
padding-block: 0;
padding-inline: 1ex;
}
&.large {
--_min-height: 2.875rem;
padding-inline: 4ex;
}
/* Variants */
&.outlined {
--_border-color: var(--md-outline-variant);
--_text-color: var(--md-on-surface-variant);
&:where(:not([disabled])) {
&:where(:not(:active):hover, :focus-visible) {
--_bg-color: light-dark(oklch(from var(--md-primary) l 0.01 h / 20%),
oklch(from var(--md-primary) l 0.01 h / 40%));
}
&:where(:active) {
--_bg-color: light-dark(oklch(from var(--md-primary) l 0.06 h / 30%),
oklch(from var(--md-primary) l 0.06 h / 40%));
}
}
&:where([disabled]) {
--_bg-color: var(--surface-default);
--_border-color: color-mix(in oklch,
var(--text-color-2) 20%,
var(--surface-default));
--_text-color: color-mix(in oklch,
var(--text-color-2) 40%,
var(--surface-default));
}
}
&.tonal {
--_bg-color: var(--md-secondary-container);
--_text-color: var(--md-on-secondary-container);
&:where(:not([disabled])) {
&:where(:not(:active):hover, :focus-visible) {
--_bg-color: light-dark(var(--color-4), var(--color-10));
--_border-color: light-dark(var(--color-4), var(--color-10));
}
&:where(:active) {
--_bg-color: light-dark(var(--color-6), var(--color-12));
--_border-color: light-dark(var(--color-6), var(--color-12));
}
}
&:where([disabled]) {
--_bg-color: color-mix(in oklch,
var(--text-color-2) 8%,
var(--surface-default));
--_text-color: color-mix(in oklch,
var(--text-color-2) 70%,
var(--surface-default));
}
}
&.filled {
--_bg-color: var(--md-primary);
--_text-color: var(--md-on-primary);
&:where(:not([disabled])) {
&:where(:not(:active):hover, :focus-visible) {
--_bg-color: light-dark(var(--color-8), var(--color-6));
--_border-color: light-dark(var(--color-8), var(--color-6));
}
&:where(:active) {
--_bg-color: light-dark(var(--color-6), var(--color-8));
--_border-color: light-dark(var(--color-6), var(--color-8));
}
}
&:where([disabled]) {
--_bg-color: color-mix(in oklch,
var(--text-color-2) 20%,
var(--surface-default));
--_text-color: color-mix(in oklch,
var(--text-color-2) 70%,
var(--surface-default));
}
}
&.elevated {
--_bg-color: light-dark(color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
color-mix(in oklch, var(--gray-13) 97%, var(--color-1)));
--_ripple-color: light-dark(color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
color-mix(in oklch, var(--gray-13) 80%, var(--color-8)));
--_text-color: var(--md-primary);
box-shadow:
0px 3px 1px -2px oklch(0 0 0 / 20%),
0px 2px 2px 0px oklch(0 0 0 / 14%),
0px 1px 5px 0px oklch(0 0 0 / 12%);
&:where(:not([disabled])) {
&:where(:not(:active):hover, :focus-visible) {
--ripple: radial-gradient(circle,
transparent 1%,
var(--_ripple-color) 1%) center/15000%;
--_bg-color: light-dark(color-mix(in oklch, var(--gray-3) 93%, var(--color-8)),
color-mix(in oklch, var(--gray-12) 93%, var(--color-8)));
}
&:where(:active) {
--_bg-color: light-dark(color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
color-mix(in oklch, var(--gray-16) 91%, var(--color-8)));
}
}
&:where([disabled]) {
--_bg-color: color-mix(in oklch,
var(--text-color-2) 8%,
var(--surface-elevated));
--_text-color: color-mix(in oklch,
var(--text-color-2) 70%,
var(--surface-elevated));
}
}
&.no-border-radius {
border-radius: 0;
}
}
/* file input */
:where(input[type="file"]) {
align-self: flex-start;
border-radius: var(--radius-2);
border: var(--border-size-1) solid var(--surface-filled);
box-shadow: var(--inner-shadow-4);
color: var(--text-color-2-contrast);
cursor: initial;
max-inline-size: 100%;
padding: 0;
}
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
cursor: pointer;
margin-inline-end: var(--size-relative-6);
}
}
@layer components.base {
:where(.icon-button) {
--_text-color: inherit;
align-items: center;
aspect-ratio: 1;
background-color: transparent;
border: 0;
border-radius: var(--radius-round);
display: inline-flex;
inline-size: var(--size-6);
justify-content: center;
padding: 0;
transform-style: preserve-3d;
&:where([disabled]) {
color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
cursor: not-allowed;
opacity: 0.64;
}
svg {
max-inline-size: var(--size-5);
pointer-events: none;
}
/* Ripple effect, utils > index.css */
&::before {
--highlight-size: 130%;
}
/* Size */
&.small {
inline-size: var(--size-4);
svg {
max-inline-size: var(--size-4);
}
}
}
}
@layer components.base {
:where(nav.tabs) {
--_bg-color: transparent;
& > [role="tablist"] {
button {
outline-color: transparent;
outline-offset: -4px;
&[aria-selected="true"] {
&:focus-visible {
outline: 2px solid var(--text-color-1);
}
}
}
}
/* Underlined */
&.underlined {
/* Tab list */
& > [role="tablist"] {
border-bottom: 1px solid var(--border-color);
button {
--_ripple-color: light-dark(color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
color-mix(in oklch, var(--gray-13) 80%, var(--color-8)));
background: var(--_bg-color) var(--ripple, none);
font-weight: 500;
line-height: var(--font-lineheight-4);
padding: var(--size-2) var(--size-3);
&:focus-visible {
border-radius: 0;
}
&[aria-selected="true"] {
border-block-end: 2px solid var(--md-primary);
color: var(--md-primary);
}
@media (prefers-reduced-motion: no-preference) {
transition:
background-color 0.2s var(--ease-out-3),
border-color 0.2s var(--ease-out-3),
color 0.2s var(--ease-out-3),
outline-offset 0.05s var(--ease-1);
/*** Ripple effect */
background-position: center;
transition: background var(--button-ripple-duration);
&:where(:not(:active):hover) {
--ripple: radial-gradient(circle,
transparent 1%,
var(--_ripple-color) 1%) center/15000%;
}
&:where(:hover:active) {
background-size: var(--button-ripple-size);
transition: background 0s;
}
&:hover {
background-color: light-dark(oklch(from var(--md-primary) calc(l * 0.75) none h / 5%),
oklch(from var(--md-primary) calc(l * 1.25) none h / 5%));
}
}
}
}
}
/* Filled */
&.filled {
--_bg-color: var(--surface-default);
--_radius: var(--border-radius);
--_selected-bg: var(--surface-filled);
& > [role="tablist"] {
background-color: var(--_bg-color);
border: var(--border-width) solid var(--border-color);
border-radius: var(--_radius);
overflow: hidden;
padding: 0.792ex;
width: fit-content;
button {
background-color: var(--_bg-color);
border-radius: var(--_radius);
line-height: var(--font-lineheight-4);
padding-inline: var(--size-3);
&:hover {
background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
}
&[aria-selected="true"] {
background-color: var(--_selected-bg);
&:hover {
background-color: oklch(from var(--_selected-bg) calc(l * 1.25) c h);
}
}
@media (prefers-reduced-motion: no-preference) {
transition:
background-color 0.2s var(--ease-out-3),
border-color 0.2s var(--ease-out-3),
color 0.2s var(--ease-out-3),
outline-offset 0.05s var(--ease-1);
}
}
}
}
}
}
@layer components.base {
:where([role="group"].toggle-button-group) {
--_border-radius: var(--radius-round);
--_button-padding-inline: clamp(var(--size-2), 3cqi, var(--size-4));
--_max-width: auto;
--_icon-size: var(--size-4);
background-color: var(--surface-default);
border: 1px solid var(--border-color);
border-radius: var(--_border-radius);
display: flex;
grid-auto-columns: 1fr;
grid-auto-flow: column;
max-inline-size: var(--_max-width);
min-inline-size: max-content;
overflow: clip;
/* Size */
&.small {
button {
min-block-size: 2.1875rem;
/* 35px */
}
}
&.x-small {
button {
min-block-size: var(--size-6);
/* 30px */
}
}
&.fullwidth {
inline-size: 100%;
}
/* Button */
button {
--_bg-color: transparent;
align-items: center;
background: var(--_bg-color) var(--ripple, none);
border-radius: 0;
border-inline: 1px solid var(--border-color);
border-inline-start-width: 0;
color: var(--text-color-1);
display: inline-flex;
flex: auto;
gap: 1ex;
justify-content: center;
min-block-size: 2.5rem;
/* 40px */
min-inline-size: 5ex;
outline-offset: calc(-1 * var(--size-2));
padding: 0 var(--_button-padding-inline);
position: relative;
user-select: none;
@media (prefers-reduced-motion: no-preference) {
transition:
background-color 0.2s var(--ease-out-3),
box-shadow 0.2s var(--ease-out-3),
border-color 0.2s var(--ease-out-3),
color 0.2s var(--ease-out-3),
outline-offset 0.05s var(--ease-1);
}
/* Element states */
&:hover {
--_bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
}
&:focus-visible {
outline-offset: -6px;
}
/* Disabled */
&[disabled] {
border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
cursor: not-allowed;
color: color-mix(in oklch, var(--text-color-1) 30%, transparent);
}
&[disabled] + &:not([disabled]):not(:last-of-type) {
border-inline-end-width: 1px;
}
/* Assign border radius for outline */
&:first-of-type {
border-bottom-left-radius: var(--_border-radius);
border-top-left-radius: var(--_border-radius);
}
&:last-of-type {
border-bottom-right-radius: var(--_border-radius);
border-top-right-radius: var(--_border-radius);
}
&:last-of-type {
border-inline-end-width: 0;
}
/* Ripple effect */
background-position: center;
&:where(:not([disabled])) {
&:where(:not(:active):hover) {
--ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
transition: background var(--button-ripple-duration);
}
&:where(:hover:active) {
background-size: var(--button-ripple-size);
transition: background 0s;
}
}
/* Icons */
svg {
inline-size: var(--_icon-size);
inset-inline-start: calc(var(--_button-padding-inline));
& + svg {
max-block-size: var(--size-5);
max-inline-size: var(--size-7);
}
}
/* Selected */
&.selected {
--_bg-color: color-mix(in oklch,
var(--md-primary) 12%,
var(--surface-default));
/* Checkmark */
svg:first-of-type {
margin-block-end: -3px;
}
}
}
}
}
@layer components.base {
:where(.avatar) {
--_bg-color: var(--color-8);
--_color: var(--text-color-1);
--_width: 40px;
align-items: center;
background-color: var(--_bg-color);
color: var(--_color);
aspect-ratio: 1;
border-radius: 100vmax;
display: inline-flex;
inline-size: var(--_width);
justify-content: center;
overflow: clip;
position: relative;
text-align: center;
text-decoration: none;
&:has(img) {
background-color: transparent;
}
svg {
max-inline-size: var(--size-5);
}
img {
block-size: 100%;
inline-size: 100%;
inset: 0;
object-fit: cover;
position: absolute;
}
&.squared {
border-radius: 0;
}
&.rounded {
border-radius: var(--border-size-3);
}
}
/*
TODO: implement reading-order if that becomes a thing.
https://developer.chrome.com/blog/reading-order/
*/
:where(.avatar-group) {
--_margin: var(--size-1);
display: flex;
flex-direction: row-reverse;
&.gap-small {
--_margin: var(--size-2);
}
&.gap-x-small {
--_margin: var(--size-3);
}
.avatar {
margin-inline-end: calc(-1 * var(--_margin));
outline: 2px solid var(--surface-default);
}
}
}
@layer components.base {
:where(.badge) {
--_bg-color: var(--md-primary);
--_border-color: var(--md-primary);
--_color: var(--gray-1);
--_inset-offset: 16px;
--_inset: auto auto calc(100% - var(--_inset-offset)) calc(100% - var(--_inset-offset));
--_translate: 0;
display: inline-flex;
position: relative;
&::after {
background-color: var(--_bg-color);
border: 2px solid var(--_border-color);
border-radius: 100vmax;
color: var(--_color);
content: attr(aria-label);
font-size: 12px;
font-weight: 500;
block-size: var(--size-4);
line-height: normal;
min-inline-size: var(--size-4, 1.125rem);
padding-inline: var(--size-1);
inset: var(--_inset);
position: absolute;
text-align: center;
translate: var(--_translate);
transition: opacity 0.2s var(--ease-out-1);
inline-size: max-content;
}
/* Alignment */
&.start-start {
--_inset: auto calc(100% - var(--_inset-offset)) calc(100% - var(--_inset-offset)) auto;
}
&.start-end {
--_inset: auto auto calc(100% - var(--_inset-offset)) calc(100% - var(--_inset-offset));
}
&.end-start {
--_inset: calc(100% - var(--_inset-offset)) calc(100% - var(--_inset-offset)) auto auto;
}
&.end-end {
--_inset: calc(100% - var(--_inset-offset)) auto auto calc(100% - var(--_inset-offset));
}
/* Dot */
&.dot {
--_inset: 0 -1px auto auto;
&::after {
content: "";
min-inline-size: var(--size-2);
block-size: var(--size-2);
inline-size: var(--size-2);
padding: 0;
}
}
/* Visibility */
&.invisible {
&::after {
opacity: 0;
pointer-events: none;
}
}
/* Colors */
&.error,
&.good,
&.ok,
&.warning {
--_bg-color: var(--color-8);
--_border-color: var(--color-8);
}
}
[dir="rtl"] {
:where(.badge) {
--_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
/* Alignment */
&.start-start {
--_inset: auto auto calc(100% - 16px) calc(100% - 16px);
}
&.start-end {
--_inset: auto calc(100% - 16px) calc(100% - 16px) auto;
}
&.end-start {
--_inset: calc(100% - 16px) auto auto calc(100% - 16px);
}
&.end-end {
--_inset: calc(100% - 16px) calc(100% - 16px) auto auto;
}
}
}
}
@layer components.base {
:where(.card) {
--_bg-color: transparent;
--_border-color: transparent;
--_border-width: 0;
--_shadow: none;
background-color: var(--_bg-color);
border-color: var(--_border-color);
border-radius: var(--border-radius, 0.25rem);
border-style: solid;
border-width: var(--_border-width);
box-shadow: var(--_shadow);
display: flex;
flex-direction: column;
gap: var(--size-3);
overflow: hidden;
padding-inline: 0;
/* Variants */
&.text {
--_bg-color: transparent;
--_border-color: transparent;
--_border-width: 0;
--_shadow: none;
padding-inline: 0;
}
&.tonal {
--_bg-color: var(--surface-tonal);
--_border-width: 1px;
}
&.elevated {
--_bg-color: var(--surface-elevated);
--_border-color: transparent;
--_border-width: 0;
--_shadow: var(--shadow-3);
/* Adjust shadow in dark mode */
@container style(--color-scheme: dark) {
--_shadow: var(--shadow-4);
}
}
&.outlined {
--_bg-color: var(--surface-default);
--_border-color: var(--border-color);
--_border-width: 1px;
}
& > :where(hgroup, .content) {
padding-inline: var(--size-3);
}
& > hgroup {
padding-block: var(--size-3) 0;
/* Top paragraph */
& > p:first-of-type:first-child {
line-height: 1.3;
}
/* Bottom paragraph */
& > p:last-of-type:last-child:not(:first-child) {
font-size: var(--font-size-1, 1rem);
}
}
& > .content:where(:only-child, :first-child) {
padding-block: var(--size-3) var(--size-4);
}
& > .actions {
display: flex;
gap: var(--size-1);
margin-block: var(--size-2) 0;
padding-block-end: var(--size-1);
padding-inline: var(--size-1) var(--size-3);
}
}
}
@layer components.base {
:where(.chip) {
--_bg-color: var(--surface-tonal);
--_border-color: var(--border-color);
--_color: var(--text-color-1);
align-items: center;
background: var(--_bg-color) var(--ripple, none);
border: 1px solid var(--_border-color);
border-radius: var(--radius-2, 0.5rem);
color: var(--_color);
display: inline-flex;
font-size: var(--font-size-0, 0.75rem);
gap: var(--size-1);
block-size: var(--size-7, 2rem);
padding-inline: var(--size-2);
text-decoration: none;
/* Variants */
&.tonal {
--_bg-color: var(--surface-tonal);
--_color: var(--text-color-1);
}
&.outlined {
--_bg-color: var(--surface-default);
--_color: var(--text-color-1);
}
/* TODO: should this be out of the box? */
/* Colors */
/* &:hover {
--_bg-color: var(--color-11);
--_border-color: var(--color-11);
--_color: var(--text-color-1);
} */
/* &.red,
&.blue,
&.green,
&.orange,
&.primary {
--_bg-color: var(--color-5);
--_border-color: var(--color-7);
--_color: var(--text-color-1-contrast);
&:hover {
--_bg-color: var(--color-7);
--_border-color: var(--color-7);
--_color: var(--text-color-1-contrast);
&:active {
--_bg-color: var(--color-8);
--_border-color: var(--color-8);
}
}
&.outlined {
--_bg-color: var(--surface-tonal);
--_color: var(--text-color-1);
--_border-color: var(--color-9);
&:hover {
--_bg-color: var(--color-9);
--_border-color: var(--color-9);
--_color: var(--text-color-1);
&:active {
--_bg-color: var(--color-11);
--_border-color: var(--color-11);
}
}
}
} */
&:where(button, a):where(:not([disabled])) {
&:where(:not(:active)):hover {
--_bg-color: light-dark(
oklch(from var(--surface-tonal) calc(l * 0.98) c h),
oklch(from var(--surface-tonal) calc(l * 1.1) c h)
);
}
}
/* Icon */
&:has(svg:first-child) {
padding-inline: var(--size-1) var(--size-2);
}
&:has(svg:last-child) {
padding-inline: var(--size-2) var(--size-1);
}
&:has(svg) {
svg {
flex-shrink: 0;
inline-size: var(--size-3);
}
}
/* Sizes */
&.small {
block-size: var(--size-5);
}
&.multiline {
block-size: auto;
}
/* Ripple effect */
background-position: center;
&:where(:not([disabled])) {
&:where(:not(:active):hover) {
--ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
center/15000%;
transition: background var(--button-ripple-duration);
}
&:where(:hover:active) {
background-size: var(--button-ripple-size);
transition: background 0s;
}
}
/* Disabled */
&:where([disabled]) {
opacity: 0.64;
--_text-color: color-mix(
in oklch,
var(--text-color-2) 50%,
var(--surface-default)
);
cursor: not-allowed;
}
}
}
@layer components.base {
:where(.definition-list) {
--_border-style: solid;
--_border-width: 1px;
display: grid;
gap: var(--size-3);
padding: 0;
&.dotted {
--_border-style: dotted;
--_border-width: 2px;
}
li {
display: grid;
margin: 0;
padding: 0;
.term {
display: block;
font-weight: 700;
overflow: hidden;
position: relative;
}
span.hr {
display: none;
margin: 0;
}
}
@container (width > 45ch) {
gap: var(--size-1);
li {
align-items: baseline;
display: grid;
gap: var(--size-1);
grid-template-columns: 1fr auto;
&:has(span.hr) {
grid-template-columns: auto 1fr auto;
}
span.hr {
background-color: transparent;
border-block-end: var(--_border-width) var(--_border-style)
var(--border-color);
block-size: 2px;
display: block;
}
.term {
&::after {
display: inline-block;
}
}
.description {
color: var(--text-color-2);
}
}
}
}
}
@layer components.base {
:where(hr) {
background-color: var(--border-color);
block-size: var(--border-size-1);
margin-block: var(--size-fluid-3);
}
}
@layer components.base {
:where(.link) {
color: var(--md-primary);
cursor: pointer;
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--md-primary);
text-underline-offset: 2px;
&[href] {
&:hover,
&:focus-visible {
color: var(--primary-light);
}
}
@supports (-moz-appearance: none) {
text-underline-offset: 2px;
}
}
}
@layer components.base {
:where(table) {
border-collapse: collapse;
display: block;
margin: var(--size-3) 0;
max-inline-size: 100%;
position: relative;
/* Rows */
tr {
background-color: var(--surface-default);
border-top: 1px solid var(--border-color);
&:hover {
background-color: oklch(from var(--surface-filled) l c h / 75%);
}
}
/* Cells */
th,
td {
border: 1px solid var(--border-color);
padding: var(--size-1) var(--size-2);
}
th {
background-color: var(--surface-filled);
color: var(--text-color-1);
font-size: var(--font-size-sm, 0.75rem);
font-weight: 600;
text-align: start;
}
td {
font-size: var(--font-size-sm, 0.75rem);
}
/* Caption */
caption {
caption-side: bottom;
color: var(--text-color-2);
font-size: var(--font-size-sm, 0.75rem);
padding: var(--size-2) 0;
text-align: start;
}
/* Header */
thead {
position: sticky;
top: 0;
z-index: 1;
}
/* Footer */
tfoot {
border-top: 2px solid var(--border-color);
tr {
background-color: var(--surface-filled);
}
td {
color: var(--text-color-1);
font-weight: 600;
}
}
/* Column group */
colgroup col {
border: none;
}
@container (width < 60ch) {
th,
td {
padding: var(--size-1) 0.875rem;
}
}
/* Sticky header */
&.sticky-header thead {
background-color: var(--surface-filled);
position: sticky;
inset-block-start: 0;
z-index: 1;
}
/* Dense */
&.dense {
th,
td {
padding: var(--size-1) var(--size-2);
}
caption {
padding: var(--size-1) 0;
}
@container (width < 60ch) {
th,
td {
padding: var(--size-1) var(--size-2);
}
}
}
}
}
:where(progress) {
--_accent-color: var(--primary);
--_bg-color: var(--surface-tonal);
appearance: none;
background-color: var(--_bg-color);
border-radius: var(--border-radius, 0.25rem);
border: 0;
display: inline-block;
block-size: var(--size-1);
overflow: hidden;
position: relative;
vertical-align: baseline;
inline-size: 100%;
&::-webkit-progress-bar {
border-radius: var(--border-radius, 0.25rem);
background: none;
}
&[value]::-webkit-progress-value {
background-color: var(--_accent-color);
@media (prefers-reduced-motion: no-preference) {
transition: inline-size 0.2s var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
}
}
&::-moz-progress-bar {
background-color: var(--_accent-color);
}
}
@media (prefers-reduced-motion: no-preference) {
progress:indeterminate {
background-color: var(--_bg-color);
&::after {
animation: indeterminate 2s linear infinite;
background-color: var(--_accent-color);
content: "";
inset: 0 auto 0 0;
position: absolute;
will-change: inset-inline-start, inset-inline-end;
}
&[value]::-webkit-progress-value {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
}
[dir="rtl"] {
:where(progress):indeterminate {
animation-direction: reverse;
&::after {
animation-direction: reverse;
}
}
}
}
@keyframes indeterminate {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
}
}
@layer components.base {
[aria-busy="true"]:not(
input,
select,
textarea,
html,
progress,
[aria-describedby]
) {
position: relative;
&::before {
animation: spin 0.7s linear infinite;
border-color: transparent currentColor currentColor;
border-radius: 50%;
border-style: solid;
border-width: 3px;
content: "";
display: inline-block;
block-size: 1em;
opacity: 0.5;
vertical-align: -0.14em;
inline-size: 1em;
}
&:not(button.button):not(:empty) {
&::before {
margin-inline-end: 0.5em;
}
}
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
}
@layer components.base {
label:where(.checkbox, .radio) {
align-items: center;
color: var(--text-color-1);
cursor: pointer;
display: inline-grid;
gap: 0 var(--size-2);
grid-auto-columns: auto;
grid-auto-flow: column;
inline-size: fit-content;
line-height: 1.5;
transform: translateZ(0);
user-select: none;
/* Disabled */
&:has([disabled]) {
cursor: not-allowed;
opacity: 0.64;
user-select: none;
input {
cursor: not-allowed;
}
}
/* Required dot */
&:has([required]:not([type="checkbox"]:checked)) {
.label:after {
color: var(--red);
content: "*";
inset: 0 -0.25ex auto auto;
position: absolute;
}
}
/* Label */
.label {
grid-column: 2;
grid-row: 1;
position: relative;
padding-inline: 0 1ex;
}
/* Supporting text */
.supporting-text {
color: var(--text-color-2);
font-size: var(--font-size-xs);
grid-column: 2;
grid-row: 2;
line-height: 1.5;
z-index: 1;
}
/* Stacked layout */
&.stack {
justify-items: center;
grid-auto-columns: unset;
.label {
grid-column: 1/-1;
grid-row: 2;
margin-block-start: var(--size-1);
padding-inline: 1ex;
/* Required dot */
&::after {
inset: 0 -0.25ex auto auto;
}
}
.supporting-text {
grid-column: 1/-1;
grid-row: 3;
}
}
/* Input */
input {
aspect-ratio: 1;
block-size: 1.125rem;
cursor: pointer;
inline-size: 1.125rem;
&::before {
--highlight-size: 175%;
}
}
/* Sizes */
&.small {
input {
block-size: var(--size-3);
inline-size: var(--size-3);
}
}
&.large {
input {
block-size: var(--size-4);
inline-size: var(--size-4);
}
}
/* Validation */
&.error {
input[type="checkbox"] {
accent-color: var(--color-9);
& ~ :where(.label, .supporting-text) {
color: var(--color-9);
}
}
}
/* Touch devices */
@media (pointer: coarse) {
input {
block-size: var(--size-4);
inline-size: var(--size-4);
}
}
}
}
@layer components.base {
:where(.switch) {
--_accent-color: var(--primary);
--_accent-contrast: var(--primary-contrast);
--_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
--_dot-inset: var(--size-1) auto auto var(--size-1);
--_dot-outline-size: 0;
--_dot-size: var(--size-3);
--_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
--_track-height: var(--size-5);
--_track-width: var(--size-8);
--_transition-tf: var(--ease-4);
--_transition-time: 0.2s;
align-items: center;
color: var(--text-color-1);
display: inline-grid;
gap: 0 var(--size-2);
grid-auto-columns: auto;
grid-auto-flow: column;
inline-size: fit-content;
input[type="checkbox"][role="switch"] {
appearance: none;
block-size: var(--_track-height);
cursor: pointer;
inline-size: var(--_track-width);
margin: 0;
position: relative;
/* Track */
&::before {
background-color: var(--_track-bg-color);
block-size: var(--_track-height);
border: 1px solid var(--_dot-bg-color);
border-radius: 100vmax;
content: "";
inline-size: var(--_track-width);
inset: 0;
position: absolute;
}
&:focus-visible {
outline-offset: 2px;
outline: 2px solid currentColor;
}
/* Dot */
&::after {
background-color: var(--_dot-bg-color);
block-size: var(--_dot-size);
border-radius: 100vmax;
content: "";
inline-size: var(--_dot-size);
inset: var(--_dot-inset);
outline-offset: -1px;
outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
position: absolute;
}
/* Checked */
&:checked {
&::before {
background-color: var(--_accent-color);
border-color: var(--_accent-color);
transition:
background-color var(--_transition-time) var(--_transition-tf),
border-color var(--_transition-time) var(--_transition-tf);
}
/* Dot */
&::after {
--_dot-bg-color: var(--_accent-contrast);
--_dot-outline-size: calc(var(--size-1) - 1px);
inset-inline-start: calc(var(--_track-width) - var(--_dot-size) - var(--size-1));
}
}
/* Animation */
@media (prefers-reduced-motion: no-preference) {
/* Track */
&::before {
transition:
background-color var(--_transition-time) var(--_transition-tf),
border-color var(--_transition-time) var(--_transition-tf);
}
/* Dot */
&::after {
transition: all var(--_transition-time) var(--_transition-tf);
}
&:active:after {
--_dot-outline-size: calc(var(--size-1) + 1px);
}
&:checked {
&:active:after {
--_dot-outline-size: calc(var(--size-1) + 1px);
}
}
}
}
/* Required dot */
&:has([required]:not(:checked)) {
.label:after {
color: var(--red);
content: "*";
inset: 0 -0.25ex auto auto;
position: absolute;
}
}
/* Disabled */
&:has([disabled]) {
cursor: not-allowed;
opacity: 0.64;
user-select: none;
input {
cursor: not-allowed;
}
}
/* Label */
.label {
grid-column: 2;
grid-row: 1;
min-width: 0;
padding-inline: 0 1ex;
position: relative;
user-select: none;
}
/* Supporting text */
.supporting-text {
color: var(--text-color-2);
font-size: var(--font-size-xs);
grid-column: 2;
grid-row: 2;
line-height: 1.5;
z-index: 1;
}
/* Size */
&.small {
--_dot-size: 0.75rem;
--_track-height: var(--size-4);
--_track-width: 2.5rem;
}
/* Stacked layout */
&.stack {
justify-items: center;
grid-auto-columns: unset;
.label {
grid-column: 1/-1;
grid-row: 2;
margin-block-start: var(--size-1);
padding-inline: 1ex;
}
.supporting-text {
grid-column: 1/-1;
grid-row: 3;
}
}
/* Validation */
&.error {
input {
outline: 2px solid var(--color-9);
border-radius: var(--radius-round);
}
.label,
.supporting-text {
color: var(--color-9);
}
}
}
}
@layer components.base {
:where(.range > input[type="range"]) {
--thumb-bg: var(--primary);
--thumb-highlight-color: oklch(from var(--primary) 70% 100% h / 20%);
--thumb-highlight-size: 0px;
--thumb-offset: -1ex;
--thumb-size: 3ex;
--track-color: var(--field-border-color);
--track-fill: 0%;
--track-height: 1ex;
appearance: none;
background: transparent;
display: block;
inline-size: 100%;
margin: 1ex 0 3ex;
outline-offset: 1ex;
@media (hover: none) {
--thumb-offset: -14px;
--thumb-size: 30px;
}
/* Track */
&::-webkit-slider-runnable-track {
appearance: none;
background: linear-gradient(to right,
transparent var(--track-fill),
var(--track-color) 0%),
var(--primary);
block-size: var(--track-height);
border-radius: 5ex;
box-shadow: var(--inner-shadow-1);
}
&::-moz-range-track {
appearance: none;
background: linear-gradient(to right,
transparent var(--track-fill),
var(--track-color) 0%),
var(--primary);
block-size: var(--track-height);
border-radius: 5ex;
box-shadow: var(--inner-shadow-2);
}
/* Ring */
&::-webkit-slider-thumb {
appearance: none;
background: var(--thumb-bg);
block-size: var(--thumb-size);
border-radius: 50%;
border: 3px solid var(--surface-default);
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
cursor: ew-resize;
inline-size: var(--thumb-size);
margin-block-start: var(--thumb-offset);
@media (prefers-reduced-motion: no-preference) {
transition: box-shadow 0.1s ease;
}
.fieldset-item:focus-within & {
border-color: var(--gray-14);
}
}
&::-moz-range-thumb {
appearance: none;
background: var(--thumb-bg);
block-size: var(--thumb-size);
border-radius: 50%;
border: 3px solid var(--primary);
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
cursor: ew-resize;
inline-size: var(--thumb-size);
margin-block-start: var(--thumb-offset);
@media (prefers-reduced-motion: no-preference) {
transition: box-shadow 0.1s ease;
}
.fieldset-item:focus-within & {
border-color: var(--gray-14);
}
}
/* Element state */
&:not([disabled]) {
&:hover {
--thumb-highlight-size: var(--size-1);
}
&:active {
--thumb-highlight-size: var(--size-2);
--track-color: light-dark(oklch(from var(--field-border-color) calc(l * 0.9) c h),
oklch(from var(--field-border-color) calc(l * 1.1) c h));
}
}
&[disabled] {
--thumb-bg: oklch(from var(--text-color-1) l c h / 50%);
--track-color: var(--field-border-color);
cursor: not-allowed;
&::-webkit-slider-thumb {
cursor: not-allowed;
}
&::-moz-range-thumb {
cursor: not-allowed;
}
}
}
}
@layer components.base {
/* Base typography */
/* :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
color: var(--text-color-1);
font-weight: 700;
text-wrap: pretty;
} */
/* :where(h1, .h1) {
font-size: var(--font-size-h1, var(--font-size-7));
letter-spacing: -0.02em;
line-height: 1.15;
} */
/* :where(h2, .h2) {
font-size: var(--font-size-h2, var(--font-size-5, 2rem));
letter-spacing: -0.02em;
line-height: 1.2;
} */
/* :where(h3, .h3) {
font-size: var(--font-size-h3, var(--font-size-4, 1.5rem));
letter-spacing: -0.01em;
line-height: 1.167;
} */
/* :where(h4, .h4) {
font-size: var(--font-size-h4, var(--font-size-3, 1.25rem));
letter-spacing: -0.01em;
line-height: 1.235;
} */
/* :where(h5, .h5) {
font-size: var(--font-size-h5, var(--font-size-2, 1.1rem));
line-height: 1.334;
} */
/* :where(h6, .h6) {
font-size: var(--font-size-h6, var(--font-size-1, 1rem));
line-height: 1;
} */
:where(hgroup) {
& > :where(p, .p) {
margin: 0;
}
& > :where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
margin-block-end: 0.4em;
}
/* The second p element */
& > :where(p, .p):last-of-type:last-child:not(:first-child) {
color: oklch(from currentColor l c h / 75%);
font-size: var(--font-size-lg);
line-height: 1.6;
}
}
/** Overline */
:where(.overline, hgroup > :where(p, .p):first-of-type:first-child) {
color: light-dark(
oklch(from var(--text-color-2) calc(l * 1.25) c h),
oklch(from var(--text-color-2) calc(l * 0.75) c h)
);
font-size: var(--font-size-xs);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 2.5;
text-transform: uppercase;
}
:where(p, .p) {
text-wrap: pretty;
&.small {
font-size: var(--font-size-md);
}
&.large {
font-size: var(--font-size-lg);
}
}
/* Inline text elements */
:where(ins, u, abbr, dfn) {
text-decoration: underline;
text-underline-offset: 1px;
@supports (-moz-appearance: none) {
text-underline-offset: 2px;
}
}
:where(abbr, dfn) {
font-style: normal;
text-decoration: var(--color-9) underline dotted;
&[title] {
cursor: help;
text-underline-offset: 1px;
}
@supports (-moz-appearance: none) {
text-underline-offset: 2px;
}
}
:where(sup) {
font-size: 0.5em;
}
:where(del, ins) {
color: var(--color-9);
}
:where(small) {
font-size: max(0.5em, var(--font-size-0, 0.75rem));
max-inline-size: var(--size-content-1);
}
:where(cite) {
font-style: italic;
}
/* Blockquote */
:where(blockquote) {
border-inline-start-width: var(--border-size-3);
display: grid;
gap: var(--size-3);
padding-block: var(--size-3);
padding-inline: var(--size-4);
:first-child {
margin-block-start: 0;
}
:last-child {
margin-block-end: 0;
}
footer {
color: var(--text-color-2);
}
}
/* Code */
:where(pre) {
border-radius: 0.375rem;
direction: ltr;
font-size: 0.875rem;
line-height: 1.7142857;
margin-block: 1.7142857em;
max-inline-size: max-content;
min-inline-size: 0;
padding-block: 0.8571429em;
padding-inline: 1.1428571em;
white-space: pre;
writing-mode: lr;
}
:where(code, kbd, samp, pre) {
font-family: var(--font-mono);
}
:where(code) {
background-color: oklch(00 0 0 /18%);
border-radius: var(--border-size-3);
font-size: 0.9em;
padding: 0.2ex 0.5ex;
}
:where(kbd, var) {
background-color: var(--text-color-2);
border-color: var(--text-color-2);
border-radius: var(--border-radius, var(--radius-2));
border-width: var(--border-size-1);
color: var(--text-color-2-contrast);
padding: calc(var(--size-1) / 2) var(--size-1);
}
:where(:not(pre) code, kbd) {
word-break: break-word;
}
:where(:not(pre) code) {
border-radius: var(--border-radius, var(--radius-2));
padding: var(--size-1) var(--size-2);
writing-mode: lr;
}
:where(mark) {
border-radius: var(--border-radius, 0);
box-decoration-break: clone;
padding: calc(var(--size-1) / 2) var(--size-1);
vertical-align: baseline;
}
/* Misc */
:where(dt) {
font-weight: 700;
}
:where(figure) {
& > :where(figcaption) {
font-size: var(--font-size-1, 1rem);
text-wrap: balance;
}
}
}
/*** Has dependencies */
@layer components.has-deps {
:where([role="group"].button-group) {
--_border-radius: var(--button-border-radius);
border-radius: var(--_border-radius);
display: inline-flex;
min-width: max-content;
button {
border-radius: 0;
svg {
max-inline-size: 0.7lh;
}
&:focus-visible {
outline-offset: -4px;
}
& + & {
border-inline-width: 1px;
margin-inline-start: -1px;
}
&:first-of-type {
border-bottom-left-radius: var(--_border-radius);
border-top-left-radius: var(--_border-radius);
}
&:last-of-type {
border-bottom-right-radius: var(--_border-radius);
border-top-right-radius: var(--_border-radius);
}
/* Variants */
/*** Text & Elevated */
&:not(:where(.tonal, .filled, .outlined)) {
& + button {
border-inline-start: 1px solid var(--border-color);
}
}
&:where(.tonal, .filled) {
& + button {
border-inline-start-color: var(--color-7);
}
}
&:where(.tonal, .filled, .elevated) {
& + &[disabled] {
border-inline-start-color: color-mix(
in oklch,
var(--border-color) 90%,
white
);
}
}
&:where(.elevated) {
box-shadow: var(--shadow-1);
button {
&:not(:hover) {
box-shadow: none;
}
}
}
}
}
}
@layer components.has-deps {
:where(details) {
--_accordion-transition-time: 0.2s;
--_bg-color: transparent;
--_margin-inline: var(--size-1);
--_shadow: none;
background-color: var(--_bg-color);
box-shadow: var(--_shadow);
border-radius: var(--border-radius, 4px);
display: block;
margin-inline: var(--_margin-inline);
transition: all var(--_accordion-transition-time) ease-out;
/* Accordion animation */
/* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
@media (prefers-reduced-motion: no-preference) {
interpolate-size: allow-keywords;
}
&::details-content {
block-size: 0;
opacity: 0;
overflow-y: clip;
transition:
content-visibility var(--_accordion-transition-time) allow-discrete,
opacity var(--_accordion-transition-time),
block-size var(--_accordion-transition-time);
}
&[open]::details-content {
block-size: auto;
opacity: 1;
}
/***/
& > summary {
background-color: inherit;
cursor: pointer;
font-weight: 700;
padding-block: var(--size-3);
user-select: none;
}
/* Custom arrow */
/* summary {
align-items: center;
background-color: inherit;
cursor: pointer;
display: flex;
justify-content: space-between;
list-style: none;
padding-block: var(--size-3);
user-select: none;
&::marker,
&::-webkit-details-marker {
display: none;
}
svg {
transition: rotate 0.2s ease-out;
}
}
&[open] > summary svg {
rotate: 180deg;
} */
& > .content {
margin-block-start: 0;
padding-block: var(--size-2) var(--size-3);
}
& > .actions {
display: flex;
gap: var(--size-1);
justify-content: end;
margin-block-start: var(--size-3);
padding-block-end: var(--size-1);
padding-inline: var(--size-3) var(--size-1);
}
/* Variants */
&.card,
&.text {
--_bg-color: transparent;
--_margin-inline: var(--size-1);
}
&.elevated {
--_bg-color: var(--surface-elevated);
--_margin-inline: 0;
--_shadow: var(--shadow-2);
}
&.outlined {
--_bg-color: var(--surface-default);
--_margin-inline: 0;
border: 1px solid var(--border-color);
}
&.tonal {
--_bg-color: var(--surface-tonal);
--_margin-inline: 0;
}
&:where(.elevated, .outlined, .tonal) > * {
padding-inline: var(--size-3);
}
}
/* Accordion group */
:where(.card:has(details)) {
--_gutter-color: var(--border-color);
display: block;
& > .content {
margin-block: 0;
padding: 0;
}
&.card,
&.text {
&:not(.tonal, .outlined, .elevated) {
summary {
padding-inline: 0;
}
}
}
details {
--_margin-inline: 0;
border: 0;
box-shadow: none;
& > * {
padding-inline: var(--size-3);
}
/* Border between accordion items */
& + & {
summary {
border-radius: 0;
border-block-start: 1px solid var(--_gutter-color);
}
}
/* First item */
&:first-of-type {
border-start-start-radius: var(--border-radius, 0.25rem);
border-start-end-radius: var(--border-radius, 0.25rem);
summary {
border-start-start-radius: var(--border-radius, 0.25rem);
border-start-end-radius: var(--border-radius, 0.25rem);
}
}
/* Last item */
&:last-of-type {
border-end-start-radius: var(--border-radius, 0.25rem);
border-end-end-radius: var(--border-radius, 0.25rem);
summary {
border-end-start-radius: var(--border-radius, 0.25rem);
border-end-end-radius: var(--border-radius, 0.25rem);
}
}
}
}
}
@layer components.has-deps {
/*
Lists meant to be used stand-alone or as part of Select elements
Intended use-case:
- ul.list > li
- .select > .list > option
*/
:where(.list) {
--_bg-color: light-dark(var(--gray-1), var(--gray-15));
background-color: var(--_bg-color);
list-style: none;
padding: var(--size-2) 0;
@media (pointer: coarse) {
&,
* {
user-select: none;
}
}
/* Borders on all list items */
&.bordered {
:where(li + li, option + option) {
margin-block-start: var(--size-3);
&::before {
block-size: 1px;
border-block-start: 1px solid var(--border-color);
content: "";
display: block;
inline-size: 100%;
inset: calc(-1 * var(--size-2)) 0 auto 0;
position: absolute;
visibility: visible;
/* override select > option:before style */
}
}
}
/* Dense - less gaps and spacing */
&.dense {
:where(li, option) {
gap: var(--size-2);
min-block-size: var(--size-7);
padding: var(--size-1) var(--size-2);
&.border-top {
margin-block-start: var(--size-2);
&::before {
inset: calc(-1 * var(--size-1)) 0 auto 0;
}
}
/* Clickable list item */
&:has(> a, > button, > label) {
min-block-size: auto;
padding: 0;
}
& > :where(a, button, label) {
gap: var(--size-2);
min-block-size: var(--size-7);
padding: var(--size-1) var(--size-2);
}
/* Checkbox / Radio */
& > label {
.end {
padding-inline-end: 0.125rem;
}
}
/* Leading and trailing content */
.start,
.end {
.avatar {
max-inline-size: var(--size-6);
}
.icon-button,
svg {
max-inline-size: var(--size-4);
}
.checkbox,
.radio {
max-inline-size: var(--size-3);
}
}
}
}
/* Gutterless */
&.gutterless {
:where(li, option) {
padding-inline: 0;
& > :where(a, button, label) {
padding-inline: 0;
}
}
}
/* List item */
:where(li, option, [role="group"] > label) {
align-items: center;
background: var(--_bg-color) var(--ripple, none);
display: flex;
font-size: var(--font-size-sm);
gap: var(--size-3);
isolation: isolate;
min-block-size: 40px;
padding: var(--size-2) var(--size-3);
position: relative;
&::before {
display: none;
/* removing checkmark from option */
}
* {
font-size: inherit;
}
/* Clickable list item */
&:has(> a, > button, > label) {
background: transparent;
display: block;
min-block-size: auto;
padding: 0;
}
/* Select option */
&:where(option) {
align-items: center;
background-color: var(--_bg-color);
color: inherit;
cursor: pointer;
display: flex;
gap: var(--size-3);
inline-size: 100%;
margin: 0;
min-block-size: 40px;
padding: var(--size-2) var(--size-3);
text-align: start;
text-decoration: none;
z-index: 0;
&:hover {
background-color: light-dark(var(--gray-2), var(--gray-14));
}
&:checked {
background-color: oklch(from var(--md-primary) l c h / 30%);
}
}
& > a,
& > button,
& > label {
align-items: center;
background: var(--_bg-color) var(--ripple, none);
color: inherit;
cursor: pointer;
display: flex;
gap: var(--size-3);
inline-size: 100%;
margin: 0;
min-block-size: 40px;
outline-offset: -3px;
padding: var(--size-2) var(--size-3);
text-align: start;
text-decoration: none;
z-index: 0;
/*** Ripple effect */
background-position: center;
transition: background var(--button-ripple-duration);
&:where(:not(:active):hover) {
--ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%) center/15000%;
}
&:where(:hover:active) {
background-size: var(--button-ripple-size);
transition: background 0s;
}
&:hover {
background-color: light-dark(var(--gray-2), var(--gray-14));
}
/*** Remove ripple effect when trailing button is clicked */
&:has(.end:hover) {
&:where(:not(:active):hover) {
--ripple: none;
}
}
}
/* Checkbox / Radio / Switch */
& > label {
.end {
padding-inline-end: var(--size-1);
}
&:where(.checkbox, .radio) {
inline-size: 100%;
}
&.switch {
--_dot-size: 0.75rem;
--_track-height: var(--size-4);
--_track-width: 2.5rem;
}
}
/* Video */
&:has(video) {
padding: 0.75rem var(--size-3) 0.75rem 0;
}
/* Border between list items */
&.border-top {
margin-block-start: var(--size-3);
&::before {
block-size: 1px;
border-block-start: 1px solid var(--border-color);
content: "";
display: block;
inline-size: 100%;
inset: calc(-1 * var(--size-2)) 0 auto 0;
position: absolute;
}
}
/* Text */
.text {
flex: 1;
line-height: 1.6;
:where(h1, h2, h3, h4, h5, h6, p, span) {
color: inherit;
font-weight: 400;
}
p + p {
font-size: var(--font-size-xs);
}
}
/* Leading content */
.start {
align-self: center;
align-items: center;
display: grid;
z-index: 1;
&:has(svg) {
max-inline-size: var(--size-5);
}
svg {
padding-block-start: 0.125rem;
}
img {
aspect-ratio: 1;
inline-size: 56px;
object-fit: cover;
}
video {
aspect-ratio: 16/9;
block-size: 64px;
object-fit: cover;
}
}
/* Trailing content */
.end {
align-items: center;
display: flex;
font-size: var(--font-size-xs);
text-align: end;
z-index: 1;
&:not(:has(a, button, input)) {
pointer-events: none;
}
kbd {
background-color: transparent;
border: 0;
color: inherit;
opacity: 0.6;
}
svg {
max-inline-size: var(--size-5);
inline-size: 100%;
}
}
/* Inset */
&.inset {
.text {
padding-inline-start: calc(var(--size-5) + var(--size-3));
}
/* Safety measure so it won't look bad if there for some reason should exist a leading element inside. */
.start {
display: none;
}
}
}
}
}
@layer components.has-deps {
:where(.alert) {
--_bg-color: var(--surface-tonal);
--_border-color: var(--surface-tonal);
--_color: var(--text-color-1);
&.outlined {
--_bg-color: var(--surface-default);
--_border-color: var(--border-color);
--_color: var(--text-color-1);
}
background-color: var(--_bg-color);
border: 1px solid var(--_border-color);
border-radius: var(--border-radius);
color: var(--_color);
padding: var(--size-3);
& > .content {
display: grid;
gap: var(--size-2);
font-size: var(--font-size-sm);
h1,
h2,
h3,
h4,
h5,
h6 {
color: inherit;
font-size: var(--font-size-md);
font-weight: 600;
* {
font-size: inherit;
}
}
}
/* Colors */
&.error,
&.ok,
&.warning {
--_bg-color: var(--color-4);
--_border-color: var(--color-9);
--_color: var(--color-15);
&.outlined {
--_bg-color: var(--surface-default);
--_border-color: var(--color-9);
--_color: light-dark(var(--color-15), var(--color-1));
}
svg {
margin-block-start: 0.15rem;
stroke: var(--color-9);
}
}
/* Links
* Can't make sure contrast will be acceptable (yet) so we use the current text color instead.
*/
&:not(.outlined) {
a[href] {
color: inherit;
&:hover {
color: var(--md-primary);
}
}
}
/* Icon */
&:has(svg) {
display: grid;
gap: var(--size-3);
grid-template-columns: var(--size-4) 1fr;
svg {
margin-block-start: 0.15rem;
stroke: currentColor;
}
}
}
}
@layer components.has-deps {
:where(dialog) {
margin-block-start: 15%; /* vertical alignment */
padding-block: 0;
pointer-events: none;
&::backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
@media (prefers-reduced-motion: reduce) {
backdrop-filter: none;
}
}
&:not([open]) {
display: none;
}
&[open] {
pointer-events: all;
}
.actions {
justify-content: end;
padding-inline: var(--size-3) var(--size-1);
}
/* Animation */
/* There's no close animation, intentionally */
opacity: 0;
&[open] {
opacity: 1;
transition:
display 0.2s allow-discrete,
margin-block-start 0.3s var(--ease-1),
overlay 0.2s allow-discrete,
opacity 0.2s var(--ease-out-1);
@starting-style {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
margin-block-start: 17%;
&[open] {
margin-block-start: 15%;
@starting-style {
margin-block-start: 17%;
}
}
}
}
:where(html:has(dialog[open])) {
overflow: hidden;
}
}
@layer components.has-deps {
:where(.snackbar) {
align-items: center;
/* Inverse surface-filled */
background-color: light-dark(var(--gray-15), var(--gray-2));
border-radius: var(--border-radius);
box-shadow: var(--shadow-2);
color: var(--text-color-1-contrast);
display: flex;
font-size: var(--font-size-sm);
gap: var(--size-3);
inset-block: auto var(--size-3);
inset-inline: var(--size-3) auto;
justify-content: space-between;
min-inline-size: min(100%, 37ch);
padding: var(--size-2) var(--size-3);
position: fixed;
inline-size: calc(100% - var(--size-6, 1.75rem));
z-index: 100;
&::backdrop {
display: none;
}
* {
word-break: break-word;
}
/* Global positioning (in relation to the window) */
/*** Default (end-start) */
inset-block: auto var(--size-3);
inset-inline: 50% 0;
translate: -50% 0;
&.start-start,
&.start-center,
&.start-end {
inset-block: var(--size-3) auto;
}
/* TODO use @custom-media instead? */
@container (width > 480px) {
/* Default (end-start) */
inset-block: auto var(--size-7, 2rem);
inset-inline: var(--size-7, 2rem) auto;
translate: revert;
inline-size: fit-content;
&.end-start,
&.end-end,
&.start-start,
&.start-end {
translate: revert;
}
&.start-start {
inset-block: var(--size-7, 2rem) auto;
inset-inline: var(--size-7, 2rem) auto;
}
&.start-center {
inset-block: var(--size-7, 2rem) auto;
inset-inline: 50% 0;
translate: -50% 0;
}
&.start-end {
inset-block: var(--size-7, 2rem) auto;
inset-inline: auto var(--size-7, 2rem);
}
&.end-start {
inset-block-end: var(--size-7, 2rem);
inset-inline: var(--size-7, 2rem) auto;
}
&.end-center {
inset-block: auto var(--size-7, 2rem);
inset-inline: 50% 0;
translate: -50% 0;
}
&.end-end {
inset-block: auto var(--size-7, 2rem);
inset-inline: auto var(--size-7, 2rem);
}
}
/* Absolute positioning */
&.absolute {
position: absolute;
}
/* Actions */
.actions {
align-items: center;
display: flex;
flex-shrink: 0;
gap: var(--size-3);
padding-inline: 0;
button {
/* Inverse hover and active backgrounds */
&:where(:not([disabled])) {
&:where(:not(:active):hover) {
--_bg-color: light-dark(
color-mix(in oklch, white 40%, black),
color-mix(in oklch, white 85%, black)
);
}
&:where(:hover:active) {
--_bg-color: light-dark(
color-mix(in oklch, white 45%, black),
color-mix(in oklch, white 80%, black)
);
}
}
}
button:not(:has(svg)) {
border-radius: var(--border-radius);
font-size: inherit;
max-block-size: var(--size-6, 1.5rem);
padding: 1ex;
}
button:has(svg) {
color: inherit;
max-inline-size: var(--size-6, 1.75rem);
margin: var(--size-00);
padding: var(--size-1);
}
}
/* Animations */
opacity: 0;
transition:
display 0.075s allow-discrete,
overlay 0.075s allow-discrete,
opacity 0.075s var(--ease-out-1);
&:popover-open,
&:popover-open::backdrop,
&.visible {
opacity: 1;
transition:
display 0.25s allow-discrete,
overlay 0.25s allow-discrete,
opacity 0.25s var(--ease-out-1);
@starting-style {
opacity: 0;
}
}
}
}
@layer components.has-deps {
/* Common styling for checkbox, radio and switch groups */
:where(fieldset.field-group) {
border: 0;
border-radius: 0;
gap: 0;
padding: 0;
z-index: 1;
legend {
color: var(--text-color-2);
padding: 0 1ex 0 0;
}
/* Disabled */
&[disabled] {
cursor: not-allowed;
opacity: 0.64;
user-select: none;
input {
cursor: not-allowed;
}
}
/* Validation */
&.error {
legend,
.supporting-text {
color: var(--color-9);
}
}
/* Required */
&:has([required]) {
&:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
legend {
position: relative;
&::after {
color: var(--red);
content: "*";
inset: 0 -0.25ex auto auto;
position: absolute;
}
}
}
}
:where(.radio, .checkbox, .switch) .label:after {
display: none;
}
/* Supporting text */
.supporting-text {
color: var(--text-color-2);
font-size: var(--font-size-xs);
line-height: 1.5;
z-index: 1;
}
/* Fields */
.fields {
display: flex;
flex-direction: column;
gap: var(--size-2);
* ~ & {
padding: var(--size-2) 0;
}
}
:last-child {
padding-block-end: 0;
}
/* Directions */
&.row {
.fields {
flex-direction: row;
}
}
}
}
@layer components.has-deps {
/*
- Common styling for input, textarea and select
- Form related styles such as: label, supporting text, error handling
*/
:where(.field) {
--_accent-color: var(--primary);
--_bg-color: var(--surface-default);
--_border-color: var(--field-border-color);
--_field-padding-block: 0.75rem;
--_field-padding-inline: var(--size-2);
--_filled-border-color: var(--text-color-1);
--_height: var(--field-size);
--_label-color: var(--text-color-2);
--_supporting-text-color: var(--text-color-2);
contain: layout;
display: inline-grid;
position: relative;
/* Input/Select base */
& input,
& textarea,
& select {
background-color: var(--_bg-color);
block-size: var(--_height);
border-radius: var(--field-border-radius);
border: var(--field-border-width) solid var(--_border-color);
color: var(--text-color-1);
font-family: var(--font-sans);
font-size: var(--font-size-1);
grid-column: 1/-1;
grid-row: 1;
inline-size: 100%;
line-height: var(--font-lineheight-1);
min-inline-size: 0;
padding: var(--_field-padding-block) var(--_field-padding-inline);
@media (prefers-reduced-motion: no-preference) {
transition:
border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
padding-block 0.2s var(--ease-3);
}
}
/* Required/Invalid */
&:has( :not(:placeholder-shown):invalid,
:where( :placeholder-shown,
option[value=""]:not(:checked),
option:checked:not([value=""])):required) {
.label:after {
color: var(--red);
content: "*";
margin: -0.25em auto auto 0.25em;
}
}
/* File */
&:has(input[type="file"]) {
cursor: pointer;
input {
align-self: flex-start;
block-size: var(--_height);
box-shadow: none;
color: var(--text-color-1);
cursor: inherit;
max-inline-size: 100%;
padding: 0;
transition: font-size 0.2s var(--ease-3);
&::-webkit-file-upload-button,
&::file-selector-button {
background-color: var(--surface-tonal);
border: none;
block-size: calc(100% - var(--size-2) * 2);
border-radius: var(--field-border-radius);
cursor: pointer;
margin-inline-end: 1ex;
margin-block-start: var(--size-2);
margin-inline-start: var(--size-2);
}
}
/* Variants */
&.filled {
input {
&::-webkit-file-upload-button,
&::file-selector-button {
background-color: var(--surface-default);
block-size: calc(100% - var(--size-2) * 2);
border-radius: var(--field-border-radius);
cursor: pointer;
margin-block-start: var(--size-2);
}
}
}
/* Sizes */
&.small {
input {
font-size: var(--font-size-sm);
&::-webkit-file-upload-button,
&::file-selector-button {
block-size: calc(100% - var(--size-2));
margin-block-start: var(--size-1);
}
}
}
}
/* Autosuggest */
&:has(input[list]) {
.label {
/* Make sure chevron is visible */
inline-size: calc(100% - var(--size-6));
}
}
/* Select */
&:has(select) {
.label {
/* Make sure chevron is visible */
inline-size: calc(100% - var(--size-6));
}
}
/* Experimental Select */
&:has(select button) {
select {
padding: 0;
button {
outline: 0;
padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
}
}
}
/* Non-experimental Select */
&:has(select):not(:has(button)) {
select {
padding: var(--_field-padding-block) var(--size-8) var(--_field-padding-block) var(--_field-padding-inline);
}
}
/* Input - color */
&:has(input[type="color"]) {
input {
appearance: none;
background: none;
block-size: var(--_height);
overflow: hidden;
padding: 0;
&::-webkit-color-swatch {
border: none;
}
&::-webkit-color-swatch-wrapper {
padding: 0;
}
}
.label {
border: 1px solid var(--field-border-color);
inline-size: fit-content;
margin-inline-start: var(--size-2);
}
}
/* Textarea */
&:has(textarea) {
.label {
align-self: start;
margin-block-start: var(--_field-padding-block);
}
}
/*
* Variant: Outlined
*/
&:not(.filled) {
/* Element states */
&:hover {
&:not(.error) {
:where(input, textarea, select) {
--_border-color: var(--text-color-1);
}
}
}
}
&:not(.filled):focus-within {
& input,
& textarea,
& select {
border-color: var(--_accent-color);
outline-offset: -2px;
outline: 2px solid var(--_accent-color);
}
}
/* Label */
.label {
align-self: center;
background-color: var(--_bg-color);
border-radius: var(--field-border-radius);
color: var(--_label-color);
border-radius: var(--radius-1);
display: inline-flex;
font-size: var(--font-size-md);
grid-column: 1/-1;
grid-row: 1;
inline-size: calc(100% - (var(--field-border-width) * 2));
margin-inline-start: var(--field-border-width);
padding-inline: var(--_field-padding-inline);
pointer-events: none;
z-index: 1;
@media (prefers-reduced-motion: no-preference) {
transition:
border-color 0.2s var(--ease-3),
font-size 0.2s var(--ease-3),
inline-size 0.05s var(--ease-3),
margin 0.2s var(--ease-3),
padding-inline 0.2s var(--ease-3);
}
}
/*
* Label transitions
* Triggered by:
* - focus
* - filled form fields (except color inputs)
* - non-empty select options
*/
&:focus-within,
&:has(:where(input:not([type="color"]), textarea):not(:placeholder-shown)),
&:has(option[value=""]:not(:checked)),
&:has(option:checked:not([value=""])) {
.label {
border-color: transparent;
color: var(--_accent-color);
font-size: 0.75rem;
inline-size: max-content;
letter-spacing: 0.15px;
line-height: 1.15;
margin-block-start: -2.7rem;
margin-inline-start: var(--_field-padding-inline);
padding-inline: 0.125rem;
}
/* Neutral label color reset */
&:not(:focus-within):not(.error) {
.label {
color: var(--text-color-2);
}
}
&:has(textarea) {
.label {
margin-block-start: -0.35rem;
}
&.small {
.label {
align-self: start;
margin-block-start: var(--_field-padding-block);
}
}
}
}
/* Supporting text */
.supporting-text {
color: var(--_supporting-text-color);
font-size: var(--font-size-xs);
grid-row: 3;
line-height: 1.5;
margin-inline-start: var(--field-border-width);
padding-inline: var(--_field-padding-inline);
z-index: 1;
}
/* Auto-fit */
&.auto-fit {
inline-size: auto;
:where(& input, & textarea) {
field-sizing: content;
}
}
/* Validation */
&.error {
--_accent-color: var(--color-9);
--_border-color: var(--color-9);
--_filled-border-color: var(--color-9);
--_label-color: var(--color-9);
--_supporting-text-color: var(--color-9);
}
/*
* Variant: Filled
*/
&.filled {
--_bg-color: var(--surface-tonal);
*:focus-visible {
outline: 0;
}
/* Base style */
& input,
& textarea,
& select {
border-block-end-color: var(--_filled-border-color);
border-block-start-color: transparent;
border-inline-color: transparent;
border-radius: 0;
}
& input[type="color"] {
border-inline: none;
}
/* Bottom line */
&::before {
background-color: var(--_filled-border-color);
block-size: calc(var(--field-border-width) + 1px);
content: "";
inline-size: 100%;
margin-block-end: calc(-1 * (var(--field-border-width) * 2));
transform: scaleX(0);
translate: 0 calc(-1 * (var(--field-border-width) * 2));
z-index: 1;
@media (prefers-reduced-motion: no-preference) {
transition:
transform 0.3s var(--ease-3),
translate 0.2s var(--ease-3);
}
}
/* Label */
.label {
background-color: var(--_bg-color);
}
&:not(:has([disabled], :has(input[type="color"]))) {
/* Hover */
&:hover {
--_bg-color: light-dark(oklch(from var(--surface-tonal) calc(l * 0.93) c h),
oklch(from var(--surface-tonal) calc(l * 1.1) c h));
}
}
/*
* Label transitions
* Triggered by:
* - focus
* - filled form fields (except color inputs)
* - non-empty select options
*/
&:has(.label) {
&:focus-within,
&:has( :where(input:not(:where([type="color"])), textarea):not( :placeholder-shown)),
&:has(option[value=""]:not(:checked)),
&:has(option:checked:not([value=""])) {
:where(input, textarea) {
padding-block: calc(var(--_field-padding-block) * 1.7) calc(var(--_field-padding-block) * 0.3);
}
select > button,
select:not(:has(button)) {
padding-block: calc(var(--_field-padding-block) * 1.7) calc(var(--_field-padding-block) * 0.3);
}
.label {
margin-block-start: calc(-1 * var(--size-5));
margin-inline-start: calc(var(--_field-padding-inline) / 2);
padding-inline: calc(var(--_field-padding-inline) / 2);
}
&:has(textarea) {
.label {
margin-block-start: var(--size-1);
}
}
}
}
/* Element states */
&:hover {
&::before {
transform: scaleX(1);
}
}
&:focus-within {
& input,
& textarea,
& select {
border-block-end-color: var(--_accent-color);
}
&::before {
background-color: var(--_accent-color);
transform: scaleX(1) translateX(0px);
}
}
}
/* Disabled */
&:where(:has([disabled])) {
&::before {
display: none;
}
:where(input, textarea, select) {
cursor: not-allowed;
opacity: 0.7;
* {
pointer-events: none;
}
}
}
/* Read-only */
&:where(:has([readonly])) {
&::before {
display: none;
}
:where(input, textarea, select) {
cursor: not-allowed;
* {
pointer-events: none;
}
}
}
/* Sizes */
&.small {
--_field-padding-block: var(--size-2);
--_height: var(--field-size-small);
&:has(input[type="color"]) {
.label {
line-height: 1.5;
}
}
&:has(textarea) {
.label {
align-self: center;
margin-block-start: unset;
}
}
/*
* Label transitions
* Triggered by:
* - focus
* - filled form fields (except color inputs)
* - non-empty select options
*/
&:focus-within,
&:has( :where(input:not([type="color"]), textarea):not(:placeholder-shown)),
&:has(option[value=""]:not(:checked)),
&:has(option:checked:not([value=""])) {
.label {
margin-block-start: -2.2rem;
margin-inline-start: var(--size-1);
padding-inline: var(--size-1);
}
&:not(.filled):has(textarea) {
.label {
margin-block-start: -0.35rem;
}
}
}
}
}
}
@layer components.has-deps {
:where(.field > select) {
position: relative;
/* Default arrow */
&::picker-icon {
block-size: 0;
border-block-start: 5px solid;
border-inline: 5px solid transparent;
color: currentColor;
content: "";
inline-size: 0;
inset: 50% var(--size-3) auto auto;
pointer-events: none;
position: absolute;
translate: 0 -50%;
}
&:open {
&::picker-icon {
rotate: 180deg;
}
}
/* Select popover */
&::picker(select) {
/* Animation on-stage styles */
border: 0;
box-shadow: var(--shadow-2);
opacity: 1;
padding: 0;
scale: 1;
/* Animation starting styles */
@starting-style {
opacity: 0;
transform: scale(0.9);
}
@media (prefers-reduced-motion: no-preference) {
transition:
display 0.2s allow-discrete,
opacity 0.2s var(--ease-3),
overlay 0.2s allow-discrete,
scale 0.2s var(--ease-3);
}
}
/* Animation off-stage styles */
&:not(:open)::picker(select) {
opacity: 0;
scale: 0.9;
}
button {
background-color: transparent;
display: flex;
inline-size: 100%;
margin: 0;
position: relative;
selectedcontent {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.list {
/* Groups */
[role="group"] {
label {
background-color: light-dark(var(--gray-3), var(--gray-13));
color: light-dark(
oklch(from var(--text-color-1) calc(l * 0.75) c h),
oklch(from var(--text-color-1) calc(l * 1.25) c h)
);
font-weight: 500;
overflow: hidden;
padding-inline: var(--size-2);
text-overflow: ellipsis;
white-space: nowrap;
}
&:not(:first-child),
option:first-of-type {
margin-block-start: var(--size-2);
}
option:last-of-type,
&:last-child {
option:last-of-type {
margin-block-end: 0;
}
}
}
/* Option */
option {
/* Checkmark */
/* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
&::check {
display: none;
}
&::checkmark {
display: none;
}
&::before {
display: none;
}
&:focus-visible {
outline-offset: -1px;
}
}
}
}
:where(.field:has(> select)) {
/* Size */
&.small {
button {
padding-block: var(--size-1);
padding-inline: var(--size-2) var(--size-7);
&::after {
inset-inline-end: var(--size-2);
}
}
}
/*
* Non-experimental Select
*
* Hack to get the arrow working. Pseudo elements aren't allowed on the `