/* * iFix Cellfone — global.css * Handles: base font scaling + dark/light mode for all pages * Injected on every page via functions.php wp_enqueue_style */ /* ═══════════════════════════════════════════ ROOT TOKENS — LIGHT MODE (default) ═══════════════════════════════════════════ */ :root { /* Brand — never change */ --red: #e8192c; --red2: #ff2d42; --rlo: rgba(232,25,44,0.09); --rmid: rgba(232,25,44,0.25); --rhi: rgba(232,25,44,0.45); /* Light palette */ --ww: #fefcf8; --w1: #faf7f2; --w2: #f4efe6; --w3: #ede6d8; --w4: #d6cbba; --ink: #18120a; --mid: #6b5f52; --muted: #9c917f; --strip: #1c1612; /* ── FONT SIZE SCALE ── */ /* Increase base from 16px → 18px. All rem units scale with this. */ font-size: 18px; } /* ═══════════════════════════════════════════ DARK MODE TOKENS Applied when has class="ifix-dark" ═══════════════════════════════════════════ */ html.ifix-dark { --ww: #16120d; --w1: #1c1812; --w2: #241e16; --w3: #2e271c; --w4: #3d3428; --ink: #f0ebe3; --mid: #b8a99a; --muted: #8a7a6c; --strip: #0e0b07; } /* ═══════════════════════════════════════════ GLOBAL BODY / BASE — applies both modes ═══════════════════════════════════════════ */ html { transition: background-color .35s ease, color .35s ease; } body { background: var(--ww); color: var(--ink); font-size: 1rem; /* = 18px via root */ line-height: 1.7; transition: background-color .35s ease, color .35s ease; } /* Bump up base text sizes globally */ p, li, td, th, label, input, select, textarea, button { font-size: 1rem; /* 18px */ } /* Section subtext */ .s-sub, .subtext, .hero-sub, .pg-sub, .eb-sub { font-size: 1.05rem !important; /* 19px */ } /* Card / small text */ .hiw-card p, .svc p, .why-card p, .rv blockquote, .sl-card p, .faq-ai, .reach-item p, .sh-item p, .install-card p, .faq-ai, .dd-t2, .dr-svc, .ifix-bar-l, .ifix-bar-r { font-size: 0.9rem !important; /* 16px */ } /* Nav links */ .ifix-nav > li > a, .ifix-nav > li > button, .nav-ph, .nav-book, .dr-link, .dr-svc { font-size: 0.88rem !important; } /* Tags / badges */ .stag, .tag, .s-lbl, .ifix-lbl, .lbl, .so-badge, .sp-tag, .pg-badge, .eb-badge, .hst-l, .sc-t2, .rv-type, .rv-name, .ftr-col a, .ftr-contacts a { font-size: 0.78rem !important; } /* Headings — use clamp for fluid sizing */ h1, h1.hero-h1 { font-size: clamp(3rem, 7vw, 6rem) !important; } h2, .s-h2, .ifix-h2 { font-size: clamp(2.2rem, 4vw, 3.4rem) !important; } h3 { font-size: 1.25rem !important; } /* ═══════════════════════════════════════════ DARK MODE — COMPONENT OVERRIDES These override inline colors baked into each template ═══════════════════════════════════════════ */ /* --- General backgrounds --- */ html.ifix-dark body, html.ifix-dark .hiw-card, html.ifix-dark .rv, html.ifix-dark .svc, html.ifix-dark .why-card, html.ifix-dark .install-card, html.ifix-dark .faq-list, html.ifix-dark .faq-item, html.ifix-dark .eb-card, html.ifix-dark .eb-panel, html.ifix-dark .svc-opt, html.ifix-dark .c-alt, html.ifix-dark .sc-block, html.ifix-dark .sl-card, html.ifix-dark .ifix-ftr .ftr-bg, html.ifix-dark .eb-strip, html.ifix-dark .eb-strip-cell { background: var(--w1) !important; border-color: var(--w3) !important; } html.ifix-dark .svc-grid, html.ifix-dark .svc-list-grid, html.ifix-dark .hiw-grid .hiw-card, html.ifix-dark .why-grid .why-card, html.ifix-dark .rv-grid .rv { background: var(--w1) !important; } /* Hero & section backgrounds */ html.ifix-dark .hero, html.ifix-dark .pg-hero, html.ifix-dark .eb-hero { background: linear-gradient(150deg, var(--w1) 0%, var(--ww) 55%, var(--w2) 100%) !important; } html.ifix-dark .hiw, html.ifix-dark .hiw-section, html.ifix-dark .faqs, html.ifix-dark .faq-section, html.ifix-dark .eb-flow, html.ifix-dark .why-section, html.ifix-dark .install-section, html.ifix-dark .smarthome-section, html.ifix-dark .pg-hero, html.ifix-dark .eb-hero, html.ifix-dark section[style*="background:#faf7f2"], html.ifix-dark section[style*="background:var(--w1)"] { background: var(--w1) !important; } html.ifix-dark .svcs, html.ifix-dark .svc-section, html.ifix-dark .why, html.ifix-dark .why-section, html.ifix-dark section[style*="background:#fefcf8"], html.ifix-dark .svc-list-section { background: var(--ww) !important; } html.ifix-dark .reviews, html.ifix-dark .reviews-section { background: var(--w2) !important; } /* Borders */ html.ifix-dark .svc-grid, html.ifix-dark .svc-list-grid, html.ifix-dark .hiw-grid, html.ifix-dark .why-grid { background: var(--w3) !important; } html.ifix-dark .hero-grid { opacity: 0.4; } /* Text colors */ html.ifix-dark h1, html.ifix-dark h1.hero-h1, html.ifix-dark h2, html.ifix-dark .s-h2, html.ifix-dark .ifix-h2, html.ifix-dark h3, html.ifix-dark h4, html.ifix-dark .hiw-card h3, html.ifix-dark .svc h3, html.ifix-dark .why-card h3, html.ifix-dark .rv-name, html.ifix-dark .sl-card h3, html.ifix-dark .logo-name, html.ifix-dark .hst-n, html.ifix-dark .hf-t1, html.ifix-dark .faq-btn, html.ifix-dark .so-name, html.ifix-dark .ca-lbl, html.ifix-dark .sc-t1, html.ifix-dark .eb-hero h1, html.ifix-dark .pg-hero h1 { color: var(--ink) !important; } html.ifix-dark p, html.ifix-dark .hiw-card p, html.ifix-dark .svc p, html.ifix-dark .why-card p, html.ifix-dark .rv blockquote, html.ifix-dark .sl-card p, html.ifix-dark .faq-ai, html.ifix-dark .reach-item p, html.ifix-dark .s-sub, html.ifix-dark .subtext, html.ifix-dark .hero-sub, html.ifix-dark .pg-sub, html.ifix-dark .eb-sub, html.ifix-dark .hf-t2, html.ifix-dark .so-note, html.ifix-dark .ca-note, html.ifix-dark .sc-t2 { color: var(--mid) !important; } /* Header dark mode */ html.ifix-dark .ifix-hdr { background: rgba(22,18,13,0.97) !important; border-bottom-color: var(--w3) !important; } html.ifix-dark .ifix-hdr.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.35) !important; } html.ifix-dark .ifix-nav > li > a, html.ifix-dark .ifix-nav > li > button { color: var(--mid) !important; } html.ifix-dark .ifix-nav > li > a:hover, html.ifix-dark .ifix-nav > li > button:hover { color: var(--ink) !important; background: var(--w2) !important; } html.ifix-dark .nav-ph { color: var(--ink) !important; border-color: var(--w4) !important; } html.ifix-dark .nav-ph:hover { border-color: var(--red) !important; color: var(--red) !important; } html.ifix-dark .logo-name { color: var(--ink) !important; } html.ifix-dark .logo-sub { color: var(--muted) !important; } /* Dropdown dark */ html.ifix-dark .ifix-dd { background: var(--w1) !important; border-color: var(--w3) !important; box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3) !important; } html.ifix-dark .dd-a { color: var(--mid) !important; } html.ifix-dark .dd-a:hover { background: var(--w2) !important; color: var(--ink) !important; } html.ifix-dark .dd-ico { background: var(--w2) !important; } html.ifix-dark .dd-t1 { color: var(--ink) !important; } html.ifix-dark .dd-t2 { color: var(--muted) !important; } html.ifix-dark .dd-foot { border-top-color: var(--w3) !important; } html.ifix-dark .dd-foot a { background: var(--w2) !important; color: var(--mid) !important; } html.ifix-dark .dd-foot a:hover { background: var(--rlo) !important; color: var(--red) !important; } /* Mobile drawer dark */ html.ifix-dark .ifix-drawer { background: var(--ww) !important; border-top-color: var(--w3) !important; } html.ifix-dark .dr-lbl { color: var(--muted) !important; border-bottom-color: var(--w3) !important; } html.ifix-dark .dr-svc { background: var(--w2) !important; border-color: var(--w3) !important; color: var(--mid) !important; } html.ifix-dark .dr-link { color: var(--ink) !important; border-bottom-color: var(--w3) !important; } /* Warm buttons dark */ html.ifix-dark .btn-w { background: var(--w2) !important; color: var(--ink) !important; border-color: var(--w4) !important; } html.ifix-dark .btn-w:hover { border-color: var(--red) !important; color: var(--red) !important; } /* Form inputs dark */ html.ifix-dark .form-g input, html.ifix-dark .form-g select, html.ifix-dark .form-g textarea { background: var(--w2) !important; border-color: var(--w3) !important; color: var(--ink) !important; } html.ifix-dark .form-g input:focus, html.ifix-dark .form-g select:focus, html.ifix-dark .form-g textarea:focus { border-color: var(--red) !important; background: var(--w1) !important; } html.ifix-dark .form-g label { color: var(--mid) !important; } /* FAQ dark */ html.ifix-dark .faq-btn { color: var(--ink) !important; } html.ifix-dark .faq-btn:hover { color: var(--red) !important; background: var(--rlo) !important; } html.ifix-dark .faq-arr { border-color: var(--w4) !important; color: var(--mid) !important; } html.ifix-dark .faq-item { border-bottom-color: var(--w3) !important; } /* Tags dark */ html.ifix-dark .stag { background: var(--w2) !important; color: var(--mid) !important; border-color: var(--w4) !important; } /* Floating cards in hero dark */ html.ifix-dark .hf { background: var(--w1) !important; border-color: var(--w3) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3) !important; } html.ifix-dark .hf-ico.w { background: var(--w2) !important; } /* Stat dividers */ html.ifix-dark .h-stats, html.ifix-dark .hst { border-color: var(--w3) !important; } /* Service cards star variant stays red in dark */ html.ifix-dark .svc.star { background: var(--red) !important; } html.ifix-dark .svc.star:hover { background: var(--red2) !important; } html.ifix-dark .svc.star h3 { color: #fff !important; } html.ifix-dark .svc.star p { color: rgba(255,255,255,.8) !important; } html.ifix-dark .svc.star .stag { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.25) !important; } /* CTA box stays dark in both modes — no change needed */ /* Footer stays dark in both modes — no change needed */ /* Shortcode placeholder dark */ html.ifix-dark .sc-block { background: var(--rlo) !important; border-color: var(--rmid) !important; } html.ifix-dark .sc-block h3 { color: var(--ink) !important; } html.ifix-dark .sc-block code { background: var(--w2) !important; border-color: var(--w3) !important; } /* Install card featured stays dark */ html.ifix-dark .install-card.featured { background: linear-gradient(135deg, #18120a, #2c1f14) !important; } /* Breadcrumb dark */ html.ifix-dark .breadcrumb, html.ifix-dark .breadcrumb a { color: var(--muted) !important; } /* Hero trust strip dark */ html.ifix-dark .ti { color: var(--mid) !important; } html.ifix-dark .ti-sep { background: var(--w4) !important; } /* Spec pill dark */ html.ifix-dark .spec-pill { background: var(--w2) !important; border-color: var(--w4) !important; color: var(--mid) !important; } /* Review avatar dark */ html.ifix-dark .rv-av { background: var(--rlo) !important; border-color: var(--rmid) !important; } /* Reach strip stays dark — no change */ /* Page hero border dark */ html.ifix-dark .pg-hero, html.ifix-dark .eb-hero { border-bottom-color: var(--w3) !important; } /* Warn box dark */ html.ifix-dark .warn-box { background: rgba(234,179,8,.1) !important; border-color: rgba(234,179,8,.3) !important; } /* ═══════════════════════════════════════════ DARK/LIGHT TOGGLE BUTTON Fixed bottom-left — visible on all pages ═══════════════════════════════════════════ */ #ifix-mode-toggle { position: fixed; bottom: 2rem; left: 2rem; z-index: 9000; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--w4); background: var(--w1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 20px rgba(0,0,0,.15); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease; color: var(--ink); line-height: 1; } #ifix-mode-toggle:hover { border-color: var(--red); box-shadow: 0 6px 28px rgba(232,25,44,.3); transform: scale(1.08); } #ifix-mode-toggle .moon { display: block; } #ifix-mode-toggle .sun { display: none; } html.ifix-dark #ifix-mode-toggle .moon { display: none; } html.ifix-dark #ifix-mode-toggle .sun { display: block; } html.ifix-dark #ifix-mode-toggle { background: var(--w2); border-color: var(--w4); box-shadow: 0 4px 20px rgba(0,0,0,.4); } /* ═══════════════════════════════════════════ RESPONSIVE FONT ADJUSTMENTS ═══════════════════════════════════════════ */ @media (max-width: 768px) { :root { font-size: 17px; } } @media (max-width: 480px) { :root { font-size: 16px; } }