Module:GameInfo/styles.css
From SpiritVale Wiki
More actions
/* Module:GameInfo/styles.css */
/* NOTE (ownership)
--------------------------------------------------------------------------
Common.css owns shared components and tokens:
- slider anatomy
- tabs
- tips / discloses / popups
This file owns GameInfo-family presentation only:
- card shell
- section layout
- skill-specific display blocks
Transitional fallbacks remain in place so Common.css can take over as
Lua / JS progressively emit more neutral attributes and hooks.
*/
/* ==========================================================================
1) BASE CARD + SAFETY
========================================================================== */
.sv-gi-card,
.sv-skill-card {
max-width: 600px;
margin: 18px auto;
border-radius: 22px;
border: 1px solid rgba(75,99,136,0.55);
background-color: #0f172a;
background-image: radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #0f172a, #0b1324);
box-shadow: 0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
overflow: visible;
color: rgba(245,249,255,0.94);
font-size: 15px;
line-height: 1.35;
}
/* Fixed top / bottom content zones */
.sv-gi-top,
.sv-skill-top {
padding: 14px 18px 4px;
}
.sv-gi-bottom,
.sv-skill-bottom {
padding: 10px 18px 12px;
}
/* Predictable sizing inside the card */
.sv-gi-card,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card * {
box-sizing: border-box;
}
/* Inline error shell */
.sv-gi-error {
max-width: 600px;
margin: 18px auto;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(75,99,136,0.55);
background: #1f2937;
color: rgba(245,249,255,0.92);
}
/* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden {
display: none;
}
/* Remove default browser marker from summary elements */
.sv-gi-card summary,
.sv-skill-card summary {
list-style: none;
}
/* ==========================================================================
2) ICONS, IMAGES, AND FALLBACK BADGES
========================================================================== */
.sv-skill-icon,
.sv-meta-icon,
.sv-ref-ico {
font-size: 0;
line-height: 0;
}
.sv-skill-icon a,
.sv-meta-icon a,
.sv-ref-ico a {
text-decoration: none;
}
/* Fallback “?” badge sizing inside icon boxes */
.sv-skill-icon .sv-miss {
width: 22px;
height: 22px;
font-size: 13px;
line-height: 1;
}
.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss {
width: 18px;
height: 18px;
font-size: 12px;
line-height: 1;
}
/* Image enhancement; global .sv-img still owns rounding behavior */
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img {
box-shadow: 0 10px 18px rgba(0,0,0,0.30);
}
/* ==========================================================================
3) SKILL HEADER
========================================================================== */
.sv-skill-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 2px 0 10px;
}
.sv-skill-icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 16px;
border: 1px solid rgba(75,99,136,0.55);
background: #1f2937;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sv-skill-headtext {
min-width: 0;
flex: 0 1 auto;
}
.sv-skill-title-row {
display: flex;
align-items: center;
gap: 10px;
}
.sv-skill-title {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 22px;
line-height: 1.10;
letter-spacing: 0.2px;
color: rgba(245,249,255,0.98);
}
.sv-skill-desc {
margin-top: 6px;
word-wrap: break-word;
font-size: 14px;
line-height: 1.35;
color: rgba(215,226,244,0.92);
}
/* ==========================================================================
4) META ROW
========================================================================== */
.sv-skill-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
margin: 8px 0 10px;
}
/* Meta row fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill {
width: 100%;
min-height: 34px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
font-weight: 900;
font-size: 12px;
line-height: 1.02;
letter-spacing: 0.08px;
text-transform: none;
color: rgba(245,249,255,0.96);
}
/* Preferred meta-card rendering */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 34px;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-meta-card:hover,
.sv-skill-card .sv-meta-card:hover {
background: #2e3f59;
}
.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
border: 1px solid rgba(75,99,136,0.55);
background: #0f172a;
}
.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap {
min-width: 0;
flex: 0 1 auto;
}
.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text {
min-width: 0;
word-wrap: break-word;
text-align: center;
font-weight: 900;
font-size: 12px;
line-height: 1.02;
letter-spacing: 0.08px;
color: rgba(245,249,255,0.96);
}
.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span {
display: block;
}
/* Visible text should appear static; interaction is handled by the pill overlay */
.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def {
cursor: default;
}
.sv-gi-card .sv-meta-text .sv-def-text,
.sv-skill-card .sv-meta-text .sv-def-text {
color: inherit;
border-bottom: none;
}
/* Secondary line styling */
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span {
margin-top: 1px;
opacity: 0.90;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12px;
}
/* Full-pill Definitions interaction overlay */
.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
opacity: 0;
}
.sv-gi-card .sv-meta-hit .sv-def,
.sv-skill-card .sv-meta-hit .sv-def {
display: block;
width: 100%;
height: 100%;
}
/* ==========================================================================
5) REQUIREMENTS / USERS ROW
Layout only; disclose component styling lives in Common.css
========================================================================== */
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 10px;
}
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 0 1 190px;
max-width: 205px;
}
/* Transitional compact pill styling until all disclose buttons emit
the compact modifier class from Lua */
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn {
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
}
/* ==========================================================================
6) LEVEL SELECTOR WRAPPER
Slider anatomy is owned by Common.css
========================================================================== */
.sv-skill-level {
margin: 8px 0 10px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Skills default to hiding tick labels because the end-value replaces them */
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels {
display: none;
}
/* Transitional helper label:
- if Lua provides data-sv-helper-text, Common.css can own the copy
- otherwise, keep the legacy fallback helper text here
*/
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-skill-card .sv-level-label:not([data-sv-helper-text]) {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
transform: none;
display: inline-block;
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
}
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
content: "Slide to set level";
display: inline-block;
font-weight: 900;
font-size: 13px;
line-height: 1.25;
letter-spacing: 0.15px;
color: rgba(245,249,255,0.94);
}
/* ==========================================================================
7) SKILL SCALING
========================================================================== */
.sv_skill_scaling {
margin: 8px 0 10px;
padding: 10px 12px 12px;
border-radius: 18px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* Absorb the level selector into the scaling surface */
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level {
margin: 0 0 10px;
padding: 0 0 10px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
border-bottom: 1px solid rgba(59,75,99,0.72);
}
/* Two columns (left cluster, right core); mobile stacks */
.sv_skill_scaling__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 252px);
column-gap: 16px;
row-gap: 12px;
align-items: start;
}
/* Placeholder not used (core lives in column 2) */
.sv_skill_scaling__side {
display: none;
}
/* Left cluster (damage + attributes) centered as a unit */
.sv_skill_scaling__cluster{
grid-column:1;
grid-row:1;
display:flex;
align-items:center;
justify-content:center; /* center damage + stat grid */
gap:14px;
flex-wrap:wrap;
/* KEY: shrink-to-fit + center in the grid cell */
width:auto; /* <-- NOT 100% */
max-width:100%;
margin-left:auto;
margin-right:auto;
min-width:0;
}
.sv_skill_scaling__column--core {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
/* Neutral wrappers */
.sv_skill_scaling__column {
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
background-image: none;
box-shadow: none;
}
/* Damage */
.sv_skill_scaling__column--primary {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sv_skill_scaling__primary-value {
word-wrap: break-word;
overflow-wrap: anywhere;
font-weight: 900;
font-size: 34px;
line-height: 0.95;
letter-spacing: -0.50px;
color: rgba(245,249,255,0.99);
}
.sv_skill_scaling__primary-label {
margin-top: 6px;
font-weight: 900;
font-size: 10px;
line-height: 1.05;
letter-spacing: 0.22px;
text-transform: uppercase;
color: rgba(182,198,224,0.96);
}
/* Attributes (2×3) */
.sv_skill_scaling__stats-grid {
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: start;
justify-items: start;
row-gap: 8px;
column-gap: 10px;
grid-template-areas:
"str agi"
"vit int"
"dex luk";
}
.sv_skill_scaling__stat-pill--str {
grid-area: str;
}
.sv_skill_scaling__stat-pill--vit {
grid-area: vit;
}
.sv_skill_scaling__stat-pill--dex {
grid-area: dex;
}
.sv_skill_scaling__stat-pill--agi {
grid-area: agi;
}
.sv_skill_scaling__stat-pill--int {
grid-area: int;
}
.sv_skill_scaling__stat-pill--luk {
grid-area: luk;
}
/* Shared shell */
.sv_skill_scaling__pill {
position: relative;
min-width: 0;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.92);
background: #1a2434;
background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
/* Stat chips (fixed size across all viewports) */
.sv_skill_scaling__stat-pill {
border-radius: 999px;
width: 50px;
min-width: 50px;
min-height: 22px;
padding: 4px 6px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.sv_skill_scaling__stat-main {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sv_skill_scaling__stat-visual {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.sv_skill_scaling__stat-label {
display: none;
}
.sv_skill_scaling__stat-icon {
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
line-height: 0;
}
.sv_skill_scaling__stat-icon a {
text-decoration: none;
}
.sv_skill_scaling__stat-icon .sv-img img {
width: 12px;
height: 12px;
box-shadow: none;
}
.sv_skill_scaling__stat-icon .sv-miss {
width: 12px;
height: 12px;
font-size: 9px;
line-height: 1;
}
.sv_skill_scaling__stat-value {
font-weight: 900;
font-size: 12px;
line-height: 1;
letter-spacing: -0.10px;
color: rgba(245,249,255,0.98);
}
.sv_skill_scaling__stat-hit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
opacity: 0;
}
.sv_skill_scaling__stat-hit .sv-def {
display: block;
width: 100%;
height: 100%;
}
.sv_skill_scaling__stat-pill.is-inactive {
border-color: rgba(59,75,99,0.72);
background: #182130;
background-image: none;
box-shadow: none;
}
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value {
display: none;
}
.sv_skill_scaling__stat-pill.is-inactive::before {
content: "—";
font-weight: 900;
font-size: 12px;
line-height: 1;
color: rgba(140,156,184,0.78);
}
.sv_skill_scaling__stat-pill.is-active {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01);
}
/* Per-stat colors */
.sv_skill_scaling__stat-pill--str.is-active {
border-color: rgba(145,63,82,0.96);
background: #32131d;
background-image: linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value {
color: #ffdce5;
}
.sv_skill_scaling__stat-pill--vit.is-active {
border-color: rgba(158,112,22,0.96);
background: #352609;
background-image: linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value {
color: #ffefc9;
}
.sv_skill_scaling__stat-pill--dex.is-active {
border-color: rgba(118,146,24,0.96);
background: #243208;
background-image: linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value {
color: #edf8cc;
}
.sv_skill_scaling__stat-pill--agi.is-active {
border-color: rgba(125,62,152,0.96);
background: #2b1438;
background-image: linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value {
color: #f0dcff;
}
.sv_skill_scaling__stat-pill--int.is-active {
border-color: rgba(45,118,191,0.96);
background: #11263d;
background-image: linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value {
color: #d8eeff;
}
.sv_skill_scaling__stat-pill--luk.is-active {
border-color: rgba(183,150,22,0.96);
background: #3a2f07;
background-image: linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value {
color: #fff2ba;
}
/* Core (3×2 grid; no pill/bubble look) */
.sv_skill_scaling__core-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.sv_skill_scaling__core-pill {
border-radius: 12px;
min-height: 54px;
padding: 8px 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid rgba(59,75,99,0.85);
background: #182130;
background-image: none;
box-shadow: none;
}
.sv_skill_scaling__core-pill.is-active {
background: #1a2434;
}
.sv_skill_scaling__core-main {
min-width: 0;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
}
.sv_skill_scaling__core-value {
min-width: 0;
word-wrap: break-word;
font-weight: 900;
font-size: 14px;
line-height: 1.02;
color: rgba(245,249,255,0.98);
}
.sv_skill_scaling__core-unit {
font-weight: 900;
font-size: 10px;
line-height: 1.05;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-label {
margin-top: 5px;
font-weight: 900;
font-size: 10px;
line-height: 1.10;
letter-spacing: 0.14px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv_skill_scaling__core-pill.is-inactive {
border-color: rgba(59,75,99,0.72);
background: #182130;
}
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label {
color: rgba(140,156,184,0.78);
}
/* Scaling responsive (no stat pill size changes) */
@media (max-width:850px) {
.sv_skill_scaling__body {
grid-template-columns: minmax(0, 1fr) minmax(0, 236px);
}
.sv_skill_scaling__primary-value {
font-size: 32px;
}
.sv_skill_scaling__core-pill {
min-height: 52px;
}
.sv_skill_scaling__core-value {
font-size: 13px;
}
.sv_skill_scaling__core-label {
font-size: 9px;
}
}
@media (max-width:500px) {
.sv_skill_scaling {
padding: 9px 10px 10px;
}
.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level {
padding: 0 0 9px;
}
.sv_skill_scaling__body {
grid-template-columns: 1fr;
row-gap: 12px;
}
.sv_skill_scaling__cluster {
grid-column: 1;
grid-row: 1;
gap: 10px;
}
.sv_skill_scaling__column--core {
grid-column: 1;
grid-row: 2;
}
.sv_skill_scaling__primary-value {
font-size: 30px;
}
.sv_skill_scaling__core-pill {
min-height: 50px;
padding: 7px 6px;
}
.sv_skill_scaling__core-value {
font-size: 13px;
}
.sv_skill_scaling__core-unit {
font-size: 10px;
}
.sv_skill_scaling__core-label {
font-size: 9px;
}
}
@media (max-width:360px) {
.sv_skill_scaling__primary-value {
font-size: 28px;
}
.sv_skill_scaling__core-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
8) TAB PANELS AND CONTENT BLOCKS
========================================================================== */
.sv-skill-tabs {
margin: 10px 0 0;
}
/* Mechanics grid */
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell {
padding: 10px 10px 9px;
border-radius: 14px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label {
font-weight: 900;
font-size: 12px;
letter-spacing: 0.25px;
text-transform: uppercase;
color: rgba(182,198,224,0.95);
}
.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value {
margin-top: 6px;
word-wrap: break-word;
font-weight: 900;
font-size: 15px;
color: rgba(245,249,255,0.96);
}
/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ==========================================================================
9) EFFECT / EVENT CARDS
========================================================================== */
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 10px;
border-radius: 16px;
border: 1px solid rgba(59,75,99,0.85);
background: #1f2937;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
color: rgba(245,249,255,0.94);
}
.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico {
flex: 0 0 auto;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(75,99,136,0.55);
background: #273449;
}
.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text {
min-width: 0;
flex: 1 1 auto;
}
.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title {
word-wrap: break-word;
font-weight: 900;
font-size: 15px;
line-height: 1.15;
color: rgba(245,249,255,0.98);
}
.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(59,75,99,0.85);
background: #273449;
background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
font-weight: 900;
font-size: 12px;
color: rgba(215,226,244,0.92);
}
.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub {
margin-top: 6px;
font-weight: 900;
font-size: 13px;
color: rgba(182,198,224,0.95);
}
/* ==========================================================================
10) RESPONSIVE
Breakpoints:
- 850px: tablet / compact desktop transition
- 500px: mobile
- 360px: very narrow screens
========================================================================== */
@media (max-width:850px) {
.sv-gi-card,
.sv-skill-card {
margin: 14px 10px;
border-radius: 20px;
}
.sv-gi-top,
.sv-skill-top {
padding: 12px 16px 4px;
}
.sv-gi-bottom,
.sv-skill-bottom {
padding: 10px 16px 12px;
}
.sv-skill-title {
font-size: 20px;
}
.sv-skill-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-gi-card .sv-core-grid,
.sv-skill-card .sv-core-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid {
grid-template-columns: 1fr;
}
}
@media (max-width:500px) {
.sv-skill-head {
gap: 10px;
}
.sv-skill-icon {
width: 56px;
height: 56px;
border-radius: 14px;
}
.sv-skill-title {
font-size: 18px;
}
.sv-skill-desc {
font-size: 13px;
}
.sv-gi-card .sv-scaling-grid,
.sv-skill-card .sv-scaling-grid {
grid-template-columns: 1fr;
}
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
grid-template-columns: 1fr;
}
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow {
padding-left: 16px;
padding-right: 16px;
}
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 1 1 170px;
max-width: 190px;
}
.sv-skill-card .sv-skill-meta,
.sv-gi-card .sv-skill-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.sv-skill-card .sv-meta-card,
.sv-gi-card .sv-meta-card {
min-height: 32px;
gap: 7px;
}
.sv-skill-card .sv-meta-icon,
.sv-gi-card .sv-meta-icon {
width: 16px;
height: 16px;
}
.sv-skill-card .sv-meta-text,
.sv-gi-card .sv-meta-text {
font-size: 10px;
line-height: 1.05;
letter-spacing: 0;
}
.sv-skill-card .sv-meta-text .sv-meta-lines span + span,
.sv-gi-card .sv-meta-text .sv-meta-lines span + span {
margin-top: 1px;
font-size: 9px;
}
.sv-skill-level {
padding: 9px 10px;
}
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
font-size: 12px;
}
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill {
min-height: 24px;
gap: 5px;
font-size: 10px;
line-height: 1.05;
letter-spacing: 0;
}
}
@media (max-width:360px) {
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
flex: 1 1 100%;
max-width: 100%;
}
}