/* RivalSearchMCP Professional Theme - Black, Red, Yellow */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* Primary Colors */
--rival-black: #0f0f0f;
--rival-red: #dc2626;
--rival-yellow: #f59e0b;
/* Secondary Colors */
--rival-dark-red: #991b1b;
--rival-dark-yellow: #d97706;
--rival-light-yellow: #fef3c7;
--rival-light-red: #fecaca;
/* Neutral Colors */
--rival-gray-50: #f9fafb;
--rival-gray-100: #f3f4f6;
--rival-gray-200: #e5e7eb;
--rival-gray-300: #d1d5db;
--rival-gray-400: #9ca3af;
--rival-gray-500: #6b7280;
--rival-gray-600: #4b5563;
--rival-gray-700: #374151;
--rival-gray-800: #1f2937;
--rival-gray-900: #111827;
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
}
/* Base Typography */
body {
font-family: var(--font-sans);
line-height: 1.6;
color: var(--rival-gray-800);
background-color: var(--rival-gray-50);
}
/* Header - Professional & Clean */
.md-header {
background: linear-gradient(135deg, var(--rival-black) 0%, var(--rival-gray-900) 100%);
box-shadow: var(--shadow-lg);
border-bottom: 3px solid var(--rival-red);
height: 70px;
position: sticky;
top: 0;
z-index: 1000;
}
.md-header__title {
font-size: 1.5rem;
font-weight: 700;
color: white !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.md-header__source {
color: var(--rival-gray-300) !important;
}
.md-header__source:hover {
color: var(--rival-yellow) !important;
}
/* Navigation - Clean & Organized */
.md-nav__title {
color: var(--rival-red) !important;
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--rival-gray-100);
border-radius: var(--radius-md);
}
.md-nav__link {
color: var(--rival-gray-700) !important;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
font-weight: 500;
}
.md-nav__link:hover {
color: var(--rival-red) !important;
background-color: var(--rival-light-red);
transform: translateX(4px);
}
.md-nav__link--active {
color: var(--rival-red) !important;
background: linear-gradient(90deg, var(--rival-light-red) 0%, var(--rival-light-yellow) 100%);
font-weight: 600;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--rival-red);
}
/* Sidebar - Professional Layout */
.md-sidebar--primary {
border-right: 1px solid var(--rival-gray-200);
background: white;
box-shadow: var(--shadow-md);
}
.md-sidebar--secondary {
border-left: 1px solid var(--rival-gray-200);
background: white;
box-shadow: var(--shadow-md);
}
/* Main Content - Clean & Readable */
.md-content {
background: white;
padding: var(--spacing-2xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin: var(--spacing-lg);
}
/* Headings - Professional Hierarchy */
.md-content h1 {
color: var(--rival-black) !important;
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 4px solid var(--rival-red);
position: relative;
}
.md-content h1::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 60px;
height: 4px;
background: var(--rival-yellow);
}
.md-content h2 {
color: var(--rival-gray-800) !important;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.3;
margin: var(--spacing-2xl) 0 var(--spacing-lg) 0;
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--rival-yellow);
}
.md-content h3 {
color: var(--rival-red) !important;
font-size: 1.5rem;
font-weight: 600;
margin: var(--spacing-xl) 0 var(--spacing-md) 0;
padding-left: var(--spacing-md);
border-left: 3px solid var(--rival-red);
}
.md-content h4, .md-content h5, .md-content h6 {
color: var(--rival-gray-700) !important;
font-weight: 600;
margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}
/* Links - Professional Styling */
.md-content a {
color: var(--rival-red) !important;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: all var(--transition-fast);
font-weight: 500;
}
.md-content a:hover {
color: var(--rival-dark-red) !important;
border-bottom-color: var(--rival-red);
background-color: var(--rival-light-red);
padding: 2px 4px;
margin: -2px -4px;
border-radius: var(--radius-sm);
}
/* Code Blocks - Modern & Clean */
.md-content code {
background: linear-gradient(135deg, var(--rival-light-yellow) 0%, #fef3c7 100%);
color: var(--rival-black) !important;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.875rem;
font-weight: 500;
border: 1px solid var(--rival-yellow);
}
.md-content pre {
background: linear-gradient(135deg, var(--rival-black) 0%, var(--rival-gray-900) 100%);
border: 2px solid var(--rival-red);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
overflow-x: auto;
}
.md-content pre code {
background: transparent !important;
color: white !important;
border: none !important;
padding: 0;
font-size: 0.875rem;
line-height: 1.6;
}
/* Buttons - Modern & Interactive */
.rival-button {
background: linear-gradient(135deg, var(--rival-red) 0%, var(--rival-dark-red) 100%);
color: white !important;
padding: var(--spacing-md) var(--spacing-xl);
border: none !important;
border-radius: var(--radius-lg);
font-weight: 600;
font-size: 1rem;
text-decoration: none !important;
display: inline-flex;
align-items: center;
justify-content: center;
margin: var(--spacing-sm);
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.rival-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left var(--transition-slow);
}
.rival-button:hover::before {
left: 100%;
}
.rival-button:hover {
background: linear-gradient(135deg, var(--rival-dark-red) 0%, var(--rival-red) 100%);
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
color: white !important;
text-decoration: none !important;
}
.rival-button-secondary {
background: linear-gradient(135deg, var(--rival-yellow) 0%, var(--rival-dark-yellow) 100%);
color: var(--rival-black) !important;
}
.rival-button-secondary:hover {
background: linear-gradient(135deg, var(--rival-dark-yellow) 0%, var(--rival-yellow) 100%);
color: var(--rival-black) !important;
}
/* Cards - Modern & Clean */
.rival-card {
background: white;
border: 1px solid var(--rival-gray-200);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
margin: var(--spacing-lg) 0;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.rival-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--rival-red), var(--rival-yellow));
}
.rival-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--rival-red);
}
.rival-card h3 {
color: var(--rival-red) !important;
margin-top: 0 !important;
margin-bottom: var(--spacing-md) !important;
font-size: 1.25rem;
font-weight: 600;
}
.rival-card p {
color: var(--rival-gray-600);
margin: 0;
line-height: 1.6;
}
/* Alerts - Professional Notifications */
.rival-alert {
background: linear-gradient(135deg, var(--rival-light-yellow) 0%, #fef3c7 100%);
border: 1px solid var(--rival-yellow);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
margin: var(--spacing-xl) 0;
box-shadow: var(--shadow-md);
position: relative;
}
.rival-alert::before {
content: '💡';
position: absolute;
top: var(--spacing-md);
left: var(--spacing-md);
font-size: 1.5rem;
}
.rival-alert h3 {
margin-top: 0 !important;
margin-left: var(--spacing-xl);
color: var(--rival-red) !important;
font-size: 1.25rem;
font-weight: 600;
}
.rival-alert p {
margin-left: var(--spacing-xl);
color: var(--rival-gray-700);
margin-bottom: var(--spacing-lg);
}
.rival-alert .rival-button {
margin-left: var(--spacing-xl);
}
/* Tables - Clean & Professional */
.rival-table {
width: 100% !important;
border-collapse: separate;
border-spacing: 0;
margin: var(--spacing-xl) 0;
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.rival-table th,
.rival-table td {
padding: var(--spacing-md) var(--spacing-lg);
text-align: left;
border-bottom: 1px solid var(--rival-gray-200);
}
.rival-table th {
background: linear-gradient(135deg, var(--rival-black) 0%, var(--rival-gray-800) 100%);
color: white !important;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.875rem;
}
.rival-table tr:hover {
background-color: var(--rival-gray-50);
}
.rival-table tr:last-child td {
border-bottom: none;
}
/* Lists - Clean & Organized */
.rival-list {
list-style: none;
padding: 0;
}
.rival-list li {
margin: var(--spacing-md) 0;
padding: var(--spacing-md);
background: white;
border-left: 4px solid var(--rival-red);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
}
.rival-list li:hover {
transform: translateX(4px);
box-shadow: var(--shadow-md);
border-left-color: var(--rival-yellow);
}
.rival-list li::before {
content: '▶';
color: var(--rival-red);
font-weight: bold;
margin-right: var(--spacing-md);
}
/* Search - Modern & Clean */
.md-search__input {
background: white !important;
border: 2px solid var(--rival-gray-300) !important;
border-radius: var(--radius-lg) !important;
padding: var(--spacing-md) var(--spacing-lg) !important;
font-size: 1rem !important;
transition: all var(--transition-fast) !important;
}
.md-search__input:focus {
border-color: var(--rival-red) !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
outline: none !important;
}
.md-search__input::placeholder {
color: var(--rival-gray-400) !important;
}
/* Footer - Professional */
.md-footer {
background: linear-gradient(135deg, var(--rival-black) 0%, var(--rival-gray-900) 100%);
color: white !important;
border-top: 3px solid var(--rival-red);
margin-top: var(--spacing-2xl);
}
.md-footer__link:hover {
color: var(--rival-yellow) !important;
}
/* Tabs - Clean & Modern */
.md-tabs {
background: linear-gradient(135deg, var(--rival-black) 0%, var(--rival-gray-900) 100%);
border-bottom: 2px solid var(--rival-red);
}
.md-tabs__link {
color: var(--rival-gray-300) !important;
padding: var(--spacing-md) var(--spacing-lg) !important;
transition: all var(--transition-fast) !important;
font-weight: 500 !important;
}
.md-tabs__link:hover {
color: var(--rival-yellow) !important;
background-color: rgba(255, 255, 255, 0.1);
}
.md-tabs__link--active {
color: var(--rival-red) !important;
background: linear-gradient(180deg, transparent 0%, rgba(220, 38, 38, 0.1) 100%);
border-bottom: 3px solid var(--rival-red) !important;
font-weight: 600 !important;
}
/* Breadcrumbs - Clean */
.md-breadcrumb__link {
color: var(--rival-red) !important;
font-weight: 500;
}
.md-breadcrumb__link:hover {
color: var(--rival-dark-red) !important;
text-decoration: underline;
}
/* Social Links - Professional */
.md-social__link {
color: var(--rival-red) !important;
transition: all var(--transition-fast) !important;
}
.md-social__link:hover {
color: var(--rival-yellow) !important;
transform: scale(1.1);
}
/* GitHub Links */
.md-source__repository {
color: var(--rival-red) !important;
font-weight: 500;
}
.md-source__repository:hover {
color: var(--rival-dark-red) !important;
}
/* Edit Links */
.md-content__edit {
color: var(--rival-red) !important;
font-weight: 500;
}
.md-content__edit:hover {
color: var(--rival-dark-red) !important;
}
/* Back to Top Button */
.md-top {
background: linear-gradient(135deg, var(--rival-red) 0%, var(--rival-dark-red) 100%);
color: white !important;
border-radius: 50%;
box-shadow: var(--shadow-lg);
transition: all var(--transition-normal) !important;
}
.md-top:hover {
background: linear-gradient(135deg, var(--rival-dark-red) 0%, var(--rival-red) 100%);
transform: scale(1.1);
box-shadow: var(--shadow-xl);
}
/* Progress Bar */
.md-progress {
background: linear-gradient(90deg, var(--rival-red), var(--rival-yellow)) !important;
height: 4px;
}
/* Search Results */
.md-search-result__title {
color: var(--rival-red) !important;
font-weight: 600;
}
.md-search-result__teaser {
color: var(--rival-gray-600) !important;
}
/* Code Copy Button */
.md-clipboard {
color: var(--rival-red) !important;
transition: all var(--transition-fast) !important;
}
.md-clipboard:hover {
color: var(--rival-dark-red) !important;
transform: scale(1.1);
}
/* Custom Badge Styling */
.md-typeset .badge {
background: linear-gradient(135deg, var(--rival-red) 0%, var(--rival-dark-red) 100%);
color: white !important;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Custom Quote Styling */
.rival-quote {
background: linear-gradient(135deg, var(--rival-gray-50) 0%, white 100%);
border-left: 4px solid var(--rival-red);
padding: var(--spacing-lg) var(--spacing-xl);
margin: var(--spacing-xl) 0;
border-radius: var(--radius-md);
font-style: italic;
color: var(--rival-gray-700);
box-shadow: var(--shadow-sm);
}
/* Responsive Design */
@media (max-width: 768px) {
.md-content {
padding: var(--spacing-lg);
margin: var(--spacing-sm);
}
.rival-button {
display: block !important;
width: 100% !important;
text-align: center !important;
margin: var(--spacing-sm) 0 !important;
}
.rival-card {
margin: var(--spacing-md) 0 !important;
padding: var(--spacing-lg) !important;
}
.md-content h1 {
font-size: 2rem;
}
.md-content h2 {
font-size: 1.5rem;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: var(--rival-gray-900);
color: var(--rival-gray-100);
}
.md-content {
background: var(--rival-gray-800);
color: var(--rival-gray-100);
}
.rival-card {
background: var(--rival-gray-800);
border-color: var(--rival-gray-600);
}
.md-sidebar--primary,
.md-sidebar--secondary {
background: var(--rival-gray-800);
border-color: var(--rival-gray-600);
}
}
