/* --- Theme Variables --- */ :root { --bg-color: #e9e9ed; /* Cool Gallery Light Grey (From Logo) */ --card-bg: rgba(255, 255, 255, 0.85); /* Clean paper white */ --card-bg-solid: rgba(255, 255, 255, 0.95); --card-border: rgba(135, 139, 180, 0.15); /* Tinted with logo accent */ --card-border-hover: rgba(135, 139, 180, 0.6); /* Slate blue hover */ --text-primary: #191b26; /* Dark slate navy (cool charcoal) */ --text-secondary: #5c5e6f; /* Cool slate gray */ --text-muted: #888aa3; --accent: #878bb4; /* Premium Slate Blue (From Logo) */ --accent-rgb: 135, 139, 180; --accent-hover: #6d719e; /* Deeper slate blue */ --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-quick: all 0.2s ease; --header-bg: rgba(247, 245, 240, 0.85); --footer-bg: rgba(240, 237, 230, 0.95); --filter-bar-bg: rgba(247, 245, 240, 0.9); --modal-media-bg: radial-gradient(circle at center, #fdfdfb 0%, #eae6e0 100%); --modal-details-bg: rgba(255, 255, 255, 0.98); --input-bg: #ffffff; --input-bg-focus: #fbfbfd; --input-border: rgba(0, 0, 0, 0.1); --card-img-bg: radial-gradient(circle at center, #ffffff 0%, #f1f1f5 100%); } [data-theme="dark"] { --bg-color: #121318; /* Deep charcoal navy */ --card-bg: rgba(28, 29, 38, 0.85); /* Dark paper slate */ --card-bg-solid: rgba(24, 25, 33, 0.98); --card-border: rgba(135, 139, 180, 0.2); --card-border-hover: rgba(135, 139, 180, 0.7); --text-primary: #f3f4f6; /* Warm off-white */ --text-secondary: #a3a5be; /* Cool lavender-grey */ --text-muted: #72748a; --accent: #a5a9d8; /* Slightly brighter slate blue for contrast in dark mode */ --accent-rgb: 165, 169, 216; --accent-hover: #babbec; --header-bg: rgba(18, 19, 24, 0.85); --footer-bg: rgba(14, 15, 19, 0.95); --filter-bar-bg: rgba(18, 19, 24, 0.9); --modal-media-bg: radial-gradient(circle at center, #1b1c22 0%, #0c0d10 100%); --modal-details-bg: rgba(18, 19, 24, 0.98); --input-bg: #1e1f28; --input-bg-focus: #252633; --input-border: rgba(135, 139, 180, 0.2); --card-img-bg: radial-gradient(circle at center, #1b1c22 0%, #141519 100%); } /* --- Page Fade-in Transition --- */ @keyframes pageFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; } } body.page-fade { /* forwards-only fade; NO lingering transform (a transform on breaks position:fixed for the header, modal, and back-to-top button) */ animation: pageFade 0.55s cubic-bezier(0.16, 1, 0.3, 1); } /* --- Skip Link (Accessibility) --- */ .skip-link { position: absolute; top: -100%; left: 1rem; background: var(--accent); color: #000; padding: 0.5rem 1rem; border-radius: 0 0 8px 8px; font-weight: 600; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 0; } /* --- Base Reset & Scroll --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background-color: var(--bg-color); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 0.35s ease, color 0.35s ease; } body { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-color); background-image: radial-gradient(circle at 10% 20%, rgba(var(--accent-rgb), 0.12) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(var(--accent-rgb), 0.08) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%); background-attachment: fixed; transition: background-color 0.35s ease; } /* --- Scrollbar Customization --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* --- Header / Navigation --- */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: var(--header-bg); border-bottom: 1px solid var(--card-border); } .nav-container { max-width: 1400px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; } .logo span { color: var(--accent); } nav { display: flex; gap: 2rem; } nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: var(--transition-quick); position: relative; padding: 0.25rem 0; } nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background-color: var(--accent); transition: var(--transition-quick); } nav a:hover, nav a.active { color: var(--text-primary); } nav a:hover::after, nav a.active::after { width: 100%; } /* --- Hero Section --- */ .hero { min-height: 85vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem 2rem 4rem; max-width: 1000px; margin: 0 auto; position: relative; } .hero-badge { background: rgba(135, 139, 180, 0.1); border: 1px solid rgba(135, 139, 180, 0.2); color: var(--accent); padding: 0.5rem 1.25rem; border-radius: 100px; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 2rem; font-family: var(--font-heading); animation: fadeInDown 0.8s ease-out; } .hero h1 { font-family: var(--font-heading); font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -1.5px; animation: fadeInUp 0.8s ease-out 0.2s both; } .hero h1 span { background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.2rem; color: var(--text-secondary); max-width: 700px; line-height: 1.6; margin-bottom: 3rem; animation: fadeInUp 0.8s ease-out 0.4s both; } .hero-cta { display: flex; gap: 1.5rem; animation: fadeInUp 0.8s ease-out 0.6s both; } /* --- Home Hero Variant --- */ .home-hero { min-height: 65vh; padding-top: 10rem; padding-bottom: 3rem; } .hero-eyebrow { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; animation: fadeInDown 0.6s ease-out both; } /* --- Category Cover Card Hover Overlay --- */ /* Home page cover cards get a full-image overlay on hover */ #categories .portfolio-card .card-img-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,29,33,0.65) 0%, rgba(28,29,33,0.1) 60%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; z-index: 3; } #categories .portfolio-card:hover .card-img-wrapper::after { opacity: 1; } /* Make covers taller for editorial feel */ #categories .card-img-wrapper { padding-top: 130%; } #categories .card-img-fg { object-fit: cover; padding: 0; } /* --- Portfolio Page Header --- */ .portfolio-page-header { padding: 8rem 2rem 2.5rem; max-width: 1400px; margin: 0 auto; width: 100%; } .portfolio-page-header h1 { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 800; letter-spacing: -1px; margin-top: 1rem; margin-bottom: 0.5rem; } .portfolio-page-header p { color: var(--text-secondary); font-size: 1rem; } /* --- Back Link --- */ .back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; letter-spacing: 0.5px; transition: var(--transition-quick); padding: 0.4rem 0; } .back-link:hover { gap: 0.7rem; color: var(--accent-hover); } .btn { display: inline-block; padding: 0.85rem 2rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: var(--transition-quick); font-size: 0.95rem; cursor: pointer; } .btn-primary { background: var(--accent); color: #000; border: 1px solid var(--accent); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(135, 139, 180, 0.2); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--card-border); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--text-secondary); } /* --- Section Container --- */ .section { padding: 6rem 2rem; max-width: 1400px; margin: 0 auto; width: 100%; } .section-header { margin-bottom: 4rem; text-align: center; } .section-header h2 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 0.75rem; } .section-header p { color: var(--text-secondary); font-size: 1.05rem; } /* --- Portfolio Filter Bar --- */ .filter-bar { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3.5rem; position: sticky; top: 70px; z-index: 100; background: var(--filter-bar-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1rem 0; border-radius: 12px; } .filter-btn { text-decoration: none; background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-secondary); padding: 0.6rem 1.4rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition-quick); backdrop-filter: blur(8px); } .filter-btn:hover { color: var(--text-primary); border-color: var(--text-secondary); } .filter-btn.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; } /* --- Portfolio Grid --- */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; } /* --- Portfolio Card --- */ .portfolio-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: var(--transition-smooth); display: flex; flex-direction: column; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; opacity: 0; transform: scale(0.95); animation: cardLoad 0.5s ease forwards; } @keyframes cardLoad { to { opacity: 1; transform: scale(1); } } .portfolio-card:hover { transform: translateY(-6px); border-color: var(--card-border-hover); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(135, 139, 180, 0.25); } .card-img-wrapper { position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio square default */ overflow: hidden; background: var(--card-img-bg); box-shadow: inset 0 0 20px rgba(0,0,0,0.06); transition: background 0.35s ease; } /* Custom aspect ratio overrides for specific files if wanted */ .portfolio-card.web .card-img-wrapper { padding-top: 130%; /* taller for UI/UX mobile presentations */ } .card-img-bg { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; object-fit: cover; filter: blur(22px); opacity: 0.25; transition: var(--transition-smooth); z-index: 1; } .card-img-fg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; z-index: 2; opacity: 0; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .card-img-fg.loaded { opacity: 1; } .portfolio-card:hover .card-img-fg { transform: scale(1.05); } .portfolio-card:hover .card-img-bg { opacity: 0.45; } .card-info { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid var(--card-border); background: var(--card-bg-solid); } .card-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); } .card-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--text-primary); } /* --- About Section --- */ .about-content { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; } .about-visual { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--card-border); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .about-visual img { width: 100%; height: 100%; object-fit: cover; } .about-text h3 { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; } .about-text p { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; } .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } .skill-card { background: var(--card-bg); border: 1px solid var(--card-border); padding: 1.25rem; border-radius: 10px; display: flex; flex-direction: column; gap: 0.5rem; } .skill-card h4 { font-family: var(--font-heading); color: var(--accent); font-size: 1.1rem; font-weight: 600; } .skill-card p { font-size: 0.9rem; margin-bottom: 0; color: var(--text-secondary); line-height: 1.4; } /* --- Contact Section --- */ .contact-container { max-width: 600px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 3rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .contact-form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .form-group input, .form-group textarea { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); padding: 0.85rem 1rem; border-radius: 8px; font-family: var(--font-body); font-size: 0.95rem; transition: var(--transition-quick); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent); background: var(--input-bg-focus); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .contact-form .btn { text-align: center; border: none; } /* --- Footer --- */ footer { margin-top: auto; border-top: 1px solid var(--card-border); background: var(--footer-bg); padding: 3rem 2rem; text-align: center; } .footer-content { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .footer-copyright { color: var(--text-muted); font-size: 0.9rem; } .footer-links { display: flex; gap: 2rem; } .footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: var(--transition-quick); } .footer-links a:hover { color: var(--accent); } /* --- Modal Overlay --- */ .modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(30, 28, 24, 0.92); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; justify-content: center; align-items: center; padding: 2rem; } .modal.active { opacity: 1; pointer-events: all; } .modal-close { position: absolute; top: 2rem; right: 2rem; background: transparent; border: none; color: #f3f4f6; font-size: 2.5rem; cursor: pointer; transition: var(--transition-quick); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .modal-close:hover { color: var(--accent); background: rgba(255, 255, 255, 0.15); transform: scale(1.05); } .modal-container { max-width: 1200px; width: 100%; height: 100%; display: grid; grid-template-columns: 2.5fr 1fr; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.6); transform: scale(0.95); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); max-height: 85vh; } .modal.active .modal-container { transform: scale(1); } .modal-media { background: var(--modal-media-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100%; position: relative; box-shadow: inset 0 0 30px rgba(0,0,0,0.08); } .modal-media img { max-width: 100%; max-height: 100%; object-fit: contain; width: auto; height: auto; } .modal-details { padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; background: var(--modal-details-bg); border-left: 1px solid var(--card-border); } .modal-category { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); } .modal-title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; line-height: 1.2; } .modal-desc { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; } .modal-meta-item { display: flex; flex-direction: column; gap: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--card-border); } .modal-meta-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; font-weight: 600; } .modal-meta-val { font-size: 0.95rem; color: var(--text-secondary); } /* --- Animations --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* --- Accessibility --- */ a:focus, button:focus, .filter-btn:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Back to Top --- */ #backToTop { position: fixed; bottom: 2rem; right: 2rem; background: var(--accent); color: #000; border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 1.5rem; display: none; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-quick); z-index: 999; } #backToTop.show { display: flex; } #backToTop:hover { background: var(--accent-hover); transform: translateY(-3px); } /* --- Mobile Nav Toggle --- */ .nav-toggle { display: none; } .nav-toggle-label { display: none; cursor: pointer; width: 25px; height: 20px; position: relative; } .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: var(--text-primary); height: 2px; position: absolute; transition: var(--transition-quick); width: 100%; } .nav-toggle-label span { top: 9px; } .nav-toggle-label span::before { content: ''; top: -9px; } .nav-toggle-label span::after { content: ''; bottom: -9px; } /* --- Media Queries --- */ @media (max-width: 1024px) { .about-content { grid-template-columns: 1fr; gap: 3rem; } .about-visual { max-width: 500px; margin: 0 auto; width: 100%; } .modal-container { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; max-height: 90vh; } .modal-details { padding: 2rem; border-left: none; border-top: 1px solid var(--card-border); } } @media (max-width: 768px) { .hero { min-height: 70vh; padding: 7rem 1.5rem 3rem; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1rem; } .nav-container { padding: 1rem 1.5rem; } .nav-toggle-label { display: block; } .mobile-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-color); flex-direction: column; padding: 2rem; gap: 2rem; border-bottom: 1px solid var(--card-border); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .mobile-nav a { font-size: 1.2rem; } .nav-toggle:checked ~ .mobile-nav { display: flex; } .nav-toggle:checked ~ .nav-controls .nav-toggle-label span { background: transparent; } .nav-toggle:checked ~ .nav-controls .nav-toggle-label span::before { transform: rotate(45deg); top: 0; } .nav-toggle:checked ~ .nav-controls .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; } .section { padding: 3rem 1.25rem; } .section-header { margin-bottom: 2.5rem; } .section-header h2 { font-size: 2rem; } .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .filter-bar { gap: 0.5rem; top: 56px; } .filter-btn { padding: 0.5rem 1rem; font-size: 0.8rem; } .contact-container { padding: 2rem 1.5rem; } .skills-grid { grid-template-columns: 1fr; } .modal-container { max-height: 95vh; } .modal-title { font-size: 1.5rem; } } @media (max-width: 480px) { .hero h1 { font-size: 2rem; } nav { gap: 0.75rem; } nav a { font-size: 0.8rem; } .portfolio-grid { grid-template-columns: 1fr; } } /* --- Premium Theme Toggle Button --- */ .theme-toggle-btn { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); cursor: pointer; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition-quick); padding: 0; } .theme-toggle-btn:hover { background: var(--card-bg); border-color: var(--accent); color: var(--accent); transform: scale(1.05); } .theme-toggle-btn svg { transition: transform 0.4s ease; } .theme-toggle-btn:hover svg { transform: rotate(25deg); } .nav-controls { display: flex; align-items: center; gap: 1.25rem; } /* --- Modal Navigation Buttons --- */ .modal-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text-primary); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: var(--transition-quick); z-index: 10; } .modal-nav-btn:hover { background: var(--accent); color: #000; border-color: var(--accent); transform: translateY(-50%) scale(1.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .modal-nav-btn.prev-btn { left: 1rem; } .modal-nav-btn.next-btn { right: 1rem; } /* --- Scroll-Reveal Utility Styles --- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* --- Modal Position Indicator --- */ .modal-position { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.5); color: #f3f4f6; padding: 0.35rem 1rem; border-radius: 100px; font-size: 0.8rem; font-weight: 500; letter-spacing: 1px; font-family: var(--font-body); z-index: 10; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ========================================================================== ENHANCEMENTS — visual polish + phone-ready (appended; overrides above) ========================================================================== */ :root{ --warm:#c98a5b; --warm-soft:#e0b48c; } [data-theme="dark"]{ --warm:#d59a6a; --warm-soft:#e6bd94; } /* Smoother global type + selection */ ::selection{ background:var(--warm-soft); color:#1a1a1a; } body{ text-rendering:optimizeLegibility; } /* Hero: Arabic name accent + warmer gradient on the name */ .hero-ar{ font-family:'Tajawal', var(--font-heading); font-size:clamp(1.15rem, 3.5vw, 1.6rem); font-weight:500; color:var(--accent); opacity:.9; margin:.15rem 0 1.6rem; animation:fadeInUp .8s ease-out .3s both; } .hero h1 span{ background:linear-gradient(120deg, var(--text-primary) 0%, var(--accent) 55%, var(--warm) 100%); -webkit-background-clip:text; background-clip:text; } .home-hero h1{ font-size:clamp(2.4rem, 7vw, 4.4rem); } /* Buttons: warmer, softer, better tap target */ .btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-hover)); color:#fff; border:none; border-radius:12px; box-shadow:0 6px 18px -8px rgba(var(--accent-rgb), .6); } .btn-primary:hover{ box-shadow:0 12px 26px -8px rgba(var(--accent-rgb), .7); } /* Section headers: small warm accent underline */ .section-header h2{ position:relative; display:inline-block; } .section-header h2::after{ content:''; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:52px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--accent), var(--warm)); } /* Cards: rounder, softer, lift + warm ring on hover */ .portfolio-card{ border-radius:16px; } .card-img-wrapper{ border-top-left-radius:16px; border-top-right-radius:16px; } .portfolio-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px -18px rgba(0,0,0,.28), 0 0 0 1px rgba(var(--accent-rgb),.28); } .card-title{ font-size:1.15rem; line-height:1.25; } /* Video cards: keep Antigravity's autoplaying muted preview (no overlay) */ .portfolio-card.video .card-img-wrapper{ background:#050608; } /* --- PHONE-READY --- */ @media (max-width:768px){ /* Filter bar → horizontal swipe instead of tall wrap */ .filter-bar{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:0; margin-inline:-1.25rem; padding-inline:1.25rem; top:58px; } .filter-bar::-webkit-scrollbar{ display:none; } .filter-btn{ flex:0 0 auto; } /* Roomier hero + tighter grid */ .home-hero{ min-height:auto; padding-top:8rem; } .hero p{ font-size:1.02rem; } .portfolio-grid{ grid-template-columns:1fr 1fr; gap:1rem; } #categories .portfolio-grid{ grid-template-columns:1fr; } .card-title{ font-size:1.05rem; } .card-info{ padding:1rem 1.1rem; } /* Modal fits small screens */ .modal{ padding:1rem; } .modal-close{ top:1rem; right:1rem; width:42px; height:42px; font-size:2rem; } .modal-nav-btn{ width:40px; height:40px; font-size:1.2rem; } .modal-nav-btn.prev-btn{ left:.4rem; } .modal-nav-btn.next-btn{ right:.4rem; } .modal-details{ padding:1.4rem; } .modal-title{ font-size:1.4rem; } /* Comfortable tap targets */ nav a{ padding:.4rem 0; } } @media (max-width:430px){ .portfolio-grid{ grid-template-columns:1fr; } .hero h1{ font-size:2.1rem; } .section{ padding:2.75rem 1.1rem; } } /* Respect reduced motion */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; scroll-behavior:auto !important; } .reveal{ opacity:1 !important; transform:none !important; } .portfolio-card{ opacity:1 !important; transform:none !important; } } /* Logo mark + wordmark */ .logo-mark{ height:38px; width:auto; display:block; } .logo-word{ font-family:var(--font-heading); font-weight:700; font-size:1.15rem; letter-spacing:-.3px; color:var(--text-primary); white-space:nowrap; } footer .logo-word{ font-size:1.05rem; } @media (max-width:480px){ .logo-word{ font-size:1rem; } .logo-mark{ height:32px; } } /* Contact chips (email/social) */ .contact-links{ display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1.75rem; } .contact-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1.3rem; border-radius:100px; border:1px solid var(--card-border); background:var(--card-bg); color:var(--text-primary); font-weight:600; font-size:.92rem; transition:var(--transition-quick); } .contact-chip:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); } /* Accessibility: darker primary buttons for AA contrast with white text */ .btn-primary{ background:linear-gradient(135deg,#5f6396,#4b4f78); color:#fff; } .btn-primary:hover{ background:linear-gradient(135deg,#565a8c,#42466c); } [data-theme="dark"] .btn-primary{ background:linear-gradient(135deg,#6d719e,#565a86); } /* About panel showing the logo instead of a photo */ .about-visual--logo{ background:linear-gradient(160deg, var(--card-bg-solid), var(--bg-color)); display:flex; align-items:center; justify-content:center; border:1px solid var(--card-border); } .about-logo{ width:60%; max-width:260px; height:auto; object-fit:contain; } /* About: at-a-glance facts pulled from the CV */ .about-facts{ margin-top:1.75rem; display:grid; gap:0; } .about-facts > div{ display:flex; gap:1rem; align-items:baseline; border-top:1px solid var(--card-border); padding:.8rem 0; } .fact-label{ flex:0 0 96px; font-family:var(--font-heading); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); } .fact-val{ color:var(--text-secondary); font-size:.95rem; } @media(max-width:480px){ .about-facts > div{ flex-direction:column; gap:.15rem; } .fact-label{ flex:none; } } /* FIX: About-panel logo must be contained (was being stretched by .about-visual img cover rule) */ .about-visual--logo img, .about-visual--logo img.about-logo{ width:62%; max-width:250px; height:auto; object-fit:contain; } /* FIX: nav/footer logo marks are square (logo viewBox is 1:1) — never stretch */ .logo-mark{ height:38px; width:38px; object-fit:contain; } footer .logo-mark{ height:42px; width:42px; } /* FIX: working mobile menu (class-based; replaces the broken sibling selector) */ @media (max-width:768px){ body.mobile-menu-open .mobile-nav{ display:flex; } body.mobile-menu-open .nav-toggle-label span{ background:transparent; } body.mobile-menu-open .nav-toggle-label span::before{ transform:rotate(45deg); top:0; } body.mobile-menu-open .nav-toggle-label span::after{ transform:rotate(-45deg); top:0; } } /* Hero role / location line */ .hero-role{ font-family:var(--font-heading); font-weight:500; font-size:clamp(.95rem,2.5vw,1.1rem); color:var(--text-secondary); letter-spacing:.02em; margin:.1rem 0 1.5rem; } .modal-position{ pointer-events:none; } /* --- Webpage Layout Modal View (simulates viewing a live browser) --- */ .modal.web-layout .modal-media { display: block; /* Remove flex centering */ overflow-y: auto; /* Enable natural vertical scrolling */ background: #ffffff; /* Neutral white canvas for browser mockup */ height: 100%; scrollbar-width: thin; } .modal.web-layout .modal-media img { max-height: none; /* Let image stretch vertically */ width: 100%; max-width: 100%; height: auto; display: block; object-fit: fill; } /* Sticky address bar top bar */ .browser-address-sticky { position: sticky; top: 0; left: 0; width: 100%; height: 44px; background: #f1f1f5; border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0 1.25rem; z-index: 100; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .browser-address-sticky { background: #1e1f29; border-bottom-color: rgba(255, 255, 255, 0.08); } .browser-address-dot-group { display: flex; gap: 6px; position: absolute; left: 1.25rem; } .browser-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .browser-dot.red { background: #ff5f56; } .browser-dot.yellow { background: #ffbd2e; } .browser-dot.green { background: #27c93f; } .browser-address-text { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; height: 26px; width: 55%; max-width: 380px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; color: #5c5e6f; font-family: var(--font-body); font-weight: 400; } [data-theme="dark"] .browser-address-text { background: #121318; border-color: rgba(255, 255, 255, 0.08); color: #a3a5be; } /* Ensure modal details has a subtle gap from scroll */ .modal.web-layout .modal-container { max-height: 88vh; } /* --- Hero CTA Down Arrow Bouncing Animation --- */ .scroll-arrow { display: inline-block; animation: arrowBounce 1.6s infinite; } @keyframes arrowBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* FIX (mobile): distinct menu panel + filter bar clears the 75px fixed header */ @media (max-width:768px){ .mobile-nav{ background: var(--card-bg-solid); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 34px rgba(0,0,0,0.22); border-bottom: 1px solid var(--card-border); padding-top: 1.75rem; padding-bottom: 1.75rem; } .filter-bar{ top: 76px; } } /* FIX (mobile): fully opaque menu panel — no bleed-through of hero content */ @media (max-width:768px){ .mobile-nav{ background:#fbf9f5; } [data-theme="dark"] .mobile-nav{ background:#16171d; } }