/* ═══════════════════════════════════════════════════════ GLAMOUR — auth.css (signup + signin) Fonts: Syne (headings) · DM Sans (body) ← matches styles.css Palette: Warm black + Gold ← matches styles.css glamourng.com · 2026 ═══════════════════════════════════════════════════════ */ /* ── Fonts — same pair as index (loaded in of each page) ── */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap'); /* ── Design tokens — mirrored exactly from styles.css ── */ :root { /* Backgrounds — warm near-black, not navy */ --bg: #0D0A06; --bg2: #130F08; --surface: #1A1409; --surface2: #221C0D; /* Gold — identical stops */ --gold: #C9A84C; --gold-light: #E8C96A; --gold-dim: rgba(201,168,76,0.12); --gold-border: rgba(201,168,76,0.22); --gold-grad: linear-gradient(135deg, #E8C96A, #C9A84C); /* Text */ --text: #F5EDD8; --text-secondary: #B8A882; --text-muted: #8A7D65; /* Semantic */ --success: #5FAF7B; --error: #FF6B6B; /* Borders */ --border: rgba(201,168,76,0.10); --border-soft: rgba(201,168,76,0.06); --border-form: rgba(255,255,255,0.06); /* Typography */ --ff-head: 'Syne', sans-serif; --ff-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Motion */ --transition: all 0.28s cubic-bezier(0.4,0,0.2,1); } /* ── Reset ── */ *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--ff-body); background: var(--bg); color: var(--text); line-height: 1.65; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } a { text-decoration: none; color: inherit; transition: color 0.2s; } button { cursor: pointer; font-family: var(--ff-body); } img { max-width: 100%; display: block; } /* ── Scrollbar — matches index ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.35); } /* ── Skip link ── */ .skip-link { position: absolute; top: -999px; left: 8px; background: var(--gold); color: var(--bg); padding: 8px 16px; border-radius: 6px; font-weight: 700; z-index: 9999; transition: top 0.2s; } .skip-link:focus { top: 8px; } /* ── Gold text utility ── */ .text-gold { background: var(--gold-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ══════════════════════════════════════════════════════ NAVBAR — 70px to match index exactly ══════════════════════════════════════════════════════ */ .auth-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(13,10,6,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); height: 70px; /* ← was 64px */ display: flex; align-items: center; justify-content: space-between; padding: 0 40px; transition: var(--transition); } .auth-navbar.scrolled { background: rgba(13,10,6,0.98); box-shadow: 0 4px 24px rgba(0,0,0,0.5); } /* Logo — Syne 800 22px to match index .nav-logo */ .nav-logo { display: flex; align-items: center; gap: 8px; font-family: var(--ff-head); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--gold); flex-shrink: 0; } .nav-logo-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-grad); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--bg); font-weight: 800; flex-shrink: 0; } .auth-nav-right { display: flex; align-items: center; gap: 12px; } .auth-nav-hint { font-size: 0.82rem; color: var(--text-muted); } /* Nav buttons — match index .btn style */ .btn-nav-outline { padding: 9px 20px; border-radius: 12px; border: 2px solid var(--gold-border); color: var(--gold); font-family: var(--ff-head); font-size: 14px; font-weight: 700; transition: var(--transition); } .btn-nav-outline:hover { background: var(--gold-dim); } .btn-nav-gold { padding: 9px 20px; border-radius: 12px; background: var(--gold-grad); border: 2px solid transparent; color: var(--bg); font-family: var(--ff-head); font-size: 14px; font-weight: 700; transition: var(--transition); } .btn-nav-gold:hover { background: linear-gradient(135deg, #E8C96A, var(--gold)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.35); } /* ══════════════════════════════════════════════════════ PAGE LAYOUT ══════════════════════════════════════════════════════ */ .auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 70px; /* ← was 64px */ position: relative; } /* Radial glow — matches index hero glow direction */ .auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(201,168,76,0.05) 0%, transparent 60%); } /* ══════════════════════════════════════════════════════ BENEFITS COLUMN — warm surfaces from index ══════════════════════════════════════════════════════ */ .auth-benefits { background: linear-gradient(160deg, var(--bg2), var(--surface)); border-right: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: center; padding: clamp(40px,5vw,60px); position: relative; z-index: 1; overflow-y: auto; } .auth-benefits-inner { max-width: 400px; padding-top: 8px; } /* Benefits logo — Syne to match */ .auth-benefits-logo { display: flex; align-items: center; gap: 8px; font-family: var(--ff-head); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--gold); margin-bottom: 24px; } /* Benefits headings — Syne 800 tight tracking */ .auth-benefits-title { font-family: var(--ff-head); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 10px; } .auth-benefits-sub { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.65; } /* Benefit list items */ .auth-benefits-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; list-style: none; } .auth-benefit-item { display: flex; align-items: flex-start; gap: 14px; } .benefit-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--gold-dim); border: 1px solid var(--gold-border); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .benefit-title { font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 2px; } .benefit-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; } /* Fee note */ .auth-fee-note { background: var(--gold-dim); border: 1px solid var(--gold-border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 20px; } .fee-note-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; } .fee-note-amount { font-family: var(--ff-head); font-size: 1.1rem; font-weight: 800; color: var(--gold); letter-spacing: -0.02em; } .fee-note-cashback { font-size: 0.75rem; color: var(--success); } /* Step guide */ .register-steps { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .register-steps-title { font-family: var(--ff-head); font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-light); margin-bottom: 12px; } .steps-ol { list-style: none; display: flex; flex-direction: column; gap: 10px; } .steps-ol li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; } .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-grad); color: var(--bg); font-family: var(--ff-head); font-weight: 800; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } /* Inline FAQ */ .faq-section { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } .faq-section-title { font-family: var(--ff-head); font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin-bottom: 12px; } .faq-item { border-bottom: 1px solid var(--border-soft); } .faq-q { width: 100%; background: none; border: none; text-align: left; padding: 11px 0; font-family: var(--ff-body); font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: color 0.2s; } .faq-q:hover { color: var(--gold); } .faq-icon { flex-shrink: 0; font-size: 0.9rem; color: var(--gold); transition: transform 0.22s; } .faq-a { font-size: 0.8rem; color: var(--text-muted); line-height: 1.65; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-a { max-height: 200px; padding-bottom: 12px; } .faq-item.open .faq-icon { transform: rotate(45deg); } /* ══════════════════════════════════════════════════════ FORM CARD COLUMN ══════════════════════════════════════════════════════ */ .auth-card-wrap { display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px,4vw,48px); position: relative; z-index: 1; overflow-y: auto; } .auth-card { width: 100%; max-width: 460px; padding-top: 12px; } /* Card logo */ .auth-logo { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 18px; font-family: var(--ff-head); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--gold); } /* Headings — Syne 800 tight tracking */ .auth-title { font-family: var(--ff-head); font-size: clamp(1.7rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; text-align: center; margin-bottom: 5px; } .auth-subtitle { text-align: center; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; } /* Value prop banner */ .value-prop { background: var(--gold-dim); border: 1px solid var(--gold-border); border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; color: var(--text-secondary); text-align: center; margin-bottom: 16px; line-height: 1.6; } .value-prop strong { color: var(--gold); } /* ── Alerts ── */ .auth-alert { padding: 12px 16px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 14px; display: none; line-height: 1.5; } .auth-alert.visible { display: block; } .auth-alert-error { background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25); color: var(--error); } .auth-alert-success { background: rgba(95,175,123,0.08); border: 1px solid rgba(95,175,123,0.25); color: var(--success); } /* ══════════════════════════════════════════════════════ FORM ELEMENTS ══════════════════════════════════════════════════════ */ .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-group { margin-bottom: 12px; } .form-label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); } .form-input { width: 100%; padding: 11px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-form); border-radius: 10px; color: var(--text); font-size: 0.93rem; font-family: var(--ff-body); transition: border-color 0.2s, box-shadow 0.2s; outline: none; -webkit-appearance: none; } .form-input:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); } .form-input::placeholder { color: var(--text-muted); } .form-select { width: 100%; padding: 11px 36px 11px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border-form); border-radius: 10px; color: var(--text); font-size: 0.93rem; font-family: var(--ff-body); outline: none; cursor: pointer; transition: border-color 0.2s; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A84C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .form-select:focus { border-color: var(--gold-border); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); } .form-select option { background: var(--surface); color: var(--text); } .form-error { color: var(--error); font-size: 0.76rem; margin-top: 4px; display: none; } .form-error.visible { display: block; } .form-terms { font-size: 0.74rem; color: var(--text-muted); text-align: center; margin-top: 10px; line-height: 1.6; } .form-terms a { color: var(--gold); } .auth-switch { text-align: center; font-size: 0.875rem; color: var(--text-secondary); margin-top: 16px; } .auth-switch a { color: var(--gold); font-weight: 600; } /* ── Forgot password ── */ .btn-forgot-wrap { text-align: right; margin-bottom: 12px; } .btn-forgot { font-size: 0.82rem; color: var(--gold); background: none; border: none; cursor: pointer; font-family: var(--ff-body); transition: opacity 0.2s; } .btn-forgot:hover { opacity: 0.75; } /* ══════════════════════════════════════════════════════ SUBMIT BUTTON — matches index .btn-gold exactly ══════════════════════════════════════════════════════ */ .btn-auth-gold { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), #b8952e); border: 2px solid transparent; color: var(--bg); font-family: var(--ff-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; transition: var(--transition); margin-top: 4px; will-change: transform; } .btn-auth-gold:hover:not(:disabled) { background: linear-gradient(135deg, var(--gold-light), var(--gold)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.35); } .btn-auth-gold:active:not(:disabled) { transform: translateY(0); } .btn-auth-gold:disabled { opacity: 0.7; cursor: wait; } /* ── Trust badges row ── */ .trust-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; } .trust-badge { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; padding-top: 70px; } .auth-benefits { display: none; } .auth-card-wrap { padding: clamp(24px,5vw,40px); } .auth-navbar { padding: 0 20px; } } @media (max-width: 480px) { .form-row-2 { grid-template-columns: 1fr; } .auth-nav-hint { display: none; } .auth-title { font-size: 1.65rem; } .trust-row { gap: 10px; } }