MediaWiki:Common.css: Difference between revisions
Rebrand: BigBro palette (#FF7900), domain-agnostic image URLs, header |
Add Choose Your Path card styles |
||
| Line 544: | Line 544: | ||
color: #ffffff !important; | color: #ffffff !important; | ||
-webkit-text-fill-color: #ffffff !important; | -webkit-text-fill-color: #ffffff !important; | ||
} | |||
/* ============================================ | |||
CHOOSE YOUR PATH — homepage wayfinding cards | |||
============================================ */ | |||
.ax-path-section { margin: 4px 0 40px 0; } | |||
.ax-path-head { text-align: center; margin-bottom: 26px; } | |||
.ax-path-head h2 { | |||
font-size: 34px; | |||
font-weight: 800; | |||
color: #FF7900 !important; | |||
border: none !important; | |||
margin: 0 0 14px 0; | |||
letter-spacing: 0.3px; | |||
} | |||
.ax-path-head p { | |||
font-size: 15px; | |||
color: #999999; | |||
max-width: 600px; | |||
margin: 0 auto; | |||
line-height: 1.65; | |||
} | |||
.ax-path-grid-3 { | |||
display: grid; | |||
grid-template-columns: repeat(3, 1fr); | |||
gap: 16px; | |||
margin-bottom: 16px; | |||
} | |||
.ax-path-grid-2 { | |||
display: grid; | |||
grid-template-columns: repeat(2, 1fr); | |||
gap: 16px; | |||
} | |||
.ax-path-card { | |||
display: block; | |||
background: #161616; | |||
border: 1px solid #2E2E2E; | |||
border-radius: 18px; | |||
padding: 26px 26px 24px 26px; | |||
text-decoration: none !important; | |||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; | |||
} | |||
.ax-path-card:hover { | |||
border-color: rgba(255,102,0,0.55); | |||
box-shadow: 0 0 26px rgba(255,102,0,0.10); | |||
transform: translateY(-2px); | |||
} | |||
.ax-path-num { | |||
display: block; | |||
font-size: 12px; | |||
letter-spacing: 0.14em; | |||
color: #5a5a5a; | |||
font-weight: 600; | |||
margin-bottom: 16px; | |||
} | |||
.ax-path-icon { | |||
display: inline-flex; | |||
width: 48px; | |||
height: 48px; | |||
border-radius: 13px; | |||
background: rgba(255,102,0,0.10); | |||
border: 1px solid rgba(255,102,0,0.28); | |||
align-items: center; | |||
justify-content: center; | |||
margin-bottom: 20px; | |||
} | |||
.ax-path-title { | |||
font-size: 19px; | |||
font-weight: 700; | |||
color: #FFFFFF !important; | |||
margin-bottom: 10px; | |||
line-height: 1.25; | |||
} | |||
.ax-path-desc { | |||
font-size: 14px; | |||
line-height: 1.6; | |||
color: #9a9a9a; | |||
margin-bottom: 18px; | |||
} | |||
.ax-path-cta { | |||
font-size: 14px; | |||
font-weight: 600; | |||
color: #FF7900 !important; | |||
} | |||
.ax-path-card:hover .ax-path-cta { color: #FFA24A !important; } | |||
/* Wide cards (bottom row) — horizontal layout */ | |||
.ax-path-card-wide { | |||
display: flex; | |||
align-items: center; | |||
gap: 22px; | |||
} | |||
.ax-path-card-wide .ax-path-num { margin-bottom: 0; } | |||
.ax-path-card-wide .ax-path-icon { margin-bottom: 0; flex-shrink: 0; } | |||
.ax-path-card-wide .ax-path-title { margin-bottom: 0; } | |||
.ax-path-card-wide .ax-path-desc { margin-bottom: 0; } | |||
@media (max-width: 900px) { | |||
.ax-path-grid-3, .ax-path-grid-2 { grid-template-columns: 1fr; } | |||
.ax-path-head h2 { font-size: 28px; } | |||
.ax-path-card-wide { flex-wrap: wrap; gap: 14px; } | |||
.ax-path-card-wide .ax-path-desc { flex-basis: 100%; } | |||
} | } | ||