/* ============================================================ doFreela — Design System (Fase 0) Identidade "Confianca" | Cor de marca: ROXO #7367F0 (mantida) Camada de override sobre Vuexy/Bootstrap. Nao altera a stack. Carregar SEMPRE por ultimo no . ============================================================ */ :root{ /* Marca (roxo atual) */ --df-primary:#7367F0; --df-primary-dark:#5E50EE; --df-primary-darker:#4839EB; --df-primary-soft:#EFEDFD; --df-primary-grad:linear-gradient(135deg,#7367F0 0%,#9E94F7 100%); /* Confianca / dinheiro = verde (uso restrito) */ --df-success:#1FA971; --df-success-soft:#E6F6EF; --df-warning:#F0A020; --df-warning-soft:#FCF2E0; --df-danger:#E0455E; --df-danger-soft:#FCE9EC; /* Neutros */ --df-ink:#1B2433; --df-muted:#5B6677; --df-line:#E6E9EF; --df-bg:#F7F8FC; --df-surface:#FFFFFF; /* Sistema */ --df-radius:14px; --df-radius-sm:9px; --df-radius-pill:999px; --df-shadow-sm:0 2px 8px rgba(27,36,51,.06); --df-shadow:0 6px 20px rgba(27,36,51,.08); --df-shadow-lg:0 14px 34px rgba(115,103,240,.20); --df-transition:all .2s ease; --df-font:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } /* ---------- Base ---------- */ body{ font-family:var(--df-font); color:var(--df-ink); background-color:var(--df-bg); -webkit-font-smoothing:antialiased; } a{ color:var(--df-primary); transition:var(--df-transition); } a:hover{ color:var(--df-primary-dark); } h1,h2,h3,h4,h5,h6{ color:var(--df-ink); font-weight:700; letter-spacing:-.01em; } /* ---------- Botoes ---------- */ .btn{ border-radius:var(--df-radius-sm); font-weight:600; transition:var(--df-transition); box-shadow:none; } .btn:focus,.btn:active:focus{ box-shadow:0 0 0 3px var(--df-primary-soft) !important; outline:none; } .btn-primary, .btn-primary:focus{ background:var(--df-primary) !important; border-color:var(--df-primary) !important; color:#fff !important; } .btn-primary:hover{ background:var(--df-primary-dark) !important; border-color:var(--df-primary-dark) !important; transform:translateY(-1px); box-shadow:var(--df-shadow-lg) !important; } .btn-success{ background:var(--df-success) !important; border-color:var(--df-success) !important; } .btn-outline-primary{ color:var(--df-primary); border-color:var(--df-primary); } .btn-outline-primary:hover{ background:var(--df-primary); border-color:var(--df-primary); } .btn-lg{ padding:.8rem 1.6rem; border-radius:var(--df-radius); } .btn-pill{ border-radius:var(--df-radius-pill); } /* ---------- Cards ---------- */ .card{ border:1px solid var(--df-line); border-radius:var(--df-radius); box-shadow:var(--df-shadow-sm); transition:var(--df-transition); } .card.df-hover:hover, .ecommerce-card:hover{ transform:translateY(-3px); box-shadow:var(--df-shadow); border-color:var(--df-primary-soft); } /* ---------- Formularios ---------- */ .form-control{ border-radius:var(--df-radius-sm); border-color:var(--df-line); color:var(--df-ink); transition:var(--df-transition); } .form-control:focus{ border-color:var(--df-primary); box-shadow:0 0 0 3px var(--df-primary-soft); } .input-group .form-control{ box-shadow:none; } /* ---------- Badges / chips ---------- */ .badge{ border-radius:var(--df-radius-pill); font-weight:600; padding:.4em .8em; } .badge-primary{ background:var(--df-primary); } .df-chip{ display:inline-flex; align-items:center; gap:.35rem; background:var(--df-primary-soft); color:var(--df-primary-dark); border-radius:var(--df-radius-pill); padding:.3rem .8rem; font-size:.8rem; font-weight:600; } /* ---------- Selos de confianca (uso recorrente fintech) ---------- */ .df-trust{ display:inline-flex; align-items:center; gap:.45rem; color:var(--df-success); font-weight:600; font-size:.9rem; } .df-trust i,.df-trust svg{ width:18px; height:18px; } .df-trust-soft{ background:var(--df-success-soft); color:var(--df-success); border-radius:var(--df-radius-pill); padding:.35rem .85rem; display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; } /* ---------- Status (propostas/pagamento) ---------- */ .df-status{ border-radius:var(--df-radius-pill); padding:.3rem .8rem; font-size:.8rem; font-weight:600; display:inline-block; } .df-status--wait{ background:var(--df-warning-soft); color:var(--df-warning); } .df-status--ok{ background:var(--df-success-soft); color:var(--df-success); } .df-status--paid{ background:var(--df-primary-soft); color:var(--df-primary-dark); } .df-status--no{ background:var(--df-danger-soft); color:var(--df-danger); } /* ---------- Helpers ---------- */ .df-section{ padding:3.5rem 0; } .text-primary{ color:var(--df-primary) !important; } .bg-primary-soft{ background:var(--df-primary-soft) !important; } .df-shadow{ box-shadow:var(--df-shadow) !important; } .df-radius{ border-radius:var(--df-radius) !important; } .df-muted{ color:var(--df-muted) !important; } /* ---------- Hero (Home) ---------- */ .df-hero{ position:relative; border-radius:var(--df-radius); overflow:hidden; margin-bottom:1.5rem; background:#2b2546 url('/bg2.jpg') center center/cover no-repeat; } .df-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(72,57,235,.74) 0%, rgba(115,103,240,.58) 48%, rgba(27,20,54,.52) 100%); } .df-hero-inner{ position:relative; z-index:2; padding:3.75rem 1.25rem; text-align:center; color:#fff; max-width:880px; margin:0 auto; } .df-hero-logo{ height:46px; margin-bottom:1.25rem; filter:brightness(0) invert(1); } .df-hero h1{ color:#fff; font-size:2.5rem; font-weight:800; line-height:1.14; letter-spacing:-.02em; margin-bottom:1rem; } .df-hero-sub{ color:rgba(255,255,255,.92); font-size:1.12rem; line-height:1.5; margin-bottom:1.85rem; } .df-hero-search{ display:flex; align-items:center; background:#fff; border-radius:var(--df-radius-pill); padding:.35rem .35rem .35rem .25rem; box-shadow:var(--df-shadow); max-width:580px; margin:0 auto 1.35rem; } .df-hero-search input{ flex:1 1 auto; min-width:0; border:0; outline:none; background:transparent; padding:.65rem 1.1rem; font-size:1rem; color:var(--df-ink); } .df-hero-search button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; border:0; background:var(--df-primary); color:#fff; border-radius:var(--df-radius-pill); padding:.65rem 1.4rem; font-weight:700; cursor:pointer; transition:var(--df-transition); } .df-hero-search button:hover{ background:var(--df-primary-dark); } .df-hero-search button i,.df-hero-search button svg{ width:16px; height:16px; } .df-hero-ctas{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.6rem; } .df-hero-ctas .btn{ padding:.7rem 1.5rem; font-weight:700; display:inline-flex; align-items:center; gap:.45rem; } .btn-white{ background:#fff; color:var(--df-primary-dark) !important; border:1px solid #fff; } .btn-white:hover{ background:rgba(255,255,255,.92); transform:translateY(-1px); } .btn-ghost-white{ background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.65); } .btn-ghost-white:hover{ background:rgba(255,255,255,.14); } .df-hero-trust{ display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; } .df-hero-trust span{ display:inline-flex; align-items:center; gap:.45rem; color:#fff; font-size:.9rem; font-weight:600; } .df-hero-trust b{ font-weight:800; } .df-hero-trust i,.df-hero-trust svg{ width:18px; height:18px; } @media (max-width:575.98px){ .df-hero h1{ font-size:1.8rem; } .df-hero-inner{ padding:2.6rem 1rem; } .df-hero-sub{ font-size:1rem; } .df-hero-trust{ gap:1rem; } } /* ---------- Como funciona (3 passos) ---------- */ .df-how-head{ text-align:center; margin-bottom:2.25rem; } .df-how-title{ font-size:2rem; font-weight:800; margin:.6rem 0 .4rem; } .df-how-head p{ color:var(--df-muted); font-size:1.05rem; margin:0; } .df-step{ position:relative; text-align:center; padding:2.4rem 1.5rem 1.75rem; border:1px solid var(--df-line); height:100%; } .df-step-num{ position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:36px; height:36px; border-radius:50%; background:var(--df-primary); color:#fff; font-size:.95rem; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:var(--df-shadow-lg); } .df-step-icon{ width:66px; height:66px; border-radius:18px; background:var(--df-primary-soft); color:var(--df-primary); display:inline-flex; align-items:center; justify-content:center; margin:.4rem auto 1.1rem; } .df-step-icon i,.df-step-icon svg{ width:28px; height:28px; } .df-step h4{ font-weight:700; font-size:1.15rem; margin-bottom:.55rem; } .df-step p{ color:var(--df-muted); font-size:.92rem; line-height:1.55; margin:0; } @media (max-width:767.98px){ .df-step{ margin-bottom:2.2rem; } } /* ---------- Faixa de categorias ---------- */ .df-cats-head{ text-align:center; margin-bottom:1.75rem; } .df-cats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; } .df-cat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; padding:1.6rem 1rem; background:var(--df-surface); border:1px solid var(--df-line); border-radius:var(--df-radius); transition:var(--df-transition); color:var(--df-ink); } .df-cat:hover{ transform:translateY(-3px); box-shadow:var(--df-shadow); border-color:var(--df-primary-soft); color:var(--df-primary); } .df-cat-ico{ width:56px; height:56px; border-radius:16px; background:var(--df-primary-soft); color:var(--df-primary); display:inline-flex; align-items:center; justify-content:center; transition:var(--df-transition); } .df-cat:hover .df-cat-ico{ background:var(--df-primary); color:#fff; } .df-cat-ico i,.df-cat-ico svg{ width:26px; height:26px; } .df-cat-name{ font-weight:700; font-size:.95rem; line-height:1.25; } .df-cat-count{ font-size:.78rem; color:var(--df-muted); font-weight:600; } @media (max-width:991.98px){ .df-cats{ grid-template-columns:repeat(3,1fr); } } @media (max-width:575.98px){ .df-cats{ grid-template-columns:repeat(2,1fr); gap:.75rem; } .df-cat{ padding:1.1rem .75rem; } } /* ---------- Chat (conexoes) ---------- */ .chat-app-window .chats .chat-body .chat-content{ border-radius:14px; box-shadow:var(--df-shadow-sm); padding:.65rem 1rem; } .chat-app-window .chats .chat .chat-body .chat-content{ background:var(--df-primary-grad); color:#fff; } .chat-app-window .chats .chat.chat-left .chat-body .chat-content{ background:#fff; color:var(--df-ink); border:1px solid var(--df-line); } .chat-app-window .chats .chat-avatar .avatar img,.chat-app-window .chats .chat .chat-avatar img{ border:2px solid #fff; box-shadow:var(--df-shadow-sm); } .chat-app-form{ background:var(--df-surface); border-top:1px solid var(--df-line); } .chat-app-form .form-control,.chat-app-form .input-group{ border-radius:var(--df-radius-pill); } .chat-app-form .btn.send,.chat-app-form .btn-primary{ border-radius:var(--df-radius-pill); } .chat-user-list-wrapper li.active,.chat-users-list li.active{ background:var(--df-primary-soft); border-radius:var(--df-radius-sm); } .chat-user-list-wrapper li:hover,.chat-users-list li:hover{ background:var(--df-bg); border-radius:var(--df-radius-sm); } .chat-fixed-search .form-control{ border-radius:var(--df-radius-pill); } /* ---------- Listagem /jobs: cabeçalho e busca ---------- */ .df-jobs-head{ margin-bottom:1.1rem; } .df-jobs-title{ font-size:1.7rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.15rem; } #ecommerce-searchbar .input-group{ box-shadow:var(--df-shadow-sm); border-radius:var(--df-radius-pill); overflow:hidden; border:1px solid var(--df-line); background:#fff; } #ecommerce-searchbar .form-control.search-product{ border:0; padding:.72rem 1.2rem; font-size:1rem; } #ecommerce-searchbar .form-control.search-product:focus{ box-shadow:none; } #ecommerce-searchbar .input-group-text{ background:#fff; border:0; padding-right:1.1rem; } .sidebar-shop .filter-heading,.sidebar-shop .filter-title{ font-weight:700; color:var(--df-ink); } .sidebar-shop .card{ border:1px solid var(--df-line); } /* ---------- Cabeçalho de perfil (dashboard) ---------- */ .df-profile-head{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; background:var(--df-primary-grad); color:#fff; border-radius:var(--df-radius); padding:1.75rem 1.9rem; margin-bottom:1.5rem; box-shadow:var(--df-shadow-lg); } .df-profile-avatar{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.6); flex:0 0 auto; background:#fff; } .df-profile-info{ flex:1 1 auto; min-width:0; } .df-profile-info h3{ color:#fff; font-weight:800; margin-bottom:.2rem; } .df-profile-sub{ color:rgba(255,255,255,.9); font-size:.95rem; margin-bottom:.5rem; } .df-profile-meta{ display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; } .df-profile-meta span{ display:inline-flex; align-items:center; gap:.35rem; font-size:.88rem; font-weight:600; color:#fff; } .df-profile-meta .filled-star{ color:#ffd44d; fill:#ffd44d; } .df-profile-meta i,.df-profile-meta svg{ width:16px; height:16px; } .df-profile-actions{ flex:0 0 auto; } .df-profile-actions .btn-white{ background:#fff; color:var(--df-primary-dark) !important; border:1px solid #fff; } @media (max-width:767.98px){ .df-profile-head{ justify-content:center; text-align:center; } .df-profile-meta{ justify-content:center; } .df-profile-actions{ width:100%; } .df-profile-actions .btn{ width:100%; } } /* ---------- Autenticação (login/registro) ---------- */ .df-auth-card-split{ display:flex; width:100%; max-width:960px; background:var(--df-surface); border:1px solid var(--df-line); border-radius:var(--df-radius); overflow:hidden; box-shadow:var(--df-shadow); } .df-auth-aside{ flex:1 1 45%; position:relative; overflow:hidden; background:var(--df-primary-grad); color:#fff; padding:3rem 2.5rem; display:flex; align-items:center; } .df-auth-aside::before{ content:""; position:absolute; inset:0; background:url('/bg2.jpg') center/cover no-repeat; opacity:.12; } .df-auth-aside-inner{ position:relative; z-index:2; } .df-auth-logo{ height:40px; filter:brightness(0) invert(1); margin-bottom:1.75rem; } .df-auth-aside h2{ color:#fff; font-size:1.8rem; font-weight:800; line-height:1.2; margin-bottom:.9rem; } .df-auth-aside p{ color:rgba(255,255,255,.9); font-size:1.02rem; margin-bottom:1.75rem; } .df-auth-points{ list-style:none; padding:0; margin:0; } .df-auth-points li{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; font-weight:600; font-size:.95rem; } .df-auth-points i,.df-auth-points svg{ width:20px; height:20px; flex:0 0 auto; } .df-auth-main{ flex:1 1 55%; padding:3rem 2.75rem; } .df-auth-main .form-label,.df-auth-main label{ font-weight:600; } @media (max-width:767.98px){ .df-auth-aside{ display:none; } .df-auth-card-split{ max-width:440px; border:none; box-shadow:none; background:transparent; } .df-auth-main{ flex-basis:100%; padding:1.5rem 1.25rem; } } /* ---------- Detalhe do projeto ---------- */ .app-ecommerce-details #projeto > h2{ font-size:1.65rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.35rem; } .app-ecommerce-details .card-text{ color:var(--df-muted); line-height:1.6; } .df-sidecard{ background:var(--df-surface); border:1px solid var(--df-line); border-radius:var(--df-radius); padding:1.4rem; box-shadow:var(--df-shadow-sm); } .df-budget-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--df-muted); font-weight:700; } .df-budget{ font-size:1.9rem; font-weight:800; color:var(--df-primary); line-height:1.15; margin:.15rem 0 .35rem; } .df-budget-meta{ font-size:.88rem; color:var(--df-muted); font-weight:600; display:flex; align-items:center; gap:.4rem; } .df-budget-meta i,.df-budget-meta svg{ width:15px; height:15px; } .df-side-title{ font-weight:700; margin-bottom:1rem; } .df-client-row{ display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; } .df-client-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--df-line); flex:0 0 auto; } .df-client-name{ font-weight:700; font-size:1rem; } .df-client-stats{ list-style:none; padding:0; margin:0; } .df-client-stats li{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--df-muted); padding:.32rem 0; } .df-client-stats b{ color:var(--df-ink); } .df-client-stats i,.df-client-stats svg{ width:16px; height:16px; color:var(--df-primary); } .app-ecommerce-details .ratings-list-item .filled-star{ color:#ff9f43; fill:#ff9f43; } /* ---------- Feature cards (por que o doFreela) ---------- */ .df-feature{ text-align:center; padding:2.1rem 1.5rem; border:1px solid var(--df-line); height:100%; } .df-feature-ico{ width:64px; height:64px; border-radius:18px; background:var(--df-primary-soft); color:var(--df-primary); display:inline-flex; align-items:center; justify-content:center; margin-bottom:1.1rem; } .df-feature-ico--trust{ background:var(--df-success-soft); color:var(--df-success); } .df-feature-ico i,.df-feature-ico svg{ width:28px; height:28px; } .df-feature h3{ font-size:1.2rem; font-weight:700; margin-bottom:.6rem; } .df-feature p{ color:var(--df-muted); font-size:.92rem; line-height:1.55; margin:0; } /* ---------- CTA final ---------- */ .df-cta{ position:relative; overflow:hidden; border-radius:var(--df-radius); background:var(--df-primary-grad); color:#fff; margin:1.5rem 0 2.5rem; box-shadow:var(--df-shadow-lg); } .df-cta-inner{ position:relative; z-index:2; text-align:center; padding:3.25rem 1.5rem; max-width:720px; margin:0 auto; } .df-cta h2{ color:#fff; font-size:1.95rem; font-weight:800; letter-spacing:-.01em; margin-bottom:.65rem; } .df-cta p{ color:rgba(255,255,255,.93); font-size:1.08rem; margin-bottom:1.6rem; } .df-cta-actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; } .df-cta-actions .btn{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; } @media (max-width:575.98px){ .df-cta h2{ font-size:1.55rem; } .df-cta-inner{ padding:2.3rem 1rem; } } /* ---------- Mobile polish ---------- */ @media (max-width:575.98px){ h1{ font-size:1.7rem; } .btn-lg{ width:100%; } .df-section{ padding:2.2rem 0; } }