/* Theme Name: ALCAN Fire Safety Theme URI: https://alcanfiresafety.com.au Author: MOMO Media Author URI: https://momomedia.com.au Description: Lightweight custom theme for ALCAN Fire Safety in Perth. Version: 1.0.1 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: alcan-fire-safety */ /* IMPORTANT: This file should stay minimal. All critical CSS goes into critical.cssAll non-critical CSS should be enqueued separately. */ /*Do not chnage*/ html {box-sizing: border-box;} *, *::before, *::after {box-sizing: inherit;} body {margin: 0;font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;line-height: 1.5; color: #222;} .e-con > .e-con-inner {width:90%;padding-inline:0;margin-inline: auto;} @media (min-width: 1200px) {.e-con > .e-con-inner {max-width: 90%;}} section {padding:60px 5%} @media screen and (min-width: 670px) {section {padding:60px 0;}} @media screen and (min-width: 1200px) {section {padding:70px 0 !important}} @media screen and (min-width: 1400px) {section {padding:100px 0 !important}} /* ========================= Fonts ========================= */ @font-face { font-family: 'Poppins Black'; src: url('assets/fonts/poppins-black.woff2') format('woff2'), url('assets/fonts/poppins-black.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Bold'; src: url('assets/fonts/poppins-bold.woff2') format('woff2'), url('assets/fonts/poppins-bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Medium'; src: url('assets/fonts/poppins-medium.woff2') format('woff2'), url('assets/fonts/poppins-medium.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Regular'; src: url('assets/fonts/poppins-regular.woff2') format('woff2'), url('assets/fonts/poppins-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins400'; src: url('assets/fonts/Poppins-Regular-ALCAN.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* ========================= Headings ========================= */ h1, h2, h3 {font-family: "Poppins Medium", sans-serif !important;font-style: normal;} p, a, li, button, quote {font-family: "Poppins400", sans-serif !important;font-style: normal;} .elementor-button-text {font-family: "Poppins Medium", sans-serif !important;font-style: normal;font-weight:400;font-size: 17px;} h2 {font-weight:600; margin-top:0!important; margin-bottom:10px!important; letter-spacing:0px} h3 {letter-spacing:0px;font-family: "Poppins400", sans-serif !important; font-weight:400;} h2 strong,h2 b {color: var(--e-global-color-primary) !important;} main a {color:black!important} #img-bg p a {color:white!important} em {font-size:15px} /*Navigation*/ nav ul li > a i {transition: transform 0.3s ease;} nav .hfe-menu-item:hover .sub-arrow i::before {transform: rotate(180deg);} .hfe-menu-item i::before {display: inline-block; /* required for transform */transition: transform 0.3s ease;} nav ul li div > a:hover i::before {transform: rotate(180deg) !important;} #mobile-menu .hfe-flyout-wrapper .hfe-side {width:100%!important} /* ========================= Forms (Mobile First) ========================= */ form label {font-size: 14px;display: block;width: 100%;margin-bottom: 5px;} form input,form select,form textarea {display: block !important;width: 100% !important;border-radius: 6px !important;margin-bottom: 15px;} form select {height: 42px;} form textarea {max-height: 130px;} .form-row {display: flex;flex-wrap: wrap;gap: 0;margin-bottom: 0;} .form-col {flex: 1;min-width: 250px;} .form-row .form-col:last-child {margin-right: 0;} form h4 {font-size: 17px;margin-bottom: 10px;} form h4 strong {display: flex;align-items: center;gap: 10px;} form h4 strong::after {content: "";flex: 1;border-bottom: 1px solid orange;} textarea {background:transparent!important;} form input {padding:10px!important} form label {display:none!important} button.forminator-button {background: var(--e-global-color-primary) !important;border-radius: 40px!important;padding: 15px 20px!important;} form br {display:none!important} h3:has(+ form) {margin:0!important} form .forminator-button {color:black!important; font-weight:500; font-size:17px!important} /* ========================= Lists & Custom Bullets ========================= */ main ul, main ol {padding-bottom:00px !important;padding-left: 0;margin: 0;list-style: none;} main li {display: flex;align-items: baseline;margin-bottom: 5px;} main ul {list-style-position: outside;padding-left:0; margin-left:20px;} main li {display: list-item;padding-left: .3em;list-style: outside;} /* ========================= FAQ & Headings after p/ul ========================= */ #FAQ summary {border-bottom: 1px solid orange; padding: 15px 0 10px 0 !important;} #FAQ h3 {display: inline-block;border: none !important;padding-bottom: 0;} summary[aria-expanded="true"] h3 {font-weight: bold;} summary:hover svg {fill:var(--e-global-color-primary) !important;} summary:hover h3 {color:var(--e-global-color-primary) !important;} /* ========================= What We Do Section ========================= */ #what-we-do h3 {font-size: 20px;display: flex;align-items: center;justify-content: flex-start;position: relative; margin-bottom: 10px;} #what-we-do h3::after {content: "";flex: 1;height: 1px;background: black;margin: 0 10px;} #what-we-do a {text-decoration: none;} /* ========================= Carousel ========================= */ .carousel-wrapper {overflow: hidden;width: 100%;} .elementor-element.elementor-pagination-position-outside .swiper {padding-bottom: 50px !important;} /* ========================= Miscellaneous ========================= */ .pum-title {display: none !important;} .pum .wpcf7-spinner {display:none!important} #alcan p strong {color: var(--e-global-color-primary);} #copyright * {color: white !important;} svg path,svg rect,svg line {stroke-width: 1px !important;} #orange-icons * {stroke:#f58220!important} /* ========================= Responsive (Mobile First) ========================= */ @media screen and (min-width: 670px) { .form-row {gap: 20px;} } /* ========================================= */ /* 1. Blog (Mobile First) */ /* ========================================= */ /* Sets a global maximum width and centers the content on large screens */ .momo-main-layout {max-width: 100%;margin: 0 auto;padding:0px;} .momo-blog-layout {display: flex;flex-direction: column;gap: 40px;} /* Page Header */ .momo-page-header {text-align: center;padding-bottom: 30px; margin-bottom: 20px;} .momo-page-header h1 {font-size: 2.5rem;} /* Sidebar Styling (Full width on mobile) */ .momo-blog-sidebar {width: 100%;} .sidebar-widget {padding: 20px;margin-bottom: 20px;border-radius: 6px;} /* CTA Button Styling */ .momo-button-cta {display: block;text-align: center;background-color: #007bff; /* Primary Brand Color */color: white;padding: 12px 15px;text-decoration: none;border-radius: 4px;margin-top: 15px;font-weight: bold;transition: background-color 0.3s;} .momo-button-cta:hover {background-color: #0056b3;} /* ========================================= */ /* 2. Post Listing Area (Responsive Grid) */ /* ========================================= */ /* --- Mobile-First Layout (Default: 1 Column) --- */ .momo-post-list-area {display: grid;/* 1 Column on mobile */grid-template-columns: 1fr;gap: 40px; } /* Card Styling (post-stacked) */ .momo-post-stacked {max-width: 600px; margin: 0 auto;padding: 0 0 20px 0;border-bottom: 1px dashed #e0e0e0;} .momo-post-stacked:last-child {border-bottom: none;} /* Individual Post Elements */ .post-image-wrap {margin-bottom: 15px;} .post-image-wrap img {width: 100%;height: auto;display: block;border-radius: 6px;} .post-title a {font-size: 25px;color: #c0ce30 !important;text-decoration: none;line-height: 1.2; margin-bottom: 5px;display: block;} .post-meta-details {font-size: 0.9rem;color: #6c757d;margin-bottom: 15px;} .meta-separator {margin: 0 8px;color: #ccc;} .post-excerpt {margin-bottom: 20px;line-height: 1.6;} .momo-read-more-link {font-weight: bold;color: #007bff;text-decoration: none;transition: color 0.3s;} .momo-read-more-link:hover {color: #0056b3;} #rank-math-toc.mobile {display:block!important} #post-header {padding:25px;background: black;border-radius: 10px;margin-bottom: 30px;} .single-post h1 {line-height: 1.3;margin-bottom:0px;margin-top:0px;font-size:24px; color:#ff8200 !important} .post-content h2 { border-top:1px solid white; padding-top:30px} .post-content h2:first-of-type, .post-content figure + h2 {border-top:0!important; padding-top:0!important; margin-top:25px!important} .post-row-thumbnail {margin-bottom:20px} /* ========================================= */ /* 3. Media Queries (Tablet & Desktop) */ /* ========================================= */ @media (min-width: 768px) { .momo-blog-layout {flex-direction: row; /* Content and sidebar side-by-side */} .momo-post-list-area {width: 65%; /* Allocate 65% for the post grid *//* 2 Columns on Tablet */grid-template-columns: 1fr 1fr;gap: 25px;} .momo-blog-sidebar {width: 35%; /* Allocate 35% for the sidebar */padding-top: 10px;} /* Resets the card styling for the grid environment */ .momo-post-stacked {max-width: none;margin: 0;padding: 0;border-bottom: none; /* Let the grid handle the vertical separation */} .single-post #rank-math-toc.mobile {display:none!important} .single-post h1 {font-size:30px; } #post-header {padding:50px;} } @media (min-width: 1024px) { .momo-post-list-area {/* 3 Columns on Desktop */grid-template-columns: 1fr 1fr 1fr;gap: 40px;} /* Adjust width of columns for typical desktop screens */ .momo-post-list-area {width: 80%;} .momo-blog-sidebar {width: 20%;} } .slide {border-radius:10px;} .slide p:first-of-type {display: block;align-items: center;gap: 16px;} /*Accordion*/ summary + [role="region"] {padding-left: 0; padding-right:0} summary + [role="region"] p {margin-top:0!important} /*Services*/ #all-our-services svg path.cls-1 {stop-color:black; fill: black;} #custom-listing li {border:1px dotted black; padding:10px 20px;margin-bottom:10px; border-radius:30px} #pulse {padding-left:45px!important} .rank-math-breadcrumb::before {content: "";position: absolute;left: 10px;top: 50%;transform: translateY(-50%);width: 30px;height: 30px;background-image: url("assets/img/dot.svg"); background-repeat: no-repeat;background-size: contain; animation: dotPulse 1.6s ease-in-out infinite;} @keyframes dotPulse { 0% {opacity: 0.3;} 50% {opacity: 0.9;} 100% {opacity: 0.3;} } #pulse a {color:white!important} /*Training*/ #all-our-training a .elementor-button-text {font-size:15px!important; color:black;} /*About Us*/ #our-team h3 {position: relative;border-radius: 30px;padding: 10px 20px 10px 36px; /* extra left space for dot */ border: 1px solid black;width: fit-content !important;} #our-team h3::before {content: ""; position: absolute;left: 16px;top: 50%;transform: translateY(-50%);width: 10px;height: 10px;background-color: var(--e-global-color-primary);border-radius: 50%;} /* Timeline wrapper */ #timeline {position: relative;} /* Vertical line (inactive) */ #timeline::before {content: ""; position: absolute;left: 30px;top: 0;bottom: 0;width: 2px;background: rgba(255, 255, 255, 0.15);} /* Vertical line (active) */ #timeline::after {content:"";position:absolute;left:23px;top:20px;width:2px;height:var(--line-height, 0%);background:var(--e-global-color-primary);transition:height 0.15s ease-out;} /* Each timeline item */ #timeline .elementor-widget-icon-box {position: relative;z-index: 2;margin-bottom:25px;} /* Icon base */ #timeline .elementor-icon-box-icon {background: rgba(255, 255, 255, 0.05);border-radius: 50%;padding: 10px;transition: all 0.4s ease;} /* Active state */ #timeline .elementor-widget-icon-box.is-active .elementor-icon-box-icon {background: var(--e-global-color-primary);box-shadow: 0 0 15px rgba(186, 204, 51, 0.4);} /* Active SVG colour */ #timeline .elementor-widget-icon-box.is-active .elementor-icon-box-icon svg path {fill: black !important;} @media screen and (min-width: 1800px) { h2 {font-size:38px!important;} h3 {font-size:27px!important;} main p, main li span, main li, main a {font-size:24px !important} }