/* TiketArena — Design System Foundation Load FIRST on every page, before app.css / page-specific CSS. Spec: README.md Design System · calm editorial · one orange accent. Fonts loaded in layout — no @import here. */ :root { --ta-orange: #E8451A; --ta-orange-dark: #C23510; --ta-orange-tint: rgba(232, 69, 26, 0.08); --ta-orange-border: rgba(232, 69, 26, 0.35); --ta-dark: #1A1A2E; --ta-text: #1A1A2E; --ta-muted: #6B7280; --ta-faint: #9CA3AF; --ta-bg: #FAF8F5; --ta-card: #FFFFFF; --ta-line: #ECE9E4; --ta-cream: #F5F0EB; --ta-success: #22A06B; --ta-danger: #D64545; --ta-warning: #F39C12; --ta-display: 'Syne', system-ui, -apple-system, sans-serif; --ta-body: 'DM Sans', system-ui, -apple-system, sans-serif; --ta-s1: 8px; --ta-s2: 16px; --ta-s3: 24px; --ta-s4: 32px; --ta-s5: 48px; --ta-r-sm: 8px; --ta-r-md: 12px; --ta-r-lg: 18px; --ta-r-pill: 999px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--ta-body); font-size: 16px; line-height: 1.55; color: var(--ta-text); background: var(--ta-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--ta-display); line-height: 1.1; letter-spacing: -0.02em; margin: 0; } /* ── Layout ── */ .ta-wrap { max-width: 1060px; margin: 0 auto; padding: 0 18px; } .ta-wrap--wide { max-width: 1280px; } .ta-rule { border: 0; height: 0.5px; background: var(--ta-line); margin: var(--ta-s3) 0; } .ta-section { margin-top: var(--ta-s3); } .ta-muted { color: var(--ta-muted); } .ta-center { text-align: center; } /* ── Chips ── */ .ta-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 5px 11px; border-radius: var(--ta-r-pill); background: var(--ta-card); border: 0.5px solid var(--ta-line); color: var(--ta-muted); } .ta-chip--accent { color: var(--ta-orange); background: var(--ta-orange-tint); border-color: transparent; } .ta-chip--dark { background: var(--ta-dark); color: #fff; border-color: transparent; } /* ── Info row ── */ .ta-info { display: flex; align-items: flex-start; gap: 13px; margin-top: 18px; text-decoration: none; color: inherit; } .ta-info__chip { width: 44px; height: 44px; border-radius: 50%; background: var(--ta-card); border: 0.5px solid var(--ta-line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ta-orange); } .ta-info__p { font-size: 15px; font-weight: 500; } .ta-info__s { font-size: 13px; color: var(--ta-muted); line-height: 1.45; } .ta-info__link { display: inline-block; margin-top: 4px; font-size: 13px; color: var(--ta-faint); text-decoration: underline; cursor: pointer; } .ta-info__link:hover { color: var(--ta-text); } /* ── Card / surface ── */ .ta-card { background: var(--ta-card); border: 0.5px solid var(--ta-line); border-radius: var(--ta-r-lg); padding: 20px; } .ta-surface { background: var(--ta-card); border: 0.5px solid var(--ta-line); border-radius: var(--ta-r-lg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } /* ── Buttons ── */ .ta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ta-display); font-weight: 700; font-size: 15px; border: 1.5px solid transparent; border-radius: var(--ta-r-pill); padding: 0 24px; height: 48px; text-decoration: none; transition: background 0.15s, transform 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .ta-btn--primary { background: var(--ta-orange); color: #fff; border-color: var(--ta-orange); } .ta-btn--primary:hover { background: var(--ta-orange-dark); border-color: var(--ta-orange-dark); transform: scale(1.01); } .ta-btn--ghost { background: transparent; color: var(--ta-orange); border-color: var(--ta-orange-border); } .ta-btn--ghost:hover { background: var(--ta-orange-tint); } .ta-btn--dark { background: var(--ta-dark); color: #fff; border-color: var(--ta-dark); } .ta-btn--block { width: 100%; } .ta-btn--sm { height: 40px; font-size: 13px; padding: 0 18px; } /* ── Stepper ── */ .ta-stepper { display: flex; align-items: center; gap: 15px; flex-shrink: 0; } .ta-stepper button { width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid var(--ta-line); background: var(--ta-card); font-size: 16px; color: var(--ta-orange); display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; } .ta-stepper button:hover:not(:disabled) { background: var(--ta-orange-tint); } .ta-stepper button:disabled { color: var(--ta-faint); cursor: default; } .ta-stepper .ta-n { font-size: 15px; font-weight: 600; min-width: 16px; text-align: center; } /* ── Forms (underline style per README) ── */ .ta-field { margin-bottom: var(--ta-s3); } .ta-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ta-text); margin-bottom: 6px; } .ta-input { width: 100%; height: 52px; padding: 0 0 12px; font-family: var(--ta-body); font-size: 16px; color: var(--ta-text); background: transparent; border: 0; border-bottom: 2px solid var(--ta-line); border-radius: 0; outline: none; transition: border-color 0.15s; } .ta-input:focus { border-bottom-color: var(--ta-orange); } .ta-input::placeholder { color: var(--ta-faint); } /* ── Page hero (dark strip) ── */ .ta-hero { background: var(--ta-dark); margin-top: -4rem; padding-top: 4rem; padding-bottom: 5rem; position: relative; overflow: hidden; } .ta-hero__inner { max-width: 1060px; margin: 0 auto; padding: 2.5rem 18px; } .ta-hero__title { font-family: var(--ta-display); font-weight: 800; color: #fff; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; } .ta-hero__subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; max-width: 32rem; margin-top: 1rem; line-height: 1.6; } .ta-curve { background: var(--ta-cream); border-radius: 24px 24px 0 0; margin-top: -24px; position: relative; z-index: 10; } .ta-curve__inner { max-width: 1060px; margin: 0 auto; padding: 48px 18px 80px; } /* ── Accessibility ── */ :focus-visible { outline: 2px solid var(--ta-orange); outline-offset: 2px; } .ta-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto; } }