MediaWiki:Common.css: Difference between revisions

Latest revision as of 17:35, 28 February 2026

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Archivo+Black&family=Oswald&family=Playfair+Display:wght@700&family=Libre+Baskerville:wght@700&family=Bitter:wght@700&family=Cinzel:wght@700&family=IBM+Plex+Mono:wght@600&family=Black+Ops+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500&display=swap');

/* =========================
   Hiders
========================= */

#skin-client-prefs-skin-theme,
#skin-client-prefs-citizen-feature-pure-black {
    display: none !important;
}

/* Hide namespace prefix in page title */
html.lt-theme-default .mw-page-title-namespace,
html.lt-theme-default .mw-page-title-separator,
html.lt-theme-red .mw-page-title-namespace,
html.lt-theme-red .mw-page-title-separator,
html.lt-theme-blue .mw-page-title-namespace,
html.lt-theme-blue .mw-page-title-separator {
    display: none;
}


/* =========================
   Base Infobox Structure
========================= */

.lt-infobox {
    max-width: 350px;
    float: right;
    margin: 0 0 1rem 1.5rem;
    padding: 0;
    display: block;
    align-self: flex-start !important;
    height: fit-content;
    width: 100%;          /* ← ADD THIS */
    box-sizing: border-box;  /* ← AND THIS */
}

.lt-infobox-title {
    text-align: center;
    letter-spacing: 2px;
}

.lt-infobox-image img {
    width: 100%;
    display: block;
}

.lt-infobox-section {
    display: block;
}

.lt-infobox-row {
    display: flex;
    align-items: baseline;
    padding: 8px 12px;
}

.lt-infobox-row + .lt-infobox-row {
    border-top: 1px solid rgba(255,255,255,0.2);
}

.lt-infobox-label {
    font-size: 17px;
    margin-right: 8px;
    white-space: nowrap;
}

.lt-infobox-value {
    font-size: 17px;
}



/* ======================================== BEGIN VELVET THEME ==================================================== */
/* Velvet Floating Grid */
html.lt-theme-default body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image:
        linear-gradient(rgba(139,155,180,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,155,180,0.05) 1px, transparent 1px);

    background-size: 40px 40px;

    animation: lt-grid-drift 5s linear infinite;
}

@keyframes lt-grid-drift {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 40px 40px, 40px 40px;
    }
}

html.lt-theme-default {

    /* Body Text */
    color: #d6e2ff;
}

html.lt-theme-default body {
    background-image:
        linear-gradient(rgba(139,155,180,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,155,180,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ===== Velvet Content Card (mobile width fix) ===== */

html.lt-theme-default .mw-parser-output {
    background: rgba(5, 8, 20, 0.85);
    border: 1px solid rgba(143,180,255,0.25);
    padding: 30px 36px;
}
/* Velvet Headers */

html.lt-theme-default h1,
html.lt-theme-default h2,
html.lt-theme-default h3,
html.lt-theme-default .mw-page-title-main {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #d6e2ff; /* same pale icy blue as wordmark */
    letter-spacing: 2px;
    animation: velvetWordmarkGlow 4s ease-in-out infinite alternate;
}

html.lt-theme-default .mw-page-title-main {
    font-size: 50px;
}

html.lt-theme-default h2 {
    border-bottom: 2px solid #8fb4ff;
    padding-bottom: 6px;
    text-shadow: 0 0 6px rgba(143,180,255,0.4);
}

/* Velvet Wordmark – Icy + Breathing */
html.lt-theme-default .mw-logo-wordmark {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #d6e2ff;
    letter-spacing: 2px;
    animation: velvetWordmarkGlow 4s ease-in-out infinite alternate;
}

@keyframes velvetWordmarkGlow {
    from {
        text-shadow:
            0 0 4px rgba(143,180,255,0.3),
            0 0 8px rgba(143,180,255,0.2);
    }
    to {
        text-shadow:
            0 0 8px rgba(143,180,255,0.6),
            0 0 16px rgba(143,180,255,0.4);
    }
}

/* Individual Floating + Rotating Letters */

html.lt-theme-default .velvet-letter {
    display: inline-block;
    animation: velvetFloatRotate 8s ease-in-out infinite alternate;
}

@keyframes velvetFloatRotate {
    0% {
        transform: translateY(0px) rotate(-3.0deg);
    }
    50% {
        transform: translateY(-8px) rotate(3.0deg);
    }
    100% {
        transform: translateY(0px) rotate(0.0deg);
    }
}

/* Velvet Footer Body */
html.lt-theme-default .mw-footer.citizen-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at top center,
            rgba(143,180,255,0.12) 0%,
            transparent 70%
        );

    opacity: 0.5;
}

html.lt-theme-default .mw-footer.citizen-footer {
    position: relative;
    background:
        linear-gradient(
            to bottom,
            rgba(8,12,28,0.9) 0%,
            rgba(3,6,15,1) 100%
        );
    border-top: 1px solid rgba(143,180,255,0.25);
    box-shadow:
        inset 0 20px 40px rgba(0,0,0,0.5);
}

html.lt-theme-default .citizen-footer__desc,
html.lt-theme-default #footer-tagline {
    color: rgba(214,226,255,0.75);
}

html.lt-theme-default #footer-places a {
    color: #8fb4ff;
    transition: color 0.2s ease;
}

html.lt-theme-default #footer-places a:hover {
    color: #d6e2ff;
}


/* Velvet Header Shell */

html.lt-theme-default .citizen-header {
    background: #050814;
    border-right: 1px solid rgba(143,180,255,0.25);
    box-shadow: inset -1px 0 0 rgba(143,180,255,0.15);
}

/* Velvet Navigation Links */

html.lt-theme-default .citizen-menu__content-list a {
    color: #d6e2ff;
}

html.lt-theme-default .citizen-menu__content-list a:hover {
    color: #8fb4ff;
    text-shadow: 0 0 6px rgba(143,180,255,0.4);
}

/* Velvet Drawer Panel */

html.lt-theme-default .citizen-drawer__card {
    background: #050814;
    border-left: 1px solid rgba(143,180,255,0.25);
    box-shadow: -4px 0 20px rgba(0,0,0,0.6);
}

html.lt-theme-default .citizen-header::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(143,180,255,0.4),
        transparent
    );
}

/* Velvet Sticky Header */

html.lt-theme-default .citizen-sticky-header {
    background: rgba(5, 8, 20, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(143,180,255,0.25);
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

html.lt-theme-default .citizen-sticky-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(143,180,255,0.6),
        transparent
    );
    animation: stickyGlow 6s ease-in-out infinite alternate;
}

@keyframes stickyGlow {
    from { opacity: 0.3; }
    to   { opacity: 0.8; }
}

html.lt-theme-default .citizen-sticky-header-background {
    background-image:
        linear-gradient(rgba(139,155,180,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,155,180,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ======== Velvet Infobox ======== */

html.lt-theme-default .lt-infobox {
    background: #050814;
    border: 1px solid #8fb4ff;
    outline: 1px solid #8fb4ff;
    outline-offset: -6px;
    box-shadow: 0 0 14px rgba(143,180,255,0.15);
    animation: lt-velvet-breathe 6s ease-in-out infinite;
}

html.lt-theme-default .lt-infobox-title {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #d6e2ff;
    text-transform: uppercase;
    letter-spacing: 4px;
    padding: 14px 10px 10px 10px;
    border-bottom: 1px solid rgba(143,180,255,0.4);
    font-size: 25px;
    text-shadow: 0 0 6px rgba(143,180,255,0.4);
}

html.lt-theme-default .lt-infobox-image {
    padding: 6px;
    border-bottom: 1px solid rgba(143,180,255,0.3);
}

html.lt-theme-default .lt-infobox-row {
    padding: 8px 12px;
    border-top: 1px solid rgba(143,180,255,0.25);
}

html.lt-theme-default .lt-infobox-label {
    color: #8fb4ff;
    font-family: "Courier New", monospace;
}

html.lt-theme-default .lt-infobox-value {
    font-family: "Courier New", monospace;
    color: #d6e2ff;
}
/* Scoped Velvet Links */

html.lt-theme-default a {
    color: #8fb4ff;
}

/* ======================================== END VELVET THEME ==================================================== */
/* ======================================== BEGIN MEMENTOS THEME ================================================ */
/* =========================
   Mementos Scrapbook Stylers
========================= */
/* Scrapbook Base */

html.lt-theme-red .scrapbook-letter {
    display: inline-block;
    position: relative;
    padding: 0 2px;
}

/* Black Box Letters */

html.lt-theme-red .scrapbook-letter.box-black {
    background: #000;
    color: #fff !important;
    padding: 2px 4px;
}

/* White Box Letters (Rare Accent) */

html.lt-theme-red .scrapbook-letter.box-white {
    background: #fff;
    color: #000 !important;
    padding: 2px 4px;
}

/* Slight rough edge feeling */
html.lt-theme-red .scrapbook-letter.box-black,
html.lt-theme-red .scrapbook-letter.box-white {
    transform-origin: center;
}

.scrap-layer {
    display: none;
}

.scrap-original {
    display: inline;
}
/* Mementos Infobox Styling */

/* Main black body */
html.lt-theme-red .lt-infobox {
    background: #000; /* main meat is black */
    border: 4px solid #ff0000; /* bright Persona red */
    box-shadow: none; /* remove any inherited shadows */
    filter: drop-shadow(10px 10px 0 #a00000);
}

/* Tilt the infobox */
html.lt-theme-red .lt-infobox {
    transform: rotate(2.5deg);
    z-index: 0;
}

/*html.lt-theme-red .lt-infobox > * {*/
/*    transform: rotate(-1deg);*/
/*}*/

/* Header Strip */
html.lt-theme-red .lt-infobox-title {
    background: #c10000;
    color: white;
    text-transform: uppercase;
    font-family: 'Anton', sans-serif; /* or scrapbook engine handles it */
    padding: 10px;
}

/* Image Border */
html.lt-theme-red .lt-infobox-image {
    padding: 6px;
    background:
        repeating-linear-gradient(
            45deg,
            #0f0f0f,
            #0f0f0f 10px,
            #292929 10px,
            #292929 20px
        );
}
html.lt-theme-red .lt-infobox-image img {
    width: 92%;
    margin: 0 auto;
    display: block;
    border: 4px solid #ffffff; /* white frame */
}

/* White trapezoid Label thingies */
html.lt-theme-red .lt-infobox-label {
    position: relative;
    font-family: 'Courier New', monospace;
    color: black;
    z-index: 1;
}
html.lt-theme-red .lt-infobox-label::before {
    content: "";
    position: absolute;
    inset: -2px -6px;
    background: white;
    transform: skewX(-15deg);
    z-index: -1;
}

/* Dotted Line Info Borders */
html.lt-theme-red .lt-infobox-row {
    border-bottom: 2px dotted #888;
}

/* Push infobox values over */
html.lt-theme-red .lt-infobox-value {
    margin-left: 12px;
    font-family: 'Courier New', monospace;
    color: white;
}
/* Lock infobox fonts in Mementos theme */

html.lt-theme-red .lt-infobox-label,
html.lt-theme-red .lt-infobox-value {
    font-family: 'Courier New', monospace !important;
}
/* Body Font */
html.lt-theme-red body {
    font-family: 'Barlow', sans-serif;
    color: white;
}

/* Mementos Content Card – Base */
html.lt-theme-red .mw-parser-output {
    background: #000;
    border: 4px solid #ffffff;
    padding: 40px;
    position: relative;

    filter: drop-shadow(16px 16px 0 #c10000);
}

.metaverse-wobble-layer {
    pointer-events: none;
}

/* Header Rectangles */
/* Make scrapbook headline layer positioning context */
html.lt-theme-red h2 .scrap-layer {
    position: relative;
    display: inline-block;
    z-index: 2;
}

/* Red slab behind scrapbook header */
html.lt-theme-red h2 .scrap-layer::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -14px;
    right: -14px;
    background: #c10000;
    z-index: -1;

    transform: translate(10px, 4px) rotate(1deg);
}

html.lt-theme-red h3 .scrap-layer {
    position: relative;
    display: inline-block;
    z-index: 2;
}

/* Red slab behind scrapbook header */
html.lt-theme-red h3 .scrap-layer::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -14px;
    right: -14px;
    background: #c10000;
    z-index: -1;

    transform: translate(10px, 4px) rotate(1deg);
}


/* Header Lines */
html.lt-theme-red h2 {
    border-bottom: 2px solid #ff0000;
    padding-bottom: 6px;
}

/* ===============================
   Mementos Background — Final
=============================== */

/* ===============================
   Mementos Background — Seamless
=============================== */

html.lt-theme-red body {
    background-color: #0b0000;
    overflow-x: hidden;
}

html.lt-theme-red body::before {
    content: "";
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: -1;

    background:
        repeating-linear-gradient(
            -30deg,
            #000 0px,
            #000 90px,
            #5c0000 90px,
            #5c0000 180px
        );

    animation: metaverse-drift 60s linear infinite;
}

@keyframes metaverse-drift {
    from { transform: translate(0px, 0px); }
    to   { transform: translate(400px, 400px); }
}

/* Mementos Footer */
html.lt-theme-red .mw-footer.citizen-footer {
    background:
        repeating-linear-gradient(
            45deg,
            #1a1a1a 0px,
            #1a1a1a 12px,
            #2a2a2a 12px,
            #2a2a2a 24px
        );

    border-top: 4px solid #c10000;
}
html.lt-theme-red .mw-footer {
    font-family: 'Barlow', sans-serif;
    color: #ffffff;
}
html.lt-theme-red #footer-places a {
    color: #ffffff;
    transition: color 0.2s ease;
}

html.lt-theme-red #footer-places a:hover {
    color: #bf0000;
}

/* RED */
/* ===============================
   Mementos — Accent Override
=============================== */

html.lt-theme-red {
    --color-primary: #a00000;
    --color-primary--hover: #ff0000;
    --color-progressive: #a00000;
    --color-progressive--hover: #ff0000;
    --color-accent: #a00000;
}

html.lt-theme-red a {
    color: #a00000;
}

html.lt-theme-red a:hover {
    color: #ff0000;
}

html.lt-theme-red a:visited {
    color: #730000;
}
html.lt-theme-red .citizen-header,
html.lt-theme-red .citizen-header a,
html.lt-theme-red .citizen-header svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* Primary buttons (Edit) */
html.lt-theme-red .cdx-button--action-primary {
    background-color: #a00000;
    border-color: #a00000;
    color: #ffffff;
}

html.lt-theme-red .cdx-button--action-primary:hover {
    background-color: #ff0000;
    border-color: #ff0000;
}
html.lt-theme-red .citizen-menu a {
    color: #ffffff;
}

html.lt-theme-red .citizen-menu a:hover {
    color: #ff0000;
}
html.lt-theme-red ::selection {
    background: #a00000;
    color: #ffffff;
}
html.lt-theme-red .page-info__label,
html.lt-theme-red .page-info__text {
    color: #ffffff !important;
}
html.lt-theme-red #citizen-sidebar-lastmod a {
    color: #ffffff !important;
}

html.lt-theme-red #citizen-sidebar-lastmod a:hover {
    color: #ff0000 !important;
}
/* Share + quiet buttons */
html.lt-theme-red .citizen-button,
html.lt-theme-red .cdx-button--weight-quiet {
    color: #ffffff !important;
    border-color: #5c0000 !important;
}

html.lt-theme-red .citizen-button:hover,
html.lt-theme-red .cdx-button--weight-quiet:hover {
    color: #ff0000 !important;
}
/* TOC heading */
html.lt-theme-red .citizen-menu__heading {
    color: #ffffff !important;
}

/* TOC links */
html.lt-theme-red .citizen-toc-link {
    color: #ffffff !important;
}

html.lt-theme-red .citizen-toc-link:hover {
    color: #ff0000 !important;
}

/* Selected section */
html.lt-theme-red .citizen-toc-list-item.is-active > .citizen-toc-link {
    color: #ff0000 !important;
}
html.lt-theme-red #siteSub {
    color: #cccccc !important;
}
html.lt-theme-red .citizen-header__logo .citizen-ui-icon-home {
    display: none;
}
html.lt-theme-red .mw-page-title-main{
	font-size: 50px;
	background: #a00000;
    padding: 6px 12px;
    display: inline-block;
    transform: skewX(-8deg);
}
/* Sticky Header — Gray Stripe */

html.lt-theme-red .citizen-sticky-header-background {
    background:
        repeating-linear-gradient(
            135deg,
            #2a2a2a 0px,
            #2a2a2a 12px,
            #1a1a1a 12px,
            #1a1a1a 24px
        ) !important;
}

html.lt-theme-red .citizen-sticky-header {
    border-bottom: 2px solid #ffffff;
}
/* Header */
html.lt-theme-red .citizen-header {
    background: #000000 !important;
    border-right: 3px solid #a00000;
    border-top: 3px solid #a00000;
}

/* Sidebar */
html.lt-theme-red .citizen-drawer__card {
    background: #0a0a0a !important;
    border-left: 4px solid #a00000;
}

/* Menu Card */
html.lt-theme-red .citizen-menu__card {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 6px 6px 0px #a00000 !important;
}
/* Wordmark red backing */
html.lt-theme-red .mw-logo-wordmark {
    background: #a00000;
    padding: 6px 12px;
    display: inline-block;
    transform: skewX(-8deg);
}

html.lt-theme-red .mw-logo-wordmark span {
    transform: skewX(8deg);
    display: inline-block;
}
/* Remove sticky header hover background + ring */
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:hover,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:active,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:focus,
html.lt-theme-red .citizen-sticky-header .cdx-button--weight-quiet:focus-visible {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ===============================
   Mementos — Command Palette
=============================== */

html.lt-theme-red .citizen-command-palette {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 12px 12px 0 #a00000 !important;

    /* Kill Codex blue tokens */
    --color-progressive: #a00000;
    --color-progressive--hover: #ff0000;
    --color-base: #ffffff;
    --color-base--hover: #ff0000;
    --color-subtle: #5c0000;
    --color-subtle--hover: #ff0000;
}

html.lt-theme-red .citizen-command-palette .cdx-text-input {
    background: #0a0a0a !important;
    border: 2px solid #a00000 !important;
}

html.lt-theme-red .citizen-command-palette .cdx-text-input__input {
    color: #ffffff !important;
}

html.lt-theme-red .citizen-command-palette .cdx-text-input__input::placeholder {
    color: #888888 !important;
}

html.lt-theme-red .citizen-command-palette .cdx-text-input:focus-within {
    border-color: #ff0000 !important;
    box-shadow: 0 0 0 2px #ff0000 !important;
}

html.lt-theme-red .citizen-command-palette-list-item {
    background: transparent !important;
    color: #ffffff !important;
}

html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
    background: #a00000 !important;
    color: #ffffff !important;
}

html.lt-theme-red .citizen-command-palette .cdx-button--weight-quiet {
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html.lt-theme-red .citizen-command-palette .cdx-button--weight-quiet:hover {
    color: #ff0000 !important;
}
/* ===============================
   Mementos — Command Palette Clean Hover
=============================== */

/* Remove all gradient + shading */
html.lt-theme-red .citizen-command-palette-list-item,
html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
    background-image: none !important;
    box-shadow: none !important;
}

/* Flat red hover */
html.lt-theme-red .citizen-command-palette-list-item:hover,
html.lt-theme-red .citizen-command-palette-list-item[aria-selected="true"] {
    background-color: #c10000 !important;
    color: #ffffff !important;
}

/* Remove subtle Codex hover token influence */
html.lt-theme-red .citizen-command-palette {
    --background-color-interactive-subtle: transparent !important;
    --background-color-interactive-subtle--hover: #c10000 !important;
}
/* ===============================
   Mementos — Command Palette Text Fix
=============================== */

/* Descriptions like "Create or edit page" */
html.lt-theme-red .citizen-command-palette-list-item__text__description,
html.lt-theme-red .citizen-command-palette-list-item__text__description bdi {
    color: #ffffff !important;
}

/* Footer note: "Type : to search for namespace" */
html.lt-theme-red .citizen-command-palette__footer-note {
    color: #ffffff !important;
}

/* Metadata text like "Action" */
html.lt-theme-red .citizen-command-palette-list-item__metadata__item {
    color: #ffffff !important;
}
/* ======================================== END MEMENTOS THEME ==================================================== */
/* ======================================== BEGIN JUSTICE THEME ================================================ */

/* Typography  global setting */
html.lt-theme-blue,
html.lt-theme-blue body {
    font-family: Georgia, "Times New Roman", Times, serif !important;
}
/* Everything except the Ace Editor (that would be bad) */
html.lt-theme-blue body,
html.lt-theme-blue .mw-parser-output,
html.lt-theme-blue .citizen-content,
html.lt-theme-blue h1,
html.lt-theme-blue h2,
html.lt-theme-blue h3,
html.lt-theme-blue h4,
html.lt-theme-blue h5,
html.lt-theme-blue h6 {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #ffffff;
}

html.lt-theme-blue .lt-infobox {
    position: relative;
    background: #ffffff;

    border: 6px solid #2f6fb3;   /* thick blue */
    outline: 2px solid #ffffff;  /* thin white outer */

    padding: 0;
}
html.lt-theme-blue .lt-infobox::before,
html.lt-theme-blue .lt-infobox::after,
html.lt-theme-blue .lt-infobox .lt-infobox-section::before,
html.lt-theme-blue .lt-infobox .lt-infobox-section::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    border: 6px solid #2f6fb3;
    z-index: 10;
}

/* Top Left */
html.lt-theme-blue .lt-infobox::before {
    top: -18px;
    left: -18px;
    border-right: none;
    border-bottom: none;
}

/* Top Right */
html.lt-theme-blue .lt-infobox::after {
    top: -18px;
    right: -18px;
    border-left: none;
    border-bottom: none;
}

/* Bottom Left */
html.lt-theme-blue .lt-infobox .lt-infobox-section::before {
    bottom: -18px;
    left: -18px;
    border-right: none;
    border-top: none;
}

/* Bottom Right */
html.lt-theme-blue .lt-infobox .lt-infobox-section::after {
    bottom: -18px;
    right: -18px;
    border-left: none;
    border-top: none;
}
html.lt-theme-blue .lt-infobox-row {
    padding: 5px 5px;
    border-bottom: 2px dashed #000;
}

html.lt-theme-blue .lt-infobox-row:last-child {
    border-bottom: none;
}
html.lt-theme-blue .lt-infobox-label {
    font-weight: bold;
    color: #1d3557;
}

html.lt-theme-blue .lt-infobox-value {
    color: #000000;
}
html.lt-theme-blue .lt-infobox-title {
    padding: 6px 0;          /* reduced vertical padding */
    font-size: 35px;
    border-bottom: 3px solid #2f6fb3;
    text-align: center;
    color: #000;
}
html.lt-theme-blue .lt-infobox-title span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    z-index: 1;
}
html.lt-theme-blue .lt-infobox-title span::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;

    top: 22%;      /* controls top gap */
    bottom: 22%;   /* controls bottom gap */

    background: #f2c230;
    z-index: -1;
}
/* Blue image panel */
html.lt-theme-blue .lt-infobox-image {
    background: #2f6fb3;
    padding: 3px;
    text-align: center;
}

/* Scale image down slightly */
html.lt-theme-blue .lt-infobox-image img {
    max-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}
html.lt-theme-blue .mw-parser-output {
    background: rgba(0, 20, 50, 0.85);
	backdrop-filter: blur(2px);
    border: 1px solid #ffffff;            /* razor thin white border */
    padding: 36px 40px;
    position: relative;
}
html.lt-theme-blue .mw-parser-output::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index:0;

    background-image:
        linear-gradient(45deg,
            rgba(255,255,255,0.04) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,0.04) 75%
        ),
        linear-gradient(45deg,
            rgba(255,255,255,0.04) 25%,
            transparent 25%,
            transparent 75%,
            rgba(255,255,255,0.04) 75%
        );

    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;

    opacity: 0.25;
}

/* Header Hexagons */
/* Header Hexagons */

/* Shrink wrapper to content */
html.lt-theme-blue .mw-parser-output .mw-heading > h2 {
    display: inline-block;
    position: relative;
    padding: 5px 36px;
    margin: 30px 0 20px 0;

    color: #ffffff;
    font-weight: normal;
    border: none;
    z-index: 1;
}

/* Blue hex background */
html.lt-theme-blue .mw-parser-output .mw-heading > h2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #4a8fb6;
    z-index: -1;

    clip-path: polygon(
        8% 0%,
        92% 0%,
        100% 50%,
        92% 100%,
        8% 100%,
        0% 50%
    );
}

/* White border layer */
html.lt-theme-blue .mw-parser-output .mw-heading > h2::after {
    content: "";
    position: absolute;
    inset: -2px;
    background: #ffffff;
    z-index: -2;

    clip-path: polygon(
        8% 0%,
        92% 0%,
        100% 50%,
        92% 100%,
        8% 100%,
        0% 50%
    );
}
html.lt-theme-blue .mw-parser-output .mw-heading2 {
    display: flex;
    align-items: center;   /* vertical center */
    gap: 20px;             /* space between hex and line */
    margin: 40px 0 25px 0;
}

/* The actual H2 (your hex lives here) */
html.lt-theme-blue .mw-parser-output .mw-heading2 > h2 {
    position: relative;
    margin: 0;
    z-index: 2;
}

/* The white line — built as a pseudo flex item */
html.lt-theme-blue .mw-parser-output .mw-heading2::after {
    content: "";
    flex: 1;               /* fills remaining space */
    height: 2px;
    background: #ffffff;
}
/* H2 wrapper becomes flex */
html.lt-theme-blue .mw-parser-output .mw-heading2 {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* LOCK the hex width */
html.lt-theme-blue .mw-parser-output .mw-heading2 > h2 {
    flex: 0 0 auto;   /* do not stretch */
    margin: 0;        /* override earlier margin */
}

/* The white horizontal line */
html.lt-theme-blue .mw-parser-output .mw-heading2::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #ffffff;
}

/* Courtroom BG */
html.lt-theme-blue body {
    position: relative;
    background-color: #0b1a2b; /* fallback navy */
}

html.lt-theme-blue body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background-image: url("/images/c/cc/Screenshot-court.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(6px);
    transform: scale(1.05); /* prevents blur edge clipping */
}

/* Header */
html.lt-theme-blue .citizen-page-header {
    background: linear-gradient(
	    to bottom,
	    #7a5029 0%,
	    #6b4524 20%,
	    #5a3b1e 60%,
	    #3f2613 100%
	);

    border-bottom: 4px solid #d4af37; /* gold accent */
    border-top: 4px solid #d4af37; /* gold accent */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Make all header text/icons white */
html.lt-theme-blue .citizen-page-header,
html.lt-theme-blue .citizen-page-header a,
html.lt-theme-blue .citizen-page-header svg,
html.lt-theme-blue .citizen-page-header span {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Sticky Header */
html.lt-theme-blue .citizen-sticky-header {
    background: linear-gradient(
	    to bottom,
	    #7a5029 0%,
	    #6b4524 20%,
	    #5a3b1e 60%,
	    #3f2613 100%
	);

    border-bottom: 4px solid #d4af37; /* gold accent */
}

/* Remove any inherited weird borders */
html.lt-theme-blue .citizen-sticky-header::after {
    display: none;
}

/* Page Title */
html.lt-theme-blue .mw-page-title-main {

    font-size: 60px;
    font-weight: 900;
    letter-spacing: 1px;

    background: linear-gradient(
        to bottom,
        #6fd0ff 0%,
        #2f8fe5 45%,
        #0c4aa3 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* Clean white inner stroke */
    -webkit-text-stroke: 2px #ffffff;

    /* Black outer stroke */
    filter:
	    drop-shadow(0 0 0 #000)
	    drop-shadow(3px 0 0 #000)
	    drop-shadow(-3px 0 0 #000)
	    drop-shadow(0 3px 0 #000)
	    drop-shadow(0 -3px 0 #000);
}

/* Wordmark */
html.lt-theme-blue .mw-logo-wordmark .wm-original {

    font-size: 38px; /* adjust as needed */
    font-weight: 900;
    letter-spacing: 1px;
    background: linear-gradient(
        to bottom,
        #6fd0ff 0%,
        #2f8fe5 45%,
        #0c4aa3 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* White inner stroke */
    -webkit-text-stroke: 1px #ffffff;

    /* Black outer stroke */
    filter:
        drop-shadow(0 0 0 #000)
        drop-shadow(2px 0 0 #000)
        drop-shadow(-2px 0 0 #000)
        drop-shadow(0 2px 0 #000)
        drop-shadow(0 -2px 0 #000);
}
html.lt-theme-blue .citizen-header {

    background: linear-gradient(
        to bottom,
        #7a5029 0%,
        #6b4524 20%,
        #5a3b1e 60%,
        #3f2613 100%
    );

    border-right: 4px solid #d4af37; /* gold accent */
    box-shadow: 4px 0 12px rgba(0,0,0,0.5);
}
html.lt-theme-blue .mw-footer.citizen-footer {

    background: linear-gradient(
        to bottom,
        #7a5029 0%,
        #6b4524 20%,
        #5a3b1e 60%,
        #3f2613 100%
    );

    border-top: 4px solid #d4af37; /* gold accent on top */

    box-shadow: inset 0 8px 18px rgba(0,0,0,0.4);
}
html.lt-theme-blue .mw-footer,
html.lt-theme-blue .mw-footer a,
html.lt-theme-blue .mw-footer span,
html.lt-theme-blue .mw-footer li {
    color: #ffffff !important;
}
html.lt-theme-blue .mw-footer a:hover {
    color: #d4af37 !important;
    text-shadow: 0 0 6px rgba(212,175,55,0.6);
}
html.lt-theme-blue .mw-footer.citizen-footer {
    box-shadow:
        inset 0 8px 18px rgba(0,0,0,0.4),
        0 -2px 12px rgba(212,175,55,0.25);
}

/* Codex */
/* Main popout panels (menus, dropdowns, palette) */
html.lt-theme-blue .citizen-menu__card,
html.lt-theme-blue .citizen-command-palette,
html.lt-theme-blue .cdx-menu,
html.lt-theme-blue .cdx-dialog {

    background: #4a8fb6;

    border: 1px solid #ffffff; /* razor thin white */
    box-shadow: 0 10px 24px rgba(0,0,0,0.6);

    color: #ffffff !important;
}
html.lt-theme-blue .citizen-command-palette *,
html.lt-theme-blue .citizen-menu__card *,
html.lt-theme-blue .cdx-menu *,
html.lt-theme-blue .cdx-dialog * {
    color: #ffffff !important;
}
/* Hover / selected rows */
html.lt-theme-blue .citizen-command-palette-list-item:hover,
html.lt-theme-blue .citizen-command-palette-list-item[aria-selected="true"],
html.lt-theme-blue .cdx-menu__item:hover,
html.lt-theme-blue .cdx-menu__item[aria-selected="true"] {

    background-color: #f2c230 !important; /* gold */
    color: #000000 !important;
}

/* Remove Codex gradient overlays */
html.lt-theme-blue .citizen-command-palette-list-item,
html.lt-theme-blue .cdx-menu__item {
    background-image: none !important;
}
html.lt-theme-blue .cdx-text-input {
    background: #2f6fa0 !important;
    border: 1px solid #ffffff !important;
}

html.lt-theme-blue .cdx-text-input__input {
    color: #ffffff !important;
}

html.lt-theme-blue .cdx-text-input:focus-within {
    border-color: #f2c230 !important;
    box-shadow: 0 0 0 2px rgba(242,194,48,0.4) !important;
}
html.lt-theme-blue .cdx-button {
    border: 1px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
}

html.lt-theme-blue .cdx-button:hover {
    background: #f2c230 !important;
    color: #000000 !important;
}
html.lt-theme-blue .citizen-command-palette::before,
html.lt-theme-blue .citizen-menu__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;

    background: #4a8fb6;
    background-size: 6px 6px;
}
html.lt-theme-blue #siteSub {
    color: #f2c230 !important;
    font-size: 16px;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
html.lt-theme-blue #citizen-sidebar-lastmod {

    background: #4a8fb6;

    border: 1px solid #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);

    color: #ffffff;
}

/* Heading */
html.lt-theme-blue #citizen-sidebar-lastmod .citizen-menu__heading {
    color: #ffffff;
    font-weight: bold;
}

/* Link */
html.lt-theme-blue #citizen-sidebar-lastmod a {
    color: #ffffff !important;
}

html.lt-theme-blue #citizen-sidebar-lastmod a:hover {
    background-color: #f2c230 !important;
    color: #000000 !important;
}
html.lt-theme-blue #uploadtext,
html.lt-theme-blue .mw-htmlform {

    background: #4a8fb6;

    border: 1px solid #ffffff;
    padding: 20px;
    margin-bottom: 25px;

    color: #ffffff;
}
html.lt-theme-blue fieldset {

    border: 1px solid #ffffff;
    padding: 16px;
    margin-bottom: 20px;
}

html.lt-theme-blue legend {
    color: #ffffff;
    font-weight: bold;
}
html.lt-theme-blue input,
html.lt-theme-blue textarea,
html.lt-theme-blue select {

    background: #2f6fa0;
    border: 1px solid #ffffff;
    color: #ffffff;

    padding: 6px;
}

html.lt-theme-blue input:focus,
html.lt-theme-blue textarea:focus,
html.lt-theme-blue select:focus {

    border-color: #f2c230;
    box-shadow: 0 0 0 2px rgba(242,194,48,0.4);
    outline: none;
}
html.lt-theme-blue .mw-htmlform-submit {

    background: #f2c230;
    border: 1px solid #ffffff;
    color: #000000;
    font-weight: bold;
    padding: 8px 18px;
}

html.lt-theme-blue .mw-htmlform-submit:hover {
    background: #ffd75e;
}
html.lt-theme-blue a {
    color: #f2c230;
    text-decoration: none;
}
html.lt-theme-blue a:hover {
    color: #ffd75e;
    text-decoration: underline;
}
html.lt-theme-blue a:visited {
    color: #d4af37;
}
html.lt-theme-blue #footer-info-lastmod,
html.lt-theme-blue .page-info__item {

    background: #4a8fb6;

    border: 1px solid #ffffff;
    padding: 10px 14px;
    margin-top: 10px;

    color: #ffffff;
}

html.lt-theme-blue .page-info__label {
    color: #ffffff !important;
    font-weight: bold;
}

html.lt-theme-blue .page-info__text {
    color: #ffffff !important;
}
html.lt-theme-blue {

    --color-primary: #f2c230;
    --color-primary--hover: #ffd75e;

    --color-progressive: #f2c230;
    --color-progressive--hover: #ffd75e;

    --color-accent: #f2c230;

    --background-color-progressive: #f2c230;
    --background-color-progressive--hover: #ffd75e;

    --border-color-progressive: #f2c230;
}