* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; text-rendering: optimizeLegibility; } ::selection { background-color: var(--primary-color); color: var(--bg-color); } html, body, option { height: 100%; font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; line-height: 1.7; font-size: 18px; background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; } :root { --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --radius-rounded: 8px; --radius-round: 40px; --font-sans: system-ui, sans-serif; --bg-color: #edf0f7; --bg-gradient: linear-gradient(177deg, #e7ebf4a3 29%, #ffffffa3 150%); --text-color: #222; --text-dim: #999; --text-dark: #22222f; --border-color: #d0dbebcc; --input-border: #96969680; --partition: #f1f3f8; --primary-color: #625bf5; --primary-hover: #0f088cc7; --primary-bg: #FFFFFF; --accent-bg: #F8F8FC; --tag-bg: #f6fafd; --success-bg: #e6ffe6; --fail-bg: #ffdddd; --chat-bg: #e1ffc7; --green: #28a745; --red: #ff4747; --shadow: #0000001a; --topic-bg-image: url(/assets/images/visuals/topic-bg.jpg); } [data-theme="dark"] { --bg-color: #14161F; --bg-gradient: linear-gradient(177deg, #14161f, #000 150%); --text-color: #b6bed3; --text-dim: #7c859c; --text-dark: #ccc; --border-color: #6d7ba252; --partition: #6d7ba2a3; --primary-color: #7182ff; --primary-hover: #8593FF; --primary-bg: #212531; --accent-bg: #32364b; --tag-bg: #061747; --success-bg: #204020; --fail-bg: #3a1f1f; --chat-bg: #204020; --topic-bg-image: none; } .m-0 { margin: 0 !important; } .mt-1 { margin-top: var(--spacing-xs) !important; } .mt-2 { margin-top: var(--spacing-sm) !important; } .mt-3 { margin-top: var(--spacing-md) !important; } .mb-2 { margin-bottom: var(--spacing-sm) !important; } .mb-3 { margin-bottom: var(--spacing-md) !important; } .mb-4 { margin-bottom: var(--spacing-lg) !important; } .mr-2 { margin-right: var(--spacing-sm) !important; } .ml-4 { margin-left: var(--spacing-lg) !important; } .ml-3 { margin-left: var(--spacing-md) !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .p-0 {padding: 0 !important;} .p-1 { padding: var(--spacing-xs) !important; } .p-2 { padding: var(--spacing-sm) !important; } .p-3 { padding: var(--spacing-md) !important; } .p-4 { padding: var(--spacing-lg) !important; } .px-2 { padding-left: var(--spacing-sm) !important; padding-right: var(--spacing-sm) !important; } .px-3 { padding-left: var(--spacing-md) !important; padding-right: var(--spacing-md) !important; } .px-4 { padding-left: var(--spacing-lg) !important; padding-right: var(--spacing-lg) !important; } .py-1 { padding-top: var(--spacing-xs) !important; padding-bottom: var(--spacing-xs) !important; } .py-2 { padding-top: var(--spacing-sm) !important; padding-bottom: var(--spacing-sm) !important; } .py-3 { padding-top: var(--spacing-md) !important; padding-bottom: var(--spacing-md) !important; } .py-4 { padding-top: var(--spacing-lg) !important; padding-bottom: var(--spacing-lg) !important; } .py-5 { padding-top: var(--spacing-xl) !important; padding-bottom: var(--spacing-xl) !important; } .pb-4 { padding-bottom: var(--spacing-lg) !important; } .pb-5 { padding-bottom: var(--spacing-xl) !important; } .d-flex { display: flex !important; } .flex-wrap { flex-wrap: wrap !important; } .no-wrap { flex-wrap: nowrap !important; white-space: nowrap;} .flex-row-reverse {flex-flow:row-reverse;} .overflow-x { overflow-x: auto; white-space: nowrap !important; } .align-center { align-items: center !important; } .justify-between { justify-content: space-between !important; } .justify-center { justify-content: center !important; } .flex { display: flex !important; column-gap: var(--spacing-md); align-items: center; } .grid { display: grid; grid-gap: var(--spacing-md); } .float-right {float:right;} .float-left {float:left;} .gap-2 { column-gap: var(--spacing-sm) !important; } .gap-3 { column-gap: var(--spacing-md) !important; } .gap-4 { column-gap: var(--spacing-lg); } .w-100 { width: 100% !important; } .max-w-1340 { max-width: 1340px !important; } .max-w-800 { max-width: 800px !important; } .max-w-600 { max-width: 600px !important; } .max-w-400 { max-width: 400px !important; } .h-40 {height:40px;} .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } small {font-size:small;} tiny {font-size: 0.5rem;} .text-sm { font-size: 0.7rem !important; } .text-base { font-size: 1rem !important; } .text-lg { font-size: 1.1rem !important; } .text-xl { font-size: 1.5rem !important; } .text-xxl { font-size: 2rem !important; } .fw-normal { font-weight: 400 !important; } .fw-medium { font-weight: 500 !important; } .fw-bold { font-weight: 700 !important; } .cursive {font-family: cursive;} .text-primary { color: var(--primary-color) !important; } .text-dim { color: var(--text-dim) !important; } .text-light { color: var(--text-color) !important; } .bg-primary { background-color: var(--primary-color) !important; } .bg-light { background-color: var(--primary-bg) !important; } .text-dark { color: var(--text-dark) !important; } .bg-accent { background-color: var(--accent-bg) !important; } .bg-tag { background-color: var(--tag-bg) !important; } .bg-green {background-color: var(--success-bg) !important;} .success {background-color: var(--success-bg) !important; color: var(--green) !important; border-left: 4px solid;} .fail {background-color: var(--fail-bg) !important; color: var(--red) !important; border-left: 4px solid;} .highlight {background-color:yellow; border-radius: 5px; padding: 0 8px 5px;} .text-green {color: var(--green) !important;} .text-red {color: var(--red) !important;} .text-orange {color: orange !important;} .text-u {text-transform:uppercase;} .shadow {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);} .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .rounded { border-radius: var(--radius-rounded) !important; } .rounded-lg { border-radius: var(--radius-round) !important; } .top-radius { border-top-right-radius: 6px;border-top-left-radius: 6px;} .bottom-radius { border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;} .border { border: 1px solid var(--border-color) !important; } .input-border { border: 1px solid var(--input-border) !important; } .border-top { border-top: 1px solid var(--border-color) !important; } .border-bottom { border-bottom: 1px solid var(--border-color) !important; } .border-dashed {border: 2px dashed green !important;} .border-bold {border: 2px solid var(--border-color);} .border-wide {border: 3px solid var(--border-color);} .border-none {border:none !important;} .d-block { display: block !important; } .d-none { display: none !important; } .sticky { position: sticky !important; top: 0; z-index: 1000; } .container { max-width: 1340px; margin-left: auto; margin-right: auto; padding: 0 var(--spacing-md);; } button, .btn, .btn-primary { display: inline-block; background: var(--primary-color); color: var(--primary-bg); padding: 0.6rem 1.2rem; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 17px; } .btn-primary.small { padding: 0.1rem 0.5rem; } .btn-primary.green { background-color:var(--green); } .btn-outline { border: 2px solid; background-color: transparent; color: var(--primary-color); padding: 4px 8px; border-radius: 6px; } button.small { padding: var(--spacing-sm); text-transform: none; font-weight: bold; letter-spacing: 1px; } button:hover, a.btn:hover, .btn-primary:hover { background: var(--primary-hover); color: var(--primary-bg); } .btn-primary.green:hover { background-color: var(--green); } .btn-outline:hover { background-color: var(--primary-color); color: var(--primary-bg); border: 2px solid var(--primary-color); } .btn-outline.text-green:hover { background-color: var(--green); border: 2px solid var(--green); color: var(--primary-bg) !important; } button.disabled { opacity: 40%; } a.button { display: inline-block; padding: 6px 12px; margin: 4px; border: 1px solid #aaa; border-radius: 4px; } //a.button:hover { background: var(--primary-bg); color: var(--primary-color); } a { color: var(--primary-color); text-decoration: none; transition: color 0.2s ease, text-decoration 0.2s ease; } #topic-content a { text-decoration: underline; } ul { list-style-type: disc; margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } ul.no-bullet { list-style-type: none; margin: 0; } li ol, li ul { margin-left: var(--spacing-lg); margin-bottom: var(--spacing-md); } ol li { margin-bottom: 0 !important; } h1, h2, strong { font-weight: 700; } h3, h4, h5, h6 { font-weight: 600; } h1 { font-size: 1.9rem; } h2 { font-size: 1.7rem; } .topic-header h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4, h5, h6 { font-size: 1.2rem; } p { margin-top: 0; } article p { margin-bottom: 1.5rem; } select, input, textarea { border: 1px solid #ccc; border-radius: 4px; background: var(--primary-bg); color: var(--text-color); padding: 5px 10px; font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; line-height: 1.7; font-size: 17px; outline:none; } input:focus, textarea:focus { border: 1px solid var(--primary-color); outline: none; } blockquote { border-left: 3px solid; margin-left: var(--spacing-md); padding-left: var(--spacing-sm); font-size: 0.875rem; font-weight: 500; font-style: unset; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } fieldset { padding: 10px 15px 15px; margin-bottom: 20px; border-radius: var(--radius-rounded); } table { width: 100%; border-collapse: collapse; background: var(--primary-bg); box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-radius: 6px; overflow: hidden; } table th, table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } table.small th, table.small td { padding: 0.50rem; } table th { background-color: var(--accent-bg); font-weight: 600; } .table-ordered th:nth-child(1), .table-ordered td:nth-child(1) { width: 60px; } .table-compare td { line-height: 1; } .flash-message { position: fixed; top: 20px; right: 20px; max-width: 300px; z-index: 9999; padding: 1em 1.5em; border-radius: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: opacity 0.3s ease; } .alert-success { background: #d4edda; color: #155724; } .alert-error { background: #f8d7da; color: #721c24; } .alert-info { background: #d1ecf1; color: #0c5460; } .edit-layout { display: grid; gap: 20px; grid-template-columns: 2.5fr 1fr; } .edit-sidebar { background: var(--bg-color); padding: 15px; border: 1px solid #ddd; border-radius: 8px; } .badge { display: inline-block; background: #546E7A40; color: #546E7A; font-size: 10px; font-weight: 500; padding: 2px 10px; border-radius: 12px; margin-right: 6px; vertical-align: middle; } .badge.pending, .badge-open, .badge-pending { background: #f57c0030; color: #f57c00; } .badge.self-checked, .badge-closed, .badge-completed { background: #6d7ba230; color: #666; } .badge.reviewed, .badge.new, .badge-answered, .badge-success, .badge-booked { background-color: #28a74530; color: #28a745; } .badge.revision { background-color: transparent; color: #2196f3; padding:0; } .badge.late, .badge.alert, .badge-cancelled { background-color: transparent; color: var(--red); padding:0; } .cards-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { border: 1px solid var(--border-color); border-radius: var(--radius-rounded); background-color: var(--primary-bg); padding: var(--spacing-md); } .site-branding { height: 32px; } button#theme-toggle { background: transparent; padding: 5px 10px; } .wrapper-right.flex { max-width: 70%; } nav#site-nav a { //color: var(--text-dim); font-weight: 500; padding: var(--spacing-sm) 0; } nav#site-nav a:hover { border-bottom: 2px solid; } .site-search { flex: 1; max-width: 500px; position: relative; } .site-search input[type="search"] { width: 100%; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg); outline: none; } .site-search input[type="search"]:focus { border-color: var(--primary-color) !important; } .site-search input[type="search"]::placeholder { color: var(--text-dim); } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--text-dim); pointer-events: none; } .search-results { position: absolute; top: 100%; left: 0; right: 0; border: 1px solid var(--border-color); border-top: none; padding: var(--spacing-sm) 0; max-height: 250px; overflow-y: auto; z-index: 10000; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .search-results li.active a, .search-results a:hover { background-color: var(--accent-bg); color: var(--primary-color); } .search-results li a { display: block; padding: 4px var(--spacing-md); text-decoration: none; color: var(--text-color); } .modal { position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } .modal.hidden { display: none; } .modal-content { background: var(--primary-bg); padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; box-shadow: 0 0 15px rgba(0,0,0,0.3); position: relative; } .modal-content label { display: block; margin-bottom: 10px; font-weight: bold; } .modal-content button[disabled] { background-color: #999; cursor: not-allowed; } .close-modal { position: absolute; right: 12px; top: 10px; font-size: 24px; cursor: pointer; } .has-sidebar { display: grid; grid-template-columns: 3fr 1.2fr; } article { scroll-padding-top: 250px; padding: var(--spacing-lg); } article h2 { color: #447389; border-bottom: 3px solid #447389; padding-bottom: 10px; margin-top: 30px; margin-bottom: 15px; } article h3, article h4 { color: #447389; margin-top: 20px; margin-bottom: 10px; } article p, .page-content p { margin: 10px 0 15px 0; text-align: justify; } article ul { margin: 10px 0 15px 20px; } article li { margin: 8px 0; text-align: justify; } .answer { text-align: justify; } #topic-content .focus { background: var(--bg-color); border: 1px solid #ddd; border-radius: var(--radius-rounded); padding: var(--spacing-md); font-size: smaller; } #topic-content .focus h3 { text-align: center; margin: 0; } #topic-content .focus h3:before { content: '💡'; } .prev-next-link span { visibility: hidden; } .topic-tag { display:inline-block; line-height: 1; } .topic-header { position: relative; background: linear-gradient(135deg, #CFD8DC 0%, #BBDEFB 50%, #ffffff 100%); overflow: hidden; } [data-theme="dark"] .topic-header { background: linear-gradient( 135deg, #0f172a 0%, #111827 50%, #020617 100% ); } .topic-header::after { content: ""; position: absolute; bottom: -20px; right: -20px; width: 240px; height: 240px; background-image: radial-gradient(circle, rgba(99, 102, 241, .35) 1.5px, transparent 1.5px); background-size: 20px 20px; pointer-events: none; } [data-theme="dark"] .topic-header::after { background-image: radial-gradient( circle, rgba(129,140,248,.45) 1.5px, transparent 1.5px ); } .related-topics-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .related-topic-card { max-width: 500px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .related-topic-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(80, 10, 209, 0.2); } #sidebar-links a { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm); border-bottom: 1px solid var(--border-color); color: var(--text-dark); font-weight: 500; font-size: 0.9rem; } #sidebar-links a:after { content: '\276F'; float: right; } #sidebar-links a:last-child { border: none; } #sidebar-links a:hover { color: var(--primary-hover); } .editorial-note { font-size: 0.9rem; color: #555; background: #f9f9f9; border-left: 4px solid #3b82f6; padding: 10px 15px; margin-top: 20px; border-radius: 6px; } .editorial-note a { color: #3b82f6; text-decoration: underline; } .sticky-toc-nav { position: sticky; top: 49px; z-index: 100; overflow: visible; } .horizontal-toc { max-width: calc(1340px - 2rem); padding: 0; overflow-x: auto; overflow-y: visible; white-space: nowrap; position: relative; } .horizontal-toc li { position: relative; flex-shrink: 0; } .horizontal-toc a, .horizontal-toc span { display: inline-block; padding: var(--spacing-xs) 0; ; text-decoration: none; color: var(--text-color); cursor: pointer; } .horizontal-toc .active, .nav-link.active { border-bottom: 2px solid var(--primary-color); font-weight: 500; color: var(--primary-color) !important; } .external-dropdown a.active { font-weight: 500; } .horizontal-toc .has-dropdown .dropdown { display: none; position: absolute; top: 100%; left: 0; white-space: normal; background: #fff; border: 1px solid #ddd; z-index: 999; min-width: 200px; padding: 0.5rem; } .external-dropdown { display: none; position: absolute; max-height: 300px; overflow-y: auto; background: var(--primary-bg); z-index: 9999; min-width: 200px; white-space: normal; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 0 0 var(--radius-rounded) var(--radius-rounded); } .external-dropdown.visible { display: block; } .external-dropdown li:hover { background-color: var(--accent-bg); } .external-dropdown a { display: block; color: var(--text-color); padding: var(--spacing-sm); border-top: 1px solid var(--border-color); text-decoration: none; } :target { scroll-margin-top: 100px; } .angled-divider { height: 80px; } .light-to-dark { background: linear-gradient(to bottom left, var(--primary-bg) 50%, var(--bg-color) 50%); } .dark-to-light { background: linear-gradient(to bottom left, var(--bg-color) 50%, var(--primary-bg) 50%); } .home-main .table-compare th:nth-child(1), .home-main .table-compare td:nth-child(1) { background-color: var(--accent-bg); } .home-main .table-compare th, .home-main .table-compare td { text-align:center; } .home-main .table-compare th { background: var(--primary-bg); } .home-main .table-compare { max-width: 800px; border-collapse: unset; } .locked-block { margin: 24px 0; border-radius: 12px; overflow: hidden; background: var(--primary-bg); border: 1px solid var(--border-color); box-shadow: 0 8px 24px var(--shadow); } .locked-preview { position: relative; max-height: 240px; padding: 18px; font-size: 0.96rem; line-height: 1.65; color: var(--text-color); overflow: hidden; } .locked-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient( to bottom, rgba(0,0,0,0), var(--primary-bg) ); pointer-events: none; } .locked-overlay { background: var(--accent-bg); padding: 16px 18px; border-top: 1px solid var(--border-color); text-align: center; } .locked-hint { margin: 0 0 10px; font-weight: 500; color: var(--text-dim); text-align: center; } .locked-btn { display: inline-block; padding: 10px 22px; border-radius: var(--radius-round); background: var(--primary-color); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .locked-btn:hover { transform: translateY(-1px); background: var(--primary-hover); box-shadow: 0 6px 18px var(--shadow); } .locked-core .locked-btn { background: var(--primary-color); } .locked-core .locked-btn:hover { background: var(--primary-hover); } .page-numbers { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; } .page-number { padding: 6px 10px; border-radius: 6px; text-decoration: none; border: 1px solid #e5e7eb; color: #333; background: var(--primary-bg); } .page-number.current { background: #607D8B; color: #fff; font-weight: 600; pointer-events: none; } .page-nav { padding: 6px 10px; font-weight: 500; } @media (max-width: 640px) { .locked-preview { max-height: 180px; padding: 16px; } .locked-hint { font-size: 0.9rem; } } @media (max-width: 1023px) { } @media (min-width: 769px) { .mobile {display:none !important;} #mobile-nav { display:none; } header { position: sticky !important; top: 0; z-index: 1000; } .table-no-border th, .table-no-border td { border-bottom: none; } .table-no-border tbody tr:nth-child(even) { background: var(--accent-bg); } article ol { margin-left: 2rem; } } @media (max-width: 768px) { .desktop {display:none !important;} .has-sidebar { grid-template-columns: 1fr; } #site-nav { display:none; } main.student-main.container { padding-right: 8px; padding-left: 8px; } .table-mobile thead { display: none; } .table-mobile tbody { background-color: transparent; } .table-mobile {box-shadow:none;background-color:transparent;} .table-mobile tr { display: block; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 8px; padding: 10px; background-color: var(--primary-bg); } .table-mobile td { display: block; text-align: left; padding: 6px 10px; position: relative; } .plans-table td { border:none; } .table-mobile td::before { content: attr(data-label); font-weight: 500; display: inline-block; margin-bottom: 2px; } .table-mobile .m-no-border { border-bottom: none; } .table-mobile td:last-child { border: none; } .no-data-label td::before { content: none; } .edit-layout { grid-template-columns: 1fr; } .m-gap-0 { gap:0; } article ol { margin-left: 1rem; } article { padding: var(--spacing-md); } }