/* ====================================================================== YMS360 Cybersecurity Training — LMS-specific CSS Layered on top of yms-site.css (vendored from yms360.com inline styles). Uses the real yms360 design tokens: --navy, --teal, --ink, --muted, etc. ====================================================================== */ :root { --success: #10B981; --danger: #EF4444; --warning: #F59E0B; --info: var(--teal); --shadow-sm: 0 1px 2px rgba(7, 17, 30, 0.06), 0 1px 3px rgba(7, 17, 30, 0.1); --shadow-md: 0 4px 12px rgba(7, 17, 30, 0.08); } /* yms-site.css fixes the header to the top and doesn't set a sticky-footer layout. Push main below the fixed header; make the footer stick on short pages. */ html, body { min-height: 100vh; } /* Paint html navy so overscroll past the bottom shows the footer color, not white */ html { background: var(--navy, #07111e); } body { overscroll-behavior-y: none; } body.body-lms { background: var(--off-white, #F8F9FB); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; } body.body-lms > main#main-content { grid-row: 1; grid-column: 1; padding-top: var(--nav-height, 72px); min-width: 0; } body.body-lms > .prefooter-cta { grid-row: 2; grid-column: 1; } body.body-lms > .site-footer { grid-row: 3; grid-column: 1; } /* Anything injected by 3rd-party scripts (Google Translate, etc.) into after the footer would otherwise become an extra grid track and extend the document height past the footer. Force any unknown direct child out of layout flow. */ body.body-lms > :not(main#main-content):not(.prefooter-cta):not(.site-footer):not(.site-header):not(.skip-nav):not(.mobile-menu-overlay):not(.mobile-menu):not(.sudo-banner):not(#google_translate_element) { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } /* Vertically center short auth / narrow sections in the remaining viewport */ body.body-lms > main#main-content > .section--narrow { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--nav-height, 72px) - 2rem); } .section--narrow .container--narrow { width: 100%; } /* ---------- Logo color swap for dark footer ---------- */ /* Header logo keeps its black M glyph (#181816); footer recolors it to white. */ .footer-brand-logo path:last-child { fill: #ffffff; } /* ---------- Header additions (layered on .site-header from yms-site.css) ---------- */ .nav-brand-suffix { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.5px; margin-left: 10px; color: var(--teal); } .nav-cta-group { display: inline-flex !important; align-items: center; gap: 12px; } .nav-user { font-size: 0.9rem; color: var(--muted); display: inline-flex; align-items: baseline; gap: 6px; } .nav-user small { font-size: 0.75rem; font-style: italic; } .signout-form { display: inline; margin: 0; padding: 0; } .signout-btn { white-space: nowrap; } /* On narrow viewports, the desktop sign-out is hidden and the hamburger mobile menu takes over */ @media (max-width: 1024px) { .nav-cta-group { display: none !important; } .nav-hamburger { display: flex !important; } } /* Mobile menu panel */ .mobile-menu { position: fixed; top: var(--nav-height, 72px); right: 0; width: min(320px, 90vw); max-height: calc(100vh - var(--nav-height, 72px)); background: var(--white); border-left: 1px solid #E2E8F0; box-shadow: 0 10px 30px rgba(7,17,30,0.12); padding: 20px; z-index: 1001; display: none; flex-direction: column; gap: 14px; overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(7, 17, 30, 0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .mobile-menu-overlay.open { opacity: 1; visibility: visible; } .mobile-menu-links { display: flex; flex-direction: column; gap: 4px; } .mobile-menu-link { display: block; padding: 12px 10px; text-decoration: none; color: var(--ink); border-radius: var(--radius-sm, 6px); font-weight: 500; } .mobile-menu-link:hover { background: var(--off-white); color: var(--teal); } .mobile-menu-cta { margin-top: 8px; padding-top: 12px; border-top: 1px solid #E2E8F0; } body.menu-open { overflow: hidden; } .sudo-banner { background: #fff7e6; border-top: 1px solid rgba(245, 158, 11, 0.25); border-bottom: 1px solid rgba(245, 158, 11, 0.25); color: #744b00; padding: 10px 24px; font-size: 0.9rem; text-align: center; } .sudo-banner .btn { vertical-align: middle; } /* ---------- Container variants ---------- */ .container--narrow { max-width: 560px; margin-left: auto; margin-right: auto; padding: 0 24px; } .container--reading { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; padding: 0 16px; } @media (min-width: 640px) { .container--reading { padding: 0 24px; } } @media (min-width: 768px) { .container--reading { max-width: 800px; } } @media (min-width: 1024px) { .container--reading { max-width: 920px; padding: 0 32px; } } @media (min-width: 1280px) { .container--reading { max-width: 1000px; } } @media (min-width: 1536px) { .container--reading { max-width: 1040px; } } .section--narrow { padding: 48px 0; } /* ---------- Buttons ---------- */ .btn-sm { padding: 8px 14px; font-size: 0.875rem; } /* ---------- Forms ---------- */ .auth-card, .card form { display: block; } form label { display: block; margin-bottom: 14px; font-size: 0.9rem; color: var(--dark-gray); } form label > span { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink); } form input[type="text"], form input[type="email"], form input[type="password"], form input[type="number"], form select, form textarea { width: 100%; max-width: 100%; padding: 10px 12px; font-size: 1rem; border: 1px solid #CBD5E1; border-radius: var(--radius-sm, 6px); background: var(--white); font-family: inherit; color: var(--ink); } form input:focus, form select:focus, form textarea:focus { outline: 2px solid var(--teal-25); border-color: var(--teal); } form label.checkbox { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; } form label.checkbox input { width: auto; margin: 0; } form button[type="submit"] { margin-top: 8px; } /* ---------- Alerts / flash ---------- */ .alert { padding: 12px 14px; border-radius: var(--radius-sm, 6px); margin: 14px 0; font-size: 0.95rem; } .alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; } .alert-info { background: var(--teal-10); border: 1px solid var(--teal-25); color: var(--teal-dark); } .alert-success { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; } .flash { padding: 10px 16px; margin: 14px auto; max-width: 1100px; border-radius: var(--radius-sm, 6px); font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; } .flash-success { background: #ECFDF5; color: #065F46; } .flash-error { background: #FEF2F2; color: #991B1B; } .flash-info { background: var(--teal-10); color: var(--teal-dark); } .flash-close { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: inherit; } /* ---------- Cards ---------- */ .card { background: var(--white); border: 1px solid #E2E8F0; border-radius: var(--radius-md, 12px); padding: 24px; box-shadow: var(--shadow-sm); } .card h3 { margin-top: 0; } .card-course { display: flex; flex-direction: column; gap: 10px; } .card-course h3 { font-size: 1.2rem; margin: 0; } .card-course h3 a { color: var(--ink); text-decoration: none; } .card-course h3 a:hover { color: var(--teal); } .card-feature h3 { font-size: 1.1rem; color: var(--navy); margin: 0 0 8px 0; } .card-cert { display: flex; flex-direction: column; gap: 10px; } .card-cert .btn { align-self: flex-start; } /* Whole-card click target — used on /admin/progress crew cards. */ .card-link { display: block; text-decoration: none; color: inherit; } .card-link:hover .card, .card-link:focus-visible .card { border-color: var(--teal); box-shadow: 0 4px 14px rgba(0,0,0,0.06); } .card-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--radius-md, 12px); } /* Mini progress bar shown on crew cards. */ .progress-mini { width: 100%; height: 6px; background: var(--light); border-radius: 999px; overflow: hidden; } .progress-mini-fill { height: 100%; background: var(--teal); transition: width 200ms ease; } .auth-card { max-width: 460px; margin: 0 auto; } /* ---------- Lesson list ---------- */ .lesson-list { list-style: none; padding: 0; margin: 24px 0 0 0; border-top: 1px solid #E2E8F0; } .lesson-list li { border-bottom: 1px solid #E2E8F0; } .lesson-list li a { display: flex; align-items: center; gap: 14px; padding: 14px 6px; text-decoration: none; color: var(--ink); } .lesson-list li a:hover { background: var(--off-white); } .lesson-list li.is-complete .lesson-number::before { content: '✓'; color: var(--green); font-weight: 700; } .lesson-number { width: 28px; height: 28px; border-radius: 50%; background: #E2E8F0; color: var(--dark-gray); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } .lesson-list li.is-complete .lesson-number { background: #D1FAE5; color: #065F46; } .lesson-title { flex: 1; font-weight: 600; } .lesson-mins { color: var(--muted); font-size: 0.85rem; } .course-meta { color: var(--dark-gray); font-size: 0.95rem; } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .badge--in_progress { background: var(--teal-10); color: var(--teal-dark); } .badge--completed { background: #D1FAE5; color: #065F46; } .badge--not_started { background: var(--light); color: var(--dark-gray); } .badge--failed { background: #FEE2E2; color: #991B1B; } .quiz-cta { margin-top: 28px; text-align: center; background: var(--off-white); } /* ---------- Lesson body ---------- */ .lesson-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink); } .lesson-body h2 { margin-top: 2em; color: var(--navy); } .lesson-body h3 { margin-top: 1.6em; color: var(--navy); } .lesson-body img { max-width: 100%; border-radius: var(--radius-sm, 6px); } .lesson-body blockquote { border-left: 4px solid var(--teal); background: var(--teal-10); padding: 12px 18px; margin: 20px 0; border-radius: var(--radius-sm, 6px); } .lesson-body code { background: var(--light); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; } .lesson-body pre { background: var(--navy); color: var(--white); padding: 14px 18px; border-radius: 8px; overflow-x: auto; } .lesson-video { position: relative; padding-top: 56.25%; margin-bottom: 24px; } .lesson-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-md, 12px); } .lesson-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #E2E8F0; } /* =========================================================================== LESSON STRUCTURED CONTENT — callouts, grids, tables, styled lists Borrowed from the earlier Triton LMS patterns, adapted for yacht crew. =========================================================================== */ .lesson-body > .lead { font-size: 1.15rem; line-height: 1.65; color: var(--dark-gray); font-weight: 500; padding-bottom: 12px; border-bottom: 1px solid #E2E8F0; margin-bottom: 28px; } .lesson-body h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2.4rem; margin-bottom: 1rem; color: var(--navy); } .lesson-body h2::before { content: ''; display: block; width: 40px; height: 3px; background: var(--teal); margin-bottom: 10px; } .lesson-body h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.8rem; margin-bottom: .7rem; color: var(--ink); } .lesson-body h4 { font-size: 1rem; font-weight: 600; margin-top: 1.2rem; margin-bottom: .5rem; color: var(--navy); } .lesson-body p { margin: 0 0 1rem; } .lesson-body ul:not(.styled-list), .lesson-body ol { margin: 0 0 1.1rem 1.4rem; } .lesson-body li { margin-bottom: .4rem; } /* ---------- INFO CARDS ---------- */ .info-card { display: flex; gap: 16px; padding: 16px 18px; background: var(--teal-10); border-left: 4px solid var(--teal); border-radius: 8px; margin: 1.3rem 0; align-items: flex-start; } .info-card .info-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; } .info-card .info-text { flex: 1; font-size: .98rem; line-height: 1.6; } .info-card .info-text > *:last-child { margin-bottom: 0; } .info-card.warning { background: #fef3f2; border-left-color: #b42318; } .info-card.warning .info-icon { color: #b42318; } .info-card.tip { background: #ecfdf5; border-left-color: #10b981; } .info-card.tip .info-icon { color: #059669; } .info-card.critical { background: #fff1f0; border-left-color: #c1121f; } .info-card.insight { background: #eef4ff; border-left-color: #3538cd; } /* ---------- CREW ROLE CALLOUTS (the Triton-context analogue) ---------- */ .crew-callout { display: flex; gap: 16px; padding: 18px 20px; border-radius: 10px; margin: 1.6rem 0; align-items: flex-start; background: #f1f5f9; border: 1px solid #cbd5e1; border-left: 5px solid var(--navy); position: relative; } .crew-callout-icon { font-size: 1.8rem; line-height: 1; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--white); border-radius: 50%; border: 2px solid var(--navy); } .crew-callout-body { flex: 1; font-size: .98rem; line-height: 1.6; } .crew-callout-body > *:last-child { margin-bottom: 0; } .crew-callout-role { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; background: var(--navy); color: var(--white); } /* Role variants */ .crew-callout.for-captain { border-left-color: #002041; background: #eef2f7; } .crew-callout.for-captain .crew-callout-icon { border-color: #002041; } .crew-callout.for-captain .crew-callout-role { background: #002041; } .crew-callout.for-engineer { border-left-color: #9a3412; background: #fff7ed; border-color: #fed7aa; } .crew-callout.for-engineer .crew-callout-icon { border-color: #9a3412; } .crew-callout.for-engineer .crew-callout-role { background: #9a3412; } .crew-callout.for-interior { border-left-color: #9f1239; background: #fff1f2; border-color: #fecdd3; } .crew-callout.for-interior .crew-callout-icon { border-color: #9f1239; } .crew-callout.for-interior .crew-callout-role { background: #9f1239; } .crew-callout.for-deck { border-left-color: #065f46; background: #ecfdf5; border-color: #a7f3d0; } .crew-callout.for-deck .crew-callout-icon { border-color: #065f46; } .crew-callout.for-deck .crew-callout-role { background: #065f46; } .crew-callout.for-purser { border-left-color: #5b21b6; background: #f5f3ff; border-color: #ddd6fe; } .crew-callout.for-purser .crew-callout-icon { border-color: #5b21b6; } .crew-callout.for-purser .crew-callout-role { background: #5b21b6; } .crew-callout.for-all { border-left-color: var(--teal); background: var(--teal-10); border-color: var(--teal-25); } .crew-callout.for-all .crew-callout-icon { border-color: var(--teal); color: var(--teal); } .crew-callout.for-all .crew-callout-role { background: var(--teal); } /* ---------- STYLED LIST (emoji-prefixed) ---------- */ .styled-list { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; } .styled-list li { padding: 8px 0 8px 36px; position: relative; border-bottom: 1px solid #f1f5f9; line-height: 1.6; } .styled-list li:last-child { border-bottom: 0; } .styled-list li[data-icon]::before { content: attr(data-icon); position: absolute; left: 0; top: 8px; font-size: 1.1rem; width: 28px; text-align: center; } /* ---------- COMPONENT GRID (parallel concept cards) ---------- */ .component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1.4rem 0; } .component-card { background: var(--white); border: 1px solid #E2E8F0; border-radius: 10px; padding: 16px 18px; } .component-card .component-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 10px; } .component-card h4 { margin: 0 0 6px; color: var(--navy); font-size: 1rem; } .component-card p { margin: 0; font-size: .9rem; color: var(--dark-gray); line-height: 1.5; } /* ---------- DATA TABLE (comparisons) ---------- */ .lesson-body .data-table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .95rem; background: var(--white); border: 1px solid #E2E8F0; border-radius: 8px; overflow: hidden; } .lesson-body .data-table th, .lesson-body .data-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #E2E8F0; vertical-align: top; } .lesson-body .data-table th { background: var(--off-white); font-weight: 600; color: var(--navy); font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; } .lesson-body .data-table tr:last-child td { border-bottom: 0; } /* ---------- KEY TAKEAWAYS / TL;DR BOX ---------- */ .takeaway-box { background: linear-gradient(180deg, var(--teal-10) 0%, #fafbfc 100%); border: 1px solid var(--teal-25); border-radius: 12px; padding: 20px 22px; margin: 2rem 0 1.5rem; } .takeaway-box h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--navy); display: flex; align-items: center; gap: 8px; } .takeaway-box h3::before { content: '🎯'; font-size: 1.2rem; } .takeaway-box ul { margin: 0 0 0 1.2rem; } .takeaway-box li { margin-bottom: 6px; } /* ---------- Quiz ---------- */ .quiz-form .quiz-q { border: 1px solid #E2E8F0; border-radius: var(--radius-md, 12px); padding: 20px 22px; margin-bottom: 16px; background: var(--white); } .quiz-form .quiz-q::after { content: ''; display: block; clear: both; } .quiz-form legend { float: left; width: 100%; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 14px; line-height: 1.4; } .quiz-q-num { color: var(--teal); margin-right: 6px; } .quiz-option { display: flex; gap: 10px; padding: 10px 6px; cursor: pointer; border-radius: var(--radius-sm, 6px); } .quiz-option:hover { background: var(--off-white); } .quiz-option input { margin-top: 3px; } .quiz-actions { display: flex; gap: 12px; margin-top: 24px; } .quiz-feedback { background: transparent; padding: 0; border: 0; margin-top: 28px; } .quiz-feedback h3 { margin: 0 0 16px; font-size: 1.05rem; color: var(--navy); } /* Per-question result cards on the quiz-result page. */ .quiz-q-card { margin-bottom: 16px; padding: 16px 18px; border-left: 4px solid #E2E8F0; } .quiz-q-card.is-correct { border-left-color: var(--green, #10B981); background: #F0FDF4; } .quiz-q-card.is-wrong { border-left-color: var(--red, #EF4444); background: #FEF2F2; } .quiz-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .quiz-q-card .quiz-q-num { font-weight: 700; color: var(--dark-gray); font-size: 0.85rem; letter-spacing: 0.5px; margin-right: 0; } .quiz-q-prompt { font-weight: 600; margin: 0 0 12px; color: var(--ink); } .quiz-q-answers { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 0.95rem; } .quiz-q-answers dt { font-weight: 600; color: var(--dark-gray); } .quiz-q-answers dd { margin: 0; color: var(--ink); } /* Status pills, sized to sit inline with question header. */ .badge-correct { background: #D1FAE5; color: #065F46; } .badge-wrong { background: #FEE2E2; color: #991B1B; } /* Review-focus banner spacing on lesson page. */ .review-focus { margin: 0 0 28px; } /* ---------- Progress bar ---------- */ .progress-bar { height: 8px; background: var(--light); border-radius: 999px; overflow: hidden; margin: 8px 0; } .progress-bar-fill { height: 100%; background: var(--teal); border-radius: 999px; transition: width 200ms ease; } .card-meta { font-size: 0.85rem; color: var(--muted); margin: 0; } /* ---------- Certificates ---------- */ .cert-code { font-family: "JetBrains Mono", "Courier New", monospace; font-size: 0.95rem; color: var(--teal); letter-spacing: 0.5px; } .cert-verify-card { margin-top: 18px; } .disclaimer { color: var(--muted); font-size: 0.88rem; margin-top: 24px; } .verify-form { max-width: 460px; margin: 24px 0; } /* ---------- Dashboard ---------- */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; } /* ---------- Admin / Super admin ---------- */ .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; } @media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } } .data-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--white); border: 1px solid #E2E8F0; border-radius: var(--radius-md, 12px); overflow: hidden; } .data-table th, .data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #E2E8F0; } .data-table th { background: var(--off-white); color: var(--dark-gray); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; } .data-table tr:last-child td { border-bottom: 0; } .invite-list { list-style: none; padding: 0; margin: 0; } .invite-list li { padding: 8px 0; border-bottom: 1px solid #E2E8F0; } .stat { font-size: 2.2rem; font-weight: 700; color: var(--navy); margin: 8px 0 12px 0; } .muted { color: var(--muted); } .backup-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .backup-codes code { background: var(--light); padding: 6px 10px; border-radius: 4px; font-size: 1rem; letter-spacing: 2px; } .mfa-qr { text-align: center; margin: 20px 0; } .mfa-qr img { border: 1px solid #E2E8F0; border-radius: var(--radius-sm, 6px); padding: 8px; background: var(--white); } .mfa-secret { margin-top: 14px; color: var(--dark-gray); font-size: 0.85rem; } .mfa-secret code { background: var(--light); padding: 6px 10px; border-radius: 4px; letter-spacing: 2px; } /* ---------- Hero padding for our centered one-column hero ---------- */ /* yms-site.css only sets min-height for .hero.hero--home or at ≤1024px breakpoints. Our cybersecurity hero uses plain .hero; give it a tasteful desktop padding + a subtle teal gradient background to echo the marketing site's cue palette. */ .hero:not(.hero--home) { padding: 7rem 0 4rem; background: linear-gradient(180deg, var(--teal-10) 0%, var(--off-white) 100%); } .hero:not(.hero--home) .hero-content h1 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 900; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .hero:not(.hero--home) .hero-content .lead { color: var(--dark-gray); font-size: 1.1rem; margin-bottom: 0; } .hero:not(.hero--home) .hero-content.text-center .eyebrow { color: var(--teal); margin-bottom: 1rem; } /* ---------- Skip nav (accessibility) ---------- */ .skip-nav { position: absolute; left: -9999px; top: 0; padding: 10px 14px; background: var(--navy); color: var(--white); text-decoration: none; z-index: 1000; } .skip-nav:focus { left: 0; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .nav-brand-suffix { display: none; } .hero--lms h1 { font-size: 2rem; } .lesson-nav { flex-direction: column; gap: 12px; align-items: stretch; } .lesson-nav .btn { width: 100%; } .backup-codes { grid-template-columns: 1fr; } } /* =========================================================================== APP SHELL — authenticated users get this layout (sidebar + topbar + main) Unauthenticated marketing layout uses body.body-lms elsewhere. =========================================================================== */ :root { --app-sidebar-w: 260px; --app-topbar-h: 60px; --app-sidebar-bg: #1d3a52; --app-sidebar-bg-2: #162e41; --app-sidebar-ink: #f1f5f9; --app-sidebar-ink-muted: rgba(241, 245, 249, 0.65); --app-sidebar-item-hover: rgba(255, 255, 255, 0.06); --app-sidebar-item-active: #596e83; --app-topbar-bg: #ffffff; --app-topbar-border: #e2e8f0; } body.body-app { margin: 0; padding: 0; background: #f4f6f9; color: var(--ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; min-height: 100vh; display: grid; grid-template-columns: var(--app-sidebar-w) 1fr; grid-template-rows: var(--app-topbar-h) 1fr; } /* yms-site.css ships .btn-outline as white-on-transparent (built for the navy marketing hero). Inside the authed app shell the background is light, so re-tint to ink + a visible border. Matches the existing .hero .btn-outline override pattern. */ body.body-app .btn-outline { color: var(--ink); border-color: rgba(7, 17, 30, 0.2); } body.body-app .btn-outline:hover { background: rgba(7, 17, 30, 0.04); border-color: rgba(7, 17, 30, 0.35); color: var(--ink); } /* ---------- SIDEBAR ---------- */ .app-sidebar { grid-row: 1 / 3; grid-column: 1; background: linear-gradient(180deg, var(--app-sidebar-bg) 0%, var(--app-sidebar-bg-2) 100%); color: var(--app-sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 50; } .app-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; min-height: var(--app-topbar-h); border-bottom: 1px solid rgba(255,255,255,0.08); } .app-sidebar-logo { display: flex; align-items: center; gap: 12px; color: var(--app-sidebar-ink); text-decoration: none; } .app-sidebar-logo-mark { width: 34px; height: 34px; background: rgba(20,108,243,0.2); color: #7aaed6; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .app-sidebar-wordmark { display: flex; flex-direction: column; line-height: 1.1; } .app-sidebar-title { font-size: 1rem; font-weight: 600; } .app-sidebar-sub { font-size: 0.72rem; color: var(--app-sidebar-ink-muted); text-transform: uppercase; letter-spacing: 1px; } .app-sidebar-collapse { background: transparent; border: 0; color: var(--app-sidebar-ink-muted); cursor: pointer; padding: 4px; border-radius: 4px; } .app-sidebar-collapse:hover { background: var(--app-sidebar-item-hover); color: var(--app-sidebar-ink); } .app-sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; } .app-sidebar-nav::-webkit-scrollbar { width: 6px; } .app-sidebar-nav::-webkit-scrollbar-track { background: transparent; } .app-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; } .app-sidebar-nav ul { list-style: none; margin: 0; padding: 0; } .app-nav-item { margin: 1px 0; } .app-nav-link { display: flex; align-items: center; gap: 14px; padding: 10px 18px; width: 100%; text-align: left; background: transparent; border: 0; color: var(--app-sidebar-ink); text-decoration: none; font-size: 0.92rem; font-family: inherit; cursor: pointer; transition: background 0.1s ease; border-left: 3px solid transparent; } .app-nav-link:hover { background: var(--app-sidebar-item-hover); } .app-nav-item.is-active .app-nav-link { background: var(--app-sidebar-item-active); border-left-color: var(--teal, #146cf3); font-weight: 500; } .app-nav-link.app-nav-link, /* beat default button styles */ .app-nav-link { outline: none; } .app-nav-link:focus-visible { outline: 2px solid var(--teal, #146cf3); outline-offset: -2px; } .app-nav-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: currentColor; } .app-nav-icon svg, .app-nav-icon img { width: 100%; height: 100%; display: block; } .app-nav-label { flex: 1; } .app-nav-lock { color: var(--app-sidebar-ink-muted); opacity: 0.6; display: inline-flex; } .app-nav-item.is-locked .app-nav-link { color: var(--app-sidebar-ink-muted); cursor: help; } .app-nav-item.is-locked .app-nav-link:hover { background: rgba(255,255,255,0.04); color: var(--app-sidebar-ink); } .app-nav-item.is-locked .app-nav-link:hover .app-nav-lock { opacity: 1; color: #fde68a; } .app-sidebar-footer { padding: 12px 18px; font-size: 0.72rem; color: var(--app-sidebar-ink-muted); border-top: 1px solid rgba(255,255,255,0.08); line-height: 1.4; } /* ---------- TOPBAR ---------- */ .app-topbar { grid-row: 1; grid-column: 2; background: var(--app-topbar-bg); border-bottom: 1px solid var(--app-topbar-border); display: flex; align-items: center; padding: 0 20px; gap: 12px; position: sticky; top: 0; z-index: 40; } .app-topbar-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--dark-gray, #334155); cursor: pointer; text-decoration: none; } .app-topbar-btn:hover { background: var(--off-white, #f8f9fb); color: var(--teal, #146cf3); } .app-topbar-spacer { flex: 1; } .app-topbar-actions { display: flex; align-items: center; gap: 6px; } /* ---------- Translate widget ---------- */ .app-translate { position: relative; } .app-translate-btn.is-active { background: var(--teal-10); color: var(--teal); } .app-translate-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 280px; max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 10px 30px rgba(7,17,30,0.12); padding: 12px 0 6px; display: none; z-index: 100; } .app-translate-menu.open { display: block; } .app-translate-header { margin: 0 14px 4px; font-weight: 600; color: var(--navy); font-size: 0.95rem; } .app-translate-help { margin: 0 14px 10px; color: var(--muted); font-size: 0.8rem; line-height: 1.4; } .app-translate-langs { list-style: none; margin: 0; padding: 0; } .app-translate-langs li { margin: 0; } .app-translate-lang { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 8px 14px; background: transparent; border: 0; color: var(--ink); font-size: 0.9rem; font-family: inherit; cursor: pointer; } .app-translate-lang:hover { background: var(--off-white); color: var(--teal); } .app-translate-lang.is-active { background: var(--teal-10); color: var(--teal); font-weight: 600; } .app-translate-flag { font-size: 1.1rem; line-height: 1; } /* Hide Google Translate's default banner + tooltips — our UI is the only control surface */ .skiptranslate, iframe.skiptranslate, .goog-te-banner-frame { display: none !important; visibility: hidden !important; } body { top: 0 !important; position: static !important; } .goog-te-gadget, .goog-logo-link { display: none !important; } .goog-tooltip, .goog-tooltip * { display: none !important; } .goog-text-highlight { background: transparent !important; box-shadow: none !important; } font[style*="background-color"] { background: transparent !important; } .app-topbar-user { position: relative; } .app-topbar-user-btn { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; background: transparent; border: 0; border-radius: 30px; color: var(--ink); cursor: pointer; font-family: inherit; font-size: 0.9rem; } .app-topbar-user-btn:hover { background: var(--off-white, #f8f9fb); } .app-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--teal, #146cf3); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; flex-shrink: 0; } .app-user-name { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .app-user-name small { font-size: 0.68rem; color: var(--muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.5px; } .app-user-caret { opacity: 0.5; } .app-topbar-user-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: #fff; border: 1px solid var(--app-topbar-border); border-radius: 8px; box-shadow: 0 10px 30px rgba(7,17,30,0.12); padding: 6px 0; display: none; z-index: 100; } .app-topbar-user-menu.open { display: block; } .app-user-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: transparent; border: 0; width: 100%; text-align: left; color: var(--ink); text-decoration: none; font-family: inherit; font-size: 0.9rem; cursor: pointer; } .app-user-menu-item:hover { background: var(--off-white, #f8f9fb); color: var(--teal, #146cf3); } .app-user-menu-signout { margin: 0; } .app-user-menu-divider { height: 1px; background: var(--app-topbar-border); margin: 4px 0; } /* ---------- MAIN ---------- */ .app-main { grid-row: 2; grid-column: 2; padding: 24px 28px 40px; overflow-y: auto; min-height: calc(100vh - var(--app-topbar-h)); } /* ---------- SUDO BANNER ---------- */ .app-sudo-banner { grid-row: 2; grid-column: 2; background: #fff7e6; border-bottom: 1px solid rgba(245,158,11,0.35); color: #744b00; padding: 10px 20px; font-size: 0.9rem; } /* ---------- LOCKED MODAL ---------- */ .app-locked-modal { position: fixed; inset: 0; background: rgba(7,17,30,0.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .app-locked-modal.open { display: flex; } .app-locked-modal-card { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 32px 28px 24px; text-align: center; box-shadow: 0 20px 50px rgba(7,17,30,0.25); } .app-locked-modal-icon { width: 64px; height: 64px; margin: 0 auto 16px; background: var(--teal-10, rgba(20,108,243,0.1)); color: var(--teal, #146cf3); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .app-locked-modal h3 { margin: 0 0 10px; color: var(--navy, #07111e); font-size: 1.3rem; } .app-locked-modal p { color: var(--dark-gray, #334155); margin: 0 0 24px; line-height: 1.5; } .app-locked-modal-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; } .app-locked-modal-actions .btn { min-width: 200px; } /* ---------- SIDEBAR OVERLAY (mobile) ---------- */ .app-sidebar-overlay { position: fixed; inset: 0; background: rgba(7,17,30,0.5); z-index: 49; display: none; } .app-sidebar-overlay.open { display: block; } /* ---------- Responsive app shell ---------- */ @media (max-width: 900px) { body.body-app { grid-template-columns: 1fr; grid-template-rows: var(--app-topbar-h) 1fr; } .app-sidebar { grid-row: 1 / 3; grid-column: 1; position: fixed; top: 0; left: 0; width: 280px; transform: translateX(-100%); transition: transform 0.22s ease; } .app-sidebar.open { transform: translateX(0); } .app-topbar { grid-row: 1; grid-column: 1; } .app-main { grid-row: 2; grid-column: 1; padding: 16px; } .app-user-name { display: none; } } @media (min-width: 901px) { .app-topbar-menu { display: none; } }