/* ========================================================================== Portfolio AI — Bootstrap 5 theme layer Uses Bootstrap 5.3 (dark color mode) as the base, with CSS variable overrides for the "ink navy + violet/ember" identity, plus a handful of custom flourishes (hero orb, chat widget, timeline) built on Bootstrap utility classes. ========================================================================== */ :root, [data-bs-theme="dark"]{ --bs-body-bg:#080b12; --bs-body-color:#e7e9f3; --bs-secondary-color:#9aa3bd; --bs-tertiary-bg:#121826; --bs-border-color:#212a3d; --bs-primary:#7c5cff; --bs-primary-rgb:124,92,255; --bs-link-color:#7c5cff; --bs-link-hover-color:#9c85ff; --brand-violet:#7c5cff; --brand-ember:#ff6b4a; --brand-mint:#3ddc97; --surface:#121826; --surface-2:#171f30; --font-display:'Space Grotesk', sans-serif; --font-mono:'JetBrains Mono', monospace; --ease:cubic-bezier(.22,1,.36,1); } /* Light mode override, toggled via from Admin > Settings & AI > Appearance */ [data-bs-theme="light"]{ --bs-body-bg:#f7f8fc; --bs-body-color:#161925; --bs-secondary-color:#565f7a; --bs-tertiary-bg:#ffffff; --bs-border-color:#e5e8f2; --surface:#ffffff; --surface-2:#f1f2f8; } *{ scrollbar-color: var(--bs-border-color) transparent; } html{ scroll-behavior:smooth; } body{ font-family:'Inter', sans-serif; position:relative; font-size:1.02rem; letter-spacing:-.005em; } /* Layered gradient-mesh backdrop, fixed behind all content */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(60% 46% at 88% -6%, rgba(124,92,255,.18), transparent 60%), radial-gradient(52% 42% at -8% 16%, rgba(255,107,74,.13), transparent 60%), radial-gradient(48% 40% at 50% 108%, rgba(61,220,151,.08), transparent 60%); } /* Subtle noise texture on top of the gradients — adds depth without banding */ body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-bs-theme="light"] body::before{ opacity:.7; } [data-bs-theme="light"] body::after{ opacity:.02; } .container, .container-fluid, nav, main, footer{ position:relative; z-index:1; } h1,h2,h3,h4,h5{ font-family:var(--font-display); letter-spacing:-.02em; font-weight:600; } h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); } .section-lead{ color:var(--bs-secondary-color); font-size:1.06rem; max-width:560px; } .font-mono{ font-family:var(--font-mono); } *{ transition-timing-function:var(--ease); } .text-accent{ color:var(--bs-primary) !important; } .bg-accent{ background-color:var(--bs-primary) !important; } .border-accent{ border-color:var(--bs-primary) !important; } .eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--bs-primary); display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; } .eyebrow::before{ content:""; width:18px; height:1px; background:var(--bs-primary); } /* ---------- Navbar ---------- */ .navbar-pill{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:1030; width:min(960px, calc(100% - 32px)); background:color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter:blur(14px); border:1px solid var(--bs-border-color); border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,.2); transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .navbar-pill.is-scrolled{ background:color-mix(in srgb, var(--surface) 90%, transparent); box-shadow:0 12px 36px rgba(0,0,0,.35); border-color:color-mix(in srgb, var(--bs-primary) 25%, var(--bs-border-color)); } .navbar-pill .nav-link{ color:var(--bs-secondary-color); font-size:.9rem; position:relative; transition:color .2s; } .navbar-pill .nav-link:hover, .navbar-pill .nav-link.active{ color:var(--bs-body-color); } .navbar-pill .navbar-brand{ font-family:var(--font-display); font-weight:700; } .navbar-pill .navbar-brand span{ color:var(--bs-primary); } .navbar-pill .navbar-collapse.show, .navbar-pill .navbar-collapse.collapsing{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:1.25rem; margin-top:12px; padding:14px 6px; box-shadow:0 20px 45px rgba(0,0,0,.3); } /* ---------- Buttons ---------- */ .btn{ transition:transform .25s var(--ease), filter .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } .btn-gradient{ background:linear-gradient(135deg, var(--brand-violet), #5a3fd6); border:none; color:#fff; border-radius:999px; font-weight:600; box-shadow:0 8px 24px rgba(124,92,255,.28); } .btn-gradient:hover{ filter:brightness(1.12); color:#fff; transform:translateY(-2px); box-shadow:0 14px 32px rgba(124,92,255,.4); } .btn-outline-soft{ border:1px solid var(--bs-border-color); color:var(--bs-body-color); border-radius:999px; font-weight:600; background:transparent; } .btn-outline-soft:hover{ border-color:var(--bs-primary); color:var(--bs-primary); transform:translateY(-2px); } .btn-ai-gradient{ background:linear-gradient(135deg, var(--brand-violet), var(--brand-ember)); border:none; color:#fff; font-weight:600; } .btn-ai-gradient:hover{ filter:brightness(1.1); color:#fff; } .btn-arrow i{ display:inline-block; transition:transform .3s var(--ease); } .btn-arrow:hover i{ transform:translateX(4px); } /* ---------- Cards ---------- */ .card-surface{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:1.1rem; transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease); } .card-surface:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color)); box-shadow:0 20px 45px rgba(0,0,0,.28); } .icon-tile{ width:46px; height:46px; border-radius:.75rem; background:rgba(124,92,255,.14); color:var(--bs-primary); display:flex; align-items:center; justify-content:center; font-size:1.25rem; } /* ---------- Stats strip ---------- */ .stats-strip{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:1.25rem; padding:2rem 1rem; } .stat-item{ text-align:center; padding:.5rem 1rem; } .stat-item .num{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; color:var(--bs-body-color); line-height:1; } .stat-item .num span{ color:var(--bs-primary); } .stat-item .label{ color:var(--bs-secondary-color); font-size:.82rem; margin-top:.4rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); } .stat-divider{ border-left:none; } @media (min-width:768px){ .stat-divider{ border-left:1px solid var(--bs-border-color); } } /* ---------- Hero ---------- */ .hero-section{ padding:180px 0 60px; overflow:hidden; } .hero-section h1{ font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1.08; } .role-line{ font-family:var(--font-mono); color:var(--brand-ember); font-size:1.1rem; min-height:1.4em; } .role-line .cursor{ display:inline-block; width:2px; background:var(--brand-ember); margin-left:2px; animation:blink 1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } } .hero-chip{ display:inline-flex; align-items:center; gap:8px; padding:.4rem .9rem; border-radius:999px; border:1px solid var(--bs-border-color); background:var(--surface); font-size:.78rem; color:var(--bs-secondary-color); } .hero-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand-mint); box-shadow:0 0 6px var(--brand-mint); } .orb-wrap{ position:relative; aspect-ratio:1; max-width:400px; margin:0 auto; } .orb{ position:absolute; inset:8%; border-radius:50%; background:conic-gradient(from 0deg, var(--brand-violet), var(--brand-ember), var(--brand-mint), var(--brand-violet)); filter:blur(2px); animation:spin 12s linear infinite; opacity:.85; } .orb::after{ content:""; position:absolute; inset:14px; border-radius:50%; background:var(--bs-body-bg); } .orb-core{ position:absolute; inset:30%; border-radius:50%; background:var(--surface); border:1px solid var(--bs-border-color); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.7rem; color:var(--bs-secondary-color); text-align:center; padding:10px; } @keyframes spin{ to{ transform:rotate(360deg); } } /* ---------- Skills ---------- */ .skill-progress{ height:6px; background:var(--surface-2); border-radius:999px; } .skill-progress .progress-bar{ background:linear-gradient(90deg, var(--brand-violet), var(--brand-ember)); } /* ---------- Projects ---------- */ .project-thumb{ aspect-ratio:16/10; background:var(--surface-2); position:relative; overflow:hidden; border-radius:1.1rem 1.1rem 0 0; } .project-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .card-surface:hover .project-thumb img{ transform:scale(1.08); } .project-thumb::after{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); background:linear-gradient(180deg, transparent 40%, rgba(8,11,18,.85) 100%); } .card-surface:hover .project-thumb::after{ opacity:1; } .project-cta{ position:absolute; left:14px; bottom:-30px; opacity:0; transition:all .35s var(--ease); font-family:var(--font-mono); font-size:.76rem; color:#fff; display:flex; align-items:center; gap:6px; } .card-surface:hover .project-cta{ bottom:14px; opacity:1; } .project-badge{ position:absolute; top:12px; left:12px; background:rgba(8,11,18,.75); backdrop-filter:blur(6px); font-family:var(--font-mono); font-size:.7rem; color:var(--brand-mint); border:1px solid rgba(61,220,151,.35); } .tech-pill{ font-family:var(--font-mono); font-size:.72rem; background:var(--surface-2); color:var(--bs-secondary-color); } .filter-btn{ transition:all .25s var(--ease); } .filter-btn.active{ background:var(--bs-primary); color:#fff; border-color:var(--bs-primary); } /* ---------- Timeline ---------- */ .timeline{ position:relative; padding-left:2rem; border-left:1px solid var(--bs-border-color); } .timeline-item{ position:relative; padding-bottom:2.2rem; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item::before{ content:""; position:absolute; left:-2.3rem; top:.25rem; width:12px; height:12px; border-radius:50%; background:var(--bs-body-bg); border:2px solid var(--bs-primary); } /* ---------- Blog ---------- */ .blog-thumb{ aspect-ratio:16/9; background:var(--surface-2); border-radius:1rem 1rem 0 0; overflow:hidden; } .blog-thumb img{ width:100%; height:100%; object-fit:cover; } .badge-ai{ background:rgba(61,220,151,.12); color:var(--brand-mint); border:1px solid rgba(61,220,151,.35); font-weight:500; } /* ---------- Forms ---------- */ .form-control, .form-select{ background:var(--surface-2); border-color:var(--bs-border-color); color:var(--bs-body-color); } .form-control:focus, .form-select:focus{ background:var(--surface-2); border-color:var(--bs-primary); color:var(--bs-body-color); box-shadow:0 0 0 .2rem rgba(124,92,255,.2); } .form-control::placeholder{ color:var(--bs-secondary-color); opacity:.7; } .honey{ position:absolute; left:-9999px; opacity:0; } /* ---------- AI Chat Widget ---------- */ .chat-fab{ position:fixed; bottom:24px; right:24px; z-index:1040; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg, var(--brand-violet), var(--brand-ember)); color:#fff; font-size:1.4rem; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(124,92,255,.4); } .chat-panel{ position:fixed; bottom:96px; right:24px; z-index:1040; width:min(360px, calc(100vw - 32px)); height:min(500px, calc(100vh - 140px)); background:var(--surface); border:1px solid var(--bs-border-color); border-radius:1rem; display:none; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); } .chat-panel.open{ display:flex; } .chat-head{ padding:14px 18px; border-bottom:1px solid var(--bs-border-color); display:flex; align-items:center; gap:10px; } .chat-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-mint); box-shadow:0 0 8px var(--brand-mint); } .chat-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .msg{ max-width:82%; padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.45; } .msg.bot{ background:var(--surface-2); align-self:flex-start; border-bottom-left-radius:4px; } .msg.user{ background:var(--bs-primary); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; } .chat-input input{ background:var(--surface-2); border:1px solid var(--bs-border-color); color:var(--bs-body-color); } .chat-input input:focus{ outline:none; border-color:var(--bs-primary); box-shadow:none; } .chat-send-btn{ background:var(--bs-primary); border:none; color:#fff; width:38px; height:38px; border-radius:50%; } .typing{ display:flex; gap:4px; padding:10px 14px; background:var(--surface-2); border-radius:14px; align-self:flex-start; width:fit-content; } .typing span{ width:6px; height:6px; border-radius:50%; background:var(--bs-secondary-color); animation:tb 1.2s infinite; display:inline-block; } .typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; } @keyframes tb{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--bs-border-color); padding:44px 0; margin-top:40px; } .social-icon{ width:38px; height:38px; border-radius:50%; border:1px solid var(--bs-border-color); display:flex; align-items:center; justify-content:center; color:var(--bs-secondary-color); transition:.2s; } .social-icon:hover{ border-color:var(--bs-primary); color:var(--bs-primary); } /* ---------- Testimonial carousel ---------- */ .testi-carousel .carousel-inner{ padding:.5rem; } .testi-slide{ background:var(--surface); border:1px solid var(--bs-border-color); border-radius:1.25rem; padding:2.5rem; max-width:680px; margin:0 auto; text-align:center; } .testi-slide .stars{ color:#f5b73f; letter-spacing:2px; } .testi-slide p{ font-size:1.15rem; font-style:italic; color:var(--bs-body-color); line-height:1.6; } .testi-carousel .carousel-control-prev, .testi-carousel .carousel-control-next{ position:static; width:44px; height:44px; border-radius:50%; border:1px solid var(--bs-border-color); background:var(--surface); opacity:1; margin:0 8px; } .testi-carousel .carousel-control-prev:hover, .testi-carousel .carousel-control-next:hover{ border-color:var(--bs-primary); } .testi-carousel .carousel-control-prev-icon, .testi-carousel .carousel-control-next-icon{ filter:invert(1) grayscale(1); width:1rem; height:1rem; } [data-bs-theme="light"] .testi-carousel .carousel-control-prev-icon, [data-bs-theme="light"] .testi-carousel .carousel-control-next-icon{ filter:none; } .testi-carousel .carousel-indicators{ position:static; margin-top:1.5rem; } .testi-carousel .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%; background:var(--bs-border-color); border:none; opacity:1; } .testi-carousel .carousel-indicators .active{ background:var(--bs-primary); width:22px; border-radius:4px; } /* ---------- Back to top ---------- */ .back-to-top{ position:fixed; bottom:24px; left:24px; z-index:1040; width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--bs-border-color); color:var(--bs-body-color); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); } .back-to-top.visible{ opacity:1; pointer-events:auto; } .back-to-top:hover{ border-color:var(--bs-primary); color:var(--bs-primary); transform:translateY(-3px); } /* ---------- Scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .reveal-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }