/**
* JR Hub page components.
*
* Provides the shared Popular navigation, Shop by Character, View All
* Characters and Costume Essentials components for native Elementor-built
* JR Hub pages.
*
* Character-card proportions, lighting, dossier behaviour and hover movement
* are carried from the approved Adult Costumes Hub implementation.
* Elementor-specific selectors exist only where Elementor inserts wrappers
* around images, headings and text.
*
* Shared page primitives such as .jr-page-section, .jr-page-shell and
* .jr-eyebrow remain owned by the global Jedi Theme stylesheets.
*
* Responsive layout:
* - Popular navigation: 4 -> 2 -> 1.
* - Character grid: 4 -> 3 -> 2 -> 1.
* - Costume Essentials: 4 -> 3 -> 2 -> 1.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.0.0
*/
/* ==========================================================================
Component variables
========================================================================== */
body.jr-dark-commerce.jr-page-hub {
--jr-hub-frame: rgba(111, 203, 255, 0.24);
--jr-hub-panel: rgba(8, 14, 22, 0.38);
}
/* ==========================================================================
Popular section
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-section {
padding-top: clamp(1.35rem, 2vw, 1.8rem);
padding-bottom: clamp(1.65rem, 2.2vw, 2rem);
}
/* ==========================================================================
Popular grid
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.7rem, 0.9vw, 0.9rem);
}
/* ==========================================================================
Popular item
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item {
position: relative;
display: grid;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 4.8rem;
grid-template-columns: minmax(0, 1fr) 2.3rem;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 0.75rem 0.95rem 1.15rem;
border:
1px solid
rgba(152, 169, 192, 0.24);
clip-path:
polygon(
0 0,
calc(100% - 0.48rem) 0,
100% 0.48rem,
100% 100%,
0.48rem 100%,
0 calc(100% - 0.48rem)
);
background:
linear-gradient(
135deg,
rgba(111, 203, 255, 0.045) 0%,
transparent 38%
),
linear-gradient(
180deg,
rgba(11, 20, 31, 0.72) 0%,
rgba(6, 12, 20, 0.62) 100%
);
color: var(--jr-text);
text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(210, 235, 248, 0.07),
0 0 0 1px rgba(111, 203, 255, 0.018),
0 0.75rem 1.8rem rgba(0, 0, 0, 0.16);
transform: translateY(0);
transition:
transform 180ms ease,
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item::before,
body.jr-dark-commerce.jr-page-hub
.jr-popular-item::after {
content: none;
}
/* ==========================================================================
Popular title
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__title {
min-width: 0;
margin: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__title
.elementor-heading-title {
margin: 0;
color: #f5f7fa;
font-size:
clamp(
0.94rem,
0.9rem + 0.08vw,
1.04rem
);
font-weight: 720;
letter-spacing: -0.014em;
line-height: 1.2;
}
/* ==========================================================================
Popular arrow
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow {
display: flex;
width: 2.3rem;
height: 100%;
align-items: center;
justify-content: center;
margin: 0;
transform: translateX(0);
transition:
transform 180ms ease;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-widget-container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-heading-title {
margin: 0;
color:
rgba(226, 233, 241, 0.76);
font-size: 1rem;
font-weight: 500;
line-height: 1;
transition:
color 180ms ease;
}
/* ==========================================================================
Character grid
========================================================================== */
/**
* Character navigation grid.
*
* The grid owns only its internal card layout. Width remains owned by the
* existing .jr-page-shell component.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
display: grid;
width: 100%;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap:
clamp(
0.9rem,
1.25vw,
1.25rem
);
padding: 0 0.5rem;
}
/* ==========================================================================
Character card
========================================================================== */
body.jr-dark-commerce.jr-page-hub
a.jr-character-card {
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-width: 0;
padding: 0;
aspect-ratio: 4 / 5;
clip-path:
polygon(
0 0,
calc(100% - 0.8rem) 0,
100% 0.8rem,
100% 100%,
0.8rem 100%,
0 calc(100% - 0.8rem)
);
background:
var(--jr-hub-panel);
color:
var(--jr-text);
text-decoration:
none;
box-shadow:
0 1.25rem 2.7rem
rgba(0, 0, 0, 0.25);
transform:
translateZ(0);
transition:
transform 220ms
cubic-bezier(0.2, 0.75, 0.25, 1),
box-shadow 220ms ease;
}
/* ==========================================================================
Character technical frame
========================================================================== */
body.jr-dark-commerce.jr-page-hub
a.jr-character-card::before {
position: absolute;
z-index: 6;
inset: 0;
pointer-events: none;
background:
none;
box-shadow:
inset 0 0 0 1px
var(--jr-hub-frame);
content: "";
}
/**
* JR Hub Character image systems.
*
* Separates the standard single-character image layout from the special
* four-character View All layout used by JR Hub character cards.
*
* Standard Character cards:
* - One Elementor Image widget fills the complete media stage.
*
* View All Characters:
* - Four Elementor Image widgets share one media stage.
* - Elementor's non-semantic Image widget wrappers are removed from layout.
* - The actual ![]()
elements use the same geometry as the approved original
* View All Characters component.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.0.0
*/
/* ==========================================================================
Standard Character - Elementor Image adapter
========================================================================== */
/**
* IMPORTANT:
*
* These rules apply only to normal Character cards.
* View All Characters must never receive full-stage Image widget sizing.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
}
/* Prevent Elementor Image widget pseudo-elements creating extra layers. */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container::after {
display: none;
content: none;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
img {
position: relative;
z-index: 1;
left: 0;
display: block;
width: 100%;
height: 100%;
padding:
clamp(
0.8rem,
1.1vw,
1.1rem
)
clamp(
0.6rem,
0.9vw,
0.9rem
)
0.35rem;
object-fit: contain;
object-position:
var(
--jr-character-position,
50% 50%
);
filter:
drop-shadow(
0 0.9rem 1rem
rgba(0, 0, 0, 0.46)
)
saturate(1)
contrast(1.02)
brightness(1.03);
transform:
translateY(
var(
--jr-character-y,
0
)
)
scale(
var(
--jr-character-scale,
1.045
)
);
transform-origin:
50% 100%;
transition:
left 320ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/**
* JR Hub - View All Characters.
*
* Recreates the approved four-character ensemble while remaining independent
* of the source image used in each Elementor Image widget.
*
* The original Adult Costumes design supplies the horizontal arrangement:
* 14% / 38% / 62% / 86%.
*
* Unlike the original source, this Elementor adaptation explicitly controls
* each figure's visual dimensions so four identical placeholder images still
* produce the intended small / medium / large / medium hierarchy.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.2.0
*/
/* ==========================================================================
Media stage
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media {
display: block;
}
/* ==========================================================================
Shared ambient halo
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::before {
position: absolute;
z-index: 0;
top: 11%;
right: 2%;
bottom: 5%;
left: 2%;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 58%,
rgba(111, 203, 255, 0.06) 0%,
rgba(111, 203, 255, 0.022) 42%,
transparent 74%
);
content: "";
opacity: 0.5;
transform: scale(0.98);
transition:
opacity 280ms ease,
transform 400ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Shared grounding shadow
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::after {
position: absolute;
z-index: 0;
right: 6%;
bottom: 0.12rem;
left: 6%;
height: 1.25rem;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.18) 48%,
transparent 76%
);
content: "";
opacity: 0.58;
transform: scaleX(0.96);
transition:
opacity 280ms ease,
transform 360ms ease;
}
/* ==========================================================================
Elementor wrapper reset
========================================================================== */
/**
* Elementor adds an Image widget around each actual ![]()
.
*
* Removing those wrapper boxes lets .jr-character-card__media remain the
* containing block for all four absolutely positioned figures.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
.elementor-widget-container {
display: contents;
}
/* ==========================================================================
Shared ensemble artwork
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
img {
position: absolute;
bottom: 0.16rem;
display: block;
margin: 0;
padding: 0;
max-width: none;
max-height: none;
object-fit: contain;
object-position: 50% 100%;
filter:
drop-shadow(
0 0.6rem 0.7rem
rgba(0, 0, 0, 0.4)
);
opacity: 0.94;
transform:
translateX(-50%);
transform-origin:
50% 100%;
transition:
opacity 240ms ease,
transform 380ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Figure 1 - small supporting figure
========================================================================== */
/**
* Target:
* small figure at the far left.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image--one
img {
z-index: 1;
left: 14%;
width: 31%;
height: 34%;
}
/* ==========================================================================
Figure 2 - medium figure
========================================================================== */
/**
* Target:
* substantially larger than figure 1 but secondary to the central figure.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image--two
img {
z-index: 2;
left: 38%;
width: 57%;
height: 62%;
}
/* ==========================================================================
Figure 3 - dominant central figure
========================================================================== */
/**
* Target:
* largest figure in the composition.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image--three
img {
z-index: 3;
left: 62%;
width: 73%;
height: 80%;
}
/* ==========================================================================
Figure 4 - medium supporting figure
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image--four
img {
z-index: 2;
left: 86%;
width: 59%;
height: 64%;
}
/* ==========================================================================
Hover
========================================================================== */
@media (hover: hover) and (pointer: fine) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__media::before {
opacity: 0.82;
transform:
scale(1.035);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__media::after {
opacity: 0.7;
transform:
scaleX(1.06);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image--one
img {
opacity: 1;
transform:
translateX(
calc(-50% - 0.18rem)
)
scale(1.015);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image--two
img,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image--three
img {
opacity: 1;
transform:
translateX(-50%)
translateY(-0.12rem)
scale(1.015);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image--four
img {
opacity: 1;
transform:
translateX(
calc(-50% + 0.18rem)
)
scale(1.015);
}
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
img {
transition: none;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image
img {
transform:
translateX(-50%);
}
}
/* ==========================================================================
Character media stage
========================================================================== */
/**
* The media container remains the sole host for Character-card lighting.
*
* Do not move the lighting to Elementor's Image widget.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media {
position: absolute;
inset:
0
0
4.65rem;
display: flex;
overflow: hidden;
box-sizing: border-box;
width: auto;
height: auto;
min-height: 0;
align-items: flex-end;
justify-content: center;
gap: 0;
margin: 0;
padding: 0;
background:
transparent;
box-shadow:
none;
}
/* ==========================================================================
Character ambient backlight
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::before {
position: absolute;
z-index: 0;
top: 6%;
right: 7%;
bottom: 2%;
left: 7%;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 52%,
rgba(239, 249, 255, 0.24) 0%,
rgba(180, 226, 252, 0.14) 24%,
rgba(111, 203, 255, 0.075) 44%,
rgba(111, 203, 255, 0.02) 58%,
transparent 72%
),
radial-gradient(
ellipse at 50% 96%,
rgba(200, 235, 252, 0.15) 0%,
rgba(111, 203, 255, 0.055) 34%,
transparent 66%
);
filter:
blur(0.22rem);
content: "";
opacity:
0.46;
transform:
scale(0.96);
transition:
opacity 220ms ease,
transform 360ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Character grounding light
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::after {
position: absolute;
z-index: 0;
right: 22%;
bottom: 0.08rem;
left: 22%;
height: 1.35rem;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(214, 240, 253, 0.18) 0%,
rgba(111, 203, 255, 0.07) 30%,
rgba(0, 0, 0, 0.28) 52%,
transparent 76%
);
content: "";
opacity:
0.38;
transform:
scaleX(0.9);
transform-origin:
50% 50%;
transition:
right 320ms
cubic-bezier(0.2, 0.75, 0.25, 1),
opacity 220ms ease,
transform 320ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Elementor image adapter
========================================================================== */
/**
* Original component:
*
* .jr-character-card__media > img
*
* Elementor:
*
* .jr-character-card__media
* > .elementor-widget-image
* > img
*
* Only the wrapper path changes.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background:
transparent;
}
/**
* Prevent duplicate lighting from Elementor widget pseudo-elements.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container::after {
display: none;
content: none;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
.elementor-widget-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
img {
position: relative;
z-index: 1;
left: 0;
display: block;
width: 100%;
height: 100%;
padding:
clamp(
0.8rem,
1.1vw,
1.1rem
)
clamp(
0.6rem,
0.9vw,
0.9rem
)
0.35rem;
object-fit:
contain;
object-position:
var(
--jr-character-position,
50% 50%
);
filter:
drop-shadow(
0 0.9rem 1rem
rgba(0, 0, 0, 0.46)
)
saturate(1)
contrast(1.02)
brightness(1.03);
transform:
translateY(
var(
--jr-character-y,
0
)
)
scale(
var(
--jr-character-scale,
1.045
)
);
transform-origin:
50% 100%;
transition:
left 320ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Character content strip
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__content {
position: absolute;
z-index: 4;
right: 0;
bottom: 0;
left: 0;
display: grid;
box-sizing: border-box;
width: 100%;
height: 4.65rem;
min-height: 4.65rem;
max-height: 4.65rem;
grid-template-columns:
minmax(0, 1fr)
2rem;
align-items:
center;
gap:
0.9rem;
margin:
0;
padding:
0.75rem
clamp(
0.8rem,
1vw,
1rem
)
0.8rem;
border-top:
1px solid
rgba(152, 169, 192, 0.12);
background:
linear-gradient(
135deg,
rgba(111, 203, 255, 0.026),
transparent 42%
),
rgba(6, 11, 17, 0.97);
}
/**
* These Elementor containers have no pseudo-element decoration in the
* original Character card.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__content::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__content::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__text::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__text::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-panel::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-panel::after {
content:
none;
}
/* ==========================================================================
Character text
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__text {
display: flex;
box-sizing: border-box;
width: auto;
height: auto;
min-width: 0;
min-height: 0;
flex-grow: 0;
flex-shrink: 1;
flex-direction: column;
align-self: center;
gap: 0.3rem;
margin: 0;
padding: 0;
background:
transparent;
}
/* ==========================================================================
Character meta
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__meta {
margin:
0;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__meta
.elementor-heading-title {
margin:
0;
color:
rgba(69, 217, 107, 0.82);
font-size:
0.67rem;
font-weight:
750;
letter-spacing:
0.12em;
line-height:
1.2;
text-transform:
uppercase;
}
/* ==========================================================================
Character title
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__title {
min-width:
0;
margin:
0;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__title
.elementor-heading-title {
margin:
0;
color:
#f5f7fa;
font-size:
clamp(
1.12rem,
1.02rem + 0.22vw,
1.34rem
);
font-weight:
740;
letter-spacing:
-0.02em;
line-height:
1.13;
}
/* ==========================================================================
Character arrow
========================================================================== */
/**
* Elementor's Heading glyph sits visually above the centre of its line box.
*
* The widget itself therefore owns the exact 2rem control geometry while the
* generated glyph receives a small optical vertical correction.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow {
position: relative;
display: grid;
box-sizing: border-box;
width: 2rem;
min-width: 2rem;
max-width: 2rem;
height: 2rem;
min-height: 2rem;
max-height: 2rem;
align-self: center;
justify-self: end;
margin: 0;
padding: 0;
overflow: hidden;
place-items: center;
border:
1px solid
var(--jr-border);
background:
rgba(255, 255, 255, 0.018);
transform:
translateX(0);
transition:
border-color 200ms ease,
background 200ms ease,
transform 200ms ease;
}
/**
* Support Elementor markup where the Heading widget retains its standard
* .elementor-widget-container wrapper.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow
.elementor-widget-container {
display: grid;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
place-items: center;
}
/* ==========================================================================
Arrow glyph
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow
.elementor-heading-title {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
color:
var(--jr-text);
font:
inherit;
font-size:
1rem;
font-weight:
500;
letter-spacing:
0;
line-height:
1;
text-align:
center;
text-shadow:
none;
}
/**
* Prevent global heading decorations leaking onto the Arrow widget.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow
.elementor-heading-title::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow
.elementor-heading-title::after {
display:
none;
content:
none;
}
/* ==========================================================================
Character dossier
========================================================================== */
/**
* Visibility prevents Elementor Text Editor content appearing before the
* terminal JavaScript has prepared its typing target.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio {
position: absolute;
z-index: 3;
top: 30%;
left:
clamp(
0.9rem,
1.2vw,
1.2rem
);
display: block;
width:
min(
var(
--jr-character-bio-width,
43%
),
10.5rem
);
height: auto;
margin: 0;
padding: 0;
pointer-events: none;
visibility:
hidden;
opacity:
0;
background:
transparent;
transform:
translate(
-0.55rem,
-50%
);
transition:
opacity 220ms ease,
transform 340ms
cubic-bezier(0.2, 0.75, 0.25, 1),
visibility 0s linear 220ms;
}
/* ==========================================================================
Dossier panel
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-panel {
position: relative;
display: flex;
overflow: hidden;
width: 100%;
height: auto;
flex-direction: column;
gap: 0.42rem;
margin: 0;
padding:
0.78rem
0.78rem
0.76rem;
border-top:
1px solid
rgba(69, 217, 107, 0.16);
border-bottom:
1px solid
rgba(111, 203, 255, 0.09);
background:
linear-gradient(
90deg,
rgba(4, 14, 20, 0.78) 0%,
rgba(4, 13, 20, 0.54) 72%,
transparent 100%
);
box-shadow:
-0.35rem 0 1.8rem
rgba(69, 217, 107, 0.035),
inset 0 0 1.1rem
rgba(111, 203, 255, 0.018);
}
/* ==========================================================================
Dossier ambient light
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio::before {
position: absolute;
z-index: -1;
top: -2.5rem;
right: -3rem;
bottom: -2.5rem;
left: -2rem;
pointer-events: none;
background:
radial-gradient(
ellipse at 30% 50%,
rgba(69, 217, 107, 0.15) 0%,
rgba(69, 217, 107, 0.06) 32%,
rgba(111, 203, 255, 0.028) 52%,
transparent 72%
);
filter:
blur(0.3rem);
content:
"";
}
/* ==========================================================================
Dossier scan line
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio::after {
position: absolute;
z-index: 4;
top: -8%;
left: -1rem;
width:
calc(100% + 2rem);
height:
1px;
pointer-events: none;
background:
linear-gradient(
90deg,
transparent,
rgba(69, 217, 107, 0.7) 24%,
rgba(111, 203, 255, 0.48) 58%,
transparent
);
box-shadow:
0 0 0.45rem
rgba(69, 217, 107, 0.28),
0 0 0.8rem
rgba(111, 203, 255, 0.12);
opacity:
0;
content:
"";
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card.is-dossier-active
.jr-character-card__bio::after {
animation:
jr-character-dossier-scan
920ms
ease-out
90ms
1
both;
}
/* ==========================================================================
Robotic dossier typography
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type
.elementor-heading-title,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type
.elementor-widget-container,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type
p,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type-target {
font-family:
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
monospace;
font-variant-ligatures:
none;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type-target {
position:
relative;
}
/* ==========================================================================
Robotic caret
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type-target.is-typing::after {
display:
inline-block;
width:
0.34em;
height:
0.92em;
margin-left:
0.14em;
background:
var(--jr-green-light);
box-shadow:
0 0 0.4rem
rgba(69, 217, 107, 0.62),
0 0 0.85rem
rgba(69, 217, 107, 0.2);
content:
"";
vertical-align:
-0.08em;
animation:
jr-character-terminal-caret
620ms
steps(1, end)
infinite;
}
/* ==========================================================================
Dossier label
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-label {
min-height:
0.78rem;
margin:
0;
color:
var(--jr-green-light);
font-size:
0.58rem;
font-weight:
780;
letter-spacing:
0.15em;
line-height:
1.2;
text-transform:
uppercase;
text-shadow:
0 0 0.55rem
rgba(69, 217, 107, 0.4),
0 0 1rem
rgba(69, 217, 107, 0.12);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-label
.elementor-heading-title {
margin:
0;
color:
inherit;
font:
inherit;
letter-spacing:
inherit;
line-height:
inherit;
text-transform:
inherit;
}
/* ==========================================================================
Dossier role
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-role {
min-height:
1.08rem;
margin:
0;
color:
#f5f7fa;
font-size:
clamp(
0.88rem,
0.84rem + 0.1vw,
0.98rem
);
font-weight:
700;
letter-spacing:
0.015em;
line-height:
1.15;
text-shadow:
0 0 0.85rem
rgba(111, 203, 255, 0.22),
0 0 1.2rem
rgba(111, 203, 255, 0.08);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-role
.elementor-heading-title {
margin:
0;
color:
inherit;
font:
inherit;
letter-spacing:
inherit;
line-height:
inherit;
}
/* ==========================================================================
Dossier copy
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-copy {
min-height:
3.1rem;
max-width:
16em;
margin:
0;
color:
rgba(226, 233, 241, 0.7);
font-size:
0.66rem;
font-weight:
500;
letter-spacing:
0.01em;
line-height:
1.48;
text-shadow:
0 0 0.8rem
rgba(111, 203, 255, 0.06);
}
/**
* Supports both Elementor Text Editor forms:
*
*
*
* and direct text converted by JavaScript to:
*
* ...
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-copy
.elementor-widget-container,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-copy
p,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-copy
.jr-character-card__bio-type-target {
margin:
0;
color:
inherit;
font:
inherit;
letter-spacing:
inherit;
line-height:
inherit;
}
/* ==========================================================================
Character artwork positions
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--stormtrooper {
--jr-character-position: 50% 44%;
--jr-character-hover-x: 15%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--vader {
--jr-character-position: 72% 42%;
--jr-character-hover-x: 7%;
--jr-character-bio-width: 40%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--anakin {
--jr-character-position: 50% 50%;
--jr-character-scale: 1.08;
--jr-character-y: 0.10rem;
--jr-character-hover-x: 13%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--obi-wan {
--jr-character-position: 52% 35%;
--jr-character-hover-x: 12%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--jawa {
--jr-character-position: 50% 42%;
--jr-character-hover-x: 14%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--tie-pilot {
--jr-character-position: 50% 42%;
--jr-character-hover-x: 13%;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--imperial-officer {
--jr-character-position: 58% 45%;
--jr-character-hover-x: 12%;
}
/**
* JR Hub - View All Characters.
*
* Creates a layered four-character ensemble for the final Character card.
* Each figure receives independent width and height geometry so the intended
* size hierarchy does not depend on the transparent canvas dimensions of the
* source artwork.
*
* Visual hierarchy:
* - Figure 1: small.
* - Figure 2: medium-large.
* - Figure 3: dominant / tallest.
* - Figure 4: medium.
*
* Elementor Image widget wrappers are removed from layout with
* display: contents while retaining the component classes and custom
* properties on those wrappers.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.2.0
*/
/* ==========================================================================
View All stage
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media {
position: absolute;
inset:
0
0
4.65rem;
display: block;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
background:
transparent;
}
/* ==========================================================================
Shared ensemble backlight
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::before {
position: absolute;
z-index: 0;
top: 10%;
right: 2%;
bottom: 4%;
left: 2%;
pointer-events: none;
background:
radial-gradient(
ellipse at 54% 58%,
rgba(239, 249, 255, 0.10) 0%,
rgba(180, 226, 252, 0.06) 28%,
rgba(111, 203, 255, 0.025) 50%,
transparent 74%
);
filter:
blur(0.18rem);
content:
"";
opacity:
0.55;
transform:
scale(0.98);
transition:
opacity 260ms ease,
transform 360ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Shared grounding shadow
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::after {
position: absolute;
z-index: 0;
right: 5%;
bottom: 0.08rem;
left: 5%;
height:
1.3rem;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(214, 240, 253, 0.08) 0%,
rgba(0, 0, 0, 0.38) 44%,
transparent 76%
);
content:
"";
opacity:
0.58;
transform:
scaleX(0.96);
transition:
opacity 260ms ease,
transform 340ms ease;
}
/* ==========================================================================
Elementor wrapper adapter
========================================================================== */
/**
* Elementor puts the ensemble class on the Image widget rather than directly
* on the ![]()
. Removing those wrapper boxes lets the image use the card stage
* as its positioning context.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
.elementor-widget-container {
display:
contents;
}
/* ==========================================================================
Ensemble artwork
========================================================================== */
/**
* Width and height are intentionally independent.
*
* Using one shared 34% x 78% rectangle was the reason all four figures looked
* almost identical in size. Each position now owns a different display box.
*/
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
img {
position: absolute;
z-index:
var(
--jr-ensemble-layer,
1
);
bottom:
var(
--jr-ensemble-bottom,
0.14rem
);
left:
var(
--jr-ensemble-x,
50%
);
display: block;
width:
var(
--jr-ensemble-width,
30%
);
height:
var(
--jr-ensemble-height,
72%
);
max-width:
none;
margin:
0;
padding:
0;
object-fit:
contain;
object-position:
50% 100%;
filter:
drop-shadow(
0 0.65rem 0.72rem
rgba(0, 0, 0, 0.46)
);
opacity:
0.96;
transform:
translateX(-50%)
translateY(
var(
--jr-ensemble-y,
0
)
);
transform-origin:
50% 100%;
transition:
opacity 240ms ease,
transform 360ms
cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Figure 1 - small left
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__ensemble-image--one {
--jr-ensemble-x: 16%;
--jr-ensemble-width: 38%;
--jr-ensemble-height: 64%;
--jr-ensemble-layer: 1;
--jr-ensemble-y: 0.08rem;
}
/* ==========================================================================
Figure 2 - medium-large
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__ensemble-image--two {
--jr-ensemble-x: 39%;
--jr-ensemble-width: 58%;
--jr-ensemble-height: 84%;
--jr-ensemble-layer: 2;
--jr-ensemble-y: 0.03rem;
}
/* ==========================================================================
Figure 3 - dominant centre figure
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__ensemble-image--three {
--jr-ensemble-x: 64%;
--jr-ensemble-width: 72%;
--jr-ensemble-height: 96%;
--jr-ensemble-layer: 3;
--jr-ensemble-y: 0;
}
/* ==========================================================================
Figure 4 - medium right
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__ensemble-image--four {
--jr-ensemble-x: 86%;
--jr-ensemble-width: 48%;
--jr-ensemble-height: 82%;
--jr-ensemble-layer: 2;
--jr-ensemble-y: 0.05rem;
}
/* ==========================================================================
View All hover
========================================================================== */
/**
* The individual characters deliberately remain in place.
*
* The card itself already lifts through the shared Character-card hover.
* Only the shared stage lighting changes here so the ensemble does not become
* visually noisy.
*/
@media (hover: hover) and (pointer: fine) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__media::before {
opacity:
0.78;
transform:
scale(1.025);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__media::after {
opacity:
0.68;
transform:
scaleX(1.04);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all:hover
.jr-character-card__ensemble-image
img {
opacity:
1;
}
}
/* ==========================================================================
View All mobile media split
========================================================================== */
/**
* Matches the 4.35rem mobile content strip used by normal Character cards.
*/
@media (max-width: 767px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media {
inset:
0
0
3.8rem;
}
}
/* ==========================================================================
View All reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__ensemble-image
img {
transition:
none;
}
}
/* ==========================================================================
Desktop hover interactions
========================================================================== */
@media (hover: hover) and (pointer: fine) {
/* ------------------------------------------------------------------
Popular item
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover {
border-color:
rgba(176, 205, 224, 0.38);
background:
linear-gradient(
135deg,
rgba(111, 203, 255, 0.07) 0%,
transparent 40%
),
linear-gradient(
180deg,
rgba(13, 25, 38, 0.88) 0%,
rgba(7, 15, 24, 0.76) 100%
);
box-shadow:
inset 0 1px 0 rgba(210, 235, 248, 0.11),
0 0 0 1px rgba(111, 203, 255, 0.025),
0 1rem 2.3rem rgba(0, 0, 0, 0.24),
0 0 1.4rem rgba(111, 203, 255, 0.035);
transform:
translateY(-0.125rem);
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover
.jr-popular-item__arrow {
transform:
translateX(0.16rem);
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover
.jr-popular-item__arrow
.elementor-heading-title {
color:
var(--jr-green-light);
}
/* ------------------------------------------------------------------
Character card
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:hover {
box-shadow:
0 1.8rem 3.8rem
rgba(0, 0, 0, 0.38);
transform:
translateY(-0.16rem);
}
/* ------------------------------------------------------------------
Dossier
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__bio,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:focus-visible
.jr-character-card__bio {
visibility:
visible;
opacity:
1;
transform:
translate(
0,
-50%
);
transition-delay:
0s;
}
/* ------------------------------------------------------------------
Character backlight
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::before {
opacity:
0.82;
transform:
translateX(4%)
scale(1.08);
}
/* ------------------------------------------------------------------
Grounding light
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::after {
right:
0;
opacity:
0.62;
transform:
translateX(8%)
scaleX(1.04);
}
/* ------------------------------------------------------------------
Character artwork
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media
> .elementor-widget-image
img {
left:
var(
--jr-character-hover-x,
13%
);
}
/* ------------------------------------------------------------------
Character arrow
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:hover
.jr-character-card__arrow {
border-color:
rgba(45, 166, 83, 0.48);
background:
rgba(45, 166, 83, 0.07);
transform:
translateX(0.22rem);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:hover
.jr-character-card__arrow
.elementor-heading-title {
color:
var(--jr-green-light);
}
}
/**
* JR Hub touch-only Character dossier.
*
* Devices without any hover-capable pointing input cannot discover content
* hidden exclusively behind :hover. The Character dossier therefore remains
* visible while the card continues to operate as a normal one-tap
* WooCommerce category link.
*
* Hybrid touchscreen devices that also provide a mouse or trackpad retain
* the normal desktop hover interaction.
*
* @package Jedi_Theme
* @subpackage JR_Hub
*/
@media (any-hover: none) and (any-pointer: coarse) {
/* --------------------------------------------------------------
Keep dossier available
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__bio {
display: block;
visibility: visible;
opacity: 1;
transform:
translate(
0,
-50%
);
transition: none;
}
/* --------------------------------------------------------------
Place artwork in its dossier position permanently
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
img {
left:
var(
--jr-character-hover-x,
13%
);
}
/* --------------------------------------------------------------
Maintain restrained active-stage lighting
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::before {
opacity: 0.82;
transform:
translateX(4%)
scale(1.05);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::after {
right: 0;
opacity: 0.58;
transform:
translateX(8%)
scaleX(1.03);
}
/* --------------------------------------------------------------
Keep normal one-tap feedback
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:active {
box-shadow:
0 1.35rem 2.9rem
rgba(0, 0, 0, 0.34);
transform:
translateY(-0.08rem)
scale(0.995);
}
}
/* ==========================================================================
Keyboard focus
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:focus-visible,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:focus-visible {
outline:
3px solid
var(--jr-blue-light);
outline-offset:
4px;
}
/* ==========================================================================
Dossier animations
========================================================================== */
@keyframes jr-character-dossier-scan {
0% {
top:
-8%;
opacity:
0;
}
14% {
opacity:
0.74;
}
82% {
opacity:
0.32;
}
100% {
top:
108%;
opacity:
0;
}
}
@keyframes jr-character-terminal-caret {
0%,
46% {
opacity:
1;
}
47%,
100% {
opacity:
0;
}
}
/**
* JR Hub character-grid compact desktop layout.
*
* Introduces a three-column state before the existing tablet layout so
* Character dossier cards retain enough horizontal space for readable
* text without shrinking the typography.
*
* @package Jedi_Theme
* @subpackage JR_Hub
*/
@media (min-width: 993px) and (max-width: 1280px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
}
}
/* ==========================================================================
Tablet
========================================================================== */
@media (max-width: 1024px) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
}
}
/**
* JR Hub Character grid tablet sizing.
*
* Keeps the approved Character card, artwork and dossier styling untouched;
* only the grid density changes so each navigation card is physically smaller
* on tablet-sized viewports.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.3.1
*/
@media (min-width: 768px) and (max-width: 992px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap:
0.9rem;
}
body.jr-dark-commerce.jr-page-hub .jr-character-card__bio-role,
body.jr-dark-commerce.jr-page-hub .jr-character-card__bio-label,
body.jr-dark-commerce.jr-page-hub .jr-character-card__bio-copy p
{
font-size: 0.5rem;
}
}
/**
* JR Hub - Compact Character cards on tablet and mobile.
*
* Small-screen Character cards keep the approved compact information strip
* used by Costume Essentials. The dossier is hidden in this shared compact
* baseline, then restored by the dedicated one-column mobile rule below where
* there is enough horizontal room for the approved desktop dossier geometry.
*
* The desktop dossier remains unchanged above 992px.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.3.4
*/
@media (max-width: 992px) {
/* --------------------------------------------------------------
Match Costume Essentials information-strip proportions
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media {
inset:
0
0
4rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__media {
inset:
0
0
4rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__content {
height:
4rem;
min-height:
4rem;
max-height:
4rem;
grid-template-columns:
minmax(0, 1fr)
1.8rem;
gap:
0.65rem;
padding:
0.62rem
0.7rem
0.65rem
0.8rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__text {
align-items:
flex-start;
gap:
0.25rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__meta
.elementor-heading-title {
font-size:
0.58rem;
line-height:
1.15;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__title
.elementor-heading-title {
font-size:
clamp(
0.95rem,
0.88rem + 0.14vw,
1.08rem
);
font-weight:
720;
letter-spacing:
-0.018em;
line-height:
1.12;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow {
width:
1.8rem;
min-width:
1.8rem;
max-width:
1.8rem;
height:
1.8rem;
min-height:
1.8rem;
max-height:
1.8rem;
}
/* --------------------------------------------------------------
Restore the artwork to the complete media stage
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
img,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media
> .elementor-widget-image
img,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:not(.jr-character-card--all):focus-visible
.jr-character-card__media
> .elementor-widget-image
img {
left:
0;
width:
100%;
height:
100%;
padding:
clamp(
0.8rem,
1.1vw,
1.1rem
)
clamp(
0.6rem,
0.9vw,
0.9rem
)
0.35rem;
}
/* --------------------------------------------------------------
Restore neutral stage lighting on small screens
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::before {
opacity:
0.46;
transform:
scale(0.96);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::after {
right:
22%;
left:
22%;
opacity:
0.38;
transform:
scaleX(0.9);
}
}
/* ==========================================================================
Mobile
========================================================================== */
@media (max-width: 767px) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-section {
padding-top:
1.25rem;
padding-bottom:
1.75rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-grid,
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
grid-template-columns:
repeat(
1,
minmax(0, 1fr)
);
gap:
0.75rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item {
min-height:
4.5rem;
padding:
0.8rem
0.6rem
0.8rem
0.9rem;
}
/* ------------------------------------------------------------------
Character media / content split
------------------------------------------------------------------ */
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media {
inset:
0
0
3.8rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__content {
height:
3.8rem;
min-height:
3.8rem;
max-height:
3.8rem;
grid-template-columns:
minmax(0, 1fr)
1.65rem;
gap:
0.65rem;
padding:
0.55rem
0.58rem
0.58rem
0.65rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__title
.elementor-heading-title {
font-size:
clamp(
0.84rem,
4.4vw,
1.98rem
);
font-weight:
720;
letter-spacing:
-0.018em;
line-height:
1.12;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__meta
.elementor-heading-title {
font-size:
0.52rem;
line-height:
1.15;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow {
width:
1.65rem;
min-width:
1.65rem;
max-width:
1.65rem;
height:
1.65rem;
min-height:
1.65rem;
max-height:
1.65rem;
}
}
/**
* JR Hub - Restore Character dossier on one-column mobile cards.
*
* The Character grid is one column at 767px and below, which restores enough
* horizontal room for the approved desktop dossier composition. The dossier
* therefore uses the same left-side position and width rules as desktop while
* the character artwork moves to its existing desktop dossier position.
*
* The dossier is persistent on mobile because hover is not a dependable
* interaction on touch screens. Tablet layouts above 767px keep the dossier
* hidden because their three-column cards remain too narrow.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.4.2
*/
@media (max-width: 767px) {
/* --------------------------------------------------------------
Restore the approved desktop dossier geometry
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__bio,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__bio,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:not(.jr-character-card--all):focus-visible
.jr-character-card__bio {
display: block;
visibility: visible;
opacity: 1;
transform:
translate(
0,
-50%
);
transition: none;
}
/* --------------------------------------------------------------
Restore the desktop dossier artwork position
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media
> .elementor-widget-image
img,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media
> .elementor-widget-image
img,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:not(.jr-character-card--all):focus-visible
.jr-character-card__media
> .elementor-widget-image
img {
left:
var(
--jr-character-hover-x,
13%
);
}
/* --------------------------------------------------------------
Keep the stage lighting aligned with the shifted artwork
-------------------------------------------------------------- */
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::before {
opacity: 0.82;
transform:
translateX(4%)
scale(1.05);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all)
.jr-character-card__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media::after {
right: 0;
left: 22%;
opacity: 0.58;
transform:
translateX(8%)
scaleX(1.03);
}
}
/* ==========================================================================
Narrow mobile
========================================================================== */
@media (max-width: 560px) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-grid {
grid-template-columns:
minmax(0, 1fr);
}
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
gap:
0.85rem;
}
}
/**
* JR Hub - Long Character CTA title on compact mobile cards.
*
* The View All Characters card has a longer navigation label than normal
* Character names. On two-column mobile layouts, give that single CTA a
* slightly tighter information strip and fluid title size so the label stays
* on one line without changing the approved sizing of normal Character cards.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.3.7
*/
@media (max-width: 560px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__content {
grid-template-columns:
minmax(0, 1fr)
1.5rem;
gap:
0.4rem;
padding:
0.5rem
0.5rem
0.52rem
0.55rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__title
.elementor-heading-title {
font-size:
clamp(
0.76rem,
2.7vw,
0.86rem
);
letter-spacing:
-0.022em;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card--all
.jr-character-card__arrow {
width:
1.5rem;
min-width:
1.5rem;
max-width:
1.5rem;
height:
1.5rem;
min-height:
1.5rem;
max-height:
1.5rem;
}
}
/* ==========================================================================
Reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-item,
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__media
img,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__bio-type-target::after,
body.jr-dark-commerce.jr-page-hub
.jr-character-card__arrow {
transition:
none;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover,
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:hover {
transform:
none;
}
body.jr-dark-commerce.jr-page-hub
.jr-character-card:not(.jr-character-card--all):hover
.jr-character-card__media
> .elementor-widget-image
img {
left:
0;
}
}
/**
* JR Hub - Costume Essentials.
*
* Presents WooCommerce costume-category links as compact versions of the
* approved Shop by Character cards. The component keeps the technical frame,
* dark stage, cool lighting, information strip and boxed arrow, but uses a
* shallower accessory-first silhouette, four-column desktop layout and no dossier.
*
* Responsive layout:
* - Desktop: 4 items per row.
* - Tablet: 3 items per row.
* - Mobile: 2 items per row.
* - Very narrow mobile: 1 item per row.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.1.0
*/
/* ==========================================================================
Equipment grid
========================================================================== */
/**
* Keep wrapped Costume Essentials rows aligned to the inline start.
*
* Full rows still occupy the complete available width because the card basis
* calculations account for every horizontal gap. The reduced row gap keeps
* this supporting accessory section visually lighter than Character navigation.
*
* @since 1.5.0
*/
body.jr-dark-commerce.jr-page-hub
.jr-equipment-grid {
display: flex;
box-sizing: border-box;
width: 100%;
flex-flow: row wrap;
align-items: stretch;
justify-content: flex-start;
gap: 1.25rem 1rem;
margin: 0;
padding: 0;
}
/* ==========================================================================
Equipment card
========================================================================== */
/**
* Keep the Character-card visual language while lowering visual priority.
*
* A 5:4 landscape ratio keeps four balanced cards per row but removes the
* oversized square footprint, so accessories read as supporting essentials
* rather than competing with the Character cards above them.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.5.0
*/
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item {
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
box-sizing: border-box;
width: calc((100% - 3rem) / 4);
min-width: 0;
max-width: calc((100% - 3rem) / 4);
flex: 0 0 calc((100% - 3rem) / 4);
aspect-ratio: 5 / 4;
margin: 0;
padding: 0;
border: 0;
clip-path:
polygon(
0 0,
calc(100% - 0.65rem) 0,
100% 0.65rem,
100% 100%,
0.65rem 100%,
0 calc(100% - 0.65rem)
);
background: var(--jr-hub-panel);
color: var(--jr-text);
text-decoration: none;
box-shadow: 0 1.05rem 2.25rem rgba(0, 0, 0, 0.24);
transform: translateZ(0);
transition:
transform 220ms cubic-bezier(0.2, 0.75, 0.25, 1),
box-shadow 220ms ease;
}
/* ==========================================================================
Equipment technical frame
========================================================================== */
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item::before {
position: absolute;
z-index: 6;
inset: 0;
pointer-events: none;
background: none;
box-shadow: inset 0 0 0 1px var(--jr-hub-frame);
content: "";
}
/* ==========================================================================
Equipment media stage
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media {
position: absolute;
inset: 0 0 3.5rem;
display: flex;
overflow: hidden;
box-sizing: border-box;
width: auto;
height: auto;
min-height: 0;
align-items: flex-end;
justify-content: center;
gap: 0;
margin: 0;
padding: 0;
background: transparent;
box-shadow: none;
}
/* ==========================================================================
Equipment ambient backlight
========================================================================== */
/**
* Uses the Character-card light recipe at a slightly lower intensity.
*/
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media::before {
position: absolute;
z-index: 0;
top: 6%;
right: 7%;
bottom: 2%;
left: 7%;
pointer-events: none;
background:
radial-gradient(
ellipse at 50% 52%,
rgba(239, 249, 255, 0.20) 0%,
rgba(180, 226, 252, 0.115) 24%,
rgba(111, 203, 255, 0.06) 44%,
rgba(111, 203, 255, 0.018) 58%,
transparent 72%
),
radial-gradient(
ellipse at 50% 96%,
rgba(200, 235, 252, 0.12) 0%,
rgba(111, 203, 255, 0.045) 34%,
transparent 66%
);
filter: blur(0.2rem);
content: "";
opacity: 0.48;
transform: scale(0.96);
transition:
opacity 220ms ease,
transform 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Equipment grounding light
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media::after {
position: absolute;
z-index: 0;
right: 20%;
bottom: 0.08rem;
left: 20%;
height: 1.15rem;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(214, 240, 253, 0.16) 0%,
rgba(111, 203, 255, 0.06) 30%,
rgba(0, 0, 0, 0.27) 52%,
transparent 76%
);
content: "";
opacity: 0.38;
transform: scaleX(0.9);
transform-origin: 50% 50%;
transition:
opacity 220ms ease,
transform 320ms cubic-bezier(0.2, 0.75, 0.25, 1);
}
/* ==========================================================================
Elementor image adapter
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image::after,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image
.elementor-widget-container::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image
.elementor-widget-container::after {
display: none;
content: none;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image
.elementor-widget-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* ==========================================================================
Equipment artwork
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
> .elementor-widget-image
img {
position: relative;
z-index: 1;
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding:
clamp(0.6rem, 0.8vw, 0.8rem)
clamp(0.5rem, 0.65vw, 0.7rem)
0.25rem;
object-fit: contain;
object-position: var(--jr-equipment-position, 50% 50%);
filter:
drop-shadow(0 0.75rem 0.85rem rgba(0, 0, 0, 0.44))
saturate(1)
contrast(1.025)
brightness(1.04);
transform: none;
transform-origin: 50% 100%;
transition: filter 220ms ease;
}
/* ==========================================================================
Equipment content strip
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__content {
position: absolute;
z-index: 4;
right: 0;
bottom: 0;
left: 0;
display: grid;
box-sizing: border-box;
width: 100%;
height: 3.5rem;
min-height: 3.5rem;
max-height: 3.5rem;
grid-template-columns: minmax(0, 1fr) 1.6rem;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0.5rem 0.6rem 0.52rem 1.2rem;
border-top: 1px solid rgba(152, 169, 192, 0.12);
background:
linear-gradient(
135deg,
rgba(111, 203, 255, 0.026),
transparent 42%
),
rgba(6, 11, 17, 0.97);
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__content::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__content::after,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__text::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__text::after {
content: none;
}
/* ==========================================================================
Equipment text group
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__text {
display: flex;
box-sizing: border-box;
width: auto;
height: auto;
min-width: 0;
min-height: 0;
flex-grow: 0;
flex-shrink: 1;
flex-direction: column;
align-items: flex-start;
align-self: center;
gap: 0;
margin: 0;
padding: 0;
background: transparent;
}
/* ==========================================================================
Equipment meta
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__meta {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__meta
.elementor-heading-title {
margin: 0;
padding: 0;
color: rgba(69, 217, 107, 0.82);
font-size: 0.54rem;
font-weight: 750;
letter-spacing: 0.12em;
line-height: 1.15;
text-transform: uppercase;
}
/* ==========================================================================
Equipment title
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__title {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__title
.elementor-heading-title {
margin: 0;
padding: 0;
color: #f5f7fa;
font-size: clamp(0.88rem, 0.82rem + 0.12vw, 1rem);
font-weight: 720;
letter-spacing: -0.018em;
line-height: 1.12;
}
/* ==========================================================================
Equipment boxed arrow
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow {
position: relative;
display: grid;
box-sizing: border-box;
width: 1.6rem;
min-width: 1.6rem;
max-width: 1.6rem;
height: 1.6rem;
min-height: 1.6rem;
max-height: 1.6rem;
align-self: center;
justify-self: end;
margin: 0;
padding: 0;
overflow: hidden;
place-items: center;
border-color: rgba(45, 166, 83, 0.48);
background: rgba(255, 255, 255, 0.018);
transform: translateX(0);
transition:
border-color 200ms ease,
background 200ms ease,
transform 200ms ease;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow
.elementor-widget-container {
display: grid;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
place-items: center;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow
.elementor-heading-title {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
color: var(--jr-text);
font: inherit;
font-size: 0.86rem;
font-weight: 500;
letter-spacing: 0;
line-height: 1;
text-align: center;
text-shadow: none;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow
.elementor-heading-title::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow
.elementor-heading-title::after {
display: none;
content: none;
}
/* ==========================================================================
Equipment desktop interaction
========================================================================== */
@media (hover: hover) and (pointer: fine) {
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover {
box-shadow: 0 1.45rem 3rem rgba(0, 0, 0, 0.31);
transform: translateY(-0.14rem);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__media::before {
opacity: 0.68;
transform: scale(1.03);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__media::after {
opacity: 0.52;
transform: scaleX(1.02);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__media
> .elementor-widget-image
img {
filter:
drop-shadow(0 0.8rem 0.9rem rgba(0, 0, 0, 0.44))
saturate(1)
contrast(1.03)
brightness(1.06);
transform: none;
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__arrow {
border-color: rgba(45, 166, 83, 0.48);
background: rgba(45, 166, 83, 0.07);
transform: translateX(0.16rem);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__arrow
.elementor-heading-title {
color: var(--jr-green-light);
}
}
/**
* JR Hub - Costume Essentials touch lighting.
*
* Touch-only devices cannot expose the desktop :hover state. Keep the
* approved ambient and grounding light active on devices with no
* hover-capable pointer, while leaving card lift and arrow movement reserved
* for genuine hover interaction.
*
* Hybrid devices with a mouse or trackpad retain the normal desktop hover
* behaviour because any-hover will not be none.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.3.6
*/
@media (any-hover: none) and (any-pointer: coarse) {
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item
.jr-equipment-item__media::before {
opacity: 0.68;
transform: scale(1.03);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item
.jr-equipment-item__media::after {
opacity: 0.52;
transform: scaleX(1.02);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item
.jr-equipment-item__media
> .elementor-widget-image
img {
filter:
drop-shadow(0 0.8rem 0.9rem rgba(0, 0, 0, 0.44))
saturate(1)
contrast(1.03)
brightness(1.06);
}
}
/* ==========================================================================
Equipment keyboard focus
========================================================================== */
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:focus-visible {
outline: 3px solid var(--jr-blue-light);
outline-offset: 4px;
}
/* ==========================================================================
Equipment tablet - 3 columns
========================================================================== */
@media (max-width: 992px) {
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item {
width: calc((100% - 2rem) / 3);
max-width: calc((100% - 2rem) / 3);
flex-basis: calc((100% - 2rem) / 3);
}
body.jr-dark-commerce.jr-page-hub .jr-popular-item {
min-height: 3.8rem;
}
}
/* ==========================================================================
Equipment mobile - 2 columns
========================================================================== */
@media (max-width: 767px) {
body.jr-dark-commerce.jr-page-hub
.jr-equipment-grid {
gap: 0.65rem;
padding: 0 0.5rem;
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item {
width: calc((100% - 0.65rem) / 2);
max-width: calc((100% - 0.65rem) / 2);
flex-basis: calc((100% - 0.65rem) / 2);
aspect-ratio: 1.1 / 1;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media {
inset: 0 0 3.35rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__content {
height: 3.35rem;
min-height: 3.35rem;
max-height: 3.35rem;
grid-template-columns: minmax(0, 1fr) 1.5rem;
gap: 0.45rem;
padding: 0.46rem 0.5rem 0.48rem 0.58rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__meta
.elementor-heading-title {
font-size: 0.48rem;
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__title
.elementor-heading-title {
font-size: clamp(0.8rem, 3.1vw, 0.92rem);
}
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow {
width: 1.5rem;
min-width: 1.5rem;
max-width: 1.5rem;
height: 1.5rem;
min-height: 1.5rem;
max-height: 1.5rem;
}
}
/* ==========================================================================
Very narrow mobile navigation grids - 1 column
========================================================================== */
/**
* JR Hub very narrow mobile navigation layout.
*
* At 380px and below, both Character and Costume Essentials navigation
* switch to one card per row. Wider mobile viewports retain the approved
* two-column layout.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.4.0
*/
@media (max-width: 380px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-grid {
grid-template-columns:
minmax(0, 1fr);
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item {
width: 100%;
max-width: 100%;
flex-basis: 100%;
aspect-ratio: 16 / 9;
}
}
/* ==========================================================================
Equipment reduced motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media::before,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media::after,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__media
img,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__arrow {
transition: none;
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover {
transform: none;
}
body.jr-dark-commerce.jr-page-hub
a.jr-equipment-item:hover
.jr-equipment-item__media
img {
transform: none;
}
}
/**
* Reveal Character dossier for keyboard navigation independently of
* pointing-device capability.
*
* @package Jedi_Theme
* @subpackage JR_Hub
*/
body.jr-dark-commerce.jr-page-hub
a.jr-character-card:not(.jr-character-card--all):focus-visible
.jr-character-card__bio {
visibility: visible;
opacity: 1;
transform:
translate(
0,
-50%
);
transition-delay: 0s;
}
/**
* JR Hub - Hide repeated card eyebrows on compact mobile layouts.
*
* At two-column phone widths, the section heading already supplies the
* navigation context. Removing the repeated SHOP CHARACTER and COSTUME
* ESSENTIAL labels gives the primary category title enough room without
* shrinking typography or increasing card height.
*
* Card geometry, artwork, title sizing and arrow sizing remain unchanged.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.3.9
*/
@media (max-width: 440px) {
body.jr-dark-commerce.jr-page-hub
.jr-character-card__meta,
body.jr-dark-commerce.jr-page-hub
.jr-equipment-item__meta {
display:
none;
}
}
/**
* JR Hub - Popular navigation cards.
*
* Creates compact secondary-navigation tiles that support the richer Hero
* and Character-card systems without competing with them.
*
* Design principles:
* - One thin green-tinted frame only.
* - No inset border or resting shadow.
* - No decorative top rail or corner marker.
* - Plain directional arrow rather than a boxed control.
* - Green strengthens only on interaction.
*
* @package Jedi_Theme
* @subpackage JR_Hub
* @since 1.6.0
*/
/* ==========================================================================
Popular navigation card
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item {
position: relative;
display: grid;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 3.55rem;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: center;
gap: 0.85rem;
margin: 0;
padding:
0.72rem
1rem
0.72rem
1rem;
border:
1px solid
rgba(69, 217, 107, 0.20);
border-radius: 0;
clip-path: none;
background:
linear-gradient(
115deg,
rgba(45, 166, 83, 0.025) 0%,
transparent 30%
),
linear-gradient(
180deg,
rgba(10, 18, 28, 0.72) 0%,
rgba(6, 11, 18, 0.72) 100%
);
color:
var(--jr-text);
text-decoration:
none;
box-shadow:
none;
transform:
translateY(0);
transition:
border-color 180ms ease,
background 180ms ease,
transform 180ms ease;
cursor: pointer;
}
/*
* Remove every decorative pseudo-element from previous Popular-card versions.
*/
body.jr-dark-commerce.jr-page-hub
.jr-popular-item::before,
body.jr-dark-commerce.jr-page-hub
.jr-popular-item::after {
display: none;
content: none;
}
/* ==========================================================================
Popular title
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__title {
min-width: 0;
margin: 0;
padding: 0;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__title
.elementor-heading-title {
margin: 0;
padding: 0;
color:
#f5f7fa;
font-size:
clamp(
0.93rem,
0.9rem + 0.06vw,
1rem
);
font-weight:
700;
letter-spacing:
-0.012em;
line-height:
1.2;
}
/* ==========================================================================
Popular arrow
========================================================================== */
/**
* Keep the arrow intentionally simple.
*
* Popular navigation is secondary UI, so it should not reuse the boxed-arrow
* treatment reserved for richer Character and collection cards.
*/
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow {
display: flex;
width: auto;
min-width: 1.35rem;
height: auto;
min-height: 0;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: 0;
border: 0;
background:
transparent;
box-shadow:
none;
transform:
translateX(0);
transition:
transform 180ms ease;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-widget-container {
display: flex;
width: auto;
height: auto;
align-items: center;
justify-content: flex-end;
margin: 0;
padding: 0;
border: 0;
background:
transparent;
box-shadow:
none;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-heading-title {
display: block;
width: auto;
height: auto;
margin: 0;
padding: 0;
color:
rgba(226, 233, 241, 0.68);
font: inherit;
font-size:
1rem;
font-weight:
500;
letter-spacing:
0;
line-height:
1;
text-shadow:
none;
transition:
color 180ms ease;
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-heading-title::before,
body.jr-dark-commerce.jr-page-hub
.jr-popular-item__arrow
.elementor-heading-title::after {
display: none;
content: none;
}
/* ==========================================================================
Desktop interaction
========================================================================== */
@media (hover: hover) and (pointer: fine) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover {
border-color:
rgba(69, 217, 107, 0.42);
background:
linear-gradient(
115deg,
rgba(45, 166, 83, 0.055) 0%,
transparent 34%
),
linear-gradient(
180deg,
rgba(12, 22, 32, 0.84) 0%,
rgba(7, 14, 22, 0.82) 100%
);
transform:
translateY(-1px);
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover
.jr-popular-item__arrow {
transform:
translateX(0.16rem);
}
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:hover
.jr-popular-item__arrow
.elementor-heading-title {
color:
var(--jr-green-light);
}
}
/* ==========================================================================
Keyboard focus
========================================================================== */
body.jr-dark-commerce.jr-page-hub
.jr-popular-item:focus-visible {
outline:
3px solid
var(--jr-blue-light);
outline-offset:
4px;
}
/* ==========================================================================
Tablet
========================================================================== */
@media (max-width: 1024px) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-item {
min-height:
3.55rem;
}
}
/* ==========================================================================
Mobile
========================================================================== */
@media (max-width: 767px) {
body.jr-dark-commerce.jr-page-hub
.jr-popular-item {
min-height:
3.75rem;
padding:
0.78rem
0.9rem;
}
}