/* ========================================================================== CAT CTF 26 — theme layer for CTFd 3.8.7 (core theme, Bootstrap 5) Served from /branding/theme.css, linked from Configs.theme_header, which renders last in — so these overrides win the cascade without forking a single template. Nothing here touches markup or JS. Identity: CAT Reloaded. Crimson #B92026, white concentric-@ mark. Dark-first, chosen from the use scene: a 24-hour CTF, mostly played overnight, by people already sitting in dark terminals. ========================================================================== */ /* ---- tokens -------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { --cat-ground: #0D0A0B; /* near-black, biased red — chosen, not default grey */ --cat-surface: #161012; --cat-surface-2: #1E1719; --cat-surface-3: #271E21; --cat-line: #2C2226; --cat-line-2: #3B2F33; --cat-ink: #F6F1F2; --cat-ink-2: #B7AAAE; --cat-ink-3: #857779; --cat-brand: #B92026; /* the club's exact red — solid fills only */ --cat-brand-lift:#EF4E55; /* text/links: #B92026 on near-black is ~3.4:1 */ --cat-brand-deep:#8E151A; --cat-brand-wash:rgba(185, 32, 38, .14); --cat-ok: #5FCB86; --cat-ok-wash: rgba(95, 203, 134, .13); --cat-warn: #E3A94E; --cat-radius: 12px; --cat-radius-sm: 8px; --cat-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8); --cat-shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 28px 60px -22px rgba(0,0,0,.85); --cat-display: Archivo, ui-sans-serif, system-ui, sans-serif; --cat-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --cat-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } [data-bs-theme="light"] { --cat-ground: #FAF7F7; --cat-surface: #FFFFFF; --cat-surface-2: #F3EFF0; --cat-surface-3: #EAE4E6; --cat-line: #E2DBDD; --cat-line-2: #CFC5C8; --cat-ink: #171114; --cat-ink-2: #574D50; --cat-ink-3: #837578; --cat-brand: #B92026; --cat-brand-lift:#9A171D; /* darker on light ground for contrast */ --cat-brand-deep:#7C1116; --cat-brand-wash:rgba(185, 32, 38, .08); --cat-ok: #1F7A45; --cat-ok-wash: rgba(31, 122, 69, .10); --cat-warn: #8A6008; --cat-shadow: 0 1px 2px rgba(23,17,20,.06), 0 12px 28px -16px rgba(23,17,20,.22); --cat-shadow-lg: 0 2px 6px rgba(23,17,20,.08), 0 28px 56px -24px rgba(23,17,20,.28); } /* Map Bootstrap's own token surface onto ours so untouched components inherit. */ :root, [data-bs-theme="dark"], [data-bs-theme="light"] { --bs-body-bg: var(--cat-ground); --bs-body-color: var(--cat-ink); --bs-body-font-family: var(--cat-body); --bs-emphasis-color: var(--cat-ink); --bs-secondary-color: var(--cat-ink-2); --bs-tertiary-color: var(--cat-ink-3); --bs-border-color: var(--cat-line); --bs-border-radius: var(--cat-radius); --bs-border-radius-sm: var(--cat-radius-sm); --bs-link-color: var(--cat-brand-lift); --bs-link-hover-color: var(--cat-brand-lift); --bs-primary: var(--cat-brand); --bs-code-color: var(--cat-brand-lift); --bs-font-monospace: var(--cat-mono); } /* ---- base ---------------------------------------------------------------- */ body { background: var(--cat-ground); color: var(--cat-ink); font-family: var(--cat-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .navbar-brand { font-family: var(--cat-display); font-weight: 700; letter-spacing: -.022em; color: var(--cat-ink); text-wrap: balance; } h1 { font-weight: 800; letter-spacing: -.032em; } p { max-width: 72ch; } a { color: var(--cat-brand-lift); text-underline-offset: .18em; text-decoration-thickness: 1px; } a:hover { color: var(--cat-brand-lift); text-decoration: underline; } code, kbd, pre, samp, .font-monospace { font-family: var(--cat-mono); } code { color: var(--cat-brand-lift); background: var(--cat-brand-wash); padding: .1em .35em; border-radius: 5px; } /* Numerals that sit in columns should line up. */ .table td, .table th, .badge, .challenge-button, #score, .score { font-variant-numeric: tabular-nums; } /* ---- browser surfaces ---------------------------------------------------- */ /* The parts nobody draws still carry the design. */ ::selection { background: var(--cat-brand); color: #fff; } html { scrollbar-color: var(--cat-line-2) transparent; scrollbar-width: thin; caret-color: var(--cat-brand-lift); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--cat-line-2); border-radius: 99px; border: 3px solid var(--cat-ground); } ::-webkit-scrollbar-thumb:hover { background: var(--cat-brand-deep); } :focus-visible { outline: 2px solid var(--cat-brand-lift); outline-offset: 2px; border-radius: 4px; } /* ---- navbar -------------------------------------------------------------- */ /* CTFd's default paints the whole bar with theme_color. A full-bleed crimson slab shouts over every page; the brand reads better as the accent. */ .navbar.bg-dark, .navbar { background: color-mix(in srgb, var(--cat-ground) 82%, transparent) !important; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--cat-line); padding-block: .55rem; } .navbar-brand { font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; color: var(--cat-ink) !important; display: inline-flex; align-items: center; gap: .6rem; } /* The club mark, drawn from the real asset, ahead of the wordmark. */ .navbar-brand::before { content: ""; inline-size: 1.55rem; block-size: 1.55rem; flex: none; background: var(--cat-brand); -webkit-mask: url("/branding/mark-white.png") center / contain no-repeat; mask: url("/branding/mark-white.png") center / contain no-repeat; } [data-bs-theme="dark"] .navbar-brand::before { background: #fff; } .navbar .nav-link { color: var(--cat-ink-2) !important; font-weight: 500; border-radius: var(--cat-radius-sm); padding-inline: .7rem !important; position: relative; transition: color .16s ease, background-color .16s ease; } .navbar .nav-link:hover { color: var(--cat-ink) !important; background: var(--cat-surface-2); } .navbar .nav-link.active { color: var(--cat-ink) !important; } .navbar .nav-link.active::after { content: ""; position: absolute; inset-inline: .7rem; bottom: -.55rem; block-size: 2px; background: var(--cat-brand); border-radius: 2px 2px 0 0; } /* ---- page header (CTFd calls it jumbotron) ------------------------------- */ .jumbotron { background: var(--cat-surface) !important; border-bottom: 1px solid var(--cat-line); padding-block: clamp(2.4rem, 7vw, 4rem); margin-bottom: 2rem; position: relative; overflow: hidden; isolation: isolate; } /* The boldness goes here and nowhere else: the club's concentric mark, oversized and nearly submerged, bleeding off the trailing edge. */ .jumbotron::after { content: ""; position: absolute; z-index: -1; inset-block: -60%; inset-inline-end: -6%; aspect-ratio: 635 / 720; background: var(--cat-brand); -webkit-mask: url("/branding/mark-white.png") center / contain no-repeat; mask: url("/branding/mark-white.png") center / contain no-repeat; opacity: .10; pointer-events: none; } [data-bs-theme="light"] .jumbotron::after { opacity: .07; } .jumbotron h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.04; margin-bottom: .25rem; } /* ---- surfaces ------------------------------------------------------------ */ .card, .modal-content, .list-group-item { background: var(--cat-surface); border: 1px solid var(--cat-line); border-radius: var(--cat-radius); color: var(--cat-ink); } .card { box-shadow: var(--cat-shadow); } .modal-content { box-shadow: var(--cat-shadow-lg); } .modal-header, .modal-footer { border-color: var(--cat-line); } .modal-backdrop.show { opacity: .72; } hr { border-color: var(--cat-line); opacity: 1; } /* ---- buttons ------------------------------------------------------------- */ .btn { font-family: var(--cat-body); font-weight: 600; border-radius: var(--cat-radius-sm); padding: .5rem 1.05rem; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--cat-brand); border-color: var(--cat-brand); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--cat-brand-deep); border-color: var(--cat-brand-deep); color: #fff; } .btn-primary:disabled, .btn-primary.disabled { background: var(--cat-brand-deep); border-color: transparent; opacity: .45; } .btn-secondary, .btn-dark { background: var(--cat-surface-2); border-color: var(--cat-line); color: var(--cat-ink); } .btn-secondary:hover, .btn-dark:hover { background: var(--cat-surface-3); border-color: var(--cat-line-2); color: var(--cat-ink); } .btn-outline-secondary { border-color: var(--cat-line-2); color: var(--cat-ink-2); } .btn-outline-secondary:hover { background: var(--cat-surface-2); border-color: var(--cat-line-2); color: var(--cat-ink); } /* ---- forms --------------------------------------------------------------- */ .form-control, .form-select, .input-group-text { background: var(--cat-surface-2); border: 1px solid var(--cat-line-2); border-radius: var(--cat-radius-sm); color: var(--cat-ink); padding: .58rem .8rem; } .form-control::placeholder { color: var(--cat-ink-3); opacity: 1; } .form-control:focus, .form-select:focus { background: var(--cat-surface-2); border-color: var(--cat-brand); color: var(--cat-ink); box-shadow: 0 0 0 3px var(--cat-brand-wash); } .form-label { font-weight: 600; color: var(--cat-ink-2); font-size: .875rem; letter-spacing: .01em; } .form-check-input:checked { background-color: var(--cat-brand); border-color: var(--cat-brand); } .form-check-input:focus { border-color: var(--cat-brand); box-shadow: 0 0 0 3px var(--cat-brand-wash); } /* ---- challenge board ----------------------------------------------------- */ .category-header h3, .category-header { font-family: var(--cat-display); font-weight: 700; letter-spacing: -.015em; color: var(--cat-ink); } .challenge-button { background: var(--cat-surface) !important; border: 1px solid var(--cat-line) !important; border-radius: var(--cat-radius) !important; color: var(--cat-ink) !important; padding: 1.05rem .9rem !important; box-shadow: var(--cat-shadow); transition: border-color .16s ease, transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease, background-color .16s ease; } .challenge-button:hover { background: var(--cat-surface-2) !important; border-color: var(--cat-brand) !important; transform: translateY(-3px); box-shadow: var(--cat-shadow-lg); } .challenge-button p:last-child { /* the point value */ font-family: var(--cat-mono); font-variant-numeric: tabular-nums; color: var(--cat-ink-2); font-size: .9rem; } /* Solved reads as a state change, not a colour swap: the ring closes. */ .challenge-button.challenge-solved { border-color: color-mix(in srgb, var(--cat-ok) 55%, transparent) !important; background: linear-gradient(180deg, var(--cat-ok-wash), transparent 60%), var(--cat-surface) !important; } .challenge-button.challenge-solved::after { content: "✓"; position: absolute; inset-block-start: .5rem; inset-inline-end: .65rem; color: var(--cat-ok); font-weight: 700; font-size: .95rem; line-height: 1; } .challenge-button { position: relative; } /* ---- tables / scoreboard ------------------------------------------------- */ .table { --bs-table-bg: transparent; color: var(--cat-ink); border-color: var(--cat-line); } .table > :not(caption) > * > * { background: transparent; border-bottom-color: var(--cat-line); padding: .72rem .8rem; } .table thead th { font-family: var(--cat-body); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cat-ink-3); border-bottom: 1px solid var(--cat-line-2) !important; } .table tbody tr { transition: background-color .12s ease; } .table tbody tr:hover > * { background: var(--cat-surface-2); } /* Top three carry the brand, quietly. */ .table tbody tr:nth-child(-n+3) td:first-child { color: var(--cat-brand-lift); font-weight: 700; } /* ---- badges, alerts ------------------------------------------------------ */ .badge { font-weight: 600; letter-spacing: .01em; border-radius: 99px; padding: .34em .7em; } .badge.bg-primary { background: var(--cat-brand) !important; } .badge.bg-secondary { background: var(--cat-surface-3) !important; color: var(--cat-ink-2) !important; } .alert { border-radius: var(--cat-radius); border: 1px solid var(--cat-line); background: var(--cat-surface-2); color: var(--cat-ink); } .alert-danger { border-color: color-mix(in srgb, var(--cat-brand) 45%, transparent); background: var(--cat-brand-wash); color: var(--cat-ink); } .alert-success { border-color: color-mix(in srgb, var(--cat-ok) 45%, transparent); background: var(--cat-ok-wash); color: var(--cat-ink); } /* ---- footer -------------------------------------------------------------- */ footer, .footer { border-top: 1px solid var(--cat-line); color: var(--cat-ink-3); background: transparent; } footer a, .footer a { color: var(--cat-ink-2); } /* ---- one authored motion moment ------------------------------------------ */ /* Content settles in on load. Exponential ease-out from an already-visible default, so a failed animation never leaves the page blank. */ @keyframes cat-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .challenge-inner, main .card, .jumbotron > .container { animation: cat-rise .5s cubic-bezier(.16, 1, .3, 1) both; } .challenges-row > *:nth-child(1) .challenge-inner { animation-delay: .02s; } .challenges-row > *:nth-child(2) .challenge-inner { animation-delay: .06s; } .challenges-row > *:nth-child(3) .challenge-inner { animation-delay: .10s; } .challenges-row > *:nth-child(4) .challenge-inner { animation-delay: .14s; } .challenges-row > *:nth-child(n+5) .challenge-inner { animation-delay: .18s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .challenge-button:hover { transform: none; } } /* ========================================================================== Home page composition ========================================================================== */ .cat-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--cat-line); border-radius: 18px; background: var(--cat-surface); padding: clamp(2.2rem, 6vw, 4.2rem) clamp(1.4rem, 5vw, 3.4rem); margin-block: clamp(1.5rem, 4vw, 2.75rem); box-shadow: var(--cat-shadow-lg); } /* The club mark, oversized and nearly submerged, bleeding off the trailing edge. This is where the design spends its boldness. */ .cat-hero::after { content: ""; position: absolute; z-index: -1; inset-block: -45%; inset-inline-end: -10%; aspect-ratio: 635 / 720; background: var(--cat-brand); -webkit-mask: url("/branding/mark-white.png") center / contain no-repeat; mask: url("/branding/mark-white.png") center / contain no-repeat; opacity: .12; pointer-events: none; } [data-bs-theme="light"] .cat-hero::after { opacity: .08; } .cat-hero h1 { font-size: clamp(2.4rem, 7.5vw, 4.2rem); line-height: .98; letter-spacing: -.038em; margin: 0 0 .8rem; } .cat-hero__lede { font-size: clamp(1.02rem, 1.9vw, 1.2rem); color: var(--cat-ink-2); max-width: 44ch; margin: 0 0 1.8rem; } .cat-facts { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin: 0 0 2rem; padding: 0; list-style: none; } .cat-facts li { font-family: var(--cat-mono); font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--cat-ink-2); background: var(--cat-surface-2); border: 1px solid var(--cat-line); border-radius: 7px; padding: .34rem .68rem; white-space: nowrap; } .cat-cta { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } .cat-cta .btn { padding: .68rem 1.5rem; font-size: 1rem; } .cat-section { margin-block: clamp(2.2rem, 5vw, 3.4rem); } .cat-section > h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: 1rem; } .cat-cats { display: grid; gap: .55rem; padding: 0; list-style: none; margin: 0; } @media (min-width: 48rem) { .cat-cats { grid-template-columns: 1fr 1fr; gap: .55rem .9rem; } } .cat-cats li { display: flex; gap: .7rem; align-items: baseline; padding: .7rem .9rem; border: 1px solid var(--cat-line); border-radius: var(--cat-radius-sm); background: var(--cat-surface); color: var(--cat-ink-2); font-size: .95rem; /* Flex items default to min-width:auto and refuse to shrink below their min-content width, which overflowed the viewport at 390px. */ min-width: 0; } .cat-cats li > span { min-width: 0; } .cat-cats b { font-family: var(--cat-display); font-weight: 700; color: var(--cat-ink); flex: none; } @media (max-width: 30rem) { /* Stack the label above its description on narrow screens. */ .cat-cats li { flex-direction: column; gap: .15rem; } } .cat-note { border: 1px solid color-mix(in srgb, var(--cat-brand) 34%, transparent); background: var(--cat-brand-wash); border-radius: var(--cat-radius); padding: 1rem 1.15rem; color: var(--cat-ink); } .cat-note :last-child { margin-bottom: 0; } .cat-note strong { color: var(--cat-brand-lift); } /* Status notice inside the hero — registration windows, closures, live state. */ .cat-status { border: 1px solid color-mix(in srgb, var(--cat-brand) 38%, transparent); background: var(--cat-brand-wash); border-radius: var(--cat-radius); padding: .95rem 1.1rem; margin: 0 0 1.6rem; max-width: 56ch; } .cat-status p { margin: 0 0 .5rem; max-width: none; font-size: .97rem; } .cat-status p:last-child { margin-bottom: 0; } .cat-status strong { color: var(--cat-brand-lift); } /* Two-stage event structure: qualification, then finals. The dates carry the sequence, so no ordinal markers are needed. */ .cat-stages { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 46rem) { .cat-stages { grid-template-columns: 1fr 1fr; } } .cat-stages > li { border: 1px solid var(--cat-line); border-radius: var(--cat-radius); background: var(--cat-surface); padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .cat-stages .when { font-family: var(--cat-mono); font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--cat-brand-lift); letter-spacing: .01em; } .cat-stages h3 { font-size: 1.12rem; margin: 0; letter-spacing: -.015em; } .cat-stages p { margin: 0; color: var(--cat-ink-2); font-size: .94rem; max-width: none; } .cat-stages dl { margin: .35rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; font-size: .88rem; } .cat-stages dt { color: var(--cat-ink-3); font-weight: 500; } .cat-stages dd { margin: 0; color: var(--cat-ink-2); } /* The stage that is gated reads as the destination, not just another card. */ .cat-stages > li.is-final { border-color: color-mix(in srgb, var(--cat-brand) 42%, transparent); }