Cyberpunk Theme Quick Reference

Cyberpunk Theme Quick Reference

CSS Classes to Use

Layout Classes

<!-- Card with hover effects -->
<div class="card">
  <h3>Card Title</h3>
  <p>Card content...</p>
</div>

<!-- Grid layout for cards -->
<section class="card-grid">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</section>

<!-- Circuit board background -->
<section class="circuit-bg">
  <!-- Content -->
</section>

<!-- Animated section divider -->
<div class="section-divider"></div>

Text & Effects

<!-- Neon glow text -->
<h1 class="neon-glow">Glowing Headline</h1>

<!-- Blue-tinted emoji -->
<span class="emoji-cyber">🚀</span>

<!-- Chip/tag -->
<span class="chip">New</span>

Buttons

<!-- Primary button (neon glow) -->
<a href="/path/" class="btn btn-primary">Primary Action</a>

<!-- Secondary button (transparent with border) -->
<a href="/path/" class="btn">Secondary Action</a>

CSS Variables Reference

Quick Color Palette

/* Backgrounds */
--bg-primary: #0A0A1A     /* Main dark background */
--bg-secondary: #1A1A2E   /* Cards, header */
--bg-tertiary: #16213E    /* Alternative sections */

/* Text */
--text-primary: #FFFFFF    /* Bright white */
--text-secondary: #E0E0FF  /* Cool light gray */
--text-muted: #A0A0C0      /* Muted text */

/* Accents */
--accent-neon: #00FFFF     /* Neon cyan (primary) */
--accent-blue: #007ACC     /* Electric blue */
--accent-electric: #00BFFF /* Bright blue */

/* Effects */
--glow-cyan: rgba(0, 255, 255, 0.4)
--glow-blue: rgba(0, 122, 204, 0.4)

Using Variables

.my-element {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--accent-blue);
  box-shadow: 0 0 20px var(--glow-cyan);
}

Common Patterns

Hero Section

<section class="hero circuit-bg" style="padding: 6rem 2rem; text-align: center; position: relative;">
  <div style="max-width: 900px; margin: 0 auto; position: relative; z-index: 2;">
    <h1 class="neon-glow">Hero Title</h1>
    <p style="color: var(--text-secondary);">Hero description</p>
    <a href="/action/" class="btn btn-primary">Call to Action</a>
  </div>
</section>

Content Section with Glow Box

<section style="padding: 6rem 2rem;">
  <div style="max-width: 900px; margin: 0 auto;">
    <h2 style="color: var(--accent-neon);">Section Title</h2>
    
    <!-- Glowing callout box -->
    <div style="background: rgba(0, 122, 204, 0.1); 
                padding: 2.5rem; 
                border-radius: 12px; 
                border: 1px solid rgba(0, 255, 255, 0.3); 
                box-shadow: 0 0 30px rgba(0, 122, 204, 0.3);">
      <p style="color: var(--text-secondary);">
        <strong style="color: var(--accent-neon);">Highlighted text</strong> 
        Regular content text.
      </p>
    </div>
  </div>
</section>

Feature Cards Grid

<section style="padding: 4rem 2rem; max-width: 1200px; margin: 0 auto;">
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
    
    <div class="card">
      <h3 style="color: var(--accent-electric); margin-bottom: 1rem;">
        <span class="emoji-cyber">🔥</span> Feature One
      </h3>
      <p style="color: var(--text-secondary);">Feature description...</p>
      <a href="/link/" style="color: var(--accent-neon); font-weight: 600;">Learn More →</a>
    </div>
    
    <div class="card">
      <h3 style="color: var(--accent-electric); margin-bottom: 1rem;">
        <span class="emoji-cyber">⚡</span> Feature Two
      </h3>
      <p style="color: var(--text-secondary);">Feature description...</p>
      <a href="/link/" style="color: var(--accent-neon); font-weight: 600;">Learn More →</a>
    </div>
    
  </div>
</section>

Typography Scale

/* Headings (automatically styled) */
h1 { /* clamp(2rem, 5vw, 4rem) - Cyan with glow */ }
h2 { /* clamp(1.75rem, 4vw, 2.5rem) - Electric blue with glow */ }
h3 { /* clamp(1.25rem, 3vw, 1.75rem) - Electric blue */ }

/* Body text */
p { /* 1.1rem, line-height: 1.7, color: --text-secondary */ }

/* Strong text */
strong { /* color: --text-primary, weight: 600 */ }

Inline Styles Patterns

Emphasized Text

<p style="color: var(--text-secondary);">
  Regular text with <strong style="color: var(--accent-neon);">neon highlight</strong>
</p>

Bordered Content Block

<div style="padding-left: 2rem; 
            border-left: 4px solid var(--accent-blue); 
            background: rgba(0, 122, 204, 0.05);">
  <p><strong style="color: var(--accent-electric);">Key point</strong> explanation</p>
</div>

CTA Section

<div style="text-align: center; 
            padding: 3rem 2rem; 
            background: linear-gradient(135deg, rgba(0, 122, 204, 0.3) 0%, rgba(0, 191, 255, 0.2) 100%);
            border-radius: 12px; 
            border: 1px solid rgba(0, 255, 255, 0.3); 
            box-shadow: 0 0 40px rgba(0, 122, 204, 0.4);">
  <h2 style="color: var(--accent-neon); text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);">
    Call to Action
  </h2>
  <p style="color: var(--text-secondary);">Supporting text</p>
  <a href="/action/" class="btn btn-primary">Take Action →</a>
</div>

Responsive Utilities

Mobile-First Approach

<style>
  .my-section {
    padding: 2rem 1rem; /* Mobile */
  }
  
  @media (min-width: 768px) {
    .my-section {
      padding: 4rem 2rem; /* Tablet+ */
    }
  }
  
  @media (min-width: 1024px) {
    .my-section {
      padding: 6rem 2rem; /* Desktop */
    }
  }
</style>

Animation Classes

Fade In on Scroll (automatic via JS)

Elements with these classes will automatically fade in when scrolled into view:

  • .card
  • section

Manual Animations

<!-- Bounce -->
<div style="animation: bounce 2s infinite;">↓</div>

<!-- Pulse -->
<img style="animation: pulse 3s ease-in-out infinite;" src="..." alt="...">

<!-- Fade In Up -->
<div style="animation: fadeInUp 1s ease-out;">Content</div>

Common Glow Effects

Text Shadow Glow

text-shadow: 0 0 10px var(--glow-cyan), 0 0 20px var(--glow-cyan);

Box Shadow Glow

box-shadow: 0 0 20px var(--glow-blue), inset 0 0 10px var(--glow-blue);

Drop Shadow Glow (for images/icons)

filter: drop-shadow(0 0 15px var(--accent-neon));

Best Practices

✅ DO

  • Use CSS variables for colors
  • Apply .card class for consistent card styling
  • Use .emoji-cyber for emoji blue-tinting
  • Include .neon-glow on important headings
  • Add .circuit-bg to hero sections
  • Use .section-divider between major sections
  • Wrap content in max-width containers (900-1200px)

❌ DON’T

  • Hardcode colors (use variables instead)
  • Overuse glow effects (can be overwhelming)
  • Add too many animations (performance impact)
  • Forget responsive considerations
  • Skip accessibility (contrast, focus states)

Testing Checklist

  • Check contrast ratios (WebAIM Contrast Checker)
  • Test keyboard navigation (Tab, Enter)
  • Verify on mobile (320px width)
  • Test on tablet (768px width)
  • Check animations on slower devices
  • Validate with screen reader
  • Test in multiple browsers (Chrome, Firefox, Safari)

Quick Wins

Instant Cyberpunk-ify Any Section

<section class="circuit-bg" style="background: rgba(26, 26, 46, 0.5); padding: 6rem 2rem;">
  <div style="max-width: 900px; margin: 0 auto;">
    <h2 style="color: var(--accent-neon); text-shadow: 0 0 20px var(--glow-cyan);">
      Section Title
    </h2>
    <!-- Content -->
  </div>
</section>
<div class="section-divider"></div>

Instant Glow Button

<a href="/path/" class="btn btn-primary">Action</a>

Instant Feature Card

<div class="card">
  <h3 style="color: var(--accent-electric);">
    <span class="emoji-cyber">🚀</span> Title
  </h3>
  <p style="color: var(--text-secondary);">Description</p>
</div>

Need Help?

CSS File: /assets/css/main.css
JS File: /assets/js/cyberpunk.js
Full Documentation: CYBERPUNK-THEME-IMPLEMENTATION.md

Color Palette at a Glance:

  • Dark: #0A0A1A, #1A1A2E, #16213E
  • Neon: #00FFFF, #007ACC, #00BFFF
  • Text: #FFFFFF, #E0E0FF, #A0A0C0