/* Generated by castomo-sitekit tools/flatten.mjs from the artwork-parallax component libraries. Do not edit: change the component upstream, then flatten again. Every rule below is the component's own shadow-DOM CSS, rewritten to apply to
with no shadow boundary. */ /* NESTED RULES NOT FLATTENED: :host-context([data-motion="reduce"]), :host([data-motion="reduce"]), :host-context([data-motion="none"]), :host([data-motion="none"]) */ @keyframes transhumans-art-transhumans-pop { 0% { scale: 0; } 100% { scale: 1; } } @keyframes transhumans-art-transhumans-wiggle { 30% { rotate: -7deg; scale: 1.06; } 65% { rotate: 5deg; } } @keyframes transhumans-badge-grid-item-bump { 0% { scale: 0.88; } 55% { scale: 1.08; } 100% { scale: 1; } } @keyframes transhumans-badge-grid-item-wait { 50% { scale: 1.05; } } @keyframes transhumans-badge-grid-item-ring { 0% { scale: 0.6; opacity: 0.9; } 100% { scale: 1.45; opacity: 0; } } @keyframes transhumans-badge-grid-item-chip { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0deg); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) rotate(var(--s)); } } @keyframes transhumans-badge-grid-item-draw { 0% { stroke-dashoffset: 14; } } .cui-transhumans-badge-grid, .cui-transhumans-badge-grid-item { --_ink: var(--noodle-ink, var(--ink, #16151a)); --_muted: var(--noodle-muted, var(--ink-2, var(--ink-3, #5d5b66))); --_surface: var(--noodle-surface, var(--paper, #ffffff)); --_paper: var(--noodle-paper, var(--paper-2, #f7f4ee)); --_border: var(--noodle-border, var(--rule, #e7e3da)); --_radius: var(--noodle-radius, var(--radius, 20px)); --_accent: var(--noodle-accent, var(--accent, var(--brand-1, var(--slot-1, #f953b2)))); --_accent-2: var(--noodle-accent-2, var(--brand-2, var(--slot-0, #6966ed))); --_accent-3: var(--noodle-accent-3, var(--brand-3, var(--slot-2, #f4d13b))); --_on-accent: var(--noodle-on-accent, var(--on-fill, var(--btn-fg, var(--accent-ink, #fff)))); --_accent-text: var(--noodle-accent-text, oklch(from var(--_accent-2) min(l, 0.46) c h)); --_accent-fg: oklch(from var(--_accent) min(l, 0.46) c h); --_accent-2-fg: oklch(from var(--_accent-2) min(l, 0.46) c h); --_accent-3-fg: oklch(from var(--_accent-3) min(l, 0.46) c h); --_on-accent-auto: color(from var(--_accent) srgb clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1)); --_on-accent-2: color(from var(--_accent-2) srgb clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1)); --_on-accent-3: color(from var(--_accent-3) srgb clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1) clamp(0, (0.179 - (0.2126 * pow(r, 2.2) + 0.7152 * pow(g, 2.2) + 0.0722 * pow(b, 2.2))) * 100000, 1)); --_spring: cubic-bezier(0.34, 1.56, 0.64, 1); --_tint: var(--noodle-tint, color-mix(in srgb, var(--_accent) 12%, var(--_surface))); --_wash: 1; --_shadow: var(--noodle-shadow, var(--shadow, 0 1px 2px rgb(22 21 26 / 0.06), 0 18px 40px -18px rgb(22 21 26 / 0.28))); --_ease: cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--noodle-font, inherit); color: var(--_ink); box-sizing: border-box; direction: inherit; text-align: start; overflow-wrap: anywhere; } .cui-transhumans-badge-grid *, .cui-transhumans-badge-grid ::before, .cui-transhumans-badge-grid ::after, .cui-transhumans-badge-grid-item *, .cui-transhumans-badge-grid-item ::before, .cui-transhumans-badge-grid-item ::after { box-sizing: border-box; } .cui-transhumans-badge-grid :focus-visible, .cui-transhumans-badge-grid-item :focus-visible { outline: 3px solid var(--_accent-2); outline-offset: 3px; } [data-theme$="dark"] .cui-transhumans-badge-grid, .cui-transhumans-badge-grid[data-theme$="dark"], [data-theme$="dark"] .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item[data-theme$="dark"] { --_ink: var(--noodle-ink-dark, var(--ink, #e8eaee)); --_muted: var(--noodle-muted-dark, var(--ink-2, #b4b8c6)); --_surface: var(--noodle-surface-dark, var(--paper-2, #14161d)); --_paper: var(--noodle-paper-dark, #0b0c10); --_border: var(--noodle-border-dark, var(--rule, #262a36)); --_shadow: var(--noodle-shadow-dark, var(--shadow, 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .8))); --_accent-text: var(--noodle-accent-text-dark, oklch(from var(--_accent-2) max(l, 0.74) c h)); --_accent-fg: oklch(from var(--_accent) max(l, 0.8) c h); --_accent-2-fg: oklch(from var(--_accent-2) max(l, 0.8) c h); --_accent-3-fg: oklch(from var(--_accent-3) max(l, 0.8) c h); --_art-ink: #f1f0f4; --_art-paper: #1d1c22; --_wash: 0.3; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .cui-transhumans-badge-grid, :root:not([data-theme]) .cui-transhumans-badge-grid-item { --_ink: var(--noodle-ink-dark, var(--ink, #e8eaee)); --_muted: var(--noodle-muted-dark, var(--ink-2, #b4b8c6)); --_surface: var(--noodle-surface-dark, var(--paper-2, #14161d)); --_paper: var(--noodle-paper-dark, #0b0c10); --_border: var(--noodle-border-dark, var(--rule, #262a36)); --_shadow: var(--noodle-shadow-dark, var(--shadow, 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -16px rgba(0, 0, 0, .8))); --_accent-text: var(--noodle-accent-text-dark, oklch(from var(--_accent-2) max(l, 0.74) c h)); --_accent-fg: oklch(from var(--_accent) max(l, 0.8) c h); --_accent-2-fg: oklch(from var(--_accent-2) max(l, 0.8) c h); --_accent-3-fg: oklch(from var(--_accent-3) max(l, 0.8) c h); --_art-ink: #f1f0f4; --_art-paper: #1d1c22; --_wash: 0.3; color-scheme: dark; } } [data-theme="contrast"] .cui-transhumans-badge-grid, .cui-transhumans-badge-grid[data-theme="contrast"], [data-theme="contrast"] .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item[data-theme="contrast"] { --_ink: #000000; --_muted: #000000; --_surface: #ffffff; --_paper: #ffffff; --_border: var(--rule, #000000); --_accent: #000000; --_accent-2: #000000; --_accent-3: #000000; --_accent-text: #000000; --_on-accent: #ffffff; --_shadow: none; --_radius: 0px; --_wash: 0; color-scheme: light; } @media (prefers-contrast: more) { :root:not([data-theme]) .cui-transhumans-badge-grid, :root:not([data-theme]) .cui-transhumans-badge-grid-item { --_shadow: none; --_border: 2px solid currentColor; } } [data-theme="contrast-dark"] .cui-transhumans-badge-grid, .cui-transhumans-badge-grid[data-theme="contrast-dark"], [data-theme="contrast-dark"] .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item[data-theme="contrast-dark"] { --_ink: #ffffff; --_muted: #ffffff; --_surface: #000000; --_paper: #000000; --_border: var(--rule, #ffffff); --_accent: #ffffff; --_accent-2: #ffffff; --_accent-3: #ffffff; --_accent-text: #ffffff; --_on-accent: #000000; --_shadow: none; --_radius: 0px; --_wash: 0; color-scheme: dark; } @media (forced-colors: active) { .cui-transhumans-badge-grid, .cui-transhumans-badge-grid-item { --_surface: Canvas; --_paper: Canvas; --_ink: CanvasText; --_muted: CanvasText; --_border: CanvasText; --_accent: Highlight; --_accent-2: Highlight; --_accent-3: Highlight; --_accent-text: Highlight; --_on-accent: HighlightText; --_shadow: none; --_radius: 0px; } } [data-skin="flat"] .cui-transhumans-badge-grid, .cui-transhumans-badge-grid[data-skin="flat"], [data-motion="none"] .cui-transhumans-badge-grid, .cui-transhumans-badge-grid[data-motion="none"], [data-skin="flat"] .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item[data-skin="flat"], [data-motion="none"] .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item[data-motion="none"] { --_radius: 0px !important; --_shadow: none !important; animation: auto ease 0s 1 normal none running none !important; transition: none !important; } .cui-transhumans-badge-grid:dir(rtl), .cui-transhumans-badge-grid [dir="rtl"], .cui-transhumans-badge-grid-item:dir(rtl), .cui-transhumans-badge-grid-item [dir="rtl"] { text-align: start; direction: rtl; } .cui-transhumans-badge-grid [data-icon]::after, .cui-transhumans-badge-grid-item [data-icon]::after { content: ""; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; margin-inline-start: 0.45em; vertical-align: -0.15em; background: currentcolor; mask: var(--_glyph) center / contain no-repeat; transition: rotate 0.45s var(--_ease, ease), translate 0.3s var(--_ease, ease), scale 0.3s var(--_ease, ease); } .cui-transhumans-badge-grid [data-icon="reset"], .cui-transhumans-badge-grid-item [data-icon="reset"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="reset"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="reset"]:is(:hover, :focus-visible)::after { rotate: -300deg; } .cui-transhumans-badge-grid [data-icon="next"], .cui-transhumans-badge-grid-item [data-icon="next"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="next"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="next"]:is(:hover, :focus-visible)::after { translate: 3px; } .cui-transhumans-badge-grid:dir(rtl) [data-icon="next"]::after, [dir="rtl"] .cui-transhumans-badge-grid [data-icon="next"]::after, .cui-transhumans-badge-grid [dir="rtl"] [data-icon="next"]::after, .cui-transhumans-badge-grid-item:dir(rtl) [data-icon="next"]::after, [dir="rtl"] .cui-transhumans-badge-grid-item [data-icon="next"]::after, .cui-transhumans-badge-grid-item [dir="rtl"] [data-icon="next"]::after { transform: scaleX(-1); } .cui-transhumans-badge-grid:dir(rtl) [data-icon="next"]:is(:hover, :focus-visible)::after, [dir="rtl"] .cui-transhumans-badge-grid [data-icon="next"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid [dir="rtl"] [data-icon="next"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item:dir(rtl) [data-icon="next"]:is(:hover, :focus-visible)::after, [dir="rtl"] .cui-transhumans-badge-grid-item [data-icon="next"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [dir="rtl"] [data-icon="next"]:is(:hover, :focus-visible)::after { translate: -3px; } .cui-transhumans-badge-grid [data-icon="toggle"], .cui-transhumans-badge-grid-item [data-icon="toggle"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="toggle"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="toggle"]:is(:hover, :focus-visible)::after { rotate: 90deg; } .cui-transhumans-badge-grid [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]), .cui-transhumans-badge-grid-item [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):is(:hover, :focus-visible)::after { rotate: 0deg; scale: 1.2; } .cui-transhumans-badge-grid [data-icon="play"], .cui-transhumans-badge-grid-item [data-icon="play"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black' stroke='none'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="play"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="play"]:is(:hover, :focus-visible)::after { scale: 1.2; } .cui-transhumans-badge-grid [data-icon="pause"], .cui-transhumans-badge-grid-item [data-icon="pause"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5v14M15.5 5v14'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="pause"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="pause"]:is(:hover, :focus-visible)::after { scale: 1.2; } .cui-transhumans-badge-grid [data-icon="grid"], .cui-transhumans-badge-grid-item [data-icon="grid"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="grid"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="grid"]:is(:hover, :focus-visible)::after { rotate: 90deg; } .cui-transhumans-badge-grid [data-icon="plus"], .cui-transhumans-badge-grid-item [data-icon="plus"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="plus"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="plus"]:is(:hover, :focus-visible)::after { rotate: 90deg; } .cui-transhumans-badge-grid [data-icon="spark"], .cui-transhumans-badge-grid-item [data-icon="spark"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v5M12 16v5M3 12h5M16 12h5M6 6l2.8 2.8M15.2 15.2L18 18M6 18l2.8-2.8M15.2 8.8L18 6'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="spark"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="spark"]:is(:hover, :focus-visible)::after { rotate: 45deg; scale: 1.15; } .cui-transhumans-badge-grid [data-icon="calendar"], .cui-transhumans-badge-grid-item [data-icon="calendar"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M4 10.5h16M9 3.5v4M15 3.5v4'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="calendar"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="calendar"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } .cui-transhumans-badge-grid [data-icon="chat"], .cui-transhumans-badge-grid-item [data-icon="chat"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14v10H10.5L6 19.5v-4H5z'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="chat"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="chat"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } .cui-transhumans-badge-grid [data-icon="close"], .cui-transhumans-badge-grid-item [data-icon="close"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="close"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="close"]:is(:hover, :focus-visible)::after { rotate: 90deg; } .cui-transhumans-badge-grid [data-icon="check"], .cui-transhumans-badge-grid-item [data-icon="check"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="check"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="check"]:is(:hover, :focus-visible)::after { scale: 1.2; } .cui-transhumans-badge-grid [data-icon="send"], .cui-transhumans-badge-grid-item [data-icon="send"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L20 4l-6.5 16-2.5-6.5z'/%3E%3Cpath d='M11 13.5L20 4'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="send"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="send"]:is(:hover, :focus-visible)::after { translate: 2px -2px; } .cui-transhumans-badge-grid [data-icon="search"], .cui-transhumans-badge-grid-item [data-icon="search"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="search"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="search"]:is(:hover, :focus-visible)::after { scale: 1.15; } .cui-transhumans-badge-grid [data-icon="cart"], .cui-transhumans-badge-grid-item [data-icon="cart"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h2.5l2 10.5h10.5l2-7.5H6.8'/%3E%3Ccircle cx='9' cy='19.5' r='1.2'/%3E%3Ccircle cx='17' cy='19.5' r='1.2'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="cart"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="cart"]:is(:hover, :focus-visible)::after { translate: 3px; } .cui-transhumans-badge-grid [data-icon="mail"], .cui-transhumans-badge-grid-item [data-icon="mail"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="mail"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="mail"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } .cui-transhumans-badge-grid [data-icon="download"], .cui-transhumans-badge-grid-item [data-icon="download"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="download"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="download"]:is(:hover, :focus-visible)::after { translate: 0px 2px; } .cui-transhumans-badge-grid [data-icon="share"], .cui-transhumans-badge-grid-item [data-icon="share"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4M5 13v6.5h14V13'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="share"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="share"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } .cui-transhumans-badge-grid [data-icon="lock"], .cui-transhumans-badge-grid-item [data-icon="lock"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="lock"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="lock"]:is(:hover, :focus-visible)::after { scale: 1.15; } .cui-transhumans-badge-grid [data-icon="pin"], .cui-transhumans-badge-grid-item [data-icon="pin"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.8-6.5-11a6.5 6.5 0 0 1 13 0c0 5.2-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="pin"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="pin"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } .cui-transhumans-badge-grid [data-icon="bell"], .cui-transhumans-badge-grid-item [data-icon="bell"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15zM10 20.5h4'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="bell"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="bell"]:is(:hover, :focus-visible)::after { rotate: 14deg; } .cui-transhumans-badge-grid [data-icon="back"], .cui-transhumans-badge-grid-item [data-icon="back"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); } .cui-transhumans-badge-grid [data-icon="back"]::after, .cui-transhumans-badge-grid-item [data-icon="back"]::after { order: -1; margin-inline: 0px 0.45em; } .cui-transhumans-badge-grid [data-icon="back"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [data-icon="back"]:is(:hover, :focus-visible)::after { translate: -3px; } .cui-transhumans-badge-grid [dir="rtl"] [data-icon="back"]::after, .cui-transhumans-badge-grid-item [dir="rtl"] [data-icon="back"]::after { transform: scaleX(-1); } .cui-transhumans-badge-grid [dir="rtl"] [data-icon="back"]:is(:hover, :focus-visible)::after, .cui-transhumans-badge-grid-item [dir="rtl"] [data-icon="back"]:is(:hover, :focus-visible)::after { translate: 3px; } @media (prefers-reduced-motion: reduce) { .cui-transhumans-badge-grid, .cui-transhumans-badge-grid *, .cui-transhumans-badge-grid ::before, .cui-transhumans-badge-grid ::after, .cui-transhumans-badge-grid-item, .cui-transhumans-badge-grid-item *, .cui-transhumans-badge-grid-item ::before, .cui-transhumans-badge-grid-item ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .cui-transhumans-badge-grid, .cui-transhumans-badge-grid-item { --_accent: var(--noodle-accent, var(--slot-0, #c81e45)); --_accent-2: var(--slot-1, #006b7d); --_accent-3: var(--slot-2, #e8fafd); --_on-accent: var(--noodle-on-accent, var(--on-fill, var(--btn-fg, var(--_on-accent-auto)))); } .cui-transhumans-badge-grid, .cui-transhumans-badge-grid-item { display: block; } .cui-transhumans-art { --_dx: 0; --_dy: 0; --_ax: 0; --_ay: 0; display: block; position: relative; aspect-ratio: 1 / 1; } .cui-transhumans-art[hidden], .cui-transhumans-badge-grid[hidden], .cui-transhumans-badge-grid-item[hidden] { display: none; } [data-theme$="dark"] .cui-transhumans-art { --_art-ink: #f1f0f4; --_art-paper: #1d1c22; --_art-line: #f1f0f4; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .cui-transhumans-art { --_art-ink: #f1f0f4; --_art-paper: #1d1c22; --_art-line: #f1f0f4; } } .cui-transhumans-art[mono] { --_mono: var(--transhumans-ink, var(--_art-ink, #16151a)); } .cui-transhumans-art svg { position: absolute; inset: 0px; display: block; width: 100%; height: 100%; overflow: visible; scale: var(--cmo-art-size, 1); translate: calc(var(--_dx) * 1px) calc(var(--_dy) * 1px); transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .cui-transhumans-art [part~="accent"] { transform-box: fill-box; transform-origin: center center; translate: calc(var(--_ax) * (0.6 + var(--r) * 0.8) * 1px) calc(var(--_ay) * (0.6 + var(--r) * 0.8) * 1px); transition: translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .cui-transhumans-art .cui-art-placeholder { position: absolute; inset: 22% 26%; border-radius: 40%; background: var(--transhumans-placeholder, rgb(22 21 26 / 0.04)); } .cui-transhumans-art[replaying] *, .cui-transhumans-art[replaying] ::before { transition: none !important; } .cui-transhumans-art[pop]:not([popped]) [part~="accent"] { scale: 0; } .cui-transhumans-art[popped] [part~="accent"] { animation: transhumans-art-transhumans-pop 0.7s cubic-bezier(0.34, 1.7, 0.5, 1) calc(0.12s + var(--i) * min(0.08s, 1.2s / var(--n))) both; } .cui-transhumans-art[wiggling] [part~="accent"] { animation: transhumans-art-transhumans-wiggle 0.55s ease-in-out calc(var(--i) * 0.03s); } @media (prefers-reduced-motion: reduce) { .cui-transhumans-art[pop]:not([popped]) [part~="accent"] { scale: 1; } } @media (prefers-reduced-motion: reduce) { .cui-transhumans-art[popped] [part~="accent"], .cui-transhumans-art[wiggling] [part~="accent"] { animation: auto ease 0s 1 normal none running none; } } @media (prefers-reduced-motion: reduce) { .cui-transhumans-art svg, .cui-transhumans-art [part~="accent"] { transition: none; translate: none; } } @media (prefers-reduced-motion: reduce) { [data-icon]::after { transition: none !important; } } [data-icon]::after { content: ""; display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; margin-inline-start: 0.45em; vertical-align: -0.15em; background: currentcolor; mask: var(--_glyph) center / contain no-repeat; transition: rotate 0.45s var(--_ease, ease), translate 0.3s var(--_ease, ease), scale 0.3s var(--_ease, ease); } [data-icon="reset"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4'/%3E%3C/svg%3E"); } [data-icon="reset"]:is(:hover, :focus-visible)::after { rotate: -300deg; } [data-icon="next"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } [data-icon="next"]:is(:hover, :focus-visible)::after { translate: 3px; } :host(:dir(rtl)) [data-icon="next"]::after, :host-context([dir="rtl"]) [data-icon="next"]::after, [dir="rtl"] [data-icon="next"]::after { transform: scaleX(-1); } :host(:dir(rtl)) [data-icon="next"]:is(:hover, :focus-visible)::after, :host-context([dir="rtl"]) [data-icon="next"]:is(:hover, :focus-visible)::after, [dir="rtl"] [data-icon="next"]:is(:hover, :focus-visible)::after { translate: -3px; } [data-icon="toggle"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } [data-icon="toggle"]:is(:hover, :focus-visible)::after { rotate: 90deg; } [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } [data-icon="toggle"]:is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]):is(:hover, :focus-visible)::after { rotate: 0deg; scale: 1.2; } [data-icon="play"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black' stroke='none'/%3E%3C/svg%3E"); } [data-icon="play"]:is(:hover, :focus-visible)::after { scale: 1.2; } [data-icon="pause"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 5v14M15.5 5v14'/%3E%3C/svg%3E"); } [data-icon="pause"]:is(:hover, :focus-visible)::after { scale: 1.2; } [data-icon="grid"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E"); } [data-icon="grid"]:is(:hover, :focus-visible)::after { rotate: 90deg; } [data-icon="plus"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } [data-icon="plus"]:is(:hover, :focus-visible)::after { rotate: 90deg; } [data-icon="spark"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v5M12 16v5M3 12h5M16 12h5M6 6l2.8 2.8M15.2 15.2L18 18M6 18l2.8-2.8M15.2 8.8L18 6'/%3E%3C/svg%3E"); } [data-icon="spark"]:is(:hover, :focus-visible)::after { rotate: 45deg; scale: 1.15; } [data-icon="calendar"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2'/%3E%3Cpath d='M4 10.5h16M9 3.5v4M15 3.5v4'/%3E%3C/svg%3E"); } [data-icon="calendar"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } [data-icon="chat"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5.5h14v10H10.5L6 19.5v-4H5z'/%3E%3C/svg%3E"); } [data-icon="chat"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } [data-icon="close"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); } [data-icon="close"]:is(:hover, :focus-visible)::after { rotate: 90deg; } [data-icon="check"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } [data-icon="check"]:is(:hover, :focus-visible)::after { scale: 1.2; } [data-icon="send"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5L20 4l-6.5 16-2.5-6.5z'/%3E%3Cpath d='M11 13.5L20 4'/%3E%3C/svg%3E"); } [data-icon="send"]:is(:hover, :focus-visible)::after { translate: 2px -2px; } [data-icon="search"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E"); } [data-icon="search"]:is(:hover, :focus-visible)::after { scale: 1.15; } [data-icon="cart"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h2.5l2 10.5h10.5l2-7.5H6.8'/%3E%3Ccircle cx='9' cy='19.5' r='1.2'/%3E%3Ccircle cx='17' cy='19.5' r='1.2'/%3E%3C/svg%3E"); } [data-icon="cart"]:is(:hover, :focus-visible)::after { translate: 3px; } [data-icon="mail"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); } [data-icon="mail"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } [data-icon="download"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E"); } [data-icon="download"]:is(:hover, :focus-visible)::after { translate: 0px 2px; } [data-icon="share"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4M5 13v6.5h14V13'/%3E%3C/svg%3E"); } [data-icon="share"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } [data-icon="lock"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } [data-icon="lock"]:is(:hover, :focus-visible)::after { scale: 1.15; } [data-icon="pin"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.8-6.5-11a6.5 6.5 0 0 1 13 0c0 5.2-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3C/svg%3E"); } [data-icon="pin"]:is(:hover, :focus-visible)::after { translate: 0px -2px; } [data-icon="bell"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 1.5h-15zM10 20.5h4'/%3E%3C/svg%3E"); } [data-icon="bell"]:is(:hover, :focus-visible)::after { rotate: 14deg; } [data-icon="back"] { --_glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); } [data-icon="back"]::after { order: -1; margin-inline: 0px 0.45em; } [data-icon="back"]:is(:hover, :focus-visible)::after { translate: -3px; } [dir="rtl"] [data-icon="back"]::after { transform: scaleX(-1); } [dir="rtl"] [data-icon="back"]:is(:hover, :focus-visible)::after { translate: 3px; } .cui-transhumans-badge-grid a:not([class]), .cui-transhumans-badge-grid .cui-badge-grid-link { color: var(--_accent-text); font-weight: 600; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentcolor, currentcolor) 0px 100% / 10px 2px no-repeat; transition: background-size 0.45s var(--_spring); } .cui-transhumans-badge-grid a:not([class]):is(:hover, :focus-visible), .cui-transhumans-badge-grid .cui-badge-grid-link:is(:hover, :focus-visible) { background-size: 100% 2px; } .cui-transhumans-badge-grid .cui-badge-grid-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; } .cui-transhumans-badge-grid .cui-badge-grid-label { margin: 0px; font-weight: 700; font-size: 16px; } .cui-transhumans-badge-grid .cui-badge-grid-count { margin: 0px 0px 0px auto; color: var(--_muted); font-size: 14px; font-variant-numeric: tabular-nums; } .cui-transhumans-badge-grid .cui-badge-grid-bar { flex: 1 0 100%; height: 12px; border-radius: 999px; background: var(--_surface); box-shadow: inset 0 0 0 2px var(--_ink); overflow: hidden; } .cui-transhumans-badge-grid .cui-badge-grid-fill { height: 100%; border-radius: inherit; transform-origin: 0px 50%; scale: var(--_p, 0) 1; background: var(--_accent-2); box-shadow: inset 0 0 0 2px var(--_ink); transition: scale 0.8s var(--_ease); } .cui-transhumans-badge-grid .cui-badge-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 14px; } .cui-transhumans-badge-grid .cui-badge-grid-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cui-transhumans-badge-grid-item a:not([class]), .cui-transhumans-badge-grid-item .cui-badge-grid-item-link { color: var(--_accent-text); font-weight: 600; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentcolor, currentcolor) 0px 100% / 10px 2px no-repeat; transition: background-size 0.45s var(--_spring); } .cui-transhumans-badge-grid-item a:not([class]):is(:hover, :focus-visible), .cui-transhumans-badge-grid-item .cui-badge-grid-item-link:is(:hover, :focus-visible) { background-size: 100% 2px; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-badge { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 16px 14px 18px; border-radius: var(--_radius); background: var(--_surface); box-shadow: inset 0 0 0 1px var(--_border); text-align: center; outline: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-badge:focus-visible { outline: 3px solid var(--_accent-2); outline-offset: 3px; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-medal { position: relative; width: min(100%, 136px); aspect-ratio: 1 / 1; margin-bottom: 10px; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-disc { position: absolute; inset: 3%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--_ink) 24%, transparent); transition: background-color 0.6s var(--_ease), border-color 0.6s var(--_ease); } .cui-transhumans-badge-grid-item[ready] .cui-badge-grid-item-disc, .cui-transhumans-badge-grid-item[unlocked] .cui-badge-grid-item-disc { border: 2.5px solid var(--_ink); background: var(--_surface); } .cui-transhumans-badge-grid-item[unlocked] .cui-badge-grid-item-disc { background: color-mix(in srgb, var(--_accent-2) 12%, var(--_surface)); } .cui-transhumans-badge-grid-item .cui-transhumans-art { position: absolute; inset: 8%; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-sketch { filter: grayscale(1); opacity: 0.32; } .cui-transhumans-badge-grid-item[ready] .cui-badge-grid-item-sketch, .cui-transhumans-badge-grid-item[unlocked] .cui-badge-grid-item-sketch { display: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-play .cui-badge-grid-item-full { animation: 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running transhumans-badge-grid-item-bump; } .cui-transhumans-badge-grid-item[ready]:not([unlocked]) .cui-badge-grid-item-disc { animation: 1.8s ease-in-out 0s infinite normal none running transhumans-badge-grid-item-wait; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-ring { position: absolute; inset: 3%; border-radius: 50%; border: 3px solid var(--_accent); opacity: 0; pointer-events: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-play .cui-badge-grid-item-ring { animation: transhumans-badge-grid-item-ring 0.7s var(--_ease); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-chips i { position: absolute; left: 50%; top: 50%; width: 10px; height: 7px; margin: -3.5px -5px; border-radius: 3px; background: var(--_c); box-shadow: 0 0 0 1.5px var(--_ink); opacity: 0; pointer-events: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-play .cui-badge-grid-item-chips i { animation: transhumans-badge-grid-item-chip 0.85s var(--_ease) calc(var(--i) * 16ms); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-lock { position: absolute; right: 0px; bottom: 0px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--_surface); color: var(--_muted); box-shadow: 0 0 0 1px var(--_border); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-lock svg { width: 14px; height: 14px; } .cui-transhumans-badge-grid-item[unlocked] .cui-badge-grid-item-lock, .cui-transhumans-badge-grid-item[ready] .cui-badge-grid-item-lock { display: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-text { flex: 1 1 0%; } .cui-transhumans-badge-grid-item h3.cui-slotted-badge-grid-item { margin: 0px 0px 4px; font-size: 16px; line-height: 1.25; } .cui-transhumans-badge-grid-item p.cui-slotted-badge-grid-item { margin: 0px; color: var(--_muted); font-size: 13.5px; line-height: 1.45; } .cui-transhumans-badge-grid-item:not([unlocked]):not([ready]) .cui-badge-grid-item-text { opacity: 0.88; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-status { margin-top: 10px; font-size: 12.5px; font-weight: 650; color: var(--_muted); } .cui-transhumans-badge-grid-item[unlocked] .cui-badge-grid-item-status { color: var(--_accent-2-fg); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 40px; padding: 0px 16px 0px 18px; border: 0px; border-radius: 999px; cursor: pointer; background: var(--_ink); color: var(--_surface); font: 600 14px/1 var(--noodle-font, inherit); transition: background-color 0.3s var(--_ease); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim:hover { background: color-mix(in srgb, var(--_ink) 80%, var(--_accent)); } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim[hidden] { display: none; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim svg { width: 15px; height: 15px; overflow: visible; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim .cui-badge-grid-item-tick { stroke-dasharray: 14; stroke-dashoffset: 0; } .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim:hover .cui-badge-grid-item-tick, .cui-transhumans-badge-grid-item .cui-badge-grid-item-claim:focus-visible .cui-badge-grid-item-tick { animation: transhumans-badge-grid-item-draw 0.5s var(--_ease); } .cui-s-15z8bsy.cui-s-15z8bsy.cui-s-15z8bsy { --_p: 0.667; } .cui-s-3cnwdw.cui-s-3cnwdw.cui-s-3cnwdw { --i:0;--a:9deg;--d:-66px;--s:-120deg;--_c:var(--_accent-2) } .cui-s-7ha95p.cui-s-7ha95p.cui-s-7ha95p { --i:1;--a:39deg;--d:-78px;--s:140deg;--_c:var(--_accent) } .cui-s-6qq1kd.cui-s-6qq1kd.cui-s-6qq1kd { --i:2;--a:69deg;--d:-90px;--s:-160deg;--_c:var(--_accent-2) } .cui-s-14hiz9y.cui-s-14hiz9y.cui-s-14hiz9y { --i:3;--a:99deg;--d:-66px;--s:180deg;--_c:var(--_accent) } .cui-s-1588dul.cui-s-1588dul.cui-s-1588dul { --i:4;--a:129deg;--d:-78px;--s:-200deg;--_c:var(--_accent-2) } .cui-s-18ntzhp.cui-s-18ntzhp.cui-s-18ntzhp { --i:5;--a:159deg;--d:-90px;--s:220deg;--_c:var(--_accent) } .cui-s-1lupnsu.cui-s-1lupnsu.cui-s-1lupnsu { --i:6;--a:189deg;--d:-66px;--s:-240deg;--_c:var(--_accent-2) } .cui-s-dlt4a.cui-s-dlt4a.cui-s-dlt4a { --i:7;--a:219deg;--d:-78px;--s:260deg;--_c:var(--_accent) } .cui-s-bue0ca.cui-s-bue0ca.cui-s-bue0ca { --i:8;--a:249deg;--d:-90px;--s:-280deg;--_c:var(--_accent-2) } .cui-s-146v7t6.cui-s-146v7t6.cui-s-146v7t6 { --i:9;--a:279deg;--d:-66px;--s:300deg;--_c:var(--_accent) } .cui-s-1wj437v.cui-s-1wj437v.cui-s-1wj437v { --i:10;--a:309deg;--d:-78px;--s:-320deg;--_c:var(--_accent-2) } .cui-s-gmkhej.cui-s-gmkhej.cui-s-gmkhej { --i:11;--a:339deg;--d:-90px;--s:340deg;--_c:var(--_accent) } .cui-s-xxxfdt.cui-s-xxxfdt.cui-s-xxxfdt { --_art-ink: #f1f0f4; --_art-paper: #1d1c22; --_art-line: #f1f0f4; }