140 lines
3.5 KiB
CSS
140 lines
3.5 KiB
CSS
/**
|
|
* WEVIA Portal Consistency CSS · Wave 221 · 2026-04-21
|
|
* Applied to: all-ia-hub.html, wevia-master.html, wevia-orchestrator.html
|
|
* Non-destructive: only adds top banner + shared focus style. Never overrides page-specific CSS.
|
|
*/
|
|
|
|
/* Shared top banner linking portals together */
|
|
.wevia-portal-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 10px 18px;
|
|
background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(168,85,247,0.08) 50%, rgba(236,72,153,0.08) 100%);
|
|
border-bottom: 1px solid rgba(34,211,238,0.15);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
font-size: 12px;
|
|
position: relative;
|
|
z-index: 9999;
|
|
}
|
|
.wevia-portal-banner-label {
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
}
|
|
.wevia-portal-banner-link {
|
|
color: #a5f3fc;
|
|
text-decoration: none;
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
background: rgba(34,211,238,0.08);
|
|
border: 1px solid rgba(34,211,238,0.25);
|
|
font-weight: 600;
|
|
font-size: 11.5px;
|
|
transition: all 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
.wevia-portal-banner-link:hover {
|
|
background: rgba(34,211,238,0.2);
|
|
border-color: rgba(34,211,238,0.5);
|
|
transform: translateY(-1px);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="master"] {
|
|
color: #ddd6fe;
|
|
background: rgba(168,85,247,0.08);
|
|
border-color: rgba(168,85,247,0.25);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="master"]:hover {
|
|
background: rgba(168,85,247,0.2);
|
|
border-color: rgba(168,85,247,0.5);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="arena"] {
|
|
color: #fbcfe8;
|
|
background: rgba(236,72,153,0.08);
|
|
border-color: rgba(236,72,153,0.25);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="arena"]:hover {
|
|
background: rgba(236,72,153,0.2);
|
|
border-color: rgba(236,72,153,0.5);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="hub"] {
|
|
color: #bae6fd;
|
|
background: rgba(14,165,233,0.08);
|
|
border-color: rgba(14,165,233,0.25);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="hub"]:hover {
|
|
background: rgba(14,165,233,0.2);
|
|
border-color: rgba(14,165,233,0.5);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="wtp"] {
|
|
color: #6ee7b7;
|
|
background: rgba(16,185,129,0.08);
|
|
border-color: rgba(16,185,129,0.25);
|
|
}
|
|
.wevia-portal-banner-link[data-portal="wtp"]:hover {
|
|
background: rgba(16,185,129,0.2);
|
|
border-color: rgba(16,185,129,0.5);
|
|
}
|
|
.wevia-portal-banner-link.wevia-current {
|
|
opacity: 0.55;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
.wevia-portal-badge-wave {
|
|
margin-left: auto;
|
|
padding: 3px 10px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #22d3ee, #a855f7);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Universal focus-visible for a11y (doctrine wave 215 reinforce) */
|
|
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
|
|
outline: 2px solid #22d3ee;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Smooth scroll behaviour */
|
|
html { scroll-behavior: smooth; }
|
|
|
|
/* Mobile responsive · Wave 222 */
|
|
@media (max-width: 768px) {
|
|
.wevia-portal-banner {
|
|
flex-wrap: wrap;
|
|
padding: 8px 12px;
|
|
gap: 8px;
|
|
}
|
|
.wevia-portal-banner-label {
|
|
width: 100%;
|
|
margin-bottom: 4px;
|
|
}
|
|
.wevia-portal-banner-link {
|
|
font-size: 10.5px;
|
|
padding: 3px 8px;
|
|
}
|
|
.wevia-portal-badge-wave {
|
|
margin-left: 0;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.wevia-portal-banner-link {
|
|
font-size: 9.5px;
|
|
padding: 3px 6px;
|
|
}
|
|
.wevia-portal-banner-link span, .wevia-portal-banner-label {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
/* Print friendly */
|
|
@media print {
|
|
.wevia-portal-banner { display: none; }
|
|
}
|