/* |-------------------------------------------------------------------------- | RESET |-------------------------------------------------------------------------- */ html, body.page-id-329 { margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } /* |-------------------------------------------------------------------------- | FULL PAGE BACKGROUND |-------------------------------------------------------------------------- */ body.page-id-329 { background-image: url("../assets/signup-bg.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* |-------------------------------------------------------------------------- | HIDE WORDPRESS + THEME CONTENT |-------------------------------------------------------------------------- */ body.page-id-329 #wpadminbar, body.page-id-329 header, body.page-id-329 footer, body.page-id-329 aside, body.page-id-329 .topbar, body.page-id-329 .sidebar, body.page-id-329 .site-sidebar, body.page-id-329 .dqmate-sidebar, body.page-id-329 .site-header, body.page-id-329 .site-footer, body.page-id-329 .hero, body.page-id-329 .hero-grid, body.page-id-329 .featured, body.page-id-329 .featured-grid, body.page-id-329 .keep-reading, body.page-id-329 .post-feed, body.page-id-329 .posts, body.page-id-329 article, body.page-id-329 img, body.page-id-329 h1:not(.dqmate-title), body.page-id-329 h2, body.page-id-329 h3, body.page-id-329 p:not(.dqmate-subtitle), body.page-id-329 .shell, body.page-id-329 .site-content, body.page-id-329 .content-area, body.page-id-329 .entry-content, body.page-id-329 .ct-container, body.page-id-329 .ct-content, body.page-id-329 .main-container { visibility: hidden !important; } /* |-------------------------------------------------------------------------- | AUTH WRAPPER |-------------------------------------------------------------------------- */ .dqmate-auth-wrapper { position: fixed; inset: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; z-index: 999999; } /* |-------------------------------------------------------------------------- | FULL PAGE BLUR OVERLAY |-------------------------------------------------------------------------- */ .dqmate-bg { position: absolute; inset: 0; z-index: 1; background: rgba(255,255,255,0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* |-------------------------------------------------------------------------- | GLASS CARD |-------------------------------------------------------------------------- */ .dqmate-card { position: relative; z-index: 50; width: 100%; max-width: 460px; padding: 48px 38px; border-radius: 22px; background: rgba(255,255,255,0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 25px 70px rgba(0,0,0,0.18); text-align: center; } /* |-------------------------------------------------------------------------- | BRAND |-------------------------------------------------------------------------- */ .dqmate-brand { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 18px; letter-spacing: 0.4px; } /* |-------------------------------------------------------------------------- | TITLE |-------------------------------------------------------------------------- */ .dqmate-title { color: #111827 !important; font-size: 42px; line-height: 1.08; font-weight: 800; margin-bottom: 10px; letter-spacing: -1px; } /* |-------------------------------------------------------------------------- | SUBTITLE |-------------------------------------------------------------------------- */ .dqmate-subtitle { color: rgba(17,24,39,0.62); font-size: 15px; margin-bottom: 28px; line-height: 1.5; } /* |-------------------------------------------------------------------------- | MESSAGE |-------------------------------------------------------------------------- */ .dqmate-message { font-size: 14px; margin-bottom: 16px; min-height: 22px; text-align: center; font-weight: 600; } /* |-------------------------------------------------------------------------- | SUCCESS |-------------------------------------------------------------------------- */ .dqmate-success { color: #16a34a !important; } /* |-------------------------------------------------------------------------- | ERROR |-------------------------------------------------------------------------- */ .dqmate-error { color: #dc2626 !important; } /* |-------------------------------------------------------------------------- | INPUTS |-------------------------------------------------------------------------- */ .dqmate-input { width: 100%; height: 56px; border-radius: 14px; border: 1px solid rgba(17,24,39,0.08); background: rgba(255,255,255,0.92); padding: 0 18px; margin-bottom: 16px; color: #111827; font-size: 15px; outline: none; box-sizing: border-box; transition: 0.25s; } /* |-------------------------------------------------------------------------- | INPUT FOCUS |-------------------------------------------------------------------------- */ .dqmate-input:focus { border-color: rgba(59,130,246,0.35); box-shadow: 0 0 0 4px rgba(59,130,246,0.08); background: #ffffff; } /* |-------------------------------------------------------------------------- | PLACEHOLDER |-------------------------------------------------------------------------- */ .dqmate-input::placeholder { color: rgba(17,24,39,0.45); } /* |-------------------------------------------------------------------------- | BUTTON |-------------------------------------------------------------------------- */ .dqmate-btn { width: 100%; height: 56px; border: none; border-radius: 14px; background: #111827; color: #ffffff; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.25s ease; } /* |-------------------------------------------------------------------------- | BUTTON HOVER |-------------------------------------------------------------------------- */ .dqmate-btn:hover { transform: translateY(-1px); background: #000000; } /* |-------------------------------------------------------------------------- | OTP SECTION |-------------------------------------------------------------------------- */ #dqmate_otp_section { margin-top: 10px; } /* |-------------------------------------------------------------------------- | AUTH SWITCH |-------------------------------------------------------------------------- */ .dqmate-switch-auth { margin-top: 22px; text-align: center; color: rgba(17,24,39,0.72); font-size: 14px; } /* |-------------------------------------------------------------------------- | TEXT BUTTON |-------------------------------------------------------------------------- */ .dqmate-text-btn { background: transparent; border: none; color: #2563eb; font-size: 14px; font-weight: 700; cursor: pointer; margin-left: 5px; padding: 0; transition: 0.25s; } /* |-------------------------------------------------------------------------- | TEXT BUTTON HOVER |-------------------------------------------------------------------------- */ .dqmate-text-btn:hover { opacity: 0.75; } /* |-------------------------------------------------------------------------- | CLOSE BUTTON |-------------------------------------------------------------------------- */ .dqmate-close-btn { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; border-radius: 50%; background: rgba(17,24,39,0.04); color: rgba(17,24,39,0.45); font-size: 18px; font-weight: 400; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.25s ease; z-index: 99; } .dqmate-close-btn:hover { background: rgba(17,24,39,0.08); color: #111827; transform: rotate(90deg); } /* |-------------------------------------------------------------------------- | WELCOME TOAST |-------------------------------------------------------------------------- */ .dqmate-toast { position: fixed; top: 20px; right: 20px; width: 360px; background: #ffffff; border-radius: 18px; padding: 18px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 18px 50px rgba(0,0,0,0.14); z-index: 999999999; animation: dqmateToastIn 0.35s ease; } .dqmate-toast-icon { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #ffffff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 700; flex-shrink: 0; } .dqmate-toast-content { flex: 1; } .dqmate-toast-title { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 4px; } .dqmate-toast-subtitle { font-size: 14px; color: #6b7280; line-height: 1.4; } .dqmate-toast-close { cursor: pointer; color: #9ca3af; font-size: 18px; line-height: 1; transition: 0.2s; } .dqmate-toast-close:hover { color: #111827; } @keyframes dqmateToastIn { from { opacity: 0; transform: translateY(-12px) translateX(12px); } to { opacity: 1; transform: translateY(0) translateX(0); } } /* |-------------------------------------------------------------------------- | ACCOUNT MODAL |-------------------------------------------------------------------------- */ .dqmate-account-modal { position: fixed; inset: 0; background: rgba(255,255,255,0.25); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: none; justify-content: center; align-items: center; z-index: 999999999; } /* |-------------------------------------------------------------------------- | ACCOUNT CARD |-------------------------------------------------------------------------- */ .dqmate-account-card { width: 100%; max-width: 460px; background: #ffffff; border-radius: 24px; padding: 36px; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,0.18); animation: dqmateAccountIn 0.25s ease; } .dqmate-account-title { font-size: 34px; font-weight: 800; margin-bottom: 30px; color: #111827; } .dqmate-account-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; border-radius: 50%; background: #f3f4f6; font-size: 20px; cursor: pointer; color: #374151; display: flex; justify-content: center; align-items: center; transition: 0.25s; } .dqmate-account-close:hover { background: #e5e7eb; transform: rotate(90deg); } .dqmate-account-item { margin-bottom: 24px; } .dqmate-account-label { display: block; font-size: 13px; color: #6b7280; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .dqmate-account-value { font-size: 18px; font-weight: 600; color: #111827; } .dqmate-account-plan { margin-top: 10px; padding: 14px 18px; border-radius: 14px; background: #eff6ff; color: #2563eb; font-weight: 700; text-align: center; } .dqmate-account-logout { margin-top: 26px; display: flex !important; justify-content: center; align-items: center; width: 100%; height: 56px; background: #0f172a !important; color: #ffffff !important; border-radius: 14px; text-decoration: none !important; font-weight: 700; font-size: 15px; line-height: 1; box-sizing: border-box; border: none; opacity: 1 !important; visibility: visible !important; transition: all 0.25s ease; } .dqmate-account-logout:hover { background: #000000 !important; color: #ffffff !important; transform: translateY(-1px); } @keyframes dqmateAccountIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* |-------------------------------------------------------------------------- | TABLET VIEW |-------------------------------------------------------------------------- */ @media (max-width: 1024px) { .dqmate-card { max-width: 520px; width: calc(100% - 60px); padding: 42px 34px; } .dqmate-title { font-size: 38px; } } /* |-------------------------------------------------------------------------- | MOBILE VIEW |-------------------------------------------------------------------------- */ @media (max-width: 768px) { .dqmate-auth-wrapper { padding: 20px; box-sizing: border-box; } .dqmate-card { width: 100%; max-width: 100%; padding: 34px 22px; border-radius: 20px; } .dqmate-title { font-size: 32px; } .dqmate-toast { width: calc(100% - 30px); right: 15px; top: 15px; padding: 16px; } .dqmate-account-card { width: calc(100% - 30px); padding: 28px 22px; } .dqmate-account-title { font-size: 28px; } } /* |-------------------------------------------------------------------------- | SMALL MOBILE |-------------------------------------------------------------------------- */ @media (max-width: 480px) { .dqmate-card { padding: 30px 18px; } .dqmate-title { font-size: 28px; } .dqmate-toast-title { font-size: 15px; } .dqmate-toast-subtitle { font-size: 13px; } }