/* ============================================================================ IdeaRoll Design System — single source of truth -------------------------------------------------------------------------- Minden oldal ezt húzza be a -ben: - A legacy :root változók (--bg, --cyan, --purple, --pink, --green, --orange, --red, --text, --muted, --border, --grad1, --r) megmaradnak, hogy a meglévő oldalak ne törjenek el. - Új tokenek: surface-elevation skála, semantic color-role-ok, spacing skála, tipográfia skála, shadow elevation-ek, animáció tokenek. - Közös komponens-stílusok: btn-*, card, badge-*, input, modal, stb. ============================================================================ */ :root { /* ── Brand színek (soft cream paper — light theme) ──────────────────── Meleg krém papír háttér, sötét warm-brown szöveg, kissé sötétített accent színek (jó kontraszt fehér/krém felületen). A brand identitás (cyan→purple→pink gradient) megmarad. */ --bg: #faf7f0; /* warm cream paper */ --bg-deep: #f3eee3; /* slightly deeper cream */ --text: #2c2418; /* warm dark brown */ --text-soft: rgba(44,36,24,0.78); --muted: rgba(44,36,24,0.58); --muted-2: rgba(44,36,24,0.42); --cyan: #2a8fc4; /* darker for contrast on light bg */ --cyan-soft: rgba(42,143,196,0.10); --purple: #7c5fd6; /* darker mauve */ --purple-soft: rgba(124,95,214,0.10); --pink: #d63a8a; --green: #2f9a73; --green-soft: rgba(47,154,115,0.10); --orange: #c9772b; --orange-soft: rgba(201,119,43,0.10); --red: #c83e2b; --red-soft: rgba(200,62,43,0.10); /* Semantic role-ok */ --c-success: var(--green); --c-warning: var(--orange); --c-danger: var(--red); --c-info: var(--cyan); --c-accent: var(--purple); /* ── Felület-skála — light theme: fehér / halvány krém rétegek ─────── A bg cream, a kártyák fehérek (felfelé világosodnak). */ --surface: #ffffff; --surface-1: #ffffff; --surface-2: #fefcf6; --surface-3: #f6f2e6; --surface-modal: #ffffff; --border: rgba(44,36,24,0.10); --border-strong: rgba(44,36,24,0.18); --border-hi: rgba(42,143,196,0.40); --border-focus: rgba(42,143,196,0.55); /* ── Gradient-ek ─────────────────────────────────────────────────────── */ --grad1: linear-gradient(135deg, #2a8fc4 0%, #7c5fd6 50%, #d63a8a 100%); --grad-soft: linear-gradient(135deg, rgba(42,143,196,0.12) 0%, rgba(124,95,214,0.12) 100%); --grad-deep: linear-gradient(180deg, rgba(42,143,196,0.04) 0%, rgba(124,95,214,0.0) 100%); /* Az egész oldalra subtle warm radial — a bg lapossága helyett mélységérzet */ --bg-radial: radial-gradient(ellipse at top, rgba(124,95,214,0.07) 0%, rgba(0,0,0,0) 60%); /* ── Tipográfia skála (rem alapon) ──────────────────────────────────── */ --fs-display: 2.75rem; /* 44px — landing hero */ --fs-h1: 2rem; /* 32px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.2rem; /* 19.2px */ --fs-body: 0.95rem; /* 15.2px — törzs */ --fs-small: 0.85rem; /* 13.6px */ --fs-caption: 0.75rem; /* 12px — meta, footer, label */ --lh-tight: 1.15; --lh-base: 1.55; /* ── Spacing skála (4px-es lépésköz, T-shirt méret) ─────────────────── */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* ── Border radius skála ─────────────────────────────────────────────── */ --r: 14px; /* legacy default */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ── Shadow elevation — warm soft shadows for cream paper theme ───────── */ --shadow-sm: 0 1px 2px rgba(44,36,24,0.06); --shadow-md: 0 4px 14px rgba(44,36,24,0.08); --shadow-lg: 0 16px 40px rgba(44,36,24,0.12); --shadow-xl: 0 24px 60px rgba(44,36,24,0.18); --shadow-glow: 0 0 0 1px rgba(42,143,196,0.20), 0 6px 24px rgba(42,143,196,0.14); --shadow-glow-purple: 0 0 0 1px rgba(124,95,214,0.22), 0 6px 24px rgba(124,95,214,0.14); /* ── Animáció ─────────────────────────────────────────────────────────── */ --t-fast: 120ms; --t-base: 220ms; --t-slow: 360ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Layout ──────────────────────────────────────────────────────────── */ --container-max: 1280px; --container-pad: clamp(1rem, 4vw, 2rem); --nav-h: 64px; } /* ============================================================================ Reset + base ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; /* Warm radial overlay a flat bg helyett — kicsi mélységérzet, nem zavaró */ background: var(--bg-radial), var(--bg); background-attachment: fixed; color: var(--text); min-height: 100vh; font-size: var(--fs-body); line-height: var(--lh-base); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } img { max-width: 100%; display: block; } ::selection { background: rgba(42,143,196,0.35); color: var(--text); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; } /* ============================================================================ Komponensek — gombok ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.65rem 1.1rem; border-radius: var(--r-sm); border: 1px solid transparent; font-size: var(--fs-small); font-weight: 500; line-height: 1; white-space: nowrap; background: transparent; color: var(--text); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); text-decoration: none; user-select: none; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--grad1); color: #ffffff; font-weight: 600; border-color: rgba(44,36,24,0.16); box-shadow: var(--shadow-glow); } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-glow), var(--shadow-md); } .btn-secondary { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-hi); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-soft); } .btn-ghost:hover:not(:disabled) { background: var(--surface-1); color: var(--text); border-color: var(--border-strong); } .btn-danger { background: var(--red-soft); border-color: rgba(200,62,43,0.35); color: var(--red); } .btn-danger:hover:not(:disabled) { background: rgba(200,62,43,0.22); border-color: var(--red); } .btn-link { background: none; border: none; color: var(--cyan); padding: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(42,143,196,0.35); } .btn-link:hover:not(:disabled) { text-decoration-color: var(--cyan); } /* Méret-variánsok */ .btn-sm { padding: 0.4rem 0.75rem; font-size: var(--fs-caption); border-radius: 6px; } .btn-lg { padding: 0.85rem 1.5rem; font-size: var(--fs-body); border-radius: var(--r-md); } /* ============================================================================ Komponensek — kártya, badge, input, modal ============================================================================ */ .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), transform var(--t-base) var(--ease); } .card-hover { cursor: pointer; } .card-hover:hover { border-color: var(--border-hi); background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0.2rem 0.55rem; border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; } .badge-cyan { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(42,143,196,0.32); } .badge-purple { background: var(--purple-soft); color: var(--purple); border-color: rgba(124,95,214,0.32); } .badge-green { background: var(--green-soft); color: var(--green); border-color: rgba(47,154,115,0.32); } .badge-orange { background: var(--orange-soft); color: var(--orange); border-color: rgba(201,119,43,0.32); } .badge-red { background: var(--red-soft); color: var(--red); border-color: rgba(200,62,43,0.32); } .badge-muted { background: #ffffff; color: var(--muted); border-color: var(--border); } /* Status dot animáció — folyamatban lévő munkához */ .dot-anim { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 0.35rem; animation: pulse-dot 1.4s var(--ease) infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } /* Input */ .input, .textarea, .select { width: 100%; padding: 0.7rem 0.85rem; background: #ffffff; border: 1px solid var(--border-strong); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-body); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--border-focus); background: #ffffff; box-shadow: 0 0 0 3px rgba(42,143,196,0.12); } .input::placeholder, .textarea::placeholder { color: var(--muted-2); } .textarea { min-height: 90px; resize: vertical; line-height: 1.5; } /* Modal alap (a meglévő modal markup-okkal kompatibilis) */ .modal-shell { background: var(--surface-modal); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); } /* ============================================================================ Empty state — közös segéd a "még nincs adat" felületre ============================================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-12) var(--sp-6); gap: var(--sp-3); color: var(--muted); border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--grad-deep); } .empty-state-icon { font-size: 2rem; opacity: 0.7; } .empty-state-title { font-size: var(--fs-h3); color: var(--text); font-weight: 600; } .empty-state-desc { max-width: 440px; line-height: 1.5; } /* ============================================================================ Skeleton loader — adatbetöltéshez ============================================================================ */ .skeleton { background: linear-gradient(90deg, rgba(44,36,24,0.04) 0%, rgba(44,36,24,0.10) 50%, rgba(44,36,24,0.04) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s var(--ease) infinite; border-radius: var(--r-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================ Utility-k ============================================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden; } .text-muted { color: var(--muted); } .text-soft { color: var(--text-soft); } .text-cyan { color: var(--cyan); } .text-purple { color: var(--purple); } .text-success { color: var(--c-success); } .text-danger { color: var(--c-danger); } /* ============================================================================ Reduced motion — kapcsoljuk ki az animációkat ha a user kéri ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }