1481 lines
27 KiB
CSS
1481 lines
27 KiB
CSS
/* ==========================================================================
|
|
PURE CSS & FLEXBOX/GRID STYLESHEET (NO BOOTSTRAP / NO JQUERY DEPENDENCY)
|
|
========================================================================== */
|
|
|
|
/* --- RESET & BASE STYLES --- */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
font-family: "Raleway", sans-serif;
|
|
font-size: 14px;
|
|
color: #828282;
|
|
background-color: #eee;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#page-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
position: relative;
|
|
}
|
|
|
|
/* --- TYPOGRAPHY --- */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: "Montserrat", sans-serif;
|
|
color: #444;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
h1 { font-size: 30px; }
|
|
h2 { font-size: 24px; }
|
|
h3 { font-size: 20px; }
|
|
h4 { font-size: 18px; }
|
|
h5 { font-size: 14px; }
|
|
|
|
p {
|
|
font-size: 14px;
|
|
line-height: 2em;
|
|
color: #444;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #444;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #ffbf00;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.text-center { text-align: center; }
|
|
.text-left { text-align: left; }
|
|
.text-uppercase { text-transform: uppercase; }
|
|
.fsi { font-style: italic !important; }
|
|
.play-font { font-family: "Playfair Display", serif !important; }
|
|
.mb-30 { margin-bottom: 30px !important; }
|
|
.pos-r { position: relative; }
|
|
|
|
/* --- BUTTONS --- */
|
|
.btn {
|
|
display: inline-block;
|
|
font-family: "Montserrat", sans-serif;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
padding: 13px 25px;
|
|
letter-spacing: 1px;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn.radius {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: #fff;
|
|
background-color: #ffbf00;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #222;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-black {
|
|
color: #fff;
|
|
background-color: #111;
|
|
}
|
|
|
|
.btn-black:hover {
|
|
background-color: #fff;
|
|
color: #111;
|
|
}
|
|
|
|
.btn-transparent {
|
|
color: #fff;
|
|
background-color: transparent;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.btn-transparent:hover {
|
|
background-color: #fff;
|
|
color: #444;
|
|
}
|
|
|
|
/* --- SECTION COMMONS --- */
|
|
.section {
|
|
padding: 80px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.bg-white { background-color: #fff; }
|
|
.bg-dark { background-color: #222; }
|
|
.bg-primary { background-color: #ffbf00; }
|
|
.bg-parallax {
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.bg-overlay-black {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
.section-header {
|
|
position: relative;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 25px;
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.section-header::after {
|
|
content: '';
|
|
width: 40px;
|
|
height: 2px;
|
|
background-color: #ffbf00;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
/* --- PRELOADER --- */
|
|
.preload {
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: #111;
|
|
z-index: 99999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: opacity 0.5s ease, visibility 0.5s ease;
|
|
}
|
|
|
|
.preload.completed {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.square {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #ffbf00;
|
|
animation: spinSquare 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes spinSquare {
|
|
0% { transform: rotate(0deg) scale(1); }
|
|
50% { transform: rotate(180deg) scale(1.2); }
|
|
100% { transform: rotate(360deg) scale(1); }
|
|
}
|
|
|
|
/* --- HEADER & NAVIGATION --- */
|
|
.header {
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.main-header {
|
|
background-color: #fff;
|
|
padding: 25px 0;
|
|
}
|
|
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-contact-list {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.info-contact-list li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.info-contact-list i {
|
|
color: #ffbf00;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.info-contact-list p {
|
|
margin: 0;
|
|
line-height: 1.2em;
|
|
font-weight: 600;
|
|
color: #444;
|
|
}
|
|
|
|
.info-contact-list p.vice {
|
|
font-size: 12px;
|
|
color: #878787;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.navBar6 {
|
|
background-color: #f9f9f9;
|
|
border-top: 1px solid #eee;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.navigation ul {
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navigation ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.navigation ul li a {
|
|
display: block;
|
|
padding: 18px 20px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #444;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.navigation ul li a:hover,
|
|
.navigation ul li.active > a {
|
|
color: #ffbf00;
|
|
}
|
|
|
|
/* Submenu Dropdown */
|
|
.navigation ul li.menu-item-has-children:hover > .sub-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.navigation .sub-menu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 220px;
|
|
background-color: #111;
|
|
display: block;
|
|
padding: 10px 0;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(10px);
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
|
z-index: 110;
|
|
}
|
|
|
|
.navigation .sub-menu li a {
|
|
color: #aaa;
|
|
padding: 10px 20px;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.navigation .sub-menu li a:hover {
|
|
color: #ffbf00;
|
|
background-color: #222;
|
|
}
|
|
|
|
/* Mobile Toggle */
|
|
.mobile-nav-toggle {
|
|
display: none;
|
|
background: #111;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mobile-nav-toggle .hamburger {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background-color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-nav-toggle .hamburger::before,
|
|
.mobile-nav-toggle .hamburger::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 2px;
|
|
background-color: #fff;
|
|
left: 0;
|
|
}
|
|
|
|
.mobile-nav-toggle .hamburger::before { top: -6px; }
|
|
.mobile-nav-toggle .hamburger::after { bottom: -6px; }
|
|
|
|
/* --- HERO SLIDER --- */
|
|
.hero-slider {
|
|
position: relative;
|
|
height: 550px;
|
|
overflow: hidden;
|
|
background-color: #222;
|
|
}
|
|
|
|
.slides-container {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.slide {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: opacity 0.8s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.slide.active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.slide-overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.slide-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
color: #fff;
|
|
}
|
|
|
|
.slide-title {
|
|
font-size: 42px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.slide-subtitle {
|
|
font-family: "Playfair Display", serif;
|
|
font-style: italic;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.slide-desc {
|
|
color: #ddd;
|
|
font-size: 16px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.slide-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: inherit;
|
|
}
|
|
|
|
.text-center .slide-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.slider-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(0,0,0,0.6);
|
|
color: #fff;
|
|
border: none;
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.slider-arrow:hover {
|
|
background: #ffbf00;
|
|
}
|
|
|
|
.prev-arrow { left: 20px; }
|
|
.next-arrow { right: 20px; }
|
|
|
|
.slider-dots {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.5);
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.dot.active {
|
|
background: #ffbf00;
|
|
}
|
|
|
|
/* --- ABOUT SECTION GRID --- */
|
|
.grid-2col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.align-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.video-responsive {
|
|
position: relative;
|
|
padding-bottom: 56.25%; /* 16:9 ratio */
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-responsive iframe {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
/* --- PORTFOLIO GRID --- */
|
|
.grid-3col {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.portfolio-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.portfolio-media {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.portfolio-media img {
|
|
width: 100%;
|
|
height: 220px;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.hover-link:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hover-link .overlay {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(255, 191, 0, 0.85);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.hover-link:hover .overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hover-link .overlay i {
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.portfolio-item h5 {
|
|
text-transform: uppercase;
|
|
font-size: 14px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.portfolio-section .portfolio-item h5 a {
|
|
color: #fff;
|
|
}
|
|
|
|
.portfolio-section .portfolio-item h5 a:hover {
|
|
color: #ffbf00;
|
|
}
|
|
|
|
/* --- QUOTE BANNER --- */
|
|
.quote-banner {
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.quote-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.quote-flex h3 {
|
|
font-size: 18px;
|
|
line-height: 1.5em;
|
|
color: #222;
|
|
margin: 0;
|
|
}
|
|
|
|
/* --- FOOTER --- */
|
|
.foot-widget {
|
|
padding-top: 80px;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr 1fr;
|
|
gap: 40px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.widget_about .logo {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.widget_about p {
|
|
color: #888;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.social-list {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.social-list li a {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.social-list li a:hover {
|
|
background: #ffbf00;
|
|
color: #111;
|
|
}
|
|
|
|
.widget-title {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 25px;
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.widget-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0;
|
|
width: 30px; height: 2px;
|
|
background-color: #ffbf00;
|
|
}
|
|
|
|
.widget_contact ul {
|
|
list-style: none;
|
|
}
|
|
|
|
.widget_contact ul li {
|
|
color: #878787;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.widget_contact ul li i {
|
|
color: #ffbf00;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.widget_subscribe p {
|
|
color: #888;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.mobile-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.foot-credit {
|
|
background-color: #111;
|
|
padding: 20px 0;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.foot-credit-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.foot-credit p {
|
|
font-size: 12px;
|
|
color: #878787;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.foot-menu {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.foot-menu li a {
|
|
color: #878787;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.foot-menu li a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* --- SUB-HEADER / BREADCRUMBS (EM AMARELO) --- */
|
|
#sub-header {
|
|
background-size: cover;
|
|
background-position: center;
|
|
position: relative;
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.sub-wrapper {
|
|
position: relative;
|
|
z-index: 10;
|
|
color: #ffbf00;
|
|
}
|
|
|
|
.sub-wrapper h1 {
|
|
color: #ffbf00;
|
|
font-size: 36px;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sub-wrapper h2.h4 {
|
|
color: #ffbf00;
|
|
font-family: "Playfair Display", serif;
|
|
font-style: italic;
|
|
font-size: 18px;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.breadcrumb-container {
|
|
background: rgba(0, 0, 0, 0.75);
|
|
padding: 10px 15px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.breadcrumb-container span {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.breadcrumb {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.breadcrumb li,
|
|
.breadcrumb li a {
|
|
color: #ffbf00;
|
|
}
|
|
|
|
.breadcrumb li a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.breadcrumb li + li::before {
|
|
content: "/";
|
|
padding-right: 8px;
|
|
color: #fff;
|
|
}
|
|
|
|
/* --- LAYOUT COM SIDEBAR --- */
|
|
.layout-with-sidebar {
|
|
display: flex;
|
|
gap: 40px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.layout-with-sidebar.reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 300px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* --- MENUS LATERAIS (SIDEBAR / LINKLIST) --- */
|
|
.sidebar .widget {
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.widget_linklist ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 30px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.widget_linklist ul li a,
|
|
.btn-gray {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px 18px;
|
|
background-color: #f4f4f4;
|
|
color: #444 !important;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
border-left: 3px solid transparent;
|
|
transition: all 0.3s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.widget_linklist ul li.active a,
|
|
.widget_linklist ul li a:hover,
|
|
.btn-gray:hover {
|
|
background-color: #ffbf00;
|
|
color: #111 !important;
|
|
border-left-color: #111;
|
|
}
|
|
|
|
/* --- GALERIA SLIDER DE SERVIÇOS (PROPORÇÃO 16:9) --- */
|
|
.service-gallery-wrapper {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.service-gallery-slider {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
background-color: #111;
|
|
border-radius: 4px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.service-gallery-slides {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
.service-gallery-slide {
|
|
min-width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.service-gallery-slide img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.gallery-nav-btn {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(0, 0, 0, 0.6);
|
|
color: #fff;
|
|
border: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.gallery-nav-btn:hover {
|
|
background: #ffbf00;
|
|
color: #111;
|
|
}
|
|
|
|
.gallery-nav-btn.prev { left: 10px; }
|
|
.gallery-nav-btn.next { right: 10px; }
|
|
|
|
.service-gallery-thumbs {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.service-gallery-thumbs img {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.service-gallery-thumbs img.active,
|
|
.service-gallery-thumbs img:hover {
|
|
opacity: 1;
|
|
border-color: #ffbf00;
|
|
}
|
|
|
|
/* --- FORMULÁRIO DE CONTATO --- */
|
|
.contact-form-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-group-2col {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.form-group-2col .form-control {
|
|
flex: 1;
|
|
}
|
|
|
|
.form-control,
|
|
.contact-form-container input[type="text"],
|
|
.contact-form-container input[type="email"],
|
|
.contact-form-container textarea {
|
|
width: 100%;
|
|
padding: 14px 18px;
|
|
border: 1px solid #ccc;
|
|
background-color: #f9f9f9;
|
|
font-family: "Raleway", sans-serif;
|
|
font-size: 14px;
|
|
color: #444;
|
|
box-sizing: border-box;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus,
|
|
.contact-form-container input:focus,
|
|
.contact-form-container textarea:focus {
|
|
outline: none;
|
|
border-color: #ffbf00;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.contact-form-container textarea {
|
|
height: 160px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-status {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.form-status.success { color: #28a745; }
|
|
.form-status.error { color: #dc3545; }
|
|
|
|
/* --- PÁGINA 404 --- */
|
|
.page-not-found {
|
|
text-align: center;
|
|
padding: 100px 0;
|
|
}
|
|
|
|
.page-not-found h1.sbig {
|
|
font-size: 72px;
|
|
color: #111;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* --- MEDIA QUERIES (RESPONSIVIDADE) --- */
|
|
@media (max-width: 991px) {
|
|
.header-container {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.grid-2col, .grid-3col, .footer-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.quote-flex {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.foot-credit-flex {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.layout-with-sidebar,
|
|
.layout-with-sidebar.reverse {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar, .main-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-group-2col {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.info-contact-list {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
align-items: center;
|
|
}
|
|
|
|
.mobile-nav-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.navigation {
|
|
display: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.navigation.active {
|
|
display: block;
|
|
}
|
|
|
|
.navigation ul {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
background: #111;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.navigation ul li {
|
|
width: 100%;
|
|
}
|
|
|
|
.navigation ul li a {
|
|
color: #fff;
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
|
|
.navigation .sub-menu {
|
|
position: static;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
box-shadow: none;
|
|
padding-left: 20px;
|
|
background: #000;
|
|
display: none;
|
|
}
|
|
|
|
.navigation ul li.menu-item-has-children.open > .sub-menu {
|
|
display: block;
|
|
}
|
|
|
|
.slide-title { font-size: 26px; }
|
|
.slide-subtitle { font-size: 16px; }
|
|
.hero-slider { height: 420px; }
|
|
}
|
|
|
|
/* Novos Estilos de Formulário & Notificações */
|
|
.select-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.label-sm {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: #444;
|
|
}
|
|
|
|
.notice-box {
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #f39c12;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.notice-box i {
|
|
font-size: 20px;
|
|
color: #f39c12;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.notice-box p {
|
|
font-size: 13px;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
color: #555;
|
|
}
|
|
|
|
.optin-consent {
|
|
margin: 15px 0 25px;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 28px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.checkbox-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.checkmark {
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 0;
|
|
height: 18px;
|
|
width: 18px;
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.checkbox-container:hover input ~ .checkmark {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.checkbox-container input:checked ~ .checkmark {
|
|
background-color: #f39c12;
|
|
}
|
|
|
|
.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-container input:checked ~ .checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
.checkbox-container .checkmark:after {
|
|
left: 6px;
|
|
top: 2px;
|
|
width: 5px;
|
|
height: 10px;
|
|
border: solid white;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/* Tela Thank You */
|
|
.thankyou-card {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.icon-circle {
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: #27ae60;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
margin: 0 auto 25px;
|
|
}
|
|
|
|
.thankyou-card .lead {
|
|
font-size: 16px;
|
|
color: #555;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
RESPONSIVE REFINEMENT — EDDY'S CONSTRUCTION
|
|
========================================================================== */
|
|
|
|
@media (max-width: 991px) {
|
|
.container,
|
|
.header-container,
|
|
.nav-container {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-contact-list {
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-container {
|
|
position: relative;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mobile-nav-toggle {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.navigation {
|
|
display: none;
|
|
width: 100%;
|
|
flex-basis: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.navigation.active {
|
|
display: block;
|
|
}
|
|
|
|
.navigation > ul {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
padding: 10px 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.navigation > ul > li { width: 100%; }
|
|
.navigation > ul > li > a {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.navigation .sub-menu {
|
|
position: static;
|
|
width: 100%;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
display: none;
|
|
}
|
|
|
|
.navigation ul li.menu-item-has-children.open > .sub-menu {
|
|
display: block;
|
|
}
|
|
|
|
.hero-slider { height: 500px; }
|
|
.slide { background-position: center center; }
|
|
|
|
.slide-content {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-content.text-left,
|
|
.slide-content.text-center { text-align: center; }
|
|
|
|
.slide-title,
|
|
.slide-subtitle,
|
|
.slide-desc {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-title {
|
|
font-size: clamp(24px, 7vw, 34px);
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.slide-subtitle {
|
|
font-size: clamp(16px, 4.5vw, 21px);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.slide-desc {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.slide-buttons {
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.prev-arrow { left: 10px; }
|
|
.next-arrow { right: 10px; }
|
|
|
|
.section > .container {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.grid-2col {
|
|
width: 100%;
|
|
grid-template-columns: 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.about-content,
|
|
.about-media {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.about-content { text-align: center; }
|
|
.about-content .section-header { text-align: center; }
|
|
.about-content .section-header::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.about-content p {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-content .btn {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.video-responsive { width: 100%; }
|
|
|
|
.grid-3col {
|
|
width: 100%;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.quote-flex {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
#footer .container,
|
|
#footer .foot-credit .container {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#footer .footer-grid {
|
|
width: 100%;
|
|
grid-template-columns: 1fr;
|
|
justify-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#footer .widget {
|
|
width: 100%;
|
|
max-width: 520px;
|
|
}
|
|
|
|
#footer .widget_about .logo {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#footer .widget_about p,
|
|
#footer .widget_subscribe p { text-align: center; }
|
|
#footer .social-list { justify-content: center; }
|
|
#footer .widget-title { text-align: center; }
|
|
#footer .widget-title::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
#footer .widget_contact ul { width: 100%; }
|
|
#footer .widget_contact ul li {
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#footer .mobile-actions {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#footer .mobile-actions .btn {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#footer .foot-credit-flex {
|
|
width: 100%;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
#footer .foot-credit p {
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
#footer .foot-menu {
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px 16px;
|
|
}
|
|
|
|
#footer .foot-menu li { text-align: center; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-slider { height: 500px; }
|
|
|
|
.slide-content {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.slide-title { font-size: clamp(22px, 7vw, 30px); }
|
|
.slide-subtitle { font-size: clamp(15px, 4.5vw, 19px); }
|
|
.slide-desc { font-size: 13px; line-height: 1.55; }
|
|
|
|
.slide-buttons {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.slide-buttons .btn {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
}
|
|
|
|
#footer .foot-widget { padding-top: 55px; }
|
|
#footer .footer-grid { gap: 35px; padding-bottom: 35px; }
|
|
#footer .widget_about p { font-size: 13px; line-height: 1.8; }
|
|
#footer .widget_contact ul li { font-size: 13px; line-height: 1.5; }
|
|
#footer .foot-menu { gap: 6px 12px; }
|
|
#footer .foot-menu li a { font-size: 11px; }
|
|
}
|
|
|