From 2177429b909d473f6d4a591bbe6be215fae761d9 Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 26 Mar 2026 05:55:25 +0000 Subject: [PATCH] Initial commit: Payfrit teams site styles and data Team member data and CSS for the Payfrit teams page. Co-Authored-By: Claude Opus 4.6 (1M context) --- style.css | 328 +++++++++++++++++++++++++++++++++++++++++++++++++ team-data.json | 72 +++++++++++ 2 files changed, 400 insertions(+) create mode 100644 style.css create mode 100644 team-data.json diff --git a/style.css b/style.css new file mode 100644 index 0000000..afcdebb --- /dev/null +++ b/style.css @@ -0,0 +1,328 @@ +/* ========================================================================== + Payfrit Teams — Brand Stylesheet + teams.payfrit.com + ========================================================================== */ + +/* ---------- Brand Tokens ---------- */ +:root { + /* Payfrit brand palette */ + --pf-primary: #4F46E5; /* Indigo 600 */ + --pf-primary-light: #6366F1; /* Indigo 500 */ + --pf-primary-dark: #3730A3; /* Indigo 800 */ + --pf-accent: #10B981; /* Emerald 500 */ + --pf-accent-light: #34D399; /* Emerald 400 */ + --pf-dark: #0F172A; /* Slate 900 */ + --pf-gray-900: #1E293B; + --pf-gray-800: #334155; + --pf-gray-700: #475569; + --pf-gray-400: #94A3B8; + --pf-gray-200: #E2E8F0; + --pf-gray-100: #F1F5F9; + --pf-white: #FFFFFF; + + /* Typography */ + --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + + /* Spacing */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; + --space-3xl: 4rem; + + /* Radius */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + + /* Transition */ + --transition: 200ms ease; +} + +/* ---------- Reset & Base ---------- */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 16px; + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-body); + color: var(--pf-gray-900); + background: var(--pf-gray-100); + line-height: 1.6; + min-height: 100vh; +} + +a { + color: var(--pf-primary); + text-decoration: none; + transition: color var(--transition); +} + +a:hover { + color: var(--pf-primary-light); +} + +img { + max-width: 100%; + display: block; +} + +/* ---------- Typography ---------- */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + font-weight: 700; + line-height: 1.2; + color: var(--pf-dark); +} + +h1 { font-size: clamp(2rem, 5vw, 3rem); } +h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } +h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } + +/* ---------- Layout ---------- */ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-lg); +} + +.section { + padding: var(--space-3xl) 0; +} + +/* ---------- Header / Nav ---------- */ +.site-header { + background: var(--pf-white); + border-bottom: 1px solid var(--pf-gray-200); + position: sticky; + top: 0; + z-index: 100; + backdrop-filter: blur(8px); + background: rgba(255, 255, 255, 0.95); +} + +.site-header .container { + display: flex; + align-items: center; + justify-content: space-between; + height: 64px; +} + +.logo { + font-family: var(--font-heading); + font-weight: 800; + font-size: 1.5rem; + color: var(--pf-primary); + letter-spacing: -0.025em; +} + +.logo span { + color: var(--pf-accent); +} + +.nav-links { + display: flex; + gap: var(--space-lg); + list-style: none; +} + +.nav-links a { + color: var(--pf-gray-700); + font-weight: 500; + font-size: 0.9375rem; + transition: color var(--transition); +} + +.nav-links a:hover, +.nav-links a.active { + color: var(--pf-primary); +} + +/* ---------- Hero ---------- */ +.hero { + background: linear-gradient(135deg, var(--pf-primary-dark) 0%, var(--pf-primary) 50%, var(--pf-primary-light) 100%); + color: var(--pf-white); + text-align: center; + padding: var(--space-3xl) 0; +} + +.hero h1 { + color: var(--pf-white); + margin-bottom: var(--space-md); +} + +.hero p { + font-size: 1.125rem; + opacity: 0.9; + max-width: 600px; + margin: 0 auto; +} + +/* ---------- Team Grid ---------- */ +.team-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: var(--space-xl); + padding: var(--space-xl) 0; +} + +.team-card { + background: var(--pf-white); + border-radius: var(--radius-lg); + padding: var(--space-xl); + box-shadow: var(--shadow-md); + transition: transform var(--transition), box-shadow var(--transition); + border: 1px solid var(--pf-gray-200); + position: relative; + overflow: hidden; +} + +.team-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--pf-primary), var(--pf-accent)); +} + +.team-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +.team-card .avatar { + width: 72px; + height: 72px; + border-radius: var(--radius-full); + background: linear-gradient(135deg, var(--pf-primary-light), var(--pf-accent)); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + color: var(--pf-white); + margin-bottom: var(--space-md); +} + +.team-card .name { + font-size: 1.25rem; + font-weight: 700; + color: var(--pf-dark); + margin-bottom: var(--space-xs); +} + +.team-card .handle { + font-size: 0.875rem; + color: var(--pf-primary); + font-weight: 500; + margin-bottom: var(--space-sm); +} + +.team-card .role { + font-size: 0.9375rem; + color: var(--pf-gray-700); + margin-bottom: var(--space-xs); +} + +.team-card .department { + display: inline-block; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--pf-accent); + background: rgba(16, 185, 129, 0.1); + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-full); +} + +/* ---------- Footer ---------- */ +.site-footer { + background: var(--pf-dark); + color: var(--pf-gray-400); + text-align: center; + padding: var(--space-xl) 0; + font-size: 0.875rem; +} + +.site-footer a { + color: var(--pf-accent-light); +} + +/* ---------- Utility ---------- */ +.text-center { text-align: center; } +.text-primary { color: var(--pf-primary); } +.text-accent { color: var(--pf-accent); } +.mt-sm { margin-top: var(--space-sm); } +.mt-md { margin-top: var(--space-md); } +.mt-lg { margin-top: var(--space-lg); } +.mt-xl { margin-top: var(--space-xl); } +.mb-sm { margin-bottom: var(--space-sm); } +.mb-md { margin-bottom: var(--space-md); } +.mb-lg { margin-bottom: var(--space-lg); } +.mb-xl { margin-bottom: var(--space-xl); } + +/* ---------- Responsive ---------- */ +@media (max-width: 768px) { + .site-header .container { + height: 56px; + } + + .nav-links { + gap: var(--space-md); + } + + .hero { + padding: var(--space-2xl) 0; + } + + .team-grid { + grid-template-columns: 1fr; + gap: var(--space-lg); + } + + .container { + padding: 0 var(--space-md); + } +} + +@media (max-width: 480px) { + .nav-links { + display: none; /* Mobile menu toggle needed */ + } + + .team-card { + padding: var(--space-lg); + } +} + +@media (min-width: 1400px) { + .team-grid { + grid-template-columns: repeat(4, 1fr); + } +} diff --git a/team-data.json b/team-data.json new file mode 100644 index 0000000..968560f --- /dev/null +++ b/team-data.json @@ -0,0 +1,72 @@ +{ + "team": "Payfrit", + "updated": "2026-03-19", + "members": [ + { + "name": "Luna", + "handle": "@luna", + "role": "QA Engineer", + "department": "Quality Assurance" + }, + { + "name": "Nora", + "handle": "@nora", + "role": "Sponsor Portal Developer", + "department": "Engineering" + }, + { + "name": "Kira", + "handle": "@kira", + "role": "General Agent", + "department": "Operations" + }, + { + "name": "Zara", + "handle": "@zara", + "role": "User Portal Developer", + "department": "Engineering" + }, + { + "name": "Jude", + "handle": "@jude", + "role": "WordPress Developer", + "department": "Engineering" + }, + { + "name": "Priya", + "handle": "@priya", + "role": "HR Manager", + "department": "Human Resources" + }, + { + "name": "Ava", + "handle": "@ava", + "role": "Designer", + "department": "Design" + }, + { + "name": "Alex", + "handle": "@alex", + "role": "Weedops Developer", + "department": "Engineering" + }, + { + "name": "Sarah", + "handle": "@sarah", + "role": "Frontend Developer", + "department": "Engineering" + }, + { + "name": "Mike", + "handle": "@mike", + "role": "Backend Developer", + "department": "Engineering" + }, + { + "name": "Raj", + "handle": "@raj", + "role": "Bot Infrastructure", + "department": "Engineering" + } + ] +}