<!--
HILIGHT OPTICS — Elementor HTML widget
=======================================
HOW TO INSTALL
1. In Elementor, add a single "HTML" widget (NOT "Text Editor" — that one
runs content through wpautop/wp_kses and will strip the /
and break the layout).
2. Paste this entire file's contents into that HTML widget.
3. Place it on its own page/section, full-width, no container padding.
Your theme's existing header, nav, and footer will wrap around it as normal.BEFORE THIS GOES LIVE — 3 things to swap:
- PRODUCT DATA: all 13 product cards below use placeholder specs, prices
and SKU codes (product names are your real names). Replace specs/prices
with real data, or better: once your 13 SKUs exist as WooCommerce
products tagged into 4 categories (RMR / RMSc / ACRO / Picatinny),
consider replacing the static ".hlt-prod-grid" block with a live
WooCommerce shortcode so price/stock/links never go stale — e.g. a
Shortcode widget with:
(swap "rmr,rmsc,acro,picatinny" for your real category slugs). You'd
lose the custom spec-badge styling on native Woo cards unless those
specs are stored as product attributes, but you'd gain accurate live
inventory/pricing with zero maintenance.
- "NOTIFY ME" BUTTONS + the email capture form at the bottom: these are
visual only right now — the form does not send anywhere. Wire the
buttons to real product pages once published, and connect the email
form to your ESP (Klaviyo, Mailchimp, etc.) or a WP form plugin.
- LAUNCH DATE: "Fall 2026" appears once — search this file for
"Fall 2026" and update it once you have a real ship date.
-->
.hlt-optics{
--ink:#0E1113;
--ink-2:#171B1E;
--ink-3:#20262A;
--paper:#F1F1EC;
--paper-2:#E5E5DE;
--paper-3:#D8D8CF;
--text:#14100B;
--muted:#333333;
--line:rgba(14,17,19,0.14);
--on-ink:#ECEDEA;
--on-ink-muted:#9BA3A8;
--line-on-ink:rgba(236,237,234,0.14);--accent:#F2661A;
--accent-ink:#160D06;
--accent-2:#FF3B2F;--font-display:'Anton', 'Segoe UI', system-ui, sans-serif;
--font-body:'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
--font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;display:block;
background:var(--paper);
color:var(--text);
font-family:var(--font-body);
line-height:1.5;
overflow-x:hidden;
color-scheme: light;
}
@media (prefers-color-scheme: dark){
.hlt-optics:not([data-theme="light"]){
--paper:#0B0D0E; --paper-2:#141719; --paper-3:#1D2124;
--text:#EDEEEA; --muted:#9CA3A8; --line:rgba(237,238,234,0.14);
color-scheme: dark;
}
}
.hlt-optics[data-theme="dark"]{
--paper:#0B0D0E; --paper-2:#141719; --paper-3:#1D2124;
--text:#EDEEEA; --muted:#9CA3A8; --line:rgba(237,238,234,0.14);
color-scheme: dark;
}.hlt-optics, .hlt-optics *{box-sizing:border-box;}
.hlt-optics, .hlt-optics h1, .hlt-optics h2, .hlt-optics h3, .hlt-optics h4,
.hlt-optics p, .hlt-optics span, .hlt-optics div, .hlt-optics button, .hlt-optics a,
.hlt-optics small, .hlt-optics b{opacity:1 !important; animation:none !important; transform:none !important;}
.hlt-cat-card{transform:none !important;}
.hlt-cat-card:hover{transform:translateY(-4px) !important;}
.hlt-prod-media .hlt-glyph{transform:none !important;}
.hlt-prod-card:hover .hlt-prod-media .hlt-glyph{transform:scale(1.04) !important;}
.hlt-cat-card .hlt-cat-foot .hlt-arrow{transform:none !important;}
.hlt-cat-card:hover .hlt-cat-foot .hlt-arrow{transform:translateX(4px) !important;}
.hlt-optics img, .hlt-optics svg{display:block;max-width:100%;}
.hlt-optics h1,.hlt-optics h2,.hlt-optics h3,.hlt-optics h4{font-family:var(--font-display);margin:0;text-wrap:balance;color:var(--text);font-weight:400;line-height:1.1;letter-spacing:normal;text-transform:none;}
.hlt-optics p{margin:0;color:inherit;line-height:1.5;}
.hlt-optics ul,.hlt-optics ol{margin:0;padding:0;list-style:none;}
.hlt-optics button{font-family:inherit;border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal;line-height:normal;appearance:none;-webkit-appearance:none;-moz-appearance:none;}
.hlt-optics input{font-family:inherit;border-radius:0;box-shadow:none;}
.hlt-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hlt-optics :focus-visible{outline:2px solid var(--accent);outline-offset:3px;}.hlt-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,48px);color:inherit;}
.hlt-eyebrow{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.14em;
text-transform:uppercase;color:var(--accent);
}.hlt-glyph-defs{position:absolute;width:0;height:0;overflow:hidden;}
.hlt-glyph{width:100%;height:100%;}
.hlt-glyph .hlt-body-line{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
.hlt-glyph .hlt-fill-line{fill:currentColor;opacity:0.9;}
.hlt-glyph .hlt-plate{fill:none;stroke:currentColor;stroke-width:2;opacity:0.55;}
.hlt-glyph .hlt-dot{fill:var(--accent-2);}
.hlt-glyph .hlt-dot-ring{fill:none;stroke:var(--accent-2);stroke-width:1.4;opacity:0.5;}.hlt-btn, .hlt-btn *{text-decoration:none !important;}
.hlt-btn{
display:inline-flex;align-items:center;gap:8px;
font-family:var(--font-body);font-weight:600;font-size:14px;
padding:11px 20px;border:1px solid transparent;cursor:pointer;
white-space:nowrap;
}
.hlt-btn-accent{background:var(--accent);color:var(--accent-ink);}
.hlt-btn-accent:hover{background:#ff7527;}
.hlt-btn-outline-ink{border-color:var(--accent) !important;color:#000000 !important;background:transparent;transition:background .15s ease, color .15s ease;}
.hlt-btn-outline-ink:hover{background-color:var(--accent) !important;color:var(--accent-ink) !important;}
.hlt-btn-outline-on-ink{border-color:var(--line-on-ink);color:var(--on-ink);background:transparent;}
.hlt-btn-outline-on-ink:hover{border-color:var(--on-ink);}
.hlt-btn-sm{padding:9px 14px;font-size:12.5px;}/* ============ HERO ============ */
/* PLACEHOLDER background — once you have a real photo, add it as a third
layer here, e.g.:
background-image:
linear-gradient(100deg, rgba(14,17,19,.92) 0%, rgba(14,17,19,.55) 55%, rgba(14,17,19,.25) 100%),
url('https://yoursite.com/wp-content/uploads/your-photo.jpg');
background-size: cover; background-position: center; */
.hlt-hero{
position:relative;color:var(--on-ink);overflow:hidden;
background:
linear-gradient(100deg, rgba(14,17,19,.94) 0%, rgba(14,17,19,.75) 45%, rgba(14,17,19,.4) 100%),
radial-gradient(120% 140% at 15% 20%, #262c30 0%, #0E1113 62%);
}
.hlt-hero-copy{
position:relative;z-index:3;max-width:640px;
padding:110px 0;
display:flex;flex-direction:column;gap:22px;
color:inherit;
}
.hlt-hero-copy h1{font-size:clamp(38px,5.2vw,64px);font-weight:400;line-height:0.98;letter-spacing:-0.01em;color:var(--on-ink);}
.hlt-hero-copy h1 em{font-style:normal;color:var(--accent);}
.hlt-hero-sub{max-width:46ch;font-size:16.5px;color:var(--on-ink-muted);}
.hlt-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;}.hlt-crosshair-overlay{
position:absolute;inset:0;pointer-events:none;opacity:0.16;z-index:1;
background-image:
linear-gradient(var(--line-on-ink) 1px, transparent 1px),
linear-gradient(90deg, var(--line-on-ink) 1px, transparent 1px);
background-size:44px 44px;
}/* ============ SECTION HEADS ============ */
.hlt-section{padding:76px 0;}
.hlt-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;color:inherit;}
.hlt-section-head > div{color:inherit;}
.hlt-section-head h2{font-size:clamp(26px,3vw,36px);font-weight:400;letter-spacing:-0.01em;margin-top:8px;color:#000000 !important;}
.hlt-section-head p{color:var(--muted) !important;max-width:52ch;margin-top:10px;font-size:15px;}
#hlt-categories h2{color:var(--on-ink) !important;}/* ============ CATEGORY TILES ============ */
.hlt-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media (max-width:700px){.hlt-cat-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.hlt-cat-grid{grid-template-columns:1fr;}}
.hlt-cat-card, .hlt-cat-card *{text-decoration:none !important;}
.hlt-cat-card{
background:var(--ink-2);color:var(--on-ink);padding:26px 22px 22px;
display:flex;flex-direction:column;gap:16px;
border:1px solid var(--line-on-ink);transition:transform .22s ease, border-color .22s ease;
}
.hlt-cat-card:hover{
transform:translateY(-4px) !important;
background-color:var(--accent) !important;
border-color:var(--accent) !important;
}
.hlt-cat-card .hlt-cat-glyph{width:100%;height:92px;color:var(--on-ink-muted);transition:color .22s ease;}
.hlt-cat-card:hover .hlt-cat-glyph{color:var(--accent-ink) !important;}
.hlt-cat-card .hlt-cat-name{font-size:19px;font-weight:700;color:var(--on-ink);}
.hlt-cat-card:hover .hlt-cat-name{color:var(--accent-ink) !important;}
.hlt-cat-card .hlt-cat-code{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:0.1em;}
.hlt-cat-card:hover .hlt-cat-code{color:var(--accent-ink) !important;}
.hlt-cat-card .hlt-cat-desc{font-size:13.5px;color:var(--on-ink-muted);line-height:1.5;}
.hlt-cat-card:hover .hlt-cat-desc{color:var(--accent-ink) !important;}
.hlt-cat-card .hlt-cat-foot{
display:flex;justify-content:space-between;align-items:center;
font-family:var(--font-mono);font-size:11px;color:var(--on-ink-muted);
border-top:1px solid var(--line-on-ink);padding-top:14px;margin-top:auto;
}
.hlt-cat-card:hover .hlt-cat-foot{color:var(--accent-ink) !important;border-top-color:rgba(22,13,6,0.3) !important;}
.hlt-cat-card .hlt-cat-foot .hlt-arrow{color:var(--accent);transition:transform .2s;}
.hlt-cat-card:hover .hlt-cat-foot .hlt-arrow{transform:translateX(4px) !important;color:var(--accent-ink) !important;}/* ============ FILTER BAR ============ */
.hlt-filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;}
.hlt-filter-chip{
font-family:var(--font-mono);font-size:12px;letter-spacing:0.05em;
padding:9px 16px;border:1px solid var(--line);background:transparent;color:var(--muted);
cursor:pointer;transition:all .15s;
}
.hlt-filter-chip{color:#333333 !important;}
.hlt-filter-chip:hover{border-color:var(--accent);color:#000000 !important;}
.hlt-filter-chip.hlt-active{background-color:var(--ink) !important;border-color:var(--ink);color:var(--on-ink) !important;}/* ============ PRODUCT GRID ============ */
.hlt-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:1080px){.hlt-prod-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:760px){.hlt-prod-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.hlt-prod-grid{grid-template-columns:1fr;}}.hlt-prod-card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:opacity .25s ease, transform .25s ease;}
.hlt-prod-card.hlt-hidden{display:none;}
.hlt-prod-media{
position:relative;background:var(--ink);aspect-ratio:1.1/1;
display:flex;align-items:center;justify-content:center;padding:22px;
color:var(--on-ink-muted);overflow:hidden;
}
.hlt-prod-media .hlt-glyph{transition:color .25s ease, transform .4s ease;}
.hlt-prod-card:hover .hlt-prod-media .hlt-glyph{color:var(--on-ink);transform:scale(1.04);}
.hlt-prod-ribbon{
position:absolute;top:10px;left:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;
background:var(--accent);color:var(--accent-ink);padding:4px 8px;text-transform:uppercase;font-weight:600;
}
.hlt-prod-footprint{
position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
color:var(--on-ink-muted);border:1px solid var(--line-on-ink);padding:4px 7px;
}
.hlt-prod-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1;}
.hlt-prod-name{font-family:var(--font-display);font-weight:400;font-size:16.5px;color:#000000 !important;}
.hlt-prod-desc{font-size:12.5px;color:#333333 !important;line-height:1.45;}
.hlt-prod-specs{
display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--font-mono);font-size:10.5px;color:#333333 !important;
padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
}
.hlt-prod-specs span b{color:#333333 !important;font-weight:600;font-variant-numeric:tabular-nums;}
.hlt-prod-finish{display:flex;align-items:center;gap:8px;font-size:12px;color:#333333 !important;}
.hlt-swatch{width:13px;height:13px;border:1px solid var(--line);display:inline-block;}
.hlt-prod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px;}
.hlt-prod-price{font-family:var(--font-mono);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;color:#000000 !important;}
.hlt-prod-price small{display:block;font-size:9.5px;color:#333333 !important;font-weight:400;letter-spacing:0.06em;}/* ============ NOTIFY BAND ============ */
.hlt-notify{background:var(--ink);color:var(--on-ink);padding:64px 0;}
.hlt-notify .hlt-wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;color:inherit;}
.hlt-notify .hlt-wrap > div{color:inherit;}
.hlt-notify h3{font-size:clamp(22px,2.6vw,30px);font-weight:400;max-width:20ch;color:var(--on-ink);}
.hlt-notify p{color:var(--on-ink-muted);margin-top:8px;font-size:14px;max-width:42ch;}
.hlt-notify-form{display:flex;gap:0;min-width:min(420px,100%);border:1px solid var(--line-on-ink);}
.hlt-notify-form input{flex:1;background:transparent;border:none;color:var(--on-ink);font-family:var(--font-body);font-size:14px;padding:0 16px;}
.hlt-notify-form input::placeholder{color:var(--on-ink-muted);}
.hlt-notify-form input:focus{outline:none;}
.hlt-notify-form button{border:none;padding:0 20px;}
.hlt-notify-status{font-family:var(--font-mono);font-size:12px;color:var(--accent);margin-top:10px;min-height:16px;}@media (prefers-reduced-motion: reduce){
.hlt-cat-card, .hlt-prod-media .hlt-glyph{transition:none;}
}
Built to hold zero. Every time. HiLight Optics runs duty-grade internals, cut to the footprints you already trust — RMR, RMSc, ACRO, and Picatinny. Built by the same team that's been doing this since 2007.
Mounting Standards Your plate already knows what it wants. Every HiLight Optic is cut to a footprint you're already running. No adapters, no research rabbit hole, no guessing if it'll fit. Drop it on and go.
Shop the optics line Preorder now to lock in launch pricing and be first to ship.
All Products
RMR
RMSc
ACRO
Picatinny
Preorder
O2R
Full-size duty reflex sight, single reticle.
Dot 3 MOA Batt 50,000 hr Rated IP67
Preorder
O2R Plus
Full-size duty reflex sight with Shake Awake.
Dot 3 MOA Batt 50,000 hr Rated IP67
Preorder
O2R Pro
Full-size duty reflex sight, multi-reticle system.
Dot 3/32 MOA Batt 50,000 hr Rated IP67
Preorder
O2R Elite
Full-size duty reflex sight, titanium housing.
Dot 3/32 MOA Batt 65,000 hr Rated IP68
Preorder
O2S
Subcompact reflex sight for concealed carry.
Dot 6 MOA Batt 20,000 hr Rated IP67
Preorder
O2S Plus
Subcompact reflex sight with Shake Awake.
Dot 6 MOA Batt 20,000 hr Rated IP67
Preorder
O2S Pro
Subcompact reflex sight, multi-reticle system.
Dot 6/32 MOA Batt 20,000 hr Rated IP67
Preorder
O2S Elite
Subcompact reflex sight, titanium housing.
Dot 6/32 MOA Batt 30,000 hr Rated IP68
Preorder
O2A Pro
Large-format enclosed-emitter reflex sight, sealed on both sides.
Dot 3.25 MOA Batt 30,000 hr Rated IP68
Preorder
O2P
Rail-mount reflex sight with QD throw-lever.
Dot 2 MOA Batt 40,000 hr Rated IP67
Preorder
O2P+
Rail-mount reflex sight, upgraded QD lever.
Dot 2 MOA Batt 40,000 hr Rated IP67
Preorder
O2P Pro
Rail-mount reflex sight, multi-reticle system.
Dot 2/65 MOA Batt 40,000 hr Rated IP67
Preorder
O2P Elite
Rail-mount reflex sight, titanium housing.
Dot 2/65 MOA Batt 50,000 hr Rated IP68
Be first on the range with the new line. Get an email the day HiLight Optics goes live — plus a launch-week discount code.
(function(){
var root = document.currentScript.closest('.hlt-optics');
if (!root) return;// ---- Category filter ----
var chips = Array.prototype.slice.call(root.querySelectorAll('.hlt-filter-chip'));
var cards = Array.prototype.slice.call(root.querySelectorAll('.hlt-prod-card'));
chips.forEach(function(chip){
chip.addEventListener('click', function(){
chips.forEach(function(c){ c.classList.remove('hlt-active'); });
chip.classList.add('hlt-active');
var f = chip.getAttribute('data-filter');
cards.forEach(function(card){
var show = (f === 'all' || card.getAttribute('data-cat') === f);
card.classList.toggle('hlt-hidden', !show);
});
});
});// ---- Notify form (demo only, no network call) ----
var form = root.querySelector('#hltNotifyForm');
var status = root.querySelector('#hltNotifyStatus');
form.addEventListener('submit', function(e){
e.preventDefault();
var email = root.querySelector('#hltNotifyEmail').value.trim();
if (!email) return;
status.textContent = "You're on the list — we'll email " + email + " at launch.";
form.reset();
});
})();