/* Design System: DVForge Monochromatic Theme with Yellow & Pink accents */
@font-face {
font-family: 'TM';
src: url('TM.woff2') format('woff2'),
url('TM.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'Space Mono', 'Fira Code', monospace;
--font-pixel: 'TM', monospace;
/* Typographic scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Spacing scale */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
/* Standardized Border Radii */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
/* Header/Navbar Height */
--header-height: 52px;
/* Theme variables for LIGHT mode (default) */
--bg-primary: #fcfaf2; /* Creamy White */
--bg-secondary: #f4f0e6; /* Soft Cream */
--bg-tertiary: #e9e3d5;
--bg-header: rgba(252, 250, 242, 0.82);
--text-primary: #1e1c18; /* Soft Off-Black text */
--text-secondary: #5c574f;
--text-tertiary: #8c8579;
--border-color: #1e1c18;
--border-subtle: #dcd6c8;
--shadow-color: rgba(30, 28, 24, 0.05);
--transition-speed: 0.2s;
/* Accent Colors (ARC Prize Inspired) */
--accent-primary: #c29900; /* Gold/Yellow accent */
--primary-blue: var(--accent-primary); /* Map legacy primary-blue variable name */
--gold-accent: #ca8a04;
--gold-bg: rgba(202, 138, 4, 0.04);
--gold-glow: rgba(202, 138, 4, 0.25);
--accent-pink: #db2777;
--accent-green-bg: #0d2b15; /* Always deep green with white text */
--accent-red-bg: #2d0e0e;
--success: #10b981;
--error: #ef4444;
}
[data-theme="dark"] {
/* Theme variables for DARK mode */
--bg-primary: #0e0c0c; /* Exact ARC Prize Off-Black */
--bg-secondary: #171515; /* Clean container dark gray/red tint */
--bg-tertiary: #201e1e;
--bg-header: rgba(14, 12, 12, 0.78);
--text-primary: #e3e1df; /* Exact ARC Prize Off-White */
--text-secondary: #a5a3a1;
--text-tertiary: #757371;
--border-color: #e3e1df;
--border-subtle: #282626;
--shadow-color: rgba(0, 0, 0, 0.5);
/* Header/Navbar Height */
--header-height: 52px;
/* Accent Colors (ARC Prize Inspired) */
--accent-primary: #facc15; /* Vibrant Yellow */
--primary-blue: var(--accent-primary); /* Map legacy primary-blue variable name */
--gold-accent: #facc15;
--gold-bg: rgba(250, 204, 21, 0.04);
--gold-glow: rgba(250, 204, 21, 0.35);
--accent-pink: #d946ef;
--accent-green-bg: #0c2c16;
--accent-red-bg: #2a0c0c;
--success: #34d399;
--error: #f87171;
}
/* Global Reset & Base */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-sans);
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.5;
transition: background-color var(--transition-speed), color var(--transition-speed);
overflow-x: hidden;
}
body.no-scroll {
overflow: hidden;
}
/* Header & Headings Pixelated Font Rules */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.track-card-title,
.mock-pack-title,
.modal-title,
.sidebar-card-title,
.exp-card-title,
.solve-title,
.stats-number,
.logo-text {
font-family: var(--font-pixel) !important;
letter-spacing: 0.5px;
}
/* Scrollbar Styles */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: var(--radius-sm);
transition: background-color var(--transition-speed) ease;
}
/* Trigger visibility of scrollbar thumb on container hover */
*:hover::-webkit-scrollbar-thumb,
body:hover ::-webkit-scrollbar-thumb,
html:hover ::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.12); /* Increased transparency yellow */
}
::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.35) !important;
}
/* Layout Elements */
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Navigation Bar */
header.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 2.25rem;
background-color: var(--bg-header);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid var(--border-subtle);
border-radius: 9999px;
max-width: 1200px;
width: calc(100% - 4rem);
margin: 0.8rem auto 1rem auto;
position: sticky;
top: 0.8rem;
z-index: 100;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
header.app-header {
width: calc(100% - 1.5rem);
margin: 0.5rem auto 0.5rem auto;
padding: 0.5rem 1.25rem;
top: 0.5rem;
}
}
.logo-section {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.logo-box {
width: 28px;
height: 28px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.9rem;
}
.logo-text {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.main-nav {
display: flex;
gap: 1.5rem;
}
.nav-link, .contact-link {
text-decoration: none;
color: var(--text-secondary);
font-family: var(--font-pixel);
font-size: 0.76rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
transition: color var(--transition-speed);
cursor: pointer;
}
.nav-link:hover, .nav-link.active, .contact-link:hover {
color: var(--text-primary);
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background-color: transparent;
color: var(--text-primary);
cursor: pointer;
transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), transform 0.1s;
}
.btn:active {
transform: scale(0.98);
}
.btn-primary {
background-color: var(--primary-blue);
border-color: var(--primary-blue);
color: #000000;
font-weight: 700;
}
.btn-primary:hover {
background-color: #eab308;
border-color: #eab308;
color: #000000;
}
.btn-secondary:hover {
background-color: var(--bg-tertiary);
border-color: var(--text-secondary);
color: var(--text-primary);
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.theme-toggle-btn {
height: 32px;
padding: 0 0.85rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: transparent;
color: var(--text-primary);
transition: border-color var(--transition-speed);
}
.theme-toggle-btn:hover {
border-color: var(--border-color);
}
/* View Sections */
.view-section {
display: none;
flex: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
body.no-scroll {
overflow: hidden;
}
/* Header & Headings Pixelated Font Rules */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.track-card-title,
.mock-pack-title,
.modal-title,
.sidebar-card-title,
.exp-card-title,
.solve-title,
.stats-number,
.logo-text {
font-family: var(--font-pixel) !important;
letter-spacing: 0.5px;
}
/* Layout Elements */
.app-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Navigation Bar */
header.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.6rem 2.25rem;
background-color: var(--bg-header);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid var(--border-subtle);
border-radius: 9999px;
max-width: 1200px;
width: calc(100% - 4rem);
margin: 0.8rem auto 1rem auto;
position: sticky;
top: 0.8rem;
z-index: 100;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
@media (max-width: 768px) {
header.app-header {
width: calc(100% - 1.5rem);
margin: 0.5rem auto 0.5rem auto;
padding: 0.5rem 1.25rem;
top: 0.5rem;
}
}
/* Redesigned In-App Premium Header */
header.app-header.authenticated-header {
border-radius: 0;
border-bottom: none;
border-left: none;
border-right: none;
border-top: none;
max-width: none;
width: 100%;
margin: 0;
top: 0;
height: var(--header-height, 52px);
padding: 0.85rem max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem));
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
}
@media (max-width: 768px) {
header.app-header.authenticated-header {
width: 100%;
margin: 0;
padding: 0.5rem 1.5rem;
top: 0;
border-radius: 0;
}
}
.logo-section {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.logo-box {
width: 28px;
height: 28px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.9rem;
}
.logo-text {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.main-nav {
display: flex;
gap: 1.5rem;
}
.nav-link, .contact-link {
text-decoration: none;
color: var(--text-secondary);
font-family: var(--font-pixel);
font-size: 0.76rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 400;
transition: color var(--transition-speed);
cursor: pointer;
}
.nav-link:hover, .nav-link.active, .contact-link:hover {
color: var(--text-primary);
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background-color: transparent;
color: var(--text-primary);
cursor: pointer;
transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), transform 0.1s;
}
.btn:active {
transform: scale(0.98);
}
.btn-primary {
background-color: var(--primary-blue);
border-color: var(--primary-blue);
color: #000000;
font-weight: 700;
}
.btn-primary:hover {
background-color: #eab308;
border-color: #eab308;
color: #000000;
}
.btn-secondary:hover {
background-color: var(--bg-tertiary);
border-color: var(--text-secondary);
color: var(--text-primary);
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.theme-toggle-btn {
height: 32px;
padding: 0 0.85rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: transparent;
color: var(--text-primary);
transition: border-color var(--transition-speed);
}
.theme-toggle-btn:hover {
border-color: var(--border-color);
}
/* View Sections */
.view-section {
display: none;
flex: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
}
.view-section.active {
display: block;
}
/* Landing Page (Hero) */
.hero-section {
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
box-sizing: border-box;
padding-top: 56px; /* Offset the 56px fixed header */
min-height: calc(100vh - 60px); /* Ticker sits exactly at bottom of screen */
display: flex;
flex-direction: column;
}
.hero-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
width: 100%;
flex: 1;
border-top: 1px solid var(--border-subtle);
}
.hero-left-col {
padding: 4.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.hero-right-col {
border-left: 1px solid var(--border-subtle);
padding: 4.5rem 3rem;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
@keyframes alien-float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-16px);
}
}
.pixel-alien, .logo-alien {
image-rendering: pixelated;
shape-rendering: crispEdges;
max-width: 100%;
height: auto;
will-change: transform;
}
.pixel-alien {
animation: alien-float 6s ease-in-out infinite;
}
.animate-alien-spin {
animation: alienSpin 30s linear infinite;
transform-origin: center;
}
@keyframes alienSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.alien-eye {
animation: alienBlink 4s infinite step-end;
opacity: 0;
}
@keyframes alienBlink {
0%, 90%, 100% {
opacity: 0;
}
93%, 97% {
opacity: 1;
}
}
.hero-title {
font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important;
font-weight: 900;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
margin: 0 0 2rem 0;
color: var(--text-primary);
text-transform: uppercase;
font-family: 'Inter', sans-serif;
}
.title-row {
display: block;
padding: 0.6rem 0;
}
.title-row.border-row {
border-bottom: 1px solid var(--border-subtle);
}
.hero-subtitle {
font-size: 1.05rem;
color: var(--text-secondary);
max-width: 100%;
margin: 0 0 2.5rem 0;
line-height: 1.6;
}
.highlight {
color: var(--primary-blue);
font-weight: 700;
}
.hero-cta-group {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 480px;
margin: 1.5rem 0 0 0;
}
.hero-email-input {
flex: 1;
height: 42px;
padding: 0 1.25rem;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
font-family: var(--font-sans);
background-color: var(--bg-primary);
color: var(--text-primary);
outline: none;
transition: border-color var(--transition-speed);
box-sizing: border-box;
}
.hero-email-input:focus {
border-color: var(--primary-blue);
}
.hero-email-input::placeholder {
color: var(--text-tertiary);
}
.hero-cta-group .btn-primary {
background-color: var(--primary-blue);
border-color: var(--primary-blue);
color: #000000;
font-weight: 700;
font-size: 0.9rem;
height: 42px;
padding: 0 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.hero-cta-group .btn-primary:hover {
background-color: transparent;
border-color: var(--border-color);
color: var(--text-primary);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
padding: 4rem 0;
}
.feature-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 2rem;
background-color: var(--bg-primary);
transition: border-color var(--transition-speed), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
transform-style: preserve-3d;
perspective: 1000px;
}
.feature-card:hover {
border-color: var(--border-color);
}
.feature-icon {
width: 40px;
height: 40px;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 1.25rem;
}
.feature-card h3 {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.feature-card p {
font-size: 0.9rem;
color: var(--text-secondary);
}
.feature-card .btn-job-apply {
margin-top: auto;
}
/* Section Header */
.section-header {
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 1.5rem;
}
.section-title {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.section-desc {
font-size: 0.95rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
/* Filters & Search Control Bar */
.controls-bar {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.search-input {
flex: 1;
min-width: 200px;
padding: 0.5rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background-color: var(--bg-primary);
color: var(--text-primary);
outline: none;
font-family: var(--font-sans);
font-size: 0.85rem;
}
.search-input:focus {
border-color: var(--border-color);
}
.select-filter {
padding: 0.5rem 2rem 0.5rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
outline: none;
font-family: var(--font-sans);
font-size: 0.85rem;
cursor: pointer;
appearance: none;
color-scheme: dark !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3e1df' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 0.9rem;
}
.select-filter:focus {
border-color: var(--border-color);
}
/* Problems Layout (LeetCode Style) */
.problems-layout-container {
display: grid;
grid-template-columns: 1fr 280px;
gap: 2rem;
align-items: start;
margin-top: 1.5rem;
}
@media (max-width: 992px) {
.problems-layout-container {
grid-template-columns: 1fr;
}
}
.problems-main-column {
min-width: 0;
}
.problems-sidebar-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
box-shadow: 0 4px 12px var(--shadow-color);
}
.sidebar-card-title {
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.progress-circle-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
}
.progress-circle-text {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#solved-count-big {
font-family: var(--font-sans);
font-size: 1.4rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1;
}
.progress-total {
font-size: 0.75rem;
color: var(--text-secondary);
}
.progress-ring-circle-fill {
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.35s;
}
.difficulty-breakdown {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.diff-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
.diff-label {
font-weight: 600;
}
.diff-label.easy-label {
color: #fef08a;
}
.diff-label.medium-label {
color: var(--primary-blue);
}
.diff-label.hard-label {
color: #ca8a04;
}
.diff-counts {
color: var(--text-secondary);
}
/* Replaced by New Calendar CSS */
/* Tables style */
.table-container {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow-x: auto;
background-color: var(--bg-primary);
}
.data-table {
width: 100%;
min-width: 650px;
border-collapse: collapse;
text-align: left;
}
.data-table th, .data-table td {
padding: 0.8rem 0.5rem;
font-size: 0.8rem;
}
.data-table th {
background-color: var(--bg-secondary);
font-weight: 700;
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.data-table tr:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
.data-table tr:hover {
background-color: var(--bg-secondary);
}
.badge {
display: inline-block;
padding: 0.15rem 0.5rem;
font-size: 0.7rem;
font-weight: 600;
border-radius: 4px;
border: 1px solid var(--border-subtle);
background-color: transparent;
color: var(--text-primary);
text-transform: uppercase;
}
#solve-type-badge {
border-color: var(--border-subtle) !important;
color: var(--text-secondary) !important;
}
.judge-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
padding: 0.15rem 0.5rem;
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
background-color: var(--bg-secondary);
color: var(--text-secondary);
}
.judge-badge.hidden {
display: none !important;
}
.judge-badge.constrained-random-probe {
color: #22d3ee;
border-color: rgba(34, 211, 238, 0.35);
background-color: rgba(34, 211, 238, 0.08);
}
.judge-badge.uvm-component-probe {
color: #22d3ee;
border-color: rgba(34, 211, 238, 0.35);
background-color: rgba(34, 211, 238, 0.08);
}
.judge-badge.uvm-scoreboard-probe {
color: #22d3ee;
border-color: rgba(34, 211, 238, 0.35);
background-color: rgba(34, 211, 238, 0.08);
}
.judge-badge.preview {
color: #94a3b8;
border-color: rgba(148, 163, 184, 0.35);
background-color: rgba(148, 163, 184, 0.08);
}
.synthesis-problem-note {
margin-top: 1rem;
padding: 0.7rem 0.8rem;
border-left: 3px solid var(--success);
background-color: rgba(16, 185, 129, 0.06);
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.45;
}
.synthesis-problem-note.combined-problem-note {
border-left-color: #a78bfa;
background-color: rgba(167, 139, 250, 0.06);
}
.synthesis-problem-note.formal-problem-note {
border-left-color: #fb923c;
background-color: rgba(251, 146, 60, 0.06);
}
.synthesis-problem-note.verilator-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.runtime-sva-problem-note {
border-left-color: #f472b6;
background-color: rgba(244, 114, 182, 0.06);
}
.synthesis-problem-note.interface-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.axi-driver-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.clocking-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.constrained-random-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.uvm-component-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.uvm-scoreboard-probe-problem-note {
border-left-color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.synthesis-problem-note.preview-problem-note {
border-left-color: #94a3b8;
background-color: rgba(148, 163, 184, 0.06);
}
.backend-status-indicator {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 20px;
padding: 0.15rem 0.5rem;
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
white-space: nowrap;
}
.backend-status-indicator.hidden {
display: none !important;
}
.backend-status-indicator.checking {
color: var(--text-secondary);
background-color: var(--bg-secondary);
}
.backend-status-indicator.online {
color: var(--success);
border-color: rgba(16, 185, 129, 0.35);
background-color: rgba(16, 185, 129, 0.08);
}
.backend-status-indicator.offline {
color: var(--error);
border-color: rgba(239, 68, 68, 0.35);
background-color: rgba(239, 68, 68, 0.08);
}
.badge-easy {
border-color: var(--border-subtle);
color: var(--text-secondary);
}
.badge-medium {
border-color: var(--border-subtle);
background-color: var(--bg-secondary);
}
.badge-hard {
background-color: var(--text-primary);
color: var(--bg-primary);
}
/* Split Pane Layout (Solve page) */
.split-pane {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
height: calc(100vh - 160px);
margin-top: 1rem;
}
body.problem-solve-layout .split-pane {
height: calc(100vh - 110px);
}
.pane-left, .pane-right {
display: flex;
flex-direction: column;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--bg-primary);
position: relative;
}
.pane-header {
padding: 0.75rem 1.25rem;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
font-weight: 700;
}
.pane-body {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
}
/* Tabs inside Panes */
.pane-tabs {
display: flex;
gap: 0.5rem;
}
.pane-tab {
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
}
.pane-tab.active {
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
/* Code Editor */
.editor-container {
display: flex;
flex: 1;
font-family: var(--font-mono);
font-size: 0.85rem;
position: relative;
background-color: var(--bg-primary);
min-height: 250px;
max-height: 400px;
overflow: hidden;
}
#editor-line-numbers {
padding: 1rem 0.5rem;
text-align: right;
color: var(--text-tertiary);
user-select: none;
background-color: var(--bg-secondary);
border-right: 1px solid var(--border-subtle);
min-width: 40px;
overflow: hidden;
height: 100%;
}
.code-textarea {
flex: 1;
border: none;
resize: none;
outline: none;
padding: 1rem;
font-family: var(--font-mono);
background-color: var(--bg-primary);
color: var(--text-primary);
white-space: pre;
tab-size: 4;
overflow-y: auto;
height: 100%;
}
/* Console & Waveform output */
.output-section {
height: 200px;
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
}
.console-terminal {
flex: 1;
background-color: var(--bg-primary);
padding: 1rem;
font-family: var(--font-mono);
font-size: 0.8rem;
overflow-y: auto;
border-bottom: 1px solid var(--border-subtle);
}
.console-log {
margin-bottom: 0.25rem;
}
.console-log.error {
color: #ff3b30; /* Keep high contrast alert if needed but fallback to simple borders */
font-weight: bold;
}
.console-log.success {
font-weight: bold;
}
.waveform-canvas-container {
padding: 0.5rem;
background-color: var(--bg-secondary);
overflow-x: auto;
display: none;
align-items: center;
justify-content: center;
}
.waveform-canvas {
background-color: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
}
/* Learning Tracks cards grid */
.tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1.5rem;
}
.track-card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
background-color: var(--bg-primary);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color var(--transition-speed), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
transform-style: preserve-3d;
perspective: 1000px;
}
.track-card:hover {
border-color: var(--border-color);
}
.track-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.progress-bar-container {
width: 100%;
height: 8px;
background-color: var(--bg-tertiary);
border-radius: var(--radius-sm);
overflow: hidden;
margin: 1rem 0;
}
.progress-bar-fill {
height: 100%;
background-color: var(--text-primary);
width: 0%;
transition: width 0.5s ease-out;
}
/* Leaderboard Profile layout */
.profile-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
}
.profile-sidebar {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
background-color: var(--bg-primary);
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
}
.contribution-calendar {
margin-top: 2rem;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(24, 12px);
gap: 3px;
margin-top: 0.5rem;
overflow: hidden;
padding: 0.5rem 0;
}
.heatmap-cell {
width: 12px;
height: 12px;
background-color: var(--bg-secondary);
border-radius: 2px;
border: 1px solid var(--border-subtle);
}
.heatmap-cell.level-1 { background-color: #fef08a; }
.heatmap-cell.level-2 { background-color: #fde047; }
.heatmap-cell.level-3 { background-color: #eab308; }
.heatmap-cell.level-4 { background-color: #ca8a04; }
[data-theme="dark"] .heatmap-cell.level-1 { background-color: #242217; }
[data-theme="dark"] .heatmap-cell.level-2 { background-color: #4f420f; }
[data-theme="dark"] .heatmap-cell.level-3 { background-color: #9c8213; }
[data-theme="dark"] .heatmap-cell.level-4 { background-color: var(--primary-blue); }
/* Mock Interviews */
.mock-packs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.mock-pack-card {
display: flex;
flex-direction: column;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
background-color: var(--bg-primary);
transition: border-color var(--transition-speed), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
transform-style: preserve-3d;
perspective: 1000px;
}
.mock-pack-card:hover {
border-color: var(--border-color);
}
.mock-pack-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.mock-pack-meta {
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
.mock-pack-card .btn-mock-start {
margin-top: auto;
}
/* Modal for waitlist alert - Animated transitions */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 1000;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.show {
display: flex;
opacity: 1;
pointer-events: auto;
}
.modal-content {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
max-width: 450px;
width: 90%;
padding: 2.25rem;
text-align: center;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
max-height: 90vh;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
opacity: 0;
transform: scale(0.95) translateY(25px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.modal-overlay.show .modal-content {
opacity: 1;
transform: scale(1) translateY(0);
}
.modal-content::-webkit-scrollbar {
display: none; /* Safari/Chrome */
}
.modal-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 1rem;
}
.modal-desc {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
/* Responsive Overrides */
@media (max-width: 768px) {
header.app-header {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.split-pane {
grid-template-columns: 1fr;
height: auto;
}
.pane-left, .pane-right {
height: 500px;
}
.profile-grid {
grid-template-columns: 1fr;
}
}
/* Subtle Fade-in Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.view-section.fade-out {
animation: fadeOutSection 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes fadeOutSection {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
/* Waveform Viewer Window Component */
.waveform-window {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 180px;
border-top: 1.5px solid var(--border-color);
background-color: var(--bg-primary);
z-index: 50;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.waveform-window.open {
display: flex;
flex-direction: column;
animation: slideUp 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Expanded floating modal state */
.waveform-window.expanded {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
max-width: 95%;
height: 380px;
z-index: 2000;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: 0 8px 30px var(--shadow-color);
animation: none;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.wave-window-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
user-select: none;
}
.wave-window-title {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
}
.wave-window-controls {
display: flex;
gap: 0.75rem;
align-items: center;
}
.wave-control-btn {
background: none;
border: none;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
cursor: pointer;
padding: 0.15rem 0.35rem;
border-radius: var(--radius-sm);
transition: background-color 0.2s;
}
.wave-control-btn:hover {
background-color: var(--bg-tertiary);
}
.wave-window-body {
flex: 1;
background-color: var(--bg-primary);
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Company Logo Ticker Tape */
.ticker-section {
margin: 0;
text-align: center;
overflow: hidden;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 1.25rem 0;
background-color: var(--bg-primary);
user-select: none;
}
.ticker-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--text-secondary);
margin-bottom: 0.75rem;
text-transform: uppercase;
}
.ticker-wrapper {
width: 100%;
overflow: hidden;
position: relative;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.ticker-track {
display: flex;
width: max-content;
animation: tickerScroll 28s linear infinite;
gap: 4rem;
}
.ticker-track span {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--text-primary);
opacity: 0.6;
transition: opacity 0.2s;
}
.ticker-track:hover {
animation-play-state: paused;
}
.ticker-track span:hover {
opacity: 1;
}
@keyframes tickerScroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.ticker-reverse {
animation: tickerScrollReverse 28s linear infinite;
}
@keyframes tickerScrollReverse {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* Retro CRT Terminal Monitor */
.crt-monitor {
position: relative;
max-width: 800px;
width: 100%;
margin: 3rem auto 0 auto;
border: 4px solid var(--border-subtle);
border-radius: var(--radius-lg);
background-color: #0b0b0b;
box-shadow: 0 16px 40px rgba(0,0,0,0.15), 0 0 0 1px var(--border-subtle);
overflow: hidden;
z-index: 1;
text-align: left;
}
.crt-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--border-color);
background-color: transparent;
}
.crt-monitor-title {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--text-tertiary);
letter-spacing: 0.5px;
}
.crt-screen {
position: relative;
background-color: #000000;
border-top: 2px solid var(--border-color);
border-bottom: 2px solid var(--border-color);
padding: 1rem;
overflow: hidden;
}
/* CRT Scanlines Overlay */
.crt-scanlines {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(
rgba(18, 16, 16, 0) 50%,
rgba(0, 0, 0, 0.25) 50%
), linear-gradient(
90deg,
rgba(255, 255, 255, 0.03),
rgba(0, 0, 0, 0.03),
rgba(255, 255, 255, 0.03)
);
background-size: 100% 4px, 6px 100%;
pointer-events: none;
z-index: 10;
}
/* CRT Subtle Flicker */
.crt-flicker {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255, 255, 255, 0.003);
pointer-events: none;
z-index: 9;
animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
0% { opacity: 0.95; }
50% { opacity: 1; }
100% { opacity: 0.95; }
}
.crt-screen::after {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);
pointer-events: none;
z-index: 11;
}
/* Tabs inside CRT screen */
.sandbox-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
border-bottom: 1px dashed #333333;
padding-bottom: 0.5rem;
z-index: 12;
position: relative;
}
.sandbox-tab {
font-family: var(--font-mono);
font-size: 0.75rem;
color: #666666;
cursor: pointer;
padding: 0.2rem 0.5rem;
border: 1px solid transparent;
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.sandbox-tab.active {
color: #ffffff;
border-color: #ffffff;
background-color: #111111;
text-shadow: 0 0 4px rgba(255,255,255,0.5);
}
.sandbox-tab:hover:not(.active) {
color: #cccccc;
}
/* Sandbox Body */
.sandbox-body {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 1rem;
height: 280px;
z-index: 12;
position: relative;
}
.sandbox-code-container {
border: 1px solid #222222;
border-radius: var(--radius-md);
background-color: #050505;
overflow: hidden;
height: 100%;
}
.sandbox-code-textarea {
width: 100%;
height: 100%;
background: transparent;
border: none;
resize: none;
outline: none;
padding: 0.75rem;
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.4;
color: #dcdcdc;
tab-size: 2;
overflow-y: auto;
}
/* Sandbox output container */
.sandbox-output-container {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid #222222;
border-radius: var(--radius-md);
background-color: #050505;
overflow: hidden;
}
.sandbox-console-header, .sandbox-wave-header {
font-family: var(--font-mono);
font-size: 0.65rem;
font-weight: 700;
color: #888888;
padding: 0.25rem 0.5rem;
background-color: #0d0d0d;
border-bottom: 1px solid #1a1a1a;
}
.sandbox-wave-header {
border-top: 1px solid #1a1a1a;
}
.sandbox-console {
flex: 1;
padding: 0.5rem;
font-family: var(--font-mono);
font-size: 0.7rem;
line-height: 1.35;
color: #a0a0a0;
overflow-y: auto;
white-space: pre-wrap;
}
.sandbox-console .error-log {
color: #ff5252;
}
.sandbox-console .success-log {
color: #ffffff;
text-shadow: 0 0 2px rgba(255,255,255,0.8);
}
.sandbox-wave-container {
height: 100px;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
}
#sandbox-wave-canvas {
background: #030303;
border: 1px solid #111111;
}
/* CRT physical bezel top/bottom */
.crt-bezel-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--bg-secondary);
color: var(--text-primary);
}
.crt-bezel-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background-color: var(--bg-secondary);
color: var(--text-primary);
}
/* CRT Button (simulate retro push button) */
.crt-btn {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
padding: 0.4rem 1rem;
border-radius: var(--radius-sm);
border: 2px solid var(--border-color);
background-color: var(--text-primary);
color: var(--bg-primary);
cursor: pointer;
position: relative;
box-shadow: 0 2px 0 var(--border-color);
transition: all 0.1s;
}
.crt-btn:active {
transform: translateY(2px);
box-shadow: 0 0 0 var(--border-color);
}
/* CRT dials decoration */
.crt-dials {
display: flex;
gap: 1rem;
}
.crt-dial-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.crt-dial-label {
font-size: 0.55rem;
font-weight: 700;
color: var(--text-secondary);
}
.crt-dial {
width: 14px;
height: 14px;
border-radius: 50%;
border: 1.5px solid var(--border-color);
background: repeating-conic-gradient(from 0deg, var(--text-secondary) 0deg 30deg, transparent 30deg 60deg);
}
/* Stats Section Styles */
.stats-section {
padding: 3rem 0;
border-bottom: 1px solid var(--border-subtle);
background-color: var(--bg-primary);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
text-align: center;
}
.stat-card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem 1rem;
background-color: var(--bg-primary);
transition: border-color var(--transition-speed);
}
.stat-card:hover {
border-color: var(--border-color);
}
.stat-num {
font-family: var(--font-mono);
font-size: 2rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
}
/* Champion Spotlight Styles */
.champion-spotlight-section {
padding: 1.5rem 0 3rem 0;
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: center;
}
.champion-card {
max-width: 800px;
width: 100%;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background-color: var(--bg-secondary);
padding: 1.5rem;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.champion-badge-container {
margin-bottom: 1rem;
text-align: left;
}
.champion-badge {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 1px;
padding: 0.25rem 0.6rem;
border: 1.5px solid var(--primary-blue);
background-color: var(--primary-blue);
color: #000000;
border-radius: var(--radius-sm);
}
.champion-profile {
display: flex;
align-items: center;
gap: 1.5rem;
}
.champion-avatar {
width: 54px;
height: 54px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--bg-primary);
flex-shrink: 0;
}
.champion-info {
flex: 1;
text-align: left;
}
.champion-handle {
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 800;
color: var(--text-primary);
}
.champion-quote {
font-size: 0.85rem;
font-style: italic;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.champion-stats {
display: flex;
gap: 1.5rem;
}
.champion-stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.champion-stat-val {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 800;
color: var(--primary-blue);
}
.champion-stat-lbl {
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.sandbox-body {
grid-template-columns: 1fr;
height: auto;
}
.sandbox-code-container, .sandbox-output-container {
height: 200px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.champion-profile {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.champion-info {
text-align: center;
}
.champion-stats {
width: 100%;
justify-content: center;
}
}
/* Pricing Grid 5-Column Forced Row */
.pricing-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
padding: 3rem 0;
}
.pricing-grid .feature-card {
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 420px;
}
.pricing-grid .feature-card h3 {
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.pricing-grid .feature-card p {
font-size: 0.78rem;
}
.pricing-grid .feature-card ul {
margin-top: 1rem;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.pricing-grid .feature-card li {
font-size: 0.75rem;
line-height: 1.4;
}
@media (max-width: 1200px) {
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
@media (max-width: 768px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.pricing-grid {
grid-template-columns: 1fr;
}
}
/* Nav yellow indicator glow */
.nav-link:hover, .nav-link.active, .contact-link:hover {
color: var(--primary-blue);
text-shadow: 0 0 8px rgba(250, 204, 21, 0.25);
}
/* Gold Premium monetization card styling */
.pricing-grid .feature-card.gold-premium {
border: 2px solid var(--gold-accent) !important;
background-color: var(--gold-bg);
color: var(--text-primary);
position: relative;
}
.pricing-grid .feature-card.gold-premium::before {
content: 'RECOMMENDED';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.5px;
padding: 0.15rem 0.5rem;
background-color: var(--gold-accent);
color: #000000;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
}
.pricing-grid .feature-card.gold-premium h3 {
color: var(--gold-accent);
text-shadow: 0 0 2px rgba(212,175,55,0.2);
}
.pricing-grid .feature-card.gold-premium .btn-primary {
background-color: var(--gold-accent);
color: #000000;
border-color: var(--gold-accent);
font-weight: 700;
}
.pricing-grid .feature-card.gold-premium .btn-primary:hover {
background-color: transparent;
color: var(--gold-accent);
border-color: var(--gold-accent);
}
/* Electric Blue console elements */
.crt-monitor-title {
color: var(--primary-blue) !important;
text-shadow: 0 0 4px var(--primary-blue);
}
.sandbox-console {
color: #a0d0ff;
}
.sandbox-console .success-log {
color: var(--primary-blue) !important;
text-shadow: 0 0 4px var(--primary-blue);
font-weight: 700;
}
/* Sandbox tab active highlight */
.sandbox-tab.active {
color: var(--primary-blue) !important;
border-color: var(--primary-blue) !important;
background-color: #0d0d0d !important;
text-shadow: 0 0 4px var(--primary-blue) !important;
}
.crt-btn.btn-sandbox-run {
background-color: var(--primary-blue);
border-color: var(--primary-blue);
color: #000000;
font-weight: bold;
}
.crt-btn.btn-sandbox-run:hover {
background-color: transparent;
color: var(--primary-blue);
}
/* Footer Styles */
.app-footer {
border-top: none;
background-color: var(--bg-primary);
padding: 3.5rem 1.5rem;
margin-top: 5rem;
user-select: none;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 3rem;
}
.footer-left {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.footer-desc {
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
max-width: 320px;
}
.footer-copyright {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.footer-links-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.footer-col {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
text-align: left;
}
.footer-col h4 {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.footer-link {
font-size: 0.8rem;
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-speed);
cursor: pointer;
}
.footer-link:hover {
color: var(--primary-blue);
}
/* Interview Experiences Section */
.experiences-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.experience-card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
background-color: var(--bg-primary);
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color var(--transition-speed), transform 0.2s;
}
.experience-card:hover {
border-color: var(--border-color);
transform: translateY(-2px);
}
.exp-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.exp-card-title {
font-size: 0.95rem;
font-weight: 800;
color: var(--text-primary);
}
.exp-card-meta {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-bottom: 1rem;
}
.exp-card-summary {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.45;
margin-bottom: 1rem;
flex-grow: 1;
}
.exp-card-questions {
background-color: var(--bg-secondary);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-primary);
max-height: 110px;
overflow-y: auto;
white-space: pre-wrap;
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-links-grid {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
/* Replit-Inspired 2x2 Ecosystem Grid */
.replit-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
padding: 1rem 0;
}
@media (max-width: 1024px) {
.replit-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.replit-grid {
grid-template-columns: 1fr;
}
}
.replit-card {
position: relative;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 290px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.replit-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
/* Background Color Tiers - Unified to Grey */
.card-coral {
background-color: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-subtle);
}
.card-coral .replit-card-label {
color: var(--text-secondary);
}
.card-grey {
background-color: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-subtle);
}
.card-grey .replit-card-label {
color: var(--text-secondary);
}
.card-dark {
background-color: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-subtle);
}
.card-dark .replit-card-label {
color: var(--text-secondary);
}
.card-orange {
background-color: var(--bg-secondary);
color: var(--text-primary);
border-color: var(--border-subtle);
}
.card-orange .replit-card-label {
color: var(--text-secondary);
}
/* Card Header & Metadata Labels */
.replit-card-header {
margin-bottom: 1.25rem;
height: 90px; /* Fixed height to align content levels across cards */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.replit-card-header-top {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
min-height: 40px; /* Aligns 1-line and 2-line labels perfectly */
}
.replit-card-label {
display: inline-flex;
align-items: center;
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.85;
font-weight: bold;
margin-bottom: 0;
}
.replit-card-title {
font-family: 'Press Start 2P', 'Silkscreen', monospace;
font-size: 1.2rem !important; /* Slightly smaller for 4-column space */
font-weight: bold;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0.25rem 0 0 0;
text-transform: uppercase;
color: inherit !important;
}
.replit-card-desc {
font-size: 0.88rem;
line-height: 1.6;
opacity: 0.9;
text-align: left; /* Left aligned text */
margin-top: 0.5rem;
}
/* Card Graphics/Mockups */
.replit-card-graphic {
position: relative;
height: 140px;
background-color: rgba(0, 0, 0, 0.04);
border-radius: 20px;
border: 1px dashed rgba(30, 27, 75, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-top: auto;
overflow: hidden;
}
.card-dark .replit-card-graphic {
background-color: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
.card-orange .replit-card-graphic {
background-color: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
}
/* 1. Graphic: Student Path Node Network */
.pixel-mockup-path {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 90%;
}
.path-node {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
width: 80px;
}
.node-dot {
width: 12px;
height: 12px;
border: 2px solid currentColor;
border-radius: 50%;
background-color: transparent;
}
.path-node.completed .node-dot {
background-color: currentColor;
}
.path-node.active .node-dot {
background-color: var(--primary-blue);
box-shadow: 0 0 8px var(--primary-blue);
}
.node-label {
font-size: 0.65rem;
font-weight: bold;
text-align: center;
font-family: 'Space Mono', monospace;
white-space: nowrap;
color: inherit;
}
.path-connector {
flex-grow: 1;
height: 2px;
background-color: rgba(0, 0, 0, 0.15);
}
.card-dark .path-connector {
background-color: rgba(255, 255, 255, 0.15);
}
.card-orange .path-connector {
background-color: rgba(255, 255, 255, 0.15);
}
.path-connector.completed {
background-color: currentColor;
}
/* 2. Graphic: Flow chart merge */
.flow-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
width: 95%;
}
.flow-box {
padding: 0.3rem 0.6rem;
font-size: 0.6rem;
font-family: 'Space Mono', monospace;
font-weight: bold;
border: 1px solid var(--border-color);
background-color: var(--bg-primary);
border-radius: 6px;
text-align: center;
color: var(--text-primary);
}
.flow-box.main-box {
width: 140px;
background-color: var(--primary-blue);
color: #0e0c0c;
border-color: var(--primary-blue);
}
.flow-box.score-box {
background-color: var(--text-primary);
color: var(--bg-primary);
border-color: var(--text-primary);
}
.flow-row {
display: flex;
gap: 0.5rem;
justify-content: center;
width: 100%;
}
.flow-box.sub-box {
width: 65px;
}
.flow-connector-down {
width: 2px;
height: 8px;
background-color: var(--border-color);
}
.flow-connector-up {
width: 2px;
height: 8px;
background-color: var(--border-color);
}
/* 3. Graphic: Terminal Console mockup */
.terminal-mockup {
width: 90%;
background-color: #111111;
border-radius: 12px;
border: 1px solid #333333;
font-family: 'Fira Code', monospace;
overflow: hidden;
}
.terminal-header {
height: 24px;
background-color: #222222;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0 0.75rem;
border-bottom: 1px solid #333333;
}
.terminal-header .dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.terminal-header .dot.red { background-color: #ef4444; }
.terminal-header .dot.yellow { background-color: #eab308; }
.terminal-header .dot.green { background-color: #22c55e; }
.terminal-body {
padding: 0.75rem;
font-size: 0.55rem;
line-height: 1.4;
display: flex;
flex-direction: column;
text-align: left;
}
.terminal-body .line {
color: #cccccc;
}
.terminal-body .line.cmd::before {
content: "$ ";
color: var(--primary-blue);
}
.terminal-body .line.success {
color: #4ade80;
}
.terminal-body .line.coverage {
color: #fb7185;
}
/* 4. Graphic: Waveform Simulator */
.waveform-mockup {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 90%;
}
.wave-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.wave-name {
width: 25px;
font-size: 0.6rem;
font-weight: bold;
font-family: 'Space Mono', monospace;
color: inherit;
}
.wave-bars {
flex-grow: 1;
height: 16px;
background-repeat: repeat-x;
background-size: 24px 16px;
}
/* Default (Light Theme): Dark off-black stroke */
.wave-bars.clk {
background-image: url("data:image/svg+xml;utf8,");
}
.wave-bars.rst {
background-image: url("data:image/svg+xml;utf8,");
}
.wave-bars.out {
background-image: url("data:image/svg+xml;utf8,");
}
/* Dark Theme overrides: Off-white stroke */
[data-theme="dark"] .wave-bars.clk {
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .wave-bars.rst {
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] .wave-bars.out {
background-image: url("data:image/svg+xml;utf8,");
}
/* Alternating Feature Rows Tour */
.tour-rows-container {
display: flex;
flex-direction: column;
gap: 6rem;
margin-top: 3rem;
}
.feature-row {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
}
.feature-row.reverse {
grid-template-columns: 1.2fr 1fr;
}
@media (max-width: 1024px) {
.feature-row {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.feature-row.reverse {
grid-template-columns: 1fr;
gap: 2.5rem;
}
/* On mobile, stack explanation above browser preview */
.feature-row.reverse .tour-preview {
order: 2;
}
.feature-row.reverse .feature-explanation {
order: 1;
}
}
.feature-explanation {
display: flex;
flex-direction: column;
text-align: left;
}
.feature-num {
font-family: 'Space Mono', monospace;
font-size: 1.25rem;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 0.5rem;
}
.feature-title {
font-family: 'Space Mono', monospace;
font-size: 1.4rem;
font-weight: 800;
margin: 0 0 1rem 0;
color: var(--text-primary);
text-transform: uppercase;
}
.feature-desc {
font-size: 0.92rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
text-align: left;
}
/* Browser Frame Preview */
.tour-preview {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.browser-chrome {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.75rem 1.25rem;
background-color: var(--bg-tertiary);
border-bottom: 1px solid var(--border-subtle);
}
.browser-dots {
display: flex;
gap: 0.4rem;
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.browser-dot.red { background-color: #ff5f56; }
.browser-dot.yellow { background-color: #ffbd2e; }
.browser-dot.green { background-color: #27c93f; }
.browser-address {
flex-grow: 1;
background-color: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 0.25rem 0.75rem;
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
color: var(--text-secondary);
text-align: center;
max-width: 400px;
margin: 0 auto;
}
.browser-frame-content {
position: relative;
width: 100%;
height: 480px; /* Limit height and scroll/scale image */
overflow: hidden;
background-color: #0e0c0c;
}
.browser-frame-content img {
width: 100%;
height: auto;
display: block;
transition: opacity 0.25s ease;
}
/* Scroll Reveal Animations */
.reveal {
opacity: 0;
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.slide-up {
transform: translateY(40px);
}
.reveal.slide-left {
transform: translateX(-50px);
}
.reveal.slide-right {
transform: translateX(50px);
}
.reveal.active {
opacity: 1;
transform: translate(0) !important;
}
.reveal.stagger-1 { transition-delay: 0.1s; }
.reveal.stagger-2 { transition-delay: 0.2s; }
.reveal.stagger-3 { transition-delay: 0.3s; }
.reveal.stagger-4 { transition-delay: 0.4s; }
@media (max-width: 768px) {
.updates-banner-title {
font-size: 1.85rem !important;
}
.updates-banner-quote {
font-size: 0.95rem !important;
}
}
/* Landing Page Split Header Styles */
header.landing-header {
display: grid;
grid-template-columns: 1.5fr 1fr;
width: 100%;
max-width: 100%;
margin: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 56px;
box-sizing: border-box;
z-index: 9999; /* Stay on top of all content */
border-bottom: none;
background-color: rgba(14, 12, 12, 0.45); /* Clear glassmorphism backdrop */
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
animation: fadeInHeader 0.8s ease-out both;
}
@keyframes fadeInHeader {
from { opacity: 0; }
to { opacity: 1; }
}
header.landing-header .header-pill {
display: flex;
align-items: center;
height: 100%;
padding: 0 2rem;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
box-sizing: border-box;
}
header.landing-header .header-pill:first-child {
border-right: none;
}
header.landing-header .header-pill:last-child {
justify-content: flex-end;
}
/* -------------------------------------
CUSTOM STREAK CALENDAR
-------------------------------------- */
.streak-card {
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.streak-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
border-color: var(--border-color);
}
.streak-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
margin-top: 0.75rem;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 0.7rem;
font-family: 'Space Mono', monospace;
font-weight: 500;
transition: all 0.2s ease;
user-select: none;
}
.cal-mini-header {
font-size: 0.6rem;
text-align: center;
color: var(--text-tertiary);
margin-bottom: 0.2rem;
text-transform: uppercase;
}
/* Day States */
.cal-day-completed {
background-color: rgba(250, 204, 21, 0.15); /* Yellow tint */
border: 1px solid var(--primary-yellow);
color: var(--primary-yellow);
box-shadow: 0 0 8px rgba(250, 204, 21, 0.1);
}
.cal-day-missed {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
color: var(--text-tertiary);
opacity: 0.6;
}
.cal-day-today {
border: 2px solid var(--primary-blue);
background-color: rgba(96, 165, 250, 0.1);
color: var(--primary-blue);
font-weight: 800;
box-shadow: 0 0 10px rgba(96, 165, 250, 0.2);
}
.cal-day-today.cal-day-completed {
border: 2px solid var(--primary-yellow);
background-color: rgba(250, 204, 21, 0.2);
color: var(--primary-yellow);
box-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}
.cal-day-future {
background-color: transparent;
border: 1px dashed var(--border-subtle);
color: transparent; /* hide text if needed, or dim it */
opacity: 0.3;
}
/* Full Calendar Modal */
.cal-modal-content {
max-width: 800px !important;
padding: 2.5rem !important;
}
.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.cal-nav-btn {
background: none;
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-radius: var(--radius-md);
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
font-family: 'Space Mono', monospace;
font-weight: bold;
}
.cal-nav-btn:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border-color: var(--border-color);
}
.cal-month-title {
font-size: 1.5rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-primary);
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
margin-bottom: 2.5rem;
}
.cal-grid .cal-day {
font-size: 0.9rem;
padding: 0.5rem;
min-height: 48px;
border-radius: var(--radius-md);
}
.cal-grid .cal-mini-header {
font-size: 0.8rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
/* Stats Dashboard */
.cal-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
border-top: 1px solid var(--border-subtle);
padding-top: 2rem;
}
.cal-stat-card {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cal-stat-value {
font-size: 1.75rem;
font-weight: 900;
color: var(--primary-yellow);
margin-bottom: 0.25rem;
font-family: 'Space Mono', monospace;
}
.cal-stat-label {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
@media (max-width: 768px) {
.cal-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.cal-grid .cal-day {
min-height: 36px;
font-size: 0.75rem;
}
.cal-modal-content {
padding: 1.5rem !important;
}
}
/* --- CALENDAR MINI PREVIEW --- */
.cal-mini-cell {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.cal-mini-today { color: var(--primary-yellow); }
.cal-mini-completed { color: #10b981; } /* Emerald green */
.cal-mini-missed { color: var(--text-secondary); opacity: 0.5; }
.cal-mini-future { color: var(--text-secondary); opacity: 0.2; }
/* --- FULL CALENDAR MODAL --- */
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day {
position: relative;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 0.8rem;
font-family: 'Space Mono', monospace;
font-weight: 500;
transition: all 0.2s ease;
user-select: none;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
}
.cal-day:not(.empty):not(.future):hover {
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
z-index: 10;
}
.cal-day.today {
border-color: var(--primary-yellow);
color: var(--text-primary);
}
.cal-day.today .cal-badge {
position: absolute;
top: -8px;
right: -8px;
font-size: 0.9rem;
}
.cal-day.completed {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
color: #10b981;
}
.cal-day.missed {
opacity: 0.5;
}
.cal-day.future {
opacity: 0.2;
}
/* Consecutive streak lines */
.cal-day.completed.connected-next::after {
content: '';
position: absolute;
top: 50%;
right: -8px;
width: 16px;
height: 4px;
background: rgba(16, 185, 129, 0.3);
transform: translateY(-50%);
z-index: 1;
}
.cal-day.completed.connected-prev::before {
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 16px;
height: 4px;
background: rgba(16, 185, 129, 0.3);
transform: translateY(-50%);
z-index: 1;
}
/* -------------------------------------
NEW CALENDAR CSS
-------------------------------------- */
.streak-mini-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.2rem;
margin: 0.5rem 0;
text-align: center;
}
.mini-cal-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.mini-cal-header {
font-size: 0.7rem;
color: var(--text-secondary);
font-weight: bold;
}
.mini-cal-icon {
font-size: 0.9rem;
color: var(--text-secondary);
font-family: sans-serif;
}
.mini-cal-icon.completed {
color: var(--primary-green);
}
.cal-day-full {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.2s ease;
user-select: none;
gap: 0.2rem;
}
.cal-day-full:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.cal-day-num {
font-size: 0.8rem;
font-family: 'Space Mono', monospace;
font-weight: 500;
color: var(--text-primary);
}
.cal-day-status {
font-size: 1rem;
}
.cal-day-today {
border-color: var(--primary-yellow);
box-shadow: 0 0 10px rgba(250, 204, 21, 0.2);
}
.cal-day-completed {
background-color: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
}
.cal-day-missed {
opacity: 0.5;
}
.cal-day-future {
opacity: 0.3;
}
/* Bento Grid Layout Styles */
.stack-deck-container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 350px 350px;
gap: 1.25rem;
position: relative;
box-sizing: border-box;
}
.stack-card {
position: relative;
background: rgba(18, 16, 16, 0.35);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
backdrop-filter: blur(48px) saturate(180%);
-webkit-backdrop-filter: blur(48px) saturate(180%);
padding: 0; /* Changed to 0 so absolute image fills edge-to-edge */
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
box-sizing: border-box;
z-index: 1;
transition: border-color var(--transition-speed), background var(--transition-speed);
}
/* Card remains static on hover */
.stack-card-header {
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.25rem;
align-self: flex-start;
text-align: left;
}
.stack-card-num {
font-size: 1rem;
font-family: var(--font-mono);
color: var(--primary-blue);
opacity: 0.8;
}
.stack-card-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--text-primary);
line-height: 1.3;
margin-top: 0.25rem;
}
.stack-card-footer {
z-index: 2;
margin-top: auto;
max-width: 100%;
align-self: flex-start;
text-align: left;
}
.stack-card-desc {
font-size: 0.82rem;
line-height: 1.5;
color: var(--text-secondary);
text-align: left;
margin: 0;
}
/* Alternating Text Card Styling */
.stack-card.text-card {
padding: 2.25rem;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: rgba(18, 16, 16, 0.45);
}
.stack-card.text-card .stack-card-header {
width: 100%;
margin-bottom: 1.25rem;
}
.stack-card.text-card .stack-card-title {
font-size: 1.45rem;
font-weight: 800;
line-height: 1.3;
color: var(--text-primary);
margin-top: 0.35rem;
margin-bottom: 0.75rem;
}
.stack-card.text-card .stack-card-desc {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-secondary);
text-align: left;
}
/* Ecosystem Card Gallery Layout */
.ecosystem-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
padding-bottom: 0.5rem;
}
.ecosystem-card-meta-left {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
color: var(--primary-blue);
font-weight: bold;
}
.ecosystem-card-meta-right {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
color: var(--text-primary);
font-weight: bold;
}
.ecosystem-card-media {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 0;
width: 100%;
height: calc(100% - 3.5rem);
box-sizing: border-box;
}
.ecosystem-card-graphic {
max-width: 90%;
max-height: 230px;
object-fit: contain;
border: none;
background: transparent;
padding: 0;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.ecosystem-card-footer {
display: flex;
justify-content: flex-start;
width: 100%;
padding-top: 0.5rem;
}
.ecosystem-card-status {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
@media (max-width: 992px) {
.stack-deck-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
padding: 0 1rem;
}
.stack-card {
grid-column: auto !important;
grid-row: auto !important;
height: 350px;
}
.bento-bg-text {
display: none;
}
}
/* Desktop Only Warning for Mobile/Tablet */
.mobile-desktop-warning {
display: none;
position: fixed;
inset: 0;
background-color: #0e0c0c;
z-index: 999999;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
box-sizing: border-box;
}
.warning-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media (max-width: 1024px) {
.mobile-desktop-warning {
display: flex;
}
body {
overflow: hidden !important;
}
}
/* Rotating Word Animation */
.rotating-word-wrapper {
display: inline-block;
position: relative;
height: 1.15em;
vertical-align: bottom;
overflow: hidden;
transition: width 0.6s cubic-bezier(0.76, 0, 0.24, 1);
margin-bottom: 0.02em;
}
.rotating-word {
position: absolute;
left: 0;
bottom: 0;
white-space: nowrap;
opacity: 0;
transform: translateY(100%);
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease;
color: var(--primary-yellow);
font-family: inherit;
font-weight: inherit;
}
.rotating-word.active {
opacity: 1;
transform: translateY(0);
}
.rotating-word.exit {
opacity: 0;
transform: translateY(-100%);
}
/* Daily Challenge Widget */
.daily-challenge-card {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem 1.5rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
box-shadow: none;
position: relative;
overflow: hidden;
}
.daily-challenge-card::before {
display: none;
}
.daily-challenge-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.daily-challenge-tag {
background-color: transparent;
color: var(--primary-blue);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
padding: 0;
border-radius: 0;
width: fit-content;
letter-spacing: 0.05em;
border: none;
}
.daily-challenge-title {
font-size: 1.15rem;
font-weight: 700;
color: #ffffff;
margin: 0.25rem 0 0.15rem 0;
}
.daily-challenge-meta {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
gap: 1rem;
}
.daily-challenge-meta span {
display: flex;
align-items: center;
gap: 0.25rem;
}
.daily-challenge-action {
flex-shrink: 0;
}
/* Star Bookmark Toggle */
.btn-star-problem {
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.25rem;
font-size: 1.05rem;
transition: color 0.2s, transform 0.2s;
vertical-align: middle;
line-height: 1;
}
.btn-star-problem:hover {
color: var(--primary-yellow);
transform: scale(1.2);
}
.btn-star-problem.starred {
color: var(--primary-yellow);
text-shadow: 0 0 8px rgba(250, 204, 21, 0.5);
}
/* Starred Filter button toggle active state */
.btn-toggle-filter {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
border-radius: var(--radius-md);
padding: 0.5rem 0.75rem;
font-family: inherit;
font-size: 0.82rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.35rem;
transition: all 0.2s;
}
.btn-toggle-filter:hover {
border-color: var(--border-color);
color: #ffffff;
}
.btn-toggle-filter.active {
background-color: rgba(250, 204, 21, 0.1);
border-color: var(--primary-yellow);
color: var(--primary-yellow);
}
/* Frequency representation */
.freq-bar-wrapper {
display: flex;
gap: 3px;
align-items: center;
height: 10px;
}
.freq-dot {
width: 5px;
height: 9px;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 1px;
}
.freq-dot.active {
background-color: #f97316;
box-shadow: 0 0 6px rgba(249, 115, 22, 0.8);
}
/* Sandbox Playground Styles */
.sandbox-header-badge {
background-color: rgba(250, 204, 21, 0.15);
color: #ffffff;
border: 1px solid rgba(250, 204, 21, 0.4);
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.7rem;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.05em;
display: inline-block;
margin-left: 0.75rem;
vertical-align: middle;
}
/* Redesigned Workspace Layout */
body.problem-solve-layout {
overflow: hidden !important;
height: 100vh !important;
}
body.problem-solve-layout #view-problem-solve {
padding: 0 !important;
margin: 0 !important;
height: 100vh !important;
width: 100vw !important;
max-width: 100vw !important;
overflow: hidden !important;
}
.workspace-layout {
display: flex;
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
background-color: var(--bg-primary);
}
.workspace-pane {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
position: relative;
}
#solve-left-pane {
width: 38%; /* default starting width */
min-width: 280px;
max-width: 70%;
border-right: 1px solid var(--border-subtle);
background-color: var(--bg-primary);
}
#solve-left-pane.transitioning {
transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#solve-left-pane.collapsed-mode {
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
}
#solve-left-pane #solve-collapsed-sidebar {
display: none;
}
#solve-left-pane.collapsed-mode #solve-collapsed-sidebar {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
background-color: var(--bg-secondary);
padding: 12px 0;
gap: 12px;
box-sizing: border-box;
}
#solve-left-pane.collapsed-mode .pane-content-wrapper {
display: none !important;
}
#solve-left-pane.collapsed-mode + #split-vertical {
display: none !important;
}
.sidebar-btn {
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.15s ease;
}
.sidebar-btn:hover {
color: var(--text-primary);
background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-btn.active {
color: var(--primary-blue) !important;
background-color: rgba(250, 204, 21, 0.06);
border-radius: 6px;
}
#solve-right-pane {
flex: 1;
min-width: 350px;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
z-index: 20;
}
/* Gutter dividers */
.workspace-gutter {
background-color: var(--border-subtle);
z-index: 10;
position: relative;
transition: background-color 0.15s;
}
.workspace-gutter:hover,
.workspace-gutter.dragging {
background-color: var(--primary-yellow) !important;
}
.gutter-vertical {
width: 4px;
cursor: col-resize;
height: 100%;
}
.gutter-horizontal {
height: 4px;
cursor: row-resize;
width: 100%;
}
/* Left pane content structure */
#solve-left-pane .pane-content-wrapper {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
}
/* Right pane layouts */
.editor-section {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--bg-primary);
}
.editor-controls-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
height: 38px;
}
.editor-controls-bar .control-group {
display: flex;
gap: 0.5rem;
align-items: center;
}
.editor-container {
display: flex;
flex: 1;
font-family: var(--font-mono);
font-size: 0.85rem;
position: relative;
background-color: var(--bg-primary);
overflow: hidden;
min-height: 100px;
max-height: none !important;
}
.drawer-section {
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--bg-primary);
}
.drawer-tab-header {
display: flex;
align-items: center;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
height: 36px;
padding: 0 0.5rem;
justify-content: space-between;
user-select: none;
}
.drawer-tabs-wrapper {
display: flex;
height: 100%;
align-items: center;
}
.drawer-tab {
padding: 0.5rem 1rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
height: 100%;
border-bottom: 2px solid transparent;
display: flex;
align-items: center;
}
.drawer-tab.active {
color: var(--text-primary);
border-bottom-color: var(--primary-yellow);
background-color: rgba(255, 255, 255, 0.02);
}
.btn-drawer-toggle {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 0.95rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.btn-drawer-toggle:hover {
color: var(--text-primary);
}
.drawer-tab-content {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: var(--bg-primary);
}
.drawer-panel {
display: none;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.drawer-panel.active {
display: flex;
}
#panel-wave.active {
display: flex !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* Drag Cursor Override Classes */
body.dragging-vertical,
body.dragging-vertical * {
cursor: col-resize !important;
user-select: none !important;
}
body.dragging-horizontal,
body.dragging-horizontal * {
cursor: row-resize !important;
user-select: none !important;
}
/* ---------------------------------------------------- */
/* Container Query Core Settings */
/* ---------------------------------------------------- */
#solve-left-pane {
container-type: inline-size;
container-name: left-pane;
}
#solve-right-pane {
container-type: inline-size;
container-name: right-pane;
}
#solve-drawer-pane {
container-type: inline-size;
container-name: drawer-pane;
}
/* SVG Icon base style */
.svg-icon {
vertical-align: middle;
flex-shrink: 0;
display: inline-block;
}
.pane-tab .tab-icon,
.drawer-tab .tab-icon {
margin-right: 0;
}
/* ---------------------------------------------------- */
/* Left Panel Header & Title */
/* ---------------------------------------------------- */
.solve-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
min-height: 28px;
gap: 0.5rem;
}
#btn-back-problems {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
#btn-back-problems .btn-text {
display: inline;
}
#btn-back-problems .btn-text-short,
#btn-back-problems .btn-text-icon {
display: none;
}
.company-tags-container {
display: none !important;
}
.company-tags-container .company-text {
display: inline;
}
.company-tags-container .company-text-short,
.company-tags-container .company-icon-only {
display: none;
}
#solve-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.pane-tab {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.pane-tab .tab-text {
display: inline;
}
.pane-tab .tab-text-short,
.pane-tab .tab-icon {
display: none;
}
/* Left Pane Queries */
@container left-pane (max-width: 420px) {
#btn-back-problems .btn-text {
display: none;
}
#btn-back-problems .btn-text-short {
display: inline;
}
.company-tags-container .company-text {
display: none;
}
.company-tags-container .company-text-short {
display: inline;
}
.pane-tab .tab-text {
display: none;
}
.pane-tab .tab-text-short {
display: inline;
}
.pane-tabs {
gap: 0.4rem !important;
}
}
@container left-pane (max-width: 320px) {
#btn-back-problems .btn-text-short {
display: none;
}
#btn-back-problems .btn-text-icon {
display: inline;
}
.company-tags-container .company-text-short {
display: none;
}
.company-tags-container .company-icon-only {
display: inline-flex;
color: var(--text-secondary);
cursor: pointer;
}
.pane-tab .tab-text-short {
display: none;
}
.pane-tab .tab-icon {
display: inline-block;
}
#solve-title {
font-size: 1.15rem !important;
}
.pane-tabs {
gap: 0.25rem !important;
}
}
/* ---------------------------------------------------- */
/* Right Panel Toolbar */
/* ---------------------------------------------------- */
.editor-buttons-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-editor-reset,
.btn-editor-run,
.btn-editor-submit {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.btn-editor-reset .btn-lbl,
.btn-editor-run .btn-lbl,
.btn-editor-submit .btn-lbl {
display: inline;
}
.btn-editor-reset .btn-lbl-short,
.btn-editor-reset .btn-icon,
.btn-editor-run .btn-lbl-short,
.btn-editor-run .btn-icon,
.btn-editor-submit .btn-lbl-short {
display: none;
}
.btn-editor-submit .btn-icon {
display: inline-block;
}
.btn-editor-run.is-loading,
.btn-editor-submit.is-loading {
cursor: wait;
opacity: 0.78;
}
.btn-editor-submit {
background-color: var(--text-primary) !important;
border-color: var(--text-primary) !important;
color: var(--bg-primary) !important;
transition: all var(--transition-speed) ease-in-out;
}
.btn-editor-submit:hover {
background-color: var(--text-secondary) !important;
border-color: var(--text-secondary) !important;
color: var(--bg-primary) !important;
}
.editor-more-dropdown {
position: relative;
display: inline-block;
}
.btn-more-toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 0.3rem 0.45rem !important;
border: none !important;
background: transparent !important;
color: var(--text-secondary) !important;
box-shadow: none !important;
}
.btn-more-toggle:hover {
background-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
.dropdown-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 4px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 1000;
min-width: 130px;
padding: 0.25rem 0;
}
.dropdown-menu.show {
display: block;
}
.dropdown-item {
width: 100%;
padding: 0.5rem 0.75rem;
background: none;
border: none;
color: var(--text-secondary);
text-align: left;
font-size: 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-sans);
}
.dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
}
/* ---------------------------------------------------- */
/* Bottom Drawer Tabs */
/* ---------------------------------------------------- */
.drawer-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
white-space: nowrap;
}
.drawer-tab .tab-txt {
display: inline;
}
.drawer-tab .tab-txt-short,
.drawer-tab .tab-icon {
display: none;
}
.drawer-tab-overflow {
position: relative;
display: none;
}
.drawer-tab-overflow.active .drawer-tab-more-btn {
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
.drawer-tab-more-btn {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
cursor: pointer;
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.drawer-tab-more-btn:hover {
color: var(--text-primary);
}
@container drawer-pane (max-width: 650px) {
.drawer-tab .tab-txt {
display: none;
}
.drawer-tab .tab-txt-short {
display: inline;
}
}
@container drawer-pane (max-width: 480px) {
.drawer-tab .tab-txt-short {
display: none;
}
.drawer-tab .tab-icon {
display: inline-block;
}
}
@container drawer-pane (max-width: 360px) {
.drawer-tab[data-drawer-tab="assertions"],
.drawer-tab[data-drawer-tab="results"],
.drawer-tab[data-drawer-tab="wave"] {
display: none !important;
}
.drawer-tab-overflow {
display: inline-block !important;
}
}
.editor-controls-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0.5rem;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
height: 38px;
box-sizing: border-box;
gap: 0.5rem;
}
.toolbar-group {
display: flex;
align-items: center;
min-width: 0;
white-space: nowrap;
}
.toolbar-left {
flex: 0 1 auto; /* Left group takes content width but shrinks if needed */
justify-content: flex-start;
gap: 0.35rem;
}
.toolbar-center {
flex: 0 0 auto; /* Center section has fixed width to prevent text/icon overlap */
justify-content: center;
gap: 0.25rem;
}
.toolbar-right {
flex: 0 0 auto; /* Right section is fixed width & right aligned */
justify-content: flex-end;
gap: 0.35rem;
}
#editor-filename {
min-width: 50px;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-size: 0.8rem;
color: var(--text-secondary);
}
#wrapper-filename {
min-width: 140px;
max-width: 250px;
transition: min-width 0.1s ease;
}
.toolbar-select-wrapper {
position: relative;
display: inline-block;
flex-shrink: 0;
height: 24px;
}
.toolbar-select-wrapper .dropdown-menu {
left: 0;
right: auto;
}
#wrapper-language {
min-width: 120px;
transition: min-width 0.1s ease;
}
#wrapper-simulator {
min-width: 130px;
transition: min-width 0.1s ease;
}
#wrapper-top-module {
min-width: 140px;
}
#wrapper-theme {
min-width: 80px;
}
.toolbar-select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* Clickable overlay */
cursor: pointer;
z-index: 2;
margin: 0;
}
.select-value-display {
display: flex;
align-items: center;
gap: 0.35rem;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 0.72rem;
padding: 0 0.5rem;
font-weight: 600;
height: 24px;
line-height: 22px;
box-sizing: border-box;
z-index: 1;
pointer-events: none;
width: 100%;
justify-content: space-between;
}
.custom-dropdown-toggle {
cursor: pointer;
pointer-events: auto !important;
}
.custom-dropdown-menu {
min-width: 100%;
}
.dropdown-item.selected {
background-color: var(--bg-tertiary) !important;
color: var(--primary-blue) !important;
}
.overflow-select {
width: 100%;
background-color: var(--bg-tertiary) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-sm) !important;
color: var(--text-primary) !important;
font-size: 0.72rem !important;
padding: 0.25rem 0.5rem !important;
font-weight: 600 !important;
outline: none !important;
cursor: pointer !important;
margin-top: 0.25rem !important;
box-sizing: border-box !important;
}
.select-value-display .val-abbr,
.select-value-display .val-icon {
display: none;
}
.select-value-display .val-icon svg {
display: block;
}
.select-value-display .arrow-down {
font-size: 0.45rem;
color: var(--text-secondary);
margin-left: 0.2rem;
}
/* Custom tooltip helper for icon states */
.custom-dropdown-toggle[data-title]:hover::before {
content: attr(data-title);
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
background-color: var(--bg-primary);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-size: 0.65rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
white-space: nowrap;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
pointer-events: none;
opacity: 1;
display: block;
}
#wrapper-filename .custom-dropdown-toggle[data-title]:hover::before {
left: 0 !important;
transform: none !important;
}
.dropdown-divider {
height: 1px;
background-color: var(--border-subtle);
margin: 0.25rem 0;
display: none;
}
.dropdown-section {
display: none;
}
#wrapper-theme,
#wrapper-top-module,
#section-overflow-theme,
#section-overflow-top-module {
display: none !important;
}
/* Container Queries for Responsive Redesign */
@container right-pane (max-width: 920px) {
/* Action buttons short labels */
.btn-editor-reset .btn-lbl,
.btn-editor-run .btn-lbl,
.btn-editor-submit .btn-lbl {
display: none !important;
}
.btn-editor-reset .btn-lbl-short,
.btn-editor-run .btn-lbl-short,
.btn-editor-submit .btn-lbl-short {
display: inline !important;
}
}
@container right-pane (max-width: 780px) {
/* Dropdowns transition directly to Icons */
#wrapper-simulator {
min-width: 32px;
}
#wrapper-simulator .val-full,
#wrapper-simulator .arrow-down {
display: none !important;
}
#wrapper-simulator .val-icon {
display: inline-block !important;
}
#wrapper-simulator .select-value-display {
justify-content: center;
padding: 0;
}
#wrapper-language {
min-width: 32px;
}
#wrapper-language .val-full,
#wrapper-language .arrow-down {
display: none !important;
}
#wrapper-language .val-icon {
display: inline-block !important;
}
#wrapper-language .select-value-display {
justify-content: center;
padding: 0;
}
#wrapper-filename {
min-width: 32px;
max-width: 32px;
}
#wrapper-filename .val-full,
#wrapper-filename .arrow-down {
display: none !important;
}
#wrapper-filename .val-icon {
display: inline-block !important;
}
#wrapper-filename .select-value-display {
justify-content: center;
padding: 0;
}
}
@container right-pane (max-width: 380px) {
/* Action buttons become icon-only */
.btn-editor-reset .btn-lbl-short,
.btn-editor-run .btn-lbl-short,
.btn-editor-submit .btn-lbl-short {
display: none !important;
}
.btn-editor-reset .btn-icon,
.btn-editor-run .btn-icon,
.btn-editor-submit .btn-icon {
display: inline-block !important;
margin-right: 0 !important;
}
}
@container right-pane (max-width: 300px) {
/* Hide Reset Code button, show More dropdown */
.btn-editor-reset {
display: none !important;
}
.editor-more-dropdown {
display: inline-block !important;
}
}
/* Color-inverting active state highlights for editor utility buttons */
.btn-sm.active {
background-color: var(--text-primary) !important;
color: var(--bg-primary) !important;
border-color: var(--text-primary) !important;
}
.btn-sm.active svg {
stroke: var(--bg-primary) !important;
}
.btn-sm.active svg path,
.btn-sm.active svg line,
.btn-sm.active svg polyline,
.btn-sm.active svg circle {
stroke: var(--bg-primary) !important;
}
.dropdown-item.active {
background-color: var(--text-primary) !important;
color: var(--bg-primary) !important;
}
.dropdown-item.active svg path,
.dropdown-item.active svg line,
.dropdown-item.active svg polyline,
.dropdown-item.active svg circle {
stroke: var(--bg-primary) !important;
}
@keyframes slideIn {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Phase 3: Interactive Simulation Console Styles */
.drawer-panel {
display: none;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.drawer-panel.active {
display: flex !important;
}
/* Toolbars inside Panels */
.console-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 0.25rem 0.75rem;
min-height: 34px;
font-size: 0.75rem;
user-select: none;
}
.console-title {
color: var(--text-primary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.7rem;
}
.console-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: 2px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 0.75rem;
transition: all 0.15s ease;
margin-left: 4px;
}
.console-btn:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border-color: var(--text-secondary);
}
.console-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-secondary);
cursor: pointer;
margin-left: 8px;
font-size: 0.75rem;
}
.console-toggle input {
margin: 0;
cursor: pointer;
}
.console-content {
flex: 1;
overflow-y: auto;
padding: 1rem;
background-color: var(--bg-primary);
font-family: var(--font-mono);
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-primary);
}
/* Log Level Highlighting */
.log-line {
margin-bottom: 2px;
white-space: pre-wrap;
}
.log-info {
color: var(--text-secondary); /* Website faded secondary color */
}
.log-success {
color: #34d399; /* Emerald-400 */
}
.log-warning {
color: #fbbf24; /* Amber-400 */
}
.log-error {
color: #f87171; /* Red-400 */
}
.backend-log-block {
max-height: 260px;
margin: 0;
overflow: auto;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.5;
}
/* Assertions Panel Styles */
.assertions-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.assertion-card {
background-color: transparent;
border: 1px solid var(--border-subtle);
border-radius: 0;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 8px;
}
.assertion-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.assertion-time {
color: var(--text-secondary);
font-size: 0.7rem;
font-family: var(--font-mono);
}
.assertion-name {
font-weight: 700;
color: var(--text-primary);
font-size: 0.82rem;
}
.assertion-badge {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
vertical-align: middle;
font-size: 0 !important;
color: transparent !important;
line-height: 0 !important;
overflow: hidden !important;
text-indent: -9999px !important;
}
.assertion-badge.pass {
background-color: var(--success) !important;
border: none !important;
}
.assertion-badge.fail {
background-color: var(--error) !important;
border: none !important;
}
.assertion-details {
font-size: 0.78rem;
color: var(--text-secondary);
}
.assertion-comparison {
display: flex;
gap: 1.5rem;
font-size: 0.78rem;
background-color: transparent;
border-top: 1px dashed var(--border-subtle);
padding: 8px 0 0 0;
margin-top: 6px;
color: var(--text-secondary);
}
/* Test Results Styles */
.results-summary {
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 0.75rem 0;
margin-bottom: 1.25rem;
background-color: transparent;
}
.summary-card {
flex: 1;
text-align: center;
border-top: none !important;
border-left: none !important;
border-bottom: none !important;
border-right: 1px solid var(--border-subtle);
padding: 0 0.5rem;
}
.summary-card:last-child {
border-right: none !important;
}
.summary-num {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
margin-top: 4px;
}
.summary-label {
font-size: 0.65rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.backend-result-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.65rem;
}
.backend-result-eyebrow {
color: var(--text-secondary);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.backend-result-title {
color: var(--text-primary);
font-size: 1rem;
font-weight: 800;
}
.backend-result-note {
margin: 0 0 0.85rem 0;
color: var(--text-secondary);
font-size: 0.82rem;
line-height: 1.45;
}
.backend-verdict-pill {
flex: 0 0 auto;
padding: 0.25rem 0.6rem;
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.backend-verdict-pill.accepted,
.backend-verdict-text.accepted {
color: var(--success);
}
.backend-verdict-pill.accepted {
border-color: rgba(16, 185, 129, 0.35);
background-color: rgba(16, 185, 129, 0.08);
}
.backend-verdict-pill.error,
.backend-verdict-text.error,
.backend-status-text.error {
color: var(--error);
}
.backend-verdict-pill.error {
border-color: rgba(239, 68, 68, 0.35);
background-color: rgba(239, 68, 68, 0.08);
}
.backend-verdict-pill.warning,
.backend-verdict-text.warning {
color: #f59e0b;
}
.backend-verdict-pill.warning {
border-color: rgba(245, 158, 11, 0.35);
background-color: rgba(245, 158, 11, 0.08);
}
.backend-verdict-pill.pending,
.backend-verdict-text.pending {
color: var(--text-secondary);
}
.backend-status-text,
.backend-verdict-text {
font-size: 0.95rem;
}
.backend-status-text.queued {
color: var(--text-secondary);
}
.backend-status-text.running {
color: var(--gold-accent);
}
.backend-status-text.completed {
color: var(--success);
}
.backend-submission-card {
margin-bottom: 0.9rem;
}
.backend-result-log-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.backend-result-log-panel {
border: 1px solid var(--border-subtle);
background-color: var(--bg-primary);
min-width: 0;
}
.backend-result-log-title {
border-bottom: 1px solid var(--border-subtle);
padding: 0.5rem 0.65rem;
color: var(--text-secondary);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.backend-result-log-panel pre {
max-height: 180px;
margin: 0;
padding: 0.65rem;
overflow: auto;
color: var(--text-primary);
white-space: pre-wrap;
overflow-wrap: anywhere;
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.5;
}
@media (max-width: 760px) {
.backend-result-header {
align-items: flex-start;
flex-direction: column;
}
.backend-result-log-grid {
grid-template-columns: 1fr;
}
}
.results-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.testcase-card {
background-color: transparent;
border: 1px solid var(--border-subtle);
border-radius: 0;
overflow: hidden;
}
.testcase-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
cursor: pointer;
user-select: none;
}
.testcase-header:hover {
background-color: var(--bg-secondary);
}
.testcase-title-area {
display: flex;
align-items: center;
gap: 8px;
}
.testcase-arrow {
font-size: 0.6rem;
transition: transform 0.15s ease;
color: var(--text-secondary);
}
.testcase-card.open .testcase-arrow {
transform: rotate(90deg);
}
.testcase-meta {
display: flex;
align-items: center;
gap: 8px;
}
.testcase-duration {
font-size: 0.7rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.testcase-details {
display: none;
padding: 0.75rem 1rem;
border-top: 1px dashed var(--border-subtle);
background-color: transparent;
font-size: 0.78rem;
color: var(--text-secondary);
}
.testcase-card.open .testcase-details {
display: block;
}
/* Waveform Viewer Mock Layout */
.wave-toolbar {
border-bottom: 1px solid var(--border-subtle);
}
.toolbar-divider {
width: 1px;
height: 16px;
background-color: var(--border-subtle);
margin: 0 8px;
}
.toolbar-label {
color: var(--text-secondary);
margin-right: 4px;
}
.wave-radix-select {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
border-radius: 0;
font-size: 0.75rem;
padding: 1px 4px;
cursor: pointer;
}
.wave-viewer-layout {
display: flex !important;
flex-direction: row !important;
padding: 0 !important;
overflow: hidden !important;
flex: 1;
}
.wave-signals-sidebar {
border-right: 1px solid var(--border-subtle);
background-color: var(--bg-secondary);
display: flex;
flex-direction: column;
height: 100%;
}
.sidebar-header {
padding: 0.35rem 0.75rem;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.sidebar-signals-list {
flex: 1;
overflow-y: hidden;
}
/* Hierarchical tree node styling */
.tree-node {
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
cursor: pointer;
user-select: none;
font-family: var(--font-mono);
font-size: 0.7rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.tree-node:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.tree-node.selected {
background-color: rgba(250, 204, 21, 0.08) !important;
border-left: 2px solid var(--primary-blue);
box-sizing: border-box;
}
#wave-hover-tooltip {
display: none;
position: absolute;
background-color: var(--bg-secondary) !important;
border: 1px solid var(--border-subtle) !important;
border-left: 2px solid var(--primary-blue) !important;
border-radius: 4px;
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--text-primary);
pointer-events: none;
z-index: 1000;
box-shadow: 0 4px 12px var(--shadow-color);
white-space: pre;
}
.tree-node-indent {
display: inline-block;
width: 12px;
height: 100%;
flex-shrink: 0;
}
.tree-node-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 100%;
color: var(--text-secondary);
font-size: 0.6rem;
transition: transform 0.15s ease;
margin-right: 2px;
flex-shrink: 0;
}
.tree-node.collapsed .tree-node-arrow {
transform: rotate(-90deg);
}
.tree-node-icon {
margin-right: 4px;
color: var(--text-secondary);
font-size: 0.65rem;
flex-shrink: 0;
}
.tree-node-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
}
.tree-node-type {
font-size: 0.62rem;
color: var(--text-tertiary);
margin-right: 8px;
font-style: italic;
flex-shrink: 0;
}
.wave-canvas-area-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
background-color: var(--bg-primary);
}
#wave-canvas-viewport {
flex: 1;
overflow: auto;
}
#wave-timeline-canvas {
display: block;
background-color: var(--bg-primary);
}
/* Obsolete styles removed for Phase 4A */
/* Console Dropdown menu styling */
.console-more-dropdown {
position: relative;
display: inline-block;
}
.console-dropdown-menu {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 4px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
z-index: 1000;
min-width: 140px;
padding: 0.25rem 0;
animation: slideInDropdown 0.15s ease forwards;
transform-origin: top right;
}
.console-dropdown-menu.show {
display: block;
}
@keyframes slideInDropdown {
from {
opacity: 0;
transform: scale(0.95) translateY(-5px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.console-dropdown-menu .dropdown-item {
width: 100%;
padding: 0.45rem 0.75rem;
background: none;
border: none;
color: var(--text-secondary);
text-align: left;
font-size: 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
font-family: var(--font-sans);
}
.console-dropdown-menu .dropdown-item:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
}
.console-dropdown-menu .dropdown-divider {
height: 1px;
background-color: var(--border-color);
margin: 0.25rem 0;
}
.console-dropdown-menu .checkbox-item {
cursor: pointer;
user-select: none;
}
.console-dropdown-menu .checkbox-item input {
margin: 0;
cursor: pointer;
}
.btn-console-more-toggle {
background: transparent !important;
border: none !important;
color: var(--text-secondary) !important;
padding: 4px !important;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
box-shadow: none !important;
}
.btn-console-more-toggle:hover {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
}
/* Submission History panel styling */
.submissions-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
}
.subs-list-toolbar {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
background-color: transparent;
padding: 2px 0;
}
.subs-list-search {
flex: 1;
min-width: 100px;
}
.subs-list-search input {
width: 100%;
padding: 0.35rem 0.5rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.75rem;
font-family: inherit;
box-sizing: border-box;
transition: border-color var(--transition-speed);
}
.subs-list-search input:focus {
outline: none;
border-color: var(--primary-blue);
}
.subs-list-sort select {
padding: 0.35rem 0.5rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.75rem;
font-family: inherit;
cursor: pointer;
outline: none;
transition: border-color var(--transition-speed);
}
.subs-list-sort select:focus {
border-color: var(--primary-blue);
}
.subs-list-container {
border: 1px solid var(--border-subtle);
background-color: transparent;
display: flex;
flex-direction: column;
}
.sub-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.65rem 0.85rem;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
background-color: transparent;
transition: background-color var(--transition-speed);
}
.sub-item-row:last-child {
border-bottom: none;
}
.sub-item-row:hover {
background-color: var(--bg-secondary);
}
.sub-item-row.selected {
background-color: rgba(250, 204, 21, 0.03);
}
.sub-status-badge {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
vertical-align: middle;
font-size: 0 !important;
color: transparent !important;
line-height: 0 !important;
overflow: hidden !important;
text-indent: -9999px !important;
}
.sub-status-badge.pass {
background-color: var(--success) !important;
border: none !important;
}
.sub-status-badge.fail {
background-color: var(--error) !important;
border: none !important;
}
.sub-status-badge.error {
background-color: #f59e0b !important;
border: none !important;
}
.sub-item-meta {
font-size: 0.72rem;
color: var(--text-secondary);
display: flex;
gap: 0.75rem;
}
.sub-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.sub-item-time {
font-size: 0.7rem;
color: var(--text-tertiary);
}
.subs-details-container {
border: 1px solid var(--border-subtle);
padding: 1rem;
background-color: transparent;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.details-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem 1rem;
font-size: 0.78rem;
border-bottom: 1px dashed var(--border-subtle);
padding-bottom: 0.75rem;
}
.details-grid-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.details-label {
color: var(--text-tertiary);
}
.details-value {
color: var(--text-primary);
font-weight: 600;
font-family: var(--font-mono);
}
.compile-log-block {
font-size: 0.75rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
padding: 8px 10px;
font-family: var(--font-mono);
white-space: pre-wrap;
word-break: break-all;
max-height: 100px;
overflow-y: auto;
}
/* Editorial panel styling */
.editorial-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
.editorial-header-row {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.editorial-select {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
border: 1px solid var(--border-subtle);
background-color: var(--bg-secondary);
color: var(--text-primary);
border-radius: var(--radius-sm);
outline: none;
cursor: pointer;
}
.editorial-select:hover {
border-color: var(--text-secondary);
}
.editorial-card {
border: 1px solid var(--border-subtle);
background-color: transparent;
display: flex;
flex-direction: column;
}
.editorial-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.65rem 0.85rem;
background-color: var(--bg-secondary);
cursor: pointer;
user-select: none;
border-bottom: 1px solid var(--border-subtle);
}
.editorial-card-header:hover {
background-color: var(--bg-tertiary);
}
.editorial-card.collapsed .editorial-card-header {
border-bottom: none;
}
.editorial-filename {
font-size: 0.8rem;
font-family: var(--font-mono);
font-weight: 700;
color: var(--text-primary);
}
.editorial-collapse-icon {
font-size: 0.7rem;
color: var(--text-secondary);
transition: transform 0.2s ease;
}
.editorial-card.collapsed .editorial-collapse-icon {
transform: rotate(-90deg);
}
.editorial-card-body {
padding: 0.75rem;
overflow: hidden;
background-color: transparent;
max-height: 1000px;
opacity: 1;
transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-card.collapsed .editorial-card-body {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
.editorial-code-viewer {
margin: 0;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-primary);
white-space: pre;
tab-size: 4;
}
/* Scrollbar Customization for Waveform Viewport */
#wave-canvas-viewport::-webkit-scrollbar {
width: 6px;
height: 6px;
}
#wave-canvas-viewport::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
#wave-canvas-viewport::-webkit-scrollbar-thumb {
background: var(--border-subtle);
border-radius: 3px;
}
#wave-canvas-viewport::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Custom focus ring and border styling for specific buttons */
#btn-back-problems,
#btn-collapse-question-pane,
#btn-reset-code,
#btn-wave-zoom-in,
#btn-wave-zoom-out,
#btn-wave-fit,
#btn-wave-reset,
#btn-back-problems:hover,
#btn-collapse-question-pane:hover,
#btn-reset-code:hover,
#btn-wave-zoom-in:hover,
#btn-wave-zoom-out:hover,
#btn-wave-fit:hover,
#btn-wave-reset:hover,
#btn-back-problems:active,
#btn-collapse-question-pane:active,
#btn-reset-code:active,
#btn-wave-zoom-in:active,
#btn-wave-zoom-out:active,
#btn-wave-fit:active,
#btn-wave-reset:active,
#btn-back-problems:focus,
#btn-collapse-question-pane:focus,
#btn-reset-code:focus,
#btn-wave-zoom-in:focus,
#btn-wave-zoom-out:focus,
#btn-wave-fit:focus,
#btn-wave-reset:focus {
border: 1px solid transparent !important;
outline: none !important;
box-shadow: none !important;
}
#btn-back-problems:focus-visible,
#btn-collapse-question-pane:focus-visible,
#btn-reset-code:focus-visible,
#btn-wave-zoom-in:focus-visible,
#btn-wave-zoom-out:focus-visible,
#btn-wave-fit:focus-visible,
#btn-wave-reset:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--primary-blue) !important;
}
/* ==========================================================================
IDE Polish & UX Refinement: Micro Animations & Syntax Highlighting
========================================================================== */
/* 1. Micro Animations (120-180ms transition duration) */
#solve-workspace-root .drawer-tab,
#solve-workspace-root .pane-tab,
#solve-workspace-root .sidebar-btn,
#solve-workspace-root .btn,
#solve-workspace-root .dropdown-item,
#solve-workspace-root .sub-item-row,
#solve-workspace-root select,
#solve-workspace-root input {
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#solve-workspace-root .console-dropdown-menu,
#solve-workspace-root .editorial-collapse-chevron {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 2. Syntax Highlighting matching Monaco theme */
.hdl-snippet-container {
margin: 0.75rem 0;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
overflow: hidden;
background-color: var(--bg-secondary);
}
.hdl-code-pre {
margin: 0;
padding: 0.75rem 1rem;
background-color: var(--bg-secondary) !important;
font-family: var(--font-mono) !important;
font-size: 0.8rem !important;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
}
.hdl-code-pre code {
font-family: var(--font-mono) !important;
}
.editorial-code-viewer {
font-family: var(--font-mono) !important;
font-size: 0.8rem !important;
}
/* Token Styles matching Monaco Dark theme colors */
.hdl-comment {
color: #6a9955 !important;
font-style: italic !important;
}
.hdl-string {
color: #ce9178 !important;
}
.hdl-keyword {
color: #569cd6 !important;
font-weight: bold !important;
}
.hdl-type {
color: #4ec9b0 !important;
}
.hdl-sys-task {
color: #dcdcaa !important;
}
.hdl-number {
color: #b5cea8 !important;
}
/* Dedicated Track Curriculum View Styling (High-density Roadmap) */
.curriculum-view {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 0.75rem 0;
color: var(--text-primary);
}
.curriculum-header-nav {
margin-bottom: -0.75rem;
}
/* Reduced height curriculum overview header */
.curriculum-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 1.25rem;
gap: 2rem;
flex-wrap: wrap;
}
.curriculum-header-left {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.curriculum-meta-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.curriculum-duration-meta {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 500;
}
.curriculum-title {
font-size: 1.4rem;
font-weight: 800;
margin: 0;
line-height: 1.25;
color: var(--text-primary);
letter-spacing: -0.3px;
}
.curriculum-desc {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.4;
margin: 0;
}
/* Integrated compact progress section */
.curriculum-header-right-compact {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 240px;
padding: 0.75rem 1rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.curriculum-progress-info {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.progress-percent-compact {
font-size: 1.25rem;
font-weight: 800;
color: var(--primary-blue);
line-height: 1;
}
.progress-label-compact {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 600;
}
.progress-bar-container-compact {
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
}
.btn-curriculum-action-compact {
width: 100%;
padding: 0.35rem 0.75rem !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
text-transform: uppercase;
}
/* Module Cards: Thin border, reduced vertical padding, smooth transition */
.curriculum-modules-wrapper {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.curriculum-module-card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background-color: var(--bg-primary);
overflow: hidden;
transition: border-color 0.15s ease;
}
.curriculum-module-card:hover {
border-color: rgba(255, 255, 255, 0.15);
}
.curriculum-module-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background-color: var(--bg-secondary);
cursor: pointer;
user-select: none;
border-bottom: 1px solid transparent;
transition: background-color 0.15s ease;
}
.curriculum-module-header:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.curriculum-module-card.collapsed .curriculum-module-header {
border-bottom-color: transparent;
}
.curriculum-module-card:not(.collapsed) .curriculum-module-header {
border-bottom-color: var(--border-subtle);
}
.module-header-left {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.module-title {
font-size: 0.88rem;
font-weight: 700;
margin: 0;
color: var(--text-primary);
}
.module-meta {
font-size: 0.72rem;
color: var(--text-tertiary);
}
.module-header-right {
display: flex;
align-items: center;
gap: 1rem;
}
.module-progress-badge-compact {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-secondary);
background-color: rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border-subtle);
}
.module-toggle-chevron {
color: var(--text-tertiary);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.curriculum-module-card:not(.collapsed) .module-toggle-chevron {
transform: rotate(180deg);
}
.curriculum-module-body {
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.curriculum-problems-list {
display: flex;
flex-direction: column;
}
/* Problem Rows matching Problems page */
.curriculum-problem-row {
display: grid;
grid-template-columns: 32px 24px 1fr 90px 90px 80px 60px;
align-items: center;
padding: 0.6rem 1rem;
border-bottom: 1px solid var(--border-subtle);
background-color: transparent;
transition: background-color 0.1s ease;
gap: 0.75rem;
}
.curriculum-problem-row:last-child {
border-bottom: none;
}
.curriculum-problem-row:not(.locked) {
cursor: pointer;
}
.curriculum-problem-row:not(.locked):hover {
background-color: rgba(255, 255, 255, 0.02);
}
.curriculum-problem-row.locked {
opacity: 0.45;
cursor: not-allowed;
}
.prob-row-left {
display: contents;
}
.prob-number {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-tertiary);
text-align: center;
}
.prob-status-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
}
.prob-status-circle {
width: 8px;
height: 8px;
border: 1.5px solid var(--text-tertiary);
border-radius: 50%;
display: inline-block;
}
.prob-status-check {
color: var(--success);
}
.prob-status-lock {
color: var(--text-tertiary);
}
.prob-title-link {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-primary);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.curriculum-problem-row:not(.locked):hover .prob-title-link {
color: var(--primary-blue);
}
/* Badges alignment */
.curriculum-view .badge {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-secondary) !important;
background-color: rgba(255, 255, 255, 0.03) !important;
font-size: 0.65rem !important;
padding: 1px 6px !important;
border-radius: 3px !important;
text-align: center;
display: inline-block;
}
.curriculum-view .btn-secondary {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-secondary) !important;
background-color: rgba(255, 255, 255, 0.03) !important;
}
.curriculum-view .btn-secondary:hover {
border-color: rgba(255, 255, 255, 0.3) !important;
color: var(--text-primary) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.curriculum-view .badge.easy {
border-color: rgba(34, 197, 94, 0.25) !important;
color: #22c55e !important;
background-color: rgba(34, 197, 94, 0.05) !important;
}
.curriculum-view .badge.medium {
border-color: rgba(234, 179, 8, 0.25) !important;
color: #eab308 !important;
background-color: rgba(234, 179, 8, 0.05) !important;
}
.curriculum-view .badge.hard {
border-color: rgba(239, 68, 68, 0.25) !important;
color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.05) !important;
}
.prob-time-meta {
font-size: 0.75rem;
color: var(--text-tertiary);
text-align: right;
padding-right: 0.5rem;
}
.prob-score-meta {
font-size: 0.75rem;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-secondary);
text-align: right;
}
/* Interview Hub and Briefing Styles (Phase 1) */
.mock-packs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
margin-top: 1.5rem;
}
.mock-pack-card {
background-color: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: border-color 0.15s ease, transform 0.15s ease;
position: relative;
}
.mock-pack-card:hover {
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.mock-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mock-company-logo {
width: 32px;
height: 32px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.72rem;
color: var(--primary-blue);
font-family: var(--font-mono);
}
.mock-company-name {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 700;
letter-spacing: 0.5px;
}
.mock-pack-title {
font-size: 1rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
}
.mock-pack-info-row {
display: flex;
gap: 0.75rem;
align-items: center;
font-size: 0.75rem;
color: var(--text-secondary);
}
.mock-pack-topics {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.25rem;
}
.mock-topic-tag {
font-size: 0.65rem;
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
padding: 1px 6px;
border-radius: 3px;
}
.mock-pack-footer {
display: flex;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.5rem;
}
.mock-status-text {
font-size: 0.72rem;
color: var(--text-tertiary);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.25rem;
}
.mock-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--text-tertiary);
}
.mock-status-dot.completed {
background-color: var(--success);
}
/* Centered Modal Overlay & Backdrop */
.mock-modal-backdrop {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background-color: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
z-index: 10000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
opacity: 0;
pointer-events: none;
transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden !important;
}
.mock-modal-backdrop.open {
opacity: 1 !important;
pointer-events: auto !important;
}
.exit-confirm-modal {
width: 480px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
transform: scale(0.95);
transition: transform 150ms ease;
}
.exit-confirm-backdrop.open .exit-confirm-modal {
transform: scale(1);
}
.mock-modal {
width: 700px;
max-width: 90%;
max-height: calc(100vh - 6.5rem);
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
transform: scale(0.95);
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.mock-modal-backdrop.open .mock-modal {
transform: scale(1);
}
.mock-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-subtle);
}
.mock-modal-title-area {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mock-modal-body {
padding: 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.mock-modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-subtle);
background-color: var(--bg-primary);
}
.btn-close-preview {
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
padding: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.btn-close-preview:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
}
.preview-details-section {
display: flex;
flex-direction: column;
gap: 0.85rem;
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.45;
}
.preview-details-section h4 {
font-size: 0.8rem;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
font-weight: 700;
letter-spacing: 0.5px;
}
.preview-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
padding: 0.75rem;
border-radius: var(--radius-sm);
}
.preview-meta-label {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 600;
}
.preview-meta-val {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-primary);
}
/* Assessment Briefing view */
.briefing-view {
max-width: 720px;
margin: 1rem auto;
display: flex;
flex-direction: column;
gap: 1.25rem;
color: var(--text-primary);
padding: 0.5rem 0;
}
.briefing-header {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.company-tag-large {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 800;
color: var(--primary-blue);
letter-spacing: 1px;
text-transform: uppercase;
}
.briefing-title {
font-size: 1.5rem;
font-weight: 800;
margin: 0;
}
.briefing-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 0.75rem;
}
.detail-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.detail-label {
font-size: 0.68rem;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 700;
}
.detail-value {
font-size: 1.05rem;
font-weight: 800;
color: var(--text-primary);
}
.briefing-instructions, .briefing-warnings-container {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
}
.briefing-instructions h3, .briefing-warnings-container h3 {
margin-top: 0;
margin-bottom: 0.75rem;
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-primary);
letter-spacing: 0.5px;
}
.briefing-instructions p, .briefing-instructions li {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.5;
}
.briefing-instructions ul {
margin-left: 1.25rem;
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.warning-alert-card {
display: flex;
gap: 0.75rem;
align-items: flex-start;
background-color: rgba(239, 68, 68, 0.03);
border: 1px solid rgba(239, 68, 68, 0.12);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.warning-alert-card:last-child {
margin-bottom: 0;
}
.warning-icon {
color: #ef4444;
flex-shrink: 0;
margin-top: 2px;
}
.warning-text {
font-size: 0.8rem;
color: var(--text-secondary);
line-height: 1.4;
}
.briefing-confirmation {
display: flex;
flex-direction: column;
gap: 1rem;
border-top: 1px solid var(--border-subtle);
padding-top: 1rem;
}
.confirm-checkbox-label {
display: flex;
gap: 0.5rem;
align-items: flex-start;
font-size: 0.82rem;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
}
.confirm-checkbox-label input {
margin-top: 3px;
}
.briefing-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
/* Assessment workspace container */
.assessment-workspace {
display: flex;
flex-direction: column;
height: 100%;
background-color: var(--bg-primary);
color: var(--text-primary);
}
/* Header */
.assessment-header-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.assessment-meta {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.assessment-timer-block {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 700;
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
}
/* Timer warning states */
.assessment-timer-block.warning-30 {
border-color: #f59e0b;
color: #f59e0b;
}
.assessment-timer-block.warning-10 {
border-color: #ef4444;
color: #ef4444;
animation: timer-pulse 1.5s infinite;
}
.assessment-timer-block.warning-5 {
border-color: #ef4444;
color: #ef4444;
animation: timer-pulse 0.8s infinite;
}
.assessment-timer-block.warning-1 {
border-color: #ef4444;
color: #ef4444;
animation: timer-pulse 0.4s infinite;
}
@keyframes timer-pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
/* Workspace content split */
.assessment-content-split {
display: flex;
flex: 1;
overflow: hidden;
}
/* Question Navigator Sidebar */
.assessment-navigator-sidebar {
width: 280px;
background-color: var(--bg-secondary);
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.navigator-title-row {
padding: 1rem 1.25rem;
font-size: 0.8rem;
text-transform: uppercase;
color: var(--text-tertiary);
font-weight: 700;
border-bottom: 1px solid var(--border-subtle);
}
.navigator-question-list {
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.navigator-question-item {
padding: 0.85rem 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.01);
cursor: pointer;
display: flex;
flex-direction: column;
gap: 0.35rem;
transition: all 0.15s ease;
}
.navigator-question-item:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.navigator-question-item.active {
border-color: var(--primary-blue);
background-color: rgba(30, 64, 175, 0.1);
}
.navigator-item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navigator-item-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-primary);
}
.navigator-status-badge {
font-size: 0.68rem;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
text-transform: uppercase;
}
.navigator-status-badge.not-started {
background-color: rgba(255, 255, 255, 0.05);
color: var(--text-tertiary);
}
.navigator-status-badge.in-progress {
background-color: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.navigator-status-badge.completed {
background-color: rgba(16, 185, 129, 0.1);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.navigator-status-badge.review {
background-color: rgba(245, 158, 11, 0.1);
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
}
/* Question Details Panel */
.assessment-detail-panel {
flex: 1;
background-color: var(--bg-primary);
display: flex;
flex-direction: column;
overflow: hidden;
}
.assessment-detail-content {
flex: 1;
overflow-y: auto;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
max-width: 900px;
margin: 0 auto;
width: 100%;
}
.detail-question-header {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 1rem;
}
.detail-question-title {
font-size: 1.6rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.detail-meta-row {
display: flex;
gap: 1rem;
align-items: center;
}
.detail-section-title {
font-size: 0.85rem;
text-transform: uppercase;
color: var(--text-primary);
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 0.5rem;
}
.detail-text-block {
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.6;
}
.detail-text-block h3, .detail-text-block h4 {
font-size: 0.95rem;
color: var(--text-primary);
margin-top: 1rem;
margin-bottom: 0.5rem;
font-weight: 700;
}
.detail-text-block ul, .detail-text-block ol {
padding-left: 1.25rem;
margin: 0.5rem 0;
}
.detail-text-block li {
margin-bottom: 0.35rem;
}
.detail-text-block code {
font-family: var(--font-mono);
background-color: rgba(255, 255, 255, 0.04);
padding: 2px 4px;
border-radius: 3px;
font-size: 0.85rem;
}
/* Control actions footer of detail panel */
.detail-control-actions {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
}
/* Assessment Footer */
.assessment-footer-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background-color: var(--bg-secondary);
border-top: 1px solid var(--border-subtle);
font-size: 0.8rem;
color: var(--text-secondary);
}
.footer-stat-group {
display: flex;
gap: 1.5rem;
align-items: center;
}
.footer-stat-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-progress-container {
display: flex;
align-items: center;
gap: 0.75rem;
width: 250px;
}
.footer-progress-bar {
flex: 1;
height: 6px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 3px;
overflow: hidden;
}
.footer-progress-fill {
height: 100%;
background-color: var(--success);
border-radius: 3px;
width: 0%;
transition: width 0.3s ease;
}
/* Exit Confirmation dialog overlays */
.exit-confirm-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease;
}
.exit-confirm-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.exit-confirm-modal {
width: 480px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
transform: scale(0.95);
transition: transform 150ms ease;
}
.exit-confirm-backdrop.open .exit-confirm-modal {
transform: scale(1);
}
.exit-modal-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
}
.exit-modal-desc {
font-size: 0.88rem;
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.exit-modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 0.5rem;
}
/* Assessment Mode Active overrides for the Problems IDE */
#view-problem-solve.assessment-mode-active #assessment-header-bar {
display: flex !important;
}
#view-problem-solve.assessment-mode-active #assessment-navigator-block {
display: flex !important;
}
#view-problem-solve.assessment-mode-active #assessment-left-footer {
display: flex !important;
border-top: 1px solid var(--border-subtle);
background-color: var(--bg-secondary);
}
#view-problem-solve.assessment-mode-active #solve-workspace-root {
height: calc(100vh - 50px) !important;
}
/* Hide tabs, difficulty badges and asked-at text during assessment */
#view-problem-solve.assessment-mode-active .pane-tabs,
#view-problem-solve.assessment-mode-active #solve-difficulty,
#view-problem-solve.assessment-mode-active #solve-type-badge,
#view-problem-solve.assessment-mode-active #solve-company-tags,
#view-problem-solve.assessment-mode-active .company-tags-end-section {
display: none !important;
}
#view-problem-solve.assessment-mode-active #btn-back-problems {
display: none !important;
}
/* Hide normal buttons inside collapsed sidebar during assessment */
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #btn-sidebar-back,
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #sidebar-tab-desc,
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #sidebar-tab-hints,
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #sidebar-tab-submissions,
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #sidebar-tab-editorial {
display: none !important;
}
#view-problem-solve.assessment-mode-active #solve-collapsed-sidebar #assessment-collapsed-nav {
display: flex !important;
}
/* Hide normal navigator block and footer when collapsed */
#view-problem-solve.assessment-mode-active #solve-left-pane.collapsed-mode #assessment-navigator-block,
#view-problem-solve.assessment-mode-active #solve-left-pane.collapsed-mode #assessment-left-footer {
display: none !important;
}
/* Question Navigator Inline Buttons styling */
.navigator-buttons-container {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.nav-q-btn {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
}
.nav-q-btn:hover {
background-color: rgba(255, 255, 255, 0.07);
color: var(--text-primary);
}
.nav-q-btn.active {
border-color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
/* Remove status border and text colors from navigator buttons */
.nav-q-btn.completed,
.nav-q-btn.review {
border-color: var(--border-subtle);
background-color: rgba(255, 255, 255, 0.03);
color: var(--text-secondary);
}
.nav-q-btn.active.completed,
.nav-q-btn.active.review {
border-color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
}
/* Results & Analytics page */
.results-header-area {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 2rem;
}
.results-header-title-block {
display: flex;
align-items: center;
gap: 1.25rem;
}
.results-header-logo {
width: 54px;
height: 54px;
border-radius: var(--radius-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.95rem;
color: var(--text-primary);
font-family: var(--font-mono);
}
.results-status-chip {
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
font-weight: 700;
border-radius: 50px;
text-transform: uppercase;
}
.results-status-chip.completed {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.results-status-chip.submitted-early {
background: rgba(245, 158, 11, 0.1);
color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.results-status-chip.timed-out {
background: rgba(245, 158, 11, 0.1);
color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.results-status-chip.flagged {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.results-grid-layout {
display: grid;
grid-template-columns: 2fr 1.2fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 900px) {
.results-grid-layout {
grid-template-columns: 1fr;
}
}
.results-summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.results-summary-card {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
text-align: left;
}
.results-summary-label {
font-size: 0.75rem;
color: var(--text-tertiary);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.results-summary-value {
font-size: 1.3rem;
font-weight: 800;
color: var(--text-primary);
}
.results-panel-card {
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.75rem;
margin-bottom: 2rem;
}
.results-panel-title {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 1.25rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
padding-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Question Breakdown Cards */
.results-questions-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.results-question-item {
background: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: border-color 0.15s ease;
}
.results-question-item:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.results-question-info {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.results-question-title {
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
}
.results-question-meta {
font-size: 0.8rem;
color: var(--text-tertiary);
display: flex;
gap: 0.75rem;
align-items: center;
}
.results-question-meta span.separator {
color: rgba(255,255,255,0.1);
}
.results-question-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
}
.results-question-status.completed {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
}
.results-question-status.not-completed {
background: rgba(255, 255, 255, 0.03);
color: var(--text-tertiary);
border: 1px solid var(--border-subtle);
}
/* Skills dashboard progress bars */
.skills-dashboard-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.skill-row {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.skill-label-row {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
font-weight: 700;
}
.skill-name {
color: var(--text-secondary);
}
.skill-val {
color: var(--text-primary);
}
.skill-progress-bar-bg {
height: 8px;
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
overflow: hidden;
}
.skill-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-light, #a78bfa) 100%);
border-radius: 4px;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Timeline ticks */
.timeline-list {
position: relative;
padding-left: 1.5rem;
border-left: 2px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 0.5rem;
}
.timeline-node {
position: relative;
}
.timeline-node::before {
content: '';
position: absolute;
left: calc(-1.5rem - 6px);
top: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent-color);
border: 2px solid var(--bg-secondary);
box-shadow: 0 0 8px var(--accent-color);
}
.timeline-node.warning::before {
background: var(--warning);
box-shadow: 0 0 8px var(--warning);
}
.timeline-node.danger::before {
background: #ef4444;
box-shadow: 0 0 8px #ef4444;
}
.timeline-node-title {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-primary);
}
.timeline-node-time {
font-size: 0.72rem;
color: var(--text-tertiary);
margin-top: 0.15rem;
}
/* Integrity indicators */
.integrity-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.integrity-stat-box {
background: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.integrity-stat-num {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-primary);
}
.integrity-stat-num.warning-num {
color: var(--warning);
}
.integrity-stat-num.danger-num {
color: #ef4444;
}
.integrity-stat-lbl {
font-size: 0.72rem;
color: var(--text-tertiary);
font-weight: 700;
text-transform: uppercase;
}
/* Recommendation cards */
.recommend-tracks-list,
.recommend-problems-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.recommend-card {
background: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none !important;
transition: all 0.15s ease;
}
.recommend-card:hover {
border-color: var(--primary-blue) !important;
background: rgba(255, 255, 255, 0.01) !important;
}
.recommend-card:active {
border-color: var(--primary-blue) !important;
background: rgba(255, 255, 255, 0.02) !important;
}
.recommend-card:focus,
.recommend-card:focus-visible {
outline: 2px solid var(--primary-blue) !important;
outline-offset: 2px !important;
border-color: var(--primary-blue) !important;
box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.2) !important;
background: rgba(255, 255, 255, 0.01) !important;
}
.recommend-card-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.recommend-card-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--text-primary);
}
.recommend-card-desc {
font-size: 0.75rem;
color: var(--text-tertiary);
}
.recommend-arrow {
color: var(--text-tertiary);
transition: color 0.15s ease;
}
.recommend-card:hover .recommend-arrow,
.recommend-card:active .recommend-arrow,
.recommend-card:focus .recommend-arrow,
.recommend-card:focus-visible .recommend-arrow {
color: var(--primary-blue) !important;
}
.results-footer-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
border-top: 1px solid var(--border-subtle);
margin-top: 2.5rem;
}
.results-footer-group {
display: flex;
gap: 0.75rem;
}
.results-row-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
align-items: stretch;
}
.results-row-uneven {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 2rem;
margin-bottom: 2rem;
align-items: stretch;
}
@media (max-width: 900px) {
.results-row-2col,
.results-row-uneven {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ==========================================================================
INTERVIEW EXPERIENCES PAGE REDESIGN (PHASE 1 - UI ONLY)
========================================================================== */
.experiences-layout-wrapper {
display: grid;
grid-template-columns: 240px 1fr 280px;
gap: 2rem;
width: 100%;
margin-top: 1.5rem;
box-sizing: border-box;
}
/* Left Sidebar */
.experiences-left-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.experiences-sidebar-menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 0.5rem;
}
.experiences-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.88rem;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--text-secondary);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: all 0.15s ease;
width: 100%;
}
.experiences-menu-item:hover {
background-color: rgba(255, 255, 255, 0.03);
color: var(--text-primary);
}
.experiences-menu-item.active {
background-color: var(--gold-bg);
color: var(--primary-blue);
}
.experiences-menu-item .svg-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.experiences-sidebar-section {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.experiences-sidebar-title {
font-size: 0.7rem;
font-weight: 800;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0;
}
.experiences-sidebar-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.experiences-list-item {
display: flex;
align-items: center;
padding: 0.45rem 0.5rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color 0.15s ease;
}
.experiences-list-item:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.experiences-list-item .experiences-name {
font-size: 0.82rem;
font-weight: 500;
color: var(--text-secondary);
flex-grow: 1;
}
.experiences-list-item:hover .experiences-name {
color: var(--text-primary);
}
.experiences-list-item .experiences-count {
font-size: 0.75rem;
color: var(--text-tertiary);
background-color: rgba(255, 255, 255, 0.02);
padding: 0.1rem 0.4rem;
border-radius: 9999px;
border: 1px solid var(--border-subtle);
}
.experiences-logo-mini {
width: 28px;
height: 18px;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 800;
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.6rem;
flex-shrink: 0;
}
.experiences-sidebar-link {
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-blue);
text-decoration: none;
align-self: flex-start;
margin-top: 0.25rem;
}
.experiences-sidebar-link:hover {
text-decoration: underline;
}
.experiences-hash {
color: var(--text-tertiary);
font-weight: 700;
margin-right: 0.75rem;
font-size: 0.85rem;
}
.experiences-list-item.topic .experiences-name {
font-size: 0.8rem;
}
.experiences-ask-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
background-color: rgba(255, 255, 255, 0.03);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-lg);
color: var(--text-secondary);
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
width: 100%;
}
.experiences-ask-btn:hover {
background-color: rgba(255, 255, 255, 0.06);
color: var(--text-primary);
border-color: var(--border-color);
}
.experiences-ask-btn .svg-icon {
width: 16px;
height: 16px;
}
/* Center Feed */
.experiences-center-content {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.experiences-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.5rem;
}
.experiences-main-title {
font-size: 1.6rem;
font-weight: 800;
color: var(--text-primary);
margin: 0 0 0.4rem 0;
}
.experiences-main-desc {
font-size: 0.88rem;
color: var(--text-tertiary);
margin: 0;
}
.experiences-share-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
background-color: var(--primary-blue);
color: #000000;
border: none;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: opacity 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.experiences-share-btn:hover {
opacity: 0.9;
}
.experiences-share-btn .svg-icon {
width: 14px;
height: 14px;
stroke: #000000;
}
.experiences-filter-tabs {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.75rem;
margin-bottom: 0.5rem;
}
.experiences-tab-items {
display: flex;
gap: 1rem;
}
.experiences-tab {
background: transparent;
border: none;
color: var(--text-tertiary);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0;
position: relative;
transition: color 0.15s ease;
}
.experiences-tab:hover {
color: var(--text-primary);
}
.experiences-tab.active {
color: var(--primary-blue);
}
.experiences-tab.active::after {
content: '';
position: absolute;
bottom: -0.85rem;
left: 0;
width: 100%;
height: 2px;
background-color: var(--primary-blue);
}
.experiences-filters-toggle-btn {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.experiences-filters-toggle-btn:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
border-color: var(--border-color);
}
.experiences-filters-toggle-btn .svg-icon {
width: 14px;
height: 14px;
}
.experiences-feed-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Reddit-Inspired Experience Card */
.experiences-feed-card {
display: flex;
flex-shrink: 0 !important;
height: auto !important;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background-color: var(--bg-primary);
overflow: hidden;
transition: border-color 0.15s ease;
}
.experiences-feed-card:hover {
border-color: rgba(255, 255, 255, 0.15);
}
.experiences-vote-col {
width: 44px;
background-color: rgba(255, 255, 255, 0.01);
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 0;
border-right: 1px solid rgba(255, 255, 255, 0.02);
}
.experiences-vote-btn {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.15s ease;
}
.experiences-vote-btn:hover {
background-color: rgba(255, 255, 255, 0.04);
color: var(--primary-blue);
}
.experiences-vote-btn svg {
width: 18px;
height: 18px;
}
.experiences-vote-count {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
margin: 0.25rem 0;
}
.experiences-card-body {
flex: 1;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.experiences-card-meta-row {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
}
.experiences-author-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.experiences-author-info {
display: flex;
flex-direction: column;
}
.experiences-author-name-row {
display: flex;
align-items: center;
gap: 0.25rem;
}
.experiences-author-handle {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-primary);
}
.experiences-verified-check {
font-size: 0.65rem;
color: var(--primary-blue);
background-color: rgba(250, 204, 21, 0.1);
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
}
.experiences-author-sub {
font-size: 0.68rem;
color: var(--text-tertiary);
}
.experiences-card-company-tag {
display: flex;
align-items: center;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 0.2rem 0.4rem;
margin-left: 0.5rem;
}
.experiences-card-company-tag .experiences-logo-mini {
margin-right: 0.35rem;
width: 24px;
height: 15px;
font-size: 0.5rem;
}
.experiences-company-name {
font-size: 0.75rem;
font-weight: 700;
color: var(--text-secondary);
}
.experiences-difficulty-badge {
font-size: 0.62rem;
font-weight: 800;
padding: 0.15rem 0.4rem;
border-radius: 3px;
}
.experiences-time-ago {
font-size: 0.72rem;
color: var(--text-tertiary);
margin-left: auto;
}
.experiences-more-btn {
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.15s ease;
}
.experiences-more-btn:hover {
background-color: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
}
.experiences-more-btn svg {
width: 16px;
height: 16px;
}
.experiences-card-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
margin: 0.2rem 0;
line-height: 1.35;
}
.experiences-card-summary {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.45;
margin: 0;
}
.experiences-card-questions-title {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.05em;
margin-top: 0.25rem;
}
.experiences-card-questions {
background-color: var(--bg-secondary);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--text-primary);
max-height: 110px;
overflow-y: auto;
white-space: pre-wrap;
margin: 0;
}
.experiences-card-tags-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.25rem;
}
.experiences-card-tag {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-tertiary);
background-color: rgba(255, 255, 255, 0.02);
padding: 0.2rem 0.5rem;
border-radius: 4px;
border: 1px solid var(--border-subtle);
}
.experiences-card-footer {
display: flex;
gap: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.02);
padding-top: 0.75rem;
margin-top: 0.25rem;
}
.experiences-footer-action-btn {
display: flex;
align-items: center;
gap: 0.4rem;
background: transparent;
border: none;
color: var(--text-tertiary);
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0.4rem;
border-radius: 4px;
transition: all 0.15s ease;
}
.experiences-footer-action-btn:hover {
background-color: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
}
.experiences-footer-action-btn svg {
width: 14px;
height: 14px;
}
/* Right Sidebar Panels */
.experiences-right-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.experiences-right-panel {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.experiences-panel-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 800;
color: var(--text-primary);
margin: 0;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.5rem;
}
.experiences-panel-title .svg-icon {
width: 16px;
height: 16px;
color: var(--primary-blue);
}
.experiences-panel-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.experiences-panel-item {
display: flex;
align-items: center;
padding: 0.35rem 0.25rem;
border-radius: var(--radius-md);
cursor: pointer;
}
.experiences-panel-item:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.experiences-panel-rank {
font-size: 0.8rem;
font-weight: 800;
color: var(--text-tertiary);
width: 16px;
margin-right: 0.5rem;
}
.experiences-panel-name {
font-size: 0.82rem;
font-weight: 600;
color: var(--text-secondary);
flex-grow: 1;
}
.experiences-panel-item:hover .experiences-panel-name {
color: var(--text-primary);
}
.experiences-panel-count {
font-size: 0.78rem;
color: var(--text-tertiary);
}
.experiences-panel-link {
font-size: 0.75rem;
font-weight: 700;
color: var(--primary-blue);
text-decoration: none;
align-self: flex-start;
}
.experiences-panel-link:hover {
text-decoration: underline;
}
.experiences-hot-topics-grid {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.experiences-topic-pill {
font-size: 0.72rem;
font-weight: 600;
color: var(--text-secondary);
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 0.3rem 0.6rem;
cursor: pointer;
transition: all 0.15s ease;
}
.experiences-topic-pill:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
border-color: var(--border-color);
}
.experiences-contributors-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.experiences-contributor-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.25rem 0;
cursor: pointer;
}
.experiences-contributor-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.experiences-contributor-info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.experiences-contributor-name {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
}
.experiences-contributor-sub {
font-size: 0.68rem;
color: var(--text-tertiary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.experiences-contributor-badge {
display: flex;
align-items: center;
gap: 0.25rem;
}
.experiences-contributor-badge .svg-icon {
width: 14px;
height: 14px;
}
.experiences-contributor-badge .svg-icon.trophy-gold {
color: #fbbf24;
}
.experiences-contributor-badge .svg-icon.trophy-silver {
color: #9ca3af;
}
.experiences-contributor-badge .svg-icon.trophy-bronze {
color: #b45309;
}
.experiences-contributor-points {
font-size: 0.78rem;
font-weight: 700;
color: var(--text-secondary);
}
/* Responsive Breakpoints */
@media (max-width: 1100px) {
.experiences-layout-wrapper {
grid-template-columns: 200px 1fr;
}
.experiences-right-sidebar {
display: none;
}
}
@media (max-width: 768px) {
.experiences-layout-wrapper {
grid-template-columns: 1fr;
}
.experiences-left-sidebar {
display: none;
}
.experiences-header-row {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.experiences-share-btn {
align-self: flex-start;
}
.experiences-tab-items {
overflow-x: auto;
padding-bottom: 0.25rem;
width: 100%;
-webkit-overflow-scrolling: touch;
}
.experiences-tab {
white-space: nowrap;
}
}
.experiences-logo-mini {
width: 28px;
height: 18px;
border-radius: 3px;
font-size: 0.6rem;
font-weight: 800;
font-family: var(--font-mono);
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 0.6rem;
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.03);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.experiences-list-item:hover .experiences-logo-mini,
.experiences-card-company-tag:hover .experiences-logo-mini,
.experiences-panel-item:hover .experiences-logo-mini {
border-color: var(--primary-blue);
color: var(--primary-blue);
}
.experiences-author-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 0.65rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: rgba(250, 204, 21, 0.05);
color: var(--primary-blue);
border: 1px solid rgba(250, 204, 21, 0.15);
}
.experiences-contributor-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 0.75rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background-color: rgba(255, 255, 255, 0.03);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
}
.experiences-difficulty-badge {
font-size: 0.62rem;
font-weight: 800;
padding: 0.15rem 0.4rem;
border-radius: 3px;
}
.experiences-difficulty-badge.easy {
background-color: rgba(255, 255, 255, 0.02);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.experiences-difficulty-badge.medium {
background-color: rgba(250, 204, 21, 0.05);
color: var(--primary-blue);
border: 1px solid rgba(250, 204, 21, 0.15);
}
.experiences-difficulty-badge.hard {
background-color: var(--primary-blue);
color: #000000;
border: 1px solid var(--primary-blue);
}
.experiences-contributor-badge .svg-icon.trophy-gold {
color: var(--primary-blue);
}
.experiences-contributor-badge .svg-icon.trophy-silver {
color: var(--text-primary);
}
.experiences-contributor-badge .svg-icon.trophy-bronze {
color: var(--text-secondary);
}
/* ==========================================================================
INTERVIEW EXPERIENCES PHASE 2 (INTERACTIONS & SCALING)
========================================================================== */
.experiences-search-wrapper {
position: relative;
width: 100%;
margin-bottom: 0;
}
.experiences-search-input {
width: 100%;
padding: 0.65rem 1rem 0.65rem 2.5rem;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: inherit;
font-size: 0.82rem;
transition: all 0.15s ease;
box-sizing: border-box;
}
.experiences-search-input:focus {
outline: none;
border-color: var(--primary-blue);
box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.1);
}
.experiences-search-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
width: 15px;
height: 15px;
color: var(--text-tertiary);
pointer-events: none;
}
.experiences-filter-dropdown-container {
position: relative;
}
.experiences-filters-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
width: 320px;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
display: none;
flex-direction: column;
gap: 1rem;
z-index: 100;
box-sizing: border-box;
}
.experiences-filters-dropdown.open {
display: flex;
}
.experiences-dropdown-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.experiences-dropdown-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.experiences-dropdown-field label {
font-size: 0.7rem;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
}
.experiences-dropdown-field select {
padding: 0.4rem 0.5rem;
background-color: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 0.78rem;
outline: none;
cursor: pointer;
}
.experiences-dropdown-field select:focus {
border-color: var(--primary-blue);
}
.experiences-dropdown-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
border-top: 1px solid var(--border-subtle);
padding-top: 0.75rem;
margin-top: 0.25rem;
}
.experiences-vote-btn.up.voted-up {
color: var(--primary-blue);
background-color: rgba(250, 204, 21, 0.08);
}
.experiences-vote-btn.down.voted-down {
color: #ef4444;
background-color: rgba(239, 68, 68, 0.08);
}
.experiences-vote-count.voted-up {
color: var(--primary-blue);
}
.experiences-vote-count.voted-down {
color: #ef4444;
}
.experiences-footer-action-btn.bookmarked-active {
color: var(--primary-blue);
}
/* Layout overrides for Phase 2 sizing & independent scroll */
body.experiences-layout-active {
overflow: hidden !important;
height: 100vh !important;
}
body.experiences-layout-active .app-container {
height: 100vh !important;
max-height: 100vh !important;
overflow: hidden !important;
}
#view-experiences.active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 0% !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
padding: 0.5rem 0 !important;
box-sizing: border-box !important;
}
.experiences-layout-wrapper {
display: grid !important;
grid-template-columns: 200px 1fr 240px !important;
grid-template-rows: minmax(0, 1fr) !important;
gap: 1.25rem !important;
flex: 1 1 0% !important;
min-height: 0 !important;
overflow: hidden !important;
margin-top: 0.5rem !important;
box-sizing: border-box !important;
}
.experiences-left-sidebar {
min-height: 0 !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: transparent transparent !important;
}
.experiences-right-sidebar {
min-height: 0 !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: transparent transparent !important;
}
.experiences-right-sidebar > * {
flex-shrink: 0 !important;
}
.problems-sidebar-column > * {
flex-shrink: 0 !important;
}
.experiences-center-content {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
overflow: hidden !important;
gap: 1rem !important;
}
.experiences-center-sticky-header {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
flex-shrink: 0 !important;
position: relative !important;
z-index: 10 !important;
}
.experiences-filter-dropdown-container {
position: relative !important;
}
.experiences-filters-dropdown {
position: absolute !important;
z-index: 50 !important;
}
#main-experiences-grid {
flex: 1 1 0% !important;
min-height: 0 !important;
overflow-y: auto !important;
scrollbar-width: thin !important;
scrollbar-color: transparent transparent !important;
}
.experiences-right-sidebar .experiences-share-btn {
width: 100% !important;
justify-content: center !important;
box-sizing: border-box !important;
height: 38px !important;
margin-bottom: 0 !important;
flex-shrink: 0 !important;
}
/* Hover-only modern overlay scrollbars consistent with dark theme */
.experiences-left-sidebar::-webkit-scrollbar,
.experiences-right-sidebar::-webkit-scrollbar,
#main-experiences-grid::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.experiences-left-sidebar::-webkit-scrollbar-track,
.experiences-right-sidebar::-webkit-scrollbar-track,
#main-experiences-grid::-webkit-scrollbar-track {
background: transparent !important;
}
.experiences-left-sidebar::-webkit-scrollbar-thumb,
.experiences-right-sidebar::-webkit-scrollbar-thumb,
#main-experiences-grid::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 3px !important;
transition: background 0.15s ease !important;
}
.experiences-left-sidebar:hover::-webkit-scrollbar-thumb,
.experiences-right-sidebar:hover::-webkit-scrollbar-thumb,
#main-experiences-grid:hover::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.2) !important; /* subtle gold overlay thumb */
}
.experiences-left-sidebar::-webkit-scrollbar-thumb:hover,
.experiences-right-sidebar::-webkit-scrollbar-thumb:hover,
#main-experiences-grid::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.45) !important; /* brighter gold thumb on active hover */
}
/* Firefox: show scrollbar-color on hover */
.experiences-left-sidebar:hover,
.experiences-right-sidebar:hover,
#main-experiences-grid:hover {
scrollbar-color: rgba(250, 204, 21, 0.2) transparent !important;
}
/* Redefined sizes to fit perfectly on 100% laptop screen */
.experiences-menu-item {
padding: 0.5rem 0.75rem !important;
font-size: 0.8rem !important;
}
.experiences-list-item .experiences-name {
font-size: 0.78rem !important;
}
.experiences-list-item .experiences-count {
font-size: 0.7rem !important;
padding: 0.08rem 0.35rem !important;
}
.experiences-sidebar-title {
font-size: 0.65rem !important;
}
.experiences-card-title {
font-size: 1rem !important;
}
.experiences-card-summary {
font-size: 0.82rem !important;
}
.experiences-card-questions {
font-size: 0.7rem !important;
max-height: 90px !important;
}
.experiences-panel-title {
font-size: 0.8rem !important;
}
.experiences-panel-name {
font-size: 0.78rem !important;
}
.experiences-contributor-name {
font-size: 0.78rem !important;
}
.experiences-contributor-sub {
font-size: 0.65rem !important;
}
/* Active states for lists and topics */
.experiences-list-item.active {
background-color: rgba(250, 204, 21, 0.05);
}
.experiences-list-item.active .experiences-name {
color: var(--primary-blue) !important;
font-weight: 700 !important;
}
.experiences-panel-item.active {
background-color: rgba(250, 204, 21, 0.05);
}
.experiences-panel-item.active .experiences-panel-name {
color: var(--primary-blue) !important;
font-weight: 700 !important;
}
.experiences-topic-pill.active {
background-color: rgba(250, 204, 21, 0.08) !important;
color: var(--primary-blue) !important;
border-color: var(--primary-blue) !important;
}
/* Animations */
.fade-in {
animation: expFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes expFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Experiences Phase 3 Styles */
.clickable-tag {
transition: all 0.15s ease;
}
.clickable-tag.active-tag {
background-color: var(--gold-bg) !important;
border-color: var(--primary-blue) !important;
color: var(--primary-blue) !important;
text-shadow: 0 0 4px var(--gold-glow);
}
.comment-item {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
}
.comment-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.comment-author {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-blue);
cursor: pointer;
}
.comment-author:hover {
text-decoration: underline;
}
.comment-time {
font-size: 0.65rem;
color: var(--text-tertiary);
}
.comment-text {
font-size: 0.8rem;
color: var(--text-primary);
line-height: 1.4;
}
/* Anchored Callout Drawer Panels for Following & Bookmarks */
#view-experiences {
position: relative !important;
}
.exp-drawer-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 200;
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, visibility 200ms ease;
backdrop-filter: blur(1.5px);
border-radius: var(--radius-lg);
}
.exp-drawer-backdrop.open {
display: block;
opacity: 1;
visibility: visible;
}
.exp-drawer {
position: absolute;
width: 320px;
height: 480px;
max-height: 70vh !important;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
display: none;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
box-sizing: border-box;
opacity: 0;
transform: translateX(-10px);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
z-index: 210;
}
.exp-drawer-backdrop.open .exp-drawer {
display: flex;
opacity: 1;
transform: translateX(0);
}
.exp-drawer::before {
content: "";
display: var(--arrow-display, block);
position: absolute;
top: var(--arrow-top, 30px);
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--border-subtle);
transform: translateY(-50%);
z-index: 211;
pointer-events: none;
}
.exp-drawer::after {
content: "";
display: var(--arrow-display, block);
position: absolute;
top: var(--arrow-top, 30px);
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid var(--bg-secondary);
transform: translateY(-50%);
z-index: 212;
pointer-events: none;
}
.exp-preview-panel {
position: absolute;
width: 480px;
height: 480px;
max-height: 70vh !important;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
display: none;
flex-direction: column;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
box-sizing: border-box;
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease, visibility 200ms ease;
z-index: 215;
}
.exp-preview-panel.open {
display: flex;
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.exp-preview-panel::before {
content: "";
display: var(--arrow-display, block);
position: absolute;
top: var(--arrow-top, 30px);
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid var(--border-subtle);
transform: translateY(-50%);
z-index: 216;
pointer-events: none;
}
.exp-preview-panel::after {
content: "";
display: var(--arrow-display, block);
position: absolute;
top: var(--arrow-top, 30px);
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid var(--bg-secondary);
transform: translateY(-50%);
z-index: 217;
pointer-events: none;
}
.exp-preview-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.exp-preview-body {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
box-sizing: border-box;
}
/* Hover-only scrollbar thumb on preview body */
.exp-preview-body::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.exp-preview-body::-webkit-scrollbar-track {
background: transparent !important;
}
.exp-preview-body::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 3px !important;
transition: background 0.15s ease !important;
}
.exp-preview-body:hover::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.2) !important;
}
.exp-preview-body::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.4) !important;
}
.exp-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.exp-drawer-title {
font-family: 'Space Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
margin: 0;
text-transform: uppercase;
}
.exp-drawer-close-btn {
background: transparent;
border: none;
color: var(--text-tertiary);
font-size: 1.5rem;
cursor: pointer;
transition: color 0.15s ease;
padding: 0.25rem;
line-height: 1;
}
.exp-drawer-close-btn:hover {
color: #ffffff;
}
.exp-drawer-body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
box-sizing: border-box;
}
/* Hover-only scrollbar thumb on panel body */
.exp-drawer-body::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.exp-drawer-body::-webkit-scrollbar-track {
background: transparent !important;
}
.exp-drawer-body::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 3px !important;
transition: background 0.15s ease !important;
}
.exp-drawer-body:hover::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.2) !important;
}
.exp-drawer-body::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.4) !important;
}
/* Following List Items */
.exp-following-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
}
.exp-following-item:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--primary-blue);
transform: translateX(2px);
}
.exp-following-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
flex-shrink: 0;
}
.exp-following-details {
display: flex;
flex-direction: column;
min-width: 0;
}
.exp-following-username {
font-size: 0.8rem;
font-weight: 700;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exp-following-sub {
font-size: 0.7rem;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exp-following-rank {
font-size: 0.65rem;
color: var(--primary-yellow);
font-weight: 600;
}
/* Bookmark List Items */
.exp-bookmark-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.15s ease;
}
.exp-bookmark-item:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--primary-blue);
transform: translateX(2px);
}
.exp-bookmark-item.active-bookmark {
border-color: var(--primary-blue) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.exp-bookmark-item .experiences-logo-mini {
flex-shrink: 0;
width: 40px;
height: 22px;
font-size: 0.6rem;
}
.exp-bookmark-details {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.exp-bookmark-title {
font-size: 0.78rem;
font-weight: 700;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exp-bookmark-meta {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.68rem;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.exp-bookmark-dot {
color: var(--text-tertiary);
}
.exp-bookmark-company {
font-weight: 600;
}
/* Scroll locking of background columns when panel is open */
body.exp-panel-open .experiences-left-sidebar,
body.exp-panel-open .experiences-right-sidebar,
body.exp-panel-open #main-experiences-grid {
overflow-y: hidden !important;
}
/* Highlight flash animation for target experience cards */
.card-highlight-flash {
animation: expFlashAnimation 1.5s ease-out;
}
@keyframes expFlashAnimation {
0% {
box-shadow: 0 0 0 2px var(--primary-blue);
background-color: rgba(30, 58, 138, 0.2);
}
50% {
box-shadow: 0 0 0 4px var(--primary-blue);
background-color: rgba(30, 58, 138, 0.4);
}
100% {
box-shadow: none;
background-color: transparent;
}
}
/* Dedicated Experience Preview Card Component (Narrow Layout) */
.exp-preview-card {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
box-sizing: border-box;
}
.exp-preview-meta-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.75rem;
}
.exp-preview-meta-row {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.exp-preview-meta-row.author-row {
border: none;
}
.exp-preview-meta-row.company-row {
justify-content: flex-start;
align-items: center;
}
.exp-preview-card-title {
font-family: 'Space Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.4;
}
.exp-preview-card-summary {
font-size: 0.85rem;
color: var(--text-primary);
line-height: 1.5;
margin: 0;
}
.exp-preview-questions-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
box-sizing: border-box;
}
.exp-preview-card-questions {
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
margin: 0;
width: 100%;
box-sizing: border-box;
}
.exp-preview-tags-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.exp-preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border-subtle);
padding-top: 0.75rem;
margin-top: 0.5rem;
}
.exp-preview-footer .experiences-footer-action-btn {
flex: 1;
justify-content: center;
font-size: 0.75rem;
padding: 0.5rem;
gap: 0.35rem;
background: transparent;
border: none;
color: var(--text-secondary);
cursor: pointer;
display: flex;
align-items: center;
transition: all 0.15s ease;
border-radius: var(--radius-sm);
}
.exp-preview-footer .experiences-footer-action-btn:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.03);
}
.exp-preview-footer .experiences-footer-action-btn.bookmarked-active {
color: var(--primary-yellow);
}
.exp-preview-card.experiences-feed-card {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
gap: 1rem !important;
display: flex !important;
flex-direction: column !important;
}
.exp-following-item.active-following {
border-color: var(--primary-blue) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
/* Dedicated Side Profile Inspector CSS Classes */
.profile-insp-card {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-sizing: border-box;
}
.profile-insp-header {
display: flex;
align-items: center;
gap: 1rem;
}
.profile-insp-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
font-family: var(--font-pixel);
flex-shrink: 0;
border: 2px solid var(--border-subtle);
}
.profile-insp-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.profile-insp-name {
font-size: 1.15rem;
font-weight: 800;
color: var(--text-primary);
font-family: var(--font-pixel);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-insp-handle {
font-size: 0.8rem;
color: var(--text-secondary);
font-family: monospace;
}
.profile-insp-college {
font-size: 0.78rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-insp-rank {
font-size: 0.78rem;
font-weight: 600;
color: var(--primary-blue);
margin-top: 0.1rem;
}
.profile-insp-divider {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 0;
}
.profile-insp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
text-align: center;
}
.profile-insp-stat-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.profile-insp-stat-label {
font-size: 0.62rem;
text-transform: uppercase;
color: var(--text-muted);
letter-spacing: 0.5px;
}
.profile-insp-stat-value {
font-size: 1.05rem;
font-weight: 800;
color: var(--text-primary);
font-family: monospace;
}
.profile-insp-section-title {
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.profile-insp-skills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.profile-insp-skill-tag {
font-size: 0.7rem;
background-color: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
}
.profile-insp-badges {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.profile-insp-badge-tag {
font-size: 0.65rem;
color: var(--primary-blue);
border: 1px solid rgba(250, 204, 21, 0.3);
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
text-transform: uppercase;
font-family: var(--font-pixel);
letter-spacing: 0.5px;
}
.profile-insp-experiences {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.profile-insp-exp-item {
font-size: 0.8rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.profile-insp-exp-bullet {
color: var(--primary-blue);
font-size: 1rem;
line-height: 1;
}
.profile-insp-actions {
display: flex;
gap: 0.75rem;
margin-top: 0.5rem;
}
.profile-insp-btn {
flex: 1;
padding: 0.6rem;
font-size: 0.8rem;
font-weight: 700;
text-align: center;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-pixel);
text-transform: uppercase;
border: 1px solid transparent;
}
.profile-insp-btn-follow.btn-primary {
background-color: var(--primary-blue);
color: #0b0c10;
border-color: var(--primary-blue);
}
.profile-insp-btn-follow.btn-secondary {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}
.profile-insp-btn-view {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}
.profile-insp-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
/* Developer Profile Dashboard Redesign */
.profile-dashboard-wrapper {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
margin-top: 1rem;
}
/* 1. Hero Banner Card */
.profile-hero-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.profile-hero-info {
display: flex;
align-items: center;
gap: 1.75rem;
}
.profile-hero-avatar-wrapper {
position: relative;
}
.profile-hero-avatar {
width: 90px;
height: 90px;
border-radius: 50%;
background-color: var(--bg-tertiary);
border: 2px solid var(--border-subtle);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-family: var(--font-pixel);
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.profile-hero-meta {
display: flex;
flex-direction: column;
gap: 0.35rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}
.profile-hero-name {
font-size: 1.75rem;
font-weight: 800;
color: var(--text-primary);
}
.profile-hero-handle {
font-size: 0.95rem;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.profile-hero-tracks {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.track-tag {
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
}
.track-tag.yellow {
background-color: var(--bg-tertiary);
border-color: var(--border-subtle);
color: var(--text-secondary);
}
.profile-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.btn-profile-action {
padding: 0.65rem 1.25rem;
background-color: var(--primary-blue);
color: #0b0c10;
border: 1px solid var(--primary-blue);
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-profile-action:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.btn-profile-action.secondary {
background-color: transparent;
color: var(--text-primary);
border-color: var(--border-color);
}
.btn-profile-action.secondary:hover {
background-color: var(--bg-tertiary);
border-color: var(--text-primary);
}
/* 2. Responsive Statistics Row */
.profile-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.profile-stat-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
transition: border-color 0.2s ease;
}
.profile-stat-card:hover {
border-color: var(--text-secondary);
}
.stat-label {
font-size: 0.72rem;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stat-val {
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.35rem;
}
.stat-val.yellow {
color: var(--primary-blue);
}
.stat-desc {
font-size: 0.72rem;
color: var(--text-secondary);
}
/* 3. Two-Column Dashboard Layout */
.profile-main-layout {
display: grid;
grid-template-columns: 360px 1fr;
gap: 1.5rem;
}
.profile-side-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
height: 100%;
}
.profile-content-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
height: 100%;
}
.profile-side-column > .profile-dashboard-card:last-child,
.profile-content-column > .profile-dashboard-card:last-child {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.profile-dashboard-card {
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
}
.card-title {
font-size: 1.1rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 1.25rem;
}
/* Overall Progress - Circular Progress */
.overall-progress-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.circular-progress-svg {
width: 140px;
height: 140px;
position: relative;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 100%;
max-height: 100%;
}
.circle-bg {
fill: none;
stroke: var(--bg-tertiary);
stroke-width: 2.8;
}
.circle {
fill: none;
stroke-width: 2.8;
stroke-linecap: round;
transition: stroke-dasharray 0.3s ease;
}
.circular-chart.yellow .circle {
stroke: var(--primary-blue);
}
.percentage {
fill: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.55rem;
font-weight: bold;
text-anchor: middle;
}
.progress-details-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
border-top: 1px solid var(--border-subtle);
padding-top: 1.25rem;
}
.progress-detail-item {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
}
.detail-label {
color: var(--text-secondary);
}
.detail-val {
font-weight: 700;
color: var(--text-primary);
}
/* Skill Strengths Progress Bars */
.skills-distribution-container {
display: flex;
flex-direction: column;
gap: 1rem;
}
.skill-bar-row {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.skill-bar-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
font-weight: 700;
}
.skill-bar-name {
color: var(--text-primary);
}
.skill-bar-percent {
color: var(--primary-blue);
}
.skill-bar-track {
width: 100%;
height: 6px;
background-color: var(--bg-tertiary);
border-radius: var(--radius-sm);
overflow: hidden;
}
.skill-bar-fill {
height: 100%;
background-color: var(--primary-blue);
border-radius: var(--radius-sm);
transition: width 0.3s ease;
}
/* Collectible Badges Grid */
.badges-showcase-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 0.5rem;
}
.badge-card {
position: relative;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}
.badge-card:hover {
transform: translateY(-2px);
border-color: var(--primary-blue);
}
.badge-icon-mini {
display: flex;
align-items: center;
justify-content: center;
height: 36px;
}
.badge-svg {
fill: none;
stroke-width: 1.8;
stroke: var(--text-primary);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
transition: transform 0.2s ease;
}
.badge-card:hover .badge-svg {
transform: scale(1.1);
}
.badge-svg.gold {
stroke: #ffd700;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.45));
}
.badge-svg.yellow {
stroke: #facc15;
filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.45));
}
.badge-svg.orange {
stroke: #f97316;
filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.45));
}
.badge-svg.red {
stroke: #ef4444;
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.45));
}
.badge-svg.purple {
stroke: #c084fc;
filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.45));
}
.badge-svg.blue {
stroke: #60a5fa;
filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.45));
}
.badge-svg.green {
stroke: #4ade80;
filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.45));
}
.badge-svg.indigo {
stroke: #818cf8;
filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.45));
}
.badge-title-mini {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
/* Custom CSS Tooltip */
.badge-card[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%) translateY(5px);
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
padding: 0.4rem 0.65rem;
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: 500;
white-space: normal;
width: 150px;
text-align: center;
z-index: 200;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
pointer-events: none;
opacity: 0;
transition: all 0.15s ease;
}
.badge-card[data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Activity Heatmap Card styling */
.heatmap-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1.5rem;
}
.card-subtitle {
font-size: 0.8rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5rem;
}
.heatmap-meta-summary {
display: flex;
gap: 1rem;
font-size: 0.78rem;
color: var(--text-secondary);
}
.heatmap-meta-summary strong {
color: var(--text-primary);
}
/* Activity Timeline */
.activity-timeline {
display: flex;
flex-direction: column;
position: relative;
padding-left: 1.5rem;
}
.activity-timeline::before {
content: '';
position: absolute;
left: 4px;
top: 6px;
bottom: 6px;
width: 1px;
background-color: var(--border-subtle);
}
.activity-timeline-item {
position: relative;
padding-bottom: 1.25rem;
}
.activity-timeline-item:last-child {
padding-bottom: 0;
}
.activity-timeline-dot {
position: absolute;
left: -23px;
top: 4px;
width: 9px;
height: 9px;
border-radius: 50%;
background-color: var(--primary-blue);
border: 2px solid var(--bg-secondary);
z-index: 2;
}
.activity-timeline-meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.72rem;
color: var(--text-tertiary);
margin-bottom: 0.25rem;
}
.activity-timeline-category {
font-weight: 700;
text-transform: uppercase;
}
.activity-timeline-desc {
font-size: 0.82rem;
color: var(--text-primary);
font-weight: 600;
}
/* Fixed Height Scrollable Activity and Submission History Panels */
.activity-feed-card {
display: flex;
flex-direction: column;
height: 380px;
box-sizing: border-box;
}
.activity-feed-card .activity-timeline {
flex: 1;
overflow-y: auto;
padding-right: 0.5rem;
}
.submissions-history-card {
padding: 1.5rem 0 0 0;
display: flex;
flex-direction: column;
height: 380px;
box-sizing: border-box;
overflow: hidden;
}
.submissions-history-card .table-container {
margin-top: 1rem;
flex: 1;
overflow-y: auto;
position: relative;
}
.submissions-history-card .table-container th {
position: sticky;
top: 0;
background-color: var(--bg-secondary);
z-index: 10;
}
/* Hover-only subtle yellow scrollbars */
.activity-feed-card .activity-timeline::-webkit-scrollbar,
.submissions-history-card .table-container::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.activity-feed-card .activity-timeline::-webkit-scrollbar-track,
.submissions-history-card .table-container::-webkit-scrollbar-track {
background: transparent !important;
}
.activity-feed-card .activity-timeline::-webkit-scrollbar-thumb,
.submissions-history-card .table-container::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 3px !important;
transition: background 0.15s ease !important;
}
.activity-feed-card:hover .activity-timeline::-webkit-scrollbar-thumb,
.submissions-history-card:hover .table-container::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.2) !important;
}
.activity-feed-card .activity-timeline::-webkit-scrollbar-thumb:hover,
.submissions-history-card .table-container::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.45) !important;
}
/* Firefox scrollbars */
.activity-feed-card .activity-timeline,
.submissions-history-card .table-container {
scrollbar-width: thin !important;
scrollbar-color: transparent transparent !important;
}
.activity-feed-card:hover .activity-timeline,
.submissions-history-card:hover .table-container {
scrollbar-color: rgba(250, 204, 21, 0.2) transparent !important;
}
.submissions-header-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.5rem;
gap: 1.5rem;
flex-wrap: wrap;
}
.submission-search-input {
width: 250px;
padding: 0.45rem 0.75rem;
background-color: var(--bg-tertiary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-primary);
outline: none;
font-size: 0.8rem;
transition: border-color 0.2s ease;
}
.submission-search-input:focus {
border-color: var(--primary-blue);
}
/* Premium Empty State */
.profile-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
text-align: center;
gap: 1rem;
}
.profile-empty-icon {
font-size: 3rem;
filter: grayscale(1);
}
.profile-empty-text {
font-size: 0.85rem;
color: var(--text-secondary);
max-width: 320px;
}
/* Responsive Overrides */
@media (max-width: 1024px) {
.profile-main-layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.profile-hero-card {
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
}
.profile-hero-actions {
justify-content: flex-start;
width: 100%;
}
.btn-profile-action {
flex: 1;
text-align: center;
}
.submissions-header-controls {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
.submission-search-input {
width: 100%;
}
}
/* Daily XP Sparkline Graph Layout & Style */
.heatmap-dashboard-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-top: 1rem;
width: 100%;
}
.heatmap-grid-wrapper {
flex: 1.2;
overflow: hidden;
}
.heatmap-xp-graph-wrapper {
flex: 1;
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
min-width: 280px;
}
.xp-graph-header {
display: flex;
justify-content: space-between;
align-items: baseline;
line-height: 1.5rem;
margin: 0;
}
.xp-graph-title {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
color: var(--text-secondary);
letter-spacing: 0.5px;
}
.xp-graph-value {
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-blue);
font-family: var(--font-mono);
}
.xp-sparkline-container {
height: 102px;
width: 100%;
position: relative;
margin-top: 2rem;
padding: 0.5rem 0;
}
.xp-sparkline-path {
filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.25));
}
.xp-sparkline-dot {
fill: var(--bg-secondary);
stroke: var(--primary-blue);
stroke-width: 1.8px;
cursor: pointer;
transition: r 0.15s ease, fill 0.15s ease;
}
.xp-sparkline-dot:hover {
r: 5.5px;
fill: var(--primary-blue);
}
@media (max-width: 768px) {
.heatmap-dashboard-row {
flex-direction: column;
align-items: stretch;
gap: 1.25rem;
}
.heatmap-xp-graph-wrapper {
width: 100%;
}
}
/* -------------------------------------
STRUCTURAL BLUEPRINT GRID SYSTEM (NIKE STYLE)
-------------------------------------- */
/* Definition Section */
.definition-section {
border-bottom: 1px solid var(--border-subtle);
width: 100%;
box-sizing: border-box;
}
.definition-grid {
display: grid;
grid-template-columns: 200px 1.4fr 1.1fr;
width: 100%;
}
.def-col {
padding: 4rem 2.5rem;
box-sizing: border-box;
}
.def-label-col {
border-right: 1px solid var(--border-subtle);
}
.def-content-col {
border-right: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.def-meta-label {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0.05em;
}
.def-meta-sub {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--primary-yellow);
letter-spacing: 0.1em;
display: block;
margin-bottom: 1.5rem;
}
.def-headline {
font-size: clamp(1.4rem, 2.8vw, 2.2rem) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
color: var(--text-primary);
text-transform: uppercase;
margin: 0 0 2.5rem 0;
font-family: 'Inter', sans-serif;
}
.def-headline-row {
display: block;
padding: 0.5rem 0;
}
.def-headline-row.border-row {
border-bottom: 1px solid var(--border-subtle);
}
.def-columns-wrapper {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 3rem;
margin-top: 1.5rem;
}
.def-paragraph-col p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 1.25rem 0;
}
.def-stats-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
padding-left: 1rem;
border-left: 1px solid var(--border-subtle);
}
.def-stat-item {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 0.75rem;
}
.def-stat-item:last-child {
border-bottom: none;
}
.def-stat-num {
display: block;
font-size: 1.8rem;
font-weight: 800;
color: var(--primary-blue);
font-family: var(--font-mono);
}
.def-stat-lbl {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
font-family: var(--font-mono);
}
/* Terminal Mockup */
.code-terminal-mockup {
background: #090808;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.78rem;
overflow: hidden;
text-align: left;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
width: 100%;
}
.terminal-header {
background: #121010;
border-bottom: 1px solid var(--border-subtle);
padding: 0.6rem 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.terminal-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.terminal-dot.red { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green { background: #27c93f; }
.terminal-title {
margin-left: 0.5rem;
font-size: 0.72rem;
color: var(--text-secondary);
}
.terminal-content {
padding: 1.25rem;
margin: 0;
overflow-x: auto;
line-height: 1.5;
color: var(--text-primary);
}
.terminal-content .keyword { color: #facc15; font-weight: 700; }
.terminal-content .comment { color: #57534e; }
.terminal-content .string { color: #38bdf8; }
/* Ecosystem Tour Line Header */
.tour-section {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--border-subtle);
position: relative;
z-index: 3; /* Kept on top of the narrative section */
}
.tour-section-header-line {
border-bottom: 1px solid var(--border-subtle);
padding: 2rem 2rem;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.tour-meta-label {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Bento Cards Border Merging & Sharpness Overrides */
.stack-deck-container {
gap: 0;
max-width: 100%;
}
.stack-card {
border-radius: 0; /* Sharp corners! */
margin-right: -1px;
margin-bottom: -1px;
background: rgba(14, 12, 12, 0.35);
border: 1px solid var(--border-subtle);
padding: 1.25rem 1.5rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* Card remains static on hover */
/* -------------------------------------
ABOUT DVFORGE SECTION (BLUEPRINT GRID)
------------------------------------- */
.about-section {
border-bottom: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
}
.about-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
width: 100%;
}
.about-left-col {
padding: 0;
overflow: hidden;
box-sizing: border-box;
}
.about-mascot-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
image-rendering: pixelated;
}
.about-right-col {
border-left: 1px solid var(--border-subtle);
padding: 4.5rem 3rem;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.about-meta-label {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-tertiary);
letter-spacing: 0.15em;
margin-bottom: 1.25rem;
text-transform: uppercase;
}
.about-headline {
font-family: var(--font-pixel);
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
line-height: 1.1;
color: #ffffff;
margin: 0 0 2rem 0;
text-transform: uppercase;
}
.about-headline-row {
display: block;
padding-bottom: 0.5rem;
}
.about-headline-row.border-row {
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 0.5rem;
}
.about-paragraph {
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 2.5rem 0;
}
.about-highlights {
display: flex;
flex-direction: column;
gap: 1rem;
}
.highlight-item {
display: flex;
align-items: center;
gap: 0.75rem;
}
.highlight-icon {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: bold;
color: var(--primary-yellow);
}
.highlight-text {
font-family: var(--font-mono);
font-size: 0.9rem;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* Mobile Responsiveness for Structural Grid */
@media (max-width: 992px) {
header.landing-header {
grid-template-columns: 1fr;
}
header.landing-header .header-pill:first-child {
border-right: none;
border-bottom: 1px solid var(--border-subtle);
}
.hero-grid {
grid-template-columns: 1fr;
}
.hero-right-col {
border-left: none;
border-top: 1px solid var(--border-subtle);
padding: 3rem 1.5rem;
}
.hero-left-col {
padding: 3rem 1.5rem;
}
.about-grid {
grid-template-columns: 1fr;
}
.about-left-col {
border-bottom: 1px solid var(--border-subtle);
padding: 3rem 1.5rem;
}
.about-right-col {
border-left: none;
padding: 3rem 1.5rem;
}
}
/* Override container-level padding for the landing view to prevent top/side spacers */
#view-landing.view-section {
padding-top: 0;
padding-left: 0;
padding-right: 0;
max-width: 100% !important;
width: 100%;
box-sizing: border-box;
/* Premium fade-in animation for initial loading */
animation: fadeInApp 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fadeInApp {
from {
opacity: 0;
transform: scale(0.995) translateY(5px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* -------------------------------------
FULL-BLEED IMAGE BANNER CTA SECTION
------------------------------------- */
.full-bleed-banner {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
box-sizing: border-box;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
z-index: 1; /* Sits under the narrative section shadow overlay */
}
.banner-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.15); /* Translucent premium shadow contrast overlay */
box-sizing: border-box;
}
.banner-overlay .btn-primary {
font-size: 1rem;
padding: 0.8rem 2.5rem;
border-radius: 9999px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: var(--font-mono);
box-shadow: 0 4px 20px rgba(250, 204, 21, 0.25);
transition: transform 0.2s, box-shadow 0.2s;
}
.banner-overlay .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(250, 204, 21, 0.4);
}
@media (max-width: 768px) {
.full-bleed-banner {
height: 280px;
}
}
/* ==========================================================================
BLUEPRINT DESIGN OVERHAUL (SHARP-LINE & CONNECTED GRIDS)
========================================================================== */
/* --- LAYER 1: GLOBAL SHARP-LINE OVERHAULS --- */
/* 1A. Kill All Rounded Corners globally */
.sidebar-card, .track-card, .mock-pack-card, .feature-card,
.profile-hero-card, .profile-stat-card, .profile-dashboard-card,
.experiences-feed-card, .experiences-right-panel,
.experiences-sidebar-section, .experiences-sidebar-menu,
.champion-card, .modal-content, .mock-modal, .exit-confirm-modal,
.search-input, .select-filter, .btn, .btn-primary, .btn-secondary, .btn-profile-action,
.waveform-window.expanded, .terminal-mockup, .replit-card-graphic,
.dropdown-menu, .console-dropdown-menu, .progress-bar-container,
.progress-bar, .skill-bar-track, .skill-bar-fill, .progress-fill,
.track-tag, .badge, .exp-slideout-drawer, .exp-preview-panel,
.experiences-count, button, select, input, textarea {
border-radius: 0 !important;
}
/* 1B. Disable All Box Shadows */
.sidebar-card, .champion-card, .crt-monitor, .tour-preview,
.streak-card:hover, .replit-card:hover, .modal-content,
.mock-modal, .dropdown-menu, .console-dropdown-menu,
.waveform-window.expanded, .btn-profile-action:hover,
.profile-insp-btn:hover, .cal-day-full:hover,
.exit-confirm-modal,
header.app-header.authenticated-header {
box-shadow: none !important;
}
/* 1C. Convert Solid Backgrounds to Glassmorphism */
.sidebar-card, .profile-stat-card,
.profile-dashboard-card, .experiences-right-panel,
.experiences-sidebar-section, .track-card, .feature-card,
.mock-pack-card, .champion-card {
background: rgba(14, 12, 12, 0.35) !important;
backdrop-filter: blur(48px) saturate(180%) !important;
-webkit-backdrop-filter: blur(48px) saturate(180%) !important;
}
/* 1C-b. Profile Hero Card Background Image */
.profile-hero-card {
position: relative;
overflow: hidden;
background-image: linear-gradient(rgba(14, 12, 12, 0.4), rgba(14, 12, 12, 0.4)), url('liminal/profile_hero_bg.png') !important;
background-size: cover !important;
background-position: center !important;
backdrop-filter: blur(48px) saturate(180%) !important;
-webkit-backdrop-filter: blur(48px) saturate(180%) !important;
}
/* 1D. Authenticated Header Styling (Flat border-bottom, no shadow) */
header.app-header.authenticated-header {
border-bottom: 1px solid var(--border-subtle) !important;
box-shadow: none !important;
}
/* 1E. Hover States: Border Brighten Only (No transforms, no shadows) */
.feature-card:hover, .track-card:hover, .sidebar-card:hover,
.profile-stat-card:hover, .mock-pack-card:hover,
.experiences-feed-card:hover, .champion-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: rgba(255, 255, 255, 0.2) !important;
position: relative;
z-index: 10;
}
/* --- LAYER 2: CONNECTED-GRID BORDER MERGING --- */
/* 2A. Learning Tracks Grid Merging */
.tracks-grid {
gap: 0 !important;
}
.tracks-grid .track-card {
margin-right: -1px;
margin-bottom: -1px;
}
/* 2B. Profile Stats Row Merging (Symmetrical 3x2 grid) */
.profile-stats-grid {
gap: 0 !important;
grid-template-columns: repeat(3, 1fr) !important;
}
.profile-stats-grid .profile-stat-card {
margin-right: -1px;
margin-bottom: -1px;
}
@media (max-width: 1024px) {
.profile-stats-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
.profile-stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.profile-stats-grid {
grid-template-columns: 1fr !important;
}
}
/* 2C. Profile Dashboard column cards and action buttons */
.profile-main-layout {
gap: 0 !important;
}
.profile-side-column, .profile-content-column {
gap: 0 !important;
}
.profile-side-column .profile-dashboard-card,
.profile-content-column .profile-dashboard-card {
margin-bottom: -1px;
}
/* 2D. Jobs Board Grid Merging */
.features-grid {
gap: 0 !important;
}
.features-grid .feature-card {
margin-right: -1px;
margin-bottom: -1px;
}
/* 2E. Problems Bank Sidebar Card Stack */
.problems-sidebar-column {
gap: 0 !important;
}
.problems-sidebar-column .sidebar-card {
margin-bottom: -1px;
}
/* 2F. Filter/Control Bars (adjacent inputs/selects/buttons merge) */
.controls-bar {
gap: 0 !important;
}
.controls-bar > .search-input,
.controls-bar > .select-filter,
.controls-bar > .btn {
margin-left: -1px;
}
.controls-bar > *:first-child {
margin-left: 0;
}
/* 2G. Experiences 3-Column Layout & Filter Tabs */
.experiences-layout-wrapper {
gap: 0 !important;
}
.experiences-left-sidebar {
border-right: 1px solid var(--border-subtle);
padding-right: 1.5rem !important;
}
.experiences-center-content {
padding: 0 1.5rem !important;
}
.experiences-right-sidebar {
border-left: 1px solid var(--border-subtle);
padding-left: 1.5rem !important;
}
.experiences-sidebar-section,
.experiences-sidebar-menu {
margin-bottom: -1px;
}
.experiences-right-panel {
margin-bottom: -1px;
}
/* Share vertical borders for experiences filter tabs */
.experiences-tab-items {
display: flex;
gap: 0 !important;
}
.experiences-tab {
border: 1px solid var(--border-subtle) !important;
padding: 0.4rem 1.2rem !important;
margin-left: -1px;
}
.experiences-tab:first-child {
margin-left: 0;
}
.experiences-tab.active::after {
display: none !important;
}
.experiences-tab.active {
background-color: var(--primary-blue) !important;
color: #0b0c10 !important;
border-color: var(--primary-blue) !important;
}
/* 2H. Contest Banner and Leaderboard Tabs */
.contest-banner {
border: 1px solid var(--border-subtle);
padding: 2rem;
margin-bottom: 2rem;
}
/* Leaderboard tabs gap override */
.btn-lead-tab {
margin-left: 0.5rem !important;
}
.btn-lead-tab:first-child {
margin-left: 0 !important;
}
/* 2I. Modals as Glassmorphic Sharp Floating Panels */
.modal-content, .mock-modal, .exit-confirm-modal {
border: 1px solid var(--border-subtle) !important;
background: rgba(14, 12, 12, 0.85) !important;
backdrop-filter: blur(48px) saturate(180%) !important;
-webkit-backdrop-filter: blur(48px) saturate(180%) !important;
}
/* 2J. Dropdowns, Drawers & Tooltips to Glassmorphism */
.dropdown-menu,
.console-dropdown-menu,
#wave-hover-tooltip {
background: rgba(14, 12, 12, 0.85) !important;
backdrop-filter: blur(48px) saturate(180%) !important;
-webkit-backdrop-filter: blur(48px) saturate(180%) !important;
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border-subtle) !important;
}
.exp-drawer,
.exp-preview-panel {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
.exp-drawer-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(14, 12, 12, 0.85) !important;
backdrop-filter: blur(48px) saturate(180%) !important;
-webkit-backdrop-filter: blur(48px) saturate(180%) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 1;
pointer-events: none;
}
.exp-drawer-header,
.exp-drawer-body,
.exp-preview-header,
.exp-preview-body {
position: relative;
z-index: 2;
}
.exp-drawer-backdrop {
border-radius: 0 !important;
}
/* 2K. Mock Interviews Packs Grid & Buttons Merging */
.mock-packs {
gap: 0 !important;
}
.mock-packs .mock-pack-card {
margin-right: -1px;
margin-bottom: -1px;
}
.mock-pack-footer {
gap: 0 !important;
}
.mock-pack-footer > .btn,
.mock-pack-footer > button {
margin-left: -1px;
flex: 1 !important;
}
.mock-pack-footer > *:first-child {
margin-left: 0;
}
/* --- ABSOLUTE BLUEPRINT BORDER RADIUS OVERRIDE --- */
:root, [data-theme="dark"] {
--radius-sm: 0px !important;
--radius-md: 0px !important;
--radius-lg: 0px !important;
}
*, *::before, *::after {
border-radius: 0 !important;
}
/* Re-establish circular exceptions */
.profile-avatar,
.profile-hero-avatar,
.crt-dot,
.heatmap-cell,
.circular-chart,
.circular-progress-svg,
circle {
border-radius: 50% !important;
}
/* Ensure hovered/focused merged borders in control groups sit on top of collapsed neighbors */
.controls-bar > *:hover,
.controls-bar > *:focus,
.controls-bar > *:focus-within,
.experiences-tab:hover,
.experiences-tab.active,
.btn-lead-tab:hover,
.btn-lead-tab.btn-primary,
.profile-hero-actions > *:hover {
position: relative;
z-index: 10;
}
/* 2L. Editor Controls Bar Border Merging */
.toolbar-left,
.toolbar-right {
gap: 0 !important;
}
.toolbar-left > .toolbar-select-wrapper,
.toolbar-right > .btn,
.toolbar-right > .editor-more-dropdown {
margin-left: -1px;
}
.toolbar-left > *:first-child,
.toolbar-right > *:first-child {
margin-left: 0;
}
/* Ensure active/hovered editor toolbar elements stack on top */
.toolbar-left > *:hover,
.toolbar-left > *:focus-within,
.toolbar-right > *:hover,
.toolbar-right > *:focus-within {
position: relative;
z-index: 10;
}
/* --- Home Page Validated Stats Bar --- */
.hero-stats-bar {
display: flex;
border-top: 1px solid var(--border-subtle);
margin-left: -3rem;
margin-right: -3rem;
margin-bottom: -4.5rem;
font-family: var(--font-mono);
}
.hero-stats-bar > div {
padding: 1.5rem 3rem 3rem 3rem;
}
.hero-stats-bar-left {
flex: 1.5;
}
.hero-stats-bar-right {
flex: 1;
border-left: 1px solid var(--border-subtle);
}
@media (max-width: 992px) {
.hero-stats-bar {
margin-left: -1.5rem;
margin-right: -1.5rem;
margin-bottom: -3rem;
}
.hero-stats-bar > div {
padding: 1.5rem 1.5rem 2.5rem 1.5rem;
}
}
/* Global Loader Overlay */
.global-loader-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--bg-primary);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.global-loader-overlay.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.global-loader-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.loading-mascot {
animation: alien-float 3s ease-in-out infinite !important;
}
.global-loader-text {
font-family: var(--font-mono);
color: var(--primary-blue);
font-size: 1rem;
letter-spacing: 0.2rem;
animation: pulse-text 1.5s infinite ease-in-out;
}
@keyframes pulse-text {
0%, 100% {
opacity: 0.4;
}
50% {
opacity: 1;
}
}
/* Skeleton Loaders */
.skeleton-loading-overlay {
width: 100%;
}
.skeleton-shimmer {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 25%,
rgba(255, 255, 255, 0.08) 50%,
rgba(255, 255, 255, 0.03) 75%
);
background-size: 200% 100%;
animation: shimmer-load 1.5s infinite linear;
}
@keyframes shimmer-load {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton-box {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-subtle);
height: 20px;
width: 100%;
position: relative;
overflow: hidden;
}
.skeleton-circle {
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
}
.skeleton-card {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
height: 200px;
width: 100%;
box-sizing: border-box;
}
/* User Auth Header Styling */
.auth-header-section {
display: flex;
align-items: center;
margin-left: 1.5rem;
}
.user-avatar-small {
width: 28px;
height: 28px;
background-color: var(--primary-blue);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-pixel);
font-size: 0.75rem;
font-weight: 700;
border-radius: 0;
border: 1px solid var(--border-subtle);
}
.user-dropdown-trigger {
user-select: none;
padding: 0.25rem 0.5rem;
transition: background-color 0.2s;
}
.user-dropdown-trigger:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.user-dropdown-menu .dropdown-item {
transition: all 0.2s ease;
}
.user-dropdown-menu .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.08);
color: #ffffff !important;
}
.btn-sign-in {
background-color: transparent !important;
color: var(--primary-blue) !important;
border: 1px solid var(--primary-blue) !important;
transition: all 0.2s ease;
}
.btn-sign-in:hover {
background-color: var(--primary-blue) !important;
color: #000000 !important;
}
/* Comment Validation Notice */
.comment-validation-error {
color: var(--primary-red);
font-family: var(--font-pixel);
font-size: 0.65rem;
margin-top: 0.25rem;
display: block;
text-transform: uppercase;
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
/* Card and Comment dropdown menus positioning */
.experiences-more-dropdown-wrapper,
.comment-more-dropdown-wrapper {
position: relative;
display: inline-block;
}
.card-dropdown-menu,
.comment-dropdown-menu {
display: none;
position: absolute;
background-color: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
z-index: 1000;
padding: 0.25rem 0;
top: auto;
bottom: 100%; /* Show above the button */
right: 0;
margin-bottom: 4px;
min-width: 155px;
}
.card-dropdown-menu.show,
.comment-dropdown-menu.show {
display: block;
}
/* Reusable layout for sidebar/drawer rows with automatic badge fitting and name truncation */
.exp-row-layout {
display: flex !important;
align-items: center !important;
width: 100% !important;
box-sizing: border-box !important;
gap: 0.5rem !important; /* equal spacing */
}
/* Icon: never shrinks and margins removed to let the gap control the layout */
.exp-row-icon {
flex-shrink: 0 !important;
margin: 0 !important;
}
/* Item name: takes the remaining width and truncates with ellipsis */
.exp-row-name {
flex: 1 1 0% !important;
min-width: 0 !important; /* crucial for text truncation to work inside flex parent */
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
margin-right: auto !important; /* pushes badge to the right */
}
/* Count badge: never shrinks, adjusts width dynamically with padding, right-aligned */
.exp-row-badge {
flex-shrink: 0 !important;
white-space: nowrap !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.08rem 0.45rem !important; /* horizontal padding instead of fixed width */
box-sizing: border-box !important;
}
/* Mascot float up and down animation */
.league-icon {
animation: mascotFloat 2.2s ease-in-out infinite !important;
}
@keyframes mascotFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* Competitive League & Redesigned Leaderboard/Profile Styles */
.leaderboard-summary-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
@media (max-width: 1024px) {
.leaderboard-summary-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.leaderboard-summary-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.leaderboard-summary-card {
background: rgba(14, 12, 12, 0.8);
border: 1px solid var(--border-subtle);
padding: 1rem;
border-radius: 4px;
text-align: center;
font-family: var(--font-pixel), monospace;
position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.leaderboard-summary-card .card-label {
font-size: 0.6rem;
color: var(--text-secondary);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.leaderboard-summary-card .card-value {
font-size: 1.1rem;
color: var(--primary-yellow);
font-weight: bold;
}
/* League specific badge styles */
.league-badge {
font-family: var(--font-pixel), monospace;
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
border-radius: 2px;
text-transform: uppercase;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.league-badge.bronze { background: rgba(186, 110, 54, 0.2); border-color: #ba6e36; color: #ffaa66; }
.league-badge.silver { background: rgba(192, 192, 192, 0.15); border-color: #c0c0c0; color: #e0e0e0; }
.league-badge.gold { background: rgba(255, 215, 0, 0.15); border-color: #ffd700; color: #ffe680; }
.league-badge.platinum { background: rgba(0, 210, 255, 0.15); border-color: #00d2ff; color: #80ecff; }
.league-badge.diamond { background: rgba(189, 0, 255, 0.15); border-color: #bd00ff; color: #f0b3ff; }
.league-badge.master { background: rgba(255, 50, 120, 0.15); border-color: #ff3278; color: #ff9cbd; }
.league-badge.grandmaster { background: rgba(255, 100, 0, 0.15); border-color: #ff6400; color: #ffb880; }
.league-badge.legend { background: rgba(255, 204, 0, 0.25); border-color: var(--primary-yellow); color: #fff; box-shadow: 0 0 8px rgba(255, 204, 0, 0.5); animation: legend-glow 2s infinite alternate; }
@keyframes legend-glow {
0% { box-shadow: 0 0 4px rgba(255, 204, 0, 0.3); }
100% { box-shadow: 0 0 12px rgba(255, 204, 0, 0.7); }
}
/* Table Row Highlights */
.row-promotion-zone {
background: rgba(0, 255, 102, 0.03) !important;
}
.row-demotion-zone {
background: rgba(255, 51, 51, 0.03) !important;
}
.row-active-user {
background: rgba(255, 204, 0, 0.04) !important;
position: relative !important;
z-index: 2 !important;
}
.row-active-user td {
border-top: 1px solid rgba(255, 204, 0, 0.25) !important;
border-bottom: 1px solid rgba(255, 204, 0, 0.25) !important;
position: relative !important;
z-index: 2 !important;
}
.row-active-user td:first-child {
border-left: 1px solid rgba(255, 204, 0, 0.25) !important;
}
.row-active-user td:last-child {
border-right: 1px solid rgba(255, 204, 0, 0.25) !important;
}
/* Motivational Partition Rows */
.leaderboard-motivation-row td {
padding: 0 !important;
}
.leaderboard-motivation-row .motivation-content {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem 1.5rem;
border-radius: 6px;
margin: 0.5rem 0;
}
.leaderboard-motivation-row.higher-league .motivation-content {
background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(250, 204, 21, 0.03));
border: 1px solid rgba(250, 204, 21, 0.25);
}
.leaderboard-motivation-row.lower-league .motivation-content {
background: linear-gradient(135deg, rgba(0, 255, 102, 0.08), rgba(0, 255, 102, 0.03));
border: 1px solid rgba(0, 255, 102, 0.25);
}
.motivation-icon {
font-size: 1.8rem;
line-height: 1;
flex-shrink: 0;
}
.motivation-text {
font-family: var(--font-sans), sans-serif;
font-size: 0.85rem;
line-height: 1.5;
color: var(--text-secondary);
}
.leaderboard-motivation-row.higher-league .motivation-text strong {
color: var(--primary-yellow);
}
.leaderboard-motivation-row.lower-league .motivation-text strong {
color: #00ff66;
}
.motivation-text span {
color: var(--text-primary);
font-weight: 600;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 2px;
vertical-align: middle;
font-size: 0 !important;
color: transparent !important;
overflow: hidden !important;
}
.status-indicator.promo {
background-color: #00ff66;
box-shadow: 0 0 6px rgba(0, 255, 102, 0.4);
}
.status-indicator.demo {
background-color: #ff3333;
box-shadow: 0 0 6px rgba(255, 51, 51, 0.4);
}
.status-indicator.safe {
background-color: #777777;
}
/* Collectible Achievement Cards */
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.achievement-card {
border-radius: 8px;
padding: 1rem 0.5rem;
text-align: center;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
min-height: 124px;
}
.achievement-card:hover {
transform: translateY(-3px);
z-index: 10;
}
.achievement-card .ach-icon {
margin-top: 0.25rem;
display: block;
}
.achievement-card .ach-text-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
width: 100%;
}
.achievement-card .ach-title {
font-family: var(--font-pixel), monospace;
font-size: 0.65rem;
color: #ffffff;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.2;
}
.achievement-card .ach-rarity {
font-family: var(--font-pixel), monospace;
font-size: 0.48rem;
text-transform: uppercase;
padding: 0.1rem 0.35rem;
border-radius: 3px;
display: inline-block;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Card Backgrounds & Borders based on rarity */
.achievement-card.common {
background: #113615;
border: 2px solid #2e7d32;
box-shadow: 0 4px 10px rgba(46, 125, 50, 0.25);
}
.achievement-card.common .ach-rarity {
background: #2e7d32;
color: #ffffff;
}
.achievement-card.rare {
background: #0b2545;
border: 2px solid #00d2ff;
box-shadow: 0 4px 12px rgba(0, 210, 255, 0.25);
}
.achievement-card.rare .ach-rarity {
background: #00d2ff;
color: #000000;
}
.achievement-card.epic {
background: #2c003e;
border: 2px solid #bd00ff;
box-shadow: 0 4px 15px rgba(189, 0, 255, 0.3);
}
.achievement-card.epic .ach-rarity {
background: #bd00ff;
color: #ffffff;
}
.achievement-card.legendary {
background: #4a0e00;
border: 2px solid #ffcc00;
box-shadow: 0 4px 18px rgba(255, 204, 0, 0.35);
animation: legendary-glow 2.5s infinite alternate;
}
.achievement-card.legendary .ach-rarity {
background: #ffcc00;
color: #000000;
}
.achievement-card .ach-date {
font-family: var(--font-sans), sans-serif;
font-size: 0.52rem;
color: rgba(255, 255, 255, 0.7);
display: block;
margin-top: 0.1rem;
}
@keyframes legendary-glow {
0% { box-shadow: 0 4px 10px rgba(255, 204, 0, 0.2); border-color: #ff9900; }
100% { box-shadow: 0 6px 20px rgba(255, 204, 0, 0.55); border-color: #ffd700; }
}
/* Weekly Promotion Progress UI */
.promotion-progress-container {
margin-top: 1rem;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border-subtle);
padding: 1rem;
border-radius: 4px;
font-family: var(--font-pixel), monospace;
font-size: 0.7rem;
}
.promotion-progress-bar {
width: 100%;
height: 12px;
background: rgba(0,0,0,0.5);
border: 1px solid var(--border-subtle);
border-radius: 2px;
margin-top: 0.5rem;
overflow: hidden;
position: relative;
}
.promotion-progress-fill {
height: 100%;
background: linear-gradient(to right, #00ff66, #00d2ff);
transition: width 0.4s ease-out;
}
/* Achievement Locked State styling */
.achievement-card.locked {
background: rgba(25, 22, 22, 0.45) !important;
border: 2px dashed rgba(255, 255, 255, 0.15) !important;
box-shadow: none !important;
animation: none !important;
opacity: 0.35 !important;
filter: grayscale(100%) !important;
}
.achievement-card.locked:hover {
opacity: 0.55 !important;
filter: grayscale(40%) !important;
}
.achievement-card.locked .ach-rarity {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--text-muted) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.achievement-card.locked .ach-title {
color: var(--text-muted) !important;
}
/* Locked achievements overlay badge styling */
.ach-lock-overlay {
position: absolute;
top: 8px;
right: 8px;
background: rgba(14, 12, 12, 0.95) !important;
border: 1px solid var(--border-subtle);
border-radius: 50%;
width: 22px;
height: 22px;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
/* Drastically reduced width and vertical scrolling for Collectibles achievements container */
#profile-view-achievements {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.65rem !important;
max-width: 100% !important;
margin: 1rem auto 0 auto !important;
overflow: visible !important;
}
#profile-view-achievements::-webkit-scrollbar {
width: 5px;
}
#profile-view-achievements::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
}
#profile-view-achievements::-webkit-scrollbar-thumb {
background: var(--border-subtle);
border-radius: 4px;
}
#profile-view-achievements::-webkit-scrollbar-thumb:hover {
background: var(--text-tertiary);
}
/* Fixed table layout and responsive text clipping */
.data-table {
table-layout: fixed !important;
}
.data-table td.truncate-cell {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.user-cell-container {
display: flex !important;
align-items: center !important;
overflow: hidden !important;
max-width: 100% !important;
}
.user-cell-container .truncate-text {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-grow: 1 !important;
min-width: 0 !important;
}
/* ============================================ */
/* ONBOARDING OVERLAY */
/* ============================================ */
.onboarding-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 15, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
animation: onboardingFadeIn 0.4s ease;
}
@keyframes onboardingFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.onboarding-card {
background: rgba(18, 18, 22, 0.45);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 2.5rem 2.5rem 2rem;
width: 440px;
max-width: 90vw;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 0 80px rgba(250, 205, 21, 0.04), 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
animation: onboardingSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes onboardingSlideUp {
from { opacity: 0; transform: translateY(30px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.onboarding-header {
text-align: center;
margin-bottom: 1.8rem;
}
.onboarding-header .pixel-alien {
margin-bottom: 1rem;
filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
}
.onboarding-title {
font-family: 'Press Start 2P', monospace;
font-size: 0.85rem;
color: var(--primary-yellow, #facc15);
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 0.5rem;
}
.onboarding-subtitle {
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
color: var(--text-secondary, #888);
margin: 0;
}
.onboarding-form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.onboarding-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
position: relative;
}
.onboarding-label {
font-family: 'Space Mono', monospace;
font-size: 0.7rem;
color: var(--text-secondary, #888);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.onboarding-required {
color: #ff4444;
}
.onboarding-optional {
color: var(--text-secondary, #888);
font-size: 0.6rem;
text-transform: lowercase;
letter-spacing: 0;
}
.onboarding-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.onboarding-input {
width: 100%;
background: var(--bg-tertiary, #141422);
border: 1px solid var(--border-subtle, #2a2a3e);
border-radius: 6px;
padding: 0.65rem 3rem 0.65rem 0.75rem;
font-family: 'Outfit', sans-serif;
font-size: 0.88rem;
color: var(--text-primary, #e0e0e0);
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.onboarding-input:focus {
border-color: rgba(250, 205, 21, 0.4);
box-shadow: 0 0 0 2px rgba(250, 205, 21, 0.08);
}
.onboarding-input::placeholder {
color: rgba(255, 255, 255, 0.2);
}
.onboarding-textarea {
resize: none;
min-height: 70px;
}
.onboarding-char-count {
position: absolute;
right: 8px;
bottom: 8px;
font-family: 'Fira Code', monospace;
font-size: 0.6rem;
color: var(--text-secondary, #888);
pointer-events: none;
}
.onboarding-char-count.near-limit {
color: #ff8800;
}
.onboarding-char-count.at-limit {
color: #ff4444;
}
/* Handle field */
.onboarding-handle-wrap {
position: relative;
}
.onboarding-handle-prefix {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-family: 'Fira Code', monospace;
font-size: 0.88rem;
color: var(--primary-yellow, #facc15);
pointer-events: none;
z-index: 1;
}
.onboarding-handle-input {
padding-left: 1.6rem !important;
}
.onboarding-handle-status {
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
min-height: 1rem;
transition: color 0.2s;
}
.onboarding-handle-status.available {
color: #00cc66;
}
.onboarding-handle-status.taken {
color: #ff4444;
}
.onboarding-handle-status.checking {
color: var(--text-secondary, #888);
}
/* College autocomplete */
.onboarding-autocomplete {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 180px;
overflow-y: auto;
background: var(--bg-tertiary, #141422);
border: 1px solid var(--border-subtle, #2a2a3e);
border-top: none;
border-radius: 0 0 6px 6px;
z-index: 10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.onboarding-autocomplete-item {
padding: 0.5rem 0.75rem;
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
color: var(--text-primary, #e0e0e0);
cursor: pointer;
transition: background 0.15s;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.onboarding-autocomplete-item:hover,
.onboarding-autocomplete-item.active {
background: rgba(250, 205, 21, 0.08);
color: var(--primary-yellow, #facc15);
}
.onboarding-autocomplete-item mark {
background: transparent;
color: var(--primary-yellow, #facc15);
font-weight: 600;
}
/* Submit button */
.onboarding-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem;
margin-top: 0.5rem;
background: var(--primary-yellow, #facc15);
color: #000;
border: none;
border-radius: 6px;
font-family: 'Press Start 2P', monospace;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s;
}
.onboarding-submit-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(250, 205, 21, 0.3);
}
.onboarding-submit-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.onboarding-submit-btn:active:not(:disabled) {
transform: translateY(0);
}
/* Custom scrollbar for autocomplete */
.onboarding-autocomplete::-webkit-scrollbar {
width: 4px;
}
.onboarding-autocomplete::-webkit-scrollbar-track {
background: transparent;
}
.onboarding-autocomplete::-webkit-scrollbar-thumb {
background: rgba(250, 205, 21, 0.2);
border-radius: 2px;
}
/* Dynamic Fade-in Stagger Animations */
@keyframes fadeInUpRow {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-row {
opacity: 0;
animation: fadeInUpRow 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* League Progress Modal Items */
.league-progress-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
padding: 1.25rem 1rem;
background: rgba(25, 22, 22, 0.6);
border: 1px solid var(--border-subtle);
border-radius: 8px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.league-progress-item.unlocked {
border-color: rgba(250, 204, 21, 0.3);
background: rgba(250, 204, 21, 0.02);
}
.league-progress-item.current {
border-color: #00ff66;
background: rgba(0, 255, 102, 0.05);
box-shadow: 0 0 15px rgba(0, 255, 102, 0.15);
}
.league-progress-item.locked {
opacity: 0.35;
filter: grayscale(0.9);
}
.league-progress-item .league-badge-container {
display: flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
flex-shrink: 0;
}
.league-progress-item.current .league-badge-container {
background: rgba(0, 255, 102, 0.15);
box-shadow: inset 0 0 12px rgba(0, 255, 102, 0.25);
}
.league-progress-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
}
.league-progress-name {
font-family: var(--font-pixel), monospace;
font-size: 0.75rem;
margin: 0;
}
.league-progress-item.unlocked .league-progress-name {
color: var(--primary-yellow);
}
.league-progress-item.current .league-progress-name {
color: #00ff66;
}
.league-progress-item.locked .league-progress-name {
color: var(--text-muted);
}
.league-progress-desc {
font-size: 0.62rem;
color: var(--text-secondary);
line-height: 1.45;
margin: 0;
max-width: 180px;
}
.league-progress-status-tag {
font-family: var(--font-pixel), monospace;
font-size: 0.52rem;
text-transform: uppercase;
padding: 0.2rem 0.5rem;
border-radius: 3px;
white-space: nowrap;
margin-top: 0.25rem;
}
.league-progress-status-tag.unlocked {
color: var(--primary-yellow);
background: rgba(250, 204, 21, 0.1);
border: 1px solid rgba(250, 204, 21, 0.3);
}
.league-progress-status-tag.current {
color: #00ff66;
background: rgba(0, 255, 102, 0.15);
border: 1px solid rgba(0, 255, 102, 0.4);
}
.league-progress-status-tag.locked {
color: var(--text-muted);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Phase 18B: assessment-mode selector (Implement RTL / Write Testbench). */
.assessment-mode-selector {
display: inline-flex !important;
background: var(--bg-tertiary) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 8px !important;
padding: 4px !important;
gap: 4px !important;
}
.assessment-mode-btn {
background: transparent !important;
border: none !important;
color: var(--text-secondary) !important;
font-family: var(--font-mono);
font-size: 0.75rem !important;
font-weight: 600;
padding: 6px 14px !important;
border-radius: 6px !important;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: none !important;
}
.assessment-mode-btn:hover {
color: var(--text-primary) !important;
background: rgba(255, 255, 255, 0.04) !important;
}
.assessment-mode-btn.active {
background: var(--primary-blue) !important;
color: var(--bg-primary) !important;
font-weight: 700;
box-shadow: 0 2px 6px var(--shadow-color) !important;
}
/* Dropdown row wrapper styles */
.dropdown-item-wrapper {
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent;
transition: background-color 0.2s ease;
}
.dropdown-item-wrapper:hover {
background-color: rgba(255, 255, 255, 0.05) !important;
}
.dropdown-item-wrapper:has(.selected) {
background-color: var(--bg-tertiary) !important;
}
.dropdown-item-wrapper .dropdown-item {
background-color: transparent !important;
}
.dropdown-item-wrapper .dropdown-item:hover {
background-color: transparent !important;
}
/* Mini Mode Dropdown Styles inside filename menu */
.mini-dropdown {
position: relative;
display: flex;
align-items: stretch;
height: 100%;
}
.mini-mode-btn {
background: transparent !important;
border: none !important;
margin: 0 !important;
color: var(--text-primary) !important;
font-size: 10px !important;
padding: 0 12px !important;
border-radius: 0 !important;
font-family: var(--font-mono) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
cursor: pointer !important;
min-width: 55px !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
height: 100% !important;
justify-content: center !important;
transition: all 0.15s ease !important;
box-shadow: none !important;
}
.mini-mode-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
.mini-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 2px) !important;
right: 0;
background: var(--bg-secondary) !important;
border: 1px solid var(--border-subtle) !important;
border-radius: 0 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
z-index: 1010 !important;
min-width: 75px !important;
overflow: hidden;
padding: 0 !important;
}
.mini-dropdown-item {
display: block !important;
width: 100% !important;
text-align: left !important;
padding: 6px 10px !important;
font-size: 10px !important;
background: transparent !important;
border: none !important;
color: var(--text-secondary) !important;
cursor: pointer !important;
font-family: var(--font-mono) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
transition: all 0.15s ease !important;
}
.mini-dropdown-item:hover {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--text-primary) !important;
}
.mini-dropdown-item.active {
background: var(--bg-tertiary) !important;
color: var(--primary-blue) !important;
}
/* ==========================================================================
DESIGN SYSTEM UTILITIES & OVERRIDES (Tier 1 & Tier 2 Redesign)
========================================================================== */
/* 1. Typography Utility Classes */
.text-xs { font-size: var(--text-xs) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }
/* 2. Spacing Utility Classes */
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.mb-2xs { margin-bottom: var(--space-2xs) !important; }
.mb-xs { margin-bottom: var(--space-xs) !important; }
.mb-sm { margin-bottom: var(--space-sm) !important; }
.mb-md { margin-bottom: var(--space-md) !important; }
.mb-lg { margin-bottom: var(--space-lg) !important; }
.gap-2xs { gap: var(--space-2xs) !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
/* 3. Layout Utility Classes */
.d-flex { display: flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.align-center { align-items: center !important; }
.w-full { width: 100% !important; }
.d-none { display: none !important; }
.position-relative { position: relative !important; }
/* 4. Border Radius Utilities */
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
/* 5. Performance Optimized Transitions (No Transition: All) */
.btn, .nav-link, .card, .dropdown-item, .problem-row, input, select, textarea, .assessment-mode-btn, .mini-mode-btn, .mini-dropdown-item {
transition: background-color var(--transition-speed) ease,
border-color var(--transition-speed) ease,
color var(--transition-speed) ease,
opacity var(--transition-speed) ease,
transform var(--transition-speed) ease,
box-shadow var(--transition-speed) ease !important;
}
/* 6. Sticky Sidebar on Problems Page (Desktop viewports) */
@media (min-width: 993px) {
.problems-sidebar-column {
position: sticky !important;
/* Aligns 24px (1.5rem) below the fixed navbar */
top: calc(var(--header-height, 52px) + 1.5rem) !important;
/* Default: naturally sized, no internal scrollbar */
height: auto !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
align-self: start !important;
}
/* Compact spacing overrides to ensure cards fit on 1366x768, 1440x900, 1920x1080 screens */
.problems-sidebar-column .sidebar-card {
padding: 0.8rem 1rem !important; /* Slightly tighter card padding */
}
.problems-sidebar-column .sidebar-card-title {
margin-bottom: 0.65rem !important; /* Slightly tighter title margin */
font-size: 0.85rem !important; /* Slightly larger header font size */
}
/* Progress Card: Reflow to side-by-side layout (circle gauge left, breakdown right) */
.problems-sidebar-column .progress-card {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
gap: 1rem !important; /* Slightly tighter gap */
}
.problems-sidebar-column .progress-card .sidebar-card-title {
grid-column: 1 / -1 !important;
margin-bottom: 0.35rem !important;
}
.problems-sidebar-column .progress-card .progress-circle-wrapper {
margin: 0 !important;
}
.problems-sidebar-column .progress-card .progress-ring {
width: 72px !important; /* Slightly smaller circular gauge size */
height: 72px !important;
}
.problems-sidebar-column .progress-card .difficulty-breakdown {
margin-top: 0 !important;
gap: 0.35rem !important; /* Slightly tighter breakdown row spacing */
}
.problems-sidebar-column .progress-card .diff-row {
font-size: 0.75rem !important; /* Standard labels */
}
/* Verification Skills Card: Shrink internal layout elements */
.problems-sidebar-column .skills-list {
gap: 0.65rem !important; /* Slightly tighter item spacing */
}
.problems-sidebar-column .skills-list .skill-item > div:first-child {
margin-bottom: 0.2rem !important; /* Slightly tighter inner label spacing */
font-size: 0.75rem !important; /* Standardized labels */
}
.problems-sidebar-column .skills-list .skill-item > div:last-child {
height: 8px !important; /* Slightly taller progress bars */
border-radius: 4px !important;
}
/* Fallback: Only enable internal scrolling if the screen height is extremely short (< 560px) */
@media (max-height: 560px) {
.problems-sidebar-column {
height: calc(100vh - var(--header-height, 52px) - 3rem) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Hover-only subtle yellow scrollbar thumb (only when overflow scroll occurs) */
.problems-sidebar-column::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
background: transparent !important;
}
.problems-sidebar-column::-webkit-scrollbar-track {
background: transparent !important;
}
.problems-sidebar-column::-webkit-scrollbar-thumb {
background: transparent !important;
border-radius: 3px !important;
transition: background 0.15s ease !important;
}
.problems-sidebar-column:hover::-webkit-scrollbar-thumb {
background: rgba(250, 204, 21, 0.2) !important;
}
.problems-sidebar-column::-webkit-scrollbar-thumb:hover {
background: rgba(250, 204, 21, 0.45) !important;
}
/* Firefox scrollbars */
.problems-sidebar-column {
scrollbar-width: thin !important;
scrollbar-color: transparent transparent !important;
}
.problems-sidebar-column:hover {
scrollbar-color: rgba(250, 204, 21, 0.2) transparent !important;
}
}
}
/* ==========================================================================
Premium UI Transitions & Standardized Motion Curves
========================================================================== */
/* 1. Global Native Scroll Behavior */
html {
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch;
}
/* 2. Standardized Easing & Hover Transitions on Interactive Elements */
.btn,
.nav-link,
.select-filter,
.theme-toggle-btn,
.sidebar-card,
.feature-card,
.track-card,
.curriculum-module-card,
.curriculum-problem-row,
.problems-table tbody tr,
.cal-day-full,
.editorial-card-header {
transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* 3. Global Modal Transitions Override */
.modal-overlay {
display: flex !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important,
visibility 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.modal-overlay.show {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.modal-content,
.mock-modal,
.exit-confirm-modal {
opacity: 0 !important;
transform: scale(0.96) translateY(12px) !important;
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important,
opacity 0.22s ease !important;
}
.modal-overlay.show .modal-content,
.modal-overlay.show .mock-modal,
.modal-overlay.show .exit-confirm-modal,
.mock-modal-backdrop.open .mock-modal,
.mock-modal-backdrop.open .exit-confirm-modal,
.exit-confirm-backdrop.open .exit-confirm-modal {
opacity: 1 !important;
transform: scale(1) translateY(0) !important;
}
/* 4. Dropdowns & Rules Popover transitions */
.dropdown-menu,
.rules-popover {
display: block !important;
opacity: 0 !important;
transform: scale(0.96) translateY(-4px) !important;
pointer-events: none !important;
transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important,
transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.dropdown-menu.show,
.rules-popover.show {
opacity: 1 !important;
transform: scale(1) translateY(0) !important;
pointer-events: auto !important;
}
/* 5. Console Dropdown Menu override */
.console-dropdown-menu {
display: block !important;
opacity: 0 !important;
transform: scale(0.96) translateY(-4px) !important;
pointer-events: none !important;
transform-origin: top right !important;
animation: none !important;
transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important,
transform 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.console-dropdown-menu.show {
opacity: 1 !important;
transform: scale(1) translateY(0) !important;
pointer-events: auto !important;
}
/* 6. Tooltips transition */
#wave-hover-tooltip {
opacity: 0 !important;
transform: scale(0.95) !important;
pointer-events: none !important;
transition: opacity 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important,
transform 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#wave-hover-tooltip.show {
opacity: 1 !important;
transform: scale(1) !important;
}
/* 7. Experience drawers and slideouts */
.exp-drawer-backdrop {
display: block !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 200ms ease !important, visibility 200ms ease !important;
}
.exp-drawer-backdrop.open {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.exp-drawer {
display: flex !important;
opacity: 0 !important;
transform: translateX(-10px) !important;
pointer-events: none !important;
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important, opacity 200ms ease !important;
}
.exp-drawer-backdrop.open .exp-drawer {
opacity: 1 !important;
transform: translateX(0) !important;
pointer-events: auto !important;
}
.exp-preview-panel {
display: flex !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(-10px) !important;
pointer-events: none !important;
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important, opacity 200ms ease !important, visibility 200ms ease !important;
}
.exp-preview-panel.open {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
pointer-events: auto !important;
}
/* 8. Progress indicators transitions */
.progress-ring-circle-fill,
.skill-bar-fill,
.promotion-progress-fill,
.sidebar-skill-bar,
#profile-promo-progress-fill,
#assess-header-progress-fill {
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important,
stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* 9. Accessibility Overrides (Reduced Motion) */
@media (prefers-reduced-motion: reduce) {
* {
animation-delay: 0s !important;
animation-duration: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
transform: none !important;
}
}
/* 10. Nav Bar Logo Text sizing & vertical centering */
header.app-header .logo-text {
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.5px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
transform: translateY(1.5px) !important; /* Visual vertical offset adjustment for pixel font baseline alignment */
}
/* 11. Sidebar Verification Skill Progress Bars styling */
.sidebar-skill-track {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.08) !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden;
box-sizing: border-box;
}
.sidebar-skill-bar {
width: 0%;
height: 100%;
background: var(--primary-blue) !important;
border-radius: 0 !important;
}
/* 12. Editor Run/Submit/Reset Button Layout & Styles */
#btn-reset-code {
background-color: var(--bg-tertiary) !important;
border: 1px solid var(--border-subtle) !important;
color: var(--text-secondary) !important;
padding: 0.25rem 0.75rem !important;
}
#btn-reset-code:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
#btn-reset-code:active {
background-color: rgba(255, 255, 255, 0.15) !important;
}
/* 13. Console Drawer Tab styling: remove underlines and add subtle dark grey highlights */
.drawer-tab {
border-bottom: none !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.drawer-tab.active {
border-bottom: none !important;
background-color: rgba(255, 255, 255, 0.05) !important; /* Slightly darker grey highlight */
color: var(--text-primary) !important;
}
.drawer-tab:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.02) !important;
color: var(--text-primary) !important;
}
.drawer-tab-more-btn {
border-bottom: none !important;
}
.drawer-tab-overflow.active .drawer-tab-more-btn {
border-bottom: none !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: var(--text-primary) !important;
}
/* 14. Smooth cross-fade transition classes for real content replacing skeletons */
.content-transition-ready {
opacity: 0 !important;
transform: translateY(12px) !important;
transition: none !important;
}
.content-transition-active {
opacity: 1 !important;
transform: translateY(0) !important;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* 15. Global Premium View Section Transitions */
.view-section.fade-in {
animation: premiumFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.view-section.fade-out {
animation: premiumFadeOut 0.15s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes premiumFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes premiumFadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
/* 16. Share Experience modal inputs & containers border color refactor (charcoal grey) */
#experience-modal input.hero-email-input,
#experience-modal textarea.hero-email-input,
#experience-modal select.select-filter,
#experience-modal #experience-tag-picker {
border: 1.2px solid #3a3838 !important;
}
#experience-modal .clickable-tag {
border: 1px solid #3a3838 !important;
}
#experience-modal input.hero-email-input:focus,
#experience-modal textarea.hero-email-input:focus,
#experience-modal select.select-filter:focus {
border-color: var(--primary-blue) !important;
}