Aerospace Company Website Template

1. Unzip and open index.html in a browser, or serve the folder with any static server (npx serve .).
2. Every page is a plain HTML file: index.html (home), products.html (all three products), gannet.html (one product in detail, with the configurator), missions.html (launch schedule), factory.html, company.html (story, people and careers) and contact.html (book a mission).
3. All pages share assets/style.css and assets/script.js. There is no build step.
4. Deploy the folder as it is to any static host.

• Products and their colours: the demo has three products, Kite, Gannet and Albatross, each named by data-bus="kite|gannet|albatross" on its markup. Each name maps to a colour (--kite, --gannet, --albatross and their -rgb triples) at the top of assets/style.css and to a display name in BUS_NAMES near the top of assets/script.js. Rename them in all three places. Product colours carry black text, so keep each at 4.5:1 or better against #000.
• Ground and ink: the token block at the top of assets/style.css. Every .display heading is set in solid --ink.
• Type: Schibsted Grotesk (500 for display headings and product names, 400 for spec numerals and body, 600 for small headings; one variable file) and Kode Mono (menu, clock, labels), self-hosted in assets/fonts/. Swap the files, the @font-face rules at the top of the stylesheet and --font-display, --font-body and --font-mono.
• Photographs: the hero, three product shots on black, an open product, a launch fairing, the factory hall, six build stations, an operations room, three portraits, a solar-cell close-up and the building at dusk. See Images and Credits.
• Lead times and windows: LEAD_WEEKS, INTEGRATION_WEEKS and WINDOW_HOUR_UTC near the top of assets/script.js.

Page	Sections	Hands-on piece
Home	Viewfinder hero, four spec cells, three-product trio, close-up band, black pause with three statements, launch band, factory tiles, closing call	The viewfinder; pause arrows
Products	Title, payload scale, comparison trio, one full row per product, side-by-side table	Payload scale
Gannet (product detail)	Product hero with spec cells, configurator, five subsystems, flight heritage, the other two products	Configurator
Missions	Title, spec cells, launch schedule, operations band, launch options	Pick a mission clock
Factory	Black pause, hall photograph, station strip [S1] to [S6], test figures	Station strip
Company	Building photograph, story, figures, people, careers	Roles filter
Contact	Title, window picker with countdown, form, mission desk	Window picker

Every feature looks for its own markup and does nothing when it is missing, so you can delete a section, or a whole page and its links, without touching the script.

Navigation and the mission clock

The site uses one bracketed code system: pages are [00] (Home) to [06], the three products [01A] to [01C], factory stations [S1] to [S6] and careers teams two-letter codes ([AL], [EN], [PR], [OP]). The codes are plain text in the markup; change them in the nav, sheet, footer and section labels together.

The same <header class="bar"> is on every page; mark the current page's link with aria-current="page" (the product detail page marks Products with aria-current="true"). On wide screens the links are mono cells with bracketed codes ([01] Products to [06] Contact) divided by hairlines, followed by the clock cell. Under 1180px the bar becomes the wordmark and a Menu button that shows the clock; it opens a black full-screen sheet (#sheet) of large numbered rows with the current page marked and the clock at its foot. The button is a real <button> with aria-expanded/aria-controls; Escape, a tap on the sheet's empty ground or a link closes it, focus moves into the sheet and returns to the button, and Tab stays inside while it is open. Without JavaScript the button is hidden and a Pages link jumps to the footer site map, which lists every page.

Every [data-clock] element shows mission elapsed time for the current mission as MET 412:07:13:02 · GANNET-4 (days, hours, minutes, seconds; a minus sign before launch). fmtClock near the top of the script owns the format. The default mission is DEFAULT_MISSION near the top of the script (a name and an ISO launch time). A mission picked on the Missions page is stored in localStorage under halyard-mission as a name and a timestamp, so it follows the visitor to every page and every tab. The text inside each clock element is what visitors without JavaScript see.

Viewfinder (Home)

The hero is a [data-viewfinder] wrapper holding the .hero and the callouts. Inside, [data-stage] is a box with the photograph's own 16:9 proportions sized to cover the screen; data-rest="cx cy w h" is the box the brackets frame when idle, in percent of the photograph. Each hotspot is a button:

In your downloadThe working code for this step, in index.html.

--x/--y is the part's centre and data-w/data-h its lock box, all in percent of the photograph. Its callout is the [data-callout="wheel"] element with the matching id. On phones the stage shows a 4:5 crop of the same photograph; --crop-l and --crop-w on the stage (the crop's left edge and width, in percent of the full photograph) map the hotspots into it, so if you crop your phone image differently, change those two numbers. Add or remove hotspots freely.

The brackets follow a fine pointer, snap onto a part when the pointer is over its box and lock on click. Touch locks by tapping a mark; keyboard users Tab between marks (the brackets move to each) and press Enter. Escape, the close button or a click on the photograph releases the lock. The callout opens beside the locked part, on the side with room, and its large figure counts up.

Payload scale (Products)

[data-payload-scale] holds a native <input type="range"> ([data-scale-input], 5 to 1,000 kg) styled as a marker over a ruled scale, so dragging, touch and arrow keys work without the script. Each card in [data-compare] has data-cap (its payload capacity in kg) and a [data-margin] odometer. As the marker moves, cards whose capacity is below the load get .is-out and dim, the smallest card that carries it fills its bar (.bar-cta--fill.is-full), and the verdict line says so. The coloured marks under the scale are .scale__cap elements placed at left: <capacity / 10>%.

Odometer numerals

Any element with data-odo is rebuilt as rolling digit columns, with a visually hidden copy of the value for screen readers. The script calls setOdo(element, text) with the formatted value. Separators such as commas and points stay put while digits roll.

Configurator (product detail)

[data-config] is a form: two range sliders (data-cfg="mass", data-cfg="power") and orbit radios (data-cfg="orbit"). initConfigurator in the script holds the rules: the standard lead time plus a week over 180 kg, two weeks over 900 W, and the orbit's own weeks from ORBITS, with array size, battery, delta-v and design life worked out alongside. The [data-line] items light up as each rule applies. Submitting goes to contact.html with the spec in the address, and the contact form fills itself in from it.

Launch schedule (Missions)

Each [data-mission] row is a button with either data-t="<ISO launch time>" (flying) or data-in-days="<n>" (scheduled, that many days from today at WINDOW_HOUR_UTC). Rows tick their own clocks; clicking one makes it the mission in the bar and marks it aria-pressed="true". Colour chips follow the row's data-bus.

Station strip (Factory)

[data-track] is a horizontal scroll-snap strip of [data-station] articles, so it swipes natively on touch and works with no script. The script adds mouse drag (a flick moves one station), the previous and next buttons, the numbered [data-rail] buttons and the Left, Right, Home and End keys while the strip has focus. Links such as factory.html#station-4 open on that station.

Careers filter (Company)

The bracketed mono menu is a group of buttons with data-filter-btn="all|eng|prod|ops" and aria-pressed; each role is a .role with a matching data-team. The open-application row (data-team="any") always shows. Add a team by adding a button and setting data-team on its roles; update the count in its <sup>.

Booking (Contact)

[data-book] holds the product select, the launch-window radios (data-win-days = days from today), the form fields and the countdown header. Windows earlier than the chosen product's lead time plus INTEGRATION_WEEKS are disabled with a reason. Choosing a window starts a countdown to its opening in the same MET -ddd:hh:mm:ss form as the clock. The form is not connected: submitting shows a note that nothing was sent. Set the form's action and method for Formspree, Netlify Forms or your CRM and remove the submit handler in initBooking.

Display headings and reveals

Put .display on each line (display: block spans) so the heading breaks where you choose. Add data-display to a heading (or a .display element) to lift its lines in once as it enters the screen; a heading already on screen at load is left as it is. data-reveal fades an element up once; data-reveal-group staggers its children; data-hero-fade runs on load; data-count counts a spec numeral up from zero.

Token	Value	Use
--ground	#000000	Page ground; ink on it 17.9:1
--surface	#0B0E12	Callouts, station cards, form fields
--ink	#E9EDF1	Text, rules, buttons at rest
--ink-dim	ink at 0.68	Secondary text, 8.1:1 on ground
--ink-faint	ink at 0.52	Mono labels on black or surface, 4.9:1; never over photographs
--kite	#D8E7EE	Kite (ice): name, bar, chip, column; 16.6:1 on black
--gannet	#CFA545	Gannet (foil gold); 9.1:1
--albatross	#2EF27E	Albatross (signal green); 14.1:1
--accent	#2EF27E	The interface's one accent: clock dot, current page, hotspots and the lock, focus rings, button hover, configurator choices, contact submit, station rail; black on it 14.1:1. Matches Albatross in the demo; give it its own value if your products change

• Without JavaScript every page is complete: the hero callouts are a static row under the photograph, the pause statements are listed, the scale and configurator are ordinary controls, the launch schedule shows launch dates, the station strip swipes, and the footer site map reaches every page.
• If the GSAP CDN is blocked, every interaction still works (they run on CSS transitions and direct styles) and the reveal gate is lifted.
• Reduced motion keeps every control but jumps instead of travelling: no bracket travel, glint, count-up, reveals or roll.
• Hotspots, arrows, filters, launch schedule rows and the Menu button are real buttons with aria-expanded or aria-pressed; the payload and configurator controls are native range inputs and radios with spoken values. Odometers keep a readable copy of their value for screen readers.
• Focus rings show for keyboard use only (:focus-visible).

• GSAP 3.15.0 with ScrollTrigger (works with 3.12+), from jsDelivr. No other libraries.
• Fonts: Schibsted Grotesk and Kode Mono, self-hosted (see Images and Credits).

Bundled photographs are WebP derivatives in assets/img/, cropped and resized, with a slight saturation trim. All of them are AI-generated images made for this template; they show no real factory, product or person, and none contain words or logos. The hero has a phone crop (hero-m.webp); the three product shots share one camera angle and light on pure black so they line up in rows. Replace a file with your own at the same name and proportions, and update its alt text and any caption that describes it. If you replace the hero, move the hotspots (see Viewfinder).

Fonts in assets/fonts/ are the latin files of Schibsted Grotesk (Schibsted, designed by Bakken & Bæck) and Kode Mono (Isa Ozler), as served by Google Fonts, unmodified, under the SIL Open Font License 1.1; the licence is in assets/fonts/OFL.txt.

Halyard Orbital, its people, customers, missions, address and phone number are fictional. Prestwick is real; the address and postcode are not.