/* ============================================================= VEDA-SAKTHI Design System — vs-core.css v1.0 Shared styles for all VEDA-SAKTHI portals Last updated: 09 Feb 2026 PREFIX: vs- (VEDA-SAKTHI) COMPONENTS: - vs-header Top navigation bar - vs-header-row Flex container inside header - vs-logo Brand logo (left) - vs-header-actions Right side controls - vs-badge Role/mode indicator pill - vs-btn-home Home navigation button - vs-nav Bottom navigation bar - vs-nav-item Individual nav item - vs-main Main scrollable content - vs-card Content card - vs-section-title Section heading - vs-footer Version/status bar THEMES: - Light mode (default) - Dark mode via [data-theme="dark"] on USAGE: ============================================================= */ /* --- CSS Variables (Light) --- */ :root { --vs-bg: #f8fafc; --vs-bg-card: #ffffff; --vs-bg-header: #ffffff; --vs-text: #1e293b; --vs-text-muted: #64748b; --vs-border: #e2e8f0; --vs-shadow: 0 1px 3px rgba(0,0,0,0.08); --vs-shadow-lg: 0 4px 12px rgba(0,0,0,0.1); --vs-radius: 12px; --vs-radius-sm: 8px; --vs-radius-pill: 20px; --vs-safe-top: env(safe-area-inset-top, 0px); --vs-safe-bottom: env(safe-area-inset-bottom, 0px); /* Brand colors */ --vs-orange: #f97316; --vs-orange-dark: #ea580c; --vs-cyan: #0891b2; --vs-cyan-dark: #0e7490; --vs-green: #22c55e; --vs-purple: #8b5cf6; --vs-red: #ef4444; --vs-yellow: #eab308; /* Gradients */ --vs-grad-orange: linear-gradient(135deg, #f97316, #ea580c); --vs-grad-cyan: linear-gradient(135deg, #06b6d4, #0891b2); --vs-grad-green: linear-gradient(135deg, #22c55e, #16a34a); --vs-grad-purple: linear-gradient(135deg, #8b5cf6, #7c3aed); } /* --- CSS Variables (Dark) --- */ [data-theme="dark"] { --vs-bg: #0f172a; --vs-bg-card: #1e293b; --vs-bg-header: #1e293b; --vs-text: #f1f5f9; --vs-text-muted: #94a3b8; --vs-border: #334155; --vs-shadow: 0 1px 3px rgba(0,0,0,0.3); --vs-shadow-lg: 0 4px 12px rgba(0,0,0,0.4); } /* --- Header --- */ .vs-header { background: var(--vs-bg-header); border-bottom: 1px solid var(--vs-border); padding: calc(var(--vs-safe-top) + 6px) 14px 6px; flex-shrink: 0; z-index: 100; box-shadow: var(--vs-shadow); position: sticky; top: 0; } .vs-header-row { display: flex; align-items: center; justify-content: space-between; max-width: 900px; margin: 0 auto; } /* --- Logo --- */ .vs-logo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.95rem; cursor: pointer; color: var(--vs-orange); text-decoration: none; } .vs-logo-icon { font-size: 1.2rem; } .vs-logo-text { letter-spacing: -0.3px; } /* --- Header Actions (right side) --- */ .vs-header-actions { display: flex; align-items: center; gap: 8px; } /* --- Home Button --- */ .vs-btn-home { text-decoration: none; color: inherit; font-size: 0.75rem; font-weight: 600; padding: 5px 12px; border-radius: var(--vs-radius-sm); background: rgba(128, 128, 128, 0.15); border: 1px solid rgba(128, 128, 128, 0.3); transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center; } .vs-btn-home:hover { background: rgba(128, 128, 128, 0.25); border-color: rgba(128, 128, 128, 0.5); } /* --- Badge (role/mode indicator) --- */ .vs-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 12px; border-radius: var(--vs-radius-pill); color: white; display: inline-flex; align-items: center; gap: 4px; } .vs-badge-teacher { background: var(--vs-grad-orange); } .vs-badge-student { background: var(--vs-grad-cyan); } .vs-badge-revision { background: var(--vs-grad-purple); } .vs-badge-test { background: var(--vs-grad-green); } .vs-badge-admin { background: var(--vs-grad-orange); } /* --- Theme Toggle --- */ .vs-btn-theme { background: none; border: none; font-size: 1.1rem; cursor: pointer; padding: 4px; border-radius: 50%; transition: transform 0.2s; } .vs-btn-theme:hover { transform: scale(1.15); } /* --- Bottom Navigation --- */ .vs-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--vs-bg-header); border-top: 1px solid var(--vs-border); padding: 4px 0 calc(var(--vs-safe-bottom) + 4px); z-index: 100; box-shadow: 0 -1px 3px rgba(0,0,0,0.08); } .vs-nav-row { display: flex; justify-content: space-around; max-width: 500px; margin: 0 auto; } .vs-nav-item { display: flex; flex-direction: column; align-items: center; padding: 4px 12px; font-size: 0.62rem; color: var(--vs-text-muted); cursor: pointer; border: none; background: none; transition: color 0.2s; gap: 2px; } .vs-nav-item span { font-size: 1.1rem; } .vs-nav-item.active { color: var(--vs-orange); font-weight: 700; } .vs-nav-item:hover { color: var(--vs-orange); } /* --- Main Content Area --- */ .vs-main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 70px; /* space for bottom nav */ } .vs-container { max-width: 900px; margin: 0 auto; padding: 12px 14px; } /* --- Cards --- */ .vs-card { background: var(--vs-bg-card); border-radius: var(--vs-radius); border: 1px solid var(--vs-border); padding: 16px; margin-bottom: 12px; box-shadow: var(--vs-shadow); } .vs-card-hover:hover { box-shadow: var(--vs-shadow-lg); transform: translateY(-1px); transition: all 0.2s; } /* --- Section Title --- */ .vs-section-title { font-size: 0.72rem; font-weight: 700; color: var(--vs-orange); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } /* --- Footer / Version Bar --- */ .vs-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-size: 0.65rem; color: var(--vs-text-muted); } .vs-footer .vs-status { color: var(--vs-green); } /* --- Utility Classes --- */ .vs-flex { display: flex; } .vs-flex-center { display: flex; align-items: center; justify-content: center; } .vs-flex-between { display: flex; align-items: center; justify-content: space-between; } .vs-gap-4 { gap: 4px; } .vs-gap-8 { gap: 8px; } .vs-gap-12 { gap: 12px; } .vs-mt-8 { margin-top: 8px; } .vs-mt-12 { margin-top: 12px; } .vs-mb-8 { margin-bottom: 8px; } .vs-mb-12 { margin-bottom: 12px; } .vs-hidden { display: none !important; } /* --- Buttons --- */ .vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 20px; border-radius: var(--vs-radius-sm); font-size: 0.85rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none; width: 100%; } .vs-btn-orange { background: var(--vs-grad-orange); color: white; } .vs-btn-cyan { background: var(--vs-grad-cyan); color: white; } .vs-btn-green { background: var(--vs-grad-green); color: white; } .vs-btn-purple { background: var(--vs-grad-purple); color: white; } .vs-btn-outline { background: transparent; border: 1.5px solid var(--vs-border); color: var(--vs-text); } .vs-btn:hover { opacity: 0.9; transform: translateY(-1px); } .vs-btn-outline:hover { border-color: var(--vs-orange); color: var(--vs-orange); } /* --- Form Elements --- */ .vs-input, .vs-select { width: 100%; padding: 10px 14px; border: 1.5px solid var(--vs-border); border-radius: var(--vs-radius-sm); font-size: 0.9rem; background: var(--vs-bg-card); color: var(--vs-text); transition: border-color 0.2s; } .vs-input:focus, .vs-select:focus { outline: none; border-color: var(--vs-orange); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); } .vs-label { font-size: 0.78rem; font-weight: 600; color: var(--vs-text); margin-bottom: 6px; display: block; } /* --- Responsive --- */ @media (max-width: 600px) { .vs-container { padding: 10px 10px; } .vs-card { padding: 12px; } .vs-header { padding: calc(var(--vs-safe-top) + 4px) 10px 4px; } }