/* Light mode dropdown button color */ /* Target dropbtn only in light mode and small screens */ /* Footer container background for light mode */ .light .footer { background: var(--menubar-bg); box-shadow: 0 -2px 8px rgba(36,35,36,0.04); border-radius: 20px 20px 0 0; padding: 24px 0; } /* Responsive navigation and dropdown styles */ @media (max-width: 900px) { .light .dropbtn { background: #000 !important; color: #fff !important; border: none; } .nav-button { display: none !important; } .dropdown { display: inline-block !important; } .dropbtn { display: flex; align-items: center; justify-content: center; background: var(--button-bg); color: var(--button-text); border: none; border-radius: 50%; padding: 0; width: 44px; height: 44px; font-size: 22px; box-sizing: border-box; transition: background 0.2s; } .dropdown-content { min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.08); background: var(--surface); border-radius: 8px; } .dropdown-content a { color: var(--text); padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background: rgba(14,165,164,0.06); } .nav-item img[alt="logo"] { width: 56px !important; height: auto !important; transition: width 0.2s; } .dropbtn img { width: 24px !important; height: 24px !important; margin: 0 auto; display: block; } } @media (min-width: 901px) { .nav-button { display: flex; } .dropdown { display: none; } } /* Button click flash effect */ .btn-flash { position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; background: radial-gradient(circle, #fff 0%, transparent 70%); opacity: 0.7; transform: translate(-50%, -50%) scale(1); pointer-events: none; border-radius: 50%; z-index: 2; animation: flash 0.35s cubic-bezier(.4,0,.2,1); } /* Shared theme for The Mediocre Company - clean modern look */ /* Default (original) theme — dark palette to match the site's original look */ :root{ --bg: #332828; /* page background */ --surface: rgb(36, 35, 36); /* container/footer background */ --muted: #9da3a6; /* muted text */ --text: #ffffff; /* primary text on dark bg */ --accent: #332828; /* primary button bg (original) */ --accent-2: #0075ff; /* blue accent / hover */ --button-bg: #332828; /* original button background */ --button-text: #ffffff; /* original button text color for dark mode */ --button-border: 2px solid #0075ff; /* original button border */ } /* Light theme override — applied when .light is present on */ .light{ --bg: #f7fafc; --surface: #ffffff; --menubar-bg: #f3f4f8; /* Menubar container background for light mode */ .light .container { background: var(--menubar-bg); box-shadow: 0 2px 8px rgba(36,35,36,0.04); } --muted: #64748b; --text: #0f1724; --accent: #0ea5a4; --accent-2: #0369a1; --button-bg: #ffffff; --button-text: #0f1724; --button-border: 2px solid #0369a1; } /* Fonts */ @font-face { font-family: 'Nunito'; src: url('../Fonts/static/Nunito-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito'; src: url('../Fonts/static/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* light variables are defined in the .light class above */ /* Theme toggle icon styles */ .theme-toggle { background: none; border: none; padding: 0.5em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 240ms; } .theme-icon { color: #ffe066; /* moon yellow for dark */ transition: color 240ms; } .theme-icon .moon { opacity: 1; transition: opacity 240ms; } .theme-icon.light { color: #0369a1; /* sun blue for light */ } .theme-icon.light .moon { opacity: 0.2; } *{box-sizing: border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition: background-color 240ms ease, color 240ms ease; } .container{ /* Revert container to original structure/spacing */ background: var(--surface); margin: 30px; padding: 30px; padding-bottom: 20px; border-radius: 20px; border: var(--container-border, 2px solid #0075ff); } .nav-list{display:flex;align-items:center;gap:8px;padding:0;margin:0} .nav-list li{list-style:none} .nav-list img{display:block;height:36px} .nav-button{margin-left:auto;display:flex;gap:12px;align-items:center} .nav-button a { color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 20px; font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-weight: 700; } .nav-button a:hover { background: rgba(14,165,164,0.08); color: var(--accent-2); } /* Theme toggle button */ .theme-toggle{background:transparent;border:1px solid rgba(15,23,36,0.06);padding:6px 10px;border-radius:8px;cursor:pointer} .light .theme-toggle{border-color:rgba(2,6,23,0.06)} .dropdown{position:relative} .dropdown .dropbtn{background:transparent;border:none;padding:6px} .dropdown-content{display:none;position:absolute;right:0;background:var(--surface);box-shadow:0 6px 18px rgba(2,6,23,0.08);border-radius:8px;padding:8px;z-index:100} .dropdown:hover .dropdown-content,.dropbtn[aria-expanded="true"] + .dropdown-content{display:block} .dropdown-content a{display:block;padding:6px 12px;color:var(--text);text-decoration:none} .dropdown-content a:hover{background:rgba(14,165,164,0.06)} .mid-content,.mid-2{max-width:1200px;margin:30px auto;display:flex;gap:24px;align-items:center} .content{flex:1} .content-heading{margin:0 0 12px 0} .content h3{color:var(--accent-2);font-size:2rem} .content p{color:var(--muted);line-height:1.6} /* Buttons: keep original shape and look by default, adapt colors via variables */ button { background: var(--button-bg); color: var(--button-text); border: var(--button-border); border-radius: 20px; padding: 0.6em 1.2em; font-family: inherit; font-size: 1em; font-weight: 700; cursor: pointer; transition: background 220ms, color 220ms, box-shadow 220ms; position: relative; overflow: hidden; } button:hover, .button-1:hover, .button-2:hover, .profile-btn:hover, .edu-btn:hover, .proj-btn:hover { background: var(--accent-2); color: #fff; box-shadow: 0 0 0 2px var(--accent-2), 0 2px 12px rgba(2,6,23,0.10); } button:active::after, .button-1:active::after, .button-2:active::after, .profile-btn:active::after, .edu-btn:active::after, .proj-btn:active::after { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; background: radial-gradient(circle, #fff 0%, transparent 70%); opacity: 0.7; transform: translate(-50%, -50%) scale(1); pointer-events: none; animation: flash 0.35s cubic-bezier(.4,0,.2,1); border-radius: 50%; z-index: 2; } @keyframes flash { 0% { opacity: 0.7; transform: scale(0.7); } 80% { opacity: 0.3; transform: scale(1.2); } 100% { opacity: 0; transform: scale(2); } } /* Removed duplicate button block at end of file */ /* light variables are defined in the .light class above */ .footer { margin: 30px; padding: 30px 30px 20px 30px; border-radius: 20px; background: var(--surface); box-shadow: 0 2px 8px rgba(36,35,36,0.04); display: flex; flex-direction: column; align-items: center; } .light .footer { background: var(--menubar-bg); box-shadow: 0 2px 8px rgba(36,35,36,0.04); } .footer-list { display: flex; gap: 12px; justify-content: center; padding: 0; margin: 0 0 8px 0; } .footer-list a { color: var(--muted); text-decoration: none; font-weight: 700; font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; padding: 6px 12px; border-radius: 12px; transition: background 180ms, color 180ms; } .footer-list a:hover { background: rgba(14,165,164,0.08); color: var(--accent-2); } .end-line { width: 100%; text-align: center; color: var(--muted); font-size: 1rem; font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin-top: 8px; letter-spacing: 0.5px; } /* Timeline for Education and Projects pages */ .timeline{max-width:900px;margin:24px auto;padding-left:20px;border-left:2px solid rgba(15,23,36,0.06)} .timeline-item{position:relative;padding:18px 20px 18px 32px} .timeline-item::before{content:"";position:absolute;left:-11px;top:22px;width:18px;height:18px;background:#ffe066;border-radius:50%;box-shadow:0 0 18px 6px #ffe066, 0 0 0 4px rgba(255,224,102,0.18)} /* Last timeline item: yellow glowing circle */ .timeline-item.last::before { background: #ffe066; box-shadow: 0 0 18px 6px #ffe066, 0 0 0 4px rgba(255,224,102,0.18); } .timeline-item h4{margin:0 0 6px 0;color:var(--accent-2)} .timeline-item time{display:block;color:var(--muted);font-size:0.95rem;margin-bottom:8px} .timeline-item p{margin:0;color:var(--text)} /* Responsive */ @media (max-width:800px){ .mid-content,.mid-2{flex-direction:column;padding:12px} .nav-button{display:none} }