/* Reskins Frappe's own website surface (login, forgot-password, etc.) to match izipoconsulting.com's real dark navy/cyan look, since Website Settings' "Show Language Picker" / "Show Footer On Login" toggles bring back the Primary Navbar / Standard Footer web templates but not their colors -- those still needed to be pointed at the actual brand palette by hand. This only reaches Frappe-rendered website pages on this site, never the separate React marketing site (a different server entirely). */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap'); body { font-family: 'Work Sans', sans-serif; } .navbar.navbar-primary { background: #0b1120; border-bottom: 1px solid rgba(34, 211, 238, 0.15); /* Extra vertical room so the enlarged logo below isn't cramped against the default (smaller-logo-sized) navbar padding. */ padding-top: 0.65rem; padding-bottom: 0.65rem; } .navbar.navbar-primary .navbar-brand img { filter: brightness(0) invert(1); /* Frappe's own navbar.scss caps this at max-height: 22px -- max-height always constrains the box regardless of any inline height style or selector specificity, so it has to be overridden explicitly here, not just given a bigger height. */ max-height: none; height: 52px; width: auto; } .navbar.navbar-primary .navbar-nav .nav-link { color: #cbd5e1; } .navbar.navbar-primary .navbar-nav .nav-link:hover { color: #22d3ee; } .navbar.navbar-primary .navbar-cta, .navbar.navbar-primary .btn-primary { background: linear-gradient(to right, #06b6d4, #2563eb); border: none; } /* A mid-navbar site-search box doesn't add anything useful on a login page specifically -- hidden here (via base.html's own data-path="login" on ) rather than site-wide. */ body[data-path="login"] .navbar-modal-search { display: none; } /* The mobile hamburger button references , but that sprite symbol is never actually injected into this page (a pre-existing mismatch between the navbar template and web_include_icons, unrelated to anything here) -- the button rendered as an empty box with no visible glyph at all, regardless of color. Drawing the icon in plain CSS instead of depending on Frappe's sprite sheet sidesteps that entirely. */ .navbar.navbar-primary .navbar-toggler svg { display: none; } .navbar.navbar-primary .navbar-toggler { position: relative; width: 32px; height: 32px; } .navbar.navbar-primary .navbar-toggler span { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: white; transform: translate(-50%, -50%); box-shadow: 0 -6px 0 white, 0 6px 0 white; } .web-footer, .web-footer .container, .web-footer .row, .web-footer .footer-info, .web-footer .footer-powered, .web-footer .footer-links, .web-footer .footer-grouped-links, .web-footer .footer-logo-extension, .web-footer .footer-group { /* Every nested layer painted with the exact same OPAQUE color, instead of relying on transparency to reveal .web-footer's own background underneath -- a visibly two-toned footer (a lighter navy band around the logo/heading row, darker below) persisted even after fixing the margin-collapse bug below, and computed styles showed no background-color difference anywhere, which means something is compositing a semi-transparent layer on top rather than a plain color mismatch. Forcing full opacity everywhere, explicitly, removes any room for that regardless of its source. */ background-color: #0b1120 !important; background-image: none !important; opacity: 1 !important; } .web-footer { color: #94a3b8; } .web-footer .footer-info, .web-footer .footer-powered { color: #94a3b8; } .web-footer img.footer-logo { filter: brightness(0) invert(1); /* Same max-height trap as the navbar brand -- footer.scss caps this at 1.5rem (24px). */ max-height: none; height: 48px; width: auto; } /* The real source of the light stripe above the Quick Links/Services/ Industries headings: footer.scss's own `.footer-group { margin-top: 2rem }` -- only active once footer_items actually has grouped columns (added when the Quick Links/Services/Industries footer structure was built), and the row/container it sits in has no padding to contain that margin, so it collapses through and exposes the page's own light background behind .web-footer. Converting to padding keeps the same spacing without it collapsing through anything. */ .web-footer .footer-group { margin-top: 0; padding-top: 2rem; } .web-footer .footer-link { color: #94a3b8; } .web-footer .footer-link:hover { color: #22d3ee; } /* Login card itself */ .page-card { border-radius: 16px; } .btn-login { background: linear-gradient(to right, #06b6d4, #2563eb); border: none; color: #fff; } .btn-login:hover { opacity: 0.92; color: #fff; } .page-card a, .forgot-password-message a { color: #0891b2; }