Hero Section — Terminal Command Subscribe

Overview

The hero section (GP Element ID 9579) is a terminal-themed landing hero that replaces the original "Explore Linux" and "Services" buttons with an email subscription form. It serves as the primary lead magnet capture point on the front page.

GP Element Reference

Property	Value
Post ID	`9579`
Title	Opshell Homepage Hero - Access Subscribe
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`

HTML Structure

The full HTML content stored in the GP Element:

<section class="opshell-landing">
<div class="opshell-hero">
<div class="opshell-hero__terminal"><span class="opshell-prompt">$</span> opshell --mission</div>
<h1>Build, automate, and operate from the terminal.</h1>
<p class="opshell-hero__lead">Practical Linux, CLI, automation, DevOps, AI, and code workflows
for builders who prefer the shell.</p>
[opshell_subscribe type="terminal"]
</div>
</section>

The [opshell_subscribe type="terminal"] shortcode renders the subscription panel:

<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 — Hero & Landing

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

.opshell-landing {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 20px 64px;
}

.opshell-hero {
  position: relative;
  padding: clamp(32px, 5vw, 72px) 0;
  border-bottom: 1px solid var(--ops-border);
}

/* Green gradient glow — top-left corner only */
.opshell-hero::before {
  content: "";
  position: absolute;
  inset: 24px auto auto 0;
  width: min(640px, 100%);
  height: 280px;
  background:
    radial-gradient(circle at 20% 20%, rgba(63,185,80,0.18), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(63,185,80,0.14), transparent 40%);
  filter: blur(6px);
  pointer-events: none;
}

.opshell-hero > * {
  position: relative; /* Stack above the glow */
}

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;
}

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:

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`

This matches the "Services" button (opshell-button-ghost) styling from the original hero.

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);
}

Visual Layout

┌──────────────────────────────────────────────────────────┐
│  $ opshell --mission                                     │
│                                                          │
│  Build, automate, and operate from the terminal.         │
│  Practical Linux, CLI, automation, DevOps, AI, and code  │
│  workflows for builders who prefer the shell.            │
│                                                          │
│  ┌───────────────────────────────────────────────────┐   │
│  │  $ subscribe --access                             │   │
│  │  Access our essential protected content —         │   │
│  │  download scripts, Ansible playbooks, CI/CD       │   │
│  │  templates, cheat sheets, and more.               │   │
│  │                                                   │   │
│  │  ┌──────────────┐ ┌──────────────────┐ ┌───────┐  │   │
│  │  │  Your name   │ │  your@email.com   │ │ Sub  │  │   │
│  │  └──────────────┘ └──────────────────┘ └───────┘  │   │
│  └───────────────────────────────────────────────────┘   │
└──────────────────────────────────────────────────────────┘

Responsive Behavior

Breakpoint	Behavior
> 1024px	Full layout: heading at 6.6rem, form row inline
768–1024px	Heading scales down, form fields remain inline
< 768px	Heading shrinks to 2.8rem, form fields stack vertically (flex-wrap)
< 640px	Form inputs go full-width, button stretches

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-landing`	Outer wrapper	Max-width 1180px container, centered
`.opshell-hero`	Hero block	Relative positioning, bottom border, glow pseudo-element
`.opshell-hero::before`	Pseudo	Green radial gradient glow (top-left)
`.opshell-hero__terminal`	Prompt line	Monospace secondary text, green `$`
`.opshell-hero h1`	Main heading	Fluid clamp sizing, tight letter-spacing
`.opshell-hero__lead`	Subtext	Secondary color, fluid sizing
`.opshell-terminal-panel`	Form card	Gradient background, deep shadow, rounded
`.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
Form panel uses gradient background	Subtly separates it from the hero without a hard border
Button is solid green (not outline)	Higher contrast and conversion — matches "Services" button which was the primary CTA
Fields use `#010409` background	One level deeper than surface creates visual input field depth
No placeholder animations	Terminal aesthetic is static and functional, not playful

Overview​

GP Element Reference​

HTML Structure​

CSS — Hero & Landing​

Prompt Line​

Heading​

Lead Text​

Terminal Panel (Form Container)​

Form Layout​

Form Inputs​

Subscribe Button​

Error / Success Messages​

Visual Layout​

Responsive Behavior​

CSS Classes Reference​

Design Decisions​