*, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; } button, input, textarea, select { font: inherit; } [hidden]:not([hidden="until-found"]) { display: none !important; } :where(img, svg, video) { max-inline-size: 100%; block-size: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } } :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --line-height: 1.5; --line-height-tight: 1.25; --line-height-relaxed: 1.75; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-size-xs: 0.8125rem; --font-size-sm: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --gap: 0.75rem; --density-space: var(--space-40); --space-10: 0.25rem; --space-20: 0.5rem; --space-30: 0.75rem; --space-40: 1rem; --space-50: 1.5rem; --space-60: 2rem; --border-width: 1px; --radius-full: 9999px; --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04); --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15); --duration: 150ms; --duration-fast: 100ms; --duration-slow: 200ms; --duration-spin: 0.75s; --duration-shimmer: 1.2s; --ease-enter: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --focus-outline-color: currentColor; --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color); --focus-outline-offset: 2px; --focus-ring-width: 3px; --indicator-offset: 14.65%; --backdrop-color: rgb(0 0 0); --backdrop-opacity: 0.45; --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity)); --bar-height: 0.65rem; --control-size-sm: 2rem; --control-size-md: 2.375rem; --control-size-lg: 2.75rem; --control-size: var(--control-size-md); --control-pad-x: var(--font-size-md); --control-font-size: var(--font-size-md); --choice-control-size: 1.125em; --disabled-opacity: 0.65; } :root, [data-theme] { --state-selected: var(--primary); --state-selected-fg: var(--primary-fg); --state-disabled: var(--text-subtle); --indicator-ring: var(--surface); } :root { --soft-bg-mix: 88%; --soft-border-mix: 65%; --soft-hover-alpha: 12%; --soft-fg-mix: 100%; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E"); --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); --viewport-block: 100vh; --viewport-inline: 100vw; --z-sticky: 10; --z-menu: 20; --z-status: 60; } @media (forced-colors: active) { :root, [data-theme] { --state-disabled: GrayText; --disabled-opacity: 1; } } @supports (block-size: 100dvh) { :root { --viewport-block: 100dvh; } } @supports (inline-size: 100vi) { :root { --viewport-inline: 100vi; } } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --shadow: 0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent), 0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent); --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent); } :root, [data-theme] { --backdrop-fill: color-mix( in oklch, var(--backdrop-color) calc(var(--backdrop-opacity) * 100%), transparent ); } } :root { color-scheme: light dark; } [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @supports not (color: light-dark(red, blue)) { :root, [data-theme="light"], [data-theme="dark"] { color-scheme: light; } } :root, [data-theme="light"] { --primary: hsl(268 32% 33%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(16 38% 38%); --secondary-fg: hsl(0 0% 98%); --success: hsl(150 40% 31%); --success-fg: hsl(0 0% 98%); --warning: hsl(36 68% 34%); --warning-fg: hsl(0 0% 98%); --danger: hsl(5 58% 43%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(258 7% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(262 24% 96%); --surface-solid: hsl(261 16% 13%); --text: hsl(261 20% 13%); --text-muted: hsl(259 9% 42%); --text-subtle: hsl(258 7% 57%); --border: hsl(260 15% 88%); --focus: var(--neutral); --focus-ring: hsl(258 7% 43% / 0.3); --hover-overlay: hsl(260 20% 10% / 0.04); --radius: 0.5rem; --radius-sm: 0.25rem; --radius-lg: 0.75rem; --shadow-color: hsl(260 25% 10%); --hgroup-gap: 0.25em; } :root, [data-theme] { --heading: var(--text); --selection-bg: var(--primary); --selection-fg: var(--primary-fg); --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); } :where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) { --primary-soft-fg: initial; --secondary-soft-fg: initial; --success-soft-fg: initial; --warning-soft-fg: initial; --danger-soft-fg: initial; --neutral-soft-fg: initial; } :root, [data-theme="light"], [data-theme="dark"] { --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%); --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%); --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%); --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%); --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%); } :root, [data-theme] { accent-color: var(--primary); } [data-tone="dark"] { --tone-fg: white; } [data-tone="light"] { --tone-fg: var(--text); } @supports (color: color-mix(in oklch, red, white)) { :root, [data-theme] { --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent); } } @supports (color: light-dark(red, blue)) { :root, [data-theme="light"] { --primary: light-dark(hsl(268 32% 33%), hsl(268 42% 76%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(268 30% 12%)); --secondary: light-dark(hsl(16 38% 38%), hsl(18 45% 72%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(18 32% 11%)); --success: light-dark(hsl(150 40% 31%), hsl(150 38% 62%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(150 35% 8%)); --warning: light-dark(hsl(36 68% 34%), hsl(40 62% 64%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(5 58% 43%), hsl(4 60% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(4 35% 10%)); --neutral: light-dark(hsl(258 7% 43%), hsl(258 10% 72%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(260 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(263 17% 9%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(263 15% 12%)); --surface-subtle: light-dark(hsl(262 24% 96%), hsl(263 13% 16%)); --surface-solid: light-dark(hsl(261 16% 13%), hsl(0 0% 96%)); --text: light-dark(hsl(261 20% 13%), hsl(260 12% 95%)); --text-muted: light-dark(hsl(259 9% 42%), hsl(259 9% 67%)); --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%)); --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%)); --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28)); --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%)); } } @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) { :root, [data-theme] { --focus-ring: light-dark( color-mix(in oklch, var(--focus) 30%, transparent), color-mix(in oklch, var(--focus) 28%, transparent) ); } } @media (prefers-contrast: more) { :root, [data-theme][data-theme] { --border-width: 2px; --focus-outline-offset: 3px; --focus-ring-width: 4px; --text-muted: var(--text); --text-subtle: var(--text); } } body { background: var(--surface); color: var(--text); font-family: var(--font-sans); line-height: var(--line-height); } a { color: var(--link, inherit); text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 0.12em; } :where(h1, h2, h3, h4, h5, h6) { color: var(--heading, inherit); line-height: var(--line-height-tight); text-wrap: balance; } hgroup { display: grid; gap: var(--hgroup-gap); } hgroup > * { margin-block: 0; } hr { border: 0; border-block-start: var(--border-width) solid var(--border); margin-block: var(--hr-space, var(--space-60)); margin-inline: 0; } code, kbd, samp, pre { font-family: var(--font-mono); } pre { overflow-x: auto; } small { font-size: 0.875em; } ::selection { background: var(--selection-bg, var(--primary)); color: var(--selection-fg, var(--primary-fg)); } .primary { --intent: var(--primary); --intent-fg: var(--primary-fg); --intent-soft-fg: var(--primary-soft-fg); } .secondary { --intent: var(--secondary); --intent-fg: var(--secondary-fg); --intent-soft-fg: var(--secondary-soft-fg); } .success { --intent: var(--success); --intent-fg: var(--success-fg); --intent-soft-fg: var(--success-soft-fg); } .warning { --intent: var(--warning); --intent-fg: var(--warning-fg); --intent-soft-fg: var(--warning-soft-fg); } .danger { --intent: var(--danger); --intent-fg: var(--danger-fg); --intent-soft-fg: var(--danger-soft-fg); } .neutral { --intent: var(--neutral); --intent-fg: var(--neutral-fg); --intent-soft-fg: var(--neutral-soft-fg); } .intent-color { color: var(--intent); } .solid { --ui-bg: var(--intent, var(--neutral)); --ui-fg: var(--intent-fg, var(--neutral-fg)); --ui-border: transparent; } .soft { --ui-bg: var(--surface-subtle); --ui-border: var(--border); --ui-fg: var(--intent, var(--text)); } .outline { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: var(--intent, currentColor); } .surface { --ui-bg: var(--surface); --ui-fg: var(--intent, var(--text)); --ui-border: var(--border); } .inverted { --ui-bg: var(--surface-solid); --ui-fg: var(--surface); --ui-border: transparent; --ui-hover-bg: var(--surface-solid); --heading: var(--surface); --busy-overlay-bg: var(--surface-solid); background: var(--ui-bg); color: var(--ui-fg); border-color: var(--ui-border); } .compact { --gap: var(--space-20); --density-space: var(--space-20); --control-size: var(--control-size-sm); } .spacious { --gap: var(--space-50); --density-space: var(--space-50); --control-size: var(--control-size-lg); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).sm { --control-size: var(--control-size-sm); --control-font-size: var(--font-size-sm); --control-pad-x: var(--font-size-sm); } :where( .btn, .input, .textarea, .select, .color, .file, .field, .choice, .input-icon, .otp, .join, .pagination, .tabs, .tab, .flyout ).lg { --control-size: var(--control-size-lg); --control-font-size: var(--font-size-lg); --control-pad-x: var(--font-size-lg); } @supports (color: color-mix(in oklch, red, white)) { .soft { --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral))); --ui-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --ui-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } .inverted { --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black); } } :focus { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } @supports selector(:focus-visible) { :focus:not(:focus-visible) { outline: none; } } @media print { :root, body { color-scheme: light; background: #fff; color: #000; } h1, h2, h3, h4, h5, h6 { break-after: avoid; } } .prose { --prose-size: 1rem; --prose-line-height: 1.7; --prose-measure: 70ch; --prose-flow: 1em; --prose-heading-line-height: 1.2; --prose-h1: 2rem; --prose-h2: 1.5rem; --prose-h3: 1.25rem; --prose-h4: 1.125rem; max-inline-size: var(--prose-measure); font-size: var(--prose-size); line-height: var(--prose-line-height); overflow-wrap: break-word; } .prose > * { margin-block-end: 0; } .prose > * + * { margin-block-start: var(--prose-flow); } .prose :where(h1, h2, h3, h4, h5, h6) { margin-block: 1.5em 0; color: var(--heading, var(--text)); font-weight: var(--font-weight-semibold); line-height: var(--prose-heading-line-height); } .prose :where(p, li, blockquote) { text-wrap: pretty; } .prose > :first-child { margin-block-start: 0; } .prose :where(h1) { font-size: var(--prose-h1); } .prose :where(h2) { font-size: var(--prose-h2); } .prose :where(h3) { font-size: var(--prose-h3); } .prose :where(h4) { font-size: var(--prose-h4); } .prose :where(a) { color: var(--link, var(--primary)); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } .prose :where(a:hover, a:focus-visible) { text-decoration-thickness: 0.12em; } @supports (color: color-mix(in oklch, red, white)) { .prose :where(a:hover, a:focus-visible) { color: color-mix(in oklab, var(--link, var(--primary)), var(--text) 15%); } } .prose :where(ul, ol) { padding-inline-start: 1.5em; } .prose :where(li + li) { margin-block-start: 0.35em; } .prose :where(dt) { font-weight: var(--font-weight-semibold); } .prose :where(dd) { margin-inline-start: 1.5em; } .prose :where(dd + dt) { margin-block-start: 0.75em; } .prose :where(code) { padding: 0.15em 0.3em; border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text); font-size: 0.875em; } .prose :where(kbd) { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.75em; min-block-size: 1.6em; padding-inline: 0.45em; border: var(--border-width) solid var(--border); border-block-end-width: calc(var(--border-width) * 2); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); font-family: var(--font-mono); font-size: 0.875em; font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; vertical-align: 0.08em; } .prose :where(pre) { padding: 1em; border: var(--border-width) solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); } .prose :where(pre) :where(code) { padding: 0; background: transparent; } .prose :where(blockquote) { margin-inline: 0; padding-inline-start: 1em; border-inline-start: var(--border-width) solid var(--border); color: var(--text-muted); } .prose :where(figure) { margin-inline: 0; } .prose :where(figcaption) { margin-block-start: 0.5em; color: var(--text-muted); font-size: 0.875em; } .prose :where(table) { inline-size: 100%; border-collapse: collapse; } .prose :where(th, td) { padding: 0.5em; border-block-end: var(--border-width) solid var(--border); text-align: start; } .prose.sm { --prose-size: 0.9375rem; --prose-h1: 1.75rem; --prose-h2: 1.375rem; --prose-h3: 1.125rem; --prose-h4: 1rem; } .prose.lg { --prose-size: 1.125rem; --prose-measure: 72ch; --prose-h1: 2.25rem; --prose-h2: 1.625rem; --prose-h3: 1.375rem; --prose-h4: 1.25rem; } .lead { font-size: 1.125em; line-height: var(--line-height-relaxed); } :where(.overline) { --intent: initial; } .overline { color: var(--text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; text-transform: uppercase; } .overline.pill { --overline-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 0.5em; padding-inline: 0.6em; padding-block: 0.25em; inline-size: fit-content; max-inline-size: 100%; color: var(--intent, var(--text-muted)); border: var(--border-width) solid var(--border); border-radius: var(--overline-radius); background: var(--surface); } @supports (color: color-mix(in oklch, red, white)) { .overline.pill { border-color: color-mix(in oklab, var(--intent, var(--border)) 35%, var(--border)); background: color-mix(in oklab, var(--intent, transparent) 6%, var(--surface)); } } :root { --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vw), 4.25rem); --fluid-title: clamp(2rem, calc(1.75rem + 1.111vw), 2.75rem); --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vw), 1.25rem); } @supports (inline-size: 100vi) { :root { --fluid-display: clamp(2.75rem, calc(2.25rem + 2.222vi), 4.25rem); --fluid-title: clamp(2rem, calc(1.75rem + 1.111vi), 2.75rem); --fluid-lead: clamp(1.125rem, calc(1.0833rem + 0.185vi), 1.25rem); } } .text-display { font-size: var(--fluid-display); line-height: var(--line-height-tight); text-wrap: balance; } .text-title { font-size: var(--fluid-title); line-height: var(--line-height-tight); text-wrap: balance; } .text-lead { font-size: var(--fluid-lead); line-height: var(--line-height-relaxed); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .stack > * { margin-block: 0; } .cluster { display: flex; flex-direction: row; flex-wrap: var(--cluster-wrap, wrap); align-items: var(--cluster-align, center); justify-content: var(--cluster-justify, flex-start); gap: var(--gap); } .cluster > * { margin: 0; } .center { box-sizing: content-box; inline-size: calc(100% - var(--center-pad, 1rem) * 2); max-inline-size: var(--center-size, 72rem); margin-inline: auto; padding-inline: var(--center-pad, 1rem); } .measure { max-inline-size: var(--measure, 70ch); } .frame { overflow: hidden; aspect-ratio: var(--frame-ratio, 16 / 9); } .frame > :where(img, video, iframe, canvas, svg) { inline-size: 100%; block-size: 100%; object-fit: cover; } .grid { display: grid; gap: var(--gap); grid-template-columns: var( --grid-columns, repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)) ); } :where(.grid-2, .grid-3, .grid-4, .grid-6) { display: grid; gap: var(--gap); grid-template-columns: repeat( auto-fill, minmax( min( 100%, max(16rem, calc((100% - (var(--grid-count) - 1) * var(--gap)) / var(--grid-count))) ), 1fr ) ); } .grid-2 { --grid-count: 2; } .grid-3 { --grid-count: 3; } .grid-4 { --grid-count: 4; } .grid-6 { --grid-count: 6; } :where(.grid, .grid-2, .grid-3, .grid-4, .grid-6) > * { min-inline-size: 0; } @container actual-container (min-width: 0px) { :where(.grid-2, .grid-3, .grid-4, .grid-6) { grid-template-columns: 1fr; } } @container actual-container (min-width: 28rem) { :where(.grid-2, .grid-4, .grid-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container actual-container (min-width: 48rem) { :where(.grid-3, .grid-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container actual-container (min-width: 64rem) { :where(.grid-4) { grid-template-columns: repeat(4, minmax(0, 1fr)); } :where(.grid-6) { grid-template-columns: repeat(6, minmax(0, 1fr)); } } :where(.btn) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; --ui-hover-bg: initial; } .btn { --btn-font-size: var(--control-font-size); --btn-min-size: var(--control-size); --btn-pad-x: var(--control-pad-x, 1em); --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral)))); --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg)))); --btn-border: var(--ui-border, var(--btn-default-border, transparent)); --btn-default-hover-bg: var(--btn-bg); --btn-radius: var(--radius); --btn-focus-color: var(--intent, var(--focus)); --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08)); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap, 0.375em); min-block-size: var(--btn-min-size); padding-block: var(--space-20); padding-block: max(var(--space-10), calc((var(--btn-min-size) - 1lh) / 2)); padding-inline: var(--btn-pad-x); border: var(--border-width) solid var(--btn-border-color, var(--btn-border)); border-block-end-color: var( --btn-border-block-end-color, var(--btn-border-color, var(--btn-border)) ); border-block-end-width: var(--btn-border-block-end-width, var(--border-width)); border-radius: var(--btn-radius); background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: var(--btn-font-size); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; cursor: pointer; transition: background-color var(--duration), border-color var(--duration), color var(--duration), box-shadow var(--duration), transform var(--duration); } .btn.icon-only { inline-size: var(--btn-min-size); block-size: var(--btn-min-size); padding: 0; } @supports (color: color-mix(in oklch, red, white)) { .btn { --btn-focus-ring-color: color-mix(in oklch, var(--btn-focus-color) 28%, transparent); } } .btn.ghost { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: transparent; } .btn.outline, .btn.ghost, .btn.link, .btn.soft { --btn-hover-overlay: transparent; } .btn:is(.outline, .ghost) { --ui-hover-bg: transparent; } @supports (color: color-mix(in oklch, red, white)) { .btn { --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black); } .btn.soft { --ui-hover-bg: color-mix( in oklab, var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)), var(--intent, var(--neutral)) ); } .btn.outline, .btn.ghost { --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent); } } .btn:not(:where(:disabled, [aria-disabled="true"])):hover { background: var(--ui-hover-bg, var(--btn-default-hover-bg)); box-shadow: inset 0 0 0 999px var(--btn-hover-overlay); } .btn:not(:where(:disabled, [aria-disabled="true"])):active { transform: translateY(1px); } .btn.link { --ui-bg: transparent; --ui-fg: var(--intent, currentColor); --ui-border: transparent; --btn-radius: var(--radius-sm); min-block-size: auto; padding-inline: 0; inline-size: fit-content; max-inline-size: 100%; border: 0; text-decoration: underline; text-underline-offset: 0.18em; } .btn.link:not(:where(:disabled, [aria-disabled="true"])):hover { background: transparent; text-decoration-thickness: 0.12em; } .btn:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring)); } .btn.link:focus-visible { outline: var(--focus-outline); outline-offset: 0.2em; box-shadow: none; } .btn:disabled { cursor: not-allowed; opacity: var(--disabled-opacity); } a.btn[aria-disabled="true"] { cursor: not-allowed; opacity: var(--disabled-opacity); pointer-events: none; } .btn[aria-busy="true"]:not(:disabled) { cursor: progress; } .btn[aria-busy="true"] > .spinner { --spinner-width: 0.15em; } .btn:is([aria-pressed="true"], [aria-current="page"]):not(.link) { --btn-bg: var(--intent, var(--state-selected)); --btn-fg: var(--intent-fg, var(--state-selected-fg)); --btn-border: var(--intent, var(--state-selected)); --ui-hover-bg: var(--btn-bg); } @media (forced-colors: active) { a.btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; } } :where(.card) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .card { --card-pad: var(--space-40); --card-gap: var(--space-30); --card-radius: var(--radius-lg); --card-max-inline-size: none; --card-bg: var(--ui-bg, var(--surface-raised)); --card-fg: var(--ui-fg, var(--text)); --heading: var(--card-fg); --busy-overlay-bg: var(--card-bg); max-inline-size: var(--card-max-inline-size); padding: var(--card-pad); background: var(--card-bg); color: var(--card-fg); border: var(--border-width) solid var(--ui-border, var(--border)); border-radius: var(--card-radius); } :where(.card) { display: flex; flex-direction: column; gap: var(--card-gap); } :where(.card) > * { min-inline-size: 0; margin-block: 0; } .card > :where(header, footer) { display: flex; flex-wrap: wrap; align-items: var(--items-align, center); justify-content: space-between; gap: var(--space-30); min-inline-size: 0; } .card > :where(header, footer) > * { min-inline-size: 0; margin-block: 0; } .card > header { align-items: var(--items-align, flex-start); } .card > footer { margin-block-start: auto; } .card.raised { box-shadow: var(--shadow); } .card.subtle { --card-bg: var(--surface-subtle); } .card.compact { --card-pad: var(--space-20); } .card > .bleed { margin-inline: calc(var(--card-pad) * -1); max-inline-size: none; } .card > .bleed:first-child { margin-block-start: calc(var(--card-pad) * -1); border-start-start-radius: inherit; border-start-end-radius: inherit; } .card > .bleed:last-child { margin-block-end: calc(var(--card-pad) * -1); border-end-start-radius: inherit; border-end-end-radius: inherit; } .card > :where(img, picture, video, canvas, svg).bleed { display: block; inline-size: calc(100% + var(--card-pad) * 2); max-inline-size: none; } .card > picture.bleed { overflow: hidden; } .card > picture.bleed > img { display: block; inline-size: 100%; block-size: auto; } .card > :where(header, footer, figure).bleed { padding: var(--card-pad); } @media print { .card { border: var(--border-width) solid CanvasText; break-inside: avoid; } } :where(.navbar) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .navbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: var(--space-30); padding-inline: var(--space-40); border: var(--border-width) solid var(--ui-border, var(--border)); border-radius: var(--radius-lg); background: var(--ui-bg, var(--surface-raised)); color: var(--ui-fg, var(--text)); } .navbar-brand { display: inline-flex; align-items: center; gap: var(--space-20); color: var(--ui-fg, var(--text)); font-weight: var(--font-weight-bold); text-decoration: none; } .navbar-brand:focus-visible { border-radius: var(--radius-sm); } .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin: 0; padding: 0; list-style: none; } .nav-link { display: inline-flex; align-items: center; min-block-size: var(--control-size-sm); padding-inline: var(--space-20); border-radius: var(--radius); color: var(--ui-fg, var(--text-muted)); font-weight: var(--font-weight-medium); text-decoration: none; } .nav-link[aria-current] { background: var(--surface-subtle); color: var(--state-selected); } .nav-link:hover { background: var(--surface-subtle); color: var(--text); } .nav-link[aria-current]:hover { color: var(--state-selected); } .nav-list { display: grid; grid-template-columns: minmax(0, 1fr); --gap: var(--space-20); gap: var(--gap); margin: 0; padding: 0; list-style: none; } .nav-list > li { margin: 0; } .nav-list .nav-link { position: relative; inline-size: 100%; } .nav-list .nav-link[aria-current]::before { content: ""; position: absolute; inset-block: var(--space-20); inset-inline-start: 0; border-inline-start: 2px solid currentColor; } :where(.badge) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; --ui-hover-bg: initial; } .badge { --badge-size: 1.5rem; --badge-pad-x: calc(var(--badge-size) / 3); --badge-font-size: var(--font-size-sm); --badge-icon-size: 1em; --badge-dot-size: 0.5rem; --badge-dismiss-icon-size: 0.875em; --badge-default-bg: var(--surface-subtle); --badge-default-fg: var(--intent, var(--text)); --badge-default-border: var(--border); --badge-default-hover-bg: var(--badge-bg); --badge-bg: var(--ui-bg, var(--badge-default-bg)); --badge-fg: var(--ui-fg, var(--badge-default-fg)); --badge-border: var(--ui-border, var(--badge-default-border)); --badge-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; gap: 0.35em; flex: none; inline-size: fit-content; max-inline-size: 100%; min-block-size: var(--badge-size); padding-inline: var(--badge-pad-x); border: var(--border-width) solid var(--badge-border); border-radius: var(--badge-radius); background: var(--badge-bg); color: var(--badge-fg); font-size: var(--badge-font-size); font-weight: var(--font-weight-medium); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--duration), border-color var(--duration), color var(--duration), box-shadow var(--duration); } .badge.sm { --badge-size: 1.25rem; --badge-font-size: var(--font-size-xs); --badge-dot-size: 0.375rem; } .badge.lg { --badge-size: 1.875rem; --badge-font-size: var(--font-size-md); --badge-dot-size: 0.625rem; } .badge > :where(svg, img, [aria-hidden="true"]:not(.dot)) { flex: none; inline-size: 1em; block-size: 1em; font-size: var(--badge-icon-size); line-height: 1; } @supports (color: color-mix(in oklch, red, white)) { .badge { --badge-default-bg: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); --badge-default-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --badge-default-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } } .badge:empty { --badge-size: var(--badge-dot-size); --badge-bg: var(--intent, var(--neutral)); --badge-fg: var(--intent-fg, var(--neutral-fg)); --badge-border: transparent; padding: 0; border: 0; inline-size: var(--badge-size); block-size: var(--badge-size); } .badge > .dot { background-color: currentColor; } .badge > button { display: inline-grid; place-items: center; flex: 0 0 auto; min-inline-size: max(var(--badge-size), 24px); min-block-size: max(var(--badge-size), 24px); margin-block: -0.25rem; margin-inline-start: -0.15em; margin-inline-end: -0.45em; padding: 0.25rem; border: 0; border-radius: var(--radius-full); background: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; } .badge > button:empty::before { content: ""; inline-size: var(--badge-dismiss-icon-size); block-size: var(--badge-dismiss-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } .badge > button:not(:disabled):hover { background: var(--hover-overlay); } :is(a.badge, button.badge).outline { --ui-hover-bg: transparent; } @supports (color: color-mix(in oklch, red, white)) { :is(a.badge, button.badge):is(.solid, :empty) { --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black); } :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) { --badge-default-hover-bg: color-mix( in oklab, var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)), var(--intent, var(--neutral)) ); } :is(a.badge, button.badge).outline { --ui-hover-bg: color-mix(in oklch, currentColor 10%, transparent); } } :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover { background: var(--ui-hover-bg, var(--badge-default-hover-bg)); } :where(a.badge, button.badge):is(.solid, :empty):not( :where(:disabled, [aria-disabled="true"]) ):hover { box-shadow: inset 0 0 0 999px var(--hover-overlay); } button.badge { cursor: pointer; } button.badge:disabled, .badge[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; } a.badge[aria-disabled="true"] { pointer-events: none; } @media (forced-colors: active) { .badge:empty { background: ButtonText; } .badge[aria-disabled="true"] { color: GrayText; border-color: GrayText; } } @media print { .badge { border: var(--border-width) solid CanvasText; } } :where(.alert) { --intent: initial; --intent-fg: initial; --intent-soft-fg: initial; --ui-bg: initial; --ui-fg: initial; --ui-border: initial; } .alert { --alert-pad-block: var(--space-30); --alert-pad-inline: var(--space-40); --alert-font-size: var(--font-size-md); --alert-icon-size: 1.25rem; --alert-default-bg: var(--surface-subtle); --alert-default-fg: var(--intent, var(--text)); --alert-default-border: var(--border); --alert-bg: var(--ui-bg, var(--alert-default-bg)); --alert-fg: var(--ui-fg, var(--alert-default-fg)); --alert-border: var(--ui-border, var(--alert-default-border)); padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); background: var(--alert-bg); color: var(--alert-fg); border: var(--border-width) solid var(--alert-border); border-inline-start-color: var(--alert-border-inline-start-color, var(--alert-border)); border-inline-start-width: var(--alert-border-inline-start-width, var(--border-width)); border-radius: var(--alert-radius, var(--radius-lg)); font-size: var(--alert-font-size); } .alert > * { min-inline-size: 0; } .alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) { margin-block: 0; } .alert > :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) + :not(:where(.alert-icon, .alert-dismiss, .alert-title, .alert-body)) { margin-block-start: var(--space-10); } @supports (color: color-mix(in oklch, red, white)) { .alert { --alert-default-bg: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); --alert-default-border: color-mix( in oklab, var(--surface) var(--soft-border-mix), var(--intent, var(--neutral)) ); --alert-default-fg: var( --intent-soft-fg, color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix)) ); } } .alert > .alert-icon { display: inline-block; flex: none; inline-size: var(--alert-icon-size); block-size: var(--alert-icon-size); font-size: var(--alert-icon-size); line-height: 1; vertical-align: -0.125em; } .alert-dismiss { --alert-dismiss-size: 1.75rem; --alert-dismiss-icon-size: 0.875rem; display: inline-grid; place-items: center; inline-size: var(--alert-dismiss-size); block-size: var(--alert-dismiss-size); flex: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: currentColor; opacity: 0.65; cursor: pointer; } .alert-dismiss::before { content: ""; inline-size: var(--alert-dismiss-icon-size); block-size: var(--alert-dismiss-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } @media (hover: hover) { .alert-dismiss:hover { background: var(--hover-overlay); opacity: 1; } } @supports selector(.alert:has(> *)) { .alert:has(> .alert-icon, > .alert-dismiss) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: var(--items-align, start); column-gap: var(--space-30); } .alert:has(> .alert-icon) { grid-template-columns: auto minmax(0, 1fr); } .alert:has(> .alert-icon) > .alert-icon { grid-column: 1; grid-row: 1 / -1; display: inline-grid; place-items: center; margin-block-start: 0.125em; } .alert:has(> .alert-icon) > :not(.alert-icon, .alert-dismiss) { grid-column: 2; } .alert:has(> .alert-dismiss) { grid-template-columns: minmax(0, 1fr) auto; } .alert:has(> .alert-icon):has(> .alert-dismiss) { grid-template-columns: auto minmax(0, 1fr) auto; } .alert:has(> .alert-dismiss) > .alert-dismiss { grid-column: -2 / -1; grid-row: 1; } } .alert :where(a:not(.btn)) { color: inherit; font-weight: var(--font-weight-semibold); } .alert.callout { border: 0; border-inline-start: var(--alert-border-inline-start-width, 4px) solid var(--alert-border-inline-start-color, var(--intent, var(--neutral))); } .alert.admonition { padding: 0; display: block; overflow: clip; border-color: var(--intent, var(--border)); } .alert.admonition > .alert-title { display: flex; align-items: center; gap: var(--space-20); padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width)); border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width)); } .alert.admonition > .alert-title > .alert-dismiss { margin-inline-start: auto; } @supports (color: color-mix(in oklch, red, white)) { .alert.admonition > .alert-title { background: color-mix( in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)) ); } } @supports not (color: color-mix(in oklch, red, white)) { .alert.admonition > .alert-title { background: var(--intent, var(--neutral)); color: var(--intent-fg, var(--neutral-fg)); } } .alert.admonition > .alert-body { padding-block: var(--alert-pad-block); padding-inline: var(--alert-pad-inline); background: var(--surface); color: var(--text); } .alert.admonition > .alert-body > :first-child { margin-block-start: 0; } .alert.admonition > .alert-body > :last-child { margin-block-end: 0; } @media print { .alert { border: var(--border-width) solid CanvasText; break-inside: avoid; } } .actions { --gap: var(--space-20); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--gap); margin: 0; padding: 0; list-style: none; } .actions > li { margin: 0; } :where(dialog).drawer { --drawer-size: 20rem; --drawer-pad: var(--space-40); --drawer-closed-translate: -100%; --drawer-motion-duration: var(--duration); position: fixed; inset-block-start: 0; inline-size: min(calc(var(--viewport-inline) * 0.9), var(--drawer-size)); block-size: var(--viewport-block); max-inline-size: none; max-block-size: var(--viewport-block); margin: 0; padding: var(--drawer-pad); border: 0; border-inline-end: var(--border-width) solid var(--border); border-radius: 0; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); opacity: 0; transform: translateX(var(--drawer-closed-translate)); transition: opacity var(--drawer-motion-duration) var(--ease-exit), transform var(--drawer-motion-duration) var(--ease-exit); } :where(dialog).drawer[open] { --drawer-motion-duration: var(--duration-slow); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-40); opacity: 1; transform: translateX(0); transition: opacity var(--drawer-motion-duration) var(--ease-enter), transform var(--drawer-motion-duration) var(--ease-enter); } :where(dialog).drawer > form { display: grid; grid-row: 1 / -1; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-40); min-block-size: 100%; } :where(dialog).drawer::backdrop { background: var(--backdrop-fill); opacity: 0; transition: opacity var(--drawer-motion-duration) ease; } :where(dialog).drawer[data-side="end"] { --drawer-closed-translate: 100%; margin-inline-start: auto; margin-inline-end: 0; border-inline-end: 0; border-inline-start: var(--border-width) solid var(--border); } :where(dialog).drawer[open]::backdrop { opacity: 1; } @starting-style { :where(dialog).drawer[open] { opacity: 0; transform: translateX(var(--drawer-closed-translate)); } :where(dialog).drawer[open]::backdrop { opacity: 0; } } :where(dialog).drawer > :not(:is(header, footer, form, .drawer-close)), :where(dialog).drawer > form > :not(:is(header, footer, .drawer-close)) { min-block-size: 0; overflow: auto; overscroll-behavior: contain; } @supports (transition-behavior: allow-discrete) { :where(dialog).drawer { transition: opacity var(--drawer-motion-duration) var(--ease-exit), transform var(--drawer-motion-duration) var(--ease-exit), overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } :where(dialog).drawer[open] { transition: opacity var(--drawer-motion-duration) var(--ease-enter), transform var(--drawer-motion-duration) var(--ease-enter), overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } :where(dialog).drawer::backdrop { transition: opacity var(--drawer-motion-duration) ease, overlay var(--drawer-motion-duration) allow-discrete, display var(--drawer-motion-duration) allow-discrete; } } [dir="rtl"] :where(dialog).drawer { --drawer-closed-translate: 100%; } :where(dialog).drawer:dir(ltr) { --drawer-closed-translate: -100%; } :where(dialog).drawer:dir(rtl) { --drawer-closed-translate: 100%; } [dir="rtl"] :where(dialog).drawer[data-side="end"] { --drawer-closed-translate: -100%; } :where(dialog).drawer[data-side="end"]:dir(ltr) { --drawer-closed-translate: 100%; } :where(dialog).drawer[data-side="end"]:dir(rtl) { --drawer-closed-translate: -100%; } @media (prefers-reduced-motion: no-preference) { :where(dialog).drawer.is-static { animation: actual-dialog-static var(--duration-slow) ease; } } :where(dialog).drawer > header, :where(dialog).drawer > form > header { padding-inline-end: calc(var(--control-size) + var(--space-30)); } .drawer-close { --drawer-close-icon-size: 1rem; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius); color: var(--text-muted); cursor: pointer; position: absolute; z-index: 1; inset-block-start: var(--space-20); inset-inline-end: var(--space-20); inline-size: var(--control-size); block-size: var(--control-size); background: var(--surface-subtle); } .drawer-close::before { content: ""; inline-size: var(--drawer-close-icon-size); block-size: var(--drawer-close-icon-size); background: currentColor; -webkit-mask: var(--icon-close) center / contain no-repeat; mask: var(--icon-close) center / contain no-repeat; } @media (hover: hover) { .drawer-close:hover { box-shadow: inset 0 0 0 999px var(--hover-overlay); color: var(--text); } } .drawer-close:active { box-shadow: inset 0 0 0 999px var(--hover-overlay); } .drawer-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring-shadow); } .pagination { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-10); margin: 0; padding: 0; list-style: none; font-size: var(--control-font-size); font-variant-numeric: tabular-nums; } .pagination .btn { --btn-pad-x: var(--space-20); min-inline-size: var(--control-size); } .pagination > li > [aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--control-size); } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (pointer: coarse) { .touch-target { position: relative; } .touch-target::after { content: ""; position: absolute; inset: calc(var(--space-20) * -1); } } .overflow-auto { overflow: auto; } .fit { inline-size: fit-content; max-inline-size: 100%; } .grow { flex: 1 1 auto; min-inline-size: 0; } .text-nowrap { white-space: nowrap; } .truncate { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .items-start { --items-align: start; align-items: start; } .items-center { --items-align: center; align-items: center; } .items-end { --items-align: end; align-items: end; } .muted { color: var(--text-muted); } .circle { border-radius: var(--radius-full); } .text-start { --text-align: start; text-align: start; } .text-center { --text-align: center; text-align: center; } .text-end { --text-align: end; text-align: end; } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .list-reset { margin: 0; padding: 0; list-style: none; } .dot { flex: none; inline-size: 0.25rem; block-size: 0.25rem; border-radius: var(--radius-full); background: var(--text-subtle); } .link-plain { color: inherit; text-decoration: none; } .link-muted { color: var(--text-muted); text-decoration: none; } .link-muted:hover, .link-muted:focus-visible { color: var(--text); } .gap-none { gap: 0; } .py { padding-block: var(--density-space); } .px { padding-inline: var(--density-space); } .mbs { margin-block-start: var(--density-space); } .mbe { margin-block-end: var(--density-space); } .display-block { display: block; } .display-inline { display: inline; } .display-inline-block { display: inline-block; } .display-flex { display: flex; } .display-inline-flex { display: inline-flex; } .display-grid { display: grid; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .inline-size-full { inline-size: 100%; } .block-size-full { block-size: 100%; } .min-inline-size-0 { min-inline-size: 0; } .min-block-size-0 { min-block-size: 0; } .max-inline-size-none { max-inline-size: none; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .justify-content-start { --cluster-justify: flex-start; justify-content: flex-start; } .justify-content-center { --cluster-justify: center; justify-content: center; } .justify-content-end { --cluster-justify: flex-end; justify-content: flex-end; } .justify-content-space-between { --cluster-justify: space-between; justify-content: space-between; } .align-self-start { align-self: start; } .align-self-center { align-self: center; } .align-self-end { align-self: end; } .padding-context { padding: var(--density-space); } .margin-inline-auto { margin-inline: auto; } .margin-inline-start-auto { margin-inline-start: auto; } .margin-inline-end-auto { margin-inline-end: auto; } .margin-block-start-auto { margin-block-start: auto; } .margin-block-end-auto { margin-block-end: auto; } .gap-context { gap: var(--gap); } .row-gap-context { row-gap: var(--gap); } .column-gap-context { column-gap: var(--gap); } .overflow-hidden { overflow: hidden; } .overflow-clip { overflow: clip; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .white-space-normal { white-space: normal; } .text-break { overflow-wrap: break-word; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .font-weight-normal { font-weight: var(--font-weight-normal); } .font-weight-medium { font-weight: var(--font-weight-medium); } .font-weight-semibold { font-weight: var(--font-weight-semibold); } .font-weight-bold { font-weight: var(--font-weight-bold); } .radius-sm-context { border-radius: var(--radius-sm); } .radius-context { border-radius: var(--radius); } .radius-lg-context { border-radius: var(--radius-lg); } .border-context { border: var(--border-width) solid var(--border); } .border-block-start { border-block-start: var(--border-width) solid var(--border); } .border-block-end { border-block-end: var(--border-width) solid var(--border); } .border-inline-start { border-inline-start: var(--border-width) solid var(--border); } .border-inline-end { border-inline-end: var(--border-width) solid var(--border); } .background-surface { --heading: currentColor; background: var(--surface); color: var(--text); } .background-raised { --heading: currentColor; background: var(--surface-raised); color: var(--text); } .background-subtle { --heading: currentColor; background: var(--surface-subtle); color: var(--text); } .shadow-context { box-shadow: var(--shadow); } .shadow-popout-context { box-shadow: var(--shadow-popout); } .cursor-pointer { cursor: pointer; } .pointer-events-none { pointer-events: none; } .user-select-none { -webkit-user-select: none; user-select: none; } .display-none { display: none; } .visibility-hidden { visibility: hidden; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400i-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/cormorant-garamond-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/lato-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/lato-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/lato-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/lato-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --prune: #470f2b; --prune-clair: #6b2745; --corail: #ea6a6a; --rose-pale: #fef8f7; --rose-tendre: #fbeeeb; --rose-motif: #f4dcd9; --beige-rose: #f4e6e1; --encre: #2c2530; color-scheme: light; --primary: var(--prune); --primary-fg: #ffffff; --secondary: var(--corail); --secondary-fg: var(--prune); --neutral: #6d6370; --neutral-fg: #ffffff; --surface: var(--rose-pale); --surface-raised: #ffffff; --surface-subtle: var(--rose-tendre); --surface-solid: var(--prune); --text: var(--encre); --text-muted: #6d6370; --text-subtle: #9c8f98; --heading: var(--prune); --link: var(--prune); --border: #ecdcd8; --focus: var(--prune); --hover-overlay: rgb(71 15 43 / 0.05); --shadow-color: hsl(330 32% 18%); --radius: 0.25rem; --radius-sm: 0.125rem; --radius-lg: 0.375rem; --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif; --motif: url("/assets/brand/cercle.svg"); } :root { --secondary-soft-fg: color-mix(in oklab, var(--text) 45%, var(--secondary) 55%); } :root { --measure: 68ch; } .prose { --prose-size: 1.0625rem; --prose-measure: var(--measure); --prose-line-height: 1.75; --prose-h1: clamp(2rem, 1.5rem + 2vw, 2.75rem); --prose-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); --prose-h3: 1.375rem; --prose-h4: 1.125rem; } .prose .leftAlone { float: inline-start; margin-inline-end: var(--space-40); margin-block-end: var(--space-30); max-inline-size: 50%; } .prose .caption { font-size: var(--font-size-sm); color: var(--text-muted); text-align: center; } .prose .center { box-sizing: border-box; inline-size: auto; max-inline-size: none; margin-inline: 0; padding-inline: 0; text-align: center; } @media (max-width: 40rem) { .prose .leftAlone { float: none; max-inline-size: 100%; margin-inline-end: 0; } } .video { margin-block: var(--space-50); padding: var(--space-40); background: var(--surface-subtle); border-radius: var(--radius); text-align: center; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(h1, h2, h3) { font-family: var(--font-display); font-weight: 500; } :where(h4, h5, h6) { font-weight: var(--font-weight-semibold); } .prose :where(h1, h2, h3) { font-weight: 500; } .overline { color: var(--prune-clair); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: 0.16em; } .lead { color: var(--text-muted); max-inline-size: 46ch; } .btn { --btn-radius: var(--radius-full); --btn-pad-x: 1.5em; letter-spacing: 0.02em; } .link-arrow { color: var(--link); font-weight: var(--font-weight-medium); text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.3em; } .link-arrow::after { content: "\00a0\2192"; display: inline-block; transition: translate var(--duration); } .link-arrow:hover::after { translate: 0.2em 0; } .motif { position: relative; overflow: hidden; } .motif::before { content: ""; position: absolute; z-index: 0; inset-block-start: var(--motif-y, 50%); inset-inline-start: var(--motif-x, 50%); inline-size: var(--motif-size, 32rem); aspect-ratio: 1; translate: -50% -50%; rotate: var(--motif-rotate, 0deg); background: var(--motif-color, var(--rose-motif)); -webkit-mask: var(--motif) center / contain no-repeat; mask: var(--motif) center / contain no-repeat; pointer-events: none; } .motif > * { position: relative; z-index: 1; } .sections > .full.motif::before { grid-column: content; grid-row: 1 / -1; } .sections > .full.motif-bleed::before { grid-column: full; } @media (prefers-reduced-motion: no-preference) { .motif::before { transition: rotate var(--duration-slow); } } .sections { --gutter: clamp(1.25rem, 5vw, 3.5rem); --content: 72rem; --section-space: clamp(2.75rem, 6vw, 5rem); display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end] minmax(var(--gutter), 1fr) [full-end]; } .sections > * { grid-column: content; min-inline-size: 0; } .sections > .full { display: grid; grid-column: full; grid-template-columns: inherit; } .sections > .full > * { grid-column: content; } .sections > :where(section, .full) { padding-block: var(--section-space); } .sections > .full > * { padding-block: 0; } .sections > section + section { border-block-start: var(--border-width) solid var(--border); } .sections > .inverted + *, .sections > * + .inverted { border-block-start: 0; } .sections :where(section, .full) > h2, .section-head > :where(h1, h2) { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); line-height: 1.15; } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-40); margin-block-end: var(--space-50); } .section-head > h2 { margin: 0; } .site-header { background: var(--surface); border-block-end: var(--border-width) solid var(--border); } .site-navbar { --ui-bg: transparent; --ui-border: transparent; padding-inline: 0; padding-block: var(--space-40); border-radius: 0; gap: var(--space-50); } .brand { display: block; flex: none; line-height: 0; } .brand img { display: block; block-size: clamp(3.75rem, 7vw, 6.5rem); inline-size: auto; } .site-nav { flex: 1 1 auto; } .site-nav .navbar-nav { justify-content: center; gap: var(--space-60); } .site-nav .nav-link { position: relative; padding-inline: 0; border-radius: 0; color: var(--text-muted); font-weight: var(--font-weight-normal); } .site-nav .nav-link:hover { background: transparent; color: var(--prune); } .site-nav .nav-link[aria-current] { background: transparent; color: var(--prune); } .site-nav .nav-link[aria-current]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.15rem; block-size: 2px; background: currentColor; } .site-header .btn { flex: none; } .nav-toggle { --nav-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E"); display: none; flex: none; place-items: center; inline-size: var(--control-size); block-size: var(--control-size); padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--prune); cursor: pointer; } .nav-toggle::before { content: ""; inline-size: 1.375rem; block-size: 1.375rem; background: currentColor; -webkit-mask: var(--nav-toggle-icon) center / contain no-repeat; mask: var(--nav-toggle-icon) center / contain no-repeat; } .nav-toggle:hover { background: var(--hover-overlay); } @media (max-width: 62rem) { .site-navbar { gap: var(--space-30); } .site-nav { display: none; } .site-cta { margin-inline-start: auto; } .nav-toggle { display: inline-grid; } } .site-drawer { --drawer-size: 19rem; --drawer-pad: var(--space-50); background: var(--surface); } .drawer-brand { display: block; block-size: 4rem; inline-size: auto; } .site-drawer .nav-list { --gap: var(--space-10); } .site-drawer .nav-link { min-block-size: var(--control-size); padding-inline: var(--space-30); color: var(--text-muted); font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--font-weight-normal); } .site-drawer .nav-link[aria-current] { background: transparent; color: var(--prune); } .site-drawer footer .btn { inline-size: 100%; } .site-footer { background: var(--surface-subtle); border-block-start: var(--border-width) solid var(--border); } .site-footer .sections > * { padding-block: var(--space-50); } .site-footer .sections > .footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-40); padding-block: clamp(2rem, 5vw, 3.5rem); } .footer-cta h2 { margin: 0; max-inline-size: 18ch; } .footer-legal { display: grid; gap: var(--space-40); border-block-start: var(--border-width) solid var(--border); color: var(--text-muted); font-size: var(--font-size-sm); } @media (min-width: 48rem) { .footer-legal { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } } .footer-legal p { margin: 0; max-inline-size: 52ch; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-20) var(--space-40); } .footer-note { font-size: var(--font-size-xs); } .sections > .hero { --motif-size: min(42rem, 78vw); --motif-x: 74%; --motif-y: 46%; --motif-rotate: 180deg; --motif-color: color-mix(in oklab, var(--rose-motif) 70%, var(--surface)); padding-block: clamp(3rem, 8vw, 6rem); } .hero-inner { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } .hero-inner > * { min-inline-size: 0; } @media (min-width: 62rem) { .hero:has(.hero-media) .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .sections > .hero:not(:has(.hero-media)) { --motif-x: 82%; --motif-size: min(34rem, 80vw); } @media (max-width: 48rem) { .sections > .hero:not(:has(.hero-media)), .sections > .hero:has(.hero-media) { --motif-x: 100%; --motif-y: 24%; --motif-size: 13rem; --motif-rotate: 180deg; } } .hero:not(:has(.hero-media)) .hero-text { max-inline-size: 38rem; } .hero h1 { margin-block: 0.2em 0; font-size: var(--fluid-display); line-height: 1.05; text-wrap: balance; } .hero .lead { margin-block-start: var(--space-50); } .hero .actions { margin-block-start: var(--space-50); } .hero-media { margin: 0; } .hero-media img { display: block; inline-size: 100%; border-radius: var(--radius-lg); aspect-ratio: 4 / 5; max-block-size: 34rem; object-fit: cover; } .hero-media figcaption { margin-block-start: var(--space-30); color: var(--text-muted); font-family: var(--font-display); font-size: 1.0625rem; font-style: italic; max-inline-size: 30ch; } .reasons h2 { margin-block: 0 var(--space-50); } .reasons-list { display: grid; gap: var(--space-50); } .reasons-list h3 { margin-block: 0 var(--space-20); font-size: 1.375rem; } .reasons-list p { margin: 0; color: var(--text-muted); max-inline-size: 32ch; } @media (min-width: 52rem) { .reasons-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .reasons-list > * + * { padding-inline-start: clamp(1.5rem, 4vw, 3rem); border-inline-start: var(--border-width) solid var(--border); } } .reasons-note { margin-block-start: var(--space-50); color: var(--text-muted); font-size: var(--font-size-sm); max-inline-size: 60ch; } .reasons-specialties { max-inline-size: 58ch; margin-block-start: var(--space-50); } .reasons-specialties .overline { margin-block: 0 var(--space-20); } .reasons-specialties > p:not(.overline) { margin-block: 0; color: var(--text-muted); } .reasons-specialties .reasons-note { margin-block-start: var(--space-20); } .about { --motif-size: min(22rem, 62vw); --motif-x: 14%; --motif-y: 74%; --motif-rotate: 60deg; } .about-page { --motif-x: 8rem; --motif-y: calc(var(--section-space) + 19.5rem); } .about-inner { display: grid; align-items: center; gap: clamp(2rem, 5vw, 4rem); } @media (min-width: 58rem) { .about:has(.about-media) .about-inner { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); } } .about-page .about-inner { align-items: start; } .about-media { margin: 0; max-inline-size: 23rem; } .about-media picture, .hero-media picture, .article-media picture { display: block; } .about-media img { display: block; inline-size: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); object-fit: cover; } .about-text > :is(h1, h2) { margin-block: 0 0.1em; font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); } .about-role { margin-block: 0 var(--space-40); color: var(--text-muted); font-family: var(--font-display); font-size: 1.375rem; } .about-text > p { max-inline-size: 58ch; } .sections > .approche { --motif-size: min(24rem, 65vw); --motif-x: 99%; --motif-y: 50%; --motif-rotate: 180deg; --motif-color: color-mix(in oklab, var(--surface) 13%, var(--prune)); --text-muted: color-mix(in oklab, var(--surface) 78%, var(--prune)); --link: var(--surface); padding-block: clamp(3rem, 7vw, 5.5rem); } .approche-inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); } @media (min-width: 58rem) { .approche-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .approche h2 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.1; max-inline-size: 14ch; } .approche p { color: var(--text-muted); max-inline-size: 52ch; } .approche .overline { display: block; margin-block-start: var(--space-50); color: color-mix(in oklab, var(--surface) 70%, var(--prune)); } .page-head { background-color: var(--rose-tendre); background-image: url("/assets/brand/hero-bande.webp"); background-position: left center; background-size: cover; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem); margin-block-end: clamp(2.5rem, 5vw, 3.5rem); } .page-head h1 { margin-block: 0.15em 0; font-size: var(--fluid-title); line-height: 1.1; max-inline-size: 22ch; } .page-head .lead { margin-block-start: var(--space-40); } .page-head--compact { padding-block: clamp(2rem, 4vw, 3rem); } .page-head--compact .page-head-meta { margin-block-start: var(--space-30); } .page-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20) var(--space-30); margin-block-start: var(--space-40); color: var(--text-muted); font-size: var(--font-size-sm); } .page-body { padding-block-end: clamp(3rem, 6vw, 5rem); } .page-body > :first-child { margin-block-start: 0; } .prose :where(img) { max-inline-size: 100%; block-size: auto; border-radius: var(--radius); } .prose :where(h2) { margin-block-start: 1.8em; } .cards { --grid-min: 17rem; --gap: clamp(1.5rem, 3vw, 2.5rem); } .post-card { --card-pad: var(--space-40); --card-radius: var(--radius-lg); overflow: hidden; } .card > picture:has(> .bleed) { display: block; overflow: hidden; margin-inline: calc(var(--card-pad) * -1); max-inline-size: none; } .card > picture:has(> .bleed):first-child { margin-block-start: calc(var(--card-pad) * -1); border-start-start-radius: inherit; border-start-end-radius: inherit; } .post-card > :where(img, picture) { aspect-ratio: 3 / 2; } .post-card > :where(img, picture) img, .post-card > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .post-card-date { margin: 0; color: var(--text-muted); font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; } .post-card h3 { margin: 0; font-size: 1.375rem; line-height: 1.25; } .post-card h3 a { color: var(--heading); text-decoration: none; } .post-card h3 a:hover { text-decoration: underline; text-underline-offset: 0.2em; } .post-card p:last-child { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); line-height: 1.6; } .taxonomy-filters { display: flex; flex-wrap: wrap; gap: var(--space-20); } a.badge { text-decoration: none; } a.badge:hover { background: var(--rose-motif); color: var(--prune); } .pagination-nav { display: grid; justify-items: center; gap: var(--space-30); margin-block-start: var(--section-space); } .pagination-count { margin: 0; color: var(--text-muted); font-size: var(--font-size-sm); } .article-media { margin-block: var(--space-50); } .article-media img { display: block; inline-size: 100%; max-block-size: 30rem; border-radius: var(--radius-lg); object-fit: cover; } .article-media.cover { max-inline-size: 17rem; } .article-media.cover img { max-block-size: none; object-fit: contain; } .article-tags { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-20); margin-block-start: var(--space-60); padding-block-start: var(--space-40); border-block-start: var(--border-width) solid var(--border); } .parcours-group + .parcours-group { margin-block-start: var(--space-60); } .parcours-group h3 { margin-block: 0 var(--space-20); font-size: 1.5rem; } .parcours-group p { margin-block: 0 var(--space-30); color: var(--text-muted); max-inline-size: 60ch; } .parcours-list { display: grid; gap: var(--space-20); } @media (min-width: 48rem) { .parcours-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20) var(--space-50); } } .parcours-list a { color: var(--text); text-decoration: none; border-block-end: var(--border-width) solid var(--border); display: block; padding-block: var(--space-20); } .parcours-list a:hover { color: var(--prune); border-block-end-color: var(--prune); } details.parcours-group > summary { cursor: pointer; font-family: var(--font-display); font-size: 1.5rem; color: var(--heading); margin-block-end: var(--space-30); } .embed-facade { display: grid; justify-items: start; gap: var(--space-30); padding: var(--space-50); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-subtle); } .embed-facade p { margin: 0; color: var(--text-muted); max-inline-size: 50ch; } .sections > .page-404 { --motif-size: min(22rem, 60vw); --motif-x: 96%; --motif-y: 45%; --motif-rotate: 180deg; padding-block: clamp(3rem, 9vw, 7rem); } .page-404 h1 { font-size: var(--fluid-title); margin-block: 0.2em var(--space-40); } .page-404 p { max-inline-size: 52ch; } .count { color: var(--text-muted); font-size: var(--font-size-sm); } @media print { .site-header, .site-footer, .motif::before { display: none; } }