:root { --bg: #F7F6F3; --bg2: #EFEDE8; --surface: #FFFFFF; --surface2: #F9F8F6; --glass: rgba(255,255,255,0.72); --glass-strong: rgba(255,255,255,0.92); --glass-border: rgba(0,0,0,0.07); --glass-border-strong: rgba(0,0,0,0.12); --blur: blur(20px) saturate(160%); --blur-sm: blur(12px) saturate(140%); --accent: #E05C2A; --accent-glow: rgba(224,92,42,0.15); --accent-soft: rgba(224,92,42,0.08); --accent2: #7C3AED; --accent2-soft: rgba(124,58,237,0.08); --green: #16A34A; --green-soft: rgba(22,163,74,0.08); --blue: #1D4ED8; --blue-soft: rgba(29,78,216,0.08); --yellow: #D97706; --red: #DC2626; --text: #1A1917; --text-2: rgba(26,25,23,0.65); --text-3: rgba(26,25,23,0.42); --text-4: rgba(26,25,23,0.22); --creator: #16A34A; --freelancer: #7C3AED; --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; --sidebar-w: 248px; --nav-h: 62px; --shadow-xs: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05); --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 3px 10px rgba(0,0,0,0.06); --shadow-xl: 0 16px 48px rgba(0,0,0,0.11), 0 6px 16px rgba(0,0,0,0.06); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;} body{ font-family:'DM Sans',system-ui,sans-serif; background:var(--bg);color:var(--text); min-height:100vh;overflow-x:hidden; -webkit-font-smoothing:antialiased; } body::before{ content:'';position:fixed;inset:0;z-index:-2; background: radial-gradient(ellipse 50% 40% at 10% 5%, var(--accent-glow) 0%, transparent 52%), radial-gradient(ellipse 45% 40% at 90% 12%, rgba(124,58,237,.20) 0%, transparent 52%), radial-gradient(ellipse 50% 45% at 82% 92%, rgba(224,92,42,.16) 0%, transparent 55%), radial-gradient(ellipse 45% 45% at 18% 88%, rgba(29,78,216,.14) 0%, transparent 55%), radial-gradient(ellipse 42% 42% at 55% 48%, rgba(22,163,74,.07) 0%, transparent 60%), var(--bg); pointer-events:none; animation: bgFloat 16s ease-in-out infinite alternate; } @keyframes bgFloat{ 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-1.5%,0) scale(1.06); } 100% { transform: translate3d(-1.5%,1%,0) scale(1.03); } } body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(var(--glass-border-strong) 1.3px, transparent 1.3px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 0%, transparent 80%); opacity:.6; } /* ── SVG ICON SYSTEM ── */ .icon-svg { display:inline-flex;align-items:center;justify-content:center; flex-shrink:0; } .icon-svg svg {width:100%;height:100%;} /* Nav icon container */ .ni-icon { width:18px;height:18px; display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; } .ni-icon svg {width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} /* Section card icons */ .card-icon-img { width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .card-icon-img svg {width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* Role card icons */ .role-icon-wrap { width:64px;height:64px;border-radius:18px; margin:0 auto 14px; display:flex;align-items:center;justify-content:center; } .role-icon-wrap svg {width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* How-card icons */ .how-card-icon-wrap { width:56px;height:56px;border-radius:16px; background:linear-gradient(135deg,rgba(224,92,42,.1),rgba(240,122,69,.05)); border:1px solid rgba(224,92,42,.15); display:flex;align-items:center;justify-content:center; margin:0 auto 14px;position:relative;z-index:1; } .how-card-icon-wrap svg {width:26px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* Why card icons */ .why-icon-wrap { width:44px;height:44px;border-radius:12px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .why-icon-wrap svg {width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} .why-icon-wrap.ic-1{background:rgba(224,92,42,.1);border:1px solid rgba(224,92,42,.18);color:var(--accent);} .why-icon-wrap.ic-2{background:rgba(29,78,216,.08);border:1px solid rgba(29,78,216,.15);color:var(--blue);} .why-icon-wrap.ic-3{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.15);color:var(--green);} /* f-avatar icon override */ .f-card-icon { width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); margin:0 auto 8px;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:.95rem;font-family:'Outfit',sans-serif;color:#fff; } /* project icon images */ .pico-icon {width:22px;height:22px;stroke:var(--text-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;} /* real brand marks (YouTube / Instagram / LinkedIn) are official FILLED single-path glyphs, so they must opt out of the stroke styling above. Colour is set with `color` and picked up through currentColor, so one rule per brand is enough. */ /* Payments + Earnings rows share one wallet mark, whatever the content type */ .pico.pico-pay{background:rgba(22,163,74,.10);} [data-theme="dark"] .pico.pico-pay{background:rgba(22,163,74,.16);} .pico-icon.pico-wallet{fill:var(--green);stroke:none;width:20px;height:20px;} .pico-icon.pico-brand{fill:currentColor;stroke:none;width:21px;height:21px;} .pico-yt{color:#ff0000;} .pico-ig{color:#d6249f;} .pico-li{color:#0a66c2;} /* Social icons */ .social-btn-icon {width:16px;height:16px;flex-shrink:0;} .screen{display:none;min-height:100vh;flex-direction:column;} .screen.active{display:flex;} /* dashboards are app shells, not documents: lock them to one viewport so the sidebar (and its Logout) can never be pushed below the fold */ #screen-creator.active, #screen-freelancer.active{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;} .glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);} .glass-strong{background:var(--glass-strong);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border-strong);} /* ── NAV ── */ nav{ display:flex;align-items:center;justify-content:space-between; padding:0 14px 0 18px;height:var(--nav-h); background:transparent; border:1px solid transparent; border-radius:999px; position:sticky;top:4px;z-index:200; margin:4px auto 6px; width:calc(100% - 48px);max-width:1320px; flex-shrink:0;gap:8px; box-shadow:none; transition:max-width .35s ease, box-shadow .35s ease, top .35s ease, background .35s ease, border-color .35s ease; } nav.scrolled{ max-width:1240px; top:4px; background:rgba(247,246,243,0.72); backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%); border-color:var(--glass-border-strong); box-shadow:var(--shadow-lg); } [data-theme="dark"] nav.scrolled{ background:rgba(25,24,23,0.72); } .logo{ font-family:'Outfit',sans-serif;font-size:1.22rem;font-weight:800; letter-spacing:-.5px;display:flex;align-items:center;gap:4px;flex-shrink:0; } .logo-img{height:34px;width:auto;object-fit:contain;padding:0;background:transparent;border:none;} .logo-icon{ width:32px;height:32px;border-radius:9px; background:linear-gradient(135deg,#fff,#f3f3f3); display:flex;align-items:center;justify-content:center;font-size:.95rem; box-shadow:0 2px 10px var(--accent-glow);flex-shrink:0;position:relative; } .logo-icon::after{content:'';position:absolute;inset:-1px;border-radius:10px;background:linear-gradient(135deg,rgba(224,92,42,.3),rgba(240,122,69,.1));z-index:-1;filter:blur(3px);} .logo span{color:var(--text);} .logo-text{color:var(--text);font-weight:500;display:inline-block;-webkit-text-fill-color:currentColor;letter-spacing:-.3px;} /* clickable brand lockups (every Aalynex logo/name routes to the landing page) */ .logo-home{cursor:pointer;transition:opacity .18s ease;} .logo-home:hover{opacity:.72;} .logo-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;} /* clickable brand lockups (top navbar logo/name routes to the landing page) */ .logo-home{cursor:pointer;transition:opacity .18s ease;} .logo-home:hover{opacity:.72;} .logo-home:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;} .logo .logo-accent{color:var(--accent);-webkit-text-fill-color:var(--accent);} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;} .nav-back .nav-back-arrow{display:inline;} .nav-greeting{font-size:.8rem;color:var(--text-3);white-space:nowrap;} .nav-greeting strong{color:var(--creator);} .nav-greeting{background:rgba(0,0,0,0.04);padding:6px 12px;border-radius:999px;border:1px solid var(--glass-border);} .nav-greeting-f strong{color:var(--freelancer);} .hamburger{ display:none;width:36px;height:36px;border-radius:8px; background:var(--glass);border:1px solid var(--glass-border); align-items:center;justify-content:center;cursor:pointer; flex-direction:column;gap:4px;padding:9px; backdrop-filter:var(--blur-sm);flex-shrink:0;box-shadow:var(--shadow-xs); } .hamburger span{display:block;height:1.5px;width:18px;background:var(--text);border-radius:2px;transition:all .3s;} .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);} .nav-center{ display:flex;align-items:center;gap:4px; position:absolute;left:50%;transform:translateX(-50%); } .nav-link, .nav-link:link, .nav-link:visited, .nav-link:active{ font-size:.9rem;font-weight:500;color:var(--text-2); text-decoration:none;padding:8px 14px;border-radius:999px; transition:background .2s, color .2s;white-space:nowrap; } .nav-link:hover{background:var(--bg2);color:var(--text);} .how-section,.why-section{scroll-margin-top:90px;} .mob-only{display:none;} .desk-only{display:inline;} @media(max-width:768px){ .nav-center{display:flex;gap:0;} .mob-only{display:inline;} .desk-only{display:none;} } /* ── BUTTONS ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:10px 20px;border-radius:var(--radius-sm);border:none; cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.875rem;font-weight:500; transition:all .2s cubic-bezier(.25,.46,.45,.94);letter-spacing:-.01em;white-space:nowrap; } .btn:active{transform:scale(.97);} .btn-primary{ background:linear-gradient(135deg,var(--accent),#F07A45);color:#fff; box-shadow:0 2px 8px var(--accent-glow);position:relative;overflow:hidden; } .btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.25),transparent);transition:0.5s;} .btn-primary:hover::after{left:100%;} .btn-primary:hover{background:linear-gradient(135deg,#CB5224,#E36A35);box-shadow:0 4px 18px rgba(224,92,42,.30);transform:translateY(-1px);} .btn-ghost{background:var(--surface);backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border-strong);color:var(--text);box-shadow:var(--shadow-xs);} .btn-ghost:hover{border-color:rgba(0,0,0,.18);background:var(--surface2);box-shadow:var(--shadow-sm);} .btn-light{background:#ffffff;color:#141414;border:1px solid rgba(0,0,0,0.08);box-shadow:var(--shadow-xs);} .btn-light:hover{background:#f1efeb;box-shadow:var(--shadow-sm);transform:translateY(-1px);} .btn-green-btn{background:var(--green);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(22,163,74,.18);} .btn-green-btn:hover{background:#15803D;box-shadow:0 4px 14px rgba(22,163,74,.22);} .btn-purple{background:var(--accent2);color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.18);} .btn-purple:hover{background:#6D28D9;box-shadow:0 4px 14px rgba(124,58,237,.22);} .btn-outline-creator{background:transparent;border:1px solid rgba(22,163,74,.3);color:var(--creator);} .btn-outline-creator:hover{background:var(--green-soft);} .btn-outline-f{background:transparent;border:1px solid rgba(124,58,237,.3);color:var(--freelancer);} .btn-outline-f:hover{background:var(--accent2-soft);} .btn-danger{background:transparent;border:1px solid rgba(220,38,38,.25);color:var(--red);} .btn-danger:hover{background:rgba(220,38,38,.06);} .btn-sm{padding:7px 16px;font-size:.8rem;border-radius:999px;} .btn-xs{padding:5px 11px;font-size:.75rem;} .full-btn{width:100%;} /* ── FORMS ── */ .fg{margin-bottom:16px;position:relative;} .fg label{display:block;font-size:.75rem;color:var(--text-2);margin-bottom:6px;font-weight:500;letter-spacing:.02em;} .fg input,.fg select,.fg textarea{ width:100%;padding:11px 13px;background:var(--surface); border:1px solid var(--glass-border-strong);border-radius:10px; color:var(--text);font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none; box-shadow:var(--shadow-xs);transition:all 0.22s cubic-bezier(.25,.46,.45,.94); } .fg input:hover,.fg select:hover,.fg textarea:hover{border-color:rgba(0,0,0,.18);box-shadow:var(--shadow-sm);} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:rgba(224,92,42,.5);background:#fff;box-shadow:0 0 0 3px rgba(224,92,42,.1), var(--shadow-sm);transform:scale(1.015);} .fg input::placeholder{color:var(--text-3);opacity:.8;} .fg select option{background:#fff;color:var(--text);} .fg textarea{resize:vertical;min-height:80px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .input-error{border-color:rgba(220,38,38,.4)!important;} .field-err{font-size:.72rem;color:var(--red);margin-top:3px;} .otp-note{font-size:.72rem;color:var(--green);margin-top:3px;display:flex;align-items:center;gap:4px;} /* ── LANDING ── */ .hero{ flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding:72px 20px 0; position:relative;overflow:hidden; } .hero-glow{ position:absolute;width:680px;height:680px;border-radius:50%; background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%); top:-120px;left:50%;transform:translateX(-50%);pointer-events:none; filter:blur(30px); } .badge{ display:inline-flex;align-items:center;gap:6px;padding:5px 14px; border-radius:99px;background:rgba(224,92,42,.08); border:1px solid rgba(224,92,42,.2);color:var(--accent);font-size:.76rem;font-weight:500; margin-bottom:22px;animation:fadeDown .5s ease both;box-shadow:var(--shadow-xs); } .badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;} @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}} h1{ font-family:'Outfit',sans-serif; font-size:clamp(2.2rem,5.5vw,4.4rem); font-weight:600;line-height:1.08;letter-spacing:-1px; margin-bottom:18px;animation:fadeDown .6s .08s ease both;color:var(--text); } h1 em{ font-style:normal; color:inherit; background:none; -webkit-text-fill-color:currentColor; } .hero-sub{color:var(--text-2);font-size:1rem;max-width:500px;line-height:1.7;margin-bottom:36px;animation:fadeDown .6s .16s ease both;} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:fadeDown .6s .22s ease both;margin-bottom:48px;} .hero-btn{padding:13px 30px;font-size:.95rem;border-radius:999px;} /* Role Cards */ .role-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;animation:fadeUp .7s .3s ease both;} .role-card{ background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:34px 34px 28px; min-width:248px; max-width:300px; text-align:center; cursor:pointer; box-shadow:var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; } .role-card:hover{ transform: translateY(-8px) scale(1.03); box-shadow: 0 16px 40px rgba(0,0,0,0.25),0 0 20px rgba(224,92,42,0.2); } .role-card:active{ transform: scale(0.97); } .role-card h3{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:7px;color:var(--text);} .role-card p{color:var(--text-3);font-size:.85rem;line-height:1.55;} .role-card.cc .role-icon-wrap{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.2);color:var(--creator);} .role-card.fc .role-icon-wrap{background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.2);color:var(--freelancer);} .role-card.cc:hover{border-color:rgba(22,163,74,.3);transform:translateY(-5px);box-shadow:0 12px 32px rgba(22,163,74,.12), var(--shadow-md);} .role-card.fc:hover{border-color:rgba(124,58,237,.3);transform:translateY(-5px);box-shadow:0 12px 32px rgba(124,58,237,.12), var(--shadow-md);} /* HOW IT WORKS */ .how-section{padding:48px 24px 48px;text-align:center;animation:fadeUp .7s .35s ease both;} .section-heading{font-family:'Outfit',sans-serif;font-size:clamp(1.55rem,3.5vw,2.2rem);font-weight:600;letter-spacing:-.3px;margin-bottom:10px;color:var(--text);} .section-heading em{font-style:normal;color:inherit;background:none;-webkit-text-fill-color:currentColor;} .section-sub{color:var(--text-3);font-size:.88rem;margin-bottom:36px;} .how-cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;max-width:1120px;margin:0 auto;position:relative;} .how-card{ background:var(--surface);border:1px solid var(--glass-border); border-radius:var(--radius-lg);padding:28px 24px 24px;flex:1;min-width:190px;max-width:240px; text-align:center;transition:all .3s cubic-bezier(.25,.46,.45,.94); position:relative;overflow:hidden;box-shadow:var(--shadow-sm); } .how-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);background:radial-gradient(circle at 50% 0%,rgba(224,92,42,.05) 0%,transparent 70%);opacity:0;transition:opacity .3s;} .how-card:hover{transform:translateY(-6px);border-color:rgba(224,92,42,.25);box-shadow:0 16px 40px rgba(224,92,42,.10), var(--shadow-md);} .how-card:hover::before{opacity:1;} .how-card-step{font-family:'Outfit',sans-serif;font-size:.98rem;font-weight:700;margin-bottom:5px;letter-spacing:-.2px;position:relative;z-index:1;color:var(--text);} .how-card-sub{color:var(--text-3);font-size:.78rem;line-height:1.5;position:relative;z-index:1;} .how-card-num{ display:inline-flex;align-items:center;justify-content:center; width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg,var(--accent),#F07A45); color:#fff;font-size:.68rem;font-weight:800; position:absolute;top:14px;right:16px; box-shadow:0 2px 8px var(--accent-glow); } /* WHY AALYNEX */ .why-section{padding:0 24px 64px;animation:fadeUp .7s .42s ease both;} .why-inner{max-width:1120px;margin:0 auto;} .why-cards{display:flex;gap:14px;flex-direction:column;} .why-card{ animation:fadeUp .6s ease both;background:var(--surface);border:1px solid var(--glass-border); border-radius:var(--radius);padding:18px 22px;display:flex;align-items:center;gap:16px; transition:all .35s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;box-shadow:var(--shadow-xs); } .why-card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:0 2px 2px 0;opacity:0;transition:opacity .3s;} .why-card:hover{border-color:rgba(0,0,0,.1);transform:translateX(6px) scale(1.01);box-shadow:var(--shadow-md);} @media(hover:none){.why-card:active{transform:scale(0.97);box-shadow:var(--shadow-sm);}} .why-card:hover::after{opacity:1;} .why-card-text{flex:1;min-width:0;} .why-card-title{font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:700;margin-bottom:3px;letter-spacing:-.1px;color:var(--text);} .why-card-desc{color:var(--text-3);font-size:.78rem;line-height:1.5;} .landing-divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border-strong),transparent);margin:0 auto;max-width:860px;} .stats-bar{display:flex;gap:0;justify-content:center;border-top:1px solid var(--glass-border);flex-wrap:wrap;padding:0;background:var(--surface);} .stat{padding:18px 32px;text-align:center;border-right:1px solid var(--glass-border);flex:1;min-width:100px;} .stat:last-child{border-right:none;} .stat strong{display:block;font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#F07A45);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .stat span{color:var(--text-3);font-size:.75rem;} /* ── AUTH BACKGROUND ── takeuforward puts a faint circuit-board line drawing behind its login card. Same idea here, but drawn from OUR platform's motifs instead of circuits: film strips, play buttons, an edit timeline with keyframe diamonds, an audio waveform and crop/aspect-ratio framing marks - i.e. a video edit bay. Two sparse clusters (top-right + bottom-left) exactly like TUF. Pure CSS: the art lives in ::before / ::after as inline SVG data URIs, so index.html needs no new markup at all. No negative offsets and no overflow:hidden on purpose - the tall Sign Up form still has to be able to scroll, and a negatively-offset absolute layer would have added a stray scrollbar. */ #screen-auth{position:relative;} #screen-auth::before, #screen-auth::after{ content:'';position:absolute;pointer-events:none;z-index:0; background-repeat:no-repeat; } #screen-auth::before{top:0;right:0;width:min(50vw,600px);height:min(48vh,440px);background-position:top right;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 440' fill='none' stroke='rgba(26,25,23,0.13)' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M600 54 H470 V112 H392'/%3E%3Crect x='386' y='106' width='12' height='12' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M600 152 H540 V104'/%3E%3Crect x='535' y='99' width='10' height='10' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M600 386 H452 V330 H374'/%3E%3Crect x='368' y='324' width='12' height='12' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M600 250 H556'/%3E%3Crect x='551' y='245' width='10' height='10' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='330' y='26' width='176' height='66' rx='7'/%3E%3Cline x1='330' y1='41' x2='506' y2='41'/%3E%3Cline x1='330' y1='77' x2='506' y2='77'/%3E%3Crect x='339' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='339' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='363' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='363' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='387' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='387' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='411' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='411' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='435' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='435' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='459' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='459' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='483' y='30' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='483' y='81' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Ccircle cx='212' cy='59' r='34'/%3E%3Cpath d='M200 45 L229 59 L200 73 Z'/%3E%3Cpath d='M246 59 H330'/%3E%3Cline x1='120' y1='196' x2='530' y2='196'/%3E%3Cpath d='M206 187 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M288 187 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M370 187 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M452 187 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M120 196 V150'/%3E%3Crect x='115' y='145' width='10' height='10' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cline x1='150' y1='276' x2='150' y2='296' stroke-linecap='round'/%3E%3Cline x1='163' y1='264' x2='163' y2='308' stroke-linecap='round'/%3E%3Cline x1='176' y1='272' x2='176' y2='300' stroke-linecap='round'/%3E%3Cline x1='189' y1='256' x2='189' y2='316' stroke-linecap='round'/%3E%3Cline x1='202' y1='268' x2='202' y2='304' stroke-linecap='round'/%3E%3Cline x1='215' y1='248' x2='215' y2='324' stroke-linecap='round'/%3E%3Cline x1='228' y1='262' x2='228' y2='310' stroke-linecap='round'/%3E%3Cline x1='241' y1='274' x2='241' y2='298' stroke-linecap='round'/%3E%3Cline x1='254' y1='258' x2='254' y2='314' stroke-linecap='round'/%3E%3Cline x1='267' y1='270' x2='267' y2='302' stroke-linecap='round'/%3E%3Cline x1='280' y1='252' x2='280' y2='320' stroke-linecap='round'/%3E%3Cline x1='293' y1='266' x2='293' y2='306' stroke-linecap='round'/%3E%3Cline x1='306' y1='275' x2='306' y2='297' stroke-linecap='round'/%3E%3Cpath d='M150 286 H136 V330'/%3E%3Cpath d='M400 326 V300 H426'/%3E%3Cpath d='M514 300 H540 V326'/%3E%3Cpath d='M400 358 V384 H426'/%3E%3Cpath d='M514 384 H540 V358'/%3E%3C/svg%3E");} #screen-auth::after{bottom:0;left:0;width:min(46vw,520px);height:min(46vh,440px);background-position:bottom left;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 440' fill='none' stroke='rgba(26,25,23,0.13)' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M0 392 H128 V330 H206'/%3E%3Crect x='200' y='324' width='12' height='12' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M0 300 H70 V252'/%3E%3Crect x='65' y='247' width='10' height='10' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M0 96 H96 V150 H168'/%3E%3Crect x='162' y='144' width='12' height='12' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='196' y='60' width='200' height='68' rx='7'/%3E%3Cline x1='196' y1='75' x2='396' y2='75'/%3E%3Cline x1='196' y1='113' x2='396' y2='113'/%3E%3Crect x='205' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='205' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='229' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='229' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='253' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='253' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='277' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='277' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='301' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='301' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='325' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='325' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='349' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='349' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='373' y='64' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Crect x='373' y='117' width='11' height='7' rx='2' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M240 176 H452' stroke-dasharray='9 8'/%3E%3Ccircle cx='462' cy='176' r='9'/%3E%3Cpath d='M296 168 V184 M348 168 V184 M400 168 V184'/%3E%3Cline x1='40' y1='252' x2='470' y2='252'/%3E%3Cpath d='M124 243 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M206 243 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M288 243 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cpath d='M370 243 l9 9 l-9 9 l-9 -9 z' fill='rgba(26,25,23,0.05)'/%3E%3Cline x1='232' y1='332' x2='232' y2='356' stroke-linecap='round'/%3E%3Cline x1='245' y1='318' x2='245' y2='370' stroke-linecap='round'/%3E%3Cline x1='258' y1='328' x2='258' y2='360' stroke-linecap='round'/%3E%3Cline x1='271' y1='310' x2='271' y2='378' stroke-linecap='round'/%3E%3Cline x1='284' y1='324' x2='284' y2='364' stroke-linecap='round'/%3E%3Cline x1='297' y1='302' x2='297' y2='386' stroke-linecap='round'/%3E%3Cline x1='310' y1='318' x2='310' y2='370' stroke-linecap='round'/%3E%3Cline x1='323' y1='330' x2='323' y2='358' stroke-linecap='round'/%3E%3Cline x1='336' y1='314' x2='336' y2='374' stroke-linecap='round'/%3E%3Cline x1='349' y1='326' x2='349' y2='362' stroke-linecap='round'/%3E%3Cline x1='362' y1='308' x2='362' y2='380' stroke-linecap='round'/%3E%3Cline x1='375' y1='322' x2='375' y2='366' stroke-linecap='round'/%3E%3Cline x1='388' y1='331' x2='388' y2='357' stroke-linecap='round'/%3E%3Cline x1='401' y1='316' x2='401' y2='372' stroke-linecap='round'/%3E%3Cpath d='M232 344 H214 V392'/%3E%3Ccircle cx='430' cy='332' r='30'/%3E%3Cpath d='M420 320 L445 332 L420 344 Z'/%3E%3Cpath d='M400 332 H340'/%3E%3Cpath d='M40 118 V92 H66'/%3E%3Cpath d='M142 92 H168 V118'/%3E%3Cpath d='M40 144 V170 H66'/%3E%3Cpath d='M142 170 H168 V144'/%3E%3C/svg%3E");} /* the navbar and the login card must stay above the artwork */ #screen-auth > nav, #screen-auth .auth-wrap{position:relative;z-index:1;} /* ── AUTH BACKGROUND, CENTRE BAND ── The two corner clusters left the middle of the screen empty. TUF fills its middle too, so this is a third layer: a wide band centred on the card. Every motif sits in the outer thirds (preview monitor + clip stack on the left, timeline tracks + publish node on the right) because the card owns the middle 440px. The two long horizontal rails DO run through the centre on purpose - they vanish behind the card and reappear on the other side, which is what makes the whole thing read as one connected diagram. It hangs off .auth-wrap (not a third pseudo-element on #screen-auth, which only has two) and is vertically centred with translateY, so it never adds document height. */ #screen-auth .auth-wrap::before{ content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); height:min(58vh,480px);pointer-events:none;z-index:0; background-repeat:no-repeat;background-position:center center;background-size:contain; background-image:url("data:image/svg+xml,<<< 4,445-char data URI — attached file se lo >>>"); } /* ── AUTH BACKGROUND, FULL-PAGE TEXTURE ── The corner clusters and the centre band both leave the area immediately around the card bare, but takeuforward's circuit art actually covers the WHOLE page - it runs behind its login card too, just very faintly. This is that layer: one seamless 340px tile of the same edit-bay vocabulary (rails, junction nodes, film perforations, a keyframe, a play button, waveform bars) repeated across the viewport. position:fixed on purpose - it covers the navbar area as well and can never add document height, so the tall Sign Up form still scrolls normally. Strokes are roughly half the corner clusters' opacity because this one is directly behind the form and must not compete with it. */ #screen-auth .auth-wrap::after{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background-repeat:repeat;background-position:center center;background-size:340px 340px; background-image:url("data:image/svg+xml,<<< 1,518-char tile URI >>>"); } /* the card sits above every art layer */ #screen-auth .auth-box{z-index:1;} @media (max-width:768px){ /* the card fills a phone screen - a centre band would only show as noise */ #screen-auth .auth-wrap::before{display:none;} } @media (max-width:768px){ /* on a phone the card fills the screen, so the art only peeks out */ #screen-auth::before{width:76vw;height:30vh;opacity:.55;} #screen-auth::after{width:72vw;height:28vh;opacity:.55;} } @media (prefers-reduced-motion:reduce){ #screen-auth::before,#screen-auth::after{opacity:.5;} } /* ── AUTH CARD HEADER ── takeuforward opens its login card with the logo + wordmark and a welcome line, then the form. Same here. It lives in .auth-box ABOVE .auth-tabs, so it is shared by the Login and the Sign Up tab instead of being duplicated. It reuses .logo / .logo-img / .logo-text, which means the dark-theme white logo swap applies for free - but the navbar hides .logo-text on small screens, so it has to be forced back on here (same trick as the team modal and the footer). */ .auth-head{text-align:center;margin-bottom:22px;} .auth-brand{display:flex;align-items:center;justify-content:center;gap:7px;font-size:1.5rem;margin-bottom:14px;} .auth-brand .logo-img{height:32px;} .auth-brand .logo-text{display:inline-block !important;font-weight:600;} .auth-welcome{margin:0;font-family:'Outfit',sans-serif;font-size:1.02rem;font-weight:700;letter-spacing:-.2px;color:var(--text);} .auth-welcome-sub{margin:5px 0 0;font-size:.8rem;color:var(--text-3);} /* ── AUTH ── */ .auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px;} .auth-box{background:var(--surface);border:1px solid var(--glass-border-strong);border-radius:var(--radius-lg);padding:36px;width:100%;max-width:440px;position:relative;overflow:hidden;box-shadow:var(--shadow-xl);} .auth-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--radius-lg) var(--radius-lg) 0 0;} .auth-tabs{display:flex;margin-bottom:24px;background:var(--bg2);border-radius:var(--radius-sm);padding:3px;border:1px solid var(--glass-border);} .auth-tab{flex:1;padding:8px;text-align:center;border-radius:7px;cursor:pointer;font-size:.85rem;font-weight:500;color:var(--text-3);transition:all .2s;} .auth-tab.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);} .role-select{display:flex;gap:9px;margin-bottom:20px;} .role-btn{flex:1;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--glass-border-strong);background:transparent;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:500;color:var(--text-3);transition:all .2s;text-align:center;} .role-btn.ac{border-color:rgba(22,163,74,.35);color:var(--creator);background:var(--green-soft);} .role-btn.af{border-color:rgba(124,58,237,.35);color:var(--freelancer);background:var(--accent2-soft);} .upload-area{border:1.5px dashed rgba(0,0,0,.12);border-radius:var(--radius-sm);padding:16px;text-align:center;cursor:pointer;color:var(--text-3);font-size:.8rem;transition:all .2s;background:var(--bg2);} .upload-area:hover{border-color:rgba(124,58,237,.4);color:var(--text-2);} .form-footer{margin-top:14px;text-align:center;font-size:.8rem;color:var(--text-3);} .form-footer a{color:var(--accent);cursor:pointer;text-decoration:none;} .form-footer a:hover{text-decoration:underline;} .btn-loading{position:relative;pointer-events:none;opacity:.75;} .btn-loading::after{content:'';position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;right:12px;top:50%;transform:translateY(-50%);} @keyframes spin{to{transform:translateY(-50%) rotate(360deg);}} /* ── TOAST ── */ /* ── BRAND SPLASH ───────────────────────────────────────────── Only the logo + wordmark, gently breathing in and out. Same look in both themes because it uses --bg / --text. No spinner, no bar. */ /* NOTE: the fade lives on .splash-hide only, so raising the curtain is instant (no 0.4s fade-in during which the page behind is visible) while dropping it still fades out smoothly. */ .app-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:var(--bg);opacity:1;visibility:visible;} .app-splash.splash-hide{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s;} .splash-inner{display:flex;align-items:center;gap:14px;animation:splashPulse 1.6s ease-in-out infinite;} .splash-logo{height:72px;width:auto;display:block;} .splash-word{font-family:'Outfit','DM Sans',sans-serif;font-size:3.1rem;font-weight:600;color:var(--text);letter-spacing:.2px;line-height:1;} /* halka halka fade in-out (blink) instead of a loading bar */ @keyframes splashPulse{0%,100%{opacity:.42;}50%{opacity:1;}} /* offline fallback, only shown when the network never recovers */ .splash-offline{display:none;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 24px;max-width:340px;} .app-splash.is-offline .splash-offline{display:flex;animation:fadeIn .35s ease both;} .app-splash.is-offline .splash-inner{animation:none;opacity:1;} .splash-offline svg{width:38px;height:38px;color:var(--text-3);margin-bottom:2px;} .splash-off-title{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:600;color:var(--text);} .splash-off-sub{font-size:.86rem;color:var(--text-2);line-height:1.5;} .splash-offline .btn{margin-top:6px;} @media(max-width:520px){.splash-logo{height:58px;}.splash-word{font-size:2.5rem;}.splash-offline svg{width:34px;height:34px;}} @media(prefers-reduced-motion:reduce){.splash-inner{animation:none;}} .toast-wrap{position:fixed;top:72px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px;pointer-events:none;} .toast{background:var(--surface);border:1px solid var(--glass-border-strong);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:.84rem;min-width:240px;animation:toastIn .3s ease both;box-shadow:var(--shadow-lg);pointer-events:all;color:var(--text);} .toast.hide{animation:toastOut .3s ease both;} .toast-icon{font-size:1rem;flex-shrink:0;} @keyframes toastIn{from{opacity:0;transform:translateX(60px);}to{opacity:1;transform:none;}} @keyframes toastOut{to{opacity:0;transform:translateX(60px);}} /* ── DASHBOARD LAYOUT ── */ /* fills whatever height the locked screen leaves under the navbar; min-height:0 is what lets the children scroll internally instead of growing */ .dash-layout{flex:1 1 auto;display:flex;overflow:hidden;position:relative;min-height:0;} .sidebar-overlay{display:none;position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.25);backdrop-filter:blur(3px);} .sidebar-overlay.show{display:block;} /* ── SIDEBAR ── */ .sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--surface); border-right:1px solid var(--glass-border); padding:20px 12px;display:flex;flex-direction:column;gap:2px; /* the whole column scrolls as one piece - options AND the Logout row. Nothing is pinned, so Logout just follows the last option, which is what makes it adapt to any screen height or number of options. overflow-x is explicitly hidden: this box only ever overflows vertically, and letting overflow-x fall back to auto was what drew that thin dark line along the bottom-left edge. */ overflow-y:auto;overflow-x:hidden;z-index:160; height:100%;min-height:0; transition:transform .3s cubic-bezier(.25,.46,.45,.94); box-shadow:var(--shadow-sm); } /* the only scrolling part of the sidebar: profile card + every nav row. min-height:0 is required or a flex child refuses to shrink and scroll. */ /* the only scrolling part of the sidebar: profile card + every nav row. min-height:0 is required or a flex child refuses to shrink and scroll. overflow-x:hidden so a vertical scrollbar can never drag a horizontal one along with it. */ /* kept only so index.html needs no change - it is a plain pass-through box now, deliberately WITHOUT its own scrolling or flex growth, so the nav items participate in the sidebar's single scroll. */ .sb-scroll{display:flex;flex-direction:column;gap:2px;} .sb-profile{background:var(--bg2);border:1px solid var(--glass-border);border-radius:var(--radius);padding:14px;margin-bottom:16px;display:flex;align-items:center;gap:11px;} .sb-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0;font-family:'Outfit',sans-serif;} .sb-av-creator{background:linear-gradient(135deg,var(--creator),#059669);color:#fff;} .sb-av-freelancer{background:linear-gradient(135deg,var(--freelancer),#6D28D9);color:#fff;} .sb-name{font-size:.85rem;font-weight:600;line-height:1.2;color:#111;} .sb-role{font-size:.7rem;color:#444;} .sb-section{font-size:.67rem;color:#666;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 10px 5px;} .nav-item{ display:flex;align-items:center;gap:9px;padding:9px 11px; border-radius:var(--radius-sm);cursor:pointer;color:#333; font-size:.85rem;font-weight:500;transition:all .2s; } .nav-item:hover{background:var(--bg2);color:#111;} .nav-item.active{ background:rgba(224,92,42,.08);color:var(--accent); border:1px solid rgba(224,92,42,.15);border-left:3px solid var(--accent); } .nav-item .ni{font-size:.95rem;width:18px;text-align:center;color:inherit;} .nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:99px;min-width:18px;text-align:center;} /* soft "PRO" pill used by the AI feature rows in the sidebar */ .nav-badge-pro{background:var(--accent-soft);color:var(--accent);letter-spacing:.3px;} /* sits OUTSIDE .sb-scroll: always visible, never overlaps a nav row, and nothing scrolls through it. flex-shrink:0 keeps it at full height. */ .sb-logout{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;color:var(--red);font-size:.85rem;font-weight:500;transition:all .2s;flex-shrink:0;margin-top:auto;position:relative;border:1px solid rgba(220,38,38,.15);background:linear-gradient(rgba(220,38,38,.04),rgba(220,38,38,.04)),var(--surface);} /* hairline separating the pinned footer from the scrolling list above it */ .sb-logout::before{content:'';position:absolute;left:-12px;right:-12px;top:-8px;height:1px;background:var(--glass-border);} .sb-logout:hover{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25);} /* ── DASH MAIN ── */ .dash-main{flex:1;overflow-y:auto;padding:28px 28px;scroll-behavior:smooth;background:var(--bg);min-height:0;} .page-head{margin-bottom:22px;} .page-head h2{font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:700;letter-spacing:-.3px;color:var(--text);} .page-head p{color:var(--text-2);font-size:.85rem;margin-top:3px;} /* ── METRIC CARDS ── */ .cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px;} .mc{ background:var(--surface);border:1px solid var(--glass-border); border-radius:var(--radius);padding:16px;position:relative;overflow:hidden; box-shadow:var(--shadow-xs);transition:all .3s cubic-bezier(.25,.46,.45,.94); animation:fadeUp 0.5s ease both; } .mc::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.6),transparent);transition:all 0.6s;} .mc:hover{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box;box-shadow:var(--shadow-md);transform:translateY(-2px);} @media(hover:hover){ .mc:hover::before{left:100%;} .mc.a:hover{box-shadow:0 12px 32px rgba(224,92,42,.14);} .mc.g:hover{box-shadow:0 12px 32px rgba(22,163,74,.14);} .mc.p:hover{box-shadow:0 12px 32px rgba(124,58,237,.14);} .mc.b:hover{box-shadow:0 12px 32px rgba(29,78,216,.14);} } @media(hover:none){.mc:active{transform:scale(0.96);box-shadow:var(--shadow-sm);}} .mc .label{font-size:.7rem;color:var(--text-3);margin-bottom:6px;letter-spacing:.02em;} .mc .value{font-family:'Outfit',sans-serif;font-size:1.65rem;font-weight:700;letter-spacing:-.5px;transition:transform .3s ease;} @media(hover:hover){.mc:hover .value{transform:translateY(-2px) scale(1.04);}} .mc .sub{font-size:.7rem;color:var(--text-3);margin-top:3px;} .mc.a{border-color:rgba(224,92,42,.2);background:rgba(224,92,42,.04);} .mc.a .value{color:var(--accent);} .mc.g{border-color:rgba(22,163,74,.2);background:rgba(22,163,74,.04);} .mc.g .value{color:var(--green);} .mc.p{border-color:rgba(124,58,237,.2);background:rgba(124,58,237,.04);} .mc.p .value{color:var(--accent2);} .mc.b{border-color:rgba(29,78,216,.2);background:rgba(29,78,216,.04);} .mc.b .value{color:var(--blue);} /* ── PROJECT CARDS ── */ .section-title{font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:600;margin-bottom:12px;letter-spacing:-.2px;color:var(--text);} .project-list{display:flex;flex-direction:column;gap:9px;} .pc{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:13px;transition:all .2s;cursor:default;box-shadow:var(--shadow-xs);} .pc:hover{border-color:rgba(0,0,0,.1);transform:translateX(6px) scale(1.008);box-shadow:var(--shadow-md);} .pico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg2);flex-shrink:0;border:1px solid var(--glass-border);} .pinfo{flex:1;min-width:0;} .ptitle{font-weight:500;font-size:.875rem;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);} .pmeta{font-size:.73rem;color:var(--text-3);} .pstatus{padding:3px 10px;border-radius:99px;font-size:.68rem;font-weight:700;white-space:nowrap;flex-shrink:0;} .s-on{background:rgba(224,92,42,.1);color:var(--accent);} .s-co{background:rgba(22,163,74,.1);color:var(--green);} .s-pe{background:rgba(29,78,216,.1);color:var(--blue);} .s-wa{background:rgba(217,119,6,.1);color:var(--yellow);} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .det-card{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:var(--shadow-xs);animation:fadeUp 0.5s ease both;transition:all .3s cubic-bezier(.25,.46,.45,.94);} .det-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(0,0,0,.1);} .det-card h4{font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:600;margin-bottom:8px;color:var(--text);} .det-card p{font-size:.8rem;color:var(--text-2);line-height:1.6;} .info-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--glass-border);font-size:.82rem;} .info-row:last-child{border:none;} .info-row .key{color:var(--text-3);} .pb{height:5px;background:rgba(0,0,0,.06);border-radius:99px;overflow:hidden;margin-top:8px;} .pf{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .6s ease;} .tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:.68rem;font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(224,92,42,.18);} .tag.g{background:var(--green-soft);color:var(--green);border-color:rgba(22,163,74,.18);} .tag.pu{background:var(--accent2-soft);color:var(--accent2);border-color:rgba(124,58,237,.18);} .tag.b{background:var(--blue-soft);color:var(--blue);border-color:rgba(29,78,216,.18);} .alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:.82rem;margin-bottom:13px;display:flex;align-items:flex-start;gap:8px;} .alert-s{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.2);color:var(--green);} .alert-i{background:rgba(124,58,237,.07);border:1px solid rgba(124,58,237,.18);color:var(--accent2);} .alert-w{background:rgba(217,119,6,.08);border:1px solid rgba(217,119,6,.2);color:var(--yellow);} .alert-e{background:rgba(220,38,38,.07);border:1px solid rgba(220,38,38,.2);color:var(--red);} /* ── WORKFLOW ── */ .wf-stepper{display:flex;align-items:center;margin-bottom:24px;overflow-x:auto;padding-bottom:4px;gap:0;} .wf-stepper::-webkit-scrollbar{height:0;} .step{display:flex;align-items:center;} .step-dot{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--glass-border-strong);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--text-4);flex-shrink:0;transition:all .3s;} .step-dot.done{background:var(--green);border-color:var(--green);color:#fff;} .step-dot.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow);} .step-line{width:32px;height:1.5px;background:rgba(0,0,0,.1);flex-shrink:0;} .step-line.done{background:var(--green);} .wf-body{background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);} .wf-body h3{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;margin-bottom:16px;color:var(--text);} /* ── FREELANCER GRID ── */ .f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;} .f-card{background:var(--surface);border:1.5px solid var(--glass-border);border-radius:var(--radius);padding:14px;cursor:pointer;text-align:center;transition:all .2s;box-shadow:var(--shadow-xs);} .f-card:hover,.f-card.sel{border-color:rgba(224,92,42,.3);box-shadow:0 6px 20px rgba(224,92,42,.1), var(--shadow-sm);background:rgba(224,92,42,.03);} .f-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;font-family:'Outfit',sans-serif;color:#fff;} .f-name{font-size:.82rem;font-weight:600;margin-bottom:2px;color:var(--text);} .f-rate{font-size:.7rem;color:var(--accent);} .f-spec{font-size:.67rem;color:var(--text-3);} .stars{color:var(--yellow);font-size:.68rem;} .ct-list{display:flex;gap:8px;flex-wrap:wrap;} .ct-pill{padding:8px 16px;border-radius:99px;border:1px solid var(--glass-border-strong);background:var(--surface);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.8rem;color:var(--text-3);transition:all .2s;box-shadow:var(--shadow-xs);} .ct-pill.active{border-color:rgba(224,92,42,.35);color:var(--accent);background:var(--accent-soft);} /* ── CHAT ── */ .chat-wrap{display:flex;height:440px;background:var(--surface);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);} .chat-list{width:260px;border-right:1px solid var(--glass-border);overflow-y:auto;flex-shrink:0;background:var(--bg2);} .cc-item{padding:12px 13px;cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--glass-border);transition:background .2s;} .cc-item:hover,.cc-item.active{background:var(--surface);} .c-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),#6D28D9);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;flex-shrink:0;color:#fff;} .cc-name{font-size:.8rem;font-weight:500;margin-bottom:1px;color:var(--text);} .cc-prev{font-size:.67rem;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;} .chat-area{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--surface);} .ch-header{padding:12px 16px;border-bottom:1px solid var(--glass-border);font-weight:500;font-size:.85rem;display:flex;align-items:center;gap:8px;background:var(--bg2);color:var(--text);} .online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(22,163,74,.5);} .chat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg);} .msg{max-width:68%;padding:8px 12px;border-radius:10px;font-size:.8rem;line-height:1.5;word-break:break-word;} .msg-time{font-size:.6rem;color:var(--text-4);margin-top:2px;} .msg.received{background:var(--surface);border:1px solid var(--glass-border);border-radius:2px 10px 10px 10px;align-self:flex-start;color:var(--text);box-shadow:var(--shadow-xs);} .msg.sent{background:var(--accent);color:#fff;border-radius:10px 2px 10px 10px;align-self:flex-end;} .msg.sent .msg-time{color:rgba(255,255,255,.55);} .msg-video{max-width:72%;align-self:flex-start;} .msg-video.sent-video{align-self:flex-end;} .msg-video-inner{background:var(--surface);border:1px solid var(--glass-border);border-radius:12px;overflow:hidden;transition:border-color .2s;box-shadow:var(--shadow-xs);} .msg-video.sent-video .msg-video-inner{background:rgba(224,92,42,.06);border-color:rgba(224,92,42,.2);} .msg-video-inner:hover{border-color:rgba(0,0,0,.18);} .msg-video-label{display:flex;align-items:center;gap:7px;padding:9px 12px;font-size:.76rem;font-weight:500;color:var(--text-2);border-bottom:1px solid var(--glass-border);} .msg-video-label .vico{width:26px;height:26px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#F07A45);display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;} .msg-video-player{display:block;width:100%;max-width:280px;max-height:160px;object-fit:cover;background:#000;} .msg-video-footer{padding:6px 12px;font-size:.65rem;color:var(--text-3);display:flex;justify-content:space-between;align-items:center;} .upload-area-lg{border:1.5px dashed rgba(0,0,0,.12);border-radius:var(--radius);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;margin:12px 0;display:block;background:var(--bg2);} .upload-area-lg:hover{border-color:rgba(224,92,42,.4);background:rgba(224,92,42,.02);} .upload-area-lg.has-file{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.03);} .upload-icon{font-size:2.2rem;margin-bottom:8px;} .upload-label{font-weight:500;font-size:.9rem;margin-bottom:4px;color:var(--text);} .upload-sub{font-size:.76rem;color:var(--text-3);} .upload-progress-wrap{margin:10px 0;display:none;} .upload-progress-wrap.show{display:block;} .upload-progress-bar{height:4px;background:rgba(0,0,0,.07);border-radius:99px;overflow:hidden;} .upload-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .3s ease;} .upload-progress-label{font-size:.72rem;color:var(--text-3);margin-top:5px;text-align:center;} .star-rating{display:flex;gap:4px;font-size:1.6rem;cursor:pointer;margin:7px 0;} .star-rating span{color:rgba(0,0,0,.1);transition:color .15s,transform .15s;} .star-rating span:hover{transform:scale(1.1);} .star-rating span.lit{color:var(--yellow);} /* ── MODAL ── */ .modal-bg{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px;} .modal-bg.show{display:flex;} .modal{background:var(--surface);border:1px solid var(--glass-border-strong);border-radius:var(--radius-lg);padding:28px;width:100%;max-width:420px;box-shadow:var(--shadow-xl);animation:modalIn .25s ease both;max-height:90vh;overflow-y:auto;} @keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:none;}} .modal h3{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:600;margin-bottom:16px;color:var(--text);} .modal-footer{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;} @keyframes fadeDown{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}} @keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}} @keyframes fadeIn{from{opacity:0;}to{opacity:1;}} .fade-in{animation:fadeIn .3s ease both;} /* ── BOTTOM NAV ── */ .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:190;background:rgba(255,255,255,.95);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-top:1px solid var(--glass-border);box-shadow:0 -4px 20px rgba(0,0,0,.06);padding:8px 4px max(8px, env(safe-area-inset-bottom));gap:0;} .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;color:var(--text-3);font-size:.58rem;position:relative;} .bn-item .bn-icon{font-size:1.15rem;transition:transform .2s;} .bn-item.active{color:var(--accent);} .bn-item.active .bn-icon{transform:translateY(-1px);} .bn-badge{position:absolute;top:3px;right:calc(50% - 14px);background:var(--accent);color:#fff;font-size:.55rem;font-weight:700;padding:1px 4px;border-radius:99px;min-width:14px;text-align:center;} ::-webkit-scrollbar{width:4px;height:4px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:99px;} ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.2);} .divider{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--text-4);font-size:.75rem;} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--glass-border);} .chat-inp-bar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--glass-border);background:var(--surface); align-items: center;} .chat-inp{flex:1;padding:8px 12px;background:var(--bg2);border:1px solid var(--glass-border-strong);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;transition:border .2s;} .chat-inp:focus{border-color:rgba(224,92,42,.4);background:#fff;box-shadow:0 0 0 2px rgba(224,92,42,.08);} .chat-inp::placeholder{color:var(--text-3);} /* ── SOCIAL / FOLLOW ── */ .social-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--glass-border-strong);background:var(--surface);font-size:.85rem;color:var(--text-2);text-decoration:none;transition:all .25s ease;box-shadow:var(--shadow-xs);} .social-btn svg{width:16px;height:16px;} .social-btn:hover{transform:translateY(-3px) scale(1.04);border-color:rgba(224,92,42,.4);color:var(--accent);background:rgba(224,92,42,.06);box-shadow:0 8px 22px rgba(224,92,42,.12), var(--shadow-sm);} /* ============================================================ SITE FOOTER (takeuforward-style: logo | links | socials) Works in both light and dark theme via CSS variables. ============================================================ */ .site-footer{border-top:1px solid var(--glass-border);background:transparent;padding:26px 24px 20px;} .foot-inner{max-width:1180px;margin:0 auto;} .foot-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} /* Footer logo reuses the navbar's .logo / .logo-img / .logo-text so that the mark, the wordmark, the accent colour and the dark-theme white-logo swap ([data-theme="dark"] .logo-img) are all identical to the header. */ .foot-logo{text-decoration:none;flex:0 0 auto;} /* the navbar hides .logo-text below 768px - keep it visible in the footer */ .foot-logo .logo-text{display:inline-block !important;} .foot-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;flex:1 1 auto;} .foot-link{font-size:.82rem;color:var(--text-2);text-decoration:none;transition:color .2s ease;} .foot-link:hover{color:var(--accent);} .foot-sep{color:var(--text-4);font-size:.8rem;user-select:none;} .foot-socials{display:flex;align-items:center;gap:9px;flex:0 0 auto;} .foot-soc{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.14);transition:transform .2s ease,box-shadow .2s ease;} .foot-soc svg{width:17px;height:17px;display:block;} .foot-soc:hover{transform:translateY(-2px);box-shadow:0 6px 15px rgba(0,0,0,.22);} /* official brand colours + per-mark optical sizing */ .foot-soc-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);border-radius:9px;} .foot-soc-ig svg{width:18px;height:18px;} /* X and Facebook are circular marks */ .foot-soc-x{background:#000;border-radius:50%;} .foot-soc-x svg{width:13px;height:13px;} .foot-soc-fb{background:#1877f2;border-radius:50%;} .foot-soc-fb svg{width:18px;height:18px;} /* YouTube's mark is a wide rounded tile, not a square */ .foot-soc-yt{background:#ff0000;width:37px;height:27px;border-radius:8px;} .foot-soc-yt svg{width:19px;height:19px;margin-left:1px;} .foot-soc-li{background:#0a66c2;border-radius:7px;} .foot-soc-li svg{width:17px;height:17px;} /* on the dark background a pure-black X badge would disappear */ [data-theme="dark"] .foot-soc-x{border:1px solid rgba(255,255,255,.25);} .foot-divider{height:1px;background:var(--glass-border);margin:20px 0 14px;} .foot-copy{text-align:center;font-size:.76rem;color:var(--text-3);} @media(max-width:860px){ .foot-top{flex-direction:column;gap:16px;text-align:center;} .foot-links{order:2;} .foot-socials{order:3;} } @media(max-width:520px){ .site-footer{padding:22px 16px 18px;} /* slightly smaller tiles so five badges never crowd a narrow phone */ .foot-socials{gap:8px;} .foot-soc{width:27px;height:27px;border-radius:7px;} /* the line above resets every tile, so the round marks must be restated */ .foot-soc-x, .foot-soc-fb{border-radius:50%;} .foot-soc-ig{border-radius:8px;} .foot-soc svg{width:15px;height:15px;} .foot-soc-ig svg{width:16px;height:16px;} .foot-soc-fb svg{width:16px;height:16px;} .foot-soc-x svg{width:12px;height:12px;} .foot-soc-yt{width:33px;height:24px;} .foot-soc-yt svg{width:17px;height:17px;} .foot-soc-li svg{width:15px;height:15px;} .foot-sep{display:none;} .foot-links{gap:10px 18px;} .foot-link{font-size:.8rem;} .foot-copy{font-size:.72rem;} } @media(prefers-reduced-motion:reduce){ .foot-soc,.foot-soc:hover{transition:none;transform:none;} } /* ── BOTTOM NAV ICON SIZING ── */ .bn-icon-svg {display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;} .bn-icon-svg svg {width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} /* ── MOBILE RESPONSIVE ── */ @media(max-width:768px){ :root{--nav-h:54px;--sidebar-w:260px;} nav{justify-content: space-between; padding:0 14px;gap:6px;} .logo{font-size:1.1rem;} .logo-icon{width:28px;height:28px;font-size:.82rem;} .nav-greeting{display:none !important;} .logo-text{display:none !important;} .nav-right .btn-primary{display:inline-flex !important;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;flex-shrink:0;} .nav-right .btn-primary .btn-text{display:none;} .nav-right .btn-primary .btn-arrow{display:inline;font-size:1.1rem;color:#fff;line-height:1;} .nav-right .btn-ghost,.nav-right .btn-light{display:none !important;} /* the auth screen keeps its Back control on phones, next to the theme toggle, as a compact arrow-only round button (label hidden) */ .nav-right .btn-ghost.nav-back{display:inline-flex !important;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:50%;flex-shrink:0;font-size:1rem;line-height:1;} .nav-back .nav-back-text{display:none;} .nav-back .nav-back-arrow{display:inline;font-size:1.05rem;line-height:1;} .theme-toggle{width:30px;height:30px;font-size:.8rem;flex-shrink:0;} .hamburger{display:none;} /* landing navbar on mobile: flatten the three wrappers with display:contents so the logo, the links, the theme toggle and the CTA become direct flex children of