/* JAT Excellencia 2026 — shared styles. Palette follows the printed invitation: deep emerald, gold leaf, warm cream. */ :root { --green-900: #04201a; --green-800: #072a22; --green-700: #0d382d; --green-600: #14483a; --green-line: rgba(212, 175, 95, 0.22); --gold: #d4af5f; --gold-bright: #eccd88; --gold-deep: #a5813a; --cream: #f4eddc; --muted: #9fb3a9; --good: #63c295; --bad: #e08a72; --warn: #e5b95f; --radius: 14px; --shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } /* The base colour lives on so a page taller than the viewport is never painted white below the fold. background-attachment: fixed is deliberately not used — iOS Safari mishandles it while scrolling. */ html { background: var(--green-900); } html, body { min-height: 100%; } body { margin: 0; font-family: "Segoe UI", -apple-system, Inter, system-ui, sans-serif; color: var(--cream); background: radial-gradient(1100px 620px at 12% -8%, rgba(212, 175, 95, 0.13), transparent 62%) no-repeat, radial-gradient(900px 520px at 105% 4%, rgba(46, 107, 96, 0.35), transparent 58%) no-repeat, linear-gradient(170deg, var(--green-800), var(--green-900) 60%) no-repeat; background-color: var(--green-900); -webkit-text-size-adjust: 100%; } .wrap { max-width: 1120px; margin: 0 auto; padding: 22px 16px 64px; } .wrap.narrow { max-width: 560px; } /* --- masthead --- */ .masthead { text-align: center; padding: 10px 0 26px; } .masthead .mark { font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 7vw, 46px); font-weight: 700; letter-spacing: 0.5px; line-height: 1.05; margin: 0; background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .masthead .sub { margin: 8px 0 0; font-size: 13px; letter-spacing: 3.4px; text-transform: uppercase; color: var(--muted); } .rule { height: 1px; margin: 20px auto; max-width: 260px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; } /* --- surfaces --- */ .card { background: linear-gradient(160deg, #0e362c, #0a2a22); border: 1px solid var(--green-line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(2px); } .card + .card { margin-top: 16px; } .card h2 { font-size: 15px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; font-weight: 700; } .card h3 { font-size: 15px; margin: 0 0 8px; color: var(--cream); } .muted { color: var(--muted); } .small { font-size: 12.5px; } .center { text-align: center; } .stack > * + * { margin-top: 12px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row.between { justify-content: space-between; } .grow { flex: 1 1 auto; min-width: 0; } /* --- type --- */ h1.page { font-size: clamp(22px, 4.5vw, 30px); margin: 0 0 6px; font-weight: 700; } p.lede { color: var(--muted); line-height: 1.6; margin: 0 0 18px; font-size: 14.5px; } .big-name { font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 6vw, 34px); color: var(--gold-bright); margin: 4px 0 2px; line-height: 1.2; } .table-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--gold); border-radius: 12px; padding: 12px 26px; margin: 14px 0 4px; background: rgba(212, 175, 95, 0.09); } .table-badge .label { font-size: 11px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--muted); } .table-badge .value { font-size: 40px; font-weight: 700; color: var(--gold-bright); line-height: 1.05; } /* --- buttons + fields --- */ button, .btn { font: inherit; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--green-line); background: rgba(255, 255, 255, 0.06); color: var(--cream); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } button:hover:not(:disabled), .btn:hover { background: rgba(255, 255, 255, 0.11); } button:disabled { opacity: 0.45; cursor: not-allowed; } button.primary, .btn.primary { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-color: var(--gold); color: #1a1206; } button.primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); } button.ghost { background: transparent; } button.danger { border-color: rgba(224, 138, 114, 0.5); color: var(--bad); } button.block { width: 100%; } button.sm, .btn.sm { padding: 7px 12px; font-size: 12.5px; border-radius: 8px; } input, select, textarea { font: inherit; font-size: 15px; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--green-line); background: rgba(0, 0, 0, 0.25); color: var(--cream); } input:focus, select, textarea:focus { outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--gold); } select option { background: var(--green-800); color: var(--cream); } label.field { display: block; } label.field span { display: block; font-size: 11.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } textarea { min-height: 130px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; } /* --- notices --- */ .notice { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--green-line); background: rgba(255, 255, 255, 0.05); } .notice.good { border-color: rgba(99, 194, 149, 0.45); background: rgba(99, 194, 149, 0.12); } .notice.bad { border-color: rgba(224, 138, 114, 0.5); background: rgba(224, 138, 114, 0.12); } .notice.warn { border-color: rgba(229, 185, 95, 0.45); background: rgba(229, 185, 95, 0.1); } .notice:empty { display: none; } .pill { display: inline-block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--green-line); color: var(--muted); } .pill.live { border-color: var(--good); color: var(--good); } .pill.gold { border-color: var(--gold); color: var(--gold); } .pill.off { opacity: 0.6; } /* --- progress --- */ .progress { height: 7px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); overflow: hidden; } .progress > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); transition: width 0.4s ease; } .stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .stats b { color: var(--cream); font-size: 15px; display: block; font-weight: 700; } /* --- crossword --- */ .play { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 20px; align-items: start; } /* Grid items default to min-width:auto, so the wide crossword would force the column — and the whole page — open sideways instead of scrolling inside its own container. */ .play > * { min-width: 0; } @media (max-width: 900px) { .play { grid-template-columns: minmax(0, 1fr); } } .grid-scroll { overflow: auto; max-width: 100%; padding-bottom: 6px; /* Snappier sideways panning on a phone the whole table is leaning over. */ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .xgrid { display: grid; gap: 2px; width: max-content; margin: 0 auto; } .sq { position: relative; width: var(--sq, 30px); height: var(--sq, 30px); } .sq.blank { background: transparent; } .sq.open { background: var(--cream); border-radius: 3px; } .sq input { width: 100%; height: 100%; border: none; background: transparent; text-align: center; text-transform: uppercase; font-weight: 700; font-size: calc(var(--sq, 30px) * 0.55); color: #10231d; padding: 0; border-radius: 3px; caret-color: var(--gold-deep); } .sq input:focus { outline: 2px solid var(--gold-deep); outline-offset: -2px; } .sq .n { position: absolute; top: 1px; left: 2px; font-size: calc(var(--sq, 30px) * 0.3); font-weight: 700; color: #5d5544; line-height: 1; pointer-events: none; } .sq.hl.open { background: #fdf0cd; } .sq.ok.open { background: #cbe8d5; } .sq.no.open { background: #f2d3cb; } .sq.hint.open { background: #f8e0a8; } .xgrid.readonly input { pointer-events: none; } .clues { max-height: 62vh; overflow-y: auto; } .clues h3 { font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); margin: 16px 0 8px; } .clues h3:first-child { margin-top: 0; } .clues ol { list-style: none; margin: 0; padding: 0; } .clues li { display: flex; gap: 9px; padding: 7px 9px; border-radius: 8px; font-size: 13.2px; line-height: 1.45; cursor: pointer; color: #ddd6c6; } .clues li:hover { background: rgba(255, 255, 255, 0.05); } .clues li.sel { background: rgba(212, 175, 95, 0.16); color: #fff; } .clues li.done { opacity: 0.42; text-decoration: line-through; } .clues li b { color: var(--gold); min-width: 22px; flex-shrink: 0; } /* --- tables / leaderboard --- */ table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data th { text-align: left; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--green-line); white-space: nowrap; } table.data td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; } table.data tr:last-child td { border-bottom: none; } table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } table.data tr.me { background: rgba(212, 175, 95, 0.1); } table.data tr.winner td { background: rgba(212, 175, 95, 0.16); } .rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--green-line); font-weight: 700; font-size: 13px; } .rank.r1 { border-color: var(--gold); color: var(--gold-bright); background: rgba(212, 175, 95, 0.15); } .rank.r2, .rank.r3 { border-color: rgba(212, 175, 95, 0.5); color: var(--gold); } .bar { height: 6px; border-radius: 99px; background: rgba(0, 0, 0, 0.3); overflow: hidden; min-width: 90px; } .bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); } /* --- footer --- */ footer.fine { margin-top: 26px; text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.7; } /* --- confetti --- */ .confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; } .confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(110vh) rotate(560deg); opacity: 0.15; } } .hidden { display: none !important; }