/* Theme Name: Roghanyab Pro Theme URI: https://roghanyab.ir Author: Roghanyab Team Author URI: https://roghanyab.ir Description: Premium Automotive Maintenance Platform & Vehicle Oil Finder System Version: 1.3.4 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: roghanyab-pro Tags: rtl-language, dark-mode, automotive, oil-finder, vehicle-management */ /* ============================================================ DESIGN TOKENS - Extracted from screenshots ============================================================ */ :root { /* Primary Colors */ --clr-bg: #0d0f14; --clr-bg-card: #161920; --clr-bg-card2: #1c2029; --clr-bg-input: #1a1d25; --clr-border: #2a2d38; --clr-border-light: #333748; /* Accent */ --clr-gold: #f5b731; --clr-gold-dark: #d9971a; --clr-gold-light: #ffd166; --clr-gold-bg: rgba(245,183,49,0.12); /* Text */ --clr-text: #e8eaf0; --clr-text-muted: #8b90a7; --clr-text-dim: #5c6080; --clr-white: #ffffff; /* Status Colors */ --clr-green: #22c55e; --clr-green-bg: rgba(34,197,94,0.12); --clr-red: #ef4444; --clr-red-bg: rgba(239,68,68,0.12); --clr-orange: #f97316; --clr-orange-bg: rgba(249,115,22,0.12); --clr-blue: #3b82f6; --clr-blue-bg: rgba(59,130,246,0.12); /* Progress bar colors matching screenshots */ --clr-progress-green: #4ade80; --clr-progress-yellow: #f5b731; --clr-progress-orange: #f97316; --clr-progress-red: #ef4444; /* Typography */ --font-primary: 'Vazirmatn', 'IRANSans', Tahoma, Arial, sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 15px; --font-size-md: 17px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 32px; --font-size-3xl: 42px; --font-size-4xl: 56px; /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Shadows */ --shadow-card: 0 4px 24px rgba(0,0,0,0.4); --shadow-hover: 0 8px 32px rgba(0,0,0,0.5); --shadow-gold: 0 4px 20px rgba(245,183,49,0.25); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05); /* Transitions */ --transition: 0.2s ease; --transition-slow: 0.35s ease; /* Sidebar width — 280px ensures longest Persian nav label fits without clipping */ --sidebar-w: 280px; --header-h: 64px; /* Header background (separate tokens so header.css doesn't hardcode colors) */ --clr-header-bg: rgba(13,15,20,0.92); --clr-header-bg-scrolled: rgba(13,15,20,0.98); --clr-header-shadow-scrolled: 0 2px 20px rgba(0,0,0,0.4); --clr-nav-hover-bg: rgba(255,255,255,0.06); --hero-bg-gradient: linear-gradient(135deg, #0a0c10 0%, #0d0f14 40%, #111318 100%); --hero-glow-opacity: 0.06; } /* ============================================================ LIGHT THEME — activated via Overrides every design token above; components using var() pick this up automatically with no further changes needed. ============================================================ */ :root[data-theme="light"] { /* Primary Colors */ --clr-bg: #f6f7fa; --clr-bg-card: #ffffff; --clr-bg-card2: #f0f1f5; --clr-bg-input: #eef0f4; --clr-border: #e2e4ea; --clr-border-light: #d2d5e0; /* Accent — darkened slightly so it stays readable on white */ --clr-gold: #c1861a; --clr-gold-dark: #9c6d13; --clr-gold-light: #dba53a; --clr-gold-bg: rgba(193,134,26,0.10); /* Text — this also drives most heading colors site-wide */ --clr-text: #1d2029; --clr-text-muted: #5b607a; --clr-text-dim: #868ba3; --clr-white: #14161c; /* Status Colors */ --clr-green: #178a45; --clr-green-bg: rgba(23,138,69,0.10); --clr-red: #d9342b; --clr-red-bg: rgba(217,52,43,0.10); --clr-orange: #d9640f; --clr-orange-bg: rgba(217,100,15,0.10); --clr-blue: #2260d6; --clr-blue-bg: rgba(34,96,214,0.10); --clr-progress-green: #178a45; --clr-progress-yellow: #c1861a; --clr-progress-orange: #d9640f; --clr-progress-red: #d9342b; --shadow-card: 0 2px 14px rgba(20,22,35,0.07); --shadow-hover: 0 10px 28px rgba(20,22,35,0.10); --shadow-gold: 0 4px 16px rgba(193,134,26,0.22); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7); --clr-header-bg: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(246,247,250,0.88) 50%, rgba(233,235,241,0.86) 100%); --clr-header-bg-scrolled: linear-gradient(135deg, rgba(255,255,255,0.97) 0%, rgba(246,247,250,0.95) 50%, rgba(233,235,241,0.93) 100%); --clr-header-shadow-scrolled: 0 2px 20px rgba(20,22,35,0.10); --clr-nav-hover-bg: rgba(20,22,35,0.05); --hero-bg-gradient: linear-gradient(135deg, #f5f6f9 0%, #e9ebf1 45%, #d9dce4 100%); --hero-glow-opacity: 0.18; } /* A handful of components are deliberately-dark branded panels (hero banner, homepage category tiles) that keep white text regardless of theme — re-assert that here since --clr-white now flips to a dark color for normal content. */ :root[data-theme="light"] .cat-oil h3, :root[data-theme="light"] .cat-oil p, :root[data-theme="light"] .cat-filter h3, :root[data-theme="light"] .cat-filter p, :root[data-theme="light"] .cat-parts h3, :root[data-theme="light"] .cat-parts p, :root[data-theme="light"] .cat-articles h3, :root[data-theme="light"] .cat-articles p { color: #ffffff; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { direction: rtl; font-size: 16px; scroll-behavior: smooth; height: 100%; } body { font-family: var(--font-primary); background-color: var(--clr-bg); color: var(--clr-text); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100%; } /* Grows to fill any leftover space so .site-footer always lands at the * bottom of the viewport on short pages, instead of sitting right after * a short amount of content with blank body background showing below it. */ #site-main { flex: 1 0 auto; display: flex; flex-direction: column; } .site-footer { flex-shrink: 0; } a { color: inherit; text-decoration: none; transition: color var(--transition); } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button, input, select, textarea { font-family: inherit; } button { cursor: pointer; border: none; background: none; } /* ============================================================ TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--clr-white); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } h5 { font-size: var(--font-size-md); } h6 { font-size: var(--font-size-base); } .text-gold { color: var(--clr-gold); } .text-muted { color: var(--clr-text-muted); } .text-green { color: var(--clr-green); } .text-red { color: var(--clr-red); } .text-orange { color: var(--clr-orange); } .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } /* ============================================================ LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--sp-6); } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .w-full { width: 100%; } .h-full { height: 100%; } .relative { position: relative; } .absolute { position: absolute; } .hidden { display: none !important; } .visible { display: block !important; } /* ============================================================ CARD COMPONENT ============================================================ */ .card { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-card); transition: border-color var(--transition), box-shadow var(--transition); } .card:hover { border-color: var(--clr-border-light); box-shadow: var(--shadow-hover); } .card-sm { padding: var(--sp-4); } .card-dark { background: var(--clr-bg-card2); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 10px var(--sp-5); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 600; transition: all var(--transition); white-space: nowrap; line-height: 1; } .btn-primary { background: var(--clr-gold); color: #0d0f14; box-shadow: var(--shadow-gold); } .btn-primary:hover { background: var(--clr-gold-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(245,183,49,0.35); } .btn-outline { background: transparent; border: 1px solid var(--clr-border); color: var(--clr-text); } .btn-outline:hover { border-color: var(--clr-gold); color: var(--clr-gold); } .btn-ghost { background: var(--clr-gold-bg); color: var(--clr-gold); } .btn-ghost:hover { background: rgba(245,183,49,0.2); } .btn-danger { background: var(--clr-red-bg); color: var(--clr-red); border: 1px solid rgba(239,68,68,0.3); } .btn-sm { padding: 7px var(--sp-3); font-size: var(--font-size-xs); } .btn-lg { padding: 14px var(--sp-8); font-size: var(--font-size-md); } .btn-block { width: 100%; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-md); } .btn-round { border-radius: var(--radius-full); } /* ============================================================ FORM ELEMENTS ============================================================ */ .form-group { margin-bottom: var(--sp-4); } .form-label { display: block; font-size: var(--font-size-sm); color: var(--clr-text-muted); margin-bottom: var(--sp-2); font-weight: 500; } .form-control { width: 100%; background: var(--clr-bg-input); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 11px var(--sp-4); color: var(--clr-text); font-size: var(--font-size-sm); font-family: inherit; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control::placeholder { color: var(--clr-text-dim); } .form-control:focus { border-color: var(--clr-gold); box-shadow: 0 0 0 3px rgba(245,183,49,0.15); } .form-control-icon { position: relative; } .form-control-icon .form-control { padding-right: 42px; } .form-control-icon .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--clr-text-dim); width: 16px; height: 16px; } .form-select { width: 100%; background: var(--clr-bg-input); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 11px var(--sp-4); color: var(--clr-text); font-size: var(--font-size-sm); appearance: none; cursor: pointer; outline: none; } .form-select:focus { border-color: var(--clr-gold); } .form-check { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; } .form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--clr-gold); } /* ============================================================ BADGE / TAG ============================================================ */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; } .badge-green { background: var(--clr-green-bg); color: var(--clr-green); } .badge-red { background: var(--clr-red-bg); color: var(--clr-red); } .badge-orange { background: var(--clr-orange-bg); color: var(--clr-orange); } .badge-gold { background: var(--clr-gold-bg); color: var(--clr-gold); } .badge-blue { background: var(--clr-blue-bg); color: var(--clr-blue); } /* ============================================================ PROGRESS BAR ============================================================ */ .progress-wrap { margin-bottom: var(--sp-3); } .progress-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--clr-text-muted); margin-bottom: 6px; } .progress-track { height: 6px; background: var(--clr-bg-input); border-radius: var(--radius-full); overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--radius-full); transition: width 0.6s ease; } .progress-green { background: var(--clr-progress-green); } .progress-yellow { background: var(--clr-progress-yellow); } .progress-orange { background: var(--clr-progress-orange); } .progress-red { background: var(--clr-progress-red); } /* ============================================================ DIVIDER ============================================================ */ .divider { border: none; border-top: 1px solid var(--clr-border); margin: var(--sp-4) 0; } .divider-text { display: flex; align-items: center; gap: var(--sp-3); color: var(--clr-text-dim); font-size: var(--font-size-sm); margin: var(--sp-4) 0; } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--clr-border); } /* ============================================================ AVATAR ============================================================ */ .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--clr-bg-input); border: 2px solid var(--clr-border); overflow: hidden; flex-shrink: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-lg { width: 72px; height: 72px; } .avatar-xl { width: 100px; height: 100px; border-width: 3px; } /* ============================================================ TOOLTIP ============================================================ */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); right: 50%; transform: translateX(50%); background: var(--clr-bg-card2); color: var(--clr-text); font-size: var(--font-size-xs); padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--transition); z-index: 100; } [data-tooltip]:hover::after { opacity: 1; } /* ============================================================ NOTIFICATION DOT ============================================================ */ .notif-dot { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background: var(--clr-red); border-radius: 50%; border: 2px solid var(--clr-bg); } /* ============================================================ SECTION TITLE ============================================================ */ .section-title { text-align: center; margin-bottom: var(--sp-10); } .section-title h2 { font-size: var(--font-size-2xl); margin-bottom: var(--sp-2); } .section-title p { color: var(--clr-text-muted); font-size: var(--font-size-base); } .section-title .underline-gold { display: inline-block; width: 48px; height: 3px; background: var(--clr-gold); border-radius: 2px; margin-top: var(--sp-2); } /* ============================================================ LOADING SPINNER ============================================================ */ .spinner { width: 24px; height: 24px; border: 2px solid var(--clr-border); border-top-color: var(--clr-gold); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ TABS ============================================================ */ .tabs-nav { display: flex; gap: var(--sp-1); background: var(--clr-bg-input); border-radius: var(--radius-md); padding: 4px; margin-bottom: var(--sp-6); } .tab-btn { flex: 1; padding: 8px var(--sp-4); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 500; color: var(--clr-text-muted); transition: all var(--transition); } .tab-btn.active { background: var(--clr-gold); color: #0d0f14; font-weight: 700; } .tab-content { display: none; } .tab-content.active { display: block; } /* ============================================================ MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; pointer-events: none; transition: opacity var(--transition-slow); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--clr-bg-card); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); width: 100%; max-width: 460px; padding: var(--sp-8); box-shadow: var(--shadow-hover); transform: translateY(12px); transition: transform var(--transition-slow); } .modal-overlay.open .modal { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--clr-bg-input); color: var(--clr-text-muted); display: flex; align-items: center; justify-content: center; transition: all var(--transition); } .modal-close:hover { background: var(--clr-red-bg); color: var(--clr-red); } /* ============================================================ TOAST / ALERT ============================================================ */ .toast-container { position: fixed; top: var(--sp-6); left: var(--sp-6); z-index: 2000; display: flex; flex-direction: column; gap: var(--sp-3); } .toast { background: var(--clr-bg-card2); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-5); font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--sp-3); box-shadow: var(--shadow-hover); animation: slideIn 0.3s ease; } .toast-success { border-right: 3px solid var(--clr-green); } .toast-error { border-right: 3px solid var(--clr-red); } .toast-warning { border-right: 3px solid var(--clr-gold); } @keyframes slideIn { from { transform: translateX(-20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================================ TABLE ============================================================ */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table th { background: var(--clr-bg-input); color: var(--clr-text-muted); font-weight: 500; padding: 10px var(--sp-4); text-align: right; white-space: nowrap; } .table td { padding: 12px var(--sp-4); border-bottom: 1px solid var(--clr-border); color: var(--clr-text); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: rgba(255,255,255,0.02); } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { text-align: center; padding: var(--sp-16) var(--sp-6); color: var(--clr-text-muted); } .empty-state .icon { width: 64px; height: 64px; margin: 0 auto var(--sp-4); opacity: 0.3; } .empty-state h3 { font-size: var(--font-size-lg); margin-bottom: var(--sp-2); color: var(--clr-text); } .empty-state p { font-size: var(--font-size-sm); } /* ============================================================ RESPONSIVE UTILITIES ============================================================ */ @media (max-width: 1199px) { .container { max-width: 960px; } .hide-lg { display: none !important; } } @media (max-width: 991px) { .container { max-width: 720px; } .hide-md { display: none !important; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .container { max-width: 100%; padding: 0 var(--sp-4); } .hide-sm { display: none !important; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } }