/* ============================================ CSS CUSTOM PROPERTIES & RESET ============================================ */ :root { --color-bg: #fafafa; --color-surface: #ffffff; --color-surface-elevated: #ffffff; --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #86868b; --color-border: rgba(0,0,0,0.08); --color-border-strong: rgba(0,0,0,0.12); --color-accent: #0071e3; --color-accent-hover: #0077ed; --color-success: #34c759; --color-warning: #ff9500; --color-danger: #ff3b30; --color-purple: #af52de; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --shadow-xl: 0 20px 60px rgba(0,0,0,0.15); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --sidebar-width: 280px; --header-height: 64px; --content-max-width: 900px; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); } body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ LAYOUT STRUCTURE ============================================ */ .guide-wrapper { display: flex; min-height: 100vh; } /* Sidebar - Desktop */ .guide-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-width); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; z-index: 100; transform: translateX(0); transition: transform 0.4s var(--ease-out-expo); } .sidebar-header { padding: 24px 24px 20px; border-bottom: 1px solid var(--color-border); } .sidebar-logo { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .sidebar-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--color-text); line-height: 1.3; } .sidebar-subtitle { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 12px; } .nav-section { margin-bottom: 8px; } .nav-section-title { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 12px 8px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; cursor: pointer; } .nav-link:hover { background: rgba(0,0,0,0.04); color: var(--color-text); } .nav-link.active { background: rgba(0,113,227,0.08); color: var(--color-accent); } .nav-link i { width: 20px; font-size: 15px; opacity: 0.7; } .nav-link.active i { opacity: 1; } .nav-children { margin-left: 32px; border-left: 1px solid var(--color-border); padding-left: 12px; margin-top: 4px; margin-bottom: 8px; } .nav-child-link { display: block; padding: 6px 0; color: var(--color-text-tertiary); text-decoration: none; font-size: 13px; transition: color 0.2s ease; } .nav-child-link:hover, .nav-child-link.active { color: var(--color-accent); } /* Main Content */ .guide-main { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; } .guide-content { max-width: var(--content-max-width); margin: 0 auto; padding: 48px 48px 120px; } /* Mobile Header */ .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: rgba(250,250,250,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border); z-index: 200; padding: 0 20px; align-items: center; justify-content: space-between; } .mobile-menu-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.2s ease; } .mobile-menu-btn:hover { background: rgba(0,0,0,0.05); } .mobile-menu-btn i { font-size: 20px; color: var(--color-text); } .mobile-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 150; opacity: 0; transition: opacity 0.3s ease; } .mobile-overlay.active { opacity: 1; } /* ============================================ SECTION STYLING ============================================ */ .guide-section { margin-bottom: 64px; animation: fadeInUp 0.6s var(--ease-out-expo) both; } .guide-section:nth-child(1) { animation-delay: 0.05s; } .guide-section:nth-child(2) { animation-delay: 0.1s; } .guide-section:nth-child(3) { animation-delay: 0.15s; } .guide-section:nth-child(4) { animation-delay: 0.2s; } .guide-section:nth-child(5) { animation-delay: 0.25s; } .guide-section:nth-child(6) { animation-delay: 0.3s; } .guide-section:nth-child(7) { animation-delay: 0.35s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .section-header { margin-bottom: 32px; } .section-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; } .section-icon.blue { background: rgba(0,113,227,0.1); color: var(--color-accent); } .section-icon.green { background: rgba(52,199,89,0.1); color: var(--color-success); } .section-icon.orange { background: rgba(255,149,0,0.1); color: var(--color-warning); } .section-icon.red { background: rgba(255,59,48,0.1); color: var(--color-danger); } .section-icon.purple { background: rgba(175,82,222,0.1); color: var(--color-purple); } .section-title { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--color-text); letter-spacing: -0.5px; line-height: 1.2; } .section-subtitle { font-size: 17px; color: var(--color-text-secondary); margin-top: 8px; line-height: 1.5; } /* Subsection */ .subsection { margin-top: 48px; } .subsection-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-text); margin-bottom: 16px; letter-spacing: -0.3px; } .subsection-intro { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 20px; line-height: 1.6; } /* ============================================ CARDS & COMPONENTS ============================================ */ /* Overview Card */ .overview-card { background: linear-gradient(135deg, rgba(52,199,89,0.08) 0%, rgba(0,113,227,0.08) 100%); border: 1px solid rgba(52,199,89,0.2); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 32px; } .overview-card-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--color-success); margin-bottom: 12px; } .overview-list { list-style: none; } .overview-list li { padding: 8px 0; font-size: 15px; color: var(--color-text); display: flex; align-items: flex-start; gap: 12px; } .overview-list li::before { content: ''; width: 6px; height: 6px; background: var(--color-success); border-radius: 50%; margin-top: 8px; flex-shrink: 0; } .overview-list strong { color: var(--color-text); } /* Feature Grid */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 24px 0; } .feature-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; transition: all 0.3s var(--ease-out-quart); } .feature-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .feature-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; } .feature-card-title { font-size: 16px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; } .feature-card-desc { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; } /* Action Cards */ .action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; } .action-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; transition: all 0.3s var(--ease-out-quart); } .action-card:hover { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); } .action-card-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 12px; } .action-card-icon.green { background: rgba(52,199,89,0.1); color: var(--color-success); } .action-card-icon.blue { background: rgba(0,113,227,0.1); color: var(--color-accent); } .action-card-icon.red { background: rgba(255,59,48,0.1); color: var(--color-danger); } .action-card-icon.orange { background: rgba(255,149,0,0.1); color: var(--color-warning); } .action-card-icon.purple { background: rgba(175,82,222,0.1); color: var(--color-purple); } .action-card-title { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; } .action-card-desc { font-size: 12px; color: var(--color-text-tertiary); } /* Status Items */ .status-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; } .status-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 20px; transition: all 0.2s ease; } .status-item:hover { border-color: var(--color-border-strong); } .status-item-content { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .status-item-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: rgba(255,149,0,0.1); color: var(--color-warning); } .status-item-text { flex: 1; min-width: 0; } .status-item-title { font-size: 15px; font-weight: 600; color: var(--color-text); } .status-item-desc { font-size: 13px; color: var(--color-text-tertiary); margin-top: 2px; } .status-badges { display: flex; gap: 6px; flex-shrink: 0; } .badge { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px; } .badge.high { background: rgba(255,59,48,0.1); color: var(--color-danger); } .badge.medium { background: rgba(255,149,0,0.1); color: var(--color-warning); } .badge.low { background: rgba(52,199,89,0.1); color: var(--color-success); } .badge.pending { background: rgba(255,149,0,0.1); color: #b36b00; } /* Data Tables */ .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; } .data-table th { text-align: left; padding: 12px 16px; background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--color-border); font-weight: 600; color: var(--color-text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--color-border); color: var(--color-text); } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: rgba(0,0,0,0.01); } /* Info Box */ .info-box { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: var(--radius-md); margin: 20px 0; } .info-box.blue { background: rgba(0,113,227,0.06); border: 1px solid rgba(0,113,227,0.15); } .info-box.orange { background: rgba(255,149,0,0.06); border: 1px solid rgba(255,149,0,0.15); } .info-box.red { background: rgba(255,59,48,0.06); border: 1px solid rgba(255,59,48,0.15); } .info-box-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .info-box.blue .info-box-icon { color: var(--color-accent); } .info-box.orange .info-box-icon { color: var(--color-warning); } .info-box.red .info-box-icon { color: var(--color-danger); } .info-box-content { flex: 1; } .info-box-title { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; } .info-box-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.5; } /* Keyfob Buttons */ .keyfob-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; } .keyfob-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: #fff; } .keyfob-btn.green { background: var(--color-success); } .keyfob-btn.blue { background: var(--color-accent); } .keyfob-btn.red { background: var(--color-danger); } .keyfob-btn.gray { background: #6e6e73; } /* Steps */ .steps { margin: 20px 0; padding-left: 0; list-style: none; counter-reset: step; } .steps li { position: relative; padding: 12px 0 12px 48px; font-size: 15px; color: var(--color-text); counter-increment: step; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; background: rgba(0,113,227,0.1); color: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } /* Credentials Card */ .credentials-card { background: linear-gradient(135deg, #1d1d1f 0%, #2d2d2f 100%); border-radius: var(--radius-lg); padding: 32px; color: #fff; text-align: center; margin: 24px 0; } .credentials-card-label { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .credentials-card-value { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 24px; font-weight: 600; margin-bottom: 24px; } .credentials-card-value.pending { color: rgba(255,255,255,0.4); font-style: italic; font-size: 18px; } /* Streaming Icons */ .streaming-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; } .streaming-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; transition: all 0.3s var(--ease-out-quart); } .streaming-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); } .streaming-card i { font-size: 28px; margin-bottom: 10px; } .streaming-card-name { font-size: 13px; font-weight: 500; color: var(--color-text); } /* Contact Card */ .contact-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; text-align: center; margin: 24px 0; } .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 24px; } .contact-item-label { font-size: 12px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .contact-item-value { font-size: 18px; font-weight: 600; color: var(--color-text); } .contact-item-value a { color: var(--color-accent); text-decoration: none; } .contact-item-value a:hover { text-decoration: underline; } /* Last Updated */ .last-updated { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--color-text-tertiary); margin-bottom: 40px; } /* ============================================ RESPONSIVE STYLES ============================================ */ @media (max-width: 1024px) { .guide-sidebar { transform: translateX(-100%); } .guide-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); } .mobile-header { display: flex; } .mobile-overlay.active { display: block; } .guide-main { margin-left: 0; padding-top: var(--header-height); } .guide-content { padding: 32px 20px 100px; } .section-title { font-size: 26px; } .action-grid { grid-template-columns: repeat(3, 1fr); } .streaming-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; gap: 20px; } .feature-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .action-grid { grid-template-columns: 1fr; } .status-item { flex-direction: column; align-items: flex-start; gap: 12px; } .status-badges { align-self: flex-start; } .credentials-card { padding: 24px 20px; } .credentials-card-value { font-size: 18px; } .data-table { font-size: 13px; } .data-table th, .data-table td { padding: 10px 12px; } .keyfob-grid { flex-direction: column; } .keyfob-btn { justify-content: center; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }
185 Cape Schanck Road
Last updated: 9 January 2026

Project Overview

Complete smart home installation with integrated security, audio, and networking systems.

What's Been Installed
  • Security system — Bosch Solution 6000 alarm with pet-friendly motion detectors, 3 keypads, and RF keyfobs
  • Video intercom — Hikvision Gen2 IP with 10" indoor touchscreens, gate station with keypad, and door stations
  • Multi-room audio — Sonos ecosystem with 5 amps powering in-ceiling speakers, soundbars, and surround sound
  • Network — Starlink satellite internet with TP-Link Omada Wi-Fi 6 coverage throughout
  • Equipment hubs — Professional rack installations on North and South sides with UPS battery backup
System Equipment Control
Alarm Bosch Solution 6000 + 8× pet-friendly PIRs Keypads + RF keyfobs
Intercom Hikvision Gen2 IP (gate + 2 door stations) 10" touchscreens + Hik-Connect app
Audio 5× Sonos Amps + in-ceiling speakers + soundbars Sonos app
Network Starlink + TP-Link Omada (Wi-Fi 6) Omada app
Access Control Bosch Smart RF receivers (gate + garage) RF keyfobs

Still To Do

Outstanding items to be completed before handover.

TV purchase and installation
Wall brackets installed, TVs to be purchased closer to fit-off
High Pending
Network credentials handover
Wi-Fi name and password to be provided at commissioning
Medium Pending
User code setup
Alarm PIN codes and intercom PINs to be configured
Medium Pending

Security System

Bosch Solution 6000 alarm, Hikvision Gen2 IP intercom, and integrated cameras for complete home protection.

Alarm

The Bosch Solution 6000 is controlled via keypads in the garage, north entrance, and south entrance. You also have two RF keyfobs for quick arm/disarm.

Component Qty Location / Notes
Control Panel 1 Main panel + expansion kit for South Side
Keypads 3 Garage | North Entrance | South Entrance
Motion Detectors 8 Blue Line GEN2 TriTech — pet friendly up to 45kg
RF Keyfobs 2 5-button with programmable hold-down functions
4G/IP Module 1 Digiflex dual-carrier SIM + LAN for remote access

Arming & Disarming

Away Arm
Code → AWAY
All zones active
Stay Arm
Code → STAY
Perimeter only
Disarm
Enter code
System disarms

RF Keyfob Buttons

Arm Away Arm Stay Disarm Gate Garage
Hold-down functions
Keyfob buttons can be programmed for custom actions. Contact us if you'd like to customise your keyfob.

Adding or Changing User Codes

  1. Enter your Master Code
  2. Press MENU
  3. Navigate to User Codes
  4. Select the user number to modify
  5. Enter the new 4-6 digit code
  6. Press ENTER to save

Intercom

The Hikvision Gen2 IP intercom lets you see and speak to visitors at the gate or front doors from inside the house or via your phone.

Component Details
Indoor Stations 2× 10" IPS touchscreens
Gate Station Flush mount with 2MP 180° camera + backlit keypad
Door Stations 2× surface mount with 2MP 180° cameras

Answering a Call

When someone presses the doorbell, the indoor touchscreens ring and you receive a notification on your phone via Hik-Connect.

Answer
Talk to visitor
Unlock
Open gate or door
Decline
End the call
Gate Keypad PIN
Visitors can enter a PIN at the gate keypad to open without calling. Change the gate PIN regularly and avoid sharing it widely.

Hik-Connect App Setup

  1. Download Hik-Connect from App Store or Google Play
  2. Create an account or log in
  3. Add your intercom by scanning the QR code or entering the device serial
  4. Receive call notifications and unlock remotely from anywhere

Cameras

Your intercom door stations include built-in 2MP cameras with 180° wide-angle view. These record to the intercom system and can be viewed via the touchscreens or app.

Live View
Open Hik-Connect app → tap any camera for live view. Double-tap for fullscreen.
Playback
Tap Playback → choose date → scroll timeline to review recorded footage.

Audio System

Sonos multi-room audio — high-performance sound controlled from one simple app.

Sonos Multi-Room Audio

Zone Speakers Notes
Living Room 6× SpeakerCraft AIM7 TWO in-ceiling + Sonos Beam Gen2 Aimable speakers for vaulted ceiling (30° adjustment)
Jon's Office Sonos Beam Gen2 + 2× in-ceiling rears Wall-mounted soundbar with surround
Rumpus Room Sonos Arc Ultra + 2× in-ceiling rears Premium soundbar with Dolby Atmos
Vaulted Ceiling Design
The living room has a 45° pitched cathedral ceiling. SpeakerCraft AIM7 TWO speakers with 30° directional adjustment aim sound toward the listening area despite the steep angle.

Sonos App Control

Download the Sonos app from App Store or Google Play.

  • Play music in one room or sync across the whole house
  • Adjust volume for individual zones or all zones together
  • Group rooms for party mode
  • Set alarms and sleep timers

Streaming Options

AirPlay 2
Spotify Connect
Apple Music
TuneIn Radio
Guest-friendly
AirPlay works directly from any iPhone — no app downloads or accounts needed. Just swipe down, tap the AirPlay icon, and select a room.

TVs

Wall brackets installed in three locations, ready for your TVs.

Location Audio Notes
Living Room Sonos Beam Gen2 + in-ceiling surrounds Premium slim tilt bracket
Jon's Office Sonos Beam Gen2 + in-ceiling rears Wall-mounted soundbar
Rumpus Room Sonos Arc Ultra + in-ceiling rears Dolby Atmos capable
HDMI ARC
Connect your TV's HDMI ARC port to the soundbar. This allows TV audio to play through Sonos and lets you control volume with your TV remote. Certified PRO³ Series HDMI cables (5m) are pre-installed.
TV purchase and installation
As requested, TVs will be purchased closer to fit-off to allow for newer model releases
High Pending

Network

Starlink satellite internet with TP-Link Omada managed Wi-Fi 6 coverage throughout.

Component Model Purpose
Internet Starlink High-speed satellite internet
Gateway TP-Link ER7406 Omada Gigabit VPN Gateway
Controller TP-Link OC200 Cloud controller for remote management
Switches 2× TP-Link SG2218P 18-port PoE+ (North & South racks)
Indoor Wi-Fi 5× TP-Link EAP683 UR Wi-Fi 6 ceiling-mount access points
Outdoor Wi-Fi TP-Link EAP610-Outdoor Covers pool & alfresco area

Wi-Fi Details

Network Name
TBC at commissioning
Password
TBC at commissioning
Starlink Satellite
High-speed internet perfect for streaming, video calls, and smart devices — even in remote areas.
Wi-Fi 6
Handles multiple devices efficiently, reduces lag, and provides faster speeds for the whole family.

Equipment Hub

Two professionally assembled equipment racks ensuring short cable runs and optimal performance.

Location Size Houses
North Side 16RU wall mount Network, Sonos amps, alarm panel
South Side 12RU wall mount Network switch, expansion panel, Sonos amps

Key Equipment

UPS Battery Backup (2× CyberPower 1000VA) PDUs (2× 8-socket with switches) Kordz Certified Cabling
UPS Battery Backup
The CyberPower UPS units protect your network and security equipment from power outages and surges. During a blackout, they provide enough runtime to keep critical systems online.

Contact

Need help? Get in touch with our support team.

Phone
1300 85 20 30
Website
// Mobile sidebar toggle function toggleSidebar() { var sidebar = document.querySelector('.guide-sidebar'); var overlay = document.querySelector('.mobile-overlay'); var menuBtn = document.querySelector('.mobile-menu-btn i'); sidebar.classList.toggle('open'); overlay.classList.toggle('active'); if (sidebar.classList.contains('open')) { menuBtn.className = 'fa-solid fa-xmark'; document.body.style.overflow = 'hidden'; } else { menuBtn.className = 'fa-solid fa-bars'; document.body.style.overflow = ''; } } // Navigation click handler function navClick(event) { // Close mobile sidebar on nav click if (window.innerWidth = sectionTop - 150) { currentSection = section.getAttribute('id'); } }); navLinks.forEach(function(link) { link.classList.remove('active'); if (link.getAttribute('href') === '#' + currentSection) { link.classList.add('active'); } }); } // Throttle scroll events var ticking = false; window.addEventListener('scroll', function() { if (!ticking) { window.requestAnimationFrame(function() { updateActiveNav(); ticking = false; }); ticking = true; } }); // Initial call updateActiveNav(); // Handle window resize window.addEventListener('resize', function() { if (window.innerWidth > 1024) { var sidebar = document.querySelector('.guide-sidebar'); var overlay = document.querySelector('.mobile-overlay'); sidebar.classList.remove('open'); overlay.classList.remove('active'); document.body.style.overflow = ''; document.querySelector('.mobile-menu-btn i').className = 'fa-solid fa-bars'; } });