SPEC Oil & Gas Technologies — Website

Marketing homepage for SPEC, a vertically integrated engineering and fabrication company delivering turnkey process solutions to the oil and gas sector.

Static HTML, CSS and vanilla JavaScript. No build step, no dependencies — open index.html and it runs.

---

Viewing it locally

Because the page loads video and images over HTTP, opening the file directly with file:// will not work correctly. Serve the folder instead:

# Python
python -m http.server 8080

# Node
npx serve .

Then visit http://localhost:8080.

---

Publishing with GitHub Pages

1. Push this folder to a GitHub repository.
2. Settings → Pages → Build and deployment
3. Source: Deploy from a branch · Branch: main · Folder: / (root)
4. Save. The site publishes at https://<user>.github.io/<repo>/ in a minute or two.

No configuration file is needed — the site is already static and root-relative.

---

Structure

index.html              the entire page
assets/
  css/
    tokens.css          design tokens — colour, type scale, spacing
    main.css            all component styles
  js/
    main.js             carousels, accordion, counters, nav
  img/
    products/           equipment photography
    news/               news article photography
    certs/              certification badges (empty — see README there)
    spec-flame.svg      logo mark (PLACEHOLDER)
  video/
    hero.mp4            hero background
    project-card.mp4    hero project card

Design tokens

assets/css/tokens.css is the single source of truth. Changing a brand colour, a type step or the spacing rhythm there updates the whole site. Component CSS should never hard-code a colour or font size — reach for a token.

The type scale is deliberately small so pages stay consistent:

Step	Size	Used for
Display	38 → 72px	hero headline only
H2	30 → 48px	every section heading
H3	20 → 26px	every card title
Body	15 → 18px	all paragraphs
Label	12px	all kickers / metadata

---

Before this goes live

These are known gaps, not bugs:

• Logo — the current mark is a reconstruction. See assets/img/README.md.
• Certification badges — the ticker falls back to text until files are added to assets/img/certs/. See the README in that folder.
• Typeface — the site uses Montserrat, which supersedes the DIN Next + IBM Plex pairing in the SPEC Brand Guidelines. Deliberate, but the brand document should be updated to match.
• Hero video is 8.2 MB. Fine on desktop, heavy on mobile data; re-exporting at ~2 Mbps would roughly halve it.
• Photography — 9 unique images cover ~23 slots, so some repeat between sections. Commissioning project photography would lift the site more than any further code change.
• Contact detail — office addresses were removed with the Locations section and now exist nowhere on the site.

---

Browser support

Modern evergreen browsers. Uses CSS Grid, custom properties, aspect-ratio, scroll-snap and IntersectionObserver.

Accessibility: prefers-reduced-motion is respected throughout (carousels stop animating, counters settle instantly, the certification ticker becomes hand-scrollable). Content is never hidden behind JavaScript that might not run.