/* ============================================ Victoria Fine Portfolio — Pixel Perfect CSS Based on Figma Design System (July 2026) Exact values from Figma API analysis ============================================ */ /* Google Fonts are loaded via in , not @import here — @import inside CSS is render-blocking and forces a sequential fetch chain (HTML -> CSS -> @import discovery -> fonts CSS -> font files) instead of letting the browser fetch style.css and the fonts in parallel. */ /* ---- CSS Variables (from Figma Design System) ---- */ :root { --bg-light: #FFFFFF; --bg-dark: #F5F5F5; --text-primary: #1A1A1A; --text-secondary: #666666; --border-color: #E0E0E0; --accent: #000000; --accent-hover: #333333; --section-dark: #1A1A1A; --whatsapp: #25D366; --font-serif: 'Libre Baskerville', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Figma: max content 1200px, padding 82px each side */ --content-width: 1200px; --page-padding: 82px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; height: 100%; } body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--text-primary); background: var(--bg-light); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; display: flex; flex-direction: column; } body > .footer { margin-top: auto; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ---- Container ---- */ .container { max-width: calc(var(--content-width) + var(--page-padding) * 2); margin: 0 auto; padding: 0 var(--page-padding); } /* ============================================ NAVBAR Figma: 1440x77, pad: 20/82/20/82 Logo: Libre Baskerville Bold 20/25 Menu gap: 40px, CTA: 130x38, pad: 10/24/10/24, r:6 ============================================ */ .navbar { position: sticky; top: 0; z-index: 201; background: var(--bg-light); border-bottom: 1px solid var(--border-color); height: 77px; } .navbar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; padding-top: 20px; padding-bottom: 20px; } .navbar-logo { font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 25px; color: var(--accent); text-decoration: none; } .navbar-menu { display: none; align-items: center; gap: 40px; list-style: none; } .navbar-menu li a { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 400; color: var(--text-secondary); text-decoration: none; transition: color 0.15s; } .navbar-menu li a:hover, .navbar-menu li a.active { color: var(--text-primary); } /* CTA Button in nav */ .btn-nav { display: none; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 18px; padding: 10px 24px; height: 38px; border-radius: 6px; background: var(--accent); color: #FFFFFF; border: none; cursor: pointer; transition: background 0.15s; text-decoration: none; white-space: nowrap; } .btn-nav:hover { background: var(--accent-hover); text-decoration: none; } /* ============================================ BUTTONS Primary: black, 46px height, pad: 14/32, r:6 Secondary: border, same size ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 18px; padding: 14px 32px; height: 46px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--accent); color: #FFFFFF; border: 1.5px solid var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; } .btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-color); } .btn-secondary:hover { border-color: var(--text-primary); text-decoration: none; } .btn-outline-dark { background: transparent; color: var(--text-primary); border: 1.5px solid var(--text-primary); } .btn-outline-dark:hover { background: var(--text-primary); color: #fff; text-decoration: none; } .btn-white { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255,255,255,0.35); } .btn-white:hover { border-color: #FFFFFF; text-decoration: none; } .btn-white-filled { background: #FFFFFF; color: var(--text-primary); border: 1.5px solid #FFFFFF; } .btn-white-filled:hover { background: #f0f0f0; text-decoration: none; } /* ============================================ HERO SECTION Figma: 1440x505, pad: 100/82/80/82 Content: 938px wide, gap: 20px H1: Libre Baskerville Bold 56/67 Subtitle: DM Sans 400 20/32 #666 Buttons row: gap 16px Lang note: DM Sans 600 14/20 #666 ============================================ */ .hero { padding: 100px var(--page-padding) 80px; text-align: center; } .hero-content { max-width: 938px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; align-items: center; } .hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 67px; color: var(--text-primary); text-align: center; } .hero-subtitle { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 32px; color: var(--text-secondary); text-align: center; max-width: 760px; } .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } .hero-buttons { display: flex; align-items: center; gap: 16px; } .hero-lang-note { font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-secondary); } /* ============================================ ABOUT / HEY SECTION Figma: 1440x648, pad: 80/120/80/120 Inner: HORIZONTAL layout, gap: 64px about-content: 506px wide, VERTICAL, gap: 40px Hey! H2: Libre Baskerville Bold 56/64 Body: VERTICAL gap: 24px Body text: DM Sans 400 16/28 ============================================ */ .about-section { padding: 80px 120px; } .about-inner { max-width: var(--content-width); margin: 0 auto; display: flex; align-items: flex-start; gap: 64px; } .about-content { width: 506px; flex-shrink: 0; display: flex; flex-direction: column; gap: 40px; } .about-content h2 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 64px; color: var(--text-primary); } .about-body { display: flex; flex-direction: column; gap: 24px; } .about-body p { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 28px; color: var(--text-primary); } .about-illustration { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 400px; } .about-illustration img { width: 100%; max-width: 694px; height: 480px; object-fit: contain; } /* ============================================ CORE EXPERTISE SECTION (DARK) Figma: 1440x860, bg:#1a1a1a, pad: 96/120/96/120 Header: VERTICAL, gap: 16px Title: Libre Baskerville Bold 56/64 #fff Subtitle: DM Sans 400 18/30 #fff Divider: 1px rgba(255,255,255,0.12) Cards: HORIZONTAL, gap: 32px Card: 379x445, VERTICAL, gap: 20px, pad: 32/32/32/32, r:12 ============================================ */ .expertise-section { background: var(--section-dark); padding: 96px 120px; } .expertise-inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; } .expertise-header { display: flex; flex-direction: column; gap: 16px; } .expertise-header h2 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 64px; color: #FFFFFF; } .expertise-header .section-subtitle { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(255,255,255,0.7); } .expertise-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 0; } .expertise-cards { display: flex; gap: 32px; } .expertise-card { flex: 1; background: #FFFFFF; border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px; min-height: 445px; } .card-top { display: flex; align-items: flex-start; gap: 16px; } .card-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .card-icon img { width: 40px; height: 40px; } .card-title-block { display: flex; flex-direction: column; gap: 4px; } .card-title-block h3 { font-family: var(--font-serif); font-weight: 700; font-size: 22px; line-height: 28px; color: #1A1A1A; } .card-subtitle-text { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: #666666; } .card-description { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 28px; color: #1A1A1A; flex: 1; } .card-tools { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid #E5E5E5; margin-top: auto; } .card-tools-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #999999; } .card-tools-list { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: #1A1A1A; } /* ============================================ MY PROJECTS SECTION Figma: 1440x1093, pad: 96/120/96/120, gap: 56 Header: VERTICAL, gap: 16 Title: Libre Baskerville Bold 56/64 Subtitle: DM Sans 400 18/30 #666 Divider: 1px #1a1a1a Projects list: VERTICAL, gap: 32 Row: 1200x120, HORIZONTAL, gap: 16, pad: 12/0/12/0 CTA btn: black, 179x46, pad: 14/32, r:6 ============================================ */ .projects-section { padding: 96px 120px; } .projects-inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; } .section-header { display: flex; flex-direction: column; gap: 16px; } .section-header h2 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 64px; color: var(--text-primary); } .section-header .section-subtitle { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 30px; color: var(--text-secondary); } .section-divider { height: 1px; background: var(--text-primary); } .projects-list { display: flex; flex-direction: column; gap: 32px; } .project-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; padding: 12px 0; border-bottom: 1px solid #1A1A1A; opacity: 0.92; text-decoration: none; transition: opacity 0.15s; min-height: 120px; } .project-row:first-child { border-top: none; } .project-row:last-child { border-bottom: none; } .project-row:hover { opacity: 0.65; text-decoration: none; } .project-row-left { flex: 1; display: flex; flex-direction: column; gap: 8px; } .project-row-left h3 { font-family: var(--font-serif); font-weight: 700; font-size: 28px; line-height: 34px; color: var(--text-primary); } .project-desc { font-family: var(--font-sans); font-size: 16px; line-height: 28px; color: var(--text-secondary); } .project-row-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0; } .tech-tag { background: #E0E0E0; color: var(--text-secondary); font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 100px; white-space: nowrap; } .project-location { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; line-height: 18px; color: var(--text-secondary); } .project-location svg { width: 14px; height: 14px; flex-shrink: 0; } .project-row-right { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; display: flex; align-items: flex-end; align-self: stretch; flex-shrink: 0; } .project-row-right-inner { display: flex; align-items: center; gap: 8px; padding: 6px 4px; } .row-arrow-wrap { position: relative; width: 30px; height: 18px; flex-shrink: 0; } .row-arrow { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.25s ease; } .row-arrow-default { opacity: 1; } .row-arrow-hover { opacity: 0; } .project-row:hover .row-arrow-default { opacity: 0; } .project-row:hover .row-arrow-hover { opacity: 1; } .projects-cta { display: flex; justify-content: flex-end; } /* ============================================ RESUME BANNER (DARK) Figma: 1440x412, bg:#1a1a1a, pad: 96/120/96/120, gap: 32 Content: 800px wide, VERTICAL, gap: 16 Heading: Libre Baskerville Bold 40/48 #fff Subtitle: DM Sans 400 18/30 #fff CTA row: HORIZONTAL, gap: 16 ============================================ */ .resume-banner { background: var(--section-dark); padding: 96px 120px; } .resume-banner-inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; } .resume-banner h2 { font-family: var(--font-serif); font-weight: 700; font-size: 40px; line-height: 48px; color: #FFFFFF; max-width: 800px; } .resume-banner p { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(255,255,255,0.7); max-width: 600px; } .resume-banner-cta { display: flex; align-items: center; gap: 16px; } /* ============================================ FOOTER Figma: 1440x154, pad: 60/82/60/82, gap: 32 Links: HORIZONTAL, gap: 32 Link text: DM Sans 400 14/18 #1a1a1a, underlined Credit: DM Sans 400 14/18 #666 ============================================ */ .footer { padding: 60px 82px; border-top: 1px solid var(--border-color); } .footer .container { display: flex; flex-direction: column; align-items: center; gap: 32px; } /* New icon-based footer */ .footer-icons { display: flex; align-items: center; gap: 40px; } .footer-icons a { display: flex; align-items: center; justify-content: center; transition: opacity 0.15s, transform 0.15s; text-decoration: none; } .footer-icons a:hover { opacity: 0.75; transform: translateY(-2px); text-decoration: none; } .footer-icons img { width: 40px; height: 40px; display: block; } /* Legacy text links (kept for fallback) */ .footer-links { display: flex; align-items: center; gap: 32px; list-style: none; } .footer-links a { font-family: var(--font-sans); font-size: 14px; line-height: 18px; font-weight: 400; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; } .footer-links a:hover { color: var(--text-secondary); } .footer-credit { font-family: var(--font-sans); font-size: 14px; line-height: 18px; color: var(--text-secondary); } /* ============================================ CV PAGE ============================================ */ .cv-hero { padding: 64px var(--page-padding) 48px; } .cv-hero-row { max-width: var(--content-width); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; } .cv-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 67px; color: var(--text-primary); margin-bottom: 8px; } .cv-subtitle { font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--text-secondary); } .cv-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .cv-section { padding: 0 var(--page-padding) 48px; } .cv-section-inner { max-width: var(--content-width); margin: 0 auto; border-top: 1px solid var(--border-color); padding-top: 48px; } .cv-section h2 { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 44px; color: var(--text-primary); margin-bottom: 32px; } .summary-text { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--text-primary); max-width: 760px; } /* Experience */ .experience-list { display: flex; flex-direction: column; } .experience-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--border-color); } .experience-row:first-child { border-top: 1px solid var(--border-color); } .experience-row:last-child { border-bottom: none; } .experience-row:last-child { border-bottom: none; } .exp-meta { padding-top: 4px; } .exp-dates { font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 24px; color: var(--text-primary); margin-bottom: 4px; } .exp-company { font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 28px; color: var(--text-secondary); } .exp-location { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); } .exp-location svg { flex-shrink: 0; color: var(--text-secondary); } .exp-content { display: flex; flex-direction: column; gap: 12px; } .exp-role { font-family: var(--font-serif); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--text-primary); margin: 0; } .exp-desc { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--text-secondary); margin: 0; } /* Learn more — accordion button */ .exp-learn-more { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-primary); text-decoration: none; transition: opacity 0.15s; align-self: flex-start; } .exp-learn-more:hover { opacity: 0.65; } .exp-arrow { display: inline-block; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); font-style: normal; } /* Accordion content */ .exp-accordion { overflow: hidden; animation: accordionOpen 0.3s ease forwards; } @keyframes accordionOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .exp-results { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; } .exp-results li { font-family: var(--font-sans); font-size: 15px; line-height: 24px; color: var(--text-secondary); padding-left: 16px; position: relative; } .exp-results li::before { content: '—'; position: absolute; left: 0; color: var(--text-secondary); } .exp-case-link { display: inline-block; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; transition: opacity 0.15s; } .exp-case-link:hover { opacity: 0.65; } .exp-related-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-primary); margin: 0; } .exp-pills { display: flex; flex-wrap: wrap; gap: 8px; } .exp-pill { display: inline-flex; align-items: center; padding: 6px 16px; background: #1f1f1f; color: #ffffff; font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 20px; border-radius: 100px; text-decoration: none; transition: background 0.15s, opacity 0.15s; white-space: nowrap; } .exp-pill:hover { background: #333333; text-decoration: none; } /* Skills Grid */ .skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .skill-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; } .skill-card-title { font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 18px; color: var(--text-primary); margin-bottom: 12px; } .skill-list { list-style: none; display: flex; flex-direction: column; gap: 6px; } .skill-list li { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--text-secondary); padding-left: 14px; position: relative; } .skill-list li::before { content: "•"; position: absolute; left: 0; color: var(--text-secondary); } /* AI Platforms */ .ai-section { padding: 0 var(--page-padding) 48px; } .ai-section-inner { max-width: var(--content-width); margin: 0 auto; border-top: 1px solid var(--border-color); padding-top: 48px; } .ai-section h2 { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 44px; margin-bottom: 8px; } .ai-subtitle { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); margin-bottom: 32px; } .ai-logos { display: flex; gap: 32px; align-items: flex-start; } .ai-logo-item { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ai-logo-box { width: 64px; height: 64px; background: #000; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .ai-logo-box img { width: 100%; height: 100%; object-fit: cover; } /* New: direct icon images from Figma (96x96 with rounded corners built-in) */ .ai-logo-img { width: 96px; height: 96px; display: block; border-radius: 22px; object-fit: cover; } .ai-logo-name { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); } /* Education & Languages */ .edu-lang-section { padding: 0 var(--page-padding) 48px; } .edu-lang-inner { max-width: var(--content-width); margin: 0 auto; border-top: 1px solid var(--border-color); padding-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .edu-lang-inner h2 { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 44px; margin-bottom: 24px; } .edu-dates { font-size: 14px; color: var(--text-secondary); margin-bottom: 4px; } .edu-degree { font-family: var(--font-serif); font-weight: 700; font-size: 16px; line-height: 24px; margin-bottom: 4px; } .edu-institution { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .edu-details { font-size: 14px; color: var(--text-secondary); line-height: 22px; } .cert-list { display: flex; flex-direction: column; gap: 10px; } .cert-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .cert-name { font-family: var(--font-serif); font-weight: 700; font-size: 15px; line-height: 22px; } .cert-meta { font-size: 13px; color: var(--text-secondary); white-space: nowrap; } @media (max-width: 768px) { .cert-row { flex-direction: column; align-items: flex-start; gap: 2px; } } .lang-list { display: flex; flex-direction: column; } .lang-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-color); } .lang-row:last-child { border-bottom: none; } .lang-name { font-size: 16px; font-weight: 500; } .lang-level { font-size: 14px; color: var(--text-secondary); } /* ============================================ PROJECTS PAGE ============================================ */ .projects-page-hero { padding: 64px var(--page-padding) 0; } .projects-page-hero-inner { max-width: var(--content-width); margin: 0 auto; } .projects-page-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 67px; margin-bottom: 12px; } .page-subtitle { font-family: var(--font-sans); font-size: 20px; line-height: 32px; color: var(--text-secondary); } .projects-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .projects-hero-row h1 { margin-bottom: 0; } .projects-hero-row .projects-filter-wrapper { margin-top: 0; } @media (max-width: 768px) { .projects-hero-row { flex-direction: column; align-items: flex-start; gap: 20px; } .projects-hero-row .projects-filter-wrapper { width: 100%; margin-top: 0; } } /* ============================================ PROJECT DETAIL PAGE ============================================ */ .project-detail-hero { padding: 32px var(--page-padding) 0; } .project-detail-inner { max-width: var(--content-width); margin: 0 auto; } .breadcrumb { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--text-primary); } .project-detail-hero h1 { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 1.1; margin-bottom: 20px; } .project-pitch { font-family: var(--font-sans); font-size: 20px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 32px; max-width: 820px; } .project-tech-label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin: 32px 0 16px; } .project-tech-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; } .project-tech-tag { background: #f3f4f6; color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 100px; } .project-challenge-overview { display: flex; gap: 80px; padding: 48px var(--page-padding); border-top: 1px solid var(--border-color); max-width: calc(var(--content-width) + var(--page-padding) * 2); margin: 0 auto; } .project-challenge-overview .project-block { flex: 1; min-width: 0; } .project-challenge-overview h2 { font-family: var(--font-serif); font-weight: 700; font-size: 32px; margin-bottom: 20px; color: var(--text-primary); } .project-challenge-overview p { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-secondary); } .project-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 48px; } .meta-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 6px; } .meta-value { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-primary); } .project-cover { width: 100%; height: 480px; object-fit: cover; border-radius: 8px; background: var(--bg-dark); margin-bottom: 64px; } .project-overview-section { padding: 0 var(--page-padding) 64px; } .project-overview-inner { max-width: var(--content-width); margin: 0 auto; } .project-overview-inner h2 { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 44px; margin-bottom: 40px; } .overview-text-block { margin-bottom: 40px; } .overview-text-block h3 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 8px; } .overview-text-block p { font-size: 15px; line-height: 24px; color: var(--text-secondary); } .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .overview-item { display: flex; flex-direction: column; gap: 16px; } .overview-img { width: 100%; height: 240px; background: var(--bg-dark); border-radius: 6px; object-fit: cover; } .overview-item h3 { font-family: var(--font-serif); font-size: 18px; line-height: 26px; } .overview-item p { font-size: 15px; line-height: 24px; color: var(--text-secondary); } /* Deliverables */ .deliverables-section { padding: 0 var(--page-padding) 64px; } .deliverables-inner { max-width: var(--content-width); margin: 0 auto; border-top: 1px solid var(--border-color); padding-top: 64px; } .deliverables-inner h2 { font-family: var(--font-serif); font-size: 36px; line-height: 44px; margin-bottom: 8px; } .deliverables-subtitle { font-size: 15px; color: var(--text-secondary); margin-bottom: 40px; } .deliverables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .deliverable-card { border: 1px solid var(--border-color); border-radius: 8px; padding: 24px; } .deliverable-icon { width: 36px; height: 36px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: white; font-size: 16px; } .deliverable-card h3 { font-family: var(--font-serif); font-size: 18px; line-height: 26px; margin-bottom: 8px; } .deliverable-card p { font-size: 14px; line-height: 22px; color: var(--text-secondary); } /* Outcomes */ .outcomes-section { background: var(--section-dark); padding: 80px var(--page-padding); text-align: center; } .outcomes-inner { max-width: var(--content-width); margin: 0 auto; } .outcomes-inner h2 { font-family: var(--font-serif); font-size: 40px; line-height: 48px; color: #fff; margin-bottom: 8px; } .outcomes-subtitle { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 48px; } .outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .outcome-stat { font-family: var(--font-serif); font-weight: 700; font-size: 56px; line-height: 64px; color: #FFFFFF; margin-bottom: 8px; } .outcome-label { font-size: 14px; color: rgba(255,255,255,0.6); } /* Next Project */ .next-project { padding: 64px var(--page-padding); text-align: center; border-top: 1px solid var(--border-color); } .next-project-inner { max-width: var(--content-width); margin: 0 auto; } .next-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 16px; } .next-project h2 { font-family: var(--font-serif); font-size: 36px; margin-bottom: 8px; } .next-project p { font-size: 15px; color: var(--text-secondary); margin-bottom: 32px; } /* ============================================ CONTACT PAGE ============================================ */ .contact-page { padding: 80px var(--page-padding); } .contact-inner { max-width: var(--content-width); margin: 0 auto; } .contact-page h1 { font-family: var(--font-serif); font-size: 56px; line-height: 67px; margin-bottom: 16px; } .contact-subtitle { font-size: 20px; line-height: 32px; color: var(--text-secondary); margin-bottom: 64px; max-width: 560px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .contact-links { display: flex; flex-direction: column; gap: 12px; } .contact-link-item { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border-color); border-radius: 8px; text-decoration: none; transition: border-color 0.15s; } .contact-link-item:hover { border-color: var(--text-primary); text-decoration: none; } .contact-link-icon { font-size: 18px; } .contact-link-label { font-size: 15px; font-weight: 500; } /* Form */ .contact-form { display: flex; flex-direction: column; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .form-input, .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 6px; font-family: var(--font-sans); font-size: 15px; line-height: 22px; color: var(--text-primary); background: var(--bg-light); outline: none; transition: border-color 0.15s; } .form-input:focus, .form-textarea:focus { border-color: var(--text-primary); } .form-textarea { resize: vertical; min-height: 140px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1200px) { :root { --page-padding: 48px; } .about-section { padding: 80px 48px; } .expertise-section { padding: 80px 48px; } .projects-section { padding: 80px 48px; } .resume-banner { padding: 80px 48px; } .footer { padding: 48px 48px; } } @media (max-width: 1024px) { .expertise-cards { flex-direction: column; } .expertise-card { min-height: auto; } .skills-grid { grid-template-columns: repeat(2, 1fr); } .project-meta { grid-template-columns: repeat(2, 1fr); } .overview-grid { grid-template-columns: 1fr; } .deliverables-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --page-padding: 24px; } .about-section { padding: 60px 24px; } .expertise-section { padding: 60px 24px; } .projects-section { padding: 60px 24px; } .resume-banner { padding: 60px 24px; } .footer { padding: 40px 24px; } h1, .hero h1, .cv-hero h1, .project-detail-hero h1 { font-size: 36px; line-height: 44px; } .expertise-header h2, .section-header h2 { font-size: 36px; line-height: 44px; } .about-content h2 { font-size: 40px; line-height: 48px; } .about-inner { flex-direction: column; } .about-content { width: 100%; } .about-illustration { display: none; } .experience-row { grid-template-columns: 1fr; gap: 8px; } .edu-lang-inner { grid-template-columns: 1fr; gap: 40px; } .contact-grid { grid-template-columns: 1fr; } .deliverables-grid { grid-template-columns: 1fr; } .outcomes-grid { grid-template-columns: 1fr; } .project-meta { grid-template-columns: 1fr 1fr; } .skills-grid { grid-template-columns: 1fr 1fr; } .navbar-menu { display: none; } /* Project list rows: stack right block below left on mobile */ .project-row { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 20px 0; } .project-row-left { gap: 8px; } .project-row-left h3 { font-size: 22px; line-height: 28px; } .project-desc { font-size: 14px; line-height: 21px; } .project-row-tools { gap: 8px; } .tech-tag { font-size: 13px; padding: 6px 12px; } .project-row-right { align-self: auto; align-items: center; justify-content: flex-end; width: 100%; } /* No hover on touch — show the elongated arrow state by default */ .row-arrow-default { opacity: 0; } .row-arrow-hover { opacity: 1; } } @media (max-width: 600px) { .hero-buttons { flex-direction: column; width: 100%; } .hero-buttons .btn { width: 100%; justify-content: center; } } /* ============================================ PROJECT DETAIL PAGES (FullFlat series) ============================================ */ /* Meta labels for project pages */ .project-meta-label { font-family: var(--font-sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 6px; } .project-meta-value { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-primary); } /* Cover image */ .project-cover { padding: 0 var(--page-padding) 64px; } .project-cover-img { width: 100%; max-height: 560px; object-fit: cover; border-radius: 8px; background: var(--bg-dark); } /* Project sections */ .project-section { padding: 0 var(--page-padding) 64px; } .project-section > .project-detail-inner { border-top: 1px solid var(--border-color); padding-top: 64px; } .project-section--alt { background: var(--bg-dark); } .project-section-title { font-family: var(--font-serif); font-weight: 700; font-size: 32px; line-height: 40px; margin-top: 48px; margin-bottom: 24px; color: var(--text-primary); } .project-section-title:first-child { margin-top: 0; } .project-section-text { font-family: var(--font-sans); font-size: 16px; line-height: 28px; color: var(--text-secondary); margin-bottom: 16px; max-width: 760px; } /* Project image grids */ .project-images-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; } .project-images-grid--single { grid-template-columns: 1fr; } .project-img { width: 100%; border-radius: 8px; border: 1px solid var(--border-color); background: #fff; margin: 24px 0; } /* Outcomes section */ .project-outcomes { background: var(--section-dark); color: #fff; padding: 80px var(--page-padding); } .project-outcomes-title { font-family: var(--font-serif); font-weight: 700; font-size: 36px; line-height: 44px; color: #fff; text-align: center; margin-bottom: 12px; } .project-outcomes-subtitle { font-family: var(--font-sans); font-size: 15px; color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 48px; } .project-outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.15); } .project-outcome-item { text-align: center; } .project-outcome-metric { font-family: var(--font-serif); font-size: 48px; font-weight: 700; color: #fff; margin-bottom: 8px; line-height: 1; } .project-outcome-label { font-family: var(--font-sans); font-size: 14px; line-height: 22px; color: rgba(255,255,255,0.6); } .project-outcomes-list { list-style: none; padding: 0; margin: 0; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .project-outcomes-list li { font-family: var(--font-sans); font-size: 15px; line-height: 24px; color: rgba(255,255,255,0.75); padding-left: 20px; position: relative; } .project-outcomes-list li::before { content: '→'; position: absolute; left: 0; color: rgba(255,255,255,0.4); } /* Results section (blog-style case study) */ .project-results { background: #111; color: #fff; padding: 100px var(--page-padding); } .project-results-inner { max-width: var(--content-width); margin: 0 auto; } .project-results-title { font-family: var(--font-serif); font-weight: 700; font-size: 40px; color: #fff; margin-bottom: 48px; } .project-results-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .project-results-metric { background: #1a1a1a; border-radius: 8px; padding: 40px; } .project-results-metric-value { font-family: var(--font-serif); font-weight: 700; font-size: 48px; color: #fff; line-height: 1; margin-bottom: 12px; } .project-results-metric-label { font-family: var(--font-sans); font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #9ca3af; } .project-results-bullets { display: flex; flex-direction: column; gap: 24px; } .project-results-bullets li { list-style: none; display: flex; align-items: flex-start; gap: 16px; font-family: var(--font-sans); font-size: 18px; line-height: 1.4; color: #fff; } .project-results-bullets li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; flex-shrink: 0; margin-top: 8px; } @media (max-width: 768px) { .project-results-metrics { grid-template-columns: 1fr; } .project-challenge-overview { flex-direction: column; gap: 32px; } } /* Next project section (nav-row style) */ .project-nav-section { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 60px var(--page-padding); } .project-nav-row { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-width); margin: 0 auto; } .project-nav-link { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--text-primary); text-decoration: none; white-space: nowrap; } .project-nav-link svg { flex-shrink: 0; } .project-nav-cta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 64px; text-align: center; text-decoration: none; } .project-nav-cta-label { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-secondary); } .project-nav-cta-title { font-family: var(--font-serif); font-weight: 700; font-size: 48px; line-height: 1.1; color: var(--text-primary); } .project-nav-cta-desc { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 680px; } .project-nav-cta-view { flex: 1; text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--text-primary); text-decoration: none; } @media (max-width: 768px) { .project-nav-section { padding: 24px var(--page-padding); } .project-nav-row { flex-wrap: nowrap; justify-content: space-between; gap: 12px; } .project-nav-link-text { display: none; } .project-nav-cta-view { flex: 1; font-size: 15px; white-space: nowrap; } .project-nav-cta { padding: 0; } .project-nav-cta-title { font-size: 32px; } } /* Next project section */ .project-next { padding: 80px var(--page-padding); text-align: center; border-top: 1px solid var(--border-color); } .project-next-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 12px; } .project-next-title { font-family: var(--font-serif); font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; } .project-next-desc { font-family: var(--font-sans); font-size: 16px; line-height: 26px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; } /* Responsive */ @media (max-width: 768px) { .project-images-grid { grid-template-columns: 1fr; } .project-outcomes-grid { grid-template-columns: 1fr; gap: 24px; } .project-section-title { font-size: 24px; line-height: 32px; } .project-outcome-metric { font-size: 36px; } .project-outcomes-title { font-size: 28px; } .project-next-title { font-size: 28px; } } /* Doodle burger icon */ .burger-icon-img { width: 34px; height: 24px; display: block; } /* ============================================ WHATSAPP FLOATING WIDGET ============================================ */ .wa-widget { position: fixed; bottom: 32px; right: 32px; width: 60px; height: 60px; background: #1A1A1A; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.18); z-index: 9999; transition: background 0.25s ease, box-shadow 0.25s ease; animation: wa-bounce 0.8s cubic-bezier(0.36,0.07,0.19,0.97) 3s 1 both; } .wa-widget:hover { background: #25D366; box-shadow: 0 6px 24px rgba(37,211,102,0.35); animation: none; } .wa-icon { width: 32px; height: 32px; filter: brightness(0) invert(1); display: block; } /* Bounce animation — fires after 3s delay, repeats 3 times */ @keyframes wa-bounce { 0% { transform: translateY(0) scale(1); } 15% { transform: translateY(-14px) scale(1.05); } 30% { transform: translateY(0) scale(0.97); } 45% { transform: translateY(-8px) scale(1.02); } 60% { transform: translateY(0) scale(1); } 100% { transform: translateY(0) scale(1); } } /* Periodic reminder — fires every 8s, subtle pulse */ @keyframes wa-pulse { 0% { box-shadow: 0 4px 16px rgba(0,0,0,0.18); } 50% { box-shadow: 0 4px 24px rgba(0,0,0,0.32), 0 0 0 8px rgba(26,26,26,0.08); } 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.18); } } /* After initial bounce, run periodic bounce every 10s */ .wa-widget.wa-active { animation: wa-bounce 0.8s cubic-bezier(0.36,0.07,0.19,0.97) infinite; animation-delay: 0s; animation-iteration-count: 1; } /* Hide WhatsApp widget when mobile menu is open */ body.menu-open .wa-widget { opacity: 0; pointer-events: none; z-index: 197; } /* JS-triggered periodic bounce */ .wa-widget.wa-bounce-trigger { animation: wa-bounce 0.8s cubic-bezier(0.36,0.07,0.19,0.97) 1; } @media (max-width: 768px) { .wa-widget { bottom: 24px; right: 20px; width: 52px; height: 52px; } .wa-icon { width: 28px; height: 28px; } } /* ============================================ DESKTOP DROPDOWN MENU Opens to the left of the burger button ============================================ */ .desktop-dropdown { display: none; position: absolute; top: 50%; right: 56px; transform: translateY(-50%) translateX(12px); background: none; border: none; border-radius: 0; box-shadow: none; padding: 0; z-index: 200; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; flex-direction: row; align-items: center; gap: 0; white-space: nowrap; } .desktop-dropdown.is-open { display: flex; opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; } .desktop-dropdown-link { display: inline-flex; align-items: center; padding: 4px 16px; font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text-secondary); text-decoration: none; border-radius: 0; transition: color 0.15s; border-right: 1px solid #E0E0E0; } .desktop-dropdown-link:last-child { border-right: none; } .desktop-dropdown-link:hover { color: var(--text-primary); } .desktop-dropdown-link.active { color: var(--text-primary); font-weight: 600; } /* Make navbar container relative for dropdown positioning */ .navbar .container { position: relative; } /* Burger button — no background, no border */ .navbar-burger { background: none; border: none; outline: none; box-shadow: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; } .navbar-burger:focus, .navbar-burger:active, .navbar-burger:focus-visible { outline: none; box-shadow: none; background: none; border: none; } /* Burger → Cross animated transition */ .navbar-burger .burger-icon-img { display: block; opacity: 1; transform: rotate(0deg) scale(1); transition: opacity 0.2s ease, transform 0.25s ease; } .navbar-burger .cross-icon-img { display: block; position: absolute; opacity: 0; transform: rotate(-45deg) scale(0.6); transition: opacity 0.2s ease, transform 0.25s ease; } .navbar-burger { position: relative; } .navbar-burger.is-active .burger-icon-img { opacity: 0; transform: rotate(45deg) scale(0.6); } .navbar-burger.is-active .cross-icon-img { opacity: 1; transform: rotate(0deg) scale(1); } /* Hide mobile menu on desktop */ @media (min-width: 769px) { .mobile-menu, .mobile-menu-overlay { display: none; } } /* On mobile — hide desktop dropdown, use full-screen menu */ @media (max-width: 768px) { .desktop-dropdown { display: none !important; } } /* ============================================ MOBILE MENU — New Design Right-aligned nav + social links ============================================ */ .mobile-menu-overlay { display: none; position: fixed; inset: 0; z-index: 198; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.50); } .mobile-menu-overlay.is-visible { display: block; opacity: 1; } .mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 199; padding-top: 61px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.50); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(-100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); padding: 0 0 40px; overflow-y: auto; padding-top: 61px; } .mobile-menu.is-open { transform: translateY(0); } /* Hide top row — logo+close now in navbar */ .mobile-menu-top { display: none; } /* Nav links — right aligned */ .mobile-menu-nav { display: flex; flex-direction: column; align-items: flex-end; padding: 24px 24px 0; gap: 0; } .mobile-menu-link { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.5; color: #FFFFFF; text-decoration: none; padding: 10px 0; transition: color 0.15s, font-weight 0.15s; } .mobile-menu-link:hover { color: #FFFFFF; opacity: 0.85; } .mobile-menu-link.active { color: #FFFFFF; font-weight: 700; } /* Divider */ .mobile-menu-divider { height: 1px; background: rgba(255,255,255,0.12); margin: 20px 24px; } /* Social links — right aligned */ .mobile-menu-social { display: flex; flex-direction: column; align-items: flex-end; padding: 0 24px; gap: 0; } .mobile-menu-social-link { font-family: var(--font-sans); font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.6); text-decoration: none; padding: 10px 0; transition: color 0.15s; } .mobile-menu-social-link:hover { color: #FFFFFF; } /* Instant show desktop dropdown on page load if was open (desktop only — guarded so it can never override the mobile-hide rule via specificity) */ @media (min-width: 769px) { .desktop-menu-was-open .desktop-dropdown { display: flex !important; opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; pointer-events: auto !important; } } /* ============================================ 404 PAGE ============================================ */ .page-404 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; padding: 80px var(--page-padding); text-align: center; } .page-404-illustration { max-width: 710px; width: 100%; } .page-404-illustration img { width: 100%; height: auto; } .page-404-text { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 600px; } .page-404-text h1 { font-family: var(--font-serif); font-weight: 700; font-size: 36px; color: var(--text-primary); } .page-404-text p { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 12px; } @media (max-width: 768px) { .page-404 { padding: 48px 24px; gap: 32px; } .page-404-text h1 { font-size: 28px; } } /* Language toggle — persistent, outside dropdown menus */ .lang-toggle { position: relative; display: flex; align-items: center; background: #1A1A1A; border-radius: 14px; padding: 2px; width: 56px; height: 28px; flex-shrink: 0; margin-left: auto; margin-right: 20px; transition: transform 0.25s ease; } .lang-toggle--ru { display: flex; } .lang-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; border-radius: 12px; transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1), right 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .lang-toggle--ru .lang-toggle-thumb { left: auto; right: 2px; } .lang-label { position: relative; z-index: 1; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 12px; text-decoration: none; color: #fff; font-weight: 400; } .lang-label-en { color: #1A1A1A; font-weight: 700; } .lang-toggle--ru .lang-label-en { color: #fff; font-weight: 400; } .lang-toggle--ru .lang-label-ru { color: #1A1A1A; font-weight: 700; } /* ============================================ PROJECT IMAGE ZOOM (magnifier + lightbox) ============================================ */ .project-img-zoom-wrap { position: relative; cursor: zoom-in; overflow: hidden; } .project-img-zoom-wrap img { display: block; } .project-img-zoom-badge { position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.75); border-radius: 16px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 0.2s ease, background 0.2s ease; } .project-img-zoom-badge img { width: 16px; height: 16px; } .project-img-zoom-wrap:hover .project-img-zoom-badge { background: rgba(0, 0, 0, 0.9); transform: scale(1.08); } .project-img-lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .project-img-lightbox.is-open { opacity: 1; pointer-events: auto; } .project-img-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; cursor: zoom-out; } .project-img-lightbox-close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .project-img-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); } .project-img-lightbox-close svg { width: 20px; height: 20px; } @media (max-width: 768px) { .project-img-zoom-badge { display: none; } .project-img-zoom-badge img { width: 17px; height: 17px; } .project-img-lightbox { padding: 16px; } .project-img-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; } } /* Projects search input */ .projects-search { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 16px; background: #fff; border: 1px solid #1A1A1A; border-radius: 8px; margin-bottom: 40px; } .projects-search img { width: 20px; height: 20px; flex-shrink: 0; } .projects-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); } .projects-search input::placeholder { color: var(--text-secondary); } .projects-no-results { display: none; padding: 40px 0; font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); text-align: center; } .projects-no-results.is-visible { display: block; } /* Discuss a similar project CTA */ .project-discuss-cta { display: flex; justify-content: center; padding: 56px var(--page-padding); } .project-discuss-cta .btn { padding: 14px 32px; font-size: 16px; } /* Bottom project nav doodle arrows */ .project-nav-arrow { width: 32px; height: auto; flex-shrink: 0; } .project-nav-arrow--prev { transform: scaleX(-1); } /* In-content links (Overview, Challenge, Solution prose) — underlined, monochrome accent */ .project-block p a, .project-section-text a, .project-results-bullets a, .cv-section-inner p a, .ai-section-inner p a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .project-block p a:hover, .project-section-text a:hover, .project-results-bullets a:hover, .cv-section-inner p a:hover, .ai-section-inner p a:hover { color: #444; } /* Side-by-side text + small full image block */ .project-side-block { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 40px; } .project-side-text { flex: 1; min-width: 0; } .project-side-img { width: 260px; max-width: 260px; flex-shrink: 0; height: auto; border-radius: 8px; border: 1px solid var(--border-color); background: #fff; } @media (max-width: 768px) { .project-side-block { flex-direction: column; } .project-side-img { width: 100%; max-width: 100%; } } /* Two images side by side */ .project-row2-block { display: flex; gap: 24px; margin-bottom: 24px; align-items: flex-start; } .project-row2-block .project-img { flex: 1; min-width: 0; height: auto; object-fit: contain; } @media (max-width: 768px) { .project-row2-block { flex-direction: column; } } /* Two-column rich content split: text+2 images left, tall image right (matched height) */ .project-split-block { display: flex; gap: 32px; align-items: stretch; margin-bottom: 40px; min-height: 0; } .project-split-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .project-split-images-row { display: flex; gap: 16px; } .project-split-images-row .project-img { flex: 1; min-width: 0; } .project-split-right { width: 320px; flex-shrink: 0; height: 100%; align-self: stretch; object-fit: cover; object-position: top; } @media (max-width: 768px) { .project-split-block { flex-direction: column; } .project-split-images-row { flex-direction: column; } .project-split-right { width: 100%; height: auto; object-fit: contain; } } /* Narrow stacked column for tall flow-logic screenshots */ .project-narrow-col { display: flex; flex-direction: column; gap: 24px; max-width: 280px; margin: 0 auto; } .project-narrow-col .project-img { margin: 0; } /* Four images in a row, equal height on desktop, stacking on mobile */ .project-row4-block { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; } .project-row4-block .project-img { width: auto; height: 420px; max-width: 100%; object-fit: contain; } @media (max-width: 900px) { .project-row4-block .project-img { height: auto; width: 100%; max-width: 360px; } } /* ============================================ TOOL FILTER DROPDOWN ============================================ */ .projects-controls { display: flex; gap: 20px; align-items: center; margin-bottom: 32px; flex-wrap: wrap; } @media (min-width: 769px) { .projects-controls { justify-content: flex-end; } } .projects-search { flex: 1; min-width: 200px; } .projects-filter-wrapper { position: relative; margin-top: 24px; } .projects-filter-toggle { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 2px solid #E0E0E0; border-radius: 8px; background: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; white-space: nowrap; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } @media (min-width: 769px) { .projects-filter-toggle { width: 240px; justify-content: space-between; } } .projects-filter-toggle:hover { border-color: var(--text-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .projects-filter-toggle.is-open, .projects-filter-toggle.has-selection { background: var(--text-primary); border-color: var(--text-primary); color: #fff; } .projects-filter-toggle.is-open .filter-icon-main, .projects-filter-toggle.is-open .filter-icon-close, .projects-filter-toggle.has-selection .filter-icon-main, .projects-filter-toggle.has-selection .filter-icon-close { color: #fff; } .filter-toggle-icon { width: 20px; height: 20px; color: var(--text-primary); flex-shrink: 0; } .filter-icon-main, .filter-icon-close { width: 20px; height: 20px; color: var(--text-primary); flex-shrink: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .filter-icon-container { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .filter-icon-main { position: absolute; opacity: 1; transform: rotate(0deg); } .filter-icon-close { position: absolute; opacity: 0; transform: rotate(90deg); } .projects-filter-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-dark); border: 1px solid #d0d0d0; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 100; min-width: 240px; width: 240px; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: all 0.3s ease; pointer-events: none; overflow: hidden; } .projects-filter-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .filter-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; transition: background 0.2s ease; border-bottom: 1px solid #d0d0d0; } .filter-option:last-child { border-bottom: none; } .filter-option:first-child { border-bottom: 1px solid #d0d0d0; padding: 14px 16px; background: #f9f9f9; } .filter-option:hover:not(:first-child) { background: #f5f5f5; } .filter-checkbox { width: 20px; height: 20px; cursor: pointer; accent-color: var(--text-primary); flex-shrink: 0; } .filter-label { font-family: var(--font-sans); font-size: 15px; font-weight: 400; color: var(--text-primary); cursor: pointer; white-space: nowrap; user-select: none; } .filter-option:first-child .filter-label { font-weight: 700; font-size: 15px; } /* Tech tag highlighting when tool is selected */ .tech-tag.tag-highlighted { background: var(--text-primary); color: var(--bg-light); font-weight: 600; } .projects-search { display: none !important; } @media (max-width: 768px) { .projects-controls { flex-direction: column; } .projects-search { width: 100%; min-width: unset; } .projects-filter-wrapper { width: 100%; position: relative; } .projects-filter-toggle { width: 100%; justify-content: space-between; padding: 14px 18px; } .projects-filter-dropdown { left: 0; right: auto; width: 100%; min-width: unset; } }