/*! * GeniusDesign — gd_campus Template (UIkit 3 brand layer) * Joomla 6 LMS theme with a fixed left icon-rail, a light top bar, a * card-based content column and a right utility sidebar. All colors/fonts * come from CSS custom properties injected by index.php from the template * params (defaults mirrored below). */ :root { --gd-rail-bg: #009999; /* GeniusDesign brand rail */ --gd-rail-bg-dark: #007a7a; /* rail hover / active bar */ --gd-rail-text: rgba(255, 255, 255, 0.92); --gd-rail-active-bg: #ffffff; /* selected item pill background */ --gd-rail-active-text: #007a7a; --gd-rail-width: 92px; --gd-primary: #009999; /* brand primary (links / actions) */ --gd-primary-hover: #007a7a; --gd-secondary: #4f5157; /* neutral slate */ --gd-accent: #ff915d; --gd-text: #5c5c5c; --gd-heading: #4f5157; --gd-muted: #f8f9fb; /* page background */ --gd-panel: #ffffff; --gd-border: #e6e8eb; --gd-radius: 8px; --gd-card-accent: #ff915d; /* course-card header band */ --gd-font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-heading: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gd-font-display: "Nunito", var(--gd-font-heading); } /* ===== Base ============================================================== */ /* Horizontal overflow is clipped on only. Do NOT set overflow-x on : that makes its computed overflow-y "auto", which turns into a (non-scrolling) scroll container and breaks uk-scroll target detection. */ html { overflow-x: hidden; } body.gd-campus { font-family: var(--gd-font-body); color: var(--gd-text); background: var(--gd-muted); margin: 0; max-width: 100%; } .gd-campus h1, .gd-campus h2, .gd-campus h3, .gd-campus h4, .gd-campus h5, .gd-campus h6, .gd-campus .uk-h1, .gd-campus .uk-h2, .gd-campus .uk-h3 { font-family: var(--gd-font-heading); color: var(--gd-heading); font-weight: 700; } .gd-campus a { color: var(--gd-primary); text-decoration: none; } .gd-campus a:hover { color: var(--gd-primary-hover); text-decoration: underline; } .gd-campus .uk-skip-nav, .uk-skip-nav { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 16px; background: var(--gd-primary); color: #fff; border-radius: 0 0 var(--gd-radius) 0; } .uk-skip-nav:focus { left: calc(var(--gd-rail-width) + 8px); } /* ===== Shell: rail + main ============================================== */ .gd-shell { display: block; min-height: 100vh; } .gd-rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--gd-rail-width); background: var(--gd-rail-bg); display: flex; flex-direction: column; z-index: 1030; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } .gd-rail::-webkit-scrollbar { width: 0; } .gd-rail-brand { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .gd-rail-brand img { max-width: 64px; max-height: 48px; width: auto; height: auto; } .gd-rail-brand .gd-rail-brand-text { color: #fff; font-family: var(--gd-font-display); font-weight: 800; font-size: 0.78rem; text-align: center; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; } .gd-rail-nav { flex: 1 1 auto; padding: 6px 0; } .gd-rail-foot { padding: 6px 0 14px; } /* Rail menu list (rendered by mod_menu override in rail positions) */ .gd-rail-menu { list-style: none; margin: 0; padding: 0; } .gd-rail-menu > li { margin: 0; } .gd-rail-menu > li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 4px; min-height: 68px; color: var(--gd-rail-text); font-size: 0.66rem; font-weight: 600; text-align: center; line-height: 1.15; letter-spacing: .01em; border-left: 4px solid transparent; transition: background-color .15s ease, color .15s ease; text-decoration: none; word-break: break-word; } .gd-rail-menu > li > a:hover, .gd-rail-menu > li > a:focus { background: var(--gd-rail-bg-dark); color: #fff; text-decoration: none; } .gd-rail-menu > li.uk-active > a, .gd-rail-menu > li.current > a { background: var(--gd-rail-active-bg); color: var(--gd-rail-active-text); border-left-color: var(--gd-rail-active-text); } .gd-rail-menu .gd-rail-icon { display: block; } .gd-rail-menu .gd-rail-icon svg { width: 26px; height: 26px; } .gd-rail-menu .gd-rail-label { display: block; } /* Main region offset by the rail */ .gd-main { margin-left: var(--gd-rail-width); min-height: 100vh; display: flex; flex-direction: column; background: var(--gd-muted); } /* ===== Notice banner =================================================== */ .gd-notice { padding: 18px 32px 0; } .gd-notice .gd-notice-inner { border: 1px solid var(--gd-accent); border-radius: var(--gd-radius); background: #fff; padding: 14px 20px; display: flex; gap: 14px; align-items: flex-start; } .gd-notice .gd-notice-inner::before { content: ""; flex: 0 0 auto; width: 26px; height: 26px; margin-top: 2px; background: var(--gd-accent); -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E"); mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z'/%3E%3C/svg%3E"); } .gd-notice p { margin: 0; } /* ===== Top bar ========================================================= */ .gd-topbar { display: flex; align-items: center; gap: 16px; padding: 14px 32px; min-height: 62px; background: var(--gd-panel); border-bottom: 1px solid var(--gd-border); } .gd-topbar-toggle { display: none; border: 0; background: transparent; color: var(--gd-heading); padding: 6px; cursor: pointer; } .gd-topbar-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--gd-heading); } .gd-topbar-spacer { flex: 1 1 auto; } .gd-topbar-right { display: flex; align-items: center; gap: 10px; } .gd-topbar-right .gd-module-title { display: none; } /* ===== Page grid ======================================================= */ .gd-page { flex: 1 1 auto; padding: 24px 32px 40px; } .gd-page-grid { display: flex; gap: 28px; align-items: flex-start; } .gd-coursenav { flex: 0 0 200px; position: sticky; top: 16px; background: var(--gd-panel); border: 1px solid var(--gd-border); border-radius: var(--gd-radius); padding: 10px 0; overflow: hidden; } .gd-content-col { flex: 1 1 auto; min-width: 0; } /* The column stretches to the content height so a sticky child can travel the whole scroll range. Stickiness lives on .gd-lesson-aside, not the column. */ .gd-utility { flex: 0 0 300px; align-self: stretch; } @media (max-width: 1199px) { .gd-utility { flex-basis: 260px; } } /* Content card wrapper */ main.gd-content { background: var(--gd-panel); border: 1px solid var(--gd-border); border-radius: var(--gd-radius); padding: 32px 36px; } .gd-campus main.gd-content > :first-child { margin-top: 0; } /* ===== Course-style secondary nav ===================================== */ .gd-vnav { list-style: none; margin: 0; padding: 0; } .gd-vnav li { margin: 0; } .gd-vnav > li > a { display: block; padding: 8px 18px; color: var(--gd-primary); font-weight: 600; border-left: 3px solid transparent; } .gd-vnav > li > a:hover { background: var(--gd-muted); text-decoration: none; } .gd-vnav > li.uk-active > a, .gd-vnav > li.current > a { color: var(--gd-heading); border-left-color: var(--gd-heading); font-weight: 800; } .gd-vnav .uk-nav-header { padding: 10px 18px 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: #9aa4b2; } /* ===== Utility widgets (right sidebar) ================================ */ .gd-widget { background: transparent; margin-bottom: 26px; } .gd-widget .gd-widget-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 800; color: var(--gd-heading); padding-bottom: 8px; border-bottom: 1px solid var(--gd-border); } .gd-widget .gd-widget-body { font-size: 0.92rem; } .gd-widget .gd-widget-body p:last-child { margin-bottom: 0; } .gd-widget .gd-empty { color: #9aa4b2; padding: 8px 0; } /* ===== UIkit color remaps ============================================= */ .gd-campus .uk-button-primary { background-color: var(--gd-primary); color: #fff; } .gd-campus .uk-button-primary:hover, .gd-campus .uk-button-primary:focus { background-color: var(--gd-primary-hover); color: #fff; } .gd-campus .uk-button-secondary { background-color: var(--gd-secondary); } .gd-campus .uk-button-danger { background-color: var(--gd-accent); } .gd-campus .uk-button-default { border-color: var(--gd-border); color: var(--gd-heading); background: #fff; } .gd-campus .uk-button-default:hover { border-color: var(--gd-primary); color: var(--gd-primary); } .gd-campus .uk-link, .gd-campus .uk-text-primary { color: var(--gd-primary) !important; } .gd-campus .uk-background-primary { background-color: var(--gd-primary) !important; } .gd-campus .uk-label, .gd-campus .uk-badge { background-color: var(--gd-primary); } .gd-campus .uk-input:focus, .gd-campus .uk-select:focus, .gd-campus .uk-textarea:focus { border-color: var(--gd-primary); } /* ===== Cards (dashboard course cards) ================================= */ .gd-campus .uk-card-default { border-radius: var(--gd-radius); border: 1px solid var(--gd-border); box-shadow: 0 1px 2px rgba(45, 59, 69, 0.06); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .gd-campus .uk-card-default:hover { box-shadow: 0 10px 26px rgba(45, 59, 69, 0.14); transform: translateY(-2px); } .gd-course-card .gd-course-band { height: 130px; background: var(--gd-card-accent); display: flex; align-items: center; justify-content: center; } /* ===== System messages =============================================== */ .gd-campus joomla-alert, .gd-campus .alert { display: block; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--gd-radius); border-left: 4px solid var(--gd-primary); background: var(--gd-muted); color: var(--gd-heading); } .gd-campus .alert-success { border-left-color: #16a34a; } .gd-campus .alert-danger, .gd-campus .alert-error { border-left-color: #dc2626; } .gd-campus .alert-warning { border-left-color: var(--gd-accent); } /* ===== Breadcrumbs / pagination (core Bootstrap markup) ============== */ .gd-campus ol.breadcrumb { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; font-size: 0.82rem; background: transparent; } .gd-campus .breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 8px; color: #bbb; } .gd-campus .breadcrumb a.pathway { color: var(--gd-text); } .gd-campus .breadcrumb a.pathway:hover { color: var(--gd-primary); } .gd-campus .pagination { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 20px 0 0; list-style: none; justify-content: center; } .gd-campus .pagination .page-link { display: block; padding: 6px 12px; border-radius: var(--gd-radius); color: var(--gd-text); text-decoration: none; } .gd-campus .pagination .page-link:hover { color: var(--gd-primary); background: var(--gd-muted); } .gd-campus .pagination .page-item.active .page-link { background: var(--gd-primary); color: #fff; } .gd-campus .pagination .page-item.disabled .page-link { opacity: .4; } /* ===== Footer ======================================================== */ .gd-footer { background: var(--gd-panel); border-top: 1px solid var(--gd-border); padding: 18px 32px; color: #7b8794; font-size: 0.82rem; } .gd-footer a { color: #7b8794; } .gd-footer a:hover { color: var(--gd-primary); } .gd-footer .gd-footer-grid { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; } .gd-footer .gd-footer-menu ul { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; } /* ===== Offcanvas (mobile rail) ======================================= */ .gd-campus .uk-offcanvas-bar { background: var(--gd-rail-bg); width: 260px; } .gd-campus .uk-offcanvas-bar .gd-vnav > li > a { color: #fff; border-left-color: transparent; } .gd-campus .uk-offcanvas-bar .gd-vnav > li > a:hover { background: var(--gd-rail-bg-dark); } .gd-campus .uk-offcanvas-bar .gd-vnav > li.uk-active > a { background: var(--gd-rail-bg-dark); } /* ===== Responsive ==================================================== */ @media (max-width: 1199px) { .gd-page-grid { flex-wrap: wrap; } .gd-utility { flex: 1 1 100%; position: static; order: 3; } } @media (max-width: 959px) { .gd-rail { display: none; } .gd-main { margin-left: 0; } .gd-topbar-toggle { display: inline-flex; } .gd-page { padding: 18px; } .gd-notice { padding: 14px 18px 0; } .gd-topbar { padding: 12px 18px; } .gd-coursenav { flex: 1 1 100%; position: static; order: 1; } .gd-content-col { flex: 1 1 100%; order: 2; } main.gd-content { padding: 22px 20px; } .uk-skip-nav:focus { left: 8px; } } /* ===== Back to top =================================================== */ .gd-campus .gd-backtop { position: fixed; right: 20px; bottom: 20px; z-index: 980; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--gd-secondary); color: #fff; border-radius: 50%; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } body.gd-scrolled .gd-backtop { opacity: .9; visibility: visible; } .gd-campus .gd-backtop:hover { color: #fff; opacity: 1; } /* ===== OSCampus — course listing (3-column grid of cards) ============ */ /* The listing views output cards as direct children of .osc-container; grid the container that holds our cards and let the page header span all cols. */ .gd-campus .osc-container:has(> .gd-course-card) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: stretch; } .gd-campus .osc-container:has(> .gd-course-card) > .page-header, .gd-campus .osc-container:has(> .gd-course-card) > .osc-alert-notify { grid-column: 1 / -1; } @media (max-width: 1200px) { .gd-campus .osc-container:has(> .gd-course-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .gd-campus .osc-container:has(> .gd-course-card) { grid-template-columns: 1fr; } } .gd-campus .gd-course-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--gd-radius); } .gd-campus .gd-course-card-image { display: block; } .gd-campus .gd-course-card-image img { width: 100%; height: auto; display: block; } .gd-campus .gd-course-card-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 20px; flex: 1 1 auto; } .gd-campus .gd-course-card-title { margin: 0; font-size: 1.15rem; line-height: 1.28; } /* Title colour/weight — !important beats OSCampus's #oscampus a rule. */ .gd-campus .gd-course-card-title a { color: var(--gd-heading) !important; font-weight: 800; } .gd-campus .gd-course-card-title a:hover { color: var(--gd-primary) !important; text-decoration: none; } /* start button sits at the bottom; labels come right below it */ .gd-campus .gd-course-card-start { margin-top: auto; } .gd-campus .gd-course-card-start a, .gd-campus .gd-course-card-start .osc-course-start, .gd-campus .gd-course-card-start .osc-btn, .gd-campus .gd-course-card-start button { display: block; width: 100%; text-align: center; } /* Card CTA button in theme colours (covers osc-btn and osc-btn-main states). */ .gd-campus .gd-course-card-start .osc-btn { background: #64c7ab !important; color: #fff !important; font-weight: 700; transition: background-color .15s ease; } .gd-campus .gd-course-card-start .osc-btn:hover, .gd-campus .gd-course-card-start .osc-btn:focus { background: #31c5d7 !important; color: #fff !important; } .gd-campus .gd-course-card-labels { display: flex; flex-wrap: wrap; gap: 8px 16px; } .gd-campus .osc-course-labels .osc-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--gd-text); } .gd-campus .osc-course-labels .osc-label [class*="fa-"], .gd-campus .osc-course-labels .osc-label [uk-icon] { color: var(--gd-primary); } /* Font Awesome isn't loaded on listings; hide the CTA's broken glyph. */ .gd-campus .gd-course-card-start .osc-btn [class*="fa-"] { display: none; } /* ===== OSCampus — single course (2-column: cover+info | tabs) ======== */ .gd-campus .gd-course-single .gd-course-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; } @media (max-width: 900px) { .gd-campus .gd-course-single .gd-course-grid { grid-template-columns: 1fr; } } .gd-campus .gd-course-single .gd-course-cover img { width: 100%; height: auto; border-radius: var(--gd-radius); } .gd-campus .gd-course-single .gd-course-info { margin-top: 18px; font-size: 0.92rem; } .gd-campus .gd-course-single .gd-course-info li { display: flex; gap: 12px; } .gd-campus .gd-course-single .gd-course-info li strong { flex: 0 0 96px; color: var(--gd-heading); font-weight: 700; } .gd-campus .gd-course-single .gd-course-info li span { color: var(--gd-text); min-width: 0; } /* Tab bar as a flex row (overrides OSCampus block2 widths) */ .gd-campus .gd-course-single .osc-course-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--gd-border); margin: 0 0 20px; } .gd-campus .gd-course-single .osc-course-tabs > div { width: auto; cursor: pointer; padding: 10px 18px; font-weight: 700; color: var(--gd-text); border-bottom: 3px solid transparent; margin-bottom: -1px; } .gd-campus .gd-course-single .osc-course-tabs > div:hover { color: var(--gd-primary); } .gd-campus .gd-course-single .osc-course-tabs > div:not(.osc-tab-disabled) { color: var(--gd-heading); border-bottom-color: var(--gd-primary); } /* Permanent course description (moved above the tabs; its tab was removed) */ .gd-campus .gd-course-single .gd-course-description { margin: 0 0 22px; color: var(--gd-text); line-height: 1.65; } .gd-campus .gd-course-single .gd-course-description > :first-child { margin-top: 0; } .gd-campus .gd-course-single .gd-course-description > :last-child { margin-bottom: 0; } /* ===== Force theme font (Nunito) inside OSCampus content ============== */ /* OSCampus injects its own inline font rule on .osc-container elements; override it so the whole theme uses the configured heading/body font. Icon elements (FontAwesome, uk-icon) are excluded so their glyph fonts keep working. */ .gd-campus .osc-container, .gd-campus .osc-container :is(p, h1, h2, h3, h4, h5, h6, div, li, span, label, td, input, button, textarea, select, a, strong):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not([uk-icon]) { font-family: var(--gd-font-body) !important; } /* ===== Lesson content typography ===================================== */ .gd-campus #oscampus.osc-container p, .gd-campus #oscampus.osc-container li {font-size: 20px; line-height: 35px; font-weight: 300; letter-spacing: -0.5px;} .gd-campus #oscampus.osc-container ul {margin-left: 20px;} .gd-campus #oscampus.osc-container blockquote {background: #dcf4f4; color: #006666; font-size: 16px; font-style: normal; border: 1px solid #a5c7c7; width: 100%; max-width: 900px; margin: 40px auto; padding: 15px;} .gd-campus #oscampus.osc-container .osc-lesson-title {float: none; margin: 0 0 15px; border-left: 8px solid #009999; padding: 20px; background: #f0f7f7; color: #006666;} .gd-campus #oscampus.osc-container h3 {background: #f8f9fb; padding: 20px; border-left: 3px solid #009999; color: #006666; font-weight: 600; letter-spacing: -0.5px; margin-top: 70px;} /* Lesson header: navigation sits ABOVE the title. The nav is right-aligned via flex (not the stock float), so it forms a clean block above the heading. */ .gd-campus #oscampus .osc-lesson-links { display: flex; justify-content: flex-end; margin: 0 0 14px; } .gd-campus #oscampus .osc-lesson-links .osc-btn-group { float: none; } /* ===== Lesson sidebar: progress bar + table of contents ============== */ /* Only this block is sticky: it pins to the top as the user scrolls down. */ .gd-campus .gd-lesson-aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; } .gd-campus .gd-lesson-aside .gd-lesson-progress { margin-bottom: 24px; } .gd-campus .gd-lesson-aside .gd-progress-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--gd-text); margin-bottom: 7px; } .gd-campus .gd-lesson-aside .gd-progress-meta strong { color: var(--gd-primary); font-size: 1.05rem; } .gd-campus .gd-lesson-aside .gd-progress-track { height: 8px; background: var(--gd-border); border-radius: 999px; overflow: hidden; } .gd-campus .gd-lesson-aside .gd-progress-bar { height: 100%; background: var(--gd-primary); border-radius: 999px; transition: width .4s ease; min-width: 2px; } .gd-campus .gd-lesson-toc .gd-toc-nav { margin: 0; } .gd-campus .gd-lesson-toc .gd-toc-nav > li { margin: 0; } .gd-campus .gd-lesson-toc .gd-toc-nav > li > a { display: block; padding: 5px 0; font-size: 0.9rem; color: var(--gd-text); line-height: 1.35; } .gd-campus .gd-lesson-toc .gd-toc-nav > li > a:hover { color: var(--gd-primary); text-decoration: none; } .gd-campus .gd-lesson-toc .gd-toc-nav > li.gd-toc-l3 > a { padding-left: 14px; font-size: 0.86rem; } .gd-campus .gd-lesson-toc .gd-toc-nav > li.gd-toc-l4 > a { padding-left: 28px; font-size: 0.84rem; } .gd-campus .gd-lesson-toc .gd-toc-nav > li.gd-toc-l5 > a { padding-left: 42px; font-size: 0.82rem; } /* Scrollspy: active section marker (arrow) + link state */ .gd-campus .gd-lesson-toc .gd-toc-nav { padding-left: 16px; } .gd-campus .gd-lesson-toc .gd-toc-nav > li { position: relative; } .gd-campus .gd-lesson-toc .gd-toc-nav > li > a { transition: color .15s ease; } .gd-campus .gd-lesson-toc .gd-toc-active > a { color: var(--gd-primary); font-weight: 700; } .gd-campus .gd-lesson-toc .gd-toc-active::before { content: ""; position: absolute; left: -14px; top: 0.55em; border: 5px solid transparent; border-left-color: var(--gd-primary); transition: opacity .15s ease; } /* ===== Lesson navigation buttons (theme colours) ===================== */ /* OSCampus scopes .osc-btn under the #oscampus id (higher specificity), so the colour override uses !important to win. */ .gd-campus .osc-lesson-navigation .osc-btn { background: #64c7ab !important; color: #fff !important; transition: background-color .15s ease; } .gd-campus .osc-lesson-navigation .osc-btn:hover, .gd-campus .osc-lesson-navigation .osc-btn:focus { background: #31c5d7 !important; color: #fff !important; } .gd-campus .gd-lesson-nav-bottom { margin-top: 26px; } /* ===== mod_login (UIkit form styles) ================================= */ .gd-campus .gd-login button.uk-form-icon { background: transparent; border: 0; padding: 0; cursor: pointer; color: #999; } .gd-campus .gd-login button.uk-form-icon:hover { color: var(--gd-primary); } .gd-campus .gd-login .gd-login-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; } .gd-campus .gd-login .uk-list li a { color: var(--gd-primary); } .gd-campus .gd-login .uk-list li a:hover { color: var(--gd-primary-hover); } /* Logout state (greeting + "Sair" button) */ .gd-campus .gd-logout .gd-logout-greeting { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--gd-heading); font-weight: 600; } .gd-campus .gd-logout .gd-logout-avatar { color: var(--gd-primary); flex: 0 0 auto; } .gd-campus .gd-logout .gd-logout-btn { justify-content: center; } /* ===== Top-bar heading (site title

+ breadcrumbs) =============== / .gd-campus .gd-topbar-heading { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .gd-campus .gd-topbar-sitetitle { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.2; color: var(--gd-heading); font-family: var(--gd-font-heading); } .gd-campus .gd-topbar-pagetitle { font-size: 0.95rem; color: var(--gd-text); } .gd-campus .gd-topbar-breadcrumbs { min-width: 0; } .gd-campus .gd-topbar-breadcrumbs ol.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; line-height: 1.3; } .gd-campus .gd-topbar-breadcrumbs .mod-breadcrumbs__here { color: #9aa4b2; font-weight: 600; margin-right: 4px; font-size: 0.85rem; } .gd-campus .gd-topbar-breadcrumbs li { list-style: none; display: inline-flex; align-items: center; } .gd-campus .gd-topbar-breadcrumbs .float-start { float: none; } / Small, vertically-centred chevron separator / .gd-campus .gd-topbar-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { content: ""; display: inline-block; flex: 0 0 auto; width: 5px; height: 20px; margin: 0 10px; border-top: 3px solid #c3c9d1; border-right: 3px solid #c3c9d1; transform: rotate(45deg); scale: 0.5; } .gd-campus .gd-topbar-breadcrumbs .breadcrumb-item a.pathway { color: var(--gd-text); font-weight: 600; } .gd-campus .gd-topbar-breadcrumbs .breadcrumb-item a.pathway:hover { color: var(--gd-primary); text-decoration: none; } .gd-campus .gd-topbar-breadcrumbs .breadcrumb-item.active { color: var(--gd-heading); font-weight: 800; } / "Sobre a aula" heading above the course description (#oscampus h2 forces a colour, so override it). / .gd-campus .gd-course-single .gd-course-about-title { font-size: 1.15rem; margin: 0 0 10px; color: var(--gd-heading) !important; font-weight: 800 !important; font-family: var(--gd-font-heading); } / ===== Error / offline =============================================== / .gd-error, .gd-offline { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: var(--gd-muted); } .gd-error .gd-error-code { color: var(--gd-accent); line-height: 1; font-family: var(--gd-font-display); } / ===== Figures ======================================================= */ figure {border: 1px solid var(--gd-border); background-color: var(--gd-muted); padding: 10px; width: 100%; max-width: 900px; margin: 20px auto;} figure figcaption {text-align: center; margin-bottom: 6px;}