/* CSS Document */ /*----------------------------------------------- CREDITS Theme Name: QSO/WSO Redesign - Forgot Password Description: Update QSO/WSO current Bootstrap 4.6 Author: FSSI, 714.436.3300 Version: 1.0 Last changed: 11/18/25 [jp] Assigned to: Joey Paragas (jp) ------------------------------------------------- CONTENTS 1.0. Body 1.1 FORMS 1.2 NAVIGATION 1.3 QSO/WSO COLORS 2.0. MEDIA QUERIES ------------------------------------------------- TYPOGRAPHY Copy: 400 Lato, Helvetica, Helvetica Bold: 700 Lato, Helvetica, Helvetica ------------------------------------------------- /************************************************ * CSS COLORS * ************************************************/ :root { --WSO-Orange: #f7931e; --WSO-OrangeLt: #fcd4a5; --WSO-Gray: #808080; --Form-Orange: #DE7C00; --Form-Orange-RGB: 222, 124, 0; --Contrast-Red: #940A0F; } /************************************************ * 1.0. BODY * ************************************************/ body { background-color:#f5f5f5; border:0; color:#3b3b41; font-family: "Lato", "Helvetica Neue",Helvetica, Arial, sans-serif; font-weight:400; } .navbar-circle-icon { align-items:center; background-color:#FFFFFF; border-radius:50%; color:#FFF; display:flex; font-weight:600; height:28px; justify-content:center; width:28px; } h1 { color: var(--WSO-Orange); font-size:35px; } h2 { color: var(--WSO-Gray); font-size:28px; } p { color: var(--WSO-Gray); margin-bottom: 30px;} /* 1.1. FORMS */ form .col-12 { margin-bottom:16px; } .form-control { border-radius:0.25rem; -moz-border-radius:0.25rem; -ms-border-radius:0.25rem; -o-border-radius:0.25rem; -webkit-border-radius:0.25rem; height:60px; } .form-control:focus, .btn:focus { box-shadow:0 0 0 .2rem rgba( var(--Form-Orange-RGB), 0.25); } .form-control:focus { border-color:var(--Form-Orange); } .form-label { color:var(--WSO-Gray); font-weight:700; } /* 1.2. BUTTON */ .btn { border-radius:0.25rem; -moz-border-radius:0.25rem; -ms-border-radius:0.25rem; -o-border-radius:0.25rem; -webkit-border-radius:0.25rem; font-size:18px; font-weight:700; line-height:1; padding:16px 0; transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; width:100%; } .btn:hover, .btn:active, .btn:focus { text-align:center; width: 90%;} .btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus { color:#FFF; } .btn-orange-alt, .btn-orange-alt:hover, .btn-orange-alt:active, .btn-orange-alt:focus { color:var(--Form-Orange); } .btn:focus { box-shadow:0 0 0 .2rem rgba(222, 124, 0, 0.25); } .btn-orange { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#DE7C00+0,fbb263+100 */ background: var(--Form-Orange); /* Old browsers */ background: -moz-linear-gradient(left, var(--Form-Orange) 0%, #fbb263 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, var(--Form-Orange) 0%,#fbb263 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, var(--Form-Orange) 0%,#fbb263 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--Form-Orange)', endColorstr='#fbb263',GradientType=1 ); /* IE6-9 */ border:0; } .btn-orange-alt { border: 2px solid var(--Form-Orange); } /* ERROR */ .alert-dismissable .close { position: absolute; top: 0; right: 0; z-index: 2; padding: .75rem 1.25rem; color: inherit; } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; } button.close { padding: 0; background-color: transparent; border: 0; } .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } .alert-dismissable { padding-right: 4rem; } .messageText { font-size: 0.9rem; } /* 1.3. NAVIGATION */ nav .navbar-user .username, nav .nav-link, nav .dropdown-item { transition:color 300ms ease-out !important; } nav.navbar { background-color:#FFF; color:#FFF; margin-bottom:40px; min-height:80px; padding:20px 0 0 0; } nav .navbar-toggler { margin-right:1rem; margin-left:1rem; opacity:0.8; } .fssi-logo { padding-left:30px; } .dropdown-item:hover { background-color:transparent; } /* NAVBAR-BRAND */ nav.navbar .navbar-brand { display:flex; margin-left:1rem; } nav.navbar .navbar-brand, nav .navbar-toggler, nav.navbar .navbar-collapse { margin-bottom:20px; } nav.navbar .navbar-brand a:hover { text-decoration:none;} nav.navbar .navbar-brand img { height:40px; } nav.navbar .navbar-brand img:first-child { padding-right:30px; } /* NAVBAR NAV */ nav .navbar-nav { align-items:center; justify-content:flex-end; margin-right:1rem; width: 100%; } nav .navbar-nav p.dropdown-item { font-weight:600; margin-bottom:0; } nav .navbar-nav .dropdown-item:last-child { border:0; } nav .navbar-nav .dropdown-menu { max-height:610px; overflow:auto; padding:0; } nav .navbar-nav .nav-link { line-height:1.2; padding:0.5rem 1rem; text-align:center; } nav .navbar-nav .nav-link.disabled { opacity:0.4; } nav .navbar-nav .nav-item:last-child .nav-link { padding-right:0; } /* NAVBAR-USER */ .navbar-user .dropdown-menu { left:auto; right:0; } /* 1.4. QSO/WSO COLORS */ nav.wso { border-bottom: var(--WSO-Orange) 5px solid ; } nav.wso .stream-one-logo { border-right:1px solid var(--WSO-Orange); } nav.wso .navbar-toggler, nav.wso .dropdown-menu .dropdown-divider { border-color:var(--WSO-Orange); } nav.wso .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 247, 147, 30, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } nav.wso .nav-link, nav.wso .dropdown-item { color:var(--WSO-Orange); } nav.wso .nav-link:hover, nav.wso a.dropdown-item:hover { color:var(--WSO-OrangeLt); } nav.wso .dropdown-menu { border-color:var(--WSO-OrangeLt); } /************************************************ * 2.0. MEDIA QUERIES * ************************************************/ /* LG Size Screen - 1199px and smaller */ /* MD Size Screen 991px and smaller */ @media(max-width:991px) { nav.navbar .navbar-collapse { margin-bottom:0; } nav .navbar-nav { align-items:unset; } nav .navbar-nav .nav-item, nav .navbar-nav .dropdown-item { text-align:center; } nav .navbar-nav .dropdown-menu { border:0; margin-top:0; max-height:unset; } nav .navbar-nav .dropdown-item { padding:0.5rem 1rem; } nav .navbar-nav .dropdown-menu .dropdown-item:last-child { border-bottom:0 !important; } nav .navbar-nav .nav-item:last-child .nav-link { padding-right:16px; } nav.wso .dropdown-menu .dropdown-divider { margin:-1px 0 0 0; } /* WSO Color */ nav.wso .navbar-nav .nav-item, nav.wso .navbar-nav .dropdown-item { border-bottom:1px solid var(--WSO-OrangeLt); } nav.wso .navbar-nav .nav-item:first-child, nav.wso .navbar-nav .dropdown-item:first-child { border-top:1px solid var(--WSO-OrangeLt); } } /* SM Size Screen - 767px and smaller */ @media(max-width:655px) { .fssi-logo { display:none; } nav .stream-one-logo { border:0 !important; } .btn-submit { width:100%; } } /* XS Size Screen 576px and smaller*/ @media(max-width:576px) { nav.navbar .navbar-brand img:first-child { padding:0; } .navbar-brand { flex-basis:55%; } } @media(max-width:480px) { .impersonate-text a { display:block; } } @media(max-width:270px) { .navbar-brand { flex-basis:100%; } }