/* travtu — Boarding Pass theme */ :root { --paper: #f4efe6; --ink: #23304a; --accent: #e0563f; --muted: #8a7f6a; --card: #ffffff; --line: #cfc6b4; } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Space Mono", ui-monospace, Menlo, Consolas, monospace; line-height: 1.5; transition: background 0.6s ease; } /* Vibe gradients — set on when a destination is drawn (keyed to packType) */ body.bg-beach { background: linear-gradient(160deg, #ffd9a0, #ff9e7a 55%, #f7b2c4); } body.bg-mountains { background: linear-gradient(160deg, #b7d3ab, #6f9e8a 55%, #d8dcb4); } body.bg-city { background: linear-gradient(160deg, #d2d7e3, #9aa7c4 55%, #e7d6c9); } body.bg-cold { background: linear-gradient(160deg, #d6ecf7, #9bc4e2 55%, #e2edf6); } .wrap { max-width: 720px; margin: 0 auto; padding: 28px 18px 64px; } /* nav */ .nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .logo { font-size: 22px; font-weight: 700; letter-spacing: 3px; text-decoration: none; color: var(--ink); } .tabs { display: flex; gap: 8px; } .tab { padding: 8px 18px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; } .tab[aria-current="page"] { background: var(--ink); color: var(--paper); } /* page heading */ .page-title { font-size: 18px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 14px; } /* ticket */ .ticket { background: var(--card); border-radius: 14px; box-shadow: 0 6px 18px rgba(35, 48, 74, .15); overflow: hidden; margin-bottom: 24px; } .strip { background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; } .ticket-body { padding: 18px; } .ticket-body h2 { margin: 8px 0 4px; font-size: 18px; letter-spacing: 1px; } .ticket-body > p { margin: 4px 0; font-size: 14px; } .perf { border-top: 2px dashed var(--line); margin: 0 12px; } .stamp { display: inline-block; border: 3px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 5px 14px; font-weight: 700; font-size: 14px; letter-spacing: 2px; transform: rotate(-6deg); } .stamp.small { font-size: 11px; padding: 3px 10px; border-width: 2px; transform: rotate(-3deg); } /* chips */ .label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 7px 16px; border-radius: 999px; border: 2px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* buttons */ .btn { display: inline-block; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 12px 26px; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: 1px; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { color: #fff; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } /* landing */ .hero { text-align: center; padding: 22px 0 28px; } .hero h1 { font-size: 42px; letter-spacing: 5px; margin: 0; } .hero p { color: var(--muted); margin: 6px 0 0; } .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .cards { grid-template-columns: 1fr; } } .card-link { text-decoration: none; color: inherit; display: block; } .card-link:hover .ticket { box-shadow: 0 10px 24px rgba(35, 48, 74, .25); } .big-emoji { font-size: 34px; } /* checklist */ .item { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .item input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; } .item.done label { text-decoration: line-through; opacity: .55; } /* wander result */ .route { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0 2px; flex-wrap: wrap; } .route .big { font-size: clamp(22px, 6vw, 32px); font-weight: 700; } .route .plane { color: var(--accent); font-size: 20px; } .sub { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; flex-wrap: wrap; } .stamps { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; } .reason { margin: 12px 0 0; font-size: 14.5px; } .season { margin: 14px 0 0; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); } .season b { color: var(--ink); } .season-off { display: inline-block; margin-left: 8px; background: #fbe6c8; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 2px 10px; font-size: 11px; letter-spacing: 0.5px; text-transform: none; } .relaxed { margin: 8px 0 0; font-size: 12.5px; color: var(--accent); } /* print (pack page) */ @media print { .nav, .btn, .btn-row, .chips, .label.controls, .no-print { display: none !important; } body { background: #fff; } .ticket { box-shadow: none; border: 1px solid #000; } .strip { background: #fff; color: #000; border-bottom: 1px solid #000; } }