/* --------------------------------------------------------------------------- igeckoo-ext.css — additions layered on top of the original app.css. Kept in a separate file on purpose: app.css is a byte-for-byte artifact of the recovered site, and the build only rewrites URLs inside it. Anything new lives here so the recovered stylesheet stays recognisable as the original. Palette is taken from app.css, nothing invented: #16a7df .blue-2 section headings ("We look forward to hearing from you") #0085c4 .blue darker step, used for hover #003f77 .blue-1 deep navy #5B6368 menu sprite grey (normal state) #1B77BC menu sprite blue (hover state) Breakpoint contract inherited from app.css: >= 992px .menu-computer visible, .menu-mobile hidden <= 991.98px .menu-computer hidden, .menu-mobile visible Every rule below is added to BOTH menus for that reason. --------------------------------------------------------------------------- */ /* --- contact button ------------------------------------------------------- Brand blue instead of Bootstrap's stock #007bff. */ .btn-brand { color: #fff; background-color: #16a7df; border-color: #16a7df; } /* The site already has a button language: 2.5rem type and an asymmetric radius (top-left + bottom-right rounded), used by "Tell me more" and every other call to action in app.css. The contact button was a stock Bootstrap pill and read as *less* important than the secondary buttons above it — backwards, since mailing us is the point of the section. Same shape, brand colour. */ .btn-contact { font-size: 2.5rem !important; padding: 10px 34px !important; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-top-right-radius: 0; border-bottom-left-radius: 0; line-height: 1.3; max-width: 100%; overflow-wrap: break-word; } .btn-brand:hover, .btn-brand:active { color: #fff; background-color: #0085c4; border-color: #0085c4; } .btn-brand:focus { color: #fff; background-color: #0085c4; border-color: #0085c4; box-shadow: 0 0 0 .2rem rgba(22, 167, 223, .5); } /* --- EN | ES language switch --------------------------------------------- */ .lang-switch { display: flex; align-items: center; gap: 6px; margin-left: auto; font-family: Montserrat, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; letter-spacing: .04em; } /* Both navbars sit on #header{background:#1a1e1c} — near black. The Bootstrap class on the desktop one says "navbar-light", which refers to its link colours, NOT to its background: an earlier version of this file trusted that name and painted the switch deep navy (#003f77) at 50% opacity, which was effectively invisible against the dark bar. Colours here are chosen against the real background, and the inactive state is an explicit light grey rather than a faded dark one, so its contrast does not depend on opacity. */ .lang-switch button { background: none; border: 0; padding: 2px 3px; font: inherit; color: #b9c0c4; cursor: pointer; transition: color .15s ease; } .lang-switch button:hover { color: #fff; } .lang-switch button.is-active { color: #16a7df; } .lang-switch .sep { color: #6b7378; } .menu-computer .lang-switch { padding-right: 6px; } .menu-mobile .lang-switch { margin-right: 12px; } /* --- EMPRESAS (MX) menu circle ------------------------------------------- Matches the other circles exactly: 55x55 block over a 55x110 sprite whose bottom half is the hover state. Sizing comes from app.css; only the image is declared here. */ #header .menu-computer .navbar-nav .nav-link#img-menu-empresas { background-image: url(../img/menu_empresas_sprite.png); } /* While the module is open, the MX circle holds its active state and the other six release theirs. app.js has a scroll handler that lights up whichever icon owns the section currently in view; with every one of those sections hidden it measures them all at offset 0 and settles on Contact, so the menu would claim we are somewhere we are not. Two ids beat the `:hover` / `.active` rules in app.css, which carry one. */ body.view-empresas #header .menu-computer .navbar-nav .nav-link.active:not(#img-menu-empresas) { background-position: top; } body.view-empresas #header .menu-computer .navbar-nav .nav-link#img-menu-empresas { background-position: bottom; } /* --- EMPRESAS sub-list in the mobile burger menu -------------------------- The desktop panel and this list are generated from one array in inject_ext.py, so they cannot drift apart. app.css styles the burger's own links (1.6rem, 10px padding); these sit under one of them, so they step down a size and indent to read as children rather than as six more siblings. */ #header .menu-mobile #navbar-mobile .navbar-nav .emp-submenu { /* Deliberately NOT .navbar-nav: it is a list inside the nav, not a second nav. Sharing the class made `.navbar-nav > li` match both lists, which is a real hazard for anything selecting the menu's top-level entries. */ list-style: none; padding-left: 18px; margin: 0 0 6px; border-left: 1px solid #3a4145; } #header .menu-mobile #navbar-mobile .navbar-nav .emp-submenu .nav-link { font-size: 1.35rem !important; padding: 6px 10px; color: #b9c0c4; } #header .menu-mobile #navbar-mobile .navbar-nav .emp-submenu .nav-link:hover { color: #16a7df; } /* --- responsive --------------------------------------------------------- app.css drops html to 62.5% below 992px; rems shrink with it. */ @media (max-width: 991.98px) { .emp-band { padding: 50px 0; } .emp-title, .emp-doc h1.emp-banner-title, .emp-doc h2.emp-solution-head, .emp-close .a { font-size: 3.8rem; } .emp-hero { grid-template-columns: 1fr; } .emp-disc { justify-self: center; } .emp-two { grid-template-columns: 1fr; gap: 20px; } .emp-cards { grid-template-columns: repeat(2, 1fr); } .emp-strip { grid-template-columns: repeat(2, 1fr); } .emp-strip-item:nth-child(n) { background: #003f77; } .emp-strip-item:nth-child(even) { background: #0085c4; } .emp-slab { padding: 36px 30px 40px; } .emp-split { grid-template-columns: 1fr; } } /* --- dropdown alignment (fix for a defect in the recovered CSS) ------------ app.css positions each menu panel with a hand-tuned percentage of the NAV's width, because .dropdown-menu is absolute while its li.nav-item is static: #menu-data{left:35%} #menu-cloud{left:44%} #menu-analytics{left:54%} #menu-consulting{left:42%} #menu-vacancy{left:70%} #menu-contact{left:80%} Those numbers only hold for one particular nav width and exactly six circles, so the panels drifted from their icons as the viewport changed, #menu-consulting was already out of sequence (42% where ~63% was needed), and adding the seventh (MX) circle shifted every icon left while the panels stayed put, adding a constant ~87px error. Anchoring each panel to its own li makes the percentage meaningless and the position self-correcting: the panel is centred under its icon no matter how many circles exist or how wide the window is. white-space:nowrap restores the natural panel width, which would otherwise shrink-wrap to the 55px li. tools/test_site.py asserts the offset stays at 0. */ #header .menu-computer .navbar-nav > li.nav-item { position: relative; } #header .menu-computer .dropdown-menu#menu-data, #header .menu-computer .dropdown-menu#menu-cloud, #header .menu-computer .dropdown-menu#menu-analytics, #header .menu-computer .dropdown-menu#menu-consulting, #header .menu-computer .dropdown-menu#menu-vacancy, #header .menu-computer .dropdown-menu#menu-contact, #header .menu-computer .dropdown-menu#menu-empresas { left: 50%; transform: translateX(-50%); white-space: nowrap; } /* The MX panel is the only one with a real list under it — its siblings have one sub-entry at most, so app.css sets the title and the entry side by side with a 28px vertical rule between them (span.divisor). Six entries stacked under that rule leave it a 28px stub floating beside the first one. So for this panel the rule becomes the list's own left border: same 1px, same #004078, same 20px offset, running the full height of the list instead of a fixed 28px. Nothing about the other six changes. float:left from app.css also makes the