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  .opshell-landing, .opshell-hero (hero section)
610–642  .opshell-hero::before (green glow)
643–676  .opshell-hero__terminal, .opshell-hero h1, .opshell-hero__lead
677–707  .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–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 CSS (lines 581–753) covers the hero landing section, terminal panels, and hero actions:

/* === 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

@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​

editor-style.css — Full Source​

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

editor-style.css — Full Source