:root{ --bg: #0b0f13; --bg-elev: #0f141a; --text: #e6eef7; --muted: #a7b5c2; --brand: #00b3a4; --brand-2: #0f7880; --card: #0e141a; --ring: rgba(0,179,164,.25); --radius: 16px; --shadow-1: 0 10px 25px rgba(0,0,0,.25); --shadow-2: 0 20px 50px rgba(0,0,0,.35); --rotator-width: 12.5ch; /* wide enough for "automation" */ /* Fluid type scale */ --step-0: clamp(14px, 0.9vw + 9px, 16px); --step-1: clamp(16px, 1.0vw + 10px, 18px); --step-2: clamp(20px, 1.6vw + 10px, 22px); --step-3: clamp(24px, 2.4vw + 10px, 28px); --step-4: clamp(32px, 3.6vw + 12px, 40px); --step-5: clamp(40px, 5.0vw + 14px, 56px); } /* ------------------------------ Light theme (toggle via: … ) ------------------------------*/ :root[data-theme="light"]{ --bg: #f7fafc; /* page base */ --bg-elev: #ffffff; /* elevated surfaces */ --text: #0f172a; /* slate-900 */ --muted: #475569; /* slate-600 */ --brand: #0ea5a4; /* teal-600-ish */ --brand-2: #0f7880; --card: #ffffff; --ring: rgba(14,165,164,.22); --shadow-1: 0 8px 22px rgba(2,6,23,.08); --shadow-2: 0 18px 42px rgba(2,6,23,.12); } /* Page background */ :root[data-theme="light"] html{ background-color: var(--bg); } :root[data-theme="light"] body{ color: var(--text); background: radial-gradient(1100px 520px at 12% -8%, rgba(14,165,164,.10), transparent 60%), radial-gradient(1000px 480px at 110% 8%, rgba(2,132,199,.08), transparent 60%), linear-gradient(180deg,#f7fafc 0%, #f6f9fb 45%, #f4f7fa 100%); } /* Header / Navbar */ :root[data-theme="light"] .navbar{ background: rgba(248,250,252,.75); border-bottom: 1px solid rgba(2,6,23,.06); backdrop-filter: blur(8px); } :root[data-theme="light"] .nav-links a{ color: var(--muted); } :root[data-theme="light"] .nav-links a:hover{ color: var(--text); background: rgba(2,6,23,.06); } /* Buttons */ :root[data-theme="light"] .btn{ border: 1px solid rgba(2,6,23,.12); background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02)); color: var(--text); box-shadow: var(--shadow-1); } :root[data-theme="light"] .btn:hover{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring), var(--shadow-1); } :root[data-theme="light"] .yt{ border-color: #ef4444; } :root[data-theme="light"] .yt:hover{ box-shadow: 0 0 0 6px rgba(239,68,68,.16), var(--shadow-1); } /* Hero chip */ :root[data-theme="light"] .chip{ border: 1px dashed rgba(2,6,23,.22); color: var(--muted); } /* Section fade */ :root[data-theme="light"] section .container::before{ background: linear-gradient(to bottom, rgba(248,250,252,.75), rgba(248,250,252,0)); } /* Cards / grid items */ :root[data-theme="light"] .card{ background: linear-gradient(180deg, rgba(2,6,23,.03) 0%, rgba(2,6,23,.01) 100%); border: 1px solid rgba(2,6,23,.08); box-shadow: var(--shadow-1); } :root[data-theme="light"] .card:hover{ border-color: rgba(14,165,164,.35); box-shadow: var(--shadow-2), 0 0 0 6px var(--ring); } :root[data-theme="light"] .thumb{ border-bottom: 1px solid rgba(2,6,23,.06); } :root[data-theme="light"] .pill{ background: rgba(255,255,255,.85); border: 1px solid rgba(2,6,23,.12); color: #0f172a; } /* Text tones inside cards/lists */ :root[data-theme="light"] .card p, :root[data-theme="light"] .section-desc, :root[data-theme="light"] .contact p{ color: var(--muted); } /* Tags / chips */ :root[data-theme="light"] .tag, :root[data-theme="light"] .skill-tags li{ background: rgba(2,6,23,.04); border: 1px solid rgba(2,6,23,.12); color: #0f3535; } /* Lists (Presentations) */ :root[data-theme="light"] .list a{ background: linear-gradient(180deg, rgba(2,6,23,.025), rgba(2,6,23,.01)); border: 1px solid rgba(2,6,23,.10); color: var(--text); } :root[data-theme="light"] .list a:hover{ border-color: rgba(14,165,164,.35); } :root[data-theme="light"] .bullet{ box-shadow: 0 0 0 6px var(--ring); } /* Contact section + footer */ :root[data-theme="light"] .contact{ border-top: 1px solid rgba(2,6,23,.08); } :root[data-theme="light"] footer{ color: var(--muted); } :root[data-theme="light"] .socials a{ background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02)); border: 1px solid rgba(2,6,23,.10); color: var(--text); } :root[data-theme="light"] .socials a:hover{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); } /* Drawer / mobile menu */ :root[data-theme="light"] .drawer{ background: rgba(255,255,255,.96); border-top: 1px solid rgba(2,6,23,.08); } :root[data-theme="light"] .drawer a{ color: var(--text); border-bottom: 1px solid rgba(2,6,23,.06); } :root[data-theme="light"] .drawer a:hover{ background: rgba(2,6,23,.06); } /* Stats, skills, cases, to-top */ :root[data-theme="light"] .stat, :root[data-theme="light"] .case .case-card{ background: linear-gradient(180deg, rgba(2,6,23,.03), rgba(2,6,23,.015)); border: 1px solid rgba(2,6,23,.10); } :root[data-theme="light"] .to-top{ border: 1px solid rgba(2,6,23,.14); background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02)); color: var(--text); } /* News */ :root[data-theme="light"] .news-item{ background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01)); border: 1px solid rgba(2,6,23,.10); } :root[data-theme="light"] .news-title a{ color: var(--text); } :root[data-theme="light"] .news-title a:hover{ color: var(--brand); } :root[data-theme="light"] .news-date{ color: var(--muted); } :root[data-theme="light"] .tag.mini{ background: rgba(2,6,23,.04); border: 1px solid rgba(2,6,23,.12); color: #0f3535; } *{ box-sizing: border-box; } html, body{ height:100%; scroll-behavior:smooth; } /* Helps avoid banding while scrolling */ html{ background-color: var(--bg); background-attachment: fixed; } body{ margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); background: radial-gradient(1000px 500px at 10% -10%, rgba(0,179,164,.05), transparent 60%), radial-gradient(900px 400px at 110% 10%, rgba(18,91,98,.15), transparent 60%), var(--bg); letter-spacing:.2px; font-size: var(--step-0); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Header / Navbar --- */ .navbar{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background: rgba(11,15,19,.55); border-bottom: 1px solid rgba(255,255,255,.06); } .nav-inner{ max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; } .brand-badge{ height: 34px; width: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--brand), #2de0d3); display:grid; place-items:center; font-weight:900; color:#001715; box-shadow: 0 6px 18px rgba(0,179,164,.25); } /* Desktop links */ .nav-links{ display:none; gap: 12px; align-items:center; } .nav-links a{ color: var(--muted); text-decoration:none; font-weight:600; font-size: 14px; padding: 8px 12px; border-radius: 10px; } .nav-links a:hover{ color: var(--text); background: rgba(255,255,255,.06); } /* Mobile menu */ .menu-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--text); font-weight:700; } .menu-btn[aria-expanded="true"]{ box-shadow: 0 0 0 6px var(--ring); } .drawer{ display:none; border-top: 1px solid rgba(255,255,255,.06); background: rgba(11,15,19,.9); } .drawer.open{ display:block; } .drawer a{ display:block; padding: 12px 16px; color: var(--text); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.05); } .drawer a:focus, .drawer a:hover{ background: rgba(255,255,255,.06); outline: none; } /* Buttons */ .btn{ border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color: var(--text); padding: 10px 14px; border-radius: 12px; text-decoration:none; font-weight:700; font-size:14px; box-shadow: var(--shadow-1); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn:hover{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring), var(--shadow-1); } .yt{ border-color: #ff4d4d; } .yt:hover{ box-shadow: 0 0 0 6px rgba(255,77,77,.18), var(--shadow-1); } /* --- Hero --- */ .hero{ max-width: 1200px; margin: 0 auto; padding: 72px 16px 48px; display:grid; gap: 18px; } .chip{ display:inline-flex; align-items:center; gap:8px; font-family:"Fira Mono", monospace; border: 1px dashed rgba(255,255,255,.22); color: var(--muted); padding: 6px 10px; border-radius: 999px; font-size: 12px; width: max-content; } .title{ font-size: var(--step-5); line-height: 1.05; margin: 4px 0; font-weight: 800; text-indent: 0.02ch; } /* subtitle + rotator (baseline-safe fade) */ .subtitle{ font-size: var(--step-4); margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: .3px; display: flex; flex-wrap: wrap; align-items: baseline; } .subtitle .rotator{ display: inline-grid; grid-template-areas: "stack"; width: var(--rotator-width); margin-left: .35ch; vertical-align: baseline; } .subtitle .rotator .word{ grid-area: stack; white-space: nowrap; color: var(--brand); font-weight: 800; line-height: 1; /* exact baseline match */ opacity: 0; animation: rot-fade 9s linear infinite; } .subtitle .rotator .word:nth-child(1){ animation-delay: 0s; } .subtitle .rotator .word:nth-child(2){ animation-delay: 3s; } .subtitle .rotator .word:nth-child(3){ animation-delay: 6s; } @keyframes rot-fade{ 0% { opacity: 1; } 28% { opacity: 1; } /* hold */ 35% { opacity: 0; } /* fade out */ 100% { opacity: 0; } } /* Optional “·” around the active word */ .subtitle .rotator .word::before, .subtitle .rotator .word::after{ content: " "; color: var(--brand); opacity: .9; } .subtitle .rotator .word::before{ margin-right: .15ch; } .subtitle .rotator .word::after { margin-left: .15ch; } .intro{ max-width: 70ch; color: var(--muted); font-size: var(--step-1); } .cta-row{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; } /* --- Section wrapper --- */ section{ padding: 24px 0; } .container{ max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* (Optional) anti-banding fade at section starts */ section .container{ position: relative; } section .container::before{ content:""; position: absolute; inset: -24px 0 auto 0; height: 24px; background: linear-gradient(to bottom, rgba(11,15,19,.6), rgba(11,15,19,0)); pointer-events:none; } .section-head{ display:flex; flex-wrap: wrap; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom: 10px; } .section-head h2{ font-size: var(--step-3); letter-spacing:.3px; opacity:.95; margin: 0; } .section-desc{ color: var(--muted); margin-top: 4px; font-size: var(--step-1); } .section-head .btn{ margin-bottom: 2px; } /* --- Projects Grid --- */ .grid{ display:grid; gap: 14px; grid-template-columns: repeat(12, 1fr); } .card{ grid-column: span 12; display: flex; flex-direction: column; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); overflow: clip; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover{ transform: translateY(-2px); border-color: rgba(0,179,164,.35); box-shadow: var(--shadow-2), 0 0 0 6px var(--ring); } .thumb{ position: relative; flex-shrink: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.05); } .thumb img{ width:100%; height:100%; object-fit:cover; } .pill{ position:absolute; top:6px; left:6px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.25); color:#fff; padding: 6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.3px; } .card-body{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; padding: 14px; } .card h3{ margin: 0; font-size: var(--step-2); } .card p{ margin: 0; color: var(--muted); line-height: 1.65; font-size: var(--step-1); } .tags{ display:flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .tag{ font-family: "Fira Mono", monospace; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: #cfe9e7; } /* --- Presentations --- */ .list{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; } .list a{ display:flex; gap: 10px; align-items:center; padding: 12px 14px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; color: var(--text); text-decoration:none; transition: transform .15s ease, border-color .15s ease; } .list a:hover{ transform: translateY(-2px); border-color: rgba(0,179,164,.35); } .bullet{ height:10px; width:10px; border-radius:999px; background: var(--brand); box-shadow: 0 0 0 6px var(--ring); } /* --- Contact --- */ .contact{ text-align:center; padding: 56px 16px 80px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); } .contact h2{ font-size: var(--step-4); margin: 0 0 8px; } .contact p{ color: var(--muted); max-width: 70ch; margin: 0 auto 18px; font-size: var(--step-1); } /* --- Footer --- */ footer{ color: var(--muted); font-size: 14px; text-align:center; padding: 20px; } .socials{ display:flex; gap: 12px; justify-content:center; margin: 8px 0 4px; flex-wrap: wrap; } .socials a{ height: 40px; width: 40px; display:grid; place-items:center; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); color: var(--text); } .socials a:hover{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); } /* --- Accessibility & preferences --- */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } .subtitle .rotator .word{ animation:none; opacity:1; } .subtitle .rotator .word:not(:first-child){ display:none; } } img{ max-width: 100%; height: auto; display:block; } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* --- Responsive columns & breakpoints --- */ @media (min-width: 480px){ .card-body{ padding: 16px; } } @media (min-width: 640px){ .grid{ gap: 16px; } .span-6{ grid-column: span 6; } } @media (min-width: 768px){ .nav-links{ display:flex; } .menu-btn{ display:none; } .drawer{ display:none !important; } .hero{ padding: 72px 20px 48px; gap: 24px; } .container{ padding: 0 20px; } .hide-mobile{ display: inline-flex; } } @media (min-width: 1024px){ .grid{ gap: 18px; } .span-4-lg{ grid-column: span 4; } .span-8-lg{ grid-column: span 8; } } @media (min-width: 1280px){ .hero{ padding-top: 86px; } } /* ===== Mobile (≤640px) ===== */ @media (max-width: 640px){ .grid{ grid-template-columns: 1fr; gap: 12px; } .card{ height: auto; } .thumb{ aspect-ratio: 4 / 3; padding: 6px; } /* pill stays inset */ .card-body{ padding: 14px; gap: 8px; } .section-head{ align-items: flex-start; } .section-head .btn{ order: 2; margin-top: 8px; } .btn{ padding: 12px 16px; line-height: 1; } .btn:hover{ box-shadow: 0 0 0 3px var(--ring), var(--shadow-1); } .hero{ padding: 56px 16px 40px; } .container{ padding: 0 16px; } } .stats{max-width:1200px;margin:0 auto 20px;padding:0 16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .stat{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;text-align:center} .stat strong{font-size:22px;display:block} .stat span{color:var(--muted);font-size:14px} .skills{max-width:1200px;margin:8px auto 24px;padding:0 16px} .skill-tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 0} .skill-tags li{font-family:"Fira Mono",monospace;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)} .case .case-card{max-width:1200px;margin:0 auto;padding:16px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)} .to-top{position:fixed;right:16px;bottom:16px;display:none;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);padding:10px 12px;border-radius:12px} .to-top.show{display:inline-flex} @media (max-width: 768px){.stats{grid-template-columns:repeat(2,1fr)}} /* ===== News ===== */ .news-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .news-item{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-1); } .news-title{ margin: 4px 0 4px; font-size: var(--step-2); } .news-title a{ color: var(--text); text-decoration:none; } .news-title a:hover{ color: var(--brand); } .news-sum{ margin: 0; color: var(--muted); font-size: var(--step-1); } .news-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .news-date{ font-family:"Fira Mono", monospace; font-size:12px; color: var(--muted); } .news-tags{ display:flex; gap:6px; flex-wrap:wrap; } .tag.mini{ font-size:11px; padding:5px 8px; } /* Theme toggle pill */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:36px; margin-left:10px; border-radius:10px; cursor:pointer; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--text); box-shadow: var(--shadow-1); } .theme-toggle:hover{ box-shadow:0 0 0 4px var(--ring), var(--shadow-1); } .theme-toggle .icon{ display:none; } /* Desktop: keep visible even though .menu-btn is hidden */ @media (min-width:768px){ .menu-btn{ display:none; } /* this hides the hamburger only */ .theme-toggle{ display:inline-flex; } } /* Light theme look for the pill */ :root[data-theme="light"] .theme-toggle{ border-color: rgba(2,6,23,.12); background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.02)); } /* Icon swapping: - DARK (default): show MOON - LIGHT: show SUN */ .theme-toggle .icon-moon{ display:inline; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:inline; } .theme-toggle{ /* visible by default */ } @media (min-width:768px){ .menu-btn{ display:none; } /* hides the hamburger ONLY */ .theme-toggle{ display:inline-flex; } /* keeps toggle visible */ } /* icon swap */ .theme-toggle .icon-moon{ display:inline; } :root[data-theme="light"] .theme-toggle .icon-moon{ display:none; } :root[data-theme="light"] .theme-toggle .icon-sun{ display:inline; }