MediaWiki:Common.css: Difference between revisions

Latest revision as of 13:57, 27 September 2026

/* Vorkoth Wiki homepage. All selectors are scoped to .vorkoth-home. */
.vorkoth-home { --vh-gold: #dfbd79; --vh-cream: #f6eedc; --vh-muted: #b4c2cf; --vh-line: rgba(223,189,121,.27); color: var(--vh-cream); }
.vorkoth-home a { color: #f1ce8b; }
.vorkoth-home a:focus-visible { outline: 2px solid #f1ce8b; outline-offset: 3px; }
.vorkoth-home-hero { position: relative; overflow: hidden; padding: clamp(1.7rem, 5vw, 3.6rem); border: 1px solid rgba(223,189,121,.46); border-radius: 14px; background: radial-gradient(circle at 88% 8%, rgba(211,164,82,.20), transparent 37%), linear-gradient(125deg, #142638, #172e40 58%, #132330); box-shadow: 0 18px 48px rgba(0,0,0,.16); }
.vorkoth-home-hero::after { content: ''; pointer-events: none; position: absolute; top: -50px; right: -50px; width: 245px; height: 245px; border: 1px solid rgba(223,189,121,.16); border-radius: 50%; box-shadow: 0 0 0 42px rgba(223,189,121,.035), 0 0 0 90px rgba(223,189,121,.025); }
.vorkoth-home-kicker, .vorkoth-home-card-label, .vorkoth-home-panel-kicker { color: var(--vh-gold); font: 700 .72rem/1.4 system-ui,sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.vorkoth-home-hero-title { max-width: 720px; margin: .65rem 0 .8rem; font: 500 clamp(2.2rem, 5vw, 4.1rem)/1.08 Georgia,serif; letter-spacing: -.025em; color: #fff5df; }
.vorkoth-home-hero-copy { max-width: 630px; font: 1.1rem/1.65 system-ui,sans-serif; color: #d8e1e7; }
.vorkoth-home-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.65rem 0; }
.vorkoth-home-hero-actions a { display: inline-flex; align-items: center; min-height: 44px; padding: .65rem 1.1rem; border: 1px solid #dfbd79; border-radius: 6px; color: #182530; background: #dfbd79; font: 700 .92rem/1.35 system-ui,sans-serif; text-decoration: none; }
.vorkoth-home-hero-actions a + a { color: #f4e9d3; background: transparent; }
.vorkoth-home-hero-actions a:hover { filter: brightness(1.13); text-decoration: none; }
.vorkoth-home-hero-status { display: inline-block; padding: .52rem .78rem; border: 1px solid var(--vh-line); border-radius: 5px; color: #d9d2c3; font: .83rem/1.4 system-ui,sans-serif; }
.vorkoth-home h2 { margin: 2.2rem 0 1rem; padding: 0 0 .65rem; border-bottom: 1px solid var(--vh-line); color: #f4e9d3; font: 500 1.7rem/1.25 Georgia,serif; }
.vorkoth-home h2 .mw-headline { color: inherit; }
.vorkoth-home-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.vorkoth-home-card { min-height: 155px; padding: 1.2rem 1.3rem; border: 1px solid var(--vh-line); border-radius: 9px; background: linear-gradient(155deg,#1c3447,#162a3a); transition: transform .18s ease, border-color .18s ease; }
.vorkoth-home-card:hover { transform: translateY(-3px); border-color: rgba(223,189,121,.75); }
.vorkoth-home-card > a, .vorkoth-home-card > p > a { display: inline-block; margin: .75rem 0 .4rem; color: #fff2d5; font: 500 1.4rem/1.25 Georgia,serif; text-decoration: none; }
.vorkoth-home-card > a:hover, .vorkoth-home-card > p > a:hover { text-decoration: underline; }
.vorkoth-home-card-copy { color: var(--vh-muted); font: .92rem/1.55 system-ui,sans-serif; }
.vorkoth-home-panels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
.vorkoth-home-panel { padding: 1.35rem 1.45rem; border: 1px solid var(--vh-line); border-radius: 9px; background: #1b3041; color: #d7e1e7; font: .96rem/1.6 system-ui,sans-serif; }
.vorkoth-home-panel-title { margin: .5rem 0 .55rem; color: #fff2d5; font: 500 1.45rem/1.25 Georgia,serif; }
.vorkoth-home-footer { margin-top: 1.6rem; padding: 1rem 1.2rem; border-left: 3px solid var(--vh-gold); color: #c8d5dc; background: #182c3b; font: .88rem/1.6 system-ui,sans-serif; }
@media (max-width: 820px) { .vorkoth-home-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 570px) { .vorkoth-home-grid, .vorkoth-home-panels { grid-template-columns: 1fr; } .vorkoth-home-card { min-height: 0; } .vorkoth-home-hero { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .vorkoth-home-card { transition: none; } .vorkoth-home-card:hover { transform: none; } }

/* 1.0.2: accessible CTAs, compact homepage, readable section controls. */
.skin-vorkoth.page-Main_Page .vorkoth-hero { display: none; }
.vorkoth-home .vorkoth-home-hero { padding: 1.55rem 2rem; }
.vorkoth-home .vorkoth-home-hero-title { font-size: clamp(2.2rem, 3.4vw, 3.2rem); margin: .35rem 0 .55rem; }
.vorkoth-home .vorkoth-home-hero-copy { font-size: 1rem; line-height: 1.5; }
.vorkoth-home .vorkoth-home-hero-actions { margin: 1rem 0 .85rem; }
.vorkoth-home .vorkoth-home-hero-actions a:first-child,
.vorkoth-home .vorkoth-home-hero-actions a:first-child:visited { color: #102333 !important; background: #e5c681; }
.vorkoth-home .vorkoth-home-hero-actions a:last-child { color: #fff2d5 !important; }
.vorkoth-home .vorkoth-home-hero-status { padding: .3rem .65rem; }
.vorkoth-home .vorkoth-home-card { min-height: 128px; }
.skin-vorkoth .mw-heading2 { display: flex; align-items: baseline; gap: .85rem; }
.skin-vorkoth .mw-heading2 h2 { display: block; flex: 1; margin: 1.7rem 0 .65rem; border-bottom: 0; }
.skin-vorkoth .mw-heading2 .mw-editsection { margin-left: auto; font: 600 .75rem/1.4 system-ui,sans-serif; white-space: nowrap; }
.skin-vorkoth .mw-heading2 .mw-editsection-bracket { display: none; }
.skin-vorkoth .vorkoth-home .mw-heading2 { margin: 2rem 0 1rem; border-bottom: 1px solid var(--vh-line); }
.skin-vorkoth .vorkoth-home .mw-heading2 h2 { margin: 0; padding: 0 0 .65rem; }
.skin-vorkoth #catlinks { margin-top: 1.8rem; padding: .75rem 1rem; border: 1px solid rgba(223,189,121,.23); border-radius: 6px; background: #182c3b; font: .83rem/1.5 system-ui,sans-serif; }
.skin-vorkoth #catlinks ul { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 0 .45rem; padding: 0; list-style: none; }
.skin-vorkoth #catlinks li { margin: 0; }
.skin-vorkoth #catlinks li a { display: inline-block; padding: .2rem .55rem; border: 1px solid rgba(223,189,121,.27); border-radius: 4px; }
.vorkoth-item-infobox { float: right; width: min(285px, 42%); margin: .1rem 0 1.2rem 1.6rem; border: 1px solid #9b7a4a; border-collapse: collapse; background: #1b3041; color: #f2e8d4; font: .9rem/1.45 system-ui,sans-serif; }
.vorkoth-item-infobox th, .vorkoth-item-infobox td { padding: .55rem .7rem; border-bottom: 1px solid rgba(223,189,121,.2); text-align: left; }
.vorkoth-item-infobox tr:first-child th { padding: .85rem .7rem; background: #263b4d; color: #f3d49f; font: 500 1.2rem/1.2 Georgia,serif; }
.vorkoth-item-infobox tr:not(:first-child) th { width: 40%; }
.vorkoth-item-infobox .vorkoth-item-infobox-source { color: #b4c2cf; font-size: .75rem; }
.skin-vorkoth .wikitable.vorkoth-table { width: 100%; max-width: 900px; border-collapse: collapse; background: #1b3041; color: #e7e7df; }
.skin-vorkoth .wikitable.vorkoth-table th, .skin-vorkoth .wikitable.vorkoth-table td { padding: .55rem .7rem; border: 1px solid rgba(223,189,121,.22); }
.skin-vorkoth .wikitable.vorkoth-table th { color: #f3d49f; background: #263b4d; }
.vorkoth-map-scroll { overflow-x: auto; margin: 1.25rem 0 .35rem; }
.vorkoth-map { position: relative; min-width: 710px; height: 330px; overflow: hidden; border: 1px solid rgba(223,189,121,.5); border-radius: 11px; background: radial-gradient(ellipse at 28% 58%, rgba(74,115,89,.31), transparent 38%), radial-gradient(ellipse at 70% 25%, rgba(81,122,96,.25), transparent 40%), linear-gradient(135deg,#142d3b,#193d44 58%,#1c3342); }
.vorkoth-map::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(233,201,140,.1); border-radius: 6px; pointer-events: none; }
.vorkoth-map-title { position: absolute; top: 1.2rem; left: 1.4rem; color: #e5c681; font: 700 .73rem/1.4 system-ui,sans-serif; letter-spacing: .16em; }
.vorkoth-map-road { position: absolute; z-index: 1; height: 3px; background: repeating-linear-gradient(90deg,#c5a970 0 13px,transparent 13px 17px); transform-origin: left center; opacity: .75; }
.vorkoth-map .road-west { left: 10%; top: 59%; width: 18%; }
.vorkoth-map .road-middle { left: 28%; top: 59%; width: 26%; transform: rotate(12deg); }
.vorkoth-map .road-east { left: 53%; top: 71%; width: 41%; transform: rotate(-17deg); }
.vorkoth-map .road-willow { left: 38%; top: 65%; width: 19%; transform: rotate(-77deg); }
.vorkoth-map .road-north { left: 79%; top: 54%; width: 17%; transform: rotate(-97deg); }
.vorkoth-map-point { position: absolute; z-index: 2; transform: translate(-50%,-50%); white-space: nowrap; }
.vorkoth-map-point a { display: inline-block; padding: .38rem .62rem; border: 1px solid #d9bb7b; border-radius: 5px; background: #142638; color: #fff2d5 !important; font: 700 .83rem/1.2 system-ui,sans-serif; text-decoration: none; box-shadow: 0 5px 13px rgba(0,0,0,.27); }
.vorkoth-map-point a:hover, .vorkoth-map-point a:focus-visible { background: #294457; border-color: #fff2d5; }
.vorkoth-map .point-elgfjord { left: 10%; top: 59%; }
.vorkoth-map .point-harrowmere { left: 28%; top: 59%; }
.vorkoth-map .point-skeldholm { left: 53%; top: 71%; }
.vorkoth-map .point-stonewatch { left: 92%; top: 46%; }
.vorkoth-map .point-willowhollow { left: 40%; top: 25%; }
.vorkoth-map .point-northwatch { left: 77%; top: 18%; }
.vorkoth-map-caption { color: #b4c2cf; font: .83rem/1.5 system-ui,sans-serif; }
@media (max-width: 600px) { .vorkoth-home .vorkoth-home-hero { padding: 1.25rem; } .vorkoth-item-infobox { float: none; width: 100%; margin: 0 0 1.2rem; } }