/* ========== LIGHT MODE + DARK MODE VARIABLES ========== */ /* Light mode variables (your current colors) */ :root { --bg-color: #f5f7fb; --font-family: sans-serif; /* top bar / surfaces */ --topbar-bg: rgba(255,255,255,0.85); --border-color: #e6eaef; --shadow-weak: rgba(10, 20, 40, 0.06); /* text & muted */ --muted-gray: #6b7280; --text-color: #1a272b; --muted-text: #555555; --muted-light: #a5a5a5; /* accents & gradients */ --accent-blue: #007BFF; --brand-gradient: linear-gradient(45deg, cyan, rgba(0, 34, 255, 0.75), magenta); --hero-button-gradient: linear-gradient(40deg, cyan, rgba(0, 34, 255, 0.6), magenta); --greet-gradient: linear-gradient(rgba(0, 140, 255), rgba(0, 150, 250)); --skills-h4-gradient: linear-gradient(45deg, #00D0D0, rgba(0, 34, 255, 0.75), #FF00FF); /* brand shadows */ --brand-box-shadow: rgba(120,120,120,0.12); --brand-hover-shadow: rgba(0, 200, 255, 0.25); /* nav / menu */ --nav-hover-text: #333333; --mobile-menu-bg: rgba(255, 255, 255, 0.95); --mobile-menu-shadow: rgba(0, 0, 0, 0.06); --menu-bar-bg: rgba(0, 123, 255, 0.08); --mobile-menu-hover-bg: rgba(0, 123, 255, 0.12); /* hero surface */ --hero-bg-gradient: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,253,255,1)); --hero-border: #e6eaef; --hero-brand-shadow: rgba(0,0,0,0.12); /* photo */ --my-photo-gradient: linear-gradient(45deg, rgba(0, 255, 255, 0.6), rgba(0, 34, 255, 0.6), rgba(255, 0, 255, 0.6)); --my-photo-hover-shadow: rgba(4, 211, 255, 0.08); --my-photo-border: #f5f7fb; /* cards */ --card-bg: #ffffff; --card-shadow: rgba(0, 0, 0, 0.06); --card-hover-shadow: rgba(0, 123, 255, 0.12); --img-drop-shadow: rgba(0, 0, 0, 0.12); /* about */ --about-text: rgba(85, 85, 85, 0.95); --about-text-strong: rgba(85, 85, 85, 0.98); /* contacts & buttons */ --contacts-accent: #007BFF; --connect-me-bg: #f9fbff; --connect-me-box-shadow: rgba(0, 0, 0, 0.06); --button-bg: #007BFF; --button-text: #ffffff; --button-hover-bg: #FFFFFF; /* inputs */ --input-border: #5a5a5a; --input-text: #555555; --input-bg: #FFFFFF; --input-focus-border: #007BFF; /* contact panel */ --contact-me-bg: #007BFF; --contact-me-text: #FFFFFF; --contact-icon-bg: rgba(0, 123, 255, 0.18); --contact-icon-border: rgba(255, 255, 255, 0.5); --contact-icon-shadow: rgba(255, 255, 255, 0.08); --contact-link-color: #FFFFFF; --contact-link-hover: rgba(255, 255, 255, 0.7); /* media / responsive extras */ --responsive-shadow: rgba(0, 0, 0, 0.08); --contacts-border-bottom: rgba(85, 85, 85, 0.12); /* footer */ --footer-border: #d1d9ea; --footer-bg: #0b63d9; --footer-text: #FAFAFF; --footer-link: #e6eefc; --footer-link-plain: #FFFFFF; --social-bg: rgba(255,255,255,0.16); --social-border: rgba(255,255,255,0.38); --social-shadow: rgba(255,255,255,0.12); /* miscellaneous */ --white: #ffffff; --muted-gray-2: #6b7280; /* duplicate muted alias */ } /* DARK MODE - toggle with data-theme="dark" on */ :root[data-theme="dark"] { --bg-color: #0d1117; --topbar-bg: rgba(22, 27, 34, 0.85); --border-color: #30363d; --shadow-weak: rgba(0,0,0,0.6); --text-color: #e6edf3; --brand-box-shadow: rgba(0,0,0,0.5); --brand-hover-shadow: rgba(0,150,255,0.18); --nav-hover-text: #cbd5e1; --mobile-menu-bg: rgba(12, 16, 24, 0.95); --mobile-menu-shadow: rgba(0,0,0,0.6); --menu-bar-bg: rgba(0, 123, 255, 0.06); --mobile-menu-hover-bg: rgba(0, 123, 255, 0.08); --hero-bg-gradient: linear-gradient(180deg, #0f1622, #111a28); --hero-border: #1f2937; --hero-brand-shadow: rgba(0,0,0,0.6); --my-photo-hover-shadow: rgba(0, 140, 255, 0.08); --my-photo-border: #0d1117; --card-bg: #111621; --card-shadow: rgba(0,0,0,0.6); --card-hover-shadow: rgba(0,123,255,0.08); --img-drop-shadow: rgba(0,0,0,0.6); --about-text: rgba(230, 236, 245, 0.92); --about-text-strong: rgba(235, 240, 248, 0.98); --contacts-accent: #4da6ff; --connect-me-bg: #0f1622; --connect-me-box-shadow: rgba(0,0,0,0.6); --button-bg: linear-gradient(45deg, #00e0ff, rgba(0, 34, 255, 0.85), #ff00ff); --button-text: #0b1220; --input-border: #2b3440; --input-text: #dbe7f7; --input-bg: #0f1622; --contact-icon-bg: rgba(0, 123, 255, 0.12); --contact-icon-border: rgba(255,255,255,0.06); --contact-icon-shadow: rgba(255,255,255,0.02); --contact-link-color: #e6edf8; --contact-link-hover: rgba(230,230,255,0.7); --responsive-shadow: rgba(0,0,0,0.6); --contacts-border-bottom: rgba(255,255,255,0.03); --footer-border: #0b1740; --footer-bg: #06102a; --footer-text: #dce9ff; --footer-link: #6fa7ff; --footer-link-plain: #dce9ff; --social-bg: rgba(255,255,255,0.04); --social-border: rgba(255,255,255,0.06); --social-shadow: rgba(0,0,0,0.6); } @media (prefers-color-scheme:dark) { :root{ --bg-color: #0d1117; --topbar-bg: rgba(22, 27, 34, 0.85); --border-color: #30363d; --shadow-weak: rgba(0,0,0,0.6); --text-color: #e6edf3; --brand-box-shadow: rgba(0,0,0,0.5); --brand-hover-shadow: rgba(0,150,255,0.18); --nav-hover-text: #cbd5e1; --mobile-menu-bg: rgba(12, 16, 24, 0.95); --mobile-menu-shadow: rgba(0,0,0,0.6); --menu-bar-bg: rgba(0, 123, 255, 0.06); --mobile-menu-hover-bg: rgba(0, 123, 255, 0.08); --hero-bg-gradient: linear-gradient(180deg, #0f1622, #111a28); --hero-border: #1f2937; --hero-brand-shadow: rgba(0,0,0,0.6); --my-photo-hover-shadow: rgba(0, 140, 255, 0.08); --my-photo-border: #0d1117; --card-bg: #111621; --card-shadow: rgba(0,0,0,0.6); --card-hover-shadow: rgba(0,123,255,0.08); --img-drop-shadow: rgba(0,0,0,0.6); --about-text: rgba(230, 236, 245, 0.92); --about-text-strong: rgba(235, 240, 248, 0.98); --contacts-accent: #4da6ff; --connect-me-bg: #0f1622; --connect-me-box-shadow: rgba(0,0,0,0.6); --button-bg: linear-gradient(45deg, #00e0ff, rgba(0, 34, 255, 0.85), #ff00ff); --button-text: #0b1220; --input-border: #2b3440; --input-text: #dbe7f7; --input-bg: #0f1622; --contact-icon-bg: rgba(0, 123, 255, 0.12); --contact-icon-border: rgba(255,255,255,0.06); --contact-icon-shadow: rgba(255,255,255,0.02); --contact-link-color: #e6edf8; --contact-link-hover: rgba(230,230,255,0.7); --responsive-shadow: rgba(0,0,0,0.6); --contacts-border-bottom: rgba(255,255,255,0.03); --footer-border: #0b1740; --footer-bg: #06102a; --footer-text: #dce9ff; --footer-link: #6fa7ff; --footer-link-plain: #dce9ff; --social-bg: rgba(255,255,255,0.04); --social-border: rgba(255,255,255,0.06); --social-shadow: rgba(0,0,0,0.6); } #toggle p{ margin-left: 20px !important; } #toggle p:after{ content: '🌑' !important; } } /* ========== ORIGINAL CSS (colors replaced by variables only) ========== */ *{ transition: all 0.3s ease-out; } html{ scroll-behavior: smooth; transition: all 0.001s ease-in; } body { background-color: var(--bg-color); /* soft neutral white */ font-family: var(--font-family); box-sizing: border-box; margin: 0; padding: 0; } a { -webkit-tap-highlight-color: transparent; -webkit-focus-ring-color: transparent; outline: none; text-decoration: none; } .top-bar { position: fixed; left: 0; right: 0; top: 0; height: 50px; width: 100%; background: var(--topbar-bg); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(8px); box-shadow: 0 6px 28px var(--shadow-weak); display: flex; align-items: center; z-index: 999; } #info-bar { font-size: 8px; text-align: left; color: var(--muted-gray); /* muted gray */ } #info-bar span { font-size: 10px; font-weight: 600; color: var(--accent-blue); /* primary accent */ } /* RESTORED ORIGINAL GRADIENT */ .brand { margin: 7.5px; padding: 0; width: 35px; height: 35px; border-radius: 5px; background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; opacity: 0.95; box-shadow: 0 0 4px var(--brand-box-shadow); transition: all 0.3s ease-in; } .brand:hover { transform: scale(1.02); box-shadow: 0 1px 5px var(--brand-hover-shadow); } .brand p { text-align: center; color: var(--white); font-size: calc(120%); font-weight: 500; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } nav{ margin-left: auto; margin-right: 50px; padding: 0; font-size: 13px; font-weight: 500; display: none; gap: 40px; } nav a{ color: var(--accent-blue); position: relative; transition: all 0.3s ease-in ; } nav a:after{ content: ""; position: absolute; left: 0; top: 18px; background-color: var(--accent-blue); width: 0; height: 1.5px; transition: all 0.3s ease-in; } nav a:hover::after{ width: 100%; } nav a:hover{ color: var(--nav-hover-text); } #toggle{ width: 35px; height: 15px; background-color: transparent; border-radius: 20px; display: flex; align-items: center; position: relative; border: 1px solid var(--accent-blue); } #toggle p{ position: absolute; transition: all 0.15s ease; margin-left: 2px; font-size: 11px; } #toggle p:after{ content: '🌕'; } #toggle input{ width: 100%; height: 100%; opacity: 0; z-index: 2; } #toggle input:checked + p{ margin-left: 20px; } #toggle input:checked + p:after{ content: '🌑'; } #menu-btn { display: inline-block; all: unset; margin-left: auto; margin-right: 5px; width: 30px; height: 30px; font-weight: 100; color: var(--muted-light); transition: all 0.2s ease-out; } #menu-btn:active { transform: scale(1.1); } #mobile-menu { z-index: 1000; height: 100vh; width: 200px; margin: 0; padding: 0; position: fixed; right: -250px; top: 0; border-top-left-radius: 5px; background-color: var(--mobile-menu-bg); backdrop-filter: blur(8px); box-shadow: 0 0 5px var(--mobile-menu-shadow); overflow: scroll; } #mobile-menu #menu-bar { display: flex; align-items: center; height: 40px; border-top-left-radius: 5px; background-color: var(--menu-bar-bg); } #menu-bar p { font-size: 15px; margin: 20px; font-weight: 500; color: var(--text-color); } #menu-bar #close { all: unset; margin-left: auto; margin-right: 10px; font-size: 25px; color: var(--muted-light); } #mobile-menu a { font-weight: 600; font-size: 14px; margin: 20px; color: var(--text-color); display: block; padding: 10px; border-radius: 5px; transition: all 0.2s ease-out; } #mobile-menu a:hover { background-color: var(--mobile-menu-hover-bg); } @keyframes openMenu { 0% { transform: translateX(100%); /* completely off-screen */ opacity: 0; } 100% { transform: translateX(0); /* slide into place */ opacity: 1; } } @keyframes close { 0% { right: 0px; } 20% { right: 0px; } 100% { right: -250; } } @keyframes open { 0% { right: -250px; } 100% { right: 0; width: 200px; } } .main { margin-top: 50px; display: flex; align-items: center; flex-direction: column; } .hero-section, .about-section { width: 100vw; display: flex; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; padding-top: 30px; padding-bottom: 60px; } .hero-section { background: var(--hero-bg-gradient); width: 100vw; border-bottom: 1px solid var(--hero-border); } /* KEEP BRAND-LIKE GRADIENT IN HERO AS ORIGINAL STYLE */ .hero-section .brand { width: 80px; height: 80px; border-radius: 50%; font-size: 30px; box-shadow: 0 0 10px var(--hero-brand-shadow); background: var(--brand-gradient); } .hero-section #greet { margin-top: 20px; margin-bottom: 10px; font-size: 35px; font-weight: 510; text-align: Center; color: var(--text-color); } /* RESTORED ORIGINAL GREET TEXT GRADIENT */ #greet span { font-size: 40px; background: var(--greet-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .works { font-size: 15px; margin-bottom: 25px; padding: 0; color: var(--muted-text); } /* RESTORED ORIGINAL HERO BUTTON GRADIENT */ .hero-section a { display: flex; align-items: center; justify-content: center; background: var(--hero-button-gradient); color: var(--white); border: 1px solid transparent; opacity: 0.95; height: 35px; width: 170px; border-radius: 5px; text-align: center; font-size: 15px; font-weight: 500; transition: all 0.3s ease-in; } .hero-section a:hover { color: var(--accent-blue); border: 1px solid var(--accent-blue); background: none; } .hero-section a:active { transition: all 0.3s ease-out; transform: scale(1.1); } .about-section { padding-bottom: 0; padding-top: 60px; } /* RESTORED ORIGINAL MY-PHOTO GRADIENT */ .my-photo { background: var(--my-photo-gradient); align-items: center; justify-content: center; display: flex; height: 112px; width: 112px; padding: 0; border-radius: 50%; transition: all 0.5s ease-out; } .my-photo:hover { transform: translateY(-2px); box-shadow: 0px 5px 8px var(--my-photo-hover-shadow); } .my-photo img { border-radius: 50%; margin: 0; padding: 0; border: 3px solid var(--my-photo-border); } .about-section h2 { padding: 15px; margin: 0; font-weight: 900; font-size: 18px; text-align: Center; color: var(--accent-blue); } .about-section p { width: 80%; font-size: 15px; color: var(--about-text); font-weight: 400; margin: 0; padding: 0; line-height: 20px; letter-spacing: 0.6px; } .about-section p span { font-weight: bold; color: var(--about-text-strong); } #about-info { padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 30px; } /* RESTORED ORIGINAL SKILLS H4 GRADIENT */ .skills-section h4 { background: var(--skills-h4-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: underline 2px solid var(--accent-blue); text-underline-offset: 8px; } .skills-section { display: flex; align-items: center; flex-direction: column; margin-top: 10; padding-top: 50px; } .skills-section h3 { color: var(--accent-blue); padding-bottom: 10px; margin-bottom: 0; transition: all 0.3s ease-out; } .cards { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; padding: 20px; width: calc(100vw - 40px); } .skill-card { display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 10px; width: calc(100vw - 80px); height: 140px; background-color: var(--card-bg); border-radius: 10px; box-shadow: 0px 0px 8px var(--card-shadow); transition: all 0.3s ease-out; padding: 20px; } .skill-card:hover { transform: translateY(-10px) scale(0.95); box-shadow: 0px 0px 8px var(--card-hover-shadow); } .skill-card:hover { transform: translateY(-10px) scale(0.95); box-shadow: 0px 0px 8px var(--card-hover-shadow); } .skill-card img { margin: 0; filter: drop-shadow(1px 1px 15px var(--img-drop-shadow)); height: auto; width: 40px; transition: all 0.3s ease; } .skill-card img:hover{ transform: scale(1.1) translateY(5px); } .skill-card .name { font-weight: bold; font-size: 15px; margin: 0; color: var(--text-color); } .skill-card .skill-info { color: var(--muted-gray); font-size: 14px; margin: 10px; } .contacts-section{ margin-top: 100px; padding: 0; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; transition: all 0.3s ease-out; width: 100vw; color: var(--contacts-accent); } .contacts-section .connect-me{ width: 100vw; display: flex; align-items: center; flex-direction: column; background-color: var(--connect-me-bg); border-radius: 20px 20px 0px 0px ; box-shadow: 0px 0px 8px var(--connect-me-box-shadow); padding-bottom: 60px; } .connect-me button{ background-color: var(--accent-blue); border: none; border-radius: 5px; color: var(--button-text); width: 320px; height: 40px; margin-top: 15px; font-weight: 600; transition: all 0.3s ease-out; } .connect-me button:hover{ background-color: transparent; color: var(--accent-blue); border: 1px solid var(--accent-blue); } .connect-me button:active{ transform: scale(1.05); } .connect-me input,textarea{ width: 300px; height: 20px; padding: 10px; border-radius: 10px; outline: none; border: 1px solid var(--input-border); color: var(--input-text); background-color: var(--input-bg); transition: all 0.2s linear; } .connect-me textarea{ height: 100px; } .connect-me input:focus,textarea:focus{ border: 0.5px solid var(--input-focus-border); } .contacts-section .contact-me{ background-color: var(--contact-me-bg); color: var(--contact-me-text); width: 100vw; padding: 0px 0px 20px 0px; display: flex; flex-direction: column; } .contact-me .contacts{ display: flex; flex-direction: column; gap: 25px; } .contact-me .contact{ display: flex; align-items: center; justify-content: flex-start; text-align: left; line-height: 25px; font-size: 15px; gap: 15px; padding: 0; margin: 0; margin-left: 20px; transition: all 0.1s ease; } .contact .contact-icon{ background-color: var(--contact-icon-bg); border: 0.5px solid var(--contact-icon-border); box-shadow: 0 0 5px var(--contact-icon-shadow); display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: 50px; } .contact-icon img{ height: 20px; width: 20px; } .contact p{ padding: 0; margin: 0; } .contact a{ color: var(--contact-link-color); font-size: 14px; } .contact a:hover{ color: var(--contact-link-hover); } h4{ transition: all 0.3s ease-out; } h4:hover{ transform: scale(0.95); } @media (orientation:landscape) and (min-height:800px){ .hero-section{ height: 100vh; } } @media (min-width:600px){ nav{ display: flex; } #menu-btn{ display: none !important; } .cards{ flex-direction: row; } .contacts-section{ flex-direction: row; border-radius: 20px 20px 0px 0px; box-shadow: 0px -4px 8px var(--responsive-shadow); border-bottom: 1.2px solid var(--contacts-border-bottom); } .contacts-section .connect-me{ padding-top: 40px; height: 400px; border-top-right-radius: 0px; box-shadow: none; } .contacts-section .contact-me{ border-top-right-radius: 20px; width: 600px; height: 480px; border-right: 20px; align-items: center; } .contacts-section .connect-me h3{ color: var(--contacts-accent); margin-top: 20px; padding-bottom:20px; } .contact-me h3{ margin-top: 60px; padding-bottom: 20px; } .contact-me:hover ,.connect-me:hover{ transition: all 0.3s ease; box-shadow: 0px -5px 8px var(--contact-me-hover-shadow); } } footer{ border-top: 1px solid var(--footer-border); background-color: var(--footer-bg); max-width: 100vw; width: 100vw; display: flex; gap: 5px; align-items: center; flex-direction: column; padding-top: 20px; padding-bottom: 20px; color: var(--footer-text); } footer p{ font-size: 12px; } footer .social-medias{ display: flex; align-items:center; justify-content: center; gap: 12px; padding: 10px; } footer .foot-links{ display: flex; justify-content: center; gap: 10px; font-size: 15px; margin-top: 10px; color: var(--footer-link) ; } footer .foot-links a{ color: var(--footer-link-plain) ; } .social-medias:hover + a, .contact:hover{ transform: scale(1.05); } .social-medias a{ transition: all 0.1s ease; width: 10px; height: 10px; background-color: var(--social-bg); border: 1px solid var(--social-border); box-shadow: 0 0 5px var(--social-shadow); display: flex; align-items: center; justify-content: center; border-radius: 30px; padding: 12px; }