/* ============================================================ styles.css — Portfolio Website Stylesheet Aesthetic: Editorial / Refined — dark charcoal base, warm cream text, amber-gold accents. ============================================================ */ /* ---------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (Design Tokens) Note: Google Fonts is loaded via in the HTML for better performance (avoids render-blocking @import). ---------------------------------------------------------- */ :root { /* Colors */ --color-bg: #0d0d0d; /* near-black background */ --color-bg-card: #161616; /* slightly lighter card surface */ --color-bg-subtle: #1e1e1e; /* borders, inputs, subtle panels */ --color-text: #f0ead6; /* warm cream — primary text */ --color-text-muted: #8a8070; /* muted warm grey */ --color-text-dim: #5a5248; /* very dim text */ --color-accent: #c9a84c; /* amber gold — primary accent */ --color-accent-dim: #7d6830; /* dim gold for borders */ --color-accent-glow: rgba(201, 168, 76, 0.18); /* glow effect */ --color-white: #ffffff; /* Typography */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 2rem; --space-xl: 4rem; --space-xxl: 8rem; /* Borders — single source of truth for border colour */ --color-border: #2a2620; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --border: 1px solid var(--color-border); /* Transitions */ --transition: 0.25s ease; --transition-slow: 0.5s ease; /* Layout */ --max-width: 1100px; --nav-height: 70px; } /* ---------------------------------------------------------- 2. RESET & BASE ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } /* Links */ a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-text); } /* Images */ img { max-width: 100%; display: block; } /* Lists */ ul, ol { list-style: none; } /* ---------------------------------------------------------- 3. FOCUS STYLES (Accessibility — WCAG 2.4.7) Visible keyboard focus for all interactive elements. Uses :focus-visible to avoid showing outlines on mouse clicks. ---------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------------------------------------------------------- 4. TYPOGRAPHY UTILITIES ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-text); } h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); } h4 { font-size: 1.1rem; } p { color: var(--color-text-muted); max-width: 65ch; } /* Section-level heading with decorative line */ .section-heading { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); } .section-heading h2 { white-space: nowrap; } .section-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--color-accent-dim), transparent); } /* Mono label */ .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); } /* ---------------------------------------------------------- 5. LAYOUT UTILITIES ---------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } main { flex: 1; padding-top: var(--nav-height); /* offset for fixed nav */ } .page-section { padding: var(--space-xxl) 0; } /* ---------------------------------------------------------- 6. NAVIGATION BAR ---------------------------------------------------------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); z-index: 1000; background: rgba(13, 13, 13, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: var(--border); transition: background var(--transition); } .navbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; } /* Logo / Name — specificity avoids !important on link colour */ .navbar .nav-logo { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--color-text); letter-spacing: 0.02em; } .navbar .nav-logo span { color: var(--color-accent); } /* Nav links list */ .nav-links { display: flex; align-items: center; gap: var(--space-lg); } .nav-links a { font-size: 0.85rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); position: relative; padding-bottom: 2px; transition: color var(--transition); } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-accent); transition: width var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--color-text); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } /* Hamburger (mobile) */ .nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--color-text); /* Specify only the properties that change for better performance */ transition: transform var(--transition), opacity var(--transition); } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ---------------------------------------------------------- 7. FOOTER ---------------------------------------------------------- */ .footer { border-top: var(--border); padding: var(--space-lg) 0; background: var(--color-bg); } .footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); } .footer-copy { font-size: 0.8rem; color: var(--color-text-dim); font-family: var(--font-mono); } .footer-links { display: flex; gap: var(--space-md); } .footer-links a { font-size: 0.8rem; color: var(--color-text-dim); transition: color var(--transition); } .footer-links a:hover { color: var(--color-accent); } /* ---------------------------------------------------------- 8. BUTTONS ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.75rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; /* Specific properties only — avoids triggering layout on unrelated changes */ transition: background-color var(--transition), color var(--transition), border-color var(--transition); border: 1px solid transparent; text-decoration: none; } /* Primary: filled gold */ .btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } .btn-primary:hover { background: transparent; color: var(--color-accent); } /* Secondary: outlined */ .btn-secondary { background: transparent; color: var(--color-text); border-color: #3a3530; } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } /* Ghost */ .btn-ghost { background: transparent; color: var(--color-accent); border-color: var(--color-accent-dim); } .btn-ghost:hover { background: var(--color-accent-glow); border-color: var(--color-accent); } /* ---------------------------------------------------------- 9. CARDS (shared project / experience card style) ---------------------------------------------------------- */ .card { background: var(--color-bg-card); border: var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .card:hover { border-color: var(--color-accent-dim); transform: translateY(-4px); } .card-body { padding: var(--space-lg); } /* ---------------------------------------------------------- 10. PAGE-SPECIFIC: HOME (index.html) ---------------------------------------------------------- */ /* Hero section */ .hero { min-height: calc(100vh - var(--nav-height)); display: flex; align-items: center; position: relative; overflow: hidden; } /* Decorative background grid lines */ .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(201, 168, 76, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, 0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } /* Radial glow behind name */ .hero::after { content: ''; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(201, 168, 76, 0.07) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; } .hero-eyebrow { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); } .hero-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--color-accent); } .hero-name { margin-bottom: var(--space-sm); letter-spacing: -0.02em; } /* Gold highlight on first name */ .hero-name .highlight { color: var(--color-accent); font-style: italic; } .hero-title { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; color: var(--color-text-muted); margin-bottom: var(--space-sm); } .hero-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-text-dim); letter-spacing: 0.05em; margin-bottom: var(--space-xl); } .hero-meta span { color: var(--color-accent-dim); margin: 0 0.5rem; } .hero-intro { margin-bottom: var(--space-xl); max-width: 50ch; font-size: 1.05rem; line-height: 1.8; } .hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-md); } /* Floating accent number */ .hero-number { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(120px, 20vw, 220px); font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(201, 168, 76, 0.08); user-select: none; pointer-events: none; line-height: 1; } /* ---------------------------------------------------------- 11. PAGE-SPECIFIC: PROJECTS (projects.html) ---------------------------------------------------------- */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); } /* Project card image */ .project-card .card-image { width: 100%; height: 200px; object-fit: cover; background: var(--color-bg-subtle); display: flex; align-items: center; justify-content: center; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; } /* Image placeholder when no screenshot is available */ .project-card .img-placeholder { width: 100%; height: 200px; background: linear-gradient(135deg, #1a1a1a, #222); display: flex; align-items: center; justify-content: center; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; border-bottom: var(--border); } .project-card .card-body { display: flex; flex-direction: column; gap: var(--space-md); } .project-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; } .project-desc { font-size: 0.9rem; line-height: 1.7; } /* Tech stack chips */ .tech-stack { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .tech-chip { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; padding: 3px 10px; background: var(--color-bg-subtle); border: var(--border); /* was hardcoded #2a2620 — now uses CSS variable */ border-radius: 100px; color: var(--color-accent); } /* Video embed */ .project-video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; border: var(--border); } .project-video iframe { width: 100%; height: 100%; border: none; } /* ---------------------------------------------------------- 12. PAGE-SPECIFIC: RESEARCH (research.html) ---------------------------------------------------------- */ .coming-soon-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; gap: var(--space-lg); } .coming-soon-icon { font-size: 3rem; opacity: 0.3; } .coming-soon-wrap h2 { font-style: italic; color: var(--color-text-muted); } /* ---------------------------------------------------------- 13. PAGE-SPECIFIC: SKILLS (skills.html) ---------------------------------------------------------- */ .skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); } /* Skill category card */ .skill-card { background: var(--color-bg-card); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); transition: border-color var(--transition); } .skill-card:hover { border-color: var(--color-accent-dim); } .skill-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); } /* Shared icon style used by .skill-icon and .contact-icon */ .skill-icon, .contact-icon { background: var(--color-accent-glow); border: 1px solid var(--color-accent-dim); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .skill-icon { width: 36px; height: 36px; font-size: 1rem; } .skill-card h3 { font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-mono); color: var(--color-text); } /* Description list for skills */ .skills-dl dt { font-weight: 500; color: var(--color-text); font-size: 0.9rem; margin-top: var(--space-md); } .skills-dl dd { font-size: 0.8rem; color: var(--color-text-muted); padding-left: var(--space-md); border-left: 2px solid var(--color-accent-dim); margin-left: 0; margin-top: 2px; line-height: 1.5; } /* Certifications section */ .certs-section { margin-top: var(--space-xxl); } .certs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); } .certs-dl dt { font-family: var(--font-display); font-size: 1rem; color: var(--color-text); margin-bottom: var(--space-sm); } .certs-dl dd { margin: 0; } /* Merged .cert-img + .cert-placeholder — both share identical dimensions and decoration. Use .cert-media as the shared base class. .cert-placeholder kept as an alias for backward compatibility. */ .cert-media, .cert-placeholder { width: 100%; height: 160px; background: var(--color-bg-subtle); border: var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-dim); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; } /* When a real image is present, use object-fit */ .cert-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); } /* ---------------------------------------------------------- 14. PAGE-SPECIFIC: LEADERSHIP (leadership.html) ---------------------------------------------------------- */ .timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 40px; } /* Vertical connecting line */ .timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, var(--color-accent), transparent); } .timeline-item { position: relative; padding-bottom: var(--space-xl); } /* Dot on the line */ .timeline-item::before { content: ''; position: absolute; left: -36px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-accent-dim); } .timeline-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-sm); } .timeline-role { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .timeline-org { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-accent); letter-spacing: 0.08em; } .timeline-desc { font-size: 0.9rem; margin-bottom: var(--space-md); } .timeline-achievements { padding-left: var(--space-md); } .timeline-achievements li { font-size: 0.85rem; color: var(--color-text-muted); padding: 4px 0 4px var(--space-md); border-left: 2px solid var(--color-accent-dim); margin-bottom: var(--space-sm); position: relative; } .timeline-achievements li::before { content: '→'; position: absolute; left: -14px; color: var(--color-accent); font-size: 0.7rem; } /* ---------------------------------------------------------- 15. PAGE-SPECIFIC: RESUME (resume.html) ---------------------------------------------------------- */ .resume-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; gap: var(--space-lg); } .resume-wrap p { max-width: 45ch; text-align: center; margin: 0 auto; } .resume-icon { font-size: 4rem; opacity: 0.15; font-family: var(--font-mono); letter-spacing: -0.05em; } /* ---------------------------------------------------------- 16. PAGE-SPECIFIC: CONTACT (contact.html) ---------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); max-width: 800px; } .contact-card { background: var(--color-bg-card); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); transition: border-color var(--transition), transform var(--transition); text-decoration: none; } .contact-card:hover { border-color: var(--color-accent); transform: translateY(-4px); color: inherit; } /* .contact-icon shares base styles with .skill-icon (declared above) */ .contact-icon { width: 48px; height: 48px; border-radius: var(--radius-md); font-size: 1.3rem; } .contact-card h3 { font-size: 1.05rem; font-family: var(--font-display); } .contact-card p { font-size: 0.85rem; max-width: none; line-height: 1.5; } .contact-arrow { font-size: 1.2rem; color: var(--color-accent); margin-top: auto; transition: transform var(--transition); } .contact-card:hover .contact-arrow { transform: translateX(4px); } /* ---------------------------------------------------------- 17. FADE-IN ANIMATION Triggered by JavaScript via the .visible class. Respects user's motion preferences. ---------------------------------------------------------- */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; /* Promote to composite layer during animation to avoid layout thrashing */ will-change: opacity, transform; } .fade-in.visible { opacity: 1; transform: translateY(0); /* Release the composite hint once animation completes */ will-change: auto; } /* Stagger delays */ .fade-in:nth-child(1) { transition-delay: 0.0s; } .fade-in:nth-child(2) { transition-delay: 0.1s; } .fade-in:nth-child(3) { transition-delay: 0.2s; } .fade-in:nth-child(4) { transition-delay: 0.3s; } .fade-in:nth-child(5) { transition-delay: 0.4s; } .fade-in:nth-child(6) { transition-delay: 0.5s; } /* Honour user preference — disable all animations & transitions */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fade-in { opacity: 1; transform: none; transition: none; will-change: auto; } } /* ---------------------------------------------------------- 18. PAGE HERO BANNER (used on inner pages) ---------------------------------------------------------- */ .page-hero { padding: var(--space-xxl) 0 var(--space-xl); border-bottom: var(--border); margin-bottom: var(--space-xxl); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; bottom: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle at bottom right, rgba(201, 168, 76, 0.06), transparent 70%); pointer-events: none; } .page-hero .label { margin-bottom: var(--space-md); } .page-hero h1 { margin-bottom: var(--space-md); } .page-hero p { font-size: 1.05rem; } /* ---------------------------------------------------------- 19. SCROLL PROGRESS BAR ---------------------------------------------------------- */ #progress-bar { position: fixed; top: var(--nav-height); left: 0; height: 2px; width: 0%; background: var(--color-accent); z-index: 999; transition: width 0.1s linear; } /* ---------------------------------------------------------- 20. RESPONSIVE — TABLET (max 900px) ---------------------------------------------------------- */ @media (max-width: 900px) { .hero-number { display: none; } .projects-grid { grid-template-columns: 1fr 1fr; } } /* ---------------------------------------------------------- 21. RESPONSIVE — MOBILE (max 640px) ---------------------------------------------------------- */ @media (max-width: 640px) { :root { --space-xxl: 4rem; --space-xl: 2.5rem; } /* Mobile nav — links hidden until toggled */ .nav-links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--color-bg); border-bottom: var(--border); flex-direction: column; padding: var(--space-lg); gap: var(--space-lg); align-items: flex-start; } .nav-links.open { display: flex; } .nav-toggle { display: flex; } .projects-grid, .skills-grid, .contact-grid { grid-template-columns: 1fr; } .hero-buttons { flex-direction: column; align-items: flex-start; } .timeline { padding-left: 24px; } .timeline-item::before { left: -20px; } .footer .container { flex-direction: column; text-align: center; } }