/* ============================================================ home.css — Native Technology HOME PAGE (example-based design) Dark default + light theme via [data-theme] toggle. Loaded ONLY on front page (functions.php is_front_page). Brand: deep red #b0050b family + copper accent. ============================================================ */ /* ---------- Design tokens ---------- */ :root, html[data-theme="dark"] { --red-dark: #8B0A0A; --red-mid: #b0050b; --red-bright: #c61b15; --red-light: #e0453f; --copper: #bb7450; --charcoal: #1A1A1A; --dark: #111111; --mid-grey: #2C2C2C; --light-grey: #F4F4F4; --white: #FFFFFF; --bg: #111111; --surface: #2C2C2C; --surface2: #1A1A1A; --text: #FFFFFF; --text-dim: rgba(255, 255, 255, 0.75); --text-muted: rgba(255, 255, 255, 0.55); --text-faint: rgba(255, 255, 255, 0.45); --border: rgba(255, 255, 255, 0.08); --shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --footer-bg: #0A0A0A; --nav-bg: #1A1A1A; } html[data-theme="light"] { --bg: #FFFFFF; --surface: #F4F4F4; --surface2: #ECECEC; --text: #111111; --text-dim: rgba(17, 17, 17, 0.75); --text-muted: rgba(17, 17, 17, 0.6); --text-faint: rgba(17, 17, 17, 0.5); --border: rgba(17, 17, 17, 0.1); --shadow: 0 8px 32px rgba(0, 0, 0, 0.12); --footer-bg: #1A1A1A; --nav-bg: #FFFFFF; } /* ---------- Fonts ---------- */ :root { --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', 'Segoe UI', sans-serif; --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ---------- Reset / base (home scoped) ---------- */ .home-example, .home-example * { box-sizing: border-box; } .home-example { margin: 0; } /* body.home-example — body IS the .home-example element (class on ), so the descendant selector `.home-example body` never matched. */ body.home-example { font-family: var(--font-body); background: var(--bg) !important; /* beats Schema theme inline body{background:#eee} */ color: var(--text); overflow-x: clip !important; /* clip not hidden — hidden breaks sticky navbar */ line-height: 1.6; /* NOTE: no background/color transition — Chrome never settles var()-driven theme transitions (stuck mid-fade); instant switch instead */ } html { overflow-x: clip !important; } body { font-family: var(--font-body) !important; background: var(--bg) !important; color: var(--text); overflow-x: clip !important; } a { text-decoration: none !important; } /* WPBakery wrapper overflow neutralizer — sticky navbar works inside vc_row/vc_column/wpb_wrapper (79-2 test page) */ .vc_row, .wpb_column, .wpb_content_element, .wpb_wrapper, .vc_column-inner { overflow: visible !important; } /* v32: kill WPBakery .wpb_content_element margin-bottom 35px (white space below footer on VC pages) */ .wpb_content_element, .wpb_raw_code { margin-bottom: 0 !important; } article ul.ht-nav, article ul.ht-dropdown-menu, article ul.ht-footer-links, article ul.ht-nav li, article ul.ht-footer-links li { padding: 0 !important; margin: 0 !important; } .home-example img { display: block; max-width: 100%; } .home-example a { text-decoration: none; color: inherit; } .home-example ul { list-style: none; } .ht-nav, .ht-dropdown-menu, .ht-footer-links, .ht-footer-links li { list-style: none !important; } .home-example h1, .home-example h2, .home-example h3, .home-example p, .home-example ul, .home-example div { margin: 0; padding: 0; } /* ---------- Top bar ---------- */ .ht-topbar { background: var(--red-dark); padding: 8px 0 !important; font-size: 13px; letter-spacing: 0.03em; } .ht-topbar-inner { max-width: 1280px; margin: 0 auto !important; padding: 0 40px !important; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .ht-topbar, .ht-topbar-item { color: rgba(255, 255, 255, 0.85) !important; } .ht-topbar a { color: rgba(255, 255, 255, 0.85) !important; transition: color var(--transition); } .ht-topbar a:hover { color: var(--white); } .ht-topbar-left, .ht-topbar-right { display: flex; align-items: center; gap: 24px; } .ht-topbar-item { display: flex; align-items: center; gap: 6px; } .ht-topbar-item svg { opacity: 0.75; } /* ---------- Navbar ---------- */ .ht-navbar { background: var(--nav-bg) !important; position: sticky !important; top: 0 !important; z-index: 1000; border-bottom: 2px solid var(--red-mid); box-shadow: var(--shadow); } .ht-navbar-inner { max-width: 1280px; margin: 0 auto !important; padding: 0 40px !important; display: flex; align-items: center; justify-content: space-between; height: 72px; } .ht-logo { display: flex; align-items: center; gap: 14px; } .ht-logo img { height: 64px !important; width: auto !important; margin: 0 !important; } .ht-logo-text { font-family: var(--font-display); line-height: 1.1; } .ht-logo-text .ht-brand { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 0.05em; } .ht-logo-text .ht-tagline { font-size: 11px; font-weight: 400; color: var(--red-light); letter-spacing: 0.12em; text-transform: uppercase; } .ht-footer .ht-brand { color: rgba(255, 255, 255, 0.92) !important; } .ht-footer .ht-tagline { color: var(--red-light) !important; } .ht-nav { display: flex; align-items: center; gap: 20px; margin-left: auto !important; } .ht-nav > li { position: relative; } .ht-nav > li > a { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 26px 16px !important; white-space: nowrap; display: block; transition: color var(--transition); position: relative; } .ht-nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: var(--red-light); transform: scaleX(0); transition: transform var(--transition); } .ht-nav > li > a:hover { color: var(--text); } .ht-nav > li > a:hover::after, .ht-nav > li.ht-active > a::after { transform: scaleX(1); } .ht-nav > li.ht-active > a { color: var(--text); } /* Dropdown */ .ht-dropdown { position: relative; } .ht-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--surface); min-width: 300px; border-top: 2px solid var(--red-mid); box-shadow: var(--shadow); z-index: 999; } .ht-dropdown:hover .ht-dropdown-menu, .ht-dropdown:focus-within .ht-dropdown-menu { display: block; } .ht-dropdown-menu li a { display: block; padding: 12px 20px; font-size: 14px; color: var(--text-muted); border-bottom: 1px solid var(--border); transition: color var(--transition), padding-left var(--transition); letter-spacing: 0.02em; } .ht-dropdown-menu li a:hover { background: var(--red-dark); color: var(--white); padding-left: 28px; } .ht-dropdown-arrow { font-size: 10px; margin-left: 4px; opacity: 0.6; } /* Nav CTA + theme toggle */ .ht-nav-cta { background: var(--red-mid); color: var(--white) !important; padding: 10px 22px !important; font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-size: 14px !important; transition: background var(--transition) !important; } .ht-nav-cta:hover { background: var(--red-bright) !important; color: var(--white) !important; } .ht-nav-cta::after { display: none !important; } .ht-nav > li > a.ht-nav-cta { padding: 10px 22px !important; align-self: center !important; } .ht-theme-toggle { background: none; border: 1px solid var(--border); border-radius: 50%; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); margin-left: 18px; transition: all var(--transition); } .ht-theme-toggle:hover { border-color: var(--red-mid); color: var(--text); } .ht-theme-toggle .ht-icon-sun { display: none; } html[data-theme="light"] .ht-theme-toggle .ht-icon-sun { display: block; } html[data-theme="light"] .ht-theme-toggle .ht-icon-moon { display: none; } /* ---------- Hero ---------- */ .ht-hero { position: relative; min-height: 88vh !important; display: flex; align-items: center; overflow: hidden; background: var(--dark); } .ht-hero-bg { position: absolute; inset: 0; } .ht-hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: htHeroFade 21s infinite; } .ht-hero-slide--1 { animation-delay: 0s; } .ht-hero-slide--2 { animation-delay: 7s; } .ht-hero-slide--3 { animation-delay: 14s; } @keyframes htHeroFade { 0% { opacity: 0; transform: scale(1); } 6% { opacity: 1; } 30% { opacity: 1; transform: scale(1.06); } 38% { opacity: 0; } 100% { opacity: 0; } } .ht-hero-bg-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(139, 26, 26, 0.82) 0%, rgba(17, 17, 17, 0.92) 60%); z-index: 1; } .ht-hero-grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; } .ht-hero-accent-line { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(to bottom, var(--red-light), var(--copper)); z-index: 2; } .ht-hero-content { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto !important; padding: 80px 40px !important; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; width: 100%; } .ht-hero-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-light); margin-bottom: 20px !important; } .ht-hero-label::before { content: ''; display: block; width: 32px; height: 2px; background: var(--red-light); } .ht-hero-title { font-family: var(--font-display); font-size: clamp(44px, 5.5vw, 80px); font-weight: 900; line-height: 0.98; letter-spacing: -0.01em; text-transform: uppercase; color: var(--white); margin-bottom: 24px !important; } .ht-hero-title span { color: var(--red-light); } .ht-hero-desc { font-size: 16px; font-weight: 300; color: rgba(255, 255, 255, 0.85); max-width: 480px; line-height: 1.75; margin-bottom: 40px !important; } .ht-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .ht-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--red-mid); color: #fff !important; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 32px; transition: all var(--transition); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); } .ht-btn-primary:hover { background: var(--red-bright); transform: translateY(-2px); } .ht-btn-outline { display: inline-flex; align-items: center; gap: 10px; border: 2px solid rgba(255, 255, 255, 0.3) !important; color: #fff !important; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 32px; transition: all var(--transition); } .ht-btn-outline:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); } /* Hero stats */ .ht-hero-stats { display: flex; gap: 0; margin-top: 5px !important; padding-top: 32px !important; grid-column: 1 / -1 !important; } .ht-stat-item { flex: 1; padding-right: 24px !important; border-right: 1px solid rgba(255, 255, 255, 0.12) !important; margin-right: 24px !important; text-align: center !important; } .ht-stat-item:last-child { border-right: none; margin-right: 0; } .ht-stat-number { font-family: var(--font-display); font-size: 42px; font-weight: 900; color: var(--red-mid) !important; line-height: 1; } .ht-stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px !important; } /* Hero visual cards */ .ht-hero-visual { position: relative; display: flex; flex-direction: column; gap: 16px; } .ht-hero-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid var(--red-mid); padding: 20px 24px !important; display: flex; align-items: center; gap: 16px; transition: transform var(--transition), border-color var(--transition); animation: htSlideInRight 0.6s ease both; } .ht-hero-card:nth-child(2) { animation-delay: 0.1s; } .ht-hero-card:nth-child(3) { animation-delay: 0.2s; } .ht-hero-card:nth-child(4) { animation-delay: 0.3s; } .ht-hero-card:hover { background: rgba(139, 26, 26, 0.25); border-left-color: var(--red-light); transform: translateX(6px); } .ht-hero-card-icon { width: 44px; height: 44px; background: var(--red-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); } .ht-hero-card-icon svg { width: 22px; height: 22px; } .ht-hero-card-text { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9) !important; } .ht-hero-card-sub { font-size: 12px; color: rgba(255, 255, 255, 0.55) !important; margin-top: 2px !important; } /* ---------- Section shared ---------- */ .ht-section-inner { max-width: 1280px; margin: 0 auto !important; padding: 0 40px !important; } .ht-section-header { text-align: center; margin-bottom: 60px !important; } .ht-section-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-light); margin-bottom: 14px !important; } .ht-section-label::before, .ht-section-label::after { content: ''; display: block; width: 24px; height: 2px; background: var(--red-light); } .ht-section-title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: 0.02em; color: var(--text); } .ht-section-title span { color: var(--red-light); } .ht-section-desc { font-size: 16px; color: var(--text-muted); max-width: 580px; margin: 16px auto 0 !important; line-height: 1.7; } /* ---------- Products ---------- */ .ht-products { padding: 100px 0; background: var(--surface2) !important; } .ht-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .ht-product-card { background: var(--surface); padding: 36px 28px; position: relative; overflow: hidden; /* NO background in transition: Chrome never settles var()-driven bg transitions */ transition: transform var(--transition), box-shadow var(--transition); cursor: pointer; } .ht-product-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--red-mid); transform: scaleX(0); transition: transform var(--transition); } .ht-product-card:hover { background: var(--mid-grey); transform: translateY(-4px); z-index: 1; } .ht-product-card:hover::before { transform: scaleX(1); } .ht-product-icon { width: 56px; height: 56px; background: var(--red-dark); display: flex; align-items: center; justify-content: center; color: var(--white); margin-bottom: 20px !important; transition: transform var(--transition); } .ht-product-icon svg { width: 28px; height: 28px; } .ht-product-card:hover .ht-product-icon { background: var(--red-mid); transform: scale(1.1); } .ht-product-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; color: var(--text); margin-bottom: 10px !important; } .ht-product-desc { font-size: 13px; color: var(--text-faint); line-height: 1.6; } .ht-product-arrow { position: absolute; bottom: 20px; right: 24px; color: var(--red-mid); font-size: 20px; opacity: 0; transform: translateX(-8px); transition: all var(--transition); } .ht-product-card:hover .ht-product-arrow { opacity: 1; transform: translateX(0); } /* ---------- Services ---------- */ .ht-services { padding: 100px 0; background: var(--bg) !important; } .ht-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .ht-service-card { background: var(--surface); padding: 56px 48px !important; position: relative; overflow: hidden; } .ht-service-card:hover { background: var(--mid-grey); } .ht-service-card::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--red-light), var(--red-dark)); } .ht-service-number { font-family: var(--font-display); font-size: 80px; font-weight: 900; color: rgba(128, 128, 128, 0.18); position: absolute; top: 20px; right: 36px; line-height: 1; } .ht-service-icon { color: var(--red-light); margin-bottom: 24px !important; } .ht-service-icon svg { width: 40px; height: 40px; } .ht-service-title { font-family: var(--font-display); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-bottom: 16px !important; } .ht-service-desc { font-size: 15px; color: var(--text-muted); line-height: 1.75; max-width: 420px; } .ht-service-features { margin-top: 28px !important; display: flex; flex-direction: column; gap: 10px; } .ht-service-feature { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); } .ht-service-feature::before { content: '\25B8'; color: var(--red-light); font-size: 12px; } /* ---------- About strip ---------- */ .ht-about { padding: 100px 0; background: var(--surface2) !important; } .ht-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ht-about-text .ht-section-header { text-align: left; } .ht-about-text .ht-section-label::before { display: none; } .ht-about-body { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 20px !important; } .ht-about-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px !important; } .ht-highlight-item { background: var(--surface); padding: 20px !important; border-left: 3px solid var(--red-mid); } .ht-highlight-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); margin-bottom: 4px !important; } .ht-highlight-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; } .ht-about-cta { margin-top: 36px !important; } .ht-about-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .ht-stat-box { background: var(--mid-grey) !important; padding: 40px 30px !important; text-align: center; } .ht-stat-box:first-child { background: var(--red-dark) !important; } .ht-stat-box:hover { background: var(--red-dark); } .ht-stat-box-number { font-family: var(--font-display); font-size: 56px; font-weight: 900; color: #fff !important; line-height: 1; } .ht-stat-box-label { font-size: 12px; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px !important; line-height: 1.4; } /* ---------- Industries ---------- */ .ht-industries { padding: 80px 0; background: var(--bg) !important; border-top: 1px solid var(--border); } .ht-industries-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .ht-industry-tag { background: var(--surface); border: 1px solid var(--border); padding: 12px 24px !important; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition), border-color var(--transition); display: flex; align-items: center; gap: 8px; } .ht-industry-tag:hover { background: var(--red-dark); border-color: var(--red-mid); color: var(--white); } /* ---------- CTA ---------- */ .ht-cta { padding: 100px 0; background: linear-gradient(135deg, var(--red-dark) 0%, #5A0A0A 100%); position: relative; overflow: hidden; } .ht-cta::before { content: 'NATIVE'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.04); line-height: 1; pointer-events: none; } .ht-cta-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; position: relative; } .ht-cta-title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 900; text-transform: uppercase; line-height: 1.05; color: var(--white); margin-bottom: 12px !important; } .ht-cta-desc { font-size: 16px; color: rgba(255, 255, 255, 0.7); max-width: 540px; line-height: 1.65; } .ht-cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .ht-btn-white { display: inline-flex; align-items: center; gap: 10px; background: var(--white) !important; color: var(--red-dark) !important; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 15px 32px; transition: all var(--transition); } .ht-btn-white:hover { background: var(--light-grey); transform: translateY(-2px); } .ht-btn-ghost { display: inline-flex; align-items: center; gap: 10px; border: 2px solid rgba(255, 255, 255, 0.5) !important; color: #fff !important; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 32px; transition: all var(--transition); } .ht-btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); } /* ---------- Footer ---------- */ .ht-footer { background: var(--footer-bg) !important; padding: 80px 0 0 !important; border-top: 3px solid var(--red-dark); margin-top: 0 !important; } .ht-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 60px; padding-bottom: 60px !important; } .ht-footer-brand .ht-logo { margin-bottom: 20px !important; } .ht-footer-about { font-size: 14px; color: rgba(255, 255, 255, 0.45); line-height: 1.75; margin-bottom: 24px !important; } .ht-footer-social { display: flex; gap: 10px; } .ht-social-btn { width: 38px; height: 38px; background: var(--mid-grey) !important; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(255, 255, 255, 0.6) !important; /* footer always dark -> fixed light text */ transition: color var(--transition); } .ht-social-btn:hover { background: var(--red-dark); color: var(--white); } .ht-footer-col-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); margin-bottom: 24px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--border) !important; } .ht-footer-links { display: flex; flex-direction: column; gap: 10px; } .ht-footer-links a { font-size: 14px; color: rgba(255, 255, 255, 0.45); /* footer always dark -> fixed light text */ transition: color var(--transition), padding-left var(--transition); display: flex; align-items: center; gap: 8px; } .ht-footer-links a::before { content: '\203A'; color: var(--red-mid); } .ht-footer-links a:hover { color: var(--white); padding-left: 4px; } .ht-footer-contact { display: flex; flex-direction: column; gap: 16px; } .ht-contact-item { display: flex; gap: 12px; align-items: flex-start; } .ht-contact-item-icon { width: 32px; height: 32px; background: var(--red-dark); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 2px !important; color: var(--white); } .ht-contact-item-icon svg { width: 16px; height: 16px; } .ht-contact-item-text { font-size: 13px; color: rgba(255, 255, 255, 0.5); line-height: 1.6; } .ht-contact-item-text strong { color: rgba(255, 255, 255, 0.8); display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px !important; } .ht-footer-bottom { border-top: 1px solid var(--border); padding: 24px 0; } .ht-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255, 255, 255, 0.3); } .ht-footer-bottom a { color: var(--red-light); } /* ---------- Mobile menu ---------- */ .ht-menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; } .ht-menu-toggle span { display: block; width: 26px; height: 2px; background: var(--text); transition: all var(--transition); } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .ht-products-grid { grid-template-columns: repeat(2, 1fr); } .ht-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 900px) { .ht-hero-content { grid-template-columns: 1fr; } .ht-hero-visual { display: none; } .ht-about-grid { grid-template-columns: 1fr; } .ht-about-visual { display: none; } .ht-services-grid { grid-template-columns: 1fr; } .ht-cta-inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .ht-menu-toggle { display: flex; } .ht-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--nav-bg); flex-direction: column; padding: 20px 0; border-top: 1px solid var(--border); gap: 0; box-shadow: var(--shadow); } .ht-nav.ht-open { display: flex; } .ht-nav > li > a { padding: 14px 24px; } .ht-dropdown-menu { position: static; box-shadow: none; background: rgba(0, 0, 0, 0.2); } .ht-nav .ht-dropdown:hover .ht-dropdown-menu, .ht-nav .ht-dropdown:focus-within .ht-dropdown-menu { display: none; } .ht-nav.ht-open .ht-dropdown-menu li a { padding-left: 44px !important; } .ht-theme-toggle { margin-left: 0; } .ht-nav.ht-open .ht-theme-toggle { margin: 14px 24px 28px !important; } .ht-products-grid { grid-template-columns: 1fr; } .ht-section-inner { padding: 0 20px !important; } .ht-hero-content { padding: 60px 20px !important; } .ht-hero-stats { flex-wrap: wrap; gap: 20px; } .ht-footer-grid { grid-template-columns: 1fr; gap: 32px; } .ht-topbar-right { display: none; } .ht-navbar-inner { padding: 0 20px; } } @media (max-width: 480px) { .ht-hero-title { font-size: clamp(32px, 10vw, 44px); } .ht-hero-desc { font-size: 15px; } .ht-hero-buttons { flex-direction: column; align-items: stretch; } .ht-btn-primary, .ht-btn-outline { width: 100%; justify-content: center; } .ht-topbar-phone { display: none; } .ht-topbar-inner { gap: 4px; padding: 0 20px; } } /* ---------- Animations ---------- */ @keyframes htFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes htSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .ht-hero-label { animation: htFadeUp 0.5s ease both; } .ht-hero-title { animation: htFadeUp 0.6s ease 0.1s both; } .ht-hero-desc { animation: htFadeUp 0.6s ease 0.2s both; } .ht-hero-buttons { animation: htFadeUp 0.6s ease 0.3s both; } .ht-hero-stats { animation: htFadeUp 0.6s ease 0.4s both; } @media (prefers-reduced-motion: reduce) { .ht-hero-slide { animation: none; } .ht-hero-slide--1 { opacity: 1; } .ht-hero-card, .ht-hero-label, .ht-hero-title, .ht-hero-desc, .ht-hero-buttons, .ht-hero-stats { animation: none; } html { scroll-behavior: auto; } } /* v35: mobile dropdown submenu toggle (click) */ .ht-dropdown-open .ht-dropdown-menu { display: block !important; } /* ---------- Back to top ---------- */ #move-to-top { display: none !important; } /* hide Schema theme's broken back-to-top */ .ht-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--red-mid) !important; color: #fff !important; border: none; border-radius: 6px; cursor: pointer; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition), background var(--transition); } .ht-to-top.ht-visible { opacity: 1; visibility: visible; } .ht-to-top:hover { background: var(--red-bright) !important; transform: translateY(-2px); } /* ============================================================ CUSTOM VC PAGES — hide theme sidebar, breadcrumb, title ============================================================ */ .page-id-7 #sidebar, .page-id-72 #sidebar, .page-id-79 #sidebar { display: none !important; } .page-id-7 .breadcrumb, .page-id-7 .single-title, .page-id-72 .breadcrumb, .page-id-72 .single-title, .page-id-79 .breadcrumb, .page-id-79 .single-title { display: none !important; } .page-id-7 .article, .page-id-72 .article, .page-id-79 .article { width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } .page-id-7 .single_page, .page-id-72 .single_page, .page-id-79 .single_page { padding: 0 !important; } /* Kill any gap above topbar on custom VC pages */ body.page-id-7, body.page-id-72, body.page-id-79 { margin: 0 !important; padding: 0 !important; line-height: 0 !important; } body.page-id-7 .wpb-content-wrapper, body.page-id-72 .wpb-content-wrapper, body.page-id-79 .wpb-content-wrapper { margin: 0 !important; padding: 0 !important; } body.page-id-7 .vc_row:first-child, body.page-id-72 .vc_row:first-child, body.page-id-79 .vc_row:first-child { margin-top: 0 !important; } body.page-id-7 .vc_row:first-child .vc_column-inner, body.page-id-72 .vc_row:first-child .vc_column-inner, body.page-id-79 .vc_row:first-child .vc_column-inner { padding-top: 0 !important; } /* Nuclear: kill body background + any container spacing */ body.page-id-7 #content, body.page-id-72 #content, body.page-id-79 #content { margin: 0 !important; padding: 0 !important; } body.page-id-7 .container, body.page-id-72 .container, body.page-id-79 .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }