/* ========================================= 1. FONTS & IMPORTS ========================================= */ @font-face { font-family: 'Eina'; src: url('../assets/Fonts/Eina01-Regular.ttf'); font-weight: 400; } @font-face { font-family: 'Eina'; src: url('../assets/Fonts/Eina01-SemiBold.ttf'); font-weight: 600; } @font-face { font-family: 'Eina'; src: url('../assets/Fonts/Eina01-Bold.ttf'); font-weight: 700; } /* ========================================= 2. GLOBAL STYLES ========================================= */ body{ margin: 0; padding: 0; font-family: 'Eina'; } /* ========================================= 3. NAVIGATION BAR ========================================= */ nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding-left: 40px; padding-right: 40px; height: 100px; /* Default tall height for Home Page top */ box-sizing: border-box; transition: all 0.4s ease; border-bottom: 1px solid transparent; } /* --- THE SCROLLED STATE (Dark & Blurry) --- */ .nav-scrolled { background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); height: 80px; } /* Keep your existing Hover effect */ nav:hover { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* --- LEFT SIDE (About + Portfolio) --- */ .nav-left { flex: 1; display: flex; justify-content: flex-start; align-items: center; gap: 30px; } /* --- CENTER (The Logo) --- */ .nav-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; height: 100%; pointer-events: none; } #logo { pointer-events: auto; text-decoration: none; color: white; font-size: 32px; font-weight: 700; line-height: 1; white-space: nowrap; transition: color 0.3s ease; text-align: center; padding: 0 !important; margin: 0 !important; } /* --- RIGHT SIDE (Contact + Icons) --- */ .nav-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 25px; } /* --- SHARED STYLES --- */ nav a { text-decoration: none; color: white; font-weight: 600; font-size: 18px; transition: opacity 0.3s ease; } nav a:hover { opacity: 0.7; } .social-icon { width: 28px; height: 28px; filter: invert(100%); display: block; transition: opacity 0.3s ease; } a[href*="linkedin"] .social-icon { position: relative; top: -3px; } .social-icon:hover { opacity: 0.7; } /* ========================================= FORCE DARK NAV (CSS Override) ========================================= */ /* Any page with will FORCE the nav to look like the scrolled version regardless of what the JavaScript is doing. */ body.dark-mode-active nav { background-color: rgba(0, 0, 0, 0.9) !important; /* Force dark background */ backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; height: 80px !important; /* Force shrink height */ box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important; } /* ========================================= 4. HERO SECTION ========================================= */ .hero-content { max-width: 900px; margin-left: auto; padding-top: 320px; padding-right: 50px; } #hero-section { height: 90vh; background-image: url("../assets/images/keyon-park.png"); background-size: cover; background-position: center top; color:white; font-weight: 600; } .social-icon{ width:40px; height:40px; filter: invert(100%); display: block; transition: filter 0.3s ease; } nav:hover .social-icon { filter: invert(100%); } #logo { font-size: 40px; line-height: 80px; } nav:hover #logo { color: white; } .hero-headline { font-size: 74px; margin-top: 0; font-weight: 590; margin-bottom: 5px; line-height: .9; text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } .hero-subtitle p{ font-size:38px; margin-bottom: 40px; margin-top:5px; margin-bottom:0px; font-weight:530; word-spacing:2px; text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); } .hero-details p{ font-size: 28px; line-height: 0; margin-top:14px; line-height:0.3; word-spacing:2px; font-weight:550; text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); } .hero-tech-stack p{ font-size: 16px; line-height: 0; margin-top:50px; line-height:0.04; word-spacing:2px; color: #ffffffd0; font-weight:600; text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.712); } .hero-resume{ position: relative; display: inline-block; margin-left: 0; border: none; font-weight: 400; font-size: 20px; text-decoration: none; color: white; border-radius: 3px; background-color: rgba(0, 0, 0, 0.164); padding: 16px 20px 16px 70px; transition: background-color 0.2s; } .hero-resume:hover { background-color: rgba(0, 0, 0, 0.301); border: none; } .btn-icon { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; width: 40px; height: 40px; } /* ========================================= 5. ANIMATIONS (Typewriter & Cursor) ========================================= */ .cursor { display: inline-block; font-weight: 100; color: white; animation: blink 2s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* ========================================= 6. PROJECTS SECTION (Selected Works) ========================================= */ #content-section { background-color: white; color: black; padding: 0px 60px 100px 60px; min-height: 50vh; overflow: hidden; } .content-headline p { font-weight: 600; font-size: 24px; margin-top: 15px; margin-bottom: 20px; font-variant-ligatures: none; -webkit-font-smoothing: antialiased; } /* --- CAROUSEL WRAPPER --- */ .carousel-container { position: relative; width: 100%; height: 500px; margin-left: 0; } /* THE TRACK */ .carousel-track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); gap: 20px; } /* --- THE CARD STYLE --- */ .project-card { min-width: calc(100% - 20px); height: 100%; display: flex; background-color: #f9f9f9; border-radius: 20px; overflow: hidden; /* Keeps the zoom inside the rounded corners */ box-shadow: 0 15px 40px rgba(0, 0, 0, 0.103); } /* --- THE IMAGE WRAPPER (The Mask) --- */ .card-image-wrapper { flex: 0.9; position: relative; overflow: hidden; height: 100%; } /* --- THE ACTUAL IMAGE --- */ .card-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s ease; /* Smooth slow zoom */ } /* --- HOVER EFFECT --- */ .project-card:hover .card-bg { transform: scale(1.02); /* Zooms in 5% */ } /* RIGHT SIDE: TEXT */ .card-details { flex: 1; padding: 40px 40px; display: flex; flex-direction: column; justify-content: center; text-align: left; border: 1px solid #11111144; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .card-details h3 { font-size: 32px; margin: 0 0 10px 0; font-weight: 600; } .tech-stack { font-size: 11px; font-weight: 700; color: #888; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; } .description { font-size: 18px; line-height: 1.6; color: #555; margin-bottom: 30px; } .view-project { text-decoration: none; font-weight: 600; color: black; border-bottom: 2px solid black; display: inline-block; width: fit-content; padding-bottom: 2px; } /* CARD 1: Portfolio Website */ .project-card:nth-child(1) .card-bg { background-image: url('../assets/images/portfolio-preview.png'); background-color: #222; /* Fallback color */ } /* CARD 2: Example Project */ .project-card:nth-child(2) .card-bg { background-image: url('../assets/images/your-image2.jpg'); /* Replace with actual file name */ background-color: #444; } /* CARD 3: Example Project */ .project-card:nth-child(3) .card-bg { background-image: url('../assets/images/your-image3.jpg'); /* Replace with actual file name */ background-color: #666; } /* --- BUTTONS --- */ .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); cursor: pointer; z-index: 10; transition: background-color 0.2s, transform 0.2s; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; color: #333; } .carousel-btn:hover { background-color: #f4f4f4; transform: translateY(-50%) scale(1.05); } .btn-left { left: -25px; } .btn-right { right: 10px; } /* --- DOTS NAVIGATION --- */ .carousel-dots { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 10; width: auto; } .dot { width: 10px; height: 10px; background-color: #ddd; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .dot.active { background-color: #333; transform: scale(1.3); } /* ========================================= 7. FOOTER ========================================= */ .slim-footer { background-color: #ffffff; padding: 30px 40px; border-top: 1px solid #f0f0f0; } .footer-container { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; } /* --- LEFT SIDE (Takes up equal space) --- */ .footer-left { flex: 1; display: flex; justify-content: flex-start; } .footer-logo-text { font-weight: 700; font-size: 18px; letter-spacing: -0.5px; color: #111; } /* --- CENTER NAV (Dead Center) --- */ .footer-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 40px; background: transparent !important; } .footer-nav a { text-decoration: none; color: #555; font-weight: 600; font-size: 16px; transition: opacity 0.3s ease; background: none !important; width: 110px; text-align: center; display: inline-block; } .footer-nav a:hover { opacity: 0.5; background: none !important; } /* --- RIGHT SIDE (Takes up equal space) --- */ .footer-right { flex: 1; display: flex; justify-content: flex-end; gap: 25px; } .footer-right a { text-decoration: none; color: #111; font-weight: 600; font-size: 16px; transition: opacity 0.3s ease; } .footer-right a:hover { opacity: 0.5; } /* ========================================= TABLET & IPAD LANDSCAPE FIX ========================================= */ @media (max-width: 1366px) { /* 0. SAFETY NET: prevents scrolling */ html, body { overflow-x: hidden !important; } /* CONTAINER: Moves Text DOWN */ .hero-content { width: 100% !important; max-width: 100% !important; margin: 0 !important; /* Box Sizing keeps padding inside width */ box-sizing: border-box !important; padding-right: 30px; padding-top: 150px; } /* BACKGROUND */ #hero-section { height: 75vh !important; min-height: 600px; background-position: 20% center; } /* HEADLINE: Moved Right (50%) */ .hero-headline { font-size: 44px !important; margin-left: 50% !important; /* SMIDGE RIGHT */ text-align: left; width: auto; margin-bottom: 5px; line-height: 1.1; } /* SUBTITLE: Moved Right (50%) */ .hero-subtitle p { font-size: 26px !important; margin-left: 50% !important; /* SMIDGE RIGHT */ text-align: left; margin-bottom: 5px; } /* DETAILS: Moved Right (50%) */ .hero-details p { font-size: 20px !important; margin-left: 50% !important; /* SMIDGE RIGHT */ text-align: left; /* Tight vertical spacing */ line-height: 1.2 !important; margin-top: 0 !important; margin-bottom: 0 !important; display: block; } .hero-tech-stack p { margin-left: 50% !important; text-align: left; font-size: 14px !important; margin-top: 15px !important; margin-bottom: 15px !important; line-height: 1.4 !important; width: auto; } /* RESUME BUTTON: Moved Right (50%) */ .hero-resume { margin-left: 50% !important; /* SMIDGE RIGHT */ display: inline-block; margin-top: 0px !important; font-size: 20px !important; padding: 16px 20px 16px 65px; } .btn-icon { width: 38px; height: 38px; left: 15px; } .carousel-container { height: 480px !important; /* Increased to make room for dots */ position: relative; /* Anchors the dots */ margin-bottom: 0px; } #content-section { padding-bottom: 30px !important; min-height: auto !important; } /* TRACK: Swipe Enabled */ .carousel-track { display: flex; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; width: 100% !important; height: 90% !important; /* LEAVE SPACE AT BOTTOM for dots */ gap: 15px !important; transform: none !important; scrollbar-width: none; -ms-overflow-style: none; } .carousel-track::-webkit-scrollbar { display: none; } /* CARDS: Fit inside the 90% track */ .project-card { min-width: 85% !important; max-width: 85% !important; height: 100% !important; scroll-snap-align: center; margin: 0 auto !important; border-radius: 15px !important; } /* DOTS: Centered & Lowered into the gap */ .carousel-dots { display: flex !important; justify-content: center; /* Flex centering */ align-items: center; position: absolute !important; bottom: 5px !important; left: 50% !important; /* Pushes to middle */ transform: translateX(-50%) !important; /* PERFECTLY centers it */ width: auto !important; z-index: 20; padding: 0; margin: 0; } /* Optional: Ensure dots are visible */ .dot { width: 10px; height: 10px; margin: 0 6px; background-color: #ccc; border-radius: 50%; display: inline-block; } .dot.active { background-color: #333; /* Darker active color */ } /* BUTTONS: Vertically Centered */ .carousel-btn { display: flex !important; z-index: 30; top: 45% !important; /* Centered relative to the image */ } } /* ========================================= IPAD LANDSCAPE / TABLET FIX (Portfolio) ========================================= */ /* Target screens that are wide (tablets) but not quite desktop size */ @media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) { .portfolio-hero { justify-content: center !important; gap: 60px !important; } .hero-left { margin-left: 60px; max-width: 450px; } .hero-right { justify-content: flex-start !important; } /* Pulls the cards closer to the text above */ .philosophy-container { margin-bottom: 50px !important; } /* Optional: Ensure the grid itself doesn't have extra top margin */ .projects-grid { margin-top: 0 !important; } } .cycling-card { width: 100%; max-width: 500px; height: 350px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; overflow: hidden; background-color: #333; /* Fallback color */ will-change: background-image; transform: translateZ(0); backface-visibility: hidden; } /* The Individual Slide Images */ .slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; /* Start invisible */ opacity: 0; /* The Animation: Lasts 12s, loops forever */ animation: crossFade 12s infinite; } /* Ensure the text stays on top of the images */ .cycle-overlay { position: absolute; bottom: 20px; left: 20px; background: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 10; /* Lifts it above the images */ } /* Individual Slides with actual URLs */ .slide-1 { background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80'); animation-delay: 0s; } .slide-2 { background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80'); animation-delay: 4s; } .slide-3 { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'); animation-delay: 8s; } /* The New Animation (Changes Opacity, not Image) */ @keyframes crossFade { 0% { opacity: 0; } 5% { opacity: 1; } /* Fast fade in */ 33% { opacity: 1; } /* Stay visible for 4 seconds */ 38% { opacity: 0; } /* Fast fade out */ 100% { opacity: 0; } /* Stay invisible while others play */ } /* ========================================= ABOUT PAGE STYLES ========================================= */ .about-page-section { background: linear-gradient(to right, #ffffff 0%, #f0f0f0 100%); min-height: calc(100vh - 80px); padding-top: 110px; /* Space for the header */ padding-bottom: 70px; display: flex; justify-content: center; box-sizing: border-box; } .about-page-wrapper { max-width: 1400px; /* Limit width so text isn't too wide */ width: 95%; /* THE BIG CHANGE: Stack items vertically */ display: flex; flex-direction: column; align-items: center; /* Center everything */ gap: 40px; /* Space between Image and Text Box */ } /* --- THE IMAGE (Top) --- */ .about-image-container { position: relative; width: 100%; height: 400px; border-radius: 20px; overflow: hidden; background-image: url('../assets/images/techtint.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* THE BIG IMAGE (Background) */ .big-bg-img { width: 100%; height: 100%; object-fit: cover; /* Ensures it fills the box without stretching */ display: block; } /* THE GREY TINT */ .grey-tint { position: absolute; /* Floats on top */ top: 0; left: 0; width: 100%; height: 100%; /* The Tint Color: Black with 50% opacity creates a dark grey tint */ background-color: rgba(0, 0, 0, 0.5); z-index: 1; /* Sits above the background */ } /* THE PROFILE CUBE (Center) */ .profile-cube { position: absolute; /* Floats on top */ top: 50%; /* Move to middle vertical */ left: 50%; /* Move to middle horizontal */ /* centers it perfectly by pulling it back half its own size */ transform: translate(-50%, -50%); width: 180px; /* Size of the cube */ height: 180px; object-fit: cover; border-radius: 20px; border: 4px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.3); z-index: 2; } /* --- THE TEXT BOX (Bottom) --- */ .about-text-container { background-color: white; padding: 80px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.137); text-align: left; width: 100%; box-sizing: border-box; } .about-text-container h1 { font-size: 42px; margin-top: 0; margin-bottom: 20px; color: #111; text-align: center; /* Center the headline for impact */ } .about-text-container p { font-size: 18px; line-height: 1.8; /* Relaxed spacing for reading */ color: #555; margin-bottom: 25px; } /* Hobbies List */ .hobbies-list { list-style: none; padding: 0; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; /* Center the tags */ } .hobbies-list li { background-color: #f0f0f0; padding: 8px 16px; border-radius: 50px; font-size: 16px; font-weight: 600; color: #444; } /* Centered Button */ .about-resume-btn { display: block; /* Allows auto margins */ width: fit-content; margin: 0 auto; /* Centers button */ background-color: #111; color: white; text-decoration: none; padding: 15px 40px; font-size: 16px; font-weight: 600; border-radius: 50px; /* Pill shape */ transition: transform 0.2s; } .about-resume-btn:hover { transform: translateY(-3px); /* Little hop effect */ background-color: #333; } .dark-mode-nav { background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle divider line */ } /* --- RESPONSIVE: Stack on Mobile --- */ @media (max-width: 900px) { .about-page-wrapper { flex-direction: column; /* Stack them vertically */ text-align: center; } .about-text-container h1 { font-size: 36px; } .about-image-container img { margin-bottom: 30px; max-width: 300px; } } /* ========================================= PORTFOLIO PAGE STYLES ========================================= */ .portfolio-page-section { background: linear-gradient(to right, #ffffff 0%, #f0f0f0 100%); min-height: calc(100vh - 80px); padding-top: 110px; padding-bottom: 70px; display: flex; justify-content: center; box-sizing: border-box; } /* Restricts width so content doesn't stretch too wide on huge screens */ .content-wrapper { width: 100%; max-width: 1200px; padding: 0 20px; display: flex; flex-direction: column; } /* --- TOP HERO SECTION --- */ .portfolio-hero { display: flex; flex-wrap: wrap; /* Stacks on mobile */ align-items: center; justify-content: space-between; margin-bottom: 80px; gap: 40px; } .hero-left { flex: 1; min-width: 300px; } .hero-title { font-size: 5rem; font-weight: 800; margin: 0 0 20px 0; color: #111; letter-spacing: -2px; } .hero-desc { font-size: 1.1rem; line-height: 1.6; color: #555; max-width: 450px; margin-bottom: 30px; } .toggle-placeholder { display: flex; align-items: center; gap: 10px; font-weight: 600; } .toggle-switch { width: 40px; height: 20px; background: #333; border-radius: 20px; position: relative; } .toggle-switch::after { content: ''; position: absolute; width: 16px; height: 16px; background: white; border-radius: 50%; top: 2px; right: 2px; } /* --- CYCLING IMAGE CARD (RIGHT) --- */ .hero-right { flex: 1; min-width: 300px; display: flex; justify-content: center; } .cycling-card { width: 100%; max-width: 500px; height: 350px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; overflow: hidden; /* CSS ANIMATION FOR CYCLING IMAGES */ background-size: cover; background-position: center; animation: imageCycle 12s infinite; } @keyframes imageCycle { 0% { background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80'); } 33% { background-image: url('https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80'); } 66% { background-image: url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80'); } 100% { background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=80'); } } .cycle-overlay { position: absolute; bottom: 20px; left: 20px; background: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .cycle-overlay h3 { margin: 5px 0 0 0; font-size: 1.1rem; } .cycle-overlay p { margin: 0; font-size: 0.85rem; color: #666; } .cycle-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: #888; font-weight: bold;} /* --- PHILOSOPHY SECTION --- */ .philosophy-container { width: 100%; margin: 0 auto 60px auto; text-align: center; } .philosophy-label { display: flex; align-items: center; justify-content: center; width: 100%; font-size: 14px; font-weight: 800; color: #999; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; } .philosophy-label::before, .philosophy-label::after { content: ""; height: 2px; background-color: #ddd; flex-grow: 1; } .philosophy-label::before { margin-right: 20px; } .philosophy-label::after { margin-left: 20px; } .philosophy-text { font-weight: 600; font-size: 28px; line-height: 1.3; color: #111; margin: 0; padding: 0 5%; display: inline-block; max-width: 800px; } /* --- CARDS GRID --- */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); gap: 30px; width: 100%; margin-bottom: 0px; } .g-card { border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; min-height: 400px; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .g-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .g-card-image { height: 50%; width: 100%; background-size: cover; background-position: center; } .g-card-body { height: 50%; padding: 25px; display: flex; flex-direction: column; } .g-card-body h2 { font-size: 1.8rem; margin: 0; font-weight: 400; color: #202124; line-height: 1.2; } .card-subtitle { margin-top: 5px; margin-bottom: 0; font-size: 1rem; color: #444; font-weight: 500; } /* --- THEME COLORS --- */ /* BLUE THEME */ .card-blue .g-card-body { background-color: #d2e3fc; } .card-blue .g-btn { background-color: #1967d2; color: white; } .card-blue .g-btn:hover { background-color: #174ea6; } /* YELLOW THEME */ .card-yellow .g-card-body { background-color: #fce8b2; } .card-yellow .g-btn { background-color: #e37400; color: white; } .card-yellow .g-btn:hover { background-color: #d56a00; } /* RED THEME */ .card-red .g-card-body { background-color: #fad2cf; } .card-red .g-btn { background-color: #d93025; color: white; } .card-red .g-btn:hover { background-color: #b31412; } /* GREEN THEME */ .card-green .g-card-body { background-color: #ceead6; } .card-green .g-btn { background-color: #188038; color: white; } .card-green .g-btn:hover { background-color: #137333; } .g-btn { align-self: flex-start; margin-top: auto; text-decoration: none; padding: 10px 24px; border-radius: 50px; font-weight: 500; font-size: 0.95rem; transition: background-color 0.2s; } /* ========================================= TABLET & IPAD PORTRAIT ONLY ========================================= */ @media (max-width: 1024px) and (orientation: portrait) { /* BACKGROUND: "GOLDILOCKS" FRAMING */ #hero-section { background-position: -200px center !important; background-size: cover !important; } /* ABOUT PAGE IMAGE */ .about-image-container { position: relative; width: 100%; height: 380px !important; border-radius: 20px; overflow: hidden; display: block; margin-bottom: 20px; background-color: #333; } .big-bg-img { width: 100%; height: 100%; object-fit: cover !important; object-position: center !important; display: block; } .grey-tint { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .profile-cube { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* HEADER: Restore Normal Spacing */ nav { display: flex !important; justify-content: space-between !important; align-items: center !important; height: 80px !important; padding: 0 30px !important; } .nav-left, .nav-right { flex: 1; gap: 20px !important; } .nav-left a, .nav-right a { font-size: 15px !important; } .social-icon { width: 22px !important; height: 22px !important; } .nav-center { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; display: flex !important; } #logo { font-size: 32px !important; margin: 0 !important; } /* PROJECT CARD: Shrink Text for the Frame */ .card-details h3 { font-size: 22px !important; margin-bottom: 8px !important; } .description { font-size: 14px !important; line-height: 1.5 !important; } /* FOOTER: Normal Spread (No Stacking) */ .slim-footer { padding: 40px 30px !important; } .footer-container { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; } .footer-left, .footer-right { flex: 1; } .footer-nav { flex: 2; display: flex !important; justify-content: center !important; gap: 25px !important; position: static !important; transform: none !important; } .footer-nav a, .footer-right a { font-size: 15px !important; white-space: nowrap !important; } /* HERO CONTENT: Portrait-specific adjustments */ .hero-content { padding-top: 150px !important; padding-left: 55% !important; /* MOVED RIGHT: Increased from 50% */ padding-right: 30px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 8px !important; } /* TURNED DOWN SHADOWS: Reduced blur and opacity for a cleaner look */ .hero-headline { font-size: 54px !important; line-height: 1.1 !important; margin-left: 0 !important; max-width: 100% !important; text-align: left !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.63) !important; } .hero-subtitle p { font-size: 32px !important; margin: 0 !important; font-weight: 600 !important; text-align: left !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6) !important; } .hero-details p { font-size: 22px !important; max-width: 90% !important; line-height: 1.4 !important; margin: 5px 0 5px 0 !important; text-align: left !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6) !important; } .hero-resume { margin-top: 0px !important; margin-left: 0 !important; text-align: left !important; } .hero-tech-stack { margin-top: 0px !important; text-align: left !important; } .hero-tech-stack p { font-size: 16px !important; line-height: 1.6 !important; margin-left: 0 !important; text-align: left !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6) !important; } } /* ========================================= TABLET & IPAD LANDSCAPE ONLY ========================================= */ @media (max-width: 1366px) and (orientation: landscape) { /* 1. SECTION: Shorter background height */ #hero-section { height: 80vh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background-position: center top !important; background-size: cover !important; padding: 0 !important; } /* 2. HERO CONTENT: Shifted further Right and Up */ .hero-content { padding-top: 0 !important; padding-left: 220px !important; /* MOVED RIGHT: Increased from 140px */ padding-right: 40px !important; margin-left: 0 !important; margin-top: -80px !important; /* Adjusted vertical lift */ text-align: left !important; max-width: 1400px !important; /* Widened for massive text */ display: block !important; box-sizing: border-box !important; } /* 3. TYPOGRAPHY: Even larger font sizes */ .hero-headline { font-size: 180px !important; /* INCREASED A LOT (was 130px) */ line-height: 0.85 !important; margin: 0 0 15px 0 !important; text-align: left !important; } .hero-subtitle p { font-size: 90px !important; /* INCREASED A LOT (was 65px) */ text-align: left !important; line-height: 1.0 !important; margin: 0 !important; } .hero-details p { font-size: 55px !important; /* INCREASED (was 40px) */ line-height: 1.1 !important; margin: 20px 0 0 0 !important; text-align: left !important; } /* 4. TECH STACK: Re-aligned and sized */ .hero-tech-stack p { font-size: 32px !important; /* INCREASED (was 24px) */ text-align: left !important; margin-top: 60px !important; margin-bottom: 0 !important; margin-left: 0 !important; } /* 5. BUTTON: Scaled to match huge text */ .hero-resume { margin-left: 0 !important; text-align: left !important; display: inline-block !important; /* Scaled up more to stay proportional to text */ transform: scale(1.8) !important; transform-origin: left top !important; margin-top: 10px !important; } /* Enhanced Shadows for High-Impact Visibility */ .hero-headline, .hero-subtitle p, .hero-details p, .hero-tech-stack p { text-shadow: 0px 6px 30px rgba(0, 0, 0, 0.6) !important; } } /* ========================================= IPHONE PORTRAIT ONLY (Standard & Max) ========================================= */ @media (max-width: 480px) and (orientation: portrait) { /* HEADER: Centered Logo + Hidden Side Links */ nav { padding: 0 15px !important; height: 70px !important; } .nav-left, .nav-right { display: none !important; } .nav-center { position: relative !important; left: 0 !important; transform: none !important; width: 100% !important; display: flex !important; justify-content: center !important; } #logo { font-size: 26px !important; } /* PROJECT CARDS: Rebalanced Proportions */ .project-card { flex-direction: column !important; height: auto !important; width: 92% !important; /* Slightly wider to give text more room */ margin: 0 auto !important; } .card-image-wrapper { width: 100% !important; height: 100px !important; /* Slightly taller for better framing */ } /* SHRUNKEN CARD TEXT DETAILS */ .card-details { width: 100% !important; padding: 12px 15px 18px 15px !important; /* Tightened padding */ border-radius: 0 0 20px 20px !important; box-sizing: border-box !important; } .card-details h3 { font-size: 15px !important; /* Shrunk title */ margin-bottom: 2px !important; line-height: 1.2 !important; } .card-details .tech-stack { font-size: 7px !important; /* Shrunk tech labels */ margin-bottom: 6px !important; letter-spacing: 0.5px !important; } .card-details .description { font-size: 9px !important; /* Shrunk description for readability */ line-height: 1.3 !important; margin-bottom: 10px !important; } .card-details .view-project { font-size: 11px !important; /* Shrunk link */ padding-bottom: 1px !important; } /* HERO CONTENT */ #hero-section .hero-content { padding-top: 120px !important; padding-left: 50% !important; padding-right: 20px !important; align-items: flex-start !important; text-align: left !important; } .hero-headline { font-size: 28px !important; line-height: 1.1 !important; } .hero-subtitle p { font-size: 18px !important; } .hero-details p { font-size: 14px !important; } .hero-tech-stack p { font-size: 12px !important; } /* Stronger text shadows for iPhone portrait */ .hero-headline, .hero-subtitle p, .hero-details p, .hero-tech-stack p { text-shadow: 2px 2px 15px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 0.8) !important; } /* FOOTER: Shrunken Horizontal Center with Socials */ .slim-footer { padding: 20px 0 !important; } .footer-container { flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 15px !important; } .footer-left { display: none !important; } .footer-nav { position: static !important; transform: none !important; display: flex !important; flex-direction: row !important; justify-content: center !important; gap: 20px !important; } .footer-nav a { font-size: 12px !important; } .footer-right { display: flex !important; justify-content: center !important; gap: 20px !important; } .footer-right .social-icon { width: 20px !important; height: 20px !important; } } /* ========================================= IPHONE LANDSCAPE (13 Pro Max & Standard) ========================================= */ @media (max-device-width: 932px) and (orientation: landscape) { /* 0. PARENT CONSTRAINTS: Forces full-bleed width */ html, body { width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } /* 1. FILL THE SCREEN: Fixes the gap on Pro Max */ #hero-section { height: 100vh !important; min-height: 100vh !important; width: 100vw !important; background-position: center center !important; background-size: cover !important; background-attachment: scroll !important; position: relative !important; left: 0 !important; } /* 2. PC-STYLE TEXT LAYOUT: Updated padding and alignment */ #hero-section .hero-content { padding-top: 120px !important; padding-left: 45% !important; padding-right: 40px !important; max-width: none !important; margin-left: 0 !important; display: block !important; text-align: left !important; } .hero-headline { font-size: 36px !important; line-height: .9 !important; font-weight: 590 !important; margin-bottom: 5px !important; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6) !important; } .hero-subtitle p { font-size: 22px !important; font-weight: 530 !important; word-spacing: 2px !important; margin-top: 5px !important; margin-bottom: 5px !important; line-height: 1.1 !important; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6) !important; } .hero-details p { font-size: 16px !important; font-weight: 550 !important; line-height: 1.2 !important; word-spacing: 2px !important; margin-top: 10px !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6) !important; } .hero-tech-stack p { font-size: 12px !important; font-weight: 600 !important; word-spacing: 2px !important; color: #ffffffd0 !important; margin-top: 1px !important; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8) !important; } /* Resume Button: Scaled for screen height */ .hero-resume { transform: scale(0.65) !important; transform-origin: left !important; margin-top: 1px !important; } /* PROJECT CARDS: Shrunk inner text for mobile landscape carousel */ .card-details { padding: 15px 25px !important; /* Tighter padding for horizontal view */ } .card-details h3 { font-size: 18px !important; margin-bottom: 4px !important; } .card-details .tech-stack { font-size: 9px !important; margin-bottom: 8px !important; } .card-details .description { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 12px !important; } /* Footer Clean-up */ .footer-left { display: none !important; } .slim-footer { padding: 10px 20px !important; } }