/* ========================================================================== BadgeBox — modernization layer (loaded LAST, additive, easily revertible) Design tokens + global polish. No layout-structural changes. ========================================================================== */ :root { --dark-blue: #0d2a5a; --bb-blue: #0098ea; --bb-blue-hover: #008bd7; --bb-blue-light: #57c5ff; --hover-blue: #cceafb; --medium-blue: #dbeffb; --bright-blue: #f4fbff; --grey: #5b6b86; --light-grey: #f0f5f8; --white: #ffffff; --black: #0b1622; --orange: #ff8935; --dark-orange: #f36a09; --green: #00c2b6; --red: #d64e4e; --bb-radius: 12px; --bb-shadow-sm: 0 4px 14px -8px rgba(13, 42, 90, 0.35); --bb-shadow-md: 0 18px 50px -22px rgba(13, 42, 90, 0.30); --bb-ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: light; } /* Unify legacy GandhiSans onto Plus Jakarta Sans (alias wins, loaded last) - */ @font-face { font-family: "GandhiSans-Regular"; src: url("../fonts/PlusJakartaSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "GandhiSans-Bold"; src: url("../fonts/PlusJakartaSans-Medium.ttf") format("truetype"); font-weight: 700; font-display: swap; } /* Global rendering polish ------------------------------------------------- */ html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: rgba(0, 152, 234, 0.18); color: var(--dark-blue); } img { image-rendering: auto; } /* Accessible keyboard focus (does not affect mouse users) ----------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(0, 152, 234, 0.45); outline-offset: 2px; border-radius: 6px; } /* Button micro-interactions (additive; keeps existing colors/sizes) ------- */ .blue-button, .btn, input[type="submit"], button[type="submit"] { transition: transform 0.18s var(--bb-ease), box-shadow 0.18s var(--bb-ease), filter 0.18s var(--bb-ease), background-color 0.18s var(--bb-ease); will-change: transform; } .blue-button:hover, .btn:hover, input[type="submit"]:hover, button[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.03); } .blue-button:active, .btn:active, input[type="submit"]:active, button[type="submit"]:active { transform: translateY(0); filter: brightness(0.99); } /* Smoother links --------------------------------------------------------- */ a { transition: color 0.15s var(--bb-ease), opacity 0.15s var(--bb-ease); } /* Inputs: gentle focus ring for the funnel fields ------------------------ */ .form-control:focus, input.form:focus { box-shadow: 0 0 0 3px rgba(0, 152, 234, 0.16); border-color: var(--bb-blue) !important; transition: box-shadow 0.15s var(--bb-ease), border-color 0.15s var(--bb-ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blue-button, .btn, input[type="submit"], button[type="submit"] { transition: none; } } /* ========================================================================== Navbar readable on light page tops (site-wide). At the top the bar is transparent: keep the menu visible with DARK text and the DARK logo. Once scrolled (.bb-nav-solid on ) it turns blue with a WHITE menu and white logo. Same two logo assets the site already ships. ========================================================================== */ body:not(.bb-nav-solid) #nav-bar #center a, body:not(.bb-nav-solid) #nav-bar #center .text-menu, body:not(.bb-nav-solid) #nav-bar #lang a, body:not(.bb-nav-solid) #nav-bar #lang .text-menu, body:not(.bb-nav-solid) #nav-bar #lang .lang-menu { color: #0d2a5a !important; } /* On the transparent bar, hide only the green phone number; it reappears once the bar turns blue. */ body:not(.bb-nav-solid) #nav-bar .number-header, body:not(.bb-nav-solid) #nav-bar .green-phone { display: none !important; } body.bb-nav-solid #nav-bar { background: #0098ea !important; } body.bb-nav-solid #nav-bar #center a, body.bb-nav-solid #nav-bar #center .text-menu, body.bb-nav-solid #nav-bar #lang a, body.bb-nav-solid #nav-bar #lang .text-menu, body.bb-nav-solid #nav-bar #lang .lang-menu, body.bb-nav-solid #nav-bar .navbar-buttons .button-login { color: #fff !important; } body:not(.bb-nav-solid) #nav-logo { background-image: url(../images/logo_bar_inv.png) !important; } body.bb-nav-solid #nav-logo { background-image: url(../images/logo_white.svg) !important; } /* Header CTA buttons — the JS no longer toggles the colour variants, so style them directly as outline pills that follow the bar: dark text + dark border on the transparent bar, white text + white border once it turns blue. REGISTRATI stays filled for emphasis (dark on light, white on blue). */ #nav-bar .navbar-buttons .button-try, #nav-bar .navbar-buttons .button-login { text-align: center; font-size: 9pt; padding: 4px 16px; border-radius: 18pt; line-height: 1.7; border: 1px solid currentColor; transition: color .2s ease, border-color .2s ease, background .2s ease; } /* Sign-in: outline that adapts */ body:not(.bb-nav-solid) #nav-bar .navbar-buttons .button-login { color: #0d2a5a !important; } body.bb-nav-solid #nav-bar .navbar-buttons .button-login { color: #fff !important; } /* Register: filled for emphasis */ body:not(.bb-nav-solid) #nav-bar .navbar-buttons .button-try { background: #0d2a5a !important; color: #fff !important; border-color: #0d2a5a !important; } body.bb-nav-solid #nav-bar .navbar-buttons .button-try { background: #fff !important; color: var(--bb-blue) !important; border-color: #fff !important; } /* ========================================================================== Internal landing sections — soften the "squares": rounded corners, gentle shadows and hover lift on the image tiles, content images and cards. Scoped to section ids so nothing else is affected. Current style kept. ========================================================================== */ /* Feature / stories / world image tiles */ #func .box, #func [class*="background-"], #stories-buttons .box, #stories-buttons [class*="box-"], #world .md-modal, #world .box { border-radius: 20px !important; overflow: hidden; } #func .box, #stories-buttons .box { box-shadow: 0 18px 40px -24px rgba(13, 42, 90, 0.5); transition: transform 0.25s var(--bb-ease), box-shadow 0.25s var(--bb-ease); } #func .box:hover, #stories-buttons .box:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -26px rgba(13, 42, 90, 0.55); } /* the small caption chip inside the feature tiles */ #func .box .text { border-radius: 12px; } /* Section / content images and the app screenshots */ .band .image-responsive, #download .image-responsive, #contacts .image-responsive { border-radius: 18px; } /* Plan cards & generic content cards: consistent rounding + soft depth */ .card, .main-card, .green-card { border-radius: 18px; } .card.main-card { box-shadow: 0 24px 60px -30px rgba(13, 42, 90, 0.45); } /* Tabs / pills used in the "Sede e Smart Working" switcher */ .band .nav-tabs > li > a, .band .nav-pills > li > a { border-radius: 10px; }