@charset "UTF-8"; /* CSS Document */ /* ========================================================= HomeLife – Custom Overrides File: /css/custom.css Notes: - Keep this last in so it overrides theme styles. ========================================================= */ /* ========================= Employee Portals – Feature Boxes + Logos + Buttons ========================= */ /* Make each feature box feel like a "card" */ #content .feature-box.fbox-center.fbox-border { background: #fafafa; border: 2px solid #e6e6e6; border-radius: 14px; padding: 22px 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* Hover state */ #content .feature-box.fbox-center.fbox-border:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); border-color: #cfcfcf; } /* Center logo nicely */ #content .hlsc-fbox-icon { display: flex; justify-content: center; align-items: center; margin-bottom: 12px; } #content .feature-box .fbox-icon * { background: transparent !important; border-radius: 0 !important; } /* Logo sizing */ #content .hlsc-portal-logo { max-width: 110px; max-height: 70px; width: auto; height: auto; display: block; } /* Neutralize theme icon sizing (so your images don't inherit icon circles) */ #content .feature-box .fbox-icon { width: auto; height: auto; line-height: normal; } /* Extra spacing between boxes */ #content .row .col-md-3 { margin-bottom: 22px; } /* ========================= Employee Portals – Equal height boxes + remove icon ovals ========================= */ /* Make the columns/cards equal height */ #content .row.clearfix { display: flex; flex-wrap: wrap; } #content .row.clearfix > [class*="col-"] { display: flex; } #content .feature-box.fbox-center.fbox-border { width: 100%; display: flex; flex-direction: column; } /* Push button to the bottom so all boxes align */ #content .feature-box.fbox-center.fbox-border p { margin-bottom: 16px; } #content .feature-box.fbox-center.fbox-border a.button { margin-top: auto; } /* Remove the theme's circular/oval background around the icon area */ #content .feature-box .fbox-icon { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 12px; } /* Make sure any pseudo-elements that draw circles are disabled */ #content .feature-box .fbox-icon:before, #content .feature-box .fbox-icon:after { display: none !important; content: none !important; } /* Logo sizing consistency */ #content .hlsc-portal-logo { max-width: 120px; /* slight bump */ max-height: 70px; } /* ================================ Employee Portal Hero – Visual Enhancements ================================ */ /* Bottom gradient overlay */ .employee-portal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100% ); z-index: 1; pointer-events: none; } /* Soft vignette around edges */ .employee-portal-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100% ); z-index: 1; pointer-events: none; } .employee-portal-overlay { z-index: 2; } .employee-portal-hero-content { position: relative; z-index: 3; } .employee-portal-hero-content { backdrop-filter: blur(2px); } /* ========================= Purple "Open" Buttons ========================= */ #content a.button.button-purple { background-color: #6f2dbd; border-color: #6f2dbd; color: #fff !important; } #content a.button.button-purple:hover, #content a.button.button-purple:focus { background-color: #5a23a0; border-color: #5a23a0; color: #fff !important; } /* Pressed state (while clicking) */ #content a.button.button-purple:active { background-color: #c9a7f2; border-color: #c9a7f2; color: #2b1246 !important; } /* Keyboard focus ring */ #content a.button.button-purple:focus { outline: none; box-shadow: 0 0 0 3px rgba(111,45,189,0.25); } /* Employee Portal cards */ .portal-grid { margin-top: 20px; } .portal-card { border: 1px solid rgba(0,0,0,.12); border-radius: 8px; background: #fff; padding: 26px 24px; height: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .15s ease, box-shadow .15s ease; position: relative; overflow: hidden; } .portal-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.10); } .portal-card h3 { margin: 0 0 10px 0; font-weight: 700; line-height: 1.2; } .portal-card p { margin: 0 0 18px 0; color: #555; line-height: 1.6; } .portal-icon { font-size: 34px; line-height: 1; margin-bottom: 14px; opacity: .95; } .portal-card .btn { margin-top: 6px; padding: 10px 18px; border-radius: 6px; font-weight: 700; } .portal-note { background: #f7f7f7; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: 14px 16px; margin-top: 20px; color: #444; } .portal-note strong { color: #222; } /* Make the entire card clickable without breaking button behavior */ .portal-card a.portal-stretch { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; overflow: hidden; } .portal-card .btn, .portal-card .btn * { position: relative; z-index: 2; } .portal-card .portal-content { position: relative; z-index: 2; } /* ================================ Employee Portal Hero (tweaks) ================================ */ /* Keep hero shorter (backup in case inline style is removed later) */ .employee-portal-hero { position: relative; min-height: 42vh; display: flex; align-items: flex-end; /* keeps the box lower */ } /* Overlay stays the same */ .employee-portal-overlay { position: absolute; inset: 0; background: rgba(19, 58, 58, 0.45); z-index: 1; } /* Give container some breathing room */ .employee-portal-hero .container { position: relative; z-index: 2; padding-left: 2rem; padding-right: 2rem; } /* Content box — nudged right */ .employee-portal-hero-content { max-width: 560px; margin: 0 0 1.5rem .5rem; /* <-- this is the "move right" */ padding: 1.5rem 2rem; background: rgba(0, 0, 0, 0.18); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; } .employee-portal-hero-content { /* existing styles stay */ background: rgba(0, 0, 0, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15); } /* Typography */ .employee-portal-hero h1 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 700; margin-bottom: 0.4rem; } .employee-portal-hero span { color: #fff; font-size: 1.05rem; line-height: 1.6; display: block; } /* Mobile: don't offset right (avoid awkward squeeze) */ @media (max-width: 767px) { .employee-portal-hero { min-height: 42vh; align-items: center; } .employee-portal-hero-content { margin: 0; max-width: 100%; padding: 1.25rem 1.25rem; } .employee-portal-hero .container { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ================================ Employee Portal Hero – Image Cropping Fix ================================ */ /* Default hero image behavior */ .employee-portal-hero { background-repeat: no-repeat; background-size: cover; background-position: center 30%; /* bias DOWN so faces stay visible */ min-height: 42vh; } /* Larger screens – allow a bit more vertical breathing room */ @media (min-width: 1200px) { .employee-portal-hero { background-position: center 35%; } } /* Tablets */ @media (max-width: 991px) { .employee-portal-hero { background-position: center 28%; } } /* Mobile – prioritize faces */ @media (max-width: 767px) { .employee-portal-hero { min-height: 38vh; background-position: center 22%; } } .footer-divider { border: 0; height: 1px; background: rgba(255,255,255,0.25); margin: 18px 0; }