/* ============================================ MXOHO — Theme Rebrand Overlay (2026-08) Midnight Ink + Polished Brass + Ivory Paper Loads AFTER css/tokens.css + original css/style.css Goal: re-color + re-font + SVG icon sizing, NO layout breakage ============================================ */ /* ----- Fonts: preconnect + face declarations are in each HTML ----- */ html, body { font-family: var(--font-body); } body { background-color: var(--color-bg); color: var(--color-text); } /* ===== OVERRIDE: OLD -> NEW TOKENS ===== Old project used: --color-primary: #1B4332 (forest green) -> var(--color-primary) #132A46 --color-secondary: #D4A373 (old gold) -> var(--color-accent) #B7905B --color-bg: #FAF8F5 (warm white) -> var(--ivory-50) #FBF8F3 We remap using style.css variable names for maximum coverage. ======================================== */ :root { /* Force override the CSS variable names that style.css already uses */ --color-primary: #132A46; --color-primary-dark: #0E2239; --color-primary-light: #2A456B; --color-secondary: #B7905B; --color-secondary-dark: #A07A48; --color-secondary-light:#E6CC9D; --color-bg: #FBF8F3; --color-bg-alt: #F5EFE6; --color-white: #ffffff; --color-text: #1A1710; --color-text-light: #494439; --color-text-muted: #9A8A6F; --color-border: #EDE4D3; --color-overlay: rgba(9, 23, 38, 0.78); } /* ===== Typography Rebalance ===== */ :root { --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Noto Serif SC', serif; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Noto Sans SC', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--color-primary); letter-spacing: var(--tracking-display); font-weight: 600; } h1 { line-height: 1.08; } h2 { line-height: 1.15; } p { color: var(--color-text-light); line-height: 1.72; } /* Eyebrow labels (small tracked uppercase meta tags) */ .eyebrow, [class*="eyebrow"] { font-family: var(--font-mono), ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.28em; font-size: 11px; color: var(--color-accent); font-weight: 600; } /* ===== Accent gold underline for headings ===== */ .accent-rule, .section-title::after, h2[data-i18n*="Title"]::after { content: ''; display: block; height: 1px; width: 72px; margin-top: 16px; background: var(--divider-line, linear-gradient(90deg, transparent 0%, var(--color-secondary) 50%, transparent 100%)); } /* ===== Buttons: rebuild for ink+brass ===== */ .btn { border-radius: var(--r-sm); letter-spacing: 0.02em; font-weight: 600; font-family: var(--font-sans); transition: var(--t-base) var(--ease-out-expo); border: 1px solid transparent; } .btn-primary, .btn:not(.btn-ghost):not(.btn-sm):not(.wa-btn):not(.del-btn) { background: var(--color-primary); color: #fff; } .btn-primary:hover, .btn:not(.btn-ghost):not(.btn-sm):not(.wa-btn):not(.del-btn):hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-card); } .btn-accent, .btn[style*="D4A373"], .btn[style*="#B8895A"], .btn-gold { background: var(--color-accent); color: var(--ivory-900); border-color: var(--brass-600); } .btn-accent:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-accent); } .btn-outline, .btn-ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); } .btn-outline:hover, .btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent-hover); background: var(--brass-50); } /* ===== Navbar / Top bar ===== */ .navbar { background: rgba(251, 248, 243, 0.88); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--color-border); } .nav-link.active, .nav-link:hover, .navbar a:hover { color: var(--color-accent) !important; } /* ===== Divider band with brass line ===== */ .divider-gold { height: 1px; background: var(--divider-line); border: none; margin: var(--sp-8) 0; } /* ===== Gold gradient border for SLA card (was previous #D4A373) ===== */ .sla-card, .sla-box, [class*="sla-card"] { border-image: linear-gradient(135deg, var(--brass-300), var(--brass-500), var(--brass-300)) 1 !important; box-shadow: var(--shadow-card); } /* ===== Icon sizing system (SVG ) ===== */ .ic { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: inherit; } .ic-12 { width: 12px; height: 12px; } .ic-14 { width: 14px; height: 14px; } .ic-16 { width: 16px; height: 16px; } .ic-18 { width: 18px; height: 18px; } .ic-20 { width: 20px; height: 20px; } .ic-24 { width: 24px; height: 24px; } .ic-28 { width: 28px; height: 28px; } .ic-32 { width: 32px; height: 32px; } .ic-40 { width: 40px; height: 40px; } .ic-48 { width: 48px; height: 48px; } /* Icon-tile (feature cards with icon header) */ .ic-tile { width: 56px; height: 56px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink-50); color: var(--color-primary); border: 1px solid var(--ink-100); margin-bottom: 16px; } .ic-tile.gold { background: var(--brass-50); color: var(--brass-600); border-color: var(--brass-200); } /* ===== Form inputs restyle ===== */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], textarea, select { font-family: var(--font-sans); background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--r-sm); color: var(--color-text); transition: var(--t-base) var(--ease-out-expo); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(19, 42, 70, 0.1); } /* ===== Hero section paper texture ===== */ .hero { background: radial-gradient(1000px 500px at 85% -10%, rgba(183, 144, 91, 0.1), transparent 60%), radial-gradient(800px 400px at 10% 10%, rgba(19, 42, 70, 0.05), transparent 60%), var(--color-bg); } /* ===== WhatsApp float (replace emoji icon with svg) ===== */ .whatsapp-float { background: linear-gradient(135deg, #128C7E, #075E54); color: #fff; border-radius: 50%; box-shadow: 0 12px 30px -10px rgba(7, 94, 84, 0.55); } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 16px 36px -8px rgba(7, 94, 84, 0.65); } /* ===== Admin panel restyle (ink + brass dashboard) ===== */ .admin-wrap, .admin-shell, #admin-app, body[class*="admin-"], body.admin { font-family: var(--font-sans); background: var(--ivory-50); color: var(--color-text); } .admin-header, .admin-topbar { background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); color: #fff; border-bottom: 1px solid var(--brass-500); } .admin-topbar a, .admin-topbar .navlink, .admin-topbar [role="tab"] { color: rgba(255,255,255,0.85); } .admin-topbar a:hover, .admin-topbar .navlink:hover { color: var(--brass-300); } .admin-card, .admin-panel, .admin-drawer, .data-table, .admin-modal { border: 1px solid var(--color-border); background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-soft); } .data-table th { background: var(--ivory-100); color: var(--ivory-700); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; } .admin-brand-row { display: flex; align-items: center; gap: 12px; } .admin-brand-mark { width: 32px; height: 32px; color: var(--brass-500); } .admin-brand-word { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.18em; color: var(--ivory-100); } /* ===== Tag pills (status) — re-color sans emoji ===== */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .tag::before { /* tiny brass bullet, replaces emoji markers */ content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; } /* ===== Nav dropdown menus (Markets / Resources) ===== */ .nav-dropdown { position: relative; display: inline-block; } .nav-dropdown > a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; cursor: pointer; color: var(--ink-700, #132A46); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; } .nav-dropdown > a:hover { color: var(--brass-500, #B7905B); } .nav-dropdown > a svg { transition: transform .2s; } .nav-dropdown:hover > a svg { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border: 1px solid var(--color-border, #EDE4D3); border-radius: 10px; box-shadow: 0 12px 40px rgba(9, 23, 38, 0.14); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 1000; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: block; padding: 9px 18px; color: var(--ink-700, #132A46); text-decoration: none; font-size: 13px; font-weight: 500; transition: background .15s, color .15s; border-left: 2px solid transparent; } .nav-dropdown-menu a:hover { background: var(--ivory-50, #FBF8F3); color: var(--brass-500, #B7905B); border-left-color: var(--brass-500, #B7905B); } /* Mobile: show dropdown inline (no hover) */ @media (max-width: 768px) { .nav-dropdown > a svg { display: none; } .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: 16px; min-width: auto; } .nav-dropdown-menu a { padding: 6px 0; } } .tag-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); } .tag-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); } .tag-err { background: var(--status-err-bg); color: var(--status-err-fg); } .tag-info { background: var(--status-info-bg); color: var(--status-info-fg); } .tag-gold { background: var(--brass-50); color: var(--brass-700); border: 1px solid var(--brass-200); } /* ===== Remove any stray inline #1B4332 color references ===== */ *[style*="#1B4332"] { color: var(--color-primary) !important; } *[style*="rgb(27, 67, 50)"] { color: var(--color-primary) !important; } /* ===== Reduced-motion respect ===== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }