/* ============================================================ Legacy support pages Used by: cancel.blade.php, cancel-complete.blade.php ============================================================ */ body { margin: 0; } body, td, th { font-family: Arial, Tahoma, Verdana; font-size: 12px; line-height: 18px; color: #000000; } a:link, a:visited, a:hover, a:active { color: #003366; } .heading { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } .gtext { color: #666666; text-decoration: none; } a.gtext:link, a.gtext:hover, a.gtext:visited, a.gtext:active { color: #666666; } h1, .h1 { font-size: 24px; } h2, .h2 { font-size: 22px; } h3, .h3 { font-size: 20px; } h4, .h4 { font-size: 19px; } h5, .h5 { font-size: 14px; } h6, .h6 { font-size: 12px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: helvetica, arial, sans-serif; font-weight: bold; color: #000000; background-color: transparent; margin: 5px 0 0 0; } .footer-address { background-image: url(../../images/cb-billing-address-footer.png?1493228659); width: 707px; height: 16px; background-repeat: no-repeat; padding-bottom: 3px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .footer-address { background-image: url(../../images/cb-billing-address-footer@2x.png?1493228659); background-size: 707px 16px; background-repeat: no-repeat; padding-bottom: 2px; } } /* ============================================================ Customer support home page Used by: home.blade.php () All rules are scoped under .support-page so they stay isolated from the legacy styles above. ============================================================ */ .support-page { --bg-secondary: #111111; --bg-primary: #232323; --bg-secondary-2: #414141; --text: #ffffff; --text-secondary: #c5c5c5; --text-green: #49cd68; --green-600: #197639; --border-primary: #414141; --maxw: 980px; --shadow: 0px 8px 5px rgba(0, 0, 0, 0.05); } .support-page, .support-page *, .support-page *::before, .support-page *::after { box-sizing: border-box; } body.support-page { margin: 0; padding: 0; background: var(--bg-secondary); color: var(--text); font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; align-items: center; min-height: 100vh; } .support-page a { color: inherit; text-decoration: none; } .support-page .wrap { width: var(--maxw); max-width: 100%; margin: 0 auto; } /* ---------- Top bar ---------- */ .support-page .topbar { width: 100%; background: var(--bg-primary); box-shadow: var(--shadow); } .support-page .topbar-inner { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .support-page .brand { font-weight: 700; font-size: 16px; width: 132px; } .support-page .badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 52px; background: rgba(73, 205, 104, 0.15); color: var(--text-green); font-size: 14px; font-weight: 600; white-space: nowrap; } .support-page .badge-dot { width: 8px; height: 8px; border-radius: 20px; background: var(--green-600); } /* ---------- Main content ---------- */ .support-page .content { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; padding-top: 32px; } .support-page .hero { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: center; padding: 0 200px; } .support-page .hero h1 { margin: 0; font-family: inherit; color: var(--text); font-size: 32px; font-weight: 700; line-height: normal; } .support-page .hero p { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; } /* ---------- Contact cards ---------- */ .support-page .cards { width: 100%; display: flex; flex-direction: column; gap: 12px; } .support-page .cards-row { display: flex; gap: 12px; } .support-page .card { flex: 1 0 0; min-width: 0; background: var(--bg-primary); box-shadow: var(--shadow); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .support-page .card-head { display: flex; align-items: center; gap: 12px; } .support-page .icon-box { flex: none; width: 60px; height: 60px; border-radius: 20px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; } .support-page .icon-plain { flex: none; width: 60px; height: 60px; display: flex; } .support-page .icon-box img { width: 24px; height: 19px; display: block; } .support-page .icon-plain img { width: 60px; height: 60px; display: block; } .support-page .card-text { display: flex; flex-direction: column; align-items: flex-start; } .support-page .card-label { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--text-secondary); } .support-page .card-value { font-size: 20px; font-weight: 500; line-height: 24px; color: var(--text); white-space: nowrap; } .support-page .card-sub { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--text-secondary); } .support-page .notice { width: 100%; background: rgba(255, 213, 0, 0.15); border-radius: 20px; padding: 20px; } .support-page .notice p { margin: 0; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--text); } /* ---------- Cancel button ---------- */ .support-page .cancel-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 52px; background: var(--bg-secondary-2); color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; text-transform: uppercase; white-space: nowrap; } /* ---------- Cancel-complete success card ---------- */ .support-page .success-card { width: 100%; background: var(--bg-primary); box-shadow: var(--shadow); border-radius: 20px; padding: 44px 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .support-page .success-icon { display: flex; align-items: center; padding: 20px; } .support-page .success-icon img { width: 60px; height: 60px; display: block; } .support-page .success-card h1 { margin: 0; font-family: inherit; color: var(--text); font-size: 32px; font-weight: 700; line-height: normal; } .support-page .success-card p { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--text); } /* 404 / error variant — muted message text */ .support-page .error-card p { color: var(--text-secondary); } /* ---------- Cancel-subscription form ---------- */ .support-page .form-card { width: 100%; background: var(--bg-primary); box-shadow: var(--shadow); border-radius: 20px; padding: 44px 120px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; } .support-page .form-error { width: 100%; background: rgba(217, 10, 22, 0.15); border-radius: 12px; padding: 16px 20px; font-size: 14px; line-height: 24px; color: var(--text); } .support-page .field { width: 100%; } .support-page .field-control { position: relative; width: 100%; } .support-page .field-input { width: 100%; height: 48px; margin: 0; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 6px; color: var(--text); font-family: inherit; font-size: 16px; line-height: 24px; outline: none; } .support-page .field-input::placeholder { color: transparent; } .support-page .field-input:focus { border-color: var(--text-secondary); } .support-page .field-label { position: absolute; left: 16px; top: 12px; padding: 0 4px; background: var(--bg-primary); color: var(--text-secondary); font-size: 16px; line-height: 24px; pointer-events: none; transition: top 0.15s ease, left 0.15s ease, font-size 0.15s ease, line-height 0.15s ease; } .support-page .field-input:focus + .field-label, .support-page .field-input:not(:placeholder-shown) + .field-label { top: -8px; left: 11px; font-size: 12px; line-height: 16px; } .support-page .field-helper { display: flex; margin-top: 4px; font-size: 12px; line-height: normal; letter-spacing: 0.12px; color: var(--text-secondary); } .support-page .field-helper span { flex: 1 0 0; min-width: 0; opacity: 0.7; } .support-page .submit-group { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .support-page .submit-btn { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 52px; background: #ffd500; color: var(--bg-primary); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 24px; text-transform: uppercase; } /* ---------- FAQ ---------- */ .support-page .faq { width: 100%; background: var(--bg-primary); box-shadow: var(--shadow); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 20px; } .support-page .faq-item { display: flex; flex-direction: column; } .support-page .faq-head { appearance: none; background: none; border: 0; margin: 0; padding: 0; width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; color: inherit; font-family: inherit; } .support-page .faq-lead { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .support-page .faq-lead img { display: block; } .support-page .faq-lead.check img { width: 20px; height: 20px; } .support-page .faq-lead.close img { width: 24px; height: 24px; } .support-page .faq-q { flex: 1 0 0; min-width: 0; font-size: 16px; font-weight: 700; line-height: normal; } .support-page .faq-chevron { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .support-page .faq-chevron img { width: 12px; height: 6px; display: block; } .support-page .faq-item.open .faq-chevron { transform: scaleY(-1); } .support-page .faq-body { display: none; padding-left: 36px; padding-top: 12px; } .support-page .faq-item.open .faq-body { display: block; } .support-page .faq-body p { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--text); } .support-page .faq-divider { width: 100%; height: 1px; background: var(--border-primary); } .support-page .spacer { width: 100%; height: 24px; } /* ---------- Footer ---------- */ .support-page .footer { width: 100%; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 40px; } .support-page .footer-cols { display: flex; gap: 20px; font-size: 14px; } .support-page .footer-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .support-page .footer-col .label { margin: 0; font-weight: 700; color: var(--text); text-transform: uppercase; } .support-page .footer-col .value { font-weight: 400; line-height: 24px; color: var(--text-secondary); } .support-page .footer-bottom { width: 100%; display: flex; flex-direction: column; } .support-page .footer-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); } .support-page .footer-copy { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 400; line-height: 24px; color: var(--text-secondary); } /* ---------- Mobile ---------- */ @media (max-width: 1024px) { .support-page .topbar-inner, .support-page .content, .support-page .footer-cols { padding-left: 8px; padding-right: 8px; } .support-page .hero { padding: 0 8px; } .support-page .form-card, .support-page .success-card { padding: 20px 12px; } .support-page .cards-row { flex-direction: column; } .support-page .faq { padding: 32px 12px; } .support-page .footer-cols { flex-direction: column; align-items: center; width: 100%; } .support-page .footer-col { align-items: center; text-align: center; width: 100%; } }