/* ========================================================================== Kaliente Party – Dark Theme (Responsive, tuned for mobile) Add in : ========================================================================== */ /* Theme tokens */ :root{ --bg-1:#0e0b2a; /* deep indigo */ --bg-2:#101737; /* dark blue */ --panel:#14123a; /* card/base panels */ --ink:#f6f7ff; /* main text */ --muted:#b6b9ff; /* subtle text */ --accent:#7c3aed; /* violet */ --accent-2:#22d3ee; /* neon cyan */ --border:rgba(124,58,237,.35); --soft:rgba(34,211,238,.18); /* Bootstrap global nudge */ --bs-body-font-size: 1rem; --bs-body-line-height: 1.6; } /* Background */ html, body{ min-height:100%; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed; background-repeat: no-repeat; background-size: 100% 100%; } /* Prevent weird horizontal dragging from any stray overflow */ html, body { overflow-x: hidden; } /* Base typography */ html { font-size: clamp(16px, 1rem + 0.5vw, 17.5px); } body { line-height: 1.6; color: var(--ink); } /* Links */ a, .link-primary{ color:var(--accent-2); text-decoration:none; } a:hover{ color:#a5f3fc; text-shadow:0 0 6px rgba(34,211,238,.5); } /* Headings – responsive */ h1 { color:#fff; letter-spacing:.2px; font-size: clamp(1.7rem, 2vw + 1rem, 2.25rem); } h2 { color:#fff; letter-spacing:.2px; font-size: clamp(1.45rem, 1.6vw + 0.95rem, 1.9rem); } h3 { color:#fff; letter-spacing:.2px; font-size: clamp(1.3rem, 1vw + 0.95rem, 1.6rem); } h4,h5{ color:#fff; letter-spacing:.2px; } .question-title { font-size: clamp(1.3rem, 1vw + 0.95rem, 1.6rem); font-weight: 800; color:#fff; } /* Markdown blocks */ .md { line-height: 1.6; } .md p { margin-bottom: .75rem; } /* Buttons */ .btn{ border:0; transition:.2s transform ease, .25s box-shadow ease, .25s filter ease; font-size: clamp(0.98rem, 0.35vw + 0.9rem, 1.08rem); } .btn:active{ transform:translateY(1px) scale(.99); } .btn-primary, .btn-kyma{ background: linear-gradient(135deg, var(--accent), #5b21b6); color:white; box-shadow:0 0 0 0 rgba(124,58,237,0); padding: 0.8rem 0.95rem; border-radius: 0.9rem; } .btn-primary:hover, .btn-kyma:hover{ filter:saturate(115%); box-shadow:0 0 18px rgba(124,58,237,.45), inset 0 0 6px rgba(255,255,255,.06); } /* Dedicated style for the 2x2 vote buttons */ .vote-btn{ width: 100%; min-height: 92px; /* slightly reduced default */ font-weight: 700; font-size: clamp(1.5rem, 1vw + 1.15rem, 1.9rem); } /* Cards & panels */ .card{ background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset; color:var(--ink); } .card-header{ background:linear-gradient(180deg, rgba(124,58,237,.08), rgba(124,58,237,.02)); border-bottom:1px solid var(--border); color:#fff; } /* Tables */ .table{ --tbl-bg: rgba(255,255,255,.03); --tbl-bg-alt: rgba(255,255,255,.055); --tbl-hover: rgba(34,211,238,.14); --tbl-border: rgba(255,255,255,.12); --tbl-head: rgba(124,58,237,.22); color: var(--ink); background-color: var(--panel); border-color: var(--tbl-border); } .table > :not(caption) > * > *{ background-color: transparent !important; color: var(--ink); border-color: var(--tbl-border); } /* List group */ .list-group-item{ background:rgba(255,255,255,.03); color:var(--ink); border-color:rgba(255,255,255,.08); } /* Forms */ .form-control, .form-select{ background:#10122a; color:var(--ink); border:1px solid rgba(255,255,255,.12); } .form-control::placeholder{ color:rgba(255,255,255,.45); } .form-control:focus, .form-select:focus{ background:#0f1330; color:#fff; border-color:var(--accent); box-shadow:0 0 0 .2rem var(--soft), 0 0 12px rgba(124,58,237,.35); } .form-text{ color:var(--muted); } /* Color picker sizing */ input[type="color"].form-control-color{ width: 3rem; height: 2.25rem; padding: .25rem; background:#10122a; border:1px solid rgba(255,255,255,.12); } /* Alerts */ .alert{ border-radius:14px; border:1px solid var(--border); color:#fff; } .alert-danger{ background:linear-gradient(180deg, rgba(239,68,68,.25), rgba(0,0,0,.1)); } .alert-success{ background:linear-gradient(180deg, rgba(34,197,94,.25), rgba(0,0,0,.1)); } /* Badges */ .badge{ background: linear-gradient(135deg, var(--accent-2), #60a5fa); color:#001017; border:1px solid rgba(255,255,255,.25); } /* Hover icon glow */ .btn:hover .bi, a:hover .bi{ filter:drop-shadow(0 0 6px rgba(34,211,238,.55)); } /* Utilities */ .text-muted{ color:var(--muted)!important; } /* Container tweaks */ .container-wide{ max-width:1150px; padding-inline: 0.9rem; } @media (min-width: 768px) { .container-wide { padding-inline: 1.1rem; } } /* Monospace message log */ #message-log{ font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; white-space:pre-wrap; font-size: 0.95rem; line-height: 1.5; height: 40vh; overflow-y:auto; } /* Progress */ .progress-compact{ height: 14px; background: rgba(255,255,255,.08); border-radius: 999px; border: 1px solid var(--border); box-shadow: inset 0 0 8px rgba(0,0,0,.35); overflow: hidden; } .progress-compact .progress-bar{ background: linear-gradient(135deg, var(--accent-2), #60a5fa); box-shadow: 0 0 16px rgba(34,211,238,.35); transition: width .1s linear; } /* ========================================================================== Responsive fixes and tuned scaling ========================================================================== */ /* Phones (xs–sm) */ @media (max-width: 575.98px) { /* Softer phone scaling */ html { font-size: clamp(16.2px, 3.6vw, 18px); } :root{ --bs-body-font-size: 1.03rem; } /* OVERRIDE inline min-width:500px on your .row to prevent horizontal overflow */ .container-wide .row { min-width: 0 !important; width: 100% !important; } .card-body { padding: 0.9rem 0.9rem; } .vote-btn{ min-height: 104px; /* still thumb-friendly, less tall */ font-size: clamp(1.6rem, 4vw, 1.95rem); } #message-log { height: 48vh; } /* Safety: any element accidentally wider than viewport will wrap/contain */ img, svg, canvas, video { max-width: 100%; height: auto; } } /* Small tablets (sm–md) */ @media (min-width: 576px) and (max-width: 767.98px) { html { font-size: clamp(16px, 1.05rem + 0.3vw, 17.6px); } /* Also neutralize that inline min-width:500px here */ .container-wide .row { min-width: 0 !important; width: 100% !important; } .vote-btn { min-height: 98px; font-size: clamp(1.55rem, 2.2vw, 1.9rem); } #message-log { height: 46vh; } } /* Larger tablets and up – defaults & clamp handle scaling */