MediaWiki:Common.css: Difference between revisions

Revision as of 18:51, 12 April 2026

/* ═══════════════════════════════════════════════════════════════════
   MediaWiki:Common.css — TimeRO Wiki Design System (Revised)
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

/* ── Main Page layout overrides ───────────────────────────────── */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

body.page-Main_Page #bodyContent,
body.page-Main_Page .mw-body-content,
body.page-Main_Page .mw-parser-output {
    background: transparent !important;
    padding: 0 !important;
}

body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #contentSub {
    display: none !important;
}

/* ── Keyframes ─────────────────────────────────────────────────── */
@keyframes timero-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes timero-blink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes timero-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ── Root ─────────────────────────────────────────────────────── */
.timero-wiki-root,
.timero-wiki-root * {
    box-sizing: border-box;
    font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}

.timero-wiki-root {
    margin: -1em -1.5em;
    background: #05080f;
    color: #e8eef8;
    min-height: 100vh;
}

.timero-wiki-root h2 {
    font-family: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
    border: none !important;
    line-height: 1;
}

.timero-wiki-root p {
    margin: 0;
}

.timero-wiki-root a {
    color: inherit !important;
    text-decoration: none !important;
}

.timero-wiki-root a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.timero-hero {
    position: relative;
    background:
        radial-gradient(circle at 18% 16%, rgba(0,212,255,0.08), transparent 22%),
        radial-gradient(circle at 84% 14%, rgba(249,168,38,0.08), transparent 20%),
        radial-gradient(ellipse at 50% 100%, rgba(176,108,255,0.06), transparent 32%),
        linear-gradient(160deg, #02040a 0%, #071020 40%, #0a1628 70%, #06101e 100%);
    padding: 64px 48px 52px;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,212,255,0.15);
    border-radius: 0 0 24px 24px;
    animation: timero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.timero-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(0,212,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 10%, transparent 80%);
    animation: timero-grid-drift 8s linear infinite;
}

.timero-hero > * {
    position: relative;
    z-index: 1;
}

/* online status pill dot */
.timero-hero span[style*="width:7px"][style*="height:7px"] {
    animation: timero-blink 1.6s ease-in-out infinite;
}

/* main title */
.timero-hero div[style*="font-size:clamp(3rem,8vw,6.5rem)"] {
    background: linear-gradient(180deg, #ffffff 0%, #00d4ff 45%, #f9a826 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: timero-shimmer 7s linear infinite;
}

/* ── Buttons / CTA pills ──────────────────────────────────────── */
.timero-btn,
.timero-wiki-root span.timero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 22px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00d4ff, #7a37ff);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0,212,255,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.timero-btn:hover,
.timero-wiki-root span.timero-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0,212,255,0.35);
    filter: brightness(1.05);
}

/* ── Sections ─────────────────────────────────────────────────── */
.timero-section {
    padding: 56px 48px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    animation: timero-fade-up 0.7s both;
}

.timero-section:nth-of-type(2) { animation-delay: 0.1s; }
.timero-section:nth-of-type(3) { animation-delay: 0.2s; }
.timero-section:nth-of-type(4) { animation-delay: 0.3s; }
.timero-section:nth-of-type(5) { animation-delay: 0.4s; }

/* ── Grids ────────────────────────────────────────────────────── */
.timero-grid {
    display: grid;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

.timero-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 960px;
}

.timero-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.timero-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ── Cards ────────────────────────────────────────────────────── */
.timero-card {
    background: linear-gradient(160deg, rgba(10,20,36,0.9), rgba(6,12,24,0.95));
    border: 1px solid rgba(0,212,255,0.14);
    border-radius: 18px;
    padding: 28px 22px;
    position: relative;
    overflow: hidden;
    color: #e8eef8;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.24s ease,
                border-color 0.24s ease;
}

.timero-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.9), transparent);
    opacity: 0.9;
}

.timero-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 212, 255, 0.14);
    border-color: rgba(0,212,255,0.28);
}

/* colored variants by inline content tone */
.timero-card [style*="rgba(249,168,38"] { color: #f9a826 !important; }
.timero-card [style*="rgba(176,108,255"] { color: #b06cff !important; }
.timero-card [style*="rgba(0,255,136"] { color: #00ff88 !important; }

/* ── Text tuning inside cards ────────────────────────────────── */
.timero-card div[style*="font-size:1.05rem"][style*="font-weight:800"] {
    color: #fff !important;
    margin-bottom: 8px;
}

.timero-card div[style*="font-size:0.88rem"] {
    color: rgba(168,186,214,0.82) !important;
    line-height: 1.65 !important;
}

/* ── Footer / final section ───────────────────────────────────── */
.timero-section[style*="text-align:center"] {
    text-align: center;
}

.timero-section[style*="text-align:center"] p {
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .timero-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .timero-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .timero-hero,
    .timero-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .timero-grid-4,
    .timero-grid-3,
    .timero-grid-2 {
        grid-template-columns: 1fr;
    }

    .timero-hero div[style*="display:flex"][style*="justify-content:center"] {
        flex-direction: column !important;
        align-items: center !important;
    }

    .timero-btn,
    .timero-wiki-root span.timero-btn {
        width: 100%;
        max-width: 280px;
    }
}

@media print {
    .timero-hero::before {
        display: none !important;
    }

    .timero-wiki-root,
    .timero-hero,
    .timero-section,
    .timero-card {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
}