/* Shared design tokens from MasterGo DSL - All pages should import this file first. */ :root{ /* Background gradient (canvas) */ --bg-grad: linear-gradient(180deg, #C6DBFF 0%, #E5F0FF 60%, #FFFFFF 100%); /* token: background align 1.css */ /* Status bar background */ --statusbar-bg: #C1DCFE; /* token: paint_13:15103 */ /* Base text and accents */ --text: #1D2129; /* token: paint_1:088 */ --muted: #26262C; /* token: paint_1:630 */ --muted-2: #5A5A5A; /* token: paint_1:1553 */ --tab: #3D3D3D; /* token: paint_13:755 */ --tab-active: #1E40AF; /* token: paint_13:31328 */ --card: #FFFFFF; /* token: paint_1:060 */ --divider: #BFC4C9; /* darker so dividers are more prominent */ --accent-ink: #0B1F86; /* token: paint_13:09183 / 9250 */ /* Shadows */ --shadow-weak: 0 1px 2px rgba(0,0,0,0.05); /* token: effect_13:07080 */ --shadow-card: 0px 2px 10px 0px #78A2D7; /* token: effect_13:05520 */ /* Fonts */ --font: 'Source Han Sans', 'Noto Sans SC', 'Segoe UI', system-ui, Arial, sans-serif; /* token: font_1 */ --font-default: var(--font); --font-title: 'Roboto', 'Source Han Sans', Arial, sans-serif; /* token: font_13:14366 */ /* Extra color tokens used by 2.css (course page) */ --color-video-bg: #E2E5EB; /* token: paint_1:083 */ --color-video-gradient: linear-gradient(180deg, rgba(63,77,100,0) 0%, rgba(54,65,85,0.45) 52%, #2C3546 95%); /* token: paint_1:0404 */ --color-overlay: rgba(24, 36, 61, 0.2); /* token: paint_1:0430 */ --color-overlay-stroke: rgba(255,255,255,0.7); /* token: paint_1:0432 */ --color-white: #FFFFFF; /* token: paint_1:060 */ --color-progress-bg: rgba(255,255,255,0.3); /* token: paint_1:0414 */ --color-title: #1F2937; /* token: paint_13:08463 */ --color-primary: #1E40AF; /* token: paint_13:09183 */ --color-chip-blue-bg: #DBEAFE; /* token: paint_13:08583 */ --color-gray-600: #4B5563; /* token: paint_13:09106 */ --color-yellow: #FACC15; /* token: paint_13:10101 */ --color-gray-900: #111827; /* token: paint_13:07212 */ --color-chip-green-bg: #DCFCE7; /* token: paint_13:08527 */ --color-green-700: #166534; /* token: paint_13:09119 */ --color-tabbar-bg: #E5F0FF; /* token: paint_13:12803 */ /* Aliases for cross-page naming consistency */ --text-base: var(--text); /* AI tab vertical shift (can be overridden for testing) Adjusted: moved up previously; now nudged down 1px per latest request. */ --tab-ai-shift: -12px; } /* Utility helpers for quickly testing different AI shifts Use by adding e.g. or */ .ai-shift-4 { --tab-ai-shift: -4px; } .ai-shift-8 { --tab-ai-shift: -8px; } /* For pages other than the standalone AI page, make the AI label match other tab labels and remove the thin top border on the tabbar. The AI page keeps its original visuals. */ body:not(.ai-page) .tab .tab-icon.tab-ai + .tab-link, body:not(.ai-page) .tab .tab-icon.tab-ai + span, body:not(.ai-page) .tabbar-item svg.tab-ai + .tab-link, body:not(.ai-page) .tabbar-item svg.tab-ai + span, body:not(.ai-page) .tabbar-item .tab-icon.tab-ai + .tab-link, body:not(.ai-page) .tabbar-item .tab-icon.tab-ai + span { color: inherit !important; /* inherit from the surrounding .tab color */ } /* Ensure tab links (both .tab used on index.html and .tabbar-item used on project pages) do not display the browser default underline and inherit the surrounding tab color. */ .tab .tab-link, .tab .tab-link:visited, .tabbar-item .tab-link, .tabbar-item .tab-link:visited { text-decoration: none !important; color: inherit !important; } /* Extra: ensure bottom tab labels across all pages never show underlines This covers cases where labels are anchors, spans, or divs inside the .tabbar. */ .tabbar, .tabbar .tabbar-item, .tabbar .tabbar-item a, .tabbar .tabbar-item span, .tabbar .tabbar-item div, /* also cover the legacy .tab anchors used in index.html */ .tab, .tab a, .tabbar a.tab, .tab span { text-decoration: none !important; } /* Ensure AI label (and other tab-link labels) use the same tab color as other labels */ .tabbar-item .tab-link, .tab .tab-link { color: var(--tab) !important; } /* Remove the thin divider line above the tabbar on all pages except the AI page */ body:not(.ai-page) .tabbar { border-top: none !important; }