Repository: Hestenb62/_legacy_backup
Author: Hesten Berger
Commit Message: updated grade selector
URL: https://github.com/Hestenb62/_legacy_backup/commit/158baba54c25b1316138a661b6e2aac469c4a9d2
Code Changes:
diff --git a/assets/css/pages/curriculum.css b/assets/css/pages/curriculum.css
index e60418e..99b0ed0 100644
--- a/assets/css/pages/curriculum.css
+++ b/assets/css/pages/curriculum.css
@@ -1,26 +1,31 @@
@layer components {
+ /* ==========================================================================
+ Standards & Curriculum Modern UI/UX Styles
+ ========================================================================== */
+
+ /* Subject Navigation (Sticky Frosted Glass) */
.curr-nav-container {
position: sticky;
top: 4.5rem;
z-index: 40;
- background-color: var(--color-header-bg);
- backdrop-filter: blur(12px);
- -webkit-backdrop-filter: blur(12px);
+ background-color: color-mix(in srgb, var(--color-bg-surface) 82%, transparent);
+ backdrop-filter: blur(18px);
+ -webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid var(--color-border);
- box-shadow: var(--shadow-sm);
- transition: all 0.3s;
+ box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.06);
+ transition: all 0.3s ease;
}
@media print {
.curr-nav-container {
- display: none;
+ display: none !important;
}
}
.curr-nav-inner {
max-width: 80rem;
margin: 0 auto;
- padding: 0.75rem 1rem;
+ padding: 0.625rem 1.5rem;
}
.curr-nav-flex {
@@ -28,12 +33,19 @@
align-items: center;
justify-content: space-between;
gap: 1rem;
+ flex-wrap: wrap;
}
+ /* Subject Segmented Tabs */
.curr-tabs {
display: flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.275rem;
+ background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-full);
overflow-x: auto;
- gap: 0.5rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
@@ -43,56 +55,105 @@
.curr-tab-btn {
flex-shrink: 0;
- display: flex;
+ display: inline-flex;
align-items: center;
- gap: 0.5rem;
- padding: 0.625rem 1.5rem;
- border-radius: var(--radius-lg);
- font-weight: 900;
+ gap: 0.55rem;
+ padding: 0.55rem 1.25rem;
+ border-radius: var(--radius-full);
+ font-weight: 800;
font-size: 0.75rem;
- transition: all 0.3s;
+ letter-spacing: 0.04em;
+ transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid transparent;
color: var(--color-text-muted);
background: transparent;
cursor: pointer;
+ white-space: nowrap;
+ user-select: none;
+ }
+
+ .curr-tab-icon-wrap {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ transition: transform 0.2s ease;
}
.curr-tab-btn:hover:not(.active) {
- background-color: var(--color-bg-surface);
+ color: var(--color-text-main);
+ background-color: color-mix(in srgb, var(--color-bg-surface) 90%, transparent);
+ }
+
+ .curr-tab-btn:hover .curr-tab-icon-wrap {
+ transform: scale(1.15);
}
.curr-tab-btn.active {
- color: var(--color-text-inverse);
- box-shadow: var(--shadow-lg);
+ color: #ffffff !important;
+ font-weight: 900;
+ transform: scale(1.02);
}
- .tab-color-indigo { background-color: var(--color-primary); box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-primary) 20%, transparent); }
- .tab-color-rose { background-color: var(--color-error); box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-error) 20%, transparent); }
- .tab-color-emerald { background-color: var(--color-success); box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-success) 20%, transparent); }
- .tab-color-amber { background-color: var(--color-warning); box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-warning) 20%, transparent); }
+ .tab-color-indigo.active {
+ background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
+ box-shadow: 0 4px 14px -1px rgba(79, 70, 229, 0.45);
+ border-color: #4338ca;
+ }
- .color-indigo { color: var(--color-primary); }
- .color-rose { color: var(--color-error); }
- .color-emerald { color: var(--color-success); }
- .color-amber { color: var(--color-warning); }
+ .tab-color-rose.active {
+ background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%) !important;
+ box-shadow: 0 4px 14px -1px rgba(225, 29, 72, 0.45);
+ border-color: #be123c;
+ }
- .curr-tab-icon {
- font-size: 0.625rem;
+ .tab-color-emerald.active {
+ background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
+ box-shadow: 0 4px 14px -1px rgba(16, 185, 129, 0.45);
+ border-color: #047857;
}
+ .tab-color-amber.active {
+ background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
+ box-shadow: 0 4px 14px -1px rgba(245, 158, 11, 0.45);
+ border-color: #b45309;
+ }
+
+ .color-indigo { color: var(--color-primary) !important; }
+ .color-rose { color: var(--color-error) !important; }
+ .color-emerald { color: var(--color-success) !important; }
+ .color-amber { color: var(--color-warning) !important; }
+
+ /* Curriculum Framework Selector */
.curr-select-container {
- display: flex;
+ position: relative;
+ display: inline-flex;
align-items: center;
gap: 0.5rem;
+ padding: 0.375rem 0.875rem;
+ background: color-mix(in srgb, var(--color-bg-base) 80%, transparent);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-full);
+ transition: all 0.2s ease;
flex-shrink: 0;
}
+ .curr-select-container:hover {
+ border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
+ background: var(--color-bg-surface);
+ }
+
+ .curr-select-icon {
+ font-size: 0.8125rem;
+ color: var(--color-primary);
+ }
+
.curr-select-label {
- font-size: 0.625rem;
- font-weight: 900;
+ font-size: 0.6875rem;
+ font-weight: 800;
color: var(--color-text-muted);
text-transform: uppercase;
- letter-spacing: 0.1em;
+ letter-spacing: 0.06em;
display: none;
}
@@ -103,468 +164,731 @@
}
.curr-select {
- background-color: var(--color-bg-surface);
+ appearance: none;
+ -webkit-appearance: none;
+ background: transparent;
border: none;
- border-radius: var(--radius-sm);
- padding: 0.5rem 1rem;
+ padding: 0.2rem 1.25rem 0.2rem 0;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text-main);
cursor: pointer;
+ outline: none;
}
- .curr-select:focus {
- outline: none;
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
+ .curr-select-chevron {
+ position: absolute;
+ right: 0.75rem;
+ font-size: 0.65rem;
+ color: var(--color-text-muted);
+ pointer-events: none;
}
+ /* Main Container */
.curr-main {
min-height: 100vh;
padding-bottom: 6rem;
}
+ /* Header Section with Dynamic Ambient Glow */
.curr-header {
+ position: relative;
+ overflow: hidden;
background-color: var(--color-bg-surface);
- padding-top: 4rem;
- padding-bottom: 3rem;
+ padding-top: 3.5rem;
+ padding-bottom: 3.5rem;
border-bottom: 1px solid var(--color-border);
- transition: background-color 0.3s;
+ transition: background-color 0.3s ease;
+ }
+
+ .curr-header-ambient-glow {
+ position: absolute;
+ top: -40%;
+ right: -10%;
+ width: 45rem;
+ height: 45rem;
+ border-radius: 50%;
+ filter: blur(100px);
+ opacity: 0.15;
+ pointer-events: none;
+ transition: background 0.6s ease;
+ z-index: 1;
+ }
+
+ .curr-header[data-subject="math"] .curr-header-ambient-glow {
+ background: radial-gradient(circle, #6366f1 0%, #3b82f6 50%, transparent 80%);
+ }
+ .curr-header[data-subject="ela"] .curr-header-ambient-glow {
+ background: radial-gradient(circle, #f43f5e 0%, #ec4899 50%, transparent 80%);
+ }
+ .curr-header[data-subject="science"] .curr-header-ambient-glow {
+ background: radial-gradient(circle, #10b981 0%, #06b6d4 50%, transparent 80%);
+ }
+ .curr-header[data-subject="social"] .curr-header-ambient-glow {
+ background: radial-gradient(circle, #f59e0b 0%, #ea580c 50%, transparent 80%);
}
.curr-header-inner {
+ position: relative;
+ z-index: 2;
max-width: 80rem;
margin: 0 auto;
- padding: 0 1rem;
+ padding: 0 1.5rem;
}
.curr-header-content {
animation: rise-in 0.5s ease-out forwards;
}
+ .curr-badge-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.35rem 0.85rem;
+ border-radius: var(--radius-full);
+ background: color-mix(in srgb, var(--color-bg-base) 80%, var(--color-bg-surface));
+ border: 1px solid var(--color-border);
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: var(--color-text-muted);
+ margin-bottom: 1rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+ }
+
+ .curr-badge-pill i {
+ color: var(--color-primary);