@layer reset, base, components, modules, utilities, native, platform; @layer reset, base, components, modules, utilities, native, platform; :root { /* Insets - The mobile apps may inject their own custom insets based on native elements on screen, like a floating navigation */ --custom-safe-inset-top: var(--injected-safe-inset-top, env(safe-area-inset-top, 0px)); --custom-safe-inset-right: var(--injected-safe-inset-right, env(safe-area-inset-right, 0px)); --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px)); --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px)); /* Spacing */ --inline-space: 1ch; --inline-space-half: calc(var(--inline-space) / 2); --inline-space-double: calc(var(--inline-space) * 2); --block-space: 1rem; --block-space-half: calc(var(--block-space) / 2); --block-space-double: calc(var(--block-space) * 2); /* Text */ --font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-serif: ui-serif, serif; --font-mono: ui-monospace, monospace; --text-xx-small: 0.55rem; --text-x-small: 0.75rem; --text-small: 0.85rem; --text-normal: 1rem; --text-medium: 1.1rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; @media (max-width: 639px) { --text-xx-small: 0.65rem; --text-x-small: 0.85rem; --text-small: 0.95rem; --text-normal: 1.1rem; --text-medium: 1.2rem; --text-large: 1.5rem; --text-x-large: 1.8rem; --text-xx-large: 2.5rem; } /* Borders */ --border: 1px solid var(--color-ink-lighter); /* Shadows */ --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%), 0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%); /* Components */ --btn-size: 2.65em; --footer-height: 2.65rem; --tray-size: clamp(12rem, 25dvw, 24rem); /* Focus rings for keyboard navigation */ --focus-ring-color: var(--color-link); --focus-ring-offset: 1px; --focus-ring-size: 2px; --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color); /* Dialogs */ --dialog-duration: 150ms; /* Easing functions from https://easingwizard.com/ */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1); --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1); @media (max-width: 799px) { --tray-size: var(--footer-height); } /* Layout */ --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3)); --main-width: 1400px; /* Z-index */ --z-events-column-header: 1; --z-events-day-header: 3; --z-popup: 10; --z-nav: 20; --z-flash: 30; --z-tooltip: 40; --z-bar: 50; --z-tray: 51; --z-welcome: 52; --z-nav-open: 100; /* OKLCH colors: Fixed */ --lch-black: 0% 0 0; --lch-white: 100% 0 0; /* OKLCH colors: Light mode */ --lch-canvas: var(--lch-white); --lch-ink-inverted: var(--lch-white); --lch-ink-darkest: 26% 0.05 264; --lch-ink-darker: 40% 0.026 262; --lch-ink-dark: 56% 0.014 260; --lch-ink-medium: 66% 0.008 258; --lch-ink-light: 84% 0.005 256; --lch-ink-lighter: 92% 0.003 254; --lch-ink-lightest: 96% 0.002 252; --lch-uncolor-darkest: 26% 0.018 40; --lch-uncolor-darker: 40.04% 0.0376 50.06; --lch-uncolor-dark: 57.09% 0.0676 60.5; --lch-uncolor-medium: 66% 0.0944 71.46; --lch-uncolor-light: 83.97% 0.0457 80.84; --lch-uncolor-lighter: 92% 0.014 90; --lch-uncolor-lightest: 96% 0.012 100; --lch-red-darkest: 26% 0.105 34; --lch-red-darker: 40% 0.154 36; --lch-red-dark: 59% 0.19 38; --lch-red-medium: 66% 0.204 40; --lch-red-light: 84.08% 0.0837 41.96; --lch-red-lighter: 92% 0.03 44; --lch-red-lightest: 96% 0.013 46; --lch-yellow-darkest: 26% 0.0729 40; --lch-yellow-darker: 40% 0.12 50; --lch-yellow-dark: 58% 0.156 60; --lch-yellow-medium: 74% 0.184 70; --lch-yellow-light: 84% 0.12 80; --lch-yellow-lighter: 92% 0.076 90; --lch-yellow-lightest: 96% 0.034 100; --lch-lime-darkest: 26% 0.064 109; --lch-lime-darker: 40% 0.101 110; --lch-lime-dark: 56.5% 0.142 111; --lch-lime-medium: 68% 0.176 113.11; --lch-lime-light: 83.92% 0.0927 113.6; --lch-lime-lighter: 92% 0.046 114; --lch-lime-lightest: 96% 0.034 115; --lch-green-darkest: 26% 0.071 149; --lch-green-darker: 40% 0.12 148; --lch-green-dark: 55% 0.162 147; --lch-green-medium: 66% 0.208 146; --lch-green-light: 83.92% 0.0772 145.06; --lch-green-lighter: 92% 0.044 144; --lch-green-lightest: 96% 0.022 143; --lch-aqua-darkest: 26% 0.059 214; --lch-aqua-darker: 40% 0.093 212; --lch-aqua-dark: 55.5% 0.122 210; --lch-aqua-medium: 66% 0.152 208; --lch-aqua-light: 83.88% 0.0555 206.02; --lch-aqua-lighter: 92% 0.02 204; --lch-aqua-lightest: 96% 0.012 202; --lch-blue-darkest: 26% 0.126 264; --lch-blue-darker: 40% 0.166 262; --lch-blue-dark: 57.02% 0.1895 260.46; --lch-blue-medium: 66% 0.196 257.82; --lch-blue-light: 84.04% 0.0719 255.29; --lch-blue-lighter: 92% 0.026 254; --lch-blue-lightest: 96% 0.016 252; --lch-violet-darkest: 26% 0.148 292; --lch-violet-darker: 40% 0.2 290; --lch-violet-dark: 58% 0.216 287.6; --lch-violet-medium: 66% 0.206 285.52; --lch-violet-light: 84.08% 0.0791 283.47; --lch-violet-lighter: 92% 0.03 282; --lch-violet-lightest: 96% 0.015 280; --lch-purple-darkest: 26% 0.131 314; --lch-purple-darker: 40% 0.178 312; --lch-purple-dark: 58% 0.21 310; --lch-purple-medium: 66% 0.258 308; --lch-purple-light: 84.09% 0.0778 305.77; --lch-purple-lighter: 92% 0.03 304; --lch-purple-lightest: 96% 0.019 302; --lch-pink-darkest: 26% 0.12 348; --lch-pink-darker: 40% 0.16 346; --lch-pink-dark: 59% 0.188 344; --lch-pink-medium: 71.8% 0.2008 342; --lch-pink-light: 84.04% 0.0737 340; --lch-pink-lighter: 92% 0.03 338; --lch-pink-lightest: 96% 0.02 336; /* Colors: Named */ --color-black: oklch(var(--lch-black)); --color-white: oklch(var(--lch-white)); --color-ink: oklch(var(--lch-ink-darkest)); --color-ink-darkest: oklch(var(--lch-ink-darkest)); --color-ink-darker: oklch(var(--lch-ink-darker)); --color-ink-dark: oklch(var(--lch-ink-dark)); --color-ink-medium: oklch(var(--lch-ink-medium)); --color-ink-light: oklch(var(--lch-ink-light)); --color-ink-lighter: oklch(var(--lch-ink-lighter)); --color-ink-lightest: oklch(var(--lch-ink-lightest)); --color-ink-inverted: oklch(var(--lch-ink-inverted)); /* Colors: Abstractions */ --color-canvas: oklch(var(--lch-canvas)); --color-negative: oklch(var(--lch-red-dark)); --color-positive: oklch(var(--lch-green-dark)); --color-link: oklch(var(--lch-blue-dark)); --color-selected-light: oklch(var(--lch-blue-lightest)); --color-selected: oklch(var(--lch-blue-lighter)); --color-selected-dark: oklch(var(--lch-blue-light)); --color-highlight: oklch(var(--lch-yellow-lighter)); --color-marker: oklch(var(--lch-red-medium)); --color-terminal-bg: oklch(98% 0.002 252); --color-terminal-text: var(--color-ink); --color-terminal-text-light: var(--color-ink-lighter); --color-golden: oklch(89.1% 0.178 95.7); --color-maybe: oklch(var(--lch-blue-medium)); /* Colors: Cards */ --color-card-default: oklch(var(--lch-blue-dark)); --color-card-complete: var(--color-ink-darker); --color-card-1: oklch(var(--lch-ink-medium)); --color-card-2: oklch(var(--lch-uncolor-medium)); --color-card-3: oklch(var(--lch-yellow-medium)); --color-card-4: oklch(var(--lch-lime-medium)); --color-card-5: oklch(var(--lch-aqua-medium)); --color-card-6: oklch(var(--lch-violet-medium)); --color-card-7: oklch(var(--lch-purple-medium)); --color-card-8: oklch(var(--lch-pink-medium)); /* Colors: Highlighter */ --highlight-1: rgb(136, 118, 38); --highlight-2: rgb(185, 94, 6); --highlight-3: rgb(207, 0, 0); --highlight-4: rgb(216, 28, 170); --highlight-5: rgb(144, 19, 254); --highlight-6: rgb(5, 98, 185); --highlight-7: rgb(17, 138, 15); --highlight-8: rgb(148, 82, 22); --highlight-9: rgb(102, 102, 102); --highlight-bg-1: rgba(229, 223, 6, 0.3); --highlight-bg-2: rgba(255, 185, 87, 0.3); --highlight-bg-3: rgba(255, 118, 118, 0.3); --highlight-bg-4: rgba(248, 137, 216, 0.3); --highlight-bg-5: rgba(190, 165, 255, 0.3); --highlight-bg-6: rgba(124, 192, 252, 0.3); --highlight-bg-7: rgba(140, 255, 129, 0.3); --highlight-bg-8: rgba(221, 170, 123, 0.3); --highlight-bg-9: rgba(200, 200, 200, 0.3); /* Colors: Syntax highlighting */ --color-code-token__att: oklch(var(--lch-blue-dark)); --color-code-token__comment: oklch(var(--lch-ink-medium)); --color-code-token__function: oklch(var(--lch-purple-dark)); --color-code-token__operator: oklch(var(--lch-red-dark)); --color-code-token__property: oklch(var(--lch-purple-dark)); --color-code-token__punctuation: oklch(var(--lch-ink-dark)); --color-code-token__selector: oklch(var(--lch-green-dark)); --color-code-token__variable: oklch(var(--lch-red-dark)); /* Colors: Generating gradient */ --color-gradient-1: oklch(var(--lch-violet-lighter)); --color-gradient-2: oklch(var(--lch-pink-lighter)); --color-gradient-3: oklch(var(--lch-purple-lighter)); --color-gradient-4: var(--color-canvas); } /* Dark mode - explicit theme choice overrides system preference */ html[data-theme="dark"] { --lch-canvas: 20% 0.0195 232.58; --lch-ink-inverted: var(--lch-black); --lch-ink-darkest: 96.02% 0.0034 260; --lch-ink-darker: 86% 0.0061 260; --lch-ink-dark: 73.97% 0.009 260; --lch-ink-medium: 62% 0.0122 260; --lch-ink-light: 40% 0.0148 260; --lch-ink-lighter: 30% 0.0178 260; --lch-ink-lightest: 25% 0.0204 260; --lch-uncolor-darkest: 96.09% 0.0076 100; --lch-uncolor-darker: 86% 0.021 90; --lch-uncolor-dark: 73.93% 0.041 80; --lch-uncolor-medium: 62% 0.0552 70; --lch-uncolor-light: 40% 0.0387 60; --lch-uncolor-lighter: 30% 0.012 50; --lch-uncolor-lightest: 25% 0.0017 40; --lch-red-darkest: 95.85% 0.0218 46; --lch-red-darker: 86% 0.086 44; --lch-red-dark: 73.95% 0.139 42; --lch-red-medium: 62% 0.154 40; --lch-red-light: 40% 0.088 38; --lch-red-lighter: 30% 0.032 36; --lch-red-lightest: 25% 0.011 34; --lch-yellow-darkest: 96% 0.056 100; --lch-yellow-darker: 86% 0.103 90; --lch-yellow-dark: 74.06% 0.136 80; --lch-yellow-medium: 62.1% 0.146 70; --lch-yellow-light: 40% 0.0736 60; --lch-yellow-lighter: 30% 0.026 50; --lch-yellow-lightest: 25% 0.01 40; --lch-lime-darkest: 96.04% 0.066 115; --lch-lime-darker: 86% 0.098 114; --lch-lime-dark: 73.97% 0.121 113; --lch-lime-medium: 62% 0.128 112; --lch-lime-light: 40% 0.0637 111; --lch-lime-lighter: 30% 0.024 110; --lch-lime-lightest: 25% 0.012 109; --lch-green-darkest: 96.12% 0.035 143; --lch-green-darker: 86% 0.082 144; --lch-green-dark: 73.99% 0.117 145; --lch-green-medium: 62% 0.1261 146; --lch-green-light: 40% 0.065 147; --lch-green-lighter: 30% 0.03 148; --lch-green-lightest: 25% 0.018 149; --lch-aqua-darkest: 96.15% 0.0244 202; --lch-aqua-darker: 86% 0.06 204; --lch-aqua-dark: 73.92% 0.095 206; --lch-aqua-medium: 62% 0.106 208; --lch-aqua-light: 40% 0.0594 210; --lch-aqua-lighter: 30% 0.028 212; --lch-aqua-lightest: 25% 0.017 214; --lch-blue-darkest: 95.93% 0.0217 252; --lch-blue-darker: 86% 0.068 254; --lch-blue-dark: 74% 0.1293 256; --lch-blue-medium: 62% 0.159 258; --lch-blue-light: 40% 0.094 260; --lch-blue-lighter: 30% 0.0452 262; --lch-blue-lightest: 25% 0.0318 264; --lch-violet-darkest: 95.97% 0.019 280; --lch-violet-darker: 86% 0.068 282; --lch-violet-dark: 74.08% 0.142 284; --lch-violet-medium: 62% 0.184 286; --lch-violet-light: 40% 0.108 288; --lch-violet-lighter: 30% 0.048 290; --lch-violet-lightest: 25% 0.025 292; --lch-purple-darkest: 95.99% 0.0217 302; --lch-purple-darker: 86% 0.068 304; --lch-purple-dark: 73.98% 0.141 306; --lch-purple-medium: 62% 0.177 308; --lch-purple-light: 40% 0.099 310; --lch-purple-lighter: 30% 0.04 312; --lch-purple-lightest: 25% 0.017 314; --lch-pink-darkest: 95.84% 0.0308 336; --lch-pink-darker: 86% 0.074 338; --lch-pink-dark: 74.04% 0.1294 340; --lch-pink-medium: 62% 0.166 342; --lch-pink-light: 40% 0.085 344; --lch-pink-lighter: 30% 0.03 346; --lch-pink-lightest: 25% 0.011 348; --color-terminal-bg: var(--color-canvas); --color-terminal-text-light: oklch(var(--lch-green-dark)); --color-golden: oklch(var(--lch-blue-medium)); --color-highlight: oklch(var(--lch-blue-lighter)); --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42), 0 0.2em 1.6em -0.8em oklch(var(--lch-black) / 0.6), 0 0.4em 2.4em -1em oklch(var(--lch-black) / 0.7), 0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8), 0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9), 0 1.2em 1.6em -2em oklch(var(--lch-black) / 1); } /* Fallback to system preference when no explicit theme is set */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --lch-canvas: 20% 0.0195 232.58; --lch-ink-inverted: var(--lch-black); --lch-ink-darkest: 96.02% 0.0034 260; --lch-ink-darker: 86% 0.0061 260; --lch-ink-dark: 73.97% 0.009 260; --lch-ink-medium: 62% 0.0122 260; --lch-ink-light: 40% 0.0148 260; --lch-ink-lighter: 30% 0.0178 260; --lch-ink-lightest: 25% 0.0204 260; --lch-uncolor-darkest: 96.09% 0.0076 100; --lch-uncolor-darker: 86% 0.021 90; --lch-uncolor-dark: 73.93% 0.041 80; --lch-uncolor-medium: 62% 0.0552 70; --lch-uncolor-light: 40% 0.0387 60; --lch-uncolor-lighter: 30% 0.012 50; --lch-uncolor-lightest: 25% 0.0017 40; --lch-red-darkest: 95.85% 0.0218 46; --lch-red-darker: 86% 0.086 44; --lch-red-dark: 73.95% 0.139 42; --lch-red-medium: 62% 0.154 40; --lch-red-light: 40% 0.088 38; --lch-red-lighter: 30% 0.032 36; --lch-red-lightest: 25% 0.011 34; --lch-yellow-darkest: 96% 0.056 100; --lch-yellow-darker: 86% 0.103 90; --lch-yellow-dark: 74.06% 0.136 80; --lch-yellow-medium: 62.1% 0.146 70; --lch-yellow-light: 40% 0.0736 60; --lch-yellow-lighter: 30% 0.026 50; --lch-yellow-lightest: 25% 0.01 40; --lch-lime-darkest: 96.04% 0.066 115; --lch-lime-darker: 86% 0.098 114; --lch-lime-dark: 73.97% 0.121 113; --lch-lime-medium: 62% 0.128 112; --lch-lime-light: 40% 0.0637 111; --lch-lime-lighter: 30% 0.024 110; --lch-lime-lightest: 25% 0.012 109; --lch-green-darkest: 96.12% 0.035 143; --lch-green-darker: 86% 0.082 144; --lch-green-dark: 73.99% 0.117 145; --lch-green-medium: 62% 0.1261 146; --lch-green-light: 40% 0.065 147; --lch-green-lighter: 30% 0.03 148; --lch-green-lightest: 25% 0.018 149; --lch-aqua-darkest: 96.15% 0.0244 202; --lch-aqua-darker: 86% 0.06 204; --lch-aqua-dark: 73.92% 0.095 206; --lch-aqua-medium: 62% 0.106 208; --lch-aqua-light: 40% 0.0594 210; --lch-aqua-lighter: 30% 0.028 212; --lch-aqua-lightest: 25% 0.017 214; --lch-blue-darkest: 95.93% 0.0217 252; --lch-blue-darker: 86% 0.068 254; --lch-blue-dark: 74% 0.1293 256; --lch-blue-medium: 62% 0.159 258; --lch-blue-light: 40% 0.094 260; --lch-blue-lighter: 30% 0.0452 262; --lch-blue-lightest: 25% 0.0318 264; --lch-violet-darkest: 95.97% 0.019 280; --lch-violet-darker: 86% 0.068 282; --lch-violet-dark: 74.08% 0.142 284; --lch-violet-medium: 62% 0.184 286; --lch-violet-light: 40% 0.108 288; --lch-violet-lighter: 30% 0.048 290; --lch-violet-lightest: 25% 0.025 292; --lch-purple-darkest: 95.99% 0.0217 302; --lch-purple-darker: 86% 0.068 304; --lch-purple-dark: 73.98% 0.141 306; --lch-purple-medium: 62% 0.177 308; --lch-purple-light: 40% 0.099 310; --lch-purple-lighter: 30% 0.04 312; --lch-purple-lightest: 25% 0.017 314; --lch-pink-darkest: 95.84% 0.0308 336; --lch-pink-darker: 86% 0.074 338; --lch-pink-dark: 74.04% 0.1294 340; --lch-pink-medium: 62% 0.166 342; --lch-pink-light: 40% 0.085 344; --lch-pink-lighter: 30% 0.03 346; --lch-pink-lightest: 25% 0.011 348; --color-terminal-bg: var(--color-canvas); --color-terminal-text-light: oklch(var(--lch-green-dark)); --color-golden: oklch(var(--lch-blue-medium)); --color-highlight: oklch(var(--lch-blue-lighter)); --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42), 0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6), 0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7), 0 .4em .8em -1.2em oklch(var(--lch-black) / 0.8), 0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9), 0 1.2em 1.6em -2em oklch(var(--lch-black) / 1); } } :root { --color-page: oklch(96.7% 0.003 264.5); --color-ink-light: oklch(26% 0.05 264 / 12%); --color-body: var(--color-page); --color-text-subtle: var(--color-ink-dark); --color-text-placeholder: var(--color-ink-medium); /* Read by Fizzy's verbatim files under these names. */ --color-text: var(--color-ink); --color-ink-ligher: var(--color-ink-lighter); --card-bg-color: var(--color-canvas); --color-always-black: var(--color-black); --color-border-darker: var(--color-ink-light); --font-size-medium: var(--text-medium); --tint-ink-2: color-mix(in oklch, var(--color-ink) 2%, transparent); --tint-ink-3: color-mix(in oklch, var(--color-ink) 3%, transparent); --tint-ink-5: color-mix(in oklch, var(--color-ink) 5%, transparent); --tint-ink-10: color-mix(in oklch, var(--color-ink) 10%, transparent); --tint-ink-15: color-mix(in oklch, var(--color-ink) 15%, transparent); --tint-ink-20: color-mix(in oklch, var(--color-ink) 20%, transparent); --tint-ink-25: color-mix(in oklch, var(--color-ink) 25%, transparent); --tint-ink-35: color-mix(in oklch, var(--color-ink) 35%, transparent); --tint-ink-50: color-mix(in oklch, var(--color-ink) 50%, transparent); --tint-ink-75: color-mix(in oklch, var(--color-ink) 75%, transparent); --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --leading-snug: 1.35; /* What the strip takes: its buttons, the padding around them and the hairline. The scroll padding reads it too. */ --strip-height: calc(3rem + 1px); @media (width >= 640px) { --strip-height: calc(2.75rem + 1px); } --shadow-card: 0 0 0 1px var(--tint-ink-5), 0 1px 2px oklch(var(--lch-black) / 5%), 0 4px 12px oklch(var(--lch-black) / 5%); --shadow-modal: 0 0 0 1px var(--tint-ink-5), 0 8px 24px oklch(var(--lch-black) / 10%), 0 24px 64px oklch(var(--lch-black) / 15%); --duration-fast: 75ms; --duration-medium: 150ms; --duration-slow: 300ms; } html[data-theme="dark"] { --color-page: oklch(14% 0.02 232); --color-ink-light: oklch(96% 0.0034 260 / 16%); --shadow-card: 0 0 0 1px var(--tint-ink-5), 0 1px 2px oklch(var(--lch-black) / 40%), 0 4px 12px oklch(var(--lch-black) / 50%); --shadow-modal: 0 0 0 1px var(--tint-ink-10), 0 8px 24px oklch(var(--lch-black) / 50%), 0 24px 64px oklch(var(--lch-black) / 70%); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --color-page: oklch(14% 0.02 232); --color-ink-light: oklch(96% 0.0034 260 / 16%); --shadow-card: 0 0 0 1px var(--tint-ink-5), 0 1px 2px oklch(var(--lch-black) / 40%), 0 4px 12px oklch(var(--lch-black) / 50%); --shadow-modal: 0 0 0 1px var(--tint-ink-10), 0 8px 24px oklch(var(--lch-black) / 50%), 0 24px 64px oklch(var(--lch-black) / 70%); } } @layer reset { /* * Modern CSS Reset * @link https://github.com/hankchizljaw/modern-css-reset */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, h5, h6 { margin: 0; } p, li, h1, h2, h3, h4 { /* Help prevent overflow of long words/names/URLs */ word-break: break-word; /* Optional, not supported for all languages */ /* hyphens: auto; */ } html, body { overflow-x: clip; } html { /* scroll-behavior: smooth; */ } /* Set core body defaults */ body { min-height: 100dvh; font-family: sans-serif; font-size: 100%; line-height: 1.5; text-rendering: optimizeSpeed; } /* Make images easier to work with */ img { display: block; max-inline-size: 100%; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } button { cursor: pointer; } summary { &::-webkit-details-marker { display: none; } &::marker { content: ""; } } /* Remove all animations and transitions for people that prefer not to see them */ dialog { border: 0; padding: 0; &:where(:focus-visible):focus, &:where(:focus-visible):active { outline: 0; } } } @layer components { .icon { -webkit-touch-callout: none; background-color: currentColor; block-size: var(--icon-size, 1em); display: inline-block; flex-shrink: 0; inline-size: var(--icon-size, 1em); mask-image: var(--svg); mask-position: center; mask-repeat: no-repeat; mask-size: var(--icon-size, 1em); pointer-events: none; position: relative; user-select: none; } img.icon { background: none; } .icon--37signals { --svg: url("37signals.svg"); top: -0.1em; margin-right: 0.1375em; } .icon--add { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m4%2016c0%20.8.7%201.5%201.5%201.5h8.8c.1%200%20.2.1.2.2v8.8c0%20.8.7%201.5%201.5%201.5s1.5-.7%201.5-1.5v-8.8c0-.1.1-.2.2-.2h8.8c.8%200%201.5-.7%201.5-1.5s-.7-1.5-1.5-1.5h-8.8c-.1%200-.2-.1-.2-.2v-8.8c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5%201.5v8.8c0%20.1-.1.2-.2.2h-8.8c-.8%200-1.5.7-1.5%201.5z%22%2F%3E%3C%2Fsvg%3E"); } .icon--add--meta { --svg: url("add--meta.svg "); } .icon--arrow-left { --svg: url("arrow-left.svg "); } .icon--arrow-right { --svg: url("arrow-right.svg "); } .icon--arrow-up { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m22.41%2010.2-9.704-9.8a.99.99%200%200%200%20-.706-.3.992.992%200%200%200%20-.7.289l-9.727%209.631a2.6%202.6%200%200%200%20.1%203.657%202.59%202.59%200%200%200%203.657.1l3.743-3.732a.25.25%200%200%201%20.426.178v11.666c-.016%201.559%201.665%202.011%202.501%202.011a2.276%202.276%200%200%200%202.5-2.034v-11.625a.25.25%200%200%201%20.431-.173l3.722%203.881a2.658%202.658%200%200%200%203.757-3.749z%22%2F%3E%3C%2Fsvg%3E"); } .icon--art { --svg: url("art.svg "); } .icon--assigned { --svg: url("assigned.svg "); } .icon--attachment { --svg: url("attachment.svg "); } .icon--authentication { --svg: url("authentication.svg "); } .icon--basecamp { --svg: url("basecamp.svg"); inline-size: 1.14em; mask-size: 1.14em var(--icon-size, 1em); top: -0.1em; margin-right: 0.1375em; } .icon--bell-alert { --svg: url("bell-alert.svg "); } .icon--bell-off { --svg: url("bell-off.svg "); } .icon--bell { --svg: url("bell.svg "); } .icon--bolt { --svg: url("bolt.svg "); } .icon--bookmark-outline { --svg: url("bookmark-outline.svg "); } .icon--bookmark { --svg: url("bookmark.svg "); } .icon--boost { --svg: url("boost.svg "); } .icon--camera { --svg: url("camera.svg "); } .icon--caret-down { --svg: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4%208l8%208%208-8%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } .icon--check { --svg: url("check.svg "); } .icon--check-circle { --svg: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m15.166%207.44824c.3049-.46037.9253-.58686%201.3858-.28222.4603.30484.5868.92529.2822%201.38574l-5.2979%208.00004c-.1657.2502-.4347.4133-.7334.4433-.2986.03-.5954-.0758-.80758-.2881l-2.70215-2.7041c-.39038-.3906-.39057-1.0236%200-1.414.39049-.3903%201.02361-.3903%201.41406%200l1.83787%201.8379z%22%2F%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m12%201c6.0751%200%2011%204.92487%2011%2011%200%206.0751-4.9249%2011-11%2011-6.07513%200-11-4.9249-11-11%200-6.07513%204.92487-11%2011-11zm0%202c-4.97056%200-9%204.02944-9%209%200%204.9706%204.02944%209%209%209%204.9706%200%209-4.0294%209-9%200-4.97056-4.0294-9-9-9z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .icon--check-all { --svg: url("check-all.svg "); } .icon--clipboard { --svg: url("clipboard.svg "); } .icon--close { --svg: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m18.9396%202.93934c.5858-.58572%201.5353-.58576%202.1211%200%20.5857.58577.5857%201.53532%200%202.12109l-6.9395%206.93947%206.9395%206.9394c.5856.5858.5857%201.5354%200%202.1211-.5858.5857-1.5353.5856-2.1211%200l-6.9395-6.9394-6.93942%206.9394c-.58577.5858-1.5353.5858-2.1211%200-.58578-.5858-.58578-1.5353%200-2.1211l6.93946-6.9394-6.93946-6.93947c-.58577-.58577-.58574-1.5353%200-2.12109.58579-.58579%201.53531-.58579%202.1211%200l6.93942%206.93945z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); } .icon--close-circle { --svg: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m15.293%207.29297c.3905-.39052%201.0235-.39052%201.414%200%20.3906.39052.3905%201.02354%200%201.41406l-3.2929%203.29297%203.2929%203.293c.3905.3905.3906%201.0235%200%201.414-.3905.3905-1.0235.3905-1.414%200l-3.293-3.2929-3.29297%203.2929c-.39052.3906-1.02354.3906-1.41406%200-.39052-.3905-.39052-1.0235%200-1.414l3.29293-3.293-3.29293-3.29297c-.39052-.39052-.39052-1.02354%200-1.41406.39052-.39053%201.02354-.39053%201.41406%200l3.29297%203.29293z%22%2F%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m12%201c6.0751%200%2011%204.92487%2011%2011%200%206.0751-4.9249%2011-11%2011-6.07513%200-11-4.9249-11-11%200-6.07513%204.92487-11%2011-11zm0%202c-4.97056%200-9%204.02944-9%209%200%204.9706%204.02944%209%209%209%204.9706%200%209-4.0294%209-9%200-4.97056-4.0294-9-9-9z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .icon--collapse { --svg: url("collapse.svg "); } .icon--board { --svg: url("board.svg "); } .icon--board-add { --svg: url("board-add.svg "); } .icon--column-left { --svg: url("column-left.svg "); } .icon--column-right { --svg: url("column-right.svg "); } .icon--comment { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22m.2.5h24v24h-24z%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cpath%20d%3D%22m1.2%207c0-2.8%202.3-5%205-5h12c2.8%200%205%202.2%205%205v6c0%202.8-2.2%205-5%205h-5.6l-4.7%204.7c-.4.4-1%20.4-1.4%200-.2-.2-.3-.4-.3-.7v-4c-2.8%200-5-2.2-5-5zm5-.8c-.4%200-.8.3-.8.8s.3.8.8.8h12c.4%200%20.8-.3.8-.8s-.3-.8-.8-.8zm0%203c-.4%200-.8.3-.8.8s.3.8.8.8h12c.4%200%20.8-.3.8-.8s-.3-.8-.8-.8zm-.7%203.8c0-.4.3-.8.8-.8h8c.4%200%20.8.3.8.8s-.3.8-.8.8h-8.1c-.4%200-.8-.3-.8-.8z%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .icon--copy-paste { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m13.4%204.727a.251.251%200%200%200%20.2.265%201.089%201.089%200%200%201%20.824%201.108v1.4a1.244%201.244%200%200%200%201.244%201.244%201.244%201.244%200%200%200%201.245-1.244v-3.525a1.494%201.494%200%200%200%20-1.5-1.494h-1.724a.246.246%200%200%200%20-.177.074.249.249%200%200%200%20-.073.177c.002.473.001%201.492-.039%201.995z%22%2F%3E%3Cpath%20d%3D%22m8.954%2021.262a1.244%201.244%200%200%200%20-1.244-1.244h-4.226a1.073%201.073%200%200%201%20-1-1.136v-12.782a1.086%201.086%200%200%201%20.842-1.115.25.25%200%200%200%20.2-.258c-.039-.766-.051-1.6-.055-2a.25.25%200%200%200%20-.25-.247h-1.721a1.494%201.494%200%200%200%20-1.5%201.495v17.037a1.493%201.493%200%200%200%201.494%201.493h6.216a1.244%201.244%200%200%200%201.244-1.243z%22%2F%3E%3Cpath%20d%3D%22m11.937%204.472v-1.988a.5.5%200%200%200%20-.5-.5h-.758a.251.251%200%200%201%20-.249-.222%201.989%201.989%200%200%200%20-3.953%200%20.249.249%200%200%201%20-.249.222h-.755a.5.5%200%200%200%20-.5.5v1.988a.5.5%200%200%200%20.5.5h5.967a.5.5%200%200%200%20.497-.5z%22%2F%3E%3Cpath%20d%3D%22m19.02%2017.269h-3.979a.75.75%200%201%200%200%201.5h3.979a.75.75%200%201%200%200-1.5z%22%2F%3E%3Cpath%20d%3D%22m14.291%2014.54a.75.75%200%200%200%20.75.749h2.486a.75.75%200%201%200%200-1.5h-2.486a.75.75%200%200%200%20-.75.751z%22%2F%3E%3Cpath%20d%3D%22m23.5%2013.46a1.991%201.991%200%200%200%20-.584-1.409l-1.406-1.4a1.994%201.994%200%200%200%20-1.41-.584h-7.606a1.993%201.993%200%200%200%20-1.994%201.988v9.945a2%202%200%200%200%202%202h9a2%202%200%200%200%202-2zm-11-.4a1%201%200%200%201%201-1h6.187a1%201%200%200%201%20.707.292l.818.816a1%201%200%200%201%20.293.708v7.124a1%201%200%200%201%20-1%201h-7a1%201%200%200%201%20-1-1z%22%2F%3E%3C%2Fsvg%3E"); } .icon--crown { --svg: url("crown.svg "); } .icon--email { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m23.888%205.832a.182.182%200%200%200%20-.2.039l-9.747%209.745a2.75%202.75%200%200%201%20-3.888%200l-9.743-9.745a.18.18%200%200%200%20-.2-.039.182.182%200%200%200%20-.11.168v12a2%202%200%200%200%202%202h20a2%202%200%200%200%202-2v-12a.181.181%200%200%200%20-.112-.168z%22%2F%3E%3Cpath%20d%3D%22m11.115%2014.556a1.252%201.252%200%200%200%201.768%200l9.686-9.686a.5.5%200%200%200%20.121-.511c-.11-.329-.416-.359-.69-.359h-20c-.275%200-.583.03-.691.359a.5.5%200%200%200%20.121.511z%22%2F%3E%3C%2Fsvg%3E"); } .icon--everyone { --svg: url("everyone.svg "); } .icon--expand { --svg: url("expand.svg "); } .icon--gear { --svg: url("gear.svg "); } .icon--grid { --svg: url("grid.svg "); } .icon--filter { --svg: url("filter.svg "); } .icon--fizzy { --svg: url("fizzy.svg"); top: -0.1em; margin-right: 0.1375em; } .icon--globe { --svg: url("globe.svg "); } .icon--golden-ticket { --svg: url("golden-ticket.svg "); } .icon--hey { --svg: url("hey.svg"); block-size: 1.06em; mask-size: var(--icon-size, 1em) 1.06em; top: -0.1em; margin-right: 0.1375em; } .icon--history { --svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%2C8H12V13L16.28%2C15.54L17%2C14.33L13.5%2C12.25V8M13%2C3A9%2C9%200%200%2C0%204%2C12H1L4.96%2C16.03L9%2C12H6A7%2C7%200%200%2C1%2013%2C5A7%2C7%200%200%2C1%2020%2C12A7%2C7%200%200%2C1%2013%2C19C11.07%2C19%209.32%2C18.21%208.06%2C16.94L6.64%2C18.36C8.27%2C20%2010.5%2C21%2013%2C21A9%2C9%200%200%2C0%2022%2C12A9%2C9%200%200%2C0%2013%2C3%22%20%2F%3E%3C%2Fsvg%3E"); } .icon--home { --svg: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m12%203%208%206v12h-5v-7h-6v7h-5v-12z%22%2F%3E%3C%2Fsvg%3E"); } .icon--install-edge { --svg: url("install-edge.svg "); } .icon--lifebuoy { --svg: url("lifebuoy.svg "); } .icon--lock { --svg: url("lock.svg "); } .icon--logout { --svg: url("logout.svg "); } .icon--marker { --svg: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2220%22%20viewBox%3D%220%200%2019%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M10%209.55C9.43168%209.55%208.88663%209.31295%208.48477%208.89099C8.08291%208.46903%207.85714%207.89674%207.85714%207.3C7.85714%206.70326%208.08291%206.13097%208.48477%205.70901C8.88663%205.28705%209.43168%205.05%2010%205.05C10.5683%205.05%2011.1134%205.28705%2011.5152%205.70901C11.9171%206.13097%2012.1429%206.70326%2012.1429%207.3C12.1429%207.59547%2012.0874%207.88806%2011.9797%208.16104C11.8721%208.43402%2011.7142%208.68206%2011.5152%208.89099C11.3162%209.09992%2011.08%209.26566%2010.82%209.37873C10.5601%209.4918%2010.2814%209.55%2010%209.55ZM10%201C8.4087%201%206.88258%201.66375%205.75736%202.84523C4.63214%204.02671%204%205.62914%204%207.3C4%2012.025%2010%2019%2010%2019C10%2019%2016%2012.025%2016%207.3C16%205.62914%2015.3679%204.02671%2014.2426%202.84523C13.1174%201.66375%2011.5913%201%2010%201Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A"); } .icon--maximize { --svg: url("maximize.svg "); } .icon--menu { --svg: url("menu.svg "); } .icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); } .icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg "); } .icon--minus { --svg: url("minus.svg "); } .icon--monitor { --svg: url("monitor.svg "); } .icon--moon { --svg: url("moon.svg "); } .icon--move { --svg: url("move.svg "); } .icon--notification-bell-access-only { --svg: url("bell.svg "); } .icon--notification-bell-watching { --svg: url("bell-off.svg "); } .icon--notification-bell-reverse-access-only { --svg: url("bell-off.svg "); } .icon--notification-bell-reverse-watching { --svg: url("bell.svg "); } .icon--password { --svg: url("password.svg "); } .icon--pencil { --svg: url("pencil.svg "); } .icon--person { --svg: url("person.svg "); } .icon--person-add { --svg: url("person-add.svg "); } .icon--picture-add { --svg: url("picture-add.svg "); } .icon--picture-double { --svg: url("picture-double.svg "); } .icon--picture-remove { --svg: url("picture-remove.svg "); } .icon--picture-zoom { --svg: url("picture-zoom.svg "); } .icon--pinned { --svg: url("pinned.svg "); } .icon--qr-code { --svg: url("qr-code.svg "); } .icon--reaction { --svg: url("reaction.svg "); } .icon--refresh { --svg: url("refresh.svg "); } .icon--refresh--meta { --svg: url("refresh--meta.svg "); } .icon--remove { --svg: url("remove.svg "); } .icon--rename { --svg: url("rename.svg "); } .icon--search { --svg: url("search.svg "); } .icon--settings { --svg: url("settings.svg "); } .icon--share { --svg: url("share.svg "); } .icon--sliders { --svg: url("sliders.svg "); } .icon--sun { --svg: url("sun.svg "); } .icon--switch { --svg: url("switch.svg "); } .icon--tag { --svg: url("tag.svg "); } .icon--tag-outline { --svg: url("tag-outline.svg "); } .icon--thumb-up { --svg: url("thumb-up.svg "); } .icon--trash { --svg: url("trash.svg "); } .icon--unpinned { --svg: url("unpinned.svg"); } .icon--unseen { --svg: url("unseen.svg"); } .icon--world { --svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.2%2014.4c.1-.8.2-1.6.2-2.4s-.1-1.6-.2-2.4h4.1q.3%201.2.3%202.4c0%201.2-.1%201.6-.3%202.4m-6.2%206.7c.7-1.3%201.3-2.8%201.7-4.3h3.5c-1.1%202-3%203.5-5.2%204.3m-.3-6.7H9.2c-.1-.8-.2-1.6-.2-2.4s.1-1.6.2-2.4h5.6c.1.8.2%201.6.2%202.4s-.1%201.6-.2%202.4M12%2021.6c-1-1.4-1.8-3-2.3-4.8h4.6c-.5%201.7-1.3%203.3-2.3%204.8M7.2%207.2H3.7c1.1-2%203-3.5%205.2-4.3-.7%201.4-1.3%202.8-1.7%204.3m-3.5%209.6h3.5c.4%201.5%201%202.9%201.7%204.3-2.2-.8-4.1-2.3-5.2-4.3m-1-2.4q-.3-1.2-.3-2.4c0-1.2.1-1.6.3-2.4h4.1c-.1.8-.2%201.6-.2%202.4s.1%201.6.2%202.4m5.2-12c1%201.4%201.8%203%202.3%204.8H9.7c.5-1.7%201.3-3.3%202.3-4.8m8.3%204.8h-3.5c-.4-1.5-.9-2.9-1.7-4.3%202.2.8%204.1%202.3%205.2%204.3M12%200C5.4%200%200%205.4%200%2012s5.4%2012%2012%2012%2012-5.4%2012-12S18.6%200%2012%200%22%2F%3E%3C%2Fsvg%3E"); } .icon--youtube { --svg: url("youtube.svg"); } } @layer components { .btn { --icon-size: var(--btn-icon-size, 1.3em); --btn-border-radius: 99rem; --btn-hover-brightness: 0.9; align-items: center; background-color: var(--btn-background, var(--color-canvas)); border-radius: var(--btn-border-radius); border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-ink-light)); color: var(--btn-color, var(--color-ink)); cursor: pointer; display: inline-flex; font-size: 1em; font-weight: var(--btn-font-weight, 600); gap: var(--btn-gap, 0.5em); justify-content: center; padding: var(--btn-padding, 0.5em 1.1em); pointer-events: auto; position: relative; text-decoration: none; transition: 100ms ease-out; transition-property: background-color, border, box-shadow, color, opacity, scale; @media (any-hover: hover) { &:hover { filter: brightness(var(--btn-hover-brightness)); } } html[data-theme="dark"] & { --btn-hover-brightness: 1.25; } @media (prefers-color-scheme: dark) { html:not([data-theme]) & { --btn-hover-brightness: 1.25; } } &[disabled], &:has([disabled]), [disabled] &[type=submit], &[type=submit]:disabled { cursor: not-allowed; opacity: 0.3; pointer-events: none; } form[aria-busy] &:disabled { position: relative; > * { visibility: hidden; } &::after { --mask: no-repeat radial-gradient(#000 68%,#0000 71%); --size: 1.25em; -webkit-mask: var(--mask), var(--mask), var(--mask); -webkit-mask-size: 28% 45%; animation: submitting 1s infinite linear; aspect-ratio: 8/5; background: currentColor; content: ""; inline-size: var(--size); inset: 50%; margin-block: calc((var(--size) / 3) * -1); margin-inline: calc((var(--size) / 2) * -1); position: absolute; } } } /* Variants /* ------------------------------------------------------------------------ */ .btn--plain { --btn-background: transparent; --btn-border-radius: 0; --btn-border-size: 0; --btn-color: inherit; --btn-icon-size: 100%; --btn-padding: 0; } .btn--link { --btn-background: var(--color-link); --btn-border-color: var(--color-canvas); --btn-color: var(--color-ink-inverted); --focus-ring-color: var(--color-link); } .btn--circle, .btn[aria-label]:where(:has(.icon)), .btn:where(:has(.for-screen-reader):has(.icon)) { --btn-padding: 0; --icon-size: 75%; aspect-ratio: 1; block-size: var(--btn-size); display: grid; inline-size: var(--btn-size); justify-content: normal; /* FF fix */ place-items: center; > * { grid-area: 1/1; } } /* Make a normal button circular on mobile */ @media (max-width: 639px) { .btn--circle-mobile { --btn-size: 3em; --btn-padding: 0; --icon-size: 75%; aspect-ratio: 1; inline-size: var(--btn-size); kbd, span:last-of-type:not(.icon) { display: none; } } } @media (min-width: 640px) { .btn .icon--mobile-only { display: none !important; } } .btn--negative { --btn-background: var(--color-negative); --btn-border-color: var(--color-negative); --btn-color: var(--color-ink-inverted); --focus-ring-color: var(--color-negative); } .btn--positive { --btn-background: var(--color-positive); --btn-border-color: var(--color-canvas); --btn-color: var(--color-ink-inverted); --focus-ring-color: var(--color-positive); } .btn--success { --success-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1); animation: success 1s var(--success-timing-function); .icon { animation: zoom-fade 500ms var(--success-timing-function); } } /* Fake button used to help space things out */ .btn--placeholder { pointer-events: none; visibility: hidden; } .btn--remove { --btn-icon-size: 0.7em; } .btn--reversed { --btn-background: var(--color-ink); --btn-border-color: var(--color-canvas); --btn-color: var(--color-canvas); --focus-ring-color: var(--color-ink); } /* Toggleable buttons /* ------------------------------------------------------------------------ */ .btn { &:has(input[type=radio], input[type=checkbox]) { position: relative; :is(input[type=radio], input[type=checkbox]) { appearance: none; border-radius: var(--btn-border-radius); cursor: pointer; display: flex; inset: 0; margin: 0; padding: 0; position: absolute; &:focus-visible { outline: none; } } .checked { display: none; } } &:has(input:checked) { --btn-background: var(--color-ink); --btn-border-color: var(--color-ink); --btn-color: var(--color-ink-inverted); --focus-ring-color: var(--color-ink); .checked { display: block; } } &:has(input:focus-visible) { outline: var(--focus-ring-size) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } } .btn--back { --btn-border-size: 0; @media (max-width: 639px) { strong, kbd { display: none; } } @media (min-width: 640px) { font-size: var(--text-medium); .icon--arrow-left { display: none; } } } /* Button groups /* ------------------------------------------------------------------------ */ .btn__group { .btn { --btn-border-radius: 0; --radius: 0.3em; flex: 1 0 33%; inline-size: 100%; justify-content: center; white-space: nowrap; } form { flex: 1 1 0%; } :first-of-type .btn { border-end-start-radius: var(--radius); border-inline-end: 0; border-start-start-radius: var(--radius); padding-inline-end: 0.8em; } :last-of-type .btn { border-end-end-radius: var(--radius); border-inline-start: 0; border-start-end-radius: var(--radius); padding-inline-start: 0.8em; } span { inline-size: 100%; } } /* Button utilities /* ------------------------------------------------------------------------ */ :is([data-platform~=mobile], [data-platform~=native]) { .btn--ensure-tap-target-size { --tap-target-z-index: 1; --tap-target-min-size: 44px; z-index: var(--tap-target-z-index); &::before { content: ""; display: block; block-size: var(--tap-target-min-size); inline-size: var(--tap-target-min-size); inset: calc(50% - var(--tap-target-min-size) / 2) auto auto calc(50% - var(--tap-target-min-size) / 2); opacity: 0; position: absolute; } } } } @layer components { /* Text inputs */ .input { accent-color: var(--input-accent-color, var(--color-ink)); background-color: var(--input-background, transparent); border-radius: var(--input-border-radius, 0.5em); border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium)); color: var(--input-color, var(--color-ink)); font-size: max(16px, 1em); inline-size: 100%; line-height: inherit; max-inline-size: 100%; padding: var(--input-padding, 0.5em 0.8em); resize: none; &:autofill, &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus { -webkit-text-fill-color: var(--color-ink); -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; } &:where(:focus) { --focus-ring-offset: -1px; } &[readonly] { --focus-ring-size: 0; } &[autocomplete='one-time-code'] { --input-spacing: 0.5em; font-family: var(--font-mono); font-size: var(--text-large); font-weight: 900; inline-size: 18ch; letter-spacing: 1ch; min-inline-size: 18ch; text-align: center; } &[type='number'] { &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } /* Target mobile Safari only */ @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) { @media (hover: none) { font-size: max(16px, 1em) !important; } } } .input--file, .input--upload { cursor: pointer; &:has(input[type="file"]:focus-visible) { outline: 0.15rem solid var(--color-selected-dark); } input[type="file"] { --hover-size: 0; --input-border-color: transparent; --input-border-radius: 8px; block-size: 100%; cursor: pointer; font-size: 0; inline-size: 100%; overflow: clip; &::file-selector-button { appearance: none; cursor: pointer; opacity: 0; } } } .input--file { display: grid; inline-size: auto; place-items: center; > * { grid-area: 1 / 1; } img { border-radius: 0.4em; } &:is(.avatar) { input[type="file"] { border-radius: 50%; } } } .input--upload { --btn-border-color: var(--color-ink); --btn-border-radius: 1ch; border-style: dashed; position: relative; input[type="file"] { inset: 0; outline: none; position: absolute; } &:has([data-upload-preview-target="fileName"]:not([hidden])) { --btn-border-color: var(--color-positive); --btn-color: var(--color-positive); } } .input--select { --input-border-radius: 2em; --input-padding: 0.5em 1.8em 0.5em 1.2em; --caret-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E"); --caret-icon-dark: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E"); -webkit-appearance: none; appearance: none; background-image: var(--caret-icon); background-size: 0.5em; background-position: center right 0.9em; background-repeat: no-repeat; text-align: start; html[data-theme="dark"] & { --caret-icon: var(--caret-icon-dark); } @media (prefers-color-scheme: dark) { html:not([data-theme]) & { --caret-icon: var(--caret-icon-dark); } } option { background-color: var(--color-canvas); color: var(--color-ink); } } .input--textarea { --input-padding: 0; line-height: inherit; min-block-size: calc(3lh + (2 * var(--input-padding))); min-inline-size: 100%; padding-block: var(--input-padding); padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2)); @supports (field-sizing: content) { field-sizing: content; max-block-size: calc(3lh + (2 * var(--input-padding))); min-block-size: calc(1lh + (2 * var(--input-padding))); } } .input--invisible { background-color: transparent; block-size: 5px; border: none; inline-size: 5px; opacity: 0.1; &:focus { outline: none; } } /* Switches */ .switch { --switch-color: var(--color-ink-medium); --switch-hover-brightness: 0.9; block-size: 1.75em; border-radius: 2em; display: inline-flex; inline-size: 3em; position: relative; &:has(:focus-visible) { .switch__btn { outline: var(--focus-ring-size) solid var(--focus-ring-color); } } } .switch__input { block-size: 0; inline-size: 0; opacity: 0.1; } .switch__btn { background-color: var(--switch-color); border-radius: 2em; cursor: pointer; inset: 0; outline-offset: var(--focus-ring-offset); position: absolute; transition: 150ms ease; &::before { background-color: var(--color-ink-inverted); block-size: 1.35em; border-radius: 50%; content: ""; inline-size: 1.35em; inset-block-end: 0.2em; inset-inline-start: 0.2em; position: absolute; transition: 150ms ease; } @media (any-hover: hover) { &:hover { background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink)); } } .switch__input:checked + & { --switch-color: var(--color-link); &::before { transform: translateX(1.2em); } } .switch__input:disabled + & { --switch-color: var(--color-ink-medium); cursor: not-allowed; opacity: 0.5; } } /* Containers that act like (and contain) inputs */ .input--actor { outline-offset: -1px; transition: box-shadow 150ms ease, outline-offset 150ms ease; &:focus-within { --input-border-color: var(--color-selected-dark); outline: var(--focus-ring-size) solid var(--focus-ring-color); } .input { --input-padding: 0; --input-border-radius: 0; --input-background: transparent; --input-border-size: 0; inline-size: 100%; outline: 0; } &:has(.input:is( :autofill, :-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus)) { -webkit-text-fill-color: var(--color-text); -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset; } } .input--hidden { block-size: 0; inline-size: 0; opacity: 0; padding: 0; } .input.boost__input { --input-border-radius: 0; --input-border-size: 0; --input-padding: 0; color: inherit; font-size: inherit; font-weight: inherit; inline-size: min-content; max-inline-size: 3ch; min-inline-size: 1ch; outline: none; @supports (field-sizing: content) { field-sizing: content; max-inline-size: unset; } &:focus { background-color: var(--color-highlight); } &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } } /* Checkboxes */ .checkbox { appearance: none; background-color: var(--color-canvas); block-size: 1.1em; border: 1px solid currentColor; border-radius: 0.15em; color: currentColor; display: grid; font: inherit; inline-size: 1.1em; margin: 0; place-content: center; transform: translateY(0.1em); &::before { background-color: CanvasText; block-size: 0.65em; box-shadow: inset 1em 1em currentColor; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); content: ""; inline-size: 0.65em; transform: scale(0); transform-origin: center; transition: 150ms transform ease-in-out; } &:checked::before { transform: scale(1) rotate(10deg); } &:where([disabled]):not(:hover):not(:active) { filter: none; opacity: 0.5; } } } @layer components { :root { --color-success: oklch(var(--lch-green-dark)); --color-info: oklch(var(--lch-blue-dark)); --color-warning: oklch(var(--lch-yellow-dark)); --color-error: oklch(var(--lch-red-dark)); --color-success-text: oklch(var(--lch-green-darker)); --color-info-text: oklch(var(--lch-blue-darker)); --color-warning-text: oklch(var(--lch-yellow-darker)); --color-error-text: oklch(var(--lch-red-darker)); --color-success-button: oklch(var(--lch-green-dark)); --color-error-button: oklch(var(--lch-red-dark)); /* A warning as a ground, a step darker than the scale's so white on it reads at 4.5:1. Dark mode's sits under dark ink and already does. */ --color-warning-filled: oklch(57% 0.156 60); } html[data-theme="dark"] { --color-warning-filled: var(--color-warning); } @media (prefers-color-scheme: dark) { html:not([data-theme]) { --color-warning-filled: var(--color-warning); } } .status { --status-color: var(--color-ink-dark); --status-text: var(--color-ink-dark); font-size: var(--text-small); color: var(--status-text); font-weight: 600; white-space: nowrap; } .status--success { --status-color: var(--color-success); --status-text: var(--color-success-text); } .status--info { --status-color: var(--color-info); --status-text: var(--color-info-text); } .status--warning { --status-color: var(--color-warning); --status-text: var(--color-warning-text); } .status--error { --status-color: var(--color-error); --status-text: var(--color-error-text); } .status--neutral { --status-color: var(--color-ink-dark); --status-text: var(--color-ink-dark); } .status--badge { padding: 0.25em 0.7em; border: var(--border); border-radius: 9999px; font-size: var(--text-small); } /* A verdict that has to be read at a glance: the status colour becomes the ground, and the only status still said in capitals. */ .status--filled { padding: 0.35em 0.8em; border-radius: var(--radius-lg); font-size: var(--text-small); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-ink-inverted); background-color: var(--status-color); } .status--filled.status--warning { --status-color: var(--color-warning-filled); } /* As the filled warning's ground: a step darker in light mode only. */ .status--filled.status--error { --status-color: oklch(57% 0.19 38); html[data-theme="dark"] & { --status-color: var(--color-error); } @media (prefers-color-scheme: dark) { html:not([data-theme]) & { --status-color: var(--color-error); } } } .status--stamp { display: inline-block; rotate: -1.5deg; } /* A state that is off, said in a quieter colour. Never struck through: a line through "Unblocked" reads as the negation of the word, which is the opposite of what it says. */ .status--muted { --status-color: var(--color-ink-dark); --status-text: var(--color-ink-dark); } /* A date, a person or a count beside a row's title, said quietly. Never a status: it has no colour of its own. */ .chip { --icon-size: 1em; display: inline-flex; align-items: center; gap: 0.4em; padding: 0.15em 0.6em; border-radius: var(--radius-md); background-color: var(--tint-ink-5); color: var(--color-ink-dark); font-size: var(--text-small); font-weight: 400; line-height: 1.3; white-space: nowrap; } /* A chip that opens the field it prints, with that field focused. */ .chip--link { color: var(--color-ink); text-decoration: none; transition: background-color var(--duration-medium) var(--ease-out-expo); @media (any-hover: hover) { &:hover { background-color: var(--tint-ink-10); } } } } @layer utilities { .txt-warning { color: color-mix(in oklch, var(--color-warning), var(--color-ink) 25%); } } @layer components { /* On the page a list is a panel of its own. Inside a surface that already is one, it lies flat. */ :is(.panel, .record, .project__sheet, .tool__panel, .paper__section, .suggestions__list, .messages-sidebar__pane), .rows .rows { --rows-border-size: 0; --rows-border-radius: 0.5em; --rows-shadow: none; } .rows { list-style: none; margin-block: var(--rows-margin, var(--block-space)); padding: var(--rows-padding, var(--inline-space-half)); background-color: var(--rows-bg, var(--color-canvas)); border: var(--rows-border-size, 1px) solid var(--color-ink-lighter); border-radius: var(--rows-border-radius, 1em); box-shadow: var(--rows-shadow, var(--shadow)); .panel & { --rows-bg: var(--color-ink-lightest); } &:not(:has(.row:not([hidden]))) { --rows-bg: transparent; --rows-border-size: 0; --rows-padding: 0; --rows-shadow: none; } @media print { --rows-border-size: 0; --rows-shadow: none; } } .row { --row-padding-block: calc(var(--block-space-half) / 2); display: flex; align-items: center; gap: var(--inline-space); margin: 0; padding-inline: var(--inline-space); border-radius: 0.5em; line-height: var(--leading-snug); outline: none; &[aria-selected="true"] { background-color: var(--color-ink-lightest); } @media (any-hover: hover) { &:has(> a.row__body:hover, > form > button.row__body:hover) { background-color: var(--color-ink-lightest); } } /* A title alone keeps the half block, or its row would be little more than the line. */ &:where(:not(:has(.row__meta:not(:empty)))) { --row-padding-block: var(--block-space-half); } &[hidden] { display: none; } } /* A group of rows inside a list, under a header of its own. */ .rows__group { --rows-margin: 0; --rows-padding: 0; padding-block-end: var(--block-space-half); } .rows__group-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inline-space-half) var(--inline-space); padding: var(--block-space-half) var(--inline-space); } .rows__group-title { flex: 1 1 auto; min-inline-size: 0; } /* A row under the one above it, as a subcontractor under the firm that hired it. */ .row--nested { padding-inline-start: calc(var(--inline-space) + var(--depth, 0) * var(--inline-space-double)); } /* What a nested row hangs from. Typing in the filter can leave the row without the one above it, so the indent goes and the row says it. */ .row__meta--nested { display: none; } [data-filtering] { .row--nested[data-quick-find-target~="item"] { padding-inline-start: var(--inline-space); } .row__meta--nested { display: block; } } /* A form opened in place under a row, indented as the rows it adds. */ .rows__form { padding-inline: calc(var(--inline-space) + var(--depth, 0) * var(--inline-space-double)) var(--inline-space); } .row--inactive { color: var(--color-ink-dark); } .row__body { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; padding-block: var(--row-padding-block); color: inherit; text-decoration: none; &:last-child { flex-grow: 1; } } button.row__body { align-items: flex-start; background: none; border: 0; border-radius: 0; font-weight: inherit; padding-inline: 0; text-align: start; &:enabled:hover { background: none; } } .row__title, .row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__title { font-weight: bold; } .row__meta { color: var(--color-ink-dark); font-size: var(--text-small); } .row__title--wrap, .row__meta--wrap { overflow: visible; overflow-wrap: anywhere; white-space: normal; } .row .separator--horizontal { min-inline-size: 1rem; @container layout (inline-size < 640px) { display: none; & + .row__end { margin-inline-start: auto; } } } .row__end { display: flex; flex: 0 0 auto; align-items: center; gap: var(--inline-space); color: var(--color-ink-dark); font-size: var(--text-small); white-space: nowrap; } .row[aria-selected="true"] .chip { background-color: var(--color-canvas); } @media (any-hover: hover) { .row:has(> a.row__body:hover, > form > button.row__body:hover) .chip { background-color: var(--color-canvas); } } /* In a narrow column a chip that would leave the title a few letters goes under it instead. */ @container layout (inline-size < 640px) { .row:has(> .row__end > .chip) { flex-wrap: wrap; row-gap: 0.25em; padding-block-end: var(--row-padding-block); > .row__body { flex: 1 1 10rem; padding-block-end: 0; } > .row__body .row__meta { overflow: visible; overflow-wrap: anywhere; white-space: normal; } > .row__end { margin-inline-start: 0; } } } } @layer components { .separator { block-size: 100%; border-block: 0; border-inline-end: 0; border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); display: inline-flex; inline-size: 0; } .separator--horizontal { block-size: 0; border-block-end: 0; border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor); border-inline: 0; display: flex; } } @layer components { .panel { background-color: var(--panel-bg, var(--color-canvas)); border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter)); border-radius: var(--panel-border-radius, 1em); color: var(--color-ink); inline-size: var(--panel-size, 60ch); max-inline-size: 100%; padding: var(--panel-padding, var(--block-space)); @media (min-width: 640px) { --panel-size: 100%; padding: var(--panel-padding, var(--block-space-double)); } } .panel--wide { --panel-size: 60ch; } .panel--centered { --panel-border-size: 0; --panel-size: 100%; @media (min-width: 640px) { --panel-size: 42ch; } #main:has(&) { display: grid; justify-content: center; margin: auto; } } } @layer components { /* Components answer to the column they sit in. The page, each tray, the messages pane and the bar are each a layout. */ #main, .tray__dialog, .messages-sidebar__pane, .bar { container: layout / inline-size; } /* A container cannot query itself, so the sheet, which the grid fills edge to edge, names the grid's width. */ .project__sheet { container: card-grid / inline-size; } } @layer components { /* One row under the header at every width: server filters at the start, the filter box at the end. */ .filter-bar { align-items: center; display: flex; gap: var(--inline-space-half); padding-block-start: 2px; /* prevents input focus-ring clipping on mobile */ position: relative; z-index: 1; .btn { --btn-border-color: var(--color-ink-medium); --input-background: var(--color-canvas); } &:has(dialog[open]) { z-index: calc(var(--z-nav) + 1); } .popup-anchor { min-inline-size: 0; } } .filter-bar__terms:is(.input) { --input-background: var(--color-canvas); --input-border-radius: 5em; --input-padding: 0.5em 1.3em; flex: 0 100 var(--filter-input-width, 15rem); font-size: var(--text-x-small); min-inline-size: 8rem; &:not(:placeholder-shown) { --input-background: color-mix(in oklch, var(--color-highlight) 30%, var(--color-canvas)); } &::-webkit-search-cancel-button { appearance: none; } } .filter-bar__control:is(.input) { --input-background: var(--color-canvas); cursor: pointer; flex: 0 1 auto; font-size: var(--text-x-small); inline-size: auto; min-inline-size: 0; text-overflow: ellipsis; } .filter-bar__switch { cursor: pointer; min-inline-size: 0; } .filter-bar__segments { align-items: stretch; background-color: var(--color-ink-lightest); border: var(--border); border-radius: var(--filter-segment-radius, 99rem); display: inline-flex; gap: 2px; min-inline-size: 0; padding: 2px; } .filter-bar__segment { border-radius: var(--filter-segment-radius, 99rem); color: inherit; font-size: var(--text-x-small); min-inline-size: 0; overflow: hidden; padding: 0.3em 0.9em; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; &[aria-current="true"] { background-color: var(--color-canvas); box-shadow: var(--shadow); font-weight: 700; } } .filter-bar__segment--select:is(.input) { --input-background: transparent; --input-border-radius: var(--filter-segment-radius, 99rem); --input-border-size: 0; --input-padding: 0.3em 1.8em 0.3em 0.9em; cursor: pointer; font-size: var(--text-x-small); inline-size: auto; } /* The filter box. Its shrink factor dwarfs the filters', so it gives way first, down to its floor, and then the filters ellipsize. */ .filter-box { flex: 0 100 var(--filter-input-width, 15rem); margin-inline-start: auto; min-inline-size: 8rem; position: relative; .filter-bar__terms { --input-padding: 0.5em 2.7em 0.5em 1.3em; } } .filter-box__hint, .filter-box__clear:is(.btn) { inset-block-start: 50%; position: absolute; translate: 0 -50%; } .filter-box__hint { font-size: var(--text-xx-small); inset-inline-end: 0.9rem; line-height: 1.2; pointer-events: none; } .filter-box__clear:is(.btn) { --btn-background: transparent; --btn-border-size: 0; --btn-color: var(--color-ink-dark); --btn-size: 1.5rem; inset-inline-end: 0.4rem; @media (any-hover: hover) { &:hover { --btn-background: var(--color-ink-lightest); --btn-color: var(--color-ink); } } } .filter-bar__terms:is(:focus, :not(:placeholder-shown)) ~ .filter-box__hint, .filter-bar__terms:placeholder-shown ~ .filter-box__clear { display: none; } .filter__match { background-color: var(--color-highlight); border-radius: 0.2em; color: var(--color-ink); padding: 0; } /* Shown only while a typed query hides every row, and late, so it does not flash between keystrokes. */ .filter__empty { display: none; } [data-filtering]:not([data-has-match]):has([data-quick-find-target~="item"]) > .filter__empty { animation: fade-in var(--duration-medium) ease-out 500ms both; display: block; } /* Below 16px, iOS zooms the page when a field takes focus */ @media (any-hover: none) { :is(.filter-bar__terms, .filter-bar__control, .filter-bar__segment--select):is(.input) { font-size: max(16px, var(--text-x-small)); } } @container layout (inline-size < 640px) { .filter-box__hint { display: none; } } } /* Styles for the blank slate. To manage when they are shown/hidden, do so in context */ @layer components { .blank-slate { border-radius: 0.5ch; border: 2px dashed var(--color-ink-lighter); color: var(--color-ink-dark); font-weight: 500; margin-block-start: 2dvh; padding: 1.5ch 2ch; rotate: -3deg; } .blank-slate--drag { background-color: color-mix(in srgb, transparent, var(--card-color) 5%); border-color: color-mix(in srgb, transparent, var(--card-color) 10%); color: color-mix(in srgb, transparent, var(--card-color) 75%); margin-block-start: 0; rotate: 0deg; } } @layer components { .blank-slate.blank-slate--plain, .blank-slate:not(.blank-slate--drag) { border-color: var(--color-ink-light); rotate: 0deg; text-wrap: pretty; > strong { color: var(--color-ink); display: block; font-weight: 700; } } } @layer components { .site-header { align-items: center; column-gap: var(--header-gap, var(--inline-space-half)); display: grid; grid-template-areas: ". brand messages" "nav nav nav"; grid-template-columns: 1fr auto 1fr; @media (width >= 960px) { grid-template-areas: ". brand nav messages"; grid-template-columns: 1fr auto auto 1fr; } } .header:has(> .site-header) { align-items: center; row-gap: 0; /* As wide as a wide page inside #main's padding, so the actions end where the page does. */ inline-size: 100%; margin-inline: auto; max-inline-size: calc(var(--header-size, 65rem) + var(--main-padding) * 2); /* header.css sizes the action columns for icon circles; from 640 up ours carry a label, so the sides take their content and stay equal while there is room. */ @media (width >= 640px) { --header-actions-width: auto; --header-btn-size: 2.5rem; column-gap: var(--header-gap); grid-template-columns: 1fr fit-content(50%) 1fr; } } @media (width >= 640px) { .header__actions { font-size: var(--text-normal); } .header__actions > .popup-anchor > .btn--circle { --btn-size: var(--header-btn-size); } /* buttons.css makes a circle of any button with an aria-label and an icon, the label stacked on the icon. */ .header__actions .btn--circle-mobile[aria-label] { --btn-gap: var(--inline-space); --btn-padding: 0 1.1em; --icon-size: var(--btn-icon-size, 1.3em); aspect-ratio: auto; block-size: auto; display: inline-flex; inline-size: auto; justify-content: center; min-block-size: var(--header-btn-size); white-space: nowrap; } } /* The circle the header's columns are sized for. */ @media (width < 640px) { .header__actions .btn--circle-mobile { --btn-size: var(--header-btn-size); } } .header .header__title { font-size: var(--text-x-large); font-weight: 800; letter-spacing: -0.024em; line-height: 1.15; } /* With the title and actions in the strip, the header keeps its sections row alone. */ .header:has(> .site-header):not(:has(.header__title, .header__actions)) { grid-template-areas: "menu menu menu"; } /* Spanning the header's columns, its content would hold their width against the title's. */ .header > .site-header { contain: inline-size; grid-area: menu; } .site-header__brand { align-items: center; display: inline-flex; gap: var(--inline-space-half); grid-area: brand; justify-content: center; min-inline-size: 0; } .site-header__logo, .site-header__account-logo { block-size: var(--site-header-logo-size, 2.5rem); border-radius: var(--radius-lg); display: block; inline-size: auto; } .site-header__account-logo { border-radius: var(--radius-md); flex-shrink: 1; min-inline-size: 0; object-fit: contain; } .public .site-header__logo { border-radius: var(--radius-md); } .site-header__sections { display: contents; } /* header.css places every nav in the header's menu area and centres it; ours sits inside the site header's own grid. */ .header .site-header__nav { grid-area: nav; margin-inline: 0; min-inline-size: 0; } /* One row, so the last section never wraps alone. */ .site-header__list { align-items: center; display: flex; gap: var(--header-gap, var(--inline-space-half)); justify-content: center; list-style: none; margin: 0; padding: 0; } .site-header__item { flex: none; } .site-header__link { --btn-background: transparent; --btn-border-size: 0; --btn-padding: 0.5em 0.75em; white-space: nowrap; @media (any-hover: hover) { &:hover { --btn-background: var(--color-ink-lighter); } } &[aria-current="page"], &[aria-expanded="true"] { --btn-background: var(--color-ink-lightest); } } .site-header__messages { grid-area: messages; justify-self: end; } .site-header__messages:not(.site-header__messages--unread) .unread-dot { display: none; } /* On a phone the brand sits between the actions, the sections take a row of their own and the title keeps the full width. */ @media (width < 640px) { .header--mobile-actions-stack:has(.site-header__sections) { --site-header-logo-size: var(--header-btn-size); grid-template-areas: "actions-start menu actions-end" "sections sections sections" "title title title"; &:not(:has(.header__title, .header__actions)) { grid-template-areas: "actions-start menu actions-end" "sections sections sections"; } > .site-header { display: contents; } .site-header__brand { grid-area: menu; } /* Spanning the header's columns, the row would hold their width against the brand's. */ .site-header__sections { align-items: center; contain: inline-size; display: flex; gap: var(--header-gap); grid-area: sections; justify-content: center; } .site-header__nav { flex: 0 1 auto; } /* The row scrolls sideways when the sections do not fit. */ .site-header__list { justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .site-header__link { --btn-padding: 0.5em; } /* With four links and the messages toggle, as an owner has, the row takes the header's side padding and the links a smaller size, so all five fit at 375px. Narrower screens still scroll. */ .site-header__sections:has(.site-header__item:nth-child(4)) { gap: 0; margin-inline: calc(0.25rem - var(--main-padding)); .site-header__list { gap: 0; } .site-header__link { --btn-padding: 0.5em 0.3em; --text-small: var(--text-x-small); } } .site-header__messages { flex: none; } } } } @layer utilities { /* Text */ .txt-xx-small { font-size: var(--text-xx-small); } .txt-x-small { font-size: var(--text-x-small); } .txt-small { font-size: var(--text-small); } .txt-normal { font-size: var(--text-normal); } .txt-medium { font-size: var(--text-medium); } .txt-large { font-size: var(--text-large); } .txt-x-large { font-size: var(--text-x-large); } .txt-xx-large { font-size: var(--text-xx-large); } .txt-align-center { text-align: center; } .txt-align-start { text-align: start; } .txt-align-end { text-align: end; } .txt-current { color: currentColor; } .txt-ink { color: var(--color-ink); } .txt-reversed { color: var(--color-ink-inverted); } .txt-negative { color: var(--color-negative); } .txt-positive { color: var(--color-positive); } .txt-subtle { color: var(--color-ink-dark); } .txt-alert { color: var(--color-marker); } .txt-undecorated { text-decoration: none; } .txt-underline { text-decoration: underline; } .txt-tight-lines { line-height: 1.2; } .txt-nowrap { white-space: nowrap; } .txt-balance { text-wrap: balance; } .txt-break { word-break: break-word; } .txt-uppercase { text-transform: uppercase; } .txt-capitalize { text-transform: capitalize; } .txt-capitalize-first-letter::first-letter { text-transform: capitalize; } .txt-link { color: var(--color-link); text-decoration: underline; } .font-weight-normal { font-weight: 400; } .font-weight-medium { font-weight: 500; } .font-weight-semibold { font-weight: 600; } .font-weight-bold { font-weight: 700; } .font-weight-black { font-weight: 900; } /* Flexbox and Grid */ .justify-end { justify-content: end; } .justify-start { justify-content: start; } .justify-center { justify-content: center; } .justify-space-between { justify-content: space-between; } .align-center { align-items: center; } .align-start { align-items: start; } .align-end { align-items: end; } .align-self-center { align-self: center; } .align-self-end { align-self: end; } .align-self-start { align-self: start; } .v-align-middle { vertical-align: middle; } .contain { contain: inline-size; } .display-inline { display: inline; } .flex { display: flex; } .flex-inline { display: inline-flex; } .flex-column { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .flex-item-grow { flex-grow: 1; } .flex-item-shrink { flex-shrink: 1; } .flex-item-no-shrink { flex-shrink: 0; } .flex-item-justify-start { margin-inline-end: auto; } .flex-item-justify-end { margin-inline-start: auto; } .gap { column-gap: var(--column-gap, var(--inline-space)); row-gap: var(--row-gap, var(--block-space)); } .gap-half { column-gap: var(--column-gap, var(--inline-space-half)); row-gap: var(--row-gap, var(--block-space-half)); } .gap-none { --column-gap: 0; --row-gap: 0; gap: 0; } /* Sizing */ .full-width { inline-size: 100%; } .min-width { min-inline-size: 0; } .half-width { inline-size: 50%; } .max-width { max-inline-size: 100%; } .min-content { inline-size: min-content; } .fit-content { inline-size: fit-content; } .max-inline-size { max-inline-size: 100%; } /* Overflow */ .overflow-x { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .overflow-y { overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; } .overflow-clip { text-overflow: clip; white-space: nowrap; overflow: hidden; } .overflow-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-line-clamp { -webkit-line-clamp: var(--lines, 2); -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: clip; white-space: normal; } /* Mouse pointer */ .non-clickable { cursor: default; pointer-events: none; } .cursor-pointer { cursor: pointer; } /* Padding */ .pad { padding: var(--block-space) var(--inline-space); } .pad-double { padding: var(--block-space-double) var(--inline-space-double); } .pad-block { padding-block: var(--block-space); } .pad-block-start { padding-block-start: var(--block-space); } .pad-block-end { padding-block-end: var(--block-space); } .pad-block-half { padding-block: var(--block-space-half); } .pad-block-start-half { padding-block-start: var(--block-space-half); } .pad-inline { padding-inline: var(--inline-space); } .pad-inline-start { padding-inline-start: var(--inline-space); } .pad-inline-end { padding-inline-end: var(--inline-space); } .pad-inline-half { padding-inline: var(--inline-space-half); } .pad-inline-double { padding-inline: var(--inline-space-double); } .unpad { padding: 0; } .unpad-block-end { padding-block-end: 0; } .unpad-inline { padding-inline: 0; } /* Margins */ .margin { margin: var(--block-space) var(--inline-space); } .margin-block { margin-block: var(--block-space); } .margin-block-half { margin-block: var(--block-space-half); } .margin-block-start { margin-block-start: var(--block-space); } .margin-block-start-half { margin-block-start: var(--block-space-half); } .margin-block-start-auto { margin-block-start: auto; } .margin-block-end { margin-block-end: var(--block-space); } .margin-block-end-half { margin-block-end: var(--block-space-half); } .margin-block-double { margin-block: var(--block-space-double); } .margin-block-end-double { margin-block-end: var(--block-space-double); } .margin-block-start-double { margin-block-start: var(--block-space-double); } .margin-inline { margin-inline: var(--inline-space); } .margin-inline-start { margin-inline-start: var(--inline-space); } .margin-inline-start-half { margin-inline-start: var(--inline-space-half); } .margin-inline-end { margin-inline-end: var(--inline-space); } .margin-inline-end-half { margin-inline-end: var(--inline-space-half); } .margin-inline-half { margin-inline: var(--inline-space-half); } .margin-inline-double { margin-inline: var(--inline-space-double); } .margin-none { margin: 0; } .margin-none-block { margin-block: 0; } .margin-none-block-start { margin-block-start: 0; } .margin-none-block-end { margin-block-end: 0; } .margin-none-inline { margin-inline: 0; } .margin-none-inline-start { margin-inline-start: 0; } .margin-none-inline-end { margin-inline-end: 0; } .center { margin-inline: auto; } .center-block { margin-block: auto; } /* Position */ .position-relative { position: relative; } .position-sticky { position: sticky; inset: var(--inset, 0 auto auto auto); z-index: var(--z, 1); } /* Fills */ .fill { background-color: var(--color-canvas); } .fill-black { background-color: var(--color-ink); } .fill-white { background-color: var(--color-ink-inverted); } .fill-shade { background-color: var(--color-ink-lightest); } .fill-selected { background-color: var(--color-selected); } .fill-highlight { background-color: var(--color-highlight); } .fill-transparent { background-color: transparent; } .fill-highlighter { display: inline-block; position: relative; z-index: 1; &::before { background-color: var(--color-highlight); border-radius: 0.2em; content: ""; inset-block: 0; inset-inline: -0.1em; position: absolute; transform: skewX(-10deg) rotate(1deg); z-index: -1; } } .translucent { opacity: var(--opacity, 0.66); } /* Borders */ .border { border: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); } .border-block { border-block: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); } .border-bottom { border-block-end: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); } .border-top { border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, var(--color-ink-lighter)); } .borderless { border: 0; } /* Border radius */ .border-radius { border-radius: var(--border-radius, 0.5em); } /* Shadows */ .shadow { box-shadow: var(--shadow); } /* Lists */ :where(.list-style-none) { list-style: none; margin: 0 auto; padding: 0; } :where(.list-unindented) { padding-inline-start: 1.25em; } /* Accessibility */ .visually-hidden, .for-screen-reader { block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; } /* Visibility */ [hidden] { display: none !important; } .display-contents, [contents] { display: contents; } .hide-in-pwa { @media (display-mode: standalone) { display: none; } } .hide-in-browser { @media (display-mode: browser) { display: none; } } .hide-focus-ring { --focus-ring-size: 0; } .hide-on-touch { @media (any-hover: none) { display: none; } } .show-on-touch { display: none; @media (any-hover: none) { display: unset; } } .show-on-native { body:not([data-platform~=native]) & { display: none; } } .hide-scrollbar { -ms-overflow-style: none; /* Edge */ scrollbar-width: none; /* FF */ /* Chrome/Safari/Opera */ &::-webkit-scrollbar { display: none; } } .hide-on-dark-mode { html[data-theme="dark"] & { display: none; } html:not([data-theme]) & { @media (prefers-color-scheme: dark) { display: none; } } } .hide-on-light-mode { html[data-theme="light"] & { display: none; } html:not([data-theme]) & { @media (prefers-color-scheme: light) { display: none; } } } } /* The app's tokens come from its _global.css, unlayered as Fizzy's are, earlier in style.css. This is unlayered too and follows it, so it wins. */ :root { color-scheme: light dark; /* The system stack, less the app's face (row 100, question 1). */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* trays.css, which the site doesn't take: the showcase's slide and the mocks' motion. */ --tray-duration: 350ms; /* The site's own: the gate mock types its query a character at this pace, as a person keys in a DNI. */ --typing-step: 75ms; /* The site's own: the night of a "before" band, dark in either theme, and the face of a note written by hand. */ --color-night: oklch(17% 0.02 232.58); --font-hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Marker Felt", cursive; /* The site's own: one fluid base, every other size a share of it. */ --font-size: clamp(1.125rem, 0.55rem + 1vw, 1.375rem); --size-display: 2.2em; --size-heading: 1.55em; --size-subheading: 1.15em; --size-lead: 1.15em; --size-small: 0.85em; --size-x-small: 0.75em; --hairline: color-mix(in oklch, var(--color-ink) 10%, transparent); --content-width: 72rem; --prose-width: 36em; --gutter: 1rem; @media (width >= 64em) { --gutter: 2rem; --size-display: 2.75em; --size-heading: 1.9em; } } /* What the app's elements.css adds to its reset, without the type and boxes it gives the app's bare elements. */ @layer reset { * { margin: 0; } html { -webkit-text-size-adjust: none; text-size-adjust: none; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } button, input, select, textarea { color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } } @layer base { /* On body, where the app's reset sets its own family. */ body { color: var(--color-ink); background-color: var(--color-canvas); font-family: var(--font-sans); font-size: var(--font-size); font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-weight: 800; letter-spacing: -0.026em; line-height: 1.15; } p { text-wrap: pretty; } a { color: var(--color-link); text-decoration-thickness: 0.07em; text-underline-offset: 0.15em; @media (any-hover: hover) { &:hover { text-decoration: none; } } } mark { background-color: var(--color-highlight); color: var(--color-ink); padding-inline: 0.15em; border-radius: 0.15em; } :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } .btn--large { --btn-padding: 0.7em 1.4em; } } @layer components { /* The app's header__skip-navigation: off to the side until a keyboard reaches it. */ .skip-link { position: absolute; inset-block-start: 0.75rem; inset-inline-start: -999em; z-index: 999; white-space: nowrap; &:focus { inset-inline-start: var(--gutter); } } } @layer components { .header { display: flex; align-items: center; gap: var(--inline-space-double); padding-block: 0.75rem; padding-inline: var(--gutter); background-color: var(--color-canvas); @media (width < 24em) { gap: var(--inline-space); } @media (width >= 64em) { padding-inline: calc(var(--gutter) + 1rem); } } .header__logo { flex-shrink: 0; color: var(--color-ink); font-size: 1.25em; @media (width < 24em) { font-size: 1.1em; } font-weight: 900; letter-spacing: -0.035em; text-decoration: none; } .header__tagline { display: none; flex: 1; min-inline-size: 0; color: var(--color-ink-dark); font-size: var(--size-small); font-weight: 600; text-align: center; @media (width >= 64em) { display: block; } } .header__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--inline-space); margin-inline-start: auto; font-size: var(--size-small); white-space: nowrap; @media (width < 24em) { gap: var(--inline-space-half); font-size: var(--size-x-small); .btn { --btn-padding: 0.5em 0.6em; } } } } @layer components { .canvas { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); padding-block: clamp(2rem, 6vw, 5rem); padding-inline: var(--gutter); background-color: var(--color-ink-lightest); @media (width >= 64em) { margin-inline: 1rem; } &:focus-visible { outline: none; } > * { inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto; } } } @layer components { .hero { display: grid; gap: 2.5em; align-items: center; } .hero:not(.hero--visual) .hero__text { text-align: center; } .hero__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; } .hero__lead { max-inline-size: var(--prose-width); margin-block-start: 0.8em; font-size: var(--size-lead); } .hero:not(.hero--visual) .hero__lead { margin-inline: auto; } .hero__actions { display: flex; flex-direction: column; align-items: start; gap: 0.25em; margin-block-start: 1.5em; } .hero:not(.hero--visual) .hero__actions { align-items: center; } /* Padded as the button beside it, so the two line up. */ .hero__link { padding: 0.7em 1.4em; font-weight: 700; } /* The home's pages, each a link and its line, under the two actions. */ .hero__links { display: grid; gap: 0.2em; margin-block-start: 1.5em; padding: 0; list-style: none; a { font-weight: 800; } } .hero:not(.hero--visual) .hero__links { justify-items: center; } .hero--visual { @media (width >= 64em) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4em; } .mock { box-shadow: var(--shadow); } } /* The home: the product's screen under the headline, and beside it from 64em once the script has made it a stage, in the same order. Without the script its views stack, and a stack beside the headline would push the headline out of sight. There the hero takes more than the page's measure, so the screen is half the window. */ @media (width >= 64em) { .js .hero.hero--product { max-inline-size: 96rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4em; align-items: start; .hero__text { text-align: start; } .hero__lead { margin-inline: 0; } .hero__actions, .hero__links { align-items: start; justify-items: start; } .hero__links { font-size: var(--size-small); } .hero__link { padding-inline: 0; } .hero__title { font-size: clamp(1.9em, 4.2vw, var(--size-display)); } } } } @layer components { .block__title { max-inline-size: 24em; margin-inline: auto; margin-block-end: 0.7em; font-size: var(--size-heading); text-align: center; } .block__lead, .block__prose { max-inline-size: var(--prose-width); margin-inline: auto; } .block__lead { margin-block-end: 2em; font-size: var(--size-lead); text-align: center; } .block__prose p + p { margin-block-start: 1em; } .block__more { margin-block-start: 1.75em; font-weight: 700; text-align: center; } } @layer components { .article { max-inline-size: var(--prose-width); p + p, p + ul, p + ol, ul + p, ol + p, * + .article__table, .article__table + *, * + blockquote, blockquote + * { margin-block-start: 1em; } ul, ol { padding-inline-start: 1.25em; } li + li { margin-block-start: 0.4em; } h3 { margin-block: 1.5em 0.5em; font-size: var(--size-subheading); } blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--hairline); color: var(--color-ink-dark); } } .article__kicker { font-size: var(--size-small); font-weight: 700; } .article__title { margin-block-start: 0.4em; font-size: var(--size-heading); font-weight: 900; letter-spacing: -0.03em; } .article__byline { margin-block-start: 0.8em; color: var(--color-ink-dark); font-size: var(--size-small); } .article__lead { margin-block-start: 1.25em; font-size: var(--size-lead); } .article__section, .article__links { margin-block-start: 2.5em; } .article__heading { margin-block-end: 0.6em; font-size: var(--size-subheading); } .article__answer { font-weight: 600; } .recording video { display: block; inline-size: 100%; border-radius: 0.5em; background-color: var(--color-canvas); box-shadow: var(--shadow); } /* A wide table scrolls inside the column, never the page. On a phone it reads at the body's size. */ .article__table { overflow-x: auto; @media (width >= 64em) { font-size: var(--size-small); } table { inline-size: 100%; border-collapse: collapse; } th, td { padding: 0.5em 0.75em 0.5em 0; border-block-end: 1px solid var(--hairline); text-align: start; vertical-align: top; } th { font-weight: 700; } } .article__links li { overflow-wrap: anywhere; } .posts { display: grid; gap: 2em; max-inline-size: var(--prose-width); margin-inline: auto; padding: 0; list-style: none; } .posts__title { font-size: var(--size-subheading); } .posts__meta { margin-block: 0.3em 0.5em; color: var(--color-ink-dark); font-size: var(--size-small); } /* A blog post: the title block centred over a left-aligned column, sections far apart, answers at lead size. */ .article--post { line-height: 1.55; .article__header { display: grid; justify-items: center; margin-block-end: 3em; text-align: center; } .article__title { max-inline-size: 20em; line-height: 1.1; text-wrap: balance; } .article__lead { max-inline-size: 30em; line-height: 1.4; } .article__section + .article__section, .article__links { margin-block-start: 3.5em; } .article__section:first-of-type { margin-block-start: 0; } .article__heading { margin-block-end: 0.5em; font-size: 1.25em; font-weight: 900; line-height: 1.15; @media (width >= 64em) { font-size: 1.45em; } } .article__links .article__heading { font-size: var(--size-subheading); } .article__answer { font-size: var(--size-lead); font-weight: 400; line-height: 1.45; } } /* A mock that shows the answer opens its section, wider than the column and centred on it. */ .article__figure { --figure-width: 100%; container-type: inline-size; inline-size: var(--figure-width); margin-block-end: 1.5em; margin-inline: calc((100% - var(--figure-width)) / 2); @media (width >= 64em) { --figure-width: min(48em, 100vw - 2 * var(--gutter) - 2rem); } .mock { --mock-size: calc(100cqi * 14 / 960); box-shadow: var(--shadow); } .rows { --rows-border-size: 0; --rows-shadow: none; } } .article__caption { max-inline-size: 32em; margin: 0.75em auto 0; color: var(--color-ink-dark); font-size: var(--size-small); text-align: center; } /* Once the title has scrolled away, and until the closing card shows, the demo is one tap away. */ .article__pill { position: fixed; inline-size: auto; max-inline-size: none; margin: 0; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 10; box-shadow: var(--shadow); font-size: var(--size-small); opacity: 0; scale: 0.9; visibility: hidden; transition: opacity 0.3s ease, scale 0.3s ease, visibility 0s linear 0.3s; } .article__pill--shown { opacity: 1; scale: 1; visibility: visible; transition-delay: 0s; } } @layer components { /* The sign-off and the page's note in the text column, then every page as one centred, wrapping run of bold ink links, set close, then the countries and the legal line. */ .footer { display: grid; justify-items: center; gap: 2.5em; max-inline-size: calc(var(--content-width) + 2 * var(--gutter)); margin-inline: auto; padding: 4em var(--gutter) 3em; text-align: center; } .footer__header { display: grid; justify-items: center; gap: 1em; } .footer__signoff { font-size: var(--size-heading); text-wrap: balance; } .footer__note { max-inline-size: 30em; color: var(--color-ink-dark); text-wrap: balance; strong { color: var(--color-ink); } } .footer__nav { inline-size: 100%; } .footer__links, .footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1em; padding: 0; font-weight: 900; list-style: none; a { color: var(--color-ink); text-decoration: none; @media (any-hover: hover) { &:hover { color: var(--color-link); } } } } .footer__small { display: grid; justify-items: center; gap: 0.6em; color: var(--color-ink-dark); } .footer__legal { font-size: var(--size-x-small); } } /* The app's small sizes are for a tool used all day at arm's length. A reader arrives here from a search and reads law, so every step of the app's scale is one size up, on a phone as on a desk. */ :root { --text-xx-small: 0.8rem; --text-x-small: 0.9rem; --text-small: 1rem; --text-normal: 1.15rem; --text-medium: 1.3rem; @media (max-width: 639px) { --text-xx-small: 0.8rem; --text-x-small: 0.9rem; --text-small: 1rem; --text-normal: 1.15rem; --text-medium: 1.3rem; } } @layer components { /* The header as the app draws its own: the name in the middle and the four pages beside it as flat links, with a ground under the one the reader is on. On a narrow screen the pages take a row of their own under the name. */ .header > .site-header { flex: 1; row-gap: 0.25rem; @media (width >= 960px) { column-gap: var(--inline-space-double); } } .header__wordmark { display: block; block-size: 2.25rem; inline-size: auto; } @media (width < 40em) { .site-header__list { gap: 0; } .site-header__link { --btn-padding: 0.5em; } } /* Four links in a row at 320px, as the app sets an owner's. */ @media (width < 24em) { .site-header__link { --btn-padding: 0.5em 0.3em; --text-small: var(--text-x-small); } } } @layer components { /* A small line under the hero's lead: how much the base holds, or where a place's other norms are. */ .hero__note { margin-block-start: 0.75em; color: var(--color-ink-darker); font-size: var(--size-small); } /* A page to go on to, as a link under the lead. */ .hero__more { margin-block-start: 0.75em; font-weight: 700; } .hero__note-link { color: inherit; } } @layer components { /* Where a page sits, from the index down. The app's breadcrumbs are its header's: centred, and cut to one line. */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em var(--inline-space-half); font-size: var(--text-small); font-weight: 700; letter-spacing: normal; } .crumbs__link { color: var(--color-ink); } .crumbs__separator { color: var(--color-ink-dark); } .crumbs__current { color: var(--color-ink-darker); } } @layer components { /* The app's bar and rows at the size the site reads at, under the frame's larger type. */ .listing { --rows-margin: var(--block-space-half) 0 0; min-inline-size: 0; font-size: 1.1875rem; letter-spacing: normal; text-align: start; } .listing--narrow { max-inline-size: 40rem; margin-inline: auto; } /* The bar filters by script alone, so without it the rows stand by themselves. It holds more than the app's does, so under 64em it wraps and the box takes a line of its own. */ .listing__filters { --filter-input-width: 22rem; display: none; flex-wrap: wrap; .js & { display: flex; } /* On a wide screen the bar stays in reach down a long list. Under 64em it wraps to several lines, and would take the screen. */ @media (width >= 64em) { position: sticky; inset-block-start: 0; z-index: 2; padding-block: var(--block-space-half); background-color: var(--color-ink-lightest); } .filter-bar__segments { flex-shrink: 0; } .filter-box { flex-basis: 100%; } /* The room kept for the clear button goes to the placeholder while the button is not there. */ .filter-bar__terms:placeholder-shown { --input-padding: 0.5em 1.3em; } .filter-bar__control { flex: 1 1 8rem; } @media (width >= 64em) { flex-wrap: nowrap; .filter-box { flex-basis: var(--filter-input-width); } /* Three selects beside the box: each is kept from taking the room the placeholder needs. */ .filter-bar__control { flex: 0 1 auto; max-inline-size: 13rem; } } } .listing__count { margin-block-start: var(--block-space); color: var(--color-ink-darker); font-size: var(--text-small); } /* A norm's row ends with a place, a category and a status, more than the app's rows carry, so under 64em they wrap. */ .listing__rows { .row__end { flex-shrink: 1; flex-wrap: wrap; row-gap: 0.25em; min-inline-size: 0; } @media (width >= 64em) { .row__end { flex-shrink: 0; flex-wrap: nowrap; } .row__end > .status { min-inline-size: 5.6em; text-align: end; } } } /* The app's own "load more" is a small button centred under its list. Its pagination.css is not taken: it draws the unseen link its controller watches, which takes no click. Here the way back sits beside the way on. */ .listing__pagination { display: flex; flex-wrap: wrap; gap: var(--inline-space); justify-content: center; margin-block-start: var(--block-space); .btn[aria-busy="true"] { cursor: progress; opacity: 0.5; } } /* The app shows its empty state from its filter controller's attributes. The site's script sets this one. */ .listing[data-unmatched] > .filter__empty { display: block; margin-block-start: var(--block-space); } } @layer components { /* A norm is the marketing site's article: a centred title block over one column of content. What follows the article, the related norms and the facts, keeps to the same column. */ .norm { display: grid; gap: var(--block-space); letter-spacing: normal; > * { inline-size: 100%; max-inline-size: var(--prose-width); margin-inline: auto; } .crumbs { justify-content: center; } } /* The marketing article is set far apart, for a post that is read through. A norm is looked up, so its page is set closer: less air over the title, between its lines and between the sections. */ .canvas:has(> .norm) { padding-block: clamp(1.25rem, 3vw, 2.5rem); } .norm .article--post { line-height: 1.45; .article__header { margin-block-end: 0; } .article__title { margin-block-start: 0.25em; } .article__byline { margin-block-start: 0.4em; } .article__lead { margin-block-start: 0.6em; } .article__section + .article__section { margin-block-start: 2em; } .article__heading { margin-block-end: 0.3em; } } .norm__marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--inline-space-half) var(--inline-space); margin-block-start: 0.7em; } .norm__keywords { color: var(--color-ink-darker); font-size: var(--size-small); } .norm__keywords-label { margin-inline-end: 0.5ch; } .norm__heading { margin-block-end: 0.5em; font-size: 1.25em; font-weight: 900; line-height: 1.15; } /* How many obligations of each kind, each count a link down to its group. */ .obligations__index { display: flex; flex-wrap: wrap; gap: var(--inline-space-half); } .norm .obligations__title { margin-block: 1em 0.4em; font-size: 1.05em; font-weight: 800; scroll-margin-block-start: 5em; } /* The marketing site's green tick before each item of a list, as its css/marks.css draws it. */ ul.checks { padding-inline-start: 0; list-style: none; > li { position: relative; padding-inline-start: 1.8em; } > li::before { position: absolute; inset-block-start: 0.18em; inset-inline-start: 0; inline-size: 1.15em; block-size: 1.15em; border-radius: 50%; background: var(--color-success-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.6l2.5 2.5 5.1-5.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; content: ""; } } .norm .obligations { display: grid; gap: 0.4em; } /* An obligation is one of the app's panels with the tick inside it: what it asks for, in a sentence, and what the article says of it. The article spaces every paragraph from the one before. Inside an obligation they are one block. */ .obligations > .obligation { --panel-size: 100%; min-inline-size: 0; margin: 0; padding: 0.6em 1em 0.6em 3em; scroll-margin-block-start: 5em; &::before { inset-block-start: 0.75em; inset-inline-start: 1em; } p + p { margin-block-start: 0.2em; } } .obligation__kind { margin-block-end: 0.35em; font-size: var(--size-small); } .norm .obligation__title { margin-block: 0 0.15em; font-size: 1em; font-weight: 700; } /* What a company has or does for the norm, or one obligation, to bind it. */ .norm .applies { margin-block-start: 0.6em; font-weight: 600; } .obligation .obligation__applies { margin-block-start: 0.4em; font-size: var(--size-small); font-weight: 600; } /* What to show, when and who, a quiet label and its words to a line. */ .requirement { display: grid; gap: 0.15em; margin-block-start: 0.5em; padding-block-start: 0.5em; border-block-start: var(--border); } .requirement__line { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: baseline; column-gap: var(--inline-space); } .requirement__label { color: var(--color-ink-dark); font-size: var(--size-small); font-weight: 600; } .requirement__words { margin: 0; overflow-wrap: anywhere; } /* The norm's dates as a calendar file, offered over its obligations. */ .obligations__calendar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--block-space-half) var(--inline-space); margin-block-end: var(--block-space); } .obligations__calendar-note { color: var(--color-ink-dark); font-size: var(--size-small); } /* The article as the official text has it, set apart by its ground alone. */ .quote { margin-block-start: 0.5em; padding: 0.7em 0.9em; border-radius: var(--radius-lg); background-color: var(--tint-ink-5); color: var(--color-ink-darker); font-size: var(--size-small); } .quote__source { margin-block-end: 0.2em; font-weight: 700; } /* The marketing article rules its quotes down the side. This one already has its ground. */ .quote .quote__words { margin: 0; padding: 0; border: 0; color: inherit; } /* Where the norm says it: the article, named and not quoted. The words are in the official text. */ .obligation__article { margin-block-start: 0.3em; color: var(--color-ink-dark); font-size: var(--size-small); font-weight: 600; } /* The first thing under the title, in the app's panel and in small type: the assistants it opens in, the norm's facts one to a line, each behind the app's glyph, then the notes. */ .norm .facts { --panel-padding: 0.8em 1em; --panel-size: 100%; display: grid; gap: 0.5em; margin-block-start: var(--block-space); font-size: var(--text-small, 0.85rem); line-height: 1.4; .icon { --icon-size: 1.1em; } p { margin: 0; } } /* The article takes the space off its first section, which here follows the panel. */ .norm .facts + .article__section { margin-block-start: 1.75em; } /* The facts, one to a line, each behind its glyph. */ .norm .facts__list { display: grid; gap: 0.2em; padding: 0; list-style: none; } .norm .facts .facts__fact { display: flex; margin: 0; align-items: start; gap: 0.45em; overflow-wrap: anywhere; .icon { margin-block-start: 0.15em; color: var(--color-ink-dark); } } .facts__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; .btn { --btn-padding: 0.3em 0.8em; font-size: 1em; } } .facts__ask { margin-inline-end: 0.2em; font-weight: 700; } .facts__note { color: var(--color-ink-dark); } /* Copying needs the script. */ .facts__copy { display: none; .js & { display: inline-flex; } } } @layer components { /* The prompts, one under another in the text column, at the size the site reads at under the frame's larger type. */ .prompts { display: grid; gap: var(--block-space-double); max-inline-size: 44rem; font-size: 1.1875rem; letter-spacing: normal; } .prompt { min-inline-size: 0; } .prompt__header { display: flex; align-items: start; justify-content: space-between; gap: var(--inline-space); } .prompt__title { min-inline-size: 0; font-size: var(--text-large); font-weight: 900; letter-spacing: -0.02em; } /* Copying needs the script. */ .prompt__copy { display: none; flex-shrink: 0; .js & { display: inline-flex; } } /* The prompt as it is pasted, with its line breaks, set apart by its ground alone as a norm's quoted article is. */ .prompt__text { margin-block-start: var(--block-space-half); padding: 0.9rem 1rem; border-radius: var(--radius-lg); background-color: var(--tint-ink-5); color: var(--color-ink-darker); font-family: inherit; font-size: var(--text-small); white-space: pre-wrap; overflow-wrap: anywhere; } .prompt__note { margin-block-start: var(--block-space-half); } } @layer components { /* The glossary, one term under another in the text column, at the size the prompts are read at. */ .glossary { display: grid; gap: var(--block-space-double); max-inline-size: 44rem; font-size: 1.1875rem; letter-spacing: normal; } .glossary__term { scroll-margin-block-start: 5em; } .glossary__name { font-size: var(--text-large); font-weight: 900; letter-spacing: -0.02em; } .glossary__definition { margin: 0.3em 0 0; } .glossary__norms { margin-block-start: 0.4em; color: var(--color-ink-dark); font-size: var(--text-small); } /* A term a norm names, linked to its definition: a dotted line, so it is told from a link out of the page. */ .term { color: inherit; text-decoration: underline dotted; text-underline-offset: 0.2em; } } @layer components { /* The bulletin's form at the head of the footer, as mailpieces draws its own: a small sentence, and under it the field and its button. */ .subscription { color: var(--color-ink-dark); font-size: var(--size-small); line-height: 1.4; } .subscription__label { display: block; text-wrap: balance; } .subscription__bulletin { color: inherit; } /* The field and its button read as one control. */ .subscribe { display: flex; margin-block-start: 0.625em; margin-inline: auto; max-inline-size: 40ch; } .subscribe__email { --input-background: var(--color-canvas); --input-border-color: var(--color-ink-lighter); --input-border-radius: var(--radius-lg) 0 0 var(--radius-lg); --input-padding: 0.5em 1em; border-inline-end-color: transparent; flex: 1 1 auto; inline-size: auto; min-inline-size: 0; } .subscribe__submit { --btn-background: var(--color-link); --btn-border-color: var(--color-link); --btn-color: var(--color-ink-inverted); --btn-border-radius: 0 var(--radius-lg) var(--radius-lg) 0; --btn-font-weight: 500; --btn-icon-size: 1.1em; /* .btn--plain sizes an icon to fill its button */ --btn-padding: 0.5em 1em; border-inline-start-color: transparent; flex: none; } /* One control, so the field's edge answers the pointer and the focus anywhere on it. */ .subscribe:focus-within { .subscribe__email { --input-border-color: var(--color-ink-medium); } } @media (any-hover: hover) { .subscribe:hover { .subscribe__email { --input-border-color: var(--color-ink-medium); } } } }