Homepage Hero Section — Infrastructure Audit

Overview

The current homepage hero is a service-led landing hero. It presents the WordPress Infrastructure Audit as the primary entry offer and uses a lightweight CSS-only Infrastructure Pulse visual on the right side. The hero is rendered by GP Element 9594; older subscription and topic elements remain available as draft rollback artifacts but are not rendered on the homepage.

GP Element Reference

Property	Value
Post ID	`9594`
Title	Opshell Homepage - Services Landing
Post Type	`gp_elements`
Element Type	`block`
Block Type	`page-hero`
Hook	`generate_after_header`
Priority	`1`
Display Condition	Front page only
Status	`publish`

Related elements:

ID	Title	Status
16	Opshell Homepage Hero (original)	`draft`
9581	Opshell Homepage Hero - Benefits Subscribe	`draft`

Homepage HTML Structure

The full HTML content stored in the GP Element:

<section class="opshell-home-hero">
<div class="opshell-home-hero__copy">
<p class="opshell-command"><span>$</span> opshell --audit</p>
<h1>Your business runs on servers.<strong>We keep them fast, secure, and reliable.</strong></h1>
<p class="opshell-home-hero__lead">Practical WordPress and Linux infrastructure operations for businesses, agencies, and technical builders.</p>
<div class="opshell-home-actions"><a class="opshell-home-button opshell-home-button--primary" href="https://opshell.dev/contact/">Start with an Infrastructure Audit</a><a class="opshell-home-button opshell-home-button--secondary" href="https://opshell.dev/services/">Explore Services</a></div>
<p class="opshell-home-note">From $199-$299 | Written findings | Practical next steps</p>
</div>
<div class="opshell-hero-image">
<div class="opshell-pulse" role="img" aria-label="Abstract infrastructure pulse illustration">
<div class="opshell-pulse__line opshell-pulse__line--one"></div>
<div class="opshell-pulse__line opshell-pulse__line--two"></div>
<div class="opshell-pulse__line opshell-pulse__line--three"></div>
<div class="opshell-pulse__node opshell-pulse__node--inspect"><i></i><b></b><b></b></div>
<div class="opshell-pulse__node opshell-pulse__node--change"><i></i><b></b><b></b></div>
<div class="opshell-pulse__node opshell-pulse__node--validate"><i></i><b></b><b></b></div>
</div>
</div>
</section>

The complete landing-page element contains additional trust, service, audit workflow, capability, recent-notes, and final-CTA sections. The canonical local source is:

/home/rezriz/github/Wordpress/wp-dev/themes/develop-internally/opshell-child-theme/output/opshell-homepage.html

The hero uses the existing contact destination for its primary CTA:

https://opshell.dev/contact/

The subscription shortcode remains documented separately for newsletter or lead-magnet placements, but it is not used in the current homepage hero.

<div class="opshell-terminal-panel">
  <div class="opshell-prompt-line">
    <span class="opshell-prompt">$</span>
    <span class="opshell-cmd">subscribe --access</span>
  </div>
  <p>Access our essential protected content — download scripts, Ansible playbooks,
  CI/CD templates, cheat sheets, and more.</p>
  <form method="post" action="#" class="opshell-subscribe-form">
    <!-- Honeypot + nonce -->
    <div class="opshell-subscribe-fields">
      <input type="text" name="ops_subscribe_name" placeholder="Your name" required />
      <input type="email" name="ops_subscribe_email" placeholder="your@email.com" required />
      <button type="submit" name="ops_subscribe_submit">Subscribe</button>
    </div>
  </form>
</div>

CSS — Homepage Hero & Landing

Defined in /wp-content/themes/opshell/style.css:

.opshell-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

.opshell-hero-image {
  min-height: 340px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.opshell-pulse {
  position: relative;
  width: min(340px, 74%);
  aspect-ratio: 1;
  opacity: 0.58;
}

.opshell-hero-image::before {
  content: "";
  position: absolute;
  width: min(330px, 76%);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(63,185,80,0.16), rgba(63,185,80,0.04) 48%, transparent 72%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
}

Prompt Line

.opshell-hero__terminal {
  color: var(--ops-text-secondary);
  font-family: var(--ops-font-mono);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.opshell-prompt {
  color: var(--ops-accent-green);
  font-family: var(--ops-font-mono);
}

.opshell-prompt-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ops-font-mono);
  font-size: 0.92rem;
}

.opshell-prompt-line .opshell-prompt {
  color: var(--ops-accent-green);
  font-weight: 700;
  user-select: none;
}

.opshell-prompt-line .opshell-cmd {
  color: var(--ops-text-secondary);
}

Heading

.opshell-hero h1 {
  font-size: clamp(2.8rem, 8vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  margin: 0 0 24px;
  max-width: 850px;
  text-wrap: balance;
}

Key details:

Fluid sizing: clamp() scales the heading from 2.8rem (mobile) to 6.6rem (large desktop)
Tight tracking: -0.06em letter-spacing for a modern, compact look
Balance wrapping: text-wrap: balance prevents orphaned words

Lead Text

.opshell-hero__lead {
  color: var(--ops-text-secondary);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  max-width: 720px;
  margin: 0 0 32px;
}

Legacy Terminal Panel (Form Container)

.opshell-terminal-panel {
  margin: 48px 0;
  padding: 28px;
  background: linear-gradient(180deg, rgba(22,27,34,0.98), rgba(13,17,23,0.98));
  border: 1px solid var(--ops-border);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
}

Property	Value	Effect
`background`	Subtle gradient `#161b22 → #0d1117`	Depth without distraction
`border-radius`	`12px` (slightly larger than `--ops-card-radius`)	Distinguishes from regular cards
`box-shadow`	Deep `0 24px 80px`	Lifts the panel above the page

Form Layout

.opshell-subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opshell-subscribe-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

Note: The actual form uses inline styles for the flex container. If recreating, use:

<div style="display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;">

Form Inputs

.opshell-contact-form .opshell-field input[type="text"],
.opshell-contact-form .opshell-field input[type="email"] {
  background: #010409;
  border: 1px solid var(--ops-border);
  border-radius: 6px;
  color: var(--ops-text);
  font-family: var(--ops-font-mono);
  font-size: 0.95rem;
  padding: 12px 14px;
  transition: border-color var(--ops-transition), box-shadow var(--ops-transition);
}

.opshell-contact-form .opshell-field input[type="text"]:focus,
.opshell-contact-form .opshell-field input[type="email"]:focus {
  background: #010409;
  border-color: var(--ops-accent-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(63,185,80,0.12);
}

The subscribe form uses identical styling via inline styles. This panel is a legacy/secondary pattern and is not part of the current service-led homepage hero.

Background: #010409 (one shade darker than surface for depth)
Border: 1px solid var(--ops-border)
Focus: green border + subtle green glow ring
Font: monospace for terminal consistency

/* Applied as inline styles with !important to override theme defaults */
button.opshell-subscribe-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border: 1px solid var(--ops-accent-green);
  border-radius: 6px;
  background: var(--ops-accent-green) !important;  /* Solid green */
  color: var(--ops-bg) !important;                 /* Dark text for contrast */
  font-family: var(--ops-font-mono);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

button.opshell-subscribe-submit:hover {
  background: #2ea043 !important;  /* Darker green */
}

State	Background	Text	Border
Default	`#3fb950` (green)	`#0d1117` (near-black)	`#3fb950`
Hover	`#2ea043` (darker green)	`#0d1117`	`#2ea043`

The current homepage primary button uses .opshell-home-button--primary; the older opshell-button-ghost class remains for existing non-homepage elements.

Error / Success Messages

.opshell-contact-success {
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--ops-accent-green);
  border-radius: 6px;
  font-family: var(--ops-font-mono);
  font-size: 0.9rem;
  color: var(--ops-accent-green);
  background: rgba(63,185,80,0.06);
}

.opshell-contact-error {
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid var(--ops-danger);
  border-radius: 6px;
  font-family: var(--ops-font-mono);
  font-size: 0.9rem;
  color: var(--ops-danger);
  background: rgba(248,81,73,0.06);
}

Current Visual Layout

┌──────────────────────────────────────────────────────────┐
│  $ opshell --audit                 abstract pulse visual │
│                                                          │
│  Your business runs on servers.                         │
│  We keep them fast, secure, and reliable.                │
│                                                          │
│  [ Start with an Infrastructure Audit ] [ Services ]    │
└──────────────────────────────────────────────────────────┘

Responsive Behavior

Breakpoint	Behavior
> 900px	Two-column hero with the pulse visual on the right
≤ 900px	Pulse visual hidden; hero copy becomes full-width
≤ 640px	CTA buttons become full-width and content padding decreases

Key responsive CSS:

@media (max-width: 768px) {
  .opshell-hero__actions {
    align-items: stretch;
  }
  .opshell-hero h1 {
    font-size: 1.8em;
  }
}

@media (max-width: 640px) {
  .opshell-hero__actions .button {
    flex: 1 1 160px;
    max-width: none;
  }
}

CSS Classes Reference

Class	Element	Purpose
`.opshell-home-hero`	Homepage hero	Two-column service-led hero layout
`.opshell-hero-image`	Visual area	Unboxed, transparent area for CSS pulse
`.opshell-pulse`	Hero visual	Three connected operation nodes
`.opshell-pulse__line`	Signal path	Thin green connection line with optional pulse
`.opshell-pulse__node`	Operation node	Inspect, change, and validate visual stages
`.opshell-command`	Prompt line	Monospace command cue, green `$`
`.opshell-home-hero h1`	Main heading	Fluid sizing, tight letter-spacing
`.opshell-home-hero__lead`	Subtext	Secondary color, fluid sizing
`.opshell-home-button`	CTA button	Accessible service conversion action
`.opshell-prompt`	`$` symbol	Green accent, monospace, bold
`.opshell-prompt-line`	Command line	Flex row, small gap
`.opshell-cmd`	Command text	Secondary color monospace
`.opshell-subscribe-form`	Form element	Flex column
`.opshell-contact-success`	Success message	Green border on dark transparent bg
`.opshell-contact-error`	Error message	Red border on dark transparent bg

Design Decisions

Decision	Rationale
Heading uses `clamp()`	Scales perfectly across all viewports without breakpoints
`text-wrap: balance`	Prevents widows/orphans on multi-line headings
Glow is pseudo-element not background	Keeps markup clean; glow stays behind content via z-stacking
Infrastructure Audit is primary CTA	Provides a lower-risk entry offer for qualified service leads
Pulse visual is CSS-only	Avoids stock imagery, licensing issues, and page weight
Visual is unboxed	Keeps the decorative element from competing with the headline
Circular green glow	Adds depth while remaining subordinate to the copy
Visual hides below `900px`	Mobile and tablet prioritize the headline and CTA
Text remains unchanged during visual iteration	Hero messaging is stable; visual styling can evolve independently

Overview​

GP Element Reference​

Homepage HTML Structure​

CSS — Homepage Hero & Landing​

Prompt Line​

Heading​

Lead Text​

Legacy Terminal Panel (Form Container)​

Form Layout​

Form Inputs​

Subscribe Button​

Error / Success Messages​

Current Visual Layout​

Responsive Behavior​

CSS Classes Reference​

Design Decisions​