*/ } /* Specific styles for the systems page header (H1/H2 spacing) */ main header { background-color: var(--header-bg); color: var(--header-text); transition: background-color 0.3s ease, color 0.3s ease; padding-bottom: 20px; /* Adds some padding to the bottom of the header */ } main header h1 { margin-bottom: 15px; /* Adiciona 15px de espaço abaixo do título principal */ } main header h2 { margin-bottom: 30px; /* Adds 30px space below the subtitle */ } /* --- Styles for system blocks --- */ .system-block { background-color: var(--system-block-bg); border: 1px solid var(--system-block-border); border-radius: 8px; padding: 20px; width: calc(25% - 10px); /* Adjust to ensure 4 columns with gap */ min-width: 280px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .system-blocks { display: flex; flex-wrap: wrap; /* Permite que os blocos quebrem se não houver espaço suficiente */ justify-content: center; /* Alinha o primeiro e o último bloco às bordas */ gap: 10px; /* Espaçamento entre os blocos */ margin-top: 30px; padding: 20px; max-width: 1200px; /* Adjusted for better layout with 4 columns */ margin-left: auto; /* Centraliza o contêiner */ margin-right: auto; } .system-block:hover { transform: translateY(-5px); /* Efeito de elevação ao pairar */ } .system-block img { width: 100px; /* Logo size in the block */ height: 100px; object-fit: contain; margin-bottom: 15px; } .system-block h3 { font-size: 1.2em; color: var(--text-color); /* Theme text color */ margin-bottom: 10px; transition: color 0.3s ease; } .system-block p { font-size: 0.9em; color: var(--text-color); /* Theme text color */ flex-grow: 1; /* Allows description to take available space, aligning buttons */ margin-bottom: 20px; opacity: 0.9; transition: color 0.3s ease; } .system-block .button-saiba-mais { background-color: var(--button-bg); color: var(--button-text); padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .system-block .button-saiba-mais:hover { background-color: var(--button-hover-bg); } /* --- Styles for system blocks Torge --- */ /* Kept separate for potential future distinct styles, though currently identical to .system-block */ .system-block-torge { background-color: var(--system-block-bg); border: 1px solid var(--system-block-border); border-radius: 8px; padding: 20px; width: calc(25% - 10px); min-width: 280px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease-in-out, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .system-block-torge:hover { transform: translateY(-5px); } .system-block-torge img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 15px; } .system-block-torge h3 { font-size: 1.2em; color: var(--text-color); margin-bottom: 10px; transition: color 0.3s ease; } .system-block-torge p { font-size: 0.9em; color: var(--text-color); flex-grow: 1; margin-bottom: 20px; opacity: 0.9; transition: color 0.3s ease; } .system-block-torge .button-saiba-mais { background-color: var(--button-bg); color: var(--button-text); padding: 10px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .system-block-torge .button-saiba-mais:hover { background-color: var(--button-hover-bg); } /* --- Styles for system detail page --- */ .system-detail { padding: 20px; text-align: center; max-width: 800px; margin: 60px auto 40px auto; color: var(--text-color); /* Ensures text on detail page follows theme */ transition: color 0.3s ease; } .system-detail img { width: 180px; height: 180px; object-fit: contain; margin-bottom: 20px; } .system-detail h1 { font-size: 2.5em; color: var(--header-text); /* Title color on detail page */ margin-bottom: 15px; } .system-detail .full-description { font-size: 1.1em; line-height: 1.6; color: var(--text-color); text-align: left; margin-bottom: 30px; } .system-detail .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; margin-bottom: 30px; background-color: black; max-width: 100%; margin-left: auto; margin-right: auto; } .system-detail .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .system-detail .button-whatsapp { background-color: var(--whatsapp-button-bg); color: white; padding: 15px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 1.1em; display: inline-flex; align-items: center; gap: 10px; transition: background-color 0.3s ease; } .system-detail .button-whatsapp:hover { background-color: var(--whatsapp-button-hover-bg); } /* --- Styles for the New Social Media Section (`social-media.php`) --- */ .redes-sociais-secao { text-align: center; padding: 40px 20px; background-color: var(--header-bg); color: var(--header-text); margin-top: 40px; border-top: 1px solid var(--system-block-border); transition: background-color 0.3s ease, color 0.3s ease; } .redes-sociais-secao h3 { font-size: 2em; margin-bottom: 10px; color: var(--header-text); transition: color 0.3s ease; } .redes-sociais-secao p { font-size: 1.1em; margin-bottom: 30px; opacity: 0.9; color: var(--text-color); transition: color 0.3s ease; } .icones-sociais-grandes { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; } .social-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--social-link-color); font-weight: bold; font-size: 0.9em; transition: transform 0.3s ease, color 0.3s ease; } .social-link:hover { transform: translateY(-5px); color: var(--social-link-hover-color); } .social-icon { width: 60px; height: 60px; object-fit: contain; margin-bottom: 10px; transition: filter 0.3s ease; } /* --- Footer Styles --- */ footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 20px; text-align: center; transition: background-color 0.3s ease, color 0.3s ease; } footer .container { max-width: 960px; margin: 0 auto; } footer .redes-sociais { margin-bottom: 15px; } /* --- New Styles from Embedded HTML (Solution Section) --- */ .section-solution { /* REMOVIDO: max-width: 1200px; - Deixe o container-wide controlar a largura */ padding: 30px 0px; box-sizing: border-box; -webkit-font-smoothing: antialiased; display: block; } .section-solution .container-wide { max-width: 1200px; /* Definindo a largura máxima para a seção */ box-sizing: border-box; -webkit-font-smoothing: antialiased; width: 100%; padding-right: 12px; padding-left: 12px; margin-right: auto; margin-left: auto; } .section-solution .header-centered { max-width: 800px; margin: 0px auto; text-align: center; box-sizing: border-box; -webkit-font-smoothing: antialiased; } .section-solution h2 { font-size: 35px; margin-bottom: 10px; box-sizing: border-box; -webkit-font-smoothing: antialiased; margin-top: 0px; font-weight: 500; line-height: 42px; font-family: 'Titillium Web', sans-serif; color: var(--onemsys-blue); /* Using new variable */ } .section-solution h2 b { color: var(--onemsys-blue); /* Using new variable */ box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 700; } .solution-card { box-sizing: border-box; -webkit-font-smoothing: antialiased; height: 530px; /* Mantido conforme seu código. Considere 'auto' se o conteúdo variar. */ position: relative; display: flex; flex-direction: column; min-width: 0px; overflow-wrap: break-word; background-color: var(--card-bg-light); /* Using new variable */ -webkit-background-clip: border-box; border: 1px solid var(--card-border-light); /* Using new variable */ border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; transition: 0.5s; color: var(--onemsys-blue); /* Using new variable */ padding-top: 10px; padding-bottom: 10px; } .solution-card.highlighted { border: 1px solid var(--onemsys-green); /* Specific border for highlighted card */ } .solution-card .card-header-wrapper { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin-bottom: 8px; text-align: center; } .solution-card.highlighted .card-header-wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: var(--onemsys-green); padding-top: 10px; transition: 0.5s; } .solution-card h3 { font-size: 22px; box-sizing: border-box; -webkit-font-smoothing: antialiased; margin-top: 0px; margin-bottom: 8px; font-weight: 500; line-height: 26.4px; font-family: 'Titillium Web', sans-serif; color: var(--onemsys-blue); /* Using new variable */ } .solution-card.highlighted h3 { color: var(--text-color); /* White text for highlighted card header */ } .solution-card h3 b { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 700; } .solution-card .card-description { box-sizing: border-box; -webkit-font-smoothing: antialiased; font-size: 17px; text-align: center; } .solution-card img { box-sizing: border-box; -webkit-font-smoothing: antialiased; vertical-align: middle; border-style: none; max-width: 250px; margin: 0px auto; max-height: 250px; cursor: pointer; } .solution-card .card-button { background-color: var(--onemsys-green); border: 2px solid var(--onemsys-green); color: var(--button-text); font-size: 17px; min-width: 100px; border-radius: 5px; display: block; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 25.5px; text-align: center; text-decoration: none solid var(--button-text); vertical-align: middle; cursor: pointer; user-select: none; padding: 6px 12px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; appearance: button; text-transform: none; margin: 0px auto; /* Centered */ font-family: 'Titillium Web', sans-serif; white-space: nowrap; overflow: visible; max-width: 250px; } .solution-card .card-content { box-sizing: border-box; -webkit-font-smoothing: antialiased; flex: 1 1 auto; padding: 16px; -webkit-box-flex: 1; } .solution-card ul { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin-top: 0px; margin-bottom: 16px; padding-left: 32px; font-size: 16px; list-style: none; /* Removed default list style */ } .solution-card ul li { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-align: left; /* Align list items left */ } .solution-card ul li i { font-weight: 900; font-family: 'Font Awesome 5 Free'; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 16px; box-sizing: border-box; padding-right: 10px; color: var(--onemsys-green); /* Using new variable */ } .solution-card .card-footer-text { box-sizing: border-box; -webkit-font-smoothing: antialiased; padding: 4px 8px; font-size: 15px; } .compare-button { font-size: 17px; min-width: 100px; border-radius: 5px; display: inline-block; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 25.5px; color: var(--button-text); text-align: center; text-decoration: none solid var(--button-text); vertical-align: middle; cursor: pointer; user-select: none; background-color: var(--onemsys-blue); border: 1px solid var(--onemsys-blue); padding: 6px 12px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; white-space: nowrap; margin-top: 20px; } /* --- Media Queries for Responsiveness --- */ /* Tablet (max-width: 992px) - 2 columns */ @media screen and (max-width: 992px) { .system-block, .system-block-torge { width: calc(50% - 10px); /* 2 colunas com 10px de gap */ } .solution-card { height: auto; /* Allow height to adjust on smaller screens */ } } /* Mobile (max-width: 600px) - 1 column */ @media screen and (max-width: 600px) { body { margin-top: 50px; } nav { height: 50px; min-height: 50px; justify-content: space-between; /* Space between button and icon */ padding: 0 15px; /* Padding on the sides of the navigation bar */ } nav ul { display: none; /* Hidden by default for mobile menu */ flex-direction: column; width: 100%; background-color: var(--nav-link-hover); position: absolute; top: 50px; /* Starts below the nav bar */ left: 0; z-index: 998; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); height: auto; align-items: stretch; margin-top: 0; transition: background-color 0.3s ease; } nav ul.active { display: flex; /* Force menu to appear when active */ } nav ul li { width: 100%; margin: 0; } nav li a { text-align: center; padding: 14px 16px; font-size: 1em; color: white; } nav li a:hover { background-color: rgba(2, 101, 65, 0.7); } .menu-icon { display: flex; /* Show hamburger icon */ position: static; /* Revert to static within nav's flex */ order: 2; /* Ensures icon is on the right */ padding: 10px 0; /* Adjust padding */ right: auto; /* Remove previous absolute positioning */ top: auto; transform: none; } #darkModeToggle { position: static; /* Revert to static within nav's flex */ order: 1; /* Ensures theme button is on the left */ padding: 10px 0; /* Adjust padding */ left: auto; /* Remove previous absolute positioning */ top: auto; transform: none; margin-left: 0; /* Remove extra margin */ color: var(--nav-link-color); /* Ensure button text color is same as main nav links */ } /* When menu is ACTIVE, dark mode button integrates into the menu */ nav ul.active #darkModeToggle { position: static; width: auto; margin: 10px auto; padding: 14px 16px; border-radius: 0; color: white; /* Or var(--nav-link-color) for consistency */ } /* System block styles on mobile */ .system-block, .system-block-torge { width: 90%; margin-bottom: 15px; } .system-detail { padding: 15px; } .system-detail .full-description { font-size: 1em; } /* Social media section adjustments on mobile */ .redes-sociais-secao { padding: 30px 15px; } .redes-sociais-secao h3 { font-size: 1.8em; } .redes-sociais-secao p { font-size: 1em; } .icones-sociais-grandes { gap: 20px; } .social-icon { width: 45px !important; /* Force social icon size on mobile */ height: 45px !important; /* Force social icon size on mobile */ } .social-link span { font-size: 0.85em; } /* New styles for mobile responsiveness */ .section-solution h2 { font-size: 28px; /* Adjust font size for smaller screens */ line-height: 35px; } .solution-card ul { padding-left: 20px; /* Adjust padding for list on mobile */ } }