/* ===================================================================== PIMS - Application styles (layers on top of CoreUI) ===================================================================== */ :root { --pims-primary: #1b3a6b; /* deep navy from the PIMS branding */ --pims-accent: #3a7d44; /* green accent */ --pims-primary-rgb: 27,58,107; /*jojo sidemenu color*/ --pims-sidebar-bg: #00050c; --pims-sidebar-header-bg: #010b1a; /* --pims-sidebar-bg: #04142b; --pims-sidebar-header-bg: #04142b; */ } /* ---- Brand / sidebar ---- */ .sidebar { --cui-sidebar-bg: var(--pims-sidebar-bg); background-color: var(--pims-sidebar-bg); } .sidebar .nav-link { white-space: normal; } .brand-mark { font-weight: 800; letter-spacing: 1px; font-size: 1.5rem; color: #FFCC00 !important; } .brand-logo { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; border-radius: 0; } .sidebar-brand { display:flex; align-items:center; gap:.65rem; } .sidebar-header { min-height: 76px; padding-block: .6rem; background-color: var(--pims-sidebar-header-bg); border-color: rgba(255,255,255,.1) !important; } .sidebar .nav-link:hover { background-color: rgba(255,255,255,.07); } .sidebar .nav-link.active { background-color: rgba(255,255,255,.13); } .sidebar .nav-group-toggle { text-transform: uppercase; letter-spacing: .03em; font-size: .88rem; } /* Standalone top-level items (Home, About PIMS, Help, Terms...) sit as peers of the collapsible group headers, so they must share the same font-size — otherwise they inherit CoreUI's default and look mismatched. Casing is left as-authored (not forced uppercase like the group headers). */ .sidebar .sidebar-nav > .nav-item > .nav-link:not(.nav-group-toggle) { font-size: .88rem; } .sidebar .nav-group-items .nav-link { text-transform: none; font-size: .82rem; color: #8ab4f8; } .sidebar .nav-group-items .nav-link .nav-icon { color: #8ab4f8; } .sidebar .nav-group-items .nav-link.active { color: #fff; } .sidebar .nav-group-items .nav-link.active .nav-icon { color: #fff; } /* System Tools (MCS Only) — last nav-group, flagged as vendor/superadmin-only. */ .sidebar .sidebar-nav > .nav-group:last-of-type > .nav-group-toggle { color: #FFCC00; border-top: 1px solid rgba(255,255,255,.12); margin-top: .35rem; padding-top: .75rem; } .sidebar .sidebar-nav > .nav-group:last-of-type > .nav-group-toggle .nav-icon { color: #FFCC00; } .sidebar-footer { padding: .6rem .75rem; font-size: .72rem; text-align: center; color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.1) !important; } .sidebar-footer a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; } .sidebar-footer a:hover { color: #fff; text-decoration: underline; } /* ---- Layout: offset the content wrapper for the fixed sidebar ---- */ :root { --pims-sidebar-w: 288px; } .sidebar.sidebar-fixed { position: fixed; top: 0; bottom: 0; left: 0; width: var(--pims-sidebar-w); z-index: 1030; } /* Desktop: push the whole app to the right of the sidebar */ @media (min-width: 992px) { .wrapper { margin-left: var(--pims-sidebar-w); } } /* Mobile/tablet: sidebar slides off-canvas; content is full width */ @media (max-width: 991.98px) { /* :not(.show) matches CoreUI's own .sidebar:not(.sidebar-end):not(.show) rule in specificity (3 classes/pseudo-classes each) — without it, that vendor rule's higher specificity wins and hides using ITS OWN 16rem (256px) default instead of our 288px, leaving a permanent ~32px sliver of the sidebar visible on mobile even when "closed". */ .sidebar.sidebar-fixed:not(.show) { margin-left: calc(-1 * var(--pims-sidebar-w)); transition: margin-left .15s ease-in-out; } .sidebar.sidebar-fixed.show { margin-left: 0; } .wrapper { margin-left: 0; } /* dim backdrop when open */ .sidebar.sidebar-fixed.show::after { content: ""; position: fixed; top: 0; left: var(--pims-sidebar-w); right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: -1; } } /* ---- Global font family (Consolas is the default) ---- */ :root { --pims-font-family: Consolas, "Space Mono", "Courier New", monospace; --cui-body-font-family: var(--pims-font-family); } html, body, button, input, optgroup, select, textarea { font-family: var(--pims-font-family); } /*jojo theme` */ /* ---- Theme-aware base (fixes dark mode bg/text) ---- */ body { background-color: var(--cui-body-bg, #EBF1F5); color: var(--cui-body-color, #212529); min-height: 100vh; } [data-coreui-theme="light"] body, [data-coreui-theme="light"] { --cui-body-bg: #dadee2; } [data-coreui-theme="dark"] body { background-color: #1a1d23; color: #e3e6ea; } /* ---- Form fields: light fill keeps controls distinct from their labels ---- */ .form-control, .form-select, [data-coreui-theme="dark"] .form-control, [data-coreui-theme="dark"] .form-select { /* jojo: inputbox color 768788 767779*/ background-color: #7b9287; color: #212529; border-color: #888888; color-scheme: light; } .form-control:focus, .form-select:focus, [data-coreui-theme="dark"] .form-control:focus, [data-coreui-theme="dark"] .form-select:focus { background-color: #f8f9fa; color: #212529; border-color: #5575a3; box-shadow: 0 0 0 .25rem rgba(var(--pims-primary-rgb), .18); } .form-control:disabled, .form-select:disabled, .form-control[readonly], [data-coreui-theme="dark"] .form-control:disabled, [data-coreui-theme="dark"] .form-select:disabled, [data-coreui-theme="dark"] .form-control[readonly] { background-color: #d8dde2; color: #6c757d; opacity: 1; } .form-select option { background-color: #fff; color: #212529; } /* ---- Font-family switching (applied on ) ---- */ html[data-font="roboto"] { --pims-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; } html[data-font="lato"] { --pims-font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; } html[data-font="spacemono"] { --pims-font-family: "Space Mono", Consolas, "Courier New", monospace; } html[data-font="voces"] { --pims-font-family: "Voces", "Segoe UI", sans-serif; } html[data-font="graduate"] { --pims-font-family: "Graduate", Georgia, serif; } html[data-font="breeserif"] { --pims-font-family: "Bree Serif", Georgia, serif; } html[data-font="oswald"] { --pims-font-family: "Oswald", "Arial Narrow", Arial, sans-serif; } html[data-font="consolas"] { --pims-font-family: Consolas, "Space Mono", "Courier New", monospace; } /* ---- Form placeholders: clearly dim & italic so they aren't mistaken for saved data ---- */ .form-control::placeholder, .form-select::placeholder { color: var(--cui-secondary-color, #9aa0a6) !important; opacity: .55 !important; font-style: italic; } /* ---- Flash messages: success alert uses brand yellow, black text ---- */ .alert-success { background-color: #FFCC00; border-color: #e6b800; color: #000; } .alert-success .btn-close { filter: none; } /* ---- Header toggler (mobile hamburger) ---- */ .header-toggler { background: transparent; border: 0; padding: .5rem .75rem; font-size: 1.25rem; cursor: pointer; color: var(--cui-body-color); } .header-toggler:hover { opacity: .8; } /* ---- Utility cards ---- */ .stat-card { border:0; border-radius:.75rem; overflow:hidden; } .stat-card .stat-value { font-size:1.75rem; font-weight:700; line-height:1; } .stat-card .stat-label { font-size:.8rem; opacity:.85; } /* ---- Tables ---- */ .table-responsive { border-radius:.5rem; } table.table thead th { white-space:nowrap; } /* Audit Trail: compact, normal-weight records for easier scanning. */ #auditTable tbody td { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .80rem; font-weight: 400 !important; line-height: 1.25; padding-top: .34rem; padding-bottom: .34rem; } #auditTable tbody .badge { font-family: inherit; font-size: .64rem; font-weight: 500 !important; line-height: 1; padding: .28em .48em; } /* ---- Who's Online: pulsing status dot ---- */ .online-heartbeat { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #2eb85c; vertical-align: middle; margin-left: .15rem; margin-right: .35rem; box-shadow: 0 0 0 0 rgba(46, 184, 92, .6); animation: online-heartbeat-pulse 1.6s ease-in-out infinite; } @keyframes online-heartbeat-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 184, 92, .6); transform: scale(1); } 70% { box-shadow: 0 0 0 .45rem rgba(46, 184, 92, 0); transform: scale(1.15); } 100% { box-shadow: 0 0 0 0 rgba(46, 184, 92, 0); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .online-heartbeat { animation: none; } } /* ---- Footer ---- */ .footer { padding:.75rem 0; } /* ---- Print (reports) ---- */ @media print { .sidebar, .header, .footer, .no-print { display:none !important; } .wrapper { margin:0 !important; } body { background:#fff; } } /* ---- Employee master / 201-202 file ---- */ .employee-photo-box { width: 100%; aspect-ratio: 1 / 1; max-width: 180px; border: 1px solid var(--cui-border-color); border-radius: .75rem; overflow: hidden; background: var(--cui-tertiary-bg); } .employee-photo-preview, .employee-profile-photo { width: 100%; height: 100%; object-fit: cover; } .employee-profile-photo { width: 112px; height: 112px; border-radius: .75rem; border: 1px solid var(--cui-border-color); } .employee-table-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; border: 1px solid var(--cui-border-color); } .employee-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--cui-tertiary-bg); color: var(--cui-secondary-color); font-size: 2.25rem; } .employee-table-photo.employee-photo-placeholder { font-size: 1rem; } .employee-card-photo { width: 84px; height: 84px; border-radius: .75rem; object-fit: cover; border: 1px solid var(--cui-border-color); } .employee-card-photo.employee-photo-placeholder { display: flex; font-size: 2rem; } .employee-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); } .employee-dl dt { color: var(--cui-secondary-color); font-weight: 500; } .employee-dl dd { overflow-wrap: anywhere; } @media (max-width: 575.98px) { .employee-profile-photo { width: 88px; height: 88px; } } /* ---- Employee photo crop modal (assets/js/photo-crop.js) ---- Namespaced "pcrop-" to avoid colliding with the unrelated .photo-crop-stage / #photoCropCanvas used by the user-account avatar cropper in modules/system/users.php. ---- */ .pcrop-modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); align-items: center; justify-content: center; } .pcrop-modal.is-open { display: flex; } .pcrop-dialog { background: var(--cui-body-bg); color: var(--cui-body-color); border-radius: .75rem; width: 360px; max-width: calc(100vw - 2rem); box-shadow: 0 10px 40px rgba(0,0,0,.35); overflow: hidden; } .pcrop-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--cui-border-color); } .pcrop-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--cui-secondary-color); cursor: pointer; } .pcrop-body { padding: 1rem; } .pcrop-stage { width: 320px; height: 320px; max-width: 100%; margin: 0 auto; border-radius: .5rem; overflow: hidden; background: #111; border: 1px solid var(--cui-border-color); touch-action: none; } .pcrop-stage canvas { width: 100%; height: 100%; cursor: grab; display: block; } .pcrop-zoom-label { display: block; font-size: .8rem; margin-top: .85rem; color: var(--cui-secondary-color); } .pcrop-zoom { width: 100%; } .pcrop-hint { font-size: .78rem; color: var(--cui-secondary-color); margin: .5rem 0 0; } .pcrop-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--cui-border-color); } /* ---- Reusable webcam-capture modal (assets/js/webcam-capture.js) ---- */ .pwebcam-modal { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.55); align-items: center; justify-content: center; } .pwebcam-modal.is-open { display: flex; } .pwebcam-dialog { background: var(--cui-body-bg); color: var(--cui-body-color); border-radius: .75rem; width: 400px; max-width: calc(100vw - 2rem); box-shadow: 0 10px 40px rgba(0,0,0,.35); overflow: hidden; } .pwebcam-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--cui-border-color); } .pwebcam-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; color: var(--cui-secondary-color); cursor: pointer; } .pwebcam-body { padding: 1rem; text-align: center; } .pwebcam-body video { width: 100%; max-width: 360px; border-radius: .5rem; background: #000; } .pwebcam-error { font-size: .8rem; color: var(--cui-danger); margin: .5rem 0 0; } .pwebcam-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--cui-border-color); } /* Pre-Payroll entry form — 1st/2nd Quincena Net highlight. Penguin yellow reads fine on the app's dark theme, but is too low-contrast on light backgrounds, so it switches to the brand navy blue in light mode. */ td.pp-quincena-highlight { color: #FFCC00 !important; } html[data-coreui-theme="light"] td.pp-quincena-highlight { color: #1b3a6b !important; } /* Office/Department stays in the DOM (still holds the real submitted value) but is shrunk to invisible so it doesn't visually double up with the proxy input. */ .pims-searchable-select { position: relative; } .pims-searchable-select-native { display: none !important; } .pims-searchable-select-input { font-family: 'Courier New', Consolas, monospace; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7785'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: .8rem; padding-right: 2rem; cursor: text; } .pims-searchable-select-panel { display: none; position: absolute; z-index: 1055; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--cui-body-bg, #fff); border: 1px solid var(--cui-border-color, rgba(0,0,0,.15)); border-radius: .5rem; box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.18); padding: .25rem; } .pims-searchable-select-panel.show { display: block; } .pims-searchable-select-item { padding: .45rem .65rem; cursor: pointer; font-size: .875rem; font-family: 'Courier New', Consolas, monospace; white-space: nowrap; border-radius: .375rem; transition: background-color .1s ease; } .pims-searchable-select-item:hover, .pims-searchable-select-item.active { background: #1b3a6b; color: #fff; } .pims-searchable-select-empty { padding: .5rem .65rem; font-size: .875rem; color: var(--cui-secondary-color, #888); text-align: center; } /* ---- User account photos / Facebook-style cropper ---- */ .user-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; overflow: hidden; border: 1px solid var(--cui-border-color); background: var(--cui-primary); color: #fff; font-weight: 700; line-height: 1; flex: 0 0 auto; } .user-avatar-sm { width: 34px; height: 34px; font-size: .85rem; } .user-avatar-table { width: 42px; height: 42px; font-size: 1rem; } .user-avatar-placeholder { background: var(--pims-primary); color: #fff; } .user-photo-editor { max-width: 230px; } .user-photo-preview-wrap { position: relative; width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 4px solid var(--cui-border-color); box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); background: var(--cui-tertiary-bg); } .user-photo-preview { width: 100%; height: 100%; object-fit: cover; } .user-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--pims-primary); color: #fff; font-size: 4rem; font-weight: 700; } .photo-crop-stage { width: min(360px, 100%); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--pims-primary); background: #d8dbe0; } #photoCropCanvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; } #photoCropCanvas.is-dragging { cursor: grabbing; } @media (max-width: 575.98px) { .user-photo-preview-wrap { width: 150px; height: 150px; } .user-photo-placeholder { font-size: 3rem; } } /* ===================================================================== HOME — authenticated animated PIMS landing page (v1.1.3) ===================================================================== */ .pims-home { --home-navy: #092f24; --home-blue: #174d34; --home-green: #2f855a; --home-cyan: #f59e0b; } .home-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 430px; padding: clamp(1.75rem, 4vw, 3.75rem); border-radius: 1.25rem; color: #fff; background: /*HOME BG*/ /* linear-gradient(135deg, rgba(9, 47, 36, .98) 0%, rgba(23, 77, 52, .96) 48%, rgba(166, 75, 22, .94) 100%),*/ linear-gradient(135deg, rgba(4, 3, 68, 0.98) 0%, rgba(7, 70, 128, 0.96) 48%, rgba(11, 18, 59, 0.94) 100%), var(--home-navy); box-shadow: 0 1.25rem 3rem rgba(9, 41, 47, 0.24); } .home-hero::after { content: ""; position: absolute; z-index: -1; inset: auto -9rem -11rem auto; width: 29rem; height: 29rem; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.035), 0 0 0 7rem rgba(255,255,255,.025); } .home-grid-pattern { position: absolute; z-index: -2; inset: 0; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%239be0b0'/%3E%3Cstop offset='.5' stop-color='%2375adff'/%3E%3Cstop offset='1' stop-color='%23b99aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23w)' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M0,10 C100,-16 300,-16 400,10 S700,36 800,10 S1100,-16 1200,10 S1500,36 1600,10'/%3E%3Cpath d='M0,55 C100,37 300,37 400,55 S700,73 800,55 S1100,37 1200,55 S1500,73 1600,55'/%3E%3Cpath d='M0,100 C100,74 300,74 400,100 S700,126 800,100 S1100,74 1200,100 S1500,126 1600,100'/%3E%3Cpath d='M0,145 C100,127 300,127 400,145 S700,163 800,145 S1100,127 1200,145 S1500,163 1600,145'/%3E%3Cpath d='M0,190 C100,164 300,164 400,190 S700,216 800,190 S1100,164 1200,190 S1500,216 1600,190'/%3E%3Cpath d='M0,235 C100,217 300,217 400,235 S700,253 800,235 S1100,217 1200,235 S1500,253 1600,235'/%3E%3Cpath d='M0,280 C100,254 300,254 400,280 S700,306 800,280 S1100,254 1200,280 S1500,306 1600,280'/%3E%3Cpath d='M0,325 C100,307 300,307 400,325 S700,343 800,325 S1100,307 1200,325 S1500,343 1600,325'/%3E%3Cpath d='M0,370 C100,344 300,344 400,370 S700,396 800,370 S1100,344 1200,370 S1500,396 1600,370'/%3E%3Cpath d='M0,415 C100,397 300,397 400,415 S700,433 800,415 S1100,397 1200,415 S1500,433 1600,415'/%3E%3Cpath d='M0,460 C100,434 300,434 400,460 S700,486 800,460 S1100,434 1200,460 S1500,486 1600,460'/%3E%3C/g%3E%3Cg fill='none' stroke='url(%23w)' stroke-width='.7' opacity='.32'%3E%3Cpath d='M0,30 C50,18 150,18 200,30 S350,42 400,30 S550,18 600,30 S750,42 800,30 S950,18 1000,30 S1150,42 1200,30 S1350,18 1400,30 S1550,42 1600,30'/%3E%3Cpath d='M0,85 C50,76 150,76 200,85 S350,94 400,85 S550,76 600,85 S750,94 800,85 S950,76 1000,85 S1150,94 1200,85 S1350,76 1400,85 S1550,94 1600,85'/%3E%3Cpath d='M0,140 C50,128 150,128 200,140 S350,152 400,140 S550,128 600,140 S750,152 800,140 S950,128 1000,140 S1150,152 1200,140 S1350,128 1400,140 S1550,152 1600,140'/%3E%3Cpath d='M0,195 C50,186 150,186 200,195 S350,204 400,195 S550,186 600,195 S750,204 800,195 S950,186 1000,195 S1150,204 1200,195 S1350,186 1400,195 S1550,204 1600,195'/%3E%3Cpath d='M0,250 C50,238 150,238 200,250 S350,262 400,250 S550,238 600,250 S750,262 800,250 S950,238 1000,250 S1150,262 1200,250 S1350,238 1400,250 S1550,262 1600,250'/%3E%3Cpath d='M0,305 C50,296 150,296 200,305 S350,314 400,305 S550,296 600,305 S750,314 800,305 S950,296 1000,305 S1150,314 1200,305 S1350,296 1400,305 S1550,314 1600,305'/%3E%3Cpath d='M0,360 C50,348 150,348 200,360 S350,372 400,360 S550,348 600,360 S750,372 800,360 S950,348 1000,360 S1150,372 1200,360 S1350,348 1400,360 S1550,372 1600,360'/%3E%3Cpath d='M0,415 C50,406 150,406 200,415 S350,424 400,415 S550,406 600,415 S750,424 800,415 S950,406 1000,415 S1150,424 1200,415 S1350,406 1400,415 S1550,424 1600,415'/%3E%3Cpath d='M0,470 C50,458 150,458 200,470 S350,482 400,470 S550,458 600,470 S750,482 800,470 S950,458 1000,470 S1150,482 1200,470 S1350,458 1400,470 S1550,482 1600,470'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; background-position: center; mask-image: linear-gradient(to right, #000, transparent 92%); } .home-hero-content { z-index: 2; min-height: 350px; } .home-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(5px); opacity: .25; animation: home-float 9s ease-in-out infinite; } .home-orb-one { width: 13rem; height: 13rem; left: 34%; top: -7rem; background: #f59e0b; } .home-orb-two { width: 11rem; height: 11rem; left: -4rem; bottom: -5rem; background: #d97706; animation-delay: -3s; } .home-orb-three { width: 7rem; height: 7rem; right: 36%; bottom: 1rem; background: #2f855a; animation-delay: -6s; } @keyframes home-float { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(18px, -22px, 0) scale(1.08); } } .home-kicker { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; padding: .45rem .8rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.09); color: rgba(255, 255, 255, 0.9); font-size: .84rem; font-weight: 600; backdrop-filter: blur(10px); } .home-live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #8ee29a; box-shadow: 0 0 0 0 rgba(142,226,154,.6); animation: home-pulse 2s infinite; } @keyframes home-pulse { 0% { box-shadow: 0 0 0 0 rgba(142,226,154,.55); } 70% { box-shadow: 0 0 0 .5rem rgba(142,226,154,0); } 100% { box-shadow: 0 0 0 0 rgba(142,226,154,0); } } .home-hero-title { margin: 0; max-width: 760px; font-size: clamp(2.4rem, 5vw, 4.65rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; } .home-hero-title span { color: #9be0b0; text-shadow: 0 .3rem 1.25rem rgba(80, 185, 115, .3); } .home-hero-subtitle { max-width: 760px; margin: 1.3rem 0 0; color: rgba(255,255,255,.79); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.75; } .home-hero-meta { display: flex; flex-wrap: wrap; gap: .65rem 1.15rem; margin-top: 1.2rem; color: rgba(255,255,255,.72); font-size: .84rem; } .home-primary-action { color: var(--home-navy); font-weight: 700; } .home-animate-in { opacity: 0; transform: translateY(16px); animation: home-rise .72s cubic-bezier(.2,.8,.2,1) forwards; } .home-animate-in:nth-child(2) { animation-delay: .08s; } .home-animate-in:nth-child(3) { animation-delay: .16s; } .home-animate-in:nth-child(4) { animation-delay: .24s; } .home-animate-in:nth-child(5) { animation-delay: .32s; } @keyframes home-rise { to { opacity: 1; transform: translateY(0); } } .home-system-visual { position: relative; width: min(100%, 390px); aspect-ratio: 1 / 1; margin-inline: auto; } .home-system-visual::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,.035) 60%, transparent 61%); filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.18)); } .home-orbit { position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; animation: home-rotate 22s linear infinite; } .home-orbit::before, .home-orbit::after { content: ""; position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: #9be0b0; box-shadow: 0 0 1rem rgba(155,224,176,.8); } .home-orbit::before { top: 15%; left: 10%; } .home-orbit::after { right: 8%; bottom: 18%; } .home-orbit-inner { inset: 23%; animation-direction: reverse; animation-duration: 15s; } @keyframes home-rotate { to { transform: rotate(360deg); } } .home-core-logo { position: absolute; inset: 31%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(9,47,36,.78); box-shadow: 0 1rem 2.8rem rgba(0,0,0,.3), inset 0 0 2rem rgba(255,255,255,.05); backdrop-filter: blur(14px); } .home-core-logo img { width: 66px; height: 66px; object-fit: contain; border-radius: 0; } .home-core-logo strong { margin-top: .45rem; font-size: 1.25rem; letter-spacing: .08em; } .home-core-logo small { color: rgba(255,255,255,.62); font-size: .68rem; } .home-orbit-node { position: absolute; display: flex; align-items: center; gap: .38rem; padding: .48rem .65rem; border: 1px solid rgba(255,255,255,.2); border-radius: .75rem; background: rgba(9,47,36,.82); box-shadow: 0 .65rem 1.4rem rgba(0,0,0,.2); color: #fff; font-size: .76rem; backdrop-filter: blur(10px); animation: home-node-float 4.5s ease-in-out infinite; } .home-orbit-node i { color: #9be0b0; font-size: 1rem; } .home-node-one { top: 6%; left: 36%; } .home-node-two { right: 0; top: 43%; animation-delay: -1s; } .home-node-three { bottom: 5%; left: 37%; animation-delay: -2s; } .home-node-four { left: 0; top: 45%; animation-delay: -3s; } @keyframes home-node-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .home-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .home-section-eyebrow { display: inline-block; margin-bottom: .35rem; color: var(--pims-accent); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; } [data-coreui-theme="dark"] .home-section-eyebrow { color: #83ce91; } .home-updated-badge { display: inline-flex; align-items: center; flex: 0 0 auto; padding: .42rem .7rem; border: 1px solid var(--cui-border-color); border-radius: 999px; color: var(--cui-secondary-color); background: var(--cui-tertiary-bg); font-size: .75rem; } .home-stat-card { --home-stat-rgb: var(--pims-primary-rgb); --home-stat-icon-color: var(--pims-primary); position: relative; overflow: hidden; padding: 1.25rem; border: 1px solid rgba(var(--home-stat-rgb), .22); border-radius: 1rem; background: rgba(var(--home-stat-rgb), .05); /* jojo */ box-shadow: 0 .35rem 1.15rem rgba(25, 43, 70, .055); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .home-stat-card--personnel { --home-stat-rgb: 59, 130, 246; --home-stat-icon-color: #75adff; } .home-stat-card--active { --home-stat-rgb: 34, 197, 94; --home-stat-icon-color: #69dc92; } .home-stat-card--vacancy { --home-stat-rgb: 245, 158, 11; --home-stat-icon-color: #ffc766; } .home-stat-card--office { --home-stat-rgb: 139, 92, 246; --home-stat-icon-color: #b99aff; } [data-coreui-theme="dark"] .home-stat-card { background: rgba(var(--home-stat-rgb), .10); border-color: rgba(var(--home-stat-rgb), .25); } .home-stat-card::after { content: ""; position: absolute; right: -2rem; bottom: -2rem; width: 6rem; height: 6rem; border-radius: 50%; background: rgba(var(--home-stat-rgb), .10); } .home-stat-card:hover { transform: translateY(-4px); border-color: rgba(var(--home-stat-rgb), .48); box-shadow: 0 .85rem 1.8rem rgba(var(--home-stat-rgb), .13); } .home-stat-icon, .home-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: .8rem; color: var(--pims-primary); background: rgba(var(--pims-primary-rgb), .09); font-size: 1.25rem; } [data-coreui-theme="dark"] .home-stat-icon, [data-coreui-theme="dark"] .home-quick-icon { color: #94c4ff; background: rgba(95,160,230,.12); } .home-stat-card .home-stat-icon { color: rgb(var(--home-stat-rgb)); background: rgba(var(--home-stat-rgb), .14); } [data-coreui-theme="dark"] .home-stat-card .home-stat-icon { color: var(--home-stat-icon-color); background: rgba(var(--home-stat-rgb), .18); } .home-stat-number { position: relative; z-index: 1; margin-top: 1rem; font-size: clamp(1.85rem, 3vw, 2.45rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; } .home-stat-text-value { position: relative; z-index: 1; min-height: 2.2rem; margin-top: 1rem; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; } .home-stat-label { position: relative; z-index: 1; margin-top: .55rem; font-weight: 700; } .home-stat-note { position: relative; z-index: 1; margin-top: .25rem; color: var(--cui-secondary-color); font-size: .76rem; } .home-quick-card { --home-quick-rgb: var(--pims-primary-rgb); --home-quick-icon-color: var(--pims-primary); display: flex; position: relative; align-items: flex-start; gap: .9rem; padding: 1.1rem; border: 1px solid rgba(var(--home-quick-rgb), .22); border-radius: 1rem; background: rgba(var(--home-quick-rgb), .05); /* jojo */ color: inherit; text-decoration: none; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } .home-quick-card--blue { --home-quick-rgb: 59, 130, 246; --home-quick-icon-color: #75adff; } .home-quick-card--green { --home-quick-rgb: 34, 197, 94; --home-quick-icon-color: #69dc92; } .home-quick-card--amber { --home-quick-rgb: 245, 158, 11; --home-quick-icon-color: #ffc766; } .home-quick-card--violet { --home-quick-rgb: 139, 92, 246; --home-quick-icon-color: #b99aff; } [data-coreui-theme="dark"] .home-quick-card { background: rgba(var(--home-quick-rgb), .10); border-color: rgba(var(--home-quick-rgb), .25); } .home-quick-card .home-quick-icon { color: rgb(var(--home-quick-rgb)); background: rgba(var(--home-quick-rgb), .14); } [data-coreui-theme="dark"] .home-quick-card .home-quick-icon { color: var(--home-quick-icon-color); background: rgba(var(--home-quick-rgb), .18); } .home-quick-card:hover { color: inherit; transform: translateY(-4px); border-color: rgba(var(--home-quick-rgb), .48); box-shadow: 0 .85rem 1.8rem rgba(var(--home-quick-rgb), .13); } .home-quick-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; } .home-quick-copy strong { margin-bottom: .3rem; font-size: .97rem; } .home-quick-copy small { color: var(--cui-secondary-color); line-height: 1.55; } .home-quick-arrow { align-self: center; color: var(--cui-secondary-color); transition: transform .2s ease; } .home-quick-card:hover .home-quick-arrow { transform: translateX(4px); color: rgb(var(--home-quick-rgb)); } .home-about-panel, .home-lifecycle-panel, .home-readiness-panel { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--cui-border-color); border-radius: 1.1rem; background: var(--cui-card-bg, var(--cui-body-bg)); } .home-about-panel { position: relative; overflow: hidden; } .home-about-panel::before { content: ""; position: absolute; right: -5rem; top: -5rem; width: 13rem; height: 13rem; border-radius: 50%; background: radial-gradient(circle, rgba(var(--pims-primary-rgb), .11), transparent 68%); pointer-events: none; } .home-about-title { max-width: 680px; margin: 0 0 1rem; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.035em; } .home-about-lead { max-width: 850px; font-size: 1.03rem; line-height: 1.75; } .home-feature-item { display: flex; align-items: flex-start; gap: .75rem; height: 100%; padding: .9rem; border-radius: .85rem; background: var(--cui-tertiary-bg); } .home-feature-item > i { margin-top: .12rem; color: var(--pims-accent); font-size: 1.25rem; } .home-feature-item div { display: flex; flex-direction: column; gap: .18rem; } .home-feature-item strong { font-size: .9rem; } .home-feature-item span { color: var(--cui-secondary-color); font-size: .78rem; line-height: 1.5; } .home-lifecycle-panel { background: linear-gradient(145deg, rgba(var(--pims-primary-rgb), .045), transparent 60%), var(--cui-card-bg, var(--cui-body-bg)); } .home-lifecycle-list { list-style: none; margin: 0; padding: 0; } .home-lifecycle-list li { position: relative; display: flex; gap: .9rem; padding: 0 0 1.35rem; } .home-lifecycle-list li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 2.25rem; bottom: .25rem; width: 1px; background: var(--cui-border-color); } .home-lifecycle-list li > span { position: relative; z-index: 1; display: flex; flex: 0 0 2.15rem; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; color: #fff; background: var(--pims-primary); font-size: .72rem; font-weight: 800; } .home-lifecycle-list div { display: flex; flex-direction: column; gap: .25rem; padding-top: .12rem; } .home-lifecycle-list strong { font-size: .92rem; } .home-lifecycle-list small { color: var(--cui-secondary-color); line-height: 1.55; } .home-readiness-panel { background: linear-gradient(110deg, rgba(var(--pims-primary-rgb), .055), rgba(58,125,68,.055)), var(--cui-card-bg, var(--cui-body-bg)); } .home-progress-item { margin-bottom: 1.25rem; font-size: .86rem; } .home-progress { height: .65rem; background: var(--cui-tertiary-bg); } .home-progress .progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--pims-primary), var(--pims-accent)); transition: width 1s cubic-bezier(.2,.8,.2,1); } .home-reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; } .home-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 767.98px) { .home-hero { min-height: auto; padding: 1.5rem; border-radius: 1rem; } .home-hero-content { min-height: 0; } .home-hero-meta { flex-direction: column; gap: .45rem; } .home-section-heading { align-items: flex-start; flex-direction: column; } .home-updated-badge { align-self: flex-start; } .home-stat-card { padding: 1rem; } .home-stat-number { font-size: 1.75rem; } .home-quick-card { padding: 1rem; } .home-about-panel, .home-lifecycle-panel, .home-readiness-panel { padding: 1.2rem; } } @media (max-width: 420px) { .home-hero-title { font-size: 2.25rem; } .home-hero-subtitle { font-size: .94rem; } .home-primary-action, .home-hero .btn-outline-light { width: 100%; } .home-stat-label { font-size: .86rem; } .home-stat-note { display: none; } } @media (prefers-reduced-motion: reduce) { .home-orb, .home-live-dot, .home-orbit, .home-orbit-node, .home-animate-in, .home-reveal, .home-progress .progress-bar { animation: none !important; transition: none !important; } .home-animate-in, .home-reveal { opacity: 1; transform: none; } } /* jojo */ .privacy-body { font-size: .85rem; } .privacy-body h5 { font-size: .95rem; }