/** * Telme Solutions - Custom CSS overrides for Drupal 11 integration. * This file handles font path fixes, Drupal admin toolbar spacing, * Bootstrap 2 compatibility and other Drupal-specific adjustments. */ /* ========================================================================== Font face fix — override path from vector-iconsf6c4.css which may have wrong relative paths when loaded via Drupal's asset pipeline. ========================================================================== */ @font-face { font-family: 'Moon'; src: url('../font/moon.eot'); src: url('../font/moon.eot?#iefix') format('embedded-opentype'), url('../font/moon.woff') format('woff'), url('../font/moon.ttf') format('truetype'), url('../font/moon.svg#Moon') format('svg'); font-weight: normal; font-style: normal; } /* ========================================================================== Primary brand colour ========================================================================== */ :root { --telme-primary: #019bd8; } a, a:focus { color: #019bd8; } a:hover { color: #017aad; } /* ========================================================================== Drupal admin toolbar — prevent the toolbar from overlapping page content. Drupal adds .toolbar-fixed to when the toolbar is docked at top. ========================================================================== */ body.toolbar-fixed { /* Drupal's own toolbar.css already handles padding-top; this rule ensures our fixed header wrapper is pushed below the toolbar. */ margin-top: 0 !important; } body.toolbar-fixed .header_wrapper { top: 39px !important; /* height of the Drupal toolbar tray */ } body.toolbar-fixed.toolbar-tray-open .header_wrapper { top: 79px !important; /* toolbar + open navigation tray */ } /* ========================================================================== Hide Drupal's default page title on inner pages. The page title is rendered inside the page-header banner in page.html.twig so the .page-title block / h1.page-title must be hidden to avoid duplication. ========================================================================== */ .page-title, h1.page-title { display: none; } /* On the front page the page title block is already hidden by Drupal core convention, but be explicit. */ .path-frontpage .page-title, .path-frontpage h1.page-title { display: none; } /* ========================================================================== Drupal status messages — style to match the Fortis7 theme palette. ========================================================================== */ .messages, .messages--status, .messages--warning, .messages--error { border-radius: 3px; padding: 12px 16px; margin: 12px 0; font-size: 13px; line-height: 1.5; border: 1px solid transparent; } .messages--status { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .messages--warning { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; } .messages--error { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } /* ========================================================================== Bootstrap 2 vs Drupal 11 conflict fixes. Drupal 11 ships with Claro admin theme which injects some base CSS that conflicts with Bootstrap 2's box-model and reset rules. These overrides restore Bootstrap 2 expectations for the front-end theme. ========================================================================== */ /* Bootstrap 2 sets box-sizing: content-box by default; make sure our theme elements are not affected by Drupal's universal border-box reset. */ .container, .row-fluid, .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Drupal's system CSS sometimes adds unwanted outlines on links. */ a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } /* Prevent Drupal's admin CSS leaking text-transform onto menu items. */ #navigation_2 ul li a, .menu-small ul li a { text-transform: none; } /* Make sure Drupal block wrappers inside theme regions don't add extra margins that break the Fortis7 layout. */ .block { margin-bottom: 0; } /* ========================================================================== Drupal tabs (local tasks) — tuck them inside the content area so they don't disrupt the page-header banner. ========================================================================== */ .tabs--primary, ul.tabs.primary { margin: 16px 0 0 0; padding: 0; border-bottom: 1px solid #ddd; } .tabs--primary li a, ul.tabs.primary li a { background: #f5f5f5; border: 1px solid #ddd; border-bottom: none; border-radius: 3px 3px 0 0; color: #555; display: inline-block; padding: 6px 12px; text-decoration: none; } .tabs--primary li.is-active a, ul.tabs.primary li.active a { background: #fff; color: #019bd8; font-weight: 600; } /* ========================================================================== Misc layout helpers ========================================================================== */ /* Ensure the footer stays at the bottom when content is short. */ html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .top_wrapper { flex: 1 0 auto; } /* Scroll-to-top button */ .scrollup { display: none; position: fixed; bottom: 24px; right: 24px; background: #019bd8; color: #fff; border-radius: 3px; padding: 8px 12px; font-size: 12px; text-decoration: none; z-index: 9999; } .scrollup:hover { background: #017aad; color: #fff; text-decoration: none; } /* ================================================================ HOMEPAGE SLIDER ================================================================ */ .telme-slider { position: relative; width: 100%; overflow: hidden; } .telme-slides { position: relative; width: 100%; height: 500px; } .telme-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; opacity: 0; transition: opacity 0.8s ease-in-out; display: flex; align-items: center; justify-content: center; } .telme-slide.active { opacity: 1; z-index: 1; } .slide-content { text-align: center; padding: 40px 0; } .slide-text-img { max-width: 90%; height: auto; margin-bottom: 30px; } .slide-btn { display: inline-block; margin-top: 20px; background: #019bd8 !important; padding: 12px 30px; border-radius: 3px; text-decoration: none; } .slide-btn span { color: #fff !important; font-size: 16px; font-weight: 500; } /* Slider arrows */ .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #fff; font-size: 40px; text-decoration: none; padding: 10px 18px; background: rgba(0,0,0,0.3); border-radius: 3px; transition: background 0.3s; } .slider-prev:hover, .slider-next:hover { background: rgba(0,0,0,0.6); color: #fff; } .slider-prev { left: 20px; } .slider-next { right: 20px; } /* Slider dots */ .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; } .slider-dots .dot { display: inline-block; width: 14px; height: 14px; margin: 0 5px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.3s; } .slider-dots .dot.active { background: #019bd8; } /* Slide animations */ @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes flipInX { 0% { opacity: 0; transform: perspective(400px) rotateX(90deg); } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; transform: perspective(400px) rotateX(0deg); } } .telme-slide.active .animate-bounceIn { animation: bounceIn 1s ease; } .telme-slide.active .animate-fadeIn { animation: fadeIn 0.8s ease 0.3s both; } .telme-slide.active .animate-flipInX { animation: flipInX 1s ease; } /* Responsive slider */ @media (max-width: 768px) { .telme-slides { height: 300px; } .slide-text-img { max-width: 95%; } .slider-prev, .slider-next { font-size: 24px; padding: 5px 12px; } } /* ================================================================ FAVICON - fix Drupal default override ================================================================ */ /* ================================================================ LANGUAGE SWITCHER WITH FLAGS ================================================================ */ #lang_sel { display: inline-block; vertical-align: middle; margin-left: 15px; } #lang_sel ul.language-switcher-language-url { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 8px; } #lang_sel ul.language-switcher-language-url li { display: inline-block; } #lang_sel .language-link { display: inline-flex; align-items: center; gap: 4px; color: #999; font-size: 12px; text-decoration: none; padding: 2px 6px; border: 1px solid transparent; border-radius: 2px; transition: all 0.2s; } #lang_sel .language-link:hover { color: #019bd8; border-color: #ddd; } #lang_sel .language-link.is-active { color: #019bd8; font-weight: 600; } /* Flag images via CSS pseudo-elements */ #lang_sel .language-link[hreflang="pt-br"]::before { content: ''; display: inline-block; width: 16px; height: 11px; background: url(../img/flags/pt.png) no-repeat center; background-size: contain; } #lang_sel .language-link[hreflang="en"]::before { content: ''; display: inline-block; width: 16px; height: 11px; background: url(../img/flags/en.png) no-repeat center; background-size: contain; } /* Show short label, hide full name */ #lang_sel .language-link[hreflang="pt-br"] { font-size: 0; } #lang_sel .language-link[hreflang="pt-br"]::after { content: 'PT'; font-size: 12px; margin-left: 4px; } #lang_sel .language-link[hreflang="en"] { font-size: 0; } #lang_sel .language-link[hreflang="en"]::after { content: 'EN'; font-size: 12px; margin-left: 4px; } /* ================================================================ NAVIGATION DROPDOWN MENUS ================================================================ */ /* Top-level nav items */ #navigation_2 .menu.themeple_megemenu > li { position: relative; } /* Dropdown container - hidden by default */ #navigation_2 .menu.themeple_megemenu > li > .sub-menu.non_mega_menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; z-index: 999; border: 1px solid #eee; border-top: 2px solid #019bd8; box-shadow: 0 6px 12px rgba(0,0,0,0.1); padding: 0; margin: 0; list-style: none; } /* Show on hover */ #navigation_2 .menu.themeple_megemenu > li:hover > .sub-menu.non_mega_menu { display: block; } /* Dropdown items */ #navigation_2 .sub-menu.non_mega_menu li { display: block; border-bottom: 1px solid #f5f5f5; } #navigation_2 .sub-menu.non_mega_menu li:last-child { border-bottom: none; } #navigation_2 .sub-menu.non_mega_menu li a { display: block; padding: 10px 18px; color: #555; font-size: 13px; text-decoration: none; white-space: nowrap; transition: all 0.2s; } #navigation_2 .sub-menu.non_mega_menu li a:hover { background: #f8f8f8; color: #019bd8; padding-left: 22px; } /* Parent item arrow indicator */ #navigation_2 .menu.themeple_megemenu > li.menu-item-has-children > a::after { content: ' \25BE'; font-size: 10px; margin-left: 3px; color: #999; } /* Mobile menu dropdowns */ .menu-small .sub-menu.non_mega_menu { display: none; list-style: none; padding-left: 15px; margin: 0; } .menu-small li.menu-item-has-children.open > .sub-menu.non_mega_menu { display: block; } .menu-small .sub-menu.non_mega_menu li a { padding: 6px 10px; font-size: 13px; color: #666; } /* ================================================================ STICKY MENU — fixed nav on scroll (main.js handles show/hide via opacity/visibility, matching original Fortis7 behavior) ================================================================ */ .sticky_menu { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-top: 2px solid #019bd8; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 8px 0; } .sticky_menu .nav_top { display: flex; align-items: center; justify-content: center; } .sticky_menu .nav_top nav { display: inline-block; } .sticky_menu .nav-lang-selector { margin-left: 15px; } /* Sticky menu nav items */ .sticky_menu .menu.themeple_megemenu > li > a { padding: 8px 12px; font-size: 13px; } .sticky_menu .menu.themeple_megemenu > li > .sub-menu.non_mega_menu { top: 100%; } /* Admin toolbar offset for sticky */ body.toolbar-fixed .sticky_menu { top: 39px; } body.toolbar-fixed.toolbar-tray-open .sticky_menu { top: 79px; } /* ================================================================ LANGUAGE SELECTOR — inline with nav menu ================================================================ */ .nav-lang-inline { display: inline-block; vertical-align: middle; margin-left: 10px; position: relative; top: -2px; } .nav-lang-inline #lang_sel { display: inline-flex; align-items: center; } .nav-lang-inline .language-switcher-language-url { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: 2px; } .nav-lang-inline .language-switcher-language-url li { display: inline-block; } .nav-lang-inline .language-link { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; font-size: 12px; color: #777; text-decoration: none; border: 1px solid #ddd; border-radius: 2px; transition: all 0.2s; background: #f8f8f8; } .nav-lang-inline .language-link:hover { background: #eee; color: #019bd8; } .nav-lang-inline .language-link.is-active { background: #019bd8; color: #fff; border-color: #019bd8; } /* Flag images */ .nav-lang-inline .language-link[hreflang="pt-br"]::before, .nav-lang-inline .language-link[hreflang="en"]::before { content: ''; display: inline-block; width: 16px; height: 11px; background-size: contain; background-repeat: no-repeat; } .nav-lang-inline .language-link[hreflang="pt-br"]::before { background-image: url(../img/flags/pt.png); } .nav-lang-inline .language-link[hreflang="en"]::before { background-image: url(../img/flags/en.png); } /* Short labels */ .nav-lang-inline .language-link { font-size: 0; } .nav-lang-inline .language-link::after { font-size: 11px; font-weight: 600; } .nav-lang-inline .language-link[hreflang="pt-br"]::after { content: 'PT'; } .nav-lang-inline .language-link[hreflang="en"]::after { content: 'EN'; } /* Remove old top_bar language styles */ .top_nav #lang_sel { display: none; } /* ================================================================ LANGUAGE SELECT DROPDOWN (overrides previous link-based styles) ================================================================ */ .nav-lang-inline .icl_languages_selector, .nav-lang-selector .icl_languages_selector, .top_nav .icl_languages_selector { display: inline-block; vertical-align: middle; } #lang_sel { display: inline-flex; align-items: center; gap: 4px; } #lang_sel .language-icon { vertical-align: middle; margin-right: 2px; } #lang_sel .lang-dropdown-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url('data:image/svg+xml;utf8,') no-repeat right 6px center; border: 1px solid #ddd; border-radius: 2px; padding: 3px 22px 3px 8px; font-size: 12px; color: #555; cursor: pointer; width: 60px; height: 26px; line-height: 20px; } #lang_sel .lang-dropdown-select:hover { border-color: #019bd8; } /* Hide old link-based styles */ .nav-lang-inline .language-switcher-language-url { display: none !important; } /* ================================================================ SEARCH ICON (lupa) — right of language selector ================================================================ */ .header_search { display: inline-block; vertical-align: middle; margin-left: 10px; } .header_search .right_search { cursor: pointer; } .header_search .right_search i { font-size: 16px; color: #999; transition: color 0.2s; } .header_search .right_search:hover i { color: #019bd8; } /* ================================================================ PARALLAX SECTION FIX — ensure background renders with height ================================================================ */ .section-style.parallax_section { position: relative; padding: 60px 0; overflow: hidden; background: #333; } .section-style.parallax_section > .container > .row-fluid { position: relative; z-index: 1; } .section-style.parallax_section .parallax_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; opacity: 0.8; } .parallax_section .default_list.light li span { color: #fff; } .parallax_section .default_list.light.check li { padding-left: 25px; position: relative; margin-bottom: 12px; } .parallax_section .default_list.light.check li::before { content: '\2713'; color: #019bd8; font-weight: bold; position: absolute; left: 0; } .parallax_section .media_el img { max-width: 100%; height: auto; } /* ================================================================ REMOVE SEARCH ICON COMPLETELY ================================================================ */ .header_search { display: none !important; } /* ================================================================ FIX: Language selector position — AFTER menu items (right end) ================================================================ */ #navigation_2 { display: flex; align-items: center; float: right; } #navigation_2 .nav_top { flex: 1; display: inline-block; } #navigation_2 .nav-lang-inline { order: 2; flex-shrink: 0; margin-left: 15px; display: inline-flex; align-items: center; } #navigation_2 .mobile_small_menu { order: 3; } /* ================================================================ FIX: Parallax section fullwidth + show right image ================================================================ */ .section-style.parallax_section.remove-wrapper { margin-left: -9999px; margin-right: -9999px; padding-left: 9999px; padding-right: 9999px; } .parallax_section .media_el { text-align: center; } .parallax_section .media_el img { max-width: 100%; height: auto; display: block; position: relative; z-index: 1; } /* ================================================================ FIX: Sticky menu guaranteed to work ================================================================ */ .sticky_menu[style*="visible"] { display: block !important; } /* ================================================================ FIX: Intro text overlap — hide subtitle on same line ================================================================ */ .page_intro.type-center p { display: block; clear: both; font-size: 16px; color: #999; margin-top: 10px; } /* ================================================================ FIX: Sticky menu dropdown submenus ================================================================ */ .sticky_menu .menu.themeple_megemenu > li { position: relative; display: inline-block; } .sticky_menu .menu.themeple_megemenu > li > .sub-menu.non_mega_menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 220px; z-index: 99999; border: 1px solid #eee; border-top: 2px solid #019bd8; box-shadow: 0 6px 12px rgba(0,0,0,0.1); padding: 0; margin: 0; list-style: none; } .sticky_menu .menu.themeple_megemenu > li:hover > .sub-menu.non_mega_menu { display: block; } .sticky_menu .sub-menu.non_mega_menu li { display: block; border-bottom: 1px solid #f5f5f5; } .sticky_menu .sub-menu.non_mega_menu li:last-child { border-bottom: none; } .sticky_menu .sub-menu.non_mega_menu li a { display: block; padding: 10px 18px; color: #555; font-size: 13px; text-decoration: none; white-space: nowrap; transition: all 0.2s; } .sticky_menu .sub-menu.non_mega_menu li a:hover { background: #f8f8f8; color: #019bd8; padding-left: 22px; } .sticky_menu .menu.themeple_megemenu > li.menu-item-has-children > a::after { content: ' \25BE'; font-size: 10px; margin-left: 3px; color: #999; } /* ================================================================ FIX: Parallax mac.png image — force visible The original animations.js sets start_animation class on scroll which changes opacity:0 to opacity:1. Since jQuery 4 may break the animation plugin, we force the image visible. ================================================================ */ .parallax_section .media_el img, .row-dynamic-el .media_el img { opacity: 1 !important; }