/* Reset all link colors */ a, a:link, a:visited, a:hover, a:active { color: inherit !important; text-decoration: none !important; } /* !!! ===============================================================================================================*/ /* !!! FONT_IMPORT*/ /* ===================================================================================================================*/ @font-face { font-family: 'GT-Pressura-Standard-Black'; src: url('/assets/GT-Pressura-Standard-Black.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Black.woff') format('woff'), url('/assets/GT-Pressura-Standard-Black.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Bold'; src: url('/assets/GT-Pressura-Standard-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Bold.woff') format('woff'), url('/assets/GT-Pressura-Standard-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Medium'; src: url('/assets/GT-Pressura-Standard-Medium.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Medium.woff') format('woff'), url('/assets/GT-Pressura-Standard-Medium.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Regular'; src: url('/assets/GT-Pressura-Standard-Regular.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Regular.woff') format('woff'), url('/assets/GT-Pressura-Standard-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Light'; src: url('/assets/GT-Pressura-Standard-Light.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Light.woff') format('woff'), url('/assets/GT-Pressura-Standard-Light.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Light'; src: url('/assets/GT-Pressura-Mono-Light.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Light.woff') format('woff'), url('/assets/GT-Pressura-Mono-Light.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Regular'; src: url('/assets/GT-Pressura-Mono-Regular.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Regular.woff') format('woff'), url('/assets/GT-Pressura-Mono-Regular.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Mono-Bold'; src: url('/assets/GT-Pressura-Mono-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Mono-Bold.woff') format('woff'), url('/assets/GT-Pressura-Mono-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Extended-Bold'; src: url('/assets/GT-Pressura-Extended-Bold.woff2') format('woff2'), url('/assets/GT-Pressura-Extended-Bold.woff') format('woff'), url('/assets/GT-Pressura-Extended-Bold.otf') format('opentype'); font-display: swap; } @font-face { font-family: 'GT-Pressura-Standard-Light-Italic'; src: url('/assets/GT-Pressura-Standard-Light-Italic.woff2') format('woff2'), url('/assets/GT-Pressura-Standard-Light-Italic.woff') format('woff'), url('/assets/GT-Pressura-Standard-Light-Italic.otf') format('opentype'); font-display: swap; } /* !!! ===============================================================================================================*/ /* !!! VARIABLES */ /* ===================================================================================================================*/ /* All GT-Pressura faces carry their own intrinsic weight (Bold, Medium, Light, etc.), so emphasis is expressed via font-family, not font-weight. Keep the document at a neutral baseline and let , , headings inherit. */ body { font-weight: normal; } b, strong, h1, h2, h3, h4, h5, h6 { font-weight: inherit; } :root { /* !!! ________Fonts Each token bakes in the `sans-serif` fallback so consumers can use `font-family: var(--textfont)` without repeating `, sans-serif`. */ --headingfont: 'GT-Pressura-Standard-Bold', sans-serif; --textfont: 'GT-Pressura-Standard-Light', sans-serif; --textfont_italic: 'GT-Pressura-Standard-Light-Italic', sans-serif; --tablefont: 'GT-Pressura-Standard-Regular', sans-serif; --tablefont_bold: 'GT-Pressura-Standard-Bold', sans-serif; --tablefont_mono: 'GT-Pressura-Mono-Regular', monospace; --tablefont_mono_bold: 'GT-Pressura-Mono-Bold', monospace; --tablefont_mono_light: 'GT-Pressura-Mono-Light', monospace; --buttonfont: 'GT-Pressura-Standard-Bold', sans-serif; --mediumfont: 'GT-Pressura-Standard-Medium', sans-serif; /* !!! ________Type_Scale SINGLE em-based scale. All font-size declarations in this stylesheet use one of these tokens — no more hardcoded px/rem/em literals, no parallel rem scale. Because every token is em (parent-relative) and the root html { font-size: clamp(...) } is fluid, every text in the app scales smoothly with viewport width AND inherits its container's context. Naming: smaller number = larger size. Suffix letters (A, B, C) are intermediate stops — use them when the base step is too big a jump. Token em ~px* Intended role ───────────────────────────────────────────────────────────── --font_em_1 2.5em 40 Display / hero --font_em_2 2em 32 H1, marquee heading --font_em_2A 1.75em 28 H2 --font_em_2B 1.5em 24 H3, large section heading --font_em_2C 1.25em 20 H4, small section heading --font_em_3 1em 16 Body (default) --font_em_3A 0.875em 14 Body, reduced --font_em_4 0.8em 12.8 UI small (buttons, form labels) --font_em_4A 0.75em 12 Compact label, dense UI --font_em_5 0.65em 10.4 Caption, legend, meta --font_em_5A 0.6em 9.6 Small caption, table footnote --font_em_6 0.5em 8 Tiny / micro * Approximate resolved pixel size assuming parent is at body-size (~16px). Real values breathe with the html clamp(). */ --font_em_1: 2.5em; --font_em_2: 2em; --font_em_2A: 1.75em; --font_em_2B: 1.5em; --font_em_2C: 1.25em; --font_em_3: 1em; --font_em_3A: 0.875em; --font_em_4: 0.8em; --font_em_4A: 0.75em; --font_em_5: 0.65em; --font_em_5A: 0.6em; --font_em_6: 0.5em; --sManual_leftMargin_1: 0; --sManual_leftMargin_2: 1.5rem; --sManual_leftMargin_3: calc(var(--sManual_leftMargin_2)*1.7); --sManual_leftMargin_4: calc(var(--sManual_leftMargin_3)*1.4); --sManual_leftMargin_5: calc(var(--sManual_leftMargin_4)*1.3); --sManual_leftMargin_6: calc(var(--sManual_leftMargin_5)*1.2); --light_transparent_blue: hsla(200, 50%, 20%, .1); --light_transparent_blue_lighter: hsla(200, 50%, 20%, .05); --light_transparent_gray: hsla(0, 0%, 50%, 0.1); --sManual_yellow_highlight: #fcffcb; --warning_color_dark: #fb4212; --warning_color_light: #fff1f0; --sManual_border_thick: 2px; /* Alt palette: dotted green accent (was dotted purple) */ --sManual_link_bottom_border: 2px dotted var(--pt-accent-light); --sManual_link_bottom_border_2: var(--sManual_border_thick) dotted var(--pt-accent-light); --sManual_link_bottom_border_3: var(--sManual_border_thick) dotted var(--pt-accent-dark); --sManual_link_bottom_border_4: var(--sManual_border_thick) dotted var(--orange); --sManual_link_bottom_border_highlight: var(--sManual_border_thick) solid var(--gray-900); --sManual_link_transition: var(--button-link-transition); /* Alt palette: flat UI, no drop shadows */ --sManual_box_shadow: none; --sManual_new_text_highlight_color: #D35400; /* Alt palette: accent uses medium text tone */ --sManual_accent_color: var(--pt-text-medium); /* !!! ________Ops_Chart */ --opsChart_PX_color: rgba(251, 251, 239, 1); --opsChart_PM_color: rgba(240, 248, 230, 1); --opsChart_SU_color: rgba(233, 229, 243, 1); --opsChart_ME_color: rgba(251, 244, 237, 1); --opsChart_PC_color: rgba(230, 242, 251, 1); /* !!! ________Design_tokens (pt-*) — alt palette core */ /* Light shell */ --pt-body: #f3f3f3; --pt-body-medium: #e8e8e8; --pt-body-light: #ffffff; --pt-text: #1e2124; --pt-text-medium: #636363; --pt-accent-light: rgb(48, 48, 80); --pt-accent-light-05: rgba(43, 89, 69, 0.05); /* Dark block tokens — navbar strip + selective surfaces */ --pt-body-dark: #1e2124; --pt-accent-dark: #4e8af7; --pt-border: var(--gray-800); --pt-border-soft: #e8e8e8; --pt-transition: color var(--button-link-transition-duration) ease-in-out, background-color var(--button-link-transition-duration) ease-in-out, border-color var(--button-link-transition-duration) ease-in-out, box-shadow var(--button-link-transition-duration) ease-in-out, opacity var(--button-link-transition-duration) ease-in-out; /* ---------------------------------------------------------------------- */ /* Navbar color controls — change these in ONE place (applies to regular */ /* AND landing variants; both rules consume these tokens below). */ /* ---------------------------------------------------------------------- */ --pt-nav-bg: rgba(20, 20, 22, 0.08); /* --pt-nav-bg-hover: rgba(95, 95, 95, 0.55); */ --pt-nav-bg-landing: rgba(24, 26, 27, 0.78); --pt-nav-bg-landing-hover: rgba(24, 26, 27, 0.83); /* Menu pills inside the navbar (text + button surfaces) */ --pt-nav-pill-bg: #ffffff; --pt-nav-pill-bg-hover: #ececec; /* !!! ________Colors */ --monconred: #ed2037; /* Derived red tokens — keep usage scarce and intentional. Consume these (not raw --monconred) when you need a softened red for tints, hairlines, or focus rings. Using color-mix() ties every derivative to the single source of truth above — change --monconred and everything follows. */ --monconred-ink: color-mix(in srgb, var(--monconred) 85%, #1e2124); --monconred-tint: color-mix(in srgb, var(--monconred) 8%, #ffffff); --monconred-line: color-mix(in srgb, var(--monconred) 60%, #ffffff); --monconred-focus: color-mix(in srgb, var(--monconred) 40%, transparent); --orange: #FF7153; --lightyellow: #fcffcb; --lightblue: #e6faff; --lightpurple: #f2eafe; /* Outbuild Styles */ --mist: #d6ddd9; --bedrock: #c5cdc9; /* Gray ramp: dark grays for shadow/badge usage; surfaces read light */ --gray-900: #1e2124; --gray-800: #3a3c3f; --gray-750: #4a4d51; --gray-700: #5c5f63; --gray-500: #8a8d91; --gray-400: #b0b3b6; --gray-300: #d0d2d4; --gray-200: #e0e2e4; --gray-150: #eceeef; --gray-100: #f3f4f5; --gray-060: #f7f8f8; --gray-050: #fbfbfb; --gray-025: #ffffff; /* Text colors (semantic) */ --text_color_dark: var(--gray-025); --button_color_dark: var(--gray-750); --text_dark: var(--gray-800); /* !!! ________Disabled / Inactive state tokens Unified colors for any card/element shown as disabled, inactive, superseded, or otherwise deemphasized. Edit ONCE here to change every disabled surface in the app (cards, pills, staff/project chart cards, image overlays, etc.). */ --pt-disabled-bg: var(--gray-200); /* surface fill */ --pt-disabled-border: var(--gray-400); /* 1px solid/dashed line */ --pt-disabled-text: var(--gray-500); /* all text + headings */ --pt-disabled-overlay: rgba(200, 200, 200, 0.65); /* image overlay */ /* !!! ________Borders_and_Lines */ --lw-1: solid 1px var(--pt-border); /* !!! ________Layout_and_breakpoints */ --content_max_width: 1700px; --nav-width: 200px; --gap: 24px; --top-offset: 4em; /* Center column: clamp means side margins absorb all shrinkage first (until they hit 0), then the center itself compresses. Both .main-container and .PT_navbar_main read the same resolved value, so navbar and page content always align at every viewport width. */ --main-col-min: 1000px; --main-col: clamp(var(--main-col-min), 80vw, var(--content_max_width)); /* !!! ________Transitions */ /* Shared easing curves */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-pill: cubic-bezier(0.25, 0.1, 0.25, 1); /* Unified button/link transition — every button and link in the app should reference this token (or one of the derived tokens below) so their hover animations share a single slow speed that's controlled in one place. */ --button-link-transition-duration: 0.8s; --button-link-transition: all var(--button-link-transition-duration) var(--ease-standard); /* Slow "sharp -> rounded" pill morph used across .button1, .PT_navbar pills, etc. Duration is driven by the shared button/link token so it matches every other button/link animation. */ --pill-morph-transition: border-radius var(--button-link-transition-duration) var(--ease-pill), background-color var(--button-link-transition-duration) var(--ease-pill), border-color var(--button-link-transition-duration) var(--ease-pill), color var(--button-link-transition-duration) ease; /* Generic soft hover shadow used on buttons, links, tiles, pills */ --shadow-hover-soft: 0 2px 10px rgba(0, 0, 0, 0.1); /* sManual micro-interactions share the same duration so link/card hovers match every other button/link in the app. */ --sManual_transition_duration: var(--button-link-transition-duration); /* !!! ________Patterns */ --safety_hatch: repeating-linear-gradient( -45deg, var(--pt-body-light) 0 14px, rgba(43, 89, 69, 0.06) 14px 28px ); } /* !!! ===============================================================================================================*/ /* !!! SCROLLBAR */ /* ===================================================================================================================*/ ::-webkit-scrollbar { background-color: var(--pt-body-medium); border-radius: 5px; width: .5em; height: 7px; } ::-webkit-scrollbar-track { border-radius: 5px; background-color: var(--pt-body-light); } ::-webkit-scrollbar-thumb { background-color: var(--gray-400); border-radius: 5px; } .div-login { display: flex; align-items: center; justify-content: center; } /* !!! ===============================================================================================================*/ /* !!! LOGIN_STUFF */ /* ===================================================================================================================*/ .login-header { font-family: var(--headingfont); font-size: var(--font_em_2); /*margin-top: 10em;*/ color: var(--text_dark) !important; margin-bottom: 0.5rem; } .input2.login-input { border: 1px solid var(--pt-border) !important; color: var(--text_dark) !important; background-color: transparent !important; } .button1.login-button { border-color: var(--gray-025); color: var(--text_color_dark) !important; transition: var(--button-link-transition) !important; width: 50%; } .button1.login-button.credential { border-color: var(--gray-400); color: var(--gray-400) !important; } .button1.login-button:hover { color: var(--text_dark) !important; } /* */ .forbidden_landing{ text-decoration: underline !important; } #users-table tbody tr td, #roles-table tbody tr td { padding: 6px 5px !important; } #users-table thead tr th, #roles-table thead tr th { padding: 6px 6px !important; } #users-table thead tr th span, #roles-table thead tr th span { float: left !important; } #users-table tbody tr td:nth-child(6) { display: flex; justify-content: left; } /* !!! ===============================================================================================================*/ /* !!! BUTTONS_AND_LINKS */ /* ===================================================================================================================*/ /* !!! ________Pill-morph utility Opt-in class that packages the app-wide "sharp at rest → round on hover, with a soft hover shadow and slow eased transition" pattern. Components that need this look can adopt the class and override `--pill-radius-rest` / `--pill-radius-hover` inline or in a more specific rule. Existing button / link rules intentionally keep their own hover radii, so this is not applied retroactively. */ .pill-morph { border-radius: var(--pill-radius-rest, 2px); transition: var(--pill-morph-transition); } .pill-morph:hover { border-radius: var(--pill-radius-hover, 16px); box-shadow: var(--shadow-hover-soft); cursor: pointer; } /* !!! ________Button1 */ .button1, .export, .show-hide { background-color: transparent; color: var(--text_dark); padding: 5px 10px; border-radius: 2px; border: 1px solid var(--pt-text); text-align: center; text-decoration: none; display: block; font-size: var(--font_em_5A); font-family: var(--buttonfont); transition: var(--pill-morph-transition); margin-top: 6px; margin-bottom: 6px; margin-right: 4px; } .button1:hover, .export:hover, .show-hide:hover { cursor: pointer; border-radius: 16px; background-color: var(--pt-accent-light-05); border-color: var(--pt-accent-light); color: var(--text_dark); } /* !!! ________Button4 */ .button4 { position: absolute; top: 0; right: 0; padding: 5px 10px; background: var(--button_color_dark) !important; text-align: center; height: 36px; color: var(--text_color_dark) !important; border-radius: 2px; margin: 12px; font-family: var(--buttonfont); transition: var(--pt-transition); border: none !important; } .button4:hover { border-radius: 18px; cursor: pointer; filter: brightness(1.05); } .card nav.button4 { font-size: var(--font_em_3); position: unset !important; } /* !!! ________Button_download */ .button-download { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; padding: 6px 12px; border-radius: 2px; text-align: center; text-decoration: none; display: block; font-size: var(--font_em_4A); font-family: var(--buttonfont); transition: var(--button-link-transition); margin-top: 6px; margin-bottom: 6px; margin-right: 0; white-space: nowrap; border: 0 solid var(--pt-border); width: auto; min-width: 120px; } .button-download:hover { cursor: pointer; border-radius: 18px; border: 0 solid var(--pt-border); } /* !!! ________Button_menu */ .button-menu.pt-btn { font-size: var(--font_em_5); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 6rem; width: auto; padding: 4px 8px; border: 1px solid var(--pt-border); border-radius: 2px; background-color: transparent; color: var(--text_dark); text-decoration: none; font-family: var(--mediumfont); transition: var(--button-link-transition); cursor: pointer; margin: 6px 12px 6px 0; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; will-change: border-radius, background-color; } .PT_navbar.PT_navbar_landing .PT_navbar_nav_items { display: none; } .section_nav_container .button-menu.pt-btn { width: 100%; /*border: none;*/ margin-bottom: 0.5em; } #sManual_nav_buttons_container .button-menu { margin: 0; margin-bottom: 0.25em; padding: 0.2em; } #sManual_nav_buttons_container .button-menu.disabled { color: var(--gray-300); border-color: var(--gray-300); animation: none; transition: none; pointer-events: none; cursor: not-allowed; } .button-menu.pt-btn:hover { border-radius: 18px; } /* Ensure all child elements use the EXACT same transition timing */ .pt-btn__label, .pt-btn__circle { transition: var(--button-link-transition); will-change: transform, opacity; } .pt-btn__label { position: relative; z-index: 0; /* No transition here - it's defined above */ } .button-menu.pt-btn:hover .pt-btn__label { transform: translateX(-14px); /* No transition here - it inherits from the class above */ } .pt-btn__circle { position: absolute; top: 50%; right: 6px; height: 24px; width: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-50%) scale(0.5) translateX(12px); /* No transition here - it's defined above */ font-size: var(--font_em_4A); color: var(--text_dark); background-color: transparent; } .button-menu.pt-btn:hover .pt-btn__circle { opacity: 1; background-color: transparent; /* Or any color you want */ transform: translateY(-50%) scale(1) translateX(0); /* No transition here - it inherits from the class above */ } .holder { background: var(--pt-body-medium) !important; width: 100%; } .pt-btn__icon { width: 16px; height: 16px; filter: invert(0%); /* Adjust this for different colors */ } /* Dark variant of the animated button */ .button-menu.pt-btn.dark { background-color: var(--button_color_dark); color: var(--pt-body-medium) !important; margin-right: 0 !important; } /* !!! ________Tablebutton */ .tablebutton { background: var(--pt-text-medium) !important; height: 18px !important; line-height: 18px !important; color: var(--text_dark) !important; padding: 0 8px !important; border-radius: 2px !important; border: 1px solid var(--pt-border) !important; text-align: center !important; text-decoration: none !important; display: block !important; font-size: var(--font_em_5A) !important; font-Family: var(--buttonfont) !important; transition-duration: var(--button-link-transition-duration) !important; margin-top: 2px !important; margin-bottom: 2px !important; } .tablebutton:hover { /*background-color: transparent !important;*/ /*background: none !important;*/ /*color: var(--text_color) !important;*/ border-radius: 12px !important; cursor: pointer !important; } /* !!! ===============================================================================================================*/ /* !!! LANDING_PAGE_STUFF */ /* ===================================================================================================================*/ .landing_page_container { font-size: var(--font_em_3); width: 100%; position: relative; color: var(--text_dark); /*padding-right: 2em;*/ padding-left: 6px; } .landing_column_title { font-family: var(--headingfont); font-size: var(--font_em_4A); letter-spacing: -0.02em; text-transform: uppercase; color: var(--text_dark) !important; margin-top: 0; margin-bottom: 0.75em; } .login_container, .login_card { background-color: var(--pt-body-light) !important; border: none !important; border-radius: 0; box-shadow: none !important; display: flex; align-items: center; } .login_container { justify-content: center; height: fit-content; margin-top: 10em; } .login_card { flex-direction: column; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(10px); margin-bottom: 0.5em; transition: all 0.5s var(--ease-standard); padding: 1em; max-width: 400px; min-width: 400px; margin-left: auto; margin-right: auto; } /* Non-landing home grids: flat gray tiles */ .landing_card { display: flex; flex-direction: column; gap: 0.25em; padding: 0.6em 0.7em 0.7em; min-height: 3.5em; height: auto; border: none !important; color: var(--text_dark); font-family: var(--textfont); background-color: var(--pt-body-medium) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(10px); border-radius: 0; box-shadow: none !important; margin-bottom: 0.45em; transition: var(--button-link-transition); overflow-wrap: break-word; text-decoration: none; cursor: pointer; } .landing_card:hover { background-color: var(--gray-200) !important; border: none !important; border-radius: 14px; color: var(--text_dark); } .landing_card_title { font-size: var(--font_em_4A); line-height: 1.2; font-family: var(--headingfont); color: var(--text_dark) !important; letter-spacing: -0.02em; margin: 0; /* Single-line truncation — never wraps */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing_card_text { font-size: var(--font_em_4A); line-height: 1.45; font-family: var(--tablefont); color: var(--text_dark) !important; margin: 0; overflow-wrap: break-word; } .landing_tile_badge { color: var(--text_dark); padding: 0.3em 0.8em; border: 1px solid var(--gray-900); border-radius: 12px; /* Increased from 9px for more roundness */ font-family: var(--mediumfont); font-size: var(--font_em_6); text-align: center; /* Centers text */ display: inline-block; /* Makes it behave like a badge */ box-sizing: border-box; /* Ensures padding is included in size */ cursor: pointer; vertical-align: middle; background-color: var(--sManual_yellow_highlight); } /* !!! ===============================================================================================================*/ /* !!! TEXT_ELEMENTS */ /* ===================================================================================================================*/ /* !!! ________H1_THRU_H6 */ h1, h2, h3, h4, h5, h6 { text-align: left; margin-top: 0.75em; margin-bottom: 0; font-Family: var(--headingfont); color: var(--text_dark); } h1 { font-size: var(--font_em_1); background-clip: text; color: var(--text_dark); margin-top: 0.5em; } #v3_manual_div h1 { margin-top: 0; } #manual_div_legacy h1 { margin-top: 0; } .card.title h1 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; letter-spacing: -0.02em; color: var(--text_dark) !important; } h2 { font-size: var(--font_em_2); } /* Red hairline above page-level H2s — the "filet rouge" that threads brand through every section without adding chrome. Scoped to page content so navbar/drawer/card H2s stay clean (cards already have their own heading treatments, and stacking rails inside warning/disabled cards would muddle those semantic states). */ #page-content h2::before, .main-container h2::before { content: ""; display: block; width: 32px; height: 2px; background-color: var(--monconred); border-radius: 1px; margin-bottom: 0.4em; } .card h2::before, .card-dashed h2::before, .card.warning h2::before, .card.disabled h2::before, .card.title h2::before, .card.nav h2::before, .PT_navbar h2::before, .modal h2::before, .mantine-Drawer h2::before, .section-nav-fab-root h2::before, .fixed-section-nav h2::before { content: none; } h4 { font-size: var(--font_em_3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.85em; color: var(--text_dark); } .card.warning h4 { color: var(--warning_color_dark); } h5 { font-size: var(--font_em_4); margin-bottom: 0.4em; color: var(--text_dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sManual_doc_links_container h5 { margin-bottom: 0; margin-top: 0.25em; } h6 { font-size: var(--font_em_5); margin-bottom: 0; } /* !!! ________P */ P { font-size: var(--font_em_5); font-family: var(--textfont); word-break: normal; margin: 0; margin-bottom: 0.2em; padding: 0; } P.mono { font-family: var(--tablefont_mono); font-size: var(--font_em_5); } /* !!! ________span_1_thru_span_2 */ .span_1 { font-size: var(--font_em_4A); font-family: var(--textfont); color: var(--text_dark); margin: 1px 0 0 0; padding: 2px 0 1px; display: inline-block; } .card.warning .span_1 { color: var(--warning_color_dark); } .span_2 { font-size: var(--font_em_4A); font-family: var(--headingfont); color: var(--text_dark); margin: 1px 0 0 0; padding: 2px 0 1px; display: inline-block; } .card.warning .span_2 { color: var(--warning_color_dark); } .span_3 { display: block; } /* !!! ________Info_grid */ .info_grid { display: grid; grid-template-columns: 1fr; gap: 0; } .info_row { display: grid; grid-template-columns: 50% auto; align-items: center; margin-bottom: 0.15em; } .grid_label { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark) !important; letter-spacing: 0.04em; text-align: left; padding-right: 1em; display: inline-block; /* Need this for width to work on span */ max-width: 150px; /* Adjust to your preference */ overflow: hidden; white-space: nowrap; /* Prevents text wrapping */ text-overflow: ellipsis; /* Optional: adds ... when text is cut */ } .grid_value { font-family: var(--textfont); font-size: var(--font_em_5); color: var(--text_dark) !important; text-align: left; } /* !!! ________list_grid */ .list_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font-size: var(--font_em_5); overflow: hidden; white-space: nowrap; /* Prevents text wrapping */ text-overflow: ellipsis; /* Optional: adds ... when text is cut */ color: var(--text_dark); padding-right: 0.5em; } /* !!! ________Misc */ .nav_menu_title { /* color: var(--text_dark); */ color: var(--monconred); font-family: var(--headingfont); font-size: var(--font_em_3); margin-bottom: 0.1em; } .modal-title { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); } B { font-family: var(--headingfont); } .list-group-item { font-family: var(--textfont); color: var(--text_dark) !important; background-color: transparent !important; border-color: var(--pt-border-soft) !important; font-size: var(--font_em_5A); word-break: normal; } /* !!! ________Revision_Date */ .revision_date { color: var(--gray-300); padding: 0; font-family: var(--textfont); font-size: var(--font_em_6); cursor: pointer; margin-bottom: 1em; } .revision_date:hover { cursor: default; } .sManual_doc_links_container .revision_date { margin-bottom: 0; } /* !!! ===============================================================================================================*/ /* !!! TOOLTIP */ /* ===================================================================================================================*/ .tooltip1 { background-color: var(--gray-750); color: var(--text_color_dark); font-family: var(--tablefont); font-size: var(--font_em_4); padding: 1em; border-radius: 5px; z-index: 9999; } /* !!! ===============================================================================================================*/ /* !!! CARDS */ /* ===================================================================================================================*/ .card { font-size: var(--font_em_3); position: relative; text-align: left; min-width: 100px; overflow-wrap: break-word; overflow: hidden; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; margin-bottom: 1em; padding: 0 0.8em 1.2em; background-color: var(--pt-body); border-radius: 0.7em; /* Alt palette: flat UI, no drop shadows */ box-shadow: none; color: var(--text_dark); display: flow-root; } .card.level2 { background-color: var(--gray-060); box-shadow: none; } /* Nav cards: flat light-gray fill */ .card.nav, .card.level2.nav { font-size: var(--font_em_3A); margin-bottom: 1em; background-color: var(--pt-body-light) !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } /* Regular cards (non-nav, non-warning): match nav card fill, no border */ .card:not(.nav):not(.warning), .card.level2:not(.nav):not(.warning) { background-color: var(--pt-body-light) !important; border: none !important; border-radius: 8px !important; box-shadow: none !important; } .card.warning { font-size: var(--font_em_3A); margin-bottom: 1em; } /* Dashed cards: keep dashed cue, but colors come from the unified disabled-state tokens so these always match .card.disabled and the .NOTACTIVE ops-chart surfaces. */ .card-dashed { background-color: var(--pt-disabled-bg) !important; border: 1px dashed var(--pt-disabled-border) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--pt-disabled-text) !important; } .card-dashed h4, .card-dashed .grid_label, .card-dashed .grid_value { color: var(--pt-disabled-text) !important; } /* !!! ===============================================================================================================*/ /* !!! DOC_LINKS */ /* ===================================================================================================================*/ .doc_link { font-size: var(--font_em_4A); font-family: var(--mediumfont); display: inline-flex; text-align: left; justify-content: left; height: 10em; width: 8em; padding: 0.5em; margin: 0.5em; background-color: var(--gray-050); border: 1px solid var(--pt-border); border-radius: 0.5em; text-decoration: none; transition-duration: var(--sManual_transition_duration) !important; overflow: hidden; text-overflow: ellipsis; word-break: normal; cursor: default; } .doc_link:visited { text-decoration: none !important; border-radius: 18px; cursor: pointer; } .doc_link:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } a.doc_link { text-decoration: none !important; } .doc_link_container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } /* !!! ===============================================================================================================*/ /* !!! SAFETY_MANUAL */ /* ===================================================================================================================*/ /* Styling for TOC */ .toc-children { padding-left: 20px; transition: all 0.3s ease; } /* Chevron styling */ .toc-chevron { display: inline-block; width: 16px; text-align: center; transition: transform 0.3s; } .fa-caret-down { transform: rotate(90deg); } /*-----------------Cards-----------------*/ .card.sManual { padding-top: 1em; padding-bottom: 1.5em; color: var(--text_dark) !important; } .card.sManual h4 { font-size: var(--font_em_3); margin-top: 0; margin-bottom: 0; } .card.sManual.toc { transition: all 0.3s ease !important; } /*Common styles for all TOC links */ .tocLink { text-decoration: none !important; cursor: pointer; color: var(--text_dark) !important; transition: var(--button-link-transition); font-size: var(--font_em_5A); } /* Prevents color changes for visited links */ .tocLink:visited { text-decoration: none !important; color: var(--text_dark) !important; } /*-------------ToolTip---------------*/ .sManual_tooltip { font-family: var(--textfont); margin: 1rem; font-size: var(--font_em_4A); padding: 0.5rem; } /* Target the inner content where your text actually lives */ .sManual_tooltip .tooltip-inner { background-color: var(--gray-025) !important; color: var(--text_dark) !important; backdrop-filter: blur(10px); border: 1px solid var(--pt-border); /* Add these to fix the sizing issue */ max-width: 300px !important; width: max-content !important; white-space: normal !important; word-wrap: break-word !important; text-align: left !important; /* Ensure proper padding */ padding: 8px 12px !important; border-radius: 6px !important; box-shadow: var(--sManual_box_shadow); margin-left: 50%; } /* !!! ________Badges */ .sManual_badges_container { display: inline-block; } .sManual_badge { font-size: var(--font_em_5A) !important; padding: 1px 5px !important; border-radius: 10px !important; color: var(--text_dark) !important; display: inline-block !important; background-color: var(--gray-050); text-align: center !important; white-space: nowrap !important; vertical-align: middle !important; margin-left: 3px !important; margin-bottom: 0 !important; border: 0.5px solid var(--gray-500) !important; font-family: var(--tablefont) !important; } .sManual_badge.source { background-color: var(--sManual_yellow_highlight); } .sManual_badge.source.Old_Manual { background-color: var(--mist); } .sManual.highlight { background-color: var(--pt-accent-light); } .highlight { background-color: var(--pt-accent-light); font-family: var(--headingfont); } .sManual_modal_text { font-size: var(--font_em_3); font-family: var(--textfont); } .sManual_flex_row { display: flex; align-items: flex-start; width: 100%; } .case-modal .modal-content { width: 90% !important; max-width: 1200px !important; margin-left: auto !important; } /* !!! ________Numbers */ .sManual_number { font-family: var(--textfont); color: var(--gray-400); letter-spacing: -0.10em; } .sManual_number.type1 { color: var(--text_dark); } .sManual_number.type2 { color: var(--text_dark); } .sManual_number.type3 { color: var(--text_dark); } .formatted-numerical-code { white-space: nowrap; font-family: var(--textfont); } /* Number parts of the code */ .code-number-part.type1, .code-number-part.type2, .code-number-part.type3 { font-family: var(--tablefont_mono_bold) !important; color: var(--text_dark); } .code-number-part.type4, .code-number-part.type5, .code-number-part.type6 { font-family: var(--tablefont_mono_light) !important; color: var(--gray-300); } .sManual_toc_num.type1 { font-family: var(--tablefont_mono_bold); } .sManual_toc_num.type2 { font-family: var(--tablefont_mono) !important; } /* Periods in the code */ .code-period { margin: 0 -0.05em; font-family: var(--textfont); color: var(--gray-400); } /* !!! ________Special_text */ .definition_highlight { color: var(--text_dark); font-family: var(--mediumfont); border-bottom: var(--sManual_link_bottom_border_2); } .legend_definition { border-bottom: var(--sManual_link_bottom_border_2); } .topic_highlight { font-family: var(--mediumfont); } .direct_quote_highlight { font-family: var(--textfont_italic); } /*--------------Legend----------------------*/ .legend_content { font-family: var(--textfont); font-size: var(--font_em_4A); margin-bottom: 1rem; } /* !!! ________Internal_Links*/ .sManual_uuid_link { background-color: transparent; display: inline-block; transition: var(--button-link-transition) !important; margin-left: 5px; font-family: var(--textfont); text-decoration: none; border-bottom: var(--sManual_link_bottom_border_3); height: auto !important; padding-bottom: 0; line-height: 1.0 !important; } .legend_uuid_link { border-bottom: var(--sManual_link_bottom_border_3); } .sManual_uuid_link:hover { cursor: pointer; background-color: var(--gray-100); transition: var(--sManual_link_transition); border-bottom: var(--sManual_link_bottom_border_highlight); } /* !!! ________Rows */ .sManual_content_row { font-family: var(--textfont); font-size: var(--font_em_4A); padding-right: 3px; } .sManual_content_row.not_in_scopes { background-color: var(--sManual_yellow_highlight) !important; } .sManual_content_row.bulletpoint { margin-top: 0 !important; } .sManual_content_row.type1 { font-family: var(--headingfont); font-size: var(--font_em_2); } .sManual_content_row.type2 { margin-left: var(--sManual_leftMargin_2); font-family: var(--headingfont); font-size: var(--font_em_3); margin-top: 1.2rem; border-bottom: 1px solid var(--pt-border); } .sManual_content_row.type3 { margin-left: var(--sManual_leftMargin_3); font-family: var(--headingfont); font-size: var(--font_em_4); margin-top: 0.7rem; } .sManual_content_row.type4 { margin-left: var(--sManual_leftMargin_4); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type5 { margin-left: var(--sManual_leftMargin_5); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type6 { margin-left: var(--sManual_leftMargin_6); font-size: var(--font_em_4); margin-top: 0.45rem; } .sManual_content_row.type2.summary_card_modifier { margin-left: var(--sManual_leftMargin_1); } .sManual_content_row.type3.summary_card_modifier { margin-left: var(--sManual_leftMargin_1); } .sManual_content_row.type4.summary_card_modifier { margin-left: var(--sManual_leftMargin_2); } .sManual_content_row.type5.summary_card_modifier { margin-left: var(--sManual_leftMargin_3); } .sManual_content_row.type6.summary_card_modifier { margin-left: var(--sManual_leftMargin_4); } .sManual_text_line, .siteRespo_text_line { display: grid; grid-template-columns: auto 1fr; /* First column auto-sized, second takes remaining space */ gap: 2px; } .sManual_row_content_wrapper { hyphens: auto; word-break: normal; } .sManual_content { line-height: 1.0rem !important; } .sManual_error { color: var(--warning_color_dark) !important; } .sManual_internal_note { color: var(--warning_color_dark); margin-left: 6.0rem; font-family: var(--tablefont); border-left: 6px solid var(--warning_color_dark); padding-left: 0.5rem; margin-top: 0.25rem; } .type1.InternalNote, .type2.InternalNote, .type3.InternalNote, .type4.InternalNote, .type5.InternalNote { margin-top: 3px !important; } .GRID { display: grid; column-gap: 4px; row-gap: 2px; align-items: start; } .GRID.sManual_inspection { grid-template-columns: repeat(5, minmax(0, 1fr)); } .GRID.sManual_permit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .GRID.doclinks_1 { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap: 4px; } .GRID.doclinks_2 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 4px; } /* !!! ________Search */ .sManual_search_highlight { background-color: var(--lightyellow); } .sManual_search_content { font-family: var(--textfont); font-size: var(--font_em_4A); } .sManual_search_header { font-family: var(--headingfont); font-size: var(--font_em_2B); } .sManual_search_link { font-family: var(--headingfont); font-size: var(--font_em_4A); } /* !!! ________Flags */ .sManual_flag_container { position: absolute; left: 1rem; } .sManual_flag { width: 30px; height: 30px; transform: translateY(-0.5rem); } .sManual_flag_mci { font-family: var(--headingfont); } /* !!! ________TOC */ .sManual_toc_row { margin-right: 18px; display: flex; flex-direction: row; align-items: center; width: 100%; border-bottom: 1px dashed var(--gray-400); height: 20px; min-height: 18px; max-height: 24px; font-size: var(--font_em_5A); overflow: hidden; } .sManual_toc_row.type1:hover { background-color: var(--gray-100); } .sManual_toc_row.type2:hover { background-color: var(--gray-050); } .sManual_toc_link { flex: 1; min-width: 25rem !important; white-space: nowrap !important; display: inline-block; } .sManual_toc_link.type1 { font-family: var(--headingfont); margin-left: var(--sManual_leftMargin_2); font-size: var(--font_em_4A); } .sManual_toc_link.type2 { font-family: var(--tablefont); margin-left: var(--sManual_leftMargin_3); font-size: var(--font_em_4A); } .sManual_toc_link.type2.special { color: var(--bedrock) !important; } .sManual_toc_link.type3 { font-family: var(--textfont); margin-left: var(--sManual_leftMargin_4); font-size: var(--font_em_4A); } .sManual_toc_date { width: 200px; text-align: left; color: var(--text_dark); font-family: var(--tablefont_mono); } .sManual_toc_container { margin-left: 36px; margin-right: 24px; } .sManual_status_container { width: 20rem !important; min-width: 20rem !important; display: inline-block; text-align: left; } .sManual_horizontal_spacer { width: 5rem !important; min-width: 5rem !important; display: inline-block !important; } .sManual_status { font-family: var(--textfont); border: 1px solid var(--pt-border); border-radius: 8px; padding: 1px 6px; display: inline-block; font-size: var(--font_em_5A); } .sManual_status.Review { background-color: var(--gray-900); color: var(--text_color_dark); } .sManual_status.In.Progress { background-color: var(--gray-100); } .sManual_status.Gabi { background-color: var(--lightblue); } .sManual_status.Gulay { background-color: var(--lightpurple); } .sManual_status.Alphonse { background-color: var(--mist); } .btn.btn-primary.sManual_backtotoc_button, .btn.btn-primary.ml-auto { font-size: var(--font_em_4A); font-family: var(--headingfont); padding: 2px 6px; border-radius: 8px; border: 1px solid var(--pt-border); color: var(--text_color_dark) !important; background-color: var(--button_color_dark); transition: var(--button-link-transition); margin-top: 1rem; } .btn.btn-primary.sManual_backtotoc_button:hover, .btn.btn-primary.ml-auto:hover { color: var(--text_dark) !important; cursor: pointer; border-radius: 16px; box-shadow: var(--shadow-hover-soft); background-color: transparent !important; border: 1px solid var(--pt-border); } /* !!! ________Photos */ .sManual_photo { height: 200px; max-width: 50%; object-fit: contain; margin-right: 6px; margin-left: 6px; } .sManual_photo.large { height: 300px; max-width: 50%; } .sManual_photo.medium { height: 200px; max-width: 50%; } .sManual_photo.small { height: 150px !important; max-width: 50%; } .sManual_photo_row { margin-bottom: 12px; margin-top: 12px; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; overflow-x: auto; } /* !!! ________Definition_Links*/ /* Enhanced CSS for Definition Links */ .sManual_definition_link { border-bottom: var(--sManual_link_bottom_border); transition: var(--sManual_link_transition); margin-left: 0 !important; height: auto; } .legend_definition_link { border-bottom: var(--sManual_link_bottom_border); } .sManual_definition_link_to_original { border-bottom: var(--sManual_link_bottom_border_4); transition: var(--sManual_link_transition); margin-left: 6px !important; height: auto; } .link_to_original { border-bottom: var(--sManual_link_bottom_border_4); } .sManual_definition_link:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } .sManual_definition_reference_link { border-bottom: var(--sManual_link_bottom_border); transition: var(--sManual_link_transition); } .sManual_definition_reference_link:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } .sManual_content_row:has(.sManual_inserted_definition) { border-right: var(--sManual_border_thick) dotted var(--gray-900) !important; } .sManual_definition_link_to_original:hover { border-bottom: var(--sManual_link_bottom_border_highlight); background-color: var(--gray-100); transition: var(--sManual_link_transition); } /* Animated highlight effect when jumping to a definition */ :target + .sManual_content_row { animation: definition-target-fade 4s ease; } @keyframes definition-target-fade { 0%, 10%, 30% { background-color: var(--sManual_yellow_highlight); } 70%, 100% { background-color: transparent; box-shadow: none; } } /* Make the definition highlight stronger when it's the target */ :target + .sManual_content_row .definition_highlight { background-color: var(--sManual_yellow_highlight); border-bottom: 1px solid var(--gray-900); animation: definition-text-pulse 4s ease; } @keyframes definition-text-pulse { 0%, 10%, 30% { background-color: var(--sManual_yellow_highlight); } 70%, 100% { background-color: var(--sManual_yellow_highlight); box-shadow: none; } } /* Add a little animation to make it clear when a user has followed a link */ .sManual_content_row:target { animation: highlight-fade 2s ease; } @keyframes highlight-fade { 0% { background-color: var(--sManual_yellow_highlight); } 100% { background-color: transparent; } } /* !!! ________Warnings */ .sManual_warning_header { color: var(--warning_color_dark); margin: 0 0 12px 0; font-size: var(--font_em_3); padding-top: 0.5em } .sManual_warning_item { font-family: var(--textfont); font-size: var(--font_em_4); margin-bottom: 0.35rem; } .sManual_warning_section_link { text-decoration: none; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--warning_color_dark); transition: var(--button-link-transition); margin: 0 4px; } .sManual_warning_section_link:hover { border-radius: 16px; box-shadow: var(--shadow-hover-soft); } .link-separator { color: var(--warning_color_dark); } .sManual_duplicate_warning { background-color: var(--warning_color_light); color: var(--warning_color_dark); font-size: var(--font_em_3A); padding: 4px 8px; margin-top: 10px; border-radius: 4px; border-left: 3px solid var(--warning_color_dark); display: flex; align-items: center; } /* Style the warning card at the top — red border + red text, all tied to --warning_color_dark */ .card.warning { border: 1px solid var(--warning_color_dark) !important; background: lightyellow !important; color: var(--warning_color_dark) !important; border-radius: 8px !important; word-break: normal; font-size: var(--font_em_4A); } .card.warning, .card.warning h1, .card.warning h2, .card.warning h3, .card.warning h4, .card.warning h5, .card.warning h6, .card.warning p, .card.warning span, .card.warning label, .card.warning li, .card.warning a, .card.warning div { color: var(--warning_color_dark) !important; } /* Improve linking to duplicates */ .sManual_content_row.has-duplicate-warning:target + .sManual_content_row { animation: duplicate-definition-flash 4s ease; } @keyframes duplicate-definition-flash { 0%, 15%, 30% { background-color: rgba(212, 53, 28, 0.15); } 70%, 100% { background-color: transparent; } } /* !!! ________Doc_Links */ .sManual_doc_link_new { display: flex; text-align: left; margin: 0; height: 2.5em; text-decoration: none !important; color: var(--text_dark); background-color: var(--gray-100); font-family: var(--headingfont); font-size: var(--font_em_5A); cursor: default; transition-duration: var(--sManual_transition_duration) !important; border: 1px solid var(--sManual_accent_color); border-radius: 6px; padding: 0.45em; word-break: normal; } .sManual_doc_link_new.spanish_modifier::after { content: ''; position: absolute; top: 0; right: 0; width: 12px; /* Adjust size as needed */ height: 12px; /* Adjust size as needed */ background-color: var(--sManual_accent_color); /* Choose your color */ clip-path: polygon(100% 0%, 0% 0%, 100% 100%); border-top-right-radius: 6px; /* Match the parent's border-radius */ transition-duration: var(--sManual_transition_duration) !important; } .sManual_doc_link:visited { text-decoration: none !important; border-radius: 18px; cursor: pointer; } .sManual_doc_link_new:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } .sManual_doc_link_new.spanish_modifier:hover::after { border-top-right-radius: 16px; /* Match the hover border-radius */ transition-duration: var(--sManual_transition_duration) !important; } a.sManual_doc_link { text-decoration: none !important; } .sManual_doc_icon_container { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; margin: auto; overflow: hidden; } .sManual_doc_link_group_container { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 0.50rem; } .sManual_doc_link_group_container.type3 { margin-left: var(--sManual_leftMargin_3); } .sManual_doc_link_group_container.type4 { margin-left: var(--sManual_leftMargin_4); } .sManual_doc_link_group_container.type5 { margin-left: var(--sManual_leftMargin_5); } .sManual_doc_link_group_container.type6 { margin-left: var(--sManual_leftMargin_6); } .sManual_doc_link_container { display: inline-block; margin-left: 1rem; margin-bottom: 0.75rem; } .sManual_doc_link_container_new { display: inline-block; margin-left: 0; margin-bottom: 0; } .doc_icon { max-width: 100%; max-height: 100%; object-fit: contain; } .sManual_doc_text { height: 2.25rem; font-family: var(--mediumfont); } .sManual_doc_text_new { display: inline-block; } .sManual_doc_links_container { margin-right: 0; background-color: var(--gray-060); padding-left: 0.5em; padding-right: 0.5em; padding-bottom: 0.5em; border-radius: 12px; position: relative; } /* !!! ________Personnel_Links */ .sManual_personnel_link { display: flex; flex-direction: column; align-items: center; min-height: 16em; /* Changed from height to min-height */ margin-left: 0; margin-bottom: .2em; text-align: center; text-decoration: none !important; color: var(--text_dark); font-family: var(--headingfont); font-size: var(--font_em_5A); cursor: default; transition-duration: var(--sManual_transition_duration) !important; word-break: keep-all; position: relative; z-index: 0; isolation: isolate; } .sManual_personnel_image_container { display: inline-flex; justify-content: center; align-items: center; max-width: 100%; margin: 0 auto; border-radius: 12px; transition-duration: var(--sManual_transition_duration) !important; overflow: hidden; /* Prevent image overflow */ position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--sManual_accent_color); } .sManual_personnel_image_container:hover { cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image_container.ghosted { overflow: visible; } /* Ghosts */ .sManual_personnel_image_container.ghosted::before, .sManual_personnel_image_container.ghosted::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border-right: 1px solid var(--pt-border); border-bottom: 1px solid var(--pt-border); z-index: -3; pointer-events: none; opacity: .35; } .sManual_personnel_image_container.ghosted::before { transform: translate(5px,5px); opacity:.5; } .sManual_personnel_image_container.ghosted::after { transform: translate(9px,9px); } /* Default for horizontal images */ .sManual_personnel_image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; position: relative; z-index: 2; background-color: var(--gray-100); border-radius: 12px; transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image:hover { background-color: var(--gray-025); transition-duration: var(--sManual_transition_duration) !important; } .sManual_personnel_image_cover1 { position: relative; background-color: var(--gray-025); /* solid bg */ border-radius: inherit; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; z-index: 1; /* above ghosts, below the img */ } .sManual_personnel_text_new { margin-top: 0.8em; font-size: var(--font_em_2C); min-height: 2em; line-height: 1.2; display: flex; align-items: center; justify-content: center; } .sManual_image_content:hover { pointer-events: none !important; } .sManual_image_content.within_modal { width: 200px !important; margin-left: auto !important; margin-right: auto !important; } .sManual_external_link_new { border: 1px solid var(--sManual_accent_color); border-radius: 8px; padding: 2px 6px; background-color: var(--gray-100); transition-duration: var(--sManual_transition_duration) !important; font-family: var(--mediumfont); font-size: var(--font_em_5); margin-bottom: 0.5em; } .sManual_external_link_new:hover { border-radius: 12px; box-shadow: var(--shadow-hover-soft); border: 1px solid var(--pt-border); background-color: var(--gray-050); } /* !!! ________Grid_Tables */ .sManual_gridtable_item { display: flex; flex-wrap: wrap; align-items: flex-start; background-color: var(--gray-060); color: var(--text_dark); margin-left: 0; margin-bottom: 0.25em; font-family: var(--textfont); font-size: var(--font_em_5A); border-radius: 6px; padding: 0.45em; word-break: normal; height: 3.5em; } .sManual_gridtable_item.main { background-color: var(--gray-100); font-family: var(--headingfont); border: 1px solid var(--sManual_accent_color); transition-duration: var(--sManual_transition_duration) !important; } .sManual_gridtable_item.main.link:hover { border-radius: 12px; box-shadow: var(--shadow-hover-soft); border: 1px solid var(--sManual_accent_color); cursor: pointer !important; background-color: var(--gray-050); transition-duration: var(--sManual_transition_duration) !important; } .sManual_gridtable_item.header { background-color: transparent; font-family: var(--headingfont); font-size: var(--font_em_5A); margin-bottom: 0.4em; padding-top: 0; color: var(--text_dark); border-bottom: 1px solid var(--pt-border); border-radius: 0; height: unset; } .sManual_inspection_type_text { font-family: var(--textfont); } .sManual_inspection_type_text.bold { font-family: var(--headingfont) !important; } /* Safety Manual Top 10 */ /*------------------------------------------------------------------------------*/ .sManual_top10_content_wrapper { display: flex !important; align-items: flex-start; width: 100%; font-family: var(--textfont); } .sManual_top10_content_wrapper.nolinks { font-size: var(--font_em_4A); } .sManual_top10_line { display: flex !important; font-family: var(--textfont); font-size: var(--font_em_4A); margin-bottom: 1em; width: 100%; word-break: normal; } .sManual_top10_number { margin-right: 0.5em; font-family: var(--tablefont_mono_bold); flex-shrink: 0; } /* The div containing the line spans needs to allow inline flow */ .sManual_top10_line > div:last-child { display: inline; } /* Keep spans inline */ .sManual_top10_content, .topic_highlight_ss, .definition_highlight, .direct_quote_highlight { display: inline !important; /* Change from inline-block to inline */ } .topic_highlight_ss { font-family: var(--mediumfont); } .sManual_link_container { display: flex; flex-direction: column !important; } .PILL { font-family: var(--textfont); display: inline-block; margin-bottom: 2px; margin-right: 4px; border: 1px solid var(--gray-400); border-radius: 12px; hyphens: auto; word-break: normal; transition-duration: var(--sManual_transition_duration) !important; text-overflow: ellipsis; height: 0.6rem; overflow: hidden; white-space: nowrap; max-width: 100%; font-size: var(--font_em_6) !important; padding: 2px 8px 2px 8px !important; line-height: 0.6rem !important; } .PILL.doclink { color: var(--text_dark); border: 1px solid var(--sManual_accent_color); } .PILL.doclink:hover { border-radius: 16px !important; cursor: pointer !important; background-color: var(--gray-050); box-shadow: var(--shadow-hover-soft); border: 1px solid var(--sManual_accent_color); } .PILL.log { background-color: var(--opsChart_PM_color); } .PILL.tag { background-color: var(--opsChart_SU_color); } .doccard { position: relative; } .doccard.emphasis { border: 3px solid var(--pt-border); } .sManual_summarycard_title { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); margin-top: 0; margin-bottom: 0; hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ } .sManual_summarycard_subtitle_line { display: inline-flex; margin-top: 0.5em; margin-bottom: 1em; align-content: center; } .sManual_summarycard_subtitle_1 { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ display: inline-flex; } .sManual_summarycard_subtitle_2 { font-family: var(--headingfont); font-size: var(--font_em_3); color: var(--text_dark); hyphens: auto; word-break: break-word; /* Optional: breaks long words if needed */ overflow-wrap: break-word; /* Optional: modern alternative to word-wrap */ display: inline-flex; } /* Safety Manual Card Rev Date */ /*------------------------------------------------------------------------------*/ .sManual_doctype_section_icon { height: calc(100% - 1rem); /* Full height minus margin */ max-height: 5em; max-width: calc(100% - 1rem); /* Prevent horizontal overflow */ position: absolute; right: 0.5rem; top: 50%; /* Center vertically */ transform: translateY(-50%); /* Offset by half the element's height */ object-fit: contain; /* Maintain aspect ratio while fitting */ box-sizing: border-box; } .smaller_grid_container { max-width: 75%; padding-right: 24px; } .accent_text1 { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark); display: block; text-align: right; } .tabletext1 { font-family: var(--tablefont); font-size: var(--font_em_6); text-align: left; display: inline; color: var(--text_dark); } /* !!! ===============================================================================================================*/ /* !!! INPUTS */ /* ===================================================================================================================*/ /* !!! ________Input2 */ .input2 { height: 20px; text-align: left; color: var(--text_dark); font-size: var(--font_em_4); font-family: var(--tablefont); padding: 2px 0 0 5px; border-radius: 8px; border: 1px solid var(--pt-border); margin-left: 0; margin-right: 0; margin-Top: 4px; transition: .4s ease-in-out; background-color: transparent; } .dropdown1.has-options .Select-control { background-color: transparent !important; } .dash-input.input2:focus { background-color: transparent !important; } .dash-input.input2:not([value=""]) { background-color: transparent !important; } /* For inputs with values */ .dash-input.input2[value]:not([value=""]) { background-color: transparent !important; } /* !!! ________Input_tpb_jobname */ .input_tpb_jobname { height: 20px; color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); padding: 2px 0 0 5px; border-radius: 8px; border: 1px solid var(--pt-border); margin-left: 0; margin-right: 0; margin-Top: 4px; transition: .4s ease-in-out; background-color: transparent; float: right; width: 140px; } /* !!! ________Input4 */ .input4 { height: 16px; text-align: right; color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); padding: 1px 2px; border-radius: 5px; border: 2px solid var(--pt-border); margin: 2px 0; display: inline-flex; background-color: transparent; } .dash-dropdown { border-radius: 8px; } /* !!! ===============================================================================================================*/ /* !!! SLIDER */ /* ===================================================================================================================*/ .mantine-Slider-root { margin-bottom: 20px; } .mantine-Slider-track { background-color: rgba(30, 33, 36, 0.12) !important; } .mantine-Slider-bar { background-color: var(--button_color_dark) !important; } .mantine-Slider-thumb { border-color: var(--button_color_dark) !important; border-width: var(--lw-1); background-color: var(--pt-text) !important; } .mantine-Slider-mark { border-color: var(--pt-border); } /* !!! ===============================================================================================================*/ /* !!! DATEPICKER */ /* ===================================================================================================================*/ .DateInput, .DateInput_1 { border-radius: 4px 0 0 4px !important; } .DateInput_input, .DateInput_input_1 { Height: 34px !important; Width: 100% !important; } .SingleDatePickerInput { border-radius: 4px 0 0 4px; width: 100% !important; } .SingleDatePicker_1 { width: 100% !important; } /* !!! ===============================================================================================================*/ /* !!! DATE_RANGE_PICKER */ /* ===================================================================================================================*/ .SingleDatePickerInput { border: 0 solid; background-color: transparent; } .DateRangePicker { color: var(--text_dark); background-color: transparent; } .DateRangePickerInput { color: var(--text_dark); border: solid 0; } .DateRangePicker.DateInput_1 { background-color: transparent; } .DateInput_input { border: solid 1px var(--pt-border); border-radius: 6px; margin-bottom: 4px; height: 36px; color: var(--text_dark); font-size: var(--font_em_5); font-family: var(--textfont); background-color: transparent; } .DateInput.DateInput_1 { border-radius: 14px; color: var(--text_dark); background-color: transparent; } .DateInput_input.DateInput_input_1 { background-color: transparent; } /* !!! ===============================================================================================================*/ /* !!! SEGMENTED_CONTROL */ /* ===================================================================================================================*/ .mantine-SegmentedControl-root { border: solid 1px var(--pt-border); border-radius: 0.5rem; color: var(--text_color_dark); background-color: transparent !important; margin-bottom: 4px; margin-top: 0; align-items: center; max-width: 100%; } .mantine-SegmentedControl-active { background-color: transparent; } .mantine-SegmentedControl-label { color: var(--text_dark); font-family: var(--tablefont); font-size: var(--font_em_6); background-color: transparent; } /* Active segment: shared dark button token */ .mantine-SegmentedControl-labelActive { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); transition: var(--pt-transition); } .card .mantine-SegmentedControl-labelActive { color: var(--text_color_dark) !important; } .mantine-SegmentedControl-labelActive:not(:hover) { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); } .card .mantine-SegmentedControl-labelActive:not(:hover) { color: var(--text_color_dark) !important; } /* !!! ===============================================================================================================*/ /* !!! DATATABLE_CHECKBOX */ /* ===================================================================================================================*/ .dash-select-cell input[type="checkbox"] { appearance: none; width: 15px !important; height: 15px !important; margin: 1px !important; border-radius: 3px !important; outline: none !important; cursor: pointer !important; position: relative !important; background-color: transparent !important; } .dash-select-cell input[type="checkbox"]:checked { color: var(--text_dark) !important; background-color: var(--text_dark) !important; border: solid 2px var(--pt-border) !important; transform: translateX(0em) translateY(0em) !important; box-shadow: 0 0 0 var(--gray-900) !important; } .dash-select-cell input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 10px; border: solid var(--gray-025); border-width: 0 2px 2px 0; transform: rotate(45deg); } .dash-select-cell input[type="checkbox"]:hover { transform: translateX(-0.15em) translateY(-0.15em) !important; transition: .4s ease-in-out !important; box-shadow: 3px 3px 0 var(--gray-900) !important; border: solid 2px var(--pt-border) !important; } .dash-select-cell input[type="checkbox"]:focus { box-shadow: none !important; } /* !!! ===============================================================================================================*/ /* !!! MANTINE_CHECKBOX */ /* ===================================================================================================================*/ .mantine-Checkbox-root { display: inline-flex; margin-left: 2px; } .mantine-Checkbox-input { border: solid 2px var(--pt-border); background-color: transparent; } .mantine-Checkbox-input:hover { transform: translateX(-0.15em) translateY(-0.15em); transition: .4s ease-in-out; box-shadow: 3px 3px 0 var(--gray-900); border: solid 2px var(--pt-border); } .mantine-Checkbox-input:checked, .mantine-Checkbox-input:checked:hover { color: var(--text_dark); background-color: var(--text_dark); border: solid 2px var(--pt-border); transform: translateX(0em) translateY(0em); box-shadow: 0 0 0 var(--gray-900); } .mantine-Checkbox-input:checked:hover { transition: .4s ease-in-out; } /* !!! ===============================================================================================================*/ /* !!! CHECKLIST */ /* ===================================================================================================================*/ .cklst { color: var(--text_dark); font-size: var(--font_em_5A); font-family: var(--textfont); margin: 2px 0; accent-color: var(--text_dark); } /* !!! ===============================================================================================================*/ /* !!! DROPDOWN */ /* ===================================================================================================================*/ .Select-control { border-radius: 2px; border: 1px solid var(--pt-border) !important; background-color: transparent !important; color: var(--text_dark) !important; height: 20px; width: 175px; max-width: 100%; z-index: 1000; } .is-focused .Select-control { border-color: var(--pt-border) !important; box-shadow: 0 0 0 1px var(--pt-border) !important; } .is-pseudo-focused .Select-control { border-color: var(--pt-border) !important; box-shadow: 0 0 0 1px var(--pt-border) !important; } .Select-control:hover { cursor: pointer; } .Select-placeholder, .Select-menu, .Select-value, .Select-input { font-family: var(--textfont); font-size: var(--font_em_5A); } .Select-menu-outer { border-radius: 2px; border: 1px solid var(--pt-border) !important; background-color: var(--pt-body) !important; position: absolute !important; z-index: 9999 !important; } .card .Select-menu-outer { background-color: var(--pt-body); } .Select-menu-outer.is-open { max-height: 600px !important; } .dash-dropdown .Select { position: relative !important; } /* !!! ===============================================================================================================*/ /* !!! MULTISELECT */ /* ===================================================================================================================*/ .mantine-MultiSelect-root { font-family: var(--textfont); font-size: var(--font_em_4A) !important; max-width: 200px !important; } .card, .card.nav, .nav-sidebar, .sidebar, .mantine-MultiSelect-wrapper { overflow: visible !important; } .mantine-MultiSelect-dropdown { background-color: var(--pt-body-medium); border-color: var(--pt-border); z-index: 9999 !important; } .mantine-MultiSelect-input { border: 1px solid var(--pt-border) !important; border-radius: 2px; background-color: transparent !important; color: var(--text_dark) !important; padding-left: 0.25em !important; padding-top: 0.10em !important; padding-bottom: 0.10em !important; } /* Selected tags: shared dark button token */ .mantine-MultiSelect-value { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; font-family: var(--buttonfont); font-size: var(--font_em_5) !important; padding-left: 1em !important; padding-right: 0.5em !important; } .card .mantine-MultiSelect-value { color: var(--text_color_dark) !important; } .mantine-MultiSelect-defaultValueRemove { color: var(--text_color_dark) !important; } /* !!! ===============================================================================================================*/ /* !!! CALENDAR_WIDGET (react-dates / airbnb) */ /* ===================================================================================================================*/ .CalendarMonth_caption.CalendarMonth_caption_1 { color: var(--text_dark); font-family: var(--textfont); z-index: 9999; } .CalendarDay.CalendarDay_1 { background-color: var(--text_dark); color: var(--text_color_dark); border: 1px solid var(--pt-border); z-index: 9999; } /* !!! ===============================================================================================================*/ /* !!! LISTS */ /* ===================================================================================================================*/ ul { margin-top: 0; margin-bottom: 0; color: var(--text_dark); font-family: var(--textfont); padding-left: 2em; font-size: var(--font_em_4); } li { margin-top: 0; margin-bottom: 0; color: var(--text_dark); font-family: var(--textfont); word-break: normal; hyphens: auto; } /* !!! ===============================================================================================================*/ /* !!! TABLE */ /* ===================================================================================================================*/ #SCL_table th:first-child, #SCL_table td:first-child, #SCL_table th:nth-child(2), #SCL_table td:nth-child(2) { font-family: var(--tablefont_mono_bold); padding-right: 6px !important; } .special-font { font-family: var(--tablefont_mono); } .table-scroll-container { overflow-x: auto; width: 100%; display: block; } table { font-size: var(--font_em_5A); font-family: var(--tablefont); border-collapse: collapse; text-align: left; vertical-align: middle; line-height: 14px; width: 100%; color: var(--text_dark); } td.last-row-bold { font-family: var(--tablefont_mono_bold) !important; /* Corrected variable usage */ } th { border-bottom: 1px solid var(--pt-border); font-family: var(--headingfont); padding: 0 !important; } td, th { white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; padding-right: 0 !important; } td { padding: 0 !important; } .table tr { vertical-align: middle; padding: 0; margin: 0; } .table tr:nth-child(odd) td { background-color: var(--gray-150); } table.hover tbody tr:nth-child(odd) td { background-color: var(--gray-150); } /* Remove alternating background in inner nested tables */ #SCL_table table tr td { background-color: transparent; } #SCL_table tr:nth-child(4n+1), #SCL_table tr:nth-child(4n-2) { background-color: var(--gray-100); } #SCL_table th { background-color: var(--gray-025); } #SCL_table td { padding-right: 0 !important; } .botrackertable table { table-layout: auto; /* remove fixed layout to allow text wrapping */ vertical-align: top; } .botrackertable td { white-space: normal; /* allow text wrapping */ vertical-align: top; } /* !!! ===============================================================================================================*/ /* !!! DASH_DATATABLE */ /* ===================================================================================================================*/ .dash-header, .dash-spreadsheet th { color: var(--text_dark) !important; background-color: var(--pt-body-medium) !important; font-family: var(--headingfont); font-size: var(--font_em_5A); text-align: left !important; border-left: none !important; border-right: none !important; border-top: none !important; border-bottom: 1px solid var(--pt-border-soft) !important; } .dash-cell, .dash-spreadsheet td { color: var(--text_dark) !important; background-color: var(--pt-body) !important; font-family: var(--tablefont_mono); font-size: var(--font_em_5A); text-align: left !important; border: none !important; border-color: var(--pt-border-soft) !important; padding: 0 !important; } .dash-select-cell { border: none !important; background-color: transparent !important; text-align: left !important; } .dash-select-header { border: none !important; background-color: transparent !important; } #est_model2_input_table .tr { line-height: 12px !important; } #budsim_coeff_table .dash-cell.column-3 .dash-cell-value, #budsim_coeff_table .dash-cell.column-4 .dash-cell-value, #budsim_coeff_table .dash-cell.column-6 .dash-cell-value, #budsim_coeff_table .dash-cell.column-3 .input-active, #budsim_coeff_table .dash-cell.column-4 .input-active, #budsim_coeff_table .dash-cell.column-6 .input-active, input.input-active.unfocused.selectable.dash-cell-value { border: 1px solid var(--pt-border) !important; border-radius: 6px !important; padding: 0.3em 0.6em !important; margin: 0 !important; } #budsim_coeff_table .dash-cell.column-3 .input-active, #budsim_coeff_table .dash-cell.column-4 .input-active, #budsim_coeff_table .dash-cell.column-6 .input-active { width: unset !important; } input.input-active.unfocused.selectable.dash-cell-value { width: 100%; color: green !important; } .dash-cell-value-container { box-sizing: border-box !important; height: 100% !important; padding: 0.3em 0.6em !important; margin: 0 !important; text-align: right !important; } #budsim_coeff_table .column-3, #budsim_coeff_table .column-4, #budsim_coeff_table .column-5, #budsim_coeff_table .column-6, #budsim_coeff_table .column-7, #budsim_coeff_table .column-8, #budsim_coeff_table .column-9, #budsim_coeff_table .column-10 { text-align: right !important; } .dash-cell.column-6:hover { cursor: pointer; } .dash-spreadsheet tbody tr { background-color: transparent !important; } .dash-spreadsheet tr { height: 6px !important; } .dash-spreadsheet tbody tr:nth-child(even) { background-color: var(--pt-body-medium) !important; } /* !!! ===============================================================================================================*/ /* !!! MATHJAX */ /* ===================================================================================================================*/ .mjx-chtml { font-size: var(--font_em_2) !important; } /* !!! ===============================================================================================================*/ /* !!! MODAL */ /* ===================================================================================================================*/ .modal { position: fixed; top: 100px; left: 0; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; margin-top: 80px; } .modal-dialog { position: relative; width: auto; pointer-events: none; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0, -50px); } @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; } } .modal.show .modal-dialog { transform: none; } .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } .modal-dialog-centered { display: flex; align-items: center; } .modal-content { position: relative; display: flex; flex-direction: column; width: 50%; pointer-events: auto; background: var(--gray-025); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border-radius: 7px; padding: 0 2em 3em; text-align: left; margin-left: auto; margin-right: auto; } .modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding-top: .5em; padding-bottom: 0.5em; font-family: var(--headingfont); font-size: var(--font_em_2); color: var(--text_dark); } .modal-header .btn-close { height: 1rem; width: 1rem; } .modal-header .btn-close:hover { cursor: pointer; } .modal-title { margin-bottom: 0; } .modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .subdata_modal { margin-top: 10rem; } /* !!! ===============================================================================================================*/ /* !!! SAFETY_SCOPE_PAGE */ /* ===================================================================================================================*/ .safetyscope { font-size: var(--font_em_3); color: var(--text_dark); margin-bottom: 0; margin-left: 0; margin-top: 0.25em; font-family: var(--textfont); } .safetyscope.type1 { font-family: var(--headingfont); font-size: var(--font_em_2); margin-top: 0.5em; border-bottom: 1px solid var(--pt-border); } .safetyscope.type2 { font-family: var(--headingfont); font-size: var(--font_em_3); margin-top: 1em; margin-left: 2em; } .safetyscope.type3 { font-size: var(--font_em_4); font-family: var(--headingfont); margin-left: 4em; } .safetyscope.type4 { font-size: var(--font_em_4); margin-left: 6em; } .safetyscope.type5 { font-size: var(--font_em_4); margin-left: 8em; } .safetyscope.type6 { font-size: var(--font_em_4); margin-left: 8em; } /* !!! ________Numbers */ .code-number-part.scope { color: var(--text_dark); } .code-number-part.scope.type3 { font-family: var(--tablefont_mono); } .code-number-part.scope.type1 { font-family: var(--headingfont) !important; } .code-number-part.scope.type3, .code-number-part.scope.type4, .code-number-part.scope.type5, .code-number-part.scope.type6 { color: var(--gray-300); } /* !!! ________Other */ [class^="level"] .highlight { font-size: inherit; color: inherit; } .before-Pipe { font-Family: 'GT-Pressura-Mono-Regular', sans-serif; } .topic_highlight_ss { font-family: var(--mediumfont); } /* !!! ===============================================================================================================*/ /* !!! DISABLED_ELEMENTS */ /* ===================================================================================================================*/ /* !!! ________Card */ .card.disabled, .card.disabled > * { background-color: var(--pt-disabled-bg) !important; } .card.disabled, .card.disabled *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { color: var(--pt-disabled-text); } .card.disabled h1, .card.disabled h2, .card.disabled h3, .card.disabled h4, .card.disabled h5, .card.disabled h6, .card.disabled p, .card.disabled span, .card.disabled label { color: var(--pt-disabled-text) !important; } /* !!! ________Slider */ .card.disabled .mantine-Slider-bar { background-color: var(--pt-disabled-border); } .card.disabled .mantine-Slider-thumb { background-color: var(--pt-disabled-text); border-color: var(--pt-border-soft); } .card.disabled .mantine-Slider-track { background-color: var(--gray-200); } /* !!! ________Segmented_Control */ .card.disabled .mantine-SegmentedControl-labelActive { background-color: var(--pt-disabled-text) !important; color: var(--text_color_dark) !important; } .card.disabled .mantine-SegmentedControl-root { border-color: var(--pt-disabled-text) !important; } /* !!! ===============================================================================================================*/ /* !!! PT_DROPDOWN_LINK */ /* ===================================================================================================================*/ /* Drawer dropdown items: sized to match .PT_navbar pills — small text, tight padding, so the drawer feels consistent with the top nav. The only hover affordance is the border-radius morph — no arrow slide. */ .PT_dropdownLink.pt-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; text-decoration: none !important; color: var(--text_dark) !important; background-color: transparent; text-align: left; margin: 0; padding: 3px 10px; font-family: var(--textfont); font-size: var(--font_em_5); line-height: 1.35; transition: border-radius var(--button-link-transition-duration) var(--ease-standard), background-color var(--button-link-transition-duration) var(--ease-standard), color var(--button-link-transition-duration) ease; white-space: nowrap; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--pt-border) !important; border-radius: 2px; will-change: border-radius, background-color; cursor: pointer; } /* Inner fills the pill so the whole area is clickable. */ .PT_dropdownLink-inner, .PT_dropdownLink-inner:visited, .PT_dropdownLink-inner:hover, .PT_dropdownLink-inner:active { color: var(--text_dark) !important; text-decoration: none !important; display: flex; align-items: center; width: 100%; padding: 0; } .PT_dropdownLink.pt-btn:hover { border-radius: 18px; } .PT_dropdownLink .pt-btn__label { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; } /* Any stray arrow markup inside a drawer item is hidden and the label does not translate on hover — border-radius morph is the only hover affordance. */ .PT_dropdownLink .pt-btn__circle, .PT_dropdownLink .pt-btn__arrow { display: none !important; } .PT_dropdownLink.pt-btn:hover .pt-btn__label { transform: none !important; } .card.nav .pt-btn { width: 100%; } /* !!! ===============================================================================================================*/ /* !!! DROPDOWN_DRAWER */ /* ===================================================================================================================*/ /* Header: thin divider, matches app chrome */ .mantine-Drawer-header { height: 3em !important; border-bottom: 1px solid var(--pt-border-soft) !important; } /* Drawer surface: flat panel, right-edge divider only */ .mantine-Drawer-drawer { border: none !important; border-right: 1px solid var(--pt-border-soft) !important; background-color: var(--pt-body) !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Body: simple centered container. No text-level overrides here — those belong on the items themselves, not on the body. */ .mantine-Drawer-body { padding: 1.5rem 2rem 2rem !important; color: var(--text_dark); display: flex; justify-content: center; } .mantine-Paper-root { border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Mantine modal surfaces — flat */ .mantine-Modal-content, .mantine-Modal-inner { box-shadow: none !important; } /* Inner wrapper: caps at main column but never exceeds available drawer width, so the grid always fits on screen regardless of viewport size. */ .drawer_inner_wrapper { width: 100%; max-width: min(100%, var(--main-col)); display: flex; flex-direction: column; gap: 1rem; padding-left: 1em; } /* Nav-link grid: fixed 3 columns, tight-but-readable spacing, breathing room below */ .drawer_dropdown_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.3rem 1rem; max-height: 60vh; overflow: auto; padding-bottom: 1.5rem; } /* Drawer items take the navbar-pill visual language: filled bg, no border, radius morphs on hover. Scoped to the drawer so the base .PT_dropdownLink styling used elsewhere (e.g. safety_scope section nav) is untouched. */ .drawer_dropdown_grid .PT_dropdownLink.pt-btn { width: 100%; margin: 0; padding: 5px 12px; font-family: var(--textfont); font-size: var(--font_em_5); line-height: 1.4; color: var(--text_dark) !important; background-color: var(--pt-nav-pill-bg) !important; border: none !important; border-radius: 0 !important; transition: var(--pill-morph-transition) !important; } .drawer_dropdown_grid .PT_dropdownLink.pt-btn:hover { background-color: var(--pt-nav-pill-bg-hover) !important; border-radius: 18px !important; } /* !!! ===============================================================================================================*/ /* !!! DASH_AG_GRID */ /* ===================================================================================================================*/ /* Essential structural elements */ .custom-grid-theme .ag-root-wrapper { border: none; font-family: var(--tablefont); color: var(--text_dark) !important; background-color: var(--pt-body) !important; font-size: var(--font_em_5); } .custom-grid-theme .ag-header { font-family: var(--headingfont); background-color: var(--pt-body-medium) !important; border-bottom: 1px solid var(--pt-border) !important; } .custom-grid-theme .ag-header-cell { padding-left: 3px; padding-right: 3px; } .custom-grid-theme .ag-row { line-height: 16px; } .custom-grid-theme .ag-row-odd { background-color: var(--pt-body-light) !important; } .custom-grid-theme .ag-row-even { background-color: var(--pt-body) !important; } .custom-grid-theme .ag-cell { overflow: hidden; text-overflow: ellipsis; padding-left: 3px; padding-right: 3px; } .ag-cell.mono-font { font-family: var(--tablefont_mono) !important; } /* Right-aligned numeric cells */ .custom-grid-theme .ag-numeric-cell { text-align: right; } /* Your custom modifications */ .custom-grid-theme .monospace-cell { font-family: var(--tablefont_mono); } .right-aligned-header .ag-header-cell-label { justify-content: flex-end !important; } /* !!! ===============================================================================================================*/ /* !!! MAIN_LAYOUT_ELEMENTS */ /* ===================================================================================================================*/ /* !!! ________Html / Body */ /* scroll-padding-top reserves space for the sticky navbar when :target jumps to an anchor, so the destination isn't hidden behind the bar. font-size here is the SINGLE fluid anchor for the whole app's type scale. Every --font_em_* token is em-based and ultimately cascades from body's 1rem, so every text in the app breathes with viewport width because of this one clamp(). The preferred value is in rem so users who bump their browser's default size still get a proportional boost. Resolved values (assuming browser default 16px): 800px viewport → ~15.2px (just above 15px floor) 1366px viewport → ~16.0px (current look, unchanged) 1700px viewport → ~16.6px 2560px viewport → 17px (clamped ceiling) */ html { font-size: clamp(0.9375rem, 0.875rem + 0.15vw, 1.0625rem); scroll-padding-top: 200px; } body { background-color: var(--pt-body) !important; color: var(--text_dark); background-size: cover; background-position: center; overflow-y: auto; overflow-x: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 0; margin: 0; } /* DO NOT set overflow on html — it breaks position: sticky on the navbar. */ /* !!! ________Wrapper */ .wrapper { display: flex; flex-direction: column; width: 100%; min-height: 100vh; align-items: stretch; } /* Remove dense grid background on non-landing pages; open light fields */ .wrapper:not(.landing-page-active) { background-color: var(--pt-body); background-image: none; } /* Full-width app row (avoids narrow “shrink-to-content” column under align-items: center). */ .wrapper > .PT_navbar_wrapper, .wrapper > .page, .PT_navbar_wrapper > .PT_navbar { width: 100%; max-width: 100%; box-sizing: border-box; } /* Let .page grow to fill remaining wrapper height so the footer chain can reach the bottom. */ .wrapper > .page { flex-grow: 1; } /* create_layout footer wrapper: stretch like the rest of the page column. */ .layout-with-footer { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; flex-grow: 1; } /* Push main content to grow, keeping footer pinned to the bottom of the viewport. */ .layout-with-footer > :first-child { flex-grow: 1; } /* background-attachment: fixed is avoided here for two reasons: 1. It conflicts with backdrop-filter on the navbar (which creates a new stacking context), causing the image to only appear behind the header on many browsers. 2. It is completely broken on iOS Safari. Instead, the image is painted as a position:fixed pseudo-element so it always covers the full viewport regardless of scroll depth, without any stacking-context conflicts. The background-color is a dark fallback shown instantly while the image loads (or if the image file is missing — make sure IMG_0081.jpg is committed to git). */ .wrapper.landing-page-active { background-color: var(--pt-body-dark); isolation: isolate; } .wrapper.landing-page-active::before { content: ''; position: fixed; inset: 0; background-image: url('/assets/IMG_0081.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; /* Alt palette: softer overlay, still readable */ filter: brightness(0.55) saturate(0.9); } /* !!! ________Page */ /* Side tracks (1fr) absorb all free space; center column tracks --main-col whose clamp() holds the minimum, so sides compress to zero before the center shrinks. */ .page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(100%, var(--main-col))) minmax(0, 1fr); column-gap: var(--gap); align-items: start; } /* !!! ________Navigation_Column */ .navigation_column { font-size: var(--font_em_3A); grid-column: 1; justify-self: end; width: var(--nav-width); position: sticky; top: var(--top-offset); z-index: 1000; padding-top: 1rem; padding-left: 0.5rem; } /* Collapse left column when it has no content — rightcol is always None in current layout. */ .navigation_column:empty { display: none; width: 0; padding: 0; } /* Also hide via hard-pixel media query (CSS variables are not valid in @media conditions). */ @media (max-width: 1120px) { .navigation_column { display: none; width: 0; padding: 0; } } /* Hide the Sections FAB on narrow screens where it overlaps content. */ @media (max-width: 800px) { .section-nav-fab-root { display: none; } } /* !!! ________Main_container */ .main-container { grid-column: 2; width: 100%; max-width: var(--main-col); margin: 0; margin-inline: auto; box-sizing: border-box; font-size: var(--font_em_3); padding-left: 2px; align-self: stretch; display: flex; flex-direction: column; color: var(--text_dark); } #page-content { flex-grow: 1; display: flex; flex-direction: column; } /* !!! ________Section */ /* Alt palette: match page background (no alternating band) */ .section.even_section { --full-width: calc(50vw - 50%); margin-left: calc(-1 * var(--full-width)); margin-right: calc(-1 * var(--full-width)); padding-left: var(--full-width); padding-right: var(--full-width); padding-top: 1em; background-color: var(--pt-body) !important; } /* !!! ________Content Container */ .content_container { display: flex; flex-direction: row; width: 100%; gap: 1.25em; margin-top: 1em; } /* !!! ________Content */ .content { flex: 1; /* Takes up all available space */ min-width: 0; /* Prevents overflow issues */ } /* !!! ________Content_Settings */ .content_settings { flex: 0 1 auto; min-width: 0; flex-basis: 15%; max-width: 25%; } /* !!! ________PT_navbar */ /* Sit below top edge and slightly in from sides — content behind stays visible */ #PT_navbar_wrapper.PT_navbar_wrapper, .PT_navbar_wrapper { font-size: var(--font_em_3A); position: sticky !important; top: 0.25rem !important; display: flex; flex-direction: column; width: 100%; align-items: stretch; z-index: 99999; padding: 0.325rem 1.125rem 0 !important; box-sizing: border-box !important; } /* Full-width bar — no grid here. Content centering is delegated to .PT_navbar_main using the same max-width + margin-inline: auto as .main-container, so the two always stay in sync regardless of scrollbars or sticky-positioning quirks. */ /* Frosted-glass strip: token-driven background, rounded lip */ .PT_navbar { position: sticky !important; top: 0 !important; z-index: 9999 !important; display: block; width: 100%; background: var(--pt-nav-bg) !important; backdrop-filter: blur(6px) saturate(1.12) brightness(1.02) !important; -webkit-backdrop-filter: blur(8px) saturate(1.12) brightness(1.02) !important; border: none !important; border-bottom: none !important; /* Only the top bar is rounded; cards / controls elsewhere stay square */ border-radius: 12px !important; overflow: hidden; color: var(--text_dark); transition: background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out, box-shadow 0.5s ease-in-out; } /* Landing pages (/, /home, /login, /landing) — two-class selectors are more specific */ .PT_navbar_landing.PT_navbar, .PT_navbar.PT_navbar_landing { background: var(--pt-nav-bg-landing) !important; backdrop-filter: blur(4px) saturate(1.12) brightness(1.05) !important; -webkit-backdrop-filter: blur(4px) saturate(1.12) brightness(1.05) !important; border-bottom: none !important; } .PT_navbar:hover { box-shadow: 0 0 0 1px var(--pt-border) !important; } .PT_navbar_landing.PT_navbar:hover { background: var(--pt-nav-bg-landing-hover) !important; } .PT_navbar_section_nav::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, hsla(100, 15%, 85%, .05), hsla(100, 10%, 80%, .05)); border-radius: 10px; pointer-events: none; } .PT_navbar > * { display: flex; align-items: center; height: 100%; } /* Mirrors .main-container's centering exactly: same max-width + margin-inline: auto. This guarantees the logo left edge and logout right edge are always flush with the page content below, at every viewport width. */ .PT_navbar > .PT_navbar_main { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: 100%; max-width: var(--main-col); margin: 0; margin-inline: auto; min-width: 0; box-sizing: border-box; column-gap: 0.35rem; padding-left: 2px; } .PT_navbar.scrolled .title { opacity: 0; } .PT_navbar_leftcontent { flex: 0 0 auto; margin-right: auto; align-items: center; min-width: 0; } .PT_navbar_rightcontent { flex: 1 1 0; margin-left: 0; min-width: 0; max-width: 100%; text-align: right; justify-content: flex-end; } .PT_navbar_menu_wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; text-align: right; padding: 0; margin: 0; min-width: 0; flex: 1 1 auto; max-width: 100%; column-gap: 6px; } /* Scroll category buttons inside the bar; logout stays pinned to the right edge of the main column. */ .PT_navbar_nav_items { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; } .PT_navbar_nav_items::-webkit-scrollbar { height: 4px; } .PT_navbar_nav_items::-webkit-scrollbar-thumb { background: rgba(30, 33, 36, 0.35); border-radius: 4px; } /* Navbar pills: slightly tighter than app-wide .button-menu defaults so more fit before scroll. font-size uses the --font_em_5 token (0.65em). Because it's em and the root html font-size is fluid (clamp()), pill text scales smoothly with viewport width — no per-breakpoint font-size overrides needed. */ /* Lighter GT Pressura cut for nav labels (--textfont = Standard Light) */ .PT_navbar .button-menu.pt-btn { min-width: 0; max-width: 12rem; margin: 4px 6px 4px 0; padding: 3px 10px 3px 10px; height: auto; font-size: var(--font_em_5); font-family: var(--textfont) !important; } .PT_navbar .button-menu.pt-btn .pt-btn__label { overflow: hidden; text-overflow: ellipsis; } /* Tighten spacing and pill width when the main column gets crowded. Font size already handled by the clamp() above — no font-size override needed here. */ @media (max-width: 1500px) { .PT_navbar .button-menu.pt-btn { max-width: 9rem; padding: 2px 5px 2px 7px; margin-right: 1px; } .PT_navbar_nav_items { gap: 2px; } } @media (max-width: 1280px) { .PT_navbar .button-menu.pt-btn { max-width: 7rem; } } /* Top menu: no sliding-arrow animation (avoids overlap on narrow pills); simple hover only. */ .PT_navbar .button-menu.pt-btn .pt-btn__circle { display: none !important; } .PT_navbar .button-menu.pt-btn:hover .pt-btn__label { transform: none !important; } .PT_navbar .button-menu.pt-btn:not(.dark) { border: none !important; color: var(--text_dark) !important; background-color: var(--pt-nav-pill-bg) !important; border-radius: 0 !important; transition: var(--pill-morph-transition) !important; } .PT_navbar .button-menu.pt-btn:not(.dark):hover { background-color: var(--pt-nav-pill-bg-hover) !important; border: none !important; color: var(--text_dark) !important; border-radius: 18px !important; } /* Logout / secondary: same pill language + hover radius */ .PT_navbar .button-menu.pt-btn.dark { background-color: var(--pt-nav-pill-bg) !important; color: var(--text_dark) !important; border: none !important; border-radius: 0 !important; transition: var(--pill-morph-transition) !important; } .PT_navbar .button-menu.pt-btn.dark:hover { background-color: var(--pt-nav-pill-bg-hover) !important; filter: none; color: var(--text_dark) !important; border-radius: 18px !important; } /* When the navbar itself is hovered, every pill flips to the dark button surface with light label text. The existing color/background transitions on each pill carry the animation. */ .PT_navbar:hover .button-menu.pt-btn, .PT_navbar:hover .button-menu.pt-btn.dark, .PT_navbar:hover .button-menu.pt-btn:not(.dark), .PT_navbar:hover .button-menu.pt-btn:hover, .PT_navbar:hover .button-menu.pt-btn.dark:hover, .PT_navbar:hover .button-menu.pt-btn:not(.dark):hover { background-color: var(--button_color_dark) !important; color: var(--text_color_dark) !important; } .PT_navbar:hover .button-menu.pt-btn .pt-btn__label { color: var(--text_color_dark) !important; } /* Keep the arrow/logout icons legible against the dark fill during navbar hover */ .PT_navbar:hover .button-menu.pt-btn .pt-btn__icon, .PT_navbar:hover .button-menu.pt-btn.dark .pt-btn__icon { filter: brightness(0) invert(1); opacity: 0.85; } /* Navbar logo: paint the shape via mask + background-color so the color is transitionable. The normally blocks CSS from reaching the SVG's inner , so we neutralize the img's own pixels with a transparent SVG of the same viewBox (preserves intrinsic aspect / 40px layout height set in main_layout.py) and let background-color fill the masked shape. Default is the logo's original gray (#4a4d51); on navbar hover this lerps to MonCon red. Applies to both regular and landing variants. */ .PT_navbar #navbar-logo { content: url("data:image/svg+xml;utf8,"); background-color: #4a4d51; -webkit-mask: url('/assets/logo.svg') no-repeat center / contain; mask: url('/assets/logo.svg') no-repeat center / contain; filter: none; opacity: 1; transition: background-color 0.6s ease-in-out; cursor: pointer; } /* The logo is wrapped in (see main_layout.py). The content:url() replacement above plus overflow:hidden on .logo-container can suppress the default anchor pointer in some browsers, so set it explicitly on the container and its anchor child. */ .logo-container, .logo-container > a, .logo-container > a > img { cursor: pointer; } .PT_navbar:hover #navbar-logo, body:has(.section-nav-fab-details > summary.section-nav-fab-toggle:hover) .PT_navbar #navbar-logo { background-color: var(--monconred); } /* Arrows in pills: dark on light gray */ .PT_navbar .pt-btn__icon { filter: none; opacity: 0.75; } /* Logout uses white SVG — invert to dark on light-gray pill */ .PT_navbar .button-menu.pt-btn.dark .pt-btn__icon { filter: brightness(0); opacity: 0.65; } /* Logout block stays pinned to the right; category buttons live in the scrollable region. display:flex + align-items:center prevents the invisible Dash Location/redirect divs inside the logout wrapper from adding phantom height that misaligns the button. */ .PT_navbar_menu_wrapper > div:not(.PT_navbar_nav_items) { flex: 0 0 auto; display: flex; align-items: center; } .PT_navbar_nav_items > div { flex: 0 0 auto; } /* !!! ________Footer */ .footer_section { background-color: var(--gray-700); margin-top: 3em; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; box-sizing: border-box; } .footer_container { width: min(100%, var(--main-col)); max-width: 100%; margin-inline: auto; margin: 0 auto; display: flex; flex-direction: row; gap: 20px; padding-bottom: 3em; box-sizing: border-box; } .footer_container h4, #page-content .footer_container h4, .main-container .footer_container h4 { margin-top: 2em; /* Force light text — ID-qualified variant beats the #page-content / .main-container h4 rule later in this file, which also carries !important. */ color: var(--text_color_dark) !important; } .footer_section .span_1, .footer_section .span_2 { color: var(--text_color_dark); } .footer-meta-item { display: flex; flex-direction: column; height: 100%; } .footer-meta-item .footer-meta-date { margin-top: auto; } .col, [class^="col-"], [class*=" col-"] { transition: none; } /* !!! ________Side_Navbar */ .fixed-section-nav { padding: 0 0.75em 0.75em; max-height: calc(100vh - 40px); scrollbar-width: none; -ms-overflow-style: none; backdrop-filter: blur(10px); background-color: var(--light_transparent_gray); border-radius: 10px; position: relative; overflow-x: hidden; transition: 0.3s ease-in-out; } .fixed-section-nav:hover { background-color: var(--gray-025); } .section_nav_container { display: flex; flex-direction: column; gap: 3px; position: relative; } .fixed-section-nav .PT_dropdownLink.active { font-family: var(--headingfont); } /* Active-item rail: a 3px red bar hugging the left edge of the active link. Host is already position:relative (see .PT_dropdownLink.pt-btn) so the pseudo anchors cleanly without disturbing padding or the 1px border. */ .fixed-section-nav .PT_dropdownLink.active::before { content: ""; position: absolute; left: 2px; top: 4px; bottom: 4px; width: 3px; background-color: var(--monconred); border-radius: 2px; pointer-events: none; } /* --- Section navigation: floating
TOC (see _build_section_nav_drawer) --- */ /* Fixed pill at bottom-left; expands a panel upward when clicked. */ .section-nav-fab-root { position: fixed; bottom: 4rem; left: 1.75rem; z-index: 2000; } .section-nav-fab-details { /* override .fixed-section-nav defaults so they don't interfere */ position: static; max-height: none; overflow: visible; background: transparent; backdrop-filter: none; border-radius: 0; padding: 0; } /* The summary row is the visible "Sections" pill. Idle surface mirrors the .PT_navbar frosted-glass look (same --pt-nav-bg + backdrop-filter + radius, no border). Hover adds the same 1px ring as .PT_navbar:hover instead of a background shift. */ .section-nav-fab-details > summary.section-nav-fab-toggle { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; font-size: var(--font_em_4A); font-family: var(--headingfont); color: var(--text_dark); background: var(--pt-nav-bg); backdrop-filter: blur(6px) saturate(1.12) brightness(1.02); -webkit-backdrop-filter: blur(8px) saturate(1.12) brightness(1.02); border: none; border-radius: 12px; cursor: pointer; user-select: none; list-style: none; transition: background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out, box-shadow 0.5s ease-in-out; } .section-nav-fab-details > summary.section-nav-fab-toggle::-webkit-details-marker { display: none; } .section-nav-fab-details > summary.section-nav-fab-toggle::marker { display: none; } /* Paired hover: hovering either the PT_navbar OR the Sections pill puts the 1px outline ring on BOTH (cross-linked via :has()). Self-hover is also covered here so the ring shows regardless of :has() support. */ .section-nav-fab-details > summary.section-nav-fab-toggle:hover, body:has(.PT_navbar:hover) .section-nav-fab-details > summary.section-nav-fab-toggle { box-shadow: 0 0 0 1px var(--pt-border); } body:has(.section-nav-fab-details > summary.section-nav-fab-toggle:hover) .PT_navbar { box-shadow: 0 0 0 1px var(--pt-border) !important; } /* Panel appears above the pill when open. */ .section-nav-fab-panel { position: absolute; bottom: calc(100% + 0.5rem); left: 0; min-width: 13rem; max-width: min(20rem, 90vw); max-height: 60vh; overflow-y: auto; background: var(--pt-body); border: 1px solid var(--gray-200); border-radius: 10px; padding: 0.6rem 0.75rem 0.5rem; box-shadow: 2px 6px 24px rgba(0,0,0,0.13); display: none; } .section-nav-fab-details[open] .section-nav-fab-panel { display: block; } .section-nav-fab-panel-title { display: block; font-family: var(--headingfont); font-size: var(--font_em_4); color: var(--text_dark); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .section-nav-fab-back { display: block; margin-top: 0.5rem; cursor: pointer; } /* Section link list — styled to match the top dropdown drawer items (.PT_dropdownLink.pt-btn): small text, thin border, radius-morph hover. */ .section-nav-drawer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .section-nav-drawer-list li { margin: 0; } .section-nav-drawer-link { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; width: 100%; text-align: left; margin: 0; padding: 3px 10px; font-family: var(--textfont); font-size: var(--font_em_5); line-height: 1.35; color: var(--text_dark) !important; background-color: transparent; text-decoration: none !important; border: 1px solid var(--pt-border); border-radius: 2px; white-space: nowrap; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; cursor: pointer; will-change: border-radius, background-color; transition: border-radius var(--button-link-transition-duration) var(--ease-standard), background-color var(--button-link-transition-duration) var(--ease-standard), color var(--button-link-transition-duration) ease; } .section-nav-drawer-link:hover { border-radius: 18px; background-color: transparent; } .section-nav-drawer-link.active { font-family: var(--headingfont); border-color: var(--pt-border); } .section-nav-drawer-link.active::before { content: ""; position: absolute; left: 2px; top: 4px; bottom: 4px; width: 3px; background-color: var(--monconred); border-radius: 2px; pointer-events: none; } .section-nav-override-inner .section_nav_container { flex-direction: column; } /* !!! ===============================================================================================================*/ /* !!! MISC */ /* ===================================================================================================================*/ .collapse_symbol { margin-left: 8px; margin-bottom: 4px; font-size: var(--font_em_4); transition: transform 0.2s ease-in-out; } .checkbox-wrapper { position: absolute; top: 0; right: 0; padding: 5px; } .dash-delete-cell { height: 12px; } .fa, .fas { margin: 0; padding: 0; } #howto-md img { max-width: 100%; } /* !!! ________Logo_entry_animation */ .logo-container { overflow: hidden; align-items: center; padding: 0; margin: 4px; } .rising-logo { animation: rise 1.5s ease-out forwards; position: relative; align-items: center; } .img { align-items: center; } @keyframes rise { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* !!! ===============================================================================================================*/ /* !!! JOB_CALENDAR (milestones grid) */ /* ===================================================================================================================*/ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background-color: var(--pt-body-light); } .calendar-header { background: var(--pt-body-light); color: var(--text_dark); padding: 10px; text-align: center; font-family: var(--headingfont); } .calendar-day { background: var(--pt-body-light); min-height: 175px; padding: 5px; border: 1px solid var(--gray-100); position: relative; font-size: var(--font_em_4A); background-color: var(--gray-025); margin: 3px; border-radius: 8px; } .calendar-day.today { border: 2px solid var(--gray-800); } .calendar-day.empty { background-color: var(--gray-050); } .calendar-date { font-family: var(--headingfont); color: var(--text_dark); } .calendar-event { background: var(--gray-100); border: 1px solid var(--pt-border); margin: 2px 0; padding: 2px 4px; border-radius: 6px; font-size: var(--font_em_4A); } .calendar-event.TCO { background: var(--lightyellow); } .calendar_jobname { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark); } .calendar_milestone_type { font-family: var(--tablefont); font-size: var(--font_em_5A); color: var(--text_dark); margin: 2px 0; } .calendar_title { font-family: var(--headingfont); color: var(--text_dark); font-size: var(--font_em_2); margin-bottom: 4px; } /* ===================================================================================================================*/ /* !!! PROJECT_SUMMARY */ /* ===================================================================================================================*/ .projSum_image_container { position: relative; } .projSum_image_container:hover { cursor: pointer; } /* ===================================================================================================================*/ /* !!! OPS_CHART */ /* ===================================================================================================================*/ .opsChart_proj_card { border-radius: 8px; padding: 0; display: flex; flex-direction: column; width: 100%; height: 240px; overflow: visible !important; position: relative; } .opsChart_proj_card.NOTACTIVE { border: 1px solid var(--pt-disabled-border) !important; background-color: var(--pt-disabled-bg); } /* When the project is completed/inactive, card header text (project name, start date, TCO date, contract value) uses the unified disabled text color. Image overlays (jobno, comp%) keep their white-on-shadow look since they sit atop the gray image overlay. */ .opsChart_proj_card.NOTACTIVE .opsChart_proj_name, .opsChart_proj_card.NOTACTIVE .opsChart_proj_info, .opsChart_proj_card.NOTACTIVE .opsChart_role_type_stats { color: var(--pt-disabled-text) !important; } /* Project header containing the project name */ .opsChart_proj_header { width: 100%; margin: 0 0 2px; padding-bottom: 1px; display: inline-block; position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 100; } .opsChart_proj_name { font-family: var(--headingfont); font-size: var(--font_em_4); color: var(--text_dark); margin: 0 3px; display: inline-block; } .opsChart_proj_info { font-family: var(--textfont); font-size: var(--font_em_5); color: var(--text_dark); margin: 0; margin-left: 0.15em; display: inline-block; } /* Main content row that contains everything except the project name */ .opsChart_content_row { display: flex; width: 100%; align-items: flex-start; margin: 0; height: 100%; min-height: 3em; } /* Staff columns - each takes equal space of remaining width */ .opsChart_staff_column { flex: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; margin: 1px; height: 100%; gap: 0.15em; } /* !!! ________Staff_Card */ .opsChart_staff_card { font-family: var(--tablefont); display: block; position: relative; align-items: center; border: 1px solid var(--gray-300); border-radius: 5px; margin: 0.1em; padding: 0.1em 0.2em; box-shadow: var(--shadow-hover-soft); color: var(--text_dark); background-color: transparent; transition: var(--pt-transition); cursor: pointer; } /* Base staff card styles */ .opsChart_staff_card.PX { background-color: var(--opsChart_PX_color); } .opsChart_staff_card.PM, .opsChart_staff_card.AP, .opsChart_staff_card.PE { background-color: var(--opsChart_PM_color); } .opsChart_staff_card.SU, .opsChart_staff_card.AS, .opsChart_staff_card.FE { background-color: var(--opsChart_SU_color); } .opsChart_staff_card.ME { background-color: var(--opsChart_ME_color); } .opsChart_staff_card.PC { background-color: var(--opsChart_PC_color); } .opsChart_staff_card.Future { border: 1px dashed var(--gray-300) !important; color: rgba(0,0,0,0) !important; box-shadow: None !important; } .opsChart_staff_card.NOTACTIVE { border: 1px solid var(--pt-disabled-border); color: var(--pt-disabled-text); } .opsChart_staff_card.Assign { color: var(--warning_color_dark) !important; border: 1px var(--warning_color_dark) solid; } .opsChart_staff_card.PRELIM { background-color: var(--lightyellow); border: 1px var(--warning_color_dark) solid; } .opsChart_staff_name.PRELIM { color: var(--warning_color_dark) !important; } /* !!! ________Staff_Images */ /* Style for the image container */ .opsChart_staff_image_container { width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; border-radius: 4px; margin-bottom: 2px; border: none; } .opsChart_staff_image { border: None !important; width: 100%; height: 5rem; /* Set your desired fixed height */ object-fit: cover; display: block; cursor: pointer; object-position: center; /* Controls which part stays visible */ } .opsChart_staff_card.opsChart_staff_image { height: auto !important; min-height: 0.7rem; padding: 4px 6px !important; display: flex !important; flex-direction: column; align-items: center; } /* Role-tinted overlay when card is NOTACTIVE. The shared ::after geometry is defined once; each role just supplies --role-overlay. */ .opsChart_staff_image_container[class*="role-"].NOTACTIVE::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-color: var(--role-overlay, rgba(255, 255, 255, 0.75)); } .opsChart_staff_image_container.role-SU, .opsChart_staff_image_container.role-AS, .opsChart_staff_image_container.role-FE { --role-overlay: rgba(233, 229, 243, 0.75); } .opsChart_staff_image_container.role-PM, .opsChart_staff_image_container.role-AP, .opsChart_staff_image_container.role-PE { --role-overlay: rgba(240, 248, 230, 0.75); } .opsChart_staff_image_container.role-PX { --role-overlay: rgba(251, 251, 239, 0.75); } .opsChart_staff_image_container.role-ME { --role-overlay: rgba(251, 244, 237, 0.75); } .opsChart_staff_image_container::after { transition: background-color 0.3s ease-in-out; } .opsChart_staff_title { font-family: var(--headingfont) !important; font-size: var(--font_em_5); position: absolute; left: .5em; bottom: 0.25em; text-shadow: 0 0 12px rgba(0, 0, 0, 1) !important; overflow: hidden; } .opsChart_staff_title.NOTACTIVE { text-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important; } .opsChart_staff_title.NOTACTIVE.Future { text-shadow: None !important; } .opsChart_staff_title.ASSIGN { text-shadow: None !important; } .opsChart_staff_card.FE .opsChart_staff_title, .opsChart_staff_card.SU .opsChart_staff_title, .opsChart_staff_card.AS .opsChart_staff_title { color: var(--opsChart_SU_color); } .opsChart_staff_card.PE .opsChart_staff_title, .opsChart_staff_card.PM .opsChart_staff_title, .opsChart_staff_card.AP .opsChart_staff_title { color: var(--opsChart_PM_color); } .opsChart_staff_card.ME .opsChart_staff_title { color: var(--opsChart_ME_color); } .opsChart_staff_card.PX .opsChart_staff_title { color: var(--opsChart_PX_color); } .opsChart_staff_years { font-family: var(--headingfont); font-size: var(--font_em_6); color: var(--text_dark); position: absolute; right: 4px; top: 6px; padding: 0.2em 0.4em; min-width: 2em; border: 1px solid var(--gray-500); border-radius: 12px; /* Increased from 9px for more roundness */ text-align: center; /* Centers text */ display: inline-block; /* Makes it behave like a badge */ box-sizing: border-box; /* Ensures padding is included in size */ cursor: pointer; vertical-align: middle; } .opsChart_staff_card.NOTACTIVE .opsChart_staff_years { border: 1px solid var(--pt-disabled-border) !important; color: var(--pt-disabled-text) !important; } .opsChart_staff_card.FE .opsChart_staff_years, .opsChart_staff_card.SU .opsChart_staff_years, .opsChart_staff_card.AS .opsChart_staff_years { background-color: var(--opsChart_SU_color); } .opsChart_staff_card.PE .opsChart_staff_years, .opsChart_staff_card.PM .opsChart_staff_years, .opsChart_staff_card.AP .opsChart_staff_years { background-color: var(--opsChart_PM_color); } .opsChart_staff_card.ME .opsChart_staff_years { background-color: var(--opsChart_ME_color); } .opsChart_staff_card.PX .opsChart_staff_years { background-color: var(--opsChart_PX_color); } .opsChart_staff_card.PC .opsChart_staff_years { background-color: var(--opsChart_PC_color); } .card.nav .opsChart_staff_card { height: 1em !important; box-shadow: none !important; pointer-events: none !important; display: block; align-items: center; } .transparentPhoto { opacity: 0 !important; } .opsChart_staff_card:hover { border-radius: 12px; cursor: default; font-family: var(--headingfont) !important; z-index: 1000 !important; } .opsChart_staff_name { font-size: var(--font_em_5); font-family: var(--tablefont); margin: 0; overflow: hidden !important; /* Hide overflow text */ text-overflow: ellipsis !important; /* Add ellipsis for overflow text */ white-space: nowrap; /* Keep text on single line */ width: 100%; /* Take up full width */ transition: var(--pt-transition); } .opsChart_staff_name:hover { cursor: pointer; } .card nav .opsChart_staff_card { box-shadow: none; height: auto; min-height: unset; /* Remove any minimum height */ } .opsChart_staff_card:hover .opsChart_staff_name { font-family: var(--headingfont) !important; } .opsChart_px_card_title { font-family: var(--headingfont); font-size: var(--font_em_2C); margin-bottom: 2px; } .opsChart_staff_temp_NOTACTIVE { position: absolute; top: 45%; left: 25%; transform: rotate(-45deg); font-family: var(--headingfont); color: var(--pt-disabled-text); text-shadow: 0 0 10px rgba(255, 255, 255, 1) !important; } .opsChart_staff_temp_ { position: absolute; top: 45%; left: 25%; transform: rotate(-45deg); font-family: var(--headingfont); color: var(--text_color_dark); text-shadow: 0 0 10px rgba(0, 0, 0, 1) !important; } /* Wrapper for card with image */ .opsChart_card_with_image { display: flex; flex-direction: row; width: 100%; margin: 0; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); border-radius: 8px; align-items: stretch; background-color: var(--gray-025) !important; } /* !!! ________Project_Images */ .opsChart_proj_img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 6; border-radius: 8px 0 0 8px !important; } .staff_modal_project_photo { width: 100%; height: 120px; object-fit: cover; object-position: center; } /* Style for the image container */ .opsChart_image_container { width: 100px; min-width: 5.5rem; margin: 0; padding: 0; border-radius: 8px 0 0 8px !important; border: 1px solid var(--pt-border-soft); border-right: none; display: block; position: relative; z-index: 1; box-sizing: border-box; } .opsChart_image_container.NOTACTIVE { border-left: 1px solid var(--pt-disabled-border) !important; border-top: 1px solid var(--pt-disabled-border) !important; border-bottom: 1px solid var(--pt-disabled-border) !important; border-radius: 8px 0 0 8px !important; z-index: 6; } .opsChart_image_container.NOTACTIVE::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--pt-disabled-overlay); pointer-events: none; z-index: 7; border-radius: 8px 0 0 8px !important; } /* Overlay for projects that haven't started */ .opsChart_no_image_fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--gray-100); color: var(--text_dark); font-family: var(--headingfont); font-size: var(--font_em_4A); border-radius: 8px 0 0 8px; } .opsChart_card_with_image .opsChart_proj_card { border-radius: 0 8px 8px 0; width: calc(100% - 5rem); box-sizing: border-box; border: 1px solid var(--pt-border-soft); border-left: none; margin: 0; } .custom-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; width: 100%; } .opsChart_comp_percent { position: absolute; bottom: 0; left: 3px; color: var(--text_color_dark); font-family: var(--headingfont); font-size: var(--font_em_2B); z-index: 7; text-shadow: 0 0 12px rgba(0, 0, 0, 1) !important; padding: 2px 6px; cursor: pointer; transition: var(--pt-transition); } .opsChart_jobno { position: absolute; top: 3px; left: 3px; color: var(--text_color_dark); font-family: var(--headingfont); font-size: var(--font_em_4); z-index: 7; pointer-events: none; text-shadow: 0 0 12px rgba(0, 0, 0, 1) !important; } .opsChart_modal_button { cursor: pointer; transition: background-color var(--button-link-transition-duration) ease; } .opsChart_modal_button:hover { background-color: rgba(0, 0, 0, 0.1); } .opsChart_role_type_stats { line-height: 0.75; } .card h4 + .opsChart_role_type_stats { margin-bottom: 3px !important; } .staff-project-card > div { white-space: nowrap; overflow: hidden; } /* Modal z-index fixes */ .modal-backdrop { z-index: 9000 !important; } .modal-backdrop.show { opacity: 1 !important; background-color: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } .modal { z-index: 9001 !important; } .modal-dialog { z-index: 9002 !important; width: 1600px; } /* The modal backdrop/container — fill the viewport */ #curve-modal, #staff-modal, .centered-modal { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; margin: 0 !important; overflow: visible !important; } /* The dialog — just sizing, no positioning */ #curve-modal .modal-dialog, #staff-modal .modal-dialog, .centered-modal .modal-dialog { width: 90%; max-width: 1200px; margin: 0; pointer-events: none; } /* The content box — scrolling behavior */ #curve-modal .modal-content, #staff-modal .modal-content, .centered-modal .modal-content { max-height: 80vh; overflow-y: auto; pointer-events: auto; } .ml-auto { position: absolute; top: 6px; right: 6px; padding: 5px 10px; background: var(--button_color_dark) !important; text-align: center; color: var(--text_dark); border-radius: 6px; margin: 12px; font-family: var(--buttonfont); transition: var(--pt-transition); } .ml-auto:hover { border-radius: 12px; } .opsChart_role_type_stats .span_1, .opsChart_role_type_stats .span_2 { font-size: var(--font_em_5); color: var(--text_dark); margin-bottom: 0; margin-top: 0; padding: 0; } /* !!! ________Staff_History_Modal_Stuff */ .staff-history-proj-card { background-color: var(--pt-body-medium); padding: 0.4rem; border-radius: 0.25rem; } .staff-project-card { background-color: var(--pt-body-medium); padding: 0.4rem; border-radius: 0.25rem; } /* ===================================================================================================================*/ /* !!! DESIGN DATA */ /* ===================================================================================================================*/ .dd_tiles_block { margin-left: 4em; } .dd_cat_heading { font-size: var(--font_em_2); font-family: var(--headingfont); color: var(--text_dark); margin-top: 0; margin-left: 0; margin-bottom: 0; } .dd_subcat1_heading { font-size: var(--font_em_2A); font-family: var(--headingfont); color: var(--text_dark); margin-top: 0.25em; margin-left: 0.5em; } .dd_subcat2_heading { font-size: var(--font_em_2B); font-family: var(--headingfont); color: var(--gray-400); margin-left: 2em; margin-bottom: 0.5em; } /* Multi-regression card — pin button to bottom */ .card.mr-card { display: flex; flex-direction: column; } .mr-card-button-row { position: absolute; bottom: 1.2em; left: 0.8em; width: 50%; } /* Multi-regression equation — allow natural wrapping */ .mr-equation { font-size: var(--font_em_3A); line-height: 1.6; word-wrap: break-word; } .mr-equation .mr-eq-fn { font-style: italic; } .mr-equation .mr-eq-var { font-style: italic; } .mr-equation .mr-eq-coef { font-family: 'Courier New', monospace; } .mr-equation .mr-eq-op { padding: 0 3px; } .dd_title { margin-bottom: 0 !important; } .dd_subtitle { margin-top: 0 !important; color: var(--gray-400); margin-bottom: 0 !important; } .dd_units { font-family: var(--textfont); } /* ===================================================================================================================*/ /* !!! DESIGN_RECS */ /* ===================================================================================================================*/ .card.designrecs { padding-left: 1em; padding-right: 3em; padding-bottom: 1em; } .designrecs_content { line-height: 0.7em; word-break: normal; } .designrecs_content_row { font-family: var(--textfont); margin-bottom: 0; margin-top: 0.5em; } .designrecs_content_row.type1 { font-family: var(--headingfont); font-size: var(--font_em_2); } .designrecs_content_row.type2 { font-family: var(--headingfont); font-size: var(--font_em_3); margin-left: 2em; margin-top: 1em; border-bottom: 1px solid var(--pt-border); } .designrecs_content_row.type3 { font-size: var(--font_em_4); margin-left: 4em; } .designrecs_content_row.type4 { font-size: var(--font_em_4); margin-left: 6em; } .designrecs_content_row.bulletpoint { margin-top: 0; } .card.designrecs .code-number-part { font-family: var(--mediumfont) !important; } .card.designrecs .code-number-part.type1, .card.designrecs .code-number-part.type2 { font-family: var(--headingfont) !important; } .designrecs_container_wrapper { display: flex; justify-content: center; align-items: center; /* Centers vertically */ } /* !!! ________Tables */ .designrecs_table_container { font-size: inherit; margin-top: 1rem; margin-bottom: 1rem; width: 75%; } .designrecs_table { width: 100%; max-width: 100%; table-layout: auto; font-family: var(--textfont); } .designrecs_table_data { vertical-align: top !important; padding: 6px 2px !important; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; } .designrecs_header { font-family: var(--mediumfont) !important; padding: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: auto; } .sManual_row_content_wrapper.docket { color: var(--warning_color_dark) !important; } .docket { color: var(--warning_color_dark) !important; font-size: var(--font_em_4); } .mpm { border-bottom: var(--sManual_link_bottom_border_2) !important; } .designrecs_toc_modifier { font-family: var(--tablefont); } /* ===================================================================================================================*/ /* !!! BUDGET_SIMULATOR */ /* ===================================================================================================================*/ .bidSim_trade_filter_card { background-color: var(--gray-025); border-radius: 0.7em; padding: 1em !important; margin-bottom: 1em; box-shadow: 2px 4px 12px #00000014; } /* Unselected trade-filter cards share the unified disabled tokens. */ .bidSim_trade_filter_card_disabled { background-color: var(--pt-disabled-bg); border: 1px solid var(--pt-disabled-border); border-radius: 0.7em; padding: 1em !important; margin-bottom: 1em; box-shadow: none; color: var(--pt-disabled-text); } .bidSim_trade_filter_card_disabled .budSim_trade_filter_header, .bidSim_trade_filter_card_disabled .budSim_filter_title { color: var(--pt-disabled-text) !important; } .budSim_filter_div { background-color: var(--gray-060); border-radius: 1em; padding: 0.5rem; min-height: 6em; } .budSim_trade_filter_header { font-family: var(--headingfont); font-size: var(--font_em_3A); color: var(--text_dark); margin-bottom: 0.25em; margin-top: 0; margin-left: 0.5em; } .budSim_filter_title { font-family: var(--headingfont); font-size: var(--font_em_5); color: var(--text_dark); margin-bottom: 0.25rem; margin-top: 0; } /* ===================================================================================================================*/ /* !!! SITE_RESPONSE */ /* ===================================================================================================================*/ .card.siteResponse { font-family: var(--textfont); padding-top: 1em; padding-bottom: 3em; color: var(--text_dark); } .card.siteResponse h4 { font-family: var(--headingfont); font-size: var(--font_em_2) !important; margin-bottom: .2rem; margin-top: 0 !important; } .card.siteResponse h4::before { content: ""; display: block; height: 0.75em; background: var(--safety_hatch); border-radius: 3px; } .card.siteResponse .code-number-part { font-family: var(--mediumfont) !important; } .card.siteResponse .code-number-part.type1 { font-family: var(--headingfont) !important; } .siteRespo_content { overflow-wrap: normal; word-break: normal; line-height: .7em; } .siteRespo_content_row { margin-bottom: 0; margin-top: 0.25em; font-family: var(--textfont); } .siteRespo_content_row.type1 { font-family: var(--headingfont); font-size: var(--font_em_3); margin-bottom: 0.1em; margin-top: 1em; margin-left: 0; } .siteRespo_content_row.type2 { font-size: var(--font_em_4); margin-left: 2em; } .doc_links_container.type2 { margin-left: 4em; } .siteRespo_content_row.type3 { font-size: var(--font_em_4); margin-left: 4em; } .doc_links_container.type3 { margin-left: 6em; } .siteRespo_content_row.type4 { font-size: var(--font_em_4); margin-left: 6em; } .doc_links_container.type4 { margin-left: 8em; } .siteRespo_content_row.type5 { font-size: var(--font_em_4); margin-left: 8em; } .doc_links_container.type5 { margin-left: 10em; } .siteRespo_content_row.bulletpoint { margin-top: 0; } .card.siteResponse .topic_highlight { font-family: var(--mediumfont) !important; background-color: var(--lightyellow); word-break: normal; } .cc_grid_container { display: grid; grid-template-columns: 0.75fr 2fr 2fr 0.5fr; gap: 0; font-family: var(--textfont); font-size: var(--font_em_4); } .cc_grid_row { display: contents; position: relative; } .cc_grid_row:hover { font-family: var(--headingfont); } .cc_grid_item{ padding: 0; border: none; white-space: nowrap; overflow: hidden; } .cc_grid_item.monobold { font-family: var(--tablefont_mono_bold); } .cc_grid_header { font-family: var(--headingfont); border-bottom: 1px solid var(--gray-750); } .deprecated { background-color: var(--pt-body-medium); color: var(--gray-400); text-decoration: line-through; } .update { background-color: var(--lightyellow); } .ccip_cost { background-color: var(--lightblue); color: var(--gray-400); text-decoration: line-through; } /* !!! ===============================================================================================================*/ /* !!! LEGEND */ /* ===================================================================================================================*/ .legend_goal_value { background-color: var(--gray-100); } .legend_certified_value { background-color: var(--lightyellow); } /* !!! ===============================================================================================================*/ /* !!! ESTIMATE MODELS */ /* ===================================================================================================================*/ .best_model_badge { position: absolute; top: -10px; right: -10px; width: 50px; height: 50px; background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4); border: 1px solid var(--gray-750); } /* !!! ===============================================================================================================*/ /* !!! COST MODEL */ /* ===================================================================================================================*/ :root { --cm_table_fontsize: 10px; } /* --- Audit Table --- */ .cm-audit-table { width: 100%; border-collapse: collapse; } .cm-th { padding: 3px 0; font-family: var(--headingfont); border-bottom: 2px solid var(--pt-border);white-space: nowrap; font-size: var(--font_em_2C); } .cm-td { vertical-align: top; border-bottom: 1px solid var(--gray-500); font-family: var(--tablefont) !important; } table.cm-audit-table td { padding: 3px 0 !important; } .cm-td-mono { padding: 5px 0; border-bottom: 1px solid var(--pt-border); text-align: right; vertical-align: middle; font-family: var(--tablefont_mono) !important;} table.cm-audit-table tbody tr:nth-child(even) td { background-color: var(--gray-050); } .cm-td-middle { vertical-align: middle; } .cm-td-center { text-align: center; } .cm-td-right { text-align: right; } .cm-col-36 { width: 36px; } .cm-col-44 { width: 44px; } .cm-col-60 { width: 60px; } .cm-col-72 { width: 72px; } .cm-col-90 { width: 90px; } .cm-col-115 { width: 115px; } .cm-col-120 { width: 120px; } .cm-dir { margin-right: 3px; flex-shrink: 0; } .cm-dir-minus { color: #e05555; } .cm-dir-plus { color: #4a9e6b; } .cm-dir-pm { color: var(--gray-500); } .cm-adj-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 110px; font-family: var(--tablefont) !important; } .cm-delta { font-family: var(--tablefont_mono) !important;} .cm-unit { margin-left: 2px; white-space: nowrap; flex-shrink: 0; } .cm-row-h { height: 17px; display: flex; align-items: center; vertical-align: middle; line-height: 1; margin-bottom: 2px; } .cm-row-h-center { height: 17px; display: flex; align-items: center; justify-content: center; vertical-align: middle; } .cm-pred-auto { font-style: italic; } .cm-fac-input { width: 68px; height: 15px; padding: 0 3px; flex-shrink: 0;vertical-align: middle; } .cm-switch-no-mb { margin-bottom: 0; } /* --- N Count Rows (stacked per sub-adjustment) --- */ .cm-n-row { height: 17px; display: flex; align-items: center; justify-content: flex-end;vertical-align: middle; } /* ── Back-to-top button — flat alt palette ──────────────────────────────── */ .back-to-top-btn { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(16px); width: 40px; height: 40px; border-radius: 0; background-color: var(--pt-body-medium) !important; color: var(--text_dark) !important; border: none !important; box-shadow: none !important; font-size: var(--font_em_2C); line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--button-link-transition-duration) ease, transform var(--button-link-transition-duration) ease, background var(--button-link-transition-duration) ease; pointer-events: none; z-index: 10001; display: flex; align-items: center; justify-content: center; } .back-to-top-btn.btt-visible { opacity: 0.3; transform: translateX(-50%) translateY(0); pointer-events: auto; } .back-to-top-btn.btt-visible:hover { opacity: 1; background: var(--gray-900); } /* !!! ===============================================================================================================*/ /* !!! MERGED ALT THEME RULES (no base-file equivalent) */ /* ===================================================================================================================*/ /* These rules originated in style-alt-overrides.css and have no direct counterpart in the base stylesheet. They still carry !important conservatively to beat library defaults (Bootstrap, Mantine, Plotly, react-select, AG Grid). */ /* -------------------------------------------------------------------------- */ /* Section H4 tone — match section H1 tone (--gray-750) */ /* -------------------------------------------------------------------------- */ #page-content h4, .main-container h4 { color: var(--text_dark) !important; } /* Warning cards: header text must stay in warning red. This beats the #page-content / .main-container h4 ID-specificity rule above. */ #page-content .card.warning h4, #page-content .card.warning h1, #page-content .card.warning h2, #page-content .card.warning h3, #page-content .card.warning h5, #page-content .card.warning h6, .main-container .card.warning h4, .main-container .card.warning h1, .main-container .card.warning h2, .main-container .card.warning h3, .main-container .card.warning h5, .main-container .card.warning h6 { color: var(--warning_color_dark) !important; } /* Disabled / inactive cards (.card.disabled used by Curves, .card-dashed used by Project Summary for not-yet-started projects): all header levels must render in the unified disabled text color. This beats the #page-content / .main-container h4 ID-specificity rule above. */ #page-content .card.disabled h1, #page-content .card.disabled h2, #page-content .card.disabled h3, #page-content .card.disabled h4, #page-content .card.disabled h5, #page-content .card.disabled h6, #page-content .card-dashed h1, #page-content .card-dashed h2, #page-content .card-dashed h3, #page-content .card-dashed h4, #page-content .card-dashed h5, #page-content .card-dashed h6, .main-container .card.disabled h1, .main-container .card.disabled h2, .main-container .card.disabled h3, .main-container .card.disabled h4, .main-container .card.disabled h5, .main-container .card.disabled h6, .main-container .card-dashed h1, .main-container .card-dashed h2, .main-container .card-dashed h3, .main-container .card-dashed h4, .main-container .card-dashed h5, .main-container .card-dashed h6 { color: var(--pt-disabled-text) !important; } /* -------------------------------------------------------------------------- */ /* Landing hero: column labels + cards sit over dark photo */ /* -------------------------------------------------------------------------- */ .wrapper.landing-page-active .landing_column_title { color: rgba(230, 230, 230, 0.88) !important; } /* Landing grid only: frosted tiles over hero */ .wrapper.landing-page-active .landing_card { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(14px) saturate(1.25) !important; -webkit-backdrop-filter: blur(14px) saturate(1.25) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 0; color: rgba(255, 255, 255, 0.95); box-shadow: none !important; /* Uniform card height + stacked title/description for hover swap. Geometry is fully locked (box-sizing, height, min/max-height, fixed padding) so hovering NEVER changes tile size and siblings cannot be pushed down when the title↔description crossfade runs. */ display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; align-items: start; box-sizing: border-box; height: 2.8rem; min-height: 2.8rem; max-height: 2.8rem; padding: 0.4em 0.7em; gap: 0; overflow: hidden; transition: background 260ms ease, border-color 260ms ease; } .wrapper.landing-page-active .landing_card:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.24) !important; /* Padding intentionally unchanged on hover — changing it would shift tile geometry and push neighboring tiles in the column. */ } /* Stack title and description in the same grid cell so they can crossfade. min-height/min-width: 0 prevents the grid track from expanding to the intrinsic content size (default `auto`), which would otherwise push the tile taller and shove sibling tiles in the column. */ .wrapper.landing-page-active .landing_card_title, .wrapper.landing-page-active .landing_card_text { grid-column: 1 / 2; grid-row: 1 / 2; margin: 0; min-height: 0; min-width: 0; transition: opacity 420ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; pointer-events: none; } .wrapper.landing-page-active .landing_card_title { color: var(--text_color_dark) !important; letter-spacing: -0.02em; /* Allow 2-line wrapping instead of single-line ellipsis */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; opacity: 1; transform: translateY(0); } .wrapper.landing-page-active .landing_card_text { color: rgba(255, 255, 255, 0.78) !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; opacity: 0; transform: translateY(4px); } .wrapper.landing-page-active .landing_card:hover .landing_card_title { opacity: 0; transform: translateY(-4px); } .wrapper.landing-page-active .landing_card:hover .landing_card_text { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .wrapper.landing-page-active .landing_card_title, .wrapper.landing-page-active .landing_card_text { transition: opacity 120ms linear; transform: none !important; } } /* -------------------------------------------------------------------------- */ /* Dash DataTable — even-row td tint (overrides the td bg in .dash-cell) */ /* -------------------------------------------------------------------------- */ .dash-spreadsheet tbody tr:nth-child(even) td { background-color: var(--pt-body-light) !important; } .dash-filter input { background-color: transparent !important; color: var(--text_dark) !important; border: 1px solid var(--pt-border) !important; border-radius: 2px; } /* -------------------------------------------------------------------------- */ /* react-select — extra inner elements not styled by base */ /* -------------------------------------------------------------------------- */ .Select-placeholder, .Select-value-label, .Select-input > input { color: var(--text_dark) !important; } .Select-option.is-focused { background-color: var(--pt-accent-light-05) !important; } /* -------------------------------------------------------------------------- */ /* Mantine inputs — TextInput / NumberInput / Textarea / Input not in base */ /* -------------------------------------------------------------------------- */ .mantine-Input-input, .mantine-TextInput-input, .mantine-NumberInput-input, .mantine-Textarea-input { background-color: transparent !important; color: var(--text_dark) !important; border: 1px solid var(--pt-border) !important; border-radius: 2px; } /* -------------------------------------------------------------------------- */ /* Plotly */ /* -------------------------------------------------------------------------- */ .js-plotly-plot .plotly .main-svg { border-radius: 2px; } /* Keep the modebar tray transparent until interaction (Plotly fades in on hover) */ .js-plotly-plot .plotly .modebar { background: transparent !important; border: none !important; box-shadow: none !important; } .js-plotly-plot .plotly .modebar-btn { color: var(--text_dark) !important; } /* -------------------------------------------------------------------------- */ /* Scroll-driven H1 typewriter reveal (classes + per-char spans applied by */ /* alt-heading-reveal.js). Each character pops in sequentially in */ /* --monconred, then the whole heading settles to the natural H1 color. */ /* */ /* Per-char stagger: --ahc-step (set by JS, e.g. 35ms) */ /* Color settle delay: --ahc-settle-delay (set by JS, typing_total+200) */ /* Per-char index: --i (set by JS on each .ahc span) */ /* -------------------------------------------------------------------------- */ @keyframes ahc-type { to { opacity: 1; } } @keyframes ahc-settle { from { color: var(--monconred); } to { color: var(--text_dark); } } #page-content .alt-heading-reveal, .main-container .alt-heading-reveal { color: var(--monconred); } #page-content .alt-heading-reveal .ahc, .main-container .alt-heading-reveal .ahc { display: inline-block; opacity: 0; will-change: opacity; } #page-content .alt-heading-reveal.alt-heading-reveal--visible .ahc, .main-container .alt-heading-reveal.alt-heading-reveal--visible .ahc { animation: ahc-type 0.001s steps(1, end) forwards; animation-delay: calc(var(--i, 0) * var(--ahc-step, 35ms)); } #page-content .alt-heading-reveal.alt-heading-reveal--visible, .main-container .alt-heading-reveal.alt-heading-reveal--visible { animation: ahc-settle 0.9s ease forwards; animation-delay: var(--ahc-settle-delay, 600ms); } @media (prefers-reduced-motion: reduce) { #page-content .alt-heading-reveal, .main-container .alt-heading-reveal { color: var(--text_dark) !important; animation: none !important; } #page-content .alt-heading-reveal .ahc, .main-container .alt-heading-reveal .ahc { opacity: 1 !important; animation: none !important; } } /* -------------------------------------------------------------------------- */ /* Kinetic red: content-change flash for any element tagged */ /* .pt-kinetic-number. pt-kinetic-number.js watches for text mutations and */ /* re-applies .pt-kinetic-flash--on to retrigger the animation, giving KPI */ /* values, counters, and live totals the same red→settle motion vocabulary */ /* as the H1 typewriter reveal. */ /* -------------------------------------------------------------------------- */ @keyframes pt-kinetic-flash { 0% { color: var(--monconred); } 100% { color: var(--text_dark); } } .pt-kinetic-number.pt-kinetic-flash--on { animation: pt-kinetic-flash 900ms ease forwards; } @media (prefers-reduced-motion: reduce) { .pt-kinetic-number.pt-kinetic-flash--on { animation: none; color: var(--text_dark); } } /* -------------------------------------------------------------------------- */ /* Keyboard focus ring: single red accent reserved for :focus-visible so */ /* mouse users never see it, but keyboard/accessibility users get a clear */ /* brand-consistent indicator. :where() keeps specificity at 0 so any */ /* component-specific focus style still wins. */ /* -------------------------------------------------------------------------- */ :where( a, button, [role="button"], [tabindex]:not([tabindex="-1"]), input:not([type="checkbox"]):not([type="radio"]), select, textarea, summary, .pt-btn, .PT_dropdownLink, .section-nav-drawer-link ):focus-visible { outline: 2px solid var(--monconred-focus); outline-offset: 2px; border-radius: inherit; } /* ========================================================================== */ /* !!! RED_GRAPHIC_SYSTEM */ /* -------------------------------------------------------------------------- */ /* Opt-in utility classes that give authors a shared graphic vocabulary for */ /* --monconred. Every class is inert until applied, so adding them anywhere */ /* in the app does NOT increase global red density — scarcity is enforced by */ /* the author, not the stylesheet. All consume the derived tokens (or the */ /* raw --monconred where full saturation is required for the graphic mark). */ /* ========================================================================== */ /* -------------------------------------------------------------------------- */ /* 1. EDITORIAL / SWISS TYPOGRAPHIC MARKS */ /* Micro-glyphs that earn red its "signal character" status one mark */ /* at a time. Apply to , or to a parent where noted. */ /* -------------------------------------------------------------------------- */ /* Leading numeral before a section heading: "01 · Overview" Usage:

01 Overview

*/ .pt-red-numeral { color: var(--monconred); font-family: var(--headingfont); font-variant-numeric: tabular-nums; margin-right: 0.45em; } /* Red drop-cap on the first paragraph of an intro block. Usage:

Lorem ipsum dolor…

*/ .pt-red-dropcap::first-letter { float: left; font-family: var(--headingfont); font-size: 3.2em; line-height: 0.85; color: var(--monconred); padding: 0.05em 0.12em 0 0; } /* Pilcrow / section / number-sign lead-ins. Used BEFORE the content of the tagged inline element: Note text */ .pt-red-pilcrow::before { content: "¶ "; color: var(--monconred); } .pt-red-section::before { content: "§ "; color: var(--monconred); } .pt-red-numero::before { content: "№ "; color: var(--monconred); } /* Leading symbol in a KPI value: only the $/€/% glyph is red, digits stay in --text_dark. Usage: $1,240,000 */ .pt-red-symbol { color: var(--monconred); font-family: var(--headingfont); margin-right: 0.05em; } /* Red decimal point in a headline number. Usage: $1,240,000.00 */ .pt-red-decimal { color: var(--monconred); font-family: var(--headingfont); } /* Footnote marker (†, ‡, *) — superscripted, subtle. Usage: 12.4%† */ .pt-red-foot { color: var(--monconred); font-size: 0.7em; vertical-align: super; line-height: 0; padding-left: 0.15em; } /* Red em-dash used as metadata separator. Usage: Project A — Q3 2026 */ .pt-red-sep { color: var(--monconred); padding: 0 0.35em; } /* Red folio line: "— 14 —" style with red flanking dashes. Set the page number via data-folio: */ .pt-red-folio { display: inline-block; font-family: var(--headingfont); font-size: 0.72em; letter-spacing: 0.12em; color: var(--text_dark); } .pt-red-folio::before, .pt-red-folio::after { content: "—"; color: var(--monconred); padding: 0 0.4em; } .pt-red-folio::before { content: "— "; } .pt-red-folio::after { content: attr(data-folio) " —"; color: var(--monconred); } /* -------------------------------------------------------------------------- */ /* 2. STRUCTURAL HAIRLINES — extended filet rouge */ /* Thin red rules used as architectural dividers and leader lines. */ /* -------------------------------------------------------------------------- */ /* Thin red vertical rule between columns. Place as a flex/grid child, or use inside a flex row. */ .pt-red-vrule { align-self: stretch; flex: 0 0 1px; width: 1px; background: var(--monconred-line); margin: 0 1rem; } /* Dimension line: horizontal hairline with 6px tick marks at each end (├────┤). Place directly under a number as its "measurement bar". */ .pt-red-dimline { position: relative; height: 8px; margin-top: 0.25em; } .pt-red-dimline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--monconred); } .pt-red-dimline::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-left: 1px solid var(--monconred); border-right: 1px solid var(--monconred); } /* Leader line: hairline with a 5px red dot on the LEFT end, pointing away from an annotation toward the referenced element. */ .pt-red-leader { position: relative; height: 1px; background: var(--monconred); margin: 0.4em 0; } .pt-red-leader::before { content: ""; position: absolute; left: -1px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%); background: var(--monconred); border-radius: 50%; } /* Corner tab: a 3px × 24px red bar pinned to the top-right of a card. Mirrors the left-rail pattern used for active nav items, so "primary" cards and "active" nav share one visual language. */ .pt-red-tab { position: relative; } .pt-red-tab::after { content: ""; position: absolute; top: 10px; right: 0; width: 3px; height: 24px; background: var(--monconred); border-radius: 2px 0 0 2px; pointer-events: none; } /* -------------------------------------------------------------------------- */ /* 3. BRUTALIST-MODERN BLOCK MOVES */ /* Larger graphic gestures — still opt-in, still rare by design. */ /* -------------------------------------------------------------------------- */ /* Oversized red-tint numeral living BEHIND a section as a folio mark. Usage:
…
The numeral never shifts layout (absolute + z-index:-1). */ .pt-red-bignum { position: relative; isolation: isolate; } .pt-red-bignum::before { content: attr(data-bignum); position: absolute; top: -0.15em; left: -0.1em; font-family: var(--headingfont); font-size: 8em; line-height: 1; color: var(--monconred-tint); letter-spacing: -0.04em; pointer-events: none; user-select: none; z-index: -1; } /* Title band: top + bottom red hairlines framing a section heading. The inline alternative to crop marks — red brackets sit in the page rhythm rather than hugging the corners of the whole content area. Wrap the label strip + heading together inside one band. Usage:
Section 01 · Cash Balance

01 Cash Flow Reporting

Spacing rationale: - The baseline `margin-top` keeps a clear gap above the top red hairline so it reads as a deliberate bracket, not a border glued to whatever precedes it (card bottom edge, prior section, etc.). - `.section.first-section > .pt-red-title-band` gets extra top margin so the first band on a page sits well below the sticky frosted navbar's footprint instead of being kissed by its translucent lower edge on initial page load. The `first-section` class is stamped on the first rendered section by `create_layout()` — more reliable than any CSS sibling pseudo-class because anchor/nav-drawer
s can appear before the first
. */ .pt-red-title-band { border-top: 1px solid var(--monconred); border-bottom: 1px solid var(--monconred); padding: 0 0 0.25em; margin: 1.25em 0 0.8em; /* Two-child flex row: the ``__main`` wrapper (H1 + caption stack) on the left, the optional ``__action`` slot (usually a thin red-outline button like "Download PDF") flush-right. ``align-items: center`` sits the button optically on the H1's cap-height instead of the caption's baseline, so the red hairlines read as a single bracket. ``gap`` leaves breathing room between a long title and its action button without requiring per-button margins. */ display: flex; align-items: center; justify-content: space-between; gap: 1em; } /* Extra clearance for the very first section's band — pushes the top red hairline below the navbar's frosted-glass footprint on initial load. */ .section.first-section > .pt-red-title-band { margin-top: 2.25em; } /* Left side of the band: the heading + caption stack. Keeping this in its own wrapper preserves the pre-flex vertical stacking rules (and makes ``first-child`` / ``last-child`` margin zeroing predictable). */ .pt-red-title-band__main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; /* so long titles can truncate / wrap without pushing the action off-page */ } .pt-red-title-band__main > :first-child { margin-top: 0; } .pt-red-title-band__main > :last-child { margin-bottom: 0; } .pt-red-title-band__main h1, .pt-red-title-band__main h2, .pt-red-title-band__main h3, .pt-red-title-band__main h4 { margin-top: 0; margin-bottom: 0; line-height: 1.05; } /* Right side of the band: the action slot. ``flex: 0 0 auto`` keeps the button its natural width instead of stretching, and the slot is offset off the paper's right edge by the band's own right padding (zero) so it sits aligned with the red hairlines on either end. */ .pt-red-title-band__action { flex: 0 0 auto; display: flex; align-items: center; } /* Thin red-outline button used inside a section title band (e.g. the "Download PDF" button on reports). Transparent fill, red border + red text at rest; inverts to solid red on hover. Small padding so it sits comfortably between the two red hairlines without ballooning the band. */ .pt-red-title-band__action .button-download, .pt-red-title-band__action button { background-color: transparent !important; color: var(--monconred) !important; border: 1px solid var(--monconred) !important; border-radius: 6px; padding: 4px 10px; margin: 0; font-family: var(--textfont); font-size: var(--font_em_4A); line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; transition: var(--button-link-transition); } .pt-red-title-band__action .button-download:hover, .pt-red-title-band__action button:hover { background-color: var(--monconred) !important; color: #ffffff !important; } /* Decorative label strip above a heading: a 28px red rule + small all-caps label. Usage:
Section 03 / Variance
*/ .pt-red-labelstrip { display: flex; align-items: center; gap: 0.6em; font-family: var(--headingfont); font-size: 0.72em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--monconred); margin-bottom: 0.35em; } .pt-red-labelstrip::before { content: ""; display: inline-block; height: 2px; width: 28px; background: var(--monconred); } /* Byline caption beneath a title-band heading. Uses the light text face (--textfont) instead of the bold heading face so it reads as editorial metadata rather than chrome. Uppercase + modest letter- spacing keeps the strip legible at small sizes. Usage:
Section 01 · Cash Balance — file.py · Rev. 2026-04-19
*/ .pt-red-caption { font-family: var(--textfont); font-size: 0.7em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--monconred); margin: 0.1em 0 0; /* ~2px more breathing room below the H1 */ line-height: 1.2; } /* Red box fill behind a single word in a heading — the "one word that matters". Use sparingly: max one per page. Usage:

Budget Variance

*/ .pt-red-fill { display: inline-block; padding: 0 0.22em; background: var(--monconred); color: var(--gray-025); font-family: var(--headingfont); border-radius: 2px; line-height: 1.15; } /* Meta strip across the top of a report page: top/bottom red hairlines, small uppercase text, red bullet separators between children. Usage:
……
*/ .pt-red-metastrip { display: flex; align-items: center; flex-wrap: wrap; font-family: var(--textfont); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text_dark); border-top: 1px solid var(--monconred); border-bottom: 1px solid var(--monconred); padding: 0.4em 0; margin-bottom: 1.25rem; } .pt-red-metastrip > :not(:first-child)::before { content: "•"; color: var(--monconred); margin: 0 0.6em; display: inline-block; } /* -------------------------------------------------------------------------- */ /* 4. CROP MARKS / REGISTRATION MARKS */ /* Print-production signature marks. Authored-object feel, almost free. */ /* -------------------------------------------------------------------------- */ /* Four red L-shaped crop marks in the corners of the tagged element, offset 8px from the edges. Applied via a single ::before pseudo using a composite multi-stop background — no extra markup required. */ .pt-red-cropmarks { position: relative; } .pt-red-cropmarks::before { content: ""; position: absolute; inset: 8px; pointer-events: none; background-repeat: no-repeat; background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px, 16px 1px, 1px 16px; background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right; background-image: linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)); } /* Corner brackets — same mechanic as crop marks, but hugging the edges (inset 0) with 12px arms. Use to frame an "active" or "selected" region. */ .pt-red-brackets { position: relative; } .pt-red-brackets::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px; background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right; background-image: linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)), linear-gradient(var(--monconred), var(--monconred)); } /* Registration target (concentric circles + crosshair). Inline SVG so it scales crisply at any size. Reserve for ONE occurrence per page — it's a signature mark, not an icon. */ .pt-red-regmark { display: inline-block; width: 20px; height: 20px; background: no-repeat center / contain url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------------------------- */ /* 7. LIST & CALLOUT ORNAMENT */ /* Replaces default browser bullets with disciplined red marks. */ /* -------------------------------------------------------------------------- */ /* Red square bullet list.
    …
*/ .pt-red-list { list-style: none; padding-left: 1.2em; margin: 0.5em 0; } .pt-red-list > li { position: relative; padding-left: 0; margin-bottom: 0.25em; font-size: var(--font_em_4); } .pt-red-list > li::before { content: ""; position: absolute; left: -1em; top: 0.55em; width: 6px; height: 6px; background: var(--monconred); } /* Triangle variant — for items that imply expansion or a next step.
    …
*/ .pt-red-list.pt-red-list--tri > li::before { content: ""; width: 0; height: 0; background: transparent; border-left: 6px solid var(--monconred); border-top: 4px solid transparent; border-bottom: 4px solid transparent; top: 0.45em; } /* Red numbered list with tabular, leading-zero numerals.
    …
*/ .pt-red-olist { list-style: none; counter-reset: pt-red-olist; padding-left: 2.4em; margin: 0.5em 0; } .pt-red-olist > li { position: relative; counter-increment: pt-red-olist; margin-bottom: 0.25em; } .pt-red-olist > li::before { content: counter(pt-red-olist, decimal-leading-zero) "."; position: absolute; left: -2.2em; top: 0; width: 2em; color: var(--monconred); font-family: var(--headingfont); font-variant-numeric: tabular-nums; text-align: right; padding-right: 0.4em; } /* Callout / note block: 2px red left border + optional red lead word. Usage:
Note — Rest of the note text in normal color.
*/ .pt-red-callout { border-left: 2px solid var(--monconred); padding: 0.35em 0 0.35em 0.85em; margin: 0.75em 0; background: var(--monconred-tint); } .pt-red-callout-lead { color: var(--monconred); font-family: var(--headingfont); margin-right: 0.3em; } /* -------------------------------------------------------------------------- */ /* 9. COLOPHON / BRAND SIGNATURE */ /* Footer "signed document" block + brand-wordmark underline. */ /* -------------------------------------------------------------------------- */ /* Colophon strip at the bottom of a report page. Usage: */ .pt-red-colophon { display: flex; align-items: center; justify-content: space-between; gap: 1em; border-top: 1px solid var(--monconred); padding: 0.8em 0 0; margin-top: 2rem; font-family: var(--textfont); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text_dark); } .pt-red-colophon-mark { color: var(--monconred); font-family: var(--headingfont); letter-spacing: 0.05em; } /* Red 1px underline beneath the brand wordmark / logo, for the active page heraldic "you are here" moment. */ .pt-red-brand-underline { position: relative; display: inline-block; } .pt-red-brand-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.18em; height: 1px; background: var(--monconred); } /* Generic red inline glyph — convenience wrapper when none of the more specific classes fit (e.g. a standalone &, @, or № in brand display). */ .pt-red-glyph { color: var(--monconred); font-family: var(--headingfont); } /* ========================================================================== */ /* !!! END RED_GRAPHIC_SYSTEM */ /* ========================================================================== */ /* ========================================================================== */ /* !!! PRINT_STYLES_OPSCHART */ /* */ /* Secondary affordance: if a user invokes the browser's native print dialog */ /* (Cmd+P / Ctrl+P) on the Operational Chart page these rules produce a */ /* readable print. The primary "Download PDF" export is server-rendered via */ /* ReportLab (see utils/functions_opschart_pdf.py) and does NOT rely on any */ /* of the CSS below. Screen rendering is unaffected — rules are all scoped */ /* inside @media print. */ /* ========================================================================== */ @media print { /* Force Chrome/Safari to honor background colors, borders, and custom */ /* fills that are otherwise stripped out of printed output by default. */ *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } /* Letter landscape fits the 2-column project grid comfortably at native */ /* scale; the user can still change paper size in the print dialog. */ @page { size: letter landscape; margin: 0.35in 0.3in; } html, body { background: #ffffff !important; margin: 0 !important; padding: 0 !important; } } /* ---- Hide app chrome -------------------------------------------------- */ @media print { .PT_navbar_wrapper, #PT_navbar_wrapper, .PT_navbar, .navigation_column, #nav_column, .section-nav-fab-root, .section-nav-drawer, .back-to-top-btn, .footer_section, .pagecontent, #page-content1, #page-content2, .content_settings, .dash-debug-menu, .dash-debug-menu__outer, #debug-console, .opsChart_modal_button:not(.opsChart_image_container) { display: none !important; } } /* ---- Expand the main content column to the full printable area -------- */ @media print { .wrapper, .page, .main-container, .content_container, .content, .layout-with-footer, #page-content { display: block !important; grid-template-columns: none !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; gap: 0 !important; } .section { padding: 0 !important; margin: 0 0 0.2in 0 !important; background: transparent !important; page-break-before: auto; } /* The "even" sections use negative side margins for a full-bleed band */ /* on screen — kill that in print so nothing bleeds off the page. */ .section.even_section { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; } .section > h1 { font-size: 14pt !important; line-height: 1.2 !important; margin: 0 0 0.1in 0 !important; padding: 0 !important; page-break-after: avoid; break-after: avoid-page; } } /* ---- Disable motion / glow that degrades raster fidelity in PDFs ------ */ @media print { *, *::before, *::after { transition: none !important; animation: none !important; cursor: default !important; } /* Soften (don't kill) the shadowed overlay labels so they stay legible */ /* against project photos while not blurring the vector snapshot. */ .opsChart_comp_percent, .opsChart_jobno { text-shadow: 0 0 3px rgba(0, 0, 0, 0.9) !important; } img { image-rendering: -webkit-optimize-contrast; max-width: 100% !important; } } /* ---- Ops-Chart grid + cards: keep visual density, avoid split cards --- */ @media print { .custom-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6pt !important; width: 100% !important; } .opsChart_card_with_image, .opsChart_proj_card, .opsChart_px_div > *, .opsChart_staff_card, .staff-history-proj-card, .staff-project-card { break-inside: avoid !important; page-break-inside: avoid !important; } .opsChart_px_card_title { break-after: avoid !important; page-break-after: avoid !important; } /* Drop the shadow-based card elevation — prints as a muddy gray box */ /* and contributes nothing useful to a presentation PDF. */ .opsChart_card_with_image, .opsChart_proj_card, .card { box-shadow: none !important; } /* Keep modals + toasts out of the printed output regardless of state. */ .modal, .modal-backdrop, .dbc-modal, .opsChart_staff_modal, #modal-container, #staff-modal-container { display: none !important; } } /* ========================================================================== */ /* !!! END PRINT_STYLES_OPSCHART */ /* ========================================================================== */