zhongwei/gh-netresearch-claude-code-marketplace-netresearch-skills-bundle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:43:13 +08:00
commit f6d4a68978
178 changed files with 51030 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
skills/netresearch-branding/README.md Normal file
View File

@@ -0,0 +1,345 @@
# Netresearch Brand Guidelines Skill
A comprehensive Claude Code skill for implementing Netresearch brand guidelines in web projects. Ensures consistent brand application across all digital touchpoints.
## Overview
This skill provides complete brand guidelines, reference documentation, and ready-to-use templates for implementing Netresearch's visual identity on web projects. It enables Claude Code to help developers and designers maintain brand consistency across websites, applications, and digital materials.
## Features
### 📋 Comprehensive Brand Guidelines
- **SKILL.md** - Complete brand implementation guide covering:
- Brand identity and core values
- Color system with accessibility compliance
- Typography standards (Raleway, Open Sans, Calibri)
- Logo usage guidelines and restrictions
- Web design principles and best practices
- Component styles and patterns
- Social media specifications
- Image guidelines
- Accessibility requirements (WCAG AA)
- Implementation checklists
### 🎨 Reference Documentation
- **colors.md** - Detailed color palette with:
- Technical specifications (Hex, RGB, CMYK, Pantone, NCS)
- Usage guidelines and approved combinations
- WCAG AA contrast ratios
- CSS custom properties
- Accessibility compliance details
- **typography.md** - Complete typography system with:
- Font specifications and licensing
- Web font loading strategies
- Typography scale and hierarchy
- Responsive typography patterns
- Line height and spacing guidelines
- Performance optimization
- **web-design.md** - Web implementation patterns:
- Responsive grid system
- Component library (buttons, cards, forms, navigation)
- Layout patterns
- Animations and transitions
- Accessibility considerations
### 🎯 Templates & Examples
- **landing-page.html** - Complete landing page template
- **styles.css** - Production-ready brand CSS with all components
- **components.html** - Interactive component showcase
## Installation
### Via Claude Code Marketplace
```bash
/plugin marketplace add netresearch/claude-code-marketplace
/plugin install netresearch-branding
```
### Manual Installation
```bash
# Using curl
curl -L https://github.com/netresearch/netresearch-branding-skill/archive/refs/heads/main.zip -o netresearch-branding.zip
unzip netresearch-branding.zip -d ~/.claude/skills/
mv ~/.claude/skills/netresearch-branding-skill-main ~/.claude/skills/netresearch-branding
# Or using git
git clone https://github.com/netresearch/netresearch-branding-skill.git ~/.claude/skills/netresearch-branding
```
## Usage
### Automatic Activation
The skill activates automatically when working on:
- Netresearch web projects
- Brand implementation tasks
- UI/UX development requiring brand compliance
- Documentation needing brand guidelines
### Manual Invocation
```bash
/skill netresearch-branding
```
### Example Workflows
#### **Creating a New Landing Page**
```
User: "Create a landing page following Netresearch brand guidelines"
Claude: [Activates netresearch-branding skill]
- Uses brand colors (Turquoise #2F99A4, Orange #FF4D00)
- Applies Raleway for headlines, Open Sans for body
- Implements high white space design principle
- Creates responsive layout with brand components
- Ensures WCAG AA accessibility compliance
- Delivers production-ready HTML/CSS
```
#### **Brand Compliance Check**
```
User: "Review this website design for Netresearch brand compliance"
Claude: [Activates netresearch-branding skill]
- Verifies color usage (primary vs accent)
- Checks typography (correct fonts and weights)
- Validates spacing and white space principles
- Reviews component implementations
- Assesses accessibility compliance
- Provides specific improvement recommendations
```
#### **Component Development**
```
User: "Create a contact form with Netresearch branding"
Claude: [Activates netresearch-branding skill]
- Uses branded form components
- Applies correct input styling
- Implements brand buttons
- Ensures proper spacing
- Validates accessibility
- Provides complete HTML/CSS
```
## Brand Quick Reference
### Colors
| Color | Hex | Usage |
|-------|-----|-------|
| **Turquoise** | `#2F99A4` | Primary brand color, links, CTAs |
| **Orange** | `#FF4D00` | Accent color, emphasis only |
| **Anthracite** | `#585961` | Primary text color |
| **Light Grey** | `#CCCDCC` | Borders, backgrounds |
| **White** | `#FFFFFF` | Primary background |
### Typography
| Element | Font | Size | Weight |
|---------|------|------|--------|
| **Headlines (Web)** | Raleway | 48px-56px | 700 |
| **Body (Web)** | Open Sans | 16px | 400 |
| **Buttons** | Raleway | 16px | 600 |
| **Documents** | Calibri | 11-12pt | 400/700 |
### Key Principles
1. **High White Space** - Generous padding and margins throughout
2. **Responsive Design** - Mobile-first approach with defined breakpoints
3. **Accessibility** - WCAG AA compliance mandatory
4. **Color Hierarchy** - Turquoise primary, orange accent only
5. **Clean Typography** - Clear hierarchy with Raleway + Open Sans
## File Structure
```
netresearch-branding-skill/
├── SKILL.md # Main skill file with guidelines
├── README.md # This file
├── references/
│ ├── colors.md # Color palette reference
│ ├── typography.md # Typography system
│ └── web-design.md # Web components & patterns
├── templates/
│ ├── landing-page.html # Landing page template
│ └── styles.css # Brand CSS framework
└── examples/
└── components.html # Interactive component showcase
```
## Brand Component Library
### Buttons
```html
<!-- Primary action -->
<button class="btn-primary">Get Started</button>
<!-- Secondary action -->
<button class="btn-secondary">Learn More</button>
<!-- Tertiary action -->
<button class="btn-outline">Contact Us</button>
```
### Cards
```html
<div class="card">
<div class="card-content">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Card description.</p>
<a href="#" class="link-standalone">Learn more</a>
</div>
</div>
```
### Forms
```html
<div class="form-group">
<label for="email" class="form-label">Email*</label>
<input type="email" id="email" class="form-input"
placeholder="your@email.com" required>
</div>
```
## CSS Custom Properties
The skill includes a complete set of CSS custom properties for easy implementation:
```css
:root {
/* Brand Colors */
--color-primary: #2F99A4;
--color-accent: #FF4D00;
--color-text-primary: #585961;
/* Typography */
--font-headline: 'Raleway', sans-serif;
--font-body: 'Open Sans', sans-serif;
/* Spacing */
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 96px;
}
```
## Accessibility Compliance
All brand implementations must meet **WCAG AA** standards:
✅ **Text Contrast Ratios:**
- Anthracite on white: 8.3:1 (AAA)
- White on turquoise: 4.5:1 (AA)
- Turquoise on white: 3.8:1 (AA for large text)
✅ **Keyboard Navigation:**
- All interactive elements accessible
- Visible focus states
- Logical tab order
✅ **Screen Readers:**
- Semantic HTML
- ARIA labels where needed
- Alternative text for images
## Responsive Breakpoints
```css
/* Mobile First Approach */
/* Extra Small: 0-599px (default) */
/* Small: 600px+ */
/* Medium: 768px+ */
/* Large: 1024px+ */
/* Extra Large: 1440px+ */
```
## Social Media Specifications
### Profile Images
- **Facebook:** 180 × 180 px (displays at 170 × 170 px)
- **LinkedIn:** 400 × 400 px (displays at 300 × 300 px)
- **Twitter:** 400 × 400 px (displays at 200 × 200 px)
- **XING:** 1024 × 1024 px
### Header/Cover Images
- **Facebook:** 820 × 312 px
- **LinkedIn (Company):** 1128 × 191 px
- **Twitter:** 1500 × 500 px
- **XING:** 970 × 250 px
## Quality Checklist
Before deploying any branded material:
**Visual Design:**
- [ ] Colors match exact hex values
- [ ] Turquoise is primary, orange is accent only
- [ ] High white space maintained
- [ ] Typography uses Raleway + Open Sans
**Technical:**
- [ ] Responsive design implemented
- [ ] WCAG AA compliance verified
- [ ] Fonts loaded efficiently
- [ ] CSS follows naming conventions
**Content:**
- [ ] Logo used correctly
- [ ] Images follow brand guidelines
- [ ] Consistent tone and voice
- [ ] No unapproved color combinations
## Contributing
Contributions are welcome! Please follow these guidelines:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/improvement`)
3. Make your changes
4. Test thoroughly against brand guidelines
5. Commit your changes (`git commit -m 'Add improvement'`)
6. Push to the branch (`git push origin feature/improvement`)
7. Create a Pull Request
## License
This skill is licensed under GPL-2.0-or-later, matching the TYPO3 project license.
## Support
**Issues and Questions:**
- GitHub Issues: [Report issues](https://github.com/netresearch/netresearch-branding-skill/issues)
**Netresearch Contact:**
- **Website:** https://www.netresearch.de
- **Email:** info@netresearch.de
- **Phone:** +49 341 49288-0
- **Address:** Nonnenstraße 11d, 04229 Leipzig, Germany
## Related Skills
- **typo3-docs** - TYPO3 extension documentation creation
- **typo3-testing** - TYPO3 extension testing infrastructure
- **typo3-conformance** - TYPO3 coding standards evaluation
## Credits
Created by Netresearch DTT GmbH for consistent brand implementation across digital projects.
**Maintained By:** Netresearch DTT GmbH, Leipzig, Germany
---
**Version:** 1.0.0
**Last Updated:** 2025-10-18

1033
skills/netresearch-branding/SKILL.md Normal file
View File

File diff suppressed because it is too large Load Diff

19
skills/netresearch-branding/assets/logos/netresearch-symbol-only.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
viewBox="-75 -75 440 440"
zoomAndPan="disable"
version="1.2"
baseProfile="tiny-ps"
xmlns="http://www.w3.org/2000/svg">
<title>Netresearch DTT GmbH</title>
<g>
<path
fill="#2999a4"
d="M209.6,0V31.62h32.77a26.38,26.38,0,0,1,26.44,26.43V242a26.38,26.38,0,0,1-26.44,26.44H209.6V300h47.93a42.77,42.77,0,0,0,42.86-42.86V42.89A42.76,42.76,0,0,0,257.53,0ZM43.25,0A42.76,42.76,0,0,0,.39,42.89V257.18A42.76,42.76,0,0,0,43.25,300H91.18V268.46H58.4A26.38,26.38,0,0,1,32,242v-184A26.37,26.37,0,0,1,58.4,31.62H91.18V0Z"
transform="translate(-0.39 -0.04)" />
<path
fill="#595a62"
d="M221.44,120.41c0-34.48-13.94-57.82-48.93-57.82-26.62,0-48.54,7.74-64.17,26.56l-.7-22.06-28.31.06V232.94h31.59V124.69c7.14-18.38,32.14-34.8,53-34.5,27.38.4,25.2,26.24,26,45.81v96.94h31.58"
transform="translate(-0.39 -0.04)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 921 B

54
skills/netresearch-branding/claudedocs/refactoring-summary.md Normal file
View File

@@ -0,0 +1,54 @@
# SKILL.md Refactoring Summary
**Date:** 2025-11-14
**Version Change:** 1.0.0 → 1.1.0
**Skill:** netresearch-branding
## Changes Applied
### Pattern 1: Removed "## Overview" Section
- **Before:** Lines 14-23 contained "## Overview" section
- **After:** Removed entire section
- **Rationale:** Content duplicated YAML description; no unique value
### Pattern 2: Converted Do's/Don'ts to Imperative Form
- **Before:** "Do's:" and "Don'ts:" bullet lists throughout
- **After:** "When X" trigger-based imperative instructions
#### Color Application Rules
- **Before:** Separate "Do's" and "Don'ts" lists
- **After:** "When applying brand colors" with unified action-oriented instructions
- Combined positive actions and avoidances into cohesive workflow
#### Typography Application Standards
- **Before:** "Typography Do's and Don'ts" with separate lists
- **After:** "When applying typography" with unified standards
- Converted each guideline to action-oriented instruction
### Pattern 3: Converted "## Implementation Checklist" to Procedures
- **Before:** Three checklists (Design Phase, Development Phase, Quality Assurance) with checkbox items
- **After:** "## Pre-Launch Validation Procedures" with numbered procedural steps
- **Changes:**
- Design Phase → Design Phase Validation (6 numbered steps)
- Development Phase → Development Phase Validation (8 numbered steps)
- Quality Assurance → Quality Assurance Validation (8 numbered steps)
- Brand Compliance Review → Brand Compliance Validation (3 check categories with numbered steps)
## Impact Analysis
**Readability:** Significantly improved - clear action-oriented instructions
**Consistency:** Aligned with skill-creator best practices
**Usability:** Enhanced - readers execute procedures rather than check boxes
**Clarity:** Removed redundant overview; eliminated Do's/Don'ts duplication
## Files Modified
- `/SKILL.md` (lines 1-866)
## Verification
- Version number updated in YAML frontmatter: ✓
- Overview section removed: ✓
- All Do's/Don'ts converted to imperative: ✓
- Checklists converted to procedures: ✓
- No broken internal references: ✓

313
skills/netresearch-branding/examples/components.html Normal file
View File

@@ -0,0 +1,313 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netresearch Brand Components</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../templates/styles.css">
<style>
.component-showcase {
padding: 48px 24px;
max-width: 1200px;
margin: 0 auto;
}
.component-section {
margin-bottom: 64px;
padding: 32px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.component-section h2 {
border-bottom: 3px solid #2F99A4;
padding-bottom: 12px;
margin-bottom: 24px;
}
.component-demo {
margin: 24px 0;
padding: 24px;
background: #F5F5F5;
border-radius: 4px;
}
.code-block {
background: #585961;
color: #fff;
padding: 16px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 14px;
margin-top: 16px;
}
</style>
</head>
<body>
<div class="component-showcase">
<h1 style="text-align: center; margin-bottom: 48px;">Netresearch Brand Components</h1>
<!-- Buttons -->
<div class="component-section">
<h2>Buttons</h2>
<div class="component-demo">
<h3>Primary Buttons</h3>
<button class="btn-primary btn-small">Small Button</button>
<button class="btn-primary">Default Button</button>
<button class="btn-primary btn-large">Large Button</button>
</div>
<div class="component-demo">
<h3>Secondary Buttons</h3>
<button class="btn-secondary btn-small">Small Button</button>
<button class="btn-secondary">Default Button</button>
<button class="btn-secondary btn-large">Large Button</button>
</div>
<div class="component-demo" style="background: #2F99A4; color: white;">
<h3 style="color: white;">Outline Buttons (on dark background)</h3>
<button class="btn-outline btn-small">Small Button</button>
<button class="btn-outline">Default Button</button>
<button class="btn-outline btn-large">Large Button</button>
</div>
<div class="code-block">
&lt;button class="btn-primary"&gt;Primary Action&lt;/button&gt;
&lt;button class="btn-secondary"&gt;Secondary Action&lt;/button&gt;
&lt;button class="btn-outline"&gt;Tertiary Action&lt;/button&gt;
&lt;!-- Sizes --&gt;
&lt;button class="btn-primary btn-small"&gt;Small&lt;/button&gt;
&lt;button class="btn-primary"&gt;Default&lt;/button&gt;
&lt;button class="btn-primary btn-large"&gt;Large&lt;/button&gt;
</div>
</div>
<!-- Cards -->
<div class="component-section">
<h2>Cards</h2>
<div class="component-demo">
<div class="three-column">
<div class="card">
<div class="card-content">
<h3 class="card-title">Simple Card</h3>
<p class="card-text">This is a basic card with title and text content.</p>
<a href="#" class="link-standalone">Learn more</a>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">Card with Footer</h3>
<p class="card-text">This card includes a footer section with metadata.</p>
</div>
<div class="card-footer">
<span class="card-meta">Published: Jan 1, 2025</span>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">Card with Button</h3>
<p class="card-text">This card has a primary action button.</p>
<button class="btn-primary">Take Action</button>
</div>
</div>
</div>
</div>
<div class="code-block">
&lt;div class="card"&gt;
&lt;div class="card-content"&gt;
&lt;h3 class="card-title"&gt;Card Title&lt;/h3&gt;
&lt;p class="card-text"&gt;Card description.&lt;/p&gt;
&lt;a href="#" class="link-standalone"&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;div class="card-footer"&gt;
&lt;span class="card-meta"&gt;Metadata&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
</div>
</div>
<!-- Typography -->
<div class="component-section">
<h2>Typography</h2>
<div class="component-demo">
<h1>Heading 1 - Raleway Bold 48px</h1>
<h2>Heading 2 - Raleway Bold 36px</h2>
<h3>Heading 3 - Raleway SemiBold 28px</h3>
<h4>Heading 4 - Raleway SemiBold 22px</h4>
<p class="lead">Lead paragraph - Open Sans Regular 20px with comfortable line height for improved readability.</p>
<p>Body text - Open Sans Regular 16px. This is the standard paragraph text used throughout the website. It maintains excellent readability with a line-height of 1.6.</p>
<p><small>Small text - Open Sans Regular 14px for captions and metadata.</small></p>
</div>
<div class="code-block">
&lt;h1&gt;Heading 1&lt;/h1&gt;
&lt;h2&gt;Heading 2&lt;/h2&gt;
&lt;h3&gt;Heading 3&lt;/h3&gt;
&lt;p class="lead"&gt;Lead paragraph&lt;/p&gt;
&lt;p&gt;Body text&lt;/p&gt;
&lt;small&gt;Small text&lt;/small&gt;
</div>
</div>
<!-- Links -->
<div class="component-section">
<h2>Links</h2>
<div class="component-demo">
<p>This is a paragraph with an <a href="#">inline link</a> within the text.</p>
<p><a href="#" class="link-standalone">Standalone link with arrow</a></p>
<p><a href="document.pdf" download>Download link with icon</a></p>
<p><a href="https://example.com" target="_blank">External link with icon</a></p>
</div>
<div class="code-block">
&lt;!-- Inline link --&gt;
&lt;a href="#"&gt;Link text&lt;/a&gt;
&lt;!-- Standalone link with arrow --&gt;
&lt;a href="#" class="link-standalone"&gt;Learn more&lt;/a&gt;
&lt;!-- Download link --&gt;
&lt;a href="file.pdf" download&gt;Download PDF&lt;/a&gt;
&lt;!-- External link --&gt;
&lt;a href="https://example.com" target="_blank"&gt;External&lt;/a&gt;
</div>
</div>
<!-- Forms -->
<div class="component-section">
<h2>Forms</h2>
<div class="component-demo">
<form style="max-width: 600px;">
<div class="form-group">
<label for="demo-name" class="form-label">Name*</label>
<input type="text" id="demo-name" class="form-input" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="demo-email" class="form-label">Email*</label>
<input type="email" id="demo-email" class="form-input" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label for="demo-message" class="form-label">Message*</label>
<textarea id="demo-message" class="form-textarea" placeholder="Your message" required></textarea>
</div>
<button type="submit" class="btn-primary">Submit Form</button>
</form>
</div>
<div class="code-block">
&lt;form&gt;
&lt;div class="form-group"&gt;
&lt;label for="name" class="form-label"&gt;Name*&lt;/label&gt;
&lt;input type="text" id="name" class="form-input"
placeholder="Your name" required&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label for="message" class="form-label"&gt;Message*&lt;/label&gt;
&lt;textarea id="message" class="form-textarea"
placeholder="Your message" required&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;button type="submit" class="btn-primary"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</div>
</div>
<!-- Color Palette -->
<div class="component-section">
<h2>Color Palette</h2>
<div class="component-demo">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
<div style="text-align: center;">
<div style="background: #2F99A4; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
<strong>Turquoise Primary</strong><br>
<code>#2F99A4</code>
</div>
<div style="text-align: center;">
<div style="background: #FF4D00; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
<strong>Orange Accent</strong><br>
<code>#FF4D00</code>
</div>
<div style="text-align: center;">
<div style="background: #585961; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
<strong>Anthracite Text</strong><br>
<code>#585961</code>
</div>
<div style="text-align: center;">
<div style="background: #CCCDCC; height: 100px; border-radius: 8px; margin-bottom: 8px;"></div>
<strong>Light Grey</strong><br>
<code>#CCCDCC</code>
</div>
<div style="text-align: center;">
<div style="background: #FFFFFF; height: 100px; border-radius: 8px; margin-bottom: 8px; border: 1px solid #E5E5E5;"></div>
<strong>White</strong><br>
<code>#FFFFFF</code>
</div>
</div>
</div>
<div class="code-block">
/* CSS Custom Properties */
:root {
--color-primary: #2F99A4;
--color-accent: #FF4D00;
--color-text-primary: #585961;
--color-border: #CCCDCC;
--color-background: #FFFFFF;
}
</div>
</div>
<!-- Grid Layouts -->
<div class="component-section">
<h2>Grid Layouts</h2>
<div class="component-demo">
<h3>Two-Column Layout</h3>
<div class="two-column" style="margin-bottom: 32px;">
<div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 1</div>
<div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 2</div>
</div>
<h3>Three-Column Layout</h3>
<div class="three-column">
<div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 1</div>
<div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 2</div>
<div style="background: #F5F5F5; padding: 24px; border-radius: 4px;">Column 3</div>
</div>
</div>
<div class="code-block">
&lt;!-- Two-column layout --&gt;
&lt;div class="two-column"&gt;
&lt;div&gt;Content 1&lt;/div&gt;
&lt;div&gt;Content 2&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Three-column layout --&gt;
&lt;div class="three-column"&gt;
&lt;div&gt;Content 1&lt;/div&gt;
&lt;div&gt;Content 2&lt;/div&gt;
&lt;div&gt;Content 3&lt;/div&gt;
&lt;/div&gt;
</div>
</div>
</div>
</body>
</html>

347
skills/netresearch-branding/references/colors.md Normal file
View File

@@ -0,0 +1,347 @@
# Netresearch Brand Colors Reference
Complete color palette with technical specifications and usage guidelines.
## Primary Brand Colors
### Turquoise (Primary)
**Technical Specifications:**
- **Hex:** `#2F99A4`
- **RGB:** `rgb(47, 153, 164)`
- **CMYK:** `C71 M7 Y17 K36`
- **Pantone:** 7709 C (approximate)
- **NCS:** S 3040-B30G
**Usage:**
- Primary brand color for all digital and print materials
- Main CTA buttons and interactive elements
- Headers and key visual elements
- Links in default state
- Primary navigation highlights
- Brand identity elements
**Contrast Ratios (WCAG AA):**
- On white background: 3.8:1 (Meets AA for large text)
- On #F5F5F5: 4.2:1 (Meets AA for large text)
- White text on turquoise: 4.5:1 (Meets AA for all text)
**Web Implementation:**
```css
:root {
--color-primary: #2F99A4;
--color-primary-rgb: 47, 153, 164;
}
.btn-primary {
background-color: var(--color-primary);
color: #FFFFFF;
}
.link-primary {
color: var(--color-primary);
}
```
---
### Orange (Accent)
**Technical Specifications:**
- **Hex:** `#FF4D00`
- **RGB:** `rgb(255, 77, 0)`
- **CMYK:** `C0 M70 Y100 K0`
- **Pantone:** 172 C (approximate)
- **NCS:** S 1080-Y60R
**Usage:**
- Accent color for emphasis and highlights
- Secondary CTA buttons
- Important notifications and alerts
- Hover states on primary elements
- Call-out boxes and highlights
- Limited use - accent only, not dominant
**Contrast Ratios (WCAG AA):**
- On white background: 3.9:1 (Meets AA for large text)
- On #F5F5F5: 4.3:1 (Meets AA for large text)
- White text on orange: 3.2:1 (Meets AA for large text only)
**Web Implementation:**
```css
:root {
--color-accent: #FF4D00;
--color-accent-rgb: 255, 77, 0;
}
.btn-secondary {
background-color: var(--color-accent);
color: #FFFFFF;
}
.highlight {
border-left: 4px solid var(--color-accent);
}
```
---
## Neutral Colors
### Anthracite (Text Primary)
**Technical Specifications:**
- **Hex:** `#585961`
- **RGB:** `rgb(88, 89, 97)`
- **CMYK:** C9 M2 Y0 K62`
- **NCS:** S 5502-B
**Usage:**
- Primary text color for body copy
- Headlines and subheadings
- Navigation text
- Form labels
- Default icon color
**Contrast Ratios (WCAG AA):**
- On white background: 8.3:1 (Meets AAA for all text)
- On #F5F5F5: 7.8:1 (Meets AAA for all text)
**Web Implementation:**
```css
:root {
--color-text-primary: #585961;
}
body, p, h1, h2, h3 {
color: var(--color-text-primary);
}
```
---
### Light Grey (Backgrounds)
**Technical Specifications:**
- **Hex:** `#CCCDCC`
- **RGB:** `rgb(204, 205, 204)`
- **CMYK:** C0 M0 Y0 K20`
- **NCS:** S 2000-N
**Usage:**
- Background sections and cards
- Subtle borders and dividers
- Disabled states
- Alternating table rows
- Input field borders
**Contrast Note:**
- Not suitable for text on white background
- Use for backgrounds and UI elements only
**Web Implementation:**
```css
:root {
--color-background-light: #CCCDCC;
--color-border-light: #CCCDCC;
}
.card {
background-color: #F5F5F5;
border: 1px solid var(--color-border-light);
}
```
---
### White (Background)
**Technical Specifications:**
- **Hex:** `#FFFFFF`
- **RGB:** `rgb(255, 255, 255)`
**Usage:**
- Primary background color
- Text on dark backgrounds
- Card backgrounds
- Clean, spacious layouts
---
## Color Combinations
### Approved Combinations
**Primary Palette:**
```css
/* Turquoise on white - Primary brand */
.combination-1 {
background: #FFFFFF;
color: #2F99A4;
}
/* White text on turquoise - High impact */
.combination-2 {
background: #2F99A4;
color: #FFFFFF;
}
/* Orange accent with turquoise */
.combination-3 {
background: #2F99A4;
border-color: #FF4D00;
color: #FFFFFF;
}
```
**Text Combinations:**
```css
/* Body text on white - Standard */
.text-standard {
background: #FFFFFF;
color: #585961;
}
/* Body text on light grey - Sections */
.text-section {
background: #F5F5F5;
color: #585961;
}
```
### Avoid These Combinations
❌ **Never Use:**
- Orange on turquoise (poor contrast)
- Light grey text on white (fails WCAG)
- Turquoise text smaller than 18px on white (AA compliance)
- Orange text on white for small text (fails AA)
---
## Accessibility Guidelines
### WCAG AA Compliance
**Minimum Contrast Ratios:**
- **Normal text (< 18px):** 4.5:1
- **Large text (≥ 18px):** 3:1
- **UI components:** 3:1
**Approved Text Combinations:**
✅ **Pass AA for All Text Sizes:**
- Anthracite (#585961) on white: 8.3:1 ✓
- Anthracite (#585961) on #F5F5F5: 7.8:1 ✓
- White on turquoise (#2F99A4): 4.5:1 ✓
✅ **Pass AA for Large Text Only:**
- Turquoise (#2F99A4) on white: 3.8:1 ✓
- Orange (#FF4D00) on white: 3.9:1 ✓
- White on orange (#FF4D00): 3.2:1 ✓
❌ **Fail AA (Do Not Use):**
- Light grey (#CCCDCC) on white: 1.6:1 ✗
---
## Usage Guidelines by Context
### Websites
- **Primary color:** Turquoise for headers, links, CTAs
- **Accent color:** Orange sparingly for emphasis
- **Background:** White (#FFFFFF) or subtle off-white (#F5F5F5)
- **Text:** Anthracite (#585961)
- **High white space:** Let colors breathe
### Social Media
- **Header images:** Turquoise primary with orange accents
- **Profile elements:** Turquoise logo on white
- **Post graphics:** Maximum 2 brand colors per graphic
### Documents
- **Headers:** Turquoise or anthracite
- **Highlights:** Orange for key information
- **Body text:** Anthracite
- **Backgrounds:** White primary, light grey for emphasis
### Presentations
- **Title slides:** Turquoise background with white text
- **Content slides:** White background with turquoise accents
- **Emphasis:** Orange for key points
---
## CSS Custom Properties (Complete Set)
```css
:root {
/* Primary Colors */
--color-primary: #2F99A4;
--color-primary-rgb: 47, 153, 164;
--color-primary-light: rgba(47, 153, 164, 0.1);
--color-primary-dark: #257880;
/* Accent Colors */
--color-accent: #FF4D00;
--color-accent-rgb: 255, 77, 0;
--color-accent-light: rgba(255, 77, 0, 0.1);
--color-accent-dark: #CC3D00;
/* Neutral Colors */
--color-text-primary: #585961;
--color-text-secondary: #8A8B93;
--color-background: #FFFFFF;
--color-background-alt: #F5F5F5;
--color-border: #CCCDCC;
--color-border-light: #E5E5E5;
/* Semantic Colors */
--color-success: #28A745;
--color-warning: #FFC107;
--color-error: #DC3545;
--color-info: var(--color-primary);
}
```
---
## Sass/SCSS Variables
```scss
// Primary Colors
$color-primary: #2F99A4;
$color-accent: #FF4D00;
// Neutral Colors
$color-anthracite: #585961;
$color-light-grey: #CCCDCC;
$color-white: #FFFFFF;
// Backgrounds
$color-bg-primary: $color-white;
$color-bg-secondary: #F5F5F5;
// Text
$color-text-primary: $color-anthracite;
$color-text-secondary: lighten($color-anthracite, 15%);
// Borders
$color-border: $color-light-grey;
$color-border-light: #E5E5E5;
```
---
## Color Testing Checklist
Before deploying any brand materials:
- [ ] All text meets WCAG AA contrast requirements
- [ ] Turquoise is primary, orange is accent only
- [ ] No unapproved color combinations used
- [ ] Colors match exact hex values
- [ ] High white space maintained
- [ ] Tested on multiple displays for color accuracy
- [ ] Print materials use CMYK values
- [ ] Digital materials use RGB/Hex values
---
*Last updated: 2025-10-18*
*Maintained by: Netresearch DTT GmbH*

609
skills/netresearch-branding/references/typography.md Normal file
View File

@@ -0,0 +1,609 @@
# Netresearch Typography Reference
Complete typography system with font specifications, hierarchy, and implementation guidelines.
## Font Family Overview
| Context | Typeface | Purpose |
|---------|----------|---------|
| Web Headlines | **Raleway** | Digital headers, navigation, buttons |
| Web Body Text | **Open Sans** | Digital body copy, captions, lists |
| Documents | **Calibri** | Word, PowerPoint, Excel, email |
| Print | **Raleway + Open Sans** | Brochures, flyers, business cards |
---
## Raleway (Headlines & Display)
### Font Specifications
**Family:** Raleway
**Designer:** Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida
**License:** Open Font License (free for commercial use)
**Classification:** Sans-serif, Geometric
**Recommended Weights for Netresearch:**
- **Regular (400)** - Secondary headlines, navigation
- **Semi-Bold (600)** - Buttons, emphasized text
- **Bold (700)** - Primary headlines, h1-h2
### Web Font Loading
**Google Fonts CDN:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
```
**CSS @import:**
```css
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');
```
**Self-Hosted (Recommended for Performance):**
```css
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/raleway-regular.woff2') format('woff2'),
url('/fonts/raleway-regular.woff') format('woff');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/raleway-semibold.woff2') format('woff2'),
url('/fonts/raleway-semibold.woff') format('woff');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/raleway-bold.woff2') format('woff2'),
url('/fonts/raleway-bold.woff') format('woff');
}
```
### Usage Guidelines
**Use Raleway For:**
- ✅ Page headlines (h1, h2, h3)
- ✅ Navigation menu items
- ✅ Button labels
- ✅ Section headers
- ✅ Pull quotes and callouts
- ✅ Hero text and taglines
**Do Not Use Raleway For:**
- ❌ Body paragraphs (use Open Sans)
- ❌ Long-form content (readability issues)
- ❌ Small text below 14px (legibility)
- ❌ Dense information tables
---
## Open Sans (Body Text)
### Font Specifications
**Family:** Open Sans
**Designer:** Steve Matteson
**License:** Apache License 2.0 (free for commercial use)
**Classification:** Sans-serif, Humanist
**Recommended Weights for Netresearch:**
- **Regular (400)** - Body text, lists, captions
- **Semi-Bold (600)** - Emphasized body text, labels
- **Bold (700)** - Strong emphasis, sub-headers
### Web Font Loading
**Google Fonts CDN:**
```html
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
```
**CSS @import:**
```css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
```
**Self-Hosted:**
```css
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/opensans-regular.woff2') format('woff2'),
url('/fonts/opensans-regular.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/opensans-semibold.woff2') format('woff2'),
url('/fonts/opensans-semibold.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/opensans-bold.woff2') format('woff2'),
url('/fonts/opensans-bold.woff') format('woff');
}
```
### Usage Guidelines
**Use Open Sans For:**
- ✅ All body copy and paragraphs
- ✅ Lists (ordered and unordered)
- ✅ Form input text
- ✅ Captions and metadata
- ✅ Table content
- ✅ Footer text
**Do Not Use Open Sans For:**
- ❌ Main page headlines (use Raleway)
- ❌ Large display text above 48px (use Raleway)
---
## Calibri (Documents)
### Font Specifications
**Family:** Calibri
**Designer:** Luc(as) de Groot
**License:** Microsoft bundled (available on Windows/Office)
**Classification:** Sans-serif, Humanist
**Weights Available:**
- Regular (400)
- Bold (700)
- Italic (400)
- Bold Italic (700)
### Usage Guidelines
**Use Calibri For:**
- ✅ Microsoft Word documents
- ✅ PowerPoint presentations
- ✅ Excel spreadsheets
- ✅ Outlook emails
- ✅ Internal documentation
**Fallback for Non-Microsoft Platforms:**
```css
font-family: Calibri, 'Open Sans', Arial, sans-serif;
```
**Document Templates:**
- **Headings:** Calibri Bold, Turquoise (#2F99A4)
- **Body Text:** Calibri Regular, Anthracite (#585961)
- **Emphasis:** Calibri Bold or Calibri Italic
---
## Typography Scale
### Web Typography Hierarchy
```css
/* h1 - Page Title */
h1 {
font-family: 'Raleway', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
color: #585961;
margin-bottom: 24px;
}
/* h2 - Section Header */
h2 {
font-family: 'Raleway', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.3;
color: #585961;
margin-bottom: 20px;
}
/* h3 - Subsection Header */
h3 {
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 600;
line-height: 1.4;
color: #585961;
margin-bottom: 16px;
}
/* h4 - Minor Header */
h4 {
font-family: 'Raleway', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.4;
color: #585961;
margin-bottom: 12px;
}
/* h5 - Small Header */
h5 {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
color: #585961;
margin-bottom: 12px;
}
/* Body Text */
body, p {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #585961;
margin-bottom: 16px;
}
/* Small Text / Captions */
.text-small, small {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
color: #585961;
}
/* Lead Paragraph */
.lead {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.6;
color: #585961;
}
```
### Responsive Typography
```css
/* Mobile First Approach */
/* Base (Mobile) */
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
body, p { font-size: 16px; }
/* Tablet (768px+) */
@media (min-width: 768px) {
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
h1 { font-size: 48px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
}
/* Large Desktop (1440px+) */
@media (min-width: 1440px) {
h1 { font-size: 56px; }
h2 { font-size: 40px; }
}
```
---
## Line Height & Spacing
### Line Height Guidelines
```css
/* Headlines - Tighter Leading */
h1, h2, h3 {
line-height: 1.2;
}
h4, h5, h6 {
line-height: 1.4;
}
/* Body Text - Comfortable Reading */
p, li, td {
line-height: 1.6;
}
/* Small Text */
small, .caption {
line-height: 1.5;
}
```
### Vertical Rhythm
```css
/* Consistent spacing system */
:root {
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
}
/* Apply to typography */
h1 { margin-bottom: var(--spacing-lg); }
h2 { margin-bottom: var(--spacing-lg); }
h3 { margin-bottom: var(--spacing-md); }
h4, h5 { margin-bottom: var(--spacing-sm); }
p { margin-bottom: var(--spacing-md); }
```
---
## Special Typography Elements
### Buttons
```css
.btn {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.5px;
text-transform: none;
}
.btn-large {
font-size: 18px;
}
.btn-small {
font-size: 14px;
}
```
### Navigation
```css
.nav-link {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.3px;
}
.nav-link:hover,
.nav-link.active {
font-weight: 600;
}
```
### Blockquotes / Pull Quotes
```css
blockquote {
font-family: 'Raleway', sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
font-style: italic;
color: #2F99A4;
border-left: 4px solid #FF4D00;
padding-left: 24px;
margin: 32px 0;
}
blockquote cite {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
font-style: normal;
color: #585961;
display: block;
margin-top: 12px;
}
```
### Lists
```css
ul, ol {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
margin-bottom: 16px;
padding-left: 24px;
}
li {
margin-bottom: 8px;
}
/* Custom bullet points using brand color */
ul.branded {
list-style: none;
padding-left: 0;
}
ul.branded li::before {
content: '●';
color: #2F99A4;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
```
---
## Font Loading Strategy
### Performance Optimization
```html
<!-- Critical CSS with system font fallback -->
<style>
body {
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', sans-serif;
}
</style>
<!-- Preload critical fonts -->
<link rel="preload"
href="/fonts/raleway-bold.woff2"
as="font"
type="font/woff2"
crossorigin>
<link rel="preload"
href="/fonts/opensans-regular.woff2"
as="font"
type="font/woff2"
crossorigin>
```
### Font Display Strategy
```css
@font-face {
font-family: 'Raleway';
font-display: swap; /* Show fallback immediately, swap when loaded */
/* ... other properties */
}
```
### Fallback Stack
```css
/* Complete fallback chain */
--font-headlines: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, sans-serif;
--font-documents: Calibri, 'Open Sans', Arial, sans-serif;
```
---
## Accessibility Considerations
### Minimum Font Sizes
- **Body text:** Never below 16px (1rem)
- **Small text:** Never below 14px (0.875rem)
- **Buttons:** Minimum 16px for touch targets
### Contrast Requirements
All text must meet WCAG AA:
- **Normal text:** 4.5:1 contrast ratio
- **Large text (≥18px):** 3:1 contrast ratio
### Readability
**Line Length:**
- Optimal: 50-75 characters per line
- Maximum: 90 characters per line
```css
.content {
max-width: 75ch; /* Character-based width */
}
```
**Paragraph Spacing:**
```css
p + p {
margin-top: 16px; /* Clear paragraph separation */
}
```
---
## CSS Custom Properties (Complete Set)
```css
:root {
/* Font Families */
--font-headline: 'Raleway', sans-serif;
--font-body: 'Open Sans', sans-serif;
--font-document: Calibri, 'Open Sans', sans-serif;
/* Font Sizes */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 28px;
--font-size-4xl: 36px;
--font-size-5xl: 48px;
--font-size-6xl: 56px;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Line Heights */
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-normal: 1.6;
--line-height-relaxed: 1.8;
/* Letter Spacing */
--letter-spacing-tight: -0.5px;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.5px;
}
```
---
## Typography Testing Checklist
Before deploying:
- [ ] Fonts load correctly on all major browsers
- [ ] Fallback fonts provide acceptable experience
- [ ] All text meets WCAG AA contrast requirements
- [ ] Font files optimized (woff2 format preferred)
- [ ] Font-display: swap implemented
- [ ] Line lengths within 50-90 character range
- [ ] Responsive typography scales appropriately
- [ ] No text smaller than 14px in production
- [ ] Headlines use Raleway, body uses Open Sans
- [ ] Documents use Calibri with proper fallbacks
---
*Last updated: 2025-10-18*
*Maintained by: Netresearch DTT GmbH*

860
skills/netresearch-branding/references/web-design.md Normal file
View File

@@ -0,0 +1,860 @@
# Netresearch Web Design Guidelines
Comprehensive web design patterns, layouts, components, and responsive design standards.
## Core Design Principles
### 1. High White Space
**Philosophy:** Clean, uncluttered layouts that prioritize content and readability.
```css
/* Generous spacing throughout */
:root {
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 96px;
}
/* Section spacing */
section {
padding: var(--spacing-4xl) 0;
}
/* Content spacing */
.content {
padding: var(--spacing-xxl);
}
```
**Guidelines:**
- Minimum 48px padding around major sections
- Minimum 24px margin between content blocks
- Generous line-height (1.6) for readability
- Never crowd elements - let designs breathe
---
### 2. Responsive Grid System
**12-Column Flexible Grid:**
```css
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-lg);
padding: 0 var(--spacing-lg);
}
/* Content within container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* Responsive columns */
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 768px) {
.col-6, .col-4, .col-3 {
grid-column: span 12;
}
}
```
---
### 3. Design Hierarchy
- **Primary:** Turquoise (#2F99A4) for key elements
- **Secondary:** Orange (#FF4D00) for accents only
- **Typography:** Clear hierarchy with Raleway headers and Open Sans body
- **Visual Flow:** Top to bottom, left to right reading patterns
---
## Responsive Breakpoints
### Standard Breakpoints
```css
/* Mobile First Approach */
/* Extra Small (Mobile Portrait) */
/* Default: 0px - 599px */
/* Small (Mobile Landscape) */
@media (min-width: 600px) {
/* Adjustments for landscape phones */
}
/* Medium (Tablet) */
@media (min-width: 768px) {
/* Two-column layouts start here */
}
/* Large (Desktop) */
@media (min-width: 1024px) {
/* Full desktop layouts */
}
/* Extra Large (Wide Desktop) */
@media (min-width: 1440px) {
/* Maximum content width, larger typography */
}
/* Ultra Wide */
@media (min-width: 1920px) {
/* Optional: Enhanced spacing for ultra-wide displays */
}
```
### Container Widths
```css
.container {
width: 100%;
margin: 0 auto;
padding: 0 16px;
}
@media (min-width: 600px) {
.container { max-width: 580px; }
}
@media (min-width: 768px) {
.container { max-width: 750px; }
}
@media (min-width: 1024px) {
.container { max-width: 1000px; }
}
@media (min-width: 1440px) {
.container { max-width: 1200px; }
}
```
---
## Component Library
### Buttons
```css
/* Primary Button */
.btn-primary {
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
text-align: center;
text-decoration: none;
padding: 12px 32px;
border: none;
border-radius: 4px;
background-color: #2F99A4;
color: #FFFFFF;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #257880;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3);
}
.btn-primary:active {
transform: translateY(0);
}
/* Secondary Button */
.btn-secondary {
background-color: #FF4D00;
color: #FFFFFF;
}
.btn-secondary:hover {
background-color: #CC3D00;
box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
}
/* Outline Button */
.btn-outline {
background-color: transparent;
color: #2F99A4;
border: 2px solid #2F99A4;
}
.btn-outline:hover {
background-color: #2F99A4;
color: #FFFFFF;
}
/* Button Sizes */
.btn-small {
padding: 8px 24px;
font-size: 14px;
}
.btn-large {
padding: 16px 48px;
font-size: 18px;
}
/* Button States */
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
```
**Button Usage:**
```html
<!-- Primary action -->
<button class="btn-primary">Get Started</button>
<!-- Secondary action -->
<button class="btn-secondary">Learn More</button>
<!-- Tertiary action -->
<button class="btn-outline">Contact Us</button>
<!-- Sizes -->
<button class="btn-primary btn-small">Small</button>
<button class="btn-primary">Default</button>
<button class="btn-primary btn-large">Large</button>
```
---
### Cards
```css
.card {
background: #FFFFFF;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.card-image {
width: 100%;
height: 240px;
object-fit: cover;
}
.card-content {
padding: var(--spacing-lg);
}
.card-title {
font-family: 'Raleway', sans-serif;
font-size: 22px;
font-weight: 600;
color: #585961;
margin-bottom: var(--spacing-sm);
}
.card-text {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #585961;
margin-bottom: var(--spacing-md);
}
.card-footer {
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid #E5E5E5;
background-color: #F5F5F5;
}
```
**Card Usage:**
```html
<div class="card">
<img src="image.jpg" alt="Card image" class="card-image">
<div class="card-content">
<h3 class="card-title">Card Title</h3>
<p class="card-text">Card description goes here.</p>
<a href="#" class="btn-primary">Read More</a>
</div>
<div class="card-footer">
<span class="card-meta">Posted: January 1, 2025</span>
</div>
</div>
```
---
### Navigation
```css
/* Main Navigation */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: var(--spacing-md) 0;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.navbar-logo {
height: 48px;
}
.navbar-menu {
display: flex;
gap: var(--spacing-lg);
list-style: none;
margin: 0;
padding: 0;
}
.navbar-link {
font-family: 'Raleway', sans-serif;
font-size: 16px;
font-weight: 400;
color: #585961;
text-decoration: none;
padding: 8px 16px;
transition: all 0.3s ease;
}
.navbar-link:hover,
.navbar-link.active {
color: #2F99A4;
font-weight: 600;
}
/* Mobile Menu Toggle */
.navbar-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
}
.navbar-toggle span {
display: block;
width: 24px;
height: 3px;
background: #2F99A4;
transition: all 0.3s ease;
}
@media (max-width: 768px) {
.navbar-toggle {
display: flex;
}
.navbar-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: #FFFFFF;
padding: var(--spacing-lg);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.navbar-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
```
---
### Forms
```css
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-label {
display: block;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 600;
color: #585961;
margin-bottom: var(--spacing-xs);
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #585961;
padding: 12px 16px;
border: 1px solid #CCCDCC;
border-radius: 4px;
background: #FFFFFF;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #2F99A4;
box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1);
}
.form-input::placeholder {
color: #8A8B93;
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-error {
color: #DC3545;
font-size: 14px;
margin-top: var(--spacing-xs);
}
.form-input.error {
border-color: #DC3545;
}
.form-help {
font-size: 14px;
color: #8A8B93;
margin-top: var(--spacing-xs);
}
```
**Form Example:**
```html
<form class="form">
<div class="form-group">
<label for="name" class="form-label">Name*</label>
<input type="text" id="name" class="form-input" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email*</label>
<input type="email" id="email" class="form-input" placeholder="your@email.com" required>
<small class="form-help">We'll never share your email.</small>
</div>
<div class="form-group">
<label for="message" class="form-label">Message*</label>
<textarea id="message" class="form-textarea" placeholder="Your message" required></textarea>
</div>
<button type="submit" class="btn-primary">Send Message</button>
</form>
```
---
### Links
```css
/* Body Links */
a {
color: #2F99A4;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
}
a:hover {
color: #257880;
border-bottom-color: #2F99A4;
}
/* External Links */
a[target="_blank"]::after {
content: ' ↗';
font-size: 0.9em;
}
/* Download Links */
a[download]::before {
content: '⬇ ';
}
/* Standalone Links */
.link-standalone {
font-family: 'Raleway', sans-serif;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
}
.link-standalone::after {
content: '→';
transition: transform 0.3s ease;
}
.link-standalone:hover::after {
transform: translateX(4px);
}
```
---
### Hero Sections
```css
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
padding: var(--spacing-4xl) var(--spacing-lg);
background: linear-gradient(135deg, #2F99A4 0%, #257880 100%);
color: #FFFFFF;
text-align: center;
}
.hero-content {
max-width: 800px;
z-index: 1;
}
.hero-title {
font-family: 'Raleway', sans-serif;
font-size: 56px;
font-weight: 700;
margin-bottom: var(--spacing-lg);
}
.hero-subtitle {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.6;
margin-bottom: var(--spacing-xl);
opacity: 0.9;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.hero {
min-height: 400px;
padding: var(--spacing-xxl) var(--spacing-lg);
}
.hero-title {
font-size: 36px;
}
.hero-subtitle {
font-size: 18px;
}
.hero-cta {
flex-direction: column;
}
}
```
---
### Tables
```css
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-lg);
background: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.table thead {
background-color: #2F99A4;
color: #FFFFFF;
}
.table th {
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-align: left;
padding: 16px;
}
.table td {
font-family: 'Open Sans', sans-serif;
padding: 12px 16px;
border-bottom: 1px solid #E5E5E5;
}
.table tbody tr:hover {
background-color: #F5F5F5;
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* Responsive Table */
@media (max-width: 768px) {
.table {
display: block;
overflow-x: auto;
}
}
```
---
### Footer
```css
.footer {
background-color: #585961;
color: #FFFFFF;
padding: var(--spacing-4xl) 0 var(--spacing-lg);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.footer-section h4 {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 600;
color: #FFFFFF;
margin-bottom: var(--spacing-md);
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: var(--spacing-sm);
}
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: #2F99A4;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-lg);
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
```
---
## Layout Patterns
### Two-Column Layout
```css
.two-column {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-xl);
}
@media (max-width: 768px) {
.two-column {
grid-template-columns: 1fr;
}
}
```
### Three-Column Layout
```css
.three-column {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
@media (max-width: 1024px) {
.three-column {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.three-column {
grid-template-columns: 1fr;
}
}
```
### Content + Sidebar
```css
.content-sidebar {
display: grid;
grid-template-columns: 3fr 1fr;
gap: var(--spacing-xxl);
}
@media (max-width: 1024px) {
.content-sidebar {
grid-template-columns: 1fr;
}
}
```
---
## Animations & Transitions
```css
/* Smooth transitions */
* {
transition-timing-function: ease-in-out;
}
/* Fade In */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
/* Slide In */
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/* Pulse (for emphasis) */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
```
---
## Web Design Checklist
Before launching any web project:
**Layout:**
- [ ] High white space maintained throughout
- [ ] Responsive grid implemented correctly
- [ ] All breakpoints tested (mobile, tablet, desktop)
- [ ] Content max-width appropriate (≤1200px)
**Components:**
- [ ] Buttons follow brand styles (Raleway font, correct colors)
- [ ] Cards have appropriate shadows and hover states
- [ ] Navigation sticky/fixed and accessible
- [ ] Forms styled consistently with validation
**Typography:**
- [ ] Headlines use Raleway
- [ ] Body text uses Open Sans
- [ ] Font sizes scale responsively
- [ ] Line-heights appropriate for readability
**Colors:**
- [ ] Turquoise primary, orange accent only
- [ ] WCAG AA contrast compliance verified
- [ ] Brand colors match exactly (no variations)
**Performance:**
- [ ] Images optimized and responsive
- [ ] Fonts loaded efficiently (preload critical)
- [ ] CSS minified for production
- [ ] Animations use transform/opacity (GPU-accelerated)
**Accessibility:**
- [ ] All interactive elements keyboard accessible
- [ ] ARIA labels where needed
- [ ] Focus states visible
- [ ] Screen reader tested
---
*Last updated: 2025-10-18*
*Maintained by: Netresearch DTT GmbH*

285
skills/netresearch-branding/templates/landing-page.html Normal file
View File

@@ -0,0 +1,285 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netresearch - Landing Page Template</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="navbar-container">
<img src="logo.svg" alt="Netresearch Logo" class="navbar-logo">
<button class="navbar-toggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<ul class="navbar-menu">
<li><a href="#services" class="navbar-link active">Services</a></li>
<li><a href="#about" class="navbar-link">About</a></li>
<li><a href="#portfolio" class="navbar-link">Portfolio</a></li>
<li><a href="#contact" class="navbar-link">Contact</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">Your Digital Transformation Partner</h1>
<p class="hero-subtitle">
We create innovative digital solutions that drive business growth and enhance user experiences.
</p>
<div class="hero-cta">
<a href="#contact" class="btn-primary btn-large">Get Started</a>
<a href="#services" class="btn-outline btn-large">Learn More</a>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="section">
<div class="container">
<h2 class="section-title">Our Services</h2>
<p class="section-subtitle">
Comprehensive digital solutions tailored to your needs
</p>
<div class="three-column">
<div class="card">
<div class="card-content">
<h3 class="card-title">Web Development</h3>
<p class="card-text">
Modern, responsive websites built with the latest technologies and best practices.
</p>
<a href="#" class="link-standalone">Learn more</a>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">E-Commerce Solutions</h3>
<p class="card-text">
Powerful online stores that drive sales and provide exceptional shopping experiences.
</p>
<a href="#" class="link-standalone">Learn more</a>
</div>
</div>
<div class="card">
<div class="card-content">
<h3 class="card-title">Digital Strategy</h3>
<p class="card-text">
Strategic consulting to help your business thrive in the digital landscape.
</p>
<a href="#" class="link-standalone">Learn more</a>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="section section-alt">
<div class="container">
<div class="two-column">
<div>
<h2>About Netresearch</h2>
<p class="lead">
With over 20 years of experience, we've been helping businesses succeed online through innovative digital solutions.
</p>
<p>
Our team of experts combines technical excellence with creative thinking to deliver projects that exceed expectations. We specialize in TYPO3, e-commerce, and custom web applications.
</p>
<p>
Based in Leipzig, Germany, we serve clients across Europe and beyond, providing end-to-end digital services from strategy to implementation and support.
</p>
<a href="#contact" class="btn-primary">Work with us</a>
</div>
<div>
<img src="about-image.jpg" alt="Netresearch team" style="width: 100%; border-radius: 8px;">
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="section">
<div class="container">
<h2 class="section-title">Our Work</h2>
<p class="section-subtitle">
Recent projects we're proud of
</p>
<div class="three-column">
<div class="card">
<img src="project-1.jpg" alt="Project 1" class="card-image">
<div class="card-content">
<h3 class="card-title">E-Commerce Platform</h3>
<p class="card-text">
Complete redesign and development of a multi-vendor marketplace.
</p>
<div class="card-footer">
<span class="card-meta">TYPO3 • Magento • 2024</span>
</div>
</div>
</div>
<div class="card">
<img src="project-2.jpg" alt="Project 2" class="card-image">
<div class="card-content">
<h3 class="card-title">Corporate Website</h3>
<p class="card-text">
Modern website with multilingual content and advanced integrations.
</p>
<div class="card-footer">
<span class="card-meta">TYPO3 • API • 2024</span>
</div>
</div>
</div>
<div class="card">
<img src="project-3.jpg" alt="Project 3" class="card-image">
<div class="card-content">
<h3 class="card-title">Custom Web Application</h3>
<p class="card-text">
Bespoke solution for complex business requirements and workflows.
</p>
<div class="card-footer">
<span class="card-meta">Laravel • Vue.js • 2024</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="section section-alt">
<div class="container">
<div class="two-column">
<div>
<h2>Get in Touch</h2>
<p class="lead">
Ready to start your next project? Let's talk about how we can help.
</p>
<p>
<strong>Netresearch DTT GmbH</strong><br>
Nonnenstraße 11d<br>
04229 Leipzig, Germany
</p>
<p>
<strong>Phone:</strong> +49 341 49288-0<br>
<strong>Email:</strong> <a href="mailto:info@netresearch.de">info@netresearch.de</a>
</p>
</div>
<div>
<form class="form">
<div class="form-group">
<label for="name" class="form-label">Name*</label>
<input type="text" id="name" class="form-input" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email" class="form-label">Email*</label>
<input type="email" id="email" class="form-input" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label for="subject" class="form-label">Subject*</label>
<input type="text" id="subject" class="form-input" placeholder="Project inquiry" required>
</div>
<div class="form-group">
<label for="message" class="form-label">Message*</label>
<textarea id="message" class="form-textarea" placeholder="Tell us about your project" required></textarea>
</div>
<button type="submit" class="btn-primary btn-large">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4>Company</h4>
<ul>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#careers">Careers</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Services</h4>
<ul>
<li><a href="#web-dev">Web Development</a></li>
<li><a href="#ecommerce">E-Commerce</a></li>
<li><a href="#typo3">TYPO3</a></li>
<li><a href="#consulting">Consulting</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Resources</h4>
<ul>
<li><a href="#blog">Blog</a></li>
<li><a href="#case-studies">Case Studies</a></li>
<li><a href="#documentation">Documentation</a></li>
<li><a href="#support">Support</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Legal</h4>
<ul>
<li><a href="#imprint">Imprint</a></li>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>&copy; 2025 Netresearch DTT GmbH. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const toggle = document.querySelector('.navbar-toggle');
const menu = document.querySelector('.navbar-menu');
toggle.addEventListener('click', () => {
menu.classList.toggle('active');
});
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
menu.classList.remove('active');
}
});
});
</script>
</body>
</html>

612
skills/netresearch-branding/templates/styles.css Normal file
View File

@@ -0,0 +1,612 @@
/*
* Netresearch Brand Styles
* Complete CSS template following brand guidelines
*/
/* ============================================
CSS CUSTOM PROPERTIES
============================================ */
:root {
/* Brand Colors */
--color-primary: #2F99A4;
--color-primary-rgb: 47, 153, 164;
--color-primary-dark: #257880;
--color-accent: #FF4D00;
--color-accent-rgb: 255, 77, 0;
--color-accent-dark: #CC3D00;
/* Neutral Colors */
--color-text-primary: #585961;
--color-text-secondary: #8A8B93;
--color-background: #FFFFFF;
--color-background-alt: #F5F5F5;
--color-border: #CCCDCC;
--color-border-light: #E5E5E5;
/* Typography */
--font-headline: 'Raleway', sans-serif;
--font-body: 'Open Sans', sans-serif;
/* Font Sizes */
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 28px;
--font-size-4xl: 36px;
--font-size-5xl: 48px;
--font-size-6xl: 56px;
/* Spacing */
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 96px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
}
/* ============================================
RESET & BASE STYLES
============================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text-primary);
background-color: var(--color-background);
}
/* ============================================
TYPOGRAPHY
============================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headline);
font-weight: 700;
line-height: 1.2;
color: var(--color-text-primary);
}
h1 {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-lg);
}
h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-lg);
}
h3 {
font-size: var(--font-size-3xl);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
h4 {
font-size: var(--font-size-2xl);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
p {
margin-bottom: var(--spacing-md);
}
.lead {
font-size: var(--font-size-xl);
font-weight: 400;
line-height: 1.6;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--color-primary-dark);
}
/* ============================================
LAYOUT
============================================ */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.section {
padding: var(--spacing-4xl) 0;
}
.section-alt {
background-color: var(--color-background-alt);
}
.section-title {
text-align: center;
margin-bottom: var(--spacing-md);
}
.section-subtitle {
text-align: center;
font-size: var(--font-size-xl);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xxl);
}
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
align-items: center;
}
.three-column {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
/* ============================================
NAVIGATION
============================================ */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
background: var(--color-background);
box-shadow: var(--shadow-sm);
padding: var(--spacing-md) 0;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.navbar-logo {
height: 48px;
}
.navbar-menu {
display: flex;
gap: var(--spacing-lg);
list-style: none;
}
.navbar-link {
font-family: var(--font-headline);
font-size: var(--font-size-base);
font-weight: 400;
color: var(--color-text-primary);
padding: var(--spacing-xs) var(--spacing-md);
transition: all 0.3s ease;
}
.navbar-link:hover,
.navbar-link.active {
color: var(--color-primary);
font-weight: 600;
}
.navbar-toggle {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: none;
cursor: pointer;
}
.navbar-toggle span {
display: block;
width: 24px;
height: 3px;
background: var(--color-primary);
transition: all 0.3s ease;
}
/* ============================================
HERO SECTION
============================================ */
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
padding: var(--spacing-4xl) var(--spacing-lg);
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: var(--color-background);
text-align: center;
}
.hero-content {
max-width: 800px;
z-index: 1;
}
.hero-title {
color: var(--color-background);
margin-bottom: var(--spacing-lg);
}
.hero-subtitle {
font-size: var(--font-size-xl);
line-height: 1.6;
margin-bottom: var(--spacing-xl);
opacity: 0.95;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
/* ============================================
BUTTONS
============================================ */
.btn-primary,
.btn-secondary,
.btn-outline {
display: inline-block;
font-family: var(--font-headline);
font-size: var(--font-size-base);
font-weight: 600;
line-height: 1;
text-align: center;
text-decoration: none;
padding: 12px 32px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-background);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3);
}
.btn-secondary {
background-color: var(--color-accent);
color: var(--color-background);
}
.btn-secondary:hover {
background-color: var(--color-accent-dark);
box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
}
.btn-outline {
background-color: transparent;
color: var(--color-background);
border: 2px solid var(--color-background);
}
.btn-outline:hover {
background-color: var(--color-background);
color: var(--color-primary);
}
.btn-large {
padding: 16px 48px;
font-size: var(--font-size-lg);
}
.btn-small {
padding: 8px 24px;
font-size: var(--font-size-sm);
}
/* ============================================
CARDS
============================================ */
.card {
background: var(--color-background);
border-radius: 8px;
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}
.card-image {
width: 100%;
height: 240px;
object-fit: cover;
}
.card-content {
padding: var(--spacing-lg);
}
.card-title {
font-size: var(--font-size-2xl);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.card-text {
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text-primary);
margin-bottom: var(--spacing-md);
}
.card-footer {
padding: var(--spacing-md) var(--spacing-lg);
border-top: 1px solid var(--color-border-light);
background-color: var(--color-background-alt);
}
.card-meta {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
/* ============================================
LINKS
============================================ */
.link-standalone {
font-family: var(--font-headline);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-primary);
}
.link-standalone::after {
content: '→';
transition: transform 0.3s ease;
}
.link-standalone:hover::after {
transform: translateX(4px);
}
/* ============================================
FORMS
============================================ */
.form-group {
margin-bottom: var(--spacing-lg);
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: var(--spacing-xs);
}
.form-input,
.form-textarea {
width: 100%;
font-family: var(--font-body);
font-size: var(--font-size-base);
color: var(--color-text-primary);
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: 4px;
background: var(--color-background);
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-text-secondary);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
/* ============================================
FOOTER
============================================ */
.footer {
background-color: var(--color-text-primary);
color: var(--color-background);
padding: var(--spacing-4xl) 0 var(--spacing-lg);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.footer-section h4 {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-background);
margin-bottom: var(--spacing-md);
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: var(--spacing-sm);
}
.footer-section a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-section a:hover {
color: var(--color-primary);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-lg);
text-align: center;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.6);
font-size: var(--font-size-sm);
margin: 0;
}
/* ============================================
RESPONSIVE DESIGN
============================================ */
/* Tablet (768px and below) */
@media (max-width: 1024px) {
.three-column {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
/* Typography */
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
/* Layout */
.two-column,
.three-column {
grid-template-columns: 1fr;
}
/* Hero */
.hero {
min-height: 400px;
padding: var(--spacing-xxl) var(--spacing-lg);
}
.hero-title {
font-size: var(--font-size-4xl);
}
.hero-subtitle {
font-size: var(--font-size-lg);
}
.hero-cta {
flex-direction: column;
}
/* Navigation */
.navbar-toggle {
display: flex;
}
.navbar-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: var(--color-background);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.navbar-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Sections */
.section {
padding: var(--spacing-xxl) 0;
}
}
/* Mobile (600px and below) */
@media (max-width: 600px) {
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
.hero {
min-height: 300px;
}
.btn-large {
padding: 12px 32px;
font-size: var(--font-size-base);
}
}
/* ============================================
UTILITIES
============================================ */
.text-center {
text-align: center;
}
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }