/* GENERATED FILE - do not edit directly. Edit the partials in css/custom/ and run devops/build-custom-assets.ps1. Last built: 2026-08-16 04:33:16 UTC. */ .body-sign .card-sign .card-title-sign .title { background-color: var(--orange) !important; color: white !important; } .body-sign .card-sign .card-body { border-top-color: var(--orange) !important; } /* Select2 optgroup headings — mirror the .text-orange branding utility. The project's .v3 .text-orange rule is scoped to .v3, but Select2 portals its dropdown to (outside .v3) so the rule never reaches the headings. Hardcode the orange here for the same reason — CSS variables declared on .v3 don't resolve from the body-level dropdown. */ .select2-results__group { color: #f95602 !important; } /* Toggle Switch (BS4 compatible) */ .toggle-switch input[type="checkbox"] { opacity: 0; width: 0; height: 0; position: absolute; } .toggle-switch label { display: inline-flex; align-items: center; cursor: pointer; margin-bottom: 0; gap: 10px; } .toggle-track { display: inline-block; width: 40px; height: 22px; background-color: #ccc; border-radius: 34px; position: relative; transition: background-color 0.2s; flex-shrink: 0; } .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.2s; } .toggle-switch input[type="checkbox"]:checked + label .toggle-track { background-color: #0088cc; } .toggle-switch input[type="checkbox"]:checked + label .toggle-track::after { transform: translateX(18px); } /* Board Drive inline edit inputs */ .upload-field-edit input.form-control { background: rgba(255, 255, 255, 0.5); border: none; border-bottom: 1px solid #aaa; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; } .upload-field-edit input.form-control:focus { background: rgba(255, 255, 255, 0.7); border-bottom-color: #0088cc; box-shadow: none; outline: none; } #upload-name-input { font-family: var(--font-montserrat, 'Montserrat', sans-serif); font-size: 20.8px; font-weight: 700; color: rgb(36, 36, 36); height: auto; } #upload-description-input { font-size: 1rem; color: #6c757d; height: auto; } .table-hover.table-bordered tbody tr:hover td, .table-hover.table-bordered tbody tr:hover th { background-color: var(--light-orange); transition: 0.3s; } .log li { border-bottom: solid 1px #ecebeb; padding: 10px; content: ""; clear: both; display: table; width: 100%; } .log .icon i { font-size: 20px; color: #b7b5b5; } .log li:hover { background-color: #ecebeb; transition: 0.3s; } .log li div { float: left; } .log .date { margin: 0 15px; color: #F97702; } .log .message { margin-left: 15px; } .opacity-25{opacity: 0.25;} .opacity-50 {opacity: 0.5;} .opacity-75 {opacity: 0.75;} .ws-2 li{ width: 50%;} .ws-3 li { width: 33.3%;} .ws-4 li { width: 25%;} .ws-5 li { width: 20%;} .ws-6 li { width: 16.66%;} .ws-7 li { width: 14%;} .ws-8 li {width: 12.5%;} .ws-9 li {width: 11%;} .progress-label small {line-height: 14px;} @media print{ .pagebreak{ clear:both; page-break-after:always; } } th.sortable { cursor: pointer; } ul.subTaskList .btn-group .btn-default.active.Completed { background-color: #47a447; border-color: #47a477 #47a447 #388038; color: #ffffff; } ul.subTaskList .btn-group btn-default.active.Pending { background-color: #FD5400; color: #fff; border: #FD5400; } html .wizard-progress .wizard-steps#launchTimeline li.completed a span { background-color: #47a447; border-color: #47a447; } /* Launch Timeline */ .launchTimeline h4 { display: block; color: #000; font-size: 24px; font-weight: 600; border-bottom: solid 1px #e2e2e2 !important; line-height: 45px; margin-top: 0px; } .launchTimeline .release-date { color: #999; font-size: 0.9em; } .launchTimeline .label { display: inline-block; min-width: 100px; } .launchTimeline .subTaskList li a { color: #777 } .launchTimeline .subTaskList li a:hover { color: #0088cc !important; } .launchTimeline .text-answer { color: #bbbebf !important; font-size: 1.2em !important; } /* Add here all your CSS customizations */ .control-radio label {margin-right:15px !important;} .page-header .help-icon i { vertical-align: middle !important; margin-right:10px; } .hide{display:none;} .video-thumbnail { position: relative; display: inline-block; cursor: pointer; border-bottom: solid #fff 2px; } .video-thumbnail:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); content: "\f144"; font-family: "Font Awesome 5 Free"; color: #fff; opacity: .4; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); } .video-thumbnail:hover:before { color: #eee; opacity: .9 } .video-thumbnail + .card-body { border-top: solid 2px #FD5400; border-radius: 0 0 5px 5px; } .col-md-12 .video-thumbnail:before { font-size: 105px; } .col-md-6 .video-thumbnail:before { font-size: 35px; } .col-md-4 .video-thumbnail:before { font-size: 50px; } .col-md-3 .video-thumbnail:before { font-size: 35px; } .media-gallery .mg-files .thumbnail { border-radius: 5px 5px 0 0 !important; margin-bottom: 0px !important; } .file-footer { border: solid 1px #e2e2e2; border-top: 0px; } .mg-files .file-icon { width: 100%px; height: 175px; text-align: center !important; } .mg-files .file-icon i { position: relative; top: 50%; height: 100px; margin-top: -50px; } .mg-files a label { color: #fff !important; } html.fixed .content-with-menu-has-toolbar .inner-body { border-top-width: 113px; } .mfp-document .mfp-content { width: 95%; height: 95%; max-width: none; } .mfp-document .mfp-close { color: #fff; font-size: 40px; } iframe.full-Window-Embed { position: absolute; background: #000; border: none; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 90vh; } iframe.action-plan-embed { height: calc(100vh - 110px) !important; } .btn-group .btn-default.active { background-color: #FD5400; color: #fff; border: #FD5400; box-shadow: inset 0 0 5px 5px; } .timeline { width: 100%; } .notifications > li .notification-icon .badge { background: #FD5400; } #programSwitcher #mieActiveProgramSearchUL li, #programSwitcher #miePotentialProgramSearchUL li { border-bottom: 1px dotted #dddada; height: 50px; line-height: 50px; padding: 0 10px; position: relative; font-size: 16px; font-size: 1rem; } #programSwitcher #mieActiveProgramSearchUL li a.heading, #programSwitcher #miePotentialProgramSearchUL li a.heading { font-weight: 600; color: #212529; cursor: default; text-decoration: none; } html body .nav-tabs li.active .nav-link{ border-top-color: #0088cc !important; color: #0088cc !important; } .page-header .sidebar-right-toggle { width: 70px !important; } /* ------------------------------------------------------------------ */ /* Flush card panel - the CEO Plus card standard (docs/design/cards.md) */ /* ------------------------------------------------------------------ */ /* One class instead of "mb-0 rounded-0" on the card + "rounded-0" on the body (+ "mt-0" on followers): square corners, no bottom margin, and adjacent flush cards butt together into one connected panel. Works on an alert too (its header/body child rules simply don't match). */ html .v3 .card-flush { border-radius: 0 !important; margin-bottom: 0 !important; } html .v3 .card-flush > .card-header, html .v3 .card-flush > .card-body { border-radius: 0 !important; } html .v3 .card-flush + .card-flush { margin-top: 0 !important; } /* ------------------------------------------------------------------ */ /* Brand progress bar - light-orange fill on a light-gray track */ /* ------------------------------------------------------------------ */ html .v3 .progress-brand { background-color: #e9ecef !important; } html .v3 .progress-brand .progress-bar { background-color: var(--light-orange) !important; } /* ------------------------------------------------------------------ */ /* Region footprint map - usable OUTSIDE a .region-dashboard wrapper */ /* ------------------------------------------------------------------ */ /* ProgramFootprintMap / ProgramContactMap render a `.region-map` div; the sizing lived under `.region-dashboard` (130-region-dashboard.css). Generalize it so the reusable map works anywhere (e.g. the Program Launch "Launch Tasks" page). When a `.region-dashboard` ancestor IS present its more-specific rules win with the same values - no conflict. */ html .v3 .region-map { width: 100%; height: 460px; } html .v3 .region-map img { max-width: none !important; /* the theme caps img width and tears the map tiles apart */ } html .v3 .region-map .region-map-info-logo { display: block; max-width: 150px !important; height: auto; } html .v3 .region-map .region-map-school { font-family: var(--font-montserrat); font-weight: 600; font-size: 13px; color: var(--off-black); white-space: nowrap; } /* Extranet header (App_Data/Razor/ExtraNet/Layout/Header.cshtml) mobile tweaks. Overrides the theme's .userbox so the user box sits compactly on the right on phones. Loaded after theme.css (custom partials always do), so plain .userbox wins inside the media query. */ @media only screen and (max-width: 767px) { .userbox { float: right; margin: 18px 0 0 12px; position: relative; width: 147px; } /* The theme HIDES the header dividers on mobile (theme.css ~3936: display:none). Show them again so they create the correct spacing between the Ask Craig button and the user box. Loaded after theme.css, so this wins. */ .header .search, .header .separator { display: inline-block; } /* ...but hide the FIRST separator (the one before the Ask Craig button) - it just clutters the left edge on mobile. */ .header .separator:first-child { display: none; } /* Space the Ask Craig button off the left edge on mobile. */ .craig-launch-btn { margin-left: 20px; } } /* Application Styling */ .thin-bar { height: 5px !important; margin: 4px 0; } .thin-bar span.progress-bar-tooltip::after { right: 6px !important; left: auto; } blockquote.student { border-left: 5px solid #55b776; } blockquote.school-contact { border-left: 5px solid #868380; } input.ratingSlider { width: 90%; margin-right: 7px; } @media only screen and (max-width: 768px) { div.featured-box-secundary div.box-content { padding: 15px !important; } input.ratingSlider { width: 81%; } } .btn-primary:active, .pagination > .active > a:active, .btn-primary:focus, .pagination > .active > a:focus { border-color: #0077b3 !important; background-color: #0077b3 !important; } /*Progress Bar Styling*/ .progressbar { margin: 0; padding: 0; counter-reset: step; min-height: 95px; } .progressbar li { list-style-type: none; width: 16.66%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d; padding: 0 5px; } .progressbar.ref-app li { width: 33% !important; } @media (max-width: 768px) { .progressbar li { visibility: hidden; width: 0; padding: 0px !important; } .progressbar.ref-app li { visibility: visible; width: 33% !important; } .progressbar li.active, .progressbar li:first-child, .progressbar li:last-child { visibility: visible; width: 33%; } } .progressbar li:before { width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 27px; border: 2px solid #7d7d7d; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; background-color: white; } .progressbar li:after { width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 15px; left: -50%; z-index: -1; } .progressbar li:first-child:after { content: none; } .progressbar li.active, .progressbar li.completed, .progressbar li.completed a { color: green; } .progressbar li.active:before, .progressbar li.completed:before { border-color: #55b776; } .progressbar li.active + li:after, .progressbar li.completed + li:after { background-color: #55b776; } .progressbar li.completed:before { background-color: #55b776; color: #fff; } .progress-bar.reference { background-color: #ccc !important; } .progress-bar.schoolref { background-color: #868380 !important; } .progress-bar.student { background-color: #55b776 !important; } .progress-bars .progress { background-color: #FAFAFA !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10) inset; } /* Full Screen Modal */ #programSwitcher{ padding: 0px !important} .modal-dialog-full-width { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 10px !important; max-width:none !important; } .modal-content-full-width { height: auto !important; min-height: 100% !important; border-radius: 0 !important; background-color: #fff !important } .modal-header-full-width { border-bottom: 1px solid #9ea2a2 !important; } .modal-footer-full-width { border-top: 1px solid #9ea2a2 !important; } /* printable application css */ body.print .print-container{ position: relative; width: 760px; margin: 0 auto; padding: 0; } @media print { body.print .no-print{ display:none; } } body.print { background-color: #fff; } .print-container [class*="col-md"] { float: left; } body.print .pagebreak { page-break-after: always; margin-top: 30px; } /* Launch Timeline */ .launchTimeline h4 { display: block; color: #000; font-size: 24px; font-weight: 600; border-bottom: solid 1px #e2e2e2 !important; line-height:45px; margin-top:0px; } .launchTimeline .release-date { color: #999; font-size: 0.9em; } .launchTimeline .label { display: inline-block; min-width: 100px; } .launchTimeline .subTaskList li { border-bottom: 1px solid #f7f7f7; min-height: 50px; line-height: 50px; padding: 0px; position: relative; font-size: 16px; font-size: 1rem; } .launchTimeline .subTaskList li a {color:#777} .launchTimeline .subTaskList li a:hover {color:#0088cc !important;} /* Split-button dropdown menus in the doc list inherit the 50px line-height and 1rem size from `.subTaskList li` above, which stretches each item tall. Reset to normal menu metrics so Edit/Archive read like a standard dropdown. */ .launchTimeline .subTaskList .dropdown-menu .dropdown-item { line-height: 1.5; font-size: 0.875rem; padding: 0.35rem 1.25rem; min-height: 0; color: #333; } .badge-orange{background-color:#FD5400 !important; color:#fff;} .campaignList li{ border-bottom:solid .5px #e2e2e2; padding:30px 30px 20px 30px; transition: 0.4s; } .campaignList li:hover{ background:#f6f6f6; } .campaignList .campaignDetails h5{ font-size:20px; color:#0088cc !important; margin-top:0px } .campaignList .campaignDetails p { margin:0px } .campaignList .campaignMetrics .amount{ font-size:20px; font-weight:600 !important;; } .fileupload .uneditable-input { height: 38px !important; } .large-search{padding:0 30px;} .large-search input{height:55px;font-size:20px !important;} .large-search button{padding:0 30px;} .changelog .badge-primary { padding: 4px 8px; } .widget-summary.email-sent-widget .summary-icon { width: 50px; height: 50px; line-height: 50px; font-size: 27.2px; font-size: 1.7rem; } .widget-summary.email-sent-widget .summary { margin-top: 0px; min-height: 47px; } .widget-summary.email-sent-widget .title { font-size: 1rem; } .widget-summary.email-sent-widget .amount { font-size: 1.5rem; } /* Tables - Actions */ .table .actions-hover { vertical-align: middle; } .table .actions-hover .dropdown i { display: inline-block; margin-right: 5px; color: #666; } .table .actions-hover .dropdown i:last-child { margin-right: 0; } .table .actions-hover .dropdown i:hover { color: #333; } .table .actions-hover .dropdown i { opacity: 0; } .table tr:hover .actions-hover .dropdown i { opacity: 1; } .table .actions-fade .dropdown i { -webkit-transition: all .2s linear; transition: all .2s linear; } .invoice .invoice-items #qnty { width: 8%; } .invoice .invoice-items #editIcons{ width:10%; } .invoice .invoice-items #cell-price{ width:15%; } /* Support Center editor — fullscreen toggle */ .sc-doc-editor-card { transition: all 0.3s ease; } .sc-doc-editor-card.fullscreen { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 100%; overflow: auto; } .sc-doc-editor-card .expandfullscreenicon, .sc-doc-editor-card .closefullscreenicon { cursor: pointer; } .sc-doc-editor-card.fullscreen .tox-tinymce { height: calc(100dvh - 150px) !important; transition: all 0.3s ease; } /* Board Meeting section cards — fullscreen toggle (parallel to Support Center) */ .board-section-card { transition: all 0.3s ease; } .board-section-card.fullscreen { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 100%; overflow: auto; margin-top: 0px; } .board-section-card .expandfullscreenicon, .board-section-card .closefullscreenicon { cursor: pointer; } /* Fullscreen TinyMCE height is measured per-card by sizeBoardSectionEditor() in custom.js — it sums header + content-above-notes + padding + button-row so the editor fits exactly without relying on a fixed calc() offset that would drift the moment something above the notes changes height (e.g. Old Business prior-meeting block, Adjournment time row). */ .board-section-card.fullscreen .tox-tinymce { transition: all 0.3s ease; } .board-section-card .board-section-toggle { cursor: pointer; } /* Notes wrapper inside each parliamentary card — top border separates the notes area from the checkpoints / time / prior-pull blocks above. */ .board-meeting-notes { border-top: 1px solid #e2e2e2; } /* Inner notes container — fills its parent .row so the TinyMCE editor and display alert can expand to the full card width. */ .board-section-notes { width: 100% !important; } /* Soften list text across the whole parliamentary card (saved notes, prior meeting follow-ups, any other rich-text content) so bulleted/numbered items match the muted body copy color used elsewhere on the page. */ .board-section-card ul, .board-section-card li { color: #777; } /* Orange outline button variant — Bootstrap's btn-outline-* doesn't ship one for our brand orange. Used by the Board Meeting "Add Notes" buttons. The `html .v3` selector matches the existing extranet theme scoping so this wins over any base button color rules. */ html .v3 .btn-outline-orange { border-color: var(--orange) !important; color: var(--orange) !important; } /* Board Drive document preview — iframe inside the shared full-screen modal fills the modal body. Height accounts for the modal header only (the footer was removed so the preview can use as much vertical space as possible); the X button in the header still provides a close affordance, and Escape dismisses the modal. */ .board-doc-preview-frame { width: 100%; height: calc(100dvh - 80px); border: 0; display: block; } /* Learn More question-mark icon on every card header — pointer cursor since it triggers the shared Bootstrap modal. */ .board-section-learnmore { cursor: pointer; } /* ============================================================================ Support Center document edit — Videos section Vimeo video cards under the document edit page (sibling to Attachments). ============================================================================ */ .sc-doc-video-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; overflow: hidden; transition: border-color .12s ease, box-shadow .12s ease; } .sc-doc-video-card:hover { border-color: #cbd5e0; box-shadow: 0 2px 6px rgba(0,0,0,.06); } .sc-doc-video-thumb { display: block; position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #1a202c; overflow: hidden; text-decoration: none; border: 0; padding-left: 0; padding-right: 0; cursor: pointer; } .sc-doc-video-thumb:focus { outline: 2px solid #2c5282; outline-offset: 2px; } .sc-doc-video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background-color .12s ease, transform .12s ease; pointer-events: none; } .sc-doc-video-thumb:hover .sc-doc-video-play-icon { background: rgba(44, 82, 130, 0.85); transform: translate(-50%, -50%) scale(1.08); } .sc-doc-video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sc-doc-video-thumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #4b5563; font-size: 36px; background: linear-gradient(135deg, #1f2937 0%, #111827 100%); } .sc-doc-video-thumb-fallback i { color: #9ca3af; } .sc-doc-video-duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 3px; letter-spacing: .3px; } .sc-doc-video-meta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; } .sc-doc-video-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-doc-video-actions { flex-shrink: 0; display: flex; align-items: center; } /* Bootstrap modal hosting the inline Vimeo player. Sized "medium" — wider than the default 500px because that's too small for a 16:9 video, but not full-screen wide. */ .sc-video-modal-dialog { max-width: 720px; } @media (max-width: 768px) { .sc-video-modal-dialog { max-width: 96%; margin: 1rem auto; } } .sc-video-modal-frame-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; overflow: hidden; } .sc-video-modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Ask Craig citation modal — full-screen frame for in-place document/attachment/video preview. Uses the existing .modal-dialog-full-width / .modal-content-full-width classes from the programSwitcher pattern; this just sizes the iframe to fill what's left after the header. */ .ask-craig-citation-modal-frame { width: 100%; height: calc(100vh - 100px); min-height: 480px; border: 0; display: block; background: #fff; } #askCraigCitationModal .modal-header { padding: 12px 18px; } #askCraigCitationModal .modal-title { font-size: 16px; } /* Mirror the Ask Craig dock's left "separation lane" onto the full-screen citation modal, so opening a source reads as part of the same Ask Craig surface rather than a generic full-width modal. Same treatment as .craig-dock (110-ask-craig-sidebar.css:68-69): a neutral left lane + inset hairline divider. border-box keeps the 14px lane inside the viewport width. */ #askCraigCitationModal .modal-content { box-sizing: border-box; border-left: var(--craig-dock-gap, 14px) solid #e7ebf0; box-shadow: inset 1px 0 0 #d3dae2; } /* Bare-bones styles applied INSIDE the fragment iframe (sc-fragment-body) so the embedded article / video reads cleanly without the ExtraNet shell wrapping it. */ .sc-fragment-body { margin: 0; padding: 0; background: #fff; color: #1a202c; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .sc-fragment-body .sc-article { max-width: 100%; padding: 8px 12px; } .sc-fragment-video-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ background: #000; } .sc-fragment-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ============================================================================ Ask Craig mockup chat page Renders only on the support-center "Ask Craig" preview route. ============================================================================ */ .ask-craig-sidebar-link .badge { font-size: 9px; vertical-align: middle; } .ask-craig-shell { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; height: calc(100vh - 260px); min-height: 520px; } .ask-craig-header { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 100%); border-bottom: 1px solid #e3e6ea; } .craig-avatar { width: 44px; height: 44px; border-radius: 50%; background: #2c5282; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .craig-header-text { flex: 1; min-width: 0; } .craig-name { font-size: 16px; font-weight: 600; color: #1a202c; } .craig-badge { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 3px; vertical-align: middle; margin-left: 6px; letter-spacing: .5px; } .craig-tagline { font-size: 12px; color: #6b7280; margin-top: 1px; } .ask-craig-messages { flex: 1; overflow-y: auto; padding: 20px 18px; background: #fafbfc; } .craig-onboard { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 16px 18px; margin-bottom: 24px; max-width: 600px; } .craig-onboard-title { font-weight: 600; font-size: 15px; color: #1a202c; margin-bottom: 6px; } .craig-onboard p { font-size: 13.5px; color: #4a5568; margin-bottom: 6px; } .msg { display: flex; margin-bottom: 18px; } .msg-user { justify-content: flex-end; } .msg-craig { justify-content: flex-start; } .msg-craig .msg-content { max-width: 78%; } .msg-user .msg-bubble { max-width: 70%; margin-left: auto; } .msg-craig .msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: #2c5282; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-right: 10px; flex-shrink: 0; } .msg-bubble { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: #1a202c; box-shadow: 0 1px 1px rgba(0,0,0,.02); word-wrap: break-word; } .msg-bubble p { margin: 0 0 8px 0; } .msg-bubble p:last-child { margin-bottom: 0; } .msg-bubble-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .msg-user .msg-bubble { background: #2c5282; color: #fff; border-color: #2c5282; } .msg-meta { font-size: 11px; color: #9ca3af; margin-top: 4px; display: flex; align-items: center; gap: 8px; } .msg-user .msg-meta { justify-content: flex-end; } .msg-rating { margin-left: auto; } .msg-craig .msg-rating { margin-left: 0; } .btn-rate { background: none; border: none; color: #cbd5e0; cursor: pointer; padding: 2px 6px; font-size: 12px; } .btn-rate:hover { color: #2c5282; } .msg-citations { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3e6ea; } .msg-citations-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; margin-bottom: 6px; } .citation-group { margin-bottom: 6px; } .citation-group:last-child { margin-bottom: 0; } .citation-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; margin-left: 18px; padding-left: 10px; border-left: 2px solid #e2e8f0; } .citation-chip { display: inline-flex; align-items: center; font-size: 11px; background: #f1f5f9; color: #475569; padding: 3px 8px; border-radius: 12px; border: 1px solid #e2e8f0; text-decoration: none; transition: background-color .12s ease, border-color .12s ease; } a.citation-chip:hover { background: #e2e8f0; border-color: #cbd5e0; color: #1f2937; text-decoration: none; } .citation-document { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } a.citation-document:hover { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; } .citation-attachment { background: #fff7ed; color: #9a3412; border-color: #fdba74; font-weight: 500; } a.citation-attachment:hover { background: #ffedd5; border-color: #fb923c; color: #7c2d12; } .citation-attachment-ext { margin-left: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #c2410c; opacity: .8; } .citation-video { background: #ecfeff; color: #155e75; border-color: #67e8f9; font-weight: 500; } a.citation-video:hover { background: #cffafe; border-color: #22d3ee; color: #0e4a5e; } .citation-video-duration { margin-left: 6px; font-size: 10px; font-weight: 600; color: #0891b2; opacity: .85; } .citation-seasonal { margin-left: 6px; font-size: 10px; font-weight: 600; color: #92400e; opacity: .9; } .citation-seasonal i { margin-right: 3px; } .craig-staff-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; } .craig-staff-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; } .craig-staff-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #e2e8f0; } .craig-staff-photo-placeholder { display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 32px; } .craig-staff-info { min-width: 0; flex: 1; } .craig-staff-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .craig-staff-name { font-size: 14px; font-weight: 600; color: #1a202c; } .craig-staff-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 10px; border: 1px solid transparent; } .craig-staff-badge-regional-support { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .craig-staff-badge-midland-institute { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; } .craig-staff-badge-midland-staff { background: #f1f5f9; color: #475569; border-color: #cbd5e0; } .craig-staff-title { font-size: 12px; color: #4a5568; margin-top: 2px; } .craig-staff-actions { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; } .craig-staff-action { font-size: 12px; color: #2c5282; text-decoration: none; word-break: break-all; } .craig-staff-action:hover { color: #1a365d; text-decoration: underline; } .ask-craig-input { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; background: #fff; border-top: 1px solid #e3e6ea; } .ask-craig-input textarea { resize: none; font-size: 14px; } .ask-craig-input button { align-self: stretch; white-space: nowrap; } .ask-craig-footer-note { text-align: center; font-size: 11px; color: #9ca3af; padding: 6px 10px 10px; background: #fff; } .craig-typing { display: inline-flex; gap: 4px; padding: 6px 0; } .craig-typing span { width: 6px; height: 6px; background: #cbd5e0; border-radius: 50%; animation: craigBlink 1.2s infinite ease-in-out; } .craig-typing span:nth-child(2) { animation-delay: .2s; } .craig-typing span:nth-child(3) { animation-delay: .4s; } @keyframes craigBlink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } /* ============================================================================ Support Center Article view Public article reader for documents Craig cites (and direct links). ============================================================================ */ .sc-article { width: 100%; } .sc-article-title { font-size: 26px; font-weight: 600; color: #1a202c; } .sc-article-category { font-size: 12px; color: #6b7280; } .sc-article-summary { font-size: 14px; color: #475569; } .sc-article-body { font-size: 15px; line-height: 1.65; color: #1a202c; } .sc-article-body h2 { font-size: 20px; margin-top: 22px; margin-bottom: 8px; } .sc-article-body h3 { font-size: 17px; margin-top: 18px; margin-bottom: 6px; } .sc-article-body h4 { font-size: 15px; margin-top: 14px; margin-bottom: 4px; } .sc-article-body p { margin-bottom: 10px; } .sc-article-body ul, .sc-article-body ol { margin-bottom: 10px; } .sc-article-body table { border-collapse: collapse; margin: 10px 0; } .sc-article-body table td, .sc-article-body table th { border: 1px solid #e2e8f0; padding: 6px 10px; } .sc-article-body table th { background: #f8fafc; } /* Craig callouts inside a rendered doc body. Note -> Bootstrap .alert-secondary (grey) Important -> .alert-light-orange (brand light-orange bg + off-orange border) */ .alert-light-orange { background-color: var(--light-orange); border-color: var(--off-orange); color: var(--off-black); } .sc-article-body .alert { font-size: 14px; padding: 10px 14px; margin: 14px 0; border-radius: 6px; } .sc-article-body .alert > *:last-child { margin-bottom: 0; } .sc-article-body .alert > *:first-child { margin-top: 0; } .sc-article-attachments { padding-top: 16px; border-top: 1px solid #e3e6ea; } .sc-attachment-row { padding: 4px 0; } .sc-attachment-link { display: inline-flex; align-items: center; background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; border-radius: 6px; padding: 6px 12px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .sc-attachment-link:hover { background: #ffedd5; border-color: #fb923c; color: #7c2d12; text-decoration: none; } .sc-attachment-link i { color: #c2410c; } .sc-attachment-link:hover i { color: #9a3412; } .sc-attachment-ext { margin-left: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: #c2410c; opacity: .85; } .sc-attachment-missing { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; cursor: default; } .sc-attachment-missing i, .sc-attachment-missing .sc-attachment-ext { color: #94a3b8; } .sc-attachment-missing:hover { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; text-decoration: none; } .sc-attachment-desc { color: #6b7280; font-size: 13px; margin-left: 8px; } /* ============================================================================ Support Center preview pages — attachment + video Reached via /attachment/{id} and /video/{id} sub-routes off the article page. ============================================================================ */ .sc-preview-card { min-height: calc(100vh - 160px); } .sc-preview-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #e3e6ea; } .sc-preview-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-preview-frame-wrap { width: 100%; height: calc(100vh - 260px); min-height: 480px; background: #f8fafc; border-radius: 4px; overflow: hidden; } .sc-preview-frame { width: 100%; height: 100%; border: 0; display: block; } .sc-preview-image-wrap { background: #f8fafc; padding: 24px; border-radius: 4px; } .sc-preview-image-wrap img { max-height: calc(100vh - 280px); max-width: 100%; object-fit: contain; } .sc-preview-video-wrap { width: 100%; } .sc-preview-description { font-size: 14px; line-height: 1.5; white-space: pre-line; } /* ============================================================================ Training Module learner page (mockup) Styles for the per-step learner experience: progress bar + doc sidebar + Craig chat thread + footer prev/next. Page-scoped under .tm-* to avoid colliding with other extranet surfaces. Reuses .msg / .msg-craig / .msg-bubble from Ask Craig (custom.css lines ~1009+). ============================================================================ */ .tm-shell, .tm-shell .card-header, .tm-shell .card-body, .tm-shell .card-footer { border-radius: 0 !important; } .tm-shell { border-left: 0; border-right: 0; } .tm-step-header { background: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 100%); padding: 18px 24px; } .tm-step-progress-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; } .tm-step-title { font-size: 22px; font-weight: 600; color: #1a202c; } .tm-progress-dots { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 24px; } .tm-progress-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #cbd5e0; position: relative; flex-shrink: 0; } .tm-progress-dot + .tm-progress-dot::before { content: ""; position: absolute; right: calc(100% + 2px); top: 50%; width: 24px; height: 2px; background: #cbd5e0; transform: translateY(-50%); } .tm-progress-dot-completed { background: #2c5282; border-color: #2c5282; } .tm-progress-dot-completed + .tm-progress-dot-completed::before, .tm-progress-dot-current + .tm-progress-dot-completed::before { background: #2c5282; } .tm-progress-dot-current { background: #fff; border-color: #2c5282; box-shadow: 0 0 0 3px rgba(44, 82, 130, .15); } .tm-progress-dot-completed + .tm-progress-dot-current::before { background: #2c5282; } .tm-body-card, .tm-body-card .card-header, .tm-body-card .card-body, .tm-body-card .card-footer { border-radius: 0 !important; } .tm-body-card { border-left: 0; border-right: 0; } .tm-body-row { min-height: calc(100vh - 360px); } .tm-doc-sidebar { background: #f7f9fc; border-right: 1px solid #e3e6ea; padding: 0; } .tm-doc-sidebar-title { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; padding: 14px 18px 12px 18px; border-bottom: 1px solid #e3e6ea; margin-bottom: 0; min-height: 47px; display: flex; align-items: flex-end; } .tm-doc-list { list-style: none; padding: 6px 0 0 0; margin: 0; } .tm-doc-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 14px; border-left: 3px solid transparent; color: #4a5568; } .tm-doc-item-completed { color: #1a202c; } .tm-doc-item-completed .tm-doc-icon { color: #2f855a; } .tm-doc-item-current { background: #fff; border-left-color: #2c5282; font-weight: 600; color: #1a202c; } .tm-doc-item-current .tm-doc-icon { color: #2c5282; } .tm-doc-item-upcoming { color: #9ca3af; } .tm-doc-item-upcoming .tm-doc-icon { color: #cbd5e0; } .tm-doc-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; } .tm-doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-doc-refresh { background: transparent; border: 0; color: #9ca3af; padding: 4px 6px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: color .15s, background .15s; } .tm-doc-refresh:hover { color: #2c5282; background: #edf2f7; } .tm-chat-area { background: #fafbfc; padding: 0; } .tm-chat-messages { padding: 24px 28px; } /* ── Stage area: single focused content region (deck OR questions) ────── */ .tm-stage-area { background: #fafbfc; padding: 0; display: flex; flex-direction: column; } .tm-stage { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Column header — matches .tm-doc-sidebar-title styling so the left sidebar and the right stage have a consistent top bar. Spans edge to edge with a bottom border separator. */ .tm-col-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px 12px 24px; border-bottom: 1px solid #e3e6ea; min-height: 47px; } .tm-col-header-text { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .tm-col-header-label { color: #6b7280; } .tm-col-header-sep { margin: 0 6px; color: #cbd5e0; } .tm-col-header-doc { color: #2c5282; } .tm-col-header-actions { display: flex; gap: 6px; } .tm-stage-actions { margin: 18px 24px 24px 24px; display: flex; align-items: center; gap: 12px; } .tm-stage-actions-hint { font-size: 12px; } .tm-doc-narration-tag { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; } .tm-doc-narration-tag-current { color: #2c5282; } .tm-question-label { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #b45309; margin-bottom: 4px; } .tm-question-bubble { background: #fffbeb; border-color: #fde68a; } .tm-question-bubble-locked { background: #f7f9fc; border-color: #e3e6ea; opacity: .65; } .tm-question-text { font-weight: 600; color: #1a202c; } .tm-question-form { margin-top: 8px; } .tm-question-textarea { border-color: #e3e6ea; margin-bottom: 8px; resize: vertical; } .tm-question-actions { display: flex; justify-content: flex-end; } .tm-mc-choices { display: block; } .tm-mc-choice { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0 0 6px 0; background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; cursor: pointer; font-weight: 400; color: #1a202c; font-size: 14px; transition: border-color .15s, background .15s; } .tm-mc-choice:hover { border-color: #2c5282; background: #f0f5fb; } .tm-mc-choice input[type=radio] { margin: 0; flex-shrink: 0; } .tm-footer-card, .tm-footer-card .card-header, .tm-footer-card .card-body, .tm-footer-card .card-footer { border-radius: 0 !important; } .tm-footer-card { border-left: 0; border-right: 0; border-top: 0; } .tm-step-footer { background: #fff; padding: 14px 24px; } .tm-step-footer-progress { font-size: 13px; color: #6b7280; } @media (max-width: 767px) { .tm-doc-sidebar { border-right: 0; border-bottom: 1px solid #e3e6ea; } .tm-step-header { padding: 14px 18px; } .tm-step-title { font-size: 18px; } .tm-chat-messages { padding: 16px; } .tm-step-footer { padding: 12px 16px; } .tm-step-footer-progress { display: none; } } /* ============================================================================ Training Module — slide deck per document Replaces the chat-bubble narration with a navigable slide deck. Each doc in a step renders as its own deck; the learner clicks Next through 3-5 slides before the "Got it - continue" button unlocks. Completed decks collapse to a one-line summary. Supports fullscreen for in-person presenter use. ============================================================================ */ .tm-deck-msg-content { max-width: 100% !important; flex: 1; min-width: 0; } .tm-deck { background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; } .tm-deck-fullstage { flex: 1; min-height: 420px; } .tm-deck-fullstage .tm-deck-stage { aspect-ratio: auto; min-height: 0; flex: 1; } .tm-deck-fullstage .tm-deck-slide-title { font-size: 36px; } .tm-deck-fullstage .tm-deck-slide-subtitle { font-size: 18px; } .tm-deck-fullstage .tm-deck-slide-body { font-size: 18px; } .tm-deck-fullstage .tm-deck-slide-bullets { font-size: 19px; } .tm-deck-fullstage .tm-deck-quote { font-size: 32px; } .tm-deck-fullstage .tm-deck-callout { font-size: 19px; padding: 20px 22px; } .tm-deck-fullstage .tm-deck-slide { padding: 40px 48px; } .tm-deck-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(135deg, #f6f8fb 0%, #eef2f7 100%); border-bottom: 1px solid #e3e6ea; } .tm-deck-header-title { font-size: 13px; font-weight: 600; color: #1a202c; letter-spacing: .3px; } .tm-deck-header-actions { display: flex; gap: 6px; } .tm-deck-icon-btn { background: transparent; border: 1px solid transparent; color: #6b7280; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .tm-deck-icon-btn:hover { background: #fff; border-color: #e3e6ea; color: #2c5282; } .tm-deck-stage { background: #fff; position: relative; aspect-ratio: 16 / 9; min-height: 280px; overflow: hidden; } .tm-deck-slides { list-style: none; padding: 0; margin: 0; height: 100%; width: 100%; position: relative; } .tm-deck-slide { position: absolute; inset: 0; padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s ease; } .tm-deck-slide.is-active { opacity: 1; visibility: visible; } .tm-deck-slide-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #2c5282; margin-bottom: 12px; } .tm-deck-slide-title { font-size: 28px; font-weight: 700; color: #1a202c; line-height: 1.2; margin-bottom: 10px; } .tm-deck-slide-subtitle { font-size: 16px; color: #4a5568; line-height: 1.5; } .tm-deck-slide-body { font-size: 16px; color: #1a202c; line-height: 1.6; } .tm-deck-slide-body p { margin-bottom: 12px; } .tm-deck-slide-body p:last-child { margin-bottom: 0; } .tm-deck-slide-bullets { list-style: none; padding: 0; margin: 0; font-size: 17px; color: #1a202c; line-height: 1.6; } .tm-deck-slide-bullets li { padding: 8px 0 8px 28px; position: relative; } .tm-deck-slide-bullets li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #2c5282; } .tm-deck-quote { font-size: 26px; font-weight: 600; font-style: italic; color: #2c5282; line-height: 1.3; margin-bottom: 14px; padding-left: 14px; border-left: 4px solid #2c5282; } .tm-deck-callout { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #d97706; padding: 16px 18px; border-radius: 6px; font-size: 17px; color: #78350f; font-weight: 500; line-height: 1.5; margin: 0; } .tm-deck-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; border-top: 1px solid #e3e6ea; background: #fafbfc; } .tm-deck-progress { font-size: 13px; color: #6b7280; font-weight: 500; } .tm-deck-progress-current { color: #1a202c; font-weight: 700; } .tm-deck-progress-sep { margin: 0 4px; } .tm-deck-done-row { margin-top: 12px; display: flex; align-items: center; } .tm-deck-done-hint { font-size: 12px; } /* ── Question card (when stage swaps to questions mode) ───────────────── */ .tm-question-card { background: #fffbeb; border: 0; border-bottom: 1px solid #fde68a; border-radius: 0; padding: 20px 24px; margin: 0; } .tm-question-card .tm-question-label { color: #b45309; margin-bottom: 6px; } .tm-question-card .tm-question-text { font-size: 17px; font-weight: 600; color: #1a202c; margin-bottom: 14px; } .tm-question-card-locked { background: #f7f9fc; border-color: #e3e6ea; opacity: .7; } .tm-question-card-locked .tm-question-label { color: #6b7280; } /* ── Completed (collapsed) deck row ────────────────────────────────────── */ .tm-deck-completed { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; } .tm-deck-completed-check { color: #15803d; font-size: 20px; flex-shrink: 0; } .tm-deck-completed-text { flex: 1; min-width: 0; } .tm-deck-completed-title { font-size: 14px; font-weight: 600; color: #14532d; } .tm-deck-completed-meta { font-size: 12px; color: #4a5568; } .tm-deck-completed-action { padding: 4px 8px !important; font-size: 12px !important; } /* ── Fullscreen presenter mode ─────────────────────────────────────────── */ .tm-deck.is-fullscreen, .tm-deck:fullscreen { border-radius: 0; border: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column; } .tm-deck:fullscreen .tm-deck-stage, .tm-deck.is-fullscreen .tm-deck-stage { flex: 1; aspect-ratio: auto; } .tm-deck:fullscreen .tm-deck-slide, .tm-deck.is-fullscreen .tm-deck-slide { padding: 8vh 12vw; justify-content: center; } .tm-deck:fullscreen .tm-deck-slide-title, .tm-deck.is-fullscreen .tm-deck-slide-title { font-size: 64px; } .tm-deck:fullscreen .tm-deck-slide-subtitle, .tm-deck.is-fullscreen .tm-deck-slide-subtitle { font-size: 28px; } .tm-deck:fullscreen .tm-deck-slide-body, .tm-deck.is-fullscreen .tm-deck-slide-body { font-size: 28px; } .tm-deck:fullscreen .tm-deck-slide-bullets, .tm-deck.is-fullscreen .tm-deck-slide-bullets { font-size: 30px; } .tm-deck:fullscreen .tm-deck-quote, .tm-deck.is-fullscreen .tm-deck-quote { font-size: 48px; } .tm-deck:fullscreen .tm-deck-callout, .tm-deck.is-fullscreen .tm-deck-callout { font-size: 30px; padding: 28px 32px; } .tm-deck:fullscreen .tm-deck-slide-eyebrow, .tm-deck.is-fullscreen .tm-deck-slide-eyebrow { font-size: 14px; } @media (max-width: 767px) { .tm-deck-slide { padding: 20px 22px; } .tm-deck-slide-title { font-size: 22px; } .tm-deck-slide-subtitle { font-size: 14px; } .tm-deck-slide-body { font-size: 14px; } .tm-deck-quote { font-size: 18px; } .tm-deck-callout { font-size: 14px; padding: 12px 14px; } }/* ============================================================================ Craig Voice - per-page narration modal Full-screen "page help" modal opened from the HeaderPageTitle help-icon. Shows a Craig hero (photo + audio player + decibel meter) and any page training videos. Markup: App_Data/Razor/ExtraNet/Layout/CraigPageHelpModal.cshtml. Behaviour: js/custom/090-craig-voice.js. ============================================================================ */ .craig-voice-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 16px 8px; } /* Extra breathing room at the bottom of the Craig modal. */ #craigPageHelpModal .modal-body { padding-bottom: 40px; } .craig-voice-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid #FD5400; filter: grayscale(1); background: #e9ecef; } .craig-voice-name { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #FD5400; font-size: 14px; } .craig-voice-play { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #FD5400; color: #fff; cursor: pointer; transition: background-color 0.15s ease; } .craig-voice-play:hover { background: #d94900; } .craig-voice-play:focus { outline: 2px solid #fdb184; outline-offset: 2px; } .craig-voice-close { position: absolute; top: 12px; right: 16px; z-index: 2; font-size: 1.75rem; line-height: 1; opacity: 0.6; } .craig-voice-close:hover { opacity: 1; } /* Two-line "teleprompter" window: words reveal as the audio reaches them, and the container scrolls so the line being narrated sits up top with the next line previewed below - finished lines scroll up and off the top. */ .craig-voice-script { position: relative; max-width: 640px; margin: 32px auto 0; font-size: 1.25rem; line-height: 2rem; height: 4rem; /* exactly two lines */ overflow: hidden; scroll-behavior: smooth; text-align: center; color: #2d3748; } /* Narrated-text animation: each word starts dim and brightens as the audio reaches it. Progress is driven by the