/* ============================================================ Partner-portál — közös stíluslap (partner.php / partner-login.php / partner-register.php). MIÉRT KÜLÖN FÁJL: a három oldal korábban egyenként SAJÁT, egyedi token-készletet definiált inline (--c-bg, --c-accent, --r-sm), ami sem a FRONTEND_APPLE_PLAYBOOK token-rendszerét (--sp-*, --fs-*, --clr-*, --r-*, --ease-*), sem egymást nem követte. Itt EGY forrás van, playbook-tokenekkel. TENANT-SZÍN: a --clr-accent / --clr-accent-hover / --clr-accent-contrast a három oldal -jében, a tenant brand_primary_color-ából (BrandTokens) íródik felül (l. includes/partner-portal-theme.php). Itt csak a fallback él. NÉVTÉR: minden osztály `pp-` előtagú, hogy egy tenant-stíluslap mellett is ütközésmentes maradjon. FONT: Apple system font stack (playbook 1.2) — SZÁNDÉKOSAN nincs külső Google Fonts hívás (CSP + adatvédelem + 0 hálózati kör). ============================================================ */ :root { /* Spacing — 4pt rács (playbook 1.1) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Typography (playbook 1.2) */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-snug: 1.25; --lh-normal: 1.5; --ls-tight: -0.022em; --ls-wide: 0.04em; /* Színek — light (playbook 1.3) */ --clr-bg: #FFFFFF; --clr-surface: #F5F5F7; --clr-surface-elevated: #FFFFFF; --clr-text: #1D1D1F; --clr-text-secondary: #515154; --clr-text-muted: #6B7785; --clr-border: #D2D2D7; --clr-border-subtle: #F0F0F2; --clr-accent: #0071E3; --clr-accent-hover: #0064CB; --clr-accent-contrast: #FFFFFF; --clr-accent-soft: rgba(0, 113, 227, 0.08); /* Szövegre használt akcent: világos márkaszínnél a sötétebbre állítja, hogy a link és a címke-felirat fehér háttéren is olvasható maradjon. */ --clr-accent-text: var(--clr-accent); --clr-success: #1B9E75; --clr-success-soft: rgba(27, 158, 117, 0.12); --clr-warning: #8A6700; --clr-warning-soft: rgba(224, 168, 0, 0.14); --clr-error: #D9534F; --clr-error-soft: rgba(217, 83, 79, 0.10); /* Radius (playbook 1.5) */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* Shadow (playbook 1.6) — Apple: sose erős */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); /* Animáció (playbook 1.7) */ --t-fast: 150ms; --t-base: 250ms; --ease-system: cubic-bezier(0.4, 0, 0.2, 1); } /* Sötét mód (playbook 1.4). Az akcentszín sötét változatát a írja felül. */ @media (prefers-color-scheme: dark) { :root { --clr-bg: #000000; --clr-surface: #1C1C1E; --clr-surface-elevated: #2C2C2E; --clr-text: #F5F5F7; --clr-text-secondary: #A1A1A6; --clr-text-muted: #98989D; --clr-border: #38383A; --clr-border-subtle: #28282B; --clr-accent-soft: rgba(255, 255, 255, 0.08); --clr-success: #30D598; --clr-success-soft: rgba(48, 213, 152, 0.16); --clr-warning: #E5B84B; --clr-warning-soft: rgba(229, 184, 75, 0.16); --clr-error: #FF6B66; --clr-error-soft: rgba(255, 107, 102, 0.14); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } } /* ---------- Alap ---------- */ .pp *, .pp *::before, .pp *::after { box-sizing: border-box; } body.pp { margin: 0; font-family: var(--font-system); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--clr-text); background: var(--clr-surface); min-height: 100vh; -webkit-font-smoothing: antialiased; } body.pp-centered { display: flex; align-items: center; justify-content: center; padding: var(--sp-6); } .pp h1, .pp h2, .pp h3 { margin: 0; letter-spacing: var(--ls-tight); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } .pp p { margin: 0; } .pp a { color: var(--clr-accent-text); text-decoration: none; transition: opacity var(--t-fast) var(--ease-system); } .pp a:hover { opacity: 0.75; } /* ---------- Fejléc-sáv (portál) ---------- */ .pp-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-6); background: var(--clr-surface-elevated); border-bottom: 1px solid var(--clr-border-subtle); position: sticky; top: 0; z-index: 10; } .pp-topbar__brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; } .pp-topbar__logo { height: 28px; width: auto; display: block; } .pp-topbar__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-text); } .pp-topbar__right { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--clr-text-muted); } .pp-topbar__who { display: none; } @media (min-width: 640px) { .pp-topbar__who { display: inline; } } /* ---------- Elrendezés ---------- */ .pp-main { max-width: 1000px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); } .pp-eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--clr-text-muted); font-weight: var(--fw-semibold); margin: var(--sp-8) 0 var(--sp-3); } .pp-card { background: var(--clr-surface-elevated); border: 1px solid var(--clr-border-subtle); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); } .pp-card--auth { width: 100%; max-width: 460px; padding: var(--sp-10) var(--sp-8); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } .pp-lead { color: var(--clr-text-secondary); font-size: var(--fs-lg); line-height: var(--lh-normal); margin-top: var(--sp-2); } .pp-note { color: var(--clr-text-secondary); font-size: var(--fs-sm); } /* ---------- Ikon-plakett ---------- */ .pp-icon { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--clr-accent); color: var(--clr-accent-contrast); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xl); margin-bottom: var(--sp-5); } .pp-icon--ok { background: var(--clr-success); color: #FFFFFF; } /* ---------- Statisztika-csempék ---------- */ .pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); } .pp-stat { background: var(--clr-surface-elevated); border: 1px solid var(--clr-border-subtle); border-radius: var(--r-lg); padding: var(--sp-5); } .pp-stat__num { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--clr-text); } .pp-stat__label { font-size: var(--fs-sm); color: var(--clr-text-muted); margin-top: var(--sp-1); } @media (max-width: 600px) { .pp-stats { grid-template-columns: 1fr 1fr; } } /* ---------- Űrlap ---------- */ .pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .pp-span2 { grid-column: 1 / -1; } .pp-field { display: flex; flex-direction: column; gap: var(--sp-2); } .pp-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--clr-text); } .pp-label__hint { font-weight: var(--fw-regular); color: var(--clr-text-muted); } .pp-input { width: 100%; padding: var(--sp-3); border: 1px solid var(--clr-border); border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-base); background: var(--clr-surface-elevated); color: var(--clr-text); transition: border-color var(--t-fast) var(--ease-system); } .pp-input::placeholder { color: var(--clr-text-muted); } .pp-input:focus { outline: none; border-color: var(--clr-accent); box-shadow: 0 0 0 3px var(--clr-accent-soft); } .pp-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--clr-text-secondary); line-height: var(--lh-normal); } .pp-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--clr-accent); } .pp-consent a { text-decoration: underline; } @media (max-width: 520px) { .pp-grid { grid-template-columns: 1fr; } } /* ---------- Gombok ---------- Szabály: gomb-sáv alul, ELSŐDLEGES jobbra, semleges mellette, veszélyes a BAL szélen réssel. Zöld/akcent = elkötelező; semleges kontúros = következmény nélküli kilépés; piros kontúros = következménnyel jár. */ .pp-actions { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; } .pp-actions .pp-btn--danger { margin-right: auto; } .pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border: 1px solid transparent; border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-fast) var(--ease-system), border-color var(--t-fast) var(--ease-system), opacity var(--t-fast) var(--ease-system); } .pp-btn:disabled { opacity: 0.55; cursor: not-allowed; } .pp-btn--primary { background: var(--clr-accent); color: var(--clr-accent-contrast); } .pp-btn--primary:hover:not(:disabled) { background: var(--clr-accent-hover); color: var(--clr-accent-contrast); } .pp-btn--neutral { background: transparent; color: var(--clr-text); border-color: var(--clr-border); } .pp-btn--neutral:hover:not(:disabled) { border-color: var(--clr-text-muted); opacity: 1; } .pp-btn--danger { background: transparent; color: var(--clr-error); border-color: var(--clr-error); } .pp-btn--danger:hover:not(:disabled) { background: var(--clr-error-soft); opacity: 1; } .pp-btn--block { width: 100%; } .pp-btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); } /* ---------- Címkék (badge) ---------- */ .pp-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap; } .pp-badge--pending { background: var(--clr-warning-soft); color: var(--clr-warning); } .pp-badge--contacted { background: var(--clr-accent-soft); color: var(--clr-accent-text); } .pp-badge--won, .pp-badge--paid { background: var(--clr-success-soft); color: var(--clr-success); } .pp-badge--lost { background: var(--clr-error-soft); color: var(--clr-error); } /* ---------- Üzenet-sávok ---------- */ .pp-msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); font-size: var(--fs-sm); line-height: var(--lh-normal); border: 1px solid transparent; } .pp-msg--error { background: var(--clr-error-soft); color: var(--clr-error); border-color: var(--clr-error); } .pp-msg--warn { background: var(--clr-warning-soft); color: var(--clr-warning); border-color: var(--clr-warning); } .pp-msg--ok { background: var(--clr-success-soft); color: var(--clr-success); border-color: var(--clr-success); } .pp-msg--inline { grid-column: 1 / -1; } /* ---------- Táblázat ---------- */ .pp-table-wrap { overflow-x: auto; } .pp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .pp-table th { text-align: left; padding: var(--sp-3); font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--clr-text-muted); border-bottom: 1px solid var(--clr-border); } .pp-table td { padding: var(--sp-3); border-bottom: 1px solid var(--clr-border-subtle); vertical-align: middle; color: var(--clr-text); } .pp-table tr:last-child td { border-bottom: none; } .pp-table .pp-cell-muted { color: var(--clr-text-muted); white-space: nowrap; font-size: var(--fs-xs); } .pp-table .pp-cell-empty { text-align: center; color: var(--clr-text-muted); padding: var(--sp-8) var(--sp-3); } /* ---------- Partner-kód doboz (regisztráció siker) ---------- */ .pp-code { border: 1px solid var(--clr-accent); background: var(--clr-accent-soft); border-radius: var(--r-lg); padding: var(--sp-5); text-align: center; margin: var(--sp-5) 0 var(--sp-3); } .pp-code__label { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--clr-text-muted); margin-bottom: var(--sp-2); } .pp-code__value { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--clr-text); } /* ---------- Lábjegyzet ---------- */ .pp-foot { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--clr-text-muted); text-align: center; } /* Mozgás-érzékenység */ @media (prefers-reduced-motion: reduce) { .pp *, .pp *::before, .pp *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }