.sjw {
--sjw-font-title: 'avenirnextltpro-bold', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
--sjw-font: 'avenirnextltpro-regu', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
--sjw-ease: cubic-bezier(.16, 1, .3, 1);
width: 100%;
margin: 0 auto;
padding: 2% 0; overflow-x: clip;
} .sjw--classic {
--sjw-accent: #b6870e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #f3ead7;
--sjw-text: #9a7410;
}
.sjw--line {
--sjw-accent: #b6870e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #ffffff;
--sjw-text: #2b2418;
}
.sjw--gold {
--sjw-accent: #b6870e;
--sjw-accent2: #85600b;
--sjw-node-bg: #fbf6ec;
--sjw-text: #ffffff;
}
.sjw--dark {
--sjw-accent: #c99a2e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #4a3219;
--sjw-text: #f3e6c4;
}
.sjw * {
box-sizing: border-box;
}
.sjw-stage {
container-type: inline-size;
position: relative;
width: 100%;
max-width: var(--sjw-max);
aspect-ratio: 1 / 1;
margin: 0 auto;
font-family: var(--sjw-font);
-webkit-tap-highlight-color: transparent;
} .sjw-backdrop,
.sjw-ring,
.sjw-center {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
translate: -50% -50%;
pointer-events: none;
}
.sjw-backdrop {
display: none;
}
.sjw-ring {
width: calc(var(--sjw-r) * var(--sjw-rk, 1) * 2%);
height: calc(var(--sjw-r) * var(--sjw-rk, 1) * 2%);
border: 2px solid var(--sjw-accent);
}
.sjw--line .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 40%, transparent);
}
.sjw--gold .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 55%, transparent);
}
.sjw--dark .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 70%, transparent);
}
.sjw--dark .sjw-backdrop {
display: block;
--w: min(100%, calc((var(--sjw-r) * 2 + var(--sjw-n) + 7) * 1%));
width: var(--w);
height: var(--w);
background: radial-gradient(circle at 50% 35%, #6a4824 0%, #553a1e 50%, #3d2813 100%);
box-shadow: 0 40px 80px -40px rgba(40, 25, 8, .6);
} .sjw-intro,
.sjw-orbit {
position: absolute;
inset: 0;
}
.sjw-orbit,
.sjw-cr-spin {
animation: sjw-spin var(--sjw-speed) linear infinite var(--sjw-dir);
animation-play-state: paused;
}
.sjw-cr-spin {
animation-direction: var(--sjw-cdir);
}
.sjw--static .sjw-orbit,
.sjw--static .sjw-cr-spin {
animation: none;
}
.sjw.is-in .sjw-orbit,
.sjw.is-in .sjw-cr-spin {
animation-play-state: running;
}
.sjw--pause .sjw-stage:hover .sjw-orbit,
.sjw--pause .sjw-stage:hover .sjw-cr-spin,
.sjw--pause .sjw-stage:focus-within .sjw-orbit,
.sjw--pause .sjw-stage:focus-within .sjw-cr-spin,
.sjw.is-off .sjw-orbit,
.sjw.is-off .sjw-cr-spin {
animation-play-state: paused;
}
.sjw-slot {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
z-index: 2;
transform: rotate(calc(var(--a) + var(--sjw-start))) translateX(calc(var(--sjw-r) * var(--sjw-rk, 1) * 1cqw));
}
.sjw-node {
position: absolute;
width: calc(var(--sjw-n) * 1cqw);
height: calc(var(--sjw-n) * 1cqw);
left: calc(var(--sjw-n) * -.5cqw);
top: calc(var(--sjw-n) * -.5cqw);
display: block;
border-radius: 50%;
color: var(--sjw-text);
text-decoration: none !important;
outline: none;
}
.sjw-cr-intro,
.sjw-cr-spin,
.sjw-cr-static {
display: block;
width: 100%;
height: 100%;
}
.sjw-cr-static {
transform: rotate(calc(-1 * (var(--a) + var(--sjw-start))));
}
.sjw-face {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: calc(var(--sjw-n) * .03cqw);
padding: 12%;
border-radius: 50%;
text-align: center;
color: var(--sjw-text);
overflow: hidden;
transition: transform .5s var(--sjw-ease), color .35s ease, border-color .35s ease, box-shadow .5s var(--sjw-ease), filter .35s ease;
} .sjw-face::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
opacity: 0;
transition: opacity .4s ease;
z-index: 0;
}
.sjw-face > * {
position: relative;
z-index: 1;
} .sjw--classic .sjw-face {
background: linear-gradient(145deg, #fffdf8 0%, var(--sjw-node-bg) 100%);
border: 2px solid var(--sjw-accent);
box-shadow: 0 14px 30px -20px rgba(80, 55, 10, .45);
}
.sjw--classic .sjw-face::before,
.sjw--dark .sjw-face::before {
background: linear-gradient(150deg, color-mix(in srgb, var(--sjw-accent) 75%, #fff) 0%, var(--sjw-accent) 50%, var(--sjw-accent2) 100%);
} .sjw--line .sjw-face {
background: var(--sjw-node-bg);
border: 1px solid color-mix(in srgb, var(--sjw-accent) 35%, transparent);
box-shadow: 0 22px 44px -26px rgba(60, 40, 0, .3);
} .sjw--gold .sjw-face {
background: linear-gradient(150deg, color-mix(in srgb, var(--sjw-accent) 70%, #fff) 0%, var(--sjw-accent) 50%, var(--sjw-accent2) 100%);
box-shadow: 0 20px 36px -18px color-mix(in srgb, var(--sjw-accent2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sjw--gold .sjw-face::before {
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 60%);
} .sjw--dark .sjw-face {
background: var(--sjw-node-bg);
border: 1.5px solid var(--sjw-accent);
box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .55);
} .sjw-icon {
width: calc(var(--sjw-n) * .2cqw);
height: calc(var(--sjw-n) * .2cqw);
flex: none;
color: var(--sjw-accent);
transition: color .35s ease, transform .5s var(--sjw-ease);
}
.sjw--gold .sjw-icon {
color: #fff;
}
.sjw--dark .sjw-icon {
color: color-mix(in srgb, var(--sjw-accent) 80%, #fff);
}
.sjw-icon--img {
object-fit: contain;
}
.sjw-title {
font-family: var(--sjw-font-title);
font-weight: 700;
font-size: clamp(10px, calc(var(--sjw-n) * .068cqw), 17px);
line-height: 1.2;
letter-spacing: .04em;
text-transform: uppercase;
color: inherit;
max-width: 100%;
transition: transform .5s var(--sjw-ease), color .35s ease;
}
.sjw--line .sjw-title {
font-weight: 600;
font-size: clamp(9px, calc(var(--sjw-n) * .058cqw), 15px);
letter-spacing: .14em;
line-height: 1.45;
} .sjw--line .sjw-title::after {
content: '';
display: block;
width: 18%;
height: 1px;
margin: .7em auto 0;
background: var(--sjw-accent);
transition: width .5s var(--sjw-ease);
}
.sjw-more {
position: absolute !important;
left: 0;
right: 0;
bottom: 14%;
font-size: clamp(8px, calc(var(--sjw-n) * .042cqw), 11px);
letter-spacing: .14em;
text-transform: uppercase;
line-height: 1;
opacity: 0;
transform: translateY(5px);
transition: opacity .35s ease, transform .5s var(--sjw-ease);
} .sjw-node:hover .sjw-face,
.sjw-node:focus-visible .sjw-face {
transform: scale(1.07);
}
.sjw-node:hover .sjw-face::before,
.sjw-node:focus-visible .sjw-face::before {
opacity: 1;
}
.sjw--classic .sjw-node:hover .sjw-face,
.sjw--dark .sjw-node:hover .sjw-face,
.sjw--classic .sjw-node:focus-visible .sjw-face,
.sjw--dark .sjw-node:focus-visible .sjw-face {
color: #fff;
}
.sjw--classic .sjw-node:hover .sjw-icon,
.sjw--dark .sjw-node:hover .sjw-icon,
.sjw--classic .sjw-node:focus-visible .sjw-icon,
.sjw--dark .sjw-node:focus-visible .sjw-icon {
color: #fff;
}
.sjw--line .sjw-node:hover .sjw-face,
.sjw--line .sjw-node:focus-visible .sjw-face {
border-color: var(--sjw-accent);
box-shadow: 0 26px 50px -24px rgba(60, 40, 0, .38);
}
.sjw--line .sjw-node:hover .sjw-title,
.sjw--line .sjw-node:focus-visible .sjw-title {
color: var(--sjw-accent2);
}
.sjw--line .sjw-node:hover .sjw-title::after,
.sjw--line .sjw-node:focus-visible .sjw-title::after {
width: 46%;
}
.sjw--gold .sjw-node:hover .sjw-face,
.sjw--gold .sjw-node:focus-visible .sjw-face {
filter: brightness(1.06);
}
a.sjw-node:hover .sjw-icon,
a.sjw-node:focus-visible .sjw-icon,
a.sjw-node:hover .sjw-title,
a.sjw-node:focus-visible .sjw-title {
transform: translateY(-12%);
}
.sjw-node:hover .sjw-more,
.sjw-node:focus-visible .sjw-more {
opacity: .9;
transform: none;
} .sjw-center {
width: calc(var(--sjw-c) * 1%);
height: calc(var(--sjw-c) * 1%);
z-index: 3;
}
.sjw-center-disc {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5%;
padding: 17%;
}
.sjw--classic .sjw-center-disc {
padding: 4%;
}
.sjw--line .sjw-center-disc {
background: #fff;
border: 1px solid color-mix(in srgb, var(--sjw-accent) 30%, transparent);
box-shadow: 0 30px 60px -34px rgba(60, 40, 0, .35);
}
.sjw--gold .sjw-center-disc {
background: var(--sjw-node-bg);
border: 1px solid color-mix(in srgb, var(--sjw-accent) 40%, transparent);
box-shadow: 0 30px 60px -34px rgba(60, 40, 0, .35);
}
.sjw--dark .sjw-center-disc {
background: #f7efdc;
border: 1.5px solid var(--sjw-accent);
box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
} .sjw .sjw-center-disc img.sjw-logo {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
.sjw-center-text {
font-size: clamp(9px, calc(var(--sjw-c) * .04cqw), 14px);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--sjw-accent);
text-align: center;
} .sjw-intro,
.sjw-cr-intro,
.sjw-center,
.sjw-ring,
.sjw-backdrop {
transition: transform var(--sjw-dur) var(--sjw-ease), opacity calc(var(--sjw-dur) * .6) ease, scale var(--sjw-dur) var(--sjw-ease);
}
.sjw-slot {
transition: transform var(--sjw-dur) var(--sjw-ease), opacity calc(var(--sjw-dur) * .5) ease;
transition-delay: calc(var(--i) * 110ms + var(--sjw-dur) * .15);
} .sjw--in-unfold:not(.is-in) .sjw-slot {
transform: rotate(calc(var(--a) + var(--sjw-start))) translateX(0) scale(.3);
opacity: 0;
}
.sjw--in-unfold:not(.is-in) .sjw-intro {
transform: rotate(-30deg);
}
.sjw--in-unfold:not(.is-in) .sjw-cr-intro {
transform: rotate(30deg);
}
.sjw--in-unfold:not(.is-in) .sjw-ring,
.sjw--in-unfold:not(.is-in) .sjw-backdrop {
scale: .6;
opacity: 0;
}
.sjw--in-unfold:not(.is-in) .sjw-center,
.sjw--in-spin:not(.is-in) .sjw-center {
scale: .7;
opacity: 0;
} .sjw--in-spin:not(.is-in) .sjw-intro {
transform: rotate(-180deg);
opacity: 0;
}
.sjw--in-spin:not(.is-in) .sjw-cr-intro {
transform: rotate(180deg) scale(.5);
}
.sjw--in-spin:not(.is-in) .sjw-ring,
.sjw--in-spin:not(.is-in) .sjw-backdrop {
opacity: 0;
} .sjw--in-zoom .sjw-stage {
transition: transform var(--sjw-dur) var(--sjw-ease), opacity calc(var(--sjw-dur) * .6) ease;
}
.sjw--in-zoom:not(.is-in) .sjw-stage {
transform: scale(.75);
opacity: 0;
} .sjw--in-fade .sjw-stage {
transition: opacity var(--sjw-dur) ease;
}
.sjw--in-fade:not(.is-in) .sjw-stage {
opacity: 0;
}
.sjw--in-none .sjw-slot {
transition-delay: 0s;
} .sjw--editorial,
.sjw--arcs,
.sjw--soft,
.sjw--seal,
.sjw--photo,
.sjw--pill {
--sjw-accent: #b6870e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #ffffff;
--sjw-text: #2b2418;
}
.sjw--soft {
--sjw-node-bg: #f4ecdc;
--sjw-text: #4a3219;
}
.sjw--seal {
--sjw-text: #8a6510;
}
.sjw--photo {
--sjw-text: #ffffff;
} .sjw--arcs .sjw-center-disc,
.sjw--soft .sjw-center-disc,
.sjw--photo .sjw-center-disc,
.sjw--pill .sjw-center-disc {
background: #fff;
box-shadow: 0 30px 60px -32px rgba(60, 40, 0, .35);
}
.sjw--arcs .sjw-center-disc,
.sjw--photo .sjw-center-disc,
.sjw--pill .sjw-center-disc {
border: 1px solid color-mix(in srgb, var(--sjw-accent) 30%, transparent);
}
.sjw--editorial .sjw-center-disc {
padding: 6%;
} .sjw--editorial .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 45%, transparent);
}
.sjw--editorial .sjw-face {
overflow: visible;
justify-content: flex-start;
padding: calc(50% + 16px) 0 0;
background: none;
border: 0;
box-shadow: none;
}
.sjw--editorial .sjw-face::before {
content: '';
inset: auto;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
opacity: 1;
background: var(--sjw-accent);
box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--sjw-accent) 45%, transparent);
transition: transform .45s var(--sjw-ease), box-shadow .45s var(--sjw-ease);
}
.sjw--editorial .sjw-icon {
display: none;
}
.sjw--editorial .sjw-title {
font-size: clamp(11px, calc(var(--sjw-n) * .075cqw), 18px);
letter-spacing: .12em;
line-height: 1.35;
padding: .35em .6em;
background: #fff;
white-space: nowrap;
}
.sjw--editorial .sjw-more {
display: none;
}
.sjw--editorial .sjw-node:hover .sjw-face,
.sjw--editorial .sjw-node:focus-visible .sjw-face {
transform: none;
}
.sjw--editorial .sjw-node:hover .sjw-face::before,
.sjw--editorial .sjw-node:focus-visible .sjw-face::before {
transform: scale(1.5);
box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--sjw-accent);
}
.sjw--editorial a.sjw-node:hover .sjw-title,
.sjw--editorial a.sjw-node:focus-visible .sjw-title {
transform: none;
color: var(--sjw-accent2);
} .sjw--arcs .sjw-ring {
display: none;
}
.sjw-arcs {
position: absolute;
top: 50%;
left: 50%;
width: calc(var(--sjw-r) * 2%);
height: calc(var(--sjw-r) * 2%);
translate: -50% -50%;
border-radius: 50%;
pointer-events: none;
--seg: calc(360deg / var(--sjw-count, 4));
--gap: 22deg;
background: repeating-conic-gradient(
from calc(var(--sjw-start) + 90deg),
transparent 0 var(--gap),
var(--sjw-accent) var(--gap) calc(var(--seg) - var(--gap)),
transparent calc(var(--seg) - var(--gap)) var(--seg)
);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
transition: opacity var(--sjw-dur) ease;
}
.sjw--in-unfold:not(.is-in) .sjw-arcs,
.sjw--in-spin:not(.is-in) .sjw-arcs {
opacity: 0;
}
.sjw--arcs .sjw-face {
background: var(--sjw-node-bg);
border: 1.5px solid var(--sjw-accent);
box-shadow: 0 16px 32px -20px rgba(60, 40, 0, .4);
}
.sjw--arcs .sjw-face::before,
.sjw--seal .sjw-face::before,
.sjw--pill .sjw-face::before {
background: linear-gradient(150deg, color-mix(in srgb, var(--sjw-accent) 75%, #fff) 0%, var(--sjw-accent) 50%, var(--sjw-accent2) 100%);
}
.sjw--arcs .sjw-node:hover .sjw-face,
.sjw--seal .sjw-node:hover .sjw-face,
.sjw--pill .sjw-node:hover .sjw-face,
.sjw--arcs .sjw-node:focus-visible .sjw-face,
.sjw--seal .sjw-node:focus-visible .sjw-face,
.sjw--pill .sjw-node:focus-visible .sjw-face,
.sjw--arcs .sjw-node:hover .sjw-icon,
.sjw--seal .sjw-node:hover .sjw-icon,
.sjw--pill .sjw-node:hover .sjw-icon {
color: #fff;
} .sjw--soft .sjw-backdrop {
display: block;
--w: min(100%, calc((var(--sjw-r) * 2 + var(--sjw-n) + 8) * 1%));
width: var(--w);
height: var(--w);
background: radial-gradient(circle at 50% 40%, #faf5ea 0%, var(--sjw-node-bg) 70%);
}
.sjw--soft .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 25%, transparent);
}
.sjw--soft .sjw-face {
background: #fff;
box-shadow: 0 22px 40px -22px rgba(110, 80, 20, .45), 0 2px 6px rgba(110, 80, 20, .06);
}
.sjw--soft .sjw-face::before {
background: radial-gradient(circle, #fff 0%, #fbf6ea 100%);
}
.sjw--soft .sjw-node:hover .sjw-face,
.sjw--soft .sjw-node:focus-visible .sjw-face {
box-shadow: 0 30px 50px -22px rgba(110, 80, 20, .55);
}
.sjw--soft .sjw-node:hover .sjw-title,
.sjw--soft .sjw-node:focus-visible .sjw-title {
color: var(--sjw-accent2);
} .sjw--seal .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 60%, transparent);
}
.sjw--seal .sjw-ring::after {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--sjw-accent) 30%, transparent);
}
.sjw--seal .sjw-face {
background: #fff;
border: 1px solid var(--sjw-accent);
box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px color-mix(in srgb, var(--sjw-accent) 45%, transparent);
}
.sjw--seal .sjw-center-disc {
background: #fff;
border: 1px solid var(--sjw-accent);
box-shadow: inset 0 0 0 7px #fff, inset 0 0 0 8px color-mix(in srgb, var(--sjw-accent) 40%, transparent);
}
.sjw--seal .sjw-title {
letter-spacing: .1em;
} .sjw--photo .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 50%, transparent);
}
.sjw--photo .sjw-face {
background:
linear-gradient(180deg, rgba(40, 26, 8, .15) 0%, rgba(40, 26, 8, .72) 100%),
var(--sjw-photo, none) center / cover,
#4a3219;
border: 3px solid #fff;
box-shadow: 0 20px 40px -18px rgba(40, 26, 8, .6), 0 0 0 1px color-mix(in srgb, var(--sjw-accent) 50%, transparent);
justify-content: flex-end;
padding-bottom: 20%;
}
.sjw--photo .sjw-face::before {
background: linear-gradient(180deg, color-mix(in srgb, var(--sjw-accent) 55%, transparent) 0%, color-mix(in srgb, var(--sjw-accent2) 92%, transparent) 100%);
}
.sjw--photo .sjw-icon {
display: none;
}
.sjw--photo .sjw-title {
text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.sjw--photo .sjw-more {
bottom: 9%;
} .sjw--pill {
--sjw-rk: .86;
}
.sjw--pill .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 40%, transparent);
}
.sjw--pill .sjw-node {
width: calc(var(--sjw-n) * 1.25cqw);
height: calc(var(--sjw-n) * .42cqw);
left: calc(var(--sjw-n) * -.625cqw);
top: calc(var(--sjw-n) * -.21cqw);
border-radius: 999px;
}
.sjw--pill .sjw-face {
flex-direction: row;
justify-content: flex-start;
gap: 8%;
padding: 0 9% 0 6%;
border-radius: 999px;
text-align: left;
background: #fff;
border: 1px solid color-mix(in srgb, var(--sjw-accent) 35%, transparent);
box-shadow: 0 16px 30px -18px rgba(60, 40, 0, .4);
}
.sjw--pill .sjw-face::before {
border-radius: 999px;
}
.sjw--pill .sjw-icon {
width: calc(var(--sjw-n) * .17cqw);
height: calc(var(--sjw-n) * .17cqw);
}
.sjw--pill .sjw-title {
font-size: clamp(9px, calc(var(--sjw-n) * .058cqw), 15px);
line-height: 1.25;
}
.sjw--pill .sjw-more {
display: none;
}
.sjw--pill a.sjw-node:hover .sjw-icon,
.sjw--pill a.sjw-node:hover .sjw-title,
.sjw--pill a.sjw-node:focus-visible .sjw-icon,
.sjw--pill a.sjw-node:focus-visible .sjw-title {
transform: none;
} .sjw--arcseal,
.sjw--arcdouble,
.sjw--medal,
.sjw--sealcream,
.sjw--arcfade {
--sjw-accent: #b6870e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #ffffff;
--sjw-text: #8a6510;
--sjw-a45: color-mix(in srgb, var(--sjw-accent) 45%, transparent);
}
.sjw--sealcream {
--sjw-node-bg: #f8f1e3;
--sjw-text: #6e500c;
} .sjw--arcseal .sjw-ring,
.sjw--arcdouble .sjw-ring,
.sjw--medal .sjw-ring,
.sjw--arcfade .sjw-ring {
display: none;
} .sjw--arcdouble .sjw-arcs {
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px) calc(100% - 9px), transparent calc(100% - 9px) calc(100% - 4px), #000 calc(100% - 4px));
mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 10px) calc(100% - 9px), transparent calc(100% - 9px) calc(100% - 4px), #000 calc(100% - 4px));
} .sjw--arcfade .sjw-arcs {
background: repeating-conic-gradient(
from calc(var(--sjw-start) + 90deg),
transparent 0 var(--gap),
var(--sjw-accent) calc(var(--seg) / 2),
transparent calc(var(--seg) - var(--gap)) var(--seg)
);
} .sjw--arcseal .sjw-face,
.sjw--sealcream .sjw-face,
.sjw--arcfade .sjw-face {
background: var(--sjw-node-bg);
border: 1px solid var(--sjw-accent);
box-shadow: inset 0 0 0 5px var(--sjw-node-bg), inset 0 0 0 6px var(--sjw-a45), 0 16px 32px -22px rgba(60, 40, 0, .35);
} .sjw--arcdouble .sjw-face {
background: #fff;
border: 1.5px solid var(--sjw-accent);
box-shadow: 0 16px 32px -20px rgba(60, 40, 0, .4);
} .sjw--medal .sjw-face {
background: #fff;
border: 4px solid var(--sjw-accent);
box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--sjw-a45), 0 18px 34px -20px rgba(60, 40, 0, .45);
} .sjw--arcseal .sjw-center-disc,
.sjw--arcfade .sjw-center-disc,
.sjw--sealcream .sjw-center-disc {
background: var(--sjw-node-bg);
border: 1px solid var(--sjw-accent);
box-shadow: inset 0 0 0 7px var(--sjw-node-bg), inset 0 0 0 8px var(--sjw-a45), 0 30px 60px -34px rgba(60, 40, 0, .35);
}
.sjw--arcdouble .sjw-center-disc {
background: #fff;
border: 1px solid var(--sjw-a45);
box-shadow: 0 30px 60px -32px rgba(60, 40, 0, .35);
}
.sjw--medal .sjw-center-disc {
background: #fff;
border: 4px solid var(--sjw-accent);
box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px var(--sjw-a45), 0 30px 60px -32px rgba(60, 40, 0, .4);
} .sjw--sealcream .sjw-ring {
border-width: 1px;
border-color: var(--sjw-accent);
}
.sjw--sealcream .sjw-ring::after {
content: '';
position: absolute;
inset: 7px;
border-radius: 50%;
border: 1px solid var(--sjw-a45);
}
.sjw--arcseal .sjw-title,
.sjw--sealcream .sjw-title,
.sjw--arcfade .sjw-title,
.sjw--medal .sjw-title {
letter-spacing: .1em;
} .sjw--arcseal .sjw-face::before,
.sjw--arcdouble .sjw-face::before,
.sjw--medal .sjw-face::before,
.sjw--sealcream .sjw-face::before,
.sjw--arcfade .sjw-face::before {
background: linear-gradient(150deg, color-mix(in srgb, var(--sjw-accent) 75%, #fff) 0%, var(--sjw-accent) 50%, var(--sjw-accent2) 100%);
}
.sjw--arcseal .sjw-node:hover .sjw-face,
.sjw--arcdouble .sjw-node:hover .sjw-face,
.sjw--medal .sjw-node:hover .sjw-face,
.sjw--sealcream .sjw-node:hover .sjw-face,
.sjw--arcfade .sjw-node:hover .sjw-face,
.sjw--arcseal .sjw-node:focus-visible .sjw-face,
.sjw--arcdouble .sjw-node:focus-visible .sjw-face,
.sjw--medal .sjw-node:focus-visible .sjw-face,
.sjw--sealcream .sjw-node:focus-visible .sjw-face,
.sjw--arcfade .sjw-node:focus-visible .sjw-face,
.sjw--arcseal .sjw-node:hover .sjw-icon,
.sjw--arcdouble .sjw-node:hover .sjw-icon,
.sjw--medal .sjw-node:hover .sjw-icon,
.sjw--sealcream .sjw-node:hover .sjw-icon,
.sjw--arcfade .sjw-node:hover .sjw-icon {
color: #fff;
} @container (max-width: 520px) {
.sjw-stage > * {
--sjw-n: 30;
--sjw-r: 34;
--sjw-c: 31;
}
.sjw-more {
display: none;
}
.sjw-face {
padding: 9%;
gap: 3px;
}
.sjw-icon {
width: 6cqw;
height: 6cqw;
}
.sjw-title,
.sjw--line .sjw-title {
font-size: clamp(8.5px, 2.6cqw, 12px);
letter-spacing: .02em;
}
.sjw--line .sjw-title::after {
display: none;
}
a.sjw-node:hover .sjw-icon,
a.sjw-node:hover .sjw-title {
transform: none;
}
} .sjw-node:focus-visible .sjw-face {
outline: 2px solid var(--sjw-accent2);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.sjw-orbit,
.sjw-cr-spin {
animation: none !important;
}
.sjw *,
.sjw-stage {
transition-duration: .01ms !important;
transition-delay: 0s !important;
}
}
@keyframes sjw-spin {
to {
transform: rotate(360deg);
}
} .sjw--modern,
.sjw--airy,
.sjw--dots {
--sjw-accent: #b6870e;
--sjw-accent2: #8a6510;
--sjw-node-bg: #ffffff;
--sjw-text: #634a11;
}
.sjw--airy {
--sjw-node-bg: #f8f2e6;
} .sjw--modern .sjw-title,
.sjw--airy .sjw-title,
.sjw--dots .sjw-title {
font-family: var(--sjw-font);
font-weight: 400;
font-size: clamp(11px, calc(var(--sjw-n) * .1cqw), 18px);
line-height: 1.25;
letter-spacing: .01em;
text-transform: none;
}
.sjw--modern .sjw-more,
.sjw--airy .sjw-more,
.sjw--dots .sjw-more {
text-transform: none;
letter-spacing: .02em;
}
.sjw--modern .sjw-icon,
.sjw--airy .sjw-icon {
width: calc(var(--sjw-n) * .16cqw);
height: calc(var(--sjw-n) * .16cqw);
} .sjw--modern .sjw-ring {
display: none;
}
.sjw--modern .sjw-arcs {
background: repeating-conic-gradient(
from calc(var(--sjw-start) + 90deg),
transparent 0 var(--gap),
var(--sjw-accent) calc(var(--seg) / 2),
transparent calc(var(--seg) - var(--gap)) var(--seg)
);
opacity: .8;
}
.sjw--modern .sjw-face {
background: var(--sjw-node-bg);
border: 1px solid color-mix(in srgb, var(--sjw-accent) 55%, transparent);
box-shadow: 0 18px 40px -26px rgba(60, 40, 0, .35);
} .sjw--airy .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 35%, transparent);
}
.sjw--airy .sjw-face {
background: var(--sjw-node-bg);
box-shadow: 0 22px 44px -30px rgba(60, 40, 0, .4);
} .sjw--modern .sjw-face::before,
.sjw--airy .sjw-face::before {
background: linear-gradient(150deg, color-mix(in srgb, var(--sjw-accent) 78%, #fff) 0%, var(--sjw-accent) 55%, var(--sjw-accent2) 100%);
}
.sjw--modern .sjw-node:hover .sjw-face,
.sjw--modern .sjw-node:focus-visible .sjw-face,
.sjw--airy .sjw-node:hover .sjw-face,
.sjw--airy .sjw-node:focus-visible .sjw-face,
.sjw--modern .sjw-node:hover .sjw-icon,
.sjw--airy .sjw-node:hover .sjw-icon {
color: #fff;
} .sjw--modern .sjw-center-disc,
.sjw--airy .sjw-center-disc,
.sjw--dots .sjw-center-disc {
background: #fff;
border: 1px solid color-mix(in srgb, var(--sjw-accent) 40%, transparent);
box-shadow: 0 30px 60px -36px rgba(60, 40, 0, .35);
}
.sjw--airy .sjw-center-disc {
border-color: transparent;
} .sjw--dots .sjw-ring {
border-width: 1px;
border-color: color-mix(in srgb, var(--sjw-accent) 45%, transparent);
}
.sjw--dots .sjw-face {
background: none;
border: 0;
box-shadow: none;
overflow: visible;
padding: 0;
}
.sjw--dots .sjw-face::before {
display: none;
}
.sjw--dots .sjw-face::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
background: var(--sjw-accent);
box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--sjw-accent) 35%, transparent);
transition: transform .5s var(--sjw-ease), box-shadow .35s ease;
}
.sjw--dots .sjw-icon,
.sjw--dots .sjw-more {
display: none;
}
.sjw--dots .sjw-title {
position: absolute;
top: calc(50% + 18px);
left: 50%;
translate: -50% 0;
width: max-content;
max-width: 150%;
padding: 2px 8px;
border-radius: 4px;
background: #fff;
font-size: clamp(12px, calc(var(--sjw-n) * .08cqw), 19px);
}
.sjw--dots .sjw-node:hover .sjw-face,
.sjw--dots .sjw-node:focus-visible .sjw-face {
transform: none;
}
.sjw--dots .sjw-node:hover .sjw-face::after,
.sjw--dots .sjw-node:focus-visible .sjw-face::after {
transform: scale(1.35);
box-shadow: 0 0 0 5px #fff, 0 0 0 6px var(--sjw-accent);
}
.sjw--dots .sjw-node:hover .sjw-title,
.sjw--dots .sjw-node:focus-visible .sjw-title {
color: var(--sjw-accent2);
transform: none;
}
@container (max-width: 520px) {
.sjw--modern .sjw-title,
.sjw--airy .sjw-title {
font-size: clamp(9px, 2.8cqw, 13px);
letter-spacing: 0;
}
.sjw--dots .sjw-title {
font-size: clamp(10px, 3.1cqw, 13px);
top: calc(50% + 13px);
padding: 1px 5px;
}
.sjw--dots .sjw-face::after {
width: 10px;
height: 10px;
margin: -5px 0 0 -5px;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px color-mix(in srgb, var(--sjw-accent) 35%, transparent);
}
} .sjw--nodisc .sjw-center-disc,
.sjw--nodisc.sjw .sjw-center-disc {
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 2%;
}
.sjw--bold .sjw-title,
.sjw--bold.sjw .sjw-title {
font-family: var(--sjw-font-title);
font-weight: 700;
}