|
|
| Line 1: |
Line 1: |
| /* CEO.wiki - Wikipedia-like styling with subtle enhancements */ | | /* ============================================ |
| | ACCOUNT CREATION PAGE STYLING |
| | Center all form elements |
| | ============================================ */ |
|
| |
|
| /* Keep templates functional but remove heavy styling */ | | /* Center the entire create account form */ |
| .infobox { | | .mw-special-CreateAccount #userloginForm, |
| float: right;
| | .mw-special-Userlogin #userloginForm { |
| clear: right;
| | max-width: 500px; |
| width: 22em;
| | margin: 0 auto; |
| margin: 0.5em 0 0.5em 1em;
| |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa; | |
| padding: 0.2em; | |
| font-size: 88%;
| |
| line-height: 1.5em;
| |
| }
| |
| | |
| .infobox-image {
| |
| text-align: center; | | text-align: center; |
| padding: 0.2em;
| |
| } | | } |
|
| |
|
| .infobox-header { | | /* Center all form rows */ |
| background-color: #eaecf0;
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLTextField, |
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLPasswordField, |
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLEmailField, |
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLCheckField, |
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField { |
| text-align: center; | | text-align: center; |
| padding: 0.4em; | | margin: 0 auto; |
| }
| |
| | |
| .infobox-title {
| |
| font-size: 125%;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .infobox-subtitle {
| |
| font-size: 100%;
| |
| }
| |
| | |
| .infobox-section {
| |
| border-top: 1px solid #a2a9b1;
| |
| padding: 0.3em 0.5em;
| |
| } | | } |
|
| |
|
| .infobox-section-header { | | /* Center labels */ |
| font-weight: bold;
| | .mw-special-CreateAccount .mw-label, |
| padding: 0.2em 0;
| | .mw-special-CreateAccount label { |
| }
| | display: block; |
| | |
| .infobox-row {
| |
| margin: 0.2em 0;
| |
| }
| |
| | |
| .infobox-label { | |
| font-weight: bold;
| |
| }
| |
| | |
| .infobox-data { | |
|
| |
| }
| |
| | |
| /* Performance charts - Wikipedia table style */
| |
| .performance-chart {
| |
| margin: 1em 0; | |
| border: 1px solid #a2a9b1;
| |
| background-color: #f8f9fa;
| |
| padding: 0.5em;
| |
| }
| |
| | |
| .chart-header {
| |
| text-align: center; | | text-align: center; |
| padding: 0.5em; | | margin: 10px auto 5px auto; |
| border-bottom: 1px solid #a2a9b1;
| | font-weight: 600; |
| }
| |
| | |
| .chart-title {
| |
| font-size: 120%;
| |
| font-weight: bold; | |
| } | | } |
|
| |
|
| .metrics-grid { | | /* Center input fields */ |
| display: table; | | .mw-special-CreateAccount input[type="text"], |
| | .mw-special-CreateAccount input[type="password"], |
| | .mw-special-CreateAccount input[type="email"] { |
| | display: block; |
| | margin: 5px auto 15px auto; |
| width: 100%; | | width: 100%; |
| }
| | max-width: 400px; |
| | | padding: 10px; |
| .metric-card {
| |
| border: 1px solid #a2a9b1; | | border: 1px solid #a2a9b1; |
| margin: 0.3em;
| |
| padding: 0.5em;
| |
| background-color: #ffffff;
| |
| }
| |
|
| |
| .metric-header {
| |
| font-weight: bold;
| |
| border-bottom: 1px solid #a2a9b1;
| |
| padding-bottom: 0.2em;
| |
| margin-bottom: 0.3em;
| |
| }
| |
|
| |
| .metric-comparison {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| padding: 0.3em 0;
| |
| }
| |
|
| |
| .metric-label {
| |
| font-size: 85%;
| |
| }
| |
|
| |
| .metric-value {
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .metric-change {
| |
| text-align: center;
| |
| padding: 0.3em;
| |
| margin-top: 0.3em;
| |
| border-top: 1px solid #a2a9b1;
| |
| }
| |
|
| |
| .change-positive {
| |
| color: #00af89;
| |
| }
| |
|
| |
| .change-negative {
| |
| color: #d33;
| |
| }
| |
|
| |
| /* Tooltip - subtle */
| |
| .ceo-tooltip {
| |
| border-bottom: 1px dotted #0645ad;
| |
| cursor: help;
| |
| }
| |
|
| |
| .ceo-tooltip::after {
| |
| content: attr(data-tooltip);
| |
| position: absolute;
| |
| bottom: 100%;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| background: #202122;
| |
| color: #fff;
| |
| padding: 0.5em;
| |
| border-radius: 3px;
| |
| font-size: 12px;
| |
| width: 200px;
| |
| opacity: 0;
| |
| pointer-events: none;
| |
| transition: opacity 0.2s;
| |
| z-index: 1000;
| |
| }
| |
|
| |
| .ceo-tooltip:hover::after {
| |
| opacity: 1;
| |
| }
| |
|
| |
| /* ========================================
| |
| MAIN PAGE ENHANCEMENTS - CORPORATE STYLE
| |
| DEEP BLUE PROFESSIONAL THEME
| |
| ======================================== */
| |
|
| |
| /* Hero Banner - Deep Navy/Midnight Blue */
| |
| .mp-hero {
| |
| background: linear-gradient(135deg, #051429 0%, #0a2540 50%, #1e3a5c 100%);
| |
| color: white;
| |
| padding: 2.5em 2em;
| |
| margin-bottom: 1.5em;
| |
| border-radius: 8px;
| |
| box-shadow: 0 4px 12px rgba(5, 20, 41, 0.4);
| |
| text-align: center;
| |
| border: 1px solid #1a3050;
| |
| }
| |
|
| |
| .mp-hero-title {
| |
| font-size: 2.5em;
| |
| font-weight: 600;
| |
| margin-bottom: 0.3em;
| |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
| |
| letter-spacing: -0.02em;
| |
| }
| |
|
| |
| .mp-hero-subtitle {
| |
| font-size: 1.2em;
| |
| opacity: 0.92;
| |
| font-weight: 300;
| |
| color: #d1dce8;
| |
| }
| |
|
| |
| /* Featured Boxes Grid */
| |
| .mp-boxes {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
| |
| gap: 1em;
| |
| margin: 1.5em 0;
| |
| }
| |
|
| |
| .mp-box {
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1.5em;
| |
| background: #ffffff;
| |
| transition: all 0.3s ease;
| |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
| |
| }
| |
|
| |
| .mp-box:hover {
| |
| box-shadow: 0 4px 12px rgba(10, 37, 64, 0.2);
| |
| transform: translateY(-2px);
| |
| border-color: #1e3a5c;
| |
| }
| |
|
| |
| .mp-box-header {
| |
| font-size: 1.4em;
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin-bottom: 0.8em;
| |
| padding-bottom: 0.5em;
| |
| border-bottom: 2px solid #e5e7eb;
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
|
| |
| .mp-box-icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 1.5em;
| |
| height: 1.5em;
| |
| margin-right: 0.4em;
| |
| background: linear-gradient(135deg, #0a2540 0%, #1e3a5c 100%);
| |
| color: white;
| |
| border-radius: 4px; | | border-radius: 4px; |
| font-size: 0.8em; | | font-size: 14px; |
| font-weight: bold;
| |
| font-style: normal;
| |
| box-shadow: 0 2px 4px rgba(5, 20, 41, 0.3);
| |
| }
| |
| | |
| .mp-box-content {
| |
| line-height: 1.6;
| |
| }
| |
| | |
| .mp-box ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .mp-box li {
| |
| padding: 0.4em 0;
| |
| padding-left: 1.5em;
| |
| position: relative;
| |
| }
| |
| | |
| .mp-box li:before {
| |
| content: "▸";
| |
| position: absolute;
| |
| left: 0;
| |
| color: #1e3a5c;
| |
| font-weight: bold;
| |
| } | | } |
|
| |
|
| /* Stats/Features Section */ | | /* Center help text */ |
| .mp-features { | | .mw-special-CreateAccount .mw-htmlform-help, |
| background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField .mw-htmlform-field-data { |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1.5em;
| |
| margin: 1.5em 0;
| |
| }
| |
| | |
| .mp-features-grid { | |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 1.5em;
| |
| margin-top: 1em;
| |
| }
| |
| | |
| .mp-feature-item {
| |
| text-align: center; | | text-align: center; |
| padding: 1em;
| | margin: 5px auto 15px auto; |
| }
| |
| | |
| .mp-feature-icon {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| width: 3em;
| |
| height: 3em;
| |
| margin: 0 auto 0.5em; | |
| background: linear-gradient(135deg, #051429 0%, #1e3a5c 100%);
| |
| color: white;
| |
| border-radius: 8px;
| |
| font-size: 1.5em;
| |
| font-weight: bold;
| |
| font-style: normal;
| |
| box-shadow: 0 4px 8px rgba(5, 20, 41, 0.25);
| |
| }
| |
| | |
| .mp-feature-title {
| |
| font-weight: 600;
| |
| font-size: 1.1em;
| |
| color: #051429;
| |
| margin-bottom: 0.3em;
| |
| }
| |
| | |
| .mp-feature-text {
| |
| font-size: 0.9em;
| |
| color: #4b5563;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| /* Content Cards */
| |
| .mp-card {
| |
| background: white;
| |
| border: 1px solid #d0d7de;
| |
| border-left: 4px solid #1e3a5c;
| |
| border-radius: 4px;
| |
| padding: 1.2em;
| |
| margin: 1em 0;
| |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
| |
| }
| |
| | |
| .mp-card-title {
| |
| font-size: 1.3em;
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin-bottom: 0.6em;
| |
| }
| |
| | |
| .mp-card-content {
| |
| color: #374151;
| |
| line-height: 1.7;
| |
| }
| |
| | |
| /* Two-column layout for larger screens */
| |
| .mp-columns {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 1.5em;
| |
| margin: 1.5em 0;
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .mp-columns {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| /* Button/Link styling */
| |
| .mp-button {
| |
| display: inline-block;
| |
| padding: 0.6em 1.2em;
| |
| background: linear-gradient(135deg, #0a2540 0%, #1e3a5c 100%);
| |
| color: white !important;
| |
| border-radius: 4px;
| |
| text-decoration: none;
| |
| font-weight: 500;
| |
| transition: all 0.2s ease;
| |
| box-shadow: 0 2px 4px rgba(5, 20, 41, 0.3);
| |
| }
| |
| | |
| .mp-button:hover {
| |
| background: linear-gradient(135deg, #051429 0%, #0a2540 100%);
| |
| text-decoration: none;
| |
| box-shadow: 0 4px 8px rgba(5, 20, 41, 0.4);
| |
| }
| |
| | |
| .mp-button-outline {
| |
| background: white;
| |
| color: #1e3a5c !important;
| |
| border: 2px solid #1e3a5c;
| |
| }
| |
| | |
| .mp-button-outline:hover {
| |
| background: #f0f4f8;
| |
| }
| |
| | |
| /* Section Headers */
| |
| .mp-section-header {
| |
| font-size: 1.8em;
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin: 1.5em 0 0.8em 0;
| |
| padding-bottom: 0.4em;
| |
| border-bottom: 3px solid #1e3a5c;
| |
| }
| |
| | |
| /* Wikipedia compatibility - ensure main page doesn't break existing styles */
| |
| .mw-parser-output .mp-hero,
| |
| .mw-parser-output .mp-box,
| |
| .mw-parser-output .mp-card {
| |
| font-size: inherit;
| |
| }
| |
| | |
| /* ========================================
| |
| LOGO FIXES FOR WIDE HORIZONTAL LOGO
| |
| ======================================== */
| |
| | |
| /* Fix for wide horizontal logo - maintain aspect ratio */
| |
| | |
| /* Vector 2022 skin logo fixes */
| |
| .mw-logo-icon {
| |
| width: auto !important;
| |
| height: auto !important;
| |
| max-width: 200px !important;
| |
| max-height: 60px !important;
| |
| }
| |
| | |
| .mw-logo-container {
| |
| width: auto !important;
| |
| min-width: 160px;
| |
| }
| |
| | |
| /* Logo image itself */
| |
| .mw-logo-icon img,
| |
| .mw-wiki-logo img {
| |
| width: auto !important;
| |
| height: auto !important;
| |
| max-width: 200px !important;
| |
| max-height: 60px !important;
| |
| object-fit: contain !important;
| |
| }
| |
| | |
| /* Vector legacy skin compatibility */
| |
| #p-logo a,
| |
| #p-logo {
| |
| width: auto !important;
| |
| height: auto !important;
| |
| }
| |
| | |
| #p-logo a {
| |
| background-size: contain !important;
| |
| background-position: center !important;
| |
| background-repeat: no-repeat !important;
| |
| min-width: 160px;
| |
| height: 60px;
| |
| }
| |
| | |
| /* Wordmark area adjustment for Vector 2022 */
| |
| .vector-header-start {
| |
| flex-grow: 0;
| |
| }
| |
| | |
| .mw-logo {
| |
| margin-right: 1em;
| |
| }
| |
| | |
| /* Make sure logo doesn't get cropped */
| |
| .mw-logo-container,
| |
| .mw-logo-icon {
| |
| overflow: visible !important;
| |
| }/* Wikipedia-style footer */
| |
| #footer {
| |
| background: #f8f9fa;
| |
| border-top: 1px solid #a2a9b1;
| |
| padding: 1.5em 0;
| |
| margin-top: 2em;
| |
| }
| |
| | |
| #footer ul {
| |
| text-align: center;
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| #footer li {
| |
| display: inline-block;
| |
| padding: 0 0.5em;
| |
| font-size: 0.85em;
| |
| line-height: 2em;
| |
| }
| |
| | |
| #footer li:after {
| |
| content: "·";
| |
| padding-left: 0.8em;
| |
| color: #a2a9b1;
| |
| }
| |
| | |
| #footer li:last-child:after {
| |
| content: "";
| |
| }
| |
| | |
| #footer-info {
| |
| text-align: center;
| |
| padding: 0.5em 0;
| |
| }
| |
| | |
| .mw-footer {
| |
| background: #f8f9fa;
| |
| border-top: 1px solid #a2a9b1;
| |
| }
| |
| | |
| .mw-footer ul {
| |
| padding: 0.5em 0;
| |
| }
| |
| | |
| .mw-footer li {
| |
| color: #54595d;
| |
| font-size: 0.85em;
| |
| }
| |
| | |
| /* Footer spacing */
| |
| .mw-footer-container {
| |
| padding: 1em 0;
| |
| }/* Compact layout for main page boxes */
| |
| .mp-box {
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1em;
| |
| background: #ffffff;
| |
| transition: all 0.3s ease;
| |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
| |
| }
| |
| | |
| .mp-box-content ul {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .mp-box li {
| |
| padding: 0.25em 0;
| |
| padding-left: 1.2em;
| |
| position: relative;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| /* Random article feature box */
| |
| .mp-random-article {
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1em;
| |
| background: #ffffff;
| |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
| |
| margin: 1em 0;
| |
| }
| |
| | |
| .mp-random-article-image {
| |
| text-align: center;
| |
| margin: 0.5em 0;
| |
| background: #f8f9fa;
| |
| padding: 1em;
| |
| border-radius: 4px;
| |
| }
| |
| | |
| .mp-random-article-title {
| |
| font-size: 1.2em;
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin-bottom: 0.5em;
| |
| text-align: center;
| |
| }
| |
| | |
| .mp-random-article-excerpt {
| |
| font-size: 0.9em;
| |
| line-height: 1.5;
| |
| color: #4b5563;
| |
| }
| |
| | |
| /* Feature item clickable */
| |
| .mp-feature-item {
| |
| text-align: center;
| |
| padding: 1em;
| |
| cursor: pointer;
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| .mp-feature-item:hover {
| |
| transform: translateY(-3px);
| |
| }
| |
| | |
| .mp-feature-item a {
| |
| text-decoration: none;
| |
| color: inherit;
| |
| }
| |
| | |
| .mp-feature-item a:hover .mp-feature-icon {
| |
| box-shadow: 0 6px 12px rgba(5, 20, 41, 0.35);
| |
| }/* Fix spacing issues */
| |
| .mp-features {
| |
| margin-top: 1em; /* Reduced from 1.5em */
| |
| background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1.5em;
| |
| }
| |
| | |
| .mp-section-header {
| |
| font-size: 1.8em;
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin: 0 0 0.8em 0; /* Removed top margin */
| |
| padding-bottom: 0.4em;
| |
| border-bottom: 3px solid #1e3a5c;
| |
| }
| |
| /* ========================================
| |
| COMPREHENSIVE FOOTER - WIKIPEDIA STYLE
| |
| ======================================== */
| |
| | |
| .ceo-wiki-footer {
| |
| background: #f8f9fa;
| |
| border-top: 1px solid #a2a9b1;
| |
| margin-top: 3em;
| |
| padding: 2em 1.5em 1em 1.5em;
| |
| }
| |
| | |
| .footer-sections {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
| |
| gap: 2em;
| |
| max-width: 1200px;
| |
| margin: 0 auto 2em auto;
| |
| padding-bottom: 1.5em;
| |
| border-bottom: 1px solid #d0d7de;
| |
| }
| |
| | |
| .footer-column h4 {
| |
| font-size: 1em;
| |
| font-weight: 600;
| |
| color: #202122;
| |
| margin: 0 0 0.8em 0;
| |
| padding-bottom: 0.5em;
| |
| border-bottom: 2px solid #1e3a5c;
| |
| }
| |
| | |
| .footer-column ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .footer-column li {
| |
| margin: 0.4em 0;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .footer-column a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| font-size: 0.9em; | | font-size: 0.9em; |
| }
| |
|
| |
| .footer-column a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| .footer-meta {
| |
| text-align: center;
| |
| font-size: 0.85em;
| |
| color: #54595d; | | color: #54595d; |
| line-height: 1.6;
| | max-width: 400px; |
| max-width: 900px; | |
| margin: 1.5em auto;
| |
| padding: 1em 0;
| |
| border-bottom: 1px solid #d0d7de;
| |
| } | | } |
|
| |
|
| .footer-meta a { | | /* Center checkboxes */ |
| color: #0645ad;
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLCheckField { |
| text-decoration: none;
| |
| }
| |
| | |
| .footer-meta a:hover { | |
| text-decoration: underline;
| |
| }
| |
| | |
| .footer-powered {
| |
| text-align: center; | | text-align: center; |
| padding: 1em 0 0.5em 0;
| |
| } | | } |
|
| |
|
| .footer-powered img { | | .mw-special-CreateAccount .mw-htmlform-field-HTMLCheckField input[type="checkbox"] { |
| opacity: 0.8; | | margin-right: 5px; |
| transition: opacity 0.2s ease;
| |
| } | | } |
|
| |
|
| .footer-powered img:hover { | | /* Center CAPTCHA */ |
| opacity: 1;
| | .mw-special-CreateAccount .mw-htmlform-field-HTMLCaptchaField, |
| }
| | .mw-special-CreateAccount .captcha { |
| | |
| .footer-categories { | |
| max-width: 900px;
| |
| margin: 1.5em auto 0 auto;
| |
| padding: 1.5em 0 0 0;
| |
| border-top: 1px solid #d0d7de;
| |
| }
| |
| | |
| .footer-categories-header { | |
| font-size: 1em;
| |
| font-weight: 600;
| |
| color: #202122;
| |
| margin-bottom: 1em;
| |
| text-align: center; | | text-align: center; |
| | margin: 20px auto; |
| } | | } |
|
| |
|
| .footer-categories-grid { | | .mw-special-CreateAccount .captcha-question { |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 1em;
| |
| }
| |
| | |
| .footer-category-section { | |
| background: white;
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 4px;
| |
| padding: 0.8em;
| |
| }
| |
| | |
| .footer-category-section h5 {
| |
| font-size: 0.9em;
| |
| font-weight: 600; | | font-weight: 600; |
| color: #051429;
| | margin-bottom: 10px; |
| margin: 0 0 0.5em 0; | |
| padding-bottom: 0.3em;
| |
| border-bottom: 1px solid #e5e7eb;
| |
| }
| |
| | |
| .footer-category-section ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .footer-category-section li {
| |
| margin: 0.3em 0;
| |
| font-size: 0.85em;
| |
| }
| |
| | |
| .footer-category-section a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .footer-category-section a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Responsive footer for mobile */
| |
| @media (max-width: 768px) {
| |
| .footer-sections {
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 1.5em;
| |
| }
| |
|
| |
| .footer-categories-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .footer-sections {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| /* Footer legal links section */
| |
| .footer-legal-links {
| |
| text-align: center; | | text-align: center; |
| font-size: 0.85em;
| |
| color: #54595d;
| |
| padding: 1em 0;
| |
| margin-top: 0.5em;
| |
| border-top: 1px solid #d0d7de;
| |
| } | | } |
|
| |
|
| .footer-legal-links a {
| | /* Center submit button */ |
| color: #0645ad;
| | .mw-special-CreateAccount .mw-htmlform-submit-buttons { |
| text-decoration: none;
| |
| padding: 0 0.5em;
| |
| }
| |
| | |
| .footer-legal-links a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| /* Text justification for articles and cards */ | |
| .mw-parser-output p, | |
| .mw-body-content p, | |
| .mw-content-text p {
| |
| text-align: justify;
| |
| }
| |
| | |
| .mp-box-content,
| |
| .mp-card-content,
| |
| .mp-random-article-excerpt {
| |
| text-align: justify;
| |
| }
| |
| | |
| /* Ensure infobox text is NOT justified */
| |
| .infobox p,
| |
| .infobox-data {
| |
| text-align: left;
| |
| }
| |
| /* ========================================
| |
| GEOGRAPHIC CEO NAVIGATION FOOTER
| |
| ======================================== */
| |
| | |
| .ceo-geographic-nav {
| |
| background: linear-gradient(to bottom, #f0f4f8 0%, #ffffff 100%);
| |
| border-top: 3px solid #1e3a5c;
| |
| border-bottom: 1px solid #d0d7de;
| |
| padding: 2em 1.5em;
| |
| margin-bottom: 0;
| |
| }
| |
| | |
| .geo-nav-header {
| |
| text-align: center; | | text-align: center; |
| font-size: 1.6em;
| | margin: 25px auto; |
| font-weight: 600;
| |
| color: #051429;
| |
| margin-bottom: 1.5em; | |
| padding-bottom: 0.5em;
| |
| }
| |
| | |
| .geo-nav-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
| |
| gap: 2em;
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .geo-nav-region {
| |
| background: white;
| |
| border: 1px solid #d0d7de;
| |
| border-radius: 6px;
| |
| padding: 1.2em;
| |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
| |
| transition: all 0.3s ease;
| |
| }
| |
| | |
| .geo-nav-region:hover {
| |
| box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
| |
| transform: translateY(-2px);
| |
| border-color: #1e3a5c;
| |
| } | | } |
|
| |
|
| .geo-nav-region h4 { | | .mw-special-CreateAccount button[type="submit"], |
| font-size: 1.1em; | | .mw-special-CreateAccount input[type="submit"] { |
| | padding: 12px 40px; |
| | font-size: 16px; |
| font-weight: 600; | | font-weight: 600; |
| color: #051429; | | background-color: #2c5aa0; |
| margin: 0 0 0.8em 0;
| | color: white; |
| padding-bottom: 0.5em;
| | border: none; |
| border-bottom: 2px solid #1e3a5c;
| |
| }
| |
| | |
| .geo-nav-region ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .geo-nav-region li {
| |
| margin: 0.5em 0;
| |
| padding-left: 1.2em;
| |
| position: relative;
| |
| }
| |
| | |
| .geo-nav-region li:before {
| |
| content: "▸";
| |
| position: absolute;
| |
| left: 0;
| |
| color: #1e3a5c;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .geo-nav-region a {
| |
| color: #0645ad; | |
| text-decoration: none; | |
| font-size: 0.95em;
| |
| }
| |
| | |
| .geo-nav-region a:hover {
| |
| text-decoration: underline;
| |
| color: #051429;
| |
| }
| |
| | |
| /* Responsive geographic nav */
| |
| @media (max-width: 768px) {
| |
| .geo-nav-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 1em;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .geo-nav-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| /* Copyright footer styling */
| |
| #footer-info-copyright,
| |
| .mw-footer #footer-info-copyright {
| |
| color: #54595d;
| |
| font-size: 0.85em;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| #footer-info-copyright a,
| |
| .mw-footer #footer-info-copyright a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| }
| |
| | |
| #footer-info-copyright a:hover,
| |
| .mw-footer #footer-info-copyright a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| /* ========================================
| |
| LOGO FIX - REMOVE ICON FROM PAGE, FIX STRETCHING
| |
| ======================================== */
| |
| | |
| /* Hide icon logo from page - it should only be browser favicon */
| |
| .mw-logo-icon {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Ensure wordmark logo displays correctly */
| |
| .mw-logo-wordmark {
| |
| display: block !important;
| |
| width: auto !important;
| |
| height: auto !important;
| |
| }
| |
| | |
| .mw-logo-wordmark img {
| |
| width: 156px !important;
| |
| height: 65px !important;
| |
| object-fit: contain !important;
| |
| max-width: 156px !important;
| |
| max-height: 65px !important;
| |
| }
| |
| | |
| /* Vector 2022 specific logo fixes */
| |
| .vector-header-start .mw-logo {
| |
| width: auto !important;
| |
| }
| |
| | |
| .vector-header-start .mw-logo-container {
| |
| width: 156px !important;
| |
| height: 65px !important;
| |
| }
| |
| | |
| .vector-header-start .mw-logo img {
| |
| width: 156px !important;
| |
| height: 65px !important;
| |
| object-fit: contain !important;
| |
| }
| |
| | |
| /* Ensure logo doesn't stretch */
| |
| .mw-wiki-logo,
| |
| .mw-logo a {
| |
| display: inline-block;
| |
| width: 156px !important;
| |
| height: 65px !important;
| |
| }
| |
| | |
| .mw-wiki-logo img {
| |
| width: 100% !important;
| |
| height: 100% !important;
| |
| object-fit: contain !important;
| |
| }
| |
| | |
| /* Override any existing logo styles */
| |
| #p-logo a,
| |
| #p-logo {
| |
| width: 156px !important;
| |
| height: 65px !important;
| |
| background-size: contain !important;
| |
| background-position: left center !important;
| |
| }
| |
| /* ========================================
| |
| IMPROVED INFOBOX DESIGN - MODERN & PROFESSIONAL
| |
| ======================================== */
| |
| | |
| .infobox {
| |
| float: right;
| |
| clear: right;
| |
| width: 23em;
| |
| margin: 0.5em 0 1em 1.5em;
| |
| border: 1px solid #c8ccd1;
| |
| background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
| |
| padding: 0;
| |
| font-size: 88%;
| |
| line-height: 1.6;
| |
| border-radius: 6px; | | border-radius: 6px; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | | cursor: pointer; |
| | transition: background-color 0.3s; |
| } | | } |
|
| |
|
| .infobox-image { | | .mw-special-CreateAccount button[type="submit"]:hover { |
| text-align: center;
| | background-color: #1e3a6b; |
| padding: 1em;
| |
| background: #f8f9fa; | |
| border-bottom: 1px solid #e5e7eb;
| |
| } | | } |
|
| |
|
| .infobox-image img {
| | /* Statistics box at top */ |
| border-radius: 4px;
| | .createaccount-statistics { |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
| | background: linear-gradient(135deg, #2c5aa0 0%, #1e3a6b 100%); |
| }
| |
| | |
| .infobox-header { | |
| background: linear-gradient(135deg, #051429 0%, #1e3a5c 100%); | |
| color: white; | | color: white; |
| | padding: 30px 20px; |
| | margin: 0 auto 30px auto; |
| | max-width: 600px; |
| | border-radius: 8px; |
| text-align: center; | | text-align: center; |
| padding: 0.8em; | | box-shadow: 0 4px 6px rgba(0,0,0,0.1); |
| font-weight: 600;
| |
| font-size: 1.1em;
| |
| border-radius: 6px 6px 0 0;
| |
| } | | } |
|
| |
|
| .infobox-section { | | .createaccount-statistics-title { |
| border-top: 1px solid #e5e7eb;
| | font-size: 1.4em; |
| }
| |
| | |
| .infobox-row {
| |
| display: table;
| |
| width: 100%;
| |
| border-bottom: 1px solid #f0f0f0;
| |
| }
| |
| | |
| .infobox-row:last-child {
| |
| border-bottom: none; | |
| }
| |
| | |
| .infobox-label { | |
| display: table-cell;
| |
| font-weight: 600; | | font-weight: 600; |
| padding: 0.6em 0.8em; | | margin-bottom: 20px; |
| background: #f8f9fa;
| |
| width: 35%;
| |
| vertical-align: top;
| |
| color: #202122;
| |
| border-right: 1px solid #e5e7eb;
| |
| } | | } |
|
| |
|
| .infobox-data { | | .createaccount-statistics-grid { |
| display: table-cell; | | display: grid; |
| padding: 0.6em 0.8em;
| | grid-template-columns: repeat(3, 1fr); |
| vertical-align: top; | | gap: 20px; |
| color: #202122;
| | margin-top: 15px; |
| }
| |
| | |
| .infobox-data a {
| |
| color: #0645ad;
| |
| text-decoration: none;
| |
| }
| |
| | |
| .infobox-data a:hover {
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* Responsive infobox */
| |
| @media (max-width: 768px) {
| |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 1em 0;
| |
| }
| |
| }
| |
| /* Featured Content Item Animations */
| |
| .featured-item {
| |
| margin: 1em 0;
| |
| padding: 0.8em;
| |
| background: linear-gradient(to right, #f8f9fa 0%, #ffffff 100%);
| |
| border-left: 4px solid #1e3a5c; | |
| border-radius: 4px; | |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| } | | } |
|
| |
|
| .featured-item:hover { | | .createaccount-stat-item { |
| background: linear-gradient(to right, #e8f4f8 0%, #f0f9ff 100%);
| |
| transform: translateX(8px);
| |
| box-shadow: 0 4px 12px rgba(30, 58, 92, 0.15);
| |
| border-left: 4px solid #0066cc;
| |
| }
| |
| | |
| .featured-item-title {
| |
| font-weight: 600;
| |
| color: #051429;
| |
| margin-bottom: 0.4em;
| |
| }
| |
| | |
| .featured-item-text {
| |
| font-size: 0.9em;
| |
| line-height: 1.6;
| |
| color: #4b5563;
| |
| }
| |
| /* Footer Category Navigation */
| |
| .footer-category {
| |
| padding: 0.8em;
| |
| background: #ffffff;
| |
| border: 1px solid #e5e7eb;
| |
| border-radius: 6px;
| |
| text-align: center; | | text-align: center; |
| transition: all 0.3s ease;
| |
| } | | } |
|
| |
|
| .footer-category:hover { | | .createaccount-stat-number { |
| background: #f0f9ff;
| | font-size: 2.5em; |
| border-color: #0066cc;
| | font-weight: 700; |
| transform: translateY(-2px);
| | line-height: 1; |
| box-shadow: 0 4px 8px rgba(0, 102, 204, 0.1);
| | margin-bottom: 5px; |
| }
| |
| | |
| .footer-category a {
| |
| text-decoration: none;
| |
| color: #1e3a5c;
| |
| }
| |
| | |
| .footer-category:hover a {
| |
| color: #0066cc;
| |
| }
| |
| /* 3D Tag Cloud Styles */
| |
| #tagcloud-container {
| |
| overflow: hidden;
| |
| background: radial-gradient(circle at center, #f8f9fa 0%, #e5e7eb 100%);
| |
| border-radius: 12px;
| |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
| |
| }
| |
| | |
| #tagcloud-sphere {
| |
| animation: initialRotate 20s linear infinite;
| |
| }
| |
| | |
| .tag-item {
| |
| position: absolute;
| |
| left: 50%;
| |
| top: 50%;
| |
| white-space: nowrap;
| |
| text-decoration: none;
| |
| color: #1e3a5c;
| |
| font-weight: 600; | |
| padding: 0.4em 0.8em;
| |
| background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
| |
| border: 2px solid #0066cc;
| |
| border-radius: 20px;
| |
| transition: all 0.3s ease;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| transform-origin: center center;
| |
| box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2);
| |
| }
| |
| | |
| .tag-item:hover {
| |
| background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
| |
| color: #ffffff;
| |
| transform: scale(1.2);
| |
| box-shadow: 0 4px 16px rgba(0, 102, 204, 0.4);
| |
| z-index: 100;
| |
| }
| |
| | |
| /* Different sizes based on weight */
| |
| .tag-item[data-weight="10"] {
| |
| font-size: 1.4em;
| |
| border-width: 3px;
| |
| }
| |
| | |
| .tag-item[data-weight="9"] {
| |
| font-size: 1.3em; | |
| }
| |
| | |
| .tag-item[data-weight="8"] {
| |
| font-size: 1.2em;
| |
| }
| |
| | |
| .tag-item[data-weight="7"] {
| |
| font-size: 1.1em; | |
| }
| |
| | |
| .tag-item[data-weight="6"] {
| |
| font-size: 1em; | |
| }
| |
| | |
| .tag-item[data-weight="5"] {
| |
| font-size: 0.95em;
| |
| } | | } |
|
| |
|
| .tag-item[data-weight="4"] { | | .createaccount-stat-label { |
| font-size: 0.9em; | | font-size: 0.9em; |
| | opacity: 0.9; |
| | text-transform: uppercase; |
| | letter-spacing: 0.5px; |
| } | | } |
|
| |
|
| @keyframes initialRotate {
| | /* Center page title */ |
| from {
| | .mw-special-CreateAccount .firstHeading { |
| transform: rotateX(0deg) rotateY(0deg);
| | text-align: center; |
| } | |
| to {
| |
| transform: rotateX(360deg) rotateY(360deg);
| |
| }
| |
| } | | } |
|
| |
|
| /* Glow effect on hover */ | | /* Responsive design */ |
| .tag-item:hover::before {
| | @media (max-width: 600px) { |
| content: '';
| | .createaccount-statistics-grid { |
| position: absolute;
| | grid-template-columns: 1fr; |
| top: -2px;
| | gap: 15px; |
| left: -2px;
| |
| right: -2px;
| |
| bottom: -2px;
| |
| background: linear-gradient(45deg, #0066cc, #00d4ff, #0066cc);
| |
| border-radius: 20px;
| |
| z-index: -1;
| |
| filter: blur(8px);
| |
| opacity: 0.7;
| |
| }
| |
| /* Stylish Weighted Tag Cloud */
| |
| .stylish-tag-cloud {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 0.8em;
| |
| padding: 1.5em;
| |
| min-height: 300px;
| |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
| |
| border-radius: 16px;
| |
| box-shadow: inset 0 2px 20px rgba(0, 0, 0, 0.05);
| |
| }
| |
| | |
| .stylish-tag {
| |
| display: inline-block;
| |
| padding: 0.5em 1.2em;
| |
| margin: 0.3em;
| |
| color: #ffffff;
| |
| text-decoration: none;
| |
| font-weight: 700;
| |
| border-radius: 50px;
| |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
| |
| transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
| |
| position: relative;
| |
| overflow: hidden;
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
| |
| animation: float 6s ease-in-out infinite;
| |
| white-space: nowrap;
| |
| }
| |
| | |
| .stylish-tag::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0;
| |
| left: -100%;
| |
| width: 100%;
| |
| height: 100%;
| |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
| |
| transition: left 0.5s;
| |
| }
| |
| | |
| .stylish-tag:hover::before {
| |
| left: 100%; | |
| }
| |
| | |
| .stylish-tag::after { | |
| content: '→';
| |
| position: absolute;
| |
| right: -20px;
| |
| opacity: 0;
| |
| transition: all 0.3s ease;
| |
| font-weight: bold;
| |
| }
| |
| | |
| .stylish-tag:hover::after {
| |
| right: 10px;
| |
| opacity: 1;
| |
| }
| |
| | |
| /* Floating animation */
| |
| @keyframes float {
| |
| 0%, 100% {
| |
| transform: translateY(0px) rotate(0deg); | |
| }
| |
| 25% {
| |
| transform: translateY(-10px) rotate(1deg);
| |
| }
| |
| 50% {
| |
| transform: translateY(-5px) rotate(-1deg);
| |
| }
| |
| 75% {
| |
| transform: translateY(-12px) rotate(0.5deg);
| |
| }
| |
| }
| |
| | |
| /* Different animation speeds for variety */
| |
| .stylish-tag:nth-child(2n) {
| |
| animation-duration: 7s;
| |
| }
| |
| | |
| .stylish-tag:nth-child(3n) {
| |
| animation-duration: 5s;
| |
| }
| |
| | |
| .stylish-tag:nth-child(4n) {
| |
| animation-duration: 8s;
| |
| }
| |
| | |
| /* Pulse animation on hover */
| |
| @keyframes pulse {
| |
| 0% {
| |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); | |
| } | | } |
| 50% {
| |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
| |
| }
| |
| 100% {
| |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
| |
| }
| |
| }
| |
|
| |
| .stylish-tag:hover {
| |
| animation: pulse 1s infinite, float 6s ease-in-out infinite;
| |
| }
| |
|
| |
|
| /* Responsive sizing */
| | .mw-special-CreateAccount input[type="text"], |
| @media (max-width: 768px) {
| | .mw-special-CreateAccount input[type="password"], |
| .stylish-tag-cloud { | | .mw-special-CreateAccount input[type="email"] { |
| gap: 0.5em;
| | max-width: 100%; |
| padding: 1em;
| |
| }
| |
|
| |
| .stylish-tag { | |
| font-size: 0.9em !important; | |
| padding: 0.4em 1em;
| |
| } | | } |
| } | | } |
