/* ========================================================= Joshua Visperas — Portfolio style.css (shared across index + case study pages) ========================================================= */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ── Tokens ─────────────────────────────────────────────── */ :root { --bg: #F7F5F1; --surface: #FFFFFF; --black: #111111; --gray-100: #EFECE8; --gray-200: #E2DED9; --gray-400: #A09C97; --gray-600: #6B6866; --gray-800: #2A2927; --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --nav-h: 72px; --max-w: 1160px; --gap-xl: 8rem; --gap-lg: 5rem; --gap-md: 2.5rem; --r-sm: 4px; --r-md: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 240ms; } /* ── Base ───────────────────────────────────────────────── */ body { font-family: var(--font-body); background: var(--bg); color: var(--black); font-size: 1rem; line-height: 1.6; } /* ── Upwork mode — applied to before first paint ── */ html.upwork-mode .contact-only { display: none !important; } html.upwork-mode .upwork-badge { display: flex !important; } /* ── Container ──────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } /* ── Labels & headings ──────────────────────────────────── */ .section-label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-400); margin-bottom: 1rem; } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; } .section-header { margin-bottom: 3.5rem; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; border-radius: var(--r-sm); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); white-space: nowrap; } .btn-primary { background: var(--black); color: var(--surface); } .btn-primary:hover { background: var(--gray-800); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .btn-ghost { background: transparent; color: var(--black); border: 1px solid var(--gray-200); } .btn-ghost:hover { border-color: var(--black); transform: translateY(-2px); } .btn-full { width: 100%; justify-content: center; } /* ── Navigation ─────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; background: rgba(247, 245, 241, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); } .nav.scrolled { border-bottom-color: var(--gray-200); } .nav-logo { position: relative; display: inline-block; line-height: 1; z-index: 10; } .logo-word { display: block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--black); white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 2.25rem; list-style: none; } .nav-links a { font-size: 0.875rem; color: var(--gray-600); transition: color var(--dur) var(--ease); } .nav-links a:hover, .nav-links a.active { color: var(--black); } .nav-cta { color: var(--black) !important; font-weight: 500 !important; position: relative; padding-bottom: 2px; } .nav-cta::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: currentColor; } /* Mobile hamburger */ .nav-toggle { display: none; flex-direction: column; gap: 5px; width: 24px; padding: 4px 0; z-index: 10; } .nav-toggle span { display: block; height: 1.5px; background: var(--black); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); transform-origin: center; } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile drawer */ .nav-drawer { display: none; position: fixed; inset: var(--nav-h) 0 0 0; background: rgba(247, 245, 241, 0.96); backdrop-filter: blur(16px); z-index: 190; padding: 2rem; flex-direction: column; gap: 1.75rem; font-size: 1.5rem; font-family: var(--font-display); opacity: 0; transform: translateY(-8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; } .nav-drawer.open { opacity: 1; transform: translateY(0); pointer-events: all; } .nav-drawer a { color: var(--black); transition: color var(--dur) var(--ease); } .nav-drawer a:hover { color: var(--gray-600); } /* ── Sections ───────────────────────────────────────────── */ .section { padding: var(--gap-xl) 0; } .section-alt { background: var(--gray-100); } /* ── Real images inside card containers ─────────────────── */ .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms var(--ease); } .case-study-card:hover .card-image img { transform: scale(1.04); } /* ── Scroll animations ──────────────────────────────────── */ [data-anim] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } [data-anim].visible { opacity: 1; transform: translateY(0); } [data-anim][data-delay="1"] { transition-delay: 100ms; } [data-anim][data-delay="2"] { transition-delay: 200ms; } [data-anim][data-delay="3"] { transition-delay: 300ms; } [data-anim][data-delay="4"] { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; transition: none; } .btn { transition: none; } } /* ── Hero ───────────────────────────────────────────────── */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 5rem) 2rem 5rem; max-width: var(--max-w); margin: 0 auto; position: relative; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-600); margin-bottom: 2rem; } .hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gray-400); } .hero-headline { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 400; line-height: 1.03; letter-spacing: -0.025em; margin-bottom: 1.75rem; max-width: 840px; } .hero-headline em { font-style: italic; color: var(--gray-600); } .hero-sub { font-size: 1.125rem; color: var(--gray-600); line-height: 1.75; max-width: 520px; margin-bottom: 2.75rem; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-scroll { position: absolute; bottom: 3rem; left: 2rem; display: flex; align-items: center; gap: 1rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-400); } .scroll-line { width: 40px; height: 1px; background: var(--gray-400); animation: scrollPulse 2.4s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { width: 40px; opacity: 1; } 50% { width: 56px; opacity: 0.5; } } /* ── Work Grid ──────────────────────────────────────────── */ /* TO ADD A NEW CASE STUDY: 1. Duplicate one of the
blocks below 2. Update the href, tag, year, title, description, and --hue value 3. Create a new case-study-N.html from case-study-template.html That's it — no config files to update. */ .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr)); gap: 3px; } .case-study-card { background: var(--surface); overflow: hidden; transition: transform 360ms var(--ease), box-shadow 360ms var(--ease); } .case-study-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(0,0,0,0.09); } .card-link { display: block; } .card-image { aspect-ratio: 16/10; overflow: hidden; } .card-image-placeholder { width: 100%; height: 100%; background: linear-gradient( 140deg, hsl(var(--hue, 210), 20%, 90%) 0%, hsl(calc(var(--hue, 210) + 15), 14%, 82%) 100% ); display: flex; align-items: center; justify-content: center; transition: transform 480ms var(--ease); } .card-image-placeholder .placeholder-label { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: hsl(var(--hue, 210), 10%, 60%); } .case-study-card:hover .card-image-placeholder { transform: scale(1.04); } .card-body { padding: 2rem 2rem 2.25rem; } .card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; } .card-tag { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); } .card-year { font-size: 0.75rem; color: var(--gray-400); } .card-title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 400; line-height: 1.2; margin-bottom: 0.75rem; } .card-desc { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.7; margin-bottom: 1.5rem; } .card-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; transition: gap var(--dur) var(--ease); } .case-study-card:hover .card-arrow { gap: 0.875rem; } /* ── About ──────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 7rem; align-items: start; } .about-bio { font-size: 1.0625rem; color: var(--gray-800); line-height: 1.8; margin-bottom: 1.25rem; } .about-bio + .skills { margin-top: 0.75rem; } .skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; } .skill-tag { padding: 0.375rem 0.875rem; background: var(--gray-200); border-radius: 100px; font-size: 0.8125rem; color: var(--gray-800); } /* ── Process ────────────────────────────────────────────── */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .process-step { background: var(--surface); padding: 2.5rem 2rem 2.75rem; } .step-num { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; color: var(--gray-400); margin-bottom: 2rem; } .step-title { font-family: var(--font-display); font-size: 1.3125rem; font-weight: 400; margin-bottom: 0.875rem; } .step-desc { font-size: 0.9375rem; color: var(--gray-600); line-height: 1.7; } /* ── Contact ────────────────────────────────────────────── */ .contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 7rem; align-items: start; } .contact-sub { font-size: 1.0625rem; color: var(--gray-600); line-height: 1.75; margin-top: 1.75rem; } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.8125rem; font-weight: 500; color: var(--gray-800); letter-spacing: 0.02em; } .form-group input, .form-group select, .form-group textarea { font-family: var(--font-body); font-size: 0.9375rem; color: var(--black); background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--r-sm); padding: 0.8125rem 1rem; width: 100%; outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); -webkit-appearance: none; appearance: none; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--black); box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06); } .form-group textarea { resize: vertical; min-height: 130px; } .form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A09C97' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; cursor: pointer; } .form-group select option[value=''] { color: var(--gray-400); } .form-success { display: none; text-align: center; padding: 2.5rem; background: var(--gray-100); border-radius: var(--r-md); } .form-success.visible { display: block; } .form-success h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.75rem; } .form-success p { color: var(--gray-600); } /* ── Upwork badge ───────────────────────────────────────── */ .upwork-badge { display: none; align-items: center; gap: 0.5rem; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; background: var(--surface); border: 1px solid var(--gray-200); border-radius: 100px; padding: 0.5rem 1rem; font-size: 0.75rem; color: var(--gray-600); box-shadow: 0 4px 16px rgba(0,0,0,0.07); pointer-events: none; } .upwork-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6FDA44; flex-shrink: 0; } /* ── Footer ─────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--gray-200); padding: 2.25rem 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .footer-name { font-family: var(--font-display); font-size: 1rem; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { font-size: 0.875rem; color: var(--gray-600); transition: color var(--dur) var(--ease); } .footer-links a:hover { color: var(--black); } .footer-copy { font-size: 0.8125rem; color: var(--gray-400); } /* ── Responsive ─────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --gap-xl: 6rem; } .process-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { gap: 4rem; } .contact-grid { gap: 4rem; } } @media (max-width: 768px) { :root { --gap-xl: 5rem; } .nav-links, .nav-links .contact-only { display: none; } .nav-toggle { display: flex; } .nav-drawer { display: flex; } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-grid { grid-template-columns: 1fr; gap: 3rem; } .form-row { grid-template-columns: 1fr; } .hero { padding: calc(var(--nav-h) + 3rem) 1.5rem 4rem; } .container { padding: 0 1.5rem; } .nav { padding: 0 1.5rem; } } @media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } .hero-scroll { display: none; } .footer-inner { flex-direction: column; text-align: center; gap: 0.75rem; } }