Theme CSS Reference

File Locations

File	Server Path	Lines
`style.css`	`/home/wp_opshell_dev/sites/opshell.dev/wp-content/themes/opshell/style.css`	1750
`editor-style.css`	`/home/wp_opshell_dev/sites/opshell.dev/wp-content/themes/opshell/editor-style.css`	37

style.css — Section Map

Lines     Section
─────     ───────
  1–12    Theme header (name, URI, description, license)
 13–46    :root CSS variables (colors, fonts, spacing)
 47–60    .opshell-theme base overrides
 61–71    Link styles & focus‑visible accessibility
 73–82    .site-header (sticky nav with backdrop‑filter)
 83–99    Navigation: .main-navigation, mobile breakpoint
100–116   Site branding: .main-title, logo, .site-description
117–176  Dropdown menus: .main-nav ul ul
177–181  .site-content
182–190  Logo ::before pseudo‑element
191–216  .inside-article, .page-header, .sidebar, .entry-*
217–220  Headings h1–h6
221–238  Buttons: button, .button, :hover/:focus/:active
239–286  Inputs: text, email, url, password, search, textarea, :focus
287–306  Footer: .site-footer
307–413  Tables: .opshell-table, .wp-block-table, .entry-content table
414–428  .opshell-header (centered page header)
429–520  .opshell-card-grid, .opshell-card (resource cards)
521–531  .opshell-cta (centered call‑to‑action block)
532–546  .opshell-featured
547–560  .opshell-newsletter (old newsletter component)
561–580  Responsive: card grid, header, newsletter (<768px)
581–609  Legacy .opshell-landing, .opshell-hero (service/page hero pattern)
610–642  Legacy .opshell-hero::before (green glow)
643–676  Legacy .opshell-hero__terminal, .opshell-hero h1, .opshell-hero__lead
677–707  Legacy .opshell-hero__actions (button row)
708–717  Button variants: .opshell-button-secondary, .opshell-button-ghost
718–729  .opshell-section, .opshell-section__header
730–745  .opshell-terminal-panel (form container)
746–753  .opshell-newsletter__form
754–817  Greenshift blocks: .gb-element-*, .gb-text-*
818–857  More Greenshift overrides
858–900  Single post layout: .single-post .site-content, .opshell-post-hero
901–1053 Single post: .opshell-post-kicker, meta, hero h1, content typography
1054–1130 Single post: code blocks, blockquotes, images
1131–1170 Single post responsive (<768px)
1171–1200 Element wrappers: .opshell-element-wrap, .opshell-element-section
1201–1230 .opshell-element-footer
1231–1295 Link/thumbnail hover effects
1296–1810 Homepage conversion layout, Infrastructure Pulse, responsive rules
1296–1345 Loop cards: .opshell-loop-card, .opshell-read-more
1346–1390 Single template: .opshell-single-template
1391–1425 .opshell-element-titlebar, .opshell-prompt-line
1426–1460 .opshell-breadcrumb, .opshell-utility-page
1461–1495 Archive/blog/search page headers
1496–1530 Search results layout: .search-no-results, .search-form
1531–1570 Terminal‑style pagination: .paging-navigation
1571–1610 "View All" buttons: .gb-button-*
1611–1640 Page‑specific overrides: .page-id-9456 (contact page)
1641–1690 Contact form: .opshell-contact-panel, .opshell-contact-form
1691–1730 Contact form fields, textarea, submit button
1731–1750 Contact form success/error messages

Key CSS Variables

:root {
  --ops-bg: #0d1117;
  --ops-surface: #161b22;
  --ops-surface-hover: #1c2333;
  --ops-border: #30363d;
  --ops-text: #c9d1d9;
  --ops-text-secondary: #8b949e;
  --ops-accent-green: #3fb950;
  --accent: var(--ops-accent-green);
  --ops-danger: #f85149;
  --ops-warning: #d29922;
  --ops-header-bg: #0d1117;
  --ops-footer-bg: #0d1117;
  --ops-sidebar-bg: #161b22;
  --ops-container-width: 1200px;
  --ops-card-radius: 8px;
  --ops-font-mono: "JetBrains Mono", "Ubuntu Mono", monospace;
  --ops-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ops-transition: 0.15s ease;
}

Hero & Terminal Components

The following earlier CSS covers the reusable service/page hero pattern, legacy terminal panels, and hero actions. The current homepage-specific CSS is added later in the stylesheet and is documented in Homepage Hero Section.

/* === HERO LANDING (lines 581–609) === */
.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 (lines 610–642) */
.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;
}

/* Terminal prompt, heading, lead (lines 643–676) */
.opshell-hero__terminal {
  color: var(--ops-text-secondary);
  font-family: var(--ops-font-mono);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

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

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

/* Actions / button row (lines 677–707) */
.opshell-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.opshell-hero__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 148px;
  max-width: max-content;
  white-space: nowrap;
}

/* Button variants (lines 708–717) */
.opshell-button-secondary {
  background-color: var(--ops-surface) !important;
  border: 1px solid var(--ops-border) !important;
  color: var(--ops-text) !important;
}

.opshell-button-ghost {
  background-color: transparent !important;
  border: 1px solid var(--ops-border) !important;
  color: var(--ops-text) !important;
  box-shadow: none;
}

/* Green "Services" button (lines 718–729) */
.opshell-hero__actions .opshell-button-ghost {
  background-color: var(--ops-accent-green) !important;
  border-color: var(--ops-accent-green) !important;
  color: var(--ops-bg) !important;
}

.opshell-hero__actions .opshell-button-ghost:hover,
.opshell-hero__actions .opshell-button-ghost:active,
.opshell-hero__actions .opshell-button-ghost:focus {
  background-color: #2ea043 !important;
  border-color: #2ea043 !important;
  color: var(--ops-bg) !important;
}

/* Terminal panel (form container, lines 730–745) */
.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);
}

/* Prompt line */
.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);
}

.site-header {
  background: rgba(13,17,23,0.92) !important;
  border-bottom: 1px solid var(--ops-border);
  backdrop-filter: blur(10px);
}

.main-navigation {
  background-color: var(--ops-header-bg) !important;
}

.main-navigation .main-nav ul li a {
  color: var(--ops-text) !important;
}
.main-navigation .main-nav ul li:hover > a {
  color: var(--ops-accent-green) !important;
}
.main-navigation .main-nav ul li.current-menu-item a {
  color: var(--ops-accent-green) !important;
}

.main-navigation .main-nav ul ul {
  background: var(--ops-surface) !important;
  border: 1px solid var(--ops-border);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  min-width: 280px;
  padding: 6px 0;
}

Buttons — Base Theme Styles

button, .button, input[type="submit"] {
  background-color: var(--ops-surface) !important;
  color: var(--ops-text) !important;
  font-weight: 600;
  border: 1px solid var(--ops-border);
  border-radius: 6px;
  padding: 12px 24px;
  transition: background-color var(--ops-transition), border-color var(--ops-transition), transform var(--ops-transition);
}

button:hover, .button:hover,
button:active, .button:active,
button:focus, .button:focus {
  background-color: var(--ops-accent-green) !important;
  border-color: var(--ops-accent-green) !important;
  color: #0d1117 !important;
  transform: translateY(-1px);
}

Note: The subscribe button overrides these with inline !important styles to always show solid green (see hero-section).

Form Inputs

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], textarea {
  background-color: var(--ops-surface);
  border: 1px solid var(--ops-border);
  color: var(--ops-text);
  border-radius: 6px;
}

input:focus, textarea:focus {
  border-color: var(--ops-accent-green);
  outline: none;
  box-shadow: 0 0 0 3px rgba(63,185,80,0.15);
}

.opshell-contact-panel {
  max-width: 850px;
  margin: 0;
}

.opshell-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.opshell-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opshell-field label {
  font-family: var(--ops-font-mono);
  font-size: 0.88rem;
  color: var(--ops-text-secondary);
}

.opshell-contact-form .opshell-field input[type="text"],
.opshell-contact-form .opshell-field input[type="email"],
.opshell-contact-form .opshell-field textarea {
  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), background-color var(--ops-transition);
}

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

.opshell-contact-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border: 1px solid var(--ops-accent-green);
  border-radius: 6px;
  background: transparent;
  color: var(--ops-accent-green);
  font-family: var(--ops-font-mono);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--ops-transition), border-color var(--ops-transition), transform var(--ops-transition);
}

.opshell-contact-submit:hover,
.opshell-contact-submit:focus {
  background: rgba(63,185,80,0.1);
  border-color: var(--ops-accent-green);
  transform: translateY(-1px);
}

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

Responsive Breakpoints

Fluid Article Typography

The single-post article body uses a shared fluid type scale in the Opshell child theme's :root tokens. clamp() supplies a minimum for small screens, a viewport responsive middle value, and a maximum for wide screens. Keep component rules referencing these tokens rather than adding unrelated fixed rem sizes.

:root {
  --ops-type-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --ops-type-h2: clamp(1.45rem, 1.25rem + 0.72vw, 1.8rem);
  --ops-type-h3: clamp(1.3rem, 1.15rem + 0.5vw, 1.55rem);
  --ops-type-h4: clamp(1.15rem, 1.05rem + 0.32vw, 1.3rem);
  --ops-type-h5: clamp(1.05rem, 0.98rem + 0.22vw, 1.15rem);
  --ops-type-h6: clamp(1rem, 0.95rem + 0.16vw, 1.08rem);
  --ops-type-code: clamp(0.84rem, 0.8rem + 0.12vw, 0.94rem);
}

.single-post .entry-content { font-size: var(--ops-type-body); }
.single-post .entry-content h2 { font-size: var(--ops-type-h2); }
.single-post .entry-content h3 { font-size: var(--ops-type-h3); }
.single-post .entry-content h4 { font-size: var(--ops-type-h4); }
.single-post .entry-content h5 { font-size: var(--ops-type-h5); }
.single-post .entry-content h6 { font-size: var(--ops-type-h6); }

Typography is scoped to single-post article content. The post hero H1 retains its own existing fluid scale; body headings start at H2 because the post title is the single H1. The article's H2–H6 scale descends fluidly to keep section headings readable without overpowering the article text. Tables scroll horizontally when needed; code blocks retain monospace styling and a separate fluid code-size token.

Scrollable article tables use the Opshell dark surface for the horizontal scrollbar track, a muted thumb, and a clearer thumb on hover. Scope the styling to .single-post .entry-content .wp-block-table so unrelated page scrollbars retain their native appearance.

@media (max-width: 1024px) {
  .opshell-section__header { display: block; }
}

@media (max-width: 768px) {
  .inside-header { padding: 8px 18px; }
  .main-navigation .main-nav ul li a { line-height: 48px; }
  .opshell-card-grid { grid-template-columns: 1fr; }
  .opshell-header h1 { font-size: 1.8em; }
  .opshell-newsletter input[type="email"] { width: 100%; }
  .opshell-newsletter .button { margin-left: 0; }
  .separate-containers .inside-article { padding: 16px; }
  .single-post .site-content { padding: 24px 16px 52px; }
  .opshell-element-footer__inner { display: block; }
}

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

editor-style.css — Full Source

This file styles the WordPress block editor to match the front-end dark theme:

:root {
  --ops-bg: #0d1117;
  --ops-surface: #161b22;
  --ops-border: #30363d;
  --ops-text: #c9d1d9;
  --ops-text-secondary: #8b949e;
  --ops-accent-green: #3fb950;
  --ops-accent-cyan: #58a6ff;
  --ops-accent-purple: #d2a8ff;
  --ops-font-mono: "JetBrains Mono", "Ubuntu Mono", monospace;
  --ops-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.editor-styles-wrapper {
  background: var(--ops-bg);
  color: var(--ops-text);
  font-family: var(--ops-font-body);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  color: var(--ops-text);
}

.editor-styles-wrapper p,
.editor-styles-wrapper li {
  color: var(--ops-text-secondary);
}

.editor-styles-wrapper pre,
.editor-styles-wrapper code {
  font-family: var(--ops-font-mono);
}

.editor-styles-wrapper pre {
  background: #010409;
  border: 1px solid var(--ops-border);
  border-radius: 8px;
  color: var(--ops-text);
  padding: 18px;
}

File Locations​

style.css — Section Map​

Key CSS Variables​

Hero & Terminal Components​

Navigation​

Buttons — Base Theme Styles​

Form Inputs​

Contact & Subscribe Form Specific Styles​

Responsive Breakpoints​

Fluid Article Typography​

editor-style.css — Full Source​