/* ----------------------------------------- About Me — Full CSS (dark/light theme + accessible theme toggle) Dark theme is the default. Light theme is opt-in via html[data-theme="light"]. ----------------------------------------- */ /* --------------------------- Theme tokens (dark by default) Use data-theme="light" on to force light mode. --------------------------- */ :root{ /* dark (default) */ --bg: #0c1021; --panel: #121634; --ink: #e6f0ff; --muted: #9fb0d3; --accent: #00ffd0; --accent-2: #ff6bd6; --radius: 6px; --shadow: 0 12px 30px rgba(0,0,0,.45); --grid: rgba(255,255,255,.06); --glass: rgba(18,22,52,0.72); /* fallback for browsers without color-mix */ --hover-text: rgba(230,240,255,0.9); --reveal-duration: 520ms; color-scheme: dark; } /* If the browser supports color-mix, use it for a couple of derived tokens */ @supports (color: color-mix(in srgb, var(--panel) 80%, transparent)) { :root{ --glass: color-mix(in srgb, var(--panel) 80%, transparent); --hover-text: color-mix(in srgb, var(--ink) 78%, black 22%); } } /* Explicit light theme override (highest priority) */ :root[data-theme="light"], html[data-theme="light"] { --bg: #f7f8ff; --panel: #fff; --ink: #121634; --muted: #546189; --glass: rgba(255,255,255,0.9); --grid: rgba(0,0,0,.06); --hover-text: rgba(18,22,52,0.9); color-scheme: light; } /* Smooth but respectful transition for theme changes (disabled if reduced-motion) */ @media (prefers-reduced-motion: no-preference) { body { transition: background 240ms linear, color 240ms linear; } :where(.btn, .links a, input, textarea, .theme-toggle) { transition: background 200ms linear, box-shadow 200ms linear, color 200ms linear; } } /* ------------------------ Base and layout styles ------------------------ */ * { box-sizing: border-box; } html, body { height: 100%; } html { scroll-behavior: smooth; } body{ margin:0; color:var(--ink); /* build layered backgrounds via explicit background-image + background-color */ background-color: var(--bg); background-image: linear-gradient(transparent 23px, var(--grid) 24px), linear-gradient(90deg, transparent 23px, var(--grid) 24px), radial-gradient(1200px 600px at 120% -10%, color-mix(in srgb,var(--accent) 22%, transparent), transparent), radial-gradient(1000px 500px at -10% 0%, color-mix(in srgb,var(--accent-2) 16%, transparent), transparent); background-size: 24px 24px, 24px 24px, 1400px 600px, 1200px 500px; background-position: 0 0, 0 0, 100% 0, 0 0; line-height:1.6; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; animation: bg-scroll 60s linear infinite; } @keyframes bg-scroll { from { background-position: 0 0, 0 0, 100% 0, 0 0; } to { background-position: -480px 0, -480px 0, 20% 0, -240px 0; } } /* particles canvas */ #bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.12;mix-blend-mode:screen} /* ensure content layers above moving background */ header, main, footer{position:relative; z-index:1} /* typography */ .pix{font-family:'VT323', monospace; letter-spacing:.5px} .h1, h1{font: 800 clamp(28px, 5vw, 56px)/1.05 Inter, system-ui, sans-serif; margin:0 0 8px} .sub{color:var(--muted); font-size:clamp(15px,2vw,18px)} .container { max-width: 1000px; margin: 0 auto; padding: 20px; } .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: absolute; left: 8px; top: 8px; width: auto; height: auto; overflow: visible; padding: 0.5rem 1rem; background: var(--panel); color: var(--ink); border-radius: 6px; z-index: 1000; /* ensures it sits above other content */ } /* header */ header{position:sticky;top:0;z-index:20;backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);background:var(--glass)} .nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px} .brand{display:flex;align-items:center;gap:12px;font-weight:800} /* nav links as buttons */ .links{display:flex;gap:10px;align-items:center} .links a{ padding:8px 10px; border-radius:var(--radius); border:2px solid transparent; background:linear-gradient(var(--panel),var(--panel)); color:var(--ink); font-weight:700; text-decoration:none; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease; border-image: linear-gradient(90deg,var(--accent),var(--accent-2)) 1; } .links a:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent-2) 6%,transparent)); color:var(--hover-text); } .links a:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent); outline-offset:4px; } /* theme toggle */ .theme-toggle{ font-size:15px; padding:8px 10px; border-radius:var(--radius); background:linear-gradient(var(--panel),var(--panel)); color:var(--ink); cursor:pointer; /* FIXED: proper transition declaration (was syntactically invalid before) */ transition: transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s ease, background .14s ease, color .14s ease; } .theme-toggle:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.16); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),color-mix(in srgb,var(--accent-2) 6%,transparent)); } .theme-toggle:active{ transform:translateY(-1px); } .theme-toggle:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent); outline-offset:4px; } /* HERO */ .hero{padding:36px 0} .hero-card{border-radius:var(--radius);overflow:visible;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 85%,transparent),var(--panel));padding:24px;position:relative} /* inline avatar that text wraps around using float (desktop) */ .avatar-inline{float:left;width:160px;height:160px;object-fit:cover;border-radius:6px;margin-right:18px;margin-bottom:12px;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 12px 30px rgba(0,0,0,.45);display:block} /* section reveals (intersection observer) */ .reveal{opacity:0;transform:translateY(10px);transition:opacity var(--reveal-duration) ease, transform var(--reveal-duration) ease} .reveal.visible{opacity:1;transform:none} /* tiny micro interaction: title underline animation */ .title .bar{height:3px;transition:transform .4s cubic-bezier(.2,.9,.3,1);transform-origin:left} .title:hover .bar{transform:scaleX(1.25)} /* mini site box inside hero (merged/fixed, contains the floated image) */ .mini-site{ display:inline-block; margin-top:12px; padding:12px; border-radius:8px; border:2px solid color-mix(in srgb,var(--ink) 10%,transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--panel) 98%,transparent),var(--panel)); font-weight:600; overflow:auto; /* keeps the parent containing the float */ gap:1rem; } .mini-site strong{display:block} .mini-site p{margin:8px 0 0;color:var(--muted);max-width:48ch} /* website image used inside mini-site (keeps float behavior) */ .website-image { float: left; width: 160px; height: 350px; object-fit: cover; border-radius: 6px; margin: 0 1rem 0.5rem 0; display: block; border: 4px outset #1c0742; } /* Optional: limit the text column width for better readability */ .site-text { max-width: 60ch; } /* Responsive: stack on small screens */ @media (max-width: 600px) { .website-image { float: none; display: block; margin: 0 0 1rem 0; width: 80%; height: auto; } .site-text { max-width: 100%; } } /* tool cards */ .tool-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:6px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),var(--panel))} .tool-chip{padding:6px 8px;border-radius:4px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:700} .tool-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.25);transition:transform .28s cubic-bezier(.2,.9,.3,1)} /* Buttons: unified hover highlight */ .btn{display:inline-flex;align-items:center;gap:10px;padding:.62rem .95rem;border-radius:var(--radius);border:2px solid transparent;background:linear-gradient(var(--panel),var(--panel));color:var(--ink);font-weight:700;cursor:pointer;transition:transform .14s cubic-bezier(.2,.9,.3,1),box-shadow .14s ease,filter .14s ease} .btn.outline{border-image:linear-gradient(90deg,var(--accent),var(--accent-2)) 1} .btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28);filter:brightness(1.02);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent));color:var(--hover-text)} .btn:active{transform:translateY(-1px)} /* form controls */ input, textarea, select { width:100%; padding:10px 12px; border-radius:6px; border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); background: color-mix(in srgb,var(--panel) 98%, transparent); color:var(--ink); font:inherit } textarea{min-height:120px;resize:vertical} input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent) } /* layout helpers */ .card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 85%,transparent),var(--panel));border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:var(--shadow);border-radius:6px} .p-24{padding:24px} section{padding:24px 0} .title{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:700} .bar{width:28px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:2px} .grid{display:grid;gap:14px} .cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media (max-width:900px){.cols-2{grid-template-columns:1fr}} /* ensure grid children can shrink and allow content wrapping */ .grid > .card, .card { min-width: 0; } /* ========== SKILLS TAGS: WRAP AND SHOW ALL CONTENT ========== */ /* Use a very specific selector and override common truncation properties. This ensures the tags will wrap, show full content, and not stretch the card. */ #skills .tags, #skills .card .tags { display: block !important; margin: 0 !important; max-width: 100% !important; /* Allow wrapping and breaking to prevent overflow */ white-space: normal !important; overflow: visible !important; text-overflow: unset !important; /* Break long sequences and words if necessary */ overflow-wrap: anywhere !important; word-break: break-word !important; } /* projects details */ details.ideas{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,transparent),var(--panel));border-radius:8px;padding:12px;border:1px dashed color-mix(in srgb,var(--ink) 12%,transparent)} details.ideas summary{cursor:pointer;font-weight:700} details.ideas ul{margin:8px 0 0 18px} /* contact quick buttons */ .contact-quick a{display:inline-block} /* about layout */ .about-inner{ display:flex; gap:32px; align-items:flex-start; align-content:flex-start; max-width:1100px; margin:0 auto; padding:24px; } .about-left{ flex:1 1 auto; min-width:0; } .about-right{ flex:0 0 300px; max-width:35%; } @media (max-width:700px){ .about-inner{ flex-direction:column; } .about-right{ flex:0 0 auto; width:auto; max-width:100%; margin-top:16px; } } /* optional small styling for chips & buttons (keeps your later customization) */ .tool-chip{ display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(104, 57, 57, 0.747); font-size:0.9rem; } .btn.outline{ padding:8px 12px; border-radius:8px; border:1px solid currentColor; text-decoration:none; font-size:0.9rem; } /* small screens */ @media (max-width:900px){ .avatar-inline{float:none;margin-right:0;margin-bottom:14px;border-radius:6px} .links a{display:inline-block} .nav{flex-direction:column;align-items:flex-start;height:auto;padding:12px 0;gap:8px} } /* reduced-motion fallback */ @media (prefers-reduced-motion: reduce){ body{animation:none} .crt-dot{animation:none} .reveal, .tool-card{transition:none} #bgCanvas{display:none} }