Single-column responsive layout with standardized spacing and scaling

A unified layout system for content pages using single-column card stacks. Replaces inconsistent container patterns with a standardized, scalable approach that works across all page types (fundamentals, applications, services, content).

Core principle: Single column, max-width constrained, cards with 1rem gap, responsive scaling.

Max-width: 960px (CSS custom property: --max-width)

Chosen for clean divisibility: ÷2=480px, ÷3=320px, ÷4=240px, ÷6=160px. Provides enough horizontal breathing room without excessive whitespace on desktop screens.

Padding: 25px on each side (horizontal), creating an effective card width of 910px within the 960px container.

The layout system relies on site-wide CSS custom properties defined in :root:

• --max-width: 960px
• --spacing-sm: 0.5rem
• --spacing-md: 1rem
• --spacing-lg: 1.5rem
• --color-gray: #d0d0d0
• --card-bg: #4a4a4a
• --card-border: #555555

Use these variables consistently across all components to maintain visual cohesion and enable global theme adjustments.

Container for stacking cards vertically. Applied to the outer wrapper around all cards.

Key properties:

• display: flex; flex-direction: column
• gap: 1rem (space between cards)
• max-width: var(--max-width)
• margin: 0 auto (center container)
• padding: 0 25px (horizontal padding)
• width: 100% (responsive)

Individual card styling. Dark background with subtle borders, applied to each content block.

Key properties:

• background-color: #4a4a4a (dark gray)
• border: 1px solid #555555 (gray only)
• border-radius: 4px
• padding: 2rem
• margin: 0 (no external spacing)
• transition: all 0.3s ease (smooth hover)

Hover state: Subtle blue shadow (0 4px 12px rgba(37, 99, 235, 0.1)), border color unchanged.

Optional header section within cards, with subtle background to differentiate from body content.

Key properties:

• margin: -2rem -2rem 1.5rem -2rem (negative to touch card edges)
• padding: 1rem 1.5rem
• background-color: rgba(85, 85, 85, 0.3) (slight overlay)
• NO border-bottom (clean header)

H3 styling: margin: 0, color: #0099FF (electric blue), font-size: 1.25rem

Main content area within cards. Flex: 1 ensures body expands to fill available space when footer is present.

Paragraph styling: margin-bottom: var(--spacing-lg), color: var(--color-gray), removes bottom margin on last paragraph.

Use semantic HTML (p, ul, ol, blockquote) within card-body. All text inherits gray color for consistency.

Optional footer section for links, calls-to-action, or metadata. Visually separated from body by a top border.

Key properties:

• margin-top: var(--spacing-lg)
• padding-top: var(--spacing-lg)
• border-top: 1px solid #555555
• display: flex; gap: var(--spacing-sm); flex-wrap: wrap

Link styling: color: #ffffff, text-decoration: underline, font-size: 0.9rem. Hover: black text, gold background (#FFBF00).

Media query: @media (max-width: 768px)

Changes: Reduce horizontal padding to 15px. Cards and headers remain unchanged. Stack footer links flexibly.

Effective card width at tablet: ~738px (768 - 30px padding). Still comfortably readable, maintains visual hierarchy.

Media query: @media (max-width: 480px)

Changes:

• Padding: 12px (minimal horizontal)
• Card padding: var(--spacing-sm) (1rem reduced)
• Card-header margin: -1rem -1rem 1rem -1rem
• Card-header padding: 0.75rem 1rem
• Footer: flex-direction: column; links display: block

Effective card width: ~456px. Optimal for mobile reading without horizontal scroll.

Pages under /src/fundamentals/ (e.g., business-equation.php, engagement.php) use card-column to present framework content in digestible sections.

Structure: Each section (overview, key concepts, applications, related links) becomes a separate card with optional header.

Cards allow readers to scan quickly and engage with sections of interest without overwhelming page length.

Application pages (Community, Intelligence, Conversation, etc.) use card-column to separate feature descriptions, use cases, and calls-to-action.

Structure: Overview card, feature cards, integration card, footer with links to related resources.

Consistent layout across all applications makes navigation intuitive.

Service overview pages and detail pages use card-column to structure offerings, case studies, and engagement information.

Structure: Service description, deliverables, outcomes, testimonial card, call-to-action footer.

Cards make service complexity more approachable.

Pages like about.php, knowledge hub, and documentation use card-column for modular content presentation.

Structure: Introductory card, thematic sections, related links, footer navigation.

Modular approach supports content updates without layout refactoring.

File: /src/fundamentals/business-equation.php

Card structure:

• Card 1: Overview with header
• Card 2: Key concept definition
• Card 3: Visual representation or formula
• Card 4: Real-world applications
• Card 5: Related fundamentals (with footer links)

Readers can skim cards or dive deep into any section. Consistent visual structure across fundamentals pages.

File: /src/applications/community.php

Card structure:

• Card 1: Application overview with header
• Card 2: Core features
• Card 3: How it works (with diagram or steps)
• Card 4: Use cases or examples
• Card 5: Integration with other apps
• Card 6: Call-to-action (with footer links)

Modular structure allows feature cards to be added/removed without layout breakage.

File: /src/services/index.php

Card structure:

• Card 1: Services intro with header
• Card 2: Service 1 summary with link
• Card 3: Service 2 summary with link
• Card 4: Service 3 summary with link
• Card 5: Engagement CTA (with footer)

Consistent services listing across site. Easy to add new services by adding a card.

No conflicts: The card-column layout system is additive. Existing grid layouts (.component-grid, .component-grid-two) remain unchanged and can coexist with card-column layouts on the same page.

Include pattern: Pages using card-column should include header.php and load-johnism.php as normal, then wrap content in <div class="card-column">.

CSS precedence: Card-column styles have low specificity and won't interfere with page-specific styles. Override as needed.

Before deploying card-column layout to a page:

• ☐ Verify johnism displays above card stack with correct styling
• ☐ Test responsive breakpoints (768px, 480px) in browser DevTools
• ☐ Check that card hover transitions are smooth (no jank)
• ☐ Verify all links in card-footer have correct hover state (gold bg, black text)
• ☐ Confirm card widths scale correctly on mobile without horizontal scroll
• ☐ Test with long content (verify footer stays at bottom, body expands)
• ☐ Clear SuperCache after upload and do hard refresh

Immediate: Apply card-column layout to content pages (fundamentals, applications, services).

Short term: Migrate existing inconsistent layouts to card-column for visual consistency.

Ongoing: New pages should default to card-column unless there's a specific reason to use an alternative layout.

Future: Consider adding optional "card-grid" variant for multi-column layouts if needed (e.g., gallery views).