/* ============================================================================ SeoCute — sc-tokens.css Semantic design token system — light + dark Applied via .theme-dark on (bridged with data-theme="dark" on ) ============================================================================ */ /* ── Google Font: Nunito ── */ @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); /* ── Light tokens (default) ── */ :root { --color-bg: #f8fafc; --color-surface: #ffffff; --color-card: #ffffff; --color-border: #e2e8f0; --color-border-soft: #f1f5f9; --color-text: #0f172a; --color-text-sec: #475569; --color-muted: #64748b; --color-primary: #6366f1; --color-primary-soft: rgba(99,102,241,.1); --color-success: #22c55e; --color-success-soft: rgba(34,197,94,.1); --color-warning: #f59e0b; --color-warning-soft: rgba(245,158,11,.1); --color-danger: #ef4444; --color-danger-soft: rgba(239,68,68,.1); --color-info: #3b82f6; --color-info-soft: rgba(59,130,246,.1); --color-sidebar-bg: #0f172a; --color-sidebar-text: rgba(255,255,255,.6); --color-sidebar-hover:rgba(255,255,255,.08); --color-sidebar-active:rgba(99,102,241,.2); --radius-card: 12px; --radius-btn: 8px; --radius-input: 8px; --shadow-card: 0 1px 4px rgba(15,23,42,.07), 0 4px 12px rgba(15,23,42,.04); --shadow-card-hover: 0 4px 8px rgba(15,23,42,.1), 0 12px 24px rgba(15,23,42,.07); --shadow-btn-primary: 0 0 0 0 rgba(99,102,241,0); --shadow-btn-primary-hover: 0 4px 14px rgba(99,102,241,.35); --font-body: 'Nunito', 'Public Sans', sans-serif; --font-size-h1: 28px; --font-size-h2: 22px; --font-size-h3: 18px; --font-size-body:15px; --font-size-sm: 13px; --transition: 200ms ease-out; } /* ── Dark tokens ── */ body.theme-dark, [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-card: #243247; --color-border: #334155; --color-border-soft: #1e293b; --color-text: #f1f5f9; --color-text-sec: #cbd5e1; --color-muted: #94a3b8; --color-primary: #818cf8; --color-primary-soft: rgba(129,140,248,.15); --color-success: #4ade80; --color-success-soft: rgba(74,222,128,.12); --color-warning: #fbbf24; --color-warning-soft: rgba(251,191,36,.12); --color-danger: #f87171; --color-danger-soft: rgba(248,113,113,.12); --color-info: #60a5fa; --color-info-soft: rgba(96,165,250,.12); --color-sidebar-bg: #020817; --color-sidebar-text: rgba(255,255,255,.5); --color-sidebar-hover:rgba(255,255,255,.07); --color-sidebar-active:rgba(129,140,248,.2); --shadow-card: 0 1px 4px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); --shadow-card-hover: 0 4px 8px rgba(0,0,0,.5), 0 12px 24px rgba(0,0,0,.4); --shadow-btn-primary-hover: 0 4px 14px rgba(129,140,248,.4); } /* ── Base ── */ html { font-size: var(--font-size-body); } body { font-family: var(--font-body) !important; background-color: var(--color-bg) !important; color: var(--color-text) !important; transition: background-color var(--transition), color var(--transition); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--font-body) !important; color: var(--color-text) !important; } h1 { font-size: var(--font-size-h1) !important; } h2 { font-size: var(--font-size-h2) !important; } h3 { font-size: var(--font-size-h3) !important; } small, .small, .text-sm { font-size: var(--font-size-sm) !important; } .text-muted { color: var(--color-muted) !important; } .text-secondary { color: var(--color-text-sec) !important; } /* ── Cards ── */ .card { background-color: var(--color-card) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card) !important; transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition) !important; } .card:hover { box-shadow: var(--shadow-card-hover) !important; transform: translateY(-2px); } .card-header, .card-footer { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; } .card-body { color: var(--color-text) !important; } /* ── Surface panels ── */ .layout-menu, #layout-menu { background-color: var(--color-sidebar-bg) !important; } .layout-navbar, #layout-navbar { background-color: var(--color-surface) !important; border-bottom: 1px solid var(--color-border) !important; } .content-footer { background-color: var(--color-surface) !important; border-top: 1px solid var(--color-border) !important; } .content-wrapper { background-color: var(--color-bg) !important; } /* ── Menu items ── */ .menu-inner .menu-item .menu-link { color: var(--color-sidebar-text) !important; border-radius: 8px !important; transition: background var(--transition), color var(--transition) !important; } .menu-inner .menu-item .menu-link:hover { background-color: var(--color-sidebar-hover) !important; color: #fff !important; } .menu-inner .menu-item.active > .menu-link { background-color: var(--color-sidebar-active) !important; color: var(--color-primary) !important; } .menu-inner .menu-item.active > .menu-link .menu-icon { color: var(--color-primary) !important; } .menu-header-text { color: var(--color-sidebar-text) !important; opacity: .5; font-size: 11px !important; letter-spacing: .08em; } /* ── Navbar ── */ .navbar-brand, .nav-link, .navbar-nav .nav-link { color: var(--color-text) !important; } .navbar .form-control { background: transparent !important; color: var(--color-text) !important; } .navbar .form-control::placeholder { color: var(--color-muted) !important; } /* ── Buttons ── */ .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; border-radius: var(--radius-btn) !important; transition: box-shadow var(--transition), transform var(--transition) !important; } .btn-primary:hover { box-shadow: var(--shadow-btn-primary-hover) !important; transform: translateY(-1px); } .btn-outline-primary { color: var(--color-primary) !important; border-color: var(--color-primary) !important; border-radius: var(--radius-btn) !important; transition: all var(--transition) !important; } .btn-outline-primary:hover { background-color: var(--color-primary) !important; color: #fff !important; box-shadow: var(--shadow-btn-primary-hover) !important; } .btn-secondary, .btn-outline-secondary { border-radius: var(--radius-btn) !important; } /* ── Forms ── */ /* ── Form inputs ── */ .form-control, .form-select { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text) !important; border-radius: var(--radius-input) !important; transition: border-color var(--transition), box-shadow var(--transition) !important; font-size: 13px !important; } .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px var(--color-primary-soft) !important; } .form-control::placeholder { color: var(--color-muted) !important; } .form-label, label { color: var(--color-text) !important; } .input-group-text { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; color: var(--color-text-sec) !important; } /* ── Tables ── */ .table { color: var(--color-text) !important; --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); } .table th, .table td { border-color: var(--color-border) !important; color: var(--color-text) !important; background-color: transparent !important; } .sc-table-head th, thead.sc-table-head th { background-color: var(--color-surface) !important; color: var(--color-muted) !important; font-size: var(--font-size-sm) !important; text-transform: uppercase; letter-spacing: .05em; border-color: var(--color-border) !important; } .table-hover > tbody > tr:hover > * { background-color: var(--color-primary-soft) !important; } /* ── Dropdowns ── */ .dropdown-menu { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card-hover) !important; } .dropdown-item { color: var(--color-text) !important; } .dropdown-item:hover { background-color: var(--color-primary-soft) !important; } .dropdown-divider { border-color: var(--color-border) !important; } /* ── Badges ── */ .bg-label-primary, .bg-primary-subtle { background-color: var(--color-primary-soft) !important; color: var(--color-primary) !important; } .bg-label-success, .bg-success-subtle { background-color: var(--color-success-soft) !important; color: var(--color-success) !important; } .bg-label-warning, .bg-warning-subtle { background-color: var(--color-warning-soft) !important; color: var(--color-warning) !important; } .bg-label-danger, .bg-danger-subtle { background-color: var(--color-danger-soft) !important; color: var(--color-danger) !important; } .bg-label-info, .bg-info-subtle { background-color: var(--color-info-soft) !important; color: var(--color-info) !important; } /* ── Alerts ── */ .alert-success { background-color: var(--color-success-soft) !important; border-color: var(--color-success) !important; color: var(--color-success) !important; } .alert-warning { background-color: var(--color-warning-soft) !important; border-color: var(--color-warning) !important; color: var(--color-warning) !important; } .alert-danger { background-color: var(--color-danger-soft) !important; border-color: var(--color-danger) !important; color: var(--color-danger) !important; } .alert-info { background-color: var(--color-info-soft) !important; border-color: var(--color-info) !important; color: var(--color-info) !important; } /* ── Misc ── */ .border { border-color: var(--color-border) !important; } .border-top { border-top-color: var(--color-border) !important; } .border-bottom { border-bottom-color: var(--color-border) !important; } .bg-white { background-color: var(--color-card) !important; } .bg-light { background-color: var(--color-surface) !important; } .shadow-sm { box-shadow: var(--shadow-card) !important; } .shadow { box-shadow: var(--shadow-card-hover) !important; } /* ── Breadcrumb ── */ .breadcrumb-item, .breadcrumb-item a { color: var(--color-text-sec) !important; } .breadcrumb-item.active { color: var(--color-muted) !important; } .breadcrumb-item + .breadcrumb-item::before{ color: var(--color-muted) !important; } /* ── Accordion ── */ .accordion-item { background-color: var(--color-surface) !important; border-color: var(--color-border) !important; } .accordion-button { background-color: var(--color-surface) !important; color: var(--color-text) !important; } .accordion-button:not(.collapsed) { background-color: var(--color-primary-soft) !important; color: var(--color-primary) !important; } /* ── Theme toggle button ── */ #themeToggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; background-color: var(--color-surface) !important; border: 1px solid var(--color-border) !important; color: var(--color-muted) !important; transition: all var(--transition) !important; } #themeToggle:hover { background-color: var(--color-primary-soft) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; transform: rotate(15deg); } /* ── Scrollbar ── */ ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-muted); } /* ============================================================ SeoCute Component Classes (dashboard system — global) ============================================================ */ /* ── Dashboard-specific premium styles ── */ .sc-page-header { margin-bottom:32px; } .sc-page-title { font-size:26px; font-weight:800; color:var(--color-text); letter-spacing:-.4px; margin:0; } .sc-page-sub { font-size:14px; color:var(--color-muted); margin-top:4px; } /* Metric cards */ .sc-metric-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; box-shadow: 0 2px 12px rgba(15,23,42,.05); transition: transform 200ms ease-out, box-shadow 200ms ease-out; position: relative; overflow: hidden; } .sc-metric-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(15,23,42,.10); } .sc-metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:16px 16px 0 0; } .sc-metric-card.accent-primary::before { background: var(--color-primary); } .sc-metric-card.accent-success::before { background: var(--color-success); } .sc-metric-card.accent-warning::before { background: var(--color-warning); } .sc-metric-card.accent-info::before { background: var(--color-info); } .sc-metric-label { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; } .sc-metric-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; } .sc-metric-value { font-size:36px; font-weight:800; color:var(--color-text); line-height:1; margin-bottom:8px; } .sc-metric-sub { font-size:13px; color:var(--color-muted); display:flex; align-items:center; gap:6px; } .sc-delta-up { color:var(--color-success); font-weight:600; font-size:12px; } .sc-delta-down { color:var(--color-danger); font-weight:600; font-size:12px; } .sc-delta-neutral { color:var(--color-muted); font-weight:600; font-size:12px; } /* Section cards */ .sc-section-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 2px 12px rgba(15,23,42,.05); overflow: hidden; } .sc-section-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; background: var(--color-card); } .sc-section-title { font-size:15px; font-weight:700; color:var(--color-text); margin:0; display:flex; align-items:center; gap:8px; } .sc-section-title i { color:var(--color-primary); font-size:16px; } .sc-section-body { padding:24px; } .sc-section-body-0{ padding:0; } /* Empty states */ .sc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; gap:12px; } .sc-empty-icon { width:56px; height:56px; border-radius:16px; background:var(--color-primary-soft); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--color-primary); } .sc-empty-title { font-size:15px; font-weight:700; color:var(--color-text); margin:0; } .sc-empty-msg { font-size:13px; color:var(--color-muted); margin:0; max-width:240px; line-height:1.5; } .sc-empty-action{ margin-top:4px; } /* Tables */ .sc-table { width:100%; border-collapse:collapse; } .sc-table th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--color-muted); padding:10px 16px; border-bottom:1px solid var(--color-border); background:var(--color-surface); white-space:nowrap; } .sc-table td { padding:12px 16px; font-size:13px; color:var(--color-text); border-bottom:1px solid var(--color-border); vertical-align:middle; } .sc-table tbody tr:last-child td { border-bottom:none; } .sc-table tbody tr { transition:background 150ms ease; } .sc-table tbody tr:hover td { background:var(--color-primary-soft) !important; } /* Rank pill */ .sc-rank-pill { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:24px; border-radius:8px; font-size:12px; font-weight:700; padding:0 8px; } .sc-rank-1-3 { background:var(--color-success-soft); color:var(--color-success); } .sc-rank-4-10 { background:var(--color-primary-soft); color:var(--color-primary); } .sc-rank-11-20{ background:var(--color-warning-soft); color:var(--color-warning); } .sc-rank-low { background:var(--color-border); color:var(--color-muted); } /* Activity feed */ .sc-activity-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--color-border); } .sc-activity-item:last-child { border-bottom:none; } .sc-activity-dot { width:32px; height:32px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; } .sc-activity-text { font-size:13px; color:var(--color-text); font-weight:500; } .sc-activity-time { font-size:11px; color:var(--color-muted); margin-top:2px; } /* Health ring */ .sc-health-ring-wrap { position:relative; width:120px; height:120px; flex-shrink:0; } .sc-health-ring-wrap canvas { position:absolute; inset:0; } .sc-health-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; } .sc-health-val { font-size:26px; font-weight:800; color:var(--color-text); line-height:1; } .sc-health-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--color-muted); } /* Opportunity items */ .sc-opp-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--color-border); } .sc-opp-item:last-child { border-bottom:none; } .sc-opp-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; } .sc-opp-title{ font-size:13px; font-weight:600; color:var(--color-text); } .sc-opp-meta { font-size:11px; color:var(--color-muted); } /* Quick-add prompt card */ .sc-welcome-card { background: linear-gradient(135deg, var(--color-primary) 0%, #4f8ef7 100%); border-radius:16px; padding:28px 32px; color:#fff; position:relative; overflow:hidden; } .sc-welcome-card::after { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:rgba(255,255,255,.08); border-radius:50%; } /* Chart containers */ .sc-chart-wrap { position:relative; } /* Competitor bar */ .sc-comp-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--color-border); } .sc-comp-row:last-child { border-bottom:none; } .sc-comp-bar-wrap { flex:1; background:var(--color-border); border-radius:4px; height:6px; overflow:hidden; } .sc-comp-bar { height:100%; border-radius:4px; background:var(--color-primary); transition:width 600ms ease; } @media(max-width:768px) { .sc-metric-value { font-size:28px; } .sc-section-body { padding:16px; } .sc-page-title { font-size:20px; } }