/* Theme Name: VoltFix Theme URI: https://voltfix.pro/ Author: VoltFix Appliance Repair LLC Description: VoltFix Appliance Repair theme. Elementor-ready, orange and navy palette, sticky header with icon mega menu, booking and contact forms, FAQ, chat assistant and service-area pages created on activation. Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: voltfix Tags: business, one-column, custom-logo, custom-menu, custom-colors, featured-images, full-width-template, theme-options, translation-ready */ /* ========================================================== 1. Tokens ========================================================== */ :root { --tl-primary: #E2683E; --tl-dark: #C2522B; --tl-text: #111111; --tl-body: #3A3A3A; --tl-heading: #0B213D; --tl-muted: #6B6B6B; --tl-sage: #FAF6F4; --tl-green: #E2683E; --tl-green-soft: #FEF1EB; --tl-cream: #FCFAF9; --tl-line: #EEE8E5; --tl-white: #FFFFFF; --tl-gold: #F28C5B; --tl-radius: 14px; --tl-radius-sm: 10px; --tl-shadow: 0 18px 50px -20px rgba(17, 17, 17, .28); --tl-shadow-sm: 0 6px 20px -10px rgba(17, 17, 17, .25); --tl-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --tl-display: "Libre Caslon Condensed", "Iowan Old Style", Georgia, "Times New Roman", serif; --tl-container: 1240px; --tl-header-h: 80px; } /* ========================================================== 2. Base ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--tl-font); font-size: 16.5px; line-height: 1.75; color: var(--tl-body); background: var(--tl-white); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--tl-primary); text-decoration: none; transition: color .2s; } a:hover { color: var(--tl-dark); } h1, h2, h3, h4, h5, h6 { color: var(--tl-heading); font-family: var(--tl-display); line-height: 1.1; letter-spacing: -0.005em; margin: 0 0 .5em; font-weight: 600; } h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; } h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); } h2 { font-size: clamp(2.1rem, 3.8vw, 3rem); } h3 { font-size: 1.5rem; font-weight: 600; } p { margin: 0 0 1.1em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--tl-primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; } .skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; z-index: 1000; top: 10px; left: 10px; padding: 12px 18px; background: var(--tl-white); color: var(--tl-text); border-radius: 8px; box-shadow: var(--tl-shadow-sm); } .tl-container { width: 100%; max-width: var(--tl-container); margin: 0 auto; padding: 0 24px; } .tl-narrow { max-width: 800px; } .tl-section { padding: clamp(60px, 9vw, 120px) 24px; } .tl-section-sm { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); } .tl-center { text-align: center; } .tl-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; } /* ========================================================== 3. Buttons & links ========================================================== */ .tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--tl-radius-sm); border: 2px solid transparent; font-weight: 700; font-size: 15px; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; } .tl-btn:hover { transform: translateY(-1px); } .tl-btn-primary { background: var(--tl-primary); color: var(--tl-white); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--tl-primary) 80%, transparent); } .tl-btn-primary:hover { background: var(--tl-dark); color: var(--tl-white); } .tl-btn-outline { border-color: var(--tl-line); color: var(--tl-text); background: var(--tl-white); } .tl-btn-outline:hover { border-color: var(--tl-primary); color: var(--tl-primary); } .tl-btn-block { width: 100%; } .tl-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .tl-link .tl-icon { transition: transform .2s; } .tl-link:hover .tl-icon { transform: translateX(3px); } .tl-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-bottom: 18px; border-radius: 999px; background: var(--tl-white); color: var(--tl-primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* ========================================================== 4. Top bar ========================================================== */ .topbar { background: var(--tl-text); color: rgba(255, 255, 255, .82); font-size: 13.5px; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .topbar-text { margin: 0; display: flex; align-items: center; gap: 8px; } .topbar-text .tl-icon { color: #F2A887; } .topbar-links { display: flex; gap: 22px; } .topbar-links a { color: rgba(255, 255, 255, .82); display: inline-flex; align-items: center; gap: 6px; } .topbar-links a:hover { color: var(--tl-white); } /* ========================================================== 5. Header ========================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--tl-line); transition: box-shadow .25s; } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 0; } } .site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(17, 17, 17, .35); } .header-inner { position: relative; display: flex; align-items: center; gap: 28px; min-height: var(--tl-header-h); } .header-brand { flex-shrink: 0; } .site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--tl-text); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; } .site-brand:hover { color: var(--tl-text); } .brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tl-primary); color: var(--tl-white); } .custom-logo-link img, .site-brand-img img { max-height: 52px; width: auto; display: block; } .site-footer .site-brand-img img { max-height: 48px; } .nav-drawer-head .site-brand-img img { max-height: 42px; } @media (max-width: 600px) { .header-brand .site-brand-img img { max-height: 40px; } } /* Nav */ .main-nav { flex: 1; display: flex; justify-content: center; } .main-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; } .main-nav .menu > li { position: relative; display: flex; align-items: center; } .main-nav .menu > li.is-mega { position: static; } .main-nav .menu > li > a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--tl-text); font-weight: 600; font-size: 15.5px; border-radius: 10px; white-space: nowrap; transition: background .2s, color .2s; } .main-nav .menu > li > a .menu-icon { color: var(--tl-primary); display: inline-flex; } .main-nav .menu > li > a:hover, .main-nav .menu > li.is-open > a, .main-nav .menu > li.current-menu-item > a, .main-nav .menu > li.current-menu-ancestor > a { background: var(--tl-sage); color: var(--tl-dark); } .menu-caret { display: inline-flex; transition: transform .2s; color: var(--tl-muted); } .main-nav .menu > li.is-open > a .menu-caret { transform: rotate(180deg); } .submenu-toggle { display: none; } .nav-drawer-head, .nav-drawer-foot { display: none; } /* Simple dropdown */ .main-nav .sub-menu { list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; } .main-nav .sub-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--tl-text); font-weight: 600; font-size: 15px; } .main-nav .sub-menu a .menu-icon { color: var(--tl-primary); display: inline-flex; } .main-nav .sub-menu a:hover { background: var(--tl-sage); } /* Mega panel */ .mega-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 0 24px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s, transform .22s, visibility .22s; } .mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */ .mega-inner { max-width: calc(var(--tl-container) - 48px); margin: 10px auto 0; padding: 22px; display: grid; grid-template-columns: 1fr 300px; gap: 22px; background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: 20px; box-shadow: var(--tl-shadow); } .mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; } .mega-card { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; color: var(--tl-text); transition: background .2s; } .mega-card:hover { background: var(--tl-cream); color: var(--tl-text); } .mega-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; background: var(--tl-sage); color: var(--tl-primary); transition: background .2s, color .2s; } .mega-card:hover .mega-icon { background: var(--tl-primary); color: var(--tl-white); } .mega-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .mega-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; } .mega-desc { font-size: 13.5px; color: var(--tl-muted); line-height: 1.4; } .mega-sublinks { list-style: none; margin: 0 0 6px 74px; padding: 0; } .mega-sublinks a { display: block; padding: 3px 0; font-size: 14px; color: var(--tl-muted); font-weight: 500; } .mega-sublinks a:hover { color: var(--tl-primary); } .mega-promo { position: relative; overflow: hidden; padding: 24px; border-radius: 16px; background: var(--tl-dark); color: rgba(255, 255, 255, .85); display: flex; flex-direction: column; align-items: flex-start; } .mega-promo::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 168, 135, .35), transparent 70%); } .mega-promo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #F7CEBC; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .mega-promo-title { margin: 14px 0 6px; color: var(--tl-white); font-family: var(--tl-display); font-size: 26px; font-weight: 600; line-height: 1.15; } .mega-promo-text { font-size: 14px; line-height: 1.55; margin-bottom: 18px; } .mega-promo .tl-btn-primary { background: var(--tl-white); color: var(--tl-text); box-shadow: none; position: relative; z-index: 1; } .mega-promo .tl-btn-primary:hover { background: var(--tl-sage); color: var(--tl-text); } .mega-promo-phone { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--tl-white); font-weight: 700; position: relative; z-index: 1; } .mega-promo-phone:hover { color: #F7CEBC; } /* Open states (desktop) */ @media (min-width: 1081px) { .main-nav .menu > li.is-open > .sub-menu, .main-nav .menu > li:focus-within > .sub-menu, .main-nav .menu > li.is-open > .mega-panel, .main-nav .menu > li:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: none; } } /* Actions */ .header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .header-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--tl-text); font-weight: 700; font-size: 15px; line-height: 1.2; } .header-phone:hover { color: var(--tl-primary); } .header-phone-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tl-sage); color: var(--tl-primary); } .header-phone-text { display: flex; flex-direction: column; } .header-phone-text small { font-size: 12px; font-weight: 600; color: var(--tl-muted); } .nav-toggle { display: none; background: none; border: 1px solid var(--tl-line); width: 46px; height: 46px; border-radius: 12px; color: var(--tl-text); cursor: pointer; place-items: center; } .nav-overlay { position: fixed; inset: 0; background: rgba(17, 17, 17, .45); z-index: 250; } @media (max-width: 1240px) { .header-phone-text { display: none; } .main-nav .menu > li > a { padding: 10px 11px; } .main-nav .menu > li > a .menu-icon { display: none; } } /* ========================================================== 6. Mobile drawer ========================================================== */ @media (max-width: 1080px) { /* backdrop-filter would trap the fixed drawer inside the header, so drop it on mobile */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--tl-white); } .nav-open .site-header { z-index: 300; } .nav-toggle { display: grid; } .header-phone { display: none; } .main-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 200; width: min(420px, 92vw); flex-direction: column; justify-content: flex-start; background: var(--tl-white); transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s; overflow-y: auto; box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .3); } .nav-open .main-nav { transform: none; visibility: visible; } .nav-open { overflow: hidden; } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--tl-line); } .nav-close { background: var(--tl-sage); border: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--tl-text); } .nav-drawer-foot { display: grid; gap: 10px; padding: 20px; margin-top: auto; border-top: 1px solid var(--tl-line); } .main-nav .menu { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 12px; } .main-nav .menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--tl-line); } .main-nav .menu > li:last-child { border-bottom: 0; } .main-nav .menu > li > a { flex: 1; padding: 16px 8px; font-size: 17px; background: none !important; } .main-nav .menu > li > a .menu-icon { display: inline-flex; } .menu-caret { display: none; } .submenu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--tl-cream); border-radius: 10px; cursor: pointer; color: var(--tl-text); transition: transform .2s; } .main-nav .menu > li.is-open > .submenu-toggle { transform: rotate(180deg); background: var(--tl-sage); } .main-nav .sub-menu, .mega-panel { position: static; width: 100%; flex-basis: 100%; opacity: 1; visibility: visible; transform: none; display: none; padding: 0 0 12px; box-shadow: none; border: 0; min-width: 0; } .main-nav .menu > li.is-open > .sub-menu, .main-nav .menu > li.is-open > .mega-panel { display: block; } .mega-panel::before { display: none; } .mega-inner { display: block; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; } .mega-grid { grid-template-columns: 1fr; gap: 2px; } .mega-card { padding: 10px 8px; } .mega-icon { width: 40px; height: 40px; } .mega-promo { display: none; } } @media (max-width: 600px) { :root { --tl-header-h: 68px; } } /* ========================================================== 7. Page hero (non-Elementor pages) ========================================================== */ .page-hero { background: var(--tl-sage); padding: clamp(48px, 7vw, 88px) 0; } .page-hero h1 { margin: 0; } .page-hero-text { color: var(--tl-muted); font-size: 18px; max-width: 640px; margin-top: 12px; } .tl-center .page-hero-text { margin-left: auto; margin-right: auto; } /* ========================================================== 8. Blog ========================================================== */ .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } @media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } } .post-card { background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--tl-shadow); } .post-card-media { display: block; aspect-ratio: 16 / 10; background: var(--tl-sage); overflow: hidden; } .post-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-card-placeholder { display: grid; place-items: center; height: 100%; color: var(--tl-primary); } .post-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .post-card-body p { color: var(--tl-muted); font-size: 15.5px; } .post-card-body .tl-link { margin-top: auto; } .post-card-title { font-size: 1.5rem; margin-bottom: 8px; } .post-card-title a { color: var(--tl-text); } .post-card-title a:hover { color: var(--tl-primary); } .post-meta { font-size: 13.5px; font-weight: 600; color: var(--tl-primary); margin-bottom: 8px; } .post-meta a { color: inherit; } .single-thumb { margin: 0 0 32px; } .single-thumb img { border-radius: 18px; display: block; width: 100%; } .entry-content { font-size: 18px; } .entry-content > * + h2, .entry-content > * + h3 { margin-top: 1.6em; } .entry-content img { border-radius: 12px; } .entry-content blockquote { margin: 1.5em 0; padding: 18px 24px; border-left: 4px solid var(--tl-primary); background: var(--tl-cream); border-radius: 0 12px 12px 0; } .post-nav { display: flex; justify-content: space-between; gap: 20px; margin: 48px 0; padding-top: 24px; border-top: 1px solid var(--tl-line); font-weight: 700; } .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--tl-line); color: var(--tl-text); font-weight: 700; } .nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--tl-primary); border-color: var(--tl-primary); color: var(--tl-white); } .comments-area { margin-top: 48px; } .comment-list { list-style: none; padding: 0; } .comment-list .comment { padding: 18px 0; border-bottom: 1px solid var(--tl-line); } /* ========================================================== 9. Forms ========================================================== */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--tl-line); border-radius: var(--tl-radius-sm); background: var(--tl-white); color: var(--tl-text); transition: border-color .2s, box-shadow .2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tl-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tl-primary) 15%, transparent); } label { font-weight: 600; font-size: 14.5px; color: var(--tl-text); } .search-form { display: flex; gap: 8px; } .search-form .tl-btn { padding: 0 18px; } .tl-zip-form { display: flex; align-items: center; gap: 8px; padding: 8px; max-width: 520px; background: var(--tl-white); border-radius: 16px; box-shadow: var(--tl-shadow); } .tl-zip-icon { color: var(--tl-primary); display: inline-flex; padding-left: 10px; } .tl-zip-form input { border: 0; box-shadow: none !important; padding: 12px 6px; font-size: 16px; } .tl-zip-form .tl-btn { padding: 15px 22px; } @media (max-width: 480px) { .tl-zip-form { flex-wrap: wrap; } .tl-zip-form input { flex: 1; min-width: 0; } .tl-zip-form .tl-btn { width: 100%; } } .tl-quote-form { display: grid; gap: 4px; } .tl-field { margin: 0 0 14px; display: grid; gap: 6px; } .tl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 600px) { .tl-field-row { grid-template-columns: 1fr; gap: 0; } } .tl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .tl-quote-form .tl-btn { padding: 16px 22px; font-size: 16px; } .tl-form-small { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13.5px; color: var(--tl-muted); } .tl-form-small .tl-icon { color: var(--tl-primary); } .tl-form-notice { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 600; } .tl-form-notice.is-success { background: var(--tl-sage); color: var(--tl-dark); } .tl-form-notice.is-error { background: #FDECEA; color: #8A1C12; } /* ========================================================== 10. Footer ========================================================== */ .site-footer { background: #111111; color: rgba(255, 255, 255, .7); font-size: 15.5px; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; padding-top: 80px; padding-bottom: 56px; } .site-footer .site-brand { color: var(--tl-white); margin-bottom: 18px; } .footer-about p { max-width: 340px; } .footer-title { color: var(--tl-white); font-family: var(--tl-font); font-size: 15px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0; } .footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site-footer a { color: rgba(255, 255, 255, .7); } .site-footer a:hover { color: #F2A887; } .footer-contact ul { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; } .footer-contact li .tl-icon { color: #F2A887; margin-top: 3px; } .site-footer .tl-btn-primary { color: var(--tl-white); } .footer-social { display: flex; gap: 10px; margin-top: 20px; } .footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .07); transition: background .2s, color .2s; } .footer-social a:hover { background: var(--tl-primary); color: var(--tl-white); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 22px; padding-bottom: 22px; } .footer-bottom p { margin: 0; } .legal-menu { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 56px; } .footer-bottom-inner { flex-direction: column; text-align: center; } } /* ========================================================== 11. Misc ========================================================== */ .tl-admin-hint { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-radius: 14px; background: var(--tl-sage); color: var(--tl-dark); font-weight: 600; } .tl-404-icon { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; background: var(--tl-sage); color: var(--tl-primary); margin-bottom: 24px; } .tl-404-search { max-width: 420px; margin: 0 auto 24px; } .tl-empty { text-align: center; max-width: 480px; margin: 0 auto; } .widget { margin-bottom: 32px; } .alignwide { max-width: 1100px; } .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } .wp-caption-text, figcaption { font-size: 14px; color: var(--tl-muted); text-align: center; } .sticky, .bypostauthor, .gallery-caption { display: block; } /* ========================================================== 12. Elementor helpers (classes used in the pre-built pages) ========================================================== */ .tl-full-width { overflow-x: clip; } .elementor-widget-shortcode .tl-zip-form { margin: 0; } .tl-card-lift { transition: transform .25s, box-shadow .25s; } .tl-card-lift:hover { transform: translateY(-5px); box-shadow: var(--tl-shadow); } .tl-pill .elementor-heading-title { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--tl-white); box-shadow: var(--tl-shadow-sm); } .tl-pill .elementor-heading-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tl-primary); } .tl-step-num .elementor-heading-title { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--tl-primary); color: var(--tl-white) !important; } .tl-float-card { animation: tl-float 6s ease-in-out infinite; } @keyframes tl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .tl-img-cover img { width: 100%; object-fit: cover; } .elementor-widget-testimonial .elementor-testimonial-content { font-size: 16.5px; line-height: 1.65; } .tl-faq .elementor-accordion-item { border-radius: 14px; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--tl-line) !important; background: var(--tl-white); } .tl-faq .elementor-accordion-item + .elementor-accordion-item { border-top: 1px solid var(--tl-line) !important; } .tl-faq .elementor-tab-title { padding: 20px 22px !important; } .tl-faq .elementor-tab-content { border-top: 0 !important; padding: 0 22px 20px !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================== 13. Blog index ========================================================== */ .page-hero-blog { padding-bottom: clamp(40px, 5vw, 64px); } .blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .blog-cats a { padding: 8px 16px; border-radius: 999px; background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); font-weight: 600; font-size: 14.5px; } .blog-cats a:hover, .blog-cats a.is-active { background: var(--tl-primary); border-color: var(--tl-primary); color: var(--tl-white); } .post-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-bottom: 40px; background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: 24px; overflow: hidden; } .post-featured-media { display: block; min-height: 360px; background: var(--tl-sage); } .post-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-featured-body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; } .post-featured-body h2 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); } .post-featured-body h2 a { color: var(--tl-text); } .post-featured-body h2 a:hover { color: var(--tl-primary); } .post-featured-body p { color: var(--tl-muted); margin: 0; } .post-featured-body .post-meta { margin: 0; } .post-badge { padding: 5px 12px; border-radius: 999px; background: var(--tl-green-soft); color: #E2683E; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .post-cat { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; background: var(--tl-sage); color: var(--tl-primary); } .post-card-placeholder { background: linear-gradient(135deg, var(--tl-sage), var(--tl-green-soft)); } @media (max-width: 860px) { .post-featured { grid-template-columns: 1fr; } .post-featured-media { min-height: 240px; } } /* ========================================================== 14. Single post ========================================================== */ .post-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 22px; text-wrap: balance; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tl-muted); } .breadcrumbs a { color: var(--tl-primary); } .post-byline { display: flex; align-items: center; gap: 12px; } .post-byline img { border-radius: 50%; } .post-byline div { display: grid; line-height: 1.35; } .post-byline strong { color: var(--tl-text); } .post-byline span { color: var(--tl-muted); font-size: 14px; } .single-thumb { margin: 0 0 40px; } .single-thumb img { max-height: 520px; object-fit: cover; } .single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } .single-article { min-width: 0; max-width: 760px; } .entry-content h2 { font-size: 1.7rem; } .entry-content ul li::marker, .entry-content ol li::marker { color: var(--tl-primary); font-weight: 700; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } .post-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin: 40px 0; padding: 20px 0; border-top: 1px solid var(--tl-line); border-bottom: 1px solid var(--tl-line); } .post-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border-radius: 999px; background: var(--tl-cream); border: 1px solid var(--tl-line); color: var(--tl-text); font-size: 13.5px; font-weight: 600; } .post-share { display: flex; align-items: center; gap: 8px; } .post-share span { font-weight: 700; color: var(--tl-text); margin-right: 4px; } .post-share a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tl-sage); color: var(--tl-primary); } .post-share a:hover { background: var(--tl-primary); color: var(--tl-white); } .author-box { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border-radius: 20px; background: var(--tl-cream); border: 1px solid var(--tl-line); } .author-box img { border-radius: 50%; flex-shrink: 0; } .author-box h3 { margin: 0 0 6px; } .author-box p { margin: 0; color: var(--tl-muted); font-size: 15.5px; } .author-box .author-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-primary); margin-bottom: 2px; } .single-sidebar { position: sticky; top: calc(var(--tl-header-h) + 24px); display: grid; gap: 24px; } .sidebar-book { padding: 28px; border-radius: 22px; background: var(--tl-dark); color: rgba(255,255,255,.85); background-image: radial-gradient(circle at 100% 0%, rgba(242, 168, 135, .35), transparent 55%); } .sidebar-book h3 { color: var(--tl-white); margin: 14px 0 6px; font-size: 22px; } .sidebar-book p { font-size: 15px; margin-bottom: 18px; } .sidebar-book-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tl-green); color: var(--tl-white); } .sidebar-book .tl-btn-primary { background: var(--tl-white); color: var(--tl-text); box-shadow: none; } .sidebar-book .tl-btn-primary:hover { background: var(--tl-sage); color: var(--tl-text); } .sidebar-phone { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--tl-white); font-weight: 700; } .sidebar-phone:hover { color: #F7CEBC; } .sidebar-recent { padding: 24px; border-radius: 20px; border: 1px solid var(--tl-line); } .sidebar-recent h3 { font-size: 22px; margin-bottom: 12px; } .sidebar-recent ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .sidebar-recent li { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--tl-line); } .sidebar-recent li:last-child { border-bottom: 0; padding-bottom: 0; } .sidebar-recent a { color: var(--tl-text); font-weight: 700; font-size: 15px; line-height: 1.4; } .sidebar-recent a:hover { color: var(--tl-primary); } .sidebar-recent span { color: var(--tl-muted); font-size: 13px; } .related-posts { padding-block: clamp(48px, 7vw, 88px); background: var(--tl-cream); } .related-posts h2 { margin-bottom: 32px; } @media (max-width: 1000px) { .single-layout { grid-template-columns: 1fr; } .single-sidebar { position: static; } } /* ========================================================== 15. CTA band (theme templates) ========================================================== */ .tl-cta-section { padding-block: clamp(56px, 8vw, 100px); } .tl-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(36px, 5vw, 64px); border-radius: 28px; background: var(--tl-dark); background-image: radial-gradient(circle at 92% 10%, rgba(242, 168, 135, .35), transparent 42%); } .tl-cta h2 { color: var(--tl-white); margin: 0 0 8px; } .tl-cta p { color: #6B6B6B; font-size: 18px; margin: 0; max-width: 34em; } .tl-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; flex-shrink: 0; } .tl-btn-light { background: var(--tl-white); color: var(--tl-text); } .tl-btn-light:hover { background: var(--tl-sage); color: var(--tl-text); } .tl-btn-ghost { border-color: rgba(255,255,255,.5); color: var(--tl-white); } .tl-btn-ghost:hover { background: var(--tl-white); color: var(--tl-text); } @media (max-width: 900px) { .tl-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .tl-cta-btns, .tl-cta-btns .tl-btn { width: 100%; } } /* ========================================================== 16. Booking form steps ========================================================== */ .tl-form-step { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; color: var(--tl-text); font-weight: 800; font-size: 17px; } .tl-form-step:first-of-type { margin-top: 0; } .tl-form-step span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tl-green); color: var(--tl-white); font-size: 14px; } /* ========================================================== 17. Minimal premium layer Calm neutrals; orange only for actions and links; green only for tiny accents. ========================================================== */ :root { --tl-shadow: 0 24px 60px -32px rgba(17, 17, 17, .22); --tl-shadow-sm: 0 4px 14px -8px rgba(17, 17, 17, .18); } .tl-btn-primary { box-shadow: none; } .tl-btn { border-radius: 8px; letter-spacing: .01em; } .topbar { background: var(--tl-white); color: var(--tl-muted); border-bottom: 1px solid var(--tl-line); } .topbar-text .tl-icon { color: var(--tl-green); } .topbar-links a { color: var(--tl-muted); } .topbar-links a:hover { color: var(--tl-text); } .site-header { border-bottom-color: var(--tl-line); } .main-nav .menu > li > a .menu-icon { color: var(--tl-muted); } .main-nav .menu > li > a:hover, .main-nav .menu > li.is-open > a, .main-nav .menu > li.current-menu-item > a, .main-nav .menu > li.current-menu-ancestor > a { background: transparent; color: var(--tl-primary); } .main-nav .menu > li > a:hover .menu-icon, .main-nav .menu > li.is-open > a .menu-icon { color: var(--tl-primary); } .header-phone-icon { background: transparent; border: 1px solid var(--tl-line); color: var(--tl-text); } .mega-inner { border-radius: 14px; box-shadow: 0 30px 70px -40px rgba(17, 17, 17, .35); } .mega-card:hover { background: var(--tl-cream); } .mega-icon { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); } .mega-card:hover .mega-icon { background: var(--tl-white); border-color: var(--tl-primary); color: var(--tl-primary); } .mega-title { font-family: var(--tl-display); font-size: 19px; font-weight: 600; } .mega-promo { background: var(--tl-cream); color: var(--tl-muted); border: 1px solid var(--tl-line); } .mega-promo::after { display: none; } .mega-promo-badge { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); } .mega-promo-badge .tl-icon { color: var(--tl-green); } .mega-promo-title { color: var(--tl-text); } .mega-promo .tl-btn-primary { background: var(--tl-primary); color: var(--tl-white); } .mega-promo .tl-btn-primary:hover { background: var(--tl-dark); color: var(--tl-white); } .mega-promo-phone { color: var(--tl-text); } .mega-promo-phone:hover { color: var(--tl-primary); } .tl-eyebrow { background: none; padding: 0; border-radius: 0; color: var(--tl-muted); letter-spacing: .14em; font-size: 12px; } .tl-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--tl-green); margin-right: 6px; } .page-hero { background: var(--tl-cream); border-bottom: 1px solid var(--tl-line); } .site-footer { background: var(--tl-cream); color: var(--tl-muted); border-top: 1px solid var(--tl-line); } .site-footer a { color: var(--tl-muted); } .site-footer a:hover { color: var(--tl-primary); } .footer-title { color: var(--tl-text); } .footer-contact li .tl-icon { color: var(--tl-primary); } .footer-social a { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); } .footer-social a:hover { background: var(--tl-white); border-color: var(--tl-primary); color: var(--tl-primary); } .footer-bottom { border-top-color: var(--tl-line); } .tl-cta { background: var(--tl-cream); border: 1px solid var(--tl-line); background-image: none; } .tl-cta h2 { color: var(--tl-text); } .tl-cta p { color: var(--tl-muted); } .tl-cta .tl-btn-light { background: var(--tl-primary); color: var(--tl-white); } .tl-cta .tl-btn-light:hover { background: var(--tl-dark); color: var(--tl-white); } .tl-cta .tl-btn-ghost { border-color: var(--tl-line); color: var(--tl-text); background: var(--tl-white); } .tl-cta .tl-btn-ghost:hover { border-color: var(--tl-text); color: var(--tl-text); } .sidebar-book { background: var(--tl-cream); background-image: none; border: 1px solid var(--tl-line); color: var(--tl-muted); } .sidebar-book h3 { color: var(--tl-text); } .sidebar-book-icon { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-green); } .sidebar-book .tl-btn-primary { background: var(--tl-primary); color: var(--tl-white); } .sidebar-book .tl-btn-primary:hover { background: var(--tl-dark); color: var(--tl-white); } .sidebar-phone { color: var(--tl-text); } .sidebar-phone:hover { color: var(--tl-primary); } .post-card { border-radius: 14px; } .post-card:hover { box-shadow: var(--tl-shadow); } .post-card-placeholder { background: linear-gradient(160deg, #F2F2F0, #E4E4E1); color: #A0A0A0; } .post-cat { background: var(--tl-cream); color: var(--tl-muted); border: 1px solid var(--tl-line); } .post-featured { border-radius: 18px; } .blog-cats a:hover, .blog-cats a.is-active { background: var(--tl-text); border-color: var(--tl-text); } .post-share a { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); } .tl-form-step span { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); } .tl-form-notice.is-success { background: var(--tl-green-soft); color: #123468; } /* ========================================================== 18. FAQ [voltfix_faq] ========================================================== */ .mfu-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); gap: clamp(40px, 6vw, 96px); align-items: start; text-align: left; } .mfu-faq-side { position: sticky; top: calc(var(--tl-header-h) + 32px); display: flex; flex-direction: column; gap: 16px; } .mfu-faq-title { margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1.02; } .mfu-faq-intro { margin: 0; color: var(--tl-muted); font-size: 17px; max-width: 30em; } .mfu-faq-search { position: relative; display: flex; align-items: center; margin-top: 8px; color: var(--tl-muted); } .mfu-faq-search .tl-icon { position: absolute; left: 16px; pointer-events: none; } .mfu-faq-search input { padding: 15px 16px 15px 46px; border-radius: 10px; border: 1px solid var(--tl-line); background: var(--tl-white); font-size: 15.5px; } .mfu-faq-help { margin-top: 12px; padding: 24px; border: 1px solid var(--tl-line); border-radius: 14px; background: var(--tl-cream); } .mfu-faq-help p { margin: 0 0 4px; color: var(--tl-muted); font-size: 15px; } .mfu-faq-help .mfu-faq-help-title { color: var(--tl-text); font-family: var(--tl-display); font-size: 22px; font-weight: 600; } .mfu-faq-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 16px; } .mfu-faq-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--tl-text); font-weight: 600; font-size: 15px; } .mfu-faq-phone:hover { color: var(--tl-primary); } .mfu-faq-main { min-width: 0; } .mfu-faq-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; } .mfu-faq-tabs::-webkit-scrollbar { display: none; } .mfu-faq-tabs button { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--tl-line); background: var(--tl-white); color: var(--tl-muted); font-weight: 600; font-size: 14px; cursor: pointer; transition: all .2s; } .mfu-faq-tabs button:hover { color: var(--tl-text); border-color: #CFCFCF; } .mfu-faq-tabs button.is-active { background: var(--tl-text); border-color: var(--tl-text); color: var(--tl-white); } .mfu-faq-list { border-top: 1px solid var(--tl-line); } .mfu-faq-item { border-bottom: 1px solid var(--tl-line); } .mfu-faq-item[hidden] { display: none; } .mfu-faq-q { margin: 0; font: inherit; } .mfu-faq-q button { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 24px 4px; border: 0; background: none; cursor: pointer; text-align: left; color: var(--tl-text); } .mfu-faq-num { font-family: var(--tl-font); font-size: 13px; font-weight: 600; color: #A6A6A6; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .mfu-faq-qtext { font-family: var(--tl-display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.25; transition: color .2s; } .mfu-faq-q button:hover .mfu-faq-qtext { color: var(--tl-primary); } .mfu-faq-icon { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--tl-line); transition: background .25s, border-color .25s, transform .3s; } .mfu-faq-icon::before, .mfu-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--tl-text); transform: translate(-50%, -50%); transition: transform .3s, background .25s; } .mfu-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .mfu-faq-item.is-open .mfu-faq-icon { background: var(--tl-primary); border-color: var(--tl-primary); transform: rotate(180deg); } .mfu-faq-item.is-open .mfu-faq-icon::before, .mfu-faq-item.is-open .mfu-faq-icon::after { background: var(--tl-white); } .mfu-faq-item.is-open .mfu-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .mfu-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .mfu-faq-item.is-open .mfu-faq-a { grid-template-rows: 1fr; } .mfu-faq-a-inner { overflow: hidden; padding-left: 56px; padding-right: 40px; color: var(--tl-muted); font-size: 16.5px; } .mfu-faq-a-inner > *:first-child { margin-top: 0; } .mfu-faq-a-inner > *:last-child { margin-bottom: 24px; } .mfu-faq-empty { padding: 28px 4px; color: var(--tl-muted); } .mfu-faq-all { margin-top: 24px; } mark.mfu-hl { background: #FEF1EB; color: inherit; border-radius: 3px; padding: 0 2px; } @media (max-width: 960px) { .mfu-faq { grid-template-columns: 1fr; } .mfu-faq-side { position: static; } } @media (max-width: 600px) { .mfu-faq-q button { grid-template-columns: 30px minmax(0, 1fr) 28px; padding: 20px 0; } .mfu-faq-a-inner { padding-left: 42px; padding-right: 0; } } /* ========================================================== 19. AI chat assistant ========================================================== */ .mfu-chat-launcher { position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 900; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--tl-white); background: var(--tl-green); color: var(--tl-white); cursor: pointer; box-shadow: 0 12px 30px -10px rgba(17, 17, 17, .45); transition: transform .2s, background .2s; } .mfu-chat-launcher:hover { transform: scale(1.05); background: #C2522B; } .mfu-chat-teaser { position: fixed; right: 100px; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); z-index: 899; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-text); font-size: 14px; font-weight: 600; box-shadow: var(--tl-shadow-sm); cursor: pointer; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s, transform .3s; } .mfu-chat-teaser.is-visible { opacity: 1; transform: none; pointer-events: auto; } .mfu-chat { position: fixed; right: 24px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); z-index: 900; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 140px)); display: flex; flex-direction: column; overflow: hidden; background: var(--tl-white); border: 1px solid var(--tl-line); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(17, 17, 17, .45); animation: mfu-chat-in .22s ease; } @keyframes mfu-chat-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .mfu-chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; border-bottom: 1px solid var(--tl-line); } .mfu-chat-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tl-green); color: var(--tl-white); flex-shrink: 0; } .mfu-chat-id { display: grid; line-height: 1.3; flex: 1; min-width: 0; } .mfu-chat-id strong { color: var(--tl-text); font-size: 15.5px; } .mfu-chat-id span { display: inline-flex; align-items: center; gap: 6px; color: var(--tl-muted); font-size: 12.5px; } .mfu-chat-id i { width: 7px; height: 7px; border-radius: 50%; background: var(--tl-green); } .mfu-chat-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--tl-muted); cursor: pointer; } .mfu-chat-close:hover { background: var(--tl-cream); color: var(--tl-text); } .mfu-chat-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; background: var(--tl-cream); } .mfu-msg { display: flex; } .mfu-msg-user { justify-content: flex-end; } .mfu-msg-bubble { max-width: 85%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; } .mfu-msg-bot .mfu-msg-bubble { background: var(--tl-white); border: 1px solid var(--tl-line); color: var(--tl-body); border-bottom-left-radius: 4px; } .mfu-msg-user .mfu-msg-bubble { background: var(--tl-primary); color: var(--tl-white); border-bottom-right-radius: 4px; } .mfu-msg-bubble p { margin: 0 0 6px; } .mfu-msg-bubble p:last-child { margin-bottom: 0; } .mfu-msg-bubble ul { margin: 4px 0; padding-left: 18px; } .mfu-msg-bubble a { color: var(--tl-primary); text-decoration: underline; text-underline-offset: 2px; } .mfu-chat-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; background: var(--tl-primary); color: var(--tl-white) !important; font-weight: 700; font-size: 14px; } .mfu-typing .mfu-msg-bubble { display: inline-flex; gap: 4px; padding: 14px; } .mfu-typing span { width: 7px; height: 7px; border-radius: 50%; background: #A6A6A6; animation: mfu-dot 1.2s infinite ease-in-out; } .mfu-typing span:nth-child(2) { animation-delay: .15s; } .mfu-typing span:nth-child(3) { animation-delay: .3s; } @keyframes mfu-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .mfu-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 12px; background: var(--tl-cream); } .mfu-chat-chips[hidden] { display: none; } .mfu-chat-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--tl-line); background: var(--tl-white); color: var(--tl-text); font-size: 13px; font-weight: 600; cursor: pointer; } .mfu-chat-chips button:hover { border-color: var(--tl-primary); color: var(--tl-primary); } .mfu-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--tl-line); } .mfu-chat-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; } .mfu-chat-form button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--tl-primary); color: var(--tl-white); cursor: pointer; flex-shrink: 0; } .mfu-chat-form button:hover { background: var(--tl-dark); } .mfu-chat-note { margin: 0; padding: 0 14px 12px; color: #9A9A9A; font-size: 11.5px; text-align: center; } .mfu-chat-note a { color: inherit; text-decoration: underline; } @media (max-width: 520px) { .mfu-chat { right: 8px; left: 8px; width: auto; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); height: calc(100vh - 110px); } .mfu-chat-launcher { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 58px; height: 58px; } .mfu-chat-teaser { right: 84px; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); } } /* ========================================================== 20. Mobile header (location · phone · hiring, logo + pill button + Menu) ========================================================== */ .topbar-links a span { text-decoration: none; } .tb-hiring .tl-icon, .tb-location .tl-icon, .tb-phone .tl-icon { color: var(--tl-green); } .nav-toggle-label { display: none; } @media (max-width: 1080px) { .nav-toggle { width: auto; height: auto; padding: 2px 4px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 1px; } .nav-toggle-label { display: block; font-size: 13px; font-weight: 600; line-height: 1; color: var(--tl-text); } .header-cta { display: inline-flex; border-radius: 999px; padding: 13px 24px; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; font-weight: 800; } .header-cta .tl-icon { display: none; } .header-actions { gap: 16px; } } @media (max-width: 760px) { .topbar-text, .tb-email { display: none !important; } .topbar-inner { justify-content: center; min-height: 44px; } .topbar-links { width: 100%; justify-content: space-between; gap: 10px; } .topbar-links a { display: inline-flex !important; color: var(--tl-text); font-size: 14px; } .topbar-links a span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #BDBDBD; } } @media (max-width: 600px) { .header-cta { display: inline-flex !important; padding: 11px 18px; font-size: 13.5px; } .topbar { display: block; } .header-inner { gap: 12px; } .header-actions { gap: 12px; } } @media (max-width: 380px) { .topbar-links a { font-size: 12.5px; gap: 4px; } .header-cta { padding: 10px 14px; font-size: 12.5px; } .header-brand .site-brand-img img { max-height: 34px; } } [hidden] { display: none !important; } @media (max-width: 760px) { .topbar-links a { white-space: nowrap; min-width: 0; flex-shrink: 1; gap: 5px; } .topbar-links a span { overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 420px) { .topbar-inner { padding: 0 12px; } .topbar-links a { font-size: 13px; } } @media (max-width: 760px) { .topbar-links a.tb-email { display: none !important; } } @media (max-width: 760px) { .topbar-links a.tb-phone, .topbar-links a.tb-hiring { flex-shrink: 0; } } @media (max-width: 420px) { .topbar-links { gap: 8px; } .topbar-links a { font-size: 12.5px; gap: 4px; } .topbar-links .tl-icon { width: 14px; height: 14px; } } /* ========================================================== 21. Footer (soft green, brand watermark) ========================================================== */ :root { --tl-f-bg: #FAF5F3; --tl-f-line: #EBDDD7; --tl-f-title: #0B213D; --tl-f-text: #6B6B6B; --tl-f-soft: #786C67; --tl-f-mark: #EAD4CB; } .site-footer { position: relative; overflow: hidden; background: var(--tl-f-bg); border-top: 1px solid var(--tl-f-line); color: var(--tl-f-soft); font-size: 15.5px; padding-bottom: 0; } .site-footer .footer-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding-top: clamp(56px, 7vw, 96px); padding-bottom: 56px; } .site-footer .site-brand-img img { max-height: 50px; } .footer-about p { margin: 22px 0 18px; max-width: 360px; line-height: 1.75; color: var(--tl-f-soft); } .footer-contact-lines { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; } .footer-contact-lines li { display: flex; align-items: center; gap: 8px; } .footer-contact-lines .tl-icon { color: var(--tl-green); } .site-footer a { color: var(--tl-f-text); } .site-footer a:hover { color: var(--tl-f-title); } .footer-title { margin: 6px 0 22px; color: var(--tl-f-title); font-family: var(--tl-font); font-size: 15.5px; font-weight: 700; letter-spacing: 0; } .footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .footer-menu a { line-height: 1.4; } .footer-social { display: flex; gap: 12px; margin-top: 4px; } .footer-social a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--tl-white); border: 1px solid var(--tl-f-line); color: var(--tl-f-title); transition: border-color .2s, transform .2s; } .footer-social a:hover { background: var(--tl-white); border-color: var(--tl-green); color: var(--tl-f-title); transform: translateY(-2px); } .site-footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 0; border-top: 1px solid var(--tl-f-line); font-size: 14.5px; } .footer-bottom p { margin: 0; color: var(--tl-f-soft); } .footer-bottom-links { display: flex; gap: 32px; } .footer-watermark { margin: 4px auto -0.2em; padding: 0 16px; text-align: center; white-space: nowrap; user-select: none; pointer-events: none; font-family: var(--tl-font); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-size: clamp(56px, 15vw, 230px); background: linear-gradient(180deg, var(--tl-f-mark) 0%, rgba(220, 234, 203, .55) 45%, rgba(247, 250, 243, 0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 1100px) { .site-footer .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } } @media (max-width: 700px) { .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } .site-footer .footer-bottom { flex-direction: column; text-align: center; } .footer-bottom-links { gap: 22px; } .footer-social a { width: 46px; height: 46px; } } /* ========================================================== 22. Green type ========================================================== */ h1 em, h2 em, h3 em { color: var(--tl-green); } .mfu-faq-qtext, .mega-title, .post-card-title a, .post-featured-body h2 a, .sidebar-recent a, .author-box h3, .mega-promo-title, .mfu-faq-help .mfu-faq-help-title { color: var(--tl-heading); } .main-nav .menu > li > a, .mega-card, .main-nav .sub-menu a, .header-phone { color: #0B213D; } .tl-eyebrow, .hp-eyebrow { color: var(--tl-green); } label { color: #0B213D; } /* ========================================================== 23. Black & green ========================================================== */ .tl-btn-primary, .mega-promo .tl-btn-primary, .sidebar-book .tl-btn-primary, .tl-cta .tl-btn-light, .mfu-chat-cta { background: var(--tl-green); color: #FFFFFF !important; font-weight: 800; } .tl-btn-primary:hover, .mega-promo .tl-btn-primary:hover, .sidebar-book .tl-btn-primary:hover, .tl-cta .tl-btn-light:hover, .mfu-chat-cta:hover { background: #C2522B; color: #FFFFFF !important; } .main-nav .menu > li > a, .mega-card, .main-nav .sub-menu a, .header-phone, label { color: var(--tl-text); } .main-nav .menu > li > a:hover, .main-nav .menu > li.is-open > a, .main-nav .menu > li.current-menu-item > a, .main-nav .menu > li.current-menu-ancestor > a { color: var(--tl-primary); } .mfu-faq-item.is-open .mfu-faq-icon { background: var(--tl-green); border-color: var(--tl-green); } .mfu-faq-item.is-open .mfu-faq-icon::before, .mfu-faq-item.is-open .mfu-faq-icon::after { background: #FFFFFF; } .mfu-msg-user .mfu-msg-bubble { background: #111111; } .mfu-chat-form button { background: var(--tl-green); color: #FFFFFF; } .mfu-chat-form button:hover { background: #C2522B; } .nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: #111111; border-color: #111111; } input:focus, select:focus, textarea:focus { border-color: var(--tl-green); box-shadow: 0 0 0 4px rgba(226, 104, 62, .18); } /* ========================================================== 24. Partner logos ========================================================== */ .mfu-partners { text-align: center; } .mfu-partners-title { margin: 0 0 6px; color: var(--tl-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .mfu-partners-intro { margin: 0 auto 8px; max-width: 560px; color: var(--tl-muted); } .mfu-partners-track-wrap { margin-top: 26px; } .mfu-partners-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 56px; } .mfu-partner { display: inline-flex; align-items: center; justify-content: center; height: 64px; min-width: 120px; } .mfu-partner-logo, .mfu-partner img { max-height: 46px; max-width: 160px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; } .mfu-partner:hover img { filter: none; opacity: 1; } .mfu-brand { font-family: var(--tl-font); font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #AAA4A2; transition: color .3s; } .mfu-brand:hover { color: var(--tl-heading); } .mfu-partner-empty { height: 64px; min-width: 150px; padding: 0 18px; border: 1px dashed #C9CFC2; border-radius: 12px; color: var(--tl-muted); font-size: 14px; font-weight: 600; } .mfu-partner-empty:hover { border-color: var(--tl-green); color: var(--tl-primary); } /* Marquee */ .mfu-partners.is-marquee .mfu-partners-track-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .mfu-partners.is-marquee .mfu-partners-track { display: flex; width: max-content; animation: mfu-marquee 38s linear infinite; } .mfu-partners.is-marquee .mfu-partners-group { flex-wrap: nowrap; padding-right: 56px; } .mfu-partners.is-marquee:hover .mfu-partners-track { animation-play-state: paused; } @keyframes mfu-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .mfu-partners.is-marquee .mfu-partners-track { animation: none; width: auto; } .mfu-partners.is-marquee .mfu-partners-group { flex-wrap: wrap; padding-right: 0; } .mfu-partners.is-marquee .mfu-partners-group[aria-hidden] { display: none; } } .mfu-partners-band { padding-block: clamp(44px, 6vw, 72px); border-top: 1px solid var(--tl-line); background: var(--tl-white); } @media (max-width: 600px) { .mfu-partners-group { gap: 16px 32px; } .mfu-partner img { max-height: 36px; max-width: 120px; } } /* ========================================================== 25. Footer: neutral (DailyTools-style) ========================================================== */ :root { --tl-f-bg: #FAFAFA; --tl-f-line: #E5E5E7; --tl-f-title: #111111; --tl-f-text: #5E5E5E; --tl-f-soft: #6B6B6B; --tl-f-mark: #E8E8EB; } .site-footer a:hover { color: #111111; } .footer-contact-lines .tl-icon { color: var(--tl-green); } .footer-social { flex-wrap: wrap; gap: 12px; max-width: 420px; } .footer-social a { color: #111111; } .footer-social a:hover { border-color: #111111; color: #111111; } .footer-watermark { background: linear-gradient(180deg, #E6E6E3 0%, rgba(230, 230, 227, .6) 45%, rgba(250, 250, 250, 0) 92%); -webkit-background-clip: text; background-clip: text; } .footer-social { gap: 10px; } .footer-social a { width: 44px; height: 44px; border-radius: 10px; } .footer-social .tl-icon { width: 18px; height: 18px; } /* ========================================================== 26. Services comparison table ========================================================== */ .mfu-compare-wrap { overflow-x: auto; border: 1px solid var(--tl-line); border-radius: 14px; background: var(--tl-white); } .mfu-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15.5px; } .mfu-compare th, .mfu-compare td { padding: 16px 20px; text-align: center; border-bottom: 1px solid var(--tl-line); } .mfu-compare th:first-child, .mfu-compare td:first-child { text-align: left; color: var(--tl-text); font-weight: 600; } .mfu-compare thead th { background: var(--tl-cream); color: var(--tl-text); font-family: var(--tl-display); font-size: 20px; font-weight: 600; } .mfu-compare td { color: var(--tl-muted); } .mfu-compare tbody td:not(:first-child) { font-weight: 700; } .mfu-compare tbody tr:hover td { background: #FCFCFC; } .mfu-compare td:not(:first-child):is(:not(:empty)) { color: #E2683E; } .mfu-compare-best td { border-bottom: 0; color: var(--tl-text) !important; font-weight: 600 !important; background: var(--tl-green-soft); } .mfu-compare td.no { color: #B5B9B0 !important; font-weight: 400 !important; } .mfu-compare td.add { color: var(--tl-muted) !important; font-weight: 600 !important; font-size: 14px; } /* ========================================================== 27. Rounded (pill) buttons ========================================================== */ .tl-btn, .mfu-chat-cta, .search-form .tl-btn { border-radius: 999px; } .tl-zip-form { border-radius: 999px; } .mfu-chat-form button { border-radius: 50%; } .mfu-faq-help .tl-btn, .tl-cta .tl-btn { border-radius: 999px; } /* ========================================================== 28. Compact header on scroll ========================================================== */ .header-inner { transition: min-height .3s ease; } .site-brand-img img, .custom-logo-link img { transition: max-height .3s ease; } .header-cta, .header-phone-icon { transition: padding .3s ease, width .3s ease, height .3s ease, background .2s, color .2s; } .site-header.is-compact { box-shadow: 0 8px 24px -16px rgba(17, 17, 17, .35); background: rgba(255, 255, 255, .97); } .site-header.is-compact .header-inner { min-height: 62px; } .site-header.is-compact .header-brand .site-brand-img img, .site-header.is-compact .header-brand .custom-logo-link img { max-height: 38px; } .site-header.is-compact .header-cta { padding-top: 10px; padding-bottom: 10px; } .site-header.is-compact .header-phone-icon { width: 34px; height: 34px; } .site-header.is-compact .main-nav .menu > li > a { padding-top: 8px; padding-bottom: 8px; } @media (max-width: 600px) { .site-header.is-compact .header-inner { min-height: 56px; } .site-header.is-compact .header-brand .site-brand-img img { max-height: 32px; } .site-header.is-compact .header-cta { padding: 8px 14px; } .site-header.is-compact .nav-toggle-label { display: none; } } @media (prefers-reduced-motion: reduce) { .header-inner, .site-brand-img img, .header-cta { transition: none; } } /* ========================================================== 29. Footer polish: type scale & color ========================================================== */ :root { --tl-f-bg: #FCFAF9; --tl-f-line: #EEE8E5; --tl-f-title: #111111; --tl-f-text: #4F4F4F; --tl-f-soft: #6A6A6A; } .site-footer { font-size: 15.5px; } .site-footer .footer-grid { gap: 48px; padding-top: clamp(64px, 8vw, 104px); padding-bottom: 64px; } .footer-about p { margin: 24px 0 22px; font-size: 16px; line-height: 1.75; color: var(--tl-f-soft); max-width: 340px; } .footer-title { display: flex; align-items: center; gap: 8px; margin: 4px 0 24px; color: var(--tl-f-title); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .footer-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tl-green); } .footer-menu { gap: 14px; } .footer-menu a { color: var(--tl-f-text); font-size: 15.5px; font-weight: 500; background: linear-gradient(var(--tl-green), var(--tl-green)) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: color .2s, background-size .25s; } .footer-menu a:hover { color: #111111; background-size: 100% 1.5px; } .footer-contact-lines { gap: 12px; margin-bottom: 26px; } .footer-contact-lines li { gap: 12px; color: var(--tl-f-soft); font-size: 15px; } .footer-contact-lines .tl-icon { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #F5EAE5; color: #E2683E; flex-shrink: 0; } .footer-contact-lines a { color: var(--tl-f-text); font-weight: 500; } .footer-contact-lines .is-phone a { color: #111111; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .footer-contact-lines a:hover { color: #E2683E; } .footer-social a { background: #FFFFFF; border-color: var(--tl-f-line); color: #111111; } .footer-social a:hover { background: #111111; border-color: #111111; color: #FFFFFF; transform: translateY(-2px); } .site-footer .footer-bottom { padding: 28px 0; font-size: 14px; border-top-color: var(--tl-f-line); } .footer-bottom p { color: #8A8A8A; } .footer-bottom-links a { color: #6A6A6A; font-weight: 500; } .footer-bottom-links a:hover { color: #111111; } .footer-watermark { background: linear-gradient(180deg, #EBE1DD 0%, rgba(229, 235, 221, .55) 45%, rgba(250, 250, 249, 0) 92%); -webkit-background-clip: text; background-clip: text; } @media (max-width: 700px) { .footer-title { margin-bottom: 18px; } .footer-menu a { font-size: 15px; } } .footer-social { gap: 8px; flex-wrap: nowrap; } .footer-social a { width: 40px; height: 40px; flex-shrink: 0; } @media (max-width: 400px) { .footer-social { flex-wrap: wrap; } } /* ========================================================== 30. Premium mega-menu icons ========================================================== */ .mega-card { position: relative; align-items: center; padding: 14px 40px 14px 14px; border-radius: 14px; transition: background .25s; } .mega-card:hover { background: #F9F6F4; } .mega-icon { width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(180deg, #FFFFFF 0%, #F7EFEC 100%); border: 1px solid #EBDED8; color: #E2683E; box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(17, 17, 17, .05), 0 6px 14px -10px rgba(62, 122, 23, .35); transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s; } .mega-icon .tl-icon { width: 22px; height: 22px; stroke-width: 1.6; } .mega-card:hover .mega-icon { background: linear-gradient(180deg, #E5744E 0%, #DE5425 100%); border-color: transparent; color: #111111; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -10px rgba(116, 173, 51, .8); } .mega-title { color: #111111; transition: color .2s; } .mega-card:hover .mega-title { color: #111111; } .mega-desc { color: #6A6A6A; } .mega-card::after { content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: #E2683E; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .mega-card:hover::after, .mega-card:focus-visible::after { opacity: 1; transform: none; } .mega-grid { gap: 4px 8px; } .main-nav .menu > li > a .menu-icon .tl-icon { stroke-width: 1.6; } @media (max-width: 1080px) { .mega-icon { width: 42px; height: 42px; border-radius: 12px; } .mega-card { padding: 10px 36px 10px 8px; } .mega-card::after { opacity: .5; transform: none; } } /* ========================================================== 31. Shield theme buttons from page-builder global button styles (Elementor's kit styles every