@layer jsxscores.tokens, jsxscores.reset, jsxscores.base, jsxscores.utilities, jsxscores.compat, jsxscores.components; /* * Single-entry stylesheet for the parity-first rebuild layer. * * Runtime ships either the built bundle at `assets/theme/theme.css` or this * source entry when the bundle is stale. Keep the layer order explicit here so * both paths share the same cascade semantics. */ @layer jsxscores.tokens{ /* * Shared design tokens for the rebuilt theme layer. * * Keep values aligned with the current runtime so this foundation file can * improve source quality without changing visual parity. */ :root { --jsxscores-font-body: var(--wp--preset--font-family--body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --jsxscores-font-sans: var(--wp--preset--font-family--sans, "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", geneva, arial, sans-serif); --jsxscores-color-surface-dark: var(--wp--custom--jsxscores--surface--dark-alpha, rgb(0 0 0 / 80%)); --jsxscores-color-surface-canvas: var(--wp--custom--jsxscores--surface--canvas, #ccc); --jsxscores-color-surface-light: var(--wp--preset--color--surface-light, #fff); --jsxscores-color-surface-muted: var(--wp--preset--color--surface-muted, #eee); --jsxscores-color-border-soft: var(--wp--custom--jsxscores--border--soft, #ccc); --jsxscores-color-border-muted: var(--wp--custom--jsxscores--border--muted, #c3c3c3); --jsxscores-color-border-dashed: var(--wp--custom--jsxscores--border--dashed, gray); --jsxscores-color-text-base: var(--wp--preset--color--text-base, #000); --jsxscores-color-text-muted: var(--wp--preset--color--text-muted, #666); --jsxscores-color-text-inverse: var(--wp--preset--color--text-inverse, #fff); --jsxscores-color-text-muted-inverse: var(--wp--preset--color--text-muted-inverse, lightgray); --jsxscores-color-link-base: var(--wp--preset--color--link-base, #00e); --jsxscores-color-accent: var(--wp--preset--color--accent, #b51c35); --jsxscores-navigation-link-padding-block-mobile: var(--wp--custom--jsxscores--navigation--link--padding-block-mobile, 0.5em); --jsxscores-navigation-link-padding-block-desktop: var(--wp--custom--jsxscores--navigation--link--padding-block-desktop, 0.4em); --jsxscores-navigation-link-padding-inline-start-mobile: var(--wp--custom--jsxscores--navigation--link--padding-inline-start-mobile, 0.5em); --jsxscores-navigation-link-padding-inline-start-desktop: var(--wp--custom--jsxscores--navigation--link--padding-inline-start-desktop, 1em); --jsxscores-navigation-link-padding-inline-end: var(--wp--custom--jsxscores--navigation--link--padding-inline-end, 1em); --jsxscores-navigation-account-size: var(--wp--custom--jsxscores--navigation--account--size, 40px); --jsxscores-navigation-account-icon-size: var(--wp--custom--jsxscores--navigation--account--icon-size, 20px); --jsxscores-navigation-toggle-size: var(--wp--custom--jsxscores--navigation--toggle--size, 44px); --jsxscores-navigation-toggle-padding-block: var(--wp--custom--jsxscores--navigation--toggle--padding-block, 0.4em); --jsxscores-navigation-toggle-padding-inline-start: var(--wp--custom--jsxscores--navigation--toggle--padding-inline-start, 0.5em); --jsxscores-navigation-toggle-padding-inline-end: var(--wp--custom--jsxscores--navigation--toggle--padding-inline-end, 1em); --jsxscores-navigation-toggle-focus-outline: var(--wp--custom--jsxscores--navigation--toggle--focus-outline, rgb(255 255 255 / 60%)); --jsxscores-navigation-toggle-focus-outline-offset: var(--wp--custom--jsxscores--navigation--toggle--focus-outline-offset, 3px); --jsxscores-navigation-toggle-focus-radius: var(--wp--custom--jsxscores--navigation--toggle--focus-radius, 10px); --jsxscores-navigation-toggle-icon-width: var(--wp--custom--jsxscores--navigation--toggle--icon-width, 20px); --jsxscores-navigation-toggle-bar-thickness: var(--wp--custom--jsxscores--navigation--toggle--bar-thickness, 2px); --jsxscores-navigation-toggle-bar-radius: var(--wp--custom--jsxscores--navigation--toggle--bar-radius, 999px); --jsxscores-navigation-toggle-bar-offset: var(--wp--custom--jsxscores--navigation--toggle--bar-offset, 6px); --jsxscores-navigation-submenu-item-surface: var(--wp--custom--jsxscores--navigation--submenu--item-surface, rgb(255 255 255 / 10%)); --jsxscores-navigation-submenu-link-width-desktop: var(--wp--custom--jsxscores--navigation--submenu--link-width-desktop, 218px); --jsxscores-home-hero-backdrop-image: var(--wp--custom--jsxscores--home--hero--backdrop-image, radial-gradient(circle at top, rgb(255 255 255 / 38%), rgb(229 220 204 / 96%) 58%, rgb(215 205 190 / 100%))); --jsxscores-home-hero-backdrop-color: var(--wp--custom--jsxscores--home--hero--backdrop-color, #e8dece); --jsxscores-home-hero-min-height: var(--wp--custom--jsxscores--home--hero--min-height, clamp(420px, 72vh, 740px)); --jsxscores-home-hero-graphic-padding: var(--wp--custom--jsxscores--home--hero--graphic-padding, clamp(18px, 3vw, 40px)); --jsxscores-archive-card-padding-top: var(--wp--custom--jsxscores--archive--card-padding--top, 2em); --jsxscores-archive-card-padding-inline: var(--wp--custom--jsxscores--archive--card-padding--inline, 2em); --jsxscores-archive-card-padding-bottom: var(--wp--custom--jsxscores--archive--card-padding--bottom, 3em); --jsxscores-archive-quotes-surface: var(--wp--custom--jsxscores--archive--quotes--surface, #e7dec7); --jsxscores-archive-quotes-text: var(--wp--custom--jsxscores--archive--quotes--text, #633); --jsxscores-archive-quotes-content-padding-mobile: var(--wp--custom--jsxscores--archive--quotes--content-padding-mobile, 1em); --jsxscores-archive-quotes-content-padding-desktop: var(--wp--custom--jsxscores--archive--quotes--content-padding-desktop, 2em); --jsxscores-archive-quotes-post-max-width: var(--wp--custom--jsxscores--archive--quotes--post-max-width, 700px); --jsxscores-archive-quotes-reference: var(--wp--custom--jsxscores--archive--quotes--reference, #0070c9); --jsxscores-archive-quotes-mark-size: var(--wp--custom--jsxscores--archive--quotes--mark-size, 5.2em); --jsxscores-archive-quotes-mark-before-offset-block-start: var(--wp--custom--jsxscores--archive--quotes--mark-before-offset-block-start, -0.6em); --jsxscores-archive-quotes-mark-before-offset-inline-start: var(--wp--custom--jsxscores--archive--quotes--mark-before-offset-inline-start, -40px); --jsxscores-archive-quotes-mark-after-offset-inline-end: var(--wp--custom--jsxscores--archive--quotes--mark-after-offset-inline-end, -43px); --jsxscores-archive-quotes-reference-margin-top: var(--wp--custom--jsxscores--archive--quotes--reference-margin-top, 1.5em); --jsxscores-archive-quotes-reference-font-size: var(--wp--custom--jsxscores--archive--quotes--reference-font-size, 0.8em); --jsxscores-archive-quotes-tooltip-offset-block-end: var(--wp--custom--jsxscores--archive--quotes--tooltip--offset-block-end, 130%); --jsxscores-archive-quotes-tooltip-width: var(--wp--custom--jsxscores--archive--quotes--tooltip--width, 120px); --jsxscores-archive-quotes-tooltip-padding-block: var(--wp--custom--jsxscores--archive--quotes--tooltip--padding-block, 4px); --jsxscores-archive-quotes-tooltip-radius: var(--wp--custom--jsxscores--archive--quotes--tooltip--radius, 6px); --jsxscores-archive-quotes-tooltip-font-size: var(--wp--custom--jsxscores--archive--quotes--tooltip--font-size, 0.9em); --jsxscores-archive-quotes-tooltip-text: var(--wp--custom--jsxscores--archive--quotes--tooltip--text, #fff); --jsxscores-archive-quotes-tooltip-surface: var(--wp--custom--jsxscores--archive--quotes--tooltip--surface, rgb(0 0 0 / 80%)); --jsxscores-archive-quotes-tooltip-arrow-size: var(--wp--custom--jsxscores--archive--quotes--tooltip--arrow-size, 5px); --jsxscores-archive-quotes-tooltip-arrow-surface: var(--wp--custom--jsxscores--archive--quotes--tooltip--arrow-surface, #000); --jsxscores-archive-travel-content-padding-top: var(--wp--custom--jsxscores--archive--travel--content-padding--top, 1em); --jsxscores-archive-travel-content-padding-inline: var(--wp--custom--jsxscores--archive--travel--content-padding--inline, 0.75em); --jsxscores-archive-travel-card-size-mobile: var(--wp--custom--jsxscores--archive--travel--card--size-mobile, 250px); --jsxscores-archive-travel-card-size-tablet: var(--wp--custom--jsxscores--archive--travel--card--size-tablet, 37vw); --jsxscores-archive-travel-card-size-desktop: var(--wp--custom--jsxscores--archive--travel--card--size-desktop, 20vw); --jsxscores-archive-travel-card-min-tablet: var(--wp--custom--jsxscores--archive--travel--card--min-tablet, 230px); --jsxscores-archive-travel-card-max-tablet: var(--wp--custom--jsxscores--archive--travel--card--max-tablet, 300px); --jsxscores-archive-travel-card-min-desktop: var(--wp--custom--jsxscores--archive--travel--card--min-desktop, 233px); --jsxscores-archive-travel-card-max-desktop: var(--wp--custom--jsxscores--archive--travel--card--max-desktop, 250px); --jsxscores-archive-travel-card-overlay-surface: var(--wp--custom--jsxscores--archive--travel--card--overlay-surface, rgb(0 0 0 / 70%)); --jsxscores-archive-travel-card-overlay-surface-hover: var(--wp--custom--jsxscores--archive--travel--card--overlay-surface-hover, rgb(0 0 0 / 50%)); --jsxscores-archive-travel-card-overlay-text-hover: var(--wp--custom--jsxscores--archive--travel--card--overlay-text-hover, rgb(255 255 255 / 90%)); --jsxscores-archive-travel-card-title-size: var(--wp--custom--jsxscores--archive--travel--card--title-size, 2rem); --jsxscores-archive-travel-card-title-padding-block: var(--wp--custom--jsxscores--archive--travel--card--title-padding-block, 0.4em); --jsxscores-archive-travel-card-title-padding-inline: var(--wp--custom--jsxscores--archive--travel--card--title-padding-inline, 0.6em); --jsxscores-archive-travel-card-edit-border: var(--wp--custom--jsxscores--archive--travel--card--edit-border, rgb(255 255 255 / 18%)); --jsxscores-archive-travel-card-edit-text: var(--wp--custom--jsxscores--archive--travel--card--edit-text, #f4f4f4); --jsxscores-archive-travel-card-edit-text-hover: var(--wp--custom--jsxscores--archive--travel--card--edit-text-hover, #fff); --jsxscores-archive-travel-card-edit-size: var(--wp--custom--jsxscores--archive--travel--card--edit-size, 42px); --jsxscores-archive-travel-card-edit-offset-block-start: var(--wp--custom--jsxscores--archive--travel--card--edit-offset-block-start, 10px); --jsxscores-archive-travel-card-edit-offset-inline-end: var(--wp--custom--jsxscores--archive--travel--card--edit-offset-inline-end, 10px); --jsxscores-archive-travel-card-edit-icon-size: var(--wp--custom--jsxscores--archive--travel--card--edit-icon-size, 18px); --jsxscores-archive-travel-empty-color: var(--wp--custom--jsxscores--archive--travel--card--empty-color, #565656); --jsxscores-carousel-indicator-size: var(--wp--custom--jsxscores--carousel--indicator--size, 6px); --jsxscores-carousel-indicator-gap: var(--wp--custom--jsxscores--carousel--indicator--gap, 3px); --jsxscores-carousel-indicator-offset-block-end: var(--wp--custom--jsxscores--carousel--indicator--offset-block-end, 10px); --jsxscores-carousel-indicator-hit-area-offset: var(--wp--custom--jsxscores--carousel--indicator--hit-area-offset, 10px); --jsxscores-carousel-indicator-hit-area-size: var(--wp--custom--jsxscores--carousel--indicator--hit-area-size, 10px); --jsxscores-carousel-indicator-base: var(--wp--custom--jsxscores--carousel--indicator--base, rgb(219 219 219 / 50%)); --jsxscores-carousel-indicator-emphasis: var(--wp--custom--jsxscores--carousel--indicator--emphasis, #dbdbdb); --jsxscores-carousel-indicator-active: var(--wp--custom--jsxscores--carousel--indicator--active, rgb(0 0 0 / 45%)); --jsxscores-carousel-control-color: var(--wp--custom--jsxscores--carousel--control--color, #fff); --jsxscores-carousel-control-hover-color: var(--wp--custom--jsxscores--carousel--control--hover-color, rgb(0 0 0 / 45%)); --jsxscores-carousel-control-icon-size: var(--wp--custom--jsxscores--carousel--control--icon-size, 20px); --jsxscores-feed-shell-max-width: var(--wp--custom--jsxscores--feed--shell--max-width, 600px); --jsxscores-feed-shell-font-size: var(--wp--custom--jsxscores--feed--shell--font-size, 14px); --jsxscores-feed-shell-line-height: var(--wp--custom--jsxscores--feed--shell--line-height, 18px); --jsxscores-feed-card-surface: var(--wp--custom--jsxscores--feed--card--surface, #fff); --jsxscores-feed-card-radius: var(--wp--custom--jsxscores--feed--card--radius, 3px); --jsxscores-feed-card-border: var(--wp--custom--jsxscores--feed--card--border, #e6e6e6); --jsxscores-feed-card-margin-mobile: var(--wp--custom--jsxscores--feed--card--margin-mobile, 1em); --jsxscores-feed-card-margin-desktop: var(--wp--custom--jsxscores--feed--card--margin-desktop, 60px); --jsxscores-feed-divider: var(--wp--custom--jsxscores--feed--chrome--divider, #efefef); --jsxscores-feed-divider-width: var(--wp--custom--jsxscores--feed--chrome--divider-width, 0.5px); --jsxscores-feed-padding: var(--wp--custom--jsxscores--feed--chrome--padding, 16px); --jsxscores-feed-meta-gap: var(--wp--custom--jsxscores--feed--chrome--meta-gap, 12px); --jsxscores-feed-muted: var(--wp--custom--jsxscores--feed--chrome--muted, #999); --jsxscores-feed-header-height: var(--wp--custom--jsxscores--feed--chrome--header-height, 60px); --jsxscores-feed-time-size: var(--wp--custom--jsxscores--feed--chrome--time-size, 10px); --jsxscores-feed-time-letter-spacing: var(--wp--custom--jsxscores--feed--chrome--time-letter-spacing, 0.2px); --jsxscores-feed-content-padding-inline: var(--wp--custom--jsxscores--feed--content--padding-inline, 16px); --jsxscores-feed-carousel-indicator-margin-block: var(--wp--custom--jsxscores--feed--carousel--indicator-margin-block, 15px); --jsxscores-feed-carousel-control-margin-bottom: var(--wp--custom--jsxscores--feed--carousel--control-margin-bottom, 36px); --jsxscores-feed-carousel-strip-max-width-offset: var(--wp--custom--jsxscores--feed--carousel--strip-max-width-offset, 2rem); --jsxscores-feed-carousel-strip-padding-inline: var(--wp--custom--jsxscores--feed--carousel--strip-padding-inline, 0.5rem); --jsxscores-feed-meta-no-media-margin-top: var(--wp--custom--jsxscores--feed--meta--no-media-margin-top, 4px); --jsxscores-feed-meta-with-media-margin-top: var(--wp--custom--jsxscores--feed--meta--with-media-margin-top, -33px); --jsxscores-feed-like-count-margin-bottom: var(--wp--custom--jsxscores--feed--likes--margin-bottom, 8px); --jsxscores-feed-like-count-color: var(--wp--custom--jsxscores--feed--likes--color, #262626); --jsxscores-feed-comment-author-gap-inline-end: var(--wp--custom--jsxscores--feed--comments--author-gap-inline-end, 0.3em); --jsxscores-feed-comment-author-padding-inline-start: var(--wp--custom--jsxscores--feed--comments--author-padding-inline-start, 5px); --jsxscores-feed-comment-author-offset-inline-start: var(--wp--custom--jsxscores--feed--comments--author-offset-inline-start, -5px); --jsxscores-feed-comment-item-offset-block-start: var(--wp--custom--jsxscores--feed--comments--item-offset-block-start, -5px); --jsxscores-feed-comment-item-padding-block-start: var(--wp--custom--jsxscores--feed--comments--item-padding-block-start, 5px); --jsxscores-feed-comment-item-offset-inline-end: var(--wp--custom--jsxscores--feed--comments--item-offset-inline-end, -2px); --jsxscores-feed-comment-item-padding-inline-end: var(--wp--custom--jsxscores--feed--comments--item-padding-inline-end, 2px); --jsxscores-feed-comment-item-padding-block-end: var(--wp--custom--jsxscores--feed--comments--item-padding-block-end, 6px); --jsxscores-feed-comment-loadmore-margin-bottom: var(--wp--custom--jsxscores--feed--comments--loadmore-margin-bottom, 8px); --jsxscores-feed-comment-parent-link-color: var(--wp--custom--jsxscores--feed--comments--parent-link-color, #00376b); --jsxscores-feed-comment-cancel-offset-block-end: var(--wp--custom--jsxscores--feed--comments--cancel-offset-block-end, 4px); --jsxscores-feed-comment-cancel-offset-inline-end: var(--wp--custom--jsxscores--feed--comments--cancel-offset-inline-end, -5px); --jsxscores-feed-comment-cancel-icon-size: var(--wp--custom--jsxscores--feed--comments--cancel-icon-size, 9px); --jsxscores-feed-comment-cancel-loading-icon-size: var(--wp--custom--jsxscores--feed--comments--cancel-loading-icon-size, 21px); --jsxscores-feed-comment-respond-min-height: var(--wp--custom--jsxscores--feed--comments--respond-min-height, 56px); --jsxscores-feed-comment-respond-margin-top: var(--wp--custom--jsxscores--feed--comments--respond-margin-top, 4px); --jsxscores-feed-comment-input-color: var(--wp--custom--jsxscores--feed--comments--input-color, #262626); --jsxscores-feed-comment-input-margin-inline: var(--wp--custom--jsxscores--feed--comments--input-margin-inline, 2px); --jsxscores-feed-comment-input-max-height: var(--wp--custom--jsxscores--feed--comments--input-max-height, 80px); --jsxscores-feed-comment-input-size-mobile: var(--wp--custom--jsxscores--feed--comments--input-size-mobile, 16px); --jsxscores-feed-comment-input-size-desktop: var(--wp--custom--jsxscores--feed--comments--input-size-desktop, 14px); --jsxscores-feed-comment-action-font-size: var(--wp--custom--jsxscores--feed--comments--action-font-size, 16px); --jsxscores-feed-comment-action-padding-inline: var(--wp--custom--jsxscores--feed--comments--action-padding-inline, 8px); --jsxscores-feed-comment-action-margin-inline-end: var(--wp--custom--jsxscores--feed--comments--action-margin-inline-end, -8px); --jsxscores-feed-comment-action-font-weight: var(--wp--custom--jsxscores--feed--comments--action-font-weight, 500); --jsxscores-feed-travel-sub-action-disabled: var(--wp--custom--jsxscores--feed--travel-sub--action-disabled, #e09fa9); --jsxscores-feed-love-action-color: var(--wp--custom--jsxscores--feed--love--action-color, #ff6a80); --jsxscores-feed-love-action-disabled-color: var(--wp--custom--jsxscores--feed--love--action-disabled-color, #fff0f2); --jsxscores-post-comments-margin-block: var(--wp--custom--jsxscores--post--comments--margin-block, 3em); --jsxscores-post-comments-padding-block: var(--wp--custom--jsxscores--post--comments--padding-block, 1.5em); --jsxscores-post-comments-reply-title-margin-bottom: var(--wp--custom--jsxscores--post--comments--reply-title-margin-bottom, 1em); --jsxscores-post-action-padding-block: var(--wp--custom--jsxscores--post--action--padding-block, 0.5em); --jsxscores-post-action-padding-inline: var(--wp--custom--jsxscores--post--action--padding-inline, 1.4em); --jsxscores-post-navigation-container-padding-block: var(--wp--custom--jsxscores--post--navigation--container-padding-block, 2em); --jsxscores-post-navigation-container-padding-block-end-wide: var(--wp--custom--jsxscores--post--navigation--container-padding-block-end-wide, 1em); --jsxscores-post-navigation-link-padding: var(--wp--custom--jsxscores--post--navigation--link-padding, 1em); --jsxscores-post-navigation-nav-links-padding-inline-mobile: var(--wp--custom--jsxscores--post--navigation--nav-links-padding-inline-mobile, 0.4em); --jsxscores-post-navigation-previous-padding-block-end-mobile: var(--wp--custom--jsxscores--post--navigation--previous-padding-block-end-mobile, 1em); --jsxscores-post-navigation-title-size: var(--wp--custom--jsxscores--post--navigation--title-size, 1.2em); --jsxscores-pagination-item-padding-block: var(--wp--custom--jsxscores--pagination--item-padding-block, 0.5em); --jsxscores-pagination-item-padding-inline: var(--wp--custom--jsxscores--pagination--item-padding-inline, 1em); --jsxscores-post-form-required-color: var(--wp--custom--jsxscores--post--form--required-color, #d54e21); --jsxscores-auth-card-width: var(--wp--custom--jsxscores--auth--card-width, 320px); --jsxscores-auth-card-margin-top: var(--wp--custom--jsxscores--auth--card-margin-top, 20px); --jsxscores-auth-field-inline-padding: var(--wp--custom--jsxscores--auth--field-inline-padding, 10px); --jsxscores-auth-social-icon-width: var(--wp--custom--jsxscores--auth--social-icon-width, 2.3rem); --jsxscores-auth-card-padding-top: var(--wp--custom--jsxscores--auth--card-padding--top, 26px); --jsxscores-auth-card-padding-inline: var(--wp--custom--jsxscores--auth--card-padding--inline, 24px); --jsxscores-auth-card-padding-bottom: var(--wp--custom--jsxscores--auth--card-padding--bottom, 46px); --jsxscores-auth-surface-max-width: var(--wp--custom--jsxscores--auth--surface--max-width, 460px); --jsxscores-auth-surface-margin-block: var(--wp--custom--jsxscores--auth--surface--margin-block, 3.5rem); --jsxscores-auth-surface-padding: var(--wp--custom--jsxscores--auth--surface--padding, 2rem); --jsxscores-auth-surface-radius: var(--wp--custom--jsxscores--auth--surface--radius, 16px); --jsxscores-auth-surface-border-color: var(--wp--custom--jsxscores--auth--surface--border, #e2e8f0); --jsxscores-auth-surface-shadow: var(--wp--custom--jsxscores--auth--surface--shadow, 0 20px 40px rgb(15 23 42 / 8%)); --jsxscores-auth-title-size: var(--wp--custom--jsxscores--auth--title--size, 1.5rem); --jsxscores-auth-title-margin-bottom: var(--wp--custom--jsxscores--auth--title--margin-bottom, 0.75rem); --jsxscores-auth-title-color: var(--wp--custom--jsxscores--auth--title--color, #0f172a); --jsxscores-auth-label-size: var(--wp--custom--jsxscores--auth--label--size, 0.85rem); --jsxscores-auth-label-color: var(--wp--custom--jsxscores--auth--label--color, #0f172a); --jsxscores-auth-subtitle-size: var(--wp--custom--jsxscores--auth--subtitle--size, 0.95rem); --jsxscores-auth-subtitle-margin-bottom: var(--wp--custom--jsxscores--auth--subtitle--margin-bottom, 1.5rem); --jsxscores-auth-subtitle-color: var(--wp--custom--jsxscores--auth--subtitle--color, #475569); --jsxscores-auth-control-border-color: var(--wp--custom--jsxscores--auth--control--border, #d0d7de); --jsxscores-auth-control-focus-border-color: var(--wp--custom--jsxscores--auth--control--focus-border, #2563eb); --jsxscores-auth-control-focus-shadow: var(--wp--custom--jsxscores--auth--control--focus-shadow, 0 0 0 4px rgb(37 99 235 / 15%)); --jsxscores-auth-control-radius: var(--wp--custom--jsxscores--auth--control--radius, 12px); --jsxscores-auth-control-padding-block: var(--wp--custom--jsxscores--auth--control--padding-block, 0.75rem); --jsxscores-auth-control-padding-inline: var(--wp--custom--jsxscores--auth--control--padding-inline, 0.9rem); --jsxscores-auth-provider-icon-size: var(--wp--custom--jsxscores--auth--provider--icon-size, 24px); --jsxscores-auth-provider-hover-shadow: var(--wp--custom--jsxscores--auth--provider--hover-shadow, 0 8px 20px rgb(15 23 42 / 12%)); --jsxscores-auth-provider-hover-translate-y: var(--wp--custom--jsxscores--auth--provider--hover-translate-y, -1px); --jsxscores-auth-divider-margin: var(--wp--custom--jsxscores--auth--divider--margin, 1.25rem); --jsxscores-auth-button-pill-radius: var(--wp--custom--jsxscores--auth--button--pill-radius, 999px); --jsxscores-auth-button-min-height: var(--wp--custom--jsxscores--auth--button--min-height, 44px); --jsxscores-auth-button-primary-bg: var(--wp--custom--jsxscores--auth--button--primary-bg, #0f172a); --jsxscores-auth-button-primary-color: var(--wp--custom--jsxscores--auth--button--primary-color, #fff); --jsxscores-auth-button-secondary-bg: var(--wp--custom--jsxscores--auth--button--secondary-bg, #fff); --jsxscores-auth-button-secondary-color: var(--wp--custom--jsxscores--auth--button--secondary-color, #0f172a); --jsxscores-auth-button-ghost-border-color: var(--wp--custom--jsxscores--auth--button--ghost-border, #cbd5f5); --jsxscores-auth-button-ghost-color: var(--wp--custom--jsxscores--auth--button--ghost-color, #475569); --jsxscores-auth-button-danger-bg: var(--wp--custom--jsxscores--auth--button--danger-bg, #dc2626); --jsxscores-auth-button-danger-color: var(--wp--custom--jsxscores--auth--button--danger-color, #fff); --jsxscores-auth-modal-backdrop: var(--wp--custom--jsxscores--auth--modal--backdrop, rgb(15 23 42 / 60%)); --jsxscores-auth-modal-shadow: var(--wp--custom--jsxscores--auth--modal--shadow, 0 20px 60px rgb(15 23 42 / 25%)); --jsxscores-auth-modal-heading-size: var(--wp--custom--jsxscores--auth--modal--heading-size, 1.1rem); --jsxscores-auth-modal-close-color: var(--wp--custom--jsxscores--auth--modal--close-color, #64748b); --jsxscores-auth-notice-radius: var(--wp--custom--jsxscores--auth--notice--radius, 10px); --jsxscores-auth-notice-error-bg: var(--wp--custom--jsxscores--auth--notice--error-bg, #fee2e2); --jsxscores-auth-notice-error-color: var(--wp--custom--jsxscores--auth--notice--error-color, #991b1b); --jsxscores-auth-notice-success-bg: var(--wp--custom--jsxscores--auth--notice--success-bg, #dcfce7); --jsxscores-auth-notice-success-color: var(--wp--custom--jsxscores--auth--notice--success-color, #166534); --jsxscores-auth-footer-color: var(--wp--custom--jsxscores--auth--footer--color, #475569); --jsxscores-auth-footer-font-size: var(--wp--custom--jsxscores--auth--footer--font-size, 0.9rem); --jsxscores-auth-footer-link-color: var(--wp--custom--jsxscores--auth--footer--link-color, #0f172a); --jsxscores-auth-footer-link-weight: var(--wp--custom--jsxscores--auth--footer--link-weight, 600); --jsxscores-auth-divider-text-color: var(--wp--custom--jsxscores--auth--divider--text-color, #94a3b8); --jsxscores-auth-card-shell-radius: var(--wp--custom--jsxscores--auth--card--radius, 14px); --jsxscores-auth-card-shell-border-color: var(--wp--custom--jsxscores--auth--card--border, #e2e8f0); --jsxscores-auth-card-shell-shadow: var(--wp--custom--jsxscores--auth--card--shadow, 0 12px 24px rgb(15 23 42 / 6%)); --jsxscores-auth-card-shell-subtle-surface: var(--wp--custom--jsxscores--auth--card--surface-subtle, #f8fafc); --jsxscores-auth-account-text-color: var(--wp--custom--jsxscores--auth--account--text-color, #0f172a); --jsxscores-auth-account-muted-color: var(--wp--custom--jsxscores--auth--account--muted-color, #64748b); --jsxscores-auth-account-danger-color: var(--wp--custom--jsxscores--auth--account--danger-color, #7f1d1d); --jsxscores-account-menu-trigger-active-surface: var(--wp--custom--jsxscores--account-menu--trigger--active-surface, rgb(255 255 255 / 7.5%)); --jsxscores-account-menu-panel-offset-block-start: var(--wp--custom--jsxscores--account-menu--panel--offset-block-start, 12px); --jsxscores-account-menu-panel-offset-block-start-mobile: var(--wp--custom--jsxscores--account-menu--panel--offset-block-start-mobile, 8px); --jsxscores-account-menu-panel-width: var(--wp--custom--jsxscores--account-menu--panel--width, 360px); --jsxscores-account-menu-panel-viewport-gutter: var(--wp--custom--jsxscores--account-menu--panel--viewport-gutter, 24px); --jsxscores-account-menu-sheet-padding: var(--wp--custom--jsxscores--account-menu--sheet--padding, 1rem); --jsxscores-account-menu-sheet-padding-mobile: var(--wp--custom--jsxscores--account-menu--sheet--padding-mobile, 0.85rem); --jsxscores-account-menu-sheet-radius: var(--wp--custom--jsxscores--account-menu--sheet--radius, 24px); --jsxscores-account-menu-sheet-radius-mobile: var(--wp--custom--jsxscores--account-menu--sheet--radius-mobile, 22px); --jsxscores-account-menu-sheet-border: var(--wp--custom--jsxscores--account-menu--sheet--border, rgb(148 163 184 / 28%)); --jsxscores-account-menu-sheet-shadow: var(--wp--custom--jsxscores--account-menu--sheet--shadow, 0 28px 64px rgb(15 23 42 / 20%), 0 4px 18px rgb(15 23 42 / 8%)); --jsxscores-account-menu-sheet-highlight: var(--wp--custom--jsxscores--account-menu--sheet--highlight, radial-gradient(circle at top right, rgb(125 211 252 / 20%), transparent 34%)); --jsxscores-account-menu-sheet-surface: var(--wp--custom--jsxscores--account-menu--sheet--surface, linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(248 250 252 / 96%))); --jsxscores-account-menu-sheet-overlay: var(--wp--custom--jsxscores--account-menu--sheet--overlay, linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 38%)); --jsxscores-account-menu-hero-gap: var(--wp--custom--jsxscores--account-menu--hero--gap, 0.85rem); --jsxscores-account-menu-hero-padding: var(--wp--custom--jsxscores--account-menu--hero--padding, 1rem); --jsxscores-account-menu-hero-padding-mobile: var(--wp--custom--jsxscores--account-menu--hero--padding-mobile, 0.9rem); --jsxscores-account-menu-hero-radius: var(--wp--custom--jsxscores--account-menu--hero--radius, 20px); --jsxscores-account-menu-hero-highlight: var(--wp--custom--jsxscores--account-menu--hero--highlight, radial-gradient(circle at top left, rgb(255 255 255 / 22%), transparent 36%)); --jsxscores-account-menu-hero-surface: var(--wp--custom--jsxscores--account-menu--hero--surface, linear-gradient(135deg, #0f172a 0%, #14213d 55%, #1d4ed8 100%)); --jsxscores-account-menu-hero-shadow: var(--wp--custom--jsxscores--account-menu--hero--shadow, inset 0 1px 0 rgb(255 255 255 / 16%)); --jsxscores-account-menu-avatar-size: var(--wp--custom--jsxscores--account-menu--avatar--size, 3rem); --jsxscores-account-menu-avatar-radius: var(--wp--custom--jsxscores--account-menu--avatar--radius, 18px); --jsxscores-account-menu-avatar-surface: var(--wp--custom--jsxscores--account-menu--avatar--surface, rgb(255 255 255 / 12%)); --jsxscores-account-menu-avatar-shadow: var(--wp--custom--jsxscores--account-menu--avatar--shadow, inset 0 1px 0 rgb(255 255 255 / 18%)); --jsxscores-account-menu-avatar-font-size: var(--wp--custom--jsxscores--account-menu--avatar--font-size, 1.15rem); --jsxscores-account-menu-eyebrow-size: var(--wp--custom--jsxscores--account-menu--eyebrow--size, 0.72rem); --jsxscores-account-menu-eyebrow-color: var(--wp--custom--jsxscores--account-menu--eyebrow--color, rgb(255 255 255 / 68%)); --jsxscores-account-menu-status-padding-block: var(--wp--custom--jsxscores--account-menu--status--padding-block, 0.32rem); --jsxscores-account-menu-status-padding-inline: var(--wp--custom--jsxscores--account-menu--status--padding-inline, 0.7rem); --jsxscores-account-menu-status-radius: var(--wp--custom--jsxscores--account-menu--status--radius, 999px); --jsxscores-account-menu-status-border: var(--wp--custom--jsxscores--account-menu--status--border, rgb(255 255 255 / 14%)); --jsxscores-account-menu-status-surface: var(--wp--custom--jsxscores--account-menu--status--surface, rgb(255 255 255 / 8%)); --jsxscores-account-menu-status-color: var(--wp--custom--jsxscores--account-menu--status--color, rgb(255 255 255 / 82%)); --jsxscores-account-menu-summary-margin-top: var(--wp--custom--jsxscores--account-menu--summary--margin-top, 0.9rem); --jsxscores-account-menu-summary-padding: var(--wp--custom--jsxscores--account-menu--summary--padding, 0.95rem); --jsxscores-account-menu-summary-radius: var(--wp--custom--jsxscores--account-menu--summary--radius, 20px); --jsxscores-account-menu-summary-border: var(--wp--custom--jsxscores--account-menu--summary--border, rgb(148 163 184 / 20%)); --jsxscores-account-menu-summary-surface: var(--wp--custom--jsxscores--account-menu--summary--surface, rgb(255 255 255 / 90%)); --jsxscores-account-menu-summary-shadow: var(--wp--custom--jsxscores--account-menu--summary--shadow, inset 0 1px 0 rgb(255 255 255 / 65%)); --jsxscores-account-menu-summary-muted-color: var(--wp--custom--jsxscores--account-menu--summary--muted-color, #475569); --jsxscores-account-menu-summary-profile-gap: var(--wp--custom--jsxscores--account-menu--summary--profile-gap, 0.55rem); --jsxscores-account-menu-summary-profile-font-size: var(--wp--custom--jsxscores--account-menu--summary--profile-font-size, 0.95rem); --jsxscores-account-menu-summary-item-label-width: var(--wp--custom--jsxscores--account-menu--summary--item-label-width, 80px); --jsxscores-account-menu-summary-item-gap: var(--wp--custom--jsxscores--account-menu--summary--item-gap, 0.8rem); --jsxscores-account-menu-summary-item-padding-block: var(--wp--custom--jsxscores--account-menu--summary--item-padding-block, 0.7rem); --jsxscores-account-menu-summary-item-padding-inline: var(--wp--custom--jsxscores--account-menu--summary--item-padding-inline, 0.8rem); --jsxscores-account-menu-summary-item-radius: var(--wp--custom--jsxscores--account-menu--summary--item-radius, 16px); --jsxscores-account-menu-summary-item-border: var(--wp--custom--jsxscores--account-menu--summary--item-border, rgb(226 232 240 / 80%)); --jsxscores-account-menu-summary-item-surface: var(--wp--custom--jsxscores--account-menu--summary--item-surface, linear-gradient(180deg, rgb(248 250 252 / 90%), rgb(255 255 255 / 94%))); --jsxscores-account-menu-summary-label-size: var(--wp--custom--jsxscores--account-menu--summary--label-size, 0.78rem); --jsxscores-account-menu-summary-label-size-mobile: var(--wp--custom--jsxscores--account-menu--summary--label-size-mobile, 0.74rem); --jsxscores-account-menu-provider-gap: var(--wp--custom--jsxscores--account-menu--provider--gap, 0.35rem); --jsxscores-account-menu-provider-icon-size: var(--wp--custom--jsxscores--account-menu--provider--icon-size, 1.5rem); --jsxscores-account-menu-provider-icon-border: var(--wp--custom--jsxscores--account-menu--provider--icon-border, #d0d7de); --jsxscores-account-menu-provider-icon-surface: var(--wp--custom--jsxscores--account-menu--provider--icon-surface, #fff); --jsxscores-account-menu-provider-icon-shadow: var(--wp--custom--jsxscores--account-menu--provider--icon-shadow, 0 6px 16px rgb(15 23 42 / 8%)); --jsxscores-account-menu-provider-icon-svg-size: var(--wp--custom--jsxscores--account-menu--provider--icon-svg-size, 0.95rem); --jsxscores-account-menu-provider-kakao-border: var(--wp--custom--jsxscores--account-menu--provider--kakao-border, #f4d600); --jsxscores-account-menu-provider-kakao-surface: var(--wp--custom--jsxscores--account-menu--provider--kakao-surface, #fee500); --jsxscores-account-menu-action-gap: var(--wp--custom--jsxscores--account-menu--action--gap, 0.7rem); --jsxscores-account-menu-action-margin-top: var(--wp--custom--jsxscores--account-menu--action--margin-top, 0.95rem); --jsxscores-account-menu-action-min-height: var(--wp--custom--jsxscores--account-menu--action--min-height, 46px); --jsxscores-account-menu-action-padding-block: var(--wp--custom--jsxscores--account-menu--action--padding-block, 0.8rem); --jsxscores-account-menu-action-padding-inline: var(--wp--custom--jsxscores--account-menu--action--padding-inline, 1rem); --jsxscores-account-menu-action-radius: var(--wp--custom--jsxscores--account-menu--action--radius, 999px); --jsxscores-account-menu-action-font-size: var(--wp--custom--jsxscores--account-menu--action--font-size, 0.92rem); --jsxscores-account-menu-action-hover-translate-y: var(--wp--custom--jsxscores--account-menu--action--hover-translate-y, -1px); --jsxscores-account-menu-action-primary-surface: var(--wp--custom--jsxscores--account-menu--action--primary-surface, linear-gradient(135deg, #0f172a 0%, #1e293b 100%)); --jsxscores-account-menu-action-primary-shadow: var(--wp--custom--jsxscores--account-menu--action--primary-shadow, 0 16px 28px rgb(15 23 42 / 18%)); --jsxscores-account-menu-action-primary-hover-shadow: var(--wp--custom--jsxscores--account-menu--action--primary-hover-shadow, 0 18px 30px rgb(15 23 42 / 22%)); --jsxscores-account-menu-action-secondary-surface: var(--wp--custom--jsxscores--account-menu--action--secondary-surface, rgb(255 255 255 / 92%)); --jsxscores-account-menu-action-secondary-hover-surface: var(--wp--custom--jsxscores--account-menu--action--secondary-hover-surface, #fff); --jsxscores-account-menu-action-secondary-border: var(--wp--custom--jsxscores--account-menu--action--secondary-border, rgb(148 163 184 / 36%)); --jsxscores-account-menu-action-secondary-shadow: var(--wp--custom--jsxscores--account-menu--action--secondary-shadow, 0 10px 24px rgb(15 23 42 / 8%)); --jsxscores-account-menu-action-secondary-hover-border: var(--wp--custom--jsxscores--account-menu--action--secondary-hover-border, rgb(100 116 139 / 40%)); --jsxscores-account-menu-mobile-trigger-size: var(--wp--custom--jsxscores--account-menu--mobile--trigger-size, 44px); --jsxscores-account-menu-mobile-profile-item-gap: var(--wp--custom--jsxscores--account-menu--mobile--profile-item-gap, 0.2rem); --jsxscores-compose-page-surface: var(--wp--custom--jsxscores--compose--page--surface, #0f1115); --jsxscores-compose-page-text: var(--wp--custom--jsxscores--compose--page--text, #f4f4f4); --jsxscores-compose-topbar-surface: var(--wp--custom--jsxscores--compose--topbar--surface, #0a0c10); --jsxscores-compose-topbar-divider: var(--wp--custom--jsxscores--compose--topbar--divider, #1c1f27); --jsxscores-compose-topbar-padding-block: var(--wp--custom--jsxscores--compose--topbar--padding-block, 14px); --jsxscores-compose-topbar-padding-inline: var(--wp--custom--jsxscores--compose--topbar--padding-inline, 18px); --jsxscores-compose-topbar-title-size: var(--wp--custom--jsxscores--compose--topbar--title-size, 16px); --jsxscores-compose-topbar-title-weight: var(--wp--custom--jsxscores--compose--topbar--title-weight, 600); --jsxscores-compose-topbar-control-color: var(--wp--custom--jsxscores--compose--topbar--control-color, #f4f4f4); --jsxscores-compose-body-gap: var(--wp--custom--jsxscores--compose--body--gap, 20px); --jsxscores-compose-body-padding: var(--wp--custom--jsxscores--compose--body--padding, 18px); --jsxscores-compose-travel-sub-gap: var(--wp--custom--jsxscores--compose--body--travel-sub-gap, 30px); --jsxscores-compose-field-label-color: var(--wp--custom--jsxscores--compose--field--label-color, #b7bcc7); --jsxscores-compose-field-label-size: var(--wp--custom--jsxscores--compose--field--label-size, 12px); --jsxscores-compose-field-surface: var(--wp--custom--jsxscores--compose--field--surface, #0f1115); --jsxscores-compose-field-border: var(--wp--custom--jsxscores--compose--field--border, #2a3142); --jsxscores-compose-field-radius: var(--wp--custom--jsxscores--compose--field--radius, 8px); --jsxscores-compose-field-text: var(--wp--custom--jsxscores--compose--field--text, #fff); --jsxscores-compose-field-font-size-desktop: var(--wp--custom--jsxscores--compose--field--font-size-desktop, 13px); --jsxscores-compose-field-font-size-mobile: var(--wp--custom--jsxscores--compose--field--font-size-mobile, 16px); --jsxscores-compose-time-mode-surface: var(--wp--custom--jsxscores--compose--time-mode--surface, #0f1115); --jsxscores-compose-time-mode-border: var(--wp--custom--jsxscores--compose--time-mode--border, #2a3142); --jsxscores-compose-time-mode-text: var(--wp--custom--jsxscores--compose--time-mode--text, #b7bcc7); --jsxscores-compose-time-mode-font-size: var(--wp--custom--jsxscores--compose--time-mode--font-size, 12px); --jsxscores-compose-time-mode-active-surface: var(--wp--custom--jsxscores--compose--time-mode--active-surface, #2a3142); --jsxscores-compose-time-mode-active-text: var(--wp--custom--jsxscores--compose--time-mode--active-text, #fff); --jsxscores-compose-captured-time-border: var(--wp--custom--jsxscores--compose--captured-time--border, #2a3142); --jsxscores-compose-captured-time-surface: var(--wp--custom--jsxscores--compose--captured-time--surface, #0f1115); --jsxscores-compose-captured-time-text: var(--wp--custom--jsxscores--compose--captured-time--text, #b7bcc7); --jsxscores-compose-captured-time-padding-block: var(--wp--custom--jsxscores--compose--captured-time--padding-block, 6px); --jsxscores-compose-captured-time-padding-inline: var(--wp--custom--jsxscores--compose--captured-time--padding-inline, 10px); --jsxscores-compose-captured-time-radius: var(--wp--custom--jsxscores--compose--captured-time--radius, 999px); --jsxscores-compose-captured-time-font-size: var(--wp--custom--jsxscores--compose--captured-time--font-size, 12px); --jsxscores-compose-captured-time-active-border: var(--wp--custom--jsxscores--compose--captured-time--active-border, #4b78ff); --jsxscores-compose-captured-time-active-text: var(--wp--custom--jsxscores--compose--captured-time--active-text, #fff); --jsxscores-compose-captured-time-active-shadow: var(--wp--custom--jsxscores--compose--captured-time--active-shadow, 0 0 0 2px rgb(75 120 255 / 30%)); --jsxscores-compose-hint-text: var(--wp--custom--jsxscores--compose--hint--text, #6d7485); --jsxscores-compose-editor-surface: var(--wp--custom--jsxscores--compose--editor--surface, #0f1115); --jsxscores-compose-editor-border: var(--wp--custom--jsxscores--compose--editor--border, #2a3142); --jsxscores-compose-editor-radius: var(--wp--custom--jsxscores--compose--editor--radius, 12px); --jsxscores-compose-editor-text: var(--wp--custom--jsxscores--compose--editor--text, #f4f4f4); --jsxscores-compose-editor-font-size-desktop: var(--wp--custom--jsxscores--compose--editor--font-size-desktop, 13px); --jsxscores-compose-editor-font-size-mobile: var(--wp--custom--jsxscores--compose--editor--font-size-mobile, 16px); --jsxscores-compose-editor-placeholder: var(--wp--custom--jsxscores--compose--editor--placeholder, #6d7485); --jsxscores-compose-preview-surface: var(--wp--custom--jsxscores--compose--preview--surface, #141821); --jsxscores-compose-preview-border: var(--wp--custom--jsxscores--compose--preview--border, #1f2430); --jsxscores-compose-preview-radius: var(--wp--custom--jsxscores--compose--preview--radius, 12px); --jsxscores-compose-preview-min-height: var(--wp--custom--jsxscores--compose--preview--min-height, 320px); --jsxscores-compose-preview-dragover-border: var(--wp--custom--jsxscores--compose--preview--dragover-border, #4b78ff); --jsxscores-compose-preview-dragover-surface: var(--wp--custom--jsxscores--compose--preview--dragover-surface, #0f1320); --jsxscores-compose-preview-placeholder-text: var(--wp--custom--jsxscores--compose--preview--placeholder--text, #8a92a3); --jsxscores-compose-preview-placeholder-font-size: var(--wp--custom--jsxscores--compose--preview--placeholder--font-size, 14px); --jsxscores-compose-preview-placeholder-icon-size: var(--wp--custom--jsxscores--compose--preview--placeholder--icon-size, 42px); --jsxscores-compose-preview-placeholder-icon-radius: var(--wp--custom--jsxscores--compose--preview--placeholder--icon-radius, 999px); --jsxscores-compose-preview-placeholder-icon-font-size: var(--wp--custom--jsxscores--compose--preview--placeholder--icon-font-size, 24px); --jsxscores-compose-fab-offset: var(--wp--custom--jsxscores--compose--fab--offset, 18px); --jsxscores-compose-fab-surface: var(--wp--custom--jsxscores--compose--fab--surface, #4b78ff); --jsxscores-compose-fab-surface-hover: var(--wp--custom--jsxscores--compose--fab--surface-hover, #3f6cff); --jsxscores-compose-fab-text: var(--wp--custom--jsxscores--compose--fab--text, #fff); --jsxscores-compose-fab-radius: var(--wp--custom--jsxscores--compose--fab--radius, 999px); --jsxscores-compose-fab-gap: var(--wp--custom--jsxscores--compose--fab--gap, 10px); --jsxscores-compose-fab-padding-block: var(--wp--custom--jsxscores--compose--fab--padding-block, 12px); --jsxscores-compose-fab-padding-inline: var(--wp--custom--jsxscores--compose--fab--padding-inline, 14px); --jsxscores-compose-fab-shadow: var(--wp--custom--jsxscores--compose--fab--shadow, 0 12px 28px rgb(0 0 0 / 28%)); --jsxscores-compose-fab-icon-size: var(--wp--custom--jsxscores--compose--fab--icon-size, 22px); --jsxscores-compose-fab-plus-stroke-width: var(--wp--custom--jsxscores--compose--fab--plus-stroke-width, 2px); --jsxscores-compose-fab-plus-stroke-radius: var(--wp--custom--jsxscores--compose--fab--plus-stroke-radius, 2px); --jsxscores-compose-fab-plus-vertical-length: var(--wp--custom--jsxscores--compose--fab--plus-vertical-length, 16px); --jsxscores-compose-fab-plus-horizontal-length: var(--wp--custom--jsxscores--compose--fab--plus-horizontal-length, 16px); --jsxscores-compose-fab-label-size: var(--wp--custom--jsxscores--compose--fab--label-size, 14px); --jsxscores-compose-fab-label-weight: var(--wp--custom--jsxscores--compose--fab--label-weight, 600); --jsxscores-compose-fab-mobile-size: var(--wp--custom--jsxscores--compose--fab--mobile-size, 56px); --jsxscores-compose-fab-mobile-icon-size: var(--wp--custom--jsxscores--compose--fab--mobile-icon-size, 28px); --jsxscores-compose-fab-mobile-plus-vertical-length: var(--wp--custom--jsxscores--compose--fab--mobile-plus-vertical-length, 18px); --jsxscores-compose-fab-mobile-plus-horizontal-length: var(--wp--custom--jsxscores--compose--fab--mobile-plus-horizontal-length, 18px); --jsxscores-compose-action-primary-surface: var(--wp--custom--jsxscores--compose--action--primary-surface, #4b78ff); --jsxscores-compose-action-primary-text: var(--wp--custom--jsxscores--compose--action--primary-text, #fff); --jsxscores-compose-action-primary-radius: var(--wp--custom--jsxscores--compose--action--primary-radius, 6px); --jsxscores-compose-action-primary-font-size: var(--wp--custom--jsxscores--compose--action--primary-font-size, 14px); --jsxscores-compose-action-primary-font-weight: var(--wp--custom--jsxscores--compose--action--primary-font-weight, 500); --jsxscores-compose-action-submitting-spinner-size: var(--wp--custom--jsxscores--compose--action--submitting--spinner-size, 14px); --jsxscores-compose-action-submitting-spinner-stroke-width: var(--wp--custom--jsxscores--compose--action--submitting--spinner-stroke-width, 2px); --jsxscores-compose-action-submitting-spinner-stroke: var(--wp--custom--jsxscores--compose--action--submitting--spinner-stroke, rgb(255 255 255 / 45%)); --jsxscores-compose-action-submitting-spinner-active-stroke: var(--wp--custom--jsxscores--compose--action--submitting--spinner-active-stroke, #fff); --jsxscores-compose-action-secondary-border: var(--wp--custom--jsxscores--compose--action--secondary-border, rgb(255 255 255 / 35%)); --jsxscores-compose-action-secondary-text: var(--wp--custom--jsxscores--compose--action--secondary-text, rgb(255 255 255 / 90%)); --jsxscores-compose-action-secondary-hover-border: var(--wp--custom--jsxscores--compose--action--secondary-hover-border, rgb(255 255 255 / 60%)); --jsxscores-compose-map-control-gap: var(--wp--custom--jsxscores--compose--map-control--gap, 8px); --jsxscores-compose-visibility-padding-inline: var(--wp--custom--jsxscores--compose--visibility--padding-inline, 2px); --jsxscores-compose-visibility-radius: var(--wp--custom--jsxscores--compose--visibility--radius, 3px); --jsxscores-compose-visibility-member-surface: var(--wp--custom--jsxscores--compose--visibility--member-surface, rgb(75 120 255 / 35%)); --jsxscores-compose-visibility-friend-surface: var(--wp--custom--jsxscores--compose--visibility--friend-surface, rgb(66 200 160 / 35%)); --jsxscores-compose-visibility-family-surface: var(--wp--custom--jsxscores--compose--visibility--family-surface, rgb(255 175 64 / 35%)); --jsxscores-compose-interaction-thumbs-gap: var(--wp--custom--jsxscores--compose--interaction--thumbs--gap, 12px); --jsxscores-compose-interaction-thumbs-text: var(--wp--custom--jsxscores--compose--interaction--thumbs--text, #f4f4f4); --jsxscores-compose-interaction-thumbs-scrollbar: var(--wp--custom--jsxscores--compose--interaction--thumbs--scrollbar, #2a3142); --jsxscores-compose-interaction-thumbs-scrollbar-hover: var(--wp--custom--jsxscores--compose--interaction--thumbs--scrollbar-hover, #39445c); --jsxscores-compose-interaction-thumb-gap: var(--wp--custom--jsxscores--compose--interaction--thumb--gap, 6px); --jsxscores-compose-interaction-thumb-handle-height: var(--wp--custom--jsxscores--compose--interaction--thumb--handle-height, 6px); --jsxscores-compose-interaction-thumb-handle-grip-width: var(--wp--custom--jsxscores--compose--interaction--thumb--handle-grip-width, 62px); --jsxscores-compose-interaction-thumb-handle-grip-height: var(--wp--custom--jsxscores--compose--interaction--thumb--handle-grip-height, 2px); --jsxscores-compose-interaction-thumb-handle-grip-radius: var(--wp--custom--jsxscores--compose--interaction--thumb--handle-grip-radius, 999px); --jsxscores-compose-interaction-thumb-handle-grip-shadow: var(--wp--custom--jsxscores--compose--interaction--thumb--handle-grip-shadow, 0 0 0 1px rgb(0 0 0 / 26%), 0 10px 26px rgb(0 0 0 / 28%)); --jsxscores-compose-interaction-thumb-drop-indicator-width: var(--wp--custom--jsxscores--compose--interaction--thumb--drop-indicator-width, 3px); --jsxscores-compose-interaction-thumb-drop-indicator-radius: var(--wp--custom--jsxscores--compose--interaction--thumb--drop-indicator-radius, 999px); --jsxscores-compose-interaction-thumb-drop-indicator-shadow: var(--wp--custom--jsxscores--compose--interaction--thumb--drop-indicator-shadow, 0 0 0 1px rgb(0 0 0 / 24%), 0 0 0 6px rgb(244 244 244 / 12%)); --jsxscores-compose-interaction-thumb-size: var(--wp--custom--jsxscores--compose--interaction--thumb--size, 120px); --jsxscores-compose-interaction-thumb-surface: var(--wp--custom--jsxscores--compose--interaction--thumb--surface, #141821); --jsxscores-compose-interaction-thumb-border: var(--wp--custom--jsxscores--compose--interaction--thumb--border, #2a3142); --jsxscores-compose-interaction-thumb-radius: var(--wp--custom--jsxscores--compose--interaction--thumb--radius, 10px); --jsxscores-compose-interaction-thumb-active-border: var(--wp--custom--jsxscores--compose--interaction--thumb--active-border, #4b78ff); --jsxscores-compose-interaction-thumb-active-shadow: var(--wp--custom--jsxscores--compose--interaction--thumb--active-shadow, 0 0 0 2px rgb(75 120 255 / 30%)); --jsxscores-compose-interaction-thumb-dragging-opacity: var(--wp--custom--jsxscores--compose--interaction--thumb--dragging-opacity, 0.9); --jsxscores-compose-interaction-thumb-select-surface: var(--wp--custom--jsxscores--compose--interaction--thumb-select--surface, #0f1115); --jsxscores-compose-interaction-thumb-select-border: var(--wp--custom--jsxscores--compose--interaction--thumb-select--border, #2a3142); --jsxscores-compose-interaction-thumb-select-text: var(--wp--custom--jsxscores--compose--interaction--thumb-select--text, #f4f4f4); --jsxscores-compose-interaction-thumb-select-radius: var(--wp--custom--jsxscores--compose--interaction--thumb-select--radius, 6px); --jsxscores-compose-interaction-thumb-select-font-size: var(--wp--custom--jsxscores--compose--interaction--thumb-select--font-size, 12px); --jsxscores-compose-interaction-thumb-delete-surface: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--surface, rgb(15 17 21 / 92%)); --jsxscores-compose-interaction-thumb-delete-border: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--border, #2a3142); --jsxscores-compose-interaction-thumb-delete-text: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--text, #f4f4f4); --jsxscores-compose-interaction-thumb-delete-font-size: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--font-size, 11px); --jsxscores-compose-interaction-thumb-delete-radius: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--radius, 999px); --jsxscores-compose-interaction-thumb-delete-size: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--size, 22px); --jsxscores-compose-interaction-thumb-delete-hover-surface: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--hover-surface, #2a3142); --jsxscores-compose-interaction-thumb-delete-focus-shadow: var(--wp--custom--jsxscores--compose--interaction--thumb-delete--focus-shadow, 0 0 0 2px rgb(75 120 255 / 30%)); --jsxscores-compose-interaction-thumb-add-border: var(--wp--custom--jsxscores--compose--interaction--thumb-add--border, #2a3142); --jsxscores-compose-interaction-thumb-add-text: var(--wp--custom--jsxscores--compose--interaction--thumb-add--text, #b7bcc7); --jsxscores-compose-interaction-thumb-add-dragover-border: var(--wp--custom--jsxscores--compose--interaction--thumb-add--dragover-border, #4b78ff); --jsxscores-compose-interaction-thumb-add-dragover-text: var(--wp--custom--jsxscores--compose--interaction--thumb-add--dragover-text, #f4f4f4); --jsxscores-compose-interaction-thumb-add-icon-size: var(--wp--custom--jsxscores--compose--interaction--thumb-add--icon-size, 20px); --jsxscores-compose-interaction-thumb-add-text-size: var(--wp--custom--jsxscores--compose--interaction--thumb-add--text-size, 12px); --jsxscores-compose-interaction-role-menu-surface: var(--wp--custom--jsxscores--compose--interaction--role-menu--surface, #0f1115); --jsxscores-compose-interaction-role-menu-border: var(--wp--custom--jsxscores--compose--interaction--role-menu--border, #2a3142); --jsxscores-compose-interaction-role-menu-gap: var(--wp--custom--jsxscores--compose--interaction--role-menu--gap, 6px); --jsxscores-compose-interaction-role-menu-radius: var(--wp--custom--jsxscores--compose--interaction--role-menu--radius, 10px); --jsxscores-compose-interaction-role-menu-padding: var(--wp--custom--jsxscores--compose--interaction--role-menu--padding, 6px); --jsxscores-compose-interaction-role-menu-shadow: var(--wp--custom--jsxscores--compose--interaction--role-menu--shadow, 0 10px 24px rgb(0 0 0 / 35%)); --jsxscores-compose-interaction-role-option-surface: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-surface, #1c2130); --jsxscores-compose-interaction-role-option-text: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-text, #f4f4f4); --jsxscores-compose-interaction-role-option-radius: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-radius, 6px); --jsxscores-compose-interaction-role-option-padding-block: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-padding-block, 5px); --jsxscores-compose-interaction-role-option-padding-inline: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-padding-inline, 9px); --jsxscores-compose-interaction-role-option-font-size: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-font-size, 11px); --jsxscores-compose-interaction-role-option-active-surface: var(--wp--custom--jsxscores--compose--interaction--role-menu--option-active-surface, #4b78ff); --jsxscores-compose-interaction-role-remove-surface: var(--wp--custom--jsxscores--compose--interaction--role-menu--remove-surface, #3a1c1c); --jsxscores-compose-interaction-role-remove-text: var(--wp--custom--jsxscores--compose--interaction--role-menu--remove-text, #ffb3b3); --jsxscores-compose-interaction-role-remove-min-width: var(--wp--custom--jsxscores--compose--interaction--role-menu--remove-min-width, 28px); --jsxscores-compose-interaction-upload-overlay-backdrop: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--backdrop, rgb(10 12 18 / 55%)); --jsxscores-compose-interaction-upload-overlay-card-surface: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-surface, rgb(20 24 33 / 95%)); --jsxscores-compose-interaction-upload-overlay-card-border: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-border, rgb(42 49 66 / 90%)); --jsxscores-compose-interaction-upload-overlay-card-radius: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-radius, 18px); --jsxscores-compose-interaction-upload-overlay-card-size: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-size, 180px); --jsxscores-compose-interaction-upload-overlay-card-gap: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-gap, 14px); --jsxscores-compose-interaction-upload-overlay-card-shadow: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--card-shadow, 0 24px 70px rgb(0 0 0 / 60%)); --jsxscores-compose-interaction-upload-overlay-ring-size: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--ring-size, 64px); --jsxscores-compose-interaction-upload-overlay-count-text: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--count-text, #f4f4f4); --jsxscores-compose-interaction-upload-overlay-count-size: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--count-size, 15px); --jsxscores-compose-interaction-upload-overlay-count-shadow: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--count-shadow, 0 0 12px rgb(244 244 244 / 18%)); --jsxscores-compose-interaction-upload-overlay-track-stroke: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--track-stroke, rgb(244 244 244 / 14%)); --jsxscores-compose-interaction-upload-overlay-track-stroke-width: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--track-stroke-width, 4px); --jsxscores-compose-interaction-upload-overlay-bar-stroke: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--bar-stroke, #f4f4f4); --jsxscores-compose-interaction-upload-overlay-bar-stroke-width: var(--wp--custom--jsxscores--compose--interaction--upload-overlay--bar-stroke-width, 4px); --jsxscores-compose-travel-sub-hero-preview-max-width: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-max-width, 560px); --jsxscores-compose-travel-sub-hero-preview-border: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-border, var(--jsxscores-compose-field-border)); --jsxscores-compose-travel-sub-hero-preview-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-surface, var(--jsxscores-compose-preview-surface)); --jsxscores-compose-travel-sub-hero-preview-backdrop: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-backdrop, radial-gradient(circle at 50% 0%, rgb(75 120 255 / 20%), rgb(15 17 21 / 95%) 55%)); --jsxscores-compose-travel-sub-hero-preview-frame-inset: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-frame-inset, 52px); --jsxscores-compose-travel-sub-hero-preview-frame-border: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-frame-border, rgb(255 255 255 / 34%)); --jsxscores-compose-travel-sub-hero-preview-frame-shadow: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--preview-frame-shadow, 0 0 0 999px rgb(5 7 11 / 26%)); --jsxscores-compose-travel-sub-hero-placeholder-color: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--placeholder-color, var(--jsxscores-compose-field-label-color)); --jsxscores-compose-travel-sub-hero-placeholder-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--placeholder-gap, 10px); --jsxscores-compose-travel-sub-hero-placeholder-padding: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--placeholder-padding, 24px); --jsxscores-compose-travel-sub-hero-placeholder-text-color: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--placeholder-text-color, var(--jsxscores-compose-page-text)); --jsxscores-compose-travel-sub-hero-placeholder-text-size: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--placeholder-text-size, 16px); --jsxscores-compose-travel-sub-hero-toolbar-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--toolbar-gap, 8px); --jsxscores-compose-travel-sub-hero-control-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-surface, rgb(10 12 18 / 82%)); --jsxscores-compose-travel-sub-hero-control-border: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-border, rgb(255 255 255 / 32%)); --jsxscores-compose-travel-sub-hero-control-text: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-text, rgb(255 255 255 / 92%)); --jsxscores-compose-travel-sub-hero-control-shadow: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-shadow, 0 14px 30px rgb(0 0 0 / 28%)); --jsxscores-compose-travel-sub-hero-control-size: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-size, 42px); --jsxscores-compose-travel-sub-hero-control-icon-size: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-icon-size, 21px); --jsxscores-compose-travel-sub-hero-control-icon-size-compact: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-icon-size-compact, 18px); --jsxscores-compose-travel-sub-hero-control-radius: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-radius, 999px); --jsxscores-compose-travel-sub-hero-control-disabled-opacity: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--control-disabled-opacity, 0.5); --jsxscores-compose-travel-sub-hero-delete-icon-size: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--delete-icon-size, 20px); --jsxscores-compose-travel-sub-hero-delete-icon-stroke-width: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--delete-icon-stroke-width, 2.4px); --jsxscores-compose-travel-sub-hero-delete-hover-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--delete-hover-surface, rgb(34 40 56 / 94%)); --jsxscores-compose-travel-sub-hero-delete-hover-text: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--delete-hover-text, #fff); --jsxscores-compose-travel-sub-hero-resize-radius: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--resize-radius, 14px); --jsxscores-compose-travel-sub-hero-resize-background-image: var(--wp--custom--jsxscores--compose--travel-subcategory--hero--resize-background-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.92)' stroke-width='1.95' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7L17 17'/%3E%3Cpolyline points='7 10.5 7 7 10.5 7'/%3E%3Cpolyline points='13.5 17 17 17 17 13.5'/%3E%3C/svg%3E")); --jsxscores-compose-travel-sub-members-field-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--field-gap, 12px); --jsxscores-compose-travel-sub-members-filters-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--filters-gap, 10px); --jsxscores-compose-travel-sub-members-filters-role-width: var(--wp--custom--jsxscores--compose--travel-subcategory--members--filters-role-width, 200px); --jsxscores-compose-travel-sub-members-list-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-gap, 12px); --jsxscores-compose-travel-sub-members-list-max-height: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-max-height, 340px); --jsxscores-compose-travel-sub-members-list-padding-inline-end: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-padding-inline-end, 4px); --jsxscores-compose-travel-sub-members-list-scrollbar-color: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-scrollbar-color, rgb(75 120 255 / 50%)); --jsxscores-compose-travel-sub-members-list-scrollbar-track: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-scrollbar-track, rgb(17 21 29 / 72%)); --jsxscores-compose-travel-sub-members-list-scrollbar-thumb: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-scrollbar-thumb, linear-gradient(180deg, rgb(75 120 255 / 48%), rgb(45 63 112 / 84%))); --jsxscores-compose-travel-sub-members-list-scrollbar-thumb-border: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-scrollbar-thumb-border, rgb(17 21 29 / 72%)); --jsxscores-compose-travel-sub-members-list-scrollbar-thumb-hover: var(--wp--custom--jsxscores--compose--travel-subcategory--members--list-scrollbar-thumb-hover, linear-gradient(180deg, rgb(95 138 255 / 58%), rgb(54 75 130 / 90%))); --jsxscores-compose-travel-sub-members-chips-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chips-gap, 6px); --jsxscores-compose-travel-sub-members-chips-margin-top: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chips-margin-top, 4px); --jsxscores-compose-travel-sub-members-chips-margin-bottom: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chips-margin-bottom, 8px); --jsxscores-compose-travel-sub-members-chip-border: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-border, rgb(75 120 255 / 35%)); --jsxscores-compose-travel-sub-members-chip-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-surface, rgb(75 120 255 / 15%)); --jsxscores-compose-travel-sub-members-chip-radius: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-radius, 999px); --jsxscores-compose-travel-sub-members-chip-padding-block: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-padding-block, 0.35em); --jsxscores-compose-travel-sub-members-chip-padding-inline: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-padding-inline, 0.65em); --jsxscores-compose-travel-sub-members-chip-font-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-font-size, 0.82rem); --jsxscores-compose-travel-sub-members-chip-role-text: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-role-text, #a8c0ff); --jsxscores-compose-travel-sub-members-chip-role-font-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--chip-role-font-size, 0.74rem); --jsxscores-compose-travel-sub-members-group-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--group-gap, 8px); --jsxscores-compose-travel-sub-members-group-title-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--group-title-size, 0.84rem); --jsxscores-compose-travel-sub-members-option-grid-min: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-grid-min, 145px); --jsxscores-compose-travel-sub-members-option-grid-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-grid-gap, 8px); --jsxscores-compose-travel-sub-members-option-gap: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-gap, 3px); --jsxscores-compose-travel-sub-members-option-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-surface, #11151d); --jsxscores-compose-travel-sub-members-option-radius: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-radius, 10px); --jsxscores-compose-travel-sub-members-option-padding-block: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-padding-block, 0.6em); --jsxscores-compose-travel-sub-members-option-padding-inline: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-padding-inline, 0.75em); --jsxscores-compose-travel-sub-members-option-selected-border: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-selected-border, rgb(75 120 255 / 80%)); --jsxscores-compose-travel-sub-members-option-selected-surface: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-selected-surface, rgb(75 120 255 / 18%)); --jsxscores-compose-travel-sub-members-option-selected-shadow: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-selected-shadow, 0 0 0 1px rgb(75 120 255 / 20%)); --jsxscores-compose-travel-sub-members-muted-text: var(--wp--custom--jsxscores--compose--travel-subcategory--members--muted-text, #8f97a7); --jsxscores-compose-travel-sub-members-option-meta-font-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--option-meta-font-size, 0.74rem); --jsxscores-compose-travel-sub-members-empty-font-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--empty-font-size, 0.9rem); --jsxscores-compose-travel-sub-members-status-font-size: var(--wp--custom--jsxscores--compose--travel-subcategory--members--status-font-size, 0.92rem); --jsxscores-compose-travel-sub-members-status-min-height: var(--wp--custom--jsxscores--compose--travel-subcategory--members--status-min-height, 1.5em); --jsxscores-compose-travel-sub-members-status-loading: var(--wp--custom--jsxscores--compose--travel-subcategory--members--status-loading, #c5cbd7); --jsxscores-compose-travel-sub-members-status-success: var(--wp--custom--jsxscores--compose--travel-subcategory--members--status-success, #92e0b4); --jsxscores-compose-travel-sub-members-status-error: var(--wp--custom--jsxscores--compose--travel-subcategory--members--status-error, #ffb3b3); --jsxscores-compose-travel-sub-locked-max-width: var(--wp--custom--jsxscores--compose--travel-subcategory--locked--max-width, 420px); --jsxscores-compose-travel-sub-locked-margin-top: var(--wp--custom--jsxscores--compose--travel-subcategory--locked--margin-top, 5rem); --jsxscores-compose-travel-sub-locked-padding-inline: var(--wp--custom--jsxscores--compose--travel-subcategory--locked--padding-inline, 1.5rem); --jsxscores-compose-travel-sub-locked-padding-bottom: var(--wp--custom--jsxscores--compose--travel-subcategory--locked--padding-bottom, 3rem); --jsxscores-compose-travel-sub-locked-button-margin-top: var(--wp--custom--jsxscores--compose--travel-subcategory--locked--button-margin-top, 1rem); --jsxscores-type-scale-meta: var(--wp--custom--jsxscores--typography--scale--meta, 90%); --jsxscores-type-scale-meta-tight: var(--wp--custom--jsxscores--typography--scale--meta-tight, 80%); --jsxscores-type-scale-action: var(--wp--custom--jsxscores--typography--scale--action, 85%); --jsxscores-type-scale-section-heading: var(--wp--custom--jsxscores--typography--scale--section-heading, 1.4em); --jsxscores-type-scale-page-title: var(--wp--custom--jsxscores--typography--scale--page-title, 2.5em); --jsxscores-type-scale-hero-title: var(--wp--custom--jsxscores--typography--scale--hero-title, 3em); --jsxscores-shell-inline-mobile: var(--wp--custom--jsxscores--shell--inline-mobile, 1em); --jsxscores-shell-inline-tablet: var(--wp--custom--jsxscores--shell--inline-tablet, 2em); --jsxscores-footer-site-info-font-size: var(--wp--custom--jsxscores--footer--site-info-font-size, 0.8em); --jsxscores-header-branding-title-size: var(--wp--custom--jsxscores--header--branding--title-size, 1.6em); --jsxscores-header-branding-title-line-height: var(--wp--custom--jsxscores--header--branding--title-line-height, 1em); --jsxscores-header-branding-mobile-gap: var(--wp--custom--jsxscores--header--branding--mobile--gap, 10px); --jsxscores-header-branding-mobile-min-height: var(--wp--custom--jsxscores--header--branding--mobile--min-height, 52px); --jsxscores-header-branding-mobile-text-inset-inline: var(--wp--custom--jsxscores--header--branding--mobile--text-inset-inline, 60px); --jsxscores-header-branding-mobile-text-font-size: var(--wp--custom--jsxscores--header--branding--mobile--text-font-size, 110%); --jsxscores-layout-content-width: var(--wp--custom--jsxscores--layout--content-width, 980px); --jsxscores-layout-content-width-narrow: var(--wp--custom--jsxscores--layout--content-width-narrow, 640px); } } @layer jsxscores.reset{ /* * Legacy normalize base extracted from the compiled theme stylesheet during the * parity-first rebuild. Keep declarations aligned with the pre-rebuild runtime. */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; position: relative; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { color: #000; background: #ff0; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; } code, kbd, samp { font-family: monospace; font-size: 1em; } pre { overflow: auto; font-family: monospace; font-size: 1em; } button, input, optgroup, select { margin: 0; color: inherit; font: inherit; } textarea { margin: 0; overflow: auto; color: inherit; font: inherit; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; } legend { padding: 0; border: 0; } optgroup { font-weight: bold; } table { border-spacing: 0; border-collapse: collapse; } td, th { padding: 0; } } @layer jsxscores.base{ /* * Legacy typography base extracted from the compiled theme stylesheet during * the parity-first rebuild. */ body, button, input, select, textarea { color: var(--jsxscores-color-text-base); font-family: var(--jsxscores-font-body); font-size: 18px; font-size: 1.125rem; line-height: 1.5; } @media screen and (width >= 600px) { body, button, input, select, textarea { font-size: 20px; font-size: 1.25rem; } } :is(h1, h2, h3, h4, h5, h6) { clear: both; margin-top: 0.75em; margin-bottom: 0.25em; font-family: var(--jsxscores-font-sans); } h1 { font-size: var(--jsxscores-type-scale-hero-title); } h2 { font-size: 2.6em; } h3 { font-size: 2.2em; } h4 { font-size: 2em; } h5 { font-size: 1.8em; } h6 { font-size: 1.6em; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { position: relative; margin: 0 0 1em; padding: 1em 2em 0.5em 5em; font-style: italic; background: var(--jsxscores-color-surface-muted); } blockquote::before { position: absolute; top: -0.2em; left: -0.13em; color: var(--jsxscores-color-surface-light); content: "“"; font-family: var(--jsxscores-font-sans); font-size: 12em; line-height: 100%; } address { margin: 0 0 1.5em; } pre { margin-bottom: 1.6em; padding: 1.6em; overflow: auto; max-width: 100%; background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 18.75px; font-size: 1.1719rem; line-height: 1.6; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 18.75px; font-size: 1.1719rem; } abbr, acronym { cursor: help; border-bottom: 1px dotted var(--jsxscores-color-text-muted); } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } } @layer jsxscores.base{ /* * Legacy element defaults extracted from the compiled theme stylesheet during * the parity-first rebuild. */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { background: var(--jsxscores-color-surface-light); } blockquote, q { quotes: "" ""; } hr { height: 1px; margin-bottom: 1.5em; border: 0; background-color: var(--jsxscores-color-border-soft); } ul, ol { margin: 0 0 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 0.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { max-width: 100%; height: auto; } figure { margin: 0; } } @layer jsxscores.base{ /* * Legacy form defaults extracted from the compiled theme stylesheet during the * parity-first rebuild. */ button, input[type="button"], input[type="reset"], input[type="submit"] { background: transparent; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"] { padding: 3px; color: var(--jsxscores-color-text-muted); border: 1px solid var(--jsxscores-color-border-soft); border-radius: 3px; } textarea { width: 100%; padding: 3px; color: var(--jsxscores-color-text-muted); border: 1px solid var(--jsxscores-color-border-soft); border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; } select { border: 1px solid var(--jsxscores-color-border-soft); } } @layer jsxscores.base{ /* * The compiled legacy clearings block is effectively inert: the first selector * list was invalid, and the remaining `::after` declarations do not generate * content on their own. This file exists to keep the migration inventory * complete without changing runtime behavior. */ } @layer jsxscores.utilities{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .screen-reader-text { /* stylelint-disable-next-line property-no-deprecated */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgb(0 0 0 / 60%); /* stylelint-disable-next-line property-no-deprecated */ clip: auto !important; color: #000; display: block; font-size: 17.5px; font-size: 1.0938rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } #content[tabindex="-1"]:focus { outline: 0; } .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } } @layer jsxscores.compat{ /* * Bootstrap carousel compatibility layer extracted from the legacy root * stylesheet during the parity-first migration. */ .carousel { position: relative; } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-item { position: relative; display: none; width: 100%; perspective: 1000px; align-items: center; backface-visibility: hidden; } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; transition: transform 0.6s ease; } @media screen and (prefers-reduced-motion: reduce) { .carousel-item.active, .carousel-item-next, .carousel-item-prev { transition: none; } } .carousel-item-next, .carousel-item-prev { position: absolute; top: 0; } .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translateX(0); } @supports (transform-style: preserve-3d) { .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { transform: translate3d(0, 0, 0); } } .carousel-item-next, .active.carousel-item-right { transform: translateX(100%); } @supports (transform-style: preserve-3d) { .carousel-item-next, .active.carousel-item-right { transform: translate3d(100%, 0, 0); } } .carousel-item-prev, .active.carousel-item-left { transform: translateX(-100%); } @supports (transform-style: preserve-3d) { .carousel-item-prev, .active.carousel-item-left { transform: translate3d(-100%, 0, 0); } } .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; display: flex; width: 15%; color: var(--jsxscores-carousel-control-color); text-align: center; align-items: center; justify-content: center; } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: var(--jsxscores-carousel-control-hover-color); text-decoration: none; outline: 0; opacity: 0.9; } .carousel-control-prev { left: 0; } .carousel-control-next { right: 0; } .carousel-control-prev-icon, .carousel-control-next-icon { display: inline-block; width: var(--jsxscores-carousel-control-icon-size); height: var(--jsxscores-carousel-control-icon-size); background: transparent no-repeat center center; background-size: 100% 100%; } .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); } .carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); } .carousel-indicators { position: absolute; right: 0; bottom: var(--jsxscores-carousel-indicator-offset-block-end); left: 0; z-index: 15; display: flex; padding-left: 0; margin-right: 15%; margin-left: 15%; list-style: none; justify-content: center; } .carousel-indicators li { position: relative; width: var(--jsxscores-carousel-indicator-size); height: var(--jsxscores-carousel-indicator-size); margin-right: var(--jsxscores-carousel-indicator-gap); margin-left: var(--jsxscores-carousel-indicator-gap); cursor: pointer; text-indent: -999px; background-color: var(--jsxscores-carousel-indicator-base); flex: 0 1 auto; } .carousel-indicators li::before { position: absolute; top: calc(-1 * var(--jsxscores-carousel-indicator-hit-area-offset)); left: 0; display: inline-block; width: 100%; height: var(--jsxscores-carousel-indicator-hit-area-size); content: ""; } .carousel-indicators li::after { position: absolute; bottom: calc(-1 * var(--jsxscores-carousel-indicator-hit-area-offset)); left: 0; display: inline-block; width: 100%; height: var(--jsxscores-carousel-indicator-hit-area-size); content: ""; } .carousel-indicators .active { background-color: var(--jsxscores-carousel-indicator-emphasis); } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ @supports (padding: env(safe-area-inset-top)) { .site-header { padding-top: env(safe-area-inset-top); padding-left: calc(var(--jsxscores-shell-inline-mobile) + env(safe-area-inset-left)); padding-right: calc(var(--jsxscores-shell-inline-mobile) + env(safe-area-inset-right)); } @media screen and (min-width: 600px) { .site-header { padding-left: calc(var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-left)); padding-right: calc(var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-right)); } } @media screen and (min-width: 980px) { .site-header { padding-left: calc(((100vw - var(--jsxscores-layout-content-width))/2) + var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-left)); padding-right: calc(((100vw - var(--jsxscores-layout-content-width))/2) + var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-right)); } } } :root { /* Default to `vh`; JS will override with px. */ --jsxscores-vh: 1vh; } @supports (height: 1dvh) { :root { --jsxscores-vh: 1dvh; } } #page.site { min-height: 100vh; min-height: 100dvh; min-height: calc(var(--jsxscores-vh) * 100); display: flex; flex-direction: column; } #content.site-content { flex: 1 0 auto; min-height: 0; } .header-image { max-height: 60vh; overflow: hidden; } .header-image img { display: block; width: 100vw; } .site-header { position: relative; padding: 0 var(--jsxscores-shell-inline-mobile); font-family: var(--jsxscores-font-sans); color: var(--jsxscores-color-text-inverse); background-color: var(--jsxscores-color-surface-dark); } @media screen and (min-width: 600px) { .site-header { padding: 0 var(--jsxscores-shell-inline-tablet); } } @media screen and (min-width: 980px) { .site-header { padding: 0 calc(((100vw - var(--jsxscores-layout-content-width))/2) + var(--jsxscores-shell-inline-tablet)); } } .site-branding { display: flex; align-items: center; justify-content: center; } .custom-logo-link { margin-right: 1em; } .custom-logo-link img { display: block; height: 50px; width: 50px; flex: 0 1 auto; max-width: 100px; } .site-branding__text { display: flex; flex-direction: column; justify-content: center; margin: 1em 0 0.2em; font-size: 150%; } @media screen and (min-width: 600px) { .site-branding__text { font-size: 100%; } } .site-title { margin: 0; padding: 0; font-size: var(--jsxscores-header-branding-title-size); font-weight: 900; line-height: var(--jsxscores-header-branding-title-line-height); } .site-title a { color: var(--jsxscores-color-text-inverse); text-decoration: none; } .site-title a:hover, .site-title a:focus { opacity: 0.5; } .site-description { margin: 0; font-size: 0.9em; font-style: italic; font-weight: 100; } .jsx-lab-page-links { margin-top: 2rem; } .jsx-lab-page-links__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .jsx-lab-page-links__link { display: block; padding: 0.95rem 1.1rem; border: 1px solid rgb(15 23 42 / 12%); border-radius: 14px; background: rgb(255 255 255 / 88%); color: rgb(15 23 42); font-weight: 600; text-decoration: none; box-shadow: 0 12px 24px rgb(15 23 42 / 0.06); } .jsx-lab-page-links__link:hover, .jsx-lab-page-links__link:focus { opacity: 1; background: rgb(255 255 255); } @media screen and (max-width: 599px) { .site-branding { justify-content: flex-start; position: relative; gap: var(--jsxscores-header-branding-mobile-gap); min-height: var(--jsxscores-header-branding-mobile-min-height); } .site-header .site-branding__text { position: absolute; left: var(--jsxscores-header-branding-mobile-text-inset-inline); right: var(--jsxscores-header-branding-mobile-text-inset-inline); top: 0; bottom: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: var(--jsxscores-header-branding-mobile-text-font-size); pointer-events: none; } .site-header .site-branding__text a { pointer-events: auto; } .site-header .site-title { font-size: 1.25em; } .site-description { display: none; } .custom-logo-link img { height: 42px; width: 42px; } } @media screen and (min-width: 900px) { .site-header { display: flex; justify-content: space-between; align-items: center; } .site-branding__text { display: flex; flex-direction: column; justify-content: center; margin: 1em 0; } .site-branding { width: 25%; padding: 0 var(--jsxscores-shell-inline-mobile); } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .site-content { max-width: var(--jsxscores-layout-content-width); margin: 0 auto; padding: 0em; min-height: calc(100vh - 257px); } .single .site-content { padding: var(--jsxscores-shell-inline-mobile); } @media screen and (min-width: 600px) { .site-content { padding: var(--jsxscores-shell-inline-tablet); } } @media screen and (min-width: 600px) { .site-content { min-height: calc(100vh - 158px); } .single.has-sidebar .hentry { display: flex; flex-wrap: wrap; justify-content: space-between; } .single.has-sidebar .hentry .entry-header { width: 100%; flex: 1 0 100%; } .single.has-sidebar .hentry .post-content { width: 60%; } .single.has-sidebar .hentry .widget-area { width: 30%; } .page.page-sidebar .hentry { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; } .page.page-sidebar .hentry .entry-header { width: 100%; flex: 1 0 100%; } .page.page-sidebar .hentry .page-content { width: 60%; } .page.page-sidebar .hentry .widget-area { width: 30%; } } @media screen and (min-width: 900px) { .site-content { min-height: calc(100vh - 128px); } .single.no-sidebar .post-content__wrap, .single.no-page-sidebar .post-content__wrap, .page.no-sidebar .post-content__wrap, .page.no-page-sidebar .post-content__wrap { display: flex; justify-content: space-between; } .single.no-sidebar .post-content__wrap .entry-meta, .single.no-page-sidebar .post-content__wrap .entry-meta, .page.no-sidebar .post-content__wrap .entry-meta, .page.no-page-sidebar .post-content__wrap .entry-meta { width: 20%; } .single.no-sidebar .post-content__wrap .post-content__body, .single.no-page-sidebar .post-content__wrap .post-content__body, .page.no-sidebar .post-content__wrap .post-content__body, .page.no-page-sidebar .post-content__wrap .post-content__body { width: 70%; } .single.no-sidebar .page-content, .single.no-page-sidebar .page-content, .page.no-sidebar .page-content, .page.no-page-sidebar .page-content { width: 100%; } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .archive-view { background-color: var(--jsxscores-color-surface-muted); } .archive-view .post, .archive-view .page { background-color: var(--jsxscores-color-surface-light); } .archive-view .post__content { padding: var(--jsxscores-archive-card-padding-top) var(--jsxscores-archive-card-padding-inline) var(--jsxscores-archive-card-padding-bottom); position: relative; } @media screen and (min-width: 900px) { .archive-view.has-sidebar .site-content { display: flex; flex-wrap: wrap; justify-content: space-between; } .archive-view.has-sidebar .page-header { width: 100%; flex: 1 0 100%; } .archive-view.has-sidebar .content-area { width: 60%; } .archive-view.has-sidebar .widget-area { width: 30%; } } .page-header { font-family: var(--jsxscores-font-sans); } .page-title { margin: 0 0 0.5em; } .archive-description { margin: -1em 0 2em; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .comment-navigation, .post-navigation { padding: var(--jsxscores-post-navigation-container-padding-block) 0; font-family: var(--jsxscores-font-sans); text-align: left; overflow: hidden; } .comment-navigation a, .post-navigation a { display: block; width: 100%; text-decoration: none; padding: var(--jsxscores-post-navigation-link-padding); border: 1px solid var(--jsxscores-color-border-soft); color: var(--jsxscores-color-text-base); } .comment-navigation a:hover, .comment-navigation a:focus, .post-navigation a:hover, .post-navigation a:focus { color: var(--jsxscores-color-text-inverse); border-color: var(--jsxscores-color-accent); background: var(--jsxscores-color-accent); } .nav-links { margin: 0 auto; padding: 0 var(--jsxscores-post-navigation-nav-links-padding-inline-mobile); } .nav-previous { padding-bottom: var(--jsxscores-post-navigation-previous-padding-block-end-mobile); } @media screen and (min-width: 900px) { .nav-links { display: flex; justify-content: space-between; align-items: stretch; padding: 0; } .comment-navigation .nav-previous, .comment-navigation .nav-next, .post-navigation .nav-previous, .post-navigation .nav-next { float: left; display: flex; align-items: stretch; width: 48%; } .comment-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; } .nav-previous { padding-bottom: 0; } } .post-navigation .meta-nav { display: block; } @media screen and (min-width: 30em) { .post-navigation { padding-bottom: var(--jsxscores-post-navigation-container-padding-block-end-wide); } } .post-navigation .post-title { font-size: var(--jsxscores-post-navigation-title-size); font-weight: 700; } .post-navigation a:hover .post-title, .post-navigation a:focus .post-title { border-bottom-color: var(--jsxscores-color-text-inverse); } .pagination { font-family: var(--jsxscores-font-sans); } .pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; } .pagination a, .pagination span { padding: var(--jsxscores-pagination-item-padding-block) var(--jsxscores-pagination-item-padding-inline); background: var(--jsxscores-color-surface-light); } .pagination a { text-decoration: none; } .pagination a:focus, .pagination a:hover { color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-color-accent); } .pagination .current { font-weight: 600; color: var(--jsxscores-color-accent); } } @layer jsxscores.components{ /*-------------------------------------------------------------- # Navigation ## Links --------------------------------------------------------------*/ .archive-view .page-content a, .archive-view .entry-content a, .archive-view .comment-content a, .post .page-content a, .post .entry-content a, .post .comment-content a { text-decoration: none; border-bottom: 2px solid black; } .archive-view .page-content a:focus, .archive-view .page-content a:hover, .archive-view .entry-content a:focus, .archive-view .entry-content a:hover, .archive-view .comment-content a:focus, .archive-view .comment-content a:hover, .post .page-content a:focus, .post .page-content a:hover, .post .entry-content a:focus, .post .entry-content a:hover, .post .comment-content a:focus, .post .comment-content a:hover { color: black; font-weight: 600; border-bottom: 2px solid var(--jsxscores-color-accent); } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .continue-reading { position: absolute; right: 0; bottom: 0; font-family: var(--jsxscores-font-sans); } .continue-reading a { display: block; padding: 0.5em 1em; font-size: var(--jsxscores-type-scale-meta); text-decoration: none; background: #e6e6e6; } .continue-reading a:visited { color: black; } .continue-reading a:focus, .continue-reading a:hover { color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-color-accent); } .search .page-content, .error-404 .page-content { margin-bottom: 2em; padding: 1em 2em; font-family: var(--jsxscores-font-body); color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-color-surface-dark); } .search input[type=search], .error-404 input[type=search] { padding: 0.5em; } .search input[type=submit], .error-404 input[type=submit] { border-color: white; color: white; } .search input[type=submit]:focus, .search input[type=submit]:hover, .error-404 input[type=submit]:focus, .error-404 input[type=submit]:hover { color: black; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .index-image img { display: block; margin: 0 auto; } .index-image a:focus > img, .index-image a:hover > img { opacity: 0.8; } .loadmore-spinner { height: 50px; } @media screen and (min-width: 600px) { .loadmore-spinner { margin-top: -50px; } } .loadmore-spinner svg { display: block; width: 40px; height: 40px; margin: 0 auto; } .temp-comment-block { text-align: center; } .temp-comment-block svg { width: 40px; } .comment-author a { color: black; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .category-quotes.single-post .post { align-self: center; } .category-quotes .site-main { display: flex; flex-direction: column; padding: 0 2em; } @media screen and (min-width: 900px) { .category-quotes.post { max-width: var(--jsxscores-archive-quotes-post-max-width); } .category-quotes.post:nth-child(even) { align-self: flex-end; } } .category-quotes .site { background-color: var(--jsxscores-archive-quotes-surface); } .category-quotes .site-content { padding: var(--jsxscores-archive-quotes-content-padding-mobile); color: var(--jsxscores-archive-quotes-text); } @media screen and (min-width: 600px) { .category-quotes .site-content { padding: var(--jsxscores-archive-quotes-content-padding-desktop); } } .category-quotes .site-content article { background-color: inherit; } .category-quotes .post__content { padding: var(--jsxscores-archive-card-padding-top) var(--jsxscores-archive-card-padding-inline) var(--jsxscores-archive-card-padding-bottom); } .category-quotes .quote-content { position: relative; margin: 0; padding: 0; } .category-quotes .quote-content a { text-decoration: none; color: var(--jsxscores-archive-quotes-text); } .category-quotes .quote-content::before { top: var(--jsxscores-archive-quotes-mark-before-offset-block-start); left: var(--jsxscores-archive-quotes-mark-before-offset-inline-start); height: 40px; content: "“"; } .category-quotes .quote-content::after { right: var(--jsxscores-archive-quotes-mark-after-offset-inline-end); bottom: 0; height: 0.5em; content: "”"; } .category-quotes .quote-content::before, .category-quotes .quote-content::after { position: absolute; font-family: Georgia, "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; font-size: var(--jsxscores-archive-quotes-mark-size); color: inherit; } .category-quotes .quote-reference { display: block; float: right; margin-top: var(--jsxscores-archive-quotes-reference-margin-top); margin-right: 1em; font-size: var(--jsxscores-archive-quotes-reference-font-size); font-style: normal; color: var(--jsxscores-archive-quotes-reference); } .category-quotes .quote-reference:before { content: "―"; } .category-quotes .quote-book { position: relative; display: inline-block; } .category-quotes .quote-book:before { content: ", "; } .category-quotes .quote-book .quote-page { position: absolute; bottom: var(--jsxscores-archive-quotes-tooltip-offset-block-end); left: 50%; z-index: 1; visibility: hidden; width: var(--jsxscores-archive-quotes-tooltip-width); margin-left: calc(var(--jsxscores-archive-quotes-tooltip-width) / -2); padding: var(--jsxscores-archive-quotes-tooltip-padding-block) 0; border-radius: var(--jsxscores-archive-quotes-tooltip-radius); font-size: var(--jsxscores-archive-quotes-tooltip-font-size); text-align: center; color: var(--jsxscores-archive-quotes-tooltip-text); background-color: var(--jsxscores-archive-quotes-tooltip-surface); } .category-quotes .quote-book .quote-page::after { position: absolute; top: 100%; left: 50%; margin-left: calc(var(--jsxscores-archive-quotes-tooltip-arrow-size) * -1); border-width: var(--jsxscores-archive-quotes-tooltip-arrow-size); border-style: solid; border-color: var(--jsxscores-archive-quotes-tooltip-arrow-surface) transparent transparent; content: ""; } .category-quotes .quote-book:hover .quote-page { visibility: visible; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .entry-header { font-family: var(--jsxscores-font-sans); } .cat-links { font-size: var(--jsxscores-type-scale-meta); font-weight: 700; } .cat-links a { text-decoration: none; text-transform: uppercase; color: var(--jsxscores-color-accent); } .cat-links a:visited { color: var(--jsxscores-color-accent); } .entry-title { margin: 0.125em 0 0.25em; font-size: var(--jsxscores-type-scale-page-title); } @media screen and (min-width: 900px) { .entry-title { font-size: var(--jsxscores-type-scale-hero-title); } } .entry-title a { text-decoration: none; color: var(--jsxscores-color-text-base); } .entry-title a:hover { color: var(--jsxscores-color-text-base); } .entry-meta, .entry-footer { font-family: var(--jsxscores-font-sans); font-size: var(--jsxscores-type-scale-meta); } .entry-footer { margin: 1.5em 0; } .entry-meta a, .entry-footer a { font-weight: 700; text-decoration: none; color: var(--jsxscores-color-text-base); } .entry-meta a:focus, .entry-meta a:hover, .entry-footer a:focus, .entry-footer a:hover { color: var(--jsxscores-color-text-base); border-bottom: 2px solid var(--jsxscores-color-accent); } .byline::after { margin: 0 0.5em; content: "|"; } .comments-link::before, .edit-link::before { margin: 0 0.5em; content: "|"; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .extra { display: none; } .no-sidebar .entry-meta { margin-top: 1.5em; } @media screen and (min-width: 900px) { .no-sidebar .post-content__wrap .entry-meta { margin-top: 2.25em; font-size: var(--jsxscores-type-scale-meta-tight); } .no-sidebar .post-content__wrap .entry-meta a { display: block; font-size: 110%; border-bottom: 3px solid var(--jsxscores-color-text-inverse); } .no-sidebar .post-content__wrap .entry-meta a:hover, .no-sidebar .post-content__wrap .entry-meta a:focus { border-bottom-color: var(--jsxscores-color-accent); } .no-sidebar .post-content__wrap .byline, .no-sidebar .post-content__wrap .posted-on, .no-sidebar .post-content__wrap .comments-link, .no-sidebar .post-content__wrap .edit-link { display: block; margin-bottom: 1em; } .no-sidebar .post-content__wrap .byline:before, .no-sidebar .post-content__wrap .byline:after, .no-sidebar .post-content__wrap .posted-on:before, .no-sidebar .post-content__wrap .posted-on:after, .no-sidebar .post-content__wrap .comments-link:before, .no-sidebar .post-content__wrap .comments-link:after, .no-sidebar .post-content__wrap .edit-link:before, .no-sidebar .post-content__wrap .edit-link:after { margin: 0; content: ""; } .no-sidebar .post-content__wrap .extra { display: inline; } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .page-content, .entry-content { margin: 1.5em 0 0; } } @layer jsxscores.components{ .sticky::before { content: ""; display: block; width: 2em; height: 2em; position: absolute; top: 0; right: 0; border-width: 0 2em 2em 0; border-color: #eee #eee white; border-style: solid; box-shadow: -1px 2px 2px rgb(26 26 26 / 10%); z-index: 2; } .carousel-control-next, .carousel-control-prev, .carousel-control-next-icon, .carousel-control-prev-icon { z-index: 2; } /*-------------------------------------------------------------- # Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1em; } @media screen and (min-width: 600px) { .hentry { margin: 0 0 1.5em; } } .full-bleed { width: 100vw; max-height: 1200px; margin-top: 1em; margin-left: -1em; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; overflow: hidden; } @media screen and (min-width: 600px) { .full-bleed { margin-left: -2em; margin-right: -2em; } } @media screen and (min-width: 900px) { .full-bleed { margin-top: 1.5em; margin-right: -2em; } } @media screen and (min-width: 980px) { .full-bleed { margin-right: calc(((-100vw + var(--jsxscores-layout-content-width)) / 2) - 2em); margin-left: calc(((-100vw + var(--jsxscores-layout-content-width)) / 2) - 2em); } } .full-bleed img { display: block; margin: 0 auto; } .page-links { clear: both; margin: 0 0 1.5em; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .comments-area { width: 100%; margin: var(--jsxscores-post-comments-margin-block) 0; padding: var(--jsxscores-post-comments-padding-block) 0; border-top: 1px solid var(--jsxscores-color-border-soft); } .comments-title { margin-bottom: 2em; font-size: var(--jsxscores-type-scale-page-title); font-weight: 900; } .comment-list { padding: 0; margin: 0; list-style-type: none; } .comment-list ol { list-style-type: none; } .comment-body { border-bottom: 1px solid var(--jsxscores-color-border-muted); margin-bottom: 3em; } .comment-meta { position: relative; margin-left: 70px; font-family: var(--jsxscores-font-sans); font-size: var(--jsxscores-type-scale-meta-tight); } .comment-meta a, .comment-form a { text-decoration: none; border: none; } .comment-meta a:hover, .comment-meta afocus, .comment-form a:hover, .comment-form afocus { text-decoration: underline; } .comment .avatar { position: absolute; top: -5px; left: -70px; width: 50px; height: 50px; border-radius: 50px; } .children { margin-left: 1em; padding-left: 0; } @media screen and (min-width: 900px) { .children { margin-left: 2em; } } @media screen and (min-width: 900px) { .no-sidebar .children { margin-left: 2em; } .no-sidebar .children .comment-meta { margin-left: 80px; font-size: var(--jsxscores-type-scale-meta); } .no-sidebar .children .comment .avatar { top: -7px; left: -80px; width: 60px; height: 60px; } .no-sidebar .children .comment-content { margin-left: 80px; } } @media screen and (min-width: 980px) { .no-sidebar .children { margin-left: 3em; } .no-sidebar .comment-meta { margin-left: 90px; } .no-sidebar .comment .avatar { top: -8px; left: -90px; width: 70px; height: 70px; } .no-sidebar .comment-content { margin-left: 90px; } } .comment-metadata { margin-top: 0.2em; padding-bottom: 0.5em; font-size: 0.8em; line-height: 1em; } .comment-metadata a { color: #7d7d7d; } .comment-metadata a:hover, .comment-metadata a:focus { border-color: var(--jsxscores-color-border-muted); } .comment-author { font-size: var(--jsxscores-type-scale-section-heading); line-height: 1.3em; } .says { font-size: var(--jsxscores-type-scale-meta-tight); } .reply { margin-bottom: 1.5em; text-align: right; } .reply a { display: inline-block; padding: var(--jsxscores-post-action-padding-block) var(--jsxscores-post-action-padding-inline); font-family: var(--jsxscores-font-sans); font-size: var(--jsxscores-type-scale-action); color: var(--jsxscores-color-text-base); line-height: 1.3em; text-decoration: none; border: 1px solid var(--jsxscores-color-border-muted); } .reply a:hover, .reply a:focus { color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-color-accent); border-color: var(--jsxscores-color-accent); } .comment-content ol { list-style-type: decimal; } .comment-content a { word-wrap: break-word; } .bypostauthor .avatar { box-sizing: content-box; border: 5px solid gold; margin-top: -5px; margin-left: -5px; } /* Commnet Form */ .comment-reply-title { margin-bottom: var(--jsxscores-post-comments-reply-title-margin-bottom); } .comment-form { font-family: var(--jsxscores-font-sans); line-height: 1.3em; } .comment-form a { font-weight: 500; } .form-submit { text-align: right; } .form-submit input { padding: var(--jsxscores-post-action-padding-block) var(--jsxscores-post-action-padding-inline); font-size: var(--jsxscores-type-scale-action); color: var(--jsxscores-color-text-base); line-height: 1.3em; text-decoration: none; border: 1px solid var(--jsxscores-color-border-muted); } .form-submit input:hover, .form-submit input:focus { color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-color-accent); border-color: var(--jsxscores-color-accent); } .required { color: var(--jsxscores-post-form-required-color); } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ .page-template-page-upload .site { display: flex; flex-direction: column; min-height: 100vh; } .page-template-page-upload .site-header, .page-template-page-upload .site-footer { background-color: #0070e0; } .page-template-page-upload .site-header .site-info, .page-template-page-upload .site-footer .site-info { color: white; } .page-template-page-upload .site-content { padding: 0 0 0; width: 100%; max-width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; box-sizing: border-box; } .jsxbox-office-editor-mode .site-header { display: none; } .jsxbox-office-editor-mode .site-content, .jsxbox-office-editor-mode #content.site-content { padding-top: 0; } .jsxbox-preview-return-mode .site-header { display: none; } .jsxbox-preview-return-mode .top-part, .jsxbox-preview-return-mode .file-browser, .jsxbox-preview-return-mode .file_uploader { visibility: hidden; pointer-events: none; } @media screen and (min-width: 601px) { .page-template-page-upload .site-content { padding-top: 12px; } .jsxbox-office-editor-mode .site-content, .jsxbox-office-editor-mode #content.site-content { padding-top: 0; } .page-template-page-upload .top-part { padding-left: 40px; padding-right: 20px; } .page-template-page-upload .searchbox { margin-left: 8px; } } .page-template-page-upload label { width: 115px; display: inline-block; font-weight: bold; } .page-template-page-upload .result { font-weight: bold; color: #012773; } .page-template-page-upload input[type="file"] { font-size: 1rem; vertical-align: middle; align-items: center; } .page-template-page-upload .top-part { height: auto; min-height: 34px; display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; margin-bottom: 11px; } .page-template-page-upload .jsxbox-title { font-size: 1.4rem; font-weight: 500; } .jsxbox-breadcrumb { display: flex; align-items: center; gap: 6px; min-width: 0; } .jsxbox-breadcrumb-link { color: #7b8794; text-decoration: none; } .jsxbox-breadcrumb-link:hover, .jsxbox-breadcrumb-link:focus { color: #0070e0; text-decoration: underline; } .jsxbox-breadcrumb-current { color: #1f2933; font-weight: 600; min-width: 0; } .jsxbox-breadcrumb-separator { color: #9aa5b1; } .page-template-page-upload .searchbox { border: 1px solid rgb(0 0 0 / 15%); background-color: transparent; border-radius: 10px; height: 34px; display: flex; padding: 4px; white-space: nowrap; } .page-template-page-upload .searchbox span { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .page-template-page-upload .searchbox:focus { border: 1px solid black; } .page-template-page-upload #search-input { border: none; background: transparent; font-size: 0.9rem; display: inline; line-height: 18px; margin-left: 2px; min-width: 0; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; box-shadow: none; } .page-template-page-upload #search-input:focus { outline: none; } .page-template-page-upload #search-input::-webkit-search-decoration, .page-template-page-upload #search-input::-webkit-search-cancel-button, .page-template-page-upload #search-input::-webkit-search-results-button, .page-template-page-upload #search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } @media screen and (max-width: 600px) { .page-template-page-upload .top-part { height: unset; flex-flow: column; align-items: stretch; padding: 0 10px; margin-top: 10px; gap: 12px; } .page-template-page-upload .searchbox { order: -1; } } .jsxbox-top-set { display: flex; align-items: center; gap: 12px; flex-basis: 100%; min-width: 0; } .jsxbox-multi { display: flex; align-items: center; margin-left: auto; flex: 0 1 auto; justify-content: flex-end; gap: 8px; min-width: 0; flex-wrap: nowrap; } .jsxbox-multi.jsxbox-multi--compact { gap: 6px; } .multibutton { display: flex; align-items: center; font-size: 0.9rem; border: 1px solid rgb(0 0 0 / 45%); border-radius: 10px; min-height: 34px; padding: 4px 12px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; gap: 6px; justify-content: center; background: white; color: #1f2933; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .multibutton:hover, .multibutton:focus, .multibutton:focus-visible { background: rgb(15 23 42 / 5%); outline: none; box-shadow: 0 0 0 1px rgb(15 23 42 / 4%); } .multibutton:active { background: rgb(15 23 42 / 9%); } .multibutton .inside-multi-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; } .multibutton .icon-upload { width: 24px; height: 24px; top: unset; display: block; transform: translateX(0.5px); } .multibutton .icon-trashcan { width: 17px; height: 17px; top: unset; display: block; } .multibutton .icon-download { width: 17px; height: 17px; top: unset; display: block; } .multibutton .icon-move { width: 20px; height: 20px; top: unset; display: block; } .multibutton .icon-folder-open { width: 19px; height: 19px; top: unset; display: block; } .multibutton .icon-folder-create { width: 22px; height: 22px; top: unset; display: block; } .multibutton .inside-multi-text { line-height: 24px; margin-right: 1px; white-space: nowrap; text-overflow: ellipsis; } .page-template-page-upload .jsxbox-multi.jsxbox-multi--compact .multibutton { padding: 4px 8px; } .page-template-page-upload .jsxbox-multi.jsxbox-multi--compact .multibutton .inside-multi-text { display: none; } .file-browser { flex: 1 1 auto; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; position: relative; padding-right: 20px; padding-left: 40px; width: 100%; box-sizing: border-box; } .file_uploader { width: 100%; box-sizing: border-box; } .jsx-table { display: flex; flex-direction: column; } .jsx-table button { border: none; padding: 0; } .jsx-table-body, .jsx-table-head { display: flex; flex-direction: column; font-size: 0.9rem; } .jsx-table-head { flex-basis: 40px; position: sticky; top: -1px; z-index: 1; height: 100%; align-items: center; color: #637282; } .jsx-table-head-cell { display: flex; flex-flow: row; align-items: center; font-size: 0.75rem; font-weight: 400; } .jsx-table-head-cell.column-checkbox { background-color: white; cursor: pointer; } #thead-checkbox { pointer-events: none; } .tablesorter-header-inner { display: flex; } .jsx-table-body .column-name { display: flex; align-items: center; text-align: left; white-space: nowrap; min-width: 0; } .jsx-table-body .column-name .span-filesvg { display: flex; flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: 2px; } .jsx-table-body .column-name .span-filesvg svg { display: block; flex: 0 0 auto; } .jsx-table-body .column-name .icon-folder-open { width: 40px; height: 40px; top: unset; display: block; color: inherit; } .jsxbox-folder-icon { --jsxbox-folder-tab: #f7e29b; --jsxbox-folder-shadow: #e6bd57; --jsxbox-folder-front: #f4cf69; --jsxbox-folder-highlight: rgba(255, 255, 255, 0.42); } .jsx-table-body .column-name .span-filename { display: block; flex: 1 1 auto; min-width: 0; white-space: nowrap; text-overflow: clip; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .folder-link { display: inline-block; max-width: 100%; color: #1f2933; text-decoration: none; cursor: pointer; } .folder-link:hover, .folder-link:focus { color: #1f2933; text-decoration: none; } .folder-name-input { flex: 1 1 auto; min-width: 0; border: 1px solid rgb(0 112 224 / 35%); border-radius: 8px; padding: 6px 10px; font-size: 0.95rem; line-height: 1.3; background: white; } .folder-name-input:focus { outline: none; border-color: #0070e0; box-shadow: 0 0 0 3px rgb(0 112 224 / 15%); } .jsx-table-cell.column-mobile-actions { display: flex; position: relative; overflow: visible; flex: 0 0 44px; justify-content: flex-end; align-items: center; } .mobile-actions-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; padding: 0; color: #637282; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; outline: none; box-shadow: none; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } .mobile-actions-toggle:hover, .mobile-actions-toggle:focus, .mobile-actions-toggle:focus-visible, .mobile-actions-toggle:active { background: rgb(15 23 42 / 5%); outline: none; box-shadow: none; } .mobile-actions-toggle:active { background: rgb(15 23 42 / 9%); } .mobile-actions-dots { display: flex; gap: 3px; align-items: center; justify-content: center; } .mobile-actions-dots span { display: block; width: 4px; height: 4px; border-radius: 999px; background: currentColor; } .mobile-actions-popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 120px; padding: 6px 0; display: flex; flex-direction: column; gap: 0; background: white; border: 1px solid rgb(0 0 0 / 12%); border-radius: 12px; box-shadow: 0 12px 24px rgb(15 23 42 / 12%); } .mobile-actions-popover.mobile-actions-popover--above { top: auto; bottom: calc(100% + 6px); } .mobile-actions-popover[hidden] { display: none !important; } .mobile-actions-popover form { margin: 0; width: 100%; } .mobile-actions-popover .mobile-actions-item { display: flex; width: 100%; align-items: center; justify-content: flex-start; gap: 10px; padding: 11px 14px !important; border: none; border-radius: 0; background: transparent; font-size: 14px; text-align: left; line-height: 1.3; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mobile-actions-item--delete { color: #b42318; } .mobile-actions-item-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; line-height: 0; } .mobile-actions-item-icon .icon-download, .mobile-actions-item-icon .icon-trashcan { width: 16px; height: 16px; top: unset; display: block; } .mobile-actions-item-icon .icon-move { width: 20px; height: 20px; top: unset; display: block; } .mobile-actions-item-icon .icon-rename { width: 20px; height: 20px; top: unset; display: block; } .mobile-actions-item-label { display: block; } .mobile-actions-item:focus { background: transparent; } .mobile-actions-item:focus-visible { background: rgb(0 112 224 / 8%); } @media (hover: hover) { .mobile-actions-item:hover { background: rgb(0 112 224 / 8%); } } body.jsxbox-move-open { overflow: hidden; } .jsxbox-move-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .jsxbox-move-overlay[hidden] { display: none !important; } .jsxbox-move-overlay-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / 34%); } .jsxbox-move-sheet { position: relative; z-index: 1; width: min(520px, calc(100vw - 24px)); max-height: min(78vh, 760px); display: flex; flex-direction: column; background: white; border-radius: 20px; box-shadow: 0 24px 60px rgb(15 23 42 / 20%); overflow: hidden; } .jsxbox-move-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid rgb(15 23 42 / 8%); } .jsxbox-move-heading { flex: 1 1 auto; min-width: 0; } .jsxbox-move-title { font-size: 1rem; font-weight: 600; line-height: 1.2; color: #111827; } .jsxbox-move-path, .jsxbox-move-items-label, .jsxbox-move-browser-label, .jsxbox-move-selected-label { font-size: 0.75rem; color: #637282; } .jsxbox-move-path { margin-top: 4px; } .jsxbox-move-nav-button { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 10px; background: transparent; color: #1f2933; cursor: pointer; } .jsxbox-move-nav-button:hover, .jsxbox-move-nav-button:focus, .jsxbox-move-nav-button:focus-visible { background: rgb(15 23 42 / 5%); outline: none; } .jsxbox-move-nav-button[disabled] { opacity: 0.35; cursor: default; } .jsxbox-move-nav-icon .icon-arrow-left, .jsxbox-move-nav-icon .icon-close { width: 18px; height: 18px; top: unset; display: block; } .jsxbox-move-items { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 0; } .jsxbox-move-items-value, .jsxbox-move-selected-value { font-size: 0.9rem; line-height: 1.35; color: #1f2933; word-break: break-word; } .jsxbox-move-browser { flex: 1 1 auto; min-height: 0; padding: 16px 18px; overflow-y: auto; } .jsxbox-move-folder-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .jsxbox-move-folder-empty { padding: 16px 0; font-size: 0.75rem; font-weight: 400; line-height: 1.2; color: #637282; } .jsxbox-move-folder-button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgb(15 23 42 / 8%); border-radius: 14px; background: white; text-align: left; cursor: pointer; } .jsxbox-move-folder-button:hover, .jsxbox-move-folder-button:focus, .jsxbox-move-folder-button:focus-visible { background: rgb(15 23 42 / 4%); outline: none; } .jsxbox-move-folder-icon { flex: 0 0 28px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .jsxbox-move-folder-icon .icon-folder-open { width: 28px; height: 28px; top: unset; display: block; } .jsxbox-move-folder-name { flex: 1 1 auto; min-width: 0; font-size: 0.95rem; color: #1f2933; } .jsxbox-move-folder-arrow { flex: 0 0 18px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: #637282; } .jsxbox-move-folder-arrow .icon-move { width: 16px; height: 16px; top: unset; display: block; } .jsxbox-move-footer { padding: 16px 18px 18px; border-top: 1px solid rgb(15 23 42 / 8%); display: flex; flex-direction: column; gap: 12px; } .jsxbox-move-footer-actions { display: flex; justify-content: flex-end; gap: 10px; } .jsxbox-move-submit-button[disabled] { opacity: 0.45; cursor: default; } /* Final move overlay overrides */ .jsxbox-move-header { display: block; padding: 18px 18px 14px; border-bottom: none; position: relative; } .jsxbox-move-items { padding: 14px 18px; border-bottom: none; position: relative; } .jsxbox-move-header::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: rgb(15 23 42 / 8%); } .jsxbox-move-browser { padding: 14px 18px 0; } .jsxbox-move-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 0.75rem; } .jsxbox-move-breadcrumb-link { border: none; background: none; padding: 0; cursor: pointer; } .jsxbox-move-folder-list { gap: 0; margin-top: 0; } .jsxbox-move-folder-button { padding: 0 10px 0 0; border: none; border-radius: 0; background: white; } .jsxbox-move-folder-button .column-name { padding-left: 0; flex: 1 1 auto; min-width: 0; } .jsxbox-move-folder-button .column-name .span-filesvg { margin-right: 2px; } .jsxbox-move-folder-disclosure { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; color: #637282; } .jsxbox-move-folder-disclosure .icon-disclosure { width: 18px; height: 18px; top: unset; display: block; } .jsxbox-move-footer { padding: 14px 18px 18px; border-top: none; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } .jsxbox-move-create-link { border: none; background: none; padding: 0; font-size: 0.9rem; color: #1f2933; text-decoration: underline; cursor: pointer; } .jsxbox-move-footer-actions { margin-left: auto; } /* Move overlay UX refinements */ .jsxbox-move-breadcrumb, .jsxbox-move-breadcrumb .jsxbox-breadcrumb-link, .jsxbox-move-breadcrumb .jsxbox-breadcrumb-current, .jsxbox-move-breadcrumb .jsxbox-breadcrumb-separator { font-size: 0.75rem; line-height: 1.35; } .jsxbox-move-breadcrumb-link { color: #637282; } .jsxbox-move-browser { height: 40vh; min-height: 0; max-height: calc(78vh - 220px); box-sizing: border-box; overflow-y: auto; } .jsxbox-move-folder-button { padding: 0 10px 0 0; border: none; border-radius: 0; background: white; } .jsxbox-move-folder-button .column-name .span-filesvg { display: flex; flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: 2px; } .jsxbox-move-folder-button .column-name .span-filesvg svg { display: block; flex: 0 0 auto; } .jsxbox-move-folder-button .column-name .icon-folder-open { width: 40px; height: 40px; top: unset; display: block; } .jsxbox-move-folder-button .column-name .span-filename { display: block; flex: 1 1 auto; min-width: 0; font-size: 0.75rem; font-weight: 400; line-height: 1.2; } .jsxbox-move-footer { border-top: none; position: relative; } .jsxbox-move-create-link { padding: 0 0 2px; font-size: 11px; line-height: 1.2; color: rgb(127, 119, 111); text-decoration: none; border-bottom: 2.5px solid rgb(127, 119, 111); } .jsxbox-move-cancel-button, .jsxbox-move-submit-button { background: rgb(15 23 42 / 4%); border-color: rgb(15 23 42 / 14%); } .jsxbox-move-footer-actions .multibutton .inside-multi-text { display: block !important; line-height: 1.2; } .jsxbox-move-cancel-button:hover, .jsxbox-move-cancel-button:focus, .jsxbox-move-cancel-button:focus-visible, .jsxbox-move-submit-button:hover, .jsxbox-move-submit-button:focus, .jsxbox-move-submit-button:focus-visible { background: rgb(15 23 42 / 8%); } .jsxbox-move-items-value { display: flex; flex-direction: column; gap: 6px; max-height: 112px; overflow-y: auto; padding-right: 4px; } .jsxbox-move-item-row { display: flex; align-items: center; min-width: 0; } .jsxbox-move-item-row .column-name { padding-left: 0; flex: 1 1 auto; min-width: 0; border-bottom: 1px solid #e6e8eb; } .jsxbox-move-item-row .span-filesvg { display: flex; flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; align-items: center; justify-content: center; margin-right: 2px; } .jsxbox-move-item-row .span-filesvg svg { display: block; flex: 0 0 auto; } .jsxbox-move-item-row .icon-folder-open { width: 40px; height: 40px; top: unset; display: block; } .jsxbox-move-item-row .span-filename { display: block; flex: 1 1 auto; min-width: 0; font-size: 0.75rem; font-weight: 400; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jsxbox-move-items-label { font-size: 11px; } .jsxbox-move-footer::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: rgb(15 23 42 / 8%); } .jsx-table-row { background-color: white; border-bottom: 1px solid #e6e8eb; width: 100%; display: flex; flex: 1 0 auto; align-items: center; box-sizing: border-box; } .jsx-table-row input { margin: auto; } .jsx-table-body .jsx-table-row { flex: 1 0 56px; } .jsx-table-body .jsx-table-row:hover { background-color: #f2f2f2; } .jsx-table-body .jsx-table-row:hover .column-checkbox .tbody-checkbox { visibility: visible; } .jsx-table-body .jsx-table-row .column-checkbox .tbody-checkbox { visibility: hidden; } .jsx-table-row.selected { border-left: 2px solid #fdd571; background-color: #fff8e6; } .jsx-table-row.selected:hover { background-color: #fff8e6; } .jsx-table-row.selected .column-checkbox { margin-left: -42px; } .jsx-table-row.selected .column-checkbox .tbody-checkbox { visibility: visible; } .jsx-table-cell { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .column-checkbox { flex: 0 0 40px; } .column-name { flex: 1 1 50%; } .column-mdate { flex: 0 0 20%; } .column-size { flex: 0 0 10%; } .column-download, .column-delete { display: none; } .column-checkbox { display: flex; justify-content: center; margin-left: -40px; width: 40px; height: 39px; border-bottom: 1px solid white; } .tablesorter-header { cursor: pointer; } .tablesorter-header.sorter-false { background-image: none; cursor: default; } .sort-arrow { margin-left: 3px; } .file_uploader { display: none; } .fade-out { animation: fade 0.5s; } .fade-out td { animation: fade2 0.5s; } .fade-out td svg { animation: fade2 0.5s; } /* Animate opacity */ @keyframes fade { from { opacity: 1; } to { opacity: 0; flex-basis: 0; } } @keyframes fade2 { from { opacity: 1; } to { opacity: 0; font-size: 0; line-height: 0; height: 0; } } #bulk-move-button, #bulk-delete-button, #bulk-download-button { animation: fade3 1s; } @keyframes fade3 { 0% { opacity: 0; border-color: rgb(0 0 0 / 45%); } 20% { border-color: #0070e0; color: #0070e0; } 50% { border-color: #0070e0; color: #0070e0; } 100% { opacity: 1; } } @media screen and (max-width: 900px) { .file-browser { height: auto; } } @media screen and (max-width: 1100px) and (min-width: 601px) { .column-name { flex: 1 1 auto; min-width: 0; } .column-mdate, .column-size { display: none; } } @media screen and (max-width: 600px) { .jsxbox-top-set { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .file-browser { padding-right: 8px; padding-left: 8px; height: auto; overflow-x: hidden; } .column-checkbox { flex: 0 0 40px; } .column-name { flex: 1 1 auto; min-width: 0; } .column-mdate { flex: 0 0 0%; } .column-size { flex: 0 0 0%; } .jsx-table-row.selected .column-checkbox { margin-left: -2px; } .column-checkbox { margin-left: 0; border-bottom: unset; } .column-mdate, .column-size { display: none; } .multibutton { min-width: 36px; min-height: 36px; padding: 0 8px; } .multibutton .inside-multi-text { display: none; } .jsxbox-multi { flex-flow: row nowrap; justify-content: flex-end; flex-basis: auto; margin-left: auto; } .mobile-actions-popover { right: 0; top: calc(100% + 6px); transform: none; } .mobile-actions-popover.mobile-actions-popover--above { top: auto; bottom: calc(100% + 6px); } } /* Final move overlay safety overrides */ .jsxbox-move-footer-actions .multibutton { color: #1f2933; font-size: 13px; border: none; box-shadow: none; } .jsxbox-move-footer-actions .multibutton .inside-multi-text { display: block !important; color: inherit; white-space: nowrap; font-size: 13px; } .jsxbox-move-item-row .column-name, .jsxbox-move-folder-button .column-name { display: flex; align-items: center; text-align: left; white-space: nowrap; min-width: 0; } .jsxbox-move-create-link { border-bottom-width: 0.666667px; } } @layer jsxscores.components{ .jsxbox-preview-trigger { border: none; padding: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; cursor: pointer; text-align: left; } .jsxbox-preview-trigger:hover { color: inherit; text-decoration: none; cursor: pointer; } .jsxbox-preview-trigger:focus-visible { outline: 2px solid #0061ff; outline-offset: 2px; border-radius: 4px; } body.jsxbox-preview-open { overflow: hidden; } .jsxbox-preview-overlay { position: fixed; inset: 0; z-index: 2000; } .jsxbox-preview-backdrop { position: absolute; inset: 0; background: rgb(15 23 42 / 72%); backdrop-filter: blur(6px); } .jsxbox-preview-shell { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; height: calc(var(--jsxscores-vh) * 100); margin: 0; border-radius: 0; overflow: hidden; background: #eef3f8; box-shadow: 0 36px 96px rgb(15 23 42 / 35%); } .jsxbox-preview-shell:focus { outline: none; } .jsxbox-preview-titlebar { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%); } .jsxbox-preview-titlegroup { flex: 1 1 auto; min-width: 0; } .jsxbox-preview-title { font-size: 1rem; font-weight: 600; color: #102a43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jsxbox-preview-type { font-size: 0.78rem; color: #52606d; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .jsxbox-preview-titlebar-actions, .jsxbox-preview-toolbar-group { display: flex; align-items: center; gap: 8px; } .jsxbox-preview-search-nav { display: flex; align-items: center; gap: 0; } .jsxbox-preview-titlebar-actions { margin-left: auto; flex: 0 0 auto; } .jsxbox-preview-toolbar-group[hidden] { display: none !important; } .jsxbox-preview-toolbutton[hidden], .jsxbox-preview-edit[hidden], .jsxbox-preview-save[hidden], .jsxbox-preview-save-as[hidden], .jsxbox-preview-search-clear[hidden], .jsxbox-preview-search-count[hidden] { display: none !important; } .jsxbox-preview-edit, .jsxbox-preview-save, .jsxbox-preview-save-as, .jsxbox-preview-download, .jsxbox-preview-toolbutton, .jsxbox-preview-close { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 12px; border: 1px solid rgb(15 23 42 / 12%); border-radius: 10px; background: #fff; color: #102a43; font-size: 0.85rem; text-decoration: none; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .jsxbox-preview-edit { flex: 0 0 auto; white-space: nowrap; } .jsxbox-preview-save, .jsxbox-preview-save-as, .jsxbox-preview-download { gap: 6px; flex: 0 0 auto; white-space: nowrap; } .jsxbox-preview-save-icon, .jsxbox-preview-save-label, .jsxbox-preview-save-as-icon, .jsxbox-preview-save-as-label, .jsxbox-preview-download-icon, .jsxbox-preview-download-label { display: inline-flex; align-items: center; } .jsxbox-preview-save-icon img, .jsxbox-preview-save-as-icon img { width: 17px; height: 17px; display: block; } .jsxbox-preview-download-icon svg { width: 15px; height: 15px; } .jsxbox-preview-toolbutton--icon-only { width: 34px; min-width: 34px; padding: 0; line-height: 0; } .jsxbox-preview-toolbutton--icon-only svg { width: 18px; height: 18px; display: block; margin: auto; align-self: center; } .jsxbox-preview-toolbutton--page-prev, .jsxbox-preview-toolbutton--page-next, .jsxbox-preview-toolbutton--zoom-out, .jsxbox-preview-toolbutton--zoom-in { border: none; background: transparent; box-shadow: none; } .jsxbox-preview-toolbutton--page-prev svg, .jsxbox-preview-toolbutton--page-next svg, .jsxbox-preview-toolbutton--search-prev svg, .jsxbox-preview-toolbutton--search-next svg { width: 18px; height: 18px; display: block; margin: auto; } .jsxbox-preview-toolbutton--page-prev img, .jsxbox-preview-toolbutton--page-next img, .jsxbox-preview-toolbutton--search-prev img, .jsxbox-preview-toolbutton--search-next img { width: 18px; height: 18px; display: block; margin: auto; } .jsxbox-preview-close { flex: 0 0 auto; width: auto; min-width: 24px; padding: 0; border: none; background: transparent; box-shadow: none; } .jsxbox-preview-close svg { width: 24px; height: 24px; } .jsxbox-preview-edit:hover, .jsxbox-preview-edit:focus, .jsxbox-preview-edit:focus-visible, .jsxbox-preview-save:hover, .jsxbox-preview-save:focus, .jsxbox-preview-save:focus-visible, .jsxbox-preview-save-as:hover, .jsxbox-preview-save-as:focus, .jsxbox-preview-save-as:focus-visible, .jsxbox-preview-download:hover, .jsxbox-preview-download:focus, .jsxbox-preview-download:focus-visible, .jsxbox-preview-toolbutton:not(:disabled):hover, .jsxbox-preview-toolbutton:not(:disabled):focus, .jsxbox-preview-toolbutton:not(:disabled):focus-visible { background: rgb(15 23 42 / 5%); outline: none; box-shadow: 0 0 0 1px rgb(15 23 42 / 4%); } .jsxbox-preview-edit:active, .jsxbox-preview-save:active, .jsxbox-preview-save-as:active, .jsxbox-preview-download:active, .jsxbox-preview-toolbutton:not(:disabled):active { background: rgb(15 23 42 / 9%); } .jsxbox-preview-save:disabled, .jsxbox-preview-save-as:disabled { background: rgb(255 255 255 / 72%); border-color: rgb(15 23 42 / 8%); color: rgb(82 96 109 / 62%); box-shadow: none; cursor: default; } .jsxbox-preview-save:disabled img, .jsxbox-preview-save-as:disabled img { opacity: 0.46; } .jsxbox-preview-toolbutton:disabled { background: transparent; border-color: transparent; color: rgb(82 96 109 / 62%); box-shadow: none; cursor: default; } .jsxbox-preview-toolbutton:disabled svg, .jsxbox-preview-toolbutton:disabled img { opacity: 0.46; } .jsxbox-preview-close:hover { background-color: rgb(15 23 42 / 5%); color: #0f172a; box-shadow: 0 0 0 1px rgb(15 23 42 / 4%); border-radius: 10px; } .jsxbox-preview-close:focus-visible { outline: 2px solid rgb(15 23 42 / 18%); outline-offset: 2px; } .jsxbox-preview-close:active { background: rgb(15 23 42 / 9%); } .jsxbox-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; background: #f6f9fc; border-bottom: 1px solid rgb(15 23 42 / 8%); } .jsxbox-preview-toolbar[hidden] { display: none !important; } .jsxbox-preview-page-input, .jsxbox-preview-search-input { min-height: 34px; border: 1px solid rgb(15 23 42 / 14%); border-radius: 10px; background: #fff; color: #102a43; font-family: inherit; font-weight: inherit; font-size: 0.9rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; } .jsxbox-preview-search-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; } .jsxbox-preview-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: #000; font-size: 20px; line-height: 1; pointer-events: none; } .jsxbox-preview-search-icon svg { width: 20px; height: 20px; display: block; } .jsxbox-preview-page-input { width: auto; height: 34px; min-width: 0; padding: 0 10px 1px; line-height: 1; text-align: center; overflow: hidden; position: relative; top: -1px; } .jsxbox-preview-page-input::-webkit-outer-spin-button, .jsxbox-preview-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jsxbox-preview-search-input { width: 220px; height: 34px; padding: 0 34px 0 34px; font-size: 0.9rem; line-height: 34px; } .jsxbox-preview-search-input::-moz-placeholder { font-size: 0.9rem; } .jsxbox-preview-search-input::placeholder { font-size: 0.9rem; } .jsxbox-preview-page-input:focus, .jsxbox-preview-search-input:focus { outline: none; border-color: #0070e0; box-shadow: 0 0 0 3px rgb(0 112 224 / 15%); } .jsxbox-preview-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(calc(-50% - 1px)); width: 22px; height: 22px; border: none; border-radius: 999px; padding: 0; background: transparent; color: #52606d; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 16px; line-height: 1; } .jsxbox-preview-search-clear svg { width: 16px; height: 16px; display: block; } .jsxbox-preview-search-input-wrap.has-search .jsxbox-preview-search-clear { display: inline-flex; } .jsxbox-preview-search-clear:hover, .jsxbox-preview-search-clear:focus-visible { background: rgb(15 23 42 / 5%); outline: none; } .jsxbox-preview-page-count, .jsxbox-preview-search-count, .jsxbox-preview-zoom-label { display: inline-flex; align-items: center; min-height: 34px; font-size: 0.9rem; line-height: 1; color: #52606d; position: relative; top: -1px; } .jsxbox-preview-search-count { flex: 0 0 auto; white-space: nowrap; } .jsxbox-preview-search-count--empty { font-size: 0.9rem; top: 0; } .jsxbox-preview-toolbutton--search-prev, .jsxbox-preview-toolbutton--search-next { border: none; background: transparent; box-shadow: none; font-size: 18px; font-weight: 600; line-height: 1; padding: 0; min-width: 30px; } .jsxbox-preview-toolbutton--image-transform { width: 34px; min-width: 34px; padding: 0; } .jsxbox-preview-toolbutton--image-transform img { width: 18px; height: 18px; display: block; } .jsxbox-preview-renderer { flex: 1 1 auto; min-height: 0; position: relative; background: linear-gradient(180deg, #dfe8f1 0%, #edf3f9 100%); } .jsxbox-preview-state { display: flex; align-items: center; justify-content: center; height: 100%; padding: 32px; color: #243b53; font-size: 0.95rem; text-align: center; } .jsxbox-preview-pdf-container { position: absolute; inset: 0; overflow: auto; padding: 24px 0; box-sizing: border-box; } .jsxbox-preview-office-container, .jsxbox-preview-office-host { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; } @supports (padding: env(safe-area-inset-top)) { .jsxbox-preview-titlebar { padding-top: calc(16px + env(safe-area-inset-top)); padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); } } .jsxbox-preview-text-container { position: absolute; inset: 0; overflow: auto; padding: 24px; box-sizing: border-box; background: #fff; } .jsxbox-preview-text { margin: 0; font: 400 0.95rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #102a43; white-space: pre-wrap; word-break: break-word; } .jsxbox-office-editor-page { display: flex; flex-direction: column; min-height: calc(var(--jsxscores-vh) * 100); background: #eef3f8; } .jsxbox-office-editor-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%); } .jsxbox-office-editor-heading { min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .jsxbox-office-editor-back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: auto; min-width: 24px; padding: 0; border: none; background: transparent; box-shadow: none; color: #52606d; text-decoration: none; font-size: 0.82rem; line-height: 1; margin-bottom: 0; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .jsxbox-office-editor-back-icon { display: inline-flex; align-items: center; justify-content: center; } .jsxbox-office-editor-back svg { width: 24px; height: 24px; } .jsxbox-office-editor-back:hover, .jsxbox-office-editor-back:focus { background-color: rgb(15 23 42 / 5%); color: #0f172a; box-shadow: 0 0 0 1px rgb(15 23 42 / 4%); border-radius: 10px; text-decoration: none; } .jsxbox-office-editor-back:focus-visible { outline: 2px solid rgb(15 23 42 / 18%); outline-offset: 2px; } .jsxbox-office-editor-back:active { background: rgb(15 23 42 / 9%); } .jsxbox-office-editor-title { margin: 0; font-size: 0.98rem; font-weight: 600; color: #102a43; line-height: 1.15; } .jsxbox-office-editor-meta { margin: 0; font-size: 0.72rem; color: #52606d; text-transform: uppercase; letter-spacing: 0.04em; } .jsxbox-office-editor-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .jsxbox-office-editor-status { display: inline-flex; align-items: center; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #52606d; font-size: 0.8rem; letter-spacing: 0.02em; text-transform: uppercase; } .jsxbox-office-editor-status.is-error { color: #b42318; border-color: transparent; background: transparent; } .jsxbox-office-editor-status[title] { cursor: help; } .jsxbox-office-editor-body { position: relative; flex: 1 1 auto; min-height: 0; } .jsxbox-office-editor-host { position: absolute; inset: 0; } .jsxbox-office-editor-error { display: flex; align-items: center; justify-content: center; height: 100%; padding: 32px; color: #243b53; text-align: center; } .jsxbox-preview-pdf-container .pdfViewer .page { margin: 0 auto 18px; box-shadow: 0 12px 30px rgb(15 23 42 / 18%); border-radius: 8px; overflow: hidden; } .jsxbox-preview-pdf-container .annotationLayer .popupTriggerArea, .jsxbox-preview-pdf-container .annotationLayer .popupWrapper, .jsxbox-preview-pdf-container .annotationLayer .popup { display: none !important; pointer-events: none !important; } .jsxbox-preview-pdf-container .annotationLayer .highlightAnnotation, .jsxbox-preview-pdf-container .annotationLayer .underlineAnnotation, .jsxbox-preview-pdf-container .annotationLayer .squigglyAnnotation, .jsxbox-preview-pdf-container .annotationLayer .strikeoutAnnotation { cursor: default !important; } .jsxbox-preview-image-stage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 24px; box-sizing: border-box; overflow: auto; } .jsxbox-preview-image { max-width: none; max-height: none; transform-origin: center center; box-shadow: 0 18px 40px rgb(15 23 42 / 22%); border-radius: 14px; background: #fff; } @media screen and (max-width: 860px) { .jsxbox-preview-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pages search" "zoom zoom"; align-items: stretch; } .jsxbox-preview-toolbar-group--image-tools { grid-column: 1 / -1; } .jsxbox-preview-toolbar-group--pages { grid-area: pages; } .jsxbox-preview-toolbar-group--search { grid-area: search; min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; justify-self: stretch; justify-content: stretch; gap: 4px; } .jsxbox-preview-toolbar-group--zoom { grid-area: zoom; width: 100%; justify-content: flex-start; } .jsxbox-preview-search-input-wrap { width: min(220px, 100%); min-width: 0; justify-self: end; } .jsxbox-preview-search-input { width: 100%; min-width: 0; } .jsxbox-preview-search-count { min-width: -moz-max-content; min-width: max-content; } .jsxbox-preview-page-input { padding: 0 6px; } .jsxbox-preview-save, .jsxbox-preview-save-as, .jsxbox-preview-download { width: 38px; min-width: 38px; padding: 0; } .jsxbox-preview-save-label, .jsxbox-preview-save-as-label, .jsxbox-preview-download-label { display: none; } } } @layer jsxscores.components{ .page-template-page-wedding { /* * Animation module with all animation code */ } @media (prefers-color-scheme: dark) { .page-template-page-wedding { background-color: #2c2a28; color: #f8f8f2; } } .page-template-page-wedding .site { min-width: 320px; text-align: center; min-height: 100px; } .page-template-page-wedding p, .page-template-page-wedding h2 { margin-top: 0; margin-bottom: 0; } .page-template-page-wedding h2 { color: #c38b52; font-size: 1.5em; font-family: "Nanum Myeongjo", serif; font-weight: lighter; letter-spacing: 0.18em; line-height: 1.3; margin-bottom: 9%; margin-top: 9%; } @media (prefers-color-scheme: dark) { .page-template-page-wedding h2 { color: #d1aa62; } } .page-template-page-wedding h2 .en_subtitle { font-size: 0.5em; letter-spacing: 0.6em; } .page-template-page-wedding h2 #directions_subtitle { letter-spacing: 0.5em; } .page-template-page-wedding #photo-header { padding: 0 0; background-color: pink; } .page-template-page-wedding .header-image { max-height: unset; max-width: 828px; margin: 0 auto; } .page-template-page-wedding .site-content { padding: 0 0; max-width: 828px; } .page-template-page-wedding .pages { padding: 5% 5%; margin: 0 auto; } .page-template-page-wedding #start { font-family: "Stylish", "Nanum Pen Script", sans-serif; font-size: 1.1em; padding-top: 2.5%; word-break: keep-all; } .page-template-page-wedding #start #start_name { font-size: 1.2em; letter-spacing: 0.5vw; } .page-template-page-wedding #start #and { letter-spacing: normal; font-size: 0.8em; vertical-align: bottom; } .page-template-page-wedding #start #start_day { font-size: 1em; } .page-template-page-wedding #greeting p { padding: 0 13%; font-family: "Nanum Myeongjo", serif; line-height: 1.8; word-break: keep-all; } .page-template-page-wedding #family p { padding: 0 13%; font-family: "Nanum Myeongjo", serif; line-height: 1.5; font-size: 1.1em; font-weight: 700; word-break: keep-all; } .page-template-page-wedding #family p span { font-size: 0.8em; font-weight: normal; word-spacing: 0.7em; } .page-template-page-wedding #gallery .gallery_wrap { margin: 0 -5%; } .page-template-page-wedding #gallery .gallery_grid { overflow: hidden; } .page-template-page-wedding #gallery a { line-height: 0; } .page-template-page-wedding #gallery a.last { position: relative; } .page-template-page-wedding #gallery a .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; color: #FFF; background: rgba(0, 0, 0, 0.5); } .page-template-page-wedding #gallery a .content { top: 50%; left: 0%; font-size: 130%; font-family: "Nanum Myeongjo", serif; transform: translate(-50%, -50%); position: relative; } .page-template-page-wedding #gallery figure { display: flex; float: left; width: 50%; padding: 4px; } .page-template-page-wedding #gallery figure.hidden { display: none; } .page-template-page-wedding #location #map_wrap { height: 250px; margin: 0 -5.55% 0; color: black; } .page-template-page-wedding #location a { color: inherit; text-decoration: none; } .page-template-page-wedding #location ul { list-style: none; padding: 0; font-size: 0.95em; } .page-template-page-wedding #location ul.address, .page-template-page-wedding #location ul.transportation { font-family: "Nanum Myeongjo", serif; } .page-template-page-wedding #location ul.address h3, .page-template-page-wedding #location ul.transportation h3 { font-size: 1.1em; } .page-template-page-wedding #location .navi { padding: 0; margin: 0 -5.55% 0; overflow: hidden; font-family: "NanumBarunGothic", sans-serif; font-weight: bold; } .page-template-page-wedding #location .navi li { height: 45px; margin: 0; float: left; width: 50%; display: flex; justify-content: center; align-items: center; } .page-template-page-wedding #location .navi li:first-of-type { background-color: #1EC800; color: white; } .page-template-page-wedding #location .navi li:nth-of-type(2) { background-color: #FAE100; color: #1E1E1E; } @media (prefers-color-scheme: dark) { .page-template-page-wedding #location .navi li:first-of-type { background-color: #00b800; } .page-template-page-wedding #location .navi li:nth-of-type(2) { background-color: #f9ce00; } } .page-template-page-wedding #location .navi li a { color: inherit; display: flex; justify-content: center; align-items: center; } .page-template-page-wedding #location .navi li a p { margin-top: 1px; padding-left: 9px; } .page-template-page-wedding #location .navi .logo { display: block; height: 36px; } .page-template-page-wedding #location .address { font-family: "Nanum Myeongjo", serif; margin-top: 1.5em; } .page-template-page-wedding #location .address h3 { font-family: inherit; } .page-template-page-wedding #location .address hr { margin-top: 1.5em; } .page-template-page-wedding #location .transportation { word-break: keep-all; text-align: left; margin-bottom: 0.6em; } .page-template-page-wedding #location .transportation .trans_title { font-weight: bold; } .page-template-page-wedding #location .transportation .bus, .page-template-page-wedding #location .transportation .metro { padding-bottom: 0.8em; margin-left: 0.5em; } .page-template-page-wedding #location .transportation .bus .ul, .page-template-page-wedding #location .transportation .metro .ul { margin-left: 0; } .page-template-page-wedding #location .transportation .bus .bus_number, .page-template-page-wedding #location .transportation .metro .bus_number { margin-left: 0.5em; } .page-template-page-wedding #location .transportation .rentbus { margin-right: -0.95em; } .page-template-page-wedding #location .transportation .red { color: #e60012; } .page-template-page-wedding #location .transportation .blue { color: #0068b7; } .page-template-page-wedding #location .transportation .green { color: #53b332; } .page-template-page-wedding #location .transportation .gyeongi { color: #009e96; } @media (prefers-color-scheme: dark) { .page-template-page-wedding #location .transportation .red { color: #f81b19; } .page-template-page-wedding #location .transportation .blue { color: #168adb; } .page-template-page-wedding #location .transportation .green { color: #6cbf54; } .page-template-page-wedding #location .transportation .gyeongi { color: #40afa9; } } .page-template-page-wedding .anim-text-flow { /* * Animation variables */ /* * Elements settings */ /* * Keyframe loop */ /* * Element animation delay loop */ } .page-template-page-wedding .anim-text-flow span { animation-name: anim-text-flow-keys; animation-duration: 50s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; } @keyframes anim-text-flow-keys { 0% { color: #5cd6b6; } 5% { color: #d6ca5c; } 10% { color: #5c5ed6; } 15% { color: #d67c5c; } 20% { color: #c05cd6; } 25% { color: #d65cd0; } 30% { color: #76d65c; } 35% { color: #d65c72; } 40% { color: #d65cd2; } 45% { color: #5cb8d6; } 50% { color: #97d65c; } 55% { color: #5c7cd6; } 60% { color: #5cd68d; } 65% { color: #8f5cd6; } 70% { color: #d6745c; } 75% { color: #745cd6; } 80% { color: #d65cd6; } 85% { color: #5cd68f; } 90% { color: #d65c72; } 95% { color: #d6835c; } 100% { color: #d65cab; } } .page-template-page-wedding .anim-text-flow span:nth-of-type(1) { animation-delay: -19.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(2) { animation-delay: -19.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(3) { animation-delay: -19.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(4) { animation-delay: -19.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(5) { animation-delay: -19s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(6) { animation-delay: -18.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(7) { animation-delay: -18.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(8) { animation-delay: -18.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(9) { animation-delay: -18.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(10) { animation-delay: -18s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(11) { animation-delay: -17.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(12) { animation-delay: -17.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(13) { animation-delay: -17.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(14) { animation-delay: -17.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(15) { animation-delay: -17s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(16) { animation-delay: -16.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(17) { animation-delay: -16.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(18) { animation-delay: -16.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(19) { animation-delay: -16.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(20) { animation-delay: -16s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(21) { animation-delay: -15.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(22) { animation-delay: -15.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(23) { animation-delay: -15.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(24) { animation-delay: -15.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(25) { animation-delay: -15s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(26) { animation-delay: -14.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(27) { animation-delay: -14.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(28) { animation-delay: -14.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(29) { animation-delay: -14.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(30) { animation-delay: -14s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(31) { animation-delay: -13.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(32) { animation-delay: -13.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(33) { animation-delay: -13.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(34) { animation-delay: -13.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(35) { animation-delay: -13s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(36) { animation-delay: -12.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(37) { animation-delay: -12.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(38) { animation-delay: -12.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(39) { animation-delay: -12.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(40) { animation-delay: -12s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(41) { animation-delay: -11.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(42) { animation-delay: -11.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(43) { animation-delay: -11.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(44) { animation-delay: -11.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(45) { animation-delay: -11s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(46) { animation-delay: -10.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(47) { animation-delay: -10.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(48) { animation-delay: -10.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(49) { animation-delay: -10.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(50) { animation-delay: -10s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(51) { animation-delay: -9.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(52) { animation-delay: -9.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(53) { animation-delay: -9.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(54) { animation-delay: -9.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(55) { animation-delay: -9s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(56) { animation-delay: -8.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(57) { animation-delay: -8.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(58) { animation-delay: -8.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(59) { animation-delay: -8.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(60) { animation-delay: -8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(61) { animation-delay: -7.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(62) { animation-delay: -7.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(63) { animation-delay: -7.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(64) { animation-delay: -7.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(65) { animation-delay: -7s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(66) { animation-delay: -6.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(67) { animation-delay: -6.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(68) { animation-delay: -6.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(69) { animation-delay: -6.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(70) { animation-delay: -6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(71) { animation-delay: -5.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(72) { animation-delay: -5.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(73) { animation-delay: -5.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(74) { animation-delay: -5.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(75) { animation-delay: -5s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(76) { animation-delay: -4.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(77) { animation-delay: -4.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(78) { animation-delay: -4.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(79) { animation-delay: -4.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(80) { animation-delay: -4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(81) { animation-delay: -3.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(82) { animation-delay: -3.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(83) { animation-delay: -3.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(84) { animation-delay: -3.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(85) { animation-delay: -3s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(86) { animation-delay: -2.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(87) { animation-delay: -2.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(88) { animation-delay: -2.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(89) { animation-delay: -2.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(90) { animation-delay: -2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(91) { animation-delay: -1.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(92) { animation-delay: -1.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(93) { animation-delay: -1.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(94) { animation-delay: -1.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(95) { animation-delay: -1s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(96) { animation-delay: -0.8s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(97) { animation-delay: -0.6s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(98) { animation-delay: -0.4s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(99) { animation-delay: -0.2s; } .page-template-page-wedding .anim-text-flow span:nth-of-type(100) { animation-delay: 0s; } } @layer jsxscores.components{ /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget-area { margin-top: 1.5em; } .widget { margin: 0 0 2em; padding: 0 2em 2em; font-family: var(--jsxscores-font-sans); /* Make sure select elements fit in widgets. */ } @media screen and (min-width: 600px) { .widget { padding: 0 0 2em; } } .widget ul, .widget ol { padding: 0.7em 0 0; margin-bottom: 0; list-style-type: none; } .widget ul li, .widget ol li { display: block; line-height: 2em; } .widget ul li ul, .widget ul li ol, .widget ol li ul, .widget ol li ol { margin-left: 0.5em; } @media screen and (min-width: 30em) { .widget ul li ul, .widget ul li ol, .widget ol li ul, .widget ol li ol { margin-left: 1em; } } .widget a { font-weight: 600; text-decoration: none; } .widget a:hover, .widget a:focus { border-bottom: 3px solid var(--jsxscores-color-accent); } .widget select { width: 100%; height: 2.5em; padding: 10px; font-family: var(--jsxscores-font-sans); border: 1px solid var(--jsxscores-color-border-soft); } .widget-title { margin-top: 0; margin-bottom: 0.5em; font-size: var(--jsxscores-type-scale-section-heading); } /* Archive and Categories widgets */ .widget_archive li { color: #7D7D7D; } .widget_categories .children { padding-top: 0; } /* Search widget. */ .widget_search .search-submit { display: none; } /* Pages and Menu widgets */ .widget_pages .children, .widget_nav_menu .sub-menu { padding-top: 0; padding-bottom: 0.5em; } .widget_pages a, .widget_nav_menu a { display: block; padding: 1em 0; text-decoration: none; border-bottom: 1px dashed var(--jsxscores-color-border-dashed); } .widget_pages a:hover, .widget_pages a:focus, .widget_nav_menu a:hover, .widget_nav_menu a:focus { text-decoration: none; border-bottom: 1px dashed var(--jsxscores-color-border-dashed); } .widget_pages li, .widget_nav_menu li { padding: 0; } /* Meta widget */ .widget_meta li { padding: 0; } /* Recent comments */ .widget_recent_comments li { line-height: 1.3em; padding-bottom: 0.5em; } .widget_recent_comments a:hover, .widget_recent_comments a:focus { padding-left: 0; } /* RSS widget */ .widget_rss li { margin-bottom: 1em; } .widget li a.rsswidget { padding-right: 0.5em; font-size: 1em; line-height: 1.4em; } .rss-date, .widget_rss cite { color: #333; font-size: 0.8em; } .rssSummary { padding: 0.5em 0; font-family: "PT Serif", Georgia, Cambria, "Times New Roman", Times, serif; font-size: 0.8em; line-height: 1.4em; } /* Search widget */ .widget_search input[type=search] { box-sizing: border-box; width: 100%; padding: 0.5em 1em; border: 1px solid var(--jsxscores-color-border-muted); border-radius: 0; } /* Calendar widget */ .widget_calendar { font-weight: 400; } .widget_calendar caption { padding: 0.5em 0; font-size: 1em; font-weight: 500; text-align: left; } .widget_calendar thead { background: transparent; color: black; } .widget_calendar thead th { border-bottom-width: 2px; } .widget_calendar td { padding: 0.2em; font-size: 0.8em; text-align: center; background: white; border: 1px solid var(--jsxscores-color-border-soft); } .widget_calendar th { border: none; text-align: center; } .widget_calendar .pad { background: #eaeaea; } .widget_calendar a { font-weight: 900; text-decoration: none; } /* Text widget */ .textwidget { font-size: var(--jsxscores-type-scale-meta-tight); line-height: 1.3em; } /* Footer widget stylings */ #footer-widget-area { width: 100%; } .footer-widgets { margin: 0; padding: 1em 0; background-color: #1a1a1a; } @media screen and (min-width: 600px) { .footer-widgets { padding: 2em 1em; } } .footer-widgets .widget { flex: 1; margin: 0 1em 2em; padding-top: 1em; } .footer-widgets .widget, .footer-widgets .widget-title, .footer-widgets .widget a, .footer-widgets .widget_calendar thead, .footer-widgets .rss-date, .footer-widgets .widget_rss cite { color: white; } .footer-widgets .widget_calendar td, .footer-widgets .widget_calendar a { color: black; } @media screen and (min-width: 900px) { .footer-widgets { /* Use flex to create a responsive layout */ display: flex; flex-wrap: wrap; justify-content: space-around; /* If only one widget is displayed, make it full width. */ /* If 2 or 3 widgets are displayed, make the second one twice as wide. */ /* If 4 or more widgets are displayed, show three across when available. */ } .footer-widgets .widget:only-of-type { width: 100%; } .footer-widgets .widget:nth-last-child(n+2):nth-last-child(-n+3):first-child ~ .widget:nth-child(2) { flex: 2; } .footer-widgets .widget:nth-last-child(n+4), .footer-widgets .widget:nth-last-child(n+4) ~ .widget { width: 30%; flex: 1 1 30%; } } } @layer jsxscores.components{ /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } } @layer jsxscores.components{ /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } } @layer jsxscores.components{ /*-------------------------------------------------------------- # Media ## Captions ## Galleries --------------------------------------------------------------*/ .wp-caption { margin-bottom: 2em; max-width: 100%; font-family: var(--jsxscores-font-sans); font-size: var(--jsxscores-type-scale-meta); color: var(--jsxscores-color-text-muted); text-align: center; } .wp-caption a { color: inherit; } .wp-caption img[class*=wp-image-] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.5em 0 1.5em 1em; } @media screen and (min-width: 600px) { .wp-caption .wp-caption-text { margin-left: 2em; } } @media screen and (min-width: 900px) { .wp-caption .wp-caption-text { margin-left: 0; } } .centered-image, .wp-caption.aligncenter { max-width: 100vw; margin: 0 -1em; } @media screen and (min-width: 600px) { .centered-image, .wp-caption.aligncenter { margin: 0 -2em; } } .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } } @layer jsxscores.components{ /*-------------------------------------------------------------- ## Icons --------------------------------------------------------------*/ /* SVG Icons base styles */ .icon { display: inline-block; fill: currentColor; height: 1em; position: relative; /* Align more nicely with capital letters */ top: -0.0625em; vertical-align: middle; width: 1em; } /*-------------------------------------------------------------- SVG Fallbacks --------------------------------------------------------------*/ .svg-fallback { display: none; } .no-svg .svg-fallback { display: inline-block; } /* Social Menu fallbacks */ .no-svg .social-menu a { height: auto; width: auto; } .no-svg .social-menu li a .screen-reader-text { clip: auto; font-size: 16px; font-size: 1rem; font-weight: 400; height: auto; position: relative !important; /* overrides previous !important styles */ width: auto; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with the live layered runtime. */ #colophon.site-footer { margin-top: auto; } .site-footer { position: relative; padding: 1em var(--jsxscores-shell-inline-mobile); font-family: var(--jsxscores-font-sans); color: var(--jsxscores-color-text-inverse); background-color: var(--jsxscores-color-surface-dark); text-align: center; } @media screen and (min-width: 600px) { .site-footer { padding: 0.8em var(--jsxscores-shell-inline-tablet); } } @supports (padding: env(safe-area-inset-bottom)) { .site-footer { padding-bottom: calc(1em + env(safe-area-inset-bottom)); padding-left: calc(var(--jsxscores-shell-inline-mobile) + env(safe-area-inset-left)); padding-right: calc(var(--jsxscores-shell-inline-mobile) + env(safe-area-inset-right)); } @media screen and (min-width: 600px) { .site-footer { padding-bottom: calc(0.8em + env(safe-area-inset-bottom)); padding-left: calc(var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-left)); padding-right: calc(var(--jsxscores-shell-inline-tablet) + env(safe-area-inset-right)); } } } .social-menu ul { padding: 0; margin: 0; display: flex; justify-content: center; list-style-type: none; } .social-menu ul a { display: block; padding: 0.5em 1em; color: var(--jsxscores-color-text-inverse); text-decoration: none; } .social-menu ul a:hover, .social-menu ul a:focus { text-decoration: underline; } .site-info { font-weight: 400; font-size: var(--jsxscores-footer-site-info-font-size); color: var(--jsxscores-color-text-muted-inverse); } .site-info a { font-weight: 400; color: var(--jsxscores-color-text-inverse); text-decoration: none; } .site-info a:hover, .site-info a:focus { text-decoration: underline; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules aligned with production runtime behavior. */ .main-navigation { display: flex; justify-content: center; flex-direction: column; font-family: var(--jsxscores-font-sans); font-weight: 400; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation ul ul { display: none; z-index: 99999; } .main-navigation ul ul ul { top: 0; } .main-navigation ul ul li { padding-left: 1em; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } .main-navigation ul ul a { width: 200px; } .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } .main-navigation li { position: relative; } .main-navigation a { display: inline-block; width: 100%; padding: var(--jsxscores-navigation-link-padding-block-mobile) var(--jsxscores-navigation-link-padding-inline-end) var(--jsxscores-navigation-link-padding-block-mobile) var(--jsxscores-navigation-link-padding-inline-start-mobile); text-decoration: none; color: var(--jsxscores-color-text-inverse); } .main-navigation a:hover, .main-navigation a:focus { opacity: 0.55; } .main-navigation .menu-item-has-children > a, .main-navigation .page_item_has_children > a { padding-right: 2em; } button.dropdown-toggle { position: absolute; right: 0; border: none; background: inherit; color: var(--jsxscores-color-text-inverse); line-height: 1.5em; padding: var(--jsxscores-navigation-toggle-padding-block) var(--jsxscores-navigation-toggle-padding-inline-end) var(--jsxscores-navigation-toggle-padding-block) var(--jsxscores-navigation-toggle-padding-inline-start); } .site-login-icon { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-navigation-account-size); height: var(--jsxscores-navigation-account-size); padding: 0; border-radius: 0; border: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease; } .site-login-icon svg { width: var(--jsxscores-navigation-account-icon-size); height: var(--jsxscores-navigation-account-icon-size); fill: currentColor; display: block; } .site-login-icon:hover, .site-login-icon:focus { background-color: transparent; } .site-account-menu { position: relative; display: inline-flex; } .main-navigation__mobile-chrome, .main-navigation__mobile-panel { display: none; } .main-navigation li.menu-item--account-icon > a, .main-navigation li.menu-item--account-icon > .site-account-menu > .site-login-icon { display: inline-flex; width: var(--jsxscores-navigation-account-size); height: var(--jsxscores-navigation-account-size); padding: 0; margin-left: 0.25em; justify-content: center; align-items: center; opacity: 1; color: var(--jsxscores-color-text-inverse); } .main-navigation .menu-item--account-icon > a:hover, .main-navigation .menu-item--account-icon > a:focus, .main-navigation .menu-item--account-icon > .site-account-menu > .site-login-icon:hover, .main-navigation .menu-item--account-icon > .site-account-menu > .site-login-icon:focus { opacity: 0.55; } .menu-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-navigation-toggle-size); height: var(--jsxscores-navigation-toggle-size); margin: 0; padding: 0; font-size: 100%; font-family: inherit; font-weight: 700; color: var(--jsxscores-color-text-inverse); background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .menu-toggle:hover { opacity: 0.7; } .menu-toggle:focus-visible { outline: 2px solid var(--jsxscores-navigation-toggle-focus-outline); outline-offset: var(--jsxscores-navigation-toggle-focus-outline-offset); border-radius: var(--jsxscores-navigation-toggle-focus-radius); } .menu-toggle__icon { position: relative; display: block; width: var(--jsxscores-navigation-toggle-icon-width); height: var(--jsxscores-navigation-toggle-bar-thickness); border-radius: var(--jsxscores-navigation-toggle-bar-radius); background: currentColor; box-shadow: 0 calc(-1 * var(--jsxscores-navigation-toggle-bar-offset)) 0 currentColor, 0 var(--jsxscores-navigation-toggle-bar-offset) 0 currentColor; } .menu-toggle__icon::before, .menu-toggle__icon::after { content: none; } /* Toggle small menu and children on */ .toggled-on ul, .children.toggled-on, .sub-menu.toggled-on { display: block; padding-top: 0; text-align: center; } .toggled-on ul .page_item_has_children, .children.toggled-on .page_item_has_children { background: var(--jsxscores-navigation-submenu-item-surface); } .toggled-on #primary-menu { margin-top: -0.4em; margin-bottom: 0.45em; } body.jsxscores-mobile-menu-open { overflow: hidden; } @media screen and (max-width: 599px) { .main-navigation li.menu-item--account-icon { display: none; } .main-navigation button.dropdown-toggle { display: none; } .main-navigation { pointer-events: none; } .main-navigation.toggled-on { --jsxscores-mobile-nav-chrome-height: 68px; --jsxscores-mobile-nav-top-padding: calc(env(safe-area-inset-top, 0px) + 12px); --jsxscores-mobile-nav-panel-top: calc(var(--jsxscores-mobile-nav-top-padding) + var(--jsxscores-mobile-nav-chrome-height)); position: fixed; inset: 0; z-index: 100000; display: block; pointer-events: auto; background: var(--jsxscores-color-surface-dark); color: var(--jsxscores-color-text-inverse); backdrop-filter: blur(22px); } .main-navigation.toggled-on .main-navigation__mobile-chrome { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: var(--jsxscores-mobile-nav-chrome-height); padding: var(--jsxscores-mobile-nav-top-padding) 16px 12px; box-sizing: border-box; background: linear-gradient(to bottom, var(--jsxscores-color-surface-dark), rgb(0 0 0 / 0)); } .main-navigation__mobile-back, .main-navigation__mobile-close { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; } .main-navigation__mobile-back { opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .main-navigation.is-mobile-submenu-open .main-navigation__mobile-back { opacity: 1; pointer-events: auto; } .main-navigation__mobile-back-icon, .main-navigation__mobile-close-icon { position: relative; display: block; width: 18px; height: 18px; } .main-navigation__mobile-back-icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-35%, -50%) rotate(45deg); } .main-navigation__mobile-close-icon::before, .main-navigation__mobile-close-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; } .main-navigation__mobile-close-icon::before { transform: translate(-50%, -50%) rotate(45deg); } .main-navigation__mobile-close-icon::after { transform: translate(-50%, -50%) rotate(-45deg); } .main-navigation.toggled-on > ul, .main-navigation.toggled-on .main-navigation__mobile-panel { display: block; margin: 0; padding: 0 24px 36px; text-align: left; list-style: none; } .main-navigation.toggled-on > ul { position: absolute; inset: var(--jsxscores-mobile-nav-panel-top) 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; visibility: visible; opacity: 1; transform: translateX(0); transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); } .main-navigation.toggled-on.is-mobile-submenu-open > ul { visibility: hidden; opacity: 0; transform: translateX(-24px); pointer-events: none; } .main-navigation.toggled-on.is-mobile-submenu-open > ul, .main-navigation.toggled-on.is-mobile-submenu-open > ul > li { transform: none; } .main-navigation.toggled-on .children, .main-navigation.toggled-on .sub-menu { display: none; } .main-navigation.toggled-on .main-navigation__mobile-panel { position: fixed; top: var(--jsxscores-mobile-nav-panel-top); right: 0; bottom: 0; left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateX(32px); pointer-events: none; transition: opacity 260ms ease, transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1); } .main-navigation.toggled-on .main-navigation__mobile-panel.is-mobile-panel-active { visibility: visible; opacity: 1; transform: translateX(0); pointer-events: auto; } .main-navigation.toggled-on > ul > li, .main-navigation.toggled-on .main-navigation__mobile-panel > li { opacity: 0; transform: translateY(18px); transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--jsxscores-mobile-nav-order, 0) * 40ms); } .main-navigation.toggled-on.is-mobile-opening > ul > li, .main-navigation.toggled-on .main-navigation__mobile-panel.is-mobile-panel-active > li { opacity: 1; transform: translateY(0); } .main-navigation.toggled-on.is-mobile-root-ready > ul > li { opacity: 1; transform: none; } .main-navigation.toggled-on > ul > li + li, .main-navigation.toggled-on .main-navigation__mobile-panel > li + li { margin-top: 6px; } .main-navigation.toggled-on > ul > li > a, .main-navigation.toggled-on .main-navigation__mobile-panel > li > a { position: relative; display: block; padding: 8px 32px 8px 0; font-size: clamp(1.75rem, 7vw, 2rem); line-height: 1.14; letter-spacing: normal; font-weight: 400; text-align: left; color: inherit; opacity: 1; } .main-navigation.toggled-on > ul > .menu-item-has-children > a::after, .main-navigation.toggled-on > ul > .page_item_has_children > a::after { content: ""; position: absolute; top: 50%; right: 4px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: 0.8; } } @media screen and (min-width: 600px) { .menu-toggle { display: none; } .main-navigation button.dropdown-toggle { display: none; } .main-navigation { flex-direction: row; } .main-navigation > ul > .menu-item-has-children > a, .main-navigation > ul > .page_item_has_children > a { padding-right: 2em; background: transparent; } .main-navigation ul { display: block; display: flex; flex-wrap: wrap; align-items: center; } .main-navigation ul ul { flex-direction: column; background: var(--jsxscores-navigation-submenu-item-surface); margin-left: 0; } .main-navigation ul ul li { padding-left: 0; } .main-navigation ul ul li a { width: var(--jsxscores-navigation-submenu-link-width-desktop); background: none; } .main-navigation ul li a { padding: var(--jsxscores-navigation-link-padding-block-desktop) var(--jsxscores-navigation-link-padding-inline-end) var(--jsxscores-navigation-link-padding-block-desktop) var(--jsxscores-navigation-link-padding-inline-start-desktop); } /* Toggle small menu and children on */ .toggled-on ul, .children.toggled-on, .sub-menu.toggled-on { display: block; position: absolute; background-color: var(--jsxscores-color-surface-dark); padding-top: 0; } .toggled-on ul > li, .children.toggled-on > li, .sub-menu.toggled-on > li { background: var(--jsxscores-navigation-submenu-item-surface); } .toggled-on ul ul, .children.toggled-on ul, .sub-menu.toggled-on ul { position: absolute; left: 100%; } } @media screen and (min-width: 600px) { .main-navigation ul { justify-content: flex-end; padding-top: 0; } .main-navigation > ul > .menu-item-has-children::after, .main-navigation > ul > .page_item_has_children::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; } .main-navigation ul li:hover > ul, .main-navigation ul li:focus-within > ul, .main-navigation ul li.focus > ul { display: block; position: absolute; top: calc(100% + 14px); background-color: var(--jsxscores-color-surface-dark); backdrop-filter: none; border: 0; text-align: center; padding: 12px 0; } .main-navigation > ul > li:hover > ul, .main-navigation > ul > li:focus-within > ul, .main-navigation > ul > li.focus > ul { left: 50%; transform: translateX(-50%); } .main-navigation ul li:hover > ul > li, .main-navigation ul li:focus-within > ul > li, .main-navigation ul li.focus > ul > li { background: transparent; } .main-navigation ul li:hover > ul > li + li, .main-navigation ul li:focus-within > ul > li + li, .main-navigation ul li.focus > ul > li + li { margin-top: 12px; } .main-navigation ul li:hover > ul > li > a, .main-navigation ul li:focus-within > ul > li > a, .main-navigation ul li.focus > ul > li > a { width: 182px; padding-right: 0.6em; padding-left: 0.6em; font-size: 18px; line-height: 1.35; font-weight: 400; text-align: center; } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ .site-account-menu__trigger[aria-expanded="true"] { background-color: var(--jsxscores-account-menu-trigger-active-surface); } .site-account-menu__panel { position: absolute; top: calc(100% + var(--jsxscores-account-menu-panel-offset-block-start)); right: 0; width: min(var(--jsxscores-account-menu-panel-width), calc(100vw - var(--jsxscores-account-menu-panel-viewport-gutter))); z-index: 100001; } .site-account-menu__panel[hidden] { display: none !important; } .site-account-menu__sheet { position: relative; overflow: hidden; padding: var(--jsxscores-account-menu-sheet-padding); border: 1px solid var(--jsxscores-account-menu-sheet-border); border-radius: var(--jsxscores-account-menu-sheet-radius); background: var(--jsxscores-account-menu-sheet-highlight), var(--jsxscores-account-menu-sheet-surface); box-shadow: var(--jsxscores-account-menu-sheet-shadow); backdrop-filter: blur(18px); text-align: left; } .site-account-menu__sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--jsxscores-account-menu-sheet-overlay); pointer-events: none; } .site-account-menu__panel:not([hidden]) .site-account-menu__sheet { animation: site-account-menu-sheet-in 180ms cubic-bezier(0.16, 1, 0.3, 1); } .site-account-menu__hero { position: relative; display: grid; gap: var(--jsxscores-account-menu-hero-gap); padding: var(--jsxscores-account-menu-hero-padding); border-radius: var(--jsxscores-account-menu-hero-radius); background: var(--jsxscores-account-menu-hero-highlight), var(--jsxscores-account-menu-hero-surface); box-shadow: var(--jsxscores-account-menu-hero-shadow); } .site-account-menu__identity { display: grid; grid-template-columns: auto 1fr; gap: var(--jsxscores-account-menu-hero-gap); align-items: center; } .site-account-menu__avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-account-menu-avatar-size); height: var(--jsxscores-account-menu-avatar-size); border-radius: var(--jsxscores-account-menu-avatar-radius); background: var(--jsxscores-account-menu-avatar-surface); color: var(--jsxscores-color-text-inverse); font-family: "PT Serif", Georgia, serif; font-size: var(--jsxscores-account-menu-avatar-font-size); font-weight: 700; letter-spacing: 0.02em; box-shadow: var(--jsxscores-account-menu-avatar-shadow); } .site-account-menu__identity-copy { display: grid; gap: 0.18rem; min-width: 0; } .site-account-menu__eyebrow { display: inline-flex; align-items: center; font-size: var(--jsxscores-account-menu-eyebrow-size); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jsxscores-account-menu-eyebrow-color); } .site-account-menu__name { display: block; min-width: 0; color: var(--jsxscores-color-text-inverse); font-size: 1.12rem; font-weight: 700; line-height: 1.2; word-break: break-word; } .site-account-menu__status { display: inline-flex; align-items: center; justify-self: start; padding: var(--jsxscores-account-menu-status-padding-block) var(--jsxscores-account-menu-status-padding-inline); border: 1px solid var(--jsxscores-account-menu-status-border); border-radius: var(--jsxscores-account-menu-status-radius); background: var(--jsxscores-account-menu-status-surface); color: var(--jsxscores-account-menu-status-color); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .site-account-menu__summary.sf-card { position: relative; z-index: 1; margin-top: var(--jsxscores-account-menu-summary-margin-top); padding: var(--jsxscores-account-menu-summary-padding); border: 1px solid var(--jsxscores-account-menu-summary-border); border-radius: var(--jsxscores-account-menu-summary-radius); background: var(--jsxscores-account-menu-summary-surface); box-shadow: var(--jsxscores-account-menu-summary-shadow); font-family: var(--jsxscores-font-sans); } .site-account-menu__panel h3, .site-account-menu__panel .sf-account__label, .site-account-menu__panel .sf-account__value, .site-account-menu__panel .sf-account__value-text { color: var(--jsxscores-auth-account-text-color); } .site-account-menu__panel .sf-account__profile { display: grid; gap: var(--jsxscores-account-menu-summary-profile-gap); margin: 0; padding: 0; list-style: none; font-size: var(--jsxscores-account-menu-summary-profile-font-size); } .site-account-menu__panel .sf-account__profile li { display: grid; grid-template-columns: var(--jsxscores-account-menu-summary-item-label-width) 1fr; gap: var(--jsxscores-account-menu-summary-item-gap); align-items: center; padding: var(--jsxscores-account-menu-summary-item-padding-block) var(--jsxscores-account-menu-summary-item-padding-inline); border: 1px solid var(--jsxscores-account-menu-summary-item-border); border-radius: var(--jsxscores-account-menu-summary-item-radius); background: var(--jsxscores-account-menu-summary-item-surface); } .site-account-menu__panel .sf-account__label { font-size: var(--jsxscores-account-menu-summary-label-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--jsxscores-account-menu-summary-muted-color); } .site-account-menu__panel .sf-account__value, .site-account-menu__panel .sf-account__value-text { font-weight: 400; line-height: 1.45; word-break: break-word; } .site-account-menu__panel .sf-account__value--with-provider-icons { display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .site-account-menu__panel .sf-account__provider-icons { display: inline-flex; align-items: center; gap: var(--jsxscores-account-menu-provider-gap); } .site-account-menu__panel .sf-account__provider-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-account-menu-provider-icon-size); height: var(--jsxscores-account-menu-provider-icon-size); flex: 0 0 auto; border-radius: 999px; border: 1px solid var(--jsxscores-account-menu-provider-icon-border); background: var(--jsxscores-account-menu-provider-icon-surface); box-shadow: var(--jsxscores-account-menu-provider-icon-shadow); } .site-account-menu__panel .sf-account__provider-icon--kakao { border-color: var(--jsxscores-account-menu-provider-kakao-border); background: var(--jsxscores-account-menu-provider-kakao-surface); } .site-account-menu__panel .sf-account__provider-icon svg { display: block; width: var(--jsxscores-account-menu-provider-icon-svg-size); height: var(--jsxscores-account-menu-provider-icon-svg-size); } .main-navigation .site-account-menu__panel ul, .main-navigation .site-account-menu__panel ul ul { display: grid; margin: 0; padding: 0; background: transparent; } .main-navigation .site-account-menu__panel li, .main-navigation .site-account-menu__panel ul ul li { padding-left: 0; background: transparent; } .site-account-menu__actions { display: grid; gap: var(--jsxscores-account-menu-action-gap); margin-top: var(--jsxscores-account-menu-action-margin-top); position: relative; z-index: 1; } .site-account-menu__actions--has-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-account-menu__actions .sf-button { width: 100%; } .site-account-menu__logout-form { margin: 0; grid-column: 1 / -1; } .site-account-menu__logout-form .sf-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .site-account-menu__logout-form .site-account-menu__action--logout { grid-column: 1 / -1; } .main-navigation .site-account-menu__panel a:hover, .main-navigation .site-account-menu__panel a:focus { opacity: 1; } @keyframes site-account-menu-sheet-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .site-login-icon--header { display: none; } @media screen and (max-width: 599px) { .site-account-menu--header { margin-left: auto; flex: 0 0 auto; } .site-login-icon--header { position: relative; z-index: 1; display: inline-flex; margin-left: auto; flex: 0 0 auto; width: var(--jsxscores-account-menu-mobile-trigger-size); height: var(--jsxscores-account-menu-mobile-trigger-size); } .site-account-menu--header .site-account-menu__panel { right: 0; left: auto; top: calc(100% + var(--jsxscores-account-menu-panel-offset-block-start-mobile)); } .site-account-menu__sheet { padding: var(--jsxscores-account-menu-sheet-padding-mobile); border-radius: var(--jsxscores-account-menu-sheet-radius-mobile); } .site-account-menu__hero { padding: var(--jsxscores-account-menu-hero-padding-mobile); } .site-account-menu__panel .sf-account__profile li { grid-template-columns: 1fr; gap: var(--jsxscores-account-menu-mobile-profile-item-gap); } .site-account-menu__panel .sf-account__label { font-size: var(--jsxscores-account-menu-summary-label-size-mobile); } .site-account-menu__actions--has-admin { grid-template-columns: 1fr; } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ .carousel-indicators.jsx-indicators--compact li { transform: scale(var(--jsx-indicator-scale, 1)); opacity: var(--jsx-indicator-opacity, 1); transition: background-color 180ms ease, transform 180ms ease, opacity 180ms ease; will-change: transform, opacity; } .carousel-indicators.jsx-indicators--compact li.jsx-indicator--hidden { display: none; } } @layer jsxscores.components{ /* * Shared Travel-sub/Love feed shell primitives extracted during the parity- * first CSS migration. Route-specific color and pagination overrides stay in * their own component files. */ @media screen and (min-width: 600px) { .archive-view.category-travel_sub .site-content, .single.single-travel_sub .site-content, .archive-view.category-love .site-content, .single.single-love .site-content { padding-bottom: 0; } } .archive-view.category-travel_sub .site-main, .single.single-travel_sub .site-main, .archive-view.category-love .site-main, .single.single-love .site-main { display: flex; flex-direction: column; margin: 0 auto; max-width: var(--jsxscores-feed-shell-max-width); font-size: var(--jsxscores-feed-shell-font-size); line-height: var(--jsxscores-feed-shell-line-height); } .archive-view.category-travel_sub .post, .archive-view.category-travel_sub .page, .archive-view.category-travel_sub .type-post, .single.single-travel_sub .post, .single.single-travel_sub .page, .single.single-travel_sub .type-post, .archive-view.category-love .post, .archive-view.category-love .page, .archive-view.category-love .type-post, .single.single-love .post, .single.single-love .page, .single.single-love .type-post { display: flex; flex-direction: column; flex-shrink: 0; background-color: var(--jsxscores-feed-card-surface); border-radius: var(--jsxscores-feed-card-radius); border: 0 1px solid var(--jsxscores-feed-card-border); margin-bottom: var(--jsxscores-feed-card-margin-mobile); } @media screen and (min-width: 600px) { .archive-view.category-travel_sub .post, .archive-view.category-travel_sub .page, .archive-view.category-travel_sub .type-post, .single.single-travel_sub .post, .single.single-travel_sub .page, .single.single-travel_sub .type-post, .archive-view.category-love .post, .archive-view.category-love .page, .archive-view.category-love .type-post, .single.single-love .post, .single.single-love .page, .single.single-love .type-post { border: 1px solid var(--jsxscores-feed-card-border); margin-bottom: var(--jsxscores-feed-card-margin-desktop); } } .archive-view.category-travel_sub .entry-header, .single.single-travel_sub .entry-header, .archive-view.category-love .entry-header, .single.single-love .entry-header { border-bottom: 1px solid var(--jsxscores-feed-divider); border-bottom-width: var(--jsxscores-feed-divider-width); height: var(--jsxscores-feed-header-height); padding: var(--jsxscores-feed-padding); display: flex; align-items: center; display: flex; justify-content: space-between; } .archive-view.category-travel_sub .entry-header .cat-links, .single.single-travel_sub .entry-header .cat-links, .archive-view.category-love .entry-header .cat-links, .single.single-love .entry-header .cat-links { font-size: var(--jsxscores-feed-shell-font-size); line-height: var(--jsxscores-feed-shell-line-height); margin-left: var(--jsxscores-feed-meta-gap); } .archive-view.category-travel_sub .entry-header .entry-time, .single.single-travel_sub .entry-header .entry-time, .archive-view.category-love .entry-header .entry-time, .single.single-love .entry-header .entry-time { font-size: var(--jsxscores-feed-time-size); letter-spacing: var(--jsxscores-feed-time-letter-spacing); line-height: var(--jsxscores-feed-shell-line-height); margin: 0 var(--jsxscores-feed-meta-gap) 0 0; color: var(--jsxscores-feed-muted); vertical-align: center; } .archive-view.category-travel_sub .post__content, .single.single-travel_sub .post__content, .archive-view.category-love .post__content, .single.single-love .post__content { display: flex; flex-direction: column; padding: 0em; position: relative; } .archive-view.category-travel_sub .post__content .single-media, .archive-view.category-travel_sub .post__content .layout-carousel, .single.single-travel_sub .post__content .single-media, .single.single-travel_sub .post__content .layout-carousel, .archive-view.category-love .post__content .single-media, .archive-view.category-love .post__content .layout-carousel, .single.single-love .post__content .single-media, .single.single-love .post__content .layout-carousel { line-height: 0; } .archive-view.category-travel_sub .post__content .carousel-indicators, .single.single-travel_sub .post__content .carousel-indicators, .archive-view.category-love .post__content .carousel-indicators, .single.single-love .post__content .carousel-indicators { position: relative; bottom: auto; margin-top: var(--jsxscores-feed-carousel-indicator-margin-block); margin-bottom: var(--jsxscores-feed-carousel-indicator-margin-block); width: -moz-fit-content; width: fit-content; max-width: calc(100% - var(--jsxscores-feed-carousel-strip-max-width-offset)); margin-left: auto; margin-right: auto; padding: 0 var(--jsxscores-feed-carousel-strip-padding-inline); overflow: hidden; } .archive-view.category-travel_sub .post__content .carousel-indicators li, .single.single-travel_sub .post__content .carousel-indicators li, .archive-view.category-love .post__content .carousel-indicators li, .single.single-love .post__content .carousel-indicators li { flex: 0 0 auto; background-color: var(--jsxscores-carousel-indicator-emphasis); border-radius: 50%; transition: all 0.2s ease-in-out; } .archive-view.category-travel_sub .post__content .carousel-indicators .active, .single.single-travel_sub .post__content .carousel-indicators .active, .archive-view.category-love .post__content .carousel-indicators .active, .single.single-love .post__content .carousel-indicators .active { background-color: var(--jsxscores-carousel-indicator-active); } .archive-view.category-travel_sub .post__content .carousel-control-prev, .archive-view.category-travel_sub .post__content .carousel-control-next, .single.single-travel_sub .post__content .carousel-control-prev, .single.single-travel_sub .post__content .carousel-control-next, .archive-view.category-love .post__content .carousel-control-prev, .archive-view.category-love .post__content .carousel-control-next, .single.single-love .post__content .carousel-control-prev, .single.single-love .post__content .carousel-control-next { margin-bottom: var(--jsxscores-feed-carousel-control-margin-bottom); } .archive-view.category-travel_sub .post__content .carousel-inner, .single.single-travel_sub .post__content .carousel-inner, .archive-view.category-love .post__content .carousel-inner, .single.single-love .post__content .carousel-inner { transition: height 0.25s ease; } .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"], .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"], .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"], .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] { overflow: hidden; touch-action: pan-y; } .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-inner, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-inner, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-inner, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-inner { display: flex; flex-wrap: nowrap; align-items: flex-start; width: 100%; overflow: visible; will-change: transform; transition: height 0.25s ease, transform 0.45s ease; } .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item.active, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item.active, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item.active, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item.active, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-next, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-next, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-next, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-next, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-prev, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-prev, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-prev, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item-prev { position: relative; top: auto; flex: 0 0 100%; max-width: 100%; width: 100%; display: block; margin: 0; transform: none !important; transition: none !important; } .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > picture, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > picture, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > picture, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > picture, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > .jsx-nextgen-picture, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > .jsx-nextgen-picture, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > .jsx-nextgen-picture, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > .jsx-nextgen-picture, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > img, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > img, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > img, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > img, .archive-view.category-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > iframe, .single.single-travel_sub .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > iframe, .archive-view.category-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > iframe, .single.single-love .post__content .layout-carousel[data-jsx-track-carousel="1"] .carousel-item > iframe { display: block; width: 100%; max-width: 100%; } @media (prefers-reduced-motion: reduce) { .archive-view.category-travel_sub .post__content .carousel-inner, .single.single-travel_sub .post__content .carousel-inner, .archive-view.category-love .post__content .carousel-inner, .single.single-love .post__content .carousel-inner { transition: none; } } .archive-view.category-travel_sub .post__content .layout-carousel, .archive-view.category-travel_sub .post__content .single-media, .single.single-travel_sub .post__content .layout-carousel, .single.single-travel_sub .post__content .single-media, .archive-view.category-love .post__content .layout-carousel, .archive-view.category-love .post__content .single-media, .single.single-love .post__content .layout-carousel, .single.single-love .post__content .single-media { overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; } .archive-view.category-travel_sub .post__content .layout-carousel::-webkit-scrollbar, .archive-view.category-travel_sub .post__content .single-media::-webkit-scrollbar, .single.single-travel_sub .post__content .layout-carousel::-webkit-scrollbar, .single.single-travel_sub .post__content .single-media::-webkit-scrollbar, .archive-view.category-love .post__content .layout-carousel::-webkit-scrollbar, .archive-view.category-love .post__content .single-media::-webkit-scrollbar, .single.single-love .post__content .layout-carousel::-webkit-scrollbar, .single.single-love .post__content .single-media::-webkit-scrollbar { height: 0; } .archive-view.category-travel_sub .post__content .layout-carousel iframe, .archive-view.category-travel_sub .post__content .single-media iframe, .single.single-travel_sub .post__content .layout-carousel iframe, .single.single-travel_sub .post__content .single-media iframe, .archive-view.category-love .post__content .layout-carousel iframe, .archive-view.category-love .post__content .single-media iframe, .single.single-love .post__content .layout-carousel iframe, .single.single-love .post__content .single-media iframe { min-width: 100%; min-height: 200px; overflow-x: scroll; -webkit-overflow-scrolling: touch; width: 100%; } .archive-view.category-travel_sub .post__content .layout-carousel img, .archive-view.category-travel_sub .post__content .single-media img, .single.single-travel_sub .post__content .layout-carousel img, .single.single-travel_sub .post__content .single-media img, .archive-view.category-love .post__content .layout-carousel img, .archive-view.category-love .post__content .single-media img, .single.single-love .post__content .layout-carousel img, .single.single-love .post__content .single-media img { min-width: 100%; } .archive-view.category-travel_sub .entry-content, .single.single-travel_sub .entry-content, .archive-view.category-love .entry-content, .single.single-love .entry-content { display: flex; flex-direction: column; padding: 0 var(--jsxscores-feed-content-padding-inline); margin: 0; } .archive-view.category-travel_sub .entry-content .travel-meta, .single.single-travel_sub .entry-content .travel-meta, .archive-view.category-love .entry-content .travel-meta, .single.single-love .entry-content .travel-meta { display: flex; } .archive-view.category-travel_sub .entry-content .travel-meta.no-medias, .single.single-travel_sub .entry-content .travel-meta.no-medias, .archive-view.category-love .entry-content .travel-meta.no-medias, .single.single-love .entry-content .travel-meta.no-medias { margin-top: var(--jsxscores-feed-meta-no-media-margin-top); } .archive-view.category-travel_sub .entry-content .travel-meta.medias, .single.single-travel_sub .entry-content .travel-meta.medias, .archive-view.category-love .entry-content .travel-meta.medias, .single.single-love .entry-content .travel-meta.medias { margin-top: var(--jsxscores-feed-meta-with-media-margin-top); } .archive-view.category-travel_sub .entry-content .like-counts, .single.single-travel_sub .entry-content .like-counts, .archive-view.category-love .entry-content .like-counts, .single.single-love .entry-content .like-counts { margin-bottom: var(--jsxscores-feed-like-count-margin-bottom); font-weight: 600; color: var(--jsxscores-feed-like-count-color); cursor: pointer; position: relative; } } @layer jsxscores.components{ /* * Travel-sub-specific feed shell overrides layered on top of * `feed-shared-shell.css`. */ .archive-view.category-travel_sub, .single.single-travel_sub { background-color: var(--jsxscores-color-surface-muted); } .archive-view.category-travel_sub .entry-header .cat-links a:hover, .single.single-travel_sub .entry-header .cat-links a:hover { background-color: var(--jsxscores-color-surface-light); color: var(--jsxscores-color-accent); } } @layer jsxscores.components{ /* * Love-specific feed shell overrides layered on top of * `feed-shared-shell.css`. */ .archive-view.category-love, .single.single-love { background-color: #fff0f2; } @media screen and (min-width: 600px) { .archive-view.category-love .post:last-of-type, .archive-view.category-love .type-post:last-of-type, .single.single-love .post:last-of-type, .single.single-love .type-post:last-of-type { margin-bottom: 30px; } } .archive-view.category-love .entry-header .cat-links, .single.single-love .entry-header .cat-links { color: #ff6a80; } .archive-view.category-love .entry-header .cat-links a:hover, .single.single-love .entry-header .cat-links a:hover { background-color: white; color: #ff6a80; } .archive-view.category-love .entry-header .cat-links a:visited, .single.single-love .entry-header .cat-links a:visited { background-color: white; color: #ff6a80; } .archive-view.category-love .navigation.pagination, .single.single-love .navigation.pagination { margin-bottom: 1em; } .archive-view.category-love .navigation.pagination a, .single.single-love .navigation.pagination a { color: black; } .archive-view.category-love .navigation.pagination a:visited, .single.single-love .navigation.pagination a:visited { color: inherit; } .archive-view.category-love .pagination .current, .single.single-love .pagination .current { color: #ff6a80; } @media screen and (min-width: 600px) { .archive-view.category-love .navigation.pagination, .single.single-love .navigation.pagination { margin-bottom: 30px; } } } @layer jsxscores.components{ /* * Shared Travel-sub/Love feed body primitives extracted during the parity- * first CSS migration. Route-specific accent colors stay in the per-route * component files. */ .archive-view.category-travel_sub .entry-content p, .single.single-travel_sub .entry-content p, .archive-view.category-love .entry-content p, .single.single-love .entry-content p { display: inline; } .archive-view.category-travel_sub .entry-content .author.vcard, .archive-view.category-travel_sub .entry-content .comment-author, .single.single-travel_sub .entry-content .author.vcard, .single.single-travel_sub .entry-content .comment-author, .archive-view.category-love .entry-content .author.vcard, .archive-view.category-love .entry-content .comment-author, .single.single-love .entry-content .author.vcard, .single.single-love .entry-content .comment-author { margin-right: var(--jsxscores-feed-comment-author-gap-inline-end); font-weight: 600; padding-left: var(--jsxscores-feed-comment-author-padding-inline-start); margin-left: var(--jsxscores-feed-comment-author-offset-inline-start); } .archive-view.category-travel_sub .entry-content ul, .single.single-travel_sub .entry-content ul, .archive-view.category-love .entry-content ul, .single.single-love .entry-content ul { list-style: none; padding: 0; margin: 0; } .archive-view.category-travel_sub .entry-content li, .single.single-travel_sub .entry-content li, .archive-view.category-love .entry-content li, .single.single-love .entry-content li { display: block; position: relative; word-wrap: break-word; margin-top: var(--jsxscores-feed-comment-item-offset-block-start); padding-top: var(--jsxscores-feed-comment-item-padding-block-start); margin-right: var(--jsxscores-feed-comment-item-offset-inline-end); padding-right: var(--jsxscores-feed-comment-item-padding-inline-end); padding-bottom: var(--jsxscores-feed-comment-item-padding-block-end); overflow: visible; } .archive-view.category-travel_sub .entry-content li > p, .single.single-travel_sub .entry-content li > p, .archive-view.category-love .entry-content li > p, .single.single-love .entry-content li > p { margin: 0; } .archive-view.category-travel_sub .entry-content li.being_deleted, .single.single-travel_sub .entry-content li.being_deleted, .archive-view.category-love .entry-content li.being_deleted, .single.single-love .entry-content li.being_deleted { color: var(--jsxscores-feed-muted); } .archive-view.category-travel_sub .entry-content .entry-comments .comment_loadmore, .single.single-travel_sub .entry-content .entry-comments .comment_loadmore, .archive-view.category-love .entry-content .entry-comments .comment_loadmore, .single.single-love .entry-content .entry-comments .comment_loadmore { margin: 0 0 var(--jsxscores-feed-comment-loadmore-margin-bottom) 0; padding: 0; border: 0; font-family: inherit; } .archive-view.category-travel_sub .entry-content .entry-comments .c_loadmore, .single.single-travel_sub .entry-content .entry-comments .c_loadmore, .archive-view.category-love .entry-content .entry-comments .c_loadmore, .single.single-love .entry-content .entry-comments .c_loadmore { color: var(--jsxscores-feed-muted); border: none; padding: 0; font-size: inherit; line-height: inherit; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-author, .single.single-travel_sub .entry-content .entry-comments .comment-author, .archive-view.category-love .entry-content .entry-comments .comment-author, .single.single-love .entry-content .entry-comments .comment-author { font-size: inherit; line-height: inherit; font-weight: 600; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-author cite, .single.single-travel_sub .entry-content .entry-comments .comment-author cite, .archive-view.category-love .entry-content .entry-comments .comment-author cite, .single.single-love .entry-content .entry-comments .comment-author cite { font-style: normal; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-author cite a, .single.single-travel_sub .entry-content .entry-comments .comment-author cite a, .archive-view.category-love .entry-content .entry-comments .comment-author cite a, .single.single-love .entry-content .entry-comments .comment-author cite a { border-bottom: none; cursor: text; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-author cite a:hover, .single.single-travel_sub .entry-content .entry-comments .comment-author cite a:hover, .archive-view.category-love .entry-content .entry-comments .comment-author cite a:hover, .single.single-love .entry-content .entry-comments .comment-author cite a:hover { border-bottom: none; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-content, .single.single-travel_sub .entry-content .entry-comments .comment-content, .archive-view.category-love .entry-content .entry-comments .comment-content, .single.single-love .entry-content .entry-comments .comment-content { margin-left: 0; word-break: break-all; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-content .parent-link, .single.single-travel_sub .entry-content .entry-comments .comment-content .parent-link, .archive-view.category-love .entry-content .entry-comments .comment-content .parent-link, .single.single-love .entry-content .entry-comments .comment-content .parent-link { color: var(--jsxscores-feed-comment-parent-link-color); text-decoration: none; border-bottom: unset; } .archive-view.category-travel_sub .entry-content .entry-comments .comment-content .parent-link:hover, .single.single-travel_sub .entry-content .entry-comments .comment-content .parent-link:hover, .archive-view.category-love .entry-content .entry-comments .comment-content .parent-link:hover, .single.single-love .entry-content .entry-comments .comment-content .parent-link:hover { font-weight: unset; border-radius: unset; } .archive-view.category-travel_sub .entry-content .entry-comments .cancel-loading-button, .archive-view.category-travel_sub .entry-content .entry-comments .cancel-button, .single.single-travel_sub .entry-content .entry-comments .cancel-loading-button, .single.single-travel_sub .entry-content .entry-comments .cancel-button, .archive-view.category-love .entry-content .entry-comments .cancel-loading-button, .archive-view.category-love .entry-content .entry-comments .cancel-button, .single.single-love .entry-content .entry-comments .cancel-loading-button, .single.single-love .entry-content .entry-comments .cancel-button { position: absolute; bottom: var(--jsxscores-feed-comment-cancel-offset-block-end); right: var(--jsxscores-feed-comment-cancel-offset-inline-end); padding: 0; border: none; align-content: center; font-size: inherit; color: inherit; } .archive-view.category-travel_sub .entry-content .entry-comments .cancel-button svg, .single.single-travel_sub .entry-content .entry-comments .cancel-button svg, .archive-view.category-love .entry-content .entry-comments .cancel-button svg, .single.single-love .entry-content .entry-comments .cancel-button svg { width: var(--jsxscores-feed-comment-cancel-icon-size); height: var(--jsxscores-feed-comment-cancel-icon-size); } .archive-view.category-travel_sub .entry-content .entry-comments .cancel-loading-button svg, .single.single-travel_sub .entry-content .entry-comments .cancel-loading-button svg, .archive-view.category-love .entry-content .entry-comments .cancel-loading-button svg, .single.single-love .entry-content .entry-comments .cancel-loading-button svg { width: var(--jsxscores-feed-comment-cancel-loading-icon-size); height: var(--jsxscores-feed-comment-cancel-loading-icon-size); } .archive-view.category-travel_sub .entry-content .comment-respond, .single.single-travel_sub .entry-content .comment-respond, .archive-view.category-love .entry-content .comment-respond, .single.single-love .entry-content .comment-respond { min-height: var(--jsxscores-feed-comment-respond-min-height); margin-top: var(--jsxscores-feed-comment-respond-margin-top); padding: var(--jsxscores-feed-padding) 0; border-top: 1px solid var(--jsxscores-feed-divider); color: var(--jsxscores-feed-muted); } .archive-view.category-travel_sub .entry-content .comment-form, .single.single-travel_sub .entry-content .comment-form, .archive-view.category-love .entry-content .comment-form, .single.single-love .entry-content .comment-form { display: flex; flex-direction: row; flex-shrink: 1; flex-grow: 1; align-items: center; } .archive-view.category-travel_sub .entry-content .comment-input, .single.single-travel_sub .entry-content .comment-input, .archive-view.category-love .entry-content .comment-input, .single.single-love .entry-content .comment-input { background: 0 0; border: 0; margin: 0 var(--jsxscores-feed-comment-input-margin-inline); color: var(--jsxscores-feed-comment-input-color); font-size: var(--jsxscores-feed-comment-input-size-mobile); max-height: var(--jsxscores-feed-comment-input-max-height); outline: 0; padding: 0; resize: none; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; } @media screen and (min-width: 600px) { .archive-view.category-travel_sub .entry-content .comment-input, .single.single-travel_sub .entry-content .comment-input, .archive-view.category-love .entry-content .comment-input, .single.single-love .entry-content .comment-input { font-size: var(--jsxscores-feed-comment-input-size-desktop); } } .archive-view.category-travel_sub .entry-content .form-submit, .single.single-travel_sub .entry-content .form-submit, .archive-view.category-love .entry-content .form-submit, .single.single-love .entry-content .form-submit { margin: 0 0 0 1em; } @media screen and (min-width: 600px) { .archive-view.category-travel_sub .entry-content .form-submit, .single.single-travel_sub .entry-content .form-submit, .archive-view.category-love .entry-content .form-submit, .single.single-love .entry-content .form-submit { display: none; } } .archive-view.category-travel_sub .entry-content .form-submit input, .single.single-travel_sub .entry-content .form-submit input, .archive-view.category-love .entry-content .form-submit input, .single.single-love .entry-content .form-submit input { border: none; font-size: var(--jsxscores-feed-comment-action-font-size); font-weight: var(--jsxscores-feed-comment-action-font-weight); padding: 0 var(--jsxscores-feed-comment-action-padding-inline); margin-right: var(--jsxscores-feed-comment-action-margin-inline-end); } .archive-view.category-travel_sub .entry-content .form-submit input:hover, .single.single-travel_sub .entry-content .form-submit input:hover, .archive-view.category-love .entry-content .form-submit input:hover, .single.single-love .entry-content .form-submit input:hover { background: inherit; border-color: inherit; } .archive-view.category-travel_sub .entry-content .must-log-in, .single.single-travel_sub .entry-content .must-log-in, .archive-view.category-love .entry-content .must-log-in, .single.single-love .entry-content .must-log-in { vertical-align: middle; font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .archive-view.category-travel_sub .entry-content .must-log-in a, .single.single-travel_sub .entry-content .must-log-in a, .archive-view.category-love .entry-content .must-log-in a, .single.single-love .entry-content .must-log-in a { text-decoration: none; border-bottom: none; font-weight: inherit; } } @layer jsxscores.components{ /* * Travel-sub-specific feed body overrides layered on top of * `feed-shared-body.css`. */ .archive-view.category-travel_sub .entry-content .form-submit input, .single.single-travel_sub .entry-content .form-submit input { color: var(--jsxscores-color-accent); } .archive-view.category-travel_sub .entry-content .form-submit input:disabled, .single.single-travel_sub .entry-content .form-submit input:disabled { color: var(--jsxscores-feed-travel-sub-action-disabled); } .archive-view.category-travel_sub .entry-content .must-log-in a, .single.single-travel_sub .entry-content .must-log-in a { color: var(--jsxscores-color-accent); } } @layer jsxscores.components{ /* * Love-specific feed body overrides layered on top of `feed-shared-body.css`. */ .archive-view.category-love .entry-content .form-submit input, .single.single-love .entry-content .form-submit input { color: var(--jsxscores-feed-love-action-color); } .archive-view.category-love .entry-content .form-submit input:disabled, .single.single-love .entry-content .form-submit input:disabled { color: var(--jsxscores-feed-love-action-disabled-color); } .archive-view.category-love .entry-content .must-log-in a, .single.single-love .entry-content .must-log-in a { color: #ff6a80; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ @media screen and (min-width: 900px) { .archive-view.category-travel_sub.has-sidebar .site-content, .single.single-travel_sub.has-sidebar .site-content, .archive-view.category-love.has-sidebar .site-content, .single.single-love.has-sidebar .site-content { display: flex; flex-wrap: wrap; justify-content: space-between; } .archive-view.category-travel_sub.has-sidebar .page-header, .single.single-travel_sub.has-sidebar .page-header, .archive-view.category-love.has-sidebar .page-header, .single.single-love.has-sidebar .page-header { width: 100%; flex: 1 0 100%; } .archive-view.category-travel_sub.has-sidebar .content-area, .single.single-travel_sub.has-sidebar .content-area, .archive-view.category-love.has-sidebar .content-area, .single.single-love.has-sidebar .content-area { width: 60%; } .archive-view.category-travel_sub.has-sidebar .widget-area, .single.single-travel_sub.has-sidebar .widget-area, .archive-view.category-love.has-sidebar .widget-area, .single.single-love.has-sidebar .widget-area { width: 30%; } } .archive-view.category-travel_sub .post-navigation a, .single.single-travel_sub .post-navigation a, .archive-view.category-love .post-navigation a, .single.single-love .post-navigation a { border: none; color: rgba(0, 0, 0, 0.8); } .archive-view.category-travel_sub .post-navigation a:hover, .single.single-travel_sub .post-navigation a:hover, .archive-view.category-love .post-navigation a:hover, .single.single-love .post-navigation a:hover { background: none; border-color: none; color: rgba(0, 0, 0, 0.8); } .archive-view.category-travel_sub .nav-previous, .single.single-travel_sub .nav-previous, .archive-view.category-love .nav-previous, .single.single-love .nav-previous { left: 0; position: fixed; top: 50%; } .archive-view.category-travel_sub .nav-next, .single.single-travel_sub .nav-next, .archive-view.category-love .nav-next, .single.single-love .nav-next { right: 0; position: fixed; top: 50%; } .archive-view.category-travel_sub .sp_ground, .single.single-travel_sub .sp_ground, .archive-view.category-love .sp_ground, .single.single-love .sp_ground { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center; } .archive-view.category-travel_sub .share_popup_wrap, .single.single-travel_sub .share_popup_wrap, .archive-view.category-love .share_popup_wrap, .single.single-love .share_popup_wrap { background-color: #fff; border-radius: 12px; width: 260px; height: auto; margin: 20px; display: flex; flex-direction: column; position: relative; } @media screen and (min-width: 600px) { .archive-view.category-travel_sub .share_popup_wrap, .single.single-travel_sub .share_popup_wrap, .archive-view.category-love .share_popup_wrap, .single.single-love .share_popup_wrap { width: 400px; } } .archive-view.category-travel_sub .share_popup_header, .single.single-travel_sub .share_popup_header, .archive-view.category-love .share_popup_header, .single.single-love .share_popup_header { border-bottom: 1px solid #efefef; flex-direction: row; height: 49px; margin: 0; display: flex; } .archive-view.category-travel_sub .sph_first, .archive-view.category-travel_sub .sph_last, .single.single-travel_sub .sph_first, .single.single-travel_sub .sph_last, .archive-view.category-love .sph_first, .archive-view.category-love .sph_last, .single.single-love .sph_first, .single.single-love .sph_last { flex: 0 0 48px; align-items: center; justify-content: center; display: flex; } .archive-view.category-travel_sub .sph_center, .single.single-travel_sub .sph_center, .archive-view.category-love .sph_center, .single.single-love .sph_center { display: flex; flex-grow: 1; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; line-height: 24px; text-align: center; margin: 0; align-items: center; justify-content: center; } .archive-view.category-travel_sub .sp_cancel, .single.single-travel_sub .sp_cancel, .archive-view.category-love .sp_cancel, .single.single-love .sp_cancel { padding: 0px; min-height: 40px; min-height: 40px; min-width: 40px; border: none; } .archive-view.category-travel_sub .sp_cancel svg, .single.single-travel_sub .sp_cancel svg, .archive-view.category-love .sp_cancel svg, .single.single-love .sp_cancel svg { height: 16px; width: 16px; } .archive-view.category-travel_sub .share_popup_body, .single.single-travel_sub .share_popup_body, .archive-view.category-love .share_popup_body, .single.single-love .share_popup_body { margin: 16px 16px 0; display: flex; flex-direction: column; } .archive-view.category-travel_sub .sp_menu, .single.single-travel_sub .sp_menu, .archive-view.category-love .sp_menu, .single.single-love .sp_menu { margin-bottom: 16px; display: flex; flex-direction: row; width: 100%; flex-shrink: 0; align-items: center; cursor: pointer; } .archive-view.category-travel_sub .sp_menu:hover, .single.single-travel_sub .sp_menu:hover, .archive-view.category-love .sp_menu:hover, .single.single-love .sp_menu:hover { color: inherit; text-decoration: none; } .archive-view.category-travel_sub .sp_menu .sp_icon, .single.single-travel_sub .sp_menu .sp_icon, .archive-view.category-love .sp_menu .sp_icon, .single.single-love .sp_menu .sp_icon { height: 32px; margin-right: 16px; width: 32px; align-items: center; justify-content: center; display: flex; } .archive-view.category-travel_sub .sp_menu .sp_icon svg, .single.single-travel_sub .sp_menu .sp_icon svg, .archive-view.category-love .sp_menu .sp_icon svg, .single.single-love .sp_menu .sp_icon svg { margin: auto; } .archive-view.category-travel_sub .sp_menu .sp_menu_text, .single.single-travel_sub .sp_menu .sp_menu_text, .archive-view.category-love .sp_menu .sp_menu_text, .single.single-love .sp_menu .sp_menu_text { display: flex; flex: 1; overflow: hidden; text-align: left; align-items: center; } .archive-view.category-travel_sub .sp_menu span, .single.single-travel_sub .sp_menu span, .archive-view.category-love .sp_menu span, .single.single-love .sp_menu span { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-view.category-travel_sub .bottom_alert, .single.single-travel_sub .bottom_alert, .archive-view.category-love .bottom_alert, .single.single-love .bottom_alert { position: fixed; z-index: 25; bottom: 0; right: 0; left: 0; display: flex; flex-direction: column; align-items: center; } .archive-view.category-travel_sub .bottom_alert_inner, .single.single-travel_sub .bottom_alert_inner, .archive-view.category-love .bottom_alert_inner, .single.single-love .bottom_alert_inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; min-width: 500px; width: auto; background-color: #474747; min-height: 44px; display: flex; flex-direction: column; justify-content: center; } .archive-view.category-travel_sub .alert_msg, .single.single-travel_sub .alert_msg, .archive-view.category-love .alert_msg, .single.single-love .alert_msg { color: #fff; font-size: 14px; line-height: 18px; max-height: 72px; padding: 12px 16px; margin: 0; overflow: hidden; } .archive-view.category-travel_sub .tooltip, .single.single-travel_sub .tooltip, .archive-view.category-love .tooltip, .single.single-love .tooltip { background-color: #464646; color: white; text-align: center; padding: 7px 9px; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border-radius: 3px; white-space: nowrap; position: absolute; z-index: 20; top: 100%; left: 50%; margin-left: -20px; margin-top: -3px; } .archive-view.category-travel_sub .tooltip.likers_list, .single.single-travel_sub .tooltip.likers_list, .archive-view.category-love .tooltip.likers_list, .single.single-love .tooltip.likers_list { top: 130%; left: 15px; max-width: 350px; white-space: normal; word-wrap: break-word; } .archive-view.category-travel_sub .tooltip::after, .single.single-travel_sub .tooltip::after, .archive-view.category-love .tooltip::after, .single.single-love .tooltip::after { content: " "; position: absolute; bottom: 100%; left: 15px; border-width: 5px; border-style: solid; border-color: transparent transparent #464646 transparent; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ .archive-view.category-travel_sub .entry-content .travel-meta button, .single.single-travel_sub .entry-content .travel-meta button, .archive-view.category-travel_sub .entry-content .travel-meta .edit-button, .single.single-travel_sub .entry-content .travel-meta .edit-button { position: relative; display: block; border: none; padding: 0px; margin: 1px; min-height: 40px; min-width: 40px; line-height: 30px; text-align: center; } .archive-view.category-travel_sub .entry-content .travel-meta .edit-button, .single.single-travel_sub .entry-content .travel-meta .edit-button { text-decoration: none; color: inherit; } .archive-view.category-travel_sub .entry-content .travel-meta button:nth-child(1), .single.single-travel_sub .entry-content .travel-meta button:nth-child(1) { margin-left: -8px; } .archive-view.category-travel_sub .entry-content .travel-meta button:last-child, .single.single-travel_sub .entry-content .travel-meta button:last-child { margin-left: auto; margin-right: -10px; } .archive-view.category-travel_sub .entry-content .travel-meta button svg, .single.single-travel_sub .entry-content .travel-meta button svg, .archive-view.category-travel_sub .entry-content .travel-meta .edit-button svg, .single.single-travel_sub .entry-content .travel-meta .edit-button svg { height: 24px; width: 24px; display: block; margin: 8px auto; } .archive-view.category-love .entry-content .travel-meta button, .single.single-love .entry-content .travel-meta button, .archive-view.category-love .entry-content .travel-meta .edit-button, .single.single-love .entry-content .travel-meta .edit-button { position: relative; display: block; border: none; padding: 0px; margin: 1px; min-height: 40px; min-width: 40px; line-height: 30px; text-align: center; } .archive-view.category-love .entry-content .travel-meta .edit-button, .single.single-love .entry-content .travel-meta .edit-button { text-decoration: none; color: inherit; } .archive-view.category-love .entry-content .travel-meta button:nth-child(1), .single.single-love .entry-content .travel-meta button:nth-child(1) { margin-left: -8px; } .archive-view.category-love .entry-content .travel-meta button:last-child, .single.single-love .entry-content .travel-meta button:last-child { margin-left: auto; margin-right: -10px; } .archive-view.category-love .entry-content .travel-meta button svg, .single.single-love .entry-content .travel-meta button svg, .archive-view.category-love .entry-content .travel-meta .edit-button svg, .single.single-love .entry-content .travel-meta .edit-button svg { height: 24px; width: 24px; display: block; margin: 8px auto; } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ .home { background-color: var(--jsxscores-color-surface-canvas); } .home .site-content { max-width: none; width: 100%; padding: 0; background: var(--jsxscores-home-hero-backdrop-image), var(--jsxscores-home-hero-backdrop-color); } @media screen and (min-width: 600px) { .home .site-content { padding: 0; max-width: none; width: 100%; } } @media screen and (min-width: 900px) { .home .site-content { padding: 0; max-width: none; width: 100%; } } .home .site-main { display: flex; flex-direction: column; width: 100%; align-items: stretch; padding: 0; } @media screen and (min-width: 600px) { .home .site-main { padding: 0; flex-wrap: nowrap; flex-direction: row; flex-wrap: nowrap; } } .home .front_welcome { background: transparent; border-radius: 0; width: 100vw; max-width: none; min-width: 0; min-height: var(--jsxscores-home-hero-min-height); padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 0; margin-bottom: 0; box-shadow: none; } @media screen and (min-width: 600px) { .home .front_welcome { padding: 0; } } .home .front_welcome__graphic { width: 100%; max-width: 100%; height: clamp(420px, 72vh, 740px); margin: 0; padding: var(--jsxscores-home-hero-graphic-padding); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .home .front_welcome__art { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; border-radius: 0; box-shadow: none; filter: saturate(1.05) contrast(1.02); } /* Full-bleed hero graphic for front_welcome (override container widths) */ .front_welcome { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 36px; background: transparent; min-height: var(--jsxscores-home-hero-min-height); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: none; } .front_welcome__graphic { width: 100%; max-width: 100vw; height: 100%; margin: 0; position: relative; } .front_welcome__art { max-height: 100%; } .front_welcome__art { width: 100%; height: 100%; display: block; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 0; box-shadow: none; filter: saturate(1.05) contrast(1.02); } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules functionally aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ /* Post Composer */ .jsx-compose-page { background: var(--jsxscores-compose-page-surface); color: var(--jsxscores-compose-page-text); } .jsx-compose { display: flex; flex-direction: column; } /* Composer page lives inside the normal theme chrome (header/footer). Avoid forcing extra vertical space below the composer. */ body.page-template-page-post-compose #page.site { /* Sticky footer layout for tall viewports (no blank space under footer). */ min-height: 100vh; min-height: 100dvh; min-height: calc(var(--jsxscores-vh) * 100); display: flex; flex-direction: column; } body.page-template-page-post-compose #content.site-content { flex: 1 0 auto; min-height: 0; max-width: none; margin: 0; padding: 0; background: var(--jsxscores-compose-page-surface); } body.page-template-page-post-compose #colophon.site-footer { margin-top: auto; } body.page-template-page-post-compose .jsx-compose-page, body.page-template-page-post-compose .jsx-compose { min-height: 0; } /* Compose floating button (category pages) */ .jsx-compose-fab { position: fixed; right: var(--jsxscores-compose-fab-offset); bottom: var(--jsxscores-compose-fab-offset); z-index: 100; display: inline-flex; align-items: center; justify-content: center; gap: var(--jsxscores-compose-fab-gap); text-decoration: none; background: var(--jsxscores-compose-fab-surface); color: var(--jsxscores-compose-fab-text); border-radius: var(--jsxscores-compose-fab-radius); padding: var(--jsxscores-compose-fab-padding-block) var(--jsxscores-compose-fab-padding-inline); font-size: 14px; line-height: 1; box-shadow: var(--jsxscores-compose-fab-shadow); } .jsx-compose-fab:hover, .jsx-compose-fab:focus-visible { background: var(--jsxscores-compose-fab-surface-hover); color: var(--jsxscores-compose-fab-text); } .jsx-compose-fab__icon { width: var(--jsxscores-compose-fab-icon-size); height: var(--jsxscores-compose-fab-icon-size); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .jsx-compose-fab__icon::before, .jsx-compose-fab__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: var(--jsxscores-compose-fab-plus-stroke-radius); } .jsx-compose-fab__icon { position: relative; } .jsx-compose-fab__icon::before { width: var(--jsxscores-compose-fab-plus-stroke-width); height: var(--jsxscores-compose-fab-plus-vertical-length); margin-left: calc(var(--jsxscores-compose-fab-plus-stroke-width) * -0.5); margin-top: calc(var(--jsxscores-compose-fab-plus-vertical-length) * -0.5); } .jsx-compose-fab__icon::after { width: var(--jsxscores-compose-fab-plus-horizontal-length); height: var(--jsxscores-compose-fab-plus-stroke-width); margin-left: calc(var(--jsxscores-compose-fab-plus-horizontal-length) * -0.5); margin-top: calc(var(--jsxscores-compose-fab-plus-stroke-width) * -0.5); } .jsx-compose-fab__label { font-size: var(--jsxscores-compose-fab-label-size); font-weight: var(--jsxscores-compose-fab-label-weight); letter-spacing: 0.01em; line-height: 1; display: inline-flex; align-items: center; } @media screen and (max-width: 599px) { .jsx-compose-fab { width: var(--jsxscores-compose-fab-mobile-size); height: var(--jsxscores-compose-fab-mobile-size); padding: 0; } .jsx-compose-fab__label { display: none; } .jsx-compose-fab__icon { width: var(--jsxscores-compose-fab-mobile-icon-size); height: var(--jsxscores-compose-fab-mobile-icon-size); } .jsx-compose-fab__icon::before { height: var(--jsxscores-compose-fab-mobile-plus-vertical-length); margin-top: calc(var(--jsxscores-compose-fab-mobile-plus-vertical-length) * -0.5); } .jsx-compose-fab__icon::after { width: var(--jsxscores-compose-fab-mobile-plus-horizontal-length); margin-left: calc(var(--jsxscores-compose-fab-mobile-plus-horizontal-length) * -0.5); } } .jsx-compose__topbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: var(--jsxscores-compose-topbar-padding-block) var(--jsxscores-compose-topbar-padding-inline); background: var(--jsxscores-compose-topbar-surface); border-bottom: 1px solid var(--jsxscores-compose-topbar-divider); position: sticky; top: 0; z-index: 10; } .jsx-compose__title { font-size: var(--jsxscores-compose-topbar-title-size); font-weight: var(--jsxscores-compose-topbar-title-weight); justify-self: center; text-align: center; } .jsx-compose__back { background: transparent; border: none; color: var(--jsxscores-compose-topbar-control-color); font-size: 14px; cursor: pointer; } .jsx-compose__back { justify-self: start; } .jsx-compose__body { display: flex; flex-direction: column; gap: var(--jsxscores-compose-body-gap); padding: var(--jsxscores-compose-body-padding); } .jsx-compose__media { display: flex; flex-direction: column; gap: 12px; } .jsx-compose__preview { position: relative; background: var(--jsxscores-compose-preview-surface); border: 1px solid var(--jsxscores-compose-preview-border); border-radius: var(--jsxscores-compose-preview-radius); min-height: var(--jsxscores-compose-preview-min-height); height: clamp(320px, 52vh, 560px); display: flex; align-items: center; justify-content: center; overflow: hidden; } .jsx-compose__preview.is-map { min-height: 0; height: auto; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; margin: 0 auto; } .jsx-compose__preview.is-empty { border-style: dashed; cursor: pointer; } .jsx-compose__preview.is-dragover { border-color: var(--jsxscores-compose-preview-dragover-border); background: var(--jsxscores-compose-preview-dragover-surface); } .jsx-compose__preview img, .jsx-compose__preview iframe { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; border: 0; } html.jsx-compose-is-uploading, html.jsx-compose-is-uploading body { overflow: hidden; } .jsx-compose__upload-overlay[hidden] { display: none !important; } .jsx-compose__upload-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--jsxscores-compose-interaction-upload-overlay-backdrop); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: progress; } .jsx-compose__upload-overlay-card { position: relative; overflow: hidden; width: var(--jsxscores-compose-interaction-upload-overlay-card-size); height: var(--jsxscores-compose-interaction-upload-overlay-card-size); border-radius: var(--jsxscores-compose-interaction-upload-overlay-card-radius); background: var(--jsxscores-compose-interaction-upload-overlay-card-surface); border: 1px solid var(--jsxscores-compose-interaction-upload-overlay-card-border); box-shadow: var(--jsxscores-compose-interaction-upload-overlay-card-shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jsxscores-compose-interaction-upload-overlay-card-gap); color: var(--jsxscores-compose-interaction-upload-overlay-count-text); } .jsx-compose__upload-overlay-card::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -50%; width: 44%; pointer-events: none; background: linear-gradient( 110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 52%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-220%); animation: jsx-compose-upload-shimmer 1.15s ease-in-out infinite; } .jsx-compose__upload-overlay-ring { width: var(--jsxscores-compose-interaction-upload-overlay-ring-size); height: var(--jsxscores-compose-interaction-upload-overlay-ring-size); flex-shrink: 0; transform: rotate(-90deg); } .jsx-compose__upload-overlay-track { fill: none; stroke: var(--jsxscores-compose-interaction-upload-overlay-track-stroke); stroke-width: var(--jsxscores-compose-interaction-upload-overlay-track-stroke-width); } .jsx-compose__upload-overlay-bar { fill: none; stroke: var(--jsxscores-compose-interaction-upload-overlay-bar-stroke); stroke-width: var(--jsxscores-compose-interaction-upload-overlay-bar-stroke-width); stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 220ms ease; } .jsx-compose__upload-overlay-count { color: var(--jsxscores-compose-interaction-upload-overlay-count-text); font-size: var(--jsxscores-compose-interaction-upload-overlay-count-size); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; text-shadow: var(--jsxscores-compose-interaction-upload-overlay-count-shadow); } @keyframes jsx-compose-upload-shimmer { from { transform: translateX(-220%); } to { transform: translateX(420%); } } @media (prefers-reduced-motion: reduce) { .jsx-compose__upload-overlay-card::after { animation: none; } } .jsx-compose__preview-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--jsxscores-compose-preview-placeholder-text); font-size: var(--jsxscores-compose-preview-placeholder-font-size); text-align: center; } .jsx-compose__preview-icon { width: var(--jsxscores-compose-preview-placeholder-icon-size); height: var(--jsxscores-compose-preview-placeholder-icon-size); border-radius: var(--jsxscores-compose-preview-placeholder-icon-radius); border: 1px solid var(--jsxscores-compose-field-border); display: flex; align-items: center; justify-content: center; font-size: var(--jsxscores-compose-preview-placeholder-icon-font-size); color: var(--jsxscores-compose-page-text); } .jsx-compose__preview-title { color: var(--jsxscores-compose-page-text); font-weight: 600; } .jsx-compose__media-controls { display: flex; flex-direction: column; gap: 10px; } .jsx-compose__file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .jsx-compose__map-control { display: flex; gap: var(--jsxscores-compose-map-control-gap); } .jsx-compose__map-control input { flex: 1; background: var(--jsxscores-compose-field-surface); border: 1px solid var(--jsxscores-compose-field-border); border-radius: var(--jsxscores-compose-field-radius); color: var(--jsxscores-compose-field-text); padding: 6px 10px; font-size: var(--jsxscores-compose-field-font-size-desktop); caret-color: var(--jsxscores-compose-field-text); -webkit-text-fill-color: var(--jsxscores-compose-field-text); } .jsx-compose__field input::-moz-placeholder, .jsx-compose__map-control input::-moz-placeholder { color: var(--jsxscores-compose-hint-text); opacity: 1; -webkit-text-fill-color: var(--jsxscores-compose-hint-text); } .jsx-compose__field input::placeholder, .jsx-compose__map-control input::placeholder { color: var(--jsxscores-compose-hint-text); opacity: 1; -webkit-text-fill-color: var(--jsxscores-compose-hint-text); } .jsx-compose__field input:focus::-moz-placeholder, .jsx-compose__map-control input:focus::-moz-placeholder { color: transparent; -webkit-text-fill-color: transparent; } .jsx-compose__field input:focus::placeholder, .jsx-compose__map-control input:focus::placeholder { color: transparent; -webkit-text-fill-color: transparent; } .jsx-compose__field input:focus, .jsx-compose__field select:focus, .jsx-compose__map-control input:focus { color: var(--jsxscores-compose-field-text); -webkit-text-fill-color: var(--jsxscores-compose-field-text); border-color: var(--jsxscores-compose-action-primary-surface); outline: none; } .jsx-compose__editor:focus { border-color: var(--jsxscores-compose-action-primary-surface); outline: none; } .jsx-compose__map-control button { background: var(--jsxscores-compose-time-mode-active-surface); border: none; color: var(--jsxscores-compose-page-text); border-radius: var(--jsxscores-compose-field-radius); padding: 6px 10px; font-size: var(--jsxscores-compose-field-font-size-desktop); cursor: pointer; } .jsx-compose__thumbs { --jsx-compose-thumb-size: var(--jsxscores-compose-interaction-thumb-size); --jsx-compose-thumb-gap: var(--jsxscores-compose-interaction-thumb-gap); --jsx-compose-thumb-handle-h: var(--jsxscores-compose-interaction-thumb-handle-height); display: flex; gap: var(--jsxscores-compose-interaction-thumbs-gap); overflow-x: auto; padding-bottom: 8px; position: relative; scrollbar-color: var(--jsxscores-compose-interaction-thumbs-scrollbar) transparent; scrollbar-width: thin; color: var(--jsxscores-compose-interaction-thumbs-text); } .jsx-compose__thumbs::-webkit-scrollbar { height: 8px; } .jsx-compose__thumbs::-webkit-scrollbar-track { background: transparent; } .jsx-compose__thumbs::-webkit-scrollbar-thumb { background-color: var(--jsxscores-compose-interaction-thumbs-scrollbar); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .jsx-compose__thumbs:hover::-webkit-scrollbar-thumb { background-color: var(--jsxscores-compose-interaction-thumbs-scrollbar-hover); } .jsx-compose__thumb { display: flex; flex-direction: column; gap: var(--jsx-compose-thumb-gap); width: var(--jsx-compose-thumb-size); flex-shrink: 0; position: relative; } .jsx-compose__thumb-button { border: 1px solid var(--jsxscores-compose-interaction-thumb-border); border-radius: var(--jsxscores-compose-interaction-thumb-radius); background: var(--jsxscores-compose-interaction-thumb-surface); overflow: hidden; padding: 0; width: var(--jsx-compose-thumb-size); height: var(--jsx-compose-thumb-size); cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: manipulation; } .jsx-compose__thumb-handle { height: var(--jsx-compose-thumb-handle-h); display: flex; align-items: center; justify-content: center; z-index: 2; cursor: grab; touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .jsx-compose__thumb-handle::before { content: ""; width: var(--jsxscores-compose-interaction-thumb-handle-grip-width); height: var(--jsxscores-compose-interaction-thumb-handle-grip-height); border-radius: var(--jsxscores-compose-interaction-thumb-handle-grip-radius); background: currentColor; box-shadow: var(--jsxscores-compose-interaction-thumb-handle-grip-shadow); } .jsx-compose__thumb-drop-indicator { position: absolute; top: 0; width: var(--jsxscores-compose-interaction-thumb-drop-indicator-width); background: currentColor; border-radius: var(--jsxscores-compose-interaction-thumb-drop-indicator-radius); box-shadow: var(--jsxscores-compose-interaction-thumb-drop-indicator-shadow); pointer-events: none; z-index: 6; } .jsx-compose__thumb-delete { position: absolute; top: 6px; right: 6px; z-index: 3; width: var(--jsxscores-compose-interaction-thumb-delete-size); height: var(--jsxscores-compose-interaction-thumb-delete-size); border-radius: var(--jsxscores-compose-interaction-thumb-delete-radius); border: 1px solid var(--jsxscores-compose-interaction-thumb-delete-border); background: var(--jsxscores-compose-interaction-thumb-delete-surface); color: var(--jsxscores-compose-interaction-thumb-delete-text); font-size: var(--jsxscores-compose-interaction-thumb-delete-font-size); line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .jsx-compose__thumb.has-handle .jsx-compose__thumb-delete { top: calc(6px + var(--jsx-compose-thumb-handle-h) + var(--jsx-compose-thumb-gap)); } .jsx-compose__thumb-delete:hover { background: var(--jsxscores-compose-interaction-thumb-delete-hover-surface); } .jsx-compose__thumb-delete:focus { outline: none; box-shadow: var(--jsxscores-compose-interaction-thumb-delete-focus-shadow); } .jsx-compose__thumbs.is-reordering { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .jsx-compose__thumbs.is-reordering .jsx-compose__thumb { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; } .jsx-compose__thumbs.is-reordering .jsx-compose__thumb-handle { cursor: grabbing; } .jsx-compose__thumbs.is-reordering .jsx-compose__thumb-button, .jsx-compose__thumbs.is-reordering .jsx-compose__thumb-visibility, .jsx-compose__thumbs.is-reordering .jsx-compose__thumb-delete { pointer-events: none; } .jsx-compose__thumb.is-dragging { opacity: var(--jsxscores-compose-interaction-thumb-dragging-opacity); } .jsx-compose__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .jsx-compose__thumb-map { width: 100%; height: 100%; pointer-events: none; } .jsx-compose__thumb-map iframe { width: 100%; height: 100%; border: 0; } .jsx-compose__thumb-visibility { background: var(--jsxscores-compose-interaction-thumb-select-surface); border: 1px solid var(--jsxscores-compose-interaction-thumb-select-border); color: var(--jsxscores-compose-interaction-thumb-select-text); border-radius: var(--jsxscores-compose-interaction-thumb-select-radius); padding: 4px 6px; font-size: var(--jsxscores-compose-interaction-thumb-select-font-size); } .jsx-compose__thumb.is-active .jsx-compose__thumb-button { border-color: var(--jsxscores-compose-interaction-thumb-active-border); box-shadow: var(--jsxscores-compose-interaction-thumb-active-shadow); } .jsx-compose__thumb--add .jsx-compose__thumb-button { border: 1px dashed var(--jsxscores-compose-interaction-thumb-add-border); background: transparent; color: var(--jsxscores-compose-interaction-thumb-add-text); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; } .jsx-compose__thumbs.has-reorder-handles .jsx-compose__thumb--add .jsx-compose__thumb-button { margin-top: calc(var(--jsx-compose-thumb-handle-h) + var(--jsx-compose-thumb-gap)); } .jsx-compose__thumb--add.is-dragover .jsx-compose__thumb-button { border-color: var(--jsxscores-compose-interaction-thumb-add-dragover-border); color: var(--jsxscores-compose-interaction-thumb-add-dragover-text); } .jsx-compose__thumb-add-icon { font-size: var(--jsxscores-compose-interaction-thumb-add-icon-size); line-height: 1; } .jsx-compose__thumb-add-text { font-size: var(--jsxscores-compose-interaction-thumb-add-text-size); line-height: 1.2; } .jsx-compose__content { display: flex; flex-direction: column; gap: 16px; } .jsx-compose__field label { display: block; font-size: var(--jsxscores-compose-field-label-size); color: var(--jsxscores-compose-field-label-color); margin-bottom: 6px; } .jsx-compose__field input, .jsx-compose__field select { width: 100%; background: var(--jsxscores-compose-field-surface); border: 1px solid var(--jsxscores-compose-field-border); border-radius: var(--jsxscores-compose-field-radius); color: var(--jsxscores-compose-field-text); padding: 6px 10px; font-size: var(--jsxscores-compose-field-font-size-desktop); caret-color: var(--jsxscores-compose-field-text); -webkit-text-fill-color: var(--jsxscores-compose-field-text); } @media screen and (max-width: 899px) { .jsx-compose__field input, .jsx-compose__field select, .jsx-compose__map-control input { /* Prevent iOS Safari from zooming the page on focus. */ font-size: var(--jsxscores-compose-field-font-size-mobile); } } @supports (-webkit-overflow-scrolling: touch) { .jsx-compose__field input, .jsx-compose__field select, .jsx-compose__map-control input { /* iPad iOS Safari can exceed the mobile breakpoint but still auto-zooms on < 16px controls. */ font-size: var(--jsxscores-compose-field-font-size-mobile); } } .jsx-compose__time-modes { display: flex; border: 1px solid var(--jsxscores-compose-time-mode-border); border-radius: var(--jsxscores-compose-field-radius); overflow: hidden; background: var(--jsxscores-compose-time-mode-surface); } .jsx-compose__time-mode { flex: 1; background: transparent; border: 0; color: var(--jsxscores-compose-time-mode-text); padding: 8px 10px; font-size: var(--jsxscores-compose-time-mode-font-size); cursor: pointer; } .jsx-compose__time-mode.is-active { background: var(--jsxscores-compose-time-mode-active-surface); color: var(--jsxscores-compose-time-mode-active-text); } .jsx-compose__captured-times, .jsx-compose__manual-time { margin-top: 10px; } .jsx-compose__captured-times-scroller { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-color: var(--jsxscores-compose-interaction-thumbs-scrollbar) transparent; scrollbar-width: thin; } .jsx-compose__captured-times-scroller::-webkit-scrollbar { height: 8px; } .jsx-compose__captured-times-scroller::-webkit-scrollbar-track { background: transparent; } .jsx-compose__captured-times-scroller::-webkit-scrollbar-thumb { background-color: var(--jsxscores-compose-interaction-thumbs-scrollbar); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .jsx-compose__captured-times-scroller:hover::-webkit-scrollbar-thumb { background-color: var(--jsxscores-compose-interaction-thumbs-scrollbar-hover); } .jsx-compose__captured-time-chip { flex: 0 0 auto; border: 1px solid var(--jsxscores-compose-captured-time-border); background: var(--jsxscores-compose-captured-time-surface); color: var(--jsxscores-compose-captured-time-text); padding: var(--jsxscores-compose-captured-time-padding-block) var(--jsxscores-compose-captured-time-padding-inline); border-radius: var(--jsxscores-compose-captured-time-radius); font-size: var(--jsxscores-compose-captured-time-font-size); cursor: pointer; white-space: nowrap; } .jsx-compose__captured-time-chip.is-active { border-color: var(--jsxscores-compose-captured-time-active-border); color: var(--jsxscores-compose-captured-time-active-text); box-shadow: var(--jsxscores-compose-captured-time-active-shadow); } .jsx-compose__captured-times-hint { margin-top: 6px; font-size: var(--jsxscores-compose-field-label-size); color: var(--jsxscores-compose-hint-text); } .jsx-compose__editor { min-height: 240px; border: 1px solid var(--jsxscores-compose-editor-border); border-radius: var(--jsxscores-compose-editor-radius); padding: 12px; background: var(--jsxscores-compose-editor-surface); color: var(--jsxscores-compose-editor-text); font-size: var(--jsxscores-compose-editor-font-size-desktop); line-height: 1.6; } @media screen and (max-width: 899px) { .jsx-compose__editor { /* Prevent iOS Safari from zooming the page on focus. */ font-size: var(--jsxscores-compose-editor-font-size-mobile); } /* Some iOS builds still zoom when contenteditable descendants resolve to < 16px. */ .jsx-compose__editor * { font-size: var(--jsxscores-compose-editor-font-size-mobile) !important; } } @supports (-webkit-overflow-scrolling: touch) { .jsx-compose__editor { font-size: var(--jsxscores-compose-editor-font-size-mobile); } .jsx-compose__editor * { font-size: var(--jsxscores-compose-editor-font-size-mobile) !important; } } .jsx-compose__editor:empty::before { content: attr(data-placeholder); color: var(--jsxscores-compose-editor-placeholder); } .jsx-compose__editor:focus:empty::before { content: ""; } .jsx-compose__submit-row { display: flex; justify-content: flex-end; align-items: center; gap: 10px; } .jsx-compose__submit-row button { background: var(--jsxscores-compose-action-primary-surface); border: none; color: var(--jsxscores-compose-action-primary-text); border-radius: var(--jsxscores-compose-action-primary-radius); padding: 8px 14px; font-weight: var(--jsxscores-compose-action-primary-font-weight); font-size: var(--jsxscores-compose-action-primary-font-size); cursor: pointer; } .jsx-compose__submit-row .jsx-compose__submit-delete { background: rgba(0, 0, 0, 0); border: 1px solid var(--jsxscores-compose-action-secondary-border); color: var(--jsxscores-compose-action-secondary-text); } .jsx-compose__submit-row .jsx-compose__submit-delete:hover { border-color: var(--jsxscores-compose-action-secondary-hover-border); } .jsx-compose__submit-row .jsx-compose__submit-delete:disabled { opacity: 0.55; } .jsx-compose__submit-row button.is-submitting { position: relative; cursor: default; opacity: 0.95; color: transparent; } .jsx-compose__submit-row button.is-submitting::after { content: ''; position: absolute; left: 50%; top: 50%; margin-left: calc(var(--jsxscores-compose-action-submitting-spinner-size) * -0.5); margin-top: calc(var(--jsxscores-compose-action-submitting-spinner-size) * -0.5); transform: rotate(0deg); display: block; width: var(--jsxscores-compose-action-submitting-spinner-size); height: var(--jsxscores-compose-action-submitting-spinner-size); box-sizing: border-box; border-radius: 999px; border: var(--jsxscores-compose-action-submitting-spinner-stroke-width) solid var(--jsxscores-compose-action-submitting-spinner-stroke); border-top-color: var(--jsxscores-compose-action-submitting-spinner-active-stroke); animation: jsx-compose-spin 0.8s linear infinite; will-change: transform; transform-origin: 50% 50%; } .jsx-compose__body.jsx-travel-subcategory-compose__body { gap: 24px; } .jsx-travel-subcategory-compose__hero { display: flex; flex-direction: column; gap: 16px; } .jsx-travel-subcategory-compose__hero-preview-wrap { width: 100%; } .jsx-travel-subcategory-compose__hero-preview { --jsx-travel-crop-scale: 1; --jsx-travel-crop-rotation: 0deg; --jsx-travel-crop-flip-x: 1; --jsx-travel-crop-flip-y: 1; --jsx-travel-crop-frame-inset: var(--jsxscores-compose-travel-sub-hero-preview-frame-inset); --jsx-travel-crop-pan-padding: 24px; --jsx-travel-crop-cover-width-factor: 1; --jsx-travel-crop-cover-height-factor: 1; --jsx-travel-crop-view-width-factor: 1; --jsx-travel-crop-view-height-factor: 1; --jsx-travel-crop-pan-x-px: 0px; --jsx-travel-crop-pan-y-px: 0px; position: relative; width: min(100%, var(--jsxscores-compose-travel-sub-hero-preview-max-width)); margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0; border: 1px solid var(--jsxscores-compose-travel-sub-hero-preview-border); background: var(--jsxscores-compose-travel-sub-hero-preview-backdrop), var(--jsxscores-compose-travel-sub-hero-preview-surface); cursor: grab; touch-action: none; } .jsx-travel-subcategory-compose__hero-preview.is-empty { border-style: dashed; cursor: pointer; } .jsx-travel-subcategory-compose__hero-preview.is-dragging { cursor: grabbing; } .jsx-travel-subcategory-compose__hero-preview.is-resizing { cursor: nwse-resize; } .jsx-travel-subcategory-compose__hero-preview > [hidden] { display: none !important; } .jsx-travel-subcategory-compose__hero-preview::after { content: ''; position: absolute; inset: var(--jsx-travel-crop-frame-inset); border-radius: 0; border: 1px solid var(--jsxscores-compose-travel-sub-hero-preview-frame-border); box-shadow: var(--jsxscores-compose-travel-sub-hero-preview-frame-shadow); pointer-events: none; } .jsx-travel-subcategory-compose__hero-preview img { position: absolute; left: calc(50% + var(--jsx-travel-crop-pan-x-px)); top: calc(50% + var(--jsx-travel-crop-pan-y-px)); display: block; width: calc((100% - (var(--jsx-travel-crop-frame-inset) * 2)) * var(--jsx-travel-crop-cover-width-factor)); height: calc((100% - (var(--jsx-travel-crop-frame-inset) * 2)) * var(--jsx-travel-crop-cover-height-factor)); max-width: none; max-height: none; transform: translate(-50%, -50%) scale(calc(var(--jsx-travel-crop-scale) * var(--jsx-travel-crop-flip-x)), calc(var(--jsx-travel-crop-scale) * var(--jsx-travel-crop-flip-y))) rotate(var(--jsx-travel-crop-rotation)); transform-origin: center center; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; will-change: transform, left, top; } .jsx-travel-subcategory-compose__hero-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--jsxscores-compose-travel-sub-hero-placeholder-gap); padding: var(--jsxscores-compose-travel-sub-hero-placeholder-padding); text-align: center; color: var(--jsxscores-compose-travel-sub-hero-placeholder-color); } .jsx-travel-subcategory-compose__hero-placeholder-text { font-size: var(--jsxscores-compose-travel-sub-hero-placeholder-text-size); color: var(--jsxscores-compose-travel-sub-hero-placeholder-text-color); } .jsx-travel-subcategory-compose__hero-delete { position: absolute; top: calc(var(--jsx-travel-crop-frame-inset) - 10px); right: calc(var(--jsx-travel-crop-frame-inset) - 10px); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-compose-travel-sub-hero-control-size); height: var(--jsxscores-compose-travel-sub-hero-control-size); padding: 0; border: 1px solid var(--jsxscores-compose-travel-sub-hero-control-border); border-radius: var(--jsxscores-compose-travel-sub-hero-control-radius); background: var(--jsxscores-compose-travel-sub-hero-control-surface); box-shadow: var(--jsxscores-compose-travel-sub-hero-control-shadow); color: var(--jsxscores-compose-travel-sub-hero-control-text); font-size: 0; cursor: pointer; } .jsx-travel-subcategory-compose__hero-delete svg { width: var(--jsxscores-compose-travel-sub-hero-delete-icon-size); height: var(--jsxscores-compose-travel-sub-hero-delete-icon-size); display: block; fill: none; stroke: currentColor; stroke-width: var(--jsxscores-compose-travel-sub-hero-delete-icon-stroke-width); stroke-linecap: round; stroke-linejoin: round; } .jsx-travel-subcategory-compose__hero-delete:hover, .jsx-travel-subcategory-compose__hero-delete:focus-visible { background: var(--jsxscores-compose-travel-sub-hero-delete-hover-surface); color: var(--jsxscores-compose-travel-sub-hero-delete-hover-text); } .jsx-travel-subcategory-compose__icon-button { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-compose-travel-sub-hero-control-size); height: var(--jsxscores-compose-travel-sub-hero-control-size); padding: 0; background: var(--jsxscores-compose-travel-sub-hero-control-surface); border: 1px solid var(--jsxscores-compose-travel-sub-hero-control-border); color: var(--jsxscores-compose-travel-sub-hero-control-text); border-radius: var(--jsxscores-compose-travel-sub-hero-control-radius); box-shadow: var(--jsxscores-compose-travel-sub-hero-control-shadow); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .jsx-travel-subcategory-compose__icon-button svg { width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .jsx-travel-subcategory-compose__icon-button:hover, .jsx-travel-subcategory-compose__icon-button:focus-visible { background: #263149; color: #ffffff; } .jsx-travel-subcategory-compose__icon-button.is-active { border-color: rgba(75, 120, 255, 0.8); background: rgba(75, 120, 255, 0.24); color: #ffffff; } .jsx-travel-subcategory-compose__hero-transform-toolbar { position: absolute; top: calc(var(--jsx-travel-crop-frame-inset) - 10px); left: calc(var(--jsx-travel-crop-frame-inset) - 10px); z-index: 2; display: flex; gap: var(--jsxscores-compose-travel-sub-hero-toolbar-gap); } .jsx-travel-subcategory-compose__hero-transform-toolbar .jsx-travel-subcategory-compose__icon-button { position: static; } .jsx-travel-subcategory-compose__icon-button--hero-reset { left: calc(var(--jsx-travel-crop-frame-inset) - 10px); bottom: calc(var(--jsx-travel-crop-frame-inset) - 10px); } .jsx-travel-subcategory-compose__icon-asset { display: block; width: var(--jsxscores-compose-travel-sub-hero-control-icon-size); height: var(--jsxscores-compose-travel-sub-hero-control-icon-size); background-color: currentColor; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .jsx-travel-subcategory-compose__icon-asset--refresh { width: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); height: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20version='1.1'%20width='256'%20height='256'%20viewBox='0%200%20256%20256'%20xml:space='preserve'%3e%3cg%20style='stroke:%20none;%20stroke-width:%200;%20stroke-dasharray:%20none;%20stroke-linecap:%20butt;%20stroke-linejoin:%20miter;%20stroke-miterlimit:%2010;%20fill:%20none;%20fill-rule:%20nonzero;%20opacity:%201;'%20transform='translate(1.4065934065934016%201.4065934065934016)%20scale(2.81%202.81)'%3e%3cpath%20d='M%2081.521%2031.109%20c%20-0.86%20-1.73%20-2.959%20-2.438%20-4.692%20-1.575%20c%20-1.73%200.86%20-2.436%202.961%20-1.575%204.692%20c%202.329%204.685%203.51%209.734%203.51%2015.01%20C%2078.764%2067.854%2063.617%2083%2045%2083%20S%2011.236%2067.854%2011.236%2049.236%20c%200%20-16.222%2011.501%20-29.805%2026.776%20-33.033%20l%20-3.129%204.739%20c%20-1.065%201.613%20-0.62%203.784%200.992%204.85%20c%200.594%200.392%201.264%200.579%201.926%200.579%20c%201.136%200%202.251%20-0.553%202.924%20-1.571%20l%207.176%20-10.87%20c%200.001%20-0.001%200.001%20-0.002%200.002%20-0.003%20l%200.018%20-0.027%20c%200.063%20-0.096%200.106%20-0.199%200.159%20-0.299%20c%200.049%20-0.093%200.108%20-0.181%200.149%20-0.279%20c%200.087%20-0.207%200.152%20-0.419%200.197%20-0.634%20c%200.009%20-0.041%200.008%20-0.085%200.015%20-0.126%20c%200.031%20-0.182%200.053%20-0.364%200.055%20-0.547%20c%200%20-0.014%200.004%20-0.028%200.004%20-0.042%20c%200%20-0.066%20-0.016%20-0.128%20-0.019%20-0.193%20c%20-0.008%20-0.145%20-0.018%20-0.288%20-0.043%20-0.431%20c%20-0.018%20-0.097%20-0.045%20-0.189%20-0.071%20-0.283%20c%20-0.032%20-0.118%20-0.065%20-0.236%20-0.109%20-0.35%20c%20-0.037%20-0.095%20-0.081%20-0.185%20-0.125%20-0.276%20c%20-0.052%20-0.107%20-0.107%20-0.211%20-0.17%20-0.313%20c%20-0.054%20-0.087%20-0.114%20-0.168%20-0.175%20-0.25%20c%20-0.07%20-0.093%20-0.143%20-0.183%20-0.223%20-0.27%20c%20-0.074%20-0.08%20-0.153%20-0.155%20-0.234%20-0.228%20c%20-0.047%20-0.042%20-0.085%20-0.092%20-0.135%20-0.132%20L%2036.679%200.775%20c%20-1.503%20-1.213%20-3.708%20-0.977%20-4.921%200.53%20c%20-1.213%201.505%20-0.976%203.709%200.53%204.921%20l%203.972%203.2%20C%2017.97%2013.438%204.236%2029.759%204.236%2049.236%20C%204.236%2071.714%2022.522%2090%2045%2090%20s%2040.764%20-18.286%2040.764%20-40.764%20C%2085.764%2042.87%2084.337%2036.772%2081.521%2031.109%20z'%20style='stroke:%20none;%20stroke-width:%201;%20stroke-dasharray:%20none;%20stroke-linecap:%20butt;%20stroke-linejoin:%20miter;%20stroke-miterlimit:%2010;%20fill:%20rgb(0,0,0);%20fill-rule:%20nonzero;%20opacity:%201;'%20transform='%20matrix(1%200%200%201%200%200)%20'%20stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20version='1.1'%20width='256'%20height='256'%20viewBox='0%200%20256%20256'%20xml:space='preserve'%3e%3cg%20style='stroke:%20none;%20stroke-width:%200;%20stroke-dasharray:%20none;%20stroke-linecap:%20butt;%20stroke-linejoin:%20miter;%20stroke-miterlimit:%2010;%20fill:%20none;%20fill-rule:%20nonzero;%20opacity:%201;'%20transform='translate(1.4065934065934016%201.4065934065934016)%20scale(2.81%202.81)'%3e%3cpath%20d='M%2081.521%2031.109%20c%20-0.86%20-1.73%20-2.959%20-2.438%20-4.692%20-1.575%20c%20-1.73%200.86%20-2.436%202.961%20-1.575%204.692%20c%202.329%204.685%203.51%209.734%203.51%2015.01%20C%2078.764%2067.854%2063.617%2083%2045%2083%20S%2011.236%2067.854%2011.236%2049.236%20c%200%20-16.222%2011.501%20-29.805%2026.776%20-33.033%20l%20-3.129%204.739%20c%20-1.065%201.613%20-0.62%203.784%200.992%204.85%20c%200.594%200.392%201.264%200.579%201.926%200.579%20c%201.136%200%202.251%20-0.553%202.924%20-1.571%20l%207.176%20-10.87%20c%200.001%20-0.001%200.001%20-0.002%200.002%20-0.003%20l%200.018%20-0.027%20c%200.063%20-0.096%200.106%20-0.199%200.159%20-0.299%20c%200.049%20-0.093%200.108%20-0.181%200.149%20-0.279%20c%200.087%20-0.207%200.152%20-0.419%200.197%20-0.634%20c%200.009%20-0.041%200.008%20-0.085%200.015%20-0.126%20c%200.031%20-0.182%200.053%20-0.364%200.055%20-0.547%20c%200%20-0.014%200.004%20-0.028%200.004%20-0.042%20c%200%20-0.066%20-0.016%20-0.128%20-0.019%20-0.193%20c%20-0.008%20-0.145%20-0.018%20-0.288%20-0.043%20-0.431%20c%20-0.018%20-0.097%20-0.045%20-0.189%20-0.071%20-0.283%20c%20-0.032%20-0.118%20-0.065%20-0.236%20-0.109%20-0.35%20c%20-0.037%20-0.095%20-0.081%20-0.185%20-0.125%20-0.276%20c%20-0.052%20-0.107%20-0.107%20-0.211%20-0.17%20-0.313%20c%20-0.054%20-0.087%20-0.114%20-0.168%20-0.175%20-0.25%20c%20-0.07%20-0.093%20-0.143%20-0.183%20-0.223%20-0.27%20c%20-0.074%20-0.08%20-0.153%20-0.155%20-0.234%20-0.228%20c%20-0.047%20-0.042%20-0.085%20-0.092%20-0.135%20-0.132%20L%2036.679%200.775%20c%20-1.503%20-1.213%20-3.708%20-0.977%20-4.921%200.53%20c%20-1.213%201.505%20-0.976%203.709%200.53%204.921%20l%203.972%203.2%20C%2017.97%2013.438%204.236%2029.759%204.236%2049.236%20C%204.236%2071.714%2022.522%2090%2045%2090%20s%2040.764%20-18.286%2040.764%20-40.764%20C%2085.764%2042.87%2084.337%2036.772%2081.521%2031.109%20z'%20style='stroke:%20none;%20stroke-width:%201;%20stroke-dasharray:%20none;%20stroke-linecap:%20butt;%20stroke-linejoin:%20miter;%20stroke-miterlimit:%2010;%20fill:%20rgb(0,0,0);%20fill-rule:%20nonzero;%20opacity:%201;'%20transform='%20matrix(1%200%200%201%200%200)%20'%20stroke-linecap='round'/%3e%3c/g%3e%3c/svg%3e"); } .jsx-travel-subcategory-compose__icon-asset--turn-left { -webkit-mask-image: url('./travel-compose-turn-left.svg'); mask-image: url('./travel-compose-turn-left.svg'); } .jsx-travel-subcategory-compose__icon-asset--turn-right { -webkit-mask-image: url('./travel-compose-turn-right.svg'); mask-image: url('./travel-compose-turn-right.svg'); } .jsx-travel-subcategory-compose__icon-asset--flip-horizontal { width: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); height: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='261'%20height='245'%20viewBox='0%200%20261%20245'%20fill='none'%20role='img'%20aria-label='Flip%20horizontal%20icon'%3e%3ctitle%3eFlip%20horizontal%20icon%3c/title%3e%3crect%20x='7.5'%20y='7.5'%20width='246'%20height='230'%20rx='18'%20stroke='currentColor'%20stroke-width='15'%20/%3e%3cpolygon%20points='30.5,123.0%2073.0,90.5%2074.0,110.5%20106.0,97.5%20107.5,148.0%2074.0,136.5%2075.0,156.5'%20fill='currentColor'%20/%3e%3cpolygon%20points='230.5,123.0%20188.0,90.5%20187.0,110.5%20155.0,97.5%20153.5,148.0%20187.0,136.5%20186.0,156.5'%20fill='currentColor'%20/%3e%3cg%20fill='currentColor'%3e%3cellipse%20cx='130.5'%20cy='35.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='64.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='93.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='123.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='152.0'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='181.0'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='210.0'%20rx='5.5'%20ry='7.5'%20/%3e%3c/g%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='261'%20height='245'%20viewBox='0%200%20261%20245'%20fill='none'%20role='img'%20aria-label='Flip%20horizontal%20icon'%3e%3ctitle%3eFlip%20horizontal%20icon%3c/title%3e%3crect%20x='7.5'%20y='7.5'%20width='246'%20height='230'%20rx='18'%20stroke='currentColor'%20stroke-width='15'%20/%3e%3cpolygon%20points='30.5,123.0%2073.0,90.5%2074.0,110.5%20106.0,97.5%20107.5,148.0%2074.0,136.5%2075.0,156.5'%20fill='currentColor'%20/%3e%3cpolygon%20points='230.5,123.0%20188.0,90.5%20187.0,110.5%20155.0,97.5%20153.5,148.0%20187.0,136.5%20186.0,156.5'%20fill='currentColor'%20/%3e%3cg%20fill='currentColor'%3e%3cellipse%20cx='130.5'%20cy='35.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='64.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='93.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='123.5'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='152.0'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='181.0'%20rx='5.5'%20ry='7.5'%20/%3e%3cellipse%20cx='130.5'%20cy='210.0'%20rx='5.5'%20ry='7.5'%20/%3e%3c/g%3e%3c/svg%3e"); } .jsx-travel-subcategory-compose__icon-asset--flip-vertical { width: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); height: var(--jsxscores-compose-travel-sub-hero-control-icon-size-compact); -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='261'%20height='246'%20viewBox='0%200%20261%20246'%20fill='none'%20role='img'%20aria-label='Flip%20vertical%20icon'%3e%3ctitle%3eFlip%20vertical%20icon%3c/title%3e%3crect%20x='7.5'%20y='7.5'%20width='246'%20height='231'%20rx='18'%20stroke='currentColor'%20stroke-width='15'%20/%3e%3cpolygon%20points='137,29%20106,72%20125,73%20113,105%20160,105%20149,73%20169,73'%20fill='currentColor'%20/%3e%3cpolygon%20points='161,142%20114,142%20125,174%20106,175%20137,217%20168,175%20149,173'%20fill='currentColor'%20/%3e%3cg%20fill='currentColor'%3e%3cellipse%20cx='31.6'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='59.5'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='87.9'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='116.1'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='144.2'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='171.6'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='200.0'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='228.2'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3c/g%3e%3c/svg%3e"); mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='261'%20height='246'%20viewBox='0%200%20261%20246'%20fill='none'%20role='img'%20aria-label='Flip%20vertical%20icon'%3e%3ctitle%3eFlip%20vertical%20icon%3c/title%3e%3crect%20x='7.5'%20y='7.5'%20width='246'%20height='231'%20rx='18'%20stroke='currentColor'%20stroke-width='15'%20/%3e%3cpolygon%20points='137,29%20106,72%20125,73%20113,105%20160,105%20149,73%20169,73'%20fill='currentColor'%20/%3e%3cpolygon%20points='161,142%20114,142%20125,174%20106,175%20137,217%20168,175%20149,173'%20fill='currentColor'%20/%3e%3cg%20fill='currentColor'%3e%3cellipse%20cx='31.6'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='59.5'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='87.9'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='116.1'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='144.2'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='171.6'%20cy='122.9'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='200.0'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3cellipse%20cx='228.2'%20cy='123.0'%20rx='6.5'%20ry='5.5'%20/%3e%3c/g%3e%3c/svg%3e"); } .jsx-travel-subcategory-compose__hero-resize-handle { position: absolute; right: calc(var(--jsx-travel-crop-frame-inset) - 10px); bottom: calc(var(--jsx-travel-crop-frame-inset) - 10px); z-index: 2; width: var(--jsxscores-compose-travel-sub-hero-control-size); height: var(--jsxscores-compose-travel-sub-hero-control-size); padding: 0; border: 1px solid var(--jsxscores-compose-travel-sub-hero-control-border); border-radius: var(--jsxscores-compose-travel-sub-hero-resize-radius); background: var(--jsxscores-compose-travel-sub-hero-resize-background-image) center / var(--jsxscores-compose-travel-sub-hero-control-icon-size) var(--jsxscores-compose-travel-sub-hero-control-icon-size) no-repeat, var(--jsxscores-compose-travel-sub-hero-control-surface); box-shadow: var(--jsxscores-compose-travel-sub-hero-control-shadow); cursor: nwse-resize; touch-action: none; } .jsx-travel-subcategory-compose__member-chip, .jsx-travel-subcategory-compose__member-option { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .jsx-travel-subcategory-compose__icon-button:disabled, .jsx-travel-subcategory-compose__hero-delete:disabled, .jsx-travel-subcategory-compose__hero-resize-handle:disabled { opacity: var(--jsxscores-compose-travel-sub-hero-control-disabled-opacity); cursor: not-allowed; transform: none; } .jsx-travel-subcategory-compose input[readonly] { color: var(--jsxscores-compose-field-label-color); cursor: not-allowed; } .jsx-travel-subcategory-compose__members-field { gap: var(--jsxscores-compose-travel-sub-members-field-gap); } .jsx-travel-subcategory-compose__members-filters { display: grid; grid-template-columns: minmax(0, var(--jsxscores-compose-travel-sub-members-filters-role-width)) minmax(0, 1fr); gap: var(--jsxscores-compose-travel-sub-members-filters-gap); } .jsx-travel-subcategory-compose__member-chips { display: flex; flex-wrap: wrap; gap: var(--jsxscores-compose-travel-sub-members-chips-gap); margin: var(--jsxscores-compose-travel-sub-members-chips-margin-top) 0 var(--jsxscores-compose-travel-sub-members-chips-margin-bottom); } .jsx-travel-subcategory-compose__member-chip { display: inline-flex; align-items: center; gap: var(--jsxscores-compose-travel-sub-members-chips-gap); border: 1px solid var(--jsxscores-compose-travel-sub-members-chip-border); background: var(--jsxscores-compose-travel-sub-members-chip-surface); color: var(--jsxscores-color-text-inverse); border-radius: var(--jsxscores-compose-travel-sub-members-chip-radius); padding: var(--jsxscores-compose-travel-sub-members-chip-padding-block) var(--jsxscores-compose-travel-sub-members-chip-padding-inline); font-size: var(--jsxscores-compose-travel-sub-members-chip-font-size); line-height: 1.2; cursor: pointer; } .jsx-travel-subcategory-compose__member-chip-role { color: var(--jsxscores-compose-travel-sub-members-chip-role-text); font-size: var(--jsxscores-compose-travel-sub-members-chip-role-font-size); } .jsx-travel-subcategory-compose__member-chip-remove { font-size: 0.88rem; line-height: 1; } .jsx-travel-subcategory-compose__member-list { display: flex; flex-direction: column; gap: var(--jsxscores-compose-travel-sub-members-list-gap); max-height: var(--jsxscores-compose-travel-sub-members-list-max-height); overflow-y: auto; padding-right: var(--jsxscores-compose-travel-sub-members-list-padding-inline-end); scrollbar-width: thin; scrollbar-color: var(--jsxscores-compose-travel-sub-members-list-scrollbar-color) var(--jsxscores-compose-travel-sub-members-list-scrollbar-track); } .jsx-travel-subcategory-compose__member-list::-webkit-scrollbar { width: 10px; } .jsx-travel-subcategory-compose__member-list::-webkit-scrollbar-track { background: var(--jsxscores-compose-travel-sub-members-list-scrollbar-track); border-radius: 999px; } .jsx-travel-subcategory-compose__member-list::-webkit-scrollbar-thumb { background: var(--jsxscores-compose-travel-sub-members-list-scrollbar-thumb); border: 2px solid var(--jsxscores-compose-travel-sub-members-list-scrollbar-thumb-border); border-radius: 999px; } .jsx-travel-subcategory-compose__member-list:hover::-webkit-scrollbar-thumb { background: var(--jsxscores-compose-travel-sub-members-list-scrollbar-thumb-hover); } .jsx-travel-subcategory-compose__member-group { display: flex; flex-direction: column; gap: var(--jsxscores-compose-travel-sub-members-group-gap); } .jsx-travel-subcategory-compose__member-group-title { font-size: var(--jsxscores-compose-travel-sub-members-group-title-size); font-weight: 600; color: var(--jsxscores-compose-page-text); } .jsx-travel-subcategory-compose__member-group-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--jsxscores-compose-travel-sub-members-option-grid-min), 1fr)); gap: var(--jsxscores-compose-travel-sub-members-option-grid-gap); } .jsx-travel-subcategory-compose__member-option { display: flex; flex-direction: column; gap: var(--jsxscores-compose-travel-sub-members-option-gap); align-items: flex-start; border: 1px solid var(--jsxscores-compose-field-border); border-radius: var(--jsxscores-compose-travel-sub-members-option-radius); background: var(--jsxscores-compose-travel-sub-members-option-surface); color: var(--jsxscores-compose-page-text); padding: var(--jsxscores-compose-travel-sub-members-option-padding-block) var(--jsxscores-compose-travel-sub-members-option-padding-inline); cursor: pointer; text-align: left; } .jsx-travel-subcategory-compose__member-option:hover, .jsx-travel-subcategory-compose__member-option:focus-visible { border-color: rgba(75, 120, 255, 0.6); background: #162033; } .jsx-travel-subcategory-compose__member-option.is-selected { border-color: var(--jsxscores-compose-travel-sub-members-option-selected-border); background: var(--jsxscores-compose-travel-sub-members-option-selected-surface); box-shadow: var(--jsxscores-compose-travel-sub-members-option-selected-shadow); } .jsx-travel-subcategory-compose__member-option-name { font-size: 0.86rem; font-weight: 600; line-height: 1.25; } .jsx-travel-subcategory-compose__member-option-meta { color: var(--jsxscores-compose-travel-sub-members-muted-text); font-size: var(--jsxscores-compose-travel-sub-members-option-meta-font-size); line-height: 1.3; word-break: break-all; } .jsx-travel-subcategory-compose__member-empty { color: var(--jsxscores-compose-travel-sub-members-muted-text); font-size: var(--jsxscores-compose-travel-sub-members-empty-font-size); padding: 0.25rem 0; } .jsx-travel-subcategory-compose__status { min-height: var(--jsxscores-compose-travel-sub-members-status-min-height); color: var(--jsxscores-compose-travel-sub-members-muted-text); font-size: var(--jsxscores-compose-travel-sub-members-status-font-size); } .jsx-travel-subcategory-compose__status.is-loading { color: var(--jsxscores-compose-travel-sub-members-status-loading); } .jsx-travel-subcategory-compose__status.is-success { color: var(--jsxscores-compose-travel-sub-members-status-success); } .jsx-travel-subcategory-compose__status.is-error { color: var(--jsxscores-compose-travel-sub-members-status-error); } .jsx-travel-subcategory-compose__locked-message { max-width: var(--jsxscores-compose-travel-sub-locked-max-width); margin: var(--jsxscores-compose-travel-sub-locked-margin-top) auto; padding: 0 var(--jsxscores-compose-travel-sub-locked-padding-inline) var(--jsxscores-compose-travel-sub-locked-padding-bottom); text-align: center; } .jsx-travel-subcategory-compose__locked-message .button { margin-top: var(--jsxscores-compose-travel-sub-locked-button-margin-top); } @keyframes jsx-compose-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .jsx-compose .jsx-visibility { padding: 0 var(--jsxscores-compose-visibility-padding-inline); border-radius: var(--jsxscores-compose-visibility-radius); cursor: pointer; } .jsx-compose .jsx-visibility--member { background: var(--jsxscores-compose-visibility-member-surface); } .jsx-compose .jsx-visibility--friend { background: var(--jsxscores-compose-visibility-friend-surface); } .jsx-compose .jsx-visibility--family { background: var(--jsxscores-compose-visibility-family-surface); } .jsx-compose__role-menu { position: fixed; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .jsx-compose__role-menu.is-open { opacity: 1; pointer-events: auto; } .jsx-compose__role-menu-inner { display: inline-flex; gap: var(--jsxscores-compose-interaction-role-menu-gap); background: var(--jsxscores-compose-interaction-role-menu-surface); border: 1px solid var(--jsxscores-compose-interaction-role-menu-border); border-radius: var(--jsxscores-compose-interaction-role-menu-radius); padding: var(--jsxscores-compose-interaction-role-menu-padding); box-shadow: var(--jsxscores-compose-interaction-role-menu-shadow); } .jsx-compose__role-option, .jsx-compose__role-remove { background: var(--jsxscores-compose-interaction-role-option-surface); border: none; color: var(--jsxscores-compose-interaction-role-option-text); padding: var(--jsxscores-compose-interaction-role-option-padding-block) var(--jsxscores-compose-interaction-role-option-padding-inline); border-radius: var(--jsxscores-compose-interaction-role-option-radius); font-size: var(--jsxscores-compose-interaction-role-option-font-size); cursor: pointer; } .jsx-compose__role-option.is-active { background: var(--jsxscores-compose-interaction-role-option-active-surface); } .jsx-compose__role-remove { background: var(--jsxscores-compose-interaction-role-remove-surface); color: var(--jsxscores-compose-interaction-role-remove-text); min-width: var(--jsxscores-compose-interaction-role-remove-min-width); text-align: center; } .jsx-embed-map { width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; display: block; } @media screen and (min-width: 900px) { .jsx-compose__body { flex-direction: row; /* Let the page scroll naturally (no fixed-height columns). */ align-items: flex-start; height: auto; } .jsx-compose__body.is-empty-media { align-items: flex-start; } .jsx-compose__media { flex: 1.2; } .jsx-compose__content { flex: 0.8; } .jsx-compose__media, .jsx-compose__content { /* Prevent flex overflow while keeping popovers/menus unclipped. */ min-width: 0; } .jsx-compose__editor { min-height: 320px; } .jsx-compose__body.is-empty-media .jsx-compose__editor { min-height: 360px; } .jsx-compose__body.is-has-media .jsx-compose__preview:not(.is-map) { min-height: 260px; height: clamp(260px, 55vh, 720px); } .jsx-compose__body.is-has-media .jsx-compose__thumbs { margin-top: 0; } .jsx-compose__body.is-has-media .jsx-compose__submit-row { margin-top: 0; } .jsx-compose__body.jsx-travel-subcategory-compose__body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--jsxscores-compose-travel-sub-gap); } .jsx-travel-subcategory-compose__hero { position: sticky; top: 82px; } } @media screen and (max-width: 699px) { .jsx-travel-subcategory-compose__members-filters { grid-template-columns: 1fr; } .jsx-travel-subcategory-compose__member-group-list { grid-template-columns: 1fr; } } } @layer jsxscores.components{ /* * Extracted from the legacy compiled theme stylesheet during the parity-first * CSS migration. Keep the rules byte-for-byte aligned with the live baseline * until the matching block is removed from style.css in a later slice. */ .archive-view.category-travel .site-content { padding: 0 0 1em; } @media screen and (min-width: 600px) { .archive-view.category-travel .site-content { padding: var(--jsxscores-archive-travel-content-padding-top) var(--jsxscores-archive-travel-content-padding-inline) 0; } } .archive-view.category-travel .site-main { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .archive-view.category-travel .hentry { width: var(--jsxscores-archive-travel-card-size-mobile); height: var(--jsxscores-archive-travel-card-size-mobile); margin: 1em 0.5em 0; } @media screen and (min-width: 600px) { .archive-view.category-travel .hentry { margin: 1em 1em; width: var(--jsxscores-archive-travel-card-size-tablet); height: var(--jsxscores-archive-travel-card-size-tablet); min-width: var(--jsxscores-archive-travel-card-min-tablet); min-height: var(--jsxscores-archive-travel-card-min-tablet); max-width: var(--jsxscores-archive-travel-card-max-tablet); max-height: var(--jsxscores-archive-travel-card-max-tablet); } } @media screen and (min-width: 900px) { .archive-view.category-travel .hentry { width: var(--jsxscores-archive-travel-card-size-desktop); height: var(--jsxscores-archive-travel-card-size-desktop); min-width: var(--jsxscores-archive-travel-card-min-desktop); min-height: var(--jsxscores-archive-travel-card-min-desktop); max-width: var(--jsxscores-archive-travel-card-max-desktop); max-height: var(--jsxscores-archive-travel-card-max-desktop); margin: 1em; } } .archive-view.category-travel .hentry .featured-image { position: relative; height: 100%; width: 100%; background-color: #0f172a; } .archive-view.category-travel .hentry .featured-image:hover .post-title { color: var(--jsxscores-archive-travel-card-overlay-text-hover); background: var(--jsxscores-archive-travel-card-overlay-surface-hover); } .archive-view.category-travel .hentry .featured-image .jsx-travel-card__link { display: block; height: 100%; position: relative; width: 100%; overflow: hidden; background-color: inherit; } .archive-view.category-travel .hentry .featured-image .jsx-nextgen-picture { position: absolute; inset: 0; display: block; } .archive-view.category-travel .hentry .featured-image img { position: absolute; left: calc(50% + (var(--jsx-travel-card-pan-x-factor, 0) * 100%)); top: calc(50% + (var(--jsx-travel-card-pan-y-factor, 0) * 100%)); display: block; width: calc((100% * var(--jsx-travel-card-cover-width-factor, 1)) + 2px); height: calc((100% * var(--jsx-travel-card-cover-height-factor, 1)) + 2px); max-width: none; max-height: none; transform: translate(-50%, -50%) scale(calc(var(--jsx-travel-card-scale, 1) * var(--jsx-travel-card-flip-x, 1)), calc(var(--jsx-travel-card-scale, 1) * var(--jsx-travel-card-flip-y, 1))) rotate(var(--jsx-travel-card-rotation, 0deg)); transform-origin: center center; transition: transform 0.18s ease; } .archive-view.category-travel .hentry .featured-image h4 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; pointer-events: none; } .archive-view.category-travel .hentry .featured-image h4 .post-title { display: inline-flex; align-items: center; justify-content: center; font-size: var(--jsxscores-archive-travel-card-title-size); line-height: 1.1; background: black; /* fallback color */ background: var(--jsxscores-archive-travel-card-overlay-surface); color: white; padding: var(--jsxscores-archive-travel-card-title-padding-block) var(--jsxscores-archive-travel-card-title-padding-inline); } .archive-view.category-travel .jsx-travel-card__edit { position: absolute; top: var(--jsxscores-archive-travel-card-edit-offset-block-start); right: var(--jsxscores-archive-travel-card-edit-offset-inline-end); z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: var(--jsxscores-archive-travel-card-edit-size); height: var(--jsxscores-archive-travel-card-edit-size); padding: 0; border: 1px solid var(--jsxscores-archive-travel-card-edit-border); border-radius: 50%; background: var(--jsxscores-archive-travel-card-overlay-surface); color: var(--jsxscores-archive-travel-card-edit-text); line-height: 1; text-decoration: none; backdrop-filter: blur(8px); } .archive-view.category-travel .jsx-travel-card__edit svg { display: block; width: var(--jsxscores-archive-travel-card-edit-icon-size); height: var(--jsxscores-archive-travel-card-edit-icon-size); } .archive-view.category-travel .jsx-travel-card__edit:hover, .archive-view.category-travel .jsx-travel-card__edit:focus-visible { background: var(--jsxscores-archive-travel-card-overlay-surface); color: var(--jsxscores-archive-travel-card-edit-text-hover); } .archive-view.category-travel .page-header, .archive-view.category-travel .jsx-empty-category { width: 100%; text-align: center; } .archive-view.category-travel .page-header { padding: 2.5rem 1.5rem 0; } .archive-view.category-travel .jsx-empty-category { max-width: 480px; margin: 0 auto 3rem; padding: 0 1.5rem; color: var(--jsxscores-archive-travel-empty-color); } } /* Keep this bridge unlayered so it can override plugin-owned auth.css safely. */ /* * Bridge the live jsx-membership auth surface to theme tokens. * * This file intentionally stays unlayered so it can override the plugin-owned * unlayered `sf-auth` stylesheet without specificity hacks. */ .sf-auth { max-width: var(--jsxscores-auth-surface-max-width); margin: var(--jsxscores-auth-surface-margin-block) auto; padding: var(--jsxscores-auth-surface-padding); font-family: var(--jsxscores-font-sans); color: var(--jsxscores-auth-title-color); background: var(--jsxscores-color-surface-light); border-color: var(--jsxscores-auth-surface-border-color); border-radius: var(--jsxscores-auth-surface-radius); box-shadow: var(--jsxscores-auth-surface-shadow); } .sf-auth__title { margin-bottom: var(--jsxscores-auth-title-margin-bottom); font-size: var(--jsxscores-auth-title-size); color: var(--jsxscores-auth-title-color); } .sf-auth__subtitle { margin-bottom: var(--jsxscores-auth-subtitle-margin-bottom); font-size: var(--jsxscores-auth-subtitle-size); color: var(--jsxscores-auth-subtitle-color); } .sf-notice { border-radius: var(--jsxscores-auth-notice-radius); } .sf-notice--error { background: var(--jsxscores-auth-notice-error-bg); color: var(--jsxscores-auth-notice-error-color); } .sf-notice--success { background: var(--jsxscores-auth-notice-success-bg); color: var(--jsxscores-auth-notice-success-color); } :where(.sf-auth) .sf-form label { font-size: var(--jsxscores-auth-label-size); color: var(--jsxscores-auth-label-color); } .sf-auth__divider { margin: var(--jsxscores-auth-divider-margin) 0; } .sf-auth__divider::before, .sf-auth__divider::after { background: var(--jsxscores-auth-surface-border-color); } .sf-auth__divider span { color: var(--jsxscores-auth-divider-text-color); background: var(--jsxscores-color-surface-light); } .sf-auth__footer { color: var(--jsxscores-auth-footer-color); font-size: var(--jsxscores-auth-footer-font-size); } .sf-auth__footer a { color: var(--jsxscores-auth-footer-link-color); font-weight: var(--jsxscores-auth-footer-link-weight); } :where(.sf-auth) .sf-form input[type="email"], :where(.sf-auth) .sf-form input[type="password"], :where(.sf-auth) .sf-form input[type="text"] { padding: var(--jsxscores-auth-control-padding-block) var(--jsxscores-auth-control-padding-inline); border-color: var(--jsxscores-auth-control-border-color); border-radius: var(--jsxscores-auth-control-radius); } :where(.sf-auth) .sf-form input[type="email"]:focus, :where(.sf-auth) .sf-form input[type="password"]:focus, :where(.sf-auth) .sf-form input[type="text"]:focus { outline: none; border-color: var(--jsxscores-auth-control-focus-border-color); box-shadow: var(--jsxscores-auth-control-focus-shadow); } :where(.sf-auth) .sf-button, :where(.sf-modal) .sf-button { border-radius: var(--jsxscores-auth-button-pill-radius); } :where(.sf-auth) .sf-button--primary, :where(.sf-modal) .sf-button--primary { background: var(--jsxscores-auth-button-primary-bg); color: var(--jsxscores-auth-button-primary-color); } :where(.sf-auth) .sf-button--secondary, :where(.sf-modal) .sf-button--secondary { background: var(--jsxscores-auth-button-secondary-bg); color: var(--jsxscores-auth-button-secondary-color); } :where(.sf-auth) .sf-button--secondary, :where(.sf-modal) .sf-button--secondary, :where(.sf-auth) .sf-provider-btn { border-color: var(--jsxscores-auth-control-border-color); } :where(.sf-auth) .sf-provider-btn { border-radius: var(--jsxscores-auth-control-radius); background: var(--jsxscores-auth-button-secondary-bg); color: var(--jsxscores-auth-button-secondary-color); } :where(.sf-auth) .sf-provider-btn:hover, :where(.sf-auth) .sf-provider-btn:focus { transform: translateY(var(--jsxscores-auth-provider-hover-translate-y)); box-shadow: var(--jsxscores-auth-provider-hover-shadow); } :where(.sf-auth) .sf-provider-icon { width: var(--jsxscores-auth-provider-icon-size); height: var(--jsxscores-auth-provider-icon-size); } :where(.sf-auth) .sf-card { border-color: var(--jsxscores-auth-card-shell-border-color); border-radius: var(--jsxscores-auth-card-shell-radius); box-shadow: var(--jsxscores-auth-card-shell-shadow); } :where(.sf-auth) .sf-card--subtle { border-color: var(--jsxscores-auth-card-shell-border-color); background: var(--jsxscores-auth-card-shell-subtle-surface); } :where(.sf-auth) .sf-account__label, :where(.sf-auth) .sf-account__value { color: var(--jsxscores-auth-account-text-color); } :where(.sf-auth) .sf-account__hint { color: var(--jsxscores-auth-account-muted-color); } :where(.sf-auth) .sf-account__danger-text, :where(.sf-auth) .sf-account__confirm { color: var(--jsxscores-auth-account-danger-color); } .sf-account .sf-provider-btn { min-height: var(--jsxscores-auth-button-min-height); border-radius: var(--jsxscores-auth-button-pill-radius); } :where(.sf-auth) .sf-button--ghost, :where(.sf-modal) .sf-button--ghost { color: var(--jsxscores-auth-button-ghost-color); border-color: var(--jsxscores-auth-button-ghost-border-color); } :where(.sf-auth) .sf-button--danger, :where(.sf-modal) .sf-button--danger { background: var(--jsxscores-auth-button-danger-bg); color: var(--jsxscores-auth-button-danger-color); } .sf-modal__backdrop { background: var(--jsxscores-auth-modal-backdrop); } .sf-modal__dialog { border-radius: var(--jsxscores-auth-surface-radius); box-shadow: var(--jsxscores-auth-modal-shadow); } .sf-modal__dialog h3 { font-size: var(--jsxscores-auth-modal-heading-size); } .sf-modal__close { color: var(--jsxscores-auth-account-muted-color); } /* * Keep account-menu summary and action overrides unlayered so they win over * plugin-owned `.sf-card` / `.sf-button` rules without changing the rest of * the cascade model. */ .site-account-menu__trigger[aria-expanded="true"] { background-color: var(--jsxscores-account-menu-trigger-active-surface); } .site-account-menu__summary.sf-card { margin-top: var(--jsxscores-account-menu-summary-margin-top); padding: var(--jsxscores-account-menu-summary-padding); border: 1px solid var(--jsxscores-account-menu-summary-border); border-radius: var(--jsxscores-account-menu-summary-radius); background: var(--jsxscores-account-menu-summary-surface); box-shadow: var(--jsxscores-account-menu-summary-shadow); } .site-account-menu__panel .sf-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--jsxscores-account-menu-action-min-height); padding: var(--jsxscores-account-menu-action-padding-block) var(--jsxscores-account-menu-action-padding-inline); border: 1px solid transparent; border-radius: var(--jsxscores-account-menu-action-radius); font-size: var(--jsxscores-account-menu-action-font-size); font-weight: 600; text-decoration: none; letter-spacing: 0.01em; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .site-account-menu__panel .sf-button--primary { color: var(--jsxscores-color-text-inverse); background: var(--jsxscores-account-menu-action-primary-surface); box-shadow: var(--jsxscores-account-menu-action-primary-shadow); } .site-account-menu__panel .sf-button--secondary { color: var(--jsxscores-auth-account-text-color); background: var(--jsxscores-account-menu-action-secondary-surface); border-color: var(--jsxscores-account-menu-action-secondary-border); box-shadow: var(--jsxscores-account-menu-action-secondary-shadow); } .site-account-menu__panel .sf-button:hover, .site-account-menu__panel .sf-button:focus { transform: translateY(var(--jsxscores-account-menu-action-hover-translate-y)); } .site-account-menu__panel .sf-button--secondary:hover, .site-account-menu__panel .sf-button--secondary:focus { background: var(--jsxscores-account-menu-action-secondary-hover-surface); border-color: var(--jsxscores-account-menu-action-secondary-hover-border); } .site-account-menu__panel .sf-button--primary:hover, .site-account-menu__panel .sf-button--primary:focus { box-shadow: var(--jsxscores-account-menu-action-primary-hover-shadow); }