MediaWiki:Common.css: Difference between revisions

/* =========================================
   EAGLESPEED OVERSEAS LOGISTICS
   Premium Corporate Theme v1
=========================================*/

:root{

--primary:#0A2F6B;
--secondary:#1565D8;
--accent:#1F8BFF;

--dark:#09131F;
--light:#F7F9FC;
--white:#ffffff;

--text:#2D3748;
--muted:#6B7280;

--radius:18px;

--shadow:0 15px 45px rgba(0,0,0,.08);

--transition:.35s;

}

/* Reset */

html{
scroll-behavior:smooth;
}

body{

background:var(--light);

color:var(--text);

font-family:
Inter,
"Segoe UI",
Roboto,
Arial,
sans-serif;

font-size:16px;

line-height:1.8;

}

/* Remove wiki look */

.mw-page-container{

max-width:100%!important;

}

.mw-body{

max-width:1600px!important;

margin:auto!important;

padding:40px!important;

background:white!important;

border-radius:20px;

box-shadow:var(--shadow);

}

/* Links */

a{

color:var(--secondary);

transition:.25s;

text-decoration:none;

}

a:hover{

color:var(--primary);

}

/* Headings */

h1{

font-size:52px;

font-weight:800;

border:none;

margin-bottom:15px;

color:var(--dark);

}

h2{

font-size:36px;

font-weight:700;

border:none;

margin-top:60px;

margin-bottom:25px;

color:var(--primary);

}

h3{

font-size:26px;

margin-bottom:15px;

color:var(--primary);

}

/* Hero */

.hero{

background:

linear-gradient(
135deg,
#02142f,
#004bb3,
#0A7BFF
);

border-radius:28px;

padding:100px 60px;

text-align:center;

color:white;

position:relative;

overflow:hidden;

margin-bottom:60px;

}

.hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:

rgba(255,255,255,.06);

border-radius:50%;

right:-180px;

top:-180px;

}

.hero img{

width:170px;

margin-bottom:30px;

filter:drop-shadow(0 12px 35px rgba(0,0,0,.35));

}

.hero h1{

color:white;

font-size:70px;

margin:0;

}

.hero p{

font-size:22px;

opacity:.92;

max-width:900px;

margin:auto;

margin-top:25px;

}

/* Buttons */

.button{

display:inline-block;

padding:18px 36px;

margin:12px;

border-radius:14px;

font-weight:700;

transition:var(--transition);

}

.button-primary{

background:white;

color:var(--primary)!important;

}

.button-primary:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.2);

}

.button-secondary{

border:2px solid rgba(255,255,255,.45);

color:white!important;

}

.button-secondary:hover{

background:white;

color:var(--primary)!important;

}

/* Cards */

.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:28px;

margin:50px 0;

}

.card{

background:white;

border-radius:20px;

padding:35px;

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid #ECECEC;

}

.card:hover{

transform:translateY(-10px);

box-shadow:

0 25px 60px rgba(0,0,0,.15);

}

.card h3{

margin-top:0;

}

/* Statistics */

.stats{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(180px,1fr));

gap:25px;

margin:60px 0;

}

.stat{

background:

linear-gradient(
135deg,
#003b8f,
#006EFF
);

border-radius:20px;

padding:35px;

color:white;

text-align:center;

}

.stat h1{

color:white;

font-size:52px;

margin:0;

}

.stat p{

margin:10px 0 0;

}

/* Table */

table.wikitable{

border:none!important;

box-shadow:var(--shadow);

border-radius:16px;

overflow:hidden;

}

table.wikitable th{

background:var(--primary);

color:white;

}

/* Footer */

.footer{

margin-top:80px;

padding:50px;

background:#09131F;

color:white;

border-radius:20px;

text-align:center;

}

/* Mobile */

@media(max-width:900px){

.mw-body{

padding:20px!important;

}

.hero{

padding:60px 25px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

h2{

font-size:28px;

}

}