accelerate updates - background

This commit is contained in:
vandorena 2025-10-28 09:51:19 -04:00
parent 64d0b9fa80
commit 0e4f952e54
2 changed files with 65 additions and 2 deletions

View file

@ -297,6 +297,7 @@ function createProgramCard(program) {
const opensClass = program.opens && new Date() < new Date(program.opens) ? 'opens-soon' : '';
const blueprintClass = program.name === 'Blueprint' ? 'blueprint-card' : '';
const accelerateClass = program.name === 'Accelerate' ? 'accelerate-card' : '';
const encodedProgram = encodeURIComponent(JSON.stringify(program));
@ -310,7 +311,7 @@ function createProgramCard(program) {
`<div class="program-participants">${formatParticipants(program.name)}</div>` : '';
return `
<div class="card program-card ${opensClass} ${blueprintClass}" data-program="${encodedProgram}" data-name="${program.name}">
<div class="card program-card ${opensClass} ${blueprintClass} ${accelerateClass}" data-program="${encodedProgram}" data-name="${program.name}">
<div class="program-header">
<h3>${program.name}</h3>
<div class="status-container">

View file

@ -2769,4 +2769,66 @@ html {
.program-card.blueprint-card:hover {
border-color: white !important;
}
}
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
/* ts is for the Accelerate Card - whiteboard theme */
.program-card.accelerate-card {
font-family: "Permanent Marker", cursive !important;
--color-acc-bg: #f8f9fa;
--color-acc-border: #979798;
--color-acc-text: #1a1a1a;
--color-acc-accent: blue;
background: var(--color-acc-bg) !important;
background-color: var(--color-acc-bg) !important;
border: 2px solid var(--color-acc-border) !important;
box-shadow:
inset 0 0 0 8px #979798,
inset 0 2px 8px 8px rgba(0, 0, 0, 0.15),
0 2px 4px rgba(0, 0, 0, 0.08),
inset 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
position: relative;
color: var(--color-acc-text) !important;
}
.program-card.accelerate-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4), transparent 70%);
pointer-events: none;
border-radius: inherit;
}
.program-card.accelerate-card h3,
.program-card.accelerate-card p,
.program-card.accelerate-card .program-deadline {
color: var(--color-acc-text) !important;
position: relative;
z-index: 1;
}
.program-card.accelerate-card a {
color: var(--color-acc-accent) !important;
position: relative;
z-index: 1;
}
.program-card.accelerate-card .program-status {
color: white !important;
position: relative;
z-index: 1;
}
.program-card.accelerate-card:hover {
border-color: var(--color-acc-accent) !important;
box-shadow:
inset 0 0 0 8px #979798,
inset 0 2px 8px 8px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(65, 105, 225, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}