/* * CloudServiceForm.css * Place in: wwwroot/css/CloudServiceForm.css * Add to : * * All @keyframes live here so Blazor re-renders never reset animations. * All hover/checked states that can't be driven by inline style= live here. */ /* ── Fonts ──────────────────────────────────────────────────────────────── */ .csf-page { font-family: 'Plus Jakarta Sans', sans-serif; color: #0f172a; background: #ffffff; } .csf-heading { font-family: 'Poppins', sans-serif; } /* ── Step progress bar ──────────────────────────────────────────────────── */ .csf-step-dot { width: 2.5rem; height: 2.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .75rem; transition: background .3s, color .3s, box-shadow .3s; border: 2px solid #e2e8f0; background: #fff; color: #94a3b8; } .csf-step-dot.active { background: #991b1b; color: #fff; border-color: #991b1b; box-shadow: 0 0 0 4px rgba(153,27,27,.15); } .csf-step-dot.done { background: #991b1b; color: #fff; border-color: #991b1b; } .csf-step-line { flex: 1; height: 2px; background: #e2e8f0; transition: background .3s; } .csf-step-line.done { background: #991b1b; } /* ── Input focus ring ───────────────────────────────────────────────────── */ .csf-input:focus, .csf-textarea:focus, .csf-select:focus { outline: none; box-shadow: 0 0 0 2px rgba(153,27,27,.25); border-color: #991b1b !important; } /* ── Radio / checkbox card (existing env, billing) ──────────────────────── */ .csf-radio-card { flex: 1; min-width: 150px; display: flex; align-items: center; justify-content: center; padding: 1rem; border-radius: .75rem; border: 1px solid #e2e8f0; cursor: pointer; font-weight: 600; transition: background .2s, border-color .2s; } .csf-radio-card:hover { background: #f1f5f9; } .csf-radio-card.selected { border-color: #991b1b; background: rgba(153,27,27,.05); } /* ── Billing option card ─────────────────────────────────────────────────── */ .csf-billing-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 1rem; border: 1px solid #e2e8f0; cursor: pointer; transition: background .2s, border-color .2s; } .csf-billing-card:hover { background: #f1f5f9; } .csf-billing-card.selected { border-color: #991b1b; background: rgba(153,27,27,.05); } /* ── Service tab buttons ─────────────────────────────────────────────────── */ .csf-tab-btn { flex: 1; min-width: 140px; padding: .75rem 1rem; border-radius: .75rem; font-weight: 700; font-size: .875rem; border: none; cursor: pointer; transition: background .2s, color .2s; background: transparent; color: #0f172a; } .csf-tab-btn:hover { background: rgba(255,255,255,.5); } .csf-tab-btn.active { background: #991b1b; color: #fff; } /* ── Service checkbox label ──────────────────────────────────────────────── */ .csf-service-label { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; border: 1px solid #e2e8f0; cursor: pointer; transition: background .2s, border-color .2s; font-size: .875rem; font-weight: 500; } .csf-service-label:hover { background: #f1f5f9; } .csf-service-label.checked { border-color: #991b1b; background: rgba(153,27,27,.04); } /* ── Hosting provider pill ───────────────────────────────────────────────── */ .csf-provider-pill { padding: .5rem 1rem; border-radius: .5rem; border: 1px solid #e2e8f0; cursor: pointer; font-size: .75rem; font-weight: 700; transition: background .2s, color .2s, border-color .2s; background: #fff; color: #0f172a; } .csf-provider-pill:hover { background: #f1f5f9; } .csf-provider-pill.selected { background: #991b1b; color: #fff; border-color: #991b1b; } /* ── Expertise card ──────────────────────────────────────────────────────── */ .csf-expertise-card { position: relative; display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid #e2e8f0; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s; } .csf-expertise-card:hover { border-color: #991b1b; } .csf-expertise-card.selected { border-color: #991b1b; box-shadow: 0 0 0 3px rgba(153,27,27,.15); } /* ── Recommended badge bounce ────────────────────────────────────────────── */ @keyframes csf-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } .csf-rec-badge { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); padding: .25rem .75rem; background: #991b1b; color: #fff; font-size: .625rem; font-weight: 800; text-transform: uppercase; border-radius: 9999px; white-space: nowrap; animation: csf-bounce 1s ease-in-out infinite; box-shadow: 0 4px 12px rgba(153,27,27,.3); } /* ── Icon accent wrapper ─────────────────────────────────────────────────── */ .csf-icon-accent { padding: .5rem; border-radius: .5rem; background: rgba(153,27,27,.1); color: #991b1b; display: inline-flex; } .csf-icon-accent-secondary { padding: .75rem; border-radius: 1rem; background: rgba(153,27,27,.1); color: #991b1b; width: fit-content; } .csf-icon-accent-secondary.muted { background: #f1f5f9; color: #0f172a; } /* ── Upload drop zone ────────────────────────────────────────────────────── */ .csf-dropzone { border: 2px dashed #e2e8f0; border-radius: 1rem; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; background: rgba(248,250,252,.5); } .csf-dropzone:hover { border-color: #991b1b; background: rgba(153,27,27,.02); } /* ── Compliance checkbox label ───────────────────────────────────────────── */ .csf-compliance-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 500; cursor: pointer; } /* ── Navigation buttons ──────────────────────────────────────────────────── */ .csf-btn-next { padding: 1rem 2rem; background: #991b1b; color: #fff; border: none; border-radius: 9999px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: box-shadow .2s, opacity .2s; } .csf-btn-next:hover { box-shadow: 0 8px 24px rgba(153,27,27,.25); } .csf-btn-back { padding: 1rem 2rem; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 9999px; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: .5rem; transition: background .2s; } .csf-btn-back:hover { background: #f1f5f9; } /* ── Slide-in animation ─────────────────────────────────────────────────── */ @keyframes csf-slide-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .csf-step-section { animation: csf-slide-in .4s ease both; } /* ── Success state ───────────────────────────────────────────────────────── */ @keyframes csf-pop { 0% { transform: scale(.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .csf-success-icon { animation: csf-pop .5s ease both; }