:root { --black:#070707; --deep:#101010; --panel:#181818; --line:#383838; --white:#f5f5f2; --silver:#b8b8b8; --grey:#737373; --blue:#e10600; --blue-glow:#e1060055; }
.catalog-tools select { min-width:190px; padding:12px 34px 12px 13px; border:1px solid #5a5a5a; border-radius:0; background:#1d1d1d; color:var(--white); font:500 .74rem Manrope,sans-serif; }.catalog-tools select:focus { outline:0; border-color:var(--blue); }
.social-link { display:inline-flex; align-items:center; gap:7px; }.social-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }.social-link span { margin-left:2px; }
.nav .logo { width:220px; }
@media (max-width:700px) { .nav .logo { width:165px; } }
.instagram-link { display:inline-flex; align-items:center; gap:7px; }.instagram-link svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }.instagram-link svg .instagram-dot { fill:currentColor; stroke:none; }.instagram-link span { margin-left:2px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--white); background:var(--black); font-family:Manrope,Arial,sans-serif; } a { color:inherit; text-decoration:none; } .grain { pointer-events:none; position:fixed; inset:0; z-index:10; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.nav,footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:24px 5vw; border-bottom:1px solid var(--line); } .logo { display:block; width:168px; } .logo img { display:block; width:100%; height:auto; } nav { display:flex; gap:2.5rem; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; } nav a:hover { color:var(--blue); } .nav-cta { border:1px solid var(--blue); padding:11px 15px; color:var(--white); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } .nav-cta:hover { background:var(--blue); color:var(--black); } .nav-cta span,.contact-link span { color:var(--blue); }
.hero { position:relative; overflow:hidden; min-height:680px; padding:10vw 5vw 7vw; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; background:radial-gradient(circle at 90% 90%,#3b0707 0,transparent 30%),linear-gradient(135deg,#111 0%,#070707 64%); } .hero:before { content:""; position:absolute; width:62vw; height:1px; background:var(--blue); transform:rotate(-33deg); right:-17vw; top:23%; box-shadow:0 13px 0 #8e0500,0 -13px 0 #360000; opacity:.8; } .hero-copy,.hero-art { position:relative; z-index:1; } .eyebrow { margin:0 0 24px; color:var(--silver); font:500 .68rem/1.2 'DM Mono',monospace; letter-spacing:.1em; text-transform:uppercase; } h1,h2,h3,blockquote { margin:0; letter-spacing:-.07em; } h1 { max-width:740px; font-size:clamp(4rem,8.3vw,8.7rem); line-height:.84; font-weight:800; text-transform:uppercase; } em { color:var(--blue); font-style:normal; } .intro { max-width:460px; margin:35px 0; color:#d0d0d0; font-size:1rem; line-height:1.65; } .button { display:inline-flex; align-items:center; gap:24px; padding:16px 20px; background:var(--blue); color:var(--black); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .button:hover { background:#ff625d; } .button span { font-size:1.2rem; }
.hero-art { height:450px; overflow:hidden; border:1px solid #8e2220; background:linear-gradient(145deg,#321414,#0c0c0c); clip-path:polygon(13% 0,100% 0,100% 88%,87% 100%,0 100%,0 12%); } .hero-art:before { content:"SLE"; position:absolute; left:10%; bottom:-8%; color:transparent; font-size:15rem; font-weight:800; font-style:italic; letter-spacing:-.18em; -webkit-text-stroke:1px #8e2220; } .orb { position:absolute; border-radius:50%; } .orb-one { width:260px; height:260px; left:27%; top:12%; background:radial-gradient(circle at 35% 35%,#ff8c88,#e10600 62%,#650000); box-shadow:0 0 80px var(--blue-glow); } .orb-two { width:86px; height:86px; right:16%; bottom:20%; background:#e8e8e8; } .ring { position:absolute; border:1px solid #9a4745; border-radius:50%; } .ring-one { width:390px; height:390px; left:-55px; top:-55px; } .ring-two { width:260px; height:260px; right:-95px; bottom:-80px; } .art-label { position:absolute; z-index:1; bottom:23px; left:28px; margin:0; color:#ddd; font:500 .65rem/1.55 'DM Mono',monospace; text-transform:uppercase; }
.statement { padding:10vw 13vw; color:#111; background:#c7c7c7; } .statement .eyebrow { color:#505050; } .statement h2 em { color:#555; } .statement-detail,.haltech-detail { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-top:52px; } .statement-detail p,.haltech-detail p { max-width:390px; margin:0; line-height:1.65; font-size:.9rem; } .statement-detail a,.haltech-detail a { border-bottom:1px solid currentColor; padding-bottom:6px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; } .statement-detail span { margin-left:18px; }
.services { padding:9vw 5vw; background:#242424; } .section-top { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid #535353; color:#d0d0d0; font:500 .68rem 'DM Mono',monospace; } .section-top .eyebrow { margin:0; } article { display:grid; grid-template-columns:10% 37% 1fr 5%; align-items:center; padding:32px 0; border-bottom:1px solid #535353; transition:.25s; } article:hover { padding-left:16px; padding-right:16px; background:#333; } article span { color:#b8b8b8; font:500 .7rem 'DM Mono',monospace; } article h3 { font-size:clamp(1.8rem,3.2vw,3.3rem); text-transform:uppercase; } article p { margin:0; color:#d0d0d0; font-size:.9rem; } article i { color:var(--white); font-size:1.4rem; font-style:normal; text-align:right; }
.shop { padding:10vw 5vw; background:#101010; } .shop-heading { display:flex; justify-content:space-between; gap:48px; align-items:end; margin-bottom:54px; } .shop-heading .eyebrow { color:#9dbfe1; } .shop-heading > p { max-width:315px; margin:0; color:#a8a8a8; font-size:.86rem; line-height:1.65; } .product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .product { display:block; padding:0; overflow:hidden; border:1px solid #3b3b3b; background:#202020; } .product:hover { padding:0; background:#2b2b2b; } .product img { display:block; width:100%; height:230px; object-fit:contain; background:#e5e5e5; transition:transform .35s ease; } .product:hover img { transform:scale(1.035); } .product-info { padding:20px; } .product .sku { margin-bottom:10px; color:#9dbfe1; font:500 .62rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; } .product h3 { min-height:52px; font-size:1.15rem; line-height:1.05; letter-spacing:-.04em; text-transform:none; } .product strong { display:block; margin:24px 0 18px; font-size:.95rem; } .product a { display:flex; justify-content:space-between; border-top:1px solid #555; padding-top:13px; color:#eee; font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .product a span { color:var(--blue); font-size:1rem; }
.catalog-link { display:inline-block; margin-top:18px; border-bottom:1px solid var(--blue); color:#e6e6e6; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.catalog { padding:9vw 5vw; background:#101010; }.catalog-hero { max-width:900px; padding-bottom:70px; }.catalog-hero h1 { font-size:clamp(4rem,9vw,8rem); }.catalog-hero > p:last-child { max-width:480px; margin:30px 0 0; color:#bdbdbd; line-height:1.65; }.catalog-tools { display:flex; justify-content:space-between; gap:30px; align-items:center; margin-bottom:28px; padding:16px 0; border-top:1px solid #4b4b4b; border-bottom:1px solid #4b4b4b; color:#c6c6c6; font:500 .68rem 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }.catalog-tools input { width:260px; padding:12px 14px; border:1px solid #5a5a5a; border-radius:0; outline:0; background:#1d1d1d; color:var(--white); font:500 .74rem Manrope,sans-serif; }.catalog-tools input:focus { border-color:var(--blue); }.catalog-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:28px; align-items:start; }.catalog-nav { position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto; padding:18px; border:1px solid #414141; background:#191919; }.catalog-nav .eyebrow { margin-bottom:12px; color:#aaa; }.catalog-nav button { width:100%; border:0; background:transparent; color:#c9c9c9; cursor:pointer; text-align:left; font:700 .68rem/1.35 Manrope,sans-serif; }.catalog-nav button span { float:right; color:#7e7e7e; font:500 .63rem 'DM Mono',monospace; }.browse-all,.category-button { padding:12px 0; }.browse-all { border-bottom:1px solid #4b4b4b !important; }.catalog-nav button.active { color:#fff; }.catalog-nav button.active:before { content:'●'; color:var(--blue); margin-right:7px; }.category-group { border-bottom:1px solid #3b3b3b; }.category-group summary { list-style:none; }.category-group summary::-webkit-details-marker { display:none; }.category-group summary:after { content:'+'; position:absolute; right:18px; margin-top:-29px; color:#777; }.category-group[open] summary:after { content:'−'; }.category-button { padding-right:20px !important; }.subcategory-list { padding:0 0 9px 12px; }.subcategory-list button { padding:6px 0; color:#989898; font-weight:500; }.subcategory-list button:hover { color:#fff; }.catalog-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.catalog-grid .product img { height:190px; }.catalog-grid .product-info { padding:17px; }.catalog-grid .product h3 { min-height:59px; font-size:1rem; }.catalog-grid .product strong { margin:18px 0 15px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.quote { padding:12vw 13vw; background:#8d8d8d; color:#111; } .quote .eyebrow { color:#333; } blockquote { font-size:clamp(2.4rem,5vw,5.2rem); line-height:1.02; } .haltech { padding:11vw 13vw; background:linear-gradient(120deg,#111,#464646); color:var(--white); border-top:1px solid #606060; } .haltech .eyebrow,.haltech em,.haltech-detail span { color:#eee; } .haltech-detail p { color:#e0e0e0; } .contact { padding:12vw 13vw 11vw; background:#e2e2e2; color:#111; } .contact .eyebrow { color:#555; } .contact h2 em { color:#555; } .contact-link { display:inline-block; margin-top:44px; border-bottom:2px solid #111; padding-bottom:8px; font-size:clamp(1.1rem,2vw,1.9rem); font-weight:800; } .contact-link span { color:#111; } footer { border:0; background:#050505; color:#8d8d8d; font-size:.68rem; } footer .logo { width:126px; } footer > a:last-child { border-bottom:1px solid #666; padding-bottom:4px; color:#ddd; }
.contact-details { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:36px; }.contact-details .contact-link { margin-top:0; }.contact-details > a:not(.contact-link) { border-bottom:1px solid #777; padding-bottom:4px; font-size:.84rem; font-weight:700; }
.contact-layout { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(320px,1fr); gap:70px; margin-top:38px; }.contact-layout .contact-details { margin-top:0; }.enquiry-form { display:grid; gap:16px; }.enquiry-form label { display:grid; gap:7px; color:#444; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.enquiry-form input,.enquiry-form select,.enquiry-form textarea { width:100%; border:1px solid #777; border-radius:0; outline:0; padding:13px; background:#f2f2f0; color:#111; font:500 .9rem Manrope,sans-serif; letter-spacing:0; text-transform:none; }.enquiry-form textarea { resize:vertical; }.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus { border-color:var(--blue); box-shadow:0 0 0 2px #e1060030; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.enquiry-form .button { justify-content:space-between; width:max-content; margin-top:4px; }.form-note { margin:0; color:#666; font-size:.68rem; }.honeypot { position:absolute !important; left:-10000px; }
@media (max-width:900px) { .catalog-grid { grid-template-columns:repeat(2,1fr); }.catalog-layout { grid-template-columns:200px minmax(0,1fr); } .contact-layout { gap:40px; } } @media (max-width:700px) { .nav { padding:18px 6vw; } .logo { width:135px; } nav { display:none; } .nav-cta { padding:9px 10px; font-size:.58rem; } .hero { min-height:auto; display:block; padding:18vw 6vw 14vw; } .hero-art { height:350px; margin-top:60px; } .statement,.quote,.contact,.haltech { padding:17vw 8vw; } .services,.shop,.catalog { padding:16vw 6vw; } .statement-detail,.haltech-detail,.shop-heading { display:block; } .statement-detail a,.haltech-detail a { display:inline-block; margin-top:28px; } .shop-heading > p { margin-top:24px; } .product-grid,.catalog-grid { grid-template-columns:1fr; } .product img,.catalog-grid .product img { height:280px; } .catalog-tools { display:block; }.catalog-tools input { width:100%; margin-top:15px; }.catalog-layout,.contact-layout { display:block; }.catalog-nav { position:static; max-height:330px; margin-bottom:22px; }.contact-layout .contact-details { margin-bottom:40px; }.form-row { grid-template-columns:1fr; } article { grid-template-columns:15% 1fr 8%; gap:10px; } article p { grid-column:2/3; margin-top:-8px; } article i { grid-column:3; grid-row:1; } footer { padding:22px 6vw; flex-wrap:wrap; gap:15px; } footer p { order:3; width:100%; } .contact-details > a:not(.contact-link) { font-size:.7rem; } }