/* ============================================ ASH SIWAKOTI — Portfolio v4 ============================================ Palette (light-first): Cream #FAF7F4 Warm White #FFF Sand #F2EDE8 Light Teal #E8F5F3 Teal #2A9D8F Bright Teal #34C4B4 Orange #E76F51 Orange Glow #F4A261 Steel #5B7B8D Navy Text #1A2A3A Mid #8A8F96 ============================================ */ /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#2A9D8F transparent} ::-webkit-scrollbar{width:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#2A9D8F;border-radius:3px} body{ font-family:'Inter',system-ui,sans-serif; background:#FAF7F4;color:#1A2A3A; line-height:1.65;overflow-x:hidden; -webkit-font-smoothing:antialiased; } ::selection{background:rgba(42,157,143,.15);color:#1A2A3A} a{color:inherit;text-decoration:none} ul,ol{list-style:none} img{max-width:100%;display:block} button{border:none;background:none;cursor:pointer;font:inherit;color:inherit} /* ---------- Typography ---------- */ /* Fonts loaded via in HTML with preconnect for faster render */ h1,h2,h3,.display{font-family:'DM Serif Display',serif;font-weight:400;line-height:1.1} .mono{font-family:'JetBrains Mono',monospace} /* ---------- Noise texture overlay ---------- */ body::before{ content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat:repeat; } /* ---------- Utility ---------- */ .container{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)} /* ---------- Loader ---------- */ .loader{ position:fixed;inset:0;background:#FAF7F4; display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.5rem; z-index:10000;transition:opacity .7s ease,visibility .7s ease; } .loader.hidden{opacity:0;visibility:hidden;pointer-events:none} .loader-symbol{width:44px;height:44px;color:#2A9D8F;animation:loaderPulse 1.5s ease-in-out infinite} .loader-bar{width:100px;height:2px;background:#E8E2DB;border-radius:2px;overflow:hidden} .loader-bar::after{ content:'';display:block;width:40%;height:100%;border-radius:2px; background:linear-gradient(90deg,#2A9D8F,#E76F51); animation:loaderSlide 1s ease-in-out infinite; } @keyframes loaderPulse{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1)}} @keyframes loaderSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}} /* ---------- Page transition ---------- */ .page-transition{position:fixed;inset:0;background:#FAF7F4;z-index:9999;transform:scaleY(0);transform-origin:bottom;pointer-events:none} .page-transition.entering{animation:curtainIn .55s cubic-bezier(.77,0,.18,1) forwards} .page-transition.leaving{animation:curtainOut .55s cubic-bezier(.77,0,.18,1) forwards} /* Boot-up loading elements inside transition */ .pt-symbol{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:32px;height:32px;color:#2A9D8F;opacity:0; animation:ptSymIn .35s .15s ease forwards, spin 2s linear infinite; } .pt-bar{ position:absolute;bottom:0;left:0;width:0;height:2px; background:linear-gradient(90deg,#2A9D8F,#E76F51); animation:ptBarSweep .55s .1s cubic-bezier(.22,1,.36,1) forwards; } @keyframes ptSymIn{to{opacity:.2}} @keyframes ptBarSweep{to{width:100%}} @keyframes curtainIn{0%{transform:scaleY(0);transform-origin:bottom}100%{transform:scaleY(1);transform-origin:bottom}} @keyframes curtainOut{0%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(0);transform-origin:top}} /* ---------- Symbol ---------- */ .symbol{display:inline-block;line-height:0} .symbol svg{width:100%;height:100%} .symbol-sm{width:22px;height:22px} .symbol-md{width:40px;height:40px} .symbol-lg{width:60px;height:60px} .symbol-spin{animation:spin 30s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ============================================ NAVBAR ============================================ */ /* Content stacking */ .navbar,.hero,.stats-bar,.section,.section--tinted,.cta-banner,.footer,.loader,.page-transition, .nav-mobile,.coming-card,.edu-card,.contact-header,.blog-coming{ position:relative;z-index:2; } .navbar{ position:fixed;top:0;left:0;right:0;z-index:1000; padding:1.25rem 0; transition:all .4s cubic-bezier(.25,.46,.45,.94); } .navbar.scrolled{ background:rgba(250,247,244,.92); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); box-shadow:0 1px 0 rgba(0,0,0,.04); padding:.85rem 0; } .navbar .container{display:flex;align-items:center;justify-content:space-between} .nav-logo{ font-family:'DM Serif Display',serif;font-size:1.45rem; letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem; transition:color .3s ease; } .nav-links{display:flex;gap:2.4rem;align-items:center} /* --- Nav link: ordered dash underline system --- */ .nav-link{ position:relative;font-size:.78rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase; padding-bottom:10px;color:#1A2A3A; transition:color .35s ease; } /* The dashes are rendered via JS as individual span.nav-dash elements */ .nav-dashes{ position:absolute;bottom:0;left:0; display:flex;gap:3px; height:2px; pointer-events:none; } .nav-dash{ width:6px;height:2px;border-radius:1px; background:#D6D0CA; transition:background .15s ease, transform .2s ease; transform:scaleX(0); transform-origin:left; } /* Hover: dashes scale in sequentially (JS handles timing + colors) */ .nav-link:hover .nav-dash{ transform:scaleX(1); } /* Active/selected = stabilized teal (orange charges, teal locks) */ .nav-link.active{color:#2A9D8F} .nav-link.active .nav-dash{ background:#2A9D8F !important; transform:scaleX(1) !important; transition-delay:0s !important; } /* Mobile */ .nav-toggle{display:none;flex-direction:column;gap:5px;width:28px;padding:4px 0;z-index:1001} .nav-toggle span{display:block;height:2px;background:#1A2A3A;border-radius:1px;transition:all .35s ease} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-mobile{ display:none;position:fixed;inset:0; background:rgba(250,247,244,.98);backdrop-filter:blur(20px); z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem; } .nav-mobile.open{display:flex} .nav-mobile .nav-link{font-size:1.4rem;letter-spacing:.08em} /* ============================================ HERO — LIGHT with gradient accents ============================================ */ .hero{ min-height:100vh; display:flex;align-items:center; position:relative;overflow:hidden; background:#FAF7F4; padding-top:5rem; } /* Soft gradient orbs */ .hero::before{ content:'';position:absolute; width:800px;height:800px; top:-200px;right:-200px; background:radial-gradient(circle,rgba(42,157,143,.08) 0%,transparent 70%); pointer-events:none; } .hero::after{ content:'';position:absolute; width:600px;height:600px; bottom:-100px;left:-150px; background:radial-gradient(circle,rgba(231,111,81,.06) 0%,transparent 70%); pointer-events:none; } /* Floating symbol — Ishtar Collective emblem */ .hero-symbol-float{ position:absolute;top:50%;right:8%; transform:translateY(-50%); width:500px;height:500px;opacity:.06;pointer-events:none; animation:spin 50s linear infinite; } .hero-symbol-float svg{width:100%;height:100%} .hero-grid{ display:grid;grid-template-columns:1.15fr .85fr;gap:5rem; align-items:center;width:100%;position:relative;z-index:2; } .hero-content{position:relative} .hero-label{ font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:#2A9D8F;margin-bottom:2rem; display:flex;align-items:center;gap:.75rem; } .hero-name{ font-family:'DM Serif Display',serif; font-size:clamp(3.5rem,8vw,6.5rem); line-height:.95;letter-spacing:-.03em;margin-bottom:1.75rem; color:#1A2A3A; } .hero-name .accent{ background:linear-gradient(135deg,#E76F51,#F4A261); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .hero-name .char{ display:inline-block; animation:charReveal .6s cubic-bezier(.25,.46,.45,.94) both; will-change:transform,opacity; } @keyframes charReveal{ 0%{opacity:0;transform:translateY(20px) rotateX(-60deg)} 100%{opacity:1;transform:translateY(0) rotateX(0)} } .hero-tagline{font-size:1.15rem;font-weight:500;color:#1A2A3A;margin-bottom:.5rem} .hero-desc{font-size:.95rem;color:#5B7B8D;max-width:480px;line-height:1.85;margin-bottom:2.5rem} .hero-cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap} /* Hero image */ .hero-image{position:relative;display:flex;align-items:center;justify-content:center} .hero-image-wrapper{position:relative;width:100%;max-width:400px} .hero-image-frame{ position:relative;z-index:2;width:100%;aspect-ratio:3/4; border-radius:8px;overflow:hidden; background:linear-gradient(160deg,#E8F5F3,#F2EDE8); box-shadow:0 30px 80px rgba(42,157,143,.1),0 10px 30px rgba(0,0,0,.04); } .hero-image-frame img{width:100%;height:100%;object-fit:cover;object-position:center top} .hero-image-deco-1{ position:absolute;top:-12px;right:-12px; width:100%;height:100%; border:2px solid rgba(42,157,143,.35);border-radius:8px;z-index:1; box-shadow:0 0 20px rgba(42,157,143,.08); } .hero-image-deco-2{ position:absolute;bottom:-20px;left:-20px; width:140px;height:170px; background:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(231,111,81,.22) 4px,rgba(231,111,81,.22) 5.5px); z-index:0;border-radius:6px; } /* Headshot hover — fragments handle visuals, CSS handles lift + deco */ .hero-image-wrapper{position:relative;overflow:visible;transition:transform .5s cubic-bezier(.25,.46,.45,.94)} .hero-image-wrapper:hover{transform:translateY(-5px)} .hero-image-wrapper:hover .hero-image-deco-1{ border-color:rgba(42,157,143,.45);box-shadow:0 0 25px rgba(42,157,143,.1); } .hero-image-wrapper:hover .hero-image-deco-2{ background:repeating-linear-gradient(-45deg,transparent,transparent 4px,rgba(231,111,81,.3) 4px,rgba(231,111,81,.3) 5.5px); } .hero-image-deco-1,.hero-image-deco-2{transition:all .6s cubic-bezier(.25,.46,.45,.94)} /* Social */ .hero-socials{display:flex;gap:1rem;margin-top:2.5rem} .hero-socials a{ display:flex;align-items:center;justify-content:center; width:42px;height:42px;border:1.5px solid #E8E2DB; border-radius:50%;color:#5B7B8D; transition:all .35s ease; } .hero-socials a:hover{ border-color:#2A9D8F;color:#2A9D8F; transform:translateY(-3px); box-shadow:0 6px 20px rgba(42,157,143,.12); } .hero-socials a svg{width:18px;height:18px} /* Scroll indicator */ .hero-scroll{ position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:3; } .hero-scroll-text{font-size:.6rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#C4BBB2} .hero-scroll-line{ width:1px;height:40px; background:linear-gradient(180deg,#2A9D8F,transparent); animation:scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.6)}} /* ============================================ BUTTONS — with magnetic effect via JS ============================================ */ .btn{ display:inline-flex;align-items:center;gap:.6rem; padding:.9rem 2.2rem;font-size:.78rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase; border-radius:6px;position:relative;overflow:hidden; transition:all .4s cubic-bezier(.25,.46,.45,.94); } .btn::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent); opacity:0;transition:opacity .3s ease; } .btn:hover::before{opacity:1} .btn-primary{ background:linear-gradient(135deg,#2A9D8F,#34C4B4); color:#fff;box-shadow:0 4px 15px rgba(42,157,143,.25); } .btn-primary:hover{box-shadow:0 8px 30px rgba(42,157,143,.35)} .btn-outline{ background:transparent;color:#1A2A3A; border:1.5px solid #D6D0CA; } .btn-outline:hover{border-color:#2A9D8F;color:#2A9D8F} .btn-dark{background:#1A2A3A;color:#fff;box-shadow:0 4px 15px rgba(26,42,58,.15)} .btn-dark:hover{box-shadow:0 8px 30px rgba(26,42,58,.2)} .btn .arrow{display:inline-block;transition:transform .3s ease} .btn:hover .arrow{transform:translateX(4px)} /* ============================================ DECORATIVE ELEMENTS ============================================ */ .hash-accent{display:inline-block;width:40px;height:3px;background:linear-gradient(90deg,#E76F51,#F4A261);border-radius:2px} .hash-divider{width:120px;height:2px;margin:2rem 0;background:repeating-linear-gradient(90deg,#2A9D8F 0px,#2A9D8F 8px,transparent 8px,transparent 14px)} .hash-lines-wide{display:block;width:100%;height:1px;background:linear-gradient(90deg,transparent,#E8E2DB,transparent)} .section-divider{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:1rem 0} .section-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,#E8E2DB)} .section-divider-line:last-child{background:linear-gradient(90deg,#E8E2DB,transparent)} /* ============================================ STATS BAR ============================================ */ .stats-bar{ background:linear-gradient(135deg,#E8F5F3,#F0F9F7); padding:3.5rem 0;position:relative;overflow:hidden; border-top:1px solid rgba(42,157,143,.08); border-bottom:1px solid rgba(42,157,143,.08); } .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative;z-index:1} .stat{text-align:center;position:relative} .stat::after{ content:'';position:absolute;right:0;top:20%;height:60%; width:1px;background:rgba(42,157,143,.12); } .stat:last-child::after{display:none} .stat-num{ font-family:'DM Serif Display',serif; font-size:clamp(2.2rem,4vw,3.2rem); background:linear-gradient(135deg,#2A9D8F,#34C4B4); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; margin-bottom:.35rem; } .stat-label{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5B7B8D} /* ============================================ SECTIONS ============================================ */ .section{padding:clamp(5rem,12vw,9rem) 0;position:relative} .section--tinted{background:linear-gradient(135deg,#E8F5F3,#F0F9F7)} .section--sand{background:#F2EDE8} .section-label{ font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:#2A9D8F;display:flex;align-items:center;gap:.75rem;margin-bottom:1rem; } .section-title{ font-family:'DM Serif Display',serif;font-size:clamp(2.2rem,5vw,3.5rem); letter-spacing:-.02em;margin-bottom:1rem; } .section-subtitle{font-size:1rem;color:#5B7B8D;max-width:560px;line-height:1.85} .section-header{margin-bottom:4rem} /* ============================================ PROJECT CARDS — Clean, fragments handle decoration ============================================ */ .projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:2rem} .project-card-wrap{position:relative;overflow:visible} .project-card-wrap .project-card-hud{position:absolute;inset:0;pointer-events:none;z-index:3} .project-card{ position:relative;border-radius:10px;overflow:hidden;cursor:pointer; background:#fff;border:1px solid rgba(0,0,0,.04); transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .5s ease,border-color .4s ease; } .project-card:hover{ transform:translateY(-8px) scale(1.01); box-shadow:0 25px 60px rgba(42,157,143,.1),0 8px 20px rgba(0,0,0,.04); border-color:rgba(42,157,143,.12); } .project-card.ishtar-activate{ box-shadow:0 0 40px rgba(42,157,143,.2),0 0 80px rgba(42,157,143,.08) !important; border-color:rgba(42,157,143,.4) !important; } .project-card-image{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;border-radius:10px 10px 0 0} .project-card-image-inner{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; transition:transform .6s ease; } .project-card:hover .project-card-image-inner{transform:scale(1.03)} .project-card--steel .project-card-image{background:linear-gradient(135deg,#5B7B8D,#7A9BAD)} .project-card--teal .project-card-image{background:linear-gradient(135deg,#2A9D8F,#34C4B4)} .project-card--orange .project-card-image{background:linear-gradient(135deg,#E76F51,#F4A261)} .project-card-image .symbol{opacity:.15;transition:opacity .5s ease} .project-card:hover .project-card-image .symbol{opacity:.3} .project-card-body{padding:2rem} .project-card-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem} .tag{ font-size:.63rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:.35rem .8rem;border-radius:100px; background:rgba(42,157,143,.06);color:#2A9D8F; transition:all .4s ease; } .project-card:hover .tag{background:rgba(42,157,143,.1)} .project-card-title{font-family:'DM Serif Display',serif;font-size:1.35rem;margin-bottom:.5rem} .project-card-desc{font-size:.88rem;color:#5B7B8D;line-height:1.8;margin-bottom:1.25rem} .project-card-link{ font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:#2A9D8F;display:inline-flex;align-items:center;gap:.4rem; transition:gap .3s ease,color .4s ease; } .project-card:hover .project-card-link{color:#E76F51;gap:.6rem} .timeline-highlight{transition:opacity .5s ease,transform .5s ease;opacity:.7} .project-card:hover .timeline-highlight{opacity:1;transform:translateX(3px)} /* ============================================ ISHTAR HUD — Structured architectural marks Hash bundles, dash connectors, bar endpoints. Sharp edges. Boots online like circuitry. ============================================ */ .ishtar-frag{ position:absolute;border-radius:0;pointer-events:none; opacity:0; } .ishtar-frag--white{background:#fff} .ishtar-frag--teal{background:#2A9D8F} .ishtar-frag--orange{background:#E76F51} /* Migration layer */ .ishtar-migrate{position:fixed;inset:0;pointer-events:none;z-index:9996} /* ============================================ TIMELINE ============================================ */ .timeline{position:relative;padding-left:3.5rem} .timeline::before{ content:'';position:absolute;left:6px;top:0;bottom:0;width:2px; background:linear-gradient(180deg,#2A9D8F,rgba(42,157,143,.08)); } .timeline-item{position:relative;padding-bottom:3.5rem} .timeline-item:last-child{padding-bottom:0} .timeline-dot{ position:absolute;left:-3.5rem;top:.35rem; width:14px;height:14px;border-radius:50%; border:3px solid #2A9D8F;background:#FAF7F4; transition:all .35s ease; } .timeline-item:hover .timeline-dot{ background:#2A9D8F;box-shadow:0 0 0 6px rgba(42,157,143,.1); } .timeline-date{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8A8F96;margin-bottom:.4rem} .timeline-role{font-family:'DM Serif Display',serif;font-size:1.35rem;margin-bottom:.2rem} .timeline-company{font-size:.9rem;color:#2A9D8F;font-weight:500;margin-bottom:.6rem} .timeline-desc{font-size:.88rem;color:#5B7B8D;line-height:1.8} .timeline-highlight{ display:inline-flex;align-items:center;gap:.5rem;margin-top:.6rem; font-size:.78rem;font-weight:600;color:#E76F51; } /* ============================================ SKILLS — staggered cascade animation ============================================ */ .skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem} .skill-group{ padding:2rem;background:#fff;border-radius:10px; border:1px solid rgba(0,0,0,.04);position:relative;overflow:hidden; transition:transform .35s ease,box-shadow .35s ease; } .skill-group:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(0,0,0,.05)} .skill-group::before{ content:'';position:absolute;top:0;left:0;width:100%;height:3px; background:var(--accent,linear-gradient(90deg,#2A9D8F,#34C4B4)); } .skill-group-title{ font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--accent-text,#2A9D8F);margin-bottom:1.25rem; display:flex;align-items:center;gap:.5rem; } .skill-items{display:flex;flex-wrap:wrap;gap:.5rem} .skill-item{ font-size:.8rem;font-weight:500;padding:.45rem 1rem; border:1px solid #E8E2DB;border-radius:100px; transition:all .3s ease; opacity:0;transform:translateY(10px); } .skill-item.visible{opacity:1;transform:translateY(0)} .skill-item:hover{border-color:#2A9D8F;background:rgba(42,157,143,.04);color:#2A9D8F;transform:translateY(-2px)} /* ============================================ ABOUT ============================================ */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start} .about-text p{font-size:1rem;color:#3D4F5F;line-height:1.9;margin-bottom:1.5rem} .about-text p:first-child::first-letter{ font-family:'DM Serif Display',serif;font-size:3.5rem;float:left;line-height:.85;margin-right:.6rem; background:linear-gradient(135deg,#E76F51,#F4A261); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .uw-section{ margin-top:5rem;padding:3.5rem; background:linear-gradient(135deg,#33006B,#4B2E83); border-radius:10px;color:#fff;position:relative;overflow:hidden; } .uw-section::after{ content:'';position:absolute;top:0;right:0;width:250px;height:100%; background:repeating-linear-gradient(-45deg,transparent,transparent 5px,rgba(255,255,255,.03) 5px,rgba(255,255,255,.03) 6px); } .uw-section h3{font-family:'DM Serif Display',serif;font-size:1.7rem;margin-bottom:1.25rem} .uw-section p{font-size:.95rem;line-height:1.9;opacity:.9;max-width:600px;position:relative;z-index:1} /* ============================================ EDUCATION CARD ============================================ */ .edu-card{ padding:2.5rem;background:#fff;border-radius:10px; position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.04); } .edu-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#4B2E83,#85754D)} /* ============================================ BLOG ============================================ */ .blog-coming{text-align:center;padding:6rem 2rem} .blog-coming h2{font-family:'DM Serif Display',serif;font-size:2.2rem;margin-bottom:.75rem} .blog-coming p{color:#5B7B8D;max-width:420px;margin:0 auto;line-height:1.85} /* ============================================ CONTACT ============================================ */ .contact-header{ background:linear-gradient(135deg,#E8F5F3,#F0F9F7); padding:8rem 0 4rem;position:relative;overflow:hidden; border-bottom:1px solid rgba(42,157,143,.08); } .contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:start} .contact-info-text{font-size:1rem;color:#5B7B8D;line-height:1.9;margin-bottom:2.5rem} .contact-detail{ display:flex;align-items:center;gap:1rem;margin-bottom:1rem; padding:1rem 1.25rem;border-radius:10px;transition:background .3s ease; } .contact-detail:hover{background:rgba(42,157,143,.04)} .contact-detail-icon{ width:46px;height:46px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,rgba(42,157,143,.08),rgba(42,157,143,.03)); border-radius:12px;color:#2A9D8F;flex-shrink:0;transition:all .35s ease; } .contact-detail:hover .contact-detail-icon{ background:linear-gradient(135deg,#2A9D8F,#34C4B4);color:#fff; box-shadow:0 4px 15px rgba(42,157,143,.2); } .contact-detail-text{font-size:.9rem;color:#1A2A3A;font-weight:500} .contact-detail-label{font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:#8A8F96;font-weight:600} .contact-form{display:flex;flex-direction:column;gap:1.25rem} .form-group label{ display:block;font-size:.68rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:#5B7B8D;margin-bottom:.5rem; } .form-group input,.form-group textarea{ width:100%;padding:1rem 1.25rem;font-family:'Inter',sans-serif;font-size:.9rem; border:1.5px solid #E8E2DB;border-radius:8px;background:#fff;color:#1A2A3A; transition:border-color .3s ease,box-shadow .3s ease;outline:none; } .form-group input:focus,.form-group textarea:focus{ border-color:#2A9D8F;box-shadow:0 0 0 4px rgba(42,157,143,.06); } .form-group textarea{resize:vertical;min-height:140px} /* Form status messages */ .form-status{ padding:.75rem 1rem;border-radius:6px;font-size:.85rem;font-weight:500; text-align:center;display:none; } .form-status.success{display:block;background:rgba(42,157,143,.08);color:#2A9D8F} .form-status.error{display:block;background:rgba(231,111,81,.08);color:#E76F51} /* ============================================ CTA BANNER ============================================ */ .cta-banner{ background:linear-gradient(135deg,#E8F5F3,#FFF5F2); padding:5rem 0;text-align:center;position:relative;overflow:hidden; border-top:1px solid rgba(42,157,143,.06); border-bottom:1px solid rgba(231,111,81,.06); } .cta-banner h2{font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:1rem;position:relative;z-index:1} .cta-banner p{color:#5B7B8D;margin-bottom:2rem;position:relative;z-index:1} /* ============================================ FOOTER ============================================ */ .footer{padding:3rem 0;border-top:1px solid #E8E2DB} .footer .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem} .footer-text{font-size:.8rem;color:#6B7280;display:flex;align-items:center;gap:.5rem} .footer-links{display:flex;gap:1.5rem} .footer-links a{font-size:.8rem;color:#6B7280;transition:color .3s ease} .footer-links a:hover{color:#2A9D8F} /* ============================================ COMING CARD ============================================ */ .coming-card{text-align:center;padding:3.5rem 2rem;border:2px dashed #E8E2DB;border-radius:10px;transition:border-color .3s ease} .coming-card:hover{border-color:#C4BBB2} /* ============================================ SCROLL REVEAL ============================================ */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-delay-1{transition-delay:.12s} .reveal-delay-2{transition-delay:.24s} .reveal-delay-3{transition-delay:.36s} .reveal-delay-4{transition-delay:.48s} /* ============================================ CUSTOM CURSOR — ultra-subtle Apple glass ============================================ */ .cursor-dot,.cursor-ring{position:fixed;pointer-events:none;z-index:9998;display:none} @media(hover:hover){.cursor-dot,.cursor-ring{display:block}} .cursor-dot{ width:5px;height:5px;border-radius:50%; background:rgba(42,157,143,.18); transition:transform .15s ease,background .2s ease; } .cursor-ring{ width:26px;height:26px;border-radius:50%; border:1px solid rgba(42,157,143,.04); background:rgba(42,157,143,.008); transition:all .35s cubic-bezier(.25,.46,.45,.94); } .cursor-ring.hovering{ width:36px;height:36px; border-color:rgba(42,157,143,.06); background:rgba(42,157,143,.015); } .cursor-dot.hovering{transform:scale(1.6);background:rgba(42,157,143,.3)} /* ============================================ RESPONSIVE ============================================ */ @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;text-align:center} .hero-content{order:2}.hero-image{order:1;justify-content:center} .hero-image-wrapper{max-width:280px} .hero-desc{margin:0 auto 2rem} .hero-cta{justify-content:center} .hero-socials{justify-content:center} .hero-label{justify-content:center} .hero-scroll{display:none} .about-grid,.contact-grid{grid-template-columns:1fr} .projects-grid{grid-template-columns:1fr} .nav-links{display:none} .nav-toggle{display:flex} } @media(max-width:600px){ .stats-grid{grid-template-columns:1fr;gap:.5rem} .stat::after{display:none} .hero-name{font-size:clamp(2.8rem,12vw,4rem)} .skills-grid{grid-template-columns:1fr} }