Library	Bundle Size	Icons	Server Components	Notes
react-icons	Tree-shakes well	30,000+ (FA, Material, Feather, etc.)	✅ Yes	Most popular, includes FontAwesome icons
lucide-react	Very small (~24kb)	1,400+	✅ Yes	Clean, consistent design. Used by shadcn/ui
@heroicons/react	Small	450+	✅ Yes	From Tailwind team, solid/outline variants
@phosphor-icons/react	Medium	6,000+	✅ Yes	6 weights per icon (thin to fill)
tabler-icons-react	Medium	4,000+	✅ Yes	Consistent stroke width, open source

Component	Type	Reason
PhantomLayout	Server	Static structure
PhantomHeader	Server	Static logo/nav shell
PhantomMenu	Client	State for open/close
PhantomFooter	Server	Static content
PreloadHandler	Client	DOM manipulation
TilesGrid	Server	Static content
Tile	Server	Static content

Component	Type	Reason
SiteLayout	Server	Static structure
SiteHeader	Server	Static logo/nav shell
SiteMenu	Client	State for open/close
SiteFooter	Server	Static content
PreloadHandler	Client	DOM manipulation
TilesGrid	Server	Static content
Tile	Server	Static content

Session 31: website design template

36 files modified

eslint.config.js

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  // Global ignores
  {
    ignores: ['**/node_modules/**', '**/dist/**', '**/coverage/**', '**/.turbo/**'],
  },
  // Base ESLint recommended config
  eslint.configs.recommended,
  // TypeScript-ESLint recommended configs
  ...tseslint.configs.recommendedTypeChecked,
  ...tseslint.configs.strict,
  // Main configuration
  {
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        ecmaVersion: 2022,
        sourceType: 'module',
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    plugins: {
      '@typescript-eslint': tseslint.plugin,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
        },
      ],
      '@typescript-eslint/explicit-function-return-type': [
        'error',
        {
          allowExpressions: true,
          allowTypedFunctionExpressions: true,
        },
      ],
      '@typescript-eslint/no-explicit-any': 'error',
      '@typescript-eslint/no-non-null-assertion': 'error',
      '@typescript-eslint/strict-boolean-expressions': 'off',
      'no-console': [
        'warn',
        {
          allow: ['warn', 'error'],
        },
      ],
    },
  },
  // Disable type-checking for config files
  {
    files: ['**/*.config.js', '**/*.config.mjs'],
    ...tseslint.configs.disableTypeChecked,
  }
);

packages/cwc-website/CLAUDE.md

2 versions

Version 1

cwc-website Package

Public-facing Next.js 15 web application with App Router and React 19 Server Components.

Critical Rules

Server Components by Default (SEO)

All pages must be Server Components unless they require interactivity. This is non-negotiable for SEO.

// ✅ Server Component (default) - data fetching, no 'use client'
export default async function SessionPage({ params }: Props) {
  const session = await fetchSession(params.sessionId);
  return <SessionViewer session={session} />;
}

// ✅ Client Component - only when interactivity needed
'use client';
export function CollapsibleSection({ children }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  // ...
}

Build Requirement

Production builds require NODE_ENV=production:

NODE_ENV=production pnpm website build  # ✅ Works
pnpm website build                       # ❌ Fails with Html import error

Path Alias

Use @/* for imports from src/:

import { SessionViewer } from '@/components/session/SessionViewer';
import { cwcStorageClient } from '@/lib/cwc-storage-client';

Template System Architecture

Route Groups

The app uses Next.js route groups to separate concerns:

(site) - Marketing/public pages (landing, about, privacy, login)
(app) - Authenticated app pages (projects, sessions) - future

Route groups use parentheses and don't affect URLs (/about not /(site)/about).

Template Organization

Templates live in src/templates/ with generic names for easy swapping:

templates/site/ - Template for the (site) route group
templates/app/ - Template for the (app) route group (future)

Naming convention: Use generic names like SiteLayout, SiteHeader, not template-specific names like PhantomLayout.

Component Categories

Category	Location	Purpose
Template components	`templates/site/components/`	Layout structure (header, footer, menu)
Content components	`components/content/`	Page content (tiles, page headers)
UI components	`components/ui/`	Reusable primitives (buttons, icons)

Server vs Client Split for Templates

Component	Type	Reason
SiteLayout	Server	Static wrapper structure
SiteHeader	Server	Static logo/nav shell
SiteMenu	Client	State for open/close
SiteFooter	Server	Static content
PreloadHandler	Client	DOM manipulation on mount
MenuToggle	Client	Click handler for menu
TilesGrid, Tile	Server	Static content
PageHeader	Server	Static content

Menu State Management

Menu state is managed via React Context (replacing jQuery):

// templates/site/hooks/useMenu.tsx
'use client';
export function MenuProvider({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  // Syncs to body class 'is-menu-visible' for CSS
  // Closes on Escape key
}

export function useMenu() {
  return useContext(MenuContext); // { isOpen, toggle, open, close }
}

debugUi Prop Pattern

All content and template components support a debugUi?: boolean prop for development visualization:

Content components (red outline): Use debug-ui class
Template components (orange outline): Use debug-ui-template class
Shows component name via data-component attribute tooltip

// In page or layout file
const debugUi = true; // Toggle for development

<PageHeader title="..." debugUi={debugUi} />
<Tile title="..." debugUi={debugUi} />

File/Component Conventions

Directory Structure

src/
  app/                          # Next.js App Router
    layout.tsx                  # Root layout (fonts, global styles)
    globals.scss                # Global SCSS imports
    not-found.tsx               # 404 page
    (site)/                     # Route group: marketing pages
      layout.tsx                # Uses SiteLayout from templates
      page.tsx                  # Landing page (/)
    (app)/                      # Route group: authenticated app (future)
      layout.tsx                # Uses AppLayout from templates
  templates/
    site/                       # Template for (site) route group
      styles/                   # SCSS partials
        main.scss               # Entry point
        _variables.scss         # CSS custom properties
        _base.scss              # Reset, typography
        _components.scss        # Tiles, buttons, debug UI
        _layout.scss            # Header, menu, footer
      components/               # Template components
        SiteLayout.tsx          # Main wrapper
        SiteHeader.tsx          # Header with logo
        SiteMenu.tsx            # Off-canvas menu (Client)
        SiteFooter.tsx          # Footer
        MenuToggle.tsx          # Menu button (Client)
        PreloadHandler.tsx      # Animation handler (Client)
      hooks/
        useMenu.tsx             # Menu context + state
        useBreakpoint.ts        # Responsive detection
      index.ts                  # Barrel exports
  components/
    content/                    # Template-agnostic content
      PageHeader.tsx            # Page title + subtitle
      Tile.tsx                  # Feature tile
      TilesGrid.tsx             # Tiles container
    ui/                         # Reusable UI
      Icon.tsx                  # react-icons wrapper
      Button.tsx                # Button/Link component
  lib/
    fonts.ts                    # Next.js font config

Naming Conventions

Type	Convention	Example
Page file	`page.tsx`	`src/app/project/[projectId]/page.tsx`
Layout file	`layout.tsx`	`src/app/layout.tsx`
Component	PascalCase	`SessionViewer.tsx`
Utility	camelCase	`cwc-storage-client.ts`
Types file	`*.types.ts`	`session.types.ts`

Component File Pattern

// src/components/session/SessionHeader.tsx
import type { ReactNode } from 'react';
import type { CwcCodingSession } from 'cwc-types';

type SessionHeaderProps = {
  session: CwcCodingSession;
};

export function SessionHeader({ session }: SessionHeaderProps): ReactNode {
  return (
    <header>
      <h1>{session.summary}</h1>
    </header>
  );
}

Page Patterns

Dynamic Route with Metadata

// src/app/project/[projectId]/session/[sessionId]/page.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';

type PageProps = {
  params: Promise<{ projectId: string; sessionId: string }>;
};

// Dynamic metadata for SEO
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { sessionId } = await params;
  const session = await fetchSession(sessionId);

  if (!session) {
    return { title: 'Not Found' };
  }

  return {
    title: session.summary,
    description: session.description,
    openGraph: {
      title: session.summary,
      type: 'article',
    },
  };
}

// Page component (Server Component by default)
export default async function SessionPage({ params }: PageProps) {
  const { sessionId } = await params;
  const session = await fetchSession(sessionId);

  if (!session) {
    notFound();
  }

  return <SessionViewer session={session} />;
}

Static Metadata

// src/app/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Coding with Claude',
  description: 'Browse developer projects and AI coding sessions',
};

export default function HomePage() {
  return <main>...</main>;
}

Data Fetching Patterns

API Client Pattern

// src/lib/cwc-api-client.ts
import type { CwcProject } from 'cwc-types';

const API_URL = process.env.CWC_API_URL;

export const cwcApiClient = {
  async getProject(projectId: string): Promise<CwcProject | undefined> {
    const response = await fetch(`${API_URL}/api/v1/project/${projectId}`, {
      next: { revalidate: 60 }, // Cache 1 minute
    });

    if (!response.ok) {
      if (response.status === 404) return undefined;
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }

    return response.json();
  },
};

Caching Rules

Data Type	Revalidation	Rationale
Session content	3600s (1 hour)	Immutable after upload
User profiles	300s (5 min)	Occasionally updated
Project list	60s (1 min)	Frequently updated

Client Component Rules

Only use 'use client' when component needs:

useState, useEffect, useRef
Event handlers (onClick, onChange)
Browser APIs (localStorage, window)

// ✅ Needs 'use client' - has state
'use client';

import { useState } from 'react';

export function Collapsible({ children }: Props) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && children}
    </div>
  );
}

// ❌ Does NOT need 'use client' - pure render
export function Badge({ label }: Props) {
  return <span className="badge">{label}</span>;
}

Error Handling

Route Error Boundary

// src/app/project/[projectId]/error.tsx
'use client'; // Error boundaries must be Client Components

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Not Found

// In page component
import { notFound } from 'next/navigation';

if (!data) {
  notFound(); // Renders src/app/not-found.tsx
}

What to Check During Planning

Server vs Client Component: Does this component need interactivity? If no, keep as Server Component
Metadata: Does this page need dynamic SEO metadata? Use generateMetadata
Data fetching: Is caching strategy appropriate for data freshness needs?
Error states: Is there an error boundary for this route?
Loading states: Should there be a loading.tsx for slow data fetches?
Types: Are props typed correctly with cwc-types?

Common Mistakes to Avoid

Mistake	Correct Approach
Adding 'use client' to pages	Keep pages as Server Components, extract interactive parts
Fetching in Client Components	Fetch in Server Components, pass data as props
Missing metadata	Every public page needs title/description
Using `useEffect` for data	Use async Server Components instead
Hardcoding URLs	Use environment variables

Environment Variables

Setup: Copy .env.local.example to .env.local for local development.

Variable	Purpose	Server/Client
`CWC_API_URL`	URL to cwc-api service	Server only
`NEXT_PUBLIC_APP_URL`	Public URL of the website	Client accessible

Access patterns:

// Server Components - direct access
const apiUrl = process.env.CWC_API_URL;

// Client Components - must use NEXT_PUBLIC_ prefix
const appUrl = process.env.NEXT_PUBLIC_APP_URL;

Rule: Never hardcode URLs. Always use environment variables.

Deployment (Future - Not Yet Implemented)

Key Difference from Backend Services

Next.js requires environment variables at BUILD time, not runtime.

Service Type	When Env Vars Needed	How Currently Handled
Backend (cwc-api, etc.)	Runtime (`docker run -e`)	Passed via docker run flags
Next.js (cwc-website)	Build time (`next build`)	Must be in `.env` during docker build

Docker Deployment Pattern for Next.js

# Environment file must be present BEFORE next build
COPY .env.production .env.production
RUN npm run build

# Built app has env vars baked in
CMD ["npm", "start"]

Deployment Workflow (When Implemented)

cwc-deployment copies {env}.cwc-website.env from cwc-secrets to build context
Dockerfile copies env file and runs next build
Environment variables are baked into the JavaScript bundle
Container runs next start (no runtime env injection needed)

Env Files in cwc-secrets

Follow the existing naming convention:

dev.cwc-website.env
test.cwc-website.env
prod.cwc-website.env

Location: ~/coding-with-claude/private/cwc-secrets/env/

Prerequisites Before Deployment

cwc-content service - Must be implemented first (handles auth + content access)
cwc-deployment updates - Add website service type to deployment CLI

Related Packages

Depends On:

cwc-types - Type definitions (CwcCodingSession, etc.)
cwc-api - Authentication and user data
cwc-content - Content access with auth (future - not yet implemented)

Deployed By:

cwc-deployment - Docker deployment CLI (website support not yet implemented)

Version 2 (latest)

cwc-website Package

Public-facing Next.js 15 web application with App Router and React 19 Server Components.

Critical Rules

Server Components by Default (SEO)

All pages must be Server Components unless they require interactivity. This is non-negotiable for SEO.

// ✅ Server Component (default) - data fetching, no 'use client'
export default async function SessionPage({ params }: Props) {
  const session = await fetchSession(params.sessionId);
  return <SessionViewer session={session} />;
}

// ✅ Client Component - only when interactivity needed
'use client';
export function CollapsibleSection({ children }: Props) {
  const [isOpen, setIsOpen] = useState(false);
  // ...
}

Build Requirement

Production builds require NODE_ENV=production:

NODE_ENV=production pnpm website build  # ✅ Works
pnpm website build                       # ❌ Fails with Html import error

Path Alias

Use @/* for imports from src/:

import { SessionViewer } from '@/components/session/SessionViewer';
import { cwcStorageClient } from '@/lib/cwc-storage-client';

Template System Architecture

Route Groups

The app uses Next.js route groups to separate concerns:

(site) - Marketing/public pages (landing, about, privacy, login)
(app) - Authenticated app pages (projects, sessions) - future

Route groups use parentheses and don't affect URLs (/about not /(site)/about).

Template Organization

Templates live in src/templates/ with generic names for easy swapping:

templates/site/ - Template for the (site) route group
templates/app/ - Template for the (app) route group (future)

Naming convention: Use generic names like SiteLayout, SiteHeader, not template-specific names like PhantomLayout.

Component Categories

Category	Location	Purpose
Template components	`templates/site/components/`	Layout structure (header, footer, menu)
Content components	`components/content/`	Page content (tiles, page headers)
UI components	`components/ui/`	Reusable primitives (buttons, icons)

Server vs Client Split for Templates

Component	Type	Reason
SiteLayout	Server	Static wrapper structure
SiteHeader	Server	Static logo/nav shell
SiteMenu	Client	State for open/close
SiteFooter	Server	Static content
PreloadHandler	Client	DOM manipulation on mount
MenuToggle	Client	Click handler for menu
TilesGrid, Tile	Server	Static content
PageHeader	Server	Static content

Menu State Management

Menu state is managed via React Context (replacing jQuery):

// templates/site/hooks/useMenu.tsx
'use client';
export function MenuProvider({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  // Syncs to body class 'is-menu-visible' for CSS
  // Closes on Escape key
}

export function useMenu() {
  return useContext(MenuContext); // { isOpen, toggle, open, close }
}

debugUi Prop Pattern

All content and template components support a debugUi?: boolean prop for development visualization:

Content components (red outline): Use debug-ui class
Template components (orange outline): Use debug-ui-template class
Shows component name via data-component attribute tooltip

// In page or layout file
const debugUi = true; // Toggle for development

<PageHeader title="..." debugUi={debugUi} />
<Tile title="..." debugUi={debugUi} />

File/Component Conventions

Directory Structure

src/
  app/                          # Next.js App Router
    layout.tsx                  # Root layout (fonts, global styles)
    globals.scss                # Global SCSS imports
    not-found.tsx               # 404 page
    (site)/                     # Route group: marketing pages
      layout.tsx                # Uses SiteLayout from templates
      page.tsx                  # Landing page (/)
    (app)/                      # Route group: authenticated app (future)
      layout.tsx                # Uses AppLayout from templates
  templates/
    site/                       # Template for (site) route group
      styles/                   # SCSS partials
        main.scss               # Entry point
        _variables.scss         # CSS custom properties
        _base.scss              # Reset, typography
        _components.scss        # Tiles, buttons, debug UI
        _layout.scss            # Header, menu, footer
      components/               # Template components
        SiteLayout.tsx          # Main wrapper
        SiteHeader.tsx          # Header with logo
        SiteMenu.tsx            # Off-canvas menu (Client)
        SiteFooter.tsx          # Footer
        MenuToggle.tsx          # Menu button (Client)
        PreloadHandler.tsx      # Animation handler (Client)
      hooks/
        useMenu.tsx             # Menu context + state
        useBreakpoint.ts        # Responsive detection
      index.ts                  # Barrel exports
  components/
    content/                    # Template-agnostic content
      PageHeader.tsx            # Page title + subtitle
      Tile.tsx                  # Feature tile
      TilesGrid.tsx             # Tiles container
    ui/                         # Reusable UI
      Icon.tsx                  # react-icons wrapper
      Button.tsx                # Button/Link component
  lib/
    fonts.ts                    # Next.js font config

Naming Conventions

Type	Convention	Example
Page file	`page.tsx`	`src/app/project/[projectId]/page.tsx`
Layout file	`layout.tsx`	`src/app/layout.tsx`
Component	PascalCase	`SessionViewer.tsx`
Utility	camelCase	`cwc-storage-client.ts`
Types file	`*.types.ts`	`session.types.ts`

Component File Pattern

// src/components/session/SessionHeader.tsx
import type { ReactNode } from 'react';
import type { CwcCodingSession } from 'cwc-types';

type SessionHeaderProps = {
  session: CwcCodingSession;
};

export function SessionHeader({ session }: SessionHeaderProps): ReactNode {
  return (
    <header>
      <h1>{session.summary}</h1>
    </header>
  );
}

Page Patterns

Dynamic Route with Metadata

// src/app/project/[projectId]/session/[sessionId]/page.tsx
import type { Metadata } from 'next';
import { notFound } from 'next/navigation';

type PageProps = {
  params: Promise<{ projectId: string; sessionId: string }>;
};

// Dynamic metadata for SEO
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { sessionId } = await params;
  const session = await fetchSession(sessionId);

  if (!session) {
    return { title: 'Not Found' };
  }

  return {
    title: session.summary,
    description: session.description,
    openGraph: {
      title: session.summary,
      type: 'article',
    },
  };
}

// Page component (Server Component by default)
export default async function SessionPage({ params }: PageProps) {
  const { sessionId } = await params;
  const session = await fetchSession(sessionId);

  if (!session) {
    notFound();
  }

  return <SessionViewer session={session} />;
}

Static Metadata

// src/app/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Coding with Claude',
  description: 'Browse developer projects and AI coding sessions',
};

export default function HomePage() {
  return <main>...</main>;
}

Data Fetching Patterns

API Client Pattern

// src/lib/cwc-api-client.ts
import type { CwcProject } from 'cwc-types';

const API_URL = process.env.CWC_API_URL;

export const cwcApiClient = {
  async getProject(projectId: string): Promise<CwcProject | undefined> {
    const response = await fetch(`${API_URL}/api/v1/project/${projectId}`, {
      next: { revalidate: 60 }, // Cache 1 minute
    });

    if (!response.ok) {
      if (response.status === 404) return undefined;
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }

    return response.json();
  },
};

Caching Rules

Data Type	Revalidation	Rationale
Session content	3600s (1 hour)	Immutable after upload
User profiles	300s (5 min)	Occasionally updated
Project list	60s (1 min)	Frequently updated

Client Component Rules

Only use 'use client' when component needs:

useState, useEffect, useRef
Event handlers (onClick, onChange)
Browser APIs (localStorage, window)

// ✅ Needs 'use client' - has state
'use client';

import { useState } from 'react';

export function Collapsible({ children }: Props) {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && children}
    </div>
  );
}

// ❌ Does NOT need 'use client' - pure render
export function Badge({ label }: Props) {
  return <span className="badge">{label}</span>;
}

Error Handling

Route Error Boundary

// src/app/project/[projectId]/error.tsx
'use client'; // Error boundaries must be Client Components

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Not Found

// In page component
import { notFound } from 'next/navigation';

if (!data) {
  notFound(); // Renders src/app/not-found.tsx
}

What to Check During Planning

Server vs Client Component: Does this component need interactivity? If no, keep as Server Component
Metadata: Does this page need dynamic SEO metadata? Use generateMetadata
Data fetching: Is caching strategy appropriate for data freshness needs?
Error states: Is there an error boundary for this route?
Loading states: Should there be a loading.tsx for slow data fetches?
Types: Are props typed correctly with cwc-types?

Common Mistakes to Avoid

Mistake	Correct Approach
Adding 'use client' to pages	Keep pages as Server Components, extract interactive parts
Fetching in Client Components	Fetch in Server Components, pass data as props
Missing metadata	Every public page needs title/description
Using `useEffect` for data	Use async Server Components instead
Hardcoding URLs	Use environment variables

Environment Variables

Setup: Copy .env.local.example to .env.local for local development.

Variable	Purpose	Server/Client
`CWC_API_URL`	URL to cwc-api service	Server only
`NEXT_PUBLIC_APP_URL`	Public URL of the website	Client accessible

Access patterns:

// Server Components - direct access
const apiUrl = process.env.CWC_API_URL;

// Client Components - must use NEXT_PUBLIC_ prefix
const appUrl = process.env.NEXT_PUBLIC_APP_URL;

Rule: Never hardcode URLs. Always use environment variables.

Deployment (Future - Not Yet Implemented)

Key Difference from Backend Services

Next.js requires environment variables at BUILD time, not runtime.

Service Type	When Env Vars Needed	How Currently Handled
Backend (cwc-api, etc.)	Runtime (`docker run -e`)	Passed via docker run flags
Next.js (cwc-website)	Build time (`next build`)	Must be in `.env` during docker build

Docker Deployment Pattern for Next.js

# Environment file must be present BEFORE next build
COPY .env.production .env.production
RUN npm run build

# Built app has env vars baked in
CMD ["npm", "start"]

Deployment Workflow (When Implemented)

cwc-deployment copies {env}.cwc-website.env from cwc-secrets to build context
Dockerfile copies env file and runs next build
Environment variables are baked into the JavaScript bundle
Container runs next start (no runtime env injection needed)

Env Files in cwc-secrets

Follow the existing naming convention:

dev.cwc-website.env
test.cwc-website.env
prod.cwc-website.env

Location: ~/coding-with-claude/private/cwc-secrets/env/

Prerequisites Before Deployment

cwc-content service - Must be implemented first (handles auth + content access)
cwc-deployment updates - Add website service type to deployment CLI

SCSS and Styling

SCSS Organization

Styles use SCSS with Next.js built-in compilation:

globals.scss imports the template's main.scss
Each template has its own SCSS in templates/{template}/styles/
Use CSS custom properties for theming

CSS Custom Properties

// templates/site/styles/_variables.scss
:root {
  --color-accent1: #f2849e;
  --color-accent2: #7ecaf6;
  --color-accent3: #7bd0c1;
  --color-accent4: #c75b9b;
  --color-accent5: #ae85ca;
  --color-accent6: #8499e7;
  --color-bg: #1a1a2e;
  --font-family: var(--font-source-sans), Helvetica, sans-serif;
}

Tile Gradients (No Images)

Tiles use CSS gradients instead of images:

// Each style gets a unique gradient
.tiles article.style1 > .image {
  background: linear-gradient(135deg, var(--color-accent1), color-mix(in srgb, var(--color-accent1), #000 40%));
}

Icons with react-icons

Use react-icons for all icons:

import { FaGithub, FaTwitter } from 'react-icons/fa';
import { IoMenu, IoClose } from 'react-icons/io5';

Related Packages

Depends On:

cwc-types - Type definitions (CwcCodingSession, etc.)
cwc-api - Authentication and user data
cwc-content - Content access with auth (future - not yet implemented)

Deployed By:

cwc-deployment - Docker deployment CLI (website support not yet implemented)

packages/cwc-website/README.md

2 versions

Version 1

cwc-website

Public-facing web application for Coding with Claude - a platform for browsing and discovering AI-assisted coding sessions.

Tech Stack

Next.js 15 - React framework with App Router
React 19 - UI library with Server Components
TypeScript - Type-safe development
SCSS - CSS preprocessing with Next.js built-in support
react-icons - Icon library
Source Sans Pro - Primary font via next/font

Features

Public Feed - Browse published coding sessions from the developer community
Session Viewer - View full conversations with syntax-highlighted code
Project Pages - Explore projects and their associated sessions
SEO Optimized - Server-rendered pages for search engine indexing

Getting Started

Prerequisites

Node.js 22+ (see .nvmrc in monorepo root)
pnpm 9+

Installation

From the monorepo root:

# Install all dependencies
pnpm install

Development

# Start development server
pnpm website dev

The development server runs at http://localhost:3000.

Build

# Production build
NODE_ENV=production pnpm website build

# Start production server
pnpm website start

Note: The NODE_ENV=production is required for the build to succeed due to Next.js internal page generation.

Type Checking

pnpm website typecheck

Project Structure

src/
├── app/                      # Next.js App Router
│   ├── layout.tsx            # Root layout with global metadata
│   ├── page.tsx              # Home page (/)
│   ├── not-found.tsx         # 404 page
│   └── project/
│       └── [projectId]/
│           ├── page.tsx      # Project page
│           └── session/
│               └── [sessionId]/
│                   └── page.tsx  # Session viewer
├── components/               # React components
│   ├── session/              # Session-related components
│   ├── layout/               # Layout components
│   └── ui/                   # Reusable UI components
└── lib/                      # Utilities and API clients
    ├── cwc-storage-client.ts # Session data fetching
    └── cwc-api-client.ts     # API communication

Architecture

Server Components (Default)

All pages use React Server Components by default for:

SEO - Full HTML rendered on server for search crawlers
Performance - No JavaScript bundle for static content
Data Fetching - Async data loading without client-side effects

Client Components

Used only when interactivity is required:

Collapsible sections (thinking blocks, tool results)
File tree navigation
Copy-to-clipboard buttons
Tab switching

Mark with 'use client' directive at the top of the file.

Data Flow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  cwc-website │────▶│   cwc-api   │────▶│   cwc-sql   │
│   (Next.js)  │     │  (Express)  │     │  (MariaDB)  │
└─────────────┘     └─────────────┘     └─────────────┘
       │
       │            ┌─────────────┐
       └───────────▶│ cwc-storage │
                    │ (Sessions)  │
                    └─────────────┘

cwc-api - Business logic, authentication, metadata
cwc-storage - Session JSON files (conversations, file diffs)

Environment Variables

Copy the example file and customize for your local environment:

cp .env.local.example .env.local

Available Variables

Variable	Description	Server/Client
`CWC_API_URL`	URL to cwc-api service	Server only
`NEXT_PUBLIC_APP_URL`	Public URL of the website	Client accessible

Note: Variables prefixed with NEXT_PUBLIC_ are available in the browser. All other variables are server-side only (used by Server Components).

SEO

Metadata

Each page exports metadata for search engines:

export const metadata: Metadata = {
  title: 'Page Title',
  description: 'Page description for search results',
  openGraph: { /* social sharing */ },
};

Dynamic pages use generateMetadata() for data-dependent metadata.

Sitemap

The sitemap is generated at /sitemap.xml using Next.js conventions:

// src/app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // Fetch published sessions and generate URLs
}

Scripts

Command	Description
`pnpm website dev`	Start development server
`pnpm website build`	Create production build
`pnpm website start`	Start production server
`pnpm website typecheck`	Run TypeScript type checking

Dependencies

Workspace Packages

cwc-types - Shared TypeScript type definitions

External Dependencies

next - React framework
react / react-dom - UI library

cwc-website

Public-facing web application for Coding with Claude - a platform for browsing and discovering AI-assisted coding sessions.

Tech Stack

Next.js 15 - React framework with App Router
React 19 - UI library with Server Components
TypeScript - Type-safe development
SCSS - CSS preprocessing with Next.js built-in support
react-icons - Icon library
Source Sans Pro - Primary font via next/font

Features

Public Feed - Browse published coding sessions from the developer community
Session Viewer - View full conversations with syntax-highlighted code
Project Pages - Explore projects and their associated sessions
SEO Optimized - Server-rendered pages for search engine indexing

Getting Started

Prerequisites

Node.js 22+ (see .nvmrc in monorepo root)
pnpm 9+

Installation

From the monorepo root:

# Install all dependencies
pnpm install

Development

# Start development server
pnpm website dev

The development server runs at http://localhost:3000.

Debug UI Mode

Components support a debugUi prop for visualizing layout boundaries:

// In page.tsx or layout.tsx
const debugUi = true; // Toggle for development

<PageHeader title="..." debugUi={debugUi} />
<Tile title="..." debugUi={debugUi} />

Red outlines - Content components (components/content/)
Orange outlines - Template components (templates/site/components/)
Tooltips - Show component names on hover

Build

# Production build
NODE_ENV=production pnpm website build

# Start production server
pnpm website start

Note: The NODE_ENV=production is required for the build to succeed due to Next.js internal page generation.

Type Checking

pnpm website typecheck

Project Structure

src/
├── app/                          # Next.js App Router
│   ├── layout.tsx                # Root layout (fonts, global styles)
│   ├── globals.scss              # Global SCSS imports
│   ├── not-found.tsx             # 404 page
│   ├── icon.svg                  # Favicon
│   ├── (site)/                   # Route group: marketing/public pages
│   │   ├── layout.tsx            # Uses SiteLayout
│   │   └── page.tsx              # Landing page (/)
│   └── (app)/                    # Route group: authenticated app (future)
│       └── layout.tsx            # Uses AppLayout
├── templates/                    # Design templates (swappable)
│   └── site/                     # Template for (site) route group
│       ├── styles/               # SCSS partials
│       │   ├── main.scss         # Entry point
│       │   ├── _variables.scss   # CSS custom properties
│       │   ├── _base.scss        # Reset, typography
│       │   ├── _components.scss  # Tiles, buttons, forms
│       │   └── _layout.scss      # Header, menu, footer
│       ├── components/           # Template-specific components
│       │   ├── SiteLayout.tsx    # Main wrapper
│       │   ├── SiteHeader.tsx    # Header with logo
│       │   ├── SiteMenu.tsx      # Off-canvas menu
│       │   ├── SiteFooter.tsx    # Footer
│       │   └── PreloadHandler.tsx# Animation handler
│       ├── hooks/                # Template hooks
│       │   └── useMenu.tsx       # Menu state context
│       └── index.ts              # Barrel exports
├── components/                   # Shared components
│   ├── content/                  # Page content components
│   │   ├── PageHeader.tsx        # Page title + subtitle
│   │   ├── Tile.tsx              # Feature tile
│   │   └── TilesGrid.tsx         # Tiles container
│   └── ui/                       # Reusable UI primitives
│       ├── Icon.tsx              # react-icons wrapper
│       └── Button.tsx            # Button/Link component
└── lib/                          # Utilities
    └── fonts.ts                  # Next.js font config

Architecture

Route Groups

The app uses Next.js route groups to separate concerns:

(site) - Marketing/public pages (landing, about, privacy)
(app) - Authenticated app pages (projects, sessions) - future

Route groups use parentheses and don't affect URLs (/about not /(site)/about).

Template System

Templates are organized in src/templates/ for easy swapping:

Each template provides layout components, styles, and hooks
Templates use generic names (SiteLayout not PhantomLayout) for portability
Content components in src/components/ are template-agnostic

Current template: Based on HTML5 UP Phantom, converted from jQuery to React.

Server Components (Default)

All pages use React Server Components by default for:

SEO - Full HTML rendered on server for search crawlers
Performance - No JavaScript bundle for static content
Data Fetching - Async data loading without client-side effects

Client Components

Used only when interactivity is required:

Menu toggle and off-canvas navigation
Preload animation handler
Collapsible sections
Copy-to-clipboard buttons

Mark with 'use client' directive at the top of the file.

Styling

SCSS - Next.js built-in SCSS compilation
CSS Custom Properties - Theming via :root variables
Gradient backgrounds - Tiles use CSS gradients instead of images
react-icons - Icon components from Font Awesome, Ionicons, etc.

Data Flow

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  cwc-website │────▶│   cwc-api   │────▶│   cwc-sql   │
│   (Next.js)  │     │  (Express)  │     │  (MariaDB)  │
└─────────────┘     └─────────────┘     └─────────────┘
       │
       │            ┌─────────────┐
       └───────────▶│ cwc-storage │
                    │ (Sessions)  │
                    └─────────────┘

cwc-api - Business logic, authentication, metadata
cwc-storage - Session JSON files (conversations, file diffs)

Environment Variables

Copy the example file and customize for your local environment:

cp .env.local.example .env.local

Available Variables

Variable	Description	Server/Client
`CWC_API_URL`	URL to cwc-api service	Server only
`NEXT_PUBLIC_APP_URL`	Public URL of the website	Client accessible

Note: Variables prefixed with NEXT_PUBLIC_ are available in the browser. All other variables are server-side only (used by Server Components).

SEO

Metadata

Each page exports metadata for search engines:

export const metadata: Metadata = {
  title: 'Page Title',
  description: 'Page description for search results',
  openGraph: { /* social sharing */ },
};

Dynamic pages use generateMetadata() for data-dependent metadata.

Sitemap

The sitemap is generated at /sitemap.xml using Next.js conventions:

// src/app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // Fetch published sessions and generate URLs
}

Scripts

Command	Description
`pnpm website dev`	Start development server
`pnpm website build`	Create production build
`pnpm website start`	Start production server
`pnpm website typecheck`	Run TypeScript type checking

Dependencies

Workspace Packages

cwc-types - Shared TypeScript type definitions

External Dependencies

next - React framework
react / react-dom - UI library
sass - SCSS compilation
react-icons - Icon components

Related Documentation

packages/cwc-website/src/app/(app)/layout.tsx

2 versions

Version 1

import type { ReactNode } from 'react';

type AppRouteLayoutProps = {
  children: ReactNode;
};

// Placeholder layout for authenticated app pages
// Will use AppLayout from templates/app when implemented
export default function AppRouteLayout({
  children,
}: AppRouteLayoutProps): ReactNode {
  return (
    <div id="wrapper">
      <main id="main">
        <div className="inner">{children}</div>
      </main>
    </div>
  );
}

Version 2 (latest)

import type { ReactNode } from 'react';

type AppRouteLayoutProps = {
  children: ReactNode;
};

// Placeholder layout for authenticated app pages
// Will use AppLayout from templates/app when implemented
export default function AppRouteLayout({
  children,
}: AppRouteLayoutProps): ReactNode {
  return (
    <div id="wrapper">
      <main id="main">
        <div className="inner">{children}</div>
      </main>
    </div>
  );
}

packages/cwc-website/src/app/(site)/layout.tsx

3 versions

Version 1

import type { ReactNode } from 'react';
import { SiteLayout } from '@/templates/site';

type SiteRouteLayoutProps = {
  children: ReactNode;
};

export default function SiteRouteLayout({
  children,
}: SiteRouteLayoutProps): ReactNode {
  return <SiteLayout>{children}</SiteLayout>;
}

Version 2

import type { ReactNode } from 'react';
import { SiteLayout } from '@/templates/site';

type SiteRouteLayoutProps = {
  children: ReactNode;
};

const debugUi = true; // Toggle to show template component outlines

export default function SiteRouteLayout({
  children,
}: SiteRouteLayoutProps): ReactNode {
  return <SiteLayout debugUi={debugUi}>{children}</SiteLayout>;
}

Version 3 (latest)

import type { ReactNode } from 'react';
import { SiteLayout } from '@/templates/site';

type SiteRouteLayoutProps = {
  children: ReactNode;
};

const debugUi = true; // Toggle to show template component outlines

export default function SiteRouteLayout({
  children,
}: SiteRouteLayoutProps): ReactNode {
  return <SiteLayout debugUi={debugUi}>{children}</SiteLayout>;
}

packages/cwc-website/src/app/(site)/page.tsx

3 versions

Version 1

import type { ReactNode } from 'react';
import { PageHeader } from '@/components/content/PageHeader';
import { TilesGrid } from '@/components/content/TilesGrid';
import { Tile } from '@/components/content/Tile';

export default function HomePage(): ReactNode {
  return (
    <>
      <PageHeader
        title="Coding with Claude"
        subtitle="Discover real coding sessions with Claude AI. Browse developer projects, view conversations, and learn from AI-assisted development."
      />
      <TilesGrid>
        <Tile
          title="AI-Powered Coding Sessions"
          description="Watch Claude build real projects from scratch. See how AI approaches complex problems, makes architectural decisions, and writes production-ready code."
          href="#"
          style={1}
        />
        <Tile
          title="Step-by-Step Breakdowns"
          description="Every session includes detailed explanations of each decision. Understand the reasoning behind code choices, patterns, and best practices."
          href="#"
          style={2}
        />
        <Tile
          title="Real-World Projects"
          description="Not toy examples or simple demos. Explore full-stack applications, APIs, CLI tools, and more—built with modern technologies."
          href="#"
          style={3}
        />
        <Tile
          title="Learn Modern Patterns"
          description="TypeScript, React, Next.js, Node.js, and beyond. See how Claude applies industry best practices and current development standards."
          href="#"
          style={4}
        />
        <Tile
          title="Open Source"
          description="All code from our sessions is available on GitHub. Clone, fork, and build upon the work—it's all open for you to explore."
          href="#"
          style={5}
        />
        <Tile
          title="Community Driven"
          description="Share your own AI coding sessions. Connect with developers exploring the future of AI-assisted development together."
          href="#"
          style={6}
        />
      </TilesGrid>
    </>
  );
}

Version 2

import type { ReactNode } from 'react';
import { PageHeader } from '@/components/content/PageHeader';
import { TilesGrid } from '@/components/content/TilesGrid';
import { Tile } from '@/components/content/Tile';

export default function HomePage(): ReactNode {
  const debugUi = true; // Toggle to show component outlines

  return (
    <>
      <PageHeader
        title="Coding with Claude"
        subtitle="Discover real coding sessions with Claude AI. Browse developer projects, view conversations, and learn from AI-assisted development."
        debugUi={debugUi}
      />
      <TilesGrid debugUi={debugUi}>
        <Tile
          title="AI-Powered Coding Sessions"
          description="Watch Claude build real projects from scratch. See how AI approaches complex problems, makes architectural decisions, and writes production-ready code."
          href="#"
          style={1}
          debugUi={debugUi}
        />
        <Tile
          title="Step-by-Step Breakdowns"
          description="Every session includes detailed explanations of each decision. Understand the reasoning behind code choices, patterns, and best practices."
          href="#"
          style={2}
          debugUi={debugUi}
        />
        <Tile
          title="Real-World Projects"
          description="Not toy examples or simple demos. Explore full-stack applications, APIs, CLI tools, and more—built with modern technologies."
          href="#"
          style={3}
          debugUi={debugUi}
        />
        <Tile
          title="Learn Modern Patterns"
          description="TypeScript, React, Next.js, Node.js, and beyond. See how Claude applies industry best practices and current development standards."
          href="#"
          style={4}
          debugUi={debugUi}
        />
        <Tile
          title="Open Source"
          description="All code from our sessions is available on GitHub. Clone, fork, and build upon the work—it's all open for you to explore."
          href="#"
          style={5}
          debugUi={debugUi}
        />
        <Tile
          title="Community Driven"
          description="Share your own AI coding sessions. Connect with developers exploring the future of AI-assisted development together."
          href="#"
          style={6}
          debugUi={debugUi}
        />
      </TilesGrid>
    </>
  );
}

Version 3 (latest)

import type { ReactNode } from 'react';
import { PageHeader } from '@/components/content/PageHeader';
import { TilesGrid } from '@/components/content/TilesGrid';
import { Tile } from '@/components/content/Tile';

export default function HomePage(): ReactNode {
  const debugUi = true; // Toggle to show component outlines

  return (
    <>
      <PageHeader
        title="Coding with Claude"
        subtitle="Discover real coding sessions with Claude AI. Browse developer projects, view conversations, and learn from AI-assisted development."
        debugUi={debugUi}
      />
      <TilesGrid debugUi={debugUi}>
        <Tile
          title="AI-Powered Coding Sessions"
          description="Watch Claude build real projects from scratch. See how AI approaches complex problems, makes architectural decisions, and writes production-ready code."
          href="#"
          style={1}
          debugUi={debugUi}
        />
        <Tile
          title="Step-by-Step Breakdowns"
          description="Every session includes detailed explanations of each decision. Understand the reasoning behind code choices, patterns, and best practices."
          href="#"
          style={2}
          debugUi={debugUi}
        />
        <Tile
          title="Real-World Projects"
          description="Not toy examples or simple demos. Explore full-stack applications, APIs, CLI tools, and more—built with modern technologies."
          href="#"
          style={3}
          debugUi={debugUi}
        />
        <Tile
          title="Learn Modern Patterns"
          description="TypeScript, React, Next.js, Node.js, and beyond. See how Claude applies industry best practices and current development standards."
          href="#"
          style={4}
          debugUi={debugUi}
        />
        <Tile
          title="Open Source"
          description="All code from our sessions is available on GitHub. Clone, fork, and build upon the work—it's all open for you to explore."
          href="#"
          style={5}
          debugUi={debugUi}
        />
        <Tile
          title="Community Driven"
          description="Share your own AI coding sessions. Connect with developers exploring the future of AI-assisted development together."
          href="#"
          style={6}
          debugUi={debugUi}
        />
      </TilesGrid>
    </>
  );
}

packages/cwc-website/src/app/apple-icon.svg

2 versions

Version 1

Version 2 (latest)

packages/cwc-website/src/app/globals.scss

2 versions

Version 1

// Global styles for cwc-website
// Import site template styles
@use '../templates/site/styles/main';

Version 2 (latest)

// Global styles for cwc-website
// Import site template styles
@use '../templates/site/styles/main';

packages/cwc-website/src/app/icon-option-a.svg

packages/cwc-website/src/app/icon-option-b.svg

packages/cwc-website/src/app/icon-option-c.svg

packages/cwc-website/src/app/icon-option-d.svg

packages/cwc-website/src/app/icon.svg

2 versions

Version 1

Version 2 (latest)

packages/cwc-website/src/app/layout.tsx

import type { Metadata } from 'next';
import type { ReactNode } from 'react';
import { sourceSans } from '@/lib/fonts';
import './globals.scss';

export const metadata: Metadata = {
  title: {
    default: 'Coding with Claude',
    template: '%s | Coding with Claude',
  },
  description: 'Discover real coding sessions with Claude AI. Browse developer projects, view conversations, and learn from AI-assisted development.',
  keywords: ['Claude', 'AI coding', 'developer projects', 'coding sessions', 'AI assistant'],
  authors: [{ name: 'Coding with Claude' }],
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: 'Coding with Claude',
  },
  twitter: {
    card: 'summary_large_image',
  },
  robots: {
    index: true,
    follow: true,
  },
};

type RootLayoutProps = {
  children: ReactNode;
};

export default function RootLayout({ children }: RootLayoutProps): ReactNode {
  return (
    <html lang="en" className={sourceSans.variable}>
      <body className="is-preload">{children}</body>
    </html>
  );
}

packages/cwc-website/src/components/content/index.ts

2 versions

Version 1

export { PageHeader } from './PageHeader';
export { Tile } from './Tile';
export { TilesGrid } from './TilesGrid';

Version 2 (latest)

export { PageHeader } from './PageHeader';
export { Tile } from './Tile';
export { TilesGrid } from './TilesGrid';

packages/cwc-website/src/components/content/PageHeader.tsx

6 versions

Version 1

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
};

export function PageHeader({ title, subtitle }: PageHeaderProps): ReactNode {
  return (
    <div className="page-header">
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

Version 2

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  debugUi?: boolean;
};

export function PageHeader({ title, subtitle, debugUi }: PageHeaderProps): ReactNode {
  const className = `page-header${debugUi ? ' debug-ui' : ''}`;

  return (
    <div className={className}>
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

Version 3

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  debugUi?: boolean;
};

export function PageHeader({ title, subtitle, debugUi }: PageHeaderProps): ReactNode {
  const className = `page-header${debugUi ? ' debug-ui' : ''}`;

  return (
    <div className={className} data-component={debugUi ? 'PageHeader' : undefined}>
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

Version 4

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  debugUi?: boolean;
};

export function PageHeader({ title, subtitle, debugUi }: PageHeaderProps): ReactNode {
  const className = `page-header${debugUi === true ? ' debug-ui' : ''}`;

  return (
    <div className={className} data-component={debugUi === true ? 'PageHeader' : undefined}>
      <h1>{title}</h1>
      {subtitle !== undefined && subtitle !== '' && <p>{subtitle}</p>}
    </div>
  );
}

Version 5

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  debugUi?: boolean;
};

export function PageHeader({ title, subtitle, debugUi }: PageHeaderProps): ReactNode {
  const className = `page-header${debugUi ? ' debug-ui' : ''}`;

  return (
    <div className={className} data-component={debugUi ? 'PageHeader' : undefined}>
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

Version 6 (latest)

import type { ReactNode } from 'react';

type PageHeaderProps = {
  title: string;
  subtitle?: string;
  debugUi?: boolean;
};

export function PageHeader({ title, subtitle, debugUi }: PageHeaderProps): ReactNode {
  const className = `page-header${debugUi ? ' debug-ui' : ''}`;

  return (
    <div className={className} data-component={debugUi ? 'PageHeader' : undefined}>
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </div>
  );
}

packages/cwc-website/src/components/content/Tile.tsx

7 versions

Version 1

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
};

export function Tile({ title, description, href, style }: TileProps): ReactNode {
  return (
    <article className={`style${style}`}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 2

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
}: TileProps): ReactNode {
  const articleClass = `style${style}${showContent ? ' show-content' : ''}`;

  return (
    <article className={articleClass}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 3

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
  debugUi?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
  debugUi,
}: TileProps): ReactNode {
  const classes = [
    `style${style}`,
    showContent ? 'show-content' : '',
    debugUi ? 'debug-ui' : '',
  ].filter(Boolean).join(' ');

  return (
    <article className={classes}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 4

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
  debugUi?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
  debugUi,
}: TileProps): ReactNode {
  const classes = [
    `style${style}`,
    showContent ? 'show-content' : '',
    debugUi ? 'debug-ui' : '',
  ].filter(Boolean).join(' ');

  return (
    <article className={classes} data-component={debugUi ? 'Tile' : undefined}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 5

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
  debugUi?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
  debugUi,
}: TileProps): ReactNode {
  const classes = [
    `style${style}`,
    showContent === true ? 'show-content' : '',
    debugUi === true ? 'debug-ui' : '',
  ].filter(Boolean).join(' ');

  return (
    <article className={classes} data-component={debugUi === true ? 'Tile' : undefined}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 6

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
  debugUi?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
  debugUi,
}: TileProps): ReactNode {
  const classes = [
    `style${style}`,
    showContent ? 'show-content' : '',
    debugUi ? 'debug-ui' : '',
  ].filter(Boolean).join(' ');

  return (
    <article className={classes} data-component={debugUi ? 'Tile' : undefined}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

Version 7 (latest)

import type { ReactNode } from 'react';
import Link from 'next/link';

type TileProps = {
  title: string;
  description: string;
  href: string;
  style: 1 | 2 | 3 | 4 | 5 | 6;
  showContent?: boolean;
  debugUi?: boolean;
};

export function Tile({
  title,
  description,
  href,
  style,
  showContent = true,
  debugUi,
}: TileProps): ReactNode {
  const classes = [
    `style${style}`,
    showContent ? 'show-content' : '',
    debugUi ? 'debug-ui' : '',
  ].filter(Boolean).join(' ');

  return (
    <article className={classes} data-component={debugUi ? 'Tile' : undefined}>
      <span className="image" />
      <Link href={href}>
        <h2>{title}</h2>
        <div className="content">
          <p>{description}</p>
        </div>
      </Link>
    </article>
  );
}

packages/cwc-website/src/components/content/TilesGrid.tsx

6 versions

Version 1

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
};

export function TilesGrid({ children }: TilesGridProps): ReactNode {
  return <section className="tiles">{children}</section>;
}

Version 2

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function TilesGrid({ children, debugUi }: TilesGridProps): ReactNode {
  const className = `tiles${debugUi ? ' debug-ui' : ''}`;

  return <section className={className}>{children}</section>;
}

Version 3

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function TilesGrid({ children, debugUi }: TilesGridProps): ReactNode {
  const className = `tiles${debugUi ? ' debug-ui' : ''}`;

  return (
    <section className={className} data-component={debugUi ? 'TilesGrid' : undefined}>
      {children}
    </section>
  );
}

Version 4

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function TilesGrid({ children, debugUi }: TilesGridProps): ReactNode {
  const className = `tiles${debugUi === true ? ' debug-ui' : ''}`;

  return (
    <section className={className} data-component={debugUi === true ? 'TilesGrid' : undefined}>
      {children}
    </section>
  );
}

Version 5

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function TilesGrid({ children, debugUi }: TilesGridProps): ReactNode {
  const className = `tiles${debugUi ? ' debug-ui' : ''}`;

  return (
    <section className={className} data-component={debugUi ? 'TilesGrid' : undefined}>
      {children}
    </section>
  );
}

Version 6 (latest)

import type { ReactNode } from 'react';

type TilesGridProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function TilesGrid({ children, debugUi }: TilesGridProps): ReactNode {
  const className = `tiles${debugUi ? ' debug-ui' : ''}`;

  return (
    <section className={className} data-component={debugUi ? 'TilesGrid' : undefined}>
      {children}
    </section>
  );
}

packages/cwc-website/src/components/ui/Button.tsx

5 versions

Version 1

import type { ReactNode, ButtonHTMLAttributes } from 'react';
import Link from 'next/link';

type ButtonBaseProps = {
  variant?: 'default' | 'primary';
  size?: 'small' | 'medium' | 'large';
  children: ReactNode;
};

type ButtonAsButton = ButtonBaseProps &
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: undefined;
  };

type ButtonAsLink = ButtonBaseProps & {
  href: string;
  target?: string;
  rel?: string;
};

type ButtonProps = ButtonAsButton | ButtonAsLink;

export function Button({
  variant = 'default',
  size = 'medium',
  children,
  ...props
}: ButtonProps): ReactNode {
  const classes = [
    'button',
    variant === 'primary' ? 'primary' : '',
    size === 'small' ? 'small' : size === 'large' ? 'large' : '',
  ]
    .filter(Boolean)
    .join(' ');

  if ('href' in props && props.href) {
    const { href, target, rel, ...linkProps } = props;
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  const { href: _, ...buttonProps } = props as ButtonAsButton;
  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}

Version 2

import type { ReactNode, ButtonHTMLAttributes } from 'react';
import Link from 'next/link';

type ButtonBaseProps = {
  variant?: 'default' | 'primary';
  size?: 'small' | 'medium' | 'large';
  children: ReactNode;
};

type ButtonAsButton = ButtonBaseProps &
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: undefined;
  };

type ButtonAsLink = ButtonBaseProps & {
  href: string;
  target?: string;
  rel?: string;
};

type ButtonProps = ButtonAsButton | ButtonAsLink;

export function Button({
  variant = 'default',
  size = 'medium',
  children,
  ...props
}: ButtonProps): ReactNode {
  const classes = [
    'button',
    variant === 'primary' ? 'primary' : '',
    size === 'small' ? 'small' : size === 'large' ? 'large' : '',
  ]
    .filter(Boolean)
    .join(' ');

  if ('href' in props && props.href) {
    const { href, target, rel } = props;
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  const { href: _, ...buttonProps } = props as ButtonAsButton;
  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}

Version 3

import type { ReactNode, ButtonHTMLAttributes } from 'react';
import Link from 'next/link';

type ButtonBaseProps = {
  variant?: 'default' | 'primary';
  size?: 'small' | 'medium' | 'large';
  children: ReactNode;
};

type ButtonAsButton = ButtonBaseProps &
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: undefined;
  };

type ButtonAsLink = ButtonBaseProps & {
  href: string;
  target?: string;
  rel?: string;
};

type ButtonProps = ButtonAsButton | ButtonAsLink;

export function Button({
  variant = 'default',
  size = 'medium',
  children,
  ...props
}: ButtonProps): ReactNode {
  const classes = [
    'button',
    variant === 'primary' ? 'primary' : '',
    size === 'small' ? 'small' : size === 'large' ? 'large' : '',
  ]
    .filter(Boolean)
    .join(' ');

  if ('href' in props && props.href !== undefined && props.href !== '') {
    const { href, target, rel } = props;
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  const { href: _, ...buttonProps } = props as ButtonAsButton;
  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}

Version 4

import type { ReactNode, ButtonHTMLAttributes } from 'react';
import Link from 'next/link';

type ButtonBaseProps = {
  variant?: 'default' | 'primary';
  size?: 'small' | 'medium' | 'large';
  children: ReactNode;
};

type ButtonAsButton = ButtonBaseProps &
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: undefined;
  };

type ButtonAsLink = ButtonBaseProps & {
  href: string;
  target?: string;
  rel?: string;
};

type ButtonProps = ButtonAsButton | ButtonAsLink;

export function Button({
  variant = 'default',
  size = 'medium',
  children,
  ...props
}: ButtonProps): ReactNode {
  const classes = [
    'button',
    variant === 'primary' ? 'primary' : '',
    size === 'small' ? 'small' : size === 'large' ? 'large' : '',
  ]
    .filter(Boolean)
    .join(' ');

  if ('href' in props && props.href) {
    const { href, target, rel } = props;
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  const { href: _, ...buttonProps } = props as ButtonAsButton;
  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}

Version 5 (latest)

import type { ReactNode, ButtonHTMLAttributes } from 'react';
import Link from 'next/link';

type ButtonBaseProps = {
  variant?: 'default' | 'primary';
  size?: 'small' | 'medium' | 'large';
  children: ReactNode;
};

type ButtonAsButton = ButtonBaseProps &
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> & {
    href?: undefined;
  };

type ButtonAsLink = ButtonBaseProps & {
  href: string;
  target?: string;
  rel?: string;
};

type ButtonProps = ButtonAsButton | ButtonAsLink;

export function Button({
  variant = 'default',
  size = 'medium',
  children,
  ...props
}: ButtonProps): ReactNode {
  const classes = [
    'button',
    variant === 'primary' ? 'primary' : '',
    size === 'small' ? 'small' : size === 'large' ? 'large' : '',
  ]
    .filter(Boolean)
    .join(' ');

  if ('href' in props && props.href) {
    const { href, target, rel } = props;
    return (
      <Link href={href} className={classes} target={target} rel={rel}>
        {children}
      </Link>
    );
  }

  const { href: _, ...buttonProps } = props as ButtonAsButton;
  return (
    <button className={classes} {...buttonProps}>
      {children}
    </button>
  );
}

packages/cwc-website/src/components/ui/Icon.tsx

2 versions

Version 1

import type { ReactNode } from 'react';
import type { IconType } from 'react-icons';
import {
  FaGithub,
  FaTwitter,
  FaLinkedin,
  FaYoutube,
  FaDiscord,
  FaCode,
  FaLightbulb,
  FaRocket,
  FaUsers,
  FaBook,
  FaTerminal,
} from 'react-icons/fa';
import { IoMail } from 'react-icons/io5';

const iconMap = {
  github: FaGithub,
  twitter: FaTwitter,
  linkedin: FaLinkedin,
  youtube: FaYoutube,
  discord: FaDiscord,
  email: IoMail,
  code: FaCode,
  lightbulb: FaLightbulb,
  rocket: FaRocket,
  users: FaUsers,
  book: FaBook,
  terminal: FaTerminal,
} as const;

type IconName = keyof typeof iconMap;

type IconProps = {
  name: IconName;
  size?: number;
  className?: string;
};

export function Icon({ name, size = 24, className }: IconProps): ReactNode {
  const IconComponent: IconType = iconMap[name];
  return <IconComponent size={size} className={className} />;
}

export type { IconName };

Version 2 (latest)

import type { ReactNode } from 'react';
import type { IconType } from 'react-icons';
import {
  FaGithub,
  FaTwitter,
  FaLinkedin,
  FaYoutube,
  FaDiscord,
  FaCode,
  FaLightbulb,
  FaRocket,
  FaUsers,
  FaBook,
  FaTerminal,
} from 'react-icons/fa';
import { IoMail } from 'react-icons/io5';

const iconMap = {
  github: FaGithub,
  twitter: FaTwitter,
  linkedin: FaLinkedin,
  youtube: FaYoutube,
  discord: FaDiscord,
  email: IoMail,
  code: FaCode,
  lightbulb: FaLightbulb,
  rocket: FaRocket,
  users: FaUsers,
  book: FaBook,
  terminal: FaTerminal,
} as const;

type IconName = keyof typeof iconMap;

type IconProps = {
  name: IconName;
  size?: number;
  className?: string;
};

export function Icon({ name, size = 24, className }: IconProps): ReactNode {
  const IconComponent: IconType = iconMap[name];
  return <IconComponent size={size} className={className} />;
}

export type { IconName };

packages/cwc-website/src/components/ui/index.ts

2 versions

Version 1

export { Button } from './Button';
export { Icon, type IconName } from './Icon';

Version 2 (latest)

export { Button } from './Button';
export { Icon, type IconName } from './Icon';

packages/cwc-website/src/lib/fonts.ts

2 versions

Version 1

import { Source_Sans_3 } from 'next/font/google';

export const sourceSans = Source_Sans_3({
  subsets: ['latin'],
  weight: ['300', '700', '900'],
  display: 'swap',
  variable: '--font-source-sans',
});

Version 2 (latest)

import { Source_Sans_3 } from 'next/font/google';

export const sourceSans = Source_Sans_3({
  subsets: ['latin'],
  weight: ['300', '700', '900'],
  display: 'swap',
  variable: '--font-source-sans',
});

packages/cwc-website/src/templates/site/components/MenuToggle.tsx

2 versions

Version 1

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

export function MenuToggle(): ReactNode {
  const { toggle } = useMenu();

  return (
    <a
      href="#menu"
      onClick={(e) => {
        e.preventDefault();
        toggle();
      }}
      aria-label="Toggle menu"
    >
      Menu
    </a>
  );
}

Version 2 (latest)

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

export function MenuToggle(): ReactNode {
  const { toggle } = useMenu();

  return (
    <a
      href="#menu"
      onClick={(e) => {
        e.preventDefault();
        toggle();
      }}
      aria-label="Toggle menu"
    >
      Menu
    </a>
  );
}

packages/cwc-website/src/templates/site/components/PreloadHandler.tsx

2 versions

Version 1

'use client';

import { useEffect } from 'react';

export function PreloadHandler(): null {
  useEffect(() => {
    // Remove is-preload class after brief delay to enable animations
    // This matches the original template behavior
    const timeout = setTimeout(() => {
      document.body.classList.remove('is-preload');
    }, 100);

    // Touch detection
    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    if (isTouch) {
      document.body.classList.add('is-touch');
    }

    return () => {
      clearTimeout(timeout);
      document.body.classList.remove('is-touch');
    };
  }, []);

  return null;
}

Version 2 (latest)

'use client';

import { useEffect } from 'react';

export function PreloadHandler(): null {
  useEffect(() => {
    // Remove is-preload class after brief delay to enable animations
    // This matches the original template behavior
    const timeout = setTimeout(() => {
      document.body.classList.remove('is-preload');
    }, 100);

    // Touch detection
    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    if (isTouch) {
      document.body.classList.add('is-touch');
    }

    return () => {
      clearTimeout(timeout);
      document.body.classList.remove('is-touch');
    };
  }, []);

  return null;
}

packages/cwc-website/src/templates/site/components/SiteFooter.tsx

6 versions

Version 1

import type { ReactNode } from 'react';
import { FaGithub, FaTwitter } from 'react-icons/fa';
import { IoMail } from 'react-icons/io5';

export function SiteFooter(): ReactNode {
  return (
    <footer id="footer">
      <div className="inner">
        <section>
          <h2>Get in touch</h2>
          <p>
            Have questions or feedback? Reach out to us at{' '}
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </p>
        </section>
        <section>
          <h2>Follow</h2>
          <ul className="icons">
            <li>
              <a
                href="https://twitter.com/codingwclaude"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Twitter"
              >
                <FaTwitter />
              </a>
            </li>
            <li>
              <a
                href="https://github.com/codingwithclaude"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="GitHub"
              >
                <FaGithub />
              </a>
            </li>
            <li>
              <a href="mailto:support@codingwithclaude.dev" aria-label="Email">
                <IoMail />
              </a>
            </li>
          </ul>
        </section>
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

Version 2

import type { ReactNode } from 'react';

export function SiteFooter(): ReactNode {
  return (
    <footer id="footer">
      <div className="inner">
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

Version 3

import type { ReactNode } from 'react';

type SiteFooterProps = {
  debugUi?: boolean;
};

export function SiteFooter({ debugUi }: SiteFooterProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <footer id="footer" className={className} data-component={debugUi ? 'SiteFooter' : undefined}>
      <div className="inner">
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

Version 4

import type { ReactNode } from 'react';

type SiteFooterProps = {
  debugUi?: boolean;
};

export function SiteFooter({ debugUi }: SiteFooterProps): ReactNode {
  const className = debugUi === true ? 'debug-ui-template' : undefined;

  return (
    <footer id="footer" className={className} data-component={debugUi === true ? 'SiteFooter' : undefined}>
      <div className="inner">
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

Version 5

import type { ReactNode } from 'react';

type SiteFooterProps = {
  debugUi?: boolean;
};

export function SiteFooter({ debugUi }: SiteFooterProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <footer id="footer" className={className} data-component={debugUi ? 'SiteFooter' : undefined}>
      <div className="inner">
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

Version 6 (latest)

import type { ReactNode } from 'react';

type SiteFooterProps = {
  debugUi?: boolean;
};

export function SiteFooter({ debugUi }: SiteFooterProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <footer id="footer" className={className} data-component={debugUi ? 'SiteFooter' : undefined}>
      <div className="inner">
        <ul className="copyright">
          <li>&copy; Coding with Claude. All rights reserved.</li>
          <li>
            <a href="mailto:support@codingwithclaude.dev">
              support@codingwithclaude.dev
            </a>
          </li>
          <li>
            Design: <a href="https://html5up.net">HTML5 UP</a>
          </li>
        </ul>
      </div>
    </footer>
  );
}

packages/cwc-website/src/templates/site/components/SiteHeader.tsx

5 versions

Version 1

import type { ReactNode } from 'react';
import { MenuToggle } from './MenuToggle';

export function SiteHeader(): ReactNode {
  return (
    <header id="header">
      <div className="inner">
        <a href="/" className="logo">
          <span className="symbol">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="40" height="40" rx="8" fill="#333333" />
              <path
                d="M12 14h16M12 20h12M12 26h8"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </span>
          <span className="title">Coding with Claude</span>
        </a>
        <nav>
          <ul>
            <li>
              <MenuToggle />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

Version 2

import type { ReactNode } from 'react';
import { MenuToggle } from './MenuToggle';

type SiteHeaderProps = {
  debugUi?: boolean;
};

export function SiteHeader({ debugUi }: SiteHeaderProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <header id="header" className={className} data-component={debugUi ? 'SiteHeader' : undefined}>
      <div className="inner">
        <a href="/" className="logo">
          <span className="symbol">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="40" height="40" rx="8" fill="#333333" />
              <path
                d="M12 14h16M12 20h12M12 26h8"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </span>
          <span className="title">Coding with Claude</span>
        </a>
        <nav>
          <ul>
            <li>
              <MenuToggle />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

Version 3

import type { ReactNode } from 'react';
import { MenuToggle } from './MenuToggle';

type SiteHeaderProps = {
  debugUi?: boolean;
};

export function SiteHeader({ debugUi }: SiteHeaderProps): ReactNode {
  const className = debugUi === true ? 'debug-ui-template' : undefined;

  return (
    <header id="header" className={className} data-component={debugUi === true ? 'SiteHeader' : undefined}>
      <div className="inner">
        <a href="/" className="logo">
          <span className="symbol">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="40" height="40" rx="8" fill="#333333" />
              <path
                d="M12 14h16M12 20h12M12 26h8"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </span>
          <span className="title">Coding with Claude</span>
        </a>
        <nav>
          <ul>
            <li>
              <MenuToggle />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

Version 4

import type { ReactNode } from 'react';
import { MenuToggle } from './MenuToggle';

type SiteHeaderProps = {
  debugUi?: boolean;
};

export function SiteHeader({ debugUi }: SiteHeaderProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <header id="header" className={className} data-component={debugUi ? 'SiteHeader' : undefined}>
      <div className="inner">
        <a href="/" className="logo">
          <span className="symbol">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="40" height="40" rx="8" fill="#333333" />
              <path
                d="M12 14h16M12 20h12M12 26h8"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </span>
          <span className="title">Coding with Claude</span>
        </a>
        <nav>
          <ul>
            <li>
              <MenuToggle />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

Version 5 (latest)

import type { ReactNode } from 'react';
import { MenuToggle } from './MenuToggle';

type SiteHeaderProps = {
  debugUi?: boolean;
};

export function SiteHeader({ debugUi }: SiteHeaderProps): ReactNode {
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <header id="header" className={className} data-component={debugUi ? 'SiteHeader' : undefined}>
      <div className="inner">
        <a href="/" className="logo">
          <span className="symbol">
            <svg
              width="40"
              height="40"
              viewBox="0 0 40 40"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="40" height="40" rx="8" fill="#333333" />
              <path
                d="M12 14h16M12 20h12M12 26h8"
                stroke="#ffffff"
                strokeWidth="2"
                strokeLinecap="round"
              />
            </svg>
          </span>
          <span className="title">Coding with Claude</span>
        </a>
        <nav>
          <ul>
            <li>
              <MenuToggle />
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

packages/cwc-website/src/templates/site/components/SiteLayout.tsx

5 versions

Version 1

import type { ReactNode } from 'react';
import { MenuProvider } from '../hooks/useMenu';
import { SiteHeader } from './SiteHeader';
import { SiteMenu } from './SiteMenu';
import { SiteFooter } from './SiteFooter';
import { PreloadHandler } from './PreloadHandler';

type SiteLayoutProps = {
  children: ReactNode;
};

export function SiteLayout({ children }: SiteLayoutProps): ReactNode {
  return (
    <MenuProvider>
      <div id="wrapper">
        <SiteHeader />
        <SiteMenu />
        <div id="main">
          <div className="inner">{children}</div>
        </div>
        <SiteFooter />
      </div>
      <PreloadHandler />
    </MenuProvider>
  );
}

Version 2

import type { ReactNode } from 'react';
import { MenuProvider } from '../hooks/useMenu';
import { SiteHeader } from './SiteHeader';
import { SiteMenu } from './SiteMenu';
import { SiteFooter } from './SiteFooter';
import { PreloadHandler } from './PreloadHandler';

type SiteLayoutProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function SiteLayout({ children, debugUi }: SiteLayoutProps): ReactNode {
  const wrapperClass = debugUi ? 'debug-ui-template' : undefined;
  const mainClass = debugUi ? 'debug-ui-template' : undefined;

  return (
    <MenuProvider>
      <div id="wrapper" className={wrapperClass} data-component={debugUi ? 'SiteLayout (#wrapper)' : undefined}>
        <SiteHeader debugUi={debugUi} />
        <SiteMenu debugUi={debugUi} />
        <div id="main" className={mainClass} data-component={debugUi ? 'SiteLayout (#main)' : undefined}>
          <div className="inner">{children}</div>
        </div>
        <SiteFooter debugUi={debugUi} />
      </div>
      <PreloadHandler />
    </MenuProvider>
  );
}

Version 3

import type { ReactNode } from 'react';
import { MenuProvider } from '../hooks/useMenu';
import { SiteHeader } from './SiteHeader';
import { SiteMenu } from './SiteMenu';
import { SiteFooter } from './SiteFooter';
import { PreloadHandler } from './PreloadHandler';

type SiteLayoutProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function SiteLayout({ children, debugUi }: SiteLayoutProps): ReactNode {
  const wrapperClass = debugUi === true ? 'debug-ui-template' : undefined;
  const mainClass = debugUi === true ? 'debug-ui-template' : undefined;

  return (
    <MenuProvider>
      <div id="wrapper" className={wrapperClass} data-component={debugUi === true ? 'SiteLayout (#wrapper)' : undefined}>
        <SiteHeader debugUi={debugUi} />
        <SiteMenu debugUi={debugUi} />
        <div id="main" className={mainClass} data-component={debugUi === true ? 'SiteLayout (#main)' : undefined}>
          <div className="inner">{children}</div>
        </div>
        <SiteFooter debugUi={debugUi} />
      </div>
      <PreloadHandler />
    </MenuProvider>
  );
}

Version 4

import type { ReactNode } from 'react';
import { MenuProvider } from '../hooks/useMenu';
import { SiteHeader } from './SiteHeader';
import { SiteMenu } from './SiteMenu';
import { SiteFooter } from './SiteFooter';
import { PreloadHandler } from './PreloadHandler';

type SiteLayoutProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function SiteLayout({ children, debugUi }: SiteLayoutProps): ReactNode {
  const wrapperClass = debugUi ? 'debug-ui-template' : undefined;
  const mainClass = debugUi ? 'debug-ui-template' : undefined;

  return (
    <MenuProvider>
      <div id="wrapper" className={wrapperClass} data-component={debugUi ? 'SiteLayout (#wrapper)' : undefined}>
        <SiteHeader debugUi={debugUi} />
        <SiteMenu debugUi={debugUi} />
        <div id="main" className={mainClass} data-component={debugUi ? 'SiteLayout (#main)' : undefined}>
          <div className="inner">{children}</div>
        </div>
        <SiteFooter debugUi={debugUi} />
      </div>
      <PreloadHandler />
    </MenuProvider>
  );
}

Version 5 (latest)

import type { ReactNode } from 'react';
import { MenuProvider } from '../hooks/useMenu';
import { SiteHeader } from './SiteHeader';
import { SiteMenu } from './SiteMenu';
import { SiteFooter } from './SiteFooter';
import { PreloadHandler } from './PreloadHandler';

type SiteLayoutProps = {
  children: ReactNode;
  debugUi?: boolean;
};

export function SiteLayout({ children, debugUi }: SiteLayoutProps): ReactNode {
  const wrapperClass = debugUi ? 'debug-ui-template' : undefined;
  const mainClass = debugUi ? 'debug-ui-template' : undefined;

  return (
    <MenuProvider>
      <div id="wrapper" className={wrapperClass} data-component={debugUi ? 'SiteLayout (#wrapper)' : undefined}>
        <SiteHeader debugUi={debugUi} />
        <SiteMenu debugUi={debugUi} />
        <div id="main" className={mainClass} data-component={debugUi ? 'SiteLayout (#main)' : undefined}>
          <div className="inner">{children}</div>
        </div>
        <SiteFooter debugUi={debugUi} />
      </div>
      <PreloadHandler />
    </MenuProvider>
  );
}

packages/cwc-website/src/templates/site/components/SiteMenu.tsx

5 versions

Version 1

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

export function SiteMenu(): ReactNode {
  const { isOpen, close } = useMenu();

  return (
    <nav id="menu" aria-hidden={!isOpen}>
      <h2>Menu</h2>
      <ul>
        <li>
          <a href="/" onClick={close}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            Projects
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            About
          </a>
        </li>
      </ul>
      <button
        className="close"
        onClick={close}
        aria-label="Close menu"
        type="button"
      />
    </nav>
  );
}

Version 2

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

type SiteMenuProps = {
  debugUi?: boolean;
};

export function SiteMenu({ debugUi }: SiteMenuProps): ReactNode {
  const { isOpen, close } = useMenu();
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <nav id="menu" aria-hidden={!isOpen} className={className} data-component={debugUi ? 'SiteMenu' : undefined}>
      <h2>Menu</h2>
      <ul>
        <li>
          <a href="/" onClick={close}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            Projects
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            About
          </a>
        </li>
      </ul>
      <button
        className="close"
        onClick={close}
        aria-label="Close menu"
        type="button"
      />
    </nav>
  );
}

Version 3

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

type SiteMenuProps = {
  debugUi?: boolean;
};

export function SiteMenu({ debugUi }: SiteMenuProps): ReactNode {
  const { isOpen, close } = useMenu();
  const className = debugUi === true ? 'debug-ui-template' : undefined;

  return (
    <nav id="menu" aria-hidden={!isOpen} className={className} data-component={debugUi === true ? 'SiteMenu' : undefined}>
      <h2>Menu</h2>
      <ul>
        <li>
          <a href="/" onClick={close}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            Projects
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            About
          </a>
        </li>
      </ul>
      <button
        className="close"
        onClick={close}
        aria-label="Close menu"
        type="button"
      />
    </nav>
  );
}

Version 4

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

type SiteMenuProps = {
  debugUi?: boolean;
};

export function SiteMenu({ debugUi }: SiteMenuProps): ReactNode {
  const { isOpen, close } = useMenu();
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <nav id="menu" aria-hidden={!isOpen} className={className} data-component={debugUi ? 'SiteMenu' : undefined}>
      <h2>Menu</h2>
      <ul>
        <li>
          <a href="/" onClick={close}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            Projects
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            About
          </a>
        </li>
      </ul>
      <button
        className="close"
        onClick={close}
        aria-label="Close menu"
        type="button"
      />
    </nav>
  );
}

Version 5 (latest)

'use client';

import type { ReactNode } from 'react';
import { useMenu } from '../hooks/useMenu';

type SiteMenuProps = {
  debugUi?: boolean;
};

export function SiteMenu({ debugUi }: SiteMenuProps): ReactNode {
  const { isOpen, close } = useMenu();
  const className = debugUi ? 'debug-ui-template' : undefined;

  return (
    <nav id="menu" aria-hidden={!isOpen} className={className} data-component={debugUi ? 'SiteMenu' : undefined}>
      <h2>Menu</h2>
      <ul>
        <li>
          <a href="/" onClick={close}>
            Home
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            Projects
          </a>
        </li>
        <li>
          <a href="#" onClick={close}>
            About
          </a>
        </li>
      </ul>
      <button
        className="close"
        onClick={close}
        aria-label="Close menu"
        type="button"
      />
    </nav>
  );
}

packages/cwc-website/src/templates/site/hooks/useBreakpoint.ts

2 versions

Version 1

'use client';

import { useState, useEffect } from 'react';

const breakpoints = {
  xlarge: '(min-width: 1281px) and (max-width: 1680px)',
  large: '(min-width: 981px) and (max-width: 1280px)',
  medium: '(min-width: 737px) and (max-width: 980px)',
  small: '(min-width: 481px) and (max-width: 736px)',
  xsmall: '(min-width: 361px) and (max-width: 480px)',
  xxsmall: '(max-width: 360px)',
} as const;

type Breakpoint = keyof typeof breakpoints | 'default';

export function useBreakpoint(): Breakpoint {
  const [current, setCurrent] = useState<Breakpoint>('default');

  useEffect(() => {
    const queries = Object.entries(breakpoints).map(([name, query]) => ({
      name: name as keyof typeof breakpoints,
      mql: window.matchMedia(query),
    }));

    function update(): void {
      const match = queries.find((q) => q.mql.matches);
      setCurrent(match ? match.name : 'default');
    }

    update();

    queries.forEach((q) => {
      q.mql.addEventListener('change', update);
    });

    return () => {
      queries.forEach((q) => {
        q.mql.removeEventListener('change', update);
      });
    };
  }, []);

  return current;
}

export type { Breakpoint };

Version 2 (latest)

'use client';

import { useState, useEffect } from 'react';

const breakpoints = {
  xlarge: '(min-width: 1281px) and (max-width: 1680px)',
  large: '(min-width: 981px) and (max-width: 1280px)',
  medium: '(min-width: 737px) and (max-width: 980px)',
  small: '(min-width: 481px) and (max-width: 736px)',
  xsmall: '(min-width: 361px) and (max-width: 480px)',
  xxsmall: '(max-width: 360px)',
} as const;

type Breakpoint = keyof typeof breakpoints | 'default';

export function useBreakpoint(): Breakpoint {
  const [current, setCurrent] = useState<Breakpoint>('default');

  useEffect(() => {
    const queries = Object.entries(breakpoints).map(([name, query]) => ({
      name: name as keyof typeof breakpoints,
      mql: window.matchMedia(query),
    }));

    function update(): void {
      const match = queries.find((q) => q.mql.matches);
      setCurrent(match ? match.name : 'default');
    }

    update();

    queries.forEach((q) => {
      q.mql.addEventListener('change', update);
    });

    return () => {
      queries.forEach((q) => {
        q.mql.removeEventListener('change', update);
      });
    };
  }, []);

  return current;
}

export type { Breakpoint };

packages/cwc-website/src/templates/site/hooks/useMenu.tsx

2 versions

Version 1

'use client';

import {
  createContext,
  useContext,
  useState,
  useCallback,
  useEffect,
  type ReactNode,
} from 'react';

type MenuContextValue = {
  isOpen: boolean;
  toggle: () => void;
  open: () => void;
  close: () => void;
};

const MenuContext = createContext<MenuContextValue | undefined>(undefined);

type MenuProviderProps = {
  children: ReactNode;
};

export function MenuProvider({ children }: MenuProviderProps): ReactNode {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);

  // Sync menu state to body class for CSS
  useEffect(() => {
    if (isOpen) {
      document.body.classList.add('is-menu-visible');
    } else {
      document.body.classList.remove('is-menu-visible');
    }
  }, [isOpen]);

  // Close on Escape key
  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent): void {
      if (event.key === 'Escape' && isOpen) {
        close();
      }
    }

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, close]);

  return (
    <MenuContext.Provider value={{ isOpen, toggle, open, close }}>
      {children}
    </MenuContext.Provider>
  );
}

export function useMenu(): MenuContextValue {
  const context = useContext(MenuContext);
  if (context === undefined) {
    throw new Error('useMenu must be used within a MenuProvider');
  }
  return context;
}

Version 2 (latest)

'use client';

import {
  createContext,
  useContext,
  useState,
  useCallback,
  useEffect,
  type ReactNode,
} from 'react';

type MenuContextValue = {
  isOpen: boolean;
  toggle: () => void;
  open: () => void;
  close: () => void;
};

const MenuContext = createContext<MenuContextValue | undefined>(undefined);

type MenuProviderProps = {
  children: ReactNode;
};

export function MenuProvider({ children }: MenuProviderProps): ReactNode {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);

  // Sync menu state to body class for CSS
  useEffect(() => {
    if (isOpen) {
      document.body.classList.add('is-menu-visible');
    } else {
      document.body.classList.remove('is-menu-visible');
    }
  }, [isOpen]);

  // Close on Escape key
  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent): void {
      if (event.key === 'Escape' && isOpen) {
        close();
      }
    }

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, close]);

  return (
    <MenuContext.Provider value={{ isOpen, toggle, open, close }}>
      {children}
    </MenuContext.Provider>
  );
}

export function useMenu(): MenuContextValue {
  const context = useContext(MenuContext);
  if (context === undefined) {
    throw new Error('useMenu must be used within a MenuProvider');
  }
  return context;
}

packages/cwc-website/src/templates/site/index.ts

3 versions

Version 1

// Site template exports
export { SiteLayout } from './components/SiteLayout';
export { SiteHeader } from './components/SiteHeader';
export { SiteFooter } from './components/SiteFooter';
export { SiteMenu } from './components/SiteMenu';
export { MenuToggle } from './components/MenuToggle';
export { PreloadHandler } from './components/PreloadHandler';
export { MenuProvider, useMenu } from './hooks/useMenu';

Version 2

// Site template exports
export { SiteLayout } from './components/SiteLayout';
export { SiteHeader } from './components/SiteHeader';
export { SiteFooter } from './components/SiteFooter';
export { SiteMenu } from './components/SiteMenu';
export { MenuToggle } from './components/MenuToggle';
export { PreloadHandler } from './components/PreloadHandler';
export { MenuProvider, useMenu } from './hooks/useMenu';
export { useBreakpoint, type Breakpoint } from './hooks/useBreakpoint';

Version 3 (latest)

// Site template exports
export { SiteLayout } from './components/SiteLayout';
export { SiteHeader } from './components/SiteHeader';
export { SiteFooter } from './components/SiteFooter';
export { SiteMenu } from './components/SiteMenu';
export { MenuToggle } from './components/MenuToggle';
export { PreloadHandler } from './components/PreloadHandler';
export { MenuProvider, useMenu } from './hooks/useMenu';
export { useBreakpoint, type Breakpoint } from './hooks/useBreakpoint';

packages/cwc-website/src/templates/site/styles/_base.scss

3 versions

Version 1

@use 'variables' as *;

// Reset and Base Styles
// Derived from HTML5UP Phantom template

// Box sizing
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Reset
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
article,
aside,
footer,
header,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

// Base
html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;

  @include breakpoint-xlarge {
    font-size: 14pt;
  }

  @include breakpoint-large {
    font-size: 12pt;
  }

  @include breakpoint-medium {
    font-size: 12pt;
  }

  @include breakpoint-small {
    font-size: 12pt;
  }

  @include breakpoint-xsmall {
    font-size: 12pt;
  }
}

// Preload animation control
body.is-preload {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

// Typography
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-bg-accent);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing);
  line-height: 1.3;
  margin: 0 0 calc(var(--element-margin) * 0.5) 0;
  text-transform: uppercase;

  a {
    color: inherit;
    text-decoration: none;
  }
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.15em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9em;
}

h6 {
  font-size: 0.7em;
}

p {
  margin: 0 0 var(--element-margin) 0;
}

a {
  color: var(--color-fg);
  text-decoration: underline;
  transition: color var(--duration-transition) ease;

  &:hover {
    color: var(--color-accent1);
    text-decoration: none;
  }
}

strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-accent);
}

em {
  font-style: italic;
}

// Lists
ul {
  list-style: disc;
  margin: 0 0 var(--element-margin) 0;
  padding-left: 1em;

  li {
    padding-left: 0.5em;
  }

  &.alt {
    list-style: none;
    padding-left: 0;

    li {
      border-top: solid var(--border-width) var(--color-border);
      padding: 0.5em 0;

      &:first-child {
        border-top: 0;
        padding-top: 0;
      }
    }
  }
}

// Responsive typography
@include breakpoint-small-and-below {
  h1 {
    font-size: 1.75em;
  }

  h2 {
    font-size: 1.25em;
  }
}

Version 2

@use 'variables' as *;

// Reset and Base Styles
// Derived from HTML5UP Phantom template

// Box sizing
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Reset
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
article,
aside,
footer,
header,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

// Base
html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;

  @include breakpoint-xlarge {
    font-size: 14pt;
  }

  @include breakpoint-large {
    font-size: 12pt;
  }

  @include breakpoint-medium {
    font-size: 12pt;
  }

  @include breakpoint-small {
    font-size: 12pt;
  }

  @include breakpoint-xsmall {
    font-size: 12pt;
  }
}

// Preload animation control
body.is-preload {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

// Typography
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-bg-accent);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  line-height: 1.3;
  margin: 0 0 calc(var(--element-margin) * 0.5) 0;

  a {
    color: inherit;
    text-decoration: none;
  }
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.15em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9em;
}

h6 {
  font-size: 0.7em;
}

p {
  margin: 0 0 var(--element-margin) 0;
}

a {
  color: var(--color-fg);
  text-decoration: underline;
  transition: color var(--duration-transition) ease;

  &:hover {
    color: var(--color-accent1);
    text-decoration: none;
  }
}

strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-accent);
}

em {
  font-style: italic;
}

// Lists
ul {
  list-style: disc;
  margin: 0 0 var(--element-margin) 0;
  padding-left: 1em;

  li {
    padding-left: 0.5em;
  }

  &.alt {
    list-style: none;
    padding-left: 0;

    li {
      border-top: solid var(--border-width) var(--color-border);
      padding: 0.5em 0;

      &:first-child {
        border-top: 0;
        padding-top: 0;
      }
    }
  }
}

// Responsive typography
@include breakpoint-small-and-below {
  h1 {
    font-size: 1.75em;
  }

  h2 {
    font-size: 1.25em;
  }
}

Version 3 (latest)

@use 'variables' as *;

// Reset and Base Styles
// Derived from HTML5UP Phantom template

// Box sizing
*,
*::before,
*::after {
  box-sizing: border-box;
}

// Reset
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ul,
li,
article,
aside,
footer,
header,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

// Base
html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;

  @include breakpoint-xlarge {
    font-size: 14pt;
  }

  @include breakpoint-large {
    font-size: 12pt;
  }

  @include breakpoint-medium {
    font-size: 12pt;
  }

  @include breakpoint-small {
    font-size: 12pt;
  }

  @include breakpoint-xsmall {
    font-size: 12pt;
  }
}

// Preload animation control
body.is-preload {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

// Typography
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-bg-accent);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  line-height: 1.3;
  margin: 0 0 calc(var(--element-margin) * 0.5) 0;

  a {
    color: inherit;
    text-decoration: none;
  }
}

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.15em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.9em;
}

h6 {
  font-size: 0.7em;
}

p {
  margin: 0 0 var(--element-margin) 0;
}

a {
  color: var(--color-fg);
  text-decoration: underline;
  transition: color var(--duration-transition) ease;

  &:hover {
    color: var(--color-accent1);
    text-decoration: none;
  }
}

strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-accent);
}

em {
  font-style: italic;
}

// Lists
ul {
  list-style: disc;
  margin: 0 0 var(--element-margin) 0;
  padding-left: 1em;

  li {
    padding-left: 0.5em;
  }

  &.alt {
    list-style: none;
    padding-left: 0;

    li {
      border-top: solid var(--border-width) var(--color-border);
      padding: 0.5em 0;

      &:first-child {
        border-top: 0;
        padding-top: 0;
      }
    }
  }
}

// Responsive typography
@include breakpoint-small-and-below {
  h1 {
    font-size: 1.75em;
  }

  h2 {
    font-size: 1.25em;
  }
}

packages/cwc-website/src/templates/site/styles/_components.scss

9 versions

Version 1

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Hover effects (desktop only)
    &:hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content
  body.is-touch & article {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  letter-spacing: var(--letter-spacing);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 0.7em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: var(--font-weight-bold);
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 2

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Hover effects (desktop only)
    &:hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content
  body.is-touch & article {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 3

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 4

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 5

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 6

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: var(--gutter) 0 calc(var(--gutter) * 2) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 7

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: var(--gutter) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 8

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development (content components - red)
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Debug UI - template components (orange)
.debug-ui-template {
  outline: 2px dashed orange !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: orange;
    color: black;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: var(--gutter) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

Version 9 (latest)

@use 'variables' as *;

// Component Styles
// Derived from HTML5UP Phantom template

// Debug UI - show outlines for development (content components - red)
.debug-ui {
  outline: 2px dashed red !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Debug UI - template components (orange)
.debug-ui-template {
  outline: 2px dashed orange !important;
  outline-offset: 2px;
  position: relative;

  &[data-component]::before {
    content: attr(data-component);
    position: absolute;
    top: 0;
    left: 0;
    background: orange;
    color: black;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    z-index: 10000;
    pointer-events: none;
  }
}

// Tiles Grid
.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gutter) * -0.5);
  padding: var(--gutter) 0;

  article {
    position: relative;
    width: calc(33.33333% - var(--gutter));
    margin: calc(var(--gutter) * 0.5);
    overflow: hidden;

    > .image {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      position: relative;

      // Gradient backgrounds for each style
      &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.85;
        z-index: 1;
        transition: opacity var(--duration-transition) ease;
      }

      // Pattern overlay
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 L50 0 M50 100 L100 50' stroke='%23ffffff' stroke-width='1' opacity='0.15'/%3E%3C/svg%3E");
        background-size: 100px 100px;
        opacity: 0.25;
        z-index: 2;
      }
    }

    > a {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: var(--gutter);
      text-decoration: none;
      z-index: 3;
      transition: transform var(--duration-transition) ease;

      h2 {
        color: var(--color-fg-accent);
        font-size: 1.1em;
        margin: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        letter-spacing: normal;
      }

      .content {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height var(--duration-transition) ease, opacity var(--duration-transition) ease;

        p {
          color: var(--color-fg-accent);
          margin: 0.5em 0 0 0;
          font-size: 0.9em;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }

    // Show content always when .show-content class is present
    &.show-content > a .content {
      max-height: 10em;
      opacity: 1;
    }

    // Hover effects (desktop only) - for tiles without show-content
    &:not(.show-content):hover {
      > .image::before {
        opacity: 0.95;
      }

      > a {
        .content {
          max-height: 10em;
          opacity: 1;
        }
      }
    }

    // Style variants with gradient backgrounds
    &.style1 > .image {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }
    &.style1 > .image::before {
      background: linear-gradient(135deg, var(--color-accent1) 0%, color-mix(in srgb, var(--color-accent1) 60%, var(--color-bg-accent)) 100%);
    }

    &.style2 > .image {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }
    &.style2 > .image::before {
      background: linear-gradient(135deg, var(--color-accent2) 0%, color-mix(in srgb, var(--color-accent2) 60%, var(--color-bg-accent)) 100%);
    }

    &.style3 > .image {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }
    &.style3 > .image::before {
      background: linear-gradient(135deg, var(--color-accent3) 0%, color-mix(in srgb, var(--color-accent3) 60%, var(--color-bg-accent)) 100%);
    }

    &.style4 > .image {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }
    &.style4 > .image::before {
      background: linear-gradient(135deg, var(--color-accent4) 0%, color-mix(in srgb, var(--color-accent4) 60%, var(--color-bg-accent)) 100%);
    }

    &.style5 > .image {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }
    &.style5 > .image::before {
      background: linear-gradient(135deg, var(--color-accent5) 0%, color-mix(in srgb, var(--color-accent5) 60%, var(--color-bg-accent)) 100%);
    }

    &.style6 > .image {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
    &.style6 > .image::before {
      background: linear-gradient(135deg, var(--color-accent6) 0%, color-mix(in srgb, var(--color-accent6) 60%, var(--color-bg-accent)) 100%);
    }
  }

  // Touch devices: always show content (for tiles without show-content)
  body.is-touch & article:not(.show-content) {
    > a .content {
      max-height: 10em;
      opacity: 1;
    }
  }

  // Responsive columns
  @include breakpoint-medium {
    article {
      width: calc(50% - var(--gutter));
    }
  }

  @include breakpoint-small-and-below {
    margin: calc(var(--gutter) * -0.25);

    article {
      width: calc(50% - calc(var(--gutter) * 0.5));
      margin: calc(var(--gutter) * 0.25);
    }
  }

  @include breakpoint-xsmall {
    article {
      width: calc(100% - calc(var(--gutter) * 0.5));
    }
  }
}

// Buttons
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  appearance: none;
  background: transparent;
  border: solid var(--border-width) var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-bg-accent);
  cursor: pointer;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  height: var(--element-height);
  line-height: calc(var(--element-height) - calc(var(--border-width) * 2));
  padding: 0 2em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.9em;
  transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

  &:hover {
    border-color: var(--color-accent1);
    color: var(--color-accent1);
  }

  &.primary {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-fg-accent);

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.small {
    font-size: 0.6em;
    height: calc(var(--element-height) * 0.9);
    line-height: calc(calc(var(--element-height) * 0.9) - calc(var(--border-width) * 2));
    padding: 0 1.5em;
  }

  &.large {
    font-size: 0.8em;
    height: calc(var(--element-height) * 1.1);
    line-height: calc(calc(var(--element-height) * 1.1) - calc(var(--border-width) * 2));
    padding: 0 2.5em;
  }
}

// Icons (social links, etc.)
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;

  li {
    padding: 0;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border: solid var(--border-width) var(--color-border);
    border-radius: 100%;
    color: var(--color-bg-accent);
    text-decoration: none;
    transition: background var(--duration-transition) ease, color var(--duration-transition) ease, border-color var(--duration-transition) ease;

    svg {
      width: 1em;
      height: 1em;
    }

    &:hover {
      background: var(--color-accent1);
      border-color: var(--color-accent1);
      color: var(--color-fg-accent);
    }
  }

  &.style2 {
    a {
      border: 0;
      width: 2em;
      height: 2em;
    }
  }
}

// Actions (button groups)
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: var(--element-margin) 0 0 0;
  padding: 0;

  li {
    padding: 0;
  }

  &.stacked {
    flex-direction: column;
  }
}

// Page header (intro section)
.page-header {
  text-align: center;
  padding: var(--gutter) 0;

  h1 {
    margin-bottom: 0.5em;
  }

  p {
    color: var(--color-fg);
    font-size: 1em;
    max-width: 40em;
    margin: 0 auto;
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) 0;
  }
}

packages/cwc-website/src/templates/site/styles/_layout.scss

4 versions

Version 1

@use 'variables' as *;

// Layout Styles
// Derived from HTML5UP Phantom template

// Wrapper
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;

  > * {
    position: relative;
  }

  // Menu visibility state
  body.is-menu-visible & {
    &::before {
      opacity: 1;
      visibility: visible;
    }
  }

  &::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: calc(var(--z-index-base) + 1);
    transition: opacity var(--duration-menu) ease, visibility var(--duration-menu);
  }
}

// Header
#header {
  display: flex;
  background: var(--color-bg);
  cursor: default;
  padding: calc(var(--gutter) * 1.5) var(--gutter);
  position: relative;
  z-index: 2;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--inner-width);
    margin: 0 auto;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-bg-accent);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing);
    text-transform: uppercase;
    font-size: 1em;
    gap: 0.75em;

    .symbol {
      display: flex;
      align-items: center;

      svg,
      img {
        height: 2em;
        width: auto;
      }
    }

    .title {
      white-space: nowrap;
    }
  }

  nav {
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1em;

      li {
        padding: 0;

        a {
          display: block;
          color: var(--color-bg-accent);
          font-weight: var(--font-weight-bold);
          letter-spacing: var(--letter-spacing);
          text-transform: uppercase;
          font-size: 0.7em;
          text-decoration: none;
          padding: 0.5em 1em;
          transition: color var(--duration-transition) ease;

          &:hover {
            color: var(--color-accent1);
          }

          // Menu toggle button styling
          &[href="#menu"] {
            position: relative;
            padding-right: 2.5em;

            &::before {
              content: '';
              display: block;
              width: 1.25em;
              height: 1.25em;
              position: absolute;
              right: 0.5em;
              top: 50%;
              transform: translateY(-50%);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 0.75) var(--gutter);

    .logo {
      font-size: 0.9em;
    }

    nav ul li a {
      font-size: 0.6em;
    }
  }
}

// Menu (Off-canvas)
#menu {
  background: var(--color-bg-accent);
  color: var(--color-fg-accent);
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  padding: var(--gutter);
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(var(--menu-width));
  width: var(--menu-width);
  z-index: calc(var(--z-index-base) + 2);
  transition: transform var(--duration-menu) ease, visibility var(--duration-menu);
  visibility: hidden;

  body.is-menu-visible & {
    transform: translateX(0);
    visibility: visible;
  }

  h2 {
    color: var(--color-fg-accent);
    margin-bottom: 1em;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-top: solid 1px rgba(255, 255, 255, 0.15);
      padding: 0;

      &:first-child {
        border-top: 0;
      }

      a {
        display: block;
        color: var(--color-fg-accent);
        padding: 0.75em 0;
        text-decoration: none;
        font-weight: var(--font-weight-bold-alt);
        letter-spacing: var(--letter-spacing);
        text-transform: uppercase;
        font-size: 0.8em;
        transition: color var(--duration-transition) ease;

        &:hover {
          color: var(--color-accent1);
        }
      }
    }
  }

  .close {
    position: absolute;
    top: var(--gutter);
    right: var(--gutter);
    width: 2em;
    height: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.5em;
      height: 2px;
      background: var(--color-fg-accent);
      transition: background var(--duration-transition) ease;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover::before,
    &:hover::after {
      background: var(--color-accent1);
    }
  }

  @include breakpoint-small-and-below {
    width: 75%;
    max-width: none;
    transform: translateX(100%);
  }
}

// Main Content
#main {
  flex: 1;
  background: var(--color-bg);

  > .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: 0 var(--gutter) calc(var(--gutter) * 2) var(--gutter);
  }

  > header {
    background: var(--color-bg-alt);
    padding: calc(var(--gutter) * 3) var(--gutter) calc(var(--gutter) * 2) var(--gutter);
    text-align: center;

    h1 {
      margin: 0;
    }

    p {
      color: var(--color-fg);
      letter-spacing: var(--letter-spacing);
      text-transform: uppercase;
      font-size: 0.7em;
      font-weight: var(--font-weight-bold);
      margin: 1em 0 0 0;
    }
  }

  @include breakpoint-small-and-below {
    > .inner {
      padding: 0 calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }

    > header {
      padding: calc(var(--gutter) * 2) calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }
  }
}

// Footer
#footer {
  background: var(--color-bg-alt);
  padding: calc(var(--gutter) * 2) var(--gutter);

  .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
  }

  section {
    flex: 1;
    min-width: 250px;

    h2 {
      font-size: 1em;
      margin-bottom: 1em;
    }
  }

  .copyright {
    width: 100%;
    border-top: solid var(--border-width) var(--color-border);
    padding-top: calc(var(--gutter) * 0.75);
    margin-top: calc(var(--gutter) * 0.5);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
    font-size: 0.8em;
    color: var(--color-fg);

    li {
      padding: 0;
    }

    a {
      color: inherit;
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);

    .inner {
      flex-direction: column;
    }

    section {
      min-width: auto;
    }
  }
}

Version 2

@use 'variables' as *;

// Layout Styles
// Derived from HTML5UP Phantom template

// Wrapper
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;

  > * {
    position: relative;
  }

  // Menu visibility state
  body.is-menu-visible & {
    &::before {
      opacity: 1;
      visibility: visible;
    }
  }

  &::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: calc(var(--z-index-base) + 1);
    transition: opacity var(--duration-menu) ease, visibility var(--duration-menu);
  }
}

// Header
#header {
  display: flex;
  background: var(--color-bg);
  cursor: default;
  padding: calc(var(--gutter) * 1.5) var(--gutter);
  position: relative;
  z-index: 2;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--inner-width);
    margin: 0 auto;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-bg-accent);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    gap: 0.75em;

    .symbol {
      display: flex;
      align-items: center;

      svg,
      img {
        height: 2em;
        width: auto;
      }
    }

    .title {
      white-space: nowrap;
    }
  }

  nav {
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1em;

      li {
        padding: 0;

        a {
          display: block;
          color: var(--color-bg-accent);
          font-weight: var(--font-weight-bold);
          font-size: 0.8em;
          text-decoration: none;
          padding: 0.5em 1em;
          transition: color var(--duration-transition) ease;

          &:hover {
            color: var(--color-accent1);
          }

          // Menu toggle button styling
          &[href="#menu"] {
            position: relative;
            padding-right: 2.5em;

            &::before {
              content: '';
              display: block;
              width: 1.25em;
              height: 1.25em;
              position: absolute;
              right: 0.5em;
              top: 50%;
              transform: translateY(-50%);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 0.75) var(--gutter);

    .logo {
      font-size: 0.9em;
    }

    nav ul li a {
      font-size: 0.6em;
    }
  }
}

// Menu (Off-canvas)
#menu {
  background: var(--color-bg-accent);
  color: var(--color-fg-accent);
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  padding: var(--gutter);
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(var(--menu-width));
  width: var(--menu-width);
  z-index: calc(var(--z-index-base) + 2);
  transition: transform var(--duration-menu) ease, visibility var(--duration-menu);
  visibility: hidden;

  body.is-menu-visible & {
    transform: translateX(0);
    visibility: visible;
  }

  h2 {
    color: var(--color-fg-accent);
    margin-bottom: 1em;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-top: solid 1px rgba(255, 255, 255, 0.15);
      padding: 0;

      &:first-child {
        border-top: 0;
      }

      a {
        display: block;
        color: var(--color-fg-accent);
        padding: 0.75em 0;
        text-decoration: none;
        font-weight: var(--font-weight-bold-alt);
        font-size: 0.9em;
        transition: color var(--duration-transition) ease;

        &:hover {
          color: var(--color-accent1);
        }
      }
    }
  }

  .close {
    position: absolute;
    top: var(--gutter);
    right: var(--gutter);
    width: 2em;
    height: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.5em;
      height: 2px;
      background: var(--color-fg-accent);
      transition: background var(--duration-transition) ease;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover::before,
    &:hover::after {
      background: var(--color-accent1);
    }
  }

  @include breakpoint-small-and-below {
    width: 75%;
    max-width: none;
    transform: translateX(100%);
  }
}

// Main Content
#main {
  flex: 1;
  background: var(--color-bg);

  > .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: 0 var(--gutter) calc(var(--gutter) * 2) var(--gutter);
  }

  > header {
    background: var(--color-bg-alt);
    padding: calc(var(--gutter) * 3) var(--gutter) calc(var(--gutter) * 2) var(--gutter);
    text-align: center;

    h1 {
      margin: 0;
    }

    p {
      color: var(--color-fg);
      letter-spacing: var(--letter-spacing);
      text-transform: uppercase;
      font-size: 0.7em;
      font-weight: var(--font-weight-bold);
      margin: 1em 0 0 0;
    }
  }

  @include breakpoint-small-and-below {
    > .inner {
      padding: 0 calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }

    > header {
      padding: calc(var(--gutter) * 2) calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }
  }
}

// Footer
#footer {
  background: var(--color-bg-alt);
  padding: calc(var(--gutter) * 2) var(--gutter);

  .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
  }

  section {
    flex: 1;
    min-width: 250px;

    h2 {
      font-size: 1em;
      margin-bottom: 1em;
    }
  }

  .copyright {
    width: 100%;
    border-top: solid var(--border-width) var(--color-border);
    padding-top: calc(var(--gutter) * 0.75);
    margin-top: calc(var(--gutter) * 0.5);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
    font-size: 0.8em;
    color: var(--color-fg);

    li {
      padding: 0;
    }

    a {
      color: inherit;
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);

    .inner {
      flex-direction: column;
    }

    section {
      min-width: auto;
    }
  }
}

Version 3

@use 'variables' as *;

// Layout Styles
// Derived from HTML5UP Phantom template

// Wrapper
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;

  > * {
    position: relative;
  }

  // Menu visibility state
  body.is-menu-visible & {
    &::before {
      opacity: 1;
      visibility: visible;
    }
  }

  &::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: calc(var(--z-index-base) + 1);
    transition: opacity var(--duration-menu) ease, visibility var(--duration-menu);
  }
}

// Header
#header {
  display: flex;
  background: var(--color-bg);
  cursor: default;
  padding: calc(var(--gutter) * 0.5) var(--gutter);
  position: relative;
  z-index: 2;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--inner-width);
    margin: 0 auto;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-bg-accent);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    gap: 0.75em;

    .symbol {
      display: flex;
      align-items: center;

      svg,
      img {
        height: 2em;
        width: auto;
      }
    }

    .title {
      white-space: nowrap;
    }
  }

  nav {
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1em;

      li {
        padding: 0;

        a {
          display: block;
          color: var(--color-bg-accent);
          font-weight: var(--font-weight-bold);
          font-size: 1em;
          text-decoration: none;
          padding: 0.5em 1em;
          transition: color var(--duration-transition) ease;

          &:hover {
            color: var(--color-accent1);
          }

          // Menu toggle button styling
          &[href="#menu"] {
            position: relative;
            padding-right: 2.5em;

            &::before {
              content: '';
              display: block;
              width: 1.5em;
              height: 1.5em;
              position: absolute;
              right: 0.5em;
              top: 50%;
              transform: translateY(-50%);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 0.75) var(--gutter);

    .logo {
      font-size: 0.9em;
    }

    nav ul li a {
      font-size: 0.6em;
    }
  }
}

// Menu (Off-canvas)
#menu {
  background: var(--color-bg-accent);
  color: var(--color-fg-accent);
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  padding: var(--gutter);
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(var(--menu-width));
  width: var(--menu-width);
  z-index: calc(var(--z-index-base) + 2);
  transition: transform var(--duration-menu) ease, visibility var(--duration-menu);
  visibility: hidden;

  body.is-menu-visible & {
    transform: translateX(0);
    visibility: visible;
  }

  h2 {
    color: var(--color-fg-accent);
    margin-bottom: 1em;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-top: solid 1px rgba(255, 255, 255, 0.15);
      padding: 0;

      &:first-child {
        border-top: 0;
      }

      a {
        display: block;
        color: var(--color-fg-accent);
        padding: 0.75em 0;
        text-decoration: none;
        font-weight: var(--font-weight-bold-alt);
        font-size: 0.9em;
        transition: color var(--duration-transition) ease;

        &:hover {
          color: var(--color-accent1);
        }
      }
    }
  }

  .close {
    position: absolute;
    top: var(--gutter);
    right: var(--gutter);
    width: 2em;
    height: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.5em;
      height: 2px;
      background: var(--color-fg-accent);
      transition: background var(--duration-transition) ease;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover::before,
    &:hover::after {
      background: var(--color-accent1);
    }
  }

  @include breakpoint-small-and-below {
    width: 75%;
    max-width: none;
    transform: translateX(100%);
  }
}

// Main Content
#main {
  flex: 1;
  background: var(--color-bg);

  > .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: 0 var(--gutter) calc(var(--gutter) * 2) var(--gutter);
  }

  > header {
    background: var(--color-bg-alt);
    padding: calc(var(--gutter) * 3) var(--gutter) calc(var(--gutter) * 2) var(--gutter);
    text-align: center;

    h1 {
      margin: 0;
    }

    p {
      color: var(--color-fg);
      letter-spacing: var(--letter-spacing);
      text-transform: uppercase;
      font-size: 0.7em;
      font-weight: var(--font-weight-bold);
      margin: 1em 0 0 0;
    }
  }

  @include breakpoint-small-and-below {
    > .inner {
      padding: 0 calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }

    > header {
      padding: calc(var(--gutter) * 2) calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }
  }
}

// Footer
#footer {
  background: var(--color-bg-alt);
  padding: calc(var(--gutter) * 2) var(--gutter);

  .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
  }

  section {
    flex: 1;
    min-width: 250px;

    h2 {
      font-size: 1em;
      margin-bottom: 1em;
    }
  }

  .copyright {
    width: 100%;
    border-top: solid var(--border-width) var(--color-border);
    padding-top: calc(var(--gutter) * 0.75);
    margin-top: calc(var(--gutter) * 0.5);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
    font-size: 0.8em;
    color: var(--color-fg);

    li {
      padding: 0;
    }

    a {
      color: inherit;
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);

    .inner {
      flex-direction: column;
    }

    section {
      min-width: auto;
    }
  }
}

Version 4 (latest)

@use 'variables' as *;

// Layout Styles
// Derived from HTML5UP Phantom template

// Wrapper
#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;

  > * {
    position: relative;
  }

  // Menu visibility state
  body.is-menu-visible & {
    &::before {
      opacity: 1;
      visibility: visible;
    }
  }

  &::before {
    content: '';
    display: block;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: calc(var(--z-index-base) + 1);
    transition: opacity var(--duration-menu) ease, visibility var(--duration-menu);
  }
}

// Header
#header {
  display: flex;
  background: var(--color-bg);
  cursor: default;
  padding: calc(var(--gutter) * 0.5) var(--gutter);
  position: relative;
  z-index: 2;

  .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--inner-width);
    margin: 0 auto;
  }

  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--color-bg-accent);
    font-weight: var(--font-weight-bold);
    font-size: 1em;
    gap: 0.75em;

    .symbol {
      display: flex;
      align-items: center;

      svg,
      img {
        height: 2em;
        width: auto;
      }
    }

    .title {
      white-space: nowrap;
    }
  }

  nav {
    ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 1em;

      li {
        padding: 0;

        a {
          display: block;
          color: var(--color-bg-accent);
          font-weight: var(--font-weight-bold);
          font-size: 1em;
          text-decoration: none;
          padding: 0.5em 1em;
          transition: color var(--duration-transition) ease;

          &:hover {
            color: var(--color-accent1);
          }

          // Menu toggle button styling
          &[href="#menu"] {
            position: relative;
            padding-right: 2.5em;

            &::before {
              content: '';
              display: block;
              width: 1.5em;
              height: 1.5em;
              position: absolute;
              right: 0.5em;
              top: 50%;
              transform: translateY(-50%);
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
              background-size: contain;
              background-repeat: no-repeat;
            }
          }
        }
      }
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 0.75) var(--gutter);

    .logo {
      font-size: 0.9em;
    }

    nav ul li a {
      font-size: 0.6em;
    }
  }
}

// Menu (Off-canvas)
#menu {
  background: var(--color-bg-accent);
  color: var(--color-fg-accent);
  height: 100%;
  max-width: 80%;
  overflow-y: auto;
  padding: var(--gutter);
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(var(--menu-width));
  width: var(--menu-width);
  z-index: calc(var(--z-index-base) + 2);
  transition: transform var(--duration-menu) ease, visibility var(--duration-menu);
  visibility: hidden;

  body.is-menu-visible & {
    transform: translateX(0);
    visibility: visible;
  }

  h2 {
    color: var(--color-fg-accent);
    margin-bottom: 1em;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-top: solid 1px rgba(255, 255, 255, 0.15);
      padding: 0;

      &:first-child {
        border-top: 0;
      }

      a {
        display: block;
        color: var(--color-fg-accent);
        padding: 0.75em 0;
        text-decoration: none;
        font-weight: var(--font-weight-bold-alt);
        font-size: 0.9em;
        transition: color var(--duration-transition) ease;

        &:hover {
          color: var(--color-accent1);
        }
      }
    }
  }

  .close {
    position: absolute;
    top: var(--gutter);
    right: var(--gutter);
    width: 2em;
    height: 2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 1.5em;
      height: 2px;
      background: var(--color-fg-accent);
      transition: background var(--duration-transition) ease;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }

    &:hover::before,
    &:hover::after {
      background: var(--color-accent1);
    }
  }

  @include breakpoint-small-and-below {
    width: 75%;
    max-width: none;
    transform: translateX(100%);
  }
}

// Main Content
#main {
  flex: 1;
  background: var(--color-bg);

  > .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    padding: 0 var(--gutter) calc(var(--gutter) * 2) var(--gutter);
  }

  > header {
    background: var(--color-bg-alt);
    padding: calc(var(--gutter) * 3) var(--gutter) calc(var(--gutter) * 2) var(--gutter);
    text-align: center;

    h1 {
      margin: 0;
    }

    p {
      color: var(--color-fg);
      letter-spacing: var(--letter-spacing);
      text-transform: uppercase;
      font-size: 0.7em;
      font-weight: var(--font-weight-bold);
      margin: 1em 0 0 0;
    }
  }

  @include breakpoint-small-and-below {
    > .inner {
      padding: 0 calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }

    > header {
      padding: calc(var(--gutter) * 2) calc(var(--gutter) * 0.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);
    }
  }
}

// Footer
#footer {
  background: var(--color-bg-alt);
  padding: calc(var(--gutter) * 2) var(--gutter);

  .inner {
    max-width: var(--inner-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
  }

  section {
    flex: 1;
    min-width: 250px;

    h2 {
      font-size: 1em;
      margin-bottom: 1em;
    }
  }

  .copyright {
    width: 100%;
    border-top: solid var(--border-width) var(--color-border);
    padding-top: calc(var(--gutter) * 0.75);
    margin-top: calc(var(--gutter) * 0.5);
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
    font-size: 0.8em;
    color: var(--color-fg);

    li {
      padding: 0;
    }

    a {
      color: inherit;
    }
  }

  @include breakpoint-small-and-below {
    padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 0.5);

    .inner {
      flex-direction: column;
    }

    section {
      min-width: auto;
    }
  }
}

packages/cwc-website/src/templates/site/styles/_variables.scss

2 versions

Version 1

// CSS Custom Properties for theming
// Derived from HTML5UP Phantom template

:root {
  // Colors - Palette
  --color-bg: #ffffff;
  --color-bg-accent: #333333;
  --color-bg-alt: #f6f6f6;
  --color-fg: #585858;
  --color-fg-accent: #ffffff;
  --color-border: #c9c9c9;
  --color-border-bg: rgba(144, 144, 144, 0.075);

  // Accent Colors (6 tile styles)
  --color-accent1: #f2849e;
  --color-accent2: #7ecaf6;
  --color-accent3: #7bd0c1;
  --color-accent4: #c75b9b;
  --color-accent5: #ae85ca;
  --color-accent6: #8499e7;

  // Typography
  --font-family: var(--font-source-sans), 'Source Sans Pro', Helvetica, sans-serif;
  --font-family-fixed: 'Courier New', monospace;
  --font-weight-normal: 300;
  --font-weight-bold: 900;
  --font-weight-bold-alt: 700;
  --letter-spacing: 0.35em;
  --letter-spacing-alt: -0.035em;

  // Sizing
  --border-radius: 4px;
  --border-width: 1px;
  --element-height: 3em;
  --element-margin: 2em;
  --gutter: 2.5em;
  --field-gutter: 2em;
  --inner-width: 68em;
  --menu-width: 22em;

  // Z-Index
  --z-index-base: 10000;

  // Timing
  --duration-menu: 0.45s;
  --duration-transition: 0.2s;
}

// SCSS Variables for use in calculations
$gutter: 2.5em;
$element-margin: 2em;
$inner-width: 68em;
$menu-width: 22em;
$z-index-base: 10000;

// Breakpoints
$breakpoint-xlarge: 1680px;
$breakpoint-large: 1280px;
$breakpoint-medium: 980px;
$breakpoint-small: 736px;
$breakpoint-xsmall: 480px;
$breakpoint-xxsmall: 360px;

// Media query mixins
@mixin breakpoint-xlarge {
  @media screen and (min-width: 1281px) and (max-width: 1680px) {
    @content;
  }
}

@mixin breakpoint-large {
  @media screen and (min-width: 981px) and (max-width: 1280px) {
    @content;
  }
}

@mixin breakpoint-medium {
  @media screen and (min-width: 737px) and (max-width: 980px) {
    @content;
  }
}

@mixin breakpoint-small {
  @media screen and (min-width: 481px) and (max-width: 736px) {
    @content;
  }
}

@mixin breakpoint-xsmall {
  @media screen and (min-width: 361px) and (max-width: 480px) {
    @content;
  }
}

@mixin breakpoint-xxsmall {
  @media screen and (max-width: 360px) {
    @content;
  }
}

@mixin breakpoint-medium-and-below {
  @media screen and (max-width: 980px) {
    @content;
  }
}

@mixin breakpoint-small-and-below {
  @media screen and (max-width: 736px) {
    @content;
  }
}

@mixin breakpoint-large-and-above {
  @media screen and (min-width: 981px) {
    @content;
  }
}

Version 2 (latest)

// CSS Custom Properties for theming
// Derived from HTML5UP Phantom template

:root {
  // Colors - Palette
  --color-bg: #ffffff;
  --color-bg-accent: #333333;
  --color-bg-alt: #f6f6f6;
  --color-fg: #585858;
  --color-fg-accent: #ffffff;
  --color-border: #c9c9c9;
  --color-border-bg: rgba(144, 144, 144, 0.075);

  // Accent Colors (6 tile styles)
  --color-accent1: #f2849e;
  --color-accent2: #7ecaf6;
  --color-accent3: #7bd0c1;
  --color-accent4: #c75b9b;
  --color-accent5: #ae85ca;
  --color-accent6: #8499e7;

  // Typography
  --font-family: var(--font-source-sans), 'Source Sans Pro', Helvetica, sans-serif;
  --font-family-fixed: 'Courier New', monospace;
  --font-weight-normal: 300;
  --font-weight-bold: 900;
  --font-weight-bold-alt: 700;
  --letter-spacing: 0.35em;
  --letter-spacing-alt: -0.035em;

  // Sizing
  --border-radius: 4px;
  --border-width: 1px;
  --element-height: 3em;
  --element-margin: 2em;
  --gutter: 2.5em;
  --field-gutter: 2em;
  --inner-width: 68em;
  --menu-width: 22em;

  // Z-Index
  --z-index-base: 10000;

  // Timing
  --duration-menu: 0.45s;
  --duration-transition: 0.2s;
}

// SCSS Variables for use in calculations
$gutter: 2.5em;
$element-margin: 2em;
$inner-width: 68em;
$menu-width: 22em;
$z-index-base: 10000;

// Breakpoints
$breakpoint-xlarge: 1680px;
$breakpoint-large: 1280px;
$breakpoint-medium: 980px;
$breakpoint-small: 736px;
$breakpoint-xsmall: 480px;
$breakpoint-xxsmall: 360px;

// Media query mixins
@mixin breakpoint-xlarge {
  @media screen and (min-width: 1281px) and (max-width: 1680px) {
    @content;
  }
}

@mixin breakpoint-large {
  @media screen and (min-width: 981px) and (max-width: 1280px) {
    @content;
  }
}

@mixin breakpoint-medium {
  @media screen and (min-width: 737px) and (max-width: 980px) {
    @content;
  }
}

@mixin breakpoint-small {
  @media screen and (min-width: 481px) and (max-width: 736px) {
    @content;
  }
}

@mixin breakpoint-xsmall {
  @media screen and (min-width: 361px) and (max-width: 480px) {
    @content;
  }
}

@mixin breakpoint-xxsmall {
  @media screen and (max-width: 360px) {
    @content;
  }
}

@mixin breakpoint-medium-and-below {
  @media screen and (max-width: 980px) {
    @content;
  }
}

@mixin breakpoint-small-and-below {
  @media screen and (max-width: 736px) {
    @content;
  }
}

@mixin breakpoint-large-and-above {
  @media screen and (min-width: 981px) {
    @content;
  }
}

packages/cwc-website/src/templates/site/styles/main.scss

2 versions

Version 1

// Site Template Styles
// Based on HTML5UP Phantom template

@use 'variables';
@use 'base';
@use 'layout';
@use 'components';

Version 2 (latest)

// Site Template Styles
// Based on HTML5UP Phantom template

@use 'variables';
@use 'base';
@use 'layout';
@use 'components';

Session 31: website design template

Session 31: website design template

Icon Library Options for React/Next.js

Phantom Template Integration Plan

Overview

Folder Structure

Key Implementation Decisions

1. SCSS Build Pipeline

2. CSS Custom Properties for Theming

3. Server/Client Component Split

4. jQuery to React Migration

5. Image Replacement with Gradients

6. Icons

Landing Page Content (Tiles)

Footer Content

Implementation Order

Phase 1: Build Foundation

Phase 2: Template Shell

Phase 3: Menu System

Phase 4: Content Components

Phase 5: Polish

Files to Create/Modify

Complexity Notes

Success Criteria

Plan Summary

Important: Next.js App Router Constraint

Proposed Structure with Route Groups

Phantom Template Integration Plan

Overview

Folder Structure

Key Decisions

1. Route Groups

2. Generic Component Names

3. SCSS Build Pipeline

4. CSS Custom Properties

5. Server/Client Component Split

6. jQuery to React Migration

7. Icons with react-icons

8. Image Replacement with Gradients

Landing Page Content

Implementation Order

Phase 1: Foundation

Phase 2: Template Shell

Phase 3: Menu System

Phase 4: Content Components

Phase 5: Polish

Files to Create

Success Criteria

Final Plan Summary

Implementation Complete!

Folder Structure

Key Features

Landing Page

Session Summary

Session 31: website design template

cwc-website Package

Critical Rules

Server Components by Default (SEO)

Build Requirement

Path Alias

Template System Architecture

Route Groups

Template Organization

Component Categories

Server vs Client Split for Templates

Menu State Management

debugUi Prop Pattern

File/Component Conventions

Directory Structure

Naming Conventions

Component File Pattern

Page Patterns

Dynamic Route with Metadata

Static Metadata

Data Fetching Patterns

API Client Pattern

Caching Rules

Client Component Rules

Error Handling

Route Error Boundary