/* ============================================================ PROFILE PAGES — CSS File: profile-pages.css Prefix: pf- (Profile) Purpose: Shared styles for ALL profile editing pages in the app: - User profile edit (profile/edit.blade.php) - User profile partials (update-profile-information-form, update-password-form, delete-user-form) - Admin profile edit (admin/profile/edit.blade.php) Zero-collision guarantee: pf- prefix is used NOWHERE else in this project. Safe to load alongside: usv- auth- sc- ud- ft- pp- Requires Google Fonts: DM Sans 300/400/500/600 + Syne 700/800 (loaded in the page or layout ) ============================================================ */ /* ══════════════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES Edit only this block to retheme all profile pages at once. ══════════════════════════════════════════════════════════════ */ :root { /* ── Brand palette ── */ --pf-indigo: #6366f1; --pf-indigo-dark: #4f46e5; --pf-blue: #3b82f6; --pf-violet: #8b5cf6; --pf-green: #10b981; --pf-green-dark: #059669; --pf-amber: #f59e0b; --pf-red: #ef4444; --pf-red-dark: #dc2626; /* Admin accent — amber (matches admin login/reset pages) */ --pf-admin-accent: #f59e0b; --pf-admin-dark: #d97706; /* ── Text ── */ --pf-text-dark: #0f172a; --pf-text-body: #475569; --pf-text-muted: #64748b; --pf-text-faint: #94a3b8; /* ── Surfaces ── */ --pf-bg-page: #f0f4ff; --pf-bg-card: #ffffff; --pf-border: #e2e8f0; --pf-border-light: #f1f5f9; /* ── Shadows ── */ --pf-shadow-card: 0 4px 8px rgba(0,0,0,0.04), 0 14px 32px rgba(99,102,241,0.08); --pf-shadow-hover: 0 8px 28px rgba(99,102,241,0.14); /* ── Shape ── */ --pf-radius-page: 0; --pf-radius-card: 20px; --pf-radius-input: 10px; --pf-radius-btn: 10px; --pf-radius-badge: 20px; --pf-radius-icon: 12px; /* ── Typography ── */ --pf-font-body: 'DM Sans', sans-serif; --pf-font-display: 'Syne', sans-serif; } /* ══════════════════════════════════════════════════════════════ PAGE SHELL Soft gradient background applied to the outermost wrapper. Consistent with auth, dashboard, and pricing pages. ══════════════════════════════════════════════════════════════ */ .pf-page { min-height: 100vh; background: radial-gradient(ellipse 80% 50% at 15% 0%, rgba(59,130,246,.09) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 100%, rgba(99,102,241,.07) 0%, transparent 55%), var(--pf-bg-page); font-family: var(--pf-font-body); padding-bottom: 72px; } /* Admin variant — subtle amber tint instead of indigo */ .pf-page--admin { background: radial-gradient(ellipse 80% 50% at 15% 0%, rgba(245,158,11,.09) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 85% 100%, rgba(217,119, 6,.06) 0%, transparent 55%), var(--pf-bg-page); } /* ══════════════════════════════════════════════════════════════ PAGE HERO / HEADER Centred heading area at the top of each profile page. ══════════════════════════════════════════════════════════════ */ .pf-hero { max-width: 720px; margin: 0 auto; padding: 52px 24px 32px; text-align: center; animation: pfFadeDown 0.45s cubic-bezier(.22,1,.36,1) both; } /* Small pill label above the title */ .pf-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(99,102,241,0.10); border: 1px solid rgba(99,102,241,0.20); color: var(--pf-indigo); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 14px; border-radius: var(--pf-radius-badge); margin-bottom: 16px; } /* Admin eyebrow uses amber */ .pf-hero-eyebrow--admin { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: var(--pf-admin-dark); } .pf-hero-title { font-family: var(--pf-font-display); font-size: clamp(24px, 4vw, 36px); font-weight: 800; color: var(--pf-text-dark); letter-spacing: -0.4px; margin: 0 0 8px; } .pf-hero-subtitle { font-size: 14px; color: var(--pf-text-muted); margin: 0; line-height: 1.6; } /* Customer number badge displayed inline near the title */ .pf-hero-cust { display: inline-block; background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.18); color: var(--pf-indigo); font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: var(--pf-radius-badge); margin-top: 10px; } /* ══════════════════════════════════════════════════════════════ MAIN CONTAINER Constrains cards to a readable max-width. ══════════════════════════════════════════════════════════════ */ .pf-container { max-width: 720px; margin: 0 auto; padding: 0 24px; } /* ══════════════════════════════════════════════════════════════ PROFILE CARD Each section (update info, change password, delete account) gets its own card. ══════════════════════════════════════════════════════════════ */ .pf-card { background: var(--pf-bg-card); border-radius: var(--pf-radius-card); border: 1px solid var(--pf-border-light); box-shadow: var(--pf-shadow-card); overflow: hidden; margin-bottom: 24px; animation: pfFadeDown 0.45s cubic-bezier(.22,1,.36,1) both; } /* Stagger card animations */ .pf-card:nth-child(1) { animation-delay: 0.05s; } .pf-card:nth-child(2) { animation-delay: 0.12s; } .pf-card:nth-child(3) { animation-delay: 0.19s; } /* Danger card variant — used for Delete Account */ .pf-card--danger { border-color: rgba(239,68,68,0.18); box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 14px 32px rgba(239,68,68,0.07); } /* ── Card Header ── */ /* Coloured top bar with an icon badge, section title, and subtitle. Mirrors the auth-header treatment from modern-forms.css. */ .pf-card-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--pf-border-light); position: relative; display: flex; align-items: flex-start; gap: 14px; } /* 3px gradient bar at the very top of the card */ .pf-card-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pf-blue) 0%, var(--pf-indigo) 50%, var(--pf-violet) 100%); } /* Danger header bar */ .pf-card-header--danger::before { background: linear-gradient(90deg, var(--pf-red) 0%, #f97316 100%); } /* Admin header bar — amber */ .pf-card-header--admin::before { background: linear-gradient(90deg, var(--pf-amber) 0%, var(--pf-admin-dark) 100%); } /* Icon ring beside the section title */ .pf-card-icon { width: 44px; height: 44px; border-radius: var(--pf-radius-icon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .pf-card-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Icon colour variants */ .pf-icon--indigo { background: linear-gradient(135deg, var(--pf-indigo) 0%, var(--pf-violet) 100%); box-shadow: 0 4px 12px rgba(99,102,241,0.28); } .pf-icon--blue { background: linear-gradient(135deg, var(--pf-blue) 0%, var(--pf-indigo) 100%); box-shadow: 0 4px 12px rgba(59,130,246,0.26); } .pf-icon--red { background: linear-gradient(135deg, var(--pf-red) 0%, #f97316 100%); box-shadow: 0 4px 12px rgba(239,68,68,0.26); } .pf-icon--amber { background: linear-gradient(135deg, var(--pf-amber) 0%, var(--pf-admin-dark) 100%); box-shadow: 0 4px 12px rgba(245,158,11,0.26); } .pf-card-header-text { flex: 1; } .pf-card-title { font-family: var(--pf-font-display); font-size: 16px; font-weight: 800; color: var(--pf-text-dark); margin: 0 0 3px; letter-spacing: -0.1px; } .pf-card-subtitle { font-size: 13px; color: var(--pf-text-muted); margin: 0; line-height: 1.5; } /* ── Card Body ── */ .pf-card-body { padding: 28px 28px 32px; } /* ══════════════════════════════════════════════════════════════ FORM FIELDS Shared across all profile form partials. ══════════════════════════════════════════════════════════════ */ /* Each label + input pair */ .pf-field { margin-bottom: 20px; } /* Field label */ .pf-label { display: block; font-size: 12px; font-weight: 600; color: var(--pf-text-body); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; } /* Input / select wrapper — positions the leading icon */ .pf-input-wrap { position: relative; } /* Leading icon (SVG) inside the input */ .pf-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--pf-text-faint); pointer-events: none; } /* The input/textarea itself */ .pf-input { width: 100%; padding: 12px 14px 12px 40px; border: 1.5px solid var(--pf-border); border-radius: var(--pf-radius-input); font-family: var(--pf-font-body); font-size: 15px; color: var(--pf-text-dark); background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } /* Input without an icon (no left padding offset) */ .pf-input--plain { padding-left: 14px; } .pf-input:focus { outline: none; border-color: var(--pf-indigo); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .pf-input.is-invalid { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.12); } /* Inline validation error message */ .pf-invalid-msg { font-size: 12px; color: #dc2626; margin-top: 5px; } /* Helper / hint text below a field */ .pf-hint { font-size: 12px; color: var(--pf-text-faint); margin-top: 5px; line-height: 1.5; } /* Password eye toggle button */ .pf-eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--pf-text-faint); background: none; border: none; padding: 0; display: flex; align-items: center; transition: color 0.2s ease; } .pf-eye:hover { color: var(--pf-indigo); } /* ══════════════════════════════════════════════════════════════ ALERT / STATUS MESSAGES ══════════════════════════════════════════════════════════════ */ .pf-alert { border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 20px; } .pf-alert-success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; display: flex; align-items: center; gap: 10px; } .pf-alert-error { background: #fff1f2; border: 1px solid #fda4af; color: #9f1239; } .pf-alert-info { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; } /* Inline "Saved." flash message (fades out via Alpine x-transition) */ .pf-saved-flash { font-size: 13px; color: var(--pf-green); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ EMAIL VERIFICATION NOTICE Shown below the email field when the address is unverified. ══════════════════════════════════════════════════════════════ */ .pf-verify-notice { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 12px 16px; margin-top: 10px; font-size: 13px; color: #92400e; line-height: 1.6; } .pf-verify-notice button { background: none; border: none; padding: 0; color: var(--pf-indigo); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; font-family: var(--pf-font-body); } .pf-verify-notice button:hover { color: var(--pf-indigo-dark); } .pf-verify-sent { font-size: 13px; color: var(--pf-green); font-weight: 500; margin-top: 8px; } /* ══════════════════════════════════════════════════════════════ FORM ACTION ROW Row at the bottom of each form — holds the submit button and the inline "Saved." flash confirmation. ══════════════════════════════════════════════════════════════ */ .pf-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════ */ /* Primary — indigo/blue gradient (save / update) */ .pf-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; border: none; border-radius: var(--pf-radius-btn); font-family: var(--pf-font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.3px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; text-decoration: none; box-sizing: border-box; } /* Glass sheen on all buttons */ .pf-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 60%); pointer-events: none; } .pf-btn:hover { transform: translateY(-2px); } .pf-btn:active { transform: translateY(0); } .pf-btn--primary { background: linear-gradient(135deg, var(--pf-indigo) 0%, var(--pf-blue) 100%); color: #fff !important; box-shadow: 0 4px 14px rgba(99,102,241,0.32); } .pf-btn--primary:hover { box-shadow: 0 6px 20px rgba(99,102,241,0.44); } /* Admin primary — amber */ .pf-btn--admin { background: linear-gradient(135deg, var(--pf-amber) 0%, var(--pf-admin-dark) 100%); color: #fff !important; box-shadow: 0 4px 14px rgba(245,158,11,0.30); } .pf-btn--admin:hover { box-shadow: 0 6px 20px rgba(245,158,11,0.42); } /* Danger — red (delete account trigger) */ .pf-btn--danger { background: linear-gradient(135deg, var(--pf-red) 0%, #f97316 100%); color: #fff !important; box-shadow: 0 4px 14px rgba(239,68,68,0.28); } .pf-btn--danger:hover { box-shadow: 0 6px 20px rgba(239,68,68,0.40); } /* Ghost — subtle outlined secondary button (e.g. "Cancel" in modal) */ .pf-btn--ghost { background: #f1f5f9; color: var(--pf-text-body) !important; box-shadow: none; } .pf-btn--ghost:hover { background: #e2e8f0; box-shadow: none; } /* ══════════════════════════════════════════════════════════════ DELETE ACCOUNT MODAL OVERLAY Covers the full screen when the confirmation modal is open. ══════════════════════════════════════════════════════════════ */ /* The modal uses Laravel's x-modal component which handles visibility via Alpine.js. These classes style the inner content panel that appears inside x-modal. */ .pf-modal-body { padding: 32px 28px; } .pf-modal-title { font-family: var(--pf-font-display); font-size: 18px; font-weight: 800; color: var(--pf-text-dark); margin: 0 0 8px; } .pf-modal-warning { font-size: 14px; color: var(--pf-red); line-height: 1.65; margin-bottom: 20px; } .pf-modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; } /* ══════════════════════════════════════════════════════════════ DANGER ZONE SECTION The "Delete Account" card — distinct red styling. ══════════════════════════════════════════════════════════════ */ .pf-danger-description { font-size: 14px; color: var(--pf-text-body); line-height: 1.65; margin: 0 0 20px; } /* ══════════════════════════════════════════════════════════════ ENTRANCE ANIMATION ══════════════════════════════════════════════════════════════ */ @keyframes pfFadeDown { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════ RESPONSIVE DESIGN ══════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .pf-container { padding: 0 16px; } .pf-hero { padding: 36px 16px 24px; } .pf-card-header, .pf-card-body { padding-left: 20px; padding-right: 20px; } .pf-hero-title { font-size: 22px; } .pf-form-actions, .pf-modal-actions { flex-direction: column; align-items: flex-start; } .pf-btn { width: 100%; justify-content: center; } }