Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ================================================================
Varnyra Wiki Content CSS
Main Page only
================================================================
Structure:
1. Base
2. Hero (intro + showcase)
3. Sections / panels
4. Featured cards
5. Responsive
================================================================ */
/* ------------------------------
1. Base
------------------------------ */
.vy-main {
font-family: Georgia, "Times New Roman", serif;
color: #f5efe1;
}
.vy-main a {
text-decoration: none !important;
}
/* Shared "card" look, reused by intro / showcase / panel blocks below.
Each block adds its own layout rules (padding, height, display) on top. */
.vy-main-intro,
.vy-main-showcase,
.vy-main-panel {
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.18), transparent 38%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 26px rgba(0, 0, 0, 0.26),
inset 0 0 24px rgba(255, 255, 255, 0.014);
overflow: hidden;
}
/* ------------------------------
2. Hero (intro + showcase)
------------------------------ */
.vy-main-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: 20px;
align-items: stretch;
margin-bottom: 24px;
}
.vy-main-intro {
padding: 32px 34px;
}
.vy-main-kicker {
margin-bottom: 8px;
color: #c084fc;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
}
.vy-main-title {
margin: 0 0 15px;
color: #fff8e7;
font-size: 50px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
}
.vy-main-text {
max-width: 760px;
color: #eadfc8;
font-size: 16px;
line-height: 1.62;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.vy-main-focus {
margin-top: 20px;
padding: 14px 16px;
border-left: 4px solid #a855f7;
border-radius: 8px;
background: rgba(168, 85, 247, 0.08);
color: #fff3d8;
font-size: 14px;
line-height: 1.55;
}
/* Showcase image block */
.vy-main-showcase {
min-height: 270px;
display: flex;
flex-direction: column;
}
.vy-main-image-slot {
min-height: 210px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(168, 85, 247, 0.32), transparent 56%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(45, 24, 70, 0.94));
color: rgba(255, 248, 231, 0.54);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.5px;
text-align: center;
text-transform: uppercase;
}
/* Shared link-wrapper behaviour for image slots (main + feature cards) */
.vy-main-image-slot a,
.vy-main-feature-image a {
display: block;
width: 100%;
height: 100%;
}
.vy-main-image-slot img,
.vy-main-image-slot .mw-file-element {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 210px;
object-fit: cover;
}
.vy-main-showcase-caption {
padding: 14px 16px;
border-top: 1px solid rgba(251, 191, 36, 0.18);
color: #fff3d8;
font-size: 13.5px;
font-weight: 700;
line-height: 1.45;
}
/* ------------------------------
3. Sections / panels
------------------------------ */
.vy-main-section-title {
margin: 30px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
.vy-main-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.vy-main-panel {
min-height: 138px;
padding: 18px 20px;
}
.vy-main-panel-title {
margin-bottom: 9px;
color: #fff8e7;
font-size: 20px;
font-weight: 900;
line-height: 1.22;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}
.vy-main-panel-text {
color: rgba(245, 239, 225, 0.82);
font-size: 14.5px;
line-height: 1.56;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Notes are present in the page text, but hidden to keep the homepage calm. */
.vy-main-panel-note {
display: none !important;
}
/* ------------------------------
4. Featured cards with image slots
------------------------------ */
.vy-main-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.vy-main-feature {
display: flex;
min-height: 315px;
flex-direction: column;
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
overflow: hidden;
}
.vy-main-feature:hover {
border-color: rgba(251, 191, 36, 0.34);
}
.vy-main-feature-image {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(251, 191, 36, 0.12), transparent 52%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(45, 24, 70, 0.94));
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: rgba(255, 248, 231, 0.48);
font-size: 12px;
font-weight: 900;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
}
.vy-main-feature-image img,
.vy-main-feature-image .mw-file-element {
display: block;
width: 100% !important;
height: 150px !important;
object-fit: cover;
}
.vy-main-feature-body {
display: flex;
min-height: 150px;
flex: 1;
flex-direction: column;
padding: 15px 16px 17px;
}
.vy-main-feature-title {
margin-bottom: 7px;
color: #fff8e7;
font-size: 18px;
font-weight: 900;
line-height: 1.25;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}
.vy-main-feature-text {
color: rgba(245, 239, 225, 0.78);
font-size: 13.5px;
line-height: 1.46;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.vy-main-link,
.vy-main-link a {
display: inline-block;
margin-top: auto;
padding-top: 12px;
color: #fbbf24 !important;
font-size: 13.5px;
font-weight: 900;
}
.vy-main-link:hover,
.vy-main-link a:hover {
color: #fff8e7 !important;
}
/* ------------------------------
5. Responsive
------------------------------ */
@media screen and (max-width: 1150px) {
.vy-main-hero,
.vy-main-grid {
grid-template-columns: 1fr;
}
.vy-main-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 680px) {
.vy-main-title {
font-size: 38px;
}
.vy-main-intro {
padding: 26px 22px;
}
.vy-main-feature-grid {
grid-template-columns: 1fr;
}
}
/* ------------------------------
Varnyra Section Pages
Used for unique MMO-RPG hub pages
------------------------------ */
.vy-section {
font-family: Georgia, "Times New Roman", serif;
}
.vy-section a {
text-decoration: none !important;
}
/* Hero */
.vy-section-hero {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
gap: 22px;
align-items: stretch;
margin-bottom: 26px;
}
.vy-section-hero-main,
.vy-section-hero-art {
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.22), transparent 40%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
overflow: hidden;
}
.vy-section-hero-main {
padding: 34px 38px;
}
.vy-section-kicker {
color: #c084fc;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-section-title {
color: #fff8e7;
font-size: 52px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
margin-bottom: 14px;
}
.vy-section-intro {
max-width: 820px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-section-note {
margin-top: 20px;
padding: 13px 15px;
border-left: 4px solid #a855f7;
border-radius: 8px;
background: rgba(168, 85, 247, 0.08);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
/* Hero image slot */
.vy-section-hero-art {
display: flex;
flex-direction: column;
min-height: 260px;
}
.vy-section-image {
flex: 1;
min-height: 210px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(168, 85, 247, 0.28), transparent 56%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(45, 24, 70, 0.94));
color: rgba(255, 248, 231, 0.48);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-section-image img {
width: 100%;
height: 100%;
min-height: 210px;
object-fit: contain;
}
.vy-section-image-caption {
padding: 13px 15px;
border-top: 1px solid rgba(251, 191, 36, 0.16);
color: #f5efe1;
font-size: 13.5px;
line-height: 1.45;
background: rgba(0, 0, 0, 0.20);
}
/* Section titles */
.vy-section-heading {
margin: 30px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
/* Soft overview panels */
.vy-section-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: start;
}
.vy-section-panel {
padding: 20px 22px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.10), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.010));
}
.vy-section-panel-title {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
margin-bottom: 9px;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}
.vy-section-panel-text {
color: rgba(245, 239, 225, 0.78);
font-size: 14.8px;
line-height: 1.6;
}
/* Badge rows */
.vy-section-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}
.vy-section-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid rgba(251, 191, 36, 0.26);
border-radius: 999px;
background: rgba(251, 191, 36, 0.08);
color: #fbbf24;
font-size: 12.5px;
font-weight: 900;
}
/* Skill path layout */
.vy-skill-paths {
display: grid;
gap: 12px;
}
.vy-skill-path {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 15px 17px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(168, 85, 247, 0.10), rgba(255, 255, 255, 0.014));
}
.vy-skill-path:hover {
border-color: rgba(251, 191, 36, 0.34);
background:
linear-gradient(90deg, rgba(168, 85, 247, 0.16), rgba(251, 191, 36, 0.035));
}
.vy-skill-type {
color: #c084fc;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.vy-skill-name {
color: #fff8e7;
font-size: 19px;
font-weight: 900;
margin-bottom: 4px;
}
.vy-skill-desc {
color: rgba(245, 239, 225, 0.76);
font-size: 14px;
line-height: 1.5;
}
.vy-skill-link,
.vy-skill-link a {
color: #fbbf24 !important;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
/* Compact side box */
.vy-section-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-section-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.18);
}
.vy-section-sidebox-body {
padding: 14px 16px;
color: rgba(245, 239, 225, 0.78);
font-size: 14px;
line-height: 1.55;
}
.vy-section-list {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-section-list li {
margin: 6px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14px !important;
}
.vy-section-list a {
color: #fbbf24 !important;
font-weight: 800;
}
/* Status */
.vy-section-status {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-section-hero,
.vy-section-split {
grid-template-columns: 1fr;
}
.vy-skill-path {
grid-template-columns: 1fr;
gap: 8px;
}
}
@media screen and (max-width: 640px) {
.vy-section-hero-main {
padding: 26px 22px;
}
.vy-section-title {
font-size: 38px;
}
}
/* ------------------------------
Varnyra Beginner Guide
First player route / onboarding page
------------------------------ */
.vy-guide {
font-family: Georgia, "Times New Roman", serif;
}
.vy-guide a {
text-decoration: none !important;
}
.vy-guide-hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: 22px;
align-items: stretch;
margin-bottom: 28px;
}
.vy-guide-hero-main,
.vy-guide-hero-side {
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.22), transparent 40%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
overflow: hidden;
}
.vy-guide-hero-main {
padding: 36px 40px;
}
.vy-guide-kicker {
color: #c084fc;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-guide-title {
color: #fff8e7;
font-size: 52px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
margin-bottom: 14px;
}
.vy-guide-intro {
max-width: 820px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-guide-start-box {
margin-top: 20px;
padding: 14px 16px;
border-left: 4px solid #a855f7;
border-radius: 8px;
background: rgba(168, 85, 247, 0.08);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
.vy-guide-hero-side {
display: flex;
flex-direction: column;
}
.vy-guide-image {
flex: 1;
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, rgba(251, 191, 36, 0.12), transparent 52%),
radial-gradient(circle at top right, rgba(168, 85, 247, 0.28), transparent 55%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(45, 24, 70, 0.94));
color: rgba(255, 248, 231, 0.48);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-guide-image img {
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
}
.vy-guide-caption {
padding: 13px 15px;
border-top: 1px solid rgba(251, 191, 36, 0.16);
color: #f5efe1;
font-size: 13.5px;
line-height: 1.45;
background: rgba(0, 0, 0, 0.20);
}
.vy-guide-heading {
margin: 30px 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
.vy-guide-route {
position: relative;
display: grid;
gap: 12px;
}
.vy-guide-step {
display: grid;
grid-template-columns: 82px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 15px 17px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(168, 85, 247, 0.12), rgba(255, 255, 255, 0.014));
}
.vy-guide-step:hover {
border-color: rgba(251, 191, 36, 0.34);
background:
linear-gradient(90deg, rgba(168, 85, 247, 0.18), rgba(251, 191, 36, 0.035));
}
.vy-guide-step-number {
color: #fbbf24;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-guide-step-title {
color: #fff8e7;
font-size: 19px;
font-weight: 900;
margin-bottom: 4px;
}
.vy-guide-step-text {
color: rgba(245, 239, 225, 0.76);
font-size: 14px;
line-height: 1.5;
}
.vy-guide-step-link,
.vy-guide-step-link a {
color: #fbbf24 !important;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.vy-guide-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 20px;
align-items: start;
margin-top: 28px;
}
.vy-guide-panel,
.vy-guide-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.10), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-guide-panel {
padding: 20px 22px;
}
.vy-guide-panel-title {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.vy-guide-checklist {
margin: 0 !important;
padding-left: 20px !important;
}
.vy-guide-checklist li {
margin: 8px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14.5px !important;
line-height: 1.45 !important;
}
.vy-guide-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.18);
}
.vy-guide-sidebox-body {
padding: 14px 16px;
}
.vy-guide-links {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-guide-links li {
margin: 7px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14px !important;
}
.vy-guide-links a {
color: #fbbf24 !important;
font-weight: 800;
}
.vy-guide-status {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-guide-hero,
.vy-guide-lower {
grid-template-columns: 1fr;
}
.vy-guide-step {
grid-template-columns: 1fr;
gap: 8px;
}
}
@media screen and (max-width: 640px) {
.vy-guide-hero-main {
padding: 26px 22px;
}
.vy-guide-title {
font-size: 38px;
}
}
/* ------------------------------
Varnyra Server Rules
Official rulebook / server charter page
------------------------------ */
.vy-rules {
font-family: Georgia, "Times New Roman", serif;
}
.vy-rules a {
text-decoration: none !important;
}
.vy-rules-hero {
padding: 34px 38px;
margin-bottom: 26px;
border: 1px solid rgba(251, 191, 36, 0.26);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(225, 29, 72, 0.16), transparent 36%),
radial-gradient(circle at bottom left, rgba(251, 191, 36, 0.10), transparent 34%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
}
.vy-rules-kicker {
color: #fb7185;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-rules-title {
color: #fff8e7;
font-size: 50px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.14);
margin-bottom: 14px;
}
.vy-rules-intro {
max-width: 900px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-rules-warning {
margin-top: 18px;
padding: 14px 16px;
border-left: 4px solid #fb7185;
border-radius: 8px;
background: rgba(225, 29, 72, 0.08);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
.vy-rules-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: start;
}
.vy-rules-main {
display: grid;
gap: 14px;
}
.vy-rules-block {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
gap: 16px;
padding: 17px 18px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(225, 29, 72, 0.08), rgba(255, 255, 255, 0.012));
}
.vy-rules-block:hover {
border-color: rgba(251, 191, 36, 0.32);
background:
linear-gradient(90deg, rgba(225, 29, 72, 0.11), rgba(251, 191, 36, 0.026));
}
.vy-rules-number {
color: #fbbf24;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-rules-block-title {
color: #fff8e7;
font-size: 20px;
font-weight: 900;
margin-bottom: 8px;
}
.vy-rules-list {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-rules-list li {
margin: 6px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14.5px !important;
line-height: 1.45 !important;
}
.vy-rules-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(225, 29, 72, 0.12), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-rules-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.20);
}
.vy-rules-sidebox-body {
padding: 14px 16px;
color: rgba(245, 239, 225, 0.78);
font-size: 14px;
line-height: 1.55;
}
.vy-rules-sidebox ul {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-rules-sidebox li {
margin: 7px 0 !important;
font-size: 14px !important;
}
.vy-rules-sidebox a {
color: #fbbf24 !important;
font-weight: 800;
}
.vy-rules-status {
margin-top: 22px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-rules-layout {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 640px) {
.vy-rules-hero {
padding: 26px 22px;
}
.vy-rules-title {
font-size: 38px;
}
.vy-rules-block {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* ------------------------------
Varnyra Commands
Command terminal / command database page
------------------------------ */
.vy-commands {
font-family: Georgia, "Times New Roman", serif;
}
.vy-commands a {
text-decoration: none !important;
}
.vy-commands-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 22px;
align-items: stretch;
margin-bottom: 26px;
}
.vy-commands-main,
.vy-commands-terminal {
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 38%),
radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.16), transparent 36%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
overflow: hidden;
}
.vy-commands-main {
padding: 34px 38px;
}
.vy-commands-kicker {
color: #22c55e;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-commands-title {
color: #fff8e7;
font-size: 50px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.14);
margin-bottom: 14px;
}
.vy-commands-intro {
max-width: 820px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-commands-note {
margin-top: 18px;
padding: 14px 16px;
border-left: 4px solid #22c55e;
border-radius: 8px;
background: rgba(34, 197, 94, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
.vy-commands-terminal {
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.16), transparent 38%),
linear-gradient(180deg, rgba(3, 8, 7, 0.98), rgba(3, 5, 10, 0.98));
}
.vy-commands-terminal-header {
display: flex;
gap: 6px;
padding: 12px 14px;
border-bottom: 1px solid rgba(34, 197, 94, 0.20);
background: rgba(0, 0, 0, 0.28);
}
.vy-commands-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.65);
}
.vy-commands-terminal-body {
padding: 16px 17px;
color: #bbf7d0;
font-family: Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.65;
}
.vy-commands-terminal-line {
display: block;
color: #bbf7d0;
}
.vy-commands-terminal-prompt {
color: #fbbf24;
}
.vy-commands-heading {
margin: 30px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
.vy-commands-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 10px;
}
.vy-commands-row {
display: grid;
grid-template-columns: 210px minmax(0, 1fr) 140px;
gap: 16px;
align-items: center;
padding: 15px 17px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(34, 197, 94, 0.075), rgba(255, 255, 255, 0.012));
}
.vy-commands-row:hover {
border-color: rgba(251, 191, 36, 0.34);
background:
linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(251, 191, 36, 0.030));
}
.vy-command-code {
color: #bbf7d0;
font-family: Consolas, "Courier New", monospace;
font-size: 15px;
font-weight: 900;
white-space: nowrap;
}
.vy-command-desc {
color: rgba(245, 239, 225, 0.78);
font-size: 14.5px;
line-height: 1.5;
}
.vy-command-type {
justify-self: end;
padding: 5px 9px;
border: 1px solid rgba(251, 191, 36, 0.22);
border-radius: 999px;
background: rgba(251, 191, 36, 0.07);
color: #fbbf24;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
white-space: nowrap;
}
.vy-commands-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: start;
margin-top: 28px;
}
.vy-commands-panel,
.vy-commands-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-commands-panel {
padding: 20px 22px;
}
.vy-commands-panel-title {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.vy-commands-panel-text {
color: rgba(245, 239, 225, 0.78);
font-size: 14.5px;
line-height: 1.6;
}
.vy-commands-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.18);
}
.vy-commands-sidebox-body {
padding: 14px 16px;
}
.vy-commands-links {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-commands-links li {
margin: 7px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14px !important;
}
.vy-commands-links a {
color: #fbbf24 !important;
font-weight: 800;
}
.vy-commands-status {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-commands-hero,
.vy-commands-lower {
grid-template-columns: 1fr;
}
.vy-commands-row {
grid-template-columns: 1fr;
gap: 8px;
}
.vy-command-type {
justify-self: start;
}
}
@media screen and (max-width: 640px) {
.vy-commands-main {
padding: 26px 22px;
}
.vy-commands-title {
font-size: 38px;
}
}
/* ------------------------------
Varnyra Classes
Character select / class fantasy page
------------------------------ */
.vy-classes {
font-family: Georgia, "Times New Roman", serif;
}
.vy-classes a {
text-decoration: none !important;
}
.vy-classes-hero {
padding: 34px 38px;
margin-bottom: 24px;
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.24), transparent 38%),
radial-gradient(circle at bottom left, rgba(251, 191, 36, 0.08), transparent 34%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
}
.vy-classes-kicker {
color: #c084fc;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-classes-title {
color: #fff8e7;
font-size: 52px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
margin-bottom: 14px;
}
.vy-classes-intro {
max-width: 900px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-classes-rolebar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.vy-classes-role {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid rgba(251, 191, 36, 0.26);
border-radius: 999px;
background: rgba(251, 191, 36, 0.08);
color: #fbbf24;
font-size: 12.5px;
font-weight: 900;
}
.vy-classes-banner {
margin-bottom: 26px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(168, 85, 247, 0.26), transparent 56%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(45, 24, 70, 0.94));
}
.vy-classes-banner-image {
min-height: 230px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 248, 231, 0.48);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-classes-banner-image img {
width: 100%;
height: 100%;
min-height: 230px;
max-height: 310px;
object-fit: cover;
}
.vy-classes-banner-caption {
padding: 13px 16px;
border-top: 1px solid rgba(251, 191, 36, 0.16);
background: rgba(0, 0, 0, 0.22);
color: #f5efe1;
font-size: 13.5px;
line-height: 1.45;
}
.vy-classes-heading {
margin: 30px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
.vy-class-select {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.vy-class-card {
position: relative;
overflow: hidden;
padding: 20px 22px;
min-height: 165px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.16), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012));
}
.vy-class-card:hover {
border-color: rgba(251, 191, 36, 0.36);
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.23), transparent 42%),
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
}
.vy-class-type {
color: #c084fc;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 7px;
}
.vy-class-name {
color: #fff8e7;
font-size: 23px;
font-weight: 900;
margin-bottom: 8px;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}
.vy-class-desc {
color: rgba(245, 239, 225, 0.78);
font-size: 14.5px;
line-height: 1.55;
}
.vy-class-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 13px;
}
.vy-class-tag {
padding: 4px 8px;
border-radius: 999px;
background: rgba(168, 85, 247, 0.12);
color: #d8b4fe;
font-size: 11.5px;
font-weight: 900;
}
.vy-classes-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: start;
margin-top: 28px;
}
.vy-classes-panel,
.vy-classes-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(168, 85, 247, 0.10), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-classes-panel {
padding: 20px 22px;
}
.vy-classes-panel-title {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.vy-classes-panel-text {
color: rgba(245, 239, 225, 0.78);
font-size: 14.5px;
line-height: 1.6;
}
.vy-classes-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.18);
}
.vy-classes-sidebox-body {
padding: 14px 16px;
}
.vy-classes-links {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-classes-links li {
margin: 7px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14px !important;
}
.vy-classes-links a {
color: #fbbf24 !important;
font-weight: 800;
}
.vy-classes-status {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-class-select,
.vy-classes-lower {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 640px) {
.vy-classes-hero {
padding: 26px 22px;
}
.vy-classes-title {
font-size: 38px;
}
}
/* ------------------------------
Varnyra Skills
Progression roadmap page
------------------------------ */
.vy-skills {
font-family: Georgia, "Times New Roman", serif;
}
.vy-skills a {
text-decoration: none !important;
}
.vy-skills-hero {
padding: 34px 38px;
margin-bottom: 24px;
border: 1px solid rgba(251, 191, 36, 0.24);
border-radius: 14px;
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 38%),
radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.22), transparent 36%),
linear-gradient(180deg, rgba(9, 13, 24, 0.96), rgba(4, 7, 13, 0.98));
box-shadow:
0 0 28px rgba(0, 0, 0, 0.28),
inset 0 0 24px rgba(255, 255, 255, 0.014);
}
.vy-skills-kicker {
color: #22c55e;
font-size: 12px;
font-weight: 900;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.vy-skills-title {
color: #fff8e7;
font-size: 52px;
font-weight: 900;
line-height: 1;
text-transform: uppercase;
text-shadow: 0 0 18px rgba(251, 191, 36, 0.16);
margin-bottom: 14px;
}
.vy-skills-intro {
max-width: 920px;
color: #e9ddc3;
font-size: 16px;
line-height: 1.65;
}
.vy-skills-core {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.vy-skills-core span {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 11px;
border: 1px solid rgba(34, 197, 94, 0.28);
border-radius: 999px;
background: rgba(34, 197, 94, 0.08);
color: #bbf7d0;
font-size: 12.5px;
font-weight: 900;
}
.vy-skills-heading {
margin: 30px 0 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(251, 191, 36, 0.22);
color: #fbbf24;
font-size: 24px;
font-weight: 900;
font-variant: small-caps;
letter-spacing: 0.9px;
}
.vy-skills-paths {
display: grid;
gap: 12px;
}
.vy-skills-path {
display: grid;
grid-template-columns: 150px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 15px 17px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
linear-gradient(90deg, rgba(34, 197, 94, 0.075), rgba(168, 85, 247, 0.06), rgba(255, 255, 255, 0.012));
}
.vy-skills-path:hover {
border-color: rgba(251, 191, 36, 0.34);
background:
linear-gradient(90deg, rgba(34, 197, 94, 0.12), rgba(168, 85, 247, 0.10), rgba(251, 191, 36, 0.030));
}
.vy-skills-type {
color: #22c55e;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.vy-skills-name {
color: #fff8e7;
font-size: 20px;
font-weight: 900;
margin-bottom: 4px;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.10);
}
.vy-skills-desc {
color: rgba(245, 239, 225, 0.76);
font-size: 14px;
line-height: 1.5;
}
.vy-skills-link,
.vy-skills-link a {
color: #fbbf24 !important;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.vy-skills-banner {
margin: 28px 0 26px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(34, 197, 94, 0.16), transparent 52%),
radial-gradient(circle at top right, rgba(168, 85, 247, 0.24), transparent 52%),
linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(20, 48, 38, 0.92));
}
.vy-skills-banner-image {
min-height: 210px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 248, 231, 0.48);
font-size: 12px;
font-weight: 900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.vy-skills-banner-image img {
width: 100%;
height: 100%;
min-height: 210px;
max-height: 300px;
object-fit: cover;
}
.vy-skills-banner-caption {
padding: 13px 16px;
border-top: 1px solid rgba(251, 191, 36, 0.16);
background: rgba(0, 0, 0, 0.22);
color: #f5efe1;
font-size: 13.5px;
line-height: 1.45;
}
.vy-skills-roadmap {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.vy-skills-stage {
padding: 16px 17px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.10), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
}
.vy-skills-stage-label {
color: #22c55e;
font-size: 11px;
font-weight: 900;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 6px;
}
.vy-skills-stage-title {
color: #fff8e7;
font-size: 17px;
font-weight: 900;
margin-bottom: 6px;
}
.vy-skills-stage-text {
color: rgba(245, 239, 225, 0.76);
font-size: 13.5px;
line-height: 1.45;
}
.vy-skills-lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 20px;
align-items: start;
margin-top: 28px;
}
.vy-skills-panel,
.vy-skills-sidebox {
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
background:
radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 44%),
linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.012));
overflow: hidden;
}
.vy-skills-panel {
padding: 20px 22px;
}
.vy-skills-panel-title {
color: #fff8e7;
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.vy-skills-panel-text {
color: rgba(245, 239, 225, 0.78);
font-size: 14.5px;
line-height: 1.6;
}
.vy-skills-sidebox-title {
padding: 12px 15px;
border-bottom: 1px solid rgba(251, 191, 36, 0.16);
color: #fbbf24;
font-size: 16px;
font-weight: 900;
font-variant: small-caps;
background: rgba(0, 0, 0, 0.18);
}
.vy-skills-sidebox-body {
padding: 14px 16px;
}
.vy-skills-links {
margin: 0 !important;
padding-left: 18px !important;
}
.vy-skills-links li {
margin: 7px 0 !important;
color: rgba(245, 239, 225, 0.80);
font-size: 14px !important;
}
.vy-skills-links a {
color: #fbbf24 !important;
font-weight: 800;
}
.vy-skills-status {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid rgba(251, 191, 36, 0.20);
border-left: 4px solid #fbbf24;
border-radius: 8px;
background: rgba(251, 191, 36, 0.07);
color: #f5efe1;
font-size: 14px;
line-height: 1.55;
}
@media screen and (max-width: 1100px) {
.vy-skills-path,
.vy-skills-lower {
grid-template-columns: 1fr;
}
.vy-skills-roadmap {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 640px) {
.vy-skills-hero {
padding: 26px 22px;
}
.vy-skills-title {
font-size: 38px;
}
.vy-skills-roadmap {
grid-template-columns: 1fr;
}
}