Initial commit
This commit is contained in:
Zhongwei Li
12
.claude-plugin/plugin.json
Normal file
12
.claude-plugin/plugin.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "netresearch-branding",
|
||||
"description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.",
|
||||
"version": "1.1.0-20251126",
|
||||
"author": {
|
||||
"name": "Netresearch DTT GmbH",
|
||||
"email": "info@netresearch.de"
|
||||
},
|
||||
"skills": [
|
||||
"./"
|
||||
]
|
||||
}
|
||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# netresearch-branding
|
||||
|
||||
Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.
|
||||
19
assets/logos/netresearch-symbol-only.svg
Normal file
19
assets/logos/netresearch-symbol-only.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 921 B |
54
claudedocs/refactoring-summary.md
Normal file
54
claudedocs/refactoring-summary.md
Normal 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
examples/components.html
Normal file
313
examples/components.html
Normal 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">
|
||||
<button class="btn-primary">Primary Action</button>
|
||||
<button class="btn-secondary">Secondary Action</button>
|
||||
<button class="btn-outline">Tertiary Action</button>
|
||||
|
||||
<!-- Sizes -->
|
||||
<button class="btn-primary btn-small">Small</button>
|
||||
<button class="btn-primary">Default</button>
|
||||
<button class="btn-primary btn-large">Large</button>
|
||||
</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">
|
||||
<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 class="card-footer">
|
||||
<span class="card-meta">Metadata</span>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<p class="lead">Lead paragraph</p>
|
||||
<p>Body text</p>
|
||||
<small>Small text</small>
|
||||
</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">
|
||||
<!-- Inline link -->
|
||||
<a href="#">Link text</a>
|
||||
|
||||
<!-- Standalone link with arrow -->
|
||||
<a href="#" class="link-standalone">Learn more</a>
|
||||
|
||||
<!-- Download link -->
|
||||
<a href="file.pdf" download>Download PDF</a>
|
||||
|
||||
<!-- External link -->
|
||||
<a href="https://example.com" target="_blank">External</a>
|
||||
</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">
|
||||
<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="message" class="form-label">Message*</label>
|
||||
<textarea id="message" class="form-textarea"
|
||||
placeholder="Your message" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary">Submit</button>
|
||||
</form>
|
||||
</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">
|
||||
<!-- Two-column layout -->
|
||||
<div class="two-column">
|
||||
<div>Content 1</div>
|
||||
<div>Content 2</div>
|
||||
</div>
|
||||
|
||||
<!-- Three-column layout -->
|
||||
<div class="three-column">
|
||||
<div>Content 1</div>
|
||||
<div>Content 2</div>
|
||||
<div>Content 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
77
plugin.lock.json
Normal file
77
plugin.lock.json
Normal file
@@ -0,0 +1,77 @@
|
||||
{
|
||||
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||
"pluginId": "gh:netresearch/claude-code-marketplace:skills/netresearch-branding",
|
||||
"normalized": {
|
||||
"repo": null,
|
||||
"ref": "refs/tags/v20251128.0",
|
||||
"commit": "0aeaae6c6d369ee917b3c91b58f7cce7bbd86894",
|
||||
"treeHash": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6",
|
||||
"generatedAt": "2025-11-28T10:27:20.050957Z",
|
||||
"toolVersion": "publish_plugins.py@0.2.0"
|
||||
},
|
||||
"origin": {
|
||||
"remote": "git@github.com:zhongweili/42plugin-data.git",
|
||||
"branch": "master",
|
||||
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
|
||||
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
|
||||
},
|
||||
"manifest": {
|
||||
"name": "netresearch-branding",
|
||||
"description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.",
|
||||
"version": "1.1.0-20251126"
|
||||
},
|
||||
"content": {
|
||||
"files": [
|
||||
{
|
||||
"path": "README.md",
|
||||
"sha256": "a5b0012d55dca7ac9635b19f258541fc2db3bdcce16a520403ad6691a489aadc"
|
||||
},
|
||||
{
|
||||
"path": "SKILL.md",
|
||||
"sha256": "4dbc3494d69303bf5be910168bd991bfffa75c0d4f0606274e333f4f1349a032"
|
||||
},
|
||||
{
|
||||
"path": "references/colors.md",
|
||||
"sha256": "42fbf46dc515b079a250727b8881dde7541400d1777eccfd07b910c6a43328f8"
|
||||
},
|
||||
{
|
||||
"path": "references/web-design.md",
|
||||
"sha256": "2016875af8aaca78eff4121e107871339d79441d0e23d4ff3f148dff3fc12dd9"
|
||||
},
|
||||
{
|
||||
"path": "references/typography.md",
|
||||
"sha256": "a2484d7416e8f35e1db48dc694fe56945819951e2e8b9ad9b6d1815627b29fff"
|
||||
},
|
||||
{
|
||||
"path": "claudedocs/refactoring-summary.md",
|
||||
"sha256": "c1ace25fce5c5c8afa76d0900c8fec9c8255618c845a32b5eb5adce6803b260f"
|
||||
},
|
||||
{
|
||||
"path": "examples/components.html",
|
||||
"sha256": "548341dfdbaacf0b0d8befc95b264f4fdde1793dc6d3f73e1edde038624591f5"
|
||||
},
|
||||
{
|
||||
"path": ".claude-plugin/plugin.json",
|
||||
"sha256": "e46c28cdaadb6b32560e7269d3750de47b3016c188e1c0354b95f8c5ae9495e1"
|
||||
},
|
||||
{
|
||||
"path": "templates/styles.css",
|
||||
"sha256": "f4c1ecdb68b4132130f4f6261e56c1b020fdcbe38cf4ad4e4bff85dded88cc79"
|
||||
},
|
||||
{
|
||||
"path": "templates/landing-page.html",
|
||||
"sha256": "d5ad833e350e48a1e8cac4c8aa461e293e9723fab60469a8fc3b912046708fed"
|
||||
},
|
||||
{
|
||||
"path": "assets/logos/netresearch-symbol-only.svg",
|
||||
"sha256": "b63c3f838232beff165668516c1a2a81f9c05327b3712c07453523e4055337c1"
|
||||
}
|
||||
],
|
||||
"dirSha256": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6"
|
||||
},
|
||||
"security": {
|
||||
"scannedAt": null,
|
||||
"scannerVersion": null,
|
||||
"flags": []
|
||||
}
|
||||
}
|
||||
347
references/colors.md
Normal file
347
references/colors.md
Normal 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
references/typography.md
Normal file
609
references/typography.md
Normal 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
references/web-design.md
Normal file
860
references/web-design.md
Normal 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
templates/landing-page.html
Normal file
285
templates/landing-page.html
Normal 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>© 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
templates/styles.css
Normal file
612
templates/styles.css
Normal 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); }
|
||||
Reference in New Issue
Block a user