/* Theme Name: Cabling In Tyler Theme URI: https://cablingintyler.com Author: ETV Software Author URI: https://www.etvsoftware.com Description: Block theme (Full Site Editing) for Cabling In Tyler. Rebuilds the original Uncode/WPBakery design on native WordPress block templates with no page-builder or theme licence required. Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 7.4 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: cabling-in-tyler Tags: full-site-editing, block-templates, one-page, business, dark */ /* ========================================================================= 1. Base ========================================================================= */ :root { --cit-red: #dd0000; --cit-red-bright: #ff3d3d; --cit-dark: #303133; --cit-dark-2: #1b1d1f; --cit-dark-3: #141618; --cit-light: #eaeaea; --cit-muted: #9a9a9a; --cit-header-h: 105px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* The original site carried one fixed photographic backdrop behind every section, with each section laid over it as a translucent colour wash. */ .wp-site-blocks { position: relative; background-color: var(--cit-dark); background-image: url(assets/images/page-background.jpg); background-size: cover; background-position: center center; background-attachment: fixed; } :root :where(.is-layout-flow) > *, :where(.wp-site-blocks) > * { margin-block-start: 0px !important; } /*@media (max-width: 781px) {*/ /* !* iOS/Android never handled fixed attachment well; scroll is the safe path. *!*/ /* .wp-site-blocks {*/ /* background-attachment: scroll;*/ /* }*/ /*}*/ /* ========================================================================= 2. Header ========================================================================= */ .cit-header { position: sticky; top: 0; z-index: 500; background-color: var(--cit-dark-2); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* WordPress' own admin bar pushes down; keep the sticky header flush beneath it rather than letting a gap open above the menu. */ .admin-bar .cit-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .cit-header { top: 46px; } } @media screen and (max-width: 600px) { /* Below 600px WP un-fixes the admin bar entirely, so no offset applies. */ .admin-bar .cit-header { top: 0; } } .cit-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1200px; margin: 0 auto; padding: 20px 24px; min-height: var(--cit-header-h); box-sizing: border-box; } .cit-logo { display: block; line-height: 0; flex: 0 0 auto; } .cit-logo img { display: block; width: 240px; max-width: 60vw; height: auto; } /* --- Navigation --- */ .cit-nav { display: flex; align-items: center; gap: 36px; margin: 0; padding: 0; list-style: none; } .cit-nav a { color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: 0.2px; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; } .cit-nav a:hover, .cit-nav a:focus-visible { color: var(--cit-red-bright); /*border-bottom-color: var(--cit-red-bright);*/ } .cit-nav .cit-nav__current a { color: var(--cit-muted); font-weight: 400; } /* --- Mobile menu --- */ .cit-nav-toggle { display: none; appearance: none; background: none; border: 0; color: #fff; padding: 10px; margin: -10px; cursor: pointer; line-height: 0; } .cit-nav-toggle svg { width: 26px; height: 26px; fill: currentColor; } @media (max-width: 900px) { .cit-nav-toggle { display: block; } .cit-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background-color: var(--cit-dark-2); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 24px 20px; display: none; } .cit-header[data-nav-open="true"] .cit-nav { display: flex; } .cit-nav a { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } } /* ========================================================================= 3. Section washes ========================================================================= */ .cit-section { position: relative; } .cit-wash { background-color: rgba(48, 49, 51, 0.88); } .cit-wash--deep { background-color: rgba(27, 29, 31, 0.94); } .cit-wash--deeper{ background-color: rgba(20, 22, 24, 0.96); } .cit-wash--black { background-color: #000; } /* ========================================================================= 4. Hero ========================================================================= */ .cit-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; min-height: clamp(420px, 56vh, 620px); padding: 72px 24px; overflow: hidden; text-align: center; } .cit-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .cit-hero > *:not(.cit-hero__canvas) { position: relative; z-index: 2; } .cit-hero__headline { display: block; width: 100%; /* Source artwork is 1001px wide — never scale it past native size, which is what made it look soft on the old site. */ max-width: 1001px; height: auto; margin: 0 auto; } /* ========================================================================= 5. Buttons ========================================================================= */ .wp-block-button.cit-btn .wp-block-button__link, .cit-btn-link { display: inline-block; background-color: var(--cit-red); color: #fff; font-size: 18px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; padding: 16px 47px; border: 1px solid var(--cit-red); border-radius: 0; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .wp-block-button.cit-btn .wp-block-button__link:hover, .wp-block-button.cit-btn .wp-block-button__link:focus-visible, .cit-btn-link:hover, .cit-btn-link:focus-visible { background-color: #b70000; border-color: #b70000; color: #fff; transform: translateY(-1px); } @media (max-width: 600px) { .wp-block-button.cit-btn .wp-block-button__link, .cit-btn-link { font-size: 15px; padding: 14px 28px; letter-spacing: 1.2px; } } /* ========================================================================= 6. Intro + services ========================================================================= */ .cit-intro p { color: var(--cit-light); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.42; margin: 0 auto; max-width: 780px; } .cit-heading { color: #fff; font-size: clamp(27px, 3vw, 35px); font-weight: 600; line-height: 1.2; margin: 0; text-align: center; } .cit-heading em, .cit-accent { color: var(--cit-red-bright); font-style: normal; } /* Red circular arrow divider with rules either side. */ .cit-divider { display: flex; align-items: center; gap: 28px; max-width: 1200px; margin: 0 auto; } .cit-divider::before, .cit-divider::after { content: ""; flex: 1 1 auto; height: 2px; background-color: rgba(255, 255, 255, 0.55); } .cit-divider__badge { flex: 0 0 auto; width: 90px; height: 90px; border-radius: 50%; background-color: var(--cit-red-bright); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: background-color 0.18s ease, transform 0.18s ease; } .cit-divider__badge:hover, .cit-divider__badge:focus-visible { background-color: var(--cit-red); transform: translateY(2px); } .cit-divider__badge img { width:35%; } .cit-divider__badge svg { width: 30px; height: 30px; fill: currentColor; } @media (max-width: 600px) { .cit-divider__badge { width: 64px; height: 64px; } .cit-divider__badge svg { width: 22px; height: 22px; } .cit-divider { gap: 16px; } } /* --- Three service columns --- */ .cit-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; text-align: center; } @media (max-width: 900px) { .cit-services { grid-template-columns: 1fr; gap: 56px; } } .cit-service__icon{ display: block; margin: 0 auto 26px; width: 90px; height: 90px; color: var(--cit-red-bright); } .cit-server__icon img { width: 90px; padding: 2rem; } .cit-service__icon svg { width: 100%; height: 100%; fill: currentColor; } .cit-service__title { color: var(--cit-light); font-size: clamp(24px, 2.2vw, 29.6px); font-weight: 600; line-height: 1.2; margin: 0 0 18px; } .cit-service__list { list-style: none; margin: 0; padding: 0; color: #fff; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; } /* ========================================================================= 7. Alternating benefit rows ========================================================================= */ .cit-benefit { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 410px; } .cit-benefit__media { background-size: cover; background-position: center center; background-repeat: no-repeat; min-height: 320px; } .cit-benefit__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 56px clamp(24px, 4vw, 64px); text-align: center; background-color: rgba(48, 49, 51, 0.9); } .cit-benefit--flip .cit-benefit__media { order: 2; } .cit-benefit--flip .cit-benefit__body { order: 1; } .cit-benefit__title { color: #fff; font-size: clamp(23px, 2.2vw, 29px); font-weight: 600; line-height: 1.25; margin: 0; } .cit-benefit__body p { color: var(--cit-light); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; margin: 0; } @media (max-width: 900px) { .cit-benefit { grid-template-columns: 1fr; min-height: 0; } .cit-benefit__media, .cit-benefit--flip .cit-benefit__media { order: 1; min-height: 350px; } .cit-benefit__body, .cit-benefit--flip .cit-benefit__body { order: 2; padding: 44px 24px; } } /* ========================================================================= 8. Contact strip ========================================================================= */ .cit-contact { text-align: center; color: #fff; } .cit-contact__label { color: #fff; font-size: clamp(24px, 2.2vw, 29px); font-weight: 600; margin: 0 0 14px; } .cit-contact p { color: var(--cit-light); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; margin: 0; } .cit-contact a { color: inherit; text-decoration: none; } .cit-contact a:hover, .cit-contact a:focus-visible { color: var(--cit-red-bright); text-decoration: underline; } /* ========================================================================= 9. Quote form ========================================================================= */ .cit-form-section { scroll-margin-top: calc(var(--cit-header-h) + 8px); } .cit-form-shell { max-width: 1128px; margin: 0 auto; } /* Styles are written against plain form elements so whichever plugin renders the form inherits the original look automatically. */ .cit-form-shell input[type="text"], .cit-form-shell input[type="email"], .cit-form-shell input[type="tel"], .cit-form-shell input[type="url"], .cit-form-shell input[type="number"], .cit-form-shell input[type="date"], .cit-form-shell select, .cit-form-shell textarea { width: 100%; box-sizing: border-box; background-color: #fff; color: #303133; border: 1px solid #eaeaea; border-radius: 2px; padding: 14px 15px; font-family: inherit; font-size: 17px; line-height: 1.4; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .cit-form-shell textarea { min-height: 240px; resize: vertical; } .cit-form-shell input::placeholder, .cit-form-shell textarea::placeholder { color: #a9a9a9; opacity: 1; } .cit-form-shell input:focus, .cit-form-shell select:focus, .cit-form-shell textarea:focus { outline: none; border-color: var(--cit-red-bright); box-shadow: 0 0 0 3px rgba(255, 61, 61, 0.25); } .cit-form-shell input[type="submit"], .cit-form-shell button[type="submit"] { width: 100%; background-color: #f7f7f7; color: #303133; border: 1px solid #eaeaea; border-radius: 2px; padding: 15px 20px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .cit-form-shell input[type="submit"]:hover, .cit-form-shell button[type="submit"]:hover, .cit-form-shell input[type="submit"]:focus-visible, .cit-form-shell button[type="submit"]:focus-visible { background-color: var(--cit-red); border-color: var(--cit-red); color: #fff; } /* Placeholder shown until the real form shortcode is wired up. */ .cit-form-placeholder { border: 1px dashed rgba(255, 255, 255, 0.35); border-radius: 2px; padding: 40px 24px; text-align: center; color: var(--cit-muted); font-size: 16px; line-height: 1.6; } .cit-form-placeholder code { color: var(--cit-red-bright); background: rgba(0, 0, 0, 0.35); padding: 2px 8px; border-radius: 2px; } /* ========================================================================= 10. Footer ========================================================================= */ .cit-footer-cols { display: grid; grid-template-columns: 1fr 1.15fr ; gap: 48px; align-items: start; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .cit-footer-cols { grid-template-columns: 1fr; gap: 40px; } } .cit-footer-heading { color: #fff; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.2; margin: 0 0 18px; } .cit-footer-cols p { color: var(--cit-muted); font-size: 15px; line-height: 1.7; margin: 0 0 14px; } .cit-footer-cols strong { color: #fff; font-weight: 700; } .cit-footer-cols a { color: var(--cit-light); text-decoration: none; } .cit-footer-cols a:hover, .cit-footer-cols a:focus-visible { color: var(--cit-red-bright); text-decoration: underline; } .cit-map { width: 100%; aspect-ratio: 3 / 2; border: 0; display: block; filter: grayscale(0.15); } .cit-footer-bar { background-color: var(--cit-dark-3); color: var(--cit-muted); font-size: 14px; line-height: 1.6; padding: 26px 24px; } .cit-footer-bar__inner { max-width: 1200px; margin: 0 auto; text-align: center; } .cit-footer-bar a { color: var(--cit-light); text-decoration: none; } .cit-footer-bar a:hover, .cit-footer-bar a:focus-visible { color: var(--cit-red-bright); text-decoration: underline; } /* ========================================================================= 11. Back-to-top ========================================================================= */ .cit-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 400; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background-color: rgba(48, 49, 51, 0.9); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease; } .cit-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .cit-to-top:hover, .cit-to-top:focus-visible { background-color: var(--cit-red); border-color: var(--cit-red); } .cit-to-top svg { width: 20px; height: 20px; fill: currentColor; } /* ========================================================================= 12. Interior pages / blog fallbacks ========================================================================= */ .cit-page-body { color: var(--cit-light); } .cit-page-body a { color: var(--cit-red-bright); } .cit-page-body h1, .cit-page-body h2, .cit-page-body h3, .cit-page-body h4, .cit-page-body h5, .cit-page-body h6 { color: #fff; } .cit-page-body .wp-block-post-title a { color: #fff; text-decoration: none; } .cit-page-body .wp-block-post-title a:hover { color: var(--cit-red-bright); } /* ========================================================================= 13. Accessibility ========================================================================= */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: #fff; color: #303133; padding: 12px 20px; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--cit-red-bright); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }