/* Uthena theme bundle: uthena-tokens, uthena-fonts, uthena-base, uthena-components, uthena-empty-states, uthena-consent, uthena-style, uthena-product, uthena-marketing, uthena-catalog, uthena-cookie-notice, uthena-child-style, uthena-search-suggest */
/* uthena-tokens */

:root {
--teal-500: #1abc9c;
--orange-500: #f07419;
--amber-500: #f7b733;
--teal-700: #0f7a66; --teal-600: #15a085; --teal-400: #4ecdb4; --teal-300: #7bdac6; --teal-200: #a8e6d9; --teal-050: #e8f9f5;
--orange-700: #b0500b; --orange-600: #d66311; --orange-400: #f4964f; --orange-300: #f7b183; --orange-200: #fbd2ab; --orange-050: #fef1e6;
--amber-800: #8a5f0c; --amber-700: #b07c14; --amber-600: #e0a223; --amber-400: #fac764; --amber-300: #fbd68f; --amber-200: #fce3aa; --amber-050: #fef7e8;
--illus-teal: #1a9e8a;
--illus-teal-fill: #d8f3ee;
--illus-amber: #f5a623;
--illus-amber-fill: #fbd68f;
--illus-grey: #8d8d8c;
--white: #ffffff;
--black: #000000;
--slate-050: #f1f7f8;
--slate-100: #e3eef0;
--slate-200: #cbdbde;
--slate-300: #a8bdc2;
--slate-400: #8099a0;
--slate-500: #5c7a82;
--slate-600: #3d585f;
--slate-700: #2a4046;
--slate-800: #1d2d32;
--slate-850: #162327;
--slate-900: #101a1d;
--slate-950: #0b1113;
--teal-900: #0f2e29;
--amber-900: #2e2412;
--orange-900: #2a1a10;
--text-strong: var(--white);
--text-body: var(--slate-100);
--text-secondary: var(--slate-200);
--text-muted: var(--slate-400);
--text-faint: var(--slate-500);
--text-on-accent: var(--slate-950);
--text-on-secondary: var(--slate-950);
--text-on-dark: var(--white);
--text-on-dark-muted: var(--slate-400);
--text-link: var(--teal-300);
--text-link-hover: var(--teal-200);
--text-identity: var(--teal-400);
--text-price: var(--white);
--text-price-sale: var(--orange-400);
--text-saving: var(--amber-400);
--text-action: var(--orange-400);
--surface-page: var(--slate-950);
--surface-subtle: var(--slate-900);
--surface-sunken: var(--slate-850);
--surface-card: var(--slate-900);
--surface-raised: var(--slate-850);
--surface-inset: var(--slate-800);
--surface-dark: var(--slate-850);
--surface-announce: var(--slate-850);
--surface-identity: var(--teal-900);
--surface-identity-solid: var(--teal-600);
--surface-highlight: var(--amber-900);
--surface-selected: var(--teal-900);
--surface-inverse: var(--slate-050);
--surface-skeleton: var(--slate-800);
--text-on-inverse: var(--slate-950);
--border-subtle: var(--slate-800);
--border-default: var(--slate-700);
--border-strong: var(--slate-600);
--border-dashed: var(--slate-600);
--border-focus: var(--orange-500);
--border-selected: var(--teal-500);
--action-primary: var(--orange-500);
--action-primary-hover: var(--orange-400);
--action-primary-active: var(--orange-600);
--action-secondary: var(--teal-500);
--action-secondary-hover: var(--teal-400);
--action-secondary-active: var(--teal-600);
--action-ghost-hover: var(--slate-850);
--action-ghost-active: var(--slate-800);
--action-disabled: var(--slate-800);
--action-disabled-text: var(--slate-500);
--success-500: var(--teal-400);  --success-050: var(--teal-900);
--warning-500: var(--amber-400); --warning-050: var(--amber-900);
--danger-500: var(--orange-400); --danger-050: var(--orange-900);
--danger-border: var(--orange-600);
--info-500: var(--teal-300);     --info-050: var(--slate-850);
--rating-star: var(--amber-500);
--rating-track: var(--slate-700);
--badge-sale-bg: var(--orange-500);
--badge-plr-bg: var(--teal-900);
--badge-plr-text: var(--teal-300);
--badge-mrr-bg: var(--amber-900);
--badge-mrr-text: var(--amber-300);
--overlay-scrim: rgba(0, 0, 0, .66);
--player-surface: var(--black);
--selection-bg: var(--teal-700);
--selection-text: var(--white);
--neutral-025: var(--slate-050); --neutral-050: var(--slate-100); --neutral-100: var(--slate-200);
--neutral-200: var(--slate-300); --neutral-300: var(--slate-400); --neutral-400: var(--slate-500);
--neutral-500: var(--slate-600); --neutral-600: var(--slate-700); --neutral-700: var(--slate-800);
--neutral-800: var(--slate-900); --neutral-900: var(--slate-950);
--font-display: Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: Assistant, system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
--type-display-1: clamp(2rem, 1.2rem + 2.6vw, 3rem);
--type-display-2: clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem);
--type-display-3: clamp(1.5rem, 1.38rem + 0.4vw, 1.75rem);
--type-display-4: 1.375rem;
--type-display-5: 1.125rem;
--type-body-lg: 1.125rem;
--type-body: 1.0625rem;
--type-body-sm: 0.9375rem;
--type-caption: 0.8125rem;
--type-micro: 0.6875rem;
--type-mono: 0.875rem;
--weight-display: 600;
--weight-display-1: 800;
--weight-body: 400;
--weight-strong: 600;
--leading-display: 1.15;
--leading-heading: 1.25;
--leading-body: 1.6;
--leading-ui: 1.3;
--tracking-display: -0.02em;
--tracking-heading: -0.01em;
--tracking-caps: 0.08em;
--space-05: 4px;
--space-1: 8px;
--space-15: 12px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-section: var(--space-6);
--space-gutter: var(--space-2);
--uthena-w-catalog: 1280px;
--uthena-w-product: 1120px;
--uthena-w-portal: 960px;
--uthena-w-reading: 720px;
--uthena-w-form: 480px;
--uthena-measure: 66ch;
--uthena-portal-nav: 264px;
--uthena-header-h: 72px;
--uthena-z-header: 800;
--uthena-z-overlay: 850;
--uthena-z-toast: 900;
--uthena-radius-xs: 4px;
--uthena-radius-sm: 6px;
--uthena-radius-md: 10px;
--uthena-radius-lg: 16px;
--uthena-radius-xl: 24px;
--uthena-radius-pill: 999px;
--uthena-shadow-hairline: 0 1px 0 rgba(0, 0, 0, .35);
--uthena-shadow-card: 0 2px 8px rgba(0, 0, 0, .45);
--uthena-shadow-card-hover: 0 12px 32px rgba(0, 0, 0, .6);
--uthena-shadow-pop: 0 24px 64px rgba(0, 0, 0, .66);
--uthena-shadow-input: inset 0 1px 2px rgba(0, 0, 0, .45);
--uthena-focus-ring: 0 0 0 3px rgba(240, 116, 25, .42);
--uthena-ease: cubic-bezier(.2, .6, .3, 1);
--uthena-dur-hover: 150ms;
--uthena-dur-default: 200ms;
--uthena-dur-modal: 250ms;
color-scheme: dark;
}
:root:root {
--wp--preset--color--background: var(--surface-page);
--wp--preset--color--foreground: var(--text-body);
--wp--preset--color--strong: var(--text-strong);
--wp--preset--color--muted: var(--text-muted);
--wp--preset--color--link: var(--text-link);
--wp--preset--color--surface: var(--surface-card);
--wp--preset--color--surface-sunken: var(--surface-sunken);
--wp--preset--color--surface-inset: var(--surface-inset);
--wp--preset--color--border: var(--border-subtle);
--wp--preset--color--identity: var(--action-secondary);
--wp--preset--color--identity-panel: var(--surface-identity);
--wp--preset--color--action: var(--action-primary);
--wp--preset--color--amber: var(--amber-500);
--wp--preset--color--on-action: var(--text-on-accent);
--wp--preset--color--on-identity: var(--slate-950);
--wp--preset--color--on-surface: var(--text-body);
--wp--preset--color--inverse: var(--surface-inverse);
--wp--preset--color--on-inverse: var(--text-on-inverse);
}
@media (min-width: 768px) {
:root {
--space-section: var(--space-8);
--space-gutter: var(--space-3);
}
}
@media (min-width: 1024px) {
:root {
--space-section: var(--space-12);
--space-gutter: var(--space-4);
}
}
[data-theme="light"] {
color-scheme: light;
--text-strong: var(--slate-950);
--text-body: var(--slate-800);
--text-secondary: var(--slate-700);
--text-muted: var(--slate-600);
--text-faint: var(--slate-500);
--text-on-accent: var(--slate-950);
--text-on-secondary: var(--white);
--text-on-dark: var(--white);
--text-on-dark-muted: var(--slate-300);
--text-link: var(--teal-700);
--text-link-hover: var(--slate-950);
--text-identity: var(--teal-700);
--text-price: var(--slate-950);
--text-price-sale: var(--orange-700);
--text-saving: var(--amber-800);
--text-action: var(--orange-700);
--surface-page: var(--white);
--surface-subtle: var(--slate-050);
--surface-sunken: var(--slate-050);
--surface-card: var(--white);
--surface-raised: var(--white);
--surface-inset: var(--slate-100);
--surface-dark: var(--slate-950);
--surface-announce: var(--slate-950);
--surface-identity: var(--teal-050);
--surface-identity-solid: var(--teal-500);
--surface-highlight: var(--amber-050);
--surface-selected: var(--teal-050);
--surface-inverse: var(--slate-950);
--surface-skeleton: var(--slate-100);
--text-on-inverse: var(--white);
--border-subtle: var(--slate-100);
--border-default: var(--slate-200);
--border-strong: var(--slate-300);
--border-dashed: var(--slate-300);
--border-selected: var(--teal-600);
--action-primary-hover: var(--orange-600);
--action-primary-active: var(--orange-500);
--action-secondary: var(--teal-700);
--action-secondary-hover: var(--teal-600);
--action-secondary-active: var(--teal-700);
--action-ghost-hover: var(--slate-050);
--action-ghost-active: var(--slate-100);
--action-disabled: var(--slate-100);
--action-disabled-text: var(--slate-400);
--success-500: var(--teal-700);  --success-050: var(--teal-050);
--warning-500: var(--amber-800); --warning-050: var(--amber-050);
--danger-500: var(--orange-700); --danger-050: var(--orange-050);
--danger-border: var(--orange-600);
--info-500: var(--teal-700);     --info-050: var(--slate-050);
--rating-track: var(--slate-200);
--badge-plr-bg: var(--teal-050);
--badge-plr-text: var(--teal-700);
--badge-mrr-bg: var(--amber-050);
--badge-mrr-text: var(--amber-800);
--overlay-scrim: rgba(11, 17, 19, .55);
--selection-bg: var(--teal-200);
--selection-text: var(--slate-950);
--uthena-shadow-hairline: 0 1px 0 rgba(11, 17, 19, .06);
--uthena-shadow-card: 0 2px 8px rgba(11, 17, 19, .08);
--uthena-shadow-card-hover: 0 12px 32px rgba(11, 17, 19, .14);
--uthena-shadow-pop: 0 24px 64px rgba(11, 17, 19, .22);
--uthena-shadow-input: inset 0 1px 2px rgba(11, 17, 19, .08);
}

/* uthena-fonts */

@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://uthena.com/wp-content/themes/uthena/assets/fonts/poppins-latin-500.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://uthena.com/wp-content/themes/uthena/assets/fonts/poppins-latin-600.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://uthena.com/wp-content/themes/uthena/assets/fonts/poppins-latin-700.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('https://uthena.com/wp-content/themes/uthena/assets/fonts/poppins-latin-800.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Assistant';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('https://uthena.com/wp-content/themes/uthena/assets/fonts/assistant-latin-variable.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* uthena-base */

*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--uthena-header-h) + var(--space-2));
}
body {
margin: 0;
background-color: var(--surface-page);
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: var(--weight-body);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 var(--space-2);
color: var(--text-strong);
font-family: var(--font-display);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
text-wrap: balance;
}
h1 { font-size: var(--type-display-2); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--type-display-3); line-height: var(--leading-display); }
h3 { font-size: var(--type-display-4); }
h4 { font-size: var(--type-display-5); }
h5 { font-size: var(--type-body); }
h6 { font-size: var(--type-body-sm); }
:where(p, ul, ol, dl, table, figure, blockquote, pre) + :where(h2, h3, h4) {
margin-top: var(--space-6);
}
:where(p, ul, ol, dl, table, figure, blockquote, pre) + :where(h5, h6) {
margin-top: var(--space-4);
}
.uthena-display-1 { font-size: var(--type-display-1); font-weight: var(--weight-display-1); line-height: 1.08; letter-spacing: var(--tracking-display); }
.uthena-display-2 { font-size: var(--type-display-2); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.uthena-display-3 { font-size: var(--type-display-3); line-height: var(--leading-display); }
.uthena-display-4 { font-size: var(--type-display-4); }
.uthena-display-5 { font-size: var(--type-display-5); }
.uthena-lead {
color: var(--text-body);
font-size: var(--type-body-lg);
line-height: 1.55;
}
.uthena-meta {
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: var(--leading-ui);
}
.uthena-caption,
small {
font-size: var(--type-caption);
}
.uthena-mono,
code,
kbd,
samp,
pre {
font-family: var(--font-mono);
font-size: var(--type-mono);
font-variant-numeric: tabular-nums;
}
.uthena-tabular {
font-variant-numeric: tabular-nums;
}
p {
margin: 0 0 var(--space-2);
}
p:last-child {
margin-bottom: 0;
}
strong,
b {
font-weight: 700;
color: var(--text-strong);
}
hr,
.wp-block-separator {
border: 0;
border-top: 1px solid var(--border-subtle);
margin-block: var(--space-6);
opacity: 1;
}
img,
video,
svg,
iframe {
max-width: 100%;
height: auto;
}
svg {
fill: none;
vertical-align: middle;
}
::selection {
background-color: var(--selection-bg);
color: var(--selection-text);
}
.uthena-eyebrow {
display: block;
margin: 0 0 var(--space-15);
color: var(--text-identity);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1.4;
text-transform: uppercase;
}
a {
color: var(--text-link);
text-decoration: none;
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
a:hover {
color: var(--text-link-hover);
}
:where(p, li, dd, td, th, figcaption, blockquote, .uthena-prose) a:not([class]),
.uthena-link {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
:where(p, li, dd, td, th, figcaption, blockquote, .uthena-prose) a:not([class]):hover,
.uthena-link:hover {
text-decoration-thickness: 2px;
}
:focus-visible {
outline: 2px solid transparent;
outline-offset: 2px;
border-color: var(--border-focus);
box-shadow: var(--uthena-focus-ring);
border-radius: var(--uthena-radius-xs);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
box-shadow: var(--uthena-focus-ring);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid transparent;
border-color: var(--border-focus);
box-shadow: var(--uthena-shadow-input), var(--uthena-focus-ring);
}
.uthena-prose {
max-width: var(--uthena-w-reading);
color: var(--text-body);
font-size: var(--type-body);
line-height: 1.7;
}
.uthena-prose :where(p, ul, ol, dl, blockquote) {
max-width: var(--uthena-measure);
}
.uthena-prose :where(p, ul, ol, dl, blockquote, figure, table, pre) {
margin-block: 0 var(--space-3);
}
.uthena-prose :where(ul, ol) {
padding-left: 1.25em;
}
.uthena-prose li + li {
margin-top: var(--space-1);
}
.uthena-prose li::marker {
color: var(--text-muted);
}
.uthena-prose h3 {
font-size: var(--type-display-5);
}
.uthena-prose :where(h4, h5, h6) {
font-size: var(--type-body-lg);
}
.uthena-prose :where(p, ul, ol, dl, table, figure, blockquote, pre) + :where(h3, h4, h5, h6) {
margin-top: var(--space-4);
}
.uthena-prose :where(strong, b) {
color: var(--text-strong);
}
.uthena-prose li > p {
margin: 0;
}
.uthena-prose li > :where(ul, ol) {
margin-block: var(--space-1) 0;
}
.uthena-prose blockquote {
margin-inline: 0;
padding-left: var(--space-3);
border-left: 2px solid var(--action-secondary);
color: var(--text-strong);
font-size: var(--type-body-lg);
}
.uthena-prose pre {
overflow-x: auto;
padding: var(--space-2);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-inset);
}
.uthena-prose :not(pre) > code {
padding: 0.1em 0.35em;
border-radius: var(--uthena-radius-xs);
background-color: var(--surface-inset);
color: var(--text-strong);
}
.uthena-measure {
max-width: var(--uthena-measure);
}
table,
.wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--type-body-sm);
font-variant-numeric: tabular-nums;
}
th,
td {
padding: var(--space-15) var(--space-2);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-secondary);
text-align: left;
vertical-align: top;
}
th {
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
tbody th {
color: var(--text-strong);
font-size: var(--type-body-sm);
letter-spacing: 0;
text-transform: none;
}
.wp-block-table {
overflow-x: auto;
}
.wp-block-table thead {
border-bottom: 0;
}
.wp-block-table td,
.wp-block-table th {
border-color: var(--border-subtle);
}
.uthena-icon {
display: inline-block;
flex: none;
width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
vertical-align: middle;
}
.uthena-icon--16 { width: 16px; height: 16px; }
.uthena-icon--18 { width: 18px; height: 18px; }
.uthena-icon--20 { width: 20px; height: 20px; }
.uthena-icon-tile {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--uthena-radius-md);
background-color: var(--surface-identity);
color: var(--text-identity);
}
.uthena-container,
.uthena-w-catalog { max-width: var(--uthena-w-catalog); margin-inline: auto; }
.uthena-w-product { max-width: var(--uthena-w-product); margin-inline: auto; }
.uthena-w-portal  { max-width: var(--uthena-w-portal); margin-inline: auto; }
.uthena-w-reading { max-width: var(--uthena-w-reading); margin-inline: auto; }
.uthena-w-form    { max-width: var(--uthena-w-form); margin-inline: auto; }
.uthena-section {
padding-block: var(--space-section);
}
.uthena-section--tight {
padding-block: calc(var(--space-section) * 2 / 3);
}
.uthena-band {
background-color: var(--surface-sunken);
}
.uthena-stack > * + * {
margin-top: var(--space-2);
}
.uthena-screen-reader-text,
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link.screen-reader-text:focus {
position: fixed !important;
top: var(--space-1);
left: var(--space-1);
z-index: var(--uthena-z-toast);
width: auto;
height: auto;
margin: 0;
padding: var(--space-15) var(--space-3);
clip-path: none;
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
color: var(--text-strong);
}
.uthena-card {
display: block;
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
transition:
transform var(--uthena-dur-hover) var(--uthena-ease),
box-shadow var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-card--interactive:hover,
a.uthena-card:hover {
transform: translateY(-2px);
box-shadow: var(--uthena-shadow-card-hover);
border-color: var(--border-default);
}
.uthena-card__title {
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-card--interactive:hover .uthena-card__title,
a.uthena-card:hover .uthena-card__title {
color: var(--text-action);
}
.uthena-panel {
padding: var(--space-4);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-xl);
background-color: var(--surface-subtle);
}
.uthena-panel--identity {
background-color: var(--surface-identity);
border-color: transparent;
}
.uthena-strip {
display: flex;
gap: var(--space-15);
overflow-x: auto;
scrollbar-width: thin;
scroll-snap-type: x proximity;
padding-bottom: var(--space-1);
-webkit-overflow-scrolling: touch;
}
.uthena-strip > * {
scroll-snap-align: start;
}
.uthena-stat__value {
display: block;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-3);
font-weight: var(--weight-display);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.uthena-stat__label {
display: block;
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-rating {
display: inline-flex;
gap: 2px;
color: var(--rating-star);
}
.uthena-step__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--uthena-radius-md);
background-color: var(--surface-identity);
color: var(--text-identity);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1;
}
.uthena-faq {
border-top: 1px solid var(--border-subtle);
}
.uthena-faq__item {
border-bottom: 1px solid var(--border-subtle);
}
.uthena-faq__item > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.4;
cursor: pointer;
list-style: none;
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-faq__item > summary::-webkit-details-marker {
display: none;
}
.uthena-faq__item > summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin-right: 4px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--uthena-dur-default) var(--uthena-ease);
}
.uthena-faq__item[open] > summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
.uthena-faq__item > summary:hover {
color: var(--text-link-hover);
}
.uthena-faq__answer {
max-width: var(--uthena-measure);
padding-bottom: var(--space-3);
color: var(--text-body);
}
.wp-block-image img,
.wp-block-post-featured-image img {
border-radius: var(--uthena-radius-lg);
}
.has-surface-background-color,
.has-surface-sunken-background-color {
color: var(--text-body);
}
.uthena-announce {
background-color: var(--surface-announce);
color: var(--text-on-dark-muted);
font-size: var(--type-caption);
line-height: 1.4;
}
.uthena-announce p {
margin: 0;
}
.uthena-announce a {
color: var(--text-on-dark);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.uthena-header {
position: sticky;
top: 0;
z-index: var(--uthena-z-header);
background-color: var(--surface-page);
border-bottom: 1px solid var(--border-subtle);
}
.wp-site-blocks > .wp-block-template-part:has(> .uthena-header) {
display: contents;
}
.admin-bar .uthena-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .uthena-header { top: 0; } }
.uthena-header .uthena-header__row {
position: relative;
min-height: var(--uthena-header-h);
gap: var(--space-2);
}
.uthena-header {
--uthena-logo-h: 30px;
}
.uthena-header .wp-block-site-logo {
flex: none;
line-height: 0;
position: relative;
top: calc(var(--uthena-logo-h) * -0.0966);
}
.uthena-header .wp-block-site-logo img {
width: auto;
height: var(--uthena-logo-h);
}
@media (min-width: 1024px) {
.uthena-header .wp-block-site-logo {
margin-right: var(--space-2);
}
.uthena-primary-nav .wp-block-navigation__container {
position: relative;
top: -0.09em;
}
}
.uthena-primary-nav {
flex: none;
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-primary-nav .wp-block-navigation-item__content {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-primary-nav .wp-block-navigation-item__content:hover,
.uthena-primary-nav .wp-block-navigation-item__content:focus-visible {
color: var(--text-action);
}
.uthena-primary-nav .current-menu-item > .wp-block-navigation-item__content,
.uthena-primary-nav [aria-current="page"] {
color: var(--text-identity);
}
.uthena-primary-nav .wp-block-navigation__submenu-icon {
width: 12px;
height: 12px;
margin-left: 4px;
}
.uthena-primary-nav .wp-block-navigation__submenu-container {
padding: var(--space-1) !important;
border: 1px solid var(--border-default) !important;
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card) !important;
box-shadow: var(--uthena-shadow-pop);
color: var(--text-body) !important;
}
.uthena-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block;
padding: var(--space-1) var(--space-15) !important;
border-radius: var(--uthena-radius-sm);
font-weight: 500;
white-space: nowrap;
}
.uthena-primary-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
}
.uthena-primary-nav .uthena-nav-all > .wp-block-navigation-item__content {
color: var(--text-strong);
font-weight: 700;
}
.uthena-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
padding: var(--space-3) var(--space-gutter);
background-color: var(--surface-page) !important;
color: var(--text-body) !important;
}
.uthena-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-top: var(--space-8);
align-items: stretch;
}
.uthena-primary-nav .is-menu-open .wp-block-navigation__container {
gap: 0;
width: 100%;
align-items: stretch !important;
}
.uthena-primary-nav .is-menu-open .wp-block-navigation-item {
width: 100%;
align-items: stretch !important;
}
.uthena-primary-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
padding: var(--space-15) 0;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-primary-nav .is-menu-open .wp-block-navigation__submenu-container {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0 var(--space-2);
padding: var(--space-1) 0 var(--space-2) !important;
border: 0 !important;
border-bottom: 1px solid var(--border-subtle) !important;
border-radius: 0;
box-shadow: none;
background: transparent !important;
}
.uthena-primary-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: var(--space-1) 0 !important;
white-space: normal;
}
.uthena-primary-nav .is-menu-open .uthena-nav-all {
grid-column: 1 / -1;
}
.uthena-primary-nav .wp-block-navigation__responsive-container-open,
.uthena-primary-nav .wp-block-navigation__responsive-container-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--uthena-radius-md);
background: transparent;
color: var(--text-strong);
}
.uthena-primary-nav .wp-block-navigation__responsive-container-open:hover,
.uthena-primary-nav .wp-block-navigation__responsive-container-close:hover {
background-color: var(--action-ghost-hover);
}
.uthena-primary-nav .wp-block-navigation__responsive-container-close {
top: var(--space-2);
right: var(--space-gutter);
}
@media (min-width: 1024px) {
.uthena-primary-nav .wp-block-navigation__responsive-container-open.always-shown {
display: none;
}
.uthena-primary-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
display: block;
position: relative;
inset: auto;
width: auto;
z-index: auto;
background-color: transparent;
}
.uthena-primary-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
display: none;
}
.uthena-primary-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.uthena-primary-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}
.uthena-primary-nav .wp-block-navigation__container {
gap: var(--space-3);
}
.uthena-primary-nav .uthena-nav-categories > .wp-block-navigation__submenu-container {
display: grid !important;
grid-template-columns: repeat(2, minmax(200px, 1fr));
min-width: 460px !important;
max-height: min(70vh, 560px);
overflow-y: auto;
top: calc(100% + 8px) !important;
}
.uthena-primary-nav .uthena-nav-categories > .wp-block-navigation__submenu-container .uthena-nav-all {
grid-column: 1 / -1;
padding-bottom: var(--space-05);
margin-bottom: var(--space-05);
border-bottom: 1px solid var(--border-subtle);
}
}
.uthena-header-search {
flex: 1 1 auto;
max-width: 400px;
margin: 0 0 0 auto !important;
}
.uthena-header-search .wp-block-search__inside-wrapper {
position: relative;
padding: 0 !important;
border: 0 !important;
background: transparent;
}
.uthena-header-search .wp-block-search__input {
height: 42px;
padding: 0 44px 0 var(--space-2);
border-radius: var(--uthena-radius-pill);
background-color: var(--surface-card);
font-size: var(--type-body-sm);
}
.uthena-header-search .wp-block-search__button {
position: absolute;
top: 3px;
right: 3px;
width: 36px;
height: 36px;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--uthena-radius-pill);
background-color: transparent;
color: var(--text-muted);
}
.uthena-header-search .wp-block-search__button:hover {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
}
.uthena-header-search .wp-block-search__button svg {
width: 20px;
height: 20px;
min-width: 0;
fill: currentColor;
}
.uthena-header-actions {
display: flex;
flex: none;
align-items: center;
gap: var(--space-05);
}
.uthena-header-action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-width: 44px;
height: 44px;
padding: 0 var(--space-15);
border: 0;
border-radius: var(--uthena-radius-md);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--uthena-dur-hover) var(--uthena-ease),
color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-header-action:hover {
background-color: var(--action-ghost-hover);
color: var(--text-action);
text-decoration: none;
}
.uthena-header-action__label {
white-space: nowrap;
}
.uthena-cart-count {
position: absolute;
top: 4px;
right: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--uthena-radius-pill);
background-color: var(--action-primary);
color: var(--text-on-accent);
font-size: var(--type-micro);
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.uthena-cart-count[hidden] {
display: none;
}
.uthena-search-toggle {
display: none;
}
@media (max-width: 1279px) {
.uthena-header-action__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (max-width: 1023px) {
.uthena-header .uthena-header__row {
min-height: 60px;
gap: var(--space-1);
}
.uthena-header-actions {
gap: 0;
}
.uthena-header {
--uthena-logo-h: 26px;
}
.uthena-primary-nav {
order: -1;
margin-left: calc(var(--space-15) * -1);
}
.uthena-header-actions {
margin-left: auto;
}
.uthena-search-toggle {
display: inline-flex;
}
.uthena-header-search {
position: absolute;
top: 100%;
left: calc(var(--space-gutter) * -1);
right: calc(var(--space-gutter) * -1);
display: none;
max-width: none;
margin: 0 !important;
padding: var(--space-15) var(--space-gutter);
border-bottom: 1px solid var(--border-subtle);
background-color: var(--surface-page);
box-shadow: var(--uthena-shadow-card);
}
.uthena-header.is-search-open .uthena-header-search {
display: block;
}
.no-js .uthena-header-search {
position: static;
display: block;
}
}
.uthena-footer {
border-top: 1px solid var(--border-subtle);
background-color: var(--surface-subtle);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
.uthena-footer__grid > * {
margin: 0 !important;
}
.uthena-footer .wp-block-site-logo img {
width: auto;
height: 28px;
}
.uthena-footer__heading {
margin: 0 0 var(--space-15);
color: var(--text-strong);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-footer .wp-block-navigation {
--navigation-layout-direction: column;
gap: var(--space-1);
font-size: var(--type-body-sm);
}
.uthena-footer .wp-block-navigation .wp-block-navigation__container {
gap: var(--space-1);
}
.uthena-footer .wp-block-navigation-item__content {
color: var(--text-secondary);
text-decoration: none;
}
.uthena-footer .wp-block-navigation-item__content:hover {
color: var(--text-action);
}
.uthena-footer__blurb {
max-width: 36ch;
margin-top: var(--space-2);
color: var(--text-secondary);
}
.uthena-footer__bottom {
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: var(--type-caption);
}
.uthena-footer__bottom p {
margin: 0;
}
@media (max-width: 1023px) {
.uthena-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uthena-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 479px) {
.uthena-footer__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.uthena-card--interactive:hover,
a.uthena-card:hover {
transform: none;
}
}
.uthena-stars {
display: inline-flex;
gap: 2px;
vertical-align: middle;
--uthena-star-size: 16px;
}
.uthena-stars--lg {
--uthena-star-size: 22px;
}
.uthena-stars__star {
display: inline-block;
width: var(--uthena-star-size);
height: var(--uthena-star-size);
background: linear-gradient(90deg, var(--rating-star) var(--fill, 0%), var(--rating-track) var(--fill, 0%));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.3 6 20.6l1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.3 6 20.6l1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.uthena-course-card__rating {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-05) var(--space-1);
margin-top: var(--space-05);
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-course-card__rating-value {
color: var(--text-strong);
font-weight: 600;
font-variant-numeric: tabular-nums;
}

/* uthena-components */

button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
.uthena-button,
.wp-element-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
a.button,
button.button,
input[type="submit"],
input[type="button"],
button[type="submit"] {
--_bg: var(--action-primary);
--_bg-hover: var(--action-primary-hover);
--_bg-active: var(--action-primary-active);
--_fg: var(--text-on-accent);
--_border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: 44px;
padding: 10px var(--space-3);
border: 1px solid var(--_border);
border-radius: var(--uthena-radius-md);
background-color: var(--_bg);
background-image: none;
color: var(--_fg);
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease),
color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
a.button:hover,
button.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover {
background-color: var(--_bg-hover);
color: var(--_fg);
text-decoration: none;
}
.uthena-button:active,
.wp-element-button:active,
.wp-block-button__link:active,
a.button:active,
button.button:active,
input[type="submit"]:active,
button[type="submit"]:active {
background-color: var(--_bg-active);
}
.uthena-button--secondary,
.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-element-button {
--_bg: transparent;
--_bg-hover: var(--action-ghost-hover);
--_bg-active: var(--action-ghost-active);
--_fg: var(--text-strong);
--_border: var(--border-strong);
}
.uthena-button--secondary:hover,
.is-style-outline > .wp-block-button__link:hover {
border-color: var(--text-muted);
}
button[type="submit"].uthena-button--secondary,
input[type="submit"].uthena-button--secondary {
--_bg: transparent;
--_bg-hover: var(--action-ghost-hover);
--_bg-active: var(--action-ghost-active);
--_fg: var(--text-strong);
--_border: var(--border-strong);
}
.uthena-button--ghost {
--_bg: transparent;
--_bg-hover: var(--action-ghost-hover);
--_bg-active: var(--action-ghost-active);
--_fg: var(--text-secondary);
padding-inline: var(--space-15);
}
.uthena-button--ghost:hover {
--_fg: var(--text-strong);
}
.uthena-button--link {
--_bg: transparent;
--_bg-hover: transparent;
--_bg-active: transparent;
--_fg: var(--text-link);
min-height: 0;
padding: 0;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.18em;
}
.uthena-button--link:hover {
--_fg: var(--text-link-hover);
text-decoration: underline;
}
.uthena-button--sm {
min-height: 36px;
padding: 6px var(--space-2);
font-size: var(--type-body-sm);
}
.uthena-button--lg {
min-height: 52px;
padding: 14px var(--space-4);
font-size: var(--type-body-lg);
}
.uthena-button--block {
display: flex;
width: 100%;
}
.uthena-button .uthena-icon {
width: 18px;
height: 18px;
}
.uthena-button:disabled,
.uthena-button[aria-disabled="true"],
.wp-element-button:disabled,
button.button:disabled,
.button.disabled,
input[type="submit"]:disabled,
button[type="submit"]:disabled {
--_bg: var(--action-disabled);
--_bg-hover: var(--action-disabled);
--_bg-active: var(--action-disabled);
--_fg: var(--action-disabled-text);
--_border: transparent;
cursor: not-allowed;
pointer-events: none;
}
.uthena-button.is-loading,
.button.loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.uthena-button.is-loading::after,
.button.loading::after {
content: "";
position: absolute;
inset: 0;
width: 18px;
height: 18px;
margin: auto;
border: 2px solid var(--_fg);
border-right-color: transparent;
border-radius: 50%;
animation: uthena-spin 700ms linear infinite;
}
@keyframes uthena-spin {
to { transform: rotate(360deg); }
}
.wp-block-buttons {
gap: var(--space-15);
}
.uthena-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 36px;
padding: 0 var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-pill);
background-color: transparent;
color: var(--text-secondary);
font-size: var(--type-body-sm);
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
border-color var(--uthena-dur-hover) var(--uthena-ease),
color var(--uthena-dur-hover) var(--uthena-ease),
background-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-chip:hover {
border-color: var(--border-strong);
background-color: var(--action-ghost-hover);
color: var(--text-strong);
text-decoration: none;
}
.uthena-chip.is-active,
.uthena-chip[aria-current="true"],
.uthena-chip[aria-current="page"],
.uthena-chip[aria-pressed="true"] {
border-color: var(--border-selected);
background-color: var(--surface-selected);
color: var(--text-strong);
}
.uthena-chip--static {
min-height: 28px;
padding: 0 var(--space-15);
cursor: default;
}
.uthena-chip--static:hover {
border-color: var(--border-default);
background-color: transparent;
color: var(--text-secondary);
}
.uthena-badge {
display: inline-flex;
align-items: center;
gap: var(--space-05);
min-height: 22px;
padding: 2px var(--space-1);
border-radius: var(--uthena-radius-pill);
background-color: var(--surface-inset);
color: var(--text-secondary);
font-size: var(--type-caption);
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
white-space: nowrap;
}
.uthena-badge .uthena-icon {
width: 14px;
height: 14px;
}
.uthena-badge--plr,
.uthena-badge--owned,
.uthena-badge--success { background-color: var(--badge-plr-bg); color: var(--badge-plr-text); }
.uthena-badge--mrr,
.uthena-badge--warning { background-color: var(--badge-mrr-bg); color: var(--badge-mrr-text); }
.uthena-badge--personal { background-color: var(--surface-inset); color: var(--text-secondary); }
.uthena-badge--sale { background-color: var(--badge-sale-bg); color: var(--text-on-accent); }
.uthena-badge--error { background-color: var(--danger-050); color: var(--danger-500); }
.uthena-price,
.woocommerce-Price-amount {
font-variant-numeric: tabular-nums;
}
.uthena-price {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 var(--space-1);
color: var(--text-price);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.2;
}
.uthena-price__from {
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-price__was,
.uthena-price del {
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 400;
text-decoration: line-through;
}
.uthena-price--sale .uthena-price__amount,
.uthena-price ins {
color: var(--text-price-sale);
text-decoration: none;
}
.uthena-price--lg {
font-size: var(--type-display-3);
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.uthena-input,
.uthena-select,
.uthena-textarea,
.wp-block-search__input {
display: block;
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 9px 14px;
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
box-shadow: var(--uthena-shadow-input);
color: var(--text-strong);
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.5;
transition:
border-color var(--uthena-dur-hover) var(--uthena-ease),
box-shadow var(--uthena-dur-hover) var(--uthena-ease);
}
input:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
border-color: var(--border-strong);
}
select,
.uthena-select {
padding-right: 40px;
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 20px) 50%,
calc(100% - 15px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
textarea,
.uthena-textarea {
min-height: 140px;
resize: vertical;
}
::placeholder {
color: var(--text-muted);
opacity: 1;
}
input:disabled,
select:disabled,
textarea:disabled {
background-color: var(--surface-inset);
color: var(--action-disabled-text);
cursor: not-allowed;
}
[aria-invalid="true"],
.woocommerce-invalid input,
.has-error input {
border-color: var(--danger-border) !important;
}
label,
.uthena-field__label {
display: block;
margin: 0 0 6px;
color: var(--text-strong);
font-size: var(--type-body-sm);
font-weight: 600;
line-height: 1.4;
}
.uthena-field {
display: block;
margin: 0 0 var(--space-3);
}
.uthena-field__hint {
display: block;
margin-top: 6px;
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-field__error {
display: flex;
gap: 6px;
margin-top: 6px;
color: var(--danger-500);
font-size: var(--type-body-sm);
font-weight: 600;
line-height: 1.4;
}
.uthena-field__optional {
color: var(--text-muted);
font-weight: 400;
}
input[type="checkbox"],
input[type="radio"] {
flex: none;
display: inline-grid;
place-content: center;
width: 20px;
height: 20px;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: var(--uthena-radius-xs);
background-color: var(--surface-card);
box-shadow: none;
appearance: none;
vertical-align: -4px;
cursor: pointer;
transition:
background-color var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease);
}
input[type="radio"] {
border-radius: 50%;
}
input[type="checkbox"]::before {
content: "";
width: 11px;
height: 6px;
border-left: 2px solid var(--surface-page);
border-bottom: 2px solid var(--surface-page);
transform: translateY(-1px) rotate(-45deg) scale(0);
transition: transform var(--uthena-dur-hover) var(--uthena-ease);
}
input[type="radio"]::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--surface-page);
transform: scale(0);
transition: transform var(--uthena-dur-hover) var(--uthena-ease);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
border-color: var(--action-secondary);
background-color: var(--action-secondary);
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
transform: translateY(-1px) rotate(-45deg) scale(1);
}
input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
border-color: var(--border-default);
background-color: var(--surface-inset);
}
.uthena-check {
display: flex;
align-items: flex-start;
gap: var(--space-15);
margin: 0 0 var(--space-15);
color: var(--text-body);
font-size: var(--type-body);
font-weight: 400;
line-height: 1.45;
cursor: pointer;
}
.uthena-check > input {
margin-top: 2px;
}
fieldset {
min-width: 0;
margin: 0 0 var(--space-3);
padding: 0;
border: 0;
}
legend {
margin: 0 0 var(--space-15);
padding: 0;
color: var(--text-strong);
font-size: var(--type-body-sm);
font-weight: 700;
}
.uthena-radio-group {
display: grid;
gap: var(--space-1);
}
.uthena-radio-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: var(--space-15);
margin: 0;
padding: var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
color: var(--text-body);
font-weight: 400;
cursor: pointer;
transition:
border-color var(--uthena-dur-hover) var(--uthena-ease),
background-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-radio-row:hover {
border-color: var(--border-strong);
}
.uthena-radio-row > input {
margin-top: 2px;
}
.uthena-radio-row:has(input:checked),
.uthena-radio-row.is-selected {
border-color: var(--border-selected);
background-color: var(--surface-selected);
box-shadow: inset 0 0 0 1px var(--border-selected);
}
.uthena-radio-row:has(input:focus-visible) {
border-color: var(--border-focus);
box-shadow: var(--uthena-focus-ring);
}
.uthena-radio-row:has(input:disabled) {
opacity: 1;
color: var(--action-disabled-text);
cursor: not-allowed;
}
.uthena-radio-row__title {
display: block;
color: var(--text-strong);
font-size: var(--type-body);
font-weight: 700;
line-height: 1.3;
}
.uthena-radio-row__desc {
display: block;
margin-top: 2px;
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-radio-row__aside {
color: var(--text-price);
font-family: var(--font-display);
font-size: var(--type-body-lg);
font-weight: var(--weight-display);
line-height: 1.3;
text-align: right;
font-variant-numeric: tabular-nums;
}
.uthena-table-wrap {
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-size: var(--type-body-sm);
}
.uthena-table th,
.uthena-table td {
padding: var(--space-15) var(--space-2);
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.uthena-table tbody tr:last-child > * {
border-bottom: 0;
}
.uthena-table tbody tr:hover {
background-color: var(--surface-subtle);
}
.uthena-table .is-numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.uthena-table--compact th,
.uthena-table--compact td {
padding: var(--space-1) var(--space-15);
}
@media (max-width: 767px) {
.uthena-table-wrap {
overflow: visible;
border: 0;
background: transparent;
}
.uthena-table,
.uthena-table tbody,
.uthena-table tr,
.uthena-table td,
.uthena-table tbody th {
display: block;
width: 100%;
}
.uthena-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.uthena-table tr {
margin-bottom: var(--space-15);
padding: var(--space-1) var(--space-2);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
}
.uthena-table td,
.uthena-table tbody th {
display: grid;
grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
gap: var(--space-2);
padding: var(--space-1) 0;
border-bottom: 1px solid var(--border-subtle);
text-align: left;
}
.uthena-table tr > :last-child {
border-bottom: 0;
}
.uthena-table td::before,
.uthena-table tbody th::before {
content: attr(data-label);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-table td:not([data-label])::before,
.uthena-table td[data-label=""]::before {
content: none;
}
.uthena-table td:not([data-label]) {
grid-template-columns: minmax(0, 1fr);
}
.uthena-table .is-numeric {
text-align: left;
}
}
.uthena-dl {
display: grid;
margin: 0;
font-size: var(--type-body-sm);
}
.uthena-dl > div {
display: grid;
grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
gap: var(--space-2);
padding: var(--space-15) 0;
border-bottom: 1px solid var(--border-subtle);
}
.uthena-dl > div:first-child {
border-top: 1px solid var(--border-subtle);
}
.uthena-dl dt {
color: var(--text-muted);
font-weight: 600;
}
.uthena-dl dd {
margin: 0;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.uthena-dl--inline > div {
grid-template-columns: auto minmax(0, 1fr);
padding: var(--space-05) 0;
border: 0 !important;
}
.uthena-tabs {
display: flex;
gap: var(--space-3);
margin: 0 0 var(--space-4);
padding: 0;
overflow-x: auto;
border-bottom: 1px solid var(--border-subtle);
list-style: none;
scrollbar-width: none;
}
.uthena-tabs::-webkit-scrollbar {
display: none;
}
.uthena-tabs__tab {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-1);
min-height: 44px;
margin-bottom: -1px;
padding: 0 2px;
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
background: transparent;
color: var(--text-muted);
font-size: var(--type-body-sm);
font-weight: 700;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
color var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-tabs__tab:hover {
color: var(--text-strong);
text-decoration: none;
}
.uthena-tabs__tab[aria-current="page"],
.uthena-tabs__tab[aria-selected="true"],
.uthena-tabs__tab.is-active {
border-bottom-color: var(--action-secondary);
color: var(--text-strong);
}
.uthena-tabs__count {
color: var(--text-muted);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.uthena-accordion {
border-top: 1px solid var(--border-subtle);
}
.uthena-accordion__item {
border-bottom: 1px solid var(--border-subtle);
}
.uthena-accordion__item > summary {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 56px;
padding: var(--space-15) 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-body-lg);
font-weight: var(--weight-display);
line-height: 1.35;
list-style: none;
cursor: pointer;
}
.uthena-accordion__item > summary::-webkit-details-marker {
display: none;
}
.uthena-accordion__item > summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin: 0 4px 4px auto;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform var(--uthena-dur-default) var(--uthena-ease);
}
.uthena-accordion__item[open] > summary::after {
margin-bottom: -4px;
transform: rotate(-135deg);
}
.uthena-accordion__item > summary:hover {
color: var(--text-link-hover);
}
.uthena-accordion__meta {
margin-left: auto;
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 400;
white-space: nowrap;
}
.uthena-accordion__meta + ::after,
.uthena-accordion__item > summary:has(.uthena-accordion__meta)::after {
margin-left: 0;
}
.uthena-accordion__body {
max-width: var(--uthena-measure);
padding: 0 0 var(--space-3);
color: var(--text-body);
}
.uthena-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
--_accent: var(--text-muted);
--_panel: var(--surface-subtle);
--_ink: var(--text-body);
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-15);
margin: 0 0 var(--space-3);
padding: var(--space-15) var(--space-2);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--_accent);
border-radius: var(--uthena-radius-md);
background-color: var(--_panel);
color: var(--_ink);
font-size: var(--type-body-sm);
line-height: 1.5;
list-style: none;
}
.uthena-notice--success,
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
--_accent: var(--success-500);
--_panel: var(--success-050);
}
.uthena-notice--warning,
.wc-block-components-notice-banner.is-warning {
--_accent: var(--warning-500);
--_panel: var(--warning-050);
}
.uthena-notice--error,
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
--_accent: var(--danger-border);
--_panel: var(--danger-050);
}
.uthena-notice--info,
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
--_accent: var(--info-500);
--_panel: var(--info-050);
}
body .wc-block-components-notice-banner,
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-warning,
body .wc-block-components-notice-banner.is-error,
body .wc-block-components-notice-banner.is-info {
border-color: var(--border-subtle);
border-left-color: var(--_accent);
background-color: var(--_panel);
color: var(--_ink);
transition: none;
}
body .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
color: var(--text-strong) !important;
opacity: 1;
font-weight: 700;
}
.uthena-notice__icon,
.wc-block-components-notice-banner > svg {
flex: none;
width: 20px;
height: 20px;
margin-top: 1px;
border-radius: 0;
background: none !important;
fill: none;
color: var(--_accent);
}
.wc-block-components-notice-banner > svg {
fill: currentColor;
}
.uthena-notice__body,
.wc-block-components-notice-banner__content {
flex: 1 1 auto;
min-width: 0;
}
.uthena-notice__title {
display: block;
margin-bottom: 2px;
color: var(--text-strong);
font-weight: 700;
}
.uthena-notice a:not([class]),
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button),
.wc-block-components-notice-banner a:not(.button) {
color: var(--text-strong);
text-decoration: underline;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.wc-block-components-notice-banner .button {
order: 2;
min-height: 36px;
margin-left: auto;
padding: 6px var(--space-2);
font-size: var(--type-body-sm);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
content: none;
}
.woocommerce-error {
flex-direction: column;
gap: var(--space-05);
}
.woocommerce-error li {
margin: 0;
}
.woocommerce-notices-wrapper:empty {
display: none;
}
.uthena-toast-region {
position: fixed;
right: var(--space-3);
bottom: var(--space-3);
z-index: var(--uthena-z-toast);
display: grid;
gap: var(--space-1);
width: min(400px, calc(100vw - var(--space-4)));
}
.uthena-toast {
margin: 0;
border-color: var(--border-default);
background-color: var(--surface-raised);
box-shadow: var(--uthena-shadow-pop);
}
@media (max-width: 479px) {
.uthena-toast-region {
right: var(--space-2);
bottom: var(--space-2);
left: var(--space-2);
width: auto;
}
}
.uthena-skeleton {
display: block;
border-radius: var(--uthena-radius-sm);
background-color: var(--surface-skeleton);
animation: uthena-skeleton 1.2s var(--uthena-ease) infinite alternate;
}
.uthena-skeleton--text { height: 0.9em; margin-block: 0.35em; }
.uthena-skeleton--title { width: 60%; height: 1.4em; margin-bottom: var(--space-15); }
.uthena-skeleton--media { aspect-ratio: 16 / 9; border-radius: var(--uthena-radius-lg); }
.uthena-skeleton--button { width: 140px; height: 44px; border-radius: var(--uthena-radius-md); }
@keyframes uthena-skeleton {
from { background-color: var(--surface-skeleton); }
to { background-color: var(--surface-inset); }
}
.uthena-cover {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
container-type: inline-size;
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-sunken);
color: var(--text-strong);
text-align: left;
}
.uthena-course-card__thumb .uthena-cover,
.uthena-related-courses__thumb .uthena-cover,
.uthena-bundle-contents__thumb .uthena-cover,
.wp-block-post-featured-image .uthena-cover {
height: 100%;
}
.uthena-cover__inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 3cqi;
padding: 6cqi 7cqi 12cqi;
}
.uthena-course-card__thumb .uthena-cover,
.uthena-related-courses__thumb .uthena-cover,
.uthena-bundle-contents__thumb .uthena-cover {
border: 0;
border-radius: 0;
}
.uthena-cover__eyebrow {
display: block;
overflow: hidden;
color: var(--text-identity);
font-family: var(--font-body);
font-size: clamp(10px, 3.6cqi, 14px);
font-weight: 700;
letter-spacing: var(--tracking-caps);
line-height: 1.3;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.uthena-cover__title {
display: -webkit-box;
margin: 0;
max-width: 86%;
overflow: hidden;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
color: var(--text-strong);
font-family: var(--font-display);
font-size: clamp(15px, 6.6cqi, 36px);
font-weight: var(--weight-display);
line-height: 1.18;
letter-spacing: var(--tracking-heading);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
text-wrap: balance;
}
.uthena-cover__mark {
position: absolute;
right: 5cqi;
bottom: 4.4cqi;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(20px, 7.5cqi, 40px);
aspect-ratio: 1;
border: 1.5px solid var(--action-secondary);
border-radius: var(--uthena-radius-sm);
color: var(--text-identity);
font-family: var(--font-display);
font-size: clamp(12px, 4.8cqi, 26px);
font-weight: 700;
line-height: 1;
padding-bottom: 0.12em;
}
.uthena-cover__rule {
position: absolute;
left: 7cqi;
bottom: 6.6cqi;
width: 12cqi;
height: 2px;
background-color: var(--border-strong);
}
.uthena-cover--mark .uthena-cover__inner {
justify-content: flex-end;
padding: 7cqi 7cqi 16cqi;
}
.uthena-cover--mark .uthena-cover__eyebrow {
display: -webkit-box;
max-width: 78%;
color: var(--text-identity);
font-family: var(--font-display);
font-size: clamp(14px, 6.2cqi, 30px);
font-weight: var(--weight-display);
letter-spacing: var(--tracking-heading);
line-height: 1.15;
text-transform: none;
white-space: normal;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.uthena-cover__eyebrow {
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
@container (max-width: 239px) {
.uthena-cover__inner {
justify-content: center;
padding: 8cqi 9cqi 14cqi;
}
.uthena-cover:not(.uthena-cover--mark) .uthena-cover__eyebrow {
display: none;
}
.uthena-cover__title {
max-width: 78%;
font-size: clamp(10px, 10cqi, 16px);
line-height: 1.2;
}
.uthena-cover--mark .uthena-cover__eyebrow {
font-size: clamp(10px, 10cqi, 16px);
}
}
@container (max-width: 95px) {
.uthena-cover__title,
.uthena-cover__eyebrow,
.uthena-cover__rule {
display: none !important;
}
.uthena-cover__mark {
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
width: 28px;
font-size: 16px;
}
}
.uthena-licence-line {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-05) var(--space-1);
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-portal {
display: grid;
grid-template-columns: var(--uthena-portal-nav) minmax(0, var(--uthena-w-portal));
gap: var(--space-6);
align-items: start;
max-width: calc(var(--uthena-portal-nav) + var(--space-6) + var(--uthena-w-portal));
margin-inline: auto;
padding-block: var(--space-6) var(--space-section);
}
.uthena-portal__nav {
position: sticky;
top: calc(var(--uthena-header-h) + var(--space-3));
}
.uthena-portal__nav-title {
margin: 0 0 var(--space-1);
padding: 0 var(--space-15);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-portal__nav-list {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.uthena-portal__nav-list + .uthena-portal__nav-title {
margin-top: var(--space-3);
}
.uthena-portal__nav-link {
display: flex;
align-items: center;
gap: var(--space-15);
min-height: 44px;
padding: 0 var(--space-15);
border-radius: var(--uthena-radius-md);
color: var(--text-secondary);
font-size: var(--type-body-sm);
font-weight: 600;
text-decoration: none;
transition:
background-color var(--uthena-dur-hover) var(--uthena-ease),
color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-portal__nav-link .uthena-icon {
width: 18px;
height: 18px;
color: var(--text-muted);
}
.uthena-portal__nav-link:hover {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
text-decoration: none;
}
.uthena-portal__nav-link[aria-current="page"] {
background-color: var(--surface-identity);
color: var(--text-strong);
}
.uthena-portal__nav-link[aria-current="page"] .uthena-icon {
color: var(--text-identity);
}
.uthena-portal__nav-count {
margin-left: auto;
color: var(--text-muted);
font-size: var(--type-caption);
font-variant-numeric: tabular-nums;
}
.uthena-portal__content {
min-width: 0;
}
.uthena-portal__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.uthena-portal__head h1 {
margin: 0;
font-size: var(--type-display-3);
}
@media (max-width: 1023px) {
.uthena-portal {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding-top: 0;
}
.uthena-portal__nav {
position: static;
margin-inline: calc(var(--space-gutter) * -1);
padding-inline: var(--space-gutter);
overflow-x: auto;
border-bottom: 1px solid var(--border-subtle);
scrollbar-width: none;
}
.uthena-portal__nav::-webkit-scrollbar {
display: none;
}
.uthena-portal__nav-title {
display: none;
}
.uthena-portal__nav-list,
.uthena-portal__nav-list + .uthena-portal__nav-list {
display: inline-flex;
gap: var(--space-3);
margin: 0;
}
.uthena-portal__nav-list + .uthena-portal__nav-list {
margin-left: var(--space-3);
}
.uthena-portal__nav-link {
gap: var(--space-1);
margin-bottom: -1px;
padding: 0 2px;
border-bottom: 2px solid transparent;
border-radius: 0;
white-space: nowrap;
}
.uthena-portal__nav-link:hover {
background: transparent;
}
.uthena-portal__nav-link[aria-current="page"] {
border-bottom-color: var(--action-secondary);
background: transparent;
}
.uthena-portal__nav-link .uthena-icon {
display: none;
}
}
.wp-block-search__inside-wrapper {
gap: var(--space-1);
}
.wp-block-search__button {
margin: 0;
}
.wp-block-search__button svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
padding: 0;
border: 0;
}
.wp-block-query-pagination {
gap: var(--space-1);
align-items: center;
}
.wp-block-query-pagination-numbers {
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-width: 44px;
height: 44px;
margin: 0 !important;
padding: 0 var(--space-15);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
color: var(--text-secondary);
font-size: var(--type-body-sm);
font-weight: 700;
text-decoration: none;
font-variant-numeric: tabular-nums;
transition:
background-color var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease),
color var(--uthena-dur-hover) var(--uthena-ease);
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.woocommerce-pagination .page-numbers a:hover {
border-color: var(--border-strong);
background-color: var(--action-ghost-hover);
color: var(--text-strong);
text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers span.current {
border-color: var(--border-selected);
background-color: var(--surface-selected);
color: var(--text-strong);
}
.wp-block-query-pagination .page-numbers.dots {
min-width: 24px;
border: 0;
background: transparent;
}
.woocommerce-pagination ul.page-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-1);
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.woocommerce-pagination ul.page-numbers li {
border: 0;
}
.woocommerce .price,
.wc-block-components-product-price {
color: var(--text-price);
font-variant-numeric: tabular-nums;
}
.woocommerce .price del {
color: var(--text-muted);
}
.woocommerce .price ins {
color: var(--text-price-sale);
text-decoration: none;
}
.woocommerce form .form-row {
margin: 0 0 var(--space-2);
padding: 0;
}
.woocommerce form .form-row label {
line-height: 1.4;
}
.woocommerce form .form-row .required {
color: var(--danger-500);
text-decoration: none;
}
.wp-block-details {
border-bottom: 1px solid var(--border-subtle);
}
.wp-block-details > summary {
padding: var(--space-15) 0;
color: var(--text-strong);
font-family: var(--font-display);
font-weight: var(--weight-display);
cursor: pointer;
}
.uthena-course-card__thumb:has(.uthena-course-card__badge) .uthena-cover__eyebrow {
visibility: hidden;
}
@media (max-width: 767px) {
.uthena-table td > *,
.uthena-table tbody th > * {
justify-self: start;
}
}
.uthena-bank {
margin: 0 0 var(--space-4);
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-top: 3px solid var(--warning-500);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-bank__head {
display: flex;
align-items: center;
gap: var(--space-15);
margin-bottom: var(--space-1);
}
.uthena-bank__icon {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--uthena-radius-md);
background-color: var(--warning-050);
color: var(--warning-500);
}
.uthena-bank__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-bank__lead {
max-width: var(--uthena-measure);
margin: 0 0 var(--space-2);
color: var(--text-body);
font-size: var(--type-body-sm);
}
.uthena-bank__details {
display: grid;
margin: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-sunken);
}
.uthena-bank__details > div {
display: grid;
grid-template-columns: minmax(128px, 38%) minmax(0, 1fr);
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
border-top: 1px solid var(--border-subtle);
}
.uthena-bank__details > div:first-child {
border-top: 0;
}
.uthena-bank__details dt {
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-bank__details dd {
margin: 0;
color: var(--text-strong);
font-size: var(--type-body-sm);
overflow-wrap: anywhere;
user-select: all;
}
.uthena-bank__details > div.is-key dd {
font-size: var(--type-body);
font-weight: 700;
}
.uthena-bank__missing {
margin: var(--space-15) 0 0;
font-size: var(--type-body-sm);
}
.uthena-bank__subtitle {
margin: var(--space-3) 0 var(--space-1);
color: var(--text-strong);
font-size: var(--type-body);
font-weight: 700;
}
.uthena-bank__steps {
display: grid;
gap: var(--space-05);
margin: 0;
padding-left: var(--space-3);
color: var(--text-body);
font-size: var(--type-body-sm);
}
@media (max-width: 599px) {
.uthena-bank {
padding: var(--space-2);
}
.uthena-bank__details > div {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
}
.uthena-star-input {
display: inline-flex;
flex-direction: row-reverse;
gap: var(--space-05);
margin-top: var(--space-05);
}
.uthena-star-input input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.uthena-star-input label {
display: inline-block;
width: 36px;
height: 36px;
cursor: pointer;
background-color: var(--rating-track);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.3 6 20.6l1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / 30px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.2 6.8.8-5 4.7 1.3 6.7L12 17.3 6 20.6l1.3-6.7-5-4.7 6.8-.8z'/%3E%3C/svg%3E") center / 30px no-repeat;
}
.uthena-star-input input:checked ~ label,
.uthena-star-input label:hover,
.uthena-star-input label:hover ~ label {
background-color: var(--rating-star);
}
.uthena-star-input:has(input:focus-visible) {
outline: 2px solid var(--border-focus);
outline-offset: 4px;
border-radius: var(--uthena-radius-sm);
}
.uthena-store-score {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-15);
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-store-score__value {
font-variant-numeric: tabular-nums;
}
.uthena-testimonials__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1) var(--space-3);
margin-bottom: var(--space-4);
}
.uthena-testimonials__title {
margin: 0;
}
.uthena-testimonials__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.uthena-testimonials__list {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
.uthena-testimonial {
margin: 0;
}
.uthena-testimonial__figure {
display: flex;
flex-direction: column;
gap: var(--space-2);
height: 100%;
margin: 0;
padding: var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-testimonial__quote {
flex: 1;
margin: 0;
padding: 0;
border: 0;
color: var(--text-body);
font-size: var(--type-body-lg);
line-height: 1.5;
overflow-wrap: anywhere;
}
.uthena-testimonial__quote p {
margin: 0;
}
.uthena-testimonial__quote p::before { content: "\201C"; }
.uthena-testimonial__quote p::after  { content: "\201D"; }
.uthena-testimonial__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-05) var(--space-1);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-testimonial__name {
color: var(--text-secondary);
font-weight: 600;
}
.uthena-testimonial__verified {
color: var(--text-identity);
}
.uthena-store-proof {
display: grid;
gap: var(--space-1);
margin: 0 0 var(--space-2);
padding: var(--space-2);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
text-align: left;
}
.uthena-store-proof__quote {
margin: 0;
padding: 0;
border: 0;
color: var(--text-body);
font-size: var(--type-body-sm);
}
.uthena-store-proof__quote p {
margin: 0;
}
.uthena-store-proof__quote footer {
margin-top: var(--space-05);
color: var(--text-muted);
font-size: var(--type-caption);
}

/* uthena-empty-states */

.uthena-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--wp--preset--spacing--30);
margin: var(--wp--preset--spacing--70) auto;
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40);
border: 1px dashed var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-subtle);
text-align: center;
}
.uthena-empty__icon {
color: var(--action-secondary);
}
.uthena-empty__title {
margin: 0;
color: var(--text-strong);
font-family: var(--wp--preset--font-family--display), system-ui, sans-serif;
font-size: var(--wp--preset--font-size--x-large);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
text-wrap: balance;
}
.uthena-empty__body {
margin: 0;
color: var(--text-muted);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.5;
}
.uthena-empty__cta {
margin-top: var(--wp--preset--spacing--30);
}
.uthena-search__empty {
max-width: var(--uthena-w-product);
}
.uthena-search__empty .wp-block-search {
max-width: var(--uthena-w-form);
margin-inline: auto;
}
.uthena-search__suggest {
margin-top: var(--wp--preset--spacing--70);
padding-top: var(--wp--preset--spacing--60);
border-top: 1px solid var(--border-subtle);
}
.uthena-search__suggest-grid {
gap: var(--wp--preset--spacing--40);
}
.uthena-search__suggest-grid > .wp-block-uthena-course-card,
.uthena-search__suggest-grid > article.uthena-course-card {
height: 100%;
}
.uthena-catalog__empty {
max-width: var(--uthena-w-form);
}
.uthena-empty--catalog {
max-width: var(--uthena-w-form);
}
.uthena-404 {
max-width: var(--uthena-w-reading);
}
.uthena-404 .uthena-empty__title {
font-family: var(--wp--preset--font-family--display), system-ui, sans-serif;
}
@media (max-width: 600px) {
.uthena-empty {
padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
}
.uthena-search__suggest {
padding-top: var(--wp--preset--spacing--50);
}
}
/* uthena-consent */

.uthena-cookie-notice.uthena-cookie-notice {
background: var(--surface-raised);
color: var(--text-body);
border-color: var(--border-default);
border-radius: var(--uthena-radius-lg);
font-family: var(--font-body);
}
.uthena-cookie-notice .uthena-cookie-notice__copy a {
color: var(--text-link);
}
.uthena-cookie-notice .uthena-cookie-notice__copy a:hover {
color: var(--text-link-hover);
}
.uthena-cookie-notice .uthena-cookie-notice__details summary {
color: var(--text-link);
}
.uthena-cookie-notice .uthena-cookie-notice__details summary:hover {
color: var(--text-link-hover);
}
.uthena-cookie-notice .uthena-cookie-notice__details summary:focus-visible {
outline: none;
box-shadow: var(--uthena-focus-ring);
}
.uthena-cookie-notice__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.uthena-cookie-notice .uthena-button {
min-height: 40px;
padding: var(--space-1) var(--space-2);
border-radius: var(--uthena-radius-md);
}
.uthena-cookie-notice .uthena-button:focus-visible {
outline: none;
box-shadow: var(--uthena-focus-ring);
}
@media (max-width: 480px) {
.uthena-cookie-notice__actions {
width: 100%;
}
.uthena-cookie-notice__actions .uthena-button {
flex: 1 1 0;
}
}
.uthena-footer .uthena-cookie-settings {
appearance: none;
background: none;
border: 0;
padding: 0;
margin: 0;
min-height: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
box-shadow: none;
}
.uthena-footer .uthena-cookie-settings:hover {
background: none;
color: var(--text-link-hover);
text-decoration: underline;
}
.uthena-footer .uthena-cookie-settings:focus-visible {
outline: none;
box-shadow: var(--uthena-focus-ring);
border-radius: var(--uthena-radius-xs);
}
.uthena-cookie-notice .uthena-cookie-notice__title {
flex: 1 1 100%;
margin: 0;
font-family: var(--font-display);
font-size: var(--type-body);
font-weight: var(--weight-display);
color: var(--text-strong);
}
.uthena-cookie-notice .uthena-cookie-notice__copy {
flex: 1 1 100%;
color: var(--text-secondary);
}
.uthena-cookie-notice__settings {
flex: 1 1 100%;
display: grid;
gap: var(--space-1);
max-height: min(50vh, 420px);
overflow: auto;
}
.uthena-cookie-notice__settings[hidden] {
display: none;
}
.uthena-cookie-notice__category {
padding: var(--space-15) var(--space-2);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
background: var(--surface-inset);
}
.uthena-cookie-notice__category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.uthena-cookie-notice__category-title {
font-weight: var(--weight-strong);
color: var(--text-strong);
cursor: pointer;
}
.uthena-cookie-notice__always {
font-size: var(--type-caption);
font-weight: var(--weight-strong);
color: var(--text-identity);
}
.uthena-cookie-notice__category-desc {
margin: var(--space-05) 0 0;
font-size: var(--type-body-sm);
color: var(--text-secondary);
}
.uthena-cookie-notice__category .uthena-cookie-notice__details {
margin-top: var(--space-05);
font-size: var(--type-caption);
}
.uthena-cookie-notice .uthena-cookie-notice__switch {
appearance: none;
flex: none;
position: relative;
width: 44px;
min-width: 44px;
height: 24px;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid var(--border-strong);
border-radius: var(--uthena-radius-pill);
background: var(--surface-card);
box-shadow: none;
cursor: pointer;
transition: background-color var(--uthena-dur-hover) var(--uthena-ease), border-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-cookie-notice .uthena-cookie-notice__switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--text-muted);
transition: transform var(--uthena-dur-hover) var(--uthena-ease), background-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-cookie-notice .uthena-cookie-notice__switch:checked {
background: var(--teal-500);
border-color: var(--teal-500);
}
.uthena-cookie-notice .uthena-cookie-notice__switch:checked::after {
transform: translateX(20px);
background: var(--white);
}
.uthena-cookie-notice .uthena-cookie-notice__switch:focus-visible {
outline: none;
box-shadow: var(--uthena-focus-ring);
}
.uthena-cookie-notice .uthena-cookie-notice__actions {
flex: 1 1 100%;
justify-content: flex-end;
}
.uthena-cookie-notice .uthena-cookie-notice__actions .uthena-button[hidden] {
display: none;
}
@media (max-width: 480px) {
.uthena-cookie-notice .uthena-cookie-notice__actions .uthena-button {
flex: 1 1 calc(50% - var(--space-1));
}
}
@media (prefers-reduced-motion: reduce) {
.uthena-cookie-notice .uthena-cookie-notice__switch,
.uthena-cookie-notice .uthena-cookie-notice__switch::after {
transition: none;
}
}

/* uthena-style */


/* uthena-product */

.uthena-product {
box-sizing: border-box;
width: 100%;
max-width: calc(var(--uthena-w-product) + 2 * var(--space-gutter));
margin-inline: auto;
padding: var(--space-3) var(--space-gutter) var(--space-section);
}
.uthena-product__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.uthena-product__head,
.uthena-product__aside,
.uthena-product__main {
min-width: 0;
margin: 0;
}
@media (min-width: 1024px) {
.uthena-product__layout {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas:
"head aside"
"main aside";
column-gap: var(--space-6);
row-gap: var(--space-4);
}
.uthena-product__head { grid-area: head; }
.uthena-product__main { grid-area: main; }
.uthena-product__aside {
grid-area: aside;
align-self: start;
}
}
@media (min-width: 1024px) and (min-height: 760px) {
.uthena-product__aside {
position: sticky;
top: calc(var(--uthena-header-h) + var(--space-3));
}
.admin-bar .uthena-product__aside {
top: calc(var(--uthena-header-h) + var(--space-3) + 32px);
}
}
.uthena-breadcrumb {
margin: 0 0 var(--space-3);
font-size: var(--type-body-sm);
}
.uthena-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: var(--space-05) 0;
margin: 0;
padding: 0;
list-style: none;
}
.uthena-breadcrumb li {
display: inline-flex;
align-items: center;
min-width: 0;
margin: 0;
color: var(--text-muted);
}
.uthena-breadcrumb li + li::before {
content: "/";
margin: 0 var(--space-1);
color: var(--text-faint);
}
.uthena-breadcrumb a {
color: var(--text-secondary);
text-decoration: none;
}
.uthena-breadcrumb a:hover {
color: var(--text-link-hover);
text-decoration: underline;
}
.uthena-breadcrumb [aria-current="page"] {
display: inline-block;
max-width: 32ch;
overflow: hidden;
color: var(--text-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.uthena-product-header__eyebrow {
margin-bottom: var(--space-1);
}
.uthena-product-header__eyebrow a {
color: inherit;
text-decoration: none;
}
.uthena-product-header__eyebrow a:hover {
color: var(--text-link-hover);
text-decoration: underline;
}
.uthena-product-header__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-2);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
text-wrap: balance;
}
.uthena-product-header__by {
margin: var(--space-15) 0 0;
color: var(--text-secondary);
font-size: var(--type-body);
}
.uthena-product-header__summary {
max-width: var(--uthena-measure);
margin: var(--space-2) 0 0;
color: var(--text-body);
font-size: var(--type-body-lg);
line-height: var(--leading-body);
}
.uthena-product-header__facts {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
margin: var(--space-3) 0 0;
padding: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
list-style: none;
}
.uthena-product-header__facts li {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin: 0;
}
.uthena-product-header__facts .uthena-icon {
color: var(--text-identity);
}
.uthena-product-header__from {
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-evidence {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
margin: var(--space-3) 0 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
overflow: hidden;
}
.uthena-evidence__item {
margin: 0 -1px -1px 0;
padding: var(--space-15) var(--space-2);
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.uthena-evidence dt {
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-evidence dd {
margin: var(--space-05) 0 0;
color: var(--text-strong);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
.uthena-evidence {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.uthena-product-header__jump {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: var(--space-3) 0 0;
}
@media (min-width: 1024px) {
.uthena-product-header__jump {
display: none;
}
}
.uthena-product__aside {
scroll-margin-top: calc(var(--space-12) + var(--space-2));
}
.uthena-product__media {
margin: 0 0 var(--space-6);
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
}
.uthena-product__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.uthena-product__main > * + * {
margin-top: var(--space-6);
}
.uthena-product-section__head {
margin: 0 0 var(--space-3);
}
.uthena-product-section__title {
margin: 0 0 var(--space-2);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-4);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
}
.uthena-product-section__head .uthena-product-section__title {
margin-bottom: 0;
}
.uthena-product-section__meta {
max-width: var(--uthena-measure);
margin: var(--space-05) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.5;
}
.uthena-learn__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-15) var(--space-4);
margin: 0;
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
list-style: none;
}
.uthena-learn__list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--space-15);
margin: 0;
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.5;
}
.uthena-learn__list .uthena-icon {
margin-top: 2px;
color: var(--text-identity);
}
.uthena-learn__list strong {
color: var(--text-strong);
}
@media (min-width: 768px) {
.uthena-learn__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.uthena-plain-list {
max-width: var(--uthena-measure);
margin: 0;
padding-left: var(--space-3);
color: var(--text-body);
font-size: var(--type-body);
line-height: var(--leading-body);
}
.uthena-plain-list li {
margin: 0 0 var(--space-1);
padding-left: var(--space-05);
}
.uthena-plain-list li::marker {
color: var(--text-identity);
}
.uthena-about__body {
color: var(--text-body);
font-size: var(--type-body);
line-height: var(--leading-body);
}
.uthena-about__body > * {
margin: 0 0 var(--space-2);
}
.uthena-about__body > *:last-child {
margin-bottom: 0;
}
.uthena-about__body h3 {
margin-top: var(--space-4);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-about__body ul,
.uthena-about__body ol {
padding-left: 1.25em;
}
.uthena-about__body li {
margin: 0 0 var(--space-1);
}
.uthena-about__body li > p {
margin: 0;
}
.uthena-about__body strong {
color: var(--text-strong);
}
.uthena-licence-card {
display: grid;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-licence-card__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-licence-card__tiers {
margin: 0;
}
.uthena-licence-card__tier {
min-height: 44px;
}
.uthena-licence-card__long {
margin-left: var(--space-05);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 600;
}
.uthena-licence-card__tier .uthena-radio-row__aside {
white-space: nowrap;
}
.uthena-licence-card__tier .uthena-radio-row__aside del {
display: block;
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 400;
}
.uthena-licence-card__tier .uthena-radio-row__aside ins {
color: var(--text-price-sale);
text-decoration: none;
}
.uthena-licence-card__tier--mrr .uthena-radio-row__title {
color: var(--text-strong);
}
.uthena-licence-card__tier--mrr:has(input:checked) {
border-color: var(--amber-500);
box-shadow: inset 0 0 0 1px var(--amber-500);
background-color: var(--surface-highlight);
}
.uthena-licence-card__tier--mrr input[type="radio"]:checked {
border-color: var(--amber-500);
background-color: var(--amber-500);
}
.uthena-licence-card__tier:has(input:focus-visible) {
border-color: var(--border-focus);
box-shadow: var(--uthena-focus-ring);
}
.uthena-licence-card__tier--static {
grid-template-columns: auto minmax(0, 1fr) auto;
cursor: default;
}
.uthena-licence-card__check {
display: inline-flex;
color: var(--text-identity);
}
.uthena-licence-card__saving {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-licence-card__saving strong {
color: var(--text-saving);
}
.uthena-licence-card__worth {
text-decoration: line-through;
text-decoration-color: var(--text-muted);
}
.uthena-licence-card__box {
padding: var(--space-2) 0 0;
border-top: 1px solid var(--border-subtle);
}
.uthena-licence-card__box-title {
margin: 0 0 var(--space-1);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-licence-card__box-list {
display: grid;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-licence-card__box-list li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: var(--space-15);
align-items: start;
margin: 0;
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.45;
}
.uthena-licence-card__box-list li[hidden] {
display: none;
}
.uthena-licence-card__box-list .uthena-icon {
margin-top: 1px;
color: var(--text-identity);
}
.uthena-licence-card__form form.cart {
margin: 0;
}
.uthena-licence-card__form table.variations,
.uthena-licence-card__form .reset_variations,
.uthena-licence-card__form .woocommerce-variation-price,
.uthena-licence-card__form .woocommerce-variation-description,
.uthena-licence-card__form .woocommerce-variation-availability,
.uthena-licence-card__form .quantity,
.uthena-licence-card__form .stock {
display: none !important;
}
.uthena-licence-card__form .single_variation_wrap,
.uthena-licence-card__form .woocommerce-variation-add-to-cart {
display: block;
margin: 0;
}
.uthena-licence-card__form .single_add_to_cart_button {
display: flex;
width: 100%;
min-height: 52px;
font-size: var(--type-body-lg);
}
.uthena-licence-card.is-in-cart .uthena-licence-card__form .single_add_to_cart_button {
display: none;
}
.uthena-licence-card__checkout {
width: 100%;
min-height: 52px;
font-size: var(--type-body-lg);
}
.uthena-licence-card__checkout[hidden] {
display: none;
}
.uthena-licence-card__form .single_add_to_cart_button.disabled {
--_bg: var(--action-disabled);
--_bg-hover: var(--action-disabled);
--_fg: var(--action-disabled-text);
cursor: not-allowed;
}
.uthena-licence-card__assure {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-05) var(--space-3);
margin: 0;
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 600;
}
.uthena-licence-card__assure > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 599px) {
.uthena-licence-card {
padding: var(--space-2);
}
.uthena-licence-card__long {
display: none;
}
}
.uthena-licence-card__owned {
display: grid;
gap: var(--space-1);
justify-items: start;
}
.uthena-licence-card__owned-text {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-licence-card__actions {
display: grid;
gap: var(--space-1);
width: 100%;
margin-top: var(--space-1);
}
.uthena-licence-card__upgrade {
margin: var(--space-2) 0 0;
padding-top: var(--space-2);
width: 100%;
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-licence-card.is-owned .single_add_to_cart_button {
--_bg: transparent;
--_bg-hover: var(--action-ghost-hover);
--_bg-active: var(--action-ghost-active);
--_fg: var(--text-strong);
--_border: var(--border-strong);
min-height: 44px;
font-size: var(--type-body);
}
.uthena-maker {
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-maker__head {
display: flex;
align-items: center;
gap: var(--space-15);
}
.uthena-maker__avatar {
display: inline-grid;
flex: none;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--surface-identity);
color: var(--text-identity);
font-family: var(--font-display);
font-weight: var(--weight-display);
object-fit: cover;
}
.uthena-maker__who {
min-width: 0;
}
.uthena-maker__label {
margin: 0;
color: var(--text-muted);
font-size: var(--type-caption);
}
.uthena-maker__name {
margin: 0;
color: var(--text-strong);
font-weight: 700;
}
.uthena-maker__name a {
color: inherit;
text-decoration: none;
}
.uthena-maker__name a:hover {
color: var(--text-link-hover);
text-decoration: underline;
}
.uthena-maker__line {
display: -webkit-box;
margin: var(--space-15) 0 0;
overflow: hidden;
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.uthena-maker__more {
margin: var(--space-1) 0 0;
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-curriculum__sections {
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-curriculum__sections--flat {
padding: var(--space-1) 0;
}
.uthena-curriculum__section + .uthena-curriculum__section {
border-top: 1px solid var(--border-subtle);
}
.uthena-curriculum__summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-05) var(--space-15);
min-height: 56px;
padding: var(--space-15) var(--space-2);
cursor: pointer;
list-style: none;
}
.uthena-curriculum__summary::-webkit-details-marker {
display: none;
}
.uthena-curriculum__summary:hover .uthena-curriculum__summary-title {
color: var(--text-link-hover);
}
.uthena-curriculum__num {
min-width: 2ch;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--type-mono);
}
.uthena-curriculum__summary-title {
min-width: 0;
color: var(--text-strong);
font-weight: 700;
}
.uthena-curriculum__summary-meta {
color: var(--text-muted);
font-size: var(--type-body-sm);
white-space: nowrap;
}
.uthena-curriculum__chevron {
grid-column: 4;
color: var(--text-muted);
transition: transform var(--uthena-dur-default) var(--uthena-ease);
}
.uthena-curriculum__section[open] > .uthena-curriculum__summary .uthena-curriculum__chevron {
transform: rotate(180deg);
}
.uthena-curriculum__items {
margin: 0;
padding: 0 0 var(--space-1);
list-style: none;
}
.uthena-curriculum__item {
display: flex;
align-items: flex-start;
gap: var(--space-15);
margin: 0;
padding: var(--space-1) var(--space-2);
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.45;
}
.uthena-curriculum__section .uthena-curriculum__item {
padding-left: calc(var(--space-2) + 2ch + var(--space-15));
}
.uthena-curriculum__type {
flex: none;
padding-top: 2px;
color: var(--text-identity);
line-height: 0;
}
.uthena-curriculum__item.is-quiz .uthena-curriculum__type {
color: var(--text-muted);
}
.uthena-curriculum__item-title {
flex: 1 1 auto;
min-width: 0;
}
.uthena-curriculum__files {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-05);
color: var(--text-muted);
font-size: var(--type-caption);
}
.uthena-curriculum__files .uthena-curriculum__files-icon {
width: 14px;
height: 14px;
}
.uthena-curriculum__time {
flex: none;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--type-mono);
white-space: nowrap;
}
.uthena-curriculum__more > .uthena-curriculum__items {
padding-top: 0;
}
.uthena-curriculum__more-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 44px;
margin: 0 var(--space-2) var(--space-1);
color: var(--text-link);
font-size: var(--type-body-sm);
font-weight: 600;
cursor: pointer;
list-style: none;
}
.uthena-curriculum__section .uthena-curriculum__more-toggle {
margin-left: calc(var(--space-2) + 2ch + var(--space-15));
}
.uthena-curriculum__more-toggle::-webkit-details-marker {
display: none;
}
.uthena-curriculum__more-toggle:hover {
color: var(--text-link-hover);
text-decoration: underline;
}
.uthena-curriculum__more[open] > .uthena-curriculum__more-toggle {
display: none;
}
@media (max-width: 599px) {
.uthena-curriculum__summary {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.uthena-curriculum__summary-meta {
grid-row: 2;
grid-column: 2;
}
.uthena-curriculum__chevron {
grid-row: 1;
grid-column: 3;
}
.uthena-curriculum__section .uthena-curriculum__item,
.uthena-curriculum__section .uthena-curriculum__more-toggle {
padding-left: var(--space-2);
margin-left: 0;
}
.uthena-curriculum__section .uthena-curriculum__more-toggle {
margin-left: var(--space-2);
}
}
.uthena-package__list {
margin: 0;
padding: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
list-style: none;
}
.uthena-package__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr) auto;
gap: var(--space-15);
align-items: center;
margin: 0;
padding: var(--space-15) var(--space-2);
border-top: 1px solid var(--border-subtle);
}
.uthena-package__item:first-child {
border-top: 0;
}
.uthena-package__icon {
display: inline-flex;
color: var(--text-identity);
}
.uthena-package__name {
color: var(--text-strong);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-package__type {
margin-left: var(--space-1);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
}
.uthena-package__size {
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--type-mono);
white-space: nowrap;
}
.uthena-package__note {
margin: var(--space-15) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-rmx__wrap {
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-rmx__table {
width: 100%;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
font-size: var(--type-body-sm);
}
.uthena-rmx__table th,
.uthena-rmx__table td {
padding: var(--space-1) var(--space-2);
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.uthena-rmx__table tbody:last-child tr:last-child > * {
border-bottom: 0;
}
.uthena-rmx__table thead th {
padding-block: var(--space-15);
background-color: var(--surface-sunken);
}
.uthena-rmx__corner {
width: auto;
}
.uthena-rmx__tier {
width: 84px;
text-align: center;
}
.uthena-rmx__group th {
padding-top: var(--space-2);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-align: left;
text-transform: uppercase;
}
.uthena-rmx__right {
color: var(--text-body);
font-weight: 400;
line-height: 1.45;
text-align: left;
}
.uthena-rmx__cell {
text-align: center;
}
.uthena-rmx__mark {
display: inline-flex;
align-items: center;
gap: var(--space-05);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: 0.04em;
white-space: nowrap;
}
.uthena-rmx__mark--yes {
color: var(--text-identity);
}
.uthena-rmx__mark--no {
color: var(--text-muted);
}
.uthena-rmx__bracket {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.uthena-rmx__more {
margin-top: var(--space-15);
}
.uthena-rmx__more[open] {
display: flex;
flex-direction: column-reverse;
gap: var(--space-15);
}
.uthena-rmx__toggle {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 44px;
padding: 0 var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
color: var(--text-strong);
font-size: var(--type-body-sm);
font-weight: 700;
cursor: pointer;
list-style: none;
width: fit-content;
}
.uthena-rmx__toggle::-webkit-details-marker {
display: none;
}
.uthena-rmx__toggle:hover {
border-color: var(--border-strong);
background-color: var(--action-ghost-hover);
}
.uthena-rmx__toggle-close,
.uthena-rmx__more[open] .uthena-rmx__toggle-open {
display: none;
}
.uthena-rmx__more[open] .uthena-rmx__toggle-close {
display: inline;
}
.uthena-rmx__chevron {
transition: transform var(--uthena-dur-default) var(--uthena-ease);
}
.uthena-rmx__more[open] .uthena-rmx__chevron {
transform: rotate(180deg);
}
.uthena-rmx__head--repeat th {
padding: 0;
border: 0;
line-height: 0;
}
.uthena-rmx__head--repeat th > * {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
@media (max-width: 599px) {
.uthena-rmx__table th,
.uthena-rmx__table td {
padding-inline: var(--space-1);
}
.uthena-rmx__tier {
width: 64px;
}
.uthena-rmx__table[data-cols="3"] .uthena-rmx__tier {
width: 62px;
padding-inline: 2px;
}
.uthena-rmx__table[data-cols="3"] .uthena-rmx__tier .uthena-badge {
padding-inline: 5px;
font-size: var(--type-micro);
letter-spacing: 0;
}
.uthena-rmx__table[data-cols="3"] .uthena-rmx__word {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
}
.uthena-instructor__card {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--space-2);
align-items: start;
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
.uthena-instructor__avatar {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
background-color: var(--surface-identity);
color: var(--text-identity);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-instructor__name {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-instructor__meta {
margin: var(--space-05) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-instructor__bio {
margin-top: var(--space-15);
color: var(--text-body);
font-size: var(--type-body-sm);
}
.uthena-instructor__bio p {
margin: 0 0 var(--space-1);
}
.uthena-instructor__link {
margin: var(--space-15) 0 0;
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-product-faq .uthena-accordion__body p {
margin: 0 0 var(--space-2);
color: var(--text-body);
}
.uthena-product-faq__more {
margin: var(--space-2) 0 0;
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-bundle-contents__list {
margin: 0;
padding: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
list-style: none;
}
.uthena-bundle-contents__item {
display: grid;
grid-template-columns: 128px minmax(0, 1fr) auto;
gap: var(--space-2);
align-items: center;
margin: 0;
padding: var(--space-2);
border-top: 1px solid var(--border-subtle);
}
.uthena-bundle-contents__item:first-child {
border-top: 0;
}
.uthena-bundle-contents__thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-sm);
background-color: var(--surface-sunken);
}
.uthena-bundle-contents__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.uthena-bundle-contents__thumb .uthena-cover {
height: 100%;
border: 0;
border-radius: 0;
}
.uthena-bundle-contents__body {
display: grid;
gap: 2px;
min-width: 0;
}
.uthena-bundle-contents__category {
color: var(--text-identity);
font-size: var(--type-caption);
font-weight: 700;
}
.uthena-bundle-contents__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-body);
font-weight: var(--weight-display);
line-height: 1.35;
}
.uthena-bundle-contents__title a {
color: var(--text-strong);
text-decoration: none;
}
.uthena-bundle-contents__title a:hover {
color: var(--text-action);
}
.uthena-bundle-contents__meta {
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-bundle-contents__price {
display: grid;
justify-items: end;
color: var(--text-strong);
font-family: var(--font-display);
font-weight: var(--weight-display);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.uthena-bundle-contents__price-label {
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 600;
}
@media (max-width: 599px) {
.uthena-bundle-contents__item {
grid-template-columns: 96px minmax(0, 1fr);
}
.uthena-bundle-contents__price {
grid-column: 2;
justify-items: start;
display: flex;
gap: var(--space-1);
align-items: baseline;
}
}
.uthena-related {
margin-top: var(--space-section);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.uthena-related__title {
margin: 0 0 var(--space-3);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-3);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
}
@media (min-width: 1024px) {
.uthena-related__list.uthena-course-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.uthena-licence-card__availability {
margin-block: var(--space-4);
padding: var(--space-3);
border-inline-start: 3px solid var(--border-subtle);
background: var(--surface-sunken);
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: var(--leading-body);
overflow-wrap: anywhere;
}
.uthena-licence-card__availability p { margin: 0; }
.uthena-licence-card__availability p + p { margin-top: var(--space-2); }
.uthena-licence-card__availability strong { color: var(--text-strong); }
.uthena-reviews__notice {
margin-bottom: var(--space-3);
}
.uthena-reviews__summary {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
}
@media (min-width: 600px) {
.uthena-reviews__summary {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
}
}
.uthena-reviews__score {
display: grid;
justify-items: start;
gap: var(--space-1);
}
.uthena-reviews__average {
color: var(--text-strong);
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: var(--weight-display);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.uthena-reviews__count {
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-reviews__bars {
display: grid;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-reviews__bar {
display: grid;
grid-template-columns: 4.5em minmax(0, 1fr) 2.5em;
align-items: center;
gap: var(--space-15);
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-reviews__bar-track {
height: 8px;
overflow: hidden;
border-radius: var(--uthena-radius-pill);
background-color: var(--rating-track);
}
.uthena-reviews__bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background-color: var(--rating-star);
}
.uthena-reviews__bar-count {
text-align: right;
font-variant-numeric: tabular-nums;
}
.uthena-reviews__list {
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.uthena-review {
padding: var(--space-3) 0;
border-top: 1px solid var(--border-subtle);
}
.uthena-review:first-child {
border-top: 0;
padding-top: 0;
}
.uthena-review__head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-15);
}
.uthena-review__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-review__body {
max-width: var(--uthena-measure);
margin-top: var(--space-1);
color: var(--text-body);
overflow-wrap: anywhere;
}
.uthena-review__body p {
margin: 0 0 var(--space-1);
}
.uthena-review__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-05) var(--space-2);
margin: var(--space-1) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-review__author {
color: var(--text-secondary);
font-weight: 600;
}
.uthena-review__verified {
display: inline-flex;
align-items: center;
gap: var(--space-05);
color: var(--text-identity);
}
.uthena-review__reply {
max-width: var(--uthena-measure);
margin: var(--space-2) 0 0;
padding: var(--space-15) var(--space-2);
border-left: 3px solid var(--border-selected);
border-radius: 0 var(--uthena-radius-sm) var(--uthena-radius-sm) 0;
background-color: var(--surface-raised);
color: var(--text-body);
font-size: var(--type-body-sm);
}
.uthena-review__reply p {
margin: 0;
}
.uthena-review__reply-by {
margin-bottom: var(--space-05) !important;
color: var(--text-strong);
font-weight: 600;
}
.uthena-reviews__more {
margin-top: var(--space-2);
}
.uthena-review-form,
.uthena-reviews__login {
margin-top: var(--space-4);
padding: var(--space-3);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
scroll-margin-top: var(--space-8);
}
.uthena-reviews__login p {
margin: 0 0 var(--space-2);
color: var(--text-body);
}
.uthena-review-form__title {
margin: 0 0 var(--space-2);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-review-form .uthena-field {
margin-top: var(--space-2);
}
.uthena-review-form .uthena-field input[type="text"],
.uthena-review-form textarea {
width: 100%;
}
.uthena-review-form button[type="submit"] {
margin-top: var(--space-3);
}
.uthena-review-form__rating {
margin: 0;
padding: 0;
border: 0;
}

/* uthena-marketing */

.uthena-section.alignfull,
.uthena-hero.alignfull {
margin-block: 0;
}
.uthena-section--flush-top {
padding-top: 0;
}
.uthena-band + .uthena-section--flush-top {
padding-top: var(--space-section);
}
.uthena-page-head {
padding-bottom: var(--space-6);
}
.uthena-page-head__inner {
max-width: 760px;
}
.uthena-page-head h1 {
margin-bottom: var(--space-2);
}
.uthena-page-head .wp-block-buttons {
margin-top: var(--space-4);
}
.uthena-split__link a,
.uthena-rail-head__link a,
.uthena-hero__links a,
.uthena-404__links a,
.uthena-search-empty__all a,
.uthena-ladder__foot a {
font-weight: 600;
}
.uthena-hero__grid > *,
.uthena-split > *,
.uthena-contact > *,
.uthena-teach > *,
.uthena-section-head > * {
margin: 0;
}
.uthena-hero {
padding-block: var(--space-8) var(--space-section);
border-bottom: 1px solid var(--border-subtle);
}
.uthena-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
}
.uthena-hero__title {
margin: 0 0 var(--space-3);
font-size: var(--type-display-1);
font-weight: var(--weight-display-1);
line-height: 1.08;
letter-spacing: var(--tracking-display);
max-width: 14ch;
}
.uthena-hero__lead {
max-width: 52ch;
margin: 0 0 var(--space-4);
color: var(--text-body);
font-size: var(--type-body-lg);
line-height: 1.55;
}
.uthena-hero__search {
max-width: 520px;
margin: 0 0 var(--space-3);
}
.uthena-product-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
align-items: center;
gap: var(--space-05);
padding: 4px;
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
box-shadow: var(--uthena-shadow-input);
transition: border-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-product-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:hover {
border-color: var(--border-strong);
}
.uthena-product-search.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
border-color: var(--border-focus);
box-shadow: var(--uthena-focus-ring);
}
.uthena-product-search .wp-block-search__input,
.uthena-product-search .wp-block-search__input:hover,
.uthena-product-search .wp-block-search__input:focus {
min-height: 44px;
padding-inline: var(--space-15);
border: 0;
background: transparent;
box-shadow: none;
outline: none;
}
.uthena-product-search .wp-block-search__button {
flex: none;
min-height: 44px;
margin: 0;
}
.uthena-hero__links {
margin: 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-hero__links span {
margin-inline: var(--space-1);
}
.uthena-hero__cards {
margin: 0;
}
.uthena-hero__list {
display: grid;
gap: var(--space-2);
}
.uthena-hero__list > li {
margin: 0;
}
.uthena-hero__list .uthena-course-card__link {
display: grid;
grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
align-items: stretch;
}
.uthena-hero__list .uthena-course-card__thumb {
aspect-ratio: auto;
min-height: 100%;
}
.uthena-hero__list .uthena-course-card__thumb img {
position: absolute;
inset: 0;
}
.uthena-hero__list .uthena-course-card__body {
gap: var(--space-05);
padding: var(--space-2);
}
.uthena-hero__list .uthena-course-card__title {
display: -webkit-box;
overflow: hidden;
font-size: var(--type-body);
font-weight: var(--weight-display);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.uthena-hero__list .uthena-course-card__instructor,
.uthena-hero__list .uthena-course-card__meta {
display: none;
}
.uthena-hero__list .uthena-course-card__price {
padding-top: var(--space-05);
font-size: var(--type-body);
}
@media (min-width: 1024px) {
.uthena-hero__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-8);
}
}
.uthena-section-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.uthena-section-head__text {
max-width: 60ch;
color: var(--text-secondary);
}
@media (min-width: 1024px) {
.uthena-section-head {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-8);
align-items: end;
}
}
.uthena-ladder {
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-xl);
background-color: var(--surface-card);
overflow: hidden;
}
.uthena-ladder__table {
width: 100%;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
}
.uthena-ladder__table th,
.uthena-ladder__table td {
padding: var(--space-2) var(--space-3);
border: 0;
border-bottom: 1px solid var(--border-subtle);
background: none;
vertical-align: middle;
}
.uthena-ladder__table thead th {
padding-block: var(--space-3);
letter-spacing: normal;
text-transform: none;
text-align: center;
vertical-align: bottom;
background-color: var(--surface-subtle);
}
.uthena-ladder__corner {
width: 46%;
background-color: var(--surface-subtle);
}
.uthena-ladder__tier {
display: block;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.2;
}
.uthena-ladder__sum {
display: block;
margin-top: var(--space-05);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 400;
line-height: 1.35;
}
.uthena-ladder__table tbody th {
color: var(--text-body);
font-family: var(--font-body);
font-size: var(--type-body);
font-weight: 400;
line-height: 1.45;
text-align: left;
}
.uthena-ladder__table tbody td {
text-align: center;
}
.uthena-ladder__table tbody tr:last-child > * {
border-bottom: 0;
}
.uthena-ladder__foot {
margin: 0;
padding: var(--space-2) var(--space-3);
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--uthena-radius-pill);
}
.uthena-mark--yes {
background-color: var(--surface-identity);
color: var(--text-identity);
}
.uthena-mark--no {
color: var(--text-faint);
}
@media (max-width: 599px) {
.uthena-ladder__table th,
.uthena-ladder__table td {
padding: var(--space-15) var(--space-1);
}
.uthena-ladder__table tbody th {
padding-left: var(--space-2);
font-size: var(--type-body-sm);
}
.uthena-ladder__corner {
width: 36%;
}
.uthena-ladder__table thead th {
padding-inline: var(--space-05);
}
.uthena-ladder__tier {
font-size: var(--type-caption);
overflow-wrap: normal;
}
.uthena-ladder__sum {
display: none;
}
.uthena-mark {
width: 28px;
height: 28px;
}
}
.uthena-rail-head {
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.uthena-rail-head__title,
.uthena-rail-head__link {
margin: 0;
}
.uthena-rail {
margin: 0;
}
.uthena-rail__list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(260px, 78%);
gap: var(--space-3);
padding-bottom: var(--space-1);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.uthena-rail__list > li {
margin: 0;
scroll-snap-align: start;
}
.uthena-rail__saving {
color: var(--text-saving);
font-weight: 600;
}
@media (min-width: 768px) {
.uthena-rail__list {
grid-auto-columns: minmax(280px, 42%);
}
}
@media (min-width: 1024px) {
.uthena-rail__list {
grid-auto-flow: row;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: visible;
}
.uthena-rail--three .uthena-rail__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.uthena-split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
.uthena-split__aside > :last-child,
.uthena-split__main > :last-child {
margin-bottom: 0;
}
.uthena-split__aside p {
color: var(--text-secondary);
}
@media (min-width: 1024px) {
.uthena-split {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-3);
}
.uthena-split > .uthena-split__aside:first-child {
grid-column: 1 / span 4;
}
.uthena-split > .uthena-split__aside:first-child + .uthena-split__main {
grid-column: 6 / span 7;
}
.uthena-split > .uthena-split__aside:first-child + .uthena-rail {
grid-column: 5 / -1;
}
.uthena-split > .uthena-split__main:first-child {
grid-column: 1 / span 6;
}
.uthena-split > .uthena-split__main:first-child + .uthena-split__aside {
grid-column: 8 / span 5;
}
.uthena-split > .uthena-split__aside:first-child + .uthena-rail .uthena-rail__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.uthena-rows-title {
margin-bottom: var(--space-3);
}
.uthena-rows {
margin: 0;
border-top: 1px solid var(--border-subtle);
}
.uthena-rows__row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-1);
padding-block: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.uthena-rows dt {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-rows__sub {
display: block;
margin-top: var(--space-05);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 400;
}
.uthena-rows dd {
max-width: 66ch;
margin: 0;
color: var(--text-body);
}
.uthena-rows dd p:last-child {
margin-bottom: 0;
}
.uthena-rows-foot {
margin: var(--space-3) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
@media (min-width: 768px) {
.uthena-rows__row {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--space-3);
}
}
.uthena-teach {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-4) var(--space-3);
border-radius: var(--uthena-radius-xl);
background-color: var(--surface-identity);
}
.uthena-teach__figure {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.uthena-teach__number {
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-1);
font-weight: var(--weight-display-1);
line-height: 1;
letter-spacing: var(--tracking-display);
font-variant-numeric: tabular-nums;
}
.uthena-teach__caption {
max-width: 22ch;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-teach__copy p {
max-width: 58ch;
color: var(--text-body);
}
.uthena-teach .wp-block-buttons {
margin-top: var(--space-3);
}
@media (min-width: 1024px) {
.uthena-teach {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
gap: var(--space-6);
align-items: center;
padding: var(--space-6) var(--space-8);
}
}
.uthena-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--border-subtle);
overflow: hidden;
}
.uthena-facts__item {
display: flex;
flex-direction: column;
gap: var(--space-05);
padding: var(--space-3);
background-color: var(--surface-card);
}
.uthena-facts dt {
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-facts dd {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-3);
font-weight: var(--weight-display);
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.uthena-facts dd.uthena-facts__note {
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 400;
line-height: 1.4;
}
.uthena-page-head .uthena-facts {
margin-top: var(--space-6);
}
@media (min-width: 1024px) {
.uthena-facts--row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.uthena-econ {
width: 100%;
margin: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
border-collapse: separate;
border-spacing: 0;
background-color: var(--surface-card);
overflow: hidden;
}
.uthena-econ__caption {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-subtle);
border-bottom: 0;
border-radius: var(--uthena-radius-lg) var(--uthena-radius-lg) 0 0;
background-color: var(--surface-subtle);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-align: left;
text-transform: uppercase;
}
.uthena-econ:has(caption) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.uthena-econ th,
.uthena-econ td {
padding: var(--space-2) var(--space-3);
border: 0;
border-top: 1px solid var(--border-subtle);
background: none;
vertical-align: top;
text-align: left;
}
.uthena-econ tr:first-child > * {
border-top: 0;
}
.uthena-econ th {
width: 34%;
color: var(--text-muted);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-econ td {
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.5;
}
.uthena-econ td strong {
display: block;
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
}
.uthena-steps {
display: grid;
gap: var(--space-3);
margin: var(--space-4) 0 0;
padding: 0;
list-style: none;
counter-reset: uthena-step;
}
.uthena-steps__item {
position: relative;
margin: 0;
padding-top: var(--space-6);
border-top: 1px solid var(--border-default);
counter-increment: uthena-step;
}
.uthena-steps__item::before {
content: counter(uthena-step);
position: absolute;
top: var(--space-2);
left: 0;
color: var(--text-identity);
font-family: var(--font-display);
font-size: var(--type-body-sm);
font-weight: var(--weight-display);
font-variant-numeric: tabular-nums;
}
.uthena-steps__title {
margin: 0 0 var(--space-1);
font-size: var(--type-display-5);
}
.uthena-steps__item p {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.55;
}
@media (min-width: 768px) {
.uthena-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.uthena-steps {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}
.uthena-steps--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.uthena-checklist {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--border-subtle);
}
.uthena-checklist li {
display: flex;
gap: var(--space-15);
align-items: flex-start;
margin: 0;
padding-block: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-body);
}
.uthena-checklist__icon {
flex: none;
margin-top: 3px;
color: var(--text-identity);
}
.uthena-split__main.uthena-accordion {
margin: 0;
}
.uthena-apply {
border-top: 1px solid var(--border-subtle);
}
.uthena-apply__terms {
margin-top: var(--space-2);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-apply-form,
.uthena-contact-form {
margin: 0;
}
.uthena-apply-form__intro,
.uthena-contact-form__intro {
margin: 0 0 var(--space-3);
color: var(--text-secondary);
}
.uthena-apply-form__field,
.uthena-contact-form__field {
margin: 0 0 var(--space-3);
}
.uthena-apply-form__field small,
.uthena-contact-form__field small {
display: block;
margin-top: 2px;
color: var(--text-muted);
font-weight: 400;
}
.uthena-apply-form__submit,
.uthena-contact-form__submit {
margin: var(--space-4) 0 0;
}
.uthena-apply-form__submit .wp-element-button,
.uthena-contact-form__submit .wp-element-button {
width: 100%;
}
.uthena-signup-form__row {
display: grid;
gap: var(--space-3) var(--space-2);
margin: 0 0 var(--space-3);
}
.uthena-signup-form__row > .uthena-field {
margin: 0;
}
@media (min-width: 480px) {
.uthena-signup-form__row {
grid-template-columns: 1fr 1fr;
}
}
.uthena-signup-form input:not([type="checkbox"]),
.uthena-signup-form textarea {
width: 100%;
}
.uthena-signup-form__terms {
margin-top: var(--space-1);
}
.uthena-signup-form__login {
margin: var(--space-2) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
text-align: center;
}
.uthena-apply-form__honeypot,
.uthena-contact-form__honeypot {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.uthena-contact {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
.uthena-contact__form {
max-width: var(--uthena-w-form);
}
.uthena-contact__aside {
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-subtle);
}
.uthena-contact__aside h3 {
margin: 0 0 var(--space-15);
font-size: var(--type-display-5);
}
.uthena-contact__aside h3:not(:first-child) {
margin-top: var(--space-4);
}
.uthena-contact__emails dd {
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-contact__emails dd a {
font-size: var(--type-body);
font-weight: 600;
}
.uthena-contact__list {
margin: 0;
padding-left: var(--space-3);
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
@media (min-width: 1024px) {
.uthena-contact {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-8);
align-items: start;
}
}
.uthena-company {
max-width: 760px;
}
.affwp-form fieldset {
margin: 0;
padding: 0;
border: 0;
}
.affwp-form legend {
margin-bottom: var(--space-3);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.affwp-form p {
margin: 0 0 var(--space-3);
}
.affwp-form .required {
color: var(--text-muted);
font-weight: 400;
}
.uthena-jump ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.uthena-jump li {
margin: 0;
}
[id="ordering"],
[id="licenses"],
[id="access"],
[id="instructors"],
[id="licensing"],
[id="apply"] {
scroll-margin-top: calc(var(--uthena-header-h) + var(--space-2));
}
.uthena-rights-title {
margin: var(--space-6) 0 var(--space-2);
}
.uthena-rights {
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
overflow: hidden;
}
.uthena-rights__table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.uthena-rights__table th,
.uthena-rights__table td {
padding: var(--space-15) var(--space-2);
border: 0;
border-bottom: 1px solid var(--border-subtle);
background: none;
font-size: var(--type-body-sm);
vertical-align: middle;
}
.uthena-rights__table thead th {
position: static;
background-color: var(--surface-subtle);
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-align: center;
text-transform: uppercase;
}
.uthena-rights__table thead th:first-child,
.uthena-rights__table tbody th {
text-align: left;
}
.uthena-rights__table tbody th {
color: var(--text-body);
font-family: var(--font-body);
font-weight: 400;
}
.uthena-rights__table td {
width: 16%;
text-align: center;
}
.uthena-rights__table tbody tr:last-child > * {
border-bottom: 0;
}
.uthena-right {
display: inline-flex;
align-items: center;
gap: var(--space-05);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: 0.04em;
}
.uthena-right--yes {
color: var(--text-identity);
}
.uthena-right--no {
color: var(--text-muted);
}
.uthena-right__text [aria-hidden="true"] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (max-width: 599px) {
.uthena-rights__table th,
.uthena-rights__table td {
padding: var(--space-15) var(--space-05);
}
.uthena-rights__table tbody th {
padding-left: var(--space-15);
}
.uthena-rights__table thead th {
letter-spacing: 0.02em;
}
.uthena-right__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.uthena-blog-page {
padding-block: var(--space-8) var(--space-section);
}
.uthena-blog-head {
margin-bottom: var(--space-6);
}
.uthena-blog-head h1 {
margin-bottom: var(--space-15);
}
.uthena-blog-head .uthena-lead {
max-width: 60ch;
color: var(--text-secondary);
}
.uthena-blog-head__up {
margin: 0 0 var(--space-1);
font-size: var(--type-body-sm);
}
.uthena-blog-cats {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.uthena-blog-cats li {
margin: 0;
}
.uthena-blog-cats a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 6px var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-pill);
color: var(--text-secondary);
font-size: var(--type-body-sm);
font-weight: 600;
text-decoration: none;
}
.uthena-blog-cats a:hover {
border-color: var(--border-strong);
color: var(--text-strong);
text-decoration: none;
}
.uthena-blog-cats .current-cat a {
border-color: var(--border-selected);
background-color: var(--surface-selected);
color: var(--text-strong);
}
.uthena-blog {
margin: 0;
}
.uthena-blog__list {
margin: 0;
padding: 0;
border-top: 1px solid var(--border-subtle);
list-style: none;
}
.uthena-blog__list > li {
margin: 0;
border-bottom: 1px solid var(--border-subtle);
}
.uthena-postrow {
position: relative;
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
gap: var(--space-2);
align-items: start;
padding-block: var(--space-3);
}
.uthena-postrow > * {
margin: 0;
}
.uthena-postrow__media {
margin: 0;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-md);
overflow: hidden;
}
.uthena-postrow__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
}
.uthena-postrow__media .uthena-cover {
border: 0;
border-radius: 0;
}
.uthena-postrow__body {
display: flex;
flex-direction: column;
gap: var(--space-05);
min-width: 0;
}
.uthena-postrow__body > * {
margin: 0;
}
.uthena-postrow__terms {
position: relative;
z-index: 1;
color: var(--text-identity);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-postrow__terms a {
color: inherit;
text-decoration: none;
}
.uthena-postrow__terms a:hover {
color: var(--text-strong);
}
.uthena-postrow__title {
font-size: var(--type-display-5);
line-height: 1.3;
}
.uthena-postrow__title a {
color: var(--text-strong);
text-decoration: none;
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-postrow__title a::after {
content: "";
position: absolute;
inset: 0;
}
.uthena-postrow:hover .uthena-postrow__title a {
color: var(--text-action);
}
.uthena-postrow__excerpt,
.uthena-postrow__excerpt p {
display: none;
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.55;
}
.uthena-postrow__meta,
.uthena-article__byline,
.uthena-article__byline > * {
color: var(--text-muted);
font-size: var(--type-body-sm);
}
@media (min-width: 768px) {
.uthena-postrow {
grid-template-columns: 240px minmax(0, 1fr);
gap: var(--space-3);
}
.uthena-postrow__excerpt,
.uthena-postrow__excerpt p {
display: block;
}
body:not(.paged) .uthena-blog__list:not(.uthena-blog__list--plain) > li:first-child .uthena-postrow {
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: var(--space-4);
align-items: center;
padding-block: var(--space-4);
}
body:not(.paged) .uthena-blog__list:not(.uthena-blog__list--plain) > li:first-child .uthena-postrow__title {
font-size: var(--type-display-3);
line-height: var(--leading-display);
}
body:not(.paged) .uthena-blog__list:not(.uthena-blog__list--plain) > li:first-child .uthena-postrow__media {
border-radius: var(--uthena-radius-lg);
}
}
@media (min-width: 768px) {
.uthena-postrow--compact {
grid-template-columns: 176px minmax(0, 1fr);
}
}
.uthena-blog__pagination {
margin-top: var(--space-6);
}
.uthena-search-page__field {
max-width: 560px;
margin-top: var(--space-3);
}
.uthena-search-empty {
padding-block: var(--space-4);
}
.uthena-search-empty__title {
font-size: var(--type-display-4);
}
.uthena-search-empty__body {
max-width: 60ch;
color: var(--text-secondary);
}
.uthena-search-empty__field {
max-width: 560px;
margin-block: var(--space-3);
}
.uthena-search-empty__all {
margin-top: var(--space-3);
}
.uthena-topics {
margin-top: var(--space-4);
}
.uthena-topics__title {
margin: 0 0 var(--space-15);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-topics__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-topics__list li {
margin: 0;
}
.uthena-article {
padding-block: var(--space-8) var(--space-section);
}
.uthena-article__head {
margin-bottom: var(--space-4);
}
.uthena-article__head > * {
margin: 0;
}
.uthena-article__terms {
margin-bottom: var(--space-15);
color: var(--text-identity);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-article__terms a {
color: inherit;
text-decoration: none;
}
.uthena-article__title {
margin-block: var(--space-15) var(--space-2);
}
.uthena-article__byline {
gap: var(--space-1);
}
.uthena-article__author {
color: var(--text-secondary);
font-weight: 600;
}
.uthena-article__author::after {
content: "·";
margin-left: var(--space-1);
color: var(--text-muted);
font-weight: 400;
}
.uthena-article__media:has(.uthena-cover) {
display: none;
}
.uthena-article__media {
margin-bottom: var(--space-4);
}
.uthena-article__media img {
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
}
.uthena-article__author-box {
display: block;
margin-top: var(--space-6);
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-subtle);
}
.uthena-article__author-box .wp-block-post-author__byline {
margin: 0;
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-article__author-box .wp-block-post-author__name {
margin: var(--space-05) 0 var(--space-1);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
}
.uthena-article__author-box .wp-block-post-author__bio {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
}
.uthena-article__nav {
margin-top: var(--space-4);
gap: var(--space-2);
font-size: var(--type-body-sm);
}
.uthena-article__nav > * {
max-width: 48%;
}
.uthena-article__nav a {
font-weight: 600;
}
.uthena-article__rail {
margin: 0;
}
.uthena-404 {
padding-block: var(--space-8) var(--space-section);
}
.uthena-404 > * {
margin-inline: 0 !important;
}
.uthena-404__code {
margin: 0 0 var(--space-15);
color: var(--text-identity);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-404 .uthena-lead {
color: var(--text-secondary);
}
.uthena-404__search {
max-width: 560px;
margin-top: var(--space-4);
}
.uthena-404__links {
margin-top: var(--space-4);
color: var(--text-muted);
}
.uthena-404__links span {
margin-inline: var(--space-1);
}
.uthena-legal {
padding-block: var(--space-8) var(--space-section);
}
.uthena-legal__title {
margin-bottom: var(--space-1);
}
.uthena-legal__updated {
margin: 0 0 var(--space-4);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-toc {
margin: 0 0 var(--space-6);
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-subtle);
}
.uthena-toc__title {
margin: 0 0 var(--space-15);
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-toc__list {
margin: 0;
padding-left: var(--space-3);
font-size: var(--type-body-sm);
line-height: 1.5;
}
.uthena-toc__list li {
margin: 0 0 var(--space-05);
padding-left: var(--space-05);
break-inside: avoid;
}
.uthena-toc__list li::marker {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.uthena-legal__body h2 {
scroll-margin-top: calc(var(--uthena-header-h) + var(--space-2));
font-size: var(--type-display-4);
}
@media (max-width: 599px) {
.uthena-legal__body .wp-block-table th,
.uthena-legal__body .wp-block-table td {
padding: var(--space-1);
font-size: var(--type-body-sm);
letter-spacing: 0;
hyphens: auto;
}
.uthena-legal__body .wp-block-table th:not(:first-child),
.uthena-legal__body .wp-block-table td:not(:first-child) {
width: 1%;
white-space: nowrap;
font-size: var(--type-caption);
text-transform: none;
}
}
@media (min-width: 768px) {
.uthena-toc__list {
columns: 2;
column-gap: var(--space-6);
}
}
.uthena-mk-head__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
}
.uthena-mk-head__grid > *,
.uthena-mk-head__copy > :last-child {
margin-bottom: 0;
}
.uthena-mk-head__copy h1 {
max-width: 16ch;
margin: 0 0 var(--space-2);
}
.uthena-mk-head__copy .uthena-lead {
max-width: 56ch;
}
.uthena-mk-head__actions {
margin-top: var(--space-4);
}
.uthena-mk-head__meta {
max-width: 56ch;
margin: var(--space-3) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-mk-head__meta strong {
color: var(--text-strong);
font-variant-numeric: tabular-nums;
}
.uthena-mk-head__media .uthena-shot {
box-shadow: var(--uthena-shadow-card);
}
.uthena-page-head .uthena-mk-facts {
margin-top: var(--space-8);
}
.uthena-facts__item--identity {
background-color: var(--surface-identity);
}
.uthena-facts__item--identity dt {
color: var(--text-identity);
}
@media (min-width: 1024px) {
.uthena-mk-head__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-8);
}
}
.uthena-shot {
margin: 0;
min-width: 0;
}
.uthena-shot__frame {
overflow: hidden;
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-page);
}
.uthena-shot__bar {
display: flex;
align-items: center;
min-height: 32px;
margin: 0;
padding: 0 var(--space-15);
border-bottom: 1px solid var(--border-subtle);
background-color: var(--surface-card);
}
.uthena-shot__url {
overflow: hidden;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: var(--type-micro);
white-space: nowrap;
text-overflow: ellipsis;
}
.uthena-shot img {
display: block;
width: 100%;
height: auto;
}
.uthena-shot__caption {
margin-top: var(--space-1);
color: var(--text-muted);
font-size: var(--type-body-sm);
}
.uthena-walk {
display: grid;
gap: var(--space-8);
margin: 0;
padding: 0;
list-style: none;
counter-reset: uthena-walk;
}
.uthena-walk__step {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin: 0;
counter-increment: uthena-walk;
}
.uthena-walk__text::before {
content: counter(uthena-walk, decimal-leading-zero);
display: block;
margin-bottom: var(--space-15);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border-default);
color: var(--text-identity);
font-family: var(--font-display);
font-size: var(--type-body-sm);
font-weight: var(--weight-display);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-caps);
}
.uthena-walk__title {
margin: 0 0 var(--space-1);
font-size: var(--type-display-4);
}
.uthena-walk__text p {
max-width: 48ch;
margin: 0;
color: var(--text-secondary);
}
@media (min-width: 1024px) {
.uthena-walk {
gap: var(--space-12);
}
.uthena-walk__step {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-3);
align-items: center;
}
.uthena-walk__text {
grid-column: 1 / span 4;
grid-row: 1;
}
.uthena-walk__step > .uthena-shot {
grid-column: 6 / -1;
grid-row: 1;
}
.uthena-walk__step:nth-child(even) .uthena-walk__text {
grid-column: 9 / -1;
}
.uthena-walk__step:nth-child(even) > .uthena-shot {
grid-column: 1 / span 7;
}
}
.uthena-ledgers {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
.uthena-ledger {
width: 100%;
margin: 0;
border: 1px solid var(--border-subtle);
border-top: 0;
border-radius: 0 0 var(--uthena-radius-lg) var(--uthena-radius-lg);
border-collapse: separate;
border-spacing: 0;
background-color: var(--surface-card);
font-variant-numeric: tabular-nums;
}
.uthena-ledger__title {
padding: var(--space-3) var(--space-3) var(--space-2);
border: 1px solid var(--border-subtle);
border-bottom: 0;
border-radius: var(--uthena-radius-lg) var(--uthena-radius-lg) 0 0;
background-color: var(--surface-card);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
text-align: left;
}
.uthena-ledger__sub {
display: block;
margin-top: var(--space-05);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 400;
line-height: 1.5;
}
.uthena-ledger th,
.uthena-ledger td {
padding: var(--space-15) var(--space-3);
border: 0;
border-top: 1px solid var(--border-subtle);
background: none;
font-size: var(--type-body);
}
.uthena-ledger th {
color: var(--text-secondary);
font-weight: 400;
text-align: left;
}
.uthena-ledger td {
color: var(--text-strong);
text-align: right;
}
.uthena-ledger tfoot th,
.uthena-ledger tfoot td {
padding-block: var(--space-2) var(--space-3);
border-top: 1px solid var(--border-strong);
}
.uthena-ledger tfoot th {
color: var(--text-strong);
font-weight: 700;
vertical-align: bottom;
}
.uthena-ledger tfoot td {
font-family: var(--font-display);
font-size: var(--type-display-2);
font-weight: var(--weight-display);
line-height: 1;
}
.uthena-ledger--identity,
.uthena-ledger--identity .uthena-ledger__title {
border-color: var(--border-selected);
background-color: var(--surface-identity);
}
.uthena-ledger--identity th,
.uthena-ledger--identity td {
border-top-color: var(--border-selected);
}
.uthena-mk-notes {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin: var(--space-4) 0 0;
}
.uthena-mk-notes > div {
padding-top: var(--space-2);
border-top: 1px solid var(--border-subtle);
}
.uthena-mk-notes dt {
margin-bottom: var(--space-05);
color: var(--text-strong);
font-weight: 700;
}
.uthena-mk-notes dd {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.55;
}
.uthena-mk-cta-inline {
margin-top: var(--space-4);
}
@media (min-width: 768px) {
.uthena-ledgers {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
}
@media (min-width: 1024px) {
.uthena-mk-notes {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
}
}
.uthena-features {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-features li {
display: flex;
gap: var(--space-2);
align-items: flex-start;
margin: 0;
}
.uthena-features__icon {
flex: none;
box-sizing: content-box;
padding: 12px;
border-radius: var(--uthena-radius-md);
background-color: var(--surface-identity);
color: var(--text-identity);
}
.uthena-features h3 {
margin: 0 0 var(--space-05);
font-size: var(--type-display-5);
}
.uthena-features p {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.55;
}
.uthena-shots-pair {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
margin-top: var(--space-6);
}
@media (min-width: 768px) {
.uthena-features {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) var(--space-3);
}
.uthena-shots-pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
}
.uthena-mk-close {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-4) var(--space-3);
border-radius: var(--uthena-radius-xl);
background-color: var(--surface-identity);
}
.uthena-mk-close h2 {
margin: 0 0 var(--space-1);
}
.uthena-mk-close p {
max-width: 56ch;
margin: 0;
color: var(--text-body);
}
.uthena-mk-close .wp-block-buttons {
margin: 0;
}
@media (min-width: 1024px) {
.uthena-mk-close {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: var(--space-6);
align-items: center;
padding: var(--space-6) var(--space-8);
}
.uthena-mk-close .wp-block-buttons {
justify-content: flex-end;
}
}
@media (max-width: 479px) {
.uthena-mk-facts dd:not(.uthena-facts__note) {
font-size: var(--type-display-4);
}
}

/* uthena-catalog */

.uthena-catalog {
box-sizing: border-box;
width: 100%;
max-width: calc(var(--uthena-w-catalog) + 2 * var(--space-gutter));
margin-inline: auto;
padding: var(--space-4) var(--space-gutter) var(--space-section);
}
.uthena-catalog__head {
margin: 0 0 var(--space-3);
}
.uthena-catalog__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-2);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
.uthena-catalog__lead,
.uthena-catalog__head .wp-block-term-description {
max-width: var(--uthena-measure);
margin: var(--space-15) 0 0;
color: var(--text-secondary);
font-size: var(--type-body-lg);
line-height: var(--leading-body);
}
.uthena-catalog__head .wp-block-term-description p {
margin: 0;
}
:root {
--uthena-w-browse: 1440px;
}
.uthena-catalog.uthena-browse {
max-width: calc(var(--uthena-w-browse) + 2 * var(--space-gutter));
}
.uthena-browse__layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "results" "aside";
gap: var(--space-4);
align-items: start;
}
.uthena-browse__results {
grid-area: results;
min-width: 0;
container-type: inline-size;
}
.uthena-browse__aside {
grid-area: aside;
min-width: 0;
}
@media (min-width: 1024px) {
.uthena-browse__layout {
grid-template-columns: var(--uthena-portal-nav) minmax(0, 1fr);
grid-template-areas: "aside results";
}
.uthena-browse__aside {
position: sticky;
top: calc(var(--uthena-header-h) + var(--space-3));
max-height: calc(100vh - var(--uthena-header-h) - var(--space-6));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--border-default) transparent;
}
.admin-bar .uthena-browse__aside {
top: calc(var(--uthena-header-h) + var(--space-3) + 32px);
max-height: calc(100vh - var(--uthena-header-h) - var(--space-6) - 32px);
}
}
.uthena-filters {
display: flex;
flex-direction: column;
background-color: var(--surface-page);
}
.uthena-filters__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 0 0 var(--space-15);
}
.uthena-filters__title {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
}
.uthena-filters__close {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin: 0 calc(-1 * var(--space-1)) 0 0;
padding: 0;
border: 0;
border-radius: var(--uthena-radius-md);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.uthena-filters__close[hidden] {
display: none;
}
.uthena-filters__close:hover {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
}
.uthena-filters__body {
display: flex;
flex-direction: column;
}
.uthena-filters__form {
display: flex;
flex-direction: column;
margin: 0;
}
.uthena-filters__group {
min-width: 0;
margin: 0;
padding: var(--space-2) 0;
border: 0;
border-top: 1px solid var(--border-subtle);
}
.uthena-filters__legend {
float: left;
width: 100%;
margin: 0 0 var(--space-1);
padding: 0;
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-caption);
font-weight: 700;
line-height: 1.4;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-filters__legend + * {
clear: both;
}
.uthena-filters__options,
.uthena-cat-tree,
.uthena-cat-tree__children {
margin: 0;
padding: 0;
list-style: none;
}
.uthena-filters__option label {
display: flex;
flex: 1 1 auto;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1);
min-width: 0;
padding: 10px 0;
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.35;
cursor: pointer;
}
.uthena-filters__option {
display: flex;
margin: 0;
align-items: flex-start;
gap: var(--space-15);
}
.uthena-filters__option input {
flex: none;
margin: 11px 0 0;
}
.uthena-filters__option input:checked + label {
color: var(--text-strong);
font-weight: 600;
}
.uthena-filters__option.is-empty label {
color: var(--text-muted);
cursor: default;
}
.uthena-filters__label {
min-width: 0;
overflow-wrap: anywhere;
}
.uthena-filters__count,
.uthena-cat-tree__count {
flex: none;
color: var(--text-muted);
font-size: var(--type-caption);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.uthena-filters__hint {
margin: var(--space-05) 0 0;
color: var(--text-muted);
font-size: var(--type-caption);
line-height: 1.4;
}
.uthena-filters__group--cats {
border-top: 0;
padding-top: 0;
}
.uthena-cat-tree__link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-1);
min-height: 36px;
margin: 0 calc(-1 * var(--space-15));
padding: 7px var(--space-15);
border-radius: var(--uthena-radius-md);
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: 1.35;
text-decoration: none;
transition: background-color var(--uthena-dur-hover) var(--uthena-ease), color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-cat-tree__link:hover {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
text-decoration: none;
}
.uthena-cat-tree__link[aria-current="page"] {
background-color: var(--surface-selected);
box-shadow: inset 3px 0 0 var(--border-selected);
color: var(--text-strong);
font-weight: 700;
}
.uthena-cat-tree__children {
margin-left: var(--space-15);
}
.uthena-filters__more {
margin-top: var(--space-05);
}
.uthena-filters__more-toggle {
display: inline-flex;
align-items: center;
min-height: 40px;
color: var(--text-action);
font-size: var(--type-body-sm);
font-weight: 600;
cursor: pointer;
}
.uthena-filters__more[open] .uthena-filters__more-toggle {
margin-bottom: var(--space-1);
}
.uthena-filters .uthena-filters__find {
width: 100%;
min-height: 40px;
margin: 0 0 var(--space-1);
font-size: var(--type-body-sm);
}
.uthena-filters__more .uthena-filters__options {
max-height: 320px;
overflow-y: auto;
}
.uthena-filters__foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-1);
padding: var(--space-2) 0 0;
border-top: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
.uthena-browse.is-enhanced .uthena-filters__foot {
display: none;
}
}
.uthena-browse__overlay {
position: fixed;
inset: 0;
z-index: calc(var(--uthena-z-toast) + 100);
background-color: var(--overlay-scrim);
}
.uthena-browse__overlay[hidden] {
display: none;
}
@media (max-width: 1023px) {
.uthena-browse.is-enhanced .uthena-filters {
position: fixed;
inset-block: 0;
left: 0;
z-index: calc(var(--uthena-z-toast) + 101);
width: min(380px, 88vw);
padding: var(--space-2) var(--space-2) 0;
box-shadow: var(--uthena-shadow-pop);
visibility: hidden;
transform: translateX(-100%);
transition:
transform var(--uthena-dur-modal) var(--uthena-ease),
visibility 0s linear var(--uthena-dur-modal);
}
.uthena-browse.is-drawer-open .uthena-filters {
visibility: visible;
transform: none;
transition: transform var(--uthena-dur-modal) var(--uthena-ease);
}
.uthena-browse.is-enhanced .uthena-filters__body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.uthena-browse.is-enhanced .uthena-filters__foot {
justify-content: space-between;
padding: var(--space-15) 0 var(--space-2);
background-color: var(--surface-page);
}
.uthena-browse.is-enhanced .uthena-filters__apply {
flex: 1 1 auto;
}
.uthena-browse:not(.is-enhanced) .uthena-browse__aside {
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
}
html.uthena-drawer-lock,
html.uthena-drawer-lock body {
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.uthena-browse.is-enhanced .uthena-filters,
.uthena-browse.is-drawer-open .uthena-filters {
transition: none;
}
}
.uthena-results-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-15) var(--space-3);
margin: 0 0 var(--space-2);
padding: 0 0 var(--space-15);
border-bottom: 1px solid var(--border-subtle);
}
.uthena-results-bar__count {
margin: 0;
color: var(--text-secondary);
font-size: var(--type-body-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.uthena-results-bar__controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-15);
}
.uthena-results-bar__filters .uthena-icon {
flex: none;
}
@media (min-width: 1024px) {
.uthena-results-bar__filters {
display: none;
}
}
.uthena-results-bar__sort {
display: inline-flex;
align-items: center;
gap: var(--space-1);
}
.uthena-results-bar__label {
margin: 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
font-weight: 600;
white-space: nowrap;
}
.uthena-results-bar .uthena-results-bar__select {
width: auto;
min-height: 40px;
padding-block: 7px;
font-size: var(--type-body-sm);
font-weight: 600;
}
@media (max-width: 599px) {
.uthena-results-bar__controls {
width: 100%;
flex-wrap: nowrap;
}
.uthena-results-bar__sort {
flex: 1 1 auto;
min-width: 0;
}
.uthena-results-bar__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.uthena-results-bar .uthena-results-bar__select {
flex: 1 1 auto;
width: 100%;
min-width: 0;
}
}
.uthena-active-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1) var(--space-15);
margin: 0 0 var(--space-3);
}
.uthena-active-filters__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-active-filters__list > li {
margin: 0;
}
.uthena-active-filters__chip {
min-height: 36px;
border-color: var(--border-selected);
background-color: var(--surface-selected);
color: var(--text-strong);
}
.uthena-active-filters__clear {
color: var(--text-action);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-browse__results[aria-busy="true"] .uthena-catalog__query {
opacity: 0.6;
transition: opacity var(--uthena-dur-default) var(--uthena-ease);
}
.uthena-course-grid,
.wp-block-post-template.uthena-course-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.uthena-course-grid > li {
display: flex;
min-width: 0;
margin: 0;
}
.uthena-course-grid > li > .uthena-course-card {
flex: 1 1 auto;
}
@media (min-width: 600px) {
.uthena-course-grid,
.wp-block-post-template.uthena-course-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.uthena-course-grid,
.wp-block-post-template.uthena-course-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1440px) {
.uthena-catalog .uthena-course-grid,
.uthena-catalog .wp-block-post-template.uthena-course-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.uthena-browse .uthena-browse__results .uthena-course-grid {
grid-template-columns: minmax(0, 1fr);
}
@container (min-width: 520px) {
.uthena-browse .uthena-browse__results .uthena-course-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@container (min-width: 780px) {
.uthena-browse .uthena-browse__results .uthena-course-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container (min-width: 1100px) {
.uthena-browse .uthena-browse__results .uthena-course-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.uthena-course-card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
overflow: hidden;
transition:
transform var(--uthena-dur-hover) var(--uthena-ease),
box-shadow var(--uthena-dur-hover) var(--uthena-ease),
border-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-course-card:hover {
transform: translateY(-2px);
border-color: var(--border-default);
box-shadow: var(--uthena-shadow-card-hover);
}
.uthena-course-card:focus-within {
border-color: var(--border-focus);
box-shadow: var(--uthena-focus-ring);
}
.uthena-course-card__link {
display: flex;
flex: 1 1 auto;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.uthena-course-card__link:hover,
.uthena-course-card__link:focus {
color: inherit;
text-decoration: none;
}
.uthena-course-card__link:focus-visible {
outline: none;
}
.uthena-course-card__thumb {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-bottom: 1px solid var(--border-subtle);
background-color: var(--surface-sunken);
}
.uthena-course-card__thumb img,
.uthena-course-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.uthena-course-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-05);
padding: var(--space-2) var(--space-2) var(--space-2);
}
.uthena-course-card__eyebrow {
display: block;
overflow: hidden;
color: var(--text-identity);
font-size: var(--type-caption);
font-weight: 700;
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.uthena-course-card__title {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.3;
letter-spacing: -0.005em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-course-card:hover .uthena-course-card__title {
color: var(--text-action);
}
.uthena-course-card__instructor {
display: block;
overflow: hidden;
color: var(--text-secondary);
font-size: var(--type-body-sm);
line-height: 1.4;
text-overflow: ellipsis;
white-space: nowrap;
}
.uthena-course-card__meta {
display: block;
color: var(--text-muted);
font-size: var(--type-body-sm);
line-height: 1.4;
}
.uthena-course-card__foot {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-05) var(--space-15);
margin-top: auto;
padding-top: var(--space-15);
}
.uthena-course-card__price {
display: inline-flex;
align-items: baseline;
gap: 6px;
color: var(--text-price);
font-family: var(--font-display);
font-size: var(--type-display-5);
font-weight: var(--weight-display);
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.uthena-course-card__price .woocommerce-Price-amount {
color: inherit;
}
.uthena-course-card__from {
color: var(--text-muted);
font-family: var(--font-body);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-course-card__rights {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
font-size: var(--type-caption);
font-weight: 600;
white-space: nowrap;
}
.uthena-course-card__rights::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--text-muted);
}
.uthena-course-card__saving {
color: var(--text-saving);
font-size: var(--type-body-sm);
font-weight: 700;
white-space: nowrap;
}
.uthena-course-card__owned {
align-self: center;
}
.uthena-pagination,
.uthena-catalog .wp-block-query-pagination {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-1);
margin: var(--space-6) 0 0;
}
.uthena-pagination .wp-block-query-pagination-numbers {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-1);
}
.uthena-pagination .page-numbers,
.uthena-pagination .wp-block-query-pagination-previous,
.uthena-pagination .wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
margin: 0;
padding: 0 var(--space-15);
border: 1px solid var(--border-default);
border-radius: var(--uthena-radius-md);
background-color: var(--surface-card);
color: var(--text-strong);
font-size: var(--type-body-sm);
font-weight: 700;
line-height: 1;
text-decoration: none;
font-variant-numeric: tabular-nums;
transition:
border-color var(--uthena-dur-hover) var(--uthena-ease),
background-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-pagination a.page-numbers:hover,
.uthena-pagination .wp-block-query-pagination-previous:hover,
.uthena-pagination .wp-block-query-pagination-next:hover {
border-color: var(--border-strong);
background-color: var(--action-ghost-hover);
color: var(--text-strong);
text-decoration: none;
}
.uthena-pagination .page-numbers.current {
border-color: var(--border-selected);
background-color: var(--surface-selected);
color: var(--text-strong);
}
.uthena-pagination .page-numbers.dots {
min-width: 24px;
padding: 0;
border-color: transparent;
background-color: transparent;
color: var(--text-muted);
}
.uthena-pagination .wp-block-query-pagination-previous-arrow,
.uthena-pagination .wp-block-query-pagination-next-arrow {
margin: 0;
}
@media (max-width: 599px) {
.uthena-pagination .page-numbers:not(.current):not(.dots) {
display: none;
}
.uthena-pagination .page-numbers.current + .page-numbers:not(.dots),
.uthena-pagination .page-numbers:has(+ .page-numbers.current) {
display: inline-flex;
}
}
.uthena-catalog__empty {
margin: var(--space-4) auto;
}
.uthena-instructor-profile {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
margin: 0 0 var(--space-6);
padding: 0 0 var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.uthena-instructor-profile__avatar {
display: grid;
place-items: center;
width: 96px;
height: 96px;
border-radius: 50%;
background-color: var(--surface-identity);
color: var(--text-identity);
font-family: var(--font-display);
font-size: var(--type-display-3);
font-weight: var(--weight-display);
}
.uthena-instructor-profile__name {
margin: 0;
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-2);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
.uthena-instructor-profile__count {
margin: var(--space-1) 0 0;
color: var(--text-muted);
font-size: var(--type-body-sm);
font-weight: 600;
}
.uthena-instructor-profile__bio {
margin-top: var(--space-2);
color: var(--text-body);
}
.uthena-instructor-profile__bio p {
margin: 0 0 var(--space-15);
}
.uthena-instructor-profile__bundles {
margin: 0 0 var(--space-6);
}
.uthena-instructor-profile__section-title {
margin: 0 0 var(--space-3);
color: var(--text-strong);
font-family: var(--font-display);
font-size: var(--type-display-4);
font-weight: var(--weight-display);
line-height: var(--leading-heading);
}
@media (max-width: 599px) {
.uthena-instructor-profile {
grid-template-columns: minmax(0, 1fr);
}
.uthena-instructor-profile__avatar {
width: 72px;
height: 72px;
font-size: var(--type-display-4);
}
}
.uthena-course-card__price-tier {
color: var(--text-muted);
font-size: var(--type-body-sm);
font-weight: var(--weight-body);
white-space: nowrap;
}

/* uthena-cookie-notice */

.uthena-cookie-notice {
position: fixed;
left: 1rem;
right: 1rem;
bottom: 1rem;
z-index: 999;
background: var(--slate-900, #0b1113);
color: var(--slate-100, #e3eef0);
border: 1px solid var(--slate-700, #2a4046);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
padding: 1rem 1.25rem;
max-width: 760px;
max-height: calc(100dvh - 2rem);
overflow: auto;
margin: 0 auto;
font-family: var(--font-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
font-size: 0.875rem;
line-height: 1.45;
}
.uthena-cookie-notice[hidden] {
display: none;
}
.uthena-cookie-notice__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1rem;
}
.uthena-cookie-notice__copy {
margin: 0;
flex: 1 1 280px;
min-width: 0;
}
.uthena-cookie-notice__copy a {
color: var(--teal-300, #7bdac6);
text-decoration: underline;
}
.uthena-cookie-notice__ok {
appearance: none;
background: var(--orange-500, #f07419);
color: var(--slate-950, #0b1113);
border: 0;
border-radius: 8px;
padding: 0.5rem 1.25rem;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 120ms ease;
}
.uthena-cookie-notice__ok:hover,
.uthena-cookie-notice__ok:focus-visible {
background: var(--orange-400, #f4964f);
outline: 2px solid var(--amber-400, #fac764);
outline-offset: 2px;
}
.uthena-cookie-notice__details {
flex: 1 1 100%;
order: 1;
min-width: 0;
}
.uthena-cookie-notice__details summary {
cursor: pointer;
color: var(--teal-300, #7bdac6);
text-decoration: underline;
width: fit-content;
}
.uthena-cookie-notice__details summary:focus-visible {
outline: 2px solid var(--amber-400, #fac764);
outline-offset: 2px;
}
.uthena-cookie-notice__group {
margin: 0.5rem 0 0.25rem;
font-weight: 600;
}
.uthena-cookie-notice__details ul {
margin: 0;
padding-left: 1.1rem;
max-height: 40vh;
overflow: auto;
}
.uthena-cookie-notice__details code {
font-size: 0.8125rem;
overflow-wrap: anywhere;
}
@media (max-width: 480px) {
.uthena-cookie-notice {
left: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
padding: 0.875rem 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.uthena-cookie-notice__ok {
transition: none;
}
}
/* uthena-child-style */


/* uthena-search-suggest */

@media (min-width: 1024px) {
.uthena-header-search {
position: relative;
}
}
.uthena-suggest {
position: absolute;
top: calc(100% + var(--space-1));
right: 0;
z-index: var(--uthena-z-overlay);
width: min(560px, calc(100vw - 2 * var(--space-gutter)));
max-height: min(70vh, 640px);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-1);
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-lg);
background-color: var(--surface-card);
box-shadow: var(--uthena-shadow-pop);
color: var(--text-body);
font-size: var(--type-body-sm);
line-height: var(--leading-ui);
text-align: left;
}
.uthena-suggest[hidden] {
display: none;
}
.uthena-suggest__message {
margin: 0;
padding: var(--space-15) var(--space-15) var(--space-1);
color: var(--text-muted);
}
.uthena-suggest__group + .uthena-suggest__group,
.uthena-suggest__group + .uthena-suggest__all {
margin-top: var(--space-05);
padding-top: var(--space-05);
border-top: 1px solid var(--border-subtle);
}
.uthena-suggest__label {
padding: var(--space-1) var(--space-15) var(--space-05);
color: var(--text-identity);
font-size: var(--type-micro);
font-weight: var(--weight-strong);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.uthena-suggest__option {
display: flex;
align-items: center;
gap: var(--space-15);
min-height: 44px;
padding: var(--space-1) var(--space-15);
border-radius: var(--uthena-radius-md);
color: var(--text-body);
text-decoration: none;
transition: background-color var(--uthena-dur-hover) var(--uthena-ease);
}
.uthena-suggest__option:hover,
.uthena-suggest__option.is-active {
background-color: var(--action-ghost-hover);
color: var(--text-strong);
}
.uthena-suggest__option.is-active {
box-shadow: inset 3px 0 0 var(--border-selected);
}
.uthena-suggest__thumb {
display: grid;
flex: 0 0 48px;
width: 48px;
height: 48px;
overflow: hidden;
place-items: center;
border: 1px solid var(--border-subtle);
border-radius: var(--uthena-radius-sm);
background-color: var(--surface-inset);
color: var(--text-identity);
}
.uthena-suggest__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.uthena-suggest__initial {
font-family: var(--font-display);
font-size: var(--type-body-lg);
font-weight: var(--weight-display);
}
.uthena-suggest__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.uthena-suggest__title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--text-strong);
font-weight: var(--weight-strong);
}
.uthena-suggest__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-05);
color: var(--text-muted);
font-size: var(--type-caption);
}
.uthena-suggest__byline {
margin-right: var(--space-05);
}
.uthena-suggest .uthena-suggest__tier,
.uthena-suggest__meta .uthena-badge {
min-height: 18px;
padding: 0 6px;
font-size: var(--type-micro);
}
.uthena-suggest__price {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
color: var(--text-price);
font-weight: var(--weight-strong);
white-space: nowrap;
}
.uthena-suggest__from {
color: var(--text-muted);
font-size: var(--type-micro);
font-weight: var(--weight-body);
}
.uthena-suggest__icon {
display: inline-flex;
flex: 0 0 auto;
color: var(--text-identity);
}
.uthena-suggest__icon svg {
width: 18px;
height: 18px;
}
.uthena-suggest__name {
flex: 1 1 auto;
min-width: 0;
}
.uthena-suggest__count {
flex: 0 0 auto;
color: var(--text-muted);
font-size: var(--type-caption);
}
.uthena-suggest__all {
justify-content: space-between;
color: var(--text-action);
font-weight: var(--weight-strong);
}
.uthena-suggest__all .uthena-suggest__icon {
color: currentColor;
}
.uthena-suggest__hit {
padding: 0;
background: transparent;
color: var(--text-strong);
font-weight: var(--weight-strong);
text-decoration: underline;
text-decoration-color: var(--border-selected);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
@media (max-width: 767px) {
.uthena-suggest {
--uthena-suggest-top: 120px;
position: fixed;
top: var(--uthena-suggest-top);
right: 0;
bottom: 0;
left: 0;
width: auto;
max-height: none;
padding: var(--space-1) var(--space-1) var(--space-3);
border-width: 1px 0 0;
border-radius: var(--uthena-radius-lg) var(--uthena-radius-lg) 0 0;
}
.uthena-suggest__option {
min-height: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.uthena-suggest__option {
transition: none;
}
}