/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { :root, :host { --hx-mask-left: 0px; --hx-mask-right: 0px; } *, :before, :after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-scroll-snap-strictness: proximity; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-ordinal: initial; --tw-slashed-zero: initial; --tw-numeric-figure: initial; --tw-numeric-spacing: initial; --tw-numeric-fraction: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-outline-style: solid; --tw-blur: initial; --tw-brightness: initial; --tw-contrast: initial; --tw-grayscale: initial; --tw-hue-rotate: initial; --tw-invert: initial; --tw-opacity: initial; --tw-saturate: initial; --tw-sepia: initial; --tw-drop-shadow: initial; --tw-drop-shadow-color: initial; --tw-drop-shadow-alpha: 100%; --tw-drop-shadow-size: initial; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-content: ""; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-tracking: initial; } } } @layer theme { :root, :host { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-700: oklch(50.5% .213 27.518); --color-green-800: oklch(44.8% .119 151.328); --color-blue-700: oklch(48.8% .243 264.376); --color-gray-50: color-mix(in srgb, #fafafa 100%, oklch(.98 calc(var(--c) / 30) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-50: color-mix(in lab, #fafafa 100%, var(--color-primary-50) 10%); } --color-gray-100: color-mix(in srgb, #f5f5f5 100%, oklch(.92 calc(.1 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-100: color-mix(in lab, #f5f5f5 100%, var(--color-primary-100) 10%); } --color-gray-200: color-mix(in srgb, #e5e5e5 100%, oklch(.85 calc(.2 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-200: color-mix(in lab, #e5e5e5 100%, var(--color-primary-200) 10%); } --color-gray-300: color-mix(in srgb, #d4d4d4 100%, oklch(.72 calc(.45 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-300: color-mix(in lab, #d4d4d4 100%, var(--color-primary-300) 10%); } --color-gray-400: color-mix(in srgb, #bababa 100%, oklch(.6 calc(.75 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-400: color-mix(in lab, #bababa 100%, var(--color-primary-400) 10%); } --color-gray-600: color-mix(in srgb, #878787 100%, oklch(.4 calc(.8 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-600: color-mix(in lab, #878787 100%, var(--color-primary-600) 10%); } --color-gray-700: color-mix(in srgb, #6e6e6e 100%, oklch(.3 calc(.6 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-700: color-mix(in lab, #6e6e6e 100%, var(--color-primary-700) 10%); } --color-gray-800: color-mix(in srgb, #545454 100%, oklch(.2 calc(.4 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-800: color-mix(in lab, #545454 100%, var(--color-primary-800) 10%); } --color-gray-900: color-mix(in srgb, #3b3b3b 100%, oklch(.1 calc(.2 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-900: color-mix(in lab, #3b3b3b 100%, var(--color-primary-900) 10%); } --color-gray-950: color-mix(in srgb, #212121 100%, oklch(.05 calc(.1 * var(--c)) var(--h)) 10%); @supports (color: color-mix(in lab, red, red)) { --color-gray-950: color-mix(in lab, #212121 100%, var(--color-primary-950) 10%); } --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-md: 28rem; --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --color-primary-50: oklch(.98 calc(var(--c) / 30) var(--h)); --color-primary-100: oklch(.92 calc(.1 * var(--c)) var(--h)); --color-primary-200: oklch(.85 calc(.2 * var(--c)) var(--h)); --color-primary-300: oklch(.72 calc(.45 * var(--c)) var(--h)); --color-primary-400: oklch(.6 calc(.75 * var(--c)) var(--h)); --color-primary-500: oklch(.5 calc(1 * var(--c)) var(--h)); --color-primary-600: oklch(.4 calc(.8 * var(--c)) var(--h)); --color-primary-700: oklch(.3 calc(.6 * var(--c)) var(--h)); --color-primary-800: oklch(.2 calc(.4 * var(--c)) var(--h)); --color-primary-900: oklch(.1 calc(.2 * var(--c)) var(--h)); --color-primary-950: oklch(.05 calc(.1 * var(--c)) var(--h)); --color-secondary-100: oklch(.92 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-200: oklch(.85 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-400: oklch(.6 calc(.75 * var(--c-secondary)) var(--h-secondary)); --color-secondary-600: oklch(var(--l-secondary) var(--c-secondary) var(--h-secondary)); --color-secondary-700: oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)); --color-secondary-800: oklch(.2 calc(.4 * var(--c-secondary)) var(--h-secondary)); --color-secondary-900: oklch(.1 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } --spacing-safe-edge-l: clamp(max(1.25rem, env(safe-area-inset-left)), max(5vw, env(safe-area-inset-left)), max(4rem, env(safe-area-inset-left))); --spacing-safe-edge-r: clamp(max(1.25rem, env(safe-area-inset-right)), max(5vw, env(safe-area-inset-right)), max(4rem, env(safe-area-inset-right))); --spacing-section: clamp(15px, 2.375vh, 30px); --spacing-outer: clamp(16px, calc(.75vw + 1.9vh), 32.5px); --spacing-inner: clamp(13px, calc(.5vw + .75vh), 23px); --spacing-content: clamp(8px, calc(.375vw + .5vh), 10px); --text-body: 1rem; --text-body--line-height: 1.2; --text-body--font-weight: 400; --text-body-large: 1.1rem; --text-body-large--line-height: 1.2; --text-body-large--font-weight: 400; --text-h6: 1.0625rem; --text-h6--line-height: 1.35; --text-h6--font-weight: 600; --text-h5: 1.25rem; --text-h5--line-height: 1.35; --text-h5--font-weight: 600; --text-h4: 1.375rem; --text-h4--line-height: 1.2; --text-h4--font-weight: 600; --text-h3: 1.5rem; --text-h3--line-height: 1.2; --text-h3--font-weight: 700; --text-h2: 1.75rem; --text-h2--line-height: 1.1; --text-h2--font-weight: 700; --text-h1: 2rem; --text-h1--line-height: 1.1; --text-h1--font-weight: 700; --text-extra-large: 3rem; --text-extra-large--line-height: 1.1; --text-extra-large--font-weight: 700; --leading-7: 1.45; --elevation-intensity: 1; } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } .hx-ds { --rounded-btn: var(--hx-radius); --rounded-box: var(--hx-radius); --radius-field: var(--hx-radius); --radius-box: var(--hx-radius); } :root, [data-theme="light"] { --hx-theme: light; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-theme: light; } } [data-theme="dark"] { --hx-theme: dark; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-theme: dark; } } [data-theme="black"] { --hx-theme: black; } [data-theme="light"] { --hx-base-bg: #fff; --hx-base-fg: #0a0a0a; --hx-outline: #06f; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-base-bg: #fff; --hx-base-fg: #0a0a0a; --hx-outline: #06f; } } [data-theme="dark"] { --hx-base-bg: #1d232a; --hx-base-fg: #fff; --hx-outline: #4d94ff; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-base-bg: #1d232a; --hx-base-fg: #fff; --hx-outline: #4d94ff; } } [data-theme="black"] { --hx-base-bg: #000; --hx-base-fg: #fff; --hx-outline: #4d94ff; } html { --hx-leading-page: 1.375; --hx-leading-prose: 1.625; line-height: var(--hx-leading-page); } img { object-fit: cover; } html, body { margin: 0; padding: 0; margin: 0; padding: 0; } html > body { font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height)); } :root, [data-theme="light"] { --hx-tabs-fill-bg-active: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-bg-active: color-mix(in oklch, var(--hx-base-fg) 5%, transparent); } --hx-tabs-fill-bg-hover: #00000008; --hx-tabs-fill-b: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-b: color-mix(in hsl, currentColor 35%, transparent); } --hx-tabs-fill-edge: 0; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-tabs-fill-bg-active: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-bg-active: color-mix(in oklch, var(--hx-base-fg) 5%, transparent); } --hx-tabs-fill-bg-hover: #00000008; --hx-tabs-fill-b: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-b: color-mix(in hsl, currentColor 35%, transparent); } --hx-tabs-fill-edge: 0; } } [data-theme="dark"] { --hx-tabs-fill-bg-active: #000; --hx-tabs-fill-bg-hover: #ffffff08; --hx-tabs-fill-b: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-b: color-mix(in hsl, currentColor 35%, transparent); } --hx-tabs-fill-edge: 0; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-tabs-fill-bg-active: #000; --hx-tabs-fill-bg-hover: #ffffff08; --hx-tabs-fill-b: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-b: color-mix(in hsl, currentColor 35%, transparent); } --hx-tabs-fill-edge: 0; } } [data-theme="black"] { --hx-tabs-fill-bg-active: var(--hx-base-bg); --hx-tabs-fill-bg-hover: #ffffff08; --hx-tabs-fill-b: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-tabs-fill-b: color-mix(in oklch, var(--hx-base-fg) 25%, transparent); } --hx-tabs-fill-edge: 1; } .hx-tabs.hx-theme-fill { --hx-color-bg-active: var(--hx-tabs-fill-bg-active); --hx-color-bg-hover: var(--hx-tabs-fill-bg-hover); --hx-color-b: var(--hx-tabs-fill-b); } .hx-tabs.hx-theme-fill .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) { --hx-color-bg: var(--hx-color-bg-hover); } .hx-tabs.hx-theme-fill { --hx-tabs-fill-edge-width: calc(var(--hx-tabs-fill-edge) * 1px); --hx-tabs-fill-edge-radius: calc(var(--hx-tabs-fill-edge) * var(--hx-radius)); & > .hx-tabs-header .hx-tabs-tab { border: var(--hx-tabs-fill-edge-width) solid transparent; } & > .hx-tabs-header .hx-tabs-tab[aria-selected="true"] { z-index: 1; border-color: var(--hx-color-b); position: relative; &:after { content: ""; background: inherit; position: absolute; } } & > .hx-tabs-main { border: var(--hx-tabs-fill-edge-width) solid var(--hx-color-b); } &[data-hx--tabs-tab-position-value="top"] { & > .hx-tabs-header .hx-tabs-tab { border-bottom-width: 0; } & > .hx-tabs-header .hx-tabs-tab[aria-selected="true"]:after { inset-inline: 0; bottom: calc(-1 * var(--hx-tabs-fill-edge-width)); height: var(--hx-tabs-fill-edge-width); } & > .hx-tabs-main { border-top-left-radius: var(--hx-tabs-fill-edge-radius); border-top-right-radius: var(--hx-tabs-fill-edge-radius); } &:has( > .hx-tabs-header .hx-tabs-tab:first-child[aria-selected="true"]) > .hx-tabs-main { border-top-left-radius: 0; } } &[data-hx--tabs-tab-position-value="left"] { & > .hx-tabs-header .hx-tabs-tab { border-right-width: 0; } & > .hx-tabs-header .hx-tabs-tab[aria-selected="true"]:after { inset-block: 0; right: calc(-1 * var(--hx-tabs-fill-edge-width)); width: var(--hx-tabs-fill-edge-width); } & > .hx-tabs-main { border-top-left-radius: var(--hx-tabs-fill-edge-radius); border-bottom-left-radius: var(--hx-tabs-fill-edge-radius); } &:has( > .hx-tabs-header .hx-tabs-tab:first-child[aria-selected="true"]) > .hx-tabs-main { border-top-left-radius: 0; } &:has( > .hx-tabs-header .hx-tabs-tab:last-child[aria-selected="true"]) > .hx-tabs-main { border-bottom-left-radius: 0; } } &[data-hx--tabs-tab-position-value="right"] { & > .hx-tabs-header .hx-tabs-tab { border-left-width: 0; } & > .hx-tabs-header .hx-tabs-tab[aria-selected="true"]:after { inset-block: 0; left: calc(-1 * var(--hx-tabs-fill-edge-width)); width: var(--hx-tabs-fill-edge-width); } & > .hx-tabs-main { border-top-right-radius: var(--hx-tabs-fill-edge-radius); border-bottom-right-radius: var(--hx-tabs-fill-edge-radius); } &:has( > .hx-tabs-header .hx-tabs-tab:first-child[aria-selected="true"]) > .hx-tabs-main { border-top-right-radius: 0; } &:has( > .hx-tabs-header .hx-tabs-tab:last-child[aria-selected="true"]) > .hx-tabs-main { border-bottom-right-radius: 0; } } } :root, [data-theme="light"] { --hx-tabs-line-b: #0000000d; --hx-tabs-line-b-hover: #0003; --hx-tabs-line-fg-hover: #000c; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-tabs-line-b: #0000000d; --hx-tabs-line-b-hover: #0003; --hx-tabs-line-fg-hover: #000c; } } [data-theme="dark"], [data-theme="black"] { --hx-tabs-line-b: #ffffff0d; --hx-tabs-line-b-hover: #fff3; --hx-tabs-line-fg-hover: #fffc; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-tabs-line-b: #ffffff0d; --hx-tabs-line-b-hover: #fff3; --hx-tabs-line-fg-hover: #fffc; } } .hx-tabs.hx-theme-line { --hx-color-b: var(--hx-tabs-line-b); --hx-color-b-hover: var(--hx-tabs-line-b-hover); --hx-color-fg-hover: var(--hx-tabs-line-fg-hover); } .hx-tabs.hx-theme-line .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) { color: var(--hx-color-fg-hover); } .hx-tabs:not(.hx-theme-line) .hx-tabs-tablist, .hx-tabs:not(.hx-theme-line) .hx-tabs-tab-inner { border: none !important; } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="top"] .hx-tabs-tab-inner { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; border-color: var(--hx-color-b); flex-grow: 1; align-self: flex-end; margin-block-end: calc(-.5em - 2px); padding-bottom: .5em; position: relative; } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="top"] .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) .hx-tabs-tab-inner { border-color: var(--hx-color-b-hover); } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="top"] .hx-tabs-tab[aria-selected="true"] .hx-tabs-tab-inner { border-color: var(--hx-color-b-active); z-index: 1; } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="left"] .hx-tabs-tab-inner { display: inline-block; position: relative; &:after { content: ""; background-color: var(--hx-color-b); width: 2px; height: 100%; position: absolute; top: 0; bottom: 0; right: calc(-.5em - 2px); } } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="left"] .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) .hx-tabs-tab-inner:after { background-color: var(--hx-color-b-hover); } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="left"] .hx-tabs-tab[aria-selected="true"] .hx-tabs-tab-inner:after { background-color: var(--hx-color-b-active); z-index: 1; } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="right"] .hx-tabs-tab-inner { display: inline-block; position: relative; &:after { content: ""; background-color: var(--hx-color-b); width: 2px; height: 100%; position: absolute; top: 0; bottom: 0; left: calc(-.5em - 2px); } } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="right"] .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) .hx-tabs-tab-inner:after { background-color: var(--hx-color-b-hover); } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="right"] .hx-tabs-tab[aria-selected="true"] .hx-tabs-tab-inner:after { background-color: var(--hx-color-b-active); z-index: 1; } .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="left"] .hx-tabs-tab-inner, .hx-tabs.hx-theme-line[data-hx--tabs-tab-position-value="right"] .hx-tabs-tab-inner { border-bottom: none !important; } :root, [data-theme="light"] { --hx-tabs-segmented-bg: #7676801f; --hx-tabs-segmented-bg-hover: #00000008; --hx-tabs-segmented-bg-active: #fff; --hx-tabs-segmented-fg-active: var(--hx-base-fg); --hx-tabs-segmented-shadow-active: 0 3px 8px #0000001f, 0 3px 1px #0000000a; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-tabs-segmented-bg: #7676801f; --hx-tabs-segmented-bg-hover: #00000008; --hx-tabs-segmented-bg-active: #fff; --hx-tabs-segmented-fg-active: var(--hx-base-fg); --hx-tabs-segmented-shadow-active: 0 3px 8px #0000001f, 0 3px 1px #0000000a; } } [data-theme="dark"], [data-theme="black"] { --hx-tabs-segmented-bg: #ffffff18; --hx-tabs-segmented-bg-hover: #ffffff0a; --hx-tabs-segmented-bg-active: #ffffff20; --hx-tabs-segmented-fg-active: var(--hx-base-fg); --hx-tabs-segmented-shadow-active: none; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-tabs-segmented-bg: #ffffff18; --hx-tabs-segmented-bg-hover: #ffffff0a; --hx-tabs-segmented-bg-active: #ffffff20; --hx-tabs-segmented-fg-active: var(--hx-base-fg); --hx-tabs-segmented-shadow-active: none; } } .hx-tabs.hx-theme-segmented > .hx-tabs-header > .hx-tabs-tablist { --hx-color-bg: var(--hx-tabs-segmented-bg); --hx-color-bg-hover: var(--hx-tabs-segmented-bg-hover); --hx-color-bg-active: var(--hx-tabs-segmented-bg-active); --hx-color-fg-active: var(--hx-tabs-segmented-fg-active); --hx-shadow-active: var(--hx-tabs-segmented-shadow-active); & > .hx-tabs-tab:hover:not([disabled]):not([aria-selected="true"]) { background-color: var(--hx-color-bg-hover); } & > .hx-tabs-tab[aria-selected="true"] { box-shadow: var(--hx-shadow-active); } } .hx-tabs-indicator { display: none; } :root, [data-theme="light"] { --hx-tabs-native-track: linear-gradient(to bottom, #00000005, #0000000e 40%, #0000000d 70%, #0000); --hx-tabs-native-rim: inset 0 1px 0 #fffc, 0 0 0 .5px #0003, 0 1px 2px #0000000f; --hx-tabs-native-pill: #0001; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #000; --hx-tabs-native-separator: #00000012; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-tabs-native-track: linear-gradient(to bottom, #00000005, #0000000e 40%, #0000000d 70%, #0000); --hx-tabs-native-rim: inset 0 1px 0 #fffc, 0 0 0 .5px #0003, 0 1px 2px #0000000f; --hx-tabs-native-pill: #0001; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #000; --hx-tabs-native-separator: #00000012; } } [data-theme="dark"], [data-theme="black"] { --hx-tabs-native-track: linear-gradient(to bottom, #ffffff24, #ffffff17 35%, #ffffff17 80%, #ffffff2b); --hx-tabs-native-rim: inset 0 .5px 0 #ffffff38, 0 0 0 .5px #000000d9; --hx-tabs-native-pill: #ffffff21; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #ffffffe0; --hx-tabs-native-separator: #00000029; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-tabs-native-track: linear-gradient(to bottom, #ffffff24, #ffffff17 35%, #ffffff17 80%, #ffffff2b); --hx-tabs-native-rim: inset 0 .5px 0 #ffffff38, 0 0 0 .5px #000000d9; --hx-tabs-native-pill: #ffffff21; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #ffffffe0; --hx-tabs-native-separator: #00000029; } } @media (pointer: coarse) { :root, [data-theme="light"] { --hx-tabs-native-track: #7676801f; --hx-tabs-native-rim: none; --hx-tabs-native-pill: #fff; --hx-tabs-native-pill-shadow: 0 1px 5px #00000017, 0 0 1px #0000000d; --hx-tabs-native-fg: #000; --hx-tabs-native-separator: transparent; } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-tabs-native-track: #7676801f; --hx-tabs-native-rim: none; --hx-tabs-native-pill: #fff; --hx-tabs-native-pill-shadow: 0 1px 5px #00000017, 0 0 1px #0000000d; --hx-tabs-native-fg: #000; --hx-tabs-native-separator: transparent; } } [data-theme="dark"], [data-theme="black"] { --hx-tabs-native-track: #7676803d; --hx-tabs-native-rim: none; --hx-tabs-native-pill: #ffffff47; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #fff; --hx-tabs-native-separator: transparent; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-tabs-native-track: #7676803d; --hx-tabs-native-rim: none; --hx-tabs-native-pill: #ffffff47; --hx-tabs-native-pill-shadow: none; --hx-tabs-native-fg: #fff; --hx-tabs-native-separator: transparent; } } } .hx-tabs.hx-theme-segmented[data-hx--tabs-tab-position-value="top"]:is([data-hx-native-look], [data-hx-native-look]:not(.hx-tabs) *) { & > .hx-tabs-header > .hx-tabs-tablist { --hx-radius: 9999px; --hx-color-bg-hover: transparent; --hx-color-bg-active: transparent; --hx-color-fg-active: var(--hx-tabs-native-fg); --hx-shadow-active: none; isolation: isolate; box-shadow: var(--hx-tabs-native-rim); color: var(--hx-color-fg-active); font-family: system-ui, sans-serif; position: relative; background: var(--hx-tabs-native-track) !important; gap: 0 !important; padding: 0 !important; & > .hx-tabs-tab { align-self: stretch; min-width: 44px; font-weight: 400; position: relative; min-height: 44px !important; padding-inline: calc(.75em + 4px) !important; } & > .hx-tabs-tab:focus-visible { outline-offset: calc(var(--hx-outline-offset) - 4px) !important; } & > .hx-tabs-tab[aria-selected="true"]:after, & > .hx-tabs-indicator:before { content: ""; z-index: -1; background-color: var(--hx-tabs-native-pill); box-shadow: var(--hx-tabs-native-pill-shadow); border-radius: 9999px; position: absolute; inset: 4px; } & > .hx-tabs-tab + .hx-tabs-tab:before { content: ""; background-color: var(--hx-tabs-native-separator); width: 1px; transition: opacity .15s ease-in-out; position: absolute; top: 28%; bottom: 28%; left: -.5px; } & > .hx-tabs-tab[aria-selected="true"]:before, & > .hx-tabs-tab[aria-selected="true"] + .hx-tabs-tab:before { opacity: 0; } @media (pointer: coarse) { grid-auto-columns: 1fr; grid-auto-flow: column; display: grid !important; & > .hx-tabs-tab { font-weight: 600; text-align: center !important; } } } &[data-init] > .hx-tabs-header > .hx-tabs-tablist { & > .hx-tabs-tab[aria-selected="true"]:after { content: none; } & > .hx-tabs-indicator { z-index: -1; transition: transform .35s cubic-bezier(.25, 1, .35, 1), width .35s cubic-bezier(.25, 1, .35, 1); display: block; position: absolute; top: 0; left: 0; @media (prefers-reduced-motion: reduce) { transition-duration: 0s; } } } } .hx-tabs .hx-tabs-tab:focus-visible { outline: var(--hx-outline-size) solid var(--hx-outline); outline-offset: var(--hx-outline-offset); z-index: 2; } .hx-tabs .hx-tabs-tab:focus:not(:focus-visible) { outline: none; } .hx-tabs .hx-tabs-tab[disabled] { cursor: not-allowed; opacity: .4; } .hx-tabs .hx-tabs-tab, .hx-tabs .hx-tabs-tab-inner, .hx-tabs .hx-tabs-tab-inner:after { transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out; } :where(:root), :root:has(input.theme-controller[value="light"]:checked), [data-theme="light"] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% .006 285.885); --color-primary: oklch(45% .24 277.023); --color-primary-content: oklch(93% .034 272.788); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } @container style(--hx-theme: dark) { [data-theme="inverse"] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% .006 285.885); --color-primary: oklch(45% .24 277.023); --color-primary-content: oklch(93% .034 272.788); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-base-100: oklch(25.33% .016 252.42); --color-base-200: oklch(23.26% .014 253.1); --color-base-300: oklch(21.15% .012 254.09); --color-base-content: oklch(97.807% .029 256.847); --color-primary: oklch(58% .233 277.117); --color-primary-content: oklch(96% .018 272.314); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } } :root:has(input.theme-controller[value="light"]:checked), [data-theme="light"] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% .006 285.885); --color-primary: oklch(45% .24 277.023); --color-primary-content: oklch(93% .034 272.788); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } @container style(--hx-theme: dark) { [data-theme="inverse"] { color-scheme: light; --color-base-100: oklch(100% 0 0); --color-base-200: oklch(98% 0 0); --color-base-300: oklch(95% 0 0); --color-base-content: oklch(21% .006 285.885); --color-primary: oklch(45% .24 277.023); --color-primary-content: oklch(93% .034 272.788); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } } :root:has(input.theme-controller[value="dark"]:checked), [data-theme="dark"] { color-scheme: dark; --color-base-100: oklch(25.33% .016 252.42); --color-base-200: oklch(23.26% .014 253.1); --color-base-300: oklch(21.15% .012 254.09); --color-base-content: oklch(97.807% .029 256.847); --color-primary: oklch(58% .233 277.117); --color-primary-content: oklch(96% .018 272.314); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } @container style(--hx-theme: light) { [data-theme="inverse"] { color-scheme: dark; --color-base-100: oklch(25.33% .016 252.42); --color-base-200: oklch(23.26% .014 253.1); --color-base-300: oklch(21.15% .012 254.09); --color-base-content: oklch(97.807% .029 256.847); --color-primary: oklch(58% .233 277.117); --color-primary-content: oklch(96% .018 272.314); --color-secondary: oklch(65% .241 354.308); --color-secondary-content: oklch(94% .028 342.258); --color-accent: oklch(77% .152 181.912); --color-accent-content: oklch(38% .063 188.416); --color-neutral: oklch(14% .005 285.823); --color-neutral-content: oklch(92% .004 286.32); --color-info: oklch(74% .16 232.661); --color-info-content: oklch(29% .066 243.157); --color-success: oklch(76% .177 163.223); --color-success-content: oklch(37% .077 168.94); --color-warning: oklch(82% .189 84.429); --color-warning-content: oklch(41% .112 45.904); --color-error: oklch(71% .194 13.428); --color-error-content: oklch(27% .105 12.094); --radius-selector: .5rem; --radius-field: .25rem; --radius-box: .5rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 1; --noise: 0; } } :root { --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E"); } :root { scrollbar-color: currentColor #0000; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) #0000; } } @property --radialprogress { syntax: ""; inherits: true; initial-value: 0%; } :root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked), :root:has(.drawer:not([class*="drawer-open"]) > .drawer-toggle:checked) { --page-has-backdrop: 1; overflow: hidden; } :root:has(.sm\:drawer-open > .drawer-toggle:checked) { @media (width < 40rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.md\:drawer-open > .drawer-toggle:checked) { @media (width < 48rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.lg\:drawer-open > .drawer-toggle:checked) { @media (width < 64rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.xl\:drawer-open > .drawer-toggle:checked) { @media (width < 80rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.\32 xl\:drawer-open > .drawer-toggle:checked) { @media (width < 96rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.max-sm\:drawer-open > .drawer-toggle:checked) { @media (width >= 40rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.max-md\:drawer-open > .drawer-toggle:checked) { @media (width >= 48rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.max-lg\:drawer-open > .drawer-toggle:checked) { @media (width >= 64rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.max-xl\:drawer-open > .drawer-toggle:checked) { @media (width >= 80rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.max-2xl\:drawer-open > .drawer-toggle:checked) { @media (width >= 96rem) { overflow: hidden; --page-has-backdrop: 1; } } :root:has(.modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked) { background-image: linear-gradient(var(--root-bg), var(--root-bg)); background-color: var(--root-bg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in srgb, var(--root-bg), oklch(0% 0 0) calc(var(--page-has-backdrop, 0) * 40%)); } scrollbar-gutter: stable; scrollbar-gutter: if(style(--page-has-scroll: 1): stable; else: unset); animation: forwards set-page-has-scroll; animation-timeline: scroll(); } @keyframes set-page-has-scroll { 0%, to { --page-has-scroll: 1; } } :root, [data-theme] { background-color: var(--root-bg, var(--color-base-100)); color: var(--color-base-content); } :where(:root, [data-theme]) { --root-bg: var(--color-base-100); } } @layer components { .main-grid { --layout-main-width: calc(var(--layout-max-width) - var(--layout-aside-width)); grid-template-areas: "header" "post-header" "main" "aside" "pre-footer" "footer" "post-footer"; display: grid; & > *, & > * > *, & single-column > * { grid-column: 1 / -1; grid-auto-rows: min-content; grid-auto-flow: row; grid-template-columns: subgrid; display: grid; } & #header { z-index: 7; grid-area: header; } & #post_header { z-index: 6; grid-area: post-header; } & #main { z-index: 4; grid-area: main; } & #aside { z-index: 5; grid-area: aside; grid-auto-rows: min-content; } & #pre_footer { z-index: 3; grid-area: pre-footer; } & #footer { z-index: 2; grid-area: footer; } & #post_footer { z-index: 1; grid-area: post-footer; } & #header.floaty + #post_header { grid-area: header / 1 / post-header / -1; } & #main { background-color: var(--hx-base-bg); color: var(--hx-base-fg); } & subgrid-container { grid-column: 1 / -1; grid-auto-rows: min-content; grid-auto-flow: row; grid-template-columns: subgrid; padding-right: var(--spacing-safe-edge-r); padding-left: var(--spacing-safe-edge-l); display: grid; & > * { grid-column: 1 / -1; } & subgrid-container { all: unset; } } @media (width >= 1024px) { grid-template-areas: "pre-header-l pre-header pre-header pre-header pre-header-r" "header-l header header header header-r" "post-header-l post-header post-header post-header post-header-r" "main-l main main main main-r" "pre-footer-l pre-footer pre-footer pre-footer pre-footer-r" "footer-l footer footer footer footer-r" "post-footer-l post-footer post-footer post-footer post-footer-r"; grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) 45vw 25vw 20vw minmax(var(--spacing-safe-edge-r), 1fr); & #header { grid-column: header-l / header-r; } & #post_header { grid-column: post-header-l / post-header-r; } & #main { grid-column: main-l / main-r; } & #aside { grid-area: aside; } & #pre_footer { grid-column: pre-footer-l / pre-footer-r; } & #footer { grid-column: footer-l / footer-r; } & #post_footer { grid-column: post-footer-l / post-footer-r; } & subgrid-container { padding-inline: calc(var(--spacing) * 0); grid-column: 2 / 5; } & main subgrid-container { grid-column: main; } } @media (width >= 1320px) { grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) calc(var(--layout-main-width) - ((var(--layout-main-width) - var(--layout-aside-width)) / 2)) calc((var(--layout-main-width) - var(--layout-aside-width)) / 2) var(--layout-aside-width) minmax(var(--spacing-safe-edge-r), 1fr); } &:has(aside) { @media (width >= 1024px) { grid-template-areas: "pre-header-l pre-header pre-header pre-header pre-header-r" "header-l header header header header-r" "post-header-l post-header post-header post-header post-header-r" "main-l main main aside main-r" "pre-footer-l pre-footer pre-footer pre-footer pre-footer-r" "footer-l footer footer footer footer-r" "post-footer-l post-footer post-footer post-footer post-footer-r"; grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) 45vw calc(45vw - var(--layout-aside-width)) var(--layout-aside-width) minmax(var(--spacing-safe-edge-r), 1fr); & main subgrid-container { padding-right: var(--spacing-outer); } & aside subgrid-container { padding-left: calc(var(--spacing) * 0); } } @media (width >= 1320px) { grid-template-areas: "pre-header-l pre-header pre-header pre-header pre-header-r" "header-l header header header header-r" "post-header-l post-header post-header post-header post-header-r" "main-l main main aside main-r" "pre-footer-l pre-footer pre-footer pre-footer pre-footer-r" "footer-l footer footer footer footer-r" "post-footer-l post-footer post-footer post-footer post-footer-r"; grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) calc(var(--layout-main-width) - ((var(--layout-main-width) - var(--layout-aside-width)) / 2)) calc((var(--layout-main-width) - var(--layout-aside-width)) / 2) var(--layout-aside-width) minmax(var(--spacing-safe-edge-r), 1fr); } } } multi-column { & multi-column-grid { padding-block: var(--spacing-outer); gap: var(--spacing-content); display: grid; & > column > section { all: unset !important; } } @media (width >= 1024px) { & multi-column-grid { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } } } .attachment { align-items: center; gap: calc(var(--spacing) * 4); border-radius: var(--radius-lg); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 4); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-primary-200); background-color: var(--color-primary-50); display: flex; & main { gap: calc(var(--spacing) * 2); flex-direction: column; display: flex; } } .block-banners { & .section-head { display: none; } & .section-body { justify-content: center; align-items: center; gap: calc(var(--spacing) * 6); flex-wrap: wrap; display: flex; } } .main-post-foot { margin: calc(var(--spacing) * 3); justify-content: center; align-items: center; gap: calc(var(--spacing) * 3); grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; @media (width >= 768px) { justify-content: center; align-items: center; gap: calc(var(--spacing) * 3); flex-wrap: wrap; display: flex; } } .main-pre-head { align-items: center; gap: calc(var(--spacing) * 2); padding-inline: calc(var(--spacing) * 4); padding-block: calc(var(--spacing) * 2); display: flex; @media (width >= 768px) { justify-content: space-between; gap: calc(var(--spacing) * 0); } @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 24); } background-color: var(--color-base-content); & .main-pre-head-content { align-items: center; gap: calc(var(--spacing) * 3); display: flex; @media (width >= 1024px) { gap: calc(var(--spacing) * 6); } & .content-text { color: var(--color-base-100); } & .content-btn { background-color: var(--color-primary-600); padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 2); text-wrap: nowrap; color: var(--color-base-100); border-radius: 3.40282e38px; } } } .nav-tree { & li { display: block; } & a { padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); display: block; } } .nav-tree.-horizontal { background: #ff0; & ul { flex-direction: column; display: flex; } & a { padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); display: block; } & > ul { flex-direction: row; display: flex; } } .nav-tree.-vertical { background: pink; & ul { flex-direction: column; display: flex; & ul { margin-left: calc(var(--spacing) * 8); } } & a { padding-inline: calc(var(--spacing) * 6); padding-block: calc(var(--spacing) * 4); display: block; } } .filters-details { display: block; @media (width >= 768px) { display: none; } } .filters-summary { cursor: pointer; padding-bottom: calc(var(--spacing) * 3); justify-content: space-between; align-items: center; list-style: none; display: flex; & ::marker { display: none; } & img { transition: transform .3s; } } details[open] .filters-summary img { transform: rotate(180deg); } details[open] .filters-summary { padding-bottom: calc(var(--spacing) * 0); } .filters-details hr { margin-top: calc(var(--spacing) * 3); color: var(--color-base-content); } .search-layout { gap: calc(var(--spacing) * 4); flex-direction: column; display: flex; @media (width >= 1024px) { grid-template-columns: repeat(12, minmax(0, 1fr)); display: grid; & .filters { grid-column: span 4 / span 4; } & div:last-child { grid-column: span 8 / span 8; } } & .filters { & .filters-title { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-base-content-low); @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 2); } } & .filter-types { @media (width >= 768px) { gap: calc(var(--spacing) * 6); flex-wrap: wrap; display: flex; } @media (width >= 1024px) { display: block; } & li { padding-block: calc(var(--spacing) * 3); color: var(--color-base-content-mid); & label { cursor: pointer; align-items: center; gap: calc(var(--spacing) * 2); display: inline-flex; } & input { height: calc(var(--spacing) * 5); width: calc(var(--spacing) * 5); } } & li:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-gray-200); } } } } .join { margin-bottom: calc(var(--spacing) * 5); width: 100%; position: relative; & .cancel-btn { top: 20%; right: calc(var(--spacing) * 25); position: absolute; } } .search-results-number { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-base-300); color: var(--color-base-content-low); padding-bottom: 18px; @media (width >= 1024px) { border-bottom-style: var(--tw-border-style); padding-bottom: calc(var(--spacing) * 0); border-bottom-width: 0; } } .search-results { flex-direction: column; gap: 18px; margin-top: 18px; display: flex; & .result-layout { @media (width >= 768px) { gap: calc(var(--spacing) * 3); grid-template-columns: repeat(12, minmax(0, 1fr)); display: grid; } & div:first-child { @media (width >= 768px) { grid-column: span 10 / span 10; } & .result-data { gap: calc(var(--spacing) * 2); flex-direction: column; display: flex; & .result-date { color: var(--color-base-content-mid); } & .result-title { font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); color: var(--color-base-content); } & .result-description { color: var(--color-base-content-mid); } } } & .result-image { display: none; @media (width >= 768px) { grid-column: span 2 / span 2; display: block; & img { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-200); border-radius: .25rem; } } } } } .statistic { & .statistic-grid { gap: var(--spacing-content); display: grid; } & .statistic-title { & :where(h2, h3, h4, h5, h6) { display: inline-block; } } } .statistic.statistic-design-01 { & .statistic-grid { grid-template: "top" 55px "mid" "btm" / auto; justify-content: center; @media (width >= 1024px) { grid-template-rows: 77px auto auto; } } & .statistic-image { grid-area: top; justify-self: center; & img { height: 55px; @media (width >= 1024px) { height: 77px; } } } & .statistic-title { text-align: center; font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); grid-area: btm; justify-self: center; } & .statistic-desc { font-size: var(--text-extra-large); line-height: var(--tw-leading, var(--text-extra-large--line-height)); font-weight: var(--tw-font-weight, var(--text-extra-large--font-weight)); grid-area: mid; justify-self: center; } } } @layer utilities { .\@container\/grid-item { container: grid-item / inline-size; } .\@container { container-type: inline-size; } .modal { @layer daisyui.component { pointer-events: none; visibility: hidden; width: 100%; max-width: none; height: 100%; max-height: none; color: inherit; transition: visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; overscroll-behavior: contain; z-index: 999; scrollbar-gutter: auto; background-color: #0000; place-items: center; margin: 0; padding: 0; display: grid; position: fixed; inset: 0; overflow: clip; &::backdrop { display: none; } } @layer daisyui.modifier { &.modal-open, &[open], &:target, .modal-toggle:checked + & { pointer-events: auto; visibility: visible; opacity: 1; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out; background-color: oklch(0% 0 0 / .4); & .modal-box { opacity: 1; translate: 0; scale: 1; } } @starting-style { &.modal-open, &[open], &:target, .modal-toggle:checked + & { opacity: 0; } } } } .modal\! { @layer daisyui.component { pointer-events: none !important; visibility: hidden !important; width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; color: inherit !important; transition: visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out !important; overscroll-behavior: contain !important; z-index: 999 !important; scrollbar-gutter: auto !important; background-color: #0000 !important; place-items: center !important; margin: 0 !important; padding: 0 !important; display: grid !important; position: fixed !important; inset: 0 !important; overflow: clip !important; &::backdrop { display: none !important; } } @layer daisyui.modifier { &.modal-open, &[open], &:target, .modal-toggle:checked + & { pointer-events: auto !important; visibility: visible !important; opacity: 1 !important; transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out !important; background-color: oklch(0% 0 0 / .4) !important; & .modal-box { opacity: 1 !important; translate: 0 !important; scale: 1 !important; } } @starting-style { &.modal-open, &[open], &:target, .modal-toggle:checked + & { opacity: 0 !important; } } } } .drawer-side { :where(&) { @layer daisyui.component { overflow: hidden; } } @layer daisyui.component { pointer-events: none; visibility: hidden; inset-inline-start: 0; z-index: 10; overscroll-behavior: contain; opacity: 0; width: 100%; transition: opacity .2s ease-out .1s allow-discrete, visibility .3s ease-out .1s allow-discrete; background-color: #0000; grid-template-rows: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr)); grid-row-start: 1; grid-column-start: 1; place-items: flex-start start; height: 100dvh; display: grid; position: fixed; top: 0; & > .drawer-overlay { cursor: pointer; background-color: oklch(0% 0 0 / .4); place-self: stretch stretch; position: sticky; top: 0; } & > * { grid-row-start: 1; grid-column-start: 1; } & > :not(.drawer-overlay) { will-change: transform; transition: translate .3s ease-out, width .2s ease-out; translate: -100%; [dir="rtl"] & { translate: 100%; } } } } .drawer-toggle { @layer daisyui.component { appearance: none; opacity: 0; width: 0; height: 0; position: fixed; &:checked { & ~ .drawer-side { pointer-events: auto; visibility: visible; opacity: 1; scrollbar-color: currentColor oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); overflow-y: auto; @supports (color: color-mix(in lab, red, red)) { scrollbar-color: color-mix(in oklch, currentColor 35%, #0000) oklch(0 0 0 / calc(var(--page-has-backdrop, 0) * .4)); } & > :not(.drawer-overlay) { translate: 0%; } } } &:focus-visible ~ .drawer-content label.drawer-button { outline-offset: 2px; outline: 2px solid; } } } .tab { @layer daisyui.component { cursor: pointer; appearance: none; text-align: center; webkit-user-select: none; -webkit-user-select: none; user-select: none; flex-wrap: wrap; justify-content: center; align-items: center; display: inline-flex; position: relative; &:hover { @media (hover: hover) { color: var(--color-base-content); } } --tab-p: 1rem; --tab-bg: var(--color-base-100); --tab-border-color: var(--color-base-300); --tab-radius-ss: 0; --tab-radius-se: 0; --tab-radius-es: 0; --tab-radius-ee: 0; --tab-order: 0; --tab-radius-min: calc(.75rem - var(--border)); order: var(--tab-order); height: var(--tab-height); border-color: #0000; padding-inline-start: var(--tab-p); padding-inline-end: var(--tab-p); font-size: .875rem; &:is(input[type="radio"]) { min-width: fit-content; &:after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:is(label) { position: relative; & input { cursor: pointer; appearance: none; opacity: 0; position: absolute; inset: 0; } } &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { & + .tab-content { height: calc(100% - var(--tab-height) + var(--border)); display: block; } } &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } &:not(input):empty { cursor: default; flex-grow: 1; } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:focus-visible, &:is(label:has(:checked:focus-visible)) { outline-offset: -5px; outline: 2px solid; } &[disabled] { pointer-events: none; opacity: .4; } } } .menu { @layer daisyui.component { --menu-active-fg: var(--color-neutral-content); --menu-active-bg: var(--color-neutral); flex-flow: column wrap; width: fit-content; padding: .5rem; font-size: .875rem; display: flex; & :where(li ul) { white-space: nowrap; margin-inline-start: 1rem; padding-inline-start: .5rem; position: relative; &:before { inset-inline-start: 0; background-color: var(--color-base-content); opacity: .1; width: var(--border); content: ""; position: absolute; top: .75rem; bottom: .75rem; } } & :where(li > .menu-dropdown:not(.menu-dropdown-show)) { display: none; } & :where(li:not(.menu-title) > :not(ul, details, .menu-title, .btn)), & :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--radius-field); text-align: start; text-wrap: balance; -webkit-user-select: none; user-select: none; grid-auto-columns: minmax(auto, max-content) auto max-content; grid-auto-flow: column; align-content: flex-start; align-items: center; gap: .5rem; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: grid; } & :where(li > details > summary) { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } &::-webkit-details-marker { display: none; } } & :where(li > details > summary), & :where(li > .menu-dropdown-toggle) { &:after { content: ""; transform-origin: 50%; pointer-events: none; justify-self: flex-end; width: .375rem; height: .375rem; transition-property: rotate, translate; transition-duration: .2s; display: block; translate: 0 -1px; rotate: -135deg; box-shadow: inset 2px 2px; } } & :where(li > details[open] > summary):after, & :where(li > .menu-dropdown-toggle.menu-dropdown-show):after { translate: 0 1px; rotate: 45deg; } & :where(li:not(.menu-title, .disabled) > :not(ul, details, .menu-title), li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.menu-active, :active, .btn) { &.menu-focus, &:focus-visible { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } color: var(--color-base-content); --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } } & :where(li:not(.menu-title, .disabled) > :not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover) { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } box-shadow: inset 0 1px oklch(0% 0 0 / .01), inset 0 -1px oklch(100% 0 0 / .01); } & :where(li:empty) { background-color: var(--color-base-content); opacity: .1; height: 1px; margin: .5rem 1rem; } & :where(li) { flex-flow: column wrap; flex-shrink: 0; align-items: stretch; display: flex; position: relative; & .badge { justify-self: flex-end; } & > :not(ul, .menu-title, details, .btn):active, & > :not(ul, .menu-title, details, .btn).menu-active, & > details > summary:active { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } color: var(--menu-active-fg); background-color: var(--menu-active-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); &:not(&:active) { box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--menu-active-bg); } } &.menu-disabled { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } & .dropdown:focus-within { & .menu-dropdown-toggle:after { translate: 0 1px; rotate: 45deg; } } & .dropdown-content { margin-top: .5rem; padding: .5rem; &:before { display: none; } } } } .collapse-arrow { @layer daisyui.modifier { & > .collapse-title:after { width: .5rem; height: .5rem; display: block; position: absolute; transform: translateY(-100%) rotate(45deg); @media (prefers-reduced-motion: no-preference) { transition-property: all; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } top: 50%; content: ""; transform-origin: 75% 75%; pointer-events: none; inset-inline-end: 1.4rem; box-shadow: 2px 2px; } } } .dock { @layer daisyui.component { z-index: 1; background-color: var(--color-base-100); color: currentColor; border-top: .5px solid var(--color-base-content); flex-direction: row; justify-content: space-around; align-items: center; width: 100%; padding: .5rem; display: flex; position: fixed; bottom: 0; left: 0; right: 0; @supports (color: color-mix(in lab, red, red)) { border-top: .5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000); } height: 4rem; height: calc(4rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); & > * { cursor: pointer; border-radius: var(--radius-box); background-color: #0000; flex-direction: column; flex-shrink: 1; flex-basis: 100%; justify-content: center; align-items: center; gap: 1px; max-width: 8rem; height: 100%; margin-bottom: .5rem; transition: opacity .2s ease-out; display: flex; position: relative; @media (hover: hover) { &:hover { opacity: .8; } } &[aria-disabled="true"], &[disabled] { &, &:hover { pointer-events: none; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } opacity: 1; } } & .dock-label { font-size: .6875rem; } &:after { content: ""; background-color: #0000; border-top: 3px solid #0000; border-radius: 3.40282e38px; width: 1.5rem; height: .25rem; transition: background-color .1s ease-out, text-color .1s ease-out, width .1s ease-out; position: absolute; bottom: .2rem; } } } } .dropdown { @layer daisyui.component { position-area: var(--anchor-v, bottom) var(--anchor-h, span-right); display: inline-block; position: relative; & > :not(summary):focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } & .dropdown-content { position: absolute; } &:not(details, .dropdown-open, .dropdown-hover:hover, :focus-within) .dropdown-content, &.dropdown-hover:not(:hover) [tabindex]:first-child:focus:not(:focus-visible) ~ .dropdown-content { transform-origin: top; opacity: 0; display: none; scale: .95; } &[popover], & .dropdown-content { z-index: 999; @media (prefers-reduced-motion: no-preference) { transition-behavior: allow-discrete; transition-property: opacity, scale, display; transition-duration: .2s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); animation: .2s dropdown; } } @starting-style { &[popover], & .dropdown-content { opacity: 0; scale: .95; } } &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { & > [tabindex]:first-child { pointer-events: none; } & .dropdown-content { opacity: 1; } } &.dropdown-hover:hover { & .dropdown-content { opacity: 1; scale: 1; } } &:is(details) { & summary { &::-webkit-details-marker { display: none; } } } &.dropdown-open, &:focus, &:focus-within { & .dropdown-content { scale: 1; } } &:where([popover]) { background: none; } &[popover] { color: inherit; position: fixed; @supports not (position-area: bottom) { margin: auto; &.dropdown-open:not(:popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95; } &::backdrop { background-color: oklab(0% none none / .3); } } &:not(.dropdown-open, :popover-open) { transform-origin: top; opacity: 0; display: none; scale: .95; } } } } .btn { :where(&) { @layer daisyui.component { width: unset; } } .prose & { text-decoration-line: none; } @layer daisyui.component { cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; -webkit-user-select: none; user-select: none; padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: var(--btn-fg); height: var(--size); font-size: var(--fontsize, .875rem); outline-color: var(--btn-color, var(--color-base-content)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); touch-action: manipulation; box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-p: 1rem; --btn-border: var(--btn-bg); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; font-weight: 600; transition-property: color, background-color, border-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid; } &:active:not(.btn-active) { --btn-bg: var(--btn-color, var(--color-base-200)); translate: 0 .5px; @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); } --btn-border: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0); } &:is(input[type="checkbox"], input[type="radio"]) { appearance: none; &:after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } } &:disabled { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } &[disabled] { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } } .loading { @layer daisyui.component { pointer-events: none; aspect-ratio: 1; vertical-align: middle; width: calc(var(--size-selector, .25rem) * 6); background-color: currentColor; display: inline-block; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); mask-position: center; mask-size: 100%; mask-repeat: no-repeat; } } .btn-disabled { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } .pointer-events-none { pointer-events: none; } .collapse { &:not(td, tr, colgroup) { visibility: revert-layer; } @layer daisyui.component { border-radius: var(--radius-box, 1rem); isolation: isolate; grid-template-rows: max-content 0fr; grid-template-columns: minmax(0, 1fr); width: 100%; display: grid; position: relative; overflow: hidden; @media (prefers-reduced-motion: no-preference) { transition: grid-template-rows .2s; } & > input:is([type="checkbox"], [type="radio"]) { appearance: none; opacity: 0; z-index: 1; grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding: 1rem; padding-inline-end: 3rem; transition: background-color .2s ease-out; } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)), &:not(.collapse-close):has( > input:is([type="checkbox"], [type="radio"]):checked) { grid-template-rows: max-content 1fr; } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > .collapse-content, &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { content-visibility: visible; min-height: fit-content; @supports not (content-visibility: visible) { visibility: visible; } } &:focus-visible, &:has( > input:is([type="checkbox"], [type="radio"]):focus-visible), &:has(summary:focus-visible) { outline-color: var(--color-base-content); outline-offset: 2px; outline-width: 2px; outline-style: solid; } &:not(.collapse-close) { & > input[type="checkbox"], & > input[type="radio"]:not(:checked), & > .collapse-title { cursor: pointer; } } &[tabindex]:focus:not(.collapse-close, .collapse[open]), &[tabindex]:focus-within:not(.collapse-close, .collapse[open]) { & > .collapse-title { cursor: unset; } } &:is([open], [tabindex]:focus:not(.collapse-close), [tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content), &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) { padding-bottom: 1rem; } } @layer daisyui.modifier { &[open] { &.collapse-arrow { & > .collapse-title:after { @media (prefers-reduced-motion: no-preference) { transform: translateY(-50%) rotate(225deg); } } } } &.collapse-open { &.collapse-arrow { & > .collapse-title:after { @media (prefers-reduced-motion: no-preference) { transform: translateY(-50%) rotate(225deg); } } } &.collapse-plus { & > .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } } } &[tabindex].collapse-arrow:focus:not(.collapse-close), &.collapse-arrow[tabindex]:focus-within:not(.collapse-close) { & > .collapse-title:after { transform: translateY(-50%) rotate(225deg); } } &.collapse-arrow:not(.collapse-close) { & > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { transform: translateY(-50%) rotate(225deg); } } &[open] { &.collapse-plus { & > .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } } } &[tabindex].collapse-plus:focus:not(.collapse-close) { & > .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } } &.collapse-plus:not(.collapse-close) { & > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after { --tw-content: "−"; content: var(--tw-content); } } } &:is(details) { @layer daisyui.component { width: 100%; @media (prefers-reduced-motion: no-preference) { &::details-content { transition: content-visibility .2s allow-discrete, visibility .2s allow-discrete, padding .2s ease-out, background-color .2s ease-out, height .2s; interpolate-size: allow-keywords; height: 0; } &:where([open])::details-content { height: auto; } } & summary { display: block; position: relative; &::-webkit-details-marker { display: none; } } & > .collapse-content { content-visibility: visible; } } } &:is(details) summary { @layer daisyui.component { outline: none; } } } .collapse-content { @layer daisyui.component { grid-row-start: 1; grid-column-start: 1; content-visibility: hidden; min-height: 0; cursor: unset; grid-row-start: 2; grid-column-start: 1; padding-left: 1rem; padding-right: 1rem; @supports not (content-visibility: hidden) { visibility: hidden; } @media (prefers-reduced-motion: no-preference) { transition: content-visibility .2s allow-discrete, visibility .2s allow-discrete, padding .2s ease-out, background-color .2s ease-out; } } } .collapse-open { @layer daisyui.modifier { grid-template-rows: max-content 1fr; & > .collapse-content { content-visibility: visible; min-height: fit-content; padding-bottom: 1rem; @supports not (content-visibility: visible) { visibility: visible; } } } } .collapse { visibility: collapse; } .invisible { visibility: hidden; } .visible { visibility: visible; } .list { @layer daisyui.component { flex-direction: column; font-size: .875rem; display: flex; & .list-row { --list-grid-cols: minmax(0, auto) 1fr; border-radius: var(--radius-box); word-break: break-word; grid-auto-flow: column; grid-template-columns: var(--list-grid-cols); gap: 1rem; padding: 1rem; display: grid; position: relative; } & > :not(:last-child) { &.list-row, & .list-row { &:after { content: ""; border-bottom: var(--border) solid; inset-inline: var(--radius-box); border-color: var(--color-base-content); position: absolute; bottom: 0; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 5%, transparent); } } } } } @layer daisyui.modifier { & .list-row { &:has(.list-col-grow:first-child) { --list-grid-cols: 1fr; } &:has(.list-col-grow:nth-child(2)) { --list-grid-cols: minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(3)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(4)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(5)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } &:has(.list-col-grow:nth-child(6)) { --list-grid-cols: minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) minmax(0, auto) 1fr; } & :not(.list-col-wrap) { grid-row-start: 1; } } } } .toggle { @layer daisyui.component { border: var(--border) solid currentColor; color: var(--input-color); cursor: pointer; appearance: none; vertical-align: middle; webkit-user-select: none; -webkit-user-select: none; user-select: none; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) + min(var(--border), var(--radius-selector-max))); padding: var(--toggle-p); flex-shrink: 0; grid-template-columns: 0fr 1fr 1fr; place-content: center; display: inline-grid; position: relative; box-shadow: inset 0 1px; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset; } --input-color: var(--color-base-content); transition: color .3s, grid-template-columns .2s; @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --toggle-p: calc(var(--size) * .125); --size: calc(var(--size-selector, .25rem) * 6); width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2); height: var(--size); & > * { z-index: 1; cursor: pointer; appearance: none; background-color: #0000; border: none; grid-column: 2 / span 1; grid-row-start: 1; height: 100%; padding: .125rem; transition: opacity .2s, rotate .4s; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:nth-child(2) { color: var(--color-base-100); rotate: 0deg; } &:nth-child(3) { color: var(--color-base-100); opacity: 0; rotate: -15deg; } } &:has(:checked) { & > :nth-child(2) { opacity: 0; rotate: 15deg; } & > :nth-child(3) { opacity: 1; rotate: 0deg; } } &:before { aspect-ratio: 1; border-radius: var(--radius-selector); --tw-content: ""; content: var(--tw-content); height: 100%; box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor; background-color: currentColor; grid-row-start: 1; grid-column-start: 2; transition: background-color .1s, translate .2s, inset-inline-start .2s; position: relative; inset-inline-start: 0; translate: 0; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000); } background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); } @media (forced-colors: active) { &:before { outline-style: var(--tw-outline-style); outline-offset: calc(1px * -1); outline-width: 1px; } } @media print { &:before { outline-offset: -1rem; outline: .25rem solid; } } &:focus-visible, &:has(:focus-visible) { outline-offset: 2px; outline: 2px solid; } &:checked, &[aria-checked="true"], &:has( > input:checked) { background-color: var(--color-base-100); --input-color: var(--color-base-content); grid-template-columns: 1fr 1fr 0fr; &:before { background-color: currentColor; } @starting-style { &:before { opacity: 0; } } } &:indeterminate { grid-template-columns: .5fr 1fr .5fr; } &:disabled { cursor: not-allowed; opacity: .3; &:before { border: var(--border) solid currentColor; background-color: #0000; } } } } .input { @layer daisyui.component { cursor: text; border: var(--border) solid #0000; appearance: none; background-color: var(--color-base-100); vertical-align: middle; white-space: nowrap; width: clamp(3rem, 20rem, 100%); height: var(--size); font-size: max(var(--font-size, .875rem), .875rem); touch-action: manipulation; border-color: var(--input-color); box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .5rem; padding-inline: .75rem; display: inline-flex; position: relative; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } --size: calc(var(--size-field, .25rem) * 10); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); } &:where(input) { display: inline-flex; } & :where(input) { appearance: none; background-color: #0000; border: none; width: 100%; height: 100%; display: inline-flex; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } } & :where(input[type="url"]), & :where(input[type="email"]) { direction: ltr; } & :where(input[type="date"]) { display: inline-flex; } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; z-index: 1; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { &:focus, &:focus-within { --font-size: 1rem; } } } &:has( > input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } box-shadow: none; } &:has( > input[disabled]) > input[disabled] { cursor: not-allowed; } &::-webkit-date-and-time-value { text-align: inherit; } &[type="number"] { &::-webkit-inner-spin-button { margin-block: -.75rem; margin-inline-end: -.75rem; } } &::-webkit-calendar-picker-indicator { position: absolute; inset-inline-end: .75em; } &:has( > input[type="date"]) { & :where(input[type="date"]) { webkit-appearance: none; appearance: none; display: inline-flex; } & input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; width: 1em; height: 1em; position: absolute; inset-inline-end: .75em; } } } } .indicator { @layer daisyui.component { width: max-content; display: inline-flex; position: relative; & :where(.indicator-item) { z-index: 1; white-space: nowrap; top: var(--indicator-t, 0); bottom: var(--indicator-b, auto); left: var(--indicator-s, auto); right: var(--indicator-e, 0); translate: var(--indicator-x, 50%) var(--indicator-y, -50%); position: absolute; } } } .table { @layer daisyui.component { border-radius: var(--radius-box); text-align: left; width: 100%; font-size: .875rem; position: relative; &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { text-align: right; } & tr.row-hover { &, &:nth-child(2n) { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } } & :where(th, td) { vertical-align: middle; padding-block: .75rem; padding-inline: 1rem; } & :where(thead, tfoot) { white-space: nowrap; color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 60%, transparent); } font-size: .875rem; font-weight: 600; } & :where(tfoot) { border-top: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-top: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } & :where(.table-pin-rows thead tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; top: 0; } & :where(.table-pin-rows tfoot tr) { z-index: 1; background-color: var(--color-base-100); position: sticky; bottom: 0; } & :where(.table-pin-cols tr th) { background-color: var(--color-base-100); position: sticky; left: 0; right: 0; } & :where(thead tr, tbody tr:not(:last-child)) { border-bottom: var(--border) solid var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-bottom: var(--border) solid color-mix(in oklch, var(--color-base-content) 5%, #0000); } } } } .range { @layer daisyui.component { appearance: none; webkit-appearance: none; --range-thumb: var(--color-base-100); --range-thumb-size: calc(var(--size-selector, .25rem) * 6); --range-progress: currentColor; --range-fill: 1; --range-p: .25rem; --range-bg: currentColor; @supports (color: color-mix(in lab, red, red)) { --range-bg: color-mix(in oklab, currentColor 10%, #0000); } cursor: pointer; vertical-align: middle; --radius-selector-max: calc(var(--radius-selector) + var(--radius-selector) + var(--radius-selector)); border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); width: clamp(3rem, 20rem, 100%); height: var(--range-thumb-size); background-color: #0000; border: none; overflow: hidden; [dir="rtl"] & { --range-dir: -1; } &:focus { outline: none; } &:focus-visible { outline-offset: 2px; outline: 2px solid; } &::-webkit-slider-runnable-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5); } @media (forced-colors: active) { &::-webkit-slider-runnable-track { border: 1px solid; } &::-moz-range-track { border: 1px solid; } } &::-webkit-slider-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); background-color: var(--range-thumb); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; appearance: none; webkit-appearance: none; color: var(--range-progress); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); position: relative; top: 50%; transform: translateY(-50%); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); } } &::-moz-range-track { background-color: var(--range-bg); border-radius: var(--radius-selector); width: 100%; height: calc(var(--range-thumb-size) * .5); } &::-moz-range-thumb { box-sizing: border-box; border-radius: calc(var(--radius-selector) + min(var(--range-p), var(--radius-selector-max))); height: var(--range-thumb-size); width: var(--range-thumb-size); border: var(--range-p) solid; color: var(--range-progress); box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px currentColor, 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); background-color: currentColor; position: relative; top: 50%; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000), 0 0 0 2rem var(--range-thumb) inset, calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2)) 0 0 calc(100rem * var(--range-fill)); } } &:disabled { cursor: not-allowed; opacity: .3; } } } .select { @layer daisyui.component { border: var(--border) solid #0000; appearance: none; background-color: var(--color-base-100); vertical-align: middle; width: clamp(3rem, 20rem, 100%); height: var(--size); touch-action: manipulation; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-image: linear-gradient(45deg, #0000 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, #0000 50%); background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%); background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-shrink: 1; align-items: center; gap: .375rem; padding-inline: .75rem 1.75rem; font-size: .875rem; display: inline-flex; position: relative; overflow: hidden; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } border-color: var(--input-color); --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --size: calc(var(--size-field, .25rem) * 10); [dir="rtl"] & { background-position: 12px calc(1px + 50%), 16px calc(1px + 50%); &::picker(select) { translate: .5rem; } & select::picker(select) { translate: .5rem; } } &[multiple] { background-image: none; height: auto; padding-block: .75rem; padding-inline-end: .75rem; overflow: auto; } & select { appearance: none; width: calc(100% + 2.75rem); height: calc(100% - calc(var(--border) * 2)); background: inherit; border-radius: inherit; border-style: none; align-items: center; margin-inline: -.75rem -1.75rem; padding-inline: .75rem 1.75rem; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:not(:last-child) { background-image: none; margin-inline-end: -1.375rem; } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; z-index: 1; } &:has( > select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } } &:has( > select[disabled]) > select[disabled] { cursor: not-allowed; } &, & select { @supports (appearance: base-select) { appearance: base-select; &::picker(select) { appearance: base-select; } } &::picker(select) { color: inherit; border: var(--border) solid var(--color-base-200); border-radius: var(--radius-box); background-color: inherit; max-height: min(24rem, 70dvh); box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0 / .2); box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * .1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * .1)); margin-block: .5rem; margin-inline: .5rem; padding: .5rem; translate: -.5rem; } &::picker-icon { display: none; } & optgroup { padding-top: .5em; & option { &:first-child { margin-top: .5em; } } } & option { border-radius: var(--radius-field); white-space: normal; padding-block: .375rem; padding-inline: .75rem; transition-property: color, background-color; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); &:not(:disabled) { &:hover, &:focus-visible { cursor: pointer; background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:active { background-color: var(--color-neutral); color: var(--color-neutral-content); box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral); } } } } } } .timeline { @layer daisyui.component { display: flex; position: relative; & > li { grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var(--timeline-row-end, minmax(0, 1fr)); grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var(--timeline-col-end, minmax(0, 1fr)); flex-shrink: 0; align-items: center; display: grid; position: relative; & > hr { border: none; width: 100%; &:first-child { grid-row-start: 2; grid-column-start: 1; } &:last-child { grid-area: 2 / 3 / auto / none; } @media print { border: .1px solid var(--color-base-300); } } } & :where(hr) { background-color: var(--color-base-300); height: .25rem; } &:has(.timeline-middle hr) { &:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0; } &:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector); } } &:not(:has(.timeline-middle)) { & :first-child hr:last-child { border-start-start-radius: var(--radius-selector); border-start-end-radius: 0; border-end-end-radius: 0; border-end-start-radius: var(--radius-selector); } & :last-child hr:first-child { border-start-start-radius: 0; border-start-end-radius: var(--radius-selector); border-end-end-radius: var(--radius-selector); border-end-start-radius: 0; } } } } .collapse-title { @layer daisyui.component { grid-row-start: 1; grid-column-start: 1; width: 100%; min-height: 1lh; padding: 1rem; padding-inline-end: 3rem; transition: background-color .2s ease-out; position: relative; } } .sr-only { clip-path: inset(50%); white-space: nowrap; border-width: 0; width: 1px; height: 1px; margin: -1px; padding: 0; position: absolute; overflow: hidden; } .menu-horizontal { @layer daisyui.modifier { flex-direction: row; display: inline-flex; & > li:not(.menu-title) > details > ul { margin-inline-start: 0; margin-top: 1rem; padding-block: .5rem; padding-inline-end: .5rem; position: absolute; } & > li > details > ul { &:before { --tw-content: none; content: var(--tw-content); } } :where(& > li:not(.menu-title) > details > ul) { border-radius: var(--radius-box); background-color: var(--color-base-100); box-shadow: 0 1px 3px oklch(0% 0 0 / .1), 0 1px 2px -1px oklch(0% 0 0 / .1); } } } .menu-vertical { @layer daisyui.modifier { flex-direction: column; display: inline-flex; & > li:not(.menu-title) > details > ul { margin-inline-start: 1rem; margin-top: 0; padding-block: 0; padding-inline-end: 0; position: relative; } } } .avatar { @layer daisyui.component { vertical-align: middle; display: inline-flex; position: relative; & > div { aspect-ratio: 1; display: block; overflow: hidden; } & img { object-fit: cover; width: 100%; height: 100%; } } } .checkbox { @layer daisyui.component { border: var(--border) solid var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } cursor: pointer; appearance: none; border-radius: var(--radius-selector); vertical-align: middle; color: var(--color-base-content); box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 0 #0000 inset, 0 0 #0000; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); flex-shrink: 0; padding: .25rem; transition: background-color .2s, box-shadow .2s; display: inline-block; position: relative; &:before { --tw-content: ""; content: var(--tw-content); opacity: 0; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%); width: 100%; height: 100%; box-shadow: 0px 3px 0 0px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; background-color: currentColor; font-size: 1rem; line-height: .75; transition: clip-path .3s .1s, opacity .1s .1s, rotate .3s .1s, translate .3s .1s; display: block; rotate: 45deg; } &:focus-visible { outline: 2px solid var(--input-color, currentColor); outline-offset: 2px; } &:checked, &[aria-checked="true"] { background-color: var(--input-color, #0000); box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); &:before { clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%); opacity: 1; } @media (forced-colors: active) { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } @media print { &:before { --tw-content: "✔︎"; clip-path: none; background-color: #0000; rotate: 0deg; } } } &:indeterminate { background-color: var(--input-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000)); } &:before { opacity: 1; clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%); translate: 0 -35%; rotate: 0deg; } } } &:disabled { @layer daisyui.modifier { cursor: not-allowed; opacity: .2; } } } .radio { @layer daisyui.component { cursor: pointer; appearance: none; vertical-align: middle; border: var(--border) solid var(--input-color, currentColor); border-radius: 3.40282e38px; flex-shrink: 0; padding: .25rem; display: inline-block; position: relative; @supports (color: color-mix(in lab, red, red)) { border: var(--border) solid var(--input-color, color-mix(in srgb, currentColor 20%, #0000)); } box-shadow: 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset; --size: calc(var(--size-selector, .25rem) * 6); width: var(--size); height: var(--size); color: var(--input-color, currentColor); &:before { --tw-content: ""; content: var(--tw-content); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); border-radius: 3.40282e38px; width: 100%; height: 100%; display: block; } &:focus-visible { outline: 2px solid; } &:checked, &[aria-checked="true"] { background-color: var(--color-base-100); border-color: currentColor; @media (prefers-reduced-motion: no-preference) { animation: .2s ease-out radio; } &:before { box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * .1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * .1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * .1)); background-color: currentColor; } @media (forced-colors: active) { &:before { outline-style: var(--tw-outline-style); outline-offset: calc(1px * -1); outline-width: 1px; } } @media print { &:before { outline-offset: -1rem; outline: .25rem solid; } } } } &:disabled { @layer daisyui.modifier { cursor: not-allowed; opacity: .2; } } } .navbar { @layer daisyui.component { align-items: center; width: 100%; min-height: 4rem; padding: .5rem; display: flex; } :where(&) { @layer daisyui.modifier { position: relative; } } } .drawer { @layer daisyui.component { grid-auto-columns: max-content auto; width: 100%; display: grid; position: relative; } } .card { @layer daisyui.component { border-radius: var(--radius-box); outline-offset: 2px; outline: 0 solid #0000; flex-direction: column; transition: outline .2s ease-in-out; display: flex; position: relative; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:focus-visible { outline-color: currentColor; } & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-end-radius: unset; border-end-start-radius: unset; overflow: hidden; } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: unset; border-end-end-radius: inherit; border-end-start-radius: inherit; overflow: hidden; } & figure { justify-content: center; align-items: center; display: flex; } &:has( > input:is(input[type="checkbox"], input[type="radio"])) { cursor: pointer; -webkit-user-select: none; user-select: none; } &:has( > :checked) { outline: 2px solid; } } } .progress { @layer daisyui.component { appearance: none; border-radius: var(--radius-box); background-color: currentColor; width: 100%; height: .5rem; position: relative; overflow: hidden; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, currentcolor 20%, transparent); } color: var(--color-base-content); &:indeterminate { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; @media (prefers-reduced-motion: no-preference) { animation: 5s ease-in-out infinite progress; } @supports ((-moz-appearance: none)) { &::-moz-progress-bar { background-color: #0000; @media (prefers-reduced-motion: no-preference) { background-image: repeating-linear-gradient(90deg, currentColor -1% 10%, #0000 10% 90%); background-position-x: 15%; background-size: 200%; animation: 5s ease-in-out infinite progress; } } } } @supports ((-moz-appearance: none)) { &::-moz-progress-bar { border-radius: var(--radius-box); background-color: currentColor; } } @supports ((-webkit-appearance: none)) { &::-webkit-progress-bar { border-radius: var(--radius-box); background-color: #0000; } &::-webkit-progress-value { border-radius: var(--radius-box); background-color: currentColor; } } } } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: calc(var(--spacing) * 0); } .inset-x-0 { inset-inline: calc(var(--spacing) * 0); } .inset-x-1 { inset-inline: calc(var(--spacing) * 1); } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } .dropdown-end { @layer daisyui.modifier { --anchor-h: span-left; & :where(.dropdown-content) { inset-inline-end: 0; translate: 0; [dir="rtl"] & { translate: 0; } } &.dropdown-left { --anchor-h: left; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0; } } &.dropdown-right { --anchor-h: right; --anchor-v: span-top; & .dropdown-content { top: auto; bottom: 0; } } } } .-top-px { top: -1px; } .top-0 { top: calc(var(--spacing) * 0); } .top-1\/2 { top: 50%; } .top-2 { top: calc(var(--spacing) * 2); } .top-\[-10\%\] { top: -10%; } .top-\[-25\%\] { top: -25%; } .top-\[-27\%\] { top: -27%; } .top-\[-29\%\] { top: -29%; } .top-\[-59\%\] { top: -59%; } .top-\[20\%\] { top: 20%; } .top-\[340\%\] { top: 340%; } .right-0 { right: calc(var(--spacing) * 0); } .right-0\.5 { right: calc(var(--spacing) * .5); } .right-1 { right: calc(var(--spacing) * 1); } .right-2 { right: calc(var(--spacing) * 2); } .right-8 { right: calc(var(--spacing) * 8); } .right-\[10px\] { right: 10px; } .right-\[var\(--hx-spacing-p-x\)\] { right: var(--hx-spacing-p-x); } .right-\[var\(--spacing-safe-edge-r\)\] { right: var(--spacing-safe-edge-r); } .right-px { right: 1px; } .bottom-0 { bottom: calc(var(--spacing) * 0); } .bottom-1 { bottom: calc(var(--spacing) * 1); } .bottom-full { bottom: 100%; } .left-0 { left: calc(var(--spacing) * 0); } .left-1 { left: calc(var(--spacing) * 1); } .left-1\/2 { left: 50%; } .left-\[-5\%\] { left: -5%; } .left-\[-10\%\] { left: -10%; } .left-\[-22\%\] { left: -22%; } .left-\[13\%\] { left: 13%; } .left-auto { left: auto; } .textarea { @layer daisyui.component { border: var(--border) solid #0000; appearance: none; border-radius: var(--radius-field); background-color: var(--color-base-100); vertical-align: middle; width: clamp(3rem, 20rem, 100%); min-height: 5rem; font-size: max(var(--font-size, .875rem), .875rem); touch-action: manipulation; border-color: var(--input-color); box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; flex-shrink: 1; padding-block: .5rem; padding-inline: .75rem; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * .1)) inset; } --input-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000); } & textarea { appearance: none; background-color: #0000; border: none; &:focus, &:focus-within { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } } &:focus, &:focus-within { --input-color: var(--color-base-content); box-shadow: 0 1px var(--input-color); @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000); } outline: 2px solid var(--input-color); outline-offset: 2px; isolation: isolate; } @media (pointer: coarse) { @supports (-webkit-touch-callout: none) { &:focus, &:focus-within { --font-size: 1rem; } } } &:has( > textarea[disabled]), &:is(:disabled, [disabled]) { cursor: not-allowed; border-color: var(--color-base-200); background-color: var(--color-base-200); color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } &::placeholder { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } } box-shadow: none; } &:has( > textarea[disabled]) > textarea[disabled] { cursor: not-allowed; } } } .stack { @layer daisyui.component { grid-template-rows: 3px 4px 1fr 4px 3px; grid-template-columns: 3px 4px 1fr 4px 3px; display: inline-grid; & > * { width: 100%; height: 100%; &:nth-child(n+2) { opacity: .7; width: 100%; } &:nth-child(2) { z-index: 2; opacity: .9; } &:first-child { z-index: 3; width: 100%; } } } @layer daisyui.modifier { &, &.stack-bottom { & > * { grid-area: 3 / 3 / 6 / 4; &:nth-child(2) { grid-area: 2 / 2 / 5 / 5; } &:first-child { grid-area: 1 / 1 / 4 / 6; } } } &.stack-top { & > * { grid-area: 1 / 3 / 4 / 4; &:nth-child(2) { grid-area: 2 / 2 / 5 / 5; } &:first-child { grid-area: 3 / 1 / 6 / 6; } } } &.stack-start { & > * { grid-area: 3 / 1 / 4 / 4; &:nth-child(2) { grid-area: 2 / 2 / 5 / 5; } &:first-child { grid-area: 1 / 3 / 6 / 6; } } } &.stack-end { & > * { grid-area: 3 / 3 / 4 / 6; &:nth-child(2) { grid-area: 2 / 2 / 5 / 5; } &:first-child { grid-area: 1 / 1 / 6 / 4; } } } } } .modal-backdrop { @layer daisyui.component { color: #0000; z-index: -1; grid-row-start: 1; grid-column-start: 1; place-self: stretch stretch; display: grid; & button { cursor: pointer; } } } .join-item { z-index: 1; &:hover { z-index: 2; } &:focus { z-index: 3; } } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-60 { z-index: 60; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-full { grid-column: 1 / -1; } .timeline-end { @layer daisyui.component { grid-area: 3 / 1 / 4 / 4; place-self: flex-start center; margin: .25rem; } } .timeline-start { @layer daisyui.component { grid-area: 1 / 1 / 2 / 4; place-self: flex-end center; margin: .25rem; } } .timeline-vertical { @layer daisyui.modifier { flex-direction: column; & > li { --timeline-row-start: minmax(0, 1fr); --timeline-row-end: minmax(0, 1fr); justify-items: center; & > hr { width: .25rem; height: 100%; &:first-child { grid-row-start: 1; grid-column-start: 2; } &:last-child { grid-area: 3 / 2 / none; } } } & .timeline-start { grid-area: 1 / 1 / 4 / 2; place-self: center flex-end; } & .timeline-end { grid-area: 1 / 3 / 4 / 4; place-self: center flex-start; } &:has(.timeline-middle) { & > li { & > hr { &:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } &:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } } } &:not(:has(.timeline-middle)) { & :first-child { & > hr:last-child { border-top-left-radius: var(--radius-selector); border-top-right-radius: var(--radius-selector); border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } & :last-child { & > hr:first-child { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: var(--radius-selector); border-bottom-left-radius: var(--radius-selector); } } } &.timeline-snap-icon { & > li { --timeline-col-start: minmax(0, 1fr); --timeline-row-start: .5rem; } } } } .hero { @layer daisyui.component { background-position: center; background-size: cover; place-items: center; width: 100%; display: grid; & > * { grid-row-start: 1; grid-column-start: 1; } } } .modal-box { @layer daisyui.component { background-color: var(--color-base-100); border-top-left-radius: var(--modal-tl, var(--radius-box)); border-top-right-radius: var(--modal-tr, var(--radius-box)); border-bottom-left-radius: var(--modal-bl, var(--radius-box)); border-bottom-right-radius: var(--modal-br, var(--radius-box)); opacity: 0; overscroll-behavior: contain; grid-row-start: 1; grid-column-start: 1; width: 91.6667%; max-width: 32rem; max-height: 100vh; padding: 1.5rem; transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out; overflow-y: auto; scale: .95; box-shadow: 0 25px 50px -12px oklch(0% 0 0 / .25); } } .drawer-content { @layer daisyui.component { grid-row-start: 1; grid-column-start: 2; min-width: 0; } } .timeline-middle { @layer daisyui.component { grid-row-start: 2; grid-column-start: 2; } } .drawer-end { @layer daisyui.modifier.placement { grid-auto-columns: auto max-content; & > .drawer-toggle { & ~ .drawer-content { grid-column-start: 1; } & ~ .drawer-side { grid-column-start: 2; justify-items: end; } & ~ .drawer-side > :not(.drawer-overlay) { translate: 100%; [dir="rtl"] & { translate: -100%; } } &:checked ~ .drawer-side > :not(.drawer-overlay) { translate: 0%; } } } } .float-left { float: left; } .float-none { float: none; } .float-right { float: right; } .container { width: 100%; @media (width >= 320px) { max-width: 320px; } @media (width >= 480px) { max-width: 480px; } @media (width >= 768px) { max-width: 768px; } @media (width >= 1024px) { max-width: 1024px; } @media (width >= 1320px) { max-width: 1320px; } @media (width >= 1536px) { max-width: 1536px; } } .m-0 { margin: calc(var(--spacing) * 0); } .m-\[calc\(-1\*var\(--gap\)\)\] { margin: calc(-1 * var(--gap)); } .m-auto { margin: auto; } .filter { @layer daisyui.component { flex-wrap: wrap; display: flex; & input[type="radio"] { width: auto; } & input { opacity: 1; transition: margin .1s, opacity .3s, padding .3s, border-width .1s; overflow: hidden; scale: 1; &:not(:last-child) { margin-inline-end: .25rem; } &.filter-reset { aspect-ratio: 1; &:after { --tw-content: "×"; content: var(--tw-content); } } } &:not(:has(input:checked:not(.filter-reset))) { & .filter-reset, & input[type="reset"] { opacity: 0; border-width: 0; width: 0; margin-inline: 0; padding-inline: 0; scale: 0; } } &:has(input:checked:not(.filter-reset)) { & input:not(:checked, .filter-reset, input[type="reset"]) { opacity: 0; border-width: 0; width: 0; margin-inline: 0; padding-inline: 0; scale: 0; } } } } .container { padding-inline: var(--edge-spacing); margin-inline: auto; } .-mx-\[10px\] { margin-inline: -10px; } .mx-auto { margin-inline: auto; } .-my-1 { margin-block: calc(var(--spacing) * -1); } .my-0 { margin-block: calc(var(--spacing) * 0); } .my-2 { margin-block: calc(var(--spacing) * 2); } .my-3 { margin-block: calc(var(--spacing) * 3); } .my-4 { margin-block: calc(var(--spacing) * 4); } .my-\[var\(--spacing-section\)\] { margin-block: var(--spacing-section); } .my-auto { margin-block: auto; } .my-outer { margin-block: var(--spacing-outer); } .label { @layer daisyui.component { white-space: nowrap; color: currentColor; align-items: center; gap: .375rem; display: inline-flex; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, currentcolor 60%, transparent); } &:has(input) { cursor: pointer; } &:is(.input > *, .select > *) { white-space: nowrap; height: calc(100% - .5rem); font-size: inherit; align-items: center; padding-inline: .75rem; display: flex; &:first-child { border-inline-end: var(--border) solid currentColor; margin-inline: -.75rem .75rem; @supports (color: color-mix(in lab, red, red)) { border-inline-end: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } &:last-child { border-inline-start: var(--border) solid currentColor; margin-inline: .75rem -.75rem; @supports (color: color-mix(in lab, red, red)) { border-inline-start: var(--border) solid color-mix(in oklab, currentColor 10%, #0000); } } } } } .join-item { &:where(:not(:first-child, :disabled, [disabled], .btn-disabled)) { margin-block-start: 0; margin-inline-start: calc(var(--border, 1px) * -1); } &:where(:is(:disabled, [disabled], .btn-disabled)) { border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px); } } .ms-6 { margin-inline-start: calc(var(--spacing) * 6); } .ms-\[calc\(-1\*var\(--separator-size\)\)\] { margin-inline-start: calc(-1 * var(--separator-size)); } .ms-auto { margin-inline-start: auto; } .me-6 { margin-inline-end: calc(var(--spacing) * 6); } .prose { color: var(--tw-prose-body); max-width: 65ch; & :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } & :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-lead); margin-top: 1.2em; margin-bottom: 1.2em; font-size: 1.25em; line-height: 1.6; } & :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-links); font-weight: 500; text-decoration: underline; } & :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } & :where(a strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(blockquote strong):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } & :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; list-style-type: decimal; } & :where(ol[type="A"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } & :where(ol[type="a"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } & :where(ol[type="A" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-alpha; } & :where(ol[type="a" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-alpha; } & :where(ol[type="I"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } & :where(ol[type="i"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } & :where(ol[type="I" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: upper-roman; } & :where(ol[type="i" s]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: lower-roman; } & :where(ol[type="1"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) { list-style-type: decimal; } & :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; list-style-type: disc; } & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { color: var(--tw-prose-counters); font-weight: 400; } & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } & :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); margin-top: 1.25em; font-weight: 600; } & :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } & :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-quotes); border-inline-start-width: .25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "“""”""‘""’"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; font-style: italic; font-weight: 500; } & :where(blockquote p:first-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):before { content: open-quote; } & :where(blockquote p:last-of-type):not(:where([class~="not-prose"], [class~="not-prose"] *)):after { content: close-quote; } & :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-size: 2.25em; font-weight: 800; line-height: 1.11111; font-size: var(--text-h2); line-height: var(--tw-leading, var(--text-h2--line-height)); font-weight: var(--tw-font-weight, var(--text-h2--font-weight)); margin-top: 0; margin-bottom: .888889em; } & :where(h1 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-weight: 900; } & :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-size: 1.5em; font-weight: 700; line-height: 1.33333; font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); margin-top: 2em; margin-bottom: 1em; } & :where(h2 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-weight: 800; } & :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-size: 1.25em; font-weight: 600; line-height: 1.6; font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); margin-top: 1.6em; margin-bottom: .6em; } & :where(h3 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-weight: 700; } & :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; line-height: 1.5; font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); margin-top: 1.5em; margin-bottom: .5em; } & :where(h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-weight: 700; } & :where(img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } & :where(picture):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; display: block; } & :where(video):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } & :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows); padding-top: .1875em; padding-inline-end: .375em; padding-bottom: .1875em; border-radius: .3125rem; padding-inline-start: .375em; font-family: inherit; font-size: .875em; font-weight: 500; } & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-code); font-size: .875em; font-weight: 600; } & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, & :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after { content: "`"; } & :where(a code):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(h1 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } & :where(h2 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: .875em; } & :where(h3 code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; font-size: .9em; } & :where(h4 code):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(blockquote code):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: inherit; } & :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); padding-top: .857143em; padding-inline-end: 1.14286em; padding-bottom: .857143em; border-radius: .375rem; margin-top: 1.71429em; margin-bottom: 1.71429em; padding-inline-start: 1.14286em; font-size: .875em; font-weight: 400; line-height: 1.71429; overflow-x: auto; } & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; background-color: #0000; border-width: 0; border-radius: 0; padding: 0; } & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before, & :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after { content: none; } & :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) { table-layout: auto; width: 100%; margin-top: 2em; margin-bottom: 2em; font-size: .875em; line-height: 1.71429; } & :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } & :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-headings); vertical-align: bottom; padding-inline-end: .571429em; padding-bottom: .571429em; padding-inline-start: .571429em; font-weight: 600; } & :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } & :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-bottom-width: 0; } & :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: baseline; } & :where(tfoot):not(:where([class~="not-prose"], [class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } & :where(tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { vertical-align: top; } & :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { text-align: start; } & :where(figure > *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } & :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: var(--tw-prose-captions); margin-top: .857143em; font-size: .875em; line-height: 1.42857; } --tw-prose-body: oklch(37.3% .034 259.733); --tw-prose-headings: oklch(21% .034 264.665); --tw-prose-lead: oklch(44.6% .03 256.802); --tw-prose-links: oklch(21% .034 264.665); --tw-prose-bold: oklch(21% .034 264.665); --tw-prose-counters: oklch(55.1% .027 264.364); --tw-prose-bullets: oklch(87.2% .01 258.338); --tw-prose-hr: oklch(92.8% .006 264.531); --tw-prose-quotes: oklch(21% .034 264.665); --tw-prose-quote-borders: oklch(92.8% .006 264.531); --tw-prose-captions: oklch(55.1% .027 264.364); --tw-prose-kbd: oklch(21% .034 264.665); --tw-prose-kbd-shadows: oklab(21% -.00316127 -.0338527 / .1); --tw-prose-code: oklch(21% .034 264.665); --tw-prose-pre-code: oklch(92.8% .006 264.531); --tw-prose-pre-bg: oklch(27.8% .033 256.848); --tw-prose-th-borders: oklch(87.2% .01 258.338); --tw-prose-td-borders: oklch(92.8% .006 264.531); --tw-prose-invert-body: oklch(87.2% .01 258.338); --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: oklch(70.7% .022 261.325); --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: oklch(70.7% .022 261.325); --tw-prose-invert-bullets: oklch(44.6% .03 256.802); --tw-prose-invert-hr: oklch(37.3% .034 259.733); --tw-prose-invert-quotes: oklch(96.7% .003 264.542); --tw-prose-invert-quote-borders: oklch(37.3% .034 259.733); --tw-prose-invert-captions: oklch(70.7% .022 261.325); --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: #ffffff1a; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: oklch(87.2% .01 258.338); --tw-prose-invert-pre-bg: #00000080; --tw-prose-invert-th-borders: oklch(44.6% .03 256.802); --tw-prose-invert-td-borders: oklch(37.3% .034 259.733); line-height: var(--hx-leading-prose); & :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } & :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: .5em; margin-bottom: .5em; } & :where(ol > li):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: .375em; } & :where(.prose > ul > li p):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: .75em; margin-bottom: .75em; } & :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } & :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } & :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; } & :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 1.25em; } & :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: .75em; margin-bottom: .75em; } & :where(dl):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } & :where(dd):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: .5em; padding-inline-start: 1.625em; } & :where(hr + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(h2 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(h3 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)), & :where(h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } & :where(thead th:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } & :where(thead th:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } & :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-top: .571429em; padding-inline-end: .571429em; padding-bottom: .571429em; padding-inline-start: .571429em; } & :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-start: 0; } & :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { padding-inline-end: 0; } & :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } & :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-top: 0; } & :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) { margin-bottom: 0; } & :where(h5):not(:where([class~="not-prose"], [class~="not-prose"] *)) { font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); } } .modal-action { @layer daisyui.component { justify-content: flex-end; gap: .5rem; margin-top: 1.5rem; display: flex; } } .-mt-2 { margin-top: calc(var(--spacing) * -2); } .-mt-3 { margin-top: calc(var(--spacing) * -3); } .mt-0 { margin-top: calc(var(--spacing) * 0); } .mt-1 { margin-top: calc(var(--spacing) * 1); } .mt-2 { margin-top: calc(var(--spacing) * 2); } .mt-3 { margin-top: calc(var(--spacing) * 3); } .mt-4 { margin-top: calc(var(--spacing) * 4); } .mt-6 { margin-top: calc(var(--spacing) * 6); } .mt-\[0\.25em\] { margin-top: .25em; } .mt-\[calc\(-1\*var\(--separator-size\)\)\] { margin-top: calc(-1 * var(--separator-size)); } .mt-outer { margin-top: var(--spacing-outer); } .mt-px { margin-top: 1px; } .breadcrumbs { @layer daisyui.component { max-width: 100%; padding-block: .5rem; overflow-x: auto; & > menu, & > ul, & > ol { white-space: nowrap; align-items: center; min-height: min-content; display: flex; & > li { align-items: center; display: flex; & > * { cursor: pointer; align-items: center; gap: .5rem; display: flex; &:hover { @media (hover: hover) { text-decoration-line: underline; } } &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:focus-visible { outline-offset: 2px; outline: 2px solid; } } & + :before { content: ""; opacity: .4; background-color: #0000; border-top: 1px solid; border-right: 1px solid; width: .375rem; height: .375rem; margin-left: .5rem; margin-right: .75rem; display: block; rotate: 45deg; } [dir="rtl"] & + :before { rotate: -135deg; } } } } } .mr-4 { margin-right: calc(var(--spacing) * 4); } .mr-\[calc\(var\(--hx-spacing-p-x\)\*0\.75\)\] { margin-right: calc(var(--hx-spacing-p-x) * .75); } .mr-\[var\(--hx-spacing-m\)\] { margin-right: var(--hx-spacing-m); } .mr-\[var\(--hx-spacing-p-x\)\] { margin-right: var(--hx-spacing-p-x); } .fieldset-legend { @layer daisyui.component { color: var(--color-base-content); justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: -.25rem; padding-block: .5rem; font-weight: 600; display: flex; } } .-mb-2 { margin-bottom: calc(var(--spacing) * -2); } .mb-0 { margin-bottom: calc(var(--spacing) * 0); } .mb-1 { margin-bottom: calc(var(--spacing) * 1); } .mb-2 { margin-bottom: calc(var(--spacing) * 2); } .mb-3 { margin-bottom: calc(var(--spacing) * 3); } .mb-6 { margin-bottom: calc(var(--spacing) * 6); } .mb-8 { margin-bottom: calc(var(--spacing) * 8); } .mb-\[var\(--hx-spacing-m\)\] { margin-bottom: var(--hx-spacing-m); } .mb-\[var\(--hx-spacing-my\,var\(--hx-spacing-m\,0\.8rem\)\)\] { margin-bottom: var(--hx-spacing-my, var(--hx-spacing-m, .8rem)); } .mb-content { margin-bottom: var(--spacing-content); } .mb-inner { margin-bottom: var(--spacing-inner); } .mb-outer { margin-bottom: var(--spacing-outer); } .ml-\[0\.1em\] { margin-left: .1em; } .ml-\[0\.2em\] { margin-left: .2em; } .ml-\[4px\] { margin-left: 4px; } .ml-\[var\(--hx-spacing-m\)\] { margin-left: var(--hx-spacing-m); } .status { @layer daisyui.component { aspect-ratio: 1; border-radius: var(--radius-selector); background-color: var(--color-base-content); width: .5rem; height: .5rem; display: inline-block; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 20%, transparent); } vertical-align: middle; color: #0000004d; background-position: center; background-repeat: no-repeat; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-black) 30%, transparent); } background-image: radial-gradient(circle at 35% 30%, oklch(1 0 0 / calc(var(--depth) * .5)), #0000); box-shadow: 0 2px 3px -1px; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000); } } } .badge { @layer daisyui.component { border-radius: var(--radius-selector); vertical-align: middle; color: var(--badge-fg); border: var(--border) solid var(--badge-color, var(--color-base-200)); width: fit-content; padding-inline: calc(.25rem * 3 - var(--border)); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); background-color: var(--badge-bg); --badge-bg: var(--badge-color, var(--color-base-100)); --badge-fg: var(--color-base-content); --size: calc(var(--size-selector, .25rem) * 6); height: var(--size); justify-content: center; align-items: center; gap: .5rem; font-size: .875rem; display: inline-flex; } } .tabs { @layer daisyui.component { --tabs-height: auto; --tabs-direction: row; --tab-height: calc(var(--size-field, .25rem) * 10); height: var(--tabs-height); flex-wrap: wrap; flex-direction: var(--tabs-direction); display: flex; } } .footer { @layer daisyui.component { grid-auto-flow: row; place-items: start; gap: 2.5rem 1rem; width: 100%; font-size: .875rem; line-height: 1.25rem; display: grid; & > * { place-items: start; gap: .5rem; display: grid; } &.footer-center { text-align: center; grid-auto-flow: column dense; place-items: center; & > * { place-items: center; } } } } .card-body { @layer daisyui.component { padding: var(--card-p, 1.5rem); font-size: var(--card-fs, .875rem); flex-direction: column; flex: auto; gap: .5rem; display: flex; & :where(p) { flex-grow: 1; } } } .carousel { @layer daisyui.component { scroll-snap-type: x mandatory; scrollbar-width: none; display: inline-flex; overflow-x: scroll; @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } &::-webkit-scrollbar { display: none; } } } .alert { border-width: var(--border); border-color: var(--alert-border-color, var(--color-base-200)); @layer daisyui.component { --alert-border-color: var(--color-base-200); border-radius: var(--radius-box); color: var(--color-base-content); background-color: var(--alert-color, var(--color-base-200)); text-align: start; background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--fx-noise); box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px #000, 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); border-style: solid; grid-template-columns: auto; grid-auto-flow: column; justify-content: start; place-items: center start; gap: 1rem; padding-block: .75rem; padding-inline: 1rem; font-size: .875rem; line-height: 1.25rem; display: grid; @supports (color: color-mix(in lab, red, red)) { box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * .08)) inset, 0 1px color-mix(in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * .08)); } &:has(:nth-child(2)) { grid-template-columns: auto minmax(auto, 1fr); } } } .fieldset { @layer daisyui.component { grid-template-columns: 1fr; grid-auto-rows: max-content; gap: .375rem; padding-block: .25rem; font-size: .75rem; display: grid; } } .card-actions { @layer daisyui.component { flex-wrap: wrap; align-items: flex-start; gap: .5rem; display: flex; } } .card-title { @layer daisyui.component { font-size: var(--cardtitle-fs, 1.125rem); align-items: center; gap: .5rem; font-weight: 600; display: flex; } } .join { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; align-items: stretch; display: inline-flex; & :where(.join-item) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-end-radius: var(--join-ee, 0); border-end-start-radius: var(--join-es, 0); & * { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } & > .join-item:where(:first-child) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } & :first-child:not(:last-child) { & :where(.join-item) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } } & > .join-item:where(:last-child) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } & :last-child:not(:first-child) { & :where(.join-item) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } } & > .join-item:where(:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } & :only-child { & :where(.join-item) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } } .line-clamp-3 { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } .prose { :root & { --tw-prose-body: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000); } --tw-prose-headings: var(--color-base-content); --tw-prose-lead: var(--color-base-content); --tw-prose-links: var(--color-base-content); --tw-prose-bold: var(--color-base-content); --tw-prose-counters: var(--color-base-content); --tw-prose-bullets: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --tw-prose-hr: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-quotes: var(--color-base-content); --tw-prose-quote-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-captions: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --tw-prose-code: var(--color-base-content); --tw-prose-pre-code: var(--color-neutral-content); --tw-prose-pre-bg: var(--color-neutral); --tw-prose-th-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000); } --tw-prose-td-borders: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000); } --tw-prose-kbd: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000); } & :where(code):not(pre > code) { background-color: var(--color-base-200); border-radius: var(--radius-selector); border: var(--border) solid var(--color-base-300); font-weight: inherit; padding-inline: .5em; &:before, &:after { display: none; } } } } .\!hidden { display: none !important; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-\[1\/2\] { aspect-ratio: 1 / 2; } .aspect-\[2\/1\] { aspect-ratio: 2; } .aspect-\[3\/4\] { aspect-ratio: 3 / 4; } .aspect-\[4\/3\] { aspect-ratio: 4 / 3; } .aspect-\[9\/16\] { aspect-ratio: 9 / 16; } .aspect-\[10\/16\] { aspect-ratio: 10 / 16; } .aspect-\[16\/9\] { aspect-ratio: 16 / 9; } .aspect-\[16\/10\] { aspect-ratio: 16 / 10; } .aspect-square { aspect-ratio: 1; } .aspect-video { aspect-ratio: var(--aspect-video); } .modal-bottom { @layer daisyui.modifier { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1; } } } .card-side { @layer daisyui.modifier { flex-direction: row; align-items: stretch; & :where(figure:first-child) { border-start-start-radius: inherit; border-start-end-radius: unset; border-end-end-radius: unset; border-end-start-radius: inherit; overflow: hidden; } & :where(figure:last-child) { border-start-start-radius: unset; border-start-end-radius: inherit; border-end-end-radius: inherit; border-end-start-radius: unset; overflow: hidden; } & figure > * { max-width: unset; } & :where(figure > *) { object-fit: cover; width: 100%; height: 100%; } } } .btn-circle { @layer daisyui.modifier { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0; } } .size-10 { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); } .h-1 { height: calc(var(--spacing) * 1); } .h-2 { height: calc(var(--spacing) * 2); } .h-3 { height: calc(var(--spacing) * 3); } .h-6 { height: calc(var(--spacing) * 6); } .h-8 { height: calc(var(--spacing) * 8); } .h-9 { height: calc(var(--spacing) * 9); } .h-12 { height: calc(var(--spacing) * 12); } .h-\[0\.6rem\] { height: .6rem; } .h-\[1\.2rem\] { height: 1.2rem; } .h-\[1\.3em\] { height: 1.3em; } .h-\[1\.5em\] { height: 1.5em; } .h-\[1\.15rem\] { height: 1.15rem; } .h-\[1em\] { height: 1em; } .h-\[3px\] { height: 3px; } .h-\[18vw\] { height: 18vw; } .h-\[26px\] { height: 26px; } .h-\[44px\] { height: 44px; } .h-\[50\%\] { height: 50%; } .h-\[100\%\] { height: 100%; } .h-\[120\%\] { height: 120%; } .h-\[122\%\] { height: 122%; } .h-\[136\%\] { height: 136%; } .h-\[200px\] { height: 200px; } .h-\[calc\(100\%\+2px\)\] { height: calc(100% + 2px); } .h-\[calc\(100\%-24px\)\] { height: calc(100% - 24px); } .h-\[var\(--hx-size\)\] { height: var(--hx-size); } .h-\[var\(--thumb-size\)\] { height: var(--thumb-size); } .h-auto { height: auto; } .h-full { height: 100%; } .max-h-64 { max-height: calc(var(--spacing) * 64); } .max-h-\[195px\] { max-height: 195px; } .max-h-full { max-height: 100%; } .min-h-0 { min-height: calc(var(--spacing) * 0); } .min-h-\[40px\] { min-height: 40px; } .min-h-\[44px\] { min-height: 44px; } .min-h-\[calc\(var\(--hx-size\)\*2\)\] { min-height: calc(var(--hx-size) * 2); } .loading-lg { @layer daisyui.modifier { width: calc(var(--size-selector, .25rem) * 7); } } .loading-md { @layer daisyui.modifier { width: calc(var(--size-selector, .25rem) * 6); } } .loading-sm { @layer daisyui.modifier { width: calc(var(--size-selector, .25rem) * 5); } } .loading-xs { @layer daisyui.modifier { width: calc(var(--size-selector, .25rem) * 4); } } .w-1 { width: calc(var(--spacing) * 1); } .w-1\/2 { width: 50%; } .w-2 { width: calc(var(--spacing) * 2); } .w-3 { width: calc(var(--spacing) * 3); } .w-5 { width: calc(var(--spacing) * 5); } .w-6 { width: calc(var(--spacing) * 6); } .w-8 { width: calc(var(--spacing) * 8); } .w-10 { width: calc(var(--spacing) * 10); } .w-11\/12 { width: 91.6667%; } .w-12 { width: calc(var(--spacing) * 12); } .w-\[0\.6rem\] { width: .6rem; } .w-\[1\.2rem\] { width: 1.2rem; } .w-\[1\.3em\] { width: 1.3em; } .w-\[1\.5em\] { width: 1.5em; } .w-\[1\.15rem\] { width: 1.15rem; } .w-\[1em\] { width: 1em; } .w-\[25\%\] { width: 25%; } .w-\[26px\] { width: 26px; } .w-\[32px\] { width: 32px; } .w-\[50\%\] { width: 50%; } .w-\[70\%\] { width: 70%; } .w-\[100\%\] { width: 100%; } .w-\[200px\] { width: 200px; } .w-\[210px\] { width: 210px; } .w-\[calc\(100\%_-_var\(--peek-size\)_-_var\(--gap\)\)\] { width: calc(100% - var(--peek-size) - var(--gap)); } .w-\[var\(--hx-size\)\] { width: var(--hx-size); } .w-\[var\(--thumb-size\)\] { width: var(--thumb-size); } .w-auto { width: auto; } .w-full { width: 100%; } .w-px { width: 1px; } .max-w-28 { max-width: calc(var(--spacing) * 28); } .max-w-\[24rem\] { max-width: 24rem; } .max-w-\[32rem\] { max-width: 32rem; } .max-w-\[42rem\] { max-width: 42rem; } .max-w-\[64rem\] { max-width: 64rem; } .max-w-\[min\(220px\,80vw\)\] { max-width: min(220px, 80vw); } .max-w-\[var\(--hx-carousel-item-max-width\)\] { max-width: var(--hx-carousel-item-max-width); } .max-w-full { max-width: 100%; } .max-w-none { max-width: none; } .min-w-0 { min-width: calc(var(--spacing) * 0); } .min-w-\[100px\] { min-width: 100px; } .min-w-\[200px\] { min-width: 200px; } .min-w-\[var\(--hx-carousel-item-min-width\)\] { min-width: var(--hx-carousel-item-min-width); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .flex-grow, .grow { flex-grow: 1; } .border-collapse { border-collapse: collapse; } .origin-left { transform-origin: 0; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-1\/3 { --tw-translate-x: calc(calc(1/3 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-x-1\/3 { --tw-translate-x: calc(1/3 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/3 { --tw-translate-y: calc(calc(1/3 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-0 { --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); } .translate-y-1\/3 { --tw-translate-y: calc(1/3 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } .rotate-\[-2deg\] { rotate: -2deg; } .rotate-\[2deg\] { rotate: 2deg; } .rotate-\[5deg\] { rotate: 5deg; } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .transform-gpu { transform: translateZ(0) var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .link { @layer daisyui.component { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:focus-visible { outline-offset: 2px; outline: 2px solid; } } } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .resize { resize: both; } .resize-y { resize: vertical; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-start { scroll-snap-align: start; } .scroll-mt-\[20px\] { scroll-margin-top: 20px; } .scroll-px-\[var\(--hx-carousel-content-edge\)\] { scroll-padding-inline: var(--hx-carousel-content-edge); } .list-disc { list-style-type: disc; } .appearance-none { appearance: none; } .break-inside-avoid { break-inside: avoid; } .auto-cols-fr { grid-auto-columns: minmax(0, 1fr); } .grid-flow-dense { grid-auto-flow: dense; } .auto-rows-min { grid-auto-rows: min-content; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .grid-cols-\[max-content_minmax\(0\,1fr\)\] { grid-template-columns: max-content minmax(0, 1fr); } .grid-cols-\[max-content_minmax\(0\,auto\)\] { grid-template-columns: max-content minmax(0, auto); } .grid-cols-\[repeat\(auto-fit\,minmax\(var\(--item-min-width\)\,1fr\)\)\] { grid-template-columns: repeat(auto-fit,minmax(var(--item-min-width),1fr)); } .grid-cols-subgrid { grid-template-columns: subgrid; } .grid-rows-\[auto_1fr\] { grid-template-rows: auto 1fr; } .grid-rows-\[auto_auto\] { grid-template-rows: auto auto; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap { flex-wrap: wrap; } .place-items-center { place-items: center; } .place-items-stretch { place-items: stretch stretch; } .content-center { align-content: center; } .items-baseline { align-items: baseline; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-start { align-items: flex-start; } .items-stretch { align-items: stretch; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } .gap-0 { gap: calc(var(--spacing) * 0); } .gap-0\.5 { gap: calc(var(--spacing) * .5); } .gap-1 { gap: calc(var(--spacing) * 1); } .gap-2 { gap: calc(var(--spacing) * 2); } .gap-3 { gap: calc(var(--spacing) * 3); } .gap-4 { gap: calc(var(--spacing) * 4); } .gap-6 { gap: calc(var(--spacing) * 6); } .gap-\[\.5em\] { gap: .5em; } .gap-\[0\.2em\] { gap: .2em; } .gap-\[0\.5em\] { gap: .5em; } .gap-\[2px\] { gap: 2px; } .gap-\[18px\] { gap: 18px; } .gap-\[calc\(var\(--hx-spacing-gap\)\*0\.75\)\] { gap: calc(var(--hx-spacing-gap) * .75); } .gap-\[var\(--gap\)\] { gap: var(--gap); } .gap-\[var\(--hx-spacing-gap\)\] { gap: var(--hx-spacing-gap); } .gap-inner { gap: var(--spacing-inner); } .gap-px { gap: 1px; } .space-y-2 { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse))); } } .space-y-px { :where(& > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(1px * var(--tw-space-y-reverse)); margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse))); } } .gap-x-4 { column-gap: calc(var(--spacing) * 4); } .gap-x-\[var\(--hx-spacing-mx\,var\(--hx-spacing-m\,0\.8rem\)\)\] { column-gap: var(--hx-spacing-mx, var(--hx-spacing-m, .8rem)); } .gap-x-content { column-gap: var(--spacing-content); } .gap-y-2 { row-gap: calc(var(--spacing) * 2); } .gap-y-\[var\(--hx-spacing-my\,var\(--hx-spacing-m\,0\.8rem\)\)\] { row-gap: var(--hx-spacing-my, var(--hx-spacing-m, .8rem)); } .place-self-center { place-self: center; } .self-center { align-self: center; } .self-start { align-self: flex-start; } .self-stretch { align-self: stretch; } .justify-self-center { justify-self: center; } .truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-clip { overflow: clip; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-auto { overflow-y: auto; } .overflow-y-hidden { overflow-y: hidden; } .overscroll-x-contain { overscroll-behavior-x: contain; } .timeline-box { @layer daisyui.component { border: var(--border) solid; border-radius: var(--radius-box); border-color: var(--color-base-300); background-color: var(--color-base-100); padding-block: .5rem; padding-inline: 1rem; font-size: .75rem; box-shadow: 0 1px 2px oklch(0% 0 0 / .05); } } .menu-sm { @layer daisyui.modifier { & :where(li:not(.menu-title) > :not(ul, details, .menu-title)), & :where(li:not(.menu-title) > details > summary:not(.menu-title)) { border-radius: var(--radius-field); padding-block: .25rem; padding-inline: .625rem; font-size: .75rem; } & .menu-title { padding-block: .5rem; padding-inline: .75rem; } } } .rounded { border-radius: .25rem; } .rounded-\[0\.5rem\] { border-radius: .5rem; } .rounded-\[calc\(var\(--hx-radius\)-2px\)\] { border-radius: calc(var(--hx-radius) - 2px); } .rounded-\[inherit\] { border-radius: inherit; } .rounded-\[var\(--hx-radius\)\] { border-radius: var(--hx-radius); } .rounded-box { border-radius: var(--radius-box); border-radius: var(--radius-box); } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: var(--radius-lg); } .rounded-md { border-radius: var(--radius-md); } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: var(--radius-sm); } .rounded-t-\[var\(--hx-radius\)\] { border-top-left-radius: var(--hx-radius); border-top-right-radius: var(--hx-radius); } .rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; } .rounded-l-\[var\(--hx-radius\)\] { border-top-left-radius: var(--hx-radius); border-bottom-left-radius: var(--hx-radius); } .rounded-r-\[var\(--hx-radius\)\] { border-top-right-radius: var(--hx-radius); border-bottom-right-radius: var(--hx-radius); } .rounded-b-\[var\(--hx-radius\)\] { border-bottom-right-radius: var(--hx-radius); border-bottom-left-radius: var(--hx-radius); } .rounded-b-lg { border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0; } .border-2 { border-style: var(--tw-border-style); border-width: 2px; } .border-4 { border-style: var(--tw-border-style); border-width: 4px; } .border-s-3 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 3px; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-t-0 { border-top-style: var(--tw-border-style); border-top-width: 0; } .border-t-2 { border-top-style: var(--tw-border-style); border-top-width: 2px; } .border-t-3 { border-top-style: var(--tw-border-style); border-top-width: 3px; } .border-t-4 { border-top-style: var(--tw-border-style); border-top-width: 4px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-r-2 { border-right-style: var(--tw-border-style); border-right-width: 2px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; } .border-b-2 { border-bottom-style: var(--tw-border-style); border-bottom-width: 2px; } .border-l { border-left-style: var(--tw-border-style); border-left-width: 1px; } .border-l-2 { border-left-style: var(--tw-border-style); border-left-width: 2px; } .border-l-3 { border-left-style: var(--tw-border-style); border-left-width: 3px; } .border-dotted { --tw-border-style: dotted; border-style: dotted; } .badge-soft { @layer daisyui.modifier { color: var(--badge-color, var(--color-base-content)); background-color: var(--badge-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 8%, var(--color-base-100)); } border-color: var(--badge-color, var(--color-base-content)); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--badge-color, var(--color-base-content)) 10%, var(--color-base-100)); } background-image: none; } } .border-\[color\:color-mix\(in_oklch\,var\(--hx-color-fg-danger\)_35\%\,transparent\)\] { border-color: var(--hx-color-fg-danger); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklch,var(--hx-color-fg-danger) 35%,transparent); } } .border-\[var\(--hx-color-b\)\] { border-color: var(--hx-color-b); } .border-base-200 { border-color: var(--color-base-200); } .border-base-300 { border-color: var(--color-base-300); } .border-base-content\/10 { border-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } } .border-gray-200 { border-color: var(--color-gray-200); } .border-gray-300 { border-color: var(--color-gray-300); } .border-primary-200 { border-color: var(--color-primary-200); } .border-primary-600 { border-color: var(--color-primary-600); } .border-red-200 { border-color: var(--color-red-200); } .border-white { border-color: var(--color-white); } .border-t-transparent { border-top-color: #0000; } .border-r-neutral-600 { border-right-color: var(--color-neutral-600); } .border-b-base-300 { border-bottom-color: var(--color-base-300); } .border-b-gray-200 { border-bottom-color: var(--color-gray-200); } .border-b-gray-700 { border-bottom-color: var(--color-gray-700); } .border-b-primary-600 { border-bottom-color: var(--color-primary-600); } .border-l-primary-600 { border-left-color: var(--color-primary-600); } .glass { backdrop-filter: blur(var(--glass-blur, 40px)); background-color: #0000; background-image: linear-gradient(135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0 / 0) 100%), linear-gradient(var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0 / 0) 25%); box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0 / .05); text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%)); border: none; } .black-outline { border: 1px solid var(--hx-base-fg); background-color: #0000; @supports (color: color-mix(in lab, red, red)) { border: 1px solid color-mix(in lab, var(--hx-base-fg), transparent 70%); } } .\!bg-transparent { background-color: #0000 !important; } .bg-\[\#F2F3F7\] { background-color: #f2f3f7; } .bg-\[\#F2F3F7\]\/60 { background-color: oklab(96.4526% .000470459 -.00541568 / .6); } .bg-\[color-mix\(in_oklch\,currentColor_25\%\,transparent\)\] { background-color: currentColor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,currentColor 25%,transparent); } } .bg-\[gray\] { background-color: gray; } .bg-\[var\(--color-layer\)\] { background-color: var(--color-layer); } .bg-\[var\(--hx-base-bg\)\] { background-color: var(--hx-base-bg); } .bg-\[var\(--hx-color-bg\)\] { background-color: var(--hx-color-bg); } .bg-\[var\(--hx-color-bg\,theme\(colors\.neutral\.200\)\)\] { background-color: var(--hx-color-bg, oklch(92.2% 0 0)); } .bg-\[var\(--hx-color-bg\,transparent\)\] { background-color: var(--hx-color-bg, transparent); } .bg-\[var\(--hx-color-bg-active\)\] { background-color: var(--hx-color-bg-active); } .bg-\[var\(--hx-color-fg\,theme\(colors\.neutral\.900\)\)\] { background-color: var(--hx-color-fg, oklch(20.5% 0 0)); } .bg-accent { background-color: var(--color-accent); } .bg-base-100 { background-color: var(--color-base-100); } .bg-base-200\/80 { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 80%, transparent); } } .bg-black\/35 { background-color: #00000059; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 35%, transparent); } } .bg-black\/50 { background-color: #00000080; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-gray-100 { background-color: var(--color-gray-100); } .bg-gray-800 { background-color: var(--color-gray-800); } .bg-gray-900 { background-color: var(--color-gray-900); } .bg-green-800 { background-color: var(--color-green-800); } .bg-neutral { background-color: var(--color-neutral); } .bg-neutral-600 { background-color: var(--color-neutral-600); } .bg-neutral-content { background-color: var(--color-neutral-content); } .bg-primary { background-color: var(--color-primary); } .bg-primary-200 { background-color: var(--color-primary-200); } .bg-primary-300 { background-color: var(--color-primary-300); } .bg-primary-600 { background-color: var(--color-primary-600); } .bg-primary-700 { background-color: var(--color-primary-700); } .bg-red-50 { background-color: var(--color-red-50); } .bg-red-200 { background-color: var(--color-red-200); } .bg-red-300 { background-color: var(--color-red-300); } .bg-secondary { background-color: var(--color-secondary); } .bg-transparent { background-color: #0000; } .bg-white { background-color: var(--color-white); } .bg-white\/60 { background-color: #fff9; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-white) 60%, transparent); } } .bg-gradient-to-t { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-base-100 { --tw-gradient-from: var(--color-base-100); --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .\[mask-image\:linear-gradient\(90deg\,transparent_0\,black_var\(--hx-mask-left\)\,black_calc\(100\%-var\(--hx-mask-right\)\)\,transparent_100\%\)\] { mask-image: linear-gradient(90deg,transparent 0,black var(--hx-mask-left),black calc(100% - var(--hx-mask-right)),transparent 100%); } .loading-ball { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='12' cy='5' rx='4' ry='4'%3E%3Canimate attributeName='cy' values='5;20;20.5;20;5' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3Canimate attributeName='rx' values='4;4;4.8;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='ry' values='4;4;3;4;4' keyTimes='0;0.469;0.5;0.531;1' dur='.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E"); } } .loading-bars { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='9' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.65s'/%3E%3C/rect%3E%3Crect x='17' y='1' width='6' height='22'%3E%3Canimate attributeName='y' values='1;5;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='height' values='22;14;22' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3Canimate attributeName='opacity' values='1;0.2;1' keyTimes='0;0.938;1' dur='.8s' repeatCount='indefinite' begin='-0.5s'/%3E%3C/rect%3E%3C/svg%3E"); } } .loading-dots { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.1s'/%3E%3C/circle%3E%3Ccircle cx='20' cy='12' r='3'%3E%3Canimate attributeName='cy' values='12;6;12;12' keyTimes='0;0.286;0.571;1' dur='1.05s' repeatCount='indefinite' keySplines='.33,0,.66,.33;.33,.66,.66,1' begin='0.2s'/%3E%3C/circle%3E%3C/svg%3E"); } } .loading-infinity { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering:auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='black' stroke-width='10' stroke-dasharray='205.271 51.318' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.589'/%3E%3C/path%3E%3C/svg%3E"); } } .loading-ring { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='white'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1;20' calcMode='spline' keyTimes='0;1' keySplines='0.165,0.84,0.44,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1;0' calcMode='spline' keyTimes='0;1' keySplines='0.3,0.61,0.355,1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } } .loading-spinner { @layer daisyui.modifier { mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); } } .\[mask-mode\:alpha\] { mask-mode: alpha; } .\[mask-size\:100\%_100\%\] { mask-size: 100% 100%; } .\[mask-repeat\:no-repeat\] { mask-repeat: no-repeat; } .mask-repeat { mask-repeat: repeat; } .fill-none { fill: none; } .object-cover { object-fit: cover; } .object-\[50\%_20\%\] { object-position: 50% 20%; } .p-0 { padding: calc(var(--spacing) * 0); } .p-2 { padding: calc(var(--spacing) * 2); } .p-3 { padding: calc(var(--spacing) * 3); } .p-4 { padding: calc(var(--spacing) * 4); } .p-\[1\.5rem\] { padding: 1.5rem; } .p-\[1em\] { padding: 1em; } .p-\[2px\] { padding: 2px; } .p-\[var\(--gap\)\] { padding: var(--gap); } .p-\[var\(--spacing-inner\)\] { padding: var(--spacing-inner); } .table-xs { @layer daisyui.modifier { & :not(thead, tfoot) tr { font-size: .6875rem; } & :where(th, td) { padding-block: .25rem; padding-inline: .5rem; } } } .px-0 { padding-inline: calc(var(--spacing) * 0); } .px-2 { padding-inline: calc(var(--spacing) * 2); } .px-2\.5 { padding-inline: calc(var(--spacing) * 2.5); } .px-3 { padding-inline: calc(var(--spacing) * 3); } .px-5 { padding-inline: calc(var(--spacing) * 5); } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-\[0\.5em\] { padding-inline: .5em; } .px-\[0\.45em\] { padding-inline: .45em; } .px-\[0\.75em\] { padding-inline: .75em; } .px-\[var\(--hx-spacing-m\)\] { padding-inline: var(--hx-spacing-m); } .px-\[var\(--hx-spacing-p-x\)\] { padding-inline: var(--hx-spacing-p-x); } .py-0\.5 { padding-block: calc(var(--spacing) * .5); } .py-1 { padding-block: calc(var(--spacing) * 1); } .py-2 { padding-block: calc(var(--spacing) * 2); } .py-3 { padding-block: calc(var(--spacing) * 3); } .py-4 { padding-block: calc(var(--spacing) * 4); } .py-\[0\.5em\] { padding-block: .5em; } .py-\[0\.25em\] { padding-block: .25em; } .ps-0 { padding-inline-start: calc(var(--spacing) * 0); } .ps-3 { padding-inline-start: calc(var(--spacing) * 3); } .ps-\[var\(--spacing-safe-edge-l\)\] { padding-inline-start: var(--spacing-safe-edge-l); } .pt-0 { padding-top: calc(var(--spacing) * 0); } .pt-2 { padding-top: calc(var(--spacing) * 2); } .pt-3 { padding-top: calc(var(--spacing) * 3); } .pt-4 { padding-top: calc(var(--spacing) * 4); } .pt-6 { padding-top: calc(var(--spacing) * 6); } .pt-\[10px\] { padding-top: 10px; } .pt-\[calc\(var\(--thumb-size\)_\+_var\(--thumb-margin\)\)\] { padding-top: calc(var(--thumb-size) + var(--thumb-margin)); } .pt-\[var\(--hx-textarea-pt\)\] { padding-top: var(--hx-textarea-pt); } .pr-16 { padding-right: calc(var(--spacing) * 16); } .pr-\[calc\(var\(--thumb-size\)_\+_var\(--thumb-margin\)\)\] { padding-right: calc(var(--thumb-size) + var(--thumb-margin)); } .pr-\[var\(--hx-spacing-p-x\)\] { padding-right: var(--hx-spacing-p-x); } .pr-\[var\(--spacing-safe-edge-r\)\] { padding-right: var(--spacing-safe-edge-r); } .pb-0 { padding-bottom: calc(var(--spacing) * 0); } .pb-2 { padding-bottom: calc(var(--spacing) * 2); } .pb-\[calc\(var\(--thumb-size\)_\+_var\(--thumb-margin\)\)\] { padding-bottom: calc(var(--thumb-size) + var(--thumb-margin)); } .pb-\[var\(--hx-textarea-pb\)\] { padding-bottom: var(--hx-textarea-pb); } .pl-0 { padding-left: calc(var(--spacing) * 0); } .pl-3 { padding-left: calc(var(--spacing) * 3); } .pl-5 { padding-left: calc(var(--spacing) * 5); } .pl-\[calc\(var\(--thumb-size\)_\+_var\(--thumb-margin\)\)\] { padding-left: calc(var(--thumb-size) + var(--thumb-margin)); } .pl-\[var\(--hx-spacing-p-x\)\] { padding-left: var(--hx-spacing-p-x); } .pl-\[var\(--spacing-safe-edge-l\)\], .pl-safe-edge-l { padding-left: var(--spacing-safe-edge-l); } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .align-middle { vertical-align: middle; } .text-unset { font-size: unset; font-weight: unset; line-height: unset; color: unset; font-size: unset; font-weight: unset; line-height: unset; } .text-body { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); } .text-body-large { font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); } .text-extra-large { font-size: var(--text-extra-large); line-height: var(--tw-leading, var(--text-extra-large--line-height)); font-weight: var(--tw-font-weight, var(--text-extra-large--font-weight)); } .text-h3 { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); } .text-h4 { font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); } .text-h5 { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); } .text-h6 { font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } .text-sm { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-\[0\.8rem\] { font-size: .8rem; } .text-\[0\.9em\] { font-size: .9em; } .text-\[0\.95em\] { font-size: .95em; } .text-\[0\.8125rem\] { font-size: .8125rem; } .text-\[1rem\] { font-size: 1rem; } .text-\[16px\] { font-size: 16px; } .text-\[length\:inherit\] { font-size: inherit; } .leading-7 { --tw-leading: var(--leading-7); line-height: var(--leading-7); } .leading-none { --tw-leading: 1; line-height: 1; } .leading-tight { --tw-leading: var(--leading-tight); line-height: var(--leading-tight); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-normal { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .text-nowrap { text-wrap: nowrap; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .text-\[color-mix\(in_oklch\,var\(--hx-color-fg\)_80\%\,transparent\)\] { color: var(--hx-color-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch,var(--hx-color-fg) 80%,transparent); } } .text-\[color-mix\(in_oklch\,var\(--hx-color-fg\)_90\%\,transparent\)\] { color: var(--hx-color-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch,var(--hx-color-fg) 90%,transparent); } } .text-\[color\:var\(--hx-color-fg\)\], .text-\[var\(--hx-color-fg\)\] { color: var(--hx-color-fg); } .text-accent-content { color: var(--color-accent-content); } .text-base-100 { color: var(--color-base-100); } .text-base-300 { color: var(--color-base-300); } .text-base-content { color: var(--color-base-content); } .text-base-content-low { color: var(--color-base-content-low); } .text-base-content-mid { color: var(--color-base-content-mid); } .text-base-content\/40 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 40%, transparent); } } .text-base-content\/50 { color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklab, var(--color-base-content) 50%, transparent); } } .text-gray-300 { color: var(--color-gray-300); } .text-gray-400 { color: var(--color-gray-400); } .text-gray-600 { color: var(--color-gray-600); } .text-gray-700 { color: var(--color-gray-700); } .text-inherit { color: inherit; } .text-primary { color: var(--color-primary); } .text-primary-600 { color: var(--color-primary-600); } .text-red-700 { color: var(--color-red-700); } .text-white { color: var(--color-white); } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .not-italic { font-style: normal; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, ); } .btn-link { @layer daisyui.modifier { --btn-border: #0000; --btn-bg: #0000; --btn-fg: var(--color-primary); --btn-noise: none; --btn-shadow: ""; outline-color: currentColor; text-decoration-line: underline; &:is(.btn-active, :hover, :active:focus, :focus-visible) { --btn-border: #0000; --btn-bg: #0000; text-decoration-line: underline; } @media (hover: none) { &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { text-decoration-line: none; } } } } .link-hover { @layer daisyui.modifier { text-decoration-line: none; &:hover { @media (hover: hover) { text-decoration-line: underline; } } } } .no-underline { text-decoration-line: none; } .underline { text-decoration-line: underline; } .link { text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px; @supports (color: color-mix(in lab, red, red)) { -webkit-text-decoration-color: color-mix(in hsl, currentColor, transparent 35%); text-decoration-color: color-mix(in hsl, currentColor, transparent 35%); } &:focus, &:hover { text-decoration-color: currentColor; text-decoration-thickness: auto; } } .decoration-1 { text-decoration-thickness: 1px; } .accent-\[color\:var\(--hx-color-fg-active\)\] { accent-color: var(--hx-color-fg-active); } .opacity-25 { opacity: .25; } .opacity-40 { opacity: .4; } .opacity-50 { opacity: .5; } .opacity-70 { opacity: .7; } .opacity-75 { opacity: .75; } .opacity-85 { opacity: .85; } .opacity-\[var\(--hx-opacity-disabled\)\] { opacity: var(--hx-opacity-disabled); } .mix-blend-soft-light { mix-blend-mode: soft-light; } .shadow { --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-1 { --tw-shadow: 0px 1px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.04 * var(--elevation-intensity)))), 0px 1px 1px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 2px 1px -1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2 { --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 1px 1px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 2px 1px -1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-3 { --tw-shadow: 0px 3px 1px -2px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))), 0px 2px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 1px 5px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-\[0_1px_1px_0_rgba\(0\,0\,0\,0\.2\)\] { --tw-shadow: 0 1px 1px 0 var(--tw-shadow-color, #0003); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-none { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring-0 { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .outline { outline-style: var(--tw-outline-style); outline-width: 1px; } .outline-0 { outline-style: var(--tw-outline-style); outline-width: 0; } .btn-ghost { @layer daisyui.modifier { &:not(.btn-active, :hover, :active:focus, :focus-visible) { --btn-shadow: ""; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; &:not(:disabled, [disabled], .btn-disabled) { --btn-fg: currentColor; outline-color: currentColor; } } @media (hover: none) { &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled) { --btn-shadow: ""; --btn-bg: #0000; --btn-border: #0000; --btn-noise: none; --btn-fg: currentColor; } } } } .outline-\[color\:var\(--hx-color-focus\)\] { outline-color: var(--hx-color-focus); } .brightness-50 { --tw-brightness: brightness(50%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .filter { filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } .backdrop-blur-\[2px\] { --tw-backdrop-blur: blur(2px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-lg { --tw-backdrop-blur: blur(var(--blur-lg)); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[box-shadow\,outline-color\,background-color\,border-color\] { transition-property: box-shadow, outline-color, background-color, border-color; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[max-height\] { transition-property: max-height; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .\!duration-300 { --tw-duration: .3s !important; transition-duration: .3s !important; } .duration-200 { --tw-duration: .2s; transition-duration: .2s; } .duration-500 { --tw-duration: .5s; transition-duration: .5s; } .duration-\[400ms\] { --tw-duration: .4s; transition-duration: .4s; } .ease-in-out { --tw-ease: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } .ease-out { --tw-ease: var(--ease-out); transition-timing-function: var(--ease-out); } .will-change-transform { will-change: transform; } .btn-outline { @layer daisyui.modifier { &:not(.btn-active, :hover, :active:focus, :focus-visible, :disabled, [disabled], .btn-disabled, :checked) { --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; } @media (hover: none) { &:hover:not(.btn-active, :active, :focus-visible, :disabled, [disabled], .btn-disabled, :checked) { --btn-shadow: ""; --btn-bg: #0000; --btn-fg: var(--btn-color); --btn-border: var(--btn-color); --btn-noise: none; } } } } .btn-lg { @layer daisyui.modifier { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12); } } .btn-sm { @layer daisyui.modifier { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8); } } .btn-xs { @layer daisyui.modifier { --fontsize: .6875rem; --btn-p: .5rem; --size: calc(var(--size-field, .25rem) * 6); } } .btn-error { @layer daisyui.modifier.color { --btn-color: var(--color-error); --btn-fg: var(--color-error-content); } } .btn-neutral { @layer daisyui.modifier.color { --btn-color: var(--color-neutral); --btn-fg: var(--color-neutral-content); } } .btn-primary { @layer daisyui.modifier.color { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); } } .btn-secondary { @layer daisyui.modifier.color { --btn-color: var(--color-secondary); --btn-fg: var(--color-secondary-content); } } .btn-success { @layer daisyui.modifier.color { --btn-color: var(--color-success); --btn-fg: var(--color-success-content); } } .btn-warning { @layer daisyui.modifier.color { --btn-color: var(--color-warning); --btn-fg: var(--color-warning-content); } } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .\[--gap\:10px\] { --gap: 10px; } .\[--hx-carousel-item-max-width\:350px\] { --hx-carousel-item-max-width: 350px; } .\[--hx-carousel-item-min-width\:250px\] { --hx-carousel-item-min-width: 250px; } .\[--hx-color-bg-hover\:color-mix\(in_oklch\,var\(--hx-base-fg\)_80\%\,transparent\)\] { --hx-color-bg-hover: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg-hover: color-mix(in oklch,var(--hx-base-fg) 80%,transparent); } } .\[--hx-color-bg\:color-mix\(in_oklch\,var\(--hx-base-fg\)_20\%\,transparent\)\] { --hx-color-bg: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in oklch,var(--hx-base-fg) 20%,transparent); } } .\[--hx-color-bg\:color-mix\(in_oklch\,var\(--hx-base-fg\)_35\%\,transparent\)\] { --hx-color-bg: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in oklch,var(--hx-base-fg) 35%,transparent); } } .\[--hx-color-bg\:color-mix\(in_oklch\,var\(--hx-base-fg\,_\#0a0a0a\)_5\%\,transparent\)\] { --hx-color-bg: var(--hx-base-fg, #0a0a0a); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in oklch,var(--hx-base-fg, #0a0a0a) 5%,transparent); } } .\[--hx-color-bg\:transparent\] { --hx-color-bg: transparent; } .\[--hx-color-fg\:color-mix\(in_oklch\,var\(--hx-base-fg\,_\#0a0a0a\)_92\%\,transparent\)\] { --hx-color-fg: var(--hx-base-fg, #0a0a0a); @supports (color: color-mix(in lab, red, red)) { --hx-color-fg: color-mix(in oklch,var(--hx-base-fg, #0a0a0a) 92%,transparent); } } .\[--hx-color-fg\:var\(--hx-base-bg\)\] { --hx-color-fg: var(--hx-base-bg); } .\[--hx-color-fg\:var\(--hx-base-fg\)\] { --hx-color-fg: var(--hx-base-fg); } .\[--hx-size\:0\.2em\] { --hx-size: .2em; } .\[--hx-size\:1\.05em\] { --hx-size: 1.05em; } .\[--hx-spacing-gap\:0\.25em\] { --hx-spacing-gap: .25em; } .\[--hx-spacing-m\:0\.5em\] { --hx-spacing-m: .5em; } .\[--hx-spacing-m\:1em\] { --hx-spacing-m: 1em; } .\[--hx-textarea-pb\:0\.875rem\] { --hx-textarea-pb: .875rem; } .\[--hx-textarea-pt\:0\.65rem\] { --hx-textarea-pt: .65rem; } .\[--item-min-width\:100px\] { --item-min-width: 100px; } .\[--separator-color\:color-mix\(in_oklch\,currentColor\,transparent_75\%\)\] { --separator-color: currentColor; @supports (color: color-mix(in lab, red, red)) { --separator-color: color-mix(in oklch,currentColor,transparent 75%); } } .\[--separator-offset\:10px\] { --separator-offset: 10px; } .\[--separator-size\:1px\] { --separator-size: 1px; } .\[--thumb-margin\:1px\] { --thumb-margin: 1px; } .\[--thumb-size\:80px\] { --thumb-size: 80px; } .\[-webkit-mask-image\:linear-gradient\(90deg\,transparent_0\,black_var\(--hx-mask-left\)\,black_calc\(100\%-var\(--hx-mask-right\)\)\,transparent_100\%\)\] { -webkit-mask-image: linear-gradient(90deg,transparent 0,black var(--hx-mask-left),black calc(100% - var(--hx-mask-right)),transparent 100%); } .\[-webkit-mask-mode\:alpha\] { -webkit-mask-mode: alpha; } .\[-webkit-mask-repeat\:no-repeat\] { -webkit-mask-repeat: no-repeat; } .\[-webkit-mask-size\:100\%_100\%\] { -webkit-mask-size: 100% 100%; } .\[grid-area\:header\] { grid-area: header; } .\[grid-area\:main\] { grid-area: main; } .\[grid-template-areas\:\'header\'_\'main\'\] { grid-template-areas: "header" "main"; } .\[grid-template-areas\:\'header_main\'\] { grid-template-areas: "header main"; } .\[grid-template-areas\:\'main_header\'\] { grid-template-areas: "main header"; } .unset { all: unset; } .group-\[\&\]\/gallery\:h-auto { &:is(:where(.group\/gallery) *) { height: auto; } } .group-\[\&\]\/gallery\:max-h-full { &:is(:where(.group\/gallery) *) { max-height: 100%; } } .group-\[\&\]\/gallery\:w-auto { &:is(:where(.group\/gallery) *) { width: auto; } } .group-\[\&\]\/gallery\:max-w-full { &:is(:where(.group\/gallery) *) { max-width: 100%; } } .group-\[\.flex\]\/grid\:min-w-\[min\(100\%\,var\(--item-min-width\)\)\] { &:is(:where(.group\/grid).flex *) { min-width: min(100%, var(--item-min-width)); } } .group-\[\.has-separator\]\/grid\:border-s-\[length\:var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { border-inline-start-style: var(--tw-border-style); border-inline-start-width: var(--separator-size, 1px); } } .group-\[\.has-separator\]\/grid\:border-t-\[length\:var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { border-top-style: var(--tw-border-style); border-top-width: var(--separator-size, 1px); } } .group-\[\.has-separator\]\/grid\:border-transparent { &:is(:where(.group\/grid).has-separator *) { border-color: #0000; } } .group-\[\.vfx-crossfade\]\/carousel\:transition-opacity { &:is(:where(.group\/carousel).vfx-crossfade *) { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } .group-\[\[data-at-end-position\]\]\/arrows\:\!pointer-events-none { &:is(:where(.group\/arrows)[data-at-end-position] *) { pointer-events: none !important; } } .group-\[\[data-at-end-position\]\]\/arrows\:\!opacity-0 { &:is(:where(.group\/arrows)[data-at-end-position] *) { opacity: 0 !important; } } .group-\[\[data-at-end-position\]\]\/arrows\:\!opacity-20 { &:is(:where(.group\/arrows)[data-at-end-position] *) { opacity: .2 !important; } } .group-\[\[data-at-end-position\]\]\/carousel\:\!pointer-events-none { &:is(:where(.group\/carousel)[data-at-end-position] *) { pointer-events: none !important; } } .group-\[\[data-at-end-position\]\]\/carousel\:\!opacity-0 { &:is(:where(.group\/carousel)[data-at-end-position] *) { opacity: 0 !important; } } .group-\[\[data-at-end-position\]\]\/carousel\:\[--hx-mask-right\:0px\] { &:is(:where(.group\/carousel)[data-at-end-position] *) { --hx-mask-right: 0px; } } .group-\[\[data-at-start-position\]\]\/arrows\:\!pointer-events-none { &:is(:where(.group\/arrows)[data-at-start-position] *) { pointer-events: none !important; } } .group-\[\[data-at-start-position\]\]\/arrows\:\!opacity-0 { &:is(:where(.group\/arrows)[data-at-start-position] *) { opacity: 0 !important; } } .group-\[\[data-at-start-position\]\]\/arrows\:\!opacity-20 { &:is(:where(.group\/arrows)[data-at-start-position] *) { opacity: .2 !important; } } .group-\[\[data-at-start-position\]\]\/carousel\:\!pointer-events-none { &:is(:where(.group\/carousel)[data-at-start-position] *) { pointer-events: none !important; } } .group-\[\[data-at-start-position\]\]\/carousel\:\!opacity-0 { &:is(:where(.group\/carousel)[data-at-start-position] *) { opacity: 0 !important; } } .group-\[\[data-at-start-position\]\]\/carousel\:\[--hx-mask-left\:0px\] { &:is(:where(.group\/carousel)[data-at-start-position] *) { --hx-mask-left: 0px; } } .group-\[\[data-init\]\]\:\!overflow-x-visible { &:is(:where(.group)[data-init] *) { overflow-x: visible !important; } } .group-\[\[data-no-overflow\]\]\/carousel\:\[--hx-mask-left\:0px\] { &:is(:where(.group\/carousel)[data-no-overflow] *) { --hx-mask-left: 0px; } } .group-\[\[data-no-overflow\]\]\/carousel\:\[--hx-mask-right\:0px\] { &:is(:where(.group\/carousel)[data-no-overflow] *) { --hx-mask-right: 0px; } } .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:\!opacity-0 { &:is(:where(.group\/carousel):not([data-init]) *) { opacity: 0 !important; } } .group-\[\&\[data-aspect-ratio\=\'false\'\]\]\/carousel\:mx-auto { &:is(:where(.group\/carousel)[data-aspect-ratio="false"] *) { margin-inline: auto; } } .group-\[\&\[data-aspect-ratio\=\'false\'\]\]\/carousel\:max-h-full { &:is(:where(.group\/carousel)[data-aspect-ratio="false"] *) { max-height: 100%; } } .group-\[\&\[data-aspect-ratio\=\'false\'\]\]\/carousel\:w-full { &:is(:where(.group\/carousel)[data-aspect-ratio="false"] *) { width: 100%; } } .group-\[\&\[data-aspect-ratio\=\'false\'\]\]\/carousel\:max-w-full { &:is(:where(.group\/carousel)[data-aspect-ratio="false"] *) { max-width: 100%; } } .peer-checked\:\!hidden { &:is(:where(.peer):checked ~ *) { display: none !important; } } .peer-checked\:hidden { &:is(:where(.peer):checked ~ *) { display: none; } } .peer-checked\:max-h-full { &:is(:where(.peer):checked ~ *) { max-height: 100%; } } .group-\[\:not\(\[data-init\]\)\]\:peer-checked\:\!max-h-none { &:is(:where(.group):not([data-init]) *) { &:is(:where(.peer):checked ~ *) { max-height: none !important; } } } .placeholder\:text-\[color-mix\(in_oklch\,var\(--hx-color-fg\)_55\%\,transparent\)\] { &::placeholder { color: var(--hx-color-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch,var(--hx-color-fg) 55%,transparent); } } } .backdrop\:\!block { &::backdrop { display: block !important; } } .backdrop\:bg-black\/65 { &::backdrop { background-color: #000000a6; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-black) 65%, transparent); } } } .backdrop\:backdrop-blur-lg { &::backdrop { --tw-backdrop-blur: blur(var(--blur-lg)); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } } .before\:absolute { &:before { content: var(--tw-content); position: absolute; } } .before\:inset-0 { &:before { content: var(--tw-content); inset: calc(var(--spacing) * 0); } } .before\:z-10 { &:before { content: var(--tw-content); z-index: 10; } } .before\:rounded-\[inherit\] { &:before { content: var(--tw-content); border-radius: inherit; } } .before\:ring-0 { &:before { content: var(--tw-content); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .before\:ring-\[color\:var\(--hx-color-b-active\)\] { &:before { content: var(--tw-content); --tw-ring-color: var(--hx-color-b-active); } } .before\:ring-inset { &:before { content: var(--tw-content); --tw-ring-inset: inset; } } .group-\[\.has-separator\]\/grid\:before\:absolute { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); position: absolute; } } } .group-\[\.has-separator\]\/grid\:before\:top-\[var\(--separator-offset\)\] { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); top: var(--separator-offset); } } } .group-\[\.has-separator\]\/grid\:before\:bottom-\[var\(--separator-offset\)\] { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); bottom: var(--separator-offset); } } } .group-\[\.has-separator\]\/grid\:before\:-left-\[var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); left: calc(var(--separator-size, 1px) * -1); } } } .group-\[\.has-separator\]\/grid\:before\:w-\[var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); width: var(--separator-size, 1px); } } } .group-\[\.has-separator\]\/grid\:before\:bg-\[var\(--separator-color\)\] { &:is(:where(.group\/grid).has-separator *) { &:before { content: var(--tw-content); background-color: var(--separator-color); } } } .group-\[\.has-separator\]\/grid\:before\:content-\[\'\'\] { &:is(:where(.group\/grid).has-separator *) { &:before { --tw-content: ""; content: var(--tw-content); } } } .group-\[\.has-separator\]\/grid\:after\:absolute { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); position: absolute; } } } .group-\[\.has-separator\]\/grid\:after\:-top-\[var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); top: calc(var(--separator-size, 1px) * -1); } } } .group-\[\.has-separator\]\/grid\:after\:right-\[var\(--separator-offset\)\] { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); right: var(--separator-offset); } } } .group-\[\.has-separator\]\/grid\:after\:left-\[var\(--separator-offset\)\] { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); left: var(--separator-offset); } } } .group-\[\.has-separator\]\/grid\:after\:h-\[var\(--separator-size\,1px\)\] { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); height: var(--separator-size, 1px); } } } .group-\[\.has-separator\]\/grid\:after\:bg-\[var\(--separator-color\)\] { &:is(:where(.group\/grid).has-separator *) { &:after { content: var(--tw-content); background-color: var(--separator-color); } } } .group-\[\.has-separator\]\/grid\:after\:content-\[\'\'\] { &:is(:where(.group\/grid).has-separator *) { &:after { --tw-content: ""; content: var(--tw-content); } } } .first\:pl-0 { &:first-child { padding-left: calc(var(--spacing) * 0); } } .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:first\:\!relative { &:is(:where(.group\/carousel):not([data-init]) *) { &:first-child { position: relative !important; } } } .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:first\:\!inset-auto { &:is(:where(.group\/carousel):not([data-init]) *) { &:first-child { inset: auto !important; } } } .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:first\:z-2 { &:is(:where(.group\/carousel):not([data-init]) *) { &:first-child { z-index: 2; } } } .group-\[\&\:not\(\[data-init\]\)\]\/carousel\:first\:grid { &:is(:where(.group\/carousel):not([data-init]) *) { &:first-child { display: grid; } } } .last\:border-none { &:last-child { --tw-border-style: none; border-style: none; } } .last\:pr-0 { &:last-child { padding-right: calc(var(--spacing) * 0); } } .hover\:bg-\[color-mix\(in_oklch\,currentColor_50\%\,transparent\)\] { &:hover { @media (hover: hover) { background-color: currentColor; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,currentColor 50%,transparent); } } } } .hover\:bg-\[var\(--hx-color-bg-hover\)\] { &:hover { @media (hover: hover) { background-color: var(--hx-color-bg-hover); } } } .hover\:bg-base-200 { &:hover { @media (hover: hover) { background-color: var(--color-base-200); } } } .hover\:bg-base-200\/70 { &:hover { @media (hover: hover) { background-color: var(--color-base-200); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-200) 70%, transparent); } } } } .hover\:bg-black { &:hover { @media (hover: hover) { background-color: var(--color-black); } } } .hover\:bg-gray-200 { &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } } .hover\:bg-gray-800 { &:hover { @media (hover: hover) { background-color: var(--color-gray-800); } } } .hover\:bg-gray-900 { &:hover { @media (hover: hover) { background-color: var(--color-gray-900); } } } .hover\:bg-primary { &:hover { @media (hover: hover) { background-color: var(--color-primary); } } } .hover\:text-base-content { &:hover { @media (hover: hover) { color: var(--color-base-content); } } } .hover\:text-primary-content { &:hover { @media (hover: hover) { color: var(--color-primary-content); } } } .hover\:opacity-100 { &:hover { @media (hover: hover) { opacity: 1; } } } .focus\:ring-0 { &:focus { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } .focus\:outline-0 { &:focus { outline-style: var(--tw-outline-style); outline-width: 0; } } .focus-visible\:outline { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; } } .focus-visible\:outline-0 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 0; } } .focus-visible\:outline-2 { &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 2px; } } .focus-visible\:outline-offset-1 { &:focus-visible { outline-offset: 1px; } } .focus-visible\:outline-offset-2 { &:focus-visible { outline-offset: 2px; } } .focus-visible\:outline-\[var\(--hx-color-f\)\] { &:focus-visible { outline-color: var(--hx-color-f); } } .group-\[\[data-at-end-position\]\]\/arrows\:focus-visible\:\!pointer-events-auto { &:is(:where(.group\/arrows)[data-at-end-position] *) { &:focus-visible { pointer-events: auto !important; } } } .group-\[\[data-at-end-position\]\]\/arrows\:focus-visible\:\!opacity-100 { &:is(:where(.group\/arrows)[data-at-end-position] *) { &:focus-visible { opacity: 1 !important; } } } .group-\[\[data-at-start-position\]\]\/arrows\:focus-visible\:\!pointer-events-auto { &:is(:where(.group\/arrows)[data-at-start-position] *) { &:focus-visible { pointer-events: auto !important; } } } .group-\[\[data-at-start-position\]\]\/arrows\:focus-visible\:\!opacity-100 { &:is(:where(.group\/arrows)[data-at-start-position] *) { &:focus-visible { opacity: 1 !important; } } } .aria-hidden\:hidden { &[aria-hidden="true"] { display: none; } } .aria-selected\:bg-\[var\(--hx-color-bg-active\)\] { &[aria-selected="true"] { background-color: var(--hx-color-bg-active); } } .aria-selected\:text-\[var\(--hx-color-fg-active\)\] { &[aria-selected="true"] { color: var(--hx-color-fg-active); } } .aria-\[current\=page\]\:text-\[var\(--hx-color-fg-active\)\] { &[aria-current="page"] { color: var(--hx-color-fg-active); } } .aria-\[current\=true\]\:scale-110 { &[aria-current="true"] { --tw-scale-x: 110%; --tw-scale-y: 110%; --tw-scale-z: 110%; scale: var(--tw-scale-x) var(--tw-scale-y); } } .aria-\[current\=true\]\:\!bg-\[var\(--hx-color-fg-active\)\] { &[aria-current="true"] { background-color: var(--hx-color-fg-active) !important; } } .aria-\[selected\=true\]\:bg-\[var\(--hx-color-bg-active\)\] { &[aria-selected="true"] { background-color: var(--hx-color-bg-active); } } .aria-\[selected\=true\]\:text-\[var\(--hx-color-fg-active\)\] { &[aria-selected="true"] { color: var(--hx-color-fg-active); } } .aria-\[selected\=true\]\:hover\:bg-\[var\(--hx-color-bg-active\)\] { &[aria-selected="true"] { &:hover { @media (hover: hover) { background-color: var(--hx-color-bg-active); } } } } .aria-\[selected\=true\]\:hover\:text-\[var\(--hx-color-fg-active\)\] { &[aria-selected="true"] { &:hover { @media (hover: hover) { color: var(--hx-color-fg-active); } } } } .data-\[active\]\:\!relative { &[data-active] { position: relative !important; } } .data-\[active\]\:\!inset-auto { &[data-active] { inset: auto !important; } } .data-\[active\]\:z-1 { &[data-active] { z-index: 1; } } .data-\[active\]\:z-4 { &[data-active] { z-index: 4; } } .data-\[active\]\:\!grid { &[data-active] { display: grid !important; } } .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!opacity-100 { &:is(:where(.group\/carousel).vfx-crossfade *) { &[data-active] { opacity: 1 !important; } } } .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!delay-0 { &:is(:where(.group\/carousel).vfx-crossfade *) { &[data-active] { transition-delay: 0s !important; } } } .group-\[\.vfx-crossfade\]\/carousel\:data-\[active\]\:\!ease-out { &:is(:where(.group\/carousel).vfx-crossfade *) { &[data-active] { --tw-ease: var(--ease-out) !important; transition-timing-function: var(--ease-out) !important; } } } .data-\[active\]\:before\:ring-4 { &[data-active] { &:before { content: var(--tw-content); --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .data-\[preload\]\:z-3 { &[data-preload] { z-index: 3; } } .data-\[preload\]\:\!grid { &[data-preload] { display: grid !important; } } .group-\[\.vfx-crossfade\]\/carousel\:data-\[preload\]\:opacity-0 { &:is(:where(.group\/carousel).vfx-crossfade *) { &[data-preload] { opacity: 0; } } } .group-\[\.vfx-crossfade\]\/carousel\:data-\[preload\]\:delay-100 { &:is(:where(.group\/carousel).vfx-crossfade *) { &[data-preload] { transition-delay: .1s; } } } .motion-reduce\:\!transition-none { @media (prefers-reduced-motion: reduce) { transition-property: none !important; } } .motion-reduce\:transition-none { @media (prefers-reduced-motion: reduce) { transition-property: none; } } .max-lg\:btn { @media (width < 1024px) { :where(&) { @layer daisyui.component { width: unset; } } .prose & { text-decoration-line: none; } @layer daisyui.component { cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; -webkit-user-select: none; user-select: none; padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: var(--btn-fg); height: var(--size); font-size: var(--fontsize, .875rem); outline-color: var(--btn-color, var(--color-base-content)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); touch-action: manipulation; box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-p: 1rem; --btn-border: var(--btn-bg); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; font-weight: 600; transition-property: color, background-color, border-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid; } &:active:not(.btn-active) { --btn-bg: var(--btn-color, var(--color-base-200)); translate: 0 .5px; @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); } --btn-border: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0); } &:is(input[type="checkbox"], input[type="radio"]) { appearance: none; &:after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .max-lg\:btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } } &:disabled { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } &[disabled] { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } } } .max-lg\:input-lg { @media (width < 1024px) { @layer daisyui.modifier { --size: calc(var(--size-field, .25rem) * 12); font-size: max(var(--font-size, 1.125rem), 1.125rem); &[type="number"] { &::-webkit-inner-spin-button { margin-block: -.75rem; margin-inline-end: -.75rem; } } } } } .max-lg\:mb-8 { @media (width < 1024px) { margin-bottom: calc(var(--spacing) * 8); } } .max-lg\:modal-bottom { @media (width < 1024px) { @layer daisyui.modifier { place-items: end; & .modal-box { --modal-tl: var(--radius-box); --modal-tr: var(--radius-box); --modal-bl: 0; --modal-br: 0; width: 100%; max-width: none; height: auto; max-height: calc(100vh - 5em); translate: 0 100%; scale: 1; } } } } .max-lg\:\!max-w-full { @media (width < 1024px) { max-width: 100% !important; } } .max-lg\:\!rounded-t-\[var\(--hx-radius\)\] { @media (width < 1024px) { border-top-left-radius: var(--hx-radius) !important; border-top-right-radius: var(--hx-radius) !important; } } .max-lg\:\!rounded-b-none { @media (width < 1024px) { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } } .max-lg\:\!bg-white { @media (width < 1024px) { background-color: var(--color-white) !important; } } .max-lg\:btn-lg { @media (width < 1024px) { @layer daisyui.modifier { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12); } } } .max-md\:max-h-\[60vh\] { @media (width < 768px) { max-height: 60vh; } } .max-md\:btn-sm { @media (width < 768px) { @layer daisyui.modifier { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8); } } } .sm\:col-span-1 { @media (width >= 480px) { grid-column: span 1 / span 1; } } .sm\:col-span-2 { @media (width >= 480px) { grid-column: span 2 / span 2; } } .sm\:col-span-3 { @media (width >= 480px) { grid-column: span 3 / span 3; } } .sm\:col-span-4 { @media (width >= 480px) { grid-column: span 4 / span 4; } } .sm\:col-span-5 { @media (width >= 480px) { grid-column: span 5 / span 5; } } .sm\:col-span-6 { @media (width >= 480px) { grid-column: span 6 / span 6; } } .sm\:col-span-7 { @media (width >= 480px) { grid-column: span 7 / span 7; } } .sm\:col-span-8 { @media (width >= 480px) { grid-column: span 8 / span 8; } } .sm\:col-span-9 { @media (width >= 480px) { grid-column: span 9 / span 9; } } .sm\:col-span-10 { @media (width >= 480px) { grid-column: span 10 / span 10; } } .sm\:col-span-11 { @media (width >= 480px) { grid-column: span 11 / span 11; } } .sm\:col-span-12 { @media (width >= 480px) { grid-column: span 12 / span 12; } } .md\:absolute { @media (width >= 768px) { position: absolute; } } .md\:top-1\/2 { @media (width >= 768px) { top: 50%; } } .md\:right-0 { @media (width >= 768px) { right: calc(var(--spacing) * 0); } } .md\:left-0 { @media (width >= 768px) { left: calc(var(--spacing) * 0); } } .md\:col-span-1 { @media (width >= 768px) { grid-column: span 1 / span 1; } } .md\:col-span-2 { @media (width >= 768px) { grid-column: span 2 / span 2; } } .md\:col-span-3 { @media (width >= 768px) { grid-column: span 3 / span 3; } } .md\:col-span-4 { @media (width >= 768px) { grid-column: span 4 / span 4; } } .md\:col-span-5 { @media (width >= 768px) { grid-column: span 5 / span 5; } } .md\:col-span-6 { @media (width >= 768px) { grid-column: span 6 / span 6; } } .md\:col-span-7 { @media (width >= 768px) { grid-column: span 7 / span 7; } } .md\:col-span-8 { @media (width >= 768px) { grid-column: span 8 / span 8; } } .md\:col-span-9 { @media (width >= 768px) { grid-column: span 9 / span 9; } } .md\:col-span-10 { @media (width >= 768px) { grid-column: span 10 / span 10; } } .md\:col-span-11 { @media (width >= 768px) { grid-column: span 11 / span 11; } } .md\:col-span-12 { @media (width >= 768px) { grid-column: span 12 / span 12; } } .md\:mb-2 { @media (width >= 768px) { margin-bottom: calc(var(--spacing) * 2); } } .md\:hidden { @media (width >= 768px) { display: none; } } .md\:-translate-x-\[calc\(100\%\+var\(--hx-spacing-m\)\)\] { @media (width >= 768px) { --tw-translate-x: calc(calc(100% + var(--hx-spacing-m)) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:translate-x-\[calc\(100\%\+var\(--hx-spacing-m\)\)\] { @media (width >= 768px) { --tw-translate-x: calc(100% + var(--hx-spacing-m)); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:-translate-y-1\/2 { @media (width >= 768px) { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } } .md\:px-0 { @media (width >= 768px) { padding-inline: calc(var(--spacing) * 0); } } .md\:unset { @media (width >= 768px) { all: unset; } } .md\:unset { @media (width >= 768px) { all: unset; } } .lg\:col-span-1 { @media (width >= 1024px) { grid-column: span 1 / span 1; } } .lg\:col-span-2 { @media (width >= 1024px) { grid-column: span 2 / span 2; } } .lg\:col-span-3 { @media (width >= 1024px) { grid-column: span 3 / span 3; } } .lg\:col-span-4 { @media (width >= 1024px) { grid-column: span 4 / span 4; } } .lg\:col-span-5 { @media (width >= 1024px) { grid-column: span 5 / span 5; } } .lg\:col-span-6 { @media (width >= 1024px) { grid-column: span 6 / span 6; } } .lg\:col-span-7 { @media (width >= 1024px) { grid-column: span 7 / span 7; } } .lg\:col-span-8 { @media (width >= 1024px) { grid-column: span 8 / span 8; } } .lg\:col-span-9 { @media (width >= 1024px) { grid-column: span 9 / span 9; } } .lg\:col-span-10 { @media (width >= 1024px) { grid-column: span 10 / span 10; } } .lg\:col-span-11 { @media (width >= 1024px) { grid-column: span 11 / span 11; } } .lg\:col-span-12 { @media (width >= 1024px) { grid-column: span 12 / span 12; } } .lg\:mt-10 { @media (width >= 1024px) { margin-top: calc(var(--spacing) * 10); } } .lg\:\!block { @media (width >= 1024px) { display: block !important; } } .lg\:block { @media (width >= 1024px) { display: block; } } .lg\:hidden { @media (width >= 1024px) { display: none; } } .lg\:\!h-full { @media (width >= 1024px) { height: 100% !important; } } .lg\:max-w-\[70\%\] { @media (width >= 1024px) { max-width: 70%; } } .lg\:link { @media (width >= 1024px) { @layer daisyui.component { cursor: pointer; text-decoration-line: underline; &:focus { --tw-outline-style: none; outline-style: none; @media (forced-colors: active) { outline-offset: 2px; outline: 2px solid #0000; } } &:focus-visible { outline-offset: 2px; outline: 2px solid; } } } } .lg\:justify-self-end { @media (width >= 1024px) { justify-self: flex-end; } } .lg\:link { @media (width >= 1024px) { text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px; @supports (color: color-mix(in lab, red, red)) { -webkit-text-decoration-color: color-mix(in hsl, currentColor, transparent 35%); text-decoration-color: color-mix(in hsl, currentColor, transparent 35%); } &:focus, &:hover { text-decoration-color: currentColor; text-decoration-thickness: auto; } } } .lg\:unset { @media (width >= 1024px) { all: unset; } } .lg\:unset { @media (width >= 1024px) { all: unset; } } .xl\:hidden { @media (width >= 1320px) { display: none; } } .xl\:unset { @media (width >= 1320px) { all: unset; } } .xl\:unset { @media (width >= 1320px) { all: unset; } } .\[\&_img\]\:h-full { & img { height: 100%; } } .\[\&_img\]\:w-full { & img { width: 100%; } } .\[\&_img\]\:object-cover { & img { object-fit: cover; } } .\[\&_img\]\:transition-transform { & img { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } .hover\:\[\&_img\]\:scale-105 { &:hover { @media (hover: hover) { & img { --tw-scale-x: 105%; --tw-scale-y: 105%; --tw-scale-z: 105%; scale: var(--tw-scale-x) var(--tw-scale-y); } } } } .\[\&\+li\]\:before\:\!rotate-none { & + li { &:before { content: var(--tw-content); rotate: none !important; } } } .\[\&\:has\(\>img\)\]\:place-items-center { &:has( > img) { place-items: center; } } .\[\&\:not\(\:has\(\[data-hx--carousel-mini-target\=\'slide\'\]\)\)\]\:hidden { &:not(:has([data-hx--carousel-mini-target="slide"])) { display: none; } } .\[\&\:not\(\:has\(\[data-hx--carousel-thumbs-target\=\'thumb\'\]\)\)\]\:hidden { &:not(:has([data-hx--carousel-thumbs-target="thumb"])) { display: none; } } .group-open\:\[\&\>\*\]\:pointer-events-auto { &:is(:where(.group):is([open], :popover-open, :open) *) { & > * { pointer-events: auto; } } } .\[\&\>\.btn\]\:btn-circle { & > .btn { @layer daisyui.modifier { width: var(--size); height: var(--size); border-radius: 3.40282e38px; padding-inline: 0; } } } .\[\&\>\.btn\]\:rounded-t-none { & > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } } .\[\&\>\.btn\]\:rounded-r-none { & > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } } .\[\&\>\.btn\]\:text-white { & > .btn { color: var(--color-white); } } .\[\&\>\.btn\]\:btn-lg { & > .btn { @layer daisyui.modifier { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12); } } } .peer-checked\:\[\&\>\[data-close\]\]\:inline-flex { &:is(:where(.peer):checked ~ *) { & > [data-close] { display: inline-flex; } } } .peer-checked\:\[\&\>\[data-open\]\]\:hidden { &:is(:where(.peer):checked ~ *) { & > [data-open] { display: none; } } } .\[\&\>button\]\:pointer-events-auto { & > button { pointer-events: auto; } } .\[\&\>button\]\:transition-all { & > button { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } } .\[\&\>div\]\:aspect-\[1\/2\] { & > div { aspect-ratio: 1 / 2; } } .\[\&\>div\]\:aspect-\[2\/1\] { & > div { aspect-ratio: 2; } } .\[\&\>div\]\:aspect-\[3\/4\] { & > div { aspect-ratio: 3 / 4; } } .\[\&\>div\]\:aspect-\[4\/3\] { & > div { aspect-ratio: 4 / 3; } } .\[\&\>div\]\:aspect-\[9\/16\] { & > div { aspect-ratio: 9 / 16; } } .\[\&\>div\]\:aspect-\[10\/16\] { & > div { aspect-ratio: 10 / 16; } } .\[\&\>div\]\:aspect-\[16\/9\] { & > div { aspect-ratio: 16 / 9; } } .\[\&\>div\]\:aspect-\[16\/10\] { & > div { aspect-ratio: 16 / 10; } } .\[\&\>div\]\:aspect-square { & > div { aspect-ratio: 1; } } .\[\&\>div\]\:h-full { & > div { height: 100%; } } .\[\&\>div\]\:shrink-0 { & > div { flex-shrink: 0; } } .\[\&\>div\]\:cursor-pointer { & > div { cursor: pointer; } } .\[\&\>div\>img\]\:aspect-\[1\/2\] { & > div > img { aspect-ratio: 1 / 2; } } .\[\&\>div\>img\]\:aspect-\[2\/1\] { & > div > img { aspect-ratio: 2; } } .\[\&\>div\>img\]\:aspect-\[3\/4\] { & > div > img { aspect-ratio: 3 / 4; } } .\[\&\>div\>img\]\:aspect-\[4\/3\] { & > div > img { aspect-ratio: 4 / 3; } } .\[\&\>div\>img\]\:aspect-\[9\/16\] { & > div > img { aspect-ratio: 9 / 16; } } .\[\&\>div\>img\]\:aspect-\[10\/16\] { & > div > img { aspect-ratio: 10 / 16; } } .\[\&\>div\>img\]\:aspect-\[16\/9\] { & > div > img { aspect-ratio: 16 / 9; } } .\[\&\>div\>img\]\:aspect-\[16\/10\] { & > div > img { aspect-ratio: 16 / 10; } } .\[\&\>div\>img\]\:aspect-square { & > div > img { aspect-ratio: 1; } } .\[\&\>div\>img\]\:h-full { & > div > img { height: 100%; } } .\[\&\>h3\]\:-mt-px { & > h3 { margin-top: -1px; } } .\[\&\>h3\]\:mb-1 { & > h3 { margin-bottom: calc(var(--spacing) * 1); } } .\[\&\>h3\]\:text-h4 { & > h3 { font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); } } .\[\&\>h3\]\:font-bold { & > h3 { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } .\[\&\>li\]\:h-full { & > li { height: 100%; } } .\[\&\>li\:first-child\]\:\!flex { & > li:first-child { display: flex !important; } } .\[\&\>li\:last-child\]\:\!flex { & > li:last-child { display: flex !important; } } .\[\&\>li\>a\]\:h-full { & > li > a { height: 100%; } } .\[\&\>li\>details\]\:h-full { & > li > details { height: 100%; } } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, .btn:focus-visible, .link:focus-visible, .select:focus-visible, .input:focus-visible, .textarea:focus-visible { outline: var(--hx-outline-size) solid var(--hx-outline); outline-offset: var(--hx-outline-offset); } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible), [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) { outline: none; } .hx-ds a:focus-visible, .hx-ds button:focus-visible, .hx-ds input:focus-visible, .hx-ds textarea:focus-visible, .hx-ds select:focus-visible, .hx-ds [tabindex]:not([tabindex="-1"]):focus-visible, .hx-ds .btn:focus-visible, .hx-ds .link:focus-visible, .hx-ds .select:focus-visible, .hx-ds .input:focus-visible, .hx-ds .textarea:focus-visible { outline: var(--hx-outline-size) solid var(--hx-outline); outline-offset: var(--hx-outline-offset); } .hx-ds a:focus:not(:focus-visible), .hx-ds button:focus:not(:focus-visible), .hx-ds input:focus:not(:focus-visible), .hx-ds textarea:focus:not(:focus-visible), .hx-ds select:focus:not(:focus-visible), .hx-ds [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) { outline: none; } .collapse { border-color: var(--color-gray-300); background-color: var(--hx-color-bg); color: var(--hx-color-fg); [data-theme-mod="accent"] & { border-color: var(--color-primary-950); background-color: var(--color-primary-700); } [data-theme="dark"] [data-theme-mod="accent"] & { border-color: var(--color-primary-50); background-color: var(--color-primary-200); } [data-theme="black"] [data-theme-mod="accent"] & { border-color: var(--color-primary-50); background-color: var(--color-primary-300); } & > input { appearance: none; opacity: 0; } & .collapse-title { position: relative; & h5 { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); } & .collapse-circle { height: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-gray-300); border-radius: 3.40282e38px; position: absolute; top: 50%; right: 10px; } } & .collapse-title:after { top: 50%; right: calc(var(--spacing) * 6); position: absolute; } & .collapse-subtitle { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); color: var(--color-base-content); font-style: italic; } & .collapse-content { padding-inline: var(--spacing-inner); padding-bottom: calc(var(--spacing) * 0); & .prose p { margin-bottom: calc(var(--spacing) * 0); } & h6 { font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); } & link-list ul li a { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); color: var(--color-base-content); } & .section { margin-block: calc(var(--spacing) * 0); padding: calc(var(--spacing) * 0); &:first-child { margin-top: calc(var(--spacing) * 0); padding-top: calc(var(--spacing) * 0); } &:last-child { margin-bottom: calc(var(--spacing) * 0); padding-bottom: calc(var(--spacing) * 0); } & .section-head-title { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); } } & .prose table { -webkit-overflow-scrolling: touch; width: 80vw; display: block; overflow-x: auto; } @media (width >= 1024px) { & .prose { overflow-x: visible; } & .prose table { width: 100%; display: table; } } } } .collapse.collapse-open { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-primary-600); & .collapse-circle { border-style: var(--tw-border-style); background-color: var(--color-primary-600); border-width: 0; } & .collapse-title:after { color: var(--color-base-100); } } @media (width >= 1024px) { .collapse-content .section-body:has(document-list) { margin-bottom: -1rem; } } single-column:first-child:has(.collapse) { margin-top: var(--spacing-section); } single-column:last-child:has(.collapse) { margin-bottom: var(--spacing-section); } .badge { height: auto; padding-inline: calc(var(--spacing) * 1.5); [data-theme-mod="alternate"] & { background-color: var(--color-gray-300); } [data-theme-mod="accent"] & { border-color: var(--color-primary-700); background-color: var(--color-primary-700); } [data-theme="dark"] [data-theme-mod="accent"] & { border-color: var(--color-primary-200); background-color: var(--color-primary-200); } [data-theme="black"] [data-theme-mod="accent"] & { border-color: var(--color-primary-300); background-color: var(--color-primary-300); } [data-theme="light"] [data-theme-mod="inverted"] & { border-color: var(--color-gray-800); background-color: var(--color-gray-800); } [data-theme="dark"] [data-theme-mod="inverted"] & { border-color: var(--color-gray-100); background-color: var(--color-gray-100); } [data-theme="dark"] [data-theme-mod="alternate"] & { border-color: var(--color-gray-900); background-color: var(--color-gray-900); } [data-theme="black"] [data-theme-mod="alternate"] & { border-color: var(--color-gray-800); background-color: var(--color-gray-800); } &.badge-ellipsis { max-width: calc(var(--spacing) * 42); text-wrap: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; } } .btn-a11y { --btn-fg: var(--color-white); --btn-color: var(--color-blue-700); box-shadow: inset 0 0 0 2px var(--color-blue-700), inset 0 0 0 4px white; } .dropdown { &.-lazy { & .dropdown-content { display: none; } &.dropdown-open, &:not(.dropdown-hover):focus, &:focus-within { & .dropdown-content { display: block; } } } } .fieldset { font-size: unset; } [data-theme="black"] .hx-form, .hx-form[data-theme="black"] { --hx-color-bg: oklch(0% none none / .9); } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form { --hx-contrast-form-control-bg: white; --hx-contrast-form-control-fg: #212121; --hx-contrast-form-control-b: oklch(24.7759% 0 none / .3); } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form :is(.hx-form-field--control, .hx-form-field--affix, .hx-form-field--check, .hx-form-field--radio) { color-scheme: light; --hx-color-bg: var(--hx-contrast-form-control-bg); --hx-color-fg: var(--hx-contrast-form-control-fg); --hx-color-b: var(--hx-contrast-form-control-b); } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--control::placeholder, :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--affix input::placeholder, :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--affix textarea::placeholder { color: var(--hx-contrast-form-control-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch, var(--hx-contrast-form-control-fg) 70%, transparent); } } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--label-floating > .hx-form-field__label { color: var(--hx-contrast-form-control-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch, var(--hx-contrast-form-control-fg) 85%, transparent); } } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--label-floating:has(.peer:focus):not(:has(.peer[aria-invalid="true"])):not(:has(.peer:user-invalid)) > .hx-form-field__label { color: var(--hx-color-focus); } :is(:is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--label-floating:has(.peer[aria-invalid="true"]) > .hx-form-field__label, :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) .hx-form .hx-form-field--label-floating:has(.peer:user-invalid) > .hx-form-field__label) { color: var(--hx-color-fg-danger); } :is([data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"]) .hx-form .btn-primary { --btn-color: var(--hx-contrast-form-control-bg); --btn-fg: var(--hx-contrast-form-control-fg); } .ts-wrapper.select { height: auto; padding: 0; display: flex; & .ts-control { box-shadow: none; background: none; border: 0; padding-right: 1.65rem; } } .thank-you-card.hx-card--fill-solid { --hx-color-bg: var(--color-gray-200); --hx-thank-you-border: var(--color-primary-600); [data-theme="dark"] & { --hx-color-bg: var(--color-gray-800); } [data-theme="black"] & { --hx-color-bg: var(--color-gray-900); } [data-theme="light"] [data-theme-mod="inverted"] & { --hx-color-bg: var(--color-gray-800); --hx-color-fg: white; } [data-theme="dark"] [data-theme-mod="inverted"] & { --hx-color-bg: var(--color-gray-200); --hx-color-fg: black; } [data-theme-mod="alternate"] & { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); } [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-100); --hx-color-fg: var(--color-primary-800); --hx-thank-you-border: var(--color-primary-500); } [data-theme="black"] [data-theme-mod="accent"] & { --hx-color-bg: color-mix(in srgb, oklch(.92 calc(.1 * var(--c)) var(--h)) 80%, black); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in oklch, var(--color-primary-100) 80%, black); } } :is([data-theme-mod="alternate"], [data-theme-mod="accent"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="dark"] [data-theme-mod="inverted"]) & .prose { color: var(--hx-color-fg); --tw-prose-body: var(--hx-color-fg); --tw-prose-headings: var(--hx-color-fg); --tw-prose-lead: var(--hx-color-fg); --tw-prose-links: var(--hx-color-fg); --tw-prose-bold: var(--hx-color-fg); --tw-prose-counters: var(--hx-color-fg); --tw-prose-bullets: var(--hx-color-fg); --tw-prose-quotes: var(--hx-color-fg); } border-top-style: var(--tw-border-style); border-top-width: 4px; border-top-color: var(--hx-thank-you-border); & .card-body { padding-inline: calc(var(--spacing) * 3); padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 8); @media (width >= 1024px) { padding-inline: calc(var(--spacing) * 6); padding-top: calc(var(--spacing) * 6); padding-bottom: calc(var(--spacing) * 11); } } } .navbar { height: 100%; min-height: 44px; padding: calc(var(--spacing) * 0); align-items: stretch; } .menu { font-size: inherit; & a { border-radius: var(--rounded-btn, .5rem); align-items: center; height: 100%; padding-inline: 10px; display: flex; } } .menu-horizontal { gap: calc(var(--spacing) * 2); margin-inline: -10px; & a { --bc: var(--brand-primary-800); align-items: center; height: 100%; padding-inline: 10px; display: flex; } & a.nav-item-active { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--menu-active-color, var(--color-primary-600)); } & > li { & > a { padding-block: calc(var(--spacing) * 0); } & > details { height: 100%; & > summary { align-items: center; gap: calc(var(--spacing) * 0); height: 100%; padding-right: 4px; display: flex; & > a { padding-right: 8px; } & > a.nav-item-active { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--menu-active-color, var(--color-primary-600)); } &:before { top: 50%; right: calc(var(--spacing) * 0); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); --tw-content: ""; content: var(--tw-content); border-radius: 3.40282e38px; width: 1.15rem; height: 1.15rem; margin-right: 1px; position: absolute; } &:after { margin-left: 4px; margin-right: 4px; } } & > ul { margin-top: calc(var(--spacing) * 0) !important; } } } & > li:has(a.nav-item-active) { position: relative; & > :after { content: ""; background-color: var(--menu-active-color, var(--color-primary-600)); height: 2px; position: absolute; bottom: 0; left: 9px; right: 5px; } & summary:after { color: var(--menu-active-color, var(--color-primary-600)); } } & ul.submenu { min-width: 200px; max-width: 100%; padding: calc(var(--spacing) * 2); border-top-left-radius: 0; border-top-right-radius: 0; display: none; @media (width >= 768px) { display: block; } } } .drawer { & ul li { & details summary:after { margin-right: calc(var(--spacing) * 2); width: .6rem; height: .6rem; } & details ul.submenu { width: 100%; max-width: 100%; padding: calc(var(--spacing) * 2); background-color: #0000 !important; } & details > ul.submenu a { overflow-wrap: break-word; white-space: normal; } } } .menu-vertical { width: 100%; padding: calc(var(--spacing) * 0); & li { & details summary:after { margin-right: calc(var(--spacing) * 2); width: .6rem; height: .6rem; } & summary { &:hover, &:focus { background-color: var(--color-gray-200); } [data-theme="dark"] & { &:hover, &:focus { background-color: var(--color-gray-800); } } [data-theme="black"] & { &:hover, &:focus { background-color: var(--color-gray-900); } } } & a { &:hover, &:focus { background-color: var(--color-gray-200); } [data-theme="dark"] & { &:hover, &:focus { background-color: var(--color-gray-800); } } [data-theme="black"] & { &:hover, &:focus { background-color: var(--color-gray-900); } } } } & li:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-gray-300); } } .table, .table th, .table td { font-size: .96rem; line-height: 1.3; } .table.sm, .table.sm th, .table.sm td { font-size: .945rem; line-height: 1.2; } .table.xs, .table.xs th, .table.xs td { font-size: .92rem; line-height: 1.1; } pages-overview { @media (width >= 768px) { & hx-grid li:has(a.card-side img) { grid-column: span 2 / span 2; } } } :root, [data-theme="light"] { --hx-btn-shadow: oklch(0% 0 0 / .05); } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-btn-shadow: oklch(0% 0 0 / .05); } } [data-theme="dark"] { --hx-btn-shadow: oklch(0% 0 0 / .6); } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-btn-shadow: oklch(0% 0 0 / .6); } } .btn { --depth: 0; } .btn:not(.btn-outline, .btn-ghost, .btn-link, .btn-disabled, :disabled) { box-shadow: 0 3px 2px -2px var(--hx-btn-shadow), 0 4px 3px -2px var(--hx-btn-shadow); } @media (hover: hover) { .btn-ghost:hover { background-color: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch, var(--hx-base-fg) 20%, transparent); } border-color: #0000; } } .btn-outline:focus-visible:not(:hover) { --btn-bg: transparent; --btn-fg: var(--btn-color); } .btn:is(.btn-disabled, :disabled):not(.btn-link, .btn-ghost) { background-color: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch, var(--hx-base-fg) 10%, transparent); } } .hx-card { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); --hx-color-fadeout: var(--hx-color-bg); --hx-spacing-p: 1.5rem; width: 100%; color: var(--hx-color-fg); } .hx-card--interactive { cursor: pointer; transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); &:hover { @media (hover: hover) { --tw-translate-y: -1px; translate: var(--tw-translate-x) var(--tw-translate-y); } } &:hover { @media (hover: hover) { --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 1px 1px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 2px 1px -1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } } .hx-card--fill-solid { background-color: var(--hx-color-bg); } .hx-card--media-right { flex-direction: row-reverse; } .hx-card > .card-body { padding: var(--hx-spacing-p); } .hx-card > .hx-card__body--compact { padding: calc(var(--hx-spacing-p) / 2); } .hx-card__media { overflow: hidden; } .hx-card:not(.card-side) .hx-card__media:has( > .hx-fade-out) { min-width: calc(var(--spacing) * 0); display: block; } .hx-card__media > .hx-fade-out, .hx-card__media > .hx-fade-out > .hx-fade-out__content { width: 100%; height: 100%; } .card-side .hx-card__media:has( > .hx-fade-out) { width: 50%; min-width: calc(var(--spacing) * 0); flex-shrink: 1; display: flex; } .card-side .card-body { min-width: calc(var(--spacing) * 0); } .hx-card:not(.card-side):has(.hx-card__media > .hx-fade-out--bottom) > .card-body { z-index: 10; padding-top: calc(var(--spacing) * 0); margin-top: -20px; position: relative; } .card-side:not(.hx-card--media-right):has(.hx-card__media > .hx-fade-out--right) > .card-body { z-index: 10; padding-left: calc(var(--spacing) * 0); margin-left: -20px; position: relative; } .hx-card--media-right:has(.hx-card__media > .hx-fade-out--left) > .card-body { z-index: 10; padding-right: calc(var(--spacing) * 0); margin-right: -20px; position: relative; } .hx-card__media > img, .hx-card__media > a > img, .hx-card__media > .hx-fade-out img { width: 100%; height: 100%; } .hx-card__media--right { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; justify-content: flex-end; } .hx-card__title--link { cursor: pointer; &:hover { @media (hover: hover) { text-decoration-line: underline; } } } @media (width <= 1023px) { .hx-modal[data-hx-modal-bottom-sheet][data-init] { --hx-modal-bottom-sheet-backdrop-opacity: 0; transition: none; } .hx-modal[data-hx-modal-bottom-sheet][data-init]::backdrop { background-color: #0000; transition: none; animation: none; } .hx-modal[data-hx-modal-bottom-sheet][data-init] .modal-box { z-index: 1; max-height: calc(100dvh - 5em); } .hx-modal[data-hx-modal-bottom-sheet][data-init] [data-hx--modal-target="handle"] { z-index: 2; } .hx-modal[data-hx-modal-bottom-sheet][data-init] [data-hx--modal-target="handle"]:before { z-index: 0; pointer-events: none; content: ""; background: linear-gradient(#fff 0%, #ffffffeb 55%, #0000 100%); position: absolute; inset: 0 0 -1.5rem; } .hx-modal[data-hx-modal-bottom-sheet][data-init] [data-hx--modal-target="handle"] > * { z-index: 1; position: relative; } .hx-modal[data-hx-modal-bottom-sheet][data-init] .modal-backdrop { z-index: 0; background-color: rgb(0 0 0 / var(--hx-modal-bottom-sheet-backdrop-opacity)); transition: background-color .2s cubic-bezier(0, 0, .2, 1); } .hx-modal[data-hx-modal-bottom-sheet][data-dragging] .modal-backdrop, .hx-modal[data-hx-modal-bottom-sheet][data-entering] .modal-backdrop { transition-duration: 0s; } } @media (prefers-reduced-motion: reduce) { .hx-modal[data-hx-modal-bottom-sheet][data-init] .modal-box, .hx-modal[data-hx-modal-bottom-sheet][data-init] .modal-backdrop { transition-duration: 0s; } } hx-carousel { --hx-size-height: auto; width: 100%; display: block; } hx-carousel:not(:has([data-hx--carousel-target="slide"])) { display: none; } .hx-carousel { --hx-carousel-fade-size: clamp(30px, calc(var(--peek-size) * 1.5), 120px); --hx-mask-left: var(--hx-carousel-fade-size); --hx-mask-right: var(--hx-carousel-fade-size); margin-block-end: calc(-1 * var(--hx-scrollbar-width, 0px)); transition: --hx-mask-left .22s ease-out, --hx-mask-right .22s ease-out; } hx-carousel[data-no-overflow] .hx-carousel-arrows { display: none; } hx-carousel[data-no-overflow] .hx-carousel { mask-image: none; } .hx-carousel[data-scrollbar-width="thin"] { scrollbar-width: thin; margin-block-end: calc(-1 * var(--hx-scrollbar-width-thin, 0px)); } .hx-carousel-item { height: var(--hx-size-height); } hx-carousel[data-hx--carousel-item-height-value="equal"] .hx-carousel-item, hx-carousel[data-hx--carousel-item-height-value="false"] .hx-carousel-item { height: unset; } .hx-carousel[data-hide-scrollbar] { scrollbar-width: none; -ms-overflow-style: none; margin-block-end: 0; } .hx-carousel[data-hide-scrollbar]::-webkit-scrollbar { display: none; } .hx-debug { & pre { font-size: .925em !important; } } .hx-accessibility { --hx-spacing-gap: .75rem; --hx-translate-hidden: calc(-100% - 1rem); --hx-color-bg: #1447e6; --hx-color-fg: #fff; --hx-link-order: 0; inset-inline: calc(var(--spacing) * 0); top: calc(var(--spacing) * 0); z-index: 9999; pointer-events: none; --tw-translate-y: var(--hx-translate-hidden); width: 100vw; translate: var(--tw-translate-x) var(--tw-translate-y); opacity: 0; transition-property: transform, opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; --tw-ease: var(--ease-out); transition-duration: .15s; transition-timing-function: var(--ease-out); justify-content: center; display: flex; position: fixed; } .hx-accessibility:nth-of-type(2) { --hx-link-order: 1; } .hx-accessibility:focus, .hx-accessibility:focus-visible, .hx-accessibility:active { pointer-events: auto; opacity: 1; --tw-translate-y: calc(var(--hx-link-order) * (100% + var(--hx-spacing-gap))); translate: var(--tw-translate-x) var(--tw-translate-y); } .hx-accessibility__link { --hx-spacing-m: .75rem; pointer-events: none; justify-content: center; align-items: center; gap: calc(var(--spacing) * .5); --tw-font-weight: var(--font-weight-semibold); font-size: 1.35rem; font-weight: var(--font-weight-semibold); --tw-shadow: 0px 2px 16px 1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 7px 10px 1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 4px 5px -2px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); width: calc(100% - calc(var(--hx-spacing-m) * 2)); margin: var(--hx-spacing-m); background-color: var(--hx-color-bg, #1447e6); color: var(--hx-color-fg, #fff); border-style: var(--tw-border-style); border-width: 0; border-radius: 0; padding: .75em; display: flex; height: auto !important; min-height: auto !important; } .hx-accessibility__link:hover { background-color: var(--hx-color-bg, #1447e6); color: var(--hx-color-fg, #fff); } @media (prefers-reduced-motion: reduce) { .hx-accessibility { transition-property: none; } } .hx-breadcrumbs { & > ol { & > li { display: none !important; & > svg, & > a > svg { width: 1.1em; height: 1.1em; } & .hx-breadcrumbs-dots-icon { width: 1em; height: 1em; } & > a { gap: .25em; display: flex; } & + li:before { border-style: var(--tw-border-style) !important; --tw-content: var(--separator) !important; content: var(--tw-content) !important; border-width: 0 !important; width: auto !important; height: auto !important; margin-inline: .4em !important; transform: none !important; } } } & > ol:has( > li:nth-child(2)) > li:first-child span { display: none !important; } } @container (width <= 479px) { .hx-breadcrumbs { & > ol:has( > li:nth-child(2)) { & > li:first-child { display: none !important; } } } } @container (width >= 480px) { .hx-breadcrumbs { & > ol > li:nth-last-child(2) { display: flex !important; } } } @container (width >= 480px) and (width <= 1023px) { .hx-breadcrumbs { & > ol:has( > li:nth-child(4)) > li:first-child .hx-breadcrumbs-dots-icon { display: inline-block !important; } & > ol:has( > li:nth-child(10)) > li:nth-child(9) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(9)) > li:nth-child(8) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(8)) > li:nth-child(7) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(7)) > li:nth-child(6) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(6)) > li:nth-child(5) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(5)) > li:nth-child(4) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(4)) > li:nth-child(3) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } } } @container (width >= 1024px) { .hx-breadcrumbs { & > ol > li:nth-last-child(3) { display: flex !important; } & > ol:has( > li:nth-child(5)) > li:first-child .hx-breadcrumbs-dots-icon { display: inline-block !important; } & > ol:has( > li:nth-child(10)) > li:nth-child(8) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(9)) > li:nth-child(7) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(8)) > li:nth-child(6) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(7)) > li:nth-child(5) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(6)) > li:nth-child(4) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } & > ol:has( > li:nth-child(5)) > li:nth-child(3) { margin-left: calc(var(--spacing) * 2) !important; &:before { display: none !important; } } } } :root, [data-theme="light"] { --hx-form-bg: oklch(100% 5.96046e-8 none / .9); } @container style(--hx-theme: dark) { [data-theme="inverse"] { --hx-form-bg: oklch(100% 5.96046e-8 none / .9); } } [data-theme="dark"], [data-theme="black"] { --hx-form-bg: oklch(0% none none / .9); } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-form-bg: oklch(0% none none / .9); } } .hx-form { --hx-size: 2.5em; --hx-color-bg: var(--hx-form-bg); --hx-color-fg: var(--hx-base-fg); --hx-color-b: var(--hx-base-fg); @supports (color: color-mix(in lab, red, red)) { --hx-color-b: color-mix(in oklch, var(--hx-base-fg) 25%, transparent); } --hx-opacity-disabled: .6; --hx-color-focus: #3b82f6; --hx-color-b-danger: #f87171; --hx-color-fg-danger: #dc2626; --hx-color-focus-danger: oklch(63.6834% .207849 25.3313 / .4); } .hx-form-field { --hx-spacing-m: .8rem; --hx-spacing-p-x: .65rem; --hx-spacing-gap: .5rem; margin-bottom: var(--hx-spacing-m); display: block; } .hx-form-field:last-child { --hx-spacing-m: 0; } .hx-form-field--label-top { flex-direction: column; gap: .25em; display: flex; } .hx-form-field--label-inline { align-items: center; column-gap: calc(var(--spacing) * 1); grid-template-columns: auto 1fr; display: grid; } .hx-form-field--control { width: 100%; color: var(--hx-color-fg); outline-style: var(--tw-outline-style); outline-width: 0; display: block; &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; } transition-property: box-shadow, outline-color; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .2s; outline-color: var(--hx-color-focus); transition-duration: .2s; } .hx-form-field--control-invalid { --hx-color-b: var(--hx-color-b-danger); --hx-color-fg-active: var(--hx-color-fg-danger); --hx-color-focus: var(--hx-color-focus-danger); } .hx-form-field--control-disabled { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } .hx-form-field--control-border-full { border-radius: var(--hx-radius); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--hx-color-b); } .hx-form-field--control-border-bottom { border-style: var(--tw-border-style); border-width: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--hx-color-b); border-radius: 0; } .hx-form-field--control-bg-fill { background-color: var(--hx-color-bg); } .hx-form-field--control-bg-glass { --tw-backdrop-blur: blur(2px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); background-color: var(--hx-color-bg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,var(--hx-color-bg) 80%,transparent); } } .hx-form-field--control-bg-transparent { background-color: #0000; } .hx-form-field--text { height: var(--hx-size); padding-inline: var(--hx-spacing-p-x); &::placeholder { color: var(--hx-color-fg); @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch,var(--hx-color-fg) 55%,transparent); } } } .hx-form-field--file { --hx-floating-gap: 0; height: var(--hx-size); width: 100%; padding-inline: calc(var(--spacing) * 0); appearance: none; overflow: hidden; &::file-selector-button { cursor: pointer; height: 100%; padding-inline: var(--hx-spacing-p-x); padding-block: calc(var(--spacing) * 0); vertical-align: middle; --tw-leading: 1; --tw-font-weight: var(--font-weight-medium); line-height: 1; font-weight: var(--font-weight-medium); border-style: var(--tw-border-style); border-width: 0; border-right-style: var(--tw-border-style); --tw-border-style: dotted; border-style: dotted; border-right-width: 1px; border-right-color: var(--hx-color-b); background-color: var(--hx-color-fg); border-radius: 0; @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,var(--hx-color-fg) 10%,transparent); } color: var(--hx-color-fg); margin-right: var(--hx-spacing-gap); } &:not(.hx-form-field--control-disabled):hover::file-selector-button { background-color: var(--hx-color-fg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,var(--hx-color-fg) 16%,transparent); } } &.hx-form-field--control-disabled::file-selector-button { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } &:disabled::file-selector-button { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } } .hx-form-field--textarea { --hx-textarea-pt: .65rem; --hx-textarea-pb: .875rem; padding-inline: var(--hx-spacing-p-x); padding-top: var(--hx-textarea-pt); padding-bottom: var(--hx-textarea-pb); min-height: calc(var(--hx-size) * 2); resize: vertical; } .hx-form-field--select { height: var(--hx-size); padding-inline: var(--hx-spacing-p-x); appearance: none; padding-right: calc(var(--hx-spacing-p-x) + 2rem); } .hx-form-field--check, .hx-form-field--radio { --hx-size: 1.05em; --hx-spacing-gap: .5rem; vertical-align: middle; height: var(--hx-size); width: var(--hx-size); background-color: var(--hx-color-bg); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--hx-color-b); accent-color: var(--hx-color-fg-active); outline-style: var(--tw-outline-style); outline-width: 0; display: inline-block; &:focus-visible { outline-style: var(--tw-outline-style); outline-width: 1px; outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; } transition-property: box-shadow, outline-color, background-color, border-color; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .2s; outline-color: var(--hx-color-focus); transition-duration: .2s; } .hx-form-field--check { cursor: pointer; border-radius: calc(var(--hx-radius) - 2px); } .hx-form-field--radio { cursor: pointer; border-radius: 3.40282e38px; } .hx-form-field--check:disabled, .hx-form-field--radio:disabled { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } .hx-form-field--label-floating { --hx-float-size-mult: 1.35; --hx-float-label-size: 1em; --hx-float-label-size-active: .85em; --hx-float-spacing-pt: 1.1em; --hx-float-textarea-spacing-pt: var(--hx-float-spacing-pt); --hx-float-label-top: 50%; --hx-float-label-top-lift: .6em; --hx-float-textarea-size-mult: 2.25; --hx-float-motion-duration: .18s; --hx-float-motion-ease: ease; --hx-opacity-label: .85; --hx-opacity-label-active: 1; position: relative; &:has(textarea.peer) { --hx-float-textarea-size-mult: 2.2; --hx-float-textarea-spacing-pt: 1.6em; --hx-float-textarea-label-top: .9em; --hx-float-textarea-label-size: 1em; & > label { top: var(--hx-float-textarea-label-top); --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); font-size: var(--hx-float-textarea-label-size); } } & > label.hx-form-field__label { pointer-events: none; left: calc(var(--spacing) * 0); z-index: 10; transform-origin: 0 0; top: var(--hx-float-label-top); --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); font-size: var(--hx-float-label-size); --tw-leading: 1; color: var(--hx-color-fg); line-height: 1; position: absolute; @supports (color: color-mix(in lab, red, red)) { color: color-mix(in oklch,var(--hx-color-fg) 85%,transparent); } opacity: var(--hx-opacity-label); transition: top var(--hx-float-motion-duration) var(--hx-float-motion-ease), transform var(--hx-float-motion-duration) var(--hx-float-motion-ease), font-size var(--hx-float-motion-duration) var(--hx-float-motion-ease), opacity .15s var(--hx-float-motion-ease); will-change: top, transform, font-size; } & .peer { padding-top: var(--hx-float-spacing-pt); } & input.peer, & select.peer { height: calc(var(--hx-size) * var(--hx-float-size-mult)); } & textarea.peer { min-height: calc(var(--hx-size) * var(--hx-float-textarea-size-mult)); padding-top: var(--hx-float-textarea-spacing-pt); } &:has(textarea.peer:focus), &:has(textarea.peer:not(:placeholder-shown)) { --hx-float-textarea-spacing-pt: 1.8em; } :-webkit-any(&:has(.peer:focus) > label.hx-form-field__label, &:has(input.peer:not(:placeholder-shown)) > label.hx-form-field__label, &:has(textarea.peer:not(:placeholder-shown)) > label.hx-form-field__label, &:has(select.peer option:checked:not([value=""])) > label.hx-form-field__label, &:has(input.peer:-webkit-autofill) > label.hx-form-field__label) { top: var(--hx-float-label-top-lift); --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--hx-color-fg); font-size: var(--hx-float-label-size-active); opacity: var(--hx-opacity-label-active); } :is(&:has(.peer:focus) > label.hx-form-field__label, &:has(input.peer:not(:placeholder-shown)) > label.hx-form-field__label, &:has(textarea.peer:not(:placeholder-shown)) > label.hx-form-field__label, &:has(select.peer option:checked:not([value=""])) > label.hx-form-field__label, &:has(input.peer:autofill) > label.hx-form-field__label) { top: var(--hx-float-label-top-lift); --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); color: var(--hx-color-fg); font-size: var(--hx-float-label-size-active); opacity: var(--hx-opacity-label-active); } } .hx-form-field--affix { width: 100%; height: var(--hx-size); cursor: text; align-items: center; display: flex; overflow: hidden; &:focus-within { outline-style: var(--tw-outline-style); outline-width: 1px; outline-style: var(--tw-outline-style); outline-offset: 2px; outline-width: 2px; outline-color: var(--hx-color-focus); } transition-property: box-shadow, outline-color; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .2s; transition-duration: .2s; } .hx-form-field--affix-textarea { align-items: stretch; } .hx-form-field--affix-select { position: relative; } .hx-form-field--affix-border-full { border-radius: var(--hx-radius); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--hx-color-b); } .hx-form-field--affix-border-bottom { border-style: var(--tw-border-style); border-width: 0; border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--hx-color-b); border-radius: 0; } .hx-form-field--affix-bg-fill { background-color: var(--hx-color-bg); } .hx-form-field--affix-bg-glass { --tw-backdrop-blur: blur(2px); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); background-color: var(--hx-color-bg); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklch,var(--hx-color-bg) 80%,transparent); } } .hx-form-field--affix-bg-transparent { background-color: #0000; } .hx-form-field--affix-disabled { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } .hx-form-field { &:not(:has(.hx-form-field-group)):not(:has(.hx-form-field)):has(.peer:focus):not(:has(.peer[aria-invalid="true"])):not(:has(.peer:user-invalid)) > label.hx-form-field__label { --hx-color-fg: var(--hx-color-focus); } :is(&:has(.peer[aria-invalid="true"]) > label.hx-form-field__label, &:has(.peer:user-invalid) > label.hx-form-field__label) { --hx-color-fg: var(--hx-color-fg-danger); } :is(&:has(.peer[aria-invalid="true"]) .hx-form-field__desc, &:has(.peer:user-invalid) .hx-form-field__desc) { --hx-color-fg: var(--hx-color-fg-danger); opacity: 1; } :is(&:has(.peer[aria-invalid="true"]), &:has(.peer:user-invalid)) { --hx-color-b: var(--hx-color-b-danger); --hx-color-fg-active: var(--hx-color-fg-danger); --hx-color-focus: var(--hx-color-focus-danger); } &:has(.peer:disabled) > label.hx-form-field__label, & .peer:disabled { cursor: not-allowed; opacity: var(--hx-opacity-disabled); } } .hx-form-field-group > li > .hx-form-field { min-height: var(--hx-size); align-items: center; display: flex; } .hx-form-field-group .hx-form-field-check, .hx-form-field-group .hx-form-field-radio { --hx-size: var(--hx-size); } :is(.hx-form-field .peer[aria-invalid="true"], .hx-form-field .peer:user-invalid) { --hx-color-b: var(--hx-color-b-danger); --hx-color-fg-active: var(--hx-color-fg-danger); --hx-color-focus: var(--hx-color-focus-danger); } .hx-pagination { & .btn { --tw-font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal); } & .hx-pagination-active > .btn { color: var(--hx-color-fg-active); border-color: var(--hx-color-b-active); background-color: var(--hx-color-bg-active); } & .hx-pagination-counter span { text-wrap: nowrap; } & .hx-pagination-unset > * { opacity: .75; padding-inline: .5em; border-style: var(--tw-border-style) !important; background-color: #0000 !important; border-width: 0 !important; } } @container (width <= 599px) { .hx-pagination { & li { display: none; } & .hx-pagination-prev, & .hx-pagination-next, & .hx-pagination-counter { display: block; } & .hx-pagination-next { flex-grow: 1; } } } @container (width <= 479px) { .hx-pagination-prev span { display: none; } } @container (width >= 600px) { .hx-pagination { & .hx-pagination-counter { display: none !important; } } } @container (width >= 600px) and (width <= 1023px) { .hx-pagination { & .hx-pagination-prev span { display: none !important; } } } @container (width <= 1023px) { .hx-pagination { & .hx-pagination-extra { display: none !important; } } } .card { a[href]& { &:focus, &:hover { & .quicklink-title { text-decoration-line: underline; } } } &[data-comp-color="transparent"] { a[href]& { &:focus, &:hover { background-color: var(--color-gray-200); } [data-theme="dark"] &, [data-theme="light"] [data-theme-mod="inverted"] & { &:focus, &:hover { background-color: var(--color-black); } } [data-theme="dark"] [data-theme-mod="inverted"] & { &:focus, &:hover { background-color: var(--color-gray-200); } } [data-theme="black"] &, & [data-theme="black"] [data-theme-mod="always_dark"] { &:focus, &:hover { background-color: var(--color-gray-950); } } [data-theme-mod="alternate"] & { &:focus, &:hover { background-color: var(--color-gray-100); } } [data-theme="dark"] [data-theme-mod="alternate"] & { &:focus, &:hover { background-color: var(--color-gray-950); } } [data-theme="black"] [data-theme-mod="alternate"] & { &:focus, &:hover { background-color: var(--color-black); } } [data-theme-mod="accent"] & { &:focus, &:hover { background-color: var(--color-primary-700); } } [data-theme="dark"] [data-theme-mod="accent"] & { &:focus, &:hover { background-color: var(--color-primary-200); } } [data-theme="black"] [data-theme-mod="accent"] & { &:focus, &:hover { background-color: var(--color-primary-300); } } } } } .document .card-body { padding: calc(var(--spacing) * 3); } .document { height: 100%; & > article, & > article > .card-body, & > article > .card-body > .card-content { height: 100%; } & .card-content { height: 100%; margin-block: auto; display: flex; } & .document-content { gap: var(--spacing-inner); grid-template: "icon body" 1fr / 32px auto; grid-area: content; height: 100%; display: grid; & .document-icon { grid-area: icon; align-self: center; width: 26px; height: 26px; transform: scale(1.3); } & .document-body { grid-area: body; align-self: center; & .document-body-title { margin-bottom: calc(var(--spacing) * 1); -webkit-line-clamp: 2; font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); word-break: break-word; overflow-wrap: break-word; hyphens: auto; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } & .document-body-info { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); opacity: .65; } } } & .document-grid-large { gap: var(--spacing-inner); grid-template: "thumb thumb" "content content" 1fr / 32px auto; height: 100%; display: grid; & .document-content { & .document-body-title { font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); } & .document-icon { width: 32px; height: 32px; } } } & .document-thumb { grid-area: thumb; justify-self: center; height: 100%; & img { object-fit: cover; width: 100%; height: 100%; } } & .document-grid-small { gap: var(--spacing-inner); grid-template: "thumb content" 1fr / auto auto; height: 100%; display: grid; & .document-content { align-items: center; display: flex; & .document-icon { display: none; } & .document-body-title { font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); } & .document-body-info { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); } } } } contact-list { position: relative; } office-contact-list { display: block; position: relative; } .office-contact-header { margin-bottom: calc(var(--spacing) * 8); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-color: var(--color-base-300); padding-bottom: calc(var(--spacing) * 8); } .office-contact-title { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-base-content); } .office-contact-meta { margin-top: calc(var(--spacing) * 3); align-items: flex-start; gap: calc(var(--spacing) * 4); display: grid; @media (width >= 480px) { column-gap: calc(var(--spacing) * 12); grid-template-columns: max-content minmax(0, auto); } } .office-contact-address { gap: calc(var(--spacing) * 1); font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); color: var(--color-base-content-mid); font-style: normal; display: grid; } .office-contact-details { gap: calc(var(--spacing) * 1); font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); color: var(--color-base-content-mid); display: grid; & > div { column-gap: calc(var(--spacing) * 2); grid-template-columns: max-content minmax(0, 1fr); display: grid; } & dt { color: var(--color-base-content); } & dd { min-width: calc(var(--spacing) * 0); overflow-wrap: break-word; } } .contact-container { position: relative; overflow: hidden; & ul { columns: var(--item-min-width); column-gap: var(--gap); display: block !important; & > li { break-inside: avoid; } } } .contact-card { margin-bottom: calc(var(--spacing) * 6); border-left-style: var(--tw-border-style); border-left-width: 3px; border-left-color: var(--color-primary-600); padding-left: calc(var(--spacing) * 3); [data-theme-mod="accent"] & { border-left-color: var(--hx-base-fg); } break-inside: avoid; @media (width >= 1024px) { margin-bottom: calc(var(--spacing) * 12); } & .contact-card-grid { gap: calc(var(--spacing) * 3); display: grid; } & .contact-card-avatar { border-radius: var(--radius-sm); object-fit: cover; object-position: 50% 20%; width: 200px; height: 150px; } & .contact-card-title { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); color: var(--color-base-content); } & .contact-card-position { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); color: var(--color-base-content-low); } & .contact-card-phone, & .contact-card-mail { margin-top: calc(var(--spacing) * 1); align-items: center; gap: calc(var(--spacing) * 2); color: var(--color-base-content-mid); display: flex; } } .contact-view-all { inset-inline: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); z-index: 10; position: absolute; @media (width >= 768px) { display: none; } } .contact-gradient { --tw-gradient-position: to top in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); --tw-gradient-from: var(--color-base-100); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); height: 200px; } .contact-button { background-color: var(--hx-base-bg); place-items: center; display: grid; & label { :where(&) { @layer daisyui.component { width: unset; } } .prose & { text-decoration-line: none; } @layer daisyui.component { cursor: pointer; text-align: center; vertical-align: middle; outline-offset: 2px; webkit-user-select: none; -webkit-user-select: none; user-select: none; padding-inline: var(--btn-p); color: var(--btn-fg); --tw-prose-links: var(--btn-fg); height: var(--size); font-size: var(--fontsize, .875rem); outline-color: var(--btn-color, var(--color-base-content)); background-color: var(--btn-bg); background-size: auto, calc(var(--noise) * 100%); background-image: none, var(--btn-noise); border-width: var(--border); border-style: solid; border-color: var(--btn-border); text-shadow: 0 .5px oklch(100% 0 0 / calc(var(--depth) * .15)); touch-action: manipulation; box-shadow: 0 .5px 0 .5px oklch(100% 0 0 / calc(var(--depth) * 6%)) inset, var(--btn-shadow); --size: calc(var(--size-field, .25rem) * 10); --btn-bg: var(--btn-color, var(--color-base-200)); --btn-fg: var(--color-base-content); --btn-p: 1rem; --btn-border: var(--btn-bg); border-start-start-radius: var(--join-ss, var(--radius-field)); border-start-end-radius: var(--join-se, var(--radius-field)); border-end-end-radius: var(--join-ee, var(--radius-field)); border-end-start-radius: var(--join-es, var(--radius-field)); flex-wrap: nowrap; flex-shrink: 0; justify-content: center; align-items: center; gap: .375rem; font-weight: 600; transition-property: color, background-color, border-color, box-shadow; transition-duration: .2s; transition-timing-function: cubic-bezier(0, 0, .2, 1); display: inline-flex; @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-bg), #000 calc(var(--depth) * 5%)); } --btn-shadow: 0 3px 2px -2px var(--btn-bg), 0 4px 3px -2px var(--btn-bg); @supports (color: color-mix(in lab, red, red)) { --btn-shadow: 0 3px 2px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000), 0 4px 3px -2px color-mix(in oklab, var(--btn-bg) calc(var(--depth) * 30%), #0000); } --btn-noise: var(--fx-noise); @media (hover: hover) { &:hover { --btn-bg: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } } } &:focus-visible, &:has(:focus-visible) { isolation: isolate; outline-width: 2px; outline-style: solid; } &:active:not(.btn-active) { --btn-bg: var(--btn-color, var(--color-base-200)); translate: 0 .5px; @supports (color: color-mix(in lab, red, red)) { --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 5%); } --btn-border: var(--btn-color, var(--color-base-200)); @supports (color: color-mix(in lab, red, red)) { --btn-border: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%); } --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0); } &:is(input[type="checkbox"], input[type="radio"]) { appearance: none; &:after { --tw-content: attr(aria-label); content: var(--tw-content); } } &:where(input:checked:not(.filter .btn)) { --btn-color: var(--color-primary); --btn-fg: var(--color-primary-content); isolation: isolate; } } &:disabled { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } &[disabled] { @layer daisyui.modifier { &:not(.btn-link, .btn-ghost) { background-color: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent); } box-shadow: none; } pointer-events: none; --btn-border: #0000; --btn-noise: none; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } @media (hover: hover) { &:hover { pointer-events: none; background-color: var(--color-neutral); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--color-neutral) 20%, transparent); } --btn-border: #0000; --btn-fg: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --btn-fg: color-mix(in oklch, var(--color-base-content) 20%, #0000); } } } } } background-color: var(--color-primary-600); color: var(--color-accent-content); } } .eventTeaser { &-media { border-radius: var(--radius-sm); object-fit: cover; width: 100%; height: auto; } &-body { background-color: var(--hx-color-bg); color: var(--hx-color-fg); } & svg { fill: none; flex-shrink: 0; } } .eventTeaser-design01 { --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 1px 1px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 2px 1px -1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))); height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & .hx-card__media a { width: 100%; } & .eventTeaser-title { margin-bottom: calc(var(--spacing) * 2); font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } & .eventTeaser-desc { margin-bottom: calc(var(--spacing) * 3); -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; } &:not(.card-side) .eventTeaser-media { aspect-ratio: 16 / 7; height: auto; } &.card-side .hx-card__media { flex-shrink: 0; min-width: 150px; max-width: 180px; } &.card-side .eventTeaser-media { aspect-ratio: 6 / 7; min-width: 150px; max-width: 180px; max-height: 100%; } &.card-side:not(:has(.eventTeaser-media)) { flex-direction: column; } @media (width < 768px) { &.card-side { flex-direction: column; } &.card-side .hx-card__media { border-top-right-radius: .5rem; border-bottom-right-radius: 0; border-bottom-left-radius: 0; width: 100%; min-width: 0; max-width: none; } &.card-side .eventTeaser-media { border-top-left-radius: .5rem; border-bottom-right-radius: 0; border-bottom-left-radius: 0; width: 100%; min-width: 0; max-width: none; max-height: 150px; } } & .eventTeaser-meta { margin-bottom: calc(var(--spacing) * 3); justify-content: space-between; align-items: center; display: flex; } & .eventTeaser-location, & .eventTeaser-organizer, & .eventTeaser-date { align-items: center; gap: calc(var(--spacing) * 2); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); display: flex; } & .eventTeaser-icon { width: 1.2rem; height: 1.2rem; color: var(--color-primary-600); } &[data-comp-color="transparent"] { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); border-top-style: var(--tw-border-style); border-top-width: 3px; border-top-color: var(--color-primary-600); &.card-side { border-top-style: var(--tw-border-style); border-top-width: 0; border-left-style: var(--tw-border-style); border-left-width: 3px; border-left-color: var(--color-primary-600); } a[href]& { &:focus, &:hover { background-color: #0000; } } [data-theme="dark"] & { --hx-color-bg: var(--color-gray-900); border-top-color: var(--color-primary-300); } [data-theme="black"] & { --hx-color-bg: var(--color-gray-950); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-200); } } } [data-theme="dark"] [data-theme-mod="alternate"] & { --hx-color-bg: var(--color-gray-950); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-200); } } } [data-theme="black"] [data-theme="alternate"] & { --hx-color-bg: var(--color-gray-900); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-300); } } } [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-700); --hx-color-fg: var(--hx-accent-fg); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--hx-accent-fg); } } } [data-theme="dark"] [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-200); } [data-theme="black"] [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-300); } [data-theme-mod="inverted"] & { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-600); } } } } } .featured-link { &-grid { display: grid; } &-title { & :where(h2, h3, h4, h5, h6) { display: inline-block; } } } .featured-link.featured-link-design-01 { &[data-comp-contrast="accent"] { --hx-color-bg: var(--color-primary); --hx-color-fg: var(--color-primary-content); [data-theme="dark"] & { --hx-color-bg: var(--color-primary-400); } [data-theme="black"] & { --hx-color-bg: var(--color-primary-300); } border-color: var(--color-primary-600); color: var(--color-accent-content); &[data-has-link="true"]:is(:focus, :hover) { background-color: var(--color-primary-700); } [data-theme="dark"] & { &[data-has-link="true"]:is(:focus, :hover) { background-color: var(--color-primary-300); } } [data-theme="black"] & { &[data-has-link="true"]:is(:focus, :hover) { background-color: var(--color-primary-400); } } [data-theme-mod="accent"] & { --hx-color-bg: var(--color-accent-content); --hx-color-fg: var(--color-black); color: var(--color-black); &[data-has-link="true"]:is(:focus, :hover) { background-color: var(--color-gray-100); } } [data-theme-mod="alternate"] & { --hx-color-bg: var(--color-primary-700); } [data-theme="dark"] [data-theme-mod="alternate"] & { --hx-color-bg: var(--color-primary-200); } [data-theme="black"] [data-theme-mod="alternate"] & { --hx-color-bg: var(--color-primary-300); } [data-theme-mod="always_dark"] & { --hx-color-fg: var(--color-white); color: var(--color-white); } } &[data-comp-color="transparent"] { & .featured-link-image { & img { filter: brightness(0); } :is([data-theme="dark"], [data-theme="black"]) & { & img { filter: brightness(0) invert(); } } } } [data-theme="dark"] &, [data-theme="black"] & { &[data-comp-contrast="high_contrast"] { & .featured-link-image { & img { filter: brightness(0); } } } } [data-theme="light"] & { &[data-comp-contrast="low_contrast"] { & .featured-link-image { & img { filter: brightness(0); } } } } & .featured-link-grid { grid-template-columns: auto; grid-auto-rows: auto; gap: .5rem; display: grid; @media (width >= 1024px) { gap: 1.25rem; } } & .featured-link-image { & img { height: 44px; } } & .featured-link-title { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } & .featured-link-desc { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); --tw-font-weight: var(--font-weight-light); font-weight: var(--font-weight-light); } } .main-hero { margin-bottom: calc(var(--spacing) * 5); grid-template-columns: subgrid; background-color: var(--color-primary); color: var(--color-accent-content); grid-template-rows: auto auto; display: grid; position: relative; @media (width >= 1024px) { overflow: hidden; } [data-theme="dark"] & { background-color: var(--color-primary-300); } [data-theme="black"] & { background-color: var(--color-primary-200); } & .main-hero-layout-body { justify-content: center; align-items: flex-start; gap: calc(var(--spacing) * 2); padding-block: calc(var(--spacing) * 4); flex-direction: column; padding-inline-start: var(--spacing-safe-edge-l); padding-inline-end: var(--spacing-safe-edge-r); display: flex; @media (width >= 1024px) { padding-inline: 0; } & .main-hero-title { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } & .main-hero-subtitle { font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } & .main-hero-actions { align-items: center; gap: calc(var(--spacing) * 3); flex-wrap: wrap; display: flex; } } & .main-hero-layout-content { gap: calc(var(--spacing) * 3); flex-direction: column; display: flex; } & .main-hero-featured-image { max-width: min(100%, 300px); & img { object-fit: contain; width: auto; max-width: 100%; height: var(--main-hero-featured-image-height, 400px); display: block; } } & .main-hero-featured-image-slot { min-height: 0; display: none; } @media (width >= 1024px) { &.main-hero--content-small { & .main-hero-title { font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); } & .main-hero-subtitle { font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); } & .main-hero-btn { @layer daisyui.modifier { --fontsize: .75rem; --btn-p: .75rem; --size: calc(var(--size-field, .25rem) * 8); } } } &.main-hero--content-large { & .main-hero-layout-content { gap: calc(var(--spacing) * 4); } & .main-hero-title { font-size: var(--text-h1); line-height: var(--tw-leading, var(--text-h1--line-height)); font-weight: var(--tw-font-weight, var(--text-h1--font-weight)); } & .main-hero-subtitle { font-size: var(--text-h4); line-height: var(--tw-leading, var(--text-h4--line-height)); font-weight: var(--tw-font-weight, var(--text-h4--font-weight)); } & .main-hero-btn { @layer daisyui.modifier { --fontsize: 1.125rem; --btn-p: 1.25rem; --size: calc(var(--size-field, .25rem) * 12); } } } &.main-hero--has-featured-image { overflow: hidden; } & .main-hero-featured-image-slot { margin-top: calc(var(--spacing) * 0); z-index: 55; grid-row: 1 / -1; justify-content: center; align-self: center; align-items: center; max-height: 100%; display: flex; position: absolute; top: 0; bottom: 0; } &.main-hero--featured-image-right .main-hero-featured-image-slot { grid-column: 3 / 5; justify-self: end; } &.main-hero--featured-image-left .main-hero-featured-image-slot { grid-column: 2 / 3; justify-self: start; } &.main-hero--featured-image-top .main-hero-featured-image-slot { padding-top: 100px; } &.main-hero--featured-image-bottom .main-hero-featured-image-slot { padding-bottom: 100px; } } & .main-hero-layout-gallery { & button svg { fill: none; } } & .main-hero-layout-gallery, & .main-hero-layout-gallery--blurred { --hx-radius: 0px; } & .main-hero-layout--background { grid-template-columns: subgrid; height: 100%; min-height: var(--min-height); max-height: var(--max-height); isolation: isolate; grid-row: 1 / -1; grid-template-rows: max-content minmax(0, 1fr); display: grid; & .main-hero-layout-body { grid-row-start: -1; justify-self: start; width: 100%; position: relative; & .vfx { pointer-events: none; top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 60; width: 100%; position: absolute; & .mask-one, & .mask-two, & .mask-three { background-color: var(--color-primary); width: 100%; height: 100%; position: absolute; mask-image: url("../../media/layout/mask-horizontal-FH6dLbD.svg"); mask-position: bottom; mask-size: 100%; mask-repeat: no-repeat; mask-mode: alpha; [data-theme="dark"] & { background-color: var(--color-primary-300); } [data-theme="black"] & { background-color: var(--color-primary-200); } } & .transition-masks { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); transform-origin: top; width: 100%; height: 18vw; margin-top: 1px; position: absolute; overflow: hidden; transform: scaleY(-.5); } & .mask-one { z-index: 7; height: 131%; top: -59%; rotate: 5deg; } & .mask-two { opacity: .7; z-index: 6; height: 116%; top: -27%; rotate: 2deg; } & .mask-three { opacity: .5; z-index: 5; height: 122%; top: -25%; rotate: -1deg; } } } & .main-hero-layout-gallery { grid-row: 2 / -1; height: 100%; & img { object-fit: cover; width: 100%; height: 100%; } } } @media (width >= 1024px) { & .main-hero-layout--background.main-hero-layout--content-left, & .main-hero-layout--background.main-hero-layout--content-right { grid-row: 1 / -1; grid-template-rows: auto auto; column-gap: 0; min-width: 0; height: 100%; display: grid; & .main-hero-layout-body { --container-width: calc(var(--layout-main-width) + var(--layout-aside-width)); width: max-content; min-width: 0; max-width: calc(var(--container-width) / 2); grid-row: 1 / -1; } & .main-hero-layout-body .vfx { top: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0); width: 200px; height: 100%; left: 100%; right: 0; & .transition-masks { transform-origin: center; width: 200px; height: calc(100% + 2px); margin-left: -1px; top: -1px; transform: none; & .mask-one, & .mask-two, & .mask-three { mask-image: url("../../media/layout/mask-vertical-ZILIJ7J.svg"); mask-position: 100%; mask-size: auto 100%; } & .mask-one { width: 70%; height: 136%; top: -29%; left: -22%; rotate: 3deg; } & .mask-two { width: 70%; top: -10%; left: -5%; rotate: -2deg; } & .mask-three { width: 70%; top: -10%; left: 13%; rotate: -5deg; } } } & .main-hero-layout-gallery { grid-row: 1 / -1; width: 100%; min-width: 0; height: 100%; overflow: hidden; & img { object-fit: cover; width: 100%; height: 100%; } } &.main-hero-layout--content-left { grid-column: 2 / -1; grid-template-columns: max-content minmax(0, 1fr); container-type: inline-size; & .main-hero-layout-body { grid-column-start: 1; justify-self: start; align-items: flex-start; } & .main-hero-layout-gallery { grid-column: 2 / -1; & button:first-child { margin-left: 130px; } & div:has(hx-progress) { margin-left: 170px; right: calc(100cqw - 90vw); @media (width >= 1320px) { right: calc(100cqw - var(--layout-max-width)); } } } } &.main-hero-layout--content-right { grid-column: 1 / 5; grid-template-columns: minmax(0, 1fr) max-content; & .main-hero-layout-body { grid-column-start: -1; justify-self: end; align-items: flex-end; & nav { justify-content: flex-end; } } & .main-hero-layout-body .vfx { left: 0; right: auto; & .transition-masks { left: -200px; transform: scaleX(-1); } } & .main-hero-layout-gallery { grid-column: -2 / -3; & button:last-child { margin-right: 130px; } & div:has(hx-progress) { margin-right: 170px; } } } } & .main-hero-layout--background.main-hero-layout--content-center { grid-template-columns: subgrid; grid-column: 1 / -1; grid-template-rows: minmax(0, 1fr) max-content; height: 100%; display: grid; & .main-hero-layout-body { grid-column: 1 / -1; grid-row-start: -1; justify-content: flex-start; align-items: center; & nav { justify-content: center; } & .vfx { top: 0; & .transition-masks { bottom: 0; transform: scaleY(-.4); } } } & .main-hero-layout-gallery { grid-area: -2 / 1 / -3 / -1; & div:has(hx-progress) { top: calc(var(--spacing) * 2); } & img { object-fit: cover; width: 100%; height: 100%; } } } } & .main-hero-layout--full { grid-template-columns: subgrid; height: 100%; min-height: var(--min-height); max-height: var(--max-height); grid-row: 1 / -1; grid-template-rows: auto auto; display: grid; & .main-hero-layout-gallery { grid-row: 1 / -1; width: 100%; & div:has(hx-progress) { bottom: calc(var(--spacing) * 0); } & img { object-fit: cover; width: 100%; height: 100%; max-height: var(--max-height); min-height: var(--min-height); } } } & .main-hero-layout--full .main-hero-layout-gallery--blurred { display: none; } @media (width >= 1024px) { & .main-hero-layout--full { z-index: 20; grid-area: 1 / 1 / -1 / -1; position: relative; overflow: hidden; & .main-hero-layout-gallery--blurred { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); z-index: 30; width: 100%; height: 100%; min-height: inherit; max-height: inherit; display: block; position: absolute; overflow: hidden; & div:has(hx-progress) { bottom: calc(var(--spacing) * 0); } & img { object-fit: cover; filter: blur(15px); width: 100%; height: 100%; transform: scale(1.1); } } & .main-hero-layout-gallery { z-index: 40; --hx-radius: var(--brand-radius); width: calc(100% + 100px); min-height: inherit; max-height: inherit; grid-area: 1 / 2 / -1 / 5; height: 100%; position: relative; left: -50px; overflow: hidden; & div:has(hx-progress) { display: none; } & img { margin-block: calc(var(--spacing) * 3); object-fit: cover; width: 100%; height: calc(100% - 24px); } } } } & .main-hero-layout--overlay { grid-template-columns: subgrid; height: 100%; min-height: var(--min-height); max-height: var(--max-height); grid-area: 1 / 1 / -1 / -1; grid-template-rows: auto auto; display: grid; position: relative; & .main-hero-layout-body { inset: calc(var(--spacing) * 0); z-index: 40; grid-row: 1 / -1; justify-content: flex-start; position: absolute; } & .main-hero-layout-gallery { max-height: var(--max-height); min-height: var(--min-height); grid-area: 1 / 1 / -1 / -1; & img { object-fit: cover; width: 100%; height: 100%; } } @media (width >= 1024px) { &.main-hero-layout--content-left { & .main-hero-layout-body { grid-column: 2 / 3; justify-content: center; justify-self: flex-start; } } &.main-hero-layout--content-right { & .main-hero-layout-body { grid-column: 3 / 5; justify-content: center; justify-self: flex-end; } } &.main-hero-layout--content-center { & .main-hero-layout-body { grid-column: 2 / 5; justify-content: center; place-self: center; } } } } & .main-hero-layout--overlay.main-hero-layout--dark-gradient { &:before { content: ""; pointer-events: none; inset: calc(var(--spacing) * 0); z-index: 30; background: linear-gradient(#000c 0%, #0009 35%, #0000001a 100%); position: absolute; } @media (width >= 1024px) { &.main-hero-layout--content-left:before { background: linear-gradient(to right, #000c 0%, #0009 35%, #0000001a 100%); } &.main-hero-layout--content-right:before { background: linear-gradient(to left, #000c 0%, #0009 35%, #0000001a 100%); } &.main-hero-layout--content-center:before { background: linear-gradient(#00000080, #00000080); } } } } .main-hero:has(.main-hero-thumbnails) { @media (width < 1024px) { margin-bottom: calc(var(--spacing) * 5); } } .main-hero .main-hero-thumbnails { bottom: calc(var(--spacing) * 0); z-index: 60; --tw-translate-x: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); gap: calc(var(--spacing) * 3); display: flex; position: absolute; left: 50%; & hx-carousel-thumbs { overflow: visible; } & ul { overflow: scroll; & img { border-radius: var(--hx-radius); border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-white); } } @media (width < 1024px) { & ul { --tw-translate-y: calc(1/2 * 100%); translate: var(--tw-translate-x) var(--tw-translate-y); } } } @media (width < 1024px) { .main-hero-layout--background { position: relative; & div:has(hx-progress) { top: 8px; } } .main-hero:has(.main-hero-layout--background) .main-hero-thumbnails { right: var(--spacing-safe-edge-r); --tw-translate-x: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); top: 100px; left: auto; & ul { height: auto; width: calc(var(--spacing) * 10); --tw-translate-y: calc(var(--spacing) * 0); translate: var(--tw-translate-x) var(--tw-translate-y); gap: calc(var(--spacing) * .5); flex-direction: column; max-height: 166px; & > div { width: calc(var(--spacing) * 10); height: calc(var(--spacing) * 10); flex-shrink: 0; } } } } @media (width >= 1024px) { .main-hero .main-hero-thumbnails { width: 100%; } .main-hero:has(.main-hero-layout--content-left) .main-hero-thumbnails { bottom: calc(var(--spacing) * 6); grid-column: 3 / 5; justify-content: flex-end; } .main-hero:has(.main-hero-layout--content-right) .main-hero-thumbnails { bottom: calc(var(--spacing) * 6); grid-column: 2 / 3; justify-content: flex-start; } .main-hero:has(.main-hero-layout--content-center) .main-hero-thumbnails { top: calc(var(--spacing) * 4); grid-column: 2 / 5; justify-content: center; } .main-hero.main-hero--featured-image-right .main-hero-thumbnails { grid-column: 2 / 3; justify-content: flex-start; } .main-hero.main-hero--featured-image-left .main-hero-thumbnails { grid-column: 3 / 5; justify-content: flex-start; } } .main-hero.main-hero--large { --main-hero-height: 300px; & .main-hero-layout-gallery { --min-height: min(200px, 200px); --max-height: min(40vh, 400px); height: 300px; & img { max-height: 100%; } } @media (width >= 1024px) { --main-hero-height: 400px; & .main-hero-layout--background, & .main-hero-layout--overlay { & .main-hero-layout-gallery { --min-height: min(400px, 400px); --max-height: min(60vh, 600px); height: 400px; } } & .main-hero-layout--full { height: 400px; & .main-hero-layout-gallery--blurred, & .main-hero-layout-gallery { height: 400px; } } } } .main-hero.main-hero--large.main-hero--height-500 { @media (width >= 1024px) { --main-hero-height: 500px; & .main-hero-layout--background, & .main-hero-layout--overlay { & .main-hero-layout-gallery { --min-height: min(500px, 500px); --max-height: min(70vh, 700px); height: 500px; } } & .main-hero-layout--full { height: 500px; & .main-hero-layout-gallery--blurred, & .main-hero-layout-gallery { height: 500px; } } } } .main-hero.main-hero--compact { --main-hero-height: 200px; & .main-hero-layout--background, & .main-hero-layout--overlay { & .main-hero-layout-gallery { --min-height: min(150px, 150px); --max-height: min(40vh, 400px); height: 200px; } } & .main-hero-layout--full { & .main-hero-layout-gallery--blurred { --min-height: min(150px, 150px); --max-height: min(40vh, 400px); height: 200px; } } @media (width >= 1024px) { & .main-hero-layout--background, & .main-hero-layout--overlay { & .main-hero-layout-body { min-width: 480px; } } & .main-hero-layout--background, & .main-hero-layout--overlay { & .main-hero-layout-gallery { --min-height: min(250px, 250px); --max-height: min(40vh, 400px); height: 200px; } } & .main-hero-layout--full { & .main-hero-layout-gallery--blurred { --min-height: min(250px, 250px); --max-height: min(40vh, 400px); height: 200px; } } } } .main-hero:has(.main-hero-layout--background) { & .vfx-highlight { pointer-events: none; left: calc(var(--spacing) * 0); width: 100%; height: 100px; inset: calc(var(--spacing) * 0); position: absolute; & .highlight { z-index: 10; background-color: var(--color-neutral-content); opacity: .85; mix-blend-mode: soft-light; --tw-blur: blur(var(--blur-2xl)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); top: calc(var(--spacing) * 0); border-radius: 3.40282e38px; width: 100%; height: 50%; position: absolute; left: -10%; & [data-theme="dark"], [data-theme="black"] & { --tw-blur: blur(var(--blur-3xl)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } @container style(--hx-theme: light) { & [data-theme="inverse"] { --tw-blur: blur(var(--blur-3xl)); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } } } } } @media (width >= 1024px) { .vfx-highlight .highlight { height: 100%; } .main-hero:has(.main-hero-layout--background.main-hero-layout--content-left) { & .vfx-highlight { & .highlight { width: 70%; height: 120%; top: 50%; left: -50%; } } } .main-hero:has(.main-hero-layout--background.main-hero-layout--content-right) { & .vfx-highlight { & .highlight { width: 70%; height: 120%; top: 50%; left: 60%; } } } .main-hero:has(.main-hero-layout--background.main-hero-layout--content-center) { & .vfx-highlight { & .highlight { width: 50%; height: 100%; top: 340%; left: 10%; } } } } #header.floaty + #post_header .main-hero-layout-body { padding-top: 120px; padding-bottom: 50px; } @media (width >= 1024px) { #header.floaty + #post_header .main-hero .main-hero-layout.main-hero-layout--background.main-hero-layout--content-center .main-hero-layout-body { padding-top: 20px; padding-bottom: 20px; } } .main-hero.main-hero--compact { #header.contained + #post_header & .main-hero-layout .main-hero-layout-gallery { height: 250px; min-height: 250px; } } @media (width >= 1024px) { #header.floaty + #post_header .main-hero.main-hero--compact .main-hero-layout.main-hero-layout--background.main-hero-layout--content-center .main-hero-layout-body { padding-top: 0; padding-bottom: 10px; } } .main-hero-carousel { grid-column: 1 / -1; width: 100%; & button svg { fill: none; } & .main-hero { width: 100%; @media (width >= 1024px) { grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) 45vw 25vw 20vw minmax(var(--spacing-safe-edge-r), 1fr); } @media (width >= 1320px) { grid-template-columns: minmax(var(--spacing-safe-edge-l), 1fr) calc(var(--layout-main-width) - ((var(--layout-main-width) - var(--layout-aside-width)) / 2)) calc((var(--layout-main-width) - var(--layout-aside-width)) / 2) var(--layout-aside-width) minmax(var(--spacing-safe-edge-r), 1fr); } } } #header { isolation: isolate; position: relative; &.sticky { position: sticky; top: 0; } &:not(.contained) { & .main-head { --hx-color-bg: var(--hx-base-bg); background-color: var(--hx-color-bg); } } &.contained { & .main-head { background-color: #0000; & .main-head-grid { --hx-color-bg: var(--hx-base-bg); background-color: var(--hx-color-bg); margin-top: calc(var(--spacing) * 2); border-radius: var(--radius-md); padding-inline: calc(var(--spacing) * 6); } } } & > .main-head-contact-top, & > .main-head { z-index: 20; position: relative; } & > .main-hero, & > .main-hero-carousel { z-index: 0; position: relative; } } .main-head-decorative-line { top: calc(var(--spacing) * 0); left: calc(var(--spacing) * 0); background-color: var(--color-primary-600); width: 100%; height: 3px; position: absolute; } .main-head-contact-top { grid-template-columns: subgrid; --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); background-color: var(--hx-color-bg); color: var(--hx-color-fg); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); grid-column: 1 / -1; display: grid; & .main-head-contact-top-container { align-items: center; column-gap: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 2); flex-wrap: wrap; width: 100%; padding-block: .5rem; display: flex; } & .main-head-contact-top-info { min-width: calc(var(--spacing) * 0); align-items: center; column-gap: calc(var(--spacing) * 4); row-gap: calc(var(--spacing) * 2); flex-wrap: wrap; display: flex; } & .main-head-contact-top-language { align-items: center; gap: calc(var(--spacing) * 1); flex-shrink: 0; margin-inline-start: auto; display: inline-flex; } & .main-head-contact-top-language-link { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1); --tw-leading: 1; --tw-font-weight: var(--font-weight-semibold); font-size: .8125rem; line-height: 1; font-weight: var(--font-weight-semibold); --tw-tracking: .14em; letter-spacing: .14em; text-transform: uppercase; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; border-width: 1px; border-color: currentColor; border-radius: 3.40282e38px; justify-content: center; align-items: center; text-decoration-line: none; transition-duration: .15s; display: inline-flex; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, currentColor 14%, transparent); } background: none; &:hover, &:focus-visible { background: currentColor; @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, currentColor 9%, transparent); } } &.is-active { background: currentColor; @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, currentColor 16%, transparent); } } } @media (width >= 1024px) { & .main-head-contact-top-container { gap: calc(var(--spacing) * 6); } & .main-head-contact-top-info { column-gap: calc(var(--spacing) * 6); } } } .main-head { z-index: 10; background-color: var(--hx-color-bg); color: var(--hx-color-fg); position: relative; &[data-comp-contrast="high_contrast"] { --menu-active-color: var(--hx-color-fg); } & ul > li details summary:before, & ul.submenu { [data-comp-color="transparent"] &, [data-comp-contrast="low_contrast"] & { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); } background-color: var(--hx-color-bg); color: var(--hx-color-fg); } & .main-head-grid-design-01 { column-gap: var(--spacing-content); padding-top: calc(var(--spacing) * 2); display: grid; @media (width >= 1024px) { padding-top: calc(var(--spacing) * 3); } grid-template: "logo contact language search a11y" "nav nav nav nav nav" / auto 1fr auto auto min-content; @media (width >= 1024px) { grid-template: "logo contact language search a11y" "logo nav nav nav nav" / auto 1fr auto auto min-content; & .main-head-nav { grid-column: 2 / 6; & nav > ul { justify-content: flex-start; display: flex; } } } } & .main-head-grid-design-02 { align-items: center; column-gap: var(--spacing-content); padding-top: calc(var(--spacing) * 2); display: grid; @media (width >= 1024px) { padding-top: calc(var(--spacing) * 0); } grid-template: "logo contact search a11y" "nav nav nav nav" / auto 1fr auto min-content; @media (width >= 1024px) { column-gap: var(--spacing-content); grid-template: "logo nav contact search a11y" / auto 1fr auto auto min-content; & .main-head-nav { grid-column: 2 / 3; & nav > ul { justify-content: flex-start; } } } & .main-head-logo { @media (width >= 1024px) { margin-block: calc(var(--spacing) * 3); & a { & img { height: 50px; } } } } } & .main-head-logo { grid-area: logo; place-self: center flex-start; & a { & img { height: 44px; } } @media (width >= 1024px) { margin-top: calc(var(--spacing) * -3); margin-right: calc(var(--spacing) * 5); & a { & img { height: 60px; } } } } & .main-head-grid.main-head-grid-design-01 { & .contact-btn-link { display: none; } & .main-head-contact { @media (width >= 1024px) { justify-content: flex-start; margin-inline-start: var(--spacing-content); & .main-head-contact-body { align-items: center; gap: var(--spacing-inner); flex-flow: wrap; max-width: none; height: 100%; } } } } & .main-head-grid.main-head-grid-design-02 { & .main-head-contact .contact-btn-link { display: none; @media (width >= 1024px) { display: inline-flex; } } @media (width >= 1024px) { & .main-head-contact dialog { display: none; } } } & .main-head-contact { grid-area: contact; justify-content: flex-end; align-items: center; display: flex; & .main-head-contact-body { width: 100%; max-width: var(--container-md); place-self: center; gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; @media (width < 768px) { padding-top: var(--spacing-inner); } & a { align-items: center; gap: calc(var(--spacing) * 2); display: inline-flex; } } @media (width >= 1024px) { margin-inline-start: calc(var(--spacing) * 0); & .main-head-contact-body { gap: var(--spacing-inner); flex-direction: row; } } } & .main-head-language { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 1); flex-shrink: 0; grid-area: language; display: inline-flex; } & .main-head-language, & .main-head-contact { & .main-head-contact-top-language-link { border-style: var(--tw-border-style); padding-inline: calc(var(--spacing) * 2.5); padding-block: calc(var(--spacing) * 1); --tw-leading: 1; --tw-font-weight: var(--font-weight-semibold); font-size: .8rem; line-height: 1; font-weight: var(--font-weight-semibold); text-transform: uppercase; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; border-width: 1px; border-color: currentColor; border-radius: 3.40282e38px; justify-content: center; align-items: center; text-decoration-line: none; transition-duration: .15s; display: inline-flex; @supports (color: color-mix(in lab, red, red)) { border-color: color-mix(in srgb, currentColor 14%, transparent); } background: none; &:hover, &:focus-visible { background: currentColor; @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, currentColor 9%, transparent); } } &.is-active { background: currentColor; @supports (color: color-mix(in lab, red, red)) { background: color-mix(in srgb, currentColor 16%, transparent); } } } } & .main-head-search { background-color: var(--hx-color-bg); grid-area: search; justify-content: flex-end; align-items: center; display: flex; & main h3 { color: var(--hx-color-fg); } & .main-head-search-body { width: 100%; max-width: var(--container-md); place-self: center; & .main-head-search-field { margin-bottom: calc(var(--spacing) * 0); } & input { background-color: var(--hx-color-bg); width: 100%; } @media (width >= 1320px) { & .main-head-search-field { width: 10rem; max-width: 100%; transition: width .2s; } & .main-head-search-field:focus-within { width: 100%; } } } } & .main-head-a11y { grid-area: a11y; justify-content: flex-end; align-items: center; display: flex; & > .dropdown { [data-comp-color="transparent"] &, [data-comp-contrast="low_contrast"] & { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); } background-color: var(--hx-color-bg); color: var(--hx-color-fg); & .fieldset-legend { color: var(--hx-color-fg); } & form-field input { background-color: var(--hx-color-bg); } } } & .main-head-nav { grid-area: nav; & > nav > .menu { flex-wrap: nowrap; max-width: 100%; display: flex; overflow-x: auto; } @media (width < 1024px) { margin-inline: calc(var(--spacing) * -2); & > nav > .menu { margin-inline: 0 !important; & > li > details > summary { &:before, &:after { display: none !important; } } } } @media (width >= 1024px) { & > nav > .menu { overflow-x: clip; } } } } .main-foot { padding-block: var(--spacing-section); @media (width >= 1024px) { padding-top: 44px; } & .main-foot-grid { grid-auto-flow: row; display: grid; & .main-foot-grid-top { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-gray-700); padding-bottom: calc(var(--spacing) * 8); grid-template-rows: auto auto; gap: 2.75rem; display: grid; @media (width >= 1024px) { grid-template-columns: 1fr 4fr; gap: 1rem; } } & .main-foot-grid-bottom { margin-top: calc(var(--spacing) * 5); grid-template-rows: auto auto; gap: 2.75rem; display: grid; & .main-foot-socials, & .main-foot-links { justify-content: center; gap: calc(var(--spacing) * 4); flex-wrap: wrap; display: flex; } @media (width >= 1024px) { justify-content: space-between; align-items: center; display: flex; & .main-foot-links a:not(:last-child) { border-right-style: var(--tw-border-style); border-right-width: 1px; border-right-color: var(--color-neutral-600); padding-right: calc(var(--spacing) * 6); } } } } } .main-foot[data-theme-mod="accent_secondary"] { color-scheme: dark; --root-bg: var(--color-secondary-600); --color-base-content: var(--color-secondary-content); --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } --hx-base-bg: var(--color-secondary-600); --hx-base-fg: var(--color-secondary-content); --hx-base-b: var(--color-secondary-content); --color-layer: #ffffff0d; & .main-foot-grid-top { border-bottom-color: var(--color-secondary-400); } & .main-foot-links a:not(:last-child) { border-right-color: var(--color-secondary-400); } } .main-foot.main-foot--preset { & .main-foot-grid { & .main-foot-grid-top { @media (width >= 1024px) { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); padding-bottom: 0; } } } & .main-foot-contact-info { margin-top: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 8); flex-direction: column; display: flex; @media (width >= 1024px) { flex-direction: row; align-items: flex-start; } } & .main-foot-contact-data { gap: calc(var(--spacing) * 1); flex-direction: column; display: flex; } & .main-foot-nav-grid { gap: calc(var(--spacing) * 4); flex-direction: column; justify-self: center; display: flex; } & .main-foot-nav-grid-item { padding-bottom: calc(var(--spacing) * 2); font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); } & .main-foot-preset-content { gap: calc(var(--spacing) * 8); flex-direction: column; display: flex; @media (width >= 1024px) { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2.75rem; display: grid; } } & .main-foot-preset-label { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } & .main-foot-preset-image { @media (width >= 1024px) { place-self: flex-start end; margin-top: -26px; } } } .main-foot-contact { & ul { margin-top: calc(var(--spacing) * 6); gap: calc(var(--spacing) * 6); flex-direction: column; display: flex; } } .main-foot-nav { & nav ul { grid-template-columns: repeat(2, 1fr); gap: 2.75rem; display: grid; @media (width >= 1024px) { grid-auto-flow: column; } & li details { & summary:after { display: none; } & summary { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-primary-600); border-radius: 0; & a { padding-top: calc(var(--spacing) * 0); padding-left: calc(var(--spacing) * 0); font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } } & .submenu { margin-inline-start: 0; & li a { padding-left: calc(var(--spacing) * 0); font-size: 1rem; } } } & li details > * { display: block; } } & nav > ul > li > a { height: calc(var(--spacing) * 9); border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-primary-600); padding-top: calc(var(--spacing) * 0); padding-left: calc(var(--spacing) * 0); font-size: var(--text-h6); line-height: var(--tw-leading, var(--text-h6--line-height)); font-weight: var(--tw-font-weight, var(--text-h6--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); border-radius: 0; } } .main-foot[data-theme-mod="accent_secondary"] .main-foot-nav { & nav ul { & li details { & summary { border-bottom-color: var(--color-secondary-400); } } } & nav > ul > li > a { border-bottom-color: var(--color-secondary-400); } } .main-foot[data-theme-mod="accent_secondary"] .main-foot-nav-grid > ul > div { border-bottom-color: var(--color-secondary-400); } .main-foot-nav-grid { grid-template-columns: repeat(2, 1fr); gap: 2.75rem; display: grid; @media (width >= 1024px) { grid-template-columns: auto .7fr auto; gap: 2.75rem; display: grid; } } .news-teaser { container: grid-item / inline-size; &-grid { display: grid; } &-title { & :where(h2, h3, h4, h5, h6) { display: inline-block; } } } .news-teaser.news-teaser-design-01 { border-inline-start-style: var(--tw-border-style); border-inline-start-width: 3px; border-inline-start-color: var(--color-primary-600); border-radius: 0; padding-inline-start: calc(var(--spacing) * 3); [data-theme-mod="accent"] & { border-inline-start-color: var(--hx-base-fg); } & .card-body { padding: calc(var(--spacing) * 0); } & .news-teaser-grid { gap: calc(var(--spacing) * 0); grid-template-rows: repeat(4, auto); grid-template-columns: 1fr; grid-template-areas: "date" "pills" "main" "footer"; display: grid; } & .news-teaser-thumb { grid-area: thumb; height: 100%; display: none; & img { border-radius: var(--radius-sm); object-fit: cover; width: 100%; height: 100%; } } & .news-teaser-date { align-items: flex-start; gap: calc(var(--spacing) * 2); font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); grid-area: date; display: flex; } & .news-teaser-pills { justify-content: flex-end; align-items: center; gap: calc(var(--spacing) * 1); flex-wrap: wrap; grid-area: pills; display: flex; & .badge { max-width: calc(var(--spacing) * 28); text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden; } } & .news-teaser-title { margin-top: calc(var(--spacing) * 1); font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); grid-area: main; } & .news-teaser-desc { margin-top: calc(var(--spacing) * 2); grid-area: footer; } @media (width >= 768px) { @container (width >= 350px) { & .news-teaser-grid { grid-template-rows: repeat(3, min-content); grid-template-columns: 1fr 1fr; grid-template-areas: "date pills" "main main" "footer footer"; &:has(.news-teaser-thumb) { grid-template-columns: 1fr 1fr 110px; grid-template-areas: "date pills thumb" "main main thumb" "footer footer thumb"; } } & .news-teaser-thumb { margin-inline-start: var(--spacing-content); display: block; } } } } .pagination { --join-ss: 0; --join-se: 0; --join-es: 0; --join-ee: 0; align-items: stretch; display: inline-flex; & :where(.join-item) { border-start-start-radius: var(--join-ss, 0); border-start-end-radius: var(--join-se, 0); border-end-end-radius: var(--join-ee, 0); border-end-start-radius: var(--join-es, 0); & * { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } & > .join-item:where(:first-child) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } & :first-child:not(:last-child) { & :where(.join-item) { --join-ss: var(--radius-field); --join-se: 0; --join-es: var(--radius-field); --join-ee: 0; } } & > .join-item:where(:last-child) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } & :last-child:not(:first-child) { & :where(.join-item) { --join-ss: 0; --join-se: var(--radius-field); --join-es: 0; --join-ee: var(--radius-field); } } & > .join-item:where(:only-child) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } & :only-child { & :where(.join-item) { --join-ss: var(--radius-field); --join-se: var(--radius-field); --join-es: var(--radius-field); --join-ee: var(--radius-field); } } border-radius: var(--radius-md); --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; display: grid; @media (width >= 1024px) { width: 50%; margin-inline: auto; } & button { z-index: 1; &:hover { z-index: 2; } &:focus { z-index: 3; } &:where(:not(:first-child, :disabled, [disabled], .btn-disabled)) { margin-block-start: 0; margin-inline-start: calc(var(--border, 1px) * -1); } &:where(:is(:disabled, [disabled], .btn-disabled)) { border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px); } padding-block: calc(var(--spacing) * 3); & a { justify-content: center; align-items: center; gap: calc(var(--spacing) * 2); --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); display: flex; } } & span { opacity: .5; margin: auto; } & button:nth-child(2) { & a { border-left-style: var(--tw-border-style); border-left-width: 1px; border-left-color: var(--color-neutral-300); } } } .page-outline { color: var(--color-base-content); flex-direction: column; display: flex; & .sub-outline { margin-top: calc(var(--spacing) * 1.5); } & .page-outline-section-title { & a { border-radius: var(--radius-md); width: 100%; height: 100%; padding: calc(var(--spacing) * 2); flex-wrap: wrap; align-items: center; display: flex; &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } &:focus { background-color: var(--color-gray-200); } &.active { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-primary-600); } [data-theme="dark"] & { &:hover { @media (hover: hover) { background-color: var(--color-gray-800); } } &:focus { background-color: var(--color-gray-800); } } [data-theme="black"] & { &:hover { @media (hover: hover) { background-color: var(--color-gray-900); } } &:focus { background-color: var(--color-gray-900); } } @media (width >= 1024px) { white-space: nowrap; text-overflow: ellipsis; width: 100%; display: block; overflow: hidden; } } &:has(ul) { & a { margin-bottom: calc(var(--spacing) * 1.5); } } &:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-gray-300); } & .sub-outline-item { padding-block: calc(var(--spacing) * 1.5); padding-left: calc(var(--spacing) * 5); &:not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; border-bottom-color: var(--color-gray-300); } &:last-child { padding-bottom: calc(var(--spacing) * 0); } &:first-child { border-top-style: var(--tw-border-style); border-top-width: 1px; border-top-color: var(--color-gray-300); } & a { border-radius: var(--radius-md); width: 100%; height: 100%; padding: calc(var(--spacing) * 2); flex-wrap: wrap; align-items: center; display: flex; &:hover { @media (hover: hover) { background-color: var(--color-gray-200); } } &:focus { background-color: var(--color-gray-200); } &.active { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); color: var(--color-primary-600); } @media (width >= 1024px) { white-space: nowrap; text-overflow: ellipsis; width: 100%; display: block; overflow: hidden; } } } } } .pageTeaser { &:focus, &:hover { & .card-title { text-decoration-line: underline; } } & svg { fill: none; flex-shrink: 0; } } .pageTeaser-design01 { --tw-shadow: 0px 1px 3px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))), 0px 1px 1px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 2px 1px -1px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))); height: 100%; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); & .pageTeaser-body { background-color: var(--hx-color-bg); color: var(--hx-color-fg); } &[data-comp-color="transparent"] { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); border-top-style: var(--tw-border-style); border-top-width: 3px; border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-600); } } a[href]& { &:focus, &:hover { background-color: #0000; } } [data-theme="dark"] & { --hx-color-bg: var(--color-gray-900); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-300); } } } [data-theme="black"] & { --hx-color-bg: var(--color-gray-950); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-200); } } } [data-theme="dark"] [data-theme-mod="alternate"] & { --hx-color-bg: var(--color-gray-950); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-200); } } } [data-theme="black"] [data-theme="alternate"] & { --hx-color-bg: var(--color-gray-900); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-300); } } } [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-700); --hx-color-fg: var(--hx-accent-fg); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--hx-accent-fg); } } } [data-theme="dark"] [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-200); } [data-theme="black"] [data-theme-mod="accent"] & { --hx-color-bg: var(--color-primary-300); } [data-theme-mod="inverted"] & { --hx-color-bg: var(--hx-base-bg); --hx-color-fg: var(--hx-base-fg); border-top-color: #0000; &:hover { @media (hover: hover) { border-top-color: var(--color-primary-600); } } } } } .section-inner:has(.section-body .promo) { background-color: var(--hx-color-bg); color: var(--hx-color-fg); } .promo { isolation: isolate; z-index: 0; width: 100%; position: relative; overflow: hidden; & .promo-img, & .promo-bg { inset: calc(var(--spacing) * 0); z-index: calc(10 * -1); object-fit: cover; width: 100%; height: 100%; position: absolute; } & .promo-img { object-position: 50% 30%; --tw-brightness: brightness(50%); filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, ); } & .promo-content { z-index: 10; justify-content: center; align-items: center; gap: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 6); text-align: center; flex-direction: column; display: flex; position: relative; & > :empty { display: none; } } & .promo-img + .promo-content { & .section-head-title, & .promo-content-article { color: var(--color-accent-content); } } & .promo-bg + .promo-content { & .section-head-title, & .promo-content-article { color: var(--hx-color-fg); } } } .section { padding-block: var(--spacing-section); } .section-head { margin-bottom: var(--spacing-inner); } .section-head-grid { grid-template-columns: 1fr auto; display: grid; } .section-head-title { font-size: var(--text-h3); line-height: var(--tw-leading, var(--text-h3--line-height)); font-weight: var(--tw-font-weight, var(--text-h3--font-weight)); } .section-head-subtitle { margin-block: calc(var(--spacing) * 3); font-size: var(--text-body-large); line-height: var(--tw-leading, var(--text-body-large--line-height)); font-weight: var(--tw-font-weight, var(--text-body-large--font-weight)); } .section-head-link { align-items: center; gap: calc(var(--spacing) * 1); display: flex; } .section-content-highlighted { border-radius: var(--radius-md); border-width: 1px; border-style: var(--tw-border-style); border-width: 2px; border-color: var(--color-primary-600); padding: var(--spacing-inner); } aside .section { margin-bottom: var(--spacing-outer); padding: calc(var(--spacing) * 0); &:first-child { margin-top: var(--spacing-outer); } & .section-inner { border-radius: var(--radius-md); background-color: var(--hx-base-bg); --tw-shadow: 0px 3px 1px -2px var(--tw-shadow-color, rgba(0, 0, 0, calc(.1 * var(--elevation-intensity)))), 0px 2px 2px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.08 * var(--elevation-intensity)))), 0px 1px 5px 0px var(--tw-shadow-color, rgba(0, 0, 0, calc(.06 * var(--elevation-intensity)))); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); overflow: hidden; } & .section-head { margin-bottom: calc(var(--spacing) * 0); background-color: var(--color-primary-700); padding: calc(var(--spacing) * 3); [data-theme="dark"] &, [data-theme="black"] & { background-color: var(--color-primary-300); } & .section-head-title { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); color: var(--color-gray-50); } } & .section-body { padding-inline: calc(var(--spacing) * 3); padding-block: calc(var(--spacing) * 4); [data-theme="dark"] & { background-color: var(--color-gray-900); } } @media (width >= 1024px) { margin-bottom: var(--spacing-inner); } & .section-inner:has(.section-body quick-links) { --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); background-image: none; & .section-head { padding-top: calc(var(--spacing) * 4); padding-bottom: calc(var(--spacing) * 0); background-color: #0000; } } } #post_header .section:has(.promo) { padding-top: 0; & subgrid-container { padding-inline: calc(var(--spacing) * 0); grid-column: 1 / -1; } } #post_header:has(.promo) .main-hero { margin-bottom: 0; } .quicklink { display: block; & .quicklink-grid { gap: var(--spacing-content); display: grid; } & .quicklink-image { grid-area: icon; } & .quicklink-title { grid-area: body; & :where(h2, h3, h4, h5, h6) { display: inline-block; } } } .quicklink-design-01 { height: 100%; & .quicklink-grid { gap: calc(var(--spacing) * 2); grid-template: "icon" 44px "body" / 1fr; justify-content: center; height: 100%; display: grid; & .quicklink-image { justify-self: center; & img { margin-top: calc(var(--spacing) * -3); height: 64px; [data-theme-mod="accent"] &, [data-theme="light"] [data-comp-contrast="high_contrast"] & { filter: brightness(0) invert(); } :is([data-theme="dark"], [data-theme="black"]) [data-comp-contrast="high_contrast"] & { filter: brightness(0); } :is([data-theme="dark"], [data-theme="black"]) [data-comp-color="neutral"][data-comp-contrast="high_contrast"] & { filter: brightness(0) opacity(.6); } } } & .quicklink-title { text-align: center; font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); place-self: center; } } @container (width >= 400px) { padding: calc(var(--spacing) * 0); & .quicklink-grid { grid-template: "icon body" min-content / auto auto; & .quicklink-image { & img { margin-top: calc(var(--spacing) * 0); object-fit: contain; } } } } } .quicklink-design-02 { height: 100%; & .card-body { padding: calc(var(--spacing) * 1); } & .quicklink-grid { gap: calc(var(--spacing) * 1); padding: calc(var(--spacing) * 1); grid-template: "icon body" min-content / 32px auto; display: grid; } & .quicklink-title { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); align-self: center; } } .quicklinks { gap: var(--spacing-content); flex-wrap: wrap; display: flex; } .section:has(block-text) subgrid-container .section-inner { background-color: var(--hx-color-bg); color: var(--hx-color-fg); } .prose { max-width: 100%; color: var(--hx-color-fg); & img { border-radius: var(--radius-sm); object-fit: cover; } @media (width >= 1024px) { & img.display-left, & img.display-right { width: 210px; height: 210px; } & img.display-left { float: left; margin-inline-end: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 6); } & img.display-right { float: right; margin-inline-start: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 6); } & img.display-top { float: none; margin-inline: auto; } } } .timeline-block { width: 100%; display: block; & .timeline { width: 100%; padding-top: calc(var(--spacing) * 6); position: relative; } & .timeline li { gap: calc(var(--spacing) * 4); } @media (width < 768px) { & .timeline.timeline-vertical > li { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; } & .timeline.timeline-vertical > li > hr:first-child, & .timeline.timeline-vertical > li > hr:last-child, & .timeline.timeline-vertical .timeline-middle { grid-column: 1 / 2; justify-self: center; } & .timeline.timeline-vertical .timeline-start, & .timeline.timeline-vertical .timeline-end { grid-area: 1 / 2 / 4 / 3; justify-self: stretch; } } & .timeline hr { background-color: var(--color-neutral-200); } & .timeline-middle { z-index: 10; color: var(--color-primary-600); justify-content: center; align-self: center; align-items: center; display: flex; } & .timeline-middle-line { align-self: stretch; } & .timeline-middle-line-fill { background-color: var(--color-neutral-200); width: 1px; height: 100%; min-height: 100%; display: block; } & .timeline-icon { justify-content: center; align-items: center; display: flex; & img { width: 2rem; height: 2rem; } } & .timeline-box { border-radius: var(--radius-box); border-style: var(--tw-border-style); border-width: 1px; border-color: var(--color-base-300); background-color: var(--color-base-100); width: 100%; max-width: none; padding-inline: calc(var(--spacing) * 5); padding-block: calc(var(--spacing) * 4); --tw-shadow: 0 0 #0000; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } & .timeline-item-title { font-size: var(--text-h5); line-height: var(--tw-leading, var(--text-h5--line-height)); font-weight: var(--tw-font-weight, var(--text-h5--font-weight)); --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } & .timeline-item-content { margin-top: calc(var(--spacing) * 2); max-width: none; font-size: var(--text-body); line-height: var(--tw-leading, var(--text-body--line-height)); font-weight: var(--tw-font-weight, var(--text-body--font-weight)); & > :first-child { margin-top: calc(var(--spacing) * 0); } & > :last-child { margin-bottom: calc(var(--spacing) * 0); } } } } :root { --current-breakpoint: default; @media (width >= 480px) { --current-breakpoint: sm; } @media (width >= 768px) { --current-breakpoint: md; } @media (width >= 1024px) { --current-breakpoint: lg; } @media (width >= 1320px) { --current-breakpoint: xl; } @media (width >= 1536px) { --current-breakpoint: 2xl; } } [data-theme="light"], [data-theme="dark"] [data-theme-mod="inverted"] { color-scheme: light; --root-bg: #fff; --color-base-content: #292929; } @container style(--hx-theme: dark) { [data-theme="inverse"] { color-scheme: light; --root-bg: #fff; --color-base-content: #292929; } } [data-theme="dark"], [data-theme="black"], [data-theme="light"] [data-theme-mod="inverted"], [data-theme="light"] [data-theme-mod="accent"] { color-scheme: dark; --root-bg: #252224; --color-base-content: white; } @container style(--hx-theme: light) { [data-theme="inverse"] { color-scheme: dark; --root-bg: #252224; --color-base-content: white; } } [data-theme="light"] [data-theme-mod="alternate"] { --root-bg: #f0eaed; } [data-theme="light"] [data-theme-mod="accent"] { --root-bg: var(--color-primary-600); } [data-theme="dark"] [data-theme-mod="alternate"] { --root-bg: #000; } [data-theme="dark"] [data-theme-mod="accent"] { --root-bg: var(--color-primary-300); } [data-theme="black"], [data-theme="black"] [data-theme-mod="always_dark"] { --root-bg: #000; } [data-theme="black"] [data-theme-mod="alternate"] { --root-bg: #252224; } [data-theme="black"] [data-theme-mod="accent"] { --root-bg: var(--color-primary-200); } [data-theme-mod="default"] { --root-bg: var(--hx-base-bg); } :root { --hx-base-bg: #fff; --hx-base-fg: #0a0a0a; --edge-spacing: 1rem; --hx-color-b: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-color-b: color-mix(in hsl, currentColor 35%, transparent); } --hx-color-b-focus: currentColor; @supports (color: color-mix(in lab, red, red)) { --hx-color-b-focus: color-mix(in hsl, currentColor 35%, transparent); } --hx-outline: #06f; --hx-outline-offset: 2px; --hx-outline-size: 2px; --brand-radius-sm: .25rem; --brand-radius: .5rem; --brand-radius-lg: 1rem; --hx-radius: var(--brand-radius); } :root, [data-theme="dark"] [data-theme="light"], [data-theme="black"] [data-theme="light"] { --hx-color-active: var(--brand-active); --hx-color-fg-active: var(--brand-active-text, var(--hx-color-active)); --hx-color-bg-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg-active: color-mix(in oklch, var(--hx-color-active) 10%, transparent); } --hx-color-b-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-b-active: color-mix(in oklch, var(--hx-color-active) 50%, transparent); } } @container style(--hx-theme: dark) { [data-theme="dark"] [data-theme="inverse"], [data-theme="black"] [data-theme="inverse"] { --hx-color-active: var(--brand-active); --hx-color-fg-active: var(--brand-active-text, var(--hx-color-active)); --hx-color-bg-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg-active: color-mix(in oklch, var(--hx-color-active) 10%, transparent); } --hx-color-b-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-b-active: color-mix(in oklch, var(--hx-color-active) 50%, transparent); } } } [data-theme="dark"], [data-theme="black"] { --hx-color-active: var(--brand-active-on-dark); --hx-color-fg-active: var(--hx-color-active); --hx-color-bg-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg-active: color-mix(in oklch, var(--hx-color-active) 10%, transparent); } --hx-color-b-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-b-active: color-mix(in oklch, var(--hx-color-active) 50%, transparent); } } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-color-active: var(--brand-active-on-dark); --hx-color-fg-active: var(--hx-color-active); --hx-color-bg-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg-active: color-mix(in oklch, var(--hx-color-active) 10%, transparent); } --hx-color-b-active: var(--hx-color-active); @supports (color: color-mix(in lab, red, red)) { --hx-color-b-active: color-mix(in oklch, var(--hx-color-active) 50%, transparent); } } } @media (width >= 480px) { :root { --edge-spacing: 1.25rem; } } @media (width >= 768px) { :root { --edge-spacing: 1.5rem; } } @media (width >= 1024px) { :root { --edge-spacing: 2rem; } } :root { --brand-active: var(--color-active, currentColor); --brand-active-text: var(--color-active-text); --brand-active-on-dark: var(--color-active-on-dark, var(--brand-active)); } .btn, .input, .select, .textarea { font-size: 1rem; } .btn-xs, .input-xs, .select-xs, .textarea-xs { font-size: .75rem; } .btn-sm, .input-sm, .select-sm, .textarea-sm { font-size: .875rem; } .btn-md, .input-md, .select-md, .textarea-md { font-size: 1rem; } .btn-lg, .input-lg, .select-lg, .textarea-lg { font-size: 1.125rem; } .btn-xl, .input-xl, .select-xl, .textarea-xl { font-size: 1.25rem; } .btn { --size: 3rem; gap: .5rem; } .btn-xs { --size: 1.5rem; } .btn-sm { --size: 2rem; } .btn-md { --size: 3rem; } .btn-lg { --size: 4rem; --btn-p: 1.5rem; } .btn-xl { --size: 5rem; } .btn-wide { --btn-p: 2rem; width: auto; max-width: none; } .btn-xs.btn-wide { --btn-p: 1rem; } .btn-sm.btn-wide { --btn-p: 1.5rem; } .btn-md.btn-wide { --btn-p: 2rem; } .btn-lg.btn-wide { --btn-p: 2.5rem; } .btn-xl.btn-wide { --btn-p: 3rem; } :root, :host { --color-primary: var(--color-primary-600); --color-primary-content: white; } [data-theme="dark"] { --color-primary-50: oklch(.05 calc(.1 * var(--c)) var(--h)); --color-primary-100: oklch(.1 calc(.2 * var(--c)) var(--h)); --color-primary-200: oklch(.2 calc(.4 * var(--c)) var(--h)); --color-primary-300: oklch(.3 calc(.6 * var(--c)) var(--h)); --color-primary-400: oklch(.4 calc(.8 * var(--c)) var(--h)); --color-primary-500: oklch(.5 calc(1 * var(--c)) var(--h)); --color-primary-600: oklch(.6 calc(.75 * var(--c)) var(--h)); --color-primary-700: oklch(.72 calc(.45 * var(--c)) var(--h)); --color-primary-800: oklch(.85 calc(.2 * var(--c)) var(--h)); --color-primary-900: oklch(.92 calc(.1 * var(--c)) var(--h)); --color-primary-950: oklch(.98 calc(var(--c) / 30) var(--h)); --color-primary-content: black; } @container style(--hx-theme: light) { [data-theme="inverse"] { --color-primary-50: oklch(.05 calc(.1 * var(--c)) var(--h)); --color-primary-100: oklch(.1 calc(.2 * var(--c)) var(--h)); --color-primary-200: oklch(.2 calc(.4 * var(--c)) var(--h)); --color-primary-300: oklch(.3 calc(.6 * var(--c)) var(--h)); --color-primary-400: oklch(.4 calc(.8 * var(--c)) var(--h)); --color-primary-500: oklch(.5 calc(1 * var(--c)) var(--h)); --color-primary-600: oklch(.6 calc(.75 * var(--c)) var(--h)); --color-primary-700: oklch(.72 calc(.45 * var(--c)) var(--h)); --color-primary-800: oklch(.85 calc(.2 * var(--c)) var(--h)); --color-primary-900: oklch(.92 calc(.1 * var(--c)) var(--h)); --color-primary-950: oklch(.98 calc(var(--c) / 30) var(--h)); --color-primary-content: black; } } [data-theme="black"] { --color-primary-50: oklch(.05 calc(.1 * var(--c)) var(--h)); --color-primary-100: oklch(.1 calc(.2 * var(--c)) var(--h)); --color-primary-200: oklch(.2 calc(.4 * var(--c)) var(--h)); --color-primary-300: oklch(.3 calc(.6 * var(--c)) var(--h)); --color-primary-400: oklch(.4 calc(.8 * var(--c)) var(--h)); --color-primary-500: oklch(.5 calc(1 * var(--c)) var(--h)); --color-primary-600: oklch(.3 calc(.6 * var(--c)) var(--h)); --color-primary-700: oklch(.72 calc(.45 * var(--c)) var(--h)); --color-primary-800: oklch(.85 calc(.2 * var(--c)) var(--h)); --color-primary-900: oklch(.92 calc(.1 * var(--c)) var(--h)); --color-primary-950: oklch(.98 calc(var(--c) / 30) var(--h)); --color-primary-content: black; } [data-theme="dark"] { --color-secondary-50: oklch(.05 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-100: oklch(.1 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-200: oklch(.2 calc(.4 * var(--c-secondary)) var(--h-secondary)); --color-secondary-300: oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)); --color-secondary-400: oklch(.4 calc(.8 * var(--c-secondary)) var(--h-secondary)); --color-secondary-500: oklch(.5 calc(1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-600: oklch(.6 calc(.75 * var(--c-secondary)) var(--h-secondary)); --color-secondary-700: oklch(.72 calc(.45 * var(--c-secondary)) var(--h-secondary)); --color-secondary-800: oklch(.85 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-900: oklch(.92 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-950: oklch(.98 calc(var(--c-secondary) / 30) var(--h-secondary)); } @container style(--hx-theme: light) { [data-theme="inverse"] { --color-secondary-50: oklch(.05 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-100: oklch(.1 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-200: oklch(.2 calc(.4 * var(--c-secondary)) var(--h-secondary)); --color-secondary-300: oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)); --color-secondary-400: oklch(.4 calc(.8 * var(--c-secondary)) var(--h-secondary)); --color-secondary-500: oklch(.5 calc(1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-600: oklch(.6 calc(.75 * var(--c-secondary)) var(--h-secondary)); --color-secondary-700: oklch(.72 calc(.45 * var(--c-secondary)) var(--h-secondary)); --color-secondary-800: oklch(.85 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-900: oklch(.92 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-950: oklch(.98 calc(var(--c-secondary) / 30) var(--h-secondary)); } } [data-theme="black"] { --color-secondary-50: oklch(.05 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-100: oklch(.1 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-200: oklch(.2 calc(.4 * var(--c-secondary)) var(--h-secondary)); --color-secondary-300: oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)); --color-secondary-400: oklch(.4 calc(.8 * var(--c-secondary)) var(--h-secondary)); --color-secondary-500: oklch(.5 calc(1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-600: oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)); --color-secondary-700: oklch(.72 calc(.45 * var(--c-secondary)) var(--h-secondary)); --color-secondary-800: oklch(.85 calc(.2 * var(--c-secondary)) var(--h-secondary)); --color-secondary-900: oklch(.92 calc(.1 * var(--c-secondary)) var(--h-secondary)); --color-secondary-950: oklch(.98 calc(var(--c-secondary) / 30) var(--h-secondary)); } :root { --hx-base-bg: white; --hx-base-fg: black; --hx-base-b: black; --color-layer: #0000000d; } [data-theme="dark"] { --hx-base-bg: #252224; --hx-base-fg: white; --hx-base-b: white; --color-layer: #ffffff0d; } @container style(--hx-theme: light) { [data-theme="inverse"] { --hx-base-bg: #252224; --hx-base-fg: white; --hx-base-b: white; --color-layer: #ffffff0d; } } [data-theme="black"] { --hx-base-bg: black; --hx-base-fg: white; --hx-base-b: white; --color-layer: #ffffff0d; } [data-theme="light"] [data-theme-mod="inverted"] { --hx-base-bg: #252224; --hx-base-fg: white; --hx-base-b: white; --color-layer: #ffffff0d; --color-base-content: white; --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } } [data-theme="dark"] [data-theme-mod="inverted"] { --hx-base-bg: white; --hx-base-fg: black; --hx-base-b: black; --color-layer: #0000000d; --color-base-content: black; --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } } [data-theme="light"] [data-theme-mod="accent"] { --hx-base-bg: var(--color-primary-600); --hx-base-fg: white; --hx-base-b: white; --color-base-content: white; --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } } [data-theme="light"] [data-theme-mod="always_dark"] { --hx-base-bg: #252224; --hx-base-fg: white; --hx-base-b: white; --color-base-content: white; --color-base-content-mid: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-mid: color-mix(in lab, var(--color-base-content), transparent 20%); } --color-base-content-low: var(--color-base-content); @supports (color: color-mix(in lab, red, red)) { --color-base-content-low: color-mix(in lab, var(--color-base-content), transparent 40%); } } :root, :host { --color-secondary: var(--color-secondary-600); --color-secondary-content: white; } [data-theme="dark"] { --color-secondary-content: black; } @container style(--hx-theme: light) { [data-theme="inverse"] { --color-secondary-content: black; } } [data-theme="black"] { --color-secondary-content: black; } :root { --color-accent: var(--color-primary-500); --color-accent-content: white; } [data-theme="dark"] { --color-accent-content-mid: var(--color-accent-content); @supports (color: color-mix(in lab, red, red)) { --color-accent-content-mid: color-mix(in lab, var(--color-accent-content), transparent 20%); } --color-accent-content-low: var(--color-accent-content); @supports (color: color-mix(in lab, red, red)) { --color-accent-content-low: color-mix(in lab, var(--color-accent-content), transparent 40%); } } @container style(--hx-theme: light) { [data-theme="inverse"] { --color-accent-content-mid: var(--color-accent-content); @supports (color: color-mix(in lab, red, red)) { --color-accent-content-mid: color-mix(in lab, var(--color-accent-content), transparent 20%); } --color-accent-content-low: var(--color-accent-content); @supports (color: color-mix(in lab, red, red)) { --color-accent-content-low: color-mix(in lab, var(--color-accent-content), transparent 40%); } } } [data-theme="black"] { --color-accent: var(--color-primary-100); --color-accent-content: white; } :root, :host { --color-success: #00b628; --color-success-content: white; --color-error: #dc0000; --color-error-content: white; --color-base-content: black; } [data-theme="dark"] { --color-base-content: white; } @container style(--hx-theme: light) { [data-theme="inverse"] { --color-base-content: white; } } [data-theme="light"] [data-theme-mod="inverted"] { --color-base-content: white; } [data-theme="dark"] [data-theme-mod="inverted"] { --color-base-content: black; } [data-theme="light"] [data-theme-mod="accent"], [data-theme="black"] [data-theme-mod="accent"] { --color-base-content: white; } [data-theme="black"] { --color-base-100: var(--hx-base-bg); @supports (color: color-mix(in lab, red, red)) { --color-base-100: color-mix(in lab, var(--hx-base-bg), white 10%); } --color-base-200: var(--hx-base-bg); @supports (color: color-mix(in lab, red, red)) { --color-base-200: color-mix(in lab, var(--hx-base-bg), white 20%); } --color-base-300: var(--hx-base-bg); @supports (color: color-mix(in lab, red, red)) { --color-base-300: color-mix(in lab, var(--hx-base-bg), white 30%); } --color-base-content: white; } :where([data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-comp-color="neutral"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-base-fg); --hx-color-bg: color-mix(in srgb, color-mix(in lab, #545454 100%, var(--color-primary-800) 10%) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-gray-800) 20%, transparent); } } :where([data-theme="dark"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme="dark"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"], :where([data-theme="black"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme="black"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-base-fg); --hx-color-bg: var(--color-gray-800); } :where([data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-100); --hx-color-bg: var(--color-gray-800); } :where([data-theme="dark"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme="dark"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"], :where([data-theme="black"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme="black"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-800); --hx-color-bg: var(--color-gray-100); } :where([data-comp-color="primary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-comp-color="primary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-primary-content); --hx-color-bg: var(--color-primary-700); } :where([data-comp-color="primary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-comp-color="primary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-primary-800); --hx-color-bg: color-mix(in srgb, oklch(.3 calc(.6 * var(--c)) var(--h)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-primary-700) 20%, transparent); } } :where([data-comp-color="secondary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-comp-color="secondary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-secondary-content); --hx-color-bg: var(--color-secondary-700); } :where([data-comp-color="secondary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-comp-color="secondary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-secondary-800); --hx-color-bg: color-mix(in srgb, oklch(.3 calc(.6 * var(--c-secondary)) var(--h-secondary)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-secondary-700) 20%, transparent); } } :where([data-comp-color="transparent"]) .hx-ds, [data-comp-color="transparent"] { --hx-color-fg: var(--hx-base-fg); --hx-color-bg: transparent; } :where([data-theme-mod="alternate"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-gray-800); --hx-color-bg: color-mix(in srgb, color-mix(in lab, #545454 100%, var(--color-primary-800) 10%) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-gray-800) 35%, transparent); } } :where([data-theme-mod="alternate"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-100); --hx-color-bg: var(--color-gray-800); } :where([data-theme-mod="alternate"] [data-comp-color="primary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="primary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-primary-content); --hx-color-bg: var(--color-primary-800); } :where([data-theme-mod="alternate"] [data-comp-color="primary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="primary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-primary-900); --hx-color-bg: color-mix(in srgb, oklch(.2 calc(.4 * var(--c)) var(--h)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-primary-800) 20%, transparent); } } :where([data-theme-mod="alternate"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-secondary-content); --hx-color-bg: var(--color-secondary-800); } :where([data-theme-mod="alternate"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="alternate"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-secondary-900); --hx-color-bg: color-mix(in srgb, oklch(.2 calc(.4 * var(--c-secondary)) var(--h-secondary)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-secondary-800) 20%, transparent); } } :where([data-theme-mod="accent"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-gray-100); --hx-color-bg: color-mix(in srgb, color-mix(in lab, #f5f5f5 100%, var(--color-primary-100) 10%) 35%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-gray-100) 35%, transparent); } } :where([data-theme-mod="accent"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-900); --hx-color-bg: var(--color-gray-100); } :where([data-theme-mod="accent"] [data-comp-color="primary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="primary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-primary-800); --hx-color-bg: var(--color-primary-100); } :where([data-theme-mod="accent"] [data-comp-color="primary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="primary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-primary-content); --hx-color-bg: color-mix(in srgb, oklch(.92 calc(.1 * var(--c)) var(--h)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-primary-100) 20%, transparent); } } :where([data-theme-mod="accent"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-secondary-800); --hx-color-bg: var(--color-secondary-100); } :where([data-theme-mod="accent"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="accent"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-secondary-content); --hx-color-bg: color-mix(in srgb, oklch(.92 calc(.1 * var(--c-secondary)) var(--h-secondary)) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-secondary-100) 20%, transparent); } } :where([data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-gray-100); --hx-color-bg: color-mix(in srgb, color-mix(in lab, #545454 100%, var(--color-primary-800) 10%) 20%, transparent); @supports (color: color-mix(in lab, red, red)) { --hx-color-bg: color-mix(in lab, var(--color-gray-800) 20%, transparent); } } :where([data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-900); --hx-color-bg: var(--color-gray-100); } :where([data-theme="dark"] [data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme="dark"] [data-theme-mod="inverted"] [data-comp-color="neutral"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-gray-100); --hx-color-bg: var(--color-gray-900); } :where([data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-primary-900); --hx-color-bg: var(--color-primary-300); } :where([data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-primary-100); --hx-color-bg: var(--color-primary-700); } :where([data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-primary-content); --hx-color-bg: var(--color-primary-800); } :where([data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="primary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-primary-100); --hx-color-bg: var(--color-primary-200); } :where([data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-secondary-900); --hx-color-bg: var(--color-secondary-100); } :where([data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"]) .hx-ds, [data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="high_contrast"] { --hx-color-fg: var(--color-secondary-100); --hx-color-bg: var(--color-secondary-900); } :where([data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-secondary-content); --hx-color-bg: var(--color-secondary-800); } :where([data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"]) .hx-ds, [data-theme="black"] [data-theme-mod="inverted"] [data-comp-color="secondary"][data-comp-contrast="low_contrast"] { --hx-color-fg: var(--color-secondary-900); --hx-color-bg: var(--color-secondary-200); } .btn { --size: calc(var(--size-field, .25rem) * 10); font-size: .875rem; line-height: normal; } .btn-xs { font-size: .6875rem; } .btn-sm { font-size: .75rem; } .btn-lg { --size: calc(var(--size-field, .25rem) * 12); } @property --hx-mask-left { syntax: ""; inherits: true; initial-value: 0; } @property --hx-mask-right { syntax: ""; inherits: true; initial-value: 0; } .hx [v-if]:not([data-hx-visible]), .hx [data-hx-hidden], [v-cloak] { display: none !important; } .hx [v-show]:not([data-hx-visible]) { visibility: hidden !important; pointer-events: none !important; position: absolute !important; } turbo { &-frame { transition-property: opacity; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .3s; transition-duration: .3s; display: block; position: relative; &[busy] { opacity: .25; --tw-duration: .7s; transition-duration: .7s; } } } @keyframes rating { 0%, 40% { filter: brightness(1.05) contrast(1.05); scale: 1.1; } } @keyframes dropdown { 0% { opacity: 0; } } @keyframes radio { 0% { padding: 5px; } 50% { padding: 3px; } } @keyframes toast { 0% { opacity: 0; scale: .9; } 100% { opacity: 1; scale: 1; } } @keyframes skeleton { 0% { background-position: 150%; } 100% { background-position: -50%; } } @keyframes progress { 50% { background-position-x: -115%; } } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-scroll-snap-strictness { syntax: "*"; inherits: false; initial-value: proximity; } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-ordinal { syntax: "*"; inherits: false } @property --tw-slashed-zero { syntax: "*"; inherits: false } @property --tw-numeric-figure { syntax: "*"; inherits: false } @property --tw-numeric-spacing { syntax: "*"; inherits: false } @property --tw-numeric-fraction { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-blur { syntax: "*"; inherits: false } @property --tw-brightness { syntax: "*"; inherits: false } @property --tw-contrast { syntax: "*"; inherits: false } @property --tw-grayscale { syntax: "*"; inherits: false } @property --tw-hue-rotate { syntax: "*"; inherits: false } @property --tw-invert { syntax: "*"; inherits: false } @property --tw-opacity { syntax: "*"; inherits: false } @property --tw-saturate { syntax: "*"; inherits: false } @property --tw-sepia { syntax: "*"; inherits: false } @property --tw-drop-shadow { syntax: "*"; inherits: false } @property --tw-drop-shadow-color { syntax: "*"; inherits: false } @property --tw-drop-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-drop-shadow-size { syntax: "*"; inherits: false } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-content { syntax: "*"; inherits: false; initial-value: ""; } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-tracking { syntax: "*"; inherits: false }